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

@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: 700;
    src: url("../fonts/woff2/IRANSansWeb(FaNum)_Bold.woff2") format("woff2"),url("../fonts/woff/IRANSansWeb(FaNum)_Bold.woff") format("woff")
}

@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: 500;
    src: url("../fonts/eot/IRANSansWeb_Medium.eot?#iefix") format("embedded-opentype"),url("../fonts/woff2/IRANSansWeb(FaNum)_Medium.woff2") format("woff2"),url("../fonts/woff/IRANSansWeb(FaNum)_Medium.woff") format("woff")
}

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

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

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

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

.main-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: -8px;
}

.logo {
}

.panel {
    display: flex;
    flex-direction: column;
    width: 35%;
    max-width: 400px;
    justify-content: center;
    border: 1px solid #e0e0e2;
    border-radius: 10px;
    padding: 32px;
}

.header {
    display: flex;
    flex-direction: row;
    width: 100%;
}

.header-item {
    flex: 1;
    text-align: center;
}

.right-arrow-item {
    align-content: center;
    text-align-last: right;
}

    .right-arrow-item a {
        color: black;
    }

    .right-arrow-item img {
        padding-right: 10px;
    }

.body {
    display: flex;
    flex-direction: column;
}

.enter-register {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0c0c0c;
}

.hello {
    margin-top: 16px;
}

.please {
    margin-bottom: 35px;
}

.hello,
.please {
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 0;
    color: #3f4064;
}

.mobile {
    padding-top: 8px;
    padding-bottom: 8px;
    font-size: 1.5rem;
    font-weight: 400;
    border-radius: 8px;
    caret-color: #19bfd3 !important;
    color: #3f4064;
    background-color: transparent;
    width: 98%;
    border: 1px solid #e0e0e2;
}

.error-text {
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 0;
    color: #b2001a;
}

.enter-button {
    background-color: #ef4056;
    color: #fff;
    border: 1px solid #ef4056;
    padding: calc(3 * var(4px)) calc(4 * var(4px));
    margin-top: 32px;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 2.15;
    border-radius: 8px;
}

    .enter-button p {
        font-size: 0.93rem;
        font-weight: bold;
        color: white;
        font-family: IRANSans;
        margin: 0.3rem;
    }

.accept-rule {
    font-weight: 400;
    color: #3f4064;
}
.mobile.input-validation-error {
    border: 1px solid #b2001a !important;
}
.field-validation-error, #Code-error, #Mobile-error {
    color: #b2001a;
}

@media(max-width:1100px) {
    .accept-rule {
        font-size: 1.4vw;
    }
}

@media (max-width: 576px) {
    .panel {
        border: unset;
        width: unset;
        padding: 5px;
    }

    .main-container {
        padding-right: 15px;
        padding-left: 15px;
    }

    .accept-rule {
        font-size: 0.8rem;
    }
}

.center-text {
    text-align: center;
}

.hidden {
    display: none !important;
}

.resend-code, .accept-rule a {
    text-decoration: solid;
    color: blue;
}

@media (min-width: 577px) and (max-width: 768px) {
    .panel {
        width: unset;
    }

    .main-container {
        padding-right: 15px;
        padding-left: 15px;
    }

    .accept-rule {
        font-size: 0.7rem;
    }
}

.dots-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
}

.dots {
    display: flex;
    gap: 12px;
}

.dot {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #fff;
    animation: pulse 1s ease-in-out infinite;
}

    .dot:nth-child(1) {
        animation-delay: 0s;
        background-color: #282b2c;
    }

    .dot:nth-child(2) {
        animation-delay: 0.3s;
        background-color: #282b2c;
    }

    .dot:nth-child(3) {
        animation-delay: 0.6s;
        background-color: #282b2c;
    }

@keyframes pulse {
    0%, 100% {
        transform: scale(0.6);
        opacity: 0.7;
    }

    50% {
        transform: scale(1.2);
        opacity: 1;
    }
}