.image_div {
  /* The image used */
  position: relative;
  display: inline-block;
  left: 50%;
  transform: translate(-50%);
}
#title {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: min(2.5vw, 3.5vh);
  font-variant: small-caps;
  text-align: center;
  margin-top: 0em;
  margin-bottom: 0em;
}

#logo {
  position: absolute;
  height: auto;
  width: 24%;
  top: 0%;
  left: 75%;
  overflow: hidden;
}
/* Excel button */
#excel_button {
  position: absolute;
  left: 57%;
  top: 90%;
  background-color: DeepSkyBlue;
  cursor: pointer;
  height: 7%;
  width: 14%;
  border-radius: 5px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: min(1.3vw, 1.8vh);
}
#excel_button:hover {
  background-color: DodgerBlue;
}

#shutdown_button {
  position: absolute;
  left: 2%;
  bottom: 4%;
  font-size: 20px;
  color: red;
  border-radius: 8px;
  border-style: 0.5px solid black;
}

#counter {
  position: absolute;
  left: 5%;
  bottom: 10%;
  /*
   *border: 5px solid DeepSkyBlue;
   *background-color: DeepSkyBlue;
   *border-radius: 5px;
   */
  height: 2px;
  font-size: 0.8rem;
}

#saved-data {
  position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
  height: 100px;
  width: 600px;
  border-style: solid;
  border-width: 5px;
  border-radius: 10px;
  border-color: #1e73be;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  /*
   *box-shadow: 0 0 5px 5px #141414;
   */
}

#saved-data {
  display: none;
}
/* REI buttons */

.rezistenta {
  --pseudo-translate: translateX(0%);
  position: absolute;
  background-color: #333;
  cursor: pointer;
  transition: 0.4s;
  height: 4.5%;
  width: 4.5%;
  border-radius: 5px;
  border: 1px solid #333;
}
.rezistenta:before {
  content: "";
  position: absolute;
  background-color: Snow;
  transition: 0.4s;
  height: 80%;
  width: 50%;
  top: 6%;
  left: 3%;
  border-radius: 5px;
  border: 1px solid #333;
}

.btntxt {
  position: absolute;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: min(1.5vw, 2.4vh);
  transform: rotate(0deg);
  color: Snow;
  top: 13%;
  left: 63%;
  transition: 0s;
}

#REI1 {
  left: 11.5%;
  top: 34.5%;
}
#REI1:before {
  transform: var(--pseudo-translate);
}

#REI2 {
  left: 11.5%;
  top: 54%;
}
#REI2:before {
  transform: var(--pseudo-translate);
}

#REI3 {
  left: 75.5%;
  top: 47.5%;
}
#REI3:before {
  transform: var(--pseudo-translate);
}

#REI4 {
  left: 85%;
  top: 91.2%;
}
#REI4:before {
  transform: var(--pseudo-translate);
}

/* REI animations and positions */
.animatieREI {
  position: absolute;
  background-color: yellow;
  animation: REIflash 2s linear infinite;
  width: 0.75%;
}

.REI1off,
.REI2off,
.REI3off,
.REI4off {
  display: none;
}

@keyframes REIflash {
  0% {
    background-color: rgb(184, 158, 44);
  }
  50% {
    background-color: rgb(255, 0, 0);
  }
  100% {
    /* background-color: gold; */
    background-color: rgb(184, 158, 44);
  }
}

#REI1stanga {
  height: 23.8%;
  left: 7.65%;
  top: 22.3%;
}

#REI2stanga {
  height: 23.8%;
  left: 7.65%;
  top: 45.9%;
}

#REI1dreaptasus {
  height: 4.4%;
  left: 18.52%;
  top: 22.3%;
}

#REI1dreaptajos {
  height: 17.8%;
  left: 18.52%;
  top: 27.75%;
}

#REI2dreaptasus {
  height: 17.8%;
  left: 18.52%;
  top: 46.6%;
}

#REI2dreaptajos {
  height: 4.3%;
  left: 18.52%;
  top: 65.4%;
}

#REI3stanga {
  height: 24.1%;
  left: 71.9%;
  top: 37.6%;
}

#REI3dreaptasus {
  height: 11.4%;
  left: 82.7%;
  top: 37.6%;
}

#REI3dreaptajos {
  height: 11.5%;
  left: 82.7%;
  top: 50.2%;
}

#REI4stanga {
  height: 11.5%;
  left: 83%;
  top: 87.3%;
}

#REI4dreapta {
  width: 0.77%;
  height: 11.5%;
  left: 97.9%;
  top: 87.3%;
}

.temperaturi {
  /* Text format */

  text-align: center;
  padding: 0.75% 0; /* center vertically, first value (pixels from top) must be (boxheight-fontsize)/2, 2nd value=(0 pixels from bot) */
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: min(1.3vw, 1.8vh);
}

/* Temperature sensor positions */
#ST1 {
  position: absolute;
  left: 27.1%;
  top: 20.5%;
}
#ST2 {
  position: absolute;
  left: 27.1%;
  top: 39.5%;
}
#ST3 {
  position: absolute;
  left: 27.1%;
  top: 58.4%;
}
#ST4 {
  position: absolute;
  left: 89.2%;
  top: 45.3%;
}
#ST5 {
  position: absolute;
  left: 89.2%;
  top: 76.3%;
}
#ST6 {
  position: absolute;
  left: 84%;
  top: 23.7%;
}