* {
	margin: 0;
	padding: 0;
	user-select: none;
	
}

body, html{
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    line-height: 1;
   xbackground: black;
    
}

.statuspresence-dashboard {
	
	cursor: pointer;
	
}
body, a {
	font-family: Verdana, Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
	font-size: 14px;
	color: #333333;
	
	overflow: hidden;				/* keine Scrollbars */
	
}

.dN {
	display: none;
}
li {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

/* Seitenhandling / Menüpunkte */

#screen_dashboard {
	
	display: none;
}

#screen_dashboard_neu {
	
	display: block;
}

#screen_debug_charts {
	display: none;
}

#screen_wohnzimmer_test {
	background: #000;
	display: none;
}



canvas {
  xborder: 2px solid orange;
}

.chart-container {
  position: relative;
  
}



/* Ende Seitenhandling / Menüpunkte */

#menuex {
	border-bottom: 1px solid #DEDEDE;
}

.zurueck {
	display: none;
	cursor: pointer;
}

.sichtbar {
	display: block !important;
}

.unsichtbar {
	display: none !important;
}

.icon-gross {
	width: 30px;
	height: 30px;
}

.icon-klein {
	width: 30px;
	height: 30px;
	xmargin-left: 3px;
}

.icon-tv {
	width: 22px;
	height: 22px;
	xmargin-left: 3px;
}

.icon-dusche {
	width: 24px;
	height: 24px;
	xmargin-left: 3px;
}

.icon-fenster {
	width: 24px;
	height: 24px;
}

.icon-ventilator {
	width: 26px;
	height: 26px;
}

.icon-ganz-klein {
	xwidth: 22px;
	xheight: 22px;
	width: 30px;
	height: 30px;
	margin-left: 0px;
	xpadding: 1px;
}

.detailspalte {
	
	min-width: 110px;
	
}
.raumname-gross {
	
	font-size: 21px; 
	width: 45%; 
	min-width: 160px;
}

.raumname-klein {
	
	font-size: 18px; 
	width: 45%; 
	xmin-width: 105px;
	min-width: 160px;
	font-size: 21px; 
}


#menue {
	display: none; 
	position: fixed; 
	top: 50px; 
	left: 0px; 
	z-index: 99999999120;
	width: 250px; 
	height: 100%; 
	border-right: 1px solid #9b9b9b; 
	border-bottom: 1px solid #9b9b9b; 
	background: #5c6d43;
	box-shadow: 5px 5px 5px grey;
	overflow: auto;
}

.menueeintrag, .opensub, .menueisopen>.submenuetext {
	display: block;
	font-size: 16px;
	padding-top: 16px;
	padding-bottom: 16px;
	padding-left: 10px;
	border-bottom: 1px dotted #effcdc;
	color: white;
}

.submenue {
	display: none;
	background: #3c482c;
}

.linkspfeil {
	fill: red !important;
}
.opensub {
	padding-left: 0px;
}

.menueisopen>.submenue>.menueeintrag>.submenuetext {
	
	padding-left: 20px;
}

.menueisopen>.submenuetext {
	background: #658e2e;
}


.submenue>.menueeintrag {
	padding-left: 0px;
}

.submenuetext {
	padding-left: 10px;
}


.menueeintrag:hover, .opensub:hover {
	xdisplay: block;
	xcolor: black;
	xbackground: #dcf7b3;
	xpadding-left: 10px;
	cursor: pointer;
}


	
.active {
	xbackground: #a3e43f;
	xcolor: white !important;
	xcursor: default !important;
}

#menue ul {
	margin-top: 0px;
}


#navigation {
	
	display: -webkit-flex; 			/* Safari */
    -webkit-align-items: center; 	/* Safari 7.0+ */
	display: flex;
	align-items: center;
	width: 100%;
	height: 32px; 
	background: #FFFFFF; 
	z-index: 99;
	border-bottom: 1px solid lightgrey;
	padding: 0px; 
	xbox-shadow: 2px 2px 25px #888888; 
	margin-bottom: 1px;
	color: #333333;
}

.main {
	position: relative;
	xheight: calc(100vh - 55px - 30px);	
	height: calc(100vh);	
	overflow-Y: auto;
}

.scrollable
{
	xheight: calc(100vh - 55px - 30px);	
	height: calc(100vh - 50px);	
	overflow-Y: scroll;
}

#btn_hauptmenue {
	
	cursor: pointer;
	fill: white;
	margin-left: 10px;
}

.strich_unten {
	font-size: 18px;
	color: white;
	border-bottom: 1px solid #333333;
	border-bottom: 1px dashed grey;
	margin-bottom: 0px;
	background: #3c482c;
	height: 50px;
}

.menuespalte {
	display: table-cell;
	border-right: 1px solid #DEDEDE;
}

.menuespalte:active {
	background: green;
}


.menuespalte:last-child {
	border-right: none;
}
#alles {
	display: none;
}

#statusliste .table {
	font-size: 7px;
}

#statusliste .zeile {
	height: 10px;
}


.submenueliste {
	background: #7d9855;
}

.container {
	
	
	margin-top: 5px;
	padding-left: 5px;
	padding-right: 5px;
	width: 100%;
	
	xmargin-top: 10px;
	xmargin-left: 0px;
	
}

.flex-container {
  display: flex;
  align-items: left;  
  margin-left: 0px;
  
}

.flex-container>div {
  font-size: 20px;
  xbackground: yellow;
  margin-left: 10px;
  xwidth: 165px;
  xtext-align: center;
}

.flex-fixwert {
	flex-basis: 280px;
}
.flex-spalte-3 {
	flex-grow: 1;
}
.flex-spalte-2 {
	flex-grow: 0;
	align-self: center;
	xmin-width: 30px;
}
.flex-spalte-4 {
	flex-grow: 1;
	
}

.chartinit {
	min-width: 300px;
}
#wohnzimmer {
	margin-left: 5%;
	margin-top: 5%;
}

.playlist {
	margin-left: 7px;
	margin-top: 10px;
}

#playlistauswahl {
	margin-top: 10px;
	display: none;
}
.playlisteintrag {
	min-width: 220px !important;
	margin-top: 3px;
}

.mindestbreite {
	min-width: 183px;
}

#wohnzimmerdetails, #kinderzimmerdetails, #parameterdetails, #chartwohnzimmerkinderzimmer {
	margin-top: 10px;
	display: none;
}
#klickwohnzimmer, #klickkinderzimmer, #klickparameter, #klickchartwohnzimmerkinderzimmer {
	cursor: pointer;
}

.debug {
	display: none;
}
#klickparameter {
	display: none;
}


#volume {
	margin-top: 10px;
	display: none;
}
.plusminuxs {
	width: 50px;
	height: 50px;
}
.plusminuszeichen {
	float: left;
	font-size: 20px;
}
.minuskorrektur {
	margin-left: -3px;
}

.layout1 {
	display: flex;
	xalign-items: left;
	margin-top: 5px;
	height: 50px;
	font-size: 18px;
    line-height: 22px;
    color: #3c482c;
    max-width: 400px;
   
}

.layout2 {
	display: flex;
	xalign-items: left;
	margin-top: 5px;
	xheight: 50px;
	font-size: 18px;
    line-height: 15px;
    color: #3c482c;
    max-width: 400px;
   
}

.layout3 {
   	font-size: 18px;
    line-height: 15px;
    color: #3c482c;
}

.statusanzeige {
	width: calc(100vw - 10px);	
}

.status-DIV{
	
}

.heizung-ein {
	xbackground: red;
	fill: #ff7373;
}
.heizung-aus {
	display: none;
}

.motion-ein {
	fill: hsl(86, 24%, 23%);
	fill: hsl(84, 67%, 73%);
}
.motion-aus {
	fill: hsla(0, 0%, 100%, 0.25)
}

.licht-ein {
	fill: hsl(12, 100%, 50%);
	fill: yellow;
}

.dusche-ein {
	xbackground: red;
	fill: #3c482c;
	fill: yellow;
}

.dusche-aus {
	fill: hsla(0, 0%, 100%, 0.25)
}

.musik-ein {
	xbackground: red;
	fill: #3c482c;
}

.musik-aus {
	xbackground: red;
	fill: #3c482c;
	display: none;
}

.fenster-ein {
	xbackground: red;
	fill: yellow;
}

.fenster-aus {
	fill: hsla(0, 0%, 100%, 0.25)
}


.licht-aus {
	fill: hsla(0, 0%, 100%, 0.25)
}

.tv-ein {
	xbackground: red;
	fill: #3c482c;
	fill: hsl(84, 67%, 73%);
}
.tv-aus {
	fill: hsla(0, 0%, 100%, 0.25)
}

.ventilator-ein {
	xbackground: red;
	fill: red;
}
.ventilator-aus {
	fill: hsla(0, 0%, 100%, 0.25)
}

.centervertical {
	display: flex;
	align-items: center;
}

.centerdivs {
	display: flex;
	justify-content: center;
}

.leftdivs {
	display: flex;
	justify-content: flex-start;
}

.righthorizontal {
	display: flex;
	justify-content: flex-end;
}

.aktiv-ja {
	background: #c2e88a;
}


.aktiv-nein {
	background: grey;
}

.aktiv-unbekannt {
	background: orange;
}

.mt-10 {margin-top: 10px;}
.right-1 { right: 1px;}
.right-2 { right: 2px;}
.right-3 { right: 3px;}
.right-4 { right: 4px;}
.right-5 { right: 5px;}
.right-6 { right: 6px;}
.right-7 { right: 7px;}
.right-8 { right: 8px;}
.right-9 { right: 9px;}
.right-10 { right: 10px;}

.left-5 {
	left: 5px;
}
.left-4 {
	left: 4px;
}
.left-3 {
	left: 3px;
}
.left-2 {
	left: 2px;
}
.left-1 {
	left: 1px;
}
.top-3 {
	top: 3px;
}
.top-2 {
	top: 2px;
}
.top-1 {
	top: 1px;
}
.mT-10 {
	margin-top: 10px;
}
.kleiner {
	width: 30px !important;
}
.ueberschrift {
	font-size: 20px;
}

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: none;
  top: 5px;
  width: 50px;
  height: 25px;
}


/* Hide default HTML checkbox */
.switch input {display:none;
				
				}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 19px;
  width: 19px;
  left: 2px;
  bottom: 3px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #337ab7;
}

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

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

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

#balkendiv {
	display: none;
	cursor: pointer;
	background: lightgrey;
	margin-top: 0px;
	margin-bottom: 0px;
}
#balkenbreite {
	xwidth: 300px;
	height: 0px;
	background: green;
}
.aktualisieren {
	cursor: pointer;
	margin-bottom: 10px;
}

.xstatus {
    xposition: absolute;
    width: 10px;
    height: 10px;
    xtop: 100px;
    xleft: 250px;
    border: 0px solid black;
    text-align: center;
    border-radius: 100px;
}
.anwesend {
	background-color: green;
	fill: #c2e88a;
}
.abwesend {
	background-color: red;
	xfill: #ff7373;
	fill: #c9cec4;
}

.dashboard-anwesend {
	background: white;
}
.dashboard-abwesend {
	background: #fafbfc;
}


.device-is-on {
	color: #c2e88a;
}

.device-is-off {
	color: #ff7373;
}

.raumtabelle td {
	width: 25%;
	text-align: center;
}

.schriftklein {
	font-size: 12px;
}

.kreis {
    xposition: absolute;
    width: 10px;
    height: 10px;
    xtop: 100px;
    xleft: 250px;
    border: 0px solid black;
    text-align: center;
    border-radius: 100px;
    background-color: green;
}

.serverzeit {
	text-align: right;
	margin-right: 10px;
}


#auth {
	position: absolute;
	display: none;
	left: 20px;
	top: 300px;
	width: 300px;
	height: 100px;
	background: red;
	z-index: 9999999;
}

/* CSS-Spinner */
@keyframes spinner {
  to {transform: rotate(360deg);}
}
 
.spinner:before {
  z-index: 999999999999;
  content: '';
  box-sizing: border-box;
  position: absolute;
  top: calc(50vh - 120px);
  left: calc(50vw - 120px);
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 10px solid #ccc;
  border-top-color: #333;
  animation: spinner .6s linear infinite;
}

/* Ende Spinner */

.farbverlauf_dim_fast_up {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffbf00+0,cf0404+100,cf0404+100 */
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffbf00+0,cf0404+100,cf0404+100&1+0,1+80,0+100 */
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffbf00+0,cf0404+100,cf0404+100&1+0,1+75,0+100 */
background: -moz-linear-gradient(left, rgba(255,191,0,1) 0%, rgba(219,51,3,1) 75%, rgba(207,4,4,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(255,191,0,1) 0%,rgba(219,51,3,1) 75%,rgba(207,4,4,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(255,191,0,1) 0%,rgba(219,51,3,1) 75%,rgba(207,4,4,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffbf00', endColorstr='#00cf0404',GradientType=1 ); /* IE6-9 */
}

.farbverlauf_dim_slow_up {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffbf00+0,ed3f00+100,cf0404+100 */
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffbf00+0,ed3f00+100,cf0404+100&1+0,1+83,0.56+100 */
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffbf00+0,ed3f00+100,cf0404+100&1+0,1+83,0+100 */
background: -moz-linear-gradient(left, rgba(255,191,0,1) 0%, rgba(215,36,3,1) 83%, rgba(207,4,4,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(255,191,0,1) 0%,rgba(215,36,3,1) 83%,rgba(207,4,4,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(255,191,0,1) 0%,rgba(215,36,3,1) 83%,rgba(207,4,4,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffbf00', endColorstr='#00cf0404',GradientType=1 ); /* IE6-9 */
}

.farbverlauf_dim_hold {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffbf00+0,ff6600+100,cf0404+100 */
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffbf00+0,ff6600+100,cf0404+100&1+0,1+73,0+100 */
background: -moz-linear-gradient(left, rgba(255,191,0,1) 0%, rgba(220,54,3,1) 73%, rgba(207,4,4,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(255,191,0,1) 0%,rgba(220,54,3,1) 73%,rgba(207,4,4,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(255,191,0,1) 0%,rgba(220,54,3,1) 73%,rgba(207,4,4,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffbf00', endColorstr='#00cf0404',GradientType=1 ); /* IE6-9 */
}

.farbverlauf_dim_off {
	
}

.farbverlauf_batterie_full {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#3f9e60+26,1d7534+100&1+0,1+70,0.36+100 */
background: -moz-linear-gradient(left, rgba(63,158,96,1) 0%, rgba(63,158,96,1) 26%, rgba(43,134,70,1) 70%, rgba(29,117,52,0.36) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(63,158,96,1) 0%,rgba(63,158,96,1) 26%,rgba(43,134,70,1) 70%,rgba(29,117,52,0.36) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(63,158,96,1) 0%,rgba(63,158,96,1) 26%,rgba(43,134,70,1) 70%,rgba(29,117,52,0.36) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3f9e60', endColorstr='#5c1d7534',GradientType=1 ); /* IE6-9 */
}
.farbverlauf_batterie_middle {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f9a20c+26,1d7534+100&1+0,1+50,0.36+100 */
background: -moz-linear-gradient(left, rgba(249,162,12,1) 0%, rgba(249,162,12,1) 26%, rgba(178,147,25,1) 50%, rgba(29,117,52,0.36) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(249,162,12,1) 0%,rgba(249,162,12,1) 26%,rgba(178,147,25,1) 50%,rgba(29,117,52,0.36) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(249,162,12,1) 0%,rgba(249,162,12,1) 26%,rgba(178,147,25,1) 50%,rgba(29,117,52,0.36) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9a20c', endColorstr='#5c1d7534',GradientType=1 ); /* IE6-9 */
}
.farbverlauf_batterie_low {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f9430c+25,ff993f+100&1+0,1+50,0.36+100 */
background: -moz-linear-gradient(left, rgba(249,67,12,1) 0%, rgba(249,67,12,1) 25%, rgba(251,96,29,1) 50%, rgba(255,153,63,0.36) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(249,67,12,1) 0%,rgba(249,67,12,1) 25%,rgba(251,96,29,1) 50%,rgba(255,153,63,0.36) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(249,67,12,1) 0%,rgba(249,67,12,1) 25%,rgba(251,96,29,1) 50%,rgba(255,153,63,0.36) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9430c', endColorstr='#5cff993f',GradientType=1 ); /* IE6-9 */
}

.farbverlauf_batterie_leer {
background: red;
width: 100% !important;
}