/*-------------------------------------------------------------------------------------------------------
  Allgemein 
-------------------------------------------------------------------------------------------------------*/

/* Web-Font für Icons (für Zeichencode siehe Link "https://fontawesome.com/cheatsheet") */
@font-face {
  font-family: Icons;
  src: url("../Fonts/fa-solid-900.woff") format("woff");
  font-weight: 900;
  font-style: normal; 
}

html, body {
	height: 100%;
}

body {
	margin: 0;
	box-sizing: border-box;
}


/*-------------------------------------------------------------------------------------------------------
  Formulare 
-------------------------------------------------------------------------------------------------------*/

/*####Test Berechung der Höhen
#LeftTreeOrSearch {
	border-bottom: dashed green 1px;
}
#tabArea {
	border: dotted blue 5px;
}
#indexHead {
	border: dotted brown 1px;
}
#treecontainer {
	border: solid cyan 1px;
}
#indexResults {
	border: solid cyan 1px;
}
#RightDetails {
	border-bottom: dashed green 1px;
}
div#treecontainer {
	border-bottom: dashed red 1px;
}
div#indexcontainer ul#indexResults {
	border-bottom: dashed red 1px;
}
*/


span.group {
	border: 1pt solid transparent;
	cursor: default;
    display: block;
}

span.group:hover {
	border: 1pt dotted black;
}

div.rowHeader {
	border: 1pt solid transparent;
	cursor: default;
    display: block;
}

div.rowHeader:hover {
	border: 1pt dotted black;
}


span.attribGroup {
	border: 1pt solid transparent;
	cursor: default;
    display: block;
}

span.attribGroup:hover {
	border: 1pt dotted black;
}

/* Änderungen von Angaben in "Styles.css" */

.sigImage .symbol {
	width: 100%;
	max-width: 20em;
	height: auto;
}

.fmtMuster .symbol {
	width: 100%;
	max-width: 20em;
	height: auto;
}

div.formular > table:first-child {
	margin-top: 0;
}

.secondColumn {
	width: 2.4cm
}

/* Auf und zuklappen */
.expandImage::first-letter {
	/* Im Bundesfont ist das gefüllte Dreieck-rechts sehr flach, daher anderer Zeichensatz für das erste Zeichen */
    font-family: "Times New Roman";
}


/*-------------------------------------------------------------------------------------------------------
  Index
-------------------------------------------------------------------------------------------------------*/

div#indexcontainer {
	background-color: white;
	width: 100%;
	height: 100%;
	font-size: 10pt;
}

div#indexcontainer ul {
	list-style-type: none;
}

div#indexcontainer ul#indexResults {
	overflow-x: auto;
	overflow-y: auto;
}

div#indexcontainer li {
	color: rgb(125, 125, 125);
	white-space: nowrap;
}

div#indexcontainer a {
	color: black;
	text-decoration: none;
}

div#indexcontainer a:hover {
	color: black;
	text-decoration: underline;
}

#indexHead {
	border-bottom: 1px solid #ccc;
	padding-bottom: 4px;
	margin-bottom: 5px;
}

#indexResults {
	margin: 0px;
}

#tbIndex {
	margin: 5px;
	padding: 5px 6px 5px 6px;
	box-sizing: border-box;
	width: calc(100% - 10px);
	border: 1px solid #ccc;
	font-size: 10pt;
	border-radius: 4px;
	color: #555;
	background-color: rgb(255, 255, 224);
}

#tbIndex:focus {
	border-color:#66afe9;
	outline:0;
	-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,0.6);
	box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,0.6);
}

#tbIndex::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: lightgrey;
    opacity: 1; /* Firefox */
}

#tbIndex:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: lightgrey;
}

#tbIndex::-ms-input-placeholder { /* Microsoft Edge */
    color: lightgrey;
}

ul#indexResults {
	margin-left: 0;
	padding-left: 3px;
}

ul#indexResults ul {
	margin-left: 0;
	padding-left: 1.5em;
}


/*-------------------------------------------------------------------------------------------------------
  Kopfbereich
-------------------------------------------------------------------------------------------------------*/

#header {
    min-height: 3em;
}

#header .link {
    text-transform: uppercase;
    background-color:transparent;
    color: #767676;
    text-decoration: none;
    font-size: 12px; 
    font-family:'BundesSans'
}

#header .link:hover {
    color: black;
    text-decoration: underline;
}


/*-------------------------------------------------------------------------------------------------------
  Inhaltsbaum
-------------------------------------------------------------------------------------------------------*/

div#treecontainer {
	background-color: white;
	width: 100%;
	overflow-x: auto;
	overflow-y: auto;
	height: 100%;
	font-size: 10pt;
}

div#treecontainer ul {
	margin: 0;
}

div#treecontainer li {
	list-style-type: none;
	cursor: default;
	padding-top: 3px;
	padding-bottom: 1px;
	border-width: 1px 0;
	border-style: solid;
	border-color: transparent;
}

div#treecontainer li:hover {
	background-color: rgb(171,214,255);
	background-repeat: repeat-x;
	border-style: solid;
	border-color: #759dc0;
	background-image: linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
	padding: 3px 0 1px;
	transition-property: background-color, border-color;
	transition-duration: 0.25s;
	transition-timing-function: ease-out;
}

div#treecontainer li.selected {
	background-color: #cfe5fa;
	background-repeat: repeat-x;
	background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
	background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
	background-image: -o-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
	background-image: linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
	_background-image: none;
	padding: 3px 0 1px;
	border-color: #759dc0;
	color: #000000;
}

div#treecontainer ul {
	padding-left: 0;
	margin-left: 0;
}

span.treeClassIcon {
	padding-left: 16px;
	margin-right: 4px;
	background-image: url('../Images/TreeStructureImages.png');
	width: 16px;
	height: 16px;
	overflow: hidden;
	background-repeat: no-repeat;
}

span.treeExpandIcon {
	padding-left: 16px;
	margin-right: 4px;
	background-image: url('../Images/TreeExpandImages.png');
	width: 16px;
	height: 16px;
	overflow: hidden;
	background-repeat: no-repeat;
}

li[data-type="P"] > span.treeClassIcon {
	background-position: 0px 0px;
}

li[data-type="EP"] > span.treeClassIcon {
	background-position: -16px 0px;
}

li[data-type="Kap"] > span.treeClassIcon {
	background-position: -32px 0px;
}

li[data-type="EKap"] > span.treeClassIcon {
	background-position: -48px 0px;
}

li[data-type="A"] > span.treeClassIcon {
	background-position: -64px 0px;
}

li[data-type="K-F-B"] > span.treeClassIcon {
	background-position: -128px 0px;
}

li[data-type="K-L-B"] > span.treeClassIcon {
	background-position: -144px 0px;
}

li[data-type="K-P-B"] > span.treeClassIcon {
	background-position: -160px 0px;
}

li[data-type="K-L-T"] > span.treeClassIcon {
	background-position: -192px 0px;
}

li[data-type="K-F-U"] > span.treeClassIcon {
	background-position: -208px 0px;
}

li[data-type="K-L-U"] > span.treeClassIcon {
	background-position: -224px 0px;
}

li[data-type="K-P-U"] > span.treeClassIcon {
	background-position: -240px 0px;
}

li[data-type="K-F-D"] > span.treeClassIcon,
li[data-type="K-F-E"] > span.treeClassIcon,
li[data-type="K-F-G"] > span.treeClassIcon,
li[data-type="K-F-S"] > span.treeClassIcon {
	background-position: -256px 0px;
}

li[data-type="K-L-D"] > span.treeClassIcon,
li[data-type="K-L-E"] > span.treeClassIcon,
li[data-type="K-L-G"] > span.treeClassIcon,
li[data-type="K-L-S"] > span.treeClassIcon {
	background-position: -272px 0px;
}

li[data-type="K-P-D"] > span.treeClassIcon,
li[data-type="K-P-E"] > span.treeClassIcon,
li[data-type="K-P-G"] > span.treeClassIcon,
li[data-type="K-P-S"] > span.treeClassIcon {
	background-position: -288px 0px;
}

li[data-type="K-K-D"] > span.treeClassIcon,
li[data-type="K-K-E"] > span.treeClassIcon,
li[data-type="K-K-G"] > span.treeClassIcon,
li[data-type="K-K-S"] > span.treeClassIcon {
	background-position: -304px 0px;
}

li[data-type="EK-T"] > span.treeClassIcon,
li[data-type="EK-K"] > span.treeClassIcon {
	background-position: -416px 0px;
}
li[data-type="EK-P"] > span.treeClassIcon {
	background-position: -432px 0px;
}
li[data-type="EK-L"] > span.treeClassIcon {
	background-position: -448px 0px;
}
li[data-type="EK-F"] > span.treeClassIcon {
	background-position: -464px 0px;
}



li[data-type="K-L-P"] > span.treeClassIcon {
	background-position: -320px 0px;
}

li[data-type="K-P-P"] > span.treeClassIcon {
	background-position: -336px 0px;
}

li[data-type="K-T-P"] > span.treeClassIcon {
	background-position: -352px 0px;
}

li[data-type="K-L-PU"] > span.treeClassIcon {
	background-position: -368px 0px;
}

li[data-type="K-P-PU"] > span.treeClassIcon {
	background-position: -384px 0px;
}

li[data-type="K-T-PU"] > span.treeClassIcon {
	background-position: -400px 0px;
}

span.folderOpen {
	background-position: -36px 0;
}

span.folderIndent {
	background-image: none;
	background-position: 999px 0;
}


span.folderClosed {
	background-position: 0px 0;
}


/*-------------------------------------------------------------------------------------------------------
  Splitter
-------------------------------------------------------------------------------------------------------*/

@media screen {
	.content {
		border: 1px solid #C0C0C0;
		border-bottom: 0px solid white;
	}
}

.split {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	overflow-y: hidden;
	overflow-x: hidden;
}

.content {
	background-color: white;
}

.gutter {
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: 50%;
}

.gutter.gutter-horizontal {
	cursor: col-resize;
	background-image: url('../Images/SplitterVerticalImage.png');
}

.gutter.gutter-vertical:active {
	background-color: red;
}

.split.split-horizontal, .gutter.gutter-horizontal {
	height: 100%;
	float: left;
}

td.editorContent {
	padding: 1mm;
	max-width: 100px; /* Krücke, damit Bilder sich an die Tabelle anpassen, und nicht umgekehrt. */
}


/*-------------------------------------------------------------------------------------------------------
  Tab-Pages
-------------------------------------------------------------------------------------------------------*/

div#tabArea {
	padding: 0px 0px 0px 0px;
	margin: 10px 0px 0px 0px;
	border-bottom: 1px solid rgb(221, 221, 221);
	background-color: white;
	font-size: 11pt;
}

div#tabArea svg {
	height: 11pt;
    width: 12pt;
}

ul.tabs {
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 2px;
}

li.tab {
	border-top: 1px transparent solid;
	border-right: 1px transparent solid;
	border-left: 1px transparent solid;
	border-radius: 4px 4px 0px 0px;
	background-color: white;
	margin-right: 2px;
	padding: 3px 3px 0px 3px;
	cursor: default;
	color: #337ab7;
	bottom: 0px;
	position: relative;
	fill: #337ab7;
}

li.tab:hover {
	background-color: #eee;
	cursor: default;
}

li.tabSelected {
	border-top: 1px rgb(221, 221, 221) solid;
	border-right: 1px rgb(221, 221, 221) solid;
	border-left: 1px rgb(221, 221, 221) solid ;
	border-radius: 4px 4px 0px 0px;
	background-color: white;
	margin-right: 2px;
	padding: 3px 3px 3px 3px;
	cursor: default;
	color: #555;
	bottom: 0px;
	position: relative;
	fill: #555;
}

li.tabSelected:hover {
	background-color: white;
	cursor: default;
}


/*-------------------------------------------------------------------------------------------------------
  Drucken
-------------------------------------------------------------------------------------------------------*/

@media print {
	#header {
		display: none;
	}
	#gutter {
		display: none;
	}
	#LeftTreeOrSearch {
		display: none;
	}
	#RightDetails {
		height: auto !important;
		width: auto !important;
	}
}