input, select, textarea {
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #aaa;
    box-sizing: border-box;
}

textarea {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

button {
    padding: 10px;
    box-sizing: border-box;
    border: none;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    background-color: #987f67;
}

input[type="file"]:not(.visible) {
    position: fixed;
    top: -1000px;
}

input[type="color"] {
    height: 37px;
    padding: 3px;
}

input[type="radio"], input[type="checkbox"] {
    width: auto;
}

input.error {
    background-color: #f7bebe;
}

.checkbox {
    position: relative;
    background-color: #fff;
    border: 1px solid var(--light-green);
    width: 15px;
    height: 15px;
}

    .checkbox.checked:after {
        content: "";
        position: absolute;
        display: inline-block;
        background-color: var(--light-green);
        letter-spacing: 2px;
        top: 2px;
        left: 2px;
        width: 11px;
        height: 11px;
    }

.file-browser {
    position: fixed;
    top: -1000px;
    right: -1000px;
}

.form-panel {
    border-left: 1px solid #aaa;
    padding-left: 10px;
    box-sizing: border-box;
}

.inline-fields {
    display: flex;
}

.field {
    margin-bottom: 10px;
}

.field-title {
    margin-bottom: 5px;
    font-size: 13px;
}

.field-input {
    font-size: 12px;
}

.field-input.flex-row {
    display: flex;
}

.field-picture {
    width: 200px;
    min-width: 200px;
    height: 200px;
    border: 1px solid #aaa;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    box-sizing: border-box;
}

h2.field-section {
    font-size: 13px;
    text-transform: uppercase;
    margin-bottom: 5px;
    margin-top: 20px;
}

    h2.field-section:first-child {
        margin-top: 0;
    }