.navigation-container {
  display: flex;
  flex-direction: row;
  width: 100%;
  padding-left: 2rem;
}

ul {
  display: inline-flex;
  width: max-content;
  margin-right: auto;
  margin-bottom: 0rem;

  li {
    display: inline-flex;

    a {
      clear: both;
      display: block;
      width: 100%;
      min-width: 4rem;
      margin-right: 1rem;
      padding: 0.5rem 1.5rem;
      font-weight: 600;
      color: #74FAFB;
      text-align: inherit;
      white-space: nowrap;
      background-color: #054254;
      border: 0 solid red;
      border-color: #74FAFB;

      &:hover,
      &:active,
      &.active {
        color: #000;
        text-decoration: none;
        background-color: #fff;
      }
    }

    .dropdown-menu {
      color: #fff;
      background-color: #337AB7;
    }
  }

  >.dropdown-submenu {
    position: relative;

    .dropdown-menu {
      position: absolute;
      top: 2rem;
      margin-top: 0;
      margin-left: 0;
    }

    &:hover>.dropdown-menu {
      display: block;
    }

    .dropdown-submenu {
      position: relative;

      >a {
        display: block;

        &::after {
          content: "\f054";
          position: absolute;
          right: .5rem;
        }
      }

      >.dropdown-menu {
        top: 0;
        bottom: unset;
        left: 100%;
        margin-top: 0;
        margin-left: 0;
      }

      &:hover>.dropdown-menu {
        display: block;
      }
    }
  }

  &.dev-mode {

    a:hover,
    a:active,
    a.active {
      color: #fff;
      background-color: #DC3545;
    }
  }
}