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


/* Padding des "card-header" (valeur de Bootstrap v4) */
.padding-card-header {
    padding: 0.75rem 1.25rem;
}


/* Listes déroulantes dans les paramètres des graphiques */
.graph-param-div-dropdown {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}


/* Label à gauche des listes déroulantes */
.graph-param-label {
    /*color: #7b8a8b;*/
    padding: 0.375rem 0.75rem;
    background-color: #ecf0f1;
    border-radius: 4px 0 0 4px;                 /* Même border-radius que les dcc.Dropdown */
    box-shadow:inset 0px 0px 0px 1px #ccc;      /* La bordure est à l'intérieur de l'élément */
    margin-right: -1px;
}

.graph-param-label + div .Select-control {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.graph-param-label + div {
    flex-grow: 1;
}


/* Modification du curseur au survol des onglets (à enlever si les prochaines versions de DBC le mette automatiquement) */
.card-header-tabs .nav-item {
    cursor: pointer;
}









/* Switch afficher/cacher l'encart informatif */
#switch-info .form-check .form-check-input:checked {
  background-color: #18bc9c;
  border-color: #b4bcc2;
}


/* Couleur du dashboard (background, card header, button) */
.custom-bg-color {
  background-color: #2a4e6c;
}

.custom-btn {
  color: #fff;
  background-color: #2a4e6c;
  border-color: #2a4e6c;
  width: 100%;
}

.custom-btn:hover {
  color: #fff;
  background-color: #1d364b; /* #2a4e6c + 3 shades */
  border-color: #192e40;     /* #2a4e6c + 4 shades */
}

.custom-btn:focus, .custom-btn.focus {
  box-shadow: 0 0 0 0.2rem rgba(63, 95, 122, 0.5); /* #2a4e6c + 1 tint */
  background-color: #1d364b;
  border-color: #192e40;
}

.custom-btn.disabled, .custom-btn:disabled {
  color: #fff;
  background-color: #2a4e6c;
  border-color: #2a4e6c;
}

.custom-btn:not(:disabled):not(.disabled):active, .custom-btn:not(:disabled):not(.disabled).active {
  color: #fff;
  background-color: #192e40;
  border-color: #152736; /* #2a4e6c + 5 shades */
}

.custom-btn:not(:disabled):not(.disabled):active:focus, .custom-btn:not(:disabled):not(.disabled).active:focus {
  box-shadow: 0 0 0 0.2rem rgba(63, 95, 122, 0.5);
}



/* Message d'erreur lors de la génération des graphiques */
.alert-graph-error {
    text-align: center;
    position: relative;
    left: 50%;
    transform: translate(-50%, 50%);
    display: inline-block;
}

/* Animation lors de la génération des graphiques */
.plotlybars {
    padding: 0 10px;
    vertical-align: bottom;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
}

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

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

.plotlybars-bar {
    background-color: #2a4e6c;
    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%; }
}