/*fern-site-stylesheet*/@font-face {
    font-family: 'Inter-Regular';
    src: url('/_fern-files/ada.docs.buildwithfern.com/693b77d4f32ee9b8bfc995589b5fad5e99adf2832738661f5402f9978429a8e3/fonts/inter-variable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Roobert-Bold';
    src: url('/_fern-files/ada.docs.buildwithfern.com/85ded3668d6db019aebcaa8e1780a0dec4cd91f8fea7161052f4f1cec7e050a6/fonts/roobert-variable.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
  --header-height: 64px;
  --header-height-real: 64px;
  --mobile-header-height-real: 64px;
  --content-width: 640px;
  --sidebar-width: 288px;
  --page-width: 1408px;
  --logo-height: 30px;
  --font-body: 'Inter-Regular', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-heading: 'Roobert-Bold', 'Inter-Regular', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-code: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

:root {
  --typography-body-font-family: var(--font-body);
  --typography-heading-font-family: var(--font-heading);
  --typography-code-font-family: var(--font-code);
}


.light, :root {
  --accent-1: #f8fffb;
  --accent-2: #f0fdf7;
  --accent-3: #d3fdeb;
  --accent-4: #b6fade;
  --accent-5: #99f4cf;
  --accent-6: #79e9bf;
  --accent-7: #63d6ac;
  --accent-8: #48bd95;
  --accent-9: #00543d;
  --accent-10: #1d654d;
  --accent-11: #007d58;
  --accent-12: #004731;

  --accent-a1: #00ff6e07;
  --accent-a2: #00dd770f;
  --accent-a3: #00f48c2c;
  --accent-a4: #00ee8c49;
  --accent-a5: #00e48766;
  --accent-a6: #00d68686;
  --accent-a7: #00bc789c;
  --accent-a8: #00a36bb7;
  --accent-a9: #00543d;
  --accent-a10: #005136e2;
  --accent-a11: #007d58;
  --accent-a12: #004731;

  --accent-contrast: #fff;
  --accent-surface: #ecfdf5cc;
  --accent-indicator: #00543d;
  --accent-track: #00543d;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --accent-1: oklch(99.3% 0.0083 166.8);
      --accent-2: oklch(98.2% 0.0161 166.8);
      --accent-3: oklch(96% 0.0497 166.8);
      --accent-4: oklch(93.3% 0.0783 166.8);
      --accent-5: oklch(89.9% 0.1014 166.8);
      --accent-6: oklch(85.6% 0.1197 166.8);
      --accent-7: oklch(79.7% 0.1219 166.8);
      --accent-8: oklch(72.2% 0.1219 166.8);
      --accent-9: oklch(39.6% 0.0812 166.8);
      --accent-10: oklch(45.6% 0.0812 166.8);
      --accent-11: oklch(51.6% 0.1219 166.8);
      --accent-12: oklch(35% 0.0812 166.8);

      --accent-a1: color(display-p3 0.0235 1 0.349 / 0.024);
      --accent-a2: color(display-p3 0.0039 0.8471 0.3882 / 0.051);
      --accent-a3: color(display-p3 0.0078 0.9176 0.4784 / 0.142);
      --accent-a4: color(display-p3 0.0039 0.8824 0.4784 / 0.232);
      --accent-a5: color(display-p3 0.0039 0.8431 0.4353 / 0.318);
      --accent-a6: color(display-p3 0.0039 0.7647 0.4275 / 0.416);
      --accent-a7: color(display-p3 0.0039 0.6471 0.3608 / 0.491);
      --accent-a8: color(display-p3 0 0.5451 0.302 / 0.585);
      --accent-a9: color(display-p3 0 0.2235 0.1255 / 0.867);
      --accent-a10: color(display-p3 0 0.2392 0.1373 / 0.8);
      --accent-a11: color(display-p3 0 0.3451 0.1843 / 0.789);
      --accent-a12: color(display-p3 0 0.1882 0.1059 / 0.895);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.9373 0.9843 0.9608 / 0.8);
      --accent-indicator: oklch(39.6% 0.0812 166.8);
      --accent-track: oklch(39.6% 0.0812 166.8);
    }
  }
}


.light, :root {
  --grayscale-1: #fcfdfc;
  --grayscale-2: #f8faf8;
  --grayscale-3: #eff1ef;
  --grayscale-4: #e7e9e7;
  --grayscale-5: #dfe2df;
  --grayscale-6: #d7dad7;
  --grayscale-7: #cccfcc;
  --grayscale-8: #b9bcb8;
  --grayscale-9: #898e87;
  --grayscale-10: #7f847d;
  --grayscale-11: #60655f;
  --grayscale-12: #1d211c;

  --grayscale-a1: #00550003;
  --grayscale-a2: #00490007;
  --grayscale-a3: #00200010;
  --grayscale-a4: #00160018;
  --grayscale-a5: #00180020;
  --grayscale-a6: #00140028;
  --grayscale-a7: #000f0033;
  --grayscale-a8: #040f0047;
  --grayscale-a9: #050f0078;
  --grayscale-a10: #040e0082;
  --grayscale-a11: #020a00a0;
  --grayscale-a12: #010600e3;

  --grayscale-contrast: #000;
  --grayscale-surface: #ffffffcc;
  --grayscale-indicator: #898e87;
  --grayscale-track: #898e87;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --grayscale-1: color(display-p3 0.989 0.992 0.989);
      --grayscale-2: color(display-p3 0.974 0.98 0.973);
      --grayscale-3: color(display-p3 0.939 0.945 0.937);
      --grayscale-4: color(display-p3 0.907 0.914 0.905);
      --grayscale-5: color(display-p3 0.878 0.885 0.875);
      --grayscale-6: color(display-p3 0.846 0.855 0.843);
      --grayscale-7: color(display-p3 0.803 0.812 0.8);
      --grayscale-8: color(display-p3 0.727 0.738 0.723);
      --grayscale-9: color(display-p3 0.541 0.556 0.532);
      --grayscale-10: color(display-p3 0.5 0.515 0.491);
      --grayscale-11: color(display-p3 0.38 0.395 0.374);
      --grayscale-12: color(display-p3 0.117 0.129 0.111);

      --grayscale-a1: #00550003;
      --grayscale-a2: #00490007;
      --grayscale-a3: #00200010;
      --grayscale-a4: #00160018;
      --grayscale-a5: #00180020;
      --grayscale-a6: #00140028;
      --grayscale-a7: #000f0033;
      --grayscale-a8: #040f0047;
      --grayscale-a9: #050f0078;
      --grayscale-a10: #040e0082;
      --grayscale-a11: #020a00a0;
      --grayscale-a12: #010600e3;

      --grayscale-contrast: #000;
      --grayscale-surface: color(display-p3 1 1 1 / 80%);
      --grayscale-indicator: color(display-p3 0.541 0.556 0.532);
      --grayscale-track: color(display-p3 0.541 0.556 0.532);
    }
  }
}


.dark {
  --accent-1: #151a23;
  --accent-2: #181f29;
  --accent-3: #1d2b40;
  --accent-4: #213654;
  --accent-5: #2a4264;
  --accent-6: #354f75;
  --accent-7: #42608b;
  --accent-8: #4f73a7;
  --accent-9: #abcbf9;
  --accent-10: #9dc1f4;
  --accent-11: #97bbed;
  --accent-12: #d6e7ff;

  --accent-a1: #001bf306;
  --accent-a2: #197df60d;
  --accent-a3: #398afd27;
  --accent-a4: #3e8dfc3e;
  --accent-a5: #529afd50;
  --accent-a6: #63a3ff63;
  --accent-a7: #6faaff7c;
  --accent-a8: #72acfe9c;
  --accent-a9: #aecffef9;
  --accent-a10: #a4cafff3;
  --accent-a11: #a2c9ffeb;
  --accent-a12: #d6e7ff;

  --accent-contrast: #152235;
  --accent-surface: #18243480;
  --accent-indicator: #abcbf9;
  --accent-track: #abcbf9;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --accent-1: oklch(21.7% 0.0183 257.4);
      --accent-2: oklch(23.6% 0.0217 257.4);
      --accent-3: oklch(28.7% 0.0436 257.4);
      --accent-4: oklch(33% 0.0599 257.4);
      --accent-5: oklch(37.5% 0.0666 257.4);
      --accent-6: oklch(42.6% 0.0716 257.4);
      --accent-7: oklch(48.4% 0.0787 257.4);
      --accent-8: oklch(55.2% 0.091 257.4);
      --accent-9: oklch(83.5% 0.0735 257.4);
      --accent-10: oklch(80.2% 0.0821 257.4);
      --accent-11: oklch(78.3% 0.0821 257.4);
      --accent-12: oklch(92.4% 0.038 257.4);

      --accent-a1: color(display-p3 0 0.102 0.9922 / 0.018);
      --accent-a2: color(display-p3 0.1843 0.5412 0.9922 / 0.045);
      --accent-a3: color(display-p3 0.3137 0.5686 0.9961 / 0.143);
      --accent-a4: color(display-p3 0.3333 0.5608 1 / 0.232);
      --accent-a5: color(display-p3 0.4 0.6157 1 / 0.298);
      --accent-a6: color(display-p3 0.4627 0.651 1 / 0.374);
      --accent-a7: color(display-p3 0.4941 0.6745 1 / 0.472);
      --accent-a8: color(display-p3 0.5098 0.6824 1 / 0.592);
      --accent-a9: color(display-p3 0.7216 0.8235 1 / 0.956);
      --accent-a10: color(display-p3 0.6784 0.7961 1 / 0.934);
      --accent-a11: color(display-p3 0.6784 0.7961 1 / 0.903);
      --accent-a12: color(display-p3 0.8588 0.9098 1 / 0.992);

      --accent-contrast: #152235;
      --accent-surface: color(display-p3 0.102 0.1412 0.1961 / 0.5);
      --accent-indicator: oklch(83.5% 0.0735 257.4);
      --accent-track: oklch(83.5% 0.0735 257.4);
    }
  }
}


.dark {
  --grayscale-1: #111113;
  --grayscale-2: #18191b;
  --grayscale-3: #212225;
  --grayscale-4: #272a2d;
  --grayscale-5: #2e3135;
  --grayscale-6: #363a3f;
  --grayscale-7: #43484e;
  --grayscale-8: #5a6169;
  --grayscale-9: #696e77;
  --grayscale-10: #777b84;
  --grayscale-11: #b0b4ba;
  --grayscale-12: #edeef0;

  --grayscale-a1: #00000000;
  --grayscale-a2: #d8f4f609;
  --grayscale-a3: #ddeaf814;
  --grayscale-a4: #d3edf81d;
  --grayscale-a5: #d9edfe25;
  --grayscale-a6: #d6ebfd30;
  --grayscale-a7: #d9edff40;
  --grayscale-a8: #d9edff5d;
  --grayscale-a9: #dfebfd6d;
  --grayscale-a10: #e5edfd7b;
  --grayscale-a11: #f1f7feb5;
  --grayscale-a12: #fcfdffef;

  --grayscale-contrast: #fff;
  --grayscale-surface: rgba(0, 0, 0, 0.05);
  --grayscale-indicator: #696e77;
  --grayscale-track: #696e77;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --grayscale-1: color(display-p3 0.067 0.067 0.074);
      --grayscale-2: color(display-p3 0.095 0.098 0.105);
      --grayscale-3: color(display-p3 0.13 0.135 0.145);
      --grayscale-4: color(display-p3 0.156 0.163 0.176);
      --grayscale-5: color(display-p3 0.183 0.191 0.206);
      --grayscale-6: color(display-p3 0.215 0.226 0.244);
      --grayscale-7: color(display-p3 0.265 0.28 0.302);
      --grayscale-8: color(display-p3 0.357 0.381 0.409);
      --grayscale-9: color(display-p3 0.415 0.431 0.463);
      --grayscale-10: color(display-p3 0.469 0.483 0.514);
      --grayscale-11: color(display-p3 0.692 0.704 0.728);
      --grayscale-12: color(display-p3 0.93 0.933 0.94);

      --grayscale-a1: #00000000;
      --grayscale-a2: #d8f4f609;
      --grayscale-a3: #ddeaf814;
      --grayscale-a4: #d3edf81d;
      --grayscale-a5: #d9edfe25;
      --grayscale-a6: #d6ebfd30;
      --grayscale-a7: #d9edff40;
      --grayscale-a8: #d9edff5d;
      --grayscale-a9: #dfebfd6d;
      --grayscale-a10: #e5edfd7b;
      --grayscale-a11: #f1f7feb5;
      --grayscale-a12: #fcfdffef;

      --grayscale-contrast: #fff;
      --grayscale-surface: color(display-p3 0 0 0 / 5%);
      --grayscale-indicator: color(display-p3 0.415 0.431 0.463);
      --grayscale-track: color(display-p3 0.415 0.431 0.463);
    }
  }
}

.light, :root {
  color-scheme: light;
  --accent: rgba(0, 84, 61, 1);
  --background: rgba(255, 255, 255, 1);
  --border: initial;
  --sidebar-background: initial;
  --header-background: rgba(255, 255, 255, 1);
  --card-background: initial;
  --theme-color: #fff;
}

.dark {
  color-scheme: dark;
  --accent: rgba(171, 203, 249, 1);
  --background: rgba(24, 26, 30, 1);
  --border: initial;
  --sidebar-background: initial;
  --header-background: rgba(24, 26, 30, 1);
  --card-background: initial;
  --theme-color: #181a1e;
}

:is(.dark) .fern-button:not(.disabled).filled.primary {
	background-color: #ABCBF9 !important;
  }

  .fern-button:not(.disabled).minimal.primary svg {
	color: #00543D !important;
  }

  .topic-footer {
	margin-top: 4rem !important;
  }

  .topic-footer hr {
	margin-bottom: 0.5rem !important;
  }

  .topic-footer p {
	color: var(--muted-text) !important;
	font-size: calc(0.875 * var(--ifm-font-size-base)) !important;
  }

  :is(div):has(> div > img.inline) {
	display: inline;
  }

  :is(div):has(> img.inline) {
	display: inline;
  }

  .inline {
	display: inline;
	width: 1em;
	height: 1em;
	vertical-align: middle;
	margin: 0;
  }

  /* :is(.light) .fern-header .fern-button {
	color: white !important;
	font-weight: 500;
  }

  :is(.light) .fern-button.filled .fa-icon {
	background-color: #ABCBF9 !important;
	height: 16px;
	width: 16px;
  } */

  :is(.light) .fern-button:not(.disabled).filled.primary {
	background-color: #00543D !important;
  }

  :is(.light) .fern-button:not(.disabled).minimal.primary svg {
	color: #00543D !important;
  }

  .fern-callout {
	box-shadow: none !important;
  }

  :is(.light) .fern-callout p {
	color: black !important;
  }

  :is(.dark) .fern-callout p {
	color: white !important;
  }

  @media screen and (max-width: 600px) {

	.fern-header-logo-container {
		width: 200px;
		height: auto;
	}
  
}

/* -----HIDE VERSION DROPDOWN-----*/

  button[data-testid="version-dropdown"] {
	  display: none;
  }

  div[data-testid="version-dropdown"] {
	  display: none;
  }

/* --------- EXAMPLES --------- */

:root{
    --example-right-background: #dcfce7;
    --example-right-text: #11622f;
    --example-wrong-background: #ffe6e6;
    --example-wrong-text: #b91c1c;
    --example-maybe-background: var(--ifm-color-warning-contrast-background);
    --example-maybe-text: var(--ifm-color-warning-contrast-foreground);

/* Caution/warning colours */
	--ifm-color-warning-contrast-background: #fef5d2;
	--ifm-color-warning-contrast-foreground: #b35309;
}

  td.table-yes {
    background-color: var(--example-right-background);
    color: var(--example-right-text);
  }

  td.table-maybe {
    background-color: var(--example-maybe-background);
    color: var(--example-maybe-text);
  }

  td.table-no {
    background-color: var(--example-wrong-background);
    color: var(--example-wrong-text);
  }

  /* Override blockquote text color */
  blockquote {
    color: inherit !important;
  }

  /* ---------- EXAMPLES ---------- */
.example-wrong {
	color: var(--example-wrong-text);
	background: var(--example-wrong-background);
	border-radius: 8px;
	padding: 5px;
	padding-left: 1.9em;
	margin-bottom: 10px;
	text-indent: -1.35em;
}

.example-wrong:before {
	content: '✘';
	margin-left: 3px;
	margin-right: 8px;
}

.example-right {
	color: var(--example-right-text);
	background: var(--example-right-background);
	border-radius: 8px;
	padding: 5px;
	padding-left: 1.9em;
	margin-bottom: 10px;
	text-indent: -1.5em;
}

.example-right:before {
	content: '✔';
	margin-left: 3px;
	margin-right: 8px;
}


/* ----- FOR HOME PAGE ----- */

/* Homepage font override - use Roobert for homepage only */
/* Apply Roobert to all homepage content using the font family name from Fern config */
.lp-section,
.lp-section *,
.lp-title,
.lp-subtitle {
  font-family: 'Roobert-Bold', 'Inter-Regular', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-weight: 400 !important;
}

.lp-section {
  max-width: var(--spacing-page-width);
  padding: 2rem 0;
  margin: 0 auto;
}

.lp-container {
  background-image: url("https://ada-docs-site.s3.us-east-2.amazonaws.com/homepage-bg.webp");
  background-position: 50%;
  background-size: cover;
  border-radius: 1.5rem;
  overflow: hidden;
  padding: 2rem;
}

.lp-title {
  font-size: 4rem;
  margin-bottom: 0.5rem;
  color: #0a0b0c;
  font-weight: 400;
}

.lp-subtitle {
  font-size: 2.5rem;
  line-height: 1.15;
  color: #0a0b0c;
}

.lp-feature-row {
  display: flex;
  gap: 2rem;
  padding: 2rem 0;
}

.lp-feature-row a {

  flex: 1;


  .external-link-icon {
    display: none !important;
  }

  img {

    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid transparent;

    &:hover {
      border: 1px solid rgba(255, 255, 255, 0.7);
    }
&:focus-visible {
      border: 1px solid rgba(255, 255, 255, 0.7); outline: none;
}
  
}

}



@media (max-width: 768px) {

  .lp-section {
    padding: 1rem 0 0 0;
  }

  .lp-title {
    font-size: 2.5rem;
  }

  .lp-subtitle {
    font-size: 1.5rem;
  }
  .lp-feature-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 1rem;
  }


}

@media (max-width: 480px) {

  .lp-title {
    font-size: 2rem;
  }

  .lp-subtitle {
    font-size: 1.25rem;
  }


}

.hs-input {
  border: 1px solid var(--border,var(--grayscale-a5)) !important;
  border-radius: var(--radius) !important;
  margin-top: calc(var(--spacing)*2) !important;
}

.hs-button {

  background-color: var(--accent) !important;
  color: var(--accent-contrast) !important;
  border-radius: 1000px !important;
  padding: calc(var(--spacing)*1) calc(var(--spacing)*2) !important;
  border: none !important;
  cursor: pointer !important;
  transition: background-color 0.3s ease !important;
  margin-bottom: calc(var(--spacing)*5) !important;

  &:hover {
    background-color: var(--accent-a12) !important;
  }
&:focus-visible {
    background-color: var(--accent-a12) !important; outline: none;
}

}
