/* This HTML page and script files are developed by
    Piyali Chattopadhyay
    Project Scientist-Technical,
    Virtual Labs IIT Kharagpur.*/


/*.col-md-5{
	
    width: 41.67%;
    min-width: 231px;
    float:left;
    /*position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
	background-color: none;
    text-align: center;
}

/*div.col-xs-6:nth-child(1){
    background-color: rgb(0,255,0);
}*/



/*.col-md-5 img{
    max-width: 100%;
}*/
.img-container {
    display: inline-block;
    position: relative;
}


.pipe {
	background-color: rgb(0 0 0 / 0%);;
	border: 2px solid none;
	position: absolute;
	width: 24px;
		height: 0px;
				
		
}

#cart{
		width:16%;
		height:18%;
		position:absolute;
		top: -6.5%;
		left: 43.7%;
		
	
}

#pend{
		width:10%;
		height:45%;
		position:absolute;
		top: -7.5%;
		left: 47.7%;
	transform-origin: 50% 20%;
      transition: transform 10s linear forwards;			
}

#bk{
		position:absolute;
		top: -18%;
		left: 85%;
		z-index: 0;
	
}

#ponoff{
		position:absolute;
		width:5%;
		height:11%;
		top: 60%;
		left: 33%;
		z-index: 10;
	
}

#sw{
		position: absolute;
    width: 3.5%;
    height: 10%;
    top: 28%;
    left: 83%;
    z-index: 10;
	
}

#simubtn{
	position: absolute;
    top: 76%;
    left: 1%;
    
}

#compbtn{
	position: absolute;
    top: 76%;
    left: 34%;
    
}
#cbtn{
	position: absolute;
    top: 76%;
    left: 12.5%;
    
}
#tbtn{
	position: absolute;
    top: 76%;
    left: 20.5%;
    
}
#rbtn{
	position: absolute;
    top: 76%;
    left: 52%;
    
}

#con{
		width:6%;
		height:11%;
		position:absolute;
		top: 59.5%;
		left: 42%;
		z-index: 10;
		
	
}
#coff{
		width:6%;
		height:11%;
		position:absolute;
		top: 59.5%;
		left: 51.2%;
		z-index: 10;
			
}

#holder{
	
		width:4%;
		height:6%;
		position:absolute;
		top: -1.5%;
		left: 50.2%;
		border-radius:50%;
		opacity:0.5;
		background-color:black;
	    z-index:1;
	
}

#pendset{
	
		width:100%;
		height:100%;
		position:absolute;
		top: -0.5%;
		left: 0.2%;
			
}


	
#Control_Params {
    display: none;
    position: absolute;
    top: 22%;
    left: 93.5%;
    width: 35%;
    height: 90%;
    border: 2px solid red;
    background-color: #e5e6ed;
    text-decoration: left;
    text-align: left;
    padding: 10px;
    color: red;
}

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

/*-----------------------------for normal movement of pendulum------------------------*/
.movependulum{
	animation:moveIt 2.5s ease-in-out infinite;	
}

@keyframes moveIt {
  0%, 100% {
    transform: rotate(45deg);
	transform-origin:50% 0%;
  }
  50% {
    transform: rotate(-45deg);
	transform-origin:50% 0%;
  }
}
/*---------------------------------------------------------------------*/

/*-----------------------------for inverted pendulum movement--------------------*/	
.invpendulum{
	animation:invpendulum 2s linear forwards;	
}

 @keyframes invpendulum {
  0% {
    transform: rotate(-45deg);
	transform-origin:50% 20%;
  }
  50% {
    transform: rotate(-75deg);
	transform-origin:50% 20%;
  }
  
  90% {
    transform: rotate(-90deg);
	transform-origin:50% 20%;
  }
  
   100% {
    transform: rotate();
	transform-origin:50% 20%;
	  } 
   from {left: 47.7%;}
    to   {left: 46%;}
}	 


/*------------------------------------------------------------------------*/

/*-----------------------------for making inverted pendulum fall after simulation---------------------------*/	
.invpendfall{
	animation:invpendfall 2s linear forwards;	
}

@keyframes invpendfall {
  0% {
    transform: rotate(275deg);
	transform-origin:50% 20%;
  }
  30% {
    transform: rotate(360deg);
	transform-origin:50% 20%;
  }
  
  50% {
    transform: rotate(450deg);
	transform-origin:50% 20%;
  }
  
  70% {
    transform: rotate(280deg);
	transform-origin:50% 20%;
  }
  90% {
    transform: rotate(400deg);
	transform-origin:50% 20%;
  }
  
  100% {
    transform: rotate(360deg);
	transform-origin:50% 20%;
	  }
   /*from {left: 47.7%;}
    to   {left: 46%;}*/
}	
/*-------------------------------------------------------------------------*/	
	

 #b2{
display:block;
position: absolute;
top: 3.3%;
left: 90%;
width: 4%;
height: 9%;
pointer-events:auto;
 }  
  
 
  
 #c2{
display:none;
position: absolute;
top: 3.3%;
left: 18.5%;
width:4%;
height: 8%;
 }  
  
 
  
#r2{
display:none;
position: absolute;
top: 3.3%;
left: 9.5%;
width: 3%;
height: 7%;
 }   
  
 #stbc{
display: block;
    position: absolute;
    top: 41%;
    left: 54%;
    width: 13%;
    height: 15%;
 }  
  
.fontCss{
font-family:'Bodoni MT';
font-size:20px;
font-style:italic;
}
.fontCss2{
font-family:'Bodoni MT';
font-style:italic;
}
.fontCssp{
font-family:'Bodoni MT';
font-size:18px;
font-style:italic;
}
.supsub {
    display: inline-block;
}

.supsub sup,
.supsub sub {
    position: relative;
    display: block;
    font-size: .5em;
    line-height: 1.2;
}

.supsub sub {
    top: .3em;
}