/* 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);
    --aqi-checkboxes-height: 80px;
    /* Hauteur de la légende du graphe AQI */
    --header-base: 25px;
    /* Hauteur margin */
    --chart-header-height: 46px;
    /* Hauteur du header du chart (nom du logger et boutons) */
    --chart-range-options-height: 30px;
    /* Hauteur des options du chart (date et affichage sensors) */
    --countdown-height: 25px;
    /* Hauteur du countdown */
    --header-height: 50px;
    /* Hauteur du header de page */
    --outside-chart-height: 154px;
    /* Somme des 4 précédents + 3 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 */
}

html, body{
    margin: 0;
    padding: 0;
}

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

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

thead, tfoot {
    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;
}

.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);
}

select option:disabled {
    color: #AAA;
    font-style: italic;
}

/***** MODALES *****/

.advise-txt {
    font-style: italic;
    margin-top: 5px;
    margin-bottom: 10px;
    font-size: 11px;
}

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

.modal-content.alert-danger {
    /* Surcharge bootstrap */
    font-weight: 600;
    background-image: none;
    background-color: #f8d7da;
    color: #721c24;
}

.alert-success {
    /* Surcharge bootstrap */
    font-weight: 600;
    background-image: none;
    background-color: #d4edda;
    color: #155724;
}

.modal-dialog .error-txt {
    font-weight: normal;
    font-size: smaller;
    font-style: italic;
}

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

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

.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;
}

/****** ERROR MODALE *****/

#error-modal-body p {
    text-align: left;
}

.error-message {
    background-color: #F2DEDE;
    margin-top: 10px;
    padding: 6px 12px 6px 12px;
    color: #a94442;
}

/*******************************************************************************/
/* 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;
    transform: scaleX(1.08) scaleY(1.08);
}

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

#div-nav-loggout {
    margin-right: 8px;
    padding-top: 6px;
    height: 50px;
    display: inline-block;
    line-height: 18px;
    vertical-align: middle;
    font-size: 0;
    /* pour avoir espaces entre icones identiques */
}

.btn-header {
    color: white;
    display: inline-block;
    margin-left: 4px;
}

a.btn-header {
    font-size: 28px;
    min-width: 36px;
    min-height: 36px;
    padding: 4px;
    position: relative;
    color: white;
}

.btn-header span {
    width: 100%;
    height: 100%;
    color: white;
}

.btn-header span:hover {
    transform: scaleX(1.08) scaleY(1.08);
}

a.btn-header:link, a.btn-header:focus, a.btn-header:active {
    box-shadow: none;
}

.btn-header.btn-selected, .btn-header.btn-selected:hover {
    border: 1px solid white;
    border-radius: 4px;
    color: white;
}

.btn-header.btn-offer-rights {
    opacity: 0.5;
}

a.btn-header.btn-offer-rights:link,
a.btn-header.btn-offer-rights:focus,
a.btn-header.btn-offer-rights:active,
a.btn-header.btn-offer-rights:hover {
    color: white;
    transform: none;
}

.btn-header.btn-offer-rights span:hover {
    transform: none;
}

#loggin-id, #lang-menu, .div-btn-main-bar {
    display: inline-block;
    vertical-align: middle;
}

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

#langPicker {
    margin-right: 5px;
}

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

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

.btn-confirm:disabled{
    background-color: #5cb85c;
}

.btn-danger:disabled{
    background-color: #c12e2a;
}

.btn-primary:disabled{
    background-color: #265a88;
}

/****** 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));
    }
}