.datepick {
    white-space: normal;
    font-size: 0.875rem;
    font-weight: 400;
    cursor: pointer;
}

/* Main calendar container - Dark theme */
.datepicker {
    background-color: #222; /* Dark background */
    border: 1px solid #444;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
    border-radius: 6px;
    padding: 8px;
    font-size: 0.875rem; /* Set font size to 14px */
}

/* Remove rounded edges from Month/Year title and Days of the Week */
.datepicker thead tr th,
.datepicker .datepicker-switch {
    border-radius: 0 !important; /* Removes rounded corners */
}

/* Keep rounded edges on selected days, today's date, and active dates */
.datepicker td.active,
.datepicker td.active:hover,
.datepicker td.focused,
.datepicker td.today {
    border-radius: 4px !important; /* Keeps rounded edges */
}

/* Restore rounded edges when hovering over Month/Year title */
.datepicker .datepicker-switch:hover {
    border-radius: 4px !important; /* Adds rounded edges on hover */
    background-color: #000 !important; /* Adjust hover background color */
    color: #fff !important; /* Adjust hover text color */
}

/* Restore rounded edges when hovering over navigation arrows */
.datepicker .prev:hover,
.datepicker .next:hover {
    border-radius: 4px !important; /* Makes arrows circular on hover */
    background-color: #fff !important; /* White hover background */
    color: #000 !important; /* Black arrow color */
}

/* Header (Month & Year Selection) */
.datepicker .datepicker-switch {
    font-size: 0.875rem; /* Small size */
    font-weight: bold;
    color: #fff; /* White text */
    text-transform: uppercase;
}

/* Days of the Week (Su, Mo, etc.) */
.datepicker thead tr th {
    background-color: #333; /* Dark gray */
    color: #f8f9fa; /* Light text */
    padding: 6px;
    font-size: 0.875rem;
    text-transform: uppercase;
}

/* Calendar Days */
.datepicker td, .datepicker th {
    text-align: center;
    padding: 6px;
    font-size: 0.875rem;
    cursor: pointer;
    color: #ddd; /* Light text */
    background-color: #222;
}

/* Hover Effect for Days */
.datepicker td:hover {
    background-color: #444;
    color: #000;
    cursor: pointer;
}

/* Selected Date - Black with White Text */
.datepicker td.active,
.datepicker td.active:hover,
.datepicker td.focused {
    background-color: #000 !important; /* Black background */
    color: #fff !important; /* White text */
    border-radius: 4px;
}

/* Highlight Today's Date */
.datepicker td.today {
    background-color: #ffca28 !important; /* Gold */
    color: black !important;
    border-radius: 4px;
}

/* Disabled Dates */
.datepicker td.disabled {
    color: #666 !important;
    cursor: not-allowed;
    background-color: #222;
    opacity: 0.5;
}

/* Navigation Arrows */
.datepicker .prev,
.datepicker .next {
    font-size: .9rem;
    color: #fff !important; /* White arrows */
    padding: 0 5px 10px; 5px;
}

.datepicker .prev:hover,
.datepicker .next:hover {
    background-color: #fff !important; /* White hover */
    color: 000 !important; /* Black text */
    border-radius: 4px;
}

/* Month and Year Dropdowns */
.datepicker select {
    border: 1px solid #555;
    padding: 4px;
    border-radius: 4px;
    background-color: #222;
    color: #ddd;
}

/* Main title (Month & Year) */
.datepicker .datepicker-switch {
    font-size: 0.875rem; /* Match the font size */
    font-weight: bold;
    color: #f8f9fa; /* Light text */
    background-color: #333;
    padding: 8px;
    text-align: center;
    cursor: pointer;
    border-radius: 4px;
}

/* Hover Effect for Month & Year Title */
.datepicker .datepicker-switch:hover {
    background-color: #fff !important; /* White background */
    color: #000 !important; /* Black text */
}

/* Selected State - When Clicking Month/Year */
.datepicker .datepicker-switch.active,
.datepicker .datepicker-switch:focus {
    background-color: #000 !important; /* Black */
    color: #fff !important; /* White */
}

/* Month selection styling */
.datepicker-months td span {
    display: inline-block;
    width: 23%; /* Ensures spacing between months */
    padding: 6px;
    text-align: center;
    font-size: 0.875rem;
    color: #ddd; /* Light text */
    background-color: #222;
    cursor: pointer;
    border-radius: 4px;
}

.datepicker-months td span.focused {
    background-color: #fff !important; /* White */
    color: #000 !important; /* Black */
}