/* ---------- BASELINES ---------- */

.dii-content-nav-menu ul {
  display: flex;
  list-style: none;
  margin: 0;
  border-radius: 0.5rem;
  border: 1px solid var(--cms-border);
  background: var(--cms-bg);
  padding: 0;
}
.dii-content-nav-menu li {
  position: relative;
  background: inherit;
  color: var(--cms-text);
}
.dii-content-nav-menu a,
.dii-content-nav-menu a:hover {
  color: inherit;
}
.dii-content-nav-menu .dii-sub-menu-link {
  display: block;
  border-radius: inherit;
  background: inherit;
  padding: 0.75rem 1rem;
  transition: all var(--transition);
}
.dii-content-nav-menu li:hover {
  background: var(--cms-bg-hover);
}
.dii-content-nav-menu .dii-sub-menu-link:has(+ a) {
  padding-right: 2rem;
}
.dii-content-nav-menu .dii-sub-menu-icon {
  position: absolute;
  top: 0.75rem;
  right: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
}
.dii-content-nav-menu .dii-sub-menu-icon::before {
  content: "\f054";
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  font: var(--fa-font-solid);
  font-size: 0.75rem;
  transition: all var(--transition);
}
.dii-content-nav-menu ul ul {
  flex-direction: column;
  visibility: hidden;
  opacity: 0;
  z-index: 2;
  position: absolute;
  top: 0;
  left: 100%;
  min-width: 14rem;
  border-radius: 0 0.5rem 0.5rem 0.5rem;
  border: 1px solid var(--cms-border);
  transition: opacity var(--transition);
}
.dii-content-nav-menu li:hover > ul {
  visibility: visible;
  opacity: 1;
}
.dii-content-nav-menu ul ul > li:first-child {
  border-top-right-radius: 0.5rem;
}
.dii-content-nav-menu ul ul > li:has(ul):hover {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.dii-content-nav-menu ul ul > li:last-child {
  border-bottom-right-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}
.dii-content-nav-menu ul ul > li:first-child {
  border-top-left-radius: 0;
  border-top-right-radius: 0.5rem;
  border-bottom-left-radius: 0;
}

/* ----- Horizontal ----- */

.dii-content-nav-menu.horizontal > ul {
  flex-direction: row;
  align-items: center;
}
.dii-content-nav-menu.horizontal > ul > li:first-child {
  border-top-left-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}
.dii-content-nav-menu.horizontal > ul > li:first-child:has(.dii-sub-menu-link + a):hover {
  border-bottom-left-radius: 0;
}
.dii-content-nav-menu.horizontal > ul > li > ul {
  top: 100%;
  left: 0;
}
.dii-content-nav-menu.horizontal > ul > li > .dii-sub-menu-icon::before {
  content: "\f078";
}
.dii-content-nav-menu.horizontal > ul > li > ul > li:first-child {
  border-top-right-radius: 0;
}

/* ----- Vertical ----- */

.dii-content-nav-menu.vertical > ul {
  flex-direction: column;
}
.dii-content-nav-menu.vertical > ul > li:first-child {
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}
.dii-content-nav-menu.vertical ul:has(> li:first-child:hover),
.dii-content-nav-menu.vertical ul > li:first-child:has(ul):hover {
  border-top-right-radius: 0;
}
.dii-content-nav-menu.vertical ul:not(:has(> li:first-child > ul)) {
  border-top-right-radius: 0.5rem !important;
}
.dii-content-nav-menu.vertical > ul > li:last-child {
  border-bottom-right-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}
.dii-content-nav-menu.vertical > ul > li:last-child:has(ul):hover {
  border-bottom-right-radius: 0;
}

/* ---------- COLOR OPTIONS ---------- */

.dii-content-nav-menu:not(.theme-none) ul {
  border: 0;
}
.dii-content-nav-menu:not(.theme-none) .dii-sub-menu-icon {
  top: 0.75rem;
  right: 0.75rem;
}
.dii-content-nav-menu.theme-dark {
  --cms-bg: #1d293d;
  --cms-bg-hover: #0f172b;
  --cms-text: var(--color-white);
}
.dii-content-nav-menu.theme-light {
  --cms-bg: #f1f5f9;
  --cms-bg-hover: #e2e8f0;
  --cms-text: var(--color-text);
}
.dii-content-nav-menu.theme-blue {
  --cms-bg: #1447e6;
  --cms-bg-hover: #193cb8;
  --cms-text: var(--color-white);
}
.dii-content-nav-menu.theme-gold {
  --cms-bg: #e17100;
  --cms-bg-hover: #bb4d00;
  --cms-text: var(--color-white);
}
.dii-content-nav-menu.theme-green {
  --cms-bg: #00a63e;
  --cms-bg-hover: #008235;
  --cms-text: var(--color-white);
}
.dii-content-nav-menu.theme-red {
  --cms-bg: #e7000b;
  --cms-bg-hover: #c10007;
  --cms-text: var(--color-white);
}

/* ---------- HEADER MAIN NAV ---------- */

#design-container-main-nav .dii-content {
  position: relative;
}
#design-container-main-nav:has(.dii-content-nav-menu) .dii-content-list {
  min-height: initial;
}
#design-container-main-nav ul {
  border: 0;
  background: transparent;
}
#design-container-main-nav ul ul {
  border-top-right-radius: 0.5rem;
  background: var(--cms-bg);
}
#design-container-main-nav .dii-content-nav-menu ul ul > li:first-child:not(:hover) {
  border-top-right-radius: 0.5rem;
}
#design-container-main-nav .dii-content-nav-menu ul ul li:hover {
  background: var(--cms-bg-hover);
}

/* Top Nav Styles */

#design-container-main-nav .dii-content-nav-menu > ul > li {
  border-radius: 0.5rem;
  color: var(--cms-text);
}
#design-container-main-nav .dii-content-nav-menu > ul > li:has(ul) {
  border-radius: 0.5rem 0.5rem 0 0;
}
#design-container-main-nav .dii-content-nav-menu > ul > li:hover {
  background: var(--cms-bg);
}
#design-container-main-nav .dii-content-nav-menu > ul > li > .dii-sub-menu-link {
  padding: 0.75rem 1rem;
}
#design-container-main-nav .dii-content-nav-menu > ul > li > .dii-sub-menu-icon {
  display: none;
}

/* Adding Nav Items */

#design-container-main-nav:has(.dii-content-nav-menu) .dii-content-add {
  display: none;
}
#design-container-main-nav .dii-content-add:hover {
  background: transparent;
}
#design-container-main-nav .dii-content-add a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
#design-container-main-nav .dii-content-add a::after {
  content: "Add Nav";
}
#design-container-main-nav .dii-content-add a:hover {
  background: var(--cms-bg-hover);
}
#design-container-main-nav .dii-content-add-nav .ui-icon,
#design-container-main-nav .dii-content-add-nav span {
  display: none;
}
#design-container-main-nav .dii-content-add-area {
  display: none !important;
}

/* ---------- MEDIA QUERIES ---------- */

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



}