body {
    
    padding: 0px;
    margin-left: auto;
    margin-right: auto;
    background-color: #060607;
    width: 320px;
    font-family: helvetica, sans-serif;
    color: #d4dcea;

}

#parametres {
position: relative;
display: block;

border-radius: 10px;
border: 1px solid #646464;

}
#control {
position: relative;
display: block;

border-radius: 10px;
border: 1px solid #646464;

padding-bottom: 0px;
padding-top: 5px;
padding-left: 60px;
margin-top: 5px;
	line-height: 12px;

}
#chronodiv {
position: relative;
display: block;

border-radius: 10px;
border: 1px solid #646464;

padding-bottom: 60px;
padding-top: 10px;
padding-left: 0px;
margin-top: 5px;
	line-height: 12px;

}

#balisticinfo{
	display: none; 	
}

#btncalcul {
	position: relative;
	left: 110px;
	margin-bottom: 5px;
}

#divgraphic {
position: relative;
}

#imgboueebnw{

width: 35px;
height: 35px;

	
}

#imgFalconfleche {
position: absolute;
width: 35px;
height: 35px;
top: 75px;
	left: 7px;
	
}

#imgavhaut {
position: absolute;
width: 33px;
height: 33px;
top:7px;
left: 262px;
}

#imgavbas {
position: absolute;
width: 33px;
height: 33px;
top: 60px;
left: 262px;
}

#imgavgauche {
position: absolute;
width: 33px;
height: 33px;
top: 34px;
	left: 238px;
}

#timing{
	position: absolute;
	top:10px;
	left:10px;
}
#btn10{
	position: absolute;
	top:30px;
	left:120px;
}
#btn30{
	position: absolute;
	top:30px;
	left:12px;
	
}
#imgavdroit {
position: absolute;
width: 33px;
height: 33px;
top: 34px;
	left: 286px;
}
#chrono{
	position: absolute;
	height: 60px;
	left: 260px;
	top: 5px;
}
#chrono30{
	position: absolute;
	font-size: 24px;
	left: 220px;
	top: 30px;
	color: #67aeea;
}
#databox{
	position: absolute;
	top: 2px;
	left: 285px;
	z-index: 1;
	
}

#biroute{
	position: absolute;
	top:27px;
	left: 5px;
	height:24px;
	
}
#nord{
	position: absolute;
	left: 10px;
	height: 20px;
	top: 5px;
}
#avionposdata{
	position: absolute;
	color: lightgreen;
	font-size: 20px;
	left: 55px;
	top: 94px;
	border: 1px solid lightgreen;
	padding: 3px;
	border-radius:3px;

}

#graphic {
position: relative;

z-index: 0;
margin-top: 5px;
display: block;
background-color: #151E26;
border-radius: 10px;
border: 1px solid #646464;
}

#deplacement {
position: absolute;
z-index: 0;
top: 10px;
left: 100px;
font-size: 150%;
font-weight: bold;
color: white;


}

.data{
	font-size: 12px;
	font-style: italic;
	
}

input[type=text] {
  background-color: #060607;
border: solid 1px white;
border-radius: 5px;
color: lightblue;
font-size: 15px;
font-weight: bold;
  
}

.button {
border: 1px solid #646464;
border-radius: 10px;
width: 85px;
text-align:center;
font-weight: bold;

}

.button:hover {
opacity: 0.8;
}

.imgbtnav:hover {
opacity: 0.5;
}

#btnpredict {
background-color: #2983ad;
}

#btnadjust {
margin-top: 50px;
width: 200px;

margin-bottom: 10px;

}

#btngolaunch {
margin-top: 10px;
background-color: #38a122;
}

#boutons {
position: absolute;
z-index: 0;
top: 10px;
left: 220px;


}

input {
width: 35px;
}

#imgbouee {
     display:none;
    position: absolute;
    z-index: 1;
    width: 30px;
    height: 30px;
    	top: 10px;
	left: 10px;
}
#imgempty{
	 height: 15px;
width: 132px;
margin-left: 100px;
margin-top: 5px;
}
#imgcsaram4 {
     display: none;
    position: absolute;
    z-index: 1;
    width: 10px;
    height: 87px;
    	top: 10px;
	left: 10px;
}
#imgcsaram1025 {
     display: none;
    position: absolute;
    z-index: 1;
    width: 15px;
    height: 246px;
    	top: 10px;
	left: 10px;
}

.cercle {
     display: none;
    z-index: 1;
    position: absolute;
    border: 1px solid black;
    opacity: 0.66;
    width: 26px;
    height: 26px;
    border-radius: 13px;
    background: #66c437;
	top: 100px;
	left: 100px;
}
#imgavion{
     display:none;
    z-index: 1;
    position: absolute;
    width: 50px;
    height: 50px;
   	top: 0px;
	left: 0px;
}
.green {
color: green;

}
.gray {
color: gray;
font-size: 13px;

}
#graphVent{
	position: absolute;
	top:55px;
	left:0px;
}
#graphCap{
	position: absolute;
	top:358px;
	left:-7px;

}
#graphH{
	position: absolute;
	top:373px;
}
#graphVi{
	position: absolute;
	top:388px;
}
 /* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 21px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: green;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(16px);
  -ms-transform: translateX(16px);
  transform: translateX(16px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 10px;
}

.slider.round:before {
  border-radius: 50%;
} 


/* Modal Header */
.modal-header {
    padding: 2px 16px;
    background-color: #99ccff;
    color: white;
}

/* Modal Body */
.modal-body {padding: 2px 16px;}

/* Modal Footer */
.modal-footer {
    padding: 2px 16px;
    background-color: #99ccff;
    color: white;
}

/* Modal Content */
.modal-content {  
    margin: 2% auto; /*15% from the top and centered */
    padding: 20px;
    position: relative;
    background-color: #fefefe;
    margin-left: auto;
	margin-right: auto;
    padding: 0;
    border: 1px solid #888;
    width: 300px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}