/* first box */
.champ1 {
	position: relative;
	background-image: linear-gradient(to bottom right, #fb6a6a, #c23f3f);
	z-index:1;
	width: fit-content;
	padding: 40px 20px;
	width: 10%;
	border-radius: 10px;
  }
  .champ1::before, .champ1::after {
	position: absolute;
	left: 0;
	content: "";
  }
 .champ1::before, .champ1::after {
		position: absolute;
		left: 0;
		content: "";
	  }
 /* .champ1::before {
	
 
    width: 27%;
    height: 20%;
    border: 2px solid #a9a3a3;
    border-left: 0px;
    transform: rotate(90deg);
    z-index: -1;
    border-right: 0px;
	  } */
	/* .box1::after {
		top: -21px;
		left: 0;
		right: 0;
		margin: auto;
		width: 6px;
		height: 6px;
		background: #aaa;
		border-radius: 50%;
	  } */

	/* progress bar */
	#myProgress {
		width: 98%;
		z-index: 0;
    margin-top: -5%;
		
	  }
	  .valve{
		margin-top: 15%;
		z-index: 3;
		margin-left: -4%;
	  }
	  .vacuumpump{
width: 100%;
position: relative;
z-index: 3;
	  }
	  
	  #myBar {
		width: 92%;
		height: 20px;
		background-color: #ca4444;
		position: relative;
		z-index: 1;
	  }
	  #pipe{
		width: 92%;
		height: 20px;
		background-color: #c2c2c200;
		border: 1px solid #252525;
		position: relative;
		z-index: 0;
		top: -20;
	  }
	  .simulate{
		background: linear-gradient(97.95deg, #F35858 -2.23%, #C91212 112.4%);
		color: #FCFCFC;
		width: 100%;
		border-radius: 5px !important;
		padding: 0px 13px;
		font-size: 24px;
		top: 57px;
		left: 50%;
		position: relative;
		border: none;
	  }
	  .successive{
		background: #fcfcfc;
		color: #757575;
		width: 100%;
		border-radius: 5px !important;
		padding: 0px 13px;
		font-size: 24px;
		top: 69px;
		left: 50%;
	border: 1px solid #757575 !important;
		position: relative;
		border: none;
	  }
	  /* jar */
	
	  /* .bottle {
		
		margin-left: 19.1%;
	  } */
	  .bottlecap {
		
		
		position: relative;
		left:81px;
        top:-19%;
	  }
	  /* .bottle:after {
		content: "";
		position: absolute;
		margin: auto;
		width: 80%;
		padding-top: 8%;
		background: #E8F4FA;
		border-radius: 2vmin;
		left: 0;
		right: 0;
		top: -8%;
		box-shadow: inset -5px 0 0 #bee0f1;
	  } */
	  /* second box */
.champ2 {
	position: relative;
	background-image: linear-gradient(to bottom right, #fb6a6a, #c23f3f);
	z-index:1;
	width: fit-content;
	padding: 40px 20px;
	width: 8%;
	top: 30%;
    height: 70%;
	
	border-radius: 10px;
  }

 .champ2::before, .box2::after {
		position: absolute;
		left: 0;
		content: "";
	  }
 .champ2::before {
	
	  }
	  
	  /* jar2 */
	
	  /* .bottle2 {
		margin-left: 40.6%;
	  } */
	  /* .bottle2:before {
		content:url('../images/cap.svg'); 
		position: absolute;
		margin: auto;
		
		left: 0;
		right: 0;
		top: -60%;
	  } */
	 
	    /* third box */
.champ3 {
	height: 180%;
    
	position: relative;
	background-image: linear-gradient(to bottom right, #fb6a6a, #c23f3f);
	z-index:1;
	width: fit-content;
	padding: 40px 20px;
	width: 10%;
    top: -80%;
	border-radius: 10px;
  }

 .champ3::before, .box3::after {
		position: absolute;
		left: 0;
		content: "";
	  }
 .champ3::before {
	
	  }
	   /* jar3 */
	
	   /* .bottle3 {
		
		margin-left: 62%;
	  } */
	  /* .bottle3:before {
		content:url('../images/cap.svg'); 
		position: absolute;
		margin: auto;
		
		left: 0;
		right: 0;
		top: -60%;
	  } */

	  .vaccum{
		float: left;
		margin-left: 80%;
		margin-top: -3%;
	  }
	  .btn1 {
		display: block !important;
		margin-left: -100%;
		border-radius: 50%;
	
	  }

	   /* on-off button */
	   .btn-primary {
		background: #C74343;
		border: 1px solid #C74343;
		
		color: #FFF;
		z-index: 2;
	  }
	  .vol1{
		margin-left: 3%;
	  }
	  .chamber{
		width: 100%;
		margin-top:-7% ;
	  }
	  .pressurecap{
	top: 39%;
	  }
	
	  /* button moving */
	  @keyframes btnmoving {
		from {top: 0px;}
		to {top:-9px;}
	  }
	  /* jar1btn */
	  /* #jar1btn{
		margin-left: 19%;
		margin-top: -12%;
	  }
	  #jar2btn{
		margin-left: 41%;
		margin-top: -12%;
	  }
	  #jar3btn{
		margin-left: 62%;
		margin-top: -12%;
	  } */
	  .btn-red {
		background-image: linear-gradient(to bottom right, #3EB88C, #5BDBA5);
		border: 1px solid #3EB88C;
		padding: 2px 6px;
		color: #FFF;
		z-index: 2;
	  }
	  @keyframes btntopmoving {
		from {top: 20px;}
		to {top:0px;}
	  }
	  
	
	  .tile {
		color: #616264;
		
		border-radius: 10px;
		position: relative;
		text-align: center;
		top: 256px;
		left: 0%;
		/* display: flex; */
		width: 10%;
	}
	.ipbox{
border: 1px solid #252525;
height: 50px;
width: 150px;

border-radius: 6px;
	}
	.bor{
		border: 1px solid #252525;
	}
	#pressure, #pressure1{
		
		width: 116%;
	    height:100%;
		background-color: transparent;
		border-left: 1px solid #252525;
		border-right: 0px;
		padding: 3%;
		
	}
	#uppertext{
		position:absolute;
		top: -15%;
		left: -1%;
    z-index: 11;
		padding: 2;
	background-color: #fcfcfc;
	width: 72px;
	font-size: 9px;
	text-align: left;
	
	}
	.p1{
		position: relative;
    z-index: 2;
    top: 10px;
	font-weight:700 ;
	}
.close{

}
	.ground{
		background: linear-gradient(180deg, #D9D9D9 0%, rgba(217, 217, 217, 0) 100%);
		height: 25%;
	}
	.boxheadingjar{
		font-size: 12px;
		color: rgb(101, 96, 96);
		font-weight: 600;
		left: 105px;
		position: relative;
	}
	.boxheading{
		
		color: #fff;
		font-weight: 600;
	}
	.tile2 {
		color: #616264;
		
		border-radius: 10px;
		position: relative;
		text-align: center;
		top: 290px;
    left: 3%;
		/* display: flex; */
		width: 10%;
	}
	  
	.tile3 {
		color: #616264;
		
		border-radius: 10px;
		position: relative;
		text-align: center;
		top: 147px;
    left: 7%;
		/* display: flex; */
		width: 10%;
	}
	   

	
	  .pressure{
		margin-top: -3% ;
		margin-left: 3%;
	  }



	  @media (max-width : 1440px) {
		
		
		
		.valve {
			margin-top: 20%;
			z-index: 4;
			margin-left: -4%;
		}
		.chamber {
			width: 100%;
			margin-top: -13.5%;
		}
		/* .tile {
			color: #616264;
			border-radius: 10px;
			position: relative;
			text-align: center;
			top: 246px;
			left: 0%;
			
			width: 10%;
		} */
		.ipbox {
			border: 1px solid #252525;
			top: 68px;
		
			border-radius: 6px;
			
			
    position: relative;
		}
		.tile2 {
			color: #616264;
			border-radius: 10px;
			position: relative;
			text-align: center;
			top: 267px;
			left: 3%;
			/* display: flex; */
			width: 10%;
		}
		.tile3 {
			color: #616264;
			border-radius: 10px;
			position: relative;
			text-align: center;
			top: 121px;
			left: 6%;
			/* display: flex; */
			width: 10%;
		}
		.button {
			top: 174px;
			left: -3px;
			position: relative;
		}
	  }
	  @media (min-width : 900px){
		.tile{
			top: 190px;
		}
		.button {
			top: 212px;
			left: -24px;
			position: relative;
		}
		.button1 {
			top: 67px;
    left: -7px;
			position: relative;
		}
		.btn-group{
			top: -14px;
			left: 82px;
		
		}
		.chamber {
			width: 100%;
			margin-top: -16.5%;
		}
		.valve {
			margin-top: 25%;
			z-index: 4;
			margin-left: -7%;
		}
		.vacuumpump{
			left: 74px;
			top: 5px;
		}
		
	  }

	  @media (min-width : 1200px){
		.vacuumpump{
			left: 0px;
			top: 0px;
		}
		.ipbox {
			border: 1px solid #252525;
			top: 50px;
			position: relative;
		}
		.button {
			top: 227px;
			left: -8px;
			position: relative;
		}
		.button1 {
			top: 82px;
			left: 19px;
			position: relative;
		}
		.valve {
			margin-top: 22%;
			z-index: 4;
			margin-left: -7%;
		}
		.tile {
			top: 233px;
	  }
	  .btn-group{
		top: -14px;
		left: 82px;
	
	}
	.chamber {
		width: 100%;
		margin-top: -13.5%;
	}
	}
	  @media (min-width : 1400px){
	  .button {
		top: 274px;
    left: 11px;
		position: relative;
	}
	.button1 {
		top: 129px;
		left: 51px;
		position: relative;
	}
	.ipbox {
		border: 1px solid #252525;
		top: 55px;
		position: relative;
	}
	.chamber {
		width: 100%;
		margin-top: -11%;
	}
	.tile {
		top: 262px;
	}
	.btn-group{
		top: -14px;
		left: 82px;
	
	}
}
@media only screen and (min-width: 1400px) and (max-width: 1520px)  {
	.button {
		top: 274px;
    left: 10px;
		position: relative;
	}
	.button1 {
		top: 129px;
    left: 52px;
		position: relative;
	}
}
.rounded-3{
text-align: start;
}

/* @media (min-width : 1520px){
	.button {
		top: 211px;
    left: 29px;
		position: relative;
	}
	.button1 {
		top: 66px;
    left: 80px;
		position: relative;
	}
	.chamber {
		width: 100%;
		margin-top: -9.5%;
	}
	.valve {
		margin-top: 16%;
		z-index: 4;
		margin-left: -5%;
	}
} */

	  /* Pressure Gauge */
	  #temperature1, #temperature11{
		height: 31px;
		position: absolute;
		z-index: 15;
		top: 33%;
		left: 10%;
		width: 66px;
	
	}
	#temperature2, #temperature21{
		height: 31px;
		position: absolute;
		z-index: 15;
		top: 33%;
		left: 10%;
		width: 66px;
	
	}
	/* .button {
		top: 174px;
		left: -3px;
		position: relative;
	} */

	.button:before {
	  content: '';
	  position: absolute;
	  width: 110px;
    height: 110px;
	left: 35px;
    top: 72px;
	  border-radius: 50%;
	  background: #b19d92 -moz-linear-gradient(top, #efe4de 0%, #af998c 75%) no-repeat 50% 0%;
	  background: #ffffff -webkit-linear-gradient(top, #fff 0%, #eaeaec 75%) no-repeat 50% 0%;
	  background: #b19d92 linear-gradient(top, #efe4de 0%, #af998c 75%) no-repeat 50% 0%;
	 
	}
	.button:after {
		content: '';
		position: absolute;
		width: 101px;
		height: 101px;
		left: 40px;
    top: 78px;
	  border-radius: 50%;
	  background: 
		-moz-linear-gradient(left, transparent 49%, #000 49%, #000 50%, transparent 50%) 50% -80px,
		-moz-linear-gradient(right top,white, #ee9900) 100% 0%,
		-moz-linear-gradient(left top,#A00, orange) 0% 0%
		;
	
		background: conic-gradient(from 124deg at 50% 50%, #58D8A3 0deg, #FFE54F 135deg, #DE4343 268.13deg, #58D8A3 360deg);
	transform: rotate(90deg);
		;
	  background: 
		linear-gradient(left, transparent 49%, #000 49%, #000 50%, transparent 50%) 50% -80px,
		linear-gradient(right top,white, #ee9900) 100% 0%,
		linear-gradient(left top,#A00, orange) 0% 0%
		;
	  background-repeat: no-repeat;
	  background-size: 50% 100%;
	  /* box-shadow:
		0 -1px 2px rgba(255,255,255,1) inset,
		-1px 0 3px rgba(0,0,0,.25) inset,
		0 3px 3px rgba(0,0,0,.3) inset;  */
	}
	.button1:before {
		content: '';
		position: absolute;
		width: 110px;
	  height: 110px;
	  left: 35px;
	  top: 72px;
		border-radius: 50%;
		background: #b19d92 -moz-linear-gradient(top, #efe4de 0%, #af998c 75%) no-repeat 50% 0%;
		background: #ffffff -webkit-linear-gradient(top, #fff 0%, #eaeaec 75%) no-repeat 50% 0%;
		background: #b19d92 linear-gradient(top, #efe4de 0%, #af998c 75%) no-repeat 50% 0%;
	   
	  }
	  .button1:after {
		  content: '';
		  position: absolute;
		  width: 101px;
		  height: 101px;
		  left: 40px;
	  top: 78px;
		border-radius: 50%;
		background: 
		  -moz-linear-gradient(left, transparent 49%, #000 49%, #000 50%, transparent 50%) 50% -80px,
		  -moz-linear-gradient(right top,white, #ee9900) 100% 0%,
		  -moz-linear-gradient(left top,#A00, orange) 0% 0%
		  ;
	  
		  background: conic-gradient(from 124deg at 50% 50%, #58D8A3 0deg, #FFE54F 135deg, #DE4343 268.13deg, #58D8A3 360deg);
	  transform: rotate(90deg);
		  ;
		background: 
		  linear-gradient(left, transparent 49%, #000 49%, #000 50%, transparent 50%) 50% -80px,
		  linear-gradient(right top,white, #ee9900) 100% 0%,
		  linear-gradient(left top,#A00, orange) 0% 0%
		  ;
		background-repeat: no-repeat;
		background-size: 50% 100%;
		/* box-shadow:
		  0 -1px 2px rgba(255,255,255,1) inset,
		  -1px 0 3px rgba(0,0,0,.25) inset,
		  0 3px 3px rgba(0,0,0,.3) inset;  */
	  }
	.knob {
	  z-index: 10;
	  position: absolute;
	  top: 87px;
    left: 49px;
    width: 83px;
	height: 85px;
	  border-radius: 50%;
	  background: #b19d92 -moz-radial-gradient(top, #e7d9d0 0%, #c5b1a6 75%) no-repeat 50% 0%;
	  background: #b19d92 -webkit-radial-gradient(top, #fff 0%, #eaeaef 75%) no-repeat 50% 0%;
	  background: #b19d92 radial-gradient(top, #e7d9d0 0%, #c5b1a6 75%) no-repeat 50% 0%;
	 
	  color: #FFF;
	 
	
	  line-height: 160px;
	  text-align: center;
	 
	}
	/* .knob:after {
		content: '';
		width: 3px;
		height: 9px;
		position: absolute;
		left: 44%;
		top: 44%;
		margin: 0px 0 0 3px;
		transform: rotate(84deg) translateY(-46px) translateX(0px) rotate(181deg);
		/* border-radius: 50%;
		z-index: 100;
		background: #000000;
	
	} */
	.temptxt{
		position: absolute;
		z-index: 5;
		top: 0%;
    left: 0%;
    font-size: 9px;
		font-weight: 500;
		color: #252525;
	font-family: 'Poppins';
	}
	.underbox{
		height: 26px;
		width: 84px;
		background-color: #eaeaec;
		position: relative;
		z-index: 7;
		top: 159px;
		left: 48px;
		border-radius: 6px;
	}
	.min{
	position: absolute;
	font-family: 'Poppins';
	top: 49px;
    left: 83px;
		z-index: 33;
		color: #252525;
	}
	.mid{
		position: absolute;
		font-family: 'Poppins';
		top: 74px;
		left: 129px;
		z-index: 19;
		color: #252525;
	}
	.max{
		position: absolute;
		font-family: 'Poppins';
		top: 152px;
		left: 225px;
		z-index: 33;
		color: #252525;
	}
	
		 #graphview1{
			color: #fcfcfc ! important;
			
		  }
		  #refreshpage{
			background-color: #E34141 !important;
		  }
		  .modal-header
		 {
			background-color: #E34141 !important;
		 }
		 #tabele1{
		
		 border: 1px solid #252525;
		 }
		 .val{

		 }
		 .error{
			display: flex ! important;
			font-size: 10px;
			width: 240px;
			margin: -6px 1px;
			top: 6px;
    position: relative;
    color: #e35858;
		
		 }
		 tr{
			font-size: 14px;
		 }
		 #tabell1{
	
		 border: 1px solid #252525;
		 }
		 #tabell1 th{
			
			background-color: #D9D9D9;
			color: #252525;
		 }
		 #tabele1 th{
			
			background-color: #D9D9D9;
			color: #252525;
		 }
		 #stepsdatabg ul {
			font-size: 12px;
			
		 }
		 .dwld:hover{
			color: #fcfcfc;
			
		 }
	.dwld{
			float: right;
			background: #C74343;
			color: #fcfcfc;
			padding: 5px 17px;
			border-radius: 25px;
		 }
		 #pressure-error, #pressure1-error{
		    font-size: 8px;
			color: #e35858;
			margin-top: 25%;
			margin-left: -58%;
		
    line-height: 3px;
		 }
		  #temperature1-error, #temperature11-error{
		    font-size: 8px;
    margin-top: 67%;
    margin-left: 1%;
    line-height: 0px;

		 } #temperature2-error, #temperature21-error{
			font-size: 8px;
			margin-top: 68%;
			margin-left: 0%;
    line-height: 0px;

		 }
		 #stepsdatabg {
			background: #f6f6f6 !important;
			padding: 10px 10px;
			border: 1px dashed #252525;
			border-radius: 10px;
          left: 48px;
		      padding-bottom: 0%;

          position: relative;
		 }
		 #textdat{
			font-size: 12px;
			z-index: 1;
			width: 90%;
			
			margin-top: 6%;
			
		 }
			 #p1alert{
			font-size: 10px;
			
			margin-top: -41px;
			color: red;
			display: none;
		 }
	 /* modalpop */
	 .modcont {
		background: #EAEAEA;
		backdrop-filter: blur(7px);
		box-shadow: 5px 9px 41px 2px rgba(72, 72, 72, 0.25);

		padding: 15px;
		border: 1px solid #888;
		border-radius: 20px;
		width: 40%;
		
		animation-name: slideIn;
		animation-duration: 0.4s;
		transition: 0.4s;
	  
	  }
	  .modtitle{
		background-color: #00000000 !important;
		border: none;
		padding: 0 !important;
	  }
.modtitle lottie-player{ 
width: 20%;
height: 20%;

float: left
}
.modtitle h4{
text-align: left;
font-weight: 600;
text-size-adjust:none;
font-size: 24px;
}

.modpop{
	display: none;
backdrop-filter: blur(18.5px);
background: rgba(37, 37, 37, 0.41);
}

/* .modal{
display: block;
} */
.x {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
margin-top: -20px;
animation-name: slideout;
animation-duration: 0.4s
}

.x:hover,
.x:focus {
color: #ffffff;
text-decoration: none;
cursor: pointer;
}