.nav-left {
    max-width: 10em;
}

.nav-list {
  display: inline-flex;

  .nav-item {
    @media screen and (max-width: 768px) {
      .nav-item {
        border-top: 1px solid rgba(219, 219, 219, 0.5);
        padding: 10px;
      }
    }
      &.is-tab {
        padding: 1em;

      &.is-active {
        background-color: $primary;
        color: $white;
      }
    }
  }

    .nav-submenu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: $primary;
        text-align: left;
        padding-left: 10em;

         .nav-submenu-item {
             color: $white;
             padding: 1.2em 1.2em 1em;
             margin: 0 0 0.1em 0;
             text-align: center;

             &:hover {
                border-bottom: 2px solid $white;
             }

             &.is-active {
                border-bottom: 3px solid $white;
                font-weight: 600;
             }
         }

        .nav-submenu-item {
            display: inline-flex;
        }
    }
}

/* Menu Lateral */

.menu-vertical {
  padding-top: .5em;
  padding-left: 0;
  width: 250px;
  background: $white;
  height: 100%;
  position: fixed;
  float: left;
  z-index: 200;
  left: 0;
  top: 0;
  border-right: 1px solid #BEBEBE;

  .list {
    width: 98%;

    .header {
      font-size: 1.15em;
      font-weight: 700;
      color: #3a3a3a;
      padding: 0 12px;
      margin: 20px 0 0 10px;
    }

    .item {
      border-left: 5px solid transparent;
      font-weight: 600;
      color: #a8adb6;
      padding: 0 30px;
      height: 35px;
      line-height: 35px;
      letter-spacing: 0.2px;
      cursor: pointer;

      a {
        color: $primary-color;
      }

      &:hover {
        background: rgba(0,0,0,.05);
        margin: 0;
      }

      &.child {
        font-size: 13px;
      }
    }

    .active {
      &.item {
        background-color: transparent;
        border-left: 5px solid #458dcb;
        color: $green;
        border-radius: 0 !important;
        font-weight: 700;

        &:hover {
          background: rgba(0,0,0,.05);
          color: $green;
          margin: 0;
        }
      }
    }
  }

  .menu.usuario {
    position: absolute;
    bottom: 0;
  }
}