@font-face {
    font-family: 'Avalon';
    src: url('/_fonts/avalon regular/avalon_regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Lato';
    src: url('/_fonts/Lato/Lato_Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'BebasNeue';
    src: url('/_fonts/bebas neue/bebasneue-regular.ttf') format('truetype');
}

@font-face {
    font-family: 'arimo-regular';
    src: url('/_fonts/arimo/arimo-regular.ttf') format('truetype');
}



/********************************************************************************************************/
/* BASIC HTML ELEMENT FORMATING                                                                         */
/********************************************************************************************************/


* {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
}

html, body {
    height: 100vh;
    -webkit-text-size-adjust: 100%;
}

body {
    background: var(--background-inactive-color);
    font-family: Avalon;
    color: black;
}

h2 {
    font-size: 20px;
    font-weight: normal;
}

h3 {
    display: block;
    position: relative;
    margin-top: 20px;
    margin-bottom: 10px;
    font-family: Avalon;
    font-size: 16px;
    font-weight: bold;
    color: #333333;
}

a:link, a:visited {
    color: var(--link-dark-color);
    text-decoration: none;
}

a:hover, a:active {
    color: var(--link-dark-color);
    text-decoration: underline;
}



/********************************************************************************************************/
/* MAIN LAYOUT PANELS                                                                                   */
/********************************************************************************************************/


.dsPagePanel {
    min-width: 360px;
    max-width: 1200px;
    height: 100%;
    margin: 0 auto 0 auto;
    background-color: var(--background-active-color);
}

.dsMiddlePanel {
    position: relative;
    width: 100%;
    z-index: 100;
    margin: auto;
}

.dsHeaderPanel {
    display: block;
    border: none;
    height: 47px;
    width: 100%;
    margin: 0px;
    padding: 0px;
    font-size: 16px;
    font-weight: bold;
    background-color: var(--background-active-color);
    z-index: 999999;
}

.dsMainPanel {
    overflow: hidden;
    position: relative;
    width: Calc(100% - 20px);
    max-width: 760px;
    margin: 10px auto 10px auto;
    padding: 0 10px 10px 10px;
    background-color: white;
}


.dsFormPanel400 {
    display: block;
    overflow: auto;
    position: relative;
    width: 360px;
    min-height: 0px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    padding: 10px 20px 40px 20px;
    background-color: white;
}

.dsFormPanel1000 {
    display: block;
    overflow: hidden;
    position: relative;
    width: Calc(100% - 20px);
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
    padding: 10px 10px 20px 10px;
    background-color: white;
}

.dsFormPanelNormal {
    display: block;
    position: relative;
    width: Calc(100% - 20px);
    min-height: 800px;
    padding: 10px;
    background-color: var(--background-active-color);
}


.dsFormPanelFSwTB {
    display: block;
    position: relative;
    width: Calc(100% - 20px);
    padding: 10px;
    background-color: var(--background-active-color);
    /* --noticeheight is the SiteShell system notice, 0px when there is none - see FixCSS in Site.Master. */
    height: Calc(var(--vh) - var(--headerheight) - var(--toolbarheight) - var(--noticeheight, 0px));
    overflow: auto;
}

    /*  THE SAME PANEL INSIDE THE CONTENT SHELL, WHERE THAT HEIGHT IS WRONG.

        The calc above assumes this panel is the only thing below the header and the toolbar, which is
        true on SiteConsole: it takes the whole viewport, scrolls its own contents, and the document
        never scrolls at all. SiteContent is not that shell - it wraps the panel in main's 20px/40px
        padding and puts the site footer underneath. The panel still claims the full viewport, so the
        document is ~150px taller than the window and you get TWO scrollbars: the panel's, and the
        page's beside it.

        Inside the content shell it simply grows with its contents and the page scrolls once, which is
        what an ordinary page does. Not a per-page fix: 43 pages pair this class with
        SiteContent.Master, so every one of them had the same pair of scrollbars.

        Keyboard focus below is left alone deliberately - it costs nothing on a panel that no longer
        scrolls, and turning it off here would be one more rule to keep in step. */
    .dsSiteContentBody .dsFormPanelFSwTB {
        height: auto;
        overflow: visible;
    }

    /* Site.Master makes this panel focusable so the keyboard can scroll it. The reset at the top of this
       sheet removes every outline, so without this the focus would be invisible (WCAG 2.4.7). Keyboard
       only - a mouse click into the panel shows nothing. */
    .dsFormPanelFSwTB:focus-visible {
        outline: 2px solid var(--primary-dark-color, #0571b8);
        outline-offset: -2px;
    }

    .dsMainPanel h2,
    .dsFormPanelFSwTB h2 {
        margin-top: 10px;
        margin-bottom: 10px;
    }

.dsEditWrapperPanel {
    display: none;
    height: calc(100% - 57px);
    width: 100%;
    position: fixed;
    z-index: 9000000;
    top: 37px;
    left: 0;
    background-color: rgba(230,230,230, 0.8);
    overflow-x: hidden;
    overflow-y: auto;
}




/********************************************************************************************************/
/* LOGO                                                                                                 */
/********************************************************************************************************/

.dsLogoLink {
    display: inline-block;
    height: 46px;
    margin-top: -14px;
}

.dsLogoImage {
    display: block;
    float: left;
    margin-top: 6px;
    height: 36px;
    width: 37px;
}


/*  Height is set, so a logo keeps its aspect ratio - but nothing capped the WIDTH, and a wide
    wordmark (CIAC's is one) then ran off the end of the header bar and pushed the page wider than
    the viewport. object-fit keeps the picture undistorted inside whatever the cap allows, so a tall
    badge is unaffected and a long wordmark is simply made to fit. */
.fpLogoImage {
    display: block;
    float: left;
    margin-top: 0px;
    margin-left: 10px;
    height: 47px;
    width: auto;
    max-width: 260px;
    object-fit: contain;
    object-position: left center;
}





@media (max-width: 600px) {

    .fpLogoImage {
        height: 40px;
        padding-top: 4px;
        /* 260px is most of a phone's width. The bar also holds the menu, back, refresh and login. */
        max-width: 150px;
    }
}



/********************************************************************************************************/
/* HEADER MENU                                                                                          */
/********************************************************************************************************/

.dsHeaderMenu {
    display: block;
    list-style: none;
    width: 100%;
    margin: 0;
    padding: 0px;
}

    .dsHeaderMenu li {
        float: left;
        display: block;
        text-decoration: none;
        text-align: center;
        position: relative;
        margin: 0px;
        min-width: 26px;
        border: none;
    }

        .dsHeaderMenu li::selection {
            color: #ffffff;
            background: #45ABF6;
        }

        /*.dsHeaderMenu li:hover {
            background-color: #bcc6d4;
        }*/

        .dsHeaderMenu li a {
            color: inherit;
            text-decoration: none;
        }

        .dsHeaderMenu li:hover .align_right {
            left: auto;
            right: -1px;
        }

        .dsHeaderMenu li:hover .align_left {
            left: -1px;
            right: auto;
        }

    .dsHeaderMenu .dsHeaderRight {
        float: right;
        margin-left: 0px;
        margin-right: 0px;
    }

    .dsHeaderMenu .dsHeaderLeft {
        float: left;
        margin-left: 0px;
        margin-right: 0px;
    }

    .dsHeaderMenu .dsHeaderNavButton i {
        padding: 15px 0 15px 0;
    }

    .dsHeaderMenu .dsNavigationMenuClosed {
        padding: 14px 8px 13px 8px;
    }

/*  The eligibility strip marked its current section with bold + underline. Dropped 2026-09-23: the
    sections became one dropdown labelled with the page you are on, so there is nothing to mark - and
    the bold was synthesised for Avalon, which has no bold face, so it rendered blurred at this size.
    Worth remembering before reaching for font-weight anywhere in this toolbar. */

    .dsHeaderMenu .dsNavigationMenuOpen {
        display: none;
        visibility: hidden;
        padding: 3px 8px 13px 8px;
    }

    .dsHeaderMenu .dsHeaderMenuDropdown {
        margin: 1px auto;
        position: absolute;
        top: 46px;
        left: -10000px; /* Hides the drop down */
        text-align: left;
        padding: 5px 5px 5px 5px;
        border: 1px solid #45ABF6;
        border-top: none;
        background-color: white;
        z-index: 1000;
        color: #666666;
        font-size: 14px;
        font-weight: normal;
    }

    .dsHeaderMenu .dsHeaderMenuDropdownMessage {
        width: 250px;
    }

.dsWelcomeText {
    float: right;
    margin: 8px 8px 0px 10px;
    text-align: right;
    font-size: 14px;
    font-weight: normal;
}


/* HEADER ON A NARROW SCREEN
   The header is two float groups: the icon menu on the left, Sign-Up/Login on the right. Floats
   that do not fit on one line drop to the next one, and on a phone they do not fit - the logo
   alone renders about 157px wide at this size and the two buttons need roughly 160px more, which
   overruns a 390px screen once the menu icons are counted.

   When that happened the buttons dropped below the 47px header, where the page content painted
   over them: they were there, but nothing could tap them.

   Flex removes the possibility instead of tuning the numbers against one handset. Neither group
   can wrap, and the icon menu is the one that gives - it clips its right edge, which costs part
   of the logo. That is the right thing to sacrifice: a logo is decoration, a login link is the
   only way in.

   The explicit height on the menu matters. Its li children are all floated, so the ul is zero
   high, and a zero-high box with overflow:hidden would clip the entire menu away. */
@media (max-width: 700px) {

    .dsHeaderPanel {
        display: flex;
        align-items: flex-start;
    }

    .dsHeaderMenu {
        flex: 1 1 auto;
        min-width: 0;
        height: 47px;
        overflow: hidden;
    }

    .dsWelcomeText {
        flex: 0 0 auto;
        float: none;
        margin-left: 0;
        white-space: nowrap;
        max-width: 55%;
        overflow: hidden;
    }
}


/********************************************************************************************************/
/* NAVIGATION MENU                                                                                      */
/********************************************************************************************************/

.dsNavigationOverlay {
    display: none;
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 99999;
    top: 0;
    left: 0;
    background-color: rgba(0,51,102, 0.80);
    overflow-x: hidden;
    overflow-y: hidden;
}

.dsNavigationMenu {
    height: 100%;
    width: 100%;
    max-width: 600px;
    background-color: #ffffff;
    overflow-y: auto;
}

    .dsNavigationMenu a {
        display: block;
        text-decoration: none;
        cursor: pointer;
        color: black;
    }

        .dsNavigationMenu a:hover, .overlay a:focus {
            color: black;
            text-decoration: none;
        }

.dsNavigationMenuContent {
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    font-size: 15px;
    width: 100%;
}

    .dsNavigationMenuContent ul {
        list-style-type: none;
        padding-bottom: 40px;
    }

        .dsNavigationMenuContent ul li {
            padding: 0 0 2px 0;
            color: #333333;
        }

    .dsNavigationMenuContent a {
        text-decoration: none;
        color: black;
        display: block;
        line-height: 20px;
        padding: 8px 20px 8px 15px;
    }

        .dsNavigationMenuContent a[disabled=disabled] {
            padding: 4px;
            text-decoration: none;
            color: #999999;
            display: block;
        }

.dsNavigationMenuGroupSeperator {
    border-bottom: 1px solid #d5dbdb;
    padding: 0;
    margin: 4px 0;
}

.dsNavigationMenuGroupTitle {
    padding-bottom: 5px;
    font-size: 15px;
    font-weight: 700;
    line-height: 24px;
    color: #111;
    text-transform: capitalize;
    display: inline-block;
    padding: 8px 20px 1px 15px;
}

.dsNavigationSubMenuTitle {
    padding-bottom: 5px;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    color: #111;
    text-transform: capitalize;
    display: inline-block;
    padding: 10px 20px 10px 15px;
}

.dsNavigationMenuArrow {
}

.dsNavigationCloseButton {
    position: absolute;
    left: clamp(0px, Calc(100% - 70px), 530px);
    font-family: Tahoma;
    font-size: 50px !important;
    z-index: 100;
}

.dsNavigationMenuAccordionTitle {
    display: block;
    background-color: #eee;
    color: #666666;
    font-size: 11px;
    cursor: pointer;
    padding: 4px;
    width: 100%;
    text-align: left;
}

    .dsNavigationMenuAccordionTitle.active, .dsNavigationMenuAccordionTitle:hover {
        background-color: #E0E0E0;
    }

        .dsNavigationMenuAccordionTitle.active + .dsNavigationMenuAccordionPanel {
            display: block;
        }

    .dsNavigationMenuAccordionTitle:after {
        content: "\f078";
        font-family: 'FontAwesome';
        color: #666666;
        position: absolute;
        right: 8px;
    }

    .dsNavigationMenuAccordionTitle.active:after {
        content: "\f077";
    }

.dsNavigationMenuDivider {
    padding-bottom: 10px;
    border-bottom: 1px solid #E0E0E0;
}

.dsNavigationMenuBackButton {
    font-size: 13px;
    font-weight: 700;
    margin: -1px 0 0 8px;
}

.dsNavigationMenuAccordionPanel {
    display: none;
}

.dsNavigationMenuSubPanel {
    display: none;
    padding-top: 10px;
}

    .dsNavigationMenuSubPanel.active {
        display: block;
    }



/********************************************************************************************************/
/* TOOLBAR MENU                                                                                         */
/********************************************************************************************************/



.dsToolbarMenuUL li {
    height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
}

.dsToolbarMenuGroupSeperator {
    border-bottom: 1px solid #d5dbdb !important;
    padding: 0;
    margin: 4px 0 !important;
    width: 250px;
    height: 0px !important;
}

.dsToolbarMenuDivider {
    padding-bottom: 10px;
    border-bottom: 1px solid white;
}

.dsToolbarMenuBackButton {
    font-size: 13px;
    font-weight: 700;
    margin: 2px 0 0 8px;
}

.dsToolbarMenuGroupTitle {
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    color: #111;
    display: inline-block;
    padding: 4px 0px 4px 4px;
}

.dsToolbarMenuLink {
    text-decoration: none;
    color: black;
    display: block;
    line-height: 16px;
    padding: 8px 0px 6px 0px;
    /* Fits the panel it is in, whatever that panel is. A fixed 260px hung 120px out of the 140px
       View dropdown on DashboardSchedule, and the icons inside these links float right - so they landed
       past the edge of the panel entirely. Organization/Site.css had already commented the 260px out. */
    width: 100%;
    box-sizing: border-box;
}

    .dsToolbarMenuLink i {
        padding: 2px 0 6px 0 !important;
    }

/*  No padding of its own: the dropdown that holds this already pads, and the two stacked to 20px of
    blank above the first item in every toolbar menu. */
.dsToolbarMenuSubPanel {
    display: none;
    padding-top: 0;
}

    .dsToolbarMenuSubPanel.active {
        display: block;
    }


/********************************************************************************************************/
/* MEDIA - NAVIGATION MENU SHOW                                                                         */
/********************************************************************************************************/
/*
@media (min-width: 1100px) {
    .dsMiddlePanel {
        margin-left: 200px;
        width: Calc(100% - 200px);
    }

    .dsNavigationOverlay {
        display: block;
        width: 199px;
        border-right: 1px solid #E0E0E0;
        z-index: 0;
    }

    .dsNavigationMenuOpen {
        display: block;
        visibility: visible;
    }

    .dsNavigationMenuClosed {
        display: none;
        visibility: hidden;
    }

    .dsNavigationCloseButton {
        display: none;
        visibility: hidden;
    }
}*/


/********************************************************************************************************/
/* TOOLBAR                                                                                              */
/********************************************************************************************************/

.dsToolbarPanel {
    display: block;
    border: none;
    height: fit-content;
    background-color: var(--toolbar-dark-color);
    color: var(--toolbar-light-color);
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.dsToolbar {
    list-style: none;
    width: 100%;
    height: fit-content;
    margin: 0px auto;
    margin-bottom: -1px;
}

    .dsToolbar li {
        float: left;
        display: block;
        border-left: 1px solid white;
        border-right: 1px solid white;
        text-align: center;
        height: 100%;
        line-height: 40px;
        margin-left: -1px;
        border-bottom: 1px solid white;
    }

.dsToolbarPanel li:hover {
    background: var(--toolbar-light-color);
    color: var(--toolbar-dark-color);
}

.dsToolbar .dsToolbarButton:hover {
    background: var(--toolbar-light-color);
    color: var(--toolbar-dark-color);
}

.dsToolbar li a {
    cursor: pointer;
    margin-top: 0px;
    margin-right: 5px;
    margin-left: 5px;
    height: 40px;
    display: block;
    white-space: nowrap;
    text-decoration: none;
    font-family: Avalon;
    font-size: 15px;
    color: var(--toolbar-light-color);
    padding: 0 20px 0 20px;
}

    .dsToolbar li a * {
        float: left;
    }

    .dsToolbar li a i {
        color: var(--toolbar-light-color);
        line-height: 39px;
    }

.dsToolbar li:hover a {
    cursor: pointer;
    color: var(--toolbar-dark-color);
}

    .dsToolbar li:hover a i {
        color: var(--toolbar-dark-color);
    }

.dsToolbar .fa-caret-down {
    margin-left: 2px;
}

.dsToolbarDropdown1,
.dsToolbarDropdown2,
.dsToolbarDropdown3,
.dsToolbarDropdown4 {
    margin: 0px auto;
    position: absolute;
    top: 40px;
    left: -10000px; /* Hides the drop down */
    text-align: left;
    /*  6px at the top, not 10: the menu hangs directly off the toolbar button, so a wide gap above the
        first item reads as a misalignment rather than as breathing room. */
    padding: 6px 5px 10px 5px;
    border: 1px solid #cccccc;
    border-top: none;
    background-color: white;
    z-index: 100;
    color: black;
}

.dsToolbarDropdown1 {
    width: 140px;
}

.dsToolbarDropdown2 {
    width: 280px;
}

.dsToolbarDropdown3 {
    width: 360px;
}

.dsToolbarDropdownScroll {
    max-height: 300px;
    overflow-y: scroll;
}

.dsToolbar li:hover .dsToolbarDropdown1,
.dsToolbar li:hover .dsToolbarDropdown2,
.dsToolbar li:hover .dsToolbarDropdown3,
.dsToolbar li:hover .dsToolbarDropdown4 {
    left: -1px;
}

.dsToolbar .dsToolbarRight {
    position: relative;
    float: right;
}

.dsToolbar .dsToolbarLeft {
    position: relative;
    float: left;
}

    .dsToolbar .dsToolbarLeft a i {
        float: right;
        margin-left: 6px;
    }

.dsToolbar li:hover .dsToolbarDropdownRight {
    left: auto;
    right: -1px;
}

.dsToolbar p {
    font-family: Avalon;
    font-size: 14px;
    color: black;
    line-height: 21px;
    text-align: left;
}

.dsToolbar h2 {
    font-size: 21px;
    font-weight: 400;
    letter-spacing: -1px;
    margin: 7px 0 14px 0;
    padding-bottom: 14px;
    border-bottom: 1px solid #666666;
}

.dsToolbar li:hover div a {
    font-size: 14px;
    color: var(--toolbar-dark-color);
    padding-top: 2px;
    padding-bottom: 2px;
}

    .dsToolbar li:hover div a:hover {
        color: var(--toolbar-dark-color);
    }

.dsToolbarText {
    font-size: 16px;
    margin-left: 4px;
    height: 24px !important;
    display: block;
    white-space: nowrap;
    text-decoration: none;
    font-family: Avalon;
    font-size: 14px;
    padding: 0px 2px 16px 20px;
    color: var(--toolbar-light-color) !important;
    background-color: var(--toolbar-dark-color) !important;
}

/*  Vertical only. The links inside are nowrap, so a long school name - "Hartford Magnet Trinity
    College Academy" - pushed a horizontal scrollbar onto a menu that is only ever read top to bottom.
    A name too long for the menu is now clipped with an ellipsis instead; the toolbar button shows the
    selected one in full. */
.dsToolbarPanelScroll {
    max-height: 300px;
    overflow-x: hidden;
    overflow-y: auto;
}

    .dsToolbarPanelScroll .dsToolbarMenuLink {
        overflow: hidden;
        text-overflow: ellipsis;
    }

/*  Search at the top of a long toolbar menu - the school pickers. */
.dsToolbarMenuSearch {
    display: block;
    width: 100%;
    height: 26px;
    margin-bottom: 6px;
    padding: 2px 6px;
    box-sizing: border-box;
    /*  Stays put while the list scrolls under it - the box belongs to the menu, not to the top of a
        three-hundred-school list. */
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: white;
    font-family: Avalon;
    font-size: 13px;
    border: 1px solid #cccccc;
}

    /* Emptying the field is what clears a search; the extra control only crowds a narrow menu. */
    .dsToolbarMenuSearch::-webkit-search-cancel-button {
        -webkit-appearance: none;
        appearance: none;
    }

/*  Non-member schools used to be rendered with the rest and hidden here by .dsMenuNonMember. They now
    have their own category - "High School Non-Member" - because a rule in this file is the one place
    the split must NOT live: StyleVersion is a hardcoded constant, so one stale Site.css put every
    school back in the list with nothing to tell them apart. See the note in DropDownLoader. */

/*  While a search is showing, every category page is open: the match may well be on a page the reader
    is not looking at, and results read as one list rather than as a drill-down. */
.dsMenuSearching .dsToolbarMenuSubPanel {
    display: block;
}

.dsToolbarMenuLink {
    padding: 7px 2px 0 2px !important;
    height: 24px !important;
}

    .dsToolbarMenuLink i {
        line-height: 12px !important;
    }





/********************************************************************************************************/
/* TABS                                                                                                 */
/********************************************************************************************************/

.dsTabs {
    display: block;
    margin-top: 8px;
    margin-bottom: 8px;
    clear: both;
}

    .dsTabs ul {
        list-style: none;
        padding: 0;
        margin: 0 0 10px 0;
        border-bottom: 1px solid black;
    }

    .dsTabs li {
        display: inline-block;
        padding: 0;
        vertical-align: bottom;
        font-size: 14px;
    }

        .dsTabs li .active {
            color: red;
            padding: 4px 10px 2px 10px;
            border-bottom: 3px solid red;
            position: relative;
            bottom: -2px;
        }

    .dsTabs a {
        display: inline-block;
        color: black;
        text-decoration: none;
        padding: 4px 10px 3px 10px;
    }

.dsTabPanels > div {
    display: none;
    overflow: hidden;
    padding: 10px, 0 10px 0;
}

.dsTabPanels .active {
    display: block;
}



/********************************************************************************************************/
/* TABS                                                                                                 */
/********************************************************************************************************/

.dsTabSelect {
    display: block;
    margin-top: 8px;
    margin-bottom: 8px;
    clear: both;
}

    .dsTabSelect ul {
        list-style: none;
        padding: 0;
        margin: 0 0 10px 0;
        /*border-bottom: 1px solid black;*/
    }

    .dsTabSelect li {
        display: inline-block;
        padding: 0;
        vertical-align: bottom;
        font-size: 14px;
    }

        .dsTabSelect li .active {
            color: red;
            padding: 4px 10px 2px 10px;
            border-bottom: 3px solid red;
            position: relative;
            bottom: -2px;
        }

    .dsTabSelect a {
        display: inline-block;
        color: black;
        text-decoration: none;
        padding: 4px 10px 3px 10px;
    }

.dsTabSelectPanels > div {
    display: none;
    overflow: hidden;
    padding: 10px, 0 10px 0;
}

.dsTabSelectPanels .active {
    display: block;
}



/********************************************************************************************************/
/* TABLE                                                                                                 */
/********************************************************************************************************/
.dsTableWrapper {
    width: 100%;
    overflow-x: auto;
    display: block;
}


.dsTable {
    border-style: solid;
    border-width: 0 0 1px 0;
    border-color: #CCCCCC;
    font-family: Avalon;
    font-size: 12px;
    color: #666666;
    border-collapse: collapse;
    line-height: 1.3;
    text-align: left;
    position: relative;
    width: max-content;
}

    .dsTable tr:nth-child(odd) {
        background: #F5F5F5;
    }

    .dsTable th {
        border-style: solid;
        border-width: 1px 1px 1px 1px;
        border-color: #CCCCCC;
        font-size: 10px;
        font-weight: bold;
        color: white;
        text-align: center;
        padding: 3px;
        background-color: #666666; /* was #AAAAAA: white on it is 2.3:1, WCAG 1.4.3 needs 4.5:1. This is 5.7:1 */
        position: sticky;
        top: 0;
    }

    /* Sticky offsets are measured inside the scroller's padding, so in the 10px-padded
       .dsFormPanelFSwTB a top of 0 leaves a 10px strip above the header that rows scroll
       through. Pull it up by the padding, at any depth: pages nest their tables differently
       - Generic.aspx has panel > div > the control's <span> > table, Scheduler.aspx has
       panel > div > div > table - and the offset is the panel's, not the table's. */
    .dsFormPanelFSwTB .dsTable th {
        top: -10px;
    }

        /* Except inside a wrapper that scrolls on its own: there the header sticks to THAT box,
           which has no padding to cancel, and -10px would cut the top off it. .dsTableWrapper
           is the one such wrapper holding a .dsTable - it sets overflow-x, which makes it a
           scroll container both ways. The admin grids turn sticky off entirely, so they do not
           care either way (see AdminTheme.css). */
        .dsFormPanelFSwTB .dsTableWrapper .dsTable th {
            top: 0;
        }

    .dsTable td {
        border-style: solid;
        border-width: 1px 1px 1px 1px;
        border-color: #CCCCCC;
        padding: 3px;
        padding-right: 6px;
        margin: 0;
    }

    .dsTable .fa {
        padding: 6px;
    }

    .dsTable .Right {
        text-align: right;
    }



/********************************************************************************************************/
/* SPINNER - LOADER                                                                                     */
/********************************************************************************************************/

#dsLoader {
    top: Calc((100% - 80px) / 3);
    left: Calc((100% - 80px) / 2);
    width: 48px;
    height: 48px;
    position: fixed;
    display: block;
    z-index: 999999;
    font-size: 10px;
    color: red;
    border-radius: 50%;
    animation: rotate 1s linear infinite
}

    #dsLoader::before, #dsLoader::after {
        content: "";
        box-sizing: border-box;
        position: absolute;
        inset: 0px;
        border-radius: 50%;
        border: 5px solid #ffffff;
        animation: prixClipFix 2s linear infinite;
    }

    #dsLoader::after {
        border-color: #b12e34;
        animation: prixClipFix 2s linear infinite, rotate 0.5s linear infinite reverse;
        inset: 6px;
    }

@keyframes rotate {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

@keyframes prixClipFix {
    0% {
        clip-path: polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)
    }

    25% {
        clip-path: polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)
    }

    50% {
        clip-path: polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)
    }

    75% {
        clip-path: polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)
    }

    100% {
        clip-path: polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)
    }
}




/********************************************************************************************************/
/* MEDIA RESPONSIVE                                                                                     */
/********************************************************************************************************/

.dsWideScreenShow {
    display: none;
}

@media (min-width: 600px) {
    .dsWideScreenShow {
        display: block;
    }
}


/********************************************************************************************************/
/* ACCESSIBILITY - SITE WIDE                                                                            */
/*                                                                                                      */
/* These were in School/Site.css, so only a school's own pages had them. Everything is on Site.Master   */
/* now, and the chrome they cover - the navigation menu, its close button, the toolbar, the header       */
/* buttons - is the SAME chrome on every page. There was no reason beyond history for the other 150      */
/* pages to go without.                                                                                 */
/********************************************************************************************************/

/*  WCAG 2.4.7. The navigation menu, its close button and the toolbar are the same controls on every
 *  page, so the indicators belong here rather than in one owner's sheet. */
.dsMiddlePanel a:focus,
.dsNavigationMenuContent a:focus,
.dsToolbar li a:focus {
    outline: 2px solid red;
    outline-offset: -2px;
}

.dsNavigationCloseButton:focus {
    outline: 2px solid red;
    outline-offset: -2px;
}

.dsHeaderMenu .dsNavigationMenuClosed:focus,
.dsHeaderMenu .dsNavigationMenuOpen:focus {
    outline: 2px solid #003366;
    outline-offset: -2px;
}

.dsToolbar .dsToolbarButton:hover a:focus {
    outline-color: red;
}

/*  WCAG 2.3.3 (Animation from Interactions). The carousels auto-advance; somebody who has asked their
 *  system for less motion should not have to watch them. Honours the reader's own setting rather than
 *  deciding on their behalf. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/*  For text that only a screen reader should hear - "opens in a new window" on an external link
 *  (WCAG 3.2.5), a heading that would be redundant on screen. Defined once, here, so a page does not
 *  have to invent its own. */
.dsVisuallyHidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}