/* Farbkombinationen 
  Polizeifarbe: #2C8CC9
  Polizeifarbe transparenter: rgba(44, 140, 201, 0.1)
  Dunkler: #0069b4
  Dunkler transparenter: rgba(6, 87, 140, 0.1)
  Heller: #4E9FD4
*/

body {
	width:100%;
   	display: flex;
   	min-height: 100vh;
   	flex-direction: column;
}

/* Der ETR Switch schaltet das body.etr an und aus, dadurch werden alle Textressorource mit der Class etr/norm an/aus geschaltet */
body.etr .etr { display:block; }
body .etr { display:none;line-height:2; }
#topline #easytoread .etr {line-height:unset;}
body.etr .norm { display:none; }
body .norm { display:block; }

#main {
   	flex: 1 0 auto;
}

#notfallDiv {
	text-align: center;
	color: white;
	background-color: #e0003c;
	font-size: 120%;
	height: 40px;
	padding-top: 5px;
}

/* Input Felder */
.input-field, input, textarea {
	margin-bottom: 0 !important;	
}

.input-field > input, .input-field > .select-wrapper > input {
	width: calc(100% - 20px) !important;
}

.input-field > input, .input-field > textarea, .input-field > .select-wrapper > input {
  background-color: rgba(44, 140, 201, 0.1) !important;
	border-radius: 5px !important;
	border-bottom: 0 !important;
	padding-left: 10px !important;
	padding-right: 10px !important;	
	box-shadow: none !important;
}

.input-field > input.invalid, .input-field > textarea.invalid, .input-field > .select-wrapper > input.invalid {
	border-bottom: 0 !important;
	-webkit-box-shadow: none !important;
  box-shadow: none !important;
}

div.input-field i.mdi, i.mdibutton { font-size:140%; cursor:pointer }
 
input:focus, textarea:focus {
  	border-bottom: none!important;
  	box-shadow: none!important;
}

textarea:not(.sachverhalt) {
	min-height: 130px !important;
}

textarea.sachverhalt {
	min-height: 200px !important;
}

textarea.sachverhalt:not(:focus) + label:not(.active) {
	height: auto !important;
	margin-top: 0;
}

.input-field label {
	display: flex;
	align-items: flex-end;
	height: 3em;
	margin-top: -1.45em;
	padding-left: 10px;	
}

/* Die Icons bei den Drop Downs sind sonst zu klein */
div.select-wrapper > ul > li > img {width:96px; height:96px}

label {
	color: #777 !important;
}

label > i {
	z-index: 1000;
	position: relative;
}

label.emphasis {color: inherit !important;}
label.active, .select-wrapper + label {
	color: #2276aa !important;
}

.select-wrapper + label {
	top: -30px !important;
}


div.radioDiv { padding-top:1em ! important; padding-bottom:0em ! important; }

div.progress { background-color: lightgrey; }

/* Nicht selektierte Radiobuttons werden ausgegraut*/
.notChecked + span {
	color: #939393 !important;
}
.notChecked + span::before, .notChecked + span::after {
    border: 2px solid #939393 !important;
}
.notChecked + span:hover {
	color: #444 !important;
}
.notChecked + span:hover::before, .notChecked + span:hover::after {
    border: 2px solid #444 !important;
}


/* Die Links sollen Polizeifarbe bekommen */
.fas, a { color:#2C8CC9; }
a:hover { cursor:pointer;} 

div.messagebox { border-radius:3px; padding:1em;padding-top:0.5em;padding-bottom:0.5em; }
div.summaryinfo { border-radius:3px;}
span.summarylabel { font-variant:small-caps;}

div.navigation { font-size:140%; }
div.navigation li { padding:0.3em; padding-left:0.5em;}
div.navigation li.disabled { color: #c9c9c9; }
div.navigation ul { list-style-type:none;margin-bottom:0 }
div.navigation li.iconNavElement {padding-top:0.5em;padding-bottom:0.5em;}

div.summaryinfo {color:#666;}

.owatoast {color:#444; background-color:#ddd; cursor: pointer; }

textarea.sachverhalt + label > .norm,
textarea.sachverhalt + label > .etr {
	position: absolute;
	top: 20px;
}

/*
div.row { border:2px solid red;}
div.col,label.col { border:2px solid green;}
*/

div#allrightsInFooter { color: #bbb; }


/* Kacheln bei den Bundesländern */
.colBundesland {
	margin-bottom: 30px;
	display: flex;
  	flex-direction: row;
  	justify-content: center;
  	align-items: center;
}

.colBundesland a {
	font-size: 200%;
	width: 85%;
	height: 100px;
	border: 1px solid #0069b4;
	background-color: #0069b4;
	padding: 0px 20px;
	display: flex;
  	align-items: center;
	color: white;
}

.colBundesland a:hover {
	background-color: #2C8CC9;
}

.colBundesland img {
  	float: left;
  	margin-right: 20px;
 	width: 50px;
}

.colBundesland i.mdi {
  	font-size: 170%;
}


/* Mobile Devices <= 600px = s
   Tablet Devices > 600px	= m 
   Desktop Devices > 992px = l
    
   !important sorgt dafür, dass die mit jQuery gesetzten CSS Angaben überschrieben werden
   */

div#header { margin-bottom:0; width:inherit;height: 96px;background-color:white;}
div#headerleft, div#headercenter, div#headerright, #logo_polizei_left, #logo_polizei_right { height:96px;}
div#headerleft {padding: 0;}
div#headerright {  text-align:right; }
div#headercenter { line-height:96px;text-align:right;padding-right:1em;}

/* Nur bei L */ 
@media (min-width:993px) {
	
	div#headerleft {background-color:#0069b4} 
	div#headercenter {font-size:300% !important;  color: white;  background-color:#0069b4} 
	
	#header, #navigation {position: relative; z-index: 3;}
	div.navigation li { border-left: 0.2em solid #2C8CC9; }
	div.navigation li.active {  margin-left: 2em; border: none;} /* font-weight:bold;  */
	div.navigation a:hover {color: #2C8CC9; }
	
	div#roottilesDiv {display: none;}
	
	#logo_polizei_left {display:none;}
	
	.col.l0 {display: none;}
	
	#topline {
		font-size: 120%;
		margin-bottom: 0;
		padding-bottom: 0;
		box-shadow: 0px 5px 5px -3px lightgray;
		position: relative; 
		z-index: 3;
		background-color: #eee;
	}
	
	#breadcrumb {
		padding-top: 0.4em;
		color: #888;
	}
	
	#easytoread {
		padding-top: 0.4em;
		color: #888;
	}
	
	/*  Navigation mit farbgigem Hintergrund ANFANG */
	body:after {
		content: "\A";
		position: fixed;
		background: #0069b4;
		top: 0;
		left: 0;
		width: 25%;
		height: 100%;
		z-index: 1;
		box-shadow: 0px 0px 10px lightgray; 
	}
	
	#content {padding-left: 30px;}
	
	#navigation { background: #0069b4; padding: 0;}
	div.navigation li { border: none !important; color: white;}
	div.navigation li.active {  margin-left: 0em !important; } 
	div.navigation a:hover {color: #2C8CC9; }
	
	div.navigation li a,
	div.navigation li a:hover {
		color: white;
	}
	
	div.navigation li.active,
	div.navigation li:hover,
	div.navigation li.currentPage{
		background-color: #2C8CC9;
		color: white;
	}
	
	div.navigation li.disabled, 
	div.navigation li.disabled:hover {
		background-color: transparent;
		color: #4E9FD4 !important;
	}
	
	div.colBundesland a { font-size: 200%; }
	
	
	/*  Navigation mit farbgigem Hintergrund ENDE */
	
	.show-bg {background: linear-gradient(to top, transparent 0%, white 60%), url("Hintergrundbild_klein.png"); background-repeat: no-repeat; background-position: right bottom; margin-bottom: 5px;}	
}
@media (min-width:1500px) {
	.show-bg {background-size:75%; padding-bottom: 350px;}
}
@media (max-width:1499px) and (min-width:1300px) {
	.show-bg {background-size:80%; padding-bottom: 350px;}
}
@media (max-width:1299px) and (min-width:1100px) {
	.show-bg {background-size:85%; padding-bottom: 350px;}
}
@media (max-width:1099px) and (min-width:993px) {
	.show-bg {background-size:95%; padding-bottom: 350px;}
}

/* Nur bei S und M */
@media (max-width:992px) {

	body { margin-top:96px; }
	
	div#header { width:100%; position:fixed; top:0; background-color:white; z-index:500;}
	div#headercenter {font-size:240% !important; color: #0069b4;  background-color:transparent; padding-left: 50px; text-align: center;} 
	
	#logo_polizei_right {display:none;}
	
	div#easytoread, div#notfallDiv { padding-top:0.4em; text-align:center; color: white; height:2.2em; font-size:120% }
	div#notfallDiv {background-color:#e0003c;}
	div#easytoread {background-color:#eee;}
	
	.nav-open::before {
	    opacity: 1;
	    width: 100%;
	    height: 100%;
	    content: '';
	    position: fixed;
	    left: 0;
	    top: 0;
	    background: rgba(0, 0, 0, 0.5);
	    z-index: 998;
	    transition: opacity 0.2s;
	}
	
	div.navigation { 
		position: fixed;
		bottom: 0;
		left: auto !important;
		right: calc(2.75rem - 110vw) !important;
		background: #2C8CC9;
		width: calc(100vw - 2.75rem) !important;
		transition: all 0.4s;
		z-index: 999;
		overflow: hidden;
		box-shadow: -3px 3px 7px rgba(0, 0, 0, 0.25);
		padding: 0 !important;
	}
	
	div.navigation ul {
		margin: 0;
	}
	
	div.navigation li {
		padding-left: 1em;
	}
	
	div.navigation li a,
	div.navigation li a:hover {
		color: white;
		display: block;
	}
	
	.nav-open div.navigation {
		right: 0 !important;
	}
	
	div.navigation a {color: #edf0f0;}
	div.navigation a:hover {color: #edf0f0;}
	
	div.navigation li.active,
	div.navigation li:hover {
		background-color: rgba(6, 87, 140, 0.4);
		color: white;
	}
	
	div.navigation li.currentPage {
		background-color: #0069b4;
		color: white;
	}
	
	div.navigation li.disabled, 
	div.navigation li.disabled:hover {
		background-color: transparent;
		color: #0069b4;
	}
	
	/* Mobil Nav */
	#navIcon {
	  position: fixed;
	  right:0;
	  top:0;
	  transform: rotate(0deg);
	  transition: 0.5s ease-in-out;
	  cursor: pointer;
	  width: 4rem;
	  padding: 0;
	  text-align: center;
	  margin-right: 0;
	  color: #2C8CC9 !important;
	  display: block;
	  z-index: 998;
	  font-size: 300%;
	  vertical-align: middle;
	  display: flex;
      justify-content: center;
      align-items: center;
	}
	
	#mobileNav {
		margin: 0;
	}
	
	#mobileNav .col {
		min-height: 0 !important;
	}
	
	#mobileNav.open #navIcon {
		background-color: #0069b4 !important;
		color: white !important;
	}
	
	/* zurück zur vorherigen Navigation */
	#navBackIcon {
		position: fixed;
		left: -3rem;
		width: 2.75rem;
		height: 2.5rem;
		background: #0069b4;
		text-align: center;
		line-height: 3rem;
		color: #fff !important;
		z-index: 1000;
		transition: all 0.5s;
	}
	
	#navBackIcon.active {
		left: 0rem;
	}
	
	#navBackIcon:hover {
		color: #2C8CC9 !important;
	}
	
	#navBackIcon:before {
		content: '<';
		font-weight: bold;
		font-size: 25px;
		position: relative;
		bottom: 5px;
	}
	
	/* Zur nächsten Navigation */
	.mobileNav_forward {
		position: relative;
	}
	
	.mobileNav_forward:before {
		position: absolute;
		content: '>';
		font-weight: bold;
		font-size: 25px;
		width: 2.75rem;
    	height: 2.5rem;
		color: white;
		bottom: 0;
		right: -5px;
	}
    
    div.colBundesland a { font-size: 170%; }
    
    div#roottilesDiv {display: block;}
}

/* Nur bei M */
@media (max-width:992px) and (min-width:601px) {
	
	div#headercenter {font-size:240% !important; }
	div.navigation { font-size:120% !important;}
	
	.col.m0 {display: none;}
	
	#navigation,
	#navBackIcon {
		top: 96px;
	}
	#navIcon {
	  height: 96px;
	}	
	
	div.colBundesland a { font-size: 140%; }
}

/* Nur bei S */
@media (max-width:600px) {

	body { margin-top:64px; }
	
	div#header { height: 64px; }
    div#headerleft, div#headercenter, div#headerright, #logo_polizei_left, #logo_polizei_right { height:64px;}
    div#headercenter { line-height:64px;font-size:181% !important; }
	div.navigation { font-size:120% !important; }
	
	.col.s0 {display: none;}
	
	#navigation,
	#navBackIcon {
		top: 64px;
	}
	
	#navIcon {
	  height: 64px;
	}
	
	div.colBundesland a { font-size: 120%; }
}

@media (max-width:1300px) {
	div#headerright {text-align: center;}
	#logo_polizei_right {height: 70px; margin-top: 10px;} 
}

@media (max-width:450px) {
	div#headercenter {display: none;} 
}