.img-container {
    display: inline-block;
    position: relative;

}

.drop {
	background-color:rgb(0 0 0 / 0%);
	border: 2% solid none;
	position: absolute;
	width: 4%;
					
		
}
#drop{
		top: 74%;
		left: 57%;
		z-index: 20;
		height:0%;
	
}
#drop1{
		top: 28%;
		left: 52%;
		z-index: 10;
		height:0%;
	
}
#drop2{
    top: 74%;
    left: 61.3%;
    z-index: 20;
    height: 0%;
	
}

/* Fan	*/

.fan {
	background-color:rgb(0 0 0 / 0%);
	border: 2% solid none;
	position: absolute;
	width: 10%;
					
		
}
#fan{
		top: 26%;
		left: 44.5%;
		z-index: 10;
		height:15%;
	
}

#rectangle{
  width: 0.5%;
    height: 3%;
    background-color: red;
    position: absolute;
    bottom: 36.4%;
    left: 40.2%;
}

#rectangle2{
      width: 0.5%;
    height: 3%;
    background-color: red;
    position: absolute;
    bottom: 62.4%;
    left: 62.7%;
}




.basin {
	clip-path: polygon(45% 33%, 76% 31%, 94% 26%, 92% 91%, 73% 100%, 50% 104%, 23% 90%, 23% 28%);
	background-color:rgb(0 0 0 / 0%);
	border: 2px solid none;
	position: absolute;
	width: 17.5%;
	height: 0%;
	opacity: 0.5;
	
	
}
#basin{
		bottom: 54.1%;
		left: 39.9%;
		z-index: 40;
	
}
.basin4{
	clip-path: polygon(11% 35%, 16% 36%, 17% 80%, 27% 87%, 66% 80%, 40% 92%, 60% 81%, 25% 87%, 52% 87%, 59% 84%, 68% 29%, 70% 47%, 69% 77%, 66% 83%, 60% 88%, 52% 91%, 47% 92%, 62% 89%, 40% 92%, 34% 92%, 22% 89%, 14% 84%, 11% 79%);
	background-color:rgb(0 0 0 / 0%);
	border: 2px solid none;
	position: absolute;
	width: 25.5%;
	height: 0%;
	opacity: 0.5;
	
	
}
#basin4{
		bottom: 47.6%;
		left: 39.9%;
		z-index: 40;
	
}

/* container jar1	*/

.basin2 {
	background-color:rgb(0 0 0 / 0%);
	border: 2px solid none;
	position: absolute;
	width: 6%;
	height: 0%;
	opacity: 0.5;
	/* clip-path: inset(32% -17% 0% -12% round 37%);	*/
clip-path: polygon(45% 33%, 76% 31%, 94% 26%, 93% 95%, 65% 100%, 44% 100%, 23% 96%, 23% 28%);	
		
}


#basin2{
		bottom: 6%;
		left: 55.5%;
		z-index: 40;
	
}

/* container jar2	*/

.basin3 {
	background-color:rgb(0 0 0 / 0%);
	border: 2px solid none;
	position: absolute;
	width: 6%;
	height: 0%;
	opacity: 0.5;
	/* clip-path: inset(32% -17% 0% -12% round 37%);	*/
clip-path: polygon(45% 33%, 76% 31%, 94% 26%, 93% 95%, 65% 100%, 44% 100%, 23% 96%, 23% 28%);	
		
}


#basin3{
		bottom: 6%;
		left: 59.5%;
		z-index: 40;
	
}



/* water flow in pipe1	*/

.wpipe {
	background-color:rgb(0 0 0 / 0%);
	border: 2px solid none;
	position: absolute;
	
	
	/* clip-path: inset(32% -17% 0% -12% round 37%);	*/
/*clip-path: polygon(45% 33%, 76% 31%, 94% 26%, 93% 95%, 65% 100%, 44% 100%, 23% 96%, 23% 28%);	*/
		
}
/*tank water supply*/



#wpipe {
    position: absolute;
    bottom: 71%;
    left: 62.6%;
    z-index: 40;
    height: 0%;
    width: 1.1%;
	opacity: 0.7;
    background-color: powderblue;
}

#wpipe2{
	position: absolute;
    top: 12.8%;
    right: 37%;
    z-index: 40;
    width: 0%;
    height: 2%;
	opacity: 0.7;
    background-color: powderblue;
		/*transform: rotate(270deg);*/
	
}

#wpipe3{
	position: absolute;
	width: 1.2%;
    background-color: powderblue;
	opacity: 0.7;
	top: 21.5%;
	left: 53.2%;
	z-index: 100;
	height: 0%;
		
	
}

/* water flow outlet pipe	*/

#wpipe4{
	position: absolute;
	width: 1.2%;
    background-color: powderblue;
	opacity: 0.7;
	top: 48%;
	left: 49.3%;
	z-index: 40;
	height: 0%;
		
	
}

#wpipe5{
	top: 70.5%;
	left: 50.3%;
	z-index: 40;
	height: 2%;
	position: absolute;
	width: 0%;
    background-color: powderblue;
	opacity: 0.7;
	
}

#wpipe6{
	top: 70.5%;
	left: 56.8%;
	z-index: 40;
	height: 2%;
	position: absolute;
	width: 0%;
    background-color: powderblue;
	opacity: 0.7;
	
}
#wpipe7{
	top: 72.3%;
	left: 58.4%;
	z-index: 40;
	height: 0%;
	position: absolute;
	width: 1.2%;
    background-color: powderblue;
	opacity: 0.7;
	
}

#wpipe8{
	position: absolute;
    top: 66.9%;
    right: 14.9%;
    z-index: 40;
    width: 0%;
    height: 2%;
    background-color: powderblue;
	opacity: 0.7;
}

#wpipe9{
    position: absolute;
    bottom: 36.7%;
    left: 73.9%;
    z-index: 40;
    height: 0%;
    width: 1.1%;
    background-color: powderblue;
	opacity: 0.7;
}

#wpipe10{
	position: absolute;
    top: 47.6%;
    right: 25.9%;
    z-index: 40;
    width: 0%;
    height: 2%;
    background-color: powderblue;
	opacity: 0.7;
}

#wpipe11{
	    position: absolute;
    top: 47.6%;
    right: 33.2%;
    z-index: 40;
    width: 0%;
    height: 2%;
    background-color: powderblue;
	opacity: 0.7;
}
#wpipe12{
        position: absolute;
    bottom: 52.3%;
    left: 62.5%;
    z-index: 40;
    height: 0%;
    width: 1.1%;
    background-color: powderblue;
	opacity: 0.7;
}

/*tank chiller water supply*/

#wpipe13{
	position: absolute;
    top: 85.5%;
    left: 12.9%;
    z-index: 40;
    width: 0%;
    height: 2%;
    background-color: powderblue;
	opacity: 0.7;
}

#wpipe14{
        position: absolute;
    bottom: 18.3%;
    left: 22.9%;
    z-index: 40;
    height: 0%;
    width: 1.1%;
    background-color: powderblue;
	opacity: 0.7;
}
#wpipe15{
	    position: absolute;
    top: 74.1%;
    left: 23.9%;
    z-index: 40;
    width: 0%;
    height: 2%;
    background-color: powderblue;
	opacity: 0.7;
}

#wpipe16{
	    position: absolute;
    top: 74.1%;
    left: 35.6%;
    z-index: 40;
    width: 0%;
    height: 2%;
    background-color: powderblue;
	opacity: 0.7;
}

#wpipe17{
       position: absolute;
    bottom: 26%;
    left: 39.9%;
    z-index: 40;
    height: 0%;
    width: 1.1%;
    background-color: powderblue;
	opacity: 0.7;
}
#wpipe18{
        position: absolute;
    bottom: 45%;
    left: 40%;
    z-index: 40;
    height: 0%;
    width: 1%;
    background-color: powderblue;
	opacity: 0.7;
}
#wpipe19{
	position: absolute;
    top: 25.7%;
    left: 40.6%;
    z-index: 40;
    width: 0%;
    height: 2%;
    background-color: powderblue;
	opacity: 0.7;
}

/*tank chiller water supply out*/
#wpipe20{
	position: absolute;
    top: 25.7%;
    left: 57.3%;
    z-index: 40;
    width: 0%;
    height: 2%;
    background-color: powderblue;
	opacity: 0.7;
}
#wpipe21{
	position: absolute;
    width: 1.1%;
    background-color: powderblue;
    top: 27.7%;
    left: 59.1%;
    z-index: 40;
    height: 0%;
	opacity: 0.7;
}
#wpipe22{
	    position: absolute;
    top: 65.3%;
    left: 60.2%;
    z-index: 40;
    width: 0%;
    height: 2%;
    background-color: powderblue;
	opacity: 0.7;
}
#wpipe23{
	position: absolute;
    width: 1.1%;
    background-color: powderblue;
    top: 66.7%;
    left: 62.7%;
    z-index: 40;
    height: 0%;
	opacity: 0.7;
}
/*-----------------------------for vulv button to run program------------------------*/

.button {
  /*background-image: url(images/cancel.png); */
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-color:rgb(0 0 0 / 0%);
  /* put the height and width of your image here */
  height: 40%;
  width: 24%;
  border: none;
  position: absolute;
  top: 23.5%;
  left: 56.5%;
  z-index: 100;
}

button span {
  display: none;
}


.gbutton {
  /*background-image: url(images/cancel.png); */
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-color:rgb(0 0 0 / 0%);
  /* put the height and width of your image here */
  height: 29%;
  width: 44%;
  border: none;
  position: absolute;
  top: 56.4%;
  left: 11.8%;
  z-index: 100;
}

button span {
  display: none;
}










/*-----------------------------for drop------------------------*/
.dflow{
	animation:dflow 14s linear forwards;	
}

@keyframes dflow {
  from {height: 0%;}/*background-color:white}*/
  to   {height: 14%;}/*background-color:#0db4fd}*/
}
/*---------------------------------------------------------------------*/

/*-----------------------------for dropstop------------------------*/
.dflowstop{
	animation:dflowstop 14s linear forwards;	
}

@keyframes dflowstop {
  from {height: 14%;}/*background-color:white}*/
  to   {height: 0%;}/*background-color:#0db4fd}*/
}
/*---------------------------------------------------------------------*/

/*-----------------------------for open gas------------------------*/
.uflow{
	animation:uflow 4s linear forwards;	
}

@keyframes uflow {
  from {height: 0%;}/*background-color:white}*/
  to   {height: 11%;}/*background-color:#0db4fd}*/
}

/*-----------------------------for indicator------------------------*/
.iflow{
	animation:iflow 4s linear forwards;	
}

@keyframes iflow {
  from {height: 0%;}/*background-color:white}*/
  to   {height: 7%;}/*background-color:#0db4fd}*/
}



/*-------------------------------for upper tank--------------------------------------*/

.bflow{
	animation:bflow 24s linear forwards;	
}

@keyframes bflow {
  from {height: 0%;}/*background-color:white}*/
  to   {height: 37%;}/*background-color:#0db4fd}*/
}
/*---------------------------------------------------------------------*/


/*-------------------------------for chiller tank--------------------------------------*/

.chflow{
	animation:chflow 24s linear forwards;	
}

@keyframes chflow {
  from {height: 45%;}/*background-color:white}*/
  to   {height: 52%;}/*background-color:#0db4fd}*/
}
/*---------------------------------------------------------------------*/

/*-------------------------------for lower tank--------------------------------------*/

.lbflow{
	animation:lbflow 40s linear forwards;	
}

@keyframes lbflow {
  from {height: 0%;}/*background-color:white}*/
  to   {height: 23%;}/*background-color:#0db4fd}*/
}
/*---------------------------------------------------------------------*/



/*-----------------------------for gas release upper pipe------------------------*/
.gflow{
	animation:gflow 12s linear forwards;	
}

@keyframes gflow {
  from {width: 0%;}/*background-color:white}*/
  to   {width: 5%;}/*background-color:#0db4fd}*/
}


/*-----------------------------for gas stop upper pipe------------------------
.gflowstop{
	animation:gflowstop 15s linear forwards;	
}

@keyframes gflowstop {
  from {width: 12%;}/*background-color:white}
  to   {width: 0%;}/*background-color:#0db4fd}
} */


/*-----------------------------for gas release lower pipe------------------------*/
.gflow1{
	animation:gflow1 12s linear forwards;	
}

@keyframes gflow1 {
  from {height: 1%;}/*background-color:white}*/
  to   {height: 7%;}/*background-color:#0db4fd}*/
}


/*-----------------------------for bubble release------------------------*/
.bubflow{
	animation:bubflow 12s linear forwards;	
}

@keyframes bubflow {
  from {height: 0%;}/*background-color:white}*/
  to   {height: 12%;}/*background-color:#0db4fd}*/
}

/*-----------------------------Wpipe up------------------------*/
.wpuflow{
	animation:wpuflow 4s linear forwards;	
}

@keyframes wpuflow {
  from {height: 0%;}/*background-color:white}*/
  to   {height: 16%;}/*background-color:#0db4fd}*/
}


/*-----------------------------Wpipe2 up------------------------*/
.wpu2flow{
	animation:wpu2flow 4s linear forwards;	
}

@keyframes wpu2flow {
  from {width: 0%;}/*background-color:white}*/
  to   {width: 9.8%;}/*background-color:#0db4fd}*/
  }

/*-----------------------------Wpipe3 up------------------------*/
.wpu3flow{
	animation:wpu3flow 4s linear forwards;	
}

@keyframes wpu3flow {
  from {height: 0%;}/*background-color:white}*/
  to   {height: 10%;}/*background-color:#0db4fd}*/
}
/*-----------------------------Wpipe4 up------------------------*/
.wpu4flow{
	animation:wpu4flow 4s linear forwards;	
}

@keyframes wpu4flow {
  from {height: 0%;}/*background-color:white}*/
  to   {height: 24.3%;}/*background-color:#0db4fd}*/
}
/*-----------------------------Wpipe5 up------------------------*/
.wpu5flow{
	animation:wpu5flow 4s linear forwards;	
}

@keyframes wpu5flow {
  from {width: 0%;}/*background-color:white}*/
  to   {width: 3%;}/*background-color:#0db4fd}*/
}
/*-----------------------------Wpipe6 up------------------------*/
.wpu6flow{
	animation:wpu6flow 4s linear forwards;	
}

@keyframes wpu6flow {
  from {width: 0%;}/*background-color:white}*/
  to   {width: 3%;}/*background-color:#0db4fd}*/
}
/*-----------------------------Wpipe7 up------------------------*/
.wpu7flow{
	animation:wpu7flow 4s linear forwards;	
}

@keyframes wpu7flow {
  from {height: 0%;}/*background-color:white}*/
  to   {height: 6%;}/*background-color:#0db4fd}*/
}



/*-----------------------------Wpipe8 up // starting------------------------*/
.wpu8flow{
	animation:wpu8flow 4s linear forwards;	
}

@keyframes wpu8flow {
  from {width: 0%;}/*background-color:white}*/
  to   {width: 9%;}/*background-color:#0db4fd}*/
  }


/*-----------------------------Wpipe 9 up------------------------*/
.wpu9flow{
	animation:wpu9flow 4s linear forwards;	
}

@keyframes wpu9flow {
  from {height: 0%;}/*background-color:white}*/
  to   {height: 16%;}/*background-color:#0db4fd}*/
}

/*-----------------------------Wpipe10 up // starting------------------------*/
.wpu10flow{
	animation:wpu10flow 4s linear forwards;	
}

@keyframes wpu10flow {
  from {width: 0%;}/*background-color:white}*/
  to   {width: 3.8%;}/*background-color:#0db4fd}*/
  }
  
  /*-----------------------------Wpipe11 up // starting------------------------*/
.wpu11flow{
	animation:wpu11flow 4s linear forwards;	
}

@keyframes wpu11flow {
  from {width: 0%;}/*background-color:white}*/
  to   {width: 4.4%;}/*background-color:#0db4fd}*/
  }
/*-----------------------------Wpipe 12 up------------------------*/
.wpu12flow{
	animation:wpu12flow 4s linear forwards;	
}

@keyframes wpu12flow {
  from {height: 0%;}/*background-color:white}*/
  to   {height: 8%;}/*background-color:#0db4fd}*/
}

/*-----------------------------Wpipe13 chiller first // starting------------------------*/
.wpu13flow{
	animation:wpu13flow 4s linear forwards;	
}

@keyframes wpu13flow {
  from {width: 0%;}/*background-color:white}*/
  to   {width: 9%;}/*background-color:#0db4fd}*/
  }

/*-----------------------------Wpipe 14 up------------------------*/
.wpu14flow{
	animation:wpu14flow 4s linear forwards;	
}

@keyframes wpu14flow {
  from {height: 0%;}/*background-color:white}*/
  to   {height: 7.9%;}/*background-color:#0db4fd}*/
}

/*-----------------------------Wpipe15 up // starting------------------------*/
.wpu15flow{
	animation:wpu15flow 4s linear forwards;	
}

@keyframes wpu15flow {
  from {width: 0%;}/*background-color:white}*/
  to   {width: 8%;}/*background-color:#0db4fd}*/
  }
  
    /*-----------------------------Wpipe16 up // starting------------------------*/
.wpu16flow{
	animation:wpu16flow 4s linear forwards;	
}

@keyframes wpu16flow {
  from {width: 0%;}/*background-color:white}*/
  to   {width: 5.4%;}/*background-color:#0db4fd}*/
  }

/*-----------------------------Wpipe 17 up------------------------*/
.wpu17flow{
	animation:wpu17flow 4s linear forwards;	
}

@keyframes wpu17flow {
  from {height: 0%;}/*background-color:white}*/
  to   {height: 8%;}/*background-color:#0db4fd}*/
}

/*-----------------------------Wpipe 18 up------------------------*/
.wpu18flow{
	animation:wpu18flow 4s linear forwards;	
}

@keyframes wpu18flow {
  from {height: 0%;}/*background-color:white}*/
  to   {height: 29%;}/*background-color:#0db4fd}*/
}

/*-----------------------------Wpipe19 up------------------------*/
.wpu19flow{
	animation:wpu19flow 4s linear forwards;	
}

@keyframes wpu19flow {
  from {width: 0%;}/*background-color:white}*/
  to   {width: 2.1%;}/*background-color:#0db4fd}*/
  }

/*-----------------------------Wpipe20 down------------------------*/
.wpu20flow{
	animation:wpu20flow 4s linear forwards;	
}

@keyframes wpu20flow {
  from {width: 0%;}/*background-color:white}*/
  to   {width: 2.9%;}/*background-color:#0db4fd}*/
  }
  
  /*-----------------------------Wpipe21 down------------------------*/
.wpu21flow{
	animation:wpu21flow 4s linear forwards;	
}

@keyframes wpu21flow {
  from {height: 0%;}/*background-color:white}*/
  to   {height: 39.7%;}/*background-color:#0db4fd}*/
}

/*-----------------------------Wpipe22 down------------------------*/
.wpu22flow{
	animation:wpu22flow 4s linear forwards;	
}

@keyframes wpu22flow {
  from {width: 0%;}/*background-color:white}*/
  to   {width: 3.6%;}/*background-color:#0db4fd}*/
}

/*-----------------------------Wpipe23 down------------------------*/
.wpu23flow{
	animation:wpu23flow 4s linear forwards;	
}

@keyframes wpu23flow {
  from {height: 0%;}/*background-color:white}*/
  to   {height: 11%;}/*background-color:#0db4fd}*/
}