body {
  left:0px;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  background-color: #212121;
}

ul {
  list-style-type: none;
  padding-inline-start:0px;
}
/* wifi indicator start*/
#indicator{
  display:none;
  height:20px;
  width:20px;
  position: absolute;
  top:10px;
  z-index: 5000;
  left: 50%;
  -moz-animation: blink normal 0.5s infinite ease-in-out; /* Firefox */
  -webkit-animation: blink normal 0.5s infinite ease-in-out; /* Webkit */
  -ms-animation: blink normal 0.5s infinite ease-in-out; /* IE */
  animation: blink normal 0.5s infinite ease-in-out; /* Opera and prob css3 final iteration */
}

@-moz-keyframes blink {
  0% {
    opacity:1;
  }
  50% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-webkit-keyframes blink {
  0% {
    opacity:1;
  }
  50% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}
/* IE */
@-ms-keyframes blink {
  0% {
    opacity:1;
  }
  50% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}
/* Opera and prob css3 final iteration */
@keyframes blink {
  0% {
    opacity:1;
  }
  50% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}
/* wifi indicator einde */


#mainForm{
  border:2px solid #444;
  border-radius:25px;
  position: relative;
  padding:5px;
  padding-top:10px;
  padding-bottom:60px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2), 0 15px 40px rgba(0, 0, 0, 0.05);
  width:76vw;
  left:1%;
  background-color:#333;
  z-index:800;
  padding-left: 16%;

}

.right{
  position: relative;
  float:right;
}
#creeer{
  position: relative;
  display: inline-block;
  /* left:16%; */
  border-radius: 5px;
  margin-top: 10px;
  padding:5px;
  font-size: 1.2em;
  background-color: #00a0d2;
  color:white;
  cursor:pointer;
  border:none;
  margin-bottom:25px;
}

.icon{
  position: relative;
  height:24px;
  width:24px;
  top: 5px;
  cursor: pointer;
}
.icon:hover{
  transform: scale(1.2);
}

#generated{
  background-color: #444;
  border: none;
  position: relative;
  display:inline-block;
  margin-left:30px;
  color:white;
  font-size: 1.2em;
  width: 6em;
}
#onderwerpbalk{
  position: relative;
  width:98%;
  background-color: #00a0d2;
  color:white;
  font-weight: bolder;
  display:inline-block;
  border-radius:5px;
  border:none;
  margin-bottom: 5px;
  text-align: center;
  padding:5px;
}
/*
.roomstatus{
background-color: #c4b08c;
color: white;
min-width: 200px;
min-height: 30px;
padding: 10px;
display: none;
font-size: 10px;
margin-left: 33px;
top: -10px;
position: relative;
border-radius: 5px;
}

.roomstatus:after {
content: "";
position: absolute;
top: 50%;
right: 100%;
margin-top: -5px;
border-width: 6px;
border-style: solid;
border-color: transparent #c4b08c transparent transparent;
} */

.room{
  position: absolute;
  z-index: 3;
  height: 40px;
  width: 31px;
}
.room:hover{
  border: 1px solid blue;
  /* opacity: 0.5; */
}

.red{
  color: #fff;
  background-color: #dc3545;
  opacity: 0.7;
}

.green{
  color: #fff;
  background-color: #28a745;
  opacity: 0.7;
}
#coordinates{
  display:none;
}
#trackingRoomBlock{
  background-color: orange;
  opacity: 0.7;
}

#room101{
  left: 725px;
  top: 668px;
}

#room102{
  left: 690px;
  top: 620px;
}

#room103{
  left: 692px;
  top:668px;
}

#room104{
  left: 655px;top:620px;
}

#room105{
  left:655px;top:668px;
}

#room106{
  left:621px;top:620px;
}

#room107{
  left: 621px;
  top:668px;
}

#room108{
  left:585px;top:620px;
}

#room109{
  left: 586px;
  top: 668px;
}

#room110{
  left: 553px;
      top: 620px;
}

#room111{
  left: 552px;
  top:668px;
}

#room112{
  left: 521px;
  top: 620px;
}

#room113{
  left: 520px;
  top:668px;
}

#room114{
  left: 486px;
  top: 620px;
}

#room115{
  left: 487px;
  top: 668px;
}

#room116{
  left: 453px;
  top:620px;
}

#room201{
  left: 692px;
  top: 527px;
}

#room202{
  top:479px;
  left: 691px;
}


#room203{
  left: 656px;top:527px;
}

#room204{
  top:479px;
  left: 658px;
}

#room205{
  left: 622px;
  top: 527px;
}

#room206{
  top:479px;
    left: 622px;
}

#room207{
  left: 587px;
  top: 527px;
}

#room208{
  top:479px;
  left: 587px;
}

#room209{
  left:552px;top:527px;
}

#room210{
  top:479px;
  left: 553px;
}

#room211{
  left: 521px;
  top: 527px;
}

#room212{
  top:479px;
    left: 521px;
}

#room213{
  left:486px;top:526px;
}

#room214{
  top: 479px;
  left: 487px;
}

#room215{
  left: 455px;
  top:527px;
}

#room216{
  top:479px;
  left: 454px;
}

#room217{
  left: 421px;
  top: 527px;
}

#room218 {
  top:479px;
  left: 421px;
}

#room219{
  left: 387px;
  top: 527px;
}

#room220{
  top:479px;
  left: 387px;
}

#room221{
  top:479px;
  left: 354px;
}

#room222{
  left: 321px;
top:526px;
}

#room223{
  left: 321px;
    top: 479px;
}

#room224{
  left: 288px;
  top: 527px;
}

#room225{
  top:479px;
  left: 286px;
}

#room226{
  left: 255px;
  top: 527px;
}

#room227{
  top: 479px;
  left: 255px;
}

#room228{
  left: 221px;
      top: 526px;
  }

#room229{
  top: 480px;
  left: 221px;
}

#room230{
  left:183px;top:526px;
}

#room231{
  top:479px;
  left: 184px;
}

#room232{
  left: 149px;
  top: 527px;
}

#room233{
  top:479px;
  left: 149px;
}

#room234{
  top:479px;
  left: px;
}

#room235{
  top:479px;
  left: px;
}

#room301{
  left: 686px;
  top: 387px;
  width: 37px !important;
}

#room302{
  left:685px;top:339px;
  width: 37px;
}

#room303{
  left:645px;top:387px;
  width: 37px;
}

#room304{
  left: 646px;
  top: 340px;
  width: 37px;
}

#room305{
  left: 609px;
  top: 386px;
}

#room306{
  left:609px;top:340px;
}

#room307{
  left: 577px;
  top: 386px;
}

#room308{
  left: 577px;
  top: 340px;
}

#room309{
  left: 546px;
  top: 386px;
}

#room310{
  left:544px;top:340px;
}

#room311{
  left:512px;top: 386px;
}

#room312{
  left: 513px;top:340px;
}

#room313{
  left:480px;top: 386px;
}

#room314{
  left:479px;top:340px;
}

#room315{
  left:447px;top: 386px;
}

#room316{
  left: 447px;
  top:340px;
}

#room317{
  left:413px;top: 386px;
}

#room318{
  left: 414px;
  top: 340px;
}

#room319{
  left: 382px;
  top: 386px;
}

#room320{
  left: 382px;
  top:340px;
}

#room321{
  left:349px;top: 386px;
}

#room322{
  left: 349px;top:340px;
}

#room323{
  left: 318px;
  top: 386px;
  width: 30px;
}

#room324{
  left: 317px;
  top:340px;
  width: 30px;
}

#room325{
  left:285px;top: 386px;
}

#room326{
  left: 285px;top:340px;
}

#room327{
  left: 253px;
  top: 386px;
}

#room328{
  left: 253px;top:340px;
}

#room329{
  left:219px;top: 386px;
}

#room330{
  left: 220px;
  top:340px;
}

#room331{
  left: 187px;
  top: 386px;
}

#room332{
  left:187px;top:340px;
}