/* MAIN MENU */

:root {
    --dark-mode-background-color: #434343;
    --dark-mode-card-background-color: #333333;
    --dark-mode-grey-color: #CCCCCC;
}

#header 
{
    overflow: hidden;
    min-height:50px;
    background-color:#4E4F51;
    padding:0px 10px;
    /* box-shadow: 2px 2px 3px rgba(0,0,0,.25); */
    z-index:999;
}
#header *
{
    vertical-align: middle;
}

/* Justify the left and right sides: on one line, they go to the far left and far right,
 * but if they take up 2 lines, they both hang left. */
#header
{
    text-align: justify;
    line-height: 0;
    vertical-align: top;
}
#header > *
{
    display: inline-block;
    line-height: 1.2;
    vertical-align: top;
}
#header:after
{
    content: '';
    display: inline-block;
    width: 100%;
    vertical-align: top;
}


#header .left 
{
    background-color:#4E4F51;
    white-space:nowrap;
    font-size:16px;
    margin-top:6px;
}
#header .left a.headerHomeLogoLink
{
    padding: 10px 0;
}
#header .right 
{
    text-align: right;
    white-space:nowrap;
    z-index:9996;
}
#header .right div.userInformation
{
}
#header .right div.userInformation div.info
{
    padding: 12px 4px;
    margin:6px 0;
    cursor: default;
}
#header .right div.statusIcons, #header .right div.statusIcons > *
{
    display: inline-block;
}
#header .right > form > div
{
    display: inline-block;
}
#header .menuContainer .menustrip .narrowMenuOnly, #header .narrowMenuOnly
{
    display:none;
}
#header #ajaxSpinner {
    display:none;
    position: absolute;
    right: 20px;
    top: 40px;
}
/*
#header .logo {
    height:26px;
    position:relative;
    top:-6px;
}
*/
#hheader div.info 
{
	font: 8pt sans-serif, "Tacomah", "Arial";
}
#header a, #header div.info 
{
    font-size: 12px;
    color:#DDD;
    text-decoration: none;
    font-weight:normal;
}
#header a:hover {
    color:#fff;
}
#buildNumber {
    color:#aaa;
    font-size:9px;
    position:absolute;
    margin:-10px 0 0 0px;
    font-weight:bold;
}
#header .menuContainer {
    display:inline-block;
}
#header .menustrip {
    display:inline-block;
    cursor:default;
    white-space:nowrap;
    font-size:12px;    
}
#header .menustrip > *
{
    display: inline-block;
}
#header .menuContainer .menuitem {
    display:inline-block;
    color:#DDD;
    text-align:center;
    padding:0 10px 0 10px;
}
#header .menuContainer .menuitem > img.more {
    display:none;
}
#header .menuContainer .menuitem:hover {
    color:#fff;
}
#header .menuContainer .menuitem:hover > .submenu {
    /*display:block;
    margin-top: 0;*/
}
#header .submenuitem:hover .submenu {
    /*display:block;
    margin-left: 50px;*/
}
#header .submenu {
    /*margin-top:6px;*/
    right: 30px;
    position:absolute;
    background-color:#4E4F51;
    text-align:left;
    min-width:80px;
    display:none;
    box-shadow: 2px 2px 3px rgba(0,0,0,.25);
    z-index:1000;
}
.submenuitem {
    padding: 10px 15px 5px 10px;
    color: #DDD;
    white-space: nowrap;
}
.submenuitem:hover {
    color:#fff;
}
.submenuitem .title {
    display:inline-block;   
    margin-left:4px;
    vertical-align:middle;
}
.submenuitem .more {
    float:right;
    padding-left:8px;
}

.liquidmenu
{
    display: none;
}

.headerQuickQuoteSearch.mobile {
    display:none;
}
#header .thumbnail
{
    display: inline-block;
}

div.statusIcons div.image
{
    margin:5px;
}
#header div.right div.thumbnail.small img
{
    padding-top: 3px;
}

/* Begin Dark Mode*/

body.darkMode #header{
    background-color: var(--dark-mode-card-background-color);
}

body.darkMode #header .menuContainer .menuitem{
    background-color: var(--dark-mode-card-background-color);
}

body.darkMode #header .left a.headerHomeLogoLink, body.darkMode #header .left{
    background-color: var(--dark-mode-card-background-color);
}

/*End Dark Mode*/