/* FONTES */

@font-face {
    font-family: century;
    src: url("../resources/Century.ttf");
}

:root {
    --logo-height: 40px;                /* Taille du logo */
    --logo-max-width: 275px;            /* Taille du logo */
    --blue-background-color: rgb(28,115,175);
    --header-height: 50px;              /* Hauteur du header de page */
    --aqi-checkboxes-height: 65px;      /* Hauteur de la légende du graphe AQI */
    --header-base: 25px;                /* Hauteur margin */
    --chart-header-height: 42px;        /* Hauteur du header du chart (nom du logger et boutons) */
    --chart-range-options-height: 27px; /* Hauteur des options du chart (date et affichage sensors) */
    --countdown-height: 25px;           /* Hauteur du countdown */
    --outside-chart-height: 147px;      /* Somme des 4 précédents + 2 px*/
    --panel-width: 250px;               /* Largeur des panneaux amovibles */
    --light-background-gray: rgba(240,240,240,0.6);
    --light-blue-icon: rgb(23,158,171);
    --thead-tfoot-table-color: rgb(80,91,115); /* couleur du fond de des header des tableaux */
}

body {
    font: 14px/20px normal century, century, sans-serif;
    position: relative;
    overflow: hidden;
}

table {
    font: 12px/18px normal century, century, sans-serif;
}

thead {
    background-color: ghostwhite;
}

.container {
    padding: 0;
    width: 100%;
    overflow: hidden;  
}

#container {
    background-color: var(--light-background-gray);
}

.bottom, .bottom > .tooltip-inner {
    min-width: 300px;
    max-width: 300px;
}
    
.tooltip-inner {
    font: 14px/21px normal century, century, sans-serif;
    text-align: left;
}

.error-panel {
    background-color: #F2DEDE;
    padding: 10px;
    margin-top: 20px;
    color: #a94442;
}

.panel-heading {
    font-size: 24px;
}

.encadre {
    background-color: rgba(240,240,240,0.6);
    padding: 0 5px 20px 5px;
    border-style: solid;
    border-width: 1px; 
    border-color: rgb(200,200,200);
}

/****** UP *****/

#main-bar {
    background-color: var(--blue-background-color);
    color: white;
    border: none;
    margin: 0;
    height: 50px;
}

.nav .open > a, .nav .open > a:focus, .nav .open > a:hover {
   background-color: transparent;
}
.nav > li > a:focus, .nav > li > a:hover {
   background-color: transparent;
}

.navbar .nav li.dropdown > .dropdown-toggle:hover .caret,
.navbar .nav li.dropdown > .dropdown-toggle:focus .caret {
  color: white;
}

.bootstrap-select {
    max-width: 120px;
}

.row {
    /* modification de bootstrap */
    margin-left: 0;
    margin-right: 0;
}


/*******************************************************************************/
/* LOGO / TOGGLE BUTTONS                                                       */
/*******************************************************************************/

#logo {
    min-height: var(--logo-height);
    max-height: var(--logo-height);
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 5px;
    vertical-align: text-bottom;
}

.btn-toggle {
    width: var(--header-height);
    height: var(--header-height);
}

.version {
    font-size: 0.7em;
    margin-top: var(--header-base);
    margin-left: 5px;
    color: white;
}

.btn-toggle:hover {
    cursor: pointer;
    color: #F2DEDE;
}

/*******************************************************************************/
/* LOGGOUT - LANGAGE BAR                                                            */
/*******************************************************************************/

#div-nav-loggout {
    margin-right: 8px;
    padding-top: 10px;
    height: 50px;
    display: inline-block;
    line-height: 18px;
    vertical-align: bottom;
}

#loggout-btn, #settings-btn, #api-btn, #home-btn {
    font-size: 28px;
    vertical-align: bottom;
}

a.btn-header {
    /* boutons menu header en blanc */
    color: white;
}

a.btn-logger {
    /* boutons sous-menu des loggers en bleu */
    color: var(--light-blue-icon);
}

a.btn-disabled {
    pointer-events: none;
    opacity: 0.5;
}

#settings-btn, #loggout-btn, #localization-img, #api-btn {
    margin-right: 5px;
}

#loggin-id, #div-logout, #lang-menu, #div-settings, #div-API, #div-localization, #div-home {
    display: inline-block;
    vertical-align: middle;
}

#loggin-id {
    font-size: 18px;
    margin: 0 10px 0 10px;
}

#lang-menu {
    display: inline-block;
}

#langPicker {
    margin-right: 5px;
}

.flag-icon-large {
    font-size : 24px;
}

#localization-img {
    width : 26px;
    height: 26px;
}

/****** UP RESPONSIVE DESIGN *****/

@media screen and (max-width: 880px) {
    
    .version {
        display: none;
    }
}

@media screen and (max-width: 830px) {
    
    #loggin-id {
        display: none;
    }
}

@media screen and (max-width: 640px) {

    #logo {
        display: none;
    } 
}

@media screen and (max-width: 340px) {
    
    #main-bar {
        height: calc(var(--header-height) + var(--header-height));
    }
}