.theme-light {
    --color-primary: #0060df;
    --color-secondary: #fbfbfe;
    --color-button: #cbeef8;
     --color-button-gris: #D3D3D3;/*LightGray*/
    --color-accent: #fd6f53;
    --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-button-gris: #696969; /*slateGray*/
    --color-accent: #12cdea;
    --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;
  }

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

#nomAvion{
  color:red;  
  margin: 5px;
}

header h4
{
  color:red;
  flex: 0.2;
}

#selAvion {
  color: var(--font-color);
  background-color: var(--color-input);
}

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

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

.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);
}

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


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

#btnPrint{
  margin-left: 70px;
}

#btnTheme{
  background-color:var(--color-button-gris);
}

#vues{
  font-size: 0.7em;
  color: var(--font-color);
  margin-left:4px;
  margin-top: 50px;
}

#main
{
  display :flex;
  flex-direction: row;
  justify-content: center;
  align-items: top;
  width: 90%;
  height: 90%;
  padding : 5px;
  margin: 2%;
  margin-bottom: 10px;
}

#essence
{
  /*background-color:var(--color-button-gris);
  margin-top:20px;*/
  margin-top:20px;
  padding:5px;
  border: 1px solid var(--font-color);
  
    

}


.element
{
 
  border: 1px solid var(--font-color);
  min-height:  250px;
  max-height: 550px;
  color :  var(--font-color);
  
  margin: 2px;
  padding: 8px;
  font-size: 1em;
}

.element:nth-child(1){
  flex:1;
   color :  var(--font-color);
}

.element:nth-child(2){
  flex:2;
}

.element:nth-child(3){
  flex:1;
  overflow: auto;
   color :  var(--font-color);
}

#datBase{
  background-color: var(--color-input);
  color: var(--font-color);
}

#name{
  color: var(--font-color);
}

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

.rang input {
  background-color: var(--color-input);
  color: var(--font-color);
  height: 10px;
  width: 20%;
  margin: 5px;
  padding:5px;
  border-width: 1px;
  border-radius: 6px;
}
/*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-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 : 6px;

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

}
/*FireFox*/

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



#canevas
{
  background-color: var(--color-input);
  width: 100%;
  aspect-ratio: 1 / 1; 
  max-height: 100%;
  margin: auto;
  z-index: 1;
}

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

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