pre code.hljs {
  display: block;
  overflow-x: auto;
  padding: 1em
}
code.hljs {
  padding: 3px 5px
}
/*

Colorbrewer theme
Original: https://github.com/mbostock/colorbrewer-theme (c) Mike Bostock <mike@ocks.org>
Ported by Fabrício Tavares de Oliveira

*/
.hljs {
  color: #000;
  background: #fff
}
.hljs-subst {
  /* default */
  
}
.hljs-string,
.hljs-meta,
.hljs-symbol,
.hljs-template-tag,
.hljs-template-variable,
.hljs-addition {
  color: #756bb1
}
.hljs-comment,
.hljs-quote {
  color: #636363
}
.hljs-number,
.hljs-regexp,
.hljs-literal,
.hljs-bullet,
.hljs-link {
  color: #31a354
}
.hljs-deletion,
.hljs-variable {
  color: #88f
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-title,
.hljs-section,
.hljs-built_in,
.hljs-doctag,
.hljs-type,
.hljs-tag,
.hljs-name,
.hljs-selector-id,
.hljs-selector-class,
.hljs-strong {
  color: #3182bd
}
.hljs-emphasis {
  font-style: italic
}
.hljs-attribute {
  color: #e6550d
}
/* purgecss start ignore */
.\!container {
width: 100% !important;
}
.container {
width: 100%;
}
@media (min-width: 640px) {
.\!container {
max-width: 640px !important;
}
.container {
max-width: 640px;
}
}
@media (min-width: 768px) {
.\!container {
max-width: 768px !important;
}
.container {
max-width: 768px;
}
}
@media (min-width: 1024px) {
.\!container {
max-width: 1024px !important;
}
.container {
max-width: 1024px;
}
}
@media (min-width: 1280px) {
.\!container {
max-width: 1280px !important;
}
.container {
max-width: 1280px;
}
}
@media (min-width: 1441px) {
.\!container {
max-width: 1441px !important;
}
.container {
max-width: 1441px;
}
}
@media (min-width: 1536px) {
.\!container {
max-width: 1536px !important;
}
.container {
max-width: 1536px;
}
}
/* purgecss end ignore */
.visible {
visibility: visible;
}
.static {
position: static;
}
.fixed {
position: fixed;
}
.absolute {
position: absolute;
}
.relative {
position: relative;
}
.sticky {
position: sticky;
}
.inset-0 {
inset: 0px;
}
.inset-x-0 {
left: 0px;
right: 0px;
}
.-bottom-\[26px\] {
bottom: -26px;
}
.-top-40 {
top: -10rem;
}
.-top-64 {
top: -16rem;
}
.left-8 {
left: 2rem;
}
.top-0 {
top: 0px;
}
.top-20 {
top: 5rem;
}
.top-24 {
top: 6rem;
}
.top-30 {
top: 7.5rem;
}
.-z-\[1\] {
z-index: -1;
}
.z-10 {
z-index: 10;
}
.z-\[2\] {
z-index: 2;
}
.row-start-1 {
grid-row-start: 1;
}
.row-start-2 {
grid-row-start: 2;
}
.float-right {
float: right;
}
.clear-both {
clear: both;
}
.mx-6 {
margin-left: 1.5rem;
margin-right: 1.5rem;
}
.mx-auto {
margin-left: auto;
margin-right: auto;
}
.my-10 {
margin-top: 2.5rem;
margin-bottom: 2.5rem;
}
.my-16 {
margin-top: 4rem;
margin-bottom: 4rem;
}
.my-20 {
margin-top: 5rem;
margin-bottom: 5rem;
}
.my-30 {
margin-top: 7.5rem;
margin-bottom: 7.5rem;
}
.my-4 {
margin-top: 1rem;
margin-bottom: 1rem;
}
.my-6 {
margin-top: 1.5rem;
margin-bottom: 1.5rem;
}
.my-8 {
margin-top: 2rem;
margin-bottom: 2rem;
}
.-mb-30 {
margin-bottom: -7.5rem;
}
.mb-1 {
margin-bottom: 0.25rem;
}
.mb-10 {
margin-bottom: 2.5rem;
}
.mb-12 {
margin-bottom: 3rem;
}
.mb-2 {
margin-bottom: 0.5rem;
}
.mb-3 {
margin-bottom: 0.75rem;
}
.mb-4 {
margin-bottom: 1rem;
}
.mb-6 {
margin-bottom: 1.5rem;
}
.mb-\[5px\] {
margin-bottom: 5px;
}
.mb-auto {
margin-bottom: auto;
}
.ml-2 {
margin-left: 0.5rem;
}
.ml-3 {
margin-left: 0.75rem;
}
.ml-4 {
margin-left: 1rem;
}
.ml-5 {
margin-left: 1.25rem;
}
.ml-6 {
margin-left: 1.5rem;
}
.ml-8 {
margin-left: 2rem;
}
.ml-auto {
margin-left: auto;
}
.mr-0 {
margin-right: 0px;
}
.mr-3 {
margin-right: 0.75rem;
}
.mr-6 {
margin-right: 1.5rem;
}
.mr-auto {
margin-right: auto;
}
.mt-1 {
margin-top: 0.25rem;
}
.mt-10 {
margin-top: 2.5rem;
}
.mt-12 {
margin-top: 3rem;
}
.mt-16 {
margin-top: 4rem;
}
.mt-2 {
margin-top: 0.5rem;
}
.mt-2\.5 {
margin-top: 0.625rem;
}
.mt-20 {
margin-top: 5rem;
}
.mt-3 {
margin-top: 0.75rem;
}
.mt-32 {
margin-top: 8rem;
}
.mt-4 {
margin-top: 1rem;
}
.mt-6 {
margin-top: 1.5rem;
}
.mt-8 {
margin-top: 2rem;
}
.mt-auto {
margin-top: auto;
}
.mt-px {
margin-top: 1px;
}
.block {
display: block;
}
.inline-block {
display: inline-block;
}
.inline {
display: inline;
}
.flex {
display: flex;
}
.inline-flex {
display: inline-flex;
}
.table {
display: table;
}
.grid {
display: grid;
}
.inline-grid {
display: inline-grid;
}
.contents {
display: contents;
}
.hidden {
display: none;
}
.aspect-\[2\] {
aspect-ratio: 2;
}
.h-10 {
height: 2.5rem;
}
.h-100 {
height: 25rem;
}
.h-12 {
height: 3rem;
}
.h-14 {
height: 3.5rem;
}
.h-16 {
height: 4rem;
}
.h-18 {
height: 4.5rem;
}
.h-2 {
height: 0.5rem;
}
.h-30 {
height: 7.5rem;
}
.h-5 {
height: 1.25rem;
}
.h-6 {
height: 1.5rem;
}
.h-9 {
height: 2.25rem;
}
.h-\[256px\] {
height: 256px;
}
.h-\[560px\] {
height: 560px;
}
.h-\[56px\] {
height: 56px;
}
.h-auto {
height: auto;
}
.h-full {
height: 100%;
}
.max-h-18 {
max-height: 4.5rem;
}
.max-h-52 {
max-height: 13rem;
}
.max-h-66 {
max-height: 16.5rem;
}
.min-h-screen {
min-height: 100vh;
}
.w-1\/2 {
width: 50%;
}
.w-10 {
width: 2.5rem;
}
.w-12 {
width: 3rem;
}
.w-16 {
width: 4rem;
}
.w-2\/3 {
width: 66.666667%;
}
.w-4 {
width: 1rem;
}
.w-45 {
width: 11.25rem;
}
.w-5\/12 {
width: 41.666667%;
}
.w-60 {
width: 15rem;
}
.w-8 {
width: 2rem;
}
.w-auto {
width: auto;
}
.w-full {
width: 100%;
}
.min-w-10 {
min-width: 2.5rem;
}
.min-w-60 {
min-width: 15rem;
}
.max-w-196 {
max-width: 49rem;
}
.max-w-\[720px\] {
max-width: 720px;
}
.max-w-lg-screen {
max-width: 1440px;
}
.flex-1 {
flex: 1 1 0%;
}
.flex-full {
flex: 1 1 100%;
}
.shrink-0 {
flex-shrink: 0;
}
.flex-grow {
flex-grow: 1;
}
.grow {
flex-grow: 1;
}
.transform {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.cursor-pointer {
cursor: pointer;
}
.select-none {
-webkit-user-select: none;
   -moz-user-select: none;
        user-select: none;
}
.resize {
resize: both;
}
.scroll-mt-20 {
scroll-margin-top: 5rem;
}
.grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.flex-col {
flex-direction: column;
}
.flex-wrap {
flex-wrap: wrap;
}
.place-items-center {
place-items: center;
}
.items-start {
align-items: flex-start;
}
.items-center {
align-items: center;
}
.justify-end {
justify-content: flex-end;
}
.justify-center {
justify-content: center;
}
.justify-between {
justify-content: space-between;
}
.justify-items-center {
justify-items: center;
}
.gap-1 {
gap: 0.25rem;
}
.gap-10 {
gap: 2.5rem;
}
.gap-12 {
gap: 3rem;
}
.gap-3 {
gap: 0.75rem;
}
.gap-4 {
gap: 1rem;
}
.gap-6 {
gap: 1.5rem;
}
.gap-8 {
gap: 2rem;
}
.gap-x-30 {
-moz-column-gap: 7.5rem;
     column-gap: 7.5rem;
}
.gap-y-12 {
row-gap: 3rem;
}
.gap-y-16 {
row-gap: 4rem;
}
.divide-y > :not([hidden]) ~ :not([hidden]) {
--tw-divide-y-reverse: 0;
border-top-width: calc(1px * calc(1 - 0));
border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
border-bottom-width: calc(1px * 0);
border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}
.divide-gray > :not([hidden]) ~ :not([hidden]) {
--tw-divide-opacity: 1;
border-color: rgb(238 238 238 / 1);
}
@supports (color: rgb(0 0 0 / 0)) {
.divide-gray > :not([hidden]) ~ :not([hidden]) {
border-color: rgb(238 238 238 / var(--tw-divide-opacity, 1));
}
}
.self-start {
align-self: flex-start;
}
.overflow-hidden {
overflow: hidden;
}
.overflow-scroll {
overflow: scroll;
}
.overflow-x-scroll {
overflow-x: scroll;
}
.whitespace-nowrap {
white-space: nowrap;
}
.rounded {
border-radius: 0.25rem;
}
.rounded-2xl {
border-radius: 1rem;
}
.rounded-full {
border-radius: 9999px;
}
.rounded-lg {
border-radius: 0.5rem;
}
.rounded-xl {
border-radius: 0.75rem;
}
.rounded-l-lg {
border-top-left-radius: 0.5rem;
border-bottom-left-radius: 0.5rem;
}
.rounded-r-full {
border-top-right-radius: 9999px;
border-bottom-right-radius: 9999px;
}
.border {
border-width: 1px;
}
.border-b {
border-bottom-width: 1px;
}
.border-t {
border-top-width: 1px;
}
.border-solid {
border-style: solid;
}
.border-black\/10 {
border-color: rgb(19 20 21 / .1);
}
.border-gray {
--tw-border-opacity: 1;
border-color: rgb(238 238 238 / 1);
}
@supports (color: rgb(0 0 0 / 0)) {
.border-gray {
border-color: rgb(238 238 238 / var(--tw-border-opacity, 1));
}
}
.border-shark {
--tw-border-opacity: 1;
border-color: rgb(36 41 46 / 1);
}
@supports (color: rgb(0 0 0 / 0)) {
.border-shark {
border-color: rgb(36 41 46 / var(--tw-border-opacity, 1));
}
}
.bg-black {
--tw-bg-opacity: 1;
background-color: rgb(19 20 21 / 1);
}
@supports (color: rgb(0 0 0 / 0)) {
.bg-black {
background-color: rgb(19 20 21 / var(--tw-bg-opacity, 1));
}
}
.bg-blue {
--tw-bg-opacity: 1;
background-color: rgb(2 95 215 / 1);
}
@supports (color: rgb(0 0 0 / 0)) {
.bg-blue {
background-color: rgb(2 95 215 / var(--tw-bg-opacity, 1));
}
}
.bg-blue-90 {
--tw-bg-opacity: 1;
background-color: rgb(34 44 58 / 1);
}
@supports (color: rgb(0 0 0 / 0)) {
.bg-blue-90 {
background-color: rgb(34 44 58 / var(--tw-bg-opacity, 1));
}
}
.bg-gray {
--tw-bg-opacity: 1;
background-color: rgb(238 238 238 / 1);
}
@supports (color: rgb(0 0 0 / 0)) {
.bg-gray {
background-color: rgb(238 238 238 / var(--tw-bg-opacity, 1));
}
}
.bg-lightblue {
--tw-bg-opacity: 1;
background-color: rgb(240 247 255 / 1);
}
@supports (color: rgb(0 0 0 / 0)) {
.bg-lightblue {
background-color: rgb(240 247 255 / var(--tw-bg-opacity, 1));
}
}
.bg-lightgray {
--tw-bg-opacity: 1;
background-color: rgb(249 250 251 / 1);
}
@supports (color: rgb(0 0 0 / 0)) {
.bg-lightgray {
background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
}
.bg-slate-10 {
--tw-bg-opacity: 1;
background-color: rgb(240 244 247 / 1);
}
@supports (color: rgb(0 0 0 / 0)) {
.bg-slate-10 {
background-color: rgb(240 244 247 / var(--tw-bg-opacity, 1));
}
}
.bg-white {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / 1);
}
@supports (color: rgb(0 0 0 / 0)) {
.bg-white {
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
}
.bg-cover {
background-size: cover;
}
.object-cover {
-o-object-fit: cover;
   object-fit: cover;
}
.p-10 {
padding: 2.5rem;
}
.p-4 {
padding: 1rem;
}
.p-6 {
padding: 1.5rem;
}
.p-8 {
padding: 2rem;
}
.px-0 {
padding-left: 0px;
padding-right: 0px;
}
.px-16 {
padding-left: 4rem;
padding-right: 4rem;
}
.px-2 {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.px-3 {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.px-4 {
padding-left: 1rem;
padding-right: 1rem;
}
.px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.px-8 {
padding-left: 2rem;
padding-right: 2rem;
}
.py-1 {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
.py-10 {
padding-top: 2.5rem;
padding-bottom: 2.5rem;
}
.py-16 {
padding-top: 4rem;
padding-bottom: 4rem;
}
.py-20 {
padding-top: 5rem;
padding-bottom: 5rem;
}
.py-3 {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
.py-4 {
padding-top: 1rem;
padding-bottom: 1rem;
}
.py-5 {
padding-top: 1.25rem;
padding-bottom: 1.25rem;
}
.py-6 {
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}
.py-8 {
padding-top: 2rem;
padding-bottom: 2rem;
}
.py-px {
padding-top: 1px;
padding-bottom: 1px;
}
.pb-10 {
padding-bottom: 2.5rem;
}
.pb-20 {
padding-bottom: 5rem;
}
.pb-4 {
padding-bottom: 1rem;
}
.pb-6 {
padding-bottom: 1.5rem;
}
.pl-10 {
padding-left: 2.5rem;
}
.pl-8 {
padding-left: 2rem;
}
.pr-0 {
padding-right: 0px;
}
.pr-1 {
padding-right: 0.25rem;
}
.pr-8 {
padding-right: 2rem;
}
.pt-1 {
padding-top: 0.25rem;
}
.pt-10 {
padding-top: 2.5rem;
}
.pt-16 {
padding-top: 4rem;
}
.pt-32 {
padding-top: 8rem;
}
.pt-8 {
padding-top: 2rem;
}
.pt-px {
padding-top: 1px;
}
.text-center {
text-align: center;
}
.font-sans {
font-family: Avenir Next, -apple-system, system-ui, "Helvetica Neue",
    "Segoe UI", Oxygen, Ubuntu, Cantarell, "Open Sans", sans-serif, Helvetica, sans-serif;
font-family: var(--font-family), Helvetica, sans-serif;
}
.text-2xl {
font-size: 1.5rem;
line-height: 1.875rem;
}
.text-3xl {
font-size: 2rem;
line-height: 2.875rem;
}
.text-4xl {
font-size: 2.5rem;
line-height: 2.875rem;
}
.text-\[22px\] {
font-size: 22px;
}
.text-base {
font-size: 1rem;
line-height: 1.8rem;
}
.text-lg {
font-size: 1.125rem;
line-height: 1.6875rem;
}
.text-sm {
font-size: 0.875rem;
line-height: 1.25rem;
}
.text-xl {
font-size: 1.25rem;
line-height: 1.75rem;
}
.text-xs {
font-size: 0.75rem;
line-height: 1rem;
}
.font-bold {
font-weight: 700;
}
.font-medium {
font-weight: 500;
}
.font-normal {
font-weight: 400;
}
.font-semibold {
font-weight: 600;
}
.capitalize {
text-transform: capitalize;
}
.italic {
font-style: italic;
}
.leading-7 {
line-height: 1.75rem;
}
.leading-loose {
line-height: 2;
}
.leading-normal {
line-height: 1.5;
}
.leading-relaxed {
line-height: 1.625;
}
.leading-snug {
line-height: 1.375;
}
.leading-tight {
line-height: 1.25;
}
.text-black {
--tw-text-opacity: 1;
color: rgb(19 20 21 / 1);
}
@supports (color: rgb(0 0 0 / 0)) {
.text-black {
color: rgb(19 20 21 / var(--tw-text-opacity, 1));
}
}
.text-blue {
--tw-text-opacity: 1;
color: rgb(2 95 215 / 1);
}
@supports (color: rgb(0 0 0 / 0)) {
.text-blue {
color: rgb(2 95 215 / var(--tw-text-opacity, 1));
}
}
.text-darkgray {
--tw-text-opacity: 1;
color: rgb(160 175 191 / 1);
}
@supports (color: rgb(0 0 0 / 0)) {
.text-darkgray {
color: rgb(160 175 191 / var(--tw-text-opacity, 1));
}
}
.text-gray {
--tw-text-opacity: 1;
color: rgb(238 238 238 / 1);
}
@supports (color: rgb(0 0 0 / 0)) {
.text-gray {
color: rgb(238 238 238 / var(--tw-text-opacity, 1));
}
}
.text-gray-40 {
--tw-text-opacity: 1;
color: rgb(170 176 182 / 1);
}
@supports (color: rgb(0 0 0 / 0)) {
.text-gray-40 {
color: rgb(170 176 182 / var(--tw-text-opacity, 1));
}
}
.text-gray-50 {
--tw-text-opacity: 1;
color: rgb(106 108 109 / 1);
}
@supports (color: rgb(0 0 0 / 0)) {
.text-gray-50 {
color: rgb(106 108 109 / var(--tw-text-opacity, 1));
}
}
.text-gray-70 {
--tw-text-opacity: 1;
color: rgb(66 67 68 / 1);
}
@supports (color: rgb(0 0 0 / 0)) {
.text-gray-70 {
color: rgb(66 67 68 / var(--tw-text-opacity, 1));
}
}
.text-lightblack {
--tw-text-opacity: 1;
color: rgb(66 67 68 / 1);
}
@supports (color: rgb(0 0 0 / 0)) {
.text-lightblack {
color: rgb(66 67 68 / var(--tw-text-opacity, 1));
}
}
.text-lighterblue {
--tw-text-opacity: 1;
color: rgb(186 224 251 / 1);
}
@supports (color: rgb(0 0 0 / 0)) {
.text-lighterblue {
color: rgb(186 224 251 / var(--tw-text-opacity, 1));
}
}
.text-slate-50 {
--tw-text-opacity: 1;
color: rgb(135 146 162 / 1);
}
@supports (color: rgb(0 0 0 / 0)) {
.text-slate-50 {
color: rgb(135 146 162 / var(--tw-text-opacity, 1));
}
}
.text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / 1);
}
@supports (color: rgb(0 0 0 / 0)) {
.text-white {
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
}
.no-underline {
text-decoration-line: none;
}
.opacity-80 {
opacity: .8;
}
.shadow-medium {
--tw-shadow: 0px 5px 24px rgba(19, 20, 21, 0.1);
--tw-shadow-colored: 0px 5px 24px var(--tw-shadow-color);
box-shadow: 0 0 #0000, 0 0 #0000, 0px 5px 24px rgba(19, 20, 21, 0.1);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.outline {
outline-style: solid;
}
.brightness-50 {
--tw-brightness: brightness(.5);
filter: var(--tw-blur) brightness(.5) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.brightness-\[100\] {
--tw-brightness: brightness(100);
filter: var(--tw-blur) brightness(100) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.invert {
--tw-invert: invert(100%);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) invert(100%) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter {
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.transition {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.duration-200 {
transition-duration: 200ms;
}
:root {
  --spacing-unit: 4px;

  --spacing-px: calc(var(--spacing-unit) * 0.25);
  --spacing-05: calc(var(--spacing-unit) * 0.5); /* 2px */
  --spacing-1: var(--spacing-unit); /* 4px */
  --spacing-1-5: calc(var(--spacing-unit) * 1.5); /* 6px */
  --spacing-2: calc(var(--spacing-unit) * 2); /* 8px */
  --spacing-3: calc(var(--spacing-unit) * 3); /* 12px */
  --spacing-3-5: calc(var(--spacing-unit) * 3.5); /* 14px */
  --spacing-4: calc(var(--spacing-unit) * 4); /* 16px */
  --spacing-5: calc(var(--spacing-unit) * 5); /* 20px */
  --spacing-6: calc(var(--spacing-unit) * 6); /* 24px */
  --spacing-7: calc(var(--spacing-unit) * 7); /* 28px */
  --spacing-8: calc(var(--spacing-unit) * 8); /* 32px */
  --spacing-9: calc(var(--spacing-unit) * 9); /* 36px */
  --spacing-10: calc(var(--spacing-unit) * 10); /* 40px */
  --spacing-11: calc(var(--spacing-unit) * 11); /* 44px */
  --spacing-12: calc(var(--spacing-unit) * 12); /* 48px */
  --spacing-14: calc(var(--spacing-unit) * 14); /* 56px */
  --spacing-15: calc(var(--spacing-unit) * 15); /* 60px */
  --spacing-16: calc(var(--spacing-unit) * 16); /* 64px */
  --spacing-17: calc(var(--spacing-unit) * 17); /* 68px */
  --spacing-18: calc(var(--spacing-unit) * 18); /* 72px */
  --spacing-20: calc(var(--spacing-unit) * 20); /* 80px */
  --spacing-24: calc(var(--spacing-unit) * 24); /* 96px */
  --spacing-30: calc(var(--spacing-unit) * 30); /* 120px */
  --spacing-32: calc(var(--spacing-unit) * 32); /* 128px */
  --spacing-34: calc(var(--spacing-unit) * 34); /* 136px */
  --spacing-35: calc(var(--spacing-unit) * 35); /* 140px */
  --spacing-38: calc(var(--spacing-unit) * 38); /* 152px */
  --spacing-40: calc(var(--spacing-unit) * 40); /* 160px */
  --spacing-64: calc(var(--spacing-unit) * 64); /* 256px */
  --spacing-68: calc(var(--spacing-unit) * 68); /* 272px */

  --spacing-px-minus: calc(var(--spacing-unit) * -0.25);
  --spacing-05-minus: calc(var(--spacing-unit) * -0.5); /* -2px */
  --spacing-1-minus: calc(var(--spacing-unit) * -1); /* -4px */
  --spacing-2-minus: calc(var(--spacing-unit) * -2); /* -8px */
  --spacing-3-minus: calc(var(--spacing-unit) * -3); /* -12px */
  --spacing-4-minus: calc(var(--spacing-unit) * -4); /* -16px */
  --spacing-5-minus: calc(var(--spacing-unit) * -5); /* -20px */
  --spacing-6-minus: calc(var(--spacing-unit) * -6); /* -24px */
  --spacing-8-minus: calc(var(--spacing-unit) * -8); /* -32px */
  --spacing-9-minus: calc(var(--spacing-unit) * -9); /* -36px */
  --spacing-10-minus: calc(var(--spacing-unit) * -10); /* -40px */
  --spacing-11-minus: calc(var(--spacing-unit) * -11); /* -44px */
  --spacing-12-minus: calc(var(--spacing-unit) * -12); /* -48px */
  --spacing-13-minus: calc(var(--spacing-unit) * -13); /* -52px */
  --spacing-14-minus: calc(var(--spacing-unit) * -14); /* -56px */
  --spacing-16-minus: calc(var(--spacing-unit) * -16); /* -64px */
  --spacing-20-minus: calc(var(--spacing-unit) * -20); /* -80px */
  --spacing-24-minus: calc(var(--spacing-unit) * -24); /* -96px */
  --spacing-30-minus: calc(var(--spacing-unit) * -30); /* -120px */

  --gap-small: var(--spacing-2);
  --gap-medium: var(--spacing-3);
  --gap-large: var(--spacing-8);
  /* --- untinted (almost) grays --- */
  --black: #131415;
  --black-rgb: 19, 20, 21;
  --gray-90: #222325;
  --gray-80: #323233;
  --gray-70: #424344;
  --gray-50: #6a6c6d;
  --gray-40: #aab0b6;
  --gray-20: #eeeeee;
  --gray-10: #f9fafb;
  --white: #ffffff;
  --white-rgb: 255, 255, 255;

  /* --- bluish grays --- */
  --slate-90: #191c1e;
  --slate-80: #292e31;
  --slate-70: #4c555a;
  --slate-50: #8792a2;
  --slate-40: #bdc6cf;
  --slate-20: #e3e9ef;
  --slate-10: #f0f4f7;

  /* --- blue --- */
  --blue-100: #111c28;
  --blue-90: #222c3a;
  --blue-70: #184e94;
  --blue-60: #025fd7;
  --blue-40: #9abfef;
  --blue-20: #e6f6fc;
  --blue-10: #f5fbff;

  /* comprehensive blues */
  --darkest-blue: var(--blue-100);
  --darker-blue: var(--blue-90);
  --dark-blue: var(--blue-70);
  --blue: var(--blue-60);
  --blue-rgb: 2, 95, 215;
  --light-blue: var(--blue-20);
  --lighter-blue: var(--blue-10);

  /* other blues */
  --gray-blue: #44546f;
  --azure-blue: #3262ab;
  --sky-blue: #19aeff;

  --gradient-blue: linear-gradient(
    90deg,
    var(--sky-blue) 0.3%,
    var(--blue) 42.72%
  );

  /* --- green --- */
  --green-100: #11201d;
  --green-90: #002e1f;
  --green-70: #008a64;
  --green-60: #00bd7e;
  --green-10: #f4faf8;

  /* comprehensive greens */
  --darkest-green: var(--green-100);
  --dark-green: var(--green-90);
  --medium-green: var(--green-70);
  --green: var(--green-60);
  --green-rgb: 0, 189, 126;
  --light-green: var(--green-10);

  /* --- red --- */
  --red-100: #241314;
  --red-90: #3b1410;
  --red-70: #730703;
  --red-60: #bf0e08;
  --red-10: #fdf2f1;

  /* comprehensive reds */
  --darkest-red: var(--red-100);
  --darker-red: var(--red-90);
  --dark-red: var(--red-70);
  --red: var(--red-60);
  --red-rgb: 191, 14, 8;
  --light-red: var(--red-10);

  /* --- orange --- */
  --orange-100: #272018;
  --orange-70: #563814;
  --orange-60: #df9136;
  --orange-50: #ffa500;
  --orange-50-rgb: 255, 165, 0;
  --orange-10: #fef4e8;
  --orange-05: #fdf7f0;

  /* comprehensive orange */
  --darkest-orange: var(--orange-100);
  --dark-orange: var(--orange-70);
  --orange: var(--orange-60);
  --orange-rgb: 223, 145, 54;
  --light-orange: var(--orange-10);
  --xlight-orange: var(--orange-05);

  /* other orange */
  --bright-orange: #ee6237;

  /* --- yellow --- */
  --yellow-70: #735c0f;
  --yellow-60: #f6e9be;
  --yellow-10: #fffbdd;

  /* comprehensive yellows */
  --darker-yellow: var(--yellow-70);
  --dark-yellow: var(--yellow-60);
  --yellow: var(--yellow-10);

  /* --- purple --- */
  --purple-100: #2e1130;
  --purple-60: #800080;
  --purple-10: #f4f0f6;

  /* comprehensive purple */
  --darkest-purple: var(--purple-100);
  --purple: var(--purple-60);
  --light-purple: var(--purple-10);
  --font-size: 16px;

  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --font-family: Avenir Next, -apple-system, system-ui, "Helvetica Neue",
    "Segoe UI", Oxygen, Ubuntu, Cantarell, "Open Sans", sans-serif;
  --heading-font-family: var(--font-family);
  --code-font-family: "Roboto Mono", monospace;

  --text-line-height: 1.5;
  --title-line-height: 1.2;

  --text-xxs: 0.625rem;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-l: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 2rem;
  --text-5xl: 3rem;
  --base-color: var(--blue);

  --text-color: var(--gray-70);
  --text-color-disabled: var(--gray-40);
  --text-color-secondary: var(--gray-50);
  --text-color-inverted: var(--white);
  --title-color: var(--black);
  --title-color-secondary: var(--slate-50);
  --link-color-hover: var(--gray-90);
  --code-color: var(--text-color);
  --accent-color: var(--black);

  --bg-color: var(--white);
  --bg-color-rgb: var(--white-rgb);
  --bg-color-primary: var(--base-color);
  --bg-color-primary-light: var(--lighter-blue);
  --bg-color-secondary: var(--gray-20);
  --bg-color-light: var(--gray-10);
  --bg-color-transparent: hsla(0, 0%, 100%, 0.4);
  --bg-color-active: var(--lighter-blue);
  --bg-color-inverted: var(--blue-90);

  --border-color-default: var(--gray-20);
  --border-color-primary: var(--blue-20);
  --border-color-error: var(--red);
  --border-color-hover: var(--gray-50);
  --border-default: 1px solid var(--border-color-default);
  --border-primary: 1px solid var(--border-color-primary);

  --input-border-color-hover: var(--slate-70);
  --input-border-color-focus: var(--gray-40);
  --input-bg-color-disabled: var(--panel-bg-color);

  --hint-text-color: var(--slate-70);

  --text-color-success: var(--green-70);
  --text-color-warning: var(--orange-60);
  --text-color-error: var(--red);
  --text-color-neutral: var(--blue);
  --text-color-extra: var(--purple);

  --skeleton-color: var(--slate-20);

  --bg-color-success: var(--light-green);
  --bg-color-warning: var(--light-orange);
  --bg-color-error: var(--light-red);
  --bg-color-neutral: var(--lighter-blue);
  --bg-color-extra: var(--light-purple);

  --action-color: var(--gray-80);

  --panel-bg-color: var(--gray-10);
  --pill-bg-color: var(--slate-10);

  --dropdown-bg-color-hover: var(--slate-10);

  --border-radius-small: var(--spacing-05);
  --border-radius-medium: var(--spacing-1);
  --border-radius-large: var(--spacing-2);
  --border-radius-xlarge: var(--spacing-4);
  --border-radius-round: var(--spacing-10);

  --box-shadow-base: 0 1px 15px rgba(27, 31, 35, 0.15);
  --box-shadow-medium: 0px 5px 12px rgba(var(--black-rgb), 0.1);
  --box-shadow-large: 0px 5px 24px rgba(var(--black-rgb), 0.1);

  --screen-s: 500px;
  --screen-m: 850px;
  --screen-l: 1100px;
  --screen-xl: 1200px;

  --input-max-width: 720px;
  --input-box-shadow: inset 0 1px 2px rgba(var(--gray-40), 0.06);
  --input-box-shadow-focus: var(--input-box-shadow-focus),
    0 0 2px rgba(var(--gray-40), 0.9);

  --container-max-width: 1216px;

  --z-index-default: 0;

  /* Focus */
  --focus-outline-color: color-mix(in oklch, var(--action-color), transparent 40%);
  --focus-outline-width: 3px;
  --focus-outline: var(--focus-outline-width) solid var(--focus-outline-color);
  --focus-outline-offset: 2px;

  /* Animations */
  --base-duration: 150ms;
  --base-timing: ease;
  --theme-change-transition: background-color ease-out 0.1s;

  --theme-filter: sepia(20%) grayscale(10%);

  /* Callouts */
  --callout-background-info: var(--light-blue);
  --callout-background-success: var(--light-green);
  --callout-background-warn: var(--light-orange);
  --callout-background-error: var(--light-red);
  --callout-border-color-info: var(--dark-blue);
  --callout-border-color-success: var(--medium-green);
  --callout-border-color-warn: var(--bright-orange);
  --callout-border-color-error: var(--red);

  /* Alert */
  --alert-background-info: var(--light-blue);
  --alert-background-success: var(--light-green);
  --alert-background-warn: var(--light-orange);
  --alert-background-error: var(--light-red);
  --alert-border-color-info: var(--blue-rgb);
  --alert-border-color-success: var(--green-rgb);
  --alert-border-color-warn: var(--orange-rgb);
  --alert-border-color-error: var(--red-rgb);

  /* Navigation */
  --navigation-height: var(--spacing-16);

  /* Codeblock  */
  --bg-code-title: var(--black);

  /* Show more */
  --transparent-bg-color: rgba(255, 255, 255, 0);

  /* Date-time picker indicator color */
  --date-time-indicator-color: invert(0%) sepia(0%) saturate(0%) brightness(100%) contrast(100%);
}
.dark-theme {
  --text-color: var(--gray-20);
  --text-color-secondary: var(--gray-40);
  --text-color-inverted: var(--black);
  --text-color-disabled: var(--slate-80);

  --title-color: var(--white);
  --link-color-hover: var(--gray-40);
  --accent-color: var(--white);

  --skeleton-color: var(--slate-80);

  --bg-color: var(--black);
  --bg-color-rgb: var(--black-rgb);
  --bg-color-secondary: var(--gray-80);
  --bg-color-light: var(--gray-90);
  --bg-color-transparent: rgba(var(--black), 0.5);
  --bg-color-active: var(--dark-blue);
  --bg-color-primary: var(--white);
  --bg-color-primary-light: var(--blue-100);
  --bg-color-inverted: var(--white);

  --border-color-default: var(--slate-80);
  --border-color-hover: var(--slate-20);
  --border-color-primary: var(--base-color);

  --hint-text-color: var(--slate-50);

  --bg-color-success: var(--dark-green);
  --bg-color-warning: var(--dark-orange);
  --bg-color-error: var(--darker-red);
  --bg-color-neutral: var(--darkest-blue);

  --action-color: var(--white);
  --panel-bg-color: var(--slate-90);
  --pill-bg-color: var(--slate-80);

  --dropdown-bg-color-hover: var(--slate-80);

  /* Callouts */
  --callout-background-info: var(--gray-90);
  --callout-background-success: var(--gray-90);
  --callout-background-warn: var(--gray-90);
  --callout-background-error: var(--gray-90);

  /* Alerts */
  --alert-background-info: var(--gray-90);
  --alert-background-success: var(--gray-90);
  --alert-background-warn: var(--gray-90);
  --alert-background-error: var(--gray-90);

  /* Codeblock  */
  --bg-code-title: var(--gray-90);

   /* Date-time picker indicator color */
   --date-time-indicator-color: invert(100%) sepia(0%) saturate(0%) brightness(100%) contrast(100%);
}
summary {
  list-style-type: none;
  cursor: pointer;
}
summary::-webkit-details-marker {
  display: none;
}
body:not(.user-is-tabbing) button:focus,
body:not(.user-is-tabbing) input:focus,
body:not(.user-is-tabbing) select:focus,
body:not(.user-is-tabbing) textarea:focus,
body:not(.user-is-tabbing) div:focus,
body:not(.user-is-tabbing) li:focus,
body:not(.user-is-tabbing) summary:focus {
  outline: none;
}
@font-face {
  font-family: Avenir Next, -apple-system, system-ui, "Helvetica Neue",
    "Segoe UI", Oxygen, Ubuntu, Cantarell, "Open Sans", sans-serif;
  font-family: var(--font-family);
  font-style: normal;
  font-weight: 700;
  font-weight: var(--font-weight-bold, 700);
  src: url(https://bump.sh/packs/static/AvenirNext-Bold-ff34206e21903acae69c.woff2) format("woff2"),
    url(https://bump.sh/packs/static/AvenirNext-Bold-2952ce4df8ab7ab00daf.woff) format("woff"),
    url(https://bump.sh/packs/static/AvenirNext-Bold-39d7707a022e73d8571d.ttf) format("truetype");
  font-display: swap;
}
@font-face {
  font-family: Avenir Next, -apple-system, system-ui, "Helvetica Neue",
    "Segoe UI", Oxygen, Ubuntu, Cantarell, "Open Sans", sans-serif;
  font-family: var(--font-family);
  font-style: normal;
  font-weight: 600;
  font-weight: var(--font-weight-semibold, 600);
  src: url(https://bump.sh/packs/static/AvenirNext-DemiBold-e373fe10c8e0e123e6d7.woff2) format("woff2"),
    url(https://bump.sh/packs/static/AvenirNext-DemiBold-3e4064119316eb84757f.woff) format("woff"),
    url(https://bump.sh/packs/static/AvenirNext-DemiBold-cdeaa6c92c9329923d0f.ttf) format("truetype");
  font-display: swap;
}
@font-face {
  font-family: Avenir Next, -apple-system, system-ui, "Helvetica Neue",
    "Segoe UI", Oxygen, Ubuntu, Cantarell, "Open Sans", sans-serif;
  font-family: var(--font-family);
  font-style: normal;
  font-weight: 500;
  font-weight: var(--font-weight-medium, 500);
  src: url(https://bump.sh/packs/static/AvenirNext-Medium-a92c9afd7e9d034847cf.woff2) format("woff2"),
    url(https://bump.sh/packs/static/AvenirNext-Medium-c9f5a1725bc392f34ad3.woff) format("woff"),
    url(https://bump.sh/packs/static/AvenirNext-Medium-588a49f7b67ee2dc6147.ttf) format("truetype");
  font-display: swap;
}
html {
font-family: Avenir Next, -apple-system, system-ui, "Helvetica Neue",
    "Segoe UI", Oxygen, Ubuntu, Cantarell, "Open Sans", sans-serif, Helvetica, sans-serif;
font-family: var(--font-family), Helvetica, sans-serif;
font-weight: 500;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  color: #424344;
  color: var(--text-color);
}
pre, code {
  font-family: "Roboto Mono", monospace;
  font-family: var(--code-font-family);
}
h1 {
font-family: Avenir Next, -apple-system, system-ui, "Helvetica Neue",
    "Segoe UI", Oxygen, Ubuntu, Cantarell, "Open Sans", sans-serif, Helvetica, sans-serif;
font-family: var(--font-family), Helvetica, sans-serif;
font-size: 2rem;
line-height: 2.875rem;
font-weight: 700;
--tw-text-opacity: 1;
color: rgb(19 20 21 / 1);
}
@supports (color: rgb(0 0 0 / 0)) {
h1 {
color: rgb(19 20 21 / var(--tw-text-opacity, 1));
}
}
h1:is([data-mode='dark'] *) {
--tw-text-opacity: 1;
color: rgb(255 255 255 / 1);
}
@supports (color: rgb(0 0 0 / 0)) {
h1:is([data-mode='dark'] *) {
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
}
h1,
h2 {
font-family: Avenir Next, -apple-system, system-ui, "Helvetica Neue",
    "Segoe UI", Oxygen, Ubuntu, Cantarell, "Open Sans", sans-serif, Helvetica, sans-serif;
font-family: var(--font-family), Helvetica, sans-serif;
font-size: 2rem;
line-height: 2.875rem;
font-weight: 700;
--tw-text-opacity: 1;
color: rgb(19 20 21 / 1);
}
@supports (color: rgb(0 0 0 / 0)) {
h1,
h2 {
color: rgb(19 20 21 / var(--tw-text-opacity, 1));
}
}
h1 + p:is([data-mode='dark'] *) {
--tw-text-opacity: 1;
color: rgb(238 238 238 / 1);
}
@supports (color: rgb(0 0 0 / 0)) {
h1 + p:is([data-mode='dark'] *) {
color: rgb(238 238 238 / var(--tw-text-opacity, 1));
}
}
@media (min-width: 640px) {
  h1 {
font-size: 3rem;
line-height: 3.45rem;
}
}
@keyframes rotation {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes load {
  0%  {background-size: 20% 100%,20% 100%,20% 100%}
  33% {background-size: 20% 10% ,20% 100%,20% 100%}
  50% {background-size: 20% 100%,20% 10% ,20% 100%}
  66% {background-size: 20% 100%,20% 100%,20% 10% }
  100%{background-size: 20% 100%,20% 100%,20% 100%}
}
.flex-row {
  display: flex;
  flex-direction: row;
}
.flex-column {
  display: flex;
  flex-direction: column;
}
.gap-4 {
  gap: calc(4px * 4);
  gap: var(--spacing-4);
}
.bg-dots {
position: relative;

  &::before {
    content: "";
  }

  &::before {
pointer-events: none;
}

  &::before {
position: absolute;
}

  &::before {
inset: 0px;
}

  &::before {
    background: url(https://bump.sh/packs/static/dots-gray-16cdaf8bf0600a6d1fd6.svg) no-repeat center;
    background-size: cover;
    z-index: -1;
  }

  &.bg-dots-white {
    &::before {
z-index: 0;
}
    &::before {
opacity: .1;
}
  }
}
.bg-gradient-gray {
  background: linear-gradient(270deg, #ffffff 46.56%, #eeeeee 100%);
  background: linear-gradient(270deg, var(--white) 46.56%, var(--gray-20) 100%);
}
.bg-gradient-blue {
  background: linear-gradient(90deg, #19aeff 0.3%, #025fd7 102.11%);
  background: linear-gradient(90deg, var(--sky-blue) 0.3%, var(--blue) 102.11%);
}
.bg-gradient-dots {
  background: url(https://bump.sh/packs/static/dots-signup-14ac4c7ef7a937f4a98d.svg) no-repeat center,
    linear-gradient(90deg, #19aeff 0.3%, #025fd7 102.11%);
  background: url(https://bump.sh/packs/static/dots-signup-14ac4c7ef7a937f4a98d.svg) no-repeat center,
    linear-gradient(90deg, var(--sky-blue) 0.3%, var(--blue) 102.11%);
}
.bg-gradient-dots-inverted {
  background: url(https://bump.sh/packs/static/dots-signup-14ac4c7ef7a937f4a98d.svg) no-repeat center,
    linear-gradient(90deg, #025fd7 0.3%, #19aeff 102.11%);
  background: url(https://bump.sh/packs/static/dots-signup-14ac4c7ef7a937f4a98d.svg) no-repeat center,
    linear-gradient(90deg, var(--blue) 0.3%, var(--sky-blue) 102.11%);
}
.border-gradient-blue {
  border: solid 1px transparent;
  background-image:
    linear-gradient(90deg, #0977E3, #066ADC),
    radial-gradient(41.24% 227.33% at 63.93% 28.84%, rgba(255, 255, 255, 0.8) 9.38%, rgba(255, 255, 255, 0.24) 100%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}
.border-gradient-blue-90 {
  border: 1px solid transparent;
  background-image:
    linear-gradient(90deg, rgba(34, 44, 58, 1), rgba(34, 44, 58, 1)),
    linear-gradient(90deg, rgba(25, 174, 255, 0.2) 0.3%, rgba(0, 60, 139, 0.2) 32.11%, rgba(28, 169, 245, 0.2) 88.32%);
  background-clip: padding-box, border-box;
}
.bg-gradient-gray {
  background: linear-gradient(270deg, #ffffff 46.56%, #eeeeee 100%);
  background: linear-gradient(270deg, var(--white) 46.56%, var(--gray-20) 100%);
}
.border-gradient-blue-white {
  border: solid 1px transparent;
  background-image:
    linear-gradient(90deg, white, white),
    linear-gradient(90deg, rgba(25, 174, 255, 0.4) 0.3%, rgba(255, 255, 255, 0.2) 25.92%, rgba(1, 92, 213, 0.4) 46.89%, rgba(25, 174, 255, 0.4) 88.32%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}
.transform-center-y {
  transform: translateY(-50%);
  top: 50%;
}
.transform-center-x {
  transform: translateX(-50%);
  left: 50%;
}
.transform-center {
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}
:is([aria-hidden="true"], [hidden]) {
  display: none !important;
}
.slide-track {
  animation: scroll 70s linear infinite;
}
.warning-text {
  color: #df9136;
  color: var(--text-color-warning);
}
body:is([data-mode='dark'] *) {
--tw-bg-opacity: 1;
background-color: rgb(17 28 40 / 1);
}
@supports (color: rgb(0 0 0 / 0)) {
body:is([data-mode='dark'] *) {
background-color: rgb(17 28 40 / var(--tw-bg-opacity, 1));
}
}
body {
  background-color: #ffffff;
  background-color: var(--bg-color);
  position: relative;
}
mark {
  background: linear-gradient(90deg, #19aeff 0.3%, #025fd7 102.11%);
  background: linear-gradient(90deg, var(--sky-blue) 0.3%, var(--blue) 102.11%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
a {
  text-decoration-line: none;
}
button {
  border: 0;
  padding: 0;
}
.error {
margin-top: 0.25rem;
display: flex;
align-items: center;
font-size: 0.875rem;
line-height: 1.25rem;
--tw-text-opacity: 1;
color: rgb(191 14 8 / 1);

  &::before {
margin-right: 0.5rem;
}

  &::before {
display: inline-block;
}

  &::before {
    content: "";
    background: url(https://bump.sh/packs/static/errors-8a92985a7d62722f1c37.svg) no-repeat center;
    width: 14px;
    height: 14px;
    margin-top: -2px;
  }
}
@supports (color: rgb(0 0 0 / 0)) {
.error {
color: rgb(191 14 8 / var(--tw-text-opacity, 1));
}
}
.error_notification {
font-size: 0.875rem;
line-height: 1.25rem;
--tw-text-opacity: 1;
color: rgb(191 14 8 / 1);
}
@supports (color: rgb(0 0 0 / 0)) {
.error_notification {
color: rgb(191 14 8 / var(--tw-text-opacity, 1));
}
}
.field_with_errors {
  input {
--tw-border-opacity: 1 !important;
border-color: rgb(191 14 8 / 1) !important;
}

@supports (color: rgb(0 0 0 / 0)) {
input {
border-color: rgb(191 14 8 / var(--tw-border-opacity, 1)) !important;
}
}
}
.container {
margin-left: auto;
margin-right: auto;
margin-top: 4rem;
max-width: 1440px;
padding-left: 2rem;
padding-right: 2rem;
padding-bottom: 7.5rem;
}
@media (min-width: 768px) {
  .container {
margin-top: 5rem;
}
}
@media (min-width: 1024px) {
  .container {
padding-left: 5rem;
padding-right: 5rem;
}
}
@media (min-width: 1280px) {
  .container {
padding-left: 10rem;
padding-right: 10rem;
}
}
.wrapper {
  --wrapper-width: var(--screen-xl);
  display: grid;
  grid-template-columns: 1fr min(1200px, calc(100% - 64px)) 1fr;
  grid-template-columns: 1fr min(var(--wrapper-width), calc(100% - 64px)) 1fr;
  grid-column-gap: calc(4px * 8);
  grid-column-gap: var(--spacing-8);
  justify-content: center;
}
.wrapper > * {
  grid-column: 2;
}
.full-bleed {
  grid-column: 1 / -1;
}
.page-container {
  align-items: start;
  display: flex;
  flex-direction: column;
  margin: auto;
  max-width: 1200px;
  max-width: var(--screen-xl);
  padding-top: calc(4px * 16);
  padding-top: var(--spacing-16);
}
page-breadcrumbs {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  font-size: 1rem;
  font-size: var(--text-base);
  gap: calc(4px * 3);
  gap: var(--spacing-3);

  a {
    flex-shrink: 0;
    text-decoration: none;

    span {
      color: #6a6c6d;
      color: var(--text-color-secondary);
    }
  }

  .separator {
    color: #eeeeee;
    color: var(--border-color-default);
  }

  .dropdown-button .dropdown-title {
    border: 0;
    height: auto;
    padding-inline: 0;
  }

  .menu-dropdown a {
    box-sizing: content-box;
    display: block;
    padding-right: calc(4px * 10);
    padding-right: var(--spacing-10);
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: calc(4px * 68);
    width: var(--spacing-68);
  }

  /* We don't show the breadcrumb if it doesn't have a hub in it and that
     name is already displayed as resource title in the header */
  &:not(:has(a)):is(portal-header:has(.resource-name) *) {
    display: none;
  }
}
table {
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.875rem;
  text-align: left;
  width: 100%;
  word-break: keep-all;
}
thead {
  line-height: 1.2;
  line-height: var(--title-line-height);
  vertical-align: top;
}
tbody {
  vertical-align: top;
}
th {
  background-color: #f9fafb;
  background-color: var(--bg-color-light);
  color: #6a6c6d;
  color: var(--text-color-secondary);
  font-size: 0.75rem;
  font-size: var(--text-xs);
  font-weight: 500;
  font-weight: var(--font-weight-medium);
  padding: calc(4px * 3) calc(4px * 4);
  padding: var(--spacing-3) var(--spacing-4);

  &.sortable {
    a {
      align-items: center;
      display: flex;
      gap: calc(4px * 2);
      gap: var(--spacing-2);
    }

    svg {
      width: 7px;

      &:is(.sort-asc *, .sort-desc *) {
        color: #131415;
        color: var(--accent-color);
      }
    }
  }
}
/* This vertically aligns th and td when they're put on the same row */
th:is(tr:has(th + td) *) {
  padding-block-start: calc(calc(4px * 4) + calc(4px * 0.5));
  padding-block-start: calc(var(--spacing-4) + var(--spacing-05));
}
th:first-child {
  border-top-left-radius: calc(4px * 2);
  border-top-left-radius: var(--border-radius-large);
  border-bottom-left-radius: calc(4px * 2);
  border-bottom-left-radius: var(--border-radius-large);
}
th:last-child {
  border-top-right-radius: calc(4px * 2);
  border-top-right-radius: var(--border-radius-large);
  border-bottom-right-radius: calc(4px * 2);
  border-bottom-right-radius: var(--border-radius-large);
}
tr {
  &[data-action] {
    cursor: pointer;

    &:hover {
      background-color: #f9fafb;
      background-color: var(--panel-bg-color);
    }
  }
}
td {
  border-bottom: 1px solid #eeeeee;
  border-bottom: var(--border-default);
  word-break: break-word;
  padding: calc(4px * 4);
  padding: var(--spacing-4);
  vertical-align: middle;


  [data-button-style="naked"] {
    height: auto;

    svg {
      height: auto;
    }
  }

  [data-link-style="blue-link"] {
    text-decoration: none;
    color: #025fd7;
    color: var(--doc-base-color);
  }

  .immutable {
    align-items: center;
    background-color: #f9fafb;
    background-color: var(--panel-bg-color);
    border: 1px solid #eeeeee;
    border: var(--border-default);
    border-radius: 4px;
    border-radius: var(--border-radius-medium);
    display: flex;
    height: calc(4px * 8);
    height: var(--spacing-8);
    padding-inline: calc(4px * 4);
    padding-inline: var(--spacing-4);
  }
}
td ul {
  margin-top: 0;
}
thead {
  line-height: 1.2;
  line-height: var(--title-line-height);
  vertical-align: top;

  tr {
    td {
      border-top: 1px solid #eeeeee;
      border-top: var(--border-default);
    }

    td:first-child {
      border-bottom-left-radius: 0;
      border-top-left-radius: calc(4px * 2);
      border-top-left-radius: var(--border-radius-large);
    }

    td:last-child {
      border-bottom-right-radius: 0;
      border-top-right-radius: calc(4px * 2);
      border-top-right-radius: var(--border-radius-large);
    }
  }
}
table.authentication{
  th {
    border-inline: 1px solid #eeeeee;
    border-inline: var(--border-default);
  }

  td {
    border-right: 1px solid #eeeeee;
    border-right: var(--border-default);
    width: 80%;
  }

  th,
  td {
    border-radius: 0;
    border-top: 0;
  }

  tr:first-child th {
    border-top: 1px solid #eeeeee;
    border-top: var(--border-default);
    border-top-left-radius: calc(4px * 2);
    border-top-left-radius: var(--border-radius-large);
  }

  tr:last-child th {
    border-bottom-left-radius: calc(4px * 2);
    border-bottom-left-radius: var(--border-radius-large);
  }

  tr:first-child td {
    border-top: 1px solid #eeeeee;
    border-top: var(--border-default);
    border-top-right-radius: calc(4px * 2);
    border-top-right-radius: var(--border-radius-large);
  }

  tr:last-child td {
    border-bottom-right-radius: calc(4px * 2);
    border-bottom-right-radius: var(--border-radius-large);
  }
}
.table-container {
  display: flex;
  flex-direction: column;
  gap: calc(4px * 4);
  gap: var(--spacing-4);

  @media (max-width: 500px) {
    overflow-x: scroll;
    overflow-y: clip;
    padding-bottom: calc(4px * 30);
    padding-bottom: var(--spacing-30);
    white-space: nowrap;

    .pagination nav {
      place-content: start;
    }
  }
}
/* 
FLOW COMPOSITION 
Like the Every Layout stack: https://every-layout.dev/layouts/stack/
Info about this implementation: https://piccalil.li/blog/my-favourite-3-lines-of-css/ 
*/
/* Made it apply only if the preceding element is visible to not get a weird
   margin on top of first visible element */
.flow > *:not([hidden], [type=hidden]) + * {
  margin-block-start: 1em;
  margin-block-start: var(--flow-space, 1em);
}
.back-link {
  --link-font-size: var(--text-xs);

  align-items: center;
  display: inline-flex;
  font-size: 0.75rem;
  font-size: var(--link-font-size);
  gap: calc(4px * 1.5);
  gap: var(--spacing-1-5);
  text-decoration: none;

  svg {
    height: 9px;
    width: 9px;
  }

  &:where([data-link-size="large"]) {
    --link-font-size: var(--text-sm);

    svg {
      height: 11px;
      width: 11px;
    }
  }
}
.banner {
  align-items: start;
  background-color: #f9fafb;
  background-color: var(--bg-color-light);
  border: 1px solid #eeeeee;
  border: var(--border-default);
  border-radius: 4px;
  border-radius: var(--border-radius-medium);
  display: flex;
  flex-direction: row;
  font-size: 14px;
  gap: calc(4px * 6);
  gap: var(--spacing-6);
  padding: calc(4px * 3) calc(4px * 4);
  padding: var(--spacing-3) var(--spacing-4);
}
.banner--transparent {
  background-color: transparent;
}
.banner__icon {
  flex-shrink: 0;
  width: 15px;
}
.banner__content,
.banner__body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: calc(4px * 2);
  gap: var(--spacing-2);
}
.banner__header {
  display: flex;
  flex-direction: row;
  gap: calc(4px * 3);
  gap: var(--spacing-3);
  justify-content: space-between;
}
.banner__header-extra {
  align-items: center;
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  font-size: 0.875rem;
  gap: calc(4px * 2);
  gap: var(--spacing-2);
  justify-content: end;
}
.banner__title {
  font-size: 1em;
  font-weight: 600;
  font-weight: var(--font-weight-semibold);
  margin-bottom: 0;
}
.banner__buttons {
  display: flex;
  flex-direction: row;
  gap: calc(4px * 3);
  gap: var(--spacing-3);
  margin-top: calc(4px * 2);
  margin-top: var(--spacing-2);
}
.banner--big {
  align-items: center;
  border-radius: calc(4px * 2);
  border-radius: var(--border-radius-large);
  font-size: 16px;
}
.banner--big .banner__title {
  font-size: 1.1175em;
}
.banner--big .banner__icon {
  width: 64px;
}
.banner--big .banner__content {
  gap: 4px;
  gap: var(--spacing-1);
}
.callout {
  --callout-bg-color: var(--panel-bg-color);
  --callout-border-color: var(--gray-50);
  --callout-icon-path: url(https://bump.sh/packs/static/info-c52942fcfb8a64056cff.svg);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background-color: #f9fafb;
  background-color: var(--callout-bg-color);
  border-left: 4px solid #6a6c6d;
  border-left: 4px solid var(--callout-border-color);
  border-radius: 4px;
  border-radius: var(--border-radius-medium);
  margin-bottom: calc(4px * 3);
  margin-bottom: var(--spacing-3);
  padding: calc(4px * 3);
  padding: var(--spacing-3);
  padding-left: calc(4px * 12);
  padding-left: var(--spacing-12);
  position: relative;
  row-gap: calc(4px * 3);
  row-gap: var(--spacing-3);
}
.callout::before {
  background: var(--callout-icon-path);
  content: "";
  display: inline-block;
  height: calc(4px * 4);
  height: var(--spacing-4);
  left: calc(4px * 4);
  left: var(--spacing-4);
  min-width: calc(4px * 4);
  min-width: var(--spacing-4);
  position: absolute;
  top: calc(calc(4px * 4) + calc(4px * 0.5));
  top: calc(var(--spacing-4) + var(--spacing-05));
  width: calc(4px * 4);
  width: var(--spacing-4);
}
.callout p {
  margin: 0;
}
.callout a {
  color: #025fd7;
  color: var(--base-color);
  text-decoration: none;
}
.callout-info {
  --callout-bg-color: var(--callout-background-info);
  --callout-border-color: var(--callout-border-color-info);
  --callout-icon-path: url(https://bump.sh/packs/static/info-c52942fcfb8a64056cff.svg);
}
.callout-success {
  --callout-bg-color: var(--callout-background-success);
  --callout-border-color: var(--callout-border-color-success);
  --callout-icon-path: url(https://bump.sh/packs/static/success-565c1b89f28d018014e2.svg);
}
.callout-warn {
  --callout-bg-color: var(--callout-background-warn);
  --callout-border-color: var(--callout-border-color-warn);
  --callout-icon-path: url(https://bump.sh/packs/static/warning-abae0b11a74fd52510ff.svg);
}
.callout-error {
  --callout-bg-color: var(--callout-background-error);
  --callout-border-color: var(--callout-border-color-error);
  --callout-icon-path: url(https://bump.sh/packs/static/error-20fd2d8370e619b4596a.svg);
}
.code-block {
  color: #424344;
  color: var(--code-color);
  overflow: auto;
  white-space: pre;
  font-size: 0.825rem;

  .title {
    padding: calc(4px * 2) calc(4px * 3);
    padding: var(--spacing-2) var(--spacing-3);
  }
}
.code-block.verb {
  text-transform: uppercase;
  overflow: visible;
  overflow: initial;
}
.code-inline {
  background-color: #f9fafb;
  background-color: var(--panel-bg-color);
  border: 1px solid #eeeeee;
  border: var(--border-default);
  border-radius: 4px;
  border-radius: var(--border-radius-medium);
  font-size: 0.75rem;
  -webkit-hyphens: none;
          hyphens: none;
  padding: calc(4px * 0.5);
  padding: var(--spacing-05);
}
.code-block.dark {
  background-color: #222325;
  background-color: var(--gray-90);
  border-radius: calc(4px * 2);
  border-radius: var(--border-radius-large);
  font-size: 0.875rem;
  white-space: normal;

  .code-block__title {
    background-color: #131415;
    background-color: var(--bg-code-title);
    color: #ffffff;
    color: var(--white);
    line-height: 1rem;
    padding: calc(4px * 4) calc(4px * 3);
    padding: var(--spacing-4) var(--spacing-3);
  }

  .code-block__content {
    grid-column-gap: 4px;
    grid-column-gap: var(--spacing-1);
    -moz-column-gap: 4px;
         column-gap: 4px;
    -moz-column-gap: var(--spacing-1);
         column-gap: var(--spacing-1);
    display: grid;
    position: relative;

    .highlight {
      font-size: 0.875rem;
      margin: 0;
      width: 100%;

      .err {
        background: transparent;
      }
    }
  }

  .code-block__actions {
    align-items: center;
    color: #ffffff;
    color: var(--white);
    display: flex;
    position: absolute;
    right: calc(4px * 4);
    right: var(--spacing-4);
    top: calc(4px * 5);
    top: var(--spacing-5);

    .copy-icon {
      margin-left: calc(4px * 3);
      margin-left: var(--spacing-3);
    }

    button {
      --button-text-color: var(--white);
    }
  }
}
common-header {
  display: flex;
  flex-direction: column;
  gap: calc(4px * 2);
  gap: var(--spacing-2);

  h1, p {
    margin: 0;
  }

  h1 {
    font-size: 1.5rem;
  }
}
.doc-compare__empty-state {
  align-items: center;
  background-color: #f9fafb;
  background-color: var(--panel-bg-color);
  border-radius: calc(4px * 2);
  border-radius: var(--border-radius-large);
  border: 1px solid #eeeeee;
  border: var(--border-default);
  color: #f9fafb;
  color: var(--panel-bg-color);
  display: flex;
  flex-direction: column;
  gap: calc(4px * 3);
  gap: var(--spacing-3);
  justify-content: center;
  padding: calc(4px * 4) calc(4px * 6);
  padding: var(--spacing-4) var(--spacing-6);
}
.doc-compare__empty-state__title {
  color: #6a6c6d;
  color: var(--text-color-secondary);
  font-size: 1.125rem;
  font-weight: 500;
  font-weight: var(--font-weight-medium);
  margin: 0;
}
.doc-compare__empty-state p {
  margin: 0;
}
.doc-compare__empty-state #version-loading path:last-child {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: dash 1.2s linear infinite;
}
cookie-banner {
  align-items: center;
  background-color: #ffffff;
  background-color: var(--bg-color);
  border: 1px solid #eeeeee;
  border: var(--border-default);
  border-radius: calc(4px * 10);
  border-radius: var(--border-radius-round);
  bottom: calc(4px * 8);
  bottom: var(--spacing-8);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.875rem;
  gap: calc(4px * 2) calc(4px * 4);
  gap: var(--spacing-2) var(--spacing-4);
  left: 0;
  margin: auto;
  max-inline-size: calc(100vw - calc(4px * 16));
  max-inline-size: calc(100vw - var(--spacing-16));
  padding: calc(4px * 1.5);
  padding: var(--spacing-1-5);
  padding-left: calc(4px * 4);
  padding-left: var(--spacing-4);
  position: fixed;
  right: 0;
  width: -moz-fit-content;
  width: fit-content;

  &[aria-hidden="true"] {
    display: none;
  }

  p {
    margin: 0;
  }

  a {
    color: #025fd7;
    color: var(--base-color);
    text-decoration: none;
  }

  .action-buttons {
    display: flex;
    gap: calc(4px * 2);
    gap: var(--spacing-2);
  }

  @media (max-width: 999.98px) {
    border-radius: calc(4px * 4);
    border-radius: var(--border-radius-xlarge);
    padding: calc(4px * 3) calc(4px * 4);
    padding: var(--spacing-3) var(--spacing-4);
  }
}
copy-field {
  align-items: center;
  background-color: #f9fafb;
  background-color: var(--panel-bg-color);
  border-radius: 4px;
  border-radius: var(--border-radius-medium);
  display: flex;
  gap: calc(4px * 3);
  gap: var(--spacing-3);
  justify-content: space-between;
  padding: calc(4px * 3);
  padding: var(--spacing-3);

  button[data-button-style="naked"] {
    color: #424344;
    color: var(--text-color);

    &:hover {
      text-decoration: none;

      &[disabled] {
        cursor: auto;
      }
    }

    svg {
      height: auto;
      width: auto;
    }
  }
}
body.no-scroll {
  overflow: hidden
    /* avoid scroll when open dialog modal */
}
:where(dialog) {
  --dialog-width: 480px;

  background-color: #ffffff;

  background-color: var(--bg-color);
  background-image: linear-gradient(to bottom, #eeeeee 0%, transparent 100%);
  background-image: linear-gradient(to bottom, var(--bg-color-secondary) 0%, transparent 100%);
  background-size: 100% calc(4px * 35);
  background-size: 100% var(--spacing-35);
  background-repeat: no-repeat;
  border: 1px solid #eeeeee;
  border: var(--border-default);
  border-radius: calc(4px * 2);
  border-radius: var(--border-radius-large);
  color: #424344;
  color: var(--text-color);
  max-height: auto;
  max-height: var(--dialog-height, auto);
  max-width: 480px;
  max-width: var(--dialog-width, auto);
  padding: 0;
  text-align: left;
  text-align: initial;
  white-space: wrap;
  width: 100%;

  &[data-dialog-size="large"] {
    --dialog-width: 640px;
  }

  &::backdrop {
    background: color-mix(in srgb, #131415, transparent 70%);
  }

@supports (color: color-mix(in lch, red, blue)) {
&::backdrop {
    background: color-mix(in srgb, var(--black), transparent 70%);
  }
}
}
.dialog {
  .close-dialog {
    background: none;
    color: #6a6c6d;
    color: var(--text-color-secondary);
    height: calc(4px * 3);
    height: var(--spacing-3);
    position: absolute;
    right: calc(4px * 6);
    right: var(--spacing-6);
    top: calc(4px * 5);
    top: var(--spacing-5);
    border: none;
    padding: 0;
  }

  .close-dialog:hover {
    background: none;
    color: #6a6c6d;
    color: var(--text-color-secondary);
  }

  header {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: calc(4px * 6);
    gap: var(--spacing-6);
    margin: auto;
    padding: calc(4px * 4) calc(4px * 6) 0;
    padding: var(--spacing-4) var(--spacing-6) 0;
    width: calc(100% - calc(4px * 34));
    width: calc(100% - var(--spacing-34));

    h2 {
      color: #131415;
      color: var(--title-color);
      font-size: 1.25rem;
      font-size: var(--text-xl);
      font-weight: var(--font-weight-demibold);
      margin: 0;
      text-align: center;
    }
  }

  .dialog-body {
    display: flex;
    flex-direction: column;
    gap: calc(4px * 3);
    gap: var(--spacing-3);
    font-size: 0.875rem;
    font-size: var(--text-sm);
    padding: calc(4px * 6);
    padding: var(--spacing-6);

    ul {
      list-style-type: disc;
      padding-left: calc(4px * 4);
      padding-left: var(--spacing-4);
    }

    hr {
      margin: 0 calc(4px * -6);
      margin: 0 var(--spacing-6-minus);
    }

    h3 {
      color: #131415;
      color: var(--title-color);
      font-size: 0.875rem;
      font-size: var(--text-sm);
      font-weight: 600;
      font-weight: var(--font-weight-semibold);
      margin-bottom: 0;
    }
  }

  .dialog-buttons {
    display: flex;
    gap: calc(4px * 3);
    gap: var(--spacing-3);
    justify-content: end;
    padding-top: calc(4px * 3);
    padding-top: var(--spacing-3);
  }

  &.confirmation-dialog {
    background-image: none;

    header {
      align-items: center;
      border-bottom: 1px solid #eeeeee;
      border-bottom: var(--border-default);
      flex-direction: row;
      justify-content: space-between;
      padding: calc(4px * 3) calc(4px * 6);
      padding: var(--spacing-3) var(--spacing-6);
      width: auto;

      h2 {
        font-size: 0.875rem;
        font-size: var(--text-sm);
        font-weight: 600;
        font-weight: var(--font-weight-semibold);
      }

      button {
        position: static;
        position: initial;

        svg {
          aspect-ratio: 1 / 1;
          width: calc(4px * 3);
          width: var(--spacing-3);
        }
      }
    }

    .dialog-body {
      gap: 0;
      padding-block: calc(4px * 4);
      padding-block: var(--spacing-4);

      & > *:first-child {
        margin-top: 0;
      }

      .input {
        margin-top: calc(4px * 4);
        margin-top: var(--spacing-4);
      }

      .button:not(.dialog-buttons > *) {
        margin-top: calc(4px * 3);
        margin-top: var(--spacing-3);
        width: 100%;
      }
    }
  }

  .confirmation-dialog-buttons  {
    margin-top: calc(4px * 2);
    margin-top: var(--spacing-2);
  }
}
.dropdown {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  transition: background-color ease 150ms;
  transition: background-color var(--base-timing) var(--base-duration);
}
.dropdown.outlined:hover,
.dropdown--branches:hover {
  background-color: #f9fafb;
  background-color: var(--bg-color-light);
}
.dropdown[aria-expanded="true"].outlined:hover,
.dropdown--branches[aria-expanded="true"]:hover {
  background-color: #ffffff;
  background-color: var(--bg-color);
}
.dropdown-title {
  --dropdown-title-min-width: initial;
  align-items: center;
  color: currentColor;
  cursor: pointer;
  display: flex;
  gap: calc(4px * 2);
  gap: var(--spacing-2);
  height: calc(4px * 8);
  height: var(--spacing-8);
  justify-content: space-between;
  flex-direction: row;
  min-width: var(--dropdown-title-min-width);
  padding: calc(4px * 3) calc(4px * 8);
  padding: var(--spacing-3) var(--spacing-8);
  transition: background-color ease-out 0.1s;
  transition: var(--theme-change-transition);
  white-space: nowrap;
}
.dropdown-title [data-dropdown-target="current"] {
  display: flex;
}
.dropdown.outlined .dropdown-title {
  border: 1px solid #eeeeee;
  border: var(--border-default);
  border-radius: 4px;
  border-radius: var(--border-radius-medium);
  padding: 4px calc(4px * 4);
  padding: var(--spacing-1) var(--spacing-4);
}
.dropdown.secondary .dropdown-title {
  background-color: #f9fafb;
  background-color: var(--panel-bg-color);
  border: 1px solid #eeeeee;
  border: var(--border-default);
  border-radius: 4px;
  border-radius: var(--border-radius-medium);
  padding: calc(4px * 2) calc(4px * 4);
  padding: var(--spacing-2) var(--spacing-4);
}
.dropdown-title span {
  color: currentColor;
  display: block;
  font-size: 0.8rem;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dropdown-title .counter {
  border: 1px solid #eeeeee;
  border: var(--border-default);
  border-radius: calc(4px * 10);
  border-radius: var(--border-radius-round);
  color: #6a6c6d;
  color: var(--text-color-secondary);
  font-size: 0.75rem;
  margin-left: calc(4px * 2);
  margin-left: var(--spacing-2);
  padding: calc(4px * 0.25) calc(4px * 2) 0 calc(4px * 2);
  padding: var(--spacing-px) var(--spacing-2) 0 var(--spacing-2);
}
.dropdown-title svg {
  color: currentColor;
  display: inline-block;
  flex-shrink: 0;
  opacity: 0.8;
  transform: rotate(0);
  transition: transform ease-in 0.2s;
}
.dropdown[aria-expanded="true"] .dropdown-title > .caret-down {
  transform: rotate(-180deg);
}
.menu-dropdown {
  background: #ffffff;
  background: var(--bg-color);
  border: 1px solid #eeeeee;
  border: var(--border-default);
  border-radius: 4px;
  border-radius: var(--spacing-1);
  box-shadow: 0 0 16px rgba(0, 0, 0, 0.1);
  display: block;
  font-size: 0.875rem;
  max-height: none;
  min-width: 180px;
  opacity: 0;
  position: absolute;
  top: 200%;
  transition-property: opacity top;
  transition-duration: 200ms;
  visibility: hidden;
  width: -moz-max-content;
  width: max-content;
}
.menu-dropdown.without-padding {
  padding: 0;
}
.dropdown[aria-expanded="true"] .menu-dropdown {
  display: block;
  opacity: 100%;
  top: 140%;
  transition-duration: 0.5s;
  transition-property: all;
  transition-duration: 200ms;
  visibility: visible;
  z-index: 10;
}
.menu-dropdown {
  padding: calc(4px * 2);
  padding: var(--spacing-2);
  z-index: 1;

  &.right {
    left: auto;
    right: 0;
  }

  a, button, [aria-current] {
    color: #424344;
    color: var(--text-color);
    display: flex;
    flex-direction: row;
    gap: calc(4px * 6);
    gap: var(--spacing-6);
    justify-content: space-between;
    min-height: calc(4px * 8);
    min-height: var(--spacing-8);
    padding: calc(4px * 1.5) calc(4px * 3);
    padding: var(--spacing-1-5) var(--spacing-3);
    position: relative;
    width: 100%;
  }

  a, button {
display: flex;
}

  a, button {
flex-direction: row;
}

  a, button {
align-items: center;
}

  a, button {
justify-content: space-between;
}
a, button {
  display: flex;
  flex-direction: row;
}

  a, button {
    background: transparent;
    border-radius: 4px;
    border-radius: var(--border-radius-medium);
    text-decoration: none;

    &:hover {
      background-color: #f0f4f7;
      background-color: var(--dropdown-bg-color-hover);
      text-decoration: none;
    }

    &[data-button-state="warning"] {
      color: #df9136;
      color: var(--text-color-warning);
    }

    &[data-button-state="error"] {
      color: #bf0e08;
      color: var(--text-color-error);
    }
  }

  [aria-current] {
    cursor: default;
    padding-inline-end: calc(4px * 8);
    padding-inline-end: var(--spacing-8);
    height: calc(4px * 8);
    height: var(--spacing-8);
  }
}
.menu-dropdown hr {
  margin: 0;
}
.menu-dropdown * + * {
  margin-block-start: 4px;
  margin-block-start: var(--spacing-1);
}
.menu-dropdown b {
  line-height: calc(4px * 8);
  line-height: var(--spacing-8);
}
.menu-dropdown * + b {
  margin-block-start: calc(4px * 3);
  margin-block-start: var(--spacing-3);
}
.menu-dropdown a.active::after {
  content: "";
  background: url(https://bump.sh/packs/static/checkmark-6f736912a08090b9655a.svg) no-repeat;
  filter: contrast(0);
  height: calc(4px * 3);
  height: var(--spacing-3);
  width: calc(4px * 3);
  width: var(--spacing-3);
}
.menu-dropdown .menu-item {
  align-items: center;
  display: flex;
  gap: calc(4px * 3);
  gap: var(--spacing-3);
}
.menu-dropdown > span {
  display: flex;
  padding: calc(4px * 3) calc(4px * 8);
  padding: var(--spacing-3) var(--spacing-8);
}
.menu-dropdown .icon-link {
  align-items: center;
  justify-content: start;
}
.menu-dropdown svg {
  color: currentColor;
  margin-left: calc(4px * 3);
  margin-left: var(--spacing-3);
  position: absolute;
  transform: none;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
}
.menu-dropdown a.active svg {
  display: block;
}
.menu-dropdown .icon-link svg {
  margin: 0;
  margin-right: calc(4px * 3);
  margin-right: var(--spacing-3);
  stroke: currentColor;
}
.dropdown:where([data-headings="true"]) .menu-dropdown {
  padding: calc(4px * 2) calc(4px * 4) calc(4px * 3);
  padding: var(--spacing-2) var(--spacing-4) var(--spacing-3);
}
:where(.dropdown[data-headings="true"]) ul > li + li {
  margin-block-start: calc(4px * 3);
  margin-block-start: var(--spacing-3);
}
:where(.dropdown[data-headings="true"]) ul ul {
  margin-block-start: 4px;
  margin-block-start: var(--spacing-1);
}
@media (min-width: 500px) {
  .dropdown {
    padding: 0;
  }

  .dropdown-title {
    padding: 4px 0;
    padding: var(--spacing-1) 0;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }

  .dropdown-button .dropdown-title {
    border: 1px solid #eeeeee;
    border: var(--border-default);
    border-radius: 4px;
    border-radius: var(--border-radius-medium);
    -moz-column-gap: calc(4px * 2);
         column-gap: calc(4px * 2);
    -moz-column-gap: var(--spacing-2);
         column-gap: var(--spacing-2);
    display: flex;
    min-height: calc(4px * 8);
    min-height: var(--spacing-8);
    padding: 4px calc(4px * 4);
    padding: var(--spacing-1) var(--spacing-4);
  }

  .menu-dropdown > ul {
    max-height: 50vh;
    overflow-y: auto;
  }

  .dropdown.active .menu-dropdown a {
    color: #424344;
    color: var(--text-color);
  }

  .menu-dropdown > span {
    padding: 4px calc(4px * 3);
    padding: var(--spacing-1) var(--spacing-3);
  }

  .menu-dropdown > :last-child {
    white-space: nowrap;
  }
}
.dropdown--branches {
  border: 1px solid #eeeeee;
  border: var(--border-default);
  border-radius: calc(4px * 10);
  border-radius: var(--border-radius-round);
  margin: 0;
  min-width: calc(4px * 30);
  min-width: var(--spacing-30);
  padding-inline: calc(4px * 4);
  padding-inline: var(--spacing-4);
}
.dropdown--branches .dropdown-title {
  font-size: 0.875rem;
  line-height: 1.5;
  padding: 0;
}
.dropdown--branches .menu-dropdown {
  left: 0;
}
.empty-state {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(4px * 8);
  padding: var(--spacing-8);
  text-align: center;
}
.empty-state svg {
  margin-bottom: calc(4px * 8);
  margin-bottom: var(--spacing-8);
}
.empty-state .new,
.empty-state .new:hover {
  background: none;
  border: 0;
  color: #025fd7;
  color: var(--base-color);
  margin-top: calc(4px * 3);
  margin-top: var(--spacing-3);
  padding: 0;
  text-decoration: none;
}
.filters {
  border-bottom: 1px solid #eeeeee;
  border-bottom: var(--border-default);
  -moz-column-gap: calc(4px * 8);
       column-gap: calc(4px * 8);
  -moz-column-gap: var(--spacing-8);
       column-gap: var(--spacing-8);
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  row-gap: calc(4px * 8);
  row-gap: var(--spacing-8);
  width: 100%;
}
.filters li {
  align-items: start;
  display: flex;
  flex-direction: row;
  gap: calc(4px * 2);
  gap: var(--spacing-2);
}
.filters .filter__tab,
.filters .filter__tab:hover {
  border-bottom: 2px solid transparent;
  color: #6a6c6d;
  color: var(--text-color-secondary);
  -moz-column-gap: calc(4px * 2);
       column-gap: calc(4px * 2);
  -moz-column-gap: var(--spacing-2);
       column-gap: var(--spacing-2);
  cursor: pointer;
  display: inline-flex;
  font-weight: 600;
  font-weight: var(--font-weight-semibold);
  padding-bottom: calc(4px * 3);
  padding-bottom: var(--spacing-3);
  text-decoration: none;
  white-space: nowrap;
}
.filters .filter__tab.active,
.filters .filter__tab.active:hover {
  border-color: #424344;
  border-color: var(--text-color);
  color: #424344;
  color: var(--text-color);
}
.filters .label {
display: inline-flex;
align-items: center;
  background-color: hsla(0, 0%, 100%, 0.4);
  background-color: var(--bg-color-transparent);
  border: 1px solid #eeeeee;
  border: 1px solid var(--border-color-default);
  color: #424344;
  color: var(--text-color);
  font-size: 12px;
  font-weight: 600;
  gap: 4px;
  gap: var(--spacing-1);
  padding: calc(4px * 0.5) calc(4px * 2);
  padding: var(--spacing-05) var(--spacing-2);
  text-transform: none;
  text-transform: initial;
}
@media (max-width: 500px) {
  .filters {
    border: 0;
    flex-wrap: initial;
    font-size: 14px;
    overflow-x: scroll;
  }
}
.active-filter .filter-labels {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.active-filter:not(:first-child) {
  margin-left: calc(4px * 3);
  margin-left: var(--spacing-3);
}
.active-filter.tabs:first-child {
  margin-right: auto;
}
filter-search {
  position: relative;
  gap: calc(4px * 3);
  gap: var(--spacing-3);

  label {
    font-weight: normal;
    margin: 0 4px 0 0;
    margin: 0 var(--spacing-1) 0 0;
  }
  #filter_name{
    font-size: 0.9em;
  }
  button[type=submit] {
    background-color: hsla(0, 0%, 100%, 0.4);
    background-color: var(--bg-color-transparent);
    color: #eeeeee;
    color: var(--border-color-default);
    position: absolute;
    right: calc(4px * 3);
    right: var(--spacing-3);
  }
}
.active-filters {
  display: flex;
  align-items: center;
  justify-content: end;

  @media (max-width: 799.98px) {
    justify-content: space-between;
  }
}
.input-group {
  align-items: stretch;
  display: flex;
}
.input-group input[type="text"] {
  flex-grow: 1;
}
.input-group__extra {
  align-items: center;
  display: inline-flex;
  flex-shrink: 1;
  gap: calc(4px * 3);
  gap: var(--spacing-3);
  padding: 4px calc(4px * 4);
  padding: var(--spacing-1) var(--spacing-4);
}
.input-group__extra .button {
  height: revert;
  padding: 4px calc(4px * 3);
  padding: var(--spacing-1) var(--spacing-3);
}
.label {
  --label-bg: var(--panel-bg-color);
  --label-bg-info: var(--bg-color-neutral);
  --label-bg-error: var(--bg-color-error);
  --label-bg-success: var(--bg-color-success);
  --label-bg-none: var(--bg-color-transparent);
  --label-border-color: var(--border-color-default);
  --label-text-color: var(--text-color);

  align-items: center;
  background-color: #f9fafb;
  background-color: var(--label-bg);
  border-radius: 4px;
  border-radius: var(--border-radius-medium);
  color: #424344;
  color: var(--label-text-color);
  display: inline-flex;
  font-size: 0.75rem;
  gap: 4px;
  gap: var(--spacing-1);
  line-height: 2;
  padding: 0 calc(4px * 2);
  padding: 0 var(--spacing-2);
  white-space: nowrap;

  svg {
    height: 13px;
  }
}
/* shape variants */
.label[data-label-type="rounded"] {
  --label-bg: var(--bg-color);
  --label-text-color: var(--app-text-color-secondary);

  border-radius: calc(4px * 10);

  border-radius: var(--border-radius-round);
  border: 1px solid var(--label-border-color);
  height: calc(4px * 5);
  height: var(--spacing-5);
  line-height: 1;
  padding: 4px calc(4px * 2);
  padding: var(--spacing-1) var(--spacing-2);
  text-transform: capitalize;
}
.label[data-label-type="outlined"] {
  background: 0;
  border: 1px solid #eeeeee;
  border: var(--border-default);
}
/* color modifiers */
.label[data-label-status="empty"] {
  --label-bg: var(--label-bg-none);
}
.label[data-label-status="info"] {
  --label-bg: var(--label-bg-info);
  --label-border-color: rgba(var(--blue-rgb), 0.1);
  --label-text-color: var(--text-color-neutral);
}
.label[data-label-status="success"] {
  --label-bg: var(--label-bg-success);
  --label-border-color: rgba(var(--green-rgb), 0.1);
  --label-text-color: var(--text-color-success);
}
.label[data-label-status="warning"] {
  --label-bg: var(--bg-color-warning);
  --label-border-color: rgba(var(--orange-50-rgb), 0.1);
  --label-text-color: var(--text-color-warning);
}
.label[data-label-status="error"] {
  --label-bg: var(--bg-color-error);
  --label-border-color: rgba(var(--red-rgb), 0.1);
  --label-text-color: var(--text-color-error);
}
.label[data-label-status="breaking"] {
  --label-bg: var(--label-bg-error);
  --label-border-color: rgba(var(--red-rgb), 0.1);
  --label-text-color: var(--text-color-error);
}
.label[data-label-status="inverted"] {
  --label-bg: var(--bg-color-inverted);
  --label-text-color: var(--text-color-inverted);
}
.label[data-label-status="extra"] {
  --label-bg: var(--bg-color-extra);
  --label-text-color: var(--text-color-extra);
}
.label[data-label-status="theme"] {
  --label-bg: color-mix(in srgb, var(--doc-base-color), transparent 90%);
  --label-text-color: var(--doc-base-color);
}
.list-element {
  border: 1px solid #eeeeee;
  border: 1px solid var(--border-color-default);
  -moz-column-gap: calc(4px * 4);
       column-gap: calc(4px * 4);
  -moz-column-gap: var(--spacing-4);
       column-gap: var(--spacing-4);
  flex-wrap: wrap;
  margin-bottom: calc(4px * 3);
  margin-bottom: var(--spacing-3);
  border-radius: 4px;
  border-radius: var(--border-radius-medium);
  display: flex;
  min-height: calc(4px * 20);
  min-height: var(--spacing-20);
  padding: calc(4px * 6);
  padding: var(--spacing-6);
  row-gap: calc(4px * 4);
  row-gap: var(--spacing-4);
  align-items: stretch;

  &.disabled {
    background-color: #f9fafb;
    background-color: var(--panel-bg-color);
    color: var(--app-text-color-secondary);
  }
}
.list-element .content {
  flex: 1;

  p {
    margin: 0;
  }
}
.list-element .api-card-header,
.list-element .tags {
  align-items: center;
  -moz-column-gap: calc(4px * 3);
       column-gap: calc(4px * 3);
  -moz-column-gap: var(--spacing-3);
       column-gap: var(--spacing-3);
  display: flex;
  flex-wrap: wrap;
  row-gap: calc(4px * 2);
  row-gap: var(--spacing-2);
}
.list-element .tag {
  align-items: center;
  background-color: #025fd7;
  background-color: var(--doc-base-color, var(--bg-color-primary));
  border-radius: 4px;
  border-radius: var(--border-radius-medium);
  color: #ffffff;
  color: var(--white);
  -moz-column-gap: calc(4px * 2);
       column-gap: calc(4px * 2);
  -moz-column-gap: var(--spacing-2);
       column-gap: var(--spacing-2);
  display: flex;
  font-size: 0.75rem;
  padding: 0 calc(4px * 2);
  padding: 0 var(--spacing-2);
}
.list-element .tag svg {
  height: 1rem;
}
.list-element .title {
  align-items: center;
  display: flex;
  font-weight: 500;
  font-weight: var(--font-weight-medium);
  font-size: 1.1em;
  margin: 0;
}
.list-element .title .pill {
  background: #f0f4f7;
  background: var(--pill-bg-color);
  border-radius: 12px;
  font-size: 0.75em;
  margin-left: calc(4px * 2);
  margin-left: var(--spacing-2);
  padding: 4px calc(4px * 2);
  padding: var(--spacing-1) var(--spacing-2);
}
.list-element .title .pill-owner {
  background:#025fd7;
  background:var(--bg-color-primary);
  color: #ffffff;
  color: var(--text-color-inverted);
}
.list-element .title .pill-ongoing {
  background:#eeeeee;
  background:var(--bg-color-secondary);
  color: #6a6c6d;
  color: var(--text-color-secondary);
}
.list-element .actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: calc(4px * 2);
  gap: var(--spacing-2);
}
p {
  margin-bottom: 0;
}
.list-element .extra p {
  margin-bottom: 0;
}
.list-element .extra {
  display: flex;
  align-items: center;
}
.list-element .dropdown {
  font-size: 14px;
}
.list-element .button[data-button-style="secondary"] {
  border: 1px solid #eeeeee;
  border: 1px solid var(--border-color-default);
  color: currentColor;
  font-weight: 500;
  font-weight: var(--font-weight-medium);
  padding: calc(4px * 3);
  padding: var(--spacing-3);

  &:hover {
    background-color: transparent;
    color: currentColor;
  }

  &.delete {
    border-color: #eeeeee;
    border-color: var(--border-color-default);
    color: var(--button-color-error);
  }

  &.delete:hover {
    border-color: var(--button-color-error);
  }
}
.list-element .delete {
  color: #bf0e08 !important;
  color: var(--red) !important;
}
@media (max-width: 500px) {
  .list-element {
    flex-direction: column;
  }

  .list-element .extra {
    margin-top: calc(4px * 3);
    margin-top: var(--spacing-3);
  }
}
.loader[data-loader-type="circle"] {
  animation: rotation 1s linear infinite;
  aspect-ratio: 1 / 1;
  border: 2px solid #025fd7;
  border: 2px solid var(--base-color);
  border-bottom-color: transparent;
  border-radius: 50%;
  height: calc(4px * 4);
  height: var(--spacing-4);
}
.loader[data-loader-type="bars"] {
  --bar: no-repeat linear-gradient(currentColor 0 0);
  animation: load 1s infinite linear;
  aspect-ratio: 1;
  background:
    no-repeat linear-gradient(currentColor 0 0) 0%   50%,
    no-repeat linear-gradient(currentColor 0 0) 50%  50%,
    no-repeat linear-gradient(currentColor 0 0) 100% 50%;
  background:
    var(--bar) 0%   50%,
    var(--bar) 50%  50%,
    var(--bar) 100% 50%;
  background-size: 20% 100%;
  margin-right: 1px;
  width: 16px;
}
.menu-toggle,
.mobile-menu-toggle {
  display: none;
}
[data-mobile-nav-target="drawer"] {
  display: flex;
  transition: right 0.25s ease-in;
}
@media (max-width: 850px) {
  .mobile-menu-toggle {
    background: #ffffff;
    background: var(--bg-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0px;
    top: var(--body-top);
    border-bottom: 1px solid #eeeeee;
    border-bottom: var(--border-default);
    padding: calc(4px * 2) calc(4px * 6);
    padding: var(--spacing-2) var(--spacing-6);
    height: calc(4px * 16);
    height: var(--spacing-16);
    z-index: 16;
  }

  .menu-toggle {
    background: 0;
    border: 0;
    padding: 0;
    position: relative;
    text-indent: -200vw;
    width: calc(4px * 6);
    width: var(--spacing-6);
    display: block;
    flex-shrink: 0;
    margin-left: auto;

    &::before,
    &::after {
      content: "";
      display: block;
      border-top: 2px solid #424344;
      border-top: 2px solid var(--text-color);
      border-radius: 2px;
      width: 100%;
      height: calc(4px * 0.5);
      height: var(--spacing-05);
      position: absolute;
      transition: 0.25s ease-out transform;
      top: calc(4px * 2);
      top: var(--spacing-2);
    }

    &::after {
      top: auto;
      top: initial;
      bottom: calc(4px * 2);
      bottom: var(--spacing-2);
    }
  }

  .mobile-menu-toggle .menu-toggle:hover {
    background: transparent;
  }

  [data-mobile-nav-target="drawer"] {
    align-items: stretch;
    background-color: #ffffff;
    background-color: var(--bg-color);
    border-right: 1px solid #eeeeee;
    border-right: var(--border-default);
    box-shadow: 0 2px 20px rgba(19, 20, 21, 0.5);
    box-shadow: 0 2px 20px rgba(var(--black-rgb), 0.5);
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    height: 100vh;
    justify-content: space-between;
    left: -100%;
    max-width: calc(100vw - calc(4px * 18));
    max-width: calc(100vw - var(--spacing-18));
    padding: calc(4px * 10) 0;
    padding: var(--spacing-10) 0;
    position: absolute;
    overflow-y: scroll;
    scrollbar-width: none;
    transition: left 0.35s ease-in;
    top: 0;
    will-change: left;
    width: 18.75rem;
    width: var(--sidebar-width, 18.75rem);
    z-index: 100;
  }

  [data-toggled-menu="true"] {
    .menu-toggle {
      &::before {
        transform: translateY(7px) rotate(45deg);
        transition: 0.25s ease-in transform;
      }

      &::after {
        transform: translateY(-7px) rotate(-45deg);
        transition: 0.25s ease-in transform;
      }
    }

    [data-mobile-nav-target="drawer"] {
      left: 0;
      display: flex;
      transform: translateX(0);
    }
  }
}
.pagination {
  font-size: 0.875rem;
  font-size: var(--text-sm);

  nav, .page {
    align-items: center;
    display: flex;
  }

  nav {
    gap: calc(4px * 4);
    gap: var(--spacing-4);
    padding-block: calc(4px * 1.5);
    padding-block: var(--spacing-1-5);
    place-content: end;
  }

  .page {
    gap: calc(4px * 2);
    gap: var(--spacing-2);
  }

  .prev svg {
    rotate: -90deg;
  }

  .next svg {
    rotate: 90deg;
  }

  .disabled {
    color: #aab0b6;
    color: var(--text-color-disabled);
  }
}
portal-header {
  border-bottom: 1px solid #eeeeee;
  border-bottom: var(--border-default);

  .main-nav {
    padding-block: calc(4px * 4);
    padding-block: var(--spacing-4);
    padding-inline: calc(4px * 12);
    padding-inline: var(--spacing-12);
    border-bottom: 1px solid #eeeeee;
    border-bottom: var(--border-default);
  }

  &.wrapper {
    border-bottom: 1px solid #eeeeee;
    border-bottom: var(--border-default);

    .main-nav {
      padding-inline: 0;
      border-bottom: none;
    }
  }

  portal-resource-title {
    flex-shrink: 0;
    order: -1;
  }

  page-breadcrumbs {
    margin-block-end: calc(4px * 6);
    margin-block-end: var(--spacing-6);
  }

  .doc-top-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px calc(4px * 6);
    gap: var(--spacing-1) var(--spacing-6);
    font-size: 0.9rem;
  }

  .doc-top-nav > a {
    display: flex;
    align-items: center;
    gap: 4px;
    gap: var(--spacing-1);
    justify-content: start;
    height: calc(4px * 8);
    height: var(--spacing-8);
    width: 100%;

    svg {
      margin-inline-start: 4px;
      margin-inline-start: var(--spacing-1);
    }
  }

  .doc-top-nav > .dropdown {
    width: 100%;
  }

  .doc-title {
    display: flex;
    gap: 4px calc(4px * 6);
    gap: var(--spacing-1) var(--spacing-6);
    order: -1;
  }

  .dropdown-title {
    white-space: normal;
    white-space: initial;
    padding: 0;
  }

  :is(.menu-dropdown) {
    --dropdown-shadow: color-mix(in srgb, var(--gray-50), transparent 90%);
    border: 1px solid #eeeeee;
    border: var(--border-default);
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.1);
    padding-inline: 0;
    width: -moz-max-content;
    width: max-content;
    left: 0;
    width: 100%;

    a {
      border-radius: 0;
      box-sizing: border-box;
      white-space: normal;
      white-space: initial;
      width: 100%;
    }
  }

  #feedback {
    padding: 0;
    border: 0;
  }

  @media (min-width: 850.02px) {
    page-breadcrumbs {
      margin-block-end: 0;
      margin-inline-end: auto;
    }

    .doc-top-nav {
      align-items: center;
      justify-content: end;
      width: 100%;
    }

    .menu-dropdown {
      padding-inline: calc(4px * 2);
      padding-inline: var(--spacing-2);
      width: -moz-max-content;
      width: max-content;
    }

    .doc-top-nav > a,
    .doc-top-nav > .dropdown {
      margin: 0;
      width: auto;
    }

    .doc-top-nav > button:first-child {
      margin-right: auto;
    }

    .doc-top-nav:not(:has(.search-button)) .doc-title {
      margin-right: auto;
    }
  }

  @media (max-width: 850px) {
    border: 0;

    .main-nav {
      padding: 0;
      border-block-end: 0;
    }

    .doc-top-nav {
      padding-block-end: calc(4px * 4);
      padding-block-end: var(--spacing-4);
      border-block-end: 1px solid #eeeeee;
      border-block-end: var(--border-default);
      margin-block-end: calc(4px * 5);
      margin-block-end: var(--spacing-5);
    }

    .doc-top-nav {
      margin: 0;
      border: none;
    }

    .toggle-label {
      order: -1;
    }

    portal-resource-title, .doc-title {
      display: none;
    }
  }
}
portal-resource-title {
  display: flex;
  align-items: center;
  gap: calc(4px * 6);
  gap: var(--spacing-6);

  a {
    color: #424344;
    color: var(--text-color);
    font-size: 1.25rem;
    display: inline-flex;
    align-items: center;
    height: 100%;
    text-decoration: none;

    > * {
      font-size: 1.25rem;
    }
  }

  img {
    max-height: calc(4px * 10);
    max-height: var(--logo-height);
    max-width: 200px;
    max-width: var(--logo-width);

    &:is(.dark-theme *) {
      filter: invert(0.92) hue-rotate(180deg);
    }
  }

  @media (max-width: 850px) {
    height: 100%;
  }
}
h1 {
  color: #131415;
  color: var(--title-color); /* --title-color is white in dark theme */
}
.progress {
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  height: 16px;
  width: 16px; 
}
.progress-circle {
  fill: none;
  stroke: #025fd7;
  stroke: var(--base-color);
  stroke-linecap: round;
  stroke-width: 4px;
}
.progress-range {
  stroke: #eeeeee;
  stroke: var(--border-color-default);
}
.public-hero {
  margin: calc(4px * 20) auto calc(4px * 12);
  margin: var(--spacing-20) auto var(--spacing-12);
  max-width: 1200px;
  max-width: var(--screen-xl);
}
.public-hero .title {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: first baseline;
  margin-bottom: calc(4px * 4);
  margin-bottom: var(--spacing-4);
}
.public-hero .title h1 {
  font-size: 2rem;
  font-weight: 600;
  font-weight: var(--font-weight-semibold);
  margin-bottom: 0;
  margin-right: calc(4px * 3);
  margin-right: var(--spacing-3);
}
.alert {
  --alert-bg-color: var(--panel-bg-color);
  --alert-border-color: var(--panel-bg-color);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background-color: #f9fafb;
  background-color: var(--alert-bg-color);
  border: 1px solid rgba(#f9fafb, 20%);
  border: 1px solid rgba(var(--alert-border-color), 20%);
  border-radius: 4px;
  border-radius: var(--border-radius-medium);
  margin-bottom: calc(4px * 3);
  margin-bottom: var(--spacing-3);
  padding: calc(4px * 3);
  padding: var(--spacing-3);
  padding-left: calc(4px * 12);
  padding-left: var(--spacing-12);
  position: relative;
  row-gap: calc(4px * 3);
  row-gap: var(--spacing-3);
}
.alert::before {
  background: var(--alert-icon-path);
  content: "";
  display: inline-block;
  height: calc(4px * 4);
  height: var(--spacing-4);
  left: calc(4px * 4);
  left: var(--spacing-4);
  min-width: calc(4px * 4);
  min-width: var(--spacing-4);
  position: absolute;
  top: calc(calc(4px * 3) + calc(4px * 0.5));
  top: calc(var(--spacing-3) + var(--spacing-05));
  width: calc(4px * 4);
  width: var(--spacing-4);
}
.alert p {
  margin: 0;
}
.alert.no-icon {
  padding-left: calc(4px * 3);
  padding-left: var(--spacing-3);

  &::before {
    content: none;
  }
}
.alert-info {
  --alert-bg-color: var(--alert-background-info);
  --alert-border-color: var(--alert-border-color-info);
  --alert-icon-path: url(https://bump.sh/packs/static/info-c52942fcfb8a64056cff.svg);
}
.alert-success {
  --alert-bg-color: var(--alert-background-success);
  --alert-border-color: var(--alert-border-color-success);
  --alert-icon-path: url(https://bump.sh/packs/static/success-565c1b89f28d018014e2.svg);
}
.alert-warn {
  --alert-bg-color: var(--alert-background-warn);
  --alert-border-color: var(--alert-border-color-warn);
  --alert-icon-path: url(https://bump.sh/packs/static/warning-abae0b11a74fd52510ff.svg);
}
.alert-error {
  --alert-bg-color: var(--alert-background-error);
  --alert-border-color: var(--alert-border-color-error);
  --alert-icon-path: url(https://bump.sh/packs/static/error-20fd2d8370e619b4596a.svg);
}
.access-notice {
  background-color: #f9fafb;
  background-color: var(--panel-bg-color);
  border: 1px solid #eeeeee;
  border: 1px solid var(--border-color-default);
  border-radius: 4px;
  border-radius: var(--border-radius-medium);
  padding: calc(4px * 6);
  padding: var(--spacing-6);
}
radio-box {
  position: relative;

  input {
    opacity: 0;
    position: absolute;
  }

  .input-checked {
    border: 1px solid #eeeeee;
    border: var(--border-default);
    border-radius: 4px;
    border-radius: var(--border-radius-medium);
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
    transition: border-color 150ms ease;
    transition: border-color var(--base-duration) var(--base-timing);
    top: 0;

    &:hover {
      border-color: #4c555a;
      border-color: var(--input-border-color-hover);
    }
  }

  input:checked + .input-checked {
    box-shadow: rgb(2 95 215) 0px 0px 0px 2px inset;
  }

  label {
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 4px;
    gap: var(--spacing-1);
    height: 100%;
    margin: 0;
    min-height: 93px;
    padding: calc(4px * 4);
    padding: var(--spacing-4);
    width: 100%;
  }

  .description {
    font-size: 0.75rem;
    font-size: var(--text-xs);
    font-weight: 500;
    font-weight: var(--font-weight-medium);

    p {
      margin: 0;
    }
  }
}
.radio-box-container {
  display: grid;
  grid-gap: calc(4px * 6);
  grid-gap: var(--spacing-6);
  gap: calc(4px * 6);
  gap: var(--spacing-6);
  grid-template-columns: repeat(4, 1fr);
  max-width: 720px;
  max-width: var(--input-max-width);

  legend + & {
    margin-top: calc(4px * 2);
    margin-top: var(--spacing-2);
  }
}
.pill {
display: inline-block;
border-radius: 9999px;
border-width: 1px;
border-style: solid;
padding-left: 1rem;
padding-right: 1rem;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
font-size: 0.75rem;
line-height: 1rem;
}
.pill-blue {
  border-color: #9abfef30;
  background: #9abfef10;
  color: #025fd7;
  color: var(--blue-60);
}
.pill-dark {
  border-color: #9abfef30;
  background: cacl(#ffffff / 40);
  background: cacl(var(--white) / 40);
  color: #aab0b6;
  color: var(--gray-40);
}
search-input {
  display: grid;
  align-items: center;
  justify-content: start;

  button {
    grid-area: 1 / 1;
    width: calc(4px * 12);
    width: var(--spacing-12);
  }

  svg {
    color: #424344;
    color: var(--text-color);
  }

  input {
    grid-area: 1 / 1;
    padding-inline-start: calc(4px * 11);
    padding-inline-start: var(--spacing-11);
  }
}
.skeleton-line {
  background-color: #e3e9ef;
  background-color: var(--skeleton-color);
  border-radius: calc(4px * 40);
  border-radius: var(--spacing-40);
  display: block;
  height: calc(4px * 3);
  height: var(--spacing-3);
  max-width: 100%;
  position: relative;
  overflow: hidden;
}
.skeleton-line::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateX(-100%);
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0,
    rgba(255, 255, 255, 0.2) 20%,
    rgba(255, 255, 255, 0.5) 60%,
    rgba(255, 255, 255, 0)
  );
  animation: shimmer 2s infinite;
  content: "";
}
.skeleton-line[data-length="xl"] {
  width: 90%;
}
.skeleton-line[data-length="l"] {
  width: 75%
}
.skeleton-line[data-length="m"] {
  width: 60%;
}
.skeleton-line[data-length="s"] {
  width: 45%;
}
.skeleton-line[data-length="xs"] {
  width: 30%;
}
.skeleton-line[data-length="heading"] {
  margin-bottom: calc(4px * 8);
  margin-bottom: var(--spacing-8);
  width: 40%;
}
.tabs[data-tabs-style*="pill"] {
  background-color: #f9fafb;
  background-color: var(--panel-bg-color);
  border: 1px solid #eeeeee;
  border: var(--border-default);
  border-radius: 4px;
  border-radius: var(--border-radius-medium);
  display: flex;
  font-size: 0.875rem;
  gap: 1px;
  text-transform: capitalize;
  width: -moz-fit-content;
  width: fit-content;

  & > li {
    border-radius: 4px;
    border-radius: var(--border-radius-medium);
    min-width: calc(4px * 20);
    min-width: var(--spacing-20);
  }

  .tab {
    align-items: center;
    display: flex;
    gap: calc(4px * 2);
    gap: var(--spacing-2);
    justify-content: center;
    padding: 4px calc(4px * 3);
    padding: var(--spacing-1) var(--spacing-3);
    text-decoration: none;
    z-index: 1;
  }

  .tab:not(aria-disabled="false") {
    cursor: pointer;
  }

  .tab[aria-selected="true"],
  .tab[aria-disabled="false"] {
    background-color: #ffffff;
    background-color: var(--bg-color);
    border: 1px solid #eeeeee;
    border: var(--border-default);
    border-radius: 4px;
    border-radius: var(--border-radius-medium);
    margin: -1px;
  }

  .label {
    aspect-ratio: 1 / 1;
    border: 0;
    font-size: 0.625rem;
    justify-content: center;
    height: calc(4px * 5);
    height: var(--spacing-5);
    padding: 0;
  }

  .tab.before svg {
    margin-right: calc(4px * 2);
    margin-right: var(--spacing-2);
    transform: rotate(-180deg);
  }

  .tab.after svg {
    margin-left: calc(4px * 2);
    margin-left: var(--spacing-2);
  }

  .tab[aria-disabled="true"] {
    opacity: 0.2;
  }
}
.tabs[data-tabs-style*="nav"] > li {
  border-radius: 4px;
  border-radius: var(--border-radius-medium);
  min-width: calc(4px * 20);
  min-width: var(--spacing-20);

  &:first-child .tab {
    border-radius: 4px 0 0 4px;
    border-radius: var(--border-radius-medium) 0 0 var(--border-radius-medium);
  }

  &:last-child .tab {
    border-radius: 0 4px 4px 0;
    border-radius: 0 var(--border-radius-medium) var(--border-radius-medium) 0;
  }
}
.dark-theme .tabs[data-tabs-style="pill"] {
  --panel-bg-color: var(--black);

  .tab[aria-selected="true"] {
    --bg-color: var(--bg-color-light);
  }
}
.tabs-menu {
  align-items: center;
  border-bottom: 1px solid #eeeeee;
  border-bottom: var(--border-default);
  display: flex;
  gap: calc(4px * 6);
  gap: var(--spacing-6);

  .tab {
    border-bottom: 2px solid var(--tab-border-color);
    border-radius: 0;
    color: var(--tab-text-color);
    cursor: pointer;
    display: inline-flex;
    height: auto;
    padding: calc(4px * 4) 0;
    padding: var(--spacing-4) 0;
    position: relative;
    outline: none;
    overflow: hidden;
    text-decoration: none;
    z-index: 2;

    &[aria-current] {
      --tab-border-color: var(--base-color);
      --tab-text-color: var(--base-color);
    }
  }

  .extra {
    margin-inline-start: auto;
  }
}
.toggle-darkmode {
  width: 0;
  height: 0;
  opacity: 0;
  position: absolute;
}
.toggle-darkmode + .toggle-label {
  background-color: #bdc6cf;
  background-color: var(--slate-40);
  border-radius: 1em;
  position: relative;
  height: calc(4px * 3);
  height: var(--spacing-3);
  width: calc(4px * 10);
  width: var(--spacing-10);
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  text-indent: -9999px;
  color: transparent;
  cursor: pointer;
  margin-block: calc(4px * 2);
  margin-block: var(--spacing-2);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.toggle-darkmode + .toggle-label::before,
.toggle-darkmode + .toggle-label::after {
  content: "";
  position: absolute;
  left: 0;
  transition: background-color ease-out 0.1s, left ease-out 0.4s;
  transition: var(--theme-change-transition), left ease-out 0.4s;
}
.toggle-darkmode + .toggle-label::before {
  background-color: #ffffff;
  background-color: var(--bg-color);
  border: 1px solid #eeeeee;
  border: var(--border-default);
  border-radius: 50%;
  box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.12);
  height: calc(4px * 6);
  height: var(--spacing-6);
  width: calc(4px * 6);
  width: var(--spacing-6);
}
.toggle-darkmode + .toggle-label::after {
  background-color: #424344;
  background-color: var(--text-color);
  border-radius: 50%;
  box-shadow: 7px 0 0 -3px #424344, -7px 0 0 -3px #424344,
    0 7px 0 -3px #424344, 0 -7px 0 -3px #424344,
    5px -5px 0 -3px #424344, -5px -5px 0 -3px #424344,
    -5px 5px 0 -3px #424344, 5px 5px 0 -3px #424344;
  box-shadow: 7px 0 0 -3px var(--text-color), -7px 0 0 -3px var(--text-color),
    0 7px 0 -3px var(--text-color), 0 -7px 0 -3px var(--text-color),
    5px -5px 0 -3px var(--text-color), -5px -5px 0 -3px var(--text-color),
    -5px 5px 0 -3px var(--text-color), 5px 5px 0 -3px var(--text-color);
  height: calc(4px * 2);
  height: var(--spacing-2);
  width: calc(4px * 2);
  width: var(--spacing-2);
  margin-left: calc(4px * 2);
  margin-left: var(--spacing-2);
  top: 2px;
}
.toggle-darkmode:checked + .toggle-label {
  background-color: #292e31;
  background-color: var(--slate-80);
}
.toggle-darkmode:checked + .toggle-label::before,
.toggle-darkmode:checked + .toggle-label::after {
  left: 50%;
}
.toggle-darkmode:checked + .toggle-label::before {
  background-color: #ffffff;
  background-color: var(--bg-color);
  transform: rotate(360deg);
}
.toggle-darkmode:checked + .toggle-label::after {
  background-color: transparent;
  border: 0;
  box-shadow: -5px 3px 0px 0px #025fd7;
  box-shadow: -5px 3px 0px 0px var(--base-color);
  height: calc(4px * 4);
  height: var(--spacing-4);
  width: calc(4px * 4);
  width: var(--spacing-4);
  top: -5px;
  margin-left: calc(calc(4px * 2) + 2px);
  margin-left: calc(var(--spacing-2) + 2px);
  animation: daynight 0.7s;
}
.toggle-darkmode:not(:checked) + .toggle-label::after {
  animation: nightday 0.7s;
}
@keyframes daynight {
  0% {
    background-color: transparent;
    transform: rotate(0deg);
    margin-left: calc(4px * 2);
    margin-left: var(--spacing-2);
    height: calc(4px * 2);
    height: var(--spacing-2);
    width: calc(4px * 2);
    width: var(--spacing-2);
    top: 2px;
    box-shadow: 7px 0 0 -3px #424344, -7px 0 0 -3px #424344,
      0 7px 0 -3px #424344, 0 -7px 0 -3px #424344,
      5px -5px 0 -3px #424344, -5px -5px 0 -3px #424344,
      -5px 5px 0 -3px #424344, 5px 5px 0 -3px #424344;
    box-shadow: 7px 0 0 -3px var(--text-color), -7px 0 0 -3px var(--text-color),
      0 7px 0 -3px var(--text-color), 0 -7px 0 -3px var(--text-color),
      5px -5px 0 -3px var(--text-color), -5px -5px 0 -3px var(--text-color),
      -5px 5px 0 -3px var(--text-color), 5px 5px 0 -3px var(--text-color);
  }
  40% {
    transform: rotate(180deg);
    border-width: 3px;
    background-color: transparent;
    box-shadow: none;
    height: calc(4px * 2);
    height: var(--spacing-2);
    width: calc(4px * 2);
    width: var(--spacing-2);
    top: 2px;
  }
  60% {
    transform: rotate(360deg);
    border-width: 0;
    top: -5px;
    box-shadow: -5px 3px 0px 0px #025fd7;
    box-shadow: -5px 3px 0px 0px var(--doc-base-color);
    height: calc(4px * 4);
    height: var(--spacing-4);
    width: calc(4px * 4);
    width: var(--spacing-4);
  }
  100% {
    transform: rotate(360deg);
    height: calc(4px * 4);
    height: var(--spacing-4);
    width: calc(4px * 4);
    width: var(--spacing-4);
    top: -5px;
  }
}
@keyframes nightday {
  0% {
    height: calc(4px * 4);
    height: var(--spacing-4);
    width: calc(4px * 4);
    width: var(--spacing-4);
    top: -5px;
    transform: rotate(360deg);
    box-shadow: -5px 3px 0px 0px #025fd7;
    box-shadow: -5px 3px 0px 0px var(--doc-base-color);
    background-color: transparent;
    border: 0;
  }
  20% {
    height: calc(4px * 2);
    height: var(--spacing-2);
    width: calc(4px * 2);
    width: var(--spacing-2);
    top: 2px;
    box-shadow: -1px 1px 0px 0px #025fd7;
    box-shadow: -1px 1px 0px 0px var(--doc-base-color);
    background-color: transparent;
    border: 0;
    transform: rotate(360deg);
  }
  30% {
    height: calc(4px * 2);
    height: var(--spacing-2);
    width: calc(4px * 2);
    width: var(--spacing-2);
    top: 2px;
    box-shadow: none;
    background-color: transparent;
    border: 0;
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(360deg);
    margin-left: calc(4px * 2);
    margin-left: var(--spacing-2);
    height: calc(4px * 2);
    height: var(--spacing-2);
    width: calc(4px * 2);
    width: var(--spacing-2);
    top: 2px;
    box-shadow: 7px 0 0 -3px #424344, -7px 0 0 -3px #424344,
      0 7px 0 -3px #424344, 0 -7px 0 -3px #424344,
      5px -5px 0 -3px #424344, -5px -5px 0 -3px #424344,
      -5px 5px 0 -3px #424344, 5px 5px 0 -3px #424344;
    box-shadow: 7px 0 0 -3px var(--text-color), -7px 0 0 -3px var(--text-color),
      0 7px 0 -3px var(--text-color), 0 -7px 0 -3px var(--text-color),
      5px -5px 0 -3px var(--text-color), -5px -5px 0 -3px var(--text-color),
      -5px 5px 0 -3px var(--text-color), 5px 5px 0 -3px var(--text-color);
  }
}
[data-content-disabled="true"] {
  -webkit-mask-image: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0) 80%);
          mask-image: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0) 80%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(var(--bg-color-rgb), 1), rgba(var(--bg-color-rgb), 0) 80%);
          mask-image: linear-gradient(to bottom, rgba(var(--bg-color-rgb), 1), rgba(var(--bg-color-rgb), 0) 80%);
  overflow: hidden;
  pointer-events: none;
  position: fixed;
  width: 100%;
}
.public__upgrade-banner {
  bottom: calc(4px * 12);
  bottom: var(--spacing-12);
  max-width: 1200px;
  max-width: var(--screen-xl);
  position: absolute;
  z-index: 100;
}
.doc__upgrade-banner {
  left: calc(18.75rem + calc(4px * 12));
  left: calc(var(--sidebar-width) + var(--spacing-12));
  right: calc(4px * 12);
  right: var(--spacing-12);
  max-width: calc(100% - 18.75rem - calc(4px * 12) * 2);
  max-width: calc(100% - var(--sidebar-width) - var(--spacing-12) * 2);
}
.hub__upgrade-banner {
  left: calc(4px * 8);
  left: var(--spacing-8);
  right: calc(4px * 8);
  right: var(--spacing-8);
  max-width: calc(100% - calc(4px * 8)*2);
  max-width: calc(100% - var(--spacing-8)*2);
}
.changelog {
  --dot-top: var(--spacing-16);
  --timeline-width: 160px;
  display: flex;
  flex-direction: column;
}
.changelog-menu {
  background-color: #f9fafb;
  background-color: var(--panel-bg-color);
  border-block-end: 1px solid #eeeeee;
  border-block-end: var(--border-default);
  padding-block: calc(4px * 4);
  padding-block: var(--spacing-4);
  z-index: 5;
}
.changelog-menu__container {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: calc(4px * 3) calc(4px * 6);
  gap: var(--spacing-3) var(--spacing-6);
  justify-content: space-between;
}
.changelog-menu__selector {
  align-items: center;
  display: grid;
  grid-gap: 0 calc(4px * 2);
  grid-gap: 0 var(--spacing-2);
  gap: 0 calc(4px * 2);
  gap: 0 var(--spacing-2);
  grid-template-columns: 1fr auto auto;

  h1 {
    display: inline-block;
    font-size: 1.125rem;
    font-weight: 500;
    font-weight: var(--font-weight-medium);
    margin: 0;
  }

  .version {
    font-size: 0.875rem;
    font-size: var(--text-sm);
    grid-column: 1 / -1;
  }
}
.changelog-menu__last-update {
  background-color: transparent;
  border: 1px solid #eeeeee;
  border: var(--border-default);
  border-radius: calc(4px * 10);
  border-radius: var(--border-radius-round);
  flex-shrink: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  padding: 4px calc(4px * 3);
  padding: var(--spacing-1) var(--spacing-3);
}
.changelog-menu__actions {
  align-items: center;
  display: flex;
  font-size: 0.875rem;
  gap: calc(4px * 2);
  gap: var(--spacing-2);
}
.changelog-menu__actions .button {
  padding: calc(4px * 2) calc(4px * 3);
  padding: var(--spacing-2) var(--spacing-3);
  transition: background-color 0.2s ease-out;
}
.changelog-menu__actions .button:hover,
.changelog-event__compare-button:hover {
  --button-color-hover: var(--slate-10);
  border-color: #eeeeee;
  border-color: var(--border-color-default);
}
.changelog-content {
  flex-grow: 1;
  grid-template-rows: min-content auto;

  page-breadcrumbs {
    height: calc(4px * 16);
    height: var(--spacing-16);
  }
}
.changelog-feed {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: auto;
  width: 100%;

  .pagination {
    border-left: 2px solid #eeeeee;
    border-left: 2px solid var(--border-color-default);
    padding-block: calc(4px * 6) calc(4px * 10);
    padding-block: var(--spacing-6) var(--spacing-10);
  }
}
.changelog-feed> :last-child {
  flex-grow: 1;
}
.changelog-section {
  flex-grow: 1;
}
.changelog-section:last-child {
  margin-bottom: 0;
  padding-bottom: calc(4px * 8);
  padding-bottom: var(--spacing-8);
}
.changelog-update {
  display: block;
  font-size: 0.875rem;
}
.changelog-event {
  display: grid;
  grid-template-columns: calc(4px * 40) auto;
  grid-template-columns: var(--spacing-40) auto;
  grid-gap: calc(4px * 2) calc(4px * 30);
  grid-gap: var(--spacing-2) var(--spacing-30);
  gap: calc(4px * 2) calc(4px * 30);
  gap: var(--spacing-2) var(--spacing-30);
}
.changelog-event--single-column {
  grid-template-columns: 1fr;
}
.changelog-event.highlight-container.shared::after {
  top: calc(4px * 10);
  top: var(--spacing-10);
  bottom: 0;
}
.changelog-event.highlight-container {
  scroll-margin-top: calc(4px * 24);
  scroll-margin-top: var(--spacing-24);
}
.changelog-event .dismiss-highlight {
  top: calc(4px * 12);
  top: var(--spacing-12);
}
.changelog-event__date {
  align-items: start;
  border-right: 1px solid #eeeeee;
  border-right: 1px solid var(--border-color-default);
  box-sizing: content-box;
  color: var(--black-80);
  display: flex;
  flex-direction: column;
  gap: calc(4px * 2);
  gap: var(--spacing-2);
  padding-block: calc(4px * 14) calc(4px * 20);
  padding-block: var(--spacing-14) var(--spacing-20);
  padding-right: calc(4px * 10);
  padding-right: var(--spacing-10);
  position: relative;
  width: var(--timeline-width);

  .change-info {
    align-items: start;
    display: flex;
    flex-direction: column;
    gap: calc(4px * 2);
    gap: var(--spacing-2);
  }

  &:has(.back-link) {
    padding-top: calc(4px * 8);
    padding-top: var(--spacing-8);

    &::after {
      top: calc(4px * 16);
      top: var(--spacing-16);
    }
  }

  .change-id {
    font-size: 0.875rem;
    font-size: var(--text-sm);
  }
}
.changelog-event__date::after {
  background-color: #131415;
  background-color: var(--title-color);
  border-radius: 50%;
  content: "";
  display: block;
  height: calc(4px * 2);
  height: var(--spacing-2);
  position: absolute;
  right: calc(calc(4px * -1) - 0.5px);
  right: calc(var(--spacing-1-minus) - 0.5px);
  top: var(--dot-top);
  width: calc(4px * 2);
  width: var(--spacing-2);
}
.changelog-event__date .change-labels {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: calc(4px * 2);
  gap: var(--spacing-2);
}
.changelog-event__date .change-labels .version,
.changelog-event__date .button {
  font-size: 0.875rem;
}
.changelog-event__date .button {
  --button-color-hover: var(--panel-bg-color);
  --button-border-color-hover: var(--border-color-default);
  flex: 0;
  line-height: 1;
  margin-top: calc(4px * 2);
  margin-top: var(--spacing-2);
}
.changelog-event__content-wrapper:hover .collapsed::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 75%);
  background: linear-gradient(180deg, var(--transparent-bg-color) 0%, var(--bg-color) 75%);
}
.changelog-event__content {
  display: flex;
  flex-direction: column;
  gap: calc(4px * 6);
  gap: var(--spacing-6);
  margin-block: calc(4px * 14) calc(4px * 6);
  margin-block: var(--spacing-14) var(--spacing-6);
}
.changelog-event__header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: calc(4px * 6);
  gap: var(--spacing-6);
  line-height: calc(4px * 8);
  line-height: var(--spacing-8);
  row-gap: calc(4px * 2);
  row-gap: var(--spacing-2);

  .change-navigation {
    display: flex;
    flex-wrap: wrap;
    font-size: 0.875rem;
    font-size: var(--text-sm);
    gap: calc(4px * 2) calc(4px * 4);
    gap: var(--spacing-2) var(--spacing-4);
    line-height: 1;

    >* {
      align-items: center;
      display: flex;
      gap: calc(4px * 2);
      gap: var(--spacing-2);
    }

    span {
      color: #aab0b6;
      color: var(--text-color-disabled);
    }

    .next svg {
      transform: rotate(180deg);
    }
  }
}
.changelog-event__title {
  display: flex;
  flex-direction: column;
  gap: calc(4px * 2);
  gap: var(--spacing-2);
}
.changelog-event__title h3 {
  color: var(--text-title);
  display: inherit;
  font-size: 1.25rem;
  font-weight: inherit;
  margin: 0;
}
.changelog-event__tags {
  display: flex;
  flex-wrap: wrap;
  gap: calc(4px * 2);
  gap: var(--spacing-2);
}
.changelog-event__link {
  font-size: 0.875rem;
  margin: calc(4px * 6) auto;
  margin: var(--spacing-6) auto;
}
.changelog-event__link a {
  border-radius: 4px;
  border-radius: var(--border-radius-medium);
  color: #025fd7;
  color: var(--doc-base-color);
  position: relative;
  text-decoration: none !important;
  padding: calc(4px * 2);
  padding: var(--spacing-2);
  transition: background-color 0.2s ease-out;
}
.changelog-event__link a:hover {
  background-color: #f5fbff;
  background-color: var(--doc-base-light-color);
}
.changelog-event__link .active,
.changelog-event__link .disabled {
  color: #131415;
  color: var(--title-color);
  position: relative;
  text-decoration: none !important;
  padding: calc(4px * 2);
  padding: var(--spacing-2);
}
.changelog-event__diff-container .changelog-event__diff:not(:first-child) {
  margin-top: calc(4px * 6);
  margin-top: var(--spacing-6);
}
.changelog-event__diff {
  border: 1px solid #eeeeee;
  border: var(--border-default);
  border-radius: calc(4px * 2);
  border-radius: var(--border-radius-large);
  overflow: hidden;
}
.changelog-event__diff-header {
  align-items: center;
  background-color: #f9fafb;
  background-color: var(--panel-bg-color);
  border-bottom: 1px solid #eeeeee;
  border-bottom: var(--border-default);
  display: flex;
  gap: calc(4px * 2);
  gap: var(--spacing-2);
  padding: calc(4px * 3) calc(4px * 4);
  padding: var(--spacing-3) var(--spacing-4);
}
.changelog-event__diff-header .counter {
  align-items: center;
  display: flex;
  background-color: #eeeeee;
  background-color: var(--bg-color-secondary);
  border-radius: calc(4px * 10);
  border-radius: var(--border-radius-round);
  font-size: 0.75rem;
  justify-content: center;
  max-height: calc(4px * 5);
  max-height: var(--spacing-5);
  min-width: calc(4px * 5);
  min-width: var(--spacing-5);
  padding: calc(4px * 0.5) 4px;
  padding: var(--spacing-05) var(--spacing-1);
}
.changelog-event__diff-header .breaking {
  color: #bf0e08;
  color: var(--text-color-error);
  font-size: 0.75rem;
}
.changelog-event__diff-lines li {
  line-height: 1.75;
  white-space: pre-wrap;
}
.changelog-event__diff>ul {
  display: grid;
  grid-gap: calc(4px * 4);
  grid-gap: var(--spacing-4);
  gap: calc(4px * 4);
  gap: var(--spacing-4);
}
.changelog-event__diff-operations {
  padding: calc(4px * 4);
  padding: var(--spacing-4);
}
.changelog-event__diff-operation {
  font-size: 1.125rem;
  padding: 0 calc(4px * 4);
  padding: 0 var(--spacing-4);
}
.changelog-event__diff-operation:not(:first-of-type) {
  margin-top: calc(4px * 6);
  margin-top: var(--spacing-6);
}
.changelog-event__diff-properties:not(:first-of-type)::before {
  border-top: 1px solid #eeeeee;
  border-top: var(--border-default);
  content: "";
  display: block;
  margin-bottom: calc(4px * 6);
  margin-bottom: var(--spacing-6);
  margin-left: calc(calc(4px * 2) * -1);
  margin-left: calc(var(--spacing-2) * -1);
  width: 100%;
}
.changelog-event__diff-properties .markdown-content p {
  color: #424344;
  color: var(--text-color);
  margin: 0;
  line-height: 2;
}
.changelog-event__diff-operation>code {
  margin-left: calc(calc(4px * 4) * -1);
  margin-left: calc(var(--spacing-4) * -1);
}
.changelog-event__diff-properties {
  border-left: 1px solid #eeeeee;
  border-left: var(--border-default);
  font-size: 0.875rem;
  margin-top: calc(4px * 4);
  margin-top: var(--spacing-4);
  padding: calc(4px * 4) calc(4px * 4) calc(4px * 4) calc(4px * 6);
  padding: var(--spacing-4) var(--spacing-4) var(--spacing-4) var(--spacing-6);
  padding-block: 0;
}
.changelog-event__diff-properties>li:first-child:not(.type) {
  border: 0;
  margin-left: calc(calc(4px * 2) * -1);
  margin-left: calc(var(--spacing-2) * -1);
  padding: 0;
}
.changelog-event__diff-properties>li:not(.type),
.changelog-event__diff-properties ul {
  padding-left: calc(4px * 2);
  padding-left: var(--spacing-2);
}
.changelog-event__diff-properties li:not(.type) {
  border-left: 1px solid #eeeeee;
  border-left: var(--border-default);
  padding-left: calc(4px * 4);
  padding-left: var(--spacing-4);

  .detail-type {
    color: #6a6c6d;
    color: var(--text-color-secondary);
    font-size: 0.875rem;
  }
}
.changelog-event__diff-properties .type {
  color: #424344;
  color: var(--text-color);
  font-size: 1rem;
  margin-left: calc(calc(4px * 2) * -1);
  margin-left: calc(var(--spacing-2) * -1);
  -webkit-text-decoration: capitalize;
          text-decoration: capitalize;
}
.changelog-event__diff-properties .markdown-content {
  align-items: start;
  display: flex;
  gap: calc(4px * 2);
  gap: var(--spacing-2);
}
.changelog-event__diff code.code-inline {
  color: currentColor;
  font-family: Avenir Next, -apple-system, system-ui, "Helvetica Neue",
    "Segoe UI", Oxygen, Ubuntu, Cantarell, "Open Sans", sans-serif;
  font-family: var(--font-family);
  font-size: 0.875rem;
  padding: calc(4px * 0.5) 4px;
  padding: var(--spacing-05) var(--spacing-1);
}
.changelog-event__diff-operation span {
  font-size: 0.75rem;
  margin-left: 4px;
  margin-left: var(--spacing-1);
}
.changelog-event__diff-operation span.added {
  color: #008a64;
  color: var(--text-color-success);
}
.changelog-event__diff-operation span.modified {
  color: #df9136;
  color: var(--text-color-warning);
}
.changelog-event__diff-operation span.removed {
  color: #bf0e08;
  color: var(--text-color-error);
}
.changelog-event__diff-operation>span.type {
  margin-left: 4px;
  margin-left: var(--spacing-1);
  font-size: 0.875rem;
  color: #6a6c6d;
  color: var(--text-color-secondary);
}
.changelog-event__diff-operation .label {
  margin-left: 4px;
  margin-left: var(--spacing-1);
}
.changelog-event__diff-operation ul {
  margin-top: calc(4px * 2);
  margin-top: var(--spacing-2);
}
.changelog-event__diff-operation ul>li:not(:last-of-type) {
  padding-bottom: calc(4px * 2);
  padding-bottom: var(--spacing-2);
}
.changelog-event__diff-operation li {
  line-height: 1.75rem;
}
.changelog-sidebar {
align-self: flex-start;
  flex-basis: 33%;
  top: calc(4px * 10);
  top: var(--spacing-10);
}
@media (min-width: 850px) {
  .changelog-sidebar {
position: sticky;
}

  .changelog-feed .pagination {
    border-left: 1px solid #eeeeee;
    border-left: var(--border-default);
    margin-left: auto;
    width: calc(100% - calc(4px * 10) - var(--timeline-width));
    width: calc(100% - var(--spacing-10) - var(--timeline-width));
  }
}
.changelog-branch {
  border-radius: 4px;
  border-radius: var(--border-radius-medium);
  box-shadow: 0px 5px 24px rgba(19, 20, 21, 0.07);
  padding: calc(4px * 6);
  padding: var(--spacing-6);
}
@media (max-width: 850px) {
  .changelog-event {
    border-left: 2px solid #eeeeee;
    border-left: 2px solid var(--border-color-default);
    display: flex;
    flex-direction: column;
    gap: calc(4px * 6);
    gap: var(--spacing-6);
    padding-block: calc(4px * 6) 0;
    padding-block: var(--spacing-6) 0;
    padding-left: calc(4px * 10);
    padding-left: var(--spacing-10);
  }

  .changelog-event__date,
  .changelog-event__content {
    border: 0;
    padding: 0;
  }

  .changelog-event__content {
    margin-block: 0;
    padding-bottom: calc(4px * 20);
    padding-bottom: var(--spacing-20);
    position: relative;
  }

  .change-navigation {
    bottom: 0;
    justify-content: space-between;
    margin-bottom: calc(4px * 10);
    margin-bottom: var(--spacing-10);
    position: absolute;
    width: 100%;
  }

  .changelog-event__date::after {
    left: calc(calc(4px * -10) - 5px);
    left: calc(var(--spacing-10-minus) - 5px);
    top: 4px;
    top: var(--spacing-1);
  }

  .changelog-event__date {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto 1fr auto;
    padding-top: calc(4px * 12);
    padding-top: var(--spacing-12);
    width: 100%;

    &::after {
      top: calc(4px * 14);
      top: var(--spacing-14);
    }

    .button {
      box-sizing: border-box;
      height: calc(4px * 8);
      height: var(--spacing-8);
      margin: 0;
    }

    &:has(.back-link) {
      row-gap: calc(4px * 8);
      row-gap: var(--spacing-8);
      padding-top: 0;

      &::after {
        top: calc(4px * 14);
        top: var(--spacing-14);
      }

      .back-link {
        grid-column: 1 / -1;
        grid-row: 1 / 1;
        top: calc(4px * -12);
        top: var(--spacing-12-minus);
      }

      .button {
        grid-column: 2 / 2;
        grid-row: 2 / 3;
      }
    }
  }

  .changelog-feed {
flex-direction: column;
}

  .changelog-section {
    order: 1;
  }

  .changelog-sidebar {
    align-self: auto;
    order: 0;
  }
}
.changelog-subscription__modal .label {
  font-size: 0.75rem;
  padding: calc(4px * 0.25) calc(4px * 3);
  padding: var(--spacing-px) var(--spacing-3);
}
.changelog-subscription {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: calc(4px * 3);
  gap: var(--spacing-3);
  width: 100%;
}
.changelog-subscription__description {
  font-size: 0.875rem;
  margin-bottom: calc(4px * 3);
  margin-bottom: var(--spacing-3);
}
.changelog-subscription__form {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.changelog-subscription__input {
  display: flex;
  width: 100%;
}
.changelog-subscription__input input.email {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}
.changelog-subscription__input input.email,
.changelog-subscription__rss {
  width: 100%;
}
input.changelog-subscription__submit {
  border-radius: 0 4px 4px 0;
  border-radius: 0 var(--border-radius-medium) var(--border-radius-medium) 0;
  padding: calc(4px * 2) calc(4px * 6);
  padding: var(--spacing-2) var(--spacing-6);
}
p.changelog-subscription__notification {
  margin: calc(4px * 4) 0;
  margin: var(--spacing-4) 0;
}
[data-controller*="show-more"] {
  position: relative;
}
[data-controller*="show-more"].collapsed {
  overflow: hidden;
}
[data-controller*="show-more"].collapsed::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 75%);
  background: linear-gradient(180deg, var(--transparent-bg-color) 0%, var(--bg-color) 75%);
  bottom: 0;
  content: "";
  height: 80px;
  left: 0;
  position: absolute;
  width: 100%;
}
.expandable-properties-list:not(.active) .collapsed::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--list-bg-color) 75%);
  background: linear-gradient(180deg, var(--transparent-bg-color) 0%, var(--list-bg-color) 75%);
}
[data-controller*="show-more"] .show-more-button {
  background-color: #f9fafb;
  background-color: var(--panel-bg-color);
  border: 1px solid #eeeeee;
  border: var(--border-default);
  border-radius: 100px;
  bottom: calc(4px * 2);
  bottom: var(--spacing-2);
  color: #424344;
  color: var(--text-color);
  cursor: pointer;
  height: auto;
  font-size: 0.875rem;
  left: 50%;
  padding: calc(4px + calc(4px * 0.5)) calc(4px * 3);
  padding: calc(var(--spacing-1) + var(--spacing-05)) var(--spacing-3);
  position: absolute;
  transform: translateX(-50%);
  transition: background-color ease-out 0.1s;
  transition: var(--theme-change-transition);
  z-index: 1;
}
[data-controller*="show-more"] .show-more-button:hover {
  background-color: #eeeeee;
  background-color: var(--bg-color-secondary);
  color: #424344;
  color: var(--text-color);
  border: 1px solid #eeeeee;
  border: var(--border-default);
}
.list {
  border: 1px solid #eeeeee;
  border: var(--border-default);
  border-radius: 4px;
  border-radius: var(--border-radius-medium);
  overflow: hidden;

  .list-head {
    background-color: #f9fafb;
    background-color: var(--panel-bg-color);
    border-bottom: 1px solid #eeeeee;
    border-bottom: var(--border-default);
    font-size: 0.75rem;
    gap: calc(4px * 3);
    gap: var(--spacing-3);
    padding: calc(4px * 2) calc(4px * 4);
    padding: var(--spacing-2) var(--spacing-4);
  }

  .list-item {
    align-items: center;
    gap: calc(4px * 3);
    gap: var(--spacing-3);
    padding: calc(4px * 4);
    padding: var(--spacing-4);
    transition: background-color 150ms ease;
    transition: background-color var(--base-duration) var(--base-timing);
    text-decoration: none;

    .token {
      background-color: #f9fafb;
      background-color: var(--bg-color-light);
      border-radius: calc(4px * 0.5);
      border-radius: var(--border-radius-small);
      padding: 4px calc(4px * 3);
      padding: var(--spacing-1) var(--spacing-3);
      width: -moz-fit-content;
      width: fit-content;
    }

    &:not(:last-of-type) {
      border-bottom: 1px solid #eeeeee;
      border-bottom: var(--border-default);
    }

    &:hover {
      background-color: #f9fafb;
      background-color: var(--panel-bg-color);
    }
  }

  .list-empty {
    color: #f9fafb;
    color: var(--panel-bg-color);
    display: grid;
    grid-gap: calc(4px * 3);
    grid-gap: var(--spacing-3);
    gap: calc(4px * 3);
    gap: var(--spacing-3);
    padding: calc(4px * 8);
    padding: var(--spacing-8);
    place-items: center;

    h2 {
      color: #424344;
      color: var(--text-color);
      margin: 0;
    }
  }
}
.list[data-list-cols="5"] .list-head,
.list[data-list-cols="5"] a.list-item {
  display: grid;
  grid-template-columns: 0.7fr 1fr 1fr 1fr 1fr 4px;
}
.list[data-list-cols="6"] .list-head,
.list[data-list-cols="6"] a.list-item {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr minmax(26px, 60px) 1fr 4px;
}
input[type='text'],
input[type='email'],
input[type='password'],
input[type='url'],
textarea {
  -webkit-appearance: none;
  border-radius: 0.25rem;
  width: 100%;
  font-weight: 500;
  font-weight: var(--font-weight-medium);
}
input {
  height: calc(4px * 8);
  height: var(--spacing-8);
}
input[type='number'],
input[type='datetime-local'] {
  width: 50%;
}
select {
  font-weight: 500;
  font-weight: var(--font-weight-medium);
}
@media (max-width: 500px) {
  input[type='number'],
  input[type='datetime-local'] {
    width: 100%;
  }
}
subscription-details {
  .title {
    color: #131415;
    color: var(--title-color);
    padding-block-end: calc(4px * 3);
    padding-block-end: var(--spacing-3);
    font-weight: 500;
  }

  .current-quotas {
    display: flex;
    flex-direction: column;
    gap: calc(4px * 4);
    gap: var(--spacing-4);
  }

  .current-features {
    margin-block: calc(4px * 6) calc(4px * 6);
    margin-block: var(--spacing-6) var(--spacing-6);

    .features-header {
      color: #131415;
      color: var(--title-color);
      padding-block-end: calc(4px * 3);
      padding-block-end: var(--spacing-3);
      font-weight: 500;
    }

    .features-container {
      -moz-column-count : auto;
           column-count : auto;
      -moz-column-width : 13rem;
           column-width : 13rem;
      -moz-column-gap: calc(4px * 2);
           column-gap: calc(4px * 2);
      -moz-column-gap: var(--spacing-2);
           column-gap: var(--spacing-2);
      padding: 0;
    }

    .feature-content {
      display: flex;
      page-break-inside: avoid;
      -moz-column-break-inside: avoid;
           break-inside: avoid;
      padding-block: 0 4px;
      padding-block: 0 var(--spacing-1);
      font-weight: 500;

      > svg {
        margin-right: 4px;
        margin-right: var(--spacing-1);
      }
    }
  }
}
quota-content {
  .quota-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  
  .quota-icon-label {
    display: flex;
    align-items: center;
    
    svg {
      margin-right: calc(4px * 2);
      margin-right: var(--spacing-2);
    }
  }
  
  .quota-count {
    color: #6a6c6d;
    color: var(--text-color-secondary);
  }
  
  .progress-container {
    width: 100%;
    background-color: #eeeeee;
    background-color: var(--bg-color-secondary);
    border-radius: calc(4px * 10);
    border-radius: var(--border-radius-round);
    height: 4px;
    height: var(--spacing-1);
    margin-top: calc(4px * 2);
    margin-top: var(--spacing-2);
  }
  
  .progress-bar {
    height: 100%;
    background-color: #bdc6cf;
    background-color: var(--slate-40);
    transition: width 0.5s;
    border-radius: calc(4px * 10);
    border-radius: var(--border-radius-round);
  }
}
.upgrade-subscription-modal {
  header {
    text-transform: none;
  }

  .dialog-body {
    font-weight :500;
    text-transform: none;

    button {
      width: -moz-fit-content !important;
      width: fit-content !important;
      align-self: end;
    }
  }
}
button[data-dialog-id-param="upgrade-subscription-modal"] {
  font-weight: 600;
  font-weight: var(--font-weight-semibold);
}
* {
  scrollbar-width: thin;
}
:root {
  --doc-base-box-shadow: 0px 5px 12px rgba(var(--black), 0.1);
  --doc-base-banner-background-color: var(--darker-blue);
  --doc-nav-height: 64px;
  --doc-nav-font-size: 14px;
  --doc-icon-size: 32px;
}
html {
  box-sizing: border-box;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}
*,
*::before,
*::after {
  box-sizing: inherit;
}
html,
body {
  height: 100%;
}
body {
  margin: 0;
}
ul,
ol {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
dl {
  margin: 0;
}
dt {
  font-weight: 600;
  font-weight: var(--font-weight-semibold);
  margin: 0;
}
dd {
  margin: 0;
}
figure {
  margin: 0;
}
img,
picture {
  margin: 0;
  max-width: 100%;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.2;
  line-height: var(--title-line-height);
  margin: 0 0 calc(4px * 3);
  margin: 0 0 var(--spacing-3);
  font-family: Avenir Next, -apple-system, system-ui, "Helvetica Neue",
    "Segoe UI", Oxygen, Ubuntu, Cantarell, "Open Sans", sans-serif;
  font-family: var(--heading-font-family);
}
p {
  margin: 0 0 calc(4px * 3);
  margin: 0 0 var(--spacing-3);
}
a {
  -webkit-text-decoration-skip: auto;
          text-decoration-skip: auto;
}
hr {
  border-left: 0;
  border-right: 0;
  border-top: 0;
  margin: calc(4px * 6) 0;
  margin: var(--spacing-6) 0;
}
b {
  font-weight: 600;
  font-weight: var(--font-weight-semibold);
}
@keyframes loader-1 {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes loader-2 {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(220deg); }
}
@keyframes loader-3 {
  0%   { transform: rotate(-140deg); }
  50%  { transform: rotate(-160deg); }
  100% { transform: rotate(140deg); }
}
@keyframes shimmer {
  100% {
    transform: translateX(100%);
  }
}
@keyframes dot-scale-fade {
  0% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 0;
    transform: scale(2.5);
  }

  100% {
    opacity: 0;
    transform: scale(2.5);
  }
}
@keyframes dash {
  from {
    stroke-dashoffset: 100;
  }
  to {
    stroke-dashoffset: 0;
  }
}
:root {
  --doc-base-color: var(--base-color);
  --doc-base-light-color: var(--lighter-blue);
  --doc-base-dark-color: var(--azure-blue);
  --doc-success-color: var(--medium-green);
  --doc-error-color: var(--red);
  --doc-warning-color: var(--bright-orange);
  --doc-warning-light-color: var(--light-red);
  --doc-nested-background-color: var(--gray-10);

  --transparent-bg-color: rgba(255, 255, 255, 0);

  --scroll-shadow-gradient: rgba(0, 0, 0, 0.2);
  --scroll-shadow-size: 0.75em;

  --base-gap: var(--spacing-8);
  --doc-inline-spacing: var(--spacing-12);
  --doc-block-spacing: var(--spacing-16);

  @media (max-width: 850px) {
    --doc-inline-spacing: var(--spacing-6);
  }
}
.dark-theme {
  --doc-link-highlight: var(--white);
  --doc-code-background-color: var(--gray-90);
  --doc-nested-background-color: var(--gray-90);

  --transparent-bg-color: rgba(17, 28, 40, 0);
  --scroll-shadow-gradient: rgba(255, 255, 255, 0.3);
}
.doc-compare {
  page-breadcrumbs {
    height: calc(4px * 16);
    height: var(--spacing-16);
  }
}
.doc-compare__bar {
  background-color: #f9fafb;
  background-color: var(--panel-bg-color);
  border-block-end: 1px solid #eeeeee;
  border-block-end: var(--border-default);
  display: flex;
  justify-content: center;
  padding: calc(4px * 4) calc(4px * 8);
  padding: var(--spacing-4) var(--spacing-8);
}
.doc-compare__form-container {
  container: compare-fields / inline-size;
  display: grid;
  width: 1200px;
  width: var(--screen-xl);
}
.doc-compare__narrow {
  --form-width: 752px;
  --wrapper-width: var(--form-width);
  justify-content: center;
}
.doc-compare__form-title {
  align-items: center;
  display: flex;
  font-size: 1.125rem;
  font-weight: 500;
  font-weight: var(--font-weight-medium);
  grid-column: 1;
  margin: 0;
}
.doc-compare__form-fields {
  align-items: center;
  display: flex;
  gap: calc(4px * 4);
  gap: var(--spacing-4);
  justify-content: space-around;
}
.doc-compare__form-item {
  display: flex;
  flex-direction: row;
  height: calc(4px * 8);
  height: var(--spacing-8);
  justify-content: space-around;
  width: 100%;
}
.doc-compare__form-item select {
  background-color: #ffffff;
  background-color: var(--bg-color);
  border-radius: calc(4px * 10) 0 0 calc(4px * 10);
  border-radius: var(--border-radius-round) 0 0 var(--border-radius-round);
  color: #424344;
  color: var(--text-color);
  cursor: pointer;
  font-family: Avenir Next, -apple-system, system-ui, "Helvetica Neue",
    "Segoe UI", Oxygen, Ubuntu, Cantarell, "Open Sans", sans-serif;
  font-family: var(--font-family);
  font-weight: 500;
  font-weight: var(--font-weight-medium);
  font-size: 14px;
  margin: 0;
  text-overflow: ellipsis;
  transition: background-color ease 150ms;
  transition: background-color var(--base-timing) var(--base-duration);
}
.doc-compare__form-item select:hover {
  --bg-color: var(--slate-10);
}
.doc-compare__form-item select:first-child {
  background: url(https://bump.sh/packs/static/select-caret-ec7fc303a92c05d33b42.svg) right calc(4px * 3) center no-repeat,
    url(https://bump.sh/packs/static/select-caret-ec7fc303a92c05d33b42.svg) right calc(4px * 3) center no-repeat,
    #ffffff;
  background: url(https://bump.sh/packs/static/select-caret-ec7fc303a92c05d33b42.svg) right var(--spacing-3) center no-repeat,
    url(https://bump.sh/packs/static/select-caret-ec7fc303a92c05d33b42.svg) right var(--spacing-3) center no-repeat,
    var(--bg-color);
  min-width: calc(4px * 35);
  min-width: var(--spacing-35);
  padding: 4px calc(4px * 4);
  padding: var(--spacing-1) var(--spacing-4);
  width: auto;
}
.doc-compare__form-item select + select {
  background: url(https://bump.sh/packs/static/select-caret-ec7fc303a92c05d33b42.svg) right calc(4px * 3) center no-repeat,
    #ffffff;
  background: url(https://bump.sh/packs/static/select-caret-ec7fc303a92c05d33b42.svg) right var(--spacing-3) center no-repeat,
    var(--bg-color);
  border-left: 0;
  border-radius: 0 4px 4px 0;
  border-radius: 0 var(--border-radius-medium) var(--border-radius-medium) 0;
  padding: 4px calc(4px * 8) 4px calc(4px * 4);
  padding: var(--spacing-1) var(--spacing-8) var(--spacing-1) var(--spacing-4);
}
.doc-compare__form-item select:invalid {
  color: #aab0b6;
  color: var(--gray-40);
}
.doc-compare__form-icon {
  color: #8792a2;
  color: var(--title-color-secondary);
  flex-shrink: 0;
  height: 9px;
  width: 10px;
}
.doc-compare__form-item:last-child select {
  border-radius: 4px 0 0 4px;
  border-radius: var(--border-radius-medium) 0 0 var(--border-radius-medium);
}
.doc-compare__form-item:last-child select + select {
  background: url(https://bump.sh/packs/static/select-caret-ec7fc303a92c05d33b42.svg) right calc(4px * 3) center no-repeat,
    #ffffff;
  background: url(https://bump.sh/packs/static/select-caret-ec7fc303a92c05d33b42.svg) right var(--spacing-3) center no-repeat,
    var(--bg-color);
  border-left: 0;
  border-radius: 0 calc(4px * 10) calc(4px * 10) 0;
  border-radius: 0 var(--border-radius-round) var(--border-radius-round) 0;
  padding: 4px calc(4px * 8) 4px calc(4px * 4);
  padding: var(--spacing-1) var(--spacing-8) var(--spacing-1) var(--spacing-4);
}
.doc-compare__form-buttons {
  align-items: center;
  display: flex;
  grid-column: 3;
  justify-content: end;
}
.doc-compare__change-component {
  padding-block: calc(4px * 6);
  padding-block: var(--spacing-6);

  .back-link {
    align-self: start;
    grid-column: 1;
  }
}
.doc-compare__change-component .doc-compare__narrow {
  grid-row-gap: calc(4px * 8);
  grid-row-gap: var(--spacing-8);
}
.doc-compare__summary {
  align-items: center;
  border: 1px solid #eeeeee;
  border: var(--border-default);
  border-radius: calc(4px * 2);
  border-radius: var(--border-radius-large);
  display: flex;
  flex-wrap: wrap;
  gap: calc(4px * 2);
  gap: var(--spacing-2);
  justify-content: center;
  padding: calc(4px * 3);
  padding: var(--spacing-3);
  position: relative;
}
.doc-compare__summary::after {
  background-color: #eeeeee;
  background-color: var(--border-color-default);
  content: "";
  display: block;
  height: calc(4px * 6);
  height: var(--spacing-6);
  position: absolute;
  top: calc(100% + calc(4px * 0.25));
  top: calc(100% + var(--spacing-px));
  width: 1px;
}
.doc-compare__summary .label {
  margin: 0;
}
.doc-compare__change-list {
  background-color: #ffffff;
  background-color: var(--bg-color);
  border-radius: calc(4px * 2);
  border-radius: var(--border-radius-large);
  border: 1px solid #eeeeee;
  border: var(--border-default);
  padding: calc(4px * 4);
  padding: var(--spacing-4);
}
.doc-compare__change-list .changelog-event__diff {
  margin-top: 0;
}
@media (max-width: 1050px) {
  .doc-compare__narrow {
    gap: calc(4px * 6);
    gap: var(--spacing-6);
    grid-template-columns: 1fr;
  }

  .doc-compare__narrow > * {
    justify-content: start;
    grid-column: revert;
  }

  .doc-compare__narrow > .doc-compare__summary {
    justify-content: center;
  }
}
@container compare-fields (width < 784px) {
  .doc-compare__form-fields {
    flex-direction: column;
  }

  .doc-compare__form-icon {
    rotate: 90deg;
  }

  .doc-compare__form-item select:first-child {
    border-radius: calc(4px * 10) 0 0 calc(4px * 10);
    border-radius: var(--border-radius-round) 0 0 var(--border-radius-round);
  }

  .doc-compare__form-item select + select {
    border-radius: 0 calc(4px * 10) calc(4px * 10) 0;
    border-radius: 0 var(--border-radius-round) var(--border-radius-round) 0;
  }
}
@container compare-fields (width < 350px) {
  .doc-compare__form-item {
    flex-direction: column;
    gap: calc(4px * 2);
    gap: var(--spacing-2);
  }

  .doc-compare__form-item select:first-child,
  .doc-compare__form-item select + select,
  .doc-compare__form-item:last-child select + select {
    border: 1px solid #eeeeee;
    border: var(--border-default);
    border-radius: calc(4px * 10);
    border-radius: var(--border-radius-round);
  }
}
.doc-container {
  display: flex;
  font-size: 0.9em;
  position: relative;
  z-index: 0;
  background-color: #ffffff;
  background-color: var(--bg-color);
  transition: background-color background-color ease-out 0.1s;
  transition: background-color var(--theme-change-transition);
}
@media (max-width: 850px) {
  .doc-container {
    flex-direction: column;
    z-index: auto;
    z-index: initial;

    &::before {
      content: "";
      transition: opacity ease-in 0.4s;
      opacity: 0;
    }
  }
}
.doc-inner {
  display: flex;
  flex-direction: column;
  gap: calc(4px * 6);
  gap: var(--spacing-6);
}
.doc-content {
  -webkit-overflow-scrolling: touch;
  flex-grow: 1;
  scroll-padding-top: calc(4rem - 2px);

  hr {
    margin: 0;
  }

  h1 {
    word-wrap: anywhere;
  }
}
@media (max-width: 850px) {
  .doc-content {
    height: calc(100vh - 64px);
    height: calc(100vh - var(--doc-nav-height));
    margin-top: 0;
    position: relative;
    flex: 1;
  }
}
.doc-loading-state {
  h1 {
    font-size: 1.5em;
    font-weight: 500;
    font-weight: var(--font-weight-medium);
    text-align: center;
  }

  .loader {
    animation: loader-1 4.8s linear infinite;
    height: 48px;
    width: 48px;

    span {
      animation: loader-2 2.2s linear infinite;
      bottom: 0;
      right: 0;
      clip: rect(0, 48px, 48px, 24px);
      display: block;
      height: 48px;
      margin: auto;
      position: absolute;
      top: 0;
      left: 0;
      width: 48px;

      &::after {
        animation: loader-3 2.2s cubic-bezier(0.77, 0, 0.175, 1) infinite;
        bottom: 0;
        right: 0;
        border: 4px solid #3262ab;
        border: 4px solid var(--doc-base-dark-color);
        border-radius: 50%;
        clip: rect(0, 48px, 48px, 24px);
        content: "";
        height: 48px;
        margin: auto;
        position: absolute;
        top: 0;
        left: 0;
        width: 48px;
      }
    }
  }

  .doc-navigation {
    .skeleton-container {
      flex-grow: 1;
      padding: 0 calc(4px * 6);
      padding: 0 var(--spacing-6);

      .skeleton-line {
        &:nth-child(odd) {
          margin-bottom: calc(4px * 6);
          margin-bottom: var(--spacing-6);
          margin-top: calc(4px * 8);
          margin-top: var(--spacing-8);
          width: calc(4px * 16);
          width: var(--spacing-16);
        }
      }
    }
  }

  .doc-section {
    padding: calc(4px * 16) calc(4px * 12);
    padding: var(--spacing-16) var(--spacing-12);


    .doc-section-title {
      .skeleton-line {
        width: calc(4px * 40);
        width: var(--spacing-40);
      }
    }

    .doc-section-copy {
      .skeleton-line {
        &:last-child {
          width: calc(4px * 20);
          width: var(--spacing-20);
        }
      }
    }

    portal-example header,
    portal-example .example-body {
      align-items: center;
      display: flex;

      .skeleton-line {
        &::after {
          animation: none;
        }
      }
    }

    portal-example header {
      min-height: 41px;

      .skeleton-line {
        background-color: #025fd7;
        background-color: var(--doc-base-color);
        width: calc(4px * 20);
        width: var(--spacing-20);
      }
    }

    portal-example .example-body {
      min-height: 45px;

      .skeleton-line {
        background-color: rgba(74, 74, 74, 0.6);
        width: calc(4px * 40);
        width: var(--spacing-40);
      }
    }
  }

  .loader-container {
    display: flex;
    flex-direction: column;
    place-items: center;
    padding: calc(4px * 12) calc(4px * 6);
    padding: var(--spacing-12) var(--spacing-6);

    .loader-text {
      margin-top: calc(4px * 10);
      margin-top: var(--spacing-10);
    }
  }

  &.rendering-error {
    h1 {
      color: #bf0e08;
      color: var(--doc-error-color);
    }

    .loader {
      visibility: hidden;
    }

    .skeleton-line {
      &::after {
        animation: none;
      }
    }
  }
}
@media (min-width: 500px) {
  .doc-loading-state {
    .loader-container {
      padding: calc(4px * 16) calc(4px * 8);
      padding: var(--spacing-16) var(--spacing-8);
    }
  }
}
@media (min-width: 850px) {
  .doc-loading-state {
    .loader-container {
      padding: calc(4px * 16);
      padding: var(--spacing-16);
    }
  }
}
.doc-section--column {
  .skeleton-block {
    border: 1px solid #eeeeee;
    border: var(--border-default);
    border-radius: 4px;
    border-radius: var(--border-radius-medium);
  }

  .skeleton-row {
    display: flex;
    flex-direction: column;
    gap: calc(4px * 4);
    gap: var(--spacing-4);
    padding: calc(4px * 3);
    padding: var(--spacing-3);
  }

  .skeleton-row + .skeleton-row {
    border-top: 1px solid #eeeeee;
    border-top: var(--border-default)
  }

  .doc-section-examples {
    display: flex;
    flex-direction: column;
    gap: calc(4px * 6);
    gap: var(--spacing-6);
  }
}
portal-example header .skeleton-line {
  --example-bg-color: var(--panel-bg-color);
  background-color: #f9fafb;
  background-color: var(--example-bg-color);
}
portal-example[data-example-theme="custom"] header .skeleton-line {
  background-color: #025fd7;
  background-color: var(--doc-base-color);
}
portal-example[data-example-theme="custom"] .example-body .skeleton-line {
  background-color: rgba(74, 74, 74, 0.6);
}
mark {
  background: #3262ab;
  background: var(--doc-base-dark-color);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.markdown-content a:not(.button):not(.anchor-link) {
  color: #025fd7;
  color: var(--doc-base-color);

  &:hover,
  &:focus {
    text-decoration: underline;
  }
}
.markdown-content p {
  line-height: 2;
}
.markdown-content p:last-child {
  margin-block-end: 0;
}
:root {
  --sidebar-width: 18.75rem;
  --logo-width: 200px;
  --logo-height: var(--spacing-10);
}
doc-navigation {
  display: contents;

  .navigation__resources > li {
    margin-inline: calc(4px * -3);
    margin-inline: var(--spacing-3-minus);
  }

  portal-resource-title {
    padding-block-end: calc(4px * 10);
    padding-block-end: var(--spacing-10);
  }

  @media (min-width: 850.02px) {
    display: block;
  }
}
/* Desktop layout */
.nav-drawer {
  align-items: start;
  border-inline-end: 1px solid #eeeeee;
  border-inline-end: var(--border-default);
  flex-direction: column;
  grid-column: 1 / -1;
  height: calc(100dvh - 0px);
  height: calc(100dvh - var(--body-top));
  justify-content: start;
  overflow-y: scroll;
  position: sticky;
  top: 0px;
  top: var(--body-top);
  z-index: 2;
  width: 18.75rem;
  width: var(--sidebar-width, 18.75rem);
  padding: calc(calc(4px * 4) + calc(4px * 0.5)) calc(4px * 7) calc(4px * 7);
  padding: calc(var(--spacing-4) + var(--spacing-05)) var(--spacing-7) var(--spacing-7);
}
.drawer-sidenav {
  flex-direction: column;
  justify-content: start;
  padding-inline: 0;
  width: 100%;
  flex: 1;
  display: flex;

  .dropdown.branches {
    margin-block-end: calc(4px * 8);
    margin-block-end: var(--base-gap);
  }
}
.drawer-sidenav footer {
  font-size: 0.875rem;
  font-size: var(--text-sm);
  margin-block-start: auto;
  opacity: 1;
  transition: opacity 0.2s ease-in-out;

  &:hover {
    opacity: 0.8;
  }
}
.drawer-sidenav footer a {
  align-items: center;
  border: 1px solid #eeeeee;
  border: var(--border-default);
  border-radius: 4px;
  border-radius: var(--border-radius-medium);
  color: #424344;
  color: var(--text-color);
  display: inline-flex;
  margin-block-start: auto;
  padding: calc(4px * 3);
  padding: var(--spacing-3);
  width: 100%;
}
.drawer-sidenav footer svg {
  height: calc(4px * 4);
  height: var(--spacing-4);
  margin-block-end: calc(4px * 0.5);
  margin-block-end: var(--spacing-05);
  margin-inline-end: calc(4px * 2);
  margin-inline-end: var(--spacing-2);
  width: calc(4px * 4);
  width: var(--spacing-4);
}
.drawer-sidenav h2 {
  font-size: 0.75rem;
  font-size: var(--text-xs);
  font-weight: 500;
  font-weight: var(--font-weight-medium);
}
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.main-header {
  position: sticky;
  top: 0px;
  top: var(--body-top);
  z-index: 10;
  background: #ffffff;
  background: var(--bg-color);
}
/* Hide mobile elements on desktop */
.drawer-header {
  display: none;
}
/* Mobile layout */
@media (max-width: 850px) {
  .main-header {
    display: none;
  }

  .nav-drawer {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    background: #ffffff;
    background: var(--bg-color);
    box-shadow: 2px 0 16px rgba(0, 0, 0, 0.15);
    /* Some customers have a high nav z-index (999 for MongoDB) */
    z-index: 1000;
    flex-direction: column;
    transition: transform 0.3s ease;
    transform: translateX(-100%);
    padding-inline: calc(4px * 6);
    padding-inline: var(--spacing-6);
    width: 18.75rem;
    width: var(--sidebar-width, 18.75rem);

    .doc-top-nav {
      border-block-end: 1px solid #eeeeee;
      border-block-end: var(--border-default);
      padding-block-end: calc(4px * 4);
      padding-block-end: var(--spacing-4);
      margin-block-end: calc(4px * 5);
      margin-block-end: var(--spacing-5);
    }
  }

  .nav-drawer h2 {
    font-size: 0.75rem;
    font-size: var(--text-xs);
    font-weight: 500;
    font-weight: var(--font-weight-medium);
  }

  .nav-drawer.open {
    display: flex;
    transform: translateX(0);
  }

  .drawer-header {
    display: flex;
    background: #ffffff;
    background: var(--bg-color);
  }

  .drawer-sidenav {
    portal-resource-title {
      display: none;
    }
  }
}
.operation-verb {
  border-radius: calc(4px * 0.5);
  border-radius: var(--border-radius-small);
  border-style: solid;
  border-width: 1px;
  font-size: 0.625rem;
  font-weight: 600;
  font-weight: var(--font-weight-semibold);
  padding: 4px 8px;
  text-transform: uppercase;
  white-space: nowrap;

  &.delete {
    background: #fdf2f1;
    background: var(--light-red);
    border-color: #bf0e0810;
    color: #bf0e08;
    color: var(--red);
    padding: calc(4px * 0.5) calc(4px * 2);
    padding: var(--spacing-05) var(--spacing-2);
  }

  &.get,
  &.head {
    background: #f5fbff;
    background: var(--lighter-blue);
    border-color: #025fd710;
    color: #025fd7;
    color: var(--blue);
  }

  &.post {
    background: #f4faf8;
    background: var(--light-green);
    border-color: #008a6410;
    color: #008a64;
    color: var(--green-70);
  }

  &.put,
  &.patch,
  &.pub {
    background: #fef4e8;
    background: var(--light-orange);
    border-color: #df913610;
    color: #df9136;
    color: var(--orange);
  }

  &.sub {
    background: #f4f0f6;
    background: var(--light-purple);
    border-color: #80008010;
    color: #800080;
    color: var(--purple);
  }
}
.anchor-link .operation-verb {
  font-size: 14px;
}
.doc-section {
  --grid-ratio: 1fr;
  border-top: 1px solid #eeeeee;
  border-top: var(--border-default);
  display: flex;
  flex-direction: column;
  gap: calc(4px * 16) calc(4px * 8);
  gap: var(--doc-block-spacing) var(--base-gap);
  padding: calc(4px * 16) calc(4px * 12);
  padding: var(--doc-block-spacing) var(--doc-inline-spacing);
  position: relative;
}
.no-single-page-xp .doc-content {
  .doc-section {
    border: 0;

    &:not([aria-current="true"]) {
      gap: 0;
      padding-block: 0;
    }
  }

  turbo-frame {
    display: none;
  }
}
.doc-section--column {
  display: flex;
  flex-direction: column;
  gap: calc(4px * 8) calc(4px * 12);
  gap: var(--base-gap) var(--doc-inline-spacing);
}
.doc-section--grid {
  display: grid;
  grid-gap: calc(4px * 8) calc(4px * 12);
  grid-gap: var(--base-gap) var(--doc-inline-spacing);
  gap: calc(4px * 8) calc(4px * 12);
  gap: var(--base-gap) var(--doc-inline-spacing);
  grid-template-columns: var(--grid-ratio);
  position: relative;

  > :last-child {
    margin-bottom: 0;
  }
}
[data-doc-navigation-target="entry"].doc-topic {
  &:not(turbo-frame),
  &:is(turbo-frame:not(:empty)) {
    scroll-margin-top: calc(0px + calc(4px * 16));
    scroll-margin-top: calc(var(--body-top, 0px) + var(--doc-block-spacing));
  }
}
[data-doc-navigation-target="entry"] {
  &:not(turbo-frame),
  &:is(turbo-frame:not(:empty)) {
    scroll-margin-top: calc(0px + calc(4px * 16) * 2);
    scroll-margin-top: calc(var(--body-top, 0px) + var(--doc-block-spacing) * 2);
  }
}
/* Initial margin block for the first load page before the JS is loaded */
.no-single-page-xp [data-doc-navigation-target="entry"][aria-current="true"]:not(.doc-topic) {
  &:not(turbo-frame),
  &:is(turbo-frame:not(:empty)) {
    margin-block: calc(4px * 16);
    margin-block: var(--doc-block-spacing);
  }
}
#doc-introduction {
  border: 0;
  z-index: 1;

  &:not(turbo-frame),
  &:is(turbo-frame[complete]) {
    display: block;
    /* Introduction section (top level of the docs) needs an extra top
       scroll margin when there's an embed top body */
    scroll-margin-top: calc(0px + calc(4px * 16) * 2);
    scroll-margin-top: calc(var(--embed-body-top, 0px) + var(--doc-block-spacing) * 2);
  }

  h1 {
    margin-bottom: calc(4px * 12);
    margin-bottom: var(--spacing-12);
  }

  .doc-section-copy {
    display: block;
    min-height: 90px;
  }

  .auto-definition {
    line-height: 2;
  }

  .doc-section-examples {
    float: right;
    margin-inline-start: calc(4px * 8);
    margin-inline-start: var(--spacing-8);
    max-width: 525px;
    order: 0;
    position: relative;
    top: 0;
    width: clamp(250px, 45%, 525px);
    z-index: 1;
  }

  + .doc-section {
    clear: both;
  }

  @media (max-width: 500px) {
    display: flex;
    flex-direction: column;

    .doc-section-copy {
      min-height: auto;
      order: 0;
    }

    .doc-section-examples {
      margin: 0 0 calc(4px * 8);
      margin: 0 0 var(--base-gap);
      order: 1;
      width: 100%;
    }
  }
}
body:not(.no-single-page-xp) .doc-content #doc-introduction {
  padding-bottom: calc(4px * 16);
  padding-bottom: var(--doc-block-spacing);
}
#doc-servers table {
  margin-top: 0;
}
/* Ideally we could target only :-moz-only-whitespace divs but the
existing :empty CSS selector doesn't select nodes with a child
with whitespace only text...
We could replace this with :empty selector only but with CSS 4
cf https://developer.mozilla.org/fr/docs/Web/CSS/:-moz-only-whitespace */
turbo-frame.doc-section:not([disabled]):not([complete]) {
  min-height: 50vh;
}
turbo-frame.operation:not([disabled]):not([complete]) {
  min-height: 100vh;
}
/* Lazy turbo frame offset à-la-rootMargin cf
   https://github.com/hotwired/turbo/issues/322

   WARNING: make sure to always make bottom and top margin offset each
   other (sum of both should be zero)
*/
turbo-frame[loading='lazy']:empty {
  margin-top: calc((0px + calc(4px * 16)) * -2);
  margin-top: calc((var(--body-top, 0px) + var(--doc-block-spacing)) * -2);
  margin-bottom: calc((0px + calc(4px * 16)) * 2);
  margin-bottom: calc((var(--body-top, 0px) + var(--doc-block-spacing)) * 2);
}
turbo-frame.missing-frame {
  border: 1px solid #eeeeee;
  border: var(--border-default);
  border-radius: 4px;
  border-radius: var(--border-radius-medium);
  color: #df9136;
  color: var(--text-color-warning);
  grid-template-columns: 1fr;
  padding: calc(4px * 3) calc(4px * 4);
  padding: var(--spacing-3) var(--spacing-4);
}
.doc-section-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(4px * 3);
  gap: var(--spacing-3);
  margin: 0;
  position: relative;
  color: #131415;
  color: var(--title-color);
  font-size: 2em;
  font-weight: 500;
  font-weight: var(--font-weight-medium);
}
.doc-section-examples {
  overflow: scroll;
  width: 100%;
}
.doc-section-examples-content {
  overflow: auto;
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;

  /* IE 10+ */
  &::-webkit-scrollbar {
    display: none;
  }

  width: 100%;
}
@media (min-width: 850px) {
  .doc-section {
    --grid-ratio: minmax(50%, 2fr) minmax(250px, 525px);
  }

  .doc-operation-summary {
    grid-column: 2 / -1;
    grid-row: 1 / span 2;
  }

  .doc-section-copy {
    grid-column: 1;
  }

  #doc-introduction .doc-section-title {
    grid-column: span 2;
  }

  .doc-section:last-child > .doc-section-content:last-child {
    min-height: calc(100vh - 64px - (calc(4px * 16) * 2));
    min-height: calc(100vh - var(--doc-nav-height) - (var(--doc-block-spacing) * 2));
  }

  .doc-section-examples {
    overflow: hidden;
    position: sticky;
    top: calc(0px + 64px + calc(4px * 8));
    top: calc(var(--body-top) + var(--doc-nav-height) + var(--base-gap));
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
    padding-bottom: calc(4px * 5);
    padding-bottom: var(--spacing-5);

    &.sticky-scrollable {
      max-height: calc(100vh - (calc(4px * 8) * 4));
      max-height: calc(100vh - (var(--base-gap) * 4));

      &:after {
        content: "";
        position: absolute;
        height: calc(4px * 8);
        height: var(--spacing-8);
        background-image: linear-gradient(to bottom,
            rgba(255, 255, 255, 0) 10%,
            #ffffff);
        background-image: linear-gradient(to bottom,
            var(--transparent-bg-color) 10%,
            var(--bg-color));
        width: 100%;
        bottom: calc(4px * 4);
        bottom: var(--spacing-4);
        z-index: 100;
      }
    }

    .doc-section-examples-content {
      height: 100%;
      overflow: auto;

      > .doc-example {
        flex-shrink: 0;
      }
    }
  }
}
.public_previews {
  .intercom-launcher {
    display: none;
  }
}
.call-to-action-container {
  bottom: 0;
  padding: calc(4px * 12) calc(4px * 8) calc(4px * 12)
    calc(4px * 12);
  padding: var(--spacing-12) var(--spacing-8) var(--spacing-12)
    var(--spacing-12);
  position: sticky;
  width: 100%;
  z-index: 10;

  .call-to-action {
    align-items: center;
    background-color: #222c3a;
    background-color: var(--doc-base-banner-background-color);
    border-radius: 4px;
    border-radius: var(--border-radius-medium);
    box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1);
    display: flex;
    height: calc(4px * 20);
    height: var(--spacing-20);
    padding: calc(4px * 6);
    padding: var(--spacing-6);

    &::after {
      content: "";
      -webkit-backdrop-filter: blur(4px);
              backdrop-filter: blur(4px);
      background-color: hsla(0, 0%, 100%, 0.4);
      height: 100%;
      left: 0;
      position: absolute;
      top: 48px;
      width: 100%;
      z-index: -1;
    }

    .live-dot {
      align-items: center;
      display: flex;
      height: 8px;
      justify-content: center;
      margin-right: calc(4px * 6);
      margin-right: var(--spacing-6);
      position: relative;
      width: 8px;

      .dot,
      .pulse {
        position: absolute;
        height: 8px;
        width: 8px;
        border-radius: 18px;
        background-color: #ffffff;
        background-color: var(--white);
      }

      .pulse {
        animation: dot-scale-fade 2s infinite;
      }

      .pulse.two {
        animation-delay: 0.25s;
      }
    }

    .call-to-action-text {
      display: flex;
      flex-direction: column;
      margin-right: calc(4px * 8);
      margin-right: var(--spacing-8);

      .title-container {
        align-items: center;
        display: flex;

        .title {
          color: #ffffff;
          color: var(--white);
          font-size: 1.125rem;
          font-weight: 600;
          font-weight: var(--font-weight-semibold);
          margin-bottom: 0;
        }

        .expiration {
          background-color: rgba(255, 255, 255, 0.1);
          border-radius: calc(4px * 3);
          border-radius: var(--spacing-3);
          color: #ffffff;
          color: var(--white);
          font-size: 0.75rem;
          margin-bottom: calc(4px * 0.5);
          margin-bottom: var(--spacing-05);
          margin-left: calc(4px * 3);
          margin-left: var(--spacing-3);
          padding: calc(4px * 0.5) calc(4px * 3);
          padding: var(--spacing-05) var(--spacing-3);
        }
      }

      .description {
        color: #ffffff;
        color: var(--white);
        margin: 4px 0 0 0;
        margin: var(--spacing-1) 0 0 0;
      }
    }

    .call-to-action-ctas {
      margin-left: auto;
      white-space: nowrap;

      .button {
        background-color: #ffffff;
        background-color: var(--white);
        color: #3262ab;
        color: var(--azure-blue);
        font-weight: 600;
      }

      .contact {
        color: #ffffff;
        color: var(--white);
        margin-right: calc(4px * 8);
        margin-right: var(--spacing-8);
      }
    }
  }
}
@media (max-width: 500px) {
  .call-to-action-container {
    bottom: calc(4px * 16);
    bottom: var(--spacing-16);

    .call-to-action {
      flex-direction: column;
      height: auto;

      .live-dot {
        display: none;
      }
    }

    .call-to-action-text {
      margin-bottom: calc(4px * 4);
      margin-bottom: var(--spacing-4);
    }

    .call-to-action-ctas {
      width: 100%;

      .button-white {
        width: 100%;
      }
    }
  }
}
@media (max-width: 1220px) {
  .call-to-action-container {
    padding: calc(4px * 8);
    padding: var(--spacing-8);

    .call-to-action {
      padding: calc(4px * 4);
      padding: var(--spacing-4);

      .live-dot {
        margin-right: calc(4px * 4);
        margin-right: var(--spacing-4);
      }

      .call-to-action-text {
        margin-right: 0;

        .expiration {
          display: none;
        }

        .description {
          display: none;
        }
      }

      .call-to-action-ctas {
        .contact {
          display: none;
        }
      }
    }
  }
}
select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: transparent;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 8px 10px;
  border: 1px solid #eeeeee;
  border: var(--border-default);
  border-radius: 4px;
  border-radius: var(--border-radius-medium);
  box-shadow: inset 0 1px 2px rgba(#aab0b6, 0.06);
  box-shadow: var(--input-box-shadow);
  box-sizing: border-box;
  color: #131415;
  color: var(--title-color);
  font-family: Avenir Next, -apple-system, system-ui, "Helvetica Neue",
    "Segoe UI", Oxygen, Ubuntu, Cantarell, "Open Sans", sans-serif;
  font-family: var(--font-family);
  font-size: 0.875rem;
  height: calc(4px * 8);
  height: var(--spacing-8);
  margin-bottom: calc(4px * 3);
  margin-bottom: var(--spacing-3);
  padding-inline: calc(4px * 3) calc(4px * 6);
  padding-inline: var(--spacing-3) var(--spacing-6);
  transition: border-color 150ms ease;
  transition: border-color var(--base-duration) ease;
  width: 100%;
}
.input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: #ffffff;
  background-color: var(--bg-color);
  border: 1px solid #eeeeee;
  border: var(--border-default);
  border-radius: 4px;
  border-radius: var(--border-radius-medium);
  box-shadow: inset 0 1px 2px rgba(#aab0b6, 0.06);
  box-shadow: var(--input-box-shadow);
  box-sizing: border-box;
  color: #424344;
  color: var(--text-color);
  max-width: 720px;
  max-width: var(--input-max-width);
  padding: calc(4px * 2);
  padding: var(--spacing-2);
  transition: border-color 150ms ease;
  transition: border-color var(--base-duration) var(--base-timing);
  width: 100%;
}
.input:hover {
  border-color: #4c555a;
  border-color: var(--input-border-color-hover);
}
.input:focus {
  border-color: #aab0b6;
  border-color: var(--input-border-color-focus);
  box-shadow: var(--input-box-shadow-focus);
  outline: none;
}
.input.disabled {
  background-color: #f9fafb;
  background-color: var(--input-bg-color-disabled);
  cursor: not-allowed;
}
.input.disabled:hover {
  border: 1px solid #eeeeee;
  border: var(--border-default);
}
.input:placeholder {
  color: #6a6c6d;
  color: var(--text-color-secondary);
}
label {
  font-size: 14px;
}
.input-group {
  display: flex;
  flex-direction: column;
  row-gap: 4px;
  row-gap: var(--spacing-1);
}
input {
  font-size: 0.875rem;
  height: calc(4px * 8);
  height: var(--spacing-8);
  padding-inline: calc(4px * 3);
  padding-inline: var(--spacing-3);
  background: transparent;
  border: 1px solid #eeeeee;
  border: var(--border-default);
  border-radius: 4px;
  border-radius: var(--border-radius-medium);
  color: #131415;
  color: var(--title-color);
  font-family: Avenir Next, -apple-system, system-ui, "Helvetica Neue",
    "Segoe UI", Oxygen, Ubuntu, Cantarell, "Open Sans", sans-serif;
  font-family: var(--font-family);
  margin-right: -1px;

  &::-moz-placeholder {
    color: #6a6c6d;
    color: var(--text-color-secondary);
    font-size: inherit;
  }

  &::placeholder {
    color: #6a6c6d;
    color: var(--text-color-secondary);
    font-size: inherit;
  }

  &:focus-visible {
    outline: 0;
  }

  &[type=checkbox] {
    height: auto;
    height: initial;
  }
}
.markdown-content {
  --flow-space: var(--spacing-4);
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -webkit-hyphens: auto;
          hyphens: auto;

  [id] {
    scroll-margin-top: calc(0px + calc(4px * 16) * 2);
    scroll-margin-top: calc(var(--body-top, 0px) + var(--doc-block-spacing) * 2);
  }

  position: relative;

  .code-block {
    background-color: #f9fafb;
    background-color: var(--panel-bg-color);
    border-radius: 4px;
    border-radius: var(--border-radius-medium);
    display: block;
    margin-bottom: calc(4px * 6);
    margin-bottom: var(--spacing-6);
    padding: calc(4px * 6);
    padding: var(--spacing-6);
    white-space: pre-wrap;
  }

  hr {
    margin: calc(4px * 3) 0;
    margin: var(--spacing-3) 0;
  }

  h2 {
    font-size: 1.5rem;
    font-size: var(--text-2xl);
    font-weight: var(--font-weight-normal);
  }

  h3 {
    font-size: 1.125rem;
    font-size: var(--text-l);
    font-weight: 600;
    font-weight: var(--font-weight-semibold);
  }

  h2,
  h3,
  h4,
  h5,
  h6 {
    --flow-space: var(--spacing-6);
  }

  h4 {
    font-size: 1rem;
    font-size: var(--text-base);
    font-weight: 600;
    font-weight: var(--font-weight-semibold);
  }

  h5,
  h6 {
    font-size: 1.1em;
    font-weight: 500;
    font-weight: var(--font-weight-medium);
  }

  h5,
  h6 {
    font-style: italic;
  }

  ul, ol {
    list-style-position: outside;
    padding-left: calc(4px * 6);
    padding-left: var(--spacing-6);
  }

  ol {
    list-style-type: decimal;

    ol {
      list-style-type: lower-alpha;
    }
  }

  ul {
    list-style-type: disc;

    ul {
      list-style-type: circle;
    }
  }

  li {
    margin-block-start: calc(4px * 3);
    margin-block-start: var(--spacing-3);
  }

  blockquote {
    border-left: solid 5px #f9fafb;
    border-left: solid 5px var(--panel-bg-color);
    padding-left: calc(4px * 3);
    padding-left: var(--spacing-3);
  }
}
.multiple-content {
  container: multiple-content / inline-size;
  position: relative;
  z-index: 2;

  .content-type {
    .dropdown-title {
      padding: 0;

      span {
        font-size: 0.875rem;
      }
    }

    .menu-dropdown {
      right: 0;

      a {
        padding-right: calc(4px * 8);
        padding-right: var(--spacing-8);

        &:not([aria-selected="true"]) svg {
          display: none;
        }
      }
    }
  }

  > [aria-hidden="true"],
  [data-multiple-content-target="content"][aria-hidden="true"] {
    display: none;
  }

  @container multiple-content (width < 300px) {
    .properties-list-title {
      display: flex;
      flex-direction: column;
      gap: calc(4px * 2);
      gap: var(--gap-small);
    }
  }

  .properties-list-title + .markdown-content {
    border-top: 0;
    padding-top: 0;
  }

  > .attributes {
    display: flex;
    flex-direction: row;
    justify-content: space-between;;
  }
}
request-bodies.multiple-content {
  > .content-type {
    position: absolute;
    right: 0;
    top: calc(4px * 0.5);
    top: var(--spacing-05);
    z-index: 3;
  }

  @container multiple-content (width < 400px) {
    > .content-type {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: start;
      left: 0;
      padding: 0;
      top: calc(4px * 6);
      top: var(--spacing-6);
      height: calc(4px * 10);
      height: var(--spacing-10);
      width: 100%;

      .menu-dropdown {
        left: 0;
      }
    }

    .properties-list-title {
      margin-block-end: calc(4px * 10);
      margin-block-end: var(--spacing-10);
    }
  }
}
.tooltipped {
  --tooltip-spacing: calc(100% + var(--spacing-1));
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;

  &:after {
    -webkit-font-smoothing: subpixel-antialiased;
    background: #323233;
    background: var(--gray-80);
    border-radius: 3px;
    color: #ffffff;
    color: var(--white);
    content: attr(aria-label);
    font-size: 0.7rem;
    letter-spacing: normal;
    padding: 4px calc(4px * 3);
    padding: var(--spacing-1) var(--spacing-3);
    pointer-events: none;
    text-align: center;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    white-space: pre;
    word-wrap: break-word;
    position: absolute;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
  }

  &:active:after {
    opacity: 0;
  }

  &:hover:after {
    opacity: 1;
    visibility: visible;
  }

  &[data-tooltip-x="e"] {
    &:after {
      right: var(--tooltip-spacing);
    }
  }
  
  &[data-tooltip-x="w"] {
    &:after {
      left: var(--tooltip-spacing);
    }
  }

  &[data-tooltip-y="n"] {
    &:after {
      bottom: var(--tooltip-spacing);
    }
  }

  &[data-tooltip-y="s"] {
    &:after {
      bottom: auto;
      bottom: initial;
      top: var(--tooltip-spacing);
    }
  }

  &[data-tooltip-y] {
    &[data-tooltip-x="w"]:after {
      left: 0;
    }

    &[data-tooltip-x="e"]:after {
      right: calc(4px * -3);
      right: var(--spacing-3-minus);
    }
  }
}
a,
h2,
h3,
h4,
h5,
h6,
p,
ul,
table,
.markdown-content {
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -webkit-hyphens: auto;
          hyphens: auto;

  color: #424344;

  color: var(--text-color);
}
hr {
  border-bottom: 1px solid #eeeeee;
  border-bottom: var(--border-default);
}
strong {
  font-weight: 600;
  font-weight: var(--font-weight-semibold);
}
.pill {
  border-radius: 2em;
  font-size: 0.56rem;
  font-weight: 600;
  font-weight: var(--font-weight-semibold);
  padding: 0.125em calc(4px * 3);
  padding: 0.125em var(--spacing-3);
  text-transform: uppercase;
  vertical-align: middle;
}
.pill-deprecated {
  background-color: #fdf2f1;
  background-color: var(--doc-warning-light-color);
  color: #ee6237;
  color: var(--doc-warning-color);
  padding: 0.175em calc(4px * 3) 0;
  padding: 0.175em var(--spacing-3) 0;
  white-space: nowrap;
  height: -moz-fit-content;
  height: fit-content;
}
.security-badges {
  margin-top: calc(4px * -4);
  margin-top: var(--spacing-4-minus);

  .badge {
    display: inline-block;
    font-size: 12px;
    margin-right: calc(4px * 3);
    margin-right: var(--spacing-3);
    padding: 0;
    vertical-align: middle;
  }

  .badge-security {
    text-transform: none;
    text-transform: initial;

    a::before {
      background-image: url(https://bump.sh/packs/static/check-security-ef97b67e4a3c2894112c.svg);
      background-repeat: no-repeat;
      background-size: 8px 10px;
      content: "";
      display: inline-block;
      height: 10px;
      margin-right: calc(4px * 2);
      margin-right: var(--spacing-2);
      width: 8px;
    }

    a {
      background-color: #222c3a;
      background-color: var(--blue-90);
      border-radius: 4px;
      border-radius: var(--border-radius-medium);
      padding: 4px calc(4px * 2);
      padding: var(--spacing-1) var(--spacing-2);
      color: #ffffff !important;
      color: var(--white) !important;
    }
  }
}
.navigation__resources {
  display: flex;
  flex-direction: column;
  gap: 4px;
  gap: var(--spacing-1);
  margin-block-end: calc(4px * 10);
  margin-block-end: var(--spacing-10);
}
.navigation__resource-link {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: calc(4px * 1.5) calc(4px * 3);
  padding: var(--spacing-1-5) var(--spacing-3);
  border-radius: 4px;
  border-radius: var(--border-radius-medium);
}
.navigation__resource .navigation__resource-link.active {
  background-color: color-mix(in srgb, #025fd7, transparent 90%);
  color: #025fd7;
  color: var(--doc-base-color);
}
@supports (color: color-mix(in lch, red, blue)) {
.navigation__resource .navigation__resource-link.active {
  background-color: color-mix(in srgb, var(--doc-base-color), transparent 90%);
}
}
.navigation__resource-link svg {
  transform: rotate(-90deg);
}
.navigation__resource-link.active svg {
  transform: none;
}
.navigation__operations {
  display: none;
  flex-direction: column;
  margin-block-start: calc(4px * 3);
  margin-block-start: var(--spacing-3);
  padding-inline: calc(4px * 4) calc(4px * 3);
  padding-inline: var(--spacing-4) var(--spacing-3);
}
.navigation__resource-link {
  color: #424344;
  color: var(--text-color);
  width: 100%;

  &:hover {
    text-decoration: none;
  }
}
.active.navigation__resource-link + .navigation__operations {
  display: flex;
}
.navigation__operation-link {
  border-left: 1.5px solid #eeeeee;
  border-left: 1.5px solid var(--bg-color-secondary);
  display: flex;
  align-items: center;
  gap: calc(4px * 2);
  gap: var(--spacing-2);
  min-height: calc(4px * 8);
  min-height: var(--spacing-8);
  padding: calc(4px * 2) 0 calc(4px * 2) calc(4px * 4);
  padding: var(--spacing-2) 0 var(--spacing-2) var(--spacing-4);
  font-size: 0.875rem;
  font-size: var(--text-sm);
}
.active.navigation__operation-link {
  border-left: 1.5px solid #025fd7;
  border-left: 1.5px solid var(--doc-base-color);
  color: #025fd7;
  color: var(--doc-base-color);
  width: 100%;
}
.active.navigation__operation-link::before {
  background-color: #025fd7;
  background-color: var(--doc-base-color);
}
.navigation__operation .operation-verb {
  background-color: transparent;
  border: 0;
  margin-inline-start: auto;
  padding: 0;
}
code {
  &.hljs {
    color: currentColor;
    background: none;
    line-height: 1.5;

    .hljs-string,
    .hljs-symbol,
    .hljs-template-tag,
    .hljs-template-variable,
    .hljs-addition {
      color: #025fd7;
      color: var(--doc-base-color);
    }

    .hljs-keyword,
    .hljs-selector-tag,
    .hljs-title,
    .hljs-section,
    .hljs-built_in,
    .hljs-doctag,
    .hljs-type,
    .hljs-tag,
    .hljs-name,
    .hljs-selector-id,
    .hljs-selector-class,
    .hljs-strong {
      color: #3262ab;
      color: var(--doc-base-dark-color);
      font-weight: bolder;
    }
  }
}
pre code.hljs {
  padding: 0;
}
.operation-header {
  display: flex;
  flex-direction: column;
  gap: calc(4px * 8);
  gap: var(--base-gap);
  container: operation-header / inline-size;
}
h2.operation-title {
  align-items: baseline;
  display: flex;
  gap: calc(4px * 3);
  gap: var(--spacing-3);
  margin-bottom: 0;
  font-size: 1.5em;
  font-weight: 500;
  font-weight: var(--font-weight-medium);

  .title-badges {
    display: flex;
    gap: calc(4px * 3);
    gap: var(--spacing-3)
  }

  .badge {
    font-size: 0.875rem;
    font-size: var(--text-sm);
    font-weight: 600;
    font-weight: var(--font-weight-semibold);
    padding: 4px calc(4px * 3);
    padding: var(--spacing-1) var(--spacing-3);
    text-transform: revert;
    white-space: nowrap;

    &.beta {
      background-color: #f4f0f6;
      background-color: var(--purple-10);
      border-radius: 4px;
      border-radius: var(--border-radius-medium);
      height: -moz-fit-content;
      height: fit-content;
    }
  }

  .button {
    margin-inline-start: auto;
  }

  @container operation-header (width < 500px) {
    flex-wrap: wrap;

    .button {
      margin-inline-start: initial;
    }
  }
}
.operation-group__description:has(.doc-operation-summary) {
  display: grid;
  grid-template-columns: var(--grid-ratio);
  grid-gap: calc(4px * 8) calc(4px * 12);
  grid-gap: var(--base-gap) var(--doc-inline-spacing);
  gap: calc(4px * 8) calc(4px * 12);
  gap: var(--base-gap) var(--doc-inline-spacing);
}
:root {
  --body-top: 0px;
}
#embed-top-body {
  nav {
    z-index: 999;
  }
}
.embed-mode-sticky {
  position: sticky;
  top: 0;
  z-index: 999;
}
.embed-mode-slide {
  display: none;
}
/* it's important to keep this import after the property one because of style conflicts.
   will move to cascade layers once they don't conflict with tailwind @layer directive */
.properties-list {
  display: flex;
  flex-direction: column;
  row-gap: calc(4px * 3);
  row-gap: var(--spacing-3);
  scroll-margin-top: calc(4px * -10);
  scroll-margin-top: var(--spacing-10-minus);

  > ul {
    border-top: 1px solid #eeeeee;
    border-top: var(--border-default);
  }
}
.properties-list-title {
  font-size: 1.125rem;
  font-size: var(--text-l);
  font-weight: 500;
  font-weight: var(--font-weight-medium);
  margin: 0;
}
.properties-list-content {
  display: flex;
  align-items: center;
  justify-content: space-between
}
.schema-collection {
  width: 100%;

  > .property-name {
    border-block-end: 1px solid #eeeeee;
    border-block-end: var(--border-default);
    font-size: 1.125rem;
    font-weight: 500;
    font-weight: var(--font-weight-medium);
    padding-block-end: calc(4px * 3);
    padding-block-end: var(--spacing-3);
  }
}
.single-schema h5 a {
  font-size: 1.125rem;
  font-size: var(--text-l);
  text-transform: none;
  text-transform: initial;
}
.single-schema .property {
  border-top: 0;
  padding: 0;
}
.single-schema .property-name {
  text-transform: uppercase;
  font-size: 0.75rem;
  font-size: var(--text-xs);
  color: #6a6c6d;
  color: var(--text-color-secondary);
}
.single-schema .property-type {
  display: none;
}
.single-schema .markdown-content {
  padding-block-start: calc(4px * 4);
  padding-block-start: var(--spacing-4);
  border-top: 1px solid #eeeeee;
  border-top: var(--border-default);
}
.expandable-properties-list {
  --list-bg-color: var(--bg-color);
  background-color: #ffffff;
  background-color: var(--list-bg-color);
  border: 1px solid #eeeeee;
  border: var(--border-default);
  border-radius: 4px;
  border-radius: var(--border-radius-medium);
  max-width: 100%;
  position: relative;
  width: -moz-fit-content;
  width: fit-content;

  &[aria-hidden="true"] {
    display: none;
  }

  .properties-list {
    > .markdown-content {
      border-block-start: 1px solid #eeeeee;
      border-block-start: var(--border-default);
      padding-block-start: calc(4px * 3);
      padding-block-start: var(--spacing-3);
      padding-inline: calc(4px * 3);
      padding-inline: var(--spacing-3);
    }
  }
}
.expandable-properties-list[open] {
  width: 100%;
}
.expandable-properties-list:not(.active)[open] {
  --list-bg-color: var(--doc-nested-background-color);
  width: 100%;
  display: block;
}
.expandable-properties-list.active[open] {
  --list-bg-color: var(--bg-color);
}
.expandable-properties-list.hidden {
  display: none;
}
.expandable-properties-list summary {
  align-items: baseline;
  background-image: url('data:image/svg+xml, <svg width="12" height="11" viewBox="0 0 12 11" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.02575 10.2636C5.02863 10.4292 5.09643 10.587 5.21454 10.7031C5.33265 10.8192 5.49163 10.8842 5.65723 10.8842C5.82283 10.8842 5.9818 10.8192 6.09991 10.7031C6.21803 10.587 6.28582 10.4292 6.2887 10.2636L6.2887 6.13182L10.4205 6.13182C10.588 6.13188 10.7487 6.06539 10.8672 5.94696C10.9858 5.82854 11.0524 5.66789 11.0524 5.50035C11.0525 5.33282 10.986 5.17212 10.8676 5.05361C10.7491 4.9351 10.5885 4.86849 10.421 4.86843L6.28825 4.86933L6.2887 0.737072C6.2887 0.569476 6.22212 0.408745 6.10361 0.290237C5.98511 0.17173 5.82437 0.105153 5.65678 0.105153C5.48918 0.105153 5.32845 0.17173 5.20995 0.290237C5.09144 0.408745 5.02486 0.569475 5.02486 0.737071L5.0262 4.86933L0.893947 4.86888C0.726411 4.86894 0.56576 4.93555 0.447336 5.05406C0.328912 5.17256 0.262415 5.33326 0.262475 5.5008C0.262534 5.66833 0.329145 5.82898 0.447652 5.94741C0.56616 6.06583 0.726857 6.13233 0.894393 6.13227L5.02575 6.13182L5.02575 10.2636Z" fill="rgb(106, 108, 109)"/></svg>');
  background-position: 11px 12px;
  background-repeat: no-repeat;
  background-size: 12px 12px;
  cursor: pointer;
  -moz-column-gap: 0.25em;
       column-gap: 0.25em;
  display: flex;
  flex-wrap: wrap;
  gap: calc(4px * 2);
  gap: var(--spacing-2);
  overflow: hidden;
  padding: calc(4px * 2) calc(4px * 3) calc(4px * 2) calc(4px * 8);
  padding: var(--spacing-2) var(--spacing-3) var(--spacing-2) var(--spacing-8);

  &:is(.expandable-properties-list[open] > *) {
    background-image: url('data:image/svg+xml, <svg height="9" width="9" viewBox="0 0 9 9" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0.934985 0.934985C1.18163 0.688338 1.58153 0.688338 1.82817 0.934985L4.75 3.85681L7.67183 0.934985C7.91847 0.688338 8.31837 0.688338 8.56501 0.934985C8.81166 1.18163 8.81166 1.58153 8.56501 1.82817L5.64319 4.75L8.56501 7.67183C8.81166 7.91847 8.81166 8.31837 8.56501 8.56501C8.31837 8.81166 7.91847 8.81166 7.67183 8.56501L4.75 5.64319L1.82817 8.56501C1.58153 8.81166 1.18163 8.81166 0.934985 8.56501C0.688338 8.31837 0.688338 7.91847 0.934985 7.67183L3.85681 4.75L0.934985 1.82817C0.688338 1.58153 0.688338 1.18163 0.934985 0.934985Z" fill="rgb(106, 108, 109)"/></svg>');
    background-position: 12px 13px;
    background-size: 9px 9px;
  }

  > .property-type {
    color: #6a6c6d;
    color: var(--text-color-secondary);
    font-size: 0.625rem;
    font-size: var(--text-xxs);
    font-weight: 600;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
  }
}
.expandable-properties-list:not([open]) > summary .hide {
  display: none;
}
.expandable-properties-list[open] > summary > .show {
  display: none
}
.expandable-properties-list .property {
  box-sizing: border-box;
  padding: calc(4px * 3);
  padding: var(--spacing-3);
}
.property {
  border-bottom: 1px solid #eeeeee;
  border-bottom: var(--border-default);
  display: flex;
  flex-direction: column;
  padding-block: calc(4px * 3);
  padding-block: var(--spacing-3);
  row-gap: calc(4px * 3);
  row-gap: var(--spacing-3);
  scroll-margin-top: calc(calc(4px * 16) * 1.5);
  scroll-margin-top: calc(var(--doc-block-spacing) * 1.5);
  width: 100%;

  &:last-child {
    border-bottom: 0;
  }
}
.property-name {
  color: #424344;
  color: var(--text-color);
  font-size: 0.875rem;
  font-size: var(--text-sm);
  font-weight: 600;
  font-weight: var(--font-weight-semibold);
  white-space-collapsing: discard;

  &.dot-success {
    --dot-color: var(--doc-success-color);
  }

  &.dot-error {
    --dot-color: var(--doc-error-color);
  }

  &.dot-success::before,
  &.dot-error::before {
    color: var(--dot-color);
    content: "•";
    font-weight: 700;
    font-weight: var(--font-weight-bold);
  }
}
.attributes {
  align-items: baseline;
  color: #6a6c6d;
  color: var(--text-color-secondary);
  gap: calc(4px * 2) 4px;
  gap: var(--spacing-2) var(--spacing-1);
  position: relative;
}
.doc-section-title,
.operation-title {
  .attributes .beta {
    background-color: #f4f0f6;
    background-color: var(--bg-color-extra);
    border-radius: calc(4px * 0.5);
    border-radius: var(--border-radius-small);
    font-size: 0.875rem;
    font-weight: 600;
    font-weight: var(--font-weight-semibold);
    padding: 4px calc(calc(4px * 2) + calc(4px * 0.5));
    padding: var(--spacing-1) calc(var(--spacing-2) + var(--spacing-05));
    text-transform: none;
    text-transform: initial;
  }
}
.name-prefix {
  color: #6a6c6d;
  color: var(--text-color-secondary);
}
.combinator {
  display: flex;
  flex-direction: column;
  row-gap: calc(4px * 3);
  row-gap: var(--spacing-3);
  scroll-margin-top: calc(4px * -8);
  scroll-margin-top: var(--spacing-8-minus);
  max-width: calc(100vw - calc(4px * 12) * 2);
  max-width: calc(100vw - var(--doc-inline-spacing) * 2);
}
.combinator__header {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: calc(4px * 4);
  gap: var(--spacing-4);
  color: #424344;
  color: var(--text-color);
  position: relative;
}
.combinator__header::after {
  border-bottom: 1px solid #eeeeee;
  border-bottom: var(--border-default);
  bottom: -1px;
  content: "";
  left: 0;
  position: absolute;
  width: 100%;
}
.combinator__type {
  margin-block-end: 0;
  font-size: 0.875rem;
  font-size: var(--text-sm);
  flex-shrink: 0;
}
.combinator .tabs {
  --gradient-bg-color: var(--bg-color);

  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  flex-grow: 1;
  overflow-x: auto;
  background:
    linear-gradient(to right, #ffffff, #ffffff, rgba(255, 255, 255, 0) calc(0.75em * 2)),
    radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0)),
    linear-gradient(to left, #ffffff, #ffffff, rgba(255, 255, 255, 0) calc(0.75em * 2)),
    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0)) 100%;
  background:
    linear-gradient(to right, var(--gradient-bg-color), var(--gradient-bg-color), var(--transparent-bg-color) calc(var(--scroll-shadow-size) * 2)),
    radial-gradient(farthest-side at 0 50%, var(--scroll-shadow-gradient), var(--transparent-bg-color)),
    linear-gradient(to left, var(--gradient-bg-color), var(--gradient-bg-color), var(--transparent-bg-color) calc(var(--scroll-shadow-size) * 2)),
    radial-gradient(farthest-side at 100% 50%, var(--scroll-shadow-gradient), var(--transparent-bg-color)) 100%;
  background-repeat: no-repeat;
  background-attachment: local, scroll, local, scroll;
  background-size: 100% 100%, 0.75em 100%, 100% 100%, 0.75em 100%;
  background-size: 100% 100%, var(--scroll-shadow-size) 100%, 100% 100%, var(--scroll-shadow-size) 100%;
  height: 100%;
}
.expandable-properties-list:not(.active)[open] .combinator .tabs {
  --gradient-bg-color: var(--doc-nested-background-color);
}
.expandable-properties-list.active[open] .combinator .tabs {
  --gradient-bg-color: var(--bg-color);
}
.combinator .tab {
  color: #4c555a;
  color: var(--hint-text-color);
  padding: calc(4px * 2);
  padding: var(--spacing-2);
  position: relative;
  flex-wrap: nowrap;
  flex-shrink: 0;

  > .property-type {
    background: 0;
    padding-inline-end: revert;

    &:hover {
      &::before,
      &::after {
        content: none;
      }
    }
  }

  > .pill-deprecated {
    padding: 0.125em calc(4px * 2) 0;
    padding: 0.125em var(--spacing-2) 0;
    top: 0;
  }
}
.combinator .tab[aria-selected="true"] {
  border-bottom: 2px solid #025fd7;
  border-bottom: 2px solid var(--doc-base-color);
  color: #131415;
  color: var(--title-color);
}
.combinator > .properties-list {
  margin-block-start: 0;
  border: 0;
}
.combinator > .properties-list > ul > li:first-child {
  border-top: 0;
}
.combinator > [data-tabs-target="panel"] {
  border: 0;
  display: flex;
  flex-direction: column;
  padding: 0;
  row-gap: calc(4px * 3);
  row-gap: var(--spacing-3);

  > .properties-list > ul:first-child {
    border-block-start: 0;
  }
}
.combinator > [data-tabs-target="panel"][aria-hidden="true"] {
  display: none;
}
.dark-theme .call-to-action-container {
  .call-to-action {
    box-shadow: 0px 4px 16px rgba(255, 255, 255, 0.1);

    &:after {
      background-color: hsla(210,5%,8%,.4);
    }
  }
}
.dark-theme .doc-compare__bar {
  background-color: #ffffff;
  background-color: var(--bg-color);
}
.dark-theme .doc-compare__bar select {
  --bg-color: var(--slate-90);
  transition: background-color ease 150ms;
  transition: background-color var(--base-timing) var(--base-duration);
}
.dark-theme .doc-compare__bar select:hover {
  --bg-color: var(--slate-80);
}
.dark-theme .doc-compare__change-list {
  --panel-bg-color: var(--bg-color);
}
.dark-theme .doc-container {
  background-color: #ffffff;
  background-color: var(--bg-color);
}
.dark-theme {
  .doc-logo img {
    filter: hue-rotate(180deg) invert(100%) saturate(200%);
  }

  .navigation__operation .operation-verb {
    &.delete,
    &.get,
    &.head,
    &.post,
    &.put,
    &.patch,
    &.pub,
    &.sub {
      background-color: transparent;
    }
  }

  .operation-verb {
    &.delete {
      background: #241314;
      background: var(--darkest-red);
    }

    &.get,
    &.head {
      background: #111c28;
      background: var(--darkest-blue);
    }

    &.post {
      background: #11201d;
      background: var(--darkest-green);
    }

    &.put,
    &.patch,
    &.pub {
      background: #272018;
      background: var(--darkest-orange);
    }

    &.sub {
      background: #2e1130;
      background: var(--darkest-purple);
    }
  }

  .active > a {
    color: #025fd7;
    color: var(--doc-base-color);
  }

  footer,
  footer a {
    color: #424344;
    color: var(--text-color);
  }

  footer a:hover {
    color: var(--doc-link-highlight);
  }
  portal-example header .skeleton-line {
    --example-bg-color: var(--doc-code-background-color);

    &::after {
      background-image: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0,
        rgba(255, 255, 255, 0.1) 40%,
        rgba(255, 255, 255, 0.2) 60%,
        rgba(255, 255, 255, 0)
      );
    }
  }
}
.dark-theme .changelog-menu {
  background-color: #ffffff;
  background-color: var(--bg-color);
}
.dark-theme .changelog-menu__selector .dropdown {
  background-color: #191c1e;
  background-color: var(--slate-90);
}
.dark-theme {
  .changelog-event__date,
  ul.changelog-event__diff {
    color: #bdc6cf;
    color: var(--slate-40);
  }

  .changelog-event__link a:hover {
    background-color: #222325;
    background-color: var(--gray-90);
  }
}
.dark-theme .changelog-menu__actions .button,
.dark-theme .changelog-event__compare-button {
  background-color: #191c1e;
  background-color: var(--slate-90);
  border-color: transparent;
  transition: background-color ease 150ms;
  transition: background-color var(--base-timing) var(--base-duration);
}
.dark-theme .changelog-menu__actions .button:hover,
.dark-theme .changelog-event__compare-button:hover {
  background-color: #292e31;
  background-color: var(--slate-80);
}
.dark-theme .navigation__resource .navigation__resource-link.active {
  filter: hue-rotate(180deg) invert(100%) saturate(200%);
}
.dark-theme .active.navigation__operation-link,
.dark-theme .active.navigation__operation-link::before  {
  filter: hue-rotate(180deg) invert(100%) saturate(200%);
}
.hub-container {
  align-items: start;
  display: flex;
  justify-content: center;
}
.hub-category-title {
  color: #131415;
  color: var(--title-color);
  font-size: 1.375rem;
  font-weight: 600;
  margin-top: calc(4px * 10);
  margin-top: var(--spacing-10);
}
.hub-wrapper {
  flex-grow: 1;
}
.hubs main {
  width: 100%;
}
.hubs main.no-border {
  border: 0;
  padding: 0;
}
.hubs hr {
  background-color: #eeeeee;
  background-color: var(--border-color-default);
  height: 100%;
  margin: 0 calc(4px * 10);
  margin: 0 var(--spacing-10);
  width: calc(4px * 0.5);
  width: var(--spacing-05);
}
.hubs aside {
  flex-basis: 461px;
  flex-grow: 1;
  flex-shrink: 0;
  padding: calc(4px * 20) 0;
  padding: var(--spacing-20) 0;
  position: sticky;
  top: calc(calc(4px * 16) + 0px);
  top: calc(var(--spacing-16) + var(--body-top));
}
.hubs aside a {
  color: #025fd7;
  color: var(--doc-base-color);
}
.hubs aside .title {
  align-items: center;
  display: flex;
  justify-content: space-between;
  line-height: 2rem;
  row-gap: calc(4px * 2);
  row-gap: var(--spacing-2);
}
.hubs aside h2 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0;
}
.hubs aside .content {
  margin-top: calc(4px * 4);
  margin-top: var(--spacing-4);
}
.hubs .changelog-event {
  display: flex;
  flex-direction: column;
  margin-top: calc(4px * 6);
  margin-top: var(--spacing-6);
  padding: 0;
  row-gap: calc(4px * 3);
  row-gap: var(--spacing-3);
}
.hubs .changelog-event__header {
  font-size: 0.875rem;
  line-height: normal;
  line-height: initial;
}
.hubs .changelog-event__title {
  display: flex;
  flex-direction: column;
  row-gap: calc(4px * 3);
  row-gap: var(--spacing-3);
}
.hubs .changelog-event__title h3 {
  display: inline;
  font-size: 1rem;
  margin: 0;
}
.hubs .changelog-event__date {
  border: 0;
  color: #4c555a;
  color: var(--hint-text-color);
  padding-block: 0;
}
.hubs .changelog-event__date::after {
  content: none;
}
.hubs .tags {
  display: flex;
  flex-wrap: wrap;
  row-gap: calc(4px * 2);
  row-gap: var(--spacing-2);
}
@media (max-width: 1000px) {
  .hubs aside {
    flex-shrink: 1;
  }
}
@media (max-width: 850px) {
  .hub-container {
    align-items: stretch;
    flex-direction: column;
  }

  .hubs main {
    border: 0;
    padding-right: 0;
  }

  .hubs aside {
    flex-basis: auto;
    padding-left: 0;
  }

  .hub-container hr {
    height: auto;
    height: initial;
  }

  .hubs .changelog-event {
    border: 0;
  }

  .hubs .changelog-event__date {
    display: block;
  }
}
.catalog-list .list-element {
  margin: calc(4px * 6) 0;
  margin: var(--spacing-6) 0;
}
.catalog-list .list-element .title {
  font-weight: 600;
  font-weight: var(--font-weight-semibold);
}
.catalog-list .list-element p {
  margin-top: calc(4px * 2);
  margin-top: var(--spacing-2);
}
.catalog-list .list-element .tag svg {
  height: 9px;
}
.catalog-list .list-element .extra {
  align-items: end;
  display: flex;
  font-size: 0.875rem;
  justify-content: end;
}
@media (max-width: 1000px) {
  .catalog-list .list-element {
    flex-direction: column;
  }

  .catalog-list .list-element .extra {
    justify-content: start;
  }
}
portal {
  .button, :where(a.button, button, input[type="submit"], input[type="button"]) {
    --button-base-color: var(--doc-base-color, var(--base-color));
    --button-base-color-hover: color-mix(in srgb, var(--button-base-color), var(--gray-50) 35%);

    --button-color: var(--button-base-color);
    --button-color-hover: var(--button-base-color-hover);
    --button-text-color: var(--white);
    --button-text-color-hover: var(--white);
    --button-border-color: var(--button-color);
    --button-border-color-hover: var(--button-color-hover);

    align-items: center;
    background-color: #025fd7;
    background-color: var(--button-color);
    display: inline-flex;
    border: 1px solid #025fd7;
    border: 1px solid var(--button-border-color);
    border-radius: 4px;
    border-radius: var(--border-radius-medium);
    color: #ffffff;
    color: var(--button-text-color);
    cursor: pointer;
    font-family: Avenir Next, -apple-system, system-ui, "Helvetica Neue",
    "Segoe UI", Oxygen, Ubuntu, Cantarell, "Open Sans", sans-serif;
    font-family: var(--font-family);
    font-weight: 500;
    font-weight: var(--font-weight-medium);
    font-size: 0.875rem;
    -webkit-font-smoothing: antialiased;
    gap: calc(4px * 2);
    gap: var(--spacing-2);
    height: calc(4px * 8);
    height: var(--spacing-8);
    justify-content: center;
    line-height: 1;
    padding: calc(4px * 2) calc(4px * 4);
    padding: var(--spacing-2) var(--spacing-4);
    text-align: center;
    text-decoration: none;
    transition: background-color 150ms ease,
      border-color 150ms ease;
    transition: background-color var(--base-duration) var(--base-timing),
      border-color var(--base-duration) var(--base-timing);
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    vertical-align: middle;
    white-space: nowrap;

    &:hover {
      background: var(--button-color-hover);
      border-color: var(--button-border-color-hover);
      color: var(--button-text-color-hover);
      text-decoration: none;
    }

    &:focus-visible {
      outline: 3px solid color-mix(in oklch, #323233, transparent 40%);
      outline: var(--focus-outline);
      outline-offset: 2px;
      outline-offset: var(--focus-outline-offset);
    }

    &:disabled {
      cursor: not-allowed;
      opacity: 0.5;
    }

    svg {
      flex-shrink: 0;
      height: calc(4px * 4);
      height: var(--spacing-4);
      width: calc(4px * 4);
      width: var(--spacing-4);
    }

    /* --- button sizes --- */

    &[data-button-size="mini"] {
      font-size: 10px;
      gap: 4px;
      gap: var(--spacing-1);
      height: calc(4px * 5);
      height: var(--spacing-5);
      padding: 4px calc(4px * 1.5);
      padding: var(--spacing-1) var(--spacing-1-5);
    }

    &[data-button-size="mini"] svg {
      height: calc(4px * 3);
      height: var(--spacing-3);
      width: calc(4px * 3);
      width: var(--spacing-3);
    }

    &[data-button-size="small"] {
      font-size: 0.75rem;
      gap: 4px;
      gap: var(--spacing-1);
      height: calc(4px * 6);
      height: var(--spacing-6);
      padding: 4px calc(4px * 3);
      padding: var(--spacing-1) var(--spacing-3);
    }

    &[data-button-size="small"] svg {
      height: calc(4px * 3);
      height: var(--spacing-3);
      width: calc(4px * 3);
      width: var(--spacing-3);
    }

    &[data-button-size="large"] {
      height: calc(4px * 10);
      height: var(--spacing-10);
      padding-inline: calc(4px * 5);
      padding-inline: var(--spacing-5);
    }

    /* --- button styles --- */

    /* inverted button with base color outline */
    &[data-button-style="outline"] {
      --button-color: transparent;
      --button-color-hover: transparent;
      --button-border-color: color-mix(in oklch, var(--gray-40), transparent 50%);
      --button-border-color-hover: color-mix(in oklch, currentColor, transparent 50%);
      --button-text-color: currentColor;
      --button-text-color-hover: currentColor;
    }

    /* inverted button with neutral outline */
    &[data-button-style="secondary"] {
      --button-color: var(--bg-color);
      --button-color-hover: var(--bg-color);
      --button-border-color: var(--border-color-default);
      --button-text-color: var(--text-color);
      --button-text-color-hover: var(--text-color);
      --button-border-color-hover: var(--text-color);
    }

    /* White bg and gray font whatever darkmode */
    &[data-button-style="white"] {
      --button-color: var(--white);
      --button-color-hover: var(--white);
      --button-border-color: var(--gray-20);
      --button-text-color: var(--gray-70);
      --button-text-color-hover: var(--gray-70);
      --button-border-color-hover: var(--gray-70);
    }

    /* Darker blue bg and white font whatever darkmode */
    &[data-button-style="darker-blue"] {
      --button-color: var(--darker-blue);
      --button-color-hover: var(--darker-blue);
      /* --button-border-color: var(--gray-20); */
      --button-text-color: var(--white);
      --button-text-color-hover: var(--white);
      /* --button-border-color-hover: var(--gray-70); */
    }

    &[data-button-style="danger"] {
      --button-base-color: var(--red-60);
      --button-base-color-hover: var(--red-70);
    }

    &[data-button-style="action"] {
      --button-text-color: var(--text-color-inverted);
      --button-text-color-hover: var(--text-color-inverted);
      --button-color: var(--bg-color-inverted);
      --button-color-hover: var(--bg-color-inverted);
    }

    &[data-button-style="neutral"] {
      --button-text-color: var(--text-color);
      --button-text-color-hover: var(--text-color);
      --button-color: color-mix(in oklch, var(--bg-color-secondary), transparent 50%);
      --button-color-hover: color-mix(in oklch, var(--bg-color-secondary), transparent 20%);
      --button-border-color: transparent;
      --button-border-color-hover: transparent;
    }

    &:where([data-button-style="naked"]) {
      --button-color: transparent;
      --button-color-hover: transparent;
      --button-text-color: var(--button-base-color);
      --button-text-color-hover: var(--button-base-color-hover);
      --button-border: transparent;
      height: auto;
      padding: 0;

      &:hover {
        text-decoration: underline;
      }
    }

    &[data-button-style="link"] {
      --button-color: transparent;
      --button-color-hover: var(--button-color);
      --button-text-color: currentColor;
      --button-text-color-hover: var(--base-color);
      display: inline;
      height: auto;
      padding: 0;
      text-decoration: underline;
    }

    /* --- button padding --- */

    &[data-button-padding="large"] {
      padding-inline: calc(4px * 6);
      padding-inline: var(--spacing-6);
    }

    /* --- button radius --- */

    &[data-button-radius="round"] {
      border-radius: calc(4px * 10);
      border-radius: var(--border-radius-round);
    }

    /* --- button states --- */

    &[data-button-state="success"] {
      --button-base-color: var(--green-60);
      --button-base-color-hover: var(--green-70);
    }

    &[data-button-state="error"] {
      --button-base-color: var(--red-60);
      --button-base-color-hover: var(--red-70);
    }

    &[data-button-state="warning"] {
      --button-base-color: var(--orange-60);
      --button-base-color-hover: var(--orange-70);
    }
  }

  :where(input[type="text"]) {
    font-family: Avenir Next, -apple-system, system-ui, "Helvetica Neue",
    "Segoe UI", Oxygen, Ubuntu, Cantarell, "Open Sans", sans-serif;
    font-family: var(--font-family);
    font-weight: 500;
    font-weight: var(--font-weight-medium);
  }
}
.badge {
  font-size: 0.6rem;
  font-weight: 500;
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;

  &.property-type[data-type-content] {
    background: url(https://bump.sh/packs/static/object-cc20e3cc5ee0f7480e15.svg) right center no-repeat;
    padding-inline-end: calc(4px * 4);
    padding-inline-end: var(--spacing-4);
    position: relative;

    &:hover::before,
    &:hover::after {
      display: block;
      left: 100%;
      position: absolute;
      transition: all 0.2s ease-in;
      transform: translateX(calc(-50% - calc(4px * 2)));
      transform: translateX(calc(-50% - var(--spacing-2)));
      z-index: 1;
    }

    &:hover::before {
      background-color: #f9fafb;
      background-color: var(--panel-bg-color);
      border: 1px solid #eeeeee;
      border: var(--border-default);
      border-radius: 4px;
      border-radius: var(--border-radius-medium);
      bottom: calc(100% + calc(4px * 3));
      bottom: calc(100% + var(--spacing-3));
      content: attr(data-type-content);
      font-size: 0.75rem;
      font-size: var(--text-xs);
      padding: 4px calc(4px * 3);
      padding: var(--spacing-1) var(--spacing-3);
      text-transform: none;
      text-transform: initial;
      width: -moz-max-content;
      width: max-content;
    }

    &:hover::after {
      border-style: solid;
      border-width: 7px;
      border-color: #f9fafb transparent transparent transparent;
      border-color: var(--panel-bg-color) transparent transparent transparent;
      bottom: 100%;
      content: "";
      filter: drop-shadow(0 1.5px 0px #eeeeee);
      filter: drop-shadow(0 1.5px 0px var(--border-color-default));
      height: 7px;
      width: 14px;
    }
  }

  &.required {
    color: #ee6237;
    color: var(--doc-warning-color);
  }

  &.discriminator {
    color: #800080;
    color: var(--purple);
  }

  &.pill {
    position: relative;
  }

  &.deprecated {
    color: #6a6c6d;
    color: var(--text-color-secondary);
  }

  &.beta {
    color: #800080;
    color: var(--text-color-extra);
  }

  &.additional-property {
    font-weight: 500;
    font-weight: var(--font-weight-medium);
    font-size: 0.6rem;
    border: 1px solid #EEEEEE;
    float: right;
    text-transform: none;
  }
}
a.doc-back-link:not([href]) {
  display: none;
}
a.doc-back-link {
  position: absolute;
  right: 0;
  top: calc(4px * 0.5);
  top: var(--spacing-05);
  z-index: 3;
}
.doc-back-link-container {
  position: relative;
  z-index: 2;
}
.doc-operation-summary {
  operation-summary {
    width: 100%;
  }

  .example-content {
    display: flex;
    flex-direction: column;
    gap: calc(4px * 2);
    gap: var(--spacing-2);
    padding: calc(4px * 3);
    padding: var(--spacing-3);
    max-height: 170px;
  }
}
explorer-request-bar {
  background-color: #ffffff;
  background-color: var(--bg-color);
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: calc(4px * 3);
  gap: var(--spacing-3);
  padding: calc(4px * 4) 0 0;
  padding: var(--spacing-4) 0 0;
  margin-block-end: calc(4px * 8);
  margin-block-end: var(--spacing-8);
  position: sticky;
  top: calc(calc(4px * 16) + 0px);
  top: calc(var(--spacing-16) + var(--body-top));
  z-index: 9;

  &::after {
    content: "";
    position: absolute;
    height: calc(4px * 8);
    height: var(--spacing-8);
    top: 100%;
    width: 100%;
    left: 0;
    background-image: linear-gradient(to bottom, color-mix(in oklch, #ffffff, transparent 66%), transparent);
  }

@supports (color: color-mix(in lch, red, blue)) {
&::after {
    background-image: linear-gradient(to bottom, color-mix(in oklch, var(--bg-color), transparent 66%), transparent);
  }
}

  .dropdown-title,
  > .button,
  .request-url {
    min-height: calc(4px * 10);
    min-height: var(--spacing-10);
  }

  .request-url {
    border: 1px solid #eeeeee;
    border: var(--border-default);
    border-radius: 4px;
    border-radius: var(--border-radius-medium);
    display: flex;
    align-items: center;
    gap: calc(4px * 3);
    gap: var(--spacing-3);
    flex-grow: 1;
    padding-inline-end: calc(4px * 4);
    padding-inline-end: var(--spacing-4);
    height: calc(4px * 9);
    height: var(--spacing-9);

    .operation-verb {
      align-self: stretch;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
      display: flex;
      align-items: center;
      font-size: 0.875rem;
      font-size: var(--text-sm);
      padding-inline: calc(4px * 4);
      padding-inline: var(--spacing-4);
      margin: -1px;

      &.verb {
        background: color-mix(in oklch, #f9fafb, #131415 1%);
        border: 0;
        color: #6a6c6d;
        color: var(--gray-50);
        margin: 0;
      }

@supports (color: color-mix(in lch, red, blue)) {
&.verb {
        background: color-mix(in oklch, var(--doc-nested-background-color), var(--black) 1%);
      }
}
    }

    .operation-path {
      margin-inline-end: auto;
      padding-block: calc(4px * 2);
      padding-block: var(--spacing-2);
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .operation-path [data-explorer-server-variables-target="serverUrl"] {
      gap: 4px;
      gap: var(--spacing-1);
      display: flex;
      align-items: center;
    }

    .dropdown {
      margin-inline-start: auto;
    }

    .menu-dropdown {
      top: calc(4px * 12) !important;
      top: var(--spacing-12) !important;
      right: calc(4px * -3);
      right: var(--spacing-3-minus);
    }

    .server-button {
      border: none;
      span {
        margin-right: calc(4px * 8);
        margin-right: var(--spacing-8);
      }

      &:hover {
        background-color: #f0f4f7;
        background-color: var(--dropdown-bg-color-hover);
        color: #424344;
        color: var(--text-color);
      }

      svg {
        &:is(button:not(.selected) > *) {
          display: none;
        }
      }
    }

    .single-server {
      display: none;
    }

    .show-single-server {
      display: block;
    }
  }

  .share-context {
    background-color: #f5fbff;
    background-color: var(--blue-10);
    border: #e6f6fc calc(4px * 0.25) solid;
    border: var(--blue-20) var(--spacing-px) solid;
    padding: calc(4px * 4) calc(4px * 3);
    padding: var(--spacing-4) var(--spacing-3);
    width: 100%;
    border-radius: 4px;
    border-radius: var(--spacing-1);

    a {
      text-decoration: underline;
    }
  }

  .server-variable-wrapper {
    position: relative;
  }

  .server-variable-input {
    height: calc(4px * 6);
    height: var(--spacing-6);
    padding-inline: calc(4px * 2);
    padding-inline: var(--spacing-2);
    font-size: 0.875rem;
    font-size: var(--text-sm);
    color: #424344;
    color: var(--text-color);
    background-color: #f9fafb;
    background-color: var(--bg-color-light);
    min-width: calc(4px * 12);
    min-width: var(--spacing-12);
    max-width: calc(4px * 64);
    max-width: var(--spacing-64);
    box-sizing: border-box;
    flex-shrink: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .server-variable-dropdown {
    height: calc(4px * 6);
    height: var(--spacing-6);

    .dropdown-title {
      min-height: auto;
      padding: calc(4px * 0.25) calc(4px * 2);
      padding: var(--spacing-px) var(--spacing-2);
      border: 1px solid #eeeeee;
      border: var(--border-default);
      border-radius: 4px;
      border-radius: var(--border-radius-medium);
      background-color: #f9fafb;
      background-color: var(--bg-color-light);
    }

    .server-button {
      border: none;
      span {
        margin-right: calc(4px * 8);
        margin-right: var(--spacing-8);
      }

      &:hover {
        background-color: #f0f4f7;
        background-color: var(--dropdown-bg-color-hover);
        color: #424344;
        color: var(--text-color);
      }
    }
  }

  .server-variable-dropdown .menu-dropdown {
    top: calc(4px * 10) !important;
    top: var(--spacing-10) !important;
    left: 0;
  }

  @media (max-width: 849.98px) {
    .request-url {
      width: 100%;

      .operation-path {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .dropdown {
        max-width: 50%;

        .dropdown-title {
          padding: 0;

          [data-dropdown-target="current"] {
            text-overflow: ellipsis;
            overflow: hidden;
          }
        }
      }

      span[data-explorer-share-target="server"] {
        max-width: 50%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }

  @media (max-width: 499.98px) {
    #operations-dropdown {
      width: 100%;
    }

    .dropdown-title [data-dropdown-target="current"] {
      text-overflow: ellipsis;
      overflow: hidden;
      display: inline-block;
    }

    .request-url .show-single-server {
      display: none;
    }
  }
}
/* Tooltip styles */
.server-variable-tooltip {
  background-color: #f9fafb;
  background-color: var(--panel-bg-color);
  border: 1px solid #eeeeee;
  border: var(--border-default);
  border-radius: 4px;
  border-radius: var(--border-radius-medium);
  padding: 4px calc(4px * 3);
  padding: var(--spacing-1) var(--spacing-3);
  font-size: 0.75rem;
  font-size: var(--text-xs);
  color: #424344;
  color: var(--text-color);
  max-width: 400px;
  width: -moz-max-content;
  width: max-content;
  word-wrap: break-word;
  pointer-events: none;
  position: fixed;
  z-index: 1000;
  max-height: calc(4px * 14);
  max-height: var(--spacing-14);
}
.server-variable-tooltip::after {
  content: "";
  position: absolute;
  top: calc(100% - 1px);
  left: 50%;
  transform: translateX(-50%);
  border-style: solid;
  border-width: calc(calc(4px * 1.5) + calc(4px * 0.25));
  border-width: calc(var(--spacing-1-5) + var(--spacing-px));
  border-color: #f9fafb transparent transparent transparent;
  border-color: var(--panel-bg-color) transparent transparent transparent;
  filter: drop-shadow(0 1.5px 0px #eeeeee);
  filter: drop-shadow(0 1.5px 0px var(--border-color-default));
  height: 0;
  width: 0;
  pointer-events: none;
}
.server-variable-tooltip-description {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}
.search-button {
  --button-color-hover: var(--doc-code-background-color, var(--gray-10));
  border: 1px solid #eeeeee;
  border: var(--border-default);
  max-width: 400px;
  padding: calc(4px * 2) calc(4px * 4);
  padding: var(--spacing-2) var(--spacing-4);
  margin-right: auto;

  .placeholder {
    flex-grow: 1;
    text-align: left;
  }

  flex-grow: 1;
  margin-block-end: 0;
  order: -1;

  @media (max-width: 849.98px) {
    flex-grow: 1;
    margin-block-end: calc(4px * 3);
    margin-block-end: var(--spacing-3);
    margin-inline-end: auto;
  }
}
.doc-search__dialog {
  --category-color: var(--gray-50);
  --search-hover-color: var(--slate-10);
  --search-form-color: var(--bg-color);
  --esc-button-color: var(--doc-nested-background-color);

  background: #ffffff;

  background: var(--bg-color);
  container: dialog / inline-size;
  font-size: 0.875rem;
  font-size: var(--text-sm);
  margin-top: calc(4px * 10);
  margin-top: var(--spacing-10);
  max-height: calc(100vh - calc(4px * 20));
  max-height: calc(100vh - var(--spacing-20));
  max-width: 75vw;
  width: 100%;


  .doc-search__form {
    align-items: center;
    background-color: var(--search-form-color);
    border-bottom: 1px solid #eeeeee;
    border-bottom: var(--border-default);
    display: flex;
    flex-direction: row;
    padding: calc(4px * 4) calc(4px * 6);
    padding: var(--spacing-4) var(--spacing-6);
    position: sticky;
    top: 0;
    z-index: 1;
  }

  svg {
    flex-shrink: 0;
    width: calc(4px * 4);
    width: var(--spacing-4);
  }

  #query {
    border: 0;
    flex-grow: 1;
    height: auto;
  }

  .esc-button {
    background-color: var(--esc-button-color);
    border: 1px solid #eeeeee;
    border: var(--border-default);
    border-radius: 4px;
    border-radius: var(--border-radius-medium);
    color: var(--category-color);
    font-size: 0.75rem;
    font-size: var(--text-xs);
    height: calc(4px * 6);
    height: var(--spacing-6);
    padding: 4px calc(4px * 2);
    padding: var(--spacing-1) var(--spacing-2);
  }

  .dialog-body {
    padding: calc(4px * 4);
    padding: var(--spacing-4);

    h3 {
      color: var(--category-color);
      font-size: 0.875rem;
      font-size: var(--text-sm);
      font-weight: 600;
      font-weight: var(--font-weight-semibold);
      margin-block-end: 4px;
      margin-block-end: var(--spacing-1);
      text-transform: capitalize;

      &:where(ul + *) {
        margin-top: calc(4px * 5);
        margin-top: var(--spacing-5);
      }
    }

    p {
      margin: 0;
    }

    ul {
      border-left: 1.5px solid #eeeeee;
      border-left: 1.5px solid var(--border-color-default);
      display: flex;
      flex-direction: column;
      list-style-type: none;
      padding-left: calc(4px * 3);
      padding-left: var(--spacing-3);
      row-gap: calc(4px * 2);
      row-gap: var(--spacing-2);
    }
  }

  .list-element {
    background-color: #f9fafb;
    background-color: var(--doc-nested-background-color);
    border: 0;
    flex-direction: column;
    line-height: 1.75;
    margin-bottom: 0;
    min-height: auto;
    padding: calc(4px * 3) calc(4px * 4);
    padding: var(--spacing-3) var(--spacing-4);
    row-gap: calc(4px * 2);
    row-gap: var(--spacing-2);
    transition: background-color ease-out 0.3s;

    &:focus {
      outline: 2px solid #025fd7;
      outline: 2px solid var(--doc-base-color);
    }

    &:hover {
      background-color: var(--search-hover-color);
    }

    h4 {
      align-items: baseline;
      color: var(--category-color);
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      font-size: 1rem;
      font-size: var(--text-base);
      font-weight: 500;
      font-weight: var(--font-weight-medium);
      gap: 4px;
      gap: var(--spacing-1);
      margin: 0;

      strong {
        font-weight: 500;
        font-weight: var(--font-weight-medium);
      }
    }

    .markdown-content {
      display: inline;

      p {
        display: inline;
        line-height: 1.5;
      }
    }

    .result-details {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      margin-top: 4px;
      margin-top: var(--spacing-1);
      text-align: left;
    }

    .content {
      display: flex;
      flex-direction: column;
      row-gap: calc(4px * 2);
      row-gap: var(--spacing-2);

      .title {
        color: #131415;
        color: var(--title-color);
        font-size: 1rem;
        font-size: var(--text-base);
      }
    }

    .result-api-name {
      color: #025fd7;
      color: var(--doc-base-color);
    }

    .extra {
      display: none;
    }
  }

  :is(.dark-theme *) {
    --category-color: var(--gray-40);
    --search-hover-color: var(--slate-70);
    --search-form-color: var(--gray-90);
    --esc-button-color: var(--gray-70);
  }
}
input[type="search"]::-webkit-search-cancel-button {
  display: none;
}
.search-button {
  --button-color-hover: var(--doc-code-background-color, var(--gray-10));
  border: 1px solid #eeeeee;
  border: var(--border-default);
  max-width: 400px;
  padding: calc(4px * 2) calc(4px * 4);
  padding: var(--spacing-2) var(--spacing-4);
  margin-right: auto;
  flex-grow: 1;
  margin-block-end: 0;
  order: -1;

  @media (max-width: 849.98px) {
    flex-grow: 1;
    margin-block-end: calc(4px * 3);
    margin-block-end: var(--spacing-3);
    margin-inline-end: auto;
  }
}
.doc-search_v2__dialog {
  --category-color: var(--gray-50);
  --search-hover-color: var(--slate-10);
  --search-form-color: var(--bg-color);
  --esc-button-color: var(--doc-nested-background-color);

  background: #ffffff;

  background: var(--bg-color);
  container: dialog / inline-size;
  font-size: 0.875rem;
  font-size: var(--text-sm);
  margin-top: calc(4px * 10);
  margin-top: var(--spacing-10);
  max-height: calc(100vh - calc(4px * 20));
  max-height: calc(100vh - var(--spacing-20));
  max-width: 75vw;
  width: 100%;

  p {
    margin: 0
  }

  .doc-search_v2__form {
    align-items: center;
    background-color: var(--search-form-color);
    border-bottom: 1px solid #eeeeee;
    border-bottom: var(--border-default);
    display: flex;
    flex-direction: row;
    padding: calc(4px * 4) calc(4px * 6);
    padding: var(--spacing-4) var(--spacing-6);
    position: sticky;
    top: 0;
    z-index: 1;
  }

  svg {
    flex-shrink: 0;
    width: calc(4px * 4);
    width: var(--spacing-4);
  }

  #query {
    border: 0;
    flex-grow: 1;
    height: auto;
    font-weight: 500;
    font-weight: var(--font-weight-medium);
  }

  .esc-button {
    background-color: var(--esc-button-color);
    border: 1px solid #eeeeee;
    border: var(--border-default);
    border-radius: 4px;
    border-radius: var(--border-radius-medium);
    color: var(--category-color);
    font-size: 0.75rem;
    font-size: var(--text-xs);
    height: calc(4px * 6);
    height: var(--spacing-6);
    padding: 4px calc(4px * 2);
    padding: var(--spacing-1) var(--spacing-2);
  }

  .no-results-container {
    padding: calc(4px * 4) calc(4px * 6);
    padding: var(--spacing-4) var(--spacing-6);
  }

  .dialog-body {
  }

  .doc-search_v2__more-results {
    padding: 0 calc(4px * 4) calc(4px * 6);
    padding: 0 var(--spacing-4) var(--spacing-6);
  }

  .doc-search_v2__more-results:not(.hidden) {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  :is(.dark-theme *) {
    --category-color: var(--gray-40);
    --search-hover-color: var(--slate-70);
    --search-form-color: var(--gray-90);
    --esc-button-color: var(--gray-70);
  }

  .doc-search_v2__dialog_footer{
    bottom: 0;
    left: 0;
    right: 0;
    padding: calc(4px * 4) calc(4px * 6);
    padding: var(--spacing-4) var(--spacing-6);
    font-family: Avenir Next, -apple-system, system-ui, "Helvetica Neue",
    "Segoe UI", Oxygen, Ubuntu, Cantarell, "Open Sans", sans-serif;
    font-family: var(--font-family);
    font-weight: 500;
    font-weight: var(--font-weight-medium, 500);
    font-size: 0.875rem;
    font-size: var(--text-sm);
    background-color: #ffffff;
    background-color: var(--bg-color);
    position: sticky;
    z-index: 1;
    box-sizing: border-box;
    transition: background-color ease-out 0.3s;

    .keyboard-key {
      box-sizing: border-box;
      background: #f9fafb;
      background: var(--bg-color-light);
      padding-inline: calc(4px - calc(4px * 0.25));
      padding-inline: calc(var(--spacing-1) - var(--spacing-px));
      border: 1px solid #eeeeee;
      border: 1px solid var(--bg-color-secondary);
      border-radius: 4px;
      border-radius: var(--border-radius-medium);
      color: #6a6c6d;
      color: var(--text-color-secondary);
      display: flex;
      align-items: center;
      justify-content: center;
      height: calc(4px * 6);
      height: var(--spacing-6);
      font-size: 0.75rem;
      font-size: var(--text-xs);

       /* Styles for textes (ENTER, ESC) */
       &:not(:has(svg)) {
         padding-inline: calc(calc(4px * 2) + calc(4px * 0.5));
         padding-inline: calc(var(--spacing-2) + var(--spacing-05));
       }

       svg {
         color: #6a6c6d;
         color: var(--text-color-secondary);
       }
     }

    /* Background change based on tutorial state */
    &:has([data-doc-search-v2-target="keyboardNavigationTutorial"]:not(.hidden)) {
      background-color: #f9fafb;
      background-color: var(--bg-color-light);
      padding-block: calc(4px * 2);
      padding-block: var(--spacing-2);
      border-top: 1px solid #eeeeee;
      border-top: 1px solid var(--border-color-default);
    }

    p[data-doc-search-v2-target="keyboardNavigationTutorial"] {
      display: flex;
      align-items: center;
      gap: calc(4px * 2);
      gap: var(--spacing-2);
    }

    /* Override hidden class for keyboard navigation tutorial to preserve flex display */
    p[data-doc-search-v2-target="keyboardNavigationTutorial"].hidden {
      display: none;
    }
  }

  @media (max-width: 849.98px) {
    .doc-search_v2__dialog_footer {
      &:has([data-doc-search-v2-target="keyboardNavigationTutorial"]:not(.hidden)) {
        display: none;
      }
    }
  }

  ul.doc-search_v2__results-list {
    padding: calc(4px * 4) calc(4px * 6);
    padding: var(--spacing-4) var(--spacing-6);

    .search_v2__results-list-item:last-child {
      border-bottom: none;
    }

    .search_v2__results-list-item:first-child {
      padding-block-start: 0;
    }
  }

  .search_v2__results-list-item {
    display: block;
    border-bottom: 1px solid #eeeeee;
    border-bottom: 1px solid var(--border-color-default);
    padding-block: calc(4px * 4);
    padding-block: var(--spacing-4);

    .result-link {
      -moz-column-gap: calc(4px * 4);
           column-gap: calc(4px * 4);
      -moz-column-gap: var(--spacing-4);
           column-gap: var(--spacing-4);
      flex-wrap: wrap;
      border-radius: 4px;
      border-radius: var(--border-radius-medium);
      align-items: stretch;
      flex-direction: column;
      margin-bottom: 0;
      min-height: auto;
      row-gap: calc(4px * 2);
      row-gap: var(--spacing-2);
      transition: background-color ease-out 0.3s;
      display: flex;
      gap: calc(4px * 2);
      gap: var(--spacing-2);
      min-width: 0;

      &:focus {
        border: 1px solid #025fd7;
        border: 1px solid var(--doc-base-color);
        border-radius: 4px;
        border-radius: var(--spacing-1);
        padding: calc(4px * 2);
        padding: var(--spacing-2);
        margin: calc(calc(4px * -0.25) + calc(4px * -2));
        margin: calc(var(--spacing-px-minus) + var(--spacing-2-minus));
      }
    }

    .search-flex-row {
      display: flex;
      flex-direction: row;
      gap: calc(4px * 2);
      gap: var(--spacing-2);
      align-items: baseline;
    }

    .result-breadcrumbs {
      color: #6A6C6D;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: calc(4px * 2);
      gap: var(--spacing-2);
    }

    .result-breadcrumbs-last {
      color: #424344;
    }

    .result-breadcrumbs-caret {
      display: inline-flex;
      align-items: center;
      flex-shrink: 0;

      svg {
        width: -moz-fit-content;
        width: fit-content;
      }
    }

    .result-node-type {
      margin-left: 4px;
      margin-left: var(--spacing-1);
    }

    .result-api-type,
    .result-node-type {
      color: #424344;
      font-family: Avenir Next, -apple-system, system-ui, "Helvetica Neue",
    "Segoe UI", Oxygen, Ubuntu, Cantarell, "Open Sans", sans-serif;
      font-family: var(--font-family);
      font-size: 10px;
      font-style: normal;
    }

    .result-description {
      color: #424344;
      font-size: 14px;
      min-width: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
    }

    .result-api-name {
      font-family: Avenir Next, -apple-system, system-ui, "Helvetica Neue",
    "Segoe UI", Oxygen, Ubuntu, Cantarell, "Open Sans", sans-serif;
      font-family: var(--font-family);
      font-style: normal;
      font-weight: 500;
      font-size: 12px;
      display: flex;
      align-items: center;
      color: #025FD7;
      flex: none;
      order: 0;
      flex-grow: 0;
    }

    .result-label {
      padding: 0 4px;
      padding: 0 var(--spacing-1);
      border-radius: 4px;
      border-radius: var(--border-radius-medium);
      display: flex;
      align-items: center;
      font-size: 0.75rem;
      font-size: var(--text-xs);
      font-weight: 500;
      font-weight: var(--font-weight-medium);
    }

    .result-path-label {
      height: calc(4px * 7);
      height: var(--spacing-7);
      display: flex;
      align-items: center;
      gap: calc(4px * 2);
      gap: var(--spacing-2);
    }
  }

  .result-path {
    color: #424344;
    font-size: 12px;
  }

  .search-highlight {
    font-weight: 700;
  }

  .show-more-button {
    background-color: #f9fafb;
    background-color: var(--panel-bg-color);
    border: 1px solid #eeeeee;
    border: var(--border-default);
    border-radius: calc(calc(4px * 24) + 4px);
    border-radius: calc(var(--spacing-24) + var(--spacing-1));
    color: #424344;
    color: var(--text-color);
    cursor: pointer;
    height: auto;
    font-size: 0.875rem;
    padding: calc(4px + calc(4px * 0.5)) calc(4px * 3);
    padding: calc(var(--spacing-1) + var(--spacing-05)) var(--spacing-3);
    transition: background-color ease-out 0.1s;
    transition: var(--theme-change-transition);
    z-index: 1;
  }

  .show-more-button:hover {
    background-color: #eeeeee;
    background-color: var(--bg-color-secondary);
  }
}
.anchor-link svg,
.dismiss-highlight {
  border: 1px solid #eeeeee;
  border: var(--border-default);
  border-radius: 4px;
  border-radius: var(--border-radius-medium);
  height: calc(4px * 5);
  height: var(--spacing-5);
  left: calc(4px * -8);
  left: var(--spacing-8-minus);
  position: absolute;
  right: calc(4px * -8);
  right: var(--spacing-8-minus);
  width: calc(4px * 5);
  width: var(--spacing-5);
  z-index: 1;
  padding: 0;
}
.dismiss-highlight {
  background: #ffffff url(https://bump.sh/packs/static/link-gray-fed5d37d28d4745e32f5.svg) center center no-repeat;
  background: var(--bg-color) url(https://bump.sh/packs/static/link-gray-fed5d37d28d4745e32f5.svg) center center no-repeat;
  background-size: 75%;
}
.anchor-link {
  position: relative;

  &:is(.doc-section-title > *) {
    align-items: center;
    display: flex;
    svg {
      top: calc(calc(4px * 1.5) + calc(4px * 0.25));
      top: calc(var(--spacing-1-5) + var(--spacing-px));
    }
  }

  &:is(.dot-success > *),
  &:is(.dot-error > *) {
    svg {
      left: calc(calc(4px * -11) + calc(4px * 0.25));
      left: calc(var(--spacing-11-minus) + var(--spacing-px));
    }
  }

  svg {
    opacity: 0;
    padding: calc(4px * 0.5);
    padding: var(--spacing-05)
  }

  &:is(.operation-title:has(.button) > *):hover svg {
    top: 0;
  }

  &:hover svg {
    opacity: 1;
  }

  &:is(.expandable-properties-list *) {
    svg {
      left: calc(4px * -9);
      left: var(--spacing-9-minus);
    }
  }
}
.highlight-container {
  position: relative;

  &:is(.markdown-content *) {
    width: -moz-fit-content;
    width: fit-content;
  }

  .dismiss-highlight {
    display: none;
    text-indent: calc(infinity * -1px);
    transform: rotate(90deg);
    z-index: 2;

    &:hover {
      border-color: #4c555a;
      border-color: var(--input-border-color-hover);
    }

    &:is(.highlight-container.shared > *) {
      display: block;
    }

    &:is(.highlight-container.shared:hover > *) {
      background: #ffffff url(https://bump.sh/packs/static/highlight-cross-cc47fdab793218f0aec7.svg) 1px 1px;
      background: var(--bg-color) url(https://bump.sh/packs/static/highlight-cross-cc47fdab793218f0aec7.svg) 1px 1px;
    }

    &:is(.combinator > *) {
      top: calc(4px * 2);
      top: var(--spacing-2);
    }

    &:is(details .combinator > *) {
      left: calc(4px * -9);
      left: var(--spacing-9-minus);
    }

    &:is(.markdown-content *) {
      top: 0;
    }

    &:is(.changelog-event > *) {
      top: calc(4px * 14);
      top: var(--spacing-14);
    }

    &:is(.expandable-properties-list *) {
      left: calc(4px * -6);
      left: var(--spacing-6-minus);
    }
  }

  &.shared {
    &::after {
      --padding-block: var(--spacing-4);
      --padding-inline: var(--spacing-6);
      border: 1.5px solid color-mix(in srgb, #025fd7, transparent 50%);
      border-radius: 4px;
      border-radius: var(--border-radius-medium);
      bottom: calc(calc(4px * 4) * -1);
      bottom: calc(var(--padding-block) * -1);
      box-sizing: content-box;
      content: "";
      display: block;
      left: calc(calc(4px * 6) * -1);
      left: calc(var(--padding-inline) * -1);
      padding: calc(4px * 4) calc(4px * 6);
      padding: var(--padding-block) var(--padding-inline);
      pointer-events: none;
      position: absolute;
      top: calc(calc(4px * 4) * -1);
      top: calc(var(--padding-block) * -1);
      width: 100%;
    }

@supports (color: color-mix(in lch, red, blue)) {
&::after {
      border: 1.5px solid color-mix(in srgb, var(--doc-base-color), transparent 50%);
    }
}

    &:has(.attributes .dropdown.content-type) .dismiss-highlight {
      top: calc(calc(4px * 4) + calc(4px * 0.5));
      top: calc(var(--spacing-4) + var(--spacing-05));
    }

    &:has(.anchor-link:is(h3.properties-list-title > *)) .dismiss-highlight {
      top: 0px !important;
    }

    &.properties-list::after {
      padding-bottom: 0;
    }

    &.property::after {
      --padding-block: 0;
      bottom: 0;
      top: -1px;
    }

    &.combinator::after {
      --padding-block: 0;
      bottom: calc(4px * -6);
      bottom: var(--spacing-6-minus);
      top: 0;
    }

    &.combinator:is(details *)::after {
      bottom: calc(calc(4px * 4) * -1);
      bottom: calc(var(--spacing-4) * -1);
      top: calc(4px * -1);
      top: var(--spacing-1-minus);
    }

    &.combinator:is(details *)::after {
      bottom: calc(4px * -3);
      bottom: var(--spacing-3-minus);
      top: calc(4px * -1);
      top: var(--spacing-1-minus);
      left: calc(4px * -6);
      left: var(--spacing-6-minus);
      padding-inline: calc(4px * 6);
      padding-inline: var(--spacing-6);
    }

    &:is(.expandable-properties-list *)::after {
      left: -15px;
      padding-inline: 14px;
    }
  }
}
@media (max-width: 850px) {
  .highlight-container {
    &.shared {
      &::after {
        padding-inline: calc(4px * 3);
        padding-inline: var(--spacing-3);
        left: calc(calc(4px * 3) * -1);
        left: calc(var(--spacing-3) * -1);
      }
    }
  }

  .dismiss-highlight,
  .anchor-link svg {
    left: calc(4px * -5);
    left: var(--spacing-5-minus);
  }

  .anchor-link {
    a {
      inset: 0;
    }

    &:is(.dot-success > *),
    &:is(.dot-error > *) {
      svg {
        left: calc(calc(4px * -8) + calc(4px * 0.25));
        left: calc(var(--spacing-8-minus) + var(--spacing-px));
      }
    }
  }
}
operation-summary {
  --verb-size: var(--text-sm);
  --path-line-height: var(--spacing-8);
  color: #131415;
  color: var(--title-color);
  display: flex;
  align-items: baseline;
  -moz-column-gap: calc(4px * 2);
       column-gap: calc(4px * 2);
  -moz-column-gap: var(--spacing-2);
       column-gap: var(--spacing-2);
  overflow-wrap: anywhere;

  &[data-summary-size="small"] {
    --verb-size: var(--text-xxs);
    --path-line-height: 1.5;
  }

  .operation-verb {
    font-size: var(--verb-size);
  }

  .operation-path {
    line-height: var(--path-line-height);
  }
}
portal-example {
  --example-color: var(--gray-10);
  --example-header-color: color-mix(in srgb, var(--example-color), var(--blue-70) 10%);
  --example-button-icon: url(https://bump.sh/packs/static/copy-example-663fb4ae9b1fd5792372.svg);
  container-type: inline-size;
  color: var(--example-text-color);

  &:not([data-example-theme="custom"]):is(.dark-theme *) {
    --example-color: var(--gray-90);
    --example-header-color: var(--slate-90);
    --example-button-icon: url(https://bump.sh/packs/static/copy-example-white-bb6ac4ca3cd583839f0d.svg);
  }

  &:is([data-example-theme="dark"]):is(.dark-theme *) {
    --example-color: var(--gray-80);
    --example-header-color: var(--gray-90);
  }

  &:not([hidden]) {
    display: flex;
    flex-direction: column;
  }

  &.code-sample {
    z-index: 15;
  }

  header {
    align-items: center;
    background-color: var(--example-header-color);
    border-radius: 4px 4px 0 0;
    border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0;
    display: flex;
    gap: calc(4px * 2);
    gap: var(--spacing-2);
    justify-content: space-between;
    font-size: 0.875rem;
    font-size: var(--text-sm);
    padding: calc(4px * 3);
    padding: var(--spacing-3);
    position: relative;
    top: 0;

    &:only-child {
      border-radius: 4px;
      border-radius: var(--border-radius-medium);
    }

    .title {
      display: flex;
      flex-grow: 1;
      gap: 4px calc(4px * 2);
      gap: var(--spacing-1) var(--spacing-2);
      justify-content: space-between;
      max-width: 90%;
    }

    span[dir="rtl"] {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-inline-start: auto;
    }

    .dropdown {
      position: static;
      position: initial;
    }

    .dropdown-title {
      gap: calc(4px * 2);
      gap: var(--spacing-2);
      padding-block: 0;
      height: auto;
      padding: 0;
    }

    .menu-dropdown {
      right: calc(4px * 2);
      right: var(--spacing-2);

      &:is(.dropdown[aria-expanded="true"] *) {
        top: calc(100% - calc(4px * 2));
        top: calc(100% - var(--spacing-2));
      }

      a {
        gap: calc(4px * 3);
        gap: var(--spacing-3);
        max-width: calc(100cqi - calc(4px * 9));
        max-width: calc(100cqi - var(--spacing-9));

        &::after {
          flex-shrink: 0;
        }
      }

      span {
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    .copy, .copy:hover {
      background: var(--example-button-icon) center center no-repeat;
      border: 0;
      aspect-ratio: 1 / 1;
      height: calc(4px * 5);
      height: var(--spacing-5);
      padding: 0;
    }

    .button, .button:hover {
      color: currentColor;
    }
  }



  .placeholder {
    padding: calc(4px * 3);
    padding: var(--spacing-3);
  }

  .example-body {
    background-color: var(--example-color);
    border-radius: 0 0 4px 4px;
    border-radius: 0 0 var(--border-radius-medium) var(--border-radius-medium);
    height: 100%;
    overflow: auto;
    scrollbar-color: var(--example-header-color) transparent;
  }

  .example-content {
    height: 100%;
    padding: calc(4px * 3);
    padding: var(--spacing-3);

    pre {
      flex-grow: 1;
      font-size: 0.75rem;
      font-size: var(--text-xs);
      margin: 0;

      code {
        color: currentColor;
        overflow: visible;
        overflow: initial;
      }
    }

    :is([data-doc-examples-target="example"]) {
      display: none;

      &.active,
      &:only-child {
        display: inline;
        display: initial;
      }
    }

    .language-curl::before {
      content: "$ ";
    }
  }

  &[data-example-theme="dark"],
  &[data-example-theme="custom"] {
    --example-button-icon: url(https://bump.sh/packs/static/copy-example-white-bb6ac4ca3cd583839f0d.svg);
    --example-text-color: var(--white);

    code > span {
      font-weight: 600;
      font-weight: var(--font-weight-semibold);
    }
  }

  &[data-example-theme="dark"] {
    --example-color: var(--gray-70);
    --example-header-color: var(--gray-80);

    code.hljs [class^="hljs-"] {
      color: #131415;
      color: var(--black);
      font-weight: 600;
    }
  }

  &[data-example-theme="custom"] {
    --example-color: var(--doc-base-color, var(--base-color));
    --example-header-color: color-mix(in srgb, var(--example-color), var(--gray-70) 65%);

    /* hack to turn the text to white or black depending on the background color */
    pre:not(:has(code.hljs)),
    /* fix to make it work under safari */
    code.hljs {
      color: var(--example-color, var(--example-text-color));
      filter: invert(1) grayscale(1) contrast(9000);
      -moz-osx-font-smoothing: grayscale;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
      mix-blend-mode: luminosity;
    }

    code.hljs {
      --doc-code-color: var(--black);

      [class^="hljs-"] {
        color: currentColor;
        font-weight: 600;
      }
    }
  }

  .example-description {
    --symbol-padding: 1em;
    margin-block-end: calc(4px * 3);
    margin-block-end: var(--spacing-3);
    padding-inline-start: 1em;
    padding-inline-start: var(--symbol-padding);
    position: relative;

    &::before {
      content: "##############################################################";
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      width: var(--symbol-padding);
      overflow-y: hidden;
      overflow-wrap: anywhere;
    }

    &.language-json::before {
      content: "//////////////////////////////////////////////////////////////";
    }

    &.language-xml::before {
      content: "<!--";
    }

    &.language-xml {
      --symbol-padding: 2em;
      padding-inline-start: 2em;

      &::after {
        content: "-->";
      }
    }
  }
}
portal-example.explorer-example.response header .title {
  max-width: 100%;
}
.property-container {
  display: flex;
  flex-direction: column;
  row-gap: calc(4px * 3);
  row-gap: var(--spacing-3);

  > button.add {
    display: none;
    align-self: start;
  }

  .property:first-child:not(:only-of-type, :has(input)) {
    display: none;
  }

  .property:first-child:has(input) ~ button.add {
    display: revert;
  }

  button {
    height: auto;
  }

  button.add {
    width: 100%;

    &:where(.property + *) {
      display: revert;
    }
  }

  button.remove {
    color: #424344;
    color: var(--text-color);
    margin-inline-start: auto;
  }

  .attributes {
    display: flex;
  }

  input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(0%) sepia(0%) saturate(0%) brightness(100%) contrast(100%);
    filter: var(--date-time-indicator-color);
  }
}
#response-dialog {
  --dialog-width: 960px;
  --dialog-height: 720px;
  border-radius: 4px;
  border-radius: var(--border-radius-medium);
  height: min(720px, calc(100% - 64px));
  height: min(var(--dialog-height), calc(100% - 64px));
  width: min(960px, calc(100% - 64px));
  width: min(var(--dialog-width), calc(100% - 64px));

  portal-example {
    height: 100%;
  }

  header .expand {
    display: none;
    pointer-events: none;
  }

  header .close-dialog svg {
    height: 14px;
    position: relative;
    top: -1px;
  }
}
.doc-section-examples.multi-servers {
  overflow: visible;
  overflow: initial;

  .example-body {
    overflow: visible;
    overflow: initial;
  }

  .example-content {
    align-items: stretch;
    display: flex;
    overflow: visible;
    overflow: initial;
    padding: 0;

    pre {
      overflow-x: auto;
      padding: calc(4px * 3);
      padding: var(--spacing-3);
    }

    .dropdown {
      background: rgba(19, 20, 21, 0.1);
      background: rgba(var(--black-rgb), 0.1);
    }

    .dropdown-title {
      color: #ffffff;
      color: var(--white);
      padding: calc(4px * 3);
      padding: var(--spacing-3);
    }

    .server-name {
      color: #ffffff;
      color: var(--white);
      font-size: 0.75rem;
      max-width: calc(4px * 24);
      max-width: var(--spacing-24);
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .dropdown[aria-expanded="true"] .menu-dropdown {
      left: 0;
      top: 120%;
    }
  }
}
@media (max-width: 500px) {
  .doc-example .dropdown-title {
    padding: 0;
  }
}
#api-key-form {
  background-color: #ffffff;
  background-color: var(--bg-color);
  border: 1px solid #eeeeee;
  border: var(--border-default);
  border-radius: 4px;
  border-radius: var(--border-radius-medium);
  display: flex;
  flex-direction: column;
  gap: calc(4px * 2);
  gap: var(--spacing-2);
  padding: calc(4px * 4);
  padding: var(--spacing-4);
  position: relative;
  margin: calc(4px * 5) 0 calc(4px * 3) 0;
  margin: var(--spacing-5) 0 var(--spacing-3) 0;

  &::after {
    content: "";
    display: inline-block;
    height: 100%;
    width: 100%;
    border-radius: 4px;
    border-radius: var(--border-radius-medium);
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }

  &:has(.form-content[aria-hidden=true]) {
    .dropdown {
      pointer-events: none;
    }

    .dropdown-title svg {
      display: none;
    }
  }

  &[data-form-highlight=true]::after {
    background-color: color-mix(in oklch, #025fd7, transparent 30%);
    opacity: 0;
    transform: scaleX(1.05) scaleY(1.25);
    transition: all cubic-bezier(0.215, 0.61, 0.355, 1) 1s;
  }

@supports (color: color-mix(in lch, red, blue)) {
&[data-form-highlight=true]::after {
    background-color: color-mix(in oklch, var(--doc-base-color), transparent 30%);
  }
}

  .auth-form-header {
    display: flex;
    flex-direction: row;
    gap: calc(4px * 2);
    gap: var(--spacing-2);
    justify-content: space-between;
    position: relative;
    align-items: center;

    .title-content {
      display: flex;
      gap: calc(4px * 2);
      gap: var(--spacing-2);
      align-items: center;
      max-width: 100%;

      .dropdown{
        min-width: 0;
      }

      .dropdown-title {
        gap: calc(4px * 2);
        gap: var(--spacing-2);
      }

      [data-dropdown-target="current"] {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }

    .filled {
      color: #008a64;
      color: var(--medium-green);
    }

    .empty {
      color: #ee6237;
      color: var(--bright-orange);
    }

    @media (max-width: 500px) {
      flex-direction: column;
      align-items: flex-start;
    }
  }

  .form-content {
    display: flex;
    flex-direction: column;
    gap: calc(4px * 2);
    gap: var(--spacing-2);
  }

  .password-input {
    display: flex;
    align-items: center;
    position: relative;
  }

  .dropdown-title {
    @media (max-width: 500px) {
      padding: 4px 0;
      padding: var(--spacing-1) 0;
    }
  }

  .title {
    font-weight: 600;
    font-weight: var(--font-weight-semibold);
    display: flex;
    font-size: 0.875rem;
    max-width: -moz-max-content;
    max-width: max-content;

    span[data-explorer-select-auth-scheme-target="authSchemeLabel"]{
      font-size: 0.875rem;
      max-width: -moz-max-content;
      max-width: max-content;
    }
  }

  a {
    text-decoration: underline;
  }

  .description {
    display: flex;
    align-items: center;
    justify-content: space-between;

    @media (max-width: 500px) {
      flex-direction: column;
      align-items: flex-end;
      gap: calc(4px * 2);
      gap: var(--spacing-2);
    }
  }

  input[type="text"] {
    width: 100%;
  }

  .actions {
    display: flex;
    align-items: center;
    gap: calc(4px * 3);
    gap: var(--spacing-3);
  }

  button[data-access-token-target] {
    color: currentColor;
    position: absolute;
    right: calc(4px * 5);
    right: var(--spacing-5);
  }

  .menu-dropdown {
    width: 100%;

    li {
      overflow: hidden;
    }

    button[data-button-style="naked"] {
      width: 100%;

      span {
        width: 90%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        text-align: left;
      }
    }

    svg{
      display: none;

      &:is(li[aria-selected] *) {
        display: block;
        width: auto;
        width: initial;
        height: auto;
        height: initial;
      }
    }
  }
}
/* Hide all os-*-only classes by default */
.os-mac-only, os-other-only {
  display: none;
}
/* Display os-other-only classes, if os-other is present */
.os-other {
  span.os-other-only {
    display: inline-block;
  }

  span.os-mac-only {
    display: none;
  }
}
/* Display os-mac-only classes, if os-mac is present */
.os-mac {
  span.os-other-only {
    display: none;
  }

  span.os-mac-only {
    display: inline-block;
  }
}
external-link a.button {
  white-space: normal;
  text-align: left;
  line-height: normal;
}
pre.mermaid p {
  color: inherit;
}
.explorer-doc {
  --side-padding: var(--spacing-12);

  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  width: 50vw;
  z-index: 20;
  background: #ffffff;
  background: var(--bg-color);
  border-inline-start: 1px solid #eeeeee;
  border-inline-start: var(--border-default);
  box-shadow: 0 1px 15px rgba(27, 31, 35, 0.15);
  box-shadow: var(--box-shadow-base);
  transition: all 0.5s ease;

  &:not([data-toggle-active=true]) {
    opacity: 0;
    transform: translateX(100%);
  }

  &[data-toggle-active=true] {
    display: block;
    opacity: 1;
    transform: translateX(0);
  }

  turbo-frame {
    display: block;
    height: 100%;
    overflow: auto;
    padding: calc(4px * 5) var(--side-padding);
    padding: var(--spacing-5) var(--side-padding);
  }

  .close-doc {
    color: currentColor;
    position: fixed;
    right: var(--side-padding);
    top: calc(4px * 6);
    top: var(--spacing-6);
    z-index: 10;
  }

  .property {
    scroll-margin-top: calc(4px * 4);
    scroll-margin-top: var(--spacing-4);
  }

  /* TODO: remove in views depending on explorer context */
  .operation-header,
  .doc-section-examples,
  .content-type {
    display: none;
  }

  @media (max-width: 849.98px) {
    --side-padding: var(--spacing-6);
    width: 100vw;
  }
}
portal-example.request {
  position: relative;

  .example-content {
    height: auto;
    padding: 0;
    padding-block-end: calc(4px * 12);
    padding-block-end: var(--spacing-12);
  }

  pre code {
    padding: calc(4px * 3);
    padding: var(--spacing-3);
  }

  .preview-buttons {
    display: flex;
    justify-content: end;
    -moz-column-gap: calc(4px * 3);
         column-gap: calc(4px * 3);
    -moz-column-gap: var(--spacing-3);
         column-gap: var(--spacing-3);
    position: absolute;
    bottom: calc(4px * 3);
    bottom: var(--spacing-3);
    right: calc(4px * 3);
    right: var(--spacing-3);
    background: var(--example-color);

    button:first-child {
      --button-color: var(--example-color);
    }

    @media (max-width: 849.98px) {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      padding: calc(4px * 3) calc(4px * 6);
      padding: var(--spacing-3) var(--spacing-6);
      background-color: #ffffff;
      background-color: var(--bg-color);
      border-block-start: 1px solid #eeeeee;
      border-block-start: var(--border-default);
      z-index: 5;

      button:first-child {
        --button-color: transparent;
        --button-color-hover: transparent;
        --button-border-color: var(--border-color-default);
        --button-border-color-hover: var(--text-color);
        --button-text-color: var(--text-color);
        --button-text-color-hover: var(--text-color);
      }
    }

    @media (max-width: 499.98px) {
      button {
        flex-grow: 1;
      }
    }
  }
}
portal-example.response {
  .banner {
    --banner-color: var(--gray-20);
    display: inline-block;
    background-color: #eeeeee;
    background-color: var(--banner-color);
    border-color: #aab0b6;
    border-color: var(--gray-40);
    margin-block-end: calc(4px * 3);
    margin-block-end: var(--spacing-3);

    &:is(.dark-theme *) {
      --banner-color: var(--gray-80);
    }
  }

  [data-status-code] {
    --response-bg-color: var(--bg-color-warning);
    --response-text-color: var(--text-color-warning);

    background-color: #fef4e8;

    background-color: var(--response-bg-color);
    border: 1px solid
      color-mix(in srgb, #df9136, transparent 90%);
    border-radius: calc(4px * 10);
    border-radius: var(--border-radius-round);
    color: #df9136;
    color: var(--response-text-color);
    font-size: 0.75rem;
    font-size: var(--text-xs);
    display: flex;
    gap: 4px;
    gap: var(--spacing-1);
    align-items: center;
    margin-inline-end: auto;
    padding-inline: calc(4px * 2);
    padding-inline: var(--spacing-2);

    &::before {
      content: "•";
    }

    &:empty {
      display: none;
    }

    &[data-status-code^="1"] {
      --response-bg-color: var(--bg-color-neutral);
      --response-text-color: var(--text-color-neutral);
    }

    &[data-status-code^="2"] {
      --response-bg-color: var(--bg-color-success);
      --response-text-color: var(--text-color-success);
    }

    &[data-status-code^="3"] {
      --response-bg-color: var(--bg-color-extra);
      --response-text-color: var(--text-color-extra);
    }

    &[data-status-code^="4"] {
      --response-bg-color: var(--bg-color-warning);
      --response-text-color: var(--text-color-warning);
    }

    &[data-status-code^="5"] {
      --response-bg-color: var(--bg-color-error);
      --response-text-color: var(--text-color-error);
    }
  }

@supports (color: color-mix(in lch, red, blue)) {
[data-status-code] {
    border: 1px solid
      color-mix(in srgb, var(--response-text-color), transparent 90%)
  }
}

  .object-container {
    display: none;

    &:not(:empty) {
      display: block;
    }
  }
}
portal-explorer {
  font-size: 0.875rem;
  font-size: var(--text-sm);

  .explorer-content {
    @media (max-width: 850px) {
      grid-template-columns: 1fr min(var(--wrapper-width), calc(100% - 48px)) 1fr;
      padding-block: 0 calc(4px * 16);
      padding-block: 0 var(--spacing-16);
      scroll-padding-top: 7.9rem;
      z-index: -1;
    }

    .doc-section-title {
      margin-block-end: calc(4px * 4);
      margin-block-end: var(--spacing-4);
    }

    .doc-section--column {
      row-gap: 0;
    }

    [data-controller="clearable-form"]:not(.clearable) .clear-form-link {
      display: none;
    }

    .properties-list-header {
      border-block-end: 1px solid #eeeeee;
      border-block-end: var(--border-default);
      display: flex;
      flex-direction: column;
      gap: calc(4px * 3);
      gap: var(--spacing-3);
      padding-block-end: calc(4px * 3);
      padding-block-end: var(--spacing-3);

      &:not(:first-of-type) {
        margin-block-start: calc(4px * 8);
        margin-block-start: var(--spacing-8);
      }
    }

    .properties-list-content {
      -moz-column-gap: calc(4px * 2);
           column-gap: calc(4px * 2);
      -moz-column-gap: var(--spacing-2);
           column-gap: var(--spacing-2);
      justify-content: start;
    }

    .properties-list {
      --even-level-color: var(--doc-base-color);
      --odd-level-color: var(--purple-60);

      ul {
        border: 0;
        padding-block: calc(4px * 3);
        padding-block: var(--spacing-3);
        display: flex;
        flex-direction: column;
        gap: calc(4px * 3);
        gap: var(--spacing-3);
      }

      :where(.property) {
        border: 0;
        gap: calc(4px * 2);
        gap: var(--spacing-2);
        padding: 0;

        select {
          margin: 0;
        }
      }

      :where(.properties-list) {
        border-inline-start: 1px solid #eeeeee;
        border-inline-start: 1px solid var(--border-color-default);
        padding-inline-start: calc(4px * 6);
        padding-inline-start: var(--spacing-6);

        ul {
          padding: 0;
        }
      }

      &:is([data-tabs-target="panel"] > *) {
        border: 0;
        padding: 0;
      }
    }

    .operation-section {
      flex-grow: 1;
      display: grid;
      grid-template-columns: repeat(2, calc(50% - calc(4px * 6)));
      grid-template-columns: repeat(2, calc(50% - var(--spacing-6)));
      grid-gap: calc(4px * 12);
      grid-gap: var(--spacing-12);
      gap: calc(4px * 12);
      gap: var(--spacing-12);
      position: relative;

      > .flex-column {
        padding-block-end: calc(4px * 17);
        padding-block-end: var(--spacing-17);
      }

      @media (max-width: 850px) {
        display: flex;
        flex-direction: column;
      }

      .properties-list-header {
        margin-block-start: calc(4px * 5);
        margin-block-start: var(--spacing-5);
      }
    }

    .operation-header {
      gap: calc(4px * 4);
      gap: var(--spacing-4);
      padding-block-end: calc(4px * 3);
      padding-block-end: var(--spacing-3);
    }

    .operation-header-content {
      display: flex;
      align-items: baseline;
      justify-content: space-between;

      @media (max-width: 500px) {
        flex-direction: column;
        gap: calc(4px * 3);
        gap: var(--spacing-3);
      }
    }

    .operation-title {
      font-size: 1.5em;
      font-weight: 500;
      font-weight: var(--font-weight-medium);
      margin: 0;
      display: flex;
      flex-wrap: wrap;
      gap: calc(4px * 3);
      gap: var(--spacing-3);
      align-items: center;
      justify-content: space-between;
    }

    .request-preview {
      .sticky-scrollable {
        min-height: calc(100vh - calc(4px * 40));
        min-height: calc(100vh - var(--spacing-40));
        padding-block-end: calc(4px * 4);
        padding-block-end: var(--spacing-4);
        top: calc(calc(4px * 38) + 0px);
        top: calc(var(--spacing-38) + var(--body-top));

        &::after {
          position: fixed;
          bottom: 0;
        }

        @media (max-width: 850px) {
          min-height: revert;
        }
      }

      copy-field {
        white-space: nowrap;

        span {
          overflow-x: hidden;
          padding-block: 4px;
          padding-block: var(--spacing-1);
          text-overflow: ellipsis;
        }
      }
    }

    .attribute-container {
      display: flex;
      flex-direction: column;
      row-gap: calc(4px * 6);
      row-gap: var(--spacing-6);
    }

    .attributes {
      display: flex;
      flex-wrap: wrap;

      > .remove {
        align-self: center;
        margin-inline-start: 4px;
        margin-inline-start: var(--spacing-1);

        svg {
          height: calc(4px * 4);
          height: var(--spacing-4);
        }
      }
    }

    .property-doc-button:hover {
      text-decoration: none;

      label {
        pointer-events: none;
      }
    }

    .property-name {
      margin: 0;
    }

    .combinator {
      width: 100%;
    }

    .doc-section-examples {
      display: flex;
      flex-direction: column;
      gap: calc(4px * 6);
      gap: var(--spacing-6);
    }

    portal-example {
      height: calc((100vh - 200px - 0px) / 2);
      height: calc((100vh - 200px - var(--body-top)) / 2);
    }
  }
}
.explorer-banner {
  display: flex;
  flex-direction: column;
  padding: calc(4px * 3) calc(4px * 4);
  padding: var(--spacing-3) var(--spacing-4);
  border-radius: 4px;
  border-radius: var(--spacing-1);
  border: 1px solid #e6f6fc;
  border: 1px solid var(--blue-20, #e6f6fc);
  background: #f5fbff;
  background: var(--blue-10, #f5fbff);
}
.explorer-banner-link {
  text-decoration: underline;
}
/* Desktop view */
@media (min-width: 850px) {
  .header-wrapper {
    position: sticky;
    top: 0px;
    top: var(--body-top);
    z-index: 10;
    display: block;
    background: #ffffff;
    background: var(--bg-color);
  }
}
/* Mobile view */
@media (max-width: 849px) {
  .header-wrapper {
    display: flex;
    position: fixed;
    top: 0px;
    top: var(--body-top);
    background: #ffffff;
    background: var(--bg-color);
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3);
    transition: left 0.3s ease-in-out;
    z-index: 1000;
    /* Some customers have a high nav z-index (999 for MongoDB) */
  }
}
.hover\:bg-blue-70:hover {
--tw-bg-opacity: 1;
background-color: rgb(24 78 148 / 1);
}
@supports (color: rgb(0 0 0 / 0)) {
.hover\:bg-blue-70:hover {
background-color: rgb(24 78 148 / var(--tw-bg-opacity, 1));
}
}
.hover\:bg-lightgray:hover {
--tw-bg-opacity: 1;
background-color: rgb(249 250 251 / 1);
}
@supports (color: rgb(0 0 0 / 0)) {
.hover\:bg-lightgray:hover {
background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
}
.hover\:bg-shark:hover {
--tw-bg-opacity: 1;
background-color: rgb(36 41 46 / 1);
}
@supports (color: rgb(0 0 0 / 0)) {
.hover\:bg-shark:hover {
background-color: rgb(36 41 46 / var(--tw-bg-opacity, 1));
}
}
.hover\:text-black:hover {
--tw-text-opacity: 1;
color: rgb(19 20 21 / 1);
}
@supports (color: rgb(0 0 0 / 0)) {
.hover\:text-black:hover {
color: rgb(19 20 21 / var(--tw-text-opacity, 1));
}
}
.hover\:text-blue:hover {
--tw-text-opacity: 1;
color: rgb(2 95 215 / 1);
}
@supports (color: rgb(0 0 0 / 0)) {
.hover\:text-blue:hover {
color: rgb(2 95 215 / var(--tw-text-opacity, 1));
}
}
.hover\:text-lightblack:hover {
--tw-text-opacity: 1;
color: rgb(66 67 68 / 1);
}
@supports (color: rgb(0 0 0 / 0)) {
.hover\:text-lightblack:hover {
color: rgb(66 67 68 / var(--tw-text-opacity, 1));
}
}
.hover\:opacity-75:hover {
opacity: 0.75;
}
.dark\:divide-white\/10:is([data-mode='dark'] *) > :not([hidden]) ~ :not([hidden]) {
border-color: rgb(255 255 255 / .1);
}
.dark\:border-blue-90:is([data-mode='dark'] *) {
--tw-border-opacity: 1;
border-color: rgb(34 44 58 / 1);
}
@supports (color: rgb(0 0 0 / 0)) {
.dark\:border-blue-90:is([data-mode='dark'] *) {
border-color: rgb(34 44 58 / var(--tw-border-opacity, 1));
}
}
.dark\:bg-blue-100:is([data-mode='dark'] *) {
--tw-bg-opacity: 1;
background-color: rgb(17 28 40 / 1);
}
@supports (color: rgb(0 0 0 / 0)) {
.dark\:bg-blue-100:is([data-mode='dark'] *) {
background-color: rgb(17 28 40 / var(--tw-bg-opacity, 1));
}
}
.dark\:bg-transparent:is([data-mode='dark'] *) {
background-color: transparent;
}
.dark\:text-gray:is([data-mode='dark'] *) {
--tw-text-opacity: 1;
color: rgb(238 238 238 / 1);
}
@supports (color: rgb(0 0 0 / 0)) {
.dark\:text-gray:is([data-mode='dark'] *) {
color: rgb(238 238 238 / var(--tw-text-opacity, 1));
}
}
.dark\:text-white:is([data-mode='dark'] *) {
--tw-text-opacity: 1;
color: rgb(255 255 255 / 1);
}
@supports (color: rgb(0 0 0 / 0)) {
.dark\:text-white:is([data-mode='dark'] *) {
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
}
.dark\:brightness-\[100\]:is([data-mode='dark'] *) {
--tw-brightness: brightness(100);
filter: var(--tw-blur) brightness(100) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
@media (min-width: 640px) {
.sm\:mt-0 {
margin-top: 0px;
}
.sm\:w-1\/2 {
width: 50%;
}
.sm\:w-auto {
width: auto;
}

  .sm\:clip-ellipsis-left {
    clip-path: url(#ellipsisLeft);
  }

  .sm\:clip-ellipsis-right {
    clip-path: url(#ellipsisRight);
  }
}
@media (min-width: 768px) {
.md\:col-span-4 {
grid-column: span 4 / span 4;
}
.md\:col-start-2 {
grid-column-start: 2;
}
.md\:row-start-1 {
grid-row-start: 1;
}
.md\:row-start-2 {
grid-row-start: 2;
}
.md\:row-start-auto {
grid-row-start: auto;
}
.md\:mx-auto {
margin-left: auto;
margin-right: auto;
}
.md\:my-0 {
margin-top: 0px;
margin-bottom: 0px;
}
.md\:my-30 {
margin-top: 7.5rem;
margin-bottom: 7.5rem;
}
.md\:-mb-56 {
margin-bottom: -14rem;
}
.md\:mb-0 {
margin-bottom: 0px;
}
.md\:mb-30 {
margin-bottom: 7.5rem;
}
.md\:ml-20 {
margin-left: 5rem;
}
.md\:ml-4 {
margin-left: 1rem;
}
.md\:ml-6 {
margin-left: 1.5rem;
}
.md\:mr-10 {
margin-right: 2.5rem;
}
.md\:mr-6 {
margin-right: 1.5rem;
}
.md\:mr-8 {
margin-right: 2rem;
}
.md\:mt-0 {
margin-top: 0px;
}
.md\:mt-10 {
margin-top: 2.5rem;
}
.md\:mt-2 {
margin-top: 0.5rem;
}
.md\:mt-20 {
margin-top: 5rem;
}
.md\:mt-30 {
margin-top: 7.5rem;
}
.md\:mt-40 {
margin-top: 10rem;
}
.md\:block {
display: block;
}
.md\:flex {
display: flex;
}
.md\:grid {
display: grid;
}
.md\:h-75 {
height: 18.75rem;
}
.md\:w-1\/2 {
width: 50%;
}
.md\:w-10\/12 {
width: 83.333333%;
}
.md\:w-112 {
width: 28rem;
}
.md\:w-2\/5 {
width: 40%;
}
.md\:w-3\/5 {
width: 60%;
}
.md\:w-4\/6 {
width: 66.666667%;
}
.md\:w-5\/12 {
width: 41.666667%;
}
.md\:w-6\/12 {
width: 50%;
}
.md\:w-7\/12 {
width: 58.333333%;
}
.md\:w-\[200px\] {
width: 200px;
}
.md\:w-\[46\%\] {
width: 46%;
}
.md\:w-\[54\%\] {
width: 54%;
}
.md\:w-auto {
width: auto;
}
.md\:min-w-50 {
min-width: 12.5rem;
}
.md\:max-w-120 {
max-width: 30rem;
}
.md\:max-w-131 {
max-width: 32.75rem;
}
.md\:max-w-\[420px\] {
max-width: 420px;
}
.md\:max-w-\[800px\] {
max-width: 800px;
}
.md\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.md\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.md\:grid-cols-6 {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.md\:flex-row {
flex-direction: row;
}
.md\:flex-col {
flex-direction: column;
}
.md\:flex-nowrap {
flex-wrap: nowrap;
}
.md\:justify-start {
justify-content: flex-start;
}
.md\:gap-10 {
gap: 2.5rem;
}
.md\:gap-20 {
gap: 5rem;
}
.md\:gap-x-20 {
-moz-column-gap: 5rem;
     column-gap: 5rem;
}
.md\:justify-self-end {
justify-self: end;
}
.md\:px-0 {
padding-left: 0px;
padding-right: 0px;
}
.md\:px-10 {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
.md\:px-12 {
padding-left: 3rem;
padding-right: 3rem;
}
.md\:px-18 {
padding-left: 4.5rem;
padding-right: 4.5rem;
}
.md\:px-8 {
padding-left: 2rem;
padding-right: 2rem;
}
.md\:pb-16 {
padding-bottom: 4rem;
}
.md\:pb-30 {
padding-bottom: 7.5rem;
}
.md\:pt-10 {
padding-top: 2.5rem;
}
.md\:pt-20 {
padding-top: 5rem;
}
.md\:pt-30 {
padding-top: 7.5rem;
}
.md\:text-left {
text-align: left;
}
.md\:text-center {
text-align: center;
}
.md\:text-4xl {
font-size: 2.5rem;
line-height: 2.875rem;
}
.md\:text-5xl {
font-size: 3rem;
line-height: 3.45rem;
}
.md\:text-lg {
font-size: 1.125rem;
line-height: 1.6875rem;
}
}
@media (min-width: 1024px) {
.lg\:mb-0 {
margin-bottom: 0px;
}
.lg\:ml-6 {
margin-left: 1.5rem;
}
.lg\:mr-0 {
margin-right: 0px;
}
.lg\:mt-0 {
margin-top: 0px;
}
.lg\:mt-20 {
margin-top: 5rem;
}
.lg\:mt-36 {
margin-top: 9rem;
}
.lg\:flex {
display: flex;
}
.lg\:hidden {
display: none;
}
.lg\:w-1\/2 {
width: 50%;
}
.lg\:w-1\/3 {
width: 33.333333%;
}
.lg\:w-auto {
width: auto;
}
.lg\:max-w-120 {
max-width: 30rem;
}
.lg\:max-w-130 {
max-width: 32.5rem;
}
.lg\:max-w-140 {
max-width: 35rem;
}
.lg\:max-w-145 {
max-width: 36.25rem;
}
.lg\:flex-none {
flex: none;
}
.lg\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.lg\:flex-row {
flex-direction: row;
}
.lg\:flex-col {
flex-direction: column;
}
.lg\:gap-12 {
gap: 3rem;
}
.lg\:gap-20 {
gap: 5rem;
}
.lg\:gap-30 {
gap: 7.5rem;
}
.lg\:gap-4 {
gap: 1rem;
}
.lg\:gap-x-40 {
-moz-column-gap: 10rem;
     column-gap: 10rem;
}
.lg\:gap-x-8 {
-moz-column-gap: 2rem;
     column-gap: 2rem;
}
.lg\:bg-transparent {
background-color: transparent;
}
.lg\:px-0 {
padding-left: 0px;
padding-right: 0px;
}
.lg\:px-16 {
padding-left: 4rem;
padding-right: 4rem;
}
.lg\:px-20 {
padding-left: 5rem;
padding-right: 5rem;
}
.lg\:px-30 {
padding-left: 7.5rem;
padding-right: 7.5rem;
}
.lg\:pt-20 {
padding-top: 5rem;
}
.lg\:text-2xl {
font-size: 1.5rem;
line-height: 1.875rem;
}
.lg\:backdrop-blur {
--tw-backdrop-blur: blur(8px);
-webkit-backdrop-filter: blur(8px) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
backdrop-filter: blur(8px) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

  .lg\:grid-cols-3-auto {
    grid-template-columns: repeat(3, 1fr);
  }

  .dark\:lg\:bg-transparent:is([data-mode='dark'] *) {
background-color: transparent;
}
}
@media (min-width: 1280px) {
.xl\:my-30 {
margin-top: 7.5rem;
margin-bottom: 7.5rem;
}
.xl\:px-10 {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
.xl\:px-18 {
padding-left: 4.5rem;
padding-right: 4.5rem;
}
.xl\:px-30 {
padding-left: 7.5rem;
padding-right: 7.5rem;
}
.xl\:px-40 {
padding-left: 10rem;
padding-right: 10rem;
}
.xl\:px-60 {
padding-left: 15rem;
padding-right: 15rem;
}
.xl\:px-87 {
padding-left: 21.75rem;
padding-right: 21.75rem;
}
.xl\:px-\[8\.5rem\] {
padding-left: 8.5rem;
padding-right: 8.5rem;
}
.xl\:pb-30 {
padding-bottom: 7.5rem;
}
}
@media (min-width: 1441px) {
.xxl\:pl-screen-1\/2 {
padding-left: calc(50vw - 720px);
}
}


/*# sourceMappingURL=portal-e677cd4a.css.map*/