/* Mobile devices (landscape only) */
@media only screen and (max-width: 480px) and (orientation: landscape) {
    /* styles here */


}


@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(168, 15, 182);
    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: 100;
    color: rgb(125, 246, 173);
    /* 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%; */
}

#butyrometer_liquid{
    position: absolute;
    height: 0%;
    width: 1.9%;
    bottom: 12.8%;
    left: 73.5%;
    transition: all;
    transition-duration: 1s;
    z-index: 2;
    opacity: 100%;
    transform-origin: bottom; 
   transform: scaleY(0);
  transition: transform 1s ease-in-out;
  
}
#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;
}




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

#waterBath_lower3 {
  position: absolute;
  width: 26.48%;
  height: 30.4%;
  bottom: 9.1%;  /* 11 + (33 - 26.4)/2 = 13.82 */
  left: 19.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: 36.3%; /* 100% - top: 6.5% - height: 39% */
  left: 19.60%;
   overflow: hidden;
   z-index: 19;
}


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



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


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

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

#downOnSwitch3 {
  position: absolute;
  width: 1.1%;
  height: 1.8%;
  bottom: 22.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: 24.2%; /* 21.43 + 10% */
  left: 31.3%;
  z-index: 23;
}

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


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

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

#actualTempDisplay3 {
   position: absolute;

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

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

}

#actualTempDisplay4 {
   position: absolute;

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

  text-align: center;
 bottom: 63.91%;
  left: 16.5%;
  transition: 1s ease-in-out;
  opacity: 100%;
  z-index: 50;

}

#actualTempDisplay5 {
   position: absolute;

 /* Background color area you care about */
  color: rgb(28, 244, 223);
  font-weight: bold;
  font-size: 0.6vw;

  text-align: center;
 bottom: 62.1%;
  left: 16.4%;
  transition: 1s ease-in-out;
  opacity: 100%;
  z-index: 50;

}

#sampleTempDisplay4 {
  position: absolute;

 /* Background color area you care about */
  color: rgb(233, 13, 13);
  font-weight: bold;
  font-size: 0.6vw;
  
  text-align: center;
  bottom: 63.91%;
  left: 13.3%;
  transition: 1s ease-in-out;
  opacity: 100%;
    z-index: 50;
}

#sampleTempDisplay5 {
  position: absolute;

 /* Background color area you care about */
  color: rgb(28, 244, 223);
  font-weight: bold;
  font-size: 0.6vw;
  
  text-align: center;
  bottom: 62.2%;
  left: 13.3%;
  transition: 1s ease-in-out;
  opacity: 100%;
    z-index: 50;
}

#sampleTempDisplay13 {
  position: absolute;

 /* Background color area you care about */
  color: rgb(162, 203, 25);
  font-weight: bold;
  font-size: 0.6vw;
  
  text-align: center;
  bottom: 19.8%;
  left: 24.19%;
  transition: all;
  transition: 1s ease-in-out;
  opacity: 100%;
    z-index: 52;
}

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

 /* Background color area you care about */
  color: rgb(162, 203, 25);
  font-weight: bold;
  font-size: 0.6vw;
  
  text-align: center;
  bottom: 19.8%;
  left: 24.19%;
  transition: all;
  transition-duration: 1s;
  opacity: 100%;
    z-index: 52;
}

#actualTempDisplay13 {
   position: absolute;

 /* Background color area you care about */
  color: rgb(225, 178, 25);
  font-weight: bold;
  font-size: 0.6vw;
  
  text-align: center;
  bottom: 23.9%;
   left: 24.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: 19.2%;
  left: 28%;
  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%;
 }

#timerDiaplay3 {
    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;
  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: hidden;
  
}


#downSwitch3 {
    position: absolute;
  height: 3.2%;
  bottom: 19.15%; /* 16.5 + 10% */
  width: 1.8%;
  left: 31.4%;
   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: 70.6%;
  opacity: 100%;
  z-index: 24;
}

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

#upOffSwitch3 {
  position: absolute;
  width: 1.9%;
  height: 3.2%;
  bottom: 24.1%; /* 21.43 + 10% */
  left: 31.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: 80.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;
}





#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: 23%;
  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;
}




#water_beaker{
    position: absolute;
    bottom: 11.2%;
    height: 23%;
    width: 10.3%;
 
    left: 54.3%;
    z-index: 15;
    transition: bottom 1s ease, left 1s ease;
    opacity: 100%;
   
    
}
#water_beaker_120{
    position: absolute;
    bottom: 50.0%;
    height: 23%;
    width: 10.3%;
 
    left: 22.0%;
    z-index: 15;
    transition: bottom 1s ease, left 1s ease;
    opacity: 0%;
    rotate: -17deg;
   
    
}

#tilted_water{
    position: absolute;
    bottom: 60.0%;
    height: 13%;
    width: 9.743%;
 
    left: 22.5%;
    z-index: 1;
    transition: bottom 1s ease;
    opacity: 0%;
    rotate: -20.2deg;
    transition: 1s;
    transition: all;
    transform: scaleY(1);  
     transform-origin: bottom;          /* Expand from bottom to top */
  transition: transform 2s ease-in;
   
    
}

#beaker_water{
   position: absolute;
    bottom: 50.0%;
    height: 23%;
    width: 10.3%;
 
    left: 22.0%;
    z-index: 15;
    transition: bottom 1s ease, left 1s ease;
    opacity: 0%;
    rotate: -17deg;
    
}

#water_strip{
   position: absolute;
    bottom: 25.7%;
    height: 43%;
    width: 0.5%;
 
    left: 20.7%;
    opacity: 0%;
    z-index: 1;
    transition: 1s;

    transform: scaleY(0);  
     transform-origin: top;          /* Expand from bottom to top */
  transition: transform 1s ease-in;
}

#beaker_water_120{
    position: absolute;
    bottom: 50.6%;
    height: 12%;
    width: 8.4%;
 
    left: 24.2%;
    z-index: 1;
    transition: bottom 1s ease, left 1s ease;
    opacity: 0%;
   rotate: -17deg;
    
}

#latex_80_top{
    position: absolute;
    bottom: 32.2%;
    height: 8%;
    width: 9.9%;
 
    left: 16.7%;
    z-index: 1;
    transform: scaleY(0);  
     transform-origin: bottom;          /* Expand from bottom to top */
  transition: transform 2s ease-in;
    opacity: 0%;

    
}



#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%;
}

#weighing_machine{
    position: absolute;
    bottom: 0%;
    height: 20%;
    width: 18%;
    top: 73%;
    left:13.0%;
    z-index: 2; 
}



#Off_button_weighing{
    position: absolute;
    bottom: 0%;
    height: 3%;
    width: 3%;
    top: 83.4%;
    left: 25.5%;
    z-index: 2; 
    font-size:  0.8vw;
    font: bold;
     border-left: 3px solid #633cf0;
   border-right: 3px solid #633cf0;
  animation: slideIn 0.5s ease-in-out;
   background-color: #9fdafc;
}

#tare{
    position: absolute;
    bottom: 0%;
    height: 3%;
    width: 3%;
    top: 83.4%;
    left: 15%;
    z-index: 20; 
    font-size:  0.8vw;
    font: bold;
     border-left: 3px solid #633cf0;
   border-right: 3px solid #633cf0;
  animation: slideIn 0.5s ease-in-out;
   background-color: #9fdafc;
}

#Off_button_weighing:hover {
    background-color: #34cddb;
  }


#latex-beaker{
     position: absolute;
    bottom: 0%;
    height: 25%;
    width: 12%;
    top: 28%;
    left: 22.0%;
    z-index: 2; 
    opacity: 0%;
    transition: 1s;
    rotate: -15deg;
   
    
}

#latex-beaker-full{
     position: absolute;
    bottom: 0%;
    height: 25%;
    width: 12%;
    top: 67%;
    left: 37.0%;
    z-index: 2; 
    transition: 1s;
}


#viscometerUpperPart{
     position: absolute;
    height: 30%;
    width: 9%;
    top: 15%;
    left: 11.0%;
    z-index: 2; 
    transition: 1s;
    opacity: 100%;
   
    
}

#beakerHolder {
  position: absolute;
  top: 78%;
  left: 9.5%;
  width: 12.0%;
  height: auto;
  z-index: 2;
  transition: 0.5s ease-in-out;
  opacity: 1;
}
#spindleNo22 {
  position: absolute;
  top: 41%;
  left: 14.54%;
  width: 1.8%;
  height: auto;
  z-index: 2;
  transition: 1s ease-in-out;
  opacity: 1;
}

#selectSpindle {
  position: absolute;
  top: 29.4%;
  left: 16.65%;
  width: 1.5%;
  height: 3%;
  z-index: 5;
  transition: 1s ease-in-out;
  opacity: 1;


}

.rotate360 {
  transform: rotateZ(360deg);
}

/* @keyframes rotateSpindle {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
} */



#spindleNo3 {
  position: absolute;
  top: 77%;
  left: 42%;
  width: 1.9%;
  height: auto;
  z-index: 2;
  transition: 1s ease-in-out;
  opacity: 1;
  rotate: -90deg;
}

#upArrow {
  position: absolute;
  top: 20%;
  left: 26%;
  width: 3%;
  height: auto;
  z-index: 2;
  transition: 0.5s ease-in-out;
  opacity: 1;
}

#viscosityUpButton {
  position: absolute;
  top: 27.7%;
  left: 15%;
  width: 1.3%;
  height: 2.5%;
  z-index: 3;
  transition: 1s ease-in-out;
  opacity: 1;
}

#viscosityDownButton {
  position: absolute;
  top: 31.3%;
 left: 15%;
  width: 1.3%;
  height: 2.5%;
  z-index: 3;
  transition: 1s ease-in-out;
  opacity: 1;
}

#motorOnOff {
  position: absolute;
  top: 22.8%;
  left: 12.6%;
  width: 1.6%;
  height: 3.1%;
  z-index: 30;
  transition: 1s ease-in-out;
  opacity: 1;
  
}

#off_on_button{
  position: absolute;
  top: 22.7%;
  left: 14.73%;
  width: 1.7%;
  height: 3.1%;
  z-index: 3;
  transition: 1s ease-in-out;
  opacity: 1;
}
.thankyou {
  margin-top: 4px;
  font-weight: bold;
  color: #5314bf;
  font-size: 0.vw;
}

#setSplinder {
  position: absolute;
  top: 29.4%;
  left: 13%;
  width: 1.5%;
  height: 3%;
  z-index: 3;
  transition: 1s ease-in-out;
  opacity: 1;
}

#viscometerUpperPart {
  position: absolute;
  top: 13.4%;
  left: 11%;
  width: 9%;
  height: 33%;
  z-index: 2;
  transition: 1s ease-in-out;
  opacity: 1;
}

#viscometerStand{
  position: absolute;
  top: 38%;
  left: 11%;
  width: 9%;
  height: 58%;
  z-index: 1;
  transition: 0.5s ease-in-out;
  opacity: 1;
}
 


#latex_80{
     position: absolute;
    bottom: 0%;
    height: 25.1%;
    width: 12.0%;
    top: 28%;
    left: 22%;
    z-index: 1;
    opacity: 0%;
    rotate: -15deg; 
    transition: 1s;
}

#viscosityResult {
   /* Hidden by default */
   position: absolute;
  background-color: #ffffff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  border-radius: 12px;
  padding: 15px 14px;
  max-width: 40%;
  font-size: 1.4vw;
  text-align: left;
  border-left: 6px solid #633cf0;
   border-right: 6px solid #633cf0;
  animation: slideIn 0.5s ease-in-out;
  opacity: 100%;
  height:  50%;
  width: 40%;
  left: 30%;
  top: 25%;
  background-color: #9fdafc;
  margin-bottom: "16px";
}

  #showResultBtn {
    position: absolute;
    height: 4%;
    width: 11%;
    left: 21%;
    top: 18%;
    z-index: 20;
    font-size: 1vw;
    background-color: #ed8b2f;
    color: white;
    font: bold;
    transition: background-color 0.3s ease;
    border-radius: 4px;
    visibility: hidden;
    
  }

#showResultBtn:hover {
    background-color: #1c5ecb;
  }

#latex_beaker_200{
     position: absolute;
    height: 23.1%;
    width: 12.0%;
    top: 55%;
    left: 15%;
    z-index: 25;
    opacity: 0%;
    transition: 1s;
}


@keyframes shake {
  0% { transform: translate(0px, 0px); }
  25% { transform: translate(-3px, 0px); }
  50% { transform: translate(3px, 0px); }
  75% { transform: translate(-3px, 0px); }
  100% { transform: translate(0px, 0px); }
}

.shake {
  animation: shake 4s infinite;
}

@keyframes shake1 {
  0% { transform: translate(0px, 0px); }
  25% { transform: translate(-3px, 0px); }
  50% { transform: translate(3px, 0px); }
  75% { transform: translate(-3px, 0px); }
  100% { transform: translate(0px, 0px); }
}

.shake1 {
  animation: shake 4s infinite;
}

#main_beaker{
    position: absolute;
    bottom: 0%;
    height: 23%;
    width: 12%;
    top: 68.7%;
    left: 69.9%;
    z-index: 20;
    transition: 1s;
    opacity: 100%;
}

#latex_bottom{
    position: absolute;
    bottom: 0%;
    height: 12.4%;
    width: 9.9%;
    top: 39.9%;
    left: 24.33%;
    z-index: 1;
    opacity: 0%;
    rotate: -15deg;
    transition: 1s;
}

#latex_bottom1{
    position: absolute;
    bottom: 22.15%;
    height: 11.0%;
    width: 9.9%;
   
    left: 16.66%;
    z-index: 2;
    opacity: 100%;
    transition: 1s;
     transform: scaleY(0);  
     transform-origin: bottom;          /* Expand from bottom to top */
  transition: transform 2s ease-in;
}

#latex_up{
    position: absolute;
    bottom: 0%;
    height: 6%;
    width: 9.99%;
    top: 33.0%;
    left: 23%;
    z-index: 1;
    opacity: 0%;
    rotate: -15deg;
    transition: 1s;
}

#tilted_latex{
    position: absolute;
    bottom: 0%;
    height: 14.1%;
    width: 11.39%;
    top: 28.3%;
    left: 21.51%;
    z-index: 1;
    opacity: 0%;
    rotate: -17deg;
}

#latex_strip{
    position: absolute;
    bottom: 23.0%;
    height: 44%;
    width: 0.3%;
   
    left: 21%;
    z-index: 2;
    opacity: 0%;
    transition: 1s;
   
}





#weight-display {
                 /* Hidden initially */
  font-size: 2.0vw;             /* Responsive font size */
  font-weight: bold;
  color: #f4c9c9;
  position: absolute;
  top: 77.5%;                   /* 10% from top of the container */
  left: 16.5%;                  /* 15% from left of the container */
  opacity: 0%;
  padding: 2% 3%;             /* Padding using percentages */
  border-radius: 2%;          /* Rounded corners using percentage */
  /* box-shadow: 0 0 1vw rgba(0, 0, 0, 0.1); Scaled shadow */
  z-index: 3;
}


#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;
    
}




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

    
}

#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;
}
#stp37{
 
    visibility: hidden;
}
#stp63{
 
    visibility: hidden;
}
#stp993{
 
    visibility:hidden;
}
#stp33{
   
 
    visibility: hidden;
}
#stp55{
   
 
    visibility: hidden;
}
#stp77{
 
    visibility:hidden;
   
}
#stp70{
  
    visibility: hidden ;
}
#stp12{
  
    visibility: visible;
   
}

/* .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;}
}