/**********************************************SearchTab Modals******************************************************/

/********Search tab Modals Start*********/

/*Departure Date modal*/
/***************Date Range Picker Start*******************/

.modal .daterangepicker {
    display: contents !important
}

.daterangepicker .drp-calendar.left {
    padding: 8px 0 !important
}

.daterangepicker .drp-calendar {
    max-width: 50% !important
}

    .daterangepicker .drp-calendar.single {
        max-width: 100% !important
    }

.daterangepicker th.month {
    width: auto;
    font-size: x-large !important;
    padding: 10px 35px;
    color: #3c4e5a
}

.daterangepicker select.monthselect {
    line-height: 1.5;
    height: 40px !important;
    width: 55% !important;
    border-radius: var(--main-border-radius);
    padding: 0px 10px;
    font-size: 16px;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("/assets-mobile/img/icon/chevron-down-outline.svg");
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: calc(100% - 10px) center;
    background: #ffffff;
    border: 1px solid #767676;
    color: #222222;
}

.daterangepicker select.yearselect {
    line-height: 1.5;
    height: 40px !important;
    width: 45% !important;
    border-radius: var(--main-border-radius);
    padding: 0px 10px;
    font-size: 16px;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("/assets-mobile/img/icon/chevron-down-outline.svg");
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: calc(100% - 10px) center;
    background: #ffffff;
    border: 1px solid #767676;
    color: #222222;
}

td.available {
    font-size: larger;
    padding: 6px 3px;
    color: #3c4e5a
}

@media(min-width: 564px) {
    .daterangepicker .drp-calendar.right {
        width: 50%
    }
}

.modal .drp-buttons {
    display: none !important
}

th {
    border: none !important
}

.table-condensed {
    border-spacing: 0px 5px !important;
    border-collapse: separate !important
}

.daterangepicker td.active, .daterangepicker td.active:hover {
    background-color: #02aaa9 !important;
    color: #fff
}

.daterangepicker td.active {
    background-color: #02aaa9 !important;
    color: #fff !important
}

.daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date {
    border: none !important
}

.daterangepicker td.disabled, .daterangepicker option.disabled {
    padding: 6px 3px;
    text-decoration: none !important
}

.daterangepicker td.available:hover, .daterangepicker th.available:hover {
    background-color: #fff !important;
    color: var(--primary-color) !important;
    border: 1px solid;
    border-radius: var(--main-border-radius);
}

.daterangepicker .calendar-table thead::after {
    content: " ";
    border-bottom: 1px solid #ddd;
    height: 0px;
    width: 94%;
    position: absolute;
    left: 3%;
}


/***************Date Range Picker End*******************/
.daterangepicker .calendar-table thead::after {
    content: none;
}

.drp-calendar {
    width: 100%;
}

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

.daterangepicker .calendar-table th, .daterangepicker .calendar-table td {
    white-space: nowrap;
    text-align: center;
    vertical-align: middle;
    min-width: 32px;
    width: 32px;
    height: 24px;
    line-height: 24px;
    font-size: 14px;
    border-radius: 0px;
    border: 1px solid transparent;
    white-space: nowrap;
    cursor: pointer;
}

    .daterangepicker .calendar-table td.off.ends {
        background: white !important;
        color: white !important;
        pointer-events: none;
        user-select: none;
    }

.daterangepicker td.active {
    background-color: var(--primary-color) !important;
    color: #fff !important;
}


    .daterangepicker td.active.start-date {
        border-radius: var(--main-border-radius) 0px 0px var(--main-border-radius);
    }

td.active.start-date.available {
}

td.active.end-date {
    border-radius: 0px var(--main-border-radius) var(--main-border-radius) 0px;
}

.daterangepicker td.start-date.end-date {
    border-radius: var(--main-border-radius);
}

.custom-radio input[type='radio']:before {
    content: '';
    display: block;
    width: 15px;
    height: 15px;
    border-radius: var(--small-border-radius);
}

input[type="radio"]:checked:before {
    border: 5px solid var(--primary-color);
    background: #fff;
}

.custom-control-label {
    margin-left: 5px;
}

/*.custom-control-input:checked .custom-control-label::before {
    color: #fff;
    border-color: var(--primary-color);
    background-color: var(--primary-color);
}
.custom-control-label::after {
    position: absolute;
    top: .25rem;
    left: -1.5rem;
    display: block;
    width: 1rem;
    height: 1rem;
    content: "";
    background: no-repeat 50%/50% 50%;
}*/
/* Rooms Modal*/

.roomsModalBody .icon-box {
    display: table-cell;
    vertical-align: middle;
    font-size: 20px;
}

.roomsModalBody .icon-label {
    margin: auto;
    font-size: 18px;
    text-align: left;
    height: 100%;
    display: table;
    display: table;
    width: 100%;
}

.roomsModalBody .label-text {
    display: table-cell;
    vertical-align: middle;
}

.roomsModalBody showage {
    width: 25%;
}

.roomsModalBody .showage {
    display: inline-block;
    width: 46%;
    /* border-radius: var(--main-border-radius); */
    margin: 0px 10px 10px 0px;
}

    .roomsModalBody .showage select {
        border: 1px solid #02aaa9;
        border-radius: var(--main-border-radius);
        /* background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat right #ddd; */
        /* -webkit-appearance: none; */
        /* background-position-x: 244px; */
        position: relative;
        appearance: auto;
        -webkit-appearance: auto;
    }


.roomsModalBody .stepper-outline-primary .stepper-button {
    border: 2px solid #02aaa9;
    color: #02aaa9;
}

.roomsModalBody .stepper-outline-primary .form-control {
    border: none;
    color: black;
    
}

.roomsModalBody .stepper-outline-primary .stepper-button:first-child {
    border-right: 2px solid #02aaa9;
}

.roomsModalBody .stepper-outline-primary .stepper-button.stepper-down-btn {
    border-radius: 6px !important;
}

.roomsModalBody .stepper-outline-primary .stepper-button:last-child {
    border-left: 2px solid #02aaa9;
}

.roomsModalBody .stepper-outline-primary .stepper-button.stepper-up-btn {
    border-radius: var(--small-border-radius);
}

.roomsModalBody .card .card-title {
    font-size: 16px;
    background: lightgrey;
    padding: 10px 16px;
    border-radius: var(--small-border-radius) var(--small-border-radius) 0px 0px;
    margin: 0;
}

.roomsModalBody .card {
    border: 1px solid;
    margin-bottom: 10px;
    padding: 0px;
}

    .roomsModalBody .card .card-header {
        padding: 0px;
    }

.roomsModalBody .card {
    overflow: hidden;
    border-color: var(--primary-color);
    border-radius: var(--main-border-radius);
}

    .roomsModalBody .card .card-title {
        background: transparent;
        color: #fff;
    }

.card .card-header {
    background: var(--primary-color);
}

.RegionEnd {
    border-bottom: 1px solid #dee2e6;
    margin-bottom: 25px;
}

.overflow-control-description {
    padding-left: .8rem;
    font-size: 16px;
    color: #3c4e5a !important;
}

.custom-control.overflow-checkbox {
    --color: #26a69a;
    padding-bottom: .5rem;
    padding-top: .4rem;
}

.applyBtn {
    color: #fff;
    background: var(--primary-color);
    border-radius: var(--small-border-radius);
    min-width: 200px;
}

    .applyBtn:hover {
        color: white;
        background: var(--primary-color);
        border: 2px solid var(--primary-color-2);
    }

.clearBtn {
    border: 1px solid;
    border-radius: var(--small-border-radius);
}
/*Region modal*/

.searchTabModal #searchResortHotelBox {
    width: 50%;
    padding-left: 30px;
    margin-left: 25px;
    height: 50px;
    border: 1px solid gray;
    border-radius: var(--main-border-radius);
}

    .searchTabModal #searchResortHotelBox input#flex1 {
        width: 93%;
        border: none;
    }
    .searchTabModal #searchResortHotelBox #flex0 {
        border: none;
        width: 93%;
        display: inline-block;
        background: transparent;
        margin: 0;
        font-size: inherit;
    }

input#flex1:focus {
    outline: none;
}
input#flex0:focus-visible {
    outline: none;
}
.searchTabModal #searchResortHotelBox ion-icon {
    display: inline-block;
    font-size: 25px;
    margin: auto;
    margin-left: 5px;
    width: 25px;
}
.searchTabModal .modal-dialog .modal-content .modal-body {
    margin-top: 15px;
    padding: 10px 20px;
    overflow-y: auto;
    max-height: calc(65vh - 150px);
}

@media only screen and (max-width: 768px) {
    .searchTabModal .modal-dialog .modal-content .modal-body {
        max-height: auto;
    }
}

/********Search tab Modals End*********/

.modalbox {
    padding-top: env(safe-area-inset-top);
    overflow: hidden;
}

    .modalbox .modal-dialog {
        transform: translate(0, 100%) !important;
        min-width: 100%;
        margin: 0;
        transition: 0.5s all !important;
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin-top: env(safe-area-inset-top);
    }

        .modalbox .modal-dialog .modal-content {
            border-radius: 0;
            border: 0;
            margin: auto;
            overflow: hidden;
            padding-top: 56px;
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
        }

            .modalbox .modal-dialog .modal-content .modal-header {
                border: 0;
                padding: 0;
                min-height: 56px;
                padding: 10px 16px;
                border-radius: 0;
                display: flex;
                border-bottom: 1px solid #E1E1E1;
                align-items: center;
                justify-content: space-between;
                margin: 0;
                position: fixed;
                left: 0;
                right: 0;
                top: 0;
                width: 100%;
                z-index: 100;
                background: #FFF;
            }

                .modalbox .modal-dialog .modal-content .modal-header .modal-title {
                    margin: 0;
                    color: #141515;
                    font-size: 17px;
                }

            .modalbox .modal-dialog .modal-content .modal-body {
                padding: 20px 16px;
                overflow: auto;
            }

    .modalbox.show .modal-dialog {
        transform: translate(0, 0) !important;
    }