@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);
    height: Calc(var(--vh) - var(--headerheight) - var(--toolbarheight));
    overflow: auto;
}

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


.fpLogoImage {
    display: block;
    float: left;
    margin-top: 0px;
    margin-left: 10px;
    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: #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;
    }

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

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

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