/* Mobile devices (landscape only) */



@font-face {
    font-family: digital;
    src:url('../fonts/digital-7-webfont.woff2') format('woff2'),
        url('../fonts/digital-7-webfont.woff') format('woff'),
        url("../fonts/digital-7.ttf") format('truetype');
  } 





*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    /* width: 98vmax;
    height: 1vmax; */
    height: 100%;
    width: 100%;
    display: block;
    position: relative;
    background-color: rgb(170, 165, 121);
   
}

.main{
    height: 45.8vmax;
    width: 100vmax;
    background-color: red;
    position: relative;
    overflow: hidden;
}

.header{
    border: 1px solid black;
    background-color: rgb(95, 250, 183);
    height: 3vmax;
    width: 100vmax; 
    position: absolute;
    display: flex;
    justify-content:first baseline;
    align-items: center;
}

#ins{
    font-size: 2vw;
    text-align: center;
    font-weight: bold;
    text-decoration: underline;
    padding: 1%;
}

#text{
    font-size: 1.5vw;
    font-weight: bold;
    color: rgb(8, 4, 117);
    /* padding: 1%; */
}

.footer{
    position: absolute;
    align-items: center;
    top: 3vmax;
    height: 42.8vmax;
    width: 100%;
    background-color: rgb(226, 239, 33);
    
}

#experiment{
    /* top: 8%; */
    height: 100%;
    width: 100%;
    position: relative;
    background-color: blueviolet;
    /* border: 1px solid black; */
    /* visibility: hidden; */
}

#start{
    position:absolute;
    border-radius: 100%;
    padding: 0.5%;
    font-size: 1vw;
    left: 90%;
    top: 90%;
    border: none;
    background-color: rgb(0, 244, 16);
    box-shadow: 1px 1px 0px 0.5px;
    font-weight: 1000;
    font-family: 'Times New Roman', Times, serif;
    animation: blinking;
    animation-duration: 1s infinite ;
   
}

#start:active{
    scale: 0.9;
    transition: all ease 0.2s;
}



/* #hindi{
    position:absolute;
    border-radius: 20%;
    padding: 1%;
    font-size: 1.5vh;
    left: 45%;
    top: 50%;
    border: none;
    background-color: rgb(226, 239, 33);
    box-shadow: 2px 2px 0px 1px;
    font-weight: 1000;
    font-family: 'Times New Roman', Times, serif;

}

#hindi:active{
    scale: 0.9;
}

#eng{
    position:absolute;
    border-radius: 20%;
    padding: 1%;
    font-size: 1.5vh;
    left: 55%;
    top: 50%;
    border: none;
    background-color: rgb(226, 239, 33);
    box-shadow: 2px 2px 0px 1px;
    font-weight: 1000;
    font-family: 'Times New Roman', Times, serif;
}

#eng:active{
    scale: 0.9;
}

#lselector{
    justify-content: center;
    align-items: center;
    position: absolute;
    font-size: 2vh;
    color: white;
    left: 45.2%;
    top: 40%;
}

#langselector{
    height: 100%;
    width: 100%;
    background-color: black;
    position: absolute;
    transition: all;
    transition-duration: 1s;
    aspect-ratio: 16/9;
    visibility: hidden;
}

#reading{
    width: 5.7%;
    height: 4.5%;
    top: 64.5%;
    left: 9.2%;
    position: absolute;
    text-align: center;
}

#change{
    margin-top: 3%;
    opacity: 0%;
    color: red;
    transition: all;
    transition-duration: 1s;
    font-family: digital;
    font-weight: 100;
    font-size: 2.4vh;
} */





/* ******************************************       Equipments   ************************************** */

#startinglab{
    position: absolute;
    height:100%;
    width: 100%;
    visibility: visible;    

}

#workingtable{
    height: 100%;
    width: 100%;
    position: absolute;
    visibility: visible;
    z-index: 0;

}

.dessicatorlid{
    position: absolute;
    height: 11%;
    width: 10%;
    top: 83%;
    transition: all;
    transition-duration: 1s;
}


.dessicatorbase{
    position: absolute;
    height: 15%;
    width: 10%;
    top: 70%;
}

#lid{
    left: 83%;
    /* visibility: hidden; */
}

#base{
    left: 85%;
}

#lid1{
    left: 71%;
    /* visibility: hidden; */
}

#base1{
    left: 73%;
}

#lid2{
    /* visibility: hidden; */
    left: 59%;
}

#base2{
    left: 61%;
}

#lid3{
    left: 47%;
    /* visibility: hidden; */
}

#base3{
    left: 49%;
}

#lid4{
    left: 35%;
    /* visibility: hidden; */
}

#base4{
    left: 37%;
}

#mcylinder{
    position: absolute;
    height: 30%;
    width: 5%;
    top: 60%;
    left: 8%;
    transition: all;
    transition-duration: 1s;
}

#m100{
    position: absolute;
    height: 30%;
    width: 5%;
    top: 60%;
    left: 8%;
    transition: all;
    /* transition-duration: 1s; */
    visibility: hidden;
}

#msolution{
    position: absolute;
    height: 0%;
    width: 2.78%;
    /* top: 62%; */
    bottom: 11%;
    left: 9.1%;
    transition: all;
    transition-duration: 1s;
    /* animation-fill-mode:forwards; */
    /* left:34%;
    bottom: 47.2%;
    rotate: 25deg; */




}

#ms{
    position: absolute;
    height: 31%;
    width: 0.3%;
    top: 55%;
    left: 10.7%;
    transition: all;
    /* transition-duration: 1s; */
    visibility: hidden;
    /* left: 39.2%;
    height: 55%;
    top: 27.5%; */
}

#pump_real{
    position: absolute;
    height: 85%;
    width: 83%;
    bottom: 3.8%;
    left: 7.5%;
    transition: all;
    transition-duration: 1s;
    z-index: 2;
    opacity: 100%;
    visibility: visible;
 
  transition: transform 1s ease-in-out;
  
}
#turn_on{
    position: absolute;
    height: 5%;
    width: 2.5%;
    bottom: 54.95%;
    left: 62.4%;
    transition: all;
    transition-duration: 1s;
    z-index: 2;
    
    
  transition: transform 1s ease-in-out;
  
}

#storage_tank{
    position: absolute;
    height: 9%;
    width: 13.5%;
    bottom: 18.95%;
    left: 4.6%;
    transition: all;
    transition-duration: 1s;
    z-index: 2;
    visibility: hidden;
    
    
  transition: transform 1s ease-in-out;
  
}

#pump_A{
    position: absolute;
    height: 9%;
    width: 8.5%;
    bottom: 32.95%;
    left: 17.6%;
    transition: all;
    transition-duration: 1s;
    z-index: 6;
    
    
  transition: transform 1s ease-in-out;
  
}
#pump_B{
    position: absolute;
    height: 9%;
    width: 7.5%;
    bottom: 32.95%;
    left: 25.6%;
    transition: all;
    transition-duration: 1s;
    z-index: 6;
    
    
  transition: transform 1s ease-in-out;
  
}

#centrifugal_pump{
    position: absolute;
    height: 9%;
    width: 13.5%;
    bottom: 51.95%;
    left: 21.6%;
    transition: all;
    transition-duration: 1s;
    z-index: 6;
    
    
  transition: transform 1s ease-in-out;
  
}


#pump_holder{
    position: absolute;
    height: 42%;
    width: 15.5%;
    bottom: 15.95%;
    left: 18%;
    transition: all;
    transition-duration: 1s;
    z-index: 2;
    transform: rotate(0deg);
    
    
  transition: transform 1s ease-in-out;
  
}


#circular_gauges{
    position: absolute;
    height: 9%;
    width: 13.5%;
    bottom: 70.95%;
    left: 32.6%;
    transition: all;
    transition-duration: 1s;
    z-index: 2;
   visibility: hidden;
    
    
  transition: transform 1s ease-in-out;
  
}


#circular_gauges1{
    position: absolute;
    height: 9%;
    width: 13.5%;
    bottom: 73.95%;
    left: 39.6%;
    transition: all;
    transition-duration: 1s;
    z-index: 2;
    visibility: hidden;
    
    
  transition: transform 1s ease-in-out;
  
}

#control_pannel{
    position: absolute;
    height: 9%;
    width: 13.5%;
    bottom: 70.95%;
    left: 47.6%;
    transition: all;
    transition-duration: 1s;
    z-index: 2;
    
  transition: transform 1s ease-in-out;
  
}

#ball_valves{
    position: absolute;
    height: 9%;
    width: 10.5%;
    bottom: 72.95%;
    left: 72.8%;
    transition: all;
    transition-duration: 1s;
    z-index: 6;
    
    
  transition: transform 1s ease-in-out;
  
}
#ball_valves1{
    position: absolute;
    height: 9%;
    width: 10.5%;
    bottom: 72.95%;
    left: 72.8%;
    transition: all;
    transition-duration: 1s;
    z-index: 6;
    
    
  transition: transform 1s ease-in-out;
  
}

#ball_valves1{
    position: absolute;
    height: 9%;
    width: 10.5%;
    bottom: 72.95%;
    left: 72.8%;
    transition: all;
    transition-duration: 1s;
    z-index: 6;
    
    
  transition: transform 1s ease-in-out;
  
}

#manometer{
    position: absolute;
    height: 9.0%;
    width: 11.5%;
    bottom: 46.95%;
    left: 61%;
    transition: all;
    transition-duration: 1s;
    z-index: 6;
    
    
  transition: transform 1s ease-in-out;
  
}

#flow_transmitter{
    position: absolute;
    height: 7.4%;
    width: 6.5%;
    bottom: 27.95%;
    left: 63.5%;
    transition: all;
    transition-duration: 1s;
    z-index: 2;
    opacity: 100%;
    visibility: visible;
    
    
  transition: transform 1s ease-in-out;
  
}

#control_system{
    position: absolute;
    height: 14.4%;
    width: 5.9%;
    bottom: 41.25%;
    left: 31.7%;
    transition: all;
    transition-duration: 1s;
    z-index: 2;
    opacity: 100%;
    visibility: visible;
  transition: transform 1s ease-in-out;
}


#control_system1{
    position: absolute;
    height: 14.4%;
    width: 5.9%;
    bottom: 41.25%;
    left: 37.0%;
    transition: all;
    transition-duration: 1s;
    z-index: 2;
    opacity: 100%;
    visibility: visible;
  transition: transform 1s ease-in-out;
}

#rotor1{
    position: absolute;
    height: 3.4%;
    width: 1.5%;
    bottom: 45.75%;
    left: 40.1%;
    transition: all;
    transition-duration: 1s;
    z-index: 2;
    opacity: 100%;
    visibility: visible;
  transition: transform 1s ease-in-out;
}

#rotor2{
    position: absolute;
    height: 3.4%;
    width: 1.5%;
    bottom: 45.75%;
    left: 34.9%;
    transition: all;
    transition-duration: 1s;
    z-index: 2;
    opacity: 100%;
    visibility: visible;
  transition: transform 1s ease-in-out;
}

#up_button1{
    position: absolute;
    height: 1.9%;
    width: 0.9%;
    bottom: 46.48%;
    left: 32.2%;
    transition: all;
    transition-duration: 1s;
    z-index: 2;
    opacity: 100%;
    visibility: visible;
  transition: transform 1s ease-in-out;
}

#up_button2{
    position: absolute;
    height: 1.9%;
    width: 0.9%;
    bottom: 46.25%;
    left: 37.4%;
    transition: all;
    transition-duration: 1s;
    z-index: 2;
    opacity: 100%;
    visibility: visible;
  transition: transform 1s ease-in-out;
}

#down_button1{
      position: absolute;
    height: 1.7%;
    width: 0.9%;
    bottom: 44.55%;
    left: 32.2%;
    transition: all;
    transition-duration: 1s;
    z-index: 2;
    opacity: 100%;
    visibility: visible;
  transition: transform 1s ease-in-out;
}

#down_button3{
      position: absolute;
    height: 1.7%;
    width: 0.9%;
    bottom: 44.55%;
    left: 32.2%;
    transition: all;
    transition-duration: 1s;
    z-index: 2;
    opacity: 100%;
    visibility: visible;
  transition: transform 1s ease-in-out;
}

#mode_button1{
      position: absolute;
    height: 1.7%;
    width: 0.9%;
    bottom: 46.55%;
    left: 33.3%;
    transition: all;
    transition-duration: 1s;
    z-index: 2;
    opacity: 100%;
    visibility: visible;
  transition: transform 1s ease-in-out;
}

#mode_button2{
      position: absolute;
    height: 1.7%;
    width: 0.9%;
    bottom: 46.25%;
    left: 38.6%;
    transition: all;
    transition-duration: 1s;
    z-index: 2;
    opacity: 100%;
    visibility: visible;
  transition: transform 1s ease-in-out;
}

#func_button1{
      position: absolute;
    height: 1.7%;
    width: 0.9%;
    bottom: 44.55%;
    left: 33.3%;
    transition: all;
    transition-duration: 1s;
    z-index: 2;
    opacity: 100%;
    visibility: visible;
  transition: transform 1s ease-in-out;
}

#func_button2{
      position: absolute;
    height: 1.7%;
    width: 0.9%;
    bottom: 44.37%;
    left: 38.6%;
    transition: all;
    transition-duration: 1s;
    z-index: 2;
    opacity: 100%;
    visibility: visible;
  transition: transform 1s ease-in-out;
}
#down_button2{
      position: absolute;
    height: 1.7%;
    width: 0.9%;
    bottom: 44.45%;
    left: 37.4%;
    transition: all;
    transition-duration: 1s;
    z-index: 2;
    opacity: 100%;
    visibility: visible;
  transition: transform 1s ease-in-out;
}

#run_button1{
      position: absolute;
    height: 1.7%;
    width: 0.9%;
    bottom: 44.45%;
    left: 37.4%;
    transition: all;
    transition-duration: 1s;
    z-index: 2;
    opacity: 100%;
    visibility: visible;
  transition: transform 1s ease-in-out;
}

#run_button1{
      position: absolute;
    height: 1.7%;
    width: 0.9%;
    bottom: 44.45%;
    left: 37.4%;
    transition: all;
    transition-duration: 1s;
    z-index: 2;
    opacity: 100%;
    visibility: visible;
  transition: transform 1s ease-in-out;
}

#z_button1{
      position: absolute;
    height: 1.4%;
    width: 0.6%;
    bottom: 42.8%;
    left: 32.1%;
    transition: all;
    transition-duration: 1s;
    z-index: 2;
    opacity: 100%;
    visibility: visible;
  transition: transform 1s ease-in-out;
}
#run_button1{
      position: absolute;
    height: 1.4%;
    width: 0.7%;
    bottom: 42.8%;
    left: 32.8%;
    transition: all;
    transition-duration: 1s;
    z-index: 2;
    opacity: 100%;
    visibility: visible;
  transition: transform 1s ease-in-out;
}

#run_button2{
      position: absolute;
    height: 1.4%;
    width: 0.7%;
    bottom: 42.8%;
    left: 38.2%;
    transition: all;
    transition-duration: 1s;
    z-index: 2;
    opacity: 100%;
    visibility: visible;
  transition: transform 1s ease-in-out;
}

#stop_button1{
      position: absolute;
    height: 1.4%;
    width: 0.7%;
    bottom: 42.8%;
    left: 33.6%;
    transition: all;
    transition-duration: 1s;
    z-index: 2;
    opacity: 100%;
    visibility: visible;
  transition: transform 1s ease-in-out;
}


#rotating_gauges{
      position: absolute;
    height: 10.4%;
    width: 4.9%;
    bottom: 64.0%;
    left: 36.0%;
    transition: all;
    transition-duration: 1s;
    z-index: 2;
    opacity: 100%;
    visibility: visible;
    
  transition: transform 1s ease-in-out;
}
#rotating_gauges1{
      position: absolute;
    height: 10.4%;
    width: 4.9%;
    bottom: 64.0%;
    left: 36.0%;
    transition: all;
    transition-duration: 1s;
    z-index: 2;
    opacity: 100%;
    visibility: hidden;
    rotate: 130deg;
  transition: transform 1s ease-in-out;
}

#rotating_gauges2{
      position: absolute;
    height: 10.4%;
    width: 4.9%;
    bottom: 64.0%;
    left: 36.0%;
    transition: all;
    transition-duration: 1s;
    z-index: 2;
    opacity: 100%;
    visibility: hidden;
    rotate: 59deg;
  transition: transform 1s ease-in-out;
}

#rotating_gauges3{
      position: absolute;
    height: 10.4%;
    width: 4.9%;
    bottom: 64.0%;
    left: 36.0%;
    transition: all;
    transition-duration: 1s;
    z-index: 2;
    opacity: 100%;
    visibility: hidden;
    rotate: 59deg;
  transition: transform 1s ease-in-out;
}

#stop_button2{
      position: absolute;
    height: 1.4%;
    width: 0.7%;
    bottom: 42.8%;
    left: 38.95%;
    transition: all;
    transition-duration: 1s;
    z-index: 2;
    opacity: 100%;
    visibility: visible;
  transition: transform 1s ease-in-out;
}

#z_button2{
      position: absolute;
    height: 1.4%;
    width: 0.7%;
    bottom: 42.8%;
    left: 37.4%;
    transition: all;
    transition-duration: 1s;
    z-index: 2;
    opacity: 100%;
    visibility: visible;
  transition: transform 1s ease-in-out;
}

#flow_transmitter1{
    position: absolute;
    height: 8.4%;
    width: 11.5%;
    bottom: 20.95%;
    left: 60.5%;
    transition: all;
    transition-duration: 1s;
    z-index: 6;
  transition: transform 1s ease-in-out;
}


#pressure_gauge{
    position: absolute;
    height: 8.4%;
    width: 11.5%;
    bottom: 20.95%;
    left: 15.5%;
    transition: all;
    transition-duration: 1s;
    z-index: 6;
  transition: transform 1s ease-in-out;
}


#observation_table_1150{
    position: absolute;
    height: 50.4%;
    width: 25.5%;
    bottom: 36.95%;
    left: 15.5%;
    transition: all;
    transition-duration: 1s;
    z-index: 6;
  transition: transform 1s ease-in-out;
  visibility: hidden;
  opacity: 100%;
}
#observation_table_1150{
    position: absolute;
    height: 52.4%;
    width: 70.5%;
    bottom: 36.95%;
    left: 15.5%;
    transition: all;
    transition-duration: 1s;
    z-index: 110;
  transition: transform 1s ease-in-out;
  visibility: hidden;
  opacity: 100%;
}
#observation_table_85{
      position: absolute;
    height: 100.4%;
    width: 70.5%;
    bottom: 36.95%;
    left: 15.5%;
    transition: all;
    transition-duration: 1s;
    z-index: 110;
  transition: transform 1s ease-in-out;
  visibility: hidden;
  opacity: 100%;
}

#observation_table_60{
    position: absolute;
    height: 101.4%;
    width: 70.5%;
    bottom: 36.35%;
    left: 15.5%;
    transition: all;
    transition-duration: 1s;
    z-index: 293;
  transition: transform 1s ease-in-out;
  visibility: hidden;
  opacity: 100%;
}

#observation_table_40{
    position: absolute;
    height: 100.4%;
    width: 70.5%;
    bottom: 36.55%;
    left: 15.5%;
    transition: all;
    transition-duration: 1s;
    z-index: 290;
  transition: transform 1s ease-in-out;
  visibility: hidden;
  opacity: 100%;
}

#observation_table_00{
    position: absolute;
    height: 52.4%;
    width: 70.5%;
    bottom: 36.95%;
    left: 15.5%;
    transition: all;
    transition-duration: 1s;
    z-index: 220;
  transition: transform 1s ease-in-out;
  visibility: hidden;
  opacity: 100%;
}

#observation_table_85{
      position: absolute;
    height: 100.4%;
    width: 70.5%;
    bottom: 36.95%;
    left: 15.5%;
    transition: all;
    transition-duration: 1s;
    z-index: 110;
  transition: transform 1s ease-in-out;
  visibility: hidden;
  opacity: 100%;
}
#observation_table_1750_100{
      position: absolute;
    height: 53.4%;
    width: 70.5%;
    bottom: 36.95%;
    left: 15.5%;
    transition: all;
    transition-duration: 1s;
    z-index: 110;
  transition: transform 1s ease-in-out;
  visibility: hidden;
  opacity: 100%;
}

#observation_table_1750_85{
      position: absolute;
    height: 53.4%;
    width: 70.5%;
    bottom: 36.95%;
    left: 15.5%;
    transition: all;
    transition-duration: 1s;
    z-index: 110;
  transition: transform 1s ease-in-out;
  visibility: hidden;
  opacity: 100%;
}

#observation_table_1750_60{
      position: absolute;
    height: 53.4%;
    width: 70.5%;
    bottom: 36.95%;
    left: 15.5%;
    transition: all;
    transition-duration: 1s;
    z-index: 110;
  transition: transform 1s ease-in-out;
  visibility: hidden;
  opacity: 100%;
}
#observation_table_1750_40{
      position: absolute;
    height: 53.4%;
    width: 70.5%;
    bottom: 36.95%;
    left: 15.5%;
    transition: all;
    transition-duration: 1s;
    z-index: 110;
  transition: transform 1s ease-in-out;
  visibility: hidden;
  opacity: 100%;
}
#observation_table_1750_00{
      position: absolute;
    height: 53.4%;
    width: 70.5%;
    bottom: 36.95%;
    left: 15.5%;
    transition: all;
    transition-duration: 1s;
    z-index: 110;
  transition: transform 1s ease-in-out;
  visibility: hidden;
  opacity: 100%;
}


#observation_table_1150_text{
    position: absolute;
    height: 7.4%;
    width: 13.5%;
    bottom: 84.95%;
    left: 16.5%;
    transition: all;
    transition-duration: 1s;
    z-index: 300;
  transition: transform 1s ease-in-out;
  visibility: hidden;
}
#observation_table_1150_text1{
    position: absolute;
    height: 7.4%;
    width: 13.5%;
    bottom: 84.95%;
    left: 16.5%;
    transition: all;
    transition-duration: 1s;
    z-index: 300;
  transition: transform 1s ease-in-out;
  visibility: hidden;
}

#observation_table_1150_text2{
    position: absolute;
    height: 7.4%;
    width: 13.5%;
    bottom: 84.95%;
    left: 16.5%;
    transition: all;
    transition-duration: 1s;
    z-index: 300;
  transition: transform 1s ease-in-out;
  visibility:  hidden;
 
}
#observation_table_1150_text3{
    position: absolute;
    height: 7.4%;
    width: 13.5%;
    bottom: 84.95%;
    left: 16.5%;
    transition: all;
    transition-duration: 1s;
    z-index: 300;
  transition: transform 1s ease-in-out;
  visibility: hidden;
}

#observation_table_1150_text4{
    position: absolute;
    height: 7.4%;
    width: 13.5%;
    bottom: 84.95%;
    left: 16.5%;
    transition: all;
    transition-duration: 1s;
    z-index: 300;
  transition: transform 1s ease-in-out;
  visibility: hidden;
}

#observation_table_1750_text{
    position: absolute;
    height: 7.4%;
    width: 13.5%;
    bottom: 84.95%;
    left: 34.5%;
    transition: all;
    transition-duration: 1s;
    z-index: 300;
  transition: transform 1s ease-in-out;
  visibility: hidden;
}
#observation_table_1750_text1{
    position: absolute;
    height: 7.4%;
    width: 13.5%;
    bottom: 84.95%;
    left: 34.5%;
    transition: all;
    transition-duration: 1s;
    z-index: 300;
  transition: transform 1s ease-in-out;
  visibility: hidden;
}
#observation_table_1750_text2{
    position: absolute;
    height: 7.4%;
    width: 13.5%;
    bottom: 84.95%;
    left: 34.5%;
    transition: all;
    transition-duration: 1s;
    z-index: 300;
  transition: transform 1s ease-in-out;
  visibility: hidden;
}
#observation_table_1750_text3{
    position: absolute;
    height: 7.4%;
    width: 13.5%;
    bottom: 84.95%;
    left: 34.5%;
    transition: all;
    transition-duration: 1s;
    z-index: 300;
  transition: transform 1s ease-in-out;
  visibility: hidden;
}
#observation_table_1750_text4{
    position: absolute;
    height: 7.4%;
    width: 13.5%;
    bottom: 84.95%;
    left: 34.5%;
    transition: all;
    transition-duration: 1s;
    z-index: 300;
  transition: transform 1s ease-in-out;
  visibility: hidden;
}

#ball_valves_label{
    position: absolute;
    height: 62.4%;
    width: 20.5%;
    bottom: 15.95%;
    left: 67.9%;
    transition: all;
    transition-duration: 2s;
    z-index: 5;
  transition: transform 2s ease-in-out;
}

.pop-hidden {
  opacity: 0;
  visibility: hidden;
  transform: scale(0);
  transition: all 0.5s ease;
  transform-origin: center center; 
}

.pop-hidden1 {
  opacity: 0;
  visibility: hidden;
  transform: scale(0);
  transition: all 0.5s ease;
}

.pop-show {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

/* Control Panel container */
/* ---------------------- */
/* Control Panel Container */
/* ---------------------- */


/* ---------------------- */
/* Shared meter look */
/* ---------------------- */


/* animate when visible */






#pumpA_controller {
  position: absolute;
  bottom: 20%;      /* adjust placement */
  left: 50%;
  width: 20vw;

  color: #4cd137;
  font-size: 1.2rem;
  font-weight: 500;
  font-family: "Segoe UI", sans-serif;
  line-height: 1.6;
  font-weight: bold;
  z-index: 100;
  
  transition-duration: 1s;
}

#pumpA_suction_pressure {
  position: absolute;
  bottom: 18%;
  left: 5%;
  width: 20vw;

  color: #44bd32; 
  font-size: 1rem;
  font-family: "Segoe UI", sans-serif;
  font-weight: bold;
  line-height: 1.6;
  
  transition-duration: 1s;
}

#pumpA_discharge_pressure {
  position: absolute;
  bottom: 42.9%;
  left: 51.25%;
  width: 10vw;

  color: #ff0000; 
  font-size: 1.2vw;
  font-family: "Segoe UI", sans-serif;
  font-weight: bold;
  line-height: 1.6;
  z-index: 8;
  
  transition-duration: 1s;
}

#pumpA_differential_pressure {
  position: absolute;
  bottom: 50.4%;
  left: 44.45%;
  width: 10vw;

  color: #ff0000; 
  font-size: 1.2vw;
  font-family: "Segoe UI", sans-serif;
  font-weight: bold;
  line-height: 1.6;
  z-index: 8;
  text-align: left;
  
  transition-duration: 1s;
}

#rotor_text {
  position: absolute;
  bottom: 50.4%;
  left: 34.10%;
  width: 3.25vw;

  color: #ff6a00; 
  font-size: 1.0vw;
  font-family: "Segoe UI", sans-serif;
  font-weight: bold;
  line-height: 1.0;
  z-index: 8;
  text-align: left;
  
  transition-duration: 1s;

  /* 🔽 Added styling */
  background-color: #fff;       /* white background */
  border: 0.2vw solid #000;       /* black border */
  border-radius: 0.3vw;           /* rounded corners */
  padding: 0.1vw 0.2vw;            /* space around text */
  box-shadow: 1vw 1vw 2vw rgba(0,0,0,0.2); /* soft shadow */
  visibility: hidden;
}

#pumpA_volumeteric_rate {
  position: absolute;
  bottom: 50.3%;
  left: 48.70%;
  width: 10vw;

  color: #ff0000; 
  font-size: 1.2vw;
  font-family: "Segoe UI", sans-serif;
  font-weight: bold;
  line-height: 1.6;
  z-index: 8;
  
   transition-duration: 1s;
}

#pumpB_differential_pressure {
  position: absolute;
  bottom: 50.3%;
  left: 53.45%;
  width: 10vw;

  color: #ff0000; 
  font-size: 1.2vw;
  font-family: "Segoe UI", sans-serif;
  font-weight: bold;
  line-height: 1.6;
  z-index: 8;
  
   transition-duration: 1s;
}

#pumpB_volumeteric_rate {
  position: absolute;
  bottom: 50.3%;
  left: 57.90%;
  width: 10vw;

  color: #ff0000; 
  font-size: 1.2vw;
  font-family: "Segoe UI", sans-serif;
  font-weight: bold;
  line-height: 1.6;
  z-index: 8;
  
   transition-duration: 1s;
}

#pumpA_flowrate {
  position: absolute;
  bottom: 14%;
  left: 5%;
  width: 20vw;

  color: #e84118;  
  font-size: 1.2rem;
  font-weight: 600;
  font-family: "Segoe UI", sans-serif;
  line-height: 1.6;
  
   transition-duration: 1s;
}

#pumpA_rpm {
  position: absolute;
  bottom: 12%;
  left: 5%;
  width: 20vw;

  color: #009432;
  font-size: 1rem;
  font-family: "Segoe UI", sans-serif;
  font-weight: bold;
  line-height: 1.6;
  
  transition-duration: 1s;
}


/* Pump B */
#pumpB_controller {
  position: absolute;
  bottom: 20%;
  left: 30%;
  width: 20vw;

  color: #00a8ff;
  font-size: 1.2rem;
  font-weight: 500;
  font-family: "Segoe UI", sans-serif;
  line-height: 1.6;
  font-weight: bold;
  z-index: 100;
  
  transition-duration: 1s;
}

#pumpB_suction_pressure {
 position: absolute;
  bottom: 42.9%;
  left: 45.3%;
  width: 30vw;

  color: #ff0000; 
  font-size: 1.2vw;
  font-family: "Segoe UI", sans-serif;
  font-weight: bold;
  line-height: 1.6;
  z-index: 90;
  
   transition-duration: 1s;
}
#pumpA_shaft_torque {
 position: absolute;
  bottom: 58.73%;
  left: 45.4%;
  width: 30vw;

  color: #045b56; 
  font-size: 0.70vw;
  font-family: "Segoe UI", sans-serif;
  font-weight: bold;
  line-height: 1.6;
  z-index: 90;
  
   transition-duration: 1s;
}

#pumpA_angular_velocity {
 position: absolute;
  bottom: 56.9%;
  left: 45.4%;
  width: 30vw;

  color: #045b56; 
  font-size: 0.71vw;
  font-family: "Segoe UI", sans-serif;
  font-weight: bold;
  line-height: 1.6;
  z-index: 90;
  
  transition-duration: 1s;
}

#pumpB_shaft_torque {
 position: absolute;
  bottom: 58.71%;
  left: 55.7%;
  width: 30vw;

  color: #045b56; 
  font-size: 0.80vw;
  font-family: "Segoe UI", sans-serif;
  font-weight: bold;
  line-height: 1.6;
  z-index: 90;
  
   transition-duration: 1s;
}

#pumpB_angular_velocity {
 position: absolute;
  bottom: 56.9%;
  left: 55.7%;
  width: 30vw;

  color: #045b56; 
  font-size: 0.81vw;
  font-family: "Segoe UI", sans-serif;
  font-weight: bold;
  line-height: 1.6;
  z-index: 90;
  
   transition-duration: 1s;
}


#pump_additional_pressure {
 position: absolute;
  bottom: 42.9%;
  left: 57%;
  width: 30vw;

  color: #ff0000; 
  font-size: 1.2vw;
  font-family: "Segoe UI", sans-serif;
  font-weight: bold;
  line-height: 1.6;
  z-index: 90;
  
   transition-duration: 1s;
}
#pumpB_discharge_pressure {
  position: absolute;
  bottom: 16.8%;
  left: 30%;
  width: 20vw;

  color: #0984e3; 
  font-size: 1.2vw;
  font-family: "Segoe UI", sans-serif;
  font-weight: bold;
  line-height: 1.6;
  
  transition: 1s ease;
  transition-duration: 2s;
}

#pumpB_flowrate {
  position: absolute;
  bottom: 14%;
  left: 40%;
  width: 20vw;

  color: #ff0000;  
  font-size: 1.2rem;
  font-weight: 600;
  font-family: "Segoe UI", sans-serif;
  line-height: 1.6;
  
   transition-duration: 1s;
}

#frequency_driver_display {
  position: absolute;
  bottom: 48.5%;
  left: 32.2%;
  width: 8vw;

  color: #000903; 
  font-size: 0.9vw;
  font-family: "Segoe UI", sans-serif;
  font-weight: bold;
  line-height: 1.6;
  z-index: 8;
  
   transition-duration: 1s;
   visibility: hidden;
}

#down_button_text {
  position: absolute;
  bottom: 44.2%;
  left: 29.50%;
  width: 2.7vw;

  color: #ff6a00; 
  font-size: 0.8vw;
  font-family: "Segoe UI", sans-serif;
  font-weight: bold;
  line-height: 0.9;
  z-index: 8;
  text-align: left;
  
  transition-duration: 1s;

  /* 🔽 Added styling */
  background-color: #fff;       /* white background */
  border: 0.2vw solid #000;       /* black border */
  border-radius: 0.3vw;           /* rounded corners */
  padding: 0.1vw 0.2vw;            /* space around text */
  box-shadow: 1vw 1vw 2vw rgba(0,0,0,0.2); /* soft shadow */
  visibility: hidden;
  
}

#up_button_text {
  position: absolute;
  bottom: 45.8%;
  left: 30.30%;
  width: 1.8vw;

  color: #ff6a00; 
  font-size: 0.8vw;
  font-family: "Segoe UI", sans-serif;
  font-weight: bold;
  line-height: 0.9;
  z-index: 8;
  text-align: left;
  
  transition-duration: 1s;

  /* 🔽 Added styling */
  background-color: #fff;       /* white background */
  border: 0.2vw solid #000;       /* black border */
  border-radius: 0.3vw;           /* rounded corners */
  padding: 0.1vw 0.2vw;            /* space around text */
  box-shadow: 1vw 1vw 2vw rgba(0,0,0,0.2); /* soft shadow */
  visibility: hidden;
 
  
}

#up_button_text1 {
  position: absolute;
  bottom: 45.8%;
  left: 30.30%;
  width: 1.8vw;

  color: #ff6a00; 
  font-size: 0.8vw;
  font-family: "Segoe UI", sans-serif;
  font-weight: bold;
  line-height: 0.9;
  z-index: 8;
  text-align: left;
  
  transition-duration: 1s;

  /* 🔽 Added styling */
  background-color: #fff;       /* white background */
  border: 0.2vw solid #000;       /* black border */
  border-radius: 0.3vw;           /* rounded corners */
  padding: 0.1vw 0.2vw;            /* space around text */
  box-shadow: 1vw 1vw 2vw rgba(0,0,0,0.2); /* soft shadow */
  visibility: hidden;
 
  
}

#run_button_text {
  position: absolute;
  bottom: 40.0%;
  left: 32.30%;
  width: 2.0vw;

  color: #ff6a00; 
  font-size: 0.8vw;
  font-family: "Segoe UI", sans-serif;
  font-weight: bold;
  line-height: 0.9;
  z-index: 8;
  text-align: left;
  
  transition-duration: 1s;

  /* 🔽 Added styling */
  background-color: #fff;       /* white background */
  border: 0.2vw solid #000;       /* black border */
  border-radius: 0.3vw;           /* rounded corners */
  padding: 0.1vw 0.2vw;            /* space around text */
  box-shadow: 1vw 1vw 2vw rgba(0,0,0,0.2); /* soft shadow */
  visibility: hidden;
 
  
}

#on_button_text {
  position: absolute;
  bottom: 52.0%;
  left: 63.60%;
  width: 2.0vw;

  color: #ff6a00; 
  font-size: 0.8vw;
  font-family: "Segoe UI", sans-serif;
  font-weight: bold;
  line-height: 0.9;
  z-index: 8;
  text-align: left;
  
  transition-duration: 1s;

  /* 🔽 Added styling */
  background-color: #fff;       /* white background */
  border: 0.2vw solid #000;       /* black border */
  border-radius: 0.3vw;           /* rounded corners */
  padding: 0.1vw 0.2vw;            /* space around text */
  box-shadow: 1vw 1vw 2vw rgba(0,0,0,0.2); /* soft shadow */
  visibility: hidden;
 
  
}

#run_button_text1{
  position: absolute;
  bottom: 40.0%;
  left: 32.30%;
  width: 2.0vw;

  color: #ff6a00; 
  font-size: 0.8vw;
  font-family: "Segoe UI", sans-serif;
  font-weight: bold;
  line-height: 0.9;
  z-index: 8;
  text-align: left;
  
  transition-duration: 1s;

  /* 🔽 Added styling */
  background-color: #fff;       /* white background */
  border: 0.2vw solid #000;       /* black border */
  border-radius: 0.3vw;           /* rounded corners */
  padding: 0.1vw 0.2vw;            /* space around text */
  box-shadow: 1vw 1vw 2vw rgba(0,0,0,0.2); /* soft shadow */
  visibility: hidden;
 
  
}

#stop_button_text {
  position: absolute;
  bottom: 40.0%;
  left: 33.30%;
  width: 2.0vw;

  color: #ff6a00; 
  font-size: 0.8vw;
  font-family: "Segoe UI", sans-serif;
  font-weight: bold;
  line-height: 0.9;
  z-index: 8;
  text-align: left;
  
  transition-duration: 1s;

  /* 🔽 Added styling */
  background-color: #fff;       /* white background */
  border: 0.2vw solid #000;       /* black border */
  border-radius: 0.3vw;           /* rounded corners */
  padding: 0.1vw 0.2vw;            /* space around text */
  box-shadow: 1vw 1vw 2vw rgba(0,0,0,0.2); /* soft shadow */
  visibility: hidden;
 
  
}

#observation_table_command {
  position: absolute;
  bottom: 86.0%;
  left: 35.30%;
  width: 25.0vw;

  color: #170b02; 
  font-size: 0.8vw;
  font-family: "Segoe UI", sans-serif;
  font-weight: bold;
  line-height: 2.0;
  z-index: 100;
  text-align: left;
  
  transition-duration: 1s;

  /* 🔽 Added styling */
  background-color: #fbc891;       /* white background */
  border: 0.2vw solid #000;       /* black border */
  border-radius: 0.3vw;           /* rounded corners */
  padding: 0.1vw 0.2vw;            /* space around text */
  box-shadow: 1vw 1vw 2vw rgba(0,0,0,0.2); /* soft shadow */
  visibility: hidden;
 
  
}

#observation_table_command1{
  position: absolute;
  bottom: 86.0%;
  left: 50.30%;
  width: 25.0vw;

  color: #170b02; 
  font-size: 0.8vw;
  font-family: "Segoe UI", sans-serif;
  font-weight: bold;
  line-height: 2.0;
  z-index: 100;
  text-align: left;
  
  transition-duration: 1s;

  /* 🔽 Added styling */
  background-color: #ffe5c9;       /* white background */
  border: 0.2vw solid #000;       /* black border */
  border-radius: 0.3vw;           /* rounded corners */
  padding: 0.1vw 0.2vw;            /* space around text */
  box-shadow: 1vw 1vw 2vw rgba(0,0,0,0.2); /* soft shadow */
  visibility: hidden;
 
  
}


#mode_button_text {
  position: absolute;
  bottom: 46.2%;
  left: 34.1%;
  width: 2.7vw;

  color: #ff6a00; 
  font-size: 0.8vw;
  font-family: "Segoe UI", sans-serif;
  font-weight: bold;
  line-height: 0.9;
  z-index: 8;
  text-align: left;
  
  transition-duration: 1s;

  /* 🔽 Added styling */
  background-color: #fff;       /* white background */
  border: 0.2vw solid #000;       /* black border */
  border-radius: 0.3vw;           /* rounded corners */
  padding: 0.1vw 0.2vw;            /* space around text */
  box-shadow: 1vw 1vw 2vw rgba(0,0,0,0.2); /* soft shadow */
  visibility: hidden;
}


#pumpB_rpm {
  position: absolute;
  bottom: 12%;
  left: 30%;
  width: 20vw;

  color: #1e90ff;
  font-size: 1rem;
  font-family: "Segoe UI", sans-serif;
  font-weight: bold;
  line-height: 1.6;
  
  transition: all 1s ease;
}




#white_milk{
    position: absolute;
    height: 23.5%;
    width: 0.3%;
    top: 60%;
    left: 74.3%;
    transition: all;
    transition-duration: 1s;
    z-index: 1;
    opacity: 0%;
    transform-origin: bottom;
}

#yellow_black{
    position: absolute;
     height: 25%;
    width: 1.9%;
    bottom: 11.9%;
    left: 73.5%;
    transition: all;
    transition-duration: 3s;
    z-index: 1;
    opacity: 0%;
    transform-origin: bottom;
}

#brown_butyrometer_sol{
    position: absolute;
    height: 25%;
    width: 2.1%;
    bottom: 11.9%;
    left: 73.4%;
    transition: all;
    transition-duration: 1s;
    z-index: 3;
    opacity: 0%;
    transform-origin: bottom;
    
    
    
       /* left : 44.5%;  */

  


       


   
    
}
#brown_butyrometer_sol1{
    position: absolute;
    height: 39%;
    width: 2.8%;
    bottom: 11.9%;
    left: 73.0%;
    transition: all;
    transition-duration: 1s;
    z-index: 1;
    opacity: 100%;
    transform-origin: bottom;
    visibility: hidden;
    
    
       /* left : 44.5%;  */

       
      /* height: 20.656%;
width: 1.5112%;
bottom: 12.664%;
left: 36.792%; */


   
}
#tiltedsol{
    position: absolute;
    height: 36%;
    width: 2.84%;
    bottom: 12.9%;
    left: 44.6%;
    transition: all;
    transition-duration: 1s;
    z-index: 1;
    opacity: 0%;
    transform-origin: bottom;
    

       
       


    bottom: 42.3%;
}

#tiltedsol1{
    position: absolute;
    height: 36%;
    width: 2.84%;
    bottom: 12.9%;
    left: 44.6%;
    transition: all;
    transition-duration: 1s;
    z-index: 1;
    opacity: 0%;
    transform-origin: bottom;
    

       
       


    bottom: 42.3%;
}
#butyrometer_cork{
     position: absolute;
    height: 6%;
    width: 2.40%;
        bottom:  11.10%;
                 left: 55.0%;
    transition: all;
    transition:  1s;
    z-index: 1;
    opacity: 100%;
    
    /* z-index: 25; */
    
    
    


    /* transition: transform 1s ease */
    
    /* transform : translate(0%, -850%);
    transform : translate(767%, -850%);
    transform : translate(767%, -725%);
    /* transform : translate(-190%, -90%) ;
    transform : translate(-115%, -60%);
    transform : translate(0%, -850%); */
    
    /* bottom : 54%;
  
    left:25.4% ;
    bottom: 40.4%;
    transform : translate(-130%, -60%) rotate(180deg);
    translate: (30%,40%) rotate(90deg); */ 
   
    
}
#butyrometer_cork1{
     position: absolute;
    height: 6%;
    width: 2.51%;
        bottom: 54.5%;
                 left: 73.3%;
    transition: all;
    transition:  1s;
    z-index: 0;
    opacity: 100%;
    visibility: hidden;
    z-index: 0;

    /* width: 1.9%;      */
  
}

#butyrometer_stp1{
    position: absolute;
    height: 70%;
    width: 15%;

    left: 50%;
    z-index: 20;
    transition: all; 
    transition-duration: 1s;
    opacity: 100%;
    visibility: visible;
    bottom: 30%;
   
    
   
    /* transform: translate(0%, -90%);
    transform: translate(-190%, -90%);
    
    transform: translate(-190%, -60%);
    transform: translate(-115%, -60%) rotate(180d
    bottom :50%; */

 
    
    


} 
#butyrometer{
    position: absolute;
  
  
   bottom: 11.8%;
    width: 3.0%;
    height: 48%;
    left: 72.97%;
    z-index: 23;
    transition: all; 
    transition-duration: 1s;
    opacity: 100%;
   
    
   
    /* transform: translate(0%, -90%);
    transform: translate(-190%, -90%);
    
    transform: translate(-190%, -60%);
    transform: translate(-115%, -60%) rotate(180d
    bottom :50%; */

 
    
    


} 

#butyrometer_cork_centrifuge{
     position: absolute;
    height: 6%;
    width: 2.51%;
        bottom:  11.0%;
                 left: 54.0%;
    transition: all;
    transition:  1s;
    z-index: 1;
    opacity: 100%;

    
    /* z-index: 25; */
    
    
    


    /* transition: transform 1s ease */
    
    /* transform : translate(0%, -850%);
    transform : translate(767%, -850%);
    transform : translate(767%, -725%);
    /* transform : translate(-190%, -90%) ;
    transform : translate(-115%, -60%);
    transform : translate(0%, -850%); */
    
    /* bottom : 54%;
  
    left:25.4% ;
    bottom: 40.4%;
    transform : translate(-130%, -60%) rotate(180deg);
    translate: (30%,40%) rotate(90deg); */ 
   
    
}
#butyrometer_centrifuge{
    position: absolute;
 
    z-index: 20;
   
    opacity: 100%;
    
   
    /* transform: translate(0%, -90%);
    transform: translate(-190%, -90%);
    
    transform: translate(-190%, -60%);
    transform: translate(-115%, -60%) rotate(180deg);
    bottom :50%; */

    bottom: 11.8%;
    width: 3.0%;
    height: 48%;
    left: 80.2%;
    
    


} 
#water_butyrometer_centrifuge{
    position: absolute;
   
    z-index: 22;
    transition: all; 
    transition-duration: 1s;
    opacity: 100%;
   visibility: hidden;
    
   
  

    bottom: 11.9%;
    width: 3.2%;
    height: 50%;
    left: 80.10%;
    
  


} 
#butyrometer1{
    position: absolute;
    height: 48%;
    width: 3.5%;
    bottom: 12%;
    left: 61.37%;
    z-index: 10;
    transition: all; 
    transition-duration: 1s;
    opacity: 100%;
    visibility: hidden;
 

}

 #straight_butyrometer{
    position: absolute;
    height: 50%;
    width: 3.1%;
    bottom: 12%;
    left: 72.89%;
    z-index: 20;
    transition: all; 
    transition-duration: 1s;
    opacity: 100%;
 }
 #straight_butyrometer_amyl{
    position: absolute;
  bottom: 12.0%;
    width: 3.0%;
    height: 50%;
    left: 72.97%;
    z-index: 23;
    transition: all; 
    transition-duration: 0s;
    opacity: 100%;
    visibility: hidden;

 }

  #tilted_butyrometer{
    position: absolute;
    height: 500%;
    width: 30.1%;
    bottom: 58%;
    left: 110.89%;
 
    opacity: 100%;
    visibility: visible;
    z-index: 40;
  }

/* 
    #tilted_butyrometer_amyl{

    height: 90%;
    width: 50.1%;
    bottom: 10%;
    left: 50.89%;
    opacity: 100%;
    z-index: 40;
  } */

  #finalfatsolution{
  position: absolute;
    height: 30.0%;
    width: 2.0%;
    bottom: 10.1%;
    left: 72.2%;
 
    opacity: 100%;
  
    z-index: 20;
      visibility: hidden;
      transition: 1s;
  }

    #tilted_butyrometer1{
    position: absolute;
    height: 30.1%;
    width: 2.0%;
    bottom: 44.82%;
    left: 72.21%;
 
    opacity: 100%;
  
    z-index: 20;
      visibility: hidden;
      transition: 1s;
  }

    /* height: 28.2%;
width: 10.5%;
left: 48.7%;
bottom: 5%; */
    
    /* transform: translateX(-50%);
  transition: bottom 2s ease; */
    /* transform: translate(0%, -90%);
    transform: translate(-190%, -90%);
    
    transform: translate(-190%, -60%);
    transform: translate(-115%, -60%) rotate(180deg);
    bottom :50%; */
    
    #tilted_butyrometer{
    position: absolute;
    height: 30%;
    width: 1.9%;
    bottom: 45%;
    left: 21.38%;
    z-index: 5;
  
    opacity: 100%;
    visibility: hidden;
   z-index: 20;
   transition: all;
   transition: 1s;
  }

     #tilted_butyrometer_amyl{
    position: absolute;
    height: 50%;
    width: 3.1%;
    bottom: 35%;
    left: 46.95%;
    z-index: 5;
  
    opacity: 100%;
   z-index: 20;
   transition: all;
   transition: 0s;
   visibility: hidden;
  }


#butyrometer_upper1{
    position: absolute;
    height: 20%;
    width: 29.7%;
    top: 60.0%;
    left: 60.43%;
    transition: all;
    transition-duration: 1s;
    z-index: 24;
}

#butyrometer_upper2{
    position: absolute;
    height: 20%;
    width: 29.4%;
    top: 69.75%;
    left: 60.58%;
    transition: all;
    transition-duration: 1s;
    z-index: 30;
 
}
#butyrometer_back{
    position: absolute;
    height: 35%;
    width: 30%;
    top: 60%;
    left: 61.27%;
    transition: all;
    transition-duration: 1s;
    z-index: 0;
}

#butyrometer_with_stand{
    position: absolute;
    height: 55%;
    width: 25%;
    top: 41%;
    left: 61%;
    transition: all;
    transition-duration: 1s;
}

#water-solution{
    position: absolute;
    height: 20%;
    width: 0.3%;
    top: 63.8%;
    left: 74.3%;
    transition: all;
    z-index: 2;
    transition-duration: 1s;
    opacity: 0%;  
}


#dwatersol{
    position: absolute;
    height: 21.8%;
    width: 6.5%;
    /* top: 68%; */
    bottom: 10.2%;
    left: 28.5%;
    transition: all;
    transition-duration: 1s;
}





#waterBath_lower {
  position: absolute;
  width: 26.48%;
  height: 30.4%;
  bottom: 7.9%;  /* 11 + (33 - 26.4)/2 = 13.82 */
  left: 55.5%;     /* 6 + (30.6 - 24.48)/2 = 8.31 */
  overflow: hidden;
  z-index: 21;
}

#waterBath_upper {
  position: absolute;
  width: 25.10%;
  height: 3.3%;
  bottom: 35.1%; /* 100% - top: 6.5% - height: 39% */
  left: 55.60%;
   overflow: hidden;
   z-index: 19;
}



/*                ----------             Water bath Heat       ----             1st     */

#waterBath_lower3 {
  position: absolute;
  width: 26.48%;
  height: 30.4%;
  bottom: 7.9%;  /* 11 + (33 - 26.4)/2 = 13.82 */
  left: 9.5%;     /* 6 + (30.6 - 24.48)/2 = 8.31 */
  overflow: hidden;
  z-index: 21;
}

#waterBath_upper3 {
  position: absolute;
  width: 25.10%;
  height: 3.3%;
  bottom: 35.1%; /* 100% - top: 6.5% - height: 39% */
  left: 9.60%;
   overflow: hidden;
   z-index: 19;
}


#onSwitchHolder3 {
  position: absolute;
  width: 2.4%;
  height: 5.2%;
  bottom: 10%;
  left: 14%;
   z-index: 22;  
}



#setOff3 {
   position: absolute;
  width: 1.7%;
  height: 1.4%;
  bottom: 12.85%;
  left: 19.00%;
  z-index: 25;
}


#setOn {
   position: absolute;
  width: 10.5%;
  height: 10.3%;
  bottom: 12.8%;
  left: 19.00%;
  z-index: 24;
}

#setButtonHolder3 {
   position: absolute;
  width: 2.5%;
  height: 3.9%;
  bottom: 10.85%;
  left: 18.6%;
  z-index: 23;
}

#downOnSwitch3 {
  position: absolute;
  width: 1.1%;
  height: 1.8%;
  bottom: 17.9%; /* 17.0 + 10% */
  left: 230.795%;
  z-index: 22;
  visibility: visible;

}

#upOnSwitch3 {
  position: absolute;
  width: 15%;
  height: 1.84%;
  bottom: 23.20%; /* 22.33 + 10% */
  left: 40.7%;
  z-index: 25;
  visibility: hidden;
  opacity: 100%;
}

#upswitchholder3 {
  position: absolute;
  width: 1.9%;
  height: 3.2%;
  bottom: 22.3%; /* 21.43 + 10% */
  left: 21.3%;
  z-index: 23;
}

#upOffSwitch3 {
  position: absolute;
  width: 1.9%;
  height: 3.2%;
  bottom: 22.3%; /* 21.43 + 10% */
  left: 21.3%;
  z-index: 24;
}


#offSwitch3 {
  position: absolute;
  width: 2.1%;
  height: 8.3%;
  bottom: 6.7%;
  left: 14.5%;
    z-index: 25;
}

#onswitch3 {
   position: absolute;
  width: 1.6%;
  height: 3.0%;
  bottom: 12%;
  left: 14.45%;
  opacity: 100%;
  z-index: 25;
}

#actualTempDisplay33 {
   position: absolute;

 /* Background color area you care about */
  color: rgb(233, 13, 61);
  font-weight: bold;
  font-size: 0.9vw;

  text-align: center;
  bottom: 22.4%;        /* 221.1 */
   left: 18.3%;
  transition: all;
  transition-duration: 1s;
  opacity: 100%;
  z-index: 50;
  visibility: visible;

}


/*sample temp text */
#sampleTempDisplay13 {
  position: absolute;

 /* Background color area you care about */
  color: cyan;
  font-weight: bold;
  font-size: 0.6vw;
  
  text-align: center;
  bottom: 18.8%;
  left: 14.19%;
  transition: all;
  transition-duration: 1s;
  opacity: 100%;
    z-index: 52;
}
#actualTempDisplay13 {
   position: absolute;

 /* Background color area you care about */
  color: cyan;
  font-weight: bold;
  font-size: 0.6vw;
  
  text-align: center;
  bottom: 22.9%;
   left: 14.19%;
  transition: all;
  transition-duration: 1s;
  opacity: 100%;
    z-index: 23;
     
}


#sampleTempDisplay3 {
  position: absolute;

 /* Background color area you care about */
  color: rgb(233, 13, 61);
  font-weight: bold;
  font-size: 0.9vw;
  
  text-align: center;
  bottom: 18.2%;
  left: 18.3%;
  transition: all;
  transition-duration: 1s;
  opacity: 100%;
    z-index: 50;
}




  #tilted_butyrometer3 {
    position: absolute;
    height: 30.0%;
    width: 2%;
    bottom: 45.0%;
    left: 22.35%;
 
    opacity: 100%;
    z-index: 20;
    transition: 1s;
  }


   #straight_butyrometer3 {
    position: absolute;
    height: 50%;
    width: 3.1%;
    bottom: 12%;
    left: 72.89%;
    z-index: 23;
    transition: all; 
    transition-duration: 1s;
    opacity: 100%;
 }


 #butyrometer3{
    position: absolute;
  
  
   bottom: 11.8%;
    width: 3.0%;
    height: 48%;
    left: 72.97%;
    z-index: 23;
    transition: all; 
    transition-duration: 1s;
    opacity: 100%;
   
    
   
    /* transform: translate(0%, -90%);
    transform: translate(-190%, -90%);
    
    transform: translate(-190%, -60%);
    transform: translate(-115%, -60%) rotate(180d
    bottom :50%; */

 
    
    


} 

#timerDisplay13,
#timerDisplay23 {
    position: absolute;
  color: rgb(89, 10, 10);
  background-color: yellow ;
  font-weight: bold;
  font-size: 1.4vw;
  bottom: 83%;
  width: 9%;
  opacity: 100%;
  left: 0.5%;
  z-index: 30;
  visibility: visible;
  
  
}


#downSwitch3 {
    position: absolute;
  height: 3.2%;
  bottom: 17.55%; /* 16.5 + 10% */
  width: 1.8%;
  left: 21.3%;
   z-index: 55;
   opacity: 100%;
}
/*                ----------             Water bath Heat       ----             1st - end    */




#onSwitchHolder {
  position: absolute;
  width: 2.4%;
  height: 5.2%;
  bottom: 10%;
  left: 60%;
   z-index: 22;  
}



#setOff {
   position: absolute;
  width: 1.7%;
  height: 1.4%;
  bottom: 12.85%;
  left: 65.00%;
  z-index: 25;
}


/* #door_open_close {
  position: absolute;
  width: 0.8%;
  height: 0.9%;
  bottom: 16.55%;
  font-size: 0.05rem;
  font: bold;
  left: 17%;
  z-index: 45;
} */

#setOn {
   position: absolute;
  width: 1.5%;
  height: 1.3%;
  bottom: 12.8%;
  left: 65.1%;
  z-index: 24;
}

#timerDisplay1,
#timerDisplay2 {
    position: absolute;
  color: rgb(89, 10, 10);
  background-color: yellow ;
  font-weight: bold;
  font-size: 1.3vw;
  bottom: 87%;
  width: 9%;
  opacity: 100%;
  left: 0.5%;
  z-index: 30;
  
}
#setButtonHolder {
   position: absolute;
  width: 2.5%;
  height: 3.9%;
  bottom: 10.85%;
  left: 64.5%;
  z-index: 23;
}

#downOnSwitch {
  position: absolute;
  width: 1.1%;
  height: 1.8%;
  bottom: 17.9%; /* 17.0 + 10% */
  left: 67.795%;
  z-index: 22;

}

#upOnSwitch {
  position: absolute;
   width: 1.3%;
  height: 1.8%;
  bottom: 23.0%; /* 21.43 + 10% */
  left: 67.6%;
  opacity: 100%;
  z-index: 24;
}

#upswitchholder {
  position: absolute;
  width: 1.9%;
  height: 3.2%;
  bottom: 22.3%; /* 21.43 + 10% */
  left: 67.3%;
  z-index: 23;
}

#upOffSwitch {
  position: absolute;
  width: 1.9%;
  height: 3.2%;
  bottom: 22.3%; /* 21.43 + 10% */
  left: 67.3%;
  z-index: 24;
}

#downSwitch4 {
  position: absolute;
 width: 1.9%;
  height: 3.0%;
  bottom: 17.9%; /* 17.0 + 10% */
  left: 67.2895%;
  z-index: 22;
 
   z-index: 55;
   opacity: 100%;
}


#offSwitch {
  position: absolute;
  width: 2.1%;
  height: 8.3%;
  bottom: 6.7%;
  left: 60.5%;
    z-index: 25;
}

#onswitch {
   position: absolute;
  width: 1.6%;
  height: 3.0%;
  bottom: 12%;
  left: 60.45%;
  opacity: 100%;
  z-index: 25;
}


#water-solution-centrifuge{
    position: absolute;
    height: 0%;
    width: 0.3%;
    top: 49.2%;
    left: 81.55%;
    transition: all;
    z-index: 1;
    transition-duration: 1s;
    opacity: 100%;  
}



#sampleTempDisplay {
  position: absolute;

 /* Background color area you care about */
  color: rgb(233, 13, 61);
  font-weight: bold;
  font-size: 0.9vw;
  
  text-align: center;
  bottom: 18.2%;
  left: 64.3%;
  transition: all;
  transition-duration: 1s;
  opacity: 100%;
    z-index: 50;
}


/*                               centrifuge                          */


#centrifuge_upper_open_lid {
  position: absolute;
  width: 17.50%;
  height: 16.0%;
  bottom: 44.54%;
  left: 12.4%;
  
  
 
  z-index:18;
  visibility: hidden;

  opacity: 100%;
}

/* #centrifuge_down_ward{
  position: absolute;
  width: 17.50%;
  height: 36.9%;
  bottom: 7.2%;
  left: 11.95%;

  z-index: 25;
  visibility: visible;
} */


#centrifuge_mid_filling {
    position: absolute;
  width: 16.05%;
  height: 5.3%;
  bottom: 39.47%;
  left: 13.39%;

  z-index: 18;
}

#centrifuge_down_ward{
    position: absolute;
  width: 17.4%;
  height: 33.9%;
  bottom: 7%;
  left: 12%;

  z-index: 19;
}
#centrifuge_close_lid {
  position: absolute;
  width: 18.67%;
  height: 16.4%;
  bottom: 33.0%;
  left: 11.6%;
  overflow: hidden;
  z-index: 30;


}

/* #centrifuge_top_filling {
  position: absolute;
 width: 18.19%;
  height: 21.0%;
  bottom: 39.55%;
  left: 11.98%;
  overflow: hidden;

  z-index: 22;
 
  opacity: 0%;
} */

#centrifuge_down_filling {
    position: absolute;
  width: 17.4%;
  height: 33.9%;
  bottom: 7%;
  left: 12%;

  z-index: 28;
   visibility: hidden;
}
#Off_On_button {
  position: absolute;


   width: 1.0%;
  height: 2.0%;
  bottom: 16.83%;
  left: 14.63%;
  z-index: 41;
  transition: 0s;
}



#On_Button {
  position: absolute;
 width: 1.0%;
  height: 2.1%;
  bottom: 16.7%;
  left: 14.63%;
  z-index: 40;
  visibility: hidden;
}

#Time_increase_switch {
  position: absolute;
  width: 1.1%;
  height: 2.0%;
  bottom: 22.05%;
  left: 20%;
  z-index: 33;
 
}

#Time_decrease_switch {
  position: absolute;
  width: 1.1%;
  height: 2.6%;
  bottom: 19.2%;
  left: 19.97%;
  z-index: 40;
  
}

#Start_Stop {
  position: absolute;
  width: 1.6%;
  height: 2.9%;
  bottom: 15.7%;
  left: 18.86%;
  z-index: 40;

}
#Off_Start_Stop {
    position: absolute;
  width: 1.5%;
  height: 2.9%;
  bottom: 15.7%;
  left: 18.86%;
  z-index: 42;
}
#Up_off_switch {
  position: absolute;
  width: 50.4%;
  height: 5.2%;
  bottom: 40%;
  left: 15%;
  z-index: 28;
  visibility: hidden;
}

#Up_on_switch {
  position: absolute;
  width: 2.4%;
  height: 5.2%;
  bottom: 46%;
  left: 15%;
  z-index: 29;
  visibility: hidden;
}

#rpm_decrease_button {
  position: absolute;
  width: 1.0%;
  height: 1.9%;
  bottom: 19.3%;
  left: 24.2%;
  z-index: 40;
}

#rpm_increase_button {
 position: absolute;
  width: 1.0%;
  height: 1.7%;
  bottom: 22.4%;
  left: 24.2%;
  z-index: 40;
}
#set_off {
   position: absolute;
  width: 1.79%;
  height: 1.8%;
  bottom: 16.35%;
  left: 21.85%;

  z-index: 51;
}

#Set{
   position: absolute;
  width: 10.79%;
  height: 0.8%;
  bottom: 15.35%;
  font-size: 0.8vw;
  left: 22.25%;
  z-index: 55;
  visibility: hidden;
}
#set_on {
  position: absolute;
 width: 1.79%;
  height: 1.8%;
  bottom: 16.35%;
  left: 21.85%;
  z-index: 50;
}

#door_open_off {
  position: absolute;
  width: 1.3%;
  height: 1.3%;
  bottom: 16.45%;
  left: 16.64%;
  z-index: 40;
}

#Open_button {
  position: absolute;
  width: 1.2%;
  height: 1.2%;
  bottom: 16.51%;
  left: 16.6%;
  z-index: 51;
}

#Close_button {
  position: absolute;
  width: 1.4%;
  height: 1.3%;
  bottom: 16.48%;
  left: 16.6%;
  z-index: 56;
}


#beaker_water{
    position: absolute;
    bottom: 0%;
    height: 23%;
    width: 12%;
    top: 68%;
    left:38%;
    z-index: 20;
   
    
}

#water_beaker{
    position: absolute;
    bottom: 9%;
    height: 15%;
    width: 10%;
 
    left: 39.6%;
    z-index: 15;
    transition: all;
    transition: 1s;
   
    
}


#butyrometer_water_21ml{
     position: absolute;
    height: 0%;
    width: 1.89%;
    bottom: 12.0%;
    left: 80.7%;
    z-index: 19;
    transition: all; 
    transition-duration: 1s;
    opacity: 100%;
}

/* RPM Box */


/* Time Box */
/* #timeBox {
  position: absolute;
  background-color: #ffffff;
  padding: 0.9375rem 1.5625rem;
  border-radius: 0.5rem;
  box-shadow: 0 0.125rem 0.3125rem rgba(0, 0, 0, 0.1);
  text-align: center;
  min-width: 5.625rem;
  z-index: 100;
  opacity: 1;
}

/* Temp Box */
/* #tempBox {
  position: absolute;
  background-color: #ffffff;
  padding: 0.9375rem 1.5625rem;
  border-radius: 0.5rem;
  box-shadow: 0 0.125rem 0.3125rem rgba(0, 0, 0, 0.1);
  text-align: center;
  min-width: 5.625rem;
  z-index: 100;
  opacity: 1;
} */ 


#rpmLabel {
  position: absolute;
  font-weight: 600;
  font-size: 1.2vw;
  color: #5145d9;
 
  z-index: 500;
  opacity: 100%;
     bottom: 26%;
  left: 15.85%;
  visibility: hidden;
  text-align: center;
}

/* #timeLabel {
  position: absolute;
  font-size: 0.195rem;
  font-weight: 700;
  color: #555555;
  margin-bottom: 0.5rem;
  z-index: 500;
  opacity: 100%;
     bottom: 25.28%;
  left: 16.5%;
} */

#tempLabel1{
  position: absolute;
  font-weight: 600;
  font-size: 0.101rem;
  color: #555555;
  margin-bottom: 0.5rem;
  z-index: 500;
  opacity: 100%;
     bottom: 25.28%;
  left: 16.5%;
  visibility: hidden;
}


#rpmDisplay {
  position: absolute;
  font-size: 1.5vw;
  font-weight: 700;
  color: #be3232;
  z-index: 50;
  opacity: 100%;
   bottom: 25.43%;
  left: 20.45%;
  visibility: hidden;
}

#timeDisplay {
  position: absolute;
  font-size: 1.0vw;
  font-weight: 700;
  color: #bb2727;
  z-index: 50;
  opacity: 0%;
    bottom: 21.08%;
  left: 17.0%;
  visibility: hidden;
}

#tempDisplay {
  position: absolute;
  font-size: 1.375rem;
  font-weight: 700;
  color: #222222;
  z-index: 50;
  opacity: 100%;
  visibility: hidden;
}





/*                   dsfsdfsdfsdfds            */
.vapor {
  position: relative;
  width: 20px;
  height: 60px;
  margin: 20px auto;
}

.vapor::before, .vapor::after {
  content: '';
  position: absolute;
  bottom: 0;
  width: 10px;
  height: 30px;
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.7) 0%, transparent 80%);
  border-radius: 50%;
  animation: rise 3s infinite ease-in;
  opacity: 0.7;
}

.vapor::after {
  left: 12px;
  animation-delay: 1.5s;
}

@keyframes rise {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0.7;
  }
  100% {
    transform: translateY(-60px) scale(1.5);
    opacity: 0;
  }
}
/* #actualTempDisplay,
#setTempDisplay,
#sampleTempDisplay {
  display: none;
} */

/* #actualTempDisplay, #setTempDisplay {
  position: absolute;
  width: 150%;
  padding: 10px;
  background-color: black;
  color: lime;
  font-weight: bold;
  font-size: 1.2rem;
  border-radius: 10px;
  text-align: center;
} */

#actualTempDisplay {
   position: absolute;

 /* Background color area you care about */
  color: rgb(233, 13, 61);
  font-weight: bold;
  font-size: 0.9vw;

  text-align: center;
  bottom: 22.4%;        /* 221.1 */
   left: 64.2%;
  transition: all;
  transition-duration: 1s;
  opacity: 100%;
  z-index: 50;

}


/*sample temp text */
#sampleTempDisplay1 {
  position: absolute;

 /* Background color area you care about */
  color: cyan;
  font-weight: bold;
  font-size: 0.6vw;
  
  text-align: center;
  bottom: 18.8%;
  left: 59.99%;
  transition: all;
  transition-duration: 1s;
  opacity: 100%;
    z-index: 52;
}
#actualTempDisplay1 {
   position: absolute;

 /* Background color area you care about */
  color: cyan;
  font-weight: bold;
  font-size: 0.6vw;
  
  text-align: center;
  bottom: 22.9%;
   left: 59.99%;
  transition: all;
  transition-duration: 1s;
  opacity: 100%;
    z-index: 23;
     
}

#setTempDisplay {
  bottom: 63%;
  left: 60%;
  visibility: hidden;
}

/* Click feedback animation */
@keyframes pulse {
  0% { transform: scale(1); border-radius: 50%; }
  50% { transform: scale(0.9); border-radius: 30%; }
  100% { transform: scale(1); border-radius: 50%; }
}


.pulse-effect {
  animation: pulse 0.5s ease-in-out;
}


@keyframes zoominout {
  0% { transform: scale(1); border-radius: 50%; }
  50% { transform: scale(1.2); border-radius: 30%; }
  100% { transform: scale(1); border-radius: 50%; }
}



/* .dsolutionbig{
    position: absolute;
    height: 4%;
    width: 10.8%;
    top: 68.9%;
    visibility: hidden;
} */

/* #dsolbig1{
    left: 85.1%;
} */

/* #dsolbig2{
    left: 71.1%;
} */
/* #dsolbig3{
    left: 57.1%;
} */
/* #dsolbig4{
    left: 43.1%;
} */
/* #dsolbig5{
    left: 29.1%;
} */
.dsolutionsmall{
    position: absolute;
    /* height: 4.7%; */
    height: 0%;
    width:6.8%;
    /* top: 80.1%; */
    bottom: 15.2%;
    /* visibility: hidden; */
    transition: all;
    transition-duration: 1s;
}
#dsolsmall1{
    left: 86.6%;
}


#dsolsmall2{
    left: 74.6%;
}


#dsolsmall3{
    left: 62.6%;
}


#dsolsmall4{
    left: 50.6%;
}


#dsolsmall5{
    left: 38.6%;
}

#milk-beaker{
    position: absolute;
    bottom: 0%;
    height: 23%;
    width: 18%;
    top: 68%;
    left:38%;
    z-index: 2;
   
    
}

#iso{
    position: absolute;
    bottom: 0%;
    height: 30%;
    width: 7.5%;
    top: 60%;
     left: 18.0%;
    z-index: 2;
    transition: all;
    transition: 1s;
    
    
}
#iso_amyl_sol{
    position: absolute;
    height: 21%;
    width: 7.5%;
    bottom: 10%;
     left: 18.0%;
    transition: all;
    transition: 1s;
   
    
    
}

#iso_cap{
    position: absolute;
    bottom: 0%;
    height: 5%;
    width: 4.5%;
    top: 59%;
     left: 19.5%;
    z-index: 2;
    transition: 1s;
    
}




#s{
    position: absolute;
    height: 27%;
    width: 6.5%;
    top: 63%;
    left: 18%;
    z-index: 2;
       transition: all;
    transition-duration: 1s;
    visibility: hidden;
    opacity: 0%;
    

    
}

#sulphuricsol{
    position: absolute;
    height: 17%;
    width: 6.5%;
    /* top: 73%; */
    bottom: 10%;
    left: 18.0%;
    transition: all;
    transition-duration: 1s
    
}

#sulcap{
    position: absolute;
    height: 15%;
    width: 7%;
    top: 57.2%;
    left: 17.7%;
    transition: all;
    transition-duration: 1s;
}

#pipette{
    position: absolute;
    height: 40%;
    width: 3.5%;
    top: 72%;
    left: 18.1%;
    rotate: -90deg;
    transition: all;
    transition-duration: 1s;
    z-index: 1;;;
    /* transition: transform 1s ease-in-out; */


}

#pipette_centrifuge{
    position: absolute;
    height: 30%;
    width: 2.6%;
   bottom: -9%;
    left: 38.1%;
    rotate: -90deg;
    transition: all;
    transition-duration: 1s;
    z-index: 18;
    /* transition: transform 1s ease-in-out; */
}
#pipette_21ml{
    position: absolute;
    height: 0%;
    width: 0.6%;
   bottom: 20.5%;
    left: 44.21%;
    rotate: 0deg;
    transition: all;
    transition-duration: 1s;
    z-index: 17;
    /* transition: transform 1s ease-in-out; */
}

#milk-beaker-overlay{
    position: absolute;
    height: 18%;
    width: 15.5%;
    bottom: 9.24%;
   
    left: 39.3%;
    transition: all;
    transition-duration: 1s;
    
    
   
}
#pipette_milk{
    position: absolute;
    transform-origin: bottom;
    height: 18.7%;
    width: 0.85%;
    bottom: 23.8%;
    left: 42.6%;
    transition: all;
    transition-duration: 1s;
    z-index: 1;
    opacity: 0%;
   
    
    


}

/* #baloon{
    position: absolute;
    height: 8%;
    width: 3%;
    top: 89%;
    left: 9.5%;
    rotate: -90deg;
} */

/* #pipettesol{
    position: absolute;
    height: 6%;
    width: 0.85%;
    bottom: 13%;
    left: 20.9%;
    transition: all;
    transition-duration: 1s;
} */

#pipettesol{
    position: absolute;
    height: 16.02%;
    width: 0.8%;
    bottom: 17%;
    left: 20.9%;
    transition: all;
    transition-duration: 1s;
    z-index: -0.7;
    opacity: 0%;
   
   
    
}
#pipette_amyl{
    position: absolute;
    /* height: 16.02%;
    width: 0.8%; */
                            bottom: 33%;
    /* left: 20.9%; */
    
    z-index: 1;
    opacity: 0%;
    width: 0.8%;
    height: 5%;
                         left: 21.4%;
    transition: all;
    transition-duration: 1s;
    /* left: 74.1%; */    
}
#amyl_drop1{
    position: absolute;
    /* height: 16.02%;
    width: 0.8%; */
                            bottom: 54%;
    /* left: 20.9%; */
    
    z-index: -0.7;
    opacity: 0%;
    width: 0.5%;
    height: 3%;
                         /* left: 21.4%; */
    transition: all;
    transition-duration: 1s;
    left: 74.25%;
}
#amyl_drop2{
    position: absolute;
    /* height: 16.02%;
    width: 0.8%; */
                            bottom: 54%;
    /* left: 20.9%; */
    
    z-index: 2;
    opacity: 0%;
    width: 0.5%;
    height: 3%;
                         /* left: 21.4%; */
    transition: all;
    transition-duration: 1s;
    left: 74.25%;

   
   
    
    
}

/* #stp1{
    position: absolute;
    height: 100%;
    width: 100%;
    visibility:visible ;
} */

#stp23{
    
    visibility:hidden ;
}
#stp32{
 
    visibility:hidden;
}
#stp993{
 
    visibility:hidden;
}
#stp33{
   
 
    visibility:hidden;
}
#stp77{
 
    visibility:hidden;
   
}
#stp70{
  
    visibility: hidden ;
}
#stp12{
  
    visibility: hidden;
   
}

#label{
  
    visibility: hidden;
   
}

#stp13{
  
    visibility: hidden;
   
}

#control_pannel1{
  
    visibility: hidden;
   
}

/* .dp{
    position: absolute;
    height: 2%;
    width: 7%;
    left: 22%;
    bottom: 19%;
    /* bottom: 20%; */
    /* top: 60%; */
    /* left: 62.5%;
    left: 38.5%;
    left: 50.5%; */
    /* transition: all;
    transition-duration: 1s; */
/* } */

/* .petri{
    position: absolute;
    height: 3%;
    width: 5%;
    /* top: 87%;
    left: 29.5%; */
    /* transition: all;
    transition-duration: 1s; */
    
/* } */

#petri1{
    top: 80%;
    left: 30.5%;

}

#petri2{
    top: 83%;
    left: 29.5%;
    
}

#petri3{
    top: 88%;
    left: 27.5%;
    
}

#petri4{
    top: 83%;
    left: 32.5%;
    /* rotate: 10deg; */
    
}

#petri5{
    top: 86%;
    left: 28.5%;
    /* rotate: -10deg; */
}



#machine{
    position: absolute;
    height: 20%;
    width: 18%;
    top: 70%;
    left: 3%;
}

#on{
    position: absolute;
    top: 82%;
    left: 5%;
    color: white;
    padding: 0.1%;
    background-color: red;
    border-radius: 10%;
    font-size: 0.8vw;

} */




#bread{
    position: absolute;
    top: 81%;
    left: 22%;
    height: 15%;

}


#observe{
    height: 100%;
    width: 100%;
    position: absolute;
    background-color: white;
    text-align: center;
    font-size: 8vw;
    justify-items: center;
    opacity: 0%;
    /* opacity: 100%; */
    visibility: hidden;
    /* visibility: visible; */
    transition: all;
    transition-duration: 1s;
    
}

#obtext{
    position: absolute;
    top: 20%;
    left: 8%;
    /* top: 5%;
    left: 40%;
    font-size: 5vw; */
    transition: all;
    transition-duration: 1s;
}

#inftext{
    position: absolute;
    top: 30%;
    font-size: 2.5vw;
    font-weight: 300;
    top: 20%;
    left: 10%;
    opacity: 0%;
    transition: all;
    transition-duration: 1s;
}

#tablesdiv{
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: white;
    border: 1px solid black;
    opacity: 0%;
    visibility: hidden;
    /* opacity: 100%;
    visibility: visible;  */
    transition: all;
    transition-duration: 1s;
}

.tbl1,th,td{
    color: rgb(0, 0, 0);
    border: 1px solid rgb(0, 0, 0);
    border-collapse: separate;
    text-align: center;
    justify-content: center;
    font-size: 1.4vw;
}

#table1{
    position: absolute;
    height: 50%;
    width: 70%;
    top: 25%;
    left: 15%;
}

#tabletext{
    position: absolute;
    top: 18%;
    left: 13%;
    font-size: 2vw;
    font-weight: 800;
}

#fullform{
    position: absolute;
    font-size: 1vw;
    font-weight: 500;
    top: 80%;
    left: 15%;
} 






















@keyframes blinking {
    0%{opacity: 100%;}
    50%{opacity: 0%;}
    100%{opacity: 100%;}
}

@keyframes vibrate {
    0%{scale: 1.1;}
    50%{scale: 1.0;}    
    100%{scale: 1.1;}
    
}

@keyframes Steps{
    0%{left: -641px;}
    100%{left: 0px;}
}