/*================================================= SIDEBAR */
.sidebar{
    background-color: var(--white-color);
    width: 260px;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    padding: 80px 20px;
    z-index: 100;
    overflow-y: scroll;
    box-shadow: 0 0 1px var(--grey-color-light);
    transition: all 0.5s ease;
}

.sidebar.close {
    padding: 60px 0;
    width: 80px;
}
/*================================================= MENU ITEMS */
.menu_items {
    padding: 0;
    list-style: none;
    margin: 0;
}
.nav_link {
    display: flex;
    align-items: center;
    width: 100%;
    border-radius: 8px;
    text-decoration: none;
    color: var(--grey-color);
    font-weight: 600;
    position: relative;
    padding: 5px 10px 5px 10px;
    transition: background-color 0.3s ease, color 0.3s ease;
}
  
.nav_link:hover, .nav_link.active {
    background: #5a7fc5;
    padding: 5px 10px 5px 10px;
    color: #fff;
    margin: 0;
}
  
.submenu_item {
    cursor: pointer;
    display: flex;
    align-items: center;
    position: relative;
    transition: color 0.3s ease;
}
  
.arrow-left {
    margin-left: auto;
    transition: transform 0.3s;
}
  
.show_submenu .arrow-left {
    transform: rotate(90deg);
}

/*=============================================== SUBMENU */
.submenu {
    display: none;
    padding-left: 20px;
    list-style: none;
}
  
.show_submenu .submenu {
    display: block;
}
  
.sublink {
    display: block;
    padding: 5px 10px 5px 10px;
    color: var(--grey-color);
    text-decoration: none;
}
  
.sublink:hover, .sublink.active {
    text-decoration: none;
}
  
/*============================================== ESTADO ATIVO */
.nav_link.active, .sublink.active {
    background-color: #5a7fc5;
    padding: 5px 10px 5px 10px;
    margin: 2px 0 2px 0;
    color: #fff;
    font-weight: 600;
}