body {
  background-color: #FDFBF9;
  margin: 0;

  --body-pad: 24px;
  padding: 0 var(--body-pad);

  display: flex; /* ensure footer sticks to bottom */
  flex-direction: column; /* ensure footer sticks to bottom */
  min-height: 100vh; /* ensure footer sticks to bottom */

  max-width: 2120px;
  margin: 0 auto;
}

@media (max-width: 480px) {
  body {
    --body-pad: 16px;
    padding: 0 var(--body-pad);
  }
}

/* Pages opt into the alternative page background by placing an empty
   <alt-background></alt-background> element anywhere in their content. */
body:has(alt-background) {
  background-color: #FFFEF7;
}

alt-background {
  display: none;
}

body {
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 16px;
  color: #000000;
  line-height: 1.6;
  font-weight: 350;
}

h1-alt {
  display: block;
  font-family: "Cardo", "Hanken Grotesk", sans-serif;
  font-weight: 350;
  font-size: 30px;
  margin-bottom: 0px;
}

h2-alt {
  display: block;
  font-family: "Cardo", "Hanken Grotesk", sans-serif;
  font-weight: 350;
  font-size: 22px;
  margin-bottom: 0px;
}

h3-alt {
  display: block;
  font-family: "Cardo", "Hanken Grotesk", sans-serif;
  font-weight: 350;
  font-size: 20px;
  margin-bottom: 0px;
}

h1 {
  display: block;
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 350;
  font-size: 30px;
  margin-bottom: 0px;
}

h2 {
  display: block;
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 350;
  font-size: 22px;
  margin-bottom: 0px;
}

h3 {
  display: block;
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 350;
  font-size: 20px;
  margin-bottom: 0px;
}

a {
  color: #000000;
}

footnote-text {
  margin-top: 16px;
  margin-bottom: 16px;
  display: block;
  font-size: 12px;
  line-height: 16px;
  color: #8d8d8d;
}

footnote-text a {
  color: #8d8d8d;
}

:is(.btn, button, input[role="button"], a[role="button"]) {
  margin: 0;
  overflow: visible;
  text-transform: none;
  box-sizing: border-box;
  border-width: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  padding: 0 24px;
  height: 40px;
  border-radius: 40px;
  background-color: #000000;
  color: #FFFFFF;
  margin-bottom: 0px;
  font-family: "Hanken Grotesk", "HK Grotesk", sans-serif;
  font-size: 14px;
  text-decoration: none;
}

:is(.btn, button, input[role="button"], a[role="button"]).invert {
  background-color: rgba(255, 255, 255, 0);
  color: #000000;
  border: 1px solid #000000;
}

:is(.btn, button, input[role="button"], a[role="button"]):disabled,
:is(.btn, button, input[role="button"], a[role="button"])[aria-disabled="true"] {
  background-color: #585565;
  color: #8D8D8D;
  cursor: not-allowed;
  border: none;
}

:is(.btn, button, input[role="button"], a[role="button"]).invert:disabled,
:is(.btn, button, input[role="button"], a[role="button"]).invert[aria-disabled="true"] {
  background-color: rgba(255, 255, 255, 0);
  color: #000000;
  border: 1px solid #000000;
  opacity: 0.35;
  cursor: not-allowed;
}

:is(.btn, button, input[role="button"], a[role="button"]).full-width {
  width: 100%;
}

:is(.btn, button, input[role="button"], a[role="button"]).arrow::after {
  content: url("data:image/svg+xml,%3Csvg width='17' height='16' viewBox='0 0 17 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 7.86477L0 7.86477M16 7.86477L8 15.3648M16 7.86477L7.99999 0.364777' stroke='%23FFFFFF' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  margin-inline-start: 10px;
  margin-top: 5px;
}

:is(.btn, button, input[role="button"], a[role="button"]).arrow.invert::after {
  content: url("data:image/svg+xml,%3Csvg width='17' height='16' viewBox='0 0 17 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 7.86477L0 7.86477M16 7.86477L8 15.3648M16 7.86477L7.99999 0.364777' stroke='%23121212' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

:is(.btn, button, input[role="button"], a[role="button"]).arrow-left::before {
  content: url("data:image/svg+xml,%3Csvg width='17' height='16' viewBox='0 0 17 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 7.86477L17 7.86477M1 7.86477L9 15.3648M1 7.86477L9 0.364777' stroke='%23FFFFFF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  margin-inline-end: 10px;
  margin-top: 5px;
}

:is(.btn, button, input[role="button"], a[role="button"]).arrow-left.invert::before {
  content: url("data:image/svg+xml,%3Csvg width='17' height='16' viewBox='0 0 17 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 7.86477L17 7.86477M1 7.86477L9 15.3648M1 7.86477L9 0.364777' stroke='%23121212' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

:is(.btn, button, input[role="button"], a[role="button"]).arrow:not(.invert):disabled::after,
:is(.btn, button, input[role="button"], a[role="button"]).arrow:not(.invert)[aria-disabled="true"]::after {
  content: url("data:image/svg+xml,%3Csvg width='17' height='16' viewBox='0 0 17 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 7.86477L0 7.86477M16 7.86477L8 15.3648M16 7.86477L7.99999 0.364777' stroke='%238D8D8D' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

:is(.btn, button, input[role="button"], a[role="button"]).arrow-left:not(.invert):disabled::before,
:is(.btn, button, input[role="button"], a[role="button"]).arrow-left:not(.invert)[aria-disabled="true"]::before {
  content: url("data:image/svg+xml,%3Csvg width='17' height='16' viewBox='0 0 17 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 7.86477L17 7.86477M1 7.86477L9 15.3648M1 7.86477L9 0.364777' stroke='%238D8D8D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Right to left, forward points left. Back (.arrow-left) isn't mirrored: its
   arrow points left in every language. */
:is(.btn, button, input[role="button"], a[role="button"]).arrow:dir(rtl)::after {
  transform: scaleX(-1);
}

.bottom-sticky-button {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px 24px;
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  background-color: #FDFBF9;
  box-shadow: none;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: box-shadow 0.2s ease;
}

.bottom-sticky-button.has-shadow {
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
}

.bottom-sticky-spacer {
  height: 80px;
}

.bottom-sticky-button.split {
  flex-direction: row;
  gap: 8px;
}

.bottom-sticky-button.split > :first-child {
  flex: 0;
}

.bottom-sticky-button.split > :last-child {
  flex: 1;
}

@media (min-width: 768px) {
  .bottom-sticky-button.split.desktop-contained {
    padding-left: calc(50% - 224px);
    padding-right: calc(50% - 224px);
    justify-content: space-between;
  }

  .bottom-sticky-button.split.desktop-contained > :last-child {
    flex: 0 1 auto;
    width: fit-content;
    min-width: 190px;
    max-width: 100%;
  }
}

:is(.btn, button, input[role="button"], a[role="button"]).no-border {
  border: none;
}

:is(row-display, .row-display) {
  display: flex;
  flex-direction: column;
}

column-display {
  display: flex;
}

centered-container-box {
  margin: 0 auto;
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 720px;
  border: 1px solid #ccc;
  padding: 20px;
  background: #FFFEF7;
  border: none;
  background: none;
}

centered-container-box[width="480"] {
  max-width: 480px;
}

centered-container-box[width="720"] {
  max-width: 720px;
}

centered-container-box[width="1080"] {
  max-width: 1080px;
}

decorated-container-box {
  display: block;
  border-radius: 4px;
  background-color: #EAEAE2;
  padding: 16px;
}

/* ── Responsive preview wrapper ── */
centered-container-box-responsive {
  display: flex;
  align-items: flex-start;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  position: relative;
}

centered-container-box-responsive[width="480"] {
  max-width: 480px;
}

centered-container-box-responsive[width="720"] {
  max-width: 720px;
}

centered-container-box-responsive[width="1080"] {
  max-width: 1080px;
}

.responsive-preview-inner {
  width: 100%;
  min-width: 280px;
  overflow: hidden;
  flex-shrink: 0;
  container-type: inline-size;
}

.responsive-preview-handle {
  flex-shrink: 0;
  width: 20px;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: ew-resize;
  color: #B0AFA9;
  transition: color 0.15s ease;
}

.responsive-preview-handle:hover,
.responsive-preview-handle.is-dragging {
  color: #474747;
}

.responsive-preview-grip {
  display: block;
  width: 4px;
  height: 32px;
  border-left: 2px dotted currentColor;
  border-right: 2px dotted currentColor;
}

.responsive-preview-badge {
  position: absolute;
  top: 0;
  right: 24px;
  font-size: 11px;
  font-family: monospace;
  color: #B0AFA9;
  line-height: 1;
  padding: 2px 4px;
  pointer-events: none;
  user-select: none;
}

.header-bar {
  padding: 16px 0;
  display: flex;
  align-items: center;
  font-size: 18px;
  position: relative;
  z-index: 31;
}

.header-rhs {
  margin-inline-start: auto;
}

/* With the language switcher, a flex row rather than inline content on a text
   line: there the globe would pick up the line's descender, growing the
   header, and wrap onto a second line beside the burger. Scoped to the
   switcher so headers without one keep their exact layout. */
.header-rhs:has(locale-switcher-trigger) {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-bar a {
  text-decoration: none;
  color: #000000;
}
.header-bar a:hover {
  text-decoration: underline;
}

.header-logo-link:hover {
  text-decoration: none;
}

.header-nav {
  display: none;
}

@media (min-width: 768px) {
  .header-nav {
    display: flex;
    margin-inline-start: 20px;
  }
}

.header-nav-list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
}

.header-nav-item {
  position: relative;
  font-family: "Hanken Grotesk", "HK Grotesk", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 22px;
  font-feature-settings: "kern";
  text-rendering: optimizelegibility;
  -webkit-font-smoothing: antialiased;
}

.header-nav-item > a,
.header-nav-item > span {
  display: block;
  color: rgb(0, 0, 0);
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  padding: 8px 12px;
  position: relative;
  top: -2px;
}

.header-nav-item > a:hover,
.header-nav-item > span:hover {
  text-decoration: underline;
}

.header-nav-dropdown {
  display: none;
  position: fixed;
  top: auto;
  left: 0;
  right: 0;
  background: #FFFEF7;
  border: none;
  list-style: none;
  margin: 0;
  padding: 50px 0 74px;
  z-index: 30;
}

.header-nav .header-nav-item.has-children:hover .header-nav-dropdown {
  display: block;
}

.header-nav-overlay {
  position: fixed;
  top: 56px;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 29;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
  /* Never intercept the pointer: the overlay is a sibling of the nav, so
     hovering it would drop the nav's :hover and flicker the dropdown shut. */
  pointer-events: none;
}

/* Show the dimmer whenever a dropdown is open. Tied to the same :hover as the
   dropdown itself (the overlay is a following sibling of the nav) so the two
   can never desync — including on first paint when the cursor already sits
   over the nav and no mouseenter event would fire. */
.header-nav:has(.header-nav-item.has-children:hover) ~ .header-nav-overlay {
  opacity: 1;
  visibility: visible;
}

.header-nav-dropdown li a {
  display: block;
  padding: 9px 24px;
  font-family: "Hanken Grotesk", "HK Grotesk", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 22px;
  font-feature-settings: "kern";
  text-rendering: optimizelegibility;
  -webkit-font-smoothing: antialiased;
  color: rgb(0, 0, 0);
  text-decoration: none;
}

.header-nav-dropdown li a:hover {
  text-decoration: underline;
}

.login-logo {
  margin-top: 32px;
  margin-bottom: 32px;
}

.login-title {
  margin-top: 0px;
  margin-bottom: 0px;
}

.login-subtitle {
  margin-top: 10px;
  margin-bottom: 32px;
}

.click-to-hide-blade {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10;
}

#header-logged-in-detail-blade.hidden {
  display: none;
}

#header-logged-in-detail-blade .divider {
  height: 1px;
  width: 100%;
  background-color: #E6E2D9;
  margin-top: 16px;
  margin-bottom: 16px;
}

#header-logged-in-detail-blade .close-button {
  padding: 8px;
  cursor: pointer;
  text-align: end;
}

#header-logged-in-detail-blade .blade-content > ul {
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 0 0 calc(100% / 7);
  min-width: 160px;
}

#header-logged-in-detail-blade .blade-content > ul > li {
  margin-top: 16px;
  text-align: center;
}

/* Container establishes the stacking context */
#header-logged-in-detail-blade {
  position: fixed;
  top: 0;
  inset-inline-end: 0;
  height: 100%;
  z-index: 20; /* above the rest of the page */
}

/* Move panel visuals onto the content wrapper so it sits above the overlay */
#header-logged-in-detail-blade .blade-content {
  position: fixed;
  top: 0;
  inset-inline-end: 0;
  z-index: 11;               /* above the overlay */
  width: 400px;
  max-width: 80%;
  height: 100%;
  background-color: #FFFEF7; /* ensure overlay doesn't tint the panel */
  border-inline-start: 1px solid #E6E2D9;
  text-align: center;
}

/* ── Mobile burger button + slide-out navigation ── */

/* Burger shows only on mobile; desktop nav takes over at 768px */
.mobile-nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  color: #000000;
}

.mobile-nav-toggle:focus-visible {
  outline: 2px solid #000000;
  outline-offset: 2px;
}

@media (min-width: 768px) {
  .mobile-nav-toggle {
    display: none;
  }
}

/* Hide the desktop profile / sign-in controls on mobile when the burger nav
   is present — they move into the menu. Headers without a nav (no burger)
   keep them visible at all widths. */
@media (max-width: 767px) {
  .header-bar:has(.mobile-nav-toggle) .header-rhs .profile-link,
  .header-bar:has(.mobile-nav-toggle) .header-rhs .login-link {
    display: none;
  }

  /* Keeps the header height and burger position the switcher's flex row
     would otherwise change: inline, the burger sat on a text line that put
     4px above it (application-web's font; pinned by its pricing baselines). */
  .header-bar:has(.mobile-nav-toggle) .header-rhs:has(locale-switcher-trigger) {
    padding-top: 4px;
  }
}

.mobile-nav-toggle-icon {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.mobile-nav-toggle-icon span {
  display: block;
  width: 22px;
  height: 2px;
  background-color: currentColor;
}

/* Overlay container */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 40;
  visibility: hidden;
  pointer-events: none;
  box-sizing: border-box;
  /* Delay hiding until the drawer has finished sliding back out */
  transition: visibility 0s linear 0.3s;
}

/* Everything inside the drawer uses border-box so width:100% + padding
   never overflows the drawer (which would push the chevrons off-screen) */
.mobile-nav *,
.mobile-nav *::before,
.mobile-nav *::after {
  box-sizing: border-box;
}

.mobile-nav.is-open {
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s; /* show immediately on open */
}

.mobile-nav-dimmer {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.mobile-nav.is-open .mobile-nav-dimmer {
  opacity: 1;
}

/* Drawer slides in from the end edge (the right; the left right to left) */
.mobile-nav-drawer {
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  height: 100%;
  width: 90%;
  background: #FFFEF7;
  border-inline-start: 1px solid #E6E2D9;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
}

.mobile-nav-drawer:dir(rtl) {
  transform: translateX(-100%);
}

.mobile-nav.is-open .mobile-nav-drawer {
  transform: translateX(0);
}
/* On close, is-open is removed and the drawer eases back out to the right
   (its resting translateX(100%)) while the container stays visible for 0.3s. */

/* Clips the sliding panels */
.mobile-nav-viewport {
  position: relative;
  flex: 1;
  overflow: hidden;
}

.mobile-nav-panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background: #FFFEF7;
  transition: transform 0.3s ease;
}

/* Submenus rest off-screen to the right; the root rests off-screen to the left */
.mobile-nav-submenu {
  transform: translateX(100%);
}

.mobile-nav-panel:not(.mobile-nav-submenu) {
  transform: translateX(-100%);
}

/* Right to left, the directions swap */
.mobile-nav-submenu:not(.is-active):dir(rtl) {
  transform: translateX(-100%);
}

.mobile-nav-panel:not(.mobile-nav-submenu, .is-active):dir(rtl) {
  transform: translateX(100%);
}

/* The active panel sits in view (declared last so it wins on equal specificity) */
.mobile-nav-panel.is-active {
  transform: translateX(0);
}

.mobile-nav-panel-head {
  position: relative; /* anchor for the absolutely-centred title */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 56px;
  padding: 8px 16px;
}

/* Section title: centred in the head, independent of the back/close controls */
.mobile-nav-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: "Hanken Grotesk", "HK Grotesk", sans-serif;
  font-size: 14px;
  line-height: 1;
  color: #000000;
  pointer-events: none;
}

.mobile-nav-close {
  margin-inline-start: auto; /* keep the close control at the end, with or without a back control */
  cursor: pointer;
  padding: 8px;
  box-sizing: content-box; /* keep the icon 12x12 inside the padded tap target */
  width: 12px;
  height: 12px;
  background: center / 12px 12px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M1 1L11 11M11 1L1 11' stroke='black' stroke-linecap='round'/%3E%3C/svg%3E");
  color: #000000;
  text-decoration: none;
}

.mobile-nav-close:hover,
.mobile-nav-back:hover {
  text-decoration: none;
}

.mobile-nav-back {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  padding: 8px;
  color: #000000;
  text-decoration: none;
}

.mobile-nav-list {
  list-style: none;
  margin: 0;
  padding: 8px 0;
}

.mobile-nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 11px 16px;
  font-family: "Hanken Grotesk", "HK Grotesk", sans-serif;
  font-size: 18px;
  line-height: 22px;
  text-align: start;
  color: #000000;
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
}

.mobile-nav-link:hover {
  text-decoration: underline;
}

/* Light-stroke SVG chevron. The source SVG points left; the base (drill-in)
   chevron is rotated 180deg to point right. */
.mobile-nav-chevron {
  display: inline-block;
  width: 7px;
  height: 12px;
  flex-shrink: 0;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='12' viewBox='0 0 7 12' fill='none'%3E%3Cpath d='M6 0.5L0.5 6L6 11.5' stroke='black' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  transform: rotate(180deg); /* points right */
  /* Line the chevron's centre up with the close X: the X icon centre sits
     14px in from the head's content edge (8px padding + half its 12px width),
     so the 7px chevron needs a 10.5px right offset to share that column. */
  margin-inline-end: 10.5px;
}

.mobile-nav-chevron--left {
  transform: none; /* source SVG already points left */
  margin-inline-end: 0; /* back chevron sits at the start, no offset needed */
}

/* Right to left, drill-in points left and back points right */
.mobile-nav-chevron:dir(rtl) {
  transform: none;
}

.mobile-nav-chevron--left:dir(rtl) {
  transform: rotate(180deg);
}

/* Sign in / out pinned to the bottom of the root panel */
.mobile-nav-auth {
  margin-top: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mobile-nav-auth-link {
  padding: 8px 0;
  text-align: center;
  font-family: "Hanken Grotesk", "HK Grotesk", sans-serif;
  font-size: 18px;
  line-height: 22px;
  color: #000000;
  text-decoration: none;
}

.mobile-nav-auth-link:hover {
  text-decoration: underline;
}

body.mobile-nav-lock {
  overflow: hidden;
}

footer {
  margin-top: auto;
  padding: 16px 0;
  padding-top: 64px;
  padding-bottom: 8px;
}

footer a {
  text-decoration: none;
  color: #000000;
}

footer a:hover {
  text-decoration: underline;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
}

.footer-links > ul {
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 0 0 calc(100% / 7);
  min-width: 160px;
}

.footer-logo-pair {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}

img {
  position: relative;
  left: 0;
  width: 100%;
  display: block;
}

img.full-bleed {
  position: relative;
  left: calc(-1 * var(--body-pad));
  width: calc(100% + 2 * var(--body-pad));
  display: block;
}

img.rounded {
  border-radius: 4px;
}

/* ========================= */
/* SECTION ACCORDIONS (top level) */
/* ========================= */
section > details {
  padding: 24px 0 8px;
  margin: 0;
  border-top: 1px solid transparent; /* keeps spacing tidy */
}

/* Section headers (first-level summary) */
section > details > summary {
  position: relative;
  padding: 0 24px;
  margin: 0 0 8px 0;
  font-size: 1.75rem;
  line-height: 2.2rem;
  font-weight: 600;
}

/* Chevron for section headers */
section > details > summary::after {
  content: "";
  position: absolute;
  inset-inline-end: 8px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
  opacity: 0.8;
  transition: transform 0.2s ease;
}
section > details[open] > summary::after {
  transform: translateY(-50%) rotate(-135deg);
}

/* Inner container under a section */
section > details > div {
  padding: 8px 0 24px;
}

/* ========================= */
/* INNER ACCORDIONS */
/* ========================= */
section > details > div > details {
  padding: 16px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
section > details > div > details:last-child {
  border-bottom: none;
}

/* Inner summaries (questions) */
section > details > div > details > summary {
  position: relative;
  padding: 0 32px 0 24px;
  font-size: 1.125rem;
  line-height: 1.625rem;
  font-weight: 500;
  color: #111;
}

/* Plus icon */
section > details > div > details > summary::after {
  content: "";
  position: absolute;
  inset-inline-end: 8px;
  top: 50%;
  width: 14px;
  height: 14px;
  transform: translateY(-50%);
  background-repeat: no-repeat;
  background-size: 14px 14px;
  background-position: center;
  opacity: 0.9;
  transition: background-image 0.2s ease;
  background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 1v12M1 7h12' stroke='%23111' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Change icon to × when open */
section > details > div > details[open] > summary::after {
  background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 2l10 10M12 2L2 12' stroke='%23111' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Inner content */
section > details > div > details > div {
  padding: 12px 24px 0 24px;
  color: #2a2a2a;
  font-size: 1rem;
  line-height: 1.6;
}
section > details > div > details > div p {
  margin: 0 0 12px;
}

/* Reset summary markers */
details summary {
  list-style: none;
  cursor: pointer;
}
details summary::-webkit-details-marker {
  display: none;
}
details summary:focus-visible {
  outline: 3px solid rgba(0, 0, 0, 0.2);
  outline-offset: 2px;
}

accordion-list-picker {
  display: block;
  background-color: #EAEAE2;
  padding: 16px;
}

accordion-list-picker summary {
  position: relative;
  display: block;
  margin: 16px 0;
}

accordion-list-picker > details > summary::after {
  content: "";
  position: absolute;
  inset-inline-end: 8px;
  width: 6px;
  height: 6px;
  top: 50%;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
  opacity: 0.8;
  transition: transform 0.2s ease;
}

accordion-list-picker > details[open] > summary::after {
  transform: translateY(-50%) rotate(-135deg);
}

accordion-list-picker list-item {
  position: relative;
  display: block;
  padding: 15px;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  margin: 4px 0;
}

accordion-list-picker list-item[selected],
accordion-list-picker list-item:has(input[type="radio"]:checked) {
  border: 1px solid #000000;
}

/* checkmark */
accordion-list-picker list-item[selected]::after,
accordion-list-picker list-item:has(input[type="radio"]:checked)::after {
  content: "";
  position: absolute;
  inset-inline-end: 20px;
  width: 20px;
  height: 20px;
  top: 55%;
  transform: translateY(-45%) rotate(0deg);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='20 6 9 17 4 12' stroke='%231F1F1F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
}

accordion-list-picker list-item:hover {
  border: 1px solid #C4C4C4;
}

accordion-list-picker list-item[selected]:hover,
accordion-list-picker list-item:has(input[type="radio"]:checked):hover {
  border: 1px solid #000000;
}

accordion-list-picker list-item img {
  width: 34px;
  height: 34px;
}

accordion-list-picker list-item text-title {
  display: block;
  font-size: 16px;
  line-height: 1.3;
}

accordion-list-picker list-item text-subtitle {
  display: block;
  font-size: 14px;
  line-height: 1.3;
  color: #4E4E4D;
}

/* override how accordion-list-picker fits inside sheet-body as it has a default padding */
sheet-body:has(accordion-list-picker) {
  padding: 0px 0px env(safe-area-inset-bottom);
}
@media (min-width: 768px) {
  sheet-body:has(accordion-list-picker) {
    padding: 0px 0px 0px; /* remove env(safe-area-inset-bottom) */
  }
}

/* Under an untitled sheet-header, which takes 16px of the body's top to
   clear the close button (pagesheet_modal.css), the picker gives up its own
   top padding so its groups stay where they were. */
sheet-header:not(:has(sheet-title)) + sheet-body > accordion-list-picker:first-child {
  padding-top: 0;
}

:where(pagesheet-modal) {
  /* Tunables */
  --sheet-width: min(640px, 100vw);
  --sheet-radius: 10px;
  --sheet-shadow: 0 8px 24px rgba(0,0,0,.18);
  --sheet-ease: cubic-bezier(.22, 1, .36, 1);
  --dur-open: 360ms;
  --backdrop: rgba(0,0,0,.85);
  --bg: #E9E8E2;
  --text: #111;
  --muted: #6b7280;
  --border: #e5e7eb;

  /* The host draws nothing: its <dialog> is the sheet. */
  display: contents;
}

/* The page behind an open sheet doesn't scroll. Inert, it can't be
   scrolled into, but iOS Safari still scrolled it under the sheet (a swipe
   on the sheet). It keeps its scroll position, and scrolls again once no
   sheet is open. */
:root:has(pagesheet-modal[open]) {
  overflow: hidden;
}

/* The dialog fills the viewport and the backdrop and surface sit in it, so
   the UA's dialog box (border, padding, margin, a fit-content size and a
   background) is undone, and its ::backdrop is not drawn. Open, the dialog
   is in the top layer. Closed, it stays rendered, only hidden, as the
   host used to: the open transitions then start from the closed styles.
   Not :where(), and [open] too: a page's own `dialog`, `dialog[open]` or
   `dialog:modal` rules would undo the reset. Only the reset: the sheet's
   own layout below stays at the plain selector's weight, so the wider
   screen's rules (a centred dialog) still win over it. */
pagesheet-modal > dialog,
pagesheet-modal > dialog[open] {
  position: fixed;
  inset: 0;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  display: grid;
}

pagesheet-modal > dialog {
  place-items: end center;
  pointer-events: none;
  transition: opacity var(--dur-open) var(--sheet-ease);

  overscroll-behavior: contain; /* Stops scroll chaining */
  overflow: hidden;             /* No visual scroll, but takes wheel/touch */
  touch-action: none;           /* On touch devices */
}

pagesheet-modal > dialog::backdrop {
  background: transparent;
}

/* Hidden on the host, so the host itself reads as hidden, and on the
   dialog, which Chrome leaves visible once it has been shown modally.
   Visibility isn't transitioned, so closing is instant: nothing is drawn
   once the dialog leaves the top layer. */
pagesheet-modal:not([open]),
pagesheet-modal:not([open]) > dialog {
  visibility: hidden;
}

pagesheet-modal[open],
pagesheet-modal[open] > dialog {
  visibility: visible;
}

pagesheet-modal:not([open]) > dialog {
  opacity: 0;
}

pagesheet-modal[open] > dialog {
  opacity: 1;
}

/* Backdrop */
pagesheet-modal > dialog > sheet-backdrop {
  position: absolute;
  inset: 0;
  background: var(--backdrop);
  opacity: 0;
  transition: opacity var(--dur-open) ease;
}
pagesheet-modal[open] > dialog > sheet-backdrop { opacity: 1; pointer-events: auto; }

/* Sheet surface */
pagesheet-modal > dialog > sheet-surface {
  width: 100%;
  background: var(--bg);
  color: var(--text);
  border-top-left-radius: var(--sheet-radius);
  border-top-right-radius: var(--sheet-radius);
  box-shadow: var(--sheet-shadow);
  transform: translateY(100%);
  transition: transform var(--dur-open) var(--sheet-ease);
  pointer-events: auto;

  display: grid;
  grid-template-rows: auto 1fr auto; /* header, body, footer */
  max-height: min(85vh, 720px);
  min-height: 30vh;
  overflow: hidden;
  contain: layout paint;
}

pagesheet-modal.full-height > dialog > sheet-surface {
  min-height: 85vh;
}

pagesheet-modal[open] > dialog { pointer-events: auto; }
pagesheet-modal[open] > dialog > sheet-surface { transform: translateY(0); }

sheet-surface:focus {
  outline: none;
}

sheet-header { position: relative; padding: 14px 20px 10px; display: block; }

/* Without a title the header is 24px tall, but the absolutely positioned
   sheet-close (top 9px, 32px tall) reaches past it, so a scrolled body
   slid under the × (application-web#793). The header takes the body's top
   padding instead (24px + 16px = 40px, below the × glyph): the body is
   clipped under the × and its content sits where it did. A list picker,
   whose own padding replaces the body's, does the same in
   accordion_list_picker.css. */
sheet-header:not(:has(sheet-title)) {
  box-sizing: border-box;
  min-height: 40px;
}
sheet-header:not(:has(sheet-title)) + sheet-body,
pagesheet-modal.forced-as-modal sheet-header:not(:has(sheet-title)) + sheet-body {
  padding-top: 0;
}

sheet-title {
  display: block;
  text-align: center;
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 400;
  font-size: 16px;
}

sheet-body {
  display: block;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 20px calc(20px + env(safe-area-inset-bottom));
}

/* Footer: responsive 1 or 2 column grid
   - Default: single column, buttons full width
   - When horizontal space >= 480px: two columns, each 50%
 */
sheet-footer {
  display: grid;
  gap: 12px;
  justify-content: stretch;
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  grid-template-columns: 1fr;
}

@media (min-width: 480px) {
  sheet-footer {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  pagesheet-modal > dialog > sheet-surface,
  pagesheet-modal > dialog > sheet-backdrop {
    transition: none !important;
  }
}

/* Close button area */
sheet-close {
  z-index: 10;
  position: absolute;
  top: 9px;
  inset-inline-start: 8px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: #000;
  user-select: none;
}

/* Create the X using two lines via pseudo-elements */
sheet-close::before,
sheet-close::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 1px;
  background: currentColor;
  border-radius: 1px;
}

sheet-close::before {
  transform: rotate(45deg);
}

sheet-close::after {
  transform: rotate(-45deg);
}

sheet-close:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

@media (min-width: 568px) {
  ios-footer-color {
    display: none;
    opacity: 0;
  }

  /* Center the dialog's grid */
  pagesheet-modal > dialog {
    place-items: center;
  }

  /* Tweak the surface to look like a dialog */
  pagesheet-modal > dialog > sheet-surface {
    width: min(720px, 90vw);
    max-height: min(60vh, 680px);
    min-height: unset;
    border-radius: 20px;
    transform: translateY(12px) scale(.98);
    opacity: 0;
    transition:
      transform var(--dur-open) var(--sheet-ease),
      opacity var(--dur-open) var(--sheet-ease);
  }

  pagesheet-modal.full-height > dialog > sheet-surface {
    min-height: 60vh;
  }

  /* Open state for centered dialog */
  pagesheet-modal[open] > dialog > sheet-surface {
    transform: translateY(0) scale(1);
    opacity: 1;
  }

  /* Footer/body: drop safe-area padding on large screens */
  sheet-body {
    padding: 16px 24px 20px;
  }

  sheet-footer {
    padding: 12px 24px 16px;
  }
}

/* OR condition: apply large-screen styles when forced-as-modal is present, regardless of viewport */
pagesheet-modal.forced-as-modal ios-footer-color {
  display: none;
  opacity: 0;
}

/* Center the dialog's grid */
pagesheet-modal.forced-as-modal > dialog {
  place-items: center;
}

/* Tweak the surface to look like a dialog */
pagesheet-modal.forced-as-modal > dialog > sheet-surface {
  width: min(720px, 90vw);
  max-height: min(60vh, 680px);
  min-height: unset;
  border-radius: 20px;
  transform: translateY(12px) scale(.98);
  opacity: 0;
  transition:
    transform var(--dur-open) var(--sheet-ease),
    opacity var(--dur-open) var(--sheet-ease);
}

pagesheet-modal.forced-as-modal.full-height > dialog > sheet-surface {
  min-height: 60vh;
}

/* Open state for centered dialog */
pagesheet-modal.forced-as-modal[open] > dialog > sheet-surface {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* Footer/body: drop safe-area padding */
pagesheet-modal.forced-as-modal sheet-body {
  padding: 16px 24px 20px;
}

pagesheet-modal.forced-as-modal sheet-footer {
  padding: 12px 24px 16px;
}

/* Short viewports (a landscape phone, a zoomed-in desktop): 60vh leaves
   little more than the header and footer, so the dialog takes the screen's
   height less a strip of backdrop to tap away on. */
@media (min-width: 568px) and (max-height: 599px) {
  pagesheet-modal > dialog > sheet-surface {
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
  }

  pagesheet-modal.full-height > dialog > sheet-surface {
    min-height: calc(100vh - 48px);
    min-height: calc(100dvh - 48px);
  }
}

@media (max-height: 599px) {
  pagesheet-modal.forced-as-modal > dialog > sheet-surface {
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
  }

  pagesheet-modal.forced-as-modal.full-height > dialog > sheet-surface {
    min-height: calc(100vh - 48px);
    min-height: calc(100dvh - 48px);
  }
}

sheet-footer :is(.btn, button) {
  width: 100%;
}

/* If there is only ONE button in the footer, span all grid columns so it is truly full width even on wide screens */
sheet-footer :is(.btn, button):only-child {
  grid-column: 1 / -1;
}

:where(locale-switcher-trigger) {
  --locale-switcher-trigger-size: 32px;

  display: inline-flex;
}

/* `.locale-switcher-trigger-button` (not the element type) so this ties
   buttons.css's `:is(.btn, button, ...)` on specificity — :is() takes the
   highest specificity among its arguments, i.e. the `.btn` class — and wins
   on source order instead, rather than losing outright to a plain type
   selector. */
button.locale-switcher-trigger-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--locale-switcher-trigger-size);
  height: var(--locale-switcher-trigger-size);
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  color: currentColor;
}

locale-switcher-trigger svg {
  width: 100%;
  height: 100%;
}

pagesheet-modal locale-switcher-list {
  display: block;
}

locale-switcher-list list-item {
  display: block;
  border-bottom: 1px solid var(--border, #e5e7eb);
}

locale-switcher-list list-item:last-child {
  border-bottom: none;
}

locale-switcher-list label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 4px;
  cursor: pointer;
}

locale-switcher-list input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

locale-switcher-list locale-switcher-check {
  display: none;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

locale-switcher-list locale-switcher-check svg {
  width: 100%;
  height: 100%;
}

locale-switcher-list input[type="radio"]:checked ~ locale-switcher-check {
  display: block;
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-inline-end: 8px;
}

.status-dot-red {
  background-color: #BC4C4F;
}

.status-dot-green {
  background-color: #15947A;
}

traffic-light-icon {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-inline-end: 8px;
}

traffic-light-icon.red {
  background-color: #BC4C4F;
}

traffic-light-icon.lightred {
  background-color: #B87460;
}

traffic-light-icon.softmauve {
  background-color: #BA9C9A;
}

traffic-light-icon.green {
  background-color: #5F9B88;
}

traffic-light-icon.yellow {
  background-color: #D5AB4F;
}

traffic-light-icon.grey {
  background-color: #8D8D8D;
}

traffic-light-icon.lightgreen {
  background-color: #B3DEAA;
}


traffic-light {
  color: #3C393A;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

traffic-light-title {
  display: flex;
  align-items: center;
}

traffic-light-subtitle {
  padding-inline-start: 18px;
  color: #828282;
  display: block;
}

icon-with-text {
  margin-left: 14px;
  margin-right: 14px;
  margin-top: 8px;
  margin-bottom: 8px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: '#3C393A';
}

icon {
  margin-top: 2px;
  display: inline-block;
  width: 21px;
  min-width: 21px;
  height: 21px;
  background: center / 100% 100% no-repeat;
}

/* Attribute-driven icon sources */
icon[image="pay-at-house"] {
    background-image: url('data:image/svg+xml;base64,PHN2ZwogICB2ZXJzaW9uPSIxLjEiCiAgIGlkPSJzdmcxIgogICB3aWR0aD0iMjgiCiAgIGhlaWdodD0iMjgiCiAgIHZpZXdCb3g9IjAgMCAyOCAyOCIKICAgc29kaXBvZGk6ZG9jbmFtZT0idGlja2V0UG9saWN5LnN2ZyIKICAgaW5rc2NhcGU6dmVyc2lvbj0iMS40LjIgKGViZjBlOTQwLCAyMDI1LTA1LTA4KSIKICAgeG1sbnM6aW5rc2NhcGU9Imh0dHA6Ly93d3cuaW5rc2NhcGUub3JnL25hbWVzcGFjZXMvaW5rc2NhcGUiCiAgIHhtbG5zOnNvZGlwb2RpPSJodHRwOi8vc29kaXBvZGkuc291cmNlZm9yZ2UubmV0L0RURC9zb2RpcG9kaS0wLmR0ZCIKICAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZGVmcwogICAgIGlkPSJkZWZzMSIgLz4KICA8c29kaXBvZGk6bmFtZWR2aWV3CiAgICAgaWQ9Im5hbWVkdmlldzEiCiAgICAgcGFnZWNvbG9yPSIjZmZmZmZmIgogICAgIGJvcmRlcmNvbG9yPSIjMDAwMDAwIgogICAgIGJvcmRlcm9wYWNpdHk9IjAuMjUiCiAgICAgaW5rc2NhcGU6c2hvd3BhZ2VzaGFkb3c9IjIiCiAgICAgaW5rc2NhcGU6cGFnZW9wYWNpdHk9IjAuMCIKICAgICBpbmtzY2FwZTpwYWdlY2hlY2tlcmJvYXJkPSIwIgogICAgIGlua3NjYXBlOmRlc2tjb2xvcj0iI2QxZDFkMSIKICAgICBpbmtzY2FwZTp6b29tPSIwLjkyODU3MTQzIgogICAgIGlua3NjYXBlOmN4PSIxMy40NjE1MzgiCiAgICAgaW5rc2NhcGU6Y3k9IjE0IgogICAgIGlua3NjYXBlOndpbmRvdy13aWR0aD0iODk2IgogICAgIGlua3NjYXBlOndpbmRvdy1oZWlnaHQ9IjI0NSIKICAgICBpbmtzY2FwZTp3aW5kb3cteD0iMCIKICAgICBpbmtzY2FwZTp3aW5kb3cteT0iMzQiCiAgICAgaW5rc2NhcGU6d2luZG93LW1heGltaXplZD0iMCIKICAgICBpbmtzY2FwZTpjdXJyZW50LWxheWVyPSJnMSI+CiAgICA8aW5rc2NhcGU6cGFnZQogICAgICAgeD0iMCIKICAgICAgIHk9IjAiCiAgICAgICBpbmtzY2FwZTpsYWJlbD0iMSIKICAgICAgIGlkPSJwYWdlMSIKICAgICAgIHdpZHRoPSIyOCIKICAgICAgIGhlaWdodD0iMjgiCiAgICAgICBtYXJnaW49IjAiCiAgICAgICBibGVlZD0iMCIgLz4KICA8L3NvZGlwb2RpOm5hbWVkdmlldz4KICA8ZwogICAgIGlkPSJnMSIKICAgICBpbmtzY2FwZTpncm91cG1vZGU9ImxheWVyIgogICAgIGlua3NjYXBlOmxhYmVsPSIxIj4KICAgIDxwYXRoCiAgICAgICBpZD0icGF0aDEiCiAgICAgICBkPSJNIDAsMy41IEggMSBWIDEgaCAxMi45OTk2MDkgdiAyIGggMC45OTk5OTkgViAwIEggMCBaIgogICAgICAgc3R5bGU9ImZpbGw6IzE3MTgxYTtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6ZXZlbm9kZDtzdHJva2U6bm9uZSIKICAgICAgIHRyYW5zZm9ybT0ibWF0cml4KDEuMzMzMzMzMywwLDAsLTEuMzMzMzMzMyw0LjAwMTMwMjcsMjEuMzMzMzMzKSIgLz4KICAgIDxwYXRoCiAgICAgICBpZD0icGF0aDIiCiAgICAgICBkPSJNIDAsNiBDIDEuNjg0OTM3LDYgMy4wNzczMTIsNC42NzEzMjUgMy4wNzczMTIsMy4wMDAwNzkgMy4wNzczMTIsMS4zMjg4NzMgMS42ODQ5NzksMCAwLDAgViAxIEMgMS4xNjE2MzMsMSAyLjA3NzMxMiwxLjkwOTY1OSAyLjA3NzMxMiwzLjAwMDA3OSAyLjA3NzMxMiw0LjA5MDQ1OCAxLjE2MTY3NSw1IDAsNSBaIgogICAgICAgc3R5bGU9ImZpbGw6IzE3MTgxYTtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6ZXZlbm9kZDtzdHJva2U6bm9uZSIKICAgICAgIHRyYW5zZm9ybT0ibWF0cml4KDEuMzMzMzMzMywwLDAsLTEuMzMzMzMzMyw0LjAwMzkwNjcsMTgpIiAvPgogICAgPHBhdGgKICAgICAgIGlkPSJwYXRoMyIKICAgICAgIGQ9Ik0gMCwzLjUgSCAxNS4wMDA0NDcgViAtNC4zNmUtNCBIIDE0LjAwMDQ0OCBWIDIuNSBIIDEgViAwLjA0OTE0NiBIIDAgWiIKICAgICAgIHN0eWxlPSJmaWxsOiMxNzE4MWE7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlOm5vbmUiCiAgICAgICB0cmFuc2Zvcm09Im1hdHJpeCgxLjMzMzMzMzMsMCwwLC0xLjMzMzMzMzMsNCwxMS4zMzMzMzMpIiAvPgogICAgPHBhdGgKICAgICAgIGlkPSJwYXRoNCIKICAgICAgIGQ9Im0gMCwyLjk2MzEyNyBjIDAsMS42NDYwMTIgMS4zNTk4NTksMi45NjI2NTQgMy4wMTQ5NDEsMi45NjI2NTQgdiAtMSBDIDEuODkyMjMzLDQuOTI1NzgxIDEsNC4wMzcxNTMgMSwyLjk2MzEyNyAxLDEuODg5MSAxLjg5MjIzMywxLjAwMDQ3MiAzLjAxNDk0MSwxLjAwMDQ3MiB2IC0xIEMgMS4zNTk4NTksNC43MmUtNCAwLDEuMzE3MTEzIDAsMi45NjMxMjcgWiIKICAgICAgIHN0eWxlPSJmaWxsOiMxNzE4MWE7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlOm5vbmUiCiAgICAgICB0cmFuc2Zvcm09Im1hdHJpeCgxLjMzMzMzMzMsMCwwLC0xLjMzMzMzMzMsMTkuOTc3ODY0LDE3LjkwMTA0MSkiIC8+CiAgICA8cGF0aAogICAgICAgaWQ9InBhdGg1IgogICAgICAgZD0ibSAwLC0xLjAzZS00IHYgMi4xMjMxNSBoIDEgdiAtMi4xMjMxNSB6IgogICAgICAgc3R5bGU9ImZpbGw6IzE3MTgxYTtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6ZXZlbm9kZDtzdHJva2U6bm9uZSIKICAgICAgIHRyYW5zZm9ybT0ibWF0cml4KDEuMzMzMzMzMywwLDAsLTEuMzMzMzMzMywxMC42NzMxNzcsMTAuNjY2NjY3KSIgLz4KICAgIDxwYXRoCiAgICAgICBpZD0icGF0aDYiCiAgICAgICBkPSJNIDAsMCBWIDIgSCAxIFYgMCBaIgogICAgICAgc3R5bGU9ImZpbGw6IzE3MTgxYTtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6ZXZlbm9kZDtzdHJva2U6bm9uZSIKICAgICAgIHRyYW5zZm9ybT0ibWF0cml4KDEuMzMzMzMzMywwLDAsLTEuMzMzMzMzMywxMC42NzU3ODEsMTUuMzMzMzMzKSIgLz4KICAgIDxwYXRoCiAgICAgICBpZD0icGF0aDciCiAgICAgICBkPSJNIDAsNS4zZS01IFYgMi4xMjMwNDcgSCAxIFYgNS4zZS01IFoiCiAgICAgICBzdHlsZT0iZmlsbDojMTcxODFhO2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpldmVub2RkO3N0cm9rZTpub25lIgogICAgICAgdHJhbnNmb3JtPSJtYXRyaXgoMS4zMzMzMzMzLDAsMCwtMS4zMzMzMzMzLDEwLjY3NTc4MSwyMC4xNjQwNjMpIiAvPgogIDwvZz4KPC9zdmc+');
}

icon[image="members-only-event"] {
  background-image: url("data:image/svg+xml;base64,PHN2ZwogICB2ZXJzaW9uPSIxLjEiCiAgIGlkPSJzdmcxIgogICB3aWR0aD0iMjgiCiAgIGhlaWdodD0iMjgiCiAgIHZpZXdCb3g9IjAgMCAyOCAyOCIKICAgc29kaXBvZGk6ZG9jbmFtZT0iZ3Vlc3RQb2xpY3lXaXRob3V0R3Vlc3RzLnN2ZyIKICAgaW5rc2NhcGU6dmVyc2lvbj0iMS40LjIgKGViZjBlOTQwLCAyMDI1LTA1LTA4KSIKICAgeG1sbnM6aW5rc2NhcGU9Imh0dHA6Ly93d3cuaW5rc2NhcGUub3JnL25hbWVzcGFjZXMvaW5rc2NhcGUiCiAgIHhtbG5zOnNvZGlwb2RpPSJodHRwOi8vc29kaXBvZGkuc291cmNlZm9yZ2UubmV0L0RURC9zb2RpcG9kaS0wLmR0ZCIKICAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZGVmcwogICAgIGlkPSJkZWZzMSIgLz4KICA8c29kaXBvZGk6bmFtZWR2aWV3CiAgICAgaWQ9Im5hbWVkdmlldzEiCiAgICAgcGFnZWNvbG9yPSIjZmZmZmZmIgogICAgIGJvcmRlcmNvbG9yPSIjMDAwMDAwIgogICAgIGJvcmRlcm9wYWNpdHk9IjAuMjUiCiAgICAgaW5rc2NhcGU6c2hvd3BhZ2VzaGFkb3c9IjIiCiAgICAgaW5rc2NhcGU6cGFnZW9wYWNpdHk9IjAuMCIKICAgICBpbmtzY2FwZTpwYWdlY2hlY2tlcmJvYXJkPSIwIgogICAgIGlua3NjYXBlOmRlc2tjb2xvcj0iI2QxZDFkMSIKICAgICBpbmtzY2FwZTp6b29tPSIwLjkyODU3MTQzIgogICAgIGlua3NjYXBlOmN4PSIxMy40NjE1MzgiCiAgICAgaW5rc2NhcGU6Y3k9IjE0IgogICAgIGlua3NjYXBlOndpbmRvdy13aWR0aD0iODk2IgogICAgIGlua3NjYXBlOndpbmRvdy1oZWlnaHQ9IjI0NSIKICAgICBpbmtzY2FwZTp3aW5kb3cteD0iMCIKICAgICBpbmtzY2FwZTp3aW5kb3cteT0iMzQiCiAgICAgaW5rc2NhcGU6d2luZG93LW1heGltaXplZD0iMCIKICAgICBpbmtzY2FwZTpjdXJyZW50LWxheWVyPSJnMSI+CiAgICA8aW5rc2NhcGU6cGFnZQogICAgICAgeD0iMCIKICAgICAgIHk9IjAiCiAgICAgICBpbmtzY2FwZTpsYWJlbD0iMSIKICAgICAgIGlkPSJwYWdlMSIKICAgICAgIHdpZHRoPSIyOCIKICAgICAgIGhlaWdodD0iMjgiCiAgICAgICBtYXJnaW49IjAiCiAgICAgICBibGVlZD0iMCIgLz4KICA8L3NvZGlwb2RpOm5hbWVkdmlldz4KICA8ZwogICAgIGlkPSJnMSIKICAgICBpbmtzY2FwZTpncm91cG1vZGU9ImxheWVyIgogICAgIGlua3NjYXBlOmxhYmVsPSIxIj4KICAgIDxwYXRoCiAgICAgICBpZD0icGF0aDEiCiAgICAgICBkPSJNIDIuNTM3NTg4LDQuMDAxOTUzIEMgMS42Nzk4NDcsNC4wMDE5NTMgMSwzLjMyMTQwOCAxLDIuNTAwODQ5IDEsMS42ODAyOSAxLjY3OTg0NywwLjk5OTc0NCAyLjUzNzU4OCwwLjk5OTc0NCBjIDAuODU3NzQyLDAgMS41Mzc1ODksMC42ODA1NDYgMS41Mzc1ODksMS41MDExMDUgMCwwLjgyMDU1OSAtMC42Nzk4NDcsMS41MDExMDQgLTEuNTM3NTg5LDEuNTAxMTA0IHogTSAwLDIuNTAwODQ5IGMgMCwxLjM4OTggMS4xNDQ2NzIsMi41MDExMDQgMi41Mzc1ODgsMi41MDExMDQgMS4zOTI5MTcsMCAyLjUzNzU4OSwtMS4xMTEzMDQgMi41Mzc1ODksLTIuNTAxMTA0IDAsLTEuMzg5ODAxIC0xLjE0NDY3MiwtMi41MDExMDUgLTIuNTM3NTg5LC0yLjUwMTEwNSBDIDEuMTQ0NjcyLC0yLjU2ZS00IDAsMS4xMTEwNDggMCwyLjUwMDg0OSBaIgogICAgICAgc3R5bGU9ImZpbGw6IzE3MTgxYTtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6ZXZlbm9kZDtzdHJva2U6bm9uZSIKICAgICAgIHRyYW5zZm9ybT0ibWF0cml4KDEuMzMzMzMzMywwLDAsLTEuMzMzMzMzMywxMC42MTcxODgsMTAuNjczMTc3KSIgLz4KICAgIDxwYXRoCiAgICAgICBpZD0icGF0aDIiCiAgICAgICBkPSJNIDUuNDg5LDguMDEyNjk1IEMgMy4wMTE1NzEsOC4wMTI2OTUgMSw2LjAwMDk4NyAxLDMuNTIzNjk0IFYgMC45OTk3ODUgaCA4Ljk3ODAwMSB2IDIuNTIzOTA5IGMgMCwyLjQ3NzQzIC0yLjAxMTcwOSw0LjQ4OTAwMSAtNC40ODkwMDEsNC40ODkwMDEgeiBNIDAsMy41MjM2OTQgYyAwLDMuMDI5NTU3IDIuNDU5MjY1LDUuNDg5MDAxIDUuNDg5LDUuNDg5MDAxIDMuMDI5NTU4LDAgNS40ODkwMDEsLTIuNDU5MjY2IDUuNDg5MDAxLC01LjQ4OTAwMSBWIC0yLjE1ZS00IEggMCBaIgogICAgICAgc3R5bGU9ImZpbGw6IzE3MTgxYTtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6ZXZlbm9kZDtzdHJva2U6bm9uZSIKICAgICAgIHRyYW5zZm9ybT0ibWF0cml4KDEuMzMzMzMzMywwLDAsLTEuMzMzMzMzMyw2LjY4MDk4OTMsMjMuOTk0NzkyKSIgLz4KICA8L2c+Cjwvc3ZnPgo=");
}

icon[image="film-certificate"] {
    background-image: url("data:image/svg+xml;base64,PHN2ZwogICB2ZXJzaW9uPSIxLjEiCiAgIGlkPSJzdmcxIgogICB3aWR0aD0iMjgiCiAgIGhlaWdodD0iMjgiCiAgIHZpZXdCb3g9IjAgMCAyOCAyOCIKICAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZGVmcwogICAgIGlkPSJkZWZzMSIgLz4KICA8ZwogICAgIGlkPSJnMSI+CiAgICA8cGF0aAogICAgICAgaWQ9InBhdGgxIgogICAgICAgZD0iTSA3LjQ5OTczOSwxMy45OTkwMjMgQyAzLjkxMDAzMywxMy45OTkwMjMgMSwxMS4wODg5OTEgMSw3LjQ5OTI4NSAxLDMuOTA5NTc4IDMuOTEwMDMzLDAuOTk5NTQ3IDcuNDk5NzM5LDAuOTk5NTQ3IGMgMy41ODk3MDYsMCA2LjQ5OTc0LDIuOTEwMDMyIDYuNDk5NzQsNi40OTk3MzggMCwzLjU4OTcwNiAtMi45MTAwMzQsNi40OTk3MzggLTYuNDk5NzQsNi40OTk3MzggeiBNIDAsNy40OTkyODUgYyAwLDQuMTQxOTkxIDMuMzU3NzQ4LDcuNDk5NzM4IDcuNDk5NzM5LDcuNDk5NzM4IDQuMTQxOTksMCA3LjQ5OTczOSwtMy4zNTc3NDcgNy40OTk3MzksLTcuNDk5NzM4IDAsLTQuMTQxOTkyIC0zLjM1Nzc0OSwtNy40OTk3MzggLTcuNDk5NzM5LC03LjQ5OTczOCBDIDMuMzU3NzQ4LC00LjUzZS00IDAsMy4zNTcyOTQgMCw3LjQ5OTI4NSBaIgogICAgICAgc3R5bGU9ImZpbGw6IzE3MTgxYTtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6ZXZlbm9kZDtzdHJva2U6bm9uZSIKICAgICAgIHRyYW5zZm9ybT0ibWF0cml4KDEuMzMzMzMzMywwLDAsLTEuMzMzMzMzMyw0LDIzLjk5ODY5NykiIC8+CiAgICA8cGF0aAogICAgICAgaWQ9InBhdGgyIgogICAgICAgZD0iTSAwLjI2NjE2MiwzLjUzZS00IDAsNS45MjM4MjggSCAxLjUyNzMyOCBMIDEuMjY5MzgsMy41M2UtNCBaIgogICAgICAgc3R5bGU9ImZpbGw6IzE3MTgxYTtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6bm9uemVybztzdHJva2U6bm9uZSIKICAgICAgIHRyYW5zZm9ybT0ibWF0cml4KDEuMzMzMzMzMywwLDAsLTEuMzMzMzMzMywxMi45Nzc4NjQsMTYuMDA1MjA4KSIgLz4KICAgIDxwYXRoCiAgICAgICBpZD0icGF0aDMiCiAgICAgICBkPSJNIDIsMSBDIDIsMC40NDc3MTUgMS41NTIyODQsMCAxLDAgMC40NDc3MTUsMCAwLDAuNDQ3NzE1IDAsMSAwLDEuNTUyMjg1IDAuNDQ3NzE1LDIgMSwyIDEuNTUyMjg0LDIgMiwxLjU1MjI4NSAyLDEgWiIKICAgICAgIHN0eWxlPSJmaWxsOiMxNzE4MWE7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICB0cmFuc2Zvcm09Im1hdHJpeCgxLjMzMzMzMzMsMCwwLC0xLjMzMzMzMzMsMTIuNjYyNzYsMjApIiAvPgogIDwvZz4KPC9zdmc+");
}

icon[image="film-duration"] {
    background-image: url("data:image/svg+xml;base64,PHN2ZwogICB2ZXJzaW9uPSIxLjEiCiAgIGlkPSJzdmcxIgogICB3aWR0aD0iMjgiCiAgIGhlaWdodD0iMjgiCiAgIHZpZXdCb3g9IjAgMCAyOCAyOCIKICAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZGVmcwogICAgIGlkPSJkZWZzMSIgLz4KICA8ZwogICAgIGlkPSJnMSI+CiAgICA8cGF0aAogICAgICAgaWQ9InBhdGgxIgogICAgICAgZD0iTSAwLDggSCAxMS4wMDI1NDIgViA0ZS02IEggMC4wMDYyNTIgWiBNIDEuMDAwNzgyLDcgMS4wMDU0NzIsMS4wMDAwMDQgaCA4Ljk5NzA3MSBWIDcgWiIKICAgICAgIHN0eWxlPSJmaWxsOiMxNzE4MWE7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlOm5vbmUiCiAgICAgICB0cmFuc2Zvcm09Im1hdHJpeCgxLjMzMzMzMzMsMCwwLC0xLjMzMzMzMzMsNS4zMzA3MjkzLDIyLjY2NjY2NykiIC8+CiAgICA8cGF0aAogICAgICAgaWQ9InBhdGgyIgogICAgICAgZD0iTSAzLjY0MTE2MSw2LjA0OTgwNSBWIC04LjZlLTUgTCAwLjAxNzU1MSwxLjAxMjYyOSAwLjI4NjcxNCwxLjk3NTcyMyAyLjY0MTE2MSwxLjMxNzcxIFYgNC42ODA2MjMgTCAwLjMwNDI2NSwzLjkzNDE5NiAwLDQuODg2NzgzIFoiCiAgICAgICBzdHlsZT0iZmlsbDojMTcxODFhO2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpldmVub2RkO3N0cm9rZTpub25lIgogICAgICAgdHJhbnNmb3JtPSJtYXRyaXgoMS4zMzMzMzMzLDAsMCwtMS4zMzMzMzMzLDE5LjE0MTkyNywyMS4yNzM0MzcpIiAvPgogICAgPHBhdGgKICAgICAgIGlkPSJwYXRoMyIKICAgICAgIGQ9Ik0gMS40ZS01LDMuMDI2MjE0IEMgMC4wMDUwMDEsNC42NzkwMDggMS4zNDg3ODIsNi4wMTQ3NCAzLjAwMTU4OSw2LjAwOTc1MiA0LjY1NDM4NCw2LjAwNDc2NCA1Ljk5MDExNSw0LjY2MDk4NCA1Ljk4NTEyOCwzLjAwODE3NyA1Ljk4MDE1NiwxLjM2MSA0LjY0NzY5NiwwLjAwNDc3NiAyLjk4OTQ2NCwwLjAwOTc3OSAxLjMzNDM2NCwwLjAxNDc3NCAtMC4wMDQ5NjcsMS4zNzU3MTggMS40ZS01LDMuMDI2MjE0IFogTSAyLjk5ODU3MSw1LjAwOTc1NiBDIDEuODk4MDU5LDUuMDEzMDc3IDEuMDAzMzMsNC4xMjM3MjEgMS4wMDAwMDksMy4wMjMxOTYgMC45OTY2ODEsMS45MjAzNzMgMS44OTQyNjIsMS4wMTMwODkgMi45OTI0ODIsMS4wMDk3NzUgNC4wODc1NjgsMS4wMDY0NyA0Ljk4MTc5NSwxLjkwNTM3MyA0Ljk4NTEzMiwzLjAxMTE5NCA0Ljk4ODQ1Myw0LjExMTcwNiA0LjA5OTA5Niw1LjAwNjQzNSAyLjk5ODU3MSw1LjAwOTc1NiBaIgogICAgICAgc3R5bGU9ImZpbGw6IzE3MTgxYTtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6ZXZlbm9kZDtzdHJva2U6bm9uZSIKICAgICAgIHRyYW5zZm9ybT0ibWF0cml4KDEuMzMzMzMzMywwLDAsLTEuMzMzMzMzMyw1LjkyMzE3NzMsMTMuMzQ2MzU1KSIgLz4KICAgIDxwYXRoCiAgICAgICBpZD0icGF0aDQiCiAgICAgICBkPSJNIDIuMjExNDI0LDMuNDIyODUyIEMgMS41NDIzNzMsMy40MjI4NTIgMSwyLjg4MDQ3OSAxLDIuMjExNDI4IDEsMS41NDIzNzcgMS41NDIzNzMsMS4wMDAwMDQgMi4yMTE0MjQsMS4wMDAwMDQgYyAwLjY2OTA1MSwwIDEuMjExNDI0LDAuNTQyMzczIDEuMjExNDI0LDEuMjExNDI0IDAsMC42NjkwNTEgLTAuNTQyMzczLDEuMjExNDI0IC0xLjIxMTQyNCwxLjIxMTQyNCB6IE0gMCwyLjIxMTQyOCBjIDAsMS4yMjEzMzUgMC45OTAwODgsMi4yMTE0MjQgMi4yMTE0MjQsMi4yMTE0MjQgMS4yMjEzMzYsMCAyLjIxMTQyNCwtMC45OTAwODkgMi4yMTE0MjQsLTIuMjExNDI0IEMgNC40MjI4NDgsMC45OTAwOTIgMy40MzI3Niw0ZS02IDIuMjExNDI0LDRlLTYgMC45OTAwODgsNGUtNiAwLDAuOTkwMDkyIDAsMi4yMTE0MjggWiIKICAgICAgIHN0eWxlPSJmaWxsOiMxNzE4MWE7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlOm5vbmUiCiAgICAgICB0cmFuc2Zvcm09Im1hdHJpeCgxLjMzMzMzMzMsMCwwLC0xLjMzMzMzMzMsMTIuNzM5NTg0LDEzLjIzMDQ2OSkiIC8+CiAgICA8cGF0aAogICAgICAgaWQ9InBhdGg1IgogICAgICAgZD0iTSAxLjk5ODMxNSwwIEggMCB2IDEgaCAxLjk5ODMxNSB6IgogICAgICAgc3R5bGU9ImZpbGw6IzE3MTgxYTtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6ZXZlbm9kZDtzdHJva2U6bm9uZSIKICAgICAgIHRyYW5zZm9ybT0ibWF0cml4KDEuMzMzMzMzMywwLDAsLTEuMzMzMzMzMyw4LjAxMTcxODcsMjApIiAvPgogICAgPHBhdGgKICAgICAgIGlkPSJwYXRoNiIKICAgICAgIGQ9Im0gMC41NzE3NzcsMC40NTQxNDggYyAwLjIxMjAxNiwwLjQxMzExOSAwLjMyMzc0LDAuODU0MzAxIDAuMzI2MzM4LDEuMzE5Mzg1IDAuMDAyMDc5LDAuMzk4MDUgLTAuNjE2MzAyLDAuMzk4NTcgLTAuNjE4OSwwIEMgMC4yNzcxMzYsMS40MTkxMzQgMC4xOTkxODksMS4wODI0MDIgMC4wMzcwNTksMC43NjY0NTYgLTAuMTQ0Mjk4LDAuNDEyNTc3IDAuMzg5MzgsMC4wOTkyMjkgMC41NzEyNTYsMC40NTQxNDggWiIKICAgICAgIHN0eWxlPSJmaWxsOiMxNzE4MWE7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICB0cmFuc2Zvcm09Im1hdHJpeCgxLjMzMzMzMzMsMCwwLC0xLjMzMzMzMzMsMTIuNTgyMDMxLDEzLjM0Mzc0OSkiIC8+CiAgPC9nPgo8L3N2Zz4=");
}

icon[image="with-guests"] {
    background-image: url("data:image/svg+xml;base64,PHN2ZwogICB2ZXJzaW9uPSIxLjEiCiAgIGlkPSJzdmcxIgogICB3aWR0aD0iMjgiCiAgIGhlaWdodD0iMjgiCiAgIHZpZXdCb3g9IjAgMCAyOCAyOCIKICAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZGVmcwogICAgIGlkPSJkZWZzMSIgLz4KICA8ZwogICAgIGlkPSJnMSI+CiAgICA8cGF0aAogICAgICAgaWQ9InBhdGgxIgogICAgICAgZD0iTSAyLjU0MDc0OSw0LjAwODc4OSBDIDEuNjgxMjYyLDQuMDA4Nzg5IDEsMy4zMjY4NTQgMSwyLjUwNDU4IDEsMS42ODIzMDYgMS42ODEyNjIsMS4wMDAzNzEgMi41NDA3NDksMS4wMDAzNzEgYyAwLjg1OTQ4OCwwIDEuNTQwNzUsMC42ODE5MzUgMS41NDA3NSwxLjUwNDIwOSAwLDAuODIyMjc0IC0wLjY4MTI2MiwxLjUwNDIwOSAtMS41NDA3NSwxLjUwNDIwOSB6IE0gMCwyLjUwNDU4IGMgMCwxLjM5MTUxNSAxLjE0NjA4OCwyLjUwNDIwOSAyLjU0MDc0OSwyLjUwNDIwOSAxLjM5NDY2MiwwIDIuNTQwNzUsLTEuMTEyNjk0IDIuNTQwNzUsLTIuNTA0MjA5IDAsLTEuMzkxNTE1IC0xLjE0NjA4OCwtMi41MDQyMDkgLTIuNTQwNzUsLTIuNTA0MjA5IEMgMS4xNDYwODgsMy43MWUtNCAwLDEuMTEzMDY1IDAsMi41MDQ1OCBaIgogICAgICAgc3R5bGU9ImZpbGw6IzE3MTgxYTtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6ZXZlbm9kZDtzdHJva2U6bm9uZSIKICAgICAgIHRyYW5zZm9ybT0ibWF0cml4KDEuMzMzMzMzMywwLDAsLTEuMzMzMzMzMyw5LjI0NzM5NiwxMC42ODIyOTIpIiAvPgogICAgPHBhdGgKICAgICAgIGlkPSJwYXRoMiIKICAgICAgIGQ9Ik0gNS41LDguMDA2ODM2IEMgMy4wMTUxMiw4LjAwNjgzNiAxLDUuOTk1MzYzIDEsMy41MjE0MzQgViAwLjk5OTcwNyBoIDEwIHYgLTEgSCAwIHYgMy41MjE3MjcgYyAwLDMuMDI4OTQ5IDIuNDY1NTczLDUuNDg1NDAyIDUuNSw1LjQ4NTQwMiAxLjI3ODk5OCwwIDIuNDU3ODIzLC0wLjQzNjg5MiAzLjM5MjUzMSwtMS4xNjg3NDQgTCA4LjI3NjA0NCw3LjA1MDcyNiBDIDcuNTExMDA4LDcuNjQ5NzMxIDYuNTQ3NjU1LDguMDA2ODM2IDUuNSw4LjAwNjgzNiBaIgogICAgICAgc3R5bGU9ImZpbGw6IzE3MTgxYTtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6ZXZlbm9kZDtzdHJva2U6bm9uZSIKICAgICAgIHRyYW5zZm9ybT0ibWF0cml4KDEuMzMzMzMzMywwLDAsLTEuMzMzMzMzMyw1LjMzMzMzMzMsMjQpIiAvPgogICAgPHBhdGgKICAgICAgIGlkPSJwYXRoMyIKICAgICAgIGQ9Ik0gMCwtNGUtNiBWIDUgSCAxIFYgLTRlLTYgWiIKICAgICAgIHN0eWxlPSJmaWxsOiMxNzE4MWE7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlOm5vbmUiCiAgICAgICB0cmFuc2Zvcm09Im1hdHJpeCgxLjMzMzMzMzMsMCwwLC0xLjMzMzMzMzMsMTguNjY2NjY3LDIxLjMzMzMzMykiIC8+CiAgICA8cGF0aAogICAgICAgaWQ9InBhdGg0IgogICAgICAgZD0iTSAwLC00LjAzODA4MyBWIDEgaCAxLjAwMDAwMSB2IC01LjAzODA4MyB6IgogICAgICAgc3R5bGU9ImZpbGw6IzE3MTgxYTtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6ZXZlbm9kZDtzdHJva2U6bm9uZSIKICAgICAgIHRyYW5zZm9ybT0ibWF0cml4KDAsLTEuMzMzMzMzMywtMS4zMzMzMzMzLDAsMTcuMjgyNTUyLDE4LjY2NjY2NykiIC8+CiAgPC9nPgo8L3N2Zz4=");
}

icon[image="location"] {
    background-image: url("data:image/svg+xml;base64, PHN2ZwogICB2ZXJzaW9uPSIxLjEiCiAgIGlkPSJzdmcxIgogICB3aWR0aD0iMjgiCiAgIGhlaWdodD0iMjgiCiAgIHZpZXdCb3g9IjAgMCAyOCAyOCIKICAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZGVmcwogICAgIGlkPSJkZWZzMSIgLz4KICA8ZwogICAgIGlkPSJnMSI+CiAgICA8cGF0aAogICAgICAgaWQ9InBhdGgxIgogICAgICAgZD0iTSA2LjM3ODQxOCwxMy43MzI0MjIgMTIuNzQ5OTk1LDguMzQwNTc4IDEyLjc1LC00LjA5ZS00IEggMCBWIDguMzQwNzU1IFogTSAwLjk3NjU5MSw3Ljg4NzUxOCBWIDAuOTc2MTgxIGggMTAuNzk2ODE3IGwgLTRlLTYsNi45MTE0ODIgLTUuMzk1MzM1LDQuNTY1NzE2IHoiCiAgICAgICBzdHlsZT0iZmlsbDojMTcxODFhO2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpldmVub2RkO3N0cm9rZTpub25lIgogICAgICAgdHJhbnNmb3JtPSJtYXRyaXgoMS4zMzMzMzMzLDAsMCwtMS4zMzMzMzMzLDUuNSwyMy4xMTcxODgpIiAvPgogIDwvZz4KPC9zdmc+");
}

icon[image="trainer-info"] {
    background-image: url("data:image/svg+xml;base64,PHN2ZwogICB2ZXJzaW9uPSIxLjEiCiAgIGlkPSJzdmcxIgogICB3aWR0aD0iMjgiCiAgIGhlaWdodD0iMjgiCiAgIHZpZXdCb3g9IjAgMCAyOCAyOCIKICAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZGVmcwogICAgIGlkPSJkZWZzMSIgLz4KICA8ZwogICAgIGlkPSJnMSI+CiAgICA8cGF0aAogICAgICAgaWQ9InBhdGgxIgogICAgICAgZD0iTSA5Ljg4OTc5Miw1LjIyNzczNSBDIDkuNDk1ODM5LDcuMzAyMDY0IDcuNjczMTY1LDguODcwNDMyIDUuNDg0MTgsOC44NzA0MzIgYyAtMi40NzY3MTgsMCAtNC40ODQ0OTUsLTIuMDA3Nzc2IC00LjQ4NDQ5NSwtNC40ODQ0OTQgMCwtMS4zNTE0MjUgMC41OTY4ODYsLTIuNTYzMTg5IDEuNTQ0NzIyLC0zLjM4NjY0MyBIIDMuOTY4MzU5IFYgLTMuOWUtNCBIIDIuMTkxNzg2IEMgMC44NjA4MSwxLjAwMDIzNyAwLDIuNTkyNTYxIDAsNC4zODU5MzggYyAwLDMuMDI4ODI4IDIuNDU1MzUxLDUuNDg0MTc5IDUuNDg0MTgsNS40ODQxNzkgMi43NDI1NzcsMCA1LjAxNDk1MywtMi4wMTMxNzggNS40MTk5NzUsLTQuNjQyMzgyIHoiCiAgICAgICBzdHlsZT0iZmlsbDojMTcxODFhO2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpldmVub2RkO3N0cm9rZTpub25lIgogICAgICAgdHJhbnNmb3JtPSJtYXRyaXgoMS4zMzMzMzMzLDAsMCwtMS4zMzMzMzMzLDQuMDEzMDIxMywyMi42Njc5NjkpIiAvPgogICAgPHBhdGgKICAgICAgIGlkPSJwYXRoMiIKICAgICAgIGQ9Ik0gMC44NTMxMTUsMy43MDg5NDggQyAxLjE5MTI0NywzLjk0OTM3IDEuNjA1MzM1LDQuMDkwODIgMi4wNTEwOTksNC4wOTA4MiBoIDIuODk1OTM3IGMgMC4wMTczOTEsMCAwLjAzNDg0OCwtMi4wMWUtNCAwLjA1MjIxNCwtNi4xZS00IGwgOC40ZS00LC0yZS01IEMgNi4yNjM2MzgsNC4wNTgzNDMgNy4xNzg2NTIsMi44OTQxODIgNi45NjA3NSwxLjY2Njk1NiBMIDYuOTYwNDUzLDEuNjY1Mjg2IDYuNjUzMTQ2LDIuNTdlLTQgNS42NzAwNjUsMC4xODE3IDUuOTc2NzIyLDEuODQzMjA1IEMgNi4wODk2NTcsMi40ODQzMjUgNS42MDkzNzYsMy4wNzQ1NzkgNC45NzUzMTgsMy4wOTA4MTEgNC45NjYwNTgsMy4wOTEwMjYgNC45NTY1NzksMy4wOTExMzUgNC45NDcwMzYsMy4wOTExMzUgSCAyLjA1MTA5OSBjIC0wLjIzMTQ4LDAgLTAuNDQ0MjYyLC0wLjA3Mjg4OCAtMC42MTg3MTQsLTAuMTk2OTM3IEMgMS4xMTI2MTcsMi42NjY4ODEgMC45NDg1MzcsMi4yNjczMDkgMS4wMTM3MjYsMS44NjY3MzMgYyA2ZS02LC0zLjZlLTUgMS4yZS01LC03LjJlLTUgMS44ZS01LC0xLjA4ZS00IEwgMS4yOTAxNzUsMC4xNzE0MjMgMC4zMDM1MjEsMC4wMTA1MzMgMC4wMjcwNTUsMS43MDU5NTEgYyAtMC4xMjQzMDYsMC43NjMzNTggMC4xODQ2MjIsMS41NDY5NzkgMC44MjYwNiwyLjAwMjk5NyB6IgogICAgICAgc3R5bGU9ImZpbGw6IzE3MTgxYTtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6ZXZlbm9kZDtzdHJva2U6bm9uZSIKICAgICAgIHRyYW5zZm9ybT0ibWF0cml4KDEuMzMzMzMzMywwLDAsLTEuMzMzMzMzMyw2LjYzNjcxODcsMTEuNDU0NDI3KSIgLz4KICAgIDxwYXRoCiAgICAgICBpZD0icGF0aDMiCiAgICAgICBkPSJNIDAsMi42MjMwNDcgSCA1Ljk3NzMyMiBWIC00LjMzZS00IEggMCBaIE0gMC45OTk2ODUsMS42MjMzNjIgdiAtMC42MjQxMSBoIDMuOTc3OTUxIHYgMC42MjQxMSB6IgogICAgICAgc3R5bGU9ImZpbGw6IzE3MTgxYTtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6ZXZlbm9kZDtzdHJva2U6bm9uZSIKICAgICAgIHRyYW5zZm9ybT0ibWF0cml4KDEuMzMzMzMzMywwLDAsLTEuMzMzMzMzMywxMy4zMzMzMzMsMjAuNDE5MjcxKSIgLz4KICAgIDxwYXRoCiAgICAgICBpZD0icGF0aDQiCiAgICAgICBkPSJNIDIuMDE1NjUsNS4wMDAzMTUgSCAxIGMgLTQuNGUtNSwwIC04LjdlLTUsMCAtMS4yOWUtNCwtMTBlLTcgLTNlLTUsLTIuOWUtNSAtNi4yZS01LC02ZS01IC05LjNlLTUsLTkuMWUtNSAtMy4yZS01LC0zLjJlLTUgLTYuM2UtNSwtNi4zZS01IC05LjJlLTUsLTkuNGUtNSAtMTBlLTcsLTQuMmUtNSAtMTBlLTcsLTguNWUtNSAtMTBlLTcsLTEuMjllLTQgViAxIGMgMCwtNC40ZS01IDAsLTguN2UtNSAxMGUtNywtMS4yOWUtNCAyLjllLTUsLTMuMWUtNSA2ZS01LC02LjJlLTUgOS4xZS01LC05LjRlLTUgMy4yZS01LC0zLjJlLTUgNi4zZS01LC02LjJlLTUgOS40ZS01LC05LjFlLTUgNC4yZS01LDAgOC41ZS01LC0xMGUtNyAxLjI5ZS00LC0xMGUtNyBoIDEuMDE1NjUgYyA0LjRlLTUsMCA4LjdlLTUsMTBlLTcgMS4yOWUtNCwxMGUtNyAzLjFlLTUsMi45ZS01IDYuMmUtNSw1LjllLTUgOS4zZS01LDkuMWUtNSAzLjJlLTUsMy4yZS01IDYuMmUtNSw2LjNlLTUgOS4yZS01LDkuNGUtNSAwLDQuMmUtNSAwLDguNWUtNSAwLDEuMjllLTQgdiA0IGMgMCw0LjRlLTUgMCw4LjdlLTUgMCwxLjI5ZS00IC0zZS01LDMuMWUtNSAtNmUtNSw2LjJlLTUgLTkuMmUtNSw5LjRlLTUgLTMuMWUtNSwzLjFlLTUgLTYuM2UtNSw2LjJlLTUgLTkuM2UtNSw5LjFlLTUgLTQuMmUtNSwxMGUtNyAtOC41ZS01LDEwZS03IC0xLjI5ZS00LDEwZS03IHogTSAxLDYgQyAwLjQ0NzcxNSw2IDAsNS41NTIyODUgMCw1IFYgMSBDIDAsMC40NDc3MTUgMC40NDc3MTUsMCAxLDAgaCAxLjAxNTY1IGMgMC41NTIyODUsMCAxLDAuNDQ3NzE1IDEsMSB2IDQgYyAwLDAuNTUyMjg1IC0wLjQ0NzcxNSwxIC0xLDEgeiIKICAgICAgIHN0eWxlPSJmaWxsOiMxNzE4MWE7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlOm5vbmUiCiAgICAgICB0cmFuc2Zvcm09Im1hdHJpeCgxLjMzMzMzMzMsMCwwLC0xLjMzMzMzMzMsMTAuNjM2NzE5LDIyLjY2NjY2NykiIC8+CiAgICA8cGF0aAogICAgICAgaWQ9InBhdGg1IgogICAgICAgZD0iTSAyLDUuMDAwMzE1IEggMSBjIC00LjRlLTUsMCAtOC43ZS01LDAgLTEuMjllLTQsLTEwZS03IC0zLjFlLTUsLTIuOWUtNSAtNi4yZS01LC02ZS01IC05LjRlLTUsLTkuMWUtNSAtMy4xZS01LC0zLjJlLTUgLTYuMmUtNSwtNi4zZS01IC05LjFlLTUsLTkuNGUtNSAtMTBlLTcsLTQuMmUtNSAtMTBlLTcsLTguNWUtNSAtMTBlLTcsLTEuMjllLTQgViAxIGMgMCwtNC40ZS01IDAsLTguN2UtNSAxMGUtNywtMS4yOWUtNCAyLjllLTUsLTMuMWUtNSA2ZS01LC02LjJlLTUgOS4xZS01LC05LjRlLTUgMy4yZS01LC0zLjJlLTUgNi4zZS01LC02LjJlLTUgOS40ZS01LC05LjFlLTUgNC4yZS01LDAgOC41ZS01LC0xMGUtNyAxLjI5ZS00LC0xMGUtNyBoIDEgYyA0LjRlLTUsMCA4LjdlLTUsMTBlLTcgMS4yOWUtNCwxMGUtNyAzLjFlLTUsMi45ZS01IDYuMmUtNSw2ZS01IDkuNGUtNSw5LjFlLTUgMy4xZS01LDMuMmUtNSA2LjJlLTUsNi4zZS01IDkuMWUtNSw5LjRlLTUgMCw0LjJlLTUgMWUtNiw4LjVlLTUgMWUtNiwxLjI5ZS00IHYgNCBjIDAsNC40ZS01IC0xZS02LDguN2UtNSAtMWUtNiwxLjI5ZS00IC0yLjllLTUsMy4xZS01IC02ZS01LDYuMmUtNSAtOS4xZS01LDkuNGUtNSAtMy4yZS01LDMuMWUtNSAtNi4zZS01LDYuMmUtNSAtOS40ZS01LDkuMWUtNSAtNC4yZS01LDEwZS03IC04LjVlLTUsMTBlLTcgLTEuMjllLTQsMTBlLTcgeiBNIDEsNiBDIDAuNDQ3NzE1LDYgMCw1LjU1MjI4NSAwLDUgViAxIEMgMCwwLjQ0NzcxNSAwLjQ0NzcxNSwwIDEsMCBIIDIgQyAyLjU1MjI4NSwwIDMsMC40NDc3MTUgMywxIFYgNSBDIDMsNS41NTIyODUgMi41NTIyODUsNiAyLDYgWiIKICAgICAgIHN0eWxlPSJmaWxsOiMxNzE4MWE7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlOm5vbmUiCiAgICAgICB0cmFuc2Zvcm09Im1hdHJpeCgxLjMzMzMzMzMsMCwwLC0xLjMzMzMzMzMsMTkuOTcwMDUyLDIyLjY2NjY2NykiIC8+CiAgPC9nPgo8L3N2Zz4=");
}

icon[image="i-circle"] {
    background-image: url("data:image/svg+xml;base64,PHN2ZwogICB2ZXJzaW9uPSIxLjEiCiAgIGlkPSJzdmcxIgogICB3aWR0aD0iMjUuMzMzMzMyIgogICBoZWlnaHQ9IjI1LjMzMzMzMiIKICAgdmlld0JveD0iMCAwIDI1LjMzMzMzMiAyNS4zMzMzMzIiCiAgIHNvZGlwb2RpOmRvY25hbWU9ImkuY2lyY2xlLnN2ZyIKICAgaW5rc2NhcGU6dmVyc2lvbj0iMS40LjIgKGViZjBlOTQwLCAyMDI1LTA1LTA4KSIKICAgeG1sbnM6aW5rc2NhcGU9Imh0dHA6Ly93d3cuaW5rc2NhcGUub3JnL25hbWVzcGFjZXMvaW5rc2NhcGUiCiAgIHhtbG5zOnNvZGlwb2RpPSJodHRwOi8vc29kaXBvZGkuc291cmNlZm9yZ2UubmV0L0RURC9zb2RpcG9kaS0wLmR0ZCIKICAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZGVmcwogICAgIGlkPSJkZWZzMSIgLz4KICA8c29kaXBvZGk6bmFtZWR2aWV3CiAgICAgaWQ9Im5hbWVkdmlldzEiCiAgICAgcGFnZWNvbG9yPSIjZmZmZmZmIgogICAgIGJvcmRlcmNvbG9yPSIjMDAwMDAwIgogICAgIGJvcmRlcm9wYWNpdHk9IjAuMjUiCiAgICAgaW5rc2NhcGU6c2hvd3BhZ2VzaGFkb3c9IjIiCiAgICAgaW5rc2NhcGU6cGFnZW9wYWNpdHk9IjAuMCIKICAgICBpbmtzY2FwZTpwYWdlY2hlY2tlcmJvYXJkPSIwIgogICAgIGlua3NjYXBlOmRlc2tjb2xvcj0iI2QxZDFkMSIKICAgICBpbmtzY2FwZTp6b29tPSIxLjAyNjMxNTgiCiAgICAgaW5rc2NhcGU6Y3g9IjEyLjE3OTQ4NyIKICAgICBpbmtzY2FwZTpjeT0iMTIuNjY2NjY2IgogICAgIGlua3NjYXBlOndpbmRvdy13aWR0aD0iMTUxMiIKICAgICBpbmtzY2FwZTp3aW5kb3ctaGVpZ2h0PSI5MjEiCiAgICAgaW5rc2NhcGU6d2luZG93LXg9IjAiCiAgICAgaW5rc2NhcGU6d2luZG93LXk9IjYxIgogICAgIGlua3NjYXBlOndpbmRvdy1tYXhpbWl6ZWQ9IjAiCiAgICAgaW5rc2NhcGU6Y3VycmVudC1sYXllcj0iZzEiPgogICAgPGlua3NjYXBlOnBhZ2UKICAgICAgIHg9IjAiCiAgICAgICB5PSIwIgogICAgICAgaW5rc2NhcGU6bGFiZWw9IjEiCiAgICAgICBpZD0icGFnZTEiCiAgICAgICB3aWR0aD0iMjUuMzMzMzMyIgogICAgICAgaGVpZ2h0PSIyNS4zMzMzMzIiCiAgICAgICBtYXJnaW49IjAiCiAgICAgICBibGVlZD0iMCIgLz4KICA8L3NvZGlwb2RpOm5hbWVkdmlldz4KICA8ZwogICAgIGlkPSJnMSIKICAgICBpbmtzY2FwZTpncm91cG1vZGU9ImxheWVyIgogICAgIGlua3NjYXBlOmxhYmVsPSIxIj4KICAgIDxwYXRoCiAgICAgICBpZD0icGF0aDEiCiAgICAgICBkPSJNIDE3LjUsOS45OTk5OTkgQyAxNy41LDUuMzA1NTc4IDEzLjY5NDQyMSwxLjUgOSwxLjUgdiAtMSBjIDUuMjQ2NzA1LDAgOS41LDQuMjUzMjk0IDkuNSw5LjQ5OTk5OSB6IE0gOSwxLjUgQyA0LjMwNTU3OSwxLjUgMC41LDUuMzA1NTc4IDAuNSw5Ljk5OTk5OSBoIC0xIEMgLTAuNSw0Ljc1MzI5NCAzLjc1MzI5NSwwLjUgOSwwLjUgWiBNIDAuNSw5Ljk5OTk5OSBDIDAuNSwxNC42OTQ0MiA0LjMwNTU4LDE4LjUgOSwxOC41IHYgMSBjIC01LjI0NjcwNSwwIC05LjUsLTQuMjUzMjk2IC05LjUsLTkuNTAwMDAxIHogTSA5LDE4LjUgYyA0LjY5NDQyMSwwIDguNSwtMy44MDU1OCA4LjUsLTguNTAwMDAxIGggMSBDIDE4LjUsMTUuMjQ2NzA0IDE0LjI0NjcwNSwxOS41IDksMTkuNSBaIgogICAgICAgc3R5bGU9ImZpbGw6IzE3MTgxYTtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6bm9uemVybztzdHJva2U6bm9uZSIKICAgICAgIHRyYW5zZm9ybT0ibWF0cml4KDEuMzMzMzMzMywwLDAsLTEuMzMzMzMzMywwLjY2NjY2NjY3LDI2KSIgLz4KICAgIDxwYXRoCiAgICAgICBpZD0icGF0aDIiCiAgICAgICBkPSJtIDIuMjIyNjU2LC0yLjI0MjE4OCB6IG0gMS4xMDYsOC4yODgwMDEgdiAxLjQ3IGggMS4zNDQwMDEgdiAtMS40NyB6IG0gMC4wNywtOC4yODgwMDEgdiA2LjkwMjAwMSBoIDEuMjA0IHYgLTYuOTAyMDAxIHoiCiAgICAgICBzdHlsZT0iZmlsbDojMDAwMDAwO2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIgogICAgICAgdHJhbnNmb3JtPSJtYXRyaXgoMS4zMzMzMzMzLDAsMCwtMS4zMzMzMzMzLDcuMzMzMzMzMywxNS42NzcwODMpIiAvPgogICAgPHBhdGgKICAgICAgIGlkPSJwYXRoMyIKICAgICAgIGQ9IiIKICAgICAgIHN0eWxlPSJmaWxsOiMwMDAwMDA7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICBhcmlhLWxhYmVsPSJpIgogICAgICAgdHJhbnNmb3JtPSJtYXRyaXgoMS4zMzMzMzMzLDAsMCwxLjMzMzMzMzMsMTAuMjk2ODc1LDE4LjY2NjY2NykiIC8+CiAgPC9nPgo8L3N2Zz4KCg==");
}

/* The tick is centred in its 24x24 viewBox (3.96 units above and below,
   0.85 either side), so a badge that centres the image centres the tick. */
icon[image="icon-validation"] {
    background-image: url("data:image/svg+xml;base64,PHN2ZwogICB2ZXJzaW9uPSIxLjEiCiAgIGlkPSJzdmcxIgogICB3aWR0aD0iMjQiCiAgIGhlaWdodD0iMjQiCiAgIHZpZXdCb3g9IjAgMCAyNCAyNCIKICAgc29kaXBvZGk6ZG9jbmFtZT0iaWNvblZhbGlkYXRpb24uc3ZnIgogICBpbmtzY2FwZTp2ZXJzaW9uPSIxLjQuMiAoZWJmMGU5NDAsIDIwMjUtMDUtMDgpIgogICB4bWxuczppbmtzY2FwZT0iaHR0cDovL3d3dy5pbmtzY2FwZS5vcmcvbmFtZXNwYWNlcy9pbmtzY2FwZSIKICAgeG1sbnM6c29kaXBvZGk9Imh0dHA6Ly9zb2RpcG9kaS5zb3VyY2Vmb3JnZS5uZXQvRFREL3NvZGlwb2RpLTAuZHRkIgogICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxkZWZzCiAgICAgaWQ9ImRlZnMxIiAvPgogIDxzb2RpcG9kaTpuYW1lZHZpZXcKICAgICBpZD0ibmFtZWR2aWV3MSIKICAgICBwYWdlY29sb3I9IiNmZmZmZmYiCiAgICAgYm9yZGVyY29sb3I9IiMwMDAwMDAiCiAgICAgYm9yZGVyb3BhY2l0eT0iMC4yNSIKICAgICBpbmtzY2FwZTpzaG93cGFnZXNoYWRvdz0iMiIKICAgICBpbmtzY2FwZTpwYWdlb3BhY2l0eT0iMC4wIgogICAgIGlua3NjYXBlOnBhZ2VjaGVja2VyYm9hcmQ9IjAiCiAgICAgaW5rc2NhcGU6ZGVza2NvbG9yPSIjZDFkMWQxIgogICAgIGlua3NjYXBlOnpvb209IjEuMDgzMzMzMyIKICAgICBpbmtzY2FwZTpjeD0iMTEuNTM4NDYyIgogICAgIGlua3NjYXBlOmN5PSIxMiIKICAgICBpbmtzY2FwZTp3aW5kb3ctd2lkdGg9IjE1MTIiCiAgICAgaW5rc2NhcGU6d2luZG93LWhlaWdodD0iOTIxIgogICAgIGlua3NjYXBlOndpbmRvdy14PSIwIgogICAgIGlua3NjYXBlOndpbmRvdy15PSI2MSIKICAgICBpbmtzY2FwZTp3aW5kb3ctbWF4aW1pemVkPSIwIgogICAgIGlua3NjYXBlOmN1cnJlbnQtbGF5ZXI9ImcxIj4KICAgIDxpbmtzY2FwZTpwYWdlCiAgICAgICB4PSIwIgogICAgICAgeT0iMCIKICAgICAgIGlua3NjYXBlOmxhYmVsPSIxIgogICAgICAgaWQ9InBhZ2UxIgogICAgICAgd2lkdGg9IjI0IgogICAgICAgaGVpZ2h0PSIyNCIKICAgICAgIG1hcmdpbj0iMCIKICAgICAgIGJsZWVkPSIwIiAvPgogIDwvc29kaXBvZGk6bmFtZWR2aWV3PgogIDxnCiAgICAgaWQ9ImcxIgogICAgIGlua3NjYXBlOmdyb3VwbW9kZT0ibGF5ZXIiCiAgICAgaW5rc2NhcGU6bGFiZWw9IjEiPgogICAgPHBhdGgKICAgICAgIGlkPSJwYXRoMSIKICAgICAgIGQ9Ik0gNS42NDI2MTUsMS4wNjc0NTkgNS4yODI3NzMsMC43MjAzMDggNS42NDcwMTEsMC4zNDI3NTUgNi4wMDY2NDEsMC43MjQ2OTkgWiBNIDYuMDAyNDU3LDEuNDE0NjEgMC4zNTk4NDIsNy4yNjM1MDMgLTAuMzU5ODQyLDYuNTY5MjAxIDUuMjgyNzczLDAuNzIwMzA4IFogbSA5LjYzMzUxNiwxMC45OTU2MDkgLTEwLjM1NzM4NSwtMTEgMC43MjgwNTMsLTAuNjg1NTIgMTAuMzU3Mzg2LDExIHoiCiAgICAgICBzdHlsZT0iZmlsbDojMTcxODFhO2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIgogICAgICAgdHJhbnNmb3JtPSJtYXRyaXgoMS4zMzMzMzMzLDAsMCwtMS4zMzMzMzMzLDEuMzMzMzMzMywyMC41MDE5ODIpIiAvPgogIDwvZz4KPC9zdmc+Cgo=");
}

/* Light-stroke right-pointing chevron (the drill-in chevron's artwork, see
   .mobile-nav-chevron). A mask rather than a background image, so it takes
   the surrounding text colour, and sized to its 7x12 artwork rather than the
   21px icon square. */
icon[image="chevron-right"] {
    width: 7px;
    min-width: 7px;
    height: 12px;
    margin-top: 0;
    background: currentColor;
    mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='12' viewBox='0 0 7 12' fill='none'%3E%3Cpath d='M1 0.5L6.5 6L1 11.5' stroke='black' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Right to left, "forward" is to the left. */
icon[image="chevron-right"]:dir(rtl) {
    transform: scaleX(-1);
}

hr {
  border: none;
  border-top: 1px solid #CCCCBF;
  margin: 16px 0;
}

table.full-width {
  width: 100%;
}

table.borderless-row-divided {
  border-spacing: 0;
}

table.borderless-row-divided td,
table.borderless-row-divided th {
  border: 0;
  padding: 5px 0px;
  font-weight: normal;
}

table.borderless-row-divided tr + tr td,
table.borderless-row-divided tr + tr th {
  border-top: 1px solid #ddd;
}

/* alignment — also table-scoped */
table .align-left {
  text-align: left;
}

table .align-right {
  text-align: right;
}

list-item {
  display: flex;
  align-items: stretch;
  margin-bottom: 8px;
}

list-item > img {
  width: 170px;
  height: 170px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  flex: 0 0 auto;
}

list-item {
  position: relative;
}

list-item > image-overlay {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 170px;
  height: 170px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #fff;
  z-index: 1;
}

list-item > image-overlay traffic-light-title {
  color: #fff;
}

list-item > content {
  margin-left: 8px;
  margin-right: 8px;
}

.check-field {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-family: inherit;
  color: #1f1f1f;
}

/* visually hide the native box but keep it accessible */
.check-field input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  overflow: hidden;
}

/* custom square */
.check-field .box{
  position: relative;
  inline-size: 1.6em;     /* square size relative to text */
  block-size: 1.6em;
  border: 1px solid #1f1f1f;
  background: transparent;
  flex: 0 0 auto;
  margin-left: 8px;
  margin-right: 8px;
}

/* checkmark */
.check-field .box::after{
  content: "";
  position: absolute;
  left: 20%;
  top: 20%;
  inline-size: 80%;
  block-size: 80%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='20 6 9 17 4 12' stroke='%231F1F1F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  visibility: hidden;
}

/* show check when checked */
.check-field input:checked + .box::after{
  /*transform: rotate(45deg) scale(1);*/
  visibility: visible;
}

/* focus-visible ring for keyboard users */
.check-field input:focus-visible + .box{
  box-shadow: 0 0 0 3px rgba(0,0,0,.12);
}

/* copy styling */
.check-field .text{
  line-height: 1.35;
}

/* required asterisk — aria-required covers checkboxes whose required-ness is
   enforced by a conditional Pristine validator rather than the attribute */
.check-field:has(input[required]) .text::after,
.check-field:has(input[aria-required="true"]) .text::after {
  content: ' *';
  color: var(--apron-field-error-color, #FF4D4D);
}

/* container — modelled on text-field, and the same height as a standalone
   text-field so the two line up in a form. */
:is(.select-field, select-field) {
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 34px 4px 8px;
  border-bottom: 1px solid #D2D2C6;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  font-family: "Hanken Grotesk", "HK Grotesk", sans-serif;
  color: #000000;
  line-height: 1.6;
  font-weight: 500;
  overflow: hidden;
  justify-content: flex-end;
}

/* Inside a box the container provides the outer chrome; widen the field
   padding and suppress the standalone border so it blends in. */
box-decoration :is(.select-field, select-field) {
  padding: 34px 16px 8px;
  border-bottom: 0;
}

/* the select element */
:is(.select-field, select-field) select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  margin: 0;
  padding: 0 24px 0 0;
  border: none;
  outline: 0;
  background: transparent;
  box-sizing: border-box;
  color: #000000;
  /* Native form controls do not inherit the surrounding font family. */
  font-family: "Hanken Grotesk", "HK Grotesk", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5rem;
  cursor: pointer;
}

:is(.select-field, select-field) select:focus {
  outline: none;
}

/* custom chevron: the design's light-stroke 16x8 down chevron. The design
   centres it on an empty field's large label, and on a filled field's label
   and value together (just under 1px below their middle). Here the large
   label's capitals are centred 35px below the field's top, and a filled
   field's floated-label cap top and value baseline are 17.5px and 50.5px
   below it, boxed or not. So one position, 35px, lines the chevron up in
   every state (to within half a pixel of the design), and it doesn't move
   when the label floats. It is measured from the top, not the middle, as a
   boxed field's error message sits inside the field, below the value. A
   mask rather than a background image, so it takes the text colour. */
:is(.select-field, select-field)::after {
  content: "";
  position: absolute;
  inset-inline-end: 8px;
  top: 35px;
  width: 17px;
  height: 9px;
  transform: translateY(-50%);
  background: currentColor;
  mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='9' viewBox='0 0 17 9' fill='none'%3E%3Cpath d='M0.5 0.5L8.5 8.5L16.5 0.5' stroke='black' stroke-linecap='round'/%3E%3C/svg%3E");
  pointer-events: none;
}

/* In a box, in line with the box's padding. */
box-decoration :is(.select-field, select-field)::after {
  inset-inline-end: 16px;
}

/* floating label (default = large, positioned above the value) */
:is(.select-field, select-field) label {
  position: absolute;
  left: 4px;
  right: 4px;
  top: 24px;
  pointer-events: none;
  transition: top .25s ease-in-out, font-size .25s ease-in-out, line-height .25s ease-in-out;
  font-family: "Hanken Grotesk", "HK Grotesk", sans-serif;
  font-weight: 400;
  color: #000000;
  font-size: 1rem;
  line-height: 1.5rem;
}

box-decoration :is(.select-field, select-field) label {
  left: 16px;
  right: 16px;
}

/* required asterisk */
:is(.select-field, select-field):has(select[required]) label::after {
  content: ' *';
  color: var(--apron-field-error-color, #FF4D4D);
}

/* compact (floated) label on focus or when a value is chosen */
:is(.select-field, select-field):has(select:focus) label,
:is(.select-field, select-field):has(select:valid) label {
  top: 14px;
  font-size: 0.75rem;
  line-height: 1rem;
}

/* container */
text-field {
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 34px 16px 8px;
  border-bottom: 1px solid #8D8D8D;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  font-family: "Hanken Grotesk", "HK Grotesk", sans-serif;
  color: #000000;
  line-height: 1.6;
  font-weight: 500;
  overflow: hidden;
  justify-content: flex-end;
}

text-field.standalone {
  padding: 34px 4px 8px;
  border-bottom: 1px solid #D2D2C6;
  justify-content: flex-end;
}

/* floating label (default = large, centered-ish) */
text-field label {
  position: absolute;
  inset-inline-start: 16px;
  top: 24px;
  width: 100%;
  padding-inline-end: 32px;
  pointer-events: none;
  transition: transform .25s ease-in-out, top .25s ease-in-out, font-size .25s ease-in-out, line-height .25s ease-in-out;
  font-family: "Hanken Grotesk", HK Grotesk, sans-serif;
  font-weight: 400;
  color: #000000;
  font-size: 1rem;
  line-height: 1.5rem;
}

text-field.standalone label {
  inset-inline-start: 4px;
}

/* required asterisk — aria-required covers fields whose required-ness is
   enforced by a conditional Pristine validator rather than the attribute */
text-field.standalone:has(input[required]) label::after,
text-field.standalone:has(input[aria-required="true"]) label::after {
  content: ' *';
  color: var(--apron-field-error-color, #FF4D4D);
}

text-field:not(:focus-within):has(input:invalid:not(:placeholder-shown)) label {
  color: var(--apron-field-error-color, #FF4D4D);
}

/* compact (floated) state */
text-field:focus-within label,
text-field:has(input:not(:placeholder-shown)) label{
  top: 14px;
  font-size: 0.75rem;
  line-height: 1rem;
}

/* inputs */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="tel" i]
{
  margin: 0;
  width: 100%;
  border: none;
  outline: 0;
  padding: 0;
  background: transparent;
  box-sizing: border-box;
  font-family: "Hanken Grotesk", HK Grotesk, sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5rem;
}

input[readonly] {
  color: #8D8D8D;
  cursor: default;
}

text-field:has(input[readonly]) label {
  color: #8D8D8D;
  cursor: default;
}

input[readonly][pagesheet-modal-open]:not([pagesheet-modal-open=""]) {
  color: #000000;
  cursor: pointer;
}

text-field:has(input[readonly][pagesheet-modal-open]:not([pagesheet-modal-open=""])) label {
  color: #000000;
  cursor: pointer;
}

/* container — modelled on text-field so it can be standalone or boxed */
input-suggestion {
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 34px 16px 8px;
  border-bottom: 1px solid #8D8D8D;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  font-family: "Hanken Grotesk", "HK Grotesk", sans-serif;
  color: #000000;
  line-height: 1.6;
  font-weight: 500;
  justify-content: flex-end;
}

input-suggestion.standalone {
  padding: 34px 4px 8px;
  border-bottom: 1px solid #D2D2C6;
}

/* floating label (default = large).
   Anchored with left/right (rather than text-field's width:100% + overflow:hidden)
   so it never overflows the container — this element can't clip, because the
   suggestion dropdown needs to escape the bottom edge. */
input-suggestion label {
  position: absolute;
  left: 16px;
  right: 16px;
  top: 24px;
  pointer-events: none;
  transition: transform .25s ease-in-out, top .25s ease-in-out, font-size .25s ease-in-out, line-height .25s ease-in-out;
  font-family: "Hanken Grotesk", HK Grotesk, sans-serif;
  font-weight: 400;
  color: #000000;
  font-size: 1rem;
  line-height: 1.5rem;
}

input-suggestion.standalone label {
  left: 4px;
  right: 4px;
}

/* required asterisk */
input-suggestion.standalone:has(input[required]) label::after {
  content: ' *';
  color: var(--apron-field-error-color, #FF4D4D);
}

input-suggestion:not(:focus-within):has(input:invalid:not(:placeholder-shown)) label {
  color: var(--apron-field-error-color, #FF4D4D);
}

/* compact (floated) state */
input-suggestion:focus-within label,
input-suggestion:has(input:not(:placeholder-shown)) label {
  top: 14px;
  font-size: 0.75rem;
  line-height: 1rem;
}

/* suggestions dropdown */
input-suggestion .is-suggest {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin: 6px 0 0;
  list-style: none;
  padding: 0;
  background: #FCFAF8;
  border: 1px solid #d9d6d0;
  border-radius: 4px;
  z-index: 1000;
  max-height: 320px;
  overflow: auto;
}

input-suggestion .is-suggest[hidden] {
  display: none;
}

input-suggestion .is-item {
  border-radius: 4px;
  padding: 16px;
  cursor: pointer;
  color: #000000;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0px;
  line-height: 100%;
}

input-suggestion .is-item mark {
  background: transparent;
  color: #AA590E;
  font-weight: inherit;
}

input-suggestion .is-item.active,
input-suggestion .is-item:hover {
  background: #F0EFEB;
}

/* the open list's only row when nothing matches: not an option to pick */
input-suggestion .is-empty {
  padding: 16px;
  cursor: default;
  color: #666666;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0px;
  line-height: 100%;
}

/* result-count live region: read by screen readers, never shown. Absolutely
   positioned so it takes no part in the field's flex layout. */
input-suggestion .is-status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

box-decoration {
  display: block;
  color: #000000;
  line-height: 1.6;
  font-weight: 500;
  box-sizing: border-box;
  border: 1px solid #8D8D8D;
  border-radius: 4px;
  margin: 16px 0;
}

box-decoration > *:not(:last-child) {
  border-bottom: 1px solid #8D8D8D;
}

/* Fields wrapped for converged error rendering (field + error element inside
   a .form-field div): the wrapper carries the shared separator border, so
   drop the field's own bottom border to avoid a doubled line. */
box-decoration > .form-field > :is(text-field, textarea-field, .select-field, select-field) {
  border-bottom: 0;
}

box-decoration > *:last-child {
  border-bottom: 0;
}

/* Ensure the modal itself never shows a border-bottom (defensive) */
box-decoration > pagesheet-modal {
  border-bottom: 0;
}

/* If the last child is a pagesheet-modal, also remove border from the element before it */
box-decoration:has(> pagesheet-modal:last-child)
  > *:nth-last-child(2) {
  border-bottom: 0 !important;
}

/* container */
textarea-field {
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 34px 16px 8px;
  border-bottom: 1px solid #8D8D8D;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  font-family: "Hanken Grotesk", "HK Grotesk", sans-serif;
  color: #000000;
  line-height: 1.6;
  font-weight: 500;
  overflow: hidden;
  justify-content: flex-end;
}

textarea-field.standalone {
  padding: 34px 4px 8px;
  border-bottom: 1px solid #D2D2C6;
}

/* floating label (default = large, centered-ish); inset both sides so a
   long label wraps inside the field rather than running past its edge */
textarea-field label {
  position: absolute;
  inset-inline-start: 16px;
  inset-inline-end: 16px;
  top: 24px;
  pointer-events: none;
  transition: transform .25s ease-in-out, top .25s ease-in-out, font-size .25s ease-in-out, line-height .25s ease-in-out;
  font-family: "Hanken Grotesk", HK Grotesk, sans-serif;
  font-weight: 400;
  color: #000000;
  font-size: 1rem;
  line-height: 1.5rem;
}

textarea-field.standalone label {
  inset-inline-start: 4px;
  inset-inline-end: 4px;
}

/* required asterisk */
textarea-field.standalone:has(textarea[required]) label::after {
  content: ' *';
  color: var(--apron-field-error-color, #FF4D4D);
}

/* compact (floated) state: in flow above the textarea, so a label that
   wraps pushes the text down instead of overlapping it. One line sits where
   the absolute label did: 14px down (34px padding less 20px), 4px above the
   text. */
textarea-field:focus-within label,
textarea-field:has(textarea:not(:placeholder-shown)) label {
  position: static;
  margin-top: -20px;
  margin-bottom: 4px;
  font-size: 0.75rem;
  line-height: 1rem;
}

/* textarea */
textarea-field textarea {
  margin: 0;
  width: 100%;
  border: none;
  outline: 0;
  padding: 0;
  background: transparent;
  box-sizing: border-box;
  font-family: "Hanken Grotesk", HK Grotesk, sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5rem;
  resize: vertical;
  min-height: 120px;
}

input[readonly] {
  color: #8D8D8D;
  cursor: default;
}

textarea-field:has(input[readonly]) label {
  color: #8D8D8D;
  cursor: default;
}

input[readonly][pagesheet-modal-open]:not([pagesheet-modal-open=""]) {
  color: #000000;
  cursor: pointer;
}

textarea-field:has(input[readonly][pagesheet-modal-open]:not([pagesheet-modal-open=""])) label {
  color: #000000;
  cursor: pointer;
}

switch-field {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
  align-items: center;
}
/* switch_field.js toggles the switch from a click anywhere on the field */
switch-field:has(.switch-toggle__input:not(:disabled)) {
  cursor: pointer;
}

switch-field content {
  font-size: 0.875rem;
  color: #000;
  line-height: 1rem;
  max-width: 80%;
}

switch-field content a {
  color: #000;
}

switch-toggle {
  display: inline-block;
}

switch-toggle .switch-toggle__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
/* visual track */
switch-toggle .switch-toggle__label {
  padding: 1px;
  width: 42px;
  height: 24px;
  border: 1px solid #000;
  cursor: pointer;
  display: inline-block;
  border-radius: 24px;
  position: relative;
  transition: background-color 0.2s ease;
}
/* knob */
switch-toggle .switch-toggle__label::after {
  content: "";
  position: absolute;
  top: 2px;
  inset-inline-start: 1px;
  width: 20px;
  height: 20px;
  border: 1px solid #000;
  background-color: #fff;
  border-radius: 50%;
  transition: transform 0.2s ease;
}
/* on state */
switch-toggle .switch-toggle__input:checked + .switch-toggle__label {
  background-color: #000;
}

switch-toggle .switch-toggle__input:checked + .switch-toggle__label::after {
  transform: translateX(20px);
}
/* right to left, the knob starts at the right and slides left */
switch-toggle .switch-toggle__input:checked:dir(rtl) + .switch-toggle__label::after {
  transform: translateX(-20px);
}
/* focus ring */
switch-toggle .switch-toggle__input:focus + .switch-toggle__label {
  outline: 2px solid #9cf;
  outline-offset: 2px;
}

:root {
  --apron-field-error-color: #FF4D4D;
}

/* Converged field errors: one element per field, shared by server-rendered
   markup and Pristine. Templates emit it unconditionally inside the
   `.form-field` wrapper —

     <div class="form-field has-error">
       <text-field class="standalone">…</text-field>
       <div class="pristine-error error-text" id="error-<input id>"
            data-source="server">Message</div>
     </div>

   — and Pristine adopts it instead of creating its own (pristine_loader.js
   documents the contract). */
.error-text {
  color: var(--apron-field-error-color);
  /* The field labels' weight, set explicitly so messages match the label
     above them rather than inheriting whatever surrounds the field (the
     body's 350, box-decoration's 500, or a consumer's own body weight). */
  font-weight: 400;
  font-size: 0.75rem;
  line-height: 1rem;
  margin: 4px 0 0;
}

/* The element is always present so its id is stable for aria-describedby;
   don't let it leave a gap when there is no error. */
.error-text:empty {
  display: none;
}

/* Keep member-entered values in their normal colour. The label, field line
   and message carry the shared error colour instead. Including the class
   form of select-field in :is() gives these rules enough specificity to
   outweigh consumer-level `body.x select-field.standalone` rules without
   resorting to !important. */
.form-field.has-error > :is(text-field, textarea-field, input-suggestion, select-field, .select-field) label {
  color: var(--apron-field-error-color);
}

.form-field.has-error > :is(text-field, textarea-field, input-suggestion) {
  border-bottom: 1px solid var(--apron-field-error-color);
}

/* In a box-decoration the message lives inside the field and the enclosing
   box is already the visual boundary, so there is no separator bar. */
box-decoration > .form-field.has-error > text-field:has(> .error-text) {
  border-bottom: 0;
}

box-decoration > .form-field.has-error > :is(select-field, .select-field):has(> .error-text) {
  border-bottom: 0;
}

.form-field.has-error > :is(select-field, .select-field) {
  border-bottom: 1px solid var(--apron-field-error-color);
}


.form-field.has-error > date-picker {
  --dp-label-color: var(--apron-field-error-color);
  --dp-border-color: var(--apron-field-error-color);
}

/* Align error copy with each component's floating label. */
.form-field:has(> :is(text-field, textarea-field, input-suggestion)) > .error-text {
  padding-inline-start: 16px;
}

.form-field:has(> :is(text-field, textarea-field, input-suggestion).standalone) > .error-text {
  padding-inline-start: 4px;
}

.form-field:has(> :is(select-field, .select-field)) > .error-text {
  padding-inline-start: 4px;
}


/* A boxed date-picker's legend sits at 12px, not the 16px of the other
   fields' labels. */
.form-field:has(> date-picker) > .error-text {
  padding-inline-start: 12px;
}

.form-field:has(> date-picker.standalone) > .error-text {
  padding-inline-start: 4px;
}

/* Keep focused fields clear of sticky chrome. */
.form-field {
  scroll-margin-top: 24px;
  scroll-margin-bottom: 96px;
}

/* pristine_loader.js focuses the wrapper itself (giving it tabindex="-1")
   only when the errored control can't take focus, e.g. a hidden file input
   behind a styled picker. The wrapper is a landing point, not a control, so
   it gets no ring around the label, field and message: the inline error is
   the cue. The controls inside keep their own focus styles. */
.form-field[tabindex="-1"]:focus {
  outline: none;
}

/* One-shot wobble pristine_loader.js applies to errored fields when a submit
   fails or a page arrives with server-rendered errors. Only defined under
   no-preference so motion-sensitive users never see it; the persistent field
   state, required marker and any applicable inline message carry the
   information. */
@media (prefers-reduced-motion: no-preference) {
  .form-field.field-wobble {
    animation: field-wobble 0.35s ease-in-out;
  }

  @keyframes field-wobble {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-5px); }
    40% { transform: translateX(4px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(2px); }
  }
}

/* DEPRECATED: legacy server-rendered error paragraphs. Migrate templates to
   the converged pattern above; this ruleset is kept one release cycle for
   consumers still emitting <p class="field-error">. */
.field-error {
  color: var(--apron-field-error-color);
  font-size: 0.75rem;
  line-height: 1rem;
  margin: 4px 0 0;
}