@font-face {
  font-family: "Digital-7";
  src:url("fonts/digital-7.ttf") format("truetype");
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border box;
}
html,
body {
  height: 730px;  
  width: 1510px;
  font-family: sans-serif;
}
img{
  pointer-events: none;
}
.main {
  width: 100%;
  height: 100%;
  background-color: rgb(189, 158, 101);
}

.layout {
  width: 75%;
  height: 99%;
  background-color: rgba(255, 255, 255, 0.578);
  border-radius: 17px;
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  position: relative;
  margin-top: 1.2%;
}
.firstRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.layout .firstRow img {
  height: 130px;
}
.layout .firstRow .Meters img {
  height: 190px;
}
#neddle {
  height: 80px;
  position: fixed;
  bottom: 0;
  top: 11%;
  left: 22.5%;
  transform: rotate(-90deg);

}
@keyframes needleMove {
  0% {
    top: 11%;
    left: 22.5%;
    transform: rotate(-90deg);
  }
  100% {
    top: 7.9%;
    left: 23.5%;
    transform: rotate(-90deg) rotateZ(51deg);
  }
}

#neddle2 {
  height: 80px;
  position: absolute;
  bottom: 0;
  top: 40%;
  right: 15%;
  transform: rotate(-90deg);
}
@keyframes needleMove2 {
  0% {
    top: 40%;
    right: 15%;
    transform: rotate(-90deg);
  }
  100% {
    top: 23.9%;
    left: 79%;
    transform: rotate(-90deg) rotateZ(43deg);
  }
}

.box h4 {
  color: #df0b0bde;
  text-shadow: 2px 2px 5px rgba(248, 46, 46, 0.693);
  font-family: Digital-7;
  font-weight: 100;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

.secondRow {
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
  justify-content: space-around;
  gap: 10%;
}
.secondRow .mainSwitch img {
  height: 90px;
}
.screens {
  width: 55px;
  height: 38px;
  background-color: red;
  position: absolute;
  top: 24.8%;
  left: 24%;
}
.screens2 {
  width: 55px;
  height: 38px;
  background-color: rgb(0, 106, 255);
  position: absolute;
  top: 24.8%;
  right: -26%;
}
.dialGauge {
  margin-left: 180px;
  width: 200px;
  height: 150px;
  margin-bottom: 95px;
  display: flex;
  flex-direction: row;
  position: relative;
}

.compInlets {
  height: 20%;
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-between;
  margin-left: -175px;
  gap: 35vw;
  visibility: hidden;
  margin-top: -20px;
}
.compInlets img {
  height: 150px;
}
.mainSwitch {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  margin-left: 250px;
  margin-right: -110px;
  margin-top: -185px;
  text-align: center;
  text-transform: capitalize;
  z-index: 10000;
}
.displays {
  display: flex;
  flex-direction: row;
}

.buttons {
  width: fit-content;
}

.buttons img {
  height: 50px;
}
.p1left{
  width: 25%;
  height: 99%;
  display: flex;
  flex-direction: column;
 }
 .panel {
   width: 90%;
   height: 190%;
  background-color:#D7D06E;
   border-radius: 15px;
   margin-top: 5%;
   margin-left: 5%;
   position: relative;
 }
#b5 {
  /* padding: 9px 60px; */
  margin-bottom: 25px;
}

.top {
  width: 100%;
  text-align: center;
  background-color: burlywood;
  padding: 12px 0px;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}
.top h2{
letter-spacing: 2px;
}
/* .layer1 {
   width: 100%;
   display: flex;
   flex-direction: column;
   margin-bottom: 3%;
   margin-top: 3%;
 } */
.layer1 {
  width: 100%;
  margin-top: 4%;
  display: flex;
  flex-direction: column;
  gap: 35px;
  align-items: center;
  justify-content: space-around;
}

.layer1 button {
  width: 150px;
  height: 45px;
  /* padding: 9px 22px; */
  border-radius: 15px;
  border: 2px solid black;
  cursor: pointer;
  transition: all cubic-bezier(0.19, 1, 0.22, 1) 0.5s;
  font-weight: 900;
  box-shadow: 3px 3px 2px black;
  font-size: 20px;
}
#btn
{
display: flex;
align-items: center;
justify-content: space-around;
width: 170px;
font-size: 20px;
margin-top: 15px;
}

.formula {
  width: 90%;
  height: 46%;
  position: relative;
  left: 18.5px;
  top: 21px;
  border-radius: 20px;
  text-align: center;
  background-color: #D7D06E;
}

.formula h2 {
  border-radius: 20px 20px 0 0;
  background-color: #deb887;
  padding-top: 12px;
  padding-bottom: 12px;
  letter-spacing: 2px;
}

.formula h4 {
  padding: 8px 20px;
  text-align: left; 
  color: black;
  margin: 0; 
  font-weight: 500;
  font-size: small;
  font-size: 10.7px;
}
  
.page1 {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
.page2 {
  width: 100%;
  height: 100%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #bd9e65;
}

.mainBox2 {
  width: 95%;
  height: 85%;
  border-radius: 20px;
  display: flex;
  gap: 20px;
}
.left2 {
  width: 50%;
  height: 9%;
  margin-top: -22px;
}
.inner {
  height: 668%;
  background-color: rgb(252, 219, 170);
  border-radius: 20px;
  overflow: hidden;
}
.inner h2 {
  background-color: #deb887;
  padding-top: 10px;
  padding-bottom: 10px;
  letter-spacing: 2px;
}
.computation {
  height: 430%;
  width: 100%;
  margin: auto;
  margin-top:3.9%;
  border-radius: 20px;
}
.computation h4 {
  background-color: #deb887;
  padding-top: 12px;
  padding-bottom: 12px;
  border-radius: 20px 20px 0px 0px;
  letter-spacing: 2px;
  text-transform: uppercase;

}
.computation>button
{
  font-weight: 400;
}
.theory{
  height: 100%;
  width: 50%;
  background-color:#ffffff;
  border-radius: 20px;
  margin-left: 359px;
}


#copLabel {
  height: 10px;
  width: 10px;
  border: none;
  font-size: 24px;
  background-color: #fff;
  top: 1276.9px;
  left: 42px;
  right: 0;
  bottom: 0;
  position: absolute;
  background: none;
  border-radius: 0px;
  cursor:text;
  z-index: 9999;
}
#copLabel::before {
  /* content: ""; */
  /* position: absolute;
     top: 0;
     left: 0; */
  /* width: 100%;
     height: 90%; */
  /* border-radius: 17px; */
  background-color: none;
  box-shadow: none;
}
#equSign {
  height: 50px;
  width: 50px;
  border: none;
  font-size: 32px;
  background-color: #fff;
  top: 1271.9px;
  left: 270px;
  right: 0;
  bottom: 0;
  z-index: 10;
  position: absolute;
  background: none;
  border-radius: 0px;
  cursor:default;
}
#equSign::before {
  background-color: none;
  box-shadow: none;
}
#computeButton {
  position: absolute;
  left: 516px;
  top: 1349px;
  padding: 8px 23px;
  border-radius: 15px;
  border: 2px solid black;
  cursor: pointer;
  transition: all cubic-bezier(0.19, 1, 0.22, 1) 0.5s;
  font-weight: 500;
  box-shadow: 2px 2px 3px black;
  font-size: 17px;
  color: black;
  font-weight: 600;
  cursor: pointer;
  background-color:#DEB887;
}
.theory img{
  position: relative;
  left: 45px;
  top: 47.5px;
  z-index: 1;
  height: 70px;
  width: auto;
}
.inval {
  /* display: none; */
  text-align: center;
  position: absolute;
  height: 15px;
  width: 40px;
  border-radius: 5px;
  background-color: #766f73;
  box-shadow: 3px 3px;
  cursor: pointer;
  transition: all cubic-bezier(0.19, 1, 0.22, 1) 0.6s;
z-index: 10;
padding: 4px 2px;
}
.inval:hover{
  box-shadow: initial;
  background-color: rgb(248, 202, 116);

}
::placeholder {
  font-size: 16px;
  color: white;
}
#inputField1 {
  position: relative;
  bottom: 7px;
  left: -100px;
  z-index: 10;
}
#inputField2 {
  position: relative;
  bottom: 7px;
  left: -70px;
}
#inputField3 {
  position: relative;
  bottom: -15px;
  left: -22px;
}
#inputField4 {
  position: relative;
  bottom: -15px;
  left: 8px;
}
.res {
  position: relative;
  left: 275px;
  bottom: 36px;
  height: 15px;
  width: 60px;
  padding-top: 10px;
  font-size: 25px;
  border: 3px solid #000000;
  text-align: center;
  border-radius: 10px;
  box-shadow: 4px 4px;
  background-color:#DEB887;
}
#result{
  color: black;
  font-size: 19px;
  margin-top: -10px;
}
.actual{
  height: 100%;
  width: 50%;
  background-color:#ffffff;
  border-radius: 20px;
  z-index: 1000;
  /* margin-left: 359px; */
  margin-top: -240px;
}#copLabel2 {
  height: 10px;
  width: 10px;
  border: none;
  font-size: 24px;
  background-color: #fff;
  top: 1276.9px;
  left: 410px;
  right: 0;
  bottom: 0;
  position: absolute;
  background: none;
  border-radius: 0px;
  cursor:text;
  z-index: 999;
}
#copLabel2::before {
  /* content: ""; */
  /* position: absolute;
     top: 0;
     left: 0; */
  /* width: 100%;
     height: 90%; */
  /* border-radius: 17px; */
  background-color: none;
  box-shadow: none;
}
#equSign2 {
  height: 50px;
  width: 50px;
  border: none;
  font-size: 32px;
  background-color: #fff;
  top: 1271.9px;
  left: 630px;
  right: 0;
  bottom: 0;
  z-index: 10;
  position: absolute;
  background: none;
  border-radius: 0px;
  cursor:default;
}
#equSign2::before {
  background-color: none;
  box-shadow: none;
}
#computeButton2 {
  position: absolute;
  left: 149px;
  top: 1350px;
  padding: 8px 23px;
  border-radius: 15px;
  border: 2px solid black;
  cursor: pointer;
  transition: all cubic-bezier(0.19, 1, 0.22, 1) 0.5s;
  font-weight: 500;
  box-shadow: 2px 2px 3px black;
  font-size: 17px;
  color: black;
  font-weight: 600;
  cursor: pointer;
  background-color: #DEB887;
}
.actual img{
  position: relative;
  left: 35px;
  top: 47.5px;
  z-index: 1;
  height: 70px;
  width: auto;
}
#inputField1-2 {
  position: relative;
  left: -110px;
  z-index: 10;
  bottom: 7px;

}
#inputField2-2 {
  position: relative;
  left: -78px;
 bottom: 7px;

}
#inputField3-2 {
  position: relative;
  left: 51px;
    bottom: -15px;

}

#inputField4-2 {
  position: relative;
  left: -83px;
  bottom: -15px;

}
.res2 {
  position: relative;
  left: 275px;
  bottom: 39px;
  height: 15px;
  width: 60px;
  padding-top: 10px;
  font-size: 25px;
  border: 3px solid #000000;
  text-align: center;
  border-radius: 10px;
  box-shadow: 4px 4px;
  background-color:#DEB887;
}
#result2{
  color:black;
    font-size: 19px;
    margin-top: -10px;
}
.right2 {
  width: 50%;
  background-color: #fff;
  height: 103.25%;
  border-radius: 20px;
  overflow: hidden;
  margin-top: -22px;
}
.right2 h2 {
  background-color: #deb887;
  padding-top: 10px;
  letter-spacing: 2px;
  padding-bottom: 10px;
  margin-bottom: 24px;
}
.graphArea
{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
#graphImg
{
  width:100%;
  height: 85%;
  margin-top: -50px;
  display: none;
  position: absolute;
  top: 10%;
}

.left2 table {
  width: 97%;
  border-collapse: collapse;
  margin: 10px auto;
}

.left2 th,
.left2 td {
  border: 2px solid #000000;
  padding: 7px 5px;
  text-align: center;
  font-size: 15px;
}

.left2 th {
  background-color: #f2f2f2;
  color: black;
  font-weight: bold;
}

.left2 tr:nth-child(even) {
  background-color: #f9f9f9; /* Alternates row colors for better readability */
}

#close {
  position: absolute;
  top: 2%;
  right: 3.5%;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  color: white;
  padding: 5px 5px;
  transition: all cubic-bezier(0.19, 1, 0.22, 1) 0.5s;
}

#close:hover {
  background-color:red;
}

.list {
  padding: 19px;
  position: absolute;
  text-align: justify;
}

.box {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333333;
  background-color: #000000;
  font-size: 30px;
  width: 80px;
  height: 35px;
  border-radius: 2px;
  /* box-shadow: 10px 7px 0px 0px rgba(0, 0, 0, 0.4); */
  border: 10px inset #5d5b5b;
}
/* .boxhead{
   color: #333333;
   background-color: #ffffff;
   border: 10px inset #5d5b5b;
   height: 35px;
 } */
.boxhead {
  text-align: center;
}
#cssportal-grid {
  display: grid;
  margin-left: 580px;
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  width: 100%;
  height: 100%;
}
#div1 {
  grid-area: 1/1/2/2;
}
#div2 {
  grid-area: 1/2/2/3;
}
#div3 {
  grid-area: 2/2/3/3;
  position: relative;
}
#div5 {
  grid-area: 2/1/3/2;
}
.meters {
  margin-top: -50px;
  position: absolute;
  left: 189px;
}
.meters h3{
  margin-top: 8px;
  margin-left: -155px;
  text-align: center;
}
.meters #ammHead{
  text-align: center;
  margin-left: 155px;
  margin-top: -22px;
}
.meterHeadings {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 90%;
  position: absolute;
  left: 5%;
}

.Ameter {
  margin-right: 20px;
}
.Meters {
  position: relative;
  left: -1px;
  margin-top: -80px;

  /* background-color: blue; */
}
.lightM {
  width: 100%;
  position: absolute;
  display: flex;
  top: 39.9%;
  left: 26%;
  /* animation: blink 1s infinite, scatter 2s infinite; */
}
#redl {
  animation: blink 1s infinite, scatter 2s infinite;
  height: 8.5px;
}
#red2 {
  animation: blink 1s infinite, scatter 2s infinite;
  height: 8.5px;
  margin-left: 150.7px;
  display: none;
}

@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
.instructions {
  position: absolute;
  width: 100%;
  height: 568px;
  background-color: #d8a868;
  transform: translateY(-130%);
  transition: all cubic-bezier(0.19, 1, 0.22, 1) 1s;
  z-index: 9999;
  border-radius: 10px;
}
.instructions h2 {
  text-align: center;
  margin-top: 3%;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.thirdRow {
  width: 100%;
  height: 25%;
  position: relative;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: -230px;
  margin-left: 15%;
}
.r1 {
  width: 100%;
  height: 20%;
}
.r2 {
  width: 100%;
  height: 20%;
}
.r3 {
  height: 60%;
  width: 100%;
}

/* layout */
/* layout */
.pipe-container {
  position: absolute;
  /* background-color: #fff; */
  top: -32px;
  left: 110px;
  width: 10px;
  height: 170px;
  transform: rotate(-90deg);
}
.pipe-container2 {
  position: absolute;
  left: 48px;
  /* background-color: #fff; */
  top: 130px;
  width: 5px;
  height: 60px;
  transform: rotate(0deg);
}
.pipe-container3 {
  position: absolute;
  top: 200px;
  left: 257px;
  z-index: 1;
  width: 10px;
  height: 50px;
  display: none;
  transform: rotate(-90deg);
}
.pipe-container4 {
  position: absolute;
  top: 120px;
  left: 297px;
  transform: rotate(180deg);
  /* background-color: #fff; */
  /* display: none; */
}
.pipe-container4 img {
  position: absolute;
  top: -85px;
  left: 17px;
  height: 284px;
  width: 265px;
  z-index: -10;
}
.pipe-container4 #pipe-4 {
  position: absolute;
  top: -14.5px;
  left: 39px;
  height: 234px;
  width: 205px;
  z-index: 100;
  display: none;
  transform: rotate(180deg);
}
.pipe-container4 #turn-4 {
  position: absolute;
  top: 14.9px;
  left: 215.5px;
  height: 100px;
  width: auto;
  z-index: 1000;
  transform: rotate(-90deg) scaleY(-1);
}
.pipe-container4 #turn-4A {
  display: none;
  position: absolute;
  top: 22.5px;
  left: 209px;
  height: 99px;
  width: auto;
  z-index: 1000;
  transform: rotate(0deg) scaleY(-1) scaleX(-1);
}
.pipe-container5 {
  /* display: none; */
  position: absolute;
  left: 35px;
  top: 118px;
  /* background-color: #fff; */
  z-index: -12;
  transform: rotate(180deg);
  width: 5px;
  height: 85px;
}
.pipe-container5 img {
  transform: rotate(90deg);
  position: absolute;
  left: -38.5px;
  top: -60px;
  z-index: -12;
  height: 270px;
  width: 90px;
}
.pipe-container5 #pipe-5 {
  position: absolute;
  left: -10.5px;
  top: -28.8px;
  width: 75px;
  height: 190px;
  display: none;
}
.pipe-container6 {
  position: absolute;
  left: 10px;
  top: 261px;
  width: 100%;
  height: 290px;
  /* background-color: #fff; */
  transform: rotate(0deg);
}
.pipe-container6 img {
  width: 30%;
  height: 99%;
  position: relative;
  left: 18px;
  top: -43.5px;
}
.pipe-container6 #pipe-6 {
  position: absolute;
  height: 206px;
  width: 210px;
  top: 16.2px;
  z-index: 20;
  left: 42px;
  display: none;
  transform: rotate(180deg);
}
.pipe-container6 #turn-6 {
  position: absolute;
  left: -8.8px;
  top: 70.5px;
  width: 75px;
  height: 79px;
  z-index: -10;
  transform: rotate(90deg) scaleX(-1) scaleY(-1);
  /* display: none; */
}
.pipe-container6 #turn-6A {
  position: absolute;
  left: -16px;
  top: 71px;
  width: 89px;
  height: 74px;
  z-index: 1000;
  transform: rotate(-90deg) scaleX(1);
  display: none;
}
.pipe-container7 {
  position: relative;
  width: 295px;
  height: 210px;
  top: 222px;
  left: 341px;
  /* background-color: #fff; */
  transform: rotate(180deg);
}
.pipe-container7 img {
  width: 100%;
  height: 119%;
}
.pipe-container7 #pipe-7 {
  height: 200px;
  width: 228px;
  position: absolute;
  top: 24.5px;
  left: 21px;
  z-index: 0;
  display: none;
}

.pipe-container8 {
  position: absolute;
  left: 663px;
  top: 90px;
  transform: rotate(0deg);
  z-index: 10;
}
.pipe-container8 img {
  width: 130px;
  height: 290px;
  transform: rotate(90deg);
  position: relative;
  left: -52px;
  top: -90px;
  /* display: none; */
}
.pipe-container8 #pipe-8 {
  display: none;
  position: absolute;
  top: -58px;
  left: -25.5px;
  width: 130px;
  height: 232px;
}
.pipe-container8 #turn-8 {
  /* display: none; */
  width: auto;
  height: 102px;
  z-index: -1;
  position: absolute;
  top: -83px;
  left: -35.467px;
}
.pipe-container8 #turn-8A {
  position: absolute;
  width: auto;
  height: 97px;
  top: -80px;
  left: -34px;
  z-index: -1;
  display: none;
}

.pipe-container9 {
  position: absolute;
  top: -95px;
  left: 360px;
  z-index: -10;
  /* background-color: #fff; */
  display: block;
  transform: rotate(0deg);
}
.pipe-container9 img {
  width: 320px;
  height: 284px;
  /* display: none; */
}
.pipe-container9 #pipe-9 {
  width: 270px;
  height: 225px;
  position: absolute;
  z-index: 1100;
  top: 4.3px;
  left: 10px;
  display: none;
}
.pipe-container10 {
  position: absolute;
  top: 150px;
  left: 725px;
  z-index: 1;
  width: 10px;
  height: 120px;
  transform: rotate(-90deg);
}
.pipe-container11 {
  position: absolute;
  left: 665px;
  top: 120px;
  z-index: 1;
  width: 5px;
  height: 100px;
  transform: rotate(0deg);
}
.pipe-container12 {
  position: absolute;
  top: 50px;
  left: 590px;
  width: 10px;
  height: 160px;
  transform: rotate(-90deg);
}
.pipe-container13 {
  position: absolute;
  left: 9.8px;
  top: 273px;
  width: 100%;
  height: 290px;
  transform: rotate(0deg);
}
.pipe-container13 img {
  width: 3%;
  height: 65%;
}
.pipe {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 100%;
  /* background: linear-gradient(to right, #939391, #434343c0, #f2f2f2); */
  /* border-radius: 10px; */
  /* box-shadow: 2px 2px 20px #000000e4; */
  /* visibility: hidden; */
}

.water {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 0;
  background-color: #007bff79;
  /* animation: flow 2s linear infinite; */
}

@keyframes flow {
  0% {
    height: 0;
  }
  50% {
    height: 50%;
  }
  95% {
    height: 95%;
  }
  100% {
    height: 0;
  }
}
img {
  height: 100px;
}
.rotometer {
  position: relative;
  left: -47.5px;
  top: -6px;
}
.rotometer h3 {
  position: absolute;
  left: 120px;
  top: 20px;
}
.Glasstube {
  height: 100px;
}
.Glasstube img {
  height: 210%;
  width: 20%;
  position: absolute;
  /* top: -15px;
   left: 119px; */
  z-index: 1;
}
.Glasstube #rotoA{
  top: 0px;
  display: none;
}
.glasstubefloat {
  height: 150%;
  width: 25%;
  position: absolute;
  /* top: -15px;
   left: 119px; */
  z-index: 1;
  transition: all cubic-bezier(0.19, 1, 0.22, 1) 1s;
}
.glasstubefloat img {
  height: 9%;
  width: 7%;
  position: absolute;
  top: 45px;
  left: 80.5px;
  z-index: 3;
  transition: all cubic-bezier(0.19, 1, 0.22, 1) 1s;
  /* animation: Glasstube 2s forwards; */
}

@keyframes Glasstube {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-300%);
  }
}

@keyframes GlasstubeReverse {
  0% {
    transform: translateY(-350%);
  }
  100% {
    transform: translateY(0);
  }
}
.knobs {
  position: relative;
  top: -149px;
  left: -90px;
  z-index: 10;
}
.knob {
  height: 100px;
}
.knob img {
  position: absolute;
  top: 80px;
  left: 320px;
  height: 50px;
}
.knob2 {
  height: 200px;
}
.knob2 img {
  position: absolute;
  top: 80px;
  left: 440px;
  height: 50px;
}
.expansionValve {
  height: 150px;
  width: 150px;
}
.expansionValve h3{
  margin-left: 330px;
  margin-top: 30px;
  width: 150px;
}
.expansionValve #rotoHead{
  margin-left: 1px;
  margin-top: 0px;
  width: 150px;
}
.expansionValve img {
  height: 100%;
  width: 95px;
  position: absolute;
  left: 355px;
  top: 25px;
  transform: rotate(90deg);
  height: 100px;
}
.Condensor {
  height: 200px;
  position: relative;
  top: 6px;
}
.Condensor h3{
  margin-top: -70px;
  margin-left: -87px;
}
.Condensor #conOff {
  height: 135%;
  width: auto;
  position: absolute;
  top: 99px;
  left: -155.5px;
}
.Condensor .conOn {
  height: 190%;
  width: auto;
  position: relative;
}
.conOn #grid {
  display: none;
  position: relative;
  height: 109%;
  top: 15px;
  left: -249.5px;
  z-index: -1;
}
.conOn #CondensorOn {
  height: 55%;
  display: none;
  position: absolute;
  top: 111px;
  left: -135.5px;
}
#conFan {
  height: 76%;
  position: absolute;
  top: 135.5px;
  left: -100px;
  z-index: -1;
}
@keyframes fan {
  from {
    transform: translate(0%, 0%) rotate(0deg);
  }

  to {
    transform: translate(0%, 0%) rotate(360deg);
  }
}
.eva_heat {
  position: relative;
  top: -300px;
  left: -100px;
}
.Evaporator {
  height: 100px;
}
.Evaporator #some {
  /* background-color: rgb(83, 139, 208); */
  height: 160%;
  width: auto;
  position: absolute;
  top: 220px;
  left: 651px;
  z-index: -1000;
  overflow: hidden;
  /* display: none; */
}
.Evaporator #someA {
  /* background-color: rgb(83, 139, 208); */
  height: 137%;
  width: auto;
  position: absolute;
  top: 246px;
  left: 668.5px;
  z-index: -1000;
  display: none;
}
.Evaporator #evaHead{
  margin-left: 140px;
  margin-top: -150px;
}

.Evaporator h3 {
  position: absolute;
  top: 395px;
  left: 650px;
}
#t5temp{
  top:300px;
  left:725px ;
}
.heaterCoil {
  height: 100px;
}
.heaterCoil h3 {
  position: absolute;
  left: 720px;
  top: 245px;
}

.heaterCoil img {
  height: 90%;
  width: 30%;
  position: absolute;
  top: 360px;
  left: 650px;
}
#heatC {
  width: 365px;
  height: 250px;
  margin-top: -38px;
  margin-left: 2px;
  display: none;
}
#heatD {
  display: initial;
}

.com_dial {
  position: relative;
  top: -68.5px;
  left: -150px;
}
.com_dial #temp2 {
  position: absolute;
  left: 285px;
  top: 330px;
}

.Compressor {
  position: relative;
}
.Compressor #compA {
  height: 330px;
  width: auto;
  position: absolute;
  top: 130.9px;
  left: 333px;
  z-index: 2;
  display: none;
}
.Compressor #compS {
  /* display: none; */
  height: 85px;
  width: auto;
  position: absolute;
  top: 215px;
  left: 370px;
  transform: rotate(90deg);
  z-index: 2;
}
.dialGaugeCom {
  position: absolute;
  display: flex;
  align-items: center;
  margin-left: 230px;
  width: 100%;
  height: 150px;
  /* left: 100px; */
}
.dialGaugeCom img {
  /* margin-top: -0px;
   margin-left: 110px; */
  position: relative;
  left: 110px;
  top: 252px;
  z-index: -1;
}
.dialGaugeCom h3{
  position: relative; 
  top:190px;
  left:-55px;
  width:fit-content;
  font-size:14px;
  text-align:center;
}
.dialGaugeCom2 {
  position: absolute;
  display: flex;
  align-items: center;
  margin-left: 235px;
  width: 100%;
  height: 150px;
  top: 254px;
  z-index: -1;
}
.dialGaugeCom2 h3{
  position: relative;
  left: -230px;
  top: -62px;
  text-align: center;
  width:fit-content;
  font-size: 14px;
}
.dialGaugeCom2 #compHead{
  position: relative;
  left: -240px;
  top: 90px;
}
.dialGaugeCom2 img {
  margin-top: 0px;
  margin-left: 310px;
}
.screenscom {
  width: 38px;
  height: 25px;
  background-color: black;
  position: relative;
  top: 159.9%;
  left: 3.64%;
  color: #df0b0bde;
  text-shadow: 2px 2px 5px rgba(248, 46, 46, 0.693);
  font-family: "Digital-7";
  font-weight: 100;
  text-align: center;
  font-size: 20px;
}
.screens2com {
  width: 37.8px;
  text-align: center;
  height: 26px;
  background-color: black;
  position: relative;
  top: -8.46%;
  right: 6.09%;
  color: #df0b0bde;
  text-shadow: 2px 2px 5px rgba(248, 46, 46, 0.693);
  font-family: "Digital-7";
  font-weight: 100;
  font-size: 20px;
}

.switch2 {
  position: relative;
  height: 120px;
  width: 80px;
  border-radius: 20px;
  padding: 25px;
}
label {
  top: 20px;
  left: 20px;
  right: 20px;
  bottom: 20px;
  position: absolute;
  background: linear-gradient(
    180deg,
    rgb(236, 169, 169) 0%,
    rgb(226, 11, 11) 81%
  );
  border-radius: 20px;
  cursor: pointer;
  border: 4px solid rgb(0, 0, 0);
}
label::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 90%;
  border-radius: 17px;
  background-color: linear-gradient(
    180deg,
    rgb(227, 27, 27) 41%,
    rgb(236, 164, 164) 86%
  );
  box-shadow: inset 0 -1px #fff, inset 0 -2px #ed4d4d;
}
#check {
  position: relative;
  display: none;
}
#check:checked ~ label {
  background: linear-gradient(
    180deg,
    rgb(3, 123, 71) 9%,
    rgba(114, 242, 102, 1) 61%
  );
  border: 4px solid rgb(1, 56, 17);
  box-shadow: 0 0 25px rgb(4, 242, 4);
}
#check:checked ~ label::before {
  top: 15px;
  background: linear-gradient(
    180deg,
    rgba(8, 166, 98, 1) 9%,
    rgba(114, 242, 102, 1) 61%
  );
  box-shadow: inset 0 1px rgb(102, 248, 185), inset 0 2px #f4f4f4;
}
/* check2 */
#check2 {
  position: relative;
  display: none;
}
#check2:checked ~ label {
  background: linear-gradient(
    180deg,
    rgb(3, 123, 71) 9%,
    rgba(114, 242, 102, 1) 61%
  );
  border: 4px solid rgb(1, 56, 17);
  box-shadow: 0px -4px 20px rgb(4, 242, 4);
}
#check2:checked ~ label::before {
  top: 7.5px;
  background: linear-gradient(
    180deg,
    rgba(8, 166, 98, 1) 9%,
    rgba(114, 242, 102, 1) 61%
  );
  box-shadow: inset 0 1px rgb(102, 248, 185), inset 0 2px #f4f4f4;
}
/* check3 */

#check3 {
  position: relative;
  display: none;
}
#check3:checked ~ label {
  background: linear-gradient(
    180deg,
    rgb(3, 123, 71) 9%,
    rgba(114, 242, 102, 1) 61%
  );
  border: 4px solid rgb(1, 56, 17);
  box-shadow: 0px -4px 20px rgb(4, 242, 4);
}
#check3:checked ~ label::before {
  top: 7.5px;
  background: linear-gradient(
    180deg,
    rgba(8, 166, 98, 1) 9%,
    rgba(114, 242, 102, 1) 61%
  );
  box-shadow: inset 0 1px rgb(102, 248, 185), inset 0 2px #f4f4f4;
}
/* check4 */
#check4 {
  position: relative;
  display: none;
}
#check4:checked ~ label {
  background: linear-gradient(
    180deg,
    rgb(3, 123, 71) 9%,
    rgba(114, 242, 102, 1) 61%
  );
  border: 4px solid rgb(1, 56, 17);
  box-shadow: 0px -4px 20px rgb(4, 242, 4);
}
#check4:checked ~ label::before {
  top: 7.5px;
  background: linear-gradient(
    180deg,
    rgba(8, 166, 98, 1) 9%,
    rgba(114, 242, 102, 1) 61%
  );
  box-shadow: inset 0 1px rgb(102, 248, 185), inset 0 2px #f4f4f4;
}
.switch3 {
  position: relative;
  height: 50px;
  width: 30px;
  border-radius: 20px;
  padding: 25px;
}
/* mainSwitch */
.switch {
  background-color: black;
  width: 55px;
  height: 90px;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0 1px 2px black,
    inset 0 2px 2px -2px white, inset 0 0 2px 15px #47434c,
    inset 0 0 2px 22px black;
  border-radius: 5px;
  padding: 20px;
  perspective: 700px;
  margin-left: 10px;
  transform: rotate(180deg);
}
.switch h3{
  transform: rotate(180deg);
  margin-top: -145px;
  margin-left: -60px;
  width: 150px;
}
.switch input {
  display: none;
}
.switch input:checked + .button {
  transform: translateZ(20px) rotateX(25deg);
  box-shadow: 0 -10px 20px #ff1818;
}
.switch input:checked + .button .light {
  animation: flicker 0.2s infinite 0.3s;
}
.switch input:checked + .button .shine {
  opacity: 1;
}
.switch input:checked + .button .shadow {
  opacity: 0;
}
.switch .button {
  transition: all 0.3s cubic-bezier(1, 0, 1, 1);
  transform-origin: center center -20px;
  transform: translateZ(20px) rotateX(-25deg);
  transform-style: preserve-3d;
  background-color: #9b0621;
  width: 100%;
  height: 100%;
  position: relative;
  cursor: pointer;
  background: linear-gradient(
    #980000 0%,
    #6f0000 30%,
    #6f0000 70%,
    #980000 100%
  );
  background-repeat: no-repeat;
}
.switch .button::before {
  content: "";
  background: linear-gradient(
        rgba(255, 255, 255, 0.8) 10%,
        rgba(255, 255, 255, 0.3) 30%,
        #650000 75%,
        #320000
      )
      50% 50%/97% 97%,
    #b10000;
  background-repeat: no-repeat;
  width: 100%;
  height: 50px;
  transform-origin: top;
  transform: rotateX(-90deg);
  position: absolute;
  top: 0;
  box-shadow: 0 50px 8px 0px black, 0 80px 20px 0px rgba(0, 0, 0, 0.5);
}
.switch .button::after {
  content: "";
  background-image: linear-gradient(#650000, #320000);
  width: 100%;
  height: 50px;
  transform-origin: top;
  transform: translateY(50px) rotateX(-90deg);
  position: absolute;
  bottom: 0;
}
.switch .light {
  opacity: 0;
  animation: light-off 1s;
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(#ffc97e, #ff1818 40%, transparent 70%);
}
.switch .dots {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(transparent 30%, rgba(101, 0, 0, 0.7) 70%);
  background-size: 10px 10px;
}
.switch .characters {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(white, white) 50% 20%/5% 20%,
    radial-gradient(
        circle,
        transparent 50%,
        white 52%,
        white 70%,
        transparent 72%
      )
      50% 80%/33% 25%;
  background-repeat: no-repeat;
}
.switch .shine {
  transition: all 0.3s cubic-bezier(1, 0, 1, 1);
  opacity: 0.3;
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(white, transparent 3%) 50% 50%/97% 97%,
    linear-gradient(
        rgba(255, 255, 255, 0.5),
        transparent 50%,
        transparent 80%,
        rgba(255, 255, 255, 0.5)
      )
      50% 50%/97% 97%;
  background-repeat: no-repeat;
}
.switch .shadow {
  transition: all 0.3s cubic-bezier(1, 0, 1, 1);
  opacity: 1;
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(transparent 70%, rgba(0, 0, 0, 0.8));
  background-repeat: no-repeat;
}
@keyframes flicker {
  0% {
    opacity: 1;
  }
  80% {
    opacity: 0.8;
  }
  100% {
    opacity: 1;
  }
}
@keyframes light-off {
  0% {
    opacity: 1;
  }
  80% {
    opacity: 0;
  }
}
/* Style for the main switch */
#ctrlSwitch input[type="checkbox"] {
  display: none;
}

#ctrlSwitch label {
  cursor: pointer;
  /* Add your custom styles for the main switch */
}

/* Style for the other switches */
.mainSwitch input[type="checkbox"] {
  display: none;
}

.mainSwitch label {
  cursor: pointer;
  /* Add your custom styles for the other switches */
}

/* Toggle effect for the main switch */
#ctrlSwitch input[type="checkbox"]:checked + label {
  /* Add styles for the checked state of the main switch */
}

/* Toggle effect for the other switches */
.mainSwitch input[type="checkbox"]:checked + label {
  /* Add styles for the checked state of the other switches */
}
.Meters {
  position: relative;
}
.digitalscr {
  position: absolute;
  width: 50px;
  height: 8.5%;
  top: 19%;
  left: 15.5%;
  background-color: #000000;
  text-align: center;
  color: #0000008c;
  font-family: Digital-7;
  color: #df0b0bde;
  text-shadow: 2px 2px 5px rgba(248, 46, 46, 0.693);
  font-family: "Digital-7";
  font-weight: 100;
  text-align: center;
  font-size: 13.9px;
}
.digitalscr2 {
  font-size: 13.9px;
  position: absolute;
  width: 50px;
  height: 8.5%;
  top: 19%;
  left: 66.5%;
  background-color: #000000;
  text-align: center;
  color: #0000008c;
  font-family: Digital-7;
  color: #df0b0bde;
  text-shadow: 2px 2px 5px rgba(248, 46, 46, 0.693);
  font-family: "Digital-7";
  font-weight: 100;
  text-align: center;
}

#knobs {
  position: absolute;
}
/* Timer CSS */
#timer_all {
  position: absolute;
  right: 11%;
}

#timer {
  position: absolute;
  width: 105px;
  height: 60px;
  border-radius: 11px;
  background: linear-gradient(to right, #cab444, #908525, #d0b013);
  border: 4px solid black;
  z-index: +2;
}

#stopwatch {
  font-size: 20px;
  color: red;
  font-family: sans-serif;
  position: absolute;
  margin-top: 20px;
  margin-left: 52px;
  transform: translate(-50%, -55%);
  border: inset;
  padding: 2px 6px;
  background-color: #111111;
}

#graphHead
{
  font-size: 25px;
  display: none;
}
footer
{
  width: 100%;
  height: 45px;
  background-color: black;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -40px;
}
footer h3
{
  font-weight: 100;
  color: rgba(255, 255, 255, 0.895);

}