@import url("https://fonts.googleapis.com/css?family=IBM+Plex+Sans:300,400,500&display=swap");
@import url("https://fonts.googleapis.com/css?family=IBM+Plex+Sans+Condensed:300,400,500&display=swap");

body {
  font-weight: 400;
  font-family: "IBM Plex Sans", "HelveticaNeue", "Helvetica Neue", Helvetica,
    Arial, sans-serif;
  background-color: #17181a;
}

h4 {
  margin-top: 0.6em;
  margin-bottom: 0;
  padding: 10px;
  font-size: 2em;
  color: #fff !important;
  background-color: #96310f;
}

a {
  color: #30d6d6;
}

a:hover {
  color: #30d6d6;
}

#main {
  margin-top: 10px;
  background-color: #17181a;
}

#muy-importante {
  background-color: #4A0710;
  padding: 10px;
  margin-bottom: 20px;
}

#muy-importante p {
  margin-bottom: 0 !important;
}

#map-slider,
#map-slider-regional,
#map-radios,
#regional-links-container {
  padding: 10px;
  background-color: #1f2123;
}

#map-radios {
  padding: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

#language-picker {
  position: absolute;
  display: inline-block;
  right: 10px;
  top: 0px;
  margin: 0;
  padding: 5px;
  background-color: #00293b;
}

#language-picker span {
  margin-left: 5px;
}
#language-picker span:last-child {
  margin-right: 5px;
}

.info-container {
  padding: 10px;
  background-color: #1f2123;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.info-container + h4 {
  border-bottom: 0;
}

.plot-settings-container {
  padding: 10px;
  background-color: #1f2123;
  /* border-top: 1px solid rgba(255, 255, 255, 0.05); */
}

.slider-text {
  display: inline-block;
  margin-bottom: 0;
  padding: 5px;
  color: #999;
  font-size: 0.9em;
}

.update-container {
  margin-bottom: 20px;
  background-color: #1f2123;
}

.update-container .update-content {
  padding: 10px;
  color: #30d6d6;
  font-size: 1em;
}

.update-container .update-content {
  padding: 10px;
  color: #999;
  font-size: 1em;
}

.update-container .update-content span {
  font-weight: 300;
  padding-left: 2px;
  padding-right: 2px;
  margin: 4px;
  margin-left: 0px;
  background-color: #323538;
}

.update-container .update-content span.True {
  background-color: #186b6b;
  color: #fff;
}

.total-container {
  background-color: #1f2123;
  margin-bottom: 10px !important;
}

.total-container .total-content {
  padding: 10px;
  color: #30d6d6;
  font-size: 2.5em;
  text-align: center;
}
/* Totals */

/* Titles */
#date-container,
.total-title,
.update-title,
.plot-title {
  padding: 10px;
  font-size: 1.25em;
  font-weight: 500;
  background-color: #00334a;
  margin-bottom: 0px;
  white-space: nowrap;
  overflow: hidden;
}

.plot-title {
  margin-top: 10px !important;
}
/* Titles */

/* Override the bootstrap colours */
.form-group {
  margin-bottom: 0px !important;
}
.custom-control-input:checked ~ .custom-control-label::before {
  background-color: #30d6d6 !important;
  border-color: #30d6d6 !important;
}

.rc-slider-track {
  background-color: #006694 !important;
}

.rc-slider-rail {
  background-color: #00334a !important;
}

.rc-slider-handle {
  background-color: #006694 !important;
  border-color: #30d6d6 !important;
}

.rc-slider-dot {
  background-color: #00334a !important;
  border-color: #006694 !important;
}

.rc-slider-dot.rc-slider-dot-active {
  background-color: #006694 !important;
  border-color: #30d6d6 !important;
}

.rc-slider-mark-text.rc-slider-mark-text-active {
  color: #30d6d6 !important;
}

.rc-slider-mark-text {
  white-space: nowrap !important;
}

#info-button {
  background-color: #17181a !important;
  border-color: #30d6d6 !important;
}
/* Override the bootstrap colours */

/* Override the dcc select styles */
div.Select .Select-control {
  background-color: #101112 !important;
  border: 1px solid #2e343b !important;
}
div.Select span.Select-value-label {
  color: #fff !important;
}

div.Select div.Select-menu-outer {
  background-color: #101112 !important;
  border: 1px solid #2e343b !important;
}
/* Override the dcc select styles */

/* Map */
g.layer rect {
  fill: #1f2123 !important;
}

/* #graph-map {
  height: 70vw !important;
  max-height: 600px !important;
} */
/* Map */

/* Plots */
.xgrid.crisp,
.ygrid.crisp {
  stroke: #00334a !important;
}

.xtick text,
.ytick text {
  fill: #2f96ba !important;
}

text.ytitle,
text.xtitle {
  fill: #b3ebff !important;
}

.zerolinelayer .crisp {
  stroke: #006694 !important;
}

.annotation-text {
  fill: #e34530 !important;
}

.annotation-arrow-g path {
  stroke: #e34530 !important;
  fill: #e34530 !important;
}
/* Plots */

@media only screen and (max-width: 768px) {
  body {
    padding-top: 25px;
    font-size: 0.9em;
  }

  .total-container .total-content {
    padding: 5px;
    font-size: 1em;
  }

  .update-container .update-content {
    padding: 5px;
    font-size: 0.5em;
  }

  #date-container,
  .total-title,
  .update-title,
  .plot-title {
    padding: 5px;
    /* font-size: 1em; */
    font-size: 2.5vw;
  }

  .rc-slider-mark-text,
  .rc-slider-mark-text.rc-slider-mark-text-active {
    font-size: 0.56em !important;
  }

  #update-map text {
    font-size: 0.5em !important;
  }

  .dash-graph:not(#update-map) {
    zoom: 0.5;
  }

  /* #graph-map {
    height: 62vw;
  } */
}