﻿:root {
    --blue: #1e90ff;
    --white: #ffffff;
}

.internet .warning {
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 22px;
    color: #2858ff;
}

    .internet .warning img {
        width: 16px;
        height: 16px;
    }

@media (max-width: 992px) {
    .internet {
        background: #e6e6e6 !important;
        border-radius: 15px;
    }
}

.package {
    background: #e6e6e6;
    border-radius: 31px;
    padding: 60px;
    min-height: 100vh;
}

    .package .package-box .package-item {
        height: 201px;
        border-radius: 15px;
        border: 3px solid #fff;
        padding: 3px;
        margin-bottom: 10px;
    }

        .package .package-box .package-item .package-body {
            mix-blend-mode: normal;
            border-radius: 15px;
            height: 190px;
            padding: 5px;
            text-align: center;
        }

            .package .package-box .package-item .package-body.irancell {
                background-color: #ffcb08;
            }

            .package .package-box .package-item .package-body.hamrahaval {
                background-color: #74d0d6;
            }

            .package .package-box .package-item .package-body.rightel {
                background-color: #bc23ad;
            }

            .package .package-box .package-item .package-body.talia {
                background-color: #bc23ad;
            }


            .package .package-box .package-item .package-body.rightel .package-vat,
            .package .package-box .package-item .package-body.rightel h5,
            .package .package-box .package-item .package-body.rightel h6 {
                color: #fff !important;
            }

            .package .package-box .package-item .package-body.shatel {
                background-color: #0c59c1;
            }

                .package .package-box .package-item .package-body.shatel .package-vat,
                .package .package-box .package-item .package-body.shatel h5,
                .package .package-box .package-item .package-body.shatel h6 {
                    color: #fff !important;
                }

            .package .package-box .package-item .package-body h5,
            .package .package-box .package-item .package-body h6 {
                font-style: normal;
                font-weight: 900;
                font-size: 14px;
                line-height: 22px;
                text-align: center;
            }

            .package .package-box .package-item .package-body h6 {
                white-space: pre-wrap;
                overflow: hidden;
                text-overflow: ellipsis;
                height: 47px;
            }

            .package .package-box .package-item .package-body .btn-buy {
                height: 28px;
                background: #fff;
                border-radius: 11px;
                width: 100%;
                padding: 0;
                max-width: 132px;
            }

            .package .package-box .package-item .package-body .btn-primary-buy {
                height: 28px;
                background: #2858ff;
                border-radius: 11px;
                width: 100%;
                padding: 0;
                max-width: 132px;
                color: #fff;
            }

            .package .package-box .package-item .package-body .package-vat {
                font-size: 14px;
                margin-bottom: 10px;
            }

@media (max-width: 992px) {
    .package {
        background: #e6e6e6;
        border-radius: 31px;
        padding: 10px;
    }
}

.captcha-modal .btn-success {
    padding-top: 12px;
    height: 50px;
    background: #00d37b;
    border-radius: 21px;
    border: none !important;
    font-style: normal;
    font-weight: 900;
    font-size: 18px;
    line-height: 28px;
    text-align: center;
    color: #fff;
}

.tab .tab-item {
    cursor: pointer;
    text-align: center;
}

    .tab .tab-item img {
        width: 44px;
        height: 44px;
        mix-blend-mode: luminosity;
        opacity: 0.4;
    }

    .tab .tab-item.active img {
        opacity: 1 !important;
        mix-blend-mode: normal !important;
    }

.form-select {
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem 0.375rem 2.25rem;
    -moz-padding-start: calc(0.75rem - 3px);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 0.75rem center;
    background-size: 16px 12px;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    -webkit-appearance: none;
    appearance: none;
}

@media (prefers-reduced-motion: reduce) {
    .form-select {
        transition: none;
    }
}

.form-select:focus {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.form-select[multiple],
.form-select[size]:not([size="1"]) {
    padding-left: 0.75rem;
    background-image: none;
}

.form-select:disabled {
    background-color: #e9ecef;
}

.form-select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #212529;
}

.form-select-sm {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    padding-right: 0.5rem;
    font-size: 0.875rem;
}

.form-select-lg {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-right: 1rem;
    font-size: 1.25rem;
}

.filter .btn-periodTime {
    font-weight: 900;
    font-size: 16px;
    line-height: 28px;
    display: inline-block;
    /*width: 100%;*/
    text-align: center;
    padding: 5px 20px;
    border-radius: 15px;
    cursor: pointer;
    color: rgba(13, 13, 13, 0.77);
    background-color: #e2e6f6;
    border: 1px solid #cbc3ff80;
}

    .filter .btn-periodTime.irancell.active {
        background-color: #fff2c2;
        border: 2px solid #ffcb08;
        background: #fff2c2;
        color: #000;
    }

    .filter .btn-periodTime.hamrahaval.active {
        background-color: #e5e1f0;
        border: 1px solid #7d08f224;
        color: #000;
    }

    .filter .btn-periodTime.rightel.active {
        background-color: #df64d2;
        border: 2px solid #bc23ad;
        color: #fff;
    }

    .filter .btn-periodTime.shatel.active {
        background-color: #4b95f9;
        border: 2px solid #0c59c1;
        color: #fff;
    }

.filter .slider .ant-slider-track {
    background-color: #000;
}

.filter .slider.irancell .ant-slider-handle {
    background-color: #fff2c2;
    border: 1px solid #000;
}

.filter .slider.hamrahaval .ant-slider-handle {
    background-color: #dffdff;
    border: 1px solid #000;
}

.filter .slider.rightel .ant-slider-handle {
    background-color: #df64d2;
    border: 1px solid #000;
}

.filter .slider.shatel .ant-slider-handle {
    background-color: #4b95f9;
    border: 1px solid #000;
}

@media (max-width: 992px) {
    .filter {
        background: #e6e6e6;
    }

        .filter .btn-periodTime {
            padding: 5px !important;
        }
}

.currency-Input .prefix {
    position: absolute;
    left: 16px;
    top: 12px;
    font-weight: 700;
    font-size: 20px;
}


[template="official"] .topbar a {
    text-decoration: none !important;
}

[template="official"] .topbar .item {
    cursor: pointer;
    background: #f5f6f6;
    border: 1px solid rgba(43, 54, 116, 0.5);
    box-sizing: border-box;
    border-radius: 21px;
    height: 119px;
}

    [template="official"] .topbar .item .title {
        font-style: normal;
        font-weight: 900;
        font-size: 23px;
        line-height: 40px;
        text-align: right;
        color: #2b3674;
    }

    [template="official"] .topbar .item.active {
        background: #fff;
        box-shadow: 0 12px 30px -12px rgba(43, 54, 116, 0.5);
    }

@media (min-width: 991px) {
    [template="official"] .topbar .item {
        padding: 0 15px;
    }
}

@media (max-width: 991px) {
    [template="official"] .topbar .item {
        padding: 0;
        height: 80px;
    }

        [template="official"] .topbar .item .title {
            font-weight: 900;
            font-size: 18px;
            line-height: 28px;
        }
}


[template="official"] .default-input {
    background: #fff;
    border: 1px solid #bebebe;
    box-sizing: border-box;
    border-radius: 21px;
    height: 50px;
    font-weight: 700;
    font-size: 20px;
}

    [template="official"] .default-input.error {
        border-color: red;
        color: red !important;
    }

    [template="official"] .default-input::-webkit-input-placeholder {
        font-style: normal;
        font-weight: 900;
        font-size: 18px;
        line-height: 28px;
        text-align: right;
        color: #000;
    }

    [template="official"] .default-input:-ms-input-placeholder {
        font-style: normal;
        font-weight: 900;
        font-size: 18px;
        line-height: 28px;
        text-align: right;
        color: #000;
    }

    [template="official"] .default-input::placeholder {
        font-style: normal;
        font-size: 14px;
        line-height: 28px;
        text-align: right;
        color: #a5a4a4;
    }

[template="official"] .default-select {
    background-color: #fff;
    border: 1px solid #bebebe;
    box-sizing: border-box;
    border-radius: 21px;
    height: 50px;
}

[template="official"] .btn-default-success {
    background: #00d37b;
    font-style: normal;
    text-align: center;
}

[template="official"] .btn-default-primary,
[template="official"] .btn-default-success {
    padding-top: 12px;
    height: 50px;
    border-radius: 21px;
    border: none !important;
    font-weight: 900;
    font-size: 18px;
    line-height: 28px;
    color: #fff;
}

[template="official"] .btn-default-primary {
    background: #2858ff;
}

[template="official"] label {
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 22px;
    text-align: right;
    color: #000;
    margin-bottom: 10px;
}



.ant-spin-nested-loading {
    position: relative;
}

    .ant-spin-nested-loading > div > .ant-spin {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 4;
        display: block;
        width: 100%;
        height: 100%;
        max-height: 400px;
    }

        .ant-spin-nested-loading > div > .ant-spin .ant-spin-dot {
            position: absolute;
            top: 50%;
            left: 50%;
            margin: -10px;
        }

        .ant-spin-nested-loading > div > .ant-spin .ant-spin-text {
            position: absolute;
            top: 50%;
            width: 100%;
            padding-top: 5px;
            text-shadow: 0 1px 2px #fff;
        }

        .ant-spin-nested-loading > div > .ant-spin.ant-spin-show-text .ant-spin-dot {
            margin-top: -20px;
        }

    .ant-spin-nested-loading > div > .ant-spin-sm .ant-spin-dot {
        margin: -7px;
    }

    .ant-spin-nested-loading > div > .ant-spin-sm .ant-spin-text {
        padding-top: 2px;
    }

    .ant-spin-nested-loading > div > .ant-spin-sm.ant-spin-show-text .ant-spin-dot {
        margin-top: -17px;
    }

    .ant-spin-nested-loading > div > .ant-spin-lg .ant-spin-dot {
        margin: -16px;
    }

    .ant-spin-nested-loading > div > .ant-spin-lg .ant-spin-text {
        padding-top: 11px;
    }

    .ant-spin-nested-loading > div > .ant-spin-lg.ant-spin-show-text .ant-spin-dot {
        margin-top: -26px;
    }

.ant-spin-container {
    position: relative;
    transition: opacity 0.3s;
}

    .ant-spin-container:after {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 10;
        display: none\9;
        width: 100%;
        height: 100%;
        background: #fff;
        opacity: 0;
        transition: all 0.3s;
        content: "";
        pointer-events: none;
    }

.ant-list-split.ant-list-something-after-last-item .ant-spin-container > .ant-list-items > .ant-list-item:last-child {
    border-bottom: 1px solid #f0f0f0;
}

.text-muted {
    --bs-text-opacity: 1;
    color: #6c757d !important;
}

.directCharge {
    padding: 77px;
    background: #e6e6e6;
    border: 1px solid #a3aed0;
    box-sizing: border-box;
    border-radius: 31px;
}

    .directCharge .warning {
        font-style: normal;
        font-weight: 700;
        font-size: 14px;
        line-height: 22px;
        color: #2858ff;
    }

        .directCharge .warning img {
            width: 16px;
            height: 16px;
        }

    .directCharge .types .type-item {
        text-align: center;
    }

        .directCharge .types .type-item img {
            width: 64px;
            height: 64px;
            mix-blend-mode: luminosity;
            opacity: 0.4;
        }

        .directCharge .types .type-item.active img {
            opacity: 1 !important;
            mix-blend-mode: normal !important;
        }

    .directCharge .btn-charge {
        background: #fff;
        border: 1px solid #bebebe;
        box-sizing: border-box;
        border-radius: 21px;
        height: 34px;
        width: 100%;
        margin-bottom: 10px;
        overflow: hidden;
        padding: 0;
    }

        .directCharge .btn-charge.irancell.active {
            background-color: #fff2c2;
            border: 1px solid #ffcb08;
        }

        .directCharge .btn-charge.hamrahaval.active {
            background-color: #dffdff;
            border: 1px solid #74d0d6;
        }

        .directCharge .btn-charge.rightel.active {
            background-color: #df64d2;
            border: 1px solid #bc23ad;
            color: #fff !important;
        }

            .directCharge .btn-charge.rightel.active span {
                color: #fff !important;
            }

        .directCharge .btn-charge.shatel.active {
            background-color: #4b95f9;
            border: 1px solid #0c59c1;
            color: #fff !important;
        }

            .directCharge .btn-charge.shatel.active span {
                color: #fff !important;
            }

        .directCharge .btn-charge small {
            font-style: normal;
            font-weight: 700;
            font-size: 13px;
            line-height: 19px;
            margin: 0 2px;
            color: #bebebe;
        }

        .directCharge .btn-charge span {
            font-style: normal;
            font-weight: 700;
            font-size: 15px;
            line-height: 28px;
            color: #545454;
        }

@media (max-width: 992px) {
    .directCharge {
        padding: 19px !important;
    }
}

.purchaseInformation {
    padding-top: 60px;
    padding-left: 75px;
    padding-right: 75px;
}

    .purchaseInformation .header {
        padding: 11px 0;
        height: 50px;
        background: #e6e6e6;
        border-radius: 21px;
        text-align: center;
        font-style: normal;
        font-weight: 900;
        font-size: 18px;
        line-height: 28px;
        color: #000;
    }

    .purchaseInformation .text-muted {
        font-size: 16px;
        color: #bebebe !important;
    }

    .purchaseInformation .text-muted, .purchaseInformation .text-result {
        font-style: normal;
        font-weight: 900;
        line-height: 28px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .purchaseInformation .text-result {
        font-size: 18px;
        color: #000;
        white-space: nowrap;
    }

@media(max-width: 991px) {
    .purchaseInformation {
        padding-top: 100px;
        padding-left: 0;
        padding-right: 0;
    }

        .purchaseInformation .text-muted {
            font-size: 15px;
        }

        .purchaseInformation .text-result {
            font-size: 16px;
        }
}



.text-start {
    text-align: right !important;
}

.text-end {
    text-align: left !important;
}

.basteh_pay {
    max-height: 30px;
    margin-bottom: 10px;
}


.sim-topbar .sim-tabTop {
    position: relative;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 14px 18px;
    transition: all .25s ease;
    cursor: pointer;
    text-decoration: none;
    color: #374151;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
}

    .sim-topbar .sim-tabTop:hover {
        transform: translateY(-2px);
        border-color: #4f46e5;
        box-shadow: 0 8px 24px rgba(79,70,229,.12);
    }

    .sim-topbar .sim-tabTop.sim-active {
        background: linear-gradient(135deg,#4f46e5,#2563eb);
        color: #fff;
        border-color: transparent;
        box-shadow: 0 12px 30px rgba(79,70,229,.30);
    }

        .sim-topbar .sim-tabTop.sim-active .title {
            color: #fff;
            font-weight: 700;
        }

        .sim-topbar .sim-tabTop.sim-active img {
            filter: brightness(0) invert(1);
        }

        .sim-topbar .sim-tabTop.sim-active::before {
            content: "";
            position: absolute;
            top: 0;
            left: 12px;
            right: 12px;
            height: 4px;
            border-radius: 0 0 10px 10px;
            /*background:#facc15;*/
        }

        .sim-topbar .sim-tabTop.sim-active::after {
            content: "";
            position: absolute;
            bottom: -8px;
            left: 50%;
            transform: translateX(-50%) rotate(45deg);
            width: 14px;
            height: 14px;
            background: #2563eb;
            border-radius: 2px;
        }

.operator-section {
    margin: 10px 0;
}

.operator-card {
    background: #fff;
    border: 2px solid #edf1f7;
    border-radius: 18px;
    padding: 18px 10px;
    text-align: center;
    cursor: pointer;
    transition: .25s;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

    .operator-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 25px rgba(0,0,0,.08);
        border-color: #0d6efd;
    }

    .operator-card img {
        width: 58px;
        height: 58px;
        object-fit: contain;
        margin-bottom: 10px;
    }

    .operator-card span {
        font-size: 14px;
        font-weight: 600;
        color: #495057;
    }

    .operator-card.active {
        background: #eef5ff;
        border-color: #0d6efd;
    }

        .operator-card.active span {
            color: #0d6efd;
        }

@media(max-width:576px) {

    .operator-card {
        padding: 14px 6px;
    }

        .operator-card img {
            width: 44px;
            height: 44px;
        }

        .operator-card span {
            font-size: 12px;
        }
}

.phone-input-group {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0,0,0,.05);
}

    .phone-input-group .form-control {
        height: 58px;
        font-size: 18px;
        border: none;
    }

    .phone-input-group .input-group-text {
        background: white;
        border: none;
    }

.operator-prefix img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    transition: .3s;
}

.operatorIconBasteh-prefix img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    transition: .3s;
}

/* حالت عادی */
#price_direct {
    transition: all .25s ease;
}

    /* حالت خطا */
    #price_direct.price-error {
        border: 2px solid #dc3545;
        background: #fff5f5;
        color: #dc3545;
        box-shadow: 0 0 0 .25rem rgba(220,53,69,.15);
    }

/* متن خطا */
.price-error-text {
    display: none;
    margin-top: 8px;
    color: #dc3545;
    font-size: .85rem;
    font-weight: 600;
    animation: fadeIn .2s ease;
}

    .price-error-text.show {
        display: block;
    }

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.package-filter-card {
    background: #fff;
    border-radius: 22px;
    padding: 28px;
    box-shadow: 0 12px 40px rgba(0,0,0,.06);
    margin-bottom: 35px;
}


.period-list {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}


.btn-periodTime {
    border-radius: 40px;
    padding: 10px 22px;
    background: #f5f7fb;
    border: 1px solid #e5e7eb;
    transition: .25s;
    font-weight: 600;
    cursor: pointer;
}


    .btn-periodTime:hover {
        background: #eef4ff;
    }

.package-item {
    height: 100%;
    background: #fff;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid #edf2f7;
    transition: .35s;
    position: relative;
    box-shadow: 0 8px 25px rgba(0,0,0,.05);
}


    .package-item:hover {
        transform: translateY(-8px);
        box-shadow: 0 25px 45px rgba(0,0,0,.12);
    }


.package-body {
    padding: 28px 24px;
    text-align: center;
    position: relative;
}


.package-header {
    margin-bottom: 18px;
}


.package-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 50px;
    background: #f5f7fb;
    font-size: 12px;
    font-weight: 700;
}


.package-divider {
    width: 45px;
    height: 4px;
    border-radius: 10px;
    background: #ececec;
    margin: 16px auto;
}


.basteh-title {
    font-size: 12px;
    font-weight: 700;
    min-height: 48px;
    line-height: 1.8;
    color: #2d3748;
}


.basteh-price {
    font-size: 18px;
    font-weight: 800;
    color: #7c3aed;
    margin: 10px 0 0;
}


.package-vat {
    display: block;
    color: #8d98aa;
    margin-top: 6px;
    font-size: 12px;
}


.btn-buy {
    height: 48px;
    border: none;
    border-radius: 14px;
    font-weight: 700;
    background: linear-gradient(135deg,#4f46e5,#7c3aed);
    color: #fff;
    transition: .3s;
}


    .btn-buy:hover {
        transform: translateY(-2px);
        color: #fff;
        box-shadow: 0 10px 22px rgba(79,70,229,.35);
    }

    .btn-buy.hamrahaval {
        background: linear-gradient(135deg,#80c5cb,#7ec0c6);
    }

    .btn-buy.irancell {
        background: linear-gradient(135deg,#155fa5,#00688f);
    }

    .btn-buy.rightel {
        background: linear-gradient(135deg,#9b2777,#ae4e8b);
    }

    .btn-buy.shatel {
        background: linear-gradient(135deg,#f25e20,#200c04);
    }

    .btn-buy.talia {
        background: linear-gradient(135deg,#e40513,#411417);
    }

.package-body.hamrahaval {
    border-top: 5px solid #e7a846;
}

.package-body.irancell {
    border-top: 5px solid #ffcb09;
}

.package-body.rightel {
    border-top: 5px solid #9b2776;
}

.package-body.shatel {
    border-top: 5px solid #022a53;
}

.package-body.talia {
    border-top: 5px solid #e40513;
}

.btn-primary-buy {
    border-radius: 40px;
    padding: 12px;
    font-weight: 700;
}

.period-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
}

.period-scroll {
    flex: 1;
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
    padding: 5px;
}

    .period-scroll::-webkit-scrollbar {
        display: none;
    }

    .period-scroll:active {
        cursor: grabbing;
    }

.btn-periodTime {
    flex: 0 0 auto;
    white-space: nowrap;
    min-width: 105px;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    padding: 0 22px;
    background: #f4f6fb;
    border: 1px solid #e4e7ee;
    transition: .25s;
    user-select: none;
}

    .btn-periodTime:hover {
        transform: translateY(-2px);
    }

    .btn-periodTime.active {
        background: #2563eb;
        color: #fff;
        border-color: #2563eb;
    }

.period-nav {
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 4px 14px rgba(0,0,0,.12);
    transition: .2s;
}

    .period-nav:hover {
        transform: scale(1.08);
    }

@media(max-width:768px) {

    .period-nav {
        display: none;
    }
}

.switchToggle{
    display:flex;
    flex-wrap:wrap;
    gap:.75rem;
    justify-content:center;
    margin:20px 0;
}

.switchToggle .selch{

    min-width:120px;
    height:48px;

    padding:0 22px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:14px;

    background:#fff;

    border:2px solid #e8edf5;

    color:#4d5969;

    font-size:.92rem;
    font-weight:600;

    cursor:pointer;

    transition:.25s;

    user-select:none;

    box-shadow:0 4px 14px rgba(0,0,0,.05);

}

.switchToggle .selch:hover{

    transform:translateY(-2px);

    box-shadow:0 10px 24px rgba(0,0,0,.10);

}

.switchToggle .selch.checked{

    color:#fff;

    border-color:transparent;

    transform:translateY(-2px);

    box-shadow:0 12px 30px rgba(0,0,0,.18);

}

.selch.hamrahaval.checked{

    background:linear-gradient(135deg,#7fc2c8,#80c4ca);

}

.selch.irancell.checked{

    background:linear-gradient(135deg,#daaf0f,#dfb414);

}

.selch.rightel.checked{

    background:linear-gradient(135deg,#863571,#a66796);

}

.selch.shatel.checked{

    background:linear-gradient(135deg,#00b894,#00a884);

}

.selch.talia.checked{

    background:linear-gradient(135deg,#002a63,#052862);

}
@media (max-width:768px){

    .switchToggle{

        justify-content:flex-start;

        overflow-x:auto;

        flex-wrap:nowrap;

        padding-bottom:6px;

        scrollbar-width:none;

    }

    .switchToggle::-webkit-scrollbar{

        display:none;

    }

    .switchToggle .selch{

        flex:0 0 auto;

        min-width:105px;

        font-size:.85rem;

        height:44px;

    }

}