:root {
  --bodyHeightScale: 1;
}

@keyframes TemporaryShow {

  0%,
  100% {
    visibility: visible;
  }
}

@keyframes TemporaryHide {

  0%,
  100% {
    visibility: hidden;
  }
}

html {
  overflow: hidden;
}

html body {
  -webkit-user-select: none;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  transition: filter 0.2s ease;
  /* Transition pour un effet de luminosité fluide */
}

/* No idea what the above or highlight does but as most gauges have this stuff I'm not going to mess with it */
#highlight {
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 10;
}

/* Electricity is a MSFS created element that will show/hide the whole gauge to simulate turning it on or off. */
#Electricity {
  width: 100%;
  height: 100%;
}

#Electricity[state=off] {
  display: none;
}

/* Load on of the MSFS fonts */
@font-face {
  font-family: "Roboto-Bold";
  /* MSFS CODE CHANGE */
  /* Set the MSFS source to /Fonts/ . MSFS seems to be able to find the hmtl_ui directory by itself. For browser use you will need to specify the pathway */
  /*src: url("../html_ui/Fonts/RobotoMono-Bold.ttf") format('truetype'); */
  src: url("/Fonts/RobotoMono-Bold.ttf") format("truetype");

  font-weight: normal;
  font-style: normal;
}

body {
  background-color: transparent;
  /* For backlight gauges make the background transparent */
  /*font-family: Roboto, Helvetica, sans-serif;*/
}

/* MSFS CODE CHANGE */
/* Remove the # from in front of all the basic-gauge lines
Change the basic-gauge name to your own name. Must match the name in .html */

efb-virga {
  top: 0%;
  left: 0%;
  width: 100%;
  /* You can use % or vh/vw to make it scalable */
  height: 100%;
  background-color: #333334;
}

/* The following code creates the DIV. If you create all your DIV in JS the you don't need any of this. On the other hand you can create all your DIV here if you don't need any fancy graphics in your gauge. Just an example of how there are many ways to create gauges. */

efb-virga #Mainframe {
  height: 100%;
  width: 100%;
  overflow: hidden;
  color: rgb(211, 208, 208);
}

/* Basic container that we will create SVG elements inside. You can create multiple containers if you want to create a multi gauge. */
efb-virga #Mainframe #sidebar {
  background-color: #1F1E21;
  display: flex;
  height: 10%;
  /* Full-height: remove this if you want "auto" height */
  border-bottom: solid 2px;
  border-color: #00A0E4;
}

efb-virga .block-button {
  display: flex;
  justify-content: center;
  width: 85%;
  height: 100%;
  background: transparent;
}

efb-virga #Mainframe #sidebar .block-button button {
  width: 50%;
  height: 100%;
  color: #00A0E4;
  font-weight: bold;
  font-size: 200%;
  background-size: 15%;
  background-repeat: no-repeat;
  border: none;
  cursor: pointer;
}

efb-virga #Mainframe #sidebar .block-button button:hover {
  width: 50%;
  height: 100%;
  color: #00A0E4;
  font-weight: bold;
  font-size: 200%;
  background-size: 15%;
  background-repeat: no-repeat;
  background-color: #333334;
  border: none;
  cursor: pointer;
}

efb-virga #Mainframe #sidebar .block-button button.active {
  width: 50%;
  height: 100%;
  color: #00A0E4;
  font-weight: bold;
  font-size: 200%;
  background-size: 15%;
  background-repeat: no-repeat;
  background-color: #333334;
  border: none;
  cursor: pointer;
}

efb-virga #menu-aircraft {
  background: url(./Images/aircraft.svg);
  background-position: 15% 45%;
}

efb-virga #menu-checklist {
  background: url(./Images/checklist.svg);
  background-position: 25% 45%;
}

efb-virga .bordure {
  width: 70vw;
  border-bottom: 1px solid #00A0E4;
  margin-bottom: 40px;
  margin-top: 40px;
}

efb-virga .bordureBottom {
  width: 70vw;
  border-bottom: 1px solid #00A0E4;
  margin-bottom: 20px;
  margin-top: 40px;
}

efb-virga .tabs-style {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-left: 1%;
  padding-top: 0.8%;
}

efb-virga .tabs {
  color: #E0E6E9;
  display: none;
  flex-direction: column;
  position: relative;
  height: 100%;
}

efb-virga .checklistheader {
  display: flex;
  width: 99%;
  justify-content: space-evenly;
}

efb-virga #Mainframe .tabs button {
  margin-right: 1vw;
  margin-bottom: 1vh;
  padding: 13px 18px;
  background-color: transparent;
  border: 2px solid #E0E6E9;
  border-radius: 8px;
  color: #E0E6E9;
  cursor: pointer;
}

efb-virga #Mainframe .tabs button:hover {
  margin-right: 1vw;
  margin-bottom: 1vh;
  padding: 13px 18px;
  background-color: transparent;
  border: 2px solid #00A0E4;
  border-radius: 8px;
  color: #00A0E4;
  cursor: pointer;
}

efb-virga #Mainframe .tabs button.active {
  margin-right: 1vw;
  margin-bottom: 1vh;
  padding: 13px 18px;
  background-color: #00A0E4;
  border: 2px solid #00A0E4;
  border-radius: 8px;
  color: #E0E6E9;
  cursor: pointer;
}


efb-virga .tabsChecklist {
  display: none;
  justify-content: space-between;
  width: 80%;
  margin-top: 5%;
  margin-left: 7%;
  padding: 1%;
  background-color: #424144;
  border: 2px solid #1F1E21;
  border-radius: 8px;
  line-height: 2em;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

efb-virga body {
  font-family: -apple-system, ".SFNSText-Regular", "Helvetica Neue", "Roboto", "Segoe UI", sans-serif;
}

efb-virga .toggle {
  cursor: pointer;
  display: inline-block;
}

efb-virga .toggle-switch {
  display: inline-block;
  background: #ccc;
  border-radius: 16px;
  width: 58px;
  height: 32px;
  position: relative;
  vertical-align: middle;
  transition: 0.25s;
}

efb-virga .toggle-switch:before,
.toggle-switch:after {
  content: "";
}

efb-virga .toggle-switch:before {
  display: block;
  background: linear-gradient(to bottom, #fff 0%, #eee 100%);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
  width: 24px;
  height: 24px;
  position: absolute;
  top: 4px;
  left: 4px;
  transition: left 0.25s;
}

efb-virga .toggle:hover .toggle-switch:before {
  background: linear-gradient(to bottom, #fff 0%, #fff 100%);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
}

efb-virga .toggle-checkbox:checked+.toggle-switch {
  background: #00A0E4;
}

efb-virga .toggle-checkbox:checked+.toggle-switch:before {
  left: 30px;
}

efb-virga .toggle-checkbox {
  position: absolute;
  visibility: hidden;
}

efb-virga .toggle-label {
  margin-left: 5px;
  position: relative;
  top: 2px;
}

efb-virga #Ligne1 {
  display: flex;
  margin: 70px 0 70px 0;
  font-size: 130%
}

efb-virga #Ligne2 {
  display: flex;
  margin: 70px 0 70px 0;
  font-size: 130%
}

efb-virga #Ligne3 {
  display: flex;
  margin: 65px 0 65px 0;
  font-size: 130%
}

efb-virga #Ligne4 {
  margin: 70px 0 70px 0;
}

efb-virga #Ligne5 {
  display: flex;
  margin: 70px 0 20px 0;
  font-size: 130%
}

efb-virga #cover {
  position: relative;
}

efb-virga #chocks {
  position: relative;
  left: 8vw;
}

efb-virga #tanks {
  position: relative;
  left: 16vw;
}

efb-virga #rearp {
  position: relative;
  left: 24vw;
}

efb-virga #smokepod {
  position: relative;
  left: 10.5vw;
}

efb-virga #smokeBlue {
  position: relative;
  left: 16.3vw;
}

efb-virga #smokeRed {
  position: relative;
  left: 27.9vw;
}
efb-virga #gnss {
  position: relative;
}

efb-virga #cockpitrearp {
  position: relative;
  left: 8.4vw;
}

efb-virga #GNSSSide {
  position: relative;
  left: 8.4vw;
}

/*efb-virga #piloteincockpit{
      position: relative;
      left: 18.3vw;
    }*/

efb-virga #Mainframe #Ligne3 #GNSSSide {
  position: relative;
  left: 18vw;
  top: -1vw;
  font-size: 24px;
  width: 160px;
  height: 80px;
  background-color: transparent;
  border: 2px solid #E0E6E9;
  border-radius: 8px;
  color: #E0E6E9;
  cursor: pointer;
}

efb-virga #Mainframe #Ligne3 #GNSSSide:hover {
  position: relative;
  left: 18vw;
  top: -1vw;
  font-size: 24px;
  width: 160px;
  height: 80px;
  background-color: transparent;
  border: 2px solid #00A0E4;
  border-radius: 8px;
  color: #00A0E4;
  cursor: pointer;
}

/*efb-virga #adf{
      position: relative;
      left: 27.2vw;
    }*/
efb-virga #Mainframe .tabs-style .tabs #Ligne4 .range-label {
  display: flex;
  font-size: 140%;
  margin-left: 4.5%;
  margin-top: 2%;
}

efb-virga #Mainframe .tabs-style .tabs #Ligne4 .range-label .range2-label {
  position: relative;
  left: 5.5vw;
}

efb-virga #Mainframe .tabs-style .tabs #Ligne4 .range-label .range1-label {
  position: relative;
  left: 17vw;
}

efb-virga #Mainframe .tabs-style .tabs #Ligne4 .range-label .range3-label {
  position: relative;
  left: 28vw;
}

efb-virga #Mainframe .tabs-style .tabs #Ligne4 .range-label .range4-label {
  position: relative;
  left: 3.3vw;
}

efb-virga #Mainframe .tabs-style .tabs #Ligne4 .range-label .range5-label {
  position: relative;
  left: 31vw;
}

efb-virga .range {
  display: flex;
  margin-top: 2%;
}


efb-virga #LFuelTankSlider {
  position: relative;
  left: 3.5vw;
  width: 380px;
}

efb-virga #CFuelTankSlider {
  position: relative;
  left: 3.4vw;
  width: 252px;
}

efb-virga #RFuelTankSlider {
  position: relative;
  left: 3.4vw;
  width: 380px;
}

efb-virga #LAuxFuelTankSlider {
  position: relative;
  left: 3.5vw;
  width: 380px;
}

efb-virga #RAuxFuelTankSlider {
  position: relative;
  left: 21.4vw;
  width: 380px;
}

efb-virga #Mainframe .tabs-style .tabs #Ligne4 .range .range-input {
  /* removing default appearance */
  background: #ccc;
  border-radius: 15px;
  height: 10px;
}

efb-virga #Mainframe .tabs-style .tabs #Ligne4 .range .range-input::-webkit-slider-thumb {
  height: 15px;
  width: 15px;
  background-color: #ccc;
  border-radius: 50%;
  border: none;
  transition: .2s ease-in-out;
}

efb-virga #Mainframe .tabs-style .tabs #Ligne4 .range .range-input::-webkit-slider-runnable-track {
  width: 100%;
  height: 10px;
  border-radius: 15px;
  background: #ccc;;
}

efb-virga #Mainframe .tabs-style .tabs #Ligne4 .range .range-input::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 10px;
  width: var(--progress);
  background: #00A0E4;
  border-radius: 15px;
}

efb-virga #Mainframe .tabs-style .tabs #Ligne4 .range .range-input::-webkit-slider-thumb:hover {
  box-shadow: 0 0 0 10px rgba(0, 160, 228, .1)
}

efb-virga #Mainframe .tabs-style .tabs #Ligne4 .range .range-input:active::-webkit-slider-thumb {
  box-shadow: 0 0 0 13px rgba(0, 160, 228, .1)
}

efb-virga #Mainframe .tabs-style .tabs #Ligne4 .range .range-input:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 13px rgba(0, 160, 228, .1)
}

efb-virga #Mainframe .tabs-style .tabs #Ligne4 .range .LFuelTankSliderOutput,
.CFuelTankSliderOutput,
.RFuelTankSliderOutput,
.LAuxFuelTankSliderOutput {
  font-size: 18px;
  width: 50px;
  text-align: center;
  margin-left: 5%;
}

efb-virga #Mainframe .tabs-style .tabs #Ligne4 .range .RAuxFuelTankSliderOutput {
  font-size: 18px;
  width: 50px;
  text-align: center;
  margin-left: 30.5%;
}

efb-virga #Mainframe #Ligne5 button {
  font-size: 18px;
  width: 300px;
  height: 150px;
  margin-right: 1vw;
  padding: 13px 18px;
  background-color: transparent;
  border: 2px solid #E0E6E9;
  border-radius: 8px;
  color: #E0E6E9;
  cursor: pointer;
}

efb-virga #Mainframe #Ligne5 button:hover {
  font-size: 18px;
  margin-right: 1vw;
  padding: 13px 18px;
  background-color: transparent;
  border: 2px solid #00A0E4;
  border-radius: 8px;
  color: #00A0E4;
  cursor: pointer;
}

efb-virga #Mainframe #tabs button.active {
  font-size: 18px;
  margin-right: 1vw;
  margin-bottom: 1vh;
  padding: 13px 18px;
  background-color: #00A0E4;
  border: 2px solid #00A0E4;
  border-radius: 8px;
  color: #E0E6E9;
  cursor: pointer;
}

efb-virga #state-cold {
  position: relative;
  left: 10vw;
}

efb-virga #state-taxi {
  position: relative;
  left: 25vw;
}

efb-virga .tabs p {
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  margin-top: 20px;
}

efb-virga #decreaseBrightnessBtn {
  position: relative;
  left: 15vw;
  top: 0.5vw;
}

efb-virga #increaseBrightnessBtn {
  position: relative;
  left: 38vw;
  top: 0.5vw;
}

efb-virga #Mainframe #Ligne3 #openFrequenciesBtn {
  position: relative;
  left: 27vw;
  top: -1vw;
  font-size: 24px;
  width: 160px;
  height: 80px;
  background-color: transparent;
  border: 2px solid #E0E6E9;
  border-radius: 8px;
  color: #E0E6E9;
  cursor: pointer;
}

efb-virga #Mainframe #Ligne3 #openFrequenciesBtn:hover {
  position: relative;
  left: 27vw;
  top: -1vw;
  font-size: 24px;
  width: 160px;
  height: 80px;
  background-color: transparent;
  border: 2px solid #00A0E4;
  border-radius: 8px;
  color: #00A0E4;
  cursor: pointer;
}

efb-virga #Mainframe #Ligne3 #openFrequenciesBtnn.active {
  position: relative;
  left: 27vw;
  top: -1vw;
  font-size: 24px;
  width: 160px;
  height: 80px;
  background-color: #00A0E4;
  border: 2px solid #00A0E4;
  border-radius: 8px;
  color: #E0E6E9;
  cursor: pointer;
}

efb-virga #modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
}


efb-virga #modalContent {
  background-color: #333334;
  padding: 20px;
  border-radius: 8px;
  width: 400px;
  text-align: center;
}

/* Style du clavier virtuel */
efb-virga .keyboard {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* 10 touches par ligne */
  gap: 5px;
  margin-top: 10px;
}

efb-virga .key {
  padding: 10px;
  background-color: #ddd;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  margin: 1px;
}

efb-virga .key:hover {
  background-color: #00A0E4;
}

efb-virga .key:active {
  background-color: #00A0E4;
}

efb-virga .freq-input {
  background-color: #333334;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
  margin-right: 0.5vw;
  margin-bottom: 1vw;
  color: #00A0E4
}

efb-virga #Mainframe .channelClass button {
  font-size: 18px;
  width: 50px;
  height: 30px;
  background-color: transparent;
  border: 2px solid #E0E6E9;
  border-radius: 8px;
  color: #E0E6E9;
  cursor: pointer;
}

efb-virga #Mainframe .channelClass button:hover {
  font-size: 18px;
  width: 50px;
  height: 30px;
  background-color: transparent;
  border: 2px solid #00A0E4;
  border-radius: 8px;
  color: #00A0E4;
  cursor: pointer;
}

efb-virga #Mainframe .channelClass button.active {
  font-size: 18px;
  width: 50px;
  height: 30px;
  background-color: #00A0E4;
  border: 2px solid #00A0E4;
  border-radius: 8px;
  color: #E0E6E9;
  cursor: pointer;
}

efb-virga #closePopUp {
  margin-top: 1vw;
}