@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);
}

    /*  THE EXCEPTION TO THE CAP ABOVE.
     *
     *  1200px is right for reading and wrong for a wide grid: CoachCertifyAD declares 1,610px of
     *  columns, so four hundred of them were being squeezed out whatever the page itself did. A
     *  page asks for this by setting Master.WidePage - see Site.Master.cs - rather than redeclaring
     *  .dsPagePanel in its own <style>, which is what four pages were part-way through doing. */
    .dsPagePanel.dsWidePage {
        max-width: none;
    }

.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;
    }

    /*  ...EXCEPT SIDEWAYS ON A PHONE.

        overflow: visible above also gave up the panel's horizontal scrolling, and a table wider than
        the screen - rankings, the directory staff lists - then ran off the right edge of the white
        page with no scrollbar to reach it. At phone width the panel scrolls sideways again. Its
        height is still auto, so there is still only the one vertical scrollbar, the page's.

        Phone width only, because a box that scrolls in x becomes the thing sticky table headers
        stick to, and this one never scrolls in y - on a desktop that would switch them off. */
    @media (max-width: 700px) {
        .dsSiteContentBody .dsFormPanelFSwTB {
            overflow-x: auto;
        }
    }

    /*  EDGE TO EDGE ON A PHONE (Jason, 2026-10-15).

        The 10px above is a frame on a desktop and a loss on a phone: every page - CIAC's, a school's,
        a league's - sat inside it, and the schedule tiles, sized to just fit a phone, clipped their
        score. Before the master pages were merged the school and organisation sheets set this panel to
        padding 0 / width 100%; the merge left the one rule above for everybody. Pages that set their
        own 10px in a page <style> (School.aspx, League.aspx, SchoolHTML) are out-ranked here on
        purpose - .dsMiddlePanel .dsFormPanelFSwTB is more specific than their bare class.

        THREE LAYERS, not one. The first fix took only .dsFormPanelFSwTB and the schedule still
        clipped: on SiteContent pages the content shell (.dsSiteContent, SiteShell.css) adds its own
        10px a side, and DashboardSchedule's panel is .dsFormPanelNormal with another 10px. Measured
        at 375px: the tile's teams/score cell ended at 388px before, 368px with all three off. */
    @media (max-width: 700px) {
        body .dsSiteContent {
            padding-left: 0;
            padding-right: 0;
        }

        /*  4px, not 0, so text does not touch the glass (Jason, 2026-10-15). width auto rather than
            100%: the panels are content-box, so 100% plus padding would overrun by 8px. Measured at
            375px the schedule's teams/score cell then ends at 372px - still inside. */
        body .dsMiddlePanel .dsFormPanelFSwTB,
        body .dsMiddlePanel .dsFormPanelNormal {
            padding-left: 4px;
            padding-right: 4px;
            width: auto;
        }
    }

    /* 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                                                                                                 */
/********************************************************************************************************/

/*  SECTION TABS - one row of sections, one of which you are in.
 *
 *  Lives here rather than in ContentManager.css because two different screens want the same strip:
 *  the SystemAdmin console, where each tab is a page, and the eligibility screens, where the six
 *  views of a school used to be a "Change view" dropdown on the toolbar. A second copy under a cm*
 *  name would have been two things to keep in step.
 *
 *  NOT .dsTabs, which is already the Game and Score popups' strip - red underline, ul/li, driven by
 *  Application.js. Different control, different look, and renaming theirs would mean touching a
 *  scoring screen to restyle an administration one.
 *
 *  BUTTONS AND ANCHORS BOTH. SchoolAdmin's tabs are buttons that show and hide panels already on the
 *  page; the console's and eligibility's are anchors, because there a tab is a real page - which is
 *  what lets one be bookmarked, opened in a new window and arrived at cold. Same look either way.  */
.dsSectionTabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    padding: 0;
    border-bottom: 2px solid #0571b8;
    margin: 6px 0 0 0;
}

/*  A FULL-HEIGHT GRID UNDER THE TABS HAS TO GIVE THE TABS THEIR ROOM.
 *
 *  dsGrid's wrapper is height:100% of the panel, which was right while the grid was the only thing
 *  in it. With the strip above, the grid started one strip lower and still claimed the whole panel,
 *  so its last rows and its footer ran off the bottom and the panel grew a second scrollbar.
 *
 *  MEASURED, NOT ASSUMED: the strip wraps to two rows on a narrow screen. FixCSS() in Site.Master
 *  sets --sectiontabsheight beside --toolbarheight; the 44px fallback is one row.
 *
 *  Both selectors because dsGrid is a CompositeControl and renders its own span around the wrapper,
 *  so the wrapper is the strip's nephew rather than its sibling. */
.dsFormPanelFSwTB > .dsSectionTabs ~ .resultstablewrapper,
.dsFormPanelFSwTB > .dsSectionTabs ~ * .resultstablewrapper {
    height: calc(100% - var(--sectiontabsheight, 44px));
}

    .dsSectionTabs button,
    .dsSectionTabs a {
        display: block;
        background: none;
        border: 1px solid transparent;
        border-bottom: none;
        font-family: inherit;
        font-size: 13px;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        padding: 8px 16px;
        cursor: pointer;
        color: #0571b8;
        text-decoration: none;
        white-space: nowrap;
    }

        /*  aria-selected for the panel tabs, aria-current for the anchors - the correct attribute
         *  differs, and "you are here" must not be expressed by disabling the control. */
        .dsSectionTabs button[aria-selected="true"],
        .dsSectionTabs a[aria-current="page"] {
            background-color: #0571b8;
            color: white;
        }

        /*  Said again for :link and :visited. Site.css colours every anchor further up this sheet,
            and :link outranks a bare class - the same thing that made the console's Publish button
            dark blue on blue. */
        .dsSectionTabs a:link,
        .dsSectionTabs a:visited {
            color: #0571b8;
        }

        .dsSectionTabs a[aria-current="page"]:link,
        .dsSectionTabs a[aria-current="page"]:visited {
            color: white;
        }

        .dsSectionTabs a:hover {
            background-color: #eef4fa;
            color: #0571b8;
            text-decoration: none;
        }

        .dsSectionTabs a[aria-current="page"]:hover {
            background-color: #0571b8;
            color: white;
        }

        .dsSectionTabs button:focus-visible,
        .dsSectionTabs a:focus-visible {
            outline: 2px solid #b8860b;
            outline-offset: -4px;
        }

.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;
}