:root {
      /* Menu item colors */
  --dis-sub-menu-background: #fff;
  --dis-sub-menu-item-background: #366B94;
  --dis-menu-item-background: rgba(0,0,0,0.4);
  --dis-menu-item-color: #fff;
  --dis-menu-item-indicator-background: #003399;
  --dis-menu-item-indicator-color: #990000;
  --dis-menu-item-hover-background: rgba(0,0,0,0.6);
  --dis-menu-item-hover-color: #fff;
  --dis-menu-item-expanded-background: #88ff00;
  --dis-menu-item-expanded-color: #996655;
  
  --dis-menu-item-padding: inherit;
  --dis-menu-item-padding-y: 1px;
  --dis-menu-item-padding-x: 1rem;
}

.hide {
  display: none !important;
}

.show {
  display: flex !important;
}

nav.mainmenu ul {
  display: none;
  list-style: none;
  padding: 0;
  flex-direction: column;
  color: #fff;
  width: 100%;
  min-width: -webkit-max-content;
  min-width: -moz-max-content;
  min-width: max-content;
  gap: var(--dis-menu-item-padding-y) var(--dis-menu-item-padding-x);
}
nav.mainmenu ul ul {
  background: var(--dis-sub-menu-background);
  --dis-menu-item-background: var(--dis-sub-menu-item-background);
  --dis-button-background: var(--dis-sub-menu-item-background);
}
nav.mainmenu li {
  position: relative;
  padding: 0;
  min-width: -webkit-max-content;
  min-width: -moz-max-content;
  min-width: max-content;
}
nav.mainmenu li > a, nav.mainmenu li > button {
  min-width: 44px;
  min-height: 44px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--dis-menu-item-padding, var(--dis-menu-item-padding-y, 0.5rem) var(--dis-menu-item-padding-x, 1rem));
  text-decoration: none;
  background: var(--dis-menu-item-background);
  color: var(--dis-menu-item-color);
  transition: background 250ms linear, color 250ms linear;
  flex: 1 1;
  text-transform: uppercase;
}

nav.mainmenu button {border: none;}

nav.mainmenu li > a:has(+ button[aria-expanded=true]) {
  --dis-menu-item-background: var(--dis-menu-item-indicator-background);
  --dis-menu-item-color: var(--dis-menu-item-indicator-color);
}
nav.mainmenu li > a:hover, nav.mainmenu li > button:hover {
  --dis-menu-item-background: var(--dis-menu-item-hover-background);
  --dis-menu-item-color: var(--dis-menu-item-hover-color);
}
nav.mainmenu li > a:hover + button {
  --button-background: var(--dis-menu-item-indicator-background);
  --button-color: var(--dis-menu-item-indicator-color);
}
nav.mainmenu li > a:has(+ button[aria-expanded=true]):hover {
  --dis-menu-item-background: var(--dis-menu-item-hover-background);
  --dis-menu-item-color: var(--dis-menu-item-hover-color);
}
nav.mainmenu .dropdown > button::after, nav.mainmenu:not(.top-link-disclosure-menu) .dropdown > button::after, nav.mainmenu.top-link-disclosure-menu .dropdown .dropdown > button::after {
  content: "▾";
  display: flex;
  align-items: center;
  justify-content: center;
}
nav.mainmenu .dropdown > button[aria-expanded=true], nav.mainmenu:not(.top-link-disclosure-menu) .dropdown > a[aria-expanded=true], nav.mainmenu.top-link-disclosure-menu .dropdown .dropdown > a[aria-expanded=true] {
  --button-background: var(--dis-menu-item-expanded-background);
  --button-color: var(--dis-menu-item-expanded-color);
}
nav.mainmenu:not(.top-link-disclosure-menu) .dropdown > a::after, nav.mainmenu.top-link-disclosure-menu .dropdown .dropdown > a::after {
  padding-left: calc(var(--dis-menu-item-padding-x, 1rem) * 2);
}
nav.mainmenu.treeview {
  grid-area: tree;
}
nav.mainmenu.top-link-disclosure-menu li {
  display: flex;
  flex-wrap: wrap;
}

  nav.mainmenu > button {
    display: none;
  }
  nav.mainmenu > ul,
nav.mainmenu > ul.hide {
    display: flex !important;
  }
  nav.mainmenu li {
    width: auto;
  }
  nav.mainmenu:not(.treeview) > ul {
    flex-direction: row;
  }
  nav.mainmenu:not(.treeview) .dropdown ul {
    position: absolute;
    top: 100%;
    left: 0;
  }
  nav.mainmenu:not(.treeview) .dropdown ul .dropdown ul {
    top: 0;
    left: 100%;
  }
  nav.mainmenu:not(.treeview) .dropdown.dropdown-left ul {
    left: unset;
    right: 0;
  }
  nav.mainmenu:not(.treeview) .dropdown.dropdown-left ul .dropdown ul {
    left: unset;
    right: 100%;
  }