.default-calendar {
    background-color: initial;
    height: 500px;
    position: relative
}

@media(max-width: 600px) {
    .default-calendar {
        background-color: initial;
        height: 900px;
        position: relative
    }
}

#dateRangeDiv {
    visibility: hidden;
    height: 0px !important;
    width: 0px !important
}

.daterangepicker .calendar-table td.off.ends {
    visibility: hidden
}

#append_datepicker_section:before {
    display: none
}

#append_datepicker_section .daterangepicker {
    display: block !important;
    top: 0px !important;
    width: 100%;
    box-shadow: none
}

    #append_datepicker_section .daterangepicker:after, #append_datepicker_section .daterangepicker:before {
        display: none
    }

#append_datepicker_section .drp-calendar {
    padding: 10px;
    max-width: none
}

.daterangepicker .calendar-table td {
    height: auto;
    width: auto;
    padding: 10px 5px;
    font-size: .85rem
}

.daterangepicker {
    font-family: var(--body) !important
}

    .daterangepicker .calendar-table th {
        line-height: inherit !important;
        padding: 0
    }

    .daterangepicker td {
        border: 2px solid #fff !important;
        border-radius: 0 !important;
        position: relative
    }

    .daterangepicker .month {
        padding: 0 !important
    }

        .daterangepicker .month select {
            border: none;
            padding: 5px !important;
            font-size: .85rem !important;
            background: #f9f9f9;
            border-radius: 5px !important;
            border: 1px solid #ccc !important;
            color: var(--text-color) !important
        }

    .daterangepicker thead .monthselect, .daterangepicker thead .yearselect, .daterangepicker thead .next span, .daterangepicker thead .previous span {
        margin-bottom: 1rem !important
    }

    .daterangepicker thead tr:nth-of-type(2) th {
        font-weight: 700;
        opacity: .75
    }

.daterangepicker {
    box-shadow: 0 0 25px rgba(0,0,0,.2)
}

    .daterangepicker td.active, .daterangepicker td.active:hover {
        background-color: var(--primary-light) !important;
        color: #222 !important
    }

    .daterangepicker td.in-range {
        background-color: var(--primary-light) !important
    }

    .daterangepicker .btn-simple, .daterangepicker .btn-theme {
        font-size: .85rem;
        margin-left: 5px
    }

    .daterangepicker .btn-theme {
        margin: 0 0 0 5px;
        background: var(--primary-light)
    }

        .daterangepicker .btn-theme:after {
            display: none
        }

    .daterangepicker .btn-simple:hover {
        background: none
    }

    .daterangepicker .btn-theme:hover {
        background: var(--primary)
    }

    .daterangepicker td.disabled {
        color: #999 !important;
        background: none !important;
        text-decoration: none !important;
        position: relative
    }

        .daterangepicker td.disabled:before {
            width: 16px;
            height: 1px;
            content: "";
            background: red;
            position: absolute;
            bottom: 50%;
            left: calc(50% - 8px)
        }

    .daterangepicker td.selected-date {
        background-color: var(--primary-light) !important;
        color: #222 !important
    }

        .daterangepicker td.selected-date:before {
            display: none !important
        }

.group-date {
    background-color: var(--light);
    color: #222
}

.daterangepicker .nonselectabledates {
    background: none !important;
    opacity: .7
}

.daterangepicker .available {
    color: #111;
    opacity: 1;
    font-weight: 500
}

.daterangepicker .selected-date {
    text-decoration: none !important;
    color: #222 !important
}

.daterangepicker td.available:hover, .daterangepicker th.available:hover {
    background: #fff !important;
    box-shadow: inset 0 0 0 2px var(--primary)
}

.daterangepicker .group-date {
    background: var(--light) !important;
    border: 2px solid #fff
}

.cal-legend ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem
}

    .cal-legend ul li {
        font-size: .7rem;
        display: flex;
        gap: .35rem;
        align-items: center;
        position: relative
    }

        .cal-legend ul li:before {
            display: block;
            content: "7";
            width: 15px;
            height: 15px;
            background: #fff;
            border-radius: 3px;
            display: grid;
            align-content: center;
            text-align: center;
            color: #888;
            border: 1px solid #999
        }

        .cal-legend ul li.cal-legend-reserved:after {
            width: 10px;
            height: 1px;
            content: "";
            background: red;
            position: absolute;
            bottom: 50%;
            left: 3px
        }

        .cal-legend ul li.cal-legend-selection:before {
            background: var(--primary-light);
            content: ""
        }

        .cal-legend ul li.cal-legend-together:before {
            background: linear-gradient(0deg, rgb(237, 232, 219) 0%, rgb(237, 232, 219) 50%, rgb(217, 206, 176) 51%);
            content: ""
        }

        .cal-legend ul li.cal-legend-sameday:before {
            content: "?"
        }

.search.sidebar-search #calendarInput {
    padding: 10px;
    text-align: center
}

.daterangepicker .group-date-1 {
    background: var(--light) !important;
    border: 2px solid #fff
}

.daterangepicker .group-date-2 {
    background: var(--tertiary) !important;
    border: 2px solid #fff
}

.daterangepicker .month:nth-child(2) {
    padding-right: 6px !important;
    padding-left: 4px !important
}

.daterangepicker select.yearselect {
    width: 45% !important
}

.must-buy, .daterangepicker .group-date-1.must-buy, .daterangepicker .group-date-2.must-buy {
    background: #fabb87 !important
}

.daterangepicker td.must-buy.available:hover {
    background: #fabb87 !important;
    box-shadow: inset 0 0 0 2px var(--primary)
}

.daterangepicker .group-date-1.selected-date, .daterangepicker .group-date-2.selected-date {
    background: var(--primary-light) !important
}

.drp-buttons {
    display: flex !important;
    justify-content: flex-end;
    align-items: center;
    padding-left: .75rem
}

    .drp-buttons .dates {
        font-size: .85rem
    }

        .drp-buttons .dates span + span:before {
            content: "|";
            margin: 0 10px 0 0;
            color: #ccc
        }

    .drp-buttons .drp-selected {
        margin-right: auto;
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        row-gap: 10px
    }

    .drp-buttons .separator {
        color: #ccc;
        margin: 0 .25rem;
        display: inline-block
    }

    .drp-buttons .remove-date {
        text-decoration: underline
    }

        .drp-buttons .remove-date:hover, .drp-buttons .remove-date:active {
            text-decoration: none;
            cursor: pointer
        }

.color-heading {
    padding: 10px;
    background-color: #f9f9f9;
    border-bottom: 1px solid #ddd;
    display: flex;
    border-radius: 4px 4px 0 0
}

    .color-heading p {
        margin: 0;
        font-size: 12px;
        line-height: 1.5;
        margin-right: 10px
    }

.color-box {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 5px;
    vertical-align: middle
}

.validation-heading {
    color: #842029;
    background-color: #f8d7da;
    border-color: #f5c2c7;
    margin: 20px 20px 0 20px;
    padding: 1rem;
    border-radius: 4px
}

    .validation-heading ul {
        margin: 0;
        padding: 0
    }

.invalid-dates {
    display: none !important;
    color: #cd2e3d;
    font-weight: 500;
    line-height: 1.3;
    font-size: .75rem
}

    .invalid-dates.active {
        display: block !important
    }

.validation-heading {
    display: none
}

    .validation-heading.active {
        display: block !important
    }

    .validation-heading .invalid-dates i {
        margin-right: 2px
    }

.minstay2 .price-date.active.start-date + .price-date:not(.nonselectabledates):not(.off):not(.disabled) {
    background: #fabb87 !important;
}


.minstay2 tr td.price-date.active.start-date + td.group-date-1:not(.nonselectabledates):not(.off):not(.disabled),
.minstay2 tr td.price-date.active.start-date + td.group-date-2:not(.nonselectabledates):not(.off):not(.disabled) {
    background: #fabb87 !important;
}

.minstay2 tr td.price-date.active.start-date + td.group-date-1 ~ td.group-date-1:not(.nonselectabledates):not(.off):not(.disabled),
.minstay2 tr td.price-date.active.start-date + td.group-date-2 ~ td.group-date-2:not(.nonselectabledates):not(.off):not(.disabled) {
    background: #fabb87 !important;
}

.minstay2 tr:has(.price-date.active.start-date:last-child) + tr td:first-child:not(.nonselectabledates):not(.off):not(.disabled) {
    background: #fabb87 !important;
}

.minstay2 tr:has(.price-date.active.start-date:last-child) + tr td.group-date-1:first-of-type:not(.nonselectabledates):not(.off):not(.disabled),
.minstay2 tr:has(.price-date.active.start-date:last-child) + tr td.group-date-2:first-of-type:not(.nonselectabledates):not(.off):not(.disabled) {
    background: #fabb87 !important;
}

@media(max-width: 767px) {
    .daterangepicker:not(#append_datepicker_section .daterangepicker):not(#sidebar-affix .daterangepicker) {
        width: 100%;
        height: 100%;
        overflow-x: scroll;
        top: 0px !important;
        bottom: 0px !important;
        left: 0px !important;
        right: 0px !important;
        position: fixed;
        margin: 0px;
        padding: 1rem;
    }

        .daterangepicker .drp-calendar {
            max-width: none !important;
            width: auto
        }

    .color-heading p {
        font-size: 10px !important
    }
}

@media(min-width: 654px) {
    #append_datepicker_section .drp-calendar {
        width: 50%;
        padding: 1.5rem
    }

    .daterangepicker .drp-calendar.left, .daterangepicker .drp-calendar.right {
        margin: 0 !important;
        padding: 1rem .5rem 1rem 1rem !important;
        width: 50% !important;
        max-width: inherit !important
    }

    .daterangepicker .drp-calendar.right {
        padding: 1rem 1rem 1rem .5rem !important
    }

    #sidebar-affix .daterangepicker {
        width: 545px;
        left: auto !important;
        right: 0 !important
    }

    .daterangepicker.opensright:before {
        left: auto !important;
        right: 241px !important
    }

    .daterangepicker.opensright:after {
        left: auto !important;
        right: 242px !important;
        border-bottom-color: #f9f9f9 !important
    }
}

.date-details {
    display: grid;
    grid-template-columns: auto 150px;
    gap: 10px
}

    .date-details .btn-theme {
        padding: .75rem;
        font-size: .85rem;
        margin: .5rem 0;
        text-align: center
    }

.search.sidebar-search .date-details {
    grid-template-columns: auto;
    gap: 10px
}

    .search.sidebar-search .date-details .btn-theme {
        padding: .75rem;
        font-size: .85rem;
        margin: 0
    }

.btn-dates {
    display: flex;
    gap: 15px;
    justify-content: center;
    text-decoration: underline
}

    .btn-dates .fa {
        margin-left: auto;
        float: right
    }

@media(max-width: 563px) {
    #sidebar-affix .daterangepicker {
        position: fixed;
        inset: 0;
        margin: 0;
        left: 0 !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        overflow-y: scroll;
        padding: 1rem;
        width: 100vw;
        height: 100vh
    }
}

@media(max-width: 992px) {
    .search.sidebar-search .date-details {
        display: grid;
        grid-template-columns: auto 150px;
        gap: 10px
    }

    .bottom-affix {
        position: fixed;
        bottom: 0;
        right: 0;
        left: 0;
        padding: 1.25rem;
        box-shadow: 0 0 25px rgba(0,0,0,.2)
    }

        .bottom-affix + .additional-links {
            padding: 0
        }
}