:root {
  --border-color-rgb: rgba(0, 0, 0, 0.08);
  --box-shadow: #e8ebeb;
  --icons-color: #abadad;
  --text-color: #2e3333;
  /* --main-color: #6dcff6; */
  --main-color: #94e6ff;
  --main-color-hover: #c0effd;
  --second-main-color: #7ee1ff;
  --third-main-color: #72deff;
  --button-color: #f47b56;
  /* --button-color: #f37021; */
  --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;
  
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 30vh; /* Adjusts the scroll to stop before the header */
}

* {
  font-family: 'Roboto' !important;
}


.joinchat {
  display: none !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  color: var(--text-color);
}

a {
  color: var(--button-color);
}

a:hover,
a:focus {
  color: var(--button-color-hover);
}

a:focus {
  outline: 0;
}

img.wp-smiley, img.emoji {
  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: none !important;
  padding: 0 !important;
}

button {
  text-transform: capitalize;
  font-size: 15px;
}

button:focus,
.menu-toggle:hover,
button:hover,
.ast-button:hover,
.ast-custom-button:hover .button:hover,
.ast-custom-button:hover,
input[type="reset"]:hover,
input[type="reset"]:focus,
input#submit:hover,
input#submit:focus,
input[type="button"]:hover,
input[type="button"]:focus,
input[type="submit"]:hover,
input[type="submit"]:focus {
  background-color: var(--main-color);
  border-color: var(--main-color);
}

input[type="radio"]:checked {
  border-color: var(--button-color);
  background-color: var(--button-color);
}

input[type="radio"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid var(--button-color);
  border-radius: 50%;
  outline: none;
  cursor: pointer;
  position: relative;
}

input[type="radio"]:checked::before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  background-color: var(--button-color);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid var(--button-color);
  border-radius: 4px;
  outline: none;
  cursor: pointer;
  position: relative;
}

input[type="checkbox"]:checked::before {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  outline: none;
  border: 2px solid var(--button-color);
  background-color: var(--button-color);
  border-radius: 2px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

input[type="radio"]:checked,
input[type="checkbox"]:checked,
input[type="checkbox"]:hover:checked,
input[type="checkbox"]:focus:checked,
input[type="range"]::-webkit-slider-thumb {
  border-color: var(--button-color);
  background-color: var(--button-color);
}

/* general functions */

.VendorMenuItemsSection {
  scroll-behavior: smooth;
}

.active {
  display: block !important;
}

.activeFlex {
  display: flex !important;
}

.inactive {
  display: none !important;
}

.warning {
  border-color: var(--warning-color) !important;
}

.accept {
  border-color: var(--accept-color) !important;
}

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

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

.Requested,
.Preparing {
  color: var(--button-color) !important;
}

.Cancelled {
  color: var(--warning-color) !important;
}

.Delivered {
  color: var(--accept-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;
}

/* end general functions */

/* toaster */

.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;
  /* background: #08d518; */
  min-width: 300px;
  opacity: 0;
}

.ToastSVG {
  display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      height: 100%;
      border-radius: 8px 0 0 8px;
}

.warningToast {
  background: var(--warning-color);
}

.successToast {
  background: #08d518;
}

.ToastSVG svg {
  width: var(--svg-size);
  fill: var(--general-background-color);
}

.toastInfo {
  padding: 0 20px;
  line-height: 23px;
}

.toastInfo p {
  color: var(--general-background-color);
}

.toast-title {
  margin: 0;
    font-weight: 800;
}

.toast-message {
  margin: 0;
}

/* .toast {
  display: flex;
  align-items: center;
  background-color: #f44336;
  color: white;
  padding: 10px 15px;
  border-radius: 5px;
  min-width: 250px;
  position: relative;
  margin-top: 10px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
  animation: fadeIn 0.3s ease-in-out, fadeOut 0.3s ease-in-out 3s forwards;
}

.toast i {
  font-size: 20px;
  margin-right: 10px;
}

.toast .toast-title {
  font-weight: bold;
  margin-right: 10px;
}

.toast .close-btn {
  position: absolute;
  right: 10px;
  cursor: pointer;
  font-size: 18px;
} */

/* end toast */

/* pages */

.pages {
  width: 100%;
  min-height: 100vh;
  background-color: var(--general-background-color);
  color: var(--text-color);
}

.Processing {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: var(--dark-background);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 25;
}


.orderProcessing .orderProcessingOutside {
  position: relative;
}

.orderProcessing .orderProcessingInside::before {
    content: "";
    position: absolute;
    top: -5px;
    left: -5px;
    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);
    border-radius: var(--general-border-radius) 0 0 0;
    z-index: -1;
}

.orderProcessing .orderProcessingInside::after {
    content: "";
    position: absolute;
    bottom: -5px;
    right: -5px;
    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);
    border-radius: 0 0 var(--general-border-radius) 0;
    z-index: -1;
}

.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;
}

.orderProcessing .orderProcessingInside .loadingSpan {
  font-weight: 900;
  font-size: 50px;
  line-height: normal;
  color: var(--button-color);
  display: inline;
  vertical-align: baseline;
  line-height: 1px;
}

/* login required */
.loginRequired {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: var(--bac-card);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.loginRequiredMain {
  background: var(--general-background-color);
  padding: 25px;
  border-radius: var(--general-border-radius);
}

.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 {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.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;
}

.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);
}

.loginRequiredLogin {
  background-color: var(--main-color);
  color: var(--general-background-color);
}

.loginRequiredLogin a {
  color: var(--general-background-color);
}

/* end login required */

/* download app */
.downloadApp {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: var(--bac-card);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 11;
}

.downloadAppMain {
  background: var(--general-background-color);
  padding: 25px;
  border-radius: var(--general-border-radius);
  width: 510px;
}

.downloadAppMain 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;
}


.downloadAppButtons {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 5%;
}

.downloadAppButtons 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 button:hover,
.downloadAppButtons button:focus {
  border: 1.8px solid var(--general-background-color);
  background: var(--button-color);
}

.downloadAppButtons .downloadAppBack {
  background-color: var(--general-background-color);
  color: var(--button-color);
  border: 1.8px solid var(--button-color);
  border-radius: var(--general-border-radius);
}

.downloadAppButtons .downloadAppBack:hover,
.downloadAppButtons .downloadAppBack:focus {
  background-color: var(--general-background-color);
  color: var(--button-color);
  border: 1.8px solid var(--button-color);
}

.downloadAppStore {
  background-color: var(--main-color);
  color: var(--general-background-color);
}

.downloadAppStore a {
  color: var(--general-background-color);
}

/* end download app */


/* services details */

.openserviceDetailsDivDiv {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0;
}

.openserviceDetailsDiv {
  width: var(--svg-size);
  fill: var(--svg-color);
  cursor: pointer;
}

.serviceDetailsDiv {
  position: fixed;
  z-index: 4;
  background-color: var(--bac-card);
  -ms-overflow-style: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 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 {
  position: sticky;
  padding: 10px 20px;
  background-color: var(--general-background-color);
  top: 0;
}

.serviceDetailsDivHeader h3 {
  color: var(--button-color);
  font-size: x-large;
  font-weight: 700;
  border-bottom: 1.8px solid var(--button-color);
  width: fit-content;
}

.serviceDetailsDivBody {
  padding: 20px;
}

.serviceDetailsDivBody 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;
}

.serviceDetailsDivBody .rateBasicInfo 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 {
  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;
}

.serviceDetailsDiv button {
  border-radius: var(--general-border-radius);
  color: var(--general-background-color);
  width: var(--button-width);
  height: 6vh;
  letter-spacing: normal;
}

.serviceDetailsDiv button:focus,
.serviceDetailsDiv button:hover {
  background-color: var(--button-color);
}

/* end services details */

/* add rate */

.serviceRateDetailsDivHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.serviceRateDetailsDivHeader svg {
  width: var(--svg-size);
  fill: var(--svg-color);
  cursor: pointer;
}

.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;
}

.serviceRateDetailsDiv input[type="radio"] {
  display: none;
}

.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;
}

.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;
}

.vendro_rate {
  display: flex;
      align-items: center;
      justify-content: space-around;
      margin-bottom: 10px;
}

.vendro_rate_header {
  margin-top: 12px;
}

.serviceRateDetailsDiv .serviceDetailsDivFooter {
  border: none;
}

/* end add rate */


/* add card */
.addCard {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: var(--bac-card);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 12;
}

.addCardMain {
  background: var(--general-background-color);
  padding: 25px;
  border-radius: var(--general-border-radius);
  width: 510px;
  border: var(--border);
}

.addCardMain .addCardTitle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.addCardMain .addCardCloseIconDiv {
  width: 3%;
}

.addCardMain .addCardCloseIconDiv .addCardCloseIcon {
  fill: var(--button-color);
  cursor: pointer;
  width: var(--svg-size);
}

.addCardMain label {
  width: 100%;
}

.addCardMain .form_input {
  width: 100%;
  border-radius: 5px;
  background: var(--general-background-color);
  padding: 0.75rem;
  outline: 0;
  border: var(--border);
}

.addCardMain .form_input:focus {
  border: var(--border);
}

.addCardMain .ExpiryCVV {
  width: 100%;
  display: grid;
  grid-template-columns: 68% 30%;
  grid-template-rows: 30% 44.8px;
  column-gap: 2%;
  row-gap: 3px;
}

.addCardMain .submitAddCard {
  width: 100%;
  border-radius: var(--general-border-radius);
  background-color: var(--button-color);
  letter-spacing: normal;
}

.addCardMain .submitAddCard:hover,
.addCardMain .submitAddCard:focus {
  background-color: var(--button-color);
  color: var(--general-background-color);
}

/* Romove arrow from input number */
/* Chrome, Safari, Edge, Opera */
.addCardMain .number::-webkit-outer-spin-button,
.addCardMain .number::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
.addCardMain input[type="number"] {
  appearance: textfield; /* Standardized property */
  -webkit-appearance: textfield; /* For Safari and Chrome */
  -moz-appearance: textfield; /* For Firefox */
  appearance: textfield; /* Fallback */
}

.addCardMain .SaveCard {
  width: 100%;
  background-color: var(--general-background-color);
  padding: 0.75rem;
  padding-left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44.8px;
  margin-top: 10px;
}

.addCardMain .warningCardText {
  text-align: center;
}

.paymentChallangeDiv {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: var(--background-opacity-color);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 13;
}

.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 */

    .authentication {
      position: fixed;
      width: 100%;
      height: 100%;
      background: #fff;
      top: 0;
      left: 0;
      z-index: 99;
    }

  /* end authentication */
/* end add card */

/* end pages */

/* main  */

.main {
  width: 100%;
  min-height: 100vh;
}

/* end main  */

/* navbar  */

.mainNavbar {
  display: flex;
      align-items: center;
      justify-content: center;
      background: var(--main-color);
      position: sticky;
      top: 0;
      width: 100%;
      z-index: 3;
}

.navbar {
  /* background-color: var(--main-color); */
  display: flex;
      align-items: center;
      justify-content: space-between;
      height: 12vh;
      border-bottom: 1px solid var(--border-color);
      width: 1381px;
}

/* logo */
.logo {
  width: 20%;
  display: flex;
  align-items: center;
  justify-content: start;
  height: 100%;
}

/* .logo img {
  width: 180px;
  height: 60px;
  object-fit: contain;
} */
/* end logo */

/* search  */
.search {
  width: 40%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.filterPupupButton {
  display: none;
}

.searchSection {
  width: 100%;
  position: relative;
}

.searchForm {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: stretch;
  margin: 0;
}

.custom-dropdown {
  width: 106px;
  /* padding: .75em; */
  /* padding-left: 1.25em; */
  /* border-radius: 20px; */
  background-color: var(--general-background-color);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  position: relative;
  cursor: pointer;
  height: 6vh;
  border: 0;
  border-radius: 0;
  border-radius: 8px 0 0 8px;
}

.custom-dropdown:focus-visible,
.custom-dropdown:focus {
  border: 0;
}

/* Dropdown Arrow (Custom Icon) */
.custom-dropdown-wrapper {
  position: relative;
  display: inline-block;
  border-right: 1.8px solid var(--border-color);
}

.custom-dropdown-wrapper::after {
  content: "▼"; /* Unicode for down arrow */
  position: absolute;
  top: 50%;
  right: .75em;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--button-color); /* Same as border color */
}

.searchForm input {
  background-color: var(--general-background-color);
  height: 6vh;
  border: 0;
  border-radius: 0 8px 8px 0;
}

.searchForm input:focus {
  border: 0;
}
.seachIconeSmall {
  display: none;
}

/* .searchIcon {
  width: 2.5%;
  position: absolute;
  fill: var(--icons-color);
} */

.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%;
  /* min-height: 100vh;
  max-height: 100vh; */
  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;
  /* align-items: center; */
  /* justify-content: center; */
  min-height: 35vh;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: var(--general-background-color);
  grid-row-gap: 5px;
  /* margin-top: 10px; */
  /* margin-bottom: 10px; */
  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);
  background: var(--second-main-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 {
  width: 100%;
  height: 100%;
}


.ResultsBodyResults {
  position: relative;
}

.ResultsBodyResults .ulList{
  display: flex
  ;
      align-items: center;
      justify-content: space-evenly;
      flex-wrap: wrap;
}


.ResultsBodyResults a:hover,
.ResultsBodyResults a:focus {
  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;
  padding-bottom: 15px;
  min-height: 115px;
}
/* 
.ResultsBodyResults a p {
  border-bottom: 1px solid var(--border-color-rgb);
  margin: 0;
  padding: 10px;
} */

.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 {
  text-align: center;
}

.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 {
  /* width: 30%; */
  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:hover,
.ResultsBodyResultsItems .MenuSectionContentItem:focus {
  border-color: var(--button-color);
}

.ResultsBodyResultsItems .MenuSectionContentItem a {
  display: flex
  ;
      align-items: center;
      justify-content: start;
}

.searchItemLink {
  width: 100%;
  box-shadow: 0 1px 4px var(--background-color);
  border-radius: 10px;
  background-color: var(--background-color);
  text-align: center;
}

.searchitemImage {
  width: 100%;
}

.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;
}

.searchitemPrice {
  font-size: small;
}

.filterButton {
  display: none; 
  align-items: center;
  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);
}

.filterButton:focus {
  background-color: var(--general-background-color);
}

.filterButton svg {
  fill: var(--general-background-color);
  width: 14px;
}

/* end search  */

/* buttons */

.buttons {
  width: 40%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: relative;
}

.buttons .accountButton {
  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 {
  width: 80%;
  color: var(--text-color);
}

.buttons .accountButton.accountButtonaccount {
  margin-right: 0;
}

.buttons .accountButton.buttonWithoutWidth {
  width: var(--small-button-width);
}

.buttons .accountButton:hover,
.buttons .accountButton:focus {
  border: var(--button-border-hover-style);
  /* background-color: var(--button-color); */
}

.buttons .accountButton svg {
  fill: var(--svg-color);
  width: var(--svg-size);
}

.filterButton svg {
  stroke: var(--button-color);
  stroke-width: 50px;
  fill: transparent !important;
}

.accountButtonMenu {
  display: none !important;
}

.filterButton {
  position: relative;
}

/* end buttons */

/* end navbar  */

/* services bar */

.servicesBar {
  background-color: var(--general-background-color);
  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;
}


.servicesBarContainer {
  position: relative;
}

.servicesBarContainer .scroller {
  top: 50%;
    transform: translate(0, -50%);
}

.servicesBarContainerUL {
  margin: 0px 19px;
  /* border-left: 1.8px solid var(--button-color); */
  /* border-right: 1.8px solid var(--button-color); */
  padding: 2px 10px;
}

.scrollerNextServicesBar {
  right: 0;
}

.scrollerPrevServicesBar {
  left: 0;
}

.servicesBarButton {
  background: transparent;
  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;
}

.servicesBarButton:hover,
.servicesBarButton:focus {
  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;
}

/* end services bar */


/* main body */
.mainBody {
  width: 1381px;
  min-height: 70vh;
  display: flex;
  margin: auto;
  flex-wrap: wrap;
}

.ResultBody {
  width: 1381px;
  margin: auto;
}

.newHomeDesign {
  display: flex;
  flex-wrap: wrap;
  width: 1381px;
  margin-top: 50px;
}

.newHomeDesign h3 {
  font-size: x-large;
}

.newHomeDesignOffers {
  width: 680px;
  background: var(--background);
  padding: 10px;
  border-radius: 8px;
  margin-right: 10.5px;
}


.newHomeDesignRest {
  width: 680px;
  background: var(--background);
  padding: 10px;
  border-radius: 8px;
  margin-left: 10.5px;
}

.newHomeDesignOffers .mainUL ,
.newHomeDesignRest .mainUL {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.newHomeDesignOffers .popularRestaurantButton .popularRestaurantImage, 
.newHomeDesignRest .popularRestaurantButton .popularRestaurantImage, 
.newHomeDesignOffers .popularRestaurantImage img,
.newHomeDesignRest .popularRestaurantImage img {
  width: 318px !important;
  height: 220px !important;
}


/* vendor adv */
.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 ease;
}

.vendorAdvHideDiv {
  position: absolute;
  top: 50%;
  /* left: 0; */
  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;
  /* text-align: center; */
  flex-wrap: wrap;
}

.vendorAdvHideDivImage {
  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;
}

.insideVendorAdvButtonLi {
  position: relative;  
}

.Recommended {
  position: absolute;
  top: 20px;
  left: 0px;
  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);
}

/* end vendor adv */

/* body sidebar */
.bodyServices {
  width: 330px;
  height: 88vh;
  position: sticky;
  overflow: auto;
  top: 12vh;
  -ms-overflow-style: none;
  scrollbar-width: none;
  padding: 10px;
  background-color: var(--main-color);
}

.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 {
  width: 100%;
  height: 100%;
}

.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;
}
/* end body sidebar */
/* end main body */

/* Menu Button */
.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%;
}

.menuButtonSidebarHeader .SidebarHeaderCloseIcon 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;
      /* margin-right: 2%; */
      width: var(--button-width);
      letter-spacing: normal;
      margin: 3% auto;
}

.menuButtonSidebarBody .accountButton:focus,
.menuButtonSidebarBody .accountButton:hover {
  border-color: var(--button-color);
}

.menuButtonSidebarBody .accountButton svg {
  width: var(--svg-size);
  fill: var(--svg-color);
}

.menuButtonSidebarBody .accountButton a {
  width: 80%;
  color: var(--text-color);
}

/* Favourite sidebar */
.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;
}

.favouriteButton .liList,
.favouriteButton .liButton,
.favouriteButton .liImage,
.favouriteButton img {
  width: 100%;
}

.favouriteButton .popularRestaurantImage .AddResToFavourite svg {
  fill: var(--general-background-color);
}

/* end Favourite sidebar */

/* Account sidebar */

.accountInformation {
  background: var(--general-background-color);
  position: absolute;
  right: -12px;
  top: 7vh;
  display: none;
  width: 170px;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border-radius: var(--general-border-radius);
}

.accountInformation::before {
  content: "";
  position: absolute;
  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);
}

.menuInformation {
  background: var(--general-background-color);
  position: absolute;
  right: -12px;
  top: 7vh;
  display: none;
  width: 170px;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border-radius: var(--general-border-radius);
  z-index: 13;
}

.menuInformation::before {
  content: "";
  position: absolute;
  top: -1vh;
  right: 37px;
  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);
}

.main .menuButton.accountButtonSidebar {
  z-index: 5;
}

.SidebarHeaderLogo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.SidebarHeaderLogo svg {
  width: var(--svg-size);
  fill: var(--svg-color);
  margin-right: 15px;
}

.menuButtonSidebarHeader .SidebarHeaderCloseIcon {
  display: flex;
      align-items: center;
      justify-content: center;
}

.SidebarHeaderLogo h4 {
  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;
}

.accountButtonSidebar .SidebarHeaderLogo .customerInformation p {
  margin: 0;
}
/* Account sidebar */

/* end Menu Button */

/* profile control */

.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 {
  position: relative;
}

.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 p {
  margin: 0;
}


.profileHeader .profileInfo .updateimage {
  border-radius: 5px;
  color: var(--general-background-color);
  background: var(--main-color);
}

.profileHeader .profileInfo .updateimage:hover,
.profileHeader .profileInfo .updateimage:focus {
  background: var(--second-main-color);
}

.EditProfilePicture {
  background: var(--bac-card);
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: 6;
  top: 0;
  left: 0;
}

.EditProfilePicture svg {
  width: var(--svg-size);
  fill: var(--svg-color);
  cursor: pointer;
}

.EditProfilePictureDiv {
  background: var(--general-background-color);
  margin: auto;
  margin-top: 35px;
  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;
}

.EditProfilePictureHeader p {
  margin: 0;
}

.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 .EditProfilePictureFooterEdit .svgDiv,
.EditProfilePictureFooter .EditProfilePictureFooterDelete .svgDiv{
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.EditProfilePictureFooter .EditProfilePictureFooterEdit p, 
.EditProfilePictureFooter .EditProfilePictureFooterDelete p {
  margin: 0;
}



.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 {
  color: #000;
}

.profileHeaderButtons ul li:hover {
  border-bottom: 1.8px solid var(--button-color);
}

.profileHeaderButtons ul li:hover a {
  font-weight: 600;
}

.activeProfileLi {
  border-bottom: 1.8px solid var(--button-color) !important;
}

.activeProfileLi a {
  font-weight: 600;
}

.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%;
}

.profileHeaderButtons .profileHeaderButtonsMenu svg {
  width: var(--svg-size);
  fill: var(--general-background-color);
}

.profile .profileBody {
  background-color: var(--background);
  width: 100%;
  height: fit-content;
  padding: 2% 10% 5% 10%;
  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 .addNewAddressButton {
  width: 10%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 0;
  height: 75px;
}

.profileBodySectionTitle .addNewAddressButton svg {
  fill: var(--svg-color);
  width: var(--svg-size);
}

.profileBody .profileBodyInfSection .profileForm,
.profileBody .profileBodyCPSection .CPForm {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  padding: 0 15px;
}

.profileBody .profileBodyInfSection .profileForm label,
.profileBody .profileBodyCPSection .CPForm label {
  width: 30%;
  margin-top: 10px;
  height: 44.8px;
  display: flex;
  align-items: center;
}

.profileBody .profileBodyInfSection .profileForm .form_input,
.profileBody .profileBodyCPSection .CPForm .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;
}

.profileBodyInfSection .profileForm .flag-icon-div img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.profileBodyInfSection .profileForm .flag-icon-div span {
  padding-left: 0.75rem;
}

.profileBodyInfSection .profileForm .flag-icon-div .form_input {
  padding-top: 0;
  padding-bottom: 0;
  border: 0;
  margin-top: 0;
}

.profileBodyInfSection .profileForm p,
.profileBodyCPSection .CPForm p {
  width: 100%;
  margin-top: 10px;
  margin-bottom: 0;
  height: 44.8px;
}

.profileBodyInfSection .profileForm #PUMessage,
.profileBodyCPSection .CPForm #CPMessage {
  text-align: center;
}

.profileBodyCPSection .CPForm ul {
  width: 100%;
}

.profileForm .PODDiv {
  width: 100%;
  background-color: var(--general-background-color);
  padding: 0.75rem;
  padding-left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44.8px;
  margin-top: 10px;
}

.profileForm .PODDiv .PODInput,
.demandInfo .NoContactDiv .NoContactInput,
.demandInfo .cashHandlingDiv .cashHandlingInput,
.profileBodyCardControl .DefaultCard,
.addCardMain .SaveCard .SaveCardInput {
  -webkit-appearance: none; /* WebKit browsers */
  -moz-appearance: none; /* Firefox */
  appearance: none; /* Standard property */
  width: 50px; /* Sets width to 60px */
  background: transparent; /* Removes background color */
}

.profileForm .PODDiv .PODInput::-webkit-slider-runnable-track,
.demandInfo .NoContactDiv .NoContactInput::-webkit-slider-runnable-track,
.demandInfo .cashHandlingDiv .cashHandlingInput::-webkit-slider-runnable-track,
.profileBodyCardControl .DefaultCard::-webkit-slider-runnable-track,
.addCardMain .SaveCard .SaveCardInput::-webkit-slider-runnable-track {
  height: 25px; 
  background: var(--background-color); 
  /* padding: 1px 5px; */
  border-radius: 8px;
  box-shadow: 0 0 0;
  border: var(--button-border-hover-style);
}

.profileForm .PODDiv .PODInput.activePOD::-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,
.addCardMain .SaveCard .SaveCardInput.activeSaveCard::-webkit-slider-runnable-track  {
  background: var(--button-color-hover);
}

.profileForm .PODDiv .PODInput::-webkit-slider-thumb,
.demandInfo .NoContactDiv .NoContactInput::-webkit-slider-thumb,
.demandInfo .cashHandlingDiv .cashHandlingInput::-webkit-slider-thumb,
.profileBodyCardControl .DefaultCard::-webkit-slider-thumb,
.addCardMain .SaveCard .SaveCardInput::-webkit-slider-thumb   {
  -webkit-appearance: none; /* Hides default thumb */
  height: 21px; /* Sets thumb height to 40px (same as track) */
  width: 21px; /* Sets thumb width */
  cursor: pointer;
  background: var(--icons-color); /* Set thumb background color (optional) */
  /* Adjust these properties for rounded corners if desired: */
  border-radius: 8px;
  border: 0;
  /* margin: 2px 5px; */
  margin-top: 0.4px;
  /* margin-bottom: 0.4px; */
}

.profileForm .PODDiv .PODInput.activePOD::-webkit-slider-thumb,
.demandInfo .NoContactDiv .NoContactInput.activePOD::-webkit-slider-thumb,
.demandInfo .cashHandlingDiv .cashHandlingInput.activePOD::-webkit-slider-thumb,
.profileBodyCardControl .DefaultCard.activeDefaultCard::-webkit-slider-thumb,
.addCardMain .SaveCard .SaveCardInput.activeSaveCard::-webkit-slider-thumb {
  background: var(--button-color);
}

.profileForm .PODDiv .hand_status {
  color: var(--button-color);
}

/* Romove arrow from input number */
/* Chrome, Safari, Edge, Opera */
.profileBodyInfSection
  .profileForm
  .flag-icon-div
  input::-webkit-outer-spin-button,
.profileBodyInfSection
  .profileForm
  .flag-icon-div
  input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
.profileBodyInfSection .profileForm .flag-icon-div input[type="number"] {
  appearance: textfield; /* Standardized property */
  -webkit-appearance: textfield; /* For Safari and Chrome */
  -moz-appearance: textfield; /* For Firefox */
  appearance: textfield; /* Fallback */
}

.profileBodyInfSection .profileForm .genderInput {
  width: 70%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  margin-top: 10px;
  height: 44.8px;
}

.profileBodyInfSection .profileForm .genderInput .gender_radio {
  outline: none;
  height: 21px;
  min-width: 21px;
  cursor: pointer;
  border-color: var(--button-color);
  accent-color: var(--button-color);
  background-color: var(--general-background-color);
}

.profileBodyInfSection .profileForm .genderInput .gender_radio:checked,
.profileBodyInfSection .profileForm .genderInput .gender_radio:hover {
  border-color: var(--button-color);
}

.profileBodyInfSection .profileForm .profileInfoUpdateSubmit,
.profileBodyCPSection .CPForm .ChangePasswordUpdateSubmit {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px 0 10px 0;
}

.profileBodyInfSection .profileForm .profileInfoUpdateSubmit button,
.profileBodyCPSection .CPForm .ChangePasswordUpdateSubmit button {
  border-radius: var(--general-border-radius);
  color: var(--general-background-color);
  width: var(--button-width);
  height: 6vh;
  letter-spacing: normal;
}

.profileBodyInfSection .profileForm .profileInfoUpdateSubmit button:hover,
.profileBodyInfSection .profileForm .profileInfoUpdateSubmit button:focus,
.profileBodyCPSection .CPForm .ChangePasswordUpdateSubmit button:hover,
.profileBodyCPSection .CPForm .ChangePasswordUpdateSubmit button:focus {
  background-color: var(--button-color);
}

.profileBodyInfSection .profileForm .popup-content {
  display: flex;
  justify-content: center;
}

.profileBodyInfSection .profileForm .popup-content button {
  border-radius: 5px;
}

.profileBodyInfSection .profileForm .popup-content button:hover,
.profileBodyInfSection .profileForm .popup-content button:focus {
  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 iframe {
  width: 100%;
  height: 80%;
}

.profileBodyAddress .profileBodyAddressMap .iframMap {
  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 {
  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 .changeAddressDelete button:hover,
.changeAddressControl .changeAddressDelete button:focus {
  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;
}

.changeAddressControl .changeAddressUpdate button:hover, 
.changeAddressControl .changeAddressUpdate button:focus {
  background-color: var(--button-color);
}

.profileBodyAddress .profileBodyAddressDetails p {
  margin: 0;
}

.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 {
  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 .oldAddress p {
  font-size: small;
}

.changeAddress .oldAddress .address {
  font-weight: 600;
}

.changeAddress .changeAddressButton {
  width: 30%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.changeAddress .changeAddressButton button {
  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);
  letter-spacing: normal;
}

.changeAddress .changeAddressButton button:hover,
.changeAddress .changeAddressButton button:focus {
  background-color: var(--general-background-color);
}

.profileBodyAddressDetails label {
  width: 30%;
  margin-top: 10px;
  height: 44.8px;
  display: flex;
  align-items: center;
}

.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;
}

/* Rompve arrow from input number */
/* Chrome, Safari, Edge, Opera */
.profileBodyAddressDetails .form_input::-webkit-outer-spin-button,
.profileBodyAddressDetails .form_input::-webkit-inner-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;
}

.profileBodyAddressDetails .flag-icon-div .form_input {
  padding-top: 0;
  padding-bottom: 0;
  border: 0;
  margin-top: 0;
}

.profileBodyAddressDetails .flag-icon-div img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.profileBodyAddressDetails .flag-icon-div span {
  padding-left: 0.75rem;
}

/* Add Address - Payment*/


/* cards */
.profileBodySectionTitle .addNewCardButton {
  width: 10%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 0;
  height: 75px;
}

.profileBodySectionTitle .addNewCardButton svg {
  width: var(--svg-size);
  fill: var(--svg-color);
}

.profileBodyCardsSectionBody {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.profileBodyCardsSectionBody .profileBodyCard {
  margin-top: 10px;
  border: var(--border);
  border-radius: var(--general-border-radius);
  cursor: pointer;
  width: 100%;
  padding: 20px;
  height: fit-content;
}

.profileBodyCardHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.profileBodyCardHeader svg {
  width: 100px;
  fill: var(--svg-color);
}

.profileBodyCardHeader p {
  font-size: large;
  font-weight: 800;
}

.profileBodyCardHeader img {
  width: 90px;
  height: 50px;
  object-fit: cover;
}

.profileBodyCardInfo p {
  margin: 0;
}

.profileBodyCardControl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
}

.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);
}

.profileBodyCardControlDelete:hover,
.profileBodyCardControlDelete:focus {
  background-color: var(--general-background-color);
}

/* end cards */

/* wallet */

.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;
}

.profileBodySectionTitle .addNewWalletButton {
  width: 10%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 0;
  height: 75px;
}

.profileBodySectionTitle .addNewWalletButton a svg {
  width: var(--svg-size);
  fill: var(--svg-color);
}

.walletBalance {
  color: var(--accept-color);
} 

.WalletCards {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 20px;
  margin: 10px 0;
}

.WalletCards input {
  display: none;
}

.WalletCards 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 {
  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;
}

.profileBodyWalletControlAddDiv {
  display: flex;
      align-items: center;
      justify-content: center;
      margin: 20px 0 10px 0;
}

.profileBodyWalletControlAdd {
  border-radius: var(--general-border-radius);
  color: var(--general-background-color);
  width: var(--button-width);
  height: 6vh;
  letter-spacing: normal;
  margin: auto;
}

.profileBodyWalletControlAdd:hover,
.profileBodyWalletControlAdd:focus {
  background: var(--button-color);
  color: var(--general-background-color);
}

/* wallet details */
.walletDetailsBody {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.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;
}

.walletDetailPointer {
  cursor: pointer;
}

.walletDetailLeft p {
  margin: 0;
}

.walletDetailRight {
  display: flex;
  align-items: center;
  justify-content: center;
}

.walletOrderDetails {
  position: fixed;
  z-index: 4;
  background-color: var(--bac-card);
  -ms-overflow-style: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.walletOrderDetails .walletOrderDetailsDiv {
  background-color: var(--general-background-color);
  border-radius: var(--general-border-radius);
  overflow-y: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
  min-width: 600px;
  max-height: 500px;
}

.walletOrderDetailsHeader {
  position: sticky;
  padding: 10px 20px;
  background-color: var(--general-background-color);
  top: 0;
}

.walletOrderDetailsHeader h3 {
  color: var(--button-color);
  font-size: x-large;
  font-weight: 700;
  border-bottom: 1.8px solid var(--button-color);
  width: fit-content;
} 

.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;
}

.walletOrderDetailsFooter button {
  border-radius: var(--general-border-radius);
  color: var(--general-background-color);
  width: var(--button-width);
  height: 6vh;
  letter-spacing: normal;
}

.walletOrderDetailsFooter button:hover,
.walletOrderDetailsFooter button:focus {
  background-color: var(--button-color);
}

.walletOrderDetailsCloseIconDiv {
  width: 10%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 0;
  height: 75px;
}

.walletOrderDetailsCloseIconDiv svg {
  width: var(--svg-size);
  fill: var(--svg-color);
}

.walletOrderDetailsBody {
  padding: 10px;
}

.walletOrderDetailsBody h5 {
  color: var(--main-color-hover);
}

.walletOrderDetailsBody p {
  margin-bottom: 0;
}


/* end wallet details */

/* add to wallet */

.addToWallet {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: var(--background-opacity-color);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 12;
}

.addToWalletBody {
  width: 80%;
  height: fit-content;
  background: var(--general-background-color);
  padding: 3% 3%;
  border: 1px solid var(--border-color-rgb);
  border-radius: 5px;
  overflow-y: auto;
  display: grid;
    grid-gap: 10px;
}

.addToWalletCards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 20px;
  margin: 10px 0;
}

.addToWalletCards input {
  display: none;
}

.addToWalletCards 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;
 }

 .addToWalletCards label:hover {
  border-color: var(--button-color);
 }

 .addToWalletCards input[type="radio"]:checked + .radio-label {
  border-color: var(--button-color);
 }

 .addWalletCloseIconDiv {
  text-align: right;
 }

 .addWalletCloseIconDiv svg {
  width: var(--svg-size);
  fill: var(--svg-color);
    cursor: pointer;
 }

 .WalletPlus {
  cursor: pointer;
 }
/* end add to wallet */

/* end wallet */

/* pro */

.profileBodyPro,
.profileBodyProsSectionBodyH {
  padding: 10px;
  border: var(--border);
  border-radius: var(--general-border-radius);
  margin: 10px;
}

.profileBodySectionTitle .ProInformation {
  width: 10%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 0;
  height: 75px;
}

.profileBodySectionTitle .ProInformation svg {
  fill: var(--svg-color);
  width: var(--svg-size);
}

.profileBodyPro p {
  margin: 0;
}

.profileBodyProHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.profileBodyProBodySub {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.profileBodyProBody {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  justify-content: space-between;
}

.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);
  width: var(--button-width);
  height: 6vh;
  letter-spacing: normal;
  border: 1.8px solid var(--button-color);
  background-color: var(--general-background-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%;
  /* height: 100%; */
  background: var(--general-background-color);
  padding: 1% 3%;
  border: var(--border);
  border-radius: 5px;
  overflow-y: auto;
  max-width: 654px;
}

.proPaymentHeader {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--border-color-rgb);
}

.proPaymentHeader h4 {
  width: 90%;
    text-align: center;
}

.proPaymentHeader svg {
  width: var(--svg-size);
  fill: var(--svg-color);
  cursor: pointer;
}

.proPaymentBody .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);
  color: var(--general-background-color);
  width: 50%;
  border-radius: var(--general-border-radius);
  width: var(--button-width);
  letter-spacing: normal;
}

.proPaymentS:hover,
.proPaymentS:focus {
  background-color: var(--button-color);
  color: var(--general-background-color);
}

/* end pro */

/* cars */
.profileBodySectionTitle .addNewCarButton {
  width: 10%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 0;
  height: 75px;
}

.profileBodySectionTitle .addNewCarButton svg {
  width: var(--svg-size);
  fill: var(--svg-color);
}

.profileBodyCarsSectionBody {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.profileBodyCarsSectionBody .profileBodyCar {
  margin-top: 10px;
  border: var(--border);
  border-radius: var(--general-border-radius);
  cursor: pointer;
  width: 100%;
  padding: 20px;
  height: fit-content;
}

.profileBodyCarHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.profileBodyCarHeader p {
  font-size: large;
  font-weight: 800;
}

.profileBodyCarHeader img {
  position: absolute;
  top: 0;
  right: 0;
  object-fit: contain;
  opacity: 0.3;
  width: 50%;
}

.profileBodyCarInfo p {
  margin: 0;
}

.profileBodyCarControl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
}

.profileBodyCarControlDelete {
  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);
}

.profileBodyCarControlDelete:hover,
.profileBodyCarControlDelete:focus {
  background-color: var(--general-background-color);
}

.profileBodyCarControl .DefaultCar {
  -webkit-appearance: none; /* WebKit browsers */
  -moz-appearance: none; /* Firefox */
  appearance: none; /* Standard property */
  width: 70px; /* Sets width to 60px */
  background: transparent; /* Removes background color */
}

.profileBodyCarControl .DefaultCar::-webkit-slider-runnable-track {
  height: 40px; /* Sets track height to 40px */
  background: var(
    --background-color
  ); /* Set track background color (optional) */
  /* padding-top: 10px; */
  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; /* Hides default thumb */
  height: 38px; /* Sets thumb height to 40px (same as track) */
  width: 38px; /* Sets thumb width */
  cursor: pointer;
  background: var(--icons-color); /* Set thumb background color (optional) */
  /* Adjust these properties for rounded corners if desired: */
  border-radius: 50%;
  border: 0;
  /* margin: 2px 5px; */
  margin-top: 0.5px;
  margin-bottom: 0.5px;
}

.profileBodyCarControl .DefaultCar.activeDefaultCar::-webkit-slider-thumb {
  background: var(--webkit-slider-thumb);
}

/* add car */
.addNewCar {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: var(--bac-card);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 12;
}

.addCarMain {
  background: var(--general-background-color);
  padding: 25px;
  border-radius: var(--general-border-radius);
  width: 510px;
}

.addCarMain .addCarTitle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.addCarMain .addCarCloseIconDiv {
  width: 3%;
}

.addCarMain .addCarCloseIconDiv .addCarCloseIcon {
  fill: var(--button-color);
  cursor: pointer;
  width: var(--svg-size);
}

.addCarMain label {
  width: 100%;
}

.addCarMain .form_input {
  width: 100%;
  border-radius: var(--general-border-radius);
  background: var(--general-background-color);
  padding: 0.75rem;
  outline: 0;
  border: var(--border);
}

.addCarMain .form_input:focus {
  border: var(--border);
}

.addCarMain form select {
  width: 100%;
  border-radius: var(--general-border-radius);
  background: var(--general-background-color);
  padding: 0.75rem;
  outline: 0;
  border: var(--border);
}

.addCarMain .ExpiryCVV {
  width: 100%;
  display: grid;
  grid-template-columns: 68% 30%;
  grid-template-rows: 30% 44.8px;
  column-gap: 2%;
  row-gap: 3px;
}

.addCarMain .submitAddCar {
  width: 100%;
  border-radius: var(--general-border-radius);
  background-color: var(--button-color);
  letter-spacing: normal;
}

.addCarMain .submitAddCar:hover,
.addCarMain .submitAddCar:focus {
  background-color: var(--button-color);
  color: var(--general-background-color);
}

.addCarMain .warningCarText {
  text-align: center;
}

/* end cars */

/* end profile control */

/* orders */
.oldOrders {
  width: 100%;
  min-height: 78vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Body */
.oldOrdersBody {
  width: 60%;
  height: 78vh;
  /* overflow-y: auto; */
  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 .oldOrdersBodyHeaderPending,
.oldOrdersBodyHeader .oldOrdersBodyHeaderCompleted {
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 0 10px 0;
  border-bottom: 1px solid var(--border-color-rgb);
}

.oldOrdersBodyHeaderPending .pendingOrdersButton,
.oldOrdersBodyHeaderCompleted .completedOrdersButton {
  /* width: 80%; */
  border-radius: 0px;
  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;
}

.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;
}

.oldOrdersBody .pendingOrderSideBar .pendingOrderSideBarInside button.active {
  border-color: var(--button-color);
}


.oldOrdersBody .pendingOrderSideBar .pendingOrderSideBarInside button:hover {
  border-color: var(--button-color);
}


/* .oldOrdersBodyHeaderPending .pendingOrdersButton:hover,
.oldOrdersBodyHeaderPending .pendingOrdersButton:focus,
.oldOrdersBodyHeaderCompleted .completedOrdersButton:hover,
.oldOrdersBodyHeaderCompleted .completedOrdersButton:focus {
  background-color: var(--main-color);
} */

.buttonActive button {
  border-bottom: 1.8px solid var(--button-color) !important;
  font-weight: 900 !important;
}

/* .buttonActive .pendingOrdersButton,
.buttonActive .completedOrdersButton {
  color: var(--general-background-color) !important;
  background: var(--main-color) !important;
  border-radius: var(--general-border-radius);
} */

.oldOrders .oldOrder {
  border: var(--border);
  border-radius: var(--general-border-radius);
  cursor: pointer;
  min-height: 160px;
  width: 95%;
  margin: 10px 2.5%;
  /* box-shadow: 5px 5px 5px var(--border-color-rgb); */
}

.oldOrders .oldOrder.active {
  border-color: var(--button-color);
}

.oldOrders .oldOrder:hover {
  border-color: var(--button-color);
}

.oldOrderHeadServiceName h5 {
  color: var(--button-color);
}

.oldOrderHead {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  border-bottom: var(--border);
  /* background-color: var(--border-color-rgb); */
  border-radius: 8px 8px 0 0;
}

.oldOrderHeadServiceStatus p {
  margin: 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 p {
  margin: 0;
}

.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;
}

.oldOrderBodyInfo .Price {
  color: var(--accept-color);
}

.oldOrderBodyInfoHead {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: start;
}

.oldOrderBodyInfoHead img {
  width: 60px;
  height: 60px;
  object-fit: contain;
}

.oldOrderBodyInfoHead p {
  margin-bottom: 0;
  margin-left: 10px;
  font-weight: 600;
}

.oldOrderBodyInfoID p,
.oldOrderBodyInfoDate p {
  margin: 0;
}

.oldOrderBodyPrice {
  width: 30%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.oldOrderBodyPrice p {
  margin: 0;
  width: 100%;
  text-align: center;
  background-color: var(--button-color);
  color: var(--general-background-color);
  border-radius: 8px;
}

/* Details */
.oldOrdersDetails {
  width: 40%;
  height: 78vh;
  overflow-y: auto;
  background-color: var(--background);
  /* padding: 20px 0; */
  display: flex;
  justify-content: center;
}

.oldOrdersDetails::-webkit-scrollbar {
  display: none;
}

.oldOrdersDetailsBodyMain {
  width: 95%;
  margin: 10px 0;
  padding: 10px;
  background-color: var(--general-background-color);
  border-radius: 8px;
  height: fit-content;
  border: 1.8px solid var(--button-color);
  height: 75vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--main-color);
}

.oldOrdersDetailsBody {
  display: none;
  width: 95%;
  margin: 10px 0;
  padding: 10px;
  background-color: var(--general-background-color);
  border-radius: 8px;
  height: fit-content;
  border: 1.8px solid var(--button-color);
}

.oldOrdersDetailsHead {
  width: 100%;
  display: flex;
  align-items: start;
  justify-content: space-between;
}

.oldOrdersDetailsHeadLeft,
.oldOrdersDetailsHeadRight {
  display: flex;
  align-items: start;
  justify-content: start;
}

.oldOrdersDetailsHeadImage {
  width: 80px;
  display: flex;
  /* align-items: center; */
  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;
}

.oldOrdersDetailsHeadInfo p {
  margin: 0;
}

.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 svg {
  width: var(--svg-size);
  fill: var(--svg-color);
}

.oldOrderItemHead p {
  margin: 0;
  font-weight: 600;
  margin-left: 10px;
}

.oldOrderItemBody table,
.oldOrderItemBody table tr td {
  border: none;
}

.oldOrderItemBody table tr td {
  font-size: small;
  padding: 0.3em 0.5em;
  vertical-align: text-top;
}

.oldOrderItemBody table tr .leftBody {
  width: 30%;
}

.oldOrderItemBody table tr .rightBody {
  font-weight: 600;
}

.orderSummaryTable tr .leftBody {
  width: 50% !important;
}

.orderSummaryTable tr .rightBody {
  text-align: right;
}

.rightBody.demandImages {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}


.orderSummaryTable .Discount {
  color: var(--warning-color);
}

.orderSummaryTable .Total {
  font-weight: 600;
}

.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;
  background-color: var(--button-color);
  letter-spacing: normal;
}

.cancelOrder:focus,
.cancelOrder:hover {
  background-color: var(--button-color-hover);
}




/* end orders */

/* Filters */

.filters {
  width: 330px;
  height: 88vh;
  position: sticky;
  overflow: auto;
  top: 12vh;
  /* Hide scrollbar for IE, Edge and Firefox */
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
  padding: 10px;
  background-color: var(--main-color);
}

/* Hide scrollbar for Chrome, Safari and Opera */
.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%;
}

.arrow svg {
  fill: var(--general-background-color);
}

.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;
  /* padding: 15px 5px; */
  width: 100%;
  height: 8vh;
}

.labelFilterSearchApply {
  display: flex;
      align-items: center;
      justify-content: center;
      height: 8vh;
      gap: 10px;
}

.labelFilterSearchSpan {
  display: flex;
      align-items: center;
      justify-content: center;
      border: 1.8px solid var(--button-color);
      background-color: var(--button-color);
      border-radius: var(--general-border-radius);
      height: 6vh;
      /* margin-right: 2%; */
      width: var(--button-width);
      letter-spacing: normal;
      color: var(--general-background-color);
      cursor: pointer;
}

.labelFilterSearchSpanClear {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.8px solid var(--button-color);
  background-color: var(--general-background-color);
  border-radius: var(--general-border-radius);
  height: 6vh;
  /* margin-right: 2%; */
  width: var(--button-width);
  letter-spacing: normal;
  color: var(--button-color);
  cursor: pointer;
}

.popupBody .ulFilter {
  display: flex;
      margin: 0;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
}

.cuisine_image {
  width: 50px;
  height: 50px;
  width: 100%;
}

.ulFilter .liFilter .labelFilter {
  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;
  letter-spacing: normal;
  margin: 3% auto;
  padding: 0 10px;
  width: 95px;
  height: 95px;
  cursor: pointer;
  flex-wrap: wrap;
}

/* .ulFilter .liFilter .labelFilter.activelabelFilter {
  border-color: var(--button-color);
} */

.labelFilter:has(input[type="radio"]:checked) {
  border-color: var(--button-color);
}


.ulFilter .liFilter .labelFilter:hover {
  border-color: var(--button-color);
}

.popupBody .liFilterSearch .labelFilter {
  padding: 0;
  border: 0;
}

.ulFilter .liFilter .labelFilter .radioInput,
.ulFilter .liFilter .labelFilter .checkboxInput {
  margin-right: 7%;
  outline: none;
  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 .radioInput:checked,
.ulFilter .liFilter .labelFilter .radioInput:hover,
.ulFilter .liFilter .labelFilter .checkboxInput:checked,
.ulFilter .liFilter .labelFilter .checkboxInput:hover {
  border-color: var(--button-color);
}

.ulFilter .liFilter .labelFilter .choice {
  line-height: 19px;
  width: 150px;
  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%;
}

/* end filters */

/* filter popup */
.filterPopup {
  top: 7vh;
  display: none;
  width: 170px;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  /* border-radius: var(--general-border-radius); */
  width: 190px;
  position: fixed;
  top: 12vh;
  left: 0;
  width: 100%;
  background: var(--dark-background);
  height: 33vh;
}

/* .filterPopup::before {
  content: "";
  position: absolute;
  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);
} */

.filterPopup {
  /* merge with below when make dispalay to itempopup */
  display: none;
}

.popup {
  background-color: var(--general-background-color); 
  height: 100%;
    border-radius: var(--general-border-radius); 
    /* top: 0;
    position: absolute;
    width: 100%;
    height: calc(100% - 9vh); */
}

.popupFilter {
  top: 0;
    position: absolute;
    width: 100%;
    height: calc(100% - 9vh);
}

.popupTitle {
  width: 100%;
  min-height: 60px;
  height: fit-content;
  /* border-bottom: var(--border); */
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.popupTitle h4 {
  border-bottom: 1.8px solid var(--button-color);
  width: 80%;
}

.popupTitleleftIcon {
  display: flex
  ;
      align-items: center;
      justify-content: center;
}

.popupTitleleftIcon .popupcCloseIcon {
  width: var(--svg-size);
  fill: var(--svg-color);
  cursor: pointer;
}

.popupBody {
    /* width: 100%; */
    /* height: 400px; */
    /* background-color: var(--general-background-color); */
    overflow: auto;
    height: 100%;
    /* border: 1.8px solid #94e6ff7a; */
    /* border-radius: var(--general-border-radius); */
}

.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%;
}

.clearAll,
.apply {
  width: 48%;
  border: 1px solid var(--main-color);
  border-radius: 5px;
  text-transform: capitalize;
}

.clearAll {
  border: 1px solid var(--border-color);
  background-color: var(--general-background-color);
}

.clearAll:hover {
  background-color: var(--general-background-color);
  color: var(--main-color);
  border: 1px solid var(--border-color);
  box-shadow: 2px 2px 6px var(--border-color);
}
/* 
.apply {
  background-color: var(--button-color);
  border-radius: var(--general-border-radius);
  color: var(--general-background-color);
} */

.apply:hover {
  box-shadow: 1px 1px 4px var(--main-color);
  border-color: var(--main-color);
  background-color: var(--main-color);
}

/* end filter popup */

/* core */

.ecommerceBody {
  width: calc(100% - 330px);
}

.ecommerceBody.withoutFilter {
  width: 100%;
}

.ecommerceCoreBody {
  width: calc(100% - 330px);
}

/* end core */

/* services in core */
.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%;
}

.ecommerceSection {
  position: relative;
}

.title {
  margin-right: 20px;
  font-weight: 800;
  color: var(--text-color);
}

.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;
}

.bannersUlOne .insideLI {
  margin: 0px;
}

.liButton {
  all: unset;
  border: var(--button-border-style);
  border-radius: var(--general-border-radius);
  cursor: pointer;
  color: var(--text-color);
  /* text-align: center; */
  background-color: var(--background-color);
}

.bannersUlOne .liButton{
  border: 0;
  border-radius: 0;
}

.liButton:hover,
.liButton:focus {
  color: var(--text-color);
  background: var(--background-color);
  /* box-shadow: 2px 2px 5px var(--main-color); */
  border: var(--button-border-hover-style);
}

.liImage img {
  border-radius: 5px 5px 0 0;
  object-fit: cover;
}

.liName {
  color: var(--text-color);
  font-weight: 600;
  margin: 0;
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.scroller {
  width: 35px;
  height: 35px;
  border: 1.8px solid var(--button-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: var(--button-color);
  position: absolute;
}

.scroller.scrollerNext {
  right: 2%;
}

.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);
}

/* end services in core */

/* banners */

.ecommerceSectionTitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 10px 6px;
}

.ecommerceSectionTitle .viewAll {
  color: var(--button-color);
  cursor: pointer;
}

.ecommerceSectionTitle .viewAll:hover,
.ecommerceSectionTitle .viewAll:focus {
  color: var(--button-color-hover);
}

/* top Picks */

.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%;
}

/* end top Picks */

/* Latest Offers */

.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 {
  top: 50%;
}

/* end Latest Offers */

/* Popular Restaurants */

.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;
}

.popularRestaurantName p {
  margin-bottom: 0;
}

.popularRestaurantName .restaurantName {
  font-weight: 600;
}

.restaurantNameOffer {
  color: red;
}

.restaurantRate {
  display: flex;
  color: var(--button-color);
}

.restaurantRate svg {
  width: var(--svg-size);
  fill: var(--svg-color);
}

.popularRestaurantButton .popularRestaurantImage,
.popularRestaurantImage img {
  width: 330px;
  height: 230px;
  border-radius: 8px 8px 0 0;
}

.ResultsBodyResultsItems .MenuSectionContentItem {
  width: 330px;
}

.sideBarFavourite .noFavourite {
  width: 100%;
  text-align: center;
}

.sideBarFavourite .popularRestaurantImage,
.sideBarFavourite img {
  width: 100%;
}

.popularRestaurants .scroller {
  top: 50%;
}

.popularRestaurantImage {
  position: relative;
}

.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 .AddResToFavourite svg {
  fill: var(--general-background-color);
}

.popularRestaurantImage .AddResToFavourite svg:hover {
  fill: var(--general-background-color);
}

.popularRestaurantImage .centerNote {
  position: absolute;
  top: 0;
  left: 0;
  color: var(--general-background-color);
  text-align: center;
  width: 100%;
  height: 100%;
  display: flex;
  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 */

.Adv .liButton {
  border-radius:0;
  /* box-shadow: 8px 8px 5px var(--main-color); */
}

.Adv .popularRestaurantImage {
  border-radius: 0;
}

.Adv .TopcenterNote {
  /* border-radius: 0 0 25px 25px; */
  position: absolute;
    top: 0;
    left: 0;
    /* transform: translate(-50%, -50%); */
    color: var(--general-background-color);
    text-align: center;
    width: 100%;
    height: 100%;
    display: flex;
    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 .popularRestaurantImage img {
  border-radius: 0;
}

.Adv .restaurantRate {
  bottom: 127px;
}

/* .Adv .popularRestaurantName {
  display: grid;
    grid-template-columns: 1fr 3fr;
    padding: 10px 0;
} */

.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 .centerNote {
  border-radius: 0;
}

.Adv .AddResToFavourite {
  bottom: 22px;
  top: auto;
}

.Adv .noteone {
  bottom: 22px;
  top: auto;
}

/* end Popular Restaurants */

/* .banners  {
  background-color: var(--main-color);
} */



/* view all */

.viewAllEcommerceSection .ulList {
  display: flex
  ;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
}

.viewAllEcommerceSection .ulList li {
  float: left;
}

.viewAllEcommerceSection .ulList li a:hover {
  all: unset;
}

.viewAllEcommerceSection .ecommerceSectionTitle {
  justify-content: flex-start;
}

.viewAllEcommerceSection .ecommerceSectionTitle .backButton {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.ecommerceSectionTitle .backButton svg {
  fill: var(--svg-color);
  width: var(--svg-size);
  margin: 0 10px;
}

/* end view all */

/* Single Service */

.missMessage {
  text-align: center;
  color: var(--warning-color);
}

/* .FoodServiceCuisions {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  /* height: fit-content; 
  height: 100%;
  background-color: #0000009c;
  z-index: 1;
} */

.SingleServiceSection .ulList,
.FoodServiceCuisions .ulList {
  display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
}

.loadingPage {
  display: flex;
    align-items: center;
    justify-content: center;
}

.loadingPageMart {
  display: flex;
    align-items: center;
    justify-content: center;
}
/* .SingleServiceSection .ulListWithFilter {
  grid-template-columns: 1fr 1fr 1fr 1fr;
} */

/* .ulListWithFilter .popularRestaurantButton .popularRestaurantImage, 
.ulListWithFilter .popularRestaurantImage img {
  width: 225px;
} */

.sideBarFavourite .popularRestaurantImage,
.sideBarFavourite img {
  width: 100%;
}

.SingleServiceSection .ulList li {
  float: left;
  display: flex;
  align-items: center;
  justify-content: center;
}

.SingleServiceSection .ulList li a:hover {
  all: unset;
}

.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;
}

.ecommerceSectionTitleFilter p {
  margin: 0 5px 0 10px;
  color: var(--text-color);
  font-weight: 700;
}

.ecommerceSectionTitleFilter svg {
  fill: var(--svg-color);
  width: var(--svg-size);
}


.SingleServiceSection .backButton {
  width: 16px;
  cursor: pointer;
  margin-left: 20px;
  display: flex;
    align-items: center;
    justify-content: center;
}

/* .SingleServiceSection .backButton svg {
  fill: var(--main-color);
} */

/* end Single Service */

/* Single vendor */
.singleVendor {
  width: 75%;
  padding: 1vh;
  background: var(--background);
}

.singleVendorCart {
  width: 25%;
  padding: 1vh;
  background: var(--background);
}

.VendorMenuCartSection {
  position: sticky;
  top: 31vh;
}

.singleVendorHeader {
  width: 100%;
  /* height: 40vh; */
  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;
}

.singleVendorBackButton svg {
  width: 16px;
  fill: var(--main-color);
}

.singleVendorBackButtonTitle {
  padding-left: 10px;
  font-size: larger;
  font-weight: 600;
  color: var(--main-color);
}

.singleVendorInformation {
    /* height: 35vh; */
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* padding-left: 50px; */
    width: 100%;
    margin: 0;
}

.singleVendorInformationImg {
  width: 100%;
  /* height: 35vh; */
}

.singleVendorInformationImg img {
  object-fit: cover;
  width: 100%;
  height: 45vh;
  /* box-shadow: 5px 5px 5px var(--main-color); */
  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 {
  /* height: 35vh; */
  padding: 10px;
  width: 100%;
}

.singleVendorInformationContent .location .headerDivider {
  color: var(--svg-color);
}

.singleVendorInformationContentTitle {
  font-size: x-large;
  margin: 0;
  font-weight: 800;
}

.singleVendorInformationContent .typeAndRate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
}

.singleVendorInformationContent .rate {
  color: var(--button-color);
  cursor: pointer;
}

.singleVendorInformationContent .rate svg {
  width: var(--svg-size);
  fill: #f47b56;
}

.showMenu {
  color: var(--button-color);
  text-decoration: underline;
  cursor: pointer;
}

.showMenu:hover, 
.showMenu:focus {
  color: var(--button-color-hover);
}

.singleVendorMenuHeaders {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 10vh;
  border-bottom: 1px solid var(--border-color-rgb);
  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;
  background: var(--general-background-color);
}

.scroller.MenuScrollerNext {
  right: 2%;
}

.scroller.MenuScrollerPrev {
  display: none;
  left: 2%;
}

.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:hover,
.MenuHeaderUl .MenuHeaderLi:focus {
  border-bottom: 1.8px solid var(--button-color);
}

.MenuHeaderUl .MenuHeaderLi a,
.MenuHeaderUl .MenuHeaderLi p {
  color: #000;
  font-weight: 500;
}

.MenuHeaderUl .MenuHeaderLi p {
  margin: 0;
}

.MenuHeaderUl .MenuHeaderLi a:hover ,
.MenuHeaderUl .MenuHeaderLi p:hover {
  all: unset;
  font-weight: 600;
}

.MenuHeaderUl .activeLi {
  border-bottom: 1.8px solid var(--button-color);
}

.MenuHeaderUl .activeLi a,
.MenuHeaderUl .activeLi p {
  color: #000;
  font-weight: 600;
}

.MenuHeaderUl::-webkit-scrollbar {
  display: none;
}

.singleVendor .singleVendorMenu {
  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;
}

.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);
  /* padding: 0 0 0 15px; */
  display: flex;
  align-items: center;
  justify-content: start;
  margin-top: 2%;
  cursor: pointer;
  /* padding: 15px 0; */
}

.MenuSectionContent .MenuSectionContentItem:hover {
  border-color: var(--button-color);
}

.MenuSectionContentItem .ContentItemInformation {
  width: unset;
  margin-left: 5px;
}

.MenuSectionContentItem .ContentItemInformation h5 {
  font-size: 17px;
}

.MenuSectionContentItem .ContentItemInformation p {
  margin: 0;
  font-size: 15px;
}

.MenuSectionContentItem .ContentItemInformation p .offerSpanBefore {
  text-decoration: line-through !important;
}

.MenuSectionContentItem .ContentItemInformation p .offerSpanAfter {
  color: var(--warning-color);
}

.MenuSectionContentItem .ContentItemInformation p .SpanWithoutOffer {
  color: var(--accept-color);
}

.MenuSectionContentItem .ContentItemImage {
    /* width: 30%; */
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 10px;
}

.MenuSectionContentItem .ContentItemImage img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  /* border: 1.8px solid #94e6ff; */
  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);
  /* box-shadow: 0 -1px 5px var(--button-color); */
}

.VendorMenuCartFooter .CartFooterOrderTotal {
  display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    height: 40%;
}

.CartFooterOrderTotal .CartFooterOrderTotalNumber {
  font-weight: 600;
}

.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);
  color: var(--general-background-color);
  border: 0;
  text-transform: capitalize;
  letter-spacing: 0;
}

.CartHeader {
  border-bottom: 1px solid var(--border-color-rgb);
  padding: 10px 0;
  /* min-height: 20vh; */
}

.CartHeaderSummarySection {
  padding: 10px 0;
}

.CartHeaderH {
  font-size: 17px;
  margin-bottom: 5px;
}

.TitleSectionTitle {
  display: flex;
  align-items: center;
  justify-content: start;
}

.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%;
}

.TitleSectionDeleteOrder svg {
  width: 16px;
  fill: var(--button-color);
  cursor: pointer;
}

.DeliveryTypeSectionOptions label {
  display: inline-flex;
  width: 100%;
  align-items: center;
}

.DeliveryTypeSectionOptions label input {
  margin-right: 4%;
  outline: none;
  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;
  background: var(--general-background-color);
  padding: 0.75rem;
  outline: 0;
  border: var(--border);
  height: 6vh;
}

.addCopon input:focus {
  border: var(--border);
}

.addCopon button {
  width: 30%;
  border-radius: 5px;
  background-color: var(--button-color);
  color: var(--general-background-color);
  margin-left: 2%;
  border: 0;
  height: 6vh;
  font-size: smaller;
  text-transform: capitalize;
  letter-spacing: 0;
}

.CartHeaderSummarySection .SummarySection {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  font-size: small;
  /* padding: 0 15px; */
}

.CartHeaderSummarySection .Discount {
  color: var(--warning-color);
}

.summaryCoponDiscount .SummarySectionText {
  display: flex;
}

.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;
}

/* item popup */

.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);
  border: 0;
  box-shadow: 0 0;
  pointer-events: none;
  cursor: no-drop;
}

.itemPopup .applyNon:hover {
  border: none;
  box-shadow: 0 0;
  border: 0;
}

.itemPopup .apply {
  width: 68%;
  border: 1.8px solid var(--button-color);
  border-radius: var(--general-border-radius);
  height: 6vh;
  color: var(--general-background-color);
  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;
      /* border-radius: 8px; */
      padding: 10px 20px;
}

.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;
}

.itemBasicInfo p {
  margin: 0;
}

.Required {
  color: var(--general-background-color);
  background: var(--main-color);
  padding: 7px;
  border-radius: 5px;
  border: 0;
}

.itemAllInfoChooseBody {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.itemPopup .popupFooter {
  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: space-around;
  height: 65px;
  border-radius: 0 0 8px 8px;
}

.itemPopup .popupItemsCount {
  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: space-around;
  /* height: 67px; */
  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;
  /* padding: 0 4px; */
  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 .radioInput,
.itemAllInfoChooseBody .labelFilter .checkboxInput {
  margin-right: 4%;
  outline: none;
  height: 20px;
  min-width: 20px;
  cursor: pointer;
  border-color: var(--svg-color);
  accent-color: var(--svg-color);
}

.itemAllInfoChooseBody .labelFilter .radioInput:checked,
.itemAllInfoChooseBody .labelFilter .radioInput:hover,
.itemAllInfoChooseBody .labelFilter .checkboxInput:checked,
.itemAllInfoChooseBody .labelFilter .checkboxInput:hover {
  border-color: var(--svg-color);
}

/* end item popup */

/* single vendor payment */




.cartPayment .cartPaymentMain .cartPaymentBody {
  padding: 10px;
}

.cartPayment .cartPaymentMain .cartPaymentBody .cartAddMsg {
  color: var(--warning-color);
  text-align: center;
}

.cartPaymentBody .cartNote {
  padding: 10px 0;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 10px;
}

.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 .cartNote .cartNoteInput:focus {
  border: var(--border);
}

.cartPaymentBody .paymentMethods {
  padding: 10px 0;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 10px;
}

.cartPaymentBody .placeOrderButton {
  width: 100%;
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.cartPaymentBody .placeOrderButton button {
  border-radius: 5px;
  font-weight: 600;
  font-size: small;
}

.cartPaymentBody .placeOrderButton .cartSubmitOrderButton,
.valetPaymentBody .placeOrderButton .valetSubmitOrderButton,
.driverPaymentBody .placeOrderButton .driverSubmitOrderButton,
.deliveryPaymentBody .placeOrderButton .placeOrder,
.demandPaymentBody .placeOrderButton .demandSubmitOrderButton {
  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,
.valetPaymentBody .placeOrderButton .valetCancelOrderButton,
.driverPaymentBody .placeOrderButton .driverCancelOrderButton,
.deliveryPaymentBody .placeOrderButton .scheduleBookingButton,
.demandPaymentBody .placeOrderButton .demandCancelOrderButton {
  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 {
  width: 100%;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 10px;
}

.cartAddress .cartAddressHeader {
  width: 100%;
}

.cartAddress .cartMap {
  height: 200px;
  width: 100%;
  margin: 10px 0;
}

.cartAddress .cartAddressInfo {
  width: 100%;
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 5px;
}

.cartAddress .cartAddressInfo .cartAddressName {
  margin: 0;
  display: flex;
  align-items: center;
}

.cartAddress .cartAddressInfo .cartAddressChange {
  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);
  letter-spacing: normal;
}

.cartAddressInfo .cartAddressChange:hover,
.cartAddressInfo .cartAddressChange:focus {
  background-color: var(--general-background-color);
}

.cartTips {
  width: 100%;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 10px;
}

.cartTips .cartTipsHeader {
  width: 100%;
  display: grid;
  grid-template-columns: 10% 90%;
  gap: 10px;
}

.cartTips .cartTipsHeader img {
  height: 100%;
  width: 100%;
  object-fit: contain;
}

.cartTips .cartTipsHeader .yourRide {
  margin: 0;
}

.cartTips .cartTipsValues {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 20px;
}

.cartTips .cartTipsValues .cartTipsValue {
  display: none;
}

.cartTips .cartTipsValues .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;
}

.cartTips .cartTipsValues .radio-label:hover,
.cartTips .cartTipsValues .radio-label:checked {
  border-color: var(--button-color);
}

.cartTips .cartTipsValues .radio-label .customTipsSpan {
  display: none;
}

.cartTips .cartTipsValues .radio-label .customTipsInput {
  width: 100%;
  border: navajowhite;
  background: transparent;
  text-align: center;
}

.cartTips
  .cartTipsValues
  .radio-label
  .customTipsInput::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
.cartTips .cartTipsValues .radio-label input[type="number"] {
  appearance: textfield; /* Standardized property */
  -webkit-appearance: textfield; /* For Safari and Chrome */
  -moz-appearance: textfield; /* For Firefox */
  appearance: textfield; /* Fallback */
}

/* end single vendor payment */

/* change address */




.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.SetASDefault {
  border-color: var(--button-color);
}

.changeSingleVendorDeliveryAddressBody .SingleVendorDeliveryAddressDiv p {
  margin: 0;
}

.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;
}

.SingleVendorDeliverySetDefault span {
  letter-spacing: normal;
}

.SingleVendorDeliveryAddressDiv
  .SingleVendorDeliveryAddressControl
  .SingleVendorDeliverySetDefault
  .SingleVendorDeliveryDefault {
  display: flex;
  align-items: center;
  justify-content: center;
}

.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
  .SingleVendorDeliverySetDefault:hover,
.SingleVendorDeliveryAddressDiv
  .SingleVendorDeliveryAddressControl
  .SingleVendorDeliverySetDefault:focus,
.SingleVendorDeliveryAddressDiv
  .SingleVendorDeliveryAddressControl
  .SingleVendorDeliveryEditAddress:hover,
.SingleVendorDeliveryAddressDiv
  .SingleVendorDeliveryAddressControl
  .SingleVendorDeliveryEditAddress:focus {
  background-color: var(--general-background-color);
  color: var(--button-color);
}

.SingleVendorDeliveryEditAddress span {
  letter-spacing: normal;
}

.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);
}

/* add address */



/* Rompve arrow from input number */
/* Chrome, Safari, Edge, Opera */
.singleVendor .editAddressBodyInfo .form_input::-webkit-outer-spin-button,
.singleVendor .editAddressBodyInfo .form_input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.singleVendor .editAddressBody .editAddressBodyInfo p {
  margin: 0;
}

.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%;
}

.singleVendor .editAddressBodyInfoAddress .editAddressBodyInfoAddressSVG {
  width: 10%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.singleVendor .editAddressBodyInfoAddress .editAddressBodyInfoAddressSVG svg {
  width: 16px;
  fill: var(--main-color);
}

.singleVendor .editAddressBodyInfoAddress .editAddressBodyInfoOldAddress {
  width: 90%;
}

.singleVendor .editAddressBodyInfoOldAddress .editAddressBodyInfoAddressTitle {
  font-weight: 600;
}

.singleVendor
  .editAddressBodyInfoOldAddress
  .editAddressBodyInfoCurrentAddress {
  font-size: small;
}

.singleVendor .editAddressBodyInfo label {
  width: 30%;
  margin-top: 10px;
  height: 44.8px;
  display: flex;
  align-items: center;
}

.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;
}

.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;
}

.singleVendor .editAddressBodyInfo .flag-icon-div img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.singleVendor .editAddressBodyInfo .flag-icon-div span {
  padding-left: 0.75rem;
}

.singleVendor .editAddressBodyInfo .flag-icon-div .form_input {
  padding-top: 0;
  padding-bottom: 0;
  border: 0;
  margin-top: 0;
}

/* end change address */

/* end single vendor */


/* meal */

.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{
  width: 100%;
  display: grid;
  margin: 10px 0;
} */

.singleVendorMeal .plans input {
  display: none;
}

.singleVendorMeal .plans label {
    align-items: center;
    justify-content: start;
    cursor: pointer;
    display: flex;
    width: 100%;
}

.singleVendorMeal .plans label:hover {
  /* box-shadow: 5px 5px 5px var(--main-color);
  color: var(--button-color); */
  font-weight: 600;
}

.singleVendorMeal .plans label p {
  margin: 0;
}

.singleVendorMeal .days,
.singleVendorMeal .types {
  display: flex;
      margin: 10px 0;
      align-items: center;
      justify-content: start;
      flex-wrap: wrap;
      gap: 5px;
}

.singleVendorMeal .days input,
.singleVendorMeal .types input {
  display: none;
}

.singleVendorMeal .days .daysDay,
.singleVendorMeal .types .typesType {
  background-color: var(--general-background-color);
  border: 1.8px solid var(--main-color);
  /* box-shadow: 5px 5px 5px var(--icons-color); */
  border-radius: 8px;
  /* padding: 0.75rem; */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
  cursor: pointer;
  width: 100%;
  width: var(--button-width);
  height: 6vh;
}

.singleVendorMeal .days .daysDay:hover,
.singleVendorMeal .types .typesType:hover  {
  /* box-shadow: 5px 5px 5px var(--button-color-hover); */
  border: var(--button-border-hover-style);
}

.filterMeals,
.continueMeals {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px 0;
}

.filterMeals .seeFilteredMeal,
.continueMeals .seecontinueMeals {
  border-radius: var(--general-border-radius);
  color: var(--general-background-color);
  width: var(--button-width);
  height: 6vh;
  letter-spacing: normal;
}

.filterMeals .seeFilteredMeal:hover,
.filterMeals .seeFilteredMeal:focus,
.continueMeals .seecontinueMeals:hover,
.continueMeals .seecontinueMeals:focus {
background-color: var(--button-color);
}

.singleVendorMeal .dayMeals {
  display: grid;
  margin-bottom: 10px;
}

.singleVendorMeal .dayMeals .dayMealsName {
  height: 10vh;
  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);
  /* background-color: var(--button-color); */
}

.singleVendorMeal .dayMeals h4 {
  color: var(--general-background-color);
}

.singleVendorMeal .dayMeals .dayMealsName svg {
  width: 16px;
  fill: var(--button-color);
  cursor: pointer;
}

.singleVendorMeal .dayMeals .dayPlans {
  display: grid;    
  border-left: 1.8px solid var(--button-color);
  margin-left: 20px;
}

.singleVendorMeal .dayMeals .dayPlans .dayPlanType {
  margin: 10px;
  background-color: var(--general-background-color);
  margin-bottom: 0;
  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 .dayPlanType h5 {
  color: var(--button-color);
}

.singleVendorMeal .dayMeals .dayPlans .dayPlanMeals {
  padding: 10px;
  margin: 10px;
  margin-top: 0;
  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;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: start;
    margin-top: 2%;
    cursor: pointer;
}

.dayPlanMeals .dayPlanMealsMeal input {
  display: none;
}

.dayPlanMeals .dayPlanMealsMeal 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);
}

.dayPlanMeals .dayPlanMealsMeal label:hover {
  border: var(--button-border-hover-style);
} 

.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;
  width: 250px;
  height: 150px;
  border-radius: 15px 15px 0 0;
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
}

.labelinputMealDesc {
  width: unset;
  margin: 5px;
}

.mealAddress {
  width: 100%;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 10px;
}

.mealAddress .mealAddressHeader {
  width: 100%;
}

.mealAddress .mealMap {
  height: 200px;
  width: 100%;
  margin: 10px 0;
}

.mealAddressInfo {
  width: 100%;
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 5px;
} 

.mealAddressName {
  margin: 0;
  display: flex;
  align-items: center;
}

.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 {
  display: flex;
      margin: 10px 0;
      align-items: center;
      justify-content: start;
      flex-wrap: wrap;
      gap: 5px;
}

.SubscriptionType input {
  display: none;
}

.SubscriptionType label {
  background-color: var(--general-background-color);
  padding: 0.75rem;
  margin: .5%;
  border: var(--button-border-style);
  border-radius: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
  cursor: pointer;
  width: var(--button-width);
  height: 6vh;
  line-height: 1em;
}

.SubscriptionType label:hover {
  border: var(--button-border-hover-style);
}

.SubscriptionRepetations {
  display: flex;
      margin: 10px 0;
      align-items: center;
      justify-content: start;
      flex-wrap: wrap;
      gap: 5px;
}

.SubscriptionRepetations input {
  width: var(--button-width);
  border: 1.8px solid var(--main-color);
  border-radius: 8px;
}

.SubscriptionRepetations input:hover,
.SubscriptionRepetations input:focus {
  border: var(--button-border-hover-style);
}

.DeliverySlots {
  display: flex;
      margin: 10px 0;
      align-items: center;
      justify-content: start;
      flex-wrap: wrap;
      gap: 5px;
}

.DeliverySlots input {
  display: none;
}

.DeliverySlots label {
  background-color: var(--general-background-color);
  padding: 0.75rem;
  margin: .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;
}

.DeliverySlots label:hover {
  border: var(--button-border-hover-style);
}

.CalcMeals {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px 0;
}

.CalcMeals .CalcMealsButton {
  border-radius: var(--general-border-radius);
  color: var(--general-background-color);
  width: var(--button-width);
  height: 6vh;
  letter-spacing: normal;
}

.CalcMeals .CalcMealsButton:hover,
.CalcMeals .CalcMealsButton:focus {
  background-color: var(--button-color);
}

.mealAddresses input[type="radio"] {
  display: none;
} 

.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%;
  /* height: 100%; */
  max-height: 100%;
  background: var(--general-background-color);
  padding: 1% 3%;
  border: var(--border);
  border-radius: 8px;
  overflow-y: scroll;
  /* overflow: hidden; */
  -ms-overflow-style: none;
  scrollbar-width: none;
}


.singleVendorMeal .singleVendorMealBody {
  background-color: var(--background);
  width: 100%;
  padding: 20px;
}

.singleVendorMeal .singleVendorMealBody h4 {
  margin-top: 20px;
  font-weight: 600;
  font-size: 21px;
}

.singleVendorMeal .singleVendorMealBody .dayMealsName h5 {
  color: #000;
}

.singleVendorMeal .singleVendorMealBody h5 {
  color: var(--general-background-color);
}

.mealPayment .mealPaymentMain .mealPaymentBody {
  padding: 10px;
}


.mealPayment .mealPaymentMain .mealPaymentBody {
  padding: 10px;
}

.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 .paymentDetails,
.mealPaymentBody .paymentMethods {
  padding: 10px 0;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 10px;
}

.mealPaymentBody .placeOrderButton {
  width: 100%;
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.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;
}

.MealchangeAddressName {
  margin: 0;
    display: flex;
    align-items: center;
}

.MealchangeAddressChange {
  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);
  letter-spacing: normal;
}

.MealchangeAddressChange:hover,
.MealchangeAddressChange:focus {
  background-color: var(--general-background-color);
  color: var(--button-color);
  border-color: var(--button-color);
}


/* end meal */

/* reservation */
.singleVendorReservation .singleVendorHeader{
  border-radius: var(--general-border-radius);
  /* height: 57vh; */
}

.singleVendorReservationCart .reservationBody {
  min-height: 57vh;
}

.singleVendorReservationCart .reservationBody .reservationNote {
  height: 18vh;
}

.reservationBody {
  background-color: var(--general-background-color);
  border: 1.8px solid var(--button-color);
  width: 100%;
  position: relative;
  border-radius: 8px;
  padding: 10px;
}

.reservationBody .reservationDateTime,
.reservationBody .guestsCount,
.reservationBody .reservationNote,
.reservationBody .reservationSubmit {
  width: 100%;
}

.reservationBody .reservationNote:focus {
  border: var(--border);
}

.reservationBody .reservationDateTime {
  display: grid;
  grid-template-columns: 1fr;
}

.reservationBody .guestsCount {
  background-color: var(--general-background-color);
  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 p {
  margin: 0;
}

.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: 2px;
  height: 30px;
  padding: 0 4px;
  background: var(--svg-color);
}

.guestsDisableChange {
  pointer-events: none;
  fill: var(--svg-color) !important;
  background: transparent !important;
}

.reservationBody .guestsCount .guestsControls .guestsCurrentCount {
  margin: 0 10px;
  width: 20px;
  text-align: center;
}

.reservationBody .restaurantMessage {
  margin: 0;
  text-align: center;
  width: 100%;
}

.reservationBody .reservationNote {
  border-radius: var(--general-border-radius);
  background: var(--general-background-color);
  padding: 0.75rem;
  outline: 0;
  border: var(--border);
  margin-top: 10px;
}

  /* reservation menu */
    .vendorMenuDiv {
      position: fixed;
      z-index: 4;
      background-color: var(--bac-card);
      -ms-overflow-style: none;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: none;
      align-items: center;
      justify-content: center;
    }

    .vendorMenu {
      position: fixed;
      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;
      -ms-overflow-style: none;
      scrollbar-width: none;
      width: 80%;
      height: 90vh;
    }

    .vendorMenuHeader {
      position: sticky;
      padding: 10px 20px;
      background-color: var(--general-background-color);
      top: 0;
      height: 7vh;
    }

    .vendorMenuHeader h3 {
        color: var(--button-color);
        font-size: x-large;
        font-weight: 700;
        border-bottom: 1.8px solid var(--button-color);
        width: fit-content;
    }

    .vendorMenuBody {
      padding: 20px;
      height: 76vh;
      overflow: auto;
    }

    .vendorMenuBody iframe {
      height: 70vh;
      width: 100%;
    }

    .vendorMenuFooter {
      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;
      height: 9vh;
    }

    .vendorMenu button {
      border-radius: var(--general-border-radius);
      color: var(--general-background-color);
      width: var(--button-width);
      height: 6vh;
      letter-spacing: normal;
    }

    .vendorMenu button:focus,
    .vendorMenu button:hover {
      background-color: var(--button-color);
    }

  /* end reservation menu */
/* end reservation */

/* valet */
.valet .valetHeader {
  height: 10vh;
}

.valet .valetBody {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 20px;
    background: var(--general-background-color);
    border-radius: 8px;
    border: var(--button-border-style);
    border-radius: 8px;
    background-color: var(--general-background-color);
    margin-top: 10px;
    background: var(--general-background-color);
}

.valet .valetBody .VechiclesSVG {
width: 200px;
display: flex;
align-items: center;
justify-content: center;
}

.valet .valetBody .VechiclesSVG svg {
  width: 100px;
  fill: var(--svg-color);
}

.valet .valetBody .valetForm {
  padding: 20px;
}

.valet .valetBody h4 {
  width: 100%;
  text-align: center;
}

.valet .valetBody img {
  width: 100%;
  padding: 0 10%;
  object-fit: contain;
}

.valet .valetBody .verifyInfo,
.valetPayment .valetPaymentMain .valetPaymentBody .valetAddMsg {
  color: var(--warning-color);
  text-align: center;
}

.valet .valetBody input {
  border-radius: var(--general-border-radius);
  background: var(--general-background-color);
  padding: 0.75rem;
  outline: 0;
  border: var(--border);
  margin-top: 10px;
  width: 100%;
}

.valet .valetBody .valetSubmit {
  display: flex;
      align-items: center;
      justify-content: center;
      margin: 20px 0px 10px;
}

.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 {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: var(--background-color);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1% 10%;
}

.valet .valetPayment {
  padding: 1% 5%;
}

.valet .valetPayment .valetPaymentMain {
  width: 80%;
  /* height: fit-content; */
  max-height: 100%;
  background: var(--general-background-color);
  padding: 1% 3%;
  border: 1px solid var(--border-color-rgb);
  border-radius: 5px;
  overflow-y: auto;
}

.valet .valetPayment .valetPaymentMain::-webkit-scrollbar {
  display: none;
}

.valetPayment .valetPaymentMain .valetPaymentHeader {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--border-color-rgb);
}

.valetPayment .valetPaymentMain .valetPaymentHeader h4 {
  width: 90%;
  text-align: center;
}

.valetPayment .valetPaymentMain .valetPaymentHeader svg {
  width: 16px;
  fill: var(--main-color);
  cursor: pointer;
}

.valetPayment .valetPaymentMain .valetPaymentBody {
  padding: 10px;
}

.valetPayment .valetPaymentMain .valetPaymentBody {
  padding: 10px;
}

.valetPaymentBody .paymentMethods {
  padding: 10px 0;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 10px;
}

.valetPaymentBody .placeOrderButton {
  width: 100%;
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.valetPaymentBody .placeOrderButton button {
  border-radius: 5px;
  font-weight: 600;
  font-size: small;
}

/* end valet */

/* payment */

.paymentDetails {
  padding: 10px 0;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 10px;
}

.paymentDetails .paymentDetailsTable {
  border: none;
  margin: 10px 0;
}

.paymentDetails .paymentDetailsTable tr td {
  border: none;
  padding: 0 .7em;
}

.paymentDetails .paymentDetailsTable .trBold {
  font-weight: 600;
}

.paymentDetails .paymentDetailsTable .trWarning {
  color: var(--warning-color);
}

.paymentDetails .paymentDetailsTable tr .trRight {
  text-align: right;
}

.paymentDetails .paymentDetailsNote {
  color: var(--accept-color);
}

.paymentDetails .deleteDeliveryCoupon {
  width: 16px;
  fill: var(--warning-color);
  cursor: pointer;
}

.paymentMethods .choosePaymentMethod {
  color: var(--warning-color);
}

.paymentMethods .paymentMethod {
  margin: 10px 0;
  display: flex;
  align-items: center;
  justify-content: start;
}

.paymentMethods .paymentMethod .CardPlus {
  cursor: pointer;
}

.paymentMethods .paymentMethod input {
  outline: none;
  height: 21px;
  min-width: 21px;
  cursor: pointer;
  border-color: var(--button-color);
  accent-color: var(--button-color);
  background-color: var(--general-background-color);
}

.paymentMethods .paymentMethod input:checked {
  border-color: var(--button-color);
}

.paymentMethods .paymentMethod svg {
  width: var(--svg-size);
  fill: var(--svg-color);
  margin: 0 16px;
}

.paymentMethods .paymentMethod .paymentMethodName {
  width: 80%;
}

.paymentMethods .paymentMethodCards {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 20px;
}

.paymentMethods .paymentMethodCards input {
  display: none;
}

.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;
}

.paymentMethods .paymentMethodCards .radio-label:hover {
  border: 1.8px solid var(--button-color);
}
/* end payment */



/* address */

.addAddress .addAddressMain .addAddressBody,
.editAddress .editAddress .editAddressBody {
  padding: 10px;
}

.addAddressBody .addAddressBodyInfo,
.editAddress .editAddressBodyInfo {
  padding: 10px;
  width: 100%;
  display: flex;
  align-items: self-start;
  justify-content: center;
  flex-wrap: wrap;
}

/* Rompve arrow from input number */
/* Chrome, Safari, Edge, Opera */
.addAddressBodyInfo .form_input::-webkit-outer-spin-button,
.addAddressBodyInfo .form_input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.addAddressBody .addAddressBodyInfo p {
  margin: 0;
}

.addAddressBodyInfo .addAddressBodyInfoAddress {
  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 {
  width: 10%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.addAddressBodyInfoAddress .addAddressBodyInfoAddressSVG svg {
  width: var(--svg-size);
  fill: var(--svg-color);
}

.addAddressBodyInfoAddress .addAddressBodyInfoOldAddress {
  width: 90%;
}

.addAddressBodyInfoOldAddress .addAddressBodyInfoAddressTitle {
  font-weight: 600;
}

#addAddressBodyInfoCurrentAddressname,
#singleVendorAddAddressBodyInfoCurrentAddressname,
#deliveryPickupAddAddressBodyInfoCurrentAddressname,
#deliveryDropAddAddressBodyInfoCurrentAddressname,
#driverDropAddAddressBodyInfoCurrentAddressname,
#driverPickupAddAddressBodyInfoCurrentAddressname {
  display: none;
}

.addAddressBodyInfoOldAddress .addAddressBodyInfoCurrentAddress {
  font-size: small;
}

.addAddressBodyInfo label {
  width: 30%;
  margin-top: 10px;
  height: 44.8px;
  display: flex;
  align-items: center;
}

.addAddressBodyInfo .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;
}

.addAddressBodyInfo .form_input:focus {
  border: var(--border);
}

.addAddressBodyInfo .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;
  border-radius: var(--general-border-radius);
}

.addAddressBodyInfo .flag-icon-div img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.addAddressBodyInfo .flag-icon-div span {
  padding-left: 0.75rem;
}

.addAddressBodyInfo .flag-icon-div .form_input {
  padding-top: 0;
  padding-bottom: 0;
  border: 0;
  margin-top: 0;
}

.addAddressBodyInfo .addAddressButton,
.editAddressBodyInfo .editAddressButton {
  width: 100%;
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.addAddressBodyInfo .addAddressButton button,
.editAddressBodyInfo .editAddressButton button {
  border-radius: var(--general-border-radius);
  color: var(--general-background-color);
  width: var(--button-width);
  height: 6vh;
  letter-spacing: normal;
}

.addAddressBodyInfo .addAddressButton button:hover,
.addAddressBodyInfo .addAddressButton button:focus {
  background-color: var(--button-color);
}

/* end address */

/* google maps */
/** google maps */
.addAddressBody div[id^="map"],
.editAddressBody div[id^="map"] {
  height: 200px;
}

#description {
  font-family: Roboto;
  font-size: 15px;
  font-weight: 300;
}

#infowindow-content .title {
  font-weight: bold;
}

#infowindow-content {
  display: none;
}

#infowindow-content {
  display: inline;
}

.bac-card {
  background-color: var(--general-background-color);
  border: 0;
  border-radius: 2px;
  box-shadow: 0 1px 4px -1px var(--bac-card);
  margin: 10px;
  padding: 0 0.5em;
  font: 400 18px Roboto, Arial, sans-serif;
  overflow: hidden;
  font-family: Roboto;
  padding: 0;
}

#pac-container {
  padding-bottom: 12px;
  margin-right: 12px;
}

.pac-item {
  /* language */
  text-align: left;
}

.pac-item-query {
  /* language */
  text-align: left;
}

.pac-controls {
  display: inline-block;
  padding: 5px 11px;
}

.pac-controls label {
  font-family: Roboto;
  font-size: 13px;
  font-weight: 300;
}

input[id^="pac-input"] {
  background-color: var(--general-background-color);
  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);
}

input[id^="pac-input"]:focus {
  border-color: var(--button-color);
}

#title {
  color: var(--general-background-color);
  background-color: var(--pac-input);
  font-size: 25px;
  font-weight: 500;
  padding: 6px 12px;
}

#target {
  width: 345px;
}

.gm-style-mtc button {
  border-radius: 5px;
}
/* end google maps */

/* delivery */

.deliveryService .deliveryInfo .overWeight {
  color: var(--warning-color);
  font-weight: 400;
}


.deliveryPayment .deliveryPaymentMain .deliveryPaymentBody,
.scheduleBooking .scheduleBookingMain .scheduleBookingBody {
  padding: 10px;
}

.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;
}

.deliveryPayment .deliveryPaymentMain .deliveryPaymentBody,
.scheduleBooking .scheduleBookingMain .scheduleBookingBody {
  padding: 10px;
}

.deliveryPaymentBody .deliveryCouponDiv,
.deliveryPaymentBody .paymentDetails,
.deliveryPaymentBody .paymentMethods {
  padding: 10px 0;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 10px;
}

.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);
  /* margin-left: 2%; */
  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);
}

.deliveryPaymentBody .placeOrderButton {
  width: 100%;
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}


/* end delivery */

/* demand */

.demandService,
.deliveryService,
.driverService,
.valetService {
  width: 100%;
  min-height: 100%;
  background: var(--background);
  padding: 20px 10%;
}

.demandService .demandServiceVehicles,
.deliveryService .deliveryServiceVehicles,
.driverService .driverServiceTypes {
  display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-gap: 10px;
      padding: 10px 0;
}

.demandService .demandServiceVehicles input,
.deliveryService .deliveryServiceVehicles input,
.driverService .driverServiceTypes input {
  display: none;
}

.demandService .demandServiceVehicles label,
.deliveryService .deliveryServiceVehicles 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);
}

.demandService .demandServiceVehicles label:hover,
.demandService .demandServiceVehicles label:focus,
.deliveryService .deliveryServiceVehicles label:hover,
.deliveryService .deliveryServiceVehicles label:focus,
.driverService .driverServiceTypes label:focus,
.driverService .driverServiceTypes label:hover {
  border: var(--button-border-hover-style);
}

.demandService .demandServiceVehicles label .VechiclesSVG,
.deliveryService .deliveryServiceVehicles label .VechiclesSVG,
.driverService .driverServiceTypes label .VechiclesSVG {
  width: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.demandService .demandServiceVehicles label .VechiclesSVG svg,
.deliveryService .deliveryServiceVehicles 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;
}

.demandService .demandServiceVehicles label .VechiclesInfo,
.deliveryService .deliveryServiceVehicles label .VechiclesInfo,
.driverService .driverServiceTypes label .VechiclesSVG {
  padding: 5px;
  line-height: 1.3em;
  font-size: 15px;
}

.demandService input[type="radio"]:checked + .radio-label,
.deliveryService input[type="radio"]:checked + .radio-label,
.driverService input[type="radio"]:checked + .radio-label,
.WalletCards input[type="radio"]:checked + .radio-label,
.paymentMethodCards input[type="radio"]:checked + .radio-label,
.cartTipsValues input[type="radio"]:checked + .radio-label{
  border: var(--button-border-hover-style);
}

.dayPlanMeals input[type="radio"]:checked + .radio-label {
  border: var(--button-border-hover-style);
  box-shadow: none;
}

.SubscriptionType input[type="radio"]:checked + .radio-label {
  border: var(--button-border-hover-style);
  box-shadow: none;
}

.DeliverySlots 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;
  /* border-bottom: 1.8px solid var(--button-color); */
  box-shadow: none;
}

.MenuHeaderLi:has(input[type="radio"]:checked) {
  border-bottom: 1.8px solid var(--button-color);
}

/* .plans input[type="radio"]:checked + .plans {
  border-bottom: 1.8px solid var(--button-color);
} */

/* .demandService .demandServiceVehicles label img {
  height: 150px;
  width: 100%;
  object-fit: contain;
  background-color: var(--border-color);
} */

.demandService .demandServiceVehicles label p,
.deliveryService .deliveryServiceVehicles label p,
.driverService .driverServiceTypes label p {
  margin: 0;
}

.demandService .demandInfo,
.deliveryService .deliveryInfo,
.driverService .driverInfo {
  padding: 20px;
  background: var(--general-background-color);
  border-radius: 8px;
}

.demandService .demandInfo p,
.deliveryService .deliveryInfo p,
.driverService .driverInfo p {
  font-weight: 600;
  margin: 13px 0 2px 0;
}

.demandService .demandInfo .demandCategory,
.demandService .demandInfo .demandSubCategory {
  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 {
  display: flex;
      margin: 10px 0;
      align-items: center;
      justify-content: start;
      flex-wrap: wrap;
      gap: 5px;
}

.demandService .demandInfo .specification input {
  display: none;
}

.demandService .demandInfo .specification label {
  border: var(--button-border-style);
  padding: 5px 0;
  border-radius: var(--general-border-radius);
  cursor: pointer;
  text-align: center;
  /* box-shadow: 5px 5px 5px var(--icons-color); */
  width: var(--button-width);
}

.demandService .demandInfo .specification label:hover,
.demandService .demandInfo .specification label:focus {
  border: var(--button-border-hover-style);
}

.specifications .specification input[type="radio"]:checked + .radio-label {
  border: var(--button-border-hover-style);
  box-shadow: none;
}


.demandService .demandInfo .demandAddress,
.deliveryService .deliveryInfo .deliveryAddress,
.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 .form_input,
.deliveryService .deliveryInfo .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:focus,
.deliveryService .deliveryInfo .form_input:focus,
.driverService .driverInfo .form_input:focus {
  border: var(--button-border-hover-style);
}

/* Rompve arrow from input number */
/* Chrome, Safari, Edge, Opera */
.demandService .demandInfo .form_input::-webkit-outer-spin-button,
.demandService .demandInfo .form_input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.demandService .demandInfo .demandServiceSubmit,
.deliveryService .deliveryInfo .deliveryServiceSubmit,
.driverService .driverInfo .driverServiceSubmit,
.reservationBody .reservationSubmit {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px 0 10px 0;
}

.demandService .demandInfo .demandServiceSubmit button,
.deliveryService .deliveryInfo .deliveryServiceSubmit button,
.driverService .driverInfo .driverServiceSubmit button,
.reservationBody .reservationSubmit button {
  border-radius: var(--general-border-radius);
  color: var(--general-background-color);
  width: var(--button-width);
  height: 6vh;
  letter-spacing: normal;
}

.demandService .demandInfo .demandServiceSubmit button:hover,
.demandService .demandInfo .demandServiceSubmit button:focus,
.deliveryService .deliveryInfo .deliveryServiceSubmit button:hover,
.deliveryService .deliveryInfo .deliveryServiceSubmit button:focus,
.driverService .driverInfo .driverServiceSubmit button:hover,
.driverService .driverInfo .driverServiceSubmit button:focus,
.reservationBody .reservationSubmit button:hover,
.reservationBody .reservationSubmit button:focus  {
  background-color: var(--button-color);
}



.demandInfo .NoContactDiv,
.demandInfo .cashHandlingDiv {
  width: 100%;
  background-color: var(--general-background-color);
  padding: 0.75rem;
  padding-left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44.8px;
  margin-top: 10px;
}

.demandInfo .NoContactDiv .NoContactDivHeader,
.demandInfo .cashHandlingDiv .cashHandlingDivHeader {
  display: flex;
  align-items: center;
}

.NoContactLabel,
.cashHandlingLabel {
  margin-left: 10px;
}

.demandPayment .demandPaymentMain .demandPaymentHeader {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--border-color-rgb);
}

.demandPayment .demandPaymentMain .demandPaymentHeader h4 {
  width: 90%;
  text-align: center;
}

.demandPayment .demandPaymentMain .demandPaymentHeader svg {
  width: var(--svg-size);
  fill: var(--svg-color);
  cursor: pointer;
}

.demandPayment .demandPaymentMain .demandPaymentBody {
  padding: 10px;
}

.demandPayment .demandPaymentMain .demandPaymentBody {
  padding: 10px;
}

.demandPaymentBody .demandDistance {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.demandPaymentBody .paymentDetails,
.demandPaymentBody .paymentMethods {
  padding: 10px 0;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 10px;
}

.demandPaymentBody .placeOrderButton {
  width: 100%;
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}


/* end demand */

/* driver */



.GaragechargesDiv,
.RTAchargesDiv {
  display: flex;
    align-items: center;
}

.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);
  /* box-shadow: 5px 5px 5px var(--icons-color); */
  border-radius: 5px;
  padding: 0.75rem;
  display: flex
;
  align-items: center;
  justify-content: flex-start;
  height: 44.8px;
  margin-top: 10px;
  cursor: pointer;
}

.driverInfo .servicePayType .radio-label:hover,
.driverInfo .servicePayType .radio-label:focus {
  border: var(--button-border-hover-style);
}

.driverInfo .servicePayType input {
  display: none;
}

.driverInfo .servicePayType .servicePayTypeInfo {
  font-size: small;
}

.driverInfo .serviceHoursCount {
  display: flex
  ;
      margin: 10px 0;
      align-items: center;
      justify-content: start;
      flex-wrap: wrap;
      gap: 5px;
}

.driverInfo .serviceHoursCount input {
  display: none;
}

.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 .serviceHoursCount label:hover,
.driverInfo .serviceHoursCount label:focus {
  border: var(--button-border-hover-style);
}

.driverInfo .Cars {
  margin: 10px 0;
  gap: 10px;
  display: flex;
  align-items: center;
  justify-content: start;
  flex-wrap: wrap;
}

.driverInfo .Cars input {
  display: none;
}

.driverInfo .Cars label {
  background-color: var(--general-background-color);
  border: var(--border);
  border-radius: 5px;
  /* padding: 0 0 0 15px; */
  display: flex;
  align-items: center;
  justify-content: start;
  /* margin-top: 2%; */
  cursor: pointer;
  min-width: 200px;
}

.driverInfo .Cars label:hover,
.driverInfo .Cars label:focus {
  border: var(--button-border-hover-style);
}

.driverInfo .Cars .driveCarImage {
  display: flex;
      align-items: center;
      justify-content: flex-end;
      padding: 10px;
}

.driverInfo .Cars .driveCarImage img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  /* border: 1.8px solid #94e6ff; */
  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;
}

.driverPayment .driverPaymentMain .driverPaymentBody {
  padding: 10px;
}

.driverPayment .driverPaymentMain .driverPaymentBody {
  padding: 10px;
}

.driverPaymentBody .paymentMethods {
  padding: 10px 0;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 10px;
}

.driverPaymentBody .placeOrderButton {
  width: 100%;
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.driverPaymentBody .placeOrderButton button {
  border-radius: 5px;
  font-weight: 600;
  font-size: small;
}

/* end driver */

/* banners */
.bannersHeaders {
  display: grid;
  align-items: center;
  justify-content: center;
  background-color: var(--main-color);
  /* margin-bottom: 20px; */
  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;
}

.bannersHeadersBodyRight button {
  border-radius: 0 0 15px 0;
}

.bannersHeadersBodyRight button a {
  color: var(--general-background-color);
}

.bannersHeadersBodyRight button:hover,
.bannersHeadersBodyRight button:focus {
  background-color: var(--button-color-hover);
}

.bannersUlOne {
  display: grid !important;
  grid-template-columns: 1fr !important;
}

.banners .scroller {
  top: 50%;
  transform: translate(0, -50%);
}

.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.bannersUlOne {
  display: grid !important;
}

.bannersUl.bannersUlOne .liList{
  display: flex;
  align-items: center;
  justify-content: center;
} 

.bannersUl::-webkit-scrollbar {
  display: none;
}

.bannersUl.bannersUlOne .liImage img {
  width: 500px;
  height: 100px;
  border-radius: 0;
}
.bannerOne {
  margin: 25px 0;
}
/* end banners */

/* screen sizes  */


/* addresses */

.profile .addAddress,
.profile .editAddress,
.singleVendor .addAddress,
.singleVendor .editAddress,
.driverService .addAddress,
.driverService .driverPayment,
.singleVendor .cartPayment,
.singleVendor .changeSingleVendorDeliveryAddress,
.singleVendorMeal .mealPayment,
.demandService .addAddress,
.demandService .demandPayment,
.deliveryService .addAddress,
.deliveryService .deliveryPayment,
.deliveryService .scheduleBooking,
.valet .valetPayment,
.addToWallet {
  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%;
}

.profile .addAddress .addAddressMain,
.profile .editAddress .editAddressMain,
.singleVendor .addAddress .addAddressMain,
.singleVendor .editAddress .editAddressMain,
.driverService .addAddress .addAddressMain,
.driverService .driverPayment .driverPaymentMain,
.singleVendor .cartPayment .cartPaymentMain,
.singleVendor .changeSingleVendorDeliveryAddress .changeSingleVendorDeliveryAddressMain,
.singleVendorMeal .mealPayment .mealPaymentMain,
.demandService .addAddress .addAddressMain,
.demandService .demandPayment .demandPaymentMain,
.deliveryService .addAddress .addAddressMain,
.deliveryService .deliveryPayment .deliveryPaymentMain,
.deliveryService .scheduleBooking .scheduleBookingMain,
.valet .valetPayment .valetPaymentMain,
.addToWalletBody  {
  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;
}

.profile .addAddress .addAddressMain::-webkit-scrollbar,
.profile .editAddress .editAddressMain::-webkit-scrollbar,
.singleVendor .addAddress .addAddressMain::-webkit-scrollbar,
.singleVendor .editAddress .editAddressMain::-webkit-scrollbar,
.driverService .addAddress .addAddressMain::-webkit-scrollbar,
.driverService .driverPayment .driverPaymentMain::-webkit-scrollbar,
.singleVendor .cartPayment .cartPaymentMain::-webkit-scrollbar,
.singleVendor .changeSingleVendorDeliveryAddress .changeSingleVendorDeliveryAddressMain::-webkit-scrollbar,
.singleVendorMeal .mealPayment .mealPaymentMain::-webkit-scrollbar,
.demandService .addAddress .addAddressMain::-webkit-scrollbar,
.demandService .demandPayment .demandPaymentMain::-webkit-scrollbar,
.deliveryService .addAddress .addAddressMain::-webkit-scrollbar,
.deliveryService .deliveryPayment .deliveryPaymentMain::-webkit-scrollbar,
.deliveryService .scheduleBooking .scheduleBookingMain::-webkit-scrollbar,
.valet .valetPayment .valetPaymentMain::-webkit-scrollbar   {
  display: none;
}


.cartPayment .cartPaymentMain .cartPaymentHeader,
.changeSingleVendorDeliveryAddress .changeSingleVendorDeliveryAddressMain .changeSingleVendorDeliveryAddressHeader,
.mealPayment .mealPaymentMain .mealPaymentHeader,
.addAddress .addAddressMain .addAddressHeader,
.editAddress .editAddressMain .editAddressHeader,
.deliveryPayment .deliveryPaymentMain .deliveryPaymentHeader,
.scheduleBooking .scheduleBookingMain .scheduleBookingHeader,
.valetPayment .valetPaymentMain .valetPaymentHeader,
.driverPayment .driverPaymentMain .driverPaymentHeader  {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--border-color-rgb);
}

.cartPayment .cartPaymentMain .cartPaymentHeader h4,
.changeSingleVendorDeliveryAddress .changeSingleVendorDeliveryAddressMain .changeSingleVendorDeliveryAddressHeader h4,
.mealPayment .mealPaymentMain .mealPaymentHeader h4,
.addAddress .addAddressMain .addAddressHeader h4,
.editAddress .editAddressMain .editAddressHeader h4,
.deliveryPayment .deliveryPaymentMain .deliveryPaymentHeader h4,
.scheduleBooking .scheduleBookingMain .scheduleBookingHeader h4,
.valetPayment .valetPaymentMain .valetPaymentHeader h4,
.driverPayment .driverPaymentMain .driverPaymentHeader h4  {
  width: 90%;
  text-align: center;
}

.cartPayment .cartPaymentMain .cartPaymentHeader svg,
.changeSingleVendorDeliveryAddress .changeSingleVendorDeliveryAddressMain .changeSingleVendorDeliveryAddressHeader svg,
.mealPayment .mealPaymentMain .mealPaymentHeader svg,
.addAddress .addAddressMain .addAddressHeader svg,
.editAddress .editAddressMain .editAddressHeader svg,
.deliveryPayment .deliveryPaymentMain .deliveryPaymentHeader svg,
.scheduleBooking .scheduleBookingMain .scheduleBookingHeader svg,
.valetPayment .valetPaymentMain .valetPaymentHeader svg,
.driverPayment .driverPaymentMain .driverPaymentHeader svg {
  width: var(--svg-size);
  fill: var(--svg-color);
  cursor: pointer;
}

/* .oldOrdersDetailsHeadClose svg {
  width: 16px;
  fill: var(--main-color);
  cursor: pointer;
} */


/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
}

@media (max-width: 1400px) {
  .mainBody, .navbar, .ResultBody {
      width: 1036px;
  }

  .newHomeDesign {
    width: 1036px;
  }

  .newHomeDesignOffers,
  .newHomeDesignRest {
    width: 507px;
  }

  .newHomeDesignOffers .popularRestaurantButton .popularRestaurantImage, 
  .newHomeDesignRest .popularRestaurantButton .popularRestaurantImage, 
  .newHomeDesignOffers .popularRestaurantImage img,
  .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) {
  
  .mainBody, .navbar, .ResultBody {
    width: 1000px;
  }

  .newHomeDesign {
    width: 1000px;
  }

  .newHomeDesignOffers,
  .newHomeDesignRest {
    width: 489px;
  }

  .newHomeDesignOffers .popularRestaurantButton .popularRestaurantImage, 
  .newHomeDesignRest .popularRestaurantButton .popularRestaurantImage, 
  .newHomeDesignOffers .popularRestaurantImage img,
  .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) {

  .mainBody, .navbar, .ResultBody {
    width: 871px;
  }

  .newHomeDesign {
    width: 871px;
  }

  .newHomeDesignOffers,
  .newHomeDesignRest {
    width: 425px;
  }

  .newHomeDesignOffers .popularRestaurantButton .popularRestaurantImage, 
  .newHomeDesignRest .popularRestaurantButton .popularRestaurantImage, 
  .newHomeDesignOffers .popularRestaurantImage img,
  .newHomeDesignRest .popularRestaurantImage img {
    width: 188px !important;
    height: 131px !important;
  }

  /* .popularRestaurantName {
    padding: 15px;
    font-size: small;
    min-height: 62px;
  } */

  .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;
  }


  /* navbar  */

  /* Search */
  .buttons {
    width: 20%;
  }

  .ResultsBodyResultsItems {
    grid-template-columns: 1fr 1fr 1fr;
  }
  /* end Search */

  /* buttons */
  .buttons, .logo {
    width: 20%;
  }

  .search {
    width: 60%;
  }

  .accountButtonFavourite,
  .accountButtonCart,
  .accountButtonaccount {
    display: none !important;
  }

  .accountButtonMenu {
    display: flex !important;
  }
  /* end buttons */

  /* end navbar  */
  .singleVendor {
    width: 60%;
  }

  .singleVendorCart {
    width: 40%;
  }

  .singleVendorMeal {
    width: 100%;
  }
  
  /* profile control */
  .profile .profileBody {
    padding: 2%;
  }

  .profileBody .profileBodySection {
    width: 100%;
  }
  /* end profile control */

  .sideBarFavourite .popularRestaurantImage,
  .sideBarFavourite img {
    width: 100%;
  }
  
  .bannersHeadersBodyRight button {
    padding: 0;
  }

  .bannersHeadersBodyRight button a {
    font-size: smaller;
  }

  /* meal */

  /* end meal */


    /** delivery */
    .deliveryService .deliveryInfo {
      padding: 20px 15%;
    }
    /* end delivery */

    .MenuSectionContent .MenuSectionContentItem {
      width: 100%;
    }
}

@media (max-width: 991.98px) {
  
  .mainBody, .navbar, .ResultBody {
    width: 692px;
  }

  .newHomeDesign {
    display: flex;
    flex-wrap: wrap;
    width: 692px;
  }

  .newHomeDesignOffers,
  .newHomeDesignRest {
    width: 681px;
    margin: 5px 0;
  }

  .newHomeDesignOffers .popularRestaurantButton .popularRestaurantImage, 
  .newHomeDesignRest .popularRestaurantButton .popularRestaurantImage, 
  .newHomeDesignOffers .popularRestaurantImage img,
  .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;
  }

  /* navbar  */

  .singleVendor {
    width: 100%;
  }


  /* .singleVendorCart {
    display: none;
  } */

  .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;
  }

  .singleVendorReservation {
    width: 100%;
  }

  .singleVendorReservationCart {
        width: 100%;
        display: block;
        position: relative;
        background: var(--background);
  }

  .singleVendorReservation .singleVendorHeader,
  .singleVendorReservation .singleVendorHeader .singleVendorInformation,
  .singleVendorReservationCart .reservationBody{
    height: fit-content;
  }

  /* Search */
  .ResultsBodyResultsItems {
    grid-template-columns: 1fr 1fr 1fr;
  }
  /* end Search */

  /* end navbar  */

  /* orders */

  .oldOrdersBody {
    width: 100%;
  }

  .oldOrdersDetails {
    width: 100%;
    position: fixed;
    top: 12vh;
    right: 0;
    background-color: var(--general-background-color);
    height: 88vh;
  }

  .oldOrdersDetailsHeadClose svg {
    width: var(--svg-size);
    fill: var(--svg-color);
    cursor: pointer;
  }

  /* orders */

  /** single Vendor */

  .singleVendorInformationContentTitle {
    font-size: xx-large;
  }

  .MenuSectionContent .MenuSectionContentItem {
    width: 100%;
  }

  .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;
  }

  .VendorMenuCartSection .VendorMenuCart {
    max-width: 500px;
  }

  .TitleSectionTitleCloseIcon {
    display: block;
  }

  .singleVendorMenuFooter {
    width: 100%;
    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;
    background-color: var(--general-background-color);
  }

  .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;
  }

  

  /* change address */
  .singleVendor
  .changeSingleVendorDeliveryAddress
  .changeSingleVendorDeliveryAddressMain {
    width: 100%;
  }


  .sideBarFavourite .popularRestaurantImage,
  .sideBarFavourite img {
    width: 100%;
  }

  /* end single vendor */

  /* meal */

  .singleVendorMeal .dayMeals .dayPlans .dayPlanMeals {
    grid-template-columns: 1fr 1fr;
  }

  .singleVendorMeal .days, .singleVendorMeal .types {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  /* end meal */

  .demandService .demandServiceVehicles, 
  .deliveryService .deliveryServiceVehicles, 
  .driverService .driverServiceTypes {
    grid-template-columns: 1fr;
  }

  .demandService .demandServiceVehicles label, 
  .deliveryService .deliveryServiceVehicles label, 
  .driverService .driverServiceTypes label {
    min-height: 15vh;
  }

  .paymentMethods .paymentMethodCards {
    grid-template-columns: 1fr 1fr 1fr;
  }

}

@media (max-width: 767.98px) {
  /* .mainBody,
  .ResultBody {
    width: 343px;
  } */

  .mainBody,
  .ResultBody, 
  .mainBodyMainPage, 
  .navbar {
    width: 575px;
  }

  .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, 
  .newHomeDesignRest .popularRestaurantButton .popularRestaurantImage, 
  .newHomeDesignOffers .popularRestaurantImage img,
  .newHomeDesignRest .popularRestaurantImage img {
    width: 258px !important;
    height: 180px !important;
  }

  /* navbar  */

  /* Search */
  .searchSection {
    width: 62%;
  }

  .ResultsBodyResultsItems {
    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;
  }

  /* .searchIcon {
    width: 6.5%;
  } */

  /* .closeIcon {
    width: 6.5%;
  } */

  /* end Search */

  /* buttons */
  .buttons {
    width: 20%;
  }


  /* end navbar  */

  .profileBody .profileBodyInfSection .profileForm .form_input,
  .profileBody .profileBodyCPSection .CPForm .form_input {
    width: 100%;
  }

  .profileBody .profileBodyInfSection .profileForm label, 
  .profileBody .profileBodyCPSection .CPForm label {
    width: 100%;
  }

  .profileBody .profileBodyInfSection .profileForm .flag-icon-div {
    width: 100%;
  }

  .profileBodyAddress .profileBodyAddressMap {
    width: 100%;
    height: 45vh;
  }

  .profileBodyAddress .profileBodyAddressDetails {
    width: 100%;
  }
  /* search result */

  .ResultsBodyResults {
    grid-template-columns: 1fr 1fr;
  }

  /* end search result */

  .itemPopup .popup {
    width: 90%;
  }


  /* single vendor */

  .title {
    font-size: larger;
  }
  
  .sideBarFavourite .popularRestaurantImage,
  .sideBarFavourite img {
    width: 100%;
  }

     
  /* add address */

  .singleVendor .changeSingleVendorDeliveryAddress {
    padding: 0;
  }

  .singleVendor .addAddress, .singleVendor .editAddress {
    padding: 0;
  }

  .singleVendor .addAddress .addAddressMain, .singleVendor .editAddress .editAddressMain {
    width: 100%;
  }
  /* end add address */

  /* end single vendor */

    /* meal */

    .singleVendorMeal .dayMeals .dayPlans .dayPlanMeals {
      grid-template-columns: 1fr;
    }

    .SubscriptionRepetations input {
      width: 90%;
    }

    .singleVendorMeal .headerImage img {
      width: 90%;
    }
  
    /* end meal */

  /* */

  .filters {
    width: 220px;
  }

  .ecommerceBody {
    width: calc(100% - 220px);
  }

  /* profile control */
  .profile .addAddress .addAddressMain,
  .profile .editAddress .editAddressMain {
    width: 90%;
  }

  .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::before {
    content: "";
    position: absolute;
    transform: translateY(-50%);
    top: -1vh;
    right: 45%;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid transparent;
    border-bottom: 7px solid var(--button-color);
  } */

  .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;
        /* margin-right: 2%; */
        width: auto;
        letter-spacing: normal;
        margin: auto;
  }

  

    /* cards */
    .profileBodyCardsSectionBody {
      grid-template-columns: 1fr;
    }
    /* end cards */

    /* wallet details */
    .walletDetailsBody {
      grid-template-columns: 1fr;
    }

    /* end wallet details */

    /* cars */
    .profileBodyCarsSectionBody {
      grid-template-columns: 1fr;
    }
    /* end cars */
  /* end profile control */

  /* body service */
  .bodyServices {
    width: 220px;
  }

  .bodyServices .bodyServicesUl {
    grid-template-columns: 1fr 1fr;
  }
  /* end body service */

  /* filters */
  .mainBody .filters {
    display: none;
  }

  .popupBody {
    overflow: auto;
  }

  .popupBody::-webkit-scrollbar {
    display: none;
  }

  .popupBody .filters {
    width: 100%;
  }

  .filter .arrow {
    width: 4%;
  }

  .ulFilter {
    margin-left: 0 !important;
  }

  .liFilter {
    padding: 1% 3%;
  }

  /* end filters */

  /* core */
  .ecommerceBody {
    width: 100%;
  }

  .ecommerceCoreBody {
    width: calc(100% - 220px);
  }
  /* end core */

  /* google maps */
  .gm-style-mtc button {
    display: none !important;
  }

  .gmnoprint.gm-bundled-control.gm-bundled-control-on-bottom .gm-svpc {
    display: none !important;
  }

  input[id^="pac-input"] {
    left: 20px !important;
    width: 70%;
  }
  /* end google maps */

  /* single vendor */
  .singleVendorInformation {
    display: block;
    padding-right: 50px;
  }

  .singleVendorInformationImg {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .singleVendorInformationImg img {
    width: 100%;
  }

  .singleVendorHeader {
    height: 70vh;
  }

  .singleVendorInformation {
    height: 70vh;
  }

  /* Vendor item */
  .MenuSectionContent .MenuSectionContentItem {
    width: 100%;
  }
  
  /* vendor payment */
  .singleVendor .cartPayment .cartPaymentMain {
    width: 100%;
  }
  /* end single vendor */

  /* reservation -*/
  .vendorMenu {
    width: 100%;
  }
  /* end reservation */ 

  /* meal */

  .mealPayment .mealPayment{
    padding: 1%;
  }

  .mealPayment .mealPayment .mealPaymentMain{
    width: 100%;
  }


  /* end meal */

  /* delivery */

  .deliveryService .deliveryServiceVehicles {
    grid-template-columns: 100%;
    grid-gap: 2%;
    padding: 5% 5%;
  }

  .deliveryService .deliveryInfo {
    padding: 20px 5%;
  }

  .deliveryService .addAddress,
  .deliveryService .deliveryPayment,
  .deliveryService .scheduleBooking {
    padding: 1%;
  }

  .deliveryService .addAddress .addAddressMain {
    width: 100%;
  }

  .deliveryService .addAddress {
    padding: 1%;
  }

  .deliveryService .addAddress .addAddressMain {
    width: 100%;
  }

  .deliveryService .addAddress .addAddressMain,
  .deliveryService .deliveryPayment .deliveryPaymentMain,
  .deliveryService .scheduleBooking .scheduleBookingMain {
    width: 100%;
  }

  .deliveryService .deliveryInfo .deliveryAddress {
    height: 70px;
  }


  /* end delivery */

  /* reservation */
  .reservationBody {
    padding: 50px 5%;
  }

  /* end reservation */

  /* valet */
  .valet .valetBody {
    padding: 50px 5%;
  }

  .valet .valetPayment {
    padding: 1%;
  }

  .valet .valetPayment .valetPaymentMain {
    width: 100%;
  }
  /* end valet */

  /* driver */
  .driverService .addAddress {
    padding: 1%;
  }

  .driverService .addAddress .addAddressMain {
    width: 100%;
  }

  .driverService .driverServiceTypes {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr;
  }

  .driverService .driverInfo {
    padding: 20px 5%;
  }

  .driverService .addAddress,
  .driverService .driverPayment {
    padding: 1%;
  }

  .driverService .addAddress .addAddressMain,
  .driverService .driverPayment .driverPaymentMain {
    width: 100%;
  }

  /* end driver */

  /* demand */
  .demandService .demandServiceVehicles {
    grid-template-columns: 100%;
    grid-gap: 2%;
    padding: 5%;
  }

  .demandService .demandInfo {
    padding: 20px 5%;
  }

  .demandService .addAddress,
  .demandService .demandPayment {
    padding: 1%;
  }

  .demandService .addAddress .addAddressMain,
  .demandService .demandPayment .demandPaymentMain {
    width: 100%;
  }

  /* add to wallet */
  .addToWalletBody {
    width: 100%;
  }

  .profileBodyWalletControlAdd {
    width: 80%;
  }

  .walletBallanceInput {
    width: 80%;
  }

  .addToWalletCards {
    grid-template-columns: 1fr 1fr;
  }

  /* end add to wallet */

  
  .paymentMethods .paymentMethodCards {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 575.98px) {

  .buttons, .logo {
    width: 40%;
  }

  .search {
    z-index: 12;
    position: absolute;
    width: 100%;
    left: 0;
    display: none;
  }

  .searchSection {
    width: 100%;
  }

  .navbar {
    width: 330px;
    position: relative;
  }

  .mainBodyMainPage {
    width: 343px;
  }

  .newHomeDesign {
    width: 343px;
  }

  .newHomeDesignOffers,
  .newHomeDesignRest {
    width: 343px;
  }

  .mainBody,
  .ResultBody, 
  .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, 
  .newHomeDesignRest .popularRestaurantButton .popularRestaurantImage, 
  .newHomeDesignOffers .popularRestaurantImage img,
  .newHomeDesignRest .popularRestaurantImage img {
    width: 311px !important;
    height: 216px !important;
  }
  
  .newHomeDesign h3 {
    font-size: small;
  }


  .seachIconeSmall {
    display: flex;
    align-items: center;
    position: relative;
    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;
  }

  /* buttons */

  /* end buttons */

  /* search result */

  .searchResult{
    position: fixed;
    left: 0;
  }

  .ResultsBodyResults {
    grid-template-columns: 1fr;
  }
/* 
  .closeIcon {
    width: 14.5%;
  } */

  /* end search result */

  /* end navbar  */

  /* services in body */

  .bodyServices {
    width: 120px;
  }

  .ecommerceCoreBody {
    width: calc(100% - 120px);
  }

  .bodyServices .bodyServicesUl {
    grid-template-columns: 1fr;
  }
  /* end services in body */
  
  .latestOfferButton .latestOfferImage, .latestOfferImage img {
    width: 200px;
    height: 112px;
  }

  /* banner */
  .bannersHeadersBody {
    width: 90%;
    gap: 5%;
  }
  .scroller {
    display: none;
  }

  .servicesBarContainerUL {
    border: none !important;
  }
  
  .bannersHeaders {
    height: 120px;
  }

  .bannersHeaders .bannersHeadersImage {
    width: 250px;
    height: 50px;
  }

  .bannersUl.bannersUlOne .liImage img {
    width: 250px;
    height: 50px;
  }
  /* end banner */

  .ulList {
    margin-left: 5px !important;
  }

  .bannersUl {
    margin-left: 0px !important;
  }

  .filterButton{
      width: 40%;
  }

  /* .filterButton:hover,
  .filterButton:focus {
    background-color: var(--button-color-hover);
  } */
  /* helper */
  /* download */
  .downloadAppMain {
    min-width: 90%;
  }

  .addCardMain {
    min-width: 90%;
  }

  /* end helper */

  /* Profile control */
  .profileBody .profileBodyInfSection .profileForm label,
  .profileBody .profileBodyInfSection .profileForm .form_input,
  .profileBody .profileBodyInfSection .profileForm .flag-icon-div,
  .profileBodyInfSection .profileForm .genderInput,
  .profileBody .profileBodyCPSection .CPForm label,
  .profileBody .profileBodyCPSection .CPForm .form_input {
    width: 100%;
  }

  .profileBodyInfSection .profileForm .genderInput {
    margin: 0;
  }

  /* Add address */
  .profile .addAddress,
  .profile .editAddress {
    padding: 1%;
  }

  .profile .addAddress .addAddressMain,
  .profile .editAddress .editAddressMain {
    width: 100%;
  }


  .profileBodyAddressMap .changeAddressControl {
    margin: 5px 0;
  }


  .profile .profileHeader {
    padding: 1%;
  }

  .profileHeader .profileInfo .updateimage {
    padding: 5px 10px;
  }

  /* end Profile control */

  /* single vendor */
  .singleVendorHeader {
    height: 75vh;
  }

  .sideBarFavourite .popularRestaurantImage,
  .sideBarFavourite img {
    width: 100%;
  }

  .scheduleBookingMain .scheduleBookingBody .deliveryDateTime, .scheduleBookingMain .scheduleBookingBody .deliverySubmit {
    width: 80%;
  }

  .itemPopup .popup  {
    width: 100%;
    height: 100%;
  }
  


  /* meal */
  .singleVendorMeal .days, .singleVendorMeal .types {
    grid-template-columns: 1fr 1fr;
  }
  /* end meal */

  /* valet */
  .valet .valetBody .valetSubmit button {
    width: 100%;
  }

  /* wallet */
  .WalletCards {
    grid-template-columns: 1fr 1fr;
  }
  
  .paymentMethods .paymentMethodCards {
    grid-template-columns: 1fr;
  }
}

