:root {

  /* -------- Color Palette -------- */

  --pal-neutral-100: #ffffff;
  --pal-neutral-95: #f6f4f6;
  --pal-neutral-93: #efebef;
  --pal-neutral-90: #dfdae1;
  --pal-neutral-80: #c9c1cd;
  --pal-neutral-70: #afa4b4;
  --pal-neutral-60: #94879b;
  --pal-neutral-50: #7d7184;
  --pal-neutral-40: #6b6071;
  --pal-neutral-10: #201b22;

  --pal-purple-95: #f9f2fd;
  --pal-purple-93: #f3e7f9;
  --pal-purple-90: #ead4f2;
  --pal-purple-80: #d5adeb;
  --pal-purple-70: #c289e6;
  --pal-purple-60: #ae63de;
  --pal-purple-50: #9247c2;
  --pal-purple-40: #7b3ba5;
  --pal-purple-30: #5c2a7e;
  --pal-purple-20: #421560;
  --pal-purple-10: #2b0e3f;

  --pal-blue-95: #ecf8fd;
  --pal-blue-93: #def2fc;
  --pal-blue-90: #c2e7fa;
  --pal-blue-80: #99d1f5;
  --pal-blue-70: #71b8ef;
  --pal-blue-60: #4f9bde;
  --pal-blue-50: #2582d0;
  --pal-blue-40: #1f6bb8;
  --pal-blue-30: #044781;
  --pal-blue-20: #00315c;
  --pal-blue-10: #002442;

  --pal-turquoise-95: #e9fbf9;
  --pal-turquoise-93: #d8f8f4;
  --pal-turquoise-90: #aeefe8;
  --pal-turquoise-80: #8ae0d7;
  --pal-turquoise-70: #55cec3;
  --pal-turquoise-60: #11bba9;
  --pal-turquoise-50: #009e8e;
  --pal-turquoise-40: #007366;
  --pal-turquoise-30: #005248;
  --pal-turquoise-20: #003d36;
  --pal-turquoise-10: #002924;

  --pal-green-95: #eef9f1;
  --pal-green-93: #e1f4e7;
  --pal-green-90: #c3eace;
  --pal-green-80: #a1deb2;
  --pal-green-70: #77cf8f;
  --pal-green-60: #4eb76c;
  --pal-green-50: #2a9d4c;
  --pal-green-40: #167231;
  --pal-green-30: #0b5620;
  --pal-green-20: #064217;
  --pal-green-10: #042a0f;

  --pal-yellow-95: #fff6d1;
  --pal-yellow-93: #ffefad;
  --pal-yellow-90: #fbe074;
  --pal-yellow-80: #f9cc15;
  --pal-yellow-70: #ebba00;
  --pal-yellow-60: #d6a200;
  --pal-yellow-50: #b27e00;
  --pal-yellow-40: #875b00;
  --pal-yellow-30: #613e00;
  --pal-yellow-20: #4d2f00;
  --pal-yellow-10: #2e1c00;

  --pal-orange-95: #fff4e5;
  --pal-orange-93: #ffe9cf;
  --pal-orange-90: #ffd5a3;
  --pal-orange-80: #ffb766;
  --pal-orange-70: #fd9730;
  --pal-orange-60: #ed720c;
  --pal-orange-50: #d45202;
  --pal-orange-40: #a33500;
  --pal-orange-30: #7a2200;
  --pal-orange-20: #661900;
  --pal-orange-10: #421000;

  --pal-red-95: #fff0f3;
  --pal-red-93: #ffe5eb;
  --pal-red-90: #ffccd5;
  --pal-red-80: #ffa8b5;
  --pal-red-70: #ff8091;
  --pal-red-60: #f7596c;
  --pal-red-50: #d72d40;
  --pal-red-40: #a91e2e;
  --pal-red-30: #78111c;
  --pal-red-20: #630811;
  --pal-red-10: #47060c;

  /* -------- Brand Colors -------- */

  --brand-neutral-white: #ffffff;
  --brand-neutral-light: #dbdbdb;
  --brand-neutral-dark: #7c7c7c;
  --brand-neutral-black: #000000;

  --brand-purple-lightest: #f6eaff;
  --brand-purple-light: #deb4ff;
  --brand-purple-mid: #6a3c98;
  --brand-purple-dark: #500e82;
  --brand-purple-darkest: #3d125f;

  --brand-blue-lightest: #d7f5ff;
  --brand-blue-light: #88e3ff;
  --brand-blue-mid: #005fbe;
  --brand-blue-dark: #11258e;

  --brand-teal-lightest: #dbfffd;
  --brand-teal-light: #95ffec;
  --brand-teal-mid: #10c0c0;
  --brand-teal-dark: #106375;

  --brand-green-lightest: #dbfff3;
  --brand-green-light: #95ffcc;
  --brand-green-mid: #0fc382;
  --brand-green-dark: #107557;

  --brand-yellow-lightest: #fff4cd;
  --brand-yellow-light: #ffe27f;
  --brand-yellow-mid: #ffc500;

  --brand-orage-light: #ffd7c9;
  --brand-orange-mid: #ffa17f;
  --brand-orange-dark: #ff4400;

  --brand-red-light: #ffd0ec;
  --brand-red-mid: #ff9cd8;
  --brand-red-dark: #e5113c;

  /* -------- System Colors -------- */

  --sys-fg-base: var(--pal-neutral-10);
  --sys-fg-primary: var(--pal-purple-10);
  --sys-fg-secondary: var(--pal-neutral-40);
  --sys-fg-tertiary: var(--pal-neutral-60);
  --sys-fg-subtle: var(--pal-neutral-70);
  --sys-fg-minimal: var(--pal-neutral-80);
  --sys-fg-positive: var(--pal-green-50);
  --sys-fg-negative: var(--pal-red-50);
  --sys-fg-on-color: var(--pal-neutral-100);
  --sys-fg-on-contrast: var(--pal-neutral-95);
  --sys-fg-on-disabled: var(--pal-neutral-70);
  --sys-fg-disabled: var(--pal-neutral-80);

  --sys-primary-base: var(--pal-purple-40);
  --sys-primary-emphasized: var(--pal-purple-30);
  --sys-primary-muted: var(--pal-purple-80);
  --sys-primary-subtle: var(--pal-purple-93);
  --sys-primary-disabled: var(--pal-purple-95);

  --sys-interactive-base: var(--pal-purple-50);
  --sys-interactive-strong: var(--pal-purple-40);
  --sys-interactive-bold: var(--pal-purple-60);
  --sys-interactive-highlight: var(--pal-purple-70);
  --sys-interactive-muted: var(--pal-purple-80);
  --sys-interactive-moderate: var(--pal-purple-90);
  --sys-intercative-subtle: var(--pal-purple-93);
  --sys-interactive-minimal: var(--pal-purple-95);
  --sys-interactive-disabled: var(--pal-neutral-90);

  --sys-neutral-base: var(--pal-neutral-50);
  --sys-neutral-strong: var(--pal-neutral-40);
  --sys-neutral-bold: var(--pal-neutral-60);
  --sys-neutral-muted: var(--pal-neutral-80);
  --sys-neutral-moderate: var(--pal-neutral-90);
  --sys-neutral-subtle: var(--pal-neutral-93);
  --sys-neutral-minimal: var(--pal-neutral-95);

  --sys-bg-surface: var(--pal-neutral-100);
  --sys-bg-contrast: var(--pal-neutral-10);
  --sys-bg-moderate: var(--pal-neutral-90);
  --sys-bg-subtle: var(--pal-neutral-93);
  --sys-bg-minimal: var(--pal-neutral-95);
  --sys-bg-disabled: var(--pal-neutral-95);
  --sys-bg-transparent: rgba(255, 255, 255, 0);

  --sys-info-base: var(--pal-blue-50);
  --sys-info-strong: var(--pal-blue-40);
  --sys-info-bold: var(--pal-blue-60);
  --sys-info-muted: var(--pal-blue-80);
  --sys-info-moderate: var(--pal-blue-90);
  --sys-info-subtle: var(--pal-blue-93);
  --sys-info-minimal: var(--pal-blue-95);

  --sys-warning-base: var(--pal-yellow-50);
  --sys-warning-strong: var(--pal-yellow-40);
  --sys-warning-bold: var(--pal-yellow-60);
  --sys-warning-muted: var(--pal-yellow-80);
  --sys-warning-moderate: var(--pal-yellow-90);
  --sys-warning-subtle: var(--pal-yellow-93);
  --sys-warning-minimal: var(--pal-yellow-95);

  --sys-orange-base: var(--pal-orange-50);
  --sys-orange-strong: var(--pal-orange-40);
  --sys-orange-bold: var(--pal-orange-60);
  --sys-orange-muted: var(--pal-orange-80);
  --sys-orange-moderate: var(--pal-orange-90);
  --sys-orange-subtle: var(--pal-orange-93);
  --sys-orange-minimal: var(--pal-orange-95);

  --sys-border-minimal: var(--pal-neutral-93);
  --sys-border-subtle: var(--pal-neutral-90);
  --sys-border-strong: var(--pal-neutral-80);
  --sys-border-emphasized: var(--pal-neutral-70);
  --sys-border-critical: var(--pal-red-50);
  --sys-border-on-contrast: var(--pal-neutral-95);
  --sys-border-inverse: var(--pal-neutral-100);
  --sys-border-disabled: var(--pal-neutral-80);

  --sys-success-base: var(--pal-green-50);
  --sys-success-strong: var(--pal-green-40);
  --sys-success-bold: var(--pal-green-60);
  --sys-success-muted: var(--pal-green-80);
  --sys-success-moderate: var(--pal-green-90);
  --sys-success-subtle: var(--pal-green-93);
  --sys-success-minimal: var(--pal-green-95);

  --sys-critical-base: var(--pal-red-50);
  --sys-critical-strong: var(--pal-red-40);
  --sys-critical-bold: var(--pal-red-60);
  --sys-critical-muted: var(--pal-red-80);
  --sys-critical-moderate: var(--pal-red-90);
  --sys-critical-subtle: var(--pal-red-93);
  --sys-critical-minimal: var(--pal-red-95);

  --sys-turquoise-base: var(--pal-turquoise-50);
  --sys-turquoise-strong: var(--pal-turquoise-40);
  --sys-turquoise-bold: var(--pal-turquoise-60);
  --sys-turquoise-muted: var(--pal-turquoise-80);
  --sys-turquoise-moderate: var(--pal-turquoise-90);
  --sys-turquoise-subtle: var(--pal-turquoise-93);
  --sys-turquoise-minimal: var(--pal-turquoise-95);

  /* -------- Shorthands -------- */

  --background-primary: var(--sys-bg-surface);
  --background-secondary: var(--sys-bg-minimal);
  --background-tertiary: var(--sys-bg-subtle);
  --background-hover: var(--sys-bg-subtle);
  --background-active: var(--sys-bg-moderate);
  --background-selected: var(--sys-interactive-minimal);
  --background-selected-hover: var(--sys-intercative-subtle);
  --background-contrast: var(--sys-bg-contrast);
  --background-disabled: var(--sys-bg-disabled);

  --text-primary: var(--sys-fg-primary);
  --text-secondary: var(--sys-fg-secondary);
  --text-tertiary: var(--sys-fg-tertiary);
  --text-body: var(--sys-fg-base);
  --text-helper: var(--sys-fg-secondary);
  --text-positive: var(--sys-fg-positive);
  --text-negative: var(--sys-fg-negative);
  --text-link: var(--sys-interactive-base);
  --text-link-hover: var(--sys-interactive-strong);
  --text-on-color: var(--sys-fg-on-color);
  --text-on-contrast: var(--sys-fg-on-contrast);
  --text-on-disabled: var(--sys-fg-on-disabled);
  --text-disabled: var(--sys-fg-disabled);

  --border-regular: var(--sys-border-subtle);
  --border-minimal: var(--sys-border-minimal);
  --border-strong: var(--sys-border-strong);
  --border-hover: var(--sys-border-emphasized);
  --border-focus: var(--sys-interactive-highlight);
  --border-selected: var(--sys-interactive-base);
  --border-error: var(--sys-border-critical);
  --border-on-contrast: var(--sys-border-on-contrast);
  --border-disabled: var(--sys-border-disabled);

  --icon-primary: var(--sys-fg-primary);
  --icon-secondary: var(--sys-fg-secondary);
  --icon-tertiary: var(--sys-fg-tertiary);
  --icon-positive: var(--sys-fg-positive);
  --icon-negative: var(--sys-fg-negative);
  --icon-interactive: var(--sys-interactive-base);
  --icon-interactive-hover: var(--sys-interactive-strong);
  --icon-on-color: var(--sys-fg-on-color);
  --icon-on-contrast: var(--sys-fg-on-contrast);
  --icon-on-disabled: var(--sys-fg-on-disabled);
  --icon-disabled: var(--sys-fg-disabled);

  --button-primary-bg: var(--sys-interactive-strong);
  --button-primary-bg-hover: var(--sys-primary-emphasized);
  --button-primary-bg-active: var(--sys-fg-primary);
  --button-primary-bg-disabled: var(--sys-primary-disabled);
  --button-primary-fg: var(--sys-fg-on-color);
  --button-primary-fg-hover: var(--sys-fg-on-color);
  --button-primary-fg-active: var(--sys-fg-on-color);
  --button-primary-fg-disabled: var(--sys-fg-on-disabled);

  --button-secondary-bg: var(--sys-bg-surface);
  --button-secondary-bg-hover: var(--sys-bg-subtle);
  --button-secondary-bg-active: var(--sys-bg-moderate);
  --button-secondary-bg-disabled: var(--sys-bg-minimal);
  --button-secondary-border: 1px solid var(--sys-border-strong);
  --button-secondary-border-hover: 1px solid var(--sys-border-emphasized);
  --button-secondary-border-active: 1px solid var(--sys-border-emphasized);
  --button-secondary-border-disabled: 1px solid var(--sys-border-disabled);
  --button-secondary-fg: var(--sys-fg-primary);
  --button-secondary-fg-hover: var(--sys-fg-primary);
  --button-secondary-fg-active: var(--sys-fg-primary);
  --button-secondary-fg-disabled: var(--sys-fg-disabled);

  --button-tertiary-bg: var(--sys-bg-transparent);
  --button-tertiary-bg-hover: var(--sys-bg-subtle);
  --button-tertiary-bg-active: var(--sys-bg-moderate);
  --button-tertiary-bg-disabled: var(--sys-bg-transparent);
  --button-tertiary-fg: var(--sys-interactive-base);
  --button-tertiary-fg-hover: var(--sys-interactive-strong);
  --button-tertiary-fg-active: var(--sys-fg-primary);
  --button-tertiary-fg-disabled: var(--sys-fg-disabled);

  --button-danger-primary-bg: var(--sys-critical-base);
  --button-danger-primary-bg-hover: var(--sys-critical-strong);
  --button-danger-primary-bg-active: var(--sys-critical-dark);
  --button-danger-primary-bg-disabled: var(--sys-primary-disabled);
  --button-danger-primary-fg: var(--sys-fg-on-color);
  --button-danger-primary-fg-hover: var(--sys-fg-on-color);
  --button-danger-primary-fg-active: var(--sys-fg-on-color);
  --button-danger-primary-fg-disabled: var(--sys-fg-on-disabled);

  --button-danger-secondary-bg: var(--sys-bg-surface);
  --button-danger-secondary-bg-hover: var(--sys-critical-minimal);
  --button-danger-secondary-bg-active: var(--sys-critical-moderate);
  --button-danger-secondary-bg-disabled: var(--sys-bg-minimal);
  --button-danger-secondary-border: var(--sys-critical-muted);
  --button-danger-secondary-border-hover: var(--sys-critical-muted);
  --button-danger-secondary-border-active: var(--sys-critical-base);
  --button-danger-secondary-border-disabled: var(--sys-border-disabled);
  --button-danger-secondary-fg: var(--sys-critical-base);
  --button-danger-secondary-fg-hover: var(--sys-critical-base);
  --button-danger-secondary-fg-active: var(--sys-critical-strong);
  --button-danger-secondary-fg-disabled: var(--sys-fg-disabled);

  --button-danger-tertiary-bg: var(--sys-bg-transparent);
  --button-danger-tertiary-bg-hover: var(--sys-critical-minimal);
  --button-danger-tertiary-bg-active: var(--sys-critical-moderate);
  --button-danger-tertiary-bg-disabled: var(--sys-bg-transparent);
  --button-danger-tertiary-fg: var(--sys-critical-base);
  --button-danger-tertiary-fg-hover: var(--sys-critical-base);
  --button-danger-tertiary-fg-active: var(--sys-critical-strong);
  --button-danger-tertiary-fg-disabled: var(--sys-fg-disabled);

  --input-text-label: var(--sys-fg-primary);
  --input-text-input-value: var(--sys-bg-base);
  --input-text-placeholder: var(--sys-fg-subtle);
  --input-text-error: var(--sys-fg-critical);

  --input-checkbox-selection: var(--sys-interactive-base);
  --input-checkbox-disabled: var(--sys-interactive-disabled);

  --input-toggle-frame-on: var(--sys-success-bold);
  --input-toggle-frame-on-disabled: #4eb76c80; /* rgba({--sys-success-bold}, 0.5) */
  --input-toggle-frame-off: var(--sys-neutral-bold);
  --input-toggle-frame-off-disabled: #94879b80; /* rgba({--sys-neutral-bold}, 0.5) */
  --input-toggle-slide-on: var(--sys-bg-surface);
  --input-toggle-slide-on-disabled: var(--sys-bg-surface);
  --input-toggle-slide-off: var(--sys-bg-surface);
  --input-toggle-slide-off-disabled: var(--sys-bg-surface);

  --status-info-bg: var(--sys-info-minimal);
  --status-info-bg-hover: var(--sys-info-subtle);
  --status-info-bg-active: var(--sys-info-moderate);
  --status-info-border: var(--sys-info-muted);
  --status-info-icon: var(--sys-info-strong);
  --status-info-text: var(--sys-info-strong);

  --status-success-bg: var(--sys-success-minimal);
  --status-success-bg-hover: var(--sys-success-subtle);
  --status-success-bg-active: var(--sys-success-moderate);
  --status-success-border: var(--sys-success-muted);
  --status-success-icon: var(--sys-success-strong);
  --status-success-text: var(--sys-success-strong);

  --status-warning-bg: var(--sys-warning-minimal);
  --status-warning-bg-hover: var(--sys-warning-subtle);
  --status-warning-bg-active: var(--sys-warning-moderate);
  --status-warning-border: var(--sys-warning-muted);
  --status-warning-icon: var(--sys-warning-strong);
  --status-warning-text: var(--sys-warning-strong);

  --status-critical-bg: var(--sys-critical-minimal);
  --status-critical-bg-hover: var(--sys-critical-subtle);
  --status-critical-bg-active: var(--sys-critical-moderate);
  --status-critical-border: var(--sys-critical-muted);
  --status-critical-icon: var(--sys-critical-strong);
  --status-critical-text: var(--sys-critical-strong);

  --status-progress-bg: var(--sys-interactive-minimal);
  --status-progress-bg-hover: var(--sys-interactive-subtle);
  --status-progress-bg-active: var(--sys-interactive-moderate);
  --status-progress-border: var(--sys-interactive-muted);
  --status-progress-icon: var(--sys-interactive-strong);
  --status-progress-text: var(--sys-interactive-strong);

  /* -------- Utilities -------- */

  --utilities-overlay: #201b22cc; /* rgba({--sys-bg-contrast}, 0.8) */
  --utilities-overlay-light: #201b2229; /* rgba({--sys-bg-contrast}, 0.16) */
  --utilities-overlay-side: linear-gradient(90deg, #201b2200 0%, #201b2252 100%); /* rgba({--sys-bg-contrast}, 0), rgba({--sys-bg-contrast}, 0.32) */
  --utilities-skeleton: var(--sys-bg-subtle);
  --utilities-skeleton-strong: var(--sys-fg-minimal);

  /* -------- Elevation -------- */

  --elevation-sm: 0px 2px 4px 0px rgba(0, 0, 0, 0.06);
  --elevation-md: 0px 2px 12px 0px rgba(0, 0, 0, 0.06);
  --elevation-lg: 0px 2px 24px 0px rgba(0, 0, 0, 0.08);
  --popover-elevation: 0px 0px 12px 0px rgba(0, 0, 0, 0.16);

  /* -------- Typography -------- */

  --body-md-regular-font-size: 0.875rem; /* 14px */
  --body-md-regular-line-height: 1.25rem; /* 20px */
  --body-md-regular-font-weight: 400;

  --body-md-semibold-font-size: 0.875rem; /* 14px */
  --body-md-semibold-line-height: 1.25rem; /* 20px */
  --body-md-semibold-font-weight: 600;

  --body-lg-regular-font-size: 1rem; /* 16px */
  --body-lg-regular-line-height: 1.5rem; /* 24px */
  --body-lg-regular-font-weight: 400;

  --body-lg-semibold-font-size: 1rem; /* 16px */
  --body-lg-semibold-line-height: 1.5rem; /* 24px */
  --body-lg-semibold-font-weight: 600;

  --code-md-font-size: 0.75rem; /* 12px */
  --code-md-line-height: 1rem; /* 16px */
  --code-md-font-weight: 400;
  --code-md-letter-spacing: -0.15px;

  --heading-h1-font-size: 1.875rem; /* 30px */
  --heading-h1-line-height: 2.5rem; /* 40px */
  --heading-h1-font-weight: 700;

  --heading-h2-font-size: 1.5rem; /* 24px */
  --heading-h2-line-height: 2.25rem; /* 36px */
  --heading-h2-font-weight: 700;

  --heading-h3-font-size: 1.1875rem; /* 19px */
  --heading-h3-line-height: 1.75rem; /* 28px */
  --heading-h3-font-weight: 700;

  --heading-h4-font-size: 1rem; /* 16px */
  --heading-h4-line-height: 1.5rem; /* 24px */
  --heading-h4-font-weight: 700;

  --heading-h5-font-size: 0.875rem; /* 14px */
  --heading-h5-line-height: 1.25rem; /* 20px */
  --heading-h5-font-weight: 700;

  --heading-h6-font-size: 0.75rem; /* 12px */
  --heading-h6-line-height: 1rem; /* 16px */
  --heading-h6-font-weight: 700;
  --heading-h6-letter-spacing: 0.15px;

  --button-sm-font-size: 0.875rem; /* 14px */
  --button-sm-line-height: 1.25rem; /* 20px */
  --button-sm-font-weight: 600;
  --button-sm-padding: .375rem .5rem; /* 6px 8px */

  --button-md-font-size: 0.875rem; /* 14px */
  --button-md-line-height: 1.25rem; /* 20px */
  --button-md-font-weight: 600;
  --button-md-padding: .5rem .75rem; /* 8px 12px */

  --dropdown-lg-item-padding: 0.75rem 1.5rem 0.75rem 1rem; /* 12px 16px */
  --dropdown-lg-item-font-size: var(--body-lg-regular-font-size);
  --dropdown-lg-item-line-height: var(--body-lg-regular-line-height);
  --dropdown-lg-item-font-weight: var(--body-lg-regular-font-weight);
  --dropdown-lg-item-selected-font-weight: var(--body-lg-semibold-font-weight);
  --dropdown-lg-icon-size: 1.5rem;

  --dropdown-md-item-padding: 0.5rem 1.5rem 0.5rem 1rem; /* 8px 16px */
  --dropdown-md-item-font-size: var(--body-md-regular-font-size);
  --dropdown-md-item-line-height: var(--body-md-regular-line-height);
  --dropdown-md-item-font-weight: var(--body-md-regular-font-weight);
  --dropdown-md-item-selected-font-weight: var(--body-md-semibold-font-weight);
  --dropdown-md-icon-size: 1rem;
}
:root {
  --base-font-family: "Figtree", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --code-font-family: "Source Code Pro", "Courier New", Courier, monos
}

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: var(--base-font-family);
}

html, body {
  font-size: 16px;
  font-family: "Figtree", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  color: var(--text-body);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--base-font-family);
  margin: 0;
  padding: 0;
  letter-spacing: 0;
  color: var(--text-primary);
}

h1 {
  font-size: var(--heading-h1-font-size);
  line-height: var(--heading-h1-line-height);
  font-weight: var(--heading-h1-font-weight);
}

h2 {
  font-size: var(--heading-h2-font-size);
  line-height: var(--heading-h2-line-height);
  font-weight: var(--heading-h2-font-weight);
}

h3 {
  font-size: var(--heading-h3-font-size);
  line-height: var(--heading-h3-line-height);
  font-weight: var(--heading-h3-font-weight);
}

h4 {
  font-size: var(--heading-h4-font-size);
  line-height: var(--heading-h4-line-height);
  font-weight: var(--heading-h4-font-weight);
}

h5 {
  font-size: var(--heading-h5-font-size);
  line-height: var(--heading-h5-line-height);
  font-weight: var(--heading-h5-font-weight);
}

h6 {
  font-size: var(--heading-h6-font-size);
  line-height: var(--heading-h6-line-height);
  font-weight: var(--heading-h6-font-weight);
  letter-spacing: var(--heading-h6-letter-spacing);
  color: var(--text-tertiary);
  text-transform: uppercase;
}

code, pre {
  font-family: "Source Code Pro", "Courier New", Courier, monospace !important;
}
:root {
  --header-height: 3rem;
  --navbar-toggle-display: none;
  --navbar-header-width: auto;
  --navbar-padding: 1.5rem;
}
@media (max-width: 768px) {
  :root {
    --navbar-toggle-display: flex;
    --navbar-header-width: 100%;
  }
}

.site-header {
  display: block;
  height: var(--header-height);
}

.site-header-navbar {
  background-color: var(--sys-primary-emphasized);
  height: var(--header-height);
  margin: 0;
  border: 0;
  min-height: auto;
}

.site-header-navbar .navbar-container {
  padding: 0 var(--navbar-padding);
  display: flex;
  align-items: center;
  height: 100%;
}

.portal .site-header-navbar .navbar-container {
  max-width: var(--page-max-width);
  margin: 0 auto;
}

.site-header-navbar .navbar-container .navbar-header {
  float: none;
  display: flex;
  align-items: center;
  width: var(--navbar-header-width);
  min-width: 360px;
}
button.navbar-toggle {
  display: var(--navbar-toggle-display);
  order: 1;
  margin-left: auto;
  /* background: #0f0; */
  width: var(--header-height);
  height: var(--header-height);
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.site-header-navbar .navbar-container .logotype-container {
  float: none !important;
} 
.site-header-navbar .navbar-container .navbar-brand {
  float: none;
  background: url(4fe57bf7a20f7184ce81.svg) no-repeat center left;
  padding: 0 0 0 128px;
  height: 32px;
  display: flex;
  align-items: center;
}
.site-header-navbar .navbar-container .navbar-brand img {
  float: none;
  height: 24px;
  display: none;
}

div#navbar.navbar-collapse.collapse,
.site-header-navbar .navbar-container .navbar-collapse {
  margin-left: auto;
  height: auto !important;
}

ul.top-nav-menu.sm.sm-simple {
  display: flex;;
  padding: 0 .5rem;
  gap: 1rem;
  float: none;
  align-items: center;
}

ul.top-nav-menu.sm.sm-simple > li:nth-child(1n) {
  margin: 0;
  padding: 0;
  float: none;
  height: auto !important
}

ul.top-nav-menu.sm.sm-simple > li:nth-child(1n) > .external-top-nav-link {
  margin: 0;

  display: flex;
  padding: var(--button-sm-padding);
  height: 2rem !important;
  align-items: center;
  justify-content: center;
  gap: .25rem;

  font-size: var(--button-sm-font-size);
  line-height: var(--button-sm-line-height);
  font-weight: var(--button-sm-font-weight);

  border-radius: 0.25rem;
  border: 1px solid rgba(255, 255, 255, 0.50);
  background: rgba(255, 255, 255, 0.10) !important;
  color: var(--text-on-color) !important;
}
ul.top-nav-menu.sm.sm-simple > li:nth-child(1n) > .external-top-nav-link:active,
ul.top-nav-menu.sm.sm-simple > li:nth-child(1n) > .external-top-nav-link:hover {
  background: rgba(0, 0, 0, 0.10) !important;
  color: var(--text-on-color) !important;
}
ul.top-nav-menu.sm.sm-simple > li:nth-child(2) > .external-top-nav-link {
  background: var(--background-primary) !important;
  color: var(--sys-primary-emphasized) !important;
}
ul.top-nav-menu.sm.sm-simple > li:nth-child(2) > .external-top-nav-link:active,
ul.top-nav-menu.sm.sm-simple > li:nth-child(2) > .external-top-nav-link:hover {
  background: var(--sys-interactive-minimal) !important;
  color: var(--sys-primary-emphasized) !important;
}
ul.top-nav-menu.sm.sm-simple > li:nth-child(2) > .external-top-nav-link:focus {
  box-shadow: 0px 0px 0px 2px var(--sys-interactive-highlight);
}

.site-header-navbar {
  .navbar-container {
    .navbar-search {
      width: 100%;
      margin-left: auto;
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.75rem 0.5rem;
      background-color: rgba(255, 255, 255, 0.10);
      height: 2rem;
      border-radius: 0.25rem;
      position: relative;
      margin-right: calc(1rem + 1px);

      input {
        border: 0;
        background: transparent;
        color: var(--text-on-contrast);
        width: 100%;
        font-size: var(--body-md-regular-font-size);
        line-height: var(--body-md-regular-line-height);
        font-weight: var(--body-md-regular-font-weight);
        pointer-events: none;

        &::placeholder {
          color: var(--text-on-contrast);
        }
      }

      &::before {
        content: "";
        display: block;
        background-color: var(--icon-on-contrast);
        mask-image: url(ebf8119aeaacf8373c4d.svg);
        width: 1.5rem;
        height: 1.5rem;
      }

      &::after {
        content: "";
        display: block;
        opacity: .5;
        width: 1px;
        background-color: var(--background-primary);
        height: 1.5rem;
        position: absolute;
        right: calc(-1rem + -2px);
      }
    }

    div#navbar.navbar-collapse {
      padding: 0;
      display: flex !important;
      align-items: center;

      .top-nav-menu {
        order: 1;
      }
      .adv-search {
        display: none;
      }
      .dropdown-container {
        order: 2;
        padding: 0;
        margin: 0;
        position: relative;
        height: auto;
        letter-spacing: 0;
        white-space: nowrap;

        & > span {
          height: var(--header-height);
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 0.5rem;
          padding: 0 0 0 0.25rem;
          text-transform: uppercase;
          font-size: var(--button-sm-font-size);
          line-height: var(--button-sm-line-height);
          font-weight: var(--button-sm-font-weight);
          color: var(--button-primary-fg);

          &::after {
            content: "";
            margin: 0;
            position: static;
            mask-image: url(e1f9867b58cb13939052.svg);
            mask-size: cover;
            width: 1rem;
            height: 1rem;
            transform: none;
            background-color: var(--button-primary-fg);
          }
        }

        ul.dropdown-content {
          position: absolute;
          right: 0;
          top: calc(var(--header-height) + 0.5rem);
          display: none;
          list-style: none;
          margin: 0;
          padding: 0.5rem 0;
          border-radius: 4px;
          border: 1px solid var(--border-minimal);
          background: var(--background-primary);
          box-shadow: var(--elevation-lg);
          transform: none;
          min-width: 0;
          z-index: 9999;

          &.show {
            display: flex !important;
            flex-direction: column;
          }

          li {
            margin: 0;
            padding: 0;

            a {
              display: flex;
              gap: 0.75rem;
              align-items: center;
              padding: var(--dropdown-md-item-padding);
              background: transparent;
              font-size: var(--dropdown-md-item-font-size);
              line-height: var(--dropdown-md-item-line-height);
              font-weight: var(--dropdown-md-item-font-weight);
              color: var(--text-body);
              text-decoration: none;
              white-space: nowrap;
              text-align: left;

              &:hover {
                background: var(--background-hover);
              }
              &:active {
                background: var(--background-active);
                color: var(--text-primary);
              }

              &::after {
                content: "";
                position: static;;
                display: block;
                mask-image: url(bc8c88d53fae183bc5ba.svg);
                mask-size: cover;
                width: var(--dropdown-md-icon-size);
                height: var(--dropdown-md-icon-size);
                transform: none;
                margin-left: auto;
                background-color: transparent;
              }
            }

            &.active-lang {
              a {
                background: var(--background-selected);
                color: var(--text-primary);
                font-weight: var(--dropdown-md-item-selected-font-weight);

                &::after {
                  background-color: var(--icon-interactive);
                }

                &:hover {
                  background: var(--background-selected-hover);

                  &::after {
                    background-color: var(--icon-interactive-hover);
                  }
                }
              }
            }
          }
        }
      }
      .darktoggle {
        order: 3;
        width: var(--header-height);
        height: var(--header-height);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.75rem;
        margin: 0 0 0 0.5rem;

        display: none;

        &::before {
          content: "";
          position: static;
          display: block;
          background-color: var(--button-primary-fg);
          mask-image: url(90de501d6650d8e4556e.svg);
          mask-size: cover;
          mask-repeat: no-repeat;
          width: 1.5rem;
          height: 1.5rem;
          filter: none;
          transform: none;
        }
      }
    }

    .navbar-search + div#navbar.navbar-collapse {
      margin-left: 0;
    }
  }
}

@media (max-width: 992px) {
  .site-header-navbar {
    .navbar-container {
      .navbar-header {
        min-width: auto;
      }
      .navbar-search {
        background: transparent;
        width: 2rem;
        padding: 0;
        justify-content: center;

        input {
          display: none;
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .site-header-navbar {
    .navbar-container {
      .navbar-search {
        margin: 0;
        right: calc(var(--navbar-padding) + var(--header-height));
        width: var(--header-height);
        height: var(--header-height);
        position: absolute;
        /* background: #f00; */

        &::after {
          display: none;
        }
      }

      div#navbar.navbar-collapse.collapse {
        width: 0;
        margin: 0;

        .top-nav-menu {
          display: none;
        }

        .dropdown-container {
          /* background: #00f; */
          position: absolute;
          right: calc(var(--navbar-padding) + var(--header-height) + var(--header-height));
          padding: 0 0.5rem;
        }
      }
    }
  }
}
:root {
  --sidebar-width: 320px;
  --sidebar-mobile-width: 0px;
  --sidebar-display: block;
}
@media (max-width: 768px) {
  :root {
    --sidebar-width: 0px;
    --sidebar-mobile-width: 320px;
    --sidebar-display: none;
  }
}

.site-body .site-sidebar {
  width: calc(var(--sidebar-width) + var(--sidebar-mobile-width));
  float: none;
  height: 100vh !important;
  display: block;
  position: fixed;
  left: calc(-1 * var(--sidebar-mobile-width));
  top: 0;
  transition: left 0.3s ease-in-out;

  &.in {
    left: 0;
  }

  & .site-sidebar-header {
    height: var(--header-height);
    margin: 0;
    padding: 0;
    border: 0;
    display: block;
    visibility: hidden;
  }

  & .nav-site-sidebar {
    background-color: var(--background-primary);
    top: var(--header-height);
    bottom: 0;
    padding: 0;
    width: 100%;
    position: absolute;
    border-right: 1px solid var(--border-regular);
    display: flex;
    flex-direction: column;

    & .sidebar-subpage-header {
      padding: 1.5rem 1.5rem 1rem 1.5rem;
      border-bottom: 1px solid var(--border-regular);
      margin-bottom: 0.75rem;
      display: flex;
      flex-direction: column;
      gap: 0.5rem;

      & .sidebar-heading a {
        display: block;
        padding: 0.325rem 0;
        font-size: 1.1875rem;
        line-height: 1.75rem;
        font-weight: 700;
        color: var(--text-primary);

        &:hover {
          color: var(--text-link-hover);
          text-decoration: underline;
        }
      }

      & .sidebar-back-link {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        padding: 0;
        color: var(--text-link);
        height: 1.5rem;

        &::before {
          content: "";
          display: inline-block;
          width: 1rem;
          height: 1rem;
          mask-image: url(a663c641480a35c5d21a.svg);
          mask-size: contain;
          mask-repeat: no-repeat;
          background-color: var(--icon-interactive);
        }
      }
    }

    & > li {
      border: 0;

      &:not(.opened) {
        display: none;
      }

      &.opened > a {
        display: none;
      }

      /* Main menu items */
      & > ul li,
      & > ul li.opened {
        & > a {
          color: var(--text-primary);
          font-size: var(--body-md-regular-font-size);
          line-height: var(--body-md-regular-line-height);
          font-weight: var(--body-md-regular-font-weight);
          text-decoration: none;
          position: relative;
          transition: none;
          background-color: transparent;

          &:hover {
            background-color: var(--background-secondary);
          }
          &:active {
            background-color: var(--background-tertiary); 
          }

          & .glyphicon {
            width: 1rem;
            height: 1rem;
            padding: 0;
            margin: 0;
            top: 50%;
            right: 1.25rem;
            transform: translateY(-50%);
            position: absolute;

            &::before {
              content: "";
              display: inline-block;
              width: 1rem;
              height: 1rem;
              mask-size: contain;
              mask-repeat: no-repeat;
              background-color: var(--icon-secondary);
              mask-image: url(e1f9867b58cb13939052.svg);
            }
          }

          /* Submenu L1 */
          &[data-topic-level="3"] {
            padding-left: 3.75rem;
          }

          /* Submenu L2 */
          &[data-topic-level="4"] {
            padding-left: 4.5rem;
          }

          /* ✨Magic✨ - Hide chevron icon if there are no submenus */
          &:not(:has(+ ul)) {
            & .glyphicon {
              display: none;
            }
          }
        }

        /* Active menu items */
        &.active > a {
          background-color: var(--background-selected);
          color: var(--text-primary);
          font-weight: 600;
          border-right: 2px solid var(--border-selected);
          
          & .glyphicon {
            right: calc(1.25rem - 2px);
          }

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

          &::before {
            background-color: var(--icon-interactive);
          }
        }
      }

      /* Opened menu items */
      & > ul li.opened {
        & > a {
          & .glyphicon {
            &::before {
              mask-image: url(fea393aa32e2fa56fa06.svg);
            }
          }
        }
      }

      /* Submenu L1 */
      & > ul > li > a,
      & > ul > li.opened > a {
        padding: 0.5rem 3.5rem 0.5rem 1.5rem;
        display: flex;
        gap: 0.5rem;
        align-items: center;

        &::before {
          content: "";
          display: inline-block;
          width: 1rem;
          height: 1rem;
          mask-size: contain;
          mask-repeat: no-repeat;
          background-color: var(--icon-secondary);
        }

        /* Icons for Bitrise as a Platform subpages */
        &[data-permalink="bitrise-platform/mobile-devops-platform.html"]::before {
          mask-image: url(2109ce87199718330a5b.svg);
        }
        &[data-permalink="bitrise-platform/getting-started.html"]::before {
          mask-image: url(814b5e3af1f4816b07ac.svg);
        }
        &[data-permalink="bitrise-platform/accounts.html"]::before {
          mask-image: url(447072c4d3932e4be142.svg);
        }
        &[data-permalink="bitrise-platform/workspaces.html"]::before {
          mask-image: url(202aaeb196e117b85275.svg);
        }
        &[data-permalink="bitrise-platform/projects.html"]::before {
          mask-image: url(19260eb4de5fa46d281b.svg);
        }
        &[data-permalink="bitrise-platform/integrations.html"]::before {
          mask-image: url(c1a004402cdb2bc06e44.svg);
        }
        &[data-permalink="bitrise-platform/infrastructure.html"]::before {
          mask-image: url(5ffc87a4661d7a0adac3.svg);
        }

        /* Icons for Bitrias CI subpages */
        &[data-permalink="bitrise-ci/getting-started.html"]::before {
          mask-image: url(814b5e3af1f4816b07ac.svg);
        }
        &[data-permalink="bitrise-ci/workflows-and-pipelines.html"]::before {
          mask-image: url(94c0489be93be025a849.svg);
        }
        &[data-permalink="bitrise-ci/configure-builds.html"]::before {
          mask-image: url(ecdd9ac6800886a16a95.svg);
        }
        &[data-permalink="bitrise-ci/run-and-analyze-builds.html"]::before {
          mask-image: url(f4597a30b7cd1a371964.svg);
        }
        &[data-permalink="bitrise-ci/dependencies-and-caching.html"]::before {
          mask-image: url(8f0cb465115bd0349ce2.svg);
        }
        &[data-permalink="bitrise-ci/code-signing.html"]::before {
          mask-image: url(b30277f55dd20184333a.svg);
        }
        &[data-permalink="bitrise-ci/testing.html"]::before {
          mask-image: url(abd451004fd1581e9d81.svg);
        }
        &[data-permalink="bitrise-ci/deploying.html"]::before {
          mask-image: url(7211f28b66a65feaee64.svg);
        }
        &[data-permalink="bitrise-ci/insights.html"]::before {
          mask-image: url(767de433deb15c7e6d20.svg);
        }
        &[data-permalink="bitrise-ci/bitrise-cli.html"]::before {
          mask-image: url(6a2ad9680455fa547d28.svg);
        }
        &[data-permalink="bitrise-ci/api.html"]::before {
          mask-image: url(d6ad91028313354306a5.svg);
        }
        &[data-permalink="bitrise-ci/references.html"]::before {
          mask-image: url(1068883874590b8dc1e3.svg);
        }
        &[data-externallink="integrations"]::before {
          mask-image: url(f98a0c956c385f1f8656.svg);
        }
        &[data-externallink="workflow-recipes"]::before {
          mask-image: url(c34071cddace8496decc.svg);
        }

        /* Icons for Bitrias Build Cache subpages */
        &[data-permalink="bitrise-build-cache/getting-started-with-the-build-cache.html"]::before {
          mask-image: url(814b5e3af1f4816b07ac.svg);
        }
        &[data-permalink="--invocations--"]::before {  /* TODO: Update this permalink */
          mask-image: url(abd451004fd1581e9d81.svg);
        }
        &[data-permalink="bitrise-build-cache/build-cache-for-gradle.html"]::before {
          mask-image: url(4eb5f575d7b7322d19a2.svg);
        }
        &[data-permalink="bitrise-build-cache/build-cache-for-bazel.html"]::before {
          mask-image: url(36e5f4ccb98b41e2c3e9.svg);
        }
        &[data-permalink="--xcode--"]::before {  /* TODO: Update this permalink */
          mask-image: url(da639fc2d83c096141c7.svg);
        }
        &[data-permalink="bitrise-build-cache/insights.html"]::before {
          mask-image: url(767de433deb15c7e6d20.svg);
        }
        &[data-permalink="--api--"]::before {  /* TODO: Update this permalink */
          mask-image: url(d6ad91028313354306a5.svg);
        }

        /* Icons for Bitrias Release Management subpages */
        &[data-permalink="release-management/getting-started-with-release-management.html"]::before {
          mask-image: url(814b5e3af1f4816b07ac.svg);
        }
        &[data-permalink="release-management/configuring-connected-apps.html"]::before {
          mask-image: url(861cd5cdb78edaf24bbf.svg);
        }
        &[data-permalink="release-management/installable-artifacts.html"]::before {
          mask-image: url(79a65e4dbd5ae3a8c9ee.svg);
        }
        &[data-permalink="release-management/build-distribution.html"]::before {
          mask-image: url(778fa46c0d7819ff3c72.svg);
        }
        &[data-permalink="release-management/releases.html"]::before {
          mask-image: url(111d6bb6fba0eed36a0b.svg);
        }
        &[data-permalink="release-management/release-management-api.html"]::before {
          mask-image: url(d6ad91028313354306a5.svg);
        }

        /* Icons for Bitrise Insights subpages */
        &[data-permalink="insights/getting-started-with-insights.html"]::before {
          mask-image: url(814b5e3af1f4816b07ac.svg);
        }
        &[data-permalink="insights/available-metrics-in-insights.html"]::before {
          mask-image: url(33bd0a0b6fdbe681d514.svg);
        }
        &[data-permalink="insights/configuring-alerts-in-insights.html"]::before {
          mask-image: url(a11196b7666656992608.svg);
        }
        &[data-permalink="insights/git-insights.html"]::before {
          mask-image: url(de916342c63016b3890d.svg);
        }
        &[data-permalink="insights/insights-tutorials.html"]::before {
          mask-image: url(1068883874590b8dc1e3.svg);
        }

        &:active::before {
          background-color: var(--icon-primary);
        }
      }

      &.sidebar-links {
        margin-top: auto;
        padding: 0.75rem 0;
        border-top: 1px solid var(--border-regular);

        & > ul li > a {
          & .glyphicon::before {
            mask-image: url(4954d0b97395086228db.svg);
          }
        }
      }
    }
  }
}
.site-footer,
.theme2 .site-footer {
  display: block;
  padding: 0;
  z-index: 2;
  position: relative;

  & .inner {
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    flex-direction: column-reverse;
    justify-content: center;
    gap: 1rem;
  }

  & .copyright {
    font-size: var(--body-md-regular-font-size);
    line-height: var(--body-md-regular-line-height);
    color: var(--text-secondary);
    text-align: center;
    width: auto;
    margin: 0;
    display: flex;
    align-items: center;

    float: none;

    &::before {
      content: "";
      display: inline-block;
      width: 1.5rem;
      height: 1.5rem;
      background-color: var(--icon-secondary);
      margin-right: 0.5rem;
      mask-image: url(6e36ec5a62236ec2909c.svg);
      mask-size: cover;
    }
  }


  & ul.footer-links {
    display: flex;
    gap: 0.75rem;
    margin: 0;
    list-style: none;
    padding: 0;

    & li {
      margin: 0;
      padding: 0;
      font-size: var(--body-md-regular-font-size);
      line-height: var(--body-md-regular-line-height);
      font-weight: normal;
      color: var(--text-secondary);

      & a {
        color: inherit;
        text-decoration: none;

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






@media (min-width: 768px) {
  .site-footer,
  .theme2 .site-footer {
    & .inner {
      flex-direction: row;
      justify-content: space-between;
      height: 2.5rem;
    }

    & ul.footer-links {
      margin: 0 0 0 auto;
    }
  }
}
:root {
  --portal-content-max-width: 1200px;
}
@media (min-width: 1200px) {
  :root {
    --portal-content-max-width: 100%;
  }
}

body[data-subpage="portal"] {
  
  & > main {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - var(--header-height));
    background-color: var(--background-secondary);
  }

  & .site-sidebar {
    display: none;
  }
  & .site-content {
    display: none;
  }

  & .site-footer {
    margin-top: auto;
    display: block;
    background: var(--background-primary);

    & .inner {
      max-width: var(--page-max-width);
      margin: 0 auto;
    }
  }

  & .site-header {
    & .dropdown-container,
    & .navbar-toggle {
      display: none;
    }
  }


  & .portal-header {
    padding: 0;
    background: var(--background-primary);
    color: var(--text-body);
    text-align: left;
    height: auto;
  }

  & .portal-header .portal-header-top {
    background-image: linear-gradient(
      to right,
      var(--pal-purple-40) 0%,
      var(--pal-purple-30) 50%,
      var(--pal-purple-20) 100%
    );
    position: relative;
    color: var(--text-on-color);
  }

  & .portal-header .portal-header-top .portal-header-top-inner,
  & .portal-header .portal-header-bottom .portal-header-bottom-inner {
    margin-top: 0;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1.25rem 3rem 1.25rem;
    display: flex;
  }

  & .portal-header .portal-header-left {
    max-width: 600px;
  }
  & .portal-header .portal-header-right {
    width: 100%;
    max-width: 512px;
    position: relative;
    margin-left: auto;
    display: none;
  }
  & .portal-header .portal-header-right img {
    position: absolute;
  }

  & .portal-header .portal-header-top .portal-header-top-inner h1 {
    font-weight: 700;
    font-size: 2.25rem;
    line-height: 3rem;
    color: var(--text-on-color);
    margin: 0;
  }
  & .portal-header .portal-header-top .portal-header-top-inner p {
    max-width: 600px;
    font-size: var(--body-lg-regular-font-size);
    line-height: var(--body-lg-regular-line-height);
    font-weight: var(--body-lg-regular-font-weight);
    margin: 0.25rem 0 1.5rem 0;
    color: var(--border-on-contrast);
  }

  & .portal-header .portal-header-top .portal-header-top-inner .portal-search {
    display: flex;
    background: var(--background-primary);
    height: 2.5rem;
    padding: 0.75rem 0.75rem 0.75rem 0.5rem;
    margin-top: 1.5rem;

    border-radius: 0.25rem;
    border: 1px solid var(--border-ragular);
    box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.10) inset;
    
    align-items: center;
    justify-content: start;
    gap: 0.5rem;
    max-width: 600px;
  }

  & .portal-header .portal-header-top .portal-header-top-inner .portal-search input {
    padding: 0;
    margin: 0;
    border: 0;
    outline: 0;
    font-size: var(--body-md-regular-font-size);
    line-height: var(--body-md-regular-line-height);
    font-weight: var(--body-md-regular-font-weight);
    width: 100%;
    color: var(--input-text-input-value);
    background: transparent;
  }

  & .portal-header .portal-header-top .portal-header-top-inner .portal-search input::placeholder {
    color: var(--input-text-placeholder);
  }

  & .portal-header .portal-header-top .portal-header-top-inner .portal-search::before {
    content: "";
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    background-color: var(--icon-tertiary);
    mask-image: url(ebf8119aeaacf8373c4d.svg);
    mask-size: cover;
    mask-repeat: no-repeat;
  }

  & .portal-header .portal-header-bottom .portal-header-bottom-inner h2 {
    max-width: 600px;
    color: var(--sys-primary-emphasized);
    font-weight: var(--heading-h2-font-weight);
    font-size: var(--heading-h2-font-size);
    line-height: var(--heading-h2-line-height);
    margin: 0;
  }

  & .portal-header .portal-header-bottom .portal-header-bottom-inner p {
    max-width: 600px;
    font-size: var(--body-lg-regular-font-size);
    line-height: var(--body-lg-regular-line-height);
    font-weight: var(--body-lg-regular-font-weight);
    margin: 1rem 0 0.5rem 0;
  }

  & .portal-body {
    max-width: 1200px;
    margin: 0 auto;
  }

  & .portal-body .portal-body-inner {
    padding: 2rem 1.25rem 3rem 1.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
  }

  & .portal-card {
    width: 100%;
    border-radius: 8px;
    background: var(--background-primary);
    box-shadow: var(--elevation-sm);
    border: 1px solid var(--border-minimal);
    padding: 1.25rem 3rem 1.25rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  & .portal-card-header {
    position: relative;
    padding-left: 3.25rem;
  }

  & .portal-card-header h3 {
    position: relative;
  }
  & .portal-card-header h3 a {
    font-size: 1.1875rem;
    font-weight: 700;
    line-height: 1.75rem;
    color: var(--text-primary);
  }
  & .portal-card-header h3 a:hover {
    color: var(--sys-interactive-base);
    text-decoration: underline;
  }

  & .portal-card-header p {
    color: var(--text-secondary);
    font-size: var(--body-md-regular-font-size);
    line-height: var(--body-md-regular-line-height);
    font-weight: var(--body-md-regular-font-weight);
  }

  & .portal-card-header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 2.5rem;
    height: 2.5rem;
    background-color: var(--sys-bg-minimal);
    border-radius: .5rem;
    padding: .5rem;
  }
  & .portal-card-header::after {
    content: "";
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    width: 1.5rem;
    height: 1.5rem;
    background-color: var(--sys-neutral-base);
    mask-size: cover;
  }

  /* Bitrise as a Platform */
  & .portal-card[data-section="bitrise-as-a-platform"] .portal-card-header::before {
    background-color: var(--brand-purple-lightest);
  }
  & .portal-card[data-section="bitrise-as-a-platform"] .portal-card-header::after {
    background-color: var(--sys-interactive-base);
    mask-image: url(0249d6e4d7bf69184c4f.svg);
  }

  /* Bitrise CI */
  & .portal-card[data-section="bitrise-ci"] .portal-card-header::before {
    background-color: var(--brand-orage-light);
  }
  & .portal-card[data-section="bitrise-ci"] .portal-card-header::after {
    background-color: var(--sys-orange-base);
    mask-image: url(7c3550335a718b91f999.svg);
  }

  /* Bitrise Build Cache */
  & .portal-card[data-section="bitrise-build-cache"] .portal-card-header::before {
    background-color: var(--brand-yellow-lightest);
  }
  & .portal-card[data-section="bitrise-build-cache"] .portal-card-header::after {
    background-color: var(--sys-warning-base);
    mask-image: url(09fe54cb787af40104ad.svg);
  }

  /* Bitrise Release Management */
  & .portal-card[data-section="bitrise-release-management"] .portal-card-header::before {
    background-color: var(--brand-blue-lightest);
  }
  & .portal-card[data-section="bitrise-release-management"] .portal-card-header::after {
    background-color: var(--sys-info-base);
    mask-image: url(39088dc818a4d450bedc.svg);
  }

  /* Bitrise Insights */
  & .portal-card[data-section="bitrise-insights"] .portal-card-header::before {
    background-color: var(--brand-green-lightest);
  }
  & .portal-card[data-section="bitrise-insights"] .portal-card-header::after {
    background-color: var(--sys-success-base);
    mask-image: url(d1fd4aca5ed100774780.svg);
  }

  & .portal-card ul.portal-card-links {
    padding: 0 0 1.25rem 0;
    margin: 0 0 0 3.25rem;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  & .portal-card ul.portal-card-links li {
    width: 100%;
    margin: 0;
    padding: 0;
    font-size: var(--body-md-regular-font-size);
    line-height: var(--body-md-regular-line-height);
    font-weight: var(--body-md-regular-font-weight);
  }

  & .portal-card ul.portal-card-links li a {
    color: var(--sys-interactive-base);
    text-decoration: none;
  }
}

@media (min-width: 768px) {
  body[data-subpage="portal"] {
    & .portal-card:nth-child(1),
    & .portal-card:nth-child(2) {
      width: calc((100% - 1.5rem) / 2);

      & ul.portal-card-links li {
        width: calc((100% - 0.5rem) / 2);
      }
    }

    & .portal-card:nth-child(3),
    & .portal-card:nth-child(4),
    & .portal-card:nth-child(5) {
      width: calc((100% - 3rem) / 3);
    }
  }
}

@media (min-width: 900px) {
  body[data-subpage="portal"] .portal-header .portal-header-right {
    display: block;
    width: 100%;
  }
}

@media (min-width: 1200px) {
  body[data-subpage="portal"] .portal-body .portal-body-inner {
    padding-left: 0;
    padding-right: 0;
  }
}
.popover {
  box-shadow: var(--popover-elevation);
  border-radius: 0.5rem;
  background-color: var(--background-primary);
  border: 1px solid var(--border-minimal);
  font-family: var(--base-font-family);
  max-width: 18rem;

  h3.popover-title {
    padding: 0.5rem 1rem;
    font-family: var(--body-sm-semibold-font-family);
    font-size: var(--body-sm-semibold-font-size);
    line-height: var(--body-sm-semibold-line-height);
    font-weight: 600;
    color: var(--text-body);
    border-bottom: 1px solid var(--border-minimal);
  }

  .popover-content {
    padding: 0.75rem 1rem 1rem 1rem;

    p {
      font-size: var(--body-md-regular-font-size);
      line-height: var(--body-md-regular-line-height);
      font-weight: var(--body-md-regular-font-weight);
      color: var(--text-body);
      margin: 0;
    }
  }

  --popover-arrow-size: 1rem;
  --popover-arrow-inner-border-size: calc(var(--popover-arrow-size) / 2);
  --popover-arrow-border-size: calc(var(--popover-arrow-inner-border-size) + 1px);

  & > .arrow,
  & > .arrow:after {
    position:absolute;
    display:block;
    width:0;
    height:0;
    border-color:transparent;
    border-style:solid
  }
  & > .arrow:after {
    content:"";
    border-width: var(--popover-arrow-inner-border-size);
  }
  &.top > .arrow {
    bottom: calc(-1 * var(--popover-arrow-border-size));
    left:50%;
    margin-left: calc(-1 * var(--popover-arrow-border-size));
    border-top-color: var(--border-minimal);
    border-bottom-width:0
  }
  &.top > .arrow:after {
      bottom:1px;
      margin-left: calc(-1 * var(--popover-arrow-inner-border-size));
      content:" ";
      border-top-color: var(--background-primary);
      border-bottom-width:0
  }
  &.right > .arrow {
      top:50%;
      left: calc(-1 * var(--popover-arrow-border-size));
      margin-top: calc(-1 * var(--popover-arrow-border-size));
      border-right-color: var(--border-minimal);
      border-left-width:0
  }
  &.right > .arrow:after {
      bottom: calc(-1 * var(--popover-arrow-inner-border-size));
      left:1px;
      content:" ";
      border-right-color: var(--background-primary);
      border-left-width:0
  }
  &.bottom > .arrow {
      top: calc(-1 * var(--popover-arrow-border-size));
      left:50%;
      margin-left: calc(-1 * var(--popover-arrow-border-size));
      border-top-width:0;
      border-bottom-color: var(--border-minimal);
  }
  &.bottom > .arrow:after {
      top:1px;
      margin-left: calc(-1 * var(--popover-arrow-inner-border-size));
      content:" ";
      border-top-width:0;
      border-bottom-color: var(--background-primary);
  }
  &.left > .arrow {
      top:50%;
      right: calc(-1 * var(--popover-arrow-border-size));
      margin-top: calc(-1 * var(--popover-arrow-border-size));
      border-right-width:0;
      border-left-color: var(--border-minimal);
  }
  &.left > .arrow:after {
      right:1px;
      bottom: calc(-1 * var(--popover-arrow-inner-border-size));
      content:" ";
      border-right-width:0;
      border-left-color: var(--background-primary);
  }
}
:root {
  --hub-intro-image-display: block;
  --hub-index-container-width: calc((100% - 3rem) / 3);
  --hub-index-container-margin-top: 2rem;
  --hub-index-container-padding: 1rem 0;
}
@media (max-width: 768px) {
  :root {
    --hub-intro-image-display: none;
    --hub-index-container-width: 100%;
    --hub-index-container-margin-top: 0;
    --hub-index-container-padding: 0;
  }
}

.site-content,
.fixed-toolbar .site-content {
  &[data-is-hub="true"]:not(.no-overview) {
    #bottom-pager,
    .footer-content,
    .breadcrumb-container {
      display: none;
    }

    main {
      margin-right: var(--content-margin-left);
    }
  
    main article#content-wrapper {
      padding-top: 3rem;

      div.itemizedlist.explore,
      div.intro-container {
        display: none;
      }

      #topic-content > section {
        max-width: 100%;
        padding: 0;
        margin: 0;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        gap: 1.5rem;
        margin-right: 0;

        div.itemizedlist.index-container {
          display: flex;
          flex-direction: column;
          width: var(--hub-index-container-width);
          margin-top: var(--hub-index-container-margin-top);
          padding: var(--hub-index-container-padding);

          h2 {
            padding: 0.75rem 0;
            color: var(--text-secondary);
            font-size: var(--body-md-regular-font-size);
            line-height: var(--body-md-regular-line-height);
            font-weight: 700;
            border-bottom: 1px solid var(--border-minimal);
          }

          ul {
            display: flex;
            flex-direction: column;
            margin: 0;
            padding: 0;
            list-style: none;

            & > li a {
              width: 100%;
              margin: 0;
              padding: 0.75rem 1rem 1rem 1rem;
              display: flex;
              flex-direction: column;
              gap: 0.25rem;
              text-decoration: none;
              cursor: pointer;
              border-bottom: 1px solid var(--border-minimal);

              strong {
                margin: 0 0 0.25rem 0;
                padding: 0;
                background: transparent;
                font-size: 1rem;
                line-height: 1.5rem;
                font-weight: 700;
                color: var(--text-link);
              }

              span.box-para {
                font-size: var(--body-md-regular-font-size);
                line-height: var(--body-md-regular-line-height);
                font-weight: var(--body-md-regular-font-weight);
                color: var(--text-secondary);
              }

              &:hover {
                background: var(--background-secondary);
              }
            }
          }

          ul.itemizedlist.index-container {
            display: none;
          }
        }

        & > .titlepage {
          display: flex;
          gap: 2rem;
          padding-bottom: .5rem;
          width: 100%;

          & > div {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;

            div.title.homepage-title {
              margin: 0;
              padding: 0;
            }

            h1.title.homepage-title {
              margin: 0;
              padding: 0;
              font-size: 1.875rem;
              line-height: 2.5rem;
              font-weight: 700;
            }

            .homepage-description p {
              margin: 0;
              padding: 0;
              font-size: 1rem;
              line-height: 1.5rem;
              color: var(--text-body);
            }

            .homepage-cta {
              padding-top: .5rem;
              display: flex;
              gap: 1rem;

              .bitbutton {
                display: inline-block;
                width: auto;
                margin: 0;
                padding: var(--button-md-padding);
                text-align: center;
                border-radius: 0.25rem;

                font-size: var(--button-md-font-size);
                line-height: var(--button-md-line-height);
                font-weight: var(--button-md-font-weight);

                letter-spacing: 0;
                color: var(--button-primary-fg);
                background-color: var(--button-primary-bg);
                border: 1px solid var(--button-primary-bg);
                text-decoration: none;

                &:hover {
                  background: var(--button-primary-bg-hover);
                }
                &:active {
                  background: var(--pal-purple-10);
                }
                &:focus {
                  box-shadow: 0px 0px 0px 2px var(--sys-interactive-highlight);
                }
              }

              .bitbutton:nth-child(2) {
                color: var(--button-secondary-fg);
                background-color: var(--button-secondary-bg);
                border: var(--button-secondary-border);

                &:hover {
                  border: var(--button-secondary-border-hover);
                  background: var(--button-secondary-bg-hover);
                }
                &:active {
                  border: var(--button-secondary-border-active);
                  background: var(--button-secondary-bg-active);
                }
              }
            }
          }

          .homepage-image {
            margin-left: auto;
            display: var(--hub-intro-image-display);

            img {
              max-width: none;
              height: auto;
              box-shadow: none;
              margin: 0;
            }
          }
        }
      }
    }
  }
}

:root {
  --page-max-width: 1440px;
  --content-max-width: 720px;
  --content-navigation-gap: 3rem;
  --content-navigation-max-width: 400px;
  --content-navigation-container-max-width: auto;
  --content-navigation-margin-right: 0;
  --content-margin-right: calc(var(--page-max-width) - var(--sidebar-width) - var(--content-max-width) - (var(--content-padding) * 2) - var(--content-navigation-gap));
  --content-margin-left: 0;
  --content-padding: 3rem;
  --display-overview: block;
}
@media (min-width: 1550px) {
  :root {
    --content-navigation-container-max-width: var(--content-navigation-max-width);
    --content-navigation-margin-right: calc((100% - var(--content-max-width) - var(--content-navigation-max-width) - var(--sidebar-width) - var(--content-navigation-gap) - var(--content-padding) * 2) / 2);
    --content-margin-left: calc((100% - var(--content-max-width) - var(--sidebar-width) - var(--content-navigation-gap) - var(--content-padding) * 2) / 2);
    --content-margin-right: 0;
  }
}
@media (max-width: 992px) {
  :root {
    --page-max-width: 100%;
    --content-max-width: 100%;
    --content-navigation-gap: 0;
    --display-overview: none;
  }
}
@media (max-width: 768px) {
  :root {
    --content-padding: 1.5rem;
  }
}

.site-body-container {
  padding: 0;

  .site-body-row {
    margin: 0;
    padding: 0;
    display: flex;
  }
}

.site-content,
.fixed-toolbar .site-content {
  padding: 0 0 0 var(--sidebar-width);
  margin: 0;
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--header-height));
  
  &:not(.no-overview) {
    main article#content-wrapper div#topic-content > section,
    main article#content-wrapper div#topic-content > .footer-content,
    #bottom-pager ul.pager {
      margin-right: var(--content-margin-right);
    }
  }

  .header-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    margin-left: 0.5rem;
    transform: translateY(0.25rem);

    i.fa.fa-link {
      display: inline-block;
      width: 100%;
      height: 100%;
    }

    i.fa.fa-link::before {
      content: '';
      display: inline-block;
      width: 100%;
      height: 100%;
      background-color: var(--icon-interactive);
      mask-image: url(1ebbda58c75025d4d85d.svg);
      mask-size: cover;
      mask-position: center;
      mask-repeat: no-repeat;
      position: relative;
      transform: none;
    }

    &:hover i.fa.fa-link::before {
      background-color: var(--icon-interactive-hover);
    }
  }

  h4, h5, h6 {
    .header-link {
      display: none;
    }
  }

  #bottom-pager {
    margin-left: var(--content-margin-left);

    ul.pager {
      padding: 1rem 0 1.5rem 0;
      margin: 0 var(--content-padding) 0 var(--content-padding);
      max-width: var(--content-max-width);
      border-top: 1px solid var(--border-minimal);
      float: none;
      display: flex;
      width: auto;

      li > a {
        padding: var(--button-md-padding);
        background-color: var(--button-tertiary-bg);
        font-size: var(--button-md-font-size);
        line-height: var(--button-md-line-height);
        font-weight: var(--button-md-font-weight);
        color: var(--button-tertiary-fg);
        text-decoration: none;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        border-radius: 0.25rem;
        gap: 0.25rem;
        float: none !important;

        &::before {
          content: '';
          display: inline-block;
          width: 1rem;
          height: 1rem;
          background-color: var(--icon-interactive);
          mask-size: cover;
          mask-repeat: no-repeat;
        }

        &:hover {
          background-color: var(--button-tertiary-bg-hover);
          color: var(--button-tertiary-fg-hover);

          &::before {
            background-color: var(--button-tertiary-fg-hover);
          }
        }
        &:active {
          background-color: var(--button-tertiary-bg-active);
          color: var(--button-tertiary-fg-active);

          &::before {
            background-color: var(--button-tertiary-fg-active);
          }
        }
      }

      li.next {
        margin-left: auto;
        & > a {
          flex-direction: row-reverse;
        }
        & > a::before {
          mask-image: url(1954744dda029f0f98aa.svg);
        }
      }

      li.previous {
        & > a::before {
          mask-image: url(2fb1b4e46618b5fec0c8.svg);
        }
      }
    }
  }

  .toolbar {
    display: none;
  }

  .site-footer {
    background-color: var(--background-secondary);
    float: none;
    width: auto;
    margin-top: auto;
    flex-shrink: 0;
  }

  main {
    position: relative;
    margin-left: var(--content-margin-left);

    aside.section-nav-container {
      max-width: var(--content-navigation-container-max-width);
      min-width: calc(var(--page-max-width) - var(--sidebar-width) - var(--content-max-width) - (var(--content-padding) * 2) - var(--content-navigation-gap));
      width: calc(100% - var(--sidebar-width) - var(--content-max-width) - (var(--content-padding) * 2));
      padding: 0 2rem 0 0;
      margin-right: var(--content-navigation-margin-right);
      right: 0;
      top: 3rem;
      margin-top: calc(var(--header-height) + 1.5rem);
      position: fixed;
      z-index: 1;
      display: var(--display-overview);
      background: var(--background-primary);

      .side-cta {
        display: none;
      }

      &::before {
        content: 'On this page';
        display: block;
        padding-bottom: 0.5rem;
        font-size: var(--heading-h6-font-size);
        line-height: var(--heading-h6-line-height);
        font-weight: var(--heading-h6-font-weight);
        letter-spacing: var(--heading-h6-letter-spacing);
        text-transform: uppercase;
        color: var(--text-primary);
      }

      & > ul > li:first-child {
        display: none;
      }

      & ul {
        margin: 0;
        padding: 0;
        list-style: none;
        border-left: 1px solid var(--border-regular);
        max-width: var(--content-navigation-max-width);
        position: relative;

        & ul {
          border-left: 0;
        }

        & li > a, & li > a:focus {
          opacity: 1;
          padding-top: 0.25rem;
          padding-right: 1rem;
          padding-bottom: 0.25rem;
          padding-left: 1rem;

          font-size: var(--body-md-regular-font-size);
          line-height: var(--body-md-regular-line-height);
          font-weight: var(--body-md-regular-font-weight);
          color: var(--text-body);
          text-decoration: none;

          &:hover {
            color: var(--text-link-hover);
            text-decoration: underline;
          }
        }

        & li.active > a, & li.active > a:focus {
          opacity: 1;
          font-weight: 600;
          color: var(--text-body);

          &:hover {
            color: var(--text-link-hover);
            text-decoration: underline;
          }
        }

        & li.active > a, & li.active > a:focus {
          

          &::before {
            content: '';
            position: absolute;
            left: -1px;
            top: 0;
            border-radius: 0;
            height: 100%;
            width: 2px;
            border-left:  2px solid var(--sys-interactive-base);
          }
        }

        /** ✨ Magic ✨ **/
        & li.active:has(> ul > li.active) > a,
        & li.active:has(> ul > li.active) > a:focus {
          font-weight: 400;
          &::before {
            display: none;
          }
        }

        & > li > ul > li > a {
          padding-left: 2rem;
        }
        & > li > ul > li > ul > li > a {
          padding-left: 3rem;
        }
      }
    }

    article {
      margin: 0;
      padding: 0;
      
      &#search-result-wrapper {
        display: none;
      }

      &#content-wrapper {

        &.topic {
          display: block;
          padding: 1.5rem var(--content-padding) 3rem var(--content-padding);
          width: 100%;
        }
        
        div#topic-content {

          .breadcrumb-container {
            margin: 0;
            padding: 0;

            ul.breadcrumb {
              background: transparent;
              display: flex;
              gap: 0.25rem;
              padding: 0;
              flex-wrap: wrap;

              & > li {
                display: flex;
                gap: 0.25rem;
                align-items: center;
                font-size: var(--body-md-regular-font-size);
                line-height: var(--body-md-regular-line-height);
                font-weight: var(--body-md-regular-font-weight);
                color: var(--text-body);
                white-space: nowrap;
                max-width: 100%;

                &::before {
                  display: none;
                }

                &::after {
                  display: block;
                  content: '';
                  width: 1.5rem;
                  height: 1.5rem;
                  background-color: var(--icon-disabled);
                  mask-image: url(b4e97351659f55913b93.svg);
                  mask-size: cover;
                  mask-repeat: no-repeat;
                }

                &:nth-child(1) {
                  display: none;
                }

                &:last-child {
                  display: none;
                }

                a {
                  overflow: hidden;
                  text-overflow: ellipsis;
                  color: var(--text-link);
                  text-decoration: none;
                  

                  &:hover {
                    color: var(--text-link-hover);
                    text-decoration: underline;
                  }

                  &:not([href]) {
                    color: inherit;

                    &:hover {
                      color: inherit;
                      text-decoration: none;
                    }
                  }
                }
              }
            }
          }

          & section,
          & .informalexample {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            padding: 0;
            padding-top: 1rem;

            & > br {
              display: none;
            }
          }

          & > section,
          & > .footer-content {
            max-width: var(--content-max-width);
          }

          & > .footer-content {
            margin-top: 1rem;
            padding: 1rem 0 0 0;

            .section-toc + .relationship-toc {
              margin-top: 3rem;
            }

            .relationship-toc {
              display: flex;
              flex-direction: column;
              border-top: 1px solid var(--border-minimal);
              padding-top: 1rem; 
              gap: 1rem;

              .relationship-toc-title {
                font-size: var(--heading-h4-font-size);
                line-height: var(--heading-h4-line-height);
                font-weight: var(--heading-h4-font-weight);
                color: var(--text-primary);
                margin: 0;
                padding: 0;
                border: 0;

                &::before {
                  display: none;
                }
              }
            }

            .section-toc {
              display: flex;
              flex-direction: column;
              gap: 1rem;
              padding: 1.5rem;
              border-radius: .5rem;
              border: 1px solid var(--border-minimal);
              background: var(--background-primary);
              box-shadow: var(--elevation-sm);

              .section-toc-title {
                font-size: var(--heading-h6-font-size);
                line-height: var(--heading-h6-line-height);
                font-weight: var(--heading-h6-font-weight);
                letter-spacing: var(--heading-h6-letter-spacing);
                text-transform: uppercase;
                color: var(--text-primary);
                margin: 0;
                padding: 0;
                border: 0;

                &::before {
                  display: none;
                }
              }
            }

            .section-toc,
            .relationship-toc {

              & > ul {
                list-style: none;
                margin: 0;
                padding: 0;
                display: flex !important;
                flex-direction: column;
                gap: 1rem;

                li > a {
                  font-size: var(--body-md-regular-font-size);
                  line-height: var(--body-md-regular-line-height);
                  font-weight: var(--body-md-regular-font-weight);
                  color: var(--text-link);
                  text-decoration: none;
                  padding: 0;

                  &:hover {
                    color: var(--text-link-hover);
                    text-decoration: underline;
                  }
                }
              }
            }
          }

          & > section {
            padding: 1.5rem 0 0 0;

            p {
              margin: 0;
              font-size: var(--body-lg-regular-font-size);
              line-height: var(--body-lg-regular-line-height);
              font-weight: var(--body-lg-regular-font-weight);
              font-family: var(--base-font-family);
            }

            .title {
              margin: 0;
            }

            h1, h2, h3, h4 {
              font-family: var(--base-font-family);
              color: var(--text-primary);
              letter-spacing: 0;
            }

            h1 {
              font-size: var(--heading-h1-font-size);
              line-height: var(--heading-h1-line-height);
              font-weight: var(--heading-h1-font-weight);
              padding-top: 0;
            }

            h2 {
              font-size: var(--heading-h2-font-size);
              line-height: var(--heading-h2-line-height);
              font-weight: var(--heading-h2-font-weight);
            }

            h3 {
              font-size: var(--heading-h3-font-size);
              line-height: var(--heading-h3-line-height);
              font-weight: var(--heading-h3-font-weight);
            }

            h4 {
              font-size: var(--heading-h4-font-size);
              line-height: var(--heading-h4-line-height);
              font-weight: var(--heading-h4-font-weight);
            }

            h5 {
              font-size: var(--heading-h5-font-size);
              line-height: var(--heading-h5-line-height);
              font-weight: var(--heading-h5-font-weight);
            }

            a {
              color: var(--text-link);
              text-decoration: none;

              &:hover {
                color: var(--text-link-hover);
                text-decoration: underline;
              }

              &.glossterm {
                font-weight: var(--body-md-semibold-font-weight) !important;
                color: var(--sys-turquoise-bold) !important;
                font-family: inherit !important;
              }
            }

            code {
              padding: 0.125rem 0.375rem;
              display: inline-flex;
              border-radius: 2px;
              font-size: var(--code-md-font-size);
              line-height: var(--code-md-line-height);
              font-weight: var(--code-md-font-weight);
              letter-spacing: var(--code-md-letter-spacing);
              background-color: var(--background-secondary);
              color: var(--text-body);
            }

            ul, ol {
              display: flex;
              flex-direction: column;
              gap: 0.5rem;
              margin: 0;
              padding: 0 0 0 1.25rem;

              & li {
                margin: 0;
                padding: 0;

                p:first-child {
                  margin-top: 0;
                }

                .warning, .note, .notice, .important, .caution, .tip, .example,
                ul, ol {
                  margin-top: 0.25rem;
                }
              }
            }

            .mediaobject {
              margin: 1rem 0;

              table {
                width: 100% !important;
              }

              img.materialboxed {
                max-width: 100%;
                height: auto;
                box-shadow: var(--elevation-md);
              }
            }

            ul.procedure, ol.procedure {
              margin: 0;
              padding: 0;
              border: 0;
              gap: 0;
              
              & > li.step {
                --procedure-step-margin-left: 0.75rem;
                --procedure-step-padding-left: 1.25rem;

                padding-left: var(--procedure-step-padding-left);
                margin-left: var(--procedure-step-margin-left);
                border-left: 1px solid var(--sys-interactive-moderate);
                padding-bottom: 1rem;
                display: flex;
                flex-direction: column;
                gap: 0.5rem;

                & > p {
                  font-size: var(--body-lg-regular-font-size);
                  line-height: var(--body-lg-regular-line-height);
                  font-weight: var(--body-lg-regular-font-weight);
                }

                &::before {
                  position: absolute;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  flex-shrink: 0;
                  margin: 0;
                  padding: 0;
                  width: 1.5rem;
                  height: 1.5rem;
                  border-radius: 1rem;
                  background-color: var(--sys-interactive-subtle);
                  border: 1px solid var(--sys-interactive-moderate);
                  font-size: 0.75rem;
                  line-height: 1rem;
                  font-weight: 700;
                  color: var(--sys-interactive-strong);
                  transform: translate(calc(-1 * (var(--procedure-step-padding-left) + var(--procedure-step-margin-left))), 0);
                }

                &:last-child {
                  border-left-color: transparent;
                }
              }
            }

            .programlisting {
              position: relative;
              display: block;
              margin: 0.5rem 0;
              min-height: 3.5rem;
              padding: 0.75rem 1.5rem;
              border-radius: 0.25rem;
              border: 0;
              background-color: var(--background-contrast);
              color: var(--text-on-color);
              font-feature-settings: "kern";
              font-size: var(--code-md-font-size);
              line-height: var(--code-md-line-height);
              font-weight: var(--code-md-font-weight);
              letter-spacing: var(--code-md-letter-spacing);
              direction: ltr;
              word-wrap: pre-wrap;
              -webkit-overflow-scrolling: touch;

              code {
                font-family: inherit;
                font-size: inherit;
                line-height: inherit;
                font-weight: inherit;
                letter-spacing: inherit;
                color: inherit;
                background-color: transparent;
                padding: 0;
                border: 0;
              }

              button.code-button {
                position: absolute;
                top: 0.75rem;
                right: 1rem;
                text-indent: -9999px;
                border-radius: 0.25rem;
                background-color: var(--button-secondary-bg);
                border: var(--button-secondary-border);
                color: var(--button-secondary-fg);
                font-family: var(--base-font-family);
                font-size: var(--button-md-font-size);
                line-height: var(--button-md-line-height);
                font-weight: var(--button-md-font-weight);
                padding: 0.5rem;
                width: 2rem;
                height: 2rem;

                &::before {
                  content: '';
                  display: block;
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  transform: translate(-50%, -50%);
                  width: 1rem;
                  height: 1rem;
                  background-color: var(--button-secondary-fg);
                  mask-image: url(18f2fa654452a897fc79.svg);
                  mask-size: cover;
                  mask-repeat: no-repeat;
                }

                &:hover {
                  border: var(--button-secondary-border-hover);
                  background: var(--button-secondary-bg-hover);
                }
                &:active {
                  border: var(--button-secondary-border-active);
                  background: var(--button-secondary-bg-active);
                }
              }

              &.code-block {
                padding-left: 0.25rem;

                .original-code {
                  display: none;
                }
                .code-line {
                  display: block;
                  padding: 0;
                  margin: 0;
                  direction: ltr;
                  white-space: pre-wrap;
                  font-family: inherit;
                  position: relative;
                  display: flex;
                  gap: 1rem;

                  &::before {
                    content: var(--line-number, '');
                    width: calc(var(--max-line-number-length, 0) * 1ch);
                    display: block;
                    text-align: right;
                    color: var(--text-disabled);
                    min-width: 1.25rem;
                  }
                }

                 /* &.single-line {
                  padding-left: 1rem;
                  

                  .code-line::before {
                    display: none;
                  }

                  button.code-button {
                    top: 0.25rem;
                    right: 0.25rem;
                  }
                } */
              }
            }

            .highlight-code .microlight {
              font-family: var(--code-font-family);
              font-size: var(--code-md-font-size);
              line-height: var(--code-md-line-height);
              font-weight: var(--code-md-font-weight);
              letter-spacing: var(--code-md-letter-spacing);
              border: 0;

              code {
                display: inline;
                font-family: var(--code-font-family);
                background: transparent;
                color: inherit;

                & * {
                  font-family: var(--code-font-family);
                }
              }
            }

            .warning, .note, .notice, .important, .caution, .tip, .example:not(.microlight) {
              --gutter-padding-x: 0.5rem;
              --gutter-padding-y: 0.75rem;
              --gutter-icon-width: 1.5rem;
              --gutter-width: calc(var(--gutter-padding-x) + var(--gutter-icon-width) + var(--gutter-padding-x));

              margin: 0.5rem 0;
              overflow: hidden;
              border: 1px solid var(--border-regular);
              background: var(--background-primary);
              box-shadow: var(--elevation-sm);
              position: relative;
              width: 100%;
              letter-spacing: 0;
              border-radius: 0.5rem;
              padding: 0.75rem 1.5rem 0.75rem calc(0.75rem + var(--gutter-width));

              &:has(> h3, > .example-title) {
                padding-bottom: 1rem;
              }

              &::before {
                content: '';
                position: absolute;
                left: 0;
                top: 0;
                width: var(--gutter-width);
                height: 100%;
                background-color: var(--background-secondary);
              }

              &::after {
                content: '';
                position: absolute;
                left: var(--gutter-padding-x);
                top: var(--gutter-padding-y);
                width: var(--gutter-icon-width);
                height: var(--gutter-icon-width);
                background-color: var(--icon-secondary);
                mask-size: cover;
                mask-repeat: no-repeat;
              }

              h3, .example-title {
                font-family: var(--base-font-family);
                margin: 0;
                padding: 0;
                font-size: var(--body-lg-semibold-font-size);
                line-height: var(--body-lg-semibold-line-height);
                font-weight: var(--body-lg-semibold-font-weight);
                color: var(--text-primary);

                .header-link {
                  display: none;
                }
              }

              p {
                margin: 0.5rem 0 0 0;
                font-size: var(--body-md-regular-font-size);
                line-height: var(--body-md-regular-line-height);
                font-weight: var(--body-md-regular-font-weight);
                color: var(--text-body);
                padding: 0;
              }

              ul, ol {
                margin-top: 0.5rem;
              }

              .programlisting {
                margin: 0.5rem 0;
              }

              .example-contents {
                display: flex;
                flex-direction: column;
                }
            }
            
            .warning {
              border-color: var(--status-critical-border);
              &::before {
                background-color: var(--status-critical-bg);
              }
              &::after {
                mask-image: url(ae435f328afeef995165.svg);
                background-color: var(--status-critical-icon);
              }
            }
            .note, .note.notice {
              border-color: var(--status-info-border);
              &::before {
                background-color: var(--status-info-bg);
              }
              &::after { 
                mask-image: url(b3e440cc664b9cbd15f6.svg);
                background-color: var(--status-info-icon);
              }
            }
            .important {
              border-color: var(--status-success-border);
              &::before {
                background-color: var(--status-success-bg);
              }
              &::after {
                mask-image: url(ae435f328afeef995165.svg);
                background-color: var(--status-success-icon);
              }
            }
            .caution {
              border-color: var(--status-warning-border);
              &::before {
                background-color: var(--status-warning-bg);
              }
              &::after {
                mask-image: url(6de1687b8d64dcaf4b28.svg);
                background-color: var(--status-warning-icon);
              }
            }
            .tip {
              border-color: var(--status-progress-border);
              &::before {
                background-color: var(--status-progress-bg);
              }
              &::after {
                mask-image: url(1cf0a15392171f4893d9.svg);
                background-color: var(--status-progress-icon);
              }
            }
            .example:not(.microlight) {
              --gutter-padding-x: 0.25rem;
              --gutter-icon-width: 0rem;
              background-color: var(--background-secondary);
              &::before {
                background-color: var(--background-active);
              }
              &::after {
                display: none;
              }
            }

            .tab-container {
              margin: 1rem 0;
              padding: 0.5rem 0.75rem 0 0.75rem;
              display: flex;
              border-bottom: 1px solid var(--border-regular);
              background: var(--background-secondary);

              & .tabs {
                padding: 0.75rem 1rem;
                display: flex;
                gap: 1rem;
                align-items: center;
                justify-content: center;
                border-radius: 0.25rem 0.25rem 0 0;
                border-bottom: 1px solid var(--border-regular);
                background: var(--background-tertiary);
                font-size: var(--body-lg-semibold-font-size);
                line-height: var(--body-lg-semibold-line-height);
                font-weight: var(--body-lg-semibold-font-weight);
                border-top: 2px solid transparent;
                color: var(--text-secondary);
                margin-bottom: -1px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;

                &.is-active {
                  color: var(--text-link);
                  font-size: var(--heading-h4-font-size);
                  line-height: var(--heading-h4-line-height);
                  font-weight: var(--heading-h4-font-weight);
                  border-top-color: var(--border-selected);
                  border-bottom: 0;
                  background: var(--background-primary);
                }
              }
            }

            .table.table-responsive {
              width: 100%;
              max-width: 100%;
              margin: 0.5rem 0;

              .table-title {
                font-size: var(--body-md-semibold-font-size);
                line-height: var(--body-md-semibold-line-height);
                font-weight: var(--body-md-semibold-font-weight);
                color: var(--text-body);
                margin-bottom: 0.5rem;

                .header-link {
                  width: 1rem;
                  height: 1rem;
                  margin: 0;

                  i.fa.fa-link::before {
                    mask-image: url(497a7bdd4645cab45aae.svg);
                  }
                }

                &:hover .header-link {
                  opacity: 1
                }
              }

              .table.table-responsive-contents {
                width: 100%;
                max-width: 100%;
                overflow: auto;

                &:has(table.table-bordered) {
                  border-radius: 0.25rem;
                  border: 1px solid var(--border-minimal);
                }

                table.table {
                  margin: 0;
                  width: 100%;
                  max-width: 100%;
                  border: 0;
                  border-collapse: collapse;
                  border-spacing: 0;
                  border-radius: 0.25rem;
                  
                  & > tbody,
                  & > tfoot,
                  & > thead {
                    & > tr {
                      td, th {
                        padding: 0.5rem;
                        vertical-align: top;

                        p {
                          margin: 0;
                          font-size: var(--body-md-regular-font-size);
                          line-height: var(--body-md-regular-line-height);
                          font-weight: var(--body-md-regular-font-weight);
                          color: var(--text-body);

                          a {
                            font-weight: var(--body-md-regular-font-weight);
                          }
                        }
                      }
                    }
                  }

                  & > thead {
                    background-color: transparent;
                    &  > tr > th {
                      background-color: var(--background-secondary);
                      p {
                        font-size: var(--heading-h5-font-size);
                        line-height: var(--heading-h5-line-height);
                        font-weight: var(--heading-h5-font-weight);
                        color: var(--text-primary);
                        text-align: left;
                      }
                    }
                  }

                  &.table-bordered {
                    border: 0;

                    & > tbody,
                    & > tfoot,
                    & > thead {
                      & > tr {
                        td, th {
                          border-right: 1px solid var(--border-minimal);
                          border-bottom: 0;
                          border-top: 1px solid var(--border-minimal);
                          border-left: 0;
                        }
                        td:last-child,
                        th:last-child {
                          border-right: 0;
                        }
                      }
                    }

                    & > tbody + tbody {
                      border: 0;
                    }

                    & > caption + thead > tr:first-child,
                    & > colgroup + thead > tr:first-child,
                    & > tbody:first-child > tr:first-child,
                    & > thead:first-child > tr:first-child {
                      td, th {
                        border-top: 0;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}


.grecaptcha-badge {
  z-index: 1000;
  bottom: 48px !important;
}