/*
 * Full large size sidebar.
 */


.nav-sidebar {
    background: #393f44;
    width: unit(@sidebar-width-xl, px);
    height: 100%;
    position: fixed;
    top: 0px;
    z-index: 1;
    overflow-x: hidden;
    overflow-y: auto;

    border-right: 1px solid #292e34;
    border-bottom: none;
    border-top: none;
    border-left: none;
    bottom: 0;

    a {
        width: unit(@sidebar-width-xl, px) !important;
    }
    .list-group-item-value {
        max-width: unit(@sidebar-width-xl - 60, px) !important;
        padding-right: 10px !important;
    }
}

.nav-item-pf-header {
	color: #fff;
	font-size: 16px;
    margin: 18px 20px 10px 20px;
}

.nav-sidebar .list-group {
    border: none;
}

.nav-sidebar .list-group-item {
    background: inherit;
    border: none;
}

.nav-sidebar .list-group-item.active {
    background-color: #4d5258;
}
.nav-sidebar > .list-group > .list-group-item.active > a {
    background-color: inherit;
}

.nav-sidebar .list-group-item a {
    display: block;
    color: #d1d1d1;
}

#content {
    margin-left: unit(@sidebar-width-xl + 20, px);
}

.content-filter {
    left: unit(@sidebar-width-xl, px);
}

/*
 * Very small. Only icons
 */
@media (max-width: @screen-sm-min) {
    .nav-sidebar {
        .nav-item-pf-header {
            display: none;
        }

        width: unit(@sidebar-width-sm, px);
        .list-group-item-value {
            display: none !important;
        }
        a {
            padding: 8px !important;
            height: 40px !important;
            width: unit(@sidebar-width-sm, px) !important;
        }
    }

    #content {
        margin-left: unit(@sidebar-width-sm + 20, px);
    }

    .content-filter {
        left: unit(@sidebar-width-sm, px);
    }
}

/*
 * Short window. Text next to icons.
 */
@media (min-width: @screen-sm-min) and (max-width: @screen-lg-min), (min-width: @screen-sm-min) and (max-height: @sidebar-height-lg) {
    .nav-sidebar {
        width: unit(@sidebar-width-md, px);
        a {
            padding: 7px 8px 5px 8px !important;
            height: 40px !important;
            width: unit(@sidebar-width-md, px) !important;
            i {
                float: none !important;
                margin-right: 0px !important;
            }
            span {
                display: inline !important;
                font-size: 12px;
                margin-left: 4px;
                margin-top: 2px;
            }
        }
    }

    #content {
        margin-left: unit(@sidebar-width-md + 20, px);
    }

    .content-filter {
        left: unit(@sidebar-width-md, px);
    }

}
