/* body */
@font-face {
    font-family: iranyekan;
    font-style: normal;
    font-weight: bold;
    src: url('fonts/eot/iranyekanwebboldfanum.eot');
    src: url('fonts/eot/iranyekanwebboldfanum.eot?#iefix') format('embedded-opentype'), /* IE6-8 */ url('fonts/woff/iranyekanwebboldfanum.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url('fonts/ttf/iranyekanwebboldfanum.ttf') format('truetype');
}

@font-face {
    font-family: iranyekan;
    font-style: normal;
    font-weight: 100;
    src: url('fonts/eot/iranyekanwebthinfanum.eot');
    src: url('fonts/eot/iranyekanwebthinfanum.eot?#iefix') format('embedded-opentype'), /* IE6-8 */ url('fonts/woff/iranyekanwebthinfanum.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url('fonts/ttf/iranyekanwebthinfanum.ttf') format('truetype');
}

@font-face {
    font-family: iranyekan;
    font-style: normal;
    font-weight: 300;
    src: url('fonts/eot/iranyekanweblightfanum.eot');
    src: url('fonts/eot/iranyekanweblightfanum.eot?#iefix') format('embedded-opentype'), /* IE6-8 */ url('fonts/woff/iranyekanweblightfanum.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url('fonts/ttf/iranyekanweblightfanum.ttf') format('truetype');
}

@font-face {
    font-family: iranyekan;
    font-style: normal;
    font-weight: normal;
    src: url('fonts/eot/iranyekanwebregularfanum.eot');
    src: url('fonts/eot/iranyekanwebregularfanum.eot?#iefix') format('embedded-opentype'), /* IE6-8 */ url('fonts/woff/iranyekanwebregularfanum.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url('fonts/ttf/iranyekanwebregularfanum.ttf') format('truetype');
}

@font-face {
    font-family: iranyekan;
    font-style: normal;
    font-weight: 500;
    src: url('fonts/eot/iranyekanwebmediumfanum.eot');
    src: url('fonts/eot/iranyekanwebmediumfanum.eot?#iefix') format('embedded-opentype'), /* IE6-8 */ url('fonts/woff/iranyekanwebmediumfanum.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url('fonts/ttf/iranyekanwebmediumfanum.ttf') format('truetype');
}

@font-face {
    font-family: iranyekan;
    font-style: normal;
    font-weight: 800;
    src: url('fonts/eot/iranyekanwebextraboldfanum.eot');
    src: url('fonts/eot/iranyekanwebextraboldfanum.eot?#iefix') format('embedded-opentype'), /* IE6-8 */ url('fonts/woff/iranyekanwebextraboldfanum.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url('fonts/ttf/iranyekanwebextraboldfanum.ttf') format('truetype');
}

@font-face {
    font-family: iranyekan;
    font-style: normal;
    font-weight: 900;
    src: url('fonts/eot/iranyekanwebblackfanum.eot');
    src: url('fonts/eot/iranyekanwebblackfanum.eot?#iefix') format('embedded-opentype'), /* IE6-8 */ url('fonts/woff/iranyekanwebblackfanum.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url('fonts/ttf/iranyekanwebblackfanum.ttf') format('truetype');
}

@font-face {
    font-family: iranyekan;
    font-style: normal;
    font-weight: 950;
    src: url('fonts/eot/iranyekanwebextrablackfanum.eot');
    src: url('fonts/eot/iranyekanwebextrablackfanum.eot?#iefix') format('embedded-opentype'), /* IE6-8 */ url('fonts/woff/iranyekanwebextrablackfanum.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url('fonts/ttf/iranyekanwebextrablackfanum.ttf') format('truetype');
}

.no-select {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

textarea::-webkit-input-placeholder {
    color: #ccc !important;
}

textarea:-moz-placeholder { /* Firefox 18- */
    color: #ccc !important;
}

textarea::-moz-placeholder { /* Firefox 19+ */
    color: #ccc !important;
}

textarea:-ms-input-placeholder {
    color: #ccc !important;
}

textarea::placeholder {
    color: #ccc !important;
}

input::-webkit-input-placeholder {
    color: #ccc !important;
}

input:-moz-placeholder { /* Firefox 18- */
    color: #ccc !important;
}

input::-moz-placeholder { /* Firefox 19+ */
    color: #ccc !important;
}

input:-ms-input-placeholder {
    color: #ccc !important;
}

input::placeholder {
    color: #ccc !important;
}

* {
    outline: none !important;
}

* {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

*, input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
}

body::-webkit-scrollbar, .shop-category-container::-webkit-scrollbar {
    width: 8px;
}

body::-webkit-scrollbar-thumb, .shop-category-container::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 8px;
    width: 8px;
}

body::-webkit-scrollbar-track, .shop-category-container::-webkit-scrollbar-track {
    background-color: #eee;
}

#scrollToTop {
    opacity: 0;
    visibility: hidden;
    position: fixed;
    bottom: 80px;
    right: calc((100vw - min(var(--widthdashboard), 450px)) / 2);
    z-index: 9999;
    border: none;
    outline: none;
    background-color: #fff;
    color: #999;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    font-size: 18px;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

#scrollToTop.visible {
    opacity: 1;
    visibility: visible;
}

#scrollToTop i {
    width: 18px;
    height: 18px;
    font-size: 18px;
}

#overlay {
    z-index: 1001;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: none;
    background: #00000020;
}

::-moz-selection { /* Code for Firefox */
    color: white;
    background: var(--basecolor);;
}

::selection {
    color: white;
    background: var(--basecolor);;
}

a:not([href]) {
    transition: 0.3s;
}

a:not([href]):hover {
    color: var(--button-active-hover);
}

body {
    font-family: iranyekan !important;
    font-weight: 300;
    -webkit-appearance: none;
    background-color: #f9f9f9;
    overflow: auto !important;
    font-size: 15px;
}

a {
    cursor: pointer !important;
    text-decoration: none !important;
}

:root {
    --basecolor: #1acd96;
    --basecolorshadow: #1acd9642;
    --button-active-hover: #17a97c;
    --button-active: var(--basecolor);
    --button-deactive: #cacaca;
    --button-deactive-hover: #a8a8a8;
    --button-red: #ff4c5f;
    --button-red-hover: #d34453;
    --button-white: #fafafa;
    --background-button: #f5f5f5;
}

.containery {
    height: 100vh; /* Fallback for browsers that do not support Custom Properties */
    height: calc(var(--vh, 1vh) * 100);
}

/* loading */

.spinner {
    margin: auto;
}

.spinner-white {
    border-color: #fff !important;
    border-bottom-color: transparent !important;
}

.spinner-gray {
    border-color: #888 !important;
    border-bottom-color: transparent !important;
}

.spinner-red {
    border-color: var(--button-red) !important;
    border-bottom-color: transparent !important;
}

.spinner-green {
    border-color: var(--basecolor) !important;
    border-bottom-color: transparent !important;
}

.spinner-blue {
    border-color: #11a0ef !important;
    border-bottom-color: transparent !important;
}

.spinner-yellow {
    border-color: #ffba00 !important;
    border-bottom-color: transparent !important;
}

.spinner-purple {
    border-color: #9911ef !important;
    border-bottom-color: transparent !important;
}

.spinner {
    width: 18px;
    height: 18px;
    border: 3px solid #FFF;
    border-bottom-color: transparent !important;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.spinner .bounce1 {
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}

.spinner .bounce2 {
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
    0%, 80%, 100% {
        -webkit-transform: scale(0)
    }
    40% {
        -webkit-transform: scale(1.0)
    }
}

@keyframes sk-bouncedelay {
    0%, 80%, 100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    40% {
        -webkit-transform: scale(1.0);
        transform: scale(1.0);
    }
}

.bottom-height {
    height: 67px;
}

.bottom-height.short {
    height: 67px;
}

.bottom-height.product-bottom {
    height: 67px;
}

.bottom-height.product-bottom.closeshop {
    height: 108px;
}

.product .bottom-height.product-bottom, .cartlist .bottom-height.product-bottom {
    height: 55px;
}

.top-height {
    height: 63px;
}

.bottom-padding {
    padding-bottom: 16px;
}

/* getmobile */

.box {
    overflow: auto;
    height: 100vh; /* Fallback for browsers that do not support Custom Properties */
    height: calc(var(--vh, 1vh) * 100);
    margin-top: -37px;
}

.margin-1 {
    margin-right: 16px;
}

.box .margin-row, .margin-row {
    margin-bottom: 16px;
}

.box a {
    width: var(--wc);
    height: var(--wc);
    color: var(--basecolor);
    border-radius: calc(var(--wc) / 2);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.3s;
    cursor: pointer;
    font-size: 30px;
    font-weight: 500;
    background-color: var(--background-button);
}

.box a:hover {
    background-color: var(--basecolor);
    color: white;
}

.top-title {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    -webkit-box-shadow: 0 0 12px 3px rgba(0, 0, 0, .05);
    box-shadow: 0 0 12px 3px rgba(0, 0, 0, .05);
    background-color: #fff;
    width: 100%;
    padding: 16px 12px;
    border-bottom: 1px #f1f1f1 solid;
    z-index: 9;
    display: flex;
    justify-content: center;
    z-index: 999;
    height: 63px;
}

.bottom-header .footer-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.bottom-header .footer-icon .footer-title {
    font-size: 11px;
    text-align: center;
    margin-top: 4px;
    font-weight: 400;
}

.bottom-header {
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    -webkit-box-shadow: 0 0 12px 3px rgba(0, 0, 0, .05);
    box-shadow: 0 0 12px 3px rgba(0, 0, 0, .05);
    background-color: #fff;
    width: 100%;
    padding: 16px 8px 10px 8px;
    border-bottom: 1px #f1f1f1 solid;
    display: flex;
    justify-content: space-evenly;
    z-index: 999;
    direction: rtl;
    height: 67px;
}

.top-title .title {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.top-title .farsi {
    width: var(--widthdashboard);
    max-width: 450px;
    text-align: right;
}

.button {
    cursor: pointer;
}

.button-bottom {
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    padding: 12px;
    -webkit-box-shadow: 0 0 12px 3px rgba(0, 0, 0, .05);
    box-shadow: 0 0 12px 3px rgba(0, 0, 0, .05);
    background-color: #fff;
    width: 100%;
    justify-content: center;
    display: flex;
    z-index: 1000;
}

.button-bottom.product-button {
    -webkit-box-shadow: none;
    box-shadow: none;
    border-top: 1px #e5e5e5 solid;
    z-index: 999;
}

.button-bottom .button-row {
    width: calc(var(--widthdashboard));
    max-width: 450px;
    align-items: center;
    justify-content: center;
}

.button-bottom .button-row a {
    color: #fff;
    border-radius: 8px;
    height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 400;
    font-size: 14px;
    cursor: pointer;
    transition: 0.3s;
    text-align: center;
    direction: rtl;
}

.button-bottom .button-row .c100 {
    width: 100%;
    margin: 0px;
    /*background-color: var(--button-white);
    border: 1px solid var(--basecolor);
    color: var(--basecolor);*/
    background-color: #f0f0f0;
    border: 0;
    color: #666;
}

.button-bottom.one .button-row .c100 {
    width: 100%;
    margin: 0px;
    background-color: var(--button-active);
    border: 1px solid var(--button-active);
    color: #fff;
}

.button-bottom.one .button-row .c100:hover {
    background-color: var(--button-active-hover);
    border-color: var(--button-active-hover);
    color: #fff;
}

.button-bottom .button-row .c100:hover {
    /*border: 1px solid var(--button-active-hover);
    color: var(--button-active-hover);*/
    background-color: #e5e5e5;
}

.button-bottom .button-row .c50right {
    width: 50%;
    margin: 0px 0px 0px 6px;
}

.button-bottom .button-row .c50left {
    width: 50%;
    margin: 0px 6px 0px 0px;
    /*background-color: var(--button-white);
    border: 1px solid var(--basecolor);
    color: var(--basecolor);*/
    background-color: #f0f0f0;
    border: 0;
    color: #666;
}

.button-bottom .button-row .c50left:hover {
    /*border: 1px solid var(--button-active-hover);
    color: var(--button-active-hover);*/
    background-color: #e5e5e5;
}

.button-bottom .active {
    background-color: var(--button-active) !important;
    border: 1px solid var(--button-active) !important;
    color: #fff;
    transition: 0.3s;
}

.button-bottom .deactive, .button-bottom.one .deactive {
    background-color: var(--button-deactive) !important;
    border: 1px solid var(--button-deactive) !important;
    color: #fff;
    transition: 0.3s;
}

.button-bottom .deactive:hover, .button-bottom.one .deactive:hover {
    background-color: var(--button-deactive-hover) !important;
    border-color: var(--button-deactive-hover) !important;
}

.button-bottom .active:hover {
    background-color: var(--button-active-hover) !important;
    border-color: var(--button-active-hover) !important;
}

.redbutton {
    color: white !important;
    background-color: var(--button-red) !important;
    border-color: var(--button-red) !important;
}

.redbutton:hover {
    background-color: var(--button-red-hover) !important;
    border-color: var(--button-red-hover) !important;
}

.credit-label {
    direction: rtl;
    font-size: 16px;
    color: #000;
    margin-bottom: 10px;
    width: 100%;
    text-align: center;
    font-weight: 400;
}

.credit-label.over {
    position: absolute;
    left: 9px;
    width: auto;
    top: 9px;
    background-color: #eee;
    color: #000;
    font-weight: 400;
    padding: 3px 8px;
    border-radius: 5px;
    border: 1px solid #ddd;
}

.send-credit .credit-label.over {
    top: 51px;
}

.credit-text {
    direction: rtl;
    font-size: 28px;
    color: #444;
    font-weight: bold;
    margin-bottom: 5px;
    margin-top: 10px;
    width: 100%;
    text-align: center;
}

.top-label {
    direction: rtl;
    font-size: 14px;
    color: #888;
    margin-bottom: 8px;
    width: 100%;
    text-align: center;
}

.top-company {
    background: #f0f0f0;
    padding: 5px 10px;
    -moz-border-radius-bottomleft: 10px;
    -moz-border-radius-bottomright: 10px;
    -moz-border-radius-topleft: 0;
    -moz-border-radius-topright: 0;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    position: fixed;
    top: 0;
}

.top-label-title {
    direction: rtl;
    font-size: 15px;
    color: #888;
    text-align: center;
    padding: 12px;
    width: 100%;
    line-height: 30px;
    background: #fff;
    margin: 16px 0px 0px;
    border-radius: 10px;
    -webkit-box-shadow: 0 0 12px rgba(0, 0, 0, .05);
    box-shadow: 0 0 12px rgba(0, 0, 0, .05);
    border: 1px #f1f1f1 solid;
}

.top-label-company {
    direction: rtl;
    font-size: 14px;
    color: #888;
    width: inherit;
    text-align: center;
    margin: 0;
}

.top-text {
    direction: rtl;
    color: #666;
    font-weight: 300;
    font-size: 32px;
    margin-bottom: 20px;
    white-space: nowrap;
}

.top-text .text-label, .label.main .text-label {
    font-size: 13px;
    font-weight: 300;
    margin-right: 4px;
}

.top-text.wrap {
    white-space: normal;
    text-align: center;
}

.toman {
    margin-bottom: 0px;
}

.toman-label {
    font-weight: 300;
    font-size: 15px;
    margin-top: -5px;
    color: #999;
}

.palceholderclass {
    color: #ddd;
}

.invisible {
    visibility: hidden;
}

.state {
    border-radius: 65px;
    width: 130px;
    height: 130px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 40px;
    border: 4px solid var(--basecolor);
}

.success {
    border-color: var(--basecolor);
    color: var(--basecolor);
}

.error {
    border-color: var(--button-red);
    color: var(--button-red);
}

/* get gender and bd*/
.bdbox {
    overflow: auto;
    height: 100vh; /* Fallback for browsers that do not support Custom Properties */
    height: calc(var(--vh, 1vh) * 100);
    margin-top: -37px;
}

.genderbox {
    border-radius: 20px;
    position: relative;
    background-color: var(--background-button);
}

.genderbox .activecolor {
    color: #fff !important;
}

.genderbox .activebox {
    position: absolute;
    width: 75px;
    height: 40px;
    background-color: var(--basecolor);
    margin-top: 0px;
    border-radius: 20px;
}

.genderbox a {
    width: 75px;
    height: 40px;
    color: var(--basecolor);
    align-items: center !important;
    justify-content: center !important;
    display: flex;
    position: relative;
    transition: 0.3s;
    font-weight: 300;
}

.customercredit.genderbox a, .customercredit.genderbox .activebox {
    width: 96px;
}

.hide {
    display: none !important;
}

.marginday-1 {
    margin-right: 5px;
}

.daybox .margin-row {
    margin-bottom: 5px;
}

.monthbox .margin-row {
    margin-bottom: 5px;
}

.daybox a {
    width: var(--wday);
    height: var(--wday);
    color: var(--basecolor);
    border-radius: calc(var(--wday) / 2);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.3s;
    cursor: pointer;
    font-size: 15px;
    font-weight: 300;
    background-color: var(--background-button);
}

.monthbox a {
    width: var(--wmonth);
    height: var(--hmonth);
    color: var(--basecolor);
    border-radius: calc(var(--wmonth) / 3);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.3s;
    cursor: pointer;
    font-size: 15px;
    font-weight: 300;
    padding-bottom: 4px;
    background-color: var(--background-button);
}

.daybox a:hover, .dayactive, .monthbox a:hover, .monthactive {
    background-color: var(--basecolor) !important;
    color: white !important;
    transition: 0.3s;
}

.monthactive .monthtitle, .monthbox a:hover .monthtitle, .monthbox a .monthtitle:hover {
    color: white !important;
    transition: 0.3s;
}

.monthtitle {
    font-size: 8px;
    color: #aaa;
    margin-bottom: 4px;
    margin-top: 8px;
    transition: 0.3s;
}

/*cat*/

.categorybottom {
    padding-bottom: 74px;
    padding-top: 16px;
}

.catbox {
    height: 100vh; /* Fallback for browsers that do not support Custom Properties */
    height: calc(var(--vh, 1vh) * 100);
}

.categorylist {
    flex-grow: 1;
}

.categorycontainer {
    height: calc(var(--vh, 1vh) * 100);
}

.cutomercategory-row {
    width: calc(var(--widthbutton)) !important;
    display: flex;
    flex-direction: row;
    direction: rtl;
    margin: 0px auto;
    padding: 4px 0px 4px 0px;
}

.cutomercategory-column.column1 {
    margin-left: 8px;
}

.cutomercategory-column.active {
    border: 1px solid var(--basecolor) !important;
    box-shadow: 0 0 0 0.2rem var(--basecolorshadow);
    color: var(--basecolor) !important;
}

.cutomercategory-row .cutomercategory-column {
    display: flex;
    direction: rtl;
    align-items: center;
    justify-content: center !important;
    border: 1px solid #ddd;
    border-radius: 10px;
    background: white;
    padding: 20px 10px;
    transition: 0.3s;
    width: calc(var(--widthbutton) / 2 - 4px) !important;
    text-align: center;
    font-size: 14px;
    cursor: pointer;
}

.cutomercategory a:hover {
    color: white;
    background-color: var(--button-active-hover) !important;
}

.cutomercategory a {
    font-size: 22px;
    color: white;
    background-color: var(--basecolor) !important;
    height: 45px;
    border-radius: 25px;
    width: 45px;
    display: flex;
    margin-right: 8px;
    margin-top: 5px;
    transition: 0.3s;
}

.cutomercategory a span {
    margin: auto;
    line-height: 0;
}

.cutomercategory {
    display: flex;
    direction: rtl;
}

.cutomername, .cutomercategory {
    padding: 0;
    margin-bottom: 8px;
    position: relative;
}

.cutomername .toman-label {
    position: absolute;
    top: 17px;
    left: 12px;
    margin: 0;
}

.cutomercategory input {
    width: calc(var(--widthbutton) - 45px - 8px) !important;
}

/*name*/

.cutomername input, .cutomercategory input {
    border-radius: 23px;
    position: relative;
    background-color: white;
    height: 45px;
    padding: 0 10px;
    text-align: center;
    width: var(--widthbutton);
    margin: 5px auto;
    border: 2px solid var(--basecolor);
}

.namelabel {
    color: var(--basecolor);
    font-weight: 400;
    font-size: 18px;
    direction: rtl;
    margin: 5px 0px 12px 0px !important;
}

.cutomerlabel {
    text-align: center;
    margin-bottom: 74px;
}

.cutomerlabel label {
    margin-bottom: 0px;
}

.credit-value .namelabel {
    background: #1acd9618;
    padding: 8px 12px;
    border-radius: 8px;
    margin-bottom: 12px !important;
}

.cutomerlabel .checkout-btn {
    background: #ff4c5f18;
    padding: 10px 16px;
    border-radius: 8px;
    border: 1px solid var(--button-red);
    color: var(--button-red);
    margin-bottom: 12px;
    display: inline-block;
    transition: all .3s;
    font-weight: 400;
}

.cutomerlabel .checkout-btn:hover {
    background: #ff4c5f25;
    color: var(--button-red);
}

.credit-value span {
    font-size: 30px;
    margin-left: 8px;
    color: var(--basecolor);
}

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

.divider {
    margin: 0px auto 16px auto;
    height: 3px;
    width: calc(var(--widthdashboard) / 3);
    max-width: 150px;
    background-color: #eee;
    border-radius: 10px;
}

.divider.w100 {
    height: 1px;
    width: calc(var(--widthdashboard));
}

.setting .divider {
    margin: 16px auto 0px auto;
}

.namebox {
    overflow: auto;
    height: 100vh; /* Fallback for browsers that do not support Custom Properties */
    height: calc(var(--vh, 1vh) * 100);
}

/*done*/

.donebox {
    width: var(--widthbutton);
    overflow: auto;
    height: 100vh; /* Fallback for browsers that do not support Custom Properties */
    height: calc(var(--vh, 1vh) * 100);
}

.donebox.margin {
    margin-top: -37px;
}

/* all page */

.credit, .sendsms, .setting, .dashboard, .customerdashboard, .login, .maincontent, .document, .ticket, .product, .productsetting, .shop, .cartlist, .shopinfo {
    /*height: 100vh;
    height: calc(var(--vh, 1vh) * 100);*/
    width: var(--widthdashboard);
    max-width: 450px;
    margin: 0 auto;
}

.testpage {
    width: 100vw;
    width: calc(var(--vw, 1vw) * 100);
    padding: 0px 16px;
}

.testpage .login-row {
    padding: 0px 16px;
}

.testpage .list {
    padding-top: 24px;
}

.testpage .row {
    display: flex;
    width: 100%;
    flex-flow: row;
}

.testpage .button {
    background-color: #1ACD96;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgb(255 255 255 / 25%), 0 5px 15px rgb(26 205 150 / 35%) !important;
    color: #fff;
    fill: #fff;
    width: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    position: relative;
    top: 0px;
    transition: all .3s;
}

.testpage .button:hover {
    box-shadow: 0 2px 5px rgb(255 255 255 / 30%), 0 7px 30px rgb(23 169 124 / 45%) !important;
    top: -3px;
    color: #fff;
    fill: #fff;
}

.boxdesign-background {
    background-color: white;
    border-radius: 10px;
    width: 100%;
}

.boxdesign {
    -webkit-border-radius: 8px;
    border-radius: 8px;
    /*border: 1px solid var(--basecolor);
    border-bottom-width: 5px;*/
    background: white;
    padding: 12px;
    -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, .05);
    box-shadow: 0 0 15px rgba(0, 0, 0, .05);
    border: 1px #f1f1f1 solid;
    transition: 0.3s;
    direction: rtl;
}

/*dashboard*/

.dashboard-button {
    height: 42px;
    width: 100%;
    color: #555 !important;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: start;
    font-weight: 400;
    font-size: 13px;
    cursor: pointer;
    transition: 0.3s;
    /*border: 1px solid var(--basecolor);*/
    direction: rtl;
    padding-right: 6px;
    position: relative;
    background-color: #fafafa;
    border: 1px solid #f0f0f0 !important;
}

.dashboard-button:hover {
    background-color: #f0f0f0;
}

.dashboard-button:not(.no-after)::after, .addressbutton:not(.no-after)::after {
    font-family: uicons-regular-rounded !important;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    content: "\f154";
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    font-size: 15px;
}

.dashboard-button i, .addressbutton i {
    font-size: 16px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff88;
    border-radius: 8px;
    margin-left: 8px;
}

.dashboard-button .badgebtn {
    background-color: var(--button-red) !important;
    padding-top: 3px;
    border-radius: 50%;
    margin-right: 6px;
    color: white;
    font-size: 12px;
    width: 18px;
    height: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.customer-dashboard {
    direction: rtl;
}

.customer-dashboard-box .icon {
    width: 50px;
    height: 50px;
    color: #1acd96 !important;
    background-color: #e2f9f2 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    position: absolute;
    top: -16px;
    padding-top: 11px;
    font-size: 20px;
    border: 1px solid #1acd96;
}

.customer-dashboard-box .icon.red, .find-dashboard-box .icon.red {
    background-color: #ffe9eb !important;
    color: #ff4c5f !important;
    border-color: #ff4c5f !important;
}

.customer-dashboard-box .icon.blue, .find-dashboard-box .icon.blue {
    background-color: #e1f3fd !important;
    color: #11a0ef !important;
    border-color: #11a0ef !important;
}

.customer-dashboard-box .icon.gray, .find-dashboard-box .icon.gray {
    background-color: #f0f0f0 !important;
    color: #888888 !important;
    border-color: #888888 !important;
}

.customer-dashboard-box .icon.yellow, .find-dashboard-box .icon.yellow {
    background-color: #fff6df !important;
    color: #ffba00 !important;
    border-color: #ffba00 !important;
}

.customer-dashboard-box .top-text {
    margin-bottom: 0px;
    font-size: 20px !important;
    font-weight: 400;
    margin-top: 5px;
    width: 100%;
    text-align: center;
}

.find-dashboard-box .top-text {
    margin-bottom: 0px;
    font-size: 20px !important;
    font-weight: 400;
    white-space: normal;
    text-align: right;
    line-height: 35px;
    width: 100%;
}

.find-dashboard-box .top-label {
    margin-top: 8px !important;
    font-weight: 300;
    white-space: normal;
    line-height: 30px;
    font-size: 15px;
    color: #666;
    text-align: right;
}

.find-dashboard-box .icon {
    width: 100%;
    color: #1acd96 !important;
    background-color: #e2f9f2 !important;
    display: flex;
    align-items: center;
    justify-content: right;
    border-radius: 15px;
    font-size: 17px;
    padding: 8px 8px 8px 12px;
    margin-top: 8px !important;
}

.find-dashboard-box .icon .img {
    height: 36px;
    background-color: #ffffff88;
    width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
}

.find-dashboard-box .icon .img i {
    height: 17px;
}

.find-dashboard-box .icon .button {
    font-size: 16px;
    margin-right: 8px;
    font-weight: 400;
    text-align: right;
}

.customer-dashboard-box {
    margin-top: 32px;
    width: calc(var(--widthdashboard) / 2 - 8px);
    max-width: calc(225px - 8px);
    position: relative;
    padding-top: 50px;
    cursor: pointer;
}

.find-dashboard-box {
    width: calc(var(--widthdashboard) / 2 - 8px);
    max-width: calc(225px - 8px);
    position: relative;
    cursor: pointer;
    border-radius: 20px;
    padding: 15px;
}

.customer-dashboard-box:nth-child(1), .find-dashboard-box:nth-child(1) {
    margin-left: 8px;
}

.customer-dashboard-box:nth-child(2), .find-dashboard-box:nth-child(2) {
    margin-right: 8px;
}

.dashboard-box {
    margin-top: 16px;
}

.dashboard-box .top-text {
    margin-bottom: 16px;
}

.dashboard-button.white.color {
    color: #aaa !important;
    background-color: var(--button-white) !important;
    border-color: #aaaaaa50 !important;
}

.dashboard-button.white.color:hover {
    border-color: #555 !important;
    color: #555 !important;
}

.dashboard-button.red.outline {
    color: #ff4c5f !important;
}

.dashboard-button.red.color {
    color: #ff4c5f !important;
    /*background-color: #ff4c5f20 !important;*/
    border-color: #ff4c5f50 !important;
}

.dashboard-button.red.color:hover {
    /*background-color: #ff4c5f30 !important;*/
}

.dashboard-button.red.color.outline {
    color: #ff4c5f !important;
    background-color: #ff4c5f20 !important;
    border-color: #ff4c5f50 !important;
}

.dashboard-button.red.color.outline:hover {
    background-color: #ff4c5f30 !important;
}

.dashboard-button.green.color {
    color: #1acd96 !important;
    /*background-color: #1acd9620 !important;*/
    border-color: #1acd9650 !important;
}

.dashboard-button.green.color:hover {
    /*background-color: #1acd9630 !important;*/
}

.dashboard-button.green.color.outline {
    color: #1acd96 !important;
    background-color: #1acd9620 !important;
    border-color: #1acd9650 !important;
}

.dashboard-button.green.color.outline:hover {
    background-color: #1acd9630 !important;
}

.dashboard-button.gray.color {
    color: #888 !important;
    /*background-color: #88888820 !important;*/
    border-color: #888 !important;
}

.dashboard-button.gray.color:hover {
    /*background-color: #88888830 !important;*/
}

.dashboard-button.blue.color {
    color: #11a0ef !important;
    /*background-color: #11a0ef20 !important;*/
    border-color: #11a0ef50 !important;
}

.dashboard-button.blue.color:hover {
    /*background-color: #11a0ef30 !important;*/
}

.dashboard-button.blue.color.outline {
    color: #11a0ef !important;
    background-color: #11a0ef20 !important;
    border-color: #11a0ef50 !important;
}

.dashboard-button.blue.color.outline:hover {
    background-color: #11a0ef30 !important;
}

.dashboard-button.yellow.color {
    color: #f07722 !important;
    /*background-color: #f0772220 !important;*/
    border-color: #f0772250 !important;
}

.dashboard-button.yellow.color:hover {
    /*background-color: #f0772230 !important;*/
}

.dashboard-button.yellow.color.outline {
    color: #f07722 !important;
    background-color: #f0772220 !important;
    border-color: #f0772250 !important;
}

.dashboard-button.yellow.color.outline:hover {
    background-color: #f0772230 !important;
}

.dashboard-button.purple.color {
    color: #9911ef !important;
    /*background-color: #9911ef20 !important;*/
    border-color: #9911ef !important;
}

.dashboard-button.purple.color:hover {
    /*background-color: #9911ef30 !important;*/
}

.dashboard-button.purple.outline.color {
    color: #9911ef !important;
    background-color: #9911ef20 !important;
    border-color: #9911ef !important;
}

.dashboard-button.purple.color.outline:hover {
    background-color: #9911ef30 !important;
}

.dashboard-button.pink.color {
    color: #ff6fb5 !important;
    /*background-color: #ff6fb520 !important;*/
    border-color: #ff6fb5 !important;
}

.dashboard-button.pink.color:hover {
    /*background-color: #ff6fb530 !important;*/
}

.dashboard-button.pink.color.outline {
    color: #ff6fb5 !important;
    background-color: #ff6fb520 !important;
    border-color: #ff6fb5 !important;
}

.dashboard-button.pink.color.outline:hover {
    background-color: #ff6fb530 !important;
}

.dashboard-button.top {
    margin-top: 10px;
}

.dashboard .top-text, .customerdashboard .top-text {
    font-weight: 400;
    color: #444;
    font-size: 15px;
    text-wrap: auto;
    text-wrap-mode: wrap;
    text-wrap-style: auto;
    text-align: center;
    display: flex;
    justify-content: center;
    justify-content: center;
    align-items: center;
}

.copy-box i {
    display: flex;
    font-size: 15px;
    width: 32px;
    height: 32px;
    background: #eee;
    padding: 8px;
    border-radius: 8px;
    margin-left: 8px;
    justify-content: center;
    align-items: center;
}

.copy-box {
    cursor: pointer;
}

#snowfall {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1000;
}

.snowflake {
    position: absolute;
    top: -20px; /* شروع حرکت از بالای صفحه */
    width: 16px;
    height: 16px;
    background-size: cover;
    opacity: 1;
    pointer-events: none;
    animation: fall linear infinite;
}

.snowflake.PARTY {
    background-image: url('/styles/images/shop/confetti_4.png');
}

.snowflake.SNOW {
    background-image: url('/styles/images/shop/snowflake.png');
}

@keyframes fall {
    to {
        transform: translateY(100vh); /* حرکت به پایین صفحه */
    }
}

/* انیمیشن محو شدن */
@keyframes fadeOut {
    from {
        opacity: 0.8; /* حالت اولیه */
    }
    to {
        opacity: 0; /* محو شدن */
    }
}

@keyframes fadeOutp {
    from {
        opacity: 1; /* حالت اولیه */
    }
    to {
        opacity: 0; /* محو شدن */
    }
}

.apikey {
    border: 1px solid #999;
    border-radius: 8px;
    padding: 8px 12px;
    background: #fafafa;
    font-size: 14px;
    display: flex;
    flex-direction: row;
    align-items: center;
    cursor: pointer;
}

.apikey i {
    margin-left: 5px;
    height: 14px !important;
    width: 14px !important;
}

.expiremessage {
    margin-bottom: 16px;
    direction: rtl;
    text-align: justify;
    padding: 10px;
    border-radius: 10px;
    font-size: 14px;
}

.expiremessage.ok {
    border: 1px solid var(--basecolor);
    color: var(--basecolor);
    background: #1acd9610;
}

.expiremessage.error {
    border: 1px solid var(--button-red);
    color: var(--button-red);
    background: #ff4c5f10;
}

.expiremessage.reminde {
    border: 1px solid #FF8800;
    color: #FF8800;
    background: #FF880010;
}

/*setting*/

.setting-box {
    text-align: right;
    direction: rtl;
    color: #444;
    font-size: 15px;
    font-weight: 300;
    width: 100%;
}

.customer-credit .credit-state {
    display: flex;
    align-items: center;
}

.identifier-box {
    display: none !important;
    flex-direction: column;
    padding: unset;
    margin-top: 8px;
}

.identifier-box .credit-box {
    padding: 10px;
}

.customer-credit .credit-box {
    display: none;
    flex-direction: column;
}

.identifier-box .customer-credit .credit-box .credit-box-type {
    margin-top: 8px;
}

.customer-credit .credit-box .credit-box-type {
    display: flex;
    align-items: center;
}

.customer-credit .credit-box .credit-box-type-percent.active, .customer-credit .credit-box .credit-box-type-amount.active, .customer-credit .credit-box .identifier-box-type-percent.active, .customer-credit .credit-box .identifier-box-type-amount.active {
    display: block;
}

.customer-credit .credit-box .credit-box-type-percent, .customer-credit .credit-box .credit-box-type-amount, .customer-credit .credit-box .identifier-box-type-percent, .customer-credit .credit-box .identifier-box-type-amount {
    display: none;
}

.customer-credit .credit-box .credit-box-type-percent .credit-percent, .customer-credit .credit-box .credit-box-type-amount .credit-amount, .customer-credit .credit-box .identifier-box-type-percent .credit-percent, .customer-credit .credit-box .identifier-box-type-amount .credit-amount {
    position: relative;
    margin: 0px 0px 5px;
    display: flex;
    align-items: center;
}

.customer-credit .credit-box .credit-box-type-percent .credit-percent .top-label, .customer-credit .credit-box .credit-box-type-amount .credit-amount .top-label, .customer-credit .credit-box .identifier-box-type-percent .credit-percent .top-label, .customer-credit .credit-box .identifier-box-type-amount .credit-amount .top-label {
    margin-left: 10px;
}

.customer-credit .credit-box .credit-box-type-percent .infotitle, .customer-credit .credit-box .credit-box-type-amount .infotitle, .customer-credit .credit-box .identifier-box-type-percent .infotitle, .customer-credit .credit-box .identifier-box-type-amount .infotitle {
    padding: 0px;
}

.customer-credit .credit-box .credit-box-type-percent .credit-percent .boxdesign, .customer-credit .credit-box .credit-box-type-amount .credit-amount .boxdesign, .customer-credit .credit-box .identifier-box-type-percent .credit-percent .boxdesign, .customer-credit .credit-box .identifier-box-type-amount .credit-amount .boxdesign {
    flex-grow: 1;
    width: unset;
}

.customer-credit .credit-box .credit-box-type-percent .credit-percent .credit-label.over, .customer-credit .credit-box .credit-box-type-amount .credit-amount .credit-label.over, .customer-credit .credit-box .identifier-box-type-percent .credit-percent .credit-label.over, .customer-credit .credit-box .identifier-box-type-amount .credit-amount .credit-label.over {
    width: unset;
}

.customer-credit .credit-box.active, .identifier-box.active {
    display: flex !important;
}

.setting-box.customer-credit {
    padding: 0px;
    display: flex;
    flex-direction: column;
}

.setting-box:focus {
    box-shadow: 0 0 0 0.2rem var(--basecolorshadow);
    border-color: var(--basecolor);
}

.setting .top-label {
    margin-top: 16px;
    text-align: right;
    margin-bottom: 5px;
}

.setting .label.top {
    margin: 12px 0px 5px 0px;
}

.setting .checkbox, .shopsetting .checkbox {
    display: flex;
    direction: ltr !important;
    cursor: pointer;
    float: right;
    padding: 10px 10px 0px 0px;
}

.setting-box.customer-credit .checkbox {
    padding: 0px;
}

.customer-credit .top-label {
    width: fit-content;
    width: -moz-fit-content;
    margin-top: 5px;
}

.logo-header {
    border-radius: 0px;
    height: 39px;
    width: 39px;
    margin-left: 6px;
}

.checkbox.disable span {
    background-color: #eee;
    color: #ccc;
    transition: 0.3s;
}

.checkbox .fa-check {
    height: 20px;
    width: 20px;
    background-color: var(--basecolor);
    border-radius: 10px;
    color: white;
    font-size: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 7px;
    transition: 0.3s;
    padding: 6px;
}

.setting .button-bottom .button-row {
    width: var(--widthdashboard);
    max-width: 450px;
}

.message-state {
    width: 100%;
    display: flex;
    flex-direction: row;
    direction: rtl;
    margin-top: 8px;
}

.message-state span {
    height: 18px;
    width: 18px;
    border-radius: 9px;
    color: white;
    font-size: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 6px;
    transition: 0.3s;
    padding: 6px;
}

.message-state .label {
    white-space: normal;
    text-align: justify;
}

.message-state.ok .label {
    color: var(--basecolor);
}

.message-state.ok span {
    background-color: var(--basecolor);
}

.message-state.error .label {
    color: var(--button-red);
}

.message-state.error span {
    background-color: var(--button-red);
}

.message-state.wait .label {
    color: #11a0ef;
}

.message-state.wait span {
    background-color: #11a0ef;
}

/* credit */

.credit .button-bottom .button-row {
    width: var(--widthdashboard);
    max-width: 450px;
}

.credit .top-label {
    margin-bottom: 0px;
}

.credit-row {
    text-align: center;
    width: 100%;
    direction: rtl;
    margin-top: 16px;
}

.creditbox {
    width: var(--widthdashboard);
    min-height: 130px;
    align-items: center !important;
    justify-content: center !important;
    display: flex;
    flex-direction: column;
    transition: 0.3s;
    padding: 20px;
}

.creditbox.right {
    margin-left: 10px;
}

.creditbox.active {
    border: 1px solid var(--basecolor);
    box-shadow: 0 0 0 0.25rem #1acd967a;
}

.creditbox .price {
    font-weight: 500;
    color: var(--basecolor);
    margin-bottom: 3px;
}

.creditbox .price-dis {
    color: var(--button-red);
    font-size: 15px;
    text-decoration: line-through;
}

.creditbox .divider {
    margin: 16px 0px;
    width: 35%;
    border-top: 1px solid #ddd;
}

.credit-add-box-parent {
    width: var(--widthdashboard);
    max-width: 450px;
}

.credit-add-box {
    position: fixed;
    bottom: 0;
    margin: 0px auto 90px auto;
    width: inherit;
    max-width: inherit;
}

.send-credit {
    position: relative;
    width: var(--widthdashboard);
    max-width: 450px;
}

.setting .send-credit {
    width: unset;
    max-width: unset;
}

.credit-choice {
    margin-top: 16px;
    display: flex;
    direction: rtl;
    flex-direction: row;
}

.credit-selector {
    display: flex;
    direction: rtl;
    align-items: center;
    flex-basis: 0;
    flex-grow: 1;
    justify-content: center !important;
    border: 1px solid #ddd;
    border-radius: 10px;
    background: white;
    padding: 10px;
    margin-left: 10px;
    transition: 0.3s;
    cursor: pointer !important;
}

.credit-selector.active {
    border: 1px solid var(--basecolor);
    box-shadow: 0 0 0 0.2rem var(--basecolorshadow);
}

.credit-selector:last-child {
    margin-left: 0;
}

.credit-selector .credit-text {
    font-size: 15px;
    margin: 0;
    width: auto;
    font-weight: 400;
}

.credit-selector.active .credit-text {
    color: var(--basecolor);
}

.credit-selector.active .credit-label {
    color: var(--basecolor);
}

.credit-selector .credit-label {
    font-size: 13px;
    margin: 0;
    margin-right: 3px;
    width: auto;
    font-weight: 400;
}

.credit-top-height {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 50%;
    margin-top: -105px;
}

.credit-top-height.pglist {
    margin-top: -170px;
}

/* basket */

.basket-credit {
    direction: rtl;
}

.basket-credit .top-label {
    font-size: 15px;
    color: #444;
    width: auto;
    direction: rtl;
    margin-left: 10px;
}

.basket-info {
    font-size: 13px;
    margin-top: 8px;
    color: #777;
    line-height: 28px;
    white-space: pre-line;
}

/* sendsms */

.sendsms-row {
    display: flex;
    width: 100%;
    direction: rtl;
    margin-bottom: 10px;
}

.sendsms-rowbtn {
    width: 100%;
    margin-top: 0px;
    overflow: hidden;
    opacity: 1.0;
    -webkit-transition: all 0.3s linear;
    transition: all 0.3s linear;
}

.sendsms-rowbtn-line {
    height: 0px;
    opacity: 0.0;
}

.sendsms-rowbtn-expand {
    height: 50px !important;
    margin-top: 10px !important;
    opacity: 1.0 !important;
}

.sendsms-row .dashboard-button {
    width: 90px;
}

.sendsms .top-label, .list .top-label {
    margin-top: 16px;
    margin-bottom: 5px;
    text-align: right;
}

.list .divider {
    margin: 10px 10px 0px 10px;
    height: 1px;
    background-color: #ddd;
}

.list .top-label {
    margin-top: 10px;
    text-align: right;
}

.bottom-box .pagetext {
    margin-top: 10px;
    width: auto;
    flex-grow: 1;
}

.bottom-box .add-deactive {
    font-size: 15px;
    color: var(--button-red);
    font-weight: 400;
    margin-top: 9px;
}

.bottom-box {
    width: 100%;
    display: flex;
    flex-direction: row;
    direction: rtl;
    padding: 0px 8px;
}

.pagetext .page {
    color: var(--button-red);
    font-weight: 400;
}

.text {
    margin: 0px;
    text-align: right;
    direction: rtl;
    color: #666;
    font-size: 16px;
    align-items: center !important;
    display: flex;
}

.text.green {
    color: var(--basecolor);
}

.text.red {
    color: var(--button-red);
}

.text.blue {
    color: #11a0ef;
}

.label {
    direction: rtl;
    font-size: 14px;
    color: #888;
    margin: 0 0 0 8px;
    display: flex;
    white-space: nowrap;
    /*white-space: normal;*/
    line-height: 25px;
    text-align: right;
}

.count-report .label {
    white-space: break-spaces;
}

.label.wrap {
    white-space: break-spaces;
}

.setting .flex-column .label {
    width: 100%;
}

.flex-row .label {
    width: unset;
}

.label.main {
    font-size: 15px;
    color: #444;
    margin: 0;
    text-align: right;
    line-height: 30px;
    white-space: pre-line;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

.label.main.ok {
    color: #1acd96;
    font-weight: 400;
}

.label.main.error {
    color: #ff4c5f;
    font-weight: 400;
}

.label.main.info {
    color: #11a0ef;
    font-weight: 400;
}

.label.main.wait {
    color: #FF8800;
    font-weight: 400;
}

.label-attention {
    text-align: justify;
    direction: rtl;
    color: var(--button-red);
    font-size: 14px;
    margin-top: 20px;
}

.label.required:after {
    content: "(اجباری)";
    font-size: 13px;
    color: #c70000;
    margin-right: 6px;
    font-weight: 400;
    margin-top: 1px;
}

.label.force:after {
    content: "(غیرقابل ویرایش)";
    font-size: 13px;
    color: #c70000;
    margin-right: 6px;
    font-weight: 400;
    margin-top: 1px;
}

.label.label-input {
    margin: 10px 0px 0px 0px !important;
    white-space: normal;
    text-align: justify;
}

.label-input.attention {
    color: var(--button-red);
}

.label.marginright {
    margin-right: 10px;
}

.sendsms .button-bottom .button-row {
    width: var(--widthdashboard);
    max-width: 450px;
}

.sendsms-box {
    margin-top: 5px;
    text-align: right;
    direction: rtl;
    color: #444;
    font-size: 15px;
    font-weight: 300;
    width: 100%;
}

.sendsms-box:focus {
    box-shadow: 0 0 0 0.2rem var(--basecolorshadow);
}

/* dialog */

.dialog-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.dialog-icon i {
    width: 60px;
    height: 60px;
    align-items: center;
    justify-content: center;
    display: flex;
    border-radius: 30px;
    color: #fff;
    font-size: 14px;
}

.dialog-error {
    background-color: #ff4c5f;
}

.dialog-ok {
    background-color: #1acd96;
}

.dialog-info {
    background-color: #11a0ef;
}

.dialog-question {
    background-color: #11a0ef;
}

.dialog-confirm {
    background-image: url(../images/dialogconfirm.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-color: unset;
    border-radius: 0 !important;
}

.dialog-back {
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    width: 100%;
    background-color: #00000050;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 1002;
    transition: all 0.3s;
    opacity: 0.0;
    display: none;
    overflow: hidden;
    backdrop-filter: blur(2px);
}

.dialog-back-hide {
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 0;
    overflow: hidden;
}

.dialog-box {
    width: var(--widthdialogbox);
    position: absolute;
    top: 40px;
    left: 50%;
    margin-left: calc(var(--widthdialogbox) * -1 / 2);
    background-color: #fff;
    transition: all 0.3s;
    padding: 32px 16px 16px 16px;
    display: none;
    border: 1px #f1f1f1 solid;
    border-radius: 8px;
    opacity: 0.0;
}

.dialog-box img {
    width: 30%;
    margin: 0 auto 20px auto;
    display: block;
}

.dialog-box p {
    text-align: right;
    direction: rtl;
    color: #666;
    margin-bottom: 16px;
    font-size: 15px;
    line-height: 30px;
}

.dialog-box .button-bottom {
    position: relative !important;
    height: 50px !important;
    padding: 0px;
    box-shadow: none;
    -webkit-box-shadow: none;
}

.dialog-box .button-bottom .button-row {
    width: 100%;
}

/* filter */

.filter-back {
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    width: 100%;
    background-color: #00000050;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 1001;
    transition: all 0.3s;
    opacity: 0.0;
    display: none;
    overflow: hidden;
    backdrop-filter: blur(2px);
}

.filter-box {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    transition: all 0.3s;
    padding: 16px;
    margin: 0px auto;
    right: 0;
    max-width: 450px;
    display: none;
    max-height: calc(var(--vh, 1vh) * 100);
    overflow-y: auto;
}

.filter-box .button-bottom {
    position: relative !important;
    height: 43px !important;
    padding: 0px;
    box-shadow: none;
    -webkit-box-shadow: none;
}

.filter-box .button-bottom .button-row {
    width: 100%;
}

.filter-row {
    display: flex;
    direction: rtl;
    align-items: center !important;
    margin-bottom: 10px;
    position: relative;
}

.shop-address-list .filter-row {
    border: 1px solid var(--basecolor);
    padding: 12px 12px;
    border-radius: 10px;
    transition: all 0.3s;
}

.shop-address-list .filter-row.disable {
    border: 1px solid #eaeaea;
}

.shop-address-list .shop-address-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    direction: rtl;
    padding: 0px 4px 12px 4px;
    align-items: center;
}

.shop-address-list .shop-address-header label {
    font-weight: 400;
    margin: 0;
}

.shop-address-list .shop-address-header .address-button {
    display: flex;
    flex-direction: row;
    align-items: center;
    color: var(--basecolor);
    font-weight: 400;
    font-size: 15px;
}

.shop-address-list .shop-address-header .address-button i {
    width: 14px !important;
    height: 14px !important;
    font-size: 13px;
    margin-left: 8px;
}

#filter-box-sort .filter-row {
    margin-bottom: 16px;
}

#filter-box-sort .filter-row:last-child {
    margin-bottom: 0px;
}

.filter-row.checkbox, .filter-row.checkbox label, .filter-row.checkbox select {
    cursor: pointer;
}

.filter-selectlist {
    border-radius: 8px;
    border: 1px solid #ccc;
    height: 35px;
    color: #666;
    font-weight: 300;
    font-size: 15px;
    padding: 3px 10px 0px 30px;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: transparent url("data:image/svg+xml;utf8,<svg id='filter-selectlist-svg' fill='gray' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>") no-repeat;
    background-position-y: 5px;
    transition: all 0.3s;
    width: 100%;
}

.filter-selectlist option {
    color: #666;
    font-weight: 300;
    font-size: 15px;
}

.filter-selectlist option:checked {
    font-weight: 500;
}


.filter-selectlist:focus {
    outline: 0px;
    box-shadow: 0 0 0 0.2rem #cccccc66;
}

.filter-input {
    border-radius: 8px;
    border: 1px solid #ccc;
    height: 35px;
    color: #666;
    font-weight: 300;
    font-size: 15px;
    transition: all 0.3s;
    width: 100%;
    text-align: center;
    direction: ltr;
}

.filter-input.shortsize {
    width: 20%;
}

.filter-input.middlesize {
    width: 40%;
}

.filter-input.largsize {
    width: 60%;
}

.filter-input.date {
    direction: ltr;
}

#bd-root-inputdatefrom, #bd-root-inputdateto {
    width: 100%;
    position: unset !important;
}

.filter-box .bd-calendar, .filter-box .bd-title, .filter-box .bd-goto-today, .filter-box .bd-calendar table {
    /*width: calc(var(--widthdashboard) - 32px) !important;
    max-width: calc(450px - 32px) !important;*/
    width: 100% !important;
    max-width: unset !important;
}

.filter-box .bd-empty-cell, .filter-box .bd-table-days button {
    /*width: calc((var(--widthdashboard) - 32px) / 7);
    max-width: calc((450px - 32px) / 7);*/
    width: 100% !important;
    max-width: unset !important;
}

.filter-box .bd-table tbody tr td {
    width: calc((100%) / 7) !important;
}

.bd-main {
    padding: 0px !important;
    left: 0;
    width: 100% !important;
    max-width: unset !important;
}

.label.titledate {
    width: 100%;
    justify-content: center;
    margin: 0px;
    font-size: 13px;
}

.filter-input:focus {
    outline: 0px;
    box-shadow: 0 0 0 0.2rem #cccccc66;
}

/* login */

.login-row {
    display: flex;
    direction: rtl;
    flex-direction: column;
    align-items: center !important;
    padding: 0px 0px 16px 0px;
}

.login-row:last-child {
    padding: 0px;
}

.login-row .label {
    margin: 12px 0px 5px 0px;
    width: 100%;
}

.farsi {
    direction: rtl !important;
}

.english {
    direction: ltr !important;
}

.login-input, .input {
    direction: rtl;
    color: #444;
    font-size: 15px;
    font-weight: 300;
    width: 100%;
    text-align: right;
    transition: 0.3s;
}

.login-input:focus, .input:focus {
    box-shadow: 0 0 0 0.2rem var(--basecolorshadow);
    border-color: var(--basecolor);
}

.login-button .button-row {
    width: calc(var(--widthdashboard));
    max-width: 450px;
}

.forget-password {
    width: 100%;
    text-align: right;
    margin-top: 10px;
    font-size: 14px;
    color: #444 !important;
    font-weight: 300;
    display: flex;
    direction: rtl;
}

.password-container {
    position: relative;
}

.password-container i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #666;
    font-size: 18px;
    width: 18px;
    height: 18px;
}

.password-container input {
    padding-left: 40px;;
}

/* list */

.list {
    padding-top: 16px;
}

.list-box {
    margin-bottom: 16px;
    padding-top: 0px;
    position: relative;
}

.list-box.active {
    box-shadow: 0 0 0 0.2rem var(--basecolorshadow);
    border-color: var(--basecolor);
}

.list-box .list-row {
    direction: rtl;
    margin-top: 8px;
    align-items: center;
    /*flex-wrap: wrap;*/
}

.list-box .list-row.line-through {
    position: relative;
    width: fit-content;
}

.list-box .list-row.line-through::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    border-bottom: 2px solid red;
}

.count-report .list-box .list-row {
    flex-wrap: wrap;
}

.list-row.line {
    align-items: start;
}

.list-row.line .label.main {
    margin-top: 0px;
}

.lazybtn {
    width: 100%;
    text-align: center;
    font-size: 14px;
    color: #888 !important;
    font-weight: 300;
    margin-bottom: 16px;
    background: #eee;
    padding: 10px;
    border-radius: 10px;
}

.lazybtn:hover {
    background: #ddd;
}

/* upload */
.uploadbox {
    width: 100%;
    margin-top: 5px;
    padding: 0px;
    cursor: pointer;
}

.uploadbox label {
    padding: 10px;
    width: 100%;
    text-align: center !important;
    display: block;
    overflow-y: hidden;
    overflow-x: auto;
    direction: ltr;
    white-space: nowrap !important;
}

.document .label.top {
    margin: 16px 0 5px 0;
}

.document select, .ticket select, .login select, .product select, .productsetting select, .cartlist select, .checkin-container select {
    direction: rtl;
    text-align-last: right;
    text-align: right;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: transparent url("data:image/svg+xml;utf8,<svg id='filter-selectlist-svg' fill='gray' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>") no-repeat;
    background-position-y: 10px;
    transition: all 0.3s;
    background-position-x: 5px;
    background-color: #fff;
}

.document .list-box {
    margin-bottom: 0px;
}

.infotitle {
    padding: 7px;
    white-space: normal;
    text-align: justify;
    margin: 0px !important;
    width: 100%;
    padding-right: 0px;
}

.infotitle::before {
    content: "توجه : ";
    font-size: 13px;
    color: #c70000;
    margin-left: 6px;
    font-weight: 400;
    margin-top: 1px;
    white-space: nowrap;
}

/* product */

.product .label.top, .productsetting .label.top, .cartlist .label.top {
    margin: 12px 0px 5px 0px;
}

.image_wrapper {
    width: var(--widthdashboard);
    max-width: 450px;
    height: 0px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.image_wrapper .deletebutton {
    width: 100%;
}

.product .product_image {
    width: min(calc(var(--widthdashboard) / 2), 225px);
    -webkit-box-shadow: 0 0 12px rgb(0 0 0 / 5%);
    box-shadow: 0 0 12px rgb(0 0 0 / 5%);
    border: 1px #f1f1f1 solid;
    /*overflow: hidden;*/
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: white;
}

.product .credit-label.over, .productsetting .credit-label.over {
    top: 44px;
}

.deletebutton {
    width: min(calc(var(--widthdashboard) / 2), 225px);
    text-align: center;
    background-color: var(--button-red);
    padding: 8px 8px;
    color: white !important;
    margin-top: 8px;
    border-radius: 8px;
    transition: 0.3s;
}

.deletebutton:hover {
    background-color: var(--button-red-hover);
    color: white;
}

.shop .top-label, .product .top-label, .cartlist .top-label, .productsetting .top-label {
    text-align: right;
    margin-top: 16px;
}

.productcategory {
    display: flex;
    flex-direction: row;
    overflow-y: hidden;
    overflow-x: auto;
    -ms-overflow-style: none; /* Internet Explorer 10+ */
    scrollbar-width: none;
    direction: rtl;
    position: sticky;
    top: 62px;
    z-index: 998;
    background-color: #fafafaf5;
    -webkit-overflow-scrolling: touch;
    margin: 0 -16px;
    padding: 0 16px;
    border-width: 0px 0px 1px 0px;
    border-color: #f0f0f0;
    border-style: solid;
}

.product .productcategory {
    border-width: 0px;
    border-style: unset;
}

.productcategory.ismobile {
    flex-wrap: wrap;
}

.productcategory::-webkit-scrollbar {
    display: none;
    width: 0;
}

.product .productcategory .cat-title.active {
    background: none;
    border: none;
    font-weight: bold;
    padding: 0;
    margin: 0;
}

.productcategory .cat-title.active {
    background: #1acd9618;
    border: 1px solid var(--basecolor);
    color: var(--basecolor);
    /*font-weight: 300;*/
}

.productcategory .cat-title {
    background: var(--background-button);
    padding: 0px 8px;
    border-radius: 8px;
    border: 1px solid #ccc;
    color: #888;
    /*font-weight: 300;*/
    font-size: 14px;
    direction: rtl;
    margin-bottom: 8px;
    margin-left: 6px;
    white-space: nowrap;
    overflow: visible;
    width: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
    cursor: pointer;
}

.productcategory .cat-title:last-child {
    margin-left: 0px;
}

.productcategory .cat-title i {
    margin-left: 5px;
    margin-top: 7px;
    font-size: 16px;
}

.productcategory .cat-title:last-child {
    margin-left: 1px !important;
}

.productlist .product-item-container:first-child {
    border-top: none;
}

.productlist .product-item-container.category {
    padding-top: 8px;
    border: none;
}

.productlist .product-item-container {
    padding: 16px 0px;
    border-top: 1px solid #eee;
    overflow: visible;
}

.productlist .instagram-view {
    margin-top: 6px;
}

.productlist .instagram-view .product-item-container {
    padding: 0px 0px 16px 0px;
    border-top: none;
    overflow: unset;
    width: calc(var(--widthdashboard) / 2 - 8px);
    max-width: 217px;
}

.orderlist-cart.productlist .product-item-container {
    padding: 16px 0px 0px 0px;
    border: none;
    overflow: unset;
    margin-left: 12px;
}

.orderlist .list-box {
    padding-bottom: 0;
}

.orderlist .orderlist-cart {
    padding-bottom: 12px;
}

.orderlist-cart.productlist .product-item-container:last-child {
    margin-left: 0px;
}

.orderlist-cart .cartlist-count {
    margin-left: 0px;
}

.productlist .product-item-container .product-item, .productlist .product-item-container .product-item:hover {
    color: #444;
}

.product .productlist .product-item-container {
    padding: 8px 0px;
}

.productlist .product-item-container:last-child {
    border-bottom: none;
}

.productlist {
    width: 100%;
    display: block;
    direction: rtl;
}

.orderlist-cart.productlist {
    display: flex;
    flex-direction: row;
    overflow-x: visible;
    padding-right: 10px;
    flex-wrap: wrap;
}

.orderlist-cart .product-title {
    margin-top: 8px;
    font-weight: 300;
    text-align: center;
    font-size: 14px;
    width: calc(var(--widthdashboard) / 5);
    max-width: 90px;
}

.product-item-container .product-item {
    display: flex;
    flex-direction: row;
}

.product-item-container .product-item i.special {
    position: absolute;
    right: -4px;
    top: -4px;
    width: 20px;
    height: 20px;
    font-size: 8px;
    background: #ff4c5f;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.instagram-view .product-item-container .product-item {
    display: flex;
    flex-direction: column;
}

.product-item-container .product-item .product-image {
    margin-left: 12px;
    position: relative;
}

.instagram-view .product-item-container .product-item .product-image {
    margin-left: 0px;
}

.instagram-view .product-item-container:nth-child(1) {
    margin-left: 8px;
}

.instagram-view .product-item-container:nth-child(2) {
    margin-right: 8px;
}

.product-item-container .product-item .product-image img, .imagelist .imagerow img {
    object-fit: contain;
    opacity: 1;
    transition: opacity .2s;
    display: inline-block;
    overflow: hidden;
    width: calc(var(--widthdashboard) / 4);
    max-width: calc(450px / 4);
    height: calc(var(--widthdashboard) / 4);
    max-height: calc(450px / 4);;
    border-radius: 8px;
    /*border: 1px solid #ddd;*/
    /*padding: 5px;*/
    background-color: #fff;
}

.shop .product-item-container .product-item .product-image img, .cartlist.noborder .product-item-container .product-item .product-image img {
    border: 0;
    padding: 0px;
}

.instagram-view .product-item-container .product-item .product-image img {
    width: calc(var(--widthdashboard) / 2 - 8px);
    max-width: 217px;
    height: calc(var(--widthdashboard) / 2 - 8px);
    max-height: 217px;
}

.product-item-container .product-item .product-image img::after, .info-image img::after {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    color: transparent;
    text-align: center;
    content: attr(alt);
    background: #f9f9f9 url(/styles/images/image-placeholder.svg) no-repeat 50%;
    background-size: contain;
    width: 100%;
    height: 100%;
    border: 20px solid #f9f9f9;
}

.product-item-container .product-item .product-info {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.product-item-container .product-item .product-info .product-title .score {
    font-weight: 400;
    display: flex;
    align-items: center;
    color: var(--basecolor);
    background-color: #1acd9615;
    padding: 4px 8px 1px;
    border-radius: 5px;
    font-size: 14px;
}

.product-item-container .product-item .product-info .product-title .score .fi {
    margin-right: 4px;
    height: 14px;
    font-size: 12px;
}

.score-box-product {
    display: flex;
    flex-direction: row;
    align-items: center;
    cursor: pointer;
}

.score-box-product .score-button {
    font-size: 13px;
    margin-right: 6px;
    background-color: #eee;
    padding: 3px 9px;
    border-radius: 5px;
    width: 100%;
    text-align: center;
    color: #666;
}

.product-item-container .product-item .product-info .product-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-weight: 400;
    direction: rtl;
    text-align: right;
    margin: 0px 0px 6px 0px;
    display: flex;
    justify-content: space-between;
    font-size: 15px;
}

.instagram-view .product-item-container .product-item .product-info .product-title {
    margin: 6px 0px 6px 0px;
}

.product-item-container .product-item .product-info .product-tiny-description {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-weight: 300;
    direction: rtl;
    text-align: right;
    color: #999;
    font-size: 12px;
    margin: 0px 0px 6px 0px;
}

.product-price {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.product-price.credit-box {
    padding: 10px 16px 10px;
    border-radius: 8px;
    background: #1acd9618;
}

.a-tag {
    padding: 4px 10px 3px;
    border-radius: 8px;
    background: #1acd9618;
    color: var(--basecolor);
    font-weight: 400;
}

.product-bottom-price .product-price {
    width: var(--widthdashboard);
    max-width: 450px;
    /*margin: 4px auto;*/
}

.product-price .product-price-value {
    flex-grow: 1;
    display: flex;
    justify-content: flex-end;
    font-weight: 400;
    align-items: center;
}

.product-price-dis-value {
    margin-right: auto;
    padding-left: 33px;
    text-decoration: line-through;
    color: #999;
    font-size: 14px;
}

.product-price .discount-title {
    font-weight: 300;
    margin-right: 4px;
}

.product-price .percent {
    background-color: #ef394e;
    height: 22px;
    width: 36px;
    color: white;
    font-size: 12px;
    font-weight: 400;
    border-radius: 11px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 3px;
    letter-spacing: 1px;
}

.product .product-bottom-price, .cartlist.short .product-bottom-price {
    height: 55px;
}

.cartlist-bottun {
    color: #fff;
    border-radius: 8px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 400;
    font-size: 13px;
    cursor: pointer;
    transition: 0.3s;
    text-align: center;
    direction: rtl;
    background-color: var(--button-active) !important;
    width: 135px;
}

.cartlist-bottun.closeshop {
    background-color: var(--button-deactive) !important;
}

.cartlist-bottun:hover {
    background-color: var(--button-active-hover) !important;
    border-color: var(--button-active-hover) !important;
}

.cartlist-bottun.closeshop:hover {
    background-color: var(--button-deactive-hover) !important;
}

.cartlist-bottun a:hover {
    color: #ffffff;
}

.product-bottom-price {
    direction: rtl;
    position: fixed;
    bottom: 67px;
    right: 0;
    left: 0;
    padding: 8px 12px;
    background-color: #fff;
    width: 100%;
    -webkit-box-shadow: 0 0 12px 3px rgb(0 0 0 / 5%);
    box-shadow: 0 0 12px 3px rgb(0 0 0 / 5%);
    height: 74px;
    z-index: 998;
    align-items: center;
    justify-content: center;
    display: flex;
}

.product-bottom-price .product-price .product-price-value {
    justify-content: flex-start;
}

.product-bottom-price .product-price .product-price-value.center {
    justify-content: center;
}

.product-price .label {
    font-size: 11px;
    margin: 0;
}

.product-price .end-box {
    display: flex;
    flex-direction: column;
    align-items: end;
}

.product-bottom-price .product-price-dis-value {
    padding-left: 12px;
}

.filter-sort {
    direction: rtl;
    display: flex;
    /*padding: 12px 0px 12px 0px;*/
    border-width: 0px 0px 1px 0px;
    /*margin-top: 2px;*/
    border-color: #f0f0f0;
    border-style: solid;
    /*margin: 0px -16px;*/
    padding: 12px 0px;
    color: #444;
}

.filter-sort .sort-link {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;
}

.filter-sort .sort-icon {
    width: 16px;
    height: 16px;
    font-size: 16px;
}

.filter-sort .sort-title {
    font-weight: 400;
    font-size: 15px;
    margin-right: 6px;
}

.shop .productlist {
    padding-bottom: 74px;
}

.product .product-image {
    position: relative;
    /*border-bottom: 1px solid #f0f0f0;
    padding-bottom: 32px;*/
    overflow: hidden;
    padding-top: 16px;
}

.swiper-pagination .swiper-pagination-bullet-active {
    background: var(--basecolor);
}

.swiper-pagination-height {
    height: 32px;
}

.swiper-pagination-height.close {
    height: 0px;
}

.product .product-image .image-page {
    font-weight: 300;
    display: flex;
    background-color: #00000050;
    margin: 8px auto 0px auto;
    padding: 5px 7px 4px 12px;
    border-radius: 12px;
    width: fit-content;
    letter-spacing: 5px;
    color: #fff;
    position: absolute;
    top: 20px;
    z-index: 100;
    left: 12px;
}

.product .product-image img {
    object-fit: contain;
    opacity: 1;
    transition: opacity .2s;
    display: inline-block;
    width: calc(var(--widthdashboard));
    max-width: 450px;
    height: calc(var(--widthdashboard));
    max-height: 450px;
    border-radius: 8px;
}

.product .product-image .product-img .imageitem {
    /*margin-right: 8px;*/
}

.product .product-image .product-img .imageitem:last-child {
    margin-right: 0px;
}

.product .product-img {
    display: flex;
    width: calc(var(--widthdashboard));
    max-width: 450px;
    height: calc(var(--widthdashboard));
    max-height: 450px;
}

.product .category-parent {
    display: flex;
    flex-direction: row;
    direction: rtl;
    padding: 4px 0px 0px 0px;
    align-items: center;
}

.product .category-parent .top-label {
    width: auto;
    margin: 0px 0px 0px 8px;
}

.product-item-container .product-item .product-info .product-description {
    font-size: 15px;
    color: #555;
    -webkit-line-clamp: 3;
    line-height: 30px;
    text-align: justify;
    white-space: pre-line
}

.product-item-container .product-item .product-info .more-click {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-weight: 400;
    font-size: 14px;
    padding: 8px 0px;
    width: 100%;
}

.more-click i {
    width: 15px;
    height: 15px;
    font-size: 15px;
    margin-right: 3px;
}

.customize-row {
    display: inline-flex;
    /*overflow-y: hidden;
    overflow-x: auto;*/
    align-items: center;
    padding: 5px 0px;
    -ms-overflow-style: none;
    scrollbar-width: none;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
}

.customize-row::after {
    content: "";
    min-width: calc(20% - 6.4px);
}

.customize-row::-webkit-scrollbar {
    display: none;
    width: 0;
}

.customize-row .customize-value {
    padding: 8px 12px 5px 12px;
    border: 1px #e0e0e0 solid;
    /*margin-left: 8px;*/
    border-radius: 8px;
    font-size: 14px;
    text-align: center;
    transition: 0.3s;
    cursor: pointer;
    white-space: nowrap;
    background-color: #fff;
    /*margin-bottom: 8px;*/
    min-width: calc((100% - 4 * 8px) / 5);
}

#row_time_id .customize-value {
    width: calc((100% - 4 * 8px) / 5);
}

.customize-row .customize-value:last-child {
    margin-left: 1px !important;
}

.customize-row .customize-value.active {
    background-color: #1acd9611;
    border-color: var(--basecolor);
    box-shadow: 0 0 0 0.2rem var(--basecolorshadow);
    color: var(--basecolor);
}

.customize-row-product {
    /*overflow: hidden;*/
    margin: 8px 0px;
    /*border-bottom: 1px solid #f0f0f0;*/
    padding-bottom: 8px;
}

.customize-row-product:last-child {
    margin-bottom: 0px;
}

.customize-row-product:first-child {
    border-top: 1px solid #f0f0f0;
    padding-top: 8px;
}

.product-customize-row {
    display: flex;
    flex-direction: row;
    cursor: pointer;
    direction: rtl;
}

.cartlist-customize-row {
    margin-bottom: 6px;
}

.product-customize-row span {
    margin-top: 14px;
}

.cartlist-count {
    margin-left: 12px;
    align-items: center;
    position: relative;
}

.cartlist-count .cart-state {
    padding: 5px 6px 4px;
    border-radius: 6px;
    font-size: 12px;
    margin-top: 8px;
    text-align: center;
    text-wrap: nowrap;
    font-weight: 400;
}

.cartlist-count .cart-state.ok {
    background-color: #e2f9f2 !important;
    color: #1acd96 !important;
}

.cartlist-count .cart-state.error {
    background-color: #ffe9eb !important;
    color: #ff4c5f !important;
}

.cartlist-count .cart-state.info {
    background-color: #e1f3fd !important;
    color: #11a0ef !important;
}

.cartlist-count .cart-state.wait {
    background-color: #fff6df !important;
    color: #FF8800 !important;
}

.cartlist-count .product-image {
    margin-left: 0px !important;
}

.cartlist-count .cart-product {
    width: 100%;
    margin: 12px 0px 0px 0px;
    height: 42px;
    border: 1px solid var(--button-red);
    padding: 0px 3px;
    border-radius: 8px;
}

.cartlist-count .cart-product .count-number {
    font-size: 16px;
}

.cartlist-count .cart-product .remove-count-btn, .cartlist-count .cart-product .add-count-btn, .cartlist-count .cart-product .trash-count-btn {
    width: 22px;
    height: 22px;
}

.cartlist-bottom-totalprice.product-bottom-price .product-price .product-price-value {
    justify-content: flex-end;
}

.cartlist-bottom {
    margin-bottom: 16px;
}

.cartlist-bottom .cart-disprice {
    font-size: 14px;
    color: #888;
}

.cartlist-bottom .cart-disprice .label {
    font-size: 12px;
}

.cartlist-bottom .cart-totalprice, .cartlist-bottom .cart-totalprice .label {
    color: #444;
}

.cartlist-bottom .product-price {
    margin-top: 16px;
}

.cartlist-bottom .label {
    font-weight: 400;
}

.cartlist-bottom-divider {
    border-bottom: 1px solid #eee;
    margin-top: 12px;
}

.addaddressbutton {
    margin: 16px 0px;
}

.addressbuttonrow {
    display: flex;
    flex-direction: row;
    direction: rtl;
    margin-top: 10px;
}

.addressbutton {
    border-radius: 8px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: start;
    font-weight: 400;
    font-size: 13px;
    cursor: pointer;
    transition: 0.3s;
    text-align: center;
    direction: rtl;
    width: 50%;
    margin: 0px 12px 0px 0px;
    padding-right: 8px;
    position: relative;
    color: #555 !important;
    background-color: #fafafa;
    border: 1px solid #f0f0f0 !important;
}

.addressbutton:hover {
    background-color: #f0f0f0 !important;
}

.addressbutton:first-child {
    margin: 0px;
}

.deleteaddress.color {
    background-color: #ff4c5f20;
    color: #ff4c5f !important;
}

.editaddress.color {
    background-color: #11a0ef20;
    color: #11a0ef !important;
}

.product-info .label.main {
    font-size: 14px;
    margin-left: 2px;
}

.product-info .label.main.value {
    font-weight: 400;
    margin-right: 4px;
    font-size: 15px;
}

.product-info .label.main.count {
    font-weight: 400;
    margin-right: 4px;
}

.shop .product-info .label.main.count, .cartlist .product-info .label.main.count {
    font-weight: 400;
    font-size: 12px;
    line-height: unset;
    margin-bottom: 6px;
    margin-right: 0px;
}

.product-info .label.main.count.ok {
    color: var(--basecolor);
}

.product-info .label.main.count.error {
    color: var(--button-red);
}

.product-info .count-row {
    padding: 0px 0px 8px 0px;
    border-bottom: 1px solid #f0f0f0;
}

.imagelist {

}

.imagelist .imagerow .imageitem .checkbox {
    justify-content: center;
    cursor: pointer;
}

.imagelist .imagerow .imageitem {
    display: flex;
    flex-direction: column;
    margin-bottom: 8px;
    margin-left: 8px;
}

.imagelist .imagerow .imageitem:last-child {
    margin-left: 0px;
}

.imagelist .imagerow {
    display: flex;
    flex-direction: row;
    direction: rtl;
}

.imagelist .imagerow .imageitem img {
    width: calc((var(--widthdashboard) - 16px) / 3);
    max-width: 142px;
    height: calc((var(--widthdashboard) - 16px) / 3);
    max-height: 142px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
}

.imagelist .imagerow .imageitem .deletebutton {
    width: calc((var(--widthdashboard) - 16px) / 3);
    max-width: 142px;
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
    margin-top: 0px;
    margin-bottom: 8px;
}

.imagetype .boxdesign {
    padding: 0px;
}

.imagetype {
    direction: rtl;
}

.imagetype .imagetype-item {
    width: calc((var(--widthdashboard) - 8px) / 2);
    max-width: 221px;
    height: calc(((var(--widthdashboard) - 8px) / 2) + 52px);
    max-height: 273px;
    margin-left: 8px;
    overflow: hidden;
}

.imagetype .imagetype-item .checkbox {
    padding: 10px;
}

.imagetype .imagetype-item img {
    overflow: hidden;
}

.imagetype .imagetype-item:last-child {
    margin-left: 0px;
}

.imagetype-cover {
    object-fit: cover !important;
}

.imagetype-contain {
    object-fit: contain !important;
}

.searchbox {
    display: flex;
    position: relative;
    width: 100%;
    align-items: center;
    height: 46px;
    transition: all 0.3s ease-in;
    opacity: 1;
    padding-bottom: 4px;
}

.searchbox.shide {
    height: 0 !important;
    opacity: 0;
}

.searchbox input {
    padding: 12px 40px 12px 16px;
    background: #f5f5f5;
    direction: rtl;
    border: none;
    border-radius: 8px;
    width: 100%;
    font-weight: 300;
    height: 46px;
}

.searchbox input::-webkit-search-cancel-button {
    left: 70px;
    -webkit-appearance: none;
    appearance: none;
    height: 20px;
    width: 20px;
    background: #888;
    border-radius: 50%;
    position: relative;
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/></svg>");
    background-size: 12px;
    background-position: center;
    background-repeat: no-repeat;
    transition: background-color 0.2s;
}

.searchbox input::-webkit-search-cancel-button:hover {
    background-color: #666;
}

.searchbox img {
    position: absolute;
    right: 10px;
    width: 24px;
}

.searchbox .button-search {
    position: absolute;
    left: 6px;
    top: 6px;
    padding: 6px 12px;
    font-size: 13px;
    border-radius: 6px;
    transition: 0.3s;
    border: 1px solid var(--basecolor);
    color: var(--basecolor);
    font-weight: 400;
}

.searchbox .button-search:hover {
    border: 1px solid var(--button-active-hover);
    color: var(--button-active-hover);
}

.search-bar {
    padding: 0px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    margin-left: 6px;
    border-radius: 8px;
    border: 1px solid #ccc;
    color: #888 !important;
    position: relative;
    background: var(--background-button);
}

.search-bar i {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

.search-bar span {
    width: 8px;
    height: 8px;
    border-radius: 100%;
    background-color: var(--button-red);
    position: absolute;
    top: -4px;
    left: -4px;
}

.shopbadge {
    background-color: var(--button-red);
    border: 3px solid #f9f9f9;
    width: 12px;
    height: 12px;
    position: absolute;
    top: 0px;
    right: -6px;
    border-radius: 50%;
}

.emptybox {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border-radius: 10px;
    border: 1px solid #bbb;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 16px 16px 8px 16px;
    direction: rtl;
    line-height: 30px;
    margin: 16px 24px;
}

.emptybox .empty-title {
    font-weight: 400;
}

.emptybox .empty-message {
    font-size: 14px;
    color: #777;
}

.cart-product {
    width: 50%;
    margin: 0px 0px 0px 6px;
    border-radius: 8px;
    height: 43px;
    display: flex;
    align-items: center;
    font-weight: 300;
    font-size: 14px;
    cursor: pointer;
    transition: 0.3s;
    text-align: center;
    direction: rtl;
    background-color: var(--button-white);
    border: 1px solid var(--button-red);
    color: var(--button-red);
    justify-content: space-between;
    padding: 0px 8px;
}

.cart-product .count-number {
    font-weight: 500;
    font-size: 18px;
}

.cart-product .remove-count-btn, .cart-product .add-count-btn, .cart-product .trash-count-btn {
    width: 24px;
    height: 24px;
    fill: #ff0000;
    padding: 5px;
}

.cart-product .trash-count-btn {
    padding: 3px;
}

.cart-icon, .user-icon, .home-icon, .tel-icon {
    display: flex;
    position: relative;
    cursor: pointer !important;
}

.cart-icon i, .user-icon i, .home-icon i, .tel-icon i {
    width: 20px;
    height: 20px;
    font-size: 20px;
}

.header-shop .cart-icon .cart-count, .product-page.cart-icon .cart-count {
    right: -8px;
    top: -8px;
}

.product-page.cart-icon {
    margin-right: 16px;
}

.cart-icon .cart-count {
    position: absolute;
    right: 0px;
    top: -3px;
    background-color: #ef394e;
    height: 20px;
    min-width: 20px;
    color: white;
    font-size: 10px;
    font-weight: 400;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid #fff;
    text-align: center;
    padding: 3px 5px 0px;
}

.push-state {
    position: absolute;
    left: 10px;
    top: -5px;
    background-color: #1acd96;
    height: 15px;
    min-width: 15px;
    color: white;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center
}

.push-state.active {
    background-color: #1acd96;
}

.push-state.deactive {
    background-color: #ef394e;
}

.push-state.count-badge {
    font-size: 10px;
    padding: 2px 3px 0px;
}

.push-state i {
    font-size: 5px;
    width: 5px;
    height: 5px;
}

.shop .top-height, .shop-new .top-height, .product .top-height, .customerdashboard .top-height, .cartlist .top-height, .shopinfo .top-height {
    height: 63px;
}

.customershipping {
    margin-top: 16px;
}

.customershipping .label {
    white-space: pre-line;
    text-align: right;
    margin: 0;
}

.shipping-price {
    font-weight: 400;
}

.customershipping .shipping-disable {
    display: block !important;
    width: 100%;
    height: 100%;
    background-color: #ffffffaa;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    border-radius: 10px;
}

.customershipping .shipping-disable div {
    position: absolute;
    width: 100%;
    text-align: right;
    bottom: 12px;
    font-size: 14px;
    color: var(--button-red);
    font-weight: 400;
    direction: rtl;
    padding-right: 16px;
}

.customershipping .list-box.shipping-row-disable {
    padding-bottom: 42px;
}

.payment-row .payment-image, .takeaway-row .takeaway-image {
    border: 1px solid var(--basecolor);
    box-shadow: 0 0 0 0.2rem #1acd9630;
    border-radius: 8px;
    margin: 0px 6px 0px 12px;
    transition: all 0.3s;
}

.payment-row.disable .payment-image, .takeaway-row.disable .takeaway-image {
    border: 1px solid #1acd9630;
}

.payment-row .payment-image img {
    width: 42px;
    height: 42px;
    border-radius: 8px;
}

.pg-box-credit {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    direction: rtl;
    margin-top: 16px;
}

.cursor-pointer, .cursor-pointer * {
    cursor: pointer !important;
}

.pg-box-credit .pg-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-left: 16px;
    width: 75px;
    height: 75px;
    justify-content: center;
    transition: all 0.3s;
    cursor: pointer !important;
}

.pg-box-credit .pg-item .label.main {
    font-size: 13px;
    margin-top: 6px;
    line-height: unset;
    font-weight: 400;
}

.pg-box-credit .pg-item:last-child {
    margin-left: 0px;
}

.pg-box-credit .pg-item.active {
    border: 1px solid var(--basecolor);
    box-shadow: 0 0 0 0.25rem #1acd9630;
    background: #1acd9610;
}

.pg-box-credit .pg-item .payment-image img {
    width: 32px;
    height: 32px;
    border-radius: 8px;
}

.takeaway-row .takeaway-image {
    padding: 6px;
}

.takeaway-row .takeaway-image img {
    width: 30px;
    height: 30px;
    border-radius: 8px;
}

.takeaway-row .takeaway-image i {
    font-size: 24px;
    height: 30px;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--basecolor);
}

.payment-discount .discount-btn:hover {
    border: 1px solid var(--button-active-hover);
    color: var(--button-active-hover);
}

.payment-discount .discount-btn {
    margin: 0px 12px 0px 0px;
    background-color: var(--button-white);
    border: 1px solid var(--basecolor);
    color: var(--basecolor);
    border-radius: 8px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 400;
    font-size: 14px;
    cursor: pointer;
    transition: 0.3s;
    text-align: center;
    direction: rtl;
    padding: 0px 16px;
}

.m-top {
    margin-top: 16px !important;
}

.m-top-short {
    margin-top: 8px !important;
}

.m-bottom {
    margin-bottom: 16px !important;;
}

.m-bottom-short {
    margin-bottom: 8px !important;;
}

.m-right {
    margin-right: 16px;
}

.m-left {
    margin-left: 16px;
}

.discount-input-row .login-input::placeholder {
    color: #888 !important;
}

.discount-input-row {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: row;
}

.discount-input-row .delete-discount {
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -10px;
    margin-left: 12px;
}

.discount-input-row .delete-discount span {
    height: 20px;
    width: 20px;
    background-color: var(--button-red);
    border-radius: 10px;
    color: white;
    font-size: 7px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.3s;
    padding: 7px 7px 6px 7px;
}

.currency {
    font-weight: 300;
    font-size: 12px;
    margin-right: 4px;
}

.cartlist-info .label {
    margin-top: 8px;
    white-space: pre-line;
    text-align: right;
}

.cartlist-info .title-info {
    position: relative;
    margin-top: 16px;
}

.cartlist-info .title-bottom {
    display: none;
    margin: 0 -16px;
    padding: 0 16px;
}

.cartlist-info .title-info .fa {
    position: absolute;
    top: 50%;
    left: 11px;
    font-size: 18px;
    margin-top: -8px;
    color: #666;
    transform: rotate(0deg);
    transition: transform 0.5s ease;
}

.cartlist-info .title-info .fa.rotated {
    transform: rotate(180deg);
}

.cartlist-info .title-bottom .count-number .count-title, .orderlist .count-number .count-title, .orderlist-cart .count-number .count-title {
    color: #888;
    font-size: 12px;
    margin-left: 6px;
}

.cartlist-info .title-bottom .product-item-container .product-item .product-image img {
    /*width: calc(var(--widthdashboard) / 3.75);
    max-width: 120px;
    height: calc(var(--widthdashboard) / 3.75);
    max-height: 120px;*/
}

.cartlist-info .title-bottom .count-number, .orderlist .count-number, .orderlist-cart .count-number {
    color: #666;
    font-size: 13px;
    font-weight: 500;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: -10px;
    right: -10px;
    width: 25px;
    height: 25px;
    border: 2px solid #ddd;
    background: #f0f0f0;
}

.cartlist-info .title-bottom .franchise, .orderlist .franchise, .orderlist-cart .franchise {
    background-color: #ffe9eb !important;
    color: #ff4c5f !important;
    font-size: 12px;
    font-weight: 400;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6px 10px 5px;
    margin-top: 8px;
}

.copon-button {
    background: var(--basecolor);
    color: #fff;
    padding: 6px 15px 5px;
    border-radius: 10px;
    top: 39px;
    font-size: 15px;
    left: 9px;
    position: absolute;
}

.resend-button, .normal-time {
    background: var(--basecolor);
    color: #fff;
    padding: 6px 15px 5px;
    border-radius: 10px;
    top: 8px;
    font-size: 15px;
    left: 8px;
    position: absolute;
    font-weight: 400;
}

.warning-time {
    background: #ffc107;
    color: #fff;
    padding: 6px 15px 5px;
    border-radius: 10px;
    top: 8px;
    font-size: 15px;
    left: 8px;
    position: absolute;
    font-weight: 400;
}

.size-format {
    background-color: #f3f3f3;
    border-radius: 8px;
    padding: 5px 5px 3px;
    font-size: 15px;
}

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

.info-image img {
    width: calc(var(--widthdashboard) / 3);
    max-width: 150px;
    height: calc(var(--widthdashboard) / 3);
    max-height: 150px;
    /*border: 3px solid var(--basecolor);*/
    margin-top: 24px;
    /*border-radius: 35px;*/
    overflow: hidden;
    background-color: #fff;
    position: relative;
}

.shopinfo .info-title {
    text-align: center;
    margin: 16px 0px 24px;
    font-size: 20px;
    font-weight: 400;
    color: #444;
}

.info-row {
    display: flex;
    flex-direction: row;
    direction: rtl;
    align-items: center;
    margin-bottom: 12px;
    cursor: pointer;
}

.info-row .info-row-image {
    border-radius: 20px;
    margin-left: 10px;
}

.info-row.phone .info-row-image {
    background-color: #88888815;
}

.info-row.social_whatsapp .info-row-image {
    background-color: #1acd9615;
}

.info-row.social_instagram .info-row-image {
    background-color: #ff4c5f15;
}

.info-row.social_telegram .info-row-image {
    background-color: #0088CC15;
}

.info-row.enamad .info-row-image {
    background-color: #0088CC15;
}

.info-row.address .info-row-image {
    background-color: #11a0ef15;
}

.info-row.mail .info-row-image {
    background-color: #a503ff15;
}

.info-row.link .info-row-image, .info-row.website .info-row-image {
    background-color: #ffa70015;
}

.info-row.phone .info-row-image i {
    color: #888888;
}

.info-row.social_whatsapp .info-row-image i {
    color: #1acd96;
}

.info-row.social_instagram .info-row-image i {
    color: #ff4c5f;
}

.info-row.social_telegram .info-row-image i {
    color: #0088CC;
}

.info-row.enamad .info-row-image i {
    color: #0088CC;
}

.info-row.address .info-row-image i {
    color: #11a0ef;
}

.info-row.mail .info-row-image i {
    color: #a503ff;
}

.info-row.link .info-row-image i, .info-row.website .info-row-image i {
    color: #ffa700;
}

.info-row .info-row-image i {
    font-size: 16px;
    line-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
}

.info-row-title {
    font-size: 12px;
    text-align: right;
    color: #bbb;
    margin-bottom: 3px;
}

.info-row-value {
    font-size: 15px;
    text-align: right;
    color: #222;
}

.info-divider {
    height: 1px;
    background-color: #eee;
    margin: 0px 20px 12px 20px;
}

.priority {
    position: absolute;
    display: flex;
    flex-direction: row;
    top: 16px;
    left: 16px;
    font-size: 20px;
    color: var(--basecolor);
}

.priority i {
    width: 20px;
    height: 20px;
}

.priority i:nth-child(1) {
    margin-right: 6px;
}

.category-row {
    width: 100%;
    text-align: right;
    direction: rtl;
    position: relative;
    align-items: center;
    justify-content: start;
    padding: 24px 0px 8px;
}

.category-row-line {
    position: absolute;
    /*height: 1px;
    background-color: var(--basecolor);
    width: 100%;*/
}

.category-row-line.red {
    background-color: var(--button-red);
}

.category-row-line.special {
    background-color: #f07722;
}

.category-row-title {
    width: fit-content;
    z-index: 1;
    /*color: var(--basecolor);*/
    /*padding: 8px;*/
    /*border-radius: 16px;
    border: 10px solid #f9f9f9;
    font-size: 14px;*/
    font-weight: 400;
    background-color: #f9f9f9;
    border-left: 5px solid #f9f9f9;
}

.category-row-title.red {
    color: var(--button-red);
}

.category-row-title.special {
    color: #f07722;
}

/* ticket */

.ticket .label.top {
    margin: 0 0 5px 0;
    width: 100%;
}

.ticket-box {
    margin-bottom: 16px;
    margin-left: 50px;
}

.ticket-box.parent {
    margin-right: 50px;
    margin-left: 0px;
}

.ticket-box .message {
    direction: rtl;
    background-color: var(--basecolor);
    color: white;
    text-align: right;
    padding: 16px;
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 3px;
    font-size: 16px;
    line-height: 30px;
    white-space: pre-wrap;
    word-break: break-word;
}

.ticket-box .message a {
    display: inline-block;
    text-align: left;
    direction: ltr;
    color: #ffffff;
    background: #ffffff35;
    transition: 0.3s;
    border-radius: 5px;
    padding: 5px 10px 2px;
    float: left;
}

.ticket-box .message a:hover {
    background: #ffffff50;
}

.ticket-box.parent .message {
    background-color: #eee;
    color: #444;
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 3px;
}

.ticket-box .file {
    border: 1px solid var(--basecolor);
    border-radius: 10px;
    padding: 10px 16px;
    background-color: #1acd960d;
    color: var(--button-active-hover);
    font-size: 14px;
    font-weight: 400;
    margin: 8px 0px;
    direction: rtl;
    float: right;
}

.ticket-box.parent .file {
    float: left;
    background-color: #bbbbbb10;
    border: 1px solid #bbb;
    color: #777;
}

.ticket-box .file a {
    color: var(--button-active-hover);
}

.ticket-box.parent .file a {
    color: #666;
}

.ticket-box .info {
    direction: rtl;
    color: #999;
    font-size: 14px;
    margin-top: 6px;
}

.ticket-box.parent .info {
    direction: ltr;
}

.ticket-box .info .name {
    margin-left: 14px;
    position: relative;
    margin-right: 5px;
    color: #666;
    font-weight: 400;
}

.ticket-box.parent .info .name {
    margin-left: 5px;
    margin-right: 14px;
}

.ticket-box.parent .info .name::after {
    right: -7px;
    left: auto;
}

.ticket-box .info .name::after {
    content: "";
    width: 2px;
    height: 12px;
    border-radius: 12px;
    background: #ddd;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    left: -7px;
}

.ticket-response {
    margin-bottom: 16px;
}

.reason-amount {
    direction: ltr;
    margin-left: 5px;
    font-weight: bold;
    color: var(--button-red);
}

.blur {
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
}

.poweredby {
    position: fixed;
    bottom: 0px;
    left: 0;
    right: 0;
    display: flex;
}

.poweredby a {
    display: flex;
    flex-direction: row;
    align-items: center;
    align-content: center;
    margin: 0px auto;
    margin-bottom: 0px;
    color: #808080;
    background: #efefef;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    padding: 8px 16px;
    font-size: 15px;
    direction: rtl;
}

.poweredby a b {
    font-weight: 500;
}

.poweredby a img {
    width: 20px;
    margin: 0px 7px;
}

.workinghourbox i {
    position: absolute;
    top: 15px;
    left: 13px;
    color: #888;
    font-size: 11px;
    font-weight: 500;
}

.workinghourbox {
    display: flex;
    width: 100%;
    direction: rtl;
    align-items: center;
    justify-content: center;
    padding: 7px 12px;
    background-color: #f5f5f5;
    margin-top: 16px;
    border-radius: 10px;
    color: #666;
    font-size: 14px;
    position: relative;
}

.workinghoursshop .workinghourbox {
    padding: 10px 12px;
    background-color: #ffffff;
    border: 1px solid #eee;
    margin-top: 0px;
}

.workinghoursshop .workinghourbox.shopclose {
    padding: 7px 12px;
    background-color: #ff4c5f14;
    color: #ff4c5f;
    font-weight: 500;
    border: 1px solid #ff4c5f30;
}

.workinghoursshop .workinghourbox.shopclose.denied {
    padding: 10px 12px;
}

.workinghoursshop .workinghourbox.shopopen {
    padding: 7px 12px;
    background-color: #1acd9614;
    color: #1acd96;
    font-weight: 500;
    border: 1px solid #1acd9630;
}

.workinghoursshop .workinghourboxstate.shopclose {
    background-color: #ff4c5f;
    color: #ffffff;
}

.workinghoursshop .workinghourboxstate.shopopen {
    background-color: #1acd96;
    color: #ffffff;
}

.workinghoursshop .login-row {
    padding: 0px;
}

.workinghoursshop .login-row:last-child {
    margin-bottom: 16px;
}

.cartlist-workinghours {
    position: fixed;
    bottom: 142px;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    right: 0;
    left: 0;
}

.cartlist-workinghours-box {
    background-color: #ff4c5fee;
    color: #fff;
    padding: 8px 15px 6px;
    font-size: 13px;
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
}

.receipt-container {
    display: flex;
    flex-direction: column;
    direction: rtl;
    /*padding: 16px 32px 16px 16px;*/
    padding: 16px;
    width: 80mm;
    text-align: right;
}

.receipt-container * {
    font-size: 16px !important;
    line-height: 30px !important;
    font-weight: 400 !important;
    color: #000 !important;
    border-color: #000 !important;
}

.receipt-container .label.main.border {
    padding: 0px 8px;
    margin: 6px 0px;
}

.receipt-container .product-info {
    border: 1px solid #000;
    padding: 0px 4px;
    line-height: 22px;
}


.receipt-container .product-item-container {
    border-bottom: 1px solid #000;
    margin-bottom: 8px;
}

.receipt-container .category-row {
    border: 1px solid #000;
    padding: 0px 4px;
    line-height: 22px;
    color: #000;
    margin-bottom: 8px;
}

.receipt-container.customer .label.main {
    line-height: 30px;
}

.receipt-container.customer .label {
    line-height: 30px;
}

.receipt-container .flex-row {
    /*flex-basis: 100%*/;
    align-items: center;
}

.receipt-container .flex-row:nth-child(1) {
    justify-content: start;
    align-items: center;
}

.receipt-container .flex-row.line:nth-child(1) {
    justify-content: start;
    align-items: start;
}

.receipt-container .flex-row:nth-child(2) {
    justify-content: start;
    align-items: center;
}

.receipt-container .flex-row.header {
    width: 100%;
    border-bottom: 1px solid #000;
    margin-top: 8px;
    justify-content: space-between;
}

.receipt-container .flex-column.item {
    border-bottom: 1px solid #aaa;
}

.receipt-container .flex-column.item:last-child {
    border-bottom: 0px;
}

.receipt-container .flex-column .flex-row.item {
    justify-content: space-between;
    align-items: center;
}

.receipt-container .flex-row.item {
    width: 100%;
}

.receipt-container .flex-row.header label, .receipt-container .flex-row.item label {
    margin: 0px;
}

.receipt-container .flex-row.header label:nth-child(1), .receipt-container .flex-row.item label.main:nth-child(1) {
    width: 70%;
    justify-content: start;
    align-items: center;
}

.receipt-container .flex-row.header label:nth-child(2), .receipt-container .flex-row.item label.main:nth-child(2) {
    width: 10%;
    justify-content: center;
    align-items: center;
}

.receipt-container .flex-row.header label:nth-child(3), .receipt-container .flex-row.item label.main:nth-child(3) {
    width: 20%;
    justify-content: end;
    align-items: center;
}

.report-list .product-item-container {
    direction: rtl;
    display: flex;
    flex-direction: row;
    text-align: right;
    border-bottom: 1px solid #f5f5f5;
    padding: 8px;
}

.report-list .product-image {
    margin-left: 8px;
}

.report-list .product-image img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    opacity: 1;
    transition: opacity .2s;
    display: inline-block;
    overflow: hidden;
    border-radius: 8px;
}

.report-list .product-info .cartlist-customize-row {
    margin: 0px;
}

.report-list .product-info .label.main.value, .report-list .product-item-container .product-info .product-title, .report-list .product-info .label.main {
    font-size: 14px;
}

.report-list .category-row {
    padding: 10px 10px 8px;
    color: #888;
    background: #fafafa;
    font-size: 13px;
}

.report-list .boxdesign {
    padding: 0px;
    overflow: hidden;
    direction: rtl;
    text-align: right;
}

.report-list .product-item-container .product-info .product-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-weight: 300;
    direction: rtl;
    text-align: right;
    margin: 0px;
}

.report-list .product-item-container .product-info {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.report-header a {
    color: #fff;
    padding-left: 8px;
    margin-left: 8px;
}

.report-header a.print {
    background: #11a0ef !important;
}

.report-header a.print:hover {
    background: #0e81c1;
}

.customer-receipt .report-header {
    margin: 12px 0px 0px;
}

.customer-receipt .report-header > *, .customer-receipt .report-header a {
    margin: 0px;
}

.customer-receipt .report-header a {
    width: 100%;
}

.report-header {
    display: flex;
    direction: rtl;
    flex-wrap: wrap;
    margin-bottom: 4px;
    flex-direction: column;
}

.report-header > * {
    margin-bottom: 8px;
}

.report-header .label.top {
    margin: 0px;
    width: fit-content;
}

.product-day-list {
    display: flex;
    flex-direction: row;
    direction: rtl;
    flex-wrap: wrap;
}

.product-day-list a.active {
    border: 1px solid var(--basecolor);
    background-color: var(--background-button);
    color: var(--basecolor);
    font-weight: 400;
    box-shadow: 0 0 0 0.2rem var(--basecolorshadow);
}

.product-day-list a.active:hover {
    color: var(--button-active-hover);
}

.product-day-list a:hover {
    color: #666;
}

.product-day-list a {
    border: 1px solid #dadada;
    padding: 5px 16px;
    border-radius: 20px;
    margin-left: 10px;
    margin-bottom: 10px;
    background-color: #f9f9f9;
    color: #888;
    font-weight: 300;
    font-size: 14px;
    transition: 0.3s;
}

.reservation-time-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    direction: rtl;
    border-bottom: 1px solid #f0f0f0;
    margin-top: 12px;
}

.reservation-time-container .reservation-time-item .reservation-time-day {
    font-size: 13px;
    margin-bottom: 8px;
}

.reservation-time-container .reservation-time-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5px;
    font-size: 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    margin-left: 6px;
    margin-bottom: 6px;
    background-color: #f5f5f5;
    font-weight: 300;
    color: #888;
    transition: 0.3s;
    cursor: pointer;
    min-width: 72px;
}

.reservation-time-container .reservation-time-item.active {
    background: #1acd9618;
    border: 1px solid var(--basecolor);
    color: var(--basecolor);
    box-shadow: 0 0 0 0.2rem var(--basecolorshadow);
}

.reservation-time-header {
    margin: 12px 0px 0px;
    direction: rtl;
    font-size: 15px;
    font-weight: 300;
    color: #666;
    display: flex;
    flex-direction: row;
    border: 1px solid #dadada;
    padding: 10px 12px 8px;
    border-radius: 10px;
    background-color: #fff;
    align-items: center;
}

.reservation-time-header-error {
    background: var(--button-red);
    color: #fff;
    direction: rtl;
    padding: 8px 12px;
    border-radius: 10px;
    text-align: center;
    font-weight: 300;
    margin-top: 12px;
}

.reservation-time-header .reservation-time-header-title {
    font-weight: 400;
    margin-right: 8px;
}

.checkin-container .boxdesign {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 40%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px;
    width: 60%;
}

.checkin-container .boxdesign input, .checkin-container .boxdesign select {
    direction: rtl;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 10px;
    transition: 0.3s;
    text-align: center;
    text-align-last: center;
    width: 100%;
}

.checkin-container .boxdesign input:focus, .checkin-container .boxdesign select:focus {
    box-shadow: 0 0 0 0.2rem var(--basecolorshadow);
}

.receipt-container #break {
    padding-bottom: 50px;
    border-bottom: 1px dashed #aaa;
    margin-bottom: 8px;
}

/* address bar */
.addressbar {
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    display: flex;
    align-items: center;
    flex-direction: row;
    direction: rtl;
    font-size: 14px;
    padding: 8px;
    transition: 0.3s;
    color: #666 !important;
    justify-content: space-between;
    width: 100%;
}

.addressbar .fi-rr-marker {
    font-size: 18px;
    width: 18px;
    height: 18px;
    color: #666;
}

.addressbar .fi-rr-angle-small-left {
    font-size: 15px;
    width: 15px;
    height: 15px;
    color: #666;
}

.addressbar i:first-child {
    margin-left: 8px;
}

.addressbar i:last-child {
    margin-right: 8px;
    margin-left: 4px;
}

.addressbar:hover {
    border: 1px solid #f0f0f0;
    color: #444 !important;
}

.addressbar .addressbox {
    display: flex;
    align-items: center;
    flex-direction: row;
    width: 100%;
}

.addressbar .addressbox .addresstitle {
    border-radius: 6px;
    background-color: #eee;
    padding: 4px 6px;
    margin-left: 6px;
}

.addressbar .addressbox .addresstext {
    font-weight: 400;
}

.addressbar-product {

}

.slogan {
    margin-top: 8px;
}

.state-group #showstate {
    border: 1px solid #f0f0f0;
    border-radius: 10px;
    padding: 8px;
    margin: 4px 0px 0px;
    cursor: pointer;
    transition: all 0.3s;
}

.state-group #showstate:not(.disable) {
    border: 1px solid var(--basecolor);
    box-shadow: 0 0 0 0.2rem #1acd9630;
}

.cart-state-group .boxdesign {
    padding-bottom: 0px;
}

.state-title {
    font-weight: 400;
    color: #444;
    margin: 0px 5px;
}

.state-group #showstate .label {
    cursor: pointer;
}

.state-group .state-item {
    border: 1px solid #1acd96;
    padding: 7px 8px;
    border-radius: 8px;
    align-items: center;
    justify-content: center;
    display: flex;
    font-weight: 400;
    margin: 0px 0px 8px 8px;
    font-size: 14px;
}

.state-group .state-item i {
    width: 16px;
    height: 16px;
    margin-left: 6px;
    display: none;
}

.state-group .state-item.yellow {
    background-color: #fff6df !important;
    color: #FF8800 !important;
    border-color: #FF8800 !important;
}

.state-group .state-item.blue {
    background-color: #e1f3fd !important;
    color: #11a0ef !important;
    border-color: #11a0ef !important;
}

.state-group .state-item.green {
    background-color: #e2f9f2 !important;
    color: #1acd96 !important;
    border-color: #1acd96 !important;
}

.state-group .state-item.red {
    background-color: #ffe9eb !important;
    color: #ff4c5f !important;
    border-color: #ff4c5f !important;
}

.state-group {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    direction: rtl;
    padding-bottom: 4px;
}

.select2-container--default.select2-container--focus .select2-selection--multiple, .select2-container--default .select2-selection--multiple {
    border-radius: 8px;
    border: 1px solid #ccc;
    direction: rtl;
    text-align: right;
    background-color: #fff !important;
}

.boxdesign-background .select2-container--default.select2-container--focus .select2-selection--multiple, .boxdesign-background .select2-container--default .select2-selection--multiple {
    -webkit-border-radius: 8px;
    border-radius: 8px;
    background: white;
    padding: 12px;
    -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, .05);
    box-shadow: 0 0 15px rgba(0, 0, 0, .05);
    border: 0px #ddd solid;
    transition: 0.3s;
    direction: rtl;
}

.select2.select2-container.select2-container--default, .select2-search.select2-search--inline {
    border-radius: 18px;
    background-color: #fff !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    border: 1px solid var(--basecolor);
    border-radius: 10px;
    background-color: var(--basecolor);
    color: #fff;
    font-size: 14px;
    padding-top: 2px;
    padding-bottom: 2px;
}

.manage-time .select2-container--default.select2-container--focus .select2-selection--multiple, .manage-time .select2-container--default .select2-selection--multiple {
    border-radius: 8px;
    background: white;
    padding: 12px;
    -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, .05);
    box-shadow: 0 0 15px rgba(0, 0, 0, .05);
    border: 1px #f1f1f1 solid;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__display {
    padding-right: 8px;
}

.select2-container--default .select2-results > .select2-results__options {
    font-size: 14px;
    direction: rtl;
    text-align: right;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #fff;
    padding: 4px 8px 0px;
    border-right: none;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover, .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:focus {
    background-color: unset;
    color: #f0f0f0;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable, .select2-container--default .select2-results__option--selected {
    background-color: var(--basecolor);
    color: #fff;
}

.alertmessage {
    text-align: justify;
    direction: rtl;
    background-color: #f07722;
    color: #fff;
    padding: 11px;
    margin: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 25px;
    font-weight: 400;
    border: 1px solid #f07722;
    display: flex;
    white-space: normal;
}

.alertmessage.error {
    background-color: #ff4c5f;
    border: 1px solid #ff4c5f;
    color: #fff;
}

.alertmessage.ok {
    background-color: #1acd96;
    border: 1px solid #1acd96;
    color: #fff;
}

.alertmessage.info {
    background-color: #11a0ef;
    border: 1px solid #11a0ef;
    color: #fff;
}

.alertmessage.warning {
    background-color: #f07722;
    border: 1px solid #f07722;
    color: #fff;
}

.alertmessage.yek {
    background-color: #00d895;
    border: 1px solid #00d895;
    color: #fff;
}

.alertmessage.outline.error {
    background-color: #ff4c5f20;
    border: 1px solid #ff4c5f;
    color: #ff4c5f;
}

.alertmessage.outline.ok {
    background-color: #1acd9620;
    border: 1px solid #1acd96;
    color: #1acd96;
}

.alertmessage.outline.info {
    background-color: #11a0ef20;
    border: 1px solid #11a0ef;
    color: #11a0ef;
}

.alertmessage.outline.warning {
    background-color: #f0772220;
    border: 1px solid #f07722;
    color: #f07722;
}

.alertmessage.outline.yek {
    background-color: #00d89520;
    border: 1px solid #00d895;
    color: #00d895;
}

#print-state {
    position: absolute;
    left: 0;
}

#print-state i {
    background-color: var(--basecolor);
    color: #fff;
    font-size: 9px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
}

.score-bar {
    cursor: pointer;
    border: 0 !important;
    font-size: 14px;
    margin-bottom: 12px;
    overflow: hidden;
    height: 40px;
    font-weight: 400;
}

.score-bar .score-bar-empty {
    color: #888 !important;
    background-color: #88888820 !important;
}

.score-bar .score-buttom {
    font-weight: 400;
    display: flex;
    align-items: center;
}

.score-bar .score {
    font-weight: 400;
    display: flex;
    align-items: center;
    color: var(--basecolor);
    background-color: #1acd9620;
    padding: 1px 8px;
    border-radius: 5px;
}

.score-bar .score .fi {
    margin-right: 4px;
    height: 14px;
    font-size: 12px;
}

.score-bar .score-buttom .fi {
    height: 14px;
    margin-right: 4px;
}

.score-bar .score-bar-notempty {
    color: #444 !important;
    background-color: #fff !important;
    border: 1px solid #ddd;
}

.score-bar .score-bar-empty, .score-bar .score-bar-notempty {
    padding: 0px 10px;
    display: flex;
    width: 100%;
    flex-direction: row;
    direction: rtl;
    justify-content: space-between;
    height: 100%;
    align-items: center;
    border-radius: 8px;
}

.score-box {
    justify-content: center;
    padding: 16px;
}

.score-box .score-title {
    background: #f5f5f5;
    padding: 6px 9px;
    font-size: 14px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-weight: 400;
    color: #aaa;
    transition: 0.3s
}

.score-box .score-title.score5, .score-box .score-title.score4 {
    color: #1acd96;
}

.score-box .score-title.score1, .score-box .score-title.score2 {
    color: #ff4c5f;
}

.score-box .score-title.score3 {
    color: #666;
}

.score-box .score-item {
    font-size: 22px;
    margin-left: 8px;
    width: 22px;
    height: 22px;
    cursor: pointer;
}

.score-box .score-item i {
    color: #ddd;
    transition: 0.3s
}

.score-box .score-item.active i {
    color: #ffa200;
}

.scorelist-cart.productlist {
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}

.scorelist-cart.productlist .product-item-container {
    padding: 12px 0px 0px 0px;
    border: none;
}

.score-list-box {
    display: flex;
    flex-direction: column;
    direction: rtl;
    text-align: right;
    margin-bottom: 12px;
    border-bottom: 1px solid #eee;
}

.score-list-box:last-child {
    margin-bottom: 0px;
    border-bottom: 0;
}

.score-list-box .name {

}

.score-list-box .comment {
    font-size: 14px;
    margin-bottom: 8px;
    text-align: justify;
}

.score-list-box .response .title {
    font-weight: 400;
    margin-bottom: 5px;
}

.score-list-box .response {
    color: var(--basecolor);
    border: 1px solid #1acd9642;;
    border-radius: 8px;
    padding: 12px;
    text-align: justify;
    font-size: 14px;
    margin-bottom: 12px;
}

.score-list-box .cart-list {
    display: flex;
    flex-direction: row;
    direction: rtl;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.score-list-box .cart-list .cart-item {
    padding: 5px 8px;
    border-radius: 8px;
    margin-left: 8px;
    margin-bottom: 8px;
    background-color: #eee;
    color: #666;
    font-weight: 300;
    font-size: 14px;
    transition: 0.3s;
}

.score-list-box .time-score {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 6px;
}

.score-list-box .time-score .time {
    font-size: 14px;
    color: #999;
}

.score-list-box .time-score .score .fi {
    margin-right: 4px;
    height: 14px;
    font-size: 12px;
}

.score-list-box .time-score .score {
    font-weight: 400;
    display: flex;
    align-items: center;
    color: var(--basecolor);
    background-color: #1acd9615;
    padding: 4px 8px 1px;
    border-radius: 5px;
    font-size: 14px;
}

.score-top {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 50%;
    margin: 12px auto;
    background-color: #f2f2f2;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid #ddd;
}

.score-top .score-value .fi {
    font-size: 16px;
}

.score-top .score-value {
    font-weight: 500;
    font-size: 25px;
    color: var(--basecolor);
}

.score-top .score-text {
    font-size: 13px;
    color: #666;
}

.score-top .score-text .score-text-b {
    font-size: 14px;
    font-weight: 400;
}

.party .party-top-message {
    color: #9911ef !important;
    background-color: #9911ef20 !important;
    border: 0 !important;
    margin-top: 16px;
    direction: rtl;
    text-align: right;
    padding: 8px 12px;
    border-radius: 10px;
    font-weight: 300;
    line-height: 30px;
    font-size: 15px;
}

.party-cartlist-name {
    direction: rtl;
    text-align: right;
    font-size: 14px;
}

.receipt-container .party-cartlist-name {
    border: 1px solid #888;
    margin: 6px 0px;
    padding: 1px 4px;
}

.party-cartlist-name .title {
    font-weight: 400;
}

.shop-party-top {
    display: flex;
    flex-direction: row;
    direction: rtl;
    width: 100%;
}

.shop-party-top a:nth-child(2) {
    margin-right: 8px;
}

.status-dot {
    width: 6px;
    height: 6px;
    background-color: #1acd96;
    border-radius: 50%;
    position: relative;
    animation: pulse 1.5s ease infinite;
    margin-left: 6px;
}

.status-dot::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #1acd96;
    border-radius: 50%;
    opacity: 0.4;
    animation: glow 1.5s ease infinite;
}

.shopclose .status-dot {
    background-color: #ff4c5f;
}

.shopclose .status-dot::after {
    background-color: #ff4c5f;
}

.workinghourboxstate {
    margin-left: 8px;
    padding: 3px 12px;
    font-weight: 500;
    border-radius: 6px;
    font-size: 14px;
    display: flex;
    align-items: center;
    flex-direction: row;
}

.shop .workinghourboxstate {
    margin-left: 0px;
}

.workinghourboxstate.shopclose {
    background-color: #ff4c5f14;
    color: #ff4c5f;
    border: 1px solid #ff4c5f;
}

.workinghourboxstate.shopopen {
    background-color: #1acd9614;
    color: #1acd96;
    border: 1px solid #1acd96;
}

/*.box-product {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
}

.box-product .product-item-container {
    min-width: 80%;
    margin-left: 16px;
    border: none;
    padding-top: 8px;
}*/

.shop-cart-count {
    background-color: #ef394e;
    height: 20px;
    min-width: 20px;
    color: white;
    font-size: 12px;
    font-weight: 400;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 3px 5px 0px;
    margin-right: 6px;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes glow {
    0% {
        transform: scale(1);
        opacity: 0.5;
    }
    50% {
        transform: scale(2);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 0.5;
    }
}

@media only screen and (max-width: 325px) {
    .box a {
        font-size: 30px;
    }

    .daybox a {
        font-size: 15px;
    }

    .monthbox a {
        font-size: 15px;
    }

    .monthtitle {
        font-size: 7px;
    }

    .credit-selector {
        padding: 10px 7px;
        margin-left: 7px;
    }

    .credit-selector .credit-text {
        font-size: 14px;
    }

    .credit-selector .credit-label {
        font-size: 10px;
    }

    .credit-top-height {
        height: 40px;
    }
}

/* Extra small devices (phones, 325px and down) */
@media only screen and (min-width: 325px) {
    .box a {
        font-size: 30px;
    }

    .daybox a {
        font-size: 15px;
    }

    .monthbox a {
        font-size: 15px;
    }

}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    .box a {
        font-size: 35px;
    }

    .daybox a {
        font-size: 17px;
    }

    .monthbox a {
        font-size: 17px;
    }

}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    .box a {
        font-size: 40px;
    }

    .daybox a {
        font-size: 19px;
    }

    .monthbox a {
        font-size: 19px;
    }

}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    .box a {
        font-size: 45px;
    }

    .daybox a {
        font-size: 21px;
    }

    .monthbox a {
        font-size: 21px;
    }

}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    .box a {
        font-size: 50px;
    }

    .daybox a {
        font-size: 23px;
    }

    .monthbox a {
        font-size: 23px;
    }

}

@media (hover: none) {
    a:hover {
        color: inherit;
    }
}

.pg-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 24px;
}

.pg-box-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.pg-box-row .pg-logo {
    width: 32px;
    height: 32px;
}

.pg-box .pg-logo {
    width: 64px;
    height: 64px;
    border-radius: 8px;
}

.pg-box .pg-row {
    margin-top: 12px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
}

.pg-box .pg-title {
    font-size: 16px;
    color: #777;
}

.pg-box .pg-info {
    font-size: 18px;
    color: #444;
    margin-top: 4px;
    font-weight: 400;
}

.pg-box .pg-value {
    font-size: 20px;
    color: #444;
    font-weight: 500;
    margin-top: 8px;
}

.pg-box-row .normal-time {
    background-color: #1acd9620;
    color: #1acd96;
    font-weight: 400;
    padding: 5px 8px;
    font-size: 14px;
    border-radius: 8px;
}

.pg-box-row .warning-time {
    background-color: #ff4c5f20;
    color: #ff4c5f;
    font-weight: 400;
    padding: 5px 8px;
    font-size: 14px;
    border-radius: 8px;
}

.product-price-franchise {
    display: flex;
    justify-content: end;
    align-items: center;
    font-size: 12px;
    background: #eee;
    width: fit-content;
    border-radius: 4px;
    padding: 5px 10px 3px;
    color: #666;
    float: left;
    margin-top: 6px;
}

#notification-container {
    position: fixed;
    top: 20px;
    width: 100%;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    direction: rtl;
    text-align: right;
    flex-direction: column;
}

.custom-notification {
    background-color: #fff;
    padding: 12px;
    -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, .05);
    box-shadow: 0 0 15px rgba(0, 0, 0, .05);
    border: 1px #f1f1f1 solid;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    border-radius: 8px;
    animation: slideIn 0.5s forwards;
    width: var(--widthdashboard);
    max-width: 450px;
    font-size: 14px;
}

.custom-notification.slide-out {
    animation: slideOut 0.5s forwards;
}

.custom-notification .icon {
    margin-left: 12px;
    height: 40px;
    width: 40px;
    border-radius: 5px;
    overflow: hidden;
}

.custom-notification .content {
    flex: 1;
}

.custom-notification .message {
    white-space: pre-wrap;
    line-height: 25px;
}

.custom-notification .title {
    font-weight: 400;
    margin-bottom: 5px;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

.push-list .boxdesign {
    direction: rtl;
    text-align: right;
    margin-bottom: 16px;
    position: relative;
    overflow: hidden;
}

.push-list .boxdesign .expire {
    width: 100%;
    height: 100%;
    position: absolute;
    right: 0px;
    top: 0px;
    background-color: #ffffff99;
}

.push-list .boxdesign:first-child {
    margin-top: 0px;
}

.push-list .time {
    white-space: nowrap;
    font-size: 11px;
    color: #999;
}

.push-list .read.deactive {
    background-color: #ff4c5f;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-top: 8px;
}

.push-list .title {
    font-weight: 400;
    margin-bottom: 6px;
}

.push-list .message {
    font-size: 14px;
    white-space: normal;
    line-height: 25px;
    color: #666;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

.push-list .icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    margin-left: 8px;
    background-color: #1acd9615;
    color: #1acd96 !important;
    border: 0px;
}

.push-list .icon.blue {
    background-color: #11a0ef15;
    color: #11a0ef !important;
}

.push-list .icon.green {
    background-color: #1acd9615;
    color: #1acd96 !important;
}

.push-list .icon.red {
    background-color: #ff4c5f15;
    color: #ff4c5f !important;
}

.push-list .icon.yellow {
    background-color: #f0772215;
    color: #f07722 !important;
}

.push-list .icon.purple {
    background-color: #9911ef15;
    color: #9911ef !important;
}

.push-list .icon.pink {
    background-color: #ff6fb515;
    color: #ff6fb5 !important;
}

.push-list .icon i {
    font-size: 18px;
    width: 18px;
    height: 18px;
}

.push-full .shop-address-header {
    border-bottom: 1px solid #ddd !important;
    margin-bottom: 12px !important;
}

.push-full.push-list .message {
    white-space: pre-wrap !important;
    display: block !important;
    text-align: right !important;
    color: #444 !important;
    direction: rtl !important;
    font-size: 15px !important;
}

.push-full.push-list .title {
    margin-bottom: 0px !important;
}

.push-container {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #00000050;
    z-index: 999;
    right: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
}

.push-container .box {
    overflow: hidden;
    margin: 32px auto;
    width: calc(var(--widthdashboard) - 32px);
    max-width: calc(450px - 32px);
    height: fit-content;
    border-radius: 15px;
    direction: rtl;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    background-color: #fff;
    opacity: 0;
}

.push-container .box-back {
    background-image: url('/styles/images/pattern-background-push-v2.png');
    background-size: cover;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: 0.5;
    position: absolute;
    right: 0;
    top: 0;
}

.push-container .box .logo-container {
    position: relative;
    width: 30%;
    display: block;
    object-fit: contain;
    margin-top: calc(100% / 3);
    z-index: 1;
}

.push-container .box .logo-container .logo {
    width: 100%;
    display: block;
    object-fit: contain;
    margin: 0 auto;
    border-radius: 16px;
}

.push-container .box .logo-container .badge {
    position: absolute;
    font-size: 16px;
    width: 36px;
    height: 36px;
    background-color: #ff4c5f;
    border-radius: 50%;
    color: #fff;
    right: -16px;
    top: -16px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 4px solid #fff;
    font-weight: 400;
    padding-top: 6px;
}

.push-container .box .title-message-container {
    z-index: 1;
}

.push-container .box .title {
    font-size: 20px;
    font-weight: 500;
    margin-top: 32px;
    z-index: 1;
}

.push-container .box .message {
    width: 70%;
    margin: 0px auto;
    line-height: 30px;
    margin-top: 8px;
    z-index: 1;
}

.push-container .box .button {
    height: 45px;
    width: calc(100% - 64px);
    font-size: 15px;
    font-weight: 300;
    margin: calc(100% / 4) 32px 0px;
    background-color: #1acd9620;
    z-index: 1;
}

.push-container .box .button:hover {
    background-color: #1acd9650;
    color: var(--basecolor);
}

.push-container .box .button-no {
    height: 45px;
    width: calc(100% - 64px);
    font-size: 15px;
    font-weight: 300;
    margin: 0px 32px;
    background-color: unset;
    color: #aaa;
    z-index: 1;
}

form {
    width: 100%;
}

.shop-new {
    width: 100%;
}

.shop-new .shop-container {
    display: flex;
    margin: 16px;
    direction: rtl;
    padding-bottom: 67px;
}

.shop-new .shop-category-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: sticky;
    top: 62px;
    height: calc(100vh - 63px - 67px);
    overflow-y: auto;
    direction: ltr;
    padding: 12px 12px;
}

.shop-new .shop-category-container .search-bar {
    margin: 0;
    padding: 8px 8px;
}

.shop-new .shop-category-container .cat-title {

}

.shop-new .shop-category-container .cat-title {
    padding: 4px 8px;
    border-right: 4px solid #00000000;
    font-size: 14px;
    direction: rtl;
    white-space: normal;
    overflow: visible;
    height: unset;
    display: flex;
    justify-content: start;
    align-items: center;
    transition: all 0.3s ease;
    cursor: pointer;
    text-align: right;
}

.shop-new .shop-category-container .cat-title.active {
    background: #1acd9618;
    border-right-color: var(--basecolor);
    color: var(--basecolor);
    /*font-weight: 300;*/
}

.shop-new .shop-category-container .cat-title i {
    margin-left: 5px;
    margin-top: 7px;
    font-size: 16px;
}

.shop-new .box-product {
    display: grid;
    gap: 12px;
}

.shop-new .productlist .product-item-container {
    /*border-top: none;*/
    overflow: visible;
    background-color: #ffffff;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #e9e9e9;
}

.shop-new #scrollToTop {
    right: 16px;
}

.shop-new .box-top-shop-new {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.shop .box-top-shop-new {
    margin-top: 16px;
}

.box-top-shop-new {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.shop-new .top-title .farsi {
    width: 100%;
    max-width: 100%;
}

.shop-new .lazybtn {
    margin: 0;
}

@media screen and (min-width: 1024px) {
    .shop-new .shop-category-container {
        display: flex;
        width: 25%;
    }

    .shop-new .productcategory {
        display: none;
    }

    .shop-new .shop-product-container {
        width: 75%;
    }

    .shop-new .box-top-shop-new {
        flex-direction: row;
    }

    .shop-new .box-product {
        grid-template-columns: repeat(2, 1fr);
    }

    .shop-new .searchbox.shide {
        display: none;
    }

}

/* استایل برای اندازه‌های متوسط */
@media screen and (min-width: 768px) and (max-width: 1023px) {

    .shop-new .productcategory {
        display: none;
    }

    .shop-new .shop-category-container {
        display: flex;
        width: 25%;
    }

    .shop-new .shop-product-container {
        width: 75%;
    }

    .shop-new .box-product {
        grid-template-columns: repeat(2, 1fr);
    }

    .shop-new .box-top-shop-new {
        flex-direction: row;
    }

    .shop-new .searchbox.shide {
        display: none;
    }
}

/* استایل برای موبایل (اندازه کوچک) */
@media screen and (max-width: 767px) {
    .shop-new .shop-category-container {
        display: none;
    }

    .shop-new .productcategory {
        display: flex;
    }

    .shop-new .shop-product-container {
        width: 100%;
    }

    .shop-new .box-product {
        grid-template-columns: repeat(1, 1fr);
    }

    .shop-new .box-top-shop-new {
        flex-direction: column;
    }

    .shop-new .searchbox.shide {
        display: flex;
    }
}

.pg-box-info{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    padding: 8px 12px;
    background-color: #1acd9610;
    width: fit-content;
    margin: 12px auto 0px;
    border-radius: 8px;
    border: 1px solid var(--basecolor);
    color: var(--basecolor);
    font-weight: 400;
}