html, body {
    height: 100%;
    margin: 0;
}

.main-panel {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.field-validation-error, .error-msg {
    color: red;
    font-size: 15px;
}

.view-content-panel {
    width: 450px;
    padding: 50px;
    height: auto;
}

.informco-logo {
    margin-bottom: 15px;
}

    .informco-logo > img {
        width: 100%;
    }

.brand-logo {
    margin-bottom: 15px;
}

    .brand-logo > img {
        width: 100%;
    }


.brand-header {
    margin-bottom: 15px;
}

.brand-footer {
    margin-top: 20px;
}

.action-panel {
    justify-content: center;
    display: flex;
    flex-direction: row;
    margin-top: 10px;
}
    /* when action panel is the last visible item, not sure how to get the hidden selector*/
    .action-panel:nth-last-child(2) {
        margin-bottom: 5px;
    }

    /* for */
    .action-panel > *:not(:last-child) {
        margin-right: 30px;
    }


.form-field {
    display: flex;
    flex-direction: column;
}

    .form-field:not(:last-child) {
        margin-bottom: 10px;
    }