body {
    background-color: white;
}

.body-content {
    background-color: #fff;
    border-radius: 0.25em;
    margin-top: 10px;
    /* Fixed-height panel: viewport minus the top bar (60px body padding)
       minus 20px breathing room (10px above + 10px below). Only the current
       stage's content (.form-scroll) scrolls — the step indicator, stage
       header/boilerplate, tab selectors, buttons and the footer stay fixed. */
    height: calc(100vh - 60px - 20px);
    height: calc(100dvh - 60px - 20px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Flex chain from the panel down to #content so the scrollable stage
   sections can size themselves to the remaining height. */
.body-content #fwrap,
.body-content main-form,
#mainForm,
#mainForm #content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* Everything in #content is pinned (steps, header, boilerplate, tab bar,
   buttons)... */
#mainForm #content > * {
    flex: 0 0 auto;
}

/* ...except the current stage's content, which takes the remaining height
   and scrolls. */
#mainForm #content > .form-scroll,
#mainForm #content .form-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* Keep the footer visible at the bottom of the panel */
.body-content > hr {
    margin: 0.5rem 0;
}

.body-content > footer {
    flex: 0 0 auto;
}

.navbar.purple {
    background-color: rgb(70, 22, 107);
    color: #fff;
}

.navbar #logo {
    height: 50px;
    display: inline-block;
    margin-right: 1rem;
    font-size: 1.25rem;
    line-height: inherit;
    white-space: nowrap;
}

.required:after {
    content: " *";
    color: red;
}

/*
 * Wizard step indicator — sticks to the top of the scrolling panel so
 * progress stays visible while the form content scrolls beneath it.
 */
.form-steps {
    position: sticky;
    top: 0;
    z-index: 100; /* above form controls, below modals (1050) */
    background-color: #fff;
    /* #content has 5px side padding — stretch the sticky background over it
       so scrolling content can't peek out at the edges */
    margin: 0 -5px 1.5rem;
    padding: 0.75rem 5px 0.5rem;
    border-bottom: 1px solid #e9ecef;
}

.form-steps-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.form-step {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    color: #6c757d;
}

/* connector line to the previous step */
.form-step::before {
    content: "";
    position: absolute;
    top: 1rem;
    left: -50%;
    width: 100%;
    height: 2px;
    background-color: #dee2e6;
    z-index: 0;
}

.form-step:first-child::before {
    display: none;
}

.form-step-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.form-step-btn:disabled {
    cursor: default;
}

.form-step-btn:not(:disabled):hover .form-step-marker,
.form-step-btn:not(:disabled):focus-visible .form-step-marker {
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}

.form-step-marker {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: #fff;
    border: 2px solid #dee2e6;
    font-weight: 600;
}

.form-step-marker .oi {
    font-size: 0.8rem;
    top: 0;
}

.form-step-label {
    margin-top: 0.3rem;
    font-size: 0.875rem;
}

.form-step-active {
    color: #212529;
    font-weight: 600;
}

.form-step-active .form-step-marker {
    background-color: #007bff;
    border-color: #007bff;
    color: #fff;
}

.form-step-done .form-step-marker {
    background-color: #28a745;
    border-color: #28a745;
    color: #fff;
}

/* the path already travelled turns green */
.form-step-done::before,
.form-step-active::before {
    background-color: #28a745;
}

@media (max-width: 575.98px) {
    .form-step-label {
        font-size: 0.75rem;
    }
}

select.is-invalid + span.select2 span.select2-selection {
    border-color: #dc3545;
    /*background-color: #fff7f8;*/
}

select.is-invalid + span.select2.select2-container--open span.select2-selection,
select.is-invalid + span.select2.select2-container--focus span.select2-selection {
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dc3545;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dc3545;
    border-color: #dc3545;
    /*background-color: #fff7f8;*/
}

.select2-container--bootstrap4 .select2-selection--multiple li.select2-selection__choice {
    color: #fff;
    background-color: #007bff;
    padding: 0.25em 0.6em;
    border-radius: 10rem;
    display: inline-block;
    /*font-size: 75%;*/
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border: none;
}

.select2-container--bootstrap4 .select2-selection--multiple li.select2-selection__choice span.select2-selection__choice__remove {
    color: #ffff;
}

.select2-container--bootstrap4 .select2-selection--multiple li.select2-selection__choice span.select2-selection__choice__remove:hover {
    color: #ffffff;
}

.select2-container--bootstrap4 .select2-selection--single {
    line-height: normal;
    padding: .4rem 1.125rem .75rem .375rem;
}

.select2-container--bootstrap4 .select2-selection--single span.select2-selection__rendered {
    padding-left: 8px
}

/* Shared 10px gap between adjacent buttons in a toolbar (navButs, the
   Add/Remove Child pair, ...). Using gap rather than margins keeps it
   correct regardless of flex-direction. */
.button-group {
    display: flex;
    gap: 10px;
}

.navButs {
    /* flex here (not Bootstrap's d-flex) so knockout's visible binding
       can still hide the row — d-flex uses display:flex !important */
    flex-direction: row-reverse;
    padding-top: 0.5rem;
    padding-left: 5px;
    padding-right: 5px;
    border-top: 1px solid #e9ecef;
}

/* Desktop/tablet pupil-tab row: stop the button group stretching to match
   the tab nav's height when the tabs wrap onto multiple lines. */
.pupil-tab-row {
    align-items: flex-start;
}

.pupil-tab-buttons {
    padding-bottom: 3px;
}

/* Mobile collapsed layout: gap between the dropdown and the buttons below it
   (only present once the dropdown itself is shown, i.e. more than 1 pupil). */
.pupil-tab-buttons-mobile-gap {
    margin-top: 10px;
}

/* Additional questions (child-additional.html) are laid out two per Bootstrap
   row (.col-md-6 + .col-md-6), which already stretches both columns to equal
   height. Bottom-anchoring each question's answer control means a wrapped
   label pushes into that existing stretch space instead of shifting the
   control down, so the two controls stay aligned across the row. */
.additional-question-group {
    display: flex;
    flex-direction: column;
}

.additional-question-group > :last-child {
    margin-top: auto;
}

/* Field labels bold in both edit and review mode: the <label> markup is
   shared between the two (only the control underneath it is swapped). */
#mainForm label {
    font-weight: 700;
}

#mainForm #content {
    padding: 5px;
}

input.form-control::placeholder {
    color: #868e96;
}