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


.map
 {
  width: 620px;
  height: 420px;
  display: flex;
  justify-content: center;
  align-items: center;
}
div#gauges1 {
  display: flex;
  justify-content: center; /* Centre horizontalement */
  align-items: center; /* Centre verticalement */



}
div#gauges {

  display: flex;
  justify-content: center; /* Centre horizontalement */
  align-items: center; /* Centre verticalement */



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

div#gauge2
{
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}
div#gauge3
 {
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}
input[type="number"] {
  width: 50px;
}



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;

}



.class01
{
  border-style: solid;
  width: 160px;
  border-color: #000000;
  background-color: #d3c39a;
  text-align: center;
  font-weight: bold;
}

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

.class03
{
  border-style: solid;
  width: 160px;
  background-color: #d3c39a;
  text-align: center;
  font-weight: bold;
  
}

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

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

.class06
{
  background-color: #3aa3e4;
  text-align: center;
  font-weight: bold;
  text-align: center;
  font-weight: bold;
}

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

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

.class09
{
  border-style: solid;
  width: 160px;
  background-color:#b28ce4;
  text-align: center;
  font-weight: bold;
  
}
.class10
{
  border-style: solid;
  border-color: #000000;
  background-color: #39cddd;
  text-align: center;
  font-weight: bold;
}

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

.class12
{
  border-style: solid;
  width: 160px;
  background-color:#39cddd;
  text-align: center;
  font-weight: bold;
  
}


 #notam1, #notam3, #notam5, #notam7, #notam9, #notam11 {

         padding: 10px;
        border-radius: 8px;
        background-color: #000000  ;
 font-family: Arial, sans-serif;
 text-decoration : none;
        font-size: 13px;
        font-weight : bold;
        text-decoration : none;
        color: #e22a2a;
 color: #ffffff;


      }

#notamO2, #notamO4, #notamO6, #notamO8, #notamO10, #notamO12 {

       padding: 10px;
      border-radius: 8px;
      background-color: #973797  ;
font-family: Tahoma, sans-serif;
text-decoration : none;
      font-size: 12px;
      font-weight : normal;
      text-decoration : none;
      color: #000000;
color: #000000;
}

 #notam2, #notam4, #notam6, #notam8, #notam10, #notam12 {

         padding: 10px;
        border-radius: 8px;
        background-color: #91bca0  ;
 font-family: Tahoma, sans-serif;
 text-decoration : none;
        font-size: 12px;
        font-weight : normal;
        text-decoration : none;
        color: #e22a2a;
 color: #000000;


      }

#meteo {

         padding: 10px;
        border-radius: 8px;
        background-color: #d3c39a;
 font-family: Tahoma, sans-serif;
 text-decoration : none;
        font-size: 12px;
        font-weight : normal;
        text-decoration : none;
        color: #e22a2a;
 color: #000000;


      }

#meteo2 {

         padding: 10px;
        border-radius: 8px;
        background-color: #d3c39a;
 font-family: Tahoma, sans-serif;
 text-decoration : none;
        font-size: 12px;
        font-weight : normal;
        text-decoration : none;
        color: #e22a2a;
 color: #353848;


      }


* {
	margin: 0;
	padding: 0;
  
	}
#menu-tab {
	/*background: white;*/
    font-family: 'trebuchet ms', geneva; 
	font-size: 11pt;
	color:black;
	}
	
#menu-tab a {
color: grey;
font-weight: normal;
font-style: normal;
text-decoration: none;
font-variant: normal;
}
#menu-tab a:hover{
color: green;

}
	
/*--------------Dimensions tableau--------------*/

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

.tabs {
      position: relative;   
      min-height: 800px; /* This part sucks */
      clear: both;
      margin: 5px 0;
      
    }
    .tab {
      float: left;
    }
    .tab label {
      background: rgba(190, 185, 185, 0.97);
      padding: 10px; 
      border: 1px solid #000000; 
      margin-left: -1px; 
      position: relative;
      left: 1px; 
     
      

      border-radius: 10px 10px 0px 0px;
      box-shadow: 3px -3px 6px rgba(0, 0, 0, 0.71);
    }
    .tab [type=radio] {
      display: none;   
      
    }
	
/*--------------Contenu article onglet--------------*/
    .content {
      position: absolute;
      top: 28px;
      left: 0;
      background: white;
      right: 0;
      bottom: 0;
      padding: 20px;
      border: 1px solid #ccc; 
      border-radius: 0px 10px 10px 10px;
      box-shadow:6px 6px 10px rgba(0, 0, 0, 0.41);
      overflow: hidden;
	  overflow-y: auto;
	  margin-bottom: -10px;
    }
    .content > * {
      opacity: 0;
      
      -webkit-transform: translate3d(0, 0, 0);
      -ms-transform: rotate(45deg);     /* Pour Internet Explorer */
      transform: rotate(45deg);
      
      -webkit-transform: translateX(-10%);
      -moz-transform:    translateX(-10%);
      -ms-transform:     translateX(-10%);
      -o-transform:      translateX(-10%);
      
      -webkit-transition: all 0.6s ease;
      -moz-transition:    all 0.6s ease;
      -ms-transition:     all 0.6s ease;
      -o-transition:      all 0.6s ease;
    }
	
/*-------------Onglets actifs--------------*/

    [type=radio]:checked ~ label {
      background: rgba(255, 30, 39, 0.97);
      
      border-bottom: 1px solid white;
      z-index: 2;
    }
    [type=radio]:checked ~ label ~ .content {
      z-index: 1;
    }
    [type=radio]:checked ~ label ~ .content > * {
      opacity: 1;
      -webkit-transform: translateX(0);
      -moz-transform:    translateX(0);
      -ms-transform:     translateX(0);
      -o-transform:      translateX(0);
    }