/* ID:5309 */
@charset "utf-8";
@font-face {
	font-family: "DejaVuSerifCondensed";
	src:url("/font/DejaVuSerifCondensed.eot?") format("eot"),
		url("/font/DejaVuSerifCondensed.woff") format("woff"),
		url("/font/DejaVuSerifCondensed.ttf") format("truetype"),
		url("/font/DejaVuSerifCondensed.svg#DejaVuSerifCondensed") format("svg");
	font-weight:normal;
	font-style:normal;
}
*:not(dialog) {
	margin: 0;
	padding: 0;
}

/*don't display elements for printout, or always hiddens*/
.print{
	display: none;
}
.hide{
	display: none!important;
}

hr{
	border-top: none;
	border-color: var(--themeColor);
}

header {
	background-color: var(--mainBarColor);
	border-bottom-color: var(--mainBarColor);
}

optgroup{
	background-color: var(--themeColor);
	color:var(--themeFontColor);
}

p {
	margin-top: 2ex;
	&.breakContent{
		&.klein{
			margin-top: 2ex;
		}
		&.mittel{
			margin-top: 4ex;
		}
		&.gross{
			margin-top: 8ex;
		}
	}
}

article,
p,
td {
	a:active,
		a:focus,
		a:hover{
		color: var(--mainBarColor);
	}
}

h1{
	line-height: 2.5ex;
}

video,
iframe.video{
	width: 100%;
	max-width: 60em;
	max-height: 70ex;
}

ol,
ul{
	padding: 0;
	margin: 1ex;
	margin-left: 2em;
}
ul {
	list-style: square;
}

img{
	border: none;
	height: auto;
	&.thumbImg{
		max-width:10em;
		max-height:5em;
	}
}
caption{
	text-align: left;
}

[type="submit"].noButton{
	all: unset;
	background: none;
	border:none;
	cursor: pointer;
	/*text-decoration: underline;*/
	&:hover{
		background: none;
		color:inherit;
	}
}

button[type="submit"]:not(noButton),
input[type="submit"],
button[type="button"],
button[type="reset"],
button,
a.button,
span.button{
	align-items: baseline;
	background: #337ab7;
	border: 1px solid whitesmoke;
	border-radius: 4px;
	cursor: pointer;
	color: white;
	display: inline-flex;
	font: inherit;
	gap: .5em;
	justify-content: center;
	margin-bottom: .5ex;
	margin-right: 1em;
	min-height: 3ex;
	min-width: 4ex;
	padding: .4ex 1ex;
	text-decoration: none;
	&:hover{
		background: #286090;
		color: white;
	}
	&.more{
		margin-left:1em;
	}
	label{
		cursor: pointer;
	}
	&.disabled,
	&:disabled{
		background: grey!important;
		color: lightgrey!important;
		cursor: not-allowed!important;
	}
	&.cancel{
		background-color: var(--cancelColor);
		color: white;
		&:hover{
			filter: brightness(120%);
		}
	}
	&.ok{
		background-color: var(--okColor);
		color: white;
		&:hover{
			filter: brightness(120%);
		}
	}
	i,span{
		&.far,&.fas{
			/* wenn dies nicht 1 ist, sind icons nicht zentriert*/
			font-size: 1em;
			min-height: 1em;
		}
	}
	i:only-child{
		padding: 0;
	}
}

/*color and line height to icons*/
i,span{
	&.far,&.fas{
		line-height: 1.6em;
		&.ok{
			color:green;
		}
		&.cancel{
			color:red;
		}
		&.info{
			color:yellow;
		}
		&.infodialog{
			color: blue;
			padding-right: 1em;
		}
	}
}

input,
select,
textarea,
div.tox-tinymce,
button.ui-multiselect{
	background: white;
	border-radius: 5px;
	border: 1px solid grey;
	box-sizing: border-box;
	font: inherit;
	min-height: 4ex;
	padding: 4px 0 3px 4px;
	&:disabled{
    background: lightgrey!important;
    border-color: #a6a6a6;
		color: black;
		opacity: 1;
		-webkit-text-fill-color:black;
	}
}

select,
textarea{
	text-indent: unset;
}

textarea{
	padding: 1ex 1em;
}

b,
strong{
	font-weight: bold;
}

input{
	/*fix für lupe in iOS*/
	&[type="search"]{
		-webkit-appearance: none;
	}
	&[type="date"]{
		min-width:12em;
		width:12em;
		text-indent: .3em;
	}
	&[type="time"]{
		min-width: 7em;
		width:7em;
		text-indent: .3em;
	}
	&[type="datetime-local"]{
		min-width: 14em;
		width:14em;
		text-indent: .3em;
	}
	&[type="radio"],
	&[type="checkbox"]{
		height: auto;
		border: none;
		vertical-align: middle;
		margin: 3px 0px;
	}
	&[type="radio"]{
		border: 1px solid grey;
	}
	&.pwdField{
		-webkit-text-security: disc;
		text-security: disc;
	}
}

input:focus,
textarea:focus{
	background-color: #EEEEEE;
}

a {
	color: inherit;
}

acronym {
	border-bottom-color: #CC3300;
	border-bottom-style: dashed;
	border-bottom-width: 1px;
	cursor: help;
}

/* Seitenbereiche Allgemein*/
html{
	background-color: #F3F3F3;
	font: 16px "liberation_sansregular", sans-serif;
	/* Layout-Verschiebungen durch scrollbar vorbeugen */
	scrollbar-gutter: stable;
}

body {
	background-color:white;
	font-size:.8em;
	line-height:1.6em;
	margin-left:auto;
	margin-right:auto;
	max-width: 1900px;
	min-height:100ex;
	overflow: auto;
	padding: 0;
	&.innerPage{/*we display this inside an iframe (showInnerpage)*/
		/*used to eleminate frameset & load the page inside a frame */
		header#kopf,
		#nav,
		#sidebar,
		footer#schluss,
		#hauptbild,
		#navButton,
		#sidebarButton,
		#sidebarShow,
		.ersteller{
			display:none!important;
		}
		main#content{
			margin:.5em;
		}
		#main{
			/* fester Wert führt zu unnötiger scrollbar*/
			min-height: 100vh;
		}
		body{
			padding: 0 0 6ex 0;
		}
		.container-text,
		article {
			padding-top: .5ex;
			margin:0;
		}
	}
	h1,h2 {
		font-weight: normal;
		font-size: 1.8em;
		line-height: 1.3em;
		font-family: "liberation_sansregular", sans-serif;
		margin-bottom: 1ex;
	}

	h3 {
		font-size: 1.3em;
		margin-bottom: .5ex;
		margin-top: .5ex;
	}

	h4 {
		font-size: 1.1em;
		padding-bottom: .2em;
		padding-top: .5em;
	}
	h3,
	h4{
		font-weight: bold;
		i{
			min-width: 1.7ex;
			margin-right: .3ex;
			text-align: center;
		}
	}
}

address{
	font-style: normal;
}

span.cutText{
	display:inline-block;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}
main{
	color: var(--mainfontColor);
}
#main {
	display: flex;
	margin: 0;
	min-height:100ex;
	position: relative;
	width: 100%;
}

header#kopf{
	height:var(--headerHeight);
	font-size:1rem;
	overflow: hidden;
	padding-bottom: 1em;
	position: relative;
	/* ANFANG Besttandteile von #kopf*/
	#headerTopBar{
		display: none;
	}
	/* still needed? found CE-Kennung*/
	#kennung {
		color: #000000;
		font-family: "liberation_sansregular", sans-serif;
		font-size: .8em;
		line-height: 1.45em;

		/*still needed?*/
		div.grau{
			min-height: 2ex;
		}
		a {
			text-decoration: none;
			&:hover {
				color: #000000;
			}
		}
	}

	div.flexRow.flexSpace{
		align-items: center;
		background: white;
		height: 100%;
	}

	.user{
		align-items: center;
		background: var(--themeColor);
		color:white;
		height: 100%;
		width:calc( var(--sidebarWidth) + 2rem);
	}
	.userData{
		align-content: space-between;
		display:grid;
		font-size: .7rem;
		height: 65px;
		line-height: .9rem;
		padding-top: .3rem;
		width: calc(var(--navWidth) - 5.5rem);
		span.cutText{
			width: calc(var(--navWidth) - 5.5rem);
		}
	}

	.passbild{
		padding-left: 1em;
		width: 3.5rem;
		img{
			background-color: white;
			border-radius: 5px;
			margin-top:.3rem;
			max-height:3rem;
			max-width: 3rem;
			padding: 1px;
			width: auto;
		}
	}
	#logo {
		align-items: center;
		display: flex;
		height: calc(var(--headerHeight) - 3rem);
		justify-content: center;
		position: relative;
		width: var(--navWidth);
		img{
			height:auto !important;
			max-height:calc(var(--headerHeight) - 1.5rem);
			max-width:var(--sidebarWidth);
			width: auto !important;
		}
	}
	#hauptbild {
		color: var(--themeColor);
		#preCaption {
			font-size: 1.4rem;
			font-weight: bold;
			letter-spacing: 3px;
		}
	}
}

main#content,
header#kopf #hauptbild {
	display: flex;
	flex-basis: 20em;
	flex-direction: column;
	flex-grow: 1;
	flex-shrink: 1;
	min-width: 20em;
	overflow-y: visible;/* dies muss Overflow auto mit definierter höhe sein, damit stickbottom funktioniert oder overflow visible, dann basiert sticky auf Elternelement*/
	padding: 0 var(--mainSidesPadding);
	position:relative;
}
header#kopf{
	#hauptbild{
		background-position: right;
		background-repeat: no-repeat;
		border-radius: 5px;
		cursor:pointer;
		display: flex;
		font-size: .7em;
		height:100%;
		justify-content: center;
		position: relative;
		text-align: left;
		h1{
			color: var(--themeColor);
		}
		h1,h2 {
			padding-left: .6em;
			padding-top: .3em;
			position: absolute;
			z-index: 1;
			span{
				display:block;
				height:2.5ex;
				letter-spacing: 1px;
				overflow:hidden;
			}
		}
		img{
			max-height: 50%;
			max-width: 100%;
			position: absolute;
			right: var(--mainSidesPadding);
			transform: translateY(-50%);
			top: 50%;
			width: auto;
			&[src*=\.svg] {
				height: 100%;
			}
		}
		img.updateHauptBild{
			border-radius: 5px;
		}
		img + img{
			display:none;
		}
		/* Trennstrich*/
		&::before{
			border-left: 1px solid lightgrey;
			content: '';
			height: 66%;
			position: absolute;
		}
		&::before{
			left: 0;
		}
		&::after{
			right: 0;
		}
	}
}

main#content{
	padding-top: var(--topLevelPadding);
	background-color: #FBFBFB;
}

main#content,
dialog{
	table[border]{
		border-style:solid;
		border-color:grey;
		border-collapse:collapse;
		border-spacing:2px;
		margin: 1ex 0 0 1ex;
		&:only-of-type{
			/* Allein stehendes Element braucht kein Margin*/
			margin-left: 0;
		}
	}
	input[type="checkbox"] + label,
	input[type="radio"] + label	{
		border-radius: 5px;
		margin-left:1ex;
		padding: 1ex;
		+ input{
			margin-left:3em;
		}
	}
}

tr[onclick]{
	cursor: pointer;
}

article{
	margin-bottom:1em;
	overflow-x:auto;
	position:relative;
}

footer#schluss {
	border-top: 1px solid grey;
	clear: both;
	color: grey;
	font-size: .7rem;
	height: calc(var(--headerHeight) - 1rem);
	margin-bottom: .1em;
	padding-top: 1ex;
	position: relative;

	p a,
	p,
	div a,
	div,
	nav,
	nav a {
		color: grey;
		font-weight: normal;
	}
	nav#text-nav:after{
		content: '|';
		position: absolute;
		right: -2px;
	}
	#navImp{
		padding-right: 1rem;
	}
	a {
		color: black;
		text-decoration: none;
		&:hover {
			text-decoration: underline;
		}
	}

	div.flexRow {
		align-items: center;
		height: 100%;
		margin:0;
	}
	#footer-1{
		padding-left: 1rem;
	}
	#footer-2{
		padding-right:1rem;
		position: relative;
		text-align: right;
	}

	#footer-server{
		color: lightgrey;
		position:absolute;
		right: 2em;
		top: -1.5em;
	}

	#footerlogo{
		height: auto;
		margin-left: 1rem;
		width: 8em;
	}
	.powerdiv{
		display:flex;
		justify-content: left;
		line-height: 2em;
		padding: 0 1rem;
		position: relative;
		width: var(--sidebarWidth);
		a{
			/* iOS Darstellungsproblem behoben durch Grid*/
			display: inline-grid;
			grid-template-columns: max-content min-content;
			#poweredBy{
				align-self: center;
			}
			#footerlogo {
				bottom: 9px;
				position: relative;
			}
		}
	}
	.secure{
		flex-grow: 1;
		gap: 1em;
		justify-content: center;
	}
}

/* Verschiedene Spaltendefinitionen*/

.spalte-50,
.spalte-50-r,
.spalte-33{
	box-sizing: border-box;
	/*color: #333333;*/
	min-width:25em;
	overflow-y: hidden;
	padding-bottom:1ex;
	padding-right: 1em;
	width: 50%;
}
.spalte-33 {
	min-width:20em;
	width: 33%;
}

div.spalte-line{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

div.flexInput{
	align-items: baseline;
	display: flex;
	flex-wrap: nowrap;
}

div.floatingTabs{
	background: #FBFBFB;
	position: sticky;
	top: 0;
	z-index: 1;
}

/* Main in dialogen hat padding*/
dialog div.floatingTabs{
	top: -7px;
}

.ersteller {
	align-items: center;
	border-top: 2px solid #666666;
	color: #666666;
	display:flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding-top: .5em;
	width: 100%;
	div{
		margin-right: 1em;
	}
}

/*dir-Index*/
div.tableWrapper.directoryIndex{
	width: 100%;
	table.directoryIndex{
		max-width:80em;
		width:100%;

		td.nderungsdatum{
			width:8em;
		}
		.Titel{
			width: 30%;
		}
	}
}

/* auf Startseite ggfs als inline?*/
.rot{
	color:red;
}
ul.nostyle{
	list-style: none;
}

/* Ansprechpartner in #sidebar
 still needed?*/
.ansprechpartner {
	margin-top: -1em;
	img {
		margin-top: 1.5em;
		margin-bottom: 2em;
	}
}

div.Anlagen{
	background-color: #f3f3f3;
	border:1px solid grey;
	margin-top:1em;
	margin-bottom:1em;
	max-width: 30em;
	position:relative;
}

/*fix schlechte Lesbarkeit*/
abbr[title]{
	text-decoration: underline;
}

/*Highlight target of an anchor*/
:target{
	animation: highlight 5s ease-in-out;
}

/* in Tabs kein highlighting*/
.ui-tabs :target{
	animation: none;
}

@keyframes highlight {
	50%	{
		background: yellow;
	}
}
/*end Highlight target of an anchor*/

a.fileicon{
	white-space: nowrap;
	/*bspw. Gefahrstoffverzeichnis*/
	&::before{
		content:var(--fa-var-file);
		display:inline-block;
		font-family: var(--fa-font);
		font-size: inherit;
		font-style: normal;
		font-variant: normal;
		font-weight: 400;
		line-height: 1;
		text-rendering: auto;
		padding-right: .5em;
	}
	&.liIcon::before{
		left: -1em;
		margin-right: -0.5em;
		padding: 0;
		position: relative;
	}
	&[href*=".pdf"],
	&.pdf{
		&::before{
			content:var(--fa-var-file-pdf);
		}
	}
	&[href*=".doc"],
	&[href*=".docx"],
	&.doc,
	&.docx,
	&.dot,
	&.dotx,
	&.odt,
	&.ott{
		&::before{
			content:var(--fa-var-file-word);
		}
	}
	&[href*=".ppt"],
	&[href*=".pptx"],
	&.ppt,
	&.pptx,
	&.ppsx,
	&.odp,
	&.otp{
		&::before{
			content:var(--fa-var-file-powerpoint);
		}
	}
	&[href*=".xls"],
	&[href*=".xlsx"],
	&.xls,
	&.xlsx,
	&.xlt,
	&.xltx,
	&.ods,
	&.ots{
		&::before{
			content:var(--fa-var-file-excel);
		}
	}

	&.odg,
	&.otg,
	&.jpg,
	&.jpeg,
	&.gif,
	&.png{
		&::before{
			content:var(--fa-var-file-image);
		}
	}

	&[href*=".zip"],
	&[href*=".rar"],
	&.zip,
	&.rar	{
		&::before{
			content:var(--fa-var-archive);
		}
	}
	&[href*=".txt"],
	&.txt{
		&::before{
			content:var(-fa-var-file-alt);
		}
	}
	&[href*=".html"],
	&[href*=".php"],
	&.html,
	&.php{
		&::before{
			content:var(--fa-var-link);
			font-weight: 900;
		}
	}
}

figure[onclick] div.img{
  position:relative;
	&::before {
		bottom:0;
		color:darkgrey;
		content:var(--fa-var-external-link-alt);
		font-family: var(--fa-font);
		font-size: inherit;
		font-style: normal;
		font-variant: normal;
		font-weight: 900;
		line-height: 1;
		position: absolute;
		right: 1ex;
	}
}

/* Inhalte in tabs/akkordions verbergen, bis js ganz geladen*/
div.tabs{
	visibility:hidden;
}
i.color.far.fa-circle{
	color:red;
}

i,
span{
	&.color.fas.fa-adjust{
		color:orange;
	}
}
i.color.fas.fa-circle{
	color:green;
}
i.color.fas.fa-forward{
	color:blue;
}
.warnung {
	i.color.far.fa-circle{
		color:white;
	}
	hr {
		border-color: white;
	}
}

button span.fa-stack{
	/* Kamera + QR*/
	font-size: 9px;
}

/* fa-flip-padding*/
:root .fa-flip-horizontal {
	padding-left: .5em;
	padding-right: 0;
}

i.fas.fa-spinner{
	line-height: 1;
}

/*debug*/
pre{
	overflow: auto;
}

body.screenshot{
	max-width:750px;
	&.screenshotXL{
		max-width:1050px;
	}
	&.screenshotL{
		max-width:850px;
	}

	min-height: unset;
	.stickBottom, .stickTop{
		position: static;
	}
	#content{
		padding:0 !important;
	}
	#main{
		min-height: unset;
	}
	&.screenshotM aside,
	#mainResize,
	#logo,
	footer,
	.user,
	&.screenshotM nav,
	&.screenshotL nav {
		display:none !important;
	}
	#debugInfo{
		.noscreenShot{
			display:none;
		}
		button.hide{
			display: unset!important;
		}
	}
}

summary.colorful{
	background: var(--accordionColor);
	color: var(--accordionFontColor);
	padding-left: 1ex;
}

/* fix für article-overflow in unseren Tools*/
body.qmTools article {
	overflow: initial;
}

.unregistered{
	/* Browserwarnung zentriert anzeigen*/
	.warnung{
		margin: 0 auto;
	}
}

.fitImg{
	cursor: zoom-in;
	max-width: 100%;
}

/*accordion Hauptebene*/
details.content summary,
details.filter summary{
	border-radius: 5px;
	background: var(--accordionColor);
	color: var(--accordionFontColor);
	font-size: 1.1em;
	font-weight: bold;
	margin-top: 2px;
	padding: .5em .5em .5em .7em;
	i{
		margin-right: 0.3ex;
		min-width: 1.7ex;
		text-align: center;
		width: 1.2em;
	}
}

details.content{
	margin-top: 1ex;
}

details.content	details,
details.light{
	summary{
		background: #EDEDED;
		color: var(--themeColor);
	}
}

details.content,
details.filter{
	summary{
		cursor: pointer;
		position: relative;
		transition: margin 150ms ease-out;
		&::marker{
			font-size: 1.2em;
		}
	}
	&[open]{
		summary{
			margin-bottom: 0.5ex;
			&[inert] {
				display: block;
				padding-left: 2em !important;
				&::-webkit-details-marker {
					display: none;
				}
			}
		}
	}
}

details.filter{
	display: inline-block;
	&[open]{
		display: block;
	}
}

/* indent 2nd level*/
details details{
	margin: 0 0.7ex;
}

article:has(details.content) {/* fix Abstand zw. Artikeln - zugeklappt ist das störend */
  margin-bottom: 0;
}