
:root {
    --border-color-rgb: rgba(0, 0, 0, 0.08);
    --box-shadow: #e8ebeb;
    --icons-color: #abadad;
    --text-color: #2e3333;
    --main-color: #94e6ff;
    --main-color-hover: #c0effd;
    --second-main-color: #7ee1ff;
    --third-main-color: #72deff;
    --button-color: #f47b56;
    --button-color-hover: #fda58a;
    --background-color: #f5f5f4;
    --background-opacity-color: #0000000a;
    --general-background-color: #fff;
    --second-background-color: #f9fafa;
    --border-color: #e8ebeb;
    --third-background-color: #e7f3f6;
    --img-background-color: #dbd3d3;
    --warning-color: #e70000;
    --accept-color: #00890b;
    --rate-color: #e1ae01;
    --webkit-slider: #82e0fc;
    --webkit-slider-thumb: #05c2fa;
    --note-background: #0000003b;
    --dark-border-color: #000;
    --cartProcessing: #00000026;
    --pac-input: #4d90fe;
    --bac-card: rgba(0, 0, 0, 0.8);
    --dark-background: #000000b5;
    --border: 1.8px solid #7ee1ff;
    --svg-size: 16px;
    --svg-color: var(--button-color);
    --seleted-color: #94e6ff73;
    --general-border-radius: 8px;
    --button-border-style: 1.8px solid var(--main-color);
    --button-border-hover-style: 1.8px solid var(--button-color);
    --button-background-color: #fff;
    --button-width: 142px;
    --small-button-width: 60px;
    --hover-color: #94e6ff7a;
    --background: #f6f9fc;
    --hala-color: #00c3ff;
}
input[type="checkbox"]:checked::before,
input[type="radio"]:checked::before {
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 50%;
}
.VendorMenuItemsSection,
html {
    scroll-behavior: smooth;
}
.main,
.pages {
    min-height: 100vh;
}
#description,
.pac-controls label {
    font-family: Roboto;
    font-weight: 300;
}
html {
    scroll-padding-top: 30vh;
}
* {
    font-family: Roboto !important;
}
.accountButtonMenu,
.inactive,
.joinchat {
    display: none !important;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
    color: var(--text-color);
}
.oldOrderHeadServiceName h5,
.profileForm .PODDiv .hand_status,
.singleVendorMeal .dayMeals .dayPlans .dayPlanType h5,
a {
    color: var(--button-color);
}
.ecommerceSectionTitle .viewAll:focus,
.ecommerceSectionTitle .viewAll:hover,
.showMenu:focus,
.showMenu:hover,
a:focus,
a:hover {
    color: var(--button-color-hover);
}
a:focus {
    outline: 0;
}
img.emoji,
img.wp-smiley {
    display: inline !important;
    border: none !important;
    box-shadow: none !important;
    height: 1em !important;
    width: 1em !important;
    margin: 0 0.07em !important;
    vertical-align: -0.1em !important;
    background: 0 0 !important;
    padding: 0 !important;
}
button {
    text-transform: capitalize;
    font-size: 15px;
}
.ast-button:hover,
.ast-custom-button:hover,
.ast-custom-button:hover .button:hover,
.menu-toggle:hover,
button:focus,
button:hover,
input#submit:focus,
input#submit:hover,
input[type="button"]:focus,
input[type="button"]:hover,
input[type="reset"]:focus,
input[type="reset"]:hover,
input[type="submit"]:focus,
input[type="submit"]:hover {
    background-color: var(--main-color);
    border-color: var(--main-color);
}
input[type="checkbox"],
input[type="radio"] {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid var(--button-color);
    position: relative;
    cursor: pointer;
    outline: 0;
}
input[type="radio"]:checked {
    border-color: var(--button-color);
    background-color: var(--button-color);
}
input[type="radio"] {
    -moz-appearance: none;
    appearance: none;
    border-radius: 50%;
}
input[type="radio"]:checked::before {
    width: 12px;
    height: 12px;
    background-color: var(--button-color);
    border-radius: 50%;
}
input[type="checkbox"] {
    -moz-appearance: none;
    appearance: none;
    border-radius: 4px;
}
input[type="checkbox"]:checked::before {
    width: 14px;
    height: 14px;
    outline: 0;
    border: 2px solid var(--button-color);
    background-color: var(--button-color);
    border-radius: 2px;
}
input[type="checkbox"]:checked,
input[type="checkbox"]:focus:checked,
input[type="checkbox"]:hover:checked,
input[type="radio"]:checked,
input[type="range"]::-webkit-slider-thumb {
    border-color: var(--button-color);
    background-color: var(--button-color);
}
.active {
    display: block !important;
}
.activeFlex {
    display: flex !important;
}
.warning {
    border-color: var(--warning-color) !important;
}
.accept {
    border-color: var(--accept-color) !important;
}
.Cancelled,
.warning-text {
    color: var(--warning-color) !important;
}
.Delivered,
.accept-text {
    color: var(--accept-color) !important;
}
.Preparing,
.Requested {
    color: var(--button-color) !important;
}
.disableChange {
    fill: var(--icons-color) !important;
    border-color: var(--icons-color) !important;
    pointer-events: none;
}
.disableChangeLabel {
    pointer-events: none !important;
    box-shadow: 0 0 0 !important;
}
.toast-container {
    position: fixed;
    top: 13vh;
    right: 20px;
    z-index: -1;
    display: flex;
    align-items: center;
    justify-content: start;
    height: 8vh;
    opacity: 1;
    border-radius: var(--general-border-radius);
    background: #f8f4f4;
    min-width: 300px;
    opacity: 0;
}
.Processing,
.ToastSVG {
    height: 100%;
    display: flex;
}
.ToastSVG {
    align-items: center;
    justify-content: center;
    padding: 20px;
    border-radius: 8px 0 0 8px;
}
.warningToast {
    background: var(--warning-color);
}
.successToast {
    background: #08d518;
}
.ToastSVG svg,
.profileHeaderButtons .profileHeaderButtonsMenu svg {
    width: var(--svg-size);
    fill: var(--general-background-color);
}
.toastInfo {
    padding: 0 20px;
    line-height: 23px;
}
.bannersHeadersBodyRight button a,
.downloadAppStore a,
.loginRequiredLogin a,
.singleVendorMeal .dayMeals h4,
.singleVendorMeal .singleVendorMealBody h5,
.toastInfo p {
    color: var(--general-background-color);
}
.toast-title {
    margin: 0;
    font-weight: 800;
}
.EditProfilePictureFooter .EditProfilePictureFooterDelete p,
.EditProfilePictureFooter .EditProfilePictureFooterEdit p,
.EditProfilePictureHeader p,
.MenuHeaderUl .MenuHeaderLi p,
.accountButtonSidebar .SidebarHeaderLogo .customerInformation p,
.addAddressBody .addAddressBodyInfo p,
.bannersUlOne .insideLI,
.cartTips .cartTipsHeader .yourRide,
.changeSingleVendorDeliveryAddressBody .SingleVendorDeliveryAddressDiv p,
.deliveryService .deliveryServiceVehicles label p,
.demandService .demandServiceVehicles label p,
.driverService .driverServiceTypes label p,
.itemBasicInfo p,
.oldOrderBodyInfo p,
.oldOrderBodyInfoDate p,
.oldOrderBodyInfoID p,
.oldOrderHeadServiceStatus p,
.oldOrdersDetailsHeadInfo p,
.profileBodyAddress .profileBodyAddressDetails p,
.profileBodyCarInfo p,
.profileBodyCardInfo p,
.profileBodyPro p,
.profileHeader .profileInfo p,
.reservationBody .guestsCount p,
.singleVendor .editAddressBody .editAddressBodyInfo p,
.singleVendorMeal .plans label p,
.toast-message,
.walletDetailLeft p {
    margin: 0;
}
.pages {
    width: 100%;
    background-color: var(--general-background-color);
    color: var(--text-color);
}
.Processing {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: var(--dark-background);
    align-items: center;
    justify-content: center;
    z-index: 25;
}
.ResultsBodyResults,
.ecommerceSection,
.insideVendorAdvButtonLi,
.orderProcessing .orderProcessingOutside,
.popularRestaurantImage,
.profile .profileHeader .profileImage,
.servicesBarContainer {
    position: relative;
}
.orderProcessing .orderProcessingInside::after,
.orderProcessing .orderProcessingInside::before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-left: 70px solid var(--button-color);
    border-right: 70px solid var(--button-color);
    border-top: 70px solid var(--button-color);
    border-bottom: 70px solid var(--button-color);
    z-index: -1;
}
.downloadApp,
.loginRequired,
.serviceDetailsDiv,
.walletOrderDetails {
    position: fixed;
    left: 0;
    height: 100%;
    top: 0;
}
.orderProcessing .orderProcessingInside::before {
    top: -5px;
    left: -5px;
    border-radius: var(--general-border-radius) 0 0 0;
}
.orderProcessing .orderProcessingInside::after {
    bottom: -5px;
    right: -5px;
    border-radius: 0 0 var(--general-border-radius) 0;
}
.orderProcessing .orderProcessingInside {
    background: var(--general-background-color);
    padding: 10px;
    border: 1.8px solid var(--button-color);
    border-radius: var(--general-border-radius);
    text-align: center;
    min-height: 230px;
    min-width: 400px;
    display: grid;
    align-items: center;
    justify-content: center;
}
.loginRequired,
.loginRequiredButtons {
    align-items: center;
    width: 100%;
    display: flex;
}
.orderProcessing .orderProcessingInside .loadingSpan {
    font-weight: 900;
    font-size: 50px;
    color: var(--button-color);
    display: inline;
    vertical-align: baseline;
    line-height: 1px;
}
.loginRequired {
    background-color: var(--bac-card);
    justify-content: center;
    z-index: 10;
}
.loginRequiredMain {
    background: var(--general-background-color);
    padding: 25px;
    border-radius: var(--general-border-radius);
}
.downloadAppMain h3,
.loginRequiredMain h3 {
    color: var(--button-color);
    font-size: x-large;
    font-weight: 700;
    border-bottom: 1.8px solid var(--button-color);
    width: fit-content;
    margin-bottom: 15px;
}
.loginRequiredButtons {
    justify-content: space-around;
}
.downloadAppButtons button,
.loginRequiredButtons button {
    border: 1.8px solid var(--general-background-color);
    border-radius: var(--general-border-radius);
    text-transform: capitalize;
    background: var(--button-color);
    width: var(--button-width);
    letter-spacing: normal;
}
.downloadAppButtons .downloadAppBack,
.loginRequiredButtons .loginRequiredBack {
    background-color: var(--general-background-color);
    color: var(--button-color);
    border: 1.8px solid var(--button-color);
    border-radius: var(--general-border-radius);
}
.downloadAppStore,
.loginRequiredLogin {
    background-color: var(--main-color);
    color: var(--general-background-color);
}
.downloadApp {
    width: 100%;
    background-color: var(--bac-card);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 11;
}
.addCarMain,
.downloadAppMain {
    background: var(--general-background-color);
    padding: 25px;
    border-radius: var(--general-border-radius);
    width: 510px;
}
.downloadAppButtons {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 5%;
}
.downloadAppButtons button:focus,
.downloadAppButtons button:hover {
    border: 1.8px solid var(--general-background-color);
    background: var(--button-color);
}
.downloadAppButtons .downloadAppBack:focus,
.downloadAppButtons .downloadAppBack:hover {
    background-color: var(--general-background-color);
    color: var(--button-color);
    border: 1.8px solid var(--button-color);
}
.openserviceDetailsDivDiv {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0;
}
.EditProfilePicture svg,
.addAddress .addAddressMain .addAddressHeader svg,
.addWalletCloseIconDiv svg,
.cartPayment .cartPaymentMain .cartPaymentHeader svg,
.changeSingleVendorDeliveryAddress .changeSingleVendorDeliveryAddressMain .changeSingleVendorDeliveryAddressHeader svg,
.deliveryPayment .deliveryPaymentMain .deliveryPaymentHeader svg,
.demandPayment .demandPaymentMain .demandPaymentHeader svg,
.driverPayment .driverPaymentMain .driverPaymentHeader svg,
.editAddress .editAddressMain .editAddressHeader svg,
.mealPayment .mealPaymentMain .mealPaymentHeader svg,
.openserviceDetailsDiv,
.popupTitleleftIcon .popupcCloseIcon,
.proPaymentHeader svg,
.scheduleBooking .scheduleBookingMain .scheduleBookingHeader svg,
.serviceRateDetailsDivHeader svg,
.valetPayment .valetPaymentMain .valetPaymentHeader svg {
    width: var(--svg-size);
    fill: var(--svg-color);
    cursor: pointer;
}
.serviceDetailsDiv,
.walletOrderDetails {
    z-index: 4;
    background-color: var(--bac-card);
    -ms-overflow-style: none;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.serviceDetailsDivInside {
    background-color: var(--general-background-color);
    border-radius: var(--general-border-radius);
    overflow-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    max-width: 600px;
    max-height: 90vh;
    min-width: 500px;
}
.serviceDetailsDivHeader,
.walletOrderDetailsHeader {
    position: sticky;
    padding: 10px 20px;
    background-color: var(--general-background-color);
    top: 0;
}
.serviceDetailsDivHeader h3,
.vendorMenuHeader h3,
.walletOrderDetailsHeader h3 {
    color: var(--button-color);
    font-size: x-large;
    font-weight: 700;
    border-bottom: 1.8px solid var(--button-color);
    width: fit-content;
}
.serviceDetailsDivBody,
.valet .valetBody .valetForm {
    padding: 20px;
}
.popularRestaurantName p,
.serviceDetailsDivBody p,
.walletOrderDetailsBody p {
    margin-bottom: 0;
}
.serviceDetailsP {
    margin-left: 35px;
}
.serviceDetailsDivBody .rateBasicInfo {
    display: flex;
    align-items: center;
    justify-content: start;
    flex-wrap: wrap;
    gap: 7px;
}
.serviceDetailsDivBody .rateBasicInfo p {
    color: #aba6a6;
    font-size: small;
}
.addAddressBodyInfoAddress .addAddressBodyInfoAddressSVG svg,
.menuButtonSidebarBody .accountButton svg,
.oldOrderItemHead svg,
.profileBodySectionTitle .addNewCarButton svg,
.profileBodySectionTitle .addNewCardButton svg,
.profileBodySectionTitle .addNewWalletButton a svg,
.restaurantRate svg,
.serviceDetailsDivBody .rateBasicInfo svg,
.walletOrderDetailsCloseIconDiv svg {
    width: var(--svg-size);
    fill: var(--svg-color);
}
.serviceDetailsDivBody .rateP {
    color: var(--svg-color) !important;
    font-size: medium !important;
}
.serviceDetailsDivBody hr {
    margin: 1em 0;
    height: 0.5px;
    background-color: #aba6a6;
}
.serviceDetailsDivFooter,
.walletOrderDetailsFooter {
    position: sticky;
    padding: 10px 20px;
    background-color: var(--general-background-color);
    border-top: 1.8px solid var(--button-color);
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.addCard,
.addNewCar,
.authentication,
.paymentChallangeDiv {
    position: fixed;
    height: 100%;
    top: 0;
    left: 0;
}
.CalcMeals .CalcMealsButton,
.addAddressBodyInfo .addAddressButton button,
.continueMeals .seecontinueMeals,
.deliveryService .deliveryInfo .deliveryServiceSubmit button,
.demandService .demandInfo .demandServiceSubmit button,
.driverService .driverInfo .driverServiceSubmit button,
.editAddressBodyInfo .editAddressButton button,
.filterMeals .seeFilteredMeal,
.profileBodyCPSection .CPForm .ChangePasswordUpdateSubmit button,
.profileBodyInfSection .profileForm .profileInfoUpdateSubmit button,
.reservationBody .reservationSubmit button,
.serviceDetailsDiv button,
.vendorMenu button,
.walletOrderDetailsFooter button {
    border-radius: var(--general-border-radius);
    color: var(--general-background-color);
    width: var(--button-width);
    height: 6vh;
    letter-spacing: normal;
}
.CalcMeals .CalcMealsButton:focus,
.CalcMeals .CalcMealsButton:hover,
.addAddressBodyInfo .addAddressButton button:focus,
.addAddressBodyInfo .addAddressButton button:hover,
.changeAddressControl .changeAddressUpdate button:focus,
.changeAddressControl .changeAddressUpdate button:hover,
.continueMeals .seecontinueMeals:focus,
.continueMeals .seecontinueMeals:hover,
.deliveryService .deliveryInfo .deliveryServiceSubmit button:focus,
.deliveryService .deliveryInfo .deliveryServiceSubmit button:hover,
.demandService .demandInfo .demandServiceSubmit button:focus,
.demandService .demandInfo .demandServiceSubmit button:hover,
.driverService .driverInfo .driverServiceSubmit button:focus,
.driverService .driverInfo .driverServiceSubmit button:hover,
.filterMeals .seeFilteredMeal:focus,
.filterMeals .seeFilteredMeal:hover,
.profileBodyCPSection .CPForm .ChangePasswordUpdateSubmit button:focus,
.profileBodyCPSection .CPForm .ChangePasswordUpdateSubmit button:hover,
.profileBodyInfSection .profileForm .profileInfoUpdateSubmit button:focus,
.profileBodyInfSection .profileForm .profileInfoUpdateSubmit button:hover,
.reservationBody .reservationSubmit button:focus,
.reservationBody .reservationSubmit button:hover,
.serviceDetailsDiv button:focus,
.serviceDetailsDiv button:hover,
.vendorMenu button:focus,
.vendorMenu button:hover,
.walletOrderDetailsFooter button:focus,
.walletOrderDetailsFooter button:hover {
    background-color: var(--button-color);
}
.demandPaymentBody .demandDistance,
.itemAllInfoChooseBody,
.profileBodyCardHeader,
.profileBodyProBodySub,
.profileBodyProHeader,
.serviceRateDetailsDivHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.serviceRateDivBody {
    text-align: center;
    padding: 10px 20px;
}
.serviceRateDetailsDiv ul {
    display: flex;
    margin: 0;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}
.serviceRateDetailsDiv ul li {
    list-style-type: none;
    cursor: pointer;
}
.filterPupupButton,
.seachIconeSmall,
.serviceRateDetailsDiv input[type="checkbox"] {
    display: none;
}
.labelFilter:has(input[type="checkbox"]:checked) {
    border-color: var(--button-color);
}
.serviceRateDetailsDiv label {
    background-color: var(--general-background-color);
    border: 1.8px solid var(--main-color);
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
    cursor: pointer;
    height: 6vh;
    padding: 5px;
    font-size: 11px;
    min-width: 130px;
}
.ResultsBodyResultsItems .MenuSectionContentItem:focus,
.ResultsBodyResultsItems .MenuSectionContentItem:hover,
.addToWalletCards input[type="radio"]:checked + .radio-label,
.addToWalletCards label:hover,
.menuButtonSidebarBody .accountButton:focus,
.menuButtonSidebarBody .accountButton:hover,
.oldOrders .oldOrder.active,
.oldOrders .oldOrder:hover,
.oldOrdersBody .pendingOrderSideBar .pendingOrderSideBarInside button.active,
.oldOrdersBody .pendingOrderSideBar .pendingOrderSideBarInside button:hover,
.profileBodyInfSection .profileForm .genderInput .gender_radio:checked,
.profileBodyInfSection .profileForm .genderInput .gender_radio:hover,
.serviceRateDetailsDiv label:hover {
    border-color: var(--button-color);
}
.serviceRateDetailsDiv input[type="text"] {
    border-radius: var(--general-border-radius);
    background: var(--general-background-color);
    padding: 0.75rem;
    outline: 0;
    border: var(--border);
    margin-top: 10px;
    width: 100%;
    height: 10vh;
}
.profileHeader .profileInfo .updateimage:focus,
.profileHeader .profileInfo .updateimage:hover,
.searchResult .searchFilters p {
    background: var(--second-main-color);
}
.vendro_rate {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-bottom: 10px;
}
.vendro_rate_header {
    margin-top: 12px;
}
.oldOrderItemBody table,
.oldOrderItemBody table tr td,
.serviceRateDetailsDiv .serviceDetailsDivFooter {
    border: none;
}
.addCard,
.addNewCar {
    width: 100%;
    background-color: var(--bac-card);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 12;
}
.addCardMain,
.addCardMain .form_input {
    background: var(--general-background-color);
}
.addCardMain {
    padding: 25px;
    border-radius: var(--general-border-radius);
    width: 510px;
    border: var(--border);
}
.addCarMain .addCarTitle,
.addCardMain .addCardTitle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.addCarMain .addCarCloseIconDiv,
.addCardMain .addCardCloseIconDiv {
    width: 3%;
}
.addCarMain .addCarCloseIconDiv .addCarCloseIcon,
.addCardMain .addCardCloseIconDiv .addCardCloseIcon {
    fill: var(--button-color);
    cursor: pointer;
    width: var(--svg-size);
}
.addCarMain label,
.addCardMain label,
.cartAddress .cartAddressHeader,
.ecommerceBody.withoutFilter,
.favouriteButton .liButton,
.favouriteButton .liImage,
.favouriteButton .liList,
.favouriteButton img,
.mealAddress .mealAddressHeader,
.profileBodyCPSection .CPForm ul,
.reservationBody .guestsCount,
.reservationBody .reservationDateTime,
.reservationBody .reservationNote,
.reservationBody .reservationSubmit,
.searchitemImage,
.sideBarFavourite .popularRestaurantImage,
.sideBarFavourite img,
.singleVendorInformationImg {
    width: 100%;
}
.addCardMain .form_input {
    width: 100%;
    border-radius: 5px;
    padding: 0.75rem;
    outline: 0;
    border: var(--border);
}
.addAddressBodyInfo .form_input:focus,
.addCarMain .form_input:focus,
.addCardMain .form_input:focus,
.addCopon input:focus,
.cartPaymentBody .cartNote .cartNoteInput:focus,
.reservationBody .reservationNote:focus {
    border: var(--border);
}
.addCarMain .ExpiryCVV,
.addCardMain .ExpiryCVV {
    width: 100%;
    display: grid;
    grid-template-columns: 68% 30%;
    grid-template-rows: 30% 44.8px;
    column-gap: 2%;
    row-gap: 3px;
}
.addCarMain .submitAddCar,
.addCardMain .submitAddCard {
    width: 100%;
    border-radius: var(--general-border-radius);
    background-color: var(--button-color);
    letter-spacing: normal;
}
.addCarMain .submitAddCar:focus,
.addCarMain .submitAddCar:hover,
.addCardMain .submitAddCard:focus,
.addCardMain .submitAddCard:hover,
.proPaymentS:focus,
.proPaymentS:hover {
    background-color: var(--button-color);
    color: var(--general-background-color);
}
.addCardMain .number::-webkit-inner-spin-button,
.addCardMain .number::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.addCardMain input[type="number"],
.cartTips .cartTipsValues .radio-label input[type="number"],
.profileBodyInfSection .profileForm .flag-icon-div input[type="number"] {
    appearance: textfield;
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;
}
.addCardMain .SaveCard,
.demandInfo .NoContactDiv,
.demandInfo .cashHandlingDiv,
.profileForm .PODDiv {
    width: 100%;
    background-color: var(--general-background-color);
    padding: 0.75rem 0.75rem 0.75rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 44.8px;
    margin-top: 10px;
}
.addCarMain .warningCarText,
.addCardMain .warningCardText,
.profileBodyCPSection .CPForm #CPMessage,
.profileBodyInfSection .profileForm #PUMessage,
.searchVendorInfo {
    text-align: center;
}
.paymentChallangeDiv {
    width: 100%;
    background-color: var(--background-opacity-color);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 13;
}
.mainNavbar,
.navbar {
    display: flex;
    align-items: center;
}
.paymentChallangeDiv .paymentChallange {
    background: var(--general-background-color);
    padding: 25px;
    border-radius: 15px;
    text-align: center;
}
.paymentChallangeDiv .paymentChallang h1 {
    font-size: x-large !important;
    margin-bottom: 20px !important;
}
.paymentChallangeDiv .paymentChallang form input {
    margin: 0 !important;
}
.paymentChallangeDiv .paymentChallang form input[type="submit"] {
    border-radius: 15px !important;
    background-color: var(--main-color) !important;
}
.authentication {
    width: 100%;
    background: #fff;
    z-index: 99;
}
.main {
    width: 100%;
}
.mainNavbar {
    justify-content: center;
    background: var(--main-color);
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 3;
}
.navbar {
    justify-content: space-between;
    height: 12vh;
    border-bottom: 1px solid var(--border-color);
    width: 1381px;
}
.logo,
.search {
    align-items: center;
    display: flex;
}
.logo {
    width: 20%;
    justify-content: start;
    height: 100%;
}
.custom-dropdown,
.searchForm input {
    height: 6vh;
    background-color: var(--general-background-color);
}
.search {
    width: 40%;
    justify-content: space-around;
}
.searchSection {
    width: 100%;
    position: relative;
}
.searchForm {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: stretch;
    margin: 0;
}
.custom-dropdown {
    width: 106px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    position: relative;
    cursor: pointer;
    border: 0;
    border-radius: 8px 0 0 8px;
}
.custom-dropdown:focus,
.custom-dropdown:focus-visible {
    border: 0;
}
.custom-dropdown-wrapper {
    position: relative;
    display: inline-block;
    border-right: 1.8px solid var(--border-color);
}
.custom-dropdown-wrapper::after {
    content: "▼";
    position: absolute;
    top: 50%;
    right: 0.75em;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--button-color);
}
.searchForm input {
    border: 0;
    border-radius: 0 8px 8px 0;
}
.searchForm input:focus {
    border: 0;
}
.searchInput {
    width: 100%;
    padding-left: 10% !important;
    padding-right: 10% !important;
}
.closeIcon {
    display: none;
    width: var(--svg-size);
    position: absolute;
    fill: var(--svg-color);
    cursor: pointer;
    right: 5%;
}
.searchResult {
    display: none;
    overflow-y: auto;
    position: fixed;
    width: 100%;
    border: 0.5px solid var(--border-color);
    z-index: 12;
    background-color: var(--general-background-color);
    align-items: center;
    justify-content: center;
    top: 12vh;
    left: 0;
    height: 88vh;
}
.searchResult .searchProcessing {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 38vh;
    width: 100%;
    height: 100%;
}
.searchResult .searchFilters {
    position: absolute;
    display: grid;
    min-height: 35vh;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: var(--general-background-color);
    grid-row-gap: 5px;
    max-height: 35vh;
}
.searchResult .searchFilters p {
    margin: 2px 10px;
    padding-left: 10px;
    border-bottom: 1px solid;
    border: 1px solid var(--main-color);
    border-radius: 5px;
    text-align: center;
    color: var(--general-background-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.Results {
    background-color: var(--general-background-color);
    width: 100%;
    height: auto;
    padding: 10px;
}
.ResultsBody,
.bodyServices .bodyServicesUl .bodyServiceLi .insideBodyServiceLi {
    width: 100%;
    height: 100%;
}
.ResultsBodyResults .ulList {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-wrap: wrap;
}
.ResultsBodyResults a:focus,
.ResultsBodyResults a:hover {
    background-color: var(--border-color);
    color: var(--text-color);
}
.ResultsBodyResults .searchVendorLink {
    display: grid;
    grid-template-columns: 1fr;
    align-items: self-start;
    border-radius: 5px;
    background-color: var(--background-color);
    padding: 0 0 15px;
    min-height: 115px;
}
.searchVendorLink {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px;
}
.searchVendorImage img {
    width: 100%;
    height: 60px;
    object-fit: cover;
    background-color: var(--general-background-color);
    border-radius: 5px 5px 0 0;
}
.searchVendorInfo .searchVendorInfoDetails {
    width: 60%;
    background: var(--general-background-color);
    border-radius: 5px;
    margin-top: -11px;
    margin-left: 49px;
    font-size: smaller;
    margin-bottom: 4px;
}
.ratingSVG svg {
    width: 16px;
    fill: var(--rate-color);
}
.searchVendorName h4 {
    font-size: medium;
}
.ResultsBodyResultsItems {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    margin: 10px 0;
    flex-wrap: wrap;
}
.ResultsBodyResultsItems .MenuSectionContentItem {
    background-color: var(--general-background-color);
    border: 1.8px solid var(--main-color);
    border-radius: var(--general-border-radius);
    margin-top: 1%;
    cursor: pointer;
}
.ResultsBodyResultsItems .MenuSectionContentItem a,
.TitleSectionTitle {
    display: flex;
    align-items: center;
    justify-content: start;
}
.buttons,
.filterButton {
    align-items: center;
    position: relative;
}
.searchItemLink {
    width: 100%;
    box-shadow: 0 1px 4px var(--background-color);
    border-radius: 10px;
    background-color: var(--background-color);
    text-align: center;
}
.searchitemImage img {
    width: 100%;
    height: 80px;
    object-fit: cover;
    border-radius: 5px 5px 0 0;
}
.searchitemInfo {
    height: calc(100% - 80px);
    display: grid;
    grid-template-rows: 1fr 1fr;
    padding: 0 5px;
}
.searchitemName h5 {
    font-size: small;
    padding-top: 5px;
}
.addAddressBodyInfoOldAddress .addAddressBodyInfoCurrentAddress,
.changeAddress .oldAddress p,
.driverInfo .servicePayType .servicePayTypeInfo,
.searchitemPrice,
.singleVendor .editAddressBodyInfoOldAddress .editAddressBodyInfoCurrentAddress {
    font-size: small;
}
.filterButton {
    display: none;
    justify-content: center;
    border: 1px solid var(--border-color);
    border-radius: 25px;
    height: 6vh;
    margin-right: 2%;
}
.filterButton:hover {
    border: 1px solid var(--button-color);
    background-color: var(--button-color-hover);
}
.cartAddressInfo .cartAddressChange:focus,
.cartAddressInfo .cartAddressChange:hover,
.changeAddress .changeAddressButton button:focus,
.changeAddress .changeAddressButton button:hover,
.changeAddressControl .changeAddressDelete button:focus,
.changeAddressControl .changeAddressDelete button:hover,
.filterButton:focus,
.profileBodyCarControlDelete:focus,
.profileBodyCarControlDelete:hover,
.profileBodyCardControlDelete:focus,
.profileBodyCardControlDelete:hover,
.servicesBar {
    background-color: var(--general-background-color);
}
.filterButton svg {
    fill: var(--general-background-color);
    width: 14px;
    stroke: var(--button-color);
    stroke-width: 50px;
    fill: transparent !important;
}
.buttons {
    width: 40%;
    display: flex;
    justify-content: flex-end;
}
.buttons .accountButton,
.oldOrdersBody .pendingOrderSideBar .pendingOrderSideBarInside button {
    display: flex;
    align-items: center;
    justify-content: center;
    border: var(--button-border-style);
    background-color: var(--general-background-color);
    border-radius: var(--general-border-radius);
    height: 6vh;
    margin-right: 2%;
    width: var(--button-width);
    letter-spacing: normal;
}
.buttons .accountButton a,
.menuButtonSidebarBody .accountButton a {
    width: 80%;
    color: var(--text-color);
}
.buttons .accountButton.accountButtonaccount {
    margin-right: 0;
}
.buttons .accountButton.buttonWithoutWidth {
    width: var(--small-button-width);
}
.DeliverySlots label:hover,
.SubscriptionRepetations input:focus,
.SubscriptionRepetations input:hover,
.SubscriptionType label:hover,
.WalletCards input[type="radio"]:checked + .radio-label,
.buttons .accountButton:focus,
.buttons .accountButton:hover,
.cartTipsValues input[type="radio"]:checked + .radio-label,
.dayPlanMeals .dayPlanMealsMeal label:hover,
.deliveryService .deliveryInfo .form_input:focus,
.deliveryService .deliveryServiceVehicles label:focus,
.deliveryService .deliveryServiceVehicles label:hover,
.deliveryService input[type="radio"]:checked + .radio-label,
.demandService .demandInfo .form_input:focus,
.demandService .demandInfo .specification label:focus,
.demandService .demandInfo .specification label:hover,
.demandService .demandServiceVehicles label:focus,
.demandService .demandServiceVehicles label:hover,
.demandService input[type="radio"]:checked + .radio-label,
.driverInfo .Cars label:focus,
.driverInfo .Cars label:hover,
.driverInfo .serviceHoursCount label:focus,
.driverInfo .serviceHoursCount label:hover,
.driverInfo .servicePayType .radio-label:focus,
.driverInfo .servicePayType .radio-label:hover,
.driverService .driverInfo .form_input:focus,
.driverService .driverServiceTypes label:focus,
.driverService .driverServiceTypes label:hover,
.driverService input[type="radio"]:checked + .radio-label,
.paymentMethodCards input[type="radio"]:checked + .radio-label,
.singleVendorMeal .days .daysDay:hover,
.singleVendorMeal .types .typesType:hover {
    border: var(--button-border-hover-style);
}
.buttons .accountButton svg,
.ecommerceSectionTitleFilter svg,
.profileBodySectionTitle .ProInformation svg,
.profileBodySectionTitle .addNewAddressButton svg {
    fill: var(--svg-color);
    width: var(--svg-size);
}
.servicesBar {
    height: 18vh;
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 12vh;
    width: 100%;
    z-index: 2;
    padding: 2vh;
}
.servicesBarUl {
    list-style: none;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    margin: 0;
    height: 14vh;
    overflow-x: scroll;
}
.servicesBarUl::-webkit-scrollbar {
    display: none;
}
.banners .scroller,
.servicesBarContainer .scroller {
    top: 50%;
    transform: translate(0, -50%);
}
.servicesBarContainerUL {
    margin: 0 19px;
    padding: 2px 10px;
}
.scrollerNextServicesBar {
    right: 0;
}
.scrollerPrevServicesBar {
    left: 0;
}
.servicesBarButton {
    background: 0 0;
    border: var(--button-border-style);
    border-radius: var(--general-border-radius);
    padding: 0;
    width: 95px;
    height: 95px;
    display: grid;
    align-items: center;
    justify-content: center;
}
.mainBody,
.newHomeDesign {
    display: flex;
    width: 1381px;
}
.servicesBarButton:focus,
.servicesBarButton:hover {
    border: var(--button-border-hover-style);
    background-color: transparent;
}
.activeService {
    background: var(--hover-color);
}
.servicesBarImage img {
    width: 7vh;
    height: 7vh;
    object-fit: contain;
}
.servicesBarName {
    letter-spacing: normal;
    text-transform: capitalize;
}
.mainBody {
    min-height: 70vh;
    margin: auto;
    flex-wrap: wrap;
}
.ResultBody {
    width: 1381px;
    margin: auto;
}
.newHomeDesign {
    flex-wrap: wrap;
    margin-top: 50px;
}
.newHomeDesignOffers,
.newHomeDesignRest {
    width: 680px;
    background: var(--background);
    border-radius: 8px;
    padding: 10px;
}
.newHomeDesign h3 {
    font-size: x-large;
}
.newHomeDesignOffers {
    margin-right: 10.5px;
}
.newHomeDesignRest {
    margin-left: 10.5px;
}
.newHomeDesignOffers .mainUL,
.newHomeDesignRest .mainUL {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.newHomeDesignOffers .popularRestaurantButton .popularRestaurantImage,
.newHomeDesignOffers .popularRestaurantImage img,
.newHomeDesignRest .popularRestaurantButton .popularRestaurantImage,
.newHomeDesignRest .popularRestaurantImage img {
    width: 318px !important;
    height: 220px !important;
}
.vendorAdvButton {
    position: relative !important;
}
.vendorAdvImage {
    width: 330px;
    height: 340px;
    border-radius: 8px;
    object-fit: cover;
}
.vendorAdvButton .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0000009c;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    transition: opacity 0.3s;
}
.vendorAdvHideDiv {
    position: absolute;
    top: 50%;
    width: 100%;
    transform: translateY(0);
    opacity: 0;
    transition: transform 1.5s ease-out, opacity 1.5s ease-out;
}
.vendorAdvHideDiv.active {
    transform: translateY(-50%);
    opacity: 1;
}
.vendorAdvprofile {
    width: 130px;
    height: 130px;
    border: 1.8px solid var(--button-color);
    border-radius: var(--general-border-radius);
}
.vendorAdvHideDivInfo {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.SingleVendorDeliveryAddressDiv .SingleVendorDeliveryAddressControl .SingleVendorDeliverySetDefault .SingleVendorDeliveryDefault,
.bannersUl.bannersUlOne .liList,
.loadingPage,
.loadingPageMart,
.menuButtonSidebarHeader .SidebarHeaderCloseIcon,
.popupTitleleftIcon,
.vendorAdvHideDivImage,
.walletDetailRight {
    display: flex;
    align-items: center;
    justify-content: center;
}
.vendorAdvHideDiv .vendorAdvHideDivInfo p {
    margin: 5px;
    padding: 0 10px;
    background: var(--button-color);
    border-radius: 8px;
    color: #fff;
    border: 1.8px solid #fff;
}
.Recommended {
    position: absolute;
    top: 20px;
    left: 0;
    background: red;
    width: fit-content;
    text-align: center;
    z-index: 1;
    padding: 0 10px;
    border-radius: 0 8px 8px 0;
}
.Recommended p {
    margin: 0;
    color: var(--general-background-color);
}
.bodyServices,
.filters {
    width: 330px;
    height: 88vh;
    position: sticky;
    overflow: auto;
    top: 12vh;
    -ms-overflow-style: none;
    scrollbar-width: none;
    padding: 10px;
    background-color: var(--main-color);
}
.accountInformation,
.menuInformation {
    background: var(--general-background-color);
    right: -12px;
    top: 7vh;
    width: 170px;
    padding: 10px;
}
.bodyServices .bodyServicesUl {
    list-style: none;
    margin-left: 0;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2%;
}
.bodyServices .bodyServicesUl .bodyServiceLi {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
}
.bodyServices .bodyServicesUl .bodyServiceLi a {
    width: 98%;
    height: 98%;
}
.bodyServices .bodyServicesUl .bodyServiceLi .insideBodyServiceLi .bodyServiceButton {
    width: 100%;
    height: 100%;
    border: 0.5px solid var(--third-main-color);
    border-radius: 50%;
    padding: 0;
    box-shadow: 5px 5px 5px var(--third-main-color);
    background-color: var(--second-main-color);
}
.bodyServiceLi .insideBodyServiceLi .bodyServiceButton .bodyServiceImage {
    height: 50%;
    width: 100%;
}
.bodyServiceLi .insideBodyServiceLi .bodyServiceButton .bodyServiceImage img {
    object-fit: contain;
    width: 100%;
    height: 100%;
}
.bodyServiceLi .insideBodyServiceLi .bodyServiceButton .bodyServiceName {
    margin: 0;
    font-size: 12px;
    font-weight: bolder;
    text-transform: capitalize;
}
.main .menuButton {
    width: 100%;
    height: 100%;
    display: none;
    align-items: center;
    justify-content: flex-end;
    background-color: var(--border-color-rgb);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 4;
}
.menuButton .menuButtonSidebar {
    background-color: var(--general-background-color);
    width: 368px;
    height: 100%;
}
.menuButton .menuButtonSidebar.menuButtonSidebarSmall {
    width: 250px;
}
.menuButtonSidebar .menuButtonSidebarHeader {
    width: 100%;
    height: 12%;
    border-bottom: 1px solid var(--border-color-rgb);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    background-color: var(--background);
}
.menuButtonSidebar .menuButtonSidebarBody {
    width: 100%;
    height: 88%;
    padding: 3% 10%;
}
.TitleSectionDeleteOrder svg,
.menuButtonSidebarHeader .SidebarHeaderCloseIcon svg,
.singleVendorMeal .dayMeals .dayMealsName svg {
    width: 16px;
    fill: var(--button-color);
    cursor: pointer;
}
.menuButtonSidebarBody .accountButton {
    display: flex;
    align-items: center;
    justify-content: center;
    border: var(--border);
    background-color: var(--general-background-color);
    border-radius: var(--general-border-radius);
    height: 6vh;
    width: var(--button-width);
    letter-spacing: normal;
    margin: 3% auto;
}
.accountInformation,
.menuInformation {
    border-radius: var(--general-border-radius);
}
.accountInformation::before,
.menuInformation::before {
    content: "";
    top: -1vh;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid transparent;
    border-bottom: 7px solid var(--general-background-color);
    position: absolute;
}
.main .menuButton.accountButtonSidebar,
.main .menuButton.favouriteButton {
    z-index: 5;
}
.favouriteButton .menuButtonSidebar .menuButtonSidebarBody {
    padding: 3%;
    overflow-x: auto;
}
.favouriteButton .menuButtonSidebar .menuButtonSidebarBody::-webkit-scrollbar {
    display: none;
}
.favouriteButton .ulList {
    margin: 0;
    flex-wrap: wrap;
}
.arrow svg,
.favouriteButton .popularRestaurantImage .AddResToFavourite svg,
.popularRestaurantImage .AddResToFavourite svg,
.popularRestaurantImage .AddResToFavourite svg:hover {
    fill: var(--general-background-color);
}
.accountInformation {
    position: absolute;
    display: none;
    align-items: center;
    justify-content: center;
}
.menuInformation {
    position: absolute;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 13;
}
.menuInformation::before {
    right: 37px;
}
.SidebarHeaderLogo {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.SidebarHeaderLogo svg {
    width: var(--svg-size);
    fill: var(--svg-color);
    margin-right: 15px;
}
.SidebarHeaderLogo h4,
.singleVendorInformationContent .location .headerDivider {
    color: var(--svg-color);
}
.accountButtonSidebar .SidebarHeaderLogo img {
    border-radius: var(--general-border-radius);
    width: 60px;
    height: 60px;
    object-fit: cover;
    border: 1.8px solid var(--button-color);
}
.accountButtonSidebar .SidebarHeaderLogo .customerInformation {
    padding-left: 10px;
}
.mainBody .profile {
    width: 100%;
    height: fit-content;
}
.profile .profileHeader {
    width: 100%;
    height: 30%;
    padding: 6% 0 0 20%;
    display: flex;
    align-items: center;
}
.profile .profileHeader h3 {
    text-transform: capitalize;
}
.profile .profileHeader .profileImage img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 8px;
    margin: 20px;
    border: var(--border);
}
.profile .profileHeader .profileImage svg {
    width: 23px;
    position: absolute;
    bottom: 15px;
    right: 16px;
    fill: var(--general-background-color);
    cursor: pointer;
    background: var(--button-color);
    padding: 5px;
    border-radius: 8px;
    border: 1.8px solid #fff;
}
.profileHeader .profileInfo .updateimage {
    border-radius: 5px;
    color: var(--general-background-color);
    background: var(--main-color);
}
.EditProfilePicture {
    background: var(--bac-card);
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 6;
    top: 0;
    left: 0;
}
.EditProfilePictureDiv {
    background: var(--general-background-color);
    margin: 35px auto auto;
    max-width: 600px;
    max-height: 500px;
    border-radius: var(--general-border-radius);
}
.EditProfilePictureHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    height: 50px;
}
.EditProfilePicturePicture {
    height: 365px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.EditProfilePicturePicture img {
    width: 300px;
    height: 300px;
    border: var(--border);
    border-radius: var(--general-border-radius);
    object-fit: cover;
}
.EditProfilePictureFooter {
    height: 85px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 50px;
    border-top: 1.8px solid var(--border-color);
}
.EditProfilePictureFooter .EditProfilePictureFooterDelete .svgDiv,
.EditProfilePictureFooter .EditProfilePictureFooterEdit .svgDiv,
.viewAllEcommerceSection .ecommerceSectionTitle .backButton {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.profileHeaderButtons {
    background: var(--general-background-color);
    position: sticky;
    top: 12vh;
    padding: 20px 0;
    z-index: 1;
    border-bottom: 0.5px solid var(--border-color);
}
.profileHeaderButtons ul {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    list-style: none;
    margin: 0;
    text-align: center;
}
.profileHeaderButtons ul li {
    margin: 0 2%;
    padding: 5px 10px;
    cursor: pointer;
    text-wrap: nowrap;
    border: 1.8px solid transparent;
}
.profileHeaderButtons ul li a,
.singleVendorMeal .singleVendorMealBody .dayMealsName h5 {
    color: #000;
}
.MenuHeaderUl .MenuHeaderLi:focus,
.MenuHeaderUl .MenuHeaderLi:hover,
.MenuHeaderUl .activeLi,
.profileHeaderButtons ul li:hover {
    border-bottom: 1.8px solid var(--button-color);
}
.CartFooterOrderTotal .CartFooterOrderTotalNumber,
.activeProfileLi a,
.addAddressBodyInfoOldAddress .addAddressBodyInfoAddressTitle,
.changeAddress .oldAddress .address,
.oldOrderItemBody table tr .rightBody,
.orderSummaryTable .Total,
.paymentDetails .paymentDetailsTable .trBold,
.popularRestaurantName .restaurantName,
.profileHeaderButtons ul li:hover a,
.singleVendor .editAddressBodyInfoOldAddress .editAddressBodyInfoAddressTitle,
.singleVendorMeal .plans label:hover {
    font-weight: 600;
}
.activeProfileLi {
    border-bottom: 1.8px solid var(--button-color) !important;
}
.profileHeaderButtons .profileHeaderButtonsMenu {
    align-items: center;
    justify-content: center;
    border: 1px solid var(--main-color);
    background-color: var(--main-color);
    height: 6vh;
    border-radius: 5px;
    display: none;
    margin: 0 5%;
    width: 90%;
}
.profile .profileBody {
    background-color: var(--background);
    width: 100%;
    height: fit-content;
    padding: 2% 10% 5%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
    min-height: 88vh;
}
.profileBody .profileBodySection {
    width: 80%;
    border: var(--border);
    border-radius: var(--general-border-radius);
    background: var(--general-background-color);
    padding: 10px;
    margin-top: 3%;
}
.profileBodySection .profileBodySectionTitle {
    height: 75px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--border-color-rgb);
    position: relative;
}
.profileBodySection .profileBodySectionTitle h4 {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.profileBodySectionTitle .ProInformation,
.profileBodySectionTitle .addNewAddressButton,
.profileBodySectionTitle .addNewCarButton,
.profileBodySectionTitle .addNewCardButton,
.profileBodySectionTitle .addNewWalletButton,
.walletOrderDetailsCloseIconDiv {
    width: 10%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0;
    height: 75px;
}
.profileBody .profileBodyCPSection .CPForm,
.profileBody .profileBodyInfSection .profileForm {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
    padding: 0 15px;
}
.addAddressBodyInfo label,
.profileBody .profileBodyCPSection .CPForm label,
.profileBody .profileBodyInfSection .profileForm label,
.profileBodyAddressDetails label,
.singleVendor .editAddressBodyInfo label {
    width: 30%;
    margin-top: 10px;
    height: 44.8px;
    display: flex;
    align-items: center;
}
.addAddressBodyInfo .form_input,
.profileBody .profileBodyCPSection .CPForm .form_input,
.profileBody .profileBodyInfSection .profileForm .form_input,
.singleVendor .editAddressBodyInfo .form_input {
    width: 70%;
    border-radius: var(--general-border-radius);
    background: var(--general-background-color);
    padding: 0.75rem;
    outline: 0;
    border: var(--border);
    margin-top: 10px;
}
.profileBody .profileBodyInfSection .profileForm .flag-icon-div {
    width: 70%;
    background-color: var(--general-background-color);
    border: var(--border);
    border-radius: var(--general-border-radius);
    padding: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 44.8px;
    margin-top: 10px;
}
.addAddressBodyInfo .flag-icon-div img,
.profileBodyAddressDetails .flag-icon-div img,
.profileBodyInfSection .profileForm .flag-icon-div img,
.singleVendor .editAddressBodyInfo .flag-icon-div img {
    width: 20px;
    height: 20px;
    border-radius: 50%;
}
.addAddressBodyInfo .flag-icon-div span,
.profileBodyAddressDetails .flag-icon-div span,
.profileBodyInfSection .profileForm .flag-icon-div span,
.singleVendor .editAddressBodyInfo .flag-icon-div span {
    padding-left: 0.75rem;
}
.addAddressBodyInfo .flag-icon-div .form_input,
.profileBodyAddressDetails .flag-icon-div .form_input,
.profileBodyInfSection .profileForm .flag-icon-div .form_input,
.singleVendor .editAddressBodyInfo .flag-icon-div .form_input {
    padding-top: 0;
    padding-bottom: 0;
    border: 0;
    margin-top: 0;
}
.profileBodyCPSection .CPForm p,
.profileBodyInfSection .profileForm p {
    width: 100%;
    margin-top: 10px;
    margin-bottom: 0;
    height: 44.8px;
}
.addCardMain .SaveCard .SaveCardInput,
.demandInfo .NoContactDiv .NoContactInput,
.demandInfo .cashHandlingDiv .cashHandlingInput,
.profileBodyCardControl .DefaultCard,
.profileForm .PODDiv .PODInput {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 50px;
    background: 0 0;
}
.addCardMain .SaveCard .SaveCardInput::-webkit-slider-runnable-track,
.demandInfo .NoContactDiv .NoContactInput::-webkit-slider-runnable-track,
.demandInfo .cashHandlingDiv .cashHandlingInput::-webkit-slider-runnable-track,
.profileBodyCardControl .DefaultCard::-webkit-slider-runnable-track,
.profileForm .PODDiv .PODInput::-webkit-slider-runnable-track {
    height: 25px;
    background: var(--background-color);
    border-radius: 8px;
    box-shadow: 0 0 0;
    border: var(--button-border-hover-style);
}
.addCardMain .SaveCard .SaveCardInput.activeSaveCard::-webkit-slider-runnable-track,
.demandInfo .NoContactDiv .NoContactInput.activePOD::-webkit-slider-runnable-track,
.demandInfo .cashHandlingDiv .cashHandlingInput.activePOD::-webkit-slider-runnable-track,
.profileBodyCardControl .DefaultCard.activeDefaultCard::-webkit-slider-runnable-track,
.profileForm .PODDiv .PODInput.activePOD::-webkit-slider-runnable-track {
    background: var(--button-color-hover);
}
.addCardMain .SaveCard .SaveCardInput::-webkit-slider-thumb,
.demandInfo .NoContactDiv .NoContactInput::-webkit-slider-thumb,
.demandInfo .cashHandlingDiv .cashHandlingInput::-webkit-slider-thumb,
.profileBodyCardControl .DefaultCard::-webkit-slider-thumb,
.profileForm .PODDiv .PODInput::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 21px;
    width: 21px;
    cursor: pointer;
    background: var(--icons-color);
    border-radius: 8px;
    border: 0;
    margin-top: 0.4px;
}
.addCardMain .SaveCard .SaveCardInput.activeSaveCard::-webkit-slider-thumb,
.demandInfo .NoContactDiv .NoContactInput.activePOD::-webkit-slider-thumb,
.demandInfo .cashHandlingDiv .cashHandlingInput.activePOD::-webkit-slider-thumb,
.profileBodyCardControl .DefaultCard.activeDefaultCard::-webkit-slider-thumb,
.profileForm .PODDiv .PODInput.activePOD::-webkit-slider-thumb {
    background: var(--button-color);
}
.profileBodyInfSection .profileForm .flag-icon-div input::-webkit-inner-spin-button,
.profileBodyInfSection .profileForm .flag-icon-div input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.profileBodyInfSection .profileForm .genderInput {
    width: 70%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    margin-top: 10px;
    height: 44.8px;
}
.paymentMethods .paymentMethod input,
.profileBodyInfSection .profileForm .genderInput .gender_radio {
    outline: 0;
    height: 21px;
    min-width: 21px;
    cursor: pointer;
    border-color: var(--button-color);
    accent-color: var(--button-color);
    background-color: var(--general-background-color);
}
.profileBodyCPSection .CPForm .ChangePasswordUpdateSubmit,
.profileBodyInfSection .profileForm .profileInfoUpdateSubmit {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 0 10px;
}
.profileBodyInfSection .profileForm .popup-content {
    display: flex;
    justify-content: center;
}
.gm-style-mtc button,
.profileBodyInfSection .profileForm .popup-content button {
    border-radius: 5px;
}
.bannersHeadersBodyRight button:focus,
.bannersHeadersBodyRight button:hover,
.cancelOrder:focus,
.cancelOrder:hover,
.profileBodyInfSection .profileForm .popup-content button:focus,
.profileBodyInfSection .profileForm .popup-content button:hover {
    background-color: var(--button-color-hover);
}
.profileBodyAddressesSection .profileBodyAddressesSectionBody {
    display: grid;
    grid-template-columns: 100%;
    grid-auto-flow: row;
    gap: 0 0;
    justify-content: start;
    padding-top: 3%;
    padding-bottom: 5%;
}
.profileBodyAddressesSectionBody .profileBodyAddress {
    margin-top: 10px;
    border: var(--border);
    border-radius: var(--general-border-radius);
    width: 100%;
    padding: 1%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    height: fit-content;
}
.profileBodyAddress .profileBodyAddressMap {
    width: 36%;
}
.profileBodyAddress .profileBodyAddressDetails {
    width: 62%;
    display: flex;
    align-items: self-start;
    justify-content: center;
    flex-wrap: wrap;
}
.profileBodyAddress .profileBodyAddressMap .iframMap,
.profileBodyAddress .profileBodyAddressMap iframe {
    width: 100%;
    height: 80%;
}
.profileBodyAddressMap .changeAddressControl {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 20%;
    margin-top: 3px;
}
.changeAddressControl .changeAddressDelete,
.changeAddressControl .changeAddressUpdate {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.changeAddressControl .changeAddressDelete button,
.profileBodyCarControlDelete,
.profileBodyCardControlDelete {
    border-radius: var(--general-border-radius);
    width: var(--button-width);
    height: 6vh;
    letter-spacing: normal;
    border: 1.8px solid;
    color: var(--button-color);
    background-color: var(--general-background-color);
}
.changeAddressControl .changeAddressUpdate button {
    border-radius: var(--general-border-radius);
    color: var(--general-background-color);
    width: var(--button-width);
    height: 6vh;
    letter-spacing: normal;
    text-transform: capitalize;
}
.profileBodyAddressDetails .changeAddress {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1%;
    border: 1px solid var(--border-color-rgb);
    border-radius: var(--general-border-radius);
    width: 100%;
}
.changeAddress .AddressSVG,
.oldOrderBodyInfoHead {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: start;
}
.changeAddress .AddressSVG svg {
    width: 14px;
    fill: var(--svg-color);
    margin-right: 5px;
}
.changeAddress .oldAddress {
    width: 70%;
}
.changeAddress .changeAddressButton,
.oldOrderBodyPrice {
    width: 30%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.MealchangeAddressChange,
.cartAddress .cartAddressInfo .cartAddressChange,
.changeAddress .changeAddressButton button {
    border-radius: var(--general-border-radius);
    width: var(--button-width);
    height: 6vh;
    border: 1.8px solid;
    color: var(--button-color);
    background-color: var(--general-background-color);
    letter-spacing: normal;
}
.profileBodyAddressDetails .form_input {
    width: 70%;
    border-radius: 5px;
    background: var(--general-background-color);
    padding: 0.75rem;
    outline: 0;
    border: 1px solid var(--border-color-rgb);
    margin-top: 10px;
}
.profileBodyAddressDetails .form_input::-webkit-inner-spin-button,
.profileBodyAddressDetails .form_input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.profileBodyAddressDetails .flag-icon-div {
    width: 70%;
    background-color: var(--general-background-color);
    border: 1px solid var(--border-color-rgb);
    padding: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 44.8px;
    margin-top: 10px;
}
.profileBodyCardsSectionBody,
.profileBodyCarsSectionBody,
.walletDetailsBody {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.profileBodyCardsSectionBody .profileBodyCard,
.profileBodyCarsSectionBody .profileBodyCar {
    margin-top: 10px;
    border: var(--border);
    border-radius: var(--general-border-radius);
    cursor: pointer;
    width: 100%;
    padding: 20px;
    height: fit-content;
}
.profileBodyCardHeader svg {
    width: 50px;
    fill: var(--svg-color);
}
.valet .valetBody .VechiclesSVG svg {
    fill: var(--svg-color);
    margin: 0 5px;
    width: var(--svg-size);
}
.VechiclesSVGInfoUpLeft {
    transform: scale(-1,1);
}
.VechiclesSVGHead svg {
    width: 50px !important;
    margin: 0 !important;
}
.profileBodyCarHeader p,
.profileBodyCardHeader p {
    font-size: large;
    font-weight: 800;
}
.profileBodyCardHeader img {
    width: 90px;
    height: 50px;
    object-fit: cover;
}
.profileBodyCarControl,
.profileBodyCardControl {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
}
.profileBodyWalletsSectionBody {
    margin-top: 10px;
    border: var(--border);
    border-radius: var(--general-border-radius);
    cursor: pointer;
    width: 100%;
    padding: 20px;
    height: fit-content;
    text-align: center;
}
.MenuSectionContentItem .ContentItemInformation p .SpanWithoutOffer,
.oldOrderBodyInfo .Price,
.paymentDetails .paymentDetailsNote,
.walletBalance {
    color: var(--accept-color);
}
.WalletCards {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 20px;
    margin: 10px 0;
}
.WalletCards input,
.addToWalletCards input {
    display: none;
}
.WalletCards label,
.addToWalletCards label,
.cartTips .cartTipsValues .radio-label,
.paymentMethods .paymentMethodCards .radio-label {
    width: 100%;
    background-color: var(--general-background-color);
    border: var(--border);
    border-radius: var(--general-border-radius);
    padding: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44.8px;
    margin: 10px 0;
    cursor: pointer;
}
.WalletCards label:hover,
.labelFilterSearchSpan,
.paymentMethods .paymentMethodCards .radio-label:hover {
    border: 1.8px solid var(--button-color);
}
.profileBodyWalletControl {
    display: grid;
    grid-gap: 10px;
}
.walletBallanceInput {
    width: 50%;
    margin: auto;
    border-radius: var(--general-border-radius) !important;
    border: var(--border) !important;
}
.profileBodyProBodyRight p,
.profileBodyWalletControlAdd {
    width: var(--button-width);
    height: 6vh;
    letter-spacing: normal;
}
.deliveryService .deliveryInfo .deliveryServiceSubmit,
.demandService .demandInfo .demandServiceSubmit,
.driverService .driverInfo .driverServiceSubmit,
.profileBodyWalletControlAddDiv,
.reservationBody .reservationSubmit,
.valet .valetBody .valetSubmit {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 0 10px;
}
.profileBodyWalletControlAdd {
    border-radius: var(--general-border-radius);
    color: var(--general-background-color);
    margin: auto;
}
.profileBodyWalletControlAdd:focus,
.profileBodyWalletControlAdd:hover {
    background: var(--button-color);
    color: var(--general-background-color);
}
.oldOrdersDetailsBodyMain,
.profileBodyProBodyRight p,
.walletOrderDetails .walletOrderDetailsDiv {
    background-color: var(--general-background-color);
}
.have_not_trans {
    text-align: center;
    width: 100%;
    grid-column: span 2;
}
.walletDetail {
    margin-top: 10px;
    border: var(--border);
    border-radius: var(--general-border-radius);
    width: 100%;
    padding: 20px;
    height: fit-content;
    display: grid;
    grid-template-columns: 2fr 1fr;
}
.WalletPlus,
.paymentMethods .paymentMethod .CardPlus,
.walletDetailPointer {
    cursor: pointer;
}
.walletOrderDetails .walletOrderDetailsDiv {
    border-radius: var(--general-border-radius);
    overflow-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    min-width: 600px;
    max-height: 500px;
}
.addAddress .addAddressMain .addAddressBody,
.cartPayment .cartPaymentMain .cartPaymentBody,
.deliveryPayment .deliveryPaymentMain .deliveryPaymentBody,
.demandPayment .demandPaymentMain .demandPaymentBody,
.driverPayment .driverPaymentMain .driverPaymentBody,
.editAddress .editAddress .editAddressBody,
.mealPayment .mealPaymentMain .mealPaymentBody,
.scheduleBooking .scheduleBookingMain .scheduleBookingBody,
.valetPayment .valetPaymentMain .valetPaymentBody,
.walletOrderDetailsBody {
    padding: 10px;
}
.walletOrderDetailsBody h5 {
    color: var(--main-color-hover);
}
.labelFilterSearchSpan,
.oldOrderBodyPrice p,
.proPaymentS {
    color: var(--general-background-color);
}
.addToWallet {
    background-color: var(--background-opacity-color);
    display: flex;
    align-items: center;
    justify-content: center;
}
.addToWalletBody {
    height: fit-content;
    background: var(--general-background-color);
    border: 1px solid var(--border-color-rgb);
    border-radius: 5px;
    display: grid;
    grid-gap: 10px;
}
.addToWalletCards {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 20px;
    margin: 10px 0;
}
.addWalletCloseIconDiv,
.orderSummaryTable tr .rightBody,
.paymentDetails .paymentDetailsTable tr .trRight {
    text-align: right;
}
.profileBodyPro,
.profileBodyProsSectionBodyH {
    padding: 10px;
    border: var(--border);
    border-radius: var(--general-border-radius);
    margin: 10px;
}
.profileBodyProBody {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    justify-content: space-between;
}
.oldOrdersDetailsHeadLeft,
.oldOrdersDetailsHeadRight,
.profileBodyProBody .profileBodyProBodyLeft {
    display: flex;
    align-items: start;
    justify-content: start;
}
.profileBodyProBodyLeft input[type="radio"] {
    margin-top: 3px;
}
.profileBodyProBodyLeftInfo {
    display: grid;
    align-items: center;
    justify-content: start;
    margin-left: 10px;
    line-height: 1.5em;
}
.profileBodyProBodyRight {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: end;
}
.profileBodyProBodyRight p {
    padding: 5px 20px;
    border-radius: var(--general-border-radius);
    border: 1.8px solid var(--button-color);
    font-weight: 700;
}
.proPayment {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    background: var(--dark-background);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1% 10%;
}
.proPaymentMain {
    width: 100%;
    background: var(--general-background-color);
    padding: 1% 3%;
    border: var(--border);
    border-radius: 5px;
    overflow-y: auto;
    max-width: 654px;
}
.addAddress .addAddressMain .addAddressHeader,
.cartPayment .cartPaymentMain .cartPaymentHeader,
.changeSingleVendorDeliveryAddress .changeSingleVendorDeliveryAddressMain .changeSingleVendorDeliveryAddressHeader,
.deliveryPayment .deliveryPaymentMain .deliveryPaymentHeader,
.demandPayment .demandPaymentMain .demandPaymentHeader,
.driverPayment .driverPaymentMain .driverPaymentHeader,
.editAddress .editAddressMain .editAddressHeader,
.mealPayment .mealPaymentMain .mealPaymentHeader,
.proPaymentHeader,
.scheduleBooking .scheduleBookingMain .scheduleBookingHeader,
.valetPayment .valetPaymentMain .valetPaymentHeader {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--border-color-rgb);
}
.addAddress .addAddressMain .addAddressHeader h4,
.cartPayment .cartPaymentMain .cartPaymentHeader h4,
.changeSingleVendorDeliveryAddress .changeSingleVendorDeliveryAddressMain .changeSingleVendorDeliveryAddressHeader h4,
.deliveryPayment .deliveryPaymentMain .deliveryPaymentHeader h4,
.demandPayment .demandPaymentMain .demandPaymentHeader h4,
.driverPayment .driverPaymentMain .driverPaymentHeader h4,
.editAddress .editAddressMain .editAddressHeader h4,
.mealPayment .mealPaymentMain .mealPaymentHeader h4,
.proPaymentHeader h4,
.scheduleBooking .scheduleBookingMain .scheduleBookingHeader h4,
.valetPayment .valetPaymentMain .valetPaymentHeader h4 {
    width: 90%;
    text-align: center;
}
.cartPaymentBody .cartNote,
.cartPaymentBody .paymentMethods,
.deliveryPaymentBody .deliveryCouponDiv,
.deliveryPaymentBody .paymentDetails,
.deliveryPaymentBody .paymentMethods,
.demandPaymentBody .paymentDetails,
.demandPaymentBody .paymentMethods,
.driverPaymentBody .paymentMethods,
.mealPaymentBody .paymentDetails,
.mealPaymentBody .paymentMethods,
.paymentDetails,
.proPaymentBody .paymentMethods,
.valetPaymentBody .paymentMethods {
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 10px;
}
.proPaymentButton {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px;
}
.proPaymentS {
    border: 0;
    background: var(--button-color);
    width: 50%;
    border-radius: var(--general-border-radius);
    width: var(--button-width);
    letter-spacing: normal;
}
.profileBodyCarHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}
.profileBodyCarHeader img {
    position: absolute;
    top: 0;
    right: 0;
    object-fit: contain;
    opacity: 0.3;
    width: 50%;
}
.profileBodyCarControl .DefaultCar {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 70px;
    background: 0 0;
}
.profileBodyCarControl .DefaultCar::-webkit-slider-runnable-track {
    height: 40px;
    background: var(--background-color);
    padding: 1px 5px;
    border-radius: 75px;
    box-shadow: 0 0 0;
}
.profileBodyCarControl .DefaultCar.activeDefaultCar::-webkit-slider-runnable-track {
    background: var(--webkit-slider);
}
.profileBodyCarControl .DefaultCar::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 38px;
    width: 38px;
    cursor: pointer;
    background: var(--icons-color);
    border-radius: 50%;
    border: 0;
    margin-top: 0.5px;
    margin-bottom: 0.5px;
}
.profileBodyCarControl .DefaultCar.activeDefaultCar::-webkit-slider-thumb {
    background: var(--webkit-slider-thumb);
}
.addCarMain .form_input,
.addCarMain form select {
    width: 100%;
    border-radius: var(--general-border-radius);
    background: var(--general-background-color);
    padding: 0.75rem;
    outline: 0;
    border: var(--border);
}
.oldOrders {
    width: 100%;
    min-height: 78vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.oldOrdersBody {
    width: 60%;
    height: 78vh;
    display: flex;
    align-items: start;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
}
.oldOrdersBody::-webkit-scrollbar {
    display: none;
}
.oldOrdersBodyHeader {
    width: 100%;
    display: flex;
    height: 10vh;
    position: sticky;
    top: 12vh;
    background: var(--general-background-color);
    z-index: 1;
}
.oldOrdersBodyHeader .oldOrdersBodyHeaderCompleted,
.oldOrdersBodyHeader .oldOrdersBodyHeaderPending {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0 10px;
    border-bottom: 1px solid var(--border-color-rgb);
}
.oldOrdersBodyHeaderCompleted .completedOrdersButton,
.oldOrdersBodyHeaderPending .pendingOrdersButton {
    border-radius: 0;
    border: 0;
    background: 0;
    text-transform: capitalize;
    letter-spacing: unset;
    font-size: 1.125rem;
    font-weight: 100;
    border-bottom: 1.8px solid transparent;
}
.oldOrdersBody .pendingOrderSideBar {
    width: 160px;
    position: sticky;
    top: 11vh;
    left: 0;
    height: 78vh;
    border-right: 1px solid var(--border-color-rgb);
    display: flex;
    align-items: start;
    justify-content: center;
}
.oldOrdersBody .pendingOrderSideBar .pendingOrderSideBarInside {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    overflow-y: scroll;
    max-height: calc(78vh - 10px);
    margin-top: 10px;
}
.oldOrdersBody .pendingOrderSideBar .pendingOrderSideBarInside::-webkit-scrollbar {
    display: none;
}
.oldOrdersBody .allpendingOrderView {
    width: calc(100% - 160px);
    height: 77vh;
}
.oldOrdersBody .pendingOrderView {
    width: 100%;
    overflow-y: scroll;
    height: 77vh;
}
.oldOrdersBody .pendingOrderView::-webkit-scrollbar {
    display: none;
}
.noOrders h5 {
    text-align: center;
    margin-top: 20px;
}
.buttonActive button {
    border-bottom: 1.8px solid var(--button-color) !important;
    font-weight: 900 !important;
}
.oldOrders .oldOrder {
    border: var(--border);
    border-radius: var(--general-border-radius);
    cursor: pointer;
    min-height: 160px;
    width: 95%;
    margin: 10px 2.5%;
}
.oldOrderHead {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    border-bottom: var(--border);
    border-radius: 8px 8px 0 0;
}
.oldOrderBody {
    height: fit-content;
    min-height: 160px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.oldOrderBodyImage {
    width: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.oldOrderBodyImage img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: var(--general-border-radius);
}
.oldOrderBodyInfo {
    width: calc(100% - 160px);
    line-height: normal;
    padding-right: 10px;
}
.oldOrderBodyInfo .ServiceName {
    font-size: large;
    font-weight: 600;
    color: var(--button-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.oldOrderBodyInfo .ServiceName .oldOrdersDetailsHeadRate {
    min-width: 100px;
}
.oldOrderBodyInfoHead img {
    width: 60px;
    height: 60px;
    object-fit: contain;
}
.oldOrderBodyInfoHead p {
    margin-bottom: 0;
    margin-left: 10px;
    font-weight: 600;
}
.oldOrderBodyPrice p {
    margin: 0;
    width: 100%;
    text-align: center;
    background-color: var(--button-color);
    border-radius: 8px;
}
.oldOrdersDetails {
    width: 40%;
    height: 78vh;
    overflow-y: auto;
    background-color: var(--background);
    display: flex;
    justify-content: center;
}
.oldOrdersDetailsBody,
.oldOrdersDetailsBodyMain {
    width: 95%;
    margin: 10px 0;
    border-radius: 8px;
    padding: 10px;
}
.oldOrdersDetails::-webkit-scrollbar {
    display: none;
}
.oldOrdersDetailsBodyMain {
    border: 1.8px solid var(--button-color);
    height: 75vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--main-color);
}
.oldOrdersDetailsBody {
    display: none;
    background-color: var(--general-background-color);
    height: fit-content;
    border: 1.8px solid var(--button-color);
}
.cancelOrder,
.labelFilterSearchSpan {
    background-color: var(--button-color);
}
.oldOrdersDetailsHead {
    width: 100%;
    display: flex;
    align-items: start;
    justify-content: space-between;
}
.oldOrdersDetailsHeadImage {
    width: 80px;
    display: flex;
    justify-content: center;
    margin-top: 10px;
}
.oldOrdersDetailsHeadImage img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 8px;
}
.oldOrdersDetailsHeadInfo {
    margin-left: 10px;
    margin-top: 10px;
    line-height: normal;
}
.RateNotFill {
    width: var(--svg-size);
    stroke: var(--svg-color);
    stroke-width: 30px;
    fill: transparent;
    cursor: pointer;
}
.RateFill {
    fill: var(--svg-color);
}
.oldOrderItem {
    border-bottom: 3px solid var(--border-color-rgb);
}
.oldOrderItem:last-child {
    border-bottom: none;
}
.oldOrderItemHead {
    display: flex;
    margin: 10px;
}
.oldOrderItemHead p {
    margin: 0 0 0 10px;
    font-weight: 600;
}
.oldOrderItemBody table tr td {
    font-size: small;
    padding: 0.3em 0.5em;
    vertical-align: text-top;
}
.oldOrderItemBody table tr .leftBody {
    width: 30%;
}
.orderSummaryTable tr .leftBody {
    width: 50% !important;
}
.rightBody.demandImages {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.CartHeaderSummarySection .Discount,
.MenuSectionContentItem .ContentItemInformation p .offerSpanAfter,
.orderSummaryTable .Discount,
.paymentDetails .paymentDetailsTable .trWarning,
.paymentMethods .choosePaymentMethod {
    color: var(--warning-color);
}
.cancelOrderReason {
    display: grid;
    align-items: center;
}
.cancelOrderReason label {
    display: flex;
    align-items: center;
    margin: 10px 0;
}
.cancelOrderReason p {
    margin: 0 10px;
}
.cancelOrder {
    width: 100%;
    border-radius: 5px;
    letter-spacing: normal;
}
.filters::-webkit-scrollbar {
    display: none;
}
.filters .AllFilters {
    margin: 5px;
}
.AllFilters .filter {
    padding: 10px;
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid var(--general-background-color);
}
.filter .filterIcon {
    all: unset;
    display: flex;
    align-items: center;
    justify-content: space-between !important;
    padding: 0 5px;
    cursor: pointer;
}
.filter .arrow {
    width: 6%;
}
.arrowUp {
    display: none;
}
.popupBody ul li {
    list-style-type: none;
    margin: 5px;
    cursor: pointer;
}
.popupBody .liFilterSearch {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 5px;
}
.liFilterSearchApply {
    position: absolute;
    bottom: 0;
    z-index: 1;
    width: 100%;
    height: 8vh;
}
.labelFilterSearchApply {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 8vh;
    gap: 10px;
}
.labelFilterSearchSpan,
.labelFilterSearchSpanClear {
    align-items: center;
    height: 6vh;
    width: var(--button-width);
    display: flex;
    letter-spacing: normal;
}
.labelFilterSearchSpan {
    justify-content: center;
    border-radius: var(--general-border-radius);
    cursor: pointer;
}
.labelFilterSearchSpanClear,
.ulFilter .liFilter .labelFilter {
    background-color: var(--general-background-color);
    cursor: pointer;
}
.labelFilterSearchSpanClear {
    justify-content: center;
    border: 1.8px solid var(--button-color);
    border-radius: var(--general-border-radius);
    color: var(--button-color);
}
.popupBody .ulFilter {
    display: flex;
    margin: 0;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.cuisine_image {
    height: 50px;
    width: 100%;
}
.ulFilter .liFilter .labelFilter {
    display: flex;
    align-items: center;
    justify-content: center;
    border: var(--border);
    border-radius: var(--general-border-radius);
    letter-spacing: normal;
    margin: 3% auto;
    padding: 0 10px;
    width: 95px;
    height: 95px;
    flex-wrap: wrap;
}
.filterPopup,
.popupTitle {
    align-items: center;
    width: 100%;
}
.labelFilter:has(input[type="radio"]:checked) {
    border-color: var(--button-color);
}
.MenuSectionContent .MenuSectionContentItem:hover,
.cartTips .cartTipsValues .radio-label:checked,
.cartTips .cartTipsValues .radio-label:hover,
.changeSingleVendorDeliveryAddressBody .SingleVendorDeliveryAddressDiv.SetASDefault,
.paymentMethods .paymentMethod input:checked,
.ulFilter .liFilter .labelFilter .checkboxInput:checked,
.ulFilter .liFilter .labelFilter .checkboxInput:hover,
.ulFilter .liFilter .labelFilter .radioInput:checked,
.ulFilter .liFilter .labelFilter .radioInput:hover,
.ulFilter .liFilter .labelFilter:hover,
input[id^="pac-input"]:focus {
    border-color: var(--button-color);
}
.popupBody .liFilterSearch .labelFilter {
    padding: 0;
    border: 0;
}
.ulFilter .liFilter .labelFilter .checkboxInput,
.ulFilter .liFilter .labelFilter .radioInput {
    margin-right: 7%;
    outline: 0;
    height: 20px;
    min-width: 20px;
    cursor: pointer;
    border-color: var(--button-color);
    accent-color: var(--button-color);
    background-color: var(--general-background-color);
    display: none;
}
.ulFilter .liFilter .labelFilter .choice {
    line-height: 19px;
    text-align: center;
    width: 100%;
    font-size: smaller;
    font-weight: 600;
}
.popupBody .liFilterSearch .labelFilter input {
    margin: 0 !important;
    border: 1.8px solid var(--button-color);
    border-radius: 8px;
    height: 6vh !important;
    width: 40%;
}
.filterPopup {
    justify-content: center;
    padding: 0 10px;
    position: fixed;
    top: 12vh;
    left: 0;
    background: var(--dark-background);
    height: 33vh;
    display: none;
}
.popup {
    background-color: var(--general-background-color);
    height: 100%;
    border-radius: var(--general-border-radius);
}
.popupFilter {
    top: 0;
    position: absolute;
    width: 100%;
    height: calc(100% - 9vh);
}
.popupTitle {
    min-height: 60px;
    height: fit-content;
    display: flex;
    justify-content: space-around;
}
.popupTitle h4 {
    border-bottom: 1.8px solid var(--button-color);
    width: 80%;
}
.popupBody {
    overflow: auto;
    height: 100%;
}
.popupBody::-webkit-scrollbar {
    display: none;
}
.popupFooter {
    width: 100%;
    height: 15%;
    border-top: 1px solid var(--border-color-rgb);
    box-shadow: 0 -1px 4px 0 var(--border-color-rgb);
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 0 4%;
}
.apply,
.clearAll {
    width: 48%;
    border: 1px solid var(--main-color);
    border-radius: 5px;
    text-transform: capitalize;
}
.clearAll,
.clearAll:hover {
    background-color: var(--general-background-color);
    border: 1px solid var(--border-color);
}
.clearAll:hover {
    color: var(--main-color);
    box-shadow: 2px 2px 6px var(--border-color);
}
.ecommerceSectionTitleFilter p,
.liButton,
.liName,
.title {
    color: var(--text-color);
}
.apply:hover {
    box-shadow: 1px 1px 4px var(--main-color);
    border-color: var(--main-color);
    background-color: var(--main-color);
}
.ecommerceBody,
.ecommerceCoreBody {
    width: calc(100% - 330px);
}
.services {
    margin-top: 2%;
}
.serviceButton .serviceImage,
.serviceImage img {
    width: 167px;
    height: 140px;
    background-color: var(--second-background-color) !important;
    border-radius: 25px 25px 0 0 !important;
    object-fit: contain !important;
}
.services .scroller {
    top: 39%;
}
.title {
    margin-right: 20px;
    font-weight: 800;
}
.ulList {
    list-style: none;
    margin: 0;
    width: 100%;
    overflow-x: scroll;
    display: inline-flex;
    overflow-y: hidden;
}
.ulList::-webkit-scrollbar {
    display: none;
}
.insideLI {
    margin: 6px;
}
.liButton {
    all: unset;
    border: var(--button-border-style);
    border-radius: var(--general-border-radius);
    cursor: pointer;
    background-color: var(--background-color);
}
.bannersUlOne .liButton {
    border: 0;
    border-radius: 0;
}
.liButton:focus,
.liButton:hover {
    color: var(--text-color);
    background: var(--background-color);
    border: var(--button-border-hover-style);
}
.liImage img {
    border-radius: 5px 5px 0 0;
    object-fit: cover;
}
.itemPopup .apply,
.scroller {
    border: 1.8px solid var(--button-color);
}
.liName {
    font-weight: 600;
    margin: 0;
    height: 66px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.scroller {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: var(--button-color);
    position: absolute;
}
.scroller.MenuScrollerNext,
.scroller.scrollerNext {
    right: 2%;
}
.scroller.MenuScrollerPrev,
.scroller.scrollerPrev {
    display: none;
    left: 2%;
}
.scroller:hover {
    box-shadow: 3px 3px 5px var(--main-color);
}
.scroller svg {
    width: var(--svg-size);
    height: var(--svg-size);
    fill: var(--general-background-color);
}
.ecommerceSectionTitle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 10px 6px;
}
.ecommerceSectionTitle .viewAll,
.singleVendorInformationContent .rate {
    color: var(--button-color);
    cursor: pointer;
}
.insidetopPickeLi {
    width: 175px;
}
.topPickButton .topPickImage,
.topPickImage img {
    width: 175px;
    height: 140px;
    background-color: var(--general-background-color);
    border-radius: 8px 8px 0 0;
    object-fit: cover;
}
.topPicks .scroller {
    top: 44%;
}
.latestOfferButton .latestOfferImage,
.latestOfferImage img {
    width: 600px;
    height: 340px;
    border-radius: var(--general-border-radius);
}
.OneOfferButton .OneOfferImage,
.OneOfferImage img {
    width: 400px;
    height: 104px;
    border-radius: var(--general-border-radius);
}
.latestOfferButtonFood .latestOfferImageFood,
.latestOfferImageFood img {
    width: 200px;
    height: 200px;
}
.latestOffers .scroller,
.popularRestaurants .scroller {
    top: 50%;
}
.popularRestaurantName {
    width: calc(100% - 30px);
    font-weight: 400;
    display: inline-block;
    vertical-align: top;
    padding: 15px 25px;
    line-height: normal;
    text-align: left;
    height: fit-content;
    min-height: 75px;
}
.favRestaurantName {
    min-height: 30px;
}
.mealRestaurantName {
    min-height: 58px;
}
.valetRestaurantName {
    min-height: 20px;
}
.restaurantNameOffer {
    color: red;
}
.restaurantRate {
    display: flex;
    color: var(--button-color);
}
.popularRestaurantButton .popularRestaurantImage,
.popularRestaurantImage img {
    width: 330px;
    height: 230px;
    border-radius: 8px 8px 0 0;
}
.Adv .TopcenterNote,
.popularRestaurantImage .centerNote {
    position: absolute;
    height: 100%;
    color: var(--general-background-color);
    display: flex;
    text-align: center;
}
.ResultsBodyResultsItems .MenuSectionContentItem {
    width: 330px;
}
.sideBarFavourite .noFavourite,
.valet .valetBody h4 {
    width: 100%;
    text-align: center;
}
.popularRestaurantImage .AddResToFavourite {
    position: absolute;
    top: 22px;
    right: 25px;
    width: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--button-color);
    padding: 5px;
    border-radius: var(--general-border-radius);
}
.popularRestaurantImage .centerNote {
    top: 0;
    left: 0;
    width: 100%;
    align-items: center;
    justify-content: center;
    background: var(--note-background);
    border-radius: 8px 8px 0 0;
}
.popularRestaurantImage .centerNote p {
    margin: 0;
    font-weight: 600;
    color: var(--general-background-color);
}
.popularRestaurantImage .notetwo {
    position: absolute;
    top: 22px;
    left: -1px;
    background: var(--warning-color);
    width: 30%;
    text-align: center;
}
.popularRestaurantImage .notetwo p {
    margin: 0;
    font-size: small;
    font-weight: 600;
    color: var(--general-background-color);
}
.Adv .centerNote,
.Adv .liButton,
.Adv .popularRestaurantImage,
.Adv .popularRestaurantImage img {
    border-radius: 0;
}
.Adv .TopcenterNote {
    top: 0;
    left: 0;
    width: 100%;
    align-items: center;
    justify-content: center;
    background: var(--note-background);
}
.Adv .TopcenterNote p {
    margin: 0;
    font-weight: 200;
    color: var(--general-background-color);
    font-size: small;
}
.Adv .restaurantRate {
    bottom: 127px;
}
.Adv .restaurantImage {
    position: relative;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
}
.Adv .restaurantImage img {
    width: 50px;
    height: 50px;
    border-radius: 5px;
    object-fit: cover;
}
.Adv .AddResToFavourite,
.Adv .noteone {
    bottom: 22px;
    top: auto;
}
.FoodServiceCuisions .ulList,
.SingleServiceSection .ulList,
.viewAllEcommerceSection .ulList {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.viewAllEcommerceSection .ulList li {
    float: left;
}
.SingleServiceSection .ulList li a:hover,
.viewAllEcommerceSection .ulList li a:hover {
    all: unset;
}
.viewAllEcommerceSection .ecommerceSectionTitle {
    justify-content: flex-start;
}
.ecommerceSectionTitle .backButton svg {
    fill: var(--svg-color);
    width: var(--svg-size);
    margin: 0 10px;
}
.missMessage {
    text-align: center;
    color: var(--warning-color);
}
.SingleServiceSection .ulList li {
    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
}
.SingleServiceSection .ecommerceSectionTitle {
    justify-content: flex-start;
    margin: 20px 6px;
    padding: 0;
}
.SingleServiceSection .ecommerceSectionTitleInFood {
    justify-content: space-between;
}
.SingleServiceSection .ecommerceSectionTitleInFood .ecommerceSectionTitleFood {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.ecommerceSectionTitleFilter {
    display: flex;
    align-items: center;
    justify-content: center;
    border: var(--button-border-style);
    background-color: var(--general-background-color);
    border-radius: var(--general-border-radius);
    height: 6vh;
    width: var(--button-width);
    letter-spacing: normal;
    min-width: 108px;
    padding: 10px;
    cursor: pointer;
    position: relative;
}
.CartHeader,
.singleVendorMenuHeaders {
    border-bottom: 1px solid var(--border-color-rgb);
}
.singleVendor,
.singleVendorCart {
    padding: 1vh;
    background: var(--background);
}
.ecommerceSectionTitleFilter p {
    margin: 0 5px 0 10px;
    font-weight: 700;
}
.SingleServiceSection .backButton {
    width: 16px;
    cursor: pointer;
    margin-left: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.singleVendor {
    width: 75%;
}
.singleVendorCart {
    width: 25%;
}
.addCopon input,
.singleVendorMenuHeaders {
    background: var(--general-background-color);
}
.VendorMenuCartSection {
    position: sticky;
    top: 31vh;
}
.singleVendorHeader {
    width: 100%;
    background-color: var(--general-background-color);
    border-radius: 8px 8px 0 0;
}
.singleVendorBackButton {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 5vh;
    padding-left: 10px;
}
.singleVendor .editAddressBodyInfoAddress .editAddressBodyInfoAddressSVG svg,
.singleVendorBackButton svg,
.valetPayment .valetPaymentMain .valetPaymentHeader svg {
    width: 16px;
    fill: var(--main-color);
}
.singleVendorBackButtonTitle {
    padding-left: 10px;
    font-size: larger;
    font-weight: 600;
    color: var(--main-color);
}
.singleVendorInformation {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    margin: 0;
}
.singleVendorInformationImg img {
    object-fit: cover;
    width: 100%;
    height: 45vh;
    border-radius: 8px 8px 0 0;
}
.singleVendorInformationProfile {
    width: 100%;
    height: 8vh;
}
.singleVendorInformationProfile img {
    width: 16vh;
    height: 16vh;
    object-fit: cover;
    border-radius: 8px;
    border: 1.8px solid #94e6ff;
    margin-top: -8vh;
    margin-left: 5vh;
    margin-right: 5vh;
    background-color: var(--general-background-color);
}
.singleVendorInformationContent {
    padding: 10px;
    width: 100%;
}
.CartHeader,
.CartHeaderSummarySection {
    padding: 10px 0;
}
.singleVendorInformationContentTitle {
    font-size: x-large;
    margin: 0;
    font-weight: 800;
}
.CartHeaderH,
.MenuSectionContentItem .ContentItemInformation h5 {
    font-size: 17px;
}
.singleVendorInformationContent .typeAndRate {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
}
.singleVendorInformationContent .rate svg {
    width: var(--svg-size);
    fill: #f47b56;
}
.showMenu {
    color: var(--button-color);
    text-decoration: underline;
    cursor: pointer;
}
.singleVendorMenuHeaders {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 10vh;
    border-top: 1px solid var(--border-color-rgb);
    box-shadow: 0 3px 5px var(--background-color), 0 -3px 5px var(--background-color);
    position: sticky;
    top: 30vh;
}
.MenuHeaderUl {
    list-style: none;
    display: inline-flex;
    margin: 0;
    width: 95%;
    overflow-x: scroll;
}
.MenuHeaderUl .MenuHeaderLi {
    margin: 0 2%;
    padding: 5px 10px;
    cursor: pointer;
    text-wrap: nowrap;
    height: fit-content;
}
.MenuHeaderUl .MenuHeaderLi a,
.MenuHeaderUl .MenuHeaderLi p {
    color: #000;
    font-weight: 500;
}
.MenuHeaderUl .MenuHeaderLi a:hover,
.MenuHeaderUl .MenuHeaderLi p:hover {
    all: unset;
    font-weight: 600;
}
.MenuHeaderUl .activeLi a,
.MenuHeaderUl .activeLi p {
    color: #000;
    font-weight: 600;
}
.MenuHeaderUl::-webkit-scrollbar {
    display: none;
}
.singleVendor .singleVendorMenu,
.summaryCoponDiscount .SummarySectionText {
    display: flex;
}
.cartInFooter {
    position: fixed;
    z-index: 5;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    align-items: center;
    justify-content: center;
    background: var(--bac-card);
}
.singleVendorMenu .VendorMenuItemsSection {
    background-color: var(--background);
    width: 100%;
    padding: 0 20px;
    position: sticky;
    top: 41vh;
    overflow-x: scroll;
    height: 58vh;
}
.singleVendorMenu .VendorMenuItemsSection::-webkit-scrollbar {
    display: none;
}
.VendorMenuItemsSection .devJumpTop {
    height: 22vh;
}
.VendorMenuItemsSection .MenuSection {
    margin: 0 2%;
    padding-top: 20px;
}
.MenuSection h3 {
    color: #00c3ff;
}
.VendorMenuCartFooter .CartFooterCheckout button,
.addCopon button {
    color: var(--general-background-color);
    text-transform: capitalize;
    letter-spacing: 0;
}
.MenuSection .MenuSectionContent {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 10px 0;
    flex-wrap: wrap;
}
.MenuSectionContent .MenuSectionContentItem {
    width: 49%;
    background-color: var(--general-background-color);
    border: 1.8px solid var(--main-color);
    border-radius: var(--general-border-radius);
    display: flex;
    align-items: center;
    justify-content: start;
    margin-top: 2%;
    cursor: pointer;
}
.MenuSectionContentItem .ContentItemInformation {
    width: unset;
    margin-left: 5px;
}
.MenuSectionContentItem .ContentItemInformation p {
    margin: 0;
    font-size: 15px;
}
.MenuSectionContentItem .ContentItemInformation p .offerSpanBefore {
    text-decoration: line-through !important;
}
.MenuSectionContentItem .ContentItemImage,
.driverInfo .Cars .driveCarImage {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 10px;
}
.MenuSectionContentItem .ContentItemImage img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
}
.MenuSectionContentItem .ContentItemAdd {
    width: 10%;
    border: 1px solid var(--main-color);
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.MenuSectionContentItem .ContentItemAdd svg {
    fill: var(--main-color);
    width: 16px;
}
.singleVendorMenu .VendorMenuCartSection {
    background-color: var(--background-color);
    width: 40%;
    height: 78vh;
    position: sticky;
    top: 22vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.VendorMenuCartSection .VendorMenuCart {
    background-color: var(--general-background-color);
    border: 1.8px solid #f47b56;
    width: 100%;
    position: relative;
    border-radius: 8px;
}
.cartInFooter .VendorMenuCartSection .VendorMenuCart {
    border: 0;
    box-shadow: 2px 2px 5px var(--dark-border-color);
}
.VendorMenuCart .VendorMenuCartHeader {
    height: 57vh;
    width: 100%;
    overflow-y: scroll;
    padding: 10px;
}
.VendorMenuCart .VendorMenuCartHeader::-webkit-scrollbar {
    display: none;
}
.VendorMenuCart .VendorMenuCartFooter {
    height: 10vh;
    width: 100%;
    border: 1px solid var(--border-color-rgb);
}
.VendorMenuCartFooter .CartFooterOrderTotal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    height: 40%;
}
.VendorMenuCartFooter .CartFooterCheckout {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    width: 100%;
}
.VendorMenuCartFooter .CartFooterCheckout button {
    width: 100%;
    border-radius: 5px;
    background-color: var(--button-color);
    border: 0;
}
.CartHeaderH {
    margin-bottom: 5px;
}
.TitleSectionTitleCloseIcon {
    width: var(--svg-size);
    fill: var(--svg-color);
    margin-right: 10px;
    cursor: pointer;
    display: none;
    margin-bottom: 5px;
}
.CartHeaderTitleSection {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 10%;
}
.DeliveryTypeSectionOptions label {
    display: inline-flex;
    width: 100%;
    align-items: center;
}
.DeliveryTypeSectionOptions label input {
    margin-right: 4%;
    outline: 0;
    height: 13px;
    width: 13px;
    cursor: pointer;
    border-color: var(--border-color);
    accent-color: var(--main-color);
}
.CartHeaderItems .SingleItem {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px 0 0;
    border: 1.8px solid var(--main-color);
    border-radius: 5px;
    margin-bottom: 5px;
}
.CartHeaderItems .SingleItemImage {
    width: 20%;
}
.CartHeaderItems .SingleItemImage img {
    width: 60px;
    object-fit: cover;
    height: 60px;
    border-radius: 8px;
    padding: 5px;
}
.CartHeaderItems .SingleItemDes {
    width: 50%;
    cursor: pointer;
}
.CartHeaderItems .SingleItemDes p {
    margin: 0;
    font-size: small;
}
.CartHeaderItems .SingleItemControl {
    width: 30%;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.CartHeaderItems .SingleItemControl svg {
    width: var(--svg-size);
    fill: var(--svg-color);
    cursor: pointer;
    border: 0.5px solid var(--main-color);
    border-radius: 50%;
    padding: 2px;
}
.CartHeaderItems .SingleItemControl svg:last-child {
    border: none;
    border-radius: 0;
    padding: 0;
}
.addCopon {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 5px;
}
.addCopon input {
    width: 66%;
    margin-right: 2%;
    border-radius: 5px;
    padding: 0.75rem;
    outline: 0;
    border: var(--border);
    height: 6vh;
}
.addCopon button {
    width: 30%;
    border-radius: 5px;
    background-color: var(--button-color);
    margin-left: 2%;
    border: 0;
    height: 6vh;
    font-size: smaller;
}
.itemPopup .applyNon,
.itemPopup .applyNon:hover {
    border: 0;
    box-shadow: 0 0;
}
.CartHeaderSummarySection .SummarySection {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
    font-size: small;
}
.summaryCoponDiscount .SummarySectionText svg {
    width: 12px;
    margin-right: 4px;
    fill: var(--warning-color);
    cursor: pointer;
}
.singleVendorMenuFooter {
    display: none;
}
.cartProcessing {
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--cartProcessing);
    display: flex;
    align-items: center;
    justify-content: center;
}
.itemPopup {
    background-color: var(--bac-card);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
}
.itemPopup .popup {
    max-width: 600px;
    height: calc(100% - 50px);
    width: calc(100% - 50px);
}
.itemPopup .applyNon {
    background-color: var(--background-color);
    color: var(--icons-color);
    pointer-events: none;
    cursor: no-drop;
}
.Required,
.itemPopup .apply {
    color: var(--general-background-color);
}
.itemPopup .apply {
    width: 68%;
    border-radius: var(--general-border-radius);
    height: 6vh;
    background-color: var(--button-color);
    letter-spacing: normal;
}
.itemPopup .apply:hover {
    border: 1.8px solid var(--button-color);
    border-radius: var(--general-border-radius);
    background-color: var(--button-color);
}
.itemPopup .popupBody {
    height: calc(100% - 114px);
}
.itemPopup .popupBody .popupBodyInfo {
    overflow-y: auto;
    height: 100%;
}
.itemPopup .popupBody .popupBodyInfo::-webkit-scrollbar {
    display: none;
}
.popupBodyInfo .itemImage {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
}
.itemPopup .popupFooter,
.itemPopup .popupItemsCount {
    position: sticky;
    background-color: var(--general-background-color);
    align-items: center;
    display: flex;
    bottom: 0;
}
.popupBodyInfo .itemImage img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    border-radius: var(--general-border-radius);
    border: var(--border);
}
.popupBodyInfo .itemAllInfo {
    padding: 0 10px;
}
.itemAllInfo .itemBasicInfo,
.itemAllInfo .itemOptions {
    padding: 10px;
    border-bottom: 1px solid var(--border-color-rgb);
}
.itemAllInfo .itemBasicInfo h3,
.itemAllInfo .itemOptions h3 {
    font-size: x-large;
    font-weight: 800;
    letter-spacing: normal;
}
.Required {
    background: var(--main-color);
    padding: 7px;
    border-radius: 5px;
    border: 0;
}
.itemPopup .popupFooter {
    padding: 10px 20px;
    border-top: 1.8px solid var(--button-color);
    justify-content: space-around;
    height: 65px;
    border-radius: 0 0 8px 8px;
}
.itemPopup .popupItemsCount {
    justify-content: space-around;
    width: 30%;
}
.itemPopup .popupItemsCount svg {
    cursor: pointer;
    border: 1.8px solid var(--svg-color);
    border-radius: 2px;
    padding: 2px;
    height: 5vh;
    width: var(--svg-size);
    background: var(--svg-color);
    fill: var(--general-background-color);
}
.itemPopup .popupItemsCount svg.minus {
    cursor: pointer;
    border: 1.8px solid var(--svg-color);
    border-radius: 2px;
    padding: 2px;
    height: 5vh;
    background: var(--general-background-color);
    width: var(--svg-size);
    fill: var(--button-color);
}
.itemAllInfoChooseBody .labelFilter {
    display: flex;
    align-items: center;
    margin: 10px 0;
    width: 80%;
}
.itemAllInfoChooseBody .labelFilter .checkboxInput,
.itemAllInfoChooseBody .labelFilter .radioInput {
    margin-right: 4%;
    outline: 0;
    height: 20px;
    min-width: 20px;
    cursor: pointer;
    border-color: var(--svg-color);
    accent-color: var(--svg-color);
}
.itemAllInfoChooseBody .labelFilter .checkboxInput:checked,
.itemAllInfoChooseBody .labelFilter .checkboxInput:hover,
.itemAllInfoChooseBody .labelFilter .radioInput:checked,
.itemAllInfoChooseBody .labelFilter .radioInput:hover {
    border-color: var(--svg-color);
}
.cartPayment .cartPaymentMain .cartPaymentBody .cartAddMsg,
.valet .valetBody .verifyInfo,
.valetPayment .valetPaymentMain .valetPaymentBody .valetAddMsg {
    color: var(--warning-color);
    text-align: center;
}
.cartPaymentBody .cartNote .cartNoteInput {
    width: 100%;
    border-radius: 5px;
    background: var(--general-background-color);
    padding: 0.75rem;
    outline: 0;
    border: 1px solid var(--border-color-rgb);
    margin-top: 10px;
    border: var(--border);
}
.cartPaymentBody .placeOrderButton,
.deliveryPaymentBody .placeOrderButton,
.demandPaymentBody .placeOrderButton,
.driverPaymentBody .placeOrderButton,
.mealPaymentBody .placeOrderButton,
.valetPaymentBody .placeOrderButton {
    width: 100%;
    margin-top: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.cartPaymentBody .placeOrderButton button,
.driverPaymentBody .placeOrderButton button,
.valetPaymentBody .placeOrderButton button {
    border-radius: 5px;
    font-weight: 600;
    font-size: small;
}
.cartPaymentBody .placeOrderButton .cartSubmitOrderButton,
.deliveryPaymentBody .placeOrderButton .placeOrder,
.demandPaymentBody .placeOrderButton .demandSubmitOrderButton,
.driverPaymentBody .placeOrderButton .driverSubmitOrderButton,
.valetPaymentBody .placeOrderButton .valetSubmitOrderButton {
    border: 0;
    background: var(--button-color);
    color: var(--general-background-color);
    letter-spacing: 0;
    font-size: 15px;
    font-weight: 600;
    height: 6vh;
    border-radius: var(--general-border-radius);
}
.cartPaymentBody .placeOrderButton .cartCancelOrderButton,
.deliveryPaymentBody .placeOrderButton .scheduleBookingButton,
.demandPaymentBody .placeOrderButton .demandCancelOrderButton,
.driverPaymentBody .placeOrderButton .driverCancelOrderButton,
.valetPaymentBody .placeOrderButton .valetCancelOrderButton {
    border: 1.8px solid var(--button-color);
    background: var(--general-background-color);
    color: var(--button-color);
    letter-spacing: 0;
    font-size: 15px;
    font-weight: 600;
    border-radius: var(--general-border-radius);
}
.cartAddress,
.cartTips,
.mealAddress {
    width: 100%;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 10px;
}
.cartAddress .cartMap,
.mealAddress .mealMap {
    height: 200px;
    width: 100%;
    margin: 10px 0;
}
.cartAddress .cartAddressInfo,
.mealAddressInfo {
    width: 100%;
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 5px;
}
.MealchangeAddressName,
.cartAddress .cartAddressInfo .cartAddressName,
.mealAddressName {
    margin: 0;
    display: flex;
    align-items: center;
}
.DeliverySlots input,
.SubscriptionType input,
.cartTips .cartTipsValues .cartTipsValue,
.cartTips .cartTipsValues .radio-label .customTipsSpan,
.dayPlanMeals .dayPlanMealsMeal input,
.mealAddresses input[type="radio"],
.singleVendorMeal .days input,
.singleVendorMeal .plans input,
.singleVendorMeal .types input {
    display: none;
}
.cartTips .cartTipsHeader {
    width: 100%;
    display: grid;
    grid-template-columns: 10% 90%;
    gap: 10px;
}
.cartTips .cartTipsHeader img {
    height: 100%;
    width: 100%;
    object-fit: contain;
}
.cartTips .cartTipsValues,
.paymentMethods .paymentMethodCards {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 20px;
}
.cartTips .cartTipsValues .radio-label .customTipsInput {
    width: 100%;
    border: #ffdead;
    background: 0 0;
    text-align: center;
}
.cartTips .cartTipsValues .radio-label .customTipsInput::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.changeSingleVendorDeliveryAddress .changeSingleVendorDeliveryAddressMain .changeSingleVendorDeliveryAddressBody {
    padding: 10px;
    overflow-y: auto;
    height: 80%;
}
.changeSingleVendorDeliveryAddress .changeSingleVendorDeliveryAddressMain .changeSingleVendorDeliveryAddressBody::-webkit-scrollbar {
    display: none;
}
.changeSingleVendorDeliveryAddressBody .SingleVendorDeliveryAddressDiv {
    width: 100%;
    margin: 10px 0;
    padding: 10px;
    border: var(--border);
    border-radius: var(--general-border-radius);
}
.changeSingleVendorDeliveryAddressBody .SingleVendorDeliveryAddressDiv .SingleVendorDeliveryAddressControl {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.SingleVendorDeliveryAddressDiv .SingleVendorDeliveryAddressControl .SingleVendorDeliverySetDefault {
    border-bottom: 0;
    border-left: 0;
    border-top: 2px solid var(--border-color-rgb);
    border-right: 1px solid var(--border-color-rgb);
    border-radius: 0;
    text-transform: math-auto;
    background-color: transparent;
}
.SingleVendorDeliveryEditAddress span,
.SingleVendorDeliverySetDefault span {
    letter-spacing: normal;
}
.SingleVendorDeliveryAddressDiv .SingleVendorDeliveryAddressControl .SingleVendorDeliverySetDefault .SingleVendorDeliveryDefault svg {
    fill: var(--svg-color);
    width: var(--svg-size);
    margin-right: 10px;
}
.SingleVendorDeliveryAddressDiv .SingleVendorDeliveryAddressControl .SingleVendorDeliveryEditAddress {
    border-bottom: 0;
    border-right: 0;
    border-top: 2px solid var(--border-color-rgb);
    border-left: 1px solid var(--border-color-rgb);
    border-radius: 0;
    text-transform: math-auto;
    background-color: transparent;
}
.SingleVendorDeliveryAddressDiv .SingleVendorDeliveryAddressControl .SingleVendorDeliveryEditAddress:focus,
.SingleVendorDeliveryAddressDiv .SingleVendorDeliveryAddressControl .SingleVendorDeliveryEditAddress:hover,
.SingleVendorDeliveryAddressDiv .SingleVendorDeliveryAddressControl .SingleVendorDeliverySetDefault:focus,
.SingleVendorDeliveryAddressDiv .SingleVendorDeliveryAddressControl .SingleVendorDeliverySetDefault:hover {
    background-color: var(--general-background-color);
    color: var(--button-color);
}
.changeSingleVendorDeliveryAddressMain .changeSingleVendorDeliveryAddressFooter {
    height: 10%;
    display: grid;
    width: 100%;
    border-top: 1px solid var(--border-color-rgb);
    box-shadow: 0 -1px 4px 0 var(--border-color-rgb);
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 0 4%;
}
.changeSingleVendorDeliveryAddressMain .changeSingleVendorDeliveryAddressFooter button {
    width: 100%;
    border: 1.8px solid var(--button-color);
    border-radius: 8px;
    text-transform: capitalize;
    background-color: var(--button-color);
    color: var(--general-background-color);
}
.singleVendor .editAddressBodyInfo .form_input::-webkit-inner-spin-button,
.singleVendor .editAddressBodyInfo .form_input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.addAddressBodyInfo .addAddressBodyInfoAddress,
.singleVendor .editAddressBodyInfo .editAddressBodyInfoAddress {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1%;
    border: 1px solid var(--border-color-rgb);
    border-radius: 15px;
    width: 100%;
}
.addAddressBodyInfoAddress .addAddressBodyInfoAddressSVG,
.singleVendor .editAddressBodyInfoAddress .editAddressBodyInfoAddressSVG {
    width: 10%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.addAddressBodyInfoAddress .addAddressBodyInfoOldAddress,
.singleVendor .editAddressBodyInfoAddress .editAddressBodyInfoOldAddress {
    width: 90%;
}
.singleVendor .editAddressBodyInfo .flag-icon-div {
    width: 70%;
    background-color: var(--general-background-color);
    border: var(--border);
    padding: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 44.8px;
    margin-top: 10px;
}
.singleVendorMeal {
    display: grid;
    width: 100%;
}
.singleVendorMeal .headerImage {
    width: 100%;
    height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.singleVendorMeal .headerImage img {
    width: 50%;
    object-fit: cover;
    height: 50vh;
    border: 1px solid var(--main-color);
    border-radius: 5px;
}
.singleVendorMeal .plans label {
    align-items: center;
    justify-content: start;
    cursor: pointer;
    display: flex;
    width: 100%;
}
.DeliverySlots,
.SubscriptionRepetations,
.SubscriptionType,
.demandService .demandInfo .specification,
.driverInfo .serviceHoursCount,
.singleVendorMeal .days,
.singleVendorMeal .types {
    display: flex;
    margin: 10px 0;
    align-items: center;
    justify-content: start;
    flex-wrap: wrap;
    gap: 5px;
}
.SubscriptionType label,
.singleVendorMeal .days .daysDay,
.singleVendorMeal .types .typesType {
    flex-wrap: wrap;
    background-color: var(--general-background-color);
    display: flex;
    height: 6vh;
    cursor: pointer;
}
.singleVendorMeal .days .daysDay,
.singleVendorMeal .types .typesType {
    border: 1.8px solid var(--main-color);
    border-radius: 8px;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    width: var(--button-width);
}
.CalcMeals,
.continueMeals,
.filterMeals {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 0;
}
.singleVendorMeal .dayMeals {
    display: grid;
    margin-bottom: 10px;
}
.singleVendorMeal .dayMeals .dayMealsName {
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 6vh;
    background: var(--general-background-color);
    padding: 0 10px;
    border-left: 1.8px solid var(--button-color);
}
.singleVendorMeal .dayMeals .dayPlans {
    display: grid;
    border-left: 1.8px solid var(--button-color);
    margin-left: 20px;
}
.singleVendorMeal .dayMeals .dayPlans .dayPlanType {
    margin: 10px 10px 0;
    background-color: var(--general-background-color);
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 5vh;
    padding: 0 10px;
    border-left: var(--button-border-style);
}
.singleVendorMeal .dayMeals .dayPlans .dayPlanMeals {
    padding: 10px;
    margin: 0 10px 10px;
    border-left: 1.8px solid var(--main-color);
    display: grid;
    align-items: center;
    justify-content: space-between;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}
.singleVendorMeal .dayMeals .dayPlans .dayPlanMeals .dayPlanMealsMeal {
    display: grid;
    display: flex;
    align-items: center;
    justify-content: start;
    margin-top: 2%;
    cursor: pointer;
}
.dayPlanMeals .dayPlanMealsMeal label,
.deliveryService .deliveryServiceVehicles label,
.demandService .demandServiceVehicles label,
.driverService .driverServiceTypes label {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: start;
    width: 100%;
    border: var(--button-border-style);
    border-radius: 8px;
    background-color: var(--general-background-color);
}
.labelinputMealImage {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 10px;
    min-width: 100px;
}
.dayPlanMeals .dayPlanMealsMeal label h5,
.dayPlanMeals .dayPlanMealsMeal label p {
    text-align: left;
    margin: 0;
}
.dayPlanMeals .dayPlanMealsMeal label h5 {
    font-size: 17px;
    color: #000;
    margin-bottom: 5px;
}
.dayPlanMeals .dayPlanMealsMeal label p {
    font-size: 15px;
    line-height: 1em;
}
.dayPlanMeals .dayPlanMealsMeal label img {
    object-fit: cover;
    border-radius: 8px;
    width: 80px;
    height: 80px;
    object-fit: cover;
}
.labelinputMealDesc {
    width: unset;
    margin: 5px;
}
.mealAddress .mealAddressInfo .mealAddressChange {
    order: 0;
    padding: 0;
    color: var(--accept-color);
    background-color: var(--general-background-color);
    text-transform: capitalize;
    font-weight: 600;
    font-size: small;
    border: none;
}
.SubscriptionType label {
    padding: 0.75rem;
    margin: 0.5%;
    border: var(--button-border-style);
    border-radius: 8px;
    align-items: center;
    justify-content: space-around;
    width: var(--button-width);
    line-height: 1em;
}
.SubscriptionRepetations input {
    width: var(--button-width);
    border: 1.8px solid var(--main-color);
    border-radius: 8px;
}
.DeliverySlots label {
    background-color: var(--general-background-color);
    padding: 0.75rem;
    margin: 0.5%;
    border: var(--button-border-style);
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
    cursor: pointer;
    width: 289px;
    height: 6vh;
    line-height: 1em;
}
.mealAddresses {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 5;
    width: 100%;
    height: 100%;
    background: var(--bac-card);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1% 4%;
}
.mealAddresses .profileBodySection {
    width: 100%;
    max-height: 100%;
    background: var(--general-background-color);
    padding: 1% 3%;
    border: var(--border);
    border-radius: 8px;
    overflow-y: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.singleVendorMeal .singleVendorMealBody {
    background-color: var(--background);
    width: 100%;
    padding: 20px;
}
.reservationBody,
.reservationBody .guestsCount {
    background-color: var(--general-background-color);
}
.singleVendorMeal .singleVendorMealBody h4 {
    margin-top: 20px;
    font-weight: 600;
    font-size: 21px;
}
.mealPaymentBody .mealNote .mealNoteDivInput .mealNoteInput {
    width: 100%;
    border-radius: 8px;
    background: var(--general-background-color);
    padding: 0.75rem;
    outline: 0;
    border: var(--border);
    margin-top: 10px;
}
.mealsTable,
td,
th {
    border: 1px solid var(--main-color);
}
.mealPaymentBody .placeOrderButton button {
    border-radius: var(--general-border-radius);
    font-weight: 600;
    font-size: small;
}
.mealPaymentBody .placeOrderButton .placeOrder {
    border: 0;
    background: var(--button-color);
    color: var(--general-background-color);
    letter-spacing: 0;
    font-size: 15px;
    font-weight: 600;
    height: 6vh;
}
.mealPaymentBody .placeOrderButton .scheduleBookingButton {
    border: 1px solid var(--button-color);
    background: var(--general-background-color);
    color: var(--button-color);
    letter-spacing: 0;
    font-size: 15px;
    font-weight: 600;
}
.MealchangeAddress {
    width: 100%;
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 5px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 10px;
}
.MealchangeAddressChange:focus,
.MealchangeAddressChange:hover {
    background-color: var(--general-background-color);
    color: var(--button-color);
    border-color: var(--button-color);
}
.singleVendorReservation .singleVendorHeader {
    border-radius: var(--general-border-radius);
}
.singleVendorReservationCart .reservationBody {
    min-height: 57vh;
}
.singleVendorReservationCart .reservationBody .reservationNote {
    height: 18vh;
}
.reservationBody {
    border: 1.8px solid var(--button-color);
    width: 100%;
    position: relative;
    border-radius: 8px;
    padding: 10px;
}
.vendorMenu,
.vendorMenuDiv {
    position: fixed;
    -ms-overflow-style: none;
}
.reservationBody .reservationDateTime {
    display: grid;
    grid-template-columns: 1fr;
}
.reservationBody .guestsCount {
    border: var(--border);
    padding: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 44.8px;
    margin-top: 10px;
    border-radius: var(--general-border-radius);
}
.reservationBody .guestsCount .guestsControls {
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.reservationBody .guestsCount .guestsControls svg {
    width: var(--svg-size);
    fill: var(--general-background-color);
    cursor: pointer;
    border: 0.5px solid var(--svg-color);
    border-radius: 2px;
    padding: 0 4px;
    height: 30px;
    background: var(--svg-color);
}
.guestsDisableChange {
    pointer-events: none;
    fill: var(--svg-color) !important;
    background: 0 0 !important;
}
.reservationBody .guestsCount .guestsControls .guestsCurrentCount {
    margin: 0 10px;
    width: 20px;
    text-align: center;
}
.reservationBody .restaurantMessage {
    margin: 0;
    text-align: center;
    width: 100%;
}
.reservationBody .reservationNote,
.valet .valetBody,
.valet .valetBody input {
    margin-top: 10px;
    background: var(--general-background-color);
}
.reservationBody .reservationNote {
    border-radius: var(--general-border-radius);
    padding: 0.75rem;
    outline: 0;
    border: var(--border);
}
.vendorMenuDiv {
    z-index: 4;
    background-color: var(--bac-card);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    align-items: center;
    justify-content: center;
}
.vendorMenu {
    z-index: 5;
    background-color: var(--general-background-color);
    border-radius: 8px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: 90%;
    overflow-y: auto;
    scrollbar-width: none;
    width: 80%;
    height: 90vh;
}
.vendorMenuFooter,
.vendorMenuHeader {
    position: sticky;
    background-color: var(--general-background-color);
}
.vendorMenuHeader {
    padding: 10px 20px;
    top: 0;
    height: 7vh;
}
.vendorMenuBody {
    padding: 20px;
    height: 76vh;
    overflow: auto;
}
.vendorMenuBody iframe {
    height: 70vh;
    width: 100%;
}
.vendorMenuFooter {
    padding: 10px 20px;
    border-top: 1.8px solid var(--button-color);
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 9vh;
}
.valet .valetHeader {
    height: 10vh;
}
.valet .valetBody {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: start;
    flex-wrap: wrap;
    background-color: var(--background);
}
.valet .valetBody .VechiclesSVG {
    display: flex;
    align-items: center;
    justify-content: start;
    border: var(--button-border-style);
    border-radius: var(--general-border-radius);
    background-color: var(--general-background-color);
    margin: 10px 0;
    padding: 10px 25px;
}
.VechiclesSVGHead {
    line-height: 1.3em;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.valetForm {
    padding: 20px;
    background: var(--general-background-color);
    border-radius: 8px;
    width: 100%;
}
.VechiclesSVGInfo {
    margin-left: 14px;
}
.VechiclesSVGInfoUp {
    display: flex;
    align-items: center;
    justify-content: center;
}
.VechiclesSVGInfoUpRight {
    margin: 0;
}
.valet .valetBody img {
    width: 100%;
    padding: 0 10%;
    object-fit: contain;
}
.valet .valetBody input {
    border-radius: var(--general-border-radius);
    padding: 0.75rem;
    outline: 0;
    border: var(--border);
    width: 100%;
}
.valet .valetBody .valetSubmit button {
    color: var(--general-background-color);
    width: var(--button-width);
    height: 6vh;
    letter-spacing: normal;
    border-radius: var(--general-border-radius);
    background: var(--button-color);
}
.valet .valetPayment {
    background: var(--background-color);
    display: flex;
    align-items: center;
    justify-content: center;
}
.addAddressBodyInfo .flag-icon-div,
.bac-card,
input[id^="pac-input"] {
    background-color: var(--general-background-color);
}
.valet .valetPayment .valetPaymentMain {
    background: var(--general-background-color);
    border: 1px solid var(--border-color-rgb);
    border-radius: 5px;
}
.valet .valetPayment .valetPaymentMain::-webkit-scrollbar {
    display: none;
}
.valetPayment .valetPaymentMain .valetPaymentHeader {
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--border-color-rgb);
}
.paymentDetails .paymentDetailsTable {
    border: none;
    margin: 10px 0;
}
.paymentDetails .paymentDetailsTable tr td {
    border: none;
    padding: 0 0.7em;
}
.paymentDetails .deleteDeliveryCoupon {
    width: 16px;
    fill: var(--warning-color);
    cursor: pointer;
}
.paymentMethods .paymentMethod {
    margin: 10px 0;
    display: flex;
    align-items: center;
    justify-content: start;
}
.paymentMethods .paymentMethod svg {
    width: var(--svg-size);
    fill: var(--svg-color);
    margin: 0 16px;
}
.paymentMethods .paymentMethod .paymentMethodName {
    width: 80%;
}
#addAddressBodyInfoCurrentAddressname,
#deliveryDropAddAddressBodyInfoCurrentAddressname,
#deliveryPickupAddAddressBodyInfoCurrentAddressname,
#driverDropAddAddressBodyInfoCurrentAddressname,
#driverPickupAddAddressBodyInfoCurrentAddressname,
#singleVendorAddAddressBodyInfoCurrentAddressname,
.deliveryService .deliveryServiceVehicles input,
.demandService .demandInfo .specification input,
.demandService .demandServiceVehicles input,
.driverInfo .Cars input,
.driverInfo .serviceHoursCount input,
.driverInfo .servicePayType input,
.driverService .driverServiceTypes input,
.paymentMethods .paymentMethodCards input {
    display: none;
}
.addAddressBody .addAddressBodyInfo,
.editAddress .editAddressBodyInfo {
    padding: 10px;
    width: 100%;
    display: flex;
    align-items: self-start;
    justify-content: center;
    flex-wrap: wrap;
}
.addAddressBodyInfo .form_input::-webkit-inner-spin-button,
.addAddressBodyInfo .form_input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.addAddressBodyInfo .flag-icon-div {
    width: 70%;
    border: var(--border);
    padding: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 44.8px;
    margin-top: 10px;
    border-radius: var(--general-border-radius);
}
.addAddressBodyInfo .addAddressButton,
.editAddressBodyInfo .editAddressButton {
    width: 100%;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.addAddressBody div[id^="map"],
.editAddressBody div[id^="map"] {
    height: 200px;
}
#description {
    font-size: 15px;
}
#infowindow-content .title {
    font-weight: 700;
}
#infowindow-content {
    display: inline;
}
.bac-card {
    border: 0;
    border-radius: 2px;
    box-shadow: 0 1px 4px -1px var(--bac-card);
    margin: 10px;
    padding: 0;
    font: 400 18px Roboto;
    overflow: hidden;
}
#pac-container {
    padding-bottom: 12px;
    margin-right: 12px;
}
.pac-item,
.pac-item-query {
    text-align: left;
}
.pac-controls {
    display: inline-block;
    padding: 5px 11px;
}
.pac-controls label {
    font-size: 13px;
}
input[id^="pac-input"] {
    font-size: 15px;
    font-weight: 300;
    margin-left: 12px;
    padding: 0 11px 0 13px;
    text-overflow: ellipsis;
    width: 40%;
    height: 40px;
    border: 1.8px solid var(--button-color);
    border-radius: var(--general-border-radius);
}
#title {
    color: var(--general-background-color);
    background-color: var(--pac-input);
    font-size: 25px;
    font-weight: 500;
    padding: 6px 12px;
}
#target {
    width: 345px;
}
.deliveryService .deliveryInfo .overWeight {
    color: var(--warning-color);
    font-weight: 400;
}
.scheduleBooking .scheduleBookingMain .scheduleBookingBody {
    display: grid;
    grid-template-columns: 1fr;
    place-items: center;
    height: calc(100% - 60px);
}
.scheduleBookingMain .scheduleBookingBody .deliveryDateTime,
.scheduleBookingMain .scheduleBookingBody .deliverySubmit {
    display: grid;
    grid-template-columns: 1fr;
    width: 50%;
}
.scheduleBookingBody .deliveryDateTime .deliveryDate,
.scheduleBookingBody .deliveryDateTime .deliveryTime {
    border-radius: 5px;
    background: var(--general-background-color);
    padding: 0.75rem;
    outline: 0;
    border: 1px solid var(--border-color-rgb);
    margin-top: 10px;
    cursor: pointer;
}
.atLeastOneHour {
    color: var(--warning-color);
    text-align: center;
    grid-column: 1 / span 2;
}
.atLeastOneHourOneLine {
    grid-column: 1;
}
.scheduleBookingBody .deliverySubmit button {
    border-radius: 5px;
    color: var(--general-background-color);
    border-color: var(--button-color);
    background-color: var(--button-color);
    letter-spacing: normal;
}
.deliveryCouponDiv .deliveryCouponDivInput {
    width: 100%;
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 10px;
    margin: 10px 0;
}
.deliveryCouponDiv .deliveryCouponDivInput .deliveryCouponApply {
    border-radius: 5px;
    background-color: var(--button-color);
    color: var(--general-background-color);
    border: 0;
    height: 6vh;
    font-size: smaller;
    text-transform: capitalize;
    letter-spacing: 0;
}
.deliveryCouponDivInput .deliveryCouponCode {
    margin-right: 2%;
    border-radius: 5px;
    background: var(--general-background-color);
    padding: 0.75rem;
    outline: 0;
    border: 1.8px solid var(--main-color);
    height: 6vh;
}
.deliveryCouponDivInput .deliveryCouponCode:focus {
    border-color: var(--general-background-color);
    border: 1px solid var(--border-color-rgb);
}
.deliveryService,
.demandService,
.driverService,
.valetService {
    width: 100%;
    min-height: 100%;
    background: var(--background);
    padding: 20px 10%;
}
.deliveryService .deliveryServiceVehicles,
.demandService .demandServiceVehicles,
.driverService .driverServiceTypes {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 10px;
    padding: 10px 0;
}
.deliveryService .deliveryServiceVehicles label .VechiclesSVG,
.demandService .demandServiceVehicles label .VechiclesSVG,
.driverService .driverServiceTypes label .VechiclesSVG {
    width: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.deliveryService .deliveryServiceVehicles label .VechiclesSVG svg,
.demandService .demandServiceVehicles label .VechiclesSVG svg,
.driverService .driverServiceTypes label .VechiclesSVG svg {
    fill: var(--svg-color);
    width: 50px;
}
.driverService .driverServiceTypes label .VechiclesSVG img {
    width: 100px;
    height: 100px;
    border-radius: 8px;
    object-fit: cover;
}
.deliveryService .deliveryServiceVehicles label .VechiclesInfo,
.demandService .demandServiceVehicles label .VechiclesInfo,
.driverService .driverServiceTypes label .VechiclesSVG {
    padding: 5px;
    line-height: 1.3em;
    font-size: 15px;
}
.DeliverySlots input[type="radio"]:checked + .radio-label,
.SubscriptionType input[type="radio"]:checked + .radio-label,
.dayPlanMeals input[type="radio"]:checked + .radio-label,
.specifications .specification input[type="radio"]:checked + .radio-label {
    border: var(--button-border-hover-style);
    box-shadow: none;
}
.plans input[type="radio"]:checked + .radio-label {
    font-weight: 600;
    box-shadow: none;
}
.MenuHeaderLi:has(input[type="radio"]:checked) {
    border-bottom: 1.8px solid var(--button-color);
}
.deliveryService .deliveryInfo,
.demandService .demandInfo,
.driverService .driverInfo {
    padding: 20px;
    background: var(--general-background-color);
    border-radius: 8px;
}
.deliveryService .deliveryInfo p,
.demandService .demandInfo p,
.driverService .driverInfo p {
    font-weight: 600;
    margin: 13px 0 2px;
}
.deliveryService .deliveryInfo .deliveryAddress,
.demandService .demandInfo .demandAddress,
.demandService .demandInfo .demandCategory,
.demandService .demandInfo .demandSubCategory,
.driverService .driverInfo .driverAddress {
    width: 100%;
    background-color: var(--general-background-color);
    border: var(--button-border-style);
    border-radius: var(--general-border-radius);
    padding: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 44.8px;
    margin-top: 10px;
    cursor: pointer;
}
.demandService .demandInfo .specification label {
    border: var(--button-border-style);
    padding: 5px 0;
    border-radius: var(--general-border-radius);
    cursor: pointer;
    text-align: center;
    width: var(--button-width);
}
.deliveryService .deliveryInfo .form_input,
.demandService .demandInfo .form_input,
.driverService .driverInfo .form_input {
    width: 100%;
    border-radius: 5px;
    background: var(--general-background-color);
    padding: 0.75rem;
    outline: 0;
    border: var(--button-border-style);
    margin-top: 10px;
}
.demandService .demandInfo .form_input::-webkit-inner-spin-button,
.demandService .demandInfo .form_input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.GaragechargesDiv,
.RTAchargesDiv,
.demandInfo .NoContactDiv .NoContactDivHeader,
.demandInfo .cashHandlingDiv .cashHandlingDivHeader {
    display: flex;
    align-items: center;
}
.NoContactLabel,
.cashHandlingLabel {
    margin-left: 10px;
}
.GaragechargesDiv p,
.RTAchargesDiv p {
    margin: 0 0 0 10px !important;
    font-weight: 400 !important;
}
.driverInfo .servicePayType .radio-label {
    width: 100%;
    background-color: var(--general-background-color);
    border: var(--border);
    border-radius: 5px;
    padding: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 44.8px;
    margin-top: 10px;
    cursor: pointer;
}
.driverInfo .serviceHoursCount label {
    border: var(--border);
    padding: 5px 0;
    border-radius: var(--general-border-radius);
    cursor: pointer;
    text-align: center;
    width: var(--button-width);
    height: 6vh;
}
.driverInfo .Cars {
    margin: 10px 0;
    gap: 10px;
    display: flex;
    align-items: center;
    justify-content: start;
    flex-wrap: wrap;
}
.driverInfo .Cars label {
    background-color: var(--general-background-color);
    border: var(--border);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: start;
    cursor: pointer;
    min-width: 200px;
}
.driverInfo .Cars .driveCarImage img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    border-radius: var(--general-border-radius);
}
.driverInfo .Cars .driverCarInfo {
    margin-left: 5px;
}
.driverInfo .Cars label p {
    text-align: left;
    font-weight: inherit;
    margin: 0;
}
.driverInfo .Cars .addCar {
    place-items: center;
    display: flex;
    min-height: 104px;
    align-items: center;
    justify-content: center;
}
.driverInfo .Cars .addCar svg {
    width: 32px;
    fill: var(--button-color);
}
.driverInfo .driverScheduleDateTime {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.driverInfo .driverScheduleDateTime .driverScheduleDate,
.driverInfo .driverScheduleDateTime .driverScheduleTime,
.reservationBody .reservationDateTime .reservationDate,
.reservationBody .reservationDateTime .reservationTime {
    width: 100%;
    border-radius: 8px;
    padding: 0.75rem;
    outline: 0;
    border: var(--border);
    margin-top: 10px;
    cursor: pointer;
}
.bannersHeaders {
    display: grid;
    align-items: center;
    justify-content: center;
    background-color: var(--main-color);
    padding: 10px 0;
    height: 220px;
}
.bannersHeaders .bannersHeadersImage {
    width: 500px;
    height: 100px;
}
.bannersHeadersBody {
    width: 70%;
    display: grid;
    grid-template-columns: 2fr 1fr;
    margin: 20px 0;
}
.bannersHeadersBodyRight {
    display: grid;
    grid-template-rows: 2fr 1fr;
}
.bannersUl.bannersUlOne,
.bannersUlOne {
    display: grid !important;
}
.bannersHeadersBodyRight button {
    border-radius: 0 0 15px;
}
.bannersUlOne {
    grid-template-columns: 1fr !important;
}
.inService .latestOfferButton .latestOfferImage,
.inService .latestOfferImage img {
    width: 200px;
    height: 200px;
    border-radius: 25px;
}
.bannersUl {
    list-style: none !important;
    width: 100% !important;
    overflow-x: scroll !important;
    display: inline-flex !important;
    overflow-y: hidden !important;
    margin: 0;
}
.bannersUl::-webkit-scrollbar {
    display: none;
}
.bannersUl.bannersUlOne .liImage img {
    width: 500px;
    height: 100px;
    border-radius: 0;
}
.bannerOne {
    margin: 25px 0;
}
.addToWallet,
.deliveryService .addAddress,
.deliveryService .deliveryPayment,
.deliveryService .scheduleBooking,
.demandService .addAddress,
.demandService .demandPayment,
.driverService .addAddress,
.driverService .driverPayment,
.profile .addAddress,
.profile .editAddress,
.singleVendor .addAddress,
.singleVendor .cartPayment,
.singleVendor .changeSingleVendorDeliveryAddress,
.singleVendor .editAddress,
.singleVendorMeal .mealPayment,
.valet .valetPayment {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 7;
    width: 100%;
    height: 100%;
    background: var(--bac-card);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1% 10%;
}
.addToWalletBody,
.deliveryService .addAddress .addAddressMain,
.deliveryService .deliveryPayment .deliveryPaymentMain,
.deliveryService .scheduleBooking .scheduleBookingMain,
.demandService .addAddress .addAddressMain,
.demandService .demandPayment .demandPaymentMain,
.driverService .addAddress .addAddressMain,
.driverService .driverPayment .driverPaymentMain,
.profile .addAddress .addAddressMain,
.profile .editAddress .editAddressMain,
.singleVendor .addAddress .addAddressMain,
.singleVendor .cartPayment .cartPaymentMain,
.singleVendor .changeSingleVendorDeliveryAddress .changeSingleVendorDeliveryAddressMain,
.singleVendor .editAddress .editAddressMain,
.singleVendorMeal .mealPayment .mealPaymentMain,
.valet .valetPayment .valetPaymentMain {
    width: 80%;
    max-height: 100%;
    background: var(--general-background-color);
    padding: 1% 3%;
    border: 1.8px solid var(--button-color);
    border-radius: var(--general-border-radius);
    overflow-y: auto;
}
.deliveryService .addAddress .addAddressMain::-webkit-scrollbar,
.deliveryService .deliveryPayment .deliveryPaymentMain::-webkit-scrollbar,
.deliveryService .scheduleBooking .scheduleBookingMain::-webkit-scrollbar,
.demandService .addAddress .addAddressMain::-webkit-scrollbar,
.demandService .demandPayment .demandPaymentMain::-webkit-scrollbar,
.driverService .addAddress .addAddressMain::-webkit-scrollbar,
.driverService .driverPayment .driverPaymentMain::-webkit-scrollbar,
.profile .addAddress .addAddressMain::-webkit-scrollbar,
.profile .editAddress .editAddressMain::-webkit-scrollbar,
.singleVendor .addAddress .addAddressMain::-webkit-scrollbar,
.singleVendor .cartPayment .cartPaymentMain::-webkit-scrollbar,
.singleVendor .changeSingleVendorDeliveryAddress .changeSingleVendorDeliveryAddressMain::-webkit-scrollbar,
.singleVendor .editAddress .editAddressMain::-webkit-scrollbar,
.singleVendorMeal .mealPayment .mealPaymentMain::-webkit-scrollbar,
.valet .valetPayment .valetPaymentMain::-webkit-scrollbar {
    display: none;
}

.favouriteRestaurantImage,
.favouriteRestaurantImage img {
    width: fit-content !important;
    height: fit-content !important;
}
@media (max-width: 1400px) {
    .ResultBody,
    .mainBody,
    .navbar,
    .newHomeDesign {
        width: 1036px;
    }
    .newHomeDesignOffers,
    .newHomeDesignRest {
        width: 507px;
    }
    .newHomeDesignOffers .popularRestaurantButton .popularRestaurantImage,
    .newHomeDesignOffers .popularRestaurantImage img,
    .newHomeDesignRest .popularRestaurantButton .popularRestaurantImage,
    .newHomeDesignRest .popularRestaurantImage img {
        width: 230px !important;
        height: 160px !important;
    }
    .popularRestaurantName {
        padding: 15px;
        font-size: small;
        min-height: 62px;
    }
    .favRestaurantName {
        min-height: 30px;
    }
    .singleVendor {
        width: 70%;
    }
    .singleVendorMeal {
        width: 100%;
    }
    .singleVendorCart {
        width: 30%;
    }
}
@media (max-width: 1230px) {
    .ResultBody,
    .mainBody,
    .navbar,
    .newHomeDesign {
        width: 1000px;
    }
    .newHomeDesignOffers,
    .newHomeDesignRest {
        width: 489px;
    }
    .newHomeDesignOffers .popularRestaurantButton .popularRestaurantImage,
    .newHomeDesignOffers .popularRestaurantImage img,
    .newHomeDesignRest .popularRestaurantButton .popularRestaurantImage,
    .newHomeDesignRest .popularRestaurantImage img {
        width: 220px !important;
        height: 154px !important;
    }
    .popularRestaurantButton .popularRestaurantImage,
    .popularRestaurantImage img {
        width: 318px;
        height: 220px;
    }
    .vendorAdvImage {
        width: 318px;
        height: 312px;
    }
    .ResultsBodyResultsItems .MenuSectionContentItem {
        width: 318px;
    }
    .sideBarFavourite .popularRestaurantImage,
    .sideBarFavourite img {
        width: 100%;
    }
}
@media (max-width: 1199.98px) {
    .ResultBody,
    .mainBody,
    .navbar,
    .newHomeDesign {
        width: 871px;
    }
    .newHomeDesignOffers,
    .newHomeDesignRest {
        width: 425px;
    }
    .newHomeDesignOffers .popularRestaurantButton .popularRestaurantImage,
    .newHomeDesignOffers .popularRestaurantImage img,
    .newHomeDesignRest .popularRestaurantButton .popularRestaurantImage,
    .newHomeDesignRest .popularRestaurantImage img {
        width: 188px !important;
        height: 131px !important;
    }
    .favRestaurantName {
        min-height: 30px;
    }
    .popularRestaurantImage .notetwo {
        width: 45%;
    }
    .popularRestaurantButton .popularRestaurantImage,
    .popularRestaurantImage img {
        width: 275px;
        height: 190px;
    }
    .vendorAdvImage {
        width: 275px;
        height: 282px;
    }
    .ResultsBodyResultsItems .MenuSectionContentItem {
        width: 275px;
    }
    .ResultsBodyResultsItems {
        grid-template-columns: 1fr 1fr 1fr;
    }
    .buttons,
    .logo {
        width: 20%;
    }
    .search,
    .singleVendor {
        width: 60%;
    }
    .accountButtonCart,
    .accountButtonFavourite,
    .accountButtonaccount {
        display: none !important;
    }
    .accountButtonMenu {
        display: flex !important;
    }
    .singleVendorCart {
        width: 40%;
    }
    .MenuSectionContent .MenuSectionContentItem,
    .profileBody .profileBodySection,
    .sideBarFavourite .popularRestaurantImage,
    .sideBarFavourite img,
    .singleVendorMeal {
        width: 100%;
    }
    .profile .profileBody {
        padding: 2%;
    }
    .bannersHeadersBodyRight button {
        padding: 0;
    }
    .bannersHeadersBodyRight button a {
        font-size: smaller;
    }
    .deliveryService .deliveryInfo {
        padding: 20px 15%;
    }
}
@media (max-width: 991.98px) {
    .ResultBody,
    .mainBody,
    .navbar {
        width: 692px;
    }
    .newHomeDesign {
        display: flex;
        flex-wrap: wrap;
        width: 692px;
    }
    .newHomeDesignOffers,
    .newHomeDesignRest {
        width: 681px;
        margin: 5px 0;
    }
    .newHomeDesignOffers .popularRestaurantButton .popularRestaurantImage,
    .newHomeDesignOffers .popularRestaurantImage img,
    .newHomeDesignRest .popularRestaurantButton .popularRestaurantImage,
    .newHomeDesignRest .popularRestaurantImage img {
        width: 316px !important;
        height: 220px !important;
    }
    .popularRestaurantButton .popularRestaurantImage,
    .popularRestaurantImage img {
        width: 330px;
        height: 230px;
    }
    .vendorAdvImage {
        width: 330px;
        height: 322px;
    }
    .ResultsBodyResultsItems .MenuSectionContentItem {
        width: 330px;
    }
    .MenuSectionContent .MenuSectionContentItem,
    .oldOrdersBody,
    .sideBarFavourite .popularRestaurantImage,
    .sideBarFavourite img,
    .singleVendor,
    .singleVendor .changeSingleVendorDeliveryAddress .changeSingleVendorDeliveryAddressMain,
    .singleVendorReservation {
        width: 100%;
    }
    .singleVendorCart {
        position: fixed;
        z-index: 5;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        align-items: center;
        justify-content: center;
        background: var(--bac-card);
        display: none;
    }
    .singleVendorReservationCart {
        width: 100%;
        display: block;
        position: relative;
        background: var(--background);
    }
    .oldOrdersDetails,
    .singleVendorMenuFooter {
        width: 100%;
        background-color: var(--general-background-color);
    }
    .singleVendorReservation .singleVendorHeader,
    .singleVendorReservation .singleVendorHeader .singleVendorInformation,
    .singleVendorReservationCart .reservationBody {
        height: fit-content;
    }
    .ResultsBodyResultsItems,
    .paymentMethods .paymentMethodCards {
        grid-template-columns: 1fr 1fr 1fr;
    }
    .oldOrdersDetails {
        position: fixed;
        top: 12vh;
        right: 0;
        height: 88vh;
    }
    .oldOrdersDetailsHeadClose svg {
        width: var(--svg-size);
        fill: var(--svg-color);
        cursor: pointer;
    }
    .singleVendorInformationContentTitle {
        font-size: xx-large;
    }
    .singleVendorMenu .VendorMenuItemsSection {
        width: 100%;
        height: 48vh;
    }
    .singleVendorMenu .VendorMenuCartSection {
        display: none;
    }
    .singleVendorMenu .VendorMenuCartSection.activeCart {
        display: flex;
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 1;
    }
    .TitleSectionTitleCloseIcon {
        display: block;
    }
    .singleVendorMenuFooter {
        height: 10vh;
        position: sticky;
        bottom: 0;
        border-top: 1px solid var(--border-color-rgb);
        box-shadow: 0 3px 5px var(--background-color), 0 -3px 5px var(--background-color);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .singleVendorMenuFooter button {
        width: 90%;
        border-radius: 5px;
        background-color: var(--button-color);
        color: var(--general-background-color);
        border: 0;
        height: 75%;
    }
    .singleVendorButtonContent {
        display: flex;
        align-items: center;
        justify-content: space-around;
        letter-spacing: 0;
    }
    .singleVendorButtonContent .buttonViewCart {
        text-transform: capitalize;
    }
    .singleVendorButtonContent .buttonItemsCountSpan {
        background-color: var(--button-color);
        border-radius: 2px;
        width: 25px;
        height: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--general-background-color);
    }
    .VendorMenuCartSection .VendorMenuCart {
        max-width: 100%;
        width: 100%;
        height: 100%;
    }
    .singleVendor .cartPayment {
        padding: 0;
    }
    .singleVendorMeal .dayMeals .dayPlans .dayPlanMeals {
        grid-template-columns: 1fr 1fr;
    }
    .singleVendorMeal .days,
    .singleVendorMeal .types {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
    .deliveryService .deliveryServiceVehicles,
    .demandService .demandServiceVehicles,
    .driverService .driverServiceTypes {
        grid-template-columns: 1fr;
    }
    .deliveryService .deliveryServiceVehicles label,
    .demandService .demandServiceVehicles label,
    .driverService .driverServiceTypes label {
        min-height: 15vh;
    }
}
@media (max-width: 767.98px) {
    .ResultBody,
    .mainBody,
    .mainBodyMainPage,
    .navbar,
    .newHomeDesign {
        width: 575px;
    }
    .newHomeDesignOffers,
    .newHomeDesignRest {
        width: 565px;
    }
    .mainBodyMainPage .latestOfferButton .latestOfferImage,
    .mainBodyMainPage .latestOfferImage img {
        width: 563px;
    }
    .mainBodyMainPage .OneOfferButton .OneOfferImage,
    .mainBodyMainPage .OneOfferImage img {
        width: 563px;
        height: 146px;
    }
    .popularRestaurantButton .popularRestaurantImage,
    .popularRestaurantImage img {
        width: 270px;
        height: 188px;
    }
    .vendorAdvImage {
        width: 270px;
        height: 280px;
    }
    .ResultsBodyResultsItems .MenuSectionContentItem {
        width: 270px;
    }
    .newHomeDesignOffers .popularRestaurantButton .popularRestaurantImage,
    .newHomeDesignOffers .popularRestaurantImage img,
    .newHomeDesignRest .popularRestaurantButton .popularRestaurantImage,
    .newHomeDesignRest .popularRestaurantImage img {
        width: 258px !important;
        height: 180px !important;
    }
    .ResultsBodyResultsItems,
    .profileBodyCardsSectionBody,
    .profileBodyCarsSectionBody,
    .singleVendorMeal .dayMeals .dayPlans .dayPlanMeals,
    .walletDetailsBody {
        grid-template-columns: 1fr;
    }
    .filterPupupButton {
        width: 20%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .filterButton {
        display: flex;
        padding: 10px !important;
    }
    .searchSection {
        width: 95%;
    }
    .searchForm input {
        padding-left: 15% !important;
    }
    .buttons {
        width: 20%;
    }
    .MenuSectionContent .MenuSectionContentItem,
    .addToWalletBody,
    .deliveryService .addAddress .addAddressMain,
    .deliveryService .deliveryPayment .deliveryPaymentMain,
    .deliveryService .scheduleBooking .scheduleBookingMain,
    .demandService .addAddress .addAddressMain,
    .demandService .demandPayment .demandPaymentMain,
    .driverService .addAddress .addAddressMain,
    .driverService .driverPayment .driverPaymentMain,
    .ecommerceBody,
    .mealPayment .mealPayment .mealPaymentMain,
    .popupBody .filters,
    .profileBody .profileBodyCPSection .CPForm .form_input,
    .profileBody .profileBodyCPSection .CPForm label,
    .profileBody .profileBodyInfSection .profileForm .flag-icon-div,
    .profileBody .profileBodyInfSection .profileForm .form_input,
    .profileBody .profileBodyInfSection .profileForm label,
    .profileBodyAddress .profileBodyAddressDetails,
    .sideBarFavourite .popularRestaurantImage,
    .sideBarFavourite img,
    .singleVendor .addAddress .addAddressMain,
    .singleVendor .cartPayment .cartPaymentMain,
    .singleVendor .editAddress .editAddressMain,
    .singleVendorInformationImg img,
    .valet .valetPayment .valetPaymentMain,
    .vendorMenu {
        width: 100%;
    }
    .profileBodyAddress .profileBodyAddressMap {
        width: 100%;
        height: 45vh;
    }
    .ResultsBodyResults,
    .addToWalletCards,
    .bodyServices .bodyServicesUl,
    .paymentMethods .paymentMethodCards {
        grid-template-columns: 1fr 1fr;
    }
    .SubscriptionRepetations input,
    .itemPopup .popup,
    .profile .addAddress .addAddressMain,
    .profile .editAddress .editAddressMain,
    .singleVendorMeal .headerImage img {
        width: 90%;
    }
    .title {
        font-size: larger;
    }
    .singleVendor .addAddress,
    .singleVendor .changeSingleVendorDeliveryAddress,
    .singleVendor .editAddress {
        padding: 0;
    }
    .bodyServices,
    .filters {
        width: 220px;
    }
    .profileHeaderButtons ul {
        display: none;
        background: var(--general-background-color);
        position: absolute;
        top: 10vh;
        width: 170px;
        align-items: center;
        justify-content: center;
        padding: 10px;
        border-radius: var(--general-border-radius);
        left: 50%;
        transform: translateX(-50%);
    }
    .profileHeaderButtons ul li {
        display: flex;
        align-items: center;
        justify-content: center;
        border: var(--border);
        background-color: var(--general-background-color);
        border-radius: var(--general-border-radius);
        height: 6vh;
        width: var(--button-width);
        letter-spacing: normal;
        margin: 3% auto;
        font-weight: 600;
    }
    .profileHeaderButtons ul li:hover {
        border: 1.8px solid var(--button-color);
    }
    .activeProfileLi {
        border: 1.8px solid var(--button-color) !important;
    }
    .profile .profileHeader {
        padding: 0 50px;
    }
    .profileHeaderButtons .profileHeaderButtonsMenu {
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        background-color: var(--button-color);
        border-radius: var(--general-border-radius);
        height: 6vh;
        width: auto;
        letter-spacing: normal;
        margin: auto;
    }
    .mainBody .filters {
        display: none;
    }
    .popupBody {
        overflow: auto;
    }
    .popupBody::-webkit-scrollbar {
        display: none;
    }
    .filter .arrow {
        width: 4%;
    }
    .ulFilter {
        margin-left: 0 !important;
    }
    .liFilter {
        padding: 1% 3%;
    }
    .ecommerceCoreBody {
        width: calc(100% - 220px);
    }
    .gm-style-mtc button,
    .gmnoprint.gm-bundled-control.gm-bundled-control-on-bottom .gm-svpc {
        display: none !important;
    }
    input[id^="pac-input"] {
        left: 20px !important;
        width: 70%;
    }
    .singleVendorInformation {
        display: block;
        padding-right: 50px;
    }
    .singleVendorInformationImg {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .singleVendorHeader,
    .singleVendorInformation {
        height: 70vh;
    }
    .deliveryService .addAddress,
    .deliveryService .deliveryPayment,
    .deliveryService .scheduleBooking,
    .demandService .addAddress,
    .demandService .demandPayment,
    .driverService .addAddress,
    .driverService .driverPayment,
    .mealPayment .mealPayment,
    .valet .valetPayment {
        padding: 1%;
    }
    .deliveryService .deliveryServiceVehicles,
    .demandService .demandServiceVehicles {
        grid-template-columns: 100%;
        grid-gap: 2%;
        padding: 5%;
    }
    .deliveryService .deliveryInfo,
    .demandService .demandInfo,
    .driverService .driverInfo {
        padding: 20px 5%;
    }
    .deliveryService .deliveryInfo .deliveryAddress {
        height: 70px;
    }
    .reservationBody,
    .valet .valetBody {
        padding: 50px 5%;
    }
    .driverService .driverServiceTypes {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr;
    }
    .profileBodyWalletControlAdd,
    .walletBallanceInput {
        width: 80%;
    }
}
@media (max-width: 575.98px) {
    .buttons,
    .filterButton,
    .logo {
        width: 40%;
    }
    .profile .addAddress .addAddressMain,
    .profile .editAddress .editAddressMain,
    .profileBody .profileBodyCPSection .CPForm .form_input,
    .profileBody .profileBodyCPSection .CPForm label,
    .profileBody .profileBodyInfSection .profileForm .flag-icon-div,
    .profileBody .profileBodyInfSection .profileForm .form_input,
    .profileBody .profileBodyInfSection .profileForm label,
    .profileBodyInfSection .profileForm .genderInput,
    .search,
    .searchSection,
    .sideBarFavourite .popularRestaurantImage,
    .sideBarFavourite img,
    .valet .valetBody .valetSubmit button {
        width: 100%;
    }
    .search {
        z-index: 12;
        position: absolute;
        left: 0;
        display: none;
    }
    .navbar,
    .seachIconeSmall {
        position: relative;
    }
    .mainBodyMainPage,
    .newHomeDesign,
    .newHomeDesignOffers,
    .newHomeDesignRest {
        width: 343px;
    }
    .ResultBody,
    .mainBody,
    .mainBodyMainPage,
    .navbar {
        width: 330px;
    }
    .newHomeDesignOffers .mainUL,
    .newHomeDesignRest .mainUL {
        display: grid;
        grid-template-columns: 1fr;
        margin: 0 !important;
    }
    .mainBodyMainPage .latestOfferButton .latestOfferImage,
    .mainBodyMainPage .latestOfferImage img {
        width: 331px;
        height: 187px;
    }
    .mainBodyMainPage .OneOfferButton .OneOfferImage,
    .mainBodyMainPage .OneOfferImage img {
        width: 331px;
        height: 86px;
    }
    .popularRestaurantButton .popularRestaurantImage,
    .popularRestaurantImage img {
        width: 300px;
        height: 210px;
    }
    .vendorAdvImage {
        width: 300px;
        height: 302px;
    }
    .ResultsBodyResultsItems .MenuSectionContentItem {
        width: 300px;
    }
    .newHomeDesignOffers .popularRestaurantButton .popularRestaurantImage,
    .newHomeDesignOffers .popularRestaurantImage img,
    .newHomeDesignRest .popularRestaurantButton .popularRestaurantImage,
    .newHomeDesignRest .popularRestaurantImage img {
        width: 311px !important;
        height: 216px !important;
    }
    .newHomeDesign h3 {
        font-size: small;
    }
    .seachIconeSmall {
        display: flex;
        align-items: center;
        background: var(--general-background-color);
        height: 6vh;
        width: 47px;
        justify-content: center;
        border: var(--border);
        border-radius: var(--general-border-radius);
        margin: 0;
    }
    .searchIcon {
        width: var(--svg-size);
        fill: var(--svg-color);
        position: absolute;
        cursor: pointer;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .cartTips .cartTipsValues .radio-label .customTipsInput {
        padding: 0;
    }
    .searchResult {
        position: fixed;
        left: 0;
    }
    .ResultsBodyResults,
    .bodyServices .bodyServicesUl,
    .paymentMethods .paymentMethodCards {
        grid-template-columns: 1fr;
    }
    .bodyServices {
        width: 120px;
    }
    .ecommerceCoreBody {
        width: calc(100% - 120px);
    }
    .latestOfferButton .latestOfferImage,
    .latestOfferImage img {
        width: 200px;
        height: 112px;
    }
    .bannersHeadersBody {
        width: 90%;
        gap: 5%;
    }
    .scroller {
        display: none;
    }
    .servicesBarContainerUL {
        border: none !important;
    }
    .bannersHeaders {
        height: 120px;
    }
    .bannersHeaders .bannersHeadersImage,
    .bannersUl.bannersUlOne .liImage img {
        width: 250px;
        height: 50px;
    }
    .ulList {
        margin-left: 5px !important;
    }
    .bannersUl {
        margin-left: 0 !important;
    }
    .addCardMain,
    .downloadAppMain {
        min-width: 90%;
    }
    .profileBodyInfSection .profileForm .genderInput {
        margin: 0;
    }
    .profile .addAddress,
    .profile .editAddress,
    .profile .profileHeader {
        padding: 1%;
    }
    .profileBodyAddressMap .changeAddressControl {
        margin: 5px 0;
    }
    .profileHeader .profileInfo .updateimage {
        padding: 5px 10px;
    }
    .singleVendorHeader {
        height: 75vh;
    }
    .scheduleBookingMain .scheduleBookingBody .deliveryDateTime,
    .scheduleBookingMain .scheduleBookingBody .deliverySubmit {
        width: 80%;
    }
    .itemPopup .popup {
        width: 100%;
        height: 100%;
    }
    .WalletCards,
    .singleVendorMeal .days,
    .singleVendorMeal .types {
        grid-template-columns: 1fr 1fr;
    }
    .VechiclesSVG {
        display: grid !important;
        width: 100%;
    }
    .VechiclesSVGInfoUpRight {
        font-size: smaller;
    }
    .VechiclesSVGInfo {
        margin: 0;
    }
    .valet .valetBody .VechiclesSVG {
        padding: 10px;
    }
    .VechiclesSVGHead {
        margin: 10px;
    }
}
