.theme-light {
    /*--color-primary: #0060df;	 bleu roy*/
    --color-fondHTML: whitesmoke; /*gris très pâle*/
    --color-button: cornflowerblue;	/*bleu pâle*/
    --color-fond-button: #ECFCCA;;	/**/
    /*--color-accent: orangered;	*//*rouge orangé*/
    --font-color: black;
    --color-input:lightYellow   ;	/*jaune pâle*/
    --color-range:#525e6b;	/*bleu gris sombre*/
    --color-warning:  red ;/*#rouge*/
    --color-fondRange:#DADADD;	/*gris*/
    --color-fondFormulaire:#gray;	/*gris*/
    --color-labelZp:#ebedef;	/*red*/
    --color-showP:blue;	
    --color-affichagePT:red; 
    --color-fondCnvs:lightyellow;	
  }
.theme-dark {
/*--color-primary: #17ed90;	gris*/
    --color-fondHTML: black;	/*gris moyen*/
    --color-button: white ; /*blanc*/
    --color-fond-button: #104E64;;/* #116179*/
    /*--color-accent: #12cdea;	*//*gris moyen*/
    --font-color: white; /*noir*/
    --color-input:navy ; /*gris bleuté*/
    --color-range:#525e6b; /*gris bleuté moyen clair*/
    --color-warning:  orangered ; /*rouge pâle*/
    --color-fondRange:#4E4F56;	/*gris moyen*/
    --color-fondFormulaire:#222225; /*gris bleu moyen*/
    --color-labelZp:red;	
    --color-showP:white;	
    --color-affichagePT:lime;
    --color-fondCnvs:#222225;	

  }

  html {
    background: var(--color-fondHTML);
    color: var(--font-color);
    margin: 0;
  	padding: 0;
}

body {
	  margin: 0;
  	padding: 0;
}

#cnvs1 {
  display: block;
  width: 90%;
  max-width: 1000px;   /* largeur maximale */
  margin: 0 auto;      /* centrage horizontal */
  aspect-ratio: 16 / 9;
  background: var(--color-fondCnvs);
}

#formulaire
{
	display: flex;
	flex-direction: row;
	width: 100%;
	height:100%;
	background-color: var(--color-fondFormulaire);
	overflow: auto;
	justify-content: space-around;
}

#choix
{
	/*flex: 1;*/
	min-width: 100px;
	color: var(--font-color);
	height:100%;
	margin: 40px 5px 10px 5px;
	padding: 5px 5px 10px 5px;
	background-color:  var(--color-fondRange)  ;
	font-size: 0.8em;
}

#btnRetour
{
	display:block;
	width: 82px;
	height:20px;
	margin-top: -35px;
	margin-bottom: 15px;
	color: white;
	background-color: #104E64;/*#5f6a6a  ; */
	border-bottom: 1px outset #760001;
	border-radius: 6px;
	font-size: 0.9em;
	font-weight: bold;
}

#lancer
{
	display: flex;
	flex-direction: column;
	max-height: 60px;
	max-width: 100px;
	text-align: center;
	margin: 10px 15px 5px 25px;
	padding: 5px;
	background-color: var(--color-fondRange);
	
}

.btnsLancer{
		width: 60px;
		height:22px;
		margin:5px;
		text-align: center;
		text-decoration: none;
		border-width: 1px;
		border-radius: 6px;
		color :var(--font-color);
		font-size: 0.8em;
		//font-weight: bold;
}


#btnValider
{
	margin-top: 5px;
	border-width: 2px;
	
	background-color: var(--color-fond-button);
	color : var(--font-color);
}

#btnImprimer 
{
	margin-top: 5px;
	border-width: 2px;
	
	color : var(--font-color);
	background-color:  var(--color-fond-button);
	
}

/*#btnImprimer :hover
{
	width: 90px;
	margin: 2px 5px 2px 5px;
	font-size: 0.8em;
	padding-left: 5px;
	padding-right: 5px;
	border-radius: 4px;
}*/


#immat {
		white-space: pre;
		font-size: 0.8em;
		display: block; 
		margin-left: 5%;
		 margin-bottom: 10px;
}


#info, #info2{
	white-space: pre;
	font-size: 0.77em;
	padding-right: 40px;
	margin-left: 25px;
	display: none;
}

#param
{
	/*flex:2;*/
	width : 480px;
	margin-top: 10px;
	margin-left: 10px;
	font-size: 0.9em;
	
}



#btnZp, #btnZd
{
	height:22px;
	font-size: 0.9em;
	border-bottom: 1px outset #760001;
	border-radius: 6px;
	font-size: 0.8em;
}

.affichagePT{
	background-color: var(--color-affichagePT);
}


#labelShowP{
  color:var(--color-showP);

}

#showZp, #showZd 
{
	width: 55px;
	border-style: none;
	font-size: 0.9em;
	font-weight: bold;
	color:var(--color-affichagePT);
}

#tpISA {
	width: 120px;
	border-style: none;
	font-size: 1em;
	font-weight: bold;
	color:var(--color-affichagePT);
}




.inputPerf
{
	margin: 5px;
	font-size: 0.8em;
	color:var( --font-color);
	padding-left: 5px;
	padding-right: 5px;
	text-decoration: none;
	border-radius: 4px;
	background-color: var(--color-input);
}

.smallButton
{
  font-size: 1em;
  color: var(--font-color);
  padding-left: 5px;
  padding-right: 5px;
  margin:2px;
  text-decoration: none;
  border-bottom: 1px outset #760001;
  border-radius: 4px;
  background-color: var(--color-button);
}



#qnh {width: 50px;}

#zTerrain {width: 35px;}

#tp {width: 25px;}	

#vent {width: 20px;}

#masse {width: 40px;}







#dessinPerf
{
	width :750px;
	height:480px;
	margin:auto;
	background-color: var(--color-input);
}

#warning{
	font-size: 0.75em;
	margin-top: 20px;
	margin-left: 25px;
	color:red;
	text-align: center;
}
	

#zAtteint{

	display : flex;
	margin:auto;
	/*position: absolute;
	
	left:30%;
	top : 18%;*/
	min-width: 350px;
	max-width: 450px;
	font-size: 0.8em;
	color:var(--font-color);
}
#forZA
{
	flex:1;
	text-align: right;
	margin-right: 5px;
}

#zA
{
	flex:3;
	max-width: 160px;
}


#cible {
	flex:2;
	width: 20px;
	border-style: none;
	font-size: 0.8em;
	color:var(--font-color);
	background-color: transparent;
}
/*#cible
{
	flex:1;
	color:var(--font-color);
	background-color: transparent;
}*/

/*Chrome*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
    input[type='range'] {  /*Chrome et FF*/
      overflow: hidden;
      width: 150px;
      height:16px;
      appearance: slider-horizontal;
      background-color: var(--color-fondHTML);/*fixe fond aussi pour FF*/
    }
    
    input[type='range']::-webkit-slider-thumb {
      cursor: ew-resize;
     background: green;
    }
} /*Chrome*/

/*FF*/
input[type="range"]::-moz-range-progress {
  background-color: blue; 
  height : 6px;

}
input[type="range"]::-moz-range-track {  
  background-color: lightblue;/*var(--color-input);*/
  height : 6px;
  border: 1px solid black;/*var(--color-range)*/
  border-radius: 3px;

}

#infoBas
{
	font-size: 0.9em;
	color:var(--color-warning);
	text-align: center;
	margin-top: 35px;
}

#alertePrint
{
	color: var(--color-fondHTML);  /*243133*/
}