#datepicker {
            background-color: white;
            border: black solid 1px;
            width: 300px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
        }
        #datepicker .datepicker-days table tbody tr td.day {
            position:relative !important; /* Ensure stacking context */
            z-index: 2 !important;        /* Higher z-index for all day cells */
        }
        .full-booked {
            background-color:lightpink  !important;
            color: black !important;
            cursor: not-allowed !important;
        }
        #datepicker .datepicker-days table tbody tr td.day.am-booked {
            background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 100 100' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='0,0 100,0 0,100' fill='lightpink'/%3E%3C/svg%3E");
            background-repeat: no-repeat !important;
            background-size: 100% 100% !important;
            position: relative !important; /* Create stacking context */
            color: black !important;        /* Ensure text is black */
            z-index: 1 !important;        /* Try to bring text forward */
        }
        #datepicker .datepicker-days table tbody tr td.day.pm-booked {
            background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 100 100' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='0,100 100,100 100,0' fill='lightpink'/%3E%3C/svg%3E");
            background-repeat: no-repeat !important;
            background-size: 100% 100% !important;
            position: relative !important; /* Create stacking context */
            color: black !important;        /* Ensure text is black */
            z-index: 1 !important;        /* Try to bring text forward */
        }
        #datepicker .datepicker-days table tbody tr td.day.am-booked.pm-booked {
                background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 100 100' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='0,0 100,0 0,100' fill='lightpink'/%3E%3C/svg%3E"),
                      url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 100 100' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='100,100 0,100 100,0' fill='lightpink'/%3E%3C/svg%3E");
                background-repeat: no-repeat, no-repeat !important;
                background-position: top left, bottom right !important;
                background-size: 50% 100%, 50% 100% !important;
                position: relative !important;
                color: black !important;
                z-index: 1 !important;
        }
        .available {
            background-color: #EAFFE1 !important;
            color: green !important;
            font-weight:500 !important;
            background-repeat: no-repeat !important;
            -webkit-background-size: 60% 60% !important;
            -moz-background-size: 60% 60% !important;
            -o-background-size: 60% 60% !important;
            background-size: 60% 60% !important;
            z-index: -1;
        }
        /*.datepicker td.old,
        .datepicker td.old.disabled,
        .datepicker td.old.am-booked,
        .datepicker td.old.pm-booked,
        .datepicker td.old.full-booked {
            background-color: lightyellow !important;
            background-size: 60% !important;
            color: grey !important;
            font-weight:normal !important;
            text-decoration: line-through red !important;
            text-decoration-thickness: 0.1rem !important;
        }*/
        .datepicker td.past-day,
        .datepicker td.past-day.disabled,
        .datepicker td.past-day.am-booked,
        .datepicker td.past-day.pm-booked,
        .datepicker td.past-day.full-booked {
            background-color: white !important;
            background-size: 60% !important;
            color: grey !important;
            font-weight:normal !important;
            text-decoration: line-through red !important;
            text-decoration-thickness: 0.1rem !important;
        }
        .datepicker-dropdown {
            z-index: 1051 !important; /* Keep it on top */
            /* Existing styles */
        }
        .datepicker-days .datepicker-switch {
            position: relative !important; /* Create a stacking context for the pseudo-element */
            padding-bottom: 10px !important; /* Add some space below the month text */
            margin-bottom: 5px !important; /* Add margin to separate from the days */
        }
        .datepicker-days .datepicker-switch::after {
            content: '';
            position: absolute;
            left: 5%;
            right: 5%;
            bottom: 0;
            border-bottom: 1px solid #ccc !important; /* Adjust line style, width, and color */
        }
        @media (max-width: 768px) {
            .datepicker-dropdown {
                transform: scale(0.9);
                transform-origin: top left;
            }
        }
        @media (max-width: 480px) {
            .datepicker-dropdown {
                transform: scale(0.8);
            }
        }
        .datepicker td,
        .datepicker th {
            padding: 0.6rem;
            font-size: 1rem;
        }
        .datepicker td.active {
            background-color: darkblue !important; /* Change the background color */
            background-image: none !important;
            color: white !important; /* Change the text color */
        }
        .datepicker td.active:hover {
            background-image: none !important;
            background-color: navy !important; /* Style on hover (optional) */
        }
        .datepicker table tr td.disabled.not-allowed-cursor,
        .datepicker table tr td.disabled.not-allowed-cursor:hover {
            cursor: not-allowed;
        }
        /*.datepicker .datepicker-days td.disabled.not-allowed-cursor,
        .datepicker .datepicker-days td.disabled.not-allowed-cursor:hover {
            cursor: not-allowed;
        }*/
        .datepicker-days td.not-allowed-cursor {
            cursor: not-allowed; /*!important;*/
        }