/*custom*/
.wrapperLoading {
    width: 200px;
    height: 60px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.circleLoading {
    width: 20px;
    height: 20px;
    position: absolute;
    border-radius: 50%;
    background-color: #fff;
    left: 15%;
    transform-origin: 50%;
    animation: circleLoading .5s alternate infinite ease;
}

@keyframes circleLoading {
    0% {
        top: 60px;
        height: 5px;
        border-radius: 50px 50px 25px 25px;
        transform: scaleX(1.7);
    }
    40% {
        height: 20px;
        border-radius: 50%;
        transform: scaleX(1);
    }
    100% {
        top: 0%;
    }
}

.circleLoading:nth-child(2) {
    left: 45%;
    animation-delay: .2s;
}

.circleLoading:nth-child(3) {
    left: auto;
    right: 15%;
    animation-delay: .3s;
}

.shadowLoading {
    width: 20px;
    height: 4px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, .5);
    position: absolute;
    top: 62px;
    transform-origin: 50%;
    z-index: -1;
    left: 15%;
    filter: blur(1px);
    animation: shadowLoading .5s alternate infinite ease;
}

@keyframes shadowLoading {
    0% {
        transform: scaleX(1.5);
    }
    40% {
        transform: scaleX(1);
        opacity: .7;
    }
    100% {
        transform: scaleX(.2);
        opacity: .4;
    }
}

.shadowLoading:nth-child(4) {
    left: 45%;
    animation-delay: .2s
}

.shadowLoading:nth-child(5) {
    left: auto;
    right: 15%;
    animation-delay: .3s;
}

.wrapperLoading span {
    position: absolute;
    top: 75px;
    font-family: 'Lato';
    font-size: 20px;
    letter-spacing: 12px;
    color: #fff;
    left: 15%;
}

@font-face {
    font-family: 'molla';
    src: url("../../fonts/molla/molla0ab2.eot?74273691");
    src: url("../../fonts/molla/molla0ab2.eot?74273691#iefix") format("embedded-opentype"),
    url("../../fonts/molla/molla0ab2.woff2?74273691") format("woff2"),
    url("../../fonts/molla/molla0ab2.woff?74273691") format("woff"),
    url("../../fonts/molla/molla0ab2.ttf?74273691") format("truetype"),
    url("../../fonts/molla/molla0ab2.svg?74273691#molla") format("svg");
    font-weight: normal;
    font-style: normal
}

[class^="icon-"]:before, [class*=" icon-"]:before,
[class^="btn-"]:before, [class*=" btn-"]:before {
    font-family: "molla";
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-close:before {
    content: '\f191';
}

.icon-plus:before {
    content: '\f2c2';
}

.icon-refresh:before {
    content: '\e813';
}

.btn-cart:before {
    content: '\f111';
    color: #fff;
    font-size: 20px;
}

.icon-angle-left:before {
    content: '\f111';
    color: #fff;
    font-size: 20px;
}

/* 'ï„‘' */
.icon-angle-right:before {
    content: '\f112';
    color: #fff;
    font-size: 20px;
}


.icon-long-arrow-left:before {
    content: '\f273';
}

.icon-minus:before {
    content: '\f28e';
}

.icon-plus:before {
    content: '\f2c2';
}

.icon-facebook-f:before {
    content: '\f39e';
}

.icon-twitter:before {
    content: '\f099';
}

.icon-pinterest:before {
    content: '\f0d2';
}

.icon-linkedin:before {
    content: '\f08c';
}

.read-more:after {
    font-family: 'molla';
    content: '\f273';
    font-size: 1.5rem;
    line-height: 1;
    display: block;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -.75rem;
    opacity: 0;
    transition: all .25s ease;
    transform: translateX(6px);
}

.breadcrumb-item + .breadcrumb-item::before {
    display: inline-block;
    padding-right: .5rem;
    color: #6c757d;
    content: "/";
    padding-left: 10px;
}

.breadcrumb-item, .breadcrumb-item a {
    color: #5a5959 !important;
    font-size: 15px;
}

.toast-message {
    font-size: 16px;
    text-align: justify;
}

#rating {
    text-align: center;
}

#rating input {
    cursor: pointer;
}

#rating .itemRat {
    display: inline-block;
}

#rating span {
    display: block;
    text-align: center;
    font-size: 14px;
}

.Side-mob {
    top: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    width: 75%;
    z-index: 1212;
    box-shadowLoading: inset -2px 3px 2px 0px #d2c477;
    transform: translateX(100%);
    transition: all 0.3s;
    font-size: 22px;
}

#openCompare #priceFinal {
    font-size: 19px;
    text-align: center;
}

.action-icon-top .btn-product {
    padding-top: 1rem;
    padding-bottom: 1rem;
    flex-direction: row;
}

.product-action {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    background-color: #302E30;
    z-index: 10;
    transition: all .35s ease;
    opacity: 0;
    visibility: hidden;
    transform: translateY(100%);
}

.product.product-7 .btn-product:hover,
.product.product-7 .btn-product:focus {
    color: #fff;
    background-color: #191101;
    border-bottom-color: #000000;
}

.carousel-control-next {
    right: unset;
}

.slide img {
    width: 100%;
}

.btn-info {
    color: #fff;
    background-color: #17a2b8 !important;
    border-color: #17a2b8;
}

/*btn*/
.btn.animateBtn::before, .btn.animateBtnRed::before, .btn.animateBtnBlue::before, .animateBtnGreen:hover::before {
    width: 95px;
    height: 95px;
    position: absolute;
    right: -15px;
    background: hsla(0, 0%, 100%, .21);
    content: "";
    border-radius: 50%;
    top: -23px;
    transition: all .3s ease-in-out;
}

.btn.animateBtn::before, .btn.animateBtnRed::before, .btn.animateBtnBlue::before, .animateBtnGreen:hover::before {
    width: 95px;
    height: 95px;
    position: absolute;
    right: -15px;
    background: hsla(0, 0%, 100%, .21);
    content: "";
    border-radius: 50%;
    top: -23px;
    transition: all .3s ease-in-out;
}

.animateBtn:hover::before, .animateBtnRed:hover::before, .animateBtnBlue:hover::before, .animateBtnGreen:hover::before {
    width: 900px;
    height: 900px;
    right: -334px;
    top: -334px;
    transform: unset;
}

.modalAuth .input-group-addon {
    border-right: 1px solid #ccc !important;
    width: 50px;
    text-align: center;
    line-height: 37px;
    border-top: 1px solid #ccc !important;
    border-bottom: 1px solid #ccc !important;
    background-color: #1fb78b;
}

.btn.animateBtn {
    padding: 0 !important;
    -webkit-transition: background-color 150ms ease 0s;
    -ms-transition: background-color 150ms ease 0s;
    -moz-transition: background-color 150ms ease 0s;
    -o-transition: background-color 150ms ease 0s;
    transition: background-color 150ms ease 0s;
    background-color: #2fb7a0;
    color: #fff !important;
    height: 50px;
    line-height: 50px;
    position: relative;
    overflow: hidden;
    text-align: center;
    border-color: #06B787;
}

.btn.animateBtnRed {
    padding: 0 !important;
    -webkit-transition: background-color 150ms ease 0s;
    -ms-transition: background-color 150ms ease 0s;
    -moz-transition: background-color 150ms ease 0s;
    -o-transition: background-color 150ms ease 0s;
    transition: background-color 150ms ease 0s;
    background-color: #be0e10;
    color: #fff !important;
    height: 50px;
    line-height: 50px;
    position: relative;
    overflow: hidden;
    text-align: center;
}

.btn.animateBtnGreen {
    padding: 0 !important;
    -webkit-transition: background-color 150ms ease 0s;
    -ms-transition: background-color 150ms ease 0s;
    -moz-transition: background-color 150ms ease 0s;
    -o-transition: background-color 150ms ease 0s;
    transition: background-color 150ms ease 0s;
    background-color: #06B787;
    color: #fff !important;
    height: 50px;
    line-height: 50px;
    position: relative;
    overflow: hidden;
    text-align: center;
    border-radius: 5px !important;
}

.btn.animateBtnBlue {
    -webkit-transition: background-color 150ms ease 0s;
    -ms-transition: background-color 150ms ease 0s;
    -moz-transition: background-color 150ms ease 0s;
    -o-transition: background-color 150ms ease 0s;
    transition: background-color 150ms ease 0s;
    background-color: #2c1fdb;
    color: #fff !important;
    height: 50px;
    line-height: 50px;
    position: relative;
    overflow: hidden;
    text-align: center;
    font-size: 13px;
    padding: 0 20px !important;
}

.invalid {
    border: 1px solid #a14444;
}

.topCart {
    display: inline-block;
}

.btn {
    font-size: 0.75rem;
}

.cursor {
    cursor: pointer;
}

/*استایل لودینگ*/
.overflowSpinner {
    overflow: hidden;
}

:root {
    --size: 75px;
    --clr-bg: #272324;
    --clr1: #539dd0;
    --clr2: #52bdb4;
    --clr3: #48b4a0;
    --clr4: #51c69f;
    --clr5: #2f83af;
}

#spinnerBox {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 99999999;
    background-color: #000c;
    width: 100%;
    height: 100%;
    overflow: hidden !important;
}

.spinner1, .spinner2, .spinner3, .spinner4, .spinner5, .spinner6 {
    position: relative;
    right: 49%;
    top: 50%;
}

@media (min-width: 600px) {
    .container {
        grid-template-rows: repeat(2, auto);
        grid-template-columns: repeat(3, auto);
    }
}

.spinner1 {
    --animation-duration: 1000ms;
    width: var(--size);
    height: var(--size);
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.spinner1 .spinner-item {
    width: calc(var(--size) / 12);
    height: 80%;
    background: var(--clr-spinner);
    animation: spinner1 var(--animation-duration) ease-in-out infinite;
}

@keyframes spinner1 {
    50% {
        transform: scaleY(0.25);
    }
}

.spinner1 .spinner-item:nth-child(1) {
    --clr-spinner: var(--clr1);
    animation-delay: calc(var(--animation-duration) / 10 * -3);
}

.spinner1 .spinner-item:nth-child(2) {
    --clr-spinner: var(--clr5);
    animation-delay: calc(var(--animation-duration) / 10 * -1);
}

.spinner1 .spinner-item:nth-child(3) {
    --clr-spinner: var(--clr3);
    animation-delay: calc(var(--animation-duration) / 10 * -2);
}

.spinner1 .spinner-item:nth-child(4) {
    --clr-spinner: var(--clr4);
    animation-delay: calc(var(--animation-duration) / 10 * -1);
}

.spinner1 .spinner-item:nth-child(5) {
    --clr-spinner: var(--clr2);
    animation-delay: calc(var(--animation-duration) / 10 * -3);
}

.spinner2 {
    --animation-duration: 650ms;
    position: relative;
    width: var(--size);
    height: var(--size);
}

.spinner2 .spinner-item {
    position: absolute;
    width: var(--item-size);
    height: var(--item-size);
    top: calc(50% - var(--item-size) / 2);
    left: calc(50% - var(--item-size) / 2);
    border: 4px solid transparent;
    border-left: 4px solid var(--clr-spinner);
    border-right: 4px solid var(--clr-spinner);
    border-radius: 50%;
    animation: spinner2 var(--animation-duration) linear infinite;
}

@keyframes spinner2 {
    to {
        transform: rotate(360deg);
    }
}

.spinner2 .spinner-item:nth-of-type(1) {
    --item-size: var(--size);
    --clr-spinner: var(--clr1);
    border-top: 4px solid var(--clr1);
}

.spinner2 .spinner-item:nth-of-type(2) {
    --item-size: calc(var(--size) - 15px);
    --clr-spinner: var(--clr5);
    border-bottom: 4px solid var(--clr5);
}

.spinner2 .spinner-item:nth-of-type(3) {
    --item-size: calc(var(--size) - 30px);
    --clr-spinner: var(--clr3);
    border-top: 4px solid var(--clr3);
}

.spinner3 {
    --animation-duration: 5000ms;
    position: relative;
    width: var(--size);
    height: var(--size);
    transform: rotate(45deg);
}

.spinner3 .spinner-item {
    --item-size: calc(var(--size) / 2.5);
    position: absolute;
    width: var(--item-size);
    height: var(--item-size);
    border: 4px solid var(--clr-spinner);
}

.spinner3 .spinner-item:nth-child(1) {
    --clr-spinner: var(--clr1);
    top: 0;
    left: 0;
    animation: spinner3A var(--animation-duration) linear infinite;
}

@keyframes spinner3A {
    0%, 8.33%, 16.66%, 100% {
        transform: translate(0%, 0%);
    }
    24.99%, 33.32%, 41.65% {
        transform: translate(100%, 0%);
    }
    49.98%, 58.31%, 66.64% {
        transform: translate(100%, 100%);
    }
    74.97%, 83.3%, 91.63% {
        transform: translate(0%, 100%);
    }
}

.spinner3 .spinner-item:nth-child(2) {
    --clr-spinner: var(--clr3);
    top: 0;
    left: var(--item-size);
    animation: spinner3B var(--animation-duration) linear infinite;
}

@keyframes spinner3B {
    0%, 8.33%, 91.63%, 100% {
        transform: translate(0%, 0%);
    }
    16.66%, 24.99%, 33.32% {
        transform: translate(0%, 100%);
    }
    41.65%, 49.98%, 58.31% {
        transform: translate(-100%, 100%);
    }
    66.64%, 74.97%, 83.3% {
        transform: translate(-100%, 0%);
    }
}

.spinner3 .spinner-item:nth-child(3) {
    --clr-spinner: var(--clr5);
    top: var(--item-size);
    left: var(--item-size);
    animation: spinner3C var(--animation-duration) linear infinite;
}

@keyframes spinner3C {
    0%, 83.3%, 91.63%, 100% {
        transform: translate(0, 0);
    }
    8.33%, 16.66%, 24.99% {
        transform: translate(-100%, 0);
    }
    33.32%, 41.65%, 49.98% {
        transform: translate(-100%, -100%);
    }
    58.31%, 66.64%, 74.97% {
        transform: translate(0, -100%);
    }
}

.spinner4 {
    --animation-duration: 1150ms;
}

.spinner4 .spinner-item {
    --item-size: calc(var(--size) / 4);
    width: var(--item-size);
    height: var(--item-size);
    display: inline-block;
    margin: 0 3px;
    border-radius: 50%;
    border: 4px solid var(--clr-spinner);
    animation: spinner4 var(--animation-duration) ease-in-out infinite;
}

@keyframes spinner4 {
    0%, 100% {
        transform: translateY(75%);
    }
    50% {
        transform: translateY(-75%);
    }
}

.spinner4 .spinner-item:nth-child(1) {
    --clr-spinner: var(--clr5);
    animation-delay: calc(var(--animation-duration) / 6 * -1);
}

.spinner4 .spinner-item:nth-child(2) {
    --clr-spinner: var(--clr3);
    animation-delay: calc(var(--animation-duration) / 6 * -2);
}

.spinner4 .spinner-item:nth-child(3) {
    --clr-spinner: var(--clr1);
    animation-delay: calc(var(--animation-duration) / 6 * -3);
}

.spinner5 {
    --animation-duration: 1000ms;
    width: var(--size);
    height: var(--size);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
}

.spinner5 .spinner-item {
    height: 40%;
    background-color: var(--clr-spinner);
    width: calc(var(--size) / 13);
    animation: spinner5 var(--animation-duration) ease-in-out infinite;
}

@keyframes spinner5 {
    25% {
        transform: scaleY(2);
    }
    50% {
        transform: scaleY(1);
    }
}

.spinner5 .spinner-item:nth-child(1) {
    --clr-spinner: var(--clr1);
}

.spinner5 .spinner-item:nth-child(2) {
    --clr-spinner: var(--clr3);
    animation-delay: calc(var(--animation-duration) / 10);
}

.spinner5 .spinner-item:nth-child(3) {
    --clr-spinner: var(--clr5);
    animation-delay: calc(var(--animation-duration) / 10 * 2);
}

.spinner5 .spinner-item:nth-child(4) {
    --clr-spinner: var(--clr4);
    animation-delay: calc(var(--animation-duration) / 10 * 3);
}

.spinner5 .spinner-item:nth-child(5) {
    --clr-spinner: var(--clr2);
    animation-delay: calc(var(--animation-duration) / 10 * 4);
}

.spinner6 {
    --animation-duration: 3000ms;
    position: relative;
    width: var(--size);
    height: var(--size);
}

.spinner6 .spinner-item {
    position: absolute;
    top: calc(50% - var(--size) / 2);
    left: calc(50% - var(--size) / 2);
    width: var(--size);
    height: var(--size);
    background: var(--clr-spinner);
    border-radius: 50%;
    animation: spinner6 var(--animation-duration) ease-in-out infinite;
}

@keyframes spinner6 {
    0%, 100% {
        transform: scale(0.25);
        opacity: 1;
    }
    50% {
        transform: scale(1);
        opacity: 0;
    }
}

.spinner6 .spinner-item:nth-of-type(1) {
    --clr-spinner: var(--clr1);
}

.spinner6 .spinner-item:nth-of-type(2) {
    --clr-spinner: var(--clr5);
    animation-delay: calc(var(--animation-duration) / -2);
}


/*استایل مودال*/
.btn-text {
    color: #000000;
    cursor: pointer;
}

.btn-text:hover {
    color: #000000;
}

#mainButton #modal1, #mainButton #modal2,
#mainButton #modal3, #mainButton #modal4 {
    top: -30%;
    left: 0;
    z-index: 9999;
    width: 100%;
    height: 132vh;
    padding: 20px;
    display: flex;
    position: fixed;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: inherit;
    transform-origin: center center;
    -webkit-transform: scale(0.000001, 0.00001);
    -moz-transform: scale(0.000001, 0.00001);
    -ms-transform: scale(0.000001, 0.00001);
    -o-transform: scale(0.000001, 0.00001);
    transform: scale(0.000001, 0.00001);
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    -ms-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
    background: hsl(0deg 3.53% 3.04% / 46%);
}

#mainButton.active #modal1 {
    -webkit-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1);
}

#mainButton.active2 #modal2 {
    -webkit-transform: scale(1, 1) !important;
    -moz-transform: scale(1, 1) !important;
    -ms-transform: scale(1, 1) !important;
    -o-transform: scale(1, 1) !important;
    transform: scale(1, 1) !important;
}

#mainButton.active3 #modal3 {
    -webkit-transform: scale(1, 1) !important;
    -moz-transform: scale(1, 1) !important;
    -ms-transform: scale(1, 1) !important;
    -o-transform: scale(1, 1) !important;
    transform: scale(1, 1) !important;
}

#mainButton.active4 #modal4 {
    -webkit-transform: scale(1, 1) !important;
    -moz-transform: scale(1, 1) !important;
    -ms-transform: scale(1, 1) !important;
    -o-transform: scale(1, 1) !important;
    transform: scale(1, 1) !important;
}

#mainButton.active2 #modal1, #mainButton.active3 #modal2,
#mainButton.active3 #modal1, #mainButton.active2 #modal3
,#mainButton.active2 #modal4{
    -webkit-transform: scale(0) !important;
    -moz-transform: scale(0) !important;
    -ms-transform: scale(0) !important;
    -o-transform: scale(0) !important;
    transform: scale(0) !important;
}

#mainButton.active2 #modal2,
#mainButton.active3 #modal3,
#mainButton.active4 #modal4{
    top: -50%;
    left: 0;
    z-index: 40000;
    width: 100%;
    height: 100%;
    padding: 20px;
    display: flex;
    position: fixed;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: inherit;
    transform-origin: center center;
    -webkit-transform: scale(0.000001, 0.00001);
    -moz-transform: scale(0.000001, 0.00001);
    -ms-transform: scale(0.000001, 0.00001);
    -o-transform: scale(0.000001, 0.00001);
    transform: scale(0.000001, 0.00001);
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    -ms-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
    background: hsla(0, 0%, 22%, 0.87);
}

div#mainButton a {
    color: #af9f6b;
    font-size: 11px;
    top: 24px;
    padding: 10px 0;
}

.close-button {
    top: 20px;
    right: 20px;
    position: absolute;
    -webkit-transition: opacity 0.2s ease-in;
    -moz-transition: opacity 0.2s ease-in;
    -ms-transition: opacity 0.2s ease-in;
    -o-transition: opacity 0.2s ease-in;
    transition: opacity 0.2s ease-in;
    color: #fff;
    font-size: 20px;
}

.close-button:hover {
    opacity: 0.5;
    cursor: pointer;
}

.form-title {
    margin-bottom: 15px;
    color: #fff;
    font-size: 22px;
    font-weight: 700;
}

.frm-login, .frm-register, .frm-forget {
    display: block;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}

.form-button {
    width: 100%;
    padding: 10px;
    color: #111;
    margin-top: 10px;
    max-width: 400px;
    text-align: center;
    border: solid 1px #25d2f4;
    background-color: #25d2f4;
    -webkit-transition: color 0.2s ease-in, background-color 0.2s ease-in;
    -moz-transition: color 0.2s ease-in, background-color 0.2s ease-in;
    -ms-transition: color 0.2s ease-in, background-color 0.2s ease-in;
    -o-transition: color 0.2s ease-in, background-color 0.2s ease-in;
    transition: color 0.2s ease-in, background-color 0.2s ease-in;
    margin: 10px auto;
}

.form-button:hover {
    color: white;
    cursor: pointer;
    background-color: transparent;
}

.modalAuth .input-group {
    width: 100%;
    font-size: 16px;
    max-width: 400px;
    padding-top: 20px;
    position: relative;
    margin-bottom: 15px;
    margin: 10px auto;
}

.modalAuth .input-group input {
    width: 100%;
    color: white;
    border: none;
    outline: none;
    padding: 5px 0;
    line-height: 1;
    font-size: 16px;
    border-bottom: solid 1px white;
    background-color: transparent;
    -webkit-transition: box-shadow 0.2s ease-in;
    -moz-transition: box-shadow 0.2s ease-in;
    -ms-transition: box-shadow 0.2s ease-in;
    -o-transition: box-shadow 0.2s ease-in;
    transition: box-shadow 0.2s ease-in;
}

.modalAuth .input-group input + label {
    right: 0;
    top: 20px;
    position: absolute;
    pointer-events: none;
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    -ms-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
    color: #fff;
}

.modalAuth .input-group input:focus {
    box-shadow: 0 1px 0 0 white;
}

.modalAuth .input-group input:focus + label, .modalAuth .input-group input.active + label {
    font-size: 12px;
    -webkit-transform: translateY(-20px);
    -moz-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    -o-transform: translateY(-20px);
    transform: translateY(-20px);
}