@charset "iso-8859-2";

/* ====== Tabelle unten ======  */
@media 
		only screen and (max-width: 768px),
		(min-device-width: 768px) and (max-device-width: 1024px)  {
			.tabelle table, .tabelle thead, .tabelle tbody, .tabelle th, .tabelle td, .tabelle tr {display: block;}
			.tabelle thead tr {position: absolute;top: -9999px;left: -9999px;}
			.tabelle tr {border: 1px solid #ddd;  }
			.tabelle td {position: relative; padding-left: 120px;     }
			.tabelle td:before {position: absolute;top: 2px;left: 6px;white-space: nowrap;  }
			.tabelle td:nth-of-type(1):before {content: "AQI Index"; font-weight:bold;  }
			.tabelle td:nth-of-type(2):before {content: "Einstufung"; font-weight:bold;}
			.tabelle td:nth-of-type(3):before {content: "Maßnahmen"; font-weight:bold;}
			.tabelle table {border: 1px solid #ddd;}
		}
		@media all and (max-device-width: 480px) {.tabelle body {padding: 0px; margin: 0; width: 100%;}
		}
		@media only screen and (min-device-width: 768px)  {.tabelle table {width: 100%; }
		}
.tabelle td {border: 1px solid #ddd; line-height: 27px; font-size: 15px; padding:10px; padding-top:25px; }
.tabelle th {line-height: 35px; font-family: verdana;text-align: left;font-size: 14px;background: #406D95;color: #fff;padding:10px;}
	
 /* ====== Luftwerte ======  */
table.lufttabelle  {
	border-collapse: collapse!important; 
	width:100%!important;
	margin:0!important;
	padding:0!important;
}
.lufttabelle td{padding:10px!important; width:50%;}
.responsive-table {width: 100%; margin-bottom: 10px; }

/* ====== Schulluftwerte ======  */
.scrollcontainer{
	width:100%;
	max-height:750px;
	overflow-y: auto;
	overflow-x: hidden;
	padding:0;
	margin:0;
	margin-bottom:10px;
}

.responsive-table thead {
	position: absolute;
	clip: rect(1px 1px 1px 1px);
	padding: 0;
	border: 0;
	overflow: hidden;
}

.responsive-table thead th {
	background: rgba(0,70,105,0.7);
	color: #fff;
	font-weight: 300;
	text-align: right; 
} 
 
.responsive-table tr,
.responsive-table th,
.responsive-table td {display: block; text-align: left;}

.responsive-table th,
.responsive-table td {
	vertical-align: middle;
	font-size: 14px;
	padding: 5px;
}

.responsive-table tr {
	margin-bottom: 1em;
	border:1px solid #D0D0D0;
	position:relative; 
}

.responsive-table th[scope=row] {
	background: rgba(0,70,105,0.7);
	color: #fff;
	font-size:14px;
}

.responsive-table td[data-title]:before {
	content: attr(data-title);
	font-size: 14px;
	font-weight:300;
	color: #333;
}

.abstandLinks {
	position:absolute; 
	left:130px;
}

.verstecken {display:none;}

.responsive-table td:nth-of-type(1) {background: rgba(0,70,105,0.7); color:#fff;}
.responsive-table td:nth-of-type(2) {background: rgba(0,70,105,0.7); color:#fff;}
.responsive-table td:nth-of-type(1)[data-title]:before  {color:#fff;}
.responsive-table td:nth-of-type(2)[data-title]:before  {color:#fff;}

@media (max-width: 660px) {
	.scrollcontainer {width: 85%!important;}
}	

@media (min-width: 660px) {
	.verstecken {display:block;}
	.abstandLinks {position:relative; left:0px;}
	.responsive-table thead {
		position: relative;
		clip: auto;
		height: auto;
		width: auto;
		overflow: auto;
	}	
	
	.responsive-table tr {display: table-row;}

	.responsive-table th[scope=row] {
		background-color: transparent;
		color: #333;
		text-align: left;
	}
	
	.responsive-table td {border: 1px solid #D0D0D0; text-align: right;}
	.responsive-table td[data-title]:before {content: none; }
	.responsive-table th,.responsive-table td {display: table-cell; padding: 5px; width: calc(100% / 11);}
} 

.green {background: rgba(0,255,0,0.8);}
.yellow {background: rgba(255,255,0,0.8);}
.ocker {background: rgba(255,153,0,1.0);color:#fff;}  
.red {background: rgba(255,0,0,0.8);color:#fff;}  
.violett {background: rgba(153,0,153,0.8);color:#fff;}  
.braun {background: rgba(119,43,26,0.8);color:#fff;} 
  
/* ====== PDF drucken ======  */ 
 .buttondrucken {	 
	padding:15px;
	font-family: verdana, tahoma, helvetica ;
   	font-weight: 500;
	background:#406D95;
	color:#fff;	
	border:0;
	margin:10px;
	margin-left:0;
	margin-right:0;
	margin-top:0;
	width:170px; 
}

.buttondrucken:hover {	 
	background:#9a0000;
	color:#fff;	
}

/* ====== Canvas Button ======  */
#bt {	 
	padding:0px;
	width:30px;
	height:30px;
	text-align:center;
	font-family: verdana, tahoma, helvetica ;
   	font-weight: 500;
	background:#406D95;
	color:#fff;	
	border:0;
	margin-left:0;
	margin-right:0; 
	margin-top:10px;
	border-radius:50%;
}

#bt:hover {	 
	background:#9a0000;
	color:#fff;	
}

/* ====== scrollcontainer ======  */
    .scrollcontainer::-webkit-scrollbar {
      width: 15px;
      border: 5px solid white;
	-webkit-appearance: none;
    }

    .scrollcontainer::-webkit-scrollbar-thumb {
      background-color: #9a0000;
      background-clip: padding-box;
      border: 0.05em solid #eeeeee;
    }

    .scrollcontainer::-webkit-scrollbar-track {
      background-color: #f4f4f4;
    }
    /* Buttons */
    .scrollcontainer::-webkit-scrollbar-button:single-button {
      background-color: #f4f4f4;
      display: block;
      border-style: solid;
      height: 13px;
      width: 16px;
    }
    /* Up */
    .scrollcontainer::-webkit-scrollbar-button:single-button:vertical:decrement {
      border-width: 0 8px 8px 8px;
      border-color: transparent transparent #555555 transparent;
    }

    .scrollcontainer::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
      border-color: transparent transparent #777777 transparent;
    }
    /* Down */
    .scrollcontainer::-webkit-scrollbar-button:single-button:vertical:increment {
      border-width: 8px 8px 0 8px;
      border-color: #555555 transparent transparent transparent;
    }

    .scrollcontainer::-webkit-scrollbar-button:vertical:single-button:increment:hover {
      border-color: #777777 transparent transparent transparent;
    }
	
/* ====== Input ======  */
 
 .range-wrap {
	position: relative;
	width: 290px;	
}

.range {
	width: 100%;
	margin-bottom:0px;
	margin-top:5px;
	margin-left:5px;
}

.bubble {
	background: #9a0000;
	color: white;
	padding: 4px 12px;
	position: absolute;
	top:23px;
	border-radius: 4px;
	left: 50%;
	transform: translateX(-50%);
}

.bubble::after {
	content: "";
	position: absolute;
	width: 2px;
	height: 2px;
	background: red;
	top: -1px;
	left: 50%;
}