form {
    margin-top: 8px;
    padding: 16px 35px 26px 35px;
    border-width: 3px;
    border-style: inset;
    border-color: #eee;
    background: #ddd;
}

.form-label {
    display: block;
    padding-bottom: 8px;
}

.form-label-text {
    display: block;
    font-variant: small-caps;
}

.form-label-description {
    color: #222;
    margin-top: 0.2em;
    padding-left: 0.2em;
    padding-right: 0.2em;
    margin-bottom: 1em;
}

.text-input {
    width: 100%;
    padding-top: 7px;
    padding-bottom: 4px;
    padding-left: 8px;
    font-size: large;
    margin: 0 0;
    box-sizing: border-box;
}

.text-input:focus {
    border: blue inset 0.16rem;
}

.button {
    width: 100%;
    padding: 8px 4px;
    font-size: larger;
    margin-top: 16px;
    margin-bottom: 16px;
    transition: color 0.3s 0.4s, background-color 0.7s;
}

.button:focus {
    border: blue inset 0.16rem;
}

.button:disabled {
    background-color: rgb(34, 34, 34);
    color: rgb(197, 197, 197);
    border-color: black;
}

.checkbox {
    display: block;
    /* needs huge margins because we have to use outline
       on focus instead of border */
    margin-top: 16px;
    margin-left: 32px;
    margin-bottom: 16px;
    padding: 0;
    transform: scale(3, 3);
}

.checkbox:focus {
    outline: blue solid 0.16rem;
}

.single-select {
    font-size: larger;
    height: 3em;
    width: 100%;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

.single-select:focus {
    border: blue inset 0.16rem;
}

.datetime-picker {
    font-size: larger;
    width: 100%;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

.datetime-picker:focus {
    border: blue inset 0.16rem;
}

.date-picker {
    font-size: larger;
    width: 100%;
    padding-bottom: 0.5em;
    padding-top: 0.5em;
}

.date-picker:focus {
    border: blue inset 0.16rem;
}

.textarea {
    width: 100%;
    box-sizing: border-box;
}

.textarea:focus {
    border: blue inset 0.16rem;
}