.Form {

    // Field container
    .Field {
        margin-top: $spacer-multiple;

        &-label {
        }

        &-message {
            margin-top: $spacer;
        }

        // Input, password, textarea
        .TextInput,
        .PasswordInput,
        .EmailInput,
        .DateInput,
        .vDateField,
        .NumberInput,
        .Textarea {
            border-width: 3px;
            padding: $spacer;
            font-weight: bold;
            color: $primary;

            &:focus {
                border-color: $primary;
            }
        }

        .Textarea {
            height: 100px;
        }

    }

    // Select boxes
    .TypedChoiceField,
    .ModelChoiceField {
        $block: &;
        display: block;
        position: relative;
        width: 100%;
        @media screen and (-webkit-min-device-pixel-ratio:0) {
          &::after {
            display: inline-block;
            position: absolute;
            right: 15px;
            top: 40px;
            width: .65em;
            height: .65em;
            border-style: solid;
            border-width: .15em .15em 0 0;
            content: "";
            transform: rotate(135deg);
            color: $primary;
          }
          .Select {
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            -ms-appearance: none;
          }
        }
        .Select {
          width: 100%;
          min-height: 41px;
          padding: $spacer - 1;
          background-color: transparent;
          border: 3px solid $border;
          color: $primary;
          appearance: inherit;
          -webkit-appearance: inherit;
          -moz-appearance: inherit;
          -ms-appearance: inherit;
          &:focus {
              border-color: $primary;
          }
        }
    }

    // Check boxes
    .BooleanField {
        width: 100%;
        position: relative;

        .Field-label {
            margin-top: 10px;
            line-height: 22px;
        }

        .Field-item {
            float: left;
            margin-top: 0;
            margin-right: 10px;

            .CheckboxInput {
                -webkit-appearance: none;
                -moz-appearance: none;
                appearance: none;
                width: $spacer-multiple;
                height: $spacer-multiple;
                border: 3px solid $border;
                padding: $spacer-mid;

                &:checked {
                    border-color: $primary;
                    background-color: $primary;
                }
            }
        }

        .Field-message {
            margin-top: 0;
        }
    }

    // Errors
    .Field-message--error.Field--required {
        .Field-item input {
            border-color: $warning;
        }
    }

    // Button container
    &-buttons {
        margin-bottom: $spacer-multiple;
    }

}

// Buttons

.Button {
    margin-top: $spacer-multiple;
    padding: $spacer-mid;
    font-weight: bold;
    text-align: center;

    &--warning {
        background: $warning;
    }
}

// Messages (Form feedback)

.Messages {
    .Message {
        font-family: $font-bold;
    }
}

// Errors
.errorlist {
    margin-top: $spacer-multiple;
}
