.login-page-continer {
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    height: 100vh;
    width: 100%;
}

.login-section {
    width: 100%;
}

#MyModal2 .login-page-continer {
    background-image: none;
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    height: auto;
    width: auto;
}

#MyModal2 .login-box {
    margin: auto;
}

.login-box {
    width: 400px;
    padding: 10px 32px;
    border: none;
    border-radius: 8px;
    background-color: #FFFFFF;
    display: flex;
    flex-direction: column;
    text-align: center;
}

    .login-box .text-primary {
        color: var(--secondary) !important;
    }

.login-box-title {
    color: var(--secondary);
    font-size: 22px;
    font-weight: 500;
    margin-top: 24px;
    margin-bottom: 28px;
    font-family: 'doran-bold' !important;
}

.login-description {
    color: #6C7278;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 8px;
}

.back-to-site {
    text-align: center;
    margin-top: 24px;
}

    .back-to-site:before {
        content: "";
        display: inline-block;
        width: 14px;
        height: 14px;
        vertical-align: middle;
        background-repeat: no-repeat;
        background-size: contain;
        margin-left: 8px;
        background-image: url("data:image/svg+xml;utf8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M14.4291 18.8201C14.2391 18.8201 14.0491 18.7501 13.8991 18.6001C13.6091 18.3101 13.6091 17.8301 13.8991 17.5401L19.4391 12.0001L13.8991 6.46012C13.6091 6.17012 13.6091 5.69012 13.8991 5.40012C14.1891 5.11012 14.6691 5.11012 14.9591 5.40012L21.0291 11.4701C21.3191 11.7601 21.3191 12.2401 21.0291 12.5301L14.9591 18.6001C14.8091 18.7501 14.6191 18.8201 14.4291 18.8201Z' fill='%23292D32'/><path d='M20.33 12.75H3.5C3.09 12.75 2.75 12.41 2.75 12C2.75 11.59 3.09 11.25 3.5 11.25H20.33C20.74 11.25 21.08 11.59 21.08 12C21.08 12.41 20.74 12.75 20.33 12.75Z' fill='%23292D32'/></svg>");
    }

.login-input-box {
    margin-bottom: 24px;
}

.login-by-pass .login-input-box {
    margin-bottom: 16px;
}

.login-by-pass .login-box-title {
    margin-bottom: 16px;
}

.login-text-input-field {
    color: var(--secondary);
    border-radius: 8px;
    outline: none;
    border: 1px solid #ADADAD;
    padding: 12px;
    text-align: center;
}

    .login-text-input-field::placeholder {
        color: #ADADAD;
    }


.login-number-field {
    position: relative;
    width: 50px;
    height: 50px;
    border-radius: 8px;
    border: 1px solid #CBCBCB;
}

    .login-number-field input {
        border: none;
        background: transparent;
        width: 100%;
        height: 100%;
        text-align: center;
        color: var(--secondary);
    }

        .login-number-field input:focus {
            border: none;
            outline: none;
            background: transparent;
            width: 100%;
            height: 100%;
            text-align: center;
        }

    .login-number-field::after {
        content: "";
        position: absolute;
        z-index: 10;
        bottom: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 28px;
        height: 1px;
        background-color: #868686;
    }

.login-number-filed-container {
    width: 100%;
    display: flex;
    gap: 4px;
    justify-content: space-between;
}

.send-message-text {
    color: #6C7278;
    font-size: 14px;
    font-weight: 500;
    text-align: right!important;
}

.send-message-text-2 {
}

#resend-code-button {
    color: #CBCBCB;
    font-size: 14px;
    font-weight: 500;
    border: none;
    outline: none
}

.outline-none {
    outline: none;
}

.max-w-100 {
    max-width: 100%;
}

.max-h-100 {
    max-height: 100%;
}

.login-img {
    display: block;
    width: 145px;
    margin: auto;
}

.login-img-container {
    position: absolute;
    display: block;
    width: 145px;
    top: 25%;
}

.back-btn {
    margin-top: 23px !important;
    color: var(--secondary) !important;
    font-size: 18px !important;
    font-weight: 600;
}

.mobile-back-button-box {
    width: 80%;
    color: #717171 !important;
    justify-content: space-between;
    top: 45px;
    left: 50%;
    font-size: 20px;
    transform: translateX(-50%);
}

.mobile-backbtn {
    color: #717171 !important;
}

.privacy-policy-notice {
    margin-top: 32px;
    font-size: 12px;
    color: #6C7278;
}

    .privacy-policy-notice span {
        color: var(--tertiary);
    }

.orange-btn {
    background-color: var(--secondary);
    border-radius: 8px;
    font-size: 18px;
    font-weight: 500;
    padding: 10px;
}

    .orange-btn:after {
        content: "";
        display: inline-block;
        width: 14px;
        height: 14px;
        vertical-align: middle;
        background-repeat: no-repeat;
        background-size: contain;
        background-image: url("data:image/svg+xml;utf8,<svg aria-hidden='true' viewBox='0 0 256 512' xmlns='http://www.w3.org/2000/svg'><path fill='white' d='M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z'/></svg>");
    }

    .orange-btn:hover {
        background-color: #022c29;
    }
/*---------------media query--------------------------*/
@media (max-width: 568px) {
    .login-page-continer {
    }

    .login-box-title {
        font-size: 18px;
    }
}

@media (max-width: 600px) {
    .login-box {
        width: auto;
        padding: 4px 8px;
    }
}