.sidebar {
    width: 250px;
    z-index: 1005;
    bottom: 0;
    margin-top: 0;
    position: fixed;
    top: 0;
    font-size: 15px;
    font-weight: 400;
    box-shadow: 0 0 10px rgba(0, 0, 0, .05) !important;
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .05) !important;
    background: $white;
}

.sidebar-brand {
    padding: 12px 20px;
    width: 250px;
    height: 66px;
    position: fixed;
    text-align: center;
    z-index: 999;
    border-bottom: 1px solid #0000000f;
    background-color: $white;
}

.brand-logo-mini {
    display: none;
}

.sidebar-scroll {
    margin-top: 65px;
    background: $sidebar-bg;
}

.sidebar-menu {
    padding: 10px 0;
    list-style: none;
    margin: 0;

    li {
        position: relative;
        margin: 0;

        a {
            text-decoration: none;
            position: relative;
            display: block;
            padding: 0.8rem 1.1rem;
            margin: 0 10px;
            border-radius: 3px;
            color: $light-sidebar-link-color;
            z-index: 2;
            align-items: center;
            -moz-transition: color 250ms ease-in-out, background-color 250ms ease-in-out;
            -o-transition: color 250ms ease-in-out, background-color 250ms ease-in-out;
            -webkit-transition: color 250ms ease-in-out, background-color 250ms ease-in-out;
            transition: color 250ms ease-in-out, background-color 250ms ease-in-out;

            span {
                margin-left: 10px;
            }

            &:active,
            &:hover,
            &:focus {
                color: $light-sidebar-link-hover-color;
                background-color: $light-default-bg;
            }
        }

        ul {
            list-style: none;
            position: relative;
            padding: 0;
            margin: 0;
            max-height: 0;
            overflow: hidden;
            z-index: 1;
            -webkit-transition: max-height 300ms ease;
            -moz-transition: max-height 300ms ease;
            -o-transition: max-height 300ms ease;
            transition: max-height 300ms ease;

            li {
                a {
                    padding: 0.8rem 1.7rem;
                    color: $light-sidebar-link-color;

                    &:hover {
                        color: $light-sidebar-link-hover-color;
                    }

                    svg {
                        margin-top: -3px;
                    }
                }
            }
        }

    }

    li.active {
        >a {
            color: $white !important;
            background-color: $primary;
        }
    }

    .badge {
        float: right;
        margin-top: 2px !important;
        padding: 3px 6px;
    }

    .expand.open {
        ul {
            max-height: 1000px;
        }
    }
}

#sidebar-menu {
    li.expand {
        &.open>a::before {
            content: " ";
            border: solid;
            border-width: 0 .075rem .075rem 0;
            display: inline-block;
            padding: 2px;
            position: absolute;
            right: 1.5rem;
            transition: all .2s ease-out;
            transform: rotate(-135deg);
            top: 1.4rem;
        }

        >a::before {
            content: " ";
            border: solid;
            border-width: 0 .075rem .075rem 0;
            display: inline-block;
            padding: 2px;
            transform: rotate(45deg);
            position: absolute;
            top: 1.2rem;
            right: 1.5rem;
            transition: all .2s ease-out;
        }
    }
}