﻿/********************************************************************************************************/
/* School/Site.css - the complete look for a school's own pages.                                          */
/*                                                                                                      */
/* A FULL SHEET, NOT A DIFF - and deliberately so. It is linked immediately AFTER _Styles/Site.css (see  */
/* TenantFunctions.AddOwnerStyleSheet) and re-states everything, including rules Site.css already has.   */
/*                                                                                                      */
/* Those apparent duplicates are NOT redundant. This file opens with a global `a, a:link, ...` colour,    */
/* and Site.css has none. A later rule here such as `.dsNavigationMenuContent a { color: black }` has     */
/* EQUAL specificity to `a:link` (0,1,1) and beats it only by coming later IN THIS FILE. Delete it as a   */
/* duplicate of Site.css and the blue anchor colour wins instead - which is exactly what happened, and    */
/* turned the navigation menu blue on CAAD.                                                             */
/*                                                                                                      */
/* So: before removing anything here for being "the same as Site.css", check what it is overriding in    */
/* THIS file. Being identical to the base sheet does not make a rule idle.                               */
/********************************************************************************************************/

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

/*  Keep the scrollbar's space reserved whether or not the page is long enough to need one.
 *
 *  Without this the viewport is ~15px wider on a short page than on a long one, and every centred
 *  panel - the 1200px .dsMiddlePanel above all - shifts by half of that. The result is a visible
 *  jump in page width when moving between the school home page, which always scrolls, and a
 *  content or admin page, which often does not.
 *
 *  scrollbar-gutter rather than overflow-y: scroll, which would reserve the space by painting a
 *  dead scrollbar track on every short page. Browsers without it behave exactly as they do today.  */
html {
    scrollbar-gutter: stable;
}

body {
    background: #b9d0e5;
    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, a:link, a:visited, a:hover, a:active {
    color: blue;
    text-decoration: none;
}

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





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

.dsPagePanel {
    min-width: 360px;
    max-width: 1200px;
    height: 100%;
    overflow: auto;
    margin: 0 auto 0 auto;
}

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

.dsHeaderPanel {
    display: block;
    border: none;
    height: 47px;
    width: 100%;
    margin: 0px;
    padding: 0px;
    color: #000000;
    background-color: #ffffff;
    font-size: 16px;
    font-weight: bold;
    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;
}

.dsMainPanel600 {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

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

@media (max-width: 400px) {
    .dsFormPanel400 {
        width: Calc(100% - 40px);
        margin-top: 0px;
    }
}



.dsFormPanel600 {
    display: block;
    overflow: auto;
    position: relative;
    width: 600px;
    min-height: 0px;
    margin-left: auto;
    margin-right: auto;
    padding: 10px 10px 20px 10px;
    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;
}

.dsFormPanel800wTB {
    display: block;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    overflow: auto;
    width: 800px;
    height: Calc(100vh - 47px - 32px - 16px);
    padding: 8px;
    background-color: white;
}


.dsFormPanelFSwTB {
    display: block;
    position: relative;
    overflow: auto;
    width: 100%;
    height: Calc(var(--vh) - 47px - 42px);
    padding: 0;
    /*background-color: white;*/
    background-color: transparent;
}

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





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

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

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


.fpLogoImage {
    display: block;
    float: left;
    margin-top: 0px;
    height: 47px;
}


@media (max-width: 600px) {

    .fpLogoImage {
        height: 40px;
        padding-top: 4px;
    }
}



/********************************************************************************************************/
/* 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: #0571b8;
        }

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

    /* Back and refresh, matched to riil.fpsports.org.
     *
     * _Styles/Site.css has carried the vertical padding for the association's header since those
     * buttons existed; this file never did, so the icons sat pinned to the top of the bar.
     *
     * Measured on RIIL: each li is 26 x 46, the icon carries 15px above and below (15 + 16 line +
     * 15 = 46), and there is no horizontal padding on the icon at all - the ~6px either side comes
     * from whitespace between the tags in that markup. Whitespace is not a dimension worth relying
     * on, and it collapses differently here, so the li is given the 26px directly and centres its
     * icon. Same rendered geometry, arrived at on purpose rather than by accident. */
    .dsHeaderMenu .dsHeaderNavButton {
        width: 26px;
        text-align: center;
    }

        /* A little air before the logo, which RIIL gets from whitespace in its markup and this
           does not. Only on the last of the pair, so the two buttons stay tight to each other. */
        .dsHeaderMenu .dsHeaderNavButton + .dsHeaderNavButton {
            margin-right: 8px;
        }

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

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

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

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

    .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:focus {
        outline: 2px solid #003366;
        outline-offset: -2px;
    }

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

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

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

.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;
    width: 260px;
}

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

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

    .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: #000000;
    color: #ffffff;
    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: white;
    color: #000000;
}

.dsToolbar .dsToolbarButton:hover {
    background: white;
    color: #000000;
}

.dsToolbar li a:focus {
    outline: 2px solid red;
    outline-offset: -2px;
}

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

.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: #ffffff;
    padding: 0 20px 0 20px;
}

    .dsToolbar li a * {
        float: left;
    }

    .dsToolbar li a i {
        color: #ffffff;
        line-height: 40px;
    }

.dsToolbar li:hover a {
    cursor: pointer;
    color: #000000;
}

    .dsToolbar li:hover a i {
        color: #000000;
    }

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

.dsToolbarDropdown1,
.dsToolbarDropdown2,
.dsToolbarDropdown3,
.dsToolbarDropdown4 {
    margin: 0px auto;
    position: absolute;
    top: 32px;
    left: -10000px; /* Hides the drop down */
    text-align: left;
    padding: 10px 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;
    }

    .dsToolbar .dsToolbarLeft a i {
        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: #000000;
    padding-top: 2px;
    padding-bottom: 2px;
}

    .dsToolbar li:hover div a:hover {
        color: #000000;
    }

.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: 9px 2px 0 20px;
    color: #ffffff !important;
    background-color: #000000 !important;
}

.dsToolbarPanelScroll {
    max-height: 300px;
    overflow: auto;
}







/********************************************************************************************************/
/* 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: 3px solid #45ABF6;
    }

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

        .dsTabs li .active {
            color: black;
            border-bottom: 3px solid black;
            position: relative;
            bottom: -3px;
        }

    .dsTabs a {
        display: inline-block;
        color: #45ABF6;
        text-decoration: none;
        padding: 0.5rem;
    }

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

.dsTabPanels .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: #AAAAAA;
        position: sticky;
        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 #00F;
        animation: prixClipFix 2s linear infinite;
    }

    #dsLoader::after {
        border-color: #FF3D00;
        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;
    }
}
