@import url(./tem-header_style.css);

:root {
    /* Background Colors */
    --bgColor-100: #ffe0d5;
    --bgColor-200: #88dae9;
    --bgColor-500: #1a96aa;

    /* Primary Colors (Base: #1a96aa) */
    --primary: #1a96aa;
    --primary-950: #042e36;
    --primary-900: #084653;
    --primary-800: #0c5d70;
    --primary-700: #10748d;
    --primary-600: #148baa;
    --primary-500: #1a96aa;
    /* Base Color */
    --primary-400: #2eb8d1;
    --primary-300: #5bc9dd;
    --primary-200: #88dae9;
    --primary-100: #b5ebf5;
    --primary-50: #e2f7fb;

    /* Secondary Colors (Base: #f2591a) */
    --secondary: #f2591a;
    --secondary-950: #4a1a05;
    --secondary-900: #732a0c;
    --secondary-800: #9c3b13;
    --secondary-700: #c54c1a;
    --secondary-600: #d9521a;
    --secondary-500: #f2591a;
    /* Base Color */
    --secondary-400: #ff7b4a;
    --secondary-300: #ff9d7a;
    --secondary-200: #ffbeaa;
    --secondary-100: #ffe0d5;
    --secondary-50: #fff0ea;

    /* Zinc Colors */
    --zinc-950: #09090b;
    --zinc-900: #18181b;
    --zinc-800: #27272a;
    --zinc-700: #3f3f46;
    --zinc-600: #52525b;
    --zinc-500: #71717a;
    --zinc-400: #a1a1aa;
    --zinc-300: #d4d4d8;
    --zinc-200: #e4e4e7;
    --zinc-100: #f4f4f5;
    --zinc-50: #fafafa;

    --neutral-950: #09090b;
    --neutral-900: #18181b;
    --neutral-800: #27272a;
    --neutral-700: #3f3f46;
    --neutral-600: #52525b;
    --neutral-500: #71717a;
    --neutral-400: #a1a1aa;
    --neutral-300: #d4d4d8;
    --neutral-200: #e4e4e7;
    --neutral-100: #f4f4f5;
    --neutral-50: #fafafa;
}

.rounded-type-1 {
    border-radius: 8px;
}

.reserve-search button span {
    color: #fff !important;
}

@media (min-width: 1024px) {
    #search-box-container {
        min-height: unset !important;
    }

    #search-box .FlightClass,
    #search-box .CompartmentType {
        height: fit-content !important;
        padding: 4px 10px !important;
    }

    #search-box {
        padding: 33px !important;
        margin-top: -0.5rem !important;
        margin-bottom: 3.5rem !important;
        margin-left: auto;
        margin-right: auto;
        background-color: rgb(131 134 143 / 60%);
        width: 100%;
        height: auto;
        border-top: 1.5px solid white !important;
        border-bottom: 1.5px solid white !important;
        border-left: none !important;
        border-right: none !important;
        border-radius: 30px;
        min-height: unset !important;
        backdrop-filter: blur(2px) !important;
        z-index: 20 !important;
        box-shadow: rgba(0, 0, 0, 0.2) 0 18px 50px -10px;
    }

    .module-banner-background,
    .flight-banner-background {
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        background-image: url('../images/bg-searchBox.jpg');
    }

    #search-box input::placeholder {
        color: #18181b !important;
    }

    #search-box #r-flighthotel,
    #search-box #r-insurance,
    #search-box #r-flight,
    #search-box #r-hotel,
    #search-box #r-tour,
    #search-box #r-train {
        padding: 0 !important;
        background-color: transparent !important;
        width: 100%;
        height: auto;
        border: none !important;
        border-radius: 0 !important;
        min-height: unset !important;
    }

    #search-box .Basis_Date_Box {
        margin: 0 !important;
    }

    /* #search-box .bg-bgColor-100 span {
        color: black !important;
    } */

    .searchList ul li:not(:first-child):hover {
        background-color: var(--primary) !important;
    }

    .searchList ul li:not(:first-child):hover span {
        color: white !important;
    }

    .Basis_Calendar .selected_date {
        background: var(--primary-600) !important;
    }

    .confirm-date-content button:hover {
        background: var(--secondary-600);
    }

    .confirm-date-content button {
        background: var(--primary-600);
        color: #fff;
    }

    .calendar-apply-date:hover {
        background: var(--secondary-600);
    }

    .calendar-apply-date {
        background: var(--primary-600);
        color: #fff;
    }

    .day.days_available {
        background: var(--secondary-600);
    }

    .calendar-switch {
        color: var(--primary-600);
    }

    .Basis_Calendar .section_next_month,
    .Basis_Calendar .section_prev_month {
        color: var(--primary-600);
    }

    .Basis_Calendar .current_day::after {
        border-color: var(--primary-600) transparent transparent;
    }

    .Basis_Calendar .month_day_list table td:not(.disable_day, .empty_day, .expire_day):hover {
        border-color: var(--primary-600);
    }

    .Basis_Calendar .current_day {
        background: var(--primary-600) !important;
        color: #fff !important;
    }




    .search-engine-container {
        padding-top: 3.5rem;
        display: flex;
        justify-content: start;
    }

    .module-banner-image img {
        position: absolute;
        top: 0;
        left: 0;
        width: 700px;
        height: 100%;
        object-fit: cover;
        border-radius: 24px;
    }

    #search-box {
        padding: 24px 16px;
        width: 100%;
    }

    #search-box input {
        outline: none !important;
    }

    .search-nav {
        margin-bottom: 24px !important;
    }

    .reservation-item {
        display: flex;
        gap: 10px;
    }

    .reserve-btn {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: #f4f4f5 !important;
        width: auto !important;
        min-width: 75px !important;
        height: 68px !important;
        margin: 0 !important;
        padding: 0 4px !important;
        border-radius: 12px;
        transition: all 300ms ease;
    }

    .search-box-container .reserve-btn.active-module,
    .reserve-btn:hover {
        background-color: var(--primary) !important;
        color: #fff !important;
    }

    #serch-box .FlightClass,
    #serch-box .CompartmentType {
        height: fit-content !important;
    }

    .reserve-btn .module-name {
        color: #52525b;
        transition: all 300ms ease;
    }

    .active-module {
        background-color: var(--primary-600) !important;
        color: white;
        box-shadow: 0px 4px 7.7px 0px #00000040;
    }

    .active-module .module-name {
        color: white;
    }

    .reserve-btn:hover {
        background-color: var(--primary-600);
        box-shadow: 0px 4px 7.7px 0px #00000040;
    }

    .reserve-btn:hover .module-name {
        color: #ffffff;
    }

    .reserve-btn .module-name:hover {
        color: #ffffff !important;
    }

    .reserve-field.departure-date,
    .click-content,
    .reserve-field.passengers-field,
    .reserve-field.return-date,
    .reserve-field.traveltype-field,
    .reserve-field.flighttype-field,
    .reserve-field.Compartment-field {
        background-color: #f4f4f5 !important;
        height: 56px !important;
        border-radius: 12px;
        padding: 4px !important;
    }

    .click-content,
    .reserve-field.departure-date>div:first-of-type,
    .reserve-field.return-date>div:first-of-type {
        display: flex;
        align-items: center;
    }

    .reserve-field.departure-date>div:first-of-type,
    .reserve-field.return-date>div:first-of-type {
        padding: 0 !important;
    }

    .label-routes .down-icon,
    .label-routes .label-text,
    .label-dates .down-icon,
    .label-dates .label-text,
    .label-passengers .down-icon,
    .label-passengers .label-text,
    .label-flighttype-cip .down-icon,
    .label-flighttype-cip .label-text,
    .label-traveltype-cip .down-icon,
    .label-traveltype-cip .label-text,
    .label-compartment-train .down-icon,
    .label-compartment-train .label-text,
    .reserve-field.departure-route p,
    .reserve-field.destination-route p,
    .reserve-field.departure-date p,
    .reserve-field.return-date p,
    .reserve-search button svg {
        display: none !important;
    }

    .label-routes,
    .label-dates,
    .label-passengers {
        width: auto !important;
    }

    .flighttype-field.flighttype-dropDown,
    .reserve-field.flightclass-field {
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 8px;
        height: 48px !important;
        padding: 0 12px 0 8px;
        cursor: pointer;
        border: 1px solid #71717a;
        border-radius: 12px;
        background-color: #fff;
    }

    .reserve-field.flightclass-field {
        width: 128px !important;
        height: 48px !important;
        position: absolute !important;
        top: 0;
        right: 11.15rem;
    }

    .module-banner-image img {
        position: absolute;
        top: 0;
        left: 0;
        width: 700px;
        height: 100%;
        object-fit: cover;
        border-radius: 24px;
        z-index: 0;
    }

    .object-cover {
        -o-object-fit: cover;
        object-fit: cover;
    }

    .rounded-3xl {
        border-radius: 1.5rem;
    }

    .w-\[700px\] {
        width: 700px;
    }

    .h-full {
        height: 100%;
    }

    .h-full {
        height: 100%;
    }

    .top-0 {
        top: 0px;
    }

    .absolute {
        position: absolute;
    }

    #flightHotelSearch .reserve-field.flightclass-field {
        right: 0;
    }

    .reserve-field.flightclass-field>div:first-of-type {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-direction: row-reverse;
        padding: 0;
    }

    #flightHotelSearch .flight-routes {
        margin-top: 4.5rem;
    }

    .reserve-field.flightclass-field>div:first-of-type .clr {
        position: absolute;
    }

    .flighttype-field.flighttype-dropDown {
        margin-bottom: 24px;
        width: 163px !important;
        height: 48px !important;
    }

    .flighttype-field.flighttype-dropDown .flighttype-field-icon {
        left: 8px;
        display: block !important;
    }

    .flighttype-field-icon .down-icon,
    .label-flightclass .down-icon {
        margin-top: 0 !important;
    }

    .flighttype-field-icon svg,
    .label-flightclass .down-icon,
    .label-routes svg,
    .label-dates svg,
    .label-passengers svg {
        width: 48px !important;
        height: 48px !important;
    }

    .close-passenger-box svg,
    .selectLocation svg {
        width: 32px !important;
        height: 32px !important;
    }

    .route-content-inner .exchangeRoute {
        top: 34px !important;
        left: 22px !important;
        background-color: var(--primary-600) !important;
        border-radius: 100%;
        width: 48px !important;
        height: 48px !important;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 !important;
        transition: all 300ms ease;
        transform: rotate(0deg) !important;
    }

    .exchangeRoute svg,
    .removeroute-icon {
        width: 24px !important;
        height: 24px !important;
    }

    .flighttype-field.flighttype-dropDown .flighttype-dropDown-text {
        margin-bottom: 0 !important;
        height: auto !important;
        font-size: 16px !important;
    }

    .label-flightclass>svg:first-of-type,
    .label-flightclass .label-text {
        display: none;
    }

    .form-search,
    #flightHotelSearch>div:first-of-type,
    #trainSearch>div:first-of-type {
        flex-wrap: wrap;
    }

    .flight-routes,
    .train-routes,
    .bus-routes {
        /* flex-direction: column; */
        flex-basis: 100%;
    }

    .reserve-field.departure-route,
    .reserve-field.destination-route {
        width: 100% !important;
        height: 59px !important;
        flex-basis: 100%;
    }

    #cipSearch .Basis_Date_Box,
    #trainSearch .Basis_Date_Box {
        flex-basis: 100%;
    }

    .reserve-field.traveltype-field,
    .reserve-field.flighttype-field {
        flex: 1;
        height: 56px !important;
    }

    .reserve-field.Compartment-field {
        flex: 1;
    }

    .Basis_Date_Box {
        flex: 2;
    }

    #hotelSearch .Basis_Date_Box,
    #tourSearch .Basis_Date_Box,
    #insuranceSearch .Basis_Date_Box,
    #serviceSearch .Basis_Date_Box,
    #busSearch .Basis_Date_Box {
        flex-basis: 100%;
    }

    .Flightclass-Passenger {
        flex: 1;
    }

    .flightclass-in-passengerbox {
        display: none !important;
    }

    .Wrapper-ExteraHoteldate {
        width: 60% !important;
    }

    .Basis_Date.start_date,
    .Basis_Date.end_date,
    .Basis_Date_ExteraHoteldate {
        position: unset !important;
        padding: 0 !important;
    }

    .reserve-field.passengers-field {
        flex: 1;
    }

    .reserve-field.passengers-field>div:first-of-type {
        display: flex;
        align-items: center;
        padding: 0;
    }

    .exchangeRoute {
        top: 4px !important;
        left: -25px !important;
        background-color: var(--primary-600) !important;
        border-radius: 100%;
        width: 48px !important;
        height: 48px !important;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 !important;
        transition: all 300ms ease;
        transform: rotate(90deg);
    }

    .exchangeRoute:hover {
        background-color: var(--secondary-600) !important;
    }

    .reserve-search {
        flex-basis: 100%;
        margin-top: 16px;
        height: auto !important;
    }

    .reserve-search button {
        position: relative;
        width: 125px !important;
        background-color: var(--primary-600) !important;
        height: 48px !important;
        color: white !important;
        margin-top: 0 !important;
        margin-left: 0 !important;
        border-radius: 12px;
        transition: all 300ms ease;
        overflow: hidden;
    }

    .reserve-search button span {
        position: relative;
        z-index: 10;
        color: #fff;
        transition: color 0.3s ease;
    }

    .reserve-search button::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--secondary-600);
        border-radius: inherit;
        transform: translateX(100%) translateY(100%);
        transition: all 0.3s ease-out;
    }

    .reserve-search button:hover::after {
        transform: translateX(0) translateY(0);
    }

    .flighttype-items,
    .FlightClass.hidden-box,
    .traveltype.hidden-box,
    .flighttype.hidden-box,
    .Compartment.hidden-box {
        top: 100%;
        width: 100% !important;
        right: 0;
        background-color: #fff;
        border: none !important;
        box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
        border-radius: 8px;
        padding: 8px;
        margin-bottom: 30px !important;
    }

    .FlightClass.hidden-box li,
    .traveltype.hidden-box li,
    .flighttype.hidden-box li,
    .Compartment.hidden-box li {
        line-height: 2rem;
        font-size: 1rem;
        text-align: center;
        display: block;
        margin: 4px 0;
        border: unset;
        padding: 2px 6px;
        transition: all 300ms ease;
    }

    .active-r-btn,
    .active-FlightClass,
    .active-FlightType,
    .active-TravelType,
    .active-Compartment {
        border-radius: 8px !important;
        background-color: var(--primary-600) !important;
        transition: all 300ms ease;
    }

    .active-r-btn span,
    .active-FlightClass,
    .active-FlightType label,
    .active-TravelType label,
    .active-Compartment label {
        color: #ffffff !important;
    }

    #oneway:hover span,
    #backtoback:hover span,
    #multi:hover span,
    .FlightClass.hidden-box li:hover span,
    .traveltype.hidden-box li:hover label,
    .flighttype.hidden-box li:hover label,
    .Compartment.hidden-box li:hover label {
        color: white !important;
    }

    #oneway:hover,
    #backtoback:hover,
    #multi:hover,
    .FlightClass.hidden-box li:hover,
    .traveltype.hidden-box li:hover,
    .flighttype.hidden-box li:hover,
    .Compartment.hidden-box li:hover {
        background-color: var(--primary-600);
        border-radius: 8px !important;
    }

    .searchList {
        position: absolute !important;
        width: 400px !important;
        margin: 0 !important;
        min-width: auto !important;
        border-radius: 8px;
        box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
        left: 0;
        max-height: 254px;
        overflow-y: auto;
    }

    .multicity-flight-form .searchList {
        width: 100% !important;
    }

    .ul-list ul li {
        text-align: center;
    }

    .ul-list ul li:first-of-type {
        background-color: var(--primary-600);
        color: white !important;
    }

    .ul-list ul li:not(:last-child),
    .locationResult div:not(:last-of-type) {
        border-bottom: 1px solid var(--primary-100);
    }

    .ul-list ul li:hover {
        background-color: var(--primary-600);
        color: white !important;
        transition: all 300ms ease;
    }

    .passengerbox.hidden-box {
        width: 310px !important;
        position: absolute !important;
        right: 0;
        left: 0;
        margin: 0;
        padding: 16px !important;
        top: 100%;
        border-radius: 8px;
        overflow-x: hidden !important;
        box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
    }

    .passenger-item.adult-passenger-item,
    .passenger-item.child-passenger-item,
    .passenger-item.infant-passenger-item,
    .passenger-item.room-passenger-item,
    .passengerbox.hidden-box .passenger-item {
        display: flex;
        justify-content: space-between;
    }

    .passenger-item.child-passenger-item ul,
    .passenger-item.adult-passenger-item ul,
    .passenger-item.infant-passenger-item ul,
    .passenger-item.room-passenger-item ul,
    .passengerbox.hidden-box .passenger-item ul {
        height: auto !important;
        line-height: normal !important;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .minus-count,
    .plus-count {
        line-height: normal !important;
        width: 24px !important;
        height: 24px !important;
        background: var(--primary-600);
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 4px;
    }

    .plus-count .count-icon-simple,
    .minus-count .count-icon-simple {
        color: #fff;
        font-size: 24px !important;
    }

    .plus-count>div,
    .minus-count>div {
        line-height: 27px !important;
    }

    .confirm-passenger,
    .toggle-calendar {
        display: flex !important;
        align-items: center;
        justify-content: center;
        margin-top: 24px;
        background-color: var(--primary-600) !important;
        color: white;
        border-radius: 8px;
        font-weight: 500;
        height: 40px !important;
        transition: all 300ms ease;
    }

    .confirm-passenger:hover,
    .toggle-calendar:hover {
        background-color: var(--secondary-600) !important;
        color: white !important;
    }

    .reserve-field.flightclass-field div:first-of-type .clr,
    .passengerbox.hidden-box .clr {
        position: absolute;
    }

    .route-container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        display: grid;
        gap: 24px;
    }

    .multi-route-tlt {
        margin-bottom: 20px !important;
    }

    .multicity-flight-form .route-minus-btn {
        top: 0;
        left: 0;
        width: fit-content !important;
        padding: 4px !important;
        height: fit-content !important;
        position: absolute;
        display: flex;
        line-height: normal !important;
    }

    .passenger-birthday-dropdown {
        z-index: 1000000 !important;
    }

    .birthdate-dates input {
        height: 32px !important;
    }

    .multicity-flight-form .route-minus-btn span {
        display: none;
    }

    .multicity-flight-form .route-content:first-of-type div.route-minus-btn,
    .multicity-flight-form .route-content:nth-child(2) div.route-minus-btn,
    .remove-routs {
        display: none !important;
    }

    .route-content-inner {
        flex-wrap: wrap;
    }

    .multicity-flight-form .passengers-field-f {
        width: 550px !important;
        flex: unset;
    }

    .multicity-flight-form .reserve-search {
        width: auto !important;
        flex-basis: auto !important;
        margin-top: 0 !important;
    }

    .Add-Remove.reserve-field {
        width: 187px !important;
        height: 48px !important;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--primary-100);
        color: var(--primary-600);
        border-radius: 12px;
        transition: all 300ms ease;
        cursor: pointer;
    }

    .Add-Remove.reserve-field:hover {
        background-color: var(--primary-600);
    }

    .Add-Remove.reserve-field:hover .add-routs {
        color: white;
    }

    .multiroute-fields {
        align-items: center;
    }

    .add-routs {
        width: 100% !important;
        font-size: 16px !important;
        font-weight: 500;
        transition: all 300ms ease;
    }

    .add-routs:hover {
        color: white;
    }

    .addroute-icon,
    .deleteRoom {
        display: none;
    }

    .passenger-birthday-dropdown li {
        font-size: 12px;
    }

    .selectLocation {
        display: flex;
        align-items: center;
        width: 100% !important;
        padding: 4px 0;
    }

    .selectLocation .parent-item,
    .selectLocation .child-item {
        display: flex;
        align-items: center;
    }

    .createChildDropdown {
        float: unset !important;
    }

    .createChildDropdown .select-age {
        border: 1px solid var(--primary-400);
        border-radius: 8px;
        outline: none;
        height: 40px !important;
        float: unset !important;
    }

    .createChildDropdown label {
        float: unset !important;
    }

    .contentRoom {
        border-top: 1px solid var(--primary-100);
        padding-top: 8px;
    }

    .birthdate-day-value,
    .birthdate-month-value,
    .birthdate-year-value {
        border: 1px solid #737373 !important;
        border-radius: 8px;
        margin-top: 0.5rem;
        font-size: 12px;
    }

    .search-box-container .birthdate-dates div::after {
        top: 14px !important;
    }

    .createPassengerDropdown {
        margin-top: 0.5rem;
    }

    .traintype-items {
        width: fit-content !important;
        background-color: var(--primary-50);
        border-radius: 8px;
        padding: 8px;
        margin-bottom: 20px !important;
    }

    .traintype-items li {
        padding: 4px;
        border-radius: 8px;
        transition: all 300ms ease;
    }

    .traintype-items li:hover {
        background-color: var(--primary-600);
    }

    .traintype-items li:hover span {
        color: white !important;
    }

    #busSearch .reserve-field.departure-date,
    #busSearch .reserve-field.return-date {
        flex: 1;
    }

    .close-passenger-box {
        width: auto !important;
        height: auto !important;
    }

    .searchHistory-content {
        margin-left: auto;
        margin-right: auto;
    }

    .search-box-container {
        padding-top: 130px;
        padding-bottom: 100px;
    }

    .searchHistory-content .sub-title svg {
        display: none !important;
    }

    .route-content-inner .flight-routes {
        flex-direction: column !important;
    }

}

@media not all and (min-width: 1024px) {
    #search-box-container {
        min-height: unset !important;
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }

    .Basis_Calendar .selected_date {
        background: var(--primary-600) !important;
    }

    .confirm-date-content button:hover {
        background: var(--secondary-600);
    }

    .confirm-date-content button {
        background: var(--primary-600);
        color: #fff;
    }

    .calendar-apply-date:hover {
        background: var(--secondary-600);
    }

    .calendar-apply-date {
        background: var(--primary-600);
        color: #fff;
    }

    .day.days_available {
        background: var(--secondary-600);
    }

    .calendar-switch {
        color: var(--primary-600);
    }

    .Basis_Calendar .section_next_month,
    .Basis_Calendar .section_prev_month {
        color: var(--primary-600);
    }

    .Basis_Calendar .current_day::after {
        border-color: var(--primary-600) transparent transparent;
    }

    .Basis_Calendar .month_day_list table td:not(.disable_day, .empty_day, .expire_day):hover {
        border-color: var(--primary-600);
    }

    .Basis_Calendar .current_day {
        background: var(--primary-600) !important;
        color: #fff !important;
    }

    .module-banner-image img {
        width: 100%;
        height: 12rem;
        object-fit: cover;
        border-radius: 24px;
    }

    #search-box {
        padding: 12px;
        width: 100% !important;
    }

    .search-nav {
        margin-bottom: 24px !important;
    }

    .passenger-birthday-dropdown {
        z-index: 1000000 !important;
    }

    .birthdate-dates input {
        height: 32px !important;
    }

    .reservation-item {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        gap: 10px 4px !important;
    }

    .search-box-container .reserve-btn.active-module,
    .reserve-btn:hover {
        background-color: var(--primary) !important;
        color: #fff !important;
    }

    .reserve-btn {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        grid-column: span 2;
        background-color: #f4f4f5 !important;
        height: 60px !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 12px;
        transition: all 300ms ease;
    }

    .reserve-btn:last-child:nth-child(3n + 1) {
        grid-column: 1 / -1;
    }

    .reserve-btn:nth-last-child(2):nth-child(3n + 1),
    .reserve-btn:nth-last-child(1):nth-child(3n + 2) {
        grid-column: span 3;
    }

    .reserve-btn .module-name {
        color: #52525b;
        transition: all 300ms ease;
    }

    .active-module {
        background-color: var(--primary-600) !important;
        color: white;
        box-shadow: 0px 4px 7.7px 0px #00000040;
    }

    .active-module .module-name {
        color: white;
    }

    .reserve-btn:hover {
        background-color: var(--primary-600);
        box-shadow: 0px 4px 7.7px 0px #00000040;
    }

    .reserve-btn:hover .module-name {
        color: #ffffff;
    }

    .reserve-btn .module-name:hover {
        color: #ffffff !important;
    }

    .reserve-field.departure-date,
    .click-content,
    .reserve-field.passengers-field,
    .reserve-field.return-date,
    .reserve-field.traveltype-field,
    .reserve-field.flighttype-field,
    .reserve-field.Compartment-field {
        background-color: #f4f4f5 !important;
        width: 100% !important;
        height: 56px !important;
        border-radius: 12px;
        padding: 4px !important;
    }

    .click-content,
    .reserve-field.departure-date>div:first-of-type,
    .reserve-field.return-date>div:first-of-type {
        display: flex;
        align-items: center;
    }

    .reserve-field.departure-date>div:first-of-type,
    .reserve-field.return-date>div:first-of-type {
        padding: 0 !important;
    }

    .label-routes .down-icon,
    .label-routes .label-text,
    .label-dates .down-icon,
    .label-dates .label-text,
    .label-passengers .down-icon,
    .label-passengers .label-text,
    .label-flighttype-cip .down-icon,
    .label-flighttype-cip .label-text,
    .label-traveltype-cip .down-icon,
    .label-traveltype-cip .label-text,
    .label-compartment-train .down-icon,
    .label-compartment-train .label-text,
    .reserve-field.departure-route p,
    .reserve-field.destination-route p,
    .reserve-field.departure-date p,
    .reserve-field.return-date p,
    .reserve-search button svg {
        display: none !important;
    }

    .label-routes,
    .label-dates,
    .label-passengers {
        width: auto !important;
    }

    .flighttype-field.flighttype-dropDown,
    .reserve-field.flightclass-field {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        height: 48px !important;
        padding: 0 12px 0 8px;
        cursor: pointer;
        border: 1px solid #71717a;
        border-radius: 12px;
        background-color: #fff;
    }

    .flighttype-field.flighttype-dropDown {
        margin-bottom: 24px;
        width: 136px !important;
        height: 48px !important;
    }

    .flighttype-field.flighttype-dropDown .flighttype-field-icon {
        margin-left: 8px !important;
        display: block !important;
    }

    .flighttype-field.flighttype-dropDown .flighttype-dropDown-text {
        margin-bottom: 0 !important;
        height: auto !important;
    }

    .flighttype-dropDown-text,
    .FlightClass-text {
        font-size: 12px !important;
    }

    .flighttype-field-icon .down-icon,
    .label-flightclass .down-icon {
        margin-top: 0 !important;
    }

    .flighttype-field-icon svg,
    .label-flightclass .down-icon,
    .label-routes svg,
    .label-dates svg,
    .label-passengers svg,
    .close-searchList svg,
    .close-passenger-box svg {
        width: 48px !important;
        height: 48px !important;
    }

    .selectLocation svg {
        width: 32px !important;
        height: 32px !important;
    }

    .exchangeRoute svg,
    .removeroute-icon {
        width: 24px !important;
        height: 24px !important;
    }

    .reserve-field.flightclass-field {
        display: block !important;
        width: 120px !important;
        height: 48px !important;
        position: absolute !important;
        top: -72px;
        right: 9rem;
    }

    #flightHotelSearch .reserve-field.flightclass-field {
        right: 0;
    }

    .reserve-field.flightclass-field>div:first-of-type {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-direction: row-reverse;
        padding: 0;
    }

    .reserve-field.flightclass-field>div:first-of-type .clr {
        position: absolute;
    }

    .label-flightclass>svg:first-of-type,
    .label-flightclass .label-text {
        display: none;
    }

    .form-search,
    #flightHotelSearch>div:first-of-type,
    #trainSearch>div:first-of-type {
        flex-wrap: wrap;
    }

    #flightSearch {
        position: relative;
    }

    #flightHotelSearch .flight-routes {
        margin-top: 72px;
    }

    .reserve-field.departure-route,
    .reserve-field.destination-route {
        width: 100% !important;
        height: 56px !important;
        margin-bottom: 8px !important;
    }

    #cipSearch .Basis_Date_Box,
    #trainSearch .Basis_Date_Box {
        flex-basis: 100%;
    }

    .reserve-field.traveltype-field,
    .reserve-field.flighttype-field {
        margin-bottom: 8px !important;
        height: 56px !important;
    }

    .reserve-field.Compartment-field {
        margin-bottom: 8px !important;
    }

    .Basis_Date_Box {
        margin-bottom: 8px !important;
        flex-direction: column;
    }

    #hotelSearch .Basis_Date_Box,
    #tourSearch .Basis_Date_Box,
    #insuranceSearch .Basis_Date_Box,
    #serviceSearch .Basis_Date_Box,
    #busSearch .Basis_Date_Box {
        flex-basis: 100%;
    }

    .Flightclass-Passenger {
        flex: 1;
    }

    .flightclass-in-passengerbox {
        display: none !important;
    }

    .Basis_Date.start_date,
    .Basis_Date.end_date,
    .Basis_Date_ExteraHoteldate {
        position: unset !important;
        padding: 0 !important;
    }

    .reserve-field.passengers-field {
        margin-bottom: 12px !important;
    }

    .reserve-field.passengers-field>div:first-of-type {
        display: flex;
        align-items: center;
        padding: 0;
    }

    .exchangeRoute {
        top: 40px !important;
        left: 20px !important;
        background-color: var(--primary-600) !important;
        border-radius: 100%;
        width: 40px !important;
        height: 40px !important;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 !important;
        transform: rotate(0) !important;
    }

    .reserve-search {
        flex-basis: 100%;
        margin-top: 16px;
        height: auto !important;
    }

    .reserve-search button {
        position: relative;
        width: 100% !important;
        background-color: var(--primary-600) !important;
        height: 48px !important;
        color: white !important;
        margin-top: 0 !important;
        margin-left: 0 !important;
        border-radius: 12px;
        transition: all 300ms ease;
        overflow: hidden;
    }

    .reserve-search button span {
        position: relative;
        z-index: 10;
        color: #fff;
        transition: color 0.3s ease;
    }

    .reserve-search button::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--secondary-900);
        border-radius: inherit;
        transform: translateX(100%) translateY(100%);
        transition: all 0.3s ease-out;
    }

    .reserve-search button:hover::after {
        transform: translateX(0) translateY(0);
    }

    .flighttype-items,
    .FlightClass.hidden-box,
    .traveltype.hidden-box,
    .flighttype.hidden-box,
    .Compartment.hidden-box {
        z-index: 50 !important;
        background-color: #fff;
        border: none !important;
        box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
        border-radius: 8px;
        padding: 8px;
        margin-bottom: 30px !important;
    }

    .FlightClass.hidden-box ul,
    .traveltype.hidden-box ul,
    .flighttype.hidden-box ul,
    .Compartment.hidden-box ul {
        clear: both;
    }

    .FlightClass.hidden-box li,
    .traveltype.hidden-box ul li,
    .flighttype.hidden-box ul li,
    .Compartment.hidden-box ul li {
        line-height: 2rem;
        font-size: 1rem;
        text-align: center;
        display: block;
        margin: 4px 0;
        border: unset;
        padding: 8px 4px !important;
        transition: all 300ms ease;
    }

    .active-r-btn,
    .active-FlightClass,
    .active-TravelType,
    .active-FlightType,
    .active-Compartment {
        border-radius: 8px !important;
        background-color: var(--primary-600) !important;
        transition: all 300ms ease;
    }

    .active-r-btn span,
    .active-FlightClass span,
    .active-TravelType label,
    .active-FlightType label,
    .active-Compartment label {
        color: #ffffff !important;
    }

    #oneway:hover span,
    #backtoback:hover span,
    #multi:hover span,
    .FlightClass.hidden-box li:hover span {
        color: white !important;
    }

    #oneway:hover,
    #backtoback:hover,
    #multi:hover,
    .FlightClass.hidden-box li:hover {
        background-color: var(--primary-600);
        border-radius: 8px !important;
    }

    .searchList {
        border-radius: 8px;
        box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
        overflow-y: auto;
    }

    .multicity-flight-form .searchList {
        width: 100% !important;
    }

    .ul-list ul li {
        text-align: center !important;
    }

    .ul-list ul li:first-of-type {
        background-color: var(--primary-600);
        color: white !important;
        border-radius: 4px;
        box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
    }

    .ul-list ul li:not(:last-child),
    .locationResult div:not(:last-of-type) {
        border-bottom: 1px solid var(--primary-100);
    }

    .ul-list ul li:hover {
        background-color: var(--primary-600);
        color: white !important;
        transition: all 300ms ease;
    }

    .passengerbox.hidden-box {
        z-index: 50 !important;
        margin: 0;
        padding: 16px !important;
        top: 100%;
        border-radius: 8px;
        overflow-x: hidden !important;
        box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
    }

    .flighttype-items-ul li {
        text-align: center !important;
        padding: 8px 4px !important;
    }

    .passenger-item.adult-passenger-item,
    .passenger-item.child-passenger-item,
    .passenger-item.infant-passenger-item,
    .passenger-item.room-passenger-item,
    .passengerbox.hidden-box .passenger-item {
        display: flex;
        justify-content: space-between;
    }

    .passenger-item.child-passenger-item ul,
    .passenger-item.adult-passenger-item ul,
    .passenger-item.infant-passenger-item ul,
    .passenger-item.room-passenger-item ul,
    .passengerbox.hidden-box .passenger-item ul {
        height: auto !important;
        line-height: normal !important;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .minus-count,
    .plus-count {
        line-height: normal !important;
        width: 24px !important;
        height: 24px !important;
        background: var(--primary-600);
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 4px;
    }

    .plus-count .count-icon-simple,
    .minus-count .count-icon-simple {
        color: #fff;
        font-size: 24px !important;
    }

    .plus-count>div,
    .minus-count>div {
        line-height: 27px !important;
    }

    .confirm-passenger,
    .toggle-calendar {
        display: flex !important;
        align-items: center;
        justify-content: center;
        margin-top: 24px;
        background-color: var(--primary-600) !important;
        color: white;
        border-radius: 8px;
        font-weight: 500;
        height: 40px !important;
        transition: all 300ms ease;
    }

    .confirm-passenger:hover,
    .toggle-calendar:hover {
        background-color: var(--secondary-900) !important;
        color: white !important;
    }

    .reserve-field.flightclass-field div:first-of-type .clr,
    .passengerbox.hidden-box .clr {
        position: absolute;
    }

    .multi-route-tlt {
        margin-bottom: 20px !important;
    }

    .multicity-flight-form .route-minus-btn {
        top: 0;
        left: 0;
        width: fit-content !important;
        padding: 4px !important;
        height: fit-content !important;
        position: absolute;
        display: flex;
        line-height: normal !important;
    }

    .multicity-flight-form .route-content:first-of-type div.route-minus-btn,
    .multicity-flight-form .route-content:nth-child(2) div.route-minus-btn,
    .remove-routs,
    .multicity-flight-form .route-minus-btn span {
        display: none !important;
    }

    .route-content-inner {
        flex-wrap: wrap;
    }

    .multicity-flight-form .reserve-search {
        width: auto !important;
        flex-basis: auto !important;
        margin-top: 0 !important;
    }

    .Add-Remove.reserve-field {
        width: 100% !important;
        height: 48px !important;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--primary-100);
        color: var(--primary-600);
        border-radius: 12px;
        transition: all 300ms ease;
        cursor: pointer;
    }

    .Add-Remove.reserve-field:hover {
        background-color: var(--primary-600);
    }

    .Add-Remove.reserve-field:hover .add-routs {
        color: white;
    }

    .multiroute-fields {
        align-items: center;
    }

    .add-routs {
        width: 100% !important;
        font-size: 16px !important;
        font-weight: 500;
        transition: all 300ms ease;
    }

    .add-routs:hover {
        color: white;
    }

    .addroute-icon,
    .deleteRoom,
    .close-module-form {
        display: none;
    }

    .close-module-form {
        width: auto !important;
        height: auto !important;
        display: flex;
        align-items: center;
    }

    .close-module-form svg {
        margin-top: 0 !important;
        width: 48px !important;
        height: 48px !important;
    }

    .passenger-birthday-dropdown li {
        font-size: 12px;
    }

    .selectLocation {
        display: flex;
        align-items: center;
        width: 100% !important;
        padding: 4px 0;
    }

    .selectLocation .parent-item,
    .selectLocation .child-item {
        display: flex;
        align-items: center;
    }

    .createChildDropdown {
        float: unset !important;
    }

    .createChildDropdown .select-age {
        border: 1px solid var(--primary-400);
        border-radius: 8px;
        outline: none;
        height: 40px !important;
        float: unset !important;
    }

    .createChildDropdown label {
        float: unset !important;
    }

    .contentRoom {
        border-top: 1px solid var(--primary-100);
        padding-top: 8px;
    }

    .birthdate-day-value,
    .birthdate-month-value,
    .birthdate-year-value {
        border: 1px solid var(--primary-300) !important;
        border-radius: 8px;
        margin-top: 0.5rem;
        font-size: 12px;
    }

    .search-box-container .birthdate-dates div::after {
        top: 14px !important;
    }

    .createPassengerDropdown {
        margin-top: 0.5rem;
    }

    .traintype-items {
        width: fit-content !important;
        background-color: var(--primary-50);
        border-radius: 8px;
        padding: 8px;
        margin-bottom: 20px !important;
    }

    .traintype-items li {
        padding: 4px;
        border-radius: 8px;
        transition: all 300ms ease;
    }

    .traintype-items li:hover {
        background-color: var(--primary-600);
    }

    .traintype-items li:hover span {
        color: white !important;
    }

    #busSearch .reserve-field.departure-date,
    #busSearch .reserve-field.return-date {
        flex: 1;
    }

    .close-passenger-box {
        width: auto !important;
        height: auto !important;
    }

    .close-searchList {
        width: auto !important;
        height: auto !important;
    }

    .searchHistory-content {
        width: 100% !important;
        margin: 0 !important;
        padding: 1em !important;
    }

    .module-banner-background {
        width: 100% !important;
        padding: 7rem 1rem !important;
    }

    #search-box {
        padding: 10px !important;

        background-color: rgb(131 134 143 / 60%);
        width: 100%;
        height: auto;
        border-top: 1.5px solid white !important;
        border-bottom: 1.5px solid white !important;
        border-left: none !important;
        border-right: none !important;
        border-radius: 30px;
        min-height: unset !important;


    }

    .search-box-container.mobile-search-box .fixed-searchList {
        margin: 0 !important;
        z-index: 1000000 !important;
        border-radius: 0 !important;
    }

    .passengerbox.hidden-box {
        border-radius: 0 !important;
        margin: 0 !important;
        z-index: 1000000 !important;

    }

    .search-box-container.mobile-search-box .fixed-FlightClass,
    .search-box-container.mobile-search-box .fixed-traveltype,
    .search-box-container.mobile-search-box .fixed-flighttype,
    .search-box-container.mobile-search-box .fixed-Compartment,
    .search-box-container.mobile-search-box .fixed-Dropdownflighttype {
        height: 100% !important;
        z-index: 100000 !important;
        border-radius: 0 !important;
    }

    .close-searchList.bg-primary {
        background-color: var(--primary) !important;
    }

    .module-banner-background,
    .flight-banner-background {
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        background-image: url('../images/bg-searchBox.jpg');
    }

    .Compartment-text {
        font-size: 14px !important;
    }

    .passengers-field {
        display: flex;
    }

    .module-banner-background * {
        filter: none !important;
    }

    #search-box input::placeholder {
        color: #18181b !important;
    }

    #search-box #r-flighthotel,
    #search-box #r-insurance,
    #search-box #r-flight,
    #search-box #r-hotel,
    #search-box #r-tour,
    #search-box #r-train {
        padding: 0 !important;
        background-color: transparent !important;
        width: 100%;
        height: auto;
        border: none !important;
        border-radius: 0 !important;
        min-height: unset !important;
    }
}

.label-compartment {
    display: none !important;
}

.Compartment-field {
    display: flex !important;
    align-items: center;
}

.Compartment-text {
    height: 100%;
    display: flex;
    align-items: center;
}

.book-border.book-border-zinc-200 {
    border: 1px solid var(--zinc-200) !important;
}

.searchList ul {
    height: unset !important;
}

.add-routs {
    background-color: transparent !important;
}

.Add-Remove:hover .add-routs span {
    color: white !important;

}

.form-search input[type="text"],
.form-search select {
    width: 100%;
    padding: 6px 10px !important;
    border: 1px solid rgba(0, 0, 0, 0);
    text-align: unset !important;
    direction: rtl;
    color: #313131;
    font-size: 14px;
    height: unset !important;
    line-height: unset !important;
    border-radius: 10px;
}

.search-box-container .add-routs.deactive-addmc:hover {
    background-color: transparent !important;
}

.Add-Remove:hover add-routs.deactive-addmc {
    background-color: transparent !important;
}

.label-flighttype-cip,
.label-traveltype {
    display: none !important;
}

.traveltype-text,
.flighttype-text {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    font-size: 14px !important;
}

#search-box {
    direction: rtl !important;
}