.navbar-shoelace {

  *, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  & > * {
    min-width: 0;
    min-height: 0;
  }

  ul {
    list-style: none;
  }

  a {
    text-decoration: none;
    display: block;
    padding: 3px 20px 3px 0;
    font-weight: 400;
    line-height: 1.42857143;
    color: #333333;
    white-space: nowrap;
  }

  a:hover {
    text-decoration: none;
  }

  button:focus-visible {
    outline: none
  }

  display: flex;
  flex-direction: row;
  align-items: center;

  line-height: 1.42857143;

  height: 50px;
  border: 1px;
  margin-bottom: 20px;
  background-image: linear-gradient(to bottom, #3c3c3c 0%, #222 100%);
  background-repeat: repeat-x;
  background-color: #222;
  border-color: #080808;
  border-radius: 4px;

  .mobile-navbar-header {
    display: none;
  }

  .menu-structure-wrapper {
    flex-grow: 1;
    height: 100%;
    /* width: 100%; */
  }

  .menu-structure {
    overflow: hidden;
    height: 100%;
    width: 100%;
  }

  .loginout-link {
    height: 100%;
    display: flex;
    align-items: center;
  }

  .login-form-wrapper {
    margin-left: auto;
    margin-right: 2em;
  }

  .login-form-wrapper:empty {
    display: none;
  }

  .login-form-wrapper:not(:has(*)) {
    display: none;
  }

  .form-group > input {
    padding: 6px 12px;
  }

  .form-group > *, #login-button > * {
    display: inline-block;
    margin-right: 8px;
    vertical-align: middle;
  }

  .form-group {
    position: relative;
    display: inline-block;
  }

  .form-group > .jw-image {
    display: none;
  }

  .form-group > .jw-pw-toggle {
    display: inline-block;
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translate(0%, -50%);
    vertical-align: middle;
  }

  .top-menu-list {
    height: 100%;
    width: 100%;
    display: flex;
    padding: 0 2em;
    align-items: center;
  }

  .top-menu-list > li {
    border: 0;
    height: 100%;
  }

  .submenu-button, .loginout-link, .jw-li-direct-link {
    display: flex;
    align-items: center;
    min-height: 100%;
    border: 0;
    padding: 0 1em;
    cursor: pointer;
    white-space: nowrap;
    background-image: none;
  }

  &, .submenu-button, .loginout-link, .jw-direct-link {
    background-color: transparent;
    font-family: "Helvetica New", Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #ddd;
  }

  .navbar-form {
    display: inline-flex;
  }

  .submenu-button:hover, .jw-direct-link:hover, .loginout-link:hover, .jw-submenu-link:hover   {
    color: #fff;
  }

  .top-menu-list > li .submenu-button > .jw-image.open-indicator {
    transition: rotate 300ms ease;
  }

  .top-menu-list > li:has(.show) .submenu-button > .jw-image.open-indicator {
    rotate: 180deg;
  }

  .top-menu-list > li:has(.show) .submenu-button {
    background-color: #080808;
    color: #fff;
  }

  .li-loginout-link {
    margin-left: auto; /* Push login-area to the right */
  }

  .sub-menu > ul > li > div.jw-image, ul > li > div.jw-image {
    background-size: contain;
    height: 1.1em;
    width: 1.1em;
    margin-left: 0.75em;
    margin-right: 0.3em;
  }

  .sub-menu > ul > li > div.jw-image.jw-icon-here-marker {
    background-image: var(--jw-url-icon-arrow-forward);
  }

  ul > li > div.jw-icon-here-marker-white {
    background-image: var(--jw-url-icon-arrow-forward-white);
  }

  .sub-menu > ul > li > a {
    padding: 5px 15px 5px 0px;
    text-decoration: none;
  }

  .sub-menu.show li:not(.jw-active):hover {
    color: #23527c;
    background-image: linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0);
    background-repeat: repeat-x;
    background-color: #e8e8e8;
    outline: 0;
  }

  .sub-menu.show li.jw-active {
    cursor: unset;
  }
  .sub-menu.show li.jw-active a {
    color: #666;
  }

  .sub-menu {
    position: absolute;
    display: grid;
    grid-template-rows: 0fr;
    transition: 300ms ease-in-out;
    padding: 0;

    z-index: 1000;
    /* top: 100%; */
    /* left: 0; */
    /* float: left; */

    min-width: 160px;
    /* border: 1px solid rgba(0, 0, 0, 0.15); */
    /* margin: 2px 0 0; */
    border: 0;
    margin: 0;
    font-size: 14px;
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border-radius: 4px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);

    > ul {
      overflow: hidden;
    }

    > ul > li {
      display: flex;
      align-items: center;
    }

    > ul > li.jw-private {
      display: none;
    }
  }

  .sub-menu.show {
    grid-template-rows: 1fr;
    padding: 5px 0;
  }

  @media screen and (max-width: 1199px) {

    flex-direction: column;
    height: auto;

    a {
      color: #9d9d9d;
      line-height: 20px;
      padding: 5px 15px;
    }

    .mobile-navbar-header {
      width: 100%;
      display: flex;
      flex-direction: column;
    }

    .mobile-navbar-header > * {
      min-width: 0;
      min-height: 0;
    }

    .mobile-navbar-stub {
      width: 100%;
      display: flex;
      align-items: center;
    }

    .mobile-navbar-stub > * {
      min-width: 0;
      min-height: 0;
    }

    .menu-structure-wrapper {
      display: grid;
      grid-template-rows: 0fr;
      transition: 300ms ease-in-out;
      width: 100%;
    }

    &.show > .menu-structure-wrapper {
      grid-template-rows: 1fr;
    }

    .submenu-button, .loginout-link {
      min-height: 30px;
    }

    .mobile-navbar-divider {
      width: calc(100% - 10px);
      display: flex;
      height: 10px;
      border-top: 1px solid transparent;
      border-color: #101010;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }

    .mobile-navbar-divider > * {
      min-width: 0;
      min-height: 0;
    }

    .hamburger-icon {
      height: 14px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .hamburger-icon > div {
      width: 22px;
      height: 2px;
      min-height: 2px;
      background-color: #ddd;
      border-radius: 1px;
      /* margin: 6px 0; */
    }

    .hamburger-icon:hover > div {
      background-color: #fff;
    }

    .hamburger-button {
      display: unset;
      /* position: relative; */
      height: auto; /* height 100% makes it too big with all these borders and margins */
      padding: 9px 10px;
      margin-left: auto; /* Push button to the right */
      margin-right: 15px;
      margin-top: 8px;
      margin-bottom: 8px;
      background-color: transparent;
      background-image: none;
      border: 1px solid transparent;
      border-radius: 4px;
      border-color: #333;
    }

    .logo-janware {
      margin-left: 15px;
      width: 200px;
    }

    .top-menu-list {
      /* display: none; */
      height: auto;
      align-items: flex-start;
      flex-direction: column;
      /* padding: 0 2em; */
      padding: 0;
    }

    .top-menu-list > li {
      /* border-bottom: 1px solid transparent; */
      width: 100%;
    }

    .top-menu-list > li > * {
      text-align: left;
    }

    .top-menu-list > li > button, .top-menu-list > li > a {
      padding: 10px;
    }

    .top-menu-list > li > button {
      width: 100%;
    }

    .top-menu-list > li > a {
      /* width: 100%; */
      /* 1) unnecessary, since a is a flexbox, and 2) detrimental, since
       * padding LR will increase parent 100% */
    }

    .sub-menu {
      position: static;
      background-color: transparent;
      box-shadow: none;
    }

    .sub-menu.show li:not(.jw-active):hover {
      color: unset;
      background-image: none;
      filter: unset;
      background-color: unset;
    }

    .sub-menu > ul {
      /* padding: 5px 0; */
    }

    .sub-menu > ul > li > a {
      padding: 5px 15px 5px 0px;
    }

    .li-loginout-link {
      margin-left: unset;
    }

    .login-form-wrapper {
      margin-right: 0;
    }

    .navbar-form {
      padding: 10px 15px;
      display: block;
      width: 100%;
    }

    .form-group > *, #login-button > * {
      display: block;
      margin-right: 0;
    }

    .form-group {
      display: inline-flex;
      align-items: center;
      margin-bottom: 5px;
      width: 100%;
    }

    .form-control {
      width: 100%;
    }

    .jw-image-username-field, .jw-image-pw-field {
      display: none;
    }
    .jw-image-hide-password, .jw-image-show-password {
      position: absolute;
      right: 34px; /* 24 + .navbar-form padding-lr */
    }

    .jw-image-login {
      height: 14px;
      width: 16px;
      background-size: cover;
      margin-right: 5px;
    }

    #login-button {
      display: flex;
      align-items: center;
      margin-bottom: 0;
      font-weight: normal;
      text-align: center;
      white-space: nowrap;
      vertical-align: middle;
      touch-action: manipulation;
      cursor: pointer;
      background-image: none;
      border: 1px solid transparent;
      padding: 6px 12px;
      font-size: 14px;
      line-height: 1.42857143;
      border-radius: 4px;
      user-select: none;
      background-color: #f5f5f5;
      color: #333333;
    }
  }
}