@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@200..1000&display=swap');
@import url('./variables.css');


html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-family-base);
  direction: ltr;
  word-break: break-word;
  background-color: var(--background-primary);
  color: var(--primary-foreground);
  text-align: start;
}

body .bodyOverflow {
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  background: var(--background-primary);
}

.container {
  max-width: var(--container-width) !important;
}

.dropdown-toggle::after {
  margin: 0 0 -2px 6px;
}

.dropdown-item.active,
.dropdown-item:active {
  color: #fff;
  text-decoration: none;
  background-color: #ccc;
}

textarea.form-control:focus {
  height: auto;
  border: 1px solid var(--primary-border);
  box-shadow: none;
}

svg {
  flex-shrink: 0;
}

select {
  background-image: url('../Icons/paymentDropdownDownArrow.svg') !important;
  background-repeat: no-repeat !important;
  background-position: calc(100% - 15px) 50% !important;
  background-size: 25px 25px !important;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.whiteDropdown select {
  background-image: url('../chevron-down-white.png') !important;
  background-repeat: no-repeat !important;
  background-position: calc(100% - 3px) 50% !important;
  background-size: 25px 25px !important;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: 6px 30px 6px 10px;
}

button:focus {
  box-shadow: none !important;
}


.form-control::placeholder {
  color: #6c757d;
  opacity: 1;
  font-size: 16px !important;
}

.form-control {
  font-size: 16px !important;
  border: 1px solid var(--primary-border);
  background-color: transparent !important;
}

.phoneColor input {
  background: var(--primary-bg) !important;
  color: var(--common-primary-white-foreground) !important;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border: 0 !important;
  text-align: center;
  font-weight: 700;
}

.phoneNumber input {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-left: 0 !important;
}

/* * Just a quick hamburger */

.card-header button {
  padding: 0 !important;
}

.card-body {
  padding: 10px 20px !important;
}

/* header */

.cardSection .card {
  background-color: transparent !important;
  border: none !important;
}

::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px #dedede;
  border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--primary-bg);
  border-radius: 10px;
}

::-webkit-scrollbar-corner {
  width: 3px;
}


.commandSection {
  word-break: break-word;
  max-width: 200px;
}

.ratingSection {
  width: 15%;
}

.redux-toastr .toastr.rrt-error {
  background-color: #e83a30 !important;
}

.mapSection .gm-style-mtc {
  display: none !important;
}

.mapSection .gm-fullscreen-control {
  display: none !important;
}

.mapSection .gm-svpc {
  display: none !important;
}

.mapSection {
  position: relative;
}

.mapSection .link {
  position: absolute;
  right: 10px;
  display: block;
  top: 5px;
  background: var(--common-black-bg);
  color: var(--common-primary-white-foreground) !important;
  font-weight: 700;
  padding: 6px;
  font-size: 12px;
  z-index: 1;
  border-radius: 4px;
  cursor: pointer;
}

.gm-style {
  background-color: #a4ddf5 !important;
}

.redux-toastr .toastr.rrt-success {
  padding: 10px 0 !important;
}

.redux-toastr .toastr.rrt-error {
  padding: 10px 0 !important;
}

.redux-toastr .toastr .close-toastr {
  font-size: 24px !important;
  top: 10px !important;
  right: 5px !important;
  opacity: 1.5 !important;
  color: #fff !important;
  font-weight: 700 !important;
  height: 33px !important;
}

.react-switch-bg .toggleRightArrow {
  position: relative;
  top: 1px;
  left: -18px;
  z-index: 2;
  transition: all 0.1s ease;
}

.react-switch-bg .toggleLeftArrow {
  position: relative;
  top: 1px;
  right: -28px;
  z-index: 2;
  transition: all 0.1s ease;
}

.searchInputRTL .form-control,
.assignSearchInputRTL .form-control {
  background-color: var(--primary-input-bg) !important;
  padding: 6px 12px 6px 40px !important;
  background-image: url('../Icons/search.svg');
  background-repeat: no-repeat;
  background-size: 15px;
  background-position: calc(0% + 14px) 50%;
}

.badge-danger {
  line-height: 9px;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px #fcfdff inset !important;
}

.bookingAccordion .card {
  border: inherit;
  background-color: transparent;
}

.bookingAccordion .card-header {
  padding: 0 0 0 5px;
  background-color: transparent;
  border-bottom: transparent;
}

.bookingAccordion .btn-link {
  font-weight: 600 !important;
  color: var(--primary-foreground) !important;
  text-decoration: none;
  text-align: left;
}

.bookingAccordion .card-header {
  position: relative;
  display: grid;
  grid-template-columns: 100% auto;
  padding-left: 5px;
}

.bookingAccordion .btn-link svg {
  position: relative;
  top: -1px;
  left: 4px;
}

.bookingAccordion .accordion>.card {
  padding-left: 7px;
  overflow: visible;
}

.bookingAccordion .card-body {
  padding: 4px 0 0 5px !important;
}

.bookingAccordion {
  padding-bottom: 10px;
}

.jobDetailAccordion .card-header button {
  width: 100%;
  color: var(--primary-foreground);
  text-decoration: none;
  text-align: left;
  display: flex;
}

.jobDetailAccordion .card-header {
  background-color: var(--background-quaternary);
  padding: 10px 15px;
}

.jobDetailAccordion .card-body {
  padding: 0 !important;
}

.jobDetailAccordion .card {
  box-shadow: 0 2px 15px #0000000d;
  border-radius: 10px 0 !important;
  border: inherit;
  background-color: var(--background-tertiary);
}

.jobDetailAccordion {
  min-width: 400px;
  padding-right: 13px;
}

.jobDetailAccordion .accordion {
  margin: 5px 0 30px;
}

.ril__navButtons:focus {
  outline: none !important;
}

.form-control:disabled {
  background-color: var(--primary-disable) !important;
  cursor: not-allowed;
}

.printOnly {
  display: none;
}

.darkModeLoader {
  display: none;
}

/* pagination */

.btnTextRightRTL {
  text-align: right !important;
  display: flex;
  align-items: center;
  gap: 4px;
  position: relative;
  right: 15px;
}

.accordionTextRightRTL {
  padding-right: 15px;
}

.alignRightRTLPrint {
  padding-left: 15px;
}

.manageJobTextWrap {
  white-space: nowrap;
  word-break: break-word;
}

.Loader__background {
  z-index: 1 !important;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: none !important;
}

.imageUploadTooltipContainer {
  padding: 8px;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  background-color: var(--tooltip-bg) !important;
  border: 1px solid var(--tooltip-bg) !important;
  color: var(--tooltip-foreground) !important;
}

.imageUploadTooltipContainer.bs-popover-top>.arrow::after {
  border-top-color: var(--common-tooltip-color) !important;
}

.imageUploadTooltipContainer.bs-popover-top>.arrow::before {
  border-top-color: var(--common-tooltip-color) !important;
}

.imageUploadTooltipContainer.bs-popover-bottom>.arrow::after {
  border-bottom-color: var(--common-tooltip-color) !important;
}

.imageUploadTooltipContainer.bs-popover-bottom>.arrow::before {
  border-bottom-color: var(--common-tooltip-color) !important;
}

.imageUploadTooltipContainer.bs-popover-top>.arrow::after {
  border-top-color: var(--tooltip-bg) !important;
}

.imageUploadTooltipContainer.bs-popover-top>.arrow::before {
  border-top-color: var(--tooltip-bg) !important;
}

.imageUploadTooltipContainer.bs-popover-bottom>.arrow::after {
  border-bottom-color: var(--tooltip-bg) !important;
}

.imageUploadTooltipContainer.bs-popover-bottom>.arrow::before {
  border-bottom-color: var(--tooltip-bg) !important;
}

.noMargin {
  margin: 0 !important;
}

.mb30 {
  margin-bottom: 30px !important;
}

.mb0 {
  margin-bottom: 0 !important;
}

.homeHeaderBrandLogo {
  width: auto;
  max-width: 160px !important;
  height: 100%;
  max-height: 70px !important;
  object-fit: contain;
  object-position: left;
}

.mt14 {
  margin-top: 14px;
}

.marginAuto {
  margin: auto;
}

.addPageHeadingFlexContainer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  grid-gap: 18px;
  flex-wrap: wrap;
}

.addPageDetailsGridContainer {
  display: grid;
  grid-template-columns: 374px 1fr;
  gap: 30px;
  grid-gap: 30px;
  align-items: flex-start;
}

.commonAccordionContainer {
  border: 1px solid var(--primary-border);
  border-radius: 4px;
  background: var(--accordion-bg);
}

.commonAccordionHeading,
.commonAccordionHeading:hover,
.commonAccordionHeading:focus {
  padding: 14px 18px;
  border: unset;
  outline: unset;
  box-shadow: unset;
  background: transparent;
  display: flex;
  align-items: center;
  width: 100%;
  font-size: 16px;
  line-height: 26px;
  font-weight: 700;
  color: var(--primary-foreground);
  justify-content: space-between;
}

.commonAccordionBody {
  border-top: 1px solid var(--primary-border);
}

.commonAccordionBodyWrapper {
  padding: 18px;
}

.commonAccordionBtnContainer {
  text-align: right;
  margin-top: 18px;
}

.accordionArrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
}

.accordionArrowDown {
  transform: rotate(0);
  transition: all 0.4s linear;
}

.accordionArrowUp {
  transform: rotate(-180deg);
  transition: all 0.4s linear;
}

.commonAccordionInfoContainer {
  margin-top: 12px;
}

.commonMapContainer {
  overflow: hidden;
  width: 100%;
  position: relative;
  border: 1px solid var(--primary-border);
  border-radius: 4px;
}

.commonBookingSwitchContainer {
  display: flex;
  align-items: center;
  background: var(--modal-bg);
  gap: 12px;
  grid-gap: 12px;
  padding: 12px;
  justify-content: center;
  font-size: 16px;
  line-height: 26px;
  font-weight: 600;
  border-radius: 4px;
}

.commonBookingSwitchContainer span:first-child,
.commonBookingSwitchContainer span:last-child {
  width: 100%;
  display: inline-block;
  color: var(--primary-foreground);
  max-width: 50%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.commonBookingSwitchContainer span:first-child {
  text-align: right;
}

.commonBookingSwitchContainer span:last-child {
  text-align: left;
}

.react-switch-handle {
  box-shadow: unset !important;
}

.commonAccordionDivider {
  margin: 18px 0;
  border-top: 1px solid var(--primary-border);
}

.subCategoryImgContainer {
  position: relative;
  width: 100%;
  height: 114px;
  border-radius: 0 18px 0 18px;
}

.subCategoryImgContainer img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.commonMapBox {
  position: relative;
}

.commonMapCheckBoxContainer {
  position: absolute;
  display: flex;
  align-items: center;
  padding: 6px 12px;
  background: var(--background-quaternary);
  color: var(--primary-foreground);
  border-radius: 4px;
  box-shadow: 0 4px 9px 0 #00000029;
  gap: 6px;
  grid-gap: 6px;
  top: 18px;
  left: 18px;
  z-index: 1;
}

.commonShowMap {
  position: relative;
  width: 100%;
  height: 244px;
}

.commonSubCategorySliderBox {
  border-top: 1px solid var(--primary-border);
}

.commonSubCategorySliderHeading {
  padding: 24px 18px 0;
}

.commonProviderHeading,
.commonSubCategorySliderHeading {
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
  color: var(--primary-foreground);
  margin-bottom: 12px;
  text-align: start;
}

.commonProviderBox {
  padding: 24px 18px;
}

.commonSubCategoryPricingInfoContainer {
  padding: 0 18px 24px;
}

.subCategorySliderItemWrapper {
  background: var(--secondary-gray-bg);
  border-radius: 0 6px 6px 0;
}

.subCategoryInfoContainer {
  padding: 6px 12px 12px;
}

.subCategoryImgBox {
  padding: 6px;
}

.commonNoResultContainer {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.subCategorySliderBox {
  position: relative;
  z-index: 1;
}

.subCategorySliderSpace {
  padding: 0 18px 24px;
}

.commonHeading16 {
  font-size: 16px;
  font-weight: 600;
  line-height: 26px;
}

.subCategoryInfoHeading {
  color: var(--primary-foreground);
  margin-bottom: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: start;
}

.subCategoryInfoSubHeading {
  margin-bottom: 3px;
  color: var(--secondary-foreground);
  text-align: start;
}

.subCategoryInfoAmount {
  margin-bottom: 3px;
  color: var(--primary-bg);
  text-align: start;
}

.subCategoryInfoModalLink {
  display: inline-block;
  font-size: 16px;
  font-weight: 500;
  line-height: 26px;
  color: var(--primary-link-foreground);
  text-decoration: underline;
  cursor: pointer;
  margin-bottom: 12px;
}

.commonHeading14 {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
}

.subCategoryImgBtnContainer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  grid-gap: 12px;
}

.subCategoryImgBtn {
  display: inline-block;
  width: 44px;
  height: 44px;
  position: relative;
  cursor: pointer;
}

.subCategoryImgBtn img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.subCategoryImgBtnDisabled {
  cursor: not-allowed;
}

.subCategorySliderArrowBtnImg {
  width: 10px;
  height: 16px;
  display: inline-block;
}

.commonSubCategoryPricingContainer {
  border-top: 1px solid var(--primary-border);
}

.commonSubCategoryPricingItemWrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  grid-gap: 12px;
  margin-top: 12px;
}

.commonSubCategoryPricingItem {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  grid-gap: 5px;
  width: 100%;
  max-width: 60%;
  text-align: left;
}

.commonSubCategoryPricingItem+span {
  width: 100%;
  max-width: 40%;
  text-align: right;
}

.commonSubCategoryPricingSubHeading,
.commonSubCategoryPricingHeading {
  font-size: 16px;
  line-height: 26px;
  color: var(--primary-foreground);
}

.commonSubCategoryPricingSubHeading {
  font-weight: 400;
}

.commonSubCategoryPricingHeading {
  font-weight: 600;
}

.commonSubCategoryPricingBtnContainer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 24px;
  gap: 18px;
  grid-gap: 18px;
  flex-wrap: wrap;
}

.commonSubCategoryPricingDivider {
  margin-top: 12px;
  margin-bottom: 12px;
  border-top: 1px solid var(--primary-border);
}

.commonSubCategoryPricingAccordionHeading,
.commonSubCategoryPricingAccordionHeading:hover,
.commonSubCategoryPricingAccordionHeading:focus {
  background: unset;
  outline: unset !important;
  box-shadow: none !important;
  border: unset;
  padding: 0;
  width: 100%;
  color: var(--primary-foreground);
}

.commonSubCategoryPricingItemWrapper:first-child {
  margin-top: 0;
}

.commonSubCategoryPricingSubItem {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: var(--secondary-foreground);
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
}

.commonSubCategoryPricingItemAlignBase {
  align-items: baseline !important;
}

.commonSubCategoryPricingItemAlignBase img {
  position: relative;
  top: 3px;
}

ul.country-list:focus-visible {
  box-shadow: unset;
  outline: unset;
}

.react-switch-bg {
  background: var(--primary-border) !important;
}

.commonMapFreshIconContainer {
  position: absolute;
  display: flex;
  align-items: center;
  padding: 4px;
  background: var(--common-white-bg);
  border-radius: 50%;
  box-shadow: 0 4px 4px 0 #0000001c;
  bottom: 11px;
  right: 12px;
  z-index: 1;
  cursor: pointer;
}

/* provider start */
.preferredProviderList {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(2, calc((100% / 2) - 6px));
  gap: 12px;
  grid-gap: 12px;
  align-items: flex-start;
}

.preferredProviderListItem {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  grid-gap: 12px;
  border: 1px solid var(--primary-border);
  border-radius: 4px;
  padding: 12px;
}

.preferredProviderListImgContainer {
  position: relative;
  width: 54px;
  height: 54px;
  border-radius: 6px;
}

img.preferredProviderListImgLogo {
  display: inline-block;
  width: 54px;
  height: 54px;
  border-radius: inherit;
}

.preferredProviderListInfoContainer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  grid-gap: 14px;
  flex-grow: 1;
}

.preferredProviderListPhoneNo,
.preferredProviderListServiceDesc {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: var(--primary-foreground);
  text-align: left;
}

.preferredProviderListPhoneNo {
  margin-bottom: 3px;
}

.preferredProviderListName {
  display: flex;
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
  color: var(--primary-foreground);
  flex-wrap: wrap;
}

.preferredProviderListInfoWrapper {
  flex-grow: 1;
}

.preferredProviderListRatingText {
  display: flex;
  align-items: center;
}

.preferredRemoveBtn,
.preferredRemoveBtn:hover,
.preferredRemoveBtn:focus,
.preferredRemoveBtn:active {
  background-color: unset !important;
  border: unset !important;
  color: var(--primary-link-foreground) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 24px !important;
  padding: 0 !important;
  outline: unset !important;
  box-shadow: unset !important;
}

.preferredProviderListTick {
  background: var(--primary-bg);
  border: 1px solid var(--primary-border);
  box-shadow: 0px 4px 4px 0px #0000001F;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -5px;
  right: -5px;
}

.assignNoProvider {
  margin-top: 12px;
  text-align: center;
}

/* provider end */

.actionLinkText {
  color: var(--primary-link-foreground);
  cursor: pointer;
}

.actionLinkText:hover,
.actionLinkText:focus,
.actionLinkText:active {
  color: var(--primary-link-foreground);
  text-decoration: unset;
  outline-color: transparent;
}

.scheduleBookingTimeContainer {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.preferredProviderDefaultImgContainer {
  position: relative;
  width: 54px;
  height: 54px;
  border-radius: 6px;
  background: var(--primary-gray-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.preferredProviderDefaultImgLogo {
  display: inline-block;
  width: 30px;
  height: 30px;
}

/* scheduleBooking modal popup end */

.homeHeader {
  background-color: var(--background-primary);
}

.form-control::placeholder {
  color: var(--primary-placeholder-foreground);
}

/* common AdminPanel button container start */
.commonButtonContainer {
  display: flex;
  justify-content: flex-end;
  column-gap: 18px;
  row-gap: 18px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 24px;
}

/* common AdminPanel button container start */


/* manualGeoSuggesting start */
.locationSearchMapContainer .commonLocationInput .manualGeoSuggestContainer {
  margin-bottom: 20px;
  width: 49%;
}

.manualGeoSuggestContainer input::placeholder {
  color: var(--primary-placeholder-foreground);
}

.manualGeoSuggestListWrapper::after {
  content: '';
  display: block;
  background-image: url('../powered_by_google.png');
  background-repeat: no-repeat;
  background-position: calc(100% - 10px) center;
  background-size: 80px 12px;
  width: 100%;
  height: 20px;
}

.manualGeoSuggestListWrapper,
.safariManualGeoSuggestListWrapper .suggestItem {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 400px;
  padding: 0;
  margin-top: -1px;
  background: var(--primary-input-bg);
  border: 1px solid var(--primary-border);
  border-top-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  list-style: none;
  z-index: 1;
  text-align: start;
}

.manualGeoSuggestList,
.safariManualGeoSuggestListWrapper .suggestItem {
  font-size: 16px;
  padding: 8px 10px;
  cursor: pointer;
}

.manualGeoSuggestList:hover,
.safariManualGeoSuggestListWrapper .suggestItem:hover {
  background-color: var(--common-hover-bg);
}

/* manualGeoSuggesting end */

.manageSubCategoryCardSwitchCheckedIcon {
  position: relative;
  top: 3px;
  right: -24px;
  z-index: 2;
  transition: all 0.1s ease;
}

.languageModalPopup {
  max-width: 900px !important;
  width: 100%;
}

.bodyOverflow .Loader__background {
  z-index: 1 !important;
  height: calc(100vh - 60px) !important;
  background-color: transparent !important;
}

/* admin header start */
.adminHeaderDropdownMenu .dropdown-toggle {
  padding: 0;
}

.adminHeaderDropdownMenu .dropdown-toggle::after {
  display: none;
}

.adminHeaderDropdownMenu .dropdown-menu {
  top: 6px !important;
  padding: 0;
  background-color: var(--primary-input-bg);
  border: 1px solid var(--primary-border) !important;
}

.adminHeaderDropdownMenu .dropdown-menu .dropdown-item:first-child {
  border-bottom: 1px solid var(--primary-border);
}

.adminHeaderDropdownMenu .dropdown-item,
.adminHeaderDropdownMenu .dropdown-item:hover,
.adminHeaderDropdownMenu .dropdown-item:focus {
  padding: 10px;
  color: var(--primary-foreground);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
}

.adminHeaderDropdownMenu .dropdown-item:hover {
  background-color: var(--common-hover-bg) !important;
}

/* admin header end */


/* loader button start */
.loaderButtonFlex {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
}

.doubleBtnDFlexStart {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 15px;
  flex-wrap: wrap;
}

.doubleBtnFlexEnd {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 15px;
  flex-wrap: wrap;
}

.singleFlexEndBtn {
  display: flex;
  justify-content: flex-end;
}

.defaultScrollHidden {
  overflow: hidden;
}

.removeLocationBtn {
  position: absolute;
  right: 10px;
  display: inline-block;
  top: 10px;
  background: var(--common-black-bg);
  color: var(--common-primary-white-foreground) !important;
  font-weight: 700;
  padding: 6px;
  font-size: 12px;
  z-index: 1;
  border-radius: 4px;
  cursor: pointer;
  outline: unset !important;
  border: unset !important;
  max-width: 120px;
  text-align: center;
}

/* loader button end */

/* custom check box design start */
.commonCustomCheckFlex {
  display: inline-flex !important;
  align-items: flex-start !important;
  gap: 8px;
  cursor: pointer;
  margin: 0;
}

.commonCustomCheckOuterFlex {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.commonCustomCheckOuterFlex>label:first-child {
  position: relative;
  top: 2px;
  flex-shrink: 0;
}

.checkBoxOuterLabel {
  font-size: 16px;
  line-height: 26px;
  font-weight: 500;
}

.commonCustomCheckWithoutLabelFlex {
  cursor: pointer;
  margin: 0;
}

.commonCustomCheckFlex>span:first-child {
  position: relative;
  top: 1px;
  flex-shrink: 0;
}

.commonCustomCheckBox {
  border: 1px solid var(--primary-border) !important;
  width: 22px !important;
  height: 22px !important;
  position: relative;
  border-radius: 5px !important;
  cursor: pointer;
}

.commonCustomCheckBox .checkBoxChecked {
  position: absolute;
  inset: -1px;
  background-color: var(--primary-bg);
  border-radius: inherit;
  background-size: 54%;
  background-position: center !important;
  background-repeat: no-repeat;
  background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4IiB2aWV3Qm94PSIwIDAgNzguMzY5IDc4LjM2OSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNzguMzY5IDc4LjM2OTsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxwYXRoIGQ9Ik03OC4wNDksMTkuMDE1TDI5LjQ1OCw2Ny42MDZjLTAuNDI4LDAuNDI4LTEuMTIxLDAuNDI4LTEuNTQ4LDBMMC4zMiw0MC4wMTVjLTAuNDI3LTAuNDI2LTAuNDI3LTEuMTE5LDAtMS41NDdsNi43MDQtNi43MDQgICBjMC40MjgtMC40MjcsMS4xMjEtMC40MjcsMS41NDgsMGwyMC4xMTMsMjAuMTEybDQxLjExMy00MS4xMTNjMC40MjktMC40MjcsMS4xMi0wLjQyNywxLjU0OCwwbDYuNzAzLDYuNzA0ICAgQzc4LjQ3NywxNy44OTQsNzguNDc3LDE4LjU4Niw3OC4wNDksMTkuMDE1eiIgZmlsbD0iI0ZGRkZGRiIvPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=) !important;
}

/* custom check box design end */


/* View booking details page table start */
.viewBookingTableContainer tbody td {
  border-top: 1px solid var(--primary-border);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--primary-foreground);
  text-align: start;
  min-width: 200px;
}

/* View booking details page table end */

/* Table design start */
.tableOuterContainer,
.viewBookingInnerTableOuterContainer {
  border: 1px solid var(--primary-border);
  overflow-x: auto;
  position: relative;
  overflow-y: auto;
  border-radius: 6px;
  min-height: 115px;
  max-height: 500px;
}

.viewBookingInnerTableOuterContainer {
  border-radius: 0 0 6px 6px;
  border-top: 0;
}

.tableContainer,
.viewBookingInnerTableContainer {
  border: 0;
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  width: 100%;
}


.tableContainer thead th,
.viewBookingInnerTableContainer thead th {
  background: var(--primary-gray-bg) !important;
  font-size: 15px;
  font-weight: 700;
  line-height: normal;
  border: unset !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  position: sticky;
  top: 0;
  z-index: 1;
}

.tableContainer thead th:first-child {
  border-top-left-radius: 6px;
}

.tableContainer thead th:last-child {
  border-top-right-radius: 6px;
}

.tableContainer tbody td,
.tableContainer thead th,
.viewBookingInnerTableContainer tbody td,
.viewBookingInnerTableContainer thead th {
  padding: 15px 8px;
  min-width: 150px;
  text-align: center;
  vertical-align: middle;
  color: var(--primary-foreground);
}

.tableContainer tbody td,
.viewBookingInnerTableContainer tbody td {
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  border-top: 1px solid var(--primary-border);
}

.tableContainer tbody td.tableNoRecordCel,
.viewBookingInnerTableContainer tbody td.tableNoRecordCel {
  text-align: center;
  padding: 20px;
  font-size: 26px;
  font-weight: 600;
}

.tableLargeHeading {
  min-width: 220px;
}

/* Table design end */

.commonSiteAdminDropzoneSpace {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* home header dropdown start */
.headerAfterNavigationButtonContainer .dropdown-toggle {
  background: var(--common-gray-bg);
  border: unset;
  outline: unset;
  box-shadow: unset;
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 2px 12px 2px 2px !important;
  gap: 8px;
  grid-gap: 8px;
  cursor: pointer;
}

.headerAfterNavigationButtonContainer .dropdown-toggle::after {
  display: none;
}

.headerAfterNavigationButtonContainer .dropdown-menu {
  margin: 0px;
  padding: 0;
  border-radius: 6px;
  border: unset;
  box-shadow: 0px 4px 10px 0px #0000001A;
  background: var(--background-primary);
}

.headerAfterNavigationButtonContainer .dropdown-item,
.headerAfterNavigationButtonContainer .dropdown-item:hover,
.headerAfterNavigationButtonContainer .dropdown-item:focus {
  padding: 12px 18px !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 26px !important;
  color: var(--primary-foreground) !important;
  border-bottom: 1px solid var(--primary-border) !important;
  box-shadow: unset;
  outline: unset;
  text-align: start;
  cursor: pointer;
}

.headerAfterNavigationButtonContainer .dropdown-item {
  background-color: transparent;
}

.headerAfterNavigationButtonContainer .dropdown-item:hover,
.headerAfterNavigationButtonContainer .dropdown-item:focus,
.headerAfterNavigationButtonContainer .dropdown-item:active,
.headerAfterNavigationButtonContainer .dropdown-item.active:hover,
.headerAfterNavigationButtonContainer .dropdown-item.active:focus {
  background-color: var(--common-hover-bg) !important;
}

.headerAfterNavigationButtonContainer .dropdown-item:last-child {
  border-bottom: unset !important;
}

.headerAfterNavigationButtonContainer .dropdown-item.active {
  color: var(--primary-link-foreground) !important;
  text-decoration: unset;
  background-color: transparent !important;
}

.headerAfterNavigationButtonContainer .dropdown-menu {
  right: 0;
  left: unset;
}

/* home header dropdown end */

/* common modal popup start */

.commonModalContainer {
  max-width: 470px;
  margin-top: 88px;
}

.commonModalContainer .modal-content {
  border-radius: 18px;
  background: var(--modal-bg);
  box-shadow: 0px 4px 19px 0px var(--modal-shadow);
}

.commonModalHeader {
  padding: 24px 24px 0;
  border-bottom: unset;
  border-radius: 0;
  text-align: start;
}

.commonModalHeader .modal-title {
  max-width: calc(100% - 30px);
  width: 100%;
}

.commonModalTitle {
  font-size: 20px;
  font-weight: 700;
  line-height: 30px;
  color: var(--primary-foreground);
}

.commonModalBody {
  padding: 18px 24px 24px;
  text-align: start;
}

.commonModalHeader .close,
.commonModalHeader .close:hover,
.commonModalHeader .close:focus {
  position: absolute;
  top: 6px;
  right: 6px;
  margin: 0;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--common-white-bg);
  background-image: url('../Icons/modalCloseIcon.svg');
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 50%;
  opacity: 1;
  box-shadow: unset;
  outline: unset;
}

.commonModalHeader .close:not(:disabled):not(.disabled):focus,
.commonModalHeader .close:not(:disabled):not(.disabled):hover {
  opacity: 1 !important;
}

.commonModalHeader .close span[aria-hidden="true"] {
  display: none;
}

.buttonGroupContainer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  grid-gap: 18px;
  flex-wrap: wrap;
}

.buttonGroupDivider {
  padding-top: 24px;
  border-top: 1px solid var(--primary-border);
  margin-top: 24px;
}

.loaderFlex {
  display: flex !important;
  align-items: center;
  gap: 3px;
}

.commonModalHeaderLogoContainer {
  display: flex;
  align-items: center;
  gap: 24px;
  grid-gap: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--primary-border);
  padding-right: 24px;
}

.commonModalHeaderLogo {
  position: relative;
  width: 75px;
  height: 75px;
  border-radius: 50%;
  flex-shrink: 0;
}

.commonModalHeaderLogo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.visibleHidden {
  visibility: hidden;
}

/* common modal popup end */

.commonImageDisplayLoader .Loader__background {
  height: 100% !important;
}

.homePageBody {
  padding-top: var(--frontPage-header-height);
  position: relative;
  z-index: 1;
}

.subPageMainContainer {
  padding-top: 63px;
}

.subPageContainer {
  min-height: 600px;
  background: var(--tertiary-gray-bg);
  padding-top: 48px;
  padding-bottom: 48px;
}

.subPageWrapper {
  display: grid;
  grid-template-columns: 310px 1fr;
  gap: 24px;
  grid-gap: 24px;
  align-items: flex-start;
}

/* home banner search */

.homeBannerSearch {
  max-width: 429px;
}

.contentPageWrapper {
  min-height: 600px;
}

/* category view page search start */

.categoryLocationSearchContainer .manualGeoSuggestContainer input {
  padding: 9px 18px 9px 40px !important;
  background-color: transparent !important;
}

.categoryLocationSearchContainer .manualGeoSuggestContainer {
  background-color: var(--primary-input-bg);
  background-image: url('../Icons/locationPinIcon.svg');
  background-position: calc(0% + 15px) 50%;
  background-size: 15px;
  background-repeat: no-repeat;
}

/* category view page search end */

/* dashboard design start */
.dashboardCardSubImgContainer1 {
  background: var(--dashboard-card1-bg);
}

.dashboardCardSubImgContainer2 {
  background: var(--dashboard-card2-bg);
}

.dashboardCardSubImgContainer3 {
  background: var(--dashboard-card3-bg);
}

.profileImagesizeLoader .Loader__background {
  border-radius: 100px;
}

/* dashboard design end */

.flexShrinkNone {
  flex-shrink: 0;
}

.commonErrorMessageTxt {
  display: inline-block;
  color: red;
}

/* my booking tab design start */

.manualListTab {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  border-bottom: 1px solid var(--primary-border) !important;
  margin-bottom: 18px !important;
}

.manualListTab .nav-link {
  font-size: 18px;
  line-height: 28px;
  font-weight: 600;
  color: var(--secondary-foreground) !important;
  border: unset !important;
  background-color: transparent !important;
  padding: 0 0 4px 0 !important;
}

.manualListTab .nav-link.active {
  color: var(--primary-link-foreground) !important;
  border-bottom: 2px solid var(--primary-link-foreground) !important;
}

/* my booking tab design end */

/* photo upload loader design start */
.bookingPhotoUploadLoader {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.bookingPhotoUploadLoader>div {
  width: 100%;
  height: 100%;
}

.bookingPhotoUploadLoader .Loader__background {
  background-color: transparent !important;
}

/* photo upload loader design end */

/* pricing Accordion start */

.commonPricingAccordionHeading,
.commonPricingAccordionHeading:hover,
.commonPricingAccordionHeading:focus {
  background: unset;
  outline: unset !important;
  box-shadow: none !important;
  border: unset;
  padding: 0;
  width: 100%;
}

/* pricing Accordion end */

/* payment dropdown  start */
.paymentDropdownContainer .dropdown-toggle {
  background-color: transparent;
  outline: unset;
  box-shadow: unset;
  border-radius: var(--radius-1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--primary-border);
  padding: 8px 40px 8px 18px;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  color: var(--primary-foreground) !important;
  word-break: break-word;
  white-space: pre-wrap;
}

.paymentDropdownContainer .dropdown-toggle {
  background-image: url('../Icons/paymentDropdownDownArrow.svg');
  background-repeat: no-repeat;
  background-position: calc(100% - 15px) 50%;
}

.paymentDropdownContainer.show .dropdown-toggle {
  background-image: url('../Icons/paymentDropdownUpArrow.svg');
}

.paymentDropdownContainer .dropdown-toggle::after {
  display: none;
}

.paymentDropdownContainer .dropdown-menu {
  width: 100%;
  background: var(--background-primary);
  border: 1px solid var(--primary-border) !important;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 10px 0px;
  border-radius: var(--radius-1);
  transform: translate(0px, 44px) !important;
  padding: 0 !important;
}

.paymentDropdownContainer .dropdown-item,
.paymentDropdownContainer .dropdown-item:hover,
.paymentDropdownContainer .dropdown-item:focus,
.paymentDropdownContainer .dropdown-item:active {
  padding: 12px 14px 12px 18px !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 26px !important;
  color: var(--primary-foreground) !important;
  border-bottom: 1px solid var(--primary-border) !important;
  box-shadow: unset;
  outline: unset;
  text-align: start;
}

.paymentDropdownContainer .dropdown-item {
  background-color: transparent !important;
}

.paymentDropdownContainer .dropdown-item:hover,
.paymentDropdownContainer .dropdown-item:focus,
.paymentDropdownContainer .dropdown-item:active,
.paymentDropdownContainer .dropdown-item.active {
  background-color: var(--common-hover-bg) !important;
}

.paymentDropdownContainer .dropdown-item:last-child {
  border-bottom: unset !important;
}

.paymentDropdownContainerReadonly .dropdown-menu,
.paymentDropdownContainerReadonly .dropdown-menu.show {
  display: none;
}

.paymentDropdownContainerReadonly .dropdown-toggle,
.paymentDropdownContainerReadonly.show .dropdown-toggle {
  background-image: none;
  cursor: not-allowed;
}

/* payment dropdown  end */

/* promo code popup start */

.promoCodeSearchInputContainer {
  position: relative;
  flex-grow: 1;
}

.promoCodeSearchInputContainer input {
  padding: 9px 18px 9px 46px !important;
}

/* promo code popup end */

/* order accordion start */

.orderAccordionHeader {
  border: unset;
  padding: 0;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 18px;
  grid-gap: 18px;
  width: 100%;
  padding: 12px;
}

.orderAccordionHeader,
.orderAccordionHeader:hover,
.orderAccordionHeader:focus {
  outline: 1px solid transparent;
  box-shadow: unset;
}

/* order accordion end */

/* Tip modal popup input design start */

.addTipsFormBox {
  max-width: 300px;
  margin: 0 auto;
}

.addTipsInputContainer {
  border-bottom: 1px solid var(--primary-border);
}

.addTipsInputContainer .input-group {
  display: flex;
  align-items: center;
  gap: 6px;
  grid-gap: 6px;
}

.addTipsInputContainer .input-group .input-group-prepend {
  flex-shrink: 0;
  margin-left: 0;
}


.addTipsInputContainer .input-group .input-group-prepend .input-group-text {
  padding: 0;
  border: unset;
  background: transparent;
  font-size: 28px;
  line-height: 38px;
  font-weight: 700;
  color: var(--primary-foreground);
  border-radius: 0;
}

.addTipsInputContainer .form-control {
  font-size: 28px !important;
  font-weight: 700 !important;
  line-height: 38px !important;
  padding: 0 !important;
  border: unset !important;
  height: auto !important;
  border-radius: unset !important;
  color: var(--primary-foreground) !important;
  text-align: center !important;
  flex-grow: 1;
  background-color: transparent !important;
  outline: unset !important;
  box-shadow: unset !important;
}

.addTipsInputContainer .form-control:hover,
.addTipsInputContainer .form-control:focus,
.addTipsInputContainer .form-control:active,
.addTipsInputContainer .form-control:active:focus,
.addTipsInputContainer .form-control:active:hover {
  border: unset !important;
  box-shadow: unset !important;
  outline: unset !important;
}

/* Tip modal popup input design end */

/* payment completed design start */

.paymentCompletedLottieImg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}


.additionPricingSplitUpTitleRtl>a {
  margin-left: 6px;
}

/* payment completed design end */

/* chat message thread design start */

.messagesItemsInfoUserRadius {
  border-radius: 0px var(--radius-2) var(--radius-2) var(--radius-2);
  background: var(--primary-gray-bg);
}

.messagesItemsInfoUserRadius::before {
  border-right: 46px solid var(--primary-gray-bg);
  border-bottom: 46px solid transparent;
  left: -23px;
}

.messagesItemsInfoUserRadius::after {
  left: -38px;
  border-top-right-radius: var(--radius-5);
  border-bottom-left-radius: var(--radius-5);
  background: var(--background-primary);
  transform: rotate(6deg);
}

.messagesItemsInfoPartnerRadius {
  border-radius: var(--radius-2) 0px var(--radius-2) var(--radius-2);
  background: var(--chat-partner-bg);
}

.messagesItemsInfoPartnerRadius::before {
  border-left: 46px solid var(--chat-partner-bg);
  border-bottom: 46px solid transparent;
  right: -23px;
}

.messagesItemsInfoPartnerRadius::after {
  right: -38px;
  border-top-left-radius: var(--radius-5);
  border-bottom-right-radius: var(--radius-5);
  background: var(--background-primary);
  transform: rotate(-6deg);
}

/* chat message thread design end */

.siteAdminPrimaryHeading {
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
  margin: 0 0 24px;
  text-align: start;
  color: var(--primary-foreground);
}

.siteAdminSecondaryHeading {
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
  margin: 0 0 12px;
  color: var(--primary-foreground);
  text-align: start;
}

.oneColumnGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.twoColumnGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 24px;
}

.threeColumnGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px 24px;
}

/* common skeleton design start */

.commonSkeletonBox {
  position: relative;
  width: 100%;
  background-color: var(--skeleton-primary-bg);
  overflow: hidden;
}

.commonSkeletonBox::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(277, 255, 255, .3), rgba(277, 255, 255, 0));
  transform: translate(-100%);
  z-index: 1;
  animation: loading 2s cubic-bezier(.4, 0, .6, 1) infinite;
}

@keyframes loading {
  100% {
    transform: translate(100%);
  }
}

/* common skeleton design end */

/* Add on field design start */

.prefixAddonBtn,
.suffixAddonBtn {
  padding: 6px 12px;
  background: var(--primary-bg);
  color: var(--common-primary-white-foreground);
  border: 1px solid var(--primary-bg);
}

.suffixInputAddonContainer .form-control {
  border-right-width: 0 !important;
}

.prefixInputAddonContainer .form-control {
  border-left-width: 0 !important;
}

.noColorInputAddonContainer .input-group-prepend {
  margin-right: 0;
}

.noColorInputAddonContainer .prefixAddonBtn,
.noColorInputAddonContainer .suffixAddonBtn {
  background: var(--primary-disable);
  border: 1px solid var(--primary-border);
}

.noColorInputAddonContainer input:disabled {
  color: var(--secondary-foreground) !important;
}

/* Add on field design end */

/* custom radio button design start */

.customRadioBtnContainer {
  position: relative;
}

.customRadioBtnContainer input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.customRadioCheckDot,
.customRadioCheckTick {
  width: var(--customRadioWidth);
  height: var(--customRadioHeight);
  position: relative;
  background: transparent;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.customRadioCheckDot {
  border: 1px solid var(--primary-bg);
}

.customRadioCheckTick {
  border: 1px solid var(--checkbox-border);
}

.customRadioCheckDot::after,
.customRadioCheckTick::after {
  content: "";
  position: absolute;
  width: calc(var(--customRadioWidth) - 8px);
  height: calc(var(--customRadioWidth) - 8px);
  border-radius: 50%;
  display: none;
}

.customRadioBtnContainer input:checked~.customRadioCheckDot::after,
.customRadioBtnContainer input:checked~.customRadioCheckTick::after {
  display: block;
}

.customRadioBtnContainer input:checked~.customRadioCheckDot::after {
  background: var(--primary-bg);
}

.customRadioBtnContainer input:checked~.customRadioCheckTick {
  background: var(--primary-bg);
  border: 1px solid var(--primary-bg);
}

.customRadioBtnContainer input:checked~.customRadioCheckTick::after {
  background-image: url('../Icons/defaultRadioTickIcon.svg');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

/* custom radio button design end */