#sidebar {
    z-index: 1;
    $height: 41px;
    @include position(fixed, 0, unset, unset, 0px);
    @include widhHeight(240px, calc(100% - 43px));
    margin-top: 65px;
    color: $white;
    background: $black;
    overflow: hidden;
    @include flex(true, false, space-between, unset);
    transition: all 0.4s;
    @include breakpoint(lg) {
        left: -250px;
        position: fixed;
    }
    .sidebar {
        //display: flex;
        letter-spacing: 0.8px;
        &__title {
            @include flex(false, false, unset, center);
            padding-left: 25px;
            height: $height;
            padding-bottom: 3px;
            color: $dark-gray;
            font-size: 13px;
        }
        &__block {
            .children {
                a {
                    padding-left: 40px !important;
                }
                &.laptop a {
                    padding-left: 20px !important;
                }
            }
            .items {
                display: flex;
                flex-direction: column;
                a {
                    position: relative;
                    .toggable {
                        display: none !important;
                        position: absolute;
                        top: 50%;
                        transform: translateY(-50%);
                        @include flex(false, false, center, center);
                        right: -150px;
                        font-weight: 500;
                        font-size: 15px;
                        width: 150px;
                        overflow: hidden;
                        height: $height;
                        color: transparent !important;
                        background-color: #232a32;
                    }
                    
                    @include flex(false, false, unset, center);
                    padding-left: 30px;
                    height: $height;
                    
                    background: rgb(35, 42, 50);
                    transition: background 0.3s;
                    cursor: pointer;
                    text-decoration: none;
                    border-bottom: 1px solid $dark-gray;
                    color: white;
                    img {
                        font-size: 17px;
                        transition: color 0.3s;
                        margin-right: 21px;
                        // filter: invert(55%) sepia(87%) saturate(380%) hue-rotate(35deg) brightness(104%) contrast(95%);
                    }

                    &:hover {
                        .toggable {
                            display: flex !important;
                            color: white !important;
                        }
                        background: $primary-brand;
                        img {
                            filter: brightness(0) invert(1);
                        }
                    }
                    &.router-link-active {
                        background: $primary-brand;                        ;
                        img {
                            filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(314deg) brightness(109%)
                                contrast(100%);
                        }
                    }
                }
            }
        }
    }
    @include breakpoint(lg) {
        z-index: 1;
    }
    &:hover {
        overflow: visible;
    }
}

.dont-show-text {
    color: transparent !important;
}
.collapse{
    display:none;
}
.showAvatar{
    display: flex;
    flex-direction: column;
    text-align: center;
    img{
        align-self: center;
        border-radius: 115px;
        width:60%;
        margin-top: 18px;
        margin-bottom: 18px;
    }

}
