/* CSS für RaumauswahlCarousel*/
.PositionsboxRaumauswahl {
  position: absolute;
  width: 100%;
  height: 45%;
  position: absolute;
  top: 40%;
  left: 0%;
  font-family: "Arial";
  background-color: white;
}


/* CSS für GeräteauswahlCarousel*/
.containerGeraeteauswahl {
  position: fixed;
  width: 40%;
  height: 60%;
  top: 8%;
  left: 0%;
  font-family: "Arial";
  background-color: rgb(60, 60, 60);
  border-bottom: rgb(04, 235, 194) 3px solid;
}

/* CSS für GeräteauswahlCarousel*/
.PositionsboxGeraeteauswahl {
  position: absolute;
  width: 60%;
  height: 0%;
  top: 0%;
  left: 10%;
  font-family: "Arial";
}

/* CSS für Round Slider*/
.rs-control .rs-range-color {
  background-color: #04ebc2;
}

.rs-control .rs-path-color {
  background-color: #333333;
}

.rs-control .rs-handle {
  background-color: #04ebc2;  
}

.rs-control .rs-bg-color {
  background-color: #333333;   
}

.rs-border.rs-inner  {
  border: 5px dotted #797979;
}

.rs-border.rs-outer  {
  border:  #797979;
}

/* CSS für Statuszeile*/
.containerStatuszeile {
  display: grid;
  grid-template-rows: 25% 25% 25% 25% ;
  grid-template-columns: 15% 5% 15% 15% 50%;
  grid-auto-flow: column;
  position: fixed;
  top: 0%;
  left: 0%;
  height: 8%;
  width: 100%;
  background-color: rgb(51, 51, 51);
  border-bottom: rgb(04, 235, 194) 3px solid;
  font-family: "Arial";
  font-size: 2vmin;
  z-index:100;
}

#StatuszeileZeit {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 2;
  grid-row-end: 4;
  justify-self: center;
  align-self: center;
  color: white;
}

#StatuszeileDatum {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 2;
  grid-row-end: 4;
  justify-self: center;
  align-self: center;
  color: white;
}

#StatuszeileNachricht {
  grid-column-start: 5;
  grid-column-end: 6;
  grid-row-start: 2;
  grid-row-end: 4;
  justify-self: left;
  align-self: center;
  color: grey;
}

/* CSS für Slider auf der rechten Seite des Dashboard*/
#Slider {
  position: fixed;
  top: 20%;
  left: 70%;
}



#DashboardUser {
  position: fixed;
  top: 8%;
  left: 0%;
  height: 60%;
  width: 100%;
  background-color: rgb(04, 235, 194) ;
  line-height: 100px;
  padding-left: 100px;
  font-size: 2.5vmin;
  color: red ;
  font-family: "Arial";
  border-bottom: rgb(04, 235, 194) 3px solid;
}

#DashboardLicht {
  position: fixed;
  top: 8%;
  left: 0%;
  height: 60%;
  width: 100%;
  background-color: rgb(51, 51, 51);
  line-height: 100px;
  padding-left: 100px;
  font-size: 2.5vmin;
  color: grey;
  font-family: "Arial";
  border-bottom: rgb(04, 235, 194) 3px solid;
}

/* CSS für die User-Übersicht*/
.containerUser {
  display: grid;
  grid-template-rows: 16% 10% 2.5% 10% 2.5% 59%;
  grid-template-columns: 2.5% 2.5% 2.5% 2.5% 2.5% 2.5% 2.5% 2.5% 2.5% 2.5% 2.5% 2.5% 2.5% 2.5% 2.5% 2.5% 2.5% 2.5% 2.5% 2.5% 2.5% 2.5% 2.5% 2.5% 2.5% 2.5% 2.5% 2.5% 2.5% 2.5% 2.5% 2.5% 2.5% 2.5% 2.5% 2.5% 2.5% 2.5% 2.5% 2.5%;
  grid-auto-flow: column;
  position: fixed;
  top: 68%;
  left: 0%;
  height: 25%;
  width: 100%;
  background-color: white;
  font-family: "Arial";
  justify-self: start;
  align-self: start;
  font-size: 3vmin;
  color: grey;
}

.IconUserGroesse {
  width: 10vmin;
  height: 10vmin;
}

#IconUserJoern {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 2;
  grid-row-end: 6;
}

#BeschriftungIconUserJoern {
  grid-column-start: 7;
  grid-column-end: 8;
  grid-row-start: 2;
  grid-row-end: 3;
}

#BeschriftungIconUserJoernAnwesenheit {
  grid-column-start: 7;
  grid-column-end: 8;
  grid-row-start: 4;
  grid-row-end: 5;
  color: rgb(04, 235, 194);
}

#IconUserMichaela {
  grid-column-start: 17;
  grid-column-end: 18;
  grid-row-start: 2;
  grid-row-end: 5;
}

#BeschriftungIconUserMichaela {
  grid-column-start: 21;
  grid-column-end: 22;
  grid-row-start: 2;
  grid-row-end: 3;
}

#BeschriftungIconUserMichaelaAnwesenheit {
  grid-column-start: 21;
  grid-column-end: 22;
  grid-row-start: 4;
  grid-row-end: 5;
  color: rgb(04, 235, 194);
}

#IconUserEmilia {
  grid-column-start: 30;
  grid-column-end: 31;
  grid-row-start: 2;
  grid-row-end: 5;
}

#BeschriftungIconUserEmilia {
  grid-column-start: 34;
  grid-column-end: 35;
  grid-row-start: 2;
  grid-row-end: 3;
}

#BeschriftungIconUserEmiliaAnwesenheit {
  grid-column-start: 34;
  grid-column-end: 35;
  grid-row-start: 4;
  grid-row-end: 5;
  color: rgb(04, 235, 194);
}

/* CSS für die Raumauswahl*/
.containerRaumauswahl {
  position: fixed;
  top: 68%;
  left: 0%;
  height: 20%;
  width: 100%;
  font-family: "Arial";
  visibility: hidden;
  background-color:white;
}

/* CSS für die Navigationszeile*/
.containerNavigationszeile {
  display: grid;
  grid-template-rows: 50% 3% 20% 27%;
  grid-template-columns: 10% 10% 10% 10% 10% 10% 10% 10% 10% 10%;
  grid-auto-flow: column;
  position: fixed;
  top: 85%;
  left: 0%;
  height: 15%;
  width: 100%;
  background-color: rgb(51, 51, 51);
  font-family: "Arial";
  border-top: rgb(04, 235, 194) 3px solid;
  visibility: visible;
  color: white;
    font-size: 1.5vmin;
}

.IconGroesse {
  width: 8vmin;
  height: 8vmin;
}

#IconDashboardHintergrund {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 5;
}

#IconDashboard {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 2;
  grid-row-end: 4;
  justify-self: center;
  align-self: end;
}

#BeschriftungIconDashboard {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 4;
  grid-row-end: 5;
  justify-self: center;
  align-self: start;
}

#IconLichtHintergrund {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 5;
}

#IconLicht {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 4;
  justify-self: center;
  align-self: end;
}

#BeschriftungIconLicht {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 4;
  grid-row-end: 5;
  justify-self: center;
  align-self: start;
}

#IconStromHintergrund {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 5;
}

#IconStrom {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 2;
  grid-row-end: 4;
  justify-self: center;
  align-self: end;
}

#BeschriftungIconStrom {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 4;
  grid-row-end: 5;
  justify-self: center;
  align-self: start;
}

#IconKlimaHintergrund {
  grid-column-start: 4;
  grid-column-end: 5;
  grid-row-start: 1;
  grid-row-end: 5;
}

#IconKlima {
  grid-column-start: 4;
  grid-column-end: 5;
  grid-row-start: 2;
  grid-row-end: 4;
  justify-self: center;
  align-self: end;
}

#BeschriftungIconKlima {
  grid-column-start: 4;
  grid-column-end: 5;
  grid-row-start: 4;
  grid-row-end: 5;
  justify-self: center;
  align-self: start;
}

#IconRolladenHintergrund {
  grid-column-start: 5;
  grid-column-end: 6;
  grid-row-start: 1;
  grid-row-end: 5;
}

#IconRolladen {
  grid-column-start: 5;
  grid-column-end: 6;
  grid-row-start: 2;
  grid-row-end: 4;
  justify-self: center;
  align-self: end;
}
#BeschriftungIconRolladen {
  grid-column-start: 5;
  grid-column-end: 6;
  grid-row-start: 4;
  grid-row-end: 5;
  justify-self: center;
  align-self: start;
}

#IconSecurityHintergrund {
  grid-column-start: 6;
  grid-column-end: 7;
  grid-row-start: 1;
  grid-row-end: 5;
}
#IconSecurity {
  grid-column-start: 6;
  grid-column-end: 7;
  grid-row-start: 2;
  grid-row-end: 4;
  justify-self: center;
  align-self: end;
}
#BeschriftungIconSecurity {
  grid-column-start: 6;
  grid-column-end: 7;
  grid-row-start: 4;
  grid-row-end: 5;
  justify-self: center;
  align-self: start;
}

#IconGeraeteHintergrund {
  grid-column-start: 7;
  grid-column-end: 8;
  grid-row-start: 1;
  grid-row-end: 5;
}

#IconGeraete {
  grid-column-start: 7;
  grid-column-end: 8;
  grid-row-start: 2;
  grid-row-end: 4;
  justify-self: center;
  align-self: end;
}
#BeschriftungIconGeraete {
  grid-column-start: 7;
  grid-column-end: 8;
  grid-row-start: 4;
  grid-row-end: 5;
  justify-self: center;
  align-self: start;
}

#IconKameraHintergrund {
  grid-column-start: 8;
  grid-column-end: 9;
  grid-row-start: 1;
  grid-row-end: 5;
}

#IconKamera {
  grid-column-start: 8;
  grid-column-end: 9;
  grid-row-start: 2;
  grid-row-end: 4;
  justify-self: center;
  align-self: end;
}
#BeschriftungIconKamera {
  grid-column-start: 8;
  grid-column-end: 9;
  grid-row-start: 4;
  grid-row-end: 5;
  justify-self: center;
  align-self: start;
}

#IconBewaesserungHintergrund {
  grid-column-start: 9;
  grid-column-end: 10;
  grid-row-start: 1;
  grid-row-end: 5;
}
#IconBewaesserung {
  grid-column-start: 9;
  grid-column-end: 10;
  grid-row-start: 2;
  grid-row-end: 4;
  justify-self: center;
  align-self: end;
}
#BeschriftungIconBewaesserung {
  grid-column-start: 9;
  grid-column-end: 10;
  grid-row-start: 4;
  grid-row-end: 5;
  justify-self: center;
  align-self: start;
}

#IconWartungHintergrund {
  grid-column-start: 10;
  grid-column-end: 11;
  grid-row-start: 1;
  grid-row-end: 5;
}
#IconWartung {
  grid-column-start: 10;
  grid-column-end: 11;
  grid-row-start: 2;
  grid-row-end: 4;
  justify-self: center;
  align-self: end;
}

#BeschriftungIconWartung {
  grid-column-start: 10;
  grid-column-end: 11;
  grid-row-start: 4;
  grid-row-end: 5;
  justify-self: center;
  align-self: start;
}

/* CSS für Sonstiges*/
body {
  background-color: #ecf0f1;
}

.debug {
  color: #9b59b6;
  font-family: monospace;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  z-index: 100;
  font-size: 3vw;
}

.circle {
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: #9b59b6;
  border-radius: 50%;
  width: 25%;
  height: 0;
  padding-bottom: 25%;
  transform: translate3d(-50%, -50%, 0);
  box-shadow: 0 0 10px rgba(#000, 0.5);
}
  
.dot {
    position: absolute;
    width: 5%;
    height: 50%;
    left: 47.5%;
    top: 0;
    transform: rotate(0deg);
    transform-origin: center bottom;
  }