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

.cf-login-form .pd-link {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 27px;
    text-align: left;
    color: var(--cf-color-button-blue);
    margin-bottom: 24px;
}

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

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

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

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

.cf-login-form .cf-login-text p.cf-p3 {
    color: var(--cf-color-black);
}

    .cf-login-form.cf-login-text p.cf-p3 a {
        color: var(--cf-color-button-blue);
        font-weight: 700;
    }

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

.cf-login-form .cf-error {
    grid-row-start: 2;
    grid-column: span 12;
    margin-bottom: var(--cf-form-grid-margin);
}

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

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

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

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

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

@media only screen and (max-width: 1024px) {
    .cf-login-form .cf-username, .cf-login-form .cf-password, .cf-login-form .cf-login-submit {
        grid-column: span 6;
    }
}

@media only screen and (max-width: 768px) {
    .cf-login-form .cf-username, .cf-login-form .cf-password, .cf-login-form .cf-login-submit {
        grid-column: span 12;
    }
}

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