/********************************************************************************************************/
/* Organization/Site.css - the complete look for an organisation'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%;
}

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





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

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

    .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 #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;
    height: 30px !important;
    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 {
    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: 40px !important;
    display: block;
    white-space: nowrap;
    text-decoration: none;
    font-family: Avalon;
    font-size: 14px;
    padding: 0px 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;
    }
}