:root {
    --sidebar-width-collasped: 80px;
    --sidebar-width: 300px;
    --transition: 0.2s;
}

#Sidebar {
    background-color: var(--main-color);
    position: fixed;
    top: 0;
    z-index: 200;
    height: 100vh;
    transition: all var(--transition) ease;
    background: #FFFFFF;
    box-shadow: 6px 4px 38px rgba(0, 0, 0, 0.07);
    width: var(--sidebar-width);
}

.sidebar.close {
    width: var(--sidebar-width-collasped) !important;
}

.sidebar .logo-details {
    height: 80px;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 1.7rem 1.7rem
}

.sidebar.close .logo-details {
    justify-content: center;
}

.sidebar .logo.full {
    transition-delay: 0s;
    /*opacity: 1;*/

    pointer-events: none;
}

.sidebar .logo.small {
    transition-delay: 0s;
    /*opacity: 0;*/
    display: none;
    pointer-events: none;
}

.sidebar.close .logo.full {
    transition-delay: 0s;
    /*opacity: 0;*/
    display: none;
    pointer-events: none;
}

.sidebar.close .logo.small {
    transition-delay: 0s;
    /*opacity: 1;*/
    pointer-events: none;
    display: block;
}

.sidebar.close .logo-details .logo_name {
    transition-delay: 0s;
    opacity: 0;
    pointer-events: none;
}

.sidebar .nav-links {
    height: 100%;
    padding: 0 0 0 0;
    margin: 0;
    overflow: auto;
}

.sidebar.close .nav-links {
    overflow: visible;
}

.sidebar .nav-links::-webkit-scrollbar {
    display: none;
}

.sidebar .nav-links li {
    position: relative;
    list-style: none;
    transition: all var(--transition) ease;
    align-items: center;
    text-decoration: none;
}

    .sidebar .nav-links li.nav-item {
        margin-bottom: 1rem;
    }

        .sidebar .nav-links li.nav-item:last-child {
            margin: 0;
        }

        .sidebar .nav-links li.nav-item.active,
        .sidebar .nav-links li.nav-item.hover div {
            background-color: var(--theme-sidebar-color-light);
        }


        .sidebar .nav-links li.nav-item.red.active,
        .sidebar .nav-links li.nav-item.red.hover div {
            --theme-sidebar-color-light: var(--red-superlight);
            --theme-sidebar-color-default: var(--red);
        }

        .sidebar .nav-links li.nav-item.red .sub-menu li:hover {
            --theme-sidebar-color-light: var(--red-superlight);
            --theme-sidebar-color-default: var(--red);
        }

        .sidebar .nav-links li.nav-item.red .sub-menu hr {
            background: var(--red-superlight);
        }


        .sidebar .nav-links li.nav-item.green.active,
        .sidebar .nav-links li.nav-item.green.hover div {
            --theme-sidebar-color-light: var(--green-superlight);
            --theme-sidebar-color-default: var(--green);
        }

        .sidebar .nav-links li.nav-item.green .sub-menu li:hover {
            --theme-sidebar-color-light: var(--green-superlight);
            --theme-sidebar-color-default: var(--green);
        }

        .sidebar .nav-links li.nav-item.green .sub-menu hr {
            background: var(--green-superlight);
        }


        .sidebar .nav-links li.nav-item.gray.active,
        .sidebar .nav-links li.nav-item.gray.hover div {
            --theme-sidebar-color-light: var(--gray-light);
            --theme-sidebar-color-default: var(--gray);
        }

        .sidebar .nav-links li.nav-item.gray .sub-menu li:hover {
            --theme-sidebar-color-light: var(--gray-light);
            --theme-sidebar-color-default: var(--gray);
        }

        .sidebar .nav-links li.nav-item.gray .sub-menu hr {
            background: var(--gray-light);
        }


        .sidebar .nav-links li.nav-item.blue.active,
        .sidebar .nav-links li.nav-item.blue.hover div {
            --theme-sidebar-color-light: var(--blue-light);
            --theme-sidebar-color-default: var(--blue);
        }

        .sidebar .nav-links li.nav-item.blue .sub-menu li:hover {
            --theme-sidebar-color-light: var(--blue-light);
            --theme-sidebar-color-default: var(--blue);
        }

        .sidebar .nav-links li.nav-item.blue .sub-menu hr {
            background: var(--blue-light);
        }


        .sidebar .nav-links li.nav-item.pink.active,
        .sidebar .nav-links li.nav-item.pink.hover div {
            --theme-sidebar-color-light: var(--pink-light);
            --theme-sidebar-color-default: var(--pink);
        }

        .sidebar .nav-links li.nav-item.pink .sub-menu li:hover {
            --theme-sidebar-color-light: var(--pink-light);
            --theme-sidebar-color-default: var(--pink);
        }

        .sidebar .nav-links li.nav-item.pink .sub-menu hr {
            background: var(--pink-light);
        }


        .sidebar .nav-links li.nav-item.yellow.active,
        .sidebar .nav-links li.nav-item.yellow.hover div {
            --theme-sidebar-color-light: var(--yellow-light);
            --theme-sidebar-color-default: var(--yellow);
        }

        .sidebar .nav-links li.nav-item.yellow .sub-menu li:hover {
            --theme-sidebar-color-light: var(--yellow-light);
            --theme-sidebar-color-default: var(--yellow);
        }

        .sidebar .nav-links li.nav-item.yellow .sub-menu hr {
            background: var(--yellow-light);
        }

        .sidebar .nav-links li.nav-item.brown.active,
        .sidebar .nav-links li.nav-item.brown.hover div {
            --theme-sidebar-color-light: var(--brown-light);
            --theme-sidebar-color-default: var(--brown);
        }

        .sidebar .nav-links li.nav-item.brown .sub-menu li:hover {
            --theme-sidebar-color-light: var(--brown-light);
            --theme-sidebar-color-default: var(--brown);
        }

        .sidebar .nav-links li.nav-item.brown .sub-menu hr {
            background: var(--brown-light);
        }

        .sidebar .nav-links li.nav-item.blue-green.active,
        .sidebar .nav-links li.nav-item.blue-green.hover div {
            --theme-sidebar-color-light: var(--blue-green-light);
            --theme-sidebar-color-default: var(--blue-green);
        }

        .sidebar .nav-links li.nav-item.blue-green .sub-menu li:hover {
            --theme-sidebar-color-light: var(--blue-green-light);
            --theme-sidebar-color-default: var(--blue-green);
        }

        .sidebar .nav-links li.nav-item.blue-green .sub-menu hr {
            background: var(--blue-green-light);
        }

.sidebar.close .nav-links li i {
    min-width: var(--sidebar-width-collasped);
}

.sidebar .nav-links li i {
    height: 50px;
    min-width: 80px;
    text-align: center;
    line-height: 50px;
    color: var(--gray-disabled);
    font-size: 20px;
    cursor: pointer;
    transition: all var(--transition) ease;
    padding: 0 1.7rem;
}

.sidebar .nav-links li.active i,
.sidebar .nav-links li.hover i {
    color: var(--theme-sidebar-color-default);
}

.sidebar .nav-links li .link_name {
    font-size: var(--sidebar-font-size);
    font-weight: 400;
    color: var(--text-color);
    display: inline-block;
    transition: all var(--transition) ease;
    cursor: pointer;
}

.sidebar .nav-links li.active .link_name,
.sidebar .nav-links li.hover .link_name {
    color: var(--theme-sidebar-color-default);
}

.sidebar.close .nav-links li .link_name {
    opacity: 0;
    display: none;
    pointer-events: none;
}

.sidebar .nav-links li .sub-menu {
    background: var(--white);
    visibility: hidden;
    opacity: 0;
    padding: 0;
    max-height: 0;
}

.sidebar .nav-links li.nav-item > div {
    display: flex;
    align-items: center;
    height: 40px;
    align-items: center;
}

.sidebar .nav-links li.nav-item.hover > .sub-menu {
    display: block;
    visibility: visible;
    opacity: 1;
    max-height: 1000px;
    -webkit-transition: all var(--transition);
    transition: all var(--transition);
}

.sidebar .nav-links li .sub-menu .sub-menu-heading {
    font-size: var(--sidebar-submenu-title-size);
    font-weight: bold;
    color: var(--text-color);
    transition: all var(--transition) ease;
    display: none;
}

.sidebar.close .nav-links li.nav-item > .sub-menu {
    background: rgba(255,255,255,1);
    box-shadow: 20px 20px 28px rgb(0 0 0 / 5%);
}

.sidebar.close .nav-links li .sub-menu .sub-menu-heading {
    display: block;
    margin: 0 0 0.5rem 0;
    padding: 2rem 1rem 1rem 1rem;
}

    .sidebar.close .nav-links li .sub-menu .sub-menu-heading:hover {
        background: 0;
        color: var(--gray);
    }

.sidebar .nav-links li .sub-menu hr {
    display: block !important;
    opacity: 1;
    background: var(--theme-sidebar-color-light);
    margin: 0.2rem 0;
    border: none;
    height: 1px;
}

.sidebar .nav-links li .sub-menu li {
    padding: 6px 6px 6px 80px;
}

.sidebar.close .nav-links li .sub-menu li {
    padding: 6px 12px 6px 12px;
}

.sidebar .nav-links li .sub-menu li:hover {
    color: var(--theme-sidebar-color-default);
    background: var(--theme-sidebar-color-light);
}

.sidebar .nav-links li .sub-menu a {
    color: var(--text-color);
    font-size: var(--sidebar-font-size);
    padding: 5px 0;
    white-space: break-spaces;
    transition: all var(--transition) ease;
    text-decoration: none;
    max-width: calc(var(--sidebar-width) - var(--sidebar-width-collasped));
    /*white-space: nowrap;*/
    display: block;
}


.sidebar.close .nav-links li .sub-menu {
    position: fixed;
    left: var(--sidebar-width-collasped);
    margin-top: 0;
    opacity: 0;
    display: block;
    pointer-events: none;
    top: -60px;
    bottom: 0;
    height: 100vh;
    width: 250px;
}

.sidebar.close .sub-menu hr {
    display: block !important;
    opacity: 1;
    background: var(--theme-sidebar-color-light);
    margin: 0.2rem 0;
    border: none;
    height: 1px;
}

.sidebar.close .nav-links li.hover .sub-menu {
    top: 0;
    opacity: 1;
    pointer-events: auto;
    transition: all var(--transition) ease;
}

.sidebar .nav-links li .sub-menu .link_name {
    display: none;
}

.sidebar.close .nav-links li .sub-menu .link_name {
    font-size: var(--sidebar-submenu-title-size);
    opacity: 1;
    display: block;
}

.home-section {
    position: absolute;
    background: var(--white);
    height: 100vh;
    left: var(--sidebar-width);
    transition: all var(--transition) ease;
    width: calc(100% - var(--sidebar-width));
}

.home-container {
    padding: 3rem 2rem 2rem 2rem;
}

.sidebar.close ~ .home-section {
    left: var(--sidebar-width-collasped);
    width: calc(100% - var(--sidebar-width-collasped));
}

.sidebar.close ~ .home-header {
    left: var(--sidebar-width-collasped);
}


@media (max-width: 768px) {
    .sidebar {
        width: var(--sidebar-width-collasped) !important;
    }

        .sidebar .logo-details .logo_name {
            display: none;
        }

        .sidebar .logo.full {
            transition-delay: 0s;
            display: none;
            pointer-events: none;
        }

        .sidebar .logo.small {
            transition-delay: 0s;
            pointer-events: none;
            display: block;
        }

        .sidebar.close {
            width: 0;
            left: calc(0 - var(--sidebar-width-collasped));
            left: -80px;
        }

            .sidebar.close ~ .home-section .home-header {
                position: inherit;
                left: 0;
                width: calc(100%);
                transition: all var(--transition) ease;
            }

        .sidebar ~ .home-section .home-header {
            position: inherit;
            left: var(--sidebar-width-collasped);
            width: calc(100% - var(--sidebar-width-collasped));
            transition: all var(--transition) ease;
        }

        .sidebar.close ~ .home-section {
            width: 100%;
            left: 0;
        }

        .sidebar ~ .home-section {
            width: 100%;
            left: 0;
        }

        .sidebar .link_name {
            display: none !important;
        }

        .sidebar .nav-links li .sub-menu .link_name {
            font-size: 18px;
            opacity: 1;
            display: block;
        }

        .sidebar .nav-links li .sub-menu a.hover {
            opacity: 1;
        }

        .sidebar .nav-links li .sub-menu {
            top: 0;
            position: fixed;
            left: var(--sidebar-width-collasped);
            margin-top: 0;
            padding: 10px 0 !important;
            bottom: 0;
            height: 100vh;
            box-shadow: 20px 20px 28px rgb(0 0 0 / 5%);
        }

            .sidebar .nav-links li .sub-menu .sub-menu-heading {
                display: block;
                margin: 0.5rem 0;
            }

            .sidebar .nav-links li .sub-menu li {
                padding: 6px 15px;
            }

            .sidebar .nav-links li .sub-menu hr {
                display: block !important;
                opacity: 1;
                margin: 0.2rem 0;
                border: none;
                height: 1px;
            }

    .top-bar-username {
        display: none;
    }

    .home-container {
        padding: 2.5rem 0 !important;
    }
}