/**
 * Stylesheet for the documentation site (docs_theme/).
 *
 * Reuses the theme's base and components; build with `npm run build:docs`.
 */
*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}
::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}/* Minimal reset. Tailwind's preflight is disabled; see maya-preset.js. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
       text-size-adjust: 100%;
  scroll-padding-top: 20px;
}

body {
  margin: 0;
  padding: 0;
  font-family: "Roboto Flex", ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  line-height: 24px;
  color: #0B0C0C;
  background-color: #FCFCFC;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/*
 * Without preflight, `border-style: solid` gives every side a medium width.
 * Zero widths on elements using border utilities so `border-b-1
 * border-solid` draws one side only, as it does in Tailwind's preflight.
 */
[class*='border-'] {
  border-width: 0;
  border-style: solid;
}

img,
svg,
video,
canvas,
iframe {
  max-width: 100%;
}

img,
video {
  height: auto;
}

svg {
  flex-shrink: 0;
}

a {
  color: #2A60AF;
  text-decoration-line: underline;
  text-underline-offset: 2px;
}

a:hover {
  color: #001D4E;
}

:focus-visible {
  outline: 3px solid #2A60AF;
  outline-offset: 4px;
  border-radius: 4px;
}

::-moz-selection {
  background-color: #DFEBFD;
}

::selection {
  background-color: #DFEBFD;
}

hr {
  height: 0;
  margin: 40px 0;
  border: 0;
  border-top: 1px solid #C9CACA;
}

[hidden] {
  display: none !important;
}

/* Skip link. */
.skip-link {
  position: absolute !important;
  top: 10px;
  left: 10px;
  z-index: 60;
}

.skip-link:not(:focus) {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
}

.skip-link:focus {
  padding: 12px 16px;
  color: #FCFCFC;
  background-color: #001D4E;
  border-radius: 4px;
}

#main-content:focus {
  outline: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
figure,
dl,
dd,
pre {
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: inherit;
  font-size: inherit;
  color: #0B0B0B;
}

b,
strong {
  font-weight: 700;
}

code,
kbd,
pre,
samp {
  font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.875em;
}

pre {
  white-space: pre-wrap;
}

kbd {
  display: inline-block;
  padding: 2px 8px;
  margin: 2px 0;
  font-size: 14px;
  line-height: 18px;
  color: #383939;
  border: 1px solid #AAABAB;
  border-radius: 2px;
}

small {
  font-size: 14px;
}

/* Page container: 1076px max, with Maya's responsive side margins. */
.maya-container {
  margin-left: 20px;
  margin-right: 20px;
  max-width: 1076px;
}
@media (min-width: 768px) {
  .maya-container {
    margin-left: 28px;
    margin-right: 28px;
  }
}
@media (min-width: 1024px) {
  .maya-container {
    margin-left: 96px;
    margin-right: 96px;
  }
}
@media (min-width: 1280px) {
  .maya-container {
    margin-left: auto;
    margin-right: auto;
  }
}

.maya-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 20px;
}

@media (min-width: 768px) {
  .maya-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 28px;
  }
}

/*
 * Buttons. `.btn` is for templates; `.button` is what Drupal's Form API
 * and local actions emit.
 */
.btn,
.button {
  display: inline-flex;
  width: -moz-fit-content;
  width: fit-content;
  flex-shrink: 0;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  border-radius: 4px;
  border-width: 1px;
  border-style: solid;
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 15px;
  padding-bottom: 15px;
  text-align: center;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0px;
  font-weight: 500;
  text-decoration-line: none;
  --tw-border-opacity: 1;
  border-color: rgb(42 96 175 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(252 252 252 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(42 96 175 / var(--tw-text-opacity, 1));
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.btn:hover,
.btn:focus-visible,
.button:hover,
.button:focus-visible {
  --tw-border-opacity: 1;
  border-color: rgb(0 29 78 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(233 241 254 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(0 29 78 / var(--tw-text-opacity, 1));
}

/* The first button in a form's actions is its main action. */
.btn,
.button--primary,
.button.button--primary,
.form-actions > .button:first-child:not(.button--danger) {
  border-color: transparent;
  --tw-bg-opacity: 1;
  background-color: rgb(42 96 175 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(252 252 252 / var(--tw-text-opacity, 1));
}

.btn:hover,
.btn:focus-visible,
.button--primary:hover,
.button--primary:focus-visible,
.form-actions > .button:first-child:not(.button--danger):hover,
.form-actions > .button:first-child:not(.button--danger):focus-visible {
  --tw-border-opacity: 1;
  border-color: rgb(0 29 78 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(0 29 78 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(252 252 252 / var(--tw-text-opacity, 1));
}

.btn--secondary {
  --tw-border-opacity: 1;
  border-color: rgb(42 96 175 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(252 252 252 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(42 96 175 / var(--tw-text-opacity, 1));
}

.btn--secondary:hover,
.btn--secondary:focus-visible {
  --tw-border-opacity: 1;
  border-color: rgb(0 29 78 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(233 241 254 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(0 29 78 / var(--tw-text-opacity, 1));
}

.btn--inverse {
  --tw-border-opacity: 1;
  border-color: rgb(252 252 252 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(252 252 252 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(0 29 78 / var(--tw-text-opacity, 1));
}

.btn--inverse:hover,
.btn--inverse:focus-visible {
  --tw-border-opacity: 1;
  border-color: rgb(223 235 253 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(223 235 253 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(0 29 78 / var(--tw-text-opacity, 1));
}

.button--danger {
  border-color: transparent;
  --tw-bg-opacity: 1;
  background-color: rgb(172 0 0 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(252 252 252 / var(--tw-text-opacity, 1));
}

.button--danger:hover,
.button--danger:focus-visible {
  --tw-border-opacity: 1;
  border-color: rgb(129 0 0 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(129 0 0 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(252 252 252 / var(--tw-text-opacity, 1));
}

.btn--block {
  display: flex;
  width: 100%;
}

.btn:disabled,
.button:disabled,
.button.is-disabled {
  cursor: not-allowed;
  --tw-border-opacity: 1;
  border-color: rgb(233 234 234 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(233 234 234 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(170 171 171 / var(--tw-text-opacity, 1));
}

.button--small {
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 8px;
  padding-bottom: 8px;
}

/* Local actions ("+ Add content"). */
.action-links {
  margin: 0;
  margin-bottom: 20px;
  display: flex;
  list-style-type: none;
  flex-wrap: wrap;
  gap: 12px;
  padding: 0;
}
/* Site footer. */
.maya-footer {
  margin-top: 40px;
  --tw-bg-opacity: 1;
  background-color: rgb(0 9 37 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(252 252 252 / var(--tw-text-opacity, 1));
}
@media (min-width: 768px) {
  .maya-footer {
    margin-top: 60px;
  }
}
@media (min-width: 1024px) {
  .maya-footer {
    margin-top: 80px;
  }
}

.maya-footer a {
  --tw-text-opacity: 1;
  color: rgb(252 252 252 / var(--tw-text-opacity, 1));
}

.maya-footer a:hover {
  --tw-text-opacity: 1;
  color: rgb(223 235 253 / var(--tw-text-opacity, 1));
}

.maya-footer :focus-visible {
  outline-color: #FCFCFC;
}

.maya-footer__brand {
  margin-bottom: 28px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration-line: none;
}

.maya-footer__logo {
  height: 40px;
  width: auto;
}

@media (min-width: 768px) {
  .maya-footer__logo {
    height: 60px;
  }
}

.maya-footer__logo {
  filter: brightness(0) invert(1);
}

.maya-footer__site-name {
  font-family: "Roboto Slab", ui-serif, Georgia, serif;
  font-size: 24px;
  line-height: 32px;
  letter-spacing: 0px;
  font-weight: 700;
}

@media (min-width: 1024px) {
  .maya-footer__site-name {
    font-size: 32px;
    line-height: 44px;
    letter-spacing: 0px;
    font-weight: 600;
  }
}

.maya-footer__columns {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

@media (min-width: 768px) {
  .maya-footer__columns {
    flex-direction: row;
  }
  .maya-footer__columns > * {
    flex: 1 1 0%;
  }
}

.maya-footer__heading {
  margin-bottom: 12px;
  font-family: "Roboto Slab", ui-serif, Georgia, serif;
  font-size: 20px;
  line-height: 28px;
  letter-spacing: 0px;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(252 252 252 / var(--tw-text-opacity, 1));
}

@media (min-width: 1024px) {
  .maya-footer__heading {
    font-size: 24px;
    line-height: 32px;
    letter-spacing: 0px;
    font-weight: 500;
  }
}

.maya-footer ul {
  margin: 0;
  display: flex;
  list-style-type: none;
  flex-direction: column;
  gap: 12px;
  padding: 0;
}

.maya-footer__bottom {
  margin-top: 40px;
  border-width: 0;
  border-top-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(4 53 120 / var(--tw-border-opacity, 1));
  padding-top: 20px;
  padding-bottom: 20px;
  font-size: 14px;
  line-height: 24px;
}

.maya-footer__bottom > .region {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (min-width: 768px) {
  .maya-footer__bottom > .region {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.maya-footer__bottom ul {
  flex-direction: row;
  flex-wrap: wrap;
  -moz-column-gap: 20px;
       column-gap: 20px;
}

/*
 * Rich text: body fields, CKEditor output, and anything else wrapped in
 * `.maya-text`. Mirrors SF.gov's body copy.
 */
.maya-text > :first-child, .text-formatted > :first-child, .ck-content > :first-child {
    margin-top: 0;
  }
.maya-text > :last-child, .text-formatted > :last-child, .ck-content > :last-child {
    margin-bottom: 0;
  }
.maya-text p, .text-formatted p, .ck-content p {
  margin-bottom: 20px;
}
.maya-text h2, .text-formatted h2, .ck-content h2 {
  margin-bottom: 12px;
  margin-top: 40px;
  font-family: "Roboto Slab", ui-serif, Georgia, serif;
  font-size: 28px;
  line-height: 36px;
  letter-spacing: 0px;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(11 11 11 / var(--tw-text-opacity, 1));
}
@media (min-width: 1024px) {
  .maya-text h2, .text-formatted h2, .ck-content h2 {
    font-size: 40px;
    line-height: 52px;
    letter-spacing: 0px;
    font-weight: 500;
  }
}
.maya-text h3, .text-formatted h3, .ck-content h3 {
  margin-bottom: 20px;
  margin-top: 40px;
  font-family: "Roboto Flex", ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0px;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(11 11 11 / var(--tw-text-opacity, 1));
}
@media (min-width: 1024px) {
  .maya-text h3, .text-formatted h3, .ck-content h3 {
    font-size: 20px;
    line-height: 28px;
    letter-spacing: 0px;
    font-weight: 700;
  }
}
.maya-text h4, .text-formatted h4, .ck-content h4 {
  margin-bottom: 12px;
  margin-top: 28px;
  font-family: "Roboto Flex", ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0px;
  font-weight: 800;
  --tw-text-opacity: 1;
  color: rgb(11 11 11 / var(--tw-text-opacity, 1));
}
.maya-text h5,
  .maya-text h6,
  .text-formatted h5,
  .text-formatted h6,
  .ck-content h5,
  .ck-content h6 {
  margin-bottom: 12px;
  margin-top: 28px;
  font-family: "Roboto Flex", ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0px;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(11 11 11 / var(--tw-text-opacity, 1));
}
.maya-text h2 + h3, .text-formatted h2 + h3, .ck-content h2 + h3 {
    margin-top: 0;
  }
.maya-text a, .text-formatted a, .ck-content a {
  --tw-text-opacity: 1;
  color: rgb(27 81 158 / var(--tw-text-opacity, 1));
  text-decoration-line: underline;
}
.maya-text a:hover, .text-formatted a:hover, .ck-content a:hover {
  --tw-text-opacity: 1;
  color: rgb(0 29 78 / var(--tw-text-opacity, 1));
}
.maya-text ul,
  .maya-text ol,
  .text-formatted ul,
  .text-formatted ol,
  .ck-content ul,
  .ck-content ol {
  margin-bottom: 20px;
  margin-top: 0;
  padding-left: 28px;
}
.maya-text ul, .text-formatted ul, .ck-content ul {
    list-style: disc;
  }
.maya-text ol, .text-formatted ol, .ck-content ol {
    list-style: decimal;
  }
.maya-text ol ol, .text-formatted ol ol, .ck-content ol ol {
    list-style: lower-alpha;
  }
.maya-text ol ol ol, .text-formatted ol ol ol, .ck-content ol ol ol {
    list-style: lower-roman;
  }
.maya-text li, .text-formatted li, .ck-content li {
  margin-bottom: 12px;
}
.maya-text li > ul,
  .maya-text li > ol,
  .text-formatted li > ul,
  .text-formatted li > ol,
  .ck-content li > ul,
  .ck-content li > ol {
  margin-bottom: 0;
  margin-top: 12px;
}
.maya-text blockquote, .text-formatted blockquote, .ck-content blockquote {
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 20px;
  border-width: 0;
  border-left-width: 4px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(42 96 175 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(243 248 254 / var(--tw-bg-opacity, 1));
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 16px;
  padding-bottom: 16px;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: 0px;
  font-weight: 400;
}
.maya-text figure, .text-formatted figure, .ck-content figure {
  margin-bottom: 28px;
}
.maya-text figcaption, .text-formatted figcaption, .ck-content figcaption {
  margin-top: 8px;
  font-size: 14px;
  line-height: 24px;
  --tw-text-opacity: 1;
  color: rgb(83 84 84 / var(--tw-text-opacity, 1));
}
.maya-text img, .text-formatted img, .ck-content img {
  border-radius: 4px;
}
.maya-text table, .text-formatted table, .ck-content table {
  margin-bottom: 28px;
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.maya-text th,
  .maya-text td,
  .text-formatted th,
  .text-formatted td,
  .ck-content th,
  .ck-content td {
  border-width: 0;
  border-bottom-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(201 202 202 / var(--tw-border-opacity, 1));
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 12px;
  padding-bottom: 12px;
  vertical-align: top;
}
.maya-text th, .text-formatted th, .ck-content th {
  --tw-bg-opacity: 1;
  background-color: rgb(239 240 240 / var(--tw-bg-opacity, 1));
  font-weight: 700;
}
.maya-text caption, .text-formatted caption, .ck-content caption {
  margin-bottom: 8px;
  text-align: left;
  font-weight: 700;
}
.maya-text hr, .text-formatted hr, .ck-content hr {
  margin-top: 40px;
  margin-bottom: 40px;
  border-width: 0;
  border-top-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(201 202 202 / var(--tw-border-opacity, 1));
}
.maya-text code, .text-formatted code, .ck-content code {
  border-radius: 2px;
  --tw-bg-opacity: 1;
  background-color: rgb(239 240 240 / var(--tw-bg-opacity, 1));
  padding-left: 4px;
  padding-right: 4px;
}
.maya-text pre, .text-formatted pre, .ck-content pre {
  margin-bottom: 20px;
  overflow-x: auto;
  border-radius: 4px;
  --tw-bg-opacity: 1;
  background-color: rgb(239 240 240 / var(--tw-bg-opacity, 1));
  padding: 16px;
}
.maya-text pre code, .text-formatted pre code, .ck-content pre code {
  background-color: transparent;
  padding: 0;
}
.maya-text .align-left, .text-formatted .align-left, .ck-content .align-left {
  margin-bottom: 20px;
}
@media (min-width: 768px) {
  .maya-text .align-left, .text-formatted .align-left, .ck-content .align-left {
    float: left;
    margin-right: 28px;
  }
}
.maya-text .align-right, .text-formatted .align-right, .ck-content .align-right {
  margin-bottom: 20px;
}
@media (min-width: 768px) {
  .maya-text .align-right, .text-formatted .align-right, .ck-content .align-right {
    float: right;
    margin-left: 28px;
  }
}
.maya-text .align-center, .text-formatted .align-center, .ck-content .align-center {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
}
.maya-text .text-align-center, .text-formatted .text-align-center, .ck-content .text-align-center {
    text-align: center;
  }
.maya-text .text-align-right, .text-formatted .text-align-right, .ck-content .text-align-right {
    text-align: right;
  }

/* Lead paragraph style, available to editors via CKEditor's Style plugin. */
.maya-lead {
  font-family: "Roboto Flex", ui-sans-serif, system-ui, sans-serif;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: 0px;
  font-weight: 400;
}
@media (min-width: 1024px) {
  .maya-lead {
    font-size: 24px;
    line-height: 32px;
    letter-spacing: 0px;
    font-weight: 400;
  }
}
/* Page title and the small "page label" that can sit above it. */
.maya-page-title {
  margin-bottom: 12px;
  font-family: "Roboto Slab", ui-serif, Georgia, serif;
  font-size: 32px;
  line-height: 40px;
  letter-spacing: 0px;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(11 11 11 / var(--tw-text-opacity, 1));
}
@media (min-width: 768px) {
  .maya-page-title {
    margin-bottom: 20px;
  }
}
@media (min-width: 1024px) {
  .maya-page-title {
    font-size: 46px;
    line-height: 56px;
    letter-spacing: 0px;
    font-weight: 600;
  }
}

.maya-page-label {
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.maya-page-label__text {
  margin: 0;
  font-family: "Roboto Flex", ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0px;
  font-weight: 800;
  text-transform: uppercase;
  --tw-text-opacity: 1;
  color: rgb(182 74 0 / var(--tw-text-opacity, 1));
}

.maya-page-label__bar {
  height: 4px;
  width: 12px;
  --tw-bg-opacity: 1;
  background-color: rgb(182 74 0 / var(--tw-bg-opacity, 1));
}

.maya-page-description {
  margin-bottom: 20px;
  font-family: "Roboto Flex", ui-sans-serif, system-ui, sans-serif;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: 0px;
  font-weight: 400;
}

@media (min-width: 1024px) {
  .maya-page-description {
    font-size: 24px;
    line-height: 32px;
    letter-spacing: 0px;
    font-weight: 400;
  }
}

/*
 * Home page pieces, after SF.gov's home page (sfgov-next HomePage,
 * Spotlight, Tile and ZebraStripeSection components).
 *
 * Used by page--front.html.twig, the band, spotlight and tile components,
 * and menu--maya-tiles.html.twig.
 */

/* Bands: full-width sections; consecutive bands alternate colors. */
.maya-band {
  padding-top: 20px;
  padding-bottom: 20px;
}
@media (min-width: 768px) {
  .maya-band {
    padding-top: 28px;
    padding-bottom: 28px;
  }
}
@media (min-width: 1024px) {
  .maya-band {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}

.maya-zebra > .maya-band:nth-child(even) {
  --tw-bg-opacity: 1;
  background-color: rgb(247 248 248 / var(--tw-bg-opacity, 1));
}

.maya-band--white {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(252 252 252 / var(--tw-bg-opacity, 1)) !important;
}

.maya-band--neutral {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(247 248 248 / var(--tw-bg-opacity, 1)) !important;
}

.maya-band--primary {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(233 241 254 / var(--tw-bg-opacity, 1)) !important;
}

.maya-band--secondary {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(242 249 250 / var(--tw-bg-opacity, 1)) !important;
}

.maya-band__heading {
  margin: 0;
  margin-bottom: 28px;
  font-family: "Roboto Slab", ui-serif, Georgia, serif;
  font-size: 32px;
  line-height: 40px;
  letter-spacing: 0px;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(11 11 11 / var(--tw-text-opacity, 1));
}

@media (min-width: 1024px) {
  .maya-band__heading {
    margin-bottom: 20px;
    font-size: 40px;
    line-height: 52px;
    letter-spacing: 0px;
    font-weight: 500;
  }
}

/* Spotlight. */
.maya-front__spotlight {
  margin-bottom: 20px;
  max-width: 1076px;
}
@media (min-width: 1024px) {
  .maya-front__spotlight {
    margin-left: 96px;
    margin-right: 96px;
  }
}
@media (min-width: 1280px) {
  .maya-front__spotlight {
    margin-left: auto;
    margin-right: auto;
  }
}

.maya-spotlight {
  display: flex;
  flex-direction: column;
  -moz-column-gap: 28px;
       column-gap: 28px;
  row-gap: 20px;
  --tw-bg-opacity: 1;
  background-color: rgb(233 241 254 / var(--tw-bg-opacity, 1));
  padding: 20px;
}

@media (min-width: 768px) {
  .maya-spotlight {
    flex-direction: row-reverse;
    align-items: center;
    border-radius: 4px;
    padding: 28px;
  }
  .maya-spotlight--image-left {
    flex-direction: row;
  }
}

.maya-spotlight--green {
  --tw-bg-opacity: 1;
  background-color: rgb(230 244 245 / var(--tw-bg-opacity, 1));
}

.maya-spotlight--orange {
  --tw-bg-opacity: 1;
  background-color: rgb(254 237 227 / var(--tw-bg-opacity, 1));
}

.maya-spotlight--black {
  --tw-bg-opacity: 1;
  background-color: rgb(32 33 33 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(252 252 252 / var(--tw-text-opacity, 1));
}

@media (min-width: 768px) {
  .maya-spotlight__media,
.maya-spotlight__content {
    flex-grow: 1;
    flex-basis: 0;
  }
}

.maya-spotlight__media img {
  display: block;
  aspect-ratio: 4/3;
  height: auto;
  width: 100%;
  border-radius: 4px;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top;
     object-position: top;
}

.maya-spotlight__content {
  display: flex;
  flex-direction: column;
  row-gap: 20px;
}

.maya-spotlight__heading {
  margin: 0;
  font-family: "Roboto Slab", ui-serif, Georgia, serif;
  font-size: 24px;
  line-height: 32px;
  letter-spacing: 0px;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(0 29 78 / var(--tw-text-opacity, 1));
}

@media (min-width: 1024px) {
  .maya-spotlight__heading {
    font-size: 32px;
    line-height: 44px;
    letter-spacing: 0px;
    font-weight: 600;
  }
}

.maya-spotlight--black .maya-spotlight__heading,
.maya-spotlight--black .maya-spotlight__body {
  --tw-text-opacity: 1;
  color: rgb(252 252 252 / var(--tw-text-opacity, 1));
}

.maya-spotlight__body {
  --tw-text-opacity: 1;
  color: rgb(0 29 78 / var(--tw-text-opacity, 1));
}

.maya-spotlight__body > :last-child,
.maya-spotlight__body .text-formatted > :last-child {
  margin-bottom: 0;
}

.maya-spotlight--no-image .maya-spotlight__content {
  max-width: 616px;
}

/* Link tiles: heading and arrow, separated by rules. */
.maya-tile-list {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  row-gap: 20px;
}
@media (min-width: 1024px) {
  .maya-tile-list {
    gap: 24px;
  }
}

.maya-link-tile {
  display: flex;
  align-items: flex-start;
  -moz-column-gap: 18px;
       column-gap: 18px;
  border-width: 0;
  border-bottom-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(201 202 202 / var(--tw-border-opacity, 1));
  padding-bottom: 16px;
  --tw-text-opacity: 1;
  color: rgb(11 12 12 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
}

@media (min-width: 768px) {
  .maya-link-tile {
    padding-bottom: 20px;
  }
}

@media (min-width: 1024px) {
  .maya-link-tile {
    padding-bottom: 24px;
  }
}

.maya-link-tile:last-child,
.maya-card .maya-link-tile {
  border-bottom-width: 0;
  padding-bottom: 0;
}

.maya-link-tile:hover {
  --tw-text-opacity: 1;
  color: rgb(11 12 12 / var(--tw-text-opacity, 1));
}

.maya-link-tile__body {
  margin-right: 12px;
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  gap: 12px;
}

.maya-link-tile__heading {
  font-family: "Roboto Flex", ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0px;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(42 96 175 / var(--tw-text-opacity, 1));
}

@media (min-width: 1024px) {
  .maya-link-tile__heading {
    font-size: 20px;
    line-height: 28px;
    letter-spacing: 0px;
    font-weight: 700;
  }
}

.maya-link-tile:hover .maya-link-tile__heading,
.maya-link-tile:hover .maya-link-tile__arrow {
  --tw-text-opacity: 1;
  color: rgb(0 29 78 / var(--tw-text-opacity, 1));
}

.maya-link-tile__description {
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0px;
  font-weight: 400;
}

.maya-link-tile__arrow {
  margin-top: 2px;
  flex-shrink: 0;
  --tw-text-opacity: 1;
  color: rgb(42 96 175 / var(--tw-text-opacity, 1));
}

/* Cards: bordered link tiles with descriptions. */
.maya-card {
  border-radius: 4px;
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(201 202 202 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(252 252 252 / var(--tw-bg-opacity, 1));
  padding: 16px;
}
@media (min-width: 768px) {
  .maya-card {
    padding: 20px;
  }
}
@media (min-width: 1024px) {
  .maya-card {
    padding-left: 24px;
    padding-right: 24px;
    padding-top: 32px;
    padding-bottom: 32px;
  }
}

.maya-card-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  row-gap: 20px;
}

@media (min-width: 1024px) {
  .maya-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
}

@media (min-width: 1280px) {
  .maya-card-grid--wide {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Link tiles beside cards, as in SF.gov's Services section. */
.maya-tile-layout {
  display: flex;
  flex-direction: column;
  row-gap: 20px;
}
@media (min-width: 1024px) {
  .maya-tile-layout {
    flex-direction: row;
    -moz-column-gap: 96px;
         column-gap: 96px;
  }
  .maya-tile-layout__links {
    flex-basis: 36%;
  }
  .maya-tile-layout__cards {
    flex-basis: 53%;
  }
}

/* Quick links: an arrow in a circle before a slab heading. */
.maya-quick-links {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 28px;
}
@media (min-width: 1024px) {
  .maya-quick-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 32px;
  }
}

.maya-quick-link {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  --tw-text-opacity: 1;
  color: rgb(11 12 12 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
}

.maya-quick-link__icon {
  display: flex;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(233 241 254 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(27 81 158 / var(--tw-text-opacity, 1));
}

@media (min-width: 1024px) {
  .maya-quick-link__icon {
    width: 46px;
    height: 46px;
  }
}

.maya-quick-link__icon svg {
  width: 18px;
  height: 18px;
}

@media (min-width: 1024px) {
  .maya-quick-link__icon svg {
    width: 24px;
    height: 24px;
  }
}

.maya-quick-link__body {
  display: flex;
  flex-basis: 100%;
  flex-direction: column;
  gap: 8px;
}

.maya-quick-link__heading {
  padding-top: 1px;
  font-family: "Roboto Slab", ui-serif, Georgia, serif;
  font-size: 20px;
  line-height: 28px;
  letter-spacing: 0px;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(27 81 158 / var(--tw-text-opacity, 1));
  text-decoration-line: underline;
}

@media (min-width: 1024px) {
  .maya-quick-link__heading {
    padding-top: 7px;
    font-size: 24px;
    line-height: 32px;
    letter-spacing: 0px;
    font-weight: 500;
  }
}

.maya-quick-link:hover .maya-quick-link__heading {
  --tw-text-opacity: 1;
  color: rgb(0 29 78 / var(--tw-text-opacity, 1));
}

.maya-quick-link:hover .maya-quick-link__icon {
  --tw-bg-opacity: 1;
  background-color: rgb(223 235 253 / var(--tw-bg-opacity, 1));
}

/* Front page content band: promoted content in two columns. */
@media (min-width: 1024px) {
  .maya-front__content .view-content {
    -moz-columns: 2;
         columns: 2;
    gap: 28px;
  }
}

.maya-front__content .views-row {
  -moz-column-break-inside: avoid;
       break-inside: avoid;
}

.maya-front__content .feed-icons {
  margin-top: 28px;
}

/* Footer social links (menu--maya-social.html.twig). */
.maya-social {
  margin: 0;
  margin-left: 12px;
  display: flex;
  list-style-type: none;
  flex-wrap: wrap;
  gap: 28px;
  padding: 0;
}

.maya-footer .maya-social {
  flex-direction: row;
}

.maya-social__link {
  display: inline-flex;
  --tw-text-opacity: 1;
  color: rgb(252 252 252 / var(--tw-text-opacity, 1));
}

/* Footer skyline. */
.maya-footer__skyline {
  position: relative;
  height: 96px;
  overflow: hidden;
}
@media (min-width: 768px) {
  .maya-footer__skyline {
    height: 103px;
  }
}
/* Documentation site layout. */
/* Header. */
.docs-header {
  position: relative;
  z-index: 10;
  --tw-bg-opacity: 1;
  background-color: rgb(252 252 252 / var(--tw-bg-opacity, 1));
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
@media (min-width: 1024px) {
  .docs-header {
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }
}

.docs-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  -moz-column-gap: 28px;
       column-gap: 28px;
  row-gap: 12px;
  padding-top: 16px;
  padding-bottom: 16px;
}

@media (min-width: 1024px) {
  .docs-header__inner {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}

.docs-brand {
  margin-right: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  --tw-text-opacity: 1;
  color: rgb(11 11 11 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
}

@media (min-width: 1024px) {
  .docs-brand {
    margin-right: 0;
  }
}

.docs-brand:hover {
  --tw-text-opacity: 1;
  color: rgb(11 11 11 / var(--tw-text-opacity, 1));
}

.docs-brand img {
  height: 30px;
  width: auto;
}

@media (min-width: 768px) {
  .docs-brand img {
    height: 40px;
  }
}

.docs-brand span {
  font-family: "Roboto Slab", ui-serif, Georgia, serif;
  font-size: 24px;
  font-weight: 800;
  line-height: 32px;
}

@media (min-width: 1280px) {
  .docs-brand span {
    font-size: 32px;
    line-height: 44px;
    letter-spacing: 0px;
    font-weight: 800;
  }
}

.docs-header__nav {
  order: 9999;
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  -moz-column-gap: 4px;
       column-gap: 4px;
}

@media (min-width: 1024px) {
  .docs-header__nav {
    order: 0;
    width: auto;
    flex-grow: 1;
  }
}

.docs-header__nav a {
  border-radius: 4px;
  padding-left: 8px;
  padding-right: 8px;
  padding-top: 8px;
  padding-bottom: 8px;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0px;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(11 12 12 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
}

.docs-header__nav a:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(223 235 253 / var(--tw-bg-opacity, 1));
}

@media (min-width: 1024px) {
  .docs-header__nav a {
    padding-top: 15px;
    padding-bottom: 15px;
  }
}

.docs-header__nav a[aria-current='page'] {
  text-decoration-line: underline;
  text-decoration-color: #2A60AF;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.docs-header__cta {
  display: none;
  padding-top: 12px;
  padding-bottom: 12px;
}

@media (min-width: 1280px) {
  .docs-header__cta {
    display: inline-flex;
  }
}

/* Inner pages: side navigation and content. */
.docs-layout {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 28px;
}
@media (min-width: 1024px) {
  .docs-layout {
    margin-top: 0;
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}

.docs-sidenav {
  display: none;
}

@media (min-width: 1024px) {
  .docs-sidenav {
    grid-column: span 3 / span 3;
    display: block;
  }
}

.docs-sidenav ul {
  margin: 0;
  display: flex;
  list-style-type: none;
  flex-direction: column;
  gap: 4px;
  border-width: 0;
  border-left-width: 2px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(201 202 202 / var(--tw-border-opacity, 1));
  padding: 0;
}

.docs-sidenav a {
  margin-left: -2px;
  display: block;
  border-width: 0;
  border-left-width: 2px;
  border-style: solid;
  border-color: transparent;
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 16px;
  --tw-text-opacity: 1;
  color: rgb(11 12 12 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
}

.docs-sidenav a:hover {
  --tw-border-opacity: 1;
  border-color: rgb(42 96 175 / var(--tw-border-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(27 81 158 / var(--tw-text-opacity, 1));
}

.docs-sidenav a[aria-current='page'] {
  --tw-border-opacity: 1;
  border-color: rgb(42 96 175 / var(--tw-border-opacity, 1));
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(27 81 158 / var(--tw-text-opacity, 1));
}

.docs-content {
  min-width: 0;
}

@media (min-width: 1024px) {
  .docs-content {
    grid-column: span 9 / span 9;
    max-width: 760px;
  }
}

.docs-content h1 {
  margin-bottom: 20px;
  font-family: "Roboto Slab", ui-serif, Georgia, serif;
  font-size: 32px;
  line-height: 40px;
  letter-spacing: 0px;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(11 11 11 / var(--tw-text-opacity, 1));
}

@media (min-width: 1024px) {
  .docs-content h1 {
    font-size: 46px;
    line-height: 56px;
    letter-spacing: 0px;
    font-weight: 600;
  }
}

.docs-content h2[id],
.docs-content h3[id] {
  scroll-margin-top: 20px;
}

.docs-content pre {
  --tw-bg-opacity: 1;
  background-color: rgb(0 9 37 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(252 252 252 / var(--tw-text-opacity, 1));
}

.docs-content pre code {
  --tw-text-opacity: 1;
  color: rgb(252 252 252 / var(--tw-text-opacity, 1));
}

.docs-content img {
  border-radius: 4px;
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(201 202 202 / var(--tw-border-opacity, 1));
}

.docs-content .admonition {
  margin-bottom: 20px;
  border-radius: 4px;
  border-width: 0;
  border-left-width: 4px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(0 70 194 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(229 241 255 / var(--tw-bg-opacity, 1));
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 16px;
  padding-bottom: 16px;
}

.docs-content .admonition.warning {
  --tw-border-opacity: 1;
  border-color: rgb(132 63 0 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(250 239 225 / var(--tw-bg-opacity, 1));
}

.docs-content .admonition-title {
  margin-bottom: 4px;
  font-weight: 700;
}

.docs-pager {
  margin-top: 60px;
  display: grid;
  gap: 20px;
  border-width: 0;
  border-top-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(201 202 202 / var(--tw-border-opacity, 1));
  padding-top: 28px;
}

@media (min-width: 768px) {
  .docs-pager {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.docs-pager .maya-link-tile {
  border-width: 0;
  padding: 0;
}

@media (min-width: 768px) {
  .docs-pager .maya-link-tile:nth-child(2) {
    text-align: right;
  }
}

.docs-pager .maya-link-tile__body {
  gap: 4px;
}

.docs-edit {
  margin-top: 28px;
  font-size: 14px;
  line-height: 24px;
}

/* Home page. */
.docs-home {
  max-width: none;
}

.docs-home > h2:first-child {
  margin-top: 0;
}

.docs-home .maya-card-grid {
  margin-bottom: 40px;
  margin-top: 20px;
}

.docs-screens {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 28px;
}

@media (min-width: 768px) {
  .docs-screens {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.docs-screens figure {
  margin: 0;
}

.docs-screens img {
  display: block;
  height: auto;
  width: 100%;
  border-radius: 4px;
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(201 202 202 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(252 252 252 / var(--tw-bg-opacity, 1));
}

.docs-screens figcaption {
  margin-top: 8px;
  font-size: 14px;
  line-height: 24px;
  --tw-text-opacity: 1;
  color: rgb(83 84 84 / var(--tw-text-opacity, 1));
}

.docs-screens__phone img {
  margin-left: auto;
  margin-right: auto;
  max-width: 320px;
}

/* Color swatches on the tokens page. */
.docs-swatch {
  display: inline-block;
  height: 24px;
  width: 48px;
  border-radius: 2px;
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(201 202 202 / var(--tw-border-opacity, 1));
  vertical-align: middle;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.absolute {
  position: absolute;
}
.bottom-0 {
  bottom: 0;
}
.bottom-\[-6px\] {
  bottom: -6px;
}
.left-0 {
  left: 0;
}
.left-\[55px\] {
  left: 55px;
}
.left-\[95px\] {
  left: 95px;
}
.right-\[-60px\] {
  right: -60px;
}
.right-\[-70px\] {
  right: -70px;
}
.right-\[17px\] {
  right: 17px;
}
.right-\[183px\] {
  right: 183px;
}
.top-\[29px\] {
  top: 29px;
}
.z-10 {
  z-index: 10;
}
.z-20 {
  z-index: 20;
}
.m-0 {
  margin: 0;
}
.mt-0 {
  margin-top: 0;
}
.block {
  display: block;
}
.flex {
  display: flex;
}
.grid {
  display: grid;
}
.hidden {
  display: none;
}
.max-w-sm {
  max-width: 340px;
}
.flex-wrap {
  flex-wrap: wrap;
}
.gap-12 {
  gap: 12px;
}
.gap-28 {
  gap: 28px;
}
.gap-y-40 {
  row-gap: 40px;
}
.border-neutral200 {
  --tw-border-opacity: 1;
  border-color: rgb(201 202 202 / var(--tw-border-opacity, 1));
}
.bg-accent50 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 237 227 / var(--tw-bg-opacity, 1));
}
.bg-neutral50 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 240 240 / var(--tw-bg-opacity, 1));
}
.p-20 {
  padding: 20px;
}
.py-40 {
  padding-top: 40px;
  padding-bottom: 40px;
}
.pt-28 {
  padding-top: 28px;
}
.font-body {
  font-family: "Roboto Flex", ui-sans-serif, system-ui, sans-serif;
}
.font-mono {
  font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
.font-sans {
  font-family: "Roboto Flex", ui-sans-serif, system-ui, sans-serif;
}
.font-slab {
  font-family: "Roboto Slab", ui-serif, Georgia, serif;
}
.text-body {
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0px;
  font-weight: 400;
}
.text-desktop-display-lg {
  font-size: 24px;
  line-height: 32px;
  letter-spacing: 0px;
  font-weight: 400;
}
.text-desktop-display-xxxl {
  font-size: 46px;
  line-height: 56px;
  letter-spacing: 0px;
  font-weight: 600;
}
.text-desktop-heading-lg {
  font-size: 24px;
  line-height: 32px;
  letter-spacing: 0px;
  font-weight: 500;
}
.text-desktop-heading-lg-li {
  font-size: 24px;
  line-height: 32px;
  letter-spacing: 0px;
  font-weight: 600;
}
.text-desktop-heading-md {
  font-size: 20px;
  line-height: 28px;
  letter-spacing: 0px;
  font-weight: 700;
}
.text-desktop-heading-sm {
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0px;
  font-weight: 800;
}
.text-desktop-heading-xl {
  font-size: 32px;
  line-height: 44px;
  letter-spacing: 0px;
  font-weight: 600;
}
.text-desktop-heading-xs {
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0px;
  font-weight: 300;
}
.text-desktop-heading-xxl {
  font-size: 40px;
  line-height: 52px;
  letter-spacing: 0px;
  font-weight: 500;
}
.text-display-lg {
  font-size: 20px;
  line-height: 24px;
  letter-spacing: 0px;
  font-weight: 400;
}
.text-display-xxxl {
  font-size: 32px;
  line-height: 40px;
  letter-spacing: 0px;
  font-weight: 600;
}
.text-heading-lg {
  font-size: 20px;
  line-height: 28px;
  letter-spacing: 0px;
  font-weight: 500;
}
.text-heading-lg-li {
  font-size: 20px;
  line-height: 28px;
  letter-spacing: 0px;
  font-weight: 600;
}
.text-heading-md {
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0px;
  font-weight: 700;
}
.text-heading-sm {
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0px;
  font-weight: 800;
}
.text-heading-xl {
  font-size: 24px;
  line-height: 32px;
  letter-spacing: 0px;
  font-weight: 600;
}
.text-heading-xs {
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0px;
  font-weight: 300;
}
.text-heading-xxl {
  font-size: 28px;
  line-height: 36px;
  letter-spacing: 0px;
  font-weight: 500;
}
.text-label-md {
  font-size: 20px;
  line-height: 28px;
  letter-spacing: 0px;
  font-weight: 400;
}
.text-label-sm {
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0px;
  font-weight: 400;
}
.text-label-xs {
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0px;
  font-weight: 400;
}
.text-small {
  font-size: 14px;
  line-height: 24px;
}
.text-neutral600 {
  --tw-text-opacity: 1;
  color: rgb(83 84 84 / var(--tw-text-opacity, 1));
}
.text-primary500 {
  --tw-text-opacity: 1;
  color: rgb(42 96 175 / var(--tw-text-opacity, 1));
}
@media (min-width: 768px) {
  .md\:bottom-0 {
    bottom: 0;
  }
  .md\:right-0 {
    right: 0;
  }
  .md\:right-\[259px\] {
    right: 259px;
  }
  .md\:top-\[33px\] {
    top: 33px;
  }
  .md\:col-span-5 {
    grid-column: span 5 / span 5;
  }
  .md\:col-span-7 {
    grid-column: span 7 / span 7;
  }
  .md\:block {
    display: block;
  }
  .md\:grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .md\:gap-28 {
    gap: 28px;
  }
  .md\:pt-48 {
    padding-top: 48px;
  }
}
@media (min-width: 1024px) {
  .lg\:mt-20 {
    margin-top: 20px;
  }
  .lg\:text-desktop-heading-xl {
    font-size: 32px;
    line-height: 44px;
    letter-spacing: 0px;
    font-weight: 600;
  }
}