:root {
    --logo-image: url(/images/PeopleForce_Logo_DarkBG.png);
    --border-color: #616161;
    --body-bg-color: #525260;
    --text-color: #fff;
    --panel-bg-color: #363640;
    --odd-row-bg-color: #353535;
    --popup-bg-color: #292929;
    --menu-bg: var(--body-bg-color);
    --menu-hover-text-color: var(--text-color);
    --menu-separator-color: #898989;
    /*FUI colors*/
    --red: #ff392b;
    --orange: #e76b00;;
    --yellow: #ebcd00;
    --olive: #d2e745;
    --green: #1ea92e;
    --teal: #3affff;
    --blue: #21b8ff;
    --violet: #745aff;
    --purple: #cf40ff;
    --pink: #ff5bd1;
    --brown: #b0620f;
    --gray: #c2c4c5;
    /*end of FUI colors*/
    /*a dark accent color doesn't match on a dark background */
    --accent-color: #7780ff;
}

.emphasis-box {
    background-color: #525260;
    box-shadow: 2px 2px 5px -1px #000;
}

.panel {
    box-shadow: none;
}

/*to have a shadow on the menu from the page*/
.layout-body .dx-drawer-content {
    box-shadow: none;
    border-left: 1px solid var(--border-color);
}


/*missing from DX fluent dark theme*/
.dx-gridbase-a11y-status-container {
    position: fixed;
    left: 0;
    top: 0;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: polygon(0 0);
    clip-path: polygon(0 0);
}