html[lang="ar"],
html[lang="ar"] body {
    direction: rtl;
    text-align: start;
}

    html[lang="ar"] section#app-result-navbar .search-data-wrapper .search-data > div::after {
        bottom: 15px;
    }
    html[lang="ar"] hotel-details .overview-content b:before {
        right: 5px;
        left:auto;
    }
    html[lang="ar"] .flightcard-sub-header.multi {
        padding: 8px 20px;
        background: linear-gradient(270deg, #dcefff 0%, rgba(220, 239, 255, 0) 70%);
    }
    html[lang="ar"] .guestroom .cust-type,
    html[lang="ar"] .guestroom .cust-age {
        text-align: right;
    }

    html[lang="ar"] hotel-result .hotel-footer-section {
        padding-right: 25px;
    }

    html[lang="ar"] .welcome-text {
        right: calc(50% + 350px);
        left: auto;
        top: 62%
    }

    html[lang="ar"] .side-bar .srp-filters #search-filter input[type=submit] {
        left: 0;
        right: auto;
        border-radius: 4px 0px 0px 4px;
        padding: 23px 21px;
    }

    html[lang="ar"] .flight-style .lp-FromToIcon {
        left: -22px;
        right: auto;
    }

    html[lang="ar"] .ui-datepicker .ui-datepicker-next {
        left: 2px;
        right: auto;
    }

    html[lang="ar"] .ui-datepicker .ui-datepicker-prev {
        right: 2px;
        left: auto;
    }

    html[lang="ar"] .ui-datepicker.ui-datepicker-multi-2 .ui-datepicker-group-first {
        border-left: 1px dashed #a0a0a0;
        padding-left: 20px;
        border-right: none;
        padding-right: 0;
    }
    html[lang="ar"] table.dataTable thead .sorting,
    html[lang="ar"] table.dataTable thead .sorting_asc {
        background-position: left center;
    }
    html[lang="ar"] .ui-datepicker.ui-datepicker-multi-2 .ui-datepicker-group-last {
        padding-right: 5px;
        padding-left: 0;
        border-right: 1px dashed #a0a0a0;
        border-left: none;
    }

    html[lang="ar"] .left-sidebar-col.drawer-mode.open {
        right: 0 !important;
        left: auto !important;
    }

    html[lang="ar"] app-quotation .textfield-outlined-first-name > input {
        border-radius: 4px 0px 0px 4px;
    }

    html[lang="ar"] .side-bar {
        border-left: 1px solid #e3e3e3;
        border-right: 0px;
    }

    html[lang="ar"] .right-sidebar-col.drawer-mode.open {
        right: auto !important;
        left: 0 !important;
    }

    html[lang="ar"] app-quotation .textfield-outlined select, app-quotation .textfield-outlined-first-name select {
        border-radius: 0px 4px 4px 0px;
        padding: 3px 12px 4px 0px;
    }

    html[lang="ar"] hotel-thankyou .hotel-details-header {
        padding: 3px 3px 3px 3px;
    }

    html[lang="ar"] .flight-style .srp-cards-list .srp-flight-tabs-wrapper .next-flight-icon {
        right: 24%;
    }

    html[lang="ar"] .flight-style .srp-cards-list .srp-flight-tabs-wrapper .previous-flight-icon {
        left: 9%;
    }

    html[lang="ar"] .flight-style .lp-details-component-items-to {
        padding: 15px 32px 16px 16px;
    }

    html[lang="ar"] .flight-more-choice {
        left: 138px;
        right: auto;
    }

    html[lang="ar"] section#app-result-navbar .search-data-wrapper .search-data > div::after {
        left: 0;
        right: auto;
    }

    html[lang="ar"] .flight-style .srp-cards-list {
        padding-inline: 10px 30px;
    }

    html[lang="ar"] hotel-thankyou .inner_info_div {
        justify-content: right;
    }

    html[lang="ar"] .dash-toggle-btn {
        left: 0;
        right: auto;
        border-radius: 0px 8px 8px 0px;
    }

    html[lang="ar"] checkout .offer-code-item {
        border-right: 1px solid #bcbcbc;
        border-radius: 0px;
    }

    html[lang="ar"] checkout .special-requests-msg {
        text-align: right;
    }

    html[lang="ar"] .br-table-head-items {
        padding: 8px 30px 8px 0px;
    }

    html[lang="ar"] .br-table-items {
        padding: 8px 30px 8px 0px;
    }

    html[lang="ar"] .flight-style .flight-multi-component .multi-add-remove {
        left: -226px;
        right: auto;
    }

    html[lang="ar"] .flight-style .flight-multi-component .lpmcw-CrossSymbol {
        right: auto;
        left: -250px;
    }

    html[lang="ar"] section#app-result-navbar .search-data-wrapper .search-data > div {
        padding: 0 23px;
    }

    html[lang="ar"] section#app-result-navbar .search-data-wrapper .search-button {
        text-align: left;
    }

    html[lang="ar"] hotel-details .showall-button {
        left: 27px;
        bottom: 23px;
        right: auto;
    }

    html[lang="ar"] .swap {
        right: 88px;
    }

    html[lang="ar"] table#chkBxlistRight input {
        margin: 0 0px 0 8px;
    }

    html[lang="ar"] .guestroom button {
        left: 10px;
        right: auto !important;
    }

    html[lang="ar"] .profile-icon {
        margin-left: 5px;
    }

    html[lang="ar"] checkout .offer-code-btn-text {
        border-radius: 0px;
    }

    html[lang="ar"] .sticky-done button {
        left: 0;
        right: 0;
    }

    html[lang="ar"] #flight-thankyou .fc-fare-details-header {
        padding: 8px 18px 8px 0px;
    }

    html[lang="ar"] #flight-thankyou .fc-left_side_wrapper {
        margin-left: 20px;
        margin-right: 0px;
    }

    html[lang="ar"] #flight-thankyou .fc-inner_info_div {
        justify-content: right;
    }

    html[lang="ar"] .pagination li.page-item:first-child a:before {
        transform: rotate(222deg);
    }

    html[lang="ar"] .pagination li.page-item:last-child a:after {
        transform: rotate(47deg);
    }

    html[lang="ar"] hotel-result .hotel-srp-card-box::after {
        left: -14px;
        right: auto !important;
        border-radius: 10px 0px 0px 10px;
    }

    html[lang="ar"] checkout .inner_info_div {
        justify-content: right;
    }

    html[lang="ar"] .ui-autocomplete-loading {
        background-position: 0% center !important;
    }

    html[lang="ar"] checkout .textfield-outlined select, checkout .textfield-outlined-first-name select {
        padding: 6px 7px 9px 28px;
    }

    html[lang="ar"] checkout .navbar-btn-outer .navbar-btn {
        float: left;
    }

    html[lang="ar"] checkout .fare-details-header {
        padding: 8px 18px 8px 0px;
    }

    html[lang="ar"] .flight-style .hotel-badge {
        right: 70px;
        left: auto;
    }

    html[lang="ar"] checkout .personal-info-header-index {
        float: right;
    }

    html[lang="ar"] checkout .personal-info-header-text {
        background: linear-gradient(270deg, color-mix(in srgb, var(--color) 25%, white) 0%, rgba(255, 255, 255, 0) 67.47%);
        padding: 4px 4px 4px 400px;
    }

    html[lang="ar"] .traveller-header {
        display: flex;
    }

    html[lang="ar"] checkout .hotel-details-header svg {
        margin-inline-start: 7px;
    }

    html[lang="ar"] checkout .textfield-outlined-outer .textfield-outlined select {
        border-right: 1px solid #bcbcbc;
        border-left: 0px;
        border-radius: 0px 4px 4px 0px;
    }

    html[lang="ar"] checkout .textfield-outlined-first-name > input {
        border-radius: 4px 0px 0px 4px;
    }

    html[lang="ar"] header .navbar-item.dropdown {
        padding-right: 0px;
    }

    html[lang="ar"] .baggage-icon-wrapper {
        margin-inline-end: 8px;
        margin-right: 0px;
    }

    html[lang="ar"] .menu-toggle-btn {
        right: 0;
        left: auto;
        border-radius: 8px 0px 0px 8px;
    }

    html[lang="ar"] .fld .big, html[lang="ar"] .fld input.big {
        font-size: 10px !important;
    }

    html[lang="ar"] .fld .sub {
        font-size: 9.5px !important;
    }

    html[lang="ar"] .guestroom {
        left: 0;
        right: auto;
    }

    html[lang="ar"] .subagentbtn {
        text-align: left;
    }

    html[lang="ar"] .change-password-container .input-group-text {
        left: 21px;
        right: auto;
        top: 16px;
    }

    html[lang="ar"] .form-wrapper {
        gap: 15px;
    }

    html[lang="ar"] .password {
        margin-right: 0px;
    }

    html[lang="ar"] .search-wrapper {
        text-align: left;
    }

    html[lang="ar"] select {
        background-position-x: 10px !important;
    }

    html[lang="ar"] #tblFlightDetails select {
        background-position-x: 30px !important;
    }

    html[lang="ar"] .login-form-links input[type="checkbox"] {
        accent-color: var(--color1);
        margin: 0 0px 0 8px !important;
    }

    html[lang="ar"] .loader,
    html[lang="ar"] .ui-autocomplete-loading {
        position: relative;
        right: auto !important;
        left: 10px !important;
    }

    html[lang="ar"] a#tblBooking_previous::after {
        right: -11px;
        left: auto;
        transform: rotate(-45deg) !important;
    }

html[lang=ar] .view-ledger-page .table-body-wrapper .dt-buttons {
    float: right;
}

html[lang=ar] div#crreporttbl_filter {
    float: left;
    text-align: left;
}

html[lang=ar] .dataTables_wrapper .dataTables_paginate {
    float: left !important;
    text-align: left;
}

html[lang=ar] .dataTables_wrapper .dataTables_info {
    float: right !important;
}

html[lang=ar] .ui-datepicker .ui-datepicker-next {
    left: 2px !important;
    right: auto !important;
}

html[lang=ar] .ui-datepicker .ui-datepicker-prev {
    right: 2px !important;
    left: auto !important;
}
html[lang=ar] a#bookTimeLimit_previous:after {
    right: -11px;
    left: auto;
    transform: rotate(-45deg) !important;
}
html[lang=ar] hotel-details .amenities-content li::before {
    right: 0;
    left:auto;
}
html[lang=ar] .contact-info p.contact-title a {
    border-left: 1px solid #fff;
    border-right:0px;
}
html[lang=ar] a#bookTimeLimit_next::after {
    left: 0;
    right: auto;
    transform: rotate(135deg) !important;
}
html[lang=ar] .markup-reset-btn {
    border-radius: 6px 0px 0px 6px;
}
html[lang=ar] .hotel-dtls-section {
    border-left: 1px dashed #bcbcbc;
    border-right: none !important;
}
html[lang=ar] .previous::after {
    right: -11px;
    left: auto;
    transform: rotate(-45deg) !important;
}
html[lang=ar] .next::after {
    left: 0;
    right: auto;
    transform: rotate(135deg) !important;
}
html[lang="ar"] a#tblBooking_next::after {
    left: 0;
    right: auto;
    transform: rotate(135deg) !important;
}

.ui-datepicker .ui-datepicker-calendar tr {
    justify-content: center;
}

html[lang="ar"] .side-bar .quotation-box .close {
    position: absolute;
    left: 0;
    right: auto;
}

html[lang="ar"] .language-switcher {
    left: 20px;
    right: auto;
}
    /* html[lang="ar"] .ui-datepicker .ui-datepicker-prev, html[lang="ar"] .ui-datepicker .ui-datepicker-next{
       transform: rotate(180deg);
    } */
    html[lang="ar"] .language-switcher .dropdown-menu {
        left: 0;
        right: auto;
    }


html[lang="ar"] .fields-mc,
body.ar .fields-mc {
    grid-template-columns: 1.3fr auto 1.3fr 1.3fr auto !important;
}

html[lang="ar"] .mc-action-fld,
body.ar .mc-action-fld {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: 84px;
    min-width: 84px;
    height: 58px;
    flex-shrink: 0;
}

html[lang="ar"] .traveler-multiselect-container .guestroom,
body.ar .traveler-multiselect-container .guestroom,
html[lang="ar"] .airline-multiselect-container .airline-w,
body.ar .airline-multiselect-container .airline-w {
    right: auto !important;
    left: 0 !important;
}

    html[lang="ar"] .traveler-multiselect-container .guestroom button[title="Close"],
    body.ar .traveler-multiselect-container .guestroom button[title="Close"] {
        right: auto !important;
        left: 14px !important;
    }

html[lang="ar"] .mc-search-btn-container,
body.ar .mc-search-btn-container {
    display: flex;
    justify-content: flex-end;
}

@media(max-width:992px) {
    html[lang="ar"] #menu-toggle-trigger {
        border-radius: 12px 0px 0px 12px;
    }

        html[lang="ar"] #menu-toggle-trigger svg {
            transform: rotate(180deg);
        }

    html[lang="ar"] .flight-style .srp-cards-list .srp-flight-tabs-wrapper .next-flight-icon {
        right: 0%;
    }

    html[lang="ar"] .flight-style .srp-cards-list .srp-flight-tabs-wrapper .previous-flight-icon {
        left: 0%;
    }

    html[lang="ar"] checkout .personal-info-header-text {
        padding-left: 10px;
        color: #fff;
        background: var(--color);
    }

    html[lang="ar"] checkout .form-field {
        margin-right: 0px;
    }

    html[lang="ar"] .flight-style .lp-FromToIcon {
        left: 45% !Important;
    }

    html[lang="ar"] .flight-style .lp-details-component-items-class {
        padding: 15px 15px 15px 0px;
    }

    html[lang="ar"] .flight-style .lp-details-component-items-to {
        padding: 15px 13px 16px 16px;
    }

    html[lang="ar"] .flight-style .flight-multi-component .multi-add-remove {
        left: 0px;
    }
}

@media (min-width: 768px) {
    html[lang="ar"] .flight-style flight-modify .flight-multi-component .mc-action-fld,
    body.ar .flight-style flight-modify .flight-multi-component .mc-action-fld {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        left: auto;
        right: auto;
    }
}

@media (max-width: 767px) {

    html[lang="ar"] #flight-thankyou .fc-Congratulations-wrapper svg {
        margin: 5px 0px 0 10px;
    }
    html[lang="ar"] .baggage-detail-label {
        text-align: start;
    }
    html[lang="ar"] .baggage-hover-tooltip {
        left: 0px;
        right: auto;
    }
    html[lang="ar"] .responsive-sort-filter ul li .check {
        left: 0px;
        right: auto;
    }
    html[lang="ar"] table#bookTimeLimit .bt-table-head-items {
        padding: 7px 10px 7px 10px;
    }
    html[lang="ar"] hotel-thankyou .congratulation svg {
        margin: 4px 0px 0 10px;
    }
    html[lang="ar"] hotel-details .amenities-content li::before {
        left: auto;
        right: 0px;
    }
    html[lang="ar"] hotel-thankyou .imp-info-text {
        padding: 11px 28px 11px 12px;
    }
    html[lang="ar"] .flight-style flight-modify .flight-multi-component .lp-details-component,
    body.ar .flight-style flight-modify .flight-multi-component .lp-details-component {
        display: block !important;
        width: 100% !important;
        margin-bottom: 15px !important;
        border-bottom: 1px dashed var(--line, #cbd5e1) !important;
        padding-bottom: 15px !important;
        position: relative !important;
    }

        html[lang="ar"] .flight-style flight-modify .flight-multi-component .lp-details-component:last-child,
        body.ar .flight-style flight-modify .flight-multi-component .lp-details-component:last-child {
            border-bottom: none !important;
            padding-bottom: 0 !important;
            margin-bottom: 0 !important;
        }

    html[lang="ar"] .flight-style flight-modify .flight-multi-component .lp-details-component-items-from,
    html[lang="ar"] .flight-style flight-modify .flight-multi-component .lp-details-component-items-to,
    html[lang="ar"] .flight-style flight-modify .flight-multi-component .lp-details-component-items-depart,
    body.ar .flight-style flight-modify .flight-multi-component .lp-details-component-items-from,
    body.ar .flight-style flight-modify .flight-multi-component .lp-details-component-items-to,
    body.ar .flight-style flight-modify .flight-multi-component .lp-details-component-items-depart {
        width: 100% !important;
        min-width: 100% !important;
        flex: none !important;
        display: block !important;
        margin-bottom: 8px !important;
        box-sizing: border-box !important;
    }

    html[lang="ar"] .flight-style flight-modify .flight-multi-component .mc-action-fld,
    body.ar .flight-style flight-modify .flight-multi-component .mc-action-fld {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 10px !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 44px !important;
        height: auto !important;
        margin-top: 8px !important;
        padding: 0 !important;
        position: static !important;
        box-shadow: none !important;
    }
    html[lang="ar"] .flight-style .lp-direct-flight input[type=checkbox] {
        margin: 0 0px 0 10px;
    }

    html[lang="ar"] .flight-more-choice {
        right: 20px !important;
        left: auto;
    }

    html[lang="ar"] .flight-style .lp-FromToIcon {
        left: 35% !Important;
    }
}