main{
    max-width: 450px !important;
    margin-bottom: 80px !important;
}
.signTitle{
    text-align: center;
    margin-top: 40px;
}
.signForm{
    margin-top: 25px;
    position: relative;
}
.signForm .customInput{
    direction: ltr !important;
    background-position: left 7px center;
    background-repeat: no-repeat;
    background-size: 17px;
    padding: 0 5px 0 35px;
    height: 40px;
}
.signForm .customInput:placeholder-shown{
    direction: rtl !important;
    background-position: right 7px center;
    padding: 0 35px 0 5px;
}
.usernameInput{
    background-image: url("/src/email.svg");
}
.passwordInput{
    background-image: url("/src/lock.svg");
    padding-right: 40px;
    box-sizing: border-box;
}
.passwordLabel{
    margin-top: 15px;
}
label{
    margin-bottom: 5px;
}
.submitForm{
    height: 40px;
    border-radius: 7px ;
    margin-top: 25px;
    background-color: var(--txtSecendaryClr);
    color: var(--bgClr);
}
.togglePass{
    position: absolute;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 17px;
    background-image: url("/src/visi.svg");
    background-color: transparent;
    bottom: 69px;
    transition: opacity .6s,background-image .6s;
    right: 5px;
}
.togglePass.show{
    background-image: url("/src/invisi.svg");
}
.invisi{
    background-image: url("/src/invisi.svg");
}
.passwordInput:placeholder-shown + .togglePass{
    opacity: 0;
    pointer-events: none;
}
.forgetPassword{
    text-align: right;
}
.hintText{
    color: var(--redClr);
    padding-right: 30px;
    background-size: 17px;
    background-image: url("/src/redInfo.svg");
    background-repeat: no-repeat;
    background-position: right 5px center;
}