:root {
    --mainColor: #1A94C4;
    --mainColorHover: #1785b0;
    --close: #9e9e9e;
    --closeLight: #cdcdcd;
    --closeDark: #777;
    --border: #e7e7e7;
    --shadow: 1px 2px 6px #00000025;
    --shadow: 1px 2px 6px #dde0e590;

    --bgColor: #EAECEF;
    --bgFooter: #f3f5f7;
    --box: #fff;
    --boxFoot: #e6e6e6;
    --boxHead: #dde0e5;
    --boxHeadText: #050505;
    --boxBorder: #e3e3e3;
    --textColor: #334155;
    --subText: #485c78;
    --rvColor: #0E2338;
    --rvText: #e6e6e6;

    --tblBorder: #eee;

    --textLight: #e6e6e6;
    --textDark: #334155;
    --textBlue: #33ccff;
    --textBlue2: #00b8f5;
    --textRed: #DC3545;
    --textRed2: #c62232;
    --textYellow: #9C8F3D;
    --textYellow2: #9C8F3D;
    --textGreen: #81A97B;
    --textGreen2: #81A97B;

    --bgBlue: #1A94C4;
    --bgBlueHover: #1785b0;
    --bgGreen: #20B2AA;
    --bgGreenHover: #1da099;
    --bgRed: #d03863;
    --bgRedHover: #c02d57;
    --bgYellow: #FFD662;
    --bgYellowHover: #ffcd3f;
    --bgDark: #363945;
    --bgDarkHover: #31333e;

    --radius: 4px;

    /* Dual Menu */
    --stickyNav: rgba(28, 43, 75, 1);
    --menuSep1: #F3F4F6;
    --menuSep2: #f3f5f7;
    --menuText: #666;
    --menuTextResponsive: #4d4c4c;
    --menuIcon: #485c78;
    --menuIconBg: #dde0e5;
    --menuSub: var(--boxHead);
    --menuItem: var(--box);
    --menuSubText: #485c78;
    --menu1: #fff;
    --menu2: #f7f7f7;
    --menu3: #f2f2f2;
    --menu4: #ebebeb;
    --menu5: #e6e6e6;
    --menu6: #dedede;

    /* Form */
    --input: #ffffff;
    --inputFocus: #3d3d3d;
    --inputText: #28313C;
    --inputBorder: #ccc;
    --checkbox: #d1e1fd;
    --checked: #007295;
    --checkedText: #fdfdfd;
    --label: #555;
    --selectSep: #e9e9e9;
    --btnColor: #1A94C4;
    --btnHover: #1785b0;
    --btnText: #fdfdfd;

    --alertGreen: #20B2AA;
    --alertGreenText: #fdfdfd;
    --alertGreenHover: #1da099;
    --alertYellow: #fff7ebff;
    --alertYellowText: #faa825ff;
    --alertYellowHover: #433e3d;
    --alertBlue: #30405F;
    --alertBlueText: #5A8DEE;
    --alertBlueHover: #2b3a55;
    --alertRed: #FFF3F6;
    --alertRedText: #EF4056;
    --alertRedHover: #ffdae3;
    --alertDark: #323E52;
    --alertDarkText: #69809A;
    --alertDarkHover: #2d384a;

    /* Admin Buttons */
    --btnGreen: #2B4C4F;
    --btnGreenText: #39DA8A;
    --btnGreenHover: #274447;
    --btnYellow: #4A4544;
    --btnYellowText: #FDAC41;
    --btnYellowHover: #433e3d;
    --btnBlue: #30405F;
    --btnBlueText: #5A8DEE;
    --btnBlueHover: #2b3a55;
    --btnRed: #4A3848;
    --btnRedText: #FF5B5C;
    --btnRedHover: #433241;
    --btnDark: #323E52;
    --btnDarkText: #69809A;
    --btnDarkHover: #2d384a;
    --btnLight: #d6dce3;
    --btnLightText: #555;
    --btnLightHover: #c7d0da;
    --btnDef: var(--btnLight);
    --btnDefText: var(--btnLightText);
    --btnDefHover: var(--btnLightHover);

    /* Others */
    --boxPadding: 8px;
}

.darkTheme {
    --mainColor: #45B8AC;
    --mainColorHover: #3b9c92;
    --border: #6d6d6d;
    --shadow: 1px 2px 6px #00000040;

    --bgColor: #121212;
    --bgFooter: #202020;
    --box: #282828;
    --boxFoot: #333333;
    --boxHead: #3F3F3F;
    --boxHeadText: #d4d4d4;
    --boxBorder: #242424;
    --textColor: #e6e6e6;
    --subText: #b3b3b3;
    --rvColor: #fff;
    --rvText: #334155;

    --tblBorder: #393939;

    --textBlue: #19bfd3;
    --textBlue2: #16acbe;

    /* --stickyNav: linear-gradient(180deg, #163555, #163453, #163555); */
    --stickyNav: rgba(28, 43, 75, 1);
    --menuSep1: #333333;
    --menuSep2: #1e1e1e;
    --menuText: #999;
    --menuTextResponsive: #cdcdcd;
    --menuIcon: #F8F8FF;
    --menuIconBg: #3F3F3F;

    --menuSubText: #e6e6e6;
    --menu1: #202830;
    --menu2: #1e262e;
    --menu3: #1d242b;
    --menu4: #1b2229;
    --menu5: #1a2026;
    --menu6: #181e24;

    /* Form */
    --input: #181C17;
    --inputFocus: var(--mainColor);
    --inputText: #a5a5a5;
    --inputBorder: #181C17;
    --checkbox: #d1e1fd;
    --checked: #007295;
    --checkedText: #fdfdfd;
    --label: #a5a5a5;
    --selectSep: #242424;

    /* --alertGreen: #E0FFF5;
    --alertGreenText: #248061;
    --alertGreenHover: #b0ffe6; */

    --btnDef: var(--btnDark);
    --btnDefText: var(--btnDarkText);
    --btnDefHover: var(--btnDarkHover);
}

.admin {
    --stickyNav: rgba(28, 43, 75, 1);
    --menuSep1: #163555;
    --menuSep2: #163453;
    --menuText: #999;
    --menuTextResponsive: #cdcdcd;
    --menuIcon: #282f38;
    /*485c78*/
    --menuIconBg: #859198;
    /*dde0e5*/
    --menuSub: #1a3149;
    --menuItem: #f3f5f7;
    --menuSubText: #444;
    --menu1: #202830;
    --menu2: #1e262e;
    --menu3: #1d242b;
    --menu4: #1b2229;
    --menu5: #1a2026;
    --menu6: #181e24;

    --menuText: #c1c1c1;

    --radius: 2px;
}

.darkTheme .admin {
    /* --menuIconBg: #dde0e5; */
}

@font-face {
    font-family: 'vazir';
    src: url('../fonts/Vazir.ttf') format('truetype'),
        url('../fonts/Vazir.eot?#iefix') format('embedded-opentype');
}

@font-face {
    font-family: 'IRANSans';
    src: url('../fonts/IRANSansWeb.ttf') format('truetype'),
        url('../fonts/IRANSansWeb.eot?#iefix') format('embedded-opentype');
}

* {
    margin: 0;
    padding: 0;
    outline: 0;
    box-sizing: border-box;
}

*:focus {
    outline: 0;
    box-shadow: none;
    border: none;
}

ul,
li {
    list-style: none;
    margin: 0;
    padding: 0;
}

a,
a:hover {
    text-decoration: none;
}

img {
    max-width: 100%;
}

.contain100,
.cover100 {
    min-width: 100px;
    width: 100px;
    height: 100px;
    border-radius: var(--radius);
    object-fit: contain;
}

.cover100 {
    object-fit: cover;
}

.ltr {
    direction: ltr !important;
}

.rtl {
    direction: rtl !important;
}

.pointer {
    cursor: pointer;
}

.radius {
    border-radius: var(--radius);
}

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

.dragSlider {
    display: flex;
    gap: 10px;
    overflow: auto;
}

.xMandatory {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    /* Needed to work on iOS Safari */
}

.snapStart {
    scroll-snap-align: start;
}

.snapCenter {
    scroll-snap-align: center;
}

.shadow1 {
    box-shadow: var(--shadow);
}

.bgColor {
    background-color: var(--bgColor);
}

.bgRv {
    background-color: var(--rvColor);
}

.bgFooter {
    background-color: var(--bgFooter);
}

.bgBox {
    background-color: var(--box);
}

.bgBoxHead {
    background-color: var(--boxHead);
}

.textColor {
    color: var(--textColor);
}

.textRv {
    color: var(--rvColor);
}

.textLight {
    color: var(--textLight);
}

.textDark {
    color: var(--textDark);
}

.subText {
    color: var(--subText);
}

.mainText {
    color: var(--mainColor);
}

.textLink {
    color: var(--mainColor);
    /* transition: all 0.3s ease; */
}

.textLink:hover {
    color: var(--mainColorHover);
    /* transition: all 0.3s ease; */
}

.linkBorder {
    border-bottom: 1px solid var(--mainColor);
    transition: all 0.3s ease;
}

.linkBorder:hover {
    border-color: var(--mainColorHover);
    transition: all 0.3s ease;
}

.bgBlue {
    background-color: var(--bgBlue);
}

.bgGreen {
    background-color: var(--bgGreen);
}

.bgYellow {
    background-color: var(--bgYellow);
}

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

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

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

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

.closeIcon {
    display: inline-block;
    position: relative;
    width: 26px;
    height: 26px;
    /* background-color: #0d1f32; */
    cursor: pointer;
}

.closeIcon::before,
.closeIcon::after {
    content: "";
    width: 2px;
    height: 25px;
    position: absolute;
    background-color: var(--close);
    left: 12px;
    transform: rotate(45deg);
}

.closeIcon::after {
    transform: rotate(-45deg);
}

.alertIcon {
    display: flex;
    gap: 20px;
    align-items: center;
    padding: 20px;
    background-color: var(--boxHead);
    color: var(--boxText);
    border-radius: var(--radius);
    font-size: 15px;
    line-height: 1.8;
}

.alertIcon i {
    font-size: 30px;
    border-radius: var(--radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
}

.alertBox {
    position: relative;
    padding: 20px;
    background-color: var(--box);
    color: var(--boxText);
    border-radius: var(--radius);
}

.alertBox .closeAlert {
    position: absolute;
    cursor: pointer;
    width: 22px;
    height: 21px;
    top: 5px;
    left: 5px;
    /* background-color: #00000030; */
    border-radius: var(--radius);
}

.alertBox .closeAlert::before,
.alertBox .closeAlert::after {
    content: "";
    width: 2px;
    height: 20px;
    position: absolute;
    background-color: var(--close);
    left: 10px;
    transform: rotate(45deg);
}

.alertBox .closeAlert::after {
    transform: rotate(-45deg);
}

.alertDef {
    background-color: var(--boxHead);
    color: var(--boxHeadText);
}

.alertGreen {
    background-color: var(--alertGreen);
    color: var(--alertGreenText);
}

.alertYellow {
    background-color: var(--alertYellow);
    color: var(--alertYellowText);
}

.alertBlue {
    background-color: var(--alertBlue);
    color: var(--alertBlueText);
}

.alertRed {
    background-color: var(--alertRed);
    color: var(--alertRedText);
}

.alertDark {
    background-color: var(--alertDark);
    color: var(--alertDarkText);
}

.alertGreen .closeAlert::before,
.alertGreen .closeAlert::after {
    background-color: var(--closeDark);
}

.fadeMessageBox {
    position: fixed;
    bottom: 0;
    width: 300px;
    max-width: calc(100% - 40px);
    margin: 20px;
    z-index: 1070;
}

.admin .fadeMessageBox {
    right: 10px;
}

.fadeMessageBox {
    margin-bottom: 20px;
}

.fadeMessageBox .item {
    display: block;
    margin-bottom: 10px;
}

.fadeMessageBox .item:last-child {
    margin-bottom: 0;
}

.btn0,
.btn2,
.btn1 {
    display: inline-flex;
    align-items: center;
    /* padding: 5px 15px; */
    height: 40px;
    padding: 10px 25px;
    cursor: pointer;
    border: 1px solid var(--btnColor);
    border-radius: var(--radius);
    background-color: var(--btnColor);
    color: var(--btnText);
    transition: all 0.3s ease;
}

.btn2 {
    border-color: var(--btnHover);
    background-color: transparent;
    color: var(--textColor);
}

.btn2:hover,
.btn1:hover {
    background-color: var(--btnHover);
    color: var(--btnText);
    border-color: var(--btnColor);
    transition: all 0.1s ease;
}

.btn0 {
    border: none;
    background-color: var(--btnDef);
    color: var(--btnDefText);
}

.btn0:hover {
    background-color: var(--btnDefHover);
    transition: all 0.1s ease;
    color: var(--btnDefText);
}

.btn0.btnSm,
.btn2.btnSm,
.btn1.btnSm {
    padding: 0 10px;
    height: 25px;
}

.btn0.btnLg,
.btn2.btnLg,
.btn1.btnLg {
    height: 52px;
}

.btn0.w100,
.btn2.w100,
.btn1.w100 {
    width: 100%;
    justify-content: center;
}

.btn0 i,
.btn2 i,
.btn1 i {
    margin-left: 7px;
}

.btn0.justIcon i,
.btn2.justIcon i,
.btn1.justIcon i {
    margin-left: 0;
}

.btn1.btnDef {
    background-color: var(--box);
    color: var(--textColor);
    border-color: var(--boxHead);
}

.btn2.btnDef {
    border-color: var(--boxHead);
    background-color: transparent;
    color: var(--textColor);
}

.btnDef:hover {
    background-color: var(--boxHead);
    color: var(--boxHeadText);
    border-color: var(--boxHead);
}

.btn1.btnBlue {
    background-color: var(--bgBlue);
    color: var(--textLight);
    border-color: var(--bgBlue);
}

.btn2.btnBlue {
    border-color: var(--bgBlueHover);
    background-color: transparent;
    color: var(--bgBlueHover);
}

.btnBlue:hover {
    background-color: var(--bgBlueHover);
    color: var(--textLight);
    border-color: var(--bgBlueHover);
}

.btn1.btnRed {
    background-color: var(--bgRed);
    color: var(--textLight);
    border-color: var(--bgRed);
}

.btn2.btnRed {
    border-color: var(--bgRedHover);
    background-color: transparent;
    color: var(--bgRedHover);
}

.btnRed:hover {
    background-color: var(--bgRedHover);
    color: var(--textLight);
    border-color: var(--bgRedHover);
}

.btn1.btnGreen {
    background-color: var(--bgGreen);
    color: var(--textLight);
    border-color: var(--bgGreen);
}

.btn2.btnGreen {
    border-color: var(--bgGreenHover);
    background-color: transparent;
    color: var(--bgGreenHover);
}

.btnGreen:hover {
    background-color: var(--bgGreenHover);
    color: var(--textLight);
    border-color: var(--bgGreenHover);
}

.btn1.btnYellow {
    background-color: var(--bgYellow);
    color: var(--textDark);
    border-color: var(--bgYellow);
}

.btn2.btnYellow {
    border-color: var(--bgYellowHover);
    background-color: transparent;
    color: var(--bgYellowHover);
}

.btnYellow:hover {
    background-color: var(--bgYellowHover);
    color: var(--textDark);
    border-color: var(--bgYellowHover);
}

.btn1.btnDark {
    background-color: var(--bgDark);
    color: var(--textLight);
    border-color: var(--bgDark);
}

.btn2.btnDark {
    border: 1px solid var(--bgDarkHover);
    background-color: transparent;
    /* color: var(--bgDarkHover); */
    color: var(--rvColor);
}

.btnDark:hover {
    background-color: var(--bgDarkHover);
    color: var(--textLight);
    border-color: var(--bgDarkHover);
}

.btn0.btnBlue {
    background-color: var(--btnBlue);
    color: var(--btnBlueText);
}

.btn0.btnBlue:hover {
    background-color: var(--btnBlueHover);
    color: var(--btnBlueText);
}

.btn0.btnRed {
    background-color: var(--btnRed);
    color: var(--btnRedText);
}

.btn0.btnRed:hover {
    background-color: var(--btnRedHover);
    color: var(--btnRedText);
}

.btn0.btnGreen {
    background-color: var(--btnGreen);
    color: var(--btnGreenText);
}

.btn0.btnGreen:hover {
    background-color: var(--btnGreenHover);
    color: var(--btnGreenText);
}

.btn0.btnYellow {
    background-color: var(--btnYellow);
    color: var(--btnYellowText);
}

.btn0.btnYellow:hover {
    background-color: var(--btnYellowHover);
    color: var(--btnYellowText);
}

.btn0.btnDark {
    background-color: var(--btnDark);
    color: var(--btnDarkText);
}

.btn0.btnDark:hover {
    background-color: var(--btnDarkHover);
    color: var(--btnDarkText);
}

.btn0.btnLight {
    background-color: var(--btnLight);
    color: var(--btnLightText);
}

.btn0.btnLight:hover {
    background-color: var(--btnLightHover);
    color: var(--btnLightText);
}

.btn0.deactive,
.btn2.deactive,
.btn1.deactive,
.submitBtn.deactive {
    pointer-events: none;
    position: relative;
    border: none;
    overflow: hidden;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.btn0.deactive::before,
.btn2.deactive::before,
.btn1.deactive::before,
.submitBtn.deactive::before {
    content: "";
    position: absolute;
    background-color: var(--box);
    opacity: .75;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

@keyframes loader {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.waitingBox.waiting {
    position: relative;
    pointer-events: none;
}

.waitingBox.waiting::before {
    content: "";
    position: absolute;
    background-color: var(--box);
    opacity: .75;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    border-radius: var(--radius);
}

.waitingBox.waiting::after {
    content: "";
    position: absolute;
    width: 2rem;
    height: 2rem;
    left: calc(50% - 1rem);
    top: calc(50% - 1rem);
    border: .1em solid var(--textColor);
    border-left-color: transparent;
    border-radius: 50%;
    -webkit-animation: .75s linear infinite loader;
    animation: .75s linear infinite loader;
}

#overlay {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 1030;
    cursor: pointer;
}

html,
body {
    /* font-family: 'IRANSans', 'vazir', 'sahel'; */
    font-family: 'vazir', 'sahel';
    font-size: 13px;
    background-color: var(--bgColor);
    color: var(--textColor);
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.dualMenu #main {
    min-height: calc(100vh - 200px);
}

/* .sideMenu #main {
    min-height: calc(100vh - 50px);
} */

#topArea {
    background-color: var(--bgFooter);
}

#topArea ul {
    display: flex;
    gap: 4px;
    align-items: center;
    height: 40px;
}

#topArea ul li {
    margin-left: 7px;
}

#topArea ul li>a {
    color: var(--menuText);
    font-size: 1.2rem;
    padding-left: 7px;
}

#topArea ul li a i {
    margin-left: 4px;
    font-size: 1.4rem;
    color: var(--mainColor);
    border-bottom: 2px solid var(--mainColor);
}

#topArea .logo img {
    height: 40px;
}

@media (max-width: 767px) {
    #topArea ul {
        justify-content: center;
    }

    #topArea .logo img {
        height: 80px;
        margin-top: 5px;
    }

    #topArea .siteDescription {
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 20px;
        color: var(--subText);
    }
}

/* stickyNav */
#stickyNav {
    transition: all .3s ease;
    padding: 0;
    background-color: var(--box);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

#stickyNav.top0 {
    transition: all .3s ease;
    padding: 0;
}

#stickyNav .navBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 50px;
}

#stickyNav .logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 40px;
    text-align: center;
}

#stickyNav .responsiveBtns {
    display: flex;
    gap: 8px;
}

#stickyNav .responsiveBtns span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    cursor: pointer;
    border: 1px solid var(--iconBorder);
    padding: 2px 8px;
    color: var(--menuText);
    border-radius: 4px;
}

#stickyNav .responsiveBtns i {
    font-size: 1.8rem;
    color: var(--close);
}

#stickyNav .responsiveBtns .menuBoxToggler,
#stickyNav .responsiveBtns .searchFilterToggler {
    display: none;
}

#stickyNav #menuBox {
    z-index: 1040;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

@media only screen and (min-width: 992px) {
    #stickyNav .responsiveBtns .menuBoxToggler {
        display: inline-flex;
    }

    .dualMenu #stickyNav #menuBox~.responsiveBtns .menuBoxToggler {
        display: none;
    }

    .dualMenu #stickyNav #menuBox .menuBoxHead {
        display: none;
    }

    .dualMenu #stickyNav #menuBox ul li {
        position: relative;
    }

    .dualMenu #stickyNav #menuBox>ul {
        font-size: 0;
        height: 50px;
    }

    .dualMenu #stickyNav #menuBox>ul>li {
        display: inline-block;
        font-size: 13px;
        font-weight: bold;
        border-right: 1px solid var(--menuSep1);
        border-left: 1px solid var(--menuSep2);
    }

    #stickyNav #menuBox ul li a {
        display: block;
        padding: 10px;
        position: relative;
    }

    .dualMenu #stickyNav #menuBox>ul>li>a {
        padding: 14px 20px;
        color: var(--menuText);
    }

    .dualMenu #stickyNav #menuBox>ul>li:hover>a {
        border-bottom: 2px solid var(--mainColor);
    }

    .dualMenu #stickyNav #menuBox>ul>li:has(ul):hover>a {
        border-bottom: none;
    }

    .dualMenu #stickyNav #menuBox ul li a i {
        /* color: var(--menuIcon);
        margin-left: 4px;
        border-radius: var(--radius);
        padding: 4px; */
        display: none;
    }

    /* .dualMenu #stickyNav #menuBox>ul>li>a>i {
        border: 2px solid var(--boxHead);
        padding: 0 0 0 8px;
        font-size: 16px;
        margin-left: 8px;
    } */

    .dualMenu #stickyNav #menuBox ul li ul {
        position: absolute;
        background-color: var(--menuSub);
        border-radius: var(--radius);
        opacity: 0;
        visibility: hidden;
        width: 190px;
        /* z-index: 10; */
        right: 20px;
        top: 0;
        transition: all .3s ease;
    }

    .dualMenu #stickyNav #menuBox ul li ul li ul {
        right: calc(100% + 20px);
        top: 0;
    }

    .dualMenu #stickyNav #menuBox>ul>li>ul {
        top: 100%;
    }

    .dualMenu #stickyNav #menuBox ul li:hover>ul {
        opacity: 1;
        visibility: visible;
        transition: all .3s ease;
        right: 0;
    }

    .dualMenu #stickyNav #menuBox ul li ul li:hover>ul {
        right: 100%;
    }

    .dualMenu #stickyNav #menuBox ul li ul li {
        padding: 5px 5px 0 5px;
    }

    .dualMenu #stickyNav #menuBox ul li ul li:last-child {
        padding-bottom: 5px;
    }

    .dualMenu #stickyNav #menuBox ul li ul li:last-child {
        border-bottom: 0;
    }

    .dualMenu #stickyNav #menuBox ul li ul li a {
        display: block;
        padding: 12px 10px;
        background-color: var(--menuItem);
        color: var(--menuSubText);
        border-radius: var(--radius);
        -webkit-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
    }

    .dualMenu #stickyNav #menuBox ul li ul li a:hover {
        /* color: #00b3e9; */
        padding-right: 12px;
        -webkit-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
    }

    .dualMenu #stickyNav #menuBox .toggleBox,
    #stickyNav .toggleBoxShow {
        display: none;
    }
}

/* Left Menu */
#leftMenuItems ul li a {
    display: inline-flex;
    align-items: center;
    color: var(--menuText);
    padding: 15px 10px;
    position: relative;
    transition: all .3s ease;
}

#leftMenuItems ul li a i {
    color: var(--menuIcon);
    margin-left: 3px;
    font-size: 18px;
}

#leftMenuItems>ul>li>a i {
    background-color: var(--menuIconBg);
    border-radius: var(--radius);
    padding: 7px 10px;
    transition: all .3s ease;
}

#leftMenuItems>ul>li>a i:hover {
    transition: all .3s ease;
}

#leftMenuItems ul li.basket {
    position: relative;
}

#leftMenuItems ul li.basket span {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    top: 5px;
    right: -10px;
    background-color: var(--mainColor);
    color: var(--textLight);
    z-index: 2;
}

/*  */
#leftMenuItems>ul {
    display: flex;
    align-items: center;
}

#leftMenuItems>ul>li {
    display: inline;
    position: relative;
    margin-right: 10px;
    transition: all .3s ease;
}

#leftMenuItems>ul>li>a {
    display: flex;
    padding: 8px 4px;
}

#leftMenuItems>ul>li>a>i {
    color: var(--menuIcon);
}

#leftMenuItems>ul>li:hover {
    transition: all .3s ease;
}

/*  */

#leftMenuItems ul li ul {
    position: absolute;
    background-color: var(--menuSub);
    opacity: 0;
    visibility: hidden;
    width: 190px;
    left: 20px;
    top: 100%;
    border-radius: var(--radius);
    transition: all .3s ease;
    max-height: calc(100vh - 60px);
    overflow: auto;
}

/* #leftMenuItems ul li:hover>ul { */
#leftMenuItems ul li.active>ul {
    opacity: 1;
    visibility: visible;
    transition: all .3s ease;
    left: 0;
}

#leftMenuItems ul li ul li {
    display: flex;
    padding: 5px 5px 0 5px;
}

#leftMenuItems ul li ul li:last-child {
    padding-bottom: 5px;
}

#leftMenuItems ul li ul li a {
    display: flex;
    width: 100%;
    background-color: var(--menuItem);
    color: var(--menuSubText);
    padding: 8px;
    border-radius: var(--radius);
}

#leftMenuItems ul li ul li a:hover {
    padding-right: 10px;
    transition: all .3s ease;
}

#leftMenuItems ul li ul li a i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background-color: var(--menuIconBg);
    border-radius: var(--radius);
    margin-left: 10px;
}

/* Left Menu End */

@media (min-width: 768px) {
    #searchFilter .searchFilterHead {
        display: none;
    }
}

@media only screen and (max-width: 991px) {
    #stickyNav .responsiveBtns .menuBoxToggler {
        display: inline-flex;
    }

    .searchFilterToggler.show {
        display: inline-flex !important;
    }

    #searchFilter {
        position: fixed;
        width: 270px;
        height: 100vh;
        display: block;
        background: var(--bgColor);
        top: 0;
        right: -270px;
        bottom: 0;
        overflow-y: auto;
        z-index: 1040;
        -webkit-box-shadow: 0px 8px 17px rgba(0, 0, 0, 0.2);
        box-shadow: 0px 8px 17px rgba(0, 0, 0, 0.2);
        -webkit-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
    }

    #searchFilter.show {
        right: 0;
    }

    #searchFilter .searchFilterHead {
        height: 50px;
        width: 100%;
        position: relative;
        /* direction: ltr; */
        padding: 20px;
        background-color: var(--boxHead);
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    #searchFilter .searchFilterBody {
        max-height: calc(100% - 50px);
        width: 100%;
        overflow-y: auto;
        padding: 20px;
    }

    #searchFilter .searchFilterHead .searchAndCloseFilter {
        display: inline-flex;
        align-items: center;
        padding: 10px 50px;
        background-color: var(--btnBlue);
        color: var(--btnText);
        cursor: pointer;
        border-radius: var(--radius);
    }

    #stickyNav #menuBox {
        position: fixed;
        top: 0;
        right: -230px;
        width: 230px;
        height: 100vh;
        overflow-y: auto;
        /* padding: 5px; */
        z-index: 1040;
        background-color: var(--menu1);
    }

    #stickyNav #menuBox.show {
        right: 0;
    }

    #stickyNav #menuBox .menuBoxHead {
        height: 85px;
        width: 100%;
        position: relative;
        direction: ltr;
    }

    #searchFilter .searchFilterHead .close,
    #stickyNav #menuBox .menuBoxHead .close {
        position: relative;
        cursor: pointer;
        width: 23px;
        height: 25px;
    }

    #searchFilter .searchFilterHead .close::before,
    #searchFilter .searchFilterHead .close::after,
    #stickyNav #menuBox .menuBoxHead .close::before,
    #stickyNav #menuBox .menuBoxHead .close::after {
        content: "";
        width: 2px;
        height: 25px;
        position: absolute;
        background-color: var(--close);
        top: 3px;
        left: 15px;
        transform: rotate(45deg);
    }

    #searchFilter .searchFilterHead .close::after,
    #stickyNav #menuBox .menuBoxHead .close::after {
        transform: rotate(-45deg);
    }

    #stickyNav #menuBox .menuBoxHead .logo {
        display: flex;
        align-items: center;
        width: 100%;
        height: 55px;
        /* border-bottom: 2px solid var(--border); */
    }

    #stickyNav #menuBox .menuBoxHead .logo img {
        height: 45px;
    }

    #stickyNav #menuBox .menuBoxBody {
        max-height: calc(100% - 85px);
        width: 100%;
        overflow-y: auto;
    }

    #stickyNav #menuBox ul li {
        position: relative;
    }

    #stickyNav #menuBox ul li a {
        position: relative;
        display: flex;
        align-items: center;
        color: var(--menuTextResponsive);
        padding: 15px 10px;
        -webkit-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
    }

    #stickyNav #menuBox ul li a.active {
        color: var(--textBlue);
    }

    #stickyNav #menuBox ul li a i {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 35px;
        height: 30px;
        background-color: var(--menuIconBg);
        border-radius: var(--radius);
        color: var(--menuIcon);
        margin-left: 10px;
        font-size: 1.5rem;
    }

    #stickyNav #menuBox ul li a:hover {
        color: var(--textBlue);
        /* padding-right: 11px; */
        -webkit-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
    }

    #stickyNav #menuBox ul li ul {
        background-color: var(--menu2);
    }

    #stickyNav #menuBox ul li ul li {
        border-color: var(--menu3);
    }

    #stickyNav #menuBox ul li ul li ul {
        background-color: var(--menu3);
    }

    #stickyNav #menuBox ul li ul li ul li {
        border-color: var(--menu4);
    }

    #stickyNav #menuBox ul li ul li ul li ul {
        background-color: var(--menu4);
    }

    #stickyNav #menuBox ul li ul li ul li ul li {
        border-color: var(--menu5);
    }

    #stickyNav #menuBox ul li ul li ul li ul li ul {
        background-color: var(--menu5);
    }

    #stickyNav #menuBox ul li ul li ul li ul li ul li {
        border-color: var(--menu6);
    }

    #stickyNav #menuBox ul li {
        border-bottom: 1px solid var(--menu2);
    }

    #stickyNav #menuBox ul li ul li {
        border-bottom: none;
    }

    #stickyNav #menuBox ul li ul li a {
        padding-right: 55px;
    }

    /* #stickyNav #menuBox ul li ul li a:hover {
        padding-right: 36px;
    } */

    #stickyNav #menuBox ul li:last-child {
        border-bottom: 0;
    }

    #stickyNav #menuBox ul li ul {
        display: none;
    }

    #stickyNav #menuBox ul li .caretIcon {
        position: absolute;
        text-align: center;
        width: 30px;
        height: 30px;
        line-height: 35px;
        left: 5px;
        cursor: pointer;
        z-index: 1050;
        background-color: var(--menu5);
        border-radius: 1px;
        top: 10px;
        border-radius: var(--radius);
    }

    #stickyNav #menuBox ul li .caretIcon:hover {
        background-color: var(--menu6);
    }

    #stickyNav #menuBox ul li .caretIcon:before {
        content: "";
        position: absolute;
        top: 4px;
        left: 8px;
        width: 14px;
        height: 14px;
        border: 2px solid #b6b4b4;
        border-left: 0;
        border-top: 0;
        transform: rotate(45deg);
        -webkit-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
    }

    #stickyNav #menuBox ul li .caretIcon.active:before {
        transform: rotate(225deg);
        top: 12px;
        -webkit-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
    }

    #stickyNav #menuBox .hideToggle {
        display: block;
        text-align: center;
        width: 34px;
        height: 34px;
        margin-right: auto;
        border-radius: 1px;
        cursor: pointer;
        position: relative;
    }
}


/* Admin Mode */
.sideMenu #stickyNav {
    background-image: linear-gradient(180deg, var(--menu1), 30%, var(--menu2) 70%, var(--menu1) 100%);
}

@media only screen and (min-width: 992px) {
    .sideMenu.pushLeft #stickyNav .responsiveBtns .menuBoxToggler {
        display: none;
    }

    .sideMenu #stickyNav #menuBox {
        position: fixed;
        top: 0;
        right: -230px;
        width: 230px;
        height: 100vh;
        overflow-y: auto;
        z-index: 1040;
        background-color: var(--menu1);
    }

    .sideMenu.pushLeft {
        margin-right: 230px;
    }

    .sideMenu.pushLeft #stickyNav #menuBox {
        right: 0;
    }

    .sideMenu #stickyNav #menuBox .menuBoxHead {
        height: 85px;
        width: 100%;
        position: relative;
        direction: ltr;
    }

    .sideMenu #stickyNav #menuBox .menuBoxHead .close {
        position: relative;
        cursor: pointer;
        width: 23px;
        height: 30px;
    }

    .sideMenu #stickyNav #menuBox .menuBoxHead .close::before,
    .sideMenu #stickyNav #menuBox .menuBoxHead .close::after {
        content: "";
        width: 2px;
        height: 25px;
        position: absolute;
        background-color: var(--close);
        top: 3px;
        left: 15px;
        transform: rotate(45deg);
    }

    .sideMenu #stickyNav #menuBox .menuBoxHead .close::after {
        transform: rotate(-45deg);
    }

    .sideMenu #stickyNav #menuBox .menuBoxHead .logo {
        display: flex;
        align-items: center;
        width: 100%;
        height: 55px;
    }

    .sideMenu #stickyNav #menuBox .menuBoxHead .logo img {
        height: 45px;
    }

    .sideMenu #stickyNav #menuBox .menuBoxBody {
        max-height: calc(100% - 85px);
        width: 100%;
        overflow-y: auto;
    }

    .sideMenu #stickyNav #menuBox ul li {
        position: relative;
    }

    .sideMenu #stickyNav #menuBox ul li a {
        position: relative;
        display: flex;
        align-items: center;
        color: var(--menuTextResponsive);
        padding: 15px 10px;
        -webkit-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
    }

    .sideMenu #stickyNav #menuBox ul li a i {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 35px;
        height: 30px;
        background-color: var(--menuIconBg);
        border-radius: var(--radius);
        color: var(--menuIcon);
        margin-left: 10px;
        font-size: 1.5rem;
    }

    .sideMenu #stickyNav #menuBox ul li a.active {
        /* background-image: linear-gradient(to left, transparent, #252b2c); */
        color: var(--textBlue);
    }

    .sideMenu #stickyNav #menuBox ul li a:hover {
        color: var(--textBlue2);
        /* padding-right: 11px; */
        -webkit-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
    }

    .sideMenu #stickyNav #menuBox ul li ul {
        background-color: var(--menu2);
    }

    .sideMenu #stickyNav #menuBox ul li ul li {
        border-color: var(--menu3);
    }

    .sideMenu #stickyNav #menuBox ul li ul li ul {
        background-color: var(--menu3);
    }

    .sideMenu #stickyNav #menuBox ul li ul li ul li {
        border-color: var(--menu4);
    }

    .sideMenu #stickyNav #menuBox ul li ul li ul li ul {
        background-color: var(--menu4);
    }

    .sideMenu #stickyNav #menuBox ul li ul li ul li ul li {
        border-color: var(--menu5);
    }

    .sideMenu #stickyNav #menuBox ul li ul li ul li ul li ul {
        background-color: var(--menu5);
    }

    .sideMenu #stickyNav #menuBox ul li ul li ul li ul li ul li {
        border-color: var(--menu6);
    }

    .sideMenu #stickyNav #menuBox ul li {
        border-bottom: 1px solid var(--menu2);
    }

    .sideMenu #stickyNav #menuBox ul li ul li {
        border-bottom: none;
    }

    .sideMenu #stickyNav #menuBox ul li ul li a {
        padding-right: 50px;
    }

    /* .sideMenu #stickyNav #menuBox ul li ul li a:hover {
        padding-right: 41px;
    } */

    .sideMenu #stickyNav #menuBox ul li:last-child {
        border-bottom: 0;
    }

    .sideMenu #stickyNav #menuBox ul li ul {
        display: none;
        /* padding-right: 5px; */
    }

    .sideMenu #stickyNav #menuBox ul li .caretIcon {
        position: absolute;
        text-align: center;
        width: 30px;
        height: 30px;
        line-height: 35px;
        left: 5px;
        cursor: pointer;
        z-index: 1050;
        background-color: rgba(0, 0, 0, 0.566);
        border-radius: 1px;
        top: 10px;
    }

    .sideMenu #stickyNav #menuBox ul li .caretIcon:hover {
        background-color: rgba(0, 0, 0, 0.7);
    }

    .sideMenu #stickyNav #menuBox ul li .caretIcon:before {
        content: "";
        position: absolute;
        top: 4px;
        left: 8px;
        width: 14px;
        height: 14px;
        border: 2px solid #b6b4b4;
        border-left: 0;
        border-top: 0;
        transform: rotate(45deg);
        -webkit-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
    }

    #stickyNav #menuBox ul li .caretIcon.active:before {
        transform: rotate(225deg);
        top: 12px;
        -webkit-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
    }

    .sideMenu #stickyNav #menuBox .hideToggle {
        display: block;
        text-align: center;
        width: 34px;
        height: 34px;
        margin-right: auto;
        border-radius: 1px;
        cursor: pointer;
        position: relative;
    }
}

/* stickyNav End */

/* Form */
.formBox *:focus {
    outline: 0;
    box-shadow: none;
}

.clearText input,
.formBox input[type="text"],
.formBox input[type="email"],
.formBox input[type="number"],
.formBox input[type="tel"],
.formBox input[type="password"],
.formBox select,
.formBox textarea {
    width: 100%;
    height: 40px;
    padding: 10px;
    background-color: var(--input);
    color: var(--inputText);
    border-radius: var(--radius);
    border: 1px solid var(--inputBorder);
    box-shadow: none;
}

.clearText input:focus,
.formBox input[type="text"]:focus,
.formBox input[type="email"]:focus,
.formBox input[type="number"]:focus,
.formBox input[type="tel"]:focus,
.formBox input[type="password"]:focus,
.formBox select:focus,
.formBox textarea:focus {
    border-color: var(--inputFocus);
}

.formBox select {
    /* height: 40px; */
    padding: 0 10px;
}

.formBox textarea {
    height: 150px;
    resize: vertical;
}

.formBox select option {
    color: var(--option);
}

.formBox label {
    color: var(--label);
}

.submitBtn,
.formBox button,
.formBox button[type="submit"] {
    /* width: 100%; */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--btnColor);
    height: 40px;
    padding: 10px 25px;
    border: 0;
    outline: 0;
    color: var(--btnText);
    text-align: center;
    cursor: pointer;
    border-radius: var(--radius);
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.submitBtn:hover,
.formBox button:hover,
.formBox button[type="submit"]:hover {
    background-color: var(--btnHover);
    color: var(--btnText);
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.submitBtn.w100,
.formBox button.w100,
.formBox button[type="submit"].w100 {
    width: 100%;
}

.submitBtn i,
.formBox button i,
.formBox button[type="submit"] i {
    margin-left: 10px;
}

.ajaxErr,
.ajaxErrBtn {
    color: var(--textRed);
}

.messageBox p:last-child {
    margin-bottom: 0;
}

.btn0.waiting,
.btn1.waiting,
.btn2.waiting,
.submitBtn.waiting {
    pointer-events: none;
    align-items: center;
    position: relative;
    background-color: #00000070;
    border-color: #00000070;
    padding-right: 8px;
    padding-left: 22px;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.btn0.waiting,
.btn1.waiting,
.btn2.waiting,
.submitBtn.waiting {
    padding-right: 15px;
    padding-left: 35px;
}

.btnSm.waiting {
    padding-right: 5px;
    padding-left: 15px;
}

.btn0.waiting::before,
.btn1.waiting::before,
.btn2.waiting::before,
.submitBtn.waiting::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #00000030;
    border-radius: var(--radius);
    left: 0;
}

.btn0.waiting::after,
.btn1.waiting::after,
.btn2.waiting::after,
.submitBtn.waiting::after {
    content: "";
    position: absolute;
    width: 1.5rem;
    height: 1.5rem;
    left: 10px;
    border: .1em solid #ccc;
    border-left-color: transparent;
    border-radius: 50%;
    -webkit-animation: .75s linear infinite loader;
    animation: .75s linear infinite loader;
}

.btnSm.waiting::after {
    left: 5px;
    width: 10px;
    height: 10px;
}

/* Loader */


.loader {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    vertical-align: text-bottom;
    /* border: .25em solid currentColor; */
    border: .25em solid var(--inputBorder);
    border-left-color: transparent;
    border-radius: 50%;
    -webkit-animation: .75s linear infinite loader;
    animation: .75s linear infinite loader;
}

.floatBox {
    position: relative;
}

.floatBox label {
    position: absolute;
    pointer-events: none;
    top: 15px;
    right: 15px;
    color: var(--label);
    -webkit-transition: all 0.1s ease;
    -o-transition: all 0.1s ease;
    transition: all 0.1s ease;
}

.floatBox input,
.floatBox textarea,
.floatBox select {
    width: 100%;
    padding-top: 25px !important;
    padding-bottom: 5px !important;
    padding-right: 20px !important;
    padding-left: 10px !important;
    font-size: 14px;
    background-color: var(--input);
    color: var(--inputText);
    border-radius: var(--radius);
    border: 1px solid var(--inputBorder);
    box-shadow: none;
    height: 52px !important;
}

.floatBox select {
    padding-top: 23px;
    height: 52px;
}

.floatBox input:focus~label,
.floatBox input:not(:placeholder-shown)~label,
.floatBox textarea:focus~label,
.floatBox textarea:not(:placeholder-shown)~label,
.floatBox select~label {
    font-size: 11px;
    top: 5px;
    right: 10px;
    -webkit-transition: all 0.1s ease;
    -o-transition: all 0.1s ease;
    transition: all 0.1s ease;
}

.floatBox textarea {
    height: 150px !important;
    resize: vertical;
}

.floatBox input:focus,
.floatBox textarea:focus,
.floatBox select:focus {
    border-color: var(--inputFocus);
}

.clearText {
    position: relative;
}

.clearText.sm input {
    padding: 5px;
    height: auto;
}

.clearText.sm input:not(:placeholder-shown),
.clearText input {
    padding-left: 30px;
}

.clearText i {
    position: absolute;
    display: block;
    width: 18px;
    height: 18px;
    border: 2px solid var(--label);
    border-radius: 22px;
    top: 11px;
    left: 7px;
    display: none;
    cursor: pointer;
}

.clearText.sm i {
    top: 7px;
}

.clearText input.ltr~i {
    right: 7px;
}

.clearText input.ltr {
    padding-left: 10px;
    padding-right: 30px;
}

.clearText i::after,
.clearText i::before {
    content: "";
    display: block;
    position: absolute;
    width: 10px;
    height: 2px;
    background: var(--label);
    border-radius: 5px;
    top: 6px;
    left: 2px;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.clearText i::after {
    width: 2px;
    height: 10px;
    top: 2px;
    left: 6px;
}

.clearText.floatBox i {
    top: 25px;
}

.clearText input:not(:placeholder-shown)~i {
    display: block;
}

.checkBox,
.radioBox {
    display: block;
    position: relative;
    padding-right: 25px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 100%;
    min-height: 20px;
}

.checkBox input,
.radioBox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkBox .checkmark,
.radioBox .checkmark {
    position: absolute;
    top: 0;
    right: 0;
    height: 20px;
    width: 20px;
    background-color: var(--input);
    border: 1px solid var(--inputBorder);
    box-shadow: none;
    border-radius: var(--radius);
    transition: all .3s ease;
}

.radioBox .checkmark {
    border-radius: 50%;
}

.checkBox:hover input~.checkmark,
.radioBox:hover input~.checkmark {
    background-color: var(--checked);
    transition: all .3s ease;
    cursor: pointer;
}

.checkBox input:checked~.checkmark,
.radioBox input:checked~.checkmark {
    background-color: var(--checked);
}

.checkBox .checkmark:after,
.radioBox .checkmark:after,
.radioBox .checkmark:before {
    content: "";
    position: absolute;
    display: none;
}

.checkBox input:checked~.checkmark:after,
.radioBox input:checked~.checkmark:after,
.radioBox input:checked~.checkmark:before {
    display: block;
}

.checkBox .checkmark:after {
    right: 7px;
    top: 2px;
    width: 5px;
    height: 12px;
    border: solid var(--input);
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.radioBox .checkmark:after {
    right: 6px;
    top: 6px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--input);
}

.radioBtn {
    display: inline-flex;
    position: relative;
    text-align: center;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 100%;
}

.radioBtn input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.radioBtn .checkmark {
    display: block;
    width: 100%;
    padding: 10px;
    background-color: var(--input);
    color: var(--inputText);
    border-radius: var(--radius);
    border: 1px solid var(--inputBorder);

}

.radioBtn input:checked~.checkmark {
    background-color: var(--checked);
    color: var(--checkedText);
}

.formGroup {
    display: inline-flex;
}

.formGroup .label {
    /* padding: 5px 10px; */
    height: 40px;
    padding: 10px;
    background-color: var(--boxHead);
    color: var(--textColor);
    border: 1px solid var(--inputBorder);
    border-left: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 var(--radius) var(--radius) 0;
}

.formGroup.w4060 {
    width: 100%;
}

.formGroup.w4060 label {
    width: 40%;
}

.formGroup.w4060 select {
    width: 60%;
}

.formGroup select {
    height: 40px;
    padding: 10px;
    background-color: var(--input);
    color: var(--inputText);
    border: 1px solid var(--inputBorder);
    border-radius: var(--radius) 0 0 var(--radius);
}

.formGroup.sm label,
.formGroup.sm select {
    padding: 0 10px;
    height: 30px;
}

.selectBox {
    width: 100%;
    border-radius: var(--radius);
    position: relative;
    /* background-color: var(--input); */
}

.selectBox.float span.label {
    position: absolute;
    top: 15px;
    right: 10px;
    color: var(--label);
    -webkit-transition: all 0.1s ease;
    -o-transition: all 0.1s ease;
    transition: all 0.1s ease;
    z-index: 3;
    pointer-events: none;
}

.selectBox.float span.label.floated {
    position: absolute;
    font-size: 11px;
    top: 5px;
    right: 10px;
    -webkit-transition: all 0.1s ease;
    -o-transition: all 0.1s ease;
    transition: all 0.1s ease;
}

.selectBox .selectBoxHead {
    display: flex;
    width: 100%;
    height: 40px;
    padding: 10px 10px 10px 25px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    position: relative;
    z-index: 2;
    background-color: var(--input);
    color: var(--inputText);
    border: 1px solid var(--inputBorder);
    border-radius: var(--radius);
}

.selectBox .selectBoxHead.active {
    border-radius: var(--radius) var(--radius) 0 0;
    border-color: var(--inputFocus);
}

.selectBox.float .selectBoxHead {
    padding-top: 25px;
    height: 52px;
}

.selectBox .selectBoxHead::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 13px;
    border: solid var(--menuIcon);
    border-width: 0 2px 2px 0;
    padding: 3px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

.selectBox.float .selectBoxHead::before {
    top: 18px;
}

.selectBox .uncheckAll {
    position: relative;
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid var(--menuIcon);
    border-radius: 22px;
    cursor: pointer;
}

.selectBox .uncheckAll::after,
.selectBox .uncheckAll::before {
    content: "";
    display: block;
    position: absolute;
    width: 10px;
    height: 2px;
    background: var(--menuIcon);
    border-radius: 5px;
    top: 6px;
    left: 2px;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.selectBox .uncheckAll::after {
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.selectBox .selectBoxBody {
    position: absolute;
    width: 100%;
    top: 100%;
    right: 0;
    display: none;
    z-index: 10;
    background-color: var(--box);
    border: 1px solid var(--inputBorder);
    border-top: none;
    border-color: var(--inputFocus);
}

.selectBox .selectBoxBody .clearText {
    margin: 10px;
}

.selectBox .selectBoxBody .list {
    max-height: 300px;
    overflow: auto;
}

.selectBox .selectBoxBody .list label {
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 100%;
}

.selectBox .selectBoxBody .list label input {
    position: absolute;
    opacity: 0;
    height: 0;
    width: 0;
}

.selectBox .selectBoxBody .list label .checkmark {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 10px;
    color: var(--inputText);
    border-bottom: 1px solid var(--selectSep);
}

.selectBox .selectBoxBody .list label input:checked~.checkmark {
    background-color: var(--checked);
    color: var(--checkedText);
    border-bottom: none;
}

.selectBox .selectBoxBody .list label .checkmark i {
    margin-left: 5px;
}

.dataTableControl {
    display: flex;
    padding: 10px 15px;
    background-color: var(--btnColor);
    justify-content: space-between;
    border-radius: var(--radius) var(--radius) 0 0;
}

.dataTableControl .clearText {
    width: 50%;
}

.dataTableBox .pagination {
    padding: 10px 0;
}

/* Form End */
/* Pagination */
.pagination {
    display: flex;
}

.pagination ul li {
    display: inline-block;
    margin-bottom: 4px;
    padding: 5px 15px;
    background-color: var(--btnColor);
    color: var(--btnText);
    border-radius: var(--radius);
    cursor: pointer;
}

.pagination ul li:hover:not(.active):not(.dots) {
    background-color: var(--btnHover);
}

.pagination ul li.active,
.pagination ul li.dots {
    background-color: var(--boxHead);
    color: var(--boxHeadText);
    cursor: default;
}

.pagination ul li.dots {
    background-color: transparent;
}

.dataTableBox .pagination ul li {
    margin-left: 4px;
}

/* Pagination End */
/* Tooltip */
.tooltipBox {
    position: relative;
}

.tooltipBox .tooltipText {
    position: absolute;
    bottom: 100%;
    background-color: var(--rvColor);
    color: var(--rvText);
    padding: 10px;
    border-radius: var(--radius);
    display: none;
    z-index: 1040;
}

.tooltipBox:hover .tooltipText {
    transition: all 0.5s;
    display: block;
}

.tooltipBox .tooltipText::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    bottom: -5px;
    left: calc(50% - 5px);
    background-color: var(--rvColor);
    transform: rotate(-45deg);
}

/* Tooltip End */

/* Accordion */
.box,
.accordion {
    background-color: var(--box);
    color: var(--boxText);
    border-radius: var(--radius);
    /* box-shadow: var(--shadow); */
}

.box .boxHead,
.accordion .accordionHead {
    background-color: var(--boxHead);
    /* border: 1px solid var(--boxBorder); s */
    /* border-bottom: none; */
    /* border: none; */
    color: var(--boxHeadText);
    font-size: 1.1rem;
    padding: 16px;
    width: 100%;
    outline: none;
    transition: 0.4s;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: var(--radius) var(--radius) 0 0;
}

.accordion .accordionHead {
    cursor: pointer;
    border-radius: var(--radius);
    /* me */
}

.accordion .accordionHead.active {
    border-radius: var(--radius) var(--radius) 0 0;
    /* me */
}

.accordion .accordionHead:after {
    /* content: '\02795'; */
    content: '+';
    font-size: 13px;
    color: var(--boxHeadText);
    font-size: 18px;
    letter-spacing: -1px;
}

.accordion .accordionHead.active:after {
    /* content: "\2796"; */
    content: "--";
}

.box .boxBody {
    /* border: 1px solid var(--boxBorder); s */
    padding: 16px;
    border-radius: var(--radius);
}

.box .boxHead~.boxBody {
    border-top: none;
    border-radius: 0 0 var(--radius) var(--radius);
}

.accordion .accordionBody {
    height: 0;
    overflow: hidden;
    padding: 0 12px;
    background-color: var(--box);
    transition: all 0.2s ease-out;
    /* border: 1px solid var(--boxBorder); s */
    border-top: none;
    border-bottom: none;
    border-radius: 0 0 var(--radius) var(--radius);
    /* me */
}

.accordion .accordionBody.show {
    height: auto;
    overflow: initial;
    padding: 18px 12px;
    /* border-bottom: 1px solid var(--boxBorder); s */
    transition: all 0.2s ease-out;
}

.filterCheck .clearText input {
    background-color: transparent;
    margin-bottom: 18px;
}

.filterCheck .list {
    max-height: 200px;
    overflow: auto;
}

.filterFirstBox .box,
.filterFirstBox .boxBody {
    border-radius: 0 !important;
    background-color: var(--box);
}

.filterAccordion .accordion,
.filterAccordion .accordionHead,
.filterAccordion .accordionHead.active,
.filterAccordion .accordionBody,
.filterAccordion .accordionBody.show {
    border-radius: 0;
    border-top: none;
}

.filterAccordion .accordionHead.active {
    border-bottom: none;
}

/* Accordion End */

#groupOperationBox {
    position: fixed;
    width: 350px;
    z-index: 2000;
    left: 20px;
    bottom: 20px;
    background-color: var(--alertDark);
    background-color: var(--rvColor);
    padding: 10px;
    display: none;
    border-radius: 4px;
}

#groupOperationBox.show {
    display: inline-block;
}

#groupOperationBox .submitBtn {
    height: 100%;
}

#groupOperationBox .alertRed {
    margin-top: 0;
    margin-bottom: 0;
}

/* Breadcrumb */
#pageHeading {
    background-color: var(--bgColor);
}

.admin #pageHeading {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

#pageHeading .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#pageHeading .actionBtns {
    display: flex;
    align-items: center;
    gap: 4px;
}

ul.breadcrumb {
    display: inline-flex;
    justify-content: center;
    margin: 10px 0;
    padding: 10px 0;
    position: relative;
}

/* ul.breadcrumb::before {
    content: "";
    width: 100%;
    height: 2px;
    background-color: var(--boxHead);
    position: absolute;
    bottom: 0;
  }
  
  ul.breadcrumb::after {
    content: "";
    width: 3px;
    height: 2px;
    background-color: var(--bgColor);
    position: absolute;
    bottom: 0;
    right: 20px;
  } */

ul.breadcrumb li {
    display: inline;
    font-size: 12px;
    color: var(--textColor);
}

ul.breadcrumb li+li:before {
    padding: 8px;
    color: var(--subText);
    content: "/\00a0";
}

ul.breadcrumb li a {
    color: var(--textColor);
}

ul.breadcrumb li a:hover {
    color: var(--subText);
}

ul.breadcrumb li h1,
ul.breadcrumb li h2 {
    display: inline;
    font-size: 13px;
}

/* Breadcrumb End */
/* Account Menu */
#accountMenu {
    background-color: var(--box);
    /* border: 1px solid var(--boxBorder); */
    border-top: none;
    border-bottom: none;
}

#accountMenu ul li a {
    display: flex;
    align-items: center;
    padding: 10px;
    color: var(--menuText);
    font-size: 15px;
    border-bottom: 1px solid var(--boxBorder);
    transition: all 0.3s ease;
}

#accountMenu ul li a:hover {
    padding-right: 12px;
    transition: all 0.3s ease;
    color: var(--mainColor);
}

#accountMenu ul li a i {
    margin-left: 15px;
    color: var(--menuIcon);
    font-size: 18px;
    background-color: var(--boxHead);
    border-radius: var(--radius);
    width: 40px;
    height: 40px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

#accountMenu ul li a.active {
    font-weight: bold;
    color: var(--mainColor);
}

#accountMenu ul li a.active i {
    color: var(--mainColor);
}

/* Account Menu End */

/* Filter Top */
#filterTop {
    margin-bottom: 10px;
    /* background-color: var(--bgLight); */
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

#filterTop button {
    padding: 10px;
    border: 1px solid #ccc;
    background-color: var(--bgCream);
    color: #444;
}

#filterTop .checkAll {
    display: inline-flex;
    align-items: center;
    background-color: var(--box);
    padding: 5px;
    border-radius: 4px;
}

.filterBadge {
    display: inline-flex;
    padding: 5px 10px;
    /* background-color: #007295; */
    align-items: center;
    border-radius: var(--radius);
    border: 1px solid var(--inputBorder);
}

.filterBadge i {
    position: relative;
    width: 20px;
    height: 20px;
    margin-left: 5px;
    cursor: pointer;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.filterBadge i::before,
.filterBadge i::after {
    content: "";
    width: 1px;
    height: 14px;
    position: absolute;
    background-color: var(--textRed);
    transform: rotate(45deg);
}

.filterBadge i::after {
    transform: rotate(-45deg);
}

/* Filter Top End */
/* Table */
.tableBox,
.tableResponsive {
    width: 100%;
    overflow-x: auto;
}

.tableBox table,
.tableResponsive table {
    width: 100%;
}

.tableBox table,
.tableResponsive table {
    background-color: var(--box);
    border-radius: var(--radius);
    overflow: hidden;
}

.dataTableControl~table {
    border-radius: 0 0 var(--radius) var(--radius);
}

.tableBox thead {
    background-color: var(--boxHead);
    border-bottom: 1px solid var(--tblBorder);
}

.tableBox tbody tr {
    border-top: 1px solid var(--tblBorder);
    transition: all .1s ease;
}

.tableBox tbody tr:first-child {
    border-top: none;
}

.tableBox tbody tr:hover {
    /* background-color: var(--boxHead); */
    transition: all .1s ease;
}

.tableBox th,
.tableBox td {
    padding: 15px 20px;
    white-space: nowrap;
}

.tableBox th.wrap,
.tableBox td.wrap,
.tableBox.wrap th,
.tableBox.wrap td {
    white-space: unset;
}

.tableBox th.max400,
.tableBox td.max400 {
    max-width: 400px;
    white-space: unset;
}

.tdImg img {
    border-radius: var(--radius);
    border: 1px solid var(--boxBorder);
}

@media (min-width: 768px) {
    .tableResponsive table {
        background-color: var(--box);
    }

    .tableResponsive thead {
        background-color: var(--boxHead);
        border-bottom: 1px solid var(--tblBorder);
    }

    .tableResponsive tbody tr {
        border-bottom: 1px solid var(--tblBorder);
        transition: all .1s ease;
    }

    .tableResponsive tbody tr:last-child {
        border-bottom: none;
    }

    /* .tableResponsive tbody tr:hover {
    background-color: var(--boxHead);
    transition: all .1s ease;
  } */

    .tableResponsive th,
    .tableResponsive td {
        padding: 15px 20px;
        white-space: nowrap;
    }

    .tableResponsive th.max400,
    .tableResponsive td.max400 {
        max-width: 400px;
        white-space: unset;
    }

    .tdImg {
        width: 160px;
        padding: 5px !important;
    }

    .tdImg img {
        display: table;
        margin: 0 auto;
        width: 150px;
        height: 150px;
        object-fit: cover;
    }
}

@media (max-width: 767px) {
    .tableResponsive table {
        background-color: var(--bgColor);
    }

    .tableResponsive thead {
        display: none;
    }

    .tableResponsive tr {
        position: relative;
        background-color: var(--box);
        border: 1px solid var(--boxBorder);
        display: block;
        margin-bottom: 30px;
    }

    .tableResponsive td.rowNumber {
        background-color: var(--boxHead);
        position: absolute;
        top: 2px;
        left: 2px;
        z-index: 1;
        padding: 2px 6px;
        border-bottom: none;
    }

    .tableResponsive td.rowNumber::before {
        content: "#";
    }

    .tableResponsive td.btns {
        gap: 4px;
        justify-content: center;
        flex-wrap: wrap;
    }

    .tableResponsive td {
        border-bottom: 1px solid var(--tblBorder);
        display: flex;
        padding: 10px 20px;
        background-color: var(--boxHead);
    }

    .tableResponsive td.break {
        display: block;
    }

    .tableResponsive td[data-label] {
        position: relative;
        background-color: var(--box);
        padding-right: calc(30% + 20px);
    }

    .tableResponsive td[data-label]::before {
        content: attr(data-label);
        background-color: var(--boxHead);
        width: 30%;
        height: 100%;
        position: absolute;
        right: 0;
        top: 0;
        padding: 10px 20px;
        font-weight: bold;
        display: flex;
        align-items: center;
        overflow: hidden;
    }

    .tableResponsive td:last-child {
        border-bottom: 0;
    }

    .tableResponsive th.max400,
    .tableResponsive td.max400 {
        max-width: none;
    }

    .tdImg img {
        display: table;
        margin: 0 auto;
        max-width: 80%;
        object-fit: contain;
    }
}

/* Table End */
/* Hover Box */
.hoverBox {
    position: relative;
    overflow: hidden;
}

.hoverBox .hoverBoxHide {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.3);
    bottom: -100%;
    width: 100%;
    padding: 4px;
    gap: 4px;
    justify-content: center;
    display: flex;
    -webkit-transition: all 0.1s ease;
    -moz-transition: all 0.1s ease;
    -o-transition: all 0.1s ease;
    transition: all 0.1s ease;
}

.hoverBox:hover .hoverBoxHide {
    bottom: 0;
}

/* Hover Box End */
/* Upload Images */
.uploadImages {
    width: 100%;
    background-color: var(--box);
    border: 1px solid var(--boxBorder);
}

.uploadImages figure {
    width: 100%;
    height: 150px;
    display: flex;
    align-items: center;
    padding: 10px;
    background-color: var(--boxHead);
    margin: 0;
    position: relative;
}

.uploadImages figcaption {
    position: absolute;
    top: 5px;
    right: 5px;
}

.uploadImages figure img {
    display: table;
    margin: 0 auto;
    max-height: 100%;
    /* object-fit: contain; */
}

.uploadImages .title {
    height: 53px;
    line-height: 1.5;
    width: 100%;
    overflow: hidden;
    padding: 10px;
    word-break: break-all;
    text-align: left;
    direction: ltr;
}

/* Upload Images End */
/* Bottom Menu */
#fixedBottomMenu {
    display: none;
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 50px;
    background: rgb(21, 50, 72);
    background: linear-gradient(270deg, rgba(21, 50, 72, 1) 0%, rgba(18, 43, 62, 1) 100%);
    /* box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); */
}

#showCartBox {
    position: fixed;
    z-index: 3;
    bottom: -100%;
    width: 100%;
    height: 50px;
    background-color: var(--boxHead);
    transition: all 0.3s ease;
}

#showCartBox.show {
    bottom: 0;
    transition: all 0.3s ease;
}

#showCartBox .endBtns {
    display: flex;
    align-items: center;
    height: 100%;
    gap: 4px;
}

#showCartBox ul li {
    display: inline-block;
    margin-left: 20px;
}

#showCartBox ul li i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    width: 30px;
    height: 30px;
    border: 2px solid var(--mainColor);
    border-radius: 50%;
    background-color: var(--boxHead);
    color: var(--mainColor);
}

#showCartBox ul li .val {
    font-size: 18px;
    color: var(--mainColor);
}

@media (max-width: 991px) {
    body.hasBottomMenu {
        padding-bottom: 50px;
    }

    #fixedBottomMenu {
        display: block;
        z-index: 1025;
    }

    .sideMenu #main {
        min-height: calc(100vh - 100px);
    }

    .dualMenu #main {
        min-height: calc(100vh - 455.5px);
        /* Footer Height: 245.5px */
    }

    #showCartBox .cartDetails {
        display: none;
    }
}

/* Bottom Menu End */

/* Tabs */
.stickyTabNav {
    position: sticky;
    top: 50px;
    background-color: var(--boxHead);
    z-index: 2;
    padding: 5px 0;
}

.tabBtnBox {
    /* box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); */
    display: flex;
    background-color: var(--boxHead);
}

.tabBtnBox .tabBtn {
    padding: 15px;
    cursor: pointer;
}

.tabBtnBox .tabBtn.active {
    border-bottom: 2px solid var(--mainColor);
    font-weight: bold;
    cursor: default;
}

.tabBtnBox .tabBtn i {
    margin-left: 5px;
}

.tabBtnBox .tabBtn.active i {
    color: var(--mainColor);
}

.tabContents .tabContent {
    display: none;
}

.tabContents .tabContent.show {
    display: block;
}

/* Tabs End */

#footer {
    background-color: var(--bgFooter);
    padding: 30px 0;
}

#footer span.title {
    display: inline-block;
    font-size: 15px;
    padding-bottom: 10px;
    color: var(--textColor);
    margin-bottom: 10px;
    position: relative;
}

#footer span.title::before {
    content: "";
    width: 100%;
    height: 2px;
    background-color: var(--mainColor);
    position: absolute;
    bottom: 0;
}

#footer span.title::after {
    content: "";
    width: 3px;
    height: 2px;
    background-color: var(--bgFooter);
    position: absolute;
    bottom: 0;
    right: 10px;
}

#footer ul.links li a {
    display: inline-block;
    padding: 3px 0;
    color: var(--subText);
    transition: all .3s ease;
}

#footer ul.links li a:hover {
    display: inline-block;
    padding-right: 1px;
    color: var(--mainColor);
    transition: all .3s ease;
}

#footer ul.social li {
    display: inline-block;
    margin-left: 5px;
    margin-bottom: 5px;
}

#footer ul.social li a {
    background-color: var(--boxHead);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: 4px;
    color: var(--subText);
    transition: all .3s ease;
}

#footer ul.social li a:hover {
    color: var(--mainColor);
    transition: all .3s ease;
}

#footer ul.social li a i {
    font-size: 2rem;
}

#footer p {
    color: var(--subText);
    line-height: 2;
    text-align: justify;
}

#footer .namads {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px;
}

#footer .namads .namadItem {
    /* background-color: var(--box); */
    border-radius: var(--radius);
    display: inline-block;
    width: 140px;
    height: 140px;
}

#footer .namads .namadItem img {
    border-radius: 8px;
    display: inline-block;
    width: 140px;
    height: 140px;
    object-fit: contain;
}

.selectBox .selectBoxBody .list::-webkit-scrollbar,
.filterCheck .list::-webkit-scrollbar,
#searchFilter .searchFilterBody::-webkit-scrollbar,
#menuBox .menuBoxBody::-webkit-scrollbar {
    width: 5px;
}

.selectBox .selectBoxBody .list::-webkit-scrollbar-thumb,
.filterCheck .list::-webkit-scrollbar-thumb,
#searchFilter .searchFilterBody::-webkit-scrollbar-thumb,
#menuBox .menuBoxBody::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
}

input.find::placeholder,
input.find::-webkit-input-placeholder {
    text-align: left !important;
}


/* Project Start */
.sectionTitle {
    font-size: 2.5rem;
    margin-bottom: 30px;
    text-align: center;
}

.sectionTitle span {
    position: relative;
    color: var(--subText);
}

.sectionTitle span::after,
.sectionTitle span::before {
    content: "";
    position: absolute;
    top: 20px;
    right: -20px;
    width: 11px;
    height: 11px;
    transform: rotate(45deg);
    border-radius: 4px;
    background-color: var(--mainColor);
}

.sectionTitle span::after {
    top: 23px;
    right: -15px;
    width: 5px;
    height: 5px;
    border-radius: var(--radius);
    background-color: white;
}

/* Product Item */
.productItem {
    position: relative;
    width: 100%;
    border-radius: var(--radius);
    /* overflow: hidden; */
    background-color: var(--box);
}

#mainSearchResult .productItem {
    background-color: var(--boxFoot);
}

.productItem figure {
    width: 100%;
    height: 200px;
    display: flex;
    align-items: center;
    margin: 0;
    overflow: hidden;
    border-radius: var(--radius) var(--radius) 0 0;
}

.productItem figure img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.productItem figure .rightLabel {
    position: absolute;
    background-color: var(--box);
    color: var(--boxHeadText);
    top: 8px;
    right: -5px;
    padding: 6px 20px;
    border-radius: var(--radius) 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.productItem figure .rightLabel::after {
    content: "";
    position: absolute;
    border: 6px solid transparent;
    border-left: 5px solid var(--box);
    top: -6px;
    right: -6px;
}

.productItem figure .inventoryLabel,
.productItem figure .leftLabel {
    position: absolute;
    top: 4px;
    left: 4px;
    padding: 4px;
    border-radius: var(--radius);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.productItem figure .inventoryLabel {
    /* background-color: var(--box);
    color: var(--boxHeadText); */
    left: auto;
    right: 4px;
}

.productItem .title {
    height: 64px;
    line-height: 1.9;
    width: 100%;
    overflow: hidden;
    padding: 10px;
}

.productItem .title a {
    font-size: 1rem;
    color: var(--subText);
}

.productItem .title a:hover {
    color: var(--textColor);
}

.productItem .priceBox {
    /* background-color: var(--boxHead); */
    /* box-shadow: var(--shadow); */
    border: 2px solid var(--boxBorder);
    margin: 10px;
    border-radius: var(--radius);
    text-align: center;
    padding: 5px 0;
}

.productItem .priceBox .oldPrice {
    font-size: 1.2rem;
    margin-left: 10px;
    position: relative;
    color: var(--subText);
}

.productItem .priceBox .mainPrice {
    color: var(--subText);
    font-size: 2rem;
    font-weight: bold;
}

.productItem .priceBox .tomans {
    color: var(--mainColor);
    font-size: .8rem;
    font-weight: bold;
}

.productItem .btns {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
}

.productItem .btns .action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    /* border: 1px solid var(--boxBorder); */
    /* background-color: var(--bgColor); */
    box-shadow: var(--shadow);
    border-radius: var(--radius);
    cursor: pointer;
    width: 40px;
    height: 40px;
}

.productItem .btns i {
    font-size: 1.8rem;
    color: var(--subText);
}

.productItem .btns .action.bt {
    width: 60px;
    color: var(--mainColor);
    transition: all 0.3s ease;
}

.productItem .btns .action.bt:hover {
    background-color: var(--mainColor);
    border-color: var(--mainColor);
    color: var(--textLight);
    transition: all 0.3s ease;
}

/* Product OWL */
.productOwl {
    padding: 30px 0;
    margin-bottom: 20px;
}

/* Product OWL End */

.iconTitle {
    background-color: var(--box);
    box-shadow: 1px 2px 8px #00000030;
    padding: 40px 15px;
}

.iconTitle .iconTitleItem {
    display: flex;
    margin-bottom: 10px;
}

.iconTitle .iconTitleItem i {
    width: 80px;
    font-size: 3.5rem;
    color: var(--mainColor);
}

.iconTitle .iconTitleItem div {
    font-size: 1.2rem;
}

.iconTitle .iconTitleItem .title {
    font-weight: bold;
    color: var(--mainColor);
    margin-bottom: 5px;
}

.iconTitle .iconTitleItem .desc {
    color: var(--subText);
    font-size: .9rem;
}

/* Single Product */
.productPage .galleryBox {
    width: 100%;
    border-radius: var(--radius);
    overflow: hidden;
}

.productPage .galleryBox .large {
    margin-bottom: 10px;
}

.productPage .galleryBox .large img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: contain;
    background-color: var(--box);
}

.productPage .galleryBox .small {
    background-color: var(--box);
    display: flex;
    width: 100%;
    gap: 5px;
    overflow: auto;
    padding: 5px;
}

.productPage .galleryBox .small::-webkit-scrollbar-track {
    background-color: transparent;
}

.productPage .galleryBox .small::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 2px;
    border: 0px solid transparent;
    background-clip: content-box;
}

.productPage .galleryBox .small::-webkit-scrollbar {
    height: 7px;
}

.productPage .galleryBox .small img {
    border: 2px solid #ccc;
    height: 50px;
    aspect-ratio: 16/9;
    object-fit: cover;
    /* scroll-snap-align: start; */
}

.productPage .galleryBox .small img.active {
    border: 2px solid var(--mainColor);
}

.productPage .productDetails .title {
    font-size: 1.4rem;
    margin-bottom: 15px;
}

.productPage .productDetails .label {
    font-size: .9rem;
    margin-bottom: 20px;
    color: var(--subText);
}

.productPage .productDetails .priceBox {
    background-color: var(--boxHead);
    border-radius: var(--radius);
    text-align: center;
    padding: 5px 0;
    margin-bottom: 20px;
    border: 2px solid var(--border);
}

.productPage .productDetails .priceBox .oldPrice {
    font-size: 1.2rem;
    margin-left: 10px;
    position: relative;
    color: var(--subText);
}

.productPage .productDetails .priceBox .mainPrice {
    color: var(--subText);
    font-size: 2rem;
    font-weight: bold;
}

.productPage .productDetails .priceBox .tomans {
    color: var(--mainColor);
    font-size: .8rem;
    font-weight: bold;
}

/* Product Group Menu */
.productPage .productDetails #productGroupMenu {
    position: relative;
}
.productPage .productDetails #productGroupMenu >span {
    display: flex;
    padding: 15px 10px;
    align-items: center;
    /* background-color: var(--alertDark); */
    /* color: var(--textLight); */
    border: 2px solid var(--border);
    height: 100%;
    border-radius: var(--radius);
    transition: all .3s ease;
}
.productPage .productDetails #productGroupMenu ul {
    position: absolute;
    background-color: var(--menuSub);
    opacity: 0;
    visibility: hidden;
    width: 100%;
    right: 20px;
    top: 100%;
    /* border-radius: var(--radius); */
    transition: all .3s ease;
    z-index: 34;
}
.productPage .productDetails #productGroupMenu:hover> span {
    border-radius: var(--radius) var(--radius) 0 0;
    background-color: var(--boxHead);
    color: var(--boxHeadText);
    border-color: var(--boxHead);
}
.productPage .productDetails #productGroupMenu:hover>ul,
.productPage .productDetails #productGroupMenu ul li:hover > ul {
    opacity: 1;
    visibility: visible;
    transition: all .3s ease;
    right: 0;
}
.productPage .productDetails #productGroupMenu ul li {
    display: flex;
    padding: 5px 5px 0 5px;
    background-color: var(--boxHead);
    position: relative;
}
.productPage .productDetails #productGroupMenu ul li:last-child {
    padding-bottom: 5px;
}

.productPage .productDetails #productGroupMenu ul li span,
.productPage .productDetails #productGroupMenu ul li a {
    display: flex;
    width: 100%;
    background-color: var(--menuItem);
    color: var(--menuSubText);
    padding: 12px;
    border-radius: var(--radius);
    transition: all .3s ease;
}

.productPage .productDetails #productGroupMenu ul li ul {
    right: calc(100% + 20px);
    top: 0;
}
.productPage .productDetails #productGroupMenu ul li:hover > ul {
    right: 100%;
}
.productPage .productDetails #productGroupMenu ul li:hover > span,
.productPage .productDetails #productGroupMenu ul li:hover > a {
    background-color: var(--bgColor);
    /* color: var(--rvText); */
    transition: all .3s ease;
}
/* Product Group Menu */

.productPage .productDetails .featuresBox {
    margin-bottom: 20px;
}

.productPage .productDetails .featuresBox ul {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.productPage .productDetails .featuresBox li {
    font-size: 15px;
    margin-bottom: 7px;
    display: inline-block;
    border: 2px solid var(--boxBorder);
    border-radius: var(--radius);
    padding: 6px 10px;
}
.productPage .productDetails .featuresBox li i {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid var(--mainColor);
    color: var(--mainColor);
    margin-left: 5px;
    font-size: 10px;
}

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

.productPage .productDetails .inventory {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
}

.productPage .productDetails .inventory .nonExistent,
.productPage .productDetails .inventory .existing,
.productPage .productDetails .inventory .few {
    display: inline-flex;
    align-items: center;
}

.productPage .productDetails .inventory .nonExistent i,
.productPage .productDetails .inventory .existing i,
.productPage .productDetails .inventory .few i {
    font-size: 1.5rem;
    color: var(--mainColor);
    margin-left: 4px;
}

.productPage .productDetails .inventory .few i {
    color: var(--alertYellowText);
}

.productPage .productDetails .inventory .nonExistent i {
    color: var(--alertDarkText);
}

.countBox {
    display: inline-flex;
    align-items: center;
    gap: 1px;
}

.countBox .plus,
.countBox .minus {
    color: var(--textColor);
    padding: 0 12px;
    height: 40px;
}

.countBox .plus {
    border-radius: 0 var(--radius) var(--radius) 0;
}

.countBox .minus {
    border-radius: var(--radius) 0 0 var(--radius);
}

.countBox input {
    width: 60px;
    height: 40px;
    padding: 8px;
    max-height: 100%;
    border: 1px solid var(--btnHover);
    direction: ltr;
    text-align: center;
    font-size: 1.2rem;
    font-weight: 600;
    background-color: var(--input);
    color: var(--inputText);
    pointer-events: none;
}

/* Single Product End */

/* Cart */
.cartPage .cartAmount {
    color: var(--mainColor);
    font-weight: bold;
    font-size: large;
}

.miniCart .productTitle,
.cartPage .productTitle {
    font-weight: bold;
    color: var(--textColor);
}

.miniCart .productTitle:hover,
.cartPage .productTitle:hover {
    color: var(--subText);
}

.cartPage .colToRow {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

@media (max-width: 767px) {
    .cartPage .colToRow {
        justify-content: space-between;
        padding: 10px 0;
        border-bottom: 1px dotted var(--border);
    }

    .cartPage .first {
        padding-top: 0;
        border-bottom: none;
    }

    .cartPage .last {
        padding-bottom: 0;
        border-bottom: none;
    }
}

/* Cart End */
/* Order */
.orderPage p.status {
    background-color: var(--boxHead);
    border-radius: var(--radius);
    text-align: center;
    padding: 20px;
    font-size: 1.2rem;
    line-height: 2;
}

.orderPage p.status span {
    /* background-color: var(--alertGreenText); */
    padding: 5px;
    font-weight: bold;
    /* color: var(--alertGreenText); */
}

.orderPage h2 {
    font-size: 1.6rem;
}

.orderPage p.payment {
    font-size: 1.2rem;
    line-height: 1.7;
    /* color: var(--textBoldColor); */
}

.orderPage p.payment span {
    font-weight: bold;
}

.orderPage table {
    width: 100%;
    font-size: 1.2rem;
    margin-bottom: 20px;
}

.orderPage table img {
    width: 60px;
    height: 60px;
    object-fit: cover;
}

.orderPage table tr {
    border-bottom: 1px solid var(--tblBorder);
}

.orderPage table thead tr {
    border-bottom: 2px solid var(--tblBorder);
}

.orderPage table th {
    color: var(--subText);
}

.orderPage table th,
.orderPage table td {
    padding: 8px;
}

.orderPage table tr td:last-child {
    max-width: 100px;
}

.orderPage table .price {
    color: var(--mainColor);
    font-weight: bold;
}

.orderPage table .price.last {
    font-size: 1.4rem;
}

.orderPage table .title {
    font-size: 1.3rem;
}

.orderPage table .title.last {
    font-weight: bold;
}

.orderPage .addressBox {
    font-size: 1.3rem;
    line-height: 1.7;
    background-color: var(--bgLightColor);
    padding: 20px;
}

.orderPage .addressBox h3 {
    font-size: 1.5rem;
}

/* Order End */
/* Checkout */
.checkoutPage .checkmark {
    line-height: 1.8;
    font-size: 15px;
}

.checkoutPage table {
    width: 100%;
}

.checkoutPage table tr td {
    padding: 10px;
    font-size: 1.2rem;
    font-weight: bold;
}

.checkoutPage tr:last-child td:last-child {
    color: var(--mainColor);
    font-size: 1.4rem;
}

.checkoutPage .zarinpal {
    display: flex;
    align-items: center;
    font-size: .8rem;
    font-weight: bold;
}

/* Checkout End */
/* Address */
.addressPage .addressDetails {
    font-size: 15px;
}

/* Address End */
/* Comment */
.commentItem {
    background-color: var(--box);
    border-radius: var(--radius);
    padding: 20px;
}

.commentItem .commentHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.commentItem .commentHead .avatarName {
    display: flex;
    align-items: center;
    gap: 10px;
}

.commentItem .commentHead i.user {
    font-size: 30px;
    color: var(--menuIcon);
}

.commentItem .commentHead .userName {
    font-size: 14px;
    font-weight: bold;
    color: var(--mainColorHover);
}

.commentItem .text {
    font-size: 14px;
    margin-right: 40px;
    line-height: 1.8;
}

#commentFormArea .answerTo {
    background-color: var(--boxHead);
    padding: 15px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    max-height: 120px;
    overflow: auto;
    line-height: 1.8;
}

#commentFormArea .childBox {
    max-height: 220px;
    padding: 10px;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    /* background-color: var(--boxHead); */
}

/* Comment End */

/* Contact Us Page */
.contactItem {
    display: flex;
    align-items: center;
    background-color: var(--box);
    padding: 20px;
    border-radius: var(--radius);
}

.contactItem img {
    width: 100px;
}

.contactItem .title {
    display: block;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: bold;
}

.contactItem .socialLink {
    font-size: 14px;
    font-weight: bold;
    color: var(--mainColor);
}

/* Contact Us Page End */
/* Editor Content */

.editorContent p {
    font-size: 15px;
    line-height: 2;
    padding: 0 !important;
    margin: 0;
    margin-bottom: 20px;
}

.editorContent a {
    color: var(--mainColor);
}

.editorContent a:hover {
    color: var(--mainColorHover);
}

.editorContent table {
    margin-bottom: 20px;
}

.editorContent table th,
.editorContent table td {
    padding: 0 20px;
    border: 2px solid var(--tblBorder);
}

/* Editor Content End */

/* BS */
.nav-pills .nav-link {
    color: var(--textColor);
}

.nav-pills .nav-link.active {
    background-color: var(--boxHead);
    color: var(--textColor);
    border-radius: var(--radius);
    border-bottom: 2px solid var(--mainColor);
    /* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19) !important; */
}

.btn-close:focus {
    box-shadow: none;
}

/* BS End */



.productPage .productDescription .hasImg {
    margin: 0 auto;
    position: relative;
    /* width: 700px; */
    padding-top: 56.25%;
    /* padding-top: 75%; */
}

.productPage .productDescription .hasImg img {
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    object-fit: cover;
    z-index: 1;
}




/* Preloader */
.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bgColor); /* رنگ پس‌زمینه */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 1;
    transition: opacity 0.5s ease;
}

.preloader.fade-out {
    opacity: 0;
    pointer-events: none;
}

.preloader img {
    width: 150px; /* تنظیم سایز لوگو */
    animation: pulse 1.5s infinite; /* انیمیشن (اختیاری) */
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}
/* Preloader End */