#nav-main {
  font-family: $standard-font-family;
  @include anchor-no-underline;

  a.collapsible { // to counter unknown css behavior
    text-decoration: none;
  }

  ul {
    padding: 0;
    margin: 0;
    width: 100%;
    list-style-type: none;
    background-color: $white;
  }
  & > ul {
    border: 1px solid $nav-main-border-color;
    ul {
        display: none; // hide inactive sub-levels
    }
    a {
      min-height: 44px;
      font-size: 16px;
      display: flex; // a serves as container, text is inside a span
      flex-direction: column;
      justify-content: center;
      padding:15px;
    }
    & > li{
      // level 1
      a.collapsible {
        color: $nav-main-collapsible-anchor-color;
        background-color: $white;
        border-bottom: none;
      }

      & > a {
        background-color: $nav-main-active-menu-background-color;
        border-bottom: 1px solid $nav-main-active-menu-bottom-border-color;
        color: $nav-main-active-menu-link-color;
      }
      &>ul {
        //level 2
        li {
          a { // inactive menu item
            font-size: 14px;
            padding-left: 25px;
            color: $nav-main-level-2-link-color;
            &.active {
              border-left: 5px solid $nav-main-level-2-active-link-left-border-color;
              color: $nav-main-level-2-active-link-color;
            }
          }
          &>ul {
            //level 3
            li {
              a {
                padding-left: 30px;
              }
              &>ul {
                //level 4
                li {
                  a {
                    padding-left: 35px;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}