#navbar img[src*="logo"] {
  height: 45px;
}

#sidebar svg:is([style*="sitemap.svg"], [style*="layer-group.svg"], [style*="arrows-from-line.svg"], [style*="signal-stream.svg"]) {
  width: 1.1rem;
}

.hero-image {
  margin-top: -3vw;

  @media (min-width: 1280px) and (max-width: 1420px) {
    margin-top: -2vw;
  }

  @media (max-width: 540px) {
    margin-top: -40px;
  }
}

#navbar a:is([href="/react/quickstart"], [href="/javascript/quickstart"]) {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;

  &::before {
    content: '';
    display: block;
    mask-repeat: no-repeat;
    mask-position: center center;
    width: 18px;
    height: 18px;
  }
}

#navbar a[href="/react/quickstart"]::before {
  mask-image: url("https://mintlify.b-cdn.net/v6.4.0/brands/react.svg");
  background-color: #61DAFB;
}

#navbar a[href="/javascript/quickstart"]::before {
  mask-image: url("https://mintlify.b-cdn.net/v6.4.0/brands/js.svg");
  background-color: #F7DF1E;
}

/* Framework brand colors for sidebar icons */
[data-component-part="card-content-container"] svg[style*="react.svg"] {
  background-color: #61DAFB !important;
}

[data-component-part="card-content-container"] svg[style*="vuejs.svg"] {
  background-color: #4FC08D !important;
}

svg[style*="svelte.svg"] {
  mask-image: url("/images/logo/svelte.svg") !important;
}

[data-component-part="card-content-container"] svg[style*="svelte.svg"] {
  background-color: #FF3E00 !important;
}

svg[style*="solidjs.svg"] {
  mask-image: url("/images/logo/solid.svg") !important;
}

[data-component-part="card-content-container"] svg[style*="solidjs.svg"] {
  background-color: #4B7BBE !important;
}

[data-component-part="card-content-container"] svg[style*="/js.svg"] {
  background-color: #F7DF1E !important;
}

.font-extrabold,
.prose :where(h2):not(:where([class~=not-prose] *)) {
  font-weight: 600;
}

.info ol {
  list-style-type: decimal;
  padding: 1.25rem;
  text-indent: 0.25rem;
}

kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-weight: 400;
  vertical-align: text-top;
  white-space: nowrap;
  font-size: .75em;
  min-width: 1.75em;
  line-height: 1.7em;
  box-sizing: border-box;
  padding-left: .5em;
  padding-right: .5em;
  padding-bottom: .05em;
  word-spacing: -.1em;
  border-radius: 0.25em;
  height: fit-content;
  background-color: rgba(255, 255, 255);
  box-shadow: color(display-p3 0.024 0.024 0.349 / 0.024) 0px -0.6px 6px 0px inset, color(display-p3 1 1 1 / 0.95) 0px 0.6px 0px 0px inset, color(display-p3 0.024 0.024 0.349 / 0.024) 0px 3px 6px 0px inset, color(display-p3 0.008 0.008 0.165 / 0.15) 0px -0.6px 0px 0px inset, color(display-p3 0.004 0.039 0.2 / 0.122) 0px 0px 0px 0.6px, color(display-p3 0.008 0.027 0.184 / 0.197) 0px 0.96px 2.04px 0px;
}

.dark kbd {
  background-color: rgba(0, 0, 0);
  box-shadow: color(display-p3 0.882 0.933 0.992 / 0.077) 0px -0.6px 6px 0px inset, color(display-p3 0.949 0.969 0.996 / 0.708) 0px 0.6px 0px 0px inset, color(display-p3 0.875 0.992 1 / 0.034) 0px 3px 6px 0px inset, color(display-p3 0 0 0 / 0.9) 0px -1.2px 0px 0px inset, color(display-p3 0.882 0.929 1 / 0.246) 0px 0px 0px 0.9px, color(display-p3 0 0 0 / 0.95) 0px 0.96px 2.04px 0px;
}

.sponsors {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}

.sponsors .rounded-2xl:hover {
  outline: 1px solid rgb(var(--primary-light));
}

.inline-logo {
  display: inline-block;
}

.inline-logo::before {
  content: '';
  position: relative;
  top: 0.15em;
  margin-right: 0.3em;
  margin-left: 0.2em;
  display: inline-block;
  width: 17px;
  height: 17px;
  mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNzIiIGhlaWdodD0iNzIiIHZpZXdCb3g9IjAgMCA3MiA3MiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTcxLjc2MDggMC43NzgzMlYyMC45ODc1SDY1LjkwOTZWMTAuNjM0OEw2MS43NzI3IDYuNTUyMzFINTEuMjgxN1YwLjc3ODMySDcxLjc2MDhaTTIwLjU5NzUgMC43NzgzMlY2LjU1MjMxSDEwLjEwNjVMMjguNTE3MiAyNC43MjA0TDI0LjM4MDIgMjguODAyOEw1Ljk2OTU2IDEwLjYzNDhWMjAuOTg3NUgwLjExODM3VjAuNzc4MzJIMjAuNTk3NVpNNDcuNDk5IDQzLjQ1Mkw2NS45MDk2IDYxLjYyVjUxLjI2NzNINzEuNzYwOFY3MS40NzY2SDUxLjI4MTdWNjUuNzAyNUg2MS43NzI3TDQzLjM2MiA0Ny41MzQ1TDQ3LjQ5OSA0My40NTJaTTYxLjc3MjcgNi41NTIzMUw2NS45MDk2IDEwLjYzNDhMMTAuMTg3NSA2NS42MzkySDIwLjc2MzZWNzEuNDc2NkgwLjExODM3VjUxLjA0NTdINi4wMTcwMVY2MS41MTE5TDYxLjc3MjcgNi41NTIzMVoiIGZpbGw9ImJsYWNrIi8+Cjwvc3ZnPgo=);
  mask-repeat: no-repeat;
  mask-position: center center;
  mask-size: contain;
  background-color: currentColor;
}

#content-container.max-w-6xl {
  max-width: 80rem;
}

.sp-layout {
  border-radius: var(--rounded-xl, .75rem);
  --tw-ring-color: rgba(0, 0, 0, .05);
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

html:not(.dark) .hero .sp-layout {
  box-shadow: none;
}


.sp-tabs-scrollable-container {
  padding-left: 0;
  padding-right: 0;
}

.sp-tab-button {
  padding: 0.5rem 1rem;
  border-bottom: 1px solid transparent;
}

.sp-tab-button[data-active="true"] {
  border-color: rgb(var(--primary-light));
}

.sp-layout {
  gap: 0px;
}

.dark .sp-layout {
  --tw-ring-color: rgb(var(--gray-800) / 0.5);
}

.sp-editor {
  flex-basis: 100% !important;
  order: 1;
}

.sp-preview {
  flex-basis: 100% !important;
}

.sp-preview,
.sp-preview-container {
  background-color: transparent;
}

.sp-preview-iframe {
  min-height: 100px;
}

[data-as="iframe"] {
  width: 100%;
}

code-sandbox[style*="--preview-height"] .sp-preview {
  height: var(--preview-height) !important;
}

.sp-preview-container,
.sp-overlay {
  background-color: #fafafd;
}

.dark .sp-preview-container,
.dark .sp-overlay {
  background-color: #11131b;
}

.sp-preview-container iframe {
  background: transparent;
  color-scheme: normal;
}

.hero .sp-preview-container,
.hero .sp-overlay {
  --gradient: linear-gradient(65deg, #56fff420, #001AFF20, #5F6AF220, #F25FD020, #56FFF520, #F25FD020, #001AFF20, #56fff420);
  background-image: var(--gradient);
  animation: background 16s linear infinite;
  animation-direction: alternate;
  background-size: 600% 100%;
}

.dark .hero .sp-preview-container,
.dark .hero .sp-overlay {
  --gradient: linear-gradient(65deg, #56fff480, #001AFF80, #5F6AF280, #F25FD080, #56FFF580, #F25FD080, #001AFF80, #56fff480);
  animation: gradient 16s linear infinite;
}


@keyframes gradient {
  0% {
    background-color: #ff0000;
  }

  25% {
    background-color: #7f00ff;
  }

  50% {
    background-color: #00affa;
  }

  75% {
    background-color: #00f594;
  }

  100% {
    background-color: #ff0000
  }
}

@keyframes background-position {
  0% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 100% 50%;
  }
}

header:has(+ [data-page-title="Overview"]) #page-context-menu {
  display: none;
}

#page-context-menu {
  align-items: stretch;
}

#page-context-menu-button svg+span {
  display: none;
}