.sidebar__nav li a, .sidebar__nav li.active a {
    transition: .4s ease;
    transition-property: color, background, background-color, border-color, box-shadow, opacity;
    margin: 0px 0px 0px 0px;
 
}

.sidebar__nav li.active a, .sidebar__nav li.active a svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
    border-color: var(--tf-active) !important;
}

.sidebar__nav li.active a, .sidebar__nav li.active a svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
    border-color: #a9a9a9 !important;
}

.sidebar__nav li.active a {
    border: none !important;
    border-left: 0px solid !important;
    transition: all .2sn !important;
    background: #202020;
}

.sidebar__nav li.active::before {
    content: "";
    position: absolute;
    left: 0px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 25px;
    background: white;
    border-radius: 0px 12px 12px 0px;
    box-shadow: 0 0 15px rgba(255, 255, 255, 1.3);
}

.sidebar__nav a svg, .sidebar__nav a .svg-icon {
    margin-right: 12px;
    width: 24px;
    height: 24px;
    color: var(--tf-tc2);
}


.sidebar__nav a svg, .sidebar__nav a .svg-icon {
    margin-right: 8px;
    width: 24px;
    margin-left: 8px;
    height: 24px;
    color: var(--tf-tc2);
}

.sidebar__nav li a {
    font-weight: 600 !important;
    color: #9a9ca4 !important;
}

.sidebar__nav a svg, .sidebar__nav a .svg-icon {
    margin-right: 8px;
    width: 24px;
    margin-left: 8px;
    height: 24px;
    color: #9a9ca4 !important;
}