/*------ RESTOOL styles ---*/
.horizontal-restool {
    border: 1px solid var(--neutral-midmedium);
    border-radius: 20px;
    padding: 20px;
    margin: -175px auto 0 auto;
    background-color: var(--neutral-white);
    width: var(--page-width-medium);
    box-sizing: border-box;
    position: relative;
    z-index: 100;
}

    .horizontal-restool h2 {
        margin: 0;
        padding: 0;
    }

    /*--------RESTOOL form fields -----------*/
    .horizontal-restool input[type="text"],
    .horizontal-restool select,
    .horizontal-restool textarea,
    .plugin-item_nowrap.selectize-control.single .selectize-input {
        border: 1px solid var(--neutral-medium);
        border-radius: 8px;
        padding: 10px 14px;
        background-color: var(--neutral-white);
        font-family: var(--display-1-ff);
        font-size: var(--display-1-fs);
        line-height: var(--display-1-lh);
        letter-spacing: var(--display-1-ls);
        color: var(--neutral-dark) !important;
    }

    .horizontal-restool .plugin-item_nowrap.selectize-control.single .selectize-input {
        width: 100%;
        padding: 10px;
        background-color: var(--neutral-white);
        font-family: var(--display-1-ff);
        font-size: var(--display-1-fs);
        line-height: var(--display-1-lh);
        letter-spacing: var(--display-1-ls);
        color: var(--neutral-dark) !important;
        min-height: 4.6rem;
    }


.horizontal-restool input[type="text"] {
    padding: 10px;
}
    .horizontal-restool select {
        min-width: 90px;
        font-family: var(--display-1-ff);
        font-size: var(--display-1-fs);
        line-height: var(--display-1-lh);
        letter-spacing: var(--display-1-ls);
    }

    .horizontal-restool label {
        margin-right: 10px;
        font-family: var(--display-3-ff);
        font-size: var(--display-3-fs);
        line-height: var(--display-3-lh);
        letter-spacing: var(--display-3-ls);
    }

    .horizontal-restool p.rooms-hotel-label,
    .horizontal-restool .restool-rooms-passengers-section-interior p {
        font-family: var(--display-3-ff);
        font-size: var(--display-3-fs);
        letter-spacing: var(--display-3-ls);
    }

#departDate input,
#returnDate input {
    background-image: url("https://trisept.widen.net/content/uyaqd72onx/png/UNH_ICON_CALENDAR_universalHollywood.png");
    background-repeat: no-repeat;
    background-position: 95% 6px;
    border-radius: 3px;
    border: 1px solid var(--neutral-medium);
}

input.dateField {
    background-image: url("https://trisept.widen.net/content/uyaqd72onx/png/UNH_ICON_CALENDAR_universalHollywood.png");
    background-repeat: no-repeat;
    background-position: 10px 50%;
    background-size: 18px;
    border-radius: 3px;
    border: 1px solid var(--neutral-medium);
    padding-left: 34px !important;
}

.actbBgColor {
    background-color: var(--neutral-white);
}

#tat_table li {
    padding-left: 10px;
}

.subLabel {
    font-size: 1.2rem;
}

    .subLabel a:active {
        color: var(--neutral-dark);
    }

.displayNone {
    display: none;
}

.visibilityHidden {
    display: none;
}

.actbHColor {
    background-color: var(--primary);
    color: #FFFFFF;
}

.horizontal-restool .selectize-dropdown-content .active {
    background-color: var(--secondary);
    color: var(--neutral-white);
    font-weight: normal;
    font-family: var(--title-2-ff);
}

.ui-datepicker-calendar .ui-state-active .ui-state-active {
    background: var(--secondary) none repeat scroll 0 0;
    color: var(--neutral-white);
}

/*--------RESTOOL headline and text -----------*/
.restool-text {
    padding: 0 10px;
    display: flex;
    justify-content: space-between;
}



/*--------RESTOOL packages -----------*/
.restool-packages {
    display: flex;
    margin-bottom: 20px;
    flex-direction: column;
}


#packageRadios {
    padding: 0 10px;
}

    #packageRadios ul {
        display: flex;
    }

        #packageRadios ul li {
            display: flex;
            align-items: center;
        }

            #packageRadios ul li label {
                padding: 0 15px 0 5px;
                line-height: 1rem;
            }




/*--------RESTOOL origin, destination, dates -----------*/
.restool-locations-dates {
    display: flex;
    margin-bottom: 20px;
}

.restool-origin {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0 10px;
}

.restool-destination {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0 10px;
}

.restool-destination-inner {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.restool-date {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 0 10px;
    width: calc(100% / 5);
    position: relative;
}

/*--------RESTOOL rooms and passengers -----------*/
.restool-rooms-passengers-section {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0;
}

.restool-rooms-passengers-section-interior {
    display: flex;
    align-items: flex-start;
    padding: 0 10px;
    position: relative;
}

.restool-passengers {
    display: flex;
    align-items: flex-start;
}



.restool-rooms {
    display: flex;
    flex-direction: column;
}

#passengersInput {
    margin-left: 40px;
    width: calc(100% / 2);
    position: relative;
}

.rooms {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.restool-children label span {
    font-size: 1.2rem;
}

.restool-adults {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0 10px;
}

.restool-children {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    padding: 10px 0;
}

.childrenFields {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    padding: 0 10px;
}

    .restool-children div {
        display: flex;
        flex-direction: column;
    }

    .restool-children label {
        display: flex;
        flex-direction: column;
        white-space: nowrap;
    }

.restool-children-selection {
    display: flex;
    flex-direction: column;
}

.restool-adults label {
    display: flex;
    flex-direction: column;
    white-space: nowrap;
}

.restool-children-ages {
    margin-top: 15px;
}

.restool-adults label span {
    font-size: 1.2rem;
}

.childrenAgesFields {
    margin-bottom: 10px;
}

.maxPasLabel {
    display: none;
}

.multiRoomSection {
    position: relative;
}

    .multiRoomSection p {
        display: flex;
        align-items: center;
        padding: 0 10px;
    }

        .multiRoomSection p::after {
            content: "";
            flex: 1 1;
            border-bottom: 1px solid var(--neutral-midmedium);
            margin: auto 0 auto 10px;
        }


.maxPass {
    margin-top: 10px;
    padding: 0 10px;
}

#maxPAXPosition {
    margin-top: auto;
}



/*--------RESTOOL promo and submit -----------*/
.restool-promo-button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    padding: 0 10px;
}

.restool-button p {
    text-align: right;
}

.restool-promo {
    display: flex;
    flex-direction: column;
}

.optional {
    font-family: var(--display-1-ff);
    font-size: var(--display-1-fs);
    line-height: var(--display-1-lh);
    letter-spacing: var(--display-1-ls);
}

.horizontal-restool .ajax__validatorcallout_popup_table {
    z-index: 5 !important;
    width: 200px;
    top: auto !important;
    left: auto !important;
    transform: translate(-15px, 77px);
}

.horizontal-restool .ajax__validatorcallout_popup_table_reverse {
    transform: translate(0px, 77px);
}


.horizontal-restool .childrenAges .ajax__validatorcallout_popup_table {
    transform: translate(-15px, -1px);
}


.horizontal-restool .ajax__validatorcallout_callout_arrow_cell {
    left: 25px !important;
    right: auto !important;
    top: -19px !important;
    bottom: auto !important;
    transform: rotate(90deg);
    position: relative;
}

.horizontal-restool .ajax__validatorcallout_callout_arrow_cell_reverse {
    left: auto !important;
    right: 35px !important;
    top: -19px !important;
    bottom: auto !important;
    transform: rotate(-90deg);
    position: relative;
}

/*--------RESPONSIVE-----------*/

@media screen and (max-width: 1148px) {
    .horizontal-restool {
        margin: -180px auto 0 auto;
    }    
}

@media screen and (max-width: 992px) {
    .horizontal-restool {
        width: var(--page-width-responsive);
    }

    .restool-locations-dates,
    .restool-passengers {
        flex-direction: column;
    }

    .restool-date {
        width: calc(100% / 1);
    }

    .restool-children {
        margin-left: 0;
    }
}

@media (max-width: 768px) {
    .restool-passengers {
        flex-direction: column;
    }

    .restool-children {
        margin-left: 0;
    }

    .restool-dates-promo {
        flex-direction: column;
    }

    .restool-date {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        padding: 0 10px;
        width: 100%;
    }

    .restool-promo {
        display: flex;
        flex-direction: column;
        position: relative;
    }

    .restool-locations {
        flex-direction: column;
    }
}

@media (max-width: 576px) {
    .restool-text {
        flex-direction: column;
    }

    .restool-passengers {
        display: flex;
        flex-direction: column;
    }

    #packageRadios ul {
        flex-direction: column;
        justify-content: center;
    }

        #packageRadios ul li {
            padding: 1rem;
        }
            #packageRadios ul li label {
                line-height: 22px;
                padding: 0 15px 0 5px;
            }

            .restool-rooms-passengers-section-interior {
                flex-direction: column;
            }

    #passengersInput {
        margin: 40px 0 0 0;
        width: calc(100% / 1);
    }

    .multiRoomSection p {
        padding: 0;
    }

    .restool-adults,
    .restool-children,
    .childrenFields {
        padding: 0;
        margin-bottom: 15px;
    }

    .restool-promo-button {
        flex-direction: column;
        align-items: flex-start;
    }

    #submitgort {
        width: 100%;
        margin-top: 20px;
    }
}

@media (max-width: 414px) {
    #packageRadios ul li label {
        padding: 0 15px 0 25px;
    }
}

/*--------HIGH CONTRAST-----------*/
@media (forced-colors: active) {

    #departDate input,
    #returnDate input {
        background-image: url("https://trisept.widen.net/content/yxj0e3rean/jpeg/UNH_ICON_CALENDAR_universalHollywood-inverted.jpeg");
    }

    input.dateField {
        background-image: url("https://trisept.widen.net/content/yxj0e3rean/jpeg/UNH_ICON_CALENDAR_universalHollywood-inverted.jpeg");
    }

    .selectize-input input::placeholder {
        color: CanvasText;
    }
}