/* Surcharge de la couleur "bg-primary" de Bootstrap pour background et card header */
.bg-primary {
background-color: #79A1C3 !important;
}


/* Gif de chargement au lancement du dashboard */
._dash-loading {
    font-size: 0;
    background-image: url('images/load.gif');
    height: 100vh;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    max-width:600px;
    max-height:600px;
}


/* Pour cacher les cartes */
.hide {
    position: absolute !important;
    left: -10000px !important;
}


/* Dropdown sélection des sites : on réduit le padding-x */
#tabs-dropdown-sites a {
    padding: 0.5rem 0.1rem;
}


/* Dropdown (titre) dans le panneau à droite des cartes */
#title-infos {
    flex-shrink: 1;
    padding-right: 0px;
    padding-left: 0px;
}
#title-infos > .dash-dropdown {
    margin-right: 0.5rem !important;
    margin-left: 0.5rem !important;
}
#title-infos .Select-control {
    height: auto;
}
#title-infos .Select-menu-outer {
    margin-top: 0.5rem;
}
#title-infos .Select-arrow-zone {
    display: none;
}
#title-infos .Select-multi-value-wrapper > .Select-value {
    padding: 0px;
    font-weight: 500;
    line-height:1.2;
    font-size: 1.40625rem; /* Taille d'un titre h4 */
    position: static; /* Valeur par défaut de la propriété 'position' */
    white-space: normal; /* Valeur par défaut de la propriété 'white-space' */
}
#title-infos .Select-multi-value-wrapper > .Select-input {
    display: none !important;
}


/* Boutons "précédent"/"suivant" dans le panneau à droite des cartes */
#button-prev-infos, #button-next-infos {
    flex-shrink: 1;
    width: auto;
}


/* Boutons collapse affichage paramètres données/visuels */
.collapse-btn, .collapse-btn:hover, .collapse-btn:active, .collapse-btn:focus {
    font-size: 1.05rem;
    padding: 0;
    text-decoration: none;
    border: none;
    box-shadow: none;
    font-weight: 500; /* Propriété d'un titre h5 */
    line-height: 1.2; /* Propriété d'un titre h5 */
}


/* Modification du padding des sliders des strates */
.padding-slider-strates {
    padding: 25px 0px !important;
}


/* Groupe de boutons pour sélection du type de graphique/distribution (onglets 1 et 2) */
.radio-group .form-check {
    padding-left: 0;
}
.radio-group .form-check .form-check-label {
    border: none;
    box-shadow: none;
}
.radio-group .btn-group > .form-check:not(:last-child) > .btn {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.radio-group .btn-group > .form-check:not(:first-child) > .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-left: -1px;
}


/* Pour enlever la dernière margin d'un groupe de cases à cocher / boutons radio */
.delete-last-margin > div:last-child {
    margin-right: 0;
}


/* Pour enlever la margin-bottom d'un switch */
.delete-margin-bottom > div:first-child {
    margin-bottom: 0;
}


/* Pour ouvrir le menu d'un dropdown vers le haut plutôt que vers le bas */
/* À supprimer quand Dash aura ajouté la fonctionnalité : https://github.com/JedWatson/react-select/issues/1602 */
.open-dropdown-top .Select-menu-outer {
    top: auto;
    bottom: 100%;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    border: 1px solid #ccc;
    border-bottom-color: #e6e6e6;
}

.open-dropdown-top.is-open > .Select-control {
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
    border-color: #d9d9d9 #ccc #b3b3b3;
}


/* Pour aligner sur une ligne à l'horizontal un dropdown et son label */
.param-dropdown-align {
display: flex;
flex-wrap: wrap;
align-items: center
}

/* Animation au chargement des graphiques */
.plotlybars {
  padding: 0 20px;
  vertical-align: bottom;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
}

.plotlybars-wrapper {
  width: 200px;
  height: 150px;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.plotlybars-text {
  color: #2C3E50;
  font-family: 'Open Sans', verdana, arial, sans-serif;
  font-size: 80%;
  text-align: center;
  margin-top: 5px;
}

.plotlybars-bar {
  background-color: #79A1C3;
  height: 100%;
  width: 13.3%;
  position: absolute;
  transform: translateZ(0);
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-timing-function: linear;
}

.b1 { left: 0%; top: 88%; animation-name: b1; }
.b2 { left: 14.3%; top: 76%; animation-name: b2; }
.b3 { left: 28.6%; top: 16%; animation-name: b3; }
.b4 { left: 42.9%; top: 40%; animation-name: b4; }
.b5 { left: 57.2%; top: 26%; animation-name: b5; }
.b6 { left: 71.5%; top: 67%; animation-name: b6; }
.b7 { left: 85.8%; top: 89%; animation-name: b7; }

@keyframes b1 {
  0% { top: 88%; }
  44% { top: 0%; }
  94% { top: 100%; }
  100% { top: 88%; }
}

@keyframes b2 {
  0% { top: 76%; }
  38% { top: 0%; }
  88% { top: 100%; }
  100% { top: 76%; }
}

@keyframes b3 {
  0% { top: 16%; }
  8% { top: 0%; }
  58% { top: 100%; }
  100% { top: 16%; }
}

@keyframes b4 {
  0% { top: 40%; }
  20% { top: 0%; }
  70% { top: 100%; }
  100% { top: 40%; }
}

@keyframes b5 {
  0% { top: 26%; }
  13% { top: 0%; }
  63% { top: 100%; }
  100% { top: 26%; }
}

@keyframes b6 {
  0% { top: 67%; }
  33.5% { top: 0%; }
  83% { top: 100%; }
  100% { top: 67%; }
}

@keyframes b7 {
  0% { top: 89%; }
  44.5% { top: 0%; }
  94.5% { top: 100%; }
  100% { top: 89%; }
}