nav {
  height: calc(100vh - 72px);

  .unread {
    font-weight: bolder;
  }

  solid-route.menu,
  solid-link.menu,
  div.menu {
  
    .icon {
      padding: 8px;
      border-radius: 50%;
    }
    &:hover .icon,
    &[active] .icon {
      color: white;
      background: var(--color-heading);
    }
    &[active]+.divider {
      display: none;
    }
  }


  /* Styles for the small icon */
  .sub-menu-icon {
    margin-left: 3px;
    margin-right: 3px;
    opacity: 0.8;
    vertical-align: top;

    div {
      font-family: simple-line-icons;
      font-size: 12px;
    }
  }

  .sub-menu-name {
    margin-right: 14px;
  }




  /* Ellipsis for project tab */
  .project-tab {

    hubl-menu-fix-url-project {
      display: block;
    }

    .project-customer,
    .project-name {
      display: block;
      width: calc(80vw - 96px);

      @media(min-width: 1024px) {
        width: calc(100% - 10px);
      }
    }

    .project-customer,
    .project-name>div {

      @media(min-width: 1024px) {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }


  .divider {
    height: 1px;
    background-color: #D7DBE0;
    opacity: 0.2;
  }
}