/* APP --------------------------------------------------------------------------------------------------------*/

@font-face {
    font-family: "Gotham";
    src: url('/assets/GothamLight.otf'),
    url('/assets/GothamLight.otf'); /* IE */}

/*body {    background-color:#app12-ececec;    font-family:Gotham,arial, sans-serif;    color: #app12-777;} */

body {
  /*background-color: #app12-f2f2f2;*/
  background-color:#ececec;
  /*font-family:Gotham,arial, sans-serif;*/
  /*color: #app12-777;*/
  margin: 5%;


}

h4 {
    display: block;
    margin-block-start: 0.2em;
    margin-block-end: 0.2em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}


.app__content {
  border-radius: 5px;
  background-color: #f9f9f9;
  margin: 10px;
  padding: 15px;
  position: relative;
  box-shadow: 2px 2px 2px lightgrey;
}

.header{
    background-color: #F9F9F9;
    margin: 10px;
    padding: 15px;
    /*border-style: solid;
    border-width: 1px;*/
    position: relative;
    height: 100px;
    box-shadow: 2px 2px 2px lightgrey;
}

.title{
    margin-top:40px;
    text-align: center;
    width: 85%;
    height: 100px;

}

.logo{
    width: 20%;
    height: 100px;
    float: left;
}

#app12-accueil{
    height: 100px;
    float: right;
}

#app12-accueil-icon{
    vertical-align: middle;
    margin-right: 30px;
    margin-top: 25%
    }

/* TAB "last hour" -----------------------------------------------------------------------------------------------*/

.last20min {
    border-radius: 5px;
    background-color: #f9f9f9;
    margin: 10px;
    padding: 15px;
    position: relative;
    box-shadow: 2px 2px 2px lightgrey;
}

.mini_container {
    font-weight: bold;
    text-align: center;
    border-radius: 5px;
    background-color: #f9f9f9;
    margin: 10px;
    padding: 15px;
    position: relative;
    box-shadow: 2px 2px 2px lightgrey;
}

.container_lvl{
    font-weight: bold;
    text-align: center;
    border-radius: 5px;
    background-color: #9f9f9;
    margin: 10px;
    padding: 15px;
    position: relative;
    box-shadow: 2px 2px 2px lightgrey;

}


.mini_container_pie {
    font-weight: bold;
    text-align: center;
    border-radius: 5px;
    margin: 10px;
    padding: 15px;
    box-shadow: 2px 2px 2px lightgrey;
    background-color: #f9f9f9;
    box-shadow: 2px 2px 2px lightgrey;
    float: left;
}

.grid_container{
    width: 100%;
    display: grid;
    grid-template-columns: auto auto auto auto;
}

.grid_container2{
    /*border-style: solid;
    border-width: 1px;*/
    display: grid;
    grid-template-columns: 50% 50%;
}


.grid_container3{
    margin-right: 50%;
    display: grid;
    grid-template-columns: 200px auto;
}

.custom-tab{
    font-weight: bolder;
    font-size: 22px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

#app12-meteo{
border-radius: 5px;
  background-color: #af9f9f9;
  margin: 10px;
  padding: 15px;
  position: relative;
  box-shadow: 2px 2px 2px lightgrey;
  width: 50%
  }

#app12-legend_pie{
  /*transform: translate(-20%,+32%);*/
  width: 70%;
  /*max-width:100%*/
  /*border: solid;*/
}
#app12-legend_pie2{
  /*transform: translate(-20%,+32%);*/
  width: 60%;
  /*max-width:100%*/
  /*border: solid;*/
}

/* Tab "Mode différé--------------------------------------------------------------------------------------------------*/

.info-container{
    /*width: 60%;*/
    display: grid;
    grid-template-columns: 150px 150px 150px 150px;
}

#app12-info-container_day{
    /*width: 60%;*/
    display: grid;
    grid-template-columns: 150px 150px 150px 150px;
}

#app12-info2-container_day{
    /*width: 60%;*/
    display: grid;
    grid-template-columns: 150px 150px 150px 150px;
}


/* Tab "Harmonica"--------------------------------------------------------------------------------------------------*/

#app12-div_harmonica{
    display: grid;
    grid-template-columns: 70% 30%;
    background-color: #FFFFFF
}

#app12-legend_harmonica{
    width: 100%;
    height: auto;
    margin-top: 8%;
}

#app12-date1{
    display: grid;
    grid-template-columns: 200px auto;
    border-radius: 5px;
    padding-top: 10px;
    position: relative;
    border: 1px solid lightgrey;
    box-shadow: 2px 2px 2px lightgrey;
    /*background-color: #app12-ececec;*/
}

/* Tooltip---------------------------------------------------------------------------------------------------------*/

.help{
    height: 20px;
    width: auto;
    vertical-align: text-top;
    cursor: pointer;
    }

/* Tab "Europe--------------------------------------------------------------------------------------------------*/

#app12-div_europe{
    /*width: 60%;*/
    display: grid;
    grid-template-columns: 150px 150px 150px 150px;
}