#portal{
    display: flex;
    justify-content: center;
    align-items: center;
}

#portal .login-col{
    padding: max(2.5rem, calc(5 * var(--su)));
    background-color: #fff;
    width: max(39.25rem, calc(39.25 * var(--su)));
    max-width: 100%;
    border-radius: max(1.25rem, calc(1.25 * var(--su)));
}

#portal .login-col .logo-wrapper{
    display: flex;
    justify-content: center;
    margin-bottom: max(.5rem, calc(.5 * var(--su)));
}
#portal .login-col img.logo{
    width: max(18.125rem, calc(18.125 * var(--su)));
    max-width: 100%;
    aspect-ratio: unset;
}

#portal .login-col .back-wrapper{
    padding-block: max(.75rem, calc(.75 * var(--su)));
    margin-bottom: max(1rem, var(--su));
}

#portal .login-col .forgot-password-wrapper{
    margin-top: max(.5rem, calc(.5 * var(--su)));
}
#portal .login-col .forgot-password{
    color: var(--dia-pink);
    font-size: max(1rem, var(--su));
}

#portal .input-group:has(.toggle-pass){
    position: relative;
}
#portal .input-group:has(.toggle-pass) input{
    padding-right: calc(max(1.5rem, calc(1.5 * var(--su))) + max(1.375rem, calc(1.375 * var(--su))));
}
#portal .toggle-pass{
    position: absolute;
    cursor: pointer;
    border: none;
    outline: none;
    padding: 0;
    background: transparent;
    top: 50%;
    right: max(1.5rem, calc(1.5 * var(--su)));
    translate: 0 -50%;
}
#portal .toggle-pass svg{
    width: max(1.375rem, calc(1.375 * var(--su)));
    height: auto;
}