/*Section removed from sidebar.css*/

.headerBar {
    margin: -20px -20px 50px -20px;
    background: var(--oxidised-copper-dark) !important;
    padding: 5px 0px 0px 10px !important;
    height: 50px;
}

#pageTitle {
    /*display: none;*/
    /*margin-left: 4vw;*/
}

#pageTitle h4 {
    font-size: 1rem;
}

.logoHeader {
    width: var(--circle-height);
    height: var(--circle-height);
    background-color: var(--submenu-grey);
    position: absolute;
    top: 10px;
    left: 10px;
    border-radius: 50%;
    z-index: var(--layer-second);
}

.logoHeader img {
    width: var(--circle-height);
    height: var(--circle-height);
    object-fit: cover;
}

.userDetails {
    float: right;
    position: relative;
    top: 5px;
    right: 10px;
    z-index: var(--layer-third);
}

.userDetailsButton .fa-user-circle:before {
    color: #434343;
    font-size: xx-large;
    background-image: linear-gradient(#fff,#fff);
    background-repeat: no-repeat;
    background-size: 50% 75%;
    background-position: center;
}

.usr_name {
    clear: none;
    height: 30px;
    float: right;
    margin-right: 10px;
    margin-top: 6px;
}

.usr_initials {
    float: right;
    margin-right: 0px;
}

.usr_initials_inner {
    width: var(--circle-height);
    height: var(--circle-height);
}

.usr_nametag {
    color: var(--alternate-text);
}

#sidebar,
.sidebar-header {
    display: none;
    width: 0px;
}

#content {
    width: 100%;
    padding: 20px;
    min-height: 100vh;
    transition: all 0.3s;
    margin-left: 250px;
    margin-left: 0px; /* this should only be needed until the relevant sidebar.css is used */
}

/*custom menu.css*/
.menuBar {
    float: left;
    z-index: var(--layer-second);
}

.menuBar.rightSide {
    float:right;
}

#epicnav {
    position: absolute;
    top: 18px;
    left: 80px;
}

#epicnav > li:first-child {
    padding-left:40px;
}

ul#epicnav, #epicnav ul { /*remove the bullets from the dropdown ul as well*/
    margin: 0;
    padding: 3px 0px;
    list-style-type: none;
    height: 32px;
}

#epicnav li {
    /*width: 100px;*/ /*...and set the width*/
    padding-left:1vw;
    padding-right:1vw;
}

#epicnav li {
    float: left; /*float the li element so the menu's horizontal...*/
    color: var(--alternate-text);
}

#epicnav li a {
    display: block;
    line-height: 32px; /*needed to prevent loosing focus when scrolling down to dropdown*/
    text-align: center;
    text-decoration: none;
    border: none;
    color:inherit;
}

#epicnav li a:hover {
    color: var(--oxidised-copper-light); /* against a dark background (reference) so needs to be lighter */
}

/* second level - to be horizontal line below header between (and behind) circles */
#epicnav li:hover > ul {
    display: block; /*display the ul when the parent li is hovered*/    
    z-index: var(--layer-third);
}

#epicnav li>ul {
    display: none; /*hide the dropdown*/
    position: absolute; /*position it absolutely..*/
    left: 0; /*...align the left edge with the left edge of the parent li...*/
    top: 32px; /*...and 32px down from the top - 30px height + 2px for the border*/
    list-style-type: none;
    z-index: var(--layer-forth); /* make sure it opens behind the logo things */
    background-color: var(--submenu-grey); /*give the dropdown a different background colour*/
    width: 92vw;
    margin-left: -5px;
    padding-left: 12px;
}

#epicnav li ul li {
    float: left;
    position: relative; /*set position:relative as the start point for absolutely positioning the dropdown*/
}
    
#epicnav li ul a {
    color: var(--standard-text);
}

#epicnav li ul a:hover {
    color: var(--oxidised-copper); /* now against a light background so needs to be darker */
}

/* third level - this is to be vertical */

#epicnav li > ul > li > ul {
    display: none; /*hide the dropdown*/
    position: absolute; /*position it absolutely..*/
    left: 0; /*...align the left edge with the left edge of the parent li...*/
    top: 32px; /*...and 32px down from the top - 30px height + 2px for the border*/
    width: fit-content;
    padding: 0px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

#epicnav li > ul > li > ul > li {
    background-color: var(--submenu-grey); /*give the dropdown a different background colour*/
    clear: both;
    width:100%;
    text-align: left;
    padding-left:1vw;
    white-space:nowrap;
}

#epicnav li > ul > li > ul > li a {
    text-align: left;
}

#epicnav li > ul > li:hover > ul {
    display: block; /*display the ul when the parent li is hovered*/
    margin-top: -3px; /* shuffle up to remove some white space */
    z-index: var(--layer-third);
}

/* non regoin specific items */

/*.menuBar a.hasChildren:after {*/
.menuBar a:has(+ ul):after {
    display: inline-block;
    margin-left: 0.2em;
    font-family: var(--font-awesome-family);
    content: '\f107';
}

/*.menuBar a.hasChildren:hover:after {*/
.menuBar a:has(+ ul):hover:after {
    display: inline-block;
    margin-left: 0.2em;
    font-family: var(--font-awesome-family);
    content: '\f106';
}

/* right hand buttons */
.rightSideButtons li {
    float: right;
    clear:left;
    color: var(--alternate-text);
    list-style-type: none;
    display: inline-block;
    padding-right: 1vw;
    padding-top: 5px;
}

.rightSideButtons li:first-child {
    margin-right: 20px;
}

.rightSideButtons li a {
    color: var(--alternate-text);
}

.rightSideButtons li a:hover {
    color: var(--oxidised-copper-light);
}

#btn_helpme.active {
    color: var(--oxidised-copper-light);
}
/* important - non overridable styles */

a.external {
    color: var(--external-link) !important;
}

ul.activeSystem {
    display: block !important;
}

a.activeSystem, 
a.activeLink {
    font-weight: bold !important;
    text-decoration: underline !important;
}

.disallowedSystem {
    color: grey !important;
}

.menuBar a.activeSystem:after {
    display: inline-block;
    margin-left: 0.2em;
    font-family: var(--font-awesome-family);
    content: '\f106' !important;
}

#btn_hdr_quickFind {
    height: 30px;
    width: 30px;
    margin-top: -3px;
    padding: 0px;
}