:root {
    --primary: #1890ff;
    --secondary: #e6f7ff;
    --light-gray: #dcddde;
    --gray: #eeeeee;
    --dark-gray: #808389;
    --cloud: #f8f8f8;
    --white: #ffffff;
    --black: #424750;
    --dark-blue: #04537d;
    --success-green: #00b88e;
}

@font-face {
    font-family: IRANSansX;
    font-style: normal;
    font-weight: 100;
    src: url("../fonts/woff/IRANSansX-Thin.woff") format("woff"), url("../fonts/woff2/IRANSansX-Thin.woff2") format("woff2");
}

@font-face {
    font-family: IRANSansX;
    font-style: normal;
    font-weight: 200;
    src: url("../fonts/woff/IRANSansX-UltraLight.woff") format("woff"), url("../fonts/woff2/IRANSansX-UltraLight.woff2") format("woff2");
}

@font-face {
    font-family: IRANSansX;
    font-style: normal;
    font-weight: 300;
    src: url("../fonts/woff/IRANSansX-Light.woff") format("woff"), url("../fonts/woff2/IRANSansX-Light.woff2") format("woff2");
}

@font-face {
    font-family: IRANSansX;
    font-style: normal;
    font-weight: 500;
    src: url("../fonts/woff/IRANSansX-Medium.woff") format("woff"), url("../fonts/woff2/IRANSansX-Medium.woff2") format("woff2");
}

@font-face {
    font-family: IRANSansX;
    font-style: normal;
    font-weight: 600;
    src: url("../fonts/woff/IRANSansX-DemiBold.woff") format("woff"), url("../fonts/woff2/IRANSansX-DemiBold.woff2") format("woff2");
}

@font-face {
    font-family: IRANSansX;
    font-style: normal;
    font-weight: 800;
    src: url("../fonts/woff/IRANSansX-ExtraBold.woff") format("woff"), url("../fonts/woff2/IRANSansX-ExtraBold.woff2") format("woff2");
}

@font-face {
    font-family: IRANSansX;
    font-style: normal;
    font-weight: 900;
    src: url("../fonts/woff/IRANSansX-Black.woff") format("woff"), url("../fonts/woff2/IRANSansX-Black.woff2") format("woff2");
}

@font-face {
    font-family: IRANSansX;
    font-style: normal;
    font-weight: 950;
    src: url("../fonts/woff/IRANSansX-ExtraBlack.woff") format("woff"), url("../fonts/woff2/IRANSansX-ExtraBlack.woff2") format("woff2");
}

@font-face {
    font-family: IRANSansX;
    font-style: normal;
    font-weight: 1000;
    src: url("../fonts/woff/IRANSansX-Heavy.woff") format("woff"), url("../fonts/woff2/IRANSansX-Heavy.woff2") format("woff2");
}

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

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



html {
    font-size: 13px;
    font-family: IRANSansX;
    direction: rtl;
    text-align: right;
    background-color: var(--cloudy);
}

@media (min-width:576px) {
    html {
        font-size: 13.5px;
    }
}

@media (min-width:768px) {
    html {
        font-size: 14px;
    }
}

@media (min-width:992px) {
    html {
        font-size: 14.5px;
    }
}

@media (min-width:1200px) {
    html {
        font-size: 15px;
    }
}

* {
    font-family: IRANSansX;
    transition: 0.3s ease-out !important;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    background-color: rgba(0,0,0,0.05);
    position: relative;
}



.btn {
    width: 100%;
    padding: 0.75em;
    border: 0;
    border-radius: 0.5em;
    font-size: 0.875em;
    font-weight: 400;
    margin-bottom: 1em;
    cursor: pointer;
}

    .btn:disabled {
        background-color: #eeeeee;
        color: #dcddde;
    }

.primary-btn {
    background-color: #1890ff;
    color: #fff;
}

    .primary-btn:hover {
        background-color: #0780ee;
    }

    .primary-btn .icon.left svg {
        margin-right: 1em;
    }

/* .primary-btn:hover {
        background-color: var(--primary);
        color: var(--white);
    }*/

/* .primary-btn:hover svg {
            stroke: var(--white);
        }*/

.loading {
    display: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    position: fixed;
    z-index: 10000;
    background-color: rgba(0,0,0,0.2);
    transition:0s;
}

    .loading.active {
        display: flex;
    }

    .loading > img {
        width: 6em;
        height: 6em;
        object-fit: contain;
        object-position: center;
    }

.secondary-btn {
    background-color: var(--secondary);
    color: var(--primary);
    border: 1px solid var(--primary);
}

    .secondary-btn:hover {
        background-color: #d5e6ee;
    }

.btn svg {
    vertical-align: middle;
}

.secondary-btn .icon.right svg {
    margin-left: 1em;
}

.secondary-btn:hover {
}

.danger-btn {
    background-color: red;
    color: var(--white);
}

.transparent-btn {
    padding: 0;
    color: var(--primary);
    background-color: transparent;
}

    .transparent-btn:hover {
    }

.link {
    cursor: pointer;
}

.input {
    width: 100%;
    height: 3em;
    border-radius: 0.5em;
    border: solid 1px var(--light-gray);
    padding: 1em;
}

    .input:focus,
    .textarea:focus {
        outline: none;
    }

label {
    display: inline-block;
    margin-bottom: 0.75em;
    font-size: 0.8em;
    font-weight: 300;
}

.select {
    webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url(../images/down.png);
    background-repeat: no-repeat;
    width: 100%;
    height: 3em;
    display: block;
    border: 1px solid var(--light-gray);
    padding: 0 1em 0 3em;
    background-position: left center;
    background-position-x: 1em;
    border-radius: 0.5em;
}

svg {
    vertical-align: middle;
}

.textarea {
    display: block;
    width: 100%;
    padding: 1em;
    border: 1px solid var(--light-gray);
    border-radius: 0.5em;
    resize: none;
}

a {
    text-decoration: none;
    color: var(--black);
}

    a:hover {
        color: var(--primary);
    }

.radio-box {
    display: block;
    position: relative;
    padding-right: 1.5em;
    cursor: pointer;
    font-size: 1em;
    font-weight: 700;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    .radio-box input[type="radio"] {
        position: absolute;
        opacity: 0;
        cursor: pointer;
    }

    .radio-box .checkmark {
        position: absolute;
        top: 0;
        right: 0;
        height: 1.5em;
        width: 1.5em;
        background-color: var(--light-gray);
        border-radius: 50%;
        margin-left: 0.5em;
    }

    .radio-box .label {
        display: inline-block;
        margin-right: 0.5em;
        font-size: 1em;
        font-weight: 400;
    }

    .radio-box:hover input ~ .checkmark {
        background-color: var(--light-gray);
    }

    .radio-box input:checked ~ .checkmark {
        background-color: var(--primary) !important;
    }

    .radio-box input:disabled ~ .checkmark {
        background-color: var(--gray);
    }

    .radio-box .checkmark:after {
        content: "";
        position: absolute;
        display: none;
    }

    .radio-box input:checked ~ .checkmark:after {
        display: block;
    }

    .radio-box .checkmark:after {
        top: calc(50% - 0.375em);
        left: calc(50% - 0.375em);
        width: 0.75em;
        height: 0.75em;
        border-radius: 50%;
        background: white;
    }

.d-none {
    display: none !important;
}

.form-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2em;
    margin: 1em 0;
}

    .form-row > div {
        width: 50%;
    }

.checkbox-box {
    display: flex;
    align-items: start;
    gap: 0.5em;
}

.form-group {
    margin-bottom: 2em;
}


.modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.55);
    display: flex;
    justify-content: center;
    align-items: center;
    display: none;
    z-index:2;
}

    .modal.active {
        display: flex;
    }

    .modal .modal-container {
        width: 90%;
        max-height: 90%;
        max-width: 40em;
        background-color: var(--cloud);
        border-radius: 0.5em;
        overflow: auto;
    }

        .modal .modal-container .modal-header {
            background-color: #232323;
            /*background-color: rgba(3, 32, 105, 0.95);*/
            padding: 1.7em 2em;
            color: var(--white);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

            .modal .modal-container .modal-header h3 {
                font-weight: 500;
            }

            .modal .modal-container .modal-header button {
                font-size: 1.75em;
                color: var(--cloud);
                background-color: transparent;
                border: 0;
                cursor: pointer;
            }

        .modal .modal-container .modal-content {
            padding: 1.5rem 2rem;
            font-size: 0.95em;
        }

            .modal .modal-container .modal-content p.title {
                margin: 0.5em 0 1em;
                line-height: 1.7;
                text-align: center;
                font-size: 0.95em;
            }

            .modal .modal-container .modal-content > div {
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                flex-wrap: wrap;
                margin: 0.7em 0;
                position: relative;
            }

                .modal .modal-container .modal-content > div:not(.form-group):before {
                    content: "";
                    position: absolute;
                    left: 0;
                    top: 0.7em;
                    height: 1px;
                    width: 100%;
                    border-bottom: dashed 1px rgba(0,0,0,0.15);
                }

            .modal .modal-container .modal-content div > a {
                color: var(--dark-gray);
                text-align: right;
                font-weight: 400;
                padding-left: 0.5em;
                background-color: var(--cloud);
                z-index: 1;
            }

            .modal .modal-container .modal-content div > span {
                text-align: left;
                font-weight: 400;
                padding-right: 0.5em;
                background-color: var(--cloud);
                z-index: 1;
            }

        .modal .modal-container .modal-reason {
            display: flex;
            justify-content: start;
            align-items: center;
            padding: 0 2rem;
            font-size: 0.95em;
            margin-bottom: 2em;
        }

            .modal .modal-container .modal-reason > div {
                width: 100%;
                background-color: #ffede4;
                border: 1px solid #ff6a40;
                padding: 0.7em 0.5em;
                border-radius: 0.5em;
                padding-right: 2.9rem;
                position: relative;
            }

            .modal .modal-container .modal-reason svg {
                width: 1.3rem;
                height: 1.3rem;
                object-fit: contain;
                object-position: center;
                position: absolute;
                right: 1em;
                top: calc(50% - 0.75rem);
            }

            .modal .modal-container .modal-reason h4 {
                font-size: 1.05em;
                display: block;
                font-weight: 600;
                color: #ff6a40;
                margin-bottom: 0.2em;
            }

            .modal .modal-container .modal-reason p {
                width: calc(100% - 1.5rem);
                font-size: 0.9em;
                font-weight: 300;
                display: block;
            }

        .modal .modal-container .modal-footer {
            padding: 0 2rem 1.5em;
            margin-top: -0.5em;
        }

            .modal .modal-container .modal-footer button {
                margin: 0;
            }
/* Start Popup  */
/*.popup-container {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    justify-content: center;
    align-items: center;
}

    .popup-container.open {
        display: flex;
    }

    .popup-container .popup-overlay {
        position: fixed;
        width: 100vw;
        height: 100vh;
        background-color: var(--black);
        opacity: 50%;
    }*/
/*
    .popup-container .popup-wrapper {
        max-width: 50%;
        margin: auto;
        height: max-content;
        z-index: 100000;
        background-color: var(--cloud);
        border-radius: 0.5em;
        overflow: hidden;
    }

        .popup-container .popup-wrapper .popup-header {
            background-color: #232323;
            padding: 2em;
            color: var(--white);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

            .popup-container .popup-wrapper .popup-header h3 {
                font-weight: 500;
            }

            .popup-container .popup-wrapper .popup-header .close {
                font-size: 1.75em;
                color: var(--cloud);
                background-color: transparent;
                border: 0;
                cursor: pointer;
            }

        .popup-container .popup-wrapper .popup-content {
            padding: 1em 1.5em;
        }

        .popup-container .popup-wrapper .overview-section {
            padding: 1em 1.5em;
            background-color: var(--gray);
            border-radius: 0.5em;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5em;
        }

            .popup-container .popup-wrapper .overview-section .device-info-section h5 {
                font: size 1em;
                font-weight: 500;
                margin-bottom: 0.5em;
            }

            .popup-container .popup-wrapper .overview-section .device-info-section p {
                font-size: 0.875em;
                color: var(--dark-gray);
            }

            .popup-container
            .popup-wrapper
            .overview-section
            .device-info-section
            .claim-status-section {
                padding: 1em 0;
                border-bottom: 1px solid var(--gray);
                margin: 1em 0;
            }

        .popup-container .popup-wrapper .claim-type-section {
            margin-bottom: 1em;
        }

            .popup-container .popup-wrapper .claim-type-section h6 {
                font-size: 1em;
                color: #999;
                font-weight: 400;
                margin-bottom: 0.25em;
            }

#account.popup-container .popup-wrapper .overview-section {
    flex-direction: column;
    gap: 0.5em;
}

    #account.popup-container .popup-wrapper .overview-section .price-box {
        display: flex;
        align-items: center;
        gap: 0.5em;
    }

        #account.popup-container .popup-wrapper .overview-section .price-box .price {
            font-size: 1.5em;
            font-weight: 700;
        }

        #account.popup-container .popup-wrapper .overview-section .price-box .currency {
            font-size: 0.875em;
        }

.popup-container .popup-wrapper .popup-content .claim-detail-section {
    background-color: var(--white);
    border-radius: 0.5em;
    padding: 1em;
    border: 1px solid var(--gray);
    max-height: 25vh;
    overflow-y: scroll;
}

    .popup-container
    .popup-wrapper
    .popup-content
    .claim-detail-section
    table
    tbody
    tr
    td {
        font-size: 0.875em;
        padding-bottom: 0.5em;
    }

        .popup-container
        .popup-wrapper
        .popup-content
        .claim-detail-section
        table
        tbody
        tr
        td:first-child {
            width: 25%;
            color: var(--dark-gray);
            text-align: right;
        }

        .popup-container
        .popup-wrapper
        .popup-content
        .claim-detail-section
        table
        tbody
        tr
        td:last-child {
            width: 75%;
            text-align: left;
            font-weight: 500;
        }

.popup-container .popup-wrapper .popup-content .claim-status-reasons {
    display: flex;
    align-items: center;
    gap: 1em;
    margin: 1em 0;
    padding: 0.5em;
    border-radius: 0.5em;
}

    .popup-container .popup-wrapper .popup-content .claim-status-reasons.info {
        background-color: #ffede4;
        border: 1px solid #ff6a40;
    }

    .popup-container .popup-wrapper .popup-content .claim-status-reasons .title {
        font-size: 1em;
        font-weight: 600;
        margin-bottom: 0.25em;
    }

    .popup-container
    .popup-wrapper
    .popup-content
    .claim-status-reasons.info
    .title {
        color: #ff6a40;
    }

    .popup-container .popup-wrapper .popup-content .claim-status-reasons ul {
        list-style: none;
        padding: 0;
        font-size: 0.75em;
    }*/
.toast {
    position: fixed;
    left: 0;
    width: 100%;
    bottom: -6rem;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 1em 2em;
    opacity: 0;
}

    .toast.active {
        bottom: 0;
        opacity: 1;
        z-index: 100;
    }

    .toast > div {
        margin: 0;
        min-width: 20em;
        padding: 0.9em 1.7em;
        max-width: 30em;
        border-radius: 0.5em;
        font-size: 0.9em;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgba(239, 199, 118, 0.7);
        color: rgba(137, 97, 16, 1);
        border: solid 1px rgba(137, 97, 16, 0.1);
    }

    .toast svg {
        width: 1.2em;
        height: 1.2em;
        margin-left: 0.7em;
        transform: translateY(-0.1em);
    }

        .toast svg path {
            fill: rgba(137, 97, 16, 0.8);
        }

    .toast.fail > div {
        background-color: rgba(227, 112, 131, 0.7);
        color: rgba(44, 15, 20, 1);
        border-color: rgba(44, 15, 20, 0.1);
    }

    .toast.fail svg path {
        fill: rgba(44, 15, 20, 0.8);
    }

    .toast.success > div {
        background-color: rgba(114, 200, 148, 0.7);
        color: rgba(12, 98, 46, 1);
        border-color: rgba(12, 98, 46, 0.1);
    }

    .toast.success svg path {
        fill: rgba(12, 98, 46, 0.8);
    }


@media screen and (max-width: 768px) {
    /*    .popup-container .popup-wrapper {
        max-width: 90%;
    }

        .popup-container .popup-wrapper .popup-header {
            padding: 1em 2em;
        }

        .popup-container .popup-wrapper .overview-section {
            padding: 0.75em;
        }*/
}

@media screen and (max-width: 768px) {
    html {
        font-size: 14px;
    }

    .form-row {
        flex-direction: column;
    }

        .form-row > div {
            width: 100%;
        }
}