@media (min-width:0) {
    .allPossibilities,
    .page-maximize {
        position: absolute;
        top: 10px;
        z-index: 1;
        cursor: pointer;
    }

    .allPossibilities {
        left: 10px;
    }

    .page-maximize {
        right: 10px;
    }

        .allPossibilities img,
        .page-maximize img {
            width: 30px;
            filter: brightness(0.1) contrast(1) invert(1);
        }

        .allPossibilities.special img,
        .page-maximize.special img {
            filter: invert(32%) sepia(8%) saturate(3167%) hue-rotate(119deg) brightness(93%) contrast(83%);
        }

    /*......................................................................................................................*/
    #menu {
        position: fixed;
        left: var(--margin-container);
        right: var(--margin-container);
        bottom: 0;
        top: 0;
        overflow: auto;
        background: #fff;
        z-index: 3;
        padding: var(--padding-container);
        box-sizing: border-box;
        opacity: 0;
        visibility: hidden;
        transition: .5s;
        padding-top: 60px;
    }

        #menu.show {
            opacity: 1;
            visibility: visible;
        }

        #menu .top {
            color: var(--second-color);
            font-weight: 600;
            font-size: 16px;
            text-align: center;
            padding: 15px;
            position: fixed;
            top: 0;
            left: var(--margin-container);
            right: var(--margin-container);
            z-index: 2;
            background: #fff;
            box-sizing: border-box;
        }

            #menu .top img {
                vertical-align: middle;
                transform: scaleX(-1);
                float: right;
                width: 24px;
                cursor: pointer;
            }

        #menu .search {
            position: relative;
        }

            #menu .search input {
                width: 100%;
                height: 48px;
                border-radius: 48px;
                border: 1px solid transparent;
                background: #F2F3F6;
                padding: 5px 44px;
                box-sizing: border-box;
                font-size: 14px;
                font-weight: 370;
                color: var(--second-color);
                outline: none;
                margin-bottom: 0;
            }

                #menu .search input:focus {
                    border-color: var(--main-color);
                    background: var(--main-color-lighter);
                }

            #menu .search .search-icon {
                position: absolute;
                right: 15px;
                top: 50%;
                transform: translateY(-50%);
                width: 22px;
            }

            #menu .search .clear-icon {
                position: absolute;
                left: 15px;
                top: 50%;
                width: 11px;
                opacity: 0;
                cursor: pointer;
                transition: .5s;
                transform: translateY(-50%);
                z-index: 1;
            }

    .filter {
        margin: var(--padding-container) 0;
        display: flex;
        align-items: center;
    }

        .filter #categories {
            white-space: nowrap;
            overflow: auto;
            margin-right: 14px;
            cursor: grab;
            user-select: none;
        }

            .filter #categories:active {
                cursor: grabbing;
            }

            .filter #categories::-webkit-scrollbar {
                display: none;
            }

        .filter span {
            font-weight: 450;
            padding: 3px 10px;
            box-sizing: border-box;
            display: inline-block;
            margin: 0 2px;
            border: .5px solid #DFE1E5;
            color: var(--second-color);
            border-radius: 48px;
            cursor: pointer;
        }

            .filter span.all {
                position: relative;
                /*width: 20%;*/
                text-align: center;
                white-space: nowrap;
            }

                .filter span.all::before {
                    content: '';
                    position: absolute;
                    top: 0;
                    bottom: 0;
                    left: -11px;
                    width: .5px;
                    background: #F2F3F6;
                }

            .filter span.active {
                border-color: var(--main-color);
                color: var(--main-color);
                background: var(--main-color-lighter);
            }

    #menu ul {
        padding: 0;
        margin: 0;
        list-style: none;
        width: 100%;
    }

    .menu-list > li {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin: var(--padding-container) 0;
    }

        .menu-list > li span {
            color: var(--second-color);
            font-weight: 600;
            font-size: 14px;
            width: 100%;
            display: flex;
            align-items: center;
            gap: 5px;
        }

            .menu-list > li span span {
                flex-grow: 1;
                border-top: 1px solid #DFE1E5;
            }

    .menu-list ul.subMenu {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

        .menu-list ul.subMenu li {
            display: flex;
            width: calc(20% - 10px);
        }

            .menu-list ul.subMenu li a {
                width: 100%;
                text-align: center;
                color: var(--second-color);
                font-variation-settings: "DOTS" 1;
                font-weight: 600;
            }

    .menu-list .icon {
        width: 64px;
        border-radius: 12px;
        padding: 14px;
        box-sizing: border-box;
        margin: 0 auto 8px;
        background: var(--main-color-lighter);
    }

        .menu-list .icon img {
            width: 100%;
            display: block;
            filter: invert(32%) sepia(8%) saturate(3167%) hue-rotate(119deg) brightness(93%) contrast(83%);
        }

    /**/
    /*green*/
    /*  #_lstmenu > li:first-child .icon {
        background: var(--main-color-lighter);
    }*/

    img.green-filter,
    .green-filter img {
        filter: invert(32%) sepia(8%) saturate(3167%) hue-rotate(119deg) brightness(93%) contrast(83%);
    }

    /*orange*/
    #_lstmenu > li:nth-child(2) .icon,
    #_lstmenu > li:nth-child(11) .icon {
        background: #fff6f6;
    }

    #_lstmenu > li:nth-child(2) img,
    #_lstmenu > li:nth-child(11) img,
    img.orange-filter,
    .orange-filter .icon img {
        filter: brightness(0) saturate(100%) invert(13%) sepia(99%) saturate(6892%) hue-rotate(356deg) brightness(72%) contrast(72%);
        /*filter: invert(39%) sepia(10%) saturate(3166%) hue-rotate(350deg) brightness(100%) contrast(64%);*/
    }

    /*blue*/
    #_lstmenu > li:nth-child(3) .icon,
    #_lstmenu > li:nth-child(9) .icon,
    #_lstmenu > li:nth-child(14) .icon {
        background: #e6f6fb;
    }

    #_lstmenu > li:nth-child(3) img,
    #_lstmenu > li:nth-child(9) img,
    #_lstmenu > li:nth-child(14) img,
    img.blue-filter,
    .blue-filter .icon img {
        filter: saturate(100%) invert(62%) sepia(98%) saturate(414%) hue-rotate(160deg) brightness(64%) contrast(102%);
    }

    /*purple*/
    #_lstmenu > li:nth-child(7) .icon,
    #_lstmenu > li:nth-child(10) .icon,
    #_lstmenu > li:nth-child(15) .icon {
        background: #ebf5de;
    }

    #_lstmenu > li:nth-child(7) img,
    #_lstmenu > li:nth-child(10) img,
    #_lstmenu > li:nth-child(15) img,
    img.purple-filter,
    .purple-filter .icon img {
        filter: brightness(0) saturate(100%) invert(77%) sepia(9%) saturate(2478%) hue-rotate(43deg) brightness(73%) contrast(63%);
    }

    /*light-purple*/
    #_lstmenu > li:nth-child(5) .icon,
    #_lstmenu > li:nth-child(8) .icon {
        background: #e1c6a330;
        /*background: #f2d9ff;*/
    }

    #_lstmenu > li:nth-child(5) img,
    #_lstmenu > li:nth-child(8) img,
    img.light-purple-filter,
    .light-purple-filter .icon img {
        filter: brightness(0) saturate(100%) invert(94%) sepia(25%) saturate(1173%) hue-rotate(308deg) brightness(75%) contrast(102%);
        /*filter: invert(32%) sepia(8%) saturate(3167%) hue-rotate(269deg) brightness(93%) contrast(83%);*/
    }


    #_lstmenu > li:nth-child(15) li:nth-child(2) .icon {
        background: #f7f7f7;
    }

    #_lstmenu > li:nth-child(15) li:nth-child(2) img {
        filter: none;
    }

    /*


    invert(32%) sepia(8%) saturate(3167%) hue-rotate(269deg) brightness(93%) contrast(83%)
*/
    /**/
    #searchResult {
        padding: calc(var(--padding-container) / 2) 0;
    }

        #searchResult .menu-link {
            display: flex;
            align-items: center;
            gap: 5px;
            margin: calc(var(--padding-container) / 2) 0;
            color: var(--second-color);
            font-weight: 450;
        }

            #searchResult .menu-link:not(:last-child) {
                border-bottom: .5px solid #F2F3F6;
                padding-bottom: calc(var(--padding-container) / 2);
            }

        #searchResult .icon {
            width: 40px;
            border-radius: 8px;
            padding: 8px;
            box-sizing: border-box;
            background: #F2F3F6;
        }

            #searchResult .icon img {
                width: 100%;
                display: block;
                filter: invert(32%) sepia(8%) saturate(3167%) hue-rotate(119deg) brightness(93%) contrast(83%);
            }

        #searchResult .emptyState {
            text-align: center;
            padding: calc(var(--padding-container) * 2);
        }

            #searchResult .emptyState img {
                width: auto;
                display: block;
                margin: auto;
            }

            #searchResult .emptyState p {
                font-size: 14px;
                color: var(--second-color);
                font-weight: 450;
            }

    /**/
    .endMsg {
        display: flex;
        align-items: center;
        flex-direction: column;
        gap: 14px;
        width: 95%;
        border-radius: 20px;
        box-shadow: 0 5px 10px #0000001f;
        padding: 25px;
        box-sizing: border-box;
        margin: auto;
    }

        .endMsg.success {
            background: #ecf9e6;
        }

        .endMsg.failed {
            background: #ffeceb;
        }

        .endMsg img {
            width: 80px;
            -webkit-animation: animateErrorIcon .5s;
            animation: animateErrorIcon .5s;
        }

    /**/
    #_spanDonwloadPdf {
        background-color: var(--main-color);
        color: #fff;
        padding: 5px 10px;
        box-sizing: border-box;
        border-radius: 5px;
        display: inline-block;
        float: left;
        cursor: pointer;
    }

    #_divContractHtml {
        width: 200mm;
        height: auto;
        /*width: 1748px;*/
        /*height: 2480px;*/
        clear: both;
    }

    #_divContractImage {
        text-align: center;
    }

    .contractFile {
        width: auto;
        min-width: 100px;
        padding: 10px;
        border-radius: var(--border-radius);
        color: #fff;
        background: var(--main-color);
        border: none;
        cursor: pointer;
        margin: 5px 0 15px;
        display: inline-block;
        box-shadow: 0 4px 3px #8e201b3b;
        transition: .5s;
    }

        .contractFile:hover {
            box-shadow: none;
            transform: translateY(4px);
        }

        .contractFile img {
            width: 20px;
            vertical-align: middle;
            filter: invert(1);
            margin-left: 4px;
        }

    /*map*/
    .leaflet-container {
        width: 100%;
        height: 50vh;
    }

    .leaflet-pane,
    .leaflet-control,
    .leaflet-top,
    .leaflet-bottom {
        z-index: 1 !important;
    }

    .map {
        width: 100%;
        min-height: 15vh;
        height: auto;
        position: relative;
    }

        .map #map-loader {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            color: var(--main-color);
            background-color: rgba(255, 255, 255, 0.8);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            font-weight: bold;
            z-index: 1;
            animation: showTitle 2s infinite alternate;
        }

        .map .my-location-btn {
            background-color: white;
            border: none;
            cursor: pointer;
            font-size: 17px;
            width: 34px;
            height: 34px;
            text-align: center;
            padding: 0;
        }

        .map .attention-box {
            background-color: var(--main-color-lighter);
            border: 1px solid var(--main-color);
            padding: 12px 16px;
            border-radius: 8px;
            margin: 15px 0;
            box-sizing: border-box;
        }

            .map .attention-box strong {
                color: var(--mainColor);
            }

    #map {
        border-radius: 12px;
        margin-bottom: 17px;
    }


    .auto-update-message {
        background-color: white;
        color: #DA3838;
        font-size: 12px;
        display: inline-block;
        padding: 5px;
        font-weight: bold;
        position: absolute;
        left: 1px;
        bottom: -11px;
        animation-name: shake;
        animation-duration: 500ms !important;
    }

    .helpButton {
        display: inline-block;
        background-color: var(--mainColor);
        padding: 8px;
        border-radius: 5px;
        box-sizing: border-box;
        box-shadow: 2px 4px 5px #23655994;
        color: #fff !important;
        margin: 0 4px 15px;
        cursor: pointer;
    }

    .currentYear {
        font-size: 12px;
        font-weight: 300;
        color: #ffffffd6;
    }


    /*payment*/
    .container {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        justify-content: center;
        width: 100%;
        max-width: 1000px;
    }

    /* استایل پایه کارت‌ها */
    .status-card {
        background: #ffffff;
        border-radius: 16px;
        padding: 25px;
        max-width: 350px;
        box-shadow: 0 10px 25px rgba(0,0,0,0.05);
        text-align: center;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        position: relative;
        overflow: hidden;
        border: 1px solid #eee;
        margin: auto;
    }

        .status-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(0,0,0,0.1);
        }

        /* آیکون‌ها */
        .status-card .icon-box {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 15px auto;
            font-size: 24px;
        }

        /* عنوان وضعیت */
        .status-card .status-title {
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 10px;
            color: #333;
        }

        /* مبلغ */
        .status-card .amount {
            font-size: 24px;
            font-weight: 800;
            margin: 10px 0;
            display: block;
        }

        .status-card .currency {
            font-size: 14px;
            font-weight: 400;
            color: #777;
            --base-font-feature-settings "ss01" on, "liga" off, "clig" off : "ss01" on, "liga" off, "clig" off;
            font-feature-settings: var(--base-font-feature-settings), "ss06" on;
        }

        /* توضیحات ریز */
        .status-card .description {
            font-size: 14px;
            color: #666;
            line-height: 1.6;
        }

    /* --- تم‌های رنگی --- */

    /* 1. بستانکار (سبز) */
    .card-credit {
        border-top: 5px solid #10b981;
    }

        .card-credit .icon-box {
            background-color: #d1fae5;
            color: #10b981;
        }

        .card-credit .amount {
            color: #059669;
        }

    /* 2. تسویه شده (آبی/خنثی) */
    .card-settled {
        border-top: 5px solid #3b82f6;
    }

        .card-settled .icon-box {
            background-color: #dbeafe;
            color: #3b82f6;
        }

        .card-settled .amount {
            color: #2563eb;
        }

    /* 3. بدهکار (قرمز) */
    .card-debit {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        padding: 10px;
        width: auto !important;
        max-width: 360px;
        margin-bottom: 15px;
        border-top: 5px solid #ef4444;
    }

        .card-debit .icon-box {
            width: 45px;
            height: 45px;
            margin: 0 0 9px 0;
            background-color: #fee2e2;
            color: #ef4444;
        }

            .card-debit .icon-box svg {
                width: 25px;
                height: 25px;
            }

        .card-debit .status-title {
            padding-right: 10px;
            box-sizing: border-box;
            font-size: 12px;
            width: calc(100% - 45px);
            text-align: right;
        }

        .card-debit .amount {
            display: inline;
            font-size: 18px;
            color: #dc2626;
            vertical-align: middle;
        }

        .card-debit .currency {
            font-size: 15px;
            font-weight: 700;
            color: #333;
        }

    /*Cheques*/
    .digital-warning {
        margin-top: 20px;
        padding: 10px;
        text-align: center;
        color: #7f8c8d;
        font-size: 0.9em;
        border-top: 1px solid #eee;
    }
    /* مخفی کردن اسپینر در همه مرورگرها */
    .cheque input[type="number"]::-webkit-outer-spin-button,
    .cheque input[type="number"]::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    .cheque input[type="number"] {
        -moz-appearance: textfield;
        appearance: textfield;
    }

    /**/
    .pay-menu, .pay-body {
        border: 1px solid #ddd;
    }

    .pay-menu {
        display: flex;
        border-radius: 10px 10px 0 0;
    }

        .pay-menu a {
            color: var(--second-color);
            padding: 10px;
            width: 20%;
            text-align: center;
        }

            .pay-menu a:nth-child(2) {
                border-right: 1px solid #ddd;
                border-left: 1px solid #ddd;
            }

                .pay-menu a:nth-child(2):last-child {
                    border-left: none;
                }

            .pay-menu a:last-child {
                width: 100%;
                text-align: right;
            }

            .pay-menu a.active {
                position: relative;
                color: var(--main-color);
                margin-bottom: -1px;
                font-weight: 600;
                background: #dddddd0a;
            }

                .pay-menu a.active::before {
                    content: '';
                    position: absolute;
                    bottom: -2px;
                    right: 0;
                    left: 0;
                    height: 3px;
                    background: #ffffff;
                }

    .pay-body {
        border-radius: 0 0 10px 10px;
        border-top: 0;
        padding: 15px 10px;
    }

        .pay-body.show {
            border-image: linear-gradient(to bottom, #ddd 0%, rgba(0, 0, 0, 0) 40%) 1 100%;
        }

        .pay-body .instruction-card {
            margin-inline: -8px;
        }

    /**/
    .installment-card {
        width: 100%;
        background: #f9f9f9;
        border-radius: 12px;
        padding: 16px 20px;
        margin-bottom: 12px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        transition: transform 0.2s, box-shadow 0.2s;
        box-sizing: border-box;
    }

        .installment-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.12);
        }

        .installment-card .installment-date, .installment-card .data-column {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .installment-card .date-label, .installment-card .data-label {
            font-size: 12px;
            color: #888;
        }

        .installment-card .date-value, .installment-card .data-value {
            font-size: 14px;
            font-weight: 600;
            color: #333;
        }

        .installment-card .installment-amount {
            text-align: left;
        }

        .installment-card .amount-value, .installment-card .value-amount {
            font-size: 18px;
            font-weight: 700;
            color: #1a73e8;
        }

        .installment-card .amount-unit {
            font-size: 12px;
            color: #888;
            margin-right: 4px;
            font-feature-settings: var(--base-font-feature-settings), "ss06" on;
        }

        .installment-card.registeredPast {
            flex-direction: column;
            align-items: flex-start;
            gap: 10px;
        }

    /**/
    .pay-body .bank-item {
        display: flex;
        gap: 6px;
        margin: 5px 0 var(--padding-container);
    }

        .pay-body .bank-item a {
            background: #65ad92;
            padding: 6px 10px;
            border-radius: 6px;
            color: #fff;
            transition: .5s;
        }

            .pay-body .bank-item a:hover,
            .pay-body .bank-item a.active {
                background: var(--main-color);
            }

    /*moarefiname*/
    #moarefiName-card {
        position: relative;
        text-align: center;
        margin: auto;
        padding: 10px;
        box-sizing: border-box;
        background: #f0eef1 url(../Images/introductionLetter.jpg) no-repeat;
        background-size: 100%;
    }


    #_divNumber, #_divDate {
        position: absolute;
        left: 20px;
        font-size: 40px;
    }

    #_divNumber {
        top: 185px;
    }

    #_divDate {
        top: 255px;
    }

    #moarefiName-card .body {
        margin-top: 700px;
        text-align: right;
        padding: 0 190px;
    }

    #moarefiName-card b {
        font-size: 60px;
    }

    #moarefiName-card p {
        font-size: 55px;
        line-height: 2.2em;
        text-align: justify;
        margin: 10px 0;
    }

    #moarefiName-card .mainText {
        text-indent: 110px;
    }

    #moarefiName-card p.smallText {
        font-size: 45px;
    }

    #moarefiName-card .bottomText {
        margin-top: 40px;
    }

    #moarefiName-card .mrSefidText {
        font-size: 42px;
        text-align: center;
        float: left;
        margin-top: 195px;
        margin-left: -43px;
    }

    /**/
    .afterAndBefore {
        display: flex;
        justify-content: space-between;
        align-items: center;
        float: unset;
        margin-top: 15px;
    }

        .afterAndBefore > * {
            width: auto !important;
        }

    .backBtn {
        border: none;
        font-weight: 370;
        font-size: 14px;
        color: #fff;
        cursor: pointer;
        padding: 14px 24px;
        border-radius: 12px;
        transition: .3s;
        margin: 5px 0;
        display: inline-block;
        vertical-align: top;
        box-sizing: border-box;
        background-color: #9a003a;
    }

    /*step2*/
    .movafeghatname h5 {
        margin: 0;
        text-align: center;
        font-size: 13px;
    }

    .movafeghatname .text {
        padding: 10px 0;
        text-align: justify;
        line-height: 2.4em;
        text-indent: 10px
    }

    .dHeader .dCenter.fullname {
        font-size: 20px;
        margin: 18px 0;
    }

        .dHeader .dCenter.fullname img {
            filter: invert(1);
            width: 20px;
            vertical-align: middle;
            padding: 4px;
            border-radius: 45px;
            border: 1px solid #000;
        }

    .dHeader .stateBalance {
        font-size: 15px;
        font-weight: normal;
        margin-top: 0;
    }

    /*tuition-card*/
    .tuition-card {
        background-color: #f7f7f7;
        border-radius: 10px;
        padding: 10px 12px;
        margin: 20px auto;
        color: #333;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: column;
        gap: 15px;
    }

        .tuition-card .right,
        .tuition-card .left {
            width: 100%;
        }

        .tuition-card .right {
            display: flex;
            justify-content: space-between;
            gap: 10px;
        }

    .tuition-item {
        text-align: right;
        min-width: 30%;
        font-feature-settings: var(--base-font-feature-settings), "ss06" on;
    }

    .tuition-card .label {
        display: block;
    }

    .tuition-price {
        font-weight: bold;
        font-size: 14px;
        padding-left: 2px;
    }

    .tuition-card .left {
        background: #fff;
        padding: 10px 15px;
        display: flex;
        align-items: center;
        border-radius: 12px;
        flex-wrap: wrap;
        box-sizing: border-box;
    }

        .tuition-card .left .label {
            width: 100%;
        }

        .tuition-card .left .tuition-price {
            font-size: 18px;
            color: #2563eb;
        }

    /**/
    /* --- استایل حالت موفقیت --- */
    .status-card.success {
        border-top: 5px solid #28a745;
    }

        .status-card.success .status-icon {
            background-color: #d4edda;
            color: #28a745;
            border: 2px solid #c3e6cb;
        }

        .status-card.success h2 {
            color: #155724;
        }

        .status-card.success .btn-primary {
            background-color: #28a745;
            color: white;
        }

            .status-card.success .btn-primary:hover {
                background-color: #218838;
            }

    /* --- استایل حالت شکست --- */
    .status-card.error {
        border-top: 5px solid #dc3545;
    }

        .status-card.error .status-icon {
            background-color: #f8d7da;
            color: #dc3545;
            border: 2px solid #f5c6cb;
        }

        .status-card.error h2 {
            color: #721c24;
        }

        .status-card.error .btn-primary {
            background-color: #dc3545;
            color: white;
        }

            .status-card.error .btn-primary:hover {
                background-color: #c82333;
            }

    /* --- استایل حالت هشدار --- */
    .status-card.warning {
        border-top-color: #dc9c35;
    }

        .status-card.warning .status-icon {
            background-color: #ffdfac;
            color: #dc9c35;
            border: 2px solid #f7ce8d;
        }

        .status-card.warning h2 {
            color: #a56c0f;
        }

        .status-card.warning .btn-primary {
            background-color: #dc9c35;
            color: white;
        }

            .status-card.warning .btn-primary:hover {
                background-color: #b17b25;
            }

    /* آیکون بزرگ */
    .status-icon {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 20px auto;
        font-size: 40px;
        font-weight: bold;
    }

    .status-card h2 {
        margin: 0 0 10px 0;
        font-size: 22px;
        font-weight: 700;
    }

    .description {
        color: #666;
        font-size: 14px;
        margin-bottom: 25px;
        line-height: 1.6;
    }

    /* دکمه‌ها */
    .btn-primary {
        display: inline-block;
        text-decoration: none;
        padding: 12px 30px;
        border-radius: 8px;
        font-size: 15px;
        font-weight: bold;
        transition: background 0.3s;
        cursor: pointer;
        border: none;
    }

    .btn-secondary {
        display: inline-block;
        margin-top: 10px;
        text-decoration: none;
        color: #666;
        font-size: 13px;
    }

        .btn-secondary:hover {
            color: #333;
            text-decoration: underline;
        }

    /**/
    /* تنظیمات کلی */
    /* استایل کارت عمومی */
    .generic-card {
        background-color: #ffffff;
        width: 100%;
        border-radius: 16px;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        overflow: hidden;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        border: 1px solid #e2e8f0;
        display: flex;
        flex-direction: column;
        margin-bottom: 20px;
    }

        .generic-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }

    /* بخش تصویر */
    .card-media {
        width: 100%;
        height: 200px;
        overflow: hidden;
        position: relative;
        background-color: #f1f5f9;
    }

        .card-media img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

    .generic-card:hover .card-media img {
        transform: scale(1.05);
    }

    /* بدنه کارت */
    .card-content {
        padding: 20px;
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        box-sizing: border-box;
    }

    /* عنوان اصلی */
    .card-heading {
        font-size: 1.25rem;
        font-weight: 800;
        color: #1e293b;
        margin: 0 0 12px 0;
        line-height: 1.4;
    }

    /* لیست جزئیات */
    .details-list {
        list-style: none;
        padding: 0;
        margin: 0 0 16px 0;
        font-size: 0.9rem;
        color: #64748b;
    }

    .detail-row {
        display: flex;
        gap: 10px;
        padding: 6px 0;
        border-bottom: 1px solid #f1f5f9;
    }

        .detail-row:last-child {
            border-bottom: none;
        }

    .detail-icon {
        font-size: 1.1rem;
        width: 24px;
        text-align: center;
        padding-top: 5px;
    }

    .detail-text {
        flex-grow: 1;
    }

    .detail-label {
        display: block;
        font-size: 0.75rem;
        color: #94a3b8;
    }

    .detail-value {
        font-weight: 600;
        color: #334155;
        /* display: block; */
    }

    /* توضیحات */
    .card-description {
        font-size: 0.9rem;
        color: #475569;
        line-height: 1.6;
        margin-bottom: 20px;
        text-align: justify;
        background: #f8fafc;
        padding: 10px;
        border-radius: 8px;
    }

    /* فوتر قیمت و دکمه */
    .card-footer {
        margin-top: auto;
        border-top: 1px solid #e2e8f0;
        padding-top: 15px;
    }

    .price-tag {
        display: flex;
        align-items: baseline;
        gap: 6px;
        margin-bottom: 15px;
        justify-content: flex-end;
    }

    .price-value {
        font-size: 25px;
        font-weight: 900;
        color: #059669;
    }

    .price-unit {
        font-size: 16px;
        color: #64748b;
        font-feature-settings: var(--base-font-feature-settings), "ss06" on;
    }

    /* دکمه اکشن */
    input.action-btn {
        background: linear-gradient(135deg, var(--btn-color) 0%, var(--main-color) 100%);
        border-radius: 10px;
        font-weight: 700;
    }

    .action-btn:hover {
        transform: translateY(-2px);
    }

    .action-btn:active {
        transform: translateY(0);
    }

    /*request-info*/
    .request-info {
        padding: 10px;
        box-sizing: border-box;
        flex-direction: row;
        flex-wrap: wrap;
    }

        .request-info:hover {
            transform: none;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }

        .request-info label {
            color: var(--text-onback-low);
        }

    .attachedFiles label {
        display: block;
        padding-bottom: 5px;
    }

    .attachedFiles img {
        width: 10px;
        vertical-align: middle;
    }

    .attachedFiles button {
        height: auto !important;
        padding: 6px 15px !important;
        border-radius: 8px !important;
    }

    /*.........................................................................................................................................................*/
    /*.........................................................................................................................................................*/
    /*.........................................................................................................................................................*/
    /*.........................................................................................................................................................*/
    /*.........................................................................................................................................................*/
    /*.........................................................................................................................................................*/
    /*.........................................................................................................................................................*/
    /**/
    .profile {
        text-align: center;
        margin: calc(2 * var(--padding-container)) 0 var(--padding-container);
    }

        .profile .image {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            background: #b1241517;
            padding: 16px;
            box-sizing: border-box;
            margin: auto;
        }

        .profile img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            display: block;
        }

        .profile .phoneNumber {
            font-weight: 600;
            font-size: 18px;
            letter-spacing: 1px;
            padding-top: 6px;
            display: block;
        }

    #divSpecialCreditsRemain {
        flex-wrap: wrap;
        gap: var(--padding-container);
    }

        #divSpecialCreditsRemain .title {
            width: 100%;
        }

        #divSpecialCreditsRemain .item {
            position: relative;
            width: 100%;
            display: flex;
            align-items: center;
            flex-direction: column;
            border-radius: 12px;
            padding: var(--padding-container);
            box-sizing: border-box;
            overflow: hidden;
            background: #97011c;
            gap: var(--padding-container);
            color: #fff;
            z-index: 0;
        }

            #divSpecialCreditsRemain .item .background-image-gradiant {
                position: absolute;
                inset: 0;
                pointer-events: none;
                width: 100%;
                height: 100%;
                object-fit: cover;
                z-index: -1;
                mix-blend-mode: luminosity;
                -webkit-backdrop-filter: saturate(1.3);
                backdrop-filter: saturate(1.3);
            }

        #divSpecialCreditsRemain .top {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

            #divSpecialCreditsRemain .top span {
                color: #ffffffcc;
                font-weight: 370;
            }

            #divSpecialCreditsRemain .top img {
                width: 18px;
                filter: invert(1);
            }

        #divSpecialCreditsRemain .price {
            font-size: 18px;
            font-weight: 700;
        }

            #divSpecialCreditsRemain .price span {
                font-feature-settings: var(--base-font-feature-settings), "ss06" on;
                font-weight: 370;
                font-size: 16px;
            }

        #divSpecialCreditsRemain .companyName {
            text-align: left;
            width: 100%;
            font-size: 10px;
            font-weight: 370;
        }

    #divInsCredit,
    #_pnlInvoiceReport {
        flex-direction: column;
        gap: var(--padding-container);
    }

        #divInsCredit .item,
        #_pnlInvoiceReport .item {
            background: #f2f5f8;
            background: #f8f2f4;
            padding: 12px 15px;
            box-sizing: border-box;
            border-radius: 10px;
            flex-wrap: wrap;
            justify-content: space-between;
            display: flex;
            margin: 8px 0;
        }

        #divInsCredit .top,
        #_pnlInvoiceReport .top {
            width: 100%;
            border-bottom: 1px dashed #dee3e7;
            padding-bottom: 5px;
            margin-bottom: 5px;
            color: #6e798d;
            color: #8d6e7d;
            font-weight: 450;
        }

        #_pnlInvoiceReport .top {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            flex-direction: column;
        }

            #_pnlInvoiceReport .top .date {
                align-self: flex-end;
                color: var(--second-color);
                font-variation-settings: "DOTS" 1;
            }

                #_pnlInvoiceReport .top .date span {
                    font-size: 10px;
                }

        #divInsCredit .credit,
        #_pnlInvoiceReport .credit {
            font-size: 14px;
            font-weight: 600;
            margin-top: 4px;
        }

        #_pnlInvoiceReport .credit {
            color: var(--second-color);
            font-variation-settings: "DOTS" 1;
        }

            #divInsCredit .credit span,
            #_pnlInvoiceReport .credit span {
                display: block;
                color: #6e798d;
                color: #8d6e82;
                font-weight: 370;
            }

            #_pnlInvoiceReport .credit span {
                display: inline-block;
                padding-left: 5px;
            }

        #_pnlInvoiceReport .center {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            color: var(--second-color);
            font-variation-settings: "DOTS" 1;
        }

        #_pnlInvoiceReport .description {
            width: 100%;
            text-align: right;
            border-top: 1px dashed #dee3e7;
            padding-top: 10px;
            margin: 10px 0 0;
        }

    /**/
    .event {
        background: #f7f7f7;
        border-radius: 5px;
        padding: 10px;
        box-sizing: border-box;
        margin: 20px 0;
        box-shadow: 0 2px 5px #0000005e;
    }
    /**/

    .event-btn {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }

        .event-btn input {
            width: calc(50% - 10px);
            padding: 10px;
            height: auto;
        }

    .event .top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        padding-bottom: 10px;
    }

    .event .date {
        font-size: 10px;
        color: var(--text-onback-low);
    }

    .event .title {
        font-weight: 700;
        color: var(--second-color);
    }

    .event .body {
        color: var(--text-onback-low);
        padding-bottom: 10px;
        font-weight: 450;
    }

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

        .event .bottom span {
            color: var(--text-onback-low);
            font-size: 10px;
        }

    .field input.search-icon {
        position: absolute;
        left: 6px;
        top: 50%;
        width: 25px;
        height: auto;
        padding: 0;
        transform: translateY(-50%);
    }

    .registerPrice {
        padding-bottom: 10px;
        width: 100%;
    }

        .registerPrice span {
            font-size: 15px;
            color: #4626eb;
            display: block;
            text-align: center;
        }

        .registerPrice > span:last-child {
            display: block;
            color: #047d2b;
            font-size: 18px;
            font-weight: 600;
        }

    /*agent - RegisterAgentCtrl*/
    .upgrade-message {
        display: block;
        line-height: 1.5;
        margin-bottom: 16px;
        font-weight: bold;
        color: #333;
    }

    .agent-boxes {
        display: flex;
        flex-direction: column;
        margin-bottom: 25px;
    }

    .agent-box {
        border: 1px solid #dddddd;
        border-radius: 12px;
        padding: 15px;
        cursor: pointer;
        transition: all .3s ease;
        background: #fdfdfd;
        box-shadow: 0 2px 6px rgba(0, 0, 0, .05);
        box-sizing: border-box;
        margin: 6px;
    }

        .agent-box:hover {
            border-color: #4a90e2;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            transform: translateY(-3px);
        }

        .agent-box input[type="radio"] {
            display: none;
        }

        .agent-box.selected {
            border-color: #4a90e2;
            background: #f0f7ff;
            box-shadow: 0 4px 12px rgba(74, 144, 226, 0.3);
        }

    .agent-title {
        font-weight: bold;
        font-size: 16px;
        margin-bottom: 10px;
        display: block;
        color: #333;
    }

    .agent-details {
        margin-top: 12px;
        color: #444;
        line-height: 1.8;
    }

        .agent-details .item {
            display: flex;
            align-items: flex-start;
            gap: 6px;
            margin-bottom: 6px;
        }

        .agent-details .icon {
            color: #4a90e2;
            font-size: 14px;
            margin-top: 2px;
        }

        .agent-details .price {
            font-size: 16px;
            font-weight: bold;
            color: #2b6cb0;
            text-align: center;
            display: block;
            margin-top: 8px;
            border-top: 1px solid #eee;
            margin-top: 10px;
            padding-top: 8px;
        }

    .pnlForm .form {
        margin: 0;
    }

    .comment {
        background-color: #ffffff;
        border-radius: 8px;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        border: 1px solid #e2e8f0;
        margin-bottom: 12px;
        padding: 10px;
        box-sizing: border-box;
    }

        .comment .top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px dashed #ddd;
            margin-bottom: 10px;
            padding-bottom: 10px;
            gap: 5px;
        }

            .comment .top > * {
                color: var(--text-onback-low);
                font-size: 10px;
            }
}

@media (min-width: 525px) {
    .menu-item .item {
        width: calc(14.28% - 10px);
    }

    .menu-item .icon {
        padding: 18px;
    }

    #divSpecialCreditsRemain .item {
        width: calc(50% - (var(--padding-container) / 2));
    }

    .event-btn {
        flex-wrap: nowrap;
        justify-content: flex-start;
    }

        .event-btn input {
            width: 25%;
        }
}

@media (min-width: 768px) {
    .menu-item .item {
        width: calc(14.28% - 10px);
    }

    #_pnlInvoiceReport .top {
        align-items: center;
        flex-direction: row;
    }

        #_pnlInvoiceReport .top .date span {
            font-size: 11px;
            display: block;
        }
}

@media (min-width:992px) {
    .container {
        flex-direction: row;
    }

    .status-card {
        width: 300px;
    }

    .pay-menu a {
        width: 15%;
    }

    .installment-card.registeredPast {
        flex-direction: row;
        gap: 0;
    }

    .maximize .generic-card {
        display: inline-flex;
        width: calc(33.33% - 14px);
        margin: 6px;
    }

    .maximize input.action-btn {
        width: 100%;
    }
}

@media (min-width:1200px) {
    .menu-item .item {
        width: calc(20% - 10px);
    }

    #divSpecialCreditsRemain .item {
        width: 100%;
    }
}

@media (min-width:1400px) {
    #divSpecialCreditsRemain .item {
        width: calc(50% - (var(--padding-container) / 2));
    }

    .tuition-card {
        flex-direction: row;
        gap: 10px;
    }

        .tuition-card .right {
            justify-content: right;
        }

        .tuition-card .right {
            width: 60%;
        }

        .tuition-card .left {
            width: 40%;
        }
}

@media (min-width:1500px) {
    .menu-item .item {
        width: calc(14.28% - 10px);
    }

    .menu-item .icon {
        padding: 15px;
    }

    .maximize .generic-card {
        width: calc(20% - 14px);
    }
}

@media only screen and (max-width: 768px) and (min-width: 0) {
}

/*keyframes*/
@keyframes animateErrorIcon {
    0% {
        -webkit-transform: rotateX(100deg);
        transform: rotateX(100deg);
        opacity: 0;
    }

    100% {
        -webkit-transform: rotateX(0deg);
        transform: rotateX(0deg);
        opacity: 1;
    }
}