/* Dropdown Menu Styling for Dark Mode */
.Select-menu-outer {
    background-color: #333 !important;
    color: white !important;
}

.Select-menu {
    background-color: #333 !important;
    color: white !important;
}

.Select-control {
    background-color: #333 !important;
    border: 1px solid #555 !important;
    color: white !important;
}

.Select--multi .Select-value {
    background-color: #333 !important;
    color: white !important;
}

.Select-placeholder {
    color: #999 !important;
}

.Select-option {
    background-color: #333 !important;
    color: white !important;
}

.Select-option.is-focused {
    background-color: #444 !important;
    color: white !important;
}

.Select-value-label {
    color: white !important;
}
/* DatePicker and DateRangePicker Styling for Dark Mode */
.DateRangePickerInput {
    background-color: #333 !important;   /* Dark background for the picker input */
    color: white !important;             /* White text for the input */
    border: 1px solid #555 !important;   /* Lighter border */
}

.DateRangePickerInput input {
    background-color: #333 !important;   /* Dark background for the input field */
    color: white !important;             /* White text for the input field */
    border: 1px solid #555 !important;
}

.DateRangePickerInput_calendarIcon {
    color: white !important;             /* White calendar icon */
}

.DateInput_input {
    background-color: #333 !important;   /* Dark background for the individual date inputs */
    color: white !important;             /* White text */
}

.CalendarDay__default {
    background: #333 !important;         /* Dark background for days */
    color: white !important;             /* White text for the days */
    border: 1px solid #555 !important;   /* Lighter border for the days */
}

.CalendarDay__hovered_span,
.CalendarDay__selected_span,
.CalendarDay__selected,
.CalendarDay__hovered {
    background: #444 !important;         /* Darker background for selected/hovered dates */
    color: white !important;             /* White text for selected/hovered dates */
}

.DayPickerNavigation_button__horizontalDefault {
    background-color: #555 !important;   /* Darker background for the navigation buttons */
    color: white !important;             /* White arrow icons */
}

.CalendarMonth_caption {
    color: white !important;             /* White text for the month caption */
}

.CalendarMonth {
    background-color: #222 !important;   /* Dark background for the entire calendar */
}
/* DatePicker and DateRangePicker Styling for Dark Mode */
.DateRangePickerInput {
    background-color: #333 !important;   /* Dark background for the picker input */
    color: white !important;             /* White text for the input */
    border: 1px solid #555 !important;   /* Lighter border */
}

.DateRangePickerInput input {
    background-color: #333 !important;   /* Dark background for the input field */
    color: white !important;             /* White text for the input field */
    border: 1px solid #555 !important;
}

.DateRangePickerInput_calendarIcon {
    color: white !important;             /* White calendar icon */
}

.DateInput_input {
    background-color: #333 !important;   /* Dark background for the individual date inputs */
    color: white !important;             /* White text */
}

/* Calendar container styling */
.DayPicker {
    background-color: #222 !important;   /* Dark background for the whole calendar */
}

/* Calendar header (month/year) styling */
.DayPicker_weekHeader {
    color: white !important;             /* White text for week headers (days of the week) */
}

.CalendarMonth_caption {
    color: white !important;             /* White text for the month caption */
}

/* Styling the calendar days */
.CalendarDay__default {
    background: #333 !important;         /* Dark background for days */
    color: white !important;             /* White text for the days */
    border: 1px solid #555 !important;   /* Lighter border for the days */
}

/* Styling hovered and selected dates */
.CalendarDay__hovered_span,
.CalendarDay__selected_span,
.CalendarDay__selected,
.CalendarDay__hovered {
    background: #444 !important;         /* Darker background for selected/hovered dates */
    color: white !important;             /* White text for selected/hovered dates */
}

/* Styling the navigation buttons */
.DayPickerNavigation_button {
    background-color: #555 !important;   /* Dark background for navigation buttons */
    color: white !important;             /* White arrow icons */
}

/* Focused date styling */
.CalendarDay__selected {
    background: #555 !important;         /* Slightly lighter background for selected dates */
    color: white !important;
    border: 1px solid #999 !important;
}

/* Disabled dates styling */
.CalendarDay__blocked_out_of_range {
    background-color: #333 !important;   /* Dark background for disabled dates */
    color: #666 !important;              /* Dimmed text for disabled dates */
}

.CalendarDay__blocked_out_of_range:hover {
    background-color: #333 !important;
    color: #666 !important;
}

/* Firefox scrollbar styling */
* {
    scrollbar-width: thin;                /* Thin scrollbar */
    scrollbar-color: #555 #333;           /* Dark thumb and track */
}

/* Style for dark mode scrollbar */
.DayPicker__withBorder {
    overflow: hidden;  /* Hides default scrollbar to apply custom one */
}

::-webkit-scrollbar {
    width: 12px;  /* Width of the scrollbar */
}

::-webkit-scrollbar-track {
    background: #333;  /* Dark background for the scrollbar track */
}

::-webkit-scrollbar-thumb {
    background-color: #555;  /* Darker scrollbar thumb */
    border-radius: 10px;      /* Rounded scrollbar */
    border: 2px solid #333;   /* Border around the scrollbar thumb to match the background */
}

::-webkit-scrollbar-thumb:hover {
    background-color: #777;  /* Slightly lighter scrollbar thumb on hover */
}

