.daterangepicker {
    position         : fixed;
    color            : inherit;
    background-color : #fff;
    max-width        : none;
    padding          : 0;
    z-index          : 3001;
    display          : none;
    font-size        : 1.5rem;
    line-height      : 1em;
    border-radius    : var(--radius, 0);
    padding          : var(--padding, 20px);
    top              : var(--top, 0) !important;
    left             : var(--left, 0) !important;
    transform        : var(--translate, unset);
    width            : var(--width, 100%) !important;
    height           : var(--height, 100%) !important;
    overflow         : var(--overflow, auto);
}

@media (min-width:768px) {
    .daterangepicker {
        --top:50%;
        --left:50%;
        --translate:translate(-50%, -50%);
        --padding:25px;
        --width:640px;
        --radius:14px;
        --height:fit-content;
        --overflow:unset;
    }
}

.daterangepicker.show .daterangepicker-scroller {
    display   : flex;
    flex-wrap : wrap;
    gap       : 20px;
}

.daterangepicker__backdrop {
    background-color : rgba(0, 0, 0, 0.5);
    position         : fixed;
    top              : 0;
    right            : 0;
    bottom           : 0;
    left             : 0;
    z-index          : 10;
}

.daterangepicker.drop-up {
    margin-top : -7px;
}

.daterangepicker.drop-up:before {
    top           : initial;
    bottom        : -7px;
    border-bottom : initial;
    border-top    : 7px solid #ccc;
}

.daterangepicker.drop-up:after {
    top           : initial;
    bottom        : -6px;
    border-bottom : initial;
    border-top    : 6px solid #fff;
}

.daterangepicker.single .daterangepicker .ranges,
.daterangepicker.single .drp-calendar {
    float : none;
}

.daterangepicker.single .drp-selected {
    display : none;
}

.daterangepicker.show-calendar .drp-calendar {
    display : block;
}

.daterangepicker.show-calendar .drp-buttons {
    display : flex;
}

.daterangepicker.auto-apply .drp-buttons {
    display : none;
}

.daterangepicker .drp-calendar {
    display   : none;
    max-width : var(--maxWidth, unset);
    min-width : 45%;
    width     : 100%;
    flex-grow : 1;
}

@media (min-width:768px) {
    .daterangepicker .drp-calendar {
        --maxWidth:285px;
    }
}

.daterangepicker .drp-calendar.left {}

.daterangepicker .drp-calendar.right {}

.daterangepicker .drp-calendar.single .calendar-table {
    border : none;
}

.daterangepicker .calendar-table .next,
.daterangepicker .calendar-table .prev {
    border        : solid #dfdfdf;
    border-width  : 2px;
    width         : 46px;
    height        : 40px;
    border-radius : 4px;
}


.daterangepicker .calendar-table .next span,
.daterangepicker .calendar-table .prev span {
    color         : #fff;
    border        : solid black;
    border-width  : 0 2px 2px 0;
    border-radius : 0;
    display       : inline-block;
    padding       : 4px;
}

.daterangepicker .calendar-table .next span {
    transform         : rotate(-45deg);
    -webkit-transform : rotate(-45deg);
}

.daterangepicker .calendar-table .prev span {
    transform         : rotate(135deg);
    -webkit-transform : rotate(135deg);
}

.daterangepicker .calendar-table th,
.daterangepicker .calendar-table td {
    white-space    : nowrap;
    text-align     : center;
    vertical-align : middle;
    min-width      : 40px;
    width          : 40px;
    height         : 40px;
    font-size      : 16px;
    font-weight    : 500;
    border         : 1px solid transparent;
    white-space    : nowrap;
    cursor         : pointer;
}

.daterangepicker .calendar-table tbody td {
    border-width : 1px 0 0 1px;
    border-color : #dfdfdf;
    border-style : solid;
}

.daterangepicker .calendar-table tbody td:last-child {
    border-right-width : 1px;
}

.daterangepicker .calendar-table tbody tr:last-child td {
    border-bottom-width : 1px;
}

.daterangepicker .calendar-table {
    border           : 1px solid #fff;
    border-radius    : 4px;
    background-color : #fff;
}

.daterangepicker .calendar-table table {
    width              : 100%;
    margin             : 0;
    border-spacing     : 0;
    /* border-collapse : collapse; */
}

.daterangepicker td.available:hover,
.daterangepicker th.available:hover {
    background-color : #5DBEA3;
    color            : var(--white-color);
    border-color     : transparent;
}

.daterangepicker td.week,
.daterangepicker th.week {
    font-size : 80%;
    color     : #ccc;
}

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

.daterangepicker td.in-range {
    background-color : var(--secondary3-color);
    color            : var(--white-color);
    border-color     : transparent;
    border-radius    : 0;
}

.daterangepicker td.start-date {
    border-radius : 4px 0 0 4px;
}

.daterangepicker td.end-date {
    border-radius : 0 4px 4px 0;
}

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

.daterangepicker td.active,
.daterangepicker td.active:hover {
    background-color : #5DBEA3;
    border-color     : transparent;
    color            : #fff;
}

.daterangepicker th.month {
    width       : auto;
    font-size   : 1.8rem;
    font-weight : 700;
}

.daterangepicker td.disabled,
.daterangepicker option.disabled {
    color           : #999;
    cursor          : not-allowed;
    text-decoration : line-through;
}

.daterangepicker select.monthselect,
.daterangepicker select.yearselect {
    font-size : 12px;
    padding   : 1px;
    height    : auto;
    margin    : 0;
    cursor    : default;
}

.daterangepicker select.monthselect {
    margin-right : 2%;
    width        : 56%;
}

.daterangepicker select.yearselect {
    width : 40%;
}

.daterangepicker select.hourselect,
.daterangepicker select.minuteselect,
.daterangepicker select.secondselect,
.daterangepicker select.ampmselect {
    width         : 80px;
    margin        : 0 auto;
    background    : #eee;
    border        : 1px solid #eee;
    padding       : 8px;
    border-radius : 4px;
    outline       : 0;
    font-size     : 1.4rem;
    text-align    : center;
    flex-grow     : 1;
}

.daterangepicker .calendar-time {
    text-align  : center;
    margin      : 15px auto 0 auto;
    line-height : 30px;
    position    : relative;
    display     : flex;
    flex-wrap   : wrap;
    gap         : 5px;
}

.daterangepicker .calendar-time::before {
    display       : block;
    font-size     : 1.8rem;
    line-height   : 2.4rem;
    font-weight   : 700;
    margin-bottom : 5px;
    width         : 100%;
}

.drp-calendar.left .calendar-time::before {
    content : 'Afhaal tijd';
}

.drp-calendar.right .calendar-time::before {
    content : 'Inlever tijd';
}

.daterangepicker .calendar-time select.disabled {
    color  : #ccc;
    cursor : not-allowed;
}

.daterangepicker .drp-buttons {
    text-align      : right;
    display         : none;
    vertical-align  : middle;
    justify-content : space-between;
    width           : 100%;
}

.daterangepicker .drp-btn {
    font-size     : 1.6rem;
    font-weight   : 600;
    border-radius : 20px;
}

.daterangepicker .drp-btn.cancelBtn {
    border           : 2px solid var(--secondary6-color);
    padding          : 11px 24px;
    background-color : transparent;
}

.daterangepicker .drp-btn.applyBtn {
    padding          : 13px 28px;
    background-color : var(--secondary1-color);
    color            : var(--white-color);
}

.daterangepicker .drp-btn.applyBtn:focus,
.daterangepicker .drp-btn.applyBtn:hover {
    background-color : var(--primary1-color);

}

.drp-calendar.left .saturday .hourselect option:nth-child(-n+8),
.drp-calendar.left .saturday .hourselect option:nth-child(n+18),
.drp-calendar.left .sunday .hourselect option:nth-child(-n+8),
.drp-calendar.left .sunday .hourselect option:nth-child(n+14) {
    display : none;
}


.drp-calendar.left :is(.friday, .thursday, .wednesday, .tuesday, .monday) .hourselect option:nth-child(-n+8),
.drp-calendar.left :is(.friday, .thursday, .wednesday, .tuesday, .monday) .hourselect option:nth-child(n+20) {
    display : none;
}

.drp-calendar.left .hourselect option:nth-child(-n+8),
.drp-calendar.left .hourselect option:nth-child(n+20) {
    display : none;
}


.daterangepicker .drp-btn-border {
    border-width : 2px;
    border-style : solid;
}

.daterangepicker .drp-selected {
    display : none;
}

.daterangepicker.show-ranges.single.rtl .drp-calendar.left {
    border-right : 1px solid #ddd;
}

.daterangepicker.show-ranges.single.ltr .drp-calendar.left {
    border-left : 1px solid #ddd;
}

.daterangepicker.show-ranges.rtl .drp-calendar.right {
    border-right : 1px solid #ddd;
}

.daterangepicker.show-ranges.ltr .drp-calendar.left {
    border-left : 1px solid #ddd;
}

.daterangepicker .ranges {
    float      : none;
    text-align : left;
    margin     : 0;
}

.daterangepicker .ranges:empty {
    display : none;
}

.daterangepicker.show-calendar .ranges {
    margin-top : 8px;
}

.daterangepicker .ranges ul {
    list-style : none;
    margin     : 0 auto;
    padding    : 0;
    width      : 100%;
}

.daterangepicker .ranges li {
    font-size : 12px;
    padding   : 8px 12px;
    cursor    : pointer;
}

.daterangepicker .ranges li:hover {
    background-color : #eee;
}

.daterangepicker .ranges li.active {
    background-color : #08c;
    color            : #fff;
}

/*  Larger Screen Styling */
@media (min-width: 564px) {
    .daterangepicker {
        width : auto;
    }

    .daterangepicker .ranges ul {
        width : 140px;
    }

    .daterangepicker.single .ranges ul {
        width : 100%;
    }

    .daterangepicker.single .drp-calendar.left {
        clear : none;
    }

    /* .daterangepicker.single .ranges, .daterangepicker.single .drp-calendar {
      float: left;
    } */

    .daterangepicker {
        direction  : ltr;
        text-align : left;
    }

    .daterangepicker .drp-calendar.left {
        clear        : left;
        margin-right : 0;
    }

    .daterangepicker .drp-calendar.left .calendar-table {
        border-right               : none;
        border-top-right-radius    : 0;
        border-bottom-right-radius : 0;
    }

    .daterangepicker .drp-calendar.right {
        margin-left : 0;
    }

    .daterangepicker .drp-calendar.right .calendar-table {
        border-left               : none;
        border-top-left-radius    : 0;
        border-bottom-left-radius : 0;
    }

    /* .daterangepicker .ranges, .daterangepicker .drp-calendar {
      float: left;
    } */
}

@media (min-width: 730px) {
    .daterangepicker .ranges {
        width : auto;
    }

    /* .daterangepicker .ranges {
      float: left;
    }

    .daterangepicker.rtl .ranges {
      float: right;
    } */

    .daterangepicker .drp-calendar.left {
        clear : none !important;
    }
}