:root {
    --main-action-button-background-color: #5B16EC;
    --main-action-button-background-color-over: #6D3AEC;
    --secondary-action-button-background-color: #FFD54F;
    --secondary-action-button-background-color-over: #F0B937;
    --secondary-active-action-button-background-color: #E0364F;
    --secondary-active-action-button-background-color-over: #FF4C61;
    --sb-selection-frames-color: var(--main-action-button-background-color);
    --sb-homepage-frame-bg-color: #F0B937;
    --phone-color: var(--main-action-button-background-color);
}

.btn-primary {
    --bs-btn-color: #fff !important;
    --bs-btn-bg: #5B16EC !important;
    --bs-btn-border-color: #5B16EC !important;
    --bs-btn-hover-color: #fff !important;
    --bs-btn-hover-bg: var(--main-action-button-background-color) !important;
    --bs-btn-hover-border-color: var(--main-action-button-background-color) !important;
    --bs-btn-focus-shadow-rgb: 214, 38, 55 !important;
    --bs-btn-active-color: #fff !important;
    --bs-btn-active-bg: var(--main-action-button-background-color) !important;
    --bs-btn-active-border-color: var(--main-action-button-background-color) !important;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125) !important;
    --bs-btn-disabled-color: #fff !important;
    --bs-btn-disabled-bg: #5B16EC !important;
    --bs-btn-disabled-border-color: #5B16EC !important;
}


/* header */

header .header-logo {
    width: 180px;
    flex-shrink: 0;
}

.header-container {
    border-bottom: 1px solid #C9DBF5;
}

header .header-right .header-phone a {
    color: var(--phone-color);
}
/* -- end of header -- */



.call-us-section .col-right .reserve-btn {
    background: var(--main-action-button-background-color-over); /*!!after fix on base need to remove it*/
}

.btn-secondary {
    background-color: var(--secondary-action-button-background-color) !important;
    border-color: var(--secondary-action-button-background-color) !important;
}

    .btn-secondary:hover {
        background-color: var(--secondary-action-button-background-color-over) !important;
        border-color: var(--secondary-action-button-background-color-over) !important;
    }


@media (hover: hover) and (pointer: fine) {
    .btn-primary:hover {
        background-color: var(--main-action-button-background-color-over) !important;
        border-color: var(--main-action-button-background-color-over) !important;
    }
}

/* -- sb -- */

.searchbox .section-container {
    padding-top: 0.9rem !important;
    padding-bottom: 0.7rem !important;
}

/* calendar */
.daterangepicker thead tr:first-child {
    color: white;
    background-color: var(--sb-selection-frames-color);
}

.daterangepicker td.active {
    background-color: #d1e9ff;
    color: var(--sb-selection-frames-color);
}

    .daterangepicker td.active:hover {
        background-color: #d1e9ff;
        color: var(--sb-selection-frames-color);
    }

.daterangepicker td.start-date {
    border-color: var(--sb-selection-frames-color);
}

.daterangepicker td.end-date {
    border-color: var(--sb-selection-frames-color);
}

.daterangepicker .available.in-range:not(:has(~ .in-range)):not(.off):not(.start-date):hover {
    border-color: var(--sb-selection-frames-color);
}

.daterangepicker .today {
    border-color: var(--sb-selection-frames-color);
    color: var(--sb-selection-frames-color);
}

.daterangepicker .start-date.end-date {
    border-left-color: var(--sb-selection-frames-color);
}

.daterangepicker td.start-date.end-date {
    border-color: var(--sb-selection-frames-color) !important;
}

.daterangepicker td.in-range {
    background-color: #d1e9ff;
    color: var(--sb-selection-frames-color);
    border-top-color: var(--sb-selection-frames-color);
    border-bottom-color: var(--sb-selection-frames-color);
}
/* end of calendar*/

.daterangepicker .drp-buttons .applyBtnCutom {
    background-color: var(--sb-selection-frames-color);
}

/*
.form-container #form-close-btn {
    display: none !important;
}
*/
/* -- end of sb -- */

/* home page */

.main-content {
    padding: 46px 0 56px 0;
    background-color: #ffffff;
}

    .main-content h1 {
        margin-top: 0px;
        color: #000000;
    }

.main-content-header-text {
    color: #333;
    font-size: 24px;
    margin: 20px auto 0;
}
.mobile-sub-header {
    display: none;
}
    @media (max-width: 767px) {
        .mobile-sub-header {
            display: block;
            font-size: 28px;
            line-height: 36px;
            margin-top: 0px;
            color: #000000;
            text-transform: capitalize;
        }
    }
    .main-content-searchbox {
        margin-top: 46px;
        border-radius: 14px;
        padding: 10px;
        background-color: var(--sb-homepage-frame-bg-color);
    }

.main-content-header-text a {
    color: var(--main-action-button-background-color);
    border-bottom: 0px none #056DFF; /* rcheck wjy we need it in the original branch */
    text-decoration: underline;
}

    .main-content-header-text a:hover, a:active {
        color: var(--main-action-button-background-color);
        text-decoration: none;
    }

/* -- end of home page -- */

/* multi search page */

.hotel-list-item {
    border: 1px solid #C9DBF5;
}

.searchbox {
    background-color: #E9F1FF;
}

.multi-hotel-results__sorting .sort {
    margin-right: 8px;
    background-color: var(--secondary-action-button-background-color);
    border-radius: 8px;
}

    .multi-hotel-results__sorting .sort:hover {
        background: var(--secondary-action-button-background-color-over);
    }

    .multi-hotel-results__sorting .sort.active {
        background: var(--secondary-active-action-button-background-color);
    }

        .multi-hotel-results__sorting .sort.active:hover {
            background: var(--secondary-active-action-button-background-color-over);
        }

.multi-hotel-results__sorting {
    margin-bottom: 16px; /*!!*/
}

.left-side-map button {
    background: var(--secondary-active-action-button-background-color);
}

    .left-side-map button:hover {
        background: var(--secondary-active-action-button-background-color-over);
    }

.show-more-hotels button {
    background-color: var(--secondary-action-button-background-color);
}

    .show-more-hotels button:hover {
        background-color: var(--secondary-action-button-background-color-over);
    }

.left-sidebar-top-rating .filter-rating .button-rating.disabled {
    border-color: #eef2f3 !important; /*!! - need to add it to the source branch*/
}

.ui-state-default, .ui-widget-content .ui-state-default {
    background: var(--secondary-action-button-background-color);
}
/* -- end of multi search page -- */

/* hotel landing page */

div.text-primary {
    color: #0052C6 !important;
}

.bg-gray-300 {
    background-color: #1C2841 !important;
}

.navbar-container {
    background-color: #1C2841;
}

.room-cards-section .description-container .content-lower .btn-col .text-btn img {
    display: none;
}

.room-cards-section .description-container .content-lower .btn-col {
    color: #0052C6;
}

.room-cards-section .row-container {
    border: 1px solid #C9DBF5;
}

.btn-tertiary {
    color: #ffffff !important;
    background-color: var(--secondary-active-action-button-background-color) !important;
    border-color: var(--secondary-active-action-button-background-color) !important;
}

    .btn-tertiary:hover {
        background-color: var(--secondary-active-action-button-background-color-over) !important;
        border-color: var(--secondary-active-action-button-background-color-over) !important;
    }

/* -- end of hotel landing page -- */

/* checkout page */
.checkout-page section {
    border: 1px solid #C9DBF5;
    background: #E9F1FF;
}

/* -- end of checkout page -- */

/* footer */
footer {
    background: none;
    color: #666666;
    padding: 26px 0 0 !important;
    border-top: 1px solid #E9F1FF;
}

    footer a {
        color: #999999;
    }

        footer a:hover, a:active {
            color: #666666;
            text-decoration: underline !important;
        }

    footer .footer-top {
        margin-bottom: 12px;
    }

        footer .footer-top p a.phone {
            color: #999999;
            font-weight: 400;
        }

            footer .footer-top p a.phone:hover, a.phone:active {
                text-decoration: underline !important;
            }


        footer .footer-top div > a.one-line, footer .footer-top .social a {
            color: #999999;
        }

        footer .footer-top div > p, footer .footer-top div > a {
            margin-bottom: 8px !important;
        }

        footer .footer-top p.large-section a:not(:first-child)::before {
            background: #999999;
        }

    footer .footer-bottom {
        background: #ffffff;
        padding: 12px 0; /*!!*/
    }

        footer .footer-bottom a {
            color: #999999;
        }

            footer .footer-bottom a:hover, footer .footer-bottom a:active {
                color: #666666;
                text-decoration: underline !important;
            }


/* -- end of footer -- */


/* customer support page */
.cust-support-title-container {
    padding-bottom: 30px; /*!! move to the internal pages */
}

.cust-support-section-container {
    padding-bottom: 64px;
}

    .cust-support-section-container .cust-supp-content {
        max-width: 924px;
        margin: 0px auto 0;
    }

        .cust-support-section-container .cust-supp-content p {
            padding-bottom: 10px;
        }
/* -- customer support page -- */



/* homepage main hero */
.mainhero .container {
    max-width: 1200px;
    margin: 0 auto;
}

.mainhero .header-container {
    text-align: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    border-bottom: 0px;
}

.mainhero .main-title {
    color: #333;
    font-size: 28px;
    font-weight: 500;
    margin: 0;
    line-height: 1.3;
    font-weight: bold;
}

    .mainhero .main-title span {
        border-bottom: 2px solid #6366f1;
        display: inline-block;
        line-height: 0.9;
    }

.mainhero .subtitle {
    color: #6366f1;
    font-size: 18px;
    margin: 10px 0;
    font-weight: normal;
}

.mainhero h1 {
    color: #333;
    font-size: 24px;
    margin-bottom: 10px;
}

.mainhero .grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
    margin-bottom: 30px;
}

@media (max-width: 1200px) {
    .mainhero .grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .mainhero .grid {
        grid-template-columns: 1fr;
    }
}

.mainhero .destination {
    position: relative;
    border-radius: 5px;
    overflow: hidden;
}

    .mainhero .destination a {
        display: block;
        text-decoration: none;
    }

    .mainhero .destination img {
        width: 100%;
        height: 320px;
        object-fit: cover;
    }

.mainhero .destination-name {
    position: absolute;
    bottom: 20px;
    left: 20px;
    color: white;
    font-size: 20px;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
/* -- end of homepage main hero -- */

a.campaign-phone span.campaign-phone {
    color: var(--phone-color);
}
a.campaign-phone span.white-phone-text {
    color: rgba(var(--bs-white-rgb), var(--bs-text-opacity)) !important;
}

a.campaign-phone span.campaign-phone:hover {
    text-decoration: underline;
}

.room-rates-form-modal #room-forms-popup {
    background-color: #E9F1FF;
}