/* Compact BreadCrumbBar with Cacti Logo */
html[data-theme-mode='compact'] .breadCrumbBar {
    display: flex;
    height: 4rem;
    background-color: var(--background-content);
    flex-direction: column;
    flex-wrap: wrap;
    align-content: flex-start;
}

html[data-theme-mode='compact'] .breadCrumbBar * {
    background-color: var(--background-content);
    float: left;
    padding-bottom: 0px;
}

html[data-theme-mode='compact'] #navTitle {
    display: flex;
    align-items: center;
    height: 4rem;
    font-size: var(--fs-semilarge);
    font-weight: var(--fw-medium);
    padding: 0 0 0 1.5rem;
    color: var(--text-color-normal);
}

html[data-theme-mode='compact'] #navTitle i,
html[data-theme-mode='compact'] #navTitle div {
    margin-right: 0.5rem;
    padding: 0;
    text-align: center;
    color: var(--text-color-normal);
}

html[data-theme-mode='compact'] #navTitle mark[data-markjs='true'] {
    color: unset;
}

html[data-theme-mode='compact'] #cactiConsoleBackdrop {
    display: block;
    background: transparent url(./../../images/cacti_logo.svg) no-repeat scroll 50% 50% / 20px auto;
    background-color: var(--background-navigation);
    padding-bottom: 0;
    float: left;
    width: 4.5rem;
    height: 5rem;
    cursor: pointer;
}

/* Main Content Area */
html[data-theme-mode='compact'] .cactiContent {
    height: calc(100vh - 4rem) !important;
}

/* Console Navigation Area */
html[data-theme-mode='compact'] .cactiConsoleNavigationArea {
    display: flex !important;
    flex-direction: column;
    overflow-y: visible !important;
    width: 4.5rem !important;
    height: 100% !important;
}

html[data-theme-mode='compact'] .cactiConsoleNavigationArea .compact{
    display: block;
}

html[data-theme-mode='compact'] .cactiConsoleNavigationBox {
    box-sizing: border-box;
    max-width: calc(100vw - 4.5rem) !important;
    min-width: 34rem;
    position: fixed !important;
    left: 4.5rem !important;
    top: 4rem !important;
    height: calc(100vh - 4rem) !important;
    z-index: 1000 !important;
    background-color: var(--background-menu) !important;
    box-shadow: 5px 0 5px -5px var(--box-shadow-color) !important;
    border-top: 1px solid var(--background-navigation);
    border-right: 1px solid var(--background-navigation);
    border-bottom: 1px solid var(--background-navigation);
}

html[data-theme-mode='compact'] .cactiConsoleNavigationUserBox {
    box-sizing: border-box;
    max-width: calc(100vw - 4.5rem) !important;
    min-width: 34rem;
    position: fixed;
    left: 4.5rem;
    bottom: 0px;
    height: 25rem;
    max-height: calc(100vh - 4rem);
    z-index: 1000;
    background-color: var(--background-menu);
    box-shadow: 5px 0 5px -5px var(--box-shadow-color);
    border-top: 1px solid var(--background-navigation);
    border-right: 1px solid var(--background-navigation);
    border-bottom: 1px solid var(--background-navigation);
}

html[data-theme-mode='compact'] .cactiConsoleNavigationBox .fa,
html[data-theme-mode='compact'] .cactiConsoleNavigationUserBox .fa{
    padding-right: 0;
}

html[data-theme-mode='compact'] #nav li ul,
html[data-theme-mode='compact'] .nav li ul {
    padding-left: 3.5rem;
}

html[data-theme-mode='compact'] #nav li a,
html[data-theme-mode='compact'] .nav li a {
    padding: unset;
}

html[data-theme-mode='compact'] .cactiFlexBoxContainer {
    display: flex;
    flex-flow: row wrap;
    align-content: flex-start;
}

html[data-theme-mode='compact'] .cactiFlexBoxContentBox {
    width: 16rem;
    height: 16rem;
    box-sizing: border-box;
}

html[data-theme-mode='compact'] .cactiFlexBoxContentBox .header {
    font-size: var(--fs-large);
    text-align: center;
    padding: 0.5rem 0;
}

html[data-theme-mode='compact'] .cactiFlexBoxContentBox .content {
    font-size: 4rem;
    text-align: center;
    padding: 0.5rem 0;
}


html[data-theme-mode='compact'] .cactiConsoleNavigationArea .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 4rem;
    border-bottom: 1px solid var(--background-navigation);
    font-size: var(--fs-big);
    color: var(--text-color-navigation-highlight);
}

html[data-theme-mode='compact'] .cactiConsoleNavigationArea .header > div {
    width: 16rem;
    padding-left: 1rem;
}

html[data-theme-mode='compact'] .cactiConsoleNavigationArea .header > div > span {
    margin-left: 3.5rem;
}

html[data-theme-mode='compact'] .cactiConsoleNavigationArea .header > div:nth-child(2) {
    width: 16rem;
}

html[data-theme-mode='compact'] .cactiConsoleNavigationBox ul.nav,
html[data-theme-mode='compact'] .cactiConsoleNavigationBox ul#nav,
html[data-theme-mode='compact'] .cactiConsoleNavigationUserBox ul.nav {
    display: flex;
    flex-flow: row wrap;
    align-content: flex-start;
    writing-mode: vertical-lr;
    margin-top: 1rem;
    height: calc(100% - 5rem);
    max-width: 100%;
    overflow-y: auto;
}

html[data-theme-mode='compact'] .cactiConsoleNavigationArea #menu::-webkit-scrollbar {
    /* WebKit */
    width: 0;
    height: 0;
}

html[data-theme-mode='compact'] .cactiConsoleNavigationArea .compact_nav_icon {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 3rem;
    font-size: var(--fs-semilarge);
    cursor: pointer;
}

html[data-theme-mode='compact'] .cactiConsoleNavigationArea .compact_nav_icon > span {
    display: none;
}

html[data-theme-mode='compact'] .cactiConsoleNavigationArea .menu_glyph {
    color: var(--text-color-navigation-highlight);
    font-size: var(--fs-big);
    font-weight: var(--fw-semibold);
    padding-left: 1rem;
    width: 1.5rem;
}

html[data-theme-mode='compact'] .cactiConsoleNavigationArea .menu_parent {
    display: flex !important;
    flex-direction: row;
    flex-shrink: 1;
    margin-bottom: 0.3rem;
    cursor: default;
    pointer-events: none;
}

html[data-theme-mode='compact'] .cactiConsoleNavigationArea .menu_parent:not(.active) {
    #color: #3d3d3d;
}

html[data-theme-mode='compact'] .cactiConsoleNavigationArea .menuitem {
    position: relative;
    width: 16rem;
    overflow: hidden;
    padding: 1rem 0 1rem 1rem;
    writing-mode: initial;
}

html[data-theme-mode='compact'] .cactiConsoleNavigationArea .menuitem:hover {
}

html[data-theme-mode='compact'] .cactiConsoleNavigationArea .menuitem span{
    #TODO: color
}

html[data-theme-mode='compact'] .cactiConsoleNavigationArea .menuitem:hover span {
    display: inline-block !important;
    animation: dropdown-anim .15s ease-in-out .1s forwards;
}

html[data-theme-mode='compact'] .cactiConsoleNavigationArea .menuitem ul {
    display: block !important;
    border-left: none !important;
}

html[data-theme-mode='compact'] .cactiConsoleNavigationArea .menuitem:hover ul {
    display: inline-block !important;
}

html[data-theme-mode='compact'] .cactiTreeNavigationArea {
    #overflow-y: visible !important;
    width: 15rem !important;
    #position: relative;
    #height: calc(100vh - 5rem) !important;
    #background-color: var(--background-content);
    #border-right: 2px solid var(--background-navigation);
}

html[data-theme-mode='compact'] .cactiTreeNavigationArea.hide {
    #overflow-y: visible !important;
    width: 0 !important;
    #position: relative;
    #height: calc(100vh - 5rem) !important;
    #background-color: var(--background-content);
    #border-right: 2px solid var(--background-navigation);
}

html[data-theme-mode='compact'] .cactiConsoleContentArea {
    margin-left: 0 !important;
}

html[data-theme-mode='compact'] .cactiConsoleContentArea #filterTableOnTop {
    padding-top: 0.6em;
}

/* General Compact Styling Elements */
html[data-theme-mode='compact'] .cactiShadow {
    height: 1px;
    background-color: var(--background-navigation);
}

@media screen and (max-height: 450px){
    html[data-theme-mode='compact'] .cactiConsoleNavigationUserBox {
        height: calc(100vh - 4rem) !important;
    }
}
