.sidebar-title {
    font-weight: 400;
    font-size: 40px;
    line-height: 44px;
    margin-top: 40px;
    margin-bottom: 1.5rem;
}

.main-side-nav .svg-container:hover svg {
    fill: white;
}

.svg-container-wrapper {
    margin-right: 10px;
    width: 32px;
    height: 32px;
    justify-content: center;
    align-items: center;
    display: inline-flex;
}


.svg-container-wrapper:hover {
    background-color: var(--body-color);
    border-radius: 100%;
    transition: 500ms linear;
    color: #FFFFFF;

}

.main-side-nav .text-muted .svg-container-wrapper:hover {
    background-color: transparent;
}

.main-side-nav .text-muted .svg-container-wrapper:hover svg {
    fill: #6c757d;
}

.main-side-nav .text-muted .svg-container-wrapper svg {
    fill: #6c757d;
}

@media (max-width: 767px) {

    .offcanvas .offcanvas-sidebar,
    .offcanvas .offcanvas-sidebar .card {
        background-color: var(--body-color);
    }

    .offcanvas-sidebar.mt20 {
        margin-top: 0 !important;
    }

    .main-side-nav a,
    .main-side-nav .static,
    .explore-text,
    .nested-list,
    .main-side-nav .toggle-menu-title,
    .main-side-nav a,
    .main-side-nav ul a {
        color: #FFFFFF;
    }

    .main-side-nav a>div.svg-container {
        fill: #FFFFFF;
    }

    hr.hr-sidebar {
        border-bottom: none;
        display: none;
    }

    .offcanvas.active .offcanvas-sidebar {
        width: 100%;
        color: #FFFFFF;
    }

    .svg-container-wrapper:hover {
        background-color: white;
        border-radius: 100%;
        transition: 500ms linear;
    }

    .main-side-nav .svg-container:hover svg {
        fill: var(--body-color);
    }

    .main-side-nav .svg-container svg {
        fill: white;
    }

    .main-side-nav .h4.user-name {
        margin-top: 14px;
    }

    .nested-list:first-child {
        padding: 24px 0px;
    }

    .nested-list a {
        padding: 0;
    }
}