@font-face {
    font-family: KalamehWebFaNum;
    font-style: normal;
    font-weight: 100;
    src: url("/fonts/KalamehWebFaNum-Thin.woff2") format("woff2"),
    /* FF39+,Chrome36+, Opera24+*/ url("/fonts/KalamehWebFaNum-Thin.woff") format("woff");
    /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
}

@font-face {
    font-family: KalamehWebFaNum;
    font-style: normal;
    font-weight: 900;
    src: url("/fonts/KalamehWebFaNum-Black.woff2") format("woff2"),
    /* FF39+,Chrome36+, Opera24+*/ url("/fonts/KalamehWebFaNum-Black.woff") format("woff");
    /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
}

@font-face {
    font-family: KalamehWebFaNum;
    font-style: normal;
    font-weight: bold;
    src: url("/fonts/KalamehWebFaNum-Bold.woff2") format("woff2"),
    /* FF39+,Chrome36+, Opera24+*/ url("/fonts/KalamehWebFaNum-Bold.woff") format("woff");
    /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
}

@font-face {
    font-family: KalamehWebFaNum;
    font-style: normal;
    font-weight: normal;
    src: url("/fonts/KalamehWebFaNum-Regular.woff2") format("woff2"),
    /* FF39+,Chrome36+, Opera24+*/ url("/fonts/KalamehWebFaNum-Regular.woff") format("woff");
    /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
}

@font-face {
    font-family: irsans;
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/fonts/irsans-b.eot");
    src: url("/fonts/irsans-b.eot?#iefix") format("embedded-opentype"), url("/fonts/irsans-b.woff") format("woff"), url("/fonts/irsans-b.ttf") format("truetype");
}

@font-face {
    font-family: irsans;
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/fonts/irsans-m.eot");
    src: url("/fonts/irsans-m.eot?#iefix") format("embedded-opentype"), url("/fonts/irsans-m.woff") format("woff"), url("/fonts/irsans-m.ttf") format("truetype");
}

@font-face {
    font-family: irsans;
    font-style: normal;
    font-display: swap;
    font-weight: 300;
    src: url("/fonts/irsans-l.eot");
    src: url("/fonts/irsans-l.eot?#iefix") format("embedded-opentype"), url("/fonts/irsans-l.woff") format("woff"), url("/fonts/irsans-l.ttf") format("truetype");
}

@font-face {
    font-family: irsans;
    font-style: normal;
    font-display: swap;
    font-weight: 200;
    src: url("/fonts/irsans-u.eot");
    src: url("/fonts/irsans-u.eot?#iefix") format("embedded-opentype"), url("/fonts/irsans-u.woff") format("woff"), url("/fonts/irsans-u.ttf") format("truetype");
}

@font-face {
    font-family: irsans;
    font-style: normal;
    font-display: swap;
    font-weight: 400;
    src: url("/fonts/irsans.eot");
    src: url("/fonts/irsans.eot?#iefix") format("embedded-opentype"), url("/fonts/irsans.woff") format("woff"), url("/fonts/irsans.ttf") format("truetype");
}
body {
    overflow-x: hidden;
    max-width: 100vw;
}
body {
    box-sizing: content-box;
    width: 100%;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: 'KalamehWebFaNum', KalamehWebFaNum;
    font-size: 13pt;
    direction: rtl;
    text-align: right;
}

#loginDiv {
    position: relative;
}

@media screen and (min-width: 992px) {
    .final-logo-top {
        display: none !important;
    }

    #loginDiv::before, #RegisterDiv::before {
        content: '';
        position: absolute;
        width: 468px;
        height: 100vh;
        left: 0px;
        right: auto;
        top: 0px;
        background-image: linear-gradient(#0C847C,#FBC118);
        z-index: 0;
    }

    #loginDiv > .row, #RegisterDiv > .row {
        height: 100vh;
    }

    .base-image {
        /*background-color: #191d60;*/
        background-image: url(/Images/bg.png);
        background-repeat: no-repeat;
        background-size: contain;
        border-radius: 50px;
        width: 525px;
        height: 600px;
        z-index: 1;
        position: relative;
        top: auto;
        bottom: auto;
        display: block;
        margin-top: auto;
    }

    #loginDiv .base-image .person {
        margin-top: -25px;
        margin-right: -23px;
    }

    #RegisterDiv .base-image .person {
        top: auto;
        bottom: -64px;
        position: absolute;
        left: -24px;
        right: auto;
    }

    .final-logo-bg {
        position: absolute;
        z-index: 2;
        /*width: 110px;*/
        top: -59px;
        left: 74px;
    }

        .final-logo-bg > img {
            width: 110px;
        }

    .text-img {
        position: absolute;
        color: #fff;
        left: 80px;
        z-index: 1;
        top: 25%;
        right: auto;
    }

    #RegisterDiv .text-img {
        position: absolute;
        color: #fff;
        left: 40%;
        z-index: 1;
        top: 25%;
        right: auto;
    }

    .regTitle {
        background-image: linear-gradient(to right, #0C847C,#FBC118);
        border-radius: 25px;
        padding: 10px;
        text-align: center;
        margin-bottom: 10px;
    }

    .text-img .p2 {
        width: 105px;
    }

    .p1, .p2 {
        font-size: 20pt;
        border-bottom: 1px dashed #fff;
        padding-bottom: 10px;
    }

    #loginDiv::after, #RegisterDiv::after {
        content: '';
        position: absolute;
        top: auto;
        bottom: 10px;
        right: 0px;
        width: calc(100% - 525px);
        height: 50px;
        background-image: url('/images/bottom-img-group.png');
        background-repeat: repeat-x;
        background-size: contain;
        z-index: -1;
    }

    #LoginForm p {
        margin-top: 10px;
    }
}

@media screen and (max-width: 991px) {
    body:has(#loginDiv), html:has(#loginDiv) {
        max-width: 100vw !important;
        max-height: 100vh !important;
        overflow: hidden;
    }

    #loginDiv::before {
        content: '';
        position: absolute;
        width: 100vw;
        height: 160px;
        left: 0px;
        right: auto;
        bottom: 0px;
        background-image: linear-gradient( to left, #0C847C, #FBC118);
        z-index: 0;
    }
    #RegisterDiv{
        position: relative;
    }
        #RegisterDiv::before {
            content: '';
            position: absolute;
            width: 100vw;
            height: 63px;
            left: 0px;
            right: auto;
            bottom: -39px;
            background-image: linear-gradient(to left, #0C847C, #FBC118);
            z-index: -1;
        }
    .login-txt{
        color: #fff;
    }

    #loginDiv::after {
        content: '';
        position: absolute;
        top: 10px;
        bottom: 10px;
        right: 0px;
        width: 100vw;
        height: 50px;
        background-image: url(/images/bottom-img-group.png);
        background-repeat: repeat-x;
        background-size: cover;
    }

    #loginDiv > .row {
        height: 100vh;
    }

    .base-image {
        /*background-color: #191d60;*/
        background-image: url(/images/bg.png);
        background-repeat: no-repeat;
        background-size: cover;
        border-radius: 50px 50px 0px 0px;
        width: calc(100% - 50px);
        height: 100%;
        z-index: 1;
        position: relative;
        top: auto;
        bottom: -70px;
        display: block;
        margin-top: auto;
    }

    #RegisterDiv .base-image {
        /*background-color: #191d60;*/
        background-image: url(/images/bg.png);
        background-repeat: no-repeat;
        background-size: cover;
        border-radius: 50px 50px 0px 0px;
        width: calc(100% - 50px);
        height: 285px;
        z-index: -1;
        position: absolute !important;
        top: auto;
        bottom: -38px;
        display: block;
        margin-top: auto;
        left: 0;
        right: 0;
    }
    #RegisterDiv .form-check-label{
        color: #fff;
    }

    .base-image .person {
        margin-top: -43px;
        margin-right: auto;
        margin-left: -10px !important;
        width: 210px;
    }

    .btn-form {
        display: block;
        margin: 15px auto 0px;
    }

    .final-logo-bg {
        display: none !important;
        ;
    }

        .final-logo-bg > img {
            width: 110px;
        }

    .text-img {
        position: absolute;
        color: #fff;
        left: auto;
        z-index: 1;
        top: -36px;
        right: auto;
        transform: scale(0.5);
    }

        .text-img .p2 {
            width: 105px;
        }

    .p1, .p2 {
        font-size: 20pt;
        border-bottom: 1px dashed #fff;
        padding-bottom: 5px;
        margin-bottom: 0px;
    }

    #LoginForm > div:first-child {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-top: 65px;
    }

    #LoginForm div form > p, #LoginForm div form > span {
        text-align: center;
    }

    .dots {
        width: 110px;
    }

    .dots2 {
        width: 23px;
    }

    #LoginForm form {
        transform: scale(0.8);
    }

    .final-logo-top {
        margin: 5px 0px;
    }

    #LoginForm, #RegisterForm {
        position: relative;
        max-width: 100vw;
        overflow-x: hidden;
    }

        #LoginForm::before, #RegisterForm::before {
            content: '';
            position: absolute;
            width: 100vw;
            height: 10px;
            background-image: linear-gradient( to left, #0C847C, #FBC118);
            top: 0px;
            z-index: 1;
        }

        #RegisterForm::after {
            content: '';
            position: absolute;
            width: 100vw;
            height: 138px;
            background-image: url(/images/bg-circle.png);
            top: 0px;
            z-index: 0;
            background-position: center bottom;
            background-repeat: no-repeat;
        }

    .text-top {
        z-index: 2;
        top: 20px;
        color: #fff;
    }

    .regTitle {
        background-image: linear-gradient(to right, #0C847C,#FBC118);
        border-radius: 15px;
        padding: 10px 20px;
        text-align: center;
        margin-bottom: 10px;
        margin-left: 10px;
    }

    .img-tp {
        position: absolute;
        bottom: -86px;
        z-index: 3;
        top: auto;
        left: 25%;
        /* right: auto; */
    }

    #RegisterForm form {
        margin-top: 155px;
        max-width: 300px;
    }
}


@media screen and (min-width:1222px) {
    .line1 {
        position: absolute;
        z-index: 2;
        top: -40px;
        right: 60px;
    }

    .line2 {
        position: absolute;
        z-index: 2;
        top: -40px;
        left: -40px;
    }
}

@media screen and (max-width:1221px) {
    .line1 {
        display: none;
    }

    .line2 {
        display: none;
    }
}

@media screen and (min-width:600px) and (max-width: 991px) {
    .text-img {
        position: absolute;
        color: #fff;
        left: auto;
        z-index: 1;
        top: -14px;
        right: 18px;
        transform: scale(0.5);
    }
}

a {
    text-decoration: none;
}

li {
    list-style: none;
}

.fs-9pt {
    font-size: 9pt;
}


#LoginForm input.form-control, #RegisterForm input.form-control, #RegisterForm .form-select {
    border: 2px solid #D5DBE0;
    position: relative;
    border-radius: 25px;
    margin-top: 15px;
    width: 270px;
    min-height: 40px;
}

/*#LoginForm p {
    margin-top: 15px;
}*/

        #LoginForm label:not(.form-check-label), #RegisterForm label:not(.form-check-label) {
    position: absolute;
    padding: 0px 10px;
    background-color: #fff;
    width: fit-content;
    z-index: 1;
    font-size: 10pt;
    top: -10px;
    right: 20px;
}

    #LoginForm label:not(.form-check-label)::after, #LoginForm label:not(.form-check-label)::before,
    #RegisterForm label:not(.form-check-label)::after, #RegisterForm label:not(.form-check-label)::before {
        content: '';
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background-color: #D5DBE0;
        position: absolute;
        z-index: 2;
    }

    #LoginForm label:not(.form-check-label)::after, #RegisterForm label:not(.form-check-label)::after {
        left: 0px;
        top: 8px;
    }

    #LoginForm label:not(.form-check-label)::before, #RegisterForm label:not(.form-check-label)::before {
        right: 0px;
        top: 8px;
    }

#LoginForm span, #RegisterForm span {
    display: block;
    margin-top: 15px;
    font-size: 11pt;
}

.btn-form {
    background-color: #0C847C;
    width: 250px;
    border-radius: 25px;
    color: #fff;
    height: 45px;
    margin-top: 15px;
}

.codeInput-container {
    max-width: 240px;
    position: relative;
}

    .codeInput-container > input {
        display: none;
    }

    .codeInput-container:before {
        content: "";
        display: block;
        bottom: 0;
        left: 0;
        position: absolute;
        right: 0;
        border-bottom: 1px solid;
        border-color: #E6E8F0;
        transition: opacity 0.3s ease;
    }

    .codeInput-container > span {
        font-size: 18px;
        position: absolute;
        left: 0;
        z-index: 1;
        top: 0;
        right: 0;
        line-height: 40px;
        display: block;
        color: #ADAFB6;
        transition: all 0.3s ease;
    }

    .codeInput-container .inputs {
        display: flex;
        flex-flow: row nowrap;
        direction: ltr;
        margin-top: 15px;
    }

        .codeInput-container .inputs input {
            -webkit-appearance: none;
            opacity: 0;
            display: flex;
            flex-flow: column nowrap;
            align-items: center;
            flex: 1;
            padding: 0;
            min-width: 0;
            margin-right: 8px;
            border: 0;
            border-bottom: 1px solid;
            border-color: #b1b1b1;
            background: none;
            line-height: 40px;
            color: #727682;
            text-align: center;
            font-size: 18px;
            outline: none;
            border-radius: 0;
            transition: all 0.3s ease;
        }

            .codeInput-container .inputs input:focus {
                border-color: #5D9BFB;
            }

            .codeInput-container .inputs input:last-child {
                margin-right: 0;
            }

    .codeInput-container.active:before {
        opacity: 0;
    }

    .codeInput-container.active > span {
        transform: translate(0, -100%);
        border-color: transparent;
        line-height: 20px;
        font-size: 14px;
        opacity: 0.6;
    }

    .codeInput-container.active .inputs input {
        opacity: 1;
    }

#timer {
    font-size: 10pt;
    color: #333;
    text-align: center;
    margin-top: 5%;
}

#timerDiv {
    max-width: 270px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: auto;
}

.fs-9pt {
    font-size: 9pt;
}
@media (max-height: 770px){
    #RegisterDiv .base-image .person {
        top: auto;
        bottom: -20px;
        position: absolute;
        left: auto;
        right: -16px;
        width: 120px;
        height: 120px;
    }
}