html {
    height: 100%;
}

p {
    padding: 0;
    margin: 0;
}

@media screen and (prefers-color-scheme: light) {
    body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        height: 100%;
        background-color: #252525;
        font-family: Akkurat-Pro-Regular, sans-serif;
        font-size: 14px;
        font-weight: normal;
        color: #000;
    }

    .tooltipText {
        fill: #000;
    }
}

@media screen and (prefers-color-scheme: dark) {
    body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        height: 100%;
        background-color: #202020;
        font-family: Akkurat-Pro-Regular, sans-serif;
        font-size: 14px;
        font-weight: normal;
        color: #cfcfcf;
    }

    .tooltipText {
        fill: #cfcfcf;
    }
}

div#PCEUsertip_balloonPopup.ajax__balloon_popup {
    z-index: 100001 !important;
}

iframe {
    border-width: 0px;
}

.cellAlignTop {
    vertical-align: top !important;
}

.cellLogBrief {
    vertical-align: top !important;
    min-width: 300px !important;
    max-width: 500px !important;
}

.koqTable,
.scpTable {
    border-collapse: collapse;
    border: 1px solid;
    width: 100%;
}

    .koqTable td,
    .scpTable td {
        border: 1px solid;
        padding: 3px;
    }

@media screen and (prefers-color-scheme: dark) {
    svg path {
        color: #cfcfcf;
    }

    .dxmLite_Office365 .dxm-main {
        border-color: #191919;
    }
}

.dxgvHeader_Office365,
.dxeTextBox_Office365,
.dx-datagrid,
.dxgvTable_Office365,
.dxgvHeader_Office365 {
    font-family: Akkurat-Pro-Regular, sans-serif;
    font-size: 14px;
    font-weight: normal;
}

    .dx-datagrid svg,
    .dxgvTable_Office365 svg {
        width: 16px !important;
        height: 16px !important;
    }

    .dxgvHeader_Office365,
    .dx-datagrid .dx-row > td,
    .dxgvTable_Office365 .dxgvDataRow_Office365 > td,
    .dxgvTable_Office365 .dxgvFilterRow_Office365 > td {
        padding-top: 2px !important;
        padding-bottom: 2px !important;
    }


.dx-data-row.dx-state-hover:not(.dx-selection):not(.dx-row-inserted):not(.dx-row-removed):not(.dx-edit-row) > td:not(.dx-focused) {
    background-color: #ff6a13 !important;
    cursor: pointer;
}

.dxtlIndent_Office365,
.dxtlIndentWithButton_Office365,
.dxtlNode_Office365 {
    background-color: transparent;
}

.dxeButtonEdit_Office365 .dxeEditArea_Office365 {
    background-color: transparent;
}

.dxeButtonEdit_Office365 {
    background-color: transparent;
    border: 1px solid rgba(0,0,0,0.22);
    width: 170px;
    font: 14px 'Segoe UI', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif;
    border-collapse: separate;
    border-spacing: 0;
}

.logQuickNote {
    color: red;
    /*    max-width: Calc(100% - 200px);
*/
}

.dx-texteditor-input {
    float: right;
}

@media screen and (prefers-color-scheme: light) {
    .dxeEditArea_Office365, body input.dxeEditArea_Office365 {
        color: #000;
    }
}

@media screen and (prefers-color-scheme: dark) {
    .dxeEditArea_Office365, body input.dxeEditArea_Office365 {
        color: #cfcfcf;
    }
}

@media screen and (prefers-color-scheme: light) {
    .logHistoryA {
        background-color: #61e05a !important;
    }

    .logHistoryB {
        background-color: #7ffd75 !important;
    }
}

@media screen and (prefers-color-scheme: dark) {
    .logHistoryA {
        background-color: #61e05a !important;
        color: #000 !important;
    }

        .logHistoryA a {
            color: #000 !important;
        }

    .logHistoryB {
        background-color: #7ffd75 !important;
        color: #000 !important;
    }

        .logHistoryB a {
            color: #000 !important;
        }
}

#tblSkillResults label,
.skillChildRow label {
    display: block;
    padding-left: 20px;
    text-indent: -20px;
}

#tblSkillResults input[type=checkbox],
.skillChildRow input[type=checkbox] {
    width: 13px;
    height: 13px;
    padding: 0;
    margin: 0;
    margin-right: 7px;
    vertical-align: bottom;
    position: relative;
    top: -1px;
    *overflow: hidden;
}

/* Remove default bullets */
#myUL {
    list-style-type: none;
}

/* Remove margins and padding from the parent ul */
#myUL {
    margin: 0;
    padding: 0;
}

@media screen and (prefers-color-scheme: light) {
    .innerTabContainerHeaderObj {
        position: relative;
        top: -7px;
        left: -7px;
        width: Calc(100% + 14px);
        z-index: 999;
        background-color: white;
        height: 20px;
        border-bottom: solid 2px #cccccc;
        text-align: center;
    }
}

@media screen and (prefers-color-scheme: dark) {
    .innerTabContainerHeaderObj {
        position: relative;
        top: -7px;
        left: -7px;
        width: Calc(100% + 14px);
        z-index: 999;
        background-color: #202020;
        height: 20px;
        border-bottom: solid 2px #191919;
        text-align: center;
    }

    #TabContainer1_TabPanel11_tcProduction {
        top: 20px;
    }
}

@media screen and (prefers-color-scheme: light) {
    .pinned {
        background-color: gold !important;
    }

    .exited {
        background-color: #d8bfd8 !important;
    }
}

@media screen and (prefers-color-scheme: dark) {
    .pinned {
        background-color: #806c00 !important;
    }

    .exited {
        background-color: #7a6c7a !important;
    }
}

.skillCodeList {
    width: 250px;
    display: inline-block;
    overflow: auto;
    border: solid 1px #d5d5d5;
}

    .skillCodeList div {
        padding-top: 5px;
        padding-bottom: 5px;
    }

        .skillCodeList div label {
            display: inline-block;
            margin-left: 0px;
            white-space: pre-wrap;
            max-width: 205px;
            cursor: pointer;
        }

            .skillCodeList div label:before {
                margin-left: -3px;
            }

.skillSuggestedCodeList {
    width: 99%;
    display: inline-block;
    overflow: auto;
    border: solid 1px #d5d5d5;
}

    .skillSuggestedCodeList div {
        padding-top: 5px;
        padding-bottom: 5px;
    }

        .skillSuggestedCodeList div label {
            display: inline-block;
            margin-left: 0px;
            white-space: pre-wrap;
            max-width: 455px;
            cursor: pointer;
        }

            .skillSuggestedCodeList div label:before {
                margin-left: -3px;
            }

.accordion {
}

.accordionHeader {
    border: solid 1px #cccccc;
    background-color: #d5d5d5;
    padding: 5px;
}

.accordionHeaderSelected {
    border: solid 1px #cccccc;
    background-color: #ff5000;
    padding: 5px;
}

.accordionContent {
    border: solid 1px #cccccc;
    border-top: none;
    height: 300px;
}

.dxichCellSys {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
}

.dxichTextCellSys {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
}

/* Style the caret/arrow */
.caret {
    cursor: pointer;
    user-select: none; /* Prevent text selection */
}

    /* Create the caret/arrow with a unicode, and style it */
    .caret::before {
        content: "\25B6";
        color: black;
        display: inline-block;
        margin-right: 0px;
    }

/* Rotate the caret/arrow icon when clicked on (using JavaScript) */
.caret-down::before {
    transform: rotate(90deg);
}

/* Hide the nested list */
.nested {
    display: none;
    padding-left: 15px;
}

/* Show the nested list when the user clicks on the caret/arrow (with JavaScript) */
.active {
    display: block;
    padding-left: 15px;
}

.userMenu {
    position: relative;
    top: -10px;
}

.static {
    text-align: left;
    width: 200px;
}

    .static a img {
        position: relative;
        top: 12px;
    }

.dynamic a img {
    position: relative;
    top: 0px;
    margin-right: 3px;
    margin-left: 10px;
}

/* The side navigation menu */
.sidenav {
    height: 100%; /* 100% Full-height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 999999; /* Stay on top */
    top: 0; /* Stay at the top */
    left: 0;
    background-color: #111; /* Black*/
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 60px; /* Place content 60px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

    /* The navigation menu links */
    .sidenav a {
        padding: 8px 8px 8px 32px;
        text-decoration: none;
        font-size: 25px;
        color: #818181;
        display: block;
        transition: 0.3s;
    }

        /* When you mouse over the navigation links, change their color */
        .sidenav a:hover {
            color: #f1f1f1;
        }

    /* Position and style the close button (top right corner) */
    .sidenav .closebtn {
        position: absolute;
        top: 0;
        right: 5px;
        font-size: 36px;
        margin-left: 50px;
    }

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
    transition: margin-left .5s;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}

@media screen and (prefers-color-scheme: light) {

    #TabContainer1_TabPanel1_JobBgDIV,
    #JobBgDIV {
        border: 2px solid #D7D2A5;
        border-radius: 15px;
        background-color: #fffacd;
        padding: 10px;
        overflow: hidden;
    }
}

@media screen and (prefers-color-scheme: dark) {

    #TabContainer1_TabPanel1_JobBgDIV,
    #JobBgDIV {
        border: 2px solid #191919;
        border-radius: 15px;
        background-color: #2d2d2d;
        padding: 10px;
        overflow: hidden;
    }
}

.menu {
    border: solid 1px #d5d5d5;
    border-radius: 7px;
    padding-top: 7px;
    padding-bottom: 7px;
    width: 100px;
    background: #fff;
    color: #000;
    position: absolute;
    z-index: 999999;
    display: none;
    box-shadow: 0 0 10px #808080;
}

    .menu ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

        .menu ul a {
            text-decoration: none;
        }

        .menu ul li {
            width: 88%;
            padding: 6%;
            background-color: #fff;
            color: #000;
        }

            .menu ul li:hover {
                background-color: #ff6a13;
                color: #fff;
            }

@media screen and (prefers-color-scheme: light) {
    a,
    a:link,
    a:visited,
    a:active {
        color: black;
        text-align: left;
        text-decoration: none;
        font-weight: normal;
    }

        a:hover {
            color: black;
            text-align: left;
            text-decoration: underline;
            font-weight: normal;
        }
}

@media screen and (prefers-color-scheme: dark) {
    a,
    a:link,
    a:visited,
    a:active {
        color: #cfcfcf;
        text-align: left;
        text-decoration: none;
        font-weight: normal;
    }

        a:hover {
            color: #cfcfcf;
            text-align: left;
            text-decoration: underline;
            font-weight: normal;
        }
}

@media screen and (prefers-color-scheme: light) {

    input, textarea {
        font-family: Akkurat-Pro-Regular, sans-serif;
        font-size: 14px;
        border: solid 1px #d5d5d5;
    }

    select {
        font-family: Akkurat-Pro-Regular, sans-serif;
        font-size: 14px;
        border: solid 1px #d5d5d5;
        max-width: 200px;
    }
}

@media screen and (prefers-color-scheme: dark) {

    input, textarea {
        font-family: Akkurat-Pro-Regular, sans-serif;
        font-size: 14px;
        border: solid 1px #9a9a9a;
        color: #cfcfcf;
        background-color: #2d2d2d;
    }

    select {
        font-family: Akkurat-Pro-Regular, sans-serif;
        font-size: 14px;
        border: solid 1px #9a9a9a;
        max-width: 200px;
        color: #cfcfcf;
        background-color: #2d2d2d;
    }
}


.styled-select select {
    margin-right: 3px;
    border-radius: 5px;
    background-color: #333333;
    color: #fff;
    border: 0;
    padding: 5px;
    background-position: 3px 3px;
    background-repeat: no-repeat;
}

button, input[type="submit"] {
    margin-right: 3px;
    border-radius: 5px;
    background-color: #333333;
    color: #fff;
    border: 0;
    padding: 5px;
    background-position: 3px 3px;
    background-repeat: no-repeat;
    background-size: 16px 16px;
}

    button:hover, input[type="submit"]:hover {
        cursor: pointer;
        background-color: #ff6a13;
    }

.dxeCalendarButton {
    color: #000;
}

.tooltip {
    background-color: white;
    border: solid 1px #d5d5d5;
    border-radius: 5px;
    padding: 5px;
}

a.helpButton {
    margin-right: 3px;
    border-radius: 5px;
    background-color: #333333;
    color: #fff;
    border: 0;
    padding: 5px;
    background-position: 3px 3px;
    background-repeat: no-repeat;
    line-height: 24px;
}

    a.helpButton:hover {
        cursor: pointer;
        background-color: #ff6a13;
        text-decoration: none;
    }

input.saveButton {
    background-image: url('../images/svg/floppy-disk.svg');
    padding-left: 20px;
    float: right;
    margin-top: 8px;
    margin-bottom: 8px;
}

input.deleteButton {
    background-image: url('../images/svg/bin-2.svg');
    padding-left: 20px;
}

input.calendarButton {
    background-image: url('../images/svg/calendar-1-white.svg');
    padding-left: 20px;
}

input.copyButton {
    background-image: url('../images/svg/copy-paste.svg');
    padding-left: 20px;
}

input.exportButton {
    background-image: url('../images/svg/download-button.svg');
    padding-left: 20px;
}

input.refreshButton {
    background-image: url('../images/svg/button-refresh-arrows.svg');
    padding-left: 20px;
}

input.closeButton,
input.cancelButton {
    background-image: url('../images/svg/remove-circle.svg');
    padding-left: 20px;
    float: right;
    margin-top: 8px;
    margin-bottom: 8px;
}

input.openButton {
    background-image: url('../images/svg/book-book-pages.svg');
    padding-left: 20px;
}

input.logButton {
    background-image: url('../images/svg/notes-book-text.svg');
    padding-left: 20px;
    float: right;
    margin-top: 8px;
    margin-bottom: 8px;
}

input.quickFindButton {
    background-image: url('../images/svg/database-search-white.svg');
    padding-left: 20px;
    position: relative;
    top: -7px;
}

input.aiSummaryButton {
    background-image: url('../images/svg/ui-webpage-bullets.svg');
    padding-left: 20px;
    position: relative;
    top: -7px;
}

input.librariesButton {
    background-image: url('../images/svg/book-library-2-white.svg');
    padding-left: 20px;
    position: relative;
    top: -7px;
}

input.getlinkButton {
    background-image: url('../images/svg/hyperlink-2.svg');
    padding-left: 20px;
}

input.signoutButton {
    background-image: url('../images/svg/eject-button.svg');
    padding-left: 20px;
}

input.clearButton {
    background-image: url('../images/svg/design-tool-magic-wand.svg');
    padding-left: 20px;
}

input.backButton {
    background-image: url('../images/svg/navigation-left-circle.svg');
    width: 22px;
}

input.forwardButton {
    background-image: url('../images/svg/navigation-right-circle.svg');
    width: 22px;
}

input.sharepointButton {
    background-image: url('../images/svg/os-system-microsoft.svg');
    padding-left: 20px;
}

input.cpConnectButton {
    background-image: url('../images/svg/database-connect.svg');
    padding-left: 20px;
}

input.yammerButton {
    background-image: url('../images/svg/social-media-yammer-white.svg');
    padding-left: 20px;
}

input.maximiseButton {
    background-image: url('../images/svg/resize-expand-corner.svg');
    padding-left: 15px;
}

input.restoreButton {
    background-image: url('../images/svg/resize-shrink.svg');
    padding-left: 15px;
}

input.mapButton {
    background-image: url('../images/svg/earth-pin-2.svg');
    padding-left: 20px;
}

input.printButton,
input.printButton2 {
    background-image: url('../images/svg/printer.svg');
    padding-left: 20px;
}

input.findButton {
    background-image: url('../images/svg/search.svg');
    padding-left: 20px;
    float: right;
    margin-top: 8px;
    margin-bottom: 8px;
}

input.searchPersonButton {
    background-image: url('../images/svg/multiple-users-1-white.svg');
    background-size: 32px 32px;
    width: 38px;
    height: 38px;
    margin-bottom: 2px;
    fill: #fff;
}

input.searchCompanyButton {
    background-image: url('../images/svg/company-white.svg');
    background-size: 32px 32px;
    width: 38px;
    height: 38px;
    margin-bottom: 2px;
}

input.searchAssignmentButton {
    background-image: url('../images/svg/briefcase-white.svg');
    background-size: 32px 32px;
    width: 38px;
    height: 38px;
    margin-bottom: 2px;
}

input.searchTextButton {
    background-image: url('../images/svg/app-window-search-text.svg');
    background-size: 32px 32px;
    width: 38px;
    height: 38px;
    margin-bottom: 2px;
}

input.scratchPadButton {
    background-image: url('../images/svg/notes-edit.svg');
    background-size: 32px 32px;
    width: 38px;
    height: 38px;
    margin-bottom: 2px;
}

input.addButton {
    background-color: forestgreen;
}

    input.addButton:hover {
        background-color: lightgreen;
    }

input.removeButton {
    background-color: firebrick;
}

    input.removeButton:hover {
        background-color: red;
    }

a {
    outline: none !important;
}

#loginPanel {
    border: solid 1px #ff6a13;
    border-radius: 7px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    width: 275px;
    height: 160px;
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
}

    #loginPanel td {
        padding: 1px;
    }

#loginPanelError {
    width: 275px;
    height: 100px;
    margin: auto;
    position: absolute;
    top: 270px;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
}

#header {
    color: #fff;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    height: 40px;
    background-color: #000;
    line-height: 40px;
    padding-left: 5px;
    padding-right: 5px;
}

@media screen and (prefers-color-scheme: light) {

    .footer {
        position: absolute;
        bottom: 5px;
        height: 30px;
        left: 0px;
        right: 0px;
        line-height: 30px;
        padding-left: 5px;
        padding-right: 5px;
        border-top: solid 1px #d5d5d5;
        background-color: #fff;
    }

    .upload-footer {
        position: absolute;
        bottom: 0px;
        height: 70px;
        left: 0px;
        right: 0px;
        background-color: #fff;
        padding: 5px;
        padding-top: 0px;
    }
}

@media screen and (prefers-color-scheme: dark) {

    .footer {
        position: absolute;
        bottom: 5px;
        height: 30px;
        left: 0px;
        right: 0px;
        line-height: 30px;
        padding-left: 5px;
        padding-right: 5px;
        border-top: solid 1px #191919;
        background-color: #202020;
    }

    .upload-footer {
        position: absolute;
        bottom: 0px;
        height: 70px;
        left: 0px;
        right: 0px;
        background-color: #202020;
        padding: 5px;
        padding-top: 0px;
    }
}

.header-left,
#footer-left {
    padding-left: 5px;
    height: 40px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #fff;
    z-index: 1000;
}

    .header-left img,
    .header-left svg {
        position: relative;
        top: 7px;
        width: 24px;
        height: 24px;
        fill: #fff;
    }

    .header-left a,
    #footer-left a {
        color: #fff;
    }

.header-left2 {
    padding-left: 5px;
    height: 40px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #fff;
    z-index: 1000;
}

    .header-left2 svg {
        position: relative;
        top: 7px;
        width: 24px;
        height: 24px;
        fill: #fff;
    }

    .header-left2 a {
        color: #fff;
    }

.header-centre,
#footer-centre {
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    text-align: center;
    z-index: 999;
}

.header-right,
#footer-right {
    padding-right: 3px;
    position: absolute;
    top: 0px;
    right: 0px;
    height: 40px;
    text-align: right;
    color: #fff;
    z-index: 1001;
}

    .header-right a {
        color: #fff;
    }

#left-search-bar {
    color: #fff;
    overflow: hidden;
    position: absolute;
    top: 40px;
    bottom: 0px;
    left: 0px;
    width: 40px;
    z-index: 2;
    background-color: #000;
}

    #left-search-bar p {
        margin: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

#left-content {
    overflow: hidden;
    position: absolute;
    top: 40px;
    bottom: 0px;
    left: 40px;
    width: 250px;
    z-index: 1;
    background-color: #252525;
}

#right-content {
    overflow: hidden;
    position: absolute;
    top: 40px;
    bottom: 0px;
    left: 290px;
    right: 0px;
    z-index: 1;
    -webkit-box-shadow: -5px 0px 10px 0px rgba(0,0,0,0.5);
    -moz-box-shadow: -5px 0px 10px 0px rgba(0,0,0,0.5);
    box-shadow: -5px 0px 10px 0px rgba(0,0,0,0.5);
}

#content-header,
content-header,
.content-header,
#popup-header {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 40px;
    line-height: 40px;
    width: 100%;
    background-color: #252525;
}

@media screen and (prefers-color-scheme: light) {

    #content-body,
    #popup-body {
        position: absolute;
        top: 40px;
        left: 0px;
        bottom: 0px;
        width: 100%;
        background-color: #fff;
    }

    .content-body2 {
        position: absolute;
        top: 0px;
        left: 0px;
        bottom: 0px;
        width: 100%;
        background-color: #fff;
    }
}

@media screen and (prefers-color-scheme: dark) {

    #content-body,
    #popup-body {
        position: absolute;
        top: 40px;
        left: 0px;
        bottom: 0px;
        width: 100%;
        background-color: #202020;
    }

    .content-body2 {
        position: absolute;
        top: 0px;
        left: 0px;
        bottom: 0px;
        width: 100%;
        background-color: #202020;
    }
}

.content-body-inner {
    overflow: auto;
    position: absolute;
    top: 5px;
    left: 5px;
    bottom: 5px;
    right: 5px;
    padding: 0px;
}

.nav-body-inner {
    overflow: auto;
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    padding: 5px;
    border-right: solid 1px #444444;
}

@media screen and (prefers-color-scheme: light) {

    .popup-body-inner {
        overflow: hidden;
        position: absolute;
        top: 5px;
        left: 5px;
        bottom: 5px;
        right: 5px;
        background-color: #fff;
        border: solid 1px #d5d5d5;
        border-radius: 0px;
    }

    #logCodesDIV {
        height: Calc(100% - 70px);
        overflow: auto;
        border: solid 1px #d5d5d5;
        color: black;
    }
}

@media screen and (prefers-color-scheme: dark) {

    .popup-body-inner {
        overflow: hidden;
        position: absolute;
        top: 5px;
        left: 5px;
        bottom: 5px;
        right: 5px;
        background-color: #2b2b2b;
        border: solid 1px #191919;
        border-radius: 0px;
    }

    #logCodesDIV {
        height: Calc(100% - 70px);
        overflow: auto;
        border: solid 1px #191919;
        background-color: #343434;
    }

        #logCodesDIV > ul > li > label {
            color: white;
        }
}


#uploadBox {
    line-height: 35px;
    display: block;
    padding: 15px;
    border: dashed 2px #cccccc;
    color: #cccccc;
    text-align: center;
}

.full-page-noscroll {
    overflow: hidden;
    position: absolute;
    top: 5px;
    left: 5px;
    bottom: 5px;
    right: 5px;
}

.full-page-noscroll2 {
    overflow: hidden;
    position: absolute;
    top: 60px;
    left: 5px;
    bottom: 5px;
    right: 5px;
    padding: 0px;
}

.scrolling-list {
    overflow: auto;
    position: absolute;
    top: 60px;
    left: 5px;
    bottom: 5px;
    right: 5px;
}

.scrolling-list-footer {
    overflow: auto;
    position: absolute;
    top: 53px;
    left: 7px;
    bottom: 35px;
    right: 5px;
}

.scrolling-list-upload-footer {
    overflow: auto;
    position: absolute;
    top: 53px;
    left: 7px;
    bottom: 70px;
    right: 5px;
}

.scrolling-list-custom {
    overflow: auto;
    position: absolute;
    top: 55px;
    left: 5px;
    bottom: 7px;
    right: 30px;
}

.CustomisePanel_Min {
    position: absolute;
    top: 55px;
    bottom: 5px;
    right: 5px;
    width: 25px;
    border-radius: 5px;
    border: solid 1px #fff;
    background-color: #000;
}

#AssignmentReportDIV,
#DashboardReportDIV,
#ReportDIV {
    overflow: hidden;
    position: absolute;
    top: 5px;
    left: 5px;
    bottom: 5px;
    right: 5px;
}

#PCDashboardReportDIV {
    overflow: hidden;
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
}

.column {
    float: left;
    width: Calc(50% - 20px);
    min-width: 275px;
    margin: 5px 10px 0px 10px;
}

    .column table {
        width: 100%;
    }

        .column table tr {
            vertical-align: top;
        }

            .column table tr td:first-child {
                width: 33%;
            }

.column15pc {
    float: left;
    width: Calc(15% - 20px);
    min-width: 100px;
    margin: 10px;
}

.column20pc {
    float: left;
    width: Calc(20% - 20px);
    min-width: 100px;
    margin: 10px;
}

.homePageTable {
    float: left;
    width: 20%;
    min-width: 275px;
}

@media screen and (prefers-color-scheme: light) {

    .homePageTable table {
        font-family: Akkurat-Pro-Regular, sans-serif;
        color: Black;
        background-color: White;
        border: solid 1px #d5d5d5;
        width: Calc(100% - 20px);
        margin: 10px;
        border-collapse: collapse;
    }
}

@media screen and (prefers-color-scheme: dark) {

    .homePageTable table {
        font-family: Akkurat-Pro-Regular, sans-serif;
        color: #fff;
        background-color: #202020;
        border: solid 1px #191919;
        width: Calc(100% - 20px);
        margin: 10px;
        border-collapse: collapse;
    }
}

.homePageTable table tr {
    vertical-align: top;
}

@media screen and (prefers-color-scheme: light) {

    .homePageTable table tr:nth-child(even) {
        background-color: whitesmoke;
    }
}

.homePageTable table td {
    padding: 3px;
}

.homePageTable table th {
    padding: 3px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    font-weight: normal;
}

.homePageTile {
    float: left;
    width: 20%;
    min-width: 150px;
}

    .homePageTile img {
        transition: background 0.5s, transform 0.5s ease-out, fill 0.5s;
    }

        .homePageTile img:hover {
            transform: scale(1.1);
            transition: background 0.5s, transform 0.5s ease-out, fill 0.5s;
        }

.column25pc {
    float: left;
    width: Calc(25% - 10px);
    min-width: 100px;
    margin: 5px;
}

.column30pc {
    float: left;
    width: Calc(30% - 10px);
    min-width: 100px;
    margin: 5px;
}

.column33pc {
    float: left;
    width: Calc(33% - 20px);
    min-width: 280px;
    margin: 10px;
}

.column35pc {
    float: left;
    width: Calc(35% - 20px);
    min-width: 100px;
    margin: 10px;
}

.column40pc {
    float: left;
    width: Calc(40% - 20px);
    min-width: 125px;
    margin: 10px;
}

.column50pc {
    float: left;
    width: Calc(50% - 20px);
    min-width: 150px;
    margin: 10px;
}

.column85pc {
    float: left;
    width: Calc(85% - 20px);
    min-width: 200px;
    margin: 10px;
}

.column50pc_400min_100pcHeight {
    float: left;
    width: Calc(50% - 22px);
    height: Calc(100% - 22px);
    min-width: 400px;
    margin: 10px;
    border: solid 1px #d5d5d5;
}

.box600x400 {
    float: left;
    width: Calc(100% - 22px);
    max-width: 600px;
    height: 400px;
    margin: 10px;
    border: solid 1px #d5d5d5;
}

.column60pc {
    float: left;
    width: Calc(60% - 20px);
    min-width: 200px;
    margin: 10px;
}

.column65pc {
    float: left;
    width: Calc(65% - 20px);
    min-width: 200px;
    margin: 10px;
}

.column75pc {
    float: left;
    width: Calc(75% - 20px);
    min-width: 200px;
    margin: 10px;
}

.confidential {
    color: white;
}

    .confidential a {
        color: white;
    }

.onhold {
    color: #888888;
}

    .onhold a {
        color: #888888;
    }

.watermark {
    color: lightgray;
}

#site-logo {
    font-family: Akkurat-Pro-Bold, sans-serif;
    font-weight: bold;
    font-size: 20px;
    color: #fff;
    text-align: right;
    width: 100px;
    position: relative;
    top: -7px;
}

#mnuUser {
    display: inline-block;
}

#mobile-menu {
    display: none;
}

.colon {
    font-family: Georgia, serif;
    color: #ff6a13;
}

.blackColon {
    font-family: Georgia, serif;
    color: #000;
}

h1,
.largeHeading {
    font-family: Akkurat-Pro-Bold, sans-serif;
    font-weight: bold;
    font-size: 20px;
}

.right {
    text-align: right;
}

@media screen and (prefers-color-scheme: light) {

    .dialer {
        background-image: url('../images/svg/phone.svg');
        background-repeat: no-repeat;
        background-position: left top;
        display: inline-block;
        width: 16px;
        height: 16px;
    }

    .mailer {
        background-image: url('../images/svg/send-email-envelope.svg');
        background-repeat: no-repeat;
        background-position: left top;
        display: inline-block;
        width: 16px;
        height: 16px;
    }

    .web {
        background-image: url('../images/svg/network-1.svg');
        background-repeat: no-repeat;
        background-position: left top;
        display: inline-block;
        width: 16px;
        height: 16px;
    }
}

@media screen and (prefers-color-scheme: dark) {

    .dialer {
        background-image: url('../images/svg/phone_light.svg');
        background-repeat: no-repeat;
        background-position: left top;
        display: inline-block;
        width: 16px;
        height: 16px;
    }

    .mailer {
        background-image: url('../images/svg/send-email-envelope_light.svg');
        background-repeat: no-repeat;
        background-position: left top;
        display: inline-block;
        width: 16px;
        height: 16px;
    }

    .web {
        background-image: url('../images/svg/network-1_light.svg');
        background-repeat: no-repeat;
        background-position: left top;
        display: inline-block;
        width: 16px;
        height: 16px;
    }
}

@media screen and (prefers-color-scheme: light) {

    .LinkedIn {
        background-image: url('../images/svg/professional-network-linkedin.svg');
        background-repeat: no-repeat;
        background-position: left top;
        display: inline-block;
        width: 16px;
        height: 16px;
    }
}

@media screen and (prefers-color-scheme: dark) {

    .LinkedIn {
        background-image: url('../images/svg/professional-network-linkedin_light.svg');
        background-repeat: no-repeat;
        background-position: left top;
        display: inline-block;
        width: 16px;
        height: 16px;
    }
}

@media screen and (prefers-color-scheme: light) {
    .Tab {
        position: absolute;
        right: 0px;
        bottom: 0px;
        left: 0px;
        top: 0px;
        background-color: #fff;
    }

        .Tab svg {
            width: 32px;
            height: 24px;
            fill: #000;
            position: relative;
            top: 4px;
            left: 0px;
        }

        .Tab #RAGraphContainer svg, .Tab #ResGraphContainer svg, .Tab #ConGraphContainer svg {
            width: inherit;
            height: inherit;
            fill: none;
        }
}

@media screen and (prefers-color-scheme: dark) {
    .Tab {
        position: absolute;
        right: 0px;
        bottom: 0px;
        left: 0px;
        top: 0px;
        background-color: #202020;
    }

        .Tab svg {
            width: 32px;
            height: 24px;
            fill: #cfcfcf;
            position: relative;
            top: 4px;
            left: 0px;
        }

        .Tab #RAGraphContainer svg, .Tab #ResGraphContainer svg, .Tab #ConGraphContainer svg {
            width: inherit;
            height: inherit;
            fill: none;
        }
}

.Tab .ajax__tab_header_verticalleft .ajax__tab {
    float: none;
}

@media screen and (prefers-color-scheme: light) {
    .Tab .ajax__tab_header_verticalleft {
        background-size: 0px;
        color: #000;
        font-size: 14px;
        padding-top: 40px;
    }
}

@media screen and (prefers-color-scheme: dark) {
    .Tab .ajax__tab_header_verticalleft {
        background-size: 0px;
        color: #cfcfcf;
        font-size: 14px;
        padding-top: 40px;
    }
}

.Tab .ajax__tab_header_verticalleft .ajax__tab_outer {
    background-size: 0px;
    padding-right: 0px;
    margin-right: 0px;
}

.Tab .ajax__tab_header_verticalleft .ajax__tab_inner {
    background-size: 0px;
    color: #000;
}

.Tab .ajax__tab_header_verticalleft .ajax__tab_tab {
    background-size: 0px;
    height: 28px !important;
    margin-left: 20px;
    border-bottom: solid 1px #cfcfcf;
    width: 200px;
    text-align: left;
    padding-left: 10px;
}

    .Tab .ajax__tab_header_verticalleft .ajax__tab_tab img {
        position: relative;
        top: 6px;
        margin-right: 5px;
        width: 24px;
        height: 24px;
    }

.Tab .ajax__tab_header_verticalleft .ajax__tab_hover .ajax__tab_outer {
    color: #000000;
    padding-right: 0px;
}

.Tab .ajax__tab_header_verticalleft .ajax__tab_hover .ajax__tab_inner {
    color: #000000;
    font-weight: bold;
}

.Tab .ajax__tab_header_verticalleft .ajax__tab_hover .ajax__tab_tab {
    height: 28px;
    background-color: #ff6a13;
    margin-left: 20px;
    padding-left: 10px;
}

.Tab .ajax__tab_header_verticalleft .ajax__tab_active:not(:first-child) {
}

.Tab .ajax__tab_header_verticalleft .ajax__tab_active .ajax__tab_outer {
    padding-right: 0px;
}

.Tab .ajax__tab_header_verticalleft .ajax__tab_active .ajax__tab_inner {
    color: #000;
    font-weight: bold;
    text-decoration: none;
}

@media screen and (prefers-color-scheme: light) {

    .Tab .ajax__tab_header_verticalleft .ajax__tab_active .ajax__tab_tab {
        padding-left: 10px;
        height: 28px !important;
        background-color: #ddf0ff;
        margin-left: 20px;
    }

    .Tab .ajax__tab_body_verticalleft {
        background-color: #fff;
        position: absolute;
        left: 201px;
        top: 0px;
        right: 0px;
        bottom: 0px;
        padding: 7px;
        overflow: auto;
        border-left: solid 2px #bbbbbb;
    }
}

@media screen and (prefers-color-scheme: dark) {

    .Tab .ajax__tab_header_verticalleft .ajax__tab_active .ajax__tab_tab {
        padding-left: 10px;
        height: 28px !important;
        background-color: #2d2d2d;
        margin-left: 20px;
    }

    .Tab .ajax__tab_body_verticalleft {
        background-color: #2b2b2b;
        position: absolute;
        left: 201px;
        top: 0px;
        right: 0px;
        bottom: 0px;
        padding: 7px;
        overflow: auto;
        border-left: solid 2px #191919;
    }
}

@media screen and (prefers-color-scheme: light) {

    .Tab2 {
        position: absolute;
        right: 0px;
        bottom: 0px;
        left: 0px;
        top: 0px;
        background-color: #fff;
    }

        .Tab2 svg {
            width: 24px;
            height: 24px;
            fill: #000;
            position: relative;
            top: 0px;
            left: 0px;
        }

        .Tab2 #RAGraphContainer svg, .Tab2 #ResGraphContainer svg, .Tab2 #ConGraphContainer svg {
            width: inherit;
            height: inherit;
            fill: none;
        }
}

@media screen and (prefers-color-scheme: dark) {

    .Tab2 {
        position: absolute;
        right: 0px;
        bottom: 0px;
        left: 0px;
        top: 0px;
        background-color: #202020;
    }

        .Tab2 svg {
            width: 24px;
            height: 24px;
            fill: #cfcfcf;
            position: relative;
            top: 0px;
            left: 0px;
        }


        .Tab2 #RAGraphContainer svg, .Tab2 #ResGraphContainer svg, .Tab2 #ConGraphContainer svg {
            width: inherit;
            height: inherit;
            fill: none;
        }
}

.Tab2 .ajax__tab_header_verticalleft .ajax__tab {
    float: none;
}

@media screen and (prefers-color-scheme: light) {

    .Tab2 .ajax__tab_header_verticalleft {
        background-size: 0px;
        color: #000;
        font-size: 14px;
        padding-top: 40px;
    }

        .Tab2 .ajax__tab_header_verticalleft svg {
            width: 32px;
            height: 64px;
            fill: #000;
            position: relative;
            top: -12px;
            left: -4px;
        }
}

@media screen and (prefers-color-scheme: dark) {

    .Tab2 .ajax__tab_header_verticalleft {
        background-size: 0px;
        color: #cfcfcf;
        font-size: 14px;
        padding-top: 40px;
    }

        .Tab2 .ajax__tab_header_verticalleft svg {
            width: 32px;
            height: 64px;
            fill: #cfcfcf;
            position: relative;
            top: -12px;
            left: -4px;
        }
}

.Tab2 .ajax__tab_header_verticalleft .ajax__tab_outer {
    background-size: 0px;
    padding-right: 0px;
    margin-right: 0px;
}

.Tab2 .ajax__tab_header_verticalleft .ajax__tab_inner {
    background-size: 0px;
    color: #000;
}

.Tab2 .ajax__tab_header_verticalleft .ajax__tab_tab {
    background-size: 0px;
    height: 36px !important;
    line-height: 36px !important;
    margin-left: 0px;
    border-bottom: solid 1px #cccccc;
    width: 33px;
    text-align: left;
    padding-left: 10px;
}

    .Tab2 .ajax__tab_header_verticalleft .ajax__tab_tab img {
        position: relative;
        top: 6px;
        left: -3px;
        width: 24px;
        height: 24px;
    }

    .Tab2 .ajax__tab_header_verticalleft .ajax__tab_tab span {
        display: none;
    }

.Tab2 .ajax__tab_header_verticalleft .ajax__tab_hover .ajax__tab_outer {
    color: #000000;
    padding-right: 0px;
}

.Tab2 .ajax__tab_header_verticalleft .ajax__tab_hover .ajax__tab_inner {
    color: #000000;
    font-weight: bold;
}

.Tab2 .ajax__tab_header_verticalleft .ajax__tab_hover .ajax__tab_tab {
    height: 36px;
    background-color: #ff6a13;
    margin-left: 0px;
    padding-left: 10px;
}

.Tab2 .ajax__tab_header_verticalleft .ajax__tab_active:not(:first-child) {
}

.Tab2 .ajax__tab_header_verticalleft .ajax__tab_active .ajax__tab_outer {
    padding-right: 0px;
}

.Tab2 .ajax__tab_header_verticalleft .ajax__tab_active .ajax__tab_inner {
    color: #000;
    font-weight: bold;
    text-decoration: none;
}

@media screen and (prefers-color-scheme: light) {

    .Tab2 .ajax__tab_header_verticalleft .ajax__tab_active .ajax__tab_tab {
        padding-left: 10px;
        height: 36px !important;
        background-color: #ddf0ff;
        margin-left: 0px;
    }

    .Tab2 .ajax__tab_body_verticalleft {
        background-color: #fff;
        position: absolute;
        left: 36px;
        top: 0px;
        right: 0px;
        bottom: 0px;
        padding: 7px;
        overflow: auto;
        border-left: solid 2px #bbbbbb;
    }
}

@media screen and (prefers-color-scheme: dark) {

    .Tab2 .ajax__tab_header_verticalleft .ajax__tab_active .ajax__tab_tab {
        padding-left: 10px;
        height: 36px !important;
        background-color: #2d2d2d;
        margin-left: 0px;
    }

    .Tab2 .ajax__tab_body_verticalleft {
        background-color: #2b2b2b;
        position: absolute;
        left: 36px;
        top: 0px;
        right: 0px;
        bottom: 0px;
        padding: 7px;
        overflow: auto;
        border-left: solid 2px #191919;
    }
}



@media screen and (prefers-color-scheme: light) {

    .Tab3 {
        position: absolute;
        right: 0px;
        bottom: 0px;
        left: 0px;
        top: 0px;
        background-color: #fff;
    }

        .Tab3 svg {
            width: 24px;
            height: 24px;
            fill: #000;
            position: relative;
            top: 0px;
            left: 0px;
        }

        .Tab3 #RAGraphContainer svg, .Tab3 #ResGraphContainer svg, .Tab3 #ConGraphContainer svg {
            width: inherit;
            height: inherit;
            fill: none;
        }
}

@media screen and (prefers-color-scheme: dark) {

    .Tab3 {
        position: absolute;
        right: 0px;
        bottom: 0px;
        left: 0px;
        top: 0px;
        background-color: #202020;
    }

        .Tab3 svg {
            width: 24px;
            height: 24px;
            fill: #cfcfcf;
            position: relative;
            top: 0px;
            left: 0px;
        }


        .Tab3 #RAGraphContainer svg, .Tab3 #ResGraphContainer svg, .Tab3 #ConGraphContainer svg {
            width: inherit;
            height: inherit;
            fill: none;
        }
}

.Tab3 .ajax__tab_header_verticalleft .ajax__tab {
    float: none;
}

@media screen and (prefers-color-scheme: light) {

    .Tab3 .ajax__tab_header_verticalleft {
        background-size: 0px;
        color: #000;
        font-size: 14px;
        padding-top: 40px;
    }

        .Tab3 .ajax__tab_header_verticalleft svg {
            width: 32px;
            height: 64px;
            fill: #000;
            position: relative;
            top: -12px;
            left: -4px;
        }
}

@media screen and (prefers-color-scheme: dark) {

    .Tab3 .ajax__tab_header_verticalleft {
        background-size: 0px;
        color: #cfcfcf;
        font-size: 14px;
        padding-top: 40px;
    }

        .Tab3 .ajax__tab_header_verticalleft svg {
            width: 32px;
            height: 64px;
            fill: #cfcfcf;
            position: relative;
            top: -12px;
            left: -4px;
        }
}

.Tab3 .ajax__tab_header_verticalleft .ajax__tab_outer {
    background-size: 0px;
    padding-right: 0px;
    margin-right: 0px;
}

.Tab3 .ajax__tab_header_verticalleft .ajax__tab_inner {
    background-size: 0px;
    color: #000;
}

.Tab3 .ajax__tab_header_verticalleft .ajax__tab_tab {
    background-size: 0px;
    height: 36px !important;
    line-height: 36px !important;
    margin-left: 0px;
    border-bottom: solid 1px #cccccc;
    width: 33px;
    text-align: left;
    padding-left: 10px;
}

    .Tab3 .ajax__tab_header_verticalleft .ajax__tab_tab img {
        position: relative;
        top: 6px;
        left: -3px;
        width: 24px;
        height: 24px;
    }

    .Tab3 .ajax__tab_header_verticalleft .ajax__tab_tab span {
        display: none;
    }

.Tab3 .ajax__tab_header_verticalleft .ajax__tab_hover .ajax__tab_outer {
    color: #000000;
    padding-right: 0px;
}

.Tab3 .ajax__tab_header_verticalleft .ajax__tab_hover .ajax__tab_inner {
    color: #000000;
    font-weight: bold;
}

.Tab3 .ajax__tab_header_verticalleft .ajax__tab_hover .ajax__tab_tab {
    height: 36px;
    background-color: #ff6a13;
    margin-left: 0px;
    padding-left: 10px;
}

.Tab3 .ajax__tab_header_verticalleft .ajax__tab_active:not(:first-child) {
}

.Tab3 .ajax__tab_header_verticalleft .ajax__tab_active .ajax__tab_outer {
    padding-right: 0px;
}

.Tab3 .ajax__tab_header_verticalleft .ajax__tab_active .ajax__tab_inner {
    color: #000;
    font-weight: bold;
    text-decoration: none;
}

@media screen and (prefers-color-scheme: light) {

    .Tab3 .ajax__tab_header_verticalleft .ajax__tab_active .ajax__tab_tab {
        padding-left: 10px;
        height: 36px !important;
        background-color: #ddf0ff;
        margin-left: 0px;
    }

    .Tab3 .ajax__tab_body_verticalleft {
        background-color: #fff;
        position: absolute;
        left: 36px;
        top: 0px;
        right: 0px;
        bottom: 0px;
        padding: 7px;
        overflow: auto;
        border-left: solid 2px #bbbbbb;
    }
}

@media screen and (prefers-color-scheme: dark) {

    .Tab3 .ajax__tab_header_verticalleft .ajax__tab_active .ajax__tab_tab {
        padding-left: 10px;
        height: 36px !important;
        background-color: #2d2d2d;
        margin-left: 0px;
    }

    .Tab3 .ajax__tab_body_verticalleft {
        background-color: #2b2b2b;
        position: absolute;
        left: 36px;
        top: 0px;
        right: 0px;
        bottom: 0px;
        padding: 7px;
        overflow: auto;
        border-left: solid 2px #191919;
    }
}

.NodeDefault {
    padding: 0px 3px 0px 3px;
    border-radius: 5px;
}

    .NodeDefault a {
        text-decoration: none;
    }

    .NodeDefault span {
        color: #fff;
    }

.NodeDefault2 {
    padding: 0px 3px 0px 3px;
    border-radius: 5px;
}

    .NodeDefault2 a {
        text-decoration: none;
    }

    .NodeDefault2 span {
        color: #000;
    }

.NodeSelected {
    background-color: #ff6a13;
}

.NodeHover {
    background-color: #9ecacb;
}

.modalBackground {
    background-color: Gray;
    filter: alpha(opacity=50);
    opacity: 0.5;
    z-index: 6000 !important;
}

.modalPopup {
    background-color: #ffffff;
    border-width: 1px;
    border-style: solid;
    border-color: Gray;
    z-index: 6001 !important;
}

td {
    padding: 1px;
}

@media screen and (prefers-color-scheme: light) {

    .myGridView {
        font-family: Akkurat-Pro-Regular, sans-serif;
        color: Black;
        background-color: White;
        border-collapse: collapse;
        border: solid 1px #d5d5d5;
        width: Calc(100% - 20px);
        position: relative;
    }

        .myGridView thead {
            outline: 1px solid #d5d5d5;
            border: none;
            outline-offset: -1px;
        }

        .myGridView tr {
            vertical-align: top;
            min-height: 25px;
        }

            .myGridView tr:nth-child(even) {
                background-color: whitesmoke;
            }

        .myGridView td {
            padding: 6px;
            word-wrap: break-word;
            border-right: solid 1px #d5d5d5;
        }

            .myGridView td svg {
                height: 16px;
                width: 16px;
            }

        .myGridView th {
            padding: 3px;
            font-weight: normal;
            background-color: #fff;
            position: -webkit-sticky; /* Safari */
            position: sticky;
            top: 0;
            border-right: solid 1px #d5d5d5;
            background-clip: padding-box;
        }

            .myGridView th:before {
                content: '';
                position: absolute;
                left: 0;
                top: -1px;
                width: 100%;
                border-top: 1px solid #d5d5d5;
            }

            .myGridView th:after {
                content: '';
                position: absolute;
                left: 0;
                bottom: -1px;
                width: 100%;
                border-bottom: 1px solid #d5d5d5;
            }

            .myGridView th svg {
                height: 16px;
                width: 16px;
            }
}

@media screen and (prefers-color-scheme: dark) {

    .myGridView {
        font-family: Akkurat-Pro-Regular, sans-serif;
        color: #cfcfcf;
        background-color: #2b2b2b;
        border-collapse: collapse;
        border: solid 1px #191919;
        width: Calc(100% - 20px);
        position: relative;
    }

        .myGridView thead {
            outline: 1px solid #2b2b2b;
            border: none;
            outline-offset: -1px;
        }

        .myGridView tr {
            vertical-align: top;
            min-height: 25px;
        }

            .myGridView tr:nth-child(even) {
                background-color: #343434;
            }

        .myGridView td {
            padding: 6px;
            word-wrap: break-word;
            border-right: solid 1px #191919;
        }

            .myGridView td svg {
                height: 16px;
                width: 16px;
            }

        .myGridView th {
            padding: 3px;
            font-weight: normal;
            background-color: #393939;
            position: -webkit-sticky; /* Safari */
            position: sticky;
            top: 0;
            border-right: solid 1px #191919;
            background-clip: padding-box;
        }

            .myGridView th:before {
                content: '';
                position: absolute;
                left: 0;
                top: -1px;
                width: 100%;
                border-top: 1px solid #191919;
            }

            .myGridView th:after {
                content: '';
                position: absolute;
                left: 0;
                bottom: -1px;
                width: 100%;
                border-bottom: 1px solid #191919;
            }

            .myGridView th svg {
                height: 16px;
                width: 16px;
            }
}

.dxgv svg {
    height: 16px;
    width: 16px;
}

.gridrow_hover td {
    cursor: pointer;
    background-color: #ff6a13;
}

@media screen and (prefers-color-scheme: light) {

    .myTableHeader {
        text-align: left;
        background-color: #fff;
        color: #000;
        height: 25px;
        line-height: 25px;
        border-bottom: solid 1px #d5d5d5;
    }

        .myTableHeader a:link,
        .myTableHeader a:visited,
        .myTableHeader a:active {
            text-align: left;
            text-decoration: none;
        }

        .myTableHeader a:hover {
            text-align: left;
            text-decoration: underline;
        }
}

@media screen and (prefers-color-scheme: dark) {

    .myTableHeader {
        text-align: left;
        background-color: #2d2d2d;
        color: #fff;
        height: 25px;
        line-height: 25px;
        border-bottom: solid 1px #191919;
    }

        .myTableHeader a:link,
        .myTableHeader a:visited,
        .myTableHeader a:active {
            color: #fff;
            text-align: left;
            text-decoration: none;
        }

        .myTableHeader a:hover {
            text-align: left;
            text-decoration: underline;
        }
}

.myTableFooter {
    height: 12px;
}

.myExpTableFooter {
    font-weight: bold;
    background-color: orange;
    border-top: #d5d5d5 1px solid;
    text-align: left;
}

.printButton {
    display: inline-block;
}

.entryStat {
    border: solid 0px black;
    color: white;
    background-color: Silver;
    width: 100%;
    height: 15px;
}

.hiddenColumn {
    display: none;
}

.star,
.emptystar,
.waitingstar {
    background-image: url(/images/emptystar.png);
    width: 16px;
    height: 16px;
}

.filledstar {
    background-image: url(/images/filledstar.png);
    width: 16px;
    height: 16px;
}

.tiny {
    font-size: 6pt;
}

.verySmallBold {
    font-size: 7pt;
    font-weight: bold;
}

.candPlaced {
    color: green;
    font-weight: bold;
}

    a.candPlaced, .candPlaced a:link {
        color: green;
        font-weight: bold;
        text-decoration: none;
    }

        a.candPlaced:hover, .candPlaced a:hover {
            color: green;
            font-weight: bold;
            text-decoration: underline;
        }

    .candPlaced a:visited {
        color: green;
        font-weight: bold;
        text-decoration: none;
    }

.placedByCP {
    color: #B18904;
    font-weight: bold;
}

    a.placedByCP, .placedByCP a:link {
        color: #B18904;
        font-weight: bold;
        text-decoration: none;
    }

        a.placedByCP:hover, .placedByCP a:hover {
            color: #B18904;
            font-weight: bold;
            text-decoration: underline;
        }

    .placedByCP a:visited {
        color: #B18904;
        font-weight: bold;
        text-decoration: none;
    }

.candInternal {
    color: Orange;
    font-weight: bold;
}

    a.candInternal, .candInternal a:link {
        color: Orange;
        font-weight: bold;
        text-decoration: none;
    }

        a.candInternal:hover, .candInternal a:hover {
            color: Orange;
            font-weight: bold;
            text-decoration: underline;
        }

    .candInternal a:visited {
        color: Orange;
        font-weight: bold;
        text-decoration: none;
    }

.lGrey {
    color: #808080;
}

a.lGrey {
    color: #808080;
    text-decoration: none;
}


    a.lGrey:hover {
        color: #808080;
        text-decoration: underline;
    }

.lGrey a:link {
    color: #808080;
    text-decoration: none;
}

.lGrey a:hover {
    color: #808080;
    text-decoration: underline;
}

.lGrey a:visited {
    color: #808080;
    text-decoration: none;
}

.no {
    font-weight: normal;
    color: #ff0033;
}

    .no a:link {
        color: #ff0033;
        text-align: left;
        text-decoration: none;
        font-weight: normal;
    }

    .no a:hover {
        color: #ff0033;
        text-align: left;
        text-decoration: underline;
        font-weight: normal;
    }

    .no a:visited {
        color: #ff0033;
        text-align: left;
        text-decoration: none;
        font-weight: normal;
    }


a.no {
    font-weight: normal;
    color: #ff0033;
    text-decoration: none;
}

    a.no:hover {
        font-weight: normal;
        color: #ff0033;
        text-decoration: underline;
    }


.kam {
    font-weight: normal;
    color: #3300ff;
}


    .kam a:link {
        color: #3300ff;
        text-align: left;
        text-decoration: none;
        font-weight: normal;
    }

    .kam a:hover {
        color: #3300ff;
        text-align: left;
        text-decoration: underline;
        font-weight: normal;
    }

    .kam a:visited {
        color: #3300ff;
        text-align: left;
        text-decoration: none;
        font-weight: normal;
    }


a.kam {
    font-weight: normal;
    color: #3300ff;
    text-decoration: none;
}

    a.kam:hover {
        font-weight: normal;
        color: #3300ff;
        text-decoration: underline;
    }

.yes {
    color: #000000;
}

.warning {
    font-weight: normal;
    color: #ff6a13;
}

.dPurple {
    color: purple;
    font-weight: bold;
}

    a.dPurple, .dPurple a:link {
        color: purple;
        font-weight: bold;
        text-decoration: none;
    }

        a.dPurple:hover, .dPurple a:hover {
            color: purple;
            font-weight: bold;
            text-decoration: underline;
        }

    .dPurple a:visited {
        color: purple;
        font-weight: bold;
        text-decoration: none;
    }

.orange {
    color: #ff6633;
}

.white {
    color: White;
}

.red {
    color: #ff0000;
}

.yellow {
    color: yellow;
}

.green {
    color: green;
}

.blue {
    color: blue;
}

.white {
    color: white;
}

.crossed {
    text-decoration: line-through;
}

.assProgColour4 {
    line-height: 17px;
    background-color: #FF0000 !important;
    color: White;
    font-weight: normal;
    text-align: center;
    border-top: solid 1px #FF0000;
    border-left: solid 1px #FF0000;
    border-bottom: solid 1px #AA0000;
    border-right: solid 1px #AA0000;
    width: 50px;
}

.assProgColour3 {
    line-height: 17px;
    background-color: #FF9900 !important;
    color: White;
    font-weight: normal;
    text-align: center;
    border-top: solid 1px #FF9900;
    border-left: solid 1px #FF9900;
    border-bottom: solid 1px #aa4400;
    border-right: solid 1px #aa4400;
    width: 50px;
}

.assProgColour2 {
    line-height: 17px;
    background-color: #FFFF00 !important;
    color: Black;
    font-weight: normal;
    text-align: center;
    border-top: solid 1px #FFFF00;
    border-left: solid 1px #FFFF00;
    border-bottom: solid 1px #AAAA00;
    border-right: solid 1px #AAAA00;
    width: 50px;
}

.assProgColour1 {
    line-height: 17px;
    background-color: #00ff00 !important;
    color: Black;
    font-weight: normal;
    text-align: center;
    border-top: solid 1px #00ff00;
    border-left: solid 1px #00ff00;
    border-bottom: solid 1px #00aa00;
    border-right: solid 1px #00aa00;
    width: 50px;
}

.assProgColour0 {
    line-height: 17px;
    background-color: White !important;
    color: Black;
    font-weight: normal;
    text-align: center;
    width: 50px;
}

.assProgColourDarkRed {
    background-color: darkred !important;
    line-height: 17px;
    color: Black;
    font-weight: normal;
    text-align: center;
    width: 50px;
}

.assProgColourRed {
    background-color: red !important;
    line-height: 17px;
    color: Black;
    font-weight: normal;
    text-align: center;
    width: 50px;
}

.assProgColourOrange {
    background-color: orange !important;
    line-height: 17px;
    color: Black;
    font-weight: normal;
    text-align: center;
    width: 50px;
}

.assProgColourDarkYellow {
    background-color: darkgoldenrod !important;
    line-height: 17px;
    color: Black;
    font-weight: normal;
    text-align: center;
    width: 50px;
}

.assProgColourYellow {
    background-color: yellow !important;
    line-height: 17px;
    color: Black;
    font-weight: normal;
    text-align: center;
    width: 50px;
}

.assProgColourDarkGreen {
    background-color: darkgreen !important;
    line-height: 17px;
    color: Black;
    font-weight: normal;
    text-align: center;
    width: 50px;
}

.assProgColourGreen {
    background-color: green !important;
    line-height: 17px;
    color: Black;
    font-weight: normal;
    text-align: center;
    width: 50px;
}

.highlighted {
    background-color: yellow;
}

    .highlighted td {
        background-color: yellow;
    }


#tblWorkAllocation td {
    text-align: center;
}

@media screen and (max-width: 640px) {

    body {
        font-size: 12px;
    }

    input, select, textarea {
        font-size: 12px;
    }

    #mobile-menu {
        display: inline-block;
    }

    #mnuUser,
    #ddlDefaultTab {
        display: none;
    }

    #site-logo {
        text-align: right;
    }

    #left-search-bar {
        display: none;
    }

    #left-content {
        left: 0px;
        display: none;
        width: 100%;
    }

    .header-left img,
    .header-left svg {
        display: none;
    }

    #assignmentHeader,
    #peopHeader {
        display: inline-block !important;
        width: 60% !important;
        height: 40px;
        overflow: auto;
        line-height: 20px;
        white-space: pre-wrap;
        white-space: -moz-pre-wrap;
        white-space: -pre-wrap;
        white-space: -o-pre-wrap;
        word-wrap: break-word;
    }

    #tblheader {
        display: inline-block !important;
        width: 50% !important;
        height: 40px;
        overflow: auto;
        line-height: 20px;
        white-space: pre-wrap;
        white-space: -moz-pre-wrap;
        white-space: -pre-wrap;
        white-space: -o-pre-wrap;
        word-wrap: break-word;
    }

    #tcPersonSearch_TabPanel1_cboPeopName {
        width: Calc(100% - 60px) !important;
    }

    #cboCompName,
    #cboListName {
        width: Calc(100% - 15px) !important;
    }

    #TabContainer1_TabPanel1_cboAssName {
        width: Calc(100% - 80px) !important;
    }

    #right-content {
        left: 0px;
        z-index: 0;
    }

    .innerTabContainerHeaderObj {
        display: none;
    }

    .column {
        width: Calc(100% - 20px);
    }

        .column table tr td:last-child {
            text-align: right;
        }

    .column15pc,
    .column20pc,
    .column25pc,
    .column30pc,
    .column33pc,
    .column35pc,
    .column40pc,
    .column50pc,
    .column60pc,
    .column65pc,
    .column75pc,
    .column85pc {
        width: Calc(100% - 20px);
    }

    .Tab .ajax__tab_header_verticalleft {
        font-size: 12px;
    }

        .Tab .ajax__tab_header_verticalleft .ajax__tab_tab {
            text-align: left;
            margin-left: 0px;
            padding-left: 5px;
        }

            .Tab .ajax__tab_header_verticalleft .ajax__tab_tab span {
                display: none;
            }

        .Tab .ajax__tab_header_verticalleft .ajax__tab_hover .ajax__tab_tab {
            margin-left: 0px;
            padding-left: 5px;
        }

        .Tab .ajax__tab_header_verticalleft .ajax__tab_active .ajax__tab_tab {
            margin-left: 0px;
            padding-left: 5px;
        }

    .Tab .ajax__tab_tab {
        width: 33px;
    }

    .Tab .ajax__tab_header .ajax__tab_tab {
        width: 33px;
    }

    .Tab .ajax__tab_body_verticalleft {
        left: 36px;
    }

    .hideOnMobile {
        display: none;
    }

    .searchType,
    #aDuplicate,
    input.quickFindButton,
    input.copyButton,
    input.getlinkButton,
    input.librariesButton,
    input.aiSummaryButton,
    input.calendarButton,
    .printButton,
    #btnFindPersonByPhone,
    #btnRR,
    #compSearchIcon,
    #markSearchIcon,
    #TabContainer1_tpDocuments_lblRelativePath,
    #btnFindDocument {
        display: none;
    }

    .dialer {
        background-image: url('../images/svg/phone.svg');
        background-repeat: no-repeat;
        background-position: left top;
        display: inline-block;
        width: 32px;
        height: 32px;
    }

    .mailer {
        background-image: url('../images/svg/send-email-envelope.svg');
        background-repeat: no-repeat;
        background-position: left top;
        display: inline-block;
        width: 32px;
        height: 32px;
    }

    .web {
        background-image: url('../images/svg/network-1.svg');
        background-repeat: no-repeat;
        background-position: left top;
        display: inline-block;
        width: 32px;
        height: 32px;
    }

    a.helpButton {
        display: none;
    }

    input.mapButton {
        display: none;
    }

    #btnShowHideMenu,
    #addInsDiv,
    #YammerSizeControl,
    #uploadBox,
    .box600x400,
    .column50pc_400min_100pcHeight,
    .mobileHide {
        display: none;
    }

    .scrolling-list-upload-footer {
        bottom: 5px;
    }

    .upload-footer {
        display: none;
    }
}

.low {
    background-color: #2dc937
}

.med {
    background-color: #e7b416
}

.high {
    background-color: #cc3232
}

.inactive {
    background-color: #808080
}

.incoming {
    background-color: whitesmoke
}

.plus4 {
    background-color: #cc3232
}

.plus35 {
    background-color: #c75219
}

.plus3 {
    background-color: #bb6d00
}

.plus25 {
    background-color: #ab8500
}

.plus2 {
    background-color: #969910
}

.plus15 {
    background-color: #7eab37
}

.plus1 {
    background-color: #5fbb5d
}

.plus05 {
    background-color: #4bc24c
}

.plus0 {
    background-color: #2dc937
}

#capacityReportContainer .dx-datagrid .dx-row-lines > td {
    border-bottom: 1px solid #e0e0e0;
    border-left: 1px solid #e0e0e0;
}

.purple {
    background-color: purple
}

.tabContent {
    /*display: none;*/
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}

#RACapacitySelector,
#RACapacitySelector2,
#ResCapacitySelector,
#ResCapacitySelector2,
#ConCapacitySelector,
#ConCapacitySelector2 {
    overflow: hidden;
    float: left;
    display: inline;
    width: 49%;
    padding: 5% 0 5% 0;
}

#TabContainer1_TabPanel1_assSalaryExpected tr td:first-child {
    width: 10%;
    white-space: nowrap;
}

.tooltipContent {
    font-size: larger;
}


    .tooltipContent th,
    .tooltipContent td {
        padding: 5px;
        text-align: left;
    }

#CapacityGraphTooltip {
    border: 1px solid #ccc;
    position: absolute;
    padding: 10px;
    background-color: #fff;
    display: none;
    pointer-events: none;
}

/*
#userCapacitySelector {
    display: inline;
    width: 100%;
}

#capacityUserName {
    display: inline;
    padding-left: 1%;
}*/
/*
 * Legal Disclaimer
 *
 * These Fonts are licensed only for use on these domains and their subdomains:
 * www.coulterpartners.com
 *
 * It is illegal to download or use them on other websites.
 *
 * While the @font-face statements below may be modified by the client, this
 * disclaimer may not be removed.
 *
 * Lineto.com, 2015
 */
/*
 *
 * INSTRUCTIONS
 *
 * Copy the Legal Disclaimer and the @font-faces statements to your regular CSS file.
 * The fonts folder(s) should be placed relative to the regular CSS file.
 *
 * You can use either the complete or subsetted fonts:
 * If you don’t require the entire range of characters, you can use the smaller, subsetted webfonts instead.
 * See "Glyphs & Languages" for an overview of the characters in the *_subsetted.html file in the root directory of this package.
 *
 */
/* Complete */
@font-face {
    font-family: "Akkurat-Pro-Regular";
    src: url("/fonts/lineto-akkurat-pro-regular.eot");
    src: url("/fonts/lineto-akkurat-pro-regular.eot?#iefix") format("embedded-opentype"), url("/fonts/lineto-akkurat-pro-regular.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Akkurat-Pro-Bold";
    src: url("/fonts/lineto-akkurat-pro-bold.eot");
    src: url("/fonts/lineto-akkurat-pro-bold.eot?#iefix") format("embedded-opentype"), url("/fonts/lineto-akkurat-pro-bold.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Akkurat-Pro-Italic";
    src: url("/fonts/lineto-akkurat-pro-italic.eot");
    src: url("/fonts/lineto-akkurat-pro-italic.eot?#iefix") format("embedded-opentype"), url("/fonts/lineto-akkurat-pro-italic.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Akkurat-Pro-Lightitalic";
    src: url("/fonts/lineto-akkurat-pro-lightitalic.eot");
    src: url("/fonts/lineto-akkurat-pro-lightitalic.eot?#iefix") format("embedded-opentype"), url("/fonts/lineto-akkurat-pro-lightitalic.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Akkurat-Pro-Light";
    src: url("/fonts/lineto-akkurat-pro-light.eot");
    src: url("/fonts/lineto-akkurat-pro-light.eot?#iefix") format("embedded-opentype"), url("/fonts/lineto-akkurat-pro-light.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Akkurat-Pro-Bolditalic";
    src: url("/fonts/lineto-akkurat-pro-bolditalic.eot");
    src: url("/fonts/lineto-akkurat-pro-bolditalic.eot?#iefix") format("embedded-opentype"), url("/fonts/lineto-akkurat-pro-bolditalic.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}