// new sidebar
#sidebar ul li a:hover,
#sidebar ul li a.active,
#sidebar ul li.mm-active>a {
    color: #ffffff;
    background: #415094;
    border-left: 6px solid #7c32ff;
    border-image-source: linear-gradient(#c738d8, #7c32ff);
    border-image-slice: 6;
}

.sidebar {
    .mini_logo {
        display: none;
    }

    .large_logo {
        display: block;
    }

    #sidebar_menu {
        li {
            a {
                font-size: 12px;
                font-weight: 500;
                color: $base_color;
                // padding: 22px 25px 22px 30px;
                padding: 9px 7px;
                padding: 9px 7px 9px 29px;
                background: #fff;
                transition: .3s;
                position: relative;
                z-index: 0;
                display: grid;
                grid-template-columns: 26px auto !important;
                grid-gap: 6px;
                align-items: center;
                position: relative;
                background: transparent;

                // @media #{$medium_device} {
                //     padding: 12px 25px 12px 30px;
                // }
                // &::before{
                //     position: absolute;
                //     left: 0;
                //     background: $base_color;
                //     width: 0px;
                //     top: 0;
                //     bottom: 0;
                //     content: '';
                //     opacity: 0;
                //     transition: .3s;
                //     right: 0px;
                //     visibility: hidden;
                //     background: linear-gradient(180deg, #C738D8 0%, #8233FC 100%);
                // }
                i {
                    font-size: 12px;
                    margin-right: 12px;
                    color: $text_color_4;
                    -webkit-transition: 0.5s;
                    transition: 0.5s;
                }

                .nav_icon_small span {
                    // font-size: 15px;
                }

                span {
                    margin: 0;
                }

                &.has-arrow {
                    &::after {
                        color: #415094;
                        font-weight: 600;
                        font-size: 12px;
                        right: 20px;
                    }

                    &:hover::after {
                        color: #fff;
                    }
                }

                &:hover {
                    background: $base_color;
                    color: $white;

                    i {
                        color: $white;
                    }

                    &::before {
                        width: 6px;
                        opacity: 1;
                        visibility: visible;
                    }

                }
            }

            &.mm-active {

                >a {
                    color: #fff;
                    background: $base_color;

                    &.has-arrow {
                        &::after {
                            color: #fff;
                            font-weight: 600;
                            font-size: 12px;
                            right: 20px;
                        }

                        &:hover::after {
                            color: #fff;
                        }
                    }
                }

                &.metis_dropmenu {

                    // border-top: 1px solid #eee1e2;
                    // border-bottom: 1px solid #eee1e2;
                    // background: #fff7f8;
                    >a {
                        padding-top: 29px;
                        padding-bottom: 30px;
                        color: $white;
                    }
                }

                >a {
                    i {
                        color: $white;
                    }

                    &::before {
                        opacity: 1;
                        width: 6px;
                        visibility: visible;
                    }
                }
            }

            ul {
                li {
                    a {
                        white-space: nowrap;
                        padding-left: 55px;
                        color: #fff;

                        &:hover,
                        &.active {
                            background: rgba(255, 255, 255, .05);
                            border-left: 6px solid #7c32ff;
                        }
                    }

                    &.metis_submenu>a {
                        background: rgba(255, 255, 255, .05);
                        border-left: 6px solid #7c32ff;
                    }
                }
            }
        }
    }
}


.sidebar #sidebar_menu ul li.metis_submenu {
    a.has-arrow::after {
        color: #fff;
    }

    ul {
        opacity: 1;

        li {
            a {
                padding-left: 63px;
            }
        }
    }
}