/* 
------------------
Main Style
------------------
*/
/*+++++++++++++ Select +++++++++++++++*/
:root {
    --primary-color: #222222;
    --secondary-color: #6E44C6;
    --color-button-primary-hover: #5b35ad;
    --white-color: #ffffff;
    font-size: 15px;
    --bg-color: #f7f7f7;
    --color-border-3: #ddd;
    --color-boder-2: #c2c2c2;
    --bg-light-purple: #f3eeff;


    --sidebar-bg: #313131;
    --sidebar-item: #ddd;
    --sidebar-item-hover: #4b4b4b;
    --sidebar-item-hover-color: #ffffff;

    --inner-sidebar-bg: #4b4b4b;
    --inner-sidebar-item: #d3d3d3;
    --inner-sidebar-item-hover-bg: #313131;


    --color-gray-level-700: #4b4b4b;
    --color-gray-level-600: #606060;
    --color-gray-level-500: #717171;
    --color-gray-level-300: #c2c2c2;
    --color-gray-level-100: #ebebeb;
    --color-red: #bb3d32;
    --color-bg-red: #f1cfcc;
    --color-bg-green: #d6f3e5;
    --color-green: #11663d;
    --color-info: #d0d8f8;
    --color-bg-info: #152b7b;
    --palette-text-primary: #313131;



    /* برای svg های کنار سایدبار */
    --color-svg-main: #de2328;
    --color-svg-border: #717171;
    --color-svg-fill: #ffffff;
    --color-svg-logo-red: #de2328;
    --color-svg-shadow: var(--gray-tone1-200);
    --color-svg-profile-info: #1f232f;
    --color-svg-profile: #1f232f;


    --color-logo-black: #313131;
    --color-logo-red: #de2328;
    --color-logo-gray: #717171;


    --svg-t-border: #313131;
    --svg-t-gray: #dddddd;
    --svg-t-white: #ffffff;
}

@font-face {
    font-family: 'IRANSansXFaNum';
    src: url('../fonts/IRANSansXFaNum-Bold.woff2') format('woff2'),
        url('../fonts/IRANSansXFaNum-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IRANSansXFaNum';
    src: url('../fonts/IRANSansXFaNum-Bold.woff2') format('woff2'),
        url('../fonts/IRANSansXFaNum-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IRANSansXFaNum';
    src: url('../fonts/IRANSansXFaNum-Regular.woff2') format('woff2'),
        url('../fonts/IRANSansXFaNum-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IRANSansXFaNum';
    src: url('../fonts/IRANSansXFaNum-Regular.woff2') format('woff2'),
        url('../fonts/IRANSansXFaNum-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}





*,
ul,
ol {
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;

}

ul,
ol {
    list-style-type: none;
}

::-webkit-scrollbar {
    width: 7px;
    height: 3px;
}

::-webkit-scrollbar-thumb {
    background-color: var(--color-gray-level-500);
    border-radius: 12px;
    overflow: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'IRANSansXFaNum', sans-serif;
}

a {
    color: var(--palette-text-primary);
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
}

a:hover,
a:focus {
    color: var(--secondary-color);
}

a.purple {
    color: var(--secondary-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

a.purple svg {
    margin-right: 7px;
}

.p-0 {
    padding: 0 !important
}

body {
    color: var(--palette-text-primary);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: 100%;
    overflow: hidden;
    font-family: 'IRANSansXFaNum', Sans-serif;
    position: relative;
    direction: rtl;
    background-color: var(--bg-color);
    overflow-y: auto;
}


.card {
    background-color: var(--white-color);
    border-color: var(--color-border-3);
    border-radius: 16px;
    color: var(--palette-text-primary);
    padding: 0
}

.card.add-form-card {
    padding: 1.5rem;
}

.card.empty-card .card-content {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 1rem;
    font-weight: 600;
    padding: 20px;
    min-height: 470px;
}

.card.empty-card p {
    font-size: 0.8rem;
    color: var(--color-gray-level-600);
}

.card .card-footer {
    border-top: 1px solid var(--color-border-3);
    padding: 24px 16px;
}

.card .card-header {
    border-bottom: 1px solid var(--color-border-3);
    padding: 24px 16px;
}

.card.empty-card .footer a.show-more {
    font-weight: 700;
}

.button.primary {
    border-radius: 30px;
    color: var(--white-color);
    background-color: var(--secondary-color);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
}

.button.primary:not(.small) {
    font-size: 0.933rem;
    height: 48px;
}

.button.primary:hover,
.button.primary:focus {
    background-color: var(--color-button-primary-hover);
    box-shadow: none;
}

.button.primary svg {
    margin: 0 0 0 7px;
}


.button.hollow.primary,
.button.hollow.primary.disabled,
.button.hollow.primary.disabled:focus,
.button.hollow.primary.disabled:hover,
.button.hollow.primary[disabled],
.button.hollow.primary[disabled]:focus,
.button.hollow.primary[disabled]:hover {
    border: 1px solid var(--secondary-color);
    color: var(--secondary-color);
    background: transparent;
}

.button.hollow.primary:focus,
.button.hollow.primary:hover {
    border-color: var(--secondary-color);
    color: var(--secondary-color);
}

.position-relative {
    position: relative;
}

/* input */

.floatingInpuBox {
    position: relative;
    margin: 0 0 16px;
    border: 1px solid var(--color-boder-2);
    border-radius: 7px;
    display: flex;
    align-items: center;
}

.floatingInpuBox label {
    position: absolute;
    top: 25px;
    right: 15px;
    transform: translateY(-50%);
    color: var(--color-gray-level-700);
    font-size: 0.9em;
    pointer-events: none;
    transition: 0.3s;
    padding: 0 5px;
}

.floatingInpuBox input:focus~label,
.floatingInpuBox input:not(:placeholder-shown)~label,
.floatingInpuBox textarea:focus~label,
.floatingInpuBox textarea:not(:placeholder-shown)~label {
    top: 0px;
    font-size: 0.6rem;
}

.floatingInpuBox input:focus~label::before,
.floatingInpuBox input:not(:placeholder-shown)~label::before,
.floatingInpuBox textarea:focus~label::before,
.floatingInpuBox textarea:not(:placeholder-shown)~label::before {
    position: absolute;
    background-color: var(--white-color);
    height: 2px;
    width: 100%;
    content: "";
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    z-index: -1;
}

.floatingInpuBox.selectBox label {
    top: 0px;
    font-size: 0.6rem;
}

.floatingInpuBox.selectBox label:before {
    position: absolute;
    background-color: var(--white-color);
    height: 2px;
    width: 100%;
    content: "";
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    z-index: -1;
}

.floatingInpuBox input,
.floatingInpuBox textarea {
    width: 100%;
    height: 50px;
    background-color: transparent !important;
    outline: none;
    font-size: 1em;
    padding: 10px 16px;
    color: var(--primary-color);
    text-align: right;
    box-shadow: none !important;
    margin: 0;
    border: 0px !important;
    overflow: hidden;
    border-radius: 7px;
}

.floatingInpuBox textarea {
    min-height: 100px;
}

.floatingInpuBox select {
    width: 100%;
    height: 50px;
    background-color: transparent;
    background-origin: content-box;
    background-position: left 0rem center;
    outline: none;
    font-size: 1em;
    padding: 10px 16px;
    color: var(--primary-color);
    text-align: right;
    box-shadow: none !important;
    margin: 0;
    border: 0px !important;
    overflow: hidden;
    border-radius: 7px;
}

.floatingInpuBox:hover {
    border-color: var(--color-gray-level-500);
}

input[type="password"],
input[type="email"],
input[type="tel"],
input[type="url"] {
    text-align: left;
    font-variation-settings: "FANU"0 !important;
    font-feature-settings: normal !important;
    direction: ltr !important;
}

.floatingInpuBox .left-box {
    direction: ltr;
    padding-left: 20px;
}

.floatingInpuBox .left-box>*:first-child {
    padding: 0 10px 0 0px;
    border-right: 1px solid var(--color-gray-level-300);
}


.floatingInpuBox .left-box>*+* {
    padding: 0 0 0 10px;
}

.floatingInpuBox .left-box .prefix {
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.125rem;
    color: var(--color-gray-level-600);
}

.ir {
    font-size: 2rem;
    color: var(--secondary-color);
}

.mobileCode {
    color: var(--primary-color);
}

.floatingInpuBox.phone input {
    padding-left: 5px;
}

.floatingInpuBox.passwordBox input {
    text-align: left;
}

.floatingInpuBox.passwordBox .eye {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: var(--color-gray-level-600);
    /* visibility: hidden; */
    opacity: 0;
    z-index: 3;
}

.floatingInpuBox.passwordBox input:focus~.eye {
    /* visibility: visible; */
    opacity: 1;
}

.floatingInpuBox.passwordBox .eye-off::after {
    position: absolute;
    background-color: var(--color-gray-level-600);
    width: 1px;
    height: 100%;
    content: "";
    border-radius: 2px;
    transform: rotate(45deg);
    left: 0;
    right: 0;
    margin: auto;
}

.floatingInpuBoxNote {
    margin: 0px;
    font-size: 0.8rem;
    color: var(--color-gray-level-500);
    font-weight: 600;
    line-height: 1.375rem;
    margin: -8px 0 8px;
    display: block;
}

.secureCode .left-box {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-right: 1px solid var(--color-gray-level-300);

}

.secureCode .left-box .button {
    margin: 0;
    border-radius: 6px 0 0 6px;
    padding: 5px;
    height: 100%;
    cursor: pointer;
    background: var(--color-gray-level-300);
    border-left: 1px solid var(--color-gray-level-300);
}

.form-subtitle {
    margin: 0;
    color: var(--color-gray-level-700);
    font-size: 0.93rem;
    font-weight: 600;
    line-height: 1.5rem;
    margin-bottom: 12px;
}

.avatar-sm {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    overflow: hidden;
    display: inline-block;
    margin-left: 10px;
    flex-shrink: 0;
}

/* فایل آپلود */
.avatar-upload {
    position: relative;
    display: inline-flex;
    align-items: center
}

.avatar-upload .avatar-edit {

    position: absolute;
    bottom: 0;
    left: 10px;
}

.avatar-upload .avatar-edit input {
    display: none
}

.avatar-upload .avatar-edit label {
    width: 30px;
    height: 30px;
    border-radius: 100%;
    cursor: pointer;
    background-color: var(--secondary-color);
    color: var(--white-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.avatar-upload .avatar-preview {
    width: 143px;
    height: 143px;
    position: relative;
    border-radius: 50%;
    overflow: hidden
}

.avatar-upload .avatar-preview>div {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center
}

/* Medium + Small */
@media screen and (max-width:63.99875em) {
    .avatar-upload {
        margin-bottom: 16px;
    }

    .card.empty-card .card-content {
        min-height: 350px;
    }
}

/* -------------------------- */
.main-title-row {
    margin-bottom: 1rem;
}

h1.main-title {
    color: var(--primary-color);
    font-size: 1.25rem;
    font-weight: 700;
    position: relative;
    padding-right: 15px;
    line-height: 2.125rem;
    margin: 0;
}

.main-title:before {
    content: "";
    width: 5px;
    height: 100%;
    background-color: var(--secondary-color);
    border-radius: 12px;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
}

h2.main-title {
    font-size: 1rem;
    line-height: 1.5rem;
    color: var(--primary-color);
    font-weight: 700;
    position: relative;
    padding-right: 15px;
    margin: 0;
}


.main-title-row .button {
    min-width: 130px;
    height: 40px !important;

}

/*+++++++++++++++++++++++++++++++++++++++++++++++
Index - Header
++++++++++++++++++++++++++++++++++++++++++++++++*/
header {
    height: 60px;
    box-sizing: border-box;
    padding: 0 75px 0 10px;
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, .06);
    background-color: var(--white-color);
    width: 100%;
    position: fixed;
    left: 0;
    z-index: 11;
    font-size: 0.8rem;
}

header .grid-container.fluid {
    width: 100%;
    flex-grow: 1;
}

.toggleMenu {
    width: auto;
    margin: 0 0 0 10px;
    cursor: pointer;
}

.toggleMenu svg {
    color: var(--primary-color);
}

.header-link {
    transition: all .3s ease-in-out 0s;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border-3);
    padding: 0 12px;
    height: 36px;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap !important;
    width: auto;
    margin: 0 0 0 10px;
    color: var(--primary-color) !important;
    background-color: transparent !important;
    font-weight: 400;
    font-size: 0.8rem;
}

.header-link:last-child {
    margin-left: 0;
}

.header-link:hover,
.header-link:focus {
    color: var(--secondary-color);
    border-color: var(--secondary-color);
}

.header-link svg:not(.arrow) {
    margin-left: 5px;
}

.header-link svg.arrow {
    margin-right: 5px;
    transition: 0.3s transform ease-in-out;
    -webkit-transition: 0.3s transform ease-in-out;
}

.header-link.hover svg.arrow {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
}

.header-date {
    font-size: inherit;
}

.dropdown-pane.styled {
    border: 1px solid var(--color-border-3);
    padding: 7px 12px;
    width: 100%;
    border-radius: 8px;
}

header .dropdown-pane.styled {
    width: calc(100% - 10px);
}

.dropdown-pane.styled a {
    font-weight: 400;
    font-size: 0.8rem;
    margin: 5px;
    width: 100%;
    display: block;
}

/* theme-btn */
/* سوئیچ */
.theme-btn {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background: transparent;
    border: 1px solid var(--color-border-3);
    width: 42px;
    height: 24px;
    border-radius: 30px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: border 0.3s ease;
}

.theme-toggle {
    background-color: var(--color-gray-level-700);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    /* margin: 3px; */
    position: absolute;
    left: 2px;
    top: 2px;
    transition: transform 0.3s ease, background 0.3s ease;
    pointer-events: none;
    /* باعث میشه کلیک فقط روی parent ثبت بشه */
}

.theme-toggle:before {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url(/assets/images/day.svg);
    z-index: 2;
    background-size: 12px;
}

.dark-theme .theme-btn .theme-toggle {
    transform: translateX(18px);
    background-color: var(--color-gray-level-700);
}

.dark-theme .theme-toggle:before {
    background-image: url(/assets/images/night.svg);
}

header .theme-btn {
    margin-left: 10px;
}

header .bell {
    margin-left: 10px;
    color: var(--color-gray-level-700);
    cursor: pointer;
}

/*+++++++++++++++++++++++++++++++++++++++++++++++
Index - rightSidebar
++++++++++++++++++++++++++++++++++++++++++++++++*/
.rightSidebar {
    background-color: var(--sidebar-bg);
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    position: fixed;
    z-index: 400;
    top: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    overflow: hidden;
    transition: 0.3s all ease-in-out;
    -webkit-transition: 0.3 transform ease-in-out;
}

.rightSidebar .container {
    width: 76px;
    padding: 0 8px;
    display: flex;
    align-items: center;
    flex-direction: column;
    height: 100%;
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    direction: ltr;
}

.rightSidebar .list {
    flex: 1 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    transition: margin .3s ease-in-out 0s;
    color: var(--sidebar-item);
}

.rightSidebar .list .item:first-child {
    margin-top: 12px;
}

.rightSidebar .list .item a {
    width: 62px;
    height: 62px;
    min-width: 62px;
    min-height: 62px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: 2px 0;
    transition: background-color .3s ease-in-out 0s;
    color: var(--sidebar-item);
}

.rightSidebar .list .item.active a {
    background-color: var(--sidebar-item-hover) !important;
    color: var(--sidebar-item-hover-color);
}

.rightSidebar .list .item a:hover {
    cursor: pointer;
    background-color: var(--sidebar-item-hover);
    color: var(--white-color);
}

.rightSidebar .list .item a svg {
    color: inherit;
}


.rightSidebar .list .item a span {
    text-align: center;
    line-height: 16px;
    max-width: 55px;
    color: inherit;
    font-size: 0.667rem;
    font-weight: 600;
}

/* Mini Large */
@media screen and (min-width:64em) and (max-width:74.99875em) {
    header .suggestions-link svg {
        margin: 0 !important;
    }

    header .suggestions-link span {
        display: none;
    }
}

/* Medium + Small */
@media screen and (max-width:63.99875em) {
    header {
        padding: 0 10px;
    }

    .rightSidebar {
        transform: translateX(100%);
        -webkit-transform: translateX(100%);
    }

    .rightSidebar.open {
        transform: translateX(0);
        -webkit-transform: translateX(0);
    }
}

/* Small */
@media screen and (max-width:39.99875em) {
    header {
        height: auto;
    }

    header .header-link {
        border: 0px;
        padding: 0;
    }

    header .bell {
        margin-right: auto;
    }

    header .header-mobile-row {
        padding: 5px;
        border-top: 1px solid var(--color-gray-level-100);
    }

    header .dropdown-pane.styled {
        width: 150px;
    }
}

/* innerSidebar */
.innerSidebar {
    display: flex;
    width: 240px;
    background-color: #3c3c3c !important;
    padding-right: 76px;
    border-top-left-radius: 20px !important;
    border-bottom-left-radius: 20px !important;
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    margin-right: -250px;
    transition: margin-right .3s ease-in-out 0s;
    z-index: 12;
}

.innerSidebar.open {
    margin-right: 0;
}

.innerSidebar .container {
    padding: 16px 8px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
}

.innerSidebar .close {
    width: auto;
    margin-right: auto;
    margin-bottom: 0;
    color: var(--inner-sidebar-item) !important;
    padding: 0;
}

.innerSidebar .header {
    padding: 0 16px 24px 16px;
    color: var(--inner-sidebar-item);
}

.innerSidebar .header .title {
    font-size: 0.933rem;
    font-weight: 700;
    border-bottom: 1px solid var(--inner-sidebar-item);
    line-height: 40px;
}

.innerSidebar .list {
    width: 100%;
}

.innerSidebar .list a {
    color: var(--inner-sidebar-item);
    font-size: 0.8rem;

    height: 32px;
    border-radius: 16px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 3px;
    transition: background-color .3s ease-in-out 0s;
    cursor: pointer;
}

.innerSidebar .list a:hover {
    color: var(--sidebar-item-hover-color);
    background-color: var(--inner-sidebar-item-hover-bg) !important;
}

/*+++++++++++++++++++++++++++++++++++++++++++++++
Login
++++++++++++++++++++++++++++++++++++++++++++++++*/
.login-page {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    width: 100%;
}

.login-page .grid-container {
    width: 100%;
}

.login-form-box {
    padding: 40px;
    position: relative;
    color: var(--color-gray-level-600);
}

.login-form-box .theme-btn {
    position: absolute;
    left: 16px;
    top: 16px;
}

.login-form-box .title {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 15px 0 30px;
}

.login-form-box .floatingInpuBox {
    margin-bottom: 16px;
}

.forget {
    text-align: right;
    font-size: 0.667rem;
    font-weight: bold;
    margin-bottom: 16px;
}


.register {
    text-align: center;
    font-size: 0.8rem;
}

.register p {
    font-weight: 600;
    margin-bottom: 0;
}

.login-form-box .button.primary {
    margin-bottom: 15px;
}

.other-links a {
    padding: 0 1rem;
    font-size: 0.8rem;
    color: var(--color-gray-level-500);
}

.other-links a:hover {
    color: var(--secondary-color);
}

.other-links .line {
    color: var(--color-gray-level-300);
}

.login-validation-error {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 1rem;
    border: 1px solid var(--color-red);
    border-radius: 1rem;
    margin-bottom: 1.5rem;
    font-size: 0.8rem;
    color: var(--color-red);
}

.login-validation-error-icon svg {
    margin-left: 0.5rem;
}

.login-validation-error .description {
    font-size: 0.8rem;
    padding-right: 31.5px;
    font-weight: 400;
    color: var(--color-gray-level-700)
}

/* Small */
@media screen and (max-width:39.99875em) {
    .login-form-box {
        width: 100%;
        border-radius: 0px;
    }
}

/* Responsiveness:End */

/*+++++++++++++++++++++++++++++++++++++++++++++++
page content
++++++++++++++++++++++++++++++++++++++++++++++++*/
.grid-container {
    max-width: 1380px;
}

.page-content {
    display: flex;
    /* flex-direction: column; */
    box-sizing: border-box;
    width: 100%;
    padding-right: 76px;
    padding-top: 60px;
    justify-content: flex-start;
    align-items: flex-start;
    min-height: 100vh;
}

.page-content .content {
    min-height: calc(100vh - 76px);
    margin: 16px 0 0px 0;
    display: flex;
    width: 100%;
    flex-direction: column;
    justify-content: flex-start;
}

.page-content.has-left-sidebar .content {
    padding-left: clamp(320px, 18%, 450px);
}

.page-content:not(.has-left-sidebar) .content {
    padding-top: 32px;
}

.page-content:not(.has-left-sidebar) .grid-container {
    max-width: 1520px
}

.page-content .content .main-section {
    margin-bottom: 30px;
}

/* .page-content .content .main-section:last-child {
    margin-bottom: 0px;
} */

.page-content .main-activities-list {
    gap: 16px;
    flex-wrap: wrap;
}

.page-content .main-activities-list li {
    flex: 1 0 calc(25% - 16px)
}

.page-content .main-activities-link {
    height: 53px;
    background-color: var(--white-color);
    border: 1px solid var(--color-border-3);
    border-radius: 50px;
    padding: 4px;
    display: flex;
    align-items: center;
    font-size: 0.93rem;
    font-weight: 700;
    color: var(--secondary-color);
}

.main-activities-link .short-name {
    color: var(--color-button-primary-hover);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    height: 100%;
    width: 100%;
    position: relative;
    width: 46px;
    font-size: 0.667rem;
    margin-left: 12px;
}

.main-activities-link .short-name:before {
    content: "";
    position: absolute;
    left: -3px;
    right: 3px;
    top: 0;
    bottom: 0;
    background-color: var(--color-button-primary-hover);
    border-radius: 40px 40px 40px 0;
    z-index: 1;
    transition: all .3s ease-in-out 0s;
    -webkit-transition: all .3s ease-in-out 0s;
    opacity: 0.2;
}

.main-activities-link .short-name:after {
    border-radius: 40px 40px 40px 0;
    background-color: var(--bg-light-purple);
    z-index: 1;
    height: 100%;
    width: 100%;
    position: relative;
    transition: all .3s ease-in-out 0s;
    -webkit-transition: all .3s ease-in-out 0s;
    width: 46px;
    content: "";
    position: absolute;
    right: 0;
    top: 0;
}

.main-activities-link .short-name span {
    z-index: 3;
}

.main-activities-link:hover .short-name {
    color: var(--white-color);
}

.main-activities-link:hover .short-name:after,
.main-activities-link:hover .short-name:before {
    background-color: var(--secondary-color);
    color: var(--white-color);
    opacity: 1;
}

/* .main-table */
.main-table {
    margin: 0;
    border: 0px;
    overflow: hidden;
}

.main-table td,
.main-table th {
    padding: 22px;
    font-size: 0.8rem;
    text-align: center;
}

.main-table td.text-right,
.main-table th.text-right {
    text-align: right;
}

.main-table td.text-left,
.main-table th.text-left {
    text-align: left;
}

.main-table thead {
    background-color: transparent;
}

.main-table th {
    white-space: nowrap;
    background-color: transparent;
    font-weight: 400;
    color: var(--palette-text-primary);
}

.main-table tbody,
.main-table thead {
    border: 0px;
}

.main-table tbody {
    background-color: var(--bg-color)
}

.main-table tbody tr:nth-child(even) {
    background-color: var(--white-color);
}

.main-table td p {
    margin: 0;
}

.main-table td .price {
    font-weight: 700;
    white-space: nowrap;
    font-size: 0.8rem;
}

.main-table td .price.green {
    color: var(--color-green);
}

.main-table td .price.red {
    color: var(--color-red);
}

.main-table td .price strong {
    font-size: 1.1rem;
    margin-left: 3px;
}

.main-table td a.name {
    font-weight: 700;
    font-size: 0.93rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.main-table td a.show-more {
    white-space: nowrap;
}

.status {
    min-width: 100px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0 8px;
    white-space: nowrap;
    height: 22px;
    border-radius: 16px;
    width: -moz-fit-content;
    font-size: 0.66rem;
    font-weight: 600;
}

.status.green {
    color: var(--color-green);
    background-color: var(--color-bg-green);
}

/* .status.red {
    color: var(--color-red);
    background-color: var(--color-bg-red);
} */
.status.red {
    color: var(--primary-color);
    background-color: var(--color-border-3);
}

.status.blue {
    background-color: var(--color-info);
    color: var(--color-bg-info);
}

.download-btn {
    display: flex;
    flex-direction: row;
    gap: 4px;
    border: 1px solid var(--color-border-3);
    border-radius: 8px;
    font-size: 0.63rem;
    font-weight: 600;
    line-height: var(--line-height-tiny);
    height: 40px;
    padding: 0 8px;
    width: auto;
    align-items: center;
    justify-content: center;
}

/* go to page */
.card-footer-widget {
    border: 1px solid var(--color-border-3);
    border-radius: 32px;
    color: var(--white-color);
    display: flex;
    flex-direction: row;
    align-items: center;
    width: max-content;
    overflow: hidden;
    height: 30px;
    padding: 2px;
}

.card-footer-widget label {
    margin-right: 8px;
    padding-left: 8px;
    color: var(--color-gray-level-600);
    border-left: 1px solid var(--color-border-3);
    white-space: nowrap;
    font-weight: 600;
    font-size: 0.66rem;
}

.card-footer-widget select {
    margin: 0;
    border: 0px;
    font-size: 0.66rem;
    box-shadow: none !important;
    height: 20px;
    width: 50px;
}

.card-footer-widget input {
    margin: 0;
    border: 0px !important;
    font-size: 0.66rem;
    box-shadow: none !important;
    height: 20px;
    width: 50px;
}

.card-footer-widget.go-to-page {
    margin-right: auto;
}

.card-footer-widget.go-to-page .button {
    padding: 6px 15px;
    font-weight: 400;
}

/* فرم ثبتنام */
.advertisement-form fieldset:not(:last-child) {
    margin-bottom: 20px;
}

/* Small + Medium */
@media screen and (max-width:63.99875em) {

    .main-table td,
    .main-table th {
        text-align: right;
    }

    .main-table td a.name {
        color: var(--secondary-color);
    }

    .card-footer .pagination-row {
        margin-bottom: 12px;
        padding-bottom: 8px;
        border-bottom: 1px solid var(--color-border-3);
    }
}

/* سایدبار سمت چپ  */
.left-sidebar {
    background-color: var(--white-color);
    border-right: 1px solid var(--color-border-3);
    padding: 24px;
    display: flex;
    flex-direction: column;
    max-width: 450px;
    min-width: 320px;
    position: fixed;
    left: 0;
    width: 18%;
    max-height: calc(100% - 60px);
    min-height: calc(100% - 60px);
    overflow-y: auto;
}

.user-info {
    margin-bottom: 30px;
}

.user-info-sidebar-img {
    display: flex;
    width: 100px !important;
    height: 100px !important;
    border-radius: 100px;
    border: 1px solid var(--color-border-3);
    justify-content: center;
    align-items: center;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    margin-left: 15px;
}

.user-info-sidebar-name {
    font-size: 0.933rem;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 7px;
}

.user-info-sidebar-email,
.user-info-sidebar-phone {
    font-size: 0.8rem;
    font-weight: 500;
    margin-bottom: 7px;
    color: var(--color-gray-level-600)
}

.sidebar-widget {
    position: relative;
    background-color: var(--bg-color);
    background-size: contain;
    display: flex;
    border: 1px solid var(--color-border-3);
    border-radius: 16px;
    padding: 16px;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
    color: var(--color-gray-level-600);
}

.sidebar-widget:last-child {
    margin-bottom: 0;
}

.sidebar-widget .title {
    font-size: 0.93rem;
    font-weight: 600;
    color: inherit;
}

.cta {
    background-image: url(../images/dashboard-cta-background.svg);
    background-size: cover;
}

.cta .sub-title {
    margin-bottom: 60px;
    font-size: inherit;
}

.contact-info li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 6px;

}

.contact-info li:last-child {
    margin: 0;
}

.contact-info li svg {
    margin-left: 10px;
    flex-shrink: 0;
}

.contact-info li a {
    font-size: 0.8rem;
    color: inherit;
}

.contact-info li a:hover {
    color: var(--secondary-color);
}

.sidebar-widget.contact-us .title {
    margin-bottom: 10px;
}

.sidebar-my-service-list-title {
    font-size: 0.93rem;
    margin-bottom: 16px;
    font-weight: 600;
}

.sidebar-my-service-list {
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 15px;
}

.sidebar-my-service-list li {
    flex-grow: 1;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    flex-basis: calc(50% - 15px);
    padding: 0;
    margin: 0;
}

.sidebar-my-service-list li a {
    color: inherit;
    margin-bottom: 2px;
    width: 100%;
    padding: 16px;
}

.sidebar-my-service-list li .title {
    font-size: 0.8rem;
}

.sidebar-my-service-list li .number {
    margin-bottom: 0;
    font-size: 0.8rem;
}

/* Mini Large */
@media screen and (min-width:64em) and (max-width:74.99875em) {
    .page-content .main-activities-list li {
        flex: 0 0 calc(33% - 16px)
    }
}

/* Medium */
@media screen and (min-width:40em) and (max-width:63.99875em) {
    .page-content .main-activities-list li {
        flex: 0 0 calc(50% - 16px)
    }
}

/* Small + Medium */
@media screen and (max-width:63.99875em) {
    .page-content {
        padding-right: 0;
    }

    .page-content.has-left-sidebar .content {
        padding-left: 0;
    }

    .main-table td,
    .main-table th {
        padding: 10px;
    }

    .main-table td.text-left {
        text-align: right;
    }

    .sidebar-widget {
        background-color: var(--white-color);
    }
}

/* Small  */
@media screen and (max-width:39.99875em) {
    .page-content {
        padding-top: 100px;
    }

    .page-content .main-activities-list li {
        flex: 0 0 calc(100% - 0px)
    }
}

/* 
------------------
search-box
------------------
*/
.search-box {
    border-radius: 25px;
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;

    padding: 0 8px;
    border-radius: 8px;
    border: 1px solid var(--color-border-3);
    background-color: var(--white-color);
    width: 100%;
    height: 40px;
    max-width: 300px;
}

.search-box svg {
    color: var(--color-gray-level-600);
    padding: 0;
    margin-left: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transform: rotateY(180deg);
}

.search-box input {
    font-size: 0.875rem;
    color: currentcolor;
    padding: 4px 0px 5px;
    border: 0px !important;
    box-sizing: content-box;
    background: none;
    height: 1.4375em;
    margin: 0px;
    -webkit-tap-highlight-color: transparent;
    display: block;
    min-width: 0px;
    width: 100%;
    line-height: 1.4375em;
    box-shadow: none !important;
    color: var(--palette-text-primary)
}

/* 
------------------
pagination
------------------
*/
.pagination {
    /* margin-bottom: 0; */
}

.pagination li {
    display: inline-block;
    margin-bottom: 5px;
    margin-left: 5px;
    line-height: 30px;
}

.pagination li a {
    border-radius: 50%;
    height: 30px;
    background-color: var(--white-color);
    font-weight: 400;
    min-width: 30px;
    font-size: 0.66rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-gray-level-100);
    color: var(--color-gray-level-600);
    font-weight: 600;
}

.pagination .current {
    padding: 0;
    background: transparent;
}

.pagination li.current a {
    background-color: var(--secondary-color);
    color: var(--white-color);
    border-color: var(--secondary-color);
}

.pagination li:last-child {
    margin: 0 !important;
}

.pagination-next a,
.pagination-next.disabled {
    background-color: transparent !important;
    padding-left: 15px;
    border: 0px !important;
}

.pagination-previous a,
.pagination-previous.disabled {
    background-color: transparent !important;
    padding-right: 15px;
    border: 0px !important;
}

.pagination a,
.pagination button,
.pagination .disabled {
    color: var(--color-gray-level-600);
}


.pagination-next a,
.pagination-next.disabled,
.pagination-previous a,
.pagination-previous.disabled {
    position: relative;
}

.pagination-next a::after {
    user-select: none;
    /* display: block; */
    width: 7px;
    height: 12px;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAMCAYAAACulacQAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABwSURBVHgBddDLDYAgDAbglirz9O7JERzBEZzEERyBETx5Zx5NUTEGwqsnwvdD2iJUat12JtKsaqCoNyKnxRo4uaZlHiPm4O+wBR+2wFcHoAFvf9RF1/+3B5MCIw7e14NNsBXIRkkDWC4hBgoMAQJ+ADbURowTsF3EAAAAAElFTkSuQmCC');
    background-repeat: no-repeat;
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    background-size: contain;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

.pagination-previous a::before,
.pagination-previous.disabled::before {
    content: none;
}

.pagination .disabled {
    padding: 0 !important;
}

.pagination .disabled a {
    cursor: not-allowed;
    opacity: 0.5;
    pointer-events: none;
}

.pagination-previous a::before {
    user-select: none;
    width: 7px;
    height: 12px;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAMCAYAAACulacQAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABvSURBVHgBdZC5EYAgEEX/wmg95EaWYAmWYCWUQAmUQGROPTqALoGDHBtA8N78PaCNU9qcCp0SwAwpYHsC8cOAhRCxHfvif3AkUBlTC1T3KQXRznghUcp/FeuUkJON4X5jV08jUKzSggxH4LtQD3A9eCZKcl+rVU8AAAAASUVORK5CYII=);
    background-repeat: no-repeat;
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    background-size: contain;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

.pagination-description {
    margin-bottom: 0;
    color: var(--color-gray-level-600);
    font-size: 0.66rem;
    font-weight: 600;
}

/* 
------------------
باکس های تراکنش در صفحه لیست تراکنش ها
------------------
*/
.transaction-card {
    padding: 2rem 1.5rem;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: calc(100% - 1.5rem);
}

.transaction-card .image {
    margin-bottom: 15px;
}

.transaction-card .flex-container {
    gap: 5px;
}

.transaction-card .title {
    font-size: 0.933rem;
    margin: 0;
    color: var(--primary-color);
}

.transaction-card .value {
    font-size: 0.933rem;
    margin: 0;
    color: var(--primary-color);
    font-weight: 700;
}

.transaction-card .add.button {
    margin-top: 15px;
    min-width: 180px;
}

/* 
------------------
باکس های جزئیات در صفحه جزئیات
------------------
*/
.details-card {
    padding: 1.6rem
}

.details-card .header {
    padding: 5px 0px 16px 0;
    margin-bottom: 24px;
    position: relative;
    display: inline-flex;
}

.details-card .header::after {
    content: "";
    height: 1px;
    right: -24px;
    left: 0;
    background-color: var(--secondary-color);
    position: absolute;
    bottom: 0;
}

.details-card .header p {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--primary-color);
}

.detail-list li {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    /* -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center; */
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 20px;
}

.detail-list li:last-child {
    margin-bottom: 0;
}

.detail-list li .title {
    font-size: 0.8rem;
    color: var(--color-gray-level-600);
    white-space: nowrap;
}

.detail-list li .value {
    font-size: 0.933rem;
    line-height: 1.5rem;
    text-align: left;
}

.detail-list li .value a {
    color: var(--secondary-color);
}

.detail-list li .value a:hover {
    color: var(--primary-color);
}


.details-card .table-scroll {
    margin: -1.6rem;
}

.details-card .main-table .active {
    background-color: #f3eeff !important;
}

.details-card .main-table .active td {
    position: relative;
}

.details-card .main-table .active td:first-child::before {
    content: ' ';
    display: inline-block;
    border-bottom: 1px solid var(--secondary-color);
    border-left: 1px solid var(--secondary-color);
    height: 7px;
    width: 7px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    position: absolute;
    top: 50%;
    margin-top: -3.5px;
    right: 10px;
}

.details-card .main-table td,
.details-card .main-table th {
    padding: 15px;
    padding-right: 30px;
}

.details-card .main-table thead {
    border-bottom: 1px solid var(--color-gray-level-100);
}



/* ----------
radio box
---------- */
.custom_radio {
    color: var(--palette-text-primary);
    display: inline-block;
    position: relative;
    font-size: 0.933rem;
    padding-right: 25px;
    cursor: pointer;
    -moz-user-select: none;
    -ms-user-select: none;
    margin-bottom: 3px;
}

.custom_radio:last-child {
    margin: 0;
}

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

.custom_radio .checkmark {
    position: absolute;
    top: 50%;
    margin-top: -6.5px;
    right: 0;
    height: 13px;
    width: 13px;
    border: 1.5px solid var(--color-boder-2);
    background-color: transparent;
    border-radius: 50%;
    -webkit-transition: 0.2s ease;
    -ms-transition: 0.2s ease;
    transition: 0.2s ease;
}

.custom_radio input:checked~.checkmark {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
}

.custom_radio .checkmark:after {
    content: "";
    display: block;
    position: absolute;
    /* height: 5px; */
    border: solid 1px transparent;
    right: 0;
    top: 0;
    bottom: 0;
    left: 0;
    background: transparent;
    border-radius: 50%;
}

.custom_radio input:checked~.checkmark:after {
    border-color: var(--color-gray-level-100);
}


/* ----------
check box
---------- */
.custom_check {
    color: var(--palette-text-primary);
    display: inline-block;
    position: relative;
    font-size: 0.933rem;
    padding-right: 25px;
    cursor: pointer;
    -moz-user-select: none;
    -ms-user-select: none;
    margin: 0 0 1rem;
}

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

.custom_check .checkmark {
    position: absolute;
    top: 50%;
    margin-top: -9px;
    right: 0;
    height: 18px;
    width: 18px;
    border: 1px solid var(--color-boder-2);
    background-color: transparent;
    border-radius: 4px;
    -webkit-transition: 0.2sease;
    -ms-transition: 0.2s ease;
    transition: 0.2sease;
}

.custom_check input:checked~.checkmark {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
}

.custom_check .checkmark:before {
    content: "";
    display: block;
    position: absolute;
    width: 11px;
    height: 5px;
    border: solid 2px transparent;
    border-right: none;
    border-top: none;
    transform: translate(50%, -60%) rotate(-45deg);
    right: 50%;
    top: 50%;
}

.custom_check input:checked~.checkmark::before {
    border-color: #ffffff;
}

/* 
------------------
filter-sidebar
------------------
*/

/* @media screen and (min-width:64em) {
    .has-filter-sidebar {
        padding-left: 60px;
    }
}

.filter-sidebar {
    background-color: var(--white-color);
    border-right: 1px solid var(--color-border-3);
    width: 60px;
    position: fixed;
    left: 0;
    max-height: calc(100% - 60px);
    min-height: calc(100% - 60px);
    overflow-y: auto;
}

.filter-sidebar .list .item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    white-space: nowrap;
    padding: 8px;
    color: var(--color-gray-level-600);
    border-bottom: 1px solid var(--color-gray-level-100);
    transition: all .3s ease-in-out 0s;
    width: 100%;
    cursor: pointer;
} */

.filter-sidebar {
    background-color: var(--white-color);
    border-right: 1px solid var(--color-border-3);
    display: flex;
    flex-direction: column;
    max-width: 450px;
    min-width: 320px;
    position: fixed;
    left: 0;
    width: 18%;
    top: 0;
    z-index: 13;
    max-height: calc(100%);
    min-height: calc(100%);
    transform: translateX(calc(-100% - 16px));
    -webkit-transform: translateX(calc(-100% - 16px));
    transition: transform .3s ease-in-out 0s;
    -webkit-transition: transform .3s ease-in-out 0s;
}

.filter-sidebar.open {
    transform: translateX(00%);
    -webkit-transform: translateX(0%);
}

.filter-sidebar .title {
    margin-bottom: 10px;
    color: var(--primary-color);
    font-size: 1rem;
    font-weight: 700;
}

.filter-sidebar .list>li {
    border-bottom: 1px solid var(--color-border-3);
    padding: 24px;
}

.accordion.filter-accordion,
.accordion.filter-accordion .accordion-content {
    background-color: transparent;
}

.filter-accordion .accordion-title {
    padding: 15px 0;
    border: 0px !important;
    margin: 0px;
    color: var(--primary-color);
    font-size: 0.93rem;
    background-color: transparent !important;
}

.filter-accordion .accordion-item {
    border-top: 1px solid var(--color-border-3);
}

.filter-accordion .accordion-content {
    border: 0px !important;
    padding: 10px 0px 15px;
}

.filter-accordion .accordion-content .floatingInpuBox {
    margin: 0;
}

.tag {
    display: flex;
    align-items: center;
    border: 1px solid var(--color-gray-level-300);
    border-radius: 40px;
    padding: 2px 8px;
    cursor: pointer;
    color: var(--palette-text-primary);
    font-weight: 400;
    font-size: 0.75rem;
    line-height: 1.66;
    gap: 5px;
}

.delete-filter {
    color: var(--color-red) !important;
    font-size: 0.73rem;
    margin-bottom: 10px;
    font-weight: 900;
}

.filter-overlay {
    background-color: #31313183;
    position: fixed;
    left: 0;
    right: 0;
    z-index: -1;
    top: 0;
    bottom: 0;
    display: none;
    opacity: 0;
    visibility: hidden;
}

.filter-overlay.show {
    z-index: 12;
    display: block;
    opacity: 1;
    visibility: visible;
}

.close-filter-sidebar {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--color-border-3);
    background-color: var(--white-color);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    position: absolute;
    top: 16px;
    right: -16px;
    color: var(--color-gray-level-600);
}

.filter-sidebar .footer {
    padding: 12px 16px;
    box-shadow: 0px -2px 8px 0px rgba(0, 0, 0, .06);
    position: absolute;
    background-color: var(--white-color);
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
}

.filter-sidebar .footer .button.primary {
    width: 45%;
}

.reveal-overlay {
    background: #31313183
}

.svg-icon-bg.customer {
    width: 300px;
    height: 270px;
    background-image: url(../images/customer-empty.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.svg-icon-bg.ticket {
    width: 240px;
    height: 195px;
    background-image: url(../images/ticket-empty.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.svg-icon-bg.adv {
    width: 400px;
    height: 260px;
    background-image: url(../images/advertisment-empty.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

html.dark-theme .svg-icon-bg.customer {
    background-image: url(../images/customer-empty-dark.svg);
}

html.dark-theme .svg-icon-bg.ticket {
    background-image: url(../images/ticket-empty-dark.svg);
}

html.dark-theme .svg-icon-bg.adv {
    background-image: url(../images/advertisment-empty-dark.svg);
}

/* Medium */
@media screen and (max-width:63.99875em) {

    .svg-icon-bg.customer,
    .svg-icon-bg.ticket,
    .svg-icon-bg.adv {
        max-width: 240px;
        background-size: contain;
        height: auto;
        height: 240px;
        background-position: bottom;
    }

    .transaction-card .add.button {
        min-width: 100px;
    }
}

/* Small */
@media screen and (max-width:39.99875em) {
    .filter-sidebar {
        width: 100%;
        border-right: 0px;
    }

    .filter-sidebar {
        padding-bottom: 60px;
    }

    .filter-sidebar .search-box {
        max-width: 100%;
    }

    .close-filter-sidebar-mobile {
        position: absolute;
        left: 20px;
        top: 15px;
    }

    .svg-icon-bg.customer,
    .svg-icon-bg.ticket,
    .svg-icon-bg.adv {
        max-width: 120px;
        height: 120px;
    }
}

html.dark-theme {
    /* پایه */
    --primary-color: #e5e5e5;
    /* متن اصلی */
    --secondary-color: #6e44c6;
    /* بنفش برند */
    /* --color-button-primary-hover: #7c5ee0; */
    /* بنفش هاور */
    --white-color: #1f1f1f;
    /* کارت‌ها و محتوای داخلی */
    --bg-color: #121212;
    /* پس‌زمینه اصلی */
    --color-border-3: #2c2c2c;
    --color-boder-2: #3a3a3a;
    --bg-light-purple: #1e1930;
    /* نواحی نرم بنفش */

    /* سایدبار */
    --sidebar-bg: #2d2d2d;
    --sidebar-item: #bfbfbf;
    --sidebar-item-hover: #262626;

    --inner-sidebar-bg: #202020;
    --inner-sidebar-item: #d0d0d0;
    --inner-sidebar-item-hover-bg: #2d2d2d;

    /* خاکستری‌ها */
    --color-gray-level-700: #d0d0d0;
    --color-gray-level-600: #b6b6b6;
    --color-gray-level-500: #9b9b9b;
    --color-gray-level-300: #5f5f5f;
    --color-gray-level-100: #2f2f2f;

    /* رنگ‌های وضعیت */
    --color-red: #dc9a9a;
    --color-bg-red: #3a2222;
    --color-green: #81c784;
    --color-bg-green: #1b2d21;
    --color-info: #5c6bc0;
    --color-bg-info: #1d2757;

    /* متن‌ها */
    --palette-text-primary: #e5e5e5;

    /* آیکون‌ها و SVG */
    --color-svg-main: #c3b2ff;
    --color-svg-border: #767676;
    --color-svg-fill: #222;
    --color-svg-logo-red: #8f6efb;
    --color-svg-shadow: #151515;
    --color-svg-profile-info: #bdbdbd;
    --color-svg-profile: #e5e5e5;



    --color-logo-black: #D0D0D0;
    --color-logo-red: #868686;
    --color-logo-gray: #868686;


    --svg-t-border: #868686;
    --svg-t-gray: #3c3c3c;
    --svg-t-white: #1E1E1E;
}

/* بدنه */
html.dark-theme body {
    background-color: var(--bg-color);
    color: var(--palette-text-primary);
}

/* کارت‌ها، هدر و پنل‌ها */
html.dark-theme .card,
html.dark-theme header,
html.dark-theme .sidebar-widget,
html.dark-theme .filter-sidebar {
    background-color: var(--white-color);
    border-color: var(--color-border-3);
}

/* دکمه‌ها و لینک‌ها */
html.dark-theme a:not(.purple) {
    color: var(--color-gray-level-600);
}

html.dark-theme label {
    color: var(--primary-color)
}

html.dark-theme .button.primary {
    background-color: var(--secondary-color);
    color: #fff;
}

html.dark-theme .button.primary:hover {
    background-color: var(--color-button-primary-hover);
}

html.dark-theme .transaction-card .value {
    color: var(--secondary-color);
}

/* ورودی‌ها */
html.dark-theme .floatingInpuBox {
    background-color: #1c1c1c;
    border-color: var(--color-boder-2);
}

html.dark-theme [type=color],
html.dark-theme [type=date],
html.dark-theme [type=datetime-local],
html.dark-theme [type=datetime],
html.dark-theme [type=email],
html.dark-theme [type=month],
html.dark-theme [type=number],
html.dark-theme [type=password],
html.dark-theme [type=search],
html.dark-theme [type=tel],
html.dark-theme [type=text],
html.dark-theme [type=time],
html.dark-theme [type=url],
html.dark-theme [type=week],
html.dark-theme textarea,
html.dark-theme select {
    color: var(--palette-text-primary);
    background-color: transparent !important;
}

html.dark-theme select option {
    color: var(--palette-text-primary);
    background-color: #1c1c1c !important;
    border-color: var(--color-boder-2) !important
}

html.dark-theme .pagination a:hover,
html.dark-theme .pagination button:hover {
    background: unset !important;
}

html.dark-theme .floatingInpuBox svg {
    color: var(--color-gray-level-600)
}

html.dark-theme .floatingInpuBox label {
    color: #9a9a9a;
}

/* جدول‌ها */
html.dark-theme .main-table tbody {
    background-color: #181818;
}

html.dark-theme .main-table tbody tr:nth-child(even) {
    background-color: #202020;
}

/* سایدبار راست و چپ */
html.dark-theme .rightSidebar,
html.dark-theme .left-sidebar {
    background-color: var(--sidebar-bg);
    color: var(--sidebar-item);
}

html.dark-theme .rightSidebar .list .item a:hover {
    background-color: var(--sidebar-item-hover);
    color: #fff;
}

/* اسکرول‌بار */
html.dark-theme ::-webkit-scrollbar-thumb {
    background-color: #555;
}

html.dark-theme .reveal,
html.dark-theme .dropdown-pane.styled {
    background-color: var(--white-color);
    border-color: var(--color-border-3);
}

html.dark-theme .details-card .main-table .active {
    background-color: #332b46 !important
}


html.dark-theme .status.blue {
    color: #BBCCFF;
    background-color: #1F232F
}