.my-menu,
.my-menu * {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html.my-menu-page--contained {
  scrollbar-gutter: stable;
}

html.my-menu-page--locked {
  overflow: hidden;
  overscroll-behavior: none;
  scrollbar-gutter: stable;
}

html.my-menu-page--locked body {
  overflow: hidden;
  overscroll-behavior: none;
}

.my-menu {
  --my-menu-bg: rgba(255, 255, 255, 0.94);
  --my-menu-text: #172033;
  --my-menu-muted: #667085;
  --my-menu-border: rgba(125, 139, 156, 0.22);
  --my-menu-border-width: 0px;
  --my-menu-desktop-divider-color: var(--my-menu-border);
  --my-menu-desktop-divider-size: 10px;
  --my-menu-desktop-divider-thickness: 1px;
  --my-menu-shadow: 0 18px 42px rgba(15, 23, 42, 0.12);
  --my-menu-radius: 16px;
  --my-menu-gap: 0.18rem;
  --my-menu-item-gap: 14px;
  --my-menu-item-padding-x: 0.82rem;
  --my-menu-item-padding-y: 0.62rem;
  --my-menu-item-radius: 12px;
  --my-menu-hover-bg: #ffffff;
  --my-menu-hover-effect-color: #008980;
  --my-menu-hover-effect-distance: 7px;
  --my-menu-hover-effect-radius: 0px;
  --my-menu-hover-effect-thickness: 2px;
  --my-menu-hover-text: #172033;
  --my-menu-hover-font-weight: 900;
  --my-menu-active-bg: #ffffff00;
  --my-menu-active-effect-color: #007675;
  --my-menu-active-effect-distance: 7px;
  --my-menu-active-effect-radius: 0px;
  --my-menu-active-effect-thickness: 2px;
  --my-menu-active-text: #007675;
  --my-menu-active-font-weight: 900;
  --my-menu-submenu-bg: rgba(255, 255, 255, 0.98);
  --my-menu-submenu-border: rgba(125, 139, 156, 0.24);
  --my-menu-submenu-shadow: 0 24px 48px rgba(15, 23, 42, 0.16);
  --my-menu-submenu-radius: 16px;
  --my-menu-submenu-min-width: 14rem;
  --my-menu-submenu-offset: 0.55rem;
  --my-menu-submenu-side-offset: 0.42rem;
  --my-menu-submenu-padding: 0.48rem;
  --my-menu-submenu-gap: 0.2rem;
  --my-menu-submenu-item-gap: 0.54rem;
  --my-menu-submenu-item-padding-x: 0.8rem;
  --my-menu-submenu-item-padding-y: 0.6rem;
  --my-menu-submenu-frame-backdrop-filter: blur(16px) saturate(1.12);
  --my-menu-submenu-frame-inner-border: var(--my-menu-submenu-border);
  --my-menu-submenu-frame-inner-inset: 5px;
  --my-menu-submenu-frame-padding: 0.56rem;
  --my-menu-submenu-connector-background: var(--my-menu-submenu-bg);
  --my-menu-submenu-connector-border: var(--my-menu-submenu-border);
  --my-menu-submenu-connector-border-width: 1px;
  --my-menu-submenu-connector-inset: 1.375rem;
  --my-menu-submenu-connector-inline-size: 1.25rem;
  --my-menu-submenu-connector-block-size: 0.6875rem;
  --my-menu-submenu-connector-overlap: 1px;
  --my-menu-submenu-connector-shadow: 0 0 0 transparent;
  --my-menu-mobile-bg: var(--my-menu-bg);
  --my-menu-mobile-text: var(--my-menu-text);
  --my-menu-mobile-font-size: var(--my-menu-font-size);
  --my-menu-mobile-item-gap: 14px;
  --my-menu-mobile-item-min-padding-x: 0.38rem;
  --my-menu-mobile-hover-bg: var(--my-menu-hover-bg);
  --my-menu-mobile-hover-effect-color: var(--my-menu-hover-effect-color);
  --my-menu-mobile-hover-effect-distance: var(--my-menu-hover-effect-distance);
  --my-menu-mobile-hover-effect-thickness: var(--my-menu-hover-effect-thickness);
  --my-menu-mobile-hover-text: var(--my-menu-hover-text);
  --my-menu-mobile-hover-font-weight: var(--my-menu-hover-font-weight);
  --my-menu-mobile-active-bg: var(--my-menu-active-bg);
  --my-menu-mobile-active-effect-color: var(--my-menu-active-effect-color);
  --my-menu-mobile-active-effect-distance: var(--my-menu-active-effect-distance);
  --my-menu-mobile-active-effect-inset-block: calc(var(--my-menu-item-effect-padding-y) - var(--my-menu-mobile-active-effect-distance));
  --my-menu-mobile-active-effect-inset-inline-end: calc(var(--my-menu-item-effect-padding-x) - var(--my-menu-mobile-active-effect-distance));
  --my-menu-mobile-active-effect-inset-inline-start: calc(var(--my-menu-item-effect-padding-x) - var(--my-menu-mobile-active-effect-distance));
  --my-menu-mobile-active-effect-leading-space: 0px;
  --my-menu-mobile-active-effect-thickness: var(--my-menu-active-effect-thickness);
  --my-menu-mobile-active-text: var(--my-menu-active-text);
  --my-menu-mobile-active-font-weight: var(--my-menu-active-font-weight);
  --my-menu-mobile-backdrop-bg: rgba(15, 23, 42, 0.42);
  --my-menu-mobile-back-gap: 0.62rem;
  --my-menu-mobile-panel-bg: var(--my-menu-mobile-bg);
  --my-menu-mobile-panel-border: var(--my-menu-border);
  --my-menu-mobile-panel-border-width: 2px;
  --my-menu-mobile-panel-duration: 220ms;
  --my-menu-mobile-panel-easing: cubic-bezier(0.22, 1, 0.36, 1);
  --my-menu-mobile-panel-radius: 0px;
  --my-menu-mobile-panel-shadow: var(--my-menu-shadow);
  --my-menu-mobile-panel-text: var(--my-menu-mobile-text);
  --my-menu-mobile-panel-width: 22rem;
  --my-menu-mobile-drawer-border-color: var(--my-menu-mobile-panel-border);
  --my-menu-mobile-drawer-border-opacity: 1;
  --my-menu-mobile-drawer-border-width: 0px;
  --my-menu-mobile-drawer-content-offset: 0px;
  --my-menu-mobile-drawer-top-offset: 0px;
  --my-menu-mobile-drawer-top-border-color: var(--my-menu-mobile-panel-border);
  --my-menu-mobile-drawer-top-border-opacity: 1;
  --my-menu-mobile-drawer-top-border-width: 0px;
  --my-menu-mobile-submenu-indicator-color: var(--my-menu-submenu-indicator-color);
  --my-menu-mobile-submenu-indicator-frame-bg: var(--my-menu-submenu-indicator-frame-bg);
  --my-menu-mobile-submenu-indicator-frame-border: var(--my-menu-submenu-indicator-frame-border);
  --my-menu-mobile-submenu-indicator-frame-border-width: var(--my-menu-submenu-indicator-frame-border-width);
  --my-menu-mobile-submenu-indicator-frame-radius: var(--my-menu-submenu-indicator-frame-radius);
  --my-menu-mobile-submenu-indicator-frame-size: var(--my-menu-submenu-indicator-frame-size);
  --my-menu-mobile-submenu-chevron-optical-offset: -2px;
  --my-menu-mobile-submenu-meta-padding-inline-start: 0.44rem;
  --my-menu-mobile-submenu-trigger-padding-inline-end: var(--my-menu-item-effect-padding-x);
  --my-menu-toggle-bg: #ffffff;
  --my-menu-toggle-border: #999999;
  --my-menu-toggle-border-width: 3px;
  --my-menu-toggle-ring-width: max(var(--my-menu-toggle-border-width), var(--my-menu-toggle-hover-border-width));
  --my-menu-toggle-shadow: 0 0 0 0 transparent;
  --my-menu-toggle-hover-bg: #eef2ff;
  --my-menu-toggle-hover-border: #008980;
  --my-menu-toggle-hover-border-width: 2px;
  --my-menu-toggle-hover-text: #172033;
  --my-menu-toggle-text: #172033;
  --my-menu-toggle-size: 2.55rem;
  --my-menu-toggle-radius: 12px;
  --my-menu-indicator-size: 0.78rem;
  --my-menu-submenu-indicator-color: currentColor;
  --my-menu-submenu-indicator-frame-bg: transparent;
  --my-menu-submenu-indicator-frame-border: currentColor;
  --my-menu-submenu-indicator-frame-border-width: 0px;
  --my-menu-submenu-indicator-frame-radius: 0px;
  --my-menu-submenu-indicator-frame-size: 1.55rem;
  --my-menu-font-family: var(--my-components-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI Variable Display", "Segoe UI", system-ui, Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif);
  --my-menu-font-size: 15px;
  --my-menu-font-weight: 760;
  --my-menu-line-height: 1.2;
  --my-menu-duration: 150ms;
  --my-menu-easing: cubic-bezier(0.16, 1, 0.3, 1);
  --my-menu-z-index: 1000;
  --my-menu-justify: center;

  position: relative;
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: var(--my-menu-justify);
  gap: var(--my-menu-gap);
  color: var(--my-menu-text);
  font-family: var(--my-menu-font-family);
  font-size: var(--my-menu-font-size);
  line-height: var(--my-menu-line-height);
}

.my-menu--align-left {
  --my-menu-justify: flex-start;
}

.my-menu--align-right {
  --my-menu-justify: flex-end;
}
.my-menu[data-my-menu-layout="desktop"] {
  padding: 0.2rem;
  border: 0;
  border-radius: var(--my-menu-radius);
  outline: var(--my-menu-border-width) solid var(--my-menu-border);
  outline-offset: 0;
  background: var(--my-menu-bg);
  box-shadow: var(--my-menu-shadow);
}

.my-menu[hidden],
.my-menu [hidden] {
  display: none !important;
}