@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
    /* Brand Colors */
    --color-white: #FFFFFF;
    --color-white-rgb: 255 255 255;
    --color-black: #0A0A0A;
    --color-elyt-navy: #0049AF;
    --color-elyt-navy-rgb: 0 73 175;
    --color-elyt-teal: #00A19B;
    --color-elyt-teal-rgb: 0 161 155;
    --color-elyt-burgundy: #660033;
    --color-elyt-sand: #BFA688;
    --color-elyt-sand-rgb: 191 166 136;
    --color-elyt-grey: #666666;
    --background: var(--color-white);
    --foreground: var(--color-elyt-navy);
    --font-sans: ui-sans-serif, system-ui, sans-serif;
    --font-header: "Couture", "Inter", sans-serif;
    --font-body: "Inter", sans-serif;
    --background-image-gradient-emerald: linear-gradient(135deg, var(--color-elyt-navy), var(--color-elyt-teal));
    --background-image-gradient-bluestone: linear-gradient(135deg, var(--color-elyt-navy), var(--color-elyt-sand));
    --background-image-gradient-elyte: linear-gradient(135deg, var(--color-elyt-burgundy), var(--color-elyt-sand));
    --background-image-gradient-glass: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --default-transition-duration: .15s;
}

body {
    background: var(--background);
    color: var(--foreground);
    font-family: var(--font-body);
    line-height: 1.6;
    width: 100%;
    max-width: 100%;
}


.brand-font {
    font-family: var(--font-header);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 900;
}

.font-header {
    font-family: var(--font-header);
}

.elyt, .elyt * {
    box-sizing: border-box;
}

    .elyt h1, .elyt h2, .elyt h3, .elyt h4 {
        font-family: var(--font-header) !important;
        text-transform: uppercase !important;
        letter-spacing: 0.1em !important;
        font-weight: 900 !important;
    }

/* HEADER */
header.header-wl {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background-color: transparent;
    backdrop-filter: unset;
    min-height: unset;
    background-color: var(--color-elyt-navy);
    border-bottom: 1px solid rgb( 255 255 255 / 10%);
}

    header.header-wl .clear {
        display: none;
    }

    header.header-wl, header.header-wl * {
        box-sizing: border-box;
        margin: 0 !important;
        padding: 0 !important;
    }

        header.header-wl *,
        header.header-wl #navigation-wl a:link {
            color: var(--color-white) !important;
        }

        header.header-wl .container-wl {
            display: grid;
            align-items: center;
            grid-template-columns: 1fr auto 1fr;
            grid-template-areas: "logo nav curr";
            gap: 1rem;
            width: 100%;
            max-width: 100%;
            height: 100%;
            padding: 1rem 5% !important;
        }

            header.header-wl .container-wl:has(#mynav) {
                grid-template-columns: 1fr auto auto 1fr;
                grid-template-areas: "logo nav points curr";
            }

            header.header-wl .container-wl #logo-wl {
                grid-area: logo;
            }

            header.header-wl .container-wl #logo-wl,
            #logo-wl #logo,
            #logo-wl img {
                max-height: 35px !important;
                min-height: 35px !important;
            }

            header.header-wl .container-wl ul#navigation-wl {
                grid-area: curr;
                position: relative;
                inset: unset;
                display: flex;
                align-items: center;
                justify-content: end;
                gap: 10px;
            }

            header.header-wl .container-wl #mysubnav {
                grid-area: nav;
                display: flex;
                justify-content: center;
                gap: .5rem;
            }

            header.header-wl .container-wl #mynav {
                grid-area: points;
                display: flex;
                justify-content: center;
                gap: .5rem;
            }

            header.header-wl .container-wl #mysubnav a {
                display: flex;
                align-items: center;
                gap: .625rem;
                padding: .875rem 2rem !important;
                border: 1px solid var(--color-white);
                border-radius: .25rem;
                color: var(--color-white);
                font-size: .8rem;
                font-family: var(--font-header);
                font-weight: 900;
                text-transform: uppercase;
                letter-spacing: .1em;
                transition-property: all;
                transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
                transition-duration: .4s
            }

                header.header-wl .container-wl #mysubnav a:hover {
                    background-color: var(--color-elyt-navy);
                    border-color: var(--color-elyt-navy);
                    --tw-translate-y: -.125rem;
                    translate: var(--tw-translate-x)var(--tw-translate-y);
                }

        header.header-wl .subnav-container {
            display: none !important;
        }

#pg_Home header.header-wl {
    transition-property: all;
    transition-timing-function: var(--default-transition-timing-function);
    transition-duration: .5s;
    background-color: transparent;
    backdrop-filter: unset;
    border-bottom: 0;
}

    #pg_Home header.header-wl .container-wl {
        transition-property: all;
        transition-timing-function: var(--default-transition-timing-function);
        transition-duration: .5s;
        padding: 2rem 5% !important;
    }

/* Requires JS STICKY NAVIGATION section */
html:not([data-scroll='0']) #pg_Home header.header-wl {
    background-color: rgb(0 0 0 / 95%);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgb( 255 255 255 / 10%);
}

html:not([data-scroll='0']) #pg_Home .header-wl .container-wl {
    padding-block: 1rem !important;
}

@media (max-width: 767px) {
    header.header-wl .container-wl #mysubnav a {
        gap: .25rem;
        padding: .25rem .75rem !important;
        font-size: .6rem;
    }
}

#MainContent {
    margin-top: 100px !important;
}

#pg_Home #MainContent {
    margin-top: -75px !important;
}

/* END HEADER */

/* HOME */
#pg_Home .clear {
    display: none;
}

#pg_Home #landingpage #SearchSection {
    --bottom: 100px;
    background-image: url(https://assets.travertex.com/hp/img/elyt/hero_tropical_resort_v2.png);
    background-image: linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.25)), url(https://assets.travertex.com/hp/img/elyt/hero_tropical_resort_v2.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    position: relative;
    margin-bottom: var(--bottom);
}

    #pg_Home #landingpage #SearchSection,
    #pg_Home #landingpage #SearchSection * {
        box-sizing: border-box;
    }

        #pg_Home #landingpage #SearchSection:has(#tab1.currentTab) {
            --bottom: 100px;
        }

        #pg_Home #landingpage #SearchSection:has(#tab2.currentTab) {
            --bottom: 150px;
        }

        #pg_Home #landingpage #SearchSection:has(#tab8.currentTab) {
            --bottom: 100px;
        }

        #pg_Home #landingpage #SearchSection:has(#tab9.currentTab) {
            --bottom: 130px;
        }

        #pg_Home #landingpage #SearchSection:has(#tab11.currentTab) {
            --bottom: 160px;
        }

        #pg_Home #landingpage #SearchSection:has(#tab12.currentTab) {
            --bottom: 170px;
        }

        #pg_Home #landingpage #SearchSection .container {
            position: absolute;
            right: 0;
            left: 0;
            bottom: 0;
            margin-bottom: -85px;
            margin-bottom: calc(var(--bottom) * -0.85);
            width: 100%;
            padding-inline: 5%;
            z-index: 10;
        }

            #pg_Home #landingpage #SearchSection .container .tabs {
                --gap: 3px;
                --br-tab-links: 5px;
                --br-tab-panel: 32px;
                max-width: 1150px !important;
                width: 100% !important;
            }


                #pg_Home #landingpage #SearchSection .container .tabs ul.tab-links {
                    display: grid;
                    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
                    display: flex;
                    gap: var(--gap);
                }

                    #pg_Home #landingpage #SearchSection .container .tabs ul.tab-links:has(li:only-child) {
                        display: none;
                    }

                    #pg_Home #landingpage #SearchSection .container .tabs ul.tab-links li {
                        height: unset;
                        margin: 0;
                    }

                        #pg_Home #landingpage #SearchSection .container .tabs ul.tab-links li:has(a.current) {
                        }

                        #pg_Home #landingpage #SearchSection .container .tabs ul.tab-links li a {
                            color: var(--color-elyt-navy) !important;
                            background-color: rgb(var(--color-white-rgb) / .55) !important;
                            backdrop-filter: blur(12px);
                            border-top-left-radius: var(--br-tab-links);
                            border-top-right-radius: var(--br-tab-links);
                            cursor: pointer;
                        }

                            #pg_Home #landingpage #SearchSection .container .tabs ul.tab-links li a.current {
                                color: var(--color-white) !important;
                                background-color: rgb(var(--color-elyt-navy-rgb) / .55) !important;
                            }


                #pg_Home #landingpage #SearchSection .container .tabs .tab-panel {
                    color: var(--color-white);
                    background-color: rgb(var(--color-elyt-navy-rgb) / .55);
                    backdrop-filter: blur(12px);
                    padding: 2.5rem;
                    border-radius: var(--br-tab-panel);
                    width: 100%;
                    box-shadow: 0 20px 60px var(--tw-shadow-color, #0000004d);
                    overflow: unset !important;
                }

                    #pg_Home #landingpage #SearchSection .container .tabs .tab-panel #frmGroup {
                        display: grid;
                        grid-template-columns: repeat(1, minmax(0, 1fr));
                        gap: 1.25rem;
                        align-items: end;
                    }

                        #pg_Home #landingpage #SearchSection .container .tabs .tab-panel #frmGroup > * {
                            margin: 0;
                            padding: 0;
                            width: 100%;
                        }

                        #pg_Home #landingpage #SearchSection .container .tabs .tab-panel #frmGroup input {
                            margin: 0;
                        }

                    #pg_Home #landingpage #SearchSection .container .tabs .tab-panel .submit {
                        text-transform: uppercase;
                        background-color: var(--color-white) !important;
                        color: var(--color-elyt-navy);
                        padding: 1rem 2.25rem;
                        border-radius: 1rem;
                        font-family: var(--font-header);
                        letter-spacing: .15em;
                        font-weight: 900;
                        font-size: .9rem;
                        height: 54px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        transition-property: all;
                        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
                        transition-duration: var(--tw-duration, var(--default-transition-duration))
                    }

                        #pg_Home #landingpage #SearchSection .container .tabs .tab-panel .submit:hover {
                            background-color: #f3f4f6;
                            --tw-translate-y: -.125rem;
                            translate: var(--tw-translate-x)var(--tw-translate-y);
                            box-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
                        }

                    #pg_Home #landingpage #SearchSection .container .tabs .tab-panel label {
                        font-size: .8rem;
                        color: var(--color-white);
                        font-weight: 700;
                        font-family: var(--font-body);
                    }

                    #pg_Home #landingpage #SearchSection .container .tabs .tab-panel input,
                    #pg_Home #landingpage #SearchSection .container .tabs .tab-panel select {
                        padding: 1rem;
                        border-radius: 1rem;
                        background-color: #00000026;
                        background-color: rgb( 0 0 0 / .15);
                        color: var(--color-white);
                        font-family: var(--font-body);
                        font-size: .9rem;
                        outline-style: none;
                        cursor: pointer;
                        border: 0;
                    }

                    #pg_Home #landingpage #SearchSection .container .tabs .tab-panel .styled-select {
                        border: 0;
                        background-color: unset;
                    }

                #pg_Home #landingpage #SearchSection .container .tabs:not(:has(li:only-child)) .tab-panel {
                    border-top-left-radius: 0;
                }


.form-separation {
    display: none;
}

#tab2 .input-group {
    width: 18.5%;
}

#tab2 .submitButtonWrapper {
    clear: unset;
}

#SearchSection .elyt {
    position: relative;
    /*height: 70vh;*/
    min-height: 550px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--color-white) !important;
    padding-inline: 5%;
    padding-block: 140px;
    overflow: visible;
}

    #SearchSection .elyt .brand-font {
        font-size: 1.1rem;
        color: var(--color-elyt-navy);
        display: block;
        margin-bottom: 1.25rem;
        padding-block: 10px;
        padding-inline: 30px;
        border-radius: 50px;
        letter-spacing: .2em;
        background-color: rgb(255 255 255 / 0.7);
        --tw-backdrop-blur: blur(10px);
        -webkit-backdrop-filter: var(--tw-backdrop-blur);
        backdrop-filter: var(--tw-backdrop-blur );
        --tw-inset-shadow: 0 0 #0000;
        --tw-inset-ring-shadow: 0 0 #0000;
        --tw-ring-offset-shadow: 0 0 #0000;
        --tw-ring-shadow: 0 0 #0000;
        --tw-shadow: 0 0 40px var(--tw-shadow-color, #fffc), 0 0 15px var(--tw-shadow-color, #fff);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }

    #SearchSection .elyt h1 {
        color: var(--color-white) !important;
        font-size: 4.8rem !important;
        margin: 0;
        margin-bottom: 1.5rem !important;
        line-height: 1.1 !important;
        filter: drop-shadow(0 25px 25px #00000026) !important;
    }

    #SearchSection .elyt p {
        font-size: 1.15rem;
        max-width: 850px;
        font-family: var(--font-body);
        font-weight: 400;
        letter-spacing: 0.02em;
        filter: drop-shadow(0 4px 4px #00000026);
        margin: 0;
        margin-bottom: 3rem;
    }

/* sm */
@media (min-width:40rem) {
}

/* md */
@media (min-width:48rem) {
    #pg_Home #landingpage #SearchSection .container .tabs .tab-panel #frmGroup {
        grid-template-columns: 1.5fr 1fr 1fr .6fr auto;
    }

    #SearchSection .elyt h1 {
        font-size: 5.5rem !important;
    }
}

/* lg */
@media (min-width: 64rem) {
}

@media (max-width: 767px) {

    #pg_Home #landingpage #SearchSection {
        --bottom: 2rem;
    }

        #pg_Home #landingpage #SearchSection .container {
            box-sizing: border-box;
            position: relative;
            right: 0;
            left: 0;
            bottom: 0;
            margin-bottom: 1rem;
            width: 100%;
            padding-inline: 5%;
            z-index: 10;
        }

            #pg_Home #landingpage #SearchSection .container .tabs {
                --br-tab-panel: 16px;
            }

                #pg_Home #landingpage #SearchSection .container .tabs ul.tab-links {
                    display: grid;
                    grid-template-columns: 1fr 1fr 1fr;
                    margin-bottom: var(--gap);
                }

                    #pg_Home #landingpage #SearchSection .container .tabs ul.tab-links li {
                    }

                        #pg_Home #landingpage #SearchSection .container .tabs ul.tab-links li a {
                            border-radius: var(--br-tab-links);
                            font-size: 12px;
                        }

                #pg_Home #landingpage #SearchSection .container .tabs:not(:has(li:only-child)) .tab-panel {
                    border-top-left-radius: 0;
                    border-top-right-radius: 0;
                    border-top-left-radius: var(--br-tab-panel);
                    border-top-right-radius: var(--br-tab-panel);
                }

    #SearchSection .elyt h1 {
        font-size: 2.8rem !important;
    }

    #tab2 .input-group {
        width: 100%;
    }
}

@media (max-width: 500px) {


    #SearchSection .elyt h1 {
        font-size: 2.2rem !important;
    }
}



/* END HOME */

/* SEARCH */
#pg_SearchIndv #Search-Box {
    background-color: var(--color-elyt-navy) !Important;
    padding-inline: 5%;
}

    #pg_SearchIndv #Search-Box,
    #pg_SearchIndv #Search-Box * {
        box-sizing: border-box;
    }

        #pg_SearchIndv #Search-Box .container_hp {
            max-width: 1440px;
            width: 100%;
            display: flex;
        }

            #pg_SearchIndv #Search-Box .container_hp .field-group {
                margin: 0;
                padding: 0;
            }

                #pg_SearchIndv #Search-Box .container_hp .field-group:has(+ .field-group:not(#submit) ) {
                    padding-right: .5rem;
                }

                #pg_SearchIndv #Search-Box .container_hp .field-group + .field-group:not(#submit) {
                    padding-left: .5rem;
                    border-left: 1px solid rgb(255 255 255 / 20%);
                }

                #pg_SearchIndv #Search-Box .container_hp .field-group label {
                    margin: 0;
                    font-size: .7rem;
                    line-height: 1.5em;
                    text-transform: uppercase;
                    letter-spacing: .1em;
                    opacity: .6;
                    font-weight: 700;
                }

                #pg_SearchIndv #Search-Box .container_hp .field-group input,
                #pg_SearchIndv #Search-Box .container_hp .field-group select,
                #pg_SearchIndv #Search-Box .container_hp .field-group .customSelect {
                    color: var(--color-white);
                    background-color: unset;
                    border: 0;
                    height: unset !important;
                    line-height: 1.5em;
                    padding: 0;
                    font-size: 1rem;
                    font-weight: 700;
                    background-position: -411px 10px;
                }

            #pg_SearchIndv #Search-Box .container_hp #destination.field-group {
                width: 300px;
            }

            #pg_SearchIndv #Search-Box .container_hp #check-in.field-group,
            #pg_SearchIndv #Search-Box .container_hp #check-out.field-group {
                width: 115px;
            }

            #pg_SearchIndv #Search-Box .container_hp #rooms.field-group {
                width: 90px;
            }

            #pg_SearchIndv #Search-Box .container_hp #submit.field-group {
                margin-left: auto;
                flex-basis: content;
            }

                #pg_SearchIndv #Search-Box .container_hp #submit.field-group input {
                    border: 1px solid var(--color-white);
                    color: var(--color-white) !important;
                    background-color: var(--color-elyt-navy) !important;
                    padding: .5rem 1.5rem;
                    border-radius: .5rem;
                    font-weight: 700;
                    font-size: .85rem;
                    transition-property: all;
                    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
                    transition-duration: var(--tw-duration, var(--default-transition-duration));
                    width: fit-content;
                    height: fit-content;
                }

                    #pg_SearchIndv #Search-Box .container_hp #submit.field-group input:hover {
                        background-color: var(--color-white) !important;
                        color: var(--color-elyt-navy) !important;
                    }


@media (max-width: 550px) {
    #city-name, #form-details {
        display: block;
    }

    #destination, #rooms {
        display: none;
    }
}


#Content {
    display: flex;
    gap: 2.5rem;
    max-width: 1440px;
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 1008px) {
    #Content {
        flex-direction: column;
    }
}

.mobile.nav .inner div {
    width: 50%;
}

    .mobile.nav .inner div:last-child {
        display: none;
    }


#Filter-Column {
    flex-basis: min(300px, 20%);
}

#Rates-Column {
    flex-grow: 1;
}

#Links-Column {
    display: none !important;
}

#Rates {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.hotel-rates {
    display: flex;
    gap: 0px;
    padding: 0px;
    border-radius: 1rem !important;
    overflow: hidden;
    transition-property: box-shadow !important;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)) !important;
    transition-duration: var(--tw-duration, var(--default-transition-duration)) !important;
    box-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a) !important;
    border: 1px solid #f3f4f6 !important;
}

    .hotel-rates:hover {
        box-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -2px var(--tw-shadow-color, #0000001a) !important;
    }

    .hotel-rates .clear {
        display: none;
    }

    .hotel-rates > * {
        padding: 0 !important;
        margin: 0 !important;
        max-height: unset !important;
        max-width: unset !important;
    }

    .hotel-rates .description-column {
        order: 2;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
        flex: 1 1 40%;
        padding: 1.5rem !important;
        position: relative;
    }

    .hotel-rates .thumbnail-column {
        flex-basis: 20%;
        aspect-ratio: 1.2;
        order: 1;
        display: flex;
        flex-direction: column;
        position: relative;
    }

    .hotel-rates .rating-column {
        position: relative;
        flex-basis: 27%;
        order: 3;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        padding: 1.5rem !important;
        border-top-right-radius: 1rem;
        border-bottom-right-radius: 1rem;
    }


    .hotel-rates .thumbnail-column .photo-wrapper {
        max-height: unset;
        max-width: unset;
        width: 100% !important;
        height: auto !important;
        flex-grow: 1;
        position: relative;
    }

        .hotel-rates .thumbnail-column .photo-wrapper img {
            height: 100%;
            width: 100%;
            object-fit: cover;
            border-top-left-radius: 1rem;
            border-bottom-left-radius: 1rem;
        }

    .hotel-rates .thumbnail-column .savings {
        position: absolute;
        top: 1rem;
        left: 1rem;
        border-radius: .5rem;
        padding: .25rem .75rem;
        color: var(--color-white) !important;
        background-color: var(--color-elyt-teal);
        font-weight: 900;
        font-size: .8rem;
    }

    .hotel-rates .description-column > * {
        order: 20;
        margin: 0;
    }

    .hotel-rates .description-column > br {
        display: none;
    }

    .hotel-rates .description-column .tvxStarReview {
        order: 1;
        margin-bottom: .25rem !important;
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .hotel-rates .description-column .star-rating .fa-star,
    .hotel-rates .description-column .star-rating .fa-star-half-o {
        color: var(--color-elyt-sand) !important;
        font-size: .8rem;
    }

    .hotel-rates .description-column .tvxStarReview .review-score {
        color: #6a7282;
        font-size: .85rem;
    }

    .hotel-rates .description-column .hotel-name {
        order: 2;
        font-size: 1.2rem !important;
        font-family: var(--font-header);
        color: var(--color-elyt-navy) !important;
        margin-bottom: .25rem !important;
        font-family: var(--font-header);
        text-transform: uppercase;
        letter-spacing: 0.1em;
        font-weight: 900;
    }

    .hotel-rates .description-column .address {
        order: 3;
        color: #6a7282;
        font-size: .85rem;
        margin-bottom: 1rem;
    }

    .hotel-rates .description-column ul.features {
        order: 4;
        display: flex;
        flex-wrap: wrap;
        gap: .5rem;
        margin-bottom: 1rem;
    }

        .hotel-rates .description-column ul.features li {
            background-color: #f9fafb;
            color: #4a5565;
            padding: .25rem .75rem;
            border-radius: 999999px;
            font-size: .7rem;
            font-weight: 700;
        }

    .hotel-rates .description-column .distance {
        order: 5;
        color: #6a7282;
        font-size: .85rem;
        margin-bottom: 1rem;
        background-color: unset;
    }

    .hotel-rates .rating-column .price-old {
        order: 1;
    }

        .hotel-rates .rating-column .price-old span {
            font-size: .9rem;
            color: #99a1af;
            margin-bottom: .25rem;
        }

    .hotel-rates .rating-column .price {
        order: 2;
    }

        .hotel-rates .rating-column .price span {
            font-size: .9rem;
            color: #4a5565;
            margin-bottom: .25rem;
        }

    .hotel-rates .rating-column .ptPrice {
        order: 3;
        font-size: .8rem;
        /*opacity: .6;*/
    }

        .hotel-rates .rating-column .ptPrice span {
            color: var(--color-elyt-navy);
            font-size: 2.2rem;
            font-weight: 900;
            line-height: 1;
            opacity: 1;
        }

    .hotel-rates .rating-column .recent-reviews {
        display: none;
    }

    .hotel-rates .rating-column a.check-rates:link,
    .hotel-rates .rating-column a.check-rates:visited {
        order: 4;
        margin-top: auto;
        width: 100%;
        background-color: var(--color-elyt-teal) !important;
        color: var(--color-white);
        padding-block: .75rem;
        border-radius: .75rem;
        font-family: var(--font-header);
        font-weight: 900;
        font-size: .85rem;
        text-align: center;
        text-transform: uppercase;
        letter-spacing: .1em;
        transition-property: all;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration))
    }

        .hotel-rates .rating-column a.check-rates:link:hover,
        .hotel-rates .rating-column a.check-rates:visited:hover {
            background-color: rgb(var(--color-elyt-teal-rgb) / .8) !important;
            --tw-translate-y: -1.25rem;
            translate: var(--tw-translate-x)var(--tw-translate-y)
        }

@media (max-width: 767px) {
    .hotel-rates {
        flex-wrap: wrap;
        padding: 0 !important;
    }

        .hotel-rates .description-column {
            order: 3;
            flex: 0 0 100%;
        }

        .hotel-rates .thumbnail-column {
            order: 1;
            flex: 0 1 40%;
        }

        .hotel-rates .rating-column {
            order: 2;
            flex: 1 1 50%;
        }

        .hotel-rates .thumbnail-column .photo-wrapper img {
            border-bottom-left-radius: 0;
        }

    #pg_SearchIndv #Search-Box .container_hp {
        flex-wrap: wrap;
    }
}

#Filter .filter-section {
    padding-inline: 21px;
    overflow: unset;
}

    #Filter .filter-section .category {
        font-family: var(--font-body);
        font-weight: 900;
        font-size: .9rem;
        text-transform: uppercase;
        margin-bottom: 1rem;
        color: var(--foreground);
    }

#Filter #filter-stars .star-icon {
    color: var(--color-elyt-sand) !important;
}

#Filter #price-range .ui-slider .ui-slider-range,
#Filter #guest-review-range .ui-slider .ui-slider-range {
    background-color: var(--color-elyt-teal) !Important;
}

#Filter #price-range .ui-slider-tip,
#Filter #guest-review-range .ui-slider-tip {
    background-color: var(--color-elyt-navy) !Important;
    width: 36px;
    min-width: max-content;
}

    #Filter #price-range .ui-slider-tip::before,
    #Filter #guest-review-range .ui-slider-tip::before {
        border-top-color: var(--color-elyt-navy) !Important;
    }

#Filter .field-wrap {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: .9rem;
    /*   cursor-pointer group*/
}

    #Filter .field-wrap label {
        color: #4a5565;
        font-weight: 500;
        transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration))
    }

        #Filter .field-wrap label:hover {
            color: var(--color-elyt-teal);
        }

#Filter input[type=checkbox] {
    display: inline-block;
    position: unset;
    inset: 0;
    margin: 0;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: .25rem;
    border: 1px solid #d1d5dc;
    color: var(--color-elyt-teal);
}

#Filter input:focus {
    --tw-ring-color: var(--color-elyt-teal)
}


#Filter .star-row {
    display: flex;
    align-items: center;
    gap: .25rem;
    padding: .25rem;
}


    #Filter .star-row label {
        display: flex;
        align-items: center;
        gap: .25rem;
    }

        #Filter .star-row label span {
            padding: 0;
        }
/*#filter-stars {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
}

    #filter-stars .category {
        flex-basis: 100%;
        order: 1;
    }

    #filter-stars .star-row {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 6px;
        border-radius: 8px;
        padding: 8px;
        border: 1px solid rgba(0, 0, 0, 0.6);
        position: relative;
    }

        #filter-stars .star-row:has(#Rating5) {
            order: 6;
        }

        #filter-stars .star-row:has(#Rating4) {
            order: 5;
        }

        #filter-stars .star-row:has(#Rating3) {
            order: 4;
        }

        #filter-stars .star-row:has(#Rating2) {
            order: 3;
        }

        #filter-stars .star-row::before {
            font-family: var(--fontLibreFranklyn);
            font-weight: 500;
            font-size: 12px;
            line-height: 100%;
            color: #999999;
            z-index: 9;
        }

        #filter-stars .star-row:has(#Rating5)::before {
            content: "5";
        }

        #filter-stars .star-row:has(#Rating4)::before {
            content: "4";
        }

        #filter-stars .star-row:has(#Rating3)::before {
            content: "3";
        }

        #filter-stars .star-row:has(#Rating2)::before {
            content: "0-2";
        }

        #filter-stars .star-row .star-icon:not(:first-child) {
            display: none;
        }

        #filter-stars .star-row input[type=checkbox] {
            -webkit-appearance: none;
            appearance: none;
            background-color: #fff;
            width: 0;
            position: absolute;
            inset: 0;
            width: unset;
            height: unset;
            border-radius: 8px;
            margin: 0;
        }

            #filter-stars .star-row input[type=checkbox]::before {
                content: "";
                position: absolute;
                inset: 0;
                border-radius: 9px;
                z-index: 10;
            }

            #filter-stars .star-row input[type=checkbox]:checked::before {
                content: "";
                background-color: #2B9F9255;
                border-radius: 8px;
            }

        #filter-stars .star-row label {
            z-index: 9;
        }
*/




#viewmapbutton-container {
    display: none !important;
}


#sort-by {
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
}

    #sort-by li.last {
        display: none;
    }

    #sort-by li.first,
    #sort-by li.sort-option,
    #sort-by li.sort-option:hover {
        font-weight: 800;
    }

    #sort-by li.sort-option {
        color: var(--color-elyt-grey);
    }

        #sort-by li.sort-option:hover {
            background-color: rgb(var(--color-elyt-teal-rgb) / 10%);
        }

    #sort-by #savings-sort-option {
        color: var(--color-elyt-grey);
    }

#Rates-Column #sort-by li.active,
#Rates-Column #sort-by li.active:hover {
    color: var(--color-white) !Important;
    background-color: var(--color-elyt-navy) !Important;
}






#back-to-top {
    background-color: var(--color-elyt-navy);
    border-radius: .5rem;
}

#paging-bottom {
    --size: 2rem;
    --margin: 20px;
    --radius: .25rem;
    --border-width: 1px;
    --current-page-color: var(--color-elyt-navy);
    --current-text-color: var(--color-elyt-navy);
    --unselected-page-color: var(--color-elyt-grey);
    --unselected-text-color: var(--color-elyt-grey);
    display: flex;
    justify-content: center;
    align-items: center;
    row-gap: 5px;
    flex-wrap: wrap;
    box-sizing: border-box;
}

    #paging-bottom * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    #paging-bottom .paging_previous {
        margin-right: var(--margin);
    }

    #paging-bottom .paging_next {
        margin-left: var(--margin);
    }

        #paging-bottom .paging_previous,
        #paging-bottom .paging_next,
        #paging-bottom .paging_previous a,
        #paging-bottom .paging_next a,
        #paging-bottom .paging_page,
        #paging-bottom .paging_page a {
            width: var(--size);
            aspect-ratio: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: 700;
            font-size: 14px;
        }

    #paging-bottom .paging_previous,
    #paging-bottom .paging_next,
    #paging-bottom .paging_page {
        color: var(--current-text-color) !important;
        border: var(--border-width) solid var(--current-page-color);
    }

    #paging-bottom .paging_previous,
    #paging-bottom .paging_next {
        display: none;
        border-radius: 100px;
    }

        #paging-bottom .paging_previous i,
        #paging-bottom .paging_next i {
            font-weight: 700;
        }


        #paging-bottom .paging_previous:has(a),
        #paging-bottom .paging_next:has(a),
        #paging-bottom .paging_page:has(a) {
            display: flex;
            border: var(--border-width) solid var(--unselected-page-color);
        }

        #paging-bottom .paging_previous a,
        #paging-bottom .paging_next a,
        #paging-bottom .paging_page a {
            color: var(--unselected-text-color) !important;
        }

    #paging-bottom .paging_page:nth-of-type(2) {
        border-top-left-radius: var(--radius);
        border-bottom-left-radius: var(--radius);
    }

    #paging-bottom .paging_page:nth-last-of-type(2) {
        border-top-right-radius: var(--radius);
        border-bottom-right-radius: var(--radius);
    }

/* END SEARCH*/

/* HOTELROOMTYPES */


@media only screen and (min-width: 1024px) {
    #container-hotel {
    }

        #container-hotel .inner-ct {
            padding: 0;
        }

        #container-hotel .hotel-head {
            display: grid;
            grid-template-columns: 60% 40%;
            grid-template-areas: "head head" "img detail";
            grid-template-rows: auto auto;
            row-gap: 1rem;
            column-gap: 3rem;
        }

            #container-hotel .hotel-head #HotelName {
                display: contents;
            }

                #container-hotel .hotel-head #HotelName .hotel-card {
                    --logosize: 8rem;
                    grid-area: head;
                    display: grid;
                    grid-template-columns: auto var(--logosize);
                    grid-template-rows: auto;
                    grid-template-areas: "star logo" "name logo";
                    align-items: center;
                    row-gap: 0;
                }

                    #container-hotel .hotel-head #HotelName .hotel-card .hotel-card__logo {
                        grid-area: logo;
                        height: var(--logosize);
                    }

                        #container-hotel .hotel-head #HotelName .hotel-card .hotel-card__logo .brand-logo {
                            display: block;
                            width: var(--logosize);
                            height: var(--logosize);
                            object-fit: contain;
                        }

                    #container-hotel .hotel-head #HotelName .hotel-card .hotel-card__name-stars {
                        display: contents;
                    }

                        #container-hotel .hotel-head #HotelName .hotel-card .hotel-card__name-stars .hotel-card__name {
                            grid-area: name;
                            flex-direction: row;
                            justify-content: flex-start;
                        }

                            #container-hotel .hotel-head #HotelName .hotel-card .hotel-card__name-stars .hotel-card__name h1 .card-brand {
                                font-size: 2.5rem;
                                color: var(--color-elyt-navy);
                                line-height: 1.25;
                            }


                        #container-hotel .hotel-head #HotelName .hotel-card .hotel-card__name-stars .hotel-card__stars {
                            grid-area: star;
                        }

                            #container-hotel .hotel-head #HotelName .hotel-card .hotel-card__name-stars .hotel-card__stars .icon--blue-star {
                                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M288.1 0l86.5 164 182.7 31.6L428 328.5 454.4 512 288.1 430.2 121.7 512l26.4-183.5L18.9 195.6 201.5 164 288.1 0z' fill='rgb(191 166 136)'/%3E%3C/svg%3E");
                            }


                #container-hotel .hotel-head #HotelName .hotel-details {
                    grid-area: detail;
                    flex-direction: column;
                    gap: 2rem;
                }

                    #container-hotel .hotel-head #HotelName .hotel-details .hotel-detail {
                        gap: .75rem;
                    }

                        #container-hotel .hotel-head #HotelName .hotel-details .hotel-detail,
                        #container-hotel .hotel-head #HotelName .hotel-details .hotel-detail * {
                            color: #4a5565;
                            font-size: .9rem;
                            line-height: 1.625;
                            font-family: var(--font-body);
                        }

                            #container-hotel .hotel-head #HotelName .hotel-details .hotel-detail .guest-rating__label {
                                color: var(--color-white);
                            }

                    #container-hotel .hotel-head #HotelName .hotel-details .hotel-detail__header .hotel-detail__label {
                        color: var(--color-elyt-navy);
                        font-family: var(--font-header);
                        font-size: 1.2rem;
                    }

                    #container-hotel .hotel-head #HotelName .hotel-details .hotel-detail__header.hotel-detail__header-Overview .hotel-detail__label {
                        font-size: 1.8rem;
                    }

                    #container-hotel .hotel-head #HotelName .hotel-details #aiInsight {
                        /*display: none;*/
                    }

            #container-hotel .hotel-head .hotel-graphics {
                grid-area: img;
                margin: 0;
                grid-template-columns: 1fr;
                gap: 1rem;
            }

                #container-hotel .hotel-head .hotel-graphics .static {
                    grid-template-columns: 1fr 1fr 1fr 1fr;
                    grid-template-rows: 1fr;
                    gap: 1rem;
                }

                    #container-hotel .hotel-head .hotel-graphics .static img {
                        border-radius: 1rem;
                    }

                #container-hotel .hotel-head .hotel-graphics .carousel img {
                    border-radius: 1.5rem;
                }

    #container-rates {
        --bg: rgb(249 250 251 / 0.5);
    }

    /* md */
    @media (min-width:48rem) {
        #container-hotel .hotel-head #HotelName .hotel-card h1 .card-brand {
            font-size: 3.5rem;
        }
    }
}


.room-variant__cancel,
.promotional-banner__text,
.room-variant__available {
    --background: transparent;
    --color: var(--color-black);
    font-size: .7rem !important;
    font-weight: 700 !important;
    padding: .375rem .75rem !important;
    width: 100% !important;
    color: var(--color) !important;
    background-color: var(--background) !important;
    border-radius: .5rem !important;
}

.room-variant__cancel {
    --background: #eff6ff;
    --color: #155dfc;
}


.promotional-banner__text {
    --background: #f0fdf4;
    --color: #00a544;
}

.room-variant__available {
    --background: #fef2f2;
    --color: #e40014;
}


.room-variant {
    /*    flex-direction: column;*/
}

.room-variant__prices {
    align-items: flex-start
}

.room-variant__price {
    display: flex;
    align-items: center;
    gap: .25rem;
}

    .room-variant__price .room-price,
    .room-variant__price .room-night {
        font-size: .75rem;
        font-weight: 700;
        color: #99a1af;
    }

.room-variant__total {
    display: flex;
    align-items: baseline;
    gap: .25rem;
}

    .room-variant__total .room-price {
        font-size: 1.8rem;
        font-weight: 900;
        color: var(--color-elyt-navy);
        line-height: 1;
    }

    .room-variant__total .room-night {
        font-size: .8rem;
        font-weight: 400;
        color: var(--color-elyt-navy);
        opacity: .6;
    }

.room-variant__book {
    width: 100%;
}

.room-variant__button {
    width: 100%;
    background-color: var(--color-elyt-teal);
    color: var(--color-white);
    padding-block: .875rem;
    font-family: var(--font-header) !important;
    font-weight: 900;
    font-size: .85rem;
    text-transform: uppercase;
    text-align: center;
    border-radius: .75rem;
    letter-spacing: .1em;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    box-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
}

    .room-variant__button:hover {
        background-color: rgb(var(--color-elyt-teal-rgb) / 80%);
        --tw-translate-y: calc(var(--spacing)*-.5);
        translate: var(--tw-translate-x)var(--tw-translate-y);
    }

.room-details__button {
    bottom: 1.3rem;
    left: 1rem;
    right: 1rem;
    background-color: rgb(0 0 0 / 40%);
    background-color: #0006;
    padding: .5rem 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    border-radius: .5rem;
    backdrop-filter: blur(12px);
}

    .room-details__button:hover {
        background-color: rgb(0 0 0 / 60%);
        background-color: #0009
    }

.room-details__button-label {
    font-size: .75rem;
    font-weight: 700;
    color: var(--color-white);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .5rem;
}

/* END HOTELROOMTYPES */

/* CHECKOUT */
#pg_CheckOut #top-section h1 {
    margin: 0;
    margin-bottom: 1rem;
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--color-elyt-navy);
    text-transform: uppercase;
    letter-spacing: .05em;
    max-width: 100%;
}

#pg_CheckOut #guest-info .f-heading,
#pg_CheckOut #billing .f-heading,
#pg_CheckOut .section .f-heading,
#pg_CheckOut #paymentMethodLabel {
    font-size: 1.2rem;
    color: var(--color-elyt-navy);
    margin: 0;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: .75rem;
    font-family: var(--font-header);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 900;
}

    #pg_CheckOut #guest-info .f-heading::before {
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="rgb(0 161 155)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><path d="M16 3.128a4 4 0 0 1 0 7.744"></path><path d="M22 21v-2a4 4 0 0 0-3-3.87"></path><circle cx="9" cy="7" r="4"></circle></svg>');
    }

    #pg_CheckOut #billing .f-heading::before {
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="rgb(0 161 155)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"></path><circle cx="12" cy="10" r="3"></circle></svg>');
    }

    #pg_CheckOut #paymentMethodLabel::before {
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="rgb(0 161 155)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="20" height="14" x="2" y="5" rx="2"></rect><line x1="2" x2="22" y1="10" y2="10"></line></svg>')
    }

#pg_CheckOut .control-label {
    font-size: .7rem;
    font-weight: 900;
    text-transform: uppercase;
    color: #99a1af;
    letter-spacing: .05em;
}

#pg_CheckOut .intl-tel-input {
    background-color: #f9fafb;
    border: 1px solid #f3f4f6;
    border-radius: .75rem;
}

    #pg_CheckOut .intl-tel-input .intl-tel-input-phone,
    #pg_CheckOut .intl-tel-input .intl-tel-input-ext {
        padding: 1rem;
        background-color: #f9fafb;
    }

    #pg_CheckOut .intl-tel-input .intl-tel-input-phone {
        padding-left: 45px;
        border-bottom-left-radius: .75rem;
        border-top-left-radius: .75rem;
    }

    #pg_CheckOut .intl-tel-input .intl-tel-input-ext {
        border-bottom-right-radius: .75rem;
        border-top-right-radius: .75rem;
    }

#pg_CheckOut .form-control {
    padding: 1rem;
    background-color: #f9fafb;
    border: 1px solid #f3f4f6;
    border-radius: .75rem;
    outline: none;
}

#pg_CheckOut #ccFields-block .form-control,
#pg_CheckOut #voucherForm .form-control {
    padding-left: 45px;
}

#pg_CheckOut .SumoSelect {
    padding: 1rem;
    background-color: #f9fafb;
    border: 1px solid #f3f4f6;
    border-radius: .75rem;
    color: inherit;
}

    #pg_CheckOut .SumoSelect .SlectBox {
        height: unset;
        line-height: unset;
        background-color: transparent;
        padding: 0;
        border: none;
        color: inherit;
    }

        #pg_CheckOut .SumoSelect .SlectBox span {
            padding: 0;
            color: inherit;
        }

.SumoSelect select.form-control {
    display: none !important;
}

#pg_CheckOut .form-control:focus,
#pg_CheckOut .SumoSelect:has(:focus),
#pg_CheckOut .intl-tel-input:has(input:focus) {
    --tw-ring-color: rgb(var(--color-elyt-teal-rgb) / 80%);
    --tw-ring-shadow: 0 0 0 2px var(--tw-ring-color, currentcolor);
    box-shadow: 0 0 #0000, 0 0 #0000, 0 0 #0000, var(--tw-ring-shadow), 0 0 #0000;
}

#pg_CheckOut .container-co-v2 {
    max-width: 1200px;
}

#pg_CheckOut #col1 {
    width: 60%;
}

#CheckoutContent {
    padding: 0;
}

#pg_CheckOut #col2 {
    width: 40%;
}

@media (max-width: 767px) {
    #pg_CheckOut #col1,
    #pg_CheckOut #col2 {
        float: none;
        width: 98vw;
        margin-inline: auto;
    }

    #hotel-header figure {
        height: 240px;
    }
}

#pg_CheckOut #staydatescheck {
    background-color: rgb(var(--color-elyt-navy-rgb) / 5%);
    padding: 1.25rem;
    border: 1px solid rgb(var(--color-elyt-navy-rgb) / 10%);
    border-radius: .75rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    /*bg-elyt-navy/5 p-5 rounded-xl border border-elyt-navy/10 flex items-center justify-between*/
}

    #pg_CheckOut #staydatescheck b,
    #pg_CheckOut #staydatescheck span {
        font-size: .85rem;
        font-weight: 700;
        color: var(--color-elyt-navy);
    }

    #pg_CheckOut #staydatescheck b {
        opacity: .6;
    }

    #pg_CheckOut #staydatescheck span {
    }

        #pg_CheckOut #staydatescheck span i {
        }

    #pg_CheckOut #staydatescheck::after {
        width: 18px;
        height: 18px;
        content: ' ';
        background-size: contain;
        background-position: center;
        margin-left: auto;
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="rgb(0 73 175 / 40%)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="M12 16v-4"></path><path d="M12 8h.01"></path></svg>');
    }

#pg_CheckOut #cancellation-policy {
}

#pg_CheckOut #checkin-instructions,
#pg_CheckOut #accept-policy {
    font-size: .75rem;
    color: #99a1af;
    line-height: 1.625;
}

    #pg_CheckOut #checkin-instructions b,
    #pg_CheckOut #cancellation-policy b {
        font-size: .75rem;
        font-weight: 900;
        color: var(--color-elyt-navy);
        text-transform: uppercase;
        margin-bottom: .5rem;
        letter-spacing: .1em;
    }

#pg_CheckOut #cancellation-policy pre {
    font-size: .7rem;
    font-weight: 700;
    line-height: 1.625;
    color: #99a1af;
    font-family: var(--font-body);
}

#pg_CheckOut .readtermscheckbox .checkbox label,
#pg_CheckOut .readtermscheckbox .checkbox label b,
#pg_CheckOut .readtermscheckbox .checkbox label span,
#pg_CheckOut .readtermscheckbox .checkbox label {
    font-size: .85rem;
    font-weight: 500;
    color: #4a5565;
}

    #pg_CheckOut .readtermscheckbox .checkbox label b span,
    #pg_CheckOut .readtermscheckbox .checkbox label span + span {
        color: var(--color-elyt-navy) !important;
    }


#pg_CheckOut .checkoutSubmit, #applyVoucher {
    margin-top: 1.5rem;
    width: 100%;
    background-color: var(--color-elyt-navy);
    color: var(--color-white);
    padding-block: 1.25rem;
    font-weight: 900;
    font-size: 1.1rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    display: flex;
    justify-content: center;
    align-items: center;
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    border-radius: 1rem;
    box-shadow: 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;
}

    #pg_CheckOut .checkoutSubmit:hover, #applyVoucher:hover {
        --tw-translate-y: calc(var(--spacing)*-.5);
        translate: var(--tw-translate-x)var(--tw-translate-y);
    }



#book {
    background-color: rgb(240 253 244 / 50%);
    border: 1px solid #dcfce7;
    border-radius: 1.5rem;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

    #book b {
        color: #008138;
        display: flex;
        align-items: center;
        gap: .75rem;
        font-weight: 900;
        font-size: .8rem;
        text-transform: uppercase;
        letter-spacing: .1em;
    }

        #book b i {
            display: none;
        }

        #book b::before {
            content: ' ';
            display: flex;
            justify-content: center;
            align-items: center;
            width: 20px;
            height: 20px;
            background-color: transparent;
            background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="rgb(0 129 56)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"></path></svg>');
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
        }

    #book ul {
        display: flex;
        flex-direction: column;
        gap: .5rem;
        position: unset;
        margin: 0;
    }

        #book ul li {
            position: unset;
            padding: 0;
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: .5rem;
            font-size: .8rem;
            font-weight: 700;
            color: rgb(0 129 56 / 70%);
        }

            #book ul li::before {
                position: unset;
                content: ' ';
                display: block;
                width: 14px;
                height: 14px;
                background-color: transparent;
                background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="rgb(0 129 56 / 70%)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21.801 10A10 10 0 1 1 17 3.335"></path><path d="m9 11 3 3L22 4"></path></svg>');
                background-position: center;
                background-repeat: no-repeat;
                background-size: contain;
            }

.guest-options a,
.frequentGuestLink {
    color: var(--color-elyt-teal) !important;
    font-weight: 900;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
}

    .guest-options a:hover,
    .frequentGuestLink:hover {
        text-decoration: underline;
    }

    .guest-options a::before,
    .frequentGuestLink::before {
        content: ' ';
        display: block;
        width: 16px;
        height: 16px;
        background-color: transparent;
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="rgb(0 161 155)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="M8 12h8"></path><path d="M12 8v8"></path></svg> ');
        background-position: center;
        background-repeat: no-repeat;
    }

    .guest-options a i,
    .frequentGuestLink i {
        display: none;
    }

#addEmailLink {
}

#specialRequestsLink {
}




#pg_CheckOut .allFees {
    font-size: .8rem;
    font-weight: 700;
}

    /* Style Column 1 (Labels: Subtotal, Sales Tax, etc.) */
    #pg_CheckOut .allFees > div:nth-child(odd) {
        color: #6a7282;
    }

    /* Style Column 2 (Values: $2764.23, etc.) */
    #pg_CheckOut .allFees > div:nth-child(even) {
        color: var(--color-elyt-navy);
    }

#pg_CheckOut #hotel-dates {
    position: relative;
}

    #pg_CheckOut #hotel-dates span {
        display: flex;
        flex-direction: column;
        gap: .25rem;
        font-size: 0.9rem;
        font-weight: 900;
        color: var(--color-elyt-navy);
        margin: 0;
    }

        #pg_CheckOut #hotel-dates span + span {
            margin-top: 1.5rem;
        }

        #pg_CheckOut #hotel-dates span span {
            font-size: 0.65rem;
            font-weight: 900;
            text-transform: uppercase;
            color: #99a1af;
            letter-spacing: .1em;
            margin: 0;
        }

    #pg_CheckOut #hotel-dates a {
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        font-size: .7rem;
        color: var(--color-elyt-teal);
        font-weight: 700;
    }

        #pg_CheckOut #hotel-dates a:hover {
            text-decoration: underline;
        }


#pg_CheckOut #hotel-rooms {
}

    #pg_CheckOut #hotel-rooms ul:not(#nightly-rates) {
        display: flex;
        flex-direction: column;
        gap: .25rem;
        margin-bottom: 1.5rem;
    }

        #pg_CheckOut #hotel-rooms ul:not(#nightly-rates) li:nth-child(1) {
            font-family: var(--font-header);
            font-size: .7rem;
            font-weight: 900;
            text-transform: uppercase;
            color: #99a1af;
            letter-spacing: .1em;
            margin-bottom: .25rem;
        }

        #pg_CheckOut #hotel-rooms ul:not(#nightly-rates) li:nth-child(2) {
            font-size: .9rem;
            color: var(--color-elyt-navy);
            font-weight: 700;
        }

        #pg_CheckOut #hotel-rooms ul:not(#nightly-rates) li:nth-child(3) {
            font-size: .8rem;
            color: #6a7282;
            font-weight: 700;
        }

#pg_CheckOut ul#nightly-rates {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

    #pg_CheckOut ul#nightly-rates li:first-child {
        font-family: var(--font-header);
        font-size: .7rem;
        font-weight: 900;
        text-transform: uppercase;
        color: #99a1af;
        letter-spacing: .1em;
        margin-bottom: .5rem;
    }

    #pg_CheckOut ul#nightly-rates li .nightly-breakdown {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: .25rem;
        font-size: .7rem;
        font-weight: 700;
    }

        #pg_CheckOut ul#nightly-rates li .nightly-breakdown span {
            color: #6a7282;
        }

            #pg_CheckOut ul#nightly-rates li .nightly-breakdown span + span {
                color: var(--color-elyt-navy);
            }


#hotel-header {
    border-top-left-radius: 1.5rem;
    border-top-right-radius: 1.5rem;
    overflow: hidden;
    background-color: var(--color-white);
    margin: 0;
    padding-bottom: 1rem;
}

    #hotel-header > :not(figure) {
        padding-inline: 1rem;
    }

#hotel-dates,
#hotel-rooms,
#hotel-fees,
#total-price {
    padding-inline: 1rem;
    padding-bottom: 2rem;
    background-color: var(--color-white);
    margin: 0;
    border: 0;
}

#hotel-rooms {
    border-bottom: 1px solid #f3f4f6;
}

#total-price {
    border-bottom-left-radius: 1.5rem;
    border-bottom-right-radius: 1.5rem;
    padding-bottom: 1rem;
}

#checkoutForm {
    border-radius: 1.5rem;
}

/**/
#pg_CheckOut .featuresList {
    display: flex;
    align-items: center;
    gap: 1rem;
    float: unset;
}

    #pg_CheckOut .featuresList .green-feature {
        background-color: #f0fdf4;
        color: #008138;
        padding: .625rem 1.5rem;
        border-radius: .75rem;
        border: 1px solid #dcfce7;
        display: flex;
        align-items: center;
        gap: .75rem;
        font-weight: 700;
        font-size: .85rem;
        width: max-content;
    }

        #pg_CheckOut .featuresList .green-feature i {
            display: none;
        }

        #pg_CheckOut #paymentMethodLabel::before,
        #pg_CheckOut #billing .f-heading::before,
        #pg_CheckOut #guest-info .f-heading::before,
        #pg_CheckOut .featuresList .green-feature::before {
            color: #00a544;
            width: 18px;
            height: 18px;
            content: ' ';
            background-size: contain;
            background-position: center;
        }

        #pg_CheckOut .featuresList .green-feature::before {
            background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='rgb(0 161 155)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' aria-hidden='true'><path d='M21.801 10A10 10 0 1 1 17 3.335'></path><path d='m9 11 3 3L22 4'></path></svg>");
        }
/* END CHECKOUT */