/* left menu as tree list (Ext.ui1.NavMenu) */

.ui1navmenu .x-treelist {
    background-color: transparent;
}

.ui1navmenu-glyph:before {
    display: inline-block;
    width: 100%;
    text-align: center;
}

/* count of a menu entry and the sum of a group, filled by Ext.ui1.NavMenu#setBadges; the text beside it is cut
   short on its own, so the badge stays visible */
.ui1navmenu .x-treelist-item-text {
    display: flex;
    align-items: center;
}

.ui1navmenu-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui1navmenu-badge.show-menu-badge {
    flex: 0 0 auto;
}

.ui1navmenu-badge {
    display: none;
}

.ui1navmenu-badge.show-menu-badge {
    display: inline-block;
    min-width: 18px;
    margin-left: 6px;
    padding: 0 5px;
    border-radius: 9px;
    background: #e53935;
    color: #fff;
    font-size: 11px;
    line-height: 18px;
    text-align: center;
}

/* tools at the very bottom (Ext.ui1.NavMenu#insertTools), e.g. the background tasks, below the user block */
.ui1navmenu-tools {
    border-top: 1px solid rgba(128, 128, 128, .25);
}

.ui1navmenu-tool-row {
    cursor: pointer;
}

.ui1navmenu-tool-row:hover {
    background-color: rgba(128, 128, 128, .12);
}

.ui1navmenu-tool-row .x-tool-tool-el {
    color: inherit;
    opacity: .75;
}

.ui1navmenu-tool-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui1navmenu-micro .ui1navmenu-tool-text {
    display: none;
}

/* user block at the bottom, opens the account menu */
.ui1navmenu-account {
    padding: 8px 0;
    border-top: 1px solid rgba(128, 128, 128, .25);
    cursor: pointer;
    overflow: hidden;
}

.ui1navmenu-account:hover {
    background-color: rgba(128, 128, 128, .12);
}

.ui1navmenu-account-row {
    display: flex;
    align-items: center;
    min-height: 22px;
    white-space: nowrap;
}

.ui1navmenu-account-icon {
    flex: 0 0 auto;
    /* centred like the group icons of the tree list (the width of the micro mode) */
    width: 44px;
    text-align: center;
    opacity: .75;
}

.ui1navmenu-account-text {
    overflow: hidden;
    text-overflow: ellipsis;
}

.ui1navmenu-account-impersonating {
    color: #e67e00;
}

.ui1navmenu-account-original {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid #e67e00;
    color: #999;
}

/* micro mode: only the icon of the user */
.ui1navmenu-micro .ui1navmenu-account-text,
.ui1navmenu-micro .ui1navmenu-account-row + .ui1navmenu-account-row {
    display: none;
}

/* dot in the theme colour in "Darstellung" */
.ui1navmenu-theme-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 8px;
    vertical-align: middle;
    border-radius: 50%;
    border: 1px solid rgba(128, 128, 128, .6);
}

/* micro mode: the header has no side padding, so its tool is centred like the group icons (in every theme) */
.ui1navmenu-micro > .x-panel-header {
    padding-left: 0;
    padding-right: 0;
}

/* micro mode: the icon strip fills the narrow menu */
.ui1navmenu-micro .x-treelist-toolstrip,
.ui1navmenu-micro .x-treelist-item-tool {
    width: 100%;
}

/* dark navigation style (treelist ui "nav"), as in the Ext JS kitchen sink */
.ui1navmenu-nav > .x-panel-bodyWrap > .x-panel-body,
.ui1navmenu-nav > .x-panel-body {
    background-color: #32404e;
}

.ui1navmenu-nav .ui1navmenu-account {
    border-top-color: rgba(255, 255, 255, .15);
    color: #f0f0f0;
}

.ui1navmenu-nav .ui1navmenu-tools {
    border-top-color: rgba(255, 255, 255, .15);
    color: #f0f0f0;
}

.ui1navmenu-nav .ui1navmenu-tool-row:hover,
.ui1navmenu-nav .ui1navmenu-account:hover {
    background-color: rgba(255, 255, 255, .08);
}

.ui1navmenu-nav .ui1navmenu-account-original {
    color: #b0b8c0;
}

/* hovering an entry marks its path (highlightPath): the theme's rules for the nav ui look for the highlight-path
   class inside the nav class, but both are on the same element, so its rules for the light tree list applied (dark
   text, icon and arrow in the theme colour) */
.x-treelist-nav.x-treelist-highlight-path .x-treelist-item-over > * > * > .x-treelist-item-icon,
.x-treelist-nav.x-treelist-highlight-path .x-treelist-item-over > * > * > .x-treelist-item-text,
.x-treelist-nav.x-treelist-highlight-path .x-treelist-item-over > * > * > .x-treelist-item-expander {
    color: #fff;
}

/* entries of a group beside the bar in micro mode: a long group scrolls instead of running off the window */
.x-treelist-floater {
    max-height: 100vh;
    overflow-y: auto;
}

/* micro mode: the sum of a group as a bubble on its icon */
.ui1navmenu .x-treelist-item-tool {
    position: relative;
}

.ui1navmenu-tool-badge.show-menu-badge {
    position: absolute;
    top: 4px;
    right: 3px;
    min-width: 16px;
    margin: 0;
    padding: 0 4px;
    font-size: 10px;
    line-height: 16px;
}