/********************************************************************************************************/
/* CONTROLS - SHARED BY EVERY TENANT, ORGANISATION AND SCHOOL SITE                                      */
/*                                                                                                      */
/* Was ten near-identical copies. Once the drift was cleaned up they differed by colour alone, and every */
/* one of those colours is now read from the site's own Config.css:                                      */
/*                                                                                                      */
/*     --primary-dark-color     buttons and their borders. Required.                                     */
/*     --link-dark-color        search button, menu bar links. Required; #24569C on every site today.    */
/*     --input-group-color      the band behind .dsInputFrame .dsInputGroup. Required - it is a distinct */
/*                              role, NOT a tint of the primary: the seven sites use seven values.       */
/*     --header-button-color    the header Login / Sign-Up text. Optional; falls back to the link        */
/*                              colour, which is what every site but CIAC renders.                       */
/*                                                                                                      */
/* Loaded as /_Styles/Controls.css by Site.Master, OrganizationSite.Master and SchoolSite.Master.        */
/* Config.css is still per-tenant and must be loaded alongside it, or every var() here resolves to       */
/* nothing. School pages then layer School/Controls.css on top for their focus outlines.                 */
/********************************************************************************************************/



.dsLargeTitle {
    font-size: 22px;
    margin: 20px 0 20px 0;
    text-align: center;
    font-family: Avalon;
}

.dsInputWrapper {
    border-bottom: 1px solid #dddddd;
    display: block;
    overflow: auto;
    font-size: 22.5px;
    padding: 0px 3px;
    margin-top: 1px;
    margin-bottom: 2px;
    -webkit-transition: all 0.25s;
    transition: all 0.25s;
    clear: left;
}
 
.dsInputReadOnly {
    background-color: #eeeeee;
}

.dsInputWrapper.LeftHalf {
    float: left;
    width: calc(50% - 10px);
    clear: none;
}

.dsInputWrapper.RightHalf {
    border-left: 1px solid #333;
    padding-left: 6px;
    float: left;
    width: calc(50% - 16px);
    clear: none;
}

.dsInputWrapper.LeftShort {
    float: left;
    width: calc(40% - 10px);
    clear: none;
}

.dsInputWrapper.RightLong {
    border-left: 1px solid #333;
    padding-left: 6px;
    float: left;
    width: calc(60% - 16px);
    clear: none;
}

.dsInputWrapper.LeftPRCNT10 {
    float: left;
    width: calc(10% - 10px);
    clear: none;
}

.dsInputWrapper.LeftPRCNT20 {
    float: left;
    width: calc(20% - 10px);
    clear: none;
}

.dsInputWrapper.LeftPRCNT30 {
    float: left;
    width: calc(30% - 10px);
    clear: none;
}

.dsInputWrapper.LeftPRCNT50 {
    float: left;
    width: calc(50% - 10px);
    clear: none;
}

.dsInputWrapper.RightPRCNT10 {
    border-left: 1px solid #333;
    padding-left: 6px;
    float: left;
    width: calc(10% - 16px);
    clear: none;
}

.dsInputWrapper.RightPRCNT20 {
    border-left: 1px solid #333;
    padding-left: 6px;
    float: left;
    width: calc(20% - 16px);
    clear: none;
}

.dsInputWrapper.RightPRCNT30 {
    border-left: 1px solid #333;
    padding-left: 6px;
    float: left;
    width: calc(30% - 16px);
    clear: none;
}

.dsInputWrapper.RightPRCNT50 {
    border-left: 1px solid #333;
    padding-left: 6px;
    float: left;
    width: calc(50% - 16px);
    clear: none;
}

.dsInputWrapper.Clear {
    clear: right;
}

.dsInputWrapper.ClearLeft {
    clear: left;
}


input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 500px white inset;
}

    input:-webkit-autofill::first-line {
        font-size: 16px
    }



input[type=checkbox] {
    /* Double-sized Checkboxes */
    display: block;
    clear: both;
    -ms-transform: scale(.9); /* IE */
    -moz-transform: scale(.9); /* FF */
    -webkit-transform: scale(.9); /* Safari and Chrome */
    -o-transform: scale(.9); /* Opera */
    margin-left: 0px;
    margin-right: 4px;
    margin-top: 4px;
    padding: 2px;
    width: 16px;
    height: 16px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    vertical-align: text-bottom;
}

    input[type=checkbox]:checked {
        background: content-box;
        background-color: #666666;
    }

input[type=radio] {
    /* Double-sized Checkboxes */
    display: block;
    float: left;
    -ms-transform: scale(.9); /* IE */
    -moz-transform: scale(.9); /* FF */
    -webkit-transform: scale(.9); /* Safari and Chrome */
    -o-transform: scale(.9); /* Opera */
    margin-top: 2px;
    margin-left: 0px;
    margin-right: 4px;
    padding: 2px;
    width: 18px;
    height: 18px;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
}

    input[type=radio]:checked {
        background: content-box;
        background-color: #666666;
    }

input[type="date" i] {
    height: 24px;
}

input [disabled] {
    /*background-color: #E0E0E0;*/
}

select[disabled] {
    /*background-color: #E0E0E0;*/
}



.dsInputLabel {
    display: block;
    font-family: Avalon;
    font-size: 11px;
    font-weight: 400;
    color: #717171;
    padding: 1px;
    text-transform: uppercase;
    -webkit-transition: all 0.25s;
    transition: all 0.25s;
}

.dsInput {
    display: block;
    font-family: Avalon;
    font-size: 15px;
    font-weight: 500;
    color: black;
    background: none;
    border: none;
    padding: 3px 0 3px 0px;
    width: Calc(100% - 2px);
}

/* Side padding so typed text clears the focus ring. .dsInput has none, and the ring is drawn 2px INSIDE
   the box (outline-offset: -2px, below) - so the first character, an L's upright most visibly, sat on
   the red line. The ring cannot move outward instead: .dsInputWrapper clips at 3px.
   border-box keeps every field exactly the size it was - Calc(100% - 2px) wide as before, and 30px tall,
   which is the old 24px plus the 3px top and bottom padding that now sit inside it. The password field
   was already border-box with its own padding-right for the eye button, which still wins. */
.dsInputText {
    box-sizing: border-box;
    height: 30px;
    padding-left: 6px;
    padding-right: 6px;
}

/* A date field is a .dsInputText too, but "input[type=date] { height: 24px }" above outweighs the class
   and left it 6px shorter than the fields beside it - the 24px dates from before the box was border-box. */
.dsInputText[type="date" i] {
    height: 30px;
}

.dsInputDropdown {
    height: 30px;
}

/********************************************************************************************************/
/* dsSchoolPicker                                                                                       */
/*                                                                                                      */
/* A trigger button plus a panel, because a native <select> renders its popup in the operating system   */
/* and nothing - search box, back button, category rows - can be put inside it.                         */
/*                                                                                                      */
/* The panel reuses .dsToolbarMenuUL / .dsToolbarMenuLink from Site.css so it matches the toolbar        */
/* menus; only what is specific to this control lives here.                                             */
/********************************************************************************************************/

.dsSchoolPicker {
    position: relative; /* the panel is absolute against this */
}

.dsSchoolPickerTrigger {
    display: block;
    width: 100%;
    height: 30px;
    text-align: left;
    background: white;
    cursor: pointer;
    box-sizing: border-box;
    padding: 0 6px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.dsSchoolPickerEmpty {
    color: #86949d; /* matches --input-group-color: reads as a placeholder, not a value */
}

.dsSchoolPickerCaret {
    float: right;
    line-height: 28px;
}

/*  The field carrying the chosen SchoolID. It is a text input rather than input[type=hidden]
    because Parsley's default excluded list is a SELECTOR - it skips input[type=hidden] outright -
    so a real hidden field could never satisfy a required rule. Hidden here instead, and kept out
    of the tab order and the accessibility tree by attributes on the control.

    Not display:none: a field that is not laid out at all cannot be scrolled to or focused when
    validation fails, and the error would appear with nothing to point at.                       */
.dsSchoolPickerValue {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

/*  COSMETICS ONLY.

    Everything structural - display, position:fixed, z-index, width, top/left, max-height,
    overflow, background, border - is set inline by the control and computed by its script,
    because .dsInputWrapper has overflow:auto and would clip a panel positioned any other way.
    Do not move those declarations back here: a stale Controls.css (StyleVersion is a hand-bumped
    constant) would then render the panel open and unclipped down the whole page.                */
.dsSchoolPickerPanel {
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    padding: 6px;
}

.dsSchoolPickerSearch {
    display: block;
    width: 100%;
    height: 26px;
    margin-bottom: 6px;
    box-sizing: border-box;
}

    /* Clearing is what emptying the field does; the extra control just crowds a narrow panel. */
    .dsSchoolPickerSearch::-webkit-search-cancel-button {
        -webkit-appearance: none;
        appearance: none;
    }

/* Category pages: only the active one shows, same rule as .dsToolbarMenuSubPanel. */
.dsSchoolPickerPage {
    display: none;
}

    .dsSchoolPickerPage.active {
        display: block;
    }

.dsSchoolPickerCount {
    float: right;
    margin: 0 8px 0 0;
    color: #86949d;
    font-size: 11px;
}

.dsSchoolPickerHint {
    padding: 8px 4px;
    color: #86949d;
    font-size: 12px;
}

/*  Rows in the panel - categories and schools alike - get the full width. A search result used to
    carry its category on the right; it squeezed longer school names into a wrap and told the user
    nothing the name did not. Names are kept on one line and ellipsised if a school is unusually
    long, rather than reflowing the row.                                                          */
.dsSchoolPickerPanel .dsToolbarMenuLink {
    display: block;
    width: 100%;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dsInputCheckbox {
    height: 24px;
}

.dsinputshortdropdown {
    width: 153px;
    margin-left: 2px;
}

.dsinputlongdropdown {
    width: 408px;
    margin-left: 2px;
}

.dsInputMultiline {
    border: none;
    width: Calc(100% - 8px);
    height: 100px;
    vertical-align: top;
    padding-top: 8px;
    padding-bottom: 8px;
    margin-bottom: 8px;
    font-size: 15px;
    font-family: Avalon;
    resize: vertical;
}

.dsInputMultiSelect {
    border: 1px solid darkgrey;
    width: Calc(100% - 8px);
    height: 134px;
    vertical-align: top;
    padding-top: 8px;
    padding-bottom: 8px;
    font-size: 12pt;
    font-family: Avalon;
    resize: vertical;
    overflow-y: auto;
}

    /* The global input[type=checkbox] rule is display:block; clear:both, which drops each label
       onto its own line under its box. Same override .dsInputListbox already uses. */
    .dsInputMultiSelect input[type=checkbox] {
        display: inline-block;
        clear: none;
        vertical-align: middle;
        margin-top: 0;
        margin-right: 6px;
    }

    .dsInputMultiSelect label {
        display: inline-block;
        vertical-align: middle;
        font-size: 11pt;
        cursor: pointer;
    }

    /* CheckBoxList renders a table; keep rows compact and left aligned. */
    .dsInputMultiSelect td {
        padding: 2px 0;
        text-align: left;
    }

.dsInputRadioListbox {
    margin-bottom: 6px;
    font-size: 10pt;
}



.dsInputListboxWrapper {
    display: block;
    float: left;
    overflow-y: scroll;
    height: 200px;
    width: 55%;
}

.dsInputListbox {
    font-size: 15px;
    line-height: 22px;
}

    .dsInputListbox input[type=checkbox] {
        display: inline-block;
    }

.dsInputListSelectedLabel {
    display: block;
    float: right;
    width: 45%;
    color: black;
    background-color: lightgrey;
    text-align: center;
    font-size: 12px;
    height: 15px;
}

.dsInputListSelected {
    overflow-y: auto;
    font-size: 15px;
    display: block;
    float: right;
    height: 181px;
    width: Calc(45% - 4px);
    padding: 2px;
    list-style-type: none;
    background-color: #F8F8F8;
    line-height: 24px;
}


.dsInputImageFileWrapper {
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    clear: both;
    cursor: pointer;
    display: block;
    font-size: 11px;
    text-align: center;
    text-decoration: none;
    top: 0px;
    padding: 6px 12px;
    position: relative;
    width: 100px;
    margin-top: 5px;
}

    .dsInputImageFileWrapper [type=file] {
        cursor: pointer;
        display: block;
        filter: alpha(opacity=0);
        opacity: 0;
        height: 20px;
        position: absolute;
        right: 0;
        top: 0;
    }

.dsInputPreviewLargeImage {
    display: block;
    object-fit: contain;
    overflow: hidden;
    margin-top: 8px;
    margin-bottom: 8px;
    border: none;
    max-width: 300px;
    max-height: 300px;
}

.dsInputPreviewSmallImage {
    display: block;
    object-fit: contain;
    overflow: hidden;
    margin-top: 8px;
    margin-bottom: 8px;
    border: none;
    max-width: 100px;
    max-height: 100px;
}

.dsInputPreviewBanner {
    display: block;
    object-fit: contain;
    overflow: hidden;
    margin-top: 8px;
    margin-bottom: 8px;
    border: none;
    max-width: 300px;
    max-height: 200px;
}

.dsInputPreviewHeader {
    display: block;
    object-fit: contain;
    overflow: hidden;
    margin-top: 8px;
    margin-bottom: 8px;
    border: none;
    max-width: 150px;
    max-height: 50px;
}

.dsInputPanel {
    display: block;
    margin: 10px 0 10px 4px;
}

.dsButton {
    position: relative;
    vertical-align: top;
    color: white;
    min-width: 100px;
    height: 34px;
    padding: 0 10px 0 10px;
    font-size: 16px;
    font-family: Avalon;
    text-align: center;
    background-color: var(--primary-dark-color);
    border: 0;
    border: 1px solid var(--primary-dark-color);
    cursor: pointer;
    margin-left: 10px;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    border-radius: 6px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    .dsButton:active {
        border: 1px solid #333;
        outline: none;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

/* THE SAME CLASS ON AN ANCHOR.

   .dsButton was written for <input> and <button>, which have no colour of their own, so "color:
   white" above was enough. An <a> does: Site.css colours links from --link-dark-color, and a bare
   class selector cannot outrank it. The result was a dark blue button with blue text on it -
   legible only by accident, and invisible on the tenants whose link colour is close to their
   primary.

   These selectors match the pseudo-classes explicitly because a:link and a:visited are what carry
   the colour, and beating them needs the same specificity rather than more of it.

   Kept here rather than in a page, because this is the shared button and the next page to use it
   would inherit the same fault. */
a.dsButton,
a.dsButton:link,
a.dsButton:visited,
a.dsButton:hover,
a.dsButton:focus,
a.dsButton:active {
    color: white;
    text-decoration: none;
    display: inline-block;
    /* Matches the 34px height above, so the label sits on the middle of the button rather than
       against its top edge as an inline anchor otherwise would. */
    line-height: 34px;
}

    /* Anchors have no margin-left in the button panel the way inputs do - the first one would
       otherwise sit indented from everything above it. */
    a.dsButton:first-child {
        margin-left: 0;
    }


.dsHeaderButton {
    position: relative;
    vertical-align: top;
    float: right;
    height: 30px;
    padding: 0;
    font-size: 18px;
    color: var(--header-button-color, var(--link-dark-color)) !important;
    text-align: center;
    background: none;
    border: 0;
    cursor: pointer;
    margin: 4px 10px 0px 10px;
}

    .dsHeaderButton:active {
        top: 1px;
        outline: none;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

.dsinputsearchbutton {
    width: 75px;
    height: 26px;
    font-size: 11px;
    color: white;
    background: var(--link-dark-color);
    border: 0;
    cursor: pointer;
    margin-top: 2px;
}

.dsInputFrame .dsInputGroup {
    color: #111111;
    background-color: var(--input-group-color);
    font-size: 13px;
    font-weight: 500;
    padding: 6px;
    margin: 8px 0 14px 0;
    text-align: center;
    text-transform: uppercase;
    clear: both;
}

    .dsInputFrame .dsInputGroup ~ .dsInputGroup {
        margin: 20px 0 14px 0;
    }


/*  NO WIDTH LIMIT ON A GROUP'S FIELDS. This used to be max-width: 800px, which held every form's
    fields to a column narrower than the panel it sat in - and narrower than its own group headings,
    which ran the full width above them. Twenty-odd pages had each written their own
    ".dsInputGroupFrame { max-width: none / 100% }" to undo it, which is how often it was wrong.
    Jason's call, 2026-10-07: a form fills the page it is on. How wide the page is belongs to the
    page - .dsPagePanel, .dsFormPanel1000 and the like - not to the fields.

    The rule stays, empty, so the next person looking for where the 800px went finds this. */
.dsInputFrame .dsInputGroupFrame {
    max-width: none;
}

.dsButtonPanel {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    margin: 20px 0 8px 0px;
    box-sizing: border-box;
}

.dsValidation {
    display: block;
    float: left;
    color: red;
    font-size: 14px;
    margin-bottom: 18px;
    clear: both;
    width: 100%;
}

.dsmenubar {
    display: block;
    border: none;
    height: 47px;
    width: calc(100% - 20px);
    margin: 0px;
    padding: 0px;
    color: #666666;
    font-size: 16px;
    list-style: none;
}

    .dsmenubar li {
        float: left;
        display: block;
        text-align: center;
        position: relative;
        height: 19px;
        padding: 6px 0px 0px 0px;
        margin: 0px;
        min-width: 26px;
        border: none;
    }

        .dsmenubar li a {
            display: block;
            margin-top: 4px;
            color: var(--link-dark-color);
            font-weight: bold;
            text-decoration: none;
        }

        .dsmenubar li h2 {
            margin: 0px 0px 0px 0px;
        }

    .dsmenubar .header-right {
        float: right;
        margin-left: 0px;
        margin-right: 0px;
    }

    .dsmenubar .header-left {
        float: left;
        margin-left: 0px;
        margin-right: 0px;
    }

.dsInputTreeDropdownText {
    -webkit-appearance: none;
    display: inline-block;
    float: left;
    border: 1px solid darkgrey;
    height: 26px;
    width: 196px;
    padding-left: 4px;
}

.dsInputTreeDropdownButton {
    display: inline-block;
    float: left;
    position: relative;
    vertical-align: central;
    width: 26px;
    height: 20px;
    padding: 6px 0 0 0;
    font-size: 13px;
    color: #AAAAAA;
    text-align: center;
    background-color: white;
    border-width: 1px 1px 1px 0;
    border-color: darkgrey;
    border-style: solid;
    cursor: pointer;
}

    .dsInputTreeDropdownButton:link,
    .dsInputTreeDropdownButton:visited {
        color: #666666;
    }

.dsInputTreeDropdownDialog {
    display: none;
    overflow-y: auto;
    background-color: white;
    font-size: 13px;
    border: 1px solid #666666;
}

.dsInputTreeSelectorPanel {
    display: inline-block;
    float: left;
    width: Calc(50% - 2px);
    margin-top: 8px;
}

.dsInputTreeSelectorHeader {
    display: block;
    color: white;
    background-color: #666666; /* was #AAAAAA - white text needs 4.5:1, see .dsTable th */
    font-size: 9pt;
    font-weight: bold;
    width: Calc(100% - 3px);
    padding: 1px 0 0 4px;
    text-transform: uppercase;
}

.dsInputTreeSelector,
.dsInputTreeSelected {
    display: inline-block;
    overflow: auto;
    float: left;
    border: 1px solid #AAAAAA;
    height: 350px;
    padding: 8px 0px 8px 0px;
    width: 100%;
}


.dsInputTreeSelected {
    border-left-style: none;
}



@media (max-width: 600px) {
    .dsHeaderButton {
        margin: 4px 8px 0px 8px;
    }
}


/********************************************************************************************************/
/*  SLIDER CHECKBOX                                                                                     */
/********************************************************************************************************/

.dsInputSlider input[type=checkbox] {
    height: 0;
    width: 0;
    visibility: hidden;
}

.dsInputSlider label {
    --size: 50px;
    cursor: pointer;
    width: var(--size);
    height: calc(var(--size) / 2);
    background: grey;
    display: block;
    border-radius: 100px;
    position: relative;
}

    .dsInputSlider label:after {
        content: '';
        position: absolute;
        top: 6%;
        left: 2.5%;
        width: calc(50% - 5%);
        height: calc(100% - 11%);
        background: #fff;
        border-radius: 90px;
        transition: 0.3s;
    }

.dsInputSlider input:checked + label {
    background: #bada55;
}

    .dsInputSlider input:checked + label:after {
        left: calc(100% - 2.5%);
        transform: translateX(-100%);
    }

.dsInputSlider label:active:after {
    width: 55%;
}



/********************************************************************************************************/
/*  GENERIC INPUT SLIDER FORMAT                                                                         */
/********************************************************************************************************/
input[type='range'] {
    -webkit-appearance: none;
    width: 150px;
    border: none;
}

    input[type='range']::-webkit-slider-runnable-track {
        -webkit-appearance: none;
        appearance: none;
        border-radius: 5px;
        box-shadow: inset 1px 1px 1px rgba(000,000,000,0.10);
        background-color: #eee;
        height: 5px;
        vertical-align: middle;
        outline: none;
        border: none;
        cursor: pointer;
    }

    input[type='range']::-webkit-slider-thumb {
        -webkit-appearance: none;
        border-radius: 100%;
        background-color: #037cd5;
        box-shadow: inset 0 0 0 4px #CCC, inset 0 0 4px #CCC, inset 0 0 0 4px #CCC;
        height: 18px;
        width: 18px;
        vertical-align: middle;
        border: none;
        cursor: pointer;
        margin-top: -8px;
    }

        input[type='range']::-webkit-slider-thumb:hover {
            background: #fdd921;
        }

    input[type='range']:active::-webkit-slider-thumb {
        background: #fdd921;
    }

    input[type='range']::-moz-range-track {
        -moz-appearance: none;
        border-radius: 5px;
        box-shadow: inset 1px 1px 1px rgba(000,000,000,0.10);
        background-color: #CCC;
        height: 8px;
        vertical-align: middle;
        margin: 0;
        padding: 0;
        border: none;
        cursor: pointer;
    }

    input[type='range']::-moz-range-thumb {
        -moz-appearance: none;
        border-radius: 100%;
        background-color: #037cd5;
        box-shadow: inset 0 0 0 4px #CCC, inset 0 0 4px #CCC, inset 0 0 0 4px #CCC;
        height: 22px;
        width: 22px;
        vertical-align: middle;
        border: none;
        cursor: pointer;
        margin-top: -6px;
    }

        input[type='range']::-moz-range-thumb:hover {
            background: #fdd921;
        }

    input[type='range']:active::-moz-range-thumb {
        background: #fdd921;
    }

input[type=range]::-ms-track {
    width: 100%;
    height: 8px;
    cursor: pointer;
    animate: 0.2s;
    background: transparent;
    border-color: transparent;
    border-width: 39px 0;
    color: transparent;
}

input[type=range]::-ms-fill-lower {
    background: #CCC;
    border: 0px solid #000101;
    border-radius: 50px;
    box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}

input[type=range]::-ms-fill-upper {
    background: #CCC;
    border: 0px solid #000101;
    border-radius: 50px;
    box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}

input[type=range]::-ms-thumb {
    box-shadow: inset 0 0 0 4px #CCC, inset 0 0 4px #CCC, inset 0 0 0 4px #CCC;
    border: 0px solid #000000;
    height: 22px;
    width: 22px;
    border-radius: 100%;
    background: #037cd5;
    cursor: pointer;
    margin-top: -4px;
}



/********************************************************************************************************/
/*  GENERIC INPUT                                                                       */
/********************************************************************************************************/

input {
    -webkit-appearance: none;
    border-radius: 0;
    border: 1px solid darkgrey;
    border-image: none;
}


/********************************************************************************************************/
/* FOCUS INDICATORS - WCAG 2.4.7 (Focus Visible), Level AA                                              */
/*                                                                                                      */
/* Moved here from School/Controls.css, which carried them alone and said in its own header:            */
/*   "ROLL THIS INTO /_Styles/Controls.css WHEN ADA COMPLIANCE GOES OUT EVERYWHERE"                     */
/* That is what this is. School sites were the only ones meeting 2.4.7; now every site does.            */
/*                                                                                                      */
/* :focus-visible, not :focus. A mouse user clicking a button should not get a ring - that is what made  */
/* people remove focus styling in the first place, and removing it is what broke keyboard use. The       */
/* plain :focus rule after it is the fallback for browsers without :focus-visible, and is overridden by  */
/* the modern rule wherever both are understood.                                                        */
/*                                                                                                      */
/* Two rings, not one. Red alone is what school sites shipped, and red does not reach the 3:1 contrast   */
/* WCAG 1.4.11 asks for against every background it lands on - it is close to invisible on the dark      */
/* toolbar. The white outer ring sits between the red and whatever is behind it, so the indicator is     */
/* visible on a light page and a dark one alike without changing how it looks in the common case.        */
/********************************************************************************************************/

.dsInput:focus,
.dsInputRadioListbox input:focus,
.dsInputListbox input:focus,
.dsButton:focus,
.dsHeaderButton:focus {
    outline: 2px solid red;
    outline-offset: -2px;
}

.dsInput:focus-visible,
.dsInputRadioListbox input:focus-visible,
.dsInputListbox input:focus-visible,
.dsButton:focus-visible,
.dsHeaderButton:focus-visible {
    outline: 2px solid red;
    outline-offset: -2px;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.95);
}

/* A mouse click should not leave a ring behind. Only applied where :focus-visible is understood, so
   browsers without it keep the plain :focus rule above and nobody loses the indicator. */
.dsInput:focus:not(:focus-visible),
.dsButton:focus:not(:focus-visible),
.dsHeaderButton:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}


/********************************************************************************************************/
/* FILE PICKER - dsFilePicker                                                                           */
/********************************************************************************************************/

/*  The control states its own status in words rather than showing the browser's file box - see the
 *  note in Controls/dsFilePicker.cs for why. Three states, on data-state:
 *
 *      empty     No file uploaded          [ Upload ]
 *      stored    File on record            [ View ]  [ Replace ]
 *      picked    Selected: flyer.pdf ...   [ Change ]
 *
 *  .dsInputWrapper, which this sits in, is a 22.5px line box - the size the text controls are
 *  measured against. The row sets its own size, or the status would be twice the height of
 *  everything else on the form.
 *
 *  SEVERAL RULES ARE MORE SPECIFIC THAN THEY LOOK LIKE THEY NEED TO BE. Pages have styled this
 *  control from outside - CoachCertify floats the input and the link and sets a 20px icon size - and
 *  .dsInput, which the file input carries, sets display and width. Each rule below has to beat
 *  those, so each names the picker AND the part. */
.dsFilePicker .dsFilePickerRow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    padding: 3px 6px 5px 6px;
    font-family: Avalon;
    font-size: 14px;
    line-height: 1.3;
}

.dsFilePicker .dsFilePickerStatus {
    color: #595959;
}

.dsFilePicker[data-state="stored"] .dsFilePickerStatus {
    color: #1d6b32;
}

    /* The tick is decoration - the words already say it - so it is generated content and a screen
       reader is not made to read "check mark". */
    .dsFilePicker[data-state="stored"] .dsFilePickerStatus::before {
        content: "\2713\00a0";
    }

.dsFilePicker[data-state="picked"] .dsFilePickerStatus {
    color: #000000;
    overflow-wrap: anywhere;
}

/*  View and the upload button are the same shape, so they read as a pair of actions. */
.dsFilePicker a.dsFilePickerView,
.dsFilePicker .dsFilePickerButton {
    display: inline-block;
    float: none;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    margin: 0;
    padding: 3px 12px;
    font-family: Avalon;
    font-size: 13px;
    font-weight: normal;
    line-height: 1.4;
    text-decoration: none;
    text-transform: none;
    white-space: nowrap;
    cursor: pointer;
    color: #0571b8;
    background-color: #ffffff;
    border: 1px solid #0571b8;
    border-radius: 3px;
}

    /* Said again for :link and :visited - Site.css colours every anchor and :link outranks a class. */
    .dsFilePicker a.dsFilePickerView:link,
    .dsFilePicker a.dsFilePickerView:visited {
        color: #0571b8;
    }

    .dsFilePicker a.dsFilePickerView:hover,
    .dsFilePicker .dsFilePickerButton:hover {
        background-color: #eef4fa;
        text-decoration: none;
    }

/*  THE REAL INPUT, laid invisibly over the whole button. Not display:none - a hidden input cannot be
    reached by keyboard and some browsers will not open the dialog from one. This way a click
    anywhere on the button is a click on the input, and Tab still stops on it. */
.dsFilePicker .dsFilePickerButton input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    float: none;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
    font-size: 0;
}

/*  Focus is on an invisible input, so the ring goes on the button around it. */
.dsFilePicker .dsFilePickerButton:focus-within {
    outline: 2px solid #0571b8;
    outline-offset: 2px;
}

.dsFilePicker a.dsFilePickerView:focus-visible {
    outline: 2px solid #0571b8;
    outline-offset: 2px;
}

/*  A file has been picked and will go up with the form: View would still open the OLD one, which
    is the opposite of what is on screen. Hidden until the save has happened. !important because
    the link's visibility is otherwise driven by an inline style. */
.dsFilePicker[data-state="picked"][data-mode="save"] a.dsFilePickerView {
    display: none !important;
}