/* Navigation owns these surfaces; portal-card and seasonal styles do not override them. */
/* Keep the banner and floating surface in place while identity, menu controls
   and the saved font settle. Never paint the placeholder header as live UI. */
body.compass-booting:not(.compass-header-ready) header.top.skyline-header :is(.brandrow, #pillars) {
  visibility: hidden;
  pointer-events: none;
}

html[data-compass-theme='tabler'] header.top.skyline-header .navigation-frame328 {
  position: absolute;
  top: calc(93px + var(--nav-navigationBarOffset, 0px));
  left: 0;
  right: 0;
  height: var(--nav-navigationBarHeight, 58px);
  padding: 6.65px 8px !important;
  overflow: visible;
  border: 1px solid var(--nav-navigationBarBorder, #e4eaf2) !important;
  border-radius: var(--nav-navigationBarRadius, 12px) !important;
  background: var(--nav-navigationBar, #fff) !important;
  box-shadow: var(--nav-navigationBarShadow, 0 10px 28px #102d5824) !important;
}
html[data-compass-theme='tabler'] body > .layout {
  padding-top: max(
    16px,
    calc(22px + var(--nav-navigationBarOffset, 0px) + var(--nav-navigationBarHeight, 58px) - 58px)
  ) !important;
}
html[data-compass-theme='tabler'] header.top.skyline-header #pillars.pillarbar {
  display: grid !important;
  grid-auto-flow: column;
  /* Give Home proportionate inner spacing beside Sales Hub while retaining a
     smaller icon-only slot. The other seven buttons remain equal width. */
  grid-template-columns: minmax(120px, 0.6fr);
  grid-auto-columns: minmax(200px, 1fr);
  align-items: stretch;
  gap: 6px !important;
  height: 100%;
  padding: 1px 2px !important;
  background: transparent !important;
  overflow-y: hidden;
  scroll-padding-inline: 6px;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
header.top.skyline-header #pillars::-webkit-scrollbar {
  display: none;
}
/* Dividers sit in the gaps, independently of each button's painted border. */
header.top.skyline-header #pillars > button:not(:last-child) .bb-top-navigation-label::after,
.portal-site-preview .portal-preview-nav > span:not(:last-child) .portal-preview-nav-label::after {
  content: '';
  position: absolute;
  right: calc(-3px - var(--nav-navigationDividerWidth, 1px) / 2);
  top: 20%;
  bottom: 20%;
  width: var(--nav-navigationDividerWidth, 1px);
  background: var(--nav-navigationButtonDivider, #9db3cf);
  pointer-events: none;
}
.portal-site-preview .portal-preview-nav > span:not(:last-child) .portal-preview-nav-label::after {
  right: calc(-2px - var(--nav-navigationDividerWidth, 1px) / 2);
}
html[data-compass-theme='tabler'] header.top.skyline-header #pillars.pillarbar > button {
  --nav-item-text: var(--nav-navigationText, #102d58);
  --nav-item-icon: var(--nav-navigationIcon, #102d58);
  width: auto !important;
  min-width: 0 !important;
  min-height: 0;
  height: 100%;
  margin: 0 !important;
  padding: 0 4px !important;
  gap: 4px !important;
  border: 0 !important;
  border-radius: var(--nav-navigationItemRadius, 9px) !important;
  background: var(--nav-navigationButtons, #fff) !important;
  color: var(--nav-item-text) !important;
  box-shadow: none !important;
  font: 600 var(--nav-label-size, 13px)/1.3 var(--site-font) !important;
  white-space: nowrap;
  outline: 0;
  text-shadow: none;
}
html[data-compass-theme='tabler']
  header.top.skyline-header
  #pillars.pillarbar
  > button
  .bb-top-navigation-label {
  color: inherit !important;
  font: 600 var(--nav-label-size, 13px)/1.3 var(--site-font) !important;
  white-space: nowrap;
}
html[data-compass-theme='tabler']
  header.top.skyline-header
  #pillars.pillarbar
  > button[data-top='portal-home'],
.portal-site-preview .portal-preview-nav > span:first-child {
  gap: 0 !important;
}
html[data-compass-theme='tabler']
  header.top.skyline-header
  #pillars
  > button[data-top='portal-home']
  .bb-top-navigation-label,
.portal-site-preview .portal-preview-nav > span:first-child .portal-preview-nav-label {
  /* Keep the label's divider pseudo-element while showing only the Home icon. */
  font-size: 0 !important;
  line-height: 0 !important;
}
html[data-compass-theme='tabler']
  header.top.skyline-header
  #pillars.pillarbar
  > button
  :is(.bb-top-navigation-icon, .sales-dashboard-menu-caret) {
  color: var(--nav-item-icon) !important;
}
html[data-compass-theme='tabler']
  header.top.skyline-header
  #pillars.pillarbar
  > button:not([data-top='portal-home'])
  > .bb-top-navigation-icon {
  margin-inline-end: 4px;
}
html[data-compass-theme='tabler']
  header.top.skyline-header
  #pillars.pillarbar
  > button
  .bb-top-navigation-icon,
html[data-compass-theme='tabler']
  header.top.skyline-header
  #pillars.pillarbar
  > button
  .bb-top-navigation-icon
  svg {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
}
html[data-compass-theme='tabler'] header.top.skyline-header #pillars.pillarbar > button:hover {
  --nav-item-text: var(--nav-navigationHoverText, #102d58);
  --nav-item-icon: var(--nav-navigationHoverIcon, #006bd6);
  background: var(--nav-navigationHoverBackground, #eef6fc) !important;
}
html[data-compass-theme='tabler']
  header.top.skyline-header
  #pillars.pillarbar
  > button:is(.active, .is-active, [aria-current='page']) {
  --nav-item-text: var(--nav-navigationCurrentText, #102d58);
  --nav-item-icon: var(--nav-navigationCurrentIcon, #006bd6);
  background: var(--nav-navigationCurrentBackground, #eff7fb) !important;
}
html[data-compass-theme='tabler']
  header.top.skyline-header
  #pillars.pillarbar
  > button[aria-expanded='true'] {
  --nav-item-text: var(--nav-navigationOpenText, #102d58);
  --nav-item-icon: var(--nav-navigationOpenIcon, #102d58);
  background: var(--nav-navigationOpenBackground, #e1f7f8) !important;
}
html[data-compass-theme='tabler'][data-top-bar-theme]
  header.top.skyline-header
  #pillars.pillarbar
  > button {
  color: var(--nav-item-text) !important;
}
html[data-compass-theme='tabler']
  header.top.skyline-header
  #pillars.pillarbar
  > button:focus-visible {
  outline: 2px solid var(--nav-navigationFocusOutline, #0078d4) !important;
  outline-offset: -3px;
}
/* The lower line indicates the current page; opening a different menu has its own fill. */
html[data-compass-theme='tabler']
  header.top.skyline-header
  #pillars.pillarbar
  > button:not([aria-current='page'])::after {
  content: none !important;
}
html[data-compass-theme='tabler']
  header.top.skyline-header
  #pillars.pillarbar
  > button[aria-current='page']::after {
  content: '' !important;
  left: 12px;
  right: 12px;
  bottom: calc(2px + var(--portal-navigation-button-border-width, 0px));
  height: 2px;
  border-radius: 2px;
}
header.top.skyline-header #pillars.pillarbar > button::before,
.portal-site-preview .portal-preview-nav > span::before {
  box-sizing: border-box;
  /* Keep the complete painted ring inside the scroll viewport, including
     fractional-pixel edges and the active lower line. */
  inset: 1px;
  width: auto;
  height: auto;
  opacity: var(--portal-navigation-button-border-opacity, 0);
}
html[data-compass-theme='tabler'] header.top.skyline-header .sales-dashboard-menu {
  background: var(--nav-menu, #fff) !important;
  color: var(--nav-menuText, #102d58) !important;
  border: 1px solid var(--nav-navigationMenuBorder, #dfe6ee) !important;
  border-radius: var(--nav-navigationMenuRadius, 10px) !important;
  box-shadow: var(--nav-navigationMenuShadow, 0 10px 28px #102d5824) !important;
  padding: 10px;
  overflow-x: hidden;
  scrollbar-width: thin;
}
html[data-compass-theme='tabler']
  header.top.skyline-header
  .sales-dashboard-menu
  :is(a, .settings-menu-group-toggle) {
  --nav-row-icon: var(--nav-navigationMenuIcon, #007bff);
  color: var(--nav-menuText, #102d58) !important;
  background: transparent !important;
  margin: 0;
  padding: 12px 10px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.4;
  /* A legacy Settings hover outline inherited the dark menu text colour.
     Only keyboard focus should add an outline to dropdown rows. */
  outline: none;
}
html[data-compass-theme='tabler'] header.top.skyline-header .settings-menu-group-toggle {
  transition: none;
  -webkit-tap-highlight-color: transparent;
}
html[data-compass-theme='tabler'] header.top.skyline-header .sales-dashboard-menu a > span {
  min-width: 0;
  overflow-wrap: anywhere;
}
html[data-compass-theme='tabler']
  header.top.skyline-header
  .sales-dashboard-menu
  :is(h4, .navcaption, .settings-menu-group-toggle) {
  color: var(--nav-menuText, #102d58) !important;
  font: 600 11px/1.5 var(--site-font) !important;
  letter-spacing: normal;
  text-transform: uppercase;
}
html[data-compass-theme='tabler']
  header.top.skyline-header
  .sales-dashboard-menu
  :is(a, .settings-menu-group-toggle)
  :is(svg, .nav-icon) {
  color: var(--nav-row-icon) !important;
  flex-shrink: 0;
}
html[data-compass-theme='tabler']
  header.top.skyline-header
  .sales-dashboard-menu
  :is(a.active, a[aria-current='page']) {
  --nav-row-icon: var(--nav-navigationMenuSelectedIcon, #0065c8);
  color: var(--nav-navigationMenuSelectedText, #102d58) !important;
  background: var(--nav-navigationMenuSelectedBackground, #e1f7f8) !important;
}
html[data-compass-theme='tabler']
  header.top.skyline-header
  .sales-dashboard-menu
  :is(a, .settings-menu-group-toggle):is(:hover, :focus-visible),
html[data-compass-theme='tabler']
  header.top.skyline-header
  .sales-dashboard-menu
  .settings-menu-group-toggle[aria-expanded='true'] {
  --nav-row-icon: var(--nav-navigationMenuHoverIcon, #007bff);
  color: var(--nav-navigationMenuHoverText, #102d58) !important;
  background: var(--nav-navigationMenuHoverBackground, #edf7fc) !important;
}
html[data-compass-theme='tabler']
  header.top.skyline-header
  .sales-dashboard-menu
  :is(a, .settings-menu-group-toggle):focus-visible {
  outline: 2px solid var(--nav-navigationFocusOutline, #0078d4) !important;
  outline-offset: -2px;
}
html[data-compass-theme='tabler'] header.top.skyline-header .sales-dashboard-menu a + a {
  border-top: 1px solid var(--nav-navigationMenuSeparator, #e7edf5);
}
html[data-compass-theme='tabler']
  header.top.skyline-header
  .sales-dashboard-menu
  :is(
    .sales-dashboard-menu-group + .sales-dashboard-menu-group,
    .settings-menu-category + .settings-menu-category
  ) {
  border-color: var(--nav-navigationMenuSeparator, #e7edf5) !important;
}
/* One Settings panel: a persistent header, category sidebar and page area. */
html[data-compass-theme='tabler'] header.top.skyline-header #settingsNavigationMenu {
  display: flex;
  flex-direction: column;
  width: min(900px, calc(100vw - 32px));
  height: min(610px, var(--settings-available-height, 610px));
  padding: 0;
  overflow: visible;
}

#settingsNavigationMenu [hidden] {
  display: none !important;
}
#settingsNavigationMenu .settings-menu-header {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 0 0 auto;
  padding: 15px 20px;
}
#settingsNavigationMenu .settings-menu-header h2 {
  margin: 0;
  color: var(--nav-menuText, #102d58);
  font: 700 21px/1.3 var(--site-font);
}
#settingsNavigationMenu .settings-menu-search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(100%, 400px);
  min-width: 0;
  margin: 0 0 0 auto;
  padding: 0 10px;
  border: 1px solid var(--nav-navigationMenuBorder, #dfe6ee);
  border-radius: 8px;
}
#settingsNavigationMenu .settings-menu-search:focus-within {
  outline: 2px solid var(--nav-navigationFocusOutline, #0078d4);
  outline-offset: 1px;
}
html[data-compass-theme='tabler'] #settingsNavigationMenu .settings-menu-search input {
  width: 100%;
  min-width: 0;
  height: 34px;
  padding: 6px 0;
  margin: 0;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0;
  box-shadow: none !important;
  background: transparent !important;
  color: var(--nav-menuText, #102d58) !important;
  font: 400 14px/1.4 var(--site-font) !important;
}
#settingsNavigationMenu .settings-menu-search input::placeholder {
  color: inherit;
  opacity: 0.7;
}
#settingsNavigationMenu :is(.settings-menu-search, .settings-menu-close) svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  color: var(--nav-menuText, #102d58);
}
html[data-compass-theme='tabler'] #settingsNavigationMenu .settings-menu-close {
  display: grid;
  place-items: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0 !important;
  border-radius: 6px;
  background: transparent !important;
  color: var(--nav-menuText, #102d58) !important;
  cursor: pointer;
}
html[data-compass-theme='tabler'] #settingsNavigationMenu .settings-menu-close:hover {
  background: var(--nav-navigationMenuHoverBackground, #edf7fc) !important;
}
#settingsNavigationMenu :is(.settings-menu-close, .settings-menu-back):focus-visible {
  outline: 2px solid var(--nav-navigationFocusOutline, #0078d4);
  outline-offset: -2px;
}
#settingsNavigationMenu .settings-menu-body {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  flex: 1;
  min-height: 0;
  overflow: hidden;
  border-radius: 0 0 var(--nav-navigationMenuRadius, 10px) var(--nav-navigationMenuRadius, 10px);
}
#settingsNavigationMenu .settings-menu-category-list,
#settingsNavigationMenu .settings-menu-category-items {
  box-sizing: border-box;
  min-width: 0;
  height: 100%;
  padding: 12px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
#settingsNavigationMenu .settings-menu-category-list {
  background: color-mix(in srgb, var(--nav-menuText, #102d58) 5%, var(--nav-menu, #fff));
}
#settingsNavigationMenu .settings-menu-category + .settings-menu-category {
  border: 0;
}
#settingsNavigationMenu .settings-menu-content {
  min-width: 0;
  min-height: 0;
}
#settingsNavigationMenu .settings-menu-category-items {
  padding: 16px 20px 20px;
}
html[data-compass-theme='tabler']
  header.top.skyline-header
  #settingsNavigationMenu
  .settings-menu-group-toggle {
  justify-content: flex-start;
  gap: 12px;
  padding: 12px 10px;
  font: 600 12px/1.5 var(--site-font) !important;
  text-transform: none;
}
#settingsNavigationMenu .settings-menu-group-toggle svg {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}
html[data-compass-theme='tabler']
  header.top.skyline-header
  #settingsNavigationMenu
  .settings-menu-group-toggle[aria-expanded='true'] {
  --nav-row-icon: #fff;
  color: #fff !important;
  background: var(--blue, #0963cf) !important;
}
#settingsNavigationMenu .settings-menu-panel-title {
  margin: 0 0 14px;
  color: var(--nav-menuText, #102d58);
  font: 700 20px/1.3 var(--site-font);
}
#settingsNavigationMenu .settings-menu-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 24px;
  align-items: start;
}
html[data-compass-theme='tabler']
  header.top.skyline-header
  #settingsNavigationMenu
  .settings-menu-links
  a {
  padding: 7px 6px;
  border: 0;
  font-size: 13px;
  gap: 12px;
}
#settingsNavigationMenu .settings-menu-links.is-grouped {
  row-gap: 18px;
}
#settingsNavigationMenu .settings-report-section {
  margin: 0 !important;
  padding: 0 0 12px;
}
#settingsNavigationMenu .settings-report-section:nth-child(even) {
  padding-left: 20px;
}
#settingsNavigationMenu .settings-report-section h4 {
  margin: 0 0 4px;
  padding: 0 6px;
}
#settingsNavigationMenu .settings-menu-empty {
  padding: 20px;
  margin: 0;
  color: var(--nav-menuText, #102d58);
}
#settingsNavigationMenu .settings-menu-back {
  display: none;
}
@media (max-width: 700px) {
  html[data-compass-theme='tabler'] header.top.skyline-header #settingsNavigationMenu {
    width: min(500px, calc(100vw - 24px));
  }
  #settingsNavigationMenu .settings-menu-header {
    padding: 12px;
    gap: 8px;
    flex-wrap: wrap;
  }
  #settingsNavigationMenu .settings-menu-header h2 {
    font-size: 18px;
    flex: 1;
  }
  #settingsNavigationMenu .settings-menu-search {
    order: 3;
    width: 100%;
  }
  html[data-compass-theme='tabler'] #settingsNavigationMenu .settings-menu-search input {
    font-size: 14px !important;
  }
  #settingsNavigationMenu .settings-menu-body {
    grid-template-columns: minmax(0, 1fr);
  }
  #settingsNavigationMenu:not(.has-active-category):not(.has-no-results) .settings-menu-content,
  #settingsNavigationMenu:is(.has-active-category, .has-no-results) .settings-menu-category-list {
    display: none;
  }
  #settingsNavigationMenu .settings-menu-category-items {
    padding: 12px;
  }
  #settingsNavigationMenu .settings-menu-links {
    grid-template-columns: minmax(0, 1fr);
  }
  #settingsNavigationMenu .settings-report-section:nth-child(even) {
    padding-left: 0;
  }
  #settingsNavigationMenu .settings-menu-back {
    display: block;
    width: 100%;
    margin: 0 0 12px;
    padding: 10px;
    border: 1px solid var(--nav-navigationMenuBorder, #dfe6ee);
    border-radius: 6px;
    background: var(--nav-menu, #fff);
    color: var(--nav-menuText, #102d58);
    font: inherit;
    text-align: left;
    cursor: pointer;
  }
}
/* Fit every item on desktop; compact layouts retain touch/keyboard scrolling.
   Each visible button uses the same column width and responsive type size. */
/* Centre the compact report action within its shared menu row. */
html[data-compass-theme='tabler']
  header.top.skyline-header
  #salesDashboardMenu
  a[data-sales-menu-route='qbr-report'] {
  --nav-row-icon: #0963cf;
  color: #000 !important;
  background: #fff !important;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 8px 12px;
  align-self: center;
  justify-content: center;
  border: 1px solid #d8e2ef;
  font-weight: 600;
}
html[data-compass-theme='tabler']
  header.top.skyline-header
  #salesDashboardMenu
  a[data-sales-menu-route='qbr-report']:is(:hover, :focus-visible) {
  --nav-row-icon: #fff;
  color: #fff !important;
  background: #0963cf !important;
  border-color: #0963cf;
}
@media (min-width: 601px) {
  html[data-compass-theme='tabler']
    header.top.skyline-header
    #salesDashboardMenu.sales-menu-report-aligned:not(.seller-tools-menu918) {
    grid-template-rows: repeat(var(--sales-menu-rows), auto);
  }
  html[data-compass-theme='tabler']
    header.top.skyline-header
    #salesDashboardMenu.sales-menu-report-aligned:not(.seller-tools-menu918)
    > .sales-dashboard-menu-group {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: 1 / -1;
  }
}
@media (min-width: 1400px) {
  html[data-compass-theme='tabler'] header.top.skyline-header #pillars.pillarbar {
    grid-template-columns: minmax(48px, 0.6fr);
    --nav-label-size: clamp(11px, calc(1.25vw - 7px), 13px);
    grid-auto-columns: minmax(0, 1fr);
  }
  html[data-compass-theme='tabler'] header.top.skyline-header #pillars.pillarbar > button {
    gap: 2px !important;
    padding-inline: 2px !important;
  }
  html[data-compass-theme='tabler']
    header.top.skyline-header
    #pillars.pillarbar
    > button
    .bb-top-navigation-icon,
  html[data-compass-theme='tabler']
    header.top.skyline-header
    #pillars.pillarbar
    > button
    .bb-top-navigation-icon
    svg {
    width: 20px;
    height: 20px;
    flex-basis: 20px;
  }
  html[data-compass-theme='tabler']
    header.top.skyline-header
    #pillars.pillarbar
    > button
    .sales-dashboard-menu-caret {
    width: 8px;
    flex-basis: 8px;
  }
}
@media (max-width: 800px) {
  html[data-compass-theme='tabler'] header.top.skyline-header .navigation-frame328 {
    top: calc(91px + var(--nav-navigationBarOffset, 0px));
  }
}

/* Draft previews use the same tokens, isolated from the document's saved theme. */
.portal-site-preview .portal-preview-header {
  height: 145px;
}
.portal-site-preview .portal-preview-nav {
  position: absolute;
  grid-template-columns: minmax(48px, 0.6fr) repeat(7, minmax(0, 1fr));
  top: calc(93px + var(--nav-navigationBarOffset, 0px));
  left: 16px;
  right: 16px;
  z-index: 2;
  height: var(--nav-navigationBarHeight, 58px);
  padding: 6.65px 8px;
  gap: 4px;
  border: 1px solid var(--nav-navigationBarBorder, #e4eaf2);
  border-radius: var(--nav-navigationBarRadius, 12px);
  background: var(--nav-navigationBar, #fff);
  box-shadow: var(--nav-navigationBarShadow);
  color: var(--nav-navigationText, #102d58);
}
.portal-site-preview .portal-preview-body {
  margin-top: max(
    0px,
    calc(15px + var(--nav-navigationBarOffset, 0px) + var(--nav-navigationBarHeight, 58px) - 58px)
  );
}
#brandProfileEditor .brand-actionbar544:has([data-navigation-reset]) {
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
}
.portal-site-preview .portal-preview-nav > span {
  --preview-nav-icon: var(--nav-navigationIcon, #102d58);
  background: var(--nav-navigationButtons, #fff);
  color: var(--nav-navigationText, #102d58);
  margin: 0;
  padding: 0 3px;
  border-radius: var(--nav-navigationItemRadius, 9px);
  font-size: 10px;
}
.portal-site-preview .portal-preview-nav > span:first-child {
  --preview-nav-icon: var(--nav-navigationCurrentIcon, #006bd6);
  background: var(--nav-navigationCurrentBackground, #eff7fb);
  color: var(--nav-navigationCurrentText, #102d58);
}
.portal-site-preview .portal-preview-nav > span:first-child::after {
  height: 2px;
  left: 6px;
  right: 6px;
  bottom: calc(2px + var(--portal-navigation-button-border-width, 0px));
}
.portal-site-preview .portal-preview-nav > span[data-preview-hover] {
  --preview-nav-icon: var(--nav-navigationHoverIcon, #006bd6);
  background: var(--nav-navigationHoverBackground, #eef6fc);
  color: var(--nav-navigationHoverText, #102d58);
}
.portal-site-preview .portal-preview-nav > span[data-preview-focus] {
  outline: 2px solid var(--nav-navigationFocusOutline, #0078d4);
  outline-offset: -2px;
}
.portal-site-preview .portal-preview-nav > span[data-preview-open] {
  --preview-nav-icon: var(--nav-navigationOpenIcon, #102d58);
  background: var(--nav-navigationOpenBackground, #e1f7f8);
  color: var(--nav-navigationOpenText, #102d58);
}
.portal-site-preview .portal-preview-nav > span > svg {
  color: var(--preview-nav-icon);
}
.portal-site-preview .portal-preview-nav > span > .portal-preview-chevron {
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
}
.portal-site-preview .portal-preview-menu {
  top: 0 !important;
  left: 26% !important;
  right: auto !important;
  width: 270px !important;
  background: var(--nav-menu, #fff) !important;
  color: var(--nav-menuText, #102d58) !important;
  border: 1px solid var(--nav-navigationMenuBorder, #dfe6ee) !important;
  border-radius: var(--nav-navigationMenuRadius, 10px) !important;
  box-shadow: var(--nav-navigationMenuShadow) !important;
  padding: 10px !important;
}
.portal-site-preview .portal-preview-menu > span {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 8px !important;
  border-color: var(--nav-navigationMenuSeparator, #e7edf5) !important;
  color: var(--nav-menuText, #102d58) !important;
  background: transparent;
}
.portal-site-preview .portal-preview-menu > span + span {
  border-top: 1px solid var(--nav-navigationMenuSeparator, #e7edf5);
}
.portal-site-preview .portal-preview-menu-icon {
  color: var(--nav-navigationMenuIcon, #007bff) !important;
}
.portal-site-preview .portal-preview-menu-icon svg {
  width: 21px;
  height: 21px;
  display: block;
}
.portal-site-preview .portal-preview-menu > [data-preview-selected] {
  background: var(--nav-navigationMenuSelectedBackground, #e1f7f8);
  color: var(--nav-navigationMenuSelectedText, #102d58) !important;
}
.portal-site-preview .portal-preview-menu > [data-preview-selected] .portal-preview-menu-icon {
  color: var(--nav-navigationMenuSelectedIcon, #0065c8) !important;
}
.portal-site-preview .portal-preview-menu > [data-preview-hover] {
  background: var(--nav-navigationMenuHoverBackground, #edf7fc);
  color: var(--nav-navigationMenuHoverText, #102d58) !important;
}
.portal-site-preview .portal-preview-menu > [data-preview-hover] .portal-preview-menu-icon {
  color: var(--nav-navigationMenuHoverIcon, #007bff) !important;
}
.portal-navigation-settings {
  padding-top: 16px;
  border-top: 1px solid var(--line);
  margin-top: 16px;
}
.portal-navigation-settings .navigation-geometry {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 20px;
}
.portal-navigation-settings label {
  display: grid;
  gap: 6px;
  font-size: 12px;
}
.portal-navigation-settings input,
.portal-navigation-settings select {
  width: 100%;
  min-height: 36px;
}
.portal-navigation-group-title {
  grid-column: 1/-1;
  margin: 12px 0 0;
  font-size: 14px;
  font-weight: 600;
}
@media (max-width: 600px) {
  .portal-navigation-settings .navigation-geometry {
    grid-template-columns: 1fr;
  }
}