.daterangepicker {
    box-shadow: 2px 2px 16px rgb(38 55 67 / 7%);
    border: 1px solid #D6D5E3;
    border-radius: var(--rnd-border-radius);
    z-index: 3002;
}

    .daterangepicker:before {
        border-bottom: 7px solid #D6D5E3;
    }

    .daterangepicker .calendar-table td.available.in-range {
        color: var(--rnd-secondary-colour);
        background: rgba(54, 71, 128, 0.1);
    }

        .daterangepicker .calendar-table td.available.in-range:hover {
            color: var(--rnd-secondary-colour);
            background: rgba(54, 71, 128, 0.2);
        }

    .daterangepicker .calendar-table td.available:hover,
    .daterangepicker .calendar-table th.available:hover {
        background-color: rgba(54, 71, 128, 0.1);
    }

    .daterangepicker .calendar-table td.available:active,
    .daterangepicker .calendar-table th.available:active {
        background-color: rgba(54, 71, 128, 0.2);
    }

    .daterangepicker .calendar-table td.available.active {
        color: #FFFFFF;
        background-color: var(--rnd-tertiary-colour);
    }

        .daterangepicker .calendar-table td.available.active:hover {
            color: #FFFFFF;
            background-color: #4C5D96;
        }

        .daterangepicker .calendar-table td.available.active:active {
            color: #FFFFFF;
            background-color: #0C1D56;
        }

    .daterangepicker .calendar-table th select {
        font-size: 14px;
        height: 30px;
        border: none;
        border-radius: 4px;
        background-color: transparent;
        -moz-appearance: none;
        -webkit-appearance: none;
        width: auto;
        padding: 0 10px;
        color: var(--rnd-secondary-colour);
    }

        .daterangepicker .calendar-table th select option {
            float: left;
        }

        .daterangepicker .calendar-table th select:hover {
            background-color: rgba(54, 71, 128, 0.1);
        }

        .daterangepicker .calendar-table th select:active {
            background-color: rgba(54, 71, 128, 0.2);
        }

        .daterangepicker .calendar-table th select:focus-visible {
            outline: none;
        }

        .daterangepicker .calendar-table th select:hover option,
        .daterangepicker .calendar-table th select:active option {
            background-color: #FFFFFF;
        }




    .daterangepicker .calendar-table th.prev span,
    .daterangepicker .calendar-table th.next span {
        background-position: center;
        background-image: url(/assets/images/icons/chevron_left.svg);
        background-repeat: no-repeat;
        background-size: initial;
        border: none;
        display: block;
        width: 100%;
        height: 100%;
    }

    .daterangepicker .calendar-table th.prev span {
        transform: rotate(0deg);
    }

    .daterangepicker .calendar-table th.next span {
        transform: rotate(180deg);
    }

    .daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.secondselect, .daterangepicker select.ampmselect {
        background-color: white;
        border-radius: 4px;
        padding: 5px;
    }

    .daterangepicker .drp-buttons .applyBtn.btn {
        color: #FFFFFF;
        background: var(--rnd-tertiary-colour);
        border-color: var(--rnd-tertiary-colour);
        border-radius: 4px;
    }

        .daterangepicker .drp-buttons .applyBtn.btn:hover {
            color: #FFFFFF;
            background: #4C5D96;
            border-color: #4C5D96;
        }

/* Responsive styles */
@media (max-width: 564px) {
    .daterangepicker {
        height: 290px !important;
        overflow-y: scroll !important;
    }
}