@font-face {
  font-family: 'Open Sans';
  font-weight: 400;
  font-style: normal;
  src: url('/fonts/Open-Sans-regular/Open-Sans-regular.eot');
  src: url('/fonts/Open-Sans-regular/Open-Sans-regular.eot?#iefix') format('embedded-opentype'),
       local('Open Sans'),
       local('Open-Sans-regular'),
       url('/fonts/Open-Sans-regular/Open-Sans-regular.woff2') format('woff2'),
       url('/fonts/Open-Sans-regular/Open-Sans-regular.woff') format('woff'),
       url('/fonts/Open-Sans-regular/Open-Sans-regular.ttf') format('truetype'),
       url('/fonts/Open-Sans-regular/Open-Sans-regular.svg#OpenSans') format('svg');
}


@font-face {
      font-family: 'fontello';
      src: url('/fonts/fontello/fontello.eot');
      src: url('/fonts/fontello/fontello.eot?#iefix') format('embedded-opentype'),
           url('/fonts/fontello/fontello.woff') format('woff'),
           url('/fonts/fontello/fontello.ttf') format('truetype'),
           url('/fonts/fontello/fontello.svg#fontello') format('svg');
      font-weight: normal;
      font-style: normal;
    }



*{
    margin:0;
    padding:0;
}

body {
      background-color:#363935;
      /*background-color:#4F514E;
      background-color:#40483C;*/
    color:#D5D5D5;
    font-size: 14px;


    /*font-family: 'Roboto', sans-serif;*/
    font-family: 'Open Sans', sans-serif;


}



a {color:#bfbfbf; text-decoration: none;}
/* style the main area */

.container {
    margin: 20px auto;
    position: relative;

  height: auto !important;
  height: 540px;
  min-height: 540px;
    max-width: 810px;
/*background-color:#5A5E53; background-color:#4C544C;*/
 background-color:#484D4B;

    -moz-box-shadow: 0 3px 3px rgba(0,0,0,0.3);
    -webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.3);
    box-shadow: 0 3px 3px rgba(0,0,0,0.3);
}


h2 {
  font-size: 18px;
  color:#d7d7d7;
}

small {
  padding:0;
  margin:0;
}

#sample {
position: relative;
height: 116px;
width: 355px;
float: right;
}

#meterbiene {
	position: relative;
	height: 116px; text-align: center;
	/* float: right; */
}

img#lastsnap {
	/* height: auto; */
	/* left: 30px; */
	position: absolute;
	/* width: 452px; */
	height: 296px;
	padding-right: 10px;
	background: #424737;
	padding-left: 30px;
}
#archiv {
	font-size: 13px;
	position: absolute;
	float: initial;
	bottom: 1px;
	left: 40px;
}

#kameraaktualisieren {
	/* width: 50px; */
	/* display: none; */
	right: 20px;
	position: absolute;
	bottom: 2px;
	font-size: 13px;
cursor: pointer;
}

/*
.btn {
  color: #ffffff;
  font-size: 20px;
  background: red;
  padding: 2px 20px 10px 20px;
  text-decoration: none;
width:50px;
height:20px;
top: 443px;
left:250px;
position:relative;
text-align: center;
}
*/

.logo {
	border: solid 2px;
	height: 100px;
	width: 70px;
	padding-left: 5px;
	padding-top: 5px; margin: auto; opacity: 0.5;
}

.next {margin-left: 230px;
margin-top: -64px;
position: relative;}

.frameauswahl {
border: 2px solid #C8C8C8;
border-radius: 90px;

bottom: -394px;
height: 10px;
left: 393px;
padding-bottom: 15px;
padding-left: 10px;
padding-right: 10px;
padding-top: 5px;
position: relative;
width: 10px;
}

.titel {
left: -85px;
position: relative;
top: -24px;
}
.titel_name {
color: #b7b7b6;
font-size: 11px;
font-weight: 100;
left: -160px;
letter-spacing: 1px;
position: relative;
top: -558px;
text-align:right;
}

.ball {
    height: 20px;
    left: 230px;
    position: absolute;
    top: 400px;
    width: 50px;
    border: 0px solid #333333;
}

.werteclass {
left: -4px;
position: absolute;
top: 15px;
}



#PreviewGaugeMeter_4 span {
font-size: 20px!important;
}

.rot {
  background-color: red;
}

.orange {
  background-color: orange;
}

.gelb {
  background-color: yellow;
}

.gruen {
  background-color: green;
}

.aus {border-color: #6D585B!important;}
.auto {border-color: #037ca9!important;}
.hand {border-color: #776A41!important;}
.mond {border-color: #cfca7e!important;}
.h50 {border-color: #cfca7e!important;}
.h100 {border-color: #cfca7e!important;}
.a2s {border-color: #037ca9!important;}
.a4s {border-color: #037ca9!important;}
.an {
  background-color: #f7e655;
border-color: #0F7618!important;
}



#meters {
position: relative;
margin-left: 6px;
}

.wasser {
color: #eeeeee;
}

.soll {
position: relative;
top:15px;
}

#wasserstand_forecast {
	/* margin-left: 25px; */
	float: right;
	/* margin-top: 15px; */
	/* display: none; */
	top: 95px;
	position: relative;
	right: 8px;
}


#leftvalue4 {
color: #d6d6d6;
left: 30px;
position: relative;
top: -18px;
}

#wasserstand {
height: 99px;
width: 48px;
-webkit-box-shadow: 3px 3px 4px 0px rgba(50, 50, 50, 0.55);
-moz-box-shadow:    3px 3px 4px 0px rgba(50, 50, 50, 0.55);
box-shadow:         3px 3px 4px 0px rgba(50, 50, 50, 0.55);
top: 15px;
position: relative;
}

#container_wasser {
	font-size: 13px;
	font-weight: 200;
	position: relative;
	float: left;
	/* width: 341px; */
	padding-left: 15px;
	/* margin-right: 20px; */
	/* background: red; */
}

#container4 {
height: 92px;
position: relative;
top: -73px;
left: 70px;
}

.bordertop {
border-top: 1px!important;
border-top: 1px dotted!important;
border-top: 1px dashed #ffffff!important;
}

#slider4 {
height: 101px;
left: -32px;
position: relative;
top: -32px;
width: 14px;
}


div#slider4.noUi-target {
background:none;
border:none;
box-shadow:none;
}



.legendbox {
	display: inline;
}



.demo-placeholder {
	width: 100%;
	height: 100%;
	font-size: 14px;
	line-height: 1.2em;
}

.flot-y-axis.flot-y4-axis.yAxis.y4Axis {
	left: -8px !important;
	/* position: relative; */
	/* left: 0px; */
}

#graph {
color: #dedede;
cursor: pointer;
font-size: 1.1em;
left: 120px;
top: -2px;
width: 31px;
text-align: right;
}

#status_graph_container {
color: #969696;
font-size: 0.7em;
position: relative;
margin-left:293px;
margin-top:5px;
width: 130px;
}

.status_graph {
  margin: 0 5px;
}

#chart3 {
  position: relative;
height: 260px;
background-color: #424737;
padding:0 5px;
}

.chart-container {
height: 296px;
width: 442px;
z-index: 999;
}

#lastsnap {
z-index: 999;
}


div#slider4.noUi-target.noUi-rtl.noUi-vertical div.noUi-base div.noUi-origin div.noUi-handle.noUi-handle-lower {
 /* width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  left:5px;
  border-right:10px solid blue; */
  background:#698960; border:none; box-shadow:none;
}








/*
#slider4umrandung {
background-color: #d3d3d3;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
height: 126px;
left: -20px;
position: relative;
top: -98px;
width: 15px;
display:none;
}*/

.licht1 {
left: 0;
position: relative;
top: -5px;
border-top: 1px solid #838C82;
}
.licht2 {
left: 0;
position: relative;
top: -4px;
border-top: 1px solid #838C82;
}
.licht3 {
left: 0;
position: relative;
top: -3px;
border-top: 1px solid #838C82;
}

.licht4 {
left: 0;
position: relative;
top: -2px;
border-top: 1px solid #838C82;
}
.licht5 {
left: 0;
position: relative;
top: -1px;
}
.licht6 {
left: 0;
position: relative;
top: 0px;
}

#fkt_heizung {
display: none;
}
#container_heizung {
display: none;
}

.GaugeMeter {
  position: Relative;
  text-align: Center;
  overflow: Hidden;
  cursor: Default;
  display: inline-block;
}

.GaugeMeter SPAN, .GaugeMeter B {
  width: 54%;
  position: Absolute;
  text-align: Center;
  display: Inline-Block;
  color: RGBa(0,0,0,.8);
  font-weight: 100;
  font-family: "Open Sans", Arial;
  overflow: Hidden;
  white-space: NoWrap;
  text-overflow: Ellipsis;
  margin: 0 23%;
}

.GaugeMeter[data-style="Semi"] B {
  width: 80%;
  margin: 0 10%;
}

.GaugeMeter S, .GaugeMeter U {
  text-decoration: None;
  font-size: .60em;
  font-weight: 200;
  opacity: .6;
}

.GaugeMeter B {
  color: #000;
  font-weight: 200;
  opacity: .8;
}

#content {
float: left;
position: relative;
width: 442px;
}
#contentbiene {
position: relative;
width: 442px;
}

button {
  top: 0;
  left: 0;
  position: fixed;
}

.logger {
left: 12px;
position: fixed;
top: 0px;
}

ul {

}
li{
display: inline-block;
/*
border-left-color: gray;
border-left-style: solid;
border-left-width: 1px;

height: 10px;
width: 11px;
*/
}


#slider {
margin-left: 90px;
margin-top: -13px;
width: 293px;
}
#slider5 {
left: 90px;
top: -13px;
width: 293px;
margin-bottom: -13px;
}

#slider7 {
  left: 90px;
  top: -13px;
  width: 293px;
  margin-bottom: -13px;
}

#slider2 {
margin-left: 90px;
width: 293px;
margin-top: -13px;
}
#slider6 {
margin-left: 90px;
margin-top: -13px;
width: 293px;
}

#slider3 {
height: 101px;
margin-left: 6px;
margin-top: 14px;
}


#leftvalue3 {
	/* margin-bottom: 0px; */
	/* margin-left: 0px; */
	/* top: -18px; */
	/* position: relative; */
}



#leftvalue5 {
margin-top: -16px; float: right;  margin-right: 20px;
}
#leftvalue7 {
margin-top: -16px; float: right; margin-right: 20px;
}

#leftvalue6 {
margin-top: -16px; float: right; margin-right: 20px;
}

#lichtpflanzwerte {
margin-right:20px;
margin-top:-23px;
float:right;
}

.lichtslider {

float: right;
margin-top: 40px;
position: relative;
width: 480px;
margin-right: 5px;
}

.lichtslider h2 {
margin-bottom: 43px;
margin-left: 144px;
}

#container {
font-size: 12px;
}

#container2 {
font-size: 12px;
margin-top: 45px;
}

#lichtwerte{
float: right;
margin-top: -23px;
margin-right:20px;
}

#container3 {
float: right;
position: relative;
	margin-right: 5px;
}

#container_heizung {
	float: right;
	/* position: fixed; */
	/* margin-top: 11px; */
	/* bottom: 100px; */
	margin-right: 25px;
}

#slider_heiz {
	height: 101px;
	margin-left: 6px;
	margin-top: 14px;
}

.feuchte{
font-size: 12px;
font-weight: 200;
opacity: 0.8;
position: relative;
}



.label {
font-size: 12px;
}

.label2 {
font-size: 12px;
}

.werte {
color: #c3c6c0;
font-size: 11px;
position: absolute;
bottom: 18px;
right: 3px;
}

#container_manuell{
clear: left;
float: left;
font-size: 12px;
height: 190px;
left: 25px;
margin-top: 20px;
position: relative;
width: 290px;
}

ul .manuellkasten {
float: left;
height: 78px;
margin: 8px;
position: relative;
width: 56px;
}

.manuelletitel{
float: left;
width: 56px;
text-align: center;
}




#feuchte_manuell{
background: #404b3e none repeat scroll 0 0;
border: 3px solid;
color: #e4e4e4;
cursor: pointer;
height: 50px;
margin-top: 5px;
position: relative;
text-align: center;
width: 50px;
}


.feuchte_an_titel {
position: relative;
top: 15px;
}


#heizung_manuell{
background: #404b3e none repeat scroll 0 0;
border: 3px solid;
color: #e4e4e4;
cursor: pointer;
height: 50px;
position: relative;
text-align: center;
width: 50px;
}


.heizung_an_titel {
position: relative;
top: 15px;
}



#nebel{
background: #404B3E;
border: 3px solid;
color:#E4E4E4;
cursor: pointer;
height: 50px;
margin-top: 5px;
position: relative;
text-align: center;
width: 50px;
}


.nebel_an_titel {
position: relative;
top: 15px;
}

#bach{
color: #E4E4E4;
background: #404B3E;
text-align: center;
border: 3px solid;
cursor: pointer;
height: 50px;
width: 50px;
position: relative;
top: 5px;

}


.bach_an_titel {
top: 15px;
position: relative;
}


#luefter{
color: #e4e4e4;
background: #404B3E;
text-align: center;
border: 3px solid;
cursor: pointer;
height: 50px;
position:relative;
top: 5px;
width: 50px;
}



.luefter_an_titel {
position: relative;
top: 15px;
}

.luefter_an_titel p {
font-size:12px;
}

#licht{
background: #404b3e none repeat scroll 0 0;
border: 3px solid;
color: #e4e4e4;
cursor: pointer;
height: 50px;
position: relative;
text-align: center;
width: 50px;
}

.licht_an_titel {
position: relative;
top: 15px;
}

#lichtpflanz{
background: #404b3e none repeat scroll 0 0;
border: 3px solid;
color: #e4e4e4;
cursor: pointer;
height: 50px;
position: relative;
text-align: center;
width: 50px;
}

.lichtpflanz_an_titel {
position: relative;
top: 15px;
}


.iconlicht {
background: #404b3e none repeat scroll 0 0;
border: 3px solid #939376;
color: #F7F059;
cursor: pointer;
font-family: "fontello";
height: 33px;
padding-top: 17px;
position: relative;
text-align: center;
width: 50px;
}

.lichtan_links {
  margin-top: 9px;
}

.lichterlinks {
float: left;
margin-left: 179px;
margin-top: 40px;
position: relative;
 }

 .lichtpflanzan_links {
  margin-top: 10px;
}

.lichtaus_links {
  margin-bottom: 12px;
}

h4 {
color: #bfbfbf; font-weight: 200;
}


.lichterlinks ul:nth-child(2) {
background: #404b3e none repeat scroll 0 0;
border: 3px solid #C5C427;
float: left;
height: 72px;
margin-right: 40px;
margin-top: 30px;
padding-left: 5px;
padding-top: 5px;
width: 75px;
}

.lichterlinks ul:nth-child(3) {
background: #404b3e none repeat scroll 0 0;
border: 3px solid #994CA4;
/*color: #E884F2;*/
float: left;
height: 72px;
margin-top: 30px;
padding-left: 5px;
padding-top: 5px;
width: 75px;
}
.lichterlinks ul li {
	/*color:white;*/
}

#licht_auto {
background-color: green;
margin-left: -1px;
padding: 0px 14px;
 cursor: pointer;
}

#lichtpflanz_auto {
background-color: green;
margin-left: -1px;
padding: 0px 14px;
position: absolute;
margin-top: -17px;
 cursor: pointer;
}






.aktiv {
background-color: #000;
border-bottom-left-radius: 50px;
border-bottom-right-radius: 50px;
border-top-left-radius: 50px;
border-top-right-radius: 50px;
bottom: 4px;
height: 8px;
left: 88px;
position: fixed;
text-align: center;
width: 8px;
z-index:1000;
}

#einstellungen {
background: #344F3F ;
bottom: 0;
display: none;
height: 220px;
position: absolute;
width: 790px;
z-index: 999;
padding: 10px;

}


.fehler {
	position: relative;
	top: -48px;
	left: 10px;
	width: 80px;
}

.noUi-target.noUi-ltr
{
  background-color: #94a191;
  border: none!important;

}

.noUi-handle {
/*background-color: #90a0bc!important;*/
}

#slider3.noUi-target {
  background: #268a66!important;
  border: 1px solid #446a5a!important;

}
#slider3 .noUi-handle{
  background: #98A28B!important;
  border: medium none;
  box-shadow: none;
}


#slider_heiz.noUi-target {
	background: #995436 !important;
	border: 1px solid #873F20 !important;
}

#slider_heiz .noUi-handle {
	background: #98A28B !important;
	border: medium none;
	box-shadow: none;
}

 .einstellungen_aufrufen    {
  display: inline-block;
font-family: "fontello";
font-style: normal;
font-variant: normal;
font-weight: normal;
line-height: 1em;
font-size:20px;
position: absolute;
float:right;
text-align: center;
text-decoration: inherit;
text-transform: none;
width: 1em;
z-index: 9999;
bottom: 3px;
right: 3px;
 color:#099999;
 padding-left:10px;
 padding-top:10px;
 cursor:pointer;
}

.device_del {
cursor: pointer;
font-family: "fontello";
position: relative;
text-align: center;
float: right;
bottom: 205px;
color: #9e5744;
margin-right: 2px;
}
.device_del_icon{
font-size: 11px;
font-weight: bold;
color: #7B8E7D;
font-family: 'Open Sans', sans-serif;
margin-left: -90px;
position: absolute;
}

	.w3-border-0 {
		color:#C1C1C1;
		border:none;
		padding:8px;
		background:#395442 ;
		font-size:15px;
		text-align:center;
		padding: 3px;
		width:250px;
top: -7px;
position: relative;
margin-left: 20px;

	}


	.mail_einstellungen {
		margin-top: 2px;
display: inline;
		}

label 	{
		font-size:11px;
		font-weight:bold;
		color:#8C958D;
		}
input {
  display: inherit;
}

.name_einstellungen {
display: flex;
position: relative;
margin-top: 26px;
}
.name_einstellungen input {
left:36px;
}

.einstellungen_id {
display: flex;
position: relative;
margin-top: 16px;
}
.einstellungen_id input{
left:54px;
}

.emailswitch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 25px;
  margin-top: 10px;
   margin-right: 15px;
}

.emailswitch input {display:none;}

.emailslider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #94a191;
  -webkit-transition: .4s;
  transition: .4s;
}

.emailslider:before {
  position: absolute;
  content: "";
  height: 25px;
  width: 26px;
  left: 4px;
  border-radius:3px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .emailslider {
  background-color: #0F9A25;

}

input:focus + .emailslider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .emailslider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

.testemail {
bottom: 5px;
display: inline;
font-family: "fontello";
font-size: 22px;
position: relative;
cursor:pointer;
}

.email-benachrichtigung {
position: relative;
margin-top: 25px;
}

.topleiste {
/*background:#5a5e53;*/ background:#273b3b;
font-size: 11px;
height: 27px;
position: relative;
width: 100%;
z-index: 1;

}

.topleiste a {
	padding:1px;
	background:#404b3e  ;
	position: relative; z-index: 999;
    top: 5px;
	left:5px;
	border: 2px solid #736D66;min-width: 30px; color:#bfbfbf;
}

#navbar {
	top:0;
}

.navbar-right {
	 float: right;
	 left: -8px;
	 position: relative;
}

.navbar-right.login {
	/* display: contents; */
	display: inline;
  float: none;
  left: 0;
}

.devices {
font-size: 11px;
height: 27px;
position: relative;
width: 100%;
z-index: 1;
}
.devices a {
	padding:1px;
	background:#404b3e  ;
	position: relative;
    top: 5px;
	left:5px; margin-right: 5px;
	border: 2px solid #736D66;min-width: 30px;
}

 .device_akt {
color: #656565;
right: 815px;
position: absolute;
font-size:13px;
}

.zeit_akt {
	color: #9A9A9A;
	font-size: 13px;
	position: absolute;
	right: 198px;
	bottom: 5px;
}

/******settings.php******/
.form-control {
	color: #ececec;
	background-color: #395442;
	border: none;
	font-size: 12px;
	padding-bottom: 5px;
	padding-top: 3px;
	margin-top: -6px;
	padding-left: 6px;
	padding-right: 15px;
	width: 180px;
}

.tab-content {
	margin-left: 20px;
}

#registriertedevice {
	width: 330px;
	top: 39px;
	position: absolute;
	right: 10px;
}

.device_hinzu_titel {
	background-color: #3e3e3e;
	color: #c8c8c8;
	padding: 10px 15px;
	margin-bottom: 5px;
}

#device_hinzu {
	margin-top: 30px;
}

dl {
	margin-left: 15px;
	font-size: 12px;
}

dt {
	float: left;
	margin-right: 0.5em; width: 150px;
}

dt:first-child {
	margin-bottom: 18px;
}

dt:after {
	content: "";
}

dd:after {
	content: "";
	clear: left;
	display: block;
}

dd {
color: #bfbdbd;
}

dl {
margin-left: 15px;
}
.device_hinzu_del {
	cursor: pointer;
	font-family: "fontello";
	text-align: center;
	float: right;
	color: #9e5744;
	top: -15px;
	position: relative;
}


.aktivliste {
	background-color: #2f3c2f;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	height: 6px;
	width: 6px;
	position: absolute;
	left: 2px;
	margin-top: 6px;
}


/******settings.php****ENDE-******/

/************login.php********/

/************login.php****ENDE****/
.btn {
	color: #DFDFDF;
	font-size: 15px;
	background: #395442;
	padding: 0px 20px 2px 20px;
	text-decoration: none;
	/* width: 50px; */
	/* height: 27px; */
height: 22px;
	position: relative;
	text-align: center;
	border: none;
}

.btn:hover {
  background: #2C4133;
  text-decoration: none;
}

.btn-success {
	top: 2px;
}

.btn.btn-vergessen {
	border: none;
	background-color: #395442;
	font-size: 10px;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 3px;
	top: 2px;
	float: right;
	height: 18px;
	margin-right: 8px;
}


.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
	color: #c8c8c8;
	cursor: default;
	background-color: #3e3e3e;
	/* border: 1px solid #ddd; */
	border-bottom-color: transparent;
}

.nav-tabs > li > a:hover {
	border-color: #eee #eee #ddd;
}
.nav > li > a:focus, .nav > li > a:hover {
	text-decoration: none;
	background-color: #3e3e3e;
}

.nav-tabs > li > a {
	margin-right: 2px;
	line-height: 1.42857143;
	/*border: 1px solid transparent;*/
}
.nav > li > a {
	position: relative;
	display: block;
	padding: 10px 15px;
}
.nav {
	list-style: none;
}

.btn.btn-primary {
	margin-top: 15px;
	font-size: 11px;
	background: #2e3f34;
	padding-left: 12px;
	padding-right: 12px;
}

.form-group.speichern {
	margin-top: -48px;
	margin-left: 217px;
}
.control-label {
	bottom: 4px;
	position: relative;margin-left: 2px;
}
.form-group {
	margin-bottom: 10px;
}

.tab-content-email{ display: none;}
.tab-content-passwort { display: none;}

.alert.alert-success {
	bottom: 0;
	position: absolute;
}
/**********************************************/

.datumskasten{
background: #28443c none repeat scroll 0 0;
color: #D7D7D7;
font-size: 10px;
line-height: 10px;
margin-right: 4px;
padding-left: 5px;
padding-top: 3px;
text-align: center;
width: 17px;
padding-right: 5px;
padding-bottom: 5px;
}

.datumskasten:nth-child(2) {
    background: #2B5549 ;
}
.datumskasten:nth-child(3) {
    background: #365B50 ;
}

/* Tooltip text */
.datumskasten .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #3F403F;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;

    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
	top:30px;
}

/* Show the tooltip text when you mouse over the tooltip container */
.datumskasten:hover .tooltiptext {
    visibility: visible;
}

#wasserstand_container {
height: 150px;
width: 100px;
float:left;
}

.wasservorhersage {
display: flex;
position: relative;
  margin-bottom: 15px;
   margin-top: 14px;
}

.gesunkentitel {
color: #eeeeee;
position: relative;


}
.gesunken {
display: flex;
position: relative;
 margin-top: 14px;
}




@media only screen and (max-width: 768px) {



    body {
		    -ms-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    }

	h2 {
  font-size: 30px;
}

	.devices {
		float:none;width:100%;
	margin-bottom:20px;
	left:0;
	}

	#content {
		float:none;width:100%;
		left:0;
	}
	#slider3 {
		height:150px;
	}

	#sample {
  float: none;
  margin-top: 30px;
  margin-bottom: 10px;
}
	#meters {
		float:none;width:100%;left:0;
	}
	#container_wasser {
		float:none;width:100%;left:0;
	}

	#container3 {
	/* float: right; */
	position: absolute;
	margin-right: 5px;
	top: 14px;
	left: 280px;
}

	#chart3 {
  width:390px!important;
}
#status_graph_container {
    margin-left: 233px;
}


	#wasserstand_container {
  float:none;margin-bottom: 40px;
}
#container_heizung {
	float: none;
	/* position: fixed; */
	/* margin-top: 11px; */
	/* bottom: 100px; */
	/* margin-right: 145px; */
	top: 57px;
	position: absolute;
	left: 127px;
}

#wasserstand_forecast {
	float: left;
	margin-bottom: 10px;
	margin-left: 15px;
	font-size: 25px;
	width: 360px;
	/* background: red; */
	/* height: 120px; */
	top: 30px;
}

.wasservorhersage {

  margin-bottom: 30px;
}

.datumskasten {
font-size: 20px;
height: 49px;
line-height: 19px;
margin-right: 2px;
padding-top: 6px;
text-align: center;
width: 45px;
padding-right: 6px;
}

	#container_manuell {
		float:left;width:100%;left:0; height:auto; margin-bottom: 50px;
	}
	.lichtslider {
	width:100%;
margin-right: 5px;
margin-top: 0px;
position: relative;
margin-left: 8px;
margin-bottom: 20px;
float:left;
	}
.lichterlinks {
  margin-top: 0;
  margin-left:8px;
  float:left;

}

.lichterlinks ul:nth-child(3) {
  margin-bottom: 30px;
}

	.container {
	left: 0;
margin: 0 auto;
overflow: hidden;
width: 400px;
margin-bottom: 40px;

	}




	#lichtwerte {
  float:none;
  margin:0;}

  #lichtpflanzwerte {
  float:none;
  margin:0;}

  #slider {
float:none;
	}
	#slider2 {
float:none; margin-top:0;
	}

	.lichtslider h2 {
  margin-bottom: 43px;
  margin-left:0;
}

		.aktiv {
position: relative;
	}

	.chart-container {
		float:none;width:100%;left:0;
	}

ul .manuellkasten {
  height: 138px;
  width: 116px;
  margin-top:50px;
}
.manuelletitel {
   width: 96px;
   font-size:30px;
   margin-bottom:10px;
}


.manuellkasten li span {
  font-size:22px!important;
}
.manuellkasten li span p{
  font-size:25px!important;
}

#feuchte_manuell {
    height: 90px;
    width: 90px;
}
#heizung_manuell {
    height: 90px;
    width: 90px;
}

#nebel {
    height: 90px;
    width: 90px;
}
#bach {
    height: 90px;
    width: 90px;
}

#luefter {
  height: 90px;
  width: 90px; margin-top: -5px;
  }

#licht {
    height: 90px;
    width: 90px;
}

#lichtpflanz {
    height: 90px;
    width: 90px;
}

.licht_an_titel  {
position: relative;
top: 25px;
}

.lichtpflanz_an_titel {
position: relative;
top: 25px;
}
.luefter_an_titel {
position: relative;
top: 25px;
}
.bach_an_titel  {
position: relative;
top: 25px;
}

.nebel_an_titel {
position: relative;
top: 25px;
}
.feuchte_an_titel {
position: relative;
top: 25px;
}

#registriertedevice {
	/* top: 39px; */
	/* position: relative; */
	margin-right: 15px;
	margin-left: 15px;
	float: left;
	position: relative;

}

#settings_daten {
	/* position: relative; */
	float: left;	margin-bottom: 20px;
}