/* Expanded sidebar only: folded/docked menus keep their existing flyouts.
   One measured height owns the animation, rather than jQuery slide height
   fighting app1.css's height:auto!important and transition:all. */
.app:not(.app-aside-folded):not(.app-aside-dock) #aside [ui-nav] .nav-sub {
    height: var(--dl-sidebar-submenu-height, auto) !important;
    margin-left: 0;
    opacity: 1;
    transition: none;
}

.app:not(.app-aside-folded):not(.app-aside-dock) #aside [ui-nav] li:not(.active) > .nav-sub {
    display: none !important;
}

.app:not(.app-aside-folded):not(.app-aside-dock) #aside [ui-nav] li.active > .nav-sub,
.app:not(.app-aside-folded):not(.app-aside-dock) #aside [ui-nav] li > .nav-sub.dl-nav-animating {
    display: block !important;
}

.app:not(.app-aside-folded):not(.app-aside-dock) #aside [ui-nav] li > .nav-sub.dl-nav-animating {
    overflow: hidden !important;
}

/* Rotate one chevron instead of swapping two icons abruptly. */
.app:not(.app-aside-folded):not(.app-aside-dock) #aside [ui-nav] a.auto > .pull-right > .fa-angle-right.text {
    display: inline-block !important;
    transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
}

.app:not(.app-aside-folded):not(.app-aside-dock) #aside [ui-nav] a.auto > .pull-right > .fa-angle-down.text-active {
    display: none !important;
}

.app:not(.app-aside-folded):not(.app-aside-dock) #aside [ui-nav] li.active > a.auto > .pull-right > .fa-angle-right.text {
    transform: rotate(90deg);
}

@media (prefers-reduced-motion: reduce) {
    .app:not(.app-aside-folded):not(.app-aside-dock) #aside [ui-nav] a.auto > .pull-right > .fa-angle-right.text {
        transition: none;
    }
}