/* Custom App CSS Below --------------------------------- */
/*Fonts ––––––––––––––––––––––––––––––––––––––––––––––––––*/
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');

/* Main Layout ––––––––––––––––––––––––––––––––––––––––––––––––––*/
body {
  background-color: #202020;
  color: #ffffff;
  margin: 0;
  padding: 0;
}
h1 {
  font-family:  "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-weight: normal;
  letter-spacing: 2.1px;
  font-size: 40px;
  padding-left: 12px;
}
h2 {
  font-family:  "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-weight: normal;
  letter-spacing: 2.1px;
  font-size: 30px;
  padding-left: 12px;
}
h3 {
  font-family: "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-weight: normal;
  letter-spacing: 2.1px;
  font-size: 21px;
  padding-left: 12px;
}
h4, h5 {
  font-family: "Open Sans";
  font-weight: bold;
  letter-spacing: 2.1px;
  font-size: 18px;
  padding-left: 12px;
}
p {
  font-family: "Open Sans";
  font-weight: 400;
  font-size: 14px;
  padding-left: 12px;
}
a {
  text-decoration: none;
  color: #FFBF00;
}
/* a:hover {
  text-decoration: none;
  color: #FFBF00;
} */

/* color de tabs*/
#clustergram-control-tabs, #clustergram-control-tabs .tab {
  background-color: rgb(45, 45, 45) !important;
}
#clustergram-body .control-tab {
  background-color: rgb(45, 45, 45) !important;
}
#clustergram-control-tabs .tab {
  background-color: rgb(251, 253, 100);
  color: #E4E4E4;
  border-color: #868686 !important;
}
#clustergram-control-tabs .tab--selected {
  color: #FFBF00 !important; /* color borde tab*/
  border-top-color: initial !important;
}
#clustergram-control-tabs .Select-control {
  border: solid 1px #832929;
  background-color: rgb(247, 190, 85) !important;
}
#clustergram-control-tabs .Select, #clustergram-control-tabs .Select-control, #clustergram-control-tabs input, #clustergram-control-tabs .Select-menu-outer, #clustergram-control-tabs .Select-value-label {
  background-color: #202020 !important; /* color fondo dropdown*/
  border-color: #868686 !important; /* color bordes dropdown*/
  color: #E4E4E4; /* color texto dropdown*/
}
#clustergram-control-tabs .Select-value-icon {
  background-color: rgb(2, 15, 204);
}
#clustergram-control-tabs .Select-value {
  border-color: #aa9cf8;
}

.bg-grey{
  background-color: #2257e9;
}
.text-padding{
  padding: 5px;
}
/* Graph Layout ––––––––––––––––––––––––––––––––––––––––––––––––––*/
.div-for-charts{
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100%;
}
#histogram {
  flex-grow: 1 
}
#map-graph {
  flex-grow: 1 
}
.mapboxgl-canvas, .mapboxgl-map {
  min-width: 100%;
}
/* Graph Control Objects ––––––––––––––––––––––––––––––––––––––––––––––––––*/
.div-user-controls {
  padding-left: 55px;
  padding-top: 64px;
}
.div-for-dropdown {
  padding-top: 12px;
  padding-bottom: 12px;
}
.div-for-slider {
  width: 97%;
  text-align: center;
}


/* Color de Dropdown menu --------------------------------- */
.Select-control, .Select-menu-outer, .Select-multi-value-wrapper, .select-up, .is-open .Select-control {
  background-color: #1E1E1E;
  color: white;
  
}

#bar-selector .Select-multi-value-wrapper{
  max-height: 82px;
  overflow-y: auto;
  margin: 0px 0px -3px 0px;
}

.Select-control{
  border: 0.5px solid #dbdbdb44;
}

.has-value.Select--single>.Select-control .Select-value .Select-value-label, .has-value.is-pseudo-focused.Select--single>.Select-control .Select-value .Select-value-label {
  color: white;
}
._dash-app-content {
  overflow-x: hidden;
  overflow-y: hidden;
  position: relative;
}
.has-value.Select--single>.Select-control .Select-value .Select-value-label, .has-value.is-pseudo-focused.Select--single>.Select-control .Select-value .Select-value-label{
  color: #d8d8d8;
  font-weight: 400;
  font-size: 14px;
}

#date {
  background-color: #1e1e1e;
  font-family: "Open Sans";
  font-weight: 400;
  color: #dbdbdb;
  border: 0.5px solid #dbdbdb44;
}

#date-picker{
  width: 100%;
}

._dash-undo-redo {
  display: none;
}
.DateInput.DateInput_1{
  width: 100%;
}
.SingleDatePickerInput__withBorder{
  border:none;
}

.DateInput.DateInput_1 {
  background-color: #1e1e1e;
}

.SingleDatePickerInput__withBorder {
  border-radius: 3px;
  color: #dbdbdb;
  background: #1e1e1e;
  background-color: #1e1e1e;
}
.SingleDatePickerInput.SingleDatePickerInput_1.SingleDatePickerInput__withBorder.SingleDatePickerInput__withBorder_2 {
  border: 0.0px solid #dbdbdb;
  display: block;
}
.SingleDatePicker_1 {
  border: 0.0px solid #dbdbdb;
  display: block;
}

.SingleDatePicker_picker, .SingleDatePicker_picker_1, .SingleDatePicker_picker__directionLeft,
.SingleDatePicker_picker__directionLeft_2{
  filter:invert(100%);
}

/* For Mobile Phones and small screens ––––––––––––––––––––––––––––––––––––––––––––––––––*/
@media only screen and (max-width: 768px) {
  .four, .eight {
      min-width: 100%;
 }
  h1, h2, h3, p {
      text-align: center;
 }
  body {
      display: block;
      margin: 0px;
      overflow-y: scroll;
  }
  .div-for-charts {
      padding: 0px;
      width: 100%;
      text-align: center;
 }

 .div-user-controls {
    padding: 32px;
 }
 
 .side-by-side{
    display: inline-block;
    width: 48%;
  }

   
 .side-by-side-right{
    display: inline-block;
    width: 48%;
    float:right;
  }
  .div-for-charts{
    margin: 0px;
  }
} 

/* width */
::-webkit-scrollbar {
  width: 10px !important;
  display: block !important;
}

/* Track */
::-webkit-scrollbar-track {
  background: #1e1e1e !important; 
  border-radius: 10px !important;
  display: block !important;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: transparent; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #d8d8d870 !important; 
}

.CalendarMonth_table td {
  padding: unset;  
}