#loginDlg{
    .forLogin, .forSendOtp, .forOtp, .forMelliCode{
        display: none;
    }
    &.loginForm .forLogin {
        display: unset;
    }
    
    &.sendOtp .forSendOtp {
        display: unset;
    }
    
    &.otpForm .forOtp {
        display: unset;
    }
    &.melliCodeForm .forMelliCode {
        display: unset;
    }

}
#loginDlg[open]{
    margin-block: 100px;
        .closeBtn{display: none;}
}
#loginForm {
    display: grid;
    grid-template-columns: auto;
    grid-row-gap: 4px;
    align-content: center;
    justify-content: stretch;
    width: min(100%, 300px);
    font-size: 80%;
    >* {
        align-self: start;
    }
    label {
        font-size: 80%;
        color: gray;
        margin-bottom: -0.5rem;
        white-space: nowrap;
    }
    input {
        border: 1px solid gray;
        height: 1.8rem;
        text-align: center;
    }
    a {
        font-size: .8rem;
        color: var(--color1);
        justify-self: center;
    }
    button:disabled {
        background-color: #bbb;
        color: white;
        cursor: default;
    }
    
    #loginMessage {
        font-size: .8rem;
        color: red;
        text-align: center;
    }

    #registerLink,
    #loginLink {
        text-align: center;
        color: var(--color1);
    }

}
#acceptConditions{
    width: min(100%, 300px);
    line-height: 1.3rem;
    font-weight: 100;
    a{
        color:var(--color2);
    }
}


        .otp-container { display: flex; justify-content: center; gap: 10px; margin: 20px 0; direction: ltr; width: 100%;}
        .otp-input { width: 30px; font-size: 13px; text-align: center; padding-inline: 3px;}
        .otp-input:focus { border-color: var(--color1); outline: none; box-shadow: 0 0 5px var(--color1); }