@import url('../fontiran.css');

* {
    margin: 0;
    padding: 0;
    /* transition: all .3s; */
    box-sizing: border-box;
}

:root {
    --background: #fff;
    --amoot-color: #2166AE;
    --owj-primary-color: #582F87;
    --payamak-primary-color: #ff8a11;
    --avanak-primary-color: #42bfb9;
    --alavan-primary-color: #ed1944;
    --semantic-red: #D22B2B;
    --semantic-yellow: #C19304;
    --semantic-green: #27AE60;
    --text-color: #333;
    --border-input: #828282;
    --alavan-primary-color: #9E0020;
    /* --font-new: 'Yekan Bakh VF'; */
    --font-new: 'Yekan Bakh FaNum'
}

.color-gray-3 {
    color: #828282;
}

.font-12 {
    font-size: 12px !important;
}

.font-14 {
    font-size: 14px !important;
}

.post-content img {
    max-width: 100%;
}

.text-gray {
    color: #9B9999 !important;
}

.btn-cancel {
    background-color: #828282;
    color: #fff;
    padding: 6px 12px;
    border-radius: 8px;
    outline: none;
    box-shadow: none;
    border: none;
}

.btn-delete {
    background-color: #D22B2B;
    color: #fff;
    padding: 6px 12px;
    border-radius: 8px;
    outline: none;
    box-shadow: none;
    border: none;
    margin: 0 10px
}

.swal2-title {
    font-size: 16px !important;
}

body {
    font-family: var(----font-new, 'Yekan Bakh FaNum');
    background-color: var(--background);
}

input,
button {
    outline: none;
    box-shadow: none;
}

    /* Chrome, Safari, Edge, Opera */
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    /* Firefox */
    input[type=number] {
        -moz-appearance: textfield;
    }

/* - - - Global Style Element - - -  */
a {
    text-decoration: none;
    color: #555;
}


.row > *:not([class*=col]) {
    flex-shrink: unset;
    width: initial;
    max-width: initial;
    padding-left: 0;
    padding-right: 0;
    /*    margin-top: inherit;*/
}


a:hover {
    text-decoration: none;
    color: var(--amoot-color, #2166ae);
}

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

#app {
    position: relative;
}

p {
    line-height: 30px;
    margin-bottom: 0;
}

.register-link .badge {
    margin-left: 12px;
    font-size: 12px;
    display: inline-block;
    line-height: 1.75;
}

.register-link a {
    font-weight: 700;
}

/* - - - End Global Style Element - - - */
/* - - - Global Style Class - - - */

div#appContent {
    position: relative;
}

.overflow-hidden {
    overflow: hidden;
}

.mt-app {
    margin-top: 1rem;
}

.m-inline-auto {
    margin-inline: auto;
}

.ml-app {
    margin-left: 12px;
}

.mb-app {
    margin-bottom: 12px;
}

.mr-app {
    margin-right: 12px;
}

.alert {
    display: inline-flex;
    padding: 15px 16px 15px;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 16px;
    border-radius: 4px;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    width: 100%;
    background: rgba(33, 102, 174, 0.10);
    color: var(--main-blue, #2166AE);
}

.alert-danger {
    background: rgba(235, 87, 87, 0.10);
    color: var(--Red, #EB5757);
    background-image: url('../icons/info-circle.svg');
    background-repeat: no-repeat;
    background-position: 99.5% center;
    padding-right: 32px;
}


.alert-success {
    background: rgba(39, 174, 96, 0.10);
    color: var(--Green-2, #27AE60);
    background-image: url('../icons/success-check.svg');
    background-repeat: no-repeat;
    background-position: 99.5% center;
    padding-right: 32px;
}

.alert-info {
    background: rgba(217, 162, 27, 0.10);
    color: var(--orange-color, #B78405);
    background-image: url('../icons/info-circle-orange.svg');
    background-repeat: no-repeat;
    background-position: 99.5% center;
    padding-right: 32px;
}

#pageLoader {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #333333de;
    z-index: 999999999;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #333;
}

    #pageLoader.active {
        display: flex;
    }


.client-area {
    background-color: #F8FAFE;
}


.f-auto {
    flex: 1 0 0
}


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

.sms-color {
    color: var(--payamak-primary-color);
}

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

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

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


.bg-white {
    background: #fff
}

.bg-gray {
    background: #F6F7FA;
}


.sms-bg {
    background: #FFF6EC !important;
}

.owj-bg {
    background: #fbecff !important;
}

.avanak-bg {
    background: #ecf6ff !important;
}

.avanak-solid-bg {
    background-color: rgba(66, 191, 185, 0.20) !important;
}

.owj-solid-bg {
    background-color: rgba(88, 47, 135, 0.10) !important;
}

.sms-solid-bg {
    background-color: rgba(246, 139, 83, 0.20) !important;
}

.alavan-solid-bg {
    background-color: rgb(245, 223, 228) !important;
}


.avanak-solid-primery-bg {
    background-color: #42BFB9 !important;
}

.sms-solid-primery-bg {
    background-color: #F68B53 !important;
}

.owj-solid-primery-bg {
    background-color: #582F87 !important;
}

.alavan-solid-primery-bg {
    background-color: #ed1944 !important;
}


.require-star {
    top: -4px;
    position: relative;
    color: #D22B2B;
    font-size: 14px;
}

.dropdown {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .dropdown:after {
        font-size: 16px;
        content: '\ee97';
        font-family: "iconsax";
        font-style: normal;
        font-weight: normal;
        speak: never;
        display: inline-block;
        text-decoration: inherit;
        width: 1em;
        display: inline-block;
        width: 10px;
        height: 10px;
        background-repeat: no-repeat;
        background-size: 100%;
        margin-right: 5px;
    }

.btn {
    outline: none;
    border: none;
    padding: 4px;
    color: var(--amoot-color);
    background-color: transparent;
    margin-left: 5px;
    cursor: pointer;
}

.btn-primary-outline {
    border: 1px solid var(--amoot-color, #2166ae);
    color: var(--amoot-color, #2166ae);
    background-color: transparent;
}


    .btn-primary-outline:hover,
    .btn-primary-outline:focus {
        border: 1px solid var(--amoot-color, #2166ae);
        color: var(--amoot-color, #2166ae);
        background-color: transparent;
    }


.amoot-btn {
    background-color: var(--amoot-color, #2166ae);
    cursor: pointer;
    border-radius: 4px;
    color: #fff;
    border: 1px solid transparent;
}

    .amoot-btn:hover,
    .amoot-btn:focus {
        background-color: #2166aee4;
        cursor: pointer;
        color: #fff;
    }

.amoot-btn-sm {
    padding: 6px 12px !important;
    font-size: 13px !important;
    margin: 10px 6px !important;
    background-color: transparent !important;
    color: var(--amoot-color, #2166ae);
    border: 1px solid var(--amoot-color, #2166ae);
    transition: all 0.3s;
}

    .amoot-btn-sm:hover {
        background-color: var(--amoot-color, #2166ae) !important;
        color: #fff;
    }

    .amoot-btn-sm.active {
        background-color: var(--amoot-color, #2166ae) !important;
        color: #fff;
    }

.sms-btn {
    background: var(--payamak-primary-color);
    color: #fff;
}

.owj-btn {
    background: var(--owj-primary-color);
    color: #fff;
}

.avanak-btn {
    background: var(--avanak-primary-color);
    color: #fff;
}

.alavan-btn {
    background-color: #ed1944;
    color: #fff;
}


.icon-btn {
    display: flex;
    align-items: center;
}

.offcanvas {
    position: fixed;
    bottom: 0;
    left: unset !important;
    right: -1000px !important;
    z-index: 1045;
    display: flex;
    flex-direction: column;
    max-width: 100%;
    visibility: hidden;
    background-color: #fff;
    background-clip: padding-box;
    outline: 0;
    transition: all .6s ease;
    transform: unset !important;
}


    .offcanvas.show.hiding, .offcanvas {
        position: fixed;
        bottom: 0;
        z-index: 1045;
        display: flex;
        left: unset !important;
        right: -1000px !important;
        flex-direction: column;
        max-width: 100%;
        visibility: hidden;
        background-color: #fff;
        background-clip: padding-box;
        outline: 0;
        transition: all .8s ease;
    }

        .offcanvas.show, .offcanvas.showing {
            top: 0;
            z-index: 999;
            visibility: visible;
            width: 300px !important;
            right: 0px !important;
            padding: 8px;
            transition: all .62s ease;
        }


.d-flex {
    display: flex !important;
    flex-wrap: nowrap
}

.f-column {
    flex-direction: column;
}

.f-row {
    flex-direction: row;
}

.justify-content-center {
    justify-content: center;
}

.justify-content-between {
    justify-content: space-between !important;
}

.justify-content-evenly {
    justify-content: space-evenly !important;
}

.align-items-center {
    align-items: center !important;
}

.f-wrap {
    flex-wrap: wrap;
}

.bold {
    font-weight: bold;
}

.collapse:not(.show) {
    display: none;
}

.collapsing {
    height: 0;
    overflow: hidden;
    transition: height .35s ease;
}

.icon-box:before {
    content: "" !important;
}

.icon-box {
    display: flex;
    flex-direction: column;
    font-size: 12px;
    padding: 5px;
}

    .icon-box img {
        width: 36px;
        margin: 0 auto 7px;
    }

.badge {
    display: inline-flex;
    padding: 3px 11px 2px 12px;
    justify-content: center;
    align-items: center;
    font-weight: bold;
}

.badge-sms {
    color: var(--payamak, #F68B53);
    border-radius: 0px 2px 2px 0px;
    background: rgba(246, 139, 83, 0.10);
}

.badge-avanak {
    color: var(--avanak-primary-color, #42BFB9);
    border-radius: 0px 2px 2px 0px;
    background: rgba(66, 191, 185, 0.10);
}

.badge-owj {
    color: var(--owj-primary-color, #582F87);
    border-radius: 0px 2px 2px 0px;
    background: rgba(147, 85, 207, 0.10);
}

.badge-succes {
    border-radius: 4px;
    background: #0AD0AC;
    color: #fff;
}

.badge-danger {
    color: var(--semantic-red);
    background: rgba(235, 87, 87, 0.10);
    border-radius: 36px;
}

.badge-blue {
    border-radius: 4px;
    background: rgba(47, 128, 237, 0.10);
    color: #2F80ED;
}

.badge-warn {
    color: var(--semantic-yellow);
    background: #F3ECD7;
    border-radius: 4px;
}

.badge-success {
    color: #27AE60;
    background: rgba(39, 174, 96, 0.10);
    border-radius: 4px;
}

.badge-gray {
    border-radius: 4px;
    background: var(--Gray-6, #F2F2F2);
    color: var(--Gray-3, #828282);
}

table [class^='badge'] {
    padding: 6px 10px;
    border-radius: 4px;
    white-space: nowrap;
    display: inline-block;
}

.padding-button {
    padding: 8px 10px;
    margin-left: 10px;
}

.min-width-button {
    min-width: 120px;
}

.border-radius-4 {
    border-radius: 4px;
}

.h4,
h4 {
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
}

.padding-box {
    padding: 16px;
}

.w-100 {
    width: 100%;
}

.btn-link {
    color: var(--amoot-color);
    position: relative;
    display: inline-block;
    text-decoration: none !important;
}

.amoot-btn[disable] {
    background: #F1F3F9;
    color: rgba(29, 36, 51, 0.36);
}

.btn-link[disable] {
    color: #BDBDBD;
    cursor: no-drop;
}

.auto-width > * {
    flex: 1 1 auto;
    margin-inline: 24px;
}

    .auto-width > *:first-child {
        margin-inline-start: 12px;
    }

    .auto-width > *:last-child {
        margin-inline-end: 12px;
    }

.box-posts {
    padding: 24px 24px 16px 24px;
    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.10), 0px 0px 2px 0px rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    margin-bottom: 24px;
}

    .box-posts ul.box-posts-wrap li a h3 {
        height: 30px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        width: 100%;
    }

    .box-posts .box-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

        .box-posts .box-header p {
            font-size: 18px;
            font-weight: bold;
        }

        .box-posts .box-header .btn {
            font-size: 12px;
            color: var(--main-blue, #2166AE);
            text-align: right;
            font-size: 12px;
            font-style: normal;
            font-weight: 500;
        }

    .box-posts .box-body {
        margin-top: 36px;
    }

    .box-posts ul.box-posts-wrap {
        display: flex;
        flex-direction: column;
    }

        .box-posts ul.box-posts-wrap li a {
            padding: 10px 0;
        }

            .box-posts ul.box-posts-wrap li a img {
                margin-left: 24px;
                width: 66px;
                border-radius: 4px;
                overflow: hidden;
                aspect-ratio: 1/1;
            }

            .box-posts ul.box-posts-wrap li a h3 {
                font-size: 14px;
                color: #000;
                font-weight: 400;
                margin-bottom: 10px;
            }

            .box-posts ul.box-posts-wrap li a div {
                display: flex;
                /*    flex-direction: column;*/
                justify-content: space-between;
                height: 100%;
            }

    .box-posts li {
        border-bottom: 1px solid rgba(0, 0, 0, 0.10);
    }

    .box-posts li {
        border-bottom: 0;
    }

    .box-posts ul.box-posts-wrap li.blog-text a {
        flex-direction: column;
        display: flex;
    }

        .box-posts ul.box-posts-wrap li.blog-text a span {
            color: #9B9999;
            text-align: right;
            font-size: 12px;
            font-style: normal;
            font-weight: 300;
        }

    .box-posts ul.box-posts-wrap li {
        border-bottom: 1px solid rgba(0, 0, 0, 0.10);
    }

        .box-posts ul.box-posts-wrap li:last-child {
            border-bottom: none;
        }

/* ----- Modal -----  */

.modal {
    display: none;
    position: fixed;
    z-index: 99999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 14px;
    border: 1px solid #888;
    width: 100%;
    max-width: var(--max-width-modal, 100%);
}

.modal-header,
.modal-footer {
    padding: 10px 20px;
    /* background-color: #f1f1f1;
    border-bottom: 1px solid #ddd; */
}

.modal-header {
    border-bottom: none;
}


.modal-page .modal-header {
    padding: 8px 4px;
}

.modal-header p {
    margin: 0;
    font-size: 18px;
}

.modal-body {
    padding: 0 14px 14px;
}

.close {
    color: #aaa;
    float: right;
    font-size: 0;
    font-weight: bold;
}

    .close:hover,
    .close:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }

.modal-footer {
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid #ddd;
}

    .modal-footer button {
        margin-left: 10px;
        padding: 10px 20px;
        cursor: pointer;
    }

.title-step {
    font-weight: bold;
}

.modal form label {
    display: flex;
    flex-direction: column;
    font-size: 14px;
    color: #4f4f4f;
}

    .modal form label input {
        padding: 10px 12px;
        border-radius: 4px;
        border: 0.5px solid var(--Gray-3, #828282);
        margin-top: 8px;
    }

.modal select:focus {
    border-color: #2166AE;
}

.otp-step {
    display: none !important;
}

    .otp-step.show {
        display: flex !important;
    }


.otp-try-wrapper {
    margin-top: 2rem;
    font-size: 14px;
    gap: 12px;
}

#modalOtp .input-group.d-flex input {
    padding: 5px;
    width: 54px;
    margin: 0 4px;
    height: 40px;
    text-align: center;
    border-radius: 4px;
    border: 0.5px solid var(--border-input, #828282);
    background: var(--Neutral-White, #FFF);
}

.digit-group {
    flex-direction: row-reverse;
}

#modalOtp .input-group.d-flex {
    margin-top: 24px;
}



.digit-group input.valid,
input.valid {
    border-color: var(--semantic-green) !important;
}

.digit-group input.invalid,
input.invalid {
    border-color: red !important;
}

.digit-group input:focus,
input:focus {
    border-color: var(--amoot-color) !important;
}

/* --- End Modal --- */
/*  - - - End Global Style Class - - - */


/* breadcrumb Start */

nav[aria-label="breadcrumb"] {
    margin-bottom: 0;
}

ol.breadcrumb {
    margin-top: 20px;
}

    ol.breadcrumb li a:after {
        content: "" !important;
        display: inline-block !important;
        background-image: url('../images/icons/arrow-left.svg') !important;
        background-size: 100%;
        background-repeat: no-repeat;
        width: 10px;
        height: 10px;
        background-position: center;
        margin-inline: 6px;
    }

    ol.breadcrumb li:last-child a:after {
        opacity: 0;
    }

    ol.breadcrumb li span {
        color: #666;
    }

.breadcrumb-item + .breadcrumb-item::before {
    content: none !important;
}

.breadcrumb-item + .breadcrumb-item {
    padding-right: 0;
}

ol.breadcrumb li {
    line-height: 40px;
}

@media screen and (max-width: 512px) {
    ol.breadcrumb li {
        font-size: 12px;
    }
}
/* breadcrumb End */
header {
    width: 100%;
    padding: 16px 0;
    position: sticky;
    top: 0;
    backdrop-filter: blur(10px);
    z-index: 9;
    background-color: #ffffff5e;
    box-shadow: 0 0 5px 0 #d1d1d1;
}

    header[loggedin] .user-dropdown {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-radius: 30px;
        border: 0.5px solid rgba(0, 0, 0, 0.10);
        gap: 10px;
        color: #000;
        font-weight: normal;
    }

        header[loggedin] .user-dropdown .icon {
            width: 16px;
        }

#header-menu li a:after {
    display: flex;
    align-items: center;
}


header ul li {
    font-weight: 600;
    font-size: 12px;
}

header ul#header-menu li {
    display: inline-block;
    margin: 8px 12px 0px 12px;
    position: relative;
}

header ul#header-mobile-menu li {
    border-bottom: 1px solid #eee;
    padding: 12px 4px;
    margin: 16px 0;
}

header img.amoot-logo {
    width: 120px;
    margin-left: 16px;
}

header .icon-btn {
    padding: 5px;
    margin-left: 0.5rem;
    position: relative;
}

    header .icon-btn .badge:empty {
        display: none !important;
    }

    header .icon-btn .badge {
        padding: 2px 5px;
        position: absolute;
        font-size: 10px;
        top: 1px;
        right: 2px;
        background: #D22B2B;
        border-radius: 31px;
        color: #fff;
    }

    header .icon-btn img {
        width: 24px;
    }

header .amoot-btn {
    padding: 8px 16px;
    background-color: transparent;
    color: var(--amoot-color);
    font-weight: bold;
}

header .dashboard-btn {
    display: none;
}

/* - - - Footer - - -  */
footer {
    background: #F8FAFE;
    padding: 40px 12px 0 12px;
}

.footer-links-wrapper {
    width: 100%;
    margin-bottom: 30px;
}

footer h6 {
    color: #131313;
    text-align: right;
    font-family: "Yekan Bakh";
    font-size: 16px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    margin-bottom: 20px;
}

footer .footer-menu ul li a {
    color: var(--Gray-2, #4F4F4F);
    text-align: right;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    margin-bottom: 8px;
    display: inline-block;
}

.amoot-brands {
    justify-content: center;
    display: flex;
    flex-direction: column;
    text-align: center;
}

    .amoot-brands div a {
        margin-left: 16px;
    }

        .amoot-brands div a:last-child {
            margin-left: 0;
        }

    .amoot-brands img.main-image {
        width: 72px !important;
        height: 64px !important;
    }

footer .amoot-brands .amoot-icon {
    margin-right: 20px;
}

ul.contact-footer-menu li a img {
    width: 20px;
    margin-left: 5px;
}

footer .footer-menu ul li {
    margin-bottom: 8px;
    font-size: 14px;
}

footer .social-icons ul li {
    display: inline-block;
}

    footer .social-icons ul li a img {
        width: 28px;
    }

.electronic-cert-logos a {
    margin-right: 10px;
}

.electronic-cert-logos {
    margin-top: 10px;
}

    .electronic-cert-logos img {
        width: 60px !important;
        height: 70px !important;
        object-fit: cover;
        padding: 8px;
        background: #fff;
    }


footer .footer-bottom-section {
    border-top: 1px solid #ededed;
    padding: 20px 0;
    color: var(--text-color, #131313);
    text-align: right;
    font-family: "Yekan Bakh";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
}


    footer .footer-bottom-section a.amoot-color {
        color: var(--amoot-color);
    }


footer .site-rule-item {
    margin-left: 10px;
    border-right: 1px solid #bdbdbd;
    padding-right: 10px;
}


    footer .site-rule-item:first-of-type {
        margin-left: 10px;
        border: 0;
        padding: 0;
    }


.offcanvas-header {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
}

.offcanvas-backdrop.fade {
    opacity: 0;
    top: 0;
    left: 0;
    z-index: 9;
    width: 100%;
    height: 100%;
    transition: 0.3s all;
    background: #000000ad;
    visibility: visible;
    position: fixed;
    display: flex !important;
}

    .offcanvas-backdrop.fade.show {
        opacity: 1;
        top: 0;
        left: 0;
        z-index: 9;
    }

.tooltip:after {
    content: attr(data-text);
    text-align: center;
    min-width: 3em;
    max-width: 21em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 1ch 1.5ch;
    border-radius: .3ch;
    box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35);
    background: #333;
    color: #fff;
    position: absolute;
    top: -33px;
    left: -48%;
    opacity: 0;
    transition: 0.3s all;
    visibility: hidden;
    /* display:none; */
}

.tooltip:hover::after {
    opacity: 1;
    min-width: 3em;
    max-width: 21em;
    width: auto;
    height: auto;
    visibility: visible;
}

.tooltip {
    position: relative;
}

.dropdown-wrapper {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    display: block;
    height: auto;
    max-height: 0px;
    width: 170px;
    top: 40px;
    border-radius: 4px;
    background: var(--Neutral-White, #FFF);
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.14);
    overflow: hidden;
    padding: 0;
    border: none;
}

    .dropdown-menu.show.closing {
        max-height: 0px;
        opacity: 0;
        visibility: hidden;
    }

    .dropdown-menu.closing:not(.show) {
        max-height: 400px;
        opacity: 1;
        visibility: visible;
    }

    .dropdown-menu.show {
        position: absolute;
        display: block;
        height: auto;
        padding: 8px;
        opacity: 1;
        visibility: visible;
        max-height: fit-content;
        width: 170px;
        top: 40px;
        border-radius: 4px;
        background: var(--Neutral-White, #FFF);
        box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.14);
    }

.dropdown-item,
.dropdown-item a {
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

    .dropdown-item a {
        padding: 8px 10px;
        border-radius: 4px;
    }

header .dropdown-item {
    padding: 0
}

    header .dropdown-item:focus,
    header .dropdown-item:hover {
        background-color: inherit;
    }

.dropdown-item {
    margin-bottom: 4px;
    border: 0.5px solid var(--Gray-5, #E0E0E0);
}

    .dropdown-item a img {
        width: 45px;
    }

.dropdown-header {
    font-size: 12px;
}

header .cart-item img {
    width: 36px;
    margin-left: 8px;
}

header .cart-item {
    border-bottom: 0.5px solid #ededed;
    padding: 10px;
    font-size: 12px;
}

.cart-item button {
    border: none;
    font-size: 22px;
    background-color: transparent;
    outline: none;
    cursor: pointer;
    color: var(--semantic-red);
}

header .cart-wrapper .show {
    width: 340px;
    left: 10px;
    box-shadow: 0 10px 30px 0 #aaaaaa;
}

header .cart-wrapper .cart-item {
    font-size: 14px;
    padding: 16px 20px !important;
}

header .cart-wrapper .dropdown-menu.show {
    padding: 0;
}

header .cart-wrapper .body {
    padding: 12px 0 0 0;
}

header .cart-wrapper .footer {
    background-color: #eef7ff;
    padding: 16px 20px;
}

    header .cart-wrapper .footer span {
        font-size: 14px;
    }

    header .cart-wrapper .footer small {
        font-size: 12px;
    }

    header .cart-wrapper .footer span.price {
        font-weight: 600 !important;
        font-size: 18px;
    }


header .cart-wrapper .empty {
    text-align: center;
}

    header .cart-wrapper .empty a {
        color: #2166AE;
        font-size: 14px;
        margin-right: 14px;
    }

    header .cart-wrapper .empty img {
        height: 22px;
        margin-left: 0;
    }


header .services-menu-wrapper .show {
    width: 120px;
    left: -120px;
    top: 40px !important;
}

header .services-menu-wrapper img {
    width: 80px;
}

.dropdown-menu:empty::before {
    content: "سبد شما خالی می باشد.";
    font-size: 12px;
    padding: 0;
    color: #000;
    width: 100%;
    display: block;
    text-align: right;
}


header .icon-btn i {
    font-size: 23px;
    width: auto;
    align-items: center;
    display: flex;
    color: var(--amoot-color);
}

header .notification-item a div {
    width: 100%;
}

.notification-wrapper .show {
    width: 230px;
    padding: 12px;
    left: 0;
}

header .notification-item a {
    border: none;
    border-bottom: 0.5px solid var(--Gray-5, #E0E0E0);
    padding: 0px 0 5px;
}

    header .notification-item a div.d-flex:nth-child(2) * {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

.submit-client {
    padding: 6px;
    font-family: inherit;
}

.bordered-link {
    padding: 8px 12px;
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    border-radius: 4px;
    border: 1px solid var(--Gray-5, #E0E0E0);
}

    .bordered-link.active {
        background: #E1F1FF;
        border-color: var(--amoot-color);
    }

.offcanvas.client-selector:not(.show) {
    display: none;
}

.offcanvas.client-selector.hiding {
    right: unset;
    left: 0;
    transform: translate(-400px, 0px);
    transition: 0.3s all;
}

.offcanvas.side-window.show {
    right: unset;
    left: 0;
    transform: translate(0px, 0px);
    width: 350px;
}

ul.submenu {
    display: none;
    position: absolute;
}

    ul.submenu li {
        width: 100%;
    }

.submenu.open,
ul#header-menu li:hover .submenu {
    display: block;
    width: 200px;
    height: auto;
    top: 20px;
    background: #fff;
    padding: 10px;
    box-shadow: 0 0 7px 0 #e1e1e1;
}



    .submenu.open li a,
    ul#header-menu li:hover .submenu a {
        padding: 16px 10px;
        display: inline-block;
    }


ul#header-menu .submenu li {
    margin: 0;
    border-radius: 5px;
}

    ul#header-menu .submenu li:hover {
        background-color: #f6f7fa;
    }

    ul#header-menu .submenu li.active,
    ul#header-menu .submenu li.active a {
        color: #2166AE;
        background-color: #f6f7fa;
    }


.offcanvas-body {
    padding: 0;
}

ul#header-mobile-menu li a.dropdown:after {
    position: relative;
    top: -0px;
}

ul#header-mobile-menu li a.dropdown.open:after, ul#header-mobile-menu li.active a.dropdown:after {
    top: -4px;
    position: relative;
}

ul#header-mobile-menu li a.dropdown.open:after {
    transform: rotate(0deg);
}

.pagination li a {
    border-radius: 3px;
    padding: 2px 10px;
    display: inline-block;
    margin: 0 10px;
    color: #828282;
    font-family: inherit;
}

.pagination {
    margin-top: 1rem;
}

    .pagination li a.active {
        color: var(--amoot-color);
        background: #F6F7FA;
    }

/*  End Home Page */
@media screen and (min-width: 300px) and (max-width:640px) {
    .sm-wrap {
        flex-wrap: wrap;
    }

    .hidden-sm {
        display: none !important;
    }

    #header-menu {
        display: none;
    }


    header img.amoot-logo {
        width: 100px;
        margin-left: 16px;
    }

    footer .copyright .row {
        justify-self: center !important
    }

    header .icon-btn i {
        font-size: 25px;
        color: #000;
    }

    .dropdown-menu {
        left: 30px;
        top: 70% !important;
    }

    #offcanvasRight .offcanvas-body {
        display: flex;
        flex-direction: column;
    }

        #offcanvasRight .offcanvas-body > img {
            max-width: 120px;
            margin: 0 auto;
            margin-bottom: 2rem;
            margin-top: 0.5rem;
        }


    ul#header-mobile-menu li a {
        padding: 1em;
        width: 100%;
        border-bottom: 1px solid #08527821;
        display: inline-flex;
        justify-content: space-between;
        font-size: 14px;
    }

        ul#header-mobile-menu li a.dropdown:after {
            transform: rotate(90deg);
            transition: 0.3s all;
        }

    ul.submenu {
        display: none;
        position: relative;
        top: unset !important;
    }

    ul#header-mobile-menu li a.dropdown.open:after,
    ul#header-mobile-menu li.active a.dropdown:after {
        transform: rotate(0deg);
    }


    .tabs {
        width: 100%
    }

    .slider-box-brandInfo .ct-content {
        height: 103px;
        overflow: hidden;
    }

    .swiper.brandCommentTextSlider > div {
        height: auto !important;
    }

    .swiper.brandCommentSlider {
        display: none;
    }

    .products-brand-wrap {
        margin-top: 3rem !important;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        padding: 0 12px;
    }

        .products-brand-wrap > div {
            padding: 0;
            margin: 0 !important;
            width: 100%;
        }

    .submenu.open, ul#header-menu li:hover .submenu {
        width: 100%;
        background: #f5f5f5;
    }

    .video-about-dark-info {
        font-size: 14px;
        text-align: right;
    }

        .video-about-dark-info svg {
            width: 60px;
            height: 60px;
        }
}

@media screen and (min-width: 640px) and (max-width:768px) {
    #header-menu {
        display: none;
    }

    .hidden-sm {
        display: none !important;
    }

    #offcanvasRight .offcanvas-body > img {
        max-width: 120px;
        margin: 0 auto;
        margin-bottom: 2rem;
        margin-top: 0.5rem;
    }

    ul#header-mobile-menu li a {
        padding: 5px;
        width: 100%;
        display: inline-flex;
        justify-content: space-between;
        font-size: 14px;
    }

    ul.submenu {
        position: relative;
        top: unset !important;
    }


    ul#header-menu {
        display: none;
    }

    .submenu.open, ul#header-menu li:hover .submenu {
        width: 100%;
        background: #f5f5f5;
    }

    .slider-box-brandInfo .ct-content {
        height: auto;
        overflow: hidden;
        max-width: 85vw;
    }

    .audio-controler {
        max-height: 80px;
        max-width: 85vw;
    }

    .audio-controler div {
        width: 88%;
    }
}

@media screen and (min-width: 768px) {
    .hidden-lg {
        display: none !important;
    }

    ul#header-mobile-menu a {
        padding: 0.5em;
        display: block;
    }

    ul#header-mobile-menu .submenu {
        position: relative;
        top: unset;
    }

    ul#header-mobile-menu {
        margin-top: 2rem;
    }

        ul#header-mobile-menu li a.dropdown {
            width: 100%;
            justify-content: space-between;
            display: flex;
            align-items: center;
        }

            ul#header-mobile-menu li a.dropdown:after {
                margin-right: auto;
                width: 20px;
                height: 20px;
                transform: rotate(90deg);
                transition: 0.3s all;
            }

            ul#header-mobile-menu li a.dropdown.open:after, ul#header-mobile-menu li.active a.dropdown:after {
                margin-right: auto;
                width: 20px;
                height: 20px;
                top: 0;
                transform: rotate(0);
            }
}


@media screen and (min-width: 992px) {
    .mobileMenu {
        display: none;
    }
}

@media screen and (max-width: 992px) {
    ul#header-menu {
        display: none;
    }
}


@media screen and (max-width: 1992px) {
    header ul#header-menu li {
        font-size: 0.9rem;
    }

    header .icon-btn .badge {
        padding: 2px 4px;
        position: absolute;
        font-size: 10px;
        top: 0px;
        right: 1px;
        background: #D22B2B;
        border-radius: 31px;
        color: #fff;
    }

    header[loggedin] .user-dropdown {
        padding: 5px 5px;
        gap: 6px;
    }

        header[loggedin] .user-dropdown .icon {
            width: 14px;
            margin-right: 5px;
        }

    .dropdown {
    }

    header img.amoot-logo {
        width: 94px;
    }

    button.btn.servicesMenu i {
        font-size: 20px;
    }

    header a.amoot-btn {
        font-size: 13px;
    }

    header .icon-btn img {
        width: 22px;
    }
}

.avatar {
    max-width: 24px;
    border-radius: 50px;
}

#payment-result > div > .card {
    border: 1px solid transparent !important;
}

#payment-result .card > img {
    max-width: 100px;
    margin: 40px 0;
}

#payment-result .card > h4.success {
    color: #64D90B;
    font-weight: 600;
}

#payment-result .card > h4.faild {
    color: #FF270E;
    font-weight: 600;
}

#payment-result .footer img {
    max-width: 24px;
}

#payment-result .btn-group a {
    border-radius: 7px;
    padding: 8px 12px;
    margin: 0 10px;
}

    #payment-result .btn-group a.owj-btn {
        background-color: var(--owj-primary-color);
        color: #fff;
    }

    #payment-result .btn-group a.avanak-btn {
        background-color: var(--avanak-primary-color);
        color: #fff;
    }

    #payment-result .btn-group a.payamak-btn {
        background-color: var(--payamak-primary-color);
        color: #fff;
    }

    #payment-result .btn-group a.site-btn {
        background-color: var(--amoot-color);
        color: #fff;
    }


    #payment-result .btn-group a:hover {
        opacity: 0.8;
    }

    #payment-result .btn-group a.download-btn {
        color: var(--amoot-color);
        border: 1px solid var(--amoot-color);
        text-align: center;
    }

#payment-result p > a {
    color: var(--amoot-color);
}

.form-select {
    line-height: 24px;
}

    .form-select:focus,
    .form-control:focus {
        box-shadow: none !important;
    }

.pagination-container {
    display: flex;
    list-style: none;
    padding-left: 0;
}

.pagination-item {
    margin: 0 5px;
}

.pagination-link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    text-align: center;
    text-decoration: none;
    border: 1px solid #f1f1f1;
    border-radius: 7px;
    background-color: #ffffff;
    color: #333333;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

    .pagination-link:hover {
        background-color: #f1f1f1;
        color: #2166ae;
    }

.pagination-item.active .pagination-link {
    background-color: #2166ae;
    color: #ffffff;
}

.pagination-link img {
    max-width: 15px;
    height: auto;
}

.btn-basket-item {
    background-color: #2166AE;
    color: #fff;
    border-radius: 4px;
    padding: 8px 20px;
    font-size: 12px;
    margin: 5px 0 10px 0;
}

    .btn-basket-item:hover {
        background-color: #2166aed9;
        color: #fff !important;
    }

.courses-page-container {
    margin-top: 5rem;
}

.courses-promot-banner > img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: -1;
    height: 100%;
    object-fit: cover;
}

.courses-promot-banner {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    color: #000;
    padding: 24px;
    margin-bottom: 3rem;
}

    .courses-promot-banner h3,
    .courses-promot-banner .btn {
        color: #000;
        margin-bottom: 0;
    }

.star-promot {
    font-size: 12px;
    padding: 6px 12px;
    margin-right: 16px;
}

    .star-promot svg {
        top: -2px;
        position: relative;
        margin: 0 4px 0 0
    }

.promote-author {
    font-size: 14px;
    font-weight: bold;
}

.promote-details > p {
    font-size: 14px;
    margin-inline: 16px;
    position: relative;
}

    .promote-details > p:last-of-type {
        margin-left: 20px;
    }

        .promote-details > p:last-of-type::after {
            opacity: 0;
        }

.promot-link {
    cursor: pointer;
    background: #fff;
    padding: 8px 22px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    font-weight: bold;
}

.search-wrapper input[type="text"] {
    display: flex;
    background-image: url('./assets/images/icons/search-normal.svg');
    padding: 17px 50px 17px 17px;
    font-family: inherit;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 24px;
    width: 100%;
    border-radius: 4px;
    border: 1px solid #E5E5E5;
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: 98% 50%;
    max-width: 600px;
    margin: 0 auto 0.7rem;
}


.widget-style-1 {
    background-color: #F6F7FA;
    display: block;
    border-radius: 4px;
    padding: 16px;
}

    .widget-style-1 .widget-header {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 1rem;
        gap: 12px;
    }

        .widget-style-1 .widget-header img:last-child {
            margin-right: auto;
            width: 22px;
        }

.filter-card {
    margin-bottom: 20px;
}

.filter-click {
    margin-inline: 12px;
    padding: 12px 28px;
    margin-bottom: 12px;
}

    .filter-click.padding-button:not(.active) {
        background: #fff;
        color: var(--border-input);
        border: 1px solid currentColor;
        margin-inline: 12px;
        margin-bottom: 12px;
    }

.has-filter-accordion > .row > div {
    width: 100%;
}

a.sub-filter {
    font-size: 14px;
}

    a.sub-filter.border-primary {
        border-right-width: 4px !important;
    }

a.sub-filter {
    border-right-width: 4px !important;
}

a.sub-filter {
    margin-bottom: 25px;
    position: relative;
    z-index: 2;
}

div.filter-accordion {
    position: relative;
}

    div.filter-accordion::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1 !important;
        border-right: 4px solid var(--bs-border-color);
    }

a.sub-filter:last-child {
    margin: 0;
}

.courses-page-container {
    margin-top: 5rem;
}

.courses-promot-banner > img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: -1;
    height: 100%;
    object-fit: cover;
}

.courses-promot-banner {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    color: #000;
    padding: 24px;
    margin-bottom: 3rem;
}

    .courses-promot-banner h3,
    .courses-promot-banner .btn {
        color: #000;
        margin-bottom: 0;
    }

.download-box {
    display: flex;
    flex-direction: column;
    gap: 16px;
    border-radius: 8px;
    background: rgb(242 243 246);
    padding: 8px 16px;
}

    .download-box .download-box-header {
        display: flex;
        align-items: center;
        gap: 12px;
    }

        .download-box .download-box-header h4 {
            font-size: 14px;
            margin: 0;
        }

        .download-box .download-box-header i {
            font-size: 20px;
        }

.download-box-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .download-box-footer a {
        color: var(--amoot-color);
        font-size: 16px;
    }

        .download-box-footer a:hover {
            transform: scale(1.01)
        }

    .download-box-footer span {
        font-size: 12px;
        color: #828282;
    }

@media screen and (max-width:640px) {
    .tab-links a {
        padding: 8px 12px;
        font-size: 12px;
        margin: 0 12px;
        width: 136px;
    }
}

.tab-content {
    border: 1px solid #EFEFEF;
}

.font-price {
    font-family: var(----font-new, 'Yekan Bakh FaNum') !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 600 !important;
}

.clear-box-shadow-default {
    background-color: transparent;
    border: none;
    box-shadow: none;
}


#gatewayContainer .selectable-image {
    cursor: pointer;
    border: 1px solid #bbb;
    transition: border 0.3s;
    width: 80px;
    height: 80px;
    border-radius: 7px;
    object-fit: cover;
    padding: 10px;
}

#gatewayContainer .image-select-label.selected .selectable-image {
    border-color: #2166AE;
}


#videoIndex .search-box {
    position: relative;
    margin: 48px 0;
}

    #videoIndex .search-box input {
        width: 100%;
        box-shadow: none;
        padding: 10px 60px 10px 10px;
        font-size: 16px;
    }

        #videoIndex .search-box input:focus {
            width: 100%;
            box-shadow: none;
            border-color: #bbb !important;
        }

    #videoIndex .search-box img {
        width: 20px;
        height: 20px;
        position: absolute;
        top: 13px;
        right: 16px;
        cursor: pointer;
    }

#videoIndex .card {
    border: 0;
    margin: 12px 0;
}

    #videoIndex .card img {
        border-radius: 7px;
        height: 180px;
        width: 100%;
        object-fit: cover;
    }

    #videoIndex .card h4 {
        font-size: 16px;
        margin: 20px 0;
    }

    #videoIndex .card span {
        font-size: 12px;
    }


#videoIndex .image-container {
    position: relative;
}

#videoIndex .card span.time {
    background-color: #000;
    opacity: .5;
    padding: 6px 12px;
    border-radius: 5px;
    color: #fff;
    position: absolute;
    bottom: 12px;
    left: 12px;
}

#videoShow #metaData img.icon {
    width: 20px;
}

#videoShow #metaData span {
    font-size: 14px;
}

    #videoShow #metaData span.visit {
        border-left: 1px solid #bbb;
        padding-left: 14px;
    }

    #videoShow #metaData span.date {
        padding-right: 14px;
    }

    #videoShow #metaData span.date {
        padding-right: 14px;
    }

#videoShow #metaData .download {
    margin-left: 10px;
}

#videoShow #metaData .share {
    margin: 0 24px 0 8px;
}

#videoShow .content h1 {
    font-size: 24px;
    margin: 30px 0 24px 0;
    font-weight: 600;
    line-height: 44px;
}

#videoShow .content p {
    line-height: 40px;
    color: #444;
}


#my-video {
    width: 100%;
    overflow: hidden;
    min-height: 300px;
    max-height: 600px;
}

.vjs-control-bar {
    max-width: 95%;
    position: absolute;
    bottom: 15px !important;
    border-radius: 6px;
    margin: 0 auto !important;
    padding: 8px;
    height: 4em !important;
}

/* repeat icon */
.vjs-icon-replay:before,
.video-js .vjs-play-control.vjs-ended .vjs-icon-placeholder:before {
    content: "\f11b";
}

/* pause icon */
.vjs-icon-pause:before,
.video-js .vjs-play-control.vjs-playing .vjs-icon-placeholder:before {
    content: '\f0ce';
}

/* play icon */
.vjs-icon-play:before,
.video-js .vjs-play-control .vjs-icon-placeholder:before,
.video-js .vjs-big-play-button .vjs-icon-placeholder:before {
    content: '\f0dc';
}

.vjs-icon-volume-high:before,
.video-js .vjs-mute-control .vjs-icon-placeholder:before {
    content: '\f1d6';
}

.vjs-icon-volume-high:before,
.video-js .vjs-mute-control .vjs-icon-placeholder:before {
    content: '\f1d6';
}

.vjs-icon-volume-mid:before,
.video-js .vjs-mute-control.vjs-vol-2 .vjs-icon-placeholder:before {
    content: '\f1d7';
}

.vjs-icon-volume-low:before,
.video-js .vjs-mute-control.vjs-vol-1 .vjs-icon-placeholder:before {
    content: '\f1d8';
}

.vjs-icon-volume-mute:before,
.video-js .vjs-mute-control.vjs-vol-0 .vjs-icon-placeholder:before {
    content: '\f1d5';
}

[class^='vjs-icon-']:before {
    font-family: "iconsax";
    font-style: normal;
    font-weight: normal;
    speak: never;
    display: inline-block;
    text-decoration: inherit;
    width: 1em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.video-js .vjs-play-progress:before {
    opacity: 0;
}

/* News and Announcemnt */

#lastNews {
    margin-top: 30px;
}

    #lastNews img.news-item {
        object-fit: cover;
        width: 240px;
        margin-bottom: 16px;
    }

    #lastNews img.news-main {
        width: 100%;
        max-height: 300px;
        object-fit: cover;
        margin-bottom: 16px;
    }

    #lastNews p {
        margin: 12px 0;
        font-size: 14px;
    }

    #lastNews h1,
    #lastAnouncement h2 {
        font-size: 20px;
        font-weight: 600;
        color: #000;
    }

@media only screen and (max-width:991px) {
    #lastNews img.news-item {
        object-fit: cover;
        width: 100%;
    }
}


#lastAnouncement .announcement-card {
    border-bottom: 1px solid #ddd;
    padding: 10px 0;
    margin-bottom: 10px;
}

    #lastAnouncement .announcement-card small {
        background-color: #ddd;
        color: #000;
        padding: 10px;
        border-radius: 5px;
    }

    #lastAnouncement .announcement-card p {
        color: #4F4F4F !important;
        font-size: 14px;
    }

    #lastAnouncement .announcement-card a {
        color: #444;
        font-weight: 600;
    }

.no-content p {
    font-size: 14px;
}

.courses-page-container {
    margin-top: 5rem;
}

#courseLanding .courses-promot-banner > img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: -1;
    height: 100%;
    object-fit: cover;
}

#courseLanding .courses-promot-banner {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    color: #fff;
    padding: 24px;
    margin-bottom: 3rem;
}

    #courseLanding .courses-promot-banner h3,
    #courseLanding .courses-promot-banner .btn {
        color: #fff;
        margin-bottom: 0;
    }

#courseLanding .star-promot {
    font-size: 12px;
    padding: 6px 12px;
    margin-right: 16px;
}

    #courseLanding .star-promot svg {
        top: -2px;
        position: relative;
        margin: 0 4px 0 0
    }

#courseLanding .promote-author {
    font-size: 14px;
    font-weight: bold;
}

#courseLanding .promote-details > p {
    font-size: 14px;
    margin-inline: 16px;
    position: relative;
}

    #courseLanding .promote-details > p:last-of-type {
        margin-left: 20px;
    }

        #courseLanding .promote-details > p:last-of-type::after {
            opacity: 0;
        }

#courseLanding .promot-link {
    cursor: pointer;
    background: #fff;
    padding: 6px 16px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

#courseLanding .search-wrapper input[type="text"] {
    display: flex;
    background-image: url('../images/icons/search-normal.svg');
    padding: 17px 50px 17px 17px;
    font-family: inherit;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 24px;
    width: 100%;
    border-radius: 4px;
    border: 1px solid #E5E5E5;
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: 98% 50%;
    max-width: 600px;
    margin: 0 auto 0.7rem;
}

#courseLanding .search-wrapper {
    width: 100%;
}

#courseLanding .card {
    border-radius: 4px;
    background: var(--Neutral-White, #FFF);
    box-shadow: 0px 0px 8px 0px rgba(33, 102, 174, 0.15);
    border-color: transparent;
}

#courseLanding .card-image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

#courseLanding .card-image {
    position: relative;
}

    #courseLanding .card-image .star-promot {
        position: absolute;
        bottom: -6%;
        left: 2%;
        background: #1C1E53;
        color: #fff;
    }

#courseLanding .card .promote-details i {
    color: #FF7A5C;
}

#courseLanding .card .promote-details > p:after {
    background: #e8e8e8;
}

#courseLanding .card .promote-details {
    justify-content: space-between;
}

#courseLanding a.cart {
    cursor: pointer;
}

#courseLanding a.card:hover {
    color: initial
}

#courseLanding .filter-click.padding-button:not(.active) {
    background: #fff;
    color: var(--amoot-color);
    border: 1px solid rgba(33, 102, 174, 0.2);
    margin: 0 5px;
}

.single-page-container {
    margin-top: 4rem
}

#courseShow .progress-fill {
    --progressbar-fill: #27AE60;
}

#courseShow .progress-number-mark {
    --progress-number-bg: #27AE60;
}

#courseShow .progressbar-item .box-side-header {
    margin-bottom: 3rem;
    font-size: 14px;
}

#courseShow aside .box-side {
    padding: 12px;
    border-radius: 4px;
    background: var(--Neutral-White, #FFF);
    box-shadow: 0px 0px 4px 0px rgba(33, 102, 174, 0.15);
    margin-top: 1.5rem;
}

#courseShow .progress-number-mark,
#courseShow .footer-side-card {
    font-size: 12px;
}

#courseShow .footer-side-card {
    margin-top: 12px;
}

    #courseShow .footer-side-card .status-course-side {
        color: #609D0A
    }

    #courseShow .footer-side-card i {
        font-size: 16px;
        margin: 0 8px;
    }

#courseShow summary {
    list-style: none;
    cursor: pointer;
    padding-left: 20px;
}

    #courseShow summary::-webkit-details-marker {
        display: none;
    }


#courseShow .list-group-numbered > .list-group-item::before {
    content: counters(section, "") !important;
    counter-increment: section;
    position: absolute;
    top: 8px;
    right: 7px;
}

#courseShow .list-group-item:before {
    background: #fff;
    border-radius: 60px;
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}


#courseShow .list-group-numbered > .list-group-item details summary {
    background: #F6F7FA;
    width: 100%;
    display: block;
    padding: 8px;
    border-radius: 6px;
    margin-bottom: 10px;
    padding-right: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 16px;
}

    #courseShow .list-group-numbered > .list-group-item details summary svg {
        width: 12px;
        height: 12px;
    }

    #courseShow .list-group-numbered > .list-group-item details summary span {
        color: #FF7A5C;
        text-align: center;
        font-size: 12px;
        font-style: normal;
        font-weight: 725;
    }

#courseShow .list-group-numbered > .list-group-item details {
    width: 100%;
    height: 100%;
}

    #courseShow .list-group-numbered > .list-group-item details div {
        background: #F7FBFE;
        margin-top: 0;
        padding: 6px;
        margin-bottom: 8px;
    }


#courseShow #startExamBtn{
    background-color:#2166AE;
    color:#fff;
    padding:10px 10px;
    border:0;
    border-radius:4px;
}

    #courseShow #startExamBtn:disabled {
        background-color: #828282 !important; /* مثلاً رنگ خاکستری آبی */
        cursor: not-allowed !important;
        opacity: 0.6;
    }

#courseShow .box-side h4 {
    margin-bottom: 24px;
}

#courseShow .prev-link,
#courseShow .next-link {
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

    #courseShow .prev-link i,
    #courseShow .next-link i {
        font-size: 14px;
    }

#courseShow aside {
    margin-bottom: 2rem;
}

#courseShow #my-video {
    width: 100%;
    overflow: hidden;
    min-height: 400px !important;
    max-height: 500px;
}

#courseShow #episodeTitle {
    font-weight: 600 !important;
    margin-top: 1.5rem !important;
}

#courseShow .list-group-item {
    padding: 8px !important;
    background-color: #F6F7FA;
    padding: 0 5px !important;
    margin-bottom: 10px;
    border: none;
}

    #courseShow .list-group-item.active {
        background-color: #6FCF9733;
        border-radius: 7px;
    }

#courseShow .disabled {
    pointer-events: none;
    opacity: 0.5;
}

#courseShow .padding-button {
    padding: 16px 10px;
}

#courseShow .episode-link {
    border: 0;
    padding: 20px 0px !important;
    color: #444;
}

#courseShow .list-group-item .form-check {
    margin: 0;
    padding: 0 10px !important;
}

#courseShow .course-episodes-card {
    padding: 10px 16px !important;
}

#courseShow .circle-checkbox .form-check-input {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #444;
    background-color: white;
    cursor: pointer;
    margin: 0;
    box-shadow: none !important;
}

    #courseShow .circle-checkbox .form-check-input:hover {
        border-color: #1d7e34;
    }

    #courseShow .circle-checkbox .form-check-input:checked {
        background-color: #27AE60;
        border-color: #27AE60;
        background-image: none;
        position: relative;
    }

        #courseShow .circle-checkbox .form-check-input:checked::after {
            content: "";
            position: absolute;
            top: 2px;
            left: 5px;
            width: 6px;
            height: 10px;
            border: solid #fff;
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
        }

#courseShow .progress-element-wrapper .progress {
    height: 8px;
    border-radius: 4px;
    margin-bottom: 20px !important; 
}

    #courseShow .progress-element-wrapper .progress .progress-bar{
        background-color:#27AE60;
    }

    #courseShow .remain-progress span {
        font-size: 14px;
    }

#courseShow .remain-progress .remain-progress-percentage{
    color:#27AE60;
}


#guidePage .single-page-container {
    margin-top: 5rem
}

#guidePage aside > ul > li ul {
    margin-right: 16px;
    color: #4F4F4F;
    margin-top: 10px
}

    #guidePage aside > ul > li ul a,
    #guidePage aside ul li {
        font-size: 14px !important;
    }

#guidePage aside ul a {
    padding: 6px;
    display: inline-block;
    margin-bottom: 6px;
}

#guidePage .amoot-border-color {
    border-color: #2166AE !important;
}

#guidePage aside ul li {
    margin-top: 13px;
}

    #guidePage aside ul li:first-child {
        margin-top: 0;
    }

#guidePage aside .btn i:before {
    transform: rotate(0deg);
    transition: 0.3s all;
}

#guidePage aside .btn.collapsed i:before {
    transform: rotate(90deg);
}

#guidePage .register-1 li.active {
    background-color: #eee;
    border-radius: 7px;
}

    #guidePage .register-1 li.active a {
        margin: 0;
        color: #2166AE !important;
    }

#guidePage .register-0 a.active {
    background-color: #5081b4ff;
    color: #fff;
    margin: 0 10px;
}



.git-support .pre-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f5f5f5;
    padding: 5px 10px;
    border: 1px solid #ccc;
    border-bottom: none;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.git-support .copy-button {
    cursor: pointer;
    padding: 5px 10px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
}

.git-support pre {
    border: 1px solid #ddd;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    padding: 10px;
    background-color: #f6f8fa;
    border-top: 0;
    direction: ltr;
}

.git-support .header-pre {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    border: 1px solid #ddd;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    background-color: #f6f8fa;
    margin-top: 10px
}

    .git-support .header-pre .copy-button {
        background-color: transparent;
        color: #444;
        border: none;
        padding: 5px 10px;
        cursor: pointer;
        border-radius: 5px;
    }

#gitContent h1,
#gitContent h2,
#gitContent h3,
#gitContent h4,
#gitContent h5 {
    color: #2166AE;
    font-family: var(----font-new, 'Yekan Bakh FaNum');
}

#gitContent * {
    line-height: 40px;
}

#gitContent h1 {
    font-size: 20px;
}

#gitContent h2 {
    font-size: 18px;
}

#gitContent h3 {
    font-size: 16px;
}

#gitContent p {
    font-family: var(----font-new, 'Yekan Bakh FaNum');
}

.amoot-btn-outline {
    border: 1px solid currentColor !important;
}

.sla-landing h1 {
    font-size: 24px;
    font-weight: 600;
}

.sla-landing .widget-header .main-image {
    width: 120px;
}

#versions .heading h1 {
    font-size: 28px;
    font-weight: 600;
    margin: 24px 0;
}

#versions .heading p {
    margin-bottom: 36px;
    font-size: 16px;
    -webkit-text-stroke: 0.1px black; /* Outline width and color */
}

#versions ul.timeline-3 {
    list-style-type: none;
    position: relative;
}

    #versions ul.timeline-3:before {
        content: " ";
        border: 1px dashed #e8e6e6;
        display: inline-block;
        position: absolute;
        right: 33px;
        height: 100%;
        z-index: 400;
        font-size: 12px;
    }

    #versions ul.timeline-3 > li {
        margin: 20px 0;
        padding-right: 20px;
    }

#versions .timeline-3 > li {
    position: relative;
}

    #versions .timeline-3 > li .circle-content {
        position: absolute;
        right: 20px;
        top: 12px;
        transform: translateY(-50%);
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background-color: #2166AE;
        border: 3px solid #2166AE;
        color: #fff;
        font-size: 12px;
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 400;
    }

#versions ul.timeline-3 > li a,
#versions ul.timeline-3 > li p {
    margin: 0 35px;
}


#versions label.version-description > .description {
    font-weight: normal;
    font-size: 0.9em;
    margin-top: 4px;
    color: #555;
}

#versions .version-title {
    color: #2166AE;
    margin: 0 50px;
    font-weight: 600;
    display: flex;
    align-items: center;
}

#versions .version-item {
    background-color: #F6F7FA;
    max-height: 400px;
    margin: 16px 50px 52px 40px;
    padding: 10px;
    border-radius: 8px;
}

.version-description {
    cursor: pointer;
    display: block;
    font-weight: 500;
    color: #333;
    user-select: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px !important;
    padding: 4px 0;
}

.timeline-3 .change-list {
    max-height: 0;
    overflow: hidden;
    transition: max-height .5s ease;
}

    .timeline-3 .change-list.open {
        max-height: 600px;
    }

    .timeline-3 .change-list ul {
        padding: 20px 0 16px 0;
    }

        .timeline-3 .change-list ul li {
            line-height: 40px;
            font-size: 16px;
            color: #4f4f4f;
        }

.arrow-icon {
    transition: transform .5s ease-in-out;
    width: 12px;
}

.change-list.open ~ .version-description .arrow-icon,
.version-description.open .arrow-icon {
    transform: rotate(180deg);
}

#faqPage {
    margin: 40px 0 30px 0;
}

    #faqPage h1 {
        font-size: 22px;
        font-weight: 600;
    }

    #faqPage .tag {
        color: #2166AE;
        font-size: 16px;
        margin-left: 10px;
    }

.contentH1 {
    font-size: 28px;
    font-weight: 600;
    margin: 18px 0;
    line-height: 40px;
}

.contentContainer p {
    line-height: 40px;
    text-align: justify;
}

.contentContainer table {
    width: 100% !important;
    border: 1px solid #bbb !important;
}

    .contentContainer table :where(td, th) {
        padding: 10px;
        border: 1px solid #bbb !important;
    }

.faq-color {
    color: orange !important;
}

.guide-color {
    color: green !important;
}

.video-color {
    color: darkred !important;
}

.course-color {
    color: goldenrod !important;
}

.file-color {
    color: dodgerblue !important;
}

/* Product Group Button */
.pgb-filter {
    background: #fff;
    color: var(--border-input);
    border: 1px solid currentColor;
    cursor: pointer;
    border-radius: 8px;
}

.alavan-color {
    color: #9E0020;
}

.version-type {
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600 !important;
    padding: 4px 8px !important;
}

.version-type-NewFeature {
    background-color: #e1f1ff;
    color: #2166ae;
}

.version-type-BugFix {
    background-color: #e3ede7;
    color: #219653;
}

.version-type-PerformanceImprovement {
    background-color: #f0e8ff;
    color: #a564e4;
}

.version-type-InternalUpdate {
    background-color: #f3ecd7;
    color: #a27c09;
}

.version-type-SecurityUpdate {
    background-color: #f8dfce;
    color: #eb4518;
}

.version-type-FeatureRemoval {
    background-color: #f2e1e1;
    color: #d22b2b;
}

.link-color {
    color: #2166AE;
}

    .link-color:hover {
        text-decoration: none;
        color: var(--amoot-color, #2166ae);
    }

#shareModal .modal-header h5 {
    font-size: 16px;
}

#shareModal .modal-header {
    border-bottom: 1px solid #E0E0E0;
    padding: 16px 0;
    margin-bottom: 36px;
}

    #shareModal .modal-header .btn-close {
        font-size: 12px !important;
        color: #000 !important;
        font-weight: 600;
    }

        #shareModal .modal-header .btn-close:focus {
            box-shadow: none !important;
        }

#shareModal .modal-content {
    padding: 12px 24px;
}

#shareModal .modal-body .copy-box {
    background-color: #f6f7fa;
    border-radius: 8px;
    padding: 16px 12px;
    display: flex;
    justify-content: space-between;
    color: #9b9999;
}

#shareModal .modal-body {
    padding: 0;
}

#shareModal .copy-box-container {
    margin-top: 40px;
}

    #shareModal .copy-box-container h5 {
        font-size: 16px;
    }

#profile-container {
    position: absolute;
    display: none;
    z-index: 9999;
    min-width: 250px;
}

#toggle-profile-btn {
}

#errorPage {
    padding: 60px 0;
    background-color: #f6f7fa;
}

    #errorPage img.main {
        width: 80%;
        display: block;
        margin: 30px auto !important;
        text-align: center;
    }

    #errorPage h2 {
        font-size: 24px;
        font-weight: 800;
        text-align: center;
    }

    #errorPage p {
        font-size: 14px;
        text-align: center;
    }

    #errorPage .search-box {
        position: relative;
        width: 80%;
        margin: 30px auto;
        margin-bottom: 40px;
    }

        #errorPage .search-box input {
            width: 100%;
            background-color: #fff;
            border: none;
            border-radius: 4px;
            padding: 10px 36px 10px 8px;
        }


        #errorPage .search-box img {
            position: absolute;
            top: 10px;
            right: 10px;
        }

    #errorPage .amoot-btn {
        border-radius: 8px;
        font-size: 14px;
        padding: 8px 20px;
    }

    #errorPage .amoot-outline-btn {
        border-radius: 8px;
        font-size: 14px;
        border: 1px solid #2166AE;
        color: #2166AE;
        padding: 8px 20px;
    }

#autocompleteResults {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 600px;
    border: 1px solid #eee;
    border-top: none;
    background: #fff;
    z-index: 1000;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    display: none;
    margin: 0 auto;
    max-height: 300px;
    overflow: auto;
}

.result-item {
    padding: 10px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    font-size: 14px;
}

    .result-item:last-child {
        border-bottom: none;
    }

    .result-item small {
        font-size: 12px;
        color: #2166AE;
        display: block;
        margin-top: 12px;
    }

[class^=result-item-badge-] {
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
}

.result-item-badge-faq {
    background-color: #f1a621;
    color: #fff;
}

.result-item-badge-video {
    background-color: #d51b54;
    color: #fff;
}

.result-item-badge-guide {
    background-color: #384df1;
    color: #fff;
}

.survey-modal .scoreContainer .img-container {
    background-color: #F6F7FA;
    margin: 20px 6px 6px 6px;
    padding: 12px;
    border-radius: 4px;
    cursor: pointer;
}

.survey-modal .scoreContainer img {
    width: 36px;
}

.survey-modal .img-container.score-5:hover,
.survey-modal .img-container.score-5.selected {
    background-color: #e0f1e8;
}

.survey-modal .img-container.score-4:hover,
.survey-modal .img-container.score-4.selected {
    background-color: #e4e7d8;
}

.survey-modal .img-container.score-3:hover,
.survey-modal .img-container.score-3.selected {
    background-color: #f2eee6;
}

.survey-modal .img-container.score-2:hover,
.survey-modal .img-container.score-2.selected {
    background-color: #f2dfd9;
}

.survey-modal .img-container.score-1:hover,
.survey-modal .img-container.score-1.selected {
    background-color: #f0e1e4;
}


.survey-modal .tag span {
    background-color: transparent;
    padding: 16px 0px;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    cursor: pointer;
    white-space: nowrap;
    width: 100% !important;
    display: block;
    margin: 10px auto;
    font-size: 14px;
    text-align: center;
}

.survey-modal .tag.selected span {
    border-color: #2166AE;
}

.survey-modal .btn-cancel {
    border-radius: 4px;
    padding: 8px 40px;
    color: #2166AE;
    border: 1px solid #2166AE;
    background-color: transparent;
}

    .survey-modal .btn-cancel:hover {
        border: 1px solid #2166AE;
        background-color: #2166AE;
        color: #fff;
    }

.survey-modal .btn-submit {
    border-radius: 4px;
    padding: 8px 40px;
    color: #fff;
    border: 1px solid #2166AE;
    background-color: #2166AE;
    margin-right: 4px;
}

.survey-modal textarea {
    font-size: 14px;
}

.survey-modal .alertContainer img {
    width: 20px;
}

.survey-modal .hidden-preserve-space {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    overflow: hidden;
    transition: opacity 0.3s ease;
}

.survey-modal .visible-preserve-space {
    opacity: 1;
    visibility: visible;
    height: auto;
    pointer-events: auto;
}

.survey-modal .score-desc {
    font-size: 12px;
    display: block;
}


@media screen and (max-width: 512px) {
    .survey-modal .scoreContainer img {
        width: 24px !important;
    }

    .survey-modal .tag span {
        font-size: 12px !important;
    }

    .survey-modal .btn-submit,
    .survey-modal .btn-cancel {
        padding: 8px 40px !important;
        font-size: 12px;
    }
}

.disable-survey-form {
    color: #828282;
    border-bottom: 1px solid #828282 !important;
    cursor: not-allowed;
}

.open-survey-form {
    color: #2166AE;
    border-bottom: 1px solid #2166AE !important;
}

.open-survey-info {
}

@media screen and (max-width: 991px) {
    #guidePage.single-page-container {
        margin-top: 0rem;
    }
}

.check-success img{
    width:16px !important;
    margin-left:10px;
}

#courseExamPage{
    padding-bottom:30px;
}

#courseExamPage .header {
    background-color: #F6F7FA;
    border: 0;
}

#courseExamPage #btnFinishExam {
    color: #fff;
    background-color: #2166AE;
    border-radius: 4px;
    font-size: 14px;
    padding: 10px 20px; 
    outline:0 !important;
    box-shadow:none;
    border:1px solid #2166AE;
}

    #courseExamPage #btnFinishExam:hover {
        background-color: #2166aef1;
    }

#courseExamPage #btnCancelExam {
    color: #2166AE;
    background-color: transparent;
    border-radius: 4px;
    border: 1px solid #2166AE;
    font-size: 14px;
    padding: 10px 20px;
    outline: 0;
    box-shadow:none;
}

    #courseExamPage #btnCancelExam:hover {
        background-color: #2166AE;
        color: #fff;
    }

    #courseExamPage .icon img {
        background-color: #fff;
        padding: 10px;
        border-radius: 4px;
    }

#courseExamPage .exam-question {
    border: 1px solid #efefef;
}

    #courseExamPage .exam-question .exam-option-item{
        border:0;
    }

        #courseExamPage .exam-question .exam-option-item span {
            color: #4F4F4F;
        }

#courseExamPage .card.pagination {
    border: 1px solid #efefef;
}

    #courseExamPage .card.pagination button{
        border:0;
        background:none;
        outline:none;
        font-size:14px;
    }

    #courseExamPage .exam-option-item.option-correct {
        background-color: #E6F4EA;
        border-radius: 4px;
    }

    #courseExamPage .exam-option-item.option-correct-missed {
        background-color: #F0FFF4;
        border-radius: 4px;
        opacity: .9;
    }

    #courseExamPage .exam-option-item.option-wrong {
        background-color: #FDECEA;
        border-radius: 4px;
    }

    #courseExamPage .card#examResultCard {
        border: 1px solid #efefef;
    }