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

/* Form container - flexbox and border-radius supported in IE 9+, box-shadow in IE 10+ */
#custom-login .form-container {
    display: flex;
    justify-content: center;
    align-items: stretch;
    flex-direction: column;
    background-color: var(--color-white);
    padding: var(--size-6);
    border-radius: var(--size-4);
    /* box-shadow - supported in IE 9+ */
    box-shadow: var(--box-shadow);
    width: 100%;
}

/* Form container on tablet and up - supported in IE 9+ */
@media screen and (min-width: 768px) {
    #custom-login .form-container {
        max-width: 60%;
    }
}

/* Login form paragraphs - flexbox gap supported in modern browsers */
#custom-login .form-container #loginform > p {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    gap: var(--size-2);
}

/* Fallback for browsers without flex gap support */
@supports not (gap: var(--size-2)) {
    #custom-login .form-container #loginform > p > * + * {
        margin-top: var(--size-2);
    }
}

/* Login submit button - fit-content supported in modern browsers (Chrome 46+, Firefox 94+, Safari 15+) */
#custom-login .form-container .login-submit {
    width: fit-content;
    /* Fallback for older browsers */
    width: -moz-fit-content;
}

/* Submit button styling - padding supported in all browsers */
#custom-login .form-container .login-submit .button {
    padding: var(--size-3) var(--size-6);
}

#custom-login .form-container .form-item label:not(.input-radio) {
    padding: 0 0 0 var(--size-4);
    margin: 0;
}

/* Form item link styling - color supported in all browsers */
#custom-login .form-container .form-item p a {
    color: var(--color-prescriptions);
    /* text-decoration on hover - supported in all browsers */
    text-decoration: none;
    transition: text-decoration 0.2s ease;
}

/* Hover effect for form links - :hover supported in IE 6+ */
#custom-login .form-container .form-item p a:hover {
    text-decoration: underline;
}