/* Texte de chargement au lancement du dashboard */
._dash-loading {
  text-indent: -9999em;
}

/* Sélecteur de dates (drp = DateRangePicker) */
.drp .DateInput_input {
  padding: 0.375rem 0.25rem;
  font-size: 0.85rem;
  text-align: center;
}

/* breakpoint > xxl (1400px) */
@media (min-width: 1900px) { .drp .DateInput { width: 110px; } }
@media (min-width: 1800px) and (max-width: 1899.98px) { .drp .DateInput { width: 100px; } }
@media (min-width: 1700px) and (max-width: 1799.98px) { .drp .DateInput { width: 95px; } }
@media (min-width: 1650px) and (max-width: 1699.98px) { .drp .DateInput { width: 90px; } }
@media (min-width: 1600px) and (max-width: 1649.98px) { .drp .DateInput { width: 85px; } }

/* On agrandi la flèche pour aligner verticalement les 3 items. 130px = taille de base des champs texte */
@media (min-width: 1400px) and (max-width: 1599.98px) { .drp .DateRangePickerInput_arrow { width: 130px; } } 

/* lg (992px) < breakpoint < xxl (1400px) */
@media (min-width: 1300px) and (max-width: 1399.98px) { .drp .DateInput { width: 110px; } }
@media (min-width: 1200px) and (max-width: 1299.98px) { .drp .DateInput { width: 100px; } }
@media (min-width: 1150px) and (max-width: 1199.98px) { .drp .DateInput { width: 90px; } }
@media (min-width: 1100px) and (max-width: 1149.98px) { .drp .DateInput { width: 85px; } }
@media (min-width: 992px) and (max-width: 1099.98px) { .drp .DateRangePickerInput_arrow { width: 130px; } }

/* lg (992px) < breakpoint */
@media (min-width: 900px) and (max-width: 991.98px) { .drp .DateInput { width: 100px; } }
@media (min-width: 850px) and (max-width: 899.98px) { .drp .DateInput { width: 90px; } }
@media (min-width: 825px) and (max-width: 849.98px) { .drp .DateInput { width: 85px; } }
@media (max-width: 824.98px) { .drp .DateRangePickerInput_arrow { width: 130px; } }

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

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

/* Animation au chargement 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: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

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

.plotlybars-bar {
  background-color: #2C3E50; /* Bootstrap primary color */
  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%; }
}