/* Change the background and border of the calendar */
.ui-datepicker {
    background: var(--white);
    border: none;
    /* Example: light gray background */
    border: 1px solid var(--white);
    /* Example: light gray border */
    /* font-family: Arial, sans-serif; */
    /* Custom font */
    box-shadow: 0 4px 8px rgb(33 31 31 / 10%);
    /* Example: subtle shadow */
    border-radius: 10px !important;
    padding: 10px !important;
}

/* Customize the header (month and year) */
.ui-datepicker-header {
    background-color: var(--white);
    /* Example: blue header */
    color: var(--gray);
    /* White text */
    padding: 10px;
    /* Add some padding */
    border: none;
}

/* Customize the navigation buttons */
.ui-datepicker-prev,
.ui-datepicker-next {
    background: var(--white);
    /* Blue navigation arrows */
    color: var(--white);
    border-radius: 50%;
    /* Make them circular */
    width: 40px;
    height: 40px;
}

.ui-datepicker-calendar {
    background-color: var(--white);
    border: none;
}

/* Customize the calendar days */
.ui-datepicker-calendar th {
    color: var(--gray);
    /* Darker color for weekday headers */
    /* font-weight: bold; */
}

.ui-datepicker-calendar td a {
    background-color: var(--white);
    /* White background for days */
    color: var(--gray);
    /* Dark text color */
    padding: .4em;
    /* Add padding to days */
    border-radius: 50%;
    /* Make the days circular */
    transition: background-color 0.3s;
}

.ui-datepicker-calendar .ui-state-default {
    text-align: center;
    align-content: center;
    background-color: var(--white);
    /* font-size: 0.9em; */
    border: none;
}

/* Highlight the current day */
.ui-datepicker-calendar .ui-state-highlight {
    background-color: var(--white);
    border: 1px solid var(--black);
}

/* Change the hover state for days */
.ui-datepicker-calendar td a:hover {
    background-color: var(--light-pink);
    /* Example: orange hover effect */
    color: var(--gray);
}

/* Customize the selected day */
.ui-datepicker-calendar .ui-state-active {
    background-color: var(--pink);
    /* Example: green background for selected day */
    color: var(--white);
}


.ui-datepicker-title .ui-datepicker-month {
    border: none;
    padding: 5px;
}

.ui-datepicker-title .ui-datepicker-year {
    border: none;
    padding: 5px;
}