@import './variables.css';

html {
    scroll-behavior: smooth;
}

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

.tabIndex :focus {
    outline: none;
}

body .bodyOverflow,
body .storeBodyContainer {
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
}

svg{
    flex-shrink: 0;
}

body .storeBodyContainer {
    background-color: var(--store-background-primary);
}

select {
    background-image: url('../chevron-down.svg');
    background-repeat: no-repeat;
    background-position: calc(100% - 6px) 50%;
    background-size: 25px 25px;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.whiteDropdown select {
    background-image: url('../chevron-down-white.png') !important;
    background-position: 96% 3px !important;
}

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

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

.inputFormAddon .input-group-text {
    color: var(--common-primary-white-foreground) !important;
    background-color: var(--primary-bg) !important;
    border: 0px solid var(--primary-border) !important;
    font-weight: 700 !important;
}

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

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

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

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

@-moz-document url-prefix() {

    html,
    body {
        scrollbar-width: thin;
        scrollbar-color: var(--primary-bg) transparent;
    }
}

.sideMenuScroll ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

/* Track */
.sideMenuScroll ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px var(--primary-shadow);
    border-radius: 10px;
}

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

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

.addonBorder .input-group-text {
    border-top-left-radius: 6px !important;
    border-bottom-left-radius: 6px !important;
}

.redux-toastr .toastr.rrt-error {
    background-color: var(--toaster-error) !important;
}

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

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

.redux-toastr .toastr .close-toastr {
    bottom: 20px !important;
    font-size: 24px !important;
    top: auto !important;
    right: 5px !important;
    opacity: 1.5 !important;
    color: var(--common-primary-white-foreground) !important;
    font-weight: 700 !important;
}

/* Toaster - Start */

.toastr {
    border-radius: 0px !important;
}

.rrt-middle-container {
    font-family: inherit !important;
}


.rrt-success {
    background-color: var(--toaster-success) !important;
}

.rrt-error {
    background-color: var(--toaster-error) !important;
}

/* Toaster - End */

.switchLabel {
    vertical-align: middle;
}

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

.switchLabelText {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: var(--primary-foreground);
    margin-left: 8px;
    vertical-align: middle;
}

.react-switch-bg div:first-child {
    width: 32px !important;
    z-index: 1;
    right: 0;
    left: unset;
    color: var(--toaster-success);
    position: absolute !important;
    transform: scale(0.6);
}

.react-switch-bg div:last-child {
    width: 32px !important;
    z-index: 1;
    left: 0;
    right: unset;
    color: var(--secondary-foreground);
    transform: scale(0.6);
}

/***** Droup Down Menu Header Start *****/
.switchLabelTextHeader {
    margin: 0;
    font-size: 16px;
    color: var(--primary-foreground);
    font-weight: 500;
}

/***** Droup Down Menu Header End *****/

.mainContainer {
    background: var(--background);
    border-radius: var(--radius-3);
    padding: 30px;
    margin: 0 auto;
    max-width: var(--page-inner-width);
    background-image: url('../SiteImages/bg-food-pattern.png') !important;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 0px 10px 0px var(--secondary-shadow);
}

.arrow_box {
    position: relative;
    background: var(--toaster-error);
    border: 4px solid var(--toaster-error);
    z-index: 1;
    position: absolute;
    right: 12px;
    top: -15px;
    color: var(--common-primary-white-foreground);
    padding: 0px;
    text-align: center;
    font-size: 12px !important;
    border-radius: var(--radius);
    z-index: 6;
    font-weight: 500;
}

.arrow_box:after,
.arrow_box:before {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.arrow_box:after {
    border-color: rgba(136, 183, 213, 0);
    border-top-color: red;
    border-width: 6px;
    margin-left: -6px;
}

.arrow_box:before {
    border-color: rgba(194, 225, 245, 0);
    border-top-color: red;
    border-width: 10px;
    margin-left: -10px;
}

.placeError {
    color: red;
}

.pageUrlRadius .input-group-text {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/******************* Tab srction start *************************/
.nav-tabs {
    gap: 18px;
    border-bottom: 0 !important;
}

.nav-tabs .nav-link {
    position: relative;
    color: var(--secondary-foreground) !important;
    background-color: var(--background);
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    border: 0 !important;
    border-bottom: 3px solid transparent !important;
}

.nav-tabs .nav-link:hover {
    border: 0 !important;
    border-bottom: 3px solid transparent !important;
}

.nav-tabs .nav-link:focus {
    outline: none !important;
    box-shadow: none !important;
    border-color: transparent;
}

.nav-tabs .nav-link.active {
    color: var(--primary-foreground) !important;
    border-color: var(--primary-bg) !important;
    font-weight: 600;
}

.nav-tabs .nav-link.active:hover {
    border-color: var(--primary-bg) !important;
}

/******************* Tab srction End *************************/

/**************************** Place Holder Form Start ***************************/
input.form-control::-webkit-input-placeholder,
input::-webkit-input-placeholder {
    color: var(--primary-placeholder-foreground);
}

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

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

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

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

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

/**************************** Place Holder Form End ***************************/

.btn-primary.focus,
.btn-primary:focus {
    box-shadow: inherit !important;
}


.pageUrlInput .input-group-text {
    color: var(--common-primary-white-foreground) !important;
    background-color: var(--primary-bg) !important;
    border-bottom-right-radius: 0 !important;
    border-top-right-radius: 0 !important;
    vertical-align: middle !important;
    border: 0 !important;
    word-break: break-word;
    white-space: normal;
}

.badgeSuccess .badge-success {
    padding: 6px 8px 6px !important;
    border-radius: var(--radius-2) !important;
}

/***************** AdminCountry Edit Form End *******************/

/***************** ModifierGroups Start *******************/

.orderAccordion .accordion>.card {
    border: inherit;
    background: transparent;
}

.orderAccordion .accordion>.card .card-header {
    background: transparent;
    padding: 0;
    border: inherit;
}

.orderAccordion .arrowBtn {
    background: transparent;
    box-shadow: inherit;
    border: inherit;
}

.orderAccordion .card-header button {
    border: inherit;
    outline: 0 !important;
    display: flex;
    align-items: flex-start;
    gap: 6px;
    text-align: start;
    font-size: 16px;
    line-height: 1;
    font-weight: 600;
    color: var(--primary-foreground);
}

.orderAccordion .card-header button>span:first-child {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: var(--primary-bg);
}

.orderAccordion .card-header button>span:first-child img {
    position: relative;
    top: -1px;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.orderAccordion .card {
    padding: 8px 0 0 16px;
}

.orderAccordion .card-body {
    padding: 0px 0px 0px 28px !important;
}

.adminEarning .card {
    padding: 8px 0 0 16px;
}

.adminEarning .card-body {
    padding: 0px 0px 0px 26px !important;
}

.autosuggest {
    display: inline-block;
}

.autosuggest .react-autosuggest__container {
    position: relative;
}

.autosuggest .react-autosuggest__input {
    width: 490px;
    height: 44px;
    border: 1px solid var(--primary-border);
    border-radius: var(--radius-1);
    padding: 6px 12px;
}

.autosuggest .react-autosuggest__input--focused {
    outline: none;
}

.autosuggest .react-autosuggest__input--open {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.autosuggest .react-autosuggest__suggestions-container {
    display: none;
}

.autosuggest .react-autosuggest__suggestions-container--open {
    display: block;
    position: absolute;
    top: 41px;
    width: 490px;
    border: 1px solid var(--primary-border);
    background-color: var(--background);
    font-family: 'Quicksand', sans-serif !important;
    font-weight: 300;
    font-size: 16px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    z-index: 2;
    border-top: inherit;
}

.autosuggest .react-autosuggest__suggestions-list {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.autosuggest .react-autosuggest__suggestion {
    cursor: pointer;
    padding: 4px 15px;
}

.autosuggest .react-autosuggest__suggestion--highlighted {
    background-color: var(--common-hover-bg);
}

/***************** ModifierGroups End *******************/

.printOnly {
    display: none;
}

.noRadiusRight .form-control {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.noRadiusLeft .form-control {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.noRadiusLeft .input-group-text {
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
}

.geosuggest__suggests:after {
    content: '';
    display: block;
    background: url(../powered_by_google.png) center left 98% no-repeat white;
    background-size: 80px 12px;
    width: 100%;
    height: 20px;
}

.geosuggest__suggests {
    top: 90% !important;
}

.addonRightBorder .form-control {
    border-radius: var(--radius-1) 0 0 var(--radius-1) !important;
}

.addonRightBorder .input-group-text {
    border-radius: 0px var(--radius-1) var(--radius-1) 0px !important
}

.addonLeftBorder .form-control {
    border-radius: 0px var(--radius-1) var(--radius-1) 0px !important;
}

.input-group-append {
    margin-right: -1px;
}

.pageUrlRadius .input-group>.form-control:not(:first-child) {
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
    height: auto;
}

.pageUrlRadius .input-group {
    align-items: normal;
}

.pageUrlInput .input-group-text {
    width: auto;
    padding: 10px 15px;
}

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

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

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

.tooltipLabelContainer {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 18px;
    line-height: 26px;
    font-weight: 600;
    color: var(--primary-foreground);
    margin-bottom: 0;
    text-align: start;
}

.toneDropzoneFlex {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.phoneInputBorderRadius {
    border-radius: 0 var(--radius-1) var(--radius-1) 0 !important;
}

/* common view page start */
.viewDetailsGrid,
.viewDetailsSingleGrid {
    display: grid;
    border-top: 1px solid var(--primary-border);
    word-break: break-word;
    padding: 12px;
    gap: 12px;
    color: var(--primary-foreground);
}

.viewDetailsGrid {
    grid-template-columns: 460px 1fr;

}

.viewDetailsSingleGrid {
    grid-template-columns: 100%;
    padding-left: 0;
    padding-right: 0;
}

.viewPageSubtitle {
    grid-template-columns: 100% !important;
    text-align: start;
    font-weight: 700;
}

.viewDetailsGridLeft {
    text-align: start;
    font-weight: 600;
}

.viewDetailsGridRight {
    text-align: start;
}

/* common view page end */

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

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

.commonErrorMsgStyle {
    text-align: start;
    color: var(--error-foreground);
    display: block;
    font-size: 16px;
}

.storePanelSwitchFlex {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    font-size: 18px;
    font-weight: 600;
    color: white;
}

/* location input design start */

.customGeoSuggestInputContainer {
    position: relative;
}

.customGeoSuggestInputListContainer {
    position: absolute;
    top: 90%;
    left: 0;
    right: 0;
    max-height: 300px;
    padding: 0;
    margin-top: -1px;
    overflow-x: hidden;
    overflow-y: auto;
    list-style: none;
    border: 1px solid var(--primary-border);
    border-top-width: 0;
    background: var(--common-white-bg);
    z-index: 1;
}

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

.customGeoSuggestInputListItem {
    font-size: 14px;
    font-weight: 500;
    line-height: normal;
    padding: 9px 9px;
    cursor: pointer;
    text-align: start;
    color: var(--primary-foreground);
}

.customGeoSuggestInputListItem:hover,
.customGeoSuggestInputListItem:focus {
    background: var(--common-hover-bg);
    color: var(--primary-foreground);
}

.safariFailureInputWrapper {
    position: relative;
}

.failureDropDown .suggestItem {
    position: absolute;
    top: 90%;
    width: 100%;
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    padding: 8px 10px;
    background: var(--common-white-bg);
    border: 1px solid var(--primary-border);
    color: var(--primary-foreground);
    border-top-width: 0;
    border-radius: 0;
    text-align: start;
    cursor: pointer;
    z-index: 1;
}

.singUpFormPlaceSuggest .customGeoSuggestInputContainer .customGeoSuggestInput,
.singUpFormPlaceSuggest .safariFailureInputWrapper .safariFailureGeoSuggestion,
.storeEditProfileGeoSuggestContainer .customGeoSuggestInputContainer .customGeoSuggestInput,
.storeEditProfileGeoSuggestContainer .safariFailureInputWrapper .safariFailureGeoSuggestion {
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    width: 100%;
    height: 44px;
    padding: 9px 18px;
    border: 1px solid var(--primary-border);
    border-radius: var(--radius-1);
    color: var(--primary-foreground);
    appearance: none;
    outline: none;
}

.singUpFormPlaceSuggest .customGeoSuggestInputContainer .customGeoSuggestInput:focus,
.storeEditProfileGeoSuggestContainer .customGeoSuggestInputContainer .customGeoSuggestInput:focus,
.storeEditProfileGeoSuggestContainer .safariFailureInputWrapper .safariFailureGeoSuggestion:focus {
    outline: none;
    color: var(--primary-foreground);
    background: var(--primary-input-bg);
    border: 1px solid var(--secondary-border);
    box-shadow: none;
}

.storeEditProfileGeoSuggestContainer .customGeoSuggestInputContainer .customGeoSuggestInput,
.storeEditProfileGeoSuggestContainer .safariFailureInputWrapper .safariFailureGeoSuggestion {
    border: 1px solid var(--tertiary-border);
}

.storeEditProfileGeoSuggestContainer .customGeoSuggestInputContainer .customGeoSuggestInput:focus,
.storeEditProfileGeoSuggestContainer .safariFailureInputWrapper .safariFailureGeoSuggestion:focus {
    border: 1px solid var(--primary-bg);
}

.storeEditProfileGeoSuggestContainer .customGeoSuggestInputContainer .customGeoSuggestInputListContainer,
.storeEditProfileGeoSuggestContainer .safariFailureInputWrapper .suggestItem {
    border: 1px solid var(--primary-bg);
    border-top-width: 0;
}

.adminProfileGeoSuggestContainer .customGeoSuggestInputContainer .customGeoSuggestInput,
.adminProfileGeoSuggestContainer .safariFailureInputWrapper .safariFailureGeoSuggestion {
    display: block;
    width: 100%;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    color: var(--primary-foreground);
    background: var(--primary-input-bg);
    border: 1px solid var(--tertiary-border);
    border-radius: var(--radius);
    box-shadow: none;
    height: 44px;
    outline: none;
}

.adminProfileGeoSuggestContainer .customGeoSuggestInputContainer .customGeoSuggestInput:focus,
.adminProfileGeoSuggestContainer .safariFailureInputWrapper .safariFailureGeoSuggestion:focus {
    border: 1px solid var(--primary-border);
    box-shadow: none;
    outline: none;
}

.adminProfileGeoSuggestContainer .customGeoSuggestInputContainer .customGeoSuggestInput:focus-visible,
.adminProfileGeoSuggestContainer .safariFailureInputWrapper .safariFailureGeoSuggestion:focus-visible {
    border: 1px solid var(--primary-border);
    box-shadow: none;
    outline: none;
}

.adminProfileGeoSuggestContainer .customGeoSuggestInputContainer .customGeoSuggestInputListContainer,
.adminProfileGeoSuggestContainer .safariFailureInputWrapper .suggestItem {
    border-radius: 0 0 var(--radius) var(--radius);
}

/* location input design end */

/* Table design start */

.tableOuterBox {
    min-height: 500px;
}

.tableOuterContainer {
    border: 1px solid var(--primary-border);
    overflow-x: auto;
    position: relative;
    overflow-y: auto;
    border-radius: var(--radius-1);
    min-height: 115px;
    max-height: 500px;
}

.tableOuterContainer a,
.tableOuterContainer a:hover,
.tableOuterContainer a:focus {
    color: var(--primary-link-foreground);
}

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


.tableContainer thead th {
    background: var(--primary-gray-bg) !important;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    border: unset !important;
    position: sticky;
    top: 0;
    z-index: 1;
}

.viewBookingInnerTableContainer thead th {
    font-size: 14px;
}

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

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

.tableContainer tbody td:first-child,
.tableContainer thead th:first-child {
    min-width: 150px;
}

.tableContainer tbody td,
.tableContainer thead th {
    padding: 14px 18px;
    text-align: center;
    vertical-align: middle;
    color: var(--primary-foreground);
}

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

.viewBookingInnerTableContainer tbody td {
    font-size: 14px;
}

.tableContainer tbody td.tableNoRecordCel {
    text-align: center;
    padding: 20px;
    font-size: 22px;
    font-weight: 600;
    line-height: 30px;
}

.viewBookingInnerTableContainer tbody td.tableNoRecordCel {
    font-size: 14px;
}

.viewBookingAccordionBody {
    padding: 12px;
    border: 1px solid var(--primary-border);
    border-width: 0 1px 1px 1px;
    border-radius: 0 0 var(--radius-1) var(--radius-1);
}

.tableLargeHeading {
    min-width: 220px;
}

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

.searchBoxStart{
    justify-content: flex-start;
}

.searchInput {
    width: 100%;
    min-width: 320px;
    max-width: 320px;
}

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

.commonTableTopExportLink {
    display: inline-block;
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--primary-link-foreground);
    gap: 4px;
}

.commonTableTopExportLink,
.commonTableTopExportLink:hover,
.commonTableTopExportLink:focus {
    color: var(--primary-link-foreground);
    text-decoration: unset;
    outline: none;
    cursor: pointer;
}

.storeTableContainer thead th {
    background: var(--store-background-primary) !important;
}

.storeTableContainer tbody td {
    background: var(--background) !important;
}

.payoutListFirstCell {
    min-width: 200px !important;
}

.payoutMethodFirstCell {
    min-width: 80px !important;
}

.payoutMethodFirstCell .customRadioBtnContainer .customRadioBtnInputBox {
    top: 0;
}

.commonTableLink,
.commonTableLink:hover,
.commonTableLink:focus {
    display: inline-block;
    color: var(--primary-link-foreground) !important;
    text-decoration: none !important;
    cursor: pointer;
}

/* Table design end */

/* input Grp 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;
}


/* input Grp end */

/* header design start */

.headerMenuContainer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-grow: 1;
    gap: 36px;
}

.headerMenuItem {
    display: flex;
    gap: 4px;
    align-items: center;
    padding: 0;
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    color: var(--primary-foreground);
    border-bottom: 2px solid transparent;
    cursor: pointer;
    text-decoration: unset;
    outline: unset;
}

.headerMenuItemBtn,
.headerMenuItemBtn:hover,
.headerMenuItemBtn:focus {
    background: var(--primary-bg);
    padding: 7px 20px;
    border-radius: var(--radius-5);
    color: var(--common-primary-white-foreground);
    font-size: 18px;
    font-weight: 500;
    line-height: 26px;
    text-align: center;
    text-decoration: unset;
    outline: unset;
    display: flex;
    align-items: center;
    gap: 6px;
}

.headerMenuItemBtn svg {
    width: 22px;
    height: 15px;
}

.headerMenuDropdownBtn,
.headerMenuDropdownBtn:hover,
.headerMenuDropdownBtn:active,
.headerMenuDropdownBtn:active:hover,
.headerMenuDropdownBtn:active:focus {
    background-color: var(--primary-gray-bg) !important;
    border: unset !important;
    outline: unset !important;
    box-shadow: unset !important;
    border-radius: var(--radius-5);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 6px 12px 6px 8px !important;
    gap: 6px;
    grid-gap: 6px;
    cursor: pointer;
    color: var(--primary-foreground) !important;
}

.headerMenuDropdownImgContainer {
    width: 35px;
    height: 35px;
    border: 1px solid var(--primary-border);
    border-radius: var(--radius-5);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--background);
}

.headerMenuDropdownDefaultImg {
    width: 25px;
    height: 25px;
    object-fit: contain;
    border-radius: inherit;
}

.headerMenuDropdownImg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.headerMenuDropdownBtn[aria-expanded="true"].dropdown-toggle::after {
    transform: rotate(180deg);
}

.headerMenuDropdownBtnContainer .dropdown-menu {
    padding: 0;
    border-radius: var(--radius-1);
    border: unset;
    box-shadow: 0px 4px 10px 0px var(--tertiary-shadow);
    background: var(--background);
}

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

.headerMenuDropdownBtnContainer .dropdown-item:hover,
.headerMenuDropdownBtnContainer .dropdown-item:focus {
    background-color: var(--common-hover-bg);
}

.headerMenuDropdownBtnContainer .dropdown-item.active,
.headerMenuDropdownBtnContainer .dropdown-item.active:hover,
.headerMenuDropdownBtnContainer .dropdown-item.active:focus,
.headerMenuDropdownBtnContainer .dropdown-item:active,
.headerMenuDropdownBtnContainer .dropdown-item.active:hover,
.headerMenuDropdownBtnContainer .dropdown-item.active:focus {
    color: var(--primary-link-foreground);
    text-decoration: unset;
    background-color: transparent;
}

.homeMainWrapper {
    padding-top: var(--header-height);
}

/* header design end */

/* home page start */
.homepageContainer {
    max-width: var(--max-content-width);
    padding-left: 24px;
    padding-right: 24px;
}

.homePagePaddingTop {
    padding-top: var(--section-space);
}

.homePagePaddingBottom {
    padding-bottom: var(--section-space);
}

.homePageHeading {
    font-size: var(--space-10);
    line-height: 56px;
    font-weight: 600;
    color: var(--primary-foreground);
}

.homePageSubHeading {
    font-size: var(--space-7);
    line-height: 38px;
    font-weight: 600;
    color: var(--primary-foreground);
}

.homePageDescription {
    font-size: var(--space-4);
    line-height: 26px;
    font-weight: 500;
    color: var(--primary-foreground);
}

/* home page end */

.storeSliderContainer .swiper-slide-active .storeSliderActive {
    animation: textShowUp 0.5s ease both;
}

@keyframes textShowUp {
    from {
        transform: translate3d(0, 40px, 0)
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

@-webkit-keyframes textShowUp {
    from {
        transform: translate3d(0, 40px, 0)
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

/* custom radio button design start */

.customRadioBtnContainer {
    position: relative;
}

.customRadioBtnContainer .customRadioBtnInputBox {
    position: relative;
    top: 4px;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

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

.customRadioCheckDot {
    width: 20px;
    height: 20px;
    background: transparent;
    border-radius: var(--radius-rounded);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

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

.customRadioCheckDot::after {
    content: "";
    position: absolute;
    width: calc(20px - 8px);
    height: calc(20px - 8px);
    border-radius: var(--radius-rounded);
    display: none;
}

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

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

/* custom radio button design end */

.dz-hidden-input {
    overflow: hidden;
}

.commonBorderLink,
.commonBorderLink:hover,
.commonBorderLink:focus {
    display: inline-block;
    color: var(--primary-link-foreground) !important;
    border-bottom: 1px solid var(--primary-link-foreground);
    text-decoration: none !important;
    cursor: pointer;
}

/* loader start */

.bodyOverflow .Loader__background {
    z-index: 1 !important;
    height: calc(100vh - 102px) !important;
    height: calc(100svh - 102px) !important;
    height: calc(100dvh - 102px) !important;
}

.store .Loader__background {
    z-index: 1 !important;
    height: calc(100vh - 136px) !important;
    height: calc(100svh - 136px) !important;
    height: calc(100dvh - 136px) !important;
}

.bodyOverflow .uploadImageDisplay .Loader__background,
.orderManageMentTableLoader .Loader__background,
.store .uploadImageDisplay .Loader__background {
    height: 100% !important;
}

.orderManageMentTableLoader {
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* loader end */

/* common modal popup start */

.commonModalContainer,
.loginModal {
    margin-top: 88px;
}

.commonModalContainer .modal-content,
.loginModal .modal-content {
    border-radius: var(--radius-3);
    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% - 25px);
    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,
.loginModal .close,
.loginModal .close:hover,
.loginModal .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(--background);
    background-image: url('../Icons/modalCloseIcon.svg');
    background-repeat: no-repeat;
    background-position: center;
    border-radius: var(--radius-rounded);
    opacity: 1;
    box-shadow: unset;
    outline: unset;
}

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

.commonModalHeader .close span[aria-hidden="true"],
.loginModal .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;
}

/* login modal */

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

.loginModal .modal-header {
    border-bottom: unset;
}

.loginModal .modal-body {
    padding: 30px;
}

/* order modal  */
.orderModal .modal-header {
    padding: 0;
}

.orderModal .modal-body {
    padding: 0;
}

.orderModal .close {
    z-index: 1;
}

/* common modal popup end */


/* table edit and delete button  start */
.tableEditIconFlex,
.tableDeleteIconFlex {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1.5;
    border: 0;
    padding: 0;
    background-color: transparent !important;
    font-weight: 500;
    outline: none !important;
    text-decoration: none !important;
    cursor: pointer;
    gap: 4px;
}

.tableEditIconFlex {
    color: var(--primary-link-foreground) !important;
}


.tableDeleteIconFlex {
    color: var(--error-foreground) !important;
}

.displayInlineBlock {
    display: inline-block;
}

.viewDetailsAccordionGridRight {
    display: grid;
    grid-template-columns: 100%;
    gap: 8px;
}

/* table edit and delete button end */

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

.dashboardTableOuterContainer {
    border-radius: 0 0 6px 6px;
}

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

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

.chartjs-external-tooltip {
    position: absolute;
    background: var(--background);
    border: 1px solid var(--primary-border);
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 12px;
    color: var(--primary-foreground);
    pointer-events: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    z-index: 9999;
    max-width: 220px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.1s ease;
}

.dividerClass {
    padding-bottom: 18px;
    border-bottom: 1px solid var(--primary-border);
}

.languageBox>div:not(:first-child) {
    padding-top: 18px;
    border-top: 1px solid var(--primary-border);
    margin-top: 18px;
}