@charset "utf-8";
/* CSS Document */
html,
body {
   margin:0;
   padding:0;
   width:100%;
   height:100%;
   overflow-x:hidden;
   overflow-y:auto;
   
  
}
#container {
   min-height:100%;
   position:relative;
}

#header {
   background:#ff0;
   padding:10px;
   white-space:nowrap;
   
}
#main {
 
   padding-bottom:60px;   /* Height of the footer */
   white-space:nowrap;
}

#toolico {
 float:left; 
	 
	margin-top:1%; 
	margin-bottom:1%;
	color:white;
    border-radius: 35%;
    background: yellowgreen;
      line-height: 7vh;
    width: 10vw;
    height: 7vh; 
    text-align:center;
    display: inline-block;
font-weight: bold;
font-size: 8px; font-size: 1vw;}
font-family: Arial, Helvetica, sans-serif;
   white-space:nowrap;
}

#controls{
	
	white-space:normal
	
	}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}

.loader {
   -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
 
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


	
	
table
{
     border-collapse:collapse;
	 border: 1px solid black;
	 
}

td
{
   
   border: 1px solid black;
	
}


button{

	margin:1%;
	
	}

#myTextarea:focus {
    border-style: solid;
	border-width: 5px;
	border-color: #7BE500;
	

}

#myTextarea1:focus {
    border-style: solid;
	border-width: 5px;
	border-color: #7BE500;
	

}

#tll {
	float:left; 
	height:7vh; 
	width:10%; 
	margin-top:1%; 
	margin-bottom:1%;
	 
	border-style: double; 
	background-color:gray; 
	border-width:thick; 
	border-color:silver;
	
	}


#prec:focus {
    border-style: solid;
	border-width: 5px;
	border-color: #7BE500;
	

}






textarea{
	border: 1px solid black;
	 display:inline-block;
	 font-size:9px;
	overflow:hidden;
	resize: none;
	width:10%;
	height:60%;
	background-color: #F3FFDA;
	border-radius:20%;
   border-style:dashed;
   padding:3px;
   vertical-align: middle;
   text-align:center;
   
   
}


input {
		display:inline;
	
		max-width: 5%;
	min-width:55px;
    	border: 3px solid #727272;
}

#prec {
		display:inline;
	
		max-width: 5%;
	min-width:55px;
    	border: 3px solid #727272;
}
#status{
	
  text-align: center;
		background-color:yellowgreen;
	
	
	 
	
	}
	

	
	
.tooltip3 {
    position: relative;
    display: inline-block;
   
}

.tooltip4 {
    position: relative;
    display: inline-block;
   
}

.tooltip3 .tooltiptext3 {
    visibility: hidden;
    width: 350px;
	
    background-color: yellowgreen;
    color: black;
    text-align: left;
    border-radius: 6px;
    padding: 5px 0;
    
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
  bottom: 100%;
    left: 50%;
    margin-left: -60px;
   
}

.tooltip4 .tooltiptext4 {
    visibility: hidden;
    width: 420px;
    background-color: yellowgreen;
    color: black;
    text-align: left;
    border-radius: 6px;
    padding: 5px 0;
    
   /* Position the tooltip */
     position: absolute;
    z-index: 1;
   top: 100%;
    left: 50%;
	margin-left: -60px;
   

}

.tooltip3:hover .tooltiptext3 {
    visibility: visible;
}

.tooltip4:hover .tooltiptext4 {
    visibility: visible;
}