.iris-date-display-input {
    padding-right: 2.6rem;
    border-color: #cbd6df;
    border-radius: 10px;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M11.5 1v2M4.5 1v2M2.5 4.5h11M3.75 2.5h8.5a1.25 1.25 0 0 1 1.25 1.25v8.5a1.25 1.25 0 0 1-1.25 1.25h-8.5A1.25 1.25 0 0 1 2.5 12.25v-8.5A1.25 1.25 0 0 1 3.75 2.5Z' stroke='%234b74b3' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M5.5 7h1.5v1.5H5.5zM9 7h1.5v1.5H9zM5.5 10h1.5v1.5H5.5z' fill='%234b74b3'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    background-size: 1rem 1rem;
    box-shadow: inset 0 1px 2px rgba(17, 38, 62, 0.05), 0 1px 2px rgba(17, 38, 62, 0.04);
    transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}

.iris-date-display-input:hover {
    border-color: #b9c8d6;
}

.iris-date-display-input:focus {
    border-color: #4b74b3;
    box-shadow: 0 0 0 0.2rem rgba(75, 116, 179, 0.16), 0 8px 18px rgba(25, 48, 74, 0.08);
}

.iris-date-display-input[disabled],
.iris-date-display-input[readonly] {
    background-color: #f7f9fc;
}

.daterangepicker,
.daterangepicker.iris-daterangepicker {
    padding: 12px;
    border: 1px solid #d6e0ea;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 22px 50px rgba(19, 39, 61, 0.18);
}

.daterangepicker:before,
.daterangepicker:after {
    display: none;
}

.daterangepicker .drp-calendar {
    padding: 0 4px 4px;
}

.daterangepicker .calendar-table {
    padding: 0;
    border: 0;
    background: transparent;
}

.daterangepicker .calendar-table table {
    border-collapse: separate;
    border-spacing: 0 4px;
}

.daterangepicker .calendar-table th,
.daterangepicker .calendar-table td {
    width: 36px;
    min-width: 36px;
    height: 36px;
    border: 0;
    border-radius: 10px;
    line-height: 36px;
}

.daterangepicker .calendar-table th {
    color: #607080;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: uppercase;
}

.daterangepicker th.month {
    color: #223248;
    font-size: 14px;
    font-weight: 600;
}

.daterangepicker .calendar-table .next span,
.daterangepicker .calendar-table .prev span {
    border-color: #4b74b3;
}

.daterangepicker td.available:hover,
.daterangepicker th.available:hover {
    background: #eff5fb;
    color: #1f5f93;
}

.daterangepicker td.off,
.daterangepicker td.off.in-range,
.daterangepicker td.off.start-date,
.daterangepicker td.off.end-date {
    color: #a7b3bf;
    background: transparent;
}

.daterangepicker td.in-range {
    background: #e9f3fc;
    color: #245f8f;
}

.daterangepicker td.active,
.daterangepicker td.active:hover,
.daterangepicker td.start-date,
.daterangepicker td.end-date {
    background: linear-gradient(180deg, #4b74b3 0%, #2f5f98 100%);
    color: #ffffff;
    box-shadow: 0 8px 16px rgba(47, 95, 152, 0.24);
}

.daterangepicker td.start-date.end-date {
    border-radius: 10px;
}

.daterangepicker td.disabled,
.daterangepicker option.disabled {
    color: #c3ccd5;
}

.daterangepicker select.monthselect,
.daterangepicker select.yearselect,
.daterangepicker select.hourselect,
.daterangepicker select.minuteselect,
.daterangepicker select.secondselect,
.daterangepicker select.ampmselect {
    border: 1px solid #d6e0ea;
    border-radius: 8px;
    background-color: #ffffff;
    box-shadow: none;
}

.daterangepicker .drp-buttons {
    padding-top: 12px;
    border-top: 1px solid #e8eef4;
}

.daterangepicker .drp-selected {
    color: #526070;
}

.daterangepicker.iris-datetime-daterangepicker {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
    padding: 10px;
}

.daterangepicker.iris-datetime-daterangepicker .drp-calendar {
    flex: 0 0 auto;
    order: 1;
}

.daterangepicker.iris-datetime-daterangepicker .calendar-table th,
.daterangepicker.iris-datetime-daterangepicker .calendar-table td {
    width: 32px;
    min-width: 32px;
    height: 32px;
    line-height: 32px;
    border-radius: 9px;
}

.daterangepicker.iris-datetime-daterangepicker th.month {
    font-size: 13px;
}

.daterangepicker.iris-datetime-daterangepicker select.monthselect,
.daterangepicker.iris-datetime-daterangepicker select.yearselect {
    max-width: 78px;
    padding: 2px 20px 2px 8px;
    font-size: 12px;
}

.daterangepicker.iris-datetime-daterangepicker .calendar-time {
    display: none !important;
}

.iris-time-panel {
    display: flex;
    flex: 0 0 auto;
    order: 2;
    gap: 8px;
    min-width: 174px;
    padding: 2px 0 2px 10px;
    border-left: 1px solid #e8eef4;
}

.daterangepicker.iris-datetime-daterangepicker .drp-buttons {
    order: 3;
    flex: 1 0 100%;
    width: 100%;
}

.iris-time-column {
    display: flex;
    flex-direction: column;
    min-width: 50px;
}

.iris-time-column-ampm {
    min-width: 58px;
}

.iris-time-column-title {
    margin-bottom: 6px;
    color: #607080;
    font-size: 10px;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
}

.iris-time-list {
    max-height: 194px;
    overflow-y: auto;
    padding-right: 3px;
}

.iris-time-list::-webkit-scrollbar {
    width: 6px;
}

.iris-time-list::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(75, 116, 179, 0.35);
}

.iris-time-item {
    display: block;
    width: 100%;
    margin: 0 0 4px;
    padding: 7px 8px;
    border: 0;
    border-radius: 8px;
    background: #f6f8fb;
    color: #334155;
    font-size: 12px;
    line-height: 1.1;
    text-align: center;
    transition: background-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

.iris-time-item:hover,
.iris-time-item:focus {
    background: #eff5fb;
    color: #1f5f93;
    outline: none;
}

.iris-time-item.is-selected {
    background: linear-gradient(180deg, #4b74b3 0%, #2f5f98 100%);
    color: #ffffff;
    box-shadow: 0 8px 16px rgba(47, 95, 152, 0.24);
}

@media (max-width: 576px) {
    .daterangepicker,
    .daterangepicker.iris-daterangepicker {
        padding: 10px;
        border-radius: 14px;
    }

    .daterangepicker .calendar-table th,
    .daterangepicker .calendar-table td {
        width: 34px;
        min-width: 34px;
        height: 34px;
        line-height: 34px;
    }
}

@media (max-width: 420px) {
    .daterangepicker.iris-datetime-daterangepicker {
        flex-direction: column;
    }

    .iris-time-panel {
        width: 100%;
        min-width: 0;
        padding: 10px 0 0;
        border-top: 1px solid #e8eef4;
        border-left: 0;
    }
}