#loading {
    position: fixed;
    inset: 0;
    background: rgba(255,255,255,0.95);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 99999;
}

.spinner {
    width: 60px;
    height: 60px;
    border: 8px solid #ddd;
    border-top: 8px solid #0078d4;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}


#metfrance {
  height: 620px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#map1 {
    width: 100%;
    height: 420px;
}

div#gauges1,
div#gauges {
  display: flex;
  justify-content: center;
  align-items: center;
}

div#gauge1,
div#gauge2,
div#gauge3 {
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

input[type="number"] {
  width: 50px;
}

/* ---------------- TABLEAUX ---------------- */

table {
  border-style: solid;
  border-color: #000000;
  height: 20px;
  width: 1000px;
}

.ID,
.NR {
  width: 30px;
  text-align: center;
}

.Menaces,
.Erreurs,
.Contremesures {
  width: 160px;
  text-align: center;
}

/* ---------------- CLASSES TEMS ---------------- */

.class01,
.class02,
.class03 {
  border-style: solid;
  border-color: #000000;
  background-color: #d3c39a;
  text-align: center;
  font-weight: bold;
}

.class03 {
  width: 160px;
}

.class04,
.class05,
.class06 {
  border-style: solid;
  border-color: #000000;
  background-color: #3aa3e4;
  text-align: center;
  font-weight: bold;
}

.class07,
.class08,
.class09 {
  border-style: solid;
  border-color: #000000;
  background-color: #b28ce4;
  text-align: center;
  font-weight: bold;
}

.class09 {
  width: 160px;
}

.class10,
.class11,
.class12 {
  border-style: solid;
  border-color: #000000;
  background-color: #39cddd;
  text-align: center;
  font-weight: bold;
}

.class12 {
  width: 160px;
}

/* ---------------- NOTAMS ---------------- */


#notam1,
#notam3,
#notam5,
#notam7,
#notam9,
#notam11 {
  padding: 10px;
  border-radius: 8px;
  background-color: #000000;
  font-family: Arial, sans-serif;
  font-size: 13px;
  font-weight: bold;
  color: #ffffff;
}

#OBSTACLESENROUTE,
#notamO2,
#notamO4,
#notamO6,
#notamO8,
#notamO10,
#notamO12 {
  padding: 10px;
  border-radius: 8px;
  background-color: #dda3dd;
  font-family: Tahoma, sans-serif;
  font-size: 12px;
  color: #000000;
   font-weight: normal;
}

#NOTAMENROUTE,
#notam2,
#notam4,
#notam6,
#notam8,
#notam10,
#notam12 {
  padding: 10px;
  border-radius: 8px;
  background-color: #a4b9cd;
  font-family: Tahoma, sans-serif;
  font-size: 12px;
  color: #000000;
   font-weight: normal;
}

/* ---------------- METEO ---------------- */

#meteo,
#meteo2 {
  padding: 10px;
  border-radius: 8px;
  background-color: #d3c39a;
  font-family: Tahoma, sans-serif;
  font-size: 12px;
}

#meteo {
  color: #000000;
}

#meteo2 {
  color: #353848;
}

/* ---------------- GENERAL ---------------- */

* {
  margin: 0;
  padding: 0;
}

#menu-tab {
  font-family: "Trebuchet MS", Geneva;
  font-size: 11pt;
  color: black;
}

#menu-tab a {
  color: grey;
  text-decoration: none;
}

#menu-tab a:hover {
  color: green;
}

#page-wrap {
  width: 99%;
  margin: 5px auto;
}

/* ========================================================= */
/* ====================== ONGLETS ========================== */
/* ========================================================= */

.tabs {
  position: relative;
  min-height: 800px;
  margin: 5px 0;
  white-space: nowrap;
}

.tab {
  display: inline-block;
  vertical-align: top;
}

.tab label {
  display: inline-block;
  background: rgba(190, 185, 185, 0.97);
  padding: 10px;
  border: 1px solid #000000;
  margin-right: 2px;
  position: relative;
  cursor: pointer;
  font-weight: bold;

  border-radius: 10px 10px 0 0;
  box-shadow: 3px -3px 6px rgba(0, 0, 0, 0.71);
}

.tab input[type="radio"] {
  display: none;
}

/* ---------------- CONTENU ONGLET ---------------- */

.content {
  position: absolute;
  top: 42px;
  left: 0;
  right: 0;

  background: white;

  padding: 20px;

  border: 1px solid #ccc;
  border-radius: 0 10px 10px 10px;

  box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.41);

  overflow-y: auto;

  display: none;
}

/* ---------------- ONGLET ACTIF ---------------- */

.tab input[type="radio"]:checked + label {
  background: rgba(255, 30, 39, 0.97);
  z-index: 2;
}

.tab input[type="radio"]:checked + label + .content {
  display: block;
  z-index: 1;
}
/* ---------------- TEMS ---------------- */
.tems-table {
  width: 95%;
  margin: 25px auto;
  border-collapse: collapse;
  table-layout: fixed;
  border: 3px solid #000;
  font-size: 14px;
}

.tems-table th,
.tems-table td {
  border: 1px solid #fff;
  padding: 10px;
  text-align: center;
  vertical-align: middle;
  word-wrap: break-word;
  white-space: normal;
}

.tems-table th {
  font-weight: bold;
  font-size: 16px;
}

.meteo-table th,
.meteo-table td {
  background-color: #d3c39a;
}

.masse-table th,
.masse-table td {
  background-color: #3aa3e4;
}

.fh-table th,
.fh-table td {
  background-color: #b28ce4;
}

.env-table th,
.env-table td {
  background-color: #39cddd;
}
/* ---------- Sélecteur Tour de piste ---------- */

.tdp-selector{
    display:inline-flex;
    border:1px solid #bfc5ca;
    border-radius:8px;
    overflow:hidden;
    font-family:Arial,Helvetica,sans-serif;
    font-size:13px;
}

.tdp-btn{
    padding:6px 16px;
    border:none;
    background:#f5f5f5;
    color:#444;
    cursor:pointer;
    transition:.15s;
    font-weight:bold;
    min-width:110px;
}

.tdp-btn:hover{
    background:#e8e8e8;
}

.tdp-btn.active{
    background:#2b7cff;
    color:white;
}

.tdp-btn:first-child{
    border-right:1px solid #bfc5ca;

}

.btn-paf {
    display: inline-block;
    padding: 7px 18px;
    border: 1px solid #2b7cff;
    border-radius: 8px;
    background: #2b7cff;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
}

.btn-paf:hover {
    background: #1d63d8;
    border-color: #1d63d8;
}

.btn-paf:active {
    transform: translateY(1px);
}

.btn-paf:disabled {
    background: #bfc5ca;
    border-color: #bfc5ca;
    cursor: default;
}

#NOTAMENROUTE {
    font-weight: normal;
}

#OBSTACLESENROUTE {
    font-weight: normal;
}