@font-face {
    font-family: 'HelveticaNeueMedium';
    src: url('v1\styles\fonts\._Helvetica-Neue-LT-Std-65-Medium.ttf') format('truetype');
    /*    font-weight: normal;
    font-style: normal;*/
}

html, body {
    font-family: 'HelveticaNeueMedium', sans-serif !important;
}


:root {
    --light-color: #EAEAEA;
    --primary-color: #CB1520;
    --tw-bg-opacity: 1;
    --primary-color-dark: rgb(218 41 48);
}

    html body .bg-primary {
        background-color: var(--primary-color) !important;
    }

    html body .text-primary {
        color: var(--primary-color) !important;
    }

    html body .text-muted {
        --bs-text-opacity: 1;
        color: rgb(82 89 96 / 75%) !important;
    }

.navbar {
    padding: 5px !important;
}



.bg-primary-100 {
    background-color: var(--light-color) !important;
}

.text-primary {
    color: var(--primary-color) !important;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

.btn-Light {
    background-color: var(--light-color) !important;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.btn:hover {
    color: none !important;
    background-color: var(--primary-color-dark) !important;
}

.btn-light {
    background-color: #eef1f4 !important;
}

    .btn-light.disabled, .btn-light:disabled {
        background-color: #eef1f4 !important;
    }

.content {
    padding-top: 1.1rem;
}

.shadow {
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}

.container {
    padding-left: 0px !important;
}

.text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
}

.pt-12 {
    padding-top: 3rem;
}

.pb-32 {
    padding-bottom: 8rem;
}

.text-muted {
    --bs-text-opacity: 1;
    color: rgb(82 89 96 / 75%) !important;
}

@media (max-width: 576px) {
    .plr {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
}

.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    padding-right: 0px !important;
}



#rangeInput::-webkit-slider-thumb {
    background-color: var(--primary-color); /* Thumb color */
    border: none;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    cursor: pointer;
}

#rangeInput::-moz-range-thumb {
    background-color: var(--primary-color); /* Thumb color for Firefox */
    border: none;
    height: 20px;
    width: 20px;
    border-radius: 50%;
}



/* Custom checkbox style */
.form-check-input {
    -webkit-appearance: none;
    appearance: none;
    border: 2px solid #ccc;
    border-radius: 4px;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
}

    /* Style when checkbox is checked */
    .form-check-input:checked {
        background-color: var(--primary-color) !important;
        border-color: var(--primary-color) !important;
    }

        .form-check-input:checked::before {
            position: absolute;
            color: white;
        }
/* Common page item styles */
.page-item .page-link {
    color: var(--primary-color);
    background-color: transparent;
}

/* Active page item */
.page-item.active .page-link {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.page-item .page-link:hover,
.page-item .page-link:focus {
    color: var(--primary-color);
    background-color: transparent;
    box-shadow: none;
    outline: none;
    text-decoration: none;
}


/* Loader */
.dd-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999999; /* very high to cover headers/footers */
    width: 100vw;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: all; /* capture all input */
    touch-action: none; /* prevent touch scrolling */
    overflow: hidden;
}

.dd-loader-wrapper {
    position: relative;
    text-align: center;
}

    .dd-loader-wrapper .dd-loader {
        --r1: 154%;
        --r2: 68.5%;
        width: 60px;
        aspect-ratio: 1;
        border-radius: 50%;
        background: radial-gradient(var(--r1) var(--r2) at top, #0000 79.5%, var(--primary-color) 80%), radial-gradient(var(--r1) var(--r2) at bottom, var(--primary-color) 79.5%, #0000 80%), radial-gradient(var(--r1) var(--r2) at top, #0000 79.5%, var(--primary-color) 80%), #ccc;
        background-size: 50.5% 220%;
        background-position: -100% 0%, 0% 0%, 100% 0%;
        background-repeat: no-repeat;
        animation: l9 2s infinite linear;
        margin: 0 auto;
    }

    .dd-loader-wrapper span {
        display: block;
        margin-top: 10px;
        font-size: 16px;
        font-weight: 600;
        color: var(--primary-color);
    }

@keyframes l9 {
    33% {
        background-position: 0% 33%, 100% 33%, 200% 33%;
    }

    66% {
        background-position: -100% 66%, 0% 66%, 100% 66%;
    }

    100% {
        background-position: 0% 100%, 100% 100%, 200% 100%;
    }
}








/* *****************************************************************************************************************************************/





.k-calendar .k-calendar-td.k-selected .k-calendar-cell-inner, .k-calendar .k-calendar-td.k-selected .k-link {
    background-color: var(--primary-color) !important
}
range-start, .k-calendar .k-range-end, .k-calendar .k-range-mid {
    background-color: var(--light-color) !important
}
.k-calendar .k-calendar-view .k-today {
    color: var(--primary-color) !important
}
.k-button-flat-primary {
    color: black !important
}
.k-calendar-header {
    background-color: var(--light-color) !important
}
.k-input-solid {
    border-color: var(--primary-color) !important;
}
    .k-input-solid:hover, .k-input-solid.k-hover {
        border-color: var(--primary-color) !important;
    }
.k-list-item:hover,
.k-list-item.k-hover {
    background-color: var(--light-color) !important;
    border-color: none !important
}

/* Dropdown Button Styling */
.dropdown-toggle {
    background-color: var(--light-color) !important
}

/* Dropdown Item Styling */
.dropdown-item {
    color: black;
    height: 40px;
    font-size: 16px;
    display: flex !important;
    align-items: center;
    padding-left: 12px !important;
}

    .dropdown-item:hover {
        background-color: var(--light-color) !important;
        color: black;
    }

    .dropdown-item:active {
        background-color: var(--primary-color); 
        color: white;
    }
    .dropdown-item.selected {
        background-color: var(--primary-color); 
        color: white;
    }

.form-control:focus {
    border-color: var(--primary-color) !important;
}
.btn-check:focus + .btn, .btn:focus {
    outline: none !important;
    box-shadow: none !important;
}
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: none !important;
}

/* For modern browsers */
.custom-select option:hover {
    background-color: var(--primary-color) !important;
}

/* For some browsers that need this */
.custom-select option:checked,
.custom-select option:focus {
    background-color: var(--primary-color) !important;
}
/* Works in Firefox, partially in others */
select option:hover {
    background-color: var(--primary-color) !important;
    color: white; /* Optional: Change text color */
}

.dropdown-item:hover {
    background-color: var(--light-color) !important;
    color: black !important;
}
#linkLogin {
    color: var(--primary-color) !important
}
    #linkLogin:hover {
        color: var(--primary-color) !important
    }
.hidden-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: 0;
    border: none;
    overflow: hidden;
}

.k-list-item.k-focus, .k-focus.k-list-optionlabel {
    box-shadow: none !important;
    background-color: var(--light-color) !important;
}
.k-calendar .k-calendar-td:focus .k-calendar-cell-inner, .k-calendar .k-calendar-td:focus .k-link, .k-calendar .k-calendar-td.k-focus .k-calendar-cell-inner, .k-calendar .k-calendar-td.k-focus .k-link {
    box-shadow: none !important;
    background-color: var(--light-color);
}
.k-link:hover {
    background-color: var(--light-color) !important;
}
.k-button-solid-primary {
    border-color: #ffffff;
    color: var(--kendo-color-on-primary, white);
    background-color: var(--primary-color) !important;
}

/***** Flight Details Tabs *****/
.flight-details-tabs-buttons {
    display: flex;
    gap: 10px;
    overflow-x: auto;
}

    .flight-details-tabs-buttons .btn.tab {
        background-color: white;
        border: 1px solid #948c8c;
        color: black;
        border-radius: 8px; /* Rounded borders */
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 17px;
        transition: background-color 0.3s, color 0.3s;
        font-weight: 500;
    }

        .flight-details-tabs-buttons .btn.tab i {
            font-size: 16px;
        }

        /* Active Tab Styles */
        .flight-details-tabs-buttons .btn.tab.active {
            background-color: var(--primary-color);
            border: 1px solid var(--primary-color);
            color: white;
        }
            .flight-details-tabs-buttons .btn.tab.active:hover {
                background-color: var(--primary-color) !important;
                color: white;
            }

        /* Hover style for non-active tabs */
        .flight-details-tabs-buttons .btn.tab:hover:not(.active) {
            background-color: transparent !important; /* Ensures background stays clear */
            border: 1px solid #948c8c;
        }



/*Layout*/
.navbar {
    padding-top: .2rem;
    padding-bottom: .2rem;
}

.nav-link {
    color: black;
    font-weight: 500;
    text-decoration: none;
}

    .nav-link.active {
        color: var(--primary-color);
    }

    .nav-link:hover,
    .nav-link:focus {
        color: var(--primary-color);
    }

.navbar-button-container {
    margin-left: auto;
}

.flightbox {
    flex: 0 0 calc(25% - 10px);
    box-sizing: border-box;
    cursor: pointer;
}
.flightsearch {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.hotelNightbox {
    flex: 0 0 calc(12% - 10px);
    box-sizing: border-box;
}

.hotelPassengerbox {
    flex: 0 0 calc(38% - 10px);
    box-sizing: border-box;
}
.search-swap-icon {
    position: absolute;
    left: -1.2rem;
    top: 50%;
    transform: translateY(-50%);
}
.passengerChildDivPopup {
    position: absolute;
    z-index: 9999;
}


@media (max-width: 1200px) {
    .flightbox {
        flex: 1 0 100%; 
    }

    .hotelNightbox {
        flex: 1 0 100%;
    }

    .hotelPassengerbox {
        flex: 1 0 100%; 
    }
    .search-swap-icon {
        left: 14.6rem;
        transform: translate(-50%, -50%) rotate(90deg);
    }
    .search-swap-icon {
        transform: translate(-50%, -50%) rotate(90deg);
    }
    .passengerChildDivPopup {
        position: relative
    }
/*    .k-hstack, .k-hbox {
        display: flex;
        flex-flow: row nowrap;
        flex-direction: column;
    }*/
}


.flight-tab-bar {
    flex-wrap: wrap; /* ? allows buttons to go to the next row */
    gap: 0; /* tightly connected buttons */
    padding: 0;
    border-bottom: 1px solid #ccc;
}

.flight-tab-button {
    padding: 7px 9px;
    border: 1px solid #ccc;
    border-bottom: none;
    background: #ffffff;
    color: #333;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease;
    border-radius: 10px 10px 0 0;
    font-weight: 500;
    white-space: nowrap; /* keeps button text on one line */
    flex-grow: 1; /* optional: makes buttons share space */
    text-align: center;
    padding-left: 20px;
    padding-right: 20px;
}

    .flight-tab-button.active {
        background: var(--primary-color);
        color: #ffffff;
        font-weight: 600;
        z-index: 1;
        position: relative;
    }