/* Theme switcher — readable on Two-Tone Blue, Black and Red, and Dark. */

#top-nav-usercluster {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-self: end;
}

.ui-theme-switcher {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.ui-theme-switcher label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: inherit;
  margin: 0;
}

.ui-theme-switcher select {
  appearance: auto;
  background-color: #1a1a1a;
  color: #e8edf2;
  border: 1px solid #555;
  padding: 3px 8px;
  font: 600 12px "Open Sans", "Outfit", sans-serif;
  line-height: 1.3;
  max-width: 160px;
  cursor: pointer;
}

html.ui-theme-two-tone-blue .ui-theme-switcher select,
html.ui-theme-blue-gray .ui-theme-switcher select {
  background-color: #1a1a1a;
  color: #fff;
  border-color: #4c96e0;
}

html.ui-theme-black-red .ui-theme-switcher select {
  border-color: #DF141A;
}

html.ui-theme-dark .ui-theme-switcher select {
  background-color: #0a0a0a;
  border-color: #333;
}

.ui-theme-switcher select:focus {
  outline: 1px solid #DF141A;
  outline-offset: 1px;
}

html.ui-theme-two-tone-blue .ui-theme-switcher select:focus,
html.ui-theme-blue-gray .ui-theme-switcher select:focus {
  outline-color: #4c96e0;
}

/* Two-Tone Blue: hide the yellow staging strip (already hidden on Black and Red / Dark). */
html.ui-theme-two-tone-blue #staging-banner,
html.ui-theme-blue-gray #staging-banner,
body.ui-theme-two-tone-blue #staging-banner,
body.ui-theme-blue-gray #staging-banner {
  display: none !important;
}
html.ui-theme-two-tone-blue,
html.ui-theme-blue-gray,
body.ui-theme-two-tone-blue,
body.ui-theme-blue-gray{
  padding-top: 0 !important;
}
html.ui-theme-two-tone-blue body,
html.ui-theme-blue-gray body{
  padding-top: 0 !important;
}