@charset "utf-8";
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,800);

*{ padding:0; margin:0;}
p, ul {margin-bottom: 15px;}
#container p, #container ul, #sidebarrechts p, #sidebarrechts ul{ margin-bottom:1em;}

#content ul, #sidebarrechts ul{ padding-left:1em;}

.ui-dialog{ z-index:10000 !important;}

img{ border:none;}
img a{ border:none;}
html, body{/*height: 100%;*/ }
body {
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;	
	font-size:0.875em;
	color:#545454;
	background-image:none;

}
body#index, body#error{
	background-image:url(pics/background.jpg);
	background-repeat:repeat-x;
	  background-position: 0 160px;

	}
	
body.DTTT_Print	{ background-image:none;}

.barr{ height:50px;  display:block; margin-top: 5px;}
.barrKarte{ height:55px;  display:block;}
.colorDot {
  width: 20px;
  height: 20px;
  display: block;
  border-radius: 20px;
  float: left;
}
.disabled{color: lightgrey;}
.pwvergessenStage:hover {
  background-color: #c1c1c1;
}
.pwvergessenStage {
  font-size: 0.8em;
  padding: 5px;
  cursor: pointer;
  max-width: 289px;
  margin: 15px auto;
  width: 100%;
}
h1{ font-size:1.900em; font-weight:normal; margin-bottom:0.625em;}
#containerAktWerte h1{ text-align:center;}
h2{font-size:1.250em; font-weight:normal;margin-bottom:0.625em; }
h3{font-size:1.125em; font-weight:normal;margin-bottom:0.625em; }

.content25prozent h2, .content50prozent h2{  	background-color: #556272;    color: #FFFFFF;     padding-left: 10px;}
.smalfont{font-size:0.800em; }

.errorSiteText, a.errorSiteText{     background-color: #fff;    color: red !important;    padding: 5px;}
.halbInput{   width: calc(50% - 5px);    }	
.flexbox{ display:flex!important; flex-wrap: wrap;justify-content: space-between; }
.flexboxItem { margin-right:20px; float:left;  }
.halbFlex{   width: calc(50% - 20px);    }	
.einsVierFlex{   width: calc(25% - 10px);    }
.dreiVierFlex{   width: calc(75% - 10px);    }

.einsDreiFlex{   width: calc(33% - 10px);    }
.zweiDreiFlex{   width:calc(63% - 10px);  }
.justLeft{justify-content: left;}
.flexColum{flex-direction: column;}
.bRed{color: #b10000!important;}
.bRed:hover{color: #b10000!important;}
input, textarea {	width:100%;}
input[type='checkbox'] { width:auto!important;}
.buttonNorm {       border: 1px solid #d3d3d3;    background: #e6e6e6 url("jquery/jquery-ui-1.11.0.custom/images/ui-bg_glass_75_e6e6e6_1x400.png") 50% 50% repeat-x;    color: #555;	 padding: 6px;    border-radius: 4px;     border: 1px solid #d3d3d3;    font-weight: normal;    color: #555;    cursor: pointer;}
.buttonNorm:hover {   background: #dadada url("jquery/jquery-ui-1.11.0.custom/images/ui-bg_glass_75_dadada_1x400.png") 50% 50% repeat-x;   color: #000;border: 1px solid #999;}

.stuFeld {    width: 75px;    margin-right: 5px;}
.minFeld{ width: 75px;    margin-left: 5px;}
.schedulAausgabeArt{ justify-content: start;}
.schedulAausgabeArt div{ margin-right:15px;}

.hiddenServ{ display:none;}

#verwaltungschedul .datepicker {    width: 100%;}
.neubuttonstage button, .neubuttonstage a {    margin-right: 10px;}
#menu-button{background-color:#FFF!important};
	.sm-simple a.current {background-color:#2b67df !important; color:#fff;}
.marginB{ margin-bottom:20px;}
.marginT{ margin-top:20px;}
.w100{ width:100%;}
a:link {	color:#556270;	text-decoration: none;/}
a:visited {	text-decoration: none;	color:#556270;}
a:hover, a:active, a:focus {	text-decoration: none;}

a.visLink {
    color: blue;
    text-decoration: underline;
}
.button-ui {
    background: linear-gradient(to bottom, #f6f6f6 0%, #dcdcdc 100%);
    border: 1px solid #adadad;
    border-radius: 5px;
    color: #333;
    font-size: 14px;
    font-weight: bold;
    padding: 8px 15px;
    cursor: pointer;
    text-shadow: 1px 1px 0px #fff;
    box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
    transition: background 0.3s, box-shadow 0.2s;
}

.button-ui:hover {
    background: linear-gradient(to bottom, #eaeaea 0%, #c5c5c5 100%);
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
}

.button-ui:active {
    background: linear-gradient(to bottom, #d5d5d5 0%, #b0b0b0 100%);
    box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.3);
}
.headerFixed{ display: flex; 	    background-color: #fff;    border-bottom: 5px solid #2b67df;    position: fixed;    top: 0;    width: 100%;    z-index: 10000;	}
#header {	background:none;    width: 100%;	 z-index: 100;	  left: 0;	  top:0;	   position:relative;}
#headerstage{ margin: 0 auto; max-width: 998px; position:relative;}
#headernavistage{	z-index:100;	 } 
	
#logo{margin-top: 6px;margin-left: 10px;	}
#logo a{  	background-image: url("pics/logo-icon.gif");    background-repeat: no-repeat;     display: block;    font-size: 1.5em;    font-weight: 800;    height: 41px;    padding-left: 45px;    padding-top: 5px;    width: 100px;}
#mczlogo {    max-width: 97px;    box-sizing: border-box;    z-index: 10000000;    order: 10;    margin-top: 12px;    margin-right: 20px;}
.graybar{ background-color:#F5F5F5;} 
#whitestage{	background-color:#FFFFFF;	max-width:998px;	min-height:369px;	margin:0 auto;		padding:0.2%;		-moz-box-shadow: 1px 1px 7px #999999;  	-webkit-box-shadow: 1px 1px 7px #999999;  	box-shadow: 1px 1px 7px #999999;	box-sizing:border-box;		-webkit-border-radius: 4px;	  border-radius: 4px;	}
#whitestage_img{ background-color:#FFFFFF;
	max-width:998px;
	  margin: 100px auto 0;
	padding:0.2%;	
	-moz-box-shadow: 1px 1px 7px #999999;
  	-webkit-box-shadow: 1px 1px 7px #999999;
  	box-shadow: 1px 1px 7px #999999;	
	-webkit-border-radius: 4px;
	  border-radius: 4px;
	 box-sizing:border-box;
	 }	

.wshead{ padding: 5px 0 0 5px;margin-bottom:20px;}
.wshead h2{  
border-bottom: 1px dotted #ccc;
    font-size: 1.8em;
	}	
.windroseInput{display:none;margin: 20px 0;}
.stationsauswahl{ padding: 0px 0 0 5px;}

.stationsauswahl select{ padding: 0px 0 0 5px; width:100%; margin:10px 5px;}
.nowrap{flex-wrap: nowrap;}
.pwSpalte{ display:flex !important;flex-wrap: nowrap;}
.toplable {    display: block;}
.formSpalte {    margin-bottom: 5px;    padding-bottom: 5px;    border-bottom: 1px dotted #ccc;}
.formSpalte input{ width:100% !important;}
.innerwhitestage{	 
		padding:10px;	 
	  box-sizing:border-box;
	  font-size:0.8em;
	  position:relative;
	  }	
#container {
	 margin: 0 auto;
    max-width: 1600px;
    padding: 0 2.4048096192384769539078156312625% 0 2.4048096192384769539078156312625%;
		 margin-bottom: 40px;
		 padding-top:10px;
 
			 position: relative;
		 
}
#containerAktWerte{    background-color: whitesmoke;
    padding: 0px 5%;}
#containerAktAQIWerte{ margin-top:10px; padding: 0px 5%;}
.aktmesButonstage{ margin-bottom: 40px; }
.alertBut {min-height: 35px;}
.alertOn {    color: red;}

#container.containerfull{ margin-bottom:10px;}

#error #containerstage{   
	
    margin-top: 286px;
	}

#containerstage2{  margin: 0 20px; }
.txtcenter{ text-align:center;}

.barrHeadline{   
	margin: 0 auto;
    max-width: 998px;}
.barrHeadline h2{    color: #fff;
    font-size: 2.5em;
    font-weight: bold;
    margin-top: 3px;}

.content100prozent{
	width:100%;
	box-sizing:border-box;
	
	}
.content50prozent{
/*	float: left;*/
	width:50%;
/*	margin-right:2%;*/
	}
.content25prozent{
	float: left;
	width:23%;
	margin-right:2%;
	}	

.content1-3 {
	
	padding-bottom: 10px;
	width:33%;
	
}
.content1-25p {
	
	padding-bottom: 10px;
	width:25%;
	
}

.content1-70p {
	
	padding-bottom: 10px;
	width:70%;
	
}

.content1-3 p{ margin-bottom:1em;}

.floatleft{float: left;}
.floatright{	float: right;}

.content2-3{
	width:61.322645290581162324649298597194%;
	}
	
.content2-3 p{ margin-bottom:1em;} 	
.contentsplitt{ width:48%;}
.eingStat{ min-width:350px; margin-right:10px;}
	

.einespalte	{width:100%; float:none;}
.bearbut {     min-width: 55px; }
.loeschBut{min-width: 68px;}
.switchBut{min-width: 80px; display: flex; justify-content: space-between;}
.switchBut i {    margin-right: 3px;    text-shadow: 1px 1px 1px rgb(150, 150, 150);}
.alarmBBStage {    margin-bottom: 10px;    text-align: right;}
/* ~~ Fußzeile ~~ */
#footer {
	background-color:#fff;
	max-width:998px;
margin:0 auto;
text-align:center;
padding-bottom:1em;
}


address{ font-size:0.8em; text-transform:none; font-style:normal; max-width:998px; margin: 0 auto; text-align:center;}
/* Icon Buzz */
@-webkit-keyframes hvr-icon-buzz {
  50% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  100% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
}
@keyframes hvr-icon-buzz {
  50% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  100% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
}
.hvr-icon-buzz {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.hvr-icon-buzz .hvr-icon {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
.hvr-icon-buzz .hvr-icon,.hvr-icon-buzz:hover .hvr-icon, .hvr-icon-buzz:focus .hvr-icon, .hvr-icon-buzz:active .hvr-icon {
  -webkit-animation-name: hvr-icon-buzz;
  animation-name: hvr-icon-buzz;
  -webkit-animation-duration: 0.15s;
  animation-duration: 0.15s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

/* ~~ Verschiedene float/clear-Klassen ~~ */
.fltrt {  /* Mit dieser Klasse können Sie ein Element auf der Seite nach rechts fließen lassen. Das fließende Element muss vor dem Element stehen, neben dem es auf der Seite erscheinen soll. */
	float: right;
	margin-left:  1.5030060120240480961923847695391% /* 15px auf 998px*/ ;
}
.fltlft { /* Mit dieser Klasse können Sie ein Element auf der Seite nach links fließen lassen. Das fließende Element muss vor dem Element stehen, neben dem es auf der Seite erscheinen soll. */
	float: left;
	margin-right:  1.5030060120240480961923847695391% /* 15px auf 998px*/ ;
}
.clearfloat { /* Diese Klasse kann in einem <br />-Tag oder leeren div-Tag als letztes Element nach dem letzten fließenden div-Tag (im #container) platziert werden, wenn #footer entfernt oder aus dem #container herausgenommen wird. */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}
.hideButton{ display:none !important;}

#days{ position:relative;}
/* ~~ div Tabellen  ~~ */
.tzeile.tabelTxtSmal{ display:none;}
.table {
    display:table;

	 width: 100%;
}
.tfixed{
		 table-layout: fixed;
	}
.tauto{
		 table-layout: auto;
	}	


.tablehead{ margin:5px 0; padding-bottom:5px; border-bottom:#CCC dotted 1px; font-weight:700;}
.tzeile {
    display:table-row;
}

.tspalte{
    display:table-cell;
	 -webkit-hyphens: auto;     
    -moz-hyphens: auto;     
    -ms-hyphens: auto;     
    -o-hyphens: auto;     
    hyphens: auto;  
    	/*  padding:5px;*/
		 padding: 5px 0;
	   border-bottom:#CCC dotted 1px;
	   vertical-align: top;
}

.noborder{ border:none;}
.spaltegroup{	display: table-column-group;}
.tablescrollstageliste{
	height:270px;
	overflow-y:auto;
	overflow-x:hidden; }

.list_sp_id{ width:40px;}
.list_sp_bild{ vertical-align:top;width:70px;} 
.list_sp_name{ padding: 5px 10px;} 
.list_sp_adresse{}
.list_sp_breite{width:75px; padding: 5px 10px;}
.list_sp_lange{width:75px; padding: 5px 10px;}
.list_sp_bearbbut{ width:129px;}
.list_sp_loeschbut{ width:130px;}
.list_sp_erstellt{ border:none; background-color:#F5F5F5;padding-left: 5px;}
.list_sp_aktivbut{ width:100px;}
.list_sp_hk_id{ width: 50px;}

.list_sp_errorDate{ width:100px;}
.list_sp_errorTime{ width:85px;}
.list_sp_errorStatID{ width:100px;}
.list_sp_errorKompID{ width:100px;}
.list_sp_errorMSG{ padding-right: 80px;}

.list_sp_filterbut{  text-align: right;
    width: 250px;}

.list_sp_hk_bezeichnung{width: 220px;}
.hk_kommentar{ font-size:0.9em; font-style:italic;}

.eingabebez{ width:140px;}
.hidebez{ display:none; font-weight:bold;}
.eingabe250px{width:250px;}
.eingabe155px{width:155px;}

.updatebut { }
.updatestestage{  }
.updatestestage2{  }

.nrtestbutton{ font-size: 0.8em !important;min-width: 150px;}
/* ~~ eingabe Form  ~~ */

#dialog-message, .bibliothekstage,#dialogchart,#dialogserverpic,#dialog-confirm,#dialog-save,#dialog-workstage{ display:none;}
.kompHead{ margin-bottom:0;}
#statlisteKomp{ margin-bottom: 10px; font-size:0.8em;}
.parasavenamestageError{ display:none;     
background-color: #ff0000;
    color: #ffffff;
    display: none;
    font-size: 0.8em;
    font-weight: bold;
    margin: 5px 0;
    padding: 5px;}

.redborder{border: 1px solid #d3d3d3;}

.eingabeneuestation input,.eingabeneuestation textarea, .eingabeform input, .eingabeform textarea,.eingabeform select, .statcatselect{ width:90%;}
.formabbrechen,.formspeichern  { width:97%; margin-bottom:10px;}
.eingabeneuestation textarea{
	height:5em;
	}
.bildloeschen, .ausbibliothek{ width:100%; margin-top:20px;}

.speichernstage{  
    padding: 20px 0;
}
.stationspeichern{}
/* ~~ eingabe Form  ENDE ~~ */
.neubuttonstage{
	  position: absolute;
    right: 45px;
    top: 14px;}
	
	.shadow{

	-moz-box-shadow: 1px 1px 7px #999999;
  	-webkit-box-shadow: 1px 1px 7px #999999;
  	box-shadow: 1px 1px 7px #999999;

		}
		
.breadcrdiv{ font-size:0.7em; margin-bottom:1em;}
.breadcr{ float:left; padding-right:5px;}



.einzelbild{max-width:997px; width:100%;}

.einzelbild img{
	-webkit-border-radius: 4px;
	  border-radius: 4px;
}

.picborder{border: 1px solid #CCCCCC; padding:1px; }

.warnung{ font-size:1.5em; color:#FF0000;}

.FixNameStage{
display: none;
margin-top: 10px;
}

.statbild{ float:right; width:210px; text-align:center;}
.statbild .smalfont{ display:block;}
.statname{ font-size:1.5em; font-weight:700;}
.statstreet{ font-size:1.1em; }
.statort{font-size:1.1em; }
.statland{font-size:1.1em; }
.statbeschr{ margin-top:10px;}
.tree-view {
 
  min-width: 100px;
}
#stationsmap{  }
#uebersichtmap{ height:292px;}



.stationicon{
	 background-image:url(pics/icons/stationbasiert-icon.gif); 
	 }

.uebersichticon{
	 background-image:url(pics/icons/uebersicht-icon.gif); 
}

.stationbearbeitenicon{	 background-image:url(pics/icons/stationbearbeiten-icon.gif); }
.userbearbeitenicon{background-image:url(pics/icons/user-icon.gif); }
.nummerbearbeitenicon{background-image:url(pics/icons/nr-icon.gif); }
.edit-stat-icon{ background-image:url(pics/icons/edit-station.gif); }
.edit-comp-icon{ background-image:url(pics/icons/edit-comp.gif); }
.edit-unit-icon{ background-image:url(pics/icons/edit-units.gif); }

.edit-stat-icon, .userbearbeitenicon, .stationbearbeitenicon,.uebersichticon,.stationicon,.edit-comp-icon,.edit-unit-icon,.nummerbearbeitenicon{
background-repeat:no-repeat;
padding-left:30px;
	}

#WindMinDiv,#stdAQIDiv,#isOzonDiv{ display:none;}


/* ~~~~~~~~~~~~  Fluidbox 	image-lightbox ~~~~~~~~~~ */
.fluidbox {
outline: none;
}
.fluidbox-overlay {
cursor: pointer;
cursor: -webkit-zoom-out;
cursor: -moz-zoom-out;
opacity: 0;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
transition: all .25s ease-in-out;
}
.fluidbox-wrap {
background-position: center center;
background-size: cover;
margin: 0 auto;
position: relative;
transition: all .25s ease-in-out;
}
.fluidbox-ghost {
background-size: cover;
background-position: center center;
position: absolute;
transition: all .25s ease-in-out;
}
.fluidbox-closed .fluidbox-ghost {
-webkit-transition-property: top, left, opacity, -webkit-transform;
-moz-transition-property: top, left, opacity, -moz-transform;
-o-transition-property: top, left, opacity, -o-transform;
transition-property: top, left, opacity, transform;
transition-delay: 0, 0, .25s, 0;
}
.fluidbox-closed .fluidbox-wrap img {
transition-property: opacity;
transition-delay: .25s;
transition-duration: 0s;
}
/* ~~  Fluidbox 	image-lightbox ENDE ~~ */

/*  **** Bilder vom Server auswählen **** */

.serverpicbut { margin-bottom:50px;}


.galeriepic{ height:150px; overflow:hidden;}
div.galerie{
    padding: 3px;
    background-color:#ebebeb;
    border:1px solid #CCC;
    float:left;
    margin:10px 10px 0  0;
    font-family:Arial, Helvetica, sans-serif;    
}
div.galerie:hover{
    border:1px solid #333;
}
div.galerie span{
    display:block;
    text-align:center;
    font-size:10px;
}
div.galerie a img{
        border:none;
}
div.file {
    padding:4px 4px 4px 30px;
}
div.file.even{
    background-color: #ebebeb;
}
div.file a {
    text-decoration:none;
}
div.file:hover {
    background-color:#CCC;
}
/*  **** Bilder vom Server ENDE **** */

/*   Login stage */

.loginstage{
	  height: 330px;
    padding: 20px 0;
    text-align: center;
	 }
 	 
.loginstage input{  display: block;
    margin: 10px auto;
    padding: 5px;
	width:100%;
    max-width: 300px;
	box-sizing:border-box;
	text-align:center;}	 
.loginbutton{	width:100%;
    max-width: 300px;}	
	
.ui-datepicker-trigger{ margin:3px 0 0 5px;}	
.timebutt{ font-size:0.7em !important;   margin-bottom: 1em;width: 48%;}
.paraDelbutton,.paraladebutton,.parainfobutton{ font-size:0.7em !important;   margin: 1em 0; box-sizing:border-box; height:35px;}
.paraDelbutton,.parainfobutton{ width: 15%; min-width:60px;}
.paraladebutton{ width: 65%; }
.stationabbrechen,.stationspeichern  { width:100%; margin:5px 0;}
.datepicker{ width:43%; padding:3px; font-size:0.8em;}
#auswertung .DateFrom,#auswertung .DateTo{  width: 69%;}
#auswertung .TimeFrom,#auswertung .TimeTo{max-width: 39px;  width: 35%;}
 
#mittelwertselect-button,#ausgabeartselect-button, #ausgabeartselect-menu.ui-menu-item  { font-size:0.8em;}
.ddDescr{ font-size:0.5em;}
.parameterstage { padding-bottom:5px; margin-bottom:5px;}
#ausgabeartselect-button,#mittelwertselect-button {width: 97% !important; box-sizing:border-box;}

.auswertbutstage,.savebutstage,.filterparameterstage,#savedparadropdown-button,.filterstationstage,.stationslisteStage,.halbespalte{ margin:10px 0; width:48%!important;; float:left;}
.filterstationstage .ui-multiselect,.stationslisteStage .ui-multiselect{ height:50px !important;}
.savebutstage,.mittelwerte{ margin-right:2%;}

.auswertbutton,.savebutton{ width:100%;}
#savedparadropdown-button{  }
.auswertsmall{ display:none;}
.auswertbig{ display:block;}

#paraSaveNameField,#paraSaveDescField{ width:100%;}
#paraSaveDescField{ height:3em;}

.red{ /*background-color:#FF0000;*/
    color: #FF0000;}
.redback{background-color:#FF0000;}	
.yelow{   background: none repeat scroll 0 0 yellow;
    color: #000;}
.green{ color:#00CC00;}
.blue{ color:#0099FF;}

.inaktiv{ color:#CCCCCC;}
.inaktiv img{ opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */}


.zeit_sp1{ width:50%;}

.chartstage, .ladegrafikstage,.nummerchartstage {width:100%;}
.chartfullbutstage, .tablefullbutstage{ text-align:right; margin:20px 0;display:none; }
.backparameterbutstage{ float:left;}
.nummerchartstage{ margin-top:20px;} 


/* css for timepicker */
    .ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
    float:left;
    background: #900;
    display: none;
    }

.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
.ui-timepicker-div dl { text-align: left; }
.ui-timepicker-div dl dt { float: left; clear:left; padding: 0 0 0 5px; }
.ui-timepicker-div dl dd { margin: 0 10px 10px 45%; }
.ui-timepicker-div td { font-size: 90%; }
.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }

.ui-timepicker-rtl{ direction: rtl; }
.ui-timepicker-rtl dl { text-align: right; padding: 0 5px 0 0; }
.ui-timepicker-rtl dl dt{ float: right; clear: right; }
.ui-timepicker-rtl dl dd { margin: 0 45% 10px 10px; }	
#ui-datepicker-div ,.ui-datepicker { z-index: 99999 !important; }

.auswahlsubgrafik{ margin:10px 0;}

.dataTables_filter input {  
    margin-right: 20px;}
#printmsg { display:none;}		
body.DTTT_Print #printmsg{   background-color: whitesmoke;
    display: block;
    font-weight: bold;
    padding: 10px;
    
    text-align: center;
    top: 0;
    width: 100%;
	}
.dropdownselect{   background-color: #fff;
    height: 32px;
    padding: 5px;
    width: 100%;}	
	
.parameterstage.parameter{ max-height:200px; overflow-y:scroll;overflow-x:hidden;}

#tablestage{ background-color:#FFFFFF; overflow: auto; position:relative;}
.excelexportbut { }
.excelexportbutStage {position: absolute !important;
    right: 131px;
    top: 0;
	 z-index: 999;}
#loadinggif{ text-align:center; display:none; margin:auto; width:35px;}

.zeileConversionFactor, .zeileConversionConstants,.zeileLimitUnit{ background-color:whitesmoke;}
.ausgegraut{ color:#999999;}

.nameUnit2{ color:#0099FF;}

.logdateiStage{  }
.logdateiStage br{ margin-bottom:10px;  }
.topbuttonstage{ text-align:right; }
.clearlogbut{ font-size:0.7em !important;}

.popinfo{ margin-bottom:10px; background-color:#F5F5F5;display: block;}
.pophead{ display: block;
    font-size: 1.4em;}
.popdatalines{ margin:2px 0; padding:2px 0; border-bottom:#CCC 1px dashed;display: block;}	
/*#komponenttreestage{ height:200px;  overflow-y:scroll;overflow-x:hidden;}
*/
.titleimput{ width:97%;}

.yAchseInputstage{ margin-bottom:10px;}

.anzeigeparameter h2, #reportbarrform h2{ border-bottom:#00CCFF solid 1px;  margin: 10px 0;}

.childselected span.dynatree-icon  /* custom icon */
{
    background-position: -49px -32px !important;
}
.childNOTselected span.dynatree-icon  /* custom icon */
{
    background-position: -19px -32px !important;
}
/* css for report tabs */
#auswertungtabs.ui-widget-content {
	background:none !important;}
#auswertungtabs .ui-tabs-nav{  }	
#auswertungtabs.ui-widget-content { border:none;}
#auswertungtabs .ui-widget-header {
	 border:none;
	 border-bottom: 1px solid #ccc; !important;
	 margin: auto;
    max-width: 995px;
	
	background-color:#ddd;
	}

#limitUnitselect{ width:91px;}
 

.filterstationstage{ margin:10px 0 ;}

.smsicon{position: absolute;}

.eingabeform{ }

.filterparameterstage{ margin-bottom:15px;}
.highcharts-button{ position:absolute;}

.showProgressImgDiv{
	max-height:600px;
	max-width:600px;
	height:100%;
	width:100%;
	text-align:center;	
	}
	
.mapfilterdiv{ width:100%;  margin-top: 10px;}	

#akttabelleStart{ font-weight:normal !important;}
.aktDataHead{   background-color: #2b67df;
    color: #fff;
    margin-top: 50px;
    padding: 10px;
	position:relative;}
.aktDataHeadDate{  position: absolute;
    right: 13px;}	
.aktmessunbuttondiv{ text-align:right;}
.ladeAktDatabut	{}
.stationlistestage{ margin-bottom:20px;}

#startseite .ui-widget-content{ border:none !important;}
.updateInfoTable{ background-color:#FFC}

#startseite{  background-color: whitesmoke;}
.whitewrapp{background-color: #fff;}
.Akttablefullbut{}
.ladeAktDatabut{}

.limitred{ background-color:#F00;color:#FFF;}
.limityelow{ background-color:#FFFF00;}
.limitorange{ background-color:#FFCC00;}

.AQIblau{ background-color:#76AFDB !important;color:#FFF;}
.AQIgelb{ background-color:#FFFF00 !important; color:#000000!important;}
.AQIorange{ background-color:#FFCC00;}
.AQIrot{ background-color:#F00 !important;color:#FFF;}
.AQIbraun{ background-color:#804000 !important;color:#FFF;}
.AQIfehler{background-color:#000 !important; color:#FFF;}
.AQItimeWarning{background-color:#F00; color:#FFF; font-size:0.7em;}
#limitlegende,#aqilegende{ display:none;}

.aqitemplateselect{ width:100%; font-size:1.3em; padding:5px;}
#meswMitLim,#meswMitAQI,#mitNichts{ font-size:0.7em;   line-height: 24px!important; }
.aqiMapChecked{ background-color:#0074D9; color:#FFF !important;}
.legendebox{ padding:5px;}
.aktWerteLegende{ text-align:right; padding: 20px 0;}
.LegendeStageHead{ text-align:center;}
.LegendeStage{ display: flex; width:100%; max-width:700px; border:#000 solid 2px;   margin: auto;}
.aqiLegendBar{  font-size: 0.8em;
    text-align: center;}
.aktMesTime{ font-size:0.9em; text-align:right; margin-top:20px;}

.navAQIstationenstage{    background-color: whitesmoke;}
.AQInaviStats{    border-right: 1px dotted #ccc;
    float: left;
    font-size: 1.2em;
    margin: 5px;
    padding: 5px;}
.AQInaviStats:hover, .AQInaviStatsActiv{ background-color: #e1e1e1;
    text-decoration: none;
 	
	 -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) inset;
	-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) inset;
	box-shadow:0 1px 2px rgba(0, 0, 0, 0.5) inset;
	}

.ladeAktAQIbut{ float:right; padding:5px;}	
.AQIausgabeHead{ text-align:center;  background-color:#696969; color:#FFFFFF;display: flex;align-items:   stretch;}
.AQIausgabestatName{font-size:2em;}
.AQIausgabestatUpdatedOn{font-size:0.8em;}
.AQIausgabeDataKomponenteDiv{ padding:10px 0; margin:10px 0; border-bottom:1px dotted #999999; float:left; }
.AQIausgabeDataInfoBox{
	-webkit-border-radius: 10px 10px 10px 10px;
	border-radius: 10px 10px 10px 10px;
	
	width:35%;
	min-width:150px;
	box-sizing:border-box;
	padding:20px;
	text-align:center;
	float:left;
	   margin-top: 35px;}
.AQIausgabeDataInfoBoxKompname{ display:block; font-size:2em;}
.AQIausgabeDataInfoBoxValAktuell{display:block; font-size:2.5em;}
.AQIausgabeDataInfoBoxValMinMax{display:block; }
.AQIValMin{display:block;}
.AQIValMax{ display:block;}
.AQItxtMin{display:block; font-size:0.7em}
.AQItxtMax{display:block; font-size:0.7em}
.AQIausgabeDataGraphBox{ float:left;width:60%; }
.AQIausgabeDataGraph{ height:300px;}
.AQIausgabestatGesAQIVal   { font-size:3em;
   padding: 21px 0;
	}
.AQIwerteStage{}
.aqiMapstage { padding:10px;}
.aqiPop{  -webkit-box-shadow: none !important;
	-moz-box-shadow: none !important;
	box-shadow:none !important;
	background:none !important;
	border:none !important;
	content:normal;
	top:-3px !important;
	left:0 !important;
	}
.mapShowAQIStage{ }	

.aqiMapstage { 
box-sizing:border-box;
text-align:center;
background-color:#FFFFFF;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 2px 2px 12px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 2px 2px 12px 0px rgba(0,0,0,0.75);
box-shadow: 2px 2px 12px 0px rgba(0,0,0,0.75);
}

.noaktaqiGesDateMAP{ font-size: 0.8em!important; background-color:#FF0000; color:#FFF; padding:5px;}	
.AQIDateMap{ font-size: 0.6em;}
.AQIValMap{  font-size: 1.3em;
    padding: 10px;
}

.scaleBox{ height:100%;}

.pubcheckboxstage{ cursor:pointer;}
.aqiShowHide,.aqiShowHideDiv{ display: none; background-color:#F5F5F5; }

.list_sp_xs { width:50px;}
.list_sp_s { width:120px;}
.list_sp_padding{ padding:10px;}
.aqiTabFeld{ width: 100px;}
.aqiTabFeldText{ width: 100px; font-size: 0.7em;}

.AQIausgabestatError{ color:#FF0000; font-weight:bold;}
.zeitTrenn {    display: flex;    align-items: end;    font-size: 1.2em;}
#headmenue8 a {    background-color:     #fff !important;    box-shadow: none; color: #000;}
@media print {
	
   body.DTTT_Print #printmsg{ display:none;	}	
}	
.DTTT_button_collection{
	background-image:url(pics/icons/menu_button.gif); 
	background-repeat:no-repeat;}

.DTTT_PrintMessage{  padding-top: 48px;
    text-align: center;}
	
.versionsnummer{ text-align:right; font-size:0.8em;}

@media only screen and (max-width:1310px){
		#logo {		overflow: hidden;		width: 45px;}
	}

@media only screen and (max-width:1180px){
		#logo { display:none;}
	}		
	
@media only screen and (max-width:1110px){
		#headerstage {    width: 100%;    position: relative; margin:0; max-width:none;}
		#mczlogo {    position: absolute;    right: 10px;}
	}	
	
	
    @media screen and (max-width: 999px) {  
       body#index{
	background-image:none;
	}
 
    }  	
	
@media only screen and (max-width:967px){
	.TimeFrom,.TimeTo{  width: 90%; max-width:none;}
 
	.DateFrom,.DateTo{  width: 90%;}
	}	
	
	
@media only screen and (max-width:909px)	{
	.paraDelbutton,.parainfobutton{ width: 48%; min-width:60px;}
.paraladebutton{ width: 98%; }	

		}
@media only screen and (max-width:863px){
	 
	.dreispalten{ width:48%; }
 

	}			

@media only screen and (max-width:815px){
 		
		 #containerstage{ background-position: -0 -47px;}
		 
	}
	
@media only screen and (max-width:768px){ 
 
	.einsVierFlex {    width: calc(50% - 10px);}
 
	}
@media only screen and (max-width:715px){
 		
.table {
    display: block;
	 width: 99%;
	  /*padding:5px;*/
	  
}
.tzeile{  
/*padding:5px;*/
	   border-bottom:#CCC dotted 1px;
	    display: block;
	    width: 99%;}
.tspalte {
        display: block;
	    width: 99%;
		border-bottom:none;
		   margin: 10px;
		   padding:0;
}
.tablehead { display:none;}		


.hidebez{ display:inline; } 

.tabelTxtBig{ display:none;}
.tzeile.tabelTxtSmal{ display:block;}

.noborder{ border:none;}
.zeit_sp1{ margin-bottom:10px;}
.TimeFrom,.TimeTo{  width: 100%; max-width:none;box-sizing:border-box;}
 
	.DateFrom,.DateTo{  width: 100%; box-sizing:border-box;}
	
.neubuttonstage { position: initial;}
.list_sp_xs, .list_sp_s  { width:100%;}

	}	
@media only screen and (max-width:688px){	
	#headernavistage{
	/*left: 5px;
	top:60px;*/
	 } 
	.excelexportbutStage {
		    display: block;
    margin-bottom: 10px;
    position: relative !important;
    right: auto;
    text-align: center;
    width: 100%;}
}
	
@media only screen and (max-width:630px){
	
	
 .inpagesub {  
        border-bottom: 0;
		
    }  
    .inpagesub ul {  
        display: none;  
        height: auto;  
    }  
    .inpagesub a#pull {  
        display: block;  
        background-color: #556272;  
        width:94% ;
        position: relative;
		padding-left:6%;
		
    }  
    .inpagesub a#pull:before {  
        content:"";  
        background: url('pics/nav-icon.png') no-repeat;  
        width: 30px;  
        height: 30px;  
        display: inline-block;  
        position: absolute;  
        left: 15px;  
        top: 6px;  
    }  	
	 
#headernavistage { 
/*position:relative;*/
-moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
	right:0;}


#whitestage{ margin-top:10px;}

.content50prozent{  width:100%;}
.content25prozent{  width:48%;}
.content2-3, .content1-70p {width:100%;}	
.content1-3,.content1-25p {width:100%; margin-top:1em;}
.contentsplitt{ width:100%;}

.auswertsmall{ display:block;}
.auswertbig{ display:none;}

.auswertbutstage, .savebutstage {
    float: none;
    margin:  0;
    width: 98%;
}
.savebutstage {
	margin:1em 0;
}
	}	
	
	
@media only screen and (max-width:580px){
 		.dreispalten{ width:100%; 	   min-height:10px;}
		#refnfilterdiv{ float:none; width:100%;}
		
		#refnfilterdiv a { width:100%;}
		#containerstage{ background-position: -0 -67px;}
		
		.content50p{float:none;
	width:100%;
	margin-right:0;}
	#headernavistage{ right:0;}
	
	.ui-buttonset .ui-button {    margin-right: 7px;    width: 100%;margin-top: 5px;}
	.aktmesButonstage .flexbox  {    width: 100%;}
	.aktmesButonstage .flexbox div {    width: 45%;}
	#container { margin-bottom:0;}
		 
	}
@media only screen and (max-width:580px){.aktmesButonstage {    justify-content: end;}
.alertBut {  width: 100%;    margin-top: 5px;}}	
@media only screen and (max-width:380px){
	.personBigPic{ width:100%; float:none; margin-right:0px;}

	.inpagesub li {  
        display: block;  
        float: none;  
        width: 100%;  
    }  
    .inpagesub li a {  
        border-bottom: 1px solid #fff;  
    }   		
	}	
@media only screen and (max-width:340px){
.content25prozent{ width:100%;}
.timebutt{width: 97%;}
	}
	@media only screen and (max-width:251px){
.paraDelbutton,.parainfobutton{ width: 98%; min-width:60px;}	
	}
		@media only screen and (max-width:211px){
#mczlogo{ display:none;}	
	}