@media screen and (max-width: 768px) {
    .shahkar-wave-box-mobile {
        display: block;
    }

    body {
        background: white !important;
    }

    .shahkar-wave-box {
        display: none;
    }
}



.box-from-app {
    width: 100% !important;
    border: none;
    border-radius: 0;
    max-height: inherit ;
    height: 100%;
    justify-content: center;
}
@media screen and (min-width: 769px) {
    .box-from-app {
        width: 100% !important;
        overflow-y: auto;
        overflow-x: hidden;
        height: calc(100vh - 100px);
    }

}

    ::placeholder {
        color: #696969;
        opacity: 1
    }

    ::-ms-input-placeholder {
        color: #696969
    }


    .big-font {
        font-size: 1.5em
    }

    .medium-font {
        font-size: 1em
    }

    .small-font {
        font-size: .8em
    }

    input::-webkit-inner-spin-button, input::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0
    }

    input[type=number] {
        -moz-appearance: textfield
    }

    :root {
        --box-border-radius: 15px;
        --big-font-size: 1.5em;
        --small-font-size: 0.75em;
        --hint-font-size: 0.7em
    }

    body {
        font-size: 16px;
        direction: rtl;
    }

    * {
        border: none;
        outline: 0;
        margin: 0;
        padding: 0
    }

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

    .ltr {
        direction: ltr
    }

    label {
        display: flex;
        flex-direction: column;
        align-content: flex-start;
        justify-content: flex-start;
        margin: 10px 0;
        position: relative
    }

    .loading-spinner {
        width: 20px;
        animation: 1s linear infinite spin;
        fill: #7f8c8d;
        display: none;
        margin-left: 5px
    }

    @keyframes spin {
        0% {
            transform: rotate(0)
        }

        100% {
            transform: rotate(360deg)
        }
    }

    .submit-btn:disabled {
        background-color: var(--disable-btn-bg-color);
        color: var(--disable-btn-color);
        cursor: not-allowed
    }

    input {
        border: 1px solid rgba(200,200,200,.3);
        border-radius: 10px;
        transition: all .3s;
    }

        input:focus {
            border-color: var(--primary-shadow);
        }

            input:focus + .input-icon svg {
                fill: var(--primary-color);
            }

        input:disabled, input[type=submit]:disabled {
            background: var(--disable-input-bg-color);
            border: 1px solid var(--disable-input-border-color);
            color: var(--disable-input-text-color)
        }

    #phone_number:disabled + .input-icon svg {
        fill: var(--disable-input-text-color)
    }

    input[type=submit]:disabled {
        background: var(--disable-btn-bg-color);
        color: var(--disable-btn-color)
    }

    .login-1 .otp span, .login-2 .otp span, label span {
        color: var(--input-label-color)
    }

    input[type=password], input[type=text] {
        padding: 15px 10px 15px 50px
    }

    input[type=password], input[type=tel] {
        padding: 15px 10px 15px 50px
    }

    button[type=submit], input[type=submit] {
        width: 100%;
        display: flex;
        justify-content: center;
        background: var(--primary-color);
        font-size: .9em;
        color: #fff;
        border-radius: 10px;
        margin-top: 20px;
        border: 1px solid transparent;
        cursor: pointer;
        transition: .3s;
        padding: 15px 10px
    }

        input[type=submit]:hover {
            box-shadow: 0 5px 15px var(--primary-shadow)
        }

        input[type=submit]:disabled:hover {
            box-shadow: none
        }

    label .input-icon {
        position: absolute;
        bottom: 1px;
        left: 1px;
        width: 50px;
        height: 50px;
        border-radius: 10px 0 0 10px;
        display: flex;
        justify-content: center;
        align-content: center;
        flex-direction: column;
        align-items: center
    }

        label .input-icon img {
            width: 17px
        }

        label .input-icon svg {
            fill: #6a6a6a;
            width: 18px
        }

    label span {
        margin: 0 0 10px
    }

    .pointer, button {
        cursor: pointer
    }

    .anime {
        transition: .3s
    }

    .login-box {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
    }

    .login-box-left {
        max-width: 400px;
        max-height: 500px
    }

        .login-box-left img {
            width: 100%
        }

    .login-box-right {
        width: 350px;
        display: flex;
        align-items: center;
        flex-direction: column
    }

    .login-2 {
        width: 768px !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

        .login-2 .login-box-left img {
            display: block !important;
        }

    .login-1 .login-box-left img {
        display: none !important;
    }

    .login-box .bottom-links {
        display: flex;
        justify-content: center;
        width: 100%
    }

        .login-box .bottom-links a {
            margin-top: 10px;
            padding: 5px 0;
            border-bottom: 1px dashed #696969
        }

            .login-box .bottom-links a:hover {
                color: var(--login-link-hover-color)
            }

    .login-form-1, .login-form-2 {
        width: 100%;
    }

        .login-form-1 input::placeholder, .login-form-2 input::placeholder {
            text-align: right
        }

    .login-1 {
        width: 500px;
        padding: 20px;
        border: 1px solid #031b4e29;
        border-radius: 10px;
        background: white;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
    }

    .shahkar_auth_step {
        display: flex;
        align-items: center;
        flex-direction: column;
        width: 100%;
    }

    .shahkar_auth_step {
        display: none;
    }

    .shahkarBackBtn, .shahkarBackBtn svg {
        color: var(--input-label-color) !important;
        fill: var(--input-label-color) !important;
    }

    .shahkarBackBtn {
        background: none;
        border: none;
        display: flex;
        align-items: center;
        font-size: 13px;
        margin-top: 15px;
        cursor: pointer;
        opacity: .5;
        width: 100%;
        justify-content: end;
    }

        .shahkarBackBtn svg {
            width: 15px;
            margin-right: 7px;
        }

    .shahkar_auth_resend_code_box {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 20px 0
    }

    .shahkar_auth_resend_code_btn {
        border: 1px solid var(--primary-color);
        border-radius: 50px;
        padding: 5px 7px;
        cursor: pointer;
        color: var(--primary-color);
        font-size: 12px;
        background: transparent;
    }

        .shahkar_auth_resend_code_btn:hover {
            background: var(--primary-color);
            color: white;
        }

        .shahkar_auth_resend_code_btn:disabled {
            background: #696969 !important;
            color: #121212;
            opacity: .2;
            border: 1px solid transparent;
        }

    .shahkar_auth_resend_code_timer {
        color: var(--input-label-color);
        ;
        font-size: 13px
    }

    .shahkarAuthPopupLoginWays {
        display: flex;
        justify-content: space-between;
        margin: 10px 0;
        gap: 10px;
        padding: 10px 0;
    }

        .shahkarAuthPopupLoginWays a {
            text-align: center;
            flex: 1;
            font-size: 13px;
            text-decoration: none;
            padding: 15px 0;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid transparent;
            border-radius: 5px;
            color: var(--input-label-color);
            border: 1px solid var(--login-with-google-border-color);
        }

            .shahkarAuthPopupLoginWays a svg {
                width: 20px;
                margin-left: 7px;
                fill: var(--black-icon);
                opacity: .5;
            }

            .shahkarAuthPopupLoginWays a:hover {
                border: 1px solid rgba(200,200,200,.3);
            }


    .login-1 .website-logo img, .login-2 .website-logo img {
        max-width: 95px;
        margin-bottom: 15px
    }

    .login-1 .login-title, .login-2 .login-title {
        color: var(--primary-color);
        font-size: 1rem;
        font-weight: bold;
    }

    .login-1 .login-hint, .login-2 .login-hint {
        color: var(--hint-color);
        font-size: .8em;
        margin-top: 5px
    }

    .login-1 .login-way, .login-2 .login-way {
        color: var(--login-way-text-color);
        font-size: var(--hint-font-size)
    }

    .centered-lines {
        width: 100%;
        text-align: center;
    }

    .line {
        display: inline-block;
        width: 50px;
        height: 1px;
        margin: 2px 0;
        background: #8080806e
    }

    .login-with-google {
        display: flex;
        justify-content: center;
        width: 100%;
        border: 1px solid var(--login-with-google-border-color);
        margin: 15px 0;
        color: var(--login-with-google-text-color);
        border-radius: 10px;
        padding: 15px 0
    }

    .login-with-google, input {
    }

    .shahkar_other_login_way {
        width: 100%;
        display: flex;
        justify-content: space-between;
        gap: 10px;
    }

        .shahkar_other_login_way > .way {
            width: 100%;
            flex: 1;
        }

        .shahkar_other_login_way svg {
            fill: var(--black-icon);
        }

    .shahkar_auth_loader {
        -webkit-animation: spin .5s linear infinite;
        animation: spin .5s linear infinite;
        border: 5px solid var(--primary-color-bg-wave);
        border-top-color: var(--primary-color);
        border-top: 5px solid var(--primary-color);
        border-radius: 50%;
        height: 50px;
        width: 50px;
        margin-bottom: 10px;
    }

    .shahkar_auth_loader_cover {
        position: absolute;
        border-radius: var(--box-border-radius);
        top: 0;
        right: 0;
        left: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        bottom: 0;
        background: var(--box-color);
        z-index: 99999;
    }


    .login-with-google:hover {
        border-color: var(--login-with-google-hover-border-color)
    }

    .login-with-google img, .login-with-google svg {
        margin-left: 8px;
        width: 20px;
        height: 20px;
    }

    .login-2 {
        width: 750px;
        padding: 20px;
        border: 1px solid var(--box-border-color);
        border-radius: var(--box-border-radius);
        background: var(--box-color);
        display: flex;
        align-items: center;
        position: relative;
    }

    .login-2-left, .login-2-right {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%
    }

        .login-2-left img {
            width: 350px;
            margin-right: 20px
        }

    .login-1 .otp, .login-2 .otp {
        display: flex;
        flex-direction: column
    }

    .resend-btn {
        display: none;
        border: 1px solid var(--primary-color);
        color: var(--primary-color);
        border-radius: 30px;
        font-size: .7em;
        background: 0 0;
        padding: 5px 10px
    }

        .resend-btn:hover {
            background: var(--primary-color);
            color: #fff
        }

    .login-1 .otp .resend-otp, .login-2 .otp .resend-otp {
        display: flex;
        align-items: center;
        justify-content: space-between
    }

    .login-1 .otp span, .login-2 .otp span {
        margin: 0
    }

    .login-1 .otp .otp-inputs, .login-2 .otp .otp-inputs {
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between
    }

        .login-1 .otp .otp-inputs input, .login-2 .otp .otp-inputs input {
            font-size: 1em;
            width: 50px;
            height: 50px;
            text-align: center;
        }

            .login-1 .otp .otp-inputs input::placeholder, .login-2 .otp .otp-inputs input::placeholder {
                text-align: center
            }

    @media screen and (max-width: 768px) {
        .login-box {
            align-items: normal;
            min-height: auto
        }

        .login-1, .login-2, .login-box-right {
            width: 100% !important;
            border: none;
            border-radius: 0;
            max-height: 100vh;
            height: calc(100vh - 40px);
            justify-content: center;
        }

            .login-2 .login-2-left, .login-box-left {
                display: none
            }

            .login-1 .login-hint, .login-2 .login-hint {
                text-align: center
            }

        .centered-lines .line {
            width: 30px
        }
    }