



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

#obj{
	position: absolute;
    left: 15.2%;
    top: -18%;
    z-index: 2;
    width: 35%;	
}

#cb{
position: absolute;
    left: -6%;
    top: -75%;	
}

#slipgauge {
    position: absolute;
    left: 77%;
    bottom: 51%;
    width: 10%;
    height: 0%;
   
}
#slipgauge2 {
    position: absolute;
    left: 10.2%;
    bottom: 52%;
    width: 10%;
    height: 0%;
   
}

#wheel{
    position: absolute;
    left: 40.6%;
    top: 45%;
    width: 31%;
    height: 63%;
    z-index: 5;
}
#b2 {
    position: absolute;
    left: -14.8%;
    top: 46%;
    width: 29%;
     height: 8%;
    /*z-index: 2; */

}
#b3 {
    position: absolute;
    left: 77.2%;
    top: 46%;
    width: 29%;
     height: 8%;
    /*z-index: 2; */

}
#bar {
    position: absolute;
    left: 9.2%;
    top: 10%;
    width: 80%;
    height: 45%;
    z-index: 2;

}
#holder {
    position: absolute;
    left: 23.2%;
    top: -39%;
    width: 16%;
    height: 58%;
    /* opacity: 0.6; */
    z-index: 1;

}

#dholder {
    position: absolute;
    left: -8.8%;
    top: -34%;
    width: 17%;
    height: 82%;
    /* opacity: 0.6; */
    z-index: -1;
}

#chart_div{
	
position:absolute;
left:35%;
top:20%;
width:40%;
height:25%;	
	
}
#dial{
	
position: absolute;
    left: 1%;
    top: -8%;
    width: 10%;
    color: #0983C8;
    border: 2px solid #0983C8;
    text-align: center;	
}

#pspan{
	
position: absolute;
    left: -1%;
    top: -84%;
    width: auto;
    color: red;
    font-size: 1vw;
}

#dstand{
	
position: absolute;
    left: 5%;
    top: -29%;
    width: 2%;
    height: 9%;
    background-color: #0983C8;
    font-size: 1vw;
	z-index:-3;
}

@keyframes moveRobj {
  from { left: 15.2%; }
  to { left: 45.2%; };
  
}
@keyframes moveRholder {
 from { left: 23.2%; }
  to { left: 54.2%; };
  
}


@keyframes moveLobj {
  from { left: 45.2%; }
  to { left: 15.2%; };
  
}
@keyframes moveLholder {
 from { left: 54.2%; }
  to { left: 23.2%; };
  
}



.moveRightobj{
	animation:moveRobj 1s linear forwards;
	/*transform-origin: 51.9% 45.3%;*/
}
.moveLeftobj{
	animation:moveLobj 1s linear forwards;
	/*transform-origin: 51.9% 45.3%;*/
}
.moveRightholder{
	animation:moveRholder 1s linear forwards;
	/*transform-origin: 51.9% 45.3%;*/
}
.moveLeftholder{
	animation:moveLholder 1s linear forwards;
	/*transform-origin: 51.9% 45.3%;*/
}

/*for left side calibration*/
@keyframes movedial {
  from { left: -6%; }
  to { left: 18%; };
  
}
@keyframes movestand {
 from { left: 5%; }
  to { left: 28%; };
  
}

@keyframes moveholder {
 from { left: -8.8%; }
  to { left: 14.2%; };
  
}


.movedial{
	animation:movedial 1s linear forwards;
	/*transform-origin: 51.9% 45.3%;*/
}
.movestand{
	animation:movestand 1s linear forwards;
	/*transform-origin: 51.9% 45.3%;*/
}

.moveholder{
	animation:moveholder 1s linear forwards;
	/*transform-origin: 51.9% 45.3%;*/
}

/*for right side calibration*/
@keyframes movedialL {
  from { left: 82%; }
  to { left: 53%; };
  
}
@keyframes movestandL {
 from { left: 93%; }
  to { left: 64%; };
  
}
@keyframes moveholderL {
 from { left: 79%; }
  to { left: 50%; };
  
}


.movedialL{
	animation:movedialL 1s linear forwards;
	/*transform-origin: 51.9% 45.3%;*/
}
.movestandL{
	animation:movestandL 1s linear forwards;
	/*transform-origin: 51.9% 45.3%;*/
}
.moveholderL{
	animation:moveholderL 1s linear forwards;
	/*transform-origin: 51.9% 45.3%;*/
}


table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
tr:nth-child(even) {
  background-color: #D6EEEE;
}  
tr:nth-child(odd) {
  background-color: #F0FBCC;
} 