:root {
    --cf-forgot-password-grid-margin: 24px;
    --cf-forgot-password-icon-width: 24px;
    --cf-forgot-password-icon-height: 24px;
}

.cf-forgot-password-form {
    flex-direction: column;
}

    .cf-forgot-password-form .cf-back-to-home {
        display: flex;
        margin-bottom: var(--cf-forgot-password-grid-margin);
    }

    .cf-forgot-password-form ul {
        padding: unset;
        list-style-type: none;
        color: var(--cf-color-alert);
    }

    .cf-forgot-password-form h3 {
        color: var(--cf-color-dark-blue);
        margin-bottom: var(--cf-forgot-password-grid-margin);
        display: flex;
    }

        .cf-forgot-password-form h3 i {
            width: var(--cf-forgot-password-icon-width);
            height: var(--cf-forgot-password-icon-width);
            margin-right: 4px;
        }

    .cf-forgot-password-form p.cf-p3 {
        color: var(--cf-color-black);
        margin-bottom: var(--cf-forgot-password-grid-margin);
    }

    .cf-forgot-password-form .cf-forgot-password-text {
        grid-row-start: 1;
        grid-column: span 12;
    }

    .cf-forgot-password-form .cf-forgot-password-input {
        grid-row-start: 2;
        grid-column: span 4;
        margin-bottom: var(--cf-forgot-password-grid-margin);
    }

    .cf-forgot-password-form .cf-forgot-password-submit {
        grid-row-start: 3;
        grid-column: span 4;
        margin-bottom: var(--cf-forgot-password-grid-margin);
    }

.cf-forgot-password-submit .cf-material-button:hover {
    background-color: var(--cf-color-dark-blue);
}

.cf-forgot-password-form .cf-forgot-password-links {
    grid-row-start: 4;
    grid-column: span 12;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

    .cf-forgot-password-form .cf-forgot-password-links a:last-child {
        margin-top: var(--cf-form-grid-margin);
    }

.cf-forgot-password-form .help-message {
    width: 40%;
}

@media only screen and (max-width: 1024px) {
    .cf-forgot-password-form .help-message {
        width: 70%;
    }

    .cf-forgot-password-form .cf-forgot-password-text {
        grid-column: span 12;
    }

    .cf-forgot-password-form .cf-forgot-password-input,
    .cf-forgot-password-form .cf-forgot-password-submit {
        grid-column: span 6;
    }
}

@media only screen and (max-width: 768px) {
    .cf-forgot-password-form .help-message {
        width: 100%;
    }

    .cf-forgot-password-form .cf-forgot-password-input,
    .cf-forgot-password-form .cf-forgot-password-submit {
        grid-column: span 12;
    }
}

@media only screen and (max-width: 396px) {
    .cf-forgot-password-form .profile-icon {
        padding-top: 16px;
    }
}