/* ===========================
   DATE PICKER INPUT FIELDS
   =========================== */

.DateRangePicker,
.DateRangePickerInput,
.DateInput,
.DateInput_input {
    background-color: #000000 !important;
    color: #87c9c9 !important;
    border: 1px solid #87c9c9 !important;
}

.DateInput_input {
    background-color: #000000 !important;
    color: #87c9c9 !important;
}

/* Remove white background inside the inputs */
.DateInput_input__focused {
    background-color: #000000 !important;
    color: #87c9c9 !important;
}

/* ===========================
   CALENDAR POPUP CONTAINER
   =========================== */

.DayPicker,
.DayPicker_portal,
.DayPicker__withBorder,
.DayPicker_transitionContainer,
.CalendarMonthGrid,
.CalendarMonth,
.CalendarMonth_table {
    background: #000000 !important;
}

/* ===========================
   NAVIGATION ARROWS
   =========================== */

.DayPickerNavigation_button {
    background-color: #000000 !important;
    border: 1px solid #87c9c9 !important;
}

.DayPickerNavigation_button:hover {
    background-color: #87c9c9 !important;
    color: #000000 !important;
}

/* ===========================
   CALENDAR HEADER (e.g. "January 1990")
   =========================== */

.CalendarMonth_caption {
    background: #000000 !important;
    color: #87c9c9 !important;
}

/* ===========================
   WEEKDAY LABEL ROW
   =========================== */

.DayPicker_weekHeader,
.DayPicker_weekHeader_ul,
.DayPicker_weekHeader_li {
    background: #000000 !important;
    color: #87c9c9 !important;
}

/* Remove default gray divider line */
.DayPicker_weekHeader {
    border-bottom: none !important;
}

/* ===========================
   DAY CELLS
   =========================== */

.CalendarDay__default,
.CalendarDay__default:hover {
    background: #000000 !important;
    color: #47b57e !important;
    border: 1px solid #333333 !important;
}

.CalendarDay__hovered_span,
.CalendarDay__hovered {
    background: #003300 !important;
    color: #bbbbbb !important;
}

/* Selected day */
.CalendarDay__selected,
.CalendarDay__selected:hover,
.CalendarDay__selected_span,
.CalendarDay__selected_span:hover {
    background: #87c9c9 !important;
    color: #000000 !important;
    border: 1px solid #47b57e !important;
}

/* ===========================
   BLOCKS BETWEEN MONTHS
   =========================== */
.CalendarMonthGrid_month__horizontal {
    background: #000000 !important;
}

/* ===========================
   PORTAL MODE (mobile)
   =========================== */

.DayPicker_portal__horizontal {
    background-color: #000000 !important;
}