.error-message {
        color: rgb(148, 2, 2);
    }

    label {
        display: inline;
    }

    label.checkbox-label {
        display: inline;
    }

    .changed-status {
        margin-left: 20px;
    }

    fieldset {
        border-style: none;
        display: block;
        width: 100%;
    }



    .form-field {
        float: left;
        width: 400px;
        clear: right;
    }

    .grid.-form {
        width: 100%;
    }

    .grid.-form input[type="text"],
.pure-form textarea {
    width: 100%;
    font-size: 100%;
    line-height: 1.4;
    padding: 0.2em;
    box-sizing: border-box;
}

.grid.-form textarea {
    height: 16em;
    font-size: 100%;
    width: 100%;
    line-height: 1.4;
    padding: 0.2em;
    box-sizing: border-box;
}

.grid.-form,
.grid.-form .row {
    margin-bottom: 12px;
}

.grid.-form .-required div:nth-child(1) label:nth-child(1) {
    font-weight: bold;
}

button.button,
input.button {
    font-size: 100%;
}

.grid.contact .row {
    margin-top: 8px;
}

.grid.contact .row .col:nth-child(1) p {
    font-weight: bold;
}
.checkbox {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
}
.checkbox > .input-col {
    flex: 0 0 auto;
    margin-right: 0.5em;
    margin-top: 0.5rem;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
}

.checkbox > label {
    flex: 1 1 0;
}
/*.checkbox {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}
.checkbox input {
    flex: 0 0 auto;
    margin-right: 0.5em;
}
.checkbox label {
    flex: 1 1 0;
}*/

.blockable {
    position: relative;
}

/*
 * An element that blocks the entire area it is embedded in,
 * as long as visibility is not hidden.
 *
 * To block the content of the "blockable" parent, the "blockable-block"
 * must be made visible.
 */
.blockable > .blockable-block {
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 0;
    visibility: hidden;
    background-color: rgba(220, 220, 220, 0.5);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.contact-us.hidden {
    display: none;
}

.contact-us input, .contact-us textarea {
    font-size: 100%;
}

.contact-us input[type="text"], .contact-us textarea {
    width: 100%;
}

.contact-us .message-field {
    height: 10rem;
}

.contact-us .row2 {
    margin-top: 1rem;
}


/* new stuff */

.contact-us .field-required {
    display: inline;
    color: red;
}

.contact-us .field-required.completed {
    color: green;
}
.contact-us .field-required.maybe {
    color: silver;
}
.contact-us .field-required.optional {
    display: none;
}

.contact-us .field-label {
    display: block;
}

.contact-us .field .errors {
    color: red;
    display: none;
    flex-direction: row;
}

.contact-us .field .errors.show {
    display: flex;
}


.contact-us .field .errors .errors-icon {
    flex: 0 0 1rem;
}


.contact-us .field .errors .errors-messages {
    flex: 1 1 0;
}

.contact-us .alert {
    padding: 0.5em;
    margin-bottom: 1em;
    border: 1px silver solid;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    background-color: #FFF;
}

.contact-us .alert p {
    text-indent: 0;
}

.contact-us .alert.error {
    color: red;
    border-color:red;
}

.contact-us .alert.success {
    color: green;
    border-color:green;
}

.contact-us .alert.pending {
    color: blue;
    border-color:blue;
}

.contact-us .alert.warning {
    color: orange;
    border-color:orange;
}

.contact-us .alert .title {
    font-weight: bold;
    font-size: 120%;
    display: flex;
    flex-direction: row;
}

.contact-us .alert .title .icon {
    flex: 0 0 auto;
    margin-right: 1rem;
}

.contact-us .alert .title .text {
    flex: 1 1 0;
}

.contact-us .alert .message p {
    text-indent: 0;
}