.service-navigation {
  align-items: center;
  overflow: visible;
}

.service-navigation-group {
  position: relative;
  flex: 0 0 auto;
}

.service-navigation-group summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.service-navigation-group summary::-webkit-details-marker {
  display: none;
}

.service-navigation-group summary::after {
  content: "▾";
  margin-left: 6px;
  font-size: 10px;
}

.service-navigation-group[open] summary::after {
  content: "▴";
}

.site-header .service-navigation-group summary {
  color: #c9d2cc;
  padding: 9px 12px;
  border-radius: 6px;
  font-size: 14px;
}

.site-header .service-navigation-group summary:hover,
.site-header .service-navigation-group summary:focus-visible,
.site-header .service-navigation-group.is-active summary,
.site-header .service-navigation-group[open] summary {
  color: #9fce61;
  background: #17231b;
}

.service-navigation-submenu {
  position: absolute;
  z-index: 40;
  top: calc(100% + 7px);
  left: 0;
  display: grid;
  min-width: 190px;
  gap: 3px;
  padding: 7px;
  border: 1px solid #3a4641;
  border-radius: 7px;
  background: #111716;
  box-shadow: 0 14px 32px #0009;
}

.service-navigation-submenu a {
  display: block;
  white-space: nowrap;
}

.site-header .service-navigation-submenu a {
  padding: 9px 10px;
}

.service-navigation-group:nth-last-child(-n+2) .service-navigation-submenu {
  right: 0;
  left: auto;
}

@media (min-width: 981px) {
  .vault-auth-header .service-navigation-group .service-navigation-submenu {
    top: 0;
    right: auto;
    left: calc(100% + 8px);
  }
}

.service-navigation--standalone {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 24px;
}

.service-navigation--standalone a {
  color: #cbd2ce;
  border: 1px solid #3a4641;
  border-radius: 5px;
  padding: 8px 11px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
}

.service-navigation--standalone .service-navigation-group summary {
  color: #cbd2ce;
  border: 1px solid #3a4641;
  border-radius: 5px;
  padding: 8px 11px;
  font-size: 13px;
  font-weight: 700;
}

.service-navigation--standalone .service-navigation-group summary:hover,
.service-navigation--standalone .service-navigation-group summary:focus-visible,
.service-navigation--standalone .service-navigation-group.is-active summary,
.service-navigation--standalone .service-navigation-group[open] summary {
  color: #12210d;
  background: #9fce61;
  border-color: #9fce61;
}

.service-navigation--standalone .service-navigation-submenu a {
  border: 0;
  background: transparent;
}

.service-navigation--standalone .service-navigation-submenu a:hover,
.service-navigation--standalone .service-navigation-submenu a.is-active {
  color: #12210d;
  background: #9fce61;
}

.service-navigation--standalone a:hover,
.service-navigation--standalone a.is-active {
  color: #12210d;
  background: #9fce61;
  border-color: #9fce61;
}

@media (max-width: 1020px) {
  .site-header {
    gap: 10px;
    flex-wrap: wrap;
  }

  .site-header .service-navigation {
    order: 3;
    flex: 1 0 100%;
    width: 100%;
    flex-wrap: wrap;
    overflow: visible;
  }

  .site-header .service-navigation a {
    flex: 0 0 auto;
  }
}

@media (max-width: 640px) {
  .service-navigation--standalone {
    flex-wrap: wrap;
    margin-right: 0;
    padding-right: 0;
    overflow: visible;
  }

  .service-navigation--standalone a {
    flex: 0 0 auto;
  }

  .service-navigation-submenu {
    min-width: min(220px, calc(100vw - 32px));
  }
}