/*
    1. Menu (detail page top menu?)
    2. Main Menu
        a. general
        z. specific menu item overrides
    3. Right Menu (top right corner)
*/

.menu {
    background-color: #322C26;
    color: #ffffff;
}

.advancedsearchmenu {
    background-color: #4E453B;
    color: #ffffff;
}

.menuGroup {
    background-color: #F2F2F2;
    border: 1px #444444 solid;
}

.menuItem {
    color: #000000;
}

.menuItemDisabled, .topMenuItemDisabled {
    color: #bbbbbb;
}

.topMenuItem {
    color: #ffffff;
}

.topMenuItemExpanded {
    background-color: #F2F2F2;
    color: #000000;
}

.topMenuItemGold, .topMenuItemHover, .menuItemHover, li.menuItem:hover {
    background-color: #ff7733;
    color: #ffffff;
}

.loadingMenuItem {
    background-image: url('ThemeImages/progress.gif');
}

[data-menuscroll] {
    background-color: #f2f2f2; 
}

    [data-menuscroll] .fa {
        color: #322C26;
        background-color: #CDC4BC;
    }


/*Beginning Left Menu*/

.leftMenu {
    background-color: #322C26;
}

.baseMenuItem {
    color: #ffffff;
}

.baseMenuItem:hover {
    background-color: #ff7733;
}

    .baseMenuItem:hover .commentnumber {
        background-color: #ffffff;
        color: #ff7733;
    }

.baseMenuItem.active, .baseMenuItem.selected.active {
    background-color: #ff7e3d;
    color: #ffffff;
}

    .baseMenuItem.active .commentnumber {
        background-color: #ffffff;
        color: #ff7733;
    }

    .baseMenuItem > a {
        color: #ffffff;
    }

    .baseMenuItem.selected > a {
        color: #322C26 !important;
    }

    .baseMenuItem.selected:hover > a {
        color: #ffffff !important;
    }

.baseMenuItem.selected, .baseMenuItem.selected .icon {
    color: #322C26;
    background-color: #F2F2F2;
}

    .baseMenuItem.selected:hover .icon, .baseMenuItem.selected:hover, .baseMenuItem.selected.active .icon {
        background-color: #ff7733;
        color: #ffffff;
    }

.commentnumber {
    background-color: #ff7733;
    color: #FFFFFF;
}

.submenu > ul {
    border: 1px solid #322C26;
    color: #322C26;
    background-color: #ffffff;
}

    .submenuItem > .rightIcon {
        color: #322C26;
    }

    .submenuItem:hover, .submenuItem:hover > .submenuItemMainContent, .submenuItem:hover > .submenuItemMainContent > i, .submenuItem:hover > [data-templatepart="content"] .submenuItemMainContent, .submenuItem:hover > .rightIcon {
        color: #ffffff;
    }

    .submenuItem.active, .submenuItem.active > .submenuItemMainContent, .submenuItem.active > .rightIcon {
        color: #ffffff;
    }

.submenuItem:hover {
    background-color: #ffa070;
}

.submenuItem.active {
    background-color: #ff7e3d;
}

/* nonactionable item and the rightIcon should highlight dark together */
.submenuItem:hover > .submenuItemMainContent.submenuItemNonActionable, .submenuItem:hover > .submenuItemMainContent.submenuItemNonActionable ~ .rightIcon {
    background-color: #ff7733;
}

/* actionable item and the rightIcon should highlight dark separately */
.submenuItem > .submenuItemMainContent.submenuItemActionable:hover, .submenuItem > .submenuItemMainContent.submenuItemActionable ~ .rightIcon:hover {
    background-color: #ff7733;
}

/* actionable item and the rightIcon should color non-white when the other is hovered */
.submenuItem:hover > .submenuItemMainContent.submenuItemActionable:not(:hover), .submenuItem:hover > .submenuItemMainContent.submenuItemActionable ~ .rightIcon:not(:hover) {
    color: #322C26;
}

/* rightIcon should stay highlighted dark when the submenu item is active */
.submenuItem.active:hover > .submenuItemMainContent.submenuItemActionable ~ .rightIcon:not(:hover) {
    background-color: #ff7733;
    color: white;
}

/* actionable item should stay highlighted superlight when submenu item is active */
.submenuItem.active:hover > .submenuItemMainContent.submenuItemActionable:not(:hover) {
    background-color: #ffa070;
}

.logo {
    color: #ffffff;
}

.variableFlag {
    color: #fff;
    background-color: #ff7733;
}

.baseMenuItem:hover .variableFlag, .baseMenuItem.active .variableFlag, .baseMenuItem:hover .submenuItem:hover .variableFlag {
    background-color: #fff;
    color: #ff7733;
}

.baseMenuItem:hover .submenuItem .variableFlag, .baseMenuItem.active .submenuItem .variableFlag {
    background-color: #ff7733;
    color: #fff;
}

/* specific menu item overrides */

#mnuSignOut, #mnuCheckForUpdates, #mnuIntegrationsAdministration {
    border-top: 1px double #322C26;
}

#mnuUser:hover {
    background-color: #ff7733;
}

#mnuUser:not(.active):not(.selected):not(:hover) {
    background-color:#4E453B;
}

.baseMenuItem.trialFeature > a > .leftMenuText:after {
    background-color: #ff7733;
    color: #ffffff;
}

.baseMenuItem.trialFeature:hover > a > .leftMenuText:after {
    background-color: #ffffff;
    color: #ff7733;
}

.bookmark {
    color: #ffffff;
}

.menuKeySelected {
    background-color: #ffa070;
}

/*Ending Left Menu*/

/* Begin Right Menu */

.rightMenu li:hover {
    background-color: #ff7733;
}

.info {
    background-color: #322C26;
    color: #ffffff;
}

    .info:hover {
        background-color: #ff7733;
    }

/* End Right Menu */