:root {
    --HorizontalMenuMain: var(--df-MainLight);
    --HorizontalMenuSelected: var(--df-MainDark);
    --VerticalMenuSelected: #ffffff;
    --VerticalSubMenuTopBottomBorderColor: #241f1f27;
    --VerticalSubMenuColor: #F0F0F0;
    --DeepestMenuColor: #ffffff;
    --NavigationElementFontColor: var(--df-MainRegular);
    --FontColor: black;
    --distanceBetweenGroups: 20px;
    --MegaMenuHeight: 100%;
}

/* Main styling for the horizontal menu bar */
.WebMegaMenu {
    background: var(--HorizontalMenuMain);
    height: var(--MegaMenuHeight);
    padding: 0px;
    margin: 0px;
    color: white;
}

.WebMegaMenu ul.WebMegaMenuRoot>li>div>a {
    color: inherit;
    padding: 10px 15px 10px 15px;
    display: block;
    -webkit-transition: background-color .5s ease;
    -moz-transition: background-color-color .5s ease;
    -o-transition: background-color .5s ease;
    transition: background-color .5s ease;
}

.WebMegaMenu ul li a {
    white-space: nowrap;
}

.WebMegaMenu .VerticalSubMenu {
    cursor: default;
}

.DeepestMenu li a,
.VerticalSubMenu li a {
    display: block;
    margin: 8px 0 0 8px;
}

.WebMegaMenu .WebMenuItem>div>span.WebItm_Icon {
    display: none;
}

.WebMegaMenu ul li.WebItm_Expanded .VerticalSubMenu {
    visibility: visible;
}

.WebMegaMenu ul li .DeepestMenu,
.WebMegaMenu ul li .VerticalSubMenu {
    visibility: hidden;
}

/* Level 0 */
.WebMegaMenu ul>li>div {
    display: flex;
    flex-direction: row;
}

.WebMegaMenu ul.WebMegaMenuRoot>li>div {
    padding: 0px;
}

.WebMegaMenu ul.WebMegaMenuRoot>li.Web_Disabled {
    /* Text color for disabled menu items */
    color: var(--df-Grayscale1);
}

.WebMegaMenu ul.WebMegaMenuRoot>li {
    /* This sets the text color */
    color: var(--df-Grayscale8);
    float: left;
}

.WebMegaMenu.Web_Enabled ul.WebMegaMenuRoot>li:hover>div,
.WebMegaMenu ul.WebMegaMenuRoot>li.WebItm_Expanded>div {
    background-color: var(--HorizontalMenuSelected);
    -webkit-transition: background-color .5s ease;
    -moz-transition: background-color-color .5s ease;
    -o-transition: background-color .5s ease;
    transition: background-color .5s ease;
}

.WebMegaMenu ul.WebMegaMenuRoot>li:hover,
.WebMegaMenu ul.WebMegaMenuRoot>li.WebItm_Expanded {
    background-color: none;
}

/* Level 1 */

.WebMegaMenu ul li ul {
    position: fixed;
    /*
        We set the z-index for sub menu's because of the transparency toolbar item issue and to make 
        them display above dialogs.
    */
    z-index: 100;
}

.WebMegaMenu ul li ul li {
    clear: both;
    float: left;
}

.WebMegaMenu .WebMenuItem,
.WebToolBar .WebMenuItem.Web_Enabled {
    cursor: pointer;
}

.WebMegaMenu>div>span.WebItm_Icon {
    height: 16px;
    width: 16px;
    display: inline-block;
    background-position: center center;
    background-repeat: no-repeat;
}

.WebMenuItem>div>a,
.WebMenuItem>div>a:focus {
    text-decoration: none;
    outline: none;
}

li.Web_Disabled>div {
    opacity: 0.5;
    filter: alpha(opacity=50);
    cursor: default;
}

.WebMenuItem>div>a {
    cursor: inherit;
}

/* Level 2 */
.WebItm_CheckBox {
    cursor: pointer;
}

/* Vertical sub menu */
.VerticalSubMenu {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background-color: var(--VerticalSubMenuColor) !important;
    border: 1px solid lightgray;
    border-top: none;
    min-width: 223px;
    margin-top: -1px;
    margin-left: 0px;
}

.VerticalSubMenu>li {
    color: var(--FontColor);
    height: 37px;
    line-height: 14px;
    padding-left: 0px;
    padding-right: 5px;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
}

/* Deepest menu */

.DeepestMenu {
    display: flex;
    flex-flow: column wrap;
    background-color: var(--DeepestMenuColor);
    box-sizing: border-box;
    cursor: auto;
}

.WebMegaMenuRoot > li > .DeepestMenu {
    justify-content: space-evenly;
} 

.MenuBreak {
    flex-basis: 100%;
    height: 0;
}


li.WebItm_Expanded>.DeepestMenu {
    visibility: visible !important;
}

.DeepestMenu li {
    height: 25px;
    line-height: 14px;
    break-inside: avoid;
    padding-left: 0px;
    padding-right: 40px;
    color: var(--NavigationElementFontColor);
    box-sizing: border-box;
    font-weight: normal;
}

.DeepestMenu li.WebItm_Selected {
    font-weight: bold;
}

.DeepestMenu li.WebItm_BgnGroup {
    font-weight: bold;
    color: black;
    text-decoration: none;
    cursor: default;
}

.DeepestMenu>li.WebItm_BgnGroup:not(:first-child) {
    margin-top: var(--distanceBetweenGroups);
}

.VerticalSubMenu>li.WebItm_Expanded {
    background-color: var(--VerticalMenuSelected);
    border: 1px solid var(--VerticalSubMenuTopBottomBorderColor);
    border-left: none;
    border-right: none;
    font-weight: bold;
}

.VerticalSubMenu>li>.DeepestMenu {
    position: absolute;
    width: max-content;
    left: 100%;
    top: 0;
    border-left: none;
}

/* Mega menu group */
.MegaMenuGroup {
    display: flex;
    flex-direction: column;
    height: fit-content;
    width: fit-content;
    margin-bottom: var(--distanceBetweenGroups);
    box-sizing: border-box;
}

/* Align the logout button all the way to the right */
.LogoutMenuButton {
    float: right !important;
}

/* Change padding for WebCon Inner inside of the mega menu */
.WebMegaMenu .WebCon_Inner {
    margin: 0px 5px;
}