@import url("../../css/stylestyle.css");
@import url("buttons.css");

label {	margin-left: 20px; margin-right: 5px; }

#kinderheader, #kinderfooter { display: none; }

input[readonly] { color: var(--schriftcolor); }

.wrap {	width: 100%; height: 100%; position: relative; margin: 0; padding: 0; }

/* .h2_index { background-color: var(--color-navbar); } */


#kinderdropdownAufnahme { height: 30px; z-index: 2;}

/* #kinderdropdown { position: absolute; top: 47px; width: 320px; font-size: 13px; height: 30px; z-index: 2;} */
#kinderdropdown { width: 115px; font-size: 13px; height: 28px; margin-top: 5px; }

/* ------------------- navbar ------------------------ */
.navbar {
	/* font-family: 'Raleway', sans-serif; */
	width: 100%;
	overflow: hidden;
	background-color: var(--bg-navbar);
	/* position: absolute; */
}

.navbar a {
	float: left;
	font-size: 14px;
	letter-spacing: 1px;
	color: var(--background);
	text-align: center;
	padding: 11px 10px;
	text-decoration: none;
}
	
.navbarspan { letter-spacing: 1px;	}

.subnav { float: left; overflow: hidden; }

.subnav .subnavbtn, .adminnav .adminnavbtn {
	font-size: 14px;
	border: none;
	outline: none;
	color: var(--background);
	padding: 11px 10px;
	background-color: inherit;
	font-family: inherit;
	margin: 0;
}
	
.navbar a:hover, .subnav:hover .subnavbtn, .adminnav:hover .adminnavbtn { color: var(--color-navbar); }
	
.subnav-content, .adminnav-content {
	display: none;
	position: absolute;
	background-color: var(--bg-navbar);
	z-index: 1;
}
	
.subnav-content a, .adminnav-content a {
	float: left;
	color: var(--background);
	text-decoration: none;
	padding: 5px 10px;
}
	
.subnav-content a:hover {
	/* background-color: #e6e; */
	color: var(--color-navbar);
	/* color: black; */
}
	
.subnav:hover .subnav-content {
	display: block !important;
	z-index: 8000;
}
	
.navselected {
	color: var(--color-navbar)!important;
}

.footbar {
	/* font-family: 'Raleway', sans-serif; */
	width: 100%;
	overflow: hidden;
	background-color: var(--bg-navbar);
	/* position: absolute; */
}

/* ------------------ tabellenkram -----------------------*/

#raumliste { float: left; height: 97%; overflow: scroll; scrollbar-width: none; -ms-overflow-style: none; }

#raumliste::-webkit-scrollbar {	display: none; }

#kinderliste { float: left; height: 97%; margin-left: 18px; overflow: scroll; overflow-x: hidden; }

#raumtablette thead th, #kindertablette thead th { position: sticky; top: 0px; }

#raumtablette { width: 320px; }

#kindertablette:focus { outline: none;}

.tablette, .rablette, .ablette, .kablette { font-size: 15px; border-spacing: 0; border-collapse: collapse; }

.tablette thead th, .rablette thead th, .ablette thead th { top: 36px; background: var(--bg-table); padding-top: 7px; padding-bottom: 7px; padding-left: 5px; padding-right: 5px; position: sticky; }

.tablette tr:nth-child(odd), .rablette tr:nth-child(odd), .ablette tr:nth-child(odd), .dablette tr:nth-child(odd), .tdablette tr:nth-child(odd), .kablette tr:nth-child(odd) { background-color: var(--bg-odd-table); }

.tablette tr:last-child, .rablette tr:last-child, .ablette tr:last-child, .dablette tr:last-child, .tdablette tr:last-child, .kablette tr:last-child { border-bottom: 1px solid var(--bg-table); }

.tablette td, .rablette td, .ablette td, .kablette td { padding: 2px 5px; border: 1px solid var(--bg-table); border-bottom: 0px; border-top: 0px;}



.dablette { font-size: 10px; border: 1px solid var(--bg-table); border-spacing: 0; border-collapse: collapse; }

.tdablette { font-size: 15px; border: 1px solid var(--bg-table); border-spacing: 0; border-collapse: collapse; }

.dablette th, .dablette td, .tdablette th, .tdablette td, .kablette td { border: 1px solid var(--bg-table); }

.tdablette th, .tdablette td { padding: 3px 5px;}

#notliste thead th { top: 0px; }

.table-hof { height: 100vh; overflow-y: auto; overflow: hidden; }



/* leere Felder volle Höhe */
td:empty::after{ content: "\00a0"; }

/* hier beginnt das modal */
.kindlayer, .personallayer, .reglayer {
	background: rgba(0, 0, 0, 0.5);
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	right: 0;
	z-index: 12;
	border: 1px solid var(--bg-navbar);	
}

.kindlayer-content {
	background-color: var(--background);
	position: relative;
	border-radius: 14px;
	top: 10%;
	width: 990px;
	height: 580px;
	margin: auto;	
	padding-left: 20px;
	font-size: 13px;
}

.personallayer-content {
	background-color: var(--background);
	position: relative;
	top: 22%;
	width: 80%;
	width: 1090px;
	height: 201px;
	margin: auto;	
	/* padding-top: 5px; */
	font-size: 12px;
}

.reglayer-content {
	background-color: var(--background);
	position: relative;
	border-radius: 14px;
	top: 15%;
	width: 460px;
	height: 365px;
	margin: auto;	
	padding-left: 20px;
	font-size: 13px;
}

#alarmlayer {
	/* background-color: var(--dunkelrosa); */
	background-color: var(--color-navbar);
	font-size: 13px;
	border: 1px black dotted;
	padding: 3px;
}

.kidtablette { font-size: 13px; border-spacing: 0; border-collapse: separate; border: 1px solid var(--bg-table); }

.kidtablette td, .kidtablette th { padding: 0px 5px; border: 0px solid var(--bg-table); }

.kidtablette th { background: var(--bg-table); color: var(--schriftcolor); }

.kidtablette tr th:first-child, .kidtablette tr:first-child th { border-left: 1px solid var(--bg-table); }

.kidtablette tr:nth-child(odd), #abholpanel tr:nth-child(odd) { background-color: var(--bg-odd-table); }

#abholpanel, #alleingehpanel { border-radius: 4px; }

#abholpanel tr:last-child td:first-child, #alleingehpanel tr:last-child td:first-child { border-bottom-left-radius: 4px; }
#abholpanel tr:last-child td:last-child, #alleingehpanel tr:last-child td:last-child { border-bottom-right-radius: 4px; }

#abholpanel tr:first-child th:first-child, #abholpanel tr:first-child td:first-child, #alleingehpanel tr:first-child th:first-child, #alleingehpanel tr:first-child td:first-child { border-top-left-radius: 4px; }
#abholpanel tr:first-child th:last-child, #abholpanel tr:first-child td:last-child, #alleingehpanel tr:first-child th:last-child, #alleingehpanel tr:first-child td:last-child { border-top-right-radius: 4px; }

#abholpanel td, #abholpanel th, #alleingehpanel td, #alleingehpanel th { padding-top: 2px; padding-bottom: 2px;}

/* .dashed td { border-color: black; border-top: 3px dotted !important; border-bottom: 3px dotted !important;} */

/* ----------------- eltern und kinderinfo ----------------- */
.container { padding-top: 10px;	padding-left: 7px; height: 100%; width: 97%; display: flex;}

.containerKI { padding-top: 6px; padding-left: 7px; display: flex;}

.containerHof { padding-left: 7px; height: 100%; width: 97%; display: flex;}

.image-upload>input { display: none; }

/* ------------- vollmachten ---------------------------*/
.bild {	display: block; height: 106px; z-index: 300; }
  
.bild:hover { transform: scale(7, 7); transform-origin: bottom left; z-index: 300; }

.topright {	z-index: 4;	position: absolute;	top: -7px; right: -7px; }

.close-icon
{
	display: block;
	box-sizing: border-box;
	width: 20px;
	height: 20px;
	border-width: 4px;
	border-style: solid;
	/* border-color:rgb(182, 38, 38); */
	border-color: var(--color-navbar);
	border-radius: 100%;
	background: -webkit-linear-gradient(-45deg, transparent 0%, transparent 46%, var(--schriftcolor), var(--schriftcolor), transparent 56%, transparent 100%), -webkit-linear-gradient(45deg, transparent 0%, transparent 46%, var(--schriftcolor),  var(--schriftcolor),transparent 56%, transparent 100%);
	/* background-color:rgb(182, 38, 38); */
	background-color: var(--color-navbar);
	transition: all 0.3s ease;
	z-index: 1;
}

/* -------------- chat --------------------------------*/
#content {
	position: absolute;
	bottom: 0;
	right: 3px;
	width: 22%;
	text-align: left;
}

#chatwindow {
	border: 1px dotted var(--bg-navbar);
	border-bottom: 1px dotted dotted var(--bg-navbar);
	padding: 3px;
	width: 96%;
	background: var(--bg-odd-table);
	color: var(--schriftcolor);
	font-size: 12px;
	border-top-left-radius: 9px;
	border-top-right-radius: 9px;
}

#chatmsg {
	color: var(--schriftcolor);
	border: 1px dotted var(--bg-navbar);
	border-top:1px dotted var(--bg-navbar);
	border-bottom: none;
	padding: 3px;	
	width: 96%;
	background: var(--bg-odd-table);
}

/* ------------------- rest ---------------------------------*/
.inp { font-size: 12px; padding-bottom: 4px;	padding-top: 4px; width: 64px; }

.box1 {	float: left; width: 30%; box-sizing: border-box; }
   
.box2 { float: left; width: 70%; padding-left: 8px; box-sizing: border-box; }

/* zoom für kinder- und elterninfo */
/*
#kinfo {
	zoom: 0.75; 
    -moz-transform: scale(0.75); 
    -moz-transform-origin: 0 0;
}

#einfo {
	zoom: 0.5; 
    -moz-transform: scale(0.5); 
    -moz-transform-origin: 0 0;
}
*/





/* ------------------- responsive ------------------------- */
@media only screen and (max-width: 1550px)
{
	#kindertablette { font-size: 14px; }
}

@media only screen and (max-width: 1400px)
{
	/* #kinderdropdown { position: absolute; top: 47px; width: 280px; font-size: 12px; height: 30px; z-index: 2;} */

	#kindertablette {font-size: 12px;}
	
	#raumtablette { border: none; width: 280px; font-size: 12px;}	
}

@media only screen and (max-width: 1320px)
{
	.navbar a, .navbarspan { letter-spacing: 0px; }
}

@media only screen and (max-width: 1240px)
{
	#content { display: none; }
	#bg-image { display: none; }
}

@media only screen and (max-width: 1245px)
{
	.navbar a {	padding: 11px 7px; letter-spacing: 0px; }

	.navbarspan { letter-spacing: 0px; }

	.subnav .subnavbtn { padding: 11px 7px; }
		
	.subnav-content a {	padding: 5px 7px; }
}

@media only screen and (max-width: 1150px)
{
	.navbar a {	padding: 11px 2px; letter-spacing: 0px; }

	.navbarspan { letter-spacing: 0px; }

	.subnav .subnavbtn { padding: 11px 2px; }
		
	.subnav-content a {	padding: 5px 7px; }
}

@media print
{
	.navbar	{ display: none; background-color: #ffffff !important; }

	#oben, #oben-text {	display: none; }

	#kindspeichern { display: none;	background-color: #ffffff !important; }

	#kinderblatt { border-style: none !important; top: 0 !important; margin-top: 80px !important; font-size: 9px !important; background-color: #ffffff !important;	}

	/* #dienstplan { margin-top: 0px; font-size: 12px !important; } */
	
	tr { border: 1px solid !important; }
	
	html, body, #planheadline, .wt { background-color: #ffffff !important; }
	
	#dienstplanvolk tr:nth-child(odd) {	background-color: #eeeeee !important; }

	#dienstplanvolk td { padding: 1px !important; }

	/* .pfeil, .druckbutton { display: none; } */

	#kinderheader {	font-size: 10px; display: block; position: fixed; top: 0; right: 0;	}
	
	#notliste {	page-break-after: always; background-color: #ffffff !important;	}

	#kinderfooter {	display: block;	}

	#idkram, #vollmacht, .weg, #neuneu { display: none;	}
	
	#kinderhead { margin-top: 0px !important; border: none !important; position: absolute; top: 0; width: 100% !important; background-color: #ffffff !important; }
	
	#textallergie {	height: 70px; }
	
	#abholer { margin-top: 50px; }

	::placeholder {
		color: var(--stornobutton);
		opacity: 0.2; /* Firefox */
	}
	  
	:-ms-input-placeholder { /* Internet Explorer 10-11 */
	   color: #eeeeee;
	}
	  
	::-ms-input-placeholder { /* Microsoft Edge */
	   color: #eeeeee;
	}
	  
	.label { display: block !important;	}

	input {	height: 22px; }

	#ma, #pa { display: none !important; }

	#maNo, #paNo { display: block !important; }
}