:root {
    --cf-recovery-icon-width: 24px;
    --cf-recovery-icon-height: 24px;
    --cf-form-grid-margin: 24px;
}

.cf-recovery-form {
    flex-direction: column;
}

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

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

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

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

    .cf-recovery-form .cf-recovery-text p {
        color: var(--cf-color-black);
        margin-bottom: var(--cf-form-grid-margin);
    }

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

    .cf-recovery-form .cf-recovery-form-input {
        grid-row-start: 2;
        grid-column: span 4;
        margin-bottom: var(--cf-form-grid-margin);
        width: 100%;
    }

    .cf-recovery-form .cf-recovery-form-submit {
        grid-row-start: 3;
        grid-column: span 4;
        margin-bottom: var(--cf-form-grid-margin);
        width: 100%;
    }

.cf-recovery-complete-text {
    grid-row-start: 1;
    grid-column: span 12;
    margin-bottom: var(--cf-form-grid-margin);
}

.cf-recovery-complete-button {
    display: grid;
    grid-row-start: 2;
    grid-column: span 5;
    margin-bottom: var(--cf-form-grid-margin);
}

    .cf-recovery-complete-button a {
        text-align: center;
        display: block;
        width: 100%;
        padding: 12px;
        background-color: var(--cf-color-button-blue);
        color: white;
        border: none;
        font-size: 16px;
        cursor: pointer;
        text-decoration: none;
    }

        .cf-recovery-complete-button a:hover {
            background-color: var(--cf-color-dark-blue);
        }


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

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

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

    .cf-recovery-form .cf-recovery-form-input {
        grid-column: span 6;
    }

    .cf-recovery-form .cf-recovery-form-submit {
        grid-column: span 6;
    }
}

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

    .cf-recovery-form .cf-recovery-form-input,
    .cf-recovery-form .cf-recovery-form-submit,
    .cf-recovery-complete-button {
        grid-column: span 12;
    }
}