.sidebar {
    margin: 0;
    padding: 0;
    background-color: #3D3D3D;
    width: 100%;
    height: 100%;

    & > ul {
        margin: 0;
        padding: 0;
        list-style: none;

        li {
            display: block;
            border: 0;
            border-bottom: 1px #5c5c5c solid;
            position: relative;

            &.title {
                padding: 20px 20px 10px 20px;
                .subheader-secondary;
                color: @white;
            }

            a {
                display: block;
                position: relative;
                padding: 10px 20px;
                text-decoration: none;
                color: @grayLighter;
                background-color: #3D3D3D;

                &:hover {
                    background-color: #262626;
                    color: @white;
                }

                &.dropdown-toggle {
                    &:after {
                        right: 10px;
                        bottom: 5px;
                    }
                }

                [class*="icon-"] {
                    margin-right: 15px;
                }
            }

            &.stick {
                position: relative;
                &:before {
                    content: "";
                    position: absolute;
                    width: 7px;
                    height: 40px;
                    left: -7px;
                    text-indent: -9999px;
                    border-top-left-radius: 5px;
                    border-bottom-left-radius: 5px;
                    background-color: inherit;
                }
            }
            &.disabled {
                a {
                    background-color: lighten(#3D3D3D, 30%);
                    cursor: default;
                    color: @gray;
                }
            }
            &.active {
                a {
                    background-color: @darkRed;
                    color: @white;
                }
            }
        }

        ul {
            .dropdown-menu;
            box-shadow: none;
            position: relative !important;
            background-color: lighten(#262626, 75%);
            min-width: 100%;
            li {
                border: 0;
                a {
                    background-color: lighten(#262626, 75%);
                }
                &.divider {
                    background-color: lighten(#5c5c5c, 40%);
                    &:hover {
                        background-color: lighten(#5c5c5c, 40%);
                    }
                }
                &.disabled {
                    a {
                        color: @grayLight;
                        &:hover {
                            color: @grayLight;
                        }
                    }
                }
            }

            &.open {
                display: block;
            }
        }
    }
}

.sidebar.light {
    background-color: @white;
    .border;
    li {
        border-bottom-color: @grayLighter;

        &.title {
            color: @dark;
        }

        a {
            color: @dark;
            background-color: @white;

            &:hover {
                background-color: @blue;
            }
        }

        ul {
            background-color: @white;
            border: 1px transparent solid;
        }

        .divider {
            background-color: @grayLighter;
            &:hover {
                background-color: @grayLighter;
            }
        }

        &.disabled {
            a {
                background-color: @white;
                cursor: default;
                color: @grayLight;
            }
        }
        &.active {
            a {
                background-color: @cyan;
                color: @white;
            }
        }
    }
}