.theme-light {
    /*--color-primary: #0060df;*/
    --color-secondary: #fbfbfe;
    --color-button: #cbeef8;
    --color-select: #D3D3D3;
     --color-button-gris: #D3D3D3;/*LightGray*/

    --font-color: #000000;
    --color-input:#fef9e7   ;
    --color-range:#525e6b;
    --color-warning:  #fd3f3f ;/*#ff370c ;*/
  }
.theme-dark {
   /* --color-primary: #17ed90;*/
    --color-secondary: #243133;
    --color-button: #116179;
    --color-select: #696969;
    --color-button-gris: #696969; /*slateGray*/

    --font-color: #ffffff;
    --color-input:#283747 ;
    --color-range:#525e6b;
    --color-warning:  #fe8d8d;
  }


  html {
    background: var(--color-secondary);
    color: var(--font-color);
}

header {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 90%;
    height: 50px;
    padding : 5px;
    border: 1px solid var(--font-color);
    margin: 2%;
    margin-bottom: 10px;
    overflow: auto;
  }

header img {
  flex:0;
  left: 10px; 
}

header h4
{
  color:var(--color-warning);
  flex: 0.2;
  margin-left: 10px;
  min-width: 70px;
 /* text-align: left;*/
  word-break: keep-all;
}

header ul {
  flex: 1;
  margin-right: 10px;
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
}


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




#selAvion{
    color: var(--font-color);
    background-color: var(--color-button-gris);
    max-width:100px;
}

#btnTheme{
 position: absolute;
 right : 10vw;
}

#vues{
    display: block;
    float: right;
    font-size: 0.8em;
}


#main
{
  display :flex;
  justify-content: center;
  align-items: stretch;
  width: 90vw;

  padding : 5px;
  margin: 2%;
  margin-bottom: 10px;
  min-height: 50vh;
  max-height: 70vh; 
 /* height : 100%;
  max-height : 70vh;
  border: 1px solid red;/*var(--font-color);*/
}

#chargement,
#dessin,
#info {
  min-height: 0;
}

.element
{
  border: 1px solid var(--font-color);
  color : var(--color-warning);
  margin: 2px;
  padding: 8px;
 /* font-size: 1em;*/
}

#chargement{
    flex: 1;
    overflow: auto;
}

#chargement h4{
    margin-top: -8px;
    margin-bottom: 0px;
}

.rang
{
  padding : 2px;
  font-size: 0.7em;
  color : black;
}

label {
    font-size: 0.8em;
    color : var(--font-color);
}

.rang input {
  background-color: var(--color-input);
  color:var(--font-color);
  height: 10px;
  width: 50px;
  margin: 5px;
  padding:5px;
  border-width: 1px;
  border-radius: 6px;
}

#btnCalculer {
  /*margin-top: -20px;
  display: block;*/
  float: right;
}

#essence
{
  margin-top:40px;
  padding:5px;
  border: 1px solid var(--font-color);
}


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




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

/*FireFox*/
input[type="range"]::-moz-range-progress {
  background-color: royalblue; 
  height : 5px;

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

#reserve{
    font-size: 8em;
    font-style: italic;
}




#dessin{
    flex: 2;
  /*  max-width: 50%;
   max-height: 100vw;*/
}
#canevas
{
   background-color: var(--color-input);

   /*aspect-ratio: 1 /1;*/
  width: min(100%, 100%);
  /*height: auto;*/
  max-height: 100%;
}




#info{
    flex: 1;
    font-size: 0.8em;
    overflow: auto;
    color :var(--font-color);
   
}
#avion{

}

footer p {
  margin-left: 25px;
  width : 70%;
  color : var(--color-warning);
  font-size: 0.8em;
}

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