/* ============================================================================= forms.css — modern form styling, applied via . The successor to the legacy-forms style set. Where legacy-forms styled an old `form > fieldset > section > div` float layout (and framed the whole

), this set styles plain Bootstrap markup (.form-group / .control-label / .form-control) and intentionally does NOT put a border around the itself. Everything is scoped under `.forms` so it only affects opted-in pages. ============================================================================= */ /* IMPORTANT — scope, and the legacy-forms lesson: legacy-forms styled bare `form`/`input` (border, width:500px), which bled into global widgets like the header search and forced the `.legacy-forms .expandSearch …` counter-overrides in custom.css. This set deliberately styles ONLY the content-form classes below (.form-group / .control-label / .form-control / fieldset / legend). It never touches bare `form` or `input`, so the header search keeps its own base styling on `forms` pages and needs no equivalent override. Do not add bare `.forms form { … }` rules here. */ /* Grouped sections (card-like) ------------------------------------------------ */ .forms fieldset { border: 1px solid #e2e2e2; border-radius: 6px; padding: 16px 18px; margin: 0 0 18px; background: #fff; } .forms legend { width: auto; border: 0; margin: 0 0 10px; padding: 0 6px; font-size: 1rem; font-weight: 600; color: #333; } /* Labels ---------------------------------------------------------------------- */ .forms .control-label, .forms label.control-label { display: inline-block; margin-bottom: 4px; font-weight: 600; color: #333; } /* Row layout — label left, control right -------------------------------------- Bootstrap stacks .control-label above .form-control. These pages want the label in a fixed left column with the control beside it. flex-basis is used for the control because it wins over the `width:100%` set below (and over Select2's inline width:100%), so no !important is needed. */ .forms .form-group { margin-bottom: 14px; display: flex; flex-wrap: wrap; align-items: center; } .forms .form-group > label.control-label { flex: 0 0 180px; padding-right: 12px; margin-bottom: 0; } .forms .form-group > .form-control, .forms .form-group > .select2 { flex: 0 1 420px; } /* Validation messages drop to their own line, aligned under the control. */ .forms .form-group > .invalid-feedback { flex-basis: 100%; margin-left: 180px; } /* Checkbox rows — box left, caption right -------------------------------------- These rows have no separate left label (the caption is the label), so the whole row is indented to line up with the control column. */ .forms .form-group > label.checkbox-row { display: flex; align-items: center; flex: 1 1 100%; margin: 0 0 0 180px; font-weight: 400; } .forms label.checkbox-row > input[type="checkbox"] { flex: 0 0 auto; margin: 0 8px 0 0; } .forms .form-control { width: 100%; height: auto; padding: 6px 10px; font-size: 14px; line-height: 1.4; color: #333; background: #fff; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } .forms .form-control:focus { border-color: #66afe9; outline: 0; box-shadow: 0 0 0 2px rgba(102, 175, 233, .25); } .forms textarea.form-control { min-height: 80px; } /* Help text ------------------------------------------------------------------- */ .forms .form-text, .forms small.text-muted { display: block; margin-top: 3px; font-size: 12px; color: #888; } /* Validation ------------------------------------------------------------------ */ .forms .has-error .form-control { border-color: #d9534f; } .forms .has-error .control-label, .forms .has-error label { color: #d9534f; } .forms span[style*="red"] { display: inline-block; margin-top: 3px; font-size: 12px; } /* Buttons --------------------------------------------------------------------- */ .forms .form-group .btn { margin-right: 6px; } /* Select2 sizing to match .form-control -------------------------------------- */ .forms .select2-container { width: 100% !important; } .forms .select2-container--default .select2-selection--single { height: 34px; border-color: #ccc; } .forms .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 32px; } .forms .select2-container--default .select2-selection--single .select2-selection__arrow { height: 32px; } .forms .select2-container--default .select2-selection--multiple { min-height: 34px; border-color: #ccc; } /* Narrow screens — stack label over control, keep checkbox rows inline ------- */ @media only screen and (max-width: 900px) { .forms .form-group > label.control-label { flex-basis: 100%; padding-right: 0; margin-bottom: 4px; } .forms .form-group > .form-control, .forms .form-group > .select2 { flex-basis: 100%; } .forms .form-group > .invalid-feedback { margin-left: 0; } .forms .form-group > label.checkbox-row { margin-left: 0; } }