/** Container **/
.app-sidebar-container {
    position: fixed;
    height: 100vh;
    max-height: 100vh;
    width: 245px !important;
    overflow-y: auto;
    background: var(--bb-primary-color-25opa);
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    padding: 10px !important;
    transition: width 500ms;
}

/* Title Padding for Expanded & Collapsed Titles */
.app-sidebar-container .expanded-title,
.app-sidebar-container .collapsed-title {
    padding: 20px 12px 0; /* top, right/left, bottom */
}

/** Main Navigation **/
/* List Spacing */
.app-sidebar-container ul.uk-nav > li:not(:first-child) {
    margin-top: 4px;
}

/* Navigation Headers */
.app-sidebar-container ul.uk-nav > li.uk-nav-header {
    color: var(--bb-text-color);
    margin: 20px 0 5px 10px; /* top, right, bottom, left */
    font-weight: 700 !important;
    text-transform: capitalize !important;
}

/* Navigation Links */
.app-sidebar-container ul.uk-nav > li.uk-disabled > a{
    color: var(--bb-gray-mid) !important;
    cursor: text;
}
.app-sidebar-container ul.uk-nav > li > a {
    border-radius: 5px;
    border: 1px solid transparent;
    padding: 7px 9px;
    transition: background 200ms;
    color: var(--bb-gray-full) !important;
    font-weight: 600 !important;
}

/* Hover & Focus States */
.app-sidebar-container ul.uk-nav > li:hover > a,
.app-sidebar-container ul.uk-nav > li:hover:focus > a {
    background: var(--bb-gray-light);
}

/* Active & Open States */
.app-sidebar-container ul.uk-nav > li.uk-active:not(li.uk-parent) > a,
.app-sidebar-container ul.uk-nav > li.uk-parent.uk-active > a,
.app-sidebar-container ul.uk-nav > li.uk-parent.uk-open > a {
    background: var(--bb-gray-light);
}

.app-sidebar-container ul.uk-nav > li.uk-active.uk-parent > a,
.app-sidebar-container ul.uk-nav > li.uk-open.uk-parent > a
{
    background: transparent !important;
}

/* Active Parent Icon Color */
.app-sidebar-container ul.uk-nav > li.uk-parent.uk-active > a span[uk-nav-parent-icon],
.app-sidebar-container ul.uk-nav > li.uk-parent.uk-open > a span[uk-nav-parent-icon],
.app-sidebar-container ul.uk-nav > li.uk-active > a > .menu-item-icon,
.app-sidebar-container ul.uk-nav > li.uk-active > a > .menu-item-label,
.app-sidebar-container ul.uk-nav > li.uk-parent.uk-open > a > .menu-item-icon {
    color: var(--bb-accent-color);
}

/* Main Navigation Icons */
.app-sidebar-container ul.uk-nav > li > a > .menu-item-icon {
    font-size: 1.15em;
    margin-right: 7px;
    font-weight: 700;
}

/** Sub-Navigation **/
/* List Item Spacing */
.app-sidebar-container ul.uk-nav-sub{
    padding: 5px 0 5px 0;
}

.app-sidebar-container ul.uk-nav-sub > li:not(:first-child) {
    margin-top: 7px;
}

/* Sub-Navigation Links */
.app-sidebar-container ul.uk-nav-sub > li > a:before{
    content: '•'; /* le dot */
    color: var(--bb-gray-full);
    margin-right: 8px;
    display: inline-block;
}

.app-sidebar-container ul.uk-nav-sub > li > a {
    border-radius: 5px;
    border: 1px solid transparent;
    padding: 7px 18px;
    transition: background 200ms;
    color: var(--bb-gray-full) !important;
    font-weight: 600 !important;
}

/* Hover & Active States for Sub-Navigation */
.app-sidebar-container ul.uk-nav-sub > li:hover > a,
.app-sidebar-container ul.uk-nav-sub > li.uk-active > a {
    background: var(--bb-gray-light);
}

.app-sidebar-container ul.uk-nav-sub > li.uk-active > a:before{
    color: var(--bb-accent-color);
}

    /* Sub-Navigation Icons */
.app-sidebar-container ul.uk-nav-sub > li > a > .menu-item-icon {
    font-size: 1.15em;
    margin-right: 12px;
    font-weight: 700;
}

/* Sub-Navigation Divider */
.app-sidebar-container ul.uk-nav-sub > div.uk-nav-divider {
    margin: 5px;
}