/* Dark theme overrides for Dash DatePicker */
.DateInput_input { 
    background-color: #181818 !important; 
    color: #f8fafc !important; 
    font-family: inherit !important;
    border-bottom: 2px solid #eab308 !important;
    font-size: 0.7em !important;
    padding: 10px 4px !important;
    line-height: 1 !important;
}
.DateInput { background-color: transparent !important; width: 44% !important; }
.DateRangePickerInput { background-color: #181818 !important; border: none !important; }
.CalendarMonth, .CalendarMonthGrid, .DayPickerNavigation, .DayPicker, .DayPicker_transitionContainer { 
    background-color: #181818 !important; 
    color: #f8fafc !important; 
}
.CalendarDay__default { 
    background-color: #262626 !important; 
    color: #f8fafc !important; 
    border: 1px solid #181818 !important; 
}
.CalendarDay__selected, .CalendarDay__selected:hover { background-color: #eab308 !important; color: #121212 !important; }
.CalendarDay__hovered_span { background-color: #334155 !important; color: #f8fafc !important; }

/* Dash Dropdown (react-select) Dark Theme */
.dash-bootstrap .Select-control {
    background-color: #181818 !important;
    border: 1px solid #262626 !important;
    color: #f8fafc !important;
}

.dash-bootstrap .is-focused:not(.is-open) > .Select-control {
    border-color: #eab308 !important;
    box-shadow: none !important;
}

.dash-bootstrap .Select-menu-outer {
    background-color: #181818 !important;
    border: 1px solid #444 !important;
    color: #f8fafc !important;
}

.dash-bootstrap .VirtualizedSelectOption {
    background-color: #181818 !important;
    color: #f8fafc !important;
}

.dash-bootstrap .VirtualizedSelectFocusedOption {
    background-color: #262626 !important;
    color: #eab308 !important;
}

/* Multi-select Tags (Selected Items) */
.dash-bootstrap .Select--multi .Select-value {
    background-color: #262626 !important;
    border: 1px solid #444 !important;
    color: #f8fafc !important;
}

.dash-bootstrap .Select--multi .Select-value-icon {
    border-right: 1px solid #444 !important;
}

.dash-bootstrap .Select-multi-value-wrapper {
  height: calc(1.5em + 0.75rem);
}

.dash-bootstrap .Select-placeholder {
  color: #999;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.dash-bootstrap .Select--single > .Select-control .Select-value,
.dash-bootstrap .Select-placeholder {
  color: #f8fafc !important;
  line-height: calc(1.5em + 0.75rem);
}

.dash-bootstrap .Select-input {
  height: calc(1.5em + 0.75rem);
}

.dash-bootstrap .Select-menu-outer {
  border-bottom-right-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
  background-color: #222;
  background-clip: padding-box;
  border: 1px solid #444;
  border-top-color: transparent;
  box-shadow: none;
  color: #fff;
}

.dash-bootstrap .VirtualizedSelectOption {
  height: calc(1.5em + 0.75rem) !important;
}

.dash-bootstrap .VirtualizedSelectFocusedOption {
  background-color: rgba(55, 90, 127, 0.1) !important;
}