:root {
    --square-input-width: 1.15rem;
}
form.form {display: grid; grid-template-columns: repeat(10,1fr); gap: 0 2rem; max-width: 40rem; margin-inline: auto;  scroll-margin-top: 4rem;}
form.form > div {display: flex; flex-direction: column; position: relative; padding: 0!important; width: 100%!important;}
form.form > div label {line-height: 1.7; min-width: 0; position: relative;}
form.form > div:not(.radio, .checkbox) + div.title h3 {margin-top: 2rem;}
form.form > div.title h3 {margin: 1.5rem 0 0; font-size: 1.25rem; font-weight: 700; line-height: 1.1;}
form.form > div.label p { margin: 1rem 0 0;}
form.form > div.radio {display: flex; flex-direction: column; gap: 0; padding-bottom: 0.4rem;}
form.form > div.radio label {display: flex; align-items: center;}
form.form > div.radio p {margin: 0 0 0.2rem; color: inherit;}
form.form > div.checkbox {display: flex; flex-direction: row; gap: 2.3rem; padding-bottom: 0.4rem;}
form.form > div.radio input, form.form > div.checkbox input {margin-right: 0.6rem; height: var(--square-input-width); width: var(--square-input-width); margin-bottom: 0.15rem}
form.form > div.checkbox label { user-select: none; cursor: pointer; display: flex; align-items: center;}
form.form > div input:not([type="radio"],[type="checkbox"]), textarea {min-width: 100%; max-width: 100%; width: 100%;}
form.form > div.submit {flex-direction: row; justify-content: flex-start; padding-top: 1rem!important;}
form.form > div.submit input {width: auto; min-width: 0; padding-left: 2rem; padding-right: 2rem;}
form.form > div:not(.title) + div.checkbox {margin-top: 0;}
form.form > div.checkbox + div.checkbox {margin-top: -1rem;}


form.form > div { display: flex; margin-bottom: 1rem; position: relative; }
form.form > div input:not([type="submit"],[type="checkbox"],[type="radio"]), 
form.form > div textarea, div.disabledinput { height: 2.4rem; line-height: 2.4rem; border: 1px solid var(--overlay-light); flex-grow: 1; padding: 0 0.5rem; }
form.form > div textarea { height: 25rem; line-height: 1.4; padding: 0.5rem; }
form.form > div input[disabled], div.disabledinput { color: var(--overlay-light); background: var(--overlay-subtle); }
form.form > div.footnote {font-style: italic; margin-top: -0.75rem; opacity: 0.5;}

form.form > div.form-group { display: grid; grid-template-columns: 10rem auto; }
form.form > div.form-group .help-block { display: none; }
div.form-group.has-error .help-block { display: block; margin-top: 1rem; grid-column-start: 1; grid-column-end: 3; color: var(--error-color); }

.form-group.checkbox > div { flex-grow: 1; }
.form-group.checkbox > div > div { position: relative; display: flex; }
.form-group.checkbox > div > div > label { display: flex; margin-left: 0.3rem; }
.form-group.checkbox > div > div > a { line-height: 2.4rem; cursor: pointer; }

form div[style*="flex-direction: column"] input { flex-grow: unset; }
form .error input, form .error :not(label) { color: var(--error-color); }
form .error input { border: 1px solid var(--error-color)!important; }

/* On screens that are 600px or less, set the background color to olive */
@media screen and (max-width: 600px) {
    form > div {grid-column-end: span 10!important;}
}