@charset "UTF-8";
.action{
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border-width: 0px;
  background-color: transparent;
  padding: 0px;
  text-align: left;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-weight: inherit;
}

/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */
/**
 * Do not edit directly
 * Generated on Fri, 02 Feb 2024 21:05:58 GMT
 */
:root {
  --token-color-palette-blue-500: #1c345f;
  --token-color-palette-blue-400: #0046d1;
  --token-color-palette-blue-300: #0c56e9;
  --token-color-palette-blue-200: #1060ff;
  --token-color-palette-blue-100: #cce3fe;
  --token-color-palette-blue-50: #f2f8ff;
  --token-color-palette-purple-500: #42215b;
  --token-color-palette-purple-400: #7b00db;
  --token-color-palette-purple-300: #911ced;
  --token-color-palette-purple-200: #a737ff;
  --token-color-palette-purple-100: #ead2fe;
  --token-color-palette-purple-50: #f9f2ff;
  --token-color-palette-green-500: #054220;
  --token-color-palette-green-400: #006619;
  --token-color-palette-green-300: #00781e;
  --token-color-palette-green-200: #008a22;
  --token-color-palette-green-100: #cceeda;
  --token-color-palette-green-50: #f2fbf6;
  --token-color-palette-amber-500: #542800;
  --token-color-palette-amber-400: #803d00;
  --token-color-palette-amber-300: #9e4b00;
  --token-color-palette-amber-200: #bb5a00;
  --token-color-palette-amber-100: #fbeabf;
  --token-color-palette-amber-50: #fff9e8;
  --token-color-palette-red-500: #51130a;
  --token-color-palette-red-400: #940004;
  --token-color-palette-red-300: #c00005;
  --token-color-palette-red-200: #e52228;
  --token-color-palette-red-100: #fbd4d4;
  --token-color-palette-red-50: #fff5f5;
  --token-color-palette-neutral-700: #0c0c0e;
  --token-color-palette-neutral-600: #3b3d45;
  --token-color-palette-neutral-500: #656a76;
  --token-color-palette-neutral-400: #8c909c;
  --token-color-palette-neutral-300: #c2c5cb;
  --token-color-palette-neutral-200: #dedfe3;
  --token-color-palette-neutral-100: #f1f2f3;
  --token-color-palette-neutral-50: #fafafa;
  --token-color-palette-neutral-0: #ffffff;
  --token-color-palette-alpha-300: #3b3d4566;
  --token-color-palette-alpha-200: #656a7633;
  --token-color-palette-alpha-100: #656a761a;
  --token-color-border-primary: #656a7633;
  --token-color-border-faint: #656a761a;
  --token-color-border-strong: #3b3d4566;
  --token-color-border-action: #cce3fe;
  --token-color-border-highlight: #ead2fe;
  --token-color-border-success: #cceeda;
  --token-color-border-warning: #fbeabf;
  --token-color-border-critical: #fbd4d4;
  --token-color-focus-action-internal: #0c56e9;
  --token-color-focus-action-external: #5990ff; /* this is a special color used only for the focus style, to pass color contrast for a11y purpose */
  --token-color-focus-critical-internal: #c00005;
  --token-color-focus-critical-external: #dd7578; /* this is a special color used only for the focus style, to pass color contrast for a11y purpose */
  --token-color-foreground-strong: #0c0c0e;
  --token-color-foreground-primary: #3b3d45;
  --token-color-foreground-faint: #656a76;
  --token-color-foreground-high-contrast: #ffffff;
  --token-color-foreground-disabled: #8c909c;
  --token-color-foreground-action: #1060ff;
  --token-color-foreground-action-hover: #0c56e9;
  --token-color-foreground-action-active: #0046d1;
  --token-color-foreground-highlight: #a737ff;
  --token-color-foreground-highlight-on-surface: #911ced;
  --token-color-foreground-highlight-high-contrast: #42215b;
  --token-color-foreground-success: #008a22;
  --token-color-foreground-success-on-surface: #00781e;
  --token-color-foreground-success-high-contrast: #054220;
  --token-color-foreground-warning: #bb5a00;
  --token-color-foreground-warning-on-surface: #9e4b00;
  --token-color-foreground-warning-high-contrast: #542800;
  --token-color-foreground-critical: #e52228;
  --token-color-foreground-critical-on-surface: #c00005;
  --token-color-foreground-critical-high-contrast: #51130a;
  --token-color-page-primary: #ffffff;
  --token-color-page-faint: #fafafa;
  --token-color-surface-primary: #ffffff;
  --token-color-surface-faint: #fafafa;
  --token-color-surface-strong: #f1f2f3;
  --token-color-surface-interactive: #ffffff;
  --token-color-surface-interactive-hover: #f1f2f3;
  --token-color-surface-interactive-active: #dedfe3;
  --token-color-surface-interactive-disabled: #fafafa;
  --token-color-surface-action: #f2f8ff;
  --token-color-surface-highlight: #f9f2ff;
  --token-color-surface-success: #f2fbf6;
  --token-color-surface-warning: #fff9e8;
  --token-color-surface-critical: #fff5f5;
  --token-color-hashicorp-brand: #000000;
  --token-color-boundary-brand: #f24c53;
  --token-color-boundary-foreground: #cf2d32;
  --token-color-boundary-surface: #ffecec;
  --token-color-boundary-border: #fbd7d8;
  --token-color-boundary-gradient-primary-start: #f97076;
  --token-color-boundary-gradient-primary-stop: #db363b;
  --token-color-boundary-gradient-faint-start: #fffafa; /* this is the 'boundary-50' value at 25% opacity on white */
  --token-color-boundary-gradient-faint-stop: #ffecec;
  --token-color-consul-brand: #e03875;
  --token-color-consul-foreground: #d01c5b;
  --token-color-consul-surface: #ffe9f1;
  --token-color-consul-border: #ffcede;
  --token-color-consul-gradient-primary-start: #ff99be;
  --token-color-consul-gradient-primary-stop: #da306e;
  --token-color-consul-gradient-faint-start: #fff9fb; /* this is the 'consul-50' value at 25% opacity on white */
  --token-color-consul-gradient-faint-stop: #ffe9f1;
  --token-color-hcp-brand: #000000;
  --token-color-nomad-brand: #06d092;
  --token-color-nomad-foreground: #008661;
  --token-color-nomad-surface: #d3fdeb;
  --token-color-nomad-border: #bff3dd;
  --token-color-nomad-gradient-primary-start: #bff3dd;
  --token-color-nomad-gradient-primary-stop: #60dea9;
  --token-color-nomad-gradient-faint-start: #f3fff9; /* this is the 'nomad-50' value at 25% opacity on white */
  --token-color-nomad-gradient-faint-stop: #d3fdeb;
  --token-color-packer-brand: #02a8ef;
  --token-color-packer-foreground: #007eb4;
  --token-color-packer-surface: #d4f2ff;
  --token-color-packer-border: #b4e4ff;
  --token-color-packer-gradient-primary-start: #b4e4ff;
  --token-color-packer-gradient-primary-stop: #63d0ff;
  --token-color-packer-gradient-faint-start: #f3fcff; /* this is the 'packer-50' value at 25% opacity on white */
  --token-color-packer-gradient-faint-stop: #d4f2ff;
  --token-color-terraform-brand: #7b42bc;
  --token-color-terraform-brand-on-dark: #a067da; /* this is an alternative brand color meant to be used on dark backgrounds */
  --token-color-terraform-foreground: #773cb4;
  --token-color-terraform-surface: #f4ecff;
  --token-color-terraform-border: #ebdbfc;
  --token-color-terraform-gradient-primary-start: #bb8deb;
  --token-color-terraform-gradient-primary-stop: #844fba;
  --token-color-terraform-gradient-faint-start: #fcfaff; /* this is the 'terraform-50' value at 25% opacity on white */
  --token-color-terraform-gradient-faint-stop: #f4ecff;
  --token-color-vagrant-brand: #1868f2;
  --token-color-vagrant-foreground: #1c61d8;
  --token-color-vagrant-surface: #d6ebff;
  --token-color-vagrant-border: #c7dbfc;
  --token-color-vagrant-gradient-primary-start: #c7dbfc;
  --token-color-vagrant-gradient-primary-stop: #7dadff;
  --token-color-vagrant-gradient-faint-start: #f4faff; /* this is the 'vagrant-50' value at 25% opacity on white */
  --token-color-vagrant-gradient-faint-stop: #d6ebff;
  --token-color-vault-radar-brand: #ffcf25;
  --token-color-vault-radar-brand-alt: #000000; /* this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault radar would not work */
  --token-color-vault-radar-foreground: #9a6f00;
  --token-color-vault-radar-surface: #fff9cf;
  --token-color-vault-radar-border: #feec7b;
  --token-color-vault-radar-gradient-primary-start: #feec7b;
  --token-color-vault-radar-gradient-primary-stop: #ffe543;
  --token-color-vault-radar-gradient-faint-start: #fffdf2; /* this is the 'vault-radar-50' value at 25% opacity on white */
  --token-color-vault-radar-gradient-faint-stop: #fff9cf;
  --token-color-vault-secrets-brand: #ffcf25;
  --token-color-vault-secrets-brand-alt: #000000; /* this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Secrets would not work */
  --token-color-vault-secrets-foreground: #9a6f00;
  --token-color-vault-secrets-surface: #fff9cf;
  --token-color-vault-secrets-border: #feec7b;
  --token-color-vault-secrets-gradient-primary-start: #feec7b;
  --token-color-vault-secrets-gradient-primary-stop: #ffe543;
  --token-color-vault-secrets-gradient-faint-start: #fffdf2; /* this is the 'vault-secrets-50' value at 25% opacity on white */
  --token-color-vault-secrets-gradient-faint-stop: #fff9cf;
  --token-color-vault-brand: #ffcf25;
  --token-color-vault-brand-alt: #000000; /* this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault would not work */
  --token-color-vault-foreground: #9a6f00;
  --token-color-vault-surface: #fff9cf;
  --token-color-vault-border: #feec7b;
  --token-color-vault-gradient-primary-start: #feec7b;
  --token-color-vault-gradient-primary-stop: #ffe543;
  --token-color-vault-gradient-faint-start: #fffdf2; /* this is the 'vault-50' value at 25% opacity on white */
  --token-color-vault-gradient-faint-stop: #fff9cf;
  --token-color-waypoint-brand: #14c6cb;
  --token-color-waypoint-foreground: #008196;
  --token-color-waypoint-surface: #e0fcff;
  --token-color-waypoint-border: #cbf1f3;
  --token-color-waypoint-gradient-primary-start: #cbf1f3;
  --token-color-waypoint-gradient-primary-stop: #62d4dc;
  --token-color-waypoint-gradient-faint-start: #f6feff; /* this is the 'waypoint-50' value at 25% opacity on white */
  --token-color-waypoint-gradient-faint-stop: #e0fcff;
  --token-elevation-inset-box-shadow: inset 0px 1px 2px 1px #656a761a;
  --token-elevation-low-box-shadow: 0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d;
  --token-elevation-mid-box-shadow: 0px 2px 3px 0px #656a761a, 0px 8px 16px -10px #656a7633;
  --token-elevation-high-box-shadow: 0px 2px 3px 0px #656a7626, 0px 16px 16px -10px #656a7633;
  --token-elevation-higher-box-shadow: 0px 2px 3px 0px #656a761a, 0px 12px 28px 0px #656a7640;
  --token-elevation-overlay-box-shadow: 0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559;
  --token-surface-inset-box-shadow: inset 0 0 0 1px #656a764d, inset 0px 1px 2px 1px #656a761a;
  --token-surface-base-box-shadow: 0 0 0 1px #656a7633;
  --token-surface-low-box-shadow: 0 0 0 1px #656a7626, 0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d;
  --token-surface-mid-box-shadow: 0 0 0 1px #656a7626, 0px 2px 3px 0px #656a761a, 0px 8px 16px -10px #656a7633;
  --token-surface-high-box-shadow: 0 0 0 1px #656a7640, 0px 2px 3px 0px #656a7626, 0px 16px 16px -10px #656a7633;
  --token-surface-higher-box-shadow: 0 0 0 1px #656a7633, 0px 2px 3px 0px #656a761a, 0px 12px 28px 0px #656a7640;
  --token-surface-overlay-box-shadow: 0 0 0 1px #3b3d4540, 0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559;
  --token-focus-ring-action-box-shadow: inset 0 0 0 1px #0c56e9, 0 0 0 3px #5990ff;
  --token-focus-ring-critical-box-shadow: inset 0 0 0 1px #c00005, 0 0 0 3px #dd7578;
  --token-form-label-color: #0c0c0e;
  --token-form-legend-color: #0c0c0e;
  --token-form-helper-text-color: #656a76;
  --token-form-indicator-optional-color: #656a76;
  --token-form-error-color: #c00005;
  --token-form-error-icon-size: 14px;
  --token-form-checkbox-size: 16px;
  --token-form-checkbox-border-radius: 3px;
  --token-form-checkbox-border-width: 1px;
  --token-form-checkbox-background-image-size: 12px;
  --token-form-checkbox-background-image-data-url: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e"); /* notice: the 'tick' color is hardcoded here! */
  --token-form-checkbox-background-image-data-url-indeterminate: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%23FFF'/%3e%3c/svg%3e"); /* notice: the 'dash' color is hardcoded here! */
  --token-form-checkbox-background-image-data-url-disabled: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e"); /* notice: the 'tick' color is hardcoded here! */
  --token-form-checkbox-background-image-data-url-indeterminate-disabled: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%238C909C'/%3e%3c/svg%3e"); /* notice: the 'dash' color is hardcoded here! */
  --token-form-control-base-foreground-value-color: #0c0c0e;
  --token-form-control-base-foreground-placeholder-color: #656a76;
  --token-form-control-base-surface-color-default: #ffffff;
  --token-form-control-base-surface-color-hover: #f1f2f3;
  --token-form-control-base-border-color-default: #8c909c;
  --token-form-control-base-border-color-hover: #656a76;
  --token-form-control-checked-foreground-color: #ffffff;
  --token-form-control-checked-surface-color-default: #1060ff;
  --token-form-control-checked-surface-color-hover: #0c56e9;
  --token-form-control-checked-border-color-default: #0c56e9;
  --token-form-control-checked-border-color-hover: #0046d1;
  --token-form-control-invalid-border-color-default: #c00005;
  --token-form-control-invalid-border-color-hover: #940004;
  --token-form-control-readonly-foreground-color: #3b3d45;
  --token-form-control-readonly-surface-color: #f1f2f3;
  --token-form-control-readonly-border-color: #656a761a;
  --token-form-control-disabled-foreground-color: #8c909c;
  --token-form-control-disabled-surface-color: #fafafa;
  --token-form-control-disabled-border-color: #656a7633;
  --token-form-control-padding: 7px; /* Notice: we have to take in account the border, so it's 1px less than in Figma. */
  --token-form-control-border-radius: 5px;
  --token-form-control-border-width: 1px;
  --token-form-radio-size: 16px;
  --token-form-radio-border-width: 1px;
  --token-form-radio-background-image-size: 12px;
  --token-form-radio-background-image-data-url: url("data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%23ffffff'/%3e%3c/svg%3e"); /* notice: the 'dot' color is hardcoded here! */
  --token-form-radio-background-image-data-url-disabled: url("data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%238C909C'/%3e%3c/svg%3e"); /* notice: the 'dot' color is hardcoded here! */
  --token-form-radiocard-group-gap: 16px;
  --token-form-radiocard-border-width: 1px;
  --token-form-radiocard-border-radius: 6px;
  --token-form-radiocard-content-padding: 24px;
  --token-form-radiocard-control-padding: 8px;
  --token-form-radiocard-transition-duration: 0.2s;
  --token-form-select-background-image-size: 16px;
  --token-form-select-background-image-position-right-x: 7px;
  --token-form-select-background-image-position-top-y: 9px;
  --token-form-select-background-image-data-url: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%23656A76'/%3E%3C/svg%3E"); /* notice: the 'caret' color is hardcoded here! */
  --token-form-select-background-image-data-url-disabled: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%238C909C'/%3E%3C/svg%3E"); /* notice: the 'caret' color is hardcoded here! */
  --token-form-text-input-background-image-size: 16px;
  --token-form-text-input-background-image-position-x: 7px;
  --token-form-text-input-background-image-data-url-date: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11.5.75a.75.75 0 00-1.5 0V1H6V.75a.75.75 0 00-1.5 0V1H3.25A2.25 2.25 0 001 3.25v9.5A2.25 2.25 0 003.25 15h9.5A2.25 2.25 0 0015 12.75v-9.5A2.25 2.25 0 0012.75 1H11.5V.75zm-7 2.5V2.5H3.25a.75.75 0 00-.75.75V5h11V3.25a.75.75 0 00-.75-.75H11.5v.75a.75.75 0 01-1.5 0V2.5H6v.75a.75.75 0 01-1.5 0zm9 3.25h-11v6.25c0 .414.336.75.75.75h9.5a.75.75 0 00.75-.75V6.5z' fill-rule='evenodd' clip-rule='evenodd' fill='%233B3D45'/%3e%3c/svg%3e"); /* notice: the icon color is hardcoded here! */
  --token-form-text-input-background-image-data-url-time: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%233B3D45'%3e%3cpath d='M8.5 3.75a.75.75 0 00-1.5 0V8c0 .284.16.544.415.67l2.5 1.25a.75.75 0 10.67-1.34L8.5 7.535V3.75z'/%3e%3cpath d='M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e"); /* notice: the icon color is hardcoded here! */
  --token-form-text-input-background-image-data-url-search: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%23656A76'%3e%3cpath d='M7.25 2a5.25 5.25 0 103.144 9.455l2.326 2.325a.75.75 0 101.06-1.06l-2.325-2.326A5.25 5.25 0 007.25 2zM3.5 7.25a3.75 3.75 0 117.5 0 3.75 3.75 0 01-7.5 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e"); /* notice: the icon color is hardcoded here! */
  --token-form-text-input-background-image-data-url-search-cancel: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.78 4.28a.75.75 0 00-1.06-1.06L8 6.94 4.28 3.22a.75.75 0 00-1.06 1.06L6.94 8l-3.72 3.72a.75.75 0 101.06 1.06L8 9.06l3.72 3.72a.75.75 0 101.06-1.06L9.06 8l3.72-3.72z'/%3e%3c/svg%3e"); /* notice: the icon color is hardcoded here! */
  --token-form-text-input-background-image-data-url-search-loading: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' %3e%3cg fill='%23656A76' fill-rule='evenodd' clip-rule='evenodd'%3e%3canimateTransform attributeName='transform' type='rotate' dur='0.9s' from='0 8 8' to='360 8 8' repeatCount='indefinite'/%3e%3cpath d='M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8z' opacity='.2'/%3e%3cpath d='M7.25.75A.75.75 0 018 0a8 8 0 018 8 .75.75 0 01-1.5 0A6.5 6.5 0 008 1.5a.75.75 0 01-.75-.75z'/%3e%3c/g%3e%3c/svg%3e"); /* notice: the icon color and animation are hardcoded here! */
  --token-form-toggle-width: 32px;
  --token-form-toggle-height: 16px;
  --token-form-toggle-base-surface-color-default: #f1f2f3; /* the toggle has a different base surface color, compared to the other controls */
  --token-form-toggle-border-radius: 3px;
  --token-form-toggle-border-width: 1px;
  --token-form-toggle-background-image-size: 12px;
  --token-form-toggle-background-image-position-x: 2px;
  --token-form-toggle-background-image-data-url: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e"); /* notice: the 'tick' color is hardcoded here! */
  --token-form-toggle-background-image-data-url-disabled: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e"); /* notice: the 'tick' color is hardcoded here! */
  --token-form-toggle-transition-duration: 0.2s;
  --token-form-toggle-transition-timing-function: cubic-bezier(0.68, -0.2, 0.265, 1.15);
  --token-form-toggle-thumb-size: 16px;
  --token-pagination-nav-control-height: 36px;
  --token-pagination-nav-control-padding-horizontal: 12px;
  --token-pagination-nav-control-focus-inset: 4px;
  --token-pagination-nav-control-icon-spacing: 6px;
  --token-pagination-nav-indicator-height: 2px;
  --token-pagination-nav-indicator-spacing: 6px;
  --token-pagination-child-spacing-vertical: 8px;
  --token-pagination-child-spacing-horizontal: 20px;
  --token-side-nav-wrapper-border-width: 1px;
  --token-side-nav-wrapper-border-color: #656a76;
  --token-side-nav-wrapper-padding-horizontal: 16px;
  --token-side-nav-wrapper-padding-vertical: 16px;
  --token-side-nav-wrapper-padding-horizontal-minimized: 8px;
  --token-side-nav-wrapper-padding-vertical-minimized: 22px;
  --token-side-nav-toggle-button-border-radius: 5px;
  --token-side-nav-header-home-link-padding: 4px;
  --token-side-nav-header-home-link-logo-size: 48px;
  --token-side-nav-header-home-link-logo-size-minimized: 32px;
  --token-side-nav-header-actions-spacing: 8px;
  --token-side-nav-body-list-margin-vertical: 24px;
  --token-side-nav-body-list-item-height: 36px;
  --token-side-nav-body-list-item-padding-horizontal: 8px;
  --token-side-nav-body-list-item-padding-vertical: 4px;
  --token-side-nav-body-list-item-spacing-vertical: 2px;
  --token-side-nav-body-list-item-content-spacing-horizontal: 8px;
  --token-side-nav-body-list-item-border-radius: 5px;
  --token-side-nav-color-foreground-primary: #dedfe3;
  --token-side-nav-color-foreground-strong: #fff;
  --token-side-nav-color-foreground-faint: #8c909c;
  --token-side-nav-color-surface-primary: #0c0c0e;
  --token-side-nav-color-surface-interactive-hover: #3b3d45;
  --token-side-nav-color-surface-interactive-active: #656a76;
  --token-tabs-tab-height: 36px;
  --token-tabs-tab-padding-horizontal: 12px;
  --token-tabs-tab-padding-vertical: 0px;
  --token-tabs-tab-border-radius: 5px;
  --token-tabs-tab-focus-inset: 6px;
  --token-tabs-tab-gutter: 6px;
  --token-tabs-indicator-height: 3px;
  --token-tabs-indicator-transition-function: cubic-bezier(0.5, 1, 0.89, 1);
  --token-tabs-indicator-transition-duration: 0.6s;
  --token-tabs-divider-height: 1px;
  --token-tooltip-border-radius: 5px;
  --token-tooltip-color-foreground-primary: var(--token-color-foreground-high-contrast);
  --token-tooltip-color-surface-primary: var(--token-color-palette-neutral-700);
  --token-tooltip-focus-offset: -2px;
  --token-tooltip-max-width: 280px;
  --token-tooltip-padding-horizontal: 12px;
  --token-tooltip-padding-vertical: 8px;
  --token-tooltip-transition-function: cubic-bezier(0.54, 1.5, 0.38, 1.11);
  --token-typography-font-stack-display: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  --token-typography-font-stack-text: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  --token-typography-font-stack-code: ui-monospace, Menlo, Consolas, monospace;
  --token-typography-font-weight-regular: 400;
  --token-typography-font-weight-medium: 500;
  --token-typography-font-weight-semibold: 600;
  --token-typography-font-weight-bold: 700;
  --token-typography-display-500-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  --token-typography-display-500-font-size: 1.875rem; /* 30px/1.875rem */
  --token-typography-display-500-line-height: 1.2666; /* 38px */
  --token-typography-display-400-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  --token-typography-display-400-font-size: 1.5rem; /* 24px/1.5rem */
  --token-typography-display-400-line-height: 1.3333; /* 32px */
  --token-typography-display-300-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  --token-typography-display-300-font-size: 1.125rem; /* 18px/1.125rem */
  --token-typography-display-300-line-height: 1.3333; /* 24px */
  --token-typography-display-300-letter-spacing: -0.5px; /* this is `tracking` */
  --token-typography-display-200-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  --token-typography-display-200-font-size: 1rem; /* 16px/1rem */
  --token-typography-display-200-line-height: 1.5; /* 24px */
  --token-typography-display-200-letter-spacing: -0.5px; /* this is `tracking` */
  --token-typography-display-100-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  --token-typography-display-100-font-size: 0.8125rem; /* 13px/0.8125rem */
  --token-typography-display-100-line-height: 1.3846; /* 18px */
  --token-typography-body-300-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  --token-typography-body-300-font-size: 1rem; /* 16px/1rem */
  --token-typography-body-300-line-height: 1.5; /* 24px */
  --token-typography-body-200-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  --token-typography-body-200-font-size: 0.875rem; /* 14px/0.875rem */
  --token-typography-body-200-line-height: 1.4286; /* 20px */
  --token-typography-body-100-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  --token-typography-body-100-font-size: 0.8125rem; /* 13px/0.8125rem */
  --token-typography-body-100-line-height: 1.3846; /* 18px */
  --token-typography-code-100-font-family: ui-monospace, Menlo, Consolas, monospace;
  --token-typography-code-100-font-size: 0.8125rem; /* 13px/0.8125rem */
  --token-typography-code-100-line-height: 1.23; /* 16px */
  --token-typography-code-200-font-family: ui-monospace, Menlo, Consolas, monospace;
  --token-typography-code-200-font-size: 0.875rem; /* 14px/0.875rem */
  --token-typography-code-200-line-height: 1.125; /* 18px */
  --token-typography-code-300-font-family: ui-monospace, Menlo, Consolas, monospace;
  --token-typography-code-300-font-size: 1rem; /* 16px/1rem */
  --token-typography-code-300-line-height: 1.25; /* 20px */
}

/**
 * Do not edit directly
 * Generated on Fri, 02 Feb 2024 21:05:58 GMT
 */
.hds-border-primary {
  border: 1px solid var(--token-color-border-primary);
}

.hds-border-faint {
  border: 1px solid var(--token-color-border-faint);
}

.hds-border-strong {
  border: 1px solid var(--token-color-border-strong);
}

.hds-border-action {
  border: 1px solid var(--token-color-border-action);
}

.hds-border-highlight {
  border: 1px solid var(--token-color-border-highlight);
}

.hds-border-success {
  border: 1px solid var(--token-color-border-success);
}

.hds-border-warning {
  border: 1px solid var(--token-color-border-warning);
}

.hds-border-critical {
  border: 1px solid var(--token-color-border-critical);
}

.hds-foreground-strong {
  color: var(--token-color-foreground-strong);
}

.hds-foreground-primary {
  color: var(--token-color-foreground-primary);
}

.hds-foreground-faint {
  color: var(--token-color-foreground-faint);
}

.hds-foreground-high-contrast {
  color: var(--token-color-foreground-high-contrast);
}

.hds-foreground-disabled {
  color: var(--token-color-foreground-disabled);
}

.hds-foreground-action {
  color: var(--token-color-foreground-action);
}

.hds-foreground-action-hover {
  color: var(--token-color-foreground-action-hover);
}

.hds-foreground-action-active {
  color: var(--token-color-foreground-action-active);
}

.hds-foreground-highlight {
  color: var(--token-color-foreground-highlight);
}

.hds-foreground-highlight-on-surface {
  color: var(--token-color-foreground-highlight-on-surface);
}

.hds-foreground-highlight-high-contrast {
  color: var(--token-color-foreground-highlight-high-contrast);
}

.hds-foreground-success {
  color: var(--token-color-foreground-success);
}

.hds-foreground-success-on-surface {
  color: var(--token-color-foreground-success-on-surface);
}

.hds-foreground-success-high-contrast {
  color: var(--token-color-foreground-success-high-contrast);
}

.hds-foreground-warning {
  color: var(--token-color-foreground-warning);
}

.hds-foreground-warning-on-surface {
  color: var(--token-color-foreground-warning-on-surface);
}

.hds-foreground-warning-high-contrast {
  color: var(--token-color-foreground-warning-high-contrast);
}

.hds-foreground-critical {
  color: var(--token-color-foreground-critical);
}

.hds-foreground-critical-on-surface {
  color: var(--token-color-foreground-critical-on-surface);
}

.hds-foreground-critical-high-contrast {
  color: var(--token-color-foreground-critical-high-contrast);
}

.hds-page-primary {
  background-color: var(--token-color-page-primary);
}

.hds-page-faint {
  background-color: var(--token-color-page-faint);
}

.hds-surface-primary {
  background-color: var(--token-color-surface-primary);
}

.hds-surface-faint {
  background-color: var(--token-color-surface-faint);
}

.hds-surface-strong {
  background-color: var(--token-color-surface-strong);
}

.hds-surface-interactive {
  background-color: var(--token-color-surface-interactive);
}

.hds-surface-interactive-hover {
  background-color: var(--token-color-surface-interactive-hover);
}

.hds-surface-interactive-active {
  background-color: var(--token-color-surface-interactive-active);
}

.hds-surface-interactive-disabled {
  background-color: var(--token-color-surface-interactive-disabled);
}

.hds-surface-action {
  background-color: var(--token-color-surface-action);
}

.hds-surface-highlight {
  background-color: var(--token-color-surface-highlight);
}

.hds-surface-success {
  background-color: var(--token-color-surface-success);
}

.hds-surface-warning {
  background-color: var(--token-color-surface-warning);
}

.hds-surface-critical {
  background-color: var(--token-color-surface-critical);
}

/**
 * Do not edit directly
 * Generated on Fri, 02 Feb 2024 21:05:58 GMT
 */
.hds-elevation-inset {
  box-shadow: var(--token-elevation-inset-box-shadow);
}

.hds-elevation-low {
  box-shadow: var(--token-elevation-low-box-shadow);
}

.hds-elevation-mid {
  box-shadow: var(--token-elevation-mid-box-shadow);
}

.hds-elevation-high {
  box-shadow: var(--token-elevation-high-box-shadow);
}

.hds-elevation-higher {
  box-shadow: var(--token-elevation-higher-box-shadow);
}

.hds-elevation-overlay {
  box-shadow: var(--token-elevation-overlay-box-shadow);
}

.hds-surface-inset {
  box-shadow: var(--token-surface-inset-box-shadow);
}

.hds-surface-base {
  box-shadow: var(--token-surface-base-box-shadow);
}

.hds-surface-low {
  box-shadow: var(--token-surface-low-box-shadow);
}

.hds-surface-mid {
  box-shadow: var(--token-surface-mid-box-shadow);
}

.hds-surface-high {
  box-shadow: var(--token-surface-high-box-shadow);
}

.hds-surface-higher {
  box-shadow: var(--token-surface-higher-box-shadow);
}

.hds-surface-overlay {
  box-shadow: var(--token-surface-overlay-box-shadow);
}

/**
 * Do not edit directly
 * Generated on Fri, 02 Feb 2024 21:05:58 GMT
 */
.hds-focus-ring-action-box-shadow {
  box-shadow: var(--token-focus-ring-action-box-shadow);
}

.hds-focus-ring-critical-box-shadow {
  box-shadow: var(--token-focus-ring-critical-box-shadow);
}

/**
 * Do not edit directly
 * Generated on Fri, 02 Feb 2024 21:05:58 GMT
 */
.hds-font-family-sans-display {
  font-family: var(--token-typography-font-stack-display);
}

.hds-font-family-sans-text {
  font-family: var(--token-typography-font-stack-text);
}

.hds-font-family-mono-code {
  font-family: var(--token-typography-font-stack-code);
}

.hds-font-weight-regular {
  font-weight: 400;
}

.hds-font-weight-medium {
  font-weight: 500;
}

.hds-font-weight-semibold {
  font-weight: 600;
}

.hds-font-weight-bold {
  font-weight: 700;
}

.hds-typography-display-500 {
  font-family: var(--token-typography-display-500-font-family);
  font-size: var(--token-typography-display-500-font-size);
  line-height: var(--token-typography-display-500-line-height);
  margin: 0;
  padding: 0;
}

.hds-typography-display-400 {
  font-family: var(--token-typography-display-400-font-family);
  font-size: var(--token-typography-display-400-font-size);
  line-height: var(--token-typography-display-400-line-height);
  margin: 0;
  padding: 0;
}

.hds-typography-display-300 {
  font-family: var(--token-typography-display-300-font-family);
  font-size: var(--token-typography-display-300-font-size);
  line-height: var(--token-typography-display-300-line-height);
  margin: 0;
  padding: 0;
}

.hds-typography-display-200 {
  font-family: var(--token-typography-display-200-font-family);
  font-size: var(--token-typography-display-200-font-size);
  line-height: var(--token-typography-display-200-line-height);
  margin: 0;
  padding: 0;
}

.hds-typography-display-100 {
  font-family: var(--token-typography-display-100-font-family);
  font-size: var(--token-typography-display-100-font-size);
  line-height: var(--token-typography-display-100-line-height);
  margin: 0;
  padding: 0;
}

.hds-typography-body-300 {
  font-family: var(--token-typography-body-300-font-family);
  font-size: var(--token-typography-body-300-font-size);
  line-height: var(--token-typography-body-300-line-height);
  margin: 0;
  padding: 0;
}

.hds-typography-body-200 {
  font-family: var(--token-typography-body-200-font-family);
  font-size: var(--token-typography-body-200-font-size);
  line-height: var(--token-typography-body-200-line-height);
  margin: 0;
  padding: 0;
}

.hds-typography-body-100 {
  font-family: var(--token-typography-body-100-font-family);
  font-size: var(--token-typography-body-100-font-size);
  line-height: var(--token-typography-body-100-line-height);
  margin: 0;
  padding: 0;
}

.hds-typography-code-100 {
  font-family: var(--token-typography-code-100-font-family);
  font-size: var(--token-typography-code-100-font-size);
  line-height: var(--token-typography-code-100-line-height);
  margin: 0;
  padding: 0;
}

.hds-typography-code-200 {
  font-family: var(--token-typography-code-200-font-family);
  font-size: var(--token-typography-code-200-font-size);
  line-height: var(--token-typography-code-200-line-height);
  margin: 0;
  padding: 0;
}

.hds-typography-code-300 {
  font-family: var(--token-typography-code-300-font-family);
  font-size: var(--token-typography-code-300-font-size);
  line-height: var(--token-typography-code-300-line-height);
  margin: 0;
  padding: 0;
}

/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */
/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */
/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */
.hds-accordion {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hds-accordion-item {
  background: var(--token-color-surface-primary);
  border-radius: 6px;
}
.hds-accordion-item.hds-accordion-item--does-not-contain-interactive {
  box-shadow: var(--token-surface-mid-box-shadow);
}
.hds-accordion-item.hds-accordion-item--does-not-contain-interactive:hover, .hds-accordion-item.hds-accordion-item--does-not-contain-interactive.mock-hover {
  box-shadow: var(--token-surface-high-box-shadow);
}
.hds-accordion-item.hds-accordion-item--contains-interactive {
  box-shadow: var(--token-surface-base-box-shadow);
}

.hds-accordion-item__toggle {
  position: relative;
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 16px 16px 16px 12px;
}

.hds-accordion-item__button {
  padding: 0;
}
.hds-accordion-item__button:hover {
  cursor: pointer;
}
.hds-accordion-item__button.hds-accordion-item__button--parent-does-not-contain-interactive {
  position: relative;
  outline-style: solid;
  outline-color: transparent;
  isolation: isolate;
}
.hds-accordion-item__button.hds-accordion-item__button--parent-does-not-contain-interactive::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  border-radius: 5px;
  content: "";
}
.hds-accordion-item__button.hds-accordion-item__button--parent-does-not-contain-interactive:focus::before, .hds-accordion-item__button.hds-accordion-item__button--parent-does-not-contain-interactive.mock-focus::before {
  box-shadow: var(--token-focus-ring-action-box-shadow);
}
.hds-accordion-item__button.hds-accordion-item__button--parent-does-not-contain-interactive:focus:not(:focus-visible)::before {
  box-shadow: none;
}
.hds-accordion-item__button.hds-accordion-item__button--parent-does-not-contain-interactive:focus-visible::before {
  box-shadow: var(--token-focus-ring-action-box-shadow);
}
.hds-accordion-item__button.hds-accordion-item__button--parent-does-not-contain-interactive:focus:active::before, .hds-accordion-item__button.hds-accordion-item__button--parent-does-not-contain-interactive.mock-focus.mock-active::before {
  box-shadow: none;
}
.hds-accordion-item__button.hds-accordion-item__button--parent-does-not-contain-interactive {
  position: static;
  margin: -1px 0;
  color: var(--token-color-foreground-primary);
  background: transparent;
  border: 1px solid transparent;
}
.hds-accordion-item__button.hds-accordion-item__button--parent-does-not-contain-interactive::after {
  position: absolute;
  display: block;
  border-radius: 6px;
  content: "";
  inset: 0;
}
.hds-accordion-item__button.hds-accordion-item__button--parent-contains-interactive {
  position: relative;
  display: flex;
  gap: 0.375rem;
  align-items: center;
  justify-content: center;
  width: auto;
  font-weight: var(--token-typography-font-weight-regular);
  font-family: var(--token-typography-font-stack-text);
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 5px;
  outline-style: solid;
  outline-color: transparent;
  isolation: isolate;
  width: 24px;
  height: 24px;
}
.hds-accordion-item__button.hds-accordion-item__button--parent-contains-interactive:focus, .hds-accordion-item__button.hds-accordion-item__button--parent-contains-interactive.mock-focus {
  box-shadow: none;
}
.hds-accordion-item__button.hds-accordion-item__button--parent-contains-interactive:focus::before, .hds-accordion-item__button.hds-accordion-item__button--parent-contains-interactive.mock-focus::before {
  position: absolute;
  top: -4px;
  right: -4px;
  bottom: -4px;
  left: -4px;
  z-index: -1;
  border: 3px solid transparent;
  border-radius: 8px;
  content: "";
}
.hds-accordion-item__button.hds-accordion-item__button--parent-contains-interactive {
  color: var(--token-color-foreground-primary);
  background-color: var(--token-color-surface-faint);
  border-color: var(--token-color-border-strong);
  box-shadow: var(--token-elevation-low-box-shadow);
}
.hds-accordion-item__button.hds-accordion-item__button--parent-contains-interactive:hover, .hds-accordion-item__button.hds-accordion-item__button--parent-contains-interactive.mock-hover {
  color: var(--token-color-foreground-primary);
  background-color: var(--token-color-surface-primary);
  border-color: var(--token-color-border-strong);
  cursor: pointer;
}
.hds-accordion-item__button.hds-accordion-item__button--parent-contains-interactive:focus, .hds-accordion-item__button.hds-accordion-item__button--parent-contains-interactive.mock-focus {
  color: var(--token-color-foreground-primary);
  background-color: var(--token-color-surface-faint);
  border-color: var(--token-color-focus-action-internal);
}
.hds-accordion-item__button.hds-accordion-item__button--parent-contains-interactive:focus::before, .hds-accordion-item__button.hds-accordion-item__button--parent-contains-interactive.mock-focus::before {
  border-color: var(--token-color-focus-action-external);
}
.hds-accordion-item__button.hds-accordion-item__button--parent-contains-interactive:active, .hds-accordion-item__button.hds-accordion-item__button--parent-contains-interactive.mock-active {
  color: var(--token-color-foreground-primary);
  background-color: var(--token-color-surface-interactive-active);
  border-color: var(--token-color-border-strong);
  box-shadow: none;
}
.hds-accordion-item__button.hds-accordion-item__button--parent-contains-interactive:active::before, .hds-accordion-item__button.hds-accordion-item__button--parent-contains-interactive.mock-active::before {
  border-color: transparent;
}
.hds-accordion-item__button.hds-accordion-item__button--is-open .flight-icon-chevron-down {
  transform: rotate(-180deg);
}
@media (prefers-reduced-motion: no-preference) {
  .hds-accordion-item__button .flight-icon-chevron-down {
    transition: transform 0.3s;
  }
}

.hds-accordion-item__toggle-content {
  flex: 1;
}

.hds-accordion-item__content {
  padding: 4px 16px 16px 16px;
}

/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */
.hds-alert {
  display: flex;
  align-items: flex-start;
}

.hds-alert__icon {
  flex: none;
  width: 20px;
  height: 20px;
  margin-right: 12px;
}
.hds-alert--type-compact .hds-alert__icon {
  width: 14px;
  height: 14px;
}

.hds-alert__content {
  flex: 1 1 auto;
}

.hds-alert__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
  color: var(--token-color-foreground-warning-on-surface);
}

.hds-alert__description {
  word-break: break-word;
}
.hds-alert__description strong {
  font-weight: var(--token-typography-font-weight-semibold);
}
.hds-alert__description code,
.hds-alert__description pre {
  display: inline;
  padding: 1px 5px;
  font-size: 0.9em;
  font-family: var(--token-typography-code-100-font-family);
  line-height: 1em;
  background-color: var(--token-color-surface-primary);
  border: 1px solid var(--token-color-palette-neutral-200);
  border-radius: 5px;
}
.hds-alert__description a:not([class*=hds-]) {
  color: var(--token-color-foreground-strong);
}
.hds-alert__description a:not([class*=hds-]):focus, .hds-alert__description a:not([class*=hds-]):focus-visible {
  text-decoration: none;
  outline: 2px solid var(--token-color-focus-action-internal);
  outline-offset: 1px;
}
.hds-alert__description a:not([class*=hds-]):hover {
  color: var(--token-color-foreground-primary);
}
.hds-alert__description a:not([class*=hds-]):active {
  color: var(--token-color-foreground-faint);
}

.hds-alert__actions {
  display: flex;
  gap: 16px;
  align-items: center;
}
.hds-alert__actions > * {
  margin-top: 16px;
}

.hds-alert__dismiss {
  margin-top: 2px;
  margin-left: 16px;
}
.hds-alert--type-compact .hds-alert__dismiss {
  margin-top: 1px;
}

.hds-alert--type-page {
  padding: 16px 48px;
}

.hds-alert--type-inline {
  padding: 16px;
  border-style: solid;
  border-width: 1px;
  border-radius: 6px;
}

.hds-alert--type-compact .hds-alert__icon {
  margin-top: 2px;
  margin-right: 8px;
}
.hds-alert--type-compact .hds-alert__title {
  display: none;
}
.hds-alert--type-compact .hds-alert__title + .hds-alert__description {
  margin-top: 0;
}

.hds-alert--color-neutral.hds-alert--type-page {
  background-color: var(--token-color-surface-faint);
  box-shadow: 0 1px 0 0 var(--token-color-palette-alpha-300);
}
.hds-alert--color-neutral.hds-alert--type-inline {
  background-color: var(--token-color-surface-faint);
  border-color: var(--token-color-border-strong);
}
.hds-alert--color-neutral .hds-alert__icon {
  color: var(--token-color-foreground-faint);
}
.hds-alert--color-neutral .hds-alert__title {
  color: var(--token-color-foreground-primary);
}

.hds-alert--color-highlight.hds-alert--type-page {
  background-color: var(--token-color-surface-highlight);
  box-shadow: 0 1px 0 0 var(--token-color-border-highlight);
}
.hds-alert--color-highlight.hds-alert--type-inline {
  background-color: var(--token-color-surface-highlight);
  border-color: var(--token-color-border-highlight);
}
.hds-alert--color-highlight .hds-alert__icon,
.hds-alert--color-highlight .hds-alert__title {
  color: var(--token-color-foreground-highlight-on-surface);
}

.hds-alert--color-success.hds-alert--type-page {
  background-color: var(--token-color-surface-success);
  box-shadow: 0 1px 0 0 var(--token-color-border-success);
}
.hds-alert--color-success.hds-alert--type-inline {
  background-color: var(--token-color-surface-success);
  border-color: var(--token-color-border-success);
}
.hds-alert--color-success .hds-alert__icon,
.hds-alert--color-success .hds-alert__title {
  color: var(--token-color-foreground-success-on-surface);
}

.hds-alert--color-warning.hds-alert--type-page {
  background-color: var(--token-color-surface-warning);
  box-shadow: 0 1px 0 0 var(--token-color-border-warning);
}
.hds-alert--color-warning.hds-alert--type-inline {
  background-color: var(--token-color-surface-warning);
  border-color: var(--token-color-border-warning);
}
.hds-alert--color-warning .hds-alert__icon,
.hds-alert--color-warning .hds-alert__title {
  color: var(--token-color-foreground-warning-on-surface);
}

.hds-alert--color-critical.hds-alert--type-page {
  background-color: var(--token-color-surface-critical);
  box-shadow: 0 1px 0 0 var(--token-color-border-critical);
}
.hds-alert--color-critical.hds-alert--type-inline {
  background-color: var(--token-color-surface-critical);
  border-color: var(--token-color-border-critical);
}
.hds-alert--color-critical .hds-alert__icon,
.hds-alert--color-critical .hds-alert__title {
  color: var(--token-color-foreground-critical-on-surface);
}

/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */
.hds-app-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
  padding: 24px;
  color: var(--app-footer-foreground-color);
  border-top: 1px solid var(--app-footer-border-top-color);
}

.hds-app-footer__list:not(:has(li)) {
  display: none;
}

.hds-app-footer__list,
.hds-app-footer__legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  justify-content: center;
  width: -moz-fit-content;
  width: fit-content;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.hds-app-footer__status-link.hds-link-inline--icon-leading > .hds-link-inline__icon {
  margin-right: 6px;
}
.hds-app-footer__status-link .flight-icon {
  fill: var(--hds-app-footer-status-icon-color, currentColor);
}

.hds-app-footer__status-link--operational .flight-icon {
  fill: var(--app-footer-status-link-icon-operational-color);
}

.hds-app-footer__status-link--degraded .flight-icon {
  fill: var(--app-footer-status-link-icon-degraded-color);
}

.hds-app-footer__status-link--maintenance .flight-icon {
  fill: var(--app-footer-status-link-icon-maintenance-color);
}

.hds-app-footer__status-link--outage .flight-icon {
  fill: var(--app-footer-status-link-icon-outage-color);
}

.hds-app-footer__link.hds-link-inline--color-secondary,
.hds-app-footer__status-link {
  color: var(--app-footer-link-default-color);
  text-align: right;
}
.hds-app-footer__link.hds-link-inline--color-secondary:hover, .hds-app-footer__link.hds-link-inline--color-secondary.mock-hover,
.hds-app-footer__status-link:hover,
.hds-app-footer__status-link.mock-hover {
  color: var(--app-footer-link-hover-color);
}
.hds-app-footer__link.hds-link-inline--color-secondary:active, .hds-app-footer__link.hds-link-inline--color-secondary.mock-active,
.hds-app-footer__status-link:active,
.hds-app-footer__status-link.mock-active {
  color: var(--app-footer-link-active-color);
}
.hds-app-footer__link.hds-link-inline--color-secondary:focus, .hds-app-footer__link.hds-link-inline--color-secondary.mock-focus, .hds-app-footer__link.hds-link-inline--color-secondary:focus-visible,
.hds-app-footer__status-link:focus,
.hds-app-footer__status-link.mock-focus,
.hds-app-footer__status-link:focus-visible {
  color: var(--app-footer-link-focus-color);
  outline-color: var(--app-footer-link-focus-outline-color);
}

.hds-app-footer__list-item {
  display: flex;
  align-items: center;
}

.hds-app-footer__copyright {
  display: flex;
  gap: 6px;
  align-items: center;
  color: var(--app-footer-copyright-text-color);
}
.hds-app-footer__copyright .flight-icon {
  fill: var(--app-footer-copyright-icon-color);
}

.hds-app-footer--theme-light {
  --app-footer-foreground-color: var(--token-color-foreground-primary);
  --app-footer-border-top-color: var(--token-color-border-primary);
  --app-footer-link-default-color: var(--token-color-foreground-faint);
  --app-footer-link-hover-color: var(--token-color-palette-neutral-600);
  --app-footer-link-active-color: var(--token-color-palette-neutral-700);
  --app-footer-link-focus-color: var(--token-color-foreground-faint);
  --app-footer-link-focus-outline-color: var(--token-color-focus-action-internal);
  --app-footer-copyright-text-color: var(--token-color-foreground-primary);
  --app-footer-copyright-icon-color: var(--token-color-hashicorp-brand);
  --app-footer-status-link-icon-operational-color: var(--token-color-foreground-success);
  --app-footer-status-link-icon-degraded-color: var(--token-color-foreground-warning);
  --app-footer-status-link-icon-maintenance-color: var(--token-color-foreground-warning);
  --app-footer-status-link-icon-outage-color: var(--token-color-foreground-critical);
}

.hds-app-footer--theme-dark {
  --app-footer-foreground-color: #b2b6bd;
  --app-footer-border-top-color: #b2b6bd66;
  --app-footer-link-default-color: #b2b6bd;
  --app-footer-link-hover-color: #d5d7db;
  --app-footer-link-active-color: #efeff1;
  --app-footer-link-focus-color: #b2b6bd;
  --app-footer-link-focus-outline-color: #389aff;
  --app-footer-copyright-text-color: #b2b6bd;
  --app-footer-copyright-icon-color: #fff;
  --app-footer-status-link-icon-operational-color: #009241;
  --app-footer-status-link-icon-degraded-color: #e88c03;
  --app-footer-status-link-icon-maintenance-color: #e88c03;
  --app-footer-status-link-icon-outage-color: #ef3016;
}

/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */
.hds-app-frame {
  display: grid;
  grid-template-areas: "header header" "sidebar main" "sidebar footer";
  grid-template-rows: auto 1fr auto;
  grid-template-columns: auto 1fr;
  min-height: 100vh;
}

.hds-app-frame__header {
  z-index: 7;
  grid-area: header;
}

.hds-app-frame__sidebar {
  z-index: 6;
  grid-area: sidebar;
}

.hds-app-frame__main {
  grid-area: main;
}

.hds-app-frame__footer {
  grid-area: footer;
}

.hds-app-frame__modals {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
}
.hds-app-frame__modals:empty {
  display: none;
}

/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */
.hds-application-state {
  width: 19.5rem;
  max-width: 100%;
  margin: 0 auto;
}

.hds-application-state__header {
  display: grid;
  grid-template-columns: min-content 1fr;
  align-items: start;
  color: var(--token-color-foreground-faint);
}

.hds-application-state__icon {
  margin-right: 8px;
  padding-top: 4px;
}

.hds-application-state__title,
.hds-application-state__error-code {
  grid-column-start: 2;
}

.hds-application-state__body {
  padding: 12px 0;
  color: var(--token-color-foreground-faint);
}

.hds-application-state__footer {
  display: flex;
  gap: 8px;
  justify-content: space-between;
}
.hds-application-state__footer.hds-application-state__footer--has-divider {
  padding: 12px 0;
  border-top: 1px solid var(--token-color-border-strong);
}

/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */
.hds-badge {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  vertical-align: middle;
  border: 1px solid transparent;
  border-radius: 5px;
}

.hds-badge__icon {
  display: block;
  flex: 0 0 auto;
}

.hds-badge__text {
  flex: 1 0 0;
  font-weight: var(--token-typography-font-weight-medium);
  font-family: var(--token-typography-font-stack-text);
}

.hds-badge--size-small {
  gap: 0.25rem;
  min-height: 1.25rem;
  padding: calc(0.125rem - 1px) calc(0.375rem - 1px);
}
.hds-badge--size-small .hds-badge__icon {
  width: 0.75rem;
  height: 0.75rem;
}
.hds-badge--size-small .hds-badge__text {
  font-size: 0.8125rem;
  line-height: 1.2308;
}

.hds-badge--size-medium {
  gap: 0.25rem;
  min-height: 1.5rem;
  padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
}
.hds-badge--size-medium .hds-badge__icon {
  width: 1rem;
  height: 1rem;
}
.hds-badge--size-medium .hds-badge__text {
  font-size: 0.8125rem;
  line-height: 1.2308;
}

.hds-badge--size-large {
  gap: 0.375rem;
  min-height: 2rem;
  padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
}
.hds-badge--size-large .hds-badge__icon {
  width: 1rem;
  height: 1rem;
}
.hds-badge--size-large .hds-badge__text {
  font-size: 1rem;
  line-height: 1.5;
}

.hds-badge--color-neutral.hds-badge--type-filled {
  color: var(--token-color-foreground-primary);
  background-color: var(--token-color-surface-strong);
}
.hds-badge--color-neutral.hds-badge--type-inverted {
  color: var(--token-color-foreground-high-contrast);
  background-color: var(--token-color-foreground-faint);
}
.hds-badge--color-neutral.hds-badge--type-outlined {
  color: var(--token-color-foreground-primary);
  background-color: transparent;
  border-color: var(--token-color-foreground-faint);
}

.hds-badge--color-neutral-dark-mode.hds-badge--type-filled {
  color: var(--token-color-foreground-high-contrast);
  background-color: var(--token-color-foreground-faint);
}
.hds-badge--color-neutral-dark-mode.hds-badge--type-inverted {
  color: var(--token-color-foreground-primary);
  background-color: var(--token-color-surface-faint);
}
.hds-badge--color-neutral-dark-mode.hds-badge--type-outlined {
  color: var(--token-color-foreground-high-contrast);
  background-color: transparent;
  border-color: var(--token-color-palette-neutral-100);
}

.hds-badge--color-highlight.hds-badge--type-filled {
  color: var(--token-color-foreground-highlight-on-surface);
  background-color: var(--token-color-surface-highlight);
}
.hds-badge--color-highlight.hds-badge--type-inverted {
  color: var(--token-color-foreground-high-contrast);
  background-color: var(--token-color-foreground-highlight);
}
.hds-badge--color-highlight.hds-badge--type-outlined {
  color: var(--token-color-foreground-highlight);
  background-color: transparent;
  border-color: currentColor;
}

.hds-badge--color-success.hds-badge--type-filled {
  color: var(--token-color-foreground-success-on-surface);
  background-color: var(--token-color-surface-success);
}
.hds-badge--color-success.hds-badge--type-inverted {
  color: var(--token-color-foreground-high-contrast);
  background-color: var(--token-color-foreground-success);
}
.hds-badge--color-success.hds-badge--type-outlined {
  color: var(--token-color-foreground-success);
  background-color: transparent;
  border-color: currentColor;
}

.hds-badge--color-warning.hds-badge--type-filled {
  color: var(--token-color-foreground-warning-on-surface);
  background-color: var(--token-color-surface-warning);
}
.hds-badge--color-warning.hds-badge--type-inverted {
  color: var(--token-color-foreground-high-contrast);
  background-color: var(--token-color-foreground-warning);
}
.hds-badge--color-warning.hds-badge--type-outlined {
  color: var(--token-color-foreground-warning);
  background-color: transparent;
  border-color: currentColor;
}

.hds-badge--color-critical.hds-badge--type-filled {
  color: var(--token-color-foreground-critical-on-surface);
  background-color: var(--token-color-surface-critical);
}
.hds-badge--color-critical.hds-badge--type-inverted {
  color: var(--token-color-foreground-high-contrast);
  background-color: var(--token-color-foreground-critical);
}
.hds-badge--color-critical.hds-badge--type-outlined {
  color: var(--token-color-foreground-critical);
  background-color: transparent;
  border-color: currentColor;
}

/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */
.hds-badge-count {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  font-weight: var(--token-typography-font-weight-medium);
  font-family: var(--token-typography-font-stack-text);
  border: 1px solid transparent;
}

.hds-badge-count--size-small {
  min-height: 1.25rem;
  padding: calc(0.125rem - 1px) calc(0.5rem - 1px);
  font-size: 0.8125rem;
  line-height: 1.2308;
  border-radius: 0.625rem;
}

.hds-badge-count--size-medium {
  min-height: 1.5rem;
  padding: calc(0.25rem - 1px) calc(0.75rem - 1px);
  font-size: 0.8125rem;
  line-height: 1.2308;
  border-radius: 0.75rem;
}

.hds-badge-count--size-large {
  min-height: 2rem;
  padding: calc(0.25rem - 1px) calc(0.875rem - 1px);
  font-size: 1rem;
  line-height: 1.5;
  border-radius: 1rem;
}

.hds-badge-count--color-neutral.hds-badge-count--type-filled {
  color: var(--token-color-foreground-primary);
  background-color: var(--token-color-surface-strong);
}
.hds-badge-count--color-neutral.hds-badge-count--type-inverted {
  color: var(--token-color-foreground-high-contrast);
  background-color: var(--token-color-foreground-faint);
}
.hds-badge-count--color-neutral.hds-badge-count--type-outlined {
  color: var(--token-color-foreground-primary);
  background-color: transparent;
  border-color: var(--token-color-foreground-faint);
}

.hds-badge-count--color-neutral-dark-mode.hds-badge-count--type-filled {
  color: var(--token-color-foreground-high-contrast);
  background-color: var(--token-color-foreground-faint);
}
.hds-badge-count--color-neutral-dark-mode.hds-badge-count--type-inverted {
  color: var(--token-color-foreground-primary);
  background-color: var(--token-color-surface-faint);
}
.hds-badge-count--color-neutral-dark-mode.hds-badge-count--type-outlined {
  color: var(--token-color-foreground-high-contrast);
  background-color: transparent;
  border-color: var(--token-color-palette-neutral-100);
}

/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */
.hds-breadcrumb {
  position: relative;
}

.hds-breadcrumb__list {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hds-breadcrumb--items-can-wrap .hds-breadcrumb__list {
  flex-wrap: wrap;
}

.hds-breadcrumb__sublist {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hds-breadcrumb__item {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  min-width: 0;
}
.hds-breadcrumb__list > .hds-breadcrumb__item:not(:last-child)::after {
  padding: 0 8px;
  color: var(--token-color-palette-neutral-300);
  content: "/";
}
.hds-breadcrumb__sublist > .hds-breadcrumb__item + .hds-breadcrumb__item {
  margin-top: 4px;
}

.hds-breadcrumb__item--is-truncation {
  flex: none;
}

.hds-breadcrumb__link {
  display: flex;
  flex-direction: row;
  align-items: center;
  min-width: 0;
  margin: 0 -4px;
  padding: 0 4px;
  color: var(--token-color-foreground-faint);
  border-radius: 5px;
  text-decoration-color: transparent;
}
.hds-breadcrumb__link:hover, .hds-breadcrumb__link.mock-hover {
  color: var(--token-color-palette-neutral-600);
}
.hds-breadcrumb__link:hover > .hds-breadcrumb__text, .hds-breadcrumb__link.mock-hover > .hds-breadcrumb__text {
  text-decoration-color: currentColor;
}
.hds-breadcrumb__link {
  outline-style: solid;
  outline-color: transparent;
}
.hds-breadcrumb__link:focus, .hds-breadcrumb__link.mock-focus {
  box-shadow: var(--token-focus-ring-action-box-shadow);
}
.hds-breadcrumb__link:focus:not(:focus-visible) {
  box-shadow: none;
}
.hds-breadcrumb__link:focus-visible {
  box-shadow: var(--token-focus-ring-action-box-shadow);
}
.hds-breadcrumb__link:focus:active, .hds-breadcrumb__link.mock-focus.mock-active {
  box-shadow: none;
}
.hds-breadcrumb__link:active, .hds-breadcrumb__link.mock-active {
  color: var(--token-color-foreground-secondary);
}
.hds-breadcrumb__link:active > .hds-breadcrumb__text, .hds-breadcrumb__link.mock-active > .hds-breadcrumb__text {
  text-decoration-color: currentColor;
}

.hds-breadcrumb__current {
  display: flex;
  flex-direction: row;
  align-items: center;
  min-width: 0;
  margin: 0 -4px;
  padding: 0 4px;
  color: var(--token-color-foreground-strong);
}

.hds-breadcrumb__icon {
  flex: none;
  width: 13px;
  height: 13px;
  margin-right: 6px;
}

.hds-breadcrumb__text {
  padding: calc((28px - 1rem) / 2) 0;
  overflow: hidden;
  font-size: 0.8125rem;
  font-family: var(--token-typography-font-stack-text);
  line-height: 1rem;
  white-space: nowrap;
  text-decoration: underline;
  text-overflow: ellipsis;
  text-decoration-color: transparent;
}
.hds-breadcrumb__sublist .hds-breadcrumb__text {
  white-space: normal;
}

.hds-breadcrumb__truncation-toggle {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: 0 -4px;
  padding: 0;
  color: var(--token-color-foreground-faint);
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
  outline: none;
  cursor: pointer;
}
.hds-breadcrumb__truncation-toggle:hover, .hds-breadcrumb__truncation-toggle.mock-hover {
  color: var(--token-color-foreground-faint);
  border-color: var(--token-color-border-strong);
}
.hds-breadcrumb__truncation-toggle {
  outline-style: solid;
  outline-color: transparent;
}
.hds-breadcrumb__truncation-toggle:focus, .hds-breadcrumb__truncation-toggle.mock-focus {
  box-shadow: var(--token-focus-ring-action-box-shadow);
}
.hds-breadcrumb__truncation-toggle:focus:not(:focus-visible) {
  box-shadow: none;
}
.hds-breadcrumb__truncation-toggle:focus-visible {
  box-shadow: var(--token-focus-ring-action-box-shadow);
}
.hds-breadcrumb__truncation-toggle:focus:active, .hds-breadcrumb__truncation-toggle.mock-focus.mock-active {
  box-shadow: none;
}
.hds-breadcrumb__truncation-toggle:focus, .hds-breadcrumb__truncation-toggle.mock-focus {
  background-color: transparent;
  border: none;
}
.hds-breadcrumb__truncation-toggle:active, .hds-breadcrumb__truncation-toggle.mock-active {
  color: var(--token-color-foreground-primary);
  background-color: var(--token-color-surface-interactive-active);
  border-color: var(--token-color-border-strong);
}

.hds-breadcrumb__truncation-content {
  position: absolute;
  top: 100%;
  left: -4px;
  z-index: 300;
  width: -moz-max-content;
  width: max-content;
  max-width: 200px;
  margin-top: 4px;
  padding: 6px 12px;
  background-color: var(--token-color-surface-primary);
  border-radius: 6px;
  box-shadow: var(--token-surface-high-box-shadow);
}

/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */
/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */
.hds-button {
  position: relative;
  display: flex;
  gap: 0.375rem;
  align-items: center;
  justify-content: center;
  width: auto;
  font-weight: var(--token-typography-font-weight-regular);
  font-family: var(--token-typography-font-stack-text);
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 5px;
  outline-style: solid;
  outline-color: transparent;
  isolation: isolate;
}
a.hds-button {
  width: -moz-fit-content;
  width: fit-content;
}
a.hds-button:hover, a.hds-button:focus, a.hds-button:active, a.hds-button.mock-hover, a.hds-button.mock-focus, a.hds-button.mock-active {
  text-decoration: underline;
}

.hds-button:disabled, .hds-button[disabled], .hds-button.mock-disabled, .hds-button:disabled:focus, .hds-button[disabled]:focus, .hds-button.mock-disabled:focus, .hds-button:disabled:hover, .hds-button[disabled]:hover, .hds-button.mock-disabled:hover {
  color: var(--token-color-foreground-disabled);
  background-color: var(--token-color-surface-faint);
  border-color: var(--token-color-border-primary);
  box-shadow: none;
  cursor: not-allowed;
}
.hds-button:disabled::before, .hds-button[disabled]::before, .hds-button.mock-disabled::before, .hds-button:disabled:focus::before, .hds-button[disabled]:focus::before, .hds-button.mock-disabled:focus::before, .hds-button:disabled:hover::before, .hds-button[disabled]:hover::before, .hds-button.mock-disabled:hover::before {
  border-color: transparent;
}
.hds-button.hds-button--width-full {
  width: 100%;
  max-width: 100%;
}
.hds-button.hds-button--width-full .hds-button__text {
  flex: 0 0 auto;
}
.hds-button:focus, .hds-button.mock-focus {
  box-shadow: none;
}
.hds-button:focus::before, .hds-button.mock-focus::before {
  position: absolute;
  top: -4px;
  right: -4px;
  bottom: -4px;
  left: -4px;
  z-index: -1;
  border: 3px solid transparent;
  border-radius: 8px;
  content: "";
}

.hds-button__icon {
  display: block;
}

.hds-button__text {
  display: block;
  flex: 1 0 0;
  text-align: center;
}

.hds-button--color-primary {
  color: var(--token-color-foreground-high-contrast);
  background-color: var(--token-color-palette-blue-200);
  border-color: var(--token-color-palette-blue-300);
  box-shadow: var(--token-elevation-low-box-shadow);
}
.hds-button--color-primary:hover, .hds-button--color-primary.mock-hover {
  color: var(--token-color-foreground-high-contrast);
  background-color: var(--token-color-palette-blue-300);
  border-color: var(--token-color-palette-blue-400);
  cursor: pointer;
}
.hds-button--color-primary:focus, .hds-button--color-primary.mock-focus {
  color: var(--token-color-foreground-high-contrast);
  background-color: var(--token-color-palette-blue-200);
  border-color: var(--token-color-focus-action-internal);
}
.hds-button--color-primary:focus::before, .hds-button--color-primary.mock-focus::before {
  top: -6px;
  right: -6px;
  bottom: -6px;
  left: -6px;
  border-color: var(--token-color-focus-action-external);
  border-radius: 10px;
}
.hds-button--color-primary:active, .hds-button--color-primary.mock-active {
  color: var(--token-color-foreground-high-contrast);
  background-color: var(--token-color-palette-blue-400);
  border-color: var(--token-color-palette-blue-400);
  box-shadow: none;
}
.hds-button--color-primary:active::before, .hds-button--color-primary.mock-active::before {
  border-color: transparent;
}

.hds-button--color-secondary {
  color: var(--token-color-foreground-primary);
  background-color: var(--token-color-surface-faint);
  border-color: var(--token-color-border-strong);
  box-shadow: var(--token-elevation-low-box-shadow);
}
.hds-button--color-secondary:hover, .hds-button--color-secondary.mock-hover {
  color: var(--token-color-foreground-primary);
  background-color: var(--token-color-surface-primary);
  border-color: var(--token-color-border-strong);
  cursor: pointer;
}
.hds-button--color-secondary:focus, .hds-button--color-secondary.mock-focus {
  color: var(--token-color-foreground-primary);
  background-color: var(--token-color-surface-faint);
  border-color: var(--token-color-focus-action-internal);
}
.hds-button--color-secondary:focus::before, .hds-button--color-secondary.mock-focus::before {
  border-color: var(--token-color-focus-action-external);
}
.hds-button--color-secondary:active, .hds-button--color-secondary.mock-active {
  color: var(--token-color-foreground-primary);
  background-color: var(--token-color-surface-interactive-active);
  border-color: var(--token-color-border-strong);
  box-shadow: none;
}
.hds-button--color-secondary:active::before, .hds-button--color-secondary.mock-active::before {
  border-color: transparent;
}

.hds-button--color-tertiary {
  color: var(--token-color-foreground-action);
  background-color: transparent;
  border-color: transparent;
}
.hds-button--color-tertiary:hover, .hds-button--color-tertiary.mock-hover {
  color: var(--token-color-foreground-action-hover);
  background-color: var(--token-color-surface-primary);
  border-color: var(--token-color-border-strong);
  cursor: pointer;
}
.hds-button--color-tertiary:focus, .hds-button--color-tertiary.mock-focus {
  color: var(--token-color-foreground-action);
  border-color: var(--token-color-focus-action-internal);
}
.hds-button--color-tertiary:focus::before, .hds-button--color-tertiary.mock-focus::before {
  border-color: var(--token-color-focus-action-external);
}
.hds-button--color-tertiary:active, .hds-button--color-tertiary.mock-active {
  color: var(--token-color-foreground-action-active);
  background-color: var(--token-color-surface-interactive-active);
  border-color: var(--token-color-border-strong);
  box-shadow: none;
}
.hds-button--color-tertiary:active::before, .hds-button--color-tertiary.mock-active::before {
  border-color: transparent;
}
.hds-button--color-tertiary:disabled, .hds-button--color-tertiary[disabled], .hds-button--color-tertiary.mock-disabled, .hds-button--color-tertiary:disabled:focus, .hds-button--color-tertiary[disabled]:focus, .hds-button--color-tertiary.mock-disabled:focus, .hds-button--color-tertiary:disabled:hover, .hds-button--color-tertiary[disabled]:hover, .hds-button--color-tertiary.mock-disabled:hover {
  background-color: transparent;
  border-color: transparent;
}
.hds-button--color-tertiary:disabled::before, .hds-button--color-tertiary[disabled]::before, .hds-button--color-tertiary.mock-disabled::before, .hds-button--color-tertiary:disabled:focus::before, .hds-button--color-tertiary[disabled]:focus::before, .hds-button--color-tertiary.mock-disabled:focus::before, .hds-button--color-tertiary:disabled:hover::before, .hds-button--color-tertiary[disabled]:hover::before, .hds-button--color-tertiary.mock-disabled:hover::before {
  border-color: transparent;
}

.hds-button--color-critical {
  color: var(--token-color-foreground-critical-on-surface);
  background-color: var(--token-color-surface-critical);
  border-color: var(--token-color-foreground-critical-on-surface);
  box-shadow: var(--token-elevation-low-box-shadow);
}
.hds-button--color-critical:hover, .hds-button--color-critical.mock-hover {
  color: var(--token-color-foreground-high-contrast);
  background-color: var(--token-color-palette-red-300);
  border-color: var(--token-color-palette-red-400);
  cursor: pointer;
}
.hds-button--color-critical:focus, .hds-button--color-critical.mock-focus {
  color: var(--token-color-foreground-critical-on-surface);
  background-color: var(--token-color-surface-critical);
  border-color: var(--token-color-focus-critical-internal);
}
.hds-button--color-critical:focus::before, .hds-button--color-critical.mock-focus::before {
  border-color: var(--token-color-focus-critical-external);
}
.hds-button--color-critical:active, .hds-button--color-critical.mock-active {
  color: var(--token-color-foreground-high-contrast);
  background-color: var(--token-color-palette-red-400);
  border-color: var(--token-color-palette-red-400);
  box-shadow: none;
}
.hds-button--color-critical:active::before, .hds-button--color-critical.mock-active::before {
  border-color: transparent;
}

.hds-button--size-small {
  min-height: 1.75rem;
  padding: 0.375rem 0.6875rem;
}
.hds-button--size-small .hds-button__icon {
  width: 0.75rem;
  height: 0.75rem;
}
.hds-button--size-small .hds-button__text {
  font-size: 0.8125rem;
  line-height: 0.875rem;
}
.hds-button--size-small.hds-button--is-icon-only {
  min-width: 1.75rem;
  padding-right: 0.375rem;
  padding-left: 0.375rem;
}

.hds-button--size-medium {
  min-height: 2.25rem;
  padding: 0.5625rem 0.9375rem;
}
.hds-button--size-medium .hds-button__icon {
  width: 1rem;
  height: 1rem;
}
.hds-button--size-medium .hds-button__text {
  font-size: 0.875rem;
  line-height: 1rem;
}
.hds-button--size-medium.hds-button--is-icon-only {
  min-width: 2.25rem;
  padding-right: 0.5625rem;
  padding-left: 0.5625rem;
}

.hds-button--size-large {
  min-height: 3rem;
  padding: 0.6875rem 1.1875rem;
}
.hds-button--size-large .hds-button__icon {
  width: 1.5rem;
  height: 1.5rem;
}
.hds-button--size-large .hds-button__text {
  font-size: 1rem;
  line-height: 1.5rem;
}
.hds-button--size-large.hds-button--is-icon-only {
  min-width: 3rem;
  padding-right: 0.6875rem;
  padding-left: 0.6875rem;
}

.hds-button--is-inline {
  display: inline-flex;
}

button.hds-button[href] {
  color: white !important;
  background-color: red !important;
  border: none;
}
button.hds-button[href] .hds-button__text, button.hds-button[href]::before {
  display: none;
}
button.hds-button[href]::after {
  content: ' Attention: you’re passing a "href" attribute to the "Hds::Button" component, you should use an "@href" argument.';
}

/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */
.hds-button-set {
  display: flex;
  gap: 16px;
}

/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */
/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */
.hds-card__container {
  position: relative;
  background-color: #fff;
  border-radius: 6px;
}

.hds-card__container--level-surface-base {
  box-shadow: var(--token-surface-base-box-shadow);
}

.hds-card__container--level-surface-mid {
  box-shadow: var(--token-surface-mid-box-shadow);
}

.hds-card__container--level-surface-high {
  box-shadow: var(--token-surface-high-box-shadow);
}

.hds-card__container--hover-level-surface-base:hover,
.hds-card__container--hover-level-surface-base.mock-hover {
  box-shadow: var(--token-surface-base-box-shadow);
}

.hds-card__container--hover-level-surface-mid:hover,
.hds-card__container--hover-level-surface-mid.mock-hover {
  box-shadow: var(--token-surface-mid-box-shadow);
}

.hds-card__container--hover-level-surface-high:hover,
.hds-card__container--hover-level-surface-high.mock-hover {
  box-shadow: var(--token-surface-high-box-shadow);
}

.hds-card__container--active-level-surface-base:active,
.hds-card__container--active-level-surface-base.mock-active {
  box-shadow: var(--token-surface-base-box-shadow);
}

.hds-card__container--active-level-surface-mid:active,
.hds-card__container--active-level-surface-mid.mock-active {
  box-shadow: var(--token-surface-mid-box-shadow);
}

.hds-card__container--active-level-surface-high:active,
.hds-card__container--active-level-surface-high.mock-active {
  box-shadow: var(--token-surface-high-box-shadow);
}

.hds-card__container--level-elevation-base {
  box-shadow: var(--token-elevation-base-box-shadow);
}

.hds-card__container--level-elevation-mid {
  box-shadow: var(--token-elevation-mid-box-shadow);
}

.hds-card__container--level-elevation-high {
  box-shadow: var(--token-elevation-high-box-shadow);
}

.hds-card__container--hover-level-elevation-base:hover,
.hds-card__container--hover-level-elevation-base.mock-hover {
  box-shadow: var(--token-elevation-base-box-shadow);
}

.hds-card__container--hover-level-elevation-mid:hover,
.hds-card__container--hover-level-elevation-mid.mock-hover {
  box-shadow: var(--token-elevation-mid-box-shadow);
}

.hds-card__container--hover-level-elevation-high:hover,
.hds-card__container--hover-level-elevation-high.mock-hover {
  box-shadow: var(--token-elevation-high-box-shadow);
}

.hds-card__container--active-level-elevation-base:active,
.hds-card__container--active-level-elevation-base.mock-active {
  box-shadow: var(--token-elevation-base-box-shadow);
}

.hds-card__container--active-level-elevation-mid:active,
.hds-card__container--active-level-elevation-mid.mock-active {
  box-shadow: var(--token-elevation-mid-box-shadow);
}

.hds-card__container--active-level-elevation-high:active,
.hds-card__container--active-level-elevation-high.mock-active {
  box-shadow: var(--token-elevation-high-box-shadow);
}

.hds-card__container--background-neutral-primary {
  background-color: var(--token-color-surface-primary);
}

.hds-card__container--background-neutral-secondary {
  background-color: var(--token-color-surface-faint);
}

.hds-card__container--overflow-hidden {
  overflow: hidden;
}

.hds-card__container--overflow-visible {
  overflow: visible;
}

/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */
/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */
.hds-code-block--theme-dark {
  --hds-code-block-color-blue: #2d8eff;
  --hds-code-block-color-cyan: #32fff7;
  --hds-code-block-color-green: #86ff13;
  --hds-code-block-color-orange: #ffa800;
  --hds-code-block-color-purple: #c76cff;
  --hds-code-block-color-red: #ff3b20;
  --hds-code-block-color-foreground-primary: #d5d7db;
  --hds-code-block-color-foreground-faint: #b2b6bd;
  --hds-code-block-color-surface-primary: #0d0e12;
  --hds-code-block-color-surface-faint: #15181e;
  --hds-code-block-color-foreground-success: #009241;
  --hds-code-block-color-foreground-critical: #ef3016;
  --hds-code-block-color-foreground-interactive: #dedfe3;
  --hds-code-block-color-foreground-interactive-hover: #fff;
  --hds-code-block-color-foreground-interactive-active: #f1f2f3;
  --hds-code-block-color-surface-interactive-active: #2b303c;
  --hds-code-block-color-foreground-action: #2b89ff;
  --hds-code-block-color-foreground-action-hover: #389aff;
  --hds-code-block-color-foreground-action-active: #4ca1ff;
  --hds-code-block-color-border-strong: rgba(178, 182, 189, 40%);
  --hds-code-block-color-border-primary: rgba(178, 182, 189, 20%);
  --hds-code-block-color-foreground-selection: #0d0e12;
  --hds-code-block-color-surface-selection: #86ff13;
  --hds-code-block-color-line-highlight: rgba(0, 74, 222, 20%);
  --hds-code-block-color-line-highlight-border: #1555d4;
  --hds-code-block-color-token: var(--hds-code-block-color-foreground-primary);
  --hds-code-block-color-atrule: var(--hds-code-block-color-blue);
  --hds-code-block-color-code-block-attr-name: var(--hds-code-block-color-blue);
  --hds-code-block-color-attr-value: var(--hds-code-block-color-blue);
  --hds-code-block-color-boolean: var(--hds-code-block-color-purple);
  --hds-code-block-color-builtin: var(--hds-code-block-color-orange);
  --hds-code-block-color-char: var(--hds-code-block-color-orange);
  --hds-code-block-color-class-name: var(--hds-code-block-color-green);
  --hds-code-block-color-comment: var(--hds-code-block-color-foreground-faint);
  --hds-code-block-color-control: var(--hds-code-block-color-cyan);
  --hds-code-block-color-constant: var(--hds-code-block-color-purple);
  --hds-code-block-color-deleted: var(--hds-code-block-color-red);
  --hds-code-block-color-entity: var(--hds-code-block-color-green);
  --hds-code-block-color-function: var(--hds-code-block-color-blue);
  --hds-code-block-color-important: var(--hds-code-block-color-red);
  --hds-code-block-color-keyword: var(--hds-code-block-color-green);
  --hds-code-block-color-namespace: var(--hds-code-block-color-red);
  --hds-code-block-color-number: var(--hds-code-block-color-purple);
  --hds-code-block-color-operator: var(--hds-code-block-color-cyan);
  --hds-code-block-color-prolog: var(--hds-code-block-color-foreground-primary);
  --hds-code-block-color-property: var(--hds-code-block-color-blue);
  --hds-code-block-color-punctuation: var(--hds-code-block-color-foreground-primary);
  --hds-code-block-color-regex: var(--hds-code-block-color-orange);
  --hds-code-block-color-script: var(--hds-code-block-color-foreground-primary);
  --hds-code-block-color-selector: var(--hds-code-block-color-green);
  --hds-code-block-color-string: var(--hds-code-block-color-orange);
  --hds-code-block-color-symbol: var(--hds-code-block-color-orange);
  --hds-code-block-color-tag: var(--hds-code-block-color-green);
  --hds-code-block-color-url: var(--hds-code-block-color-cyan);
  --hds-code-block-color-lang-css: var(--hds-code-block-color-purple);
  --hds-code-block-color-lang-css-token: var(--hds-code-block-color-green);
  --hds-code-block-color-lang-css-atrule: var(--hds-code-block-color-purple);
  --hds-code-block-color-lang-css-entity: var(--hds-code-block-color-blue);
  --hds-code-block-color-lang-css-function: var(--hds-code-block-color-cyan);
  --hds-code-block-color-lang-css-property: var(--hds-code-block-color-cyan);
  --hds-code-block-color-lang-css-punctuation: var(--hds-code-block-color-orange);
  --hds-code-block-color-lang-css-not-atrule: var(--hds-code-block-color-foreground-primary);
  --hds-code-block-color-lang-css-selector: var(--hds-code-block-color-blue);
  --hds-code-block-color-lang-css-url: var(--hds-code-block-color-orange);
  --hds-code-block-color-lang-js-constant: var(--hds-code-block-color-orange);
  --hds-code-block-color-lang-markup-attr-value: var(--hds-code-block-color-yellow);
  --hds-code-block-color-lang-markup-entity-named: var(--hds-code-block-color-purple);
  --hds-code-block-color-lang-markup-entity-not-named: var(--hds-code-block-color-green);
}

.hds-code-block .token {
  color: var(--hds-code-block-color-token);
}
.hds-code-block .token.atrule {
  color: var(--hds-code-block-color-atrule);
}
.hds-code-block .token.attr-name {
  color: var(--hds-code-block-color-attr-name);
}
.hds-code-block .token.attr-value {
  color: var(--hds-code-block-color-attr-value);
}
.hds-code-block .token.boolean {
  color: var(--hds-code-block-color-boolean);
}
.hds-code-block .token.builtin {
  color: var(--hds-code-block-color-builtin);
}
.hds-code-block .token.char {
  color: var(--hds-code-block-color-char);
}
.hds-code-block .token.class-name {
  color: var(--hds-code-block-color-class-name);
}
.hds-code-block .token.comment {
  color: var(--hds-code-block-color-comment);
}
.hds-code-block .token.constant {
  color: var(--hds-code-block-color-constant);
}
.hds-code-block .token.deleted {
  color: var(--hds-code-block-color-deleted);
}
.hds-code-block .token.entity {
  color: var(--hds-code-block-color-entity);
}
.hds-code-block .token.function {
  color: var(--hds-code-block-color-function);
}
.hds-code-block .token.important {
  color: var(--hds-code-block-color-important);
}
.hds-code-block .token.keyword {
  color: var(--hds-code-block-color-keyword);
}
.hds-code-block .token.namespace {
  color: var(--hds-code-block-color-namespace);
}
.hds-code-block .token.number {
  color: var(--hds-code-block-color-number);
}
.hds-code-block .token.operator {
  color: var(--hds-code-block-color-operator);
}
.hds-code-block .token.punctuation {
  color: var(--hds-code-block-color-punctuation);
}
.hds-code-block .token.prolog {
  color: var(--hds-code-block-color-prolog);
}
.hds-code-block .token.property {
  color: var(--hds-code-block-color-property);
}
.hds-code-block .token.regex {
  color: var(--hds-code-block-color-regex);
}
.hds-code-block .token.script {
  color: var(--hds-code-block-color-script);
}
.hds-code-block .token.selector {
  color: var(--hds-code-block-color-selector);
}
.hds-code-block .token.string {
  color: var(--hds-code-block-color-string);
}
.hds-code-block .token.symbol {
  color: var(--hds-code-block-color-symbol);
}
.hds-code-block .token.tag {
  color: var(--hds-code-block-color-tag);
}
.hds-code-block .token.url {
  color: var(--hds-code-block-color-url);
}
.hds-code-block .token.variable {
  color: var(--hds-code-block-color-comment);
}
.hds-code-block .language-css {
  color: var(--hds-code-block-color-lang-css);
}
.hds-code-block .language-css .token {
  color: var(--hds-code-block-color-lang-css-token);
}
.hds-code-block .language-css .token.atrule {
  color: var(--hds-code-block-color-lang-css-atrule);
}
.hds-code-block .language-css .token.rule:not(.atrule) {
  color: var(--hds-code-block-color-lang-css-not-atrule);
}
.hds-code-block .language-css .token.entity {
  color: var(--hds-code-block-color-lang-css-entity);
}
.hds-code-block .language-css .token.function {
  color: var(--hds-code-block-color-lang-css-function);
}
.hds-code-block .language-css .token.property {
  color: var(--hds-code-block-color-lang-css-property);
}
.hds-code-block .language-css .token.punctuation {
  color: var(--hds-code-block-color-lang-css-punctuatione);
}
.hds-code-block .language-css .token.selector {
  color: var(--hds-code-block-color-lang-css-selector);
}
.hds-code-block .language-css .token.url {
  color: var(--hds-code-block-color-lang-css-url);
}
.hds-code-block .language-javascript .token.constant {
  color: var(--hds-code-block-color-lang-js-constant);
}
.hds-code-block .language-markup .token.attr-value,
.hds-code-block .language-html .token.attr-value {
  color: var(--hds-code-block-color-lang-markup-attr-value);
}
.hds-code-block .language-markup .token.entity.named-entity,
.hds-code-block .language-html .token.entity.named-entity {
  color: var(--hds-code-block-color-lang-markup-entity-named);
}
.hds-code-block .language-markup .token.entity:not(.named-entity),
.hds-code-block .language-html .token.entity:not(.named-entity) {
  color: var(--hds-code-block-color-lang-markup-entity-not-named);
}

.hds-code-block {
  position: relative;
  color: var(--hds-code-block-color-foreground-primary);
  background-color: var(--hds-code-block-color-surface-primary);
  border: 1px solid var(--hds-code-block-color-border-strong);
}
.hds-code-block pre,
.hds-code-block code {
  line-height: 1.4286;
  white-space: pre;
  text-align: left;
  text-shadow: none;
  word-wrap: normal;
  word-break: normal;
  word-spacing: normal;
  -moz-tab-size: 4;
    -o-tab-size: 4;
       tab-size: 4;
  hyphens: none;
}
@media print {
  .hds-code-block pre,
  .hds-code-block code {
    text-shadow: none;
  }
}

.hds-code-block--is-standalone {
  border-radius: 6px;
}

.hds-code-block--has-line-wrapping .hds-code-block__code,
.hds-code-block--has-line-wrapping .hds-code-block__code code {
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.hds-code-block__title {
  color: var(--hds-code-block-color-foreground-primary);
}

.hds-code-block__description {
  color: var(--hds-code-block-color-foreground-faint);
}

.hds-code-block__header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 16px;
  background-color: var(--hds-code-block-color-surface-faint);
  border-bottom: 1px solid var(--hds-code-block-color-border-primary);
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}
.hds-code-block__header:empty {
  display: none;
}
.hds-code-block__header strong {
  font-weight: var(--token-typography-font-weight-semibold);
}
.hds-code-block__header code,
.hds-code-block__header pre {
  display: inline;
  font-size: 0.9em;
  font-family: var(--token-typography-code-100-font-family);
  line-height: 1em;
}
.hds-code-block__header a:not([class*=hds-]) {
  color: var(--hds-code-block-color-foreground-action);
}
.hds-code-block__header a:not([class*=hds-]):focus, .hds-code-block__header a:not([class*=hds-]):focus-visible {
  text-decoration: none;
  outline: 2px solid var(--token-color-focus-action-internal);
  outline-offset: 1px;
}
.hds-code-block__header a:not([class*=hds-]):hover {
  color: var(--token-color-foreground-action-hover);
}
.hds-code-block__header a:not([class*=hds-]):active {
  color: var(--token-color-foreground-action-active);
}

.hds-code-block__body {
  position: relative;
  border-radius: inherit;
}

.hds-code-block__code {
  outline-style: solid;
  outline-color: transparent;
}
.hds-code-block__code:focus, .hds-code-block__code.mock-focus {
  box-shadow: var(--token-focus-ring-action-box-shadow);
}
.hds-code-block__code:focus:not(:focus-visible) {
  box-shadow: none;
}
.hds-code-block__code:focus-visible {
  box-shadow: var(--token-focus-ring-action-box-shadow);
}
.hds-code-block__code:focus:active, .hds-code-block__code.mock-focus.mock-active {
  box-shadow: none;
}
.hds-code-block__code {
  display: block;
  margin: 0;
  padding: 16px;
  overflow: auto;
  font-size: 0.8125rem;
  font-family: var(--token-typography-code-200-font-family);
  border-radius: inherit;
}
.hds-code-block__code ::-moz-selection {
  color: var(--hds-code-block-color-foreground-selection);
  background-color: var(--hds-code-block-color-surface-selection);
}
.hds-code-block__code ::selection {
  color: var(--hds-code-block-color-foreground-selection);
  background-color: var(--hds-code-block-color-surface-selection);
}

.hds-code-block__copy-button {
  position: absolute;
  top: 11px;
  right: 12px;
  color: var(--hds-code-block-color-foreground-primary);
  background-color: var(--hds-code-block-color-surface-faint);
  border: 1px solid var(--hds-code-block-color-border-strong);
}
.hds-code-block__copy-button:hover, .hds-code-block__copy-button.mock-hover {
  background-color: var(--hds-code-block-color-surface-primary);
  border-color: var(--hds-code-block-color-border-strong);
}
.hds-code-block__copy-button:active, .hds-code-block__copy-button.mock-active {
  background-color: var(--hds-code-block-color-surface-interactive-active);
}
.hds-code-block__copy-button:focus, .hds-code-block__copy-button.mock-focus, .hds-code-block__copy-button:focus-visible {
  background-color: var(--hds-code-block-color-surface-faint);
}
.hds-code-block__copy-button.hds-copy-button--status-success .flight-icon {
  color: var(--hds-code-block-color-foreground-success);
}
.hds-code-block__copy-button.hds-copy-button--status-error .flight-icon {
  color: var(--hds-code-block-color-foreground-critical);
}
.hds-code-block__copy-button .flight-icon {
  color: var(--hds-code-block-color-foreground-primary);
}

.hds-code-block.line-numbers {
  counter-reset: linenumber;
}
.hds-code-block.line-numbers .hds-code-block__code {
  position: relative;
  padding-left: calc(49px + 16px);
}
.hds-code-block.line-numbers .line-numbers-rows {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 49px;
  min-height: 100%;
  padding: 16px 0;
  border-right: 1px solid var(--hds-code-block-color-border-primary);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: none;
}
.hds-code-block.line-numbers .line-numbers-rows > span {
  display: block;
  counter-increment: linenumber;
}
.hds-code-block.line-numbers .line-numbers-rows > span::before {
  display: block;
  padding-right: 16px;
  text-align: right;
  content: counter(linenumber);
}
.hds-code-block .line-highlight {
  position: absolute;
  right: 0;
  left: 0;
  margin-top: -3px;
  background-color: var(--hds-code-block-color-line-highlight);
  border: solid var(--hds-code-block-color-line-highlight-border);
  border-width: 1px 0 1px 4px;
  mix-blend-mode: screen;
  pointer-events: none;
}
@media print {
  .hds-code-block .line-highlight {
    /*
     * This will prevent browsers from replacing the background color with white.
     * It's necessary because the element is layered on top of the displayed code.
     */
    -webkit-print-color-adjust: exact;
    color-adjust: exact;
  }
}
.hds-code-block .token.bold {
  font-weight: bold;
}
.hds-code-block .token.italic {
  font-style: italic;
}

/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */
/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */
.hds-copy-button {
  cursor: pointer;
}
.hds-copy-button .hds-button__icon {
  color: var(--token-color-foreground-action);
}
.hds-copy-button.hds-copy-button--status-success .hds-button__icon {
  color: var(--token-color-foreground-success);
}
.hds-copy-button.hds-copy-button--status-error .hds-button__icon {
  color: var(--token-color-foreground-critical);
}

/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */
.hds-copy-snippet {
  position: relative;
  outline-style: solid;
  outline-color: transparent;
  isolation: isolate;
}
.hds-copy-snippet::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  border-radius: 5px;
  content: "";
}
.hds-copy-snippet:focus::before, .hds-copy-snippet.mock-focus::before {
  box-shadow: var(--token-focus-ring-action-box-shadow);
}
.hds-copy-snippet:focus:not(:focus-visible)::before {
  box-shadow: none;
}
.hds-copy-snippet:focus-visible::before {
  box-shadow: var(--token-focus-ring-action-box-shadow);
}
.hds-copy-snippet:focus:active::before, .hds-copy-snippet.mock-focus.mock-active::before {
  box-shadow: none;
}
.hds-copy-snippet {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  padding: 6px 4px;
  text-align: left;
  border: 1px solid transparent;
  border-radius: 5px;
  cursor: pointer;
}

.hds-copy-snippet--color-primary {
  color: var(--token-color-foreground-action);
  background-color: transparent;
}
.hds-copy-snippet--color-primary:hover, .hds-copy-snippet--color-primary.mock-hover {
  color: var(--token-color-foreground-action-hover);
  background-color: var(--token-color-surface-interactive);
  border-color: var(--token-color-border-strong);
}
.hds-copy-snippet--color-primary:active, .hds-copy-snippet--color-primary.mock-active {
  color: var(--token-color-foreground-action-active);
  background-color: var(--token-color-surface-interactive-active);
  border-color: var(--token-color-border-strong);
}
.hds-copy-snippet--color-primary:focus {
  background-color: transparent;
}

.hds-copy-snippet--color-secondary {
  color: var(--token-color-foreground-primary);
  background-color: transparent;
}
.hds-copy-snippet--color-secondary:hover, .hds-copy-snippet--color-secondary.mock-hover {
  background-color: var(--token-color-surface-interactive);
  border-color: var(--token-color-border-strong);
}
.hds-copy-snippet--color-secondary:active, .hds-copy-snippet--color-secondary.mock-active {
  background-color: var(--token-color-surface-interactive-active);
  border-color: var(--token-color-border-strong);
}
.hds-copy-snippet--color-secondary .hds-copy-snippet__icon {
  color: var(--token-color-foreground-action);
}
.hds-copy-snippet--color-secondary .hds-copy-snippet__icon:hover {
  color: var(--token-color-foreground-action-hover);
}
.hds-copy-snippet--color-secondary .hds-copy-snippet__icon:active {
  color: var(--token-color-foreground-action-active);
}
.hds-copy-snippet--color-secondary .hds-copy-snippet__icon:focus {
  color: var(--token-color-foreground-action);
}

.hds-copy-snippet--status-success {
  background-color: var(--token-color-surface-interactive);
}
.hds-copy-snippet--status-success .hds-copy-snippet__icon {
  color: var(--token-color-foreground-success);
}

.hds-copy-snippet--status-error {
  background-color: var(--token-color-surface-interactive);
}
.hds-copy-snippet--status-error .hds-copy-snippet__icon {
  color: var(--token-color-foreground-critical);
}

.hds-copy-snippet__text {
  flex: 1 0 0;
}

.hds-copy-snippet__icon {
  flex: none;
}

.hds-copy-snippet--width-full {
  width: 100%;
  max-width: 100%;
}

.hds-copy-snippet--is-truncated {
  width: 100%;
  max-width: 100%;
}
.hds-copy-snippet--is-truncated .hds-copy-snippet__text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */
.hds-disclosure-primitive {
  position: relative;
}

/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */
.hds-dismiss-button {
  flex: none;
  padding: 0;
  color: var(--token-color-foreground-faint);
  background-color: transparent;
  border: none;
  cursor: pointer;
}
.hds-dismiss-button:hover::before, .hds-dismiss-button.mock-hover::before {
  background-color: rgba(222, 223, 227, 0.4);
}
.hds-dismiss-button {
  position: relative;
  outline-style: solid;
  outline-color: transparent;
  isolation: isolate;
}
.hds-dismiss-button::before {
  position: absolute;
  top: -4px;
  right: -4px;
  bottom: -4px;
  left: -4px;
  z-index: -1;
  border-radius: 5px;
  content: "";
}
.hds-dismiss-button:focus::before, .hds-dismiss-button.mock-focus::before {
  box-shadow: var(--token-focus-ring-action-box-shadow);
}
.hds-dismiss-button:focus:not(:focus-visible)::before {
  box-shadow: none;
}
.hds-dismiss-button:focus-visible::before {
  box-shadow: var(--token-focus-ring-action-box-shadow);
}
.hds-dismiss-button:focus:active::before, .hds-dismiss-button.mock-focus.mock-active::before {
  box-shadow: none;
}
.hds-dismiss-button:active, .hds-dismiss-button.mock-active {
  color: var(--token-color-foreground-secondary);
}
.hds-dismiss-button:active::before, .hds-dismiss-button.mock-active::before {
  background-color: rgba(222, 223, 227, 0.4);
  border: 1px solid var(--token-color-border-strong);
}

/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */
/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */
.hds-dropdown--is-inline {
  display: inline-block;
}
.hds-dropdown--is-inline .hds-dropdown-toggle-icon,
.hds-dropdown--is-inline .hds-dropdown-toggle-button {
  display: inline-flex;
}

.hds-dropdown-toggle-icon {
  display: flex;
  gap: 2px;
  align-items: center;
  justify-content: center;
  padding: 1px;
  background-color: var(--token-color-surface-faint);
  border: 1px solid var(--token-color-border-strong);
  border-radius: 5px;
  outline-style: solid;
  outline-color: transparent;
}
.hds-dropdown-toggle-icon:hover, .hds-dropdown-toggle-icon.mock-hover {
  background-color: var(--token-color-surface-interactive);
  cursor: pointer;
}
.hds-dropdown-toggle-icon {
  position: relative;
  outline-style: solid;
  outline-color: transparent;
  isolation: isolate;
}
.hds-dropdown-toggle-icon::before {
  position: absolute;
  top: -1px;
  right: -1px;
  bottom: -1px;
  left: -1px;
  z-index: -1;
  border-radius: 5px;
  content: "";
}
.hds-dropdown-toggle-icon:focus::before, .hds-dropdown-toggle-icon.mock-focus::before {
  box-shadow: var(--token-focus-ring-action-box-shadow);
}
.hds-dropdown-toggle-icon:focus:not(:focus-visible)::before {
  box-shadow: none;
}
.hds-dropdown-toggle-icon:focus-visible::before {
  box-shadow: var(--token-focus-ring-action-box-shadow);
}
.hds-dropdown-toggle-icon:focus:active::before, .hds-dropdown-toggle-icon.mock-focus.mock-active::before {
  box-shadow: none;
}
.hds-dropdown-toggle-icon:active, .hds-dropdown-toggle-icon.mock-active {
  background-color: var(--token-color-surface-interactive-active);
  border-color: var(--token-color-border-strong);
}
.hds-dropdown-toggle-icon:disabled, .hds-dropdown-toggle-icon.mock-disabled {
  color: var(--token-color-foreground-disabled);
  background-color: var(--token-color-surface-faint);
  border-color: var(--token-color-border-primary);
  box-shadow: none;
  cursor: not-allowed;
}
.hds-dropdown-toggle-icon:disabled::before, .hds-dropdown-toggle-icon.mock-disabled::before {
  border-color: transparent;
}

.hds-dropdown-toggle-icon__wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
}
.hds-dropdown-toggle-icon__wrapper img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: inherit;
}

.hds-dropdown-toggle-icon--size-small .hds-dropdown-toggle-icon__wrapper {
  width: 24px;
  height: 24px;
}

.hds-dropdown-toggle-icon--size-medium .hds-dropdown-toggle-icon__wrapper {
  width: 32px;
  height: 32px;
}

.hds-dropdown-toggle-button {
  position: relative;
  display: flex;
  gap: 0.375rem;
  align-items: center;
  justify-content: center;
  width: auto;
  font-weight: var(--token-typography-font-weight-regular);
  font-family: var(--token-typography-font-stack-text);
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 5px;
  outline-style: solid;
  outline-color: transparent;
  isolation: isolate;
}
.hds-dropdown-toggle-button:focus, .hds-dropdown-toggle-button.mock-focus {
  box-shadow: none;
}
.hds-dropdown-toggle-button:focus::before, .hds-dropdown-toggle-button.mock-focus::before {
  position: absolute;
  top: -4px;
  right: -4px;
  bottom: -4px;
  left: -4px;
  z-index: -1;
  border: 3px solid transparent;
  border-radius: 8px;
  content: "";
}
.hds-dropdown-toggle-button:disabled, .hds-dropdown-toggle-button.mock-disabled, .hds-dropdown-toggle-button:disabled:focus, .hds-dropdown-toggle-button.mock-disabled:focus, .hds-dropdown-toggle-button:disabled:hover, .hds-dropdown-toggle-button.mock-disabled:hover {
  color: var(--token-color-foreground-disabled);
  background-color: var(--token-color-surface-faint);
  border-color: var(--token-color-border-primary);
  box-shadow: none;
  cursor: not-allowed;
}
.hds-dropdown-toggle-button:disabled::before, .hds-dropdown-toggle-button.mock-disabled::before, .hds-dropdown-toggle-button:disabled:focus::before, .hds-dropdown-toggle-button.mock-disabled:focus::before, .hds-dropdown-toggle-button:disabled:hover::before, .hds-dropdown-toggle-button.mock-disabled:hover::before {
  border-color: transparent;
}
.hds-dropdown-toggle-button:disabled .hds-dropdown-toggle-button__badge,
.hds-dropdown-toggle-button:disabled .hds-dropdown-toggle-button__count, .hds-dropdown-toggle-button.mock-disabled .hds-dropdown-toggle-button__badge,
.hds-dropdown-toggle-button.mock-disabled .hds-dropdown-toggle-button__count, .hds-dropdown-toggle-button:disabled:focus .hds-dropdown-toggle-button__badge,
.hds-dropdown-toggle-button:disabled:focus .hds-dropdown-toggle-button__count, .hds-dropdown-toggle-button.mock-disabled:focus .hds-dropdown-toggle-button__badge,
.hds-dropdown-toggle-button.mock-disabled:focus .hds-dropdown-toggle-button__count, .hds-dropdown-toggle-button:disabled:hover .hds-dropdown-toggle-button__badge,
.hds-dropdown-toggle-button:disabled:hover .hds-dropdown-toggle-button__count, .hds-dropdown-toggle-button.mock-disabled:hover .hds-dropdown-toggle-button__badge,
.hds-dropdown-toggle-button.mock-disabled:hover .hds-dropdown-toggle-button__count {
  color: var(--token-color-foreground-primary);
  background-color: var(--token-color-surface-strong);
}

.hds-dropdown-toggle-button--size-small {
  min-height: 1.75rem;
  padding: 0.375rem 0.6875rem;
}
.hds-dropdown-toggle-button--size-small .hds-dropdown-toggle-button__icon {
  width: 0.75rem;
  height: 0.75rem;
}
.hds-dropdown-toggle-button--size-small .hds-dropdown-toggle-button__text {
  font-size: 0.8125rem;
  line-height: 0.875rem;
}
.hds-dropdown-toggle-button--size-small.hds-dropdown-toggle-button--is-icon-only {
  min-width: 1.75rem;
  padding-right: 0.375rem;
  padding-left: 0.375rem;
}

.hds-dropdown-toggle-button--size-medium {
  min-height: 2.25rem;
  padding: 0.5625rem 0.9375rem;
}
.hds-dropdown-toggle-button--size-medium .hds-dropdown-toggle-button__icon {
  width: 1rem;
  height: 1rem;
}
.hds-dropdown-toggle-button--size-medium .hds-dropdown-toggle-button__text {
  font-size: 0.875rem;
  line-height: 1rem;
}
.hds-dropdown-toggle-button--size-medium.hds-dropdown-toggle-button--is-icon-only {
  min-width: 2.25rem;
  padding-right: 0.5625rem;
  padding-left: 0.5625rem;
}

.hds-dropdown-toggle-button--size-large {
  min-height: 3rem;
  padding: 0.6875rem 1.1875rem;
}
.hds-dropdown-toggle-button--size-large .hds-dropdown-toggle-button__icon {
  width: 1.5rem;
  height: 1.5rem;
}
.hds-dropdown-toggle-button--size-large .hds-dropdown-toggle-button__text {
  font-size: 1rem;
  line-height: 1.5rem;
}
.hds-dropdown-toggle-button--size-large.hds-dropdown-toggle-button--is-icon-only {
  min-width: 3rem;
  padding-right: 0.6875rem;
  padding-left: 0.6875rem;
}

.hds-dropdown-toggle-button--size-small {
  padding-right: 0.375rem;
}

.hds-dropdown-toggle-button--size-medium {
  padding-right: 0.5625rem;
}

.hds-dropdown-toggle-button--color-primary {
  color: var(--token-color-foreground-high-contrast);
  background-color: var(--token-color-palette-blue-200);
  border-color: var(--token-color-palette-blue-300);
  box-shadow: var(--token-elevation-low-box-shadow);
}
.hds-dropdown-toggle-button--color-primary:hover, .hds-dropdown-toggle-button--color-primary.mock-hover {
  color: var(--token-color-foreground-high-contrast);
  background-color: var(--token-color-palette-blue-300);
  border-color: var(--token-color-palette-blue-400);
  cursor: pointer;
}
.hds-dropdown-toggle-button--color-primary:focus, .hds-dropdown-toggle-button--color-primary.mock-focus {
  color: var(--token-color-foreground-high-contrast);
  background-color: var(--token-color-palette-blue-200);
  border-color: var(--token-color-focus-action-internal);
}
.hds-dropdown-toggle-button--color-primary:focus::before, .hds-dropdown-toggle-button--color-primary.mock-focus::before {
  top: -6px;
  right: -6px;
  bottom: -6px;
  left: -6px;
  border-color: var(--token-color-focus-action-external);
  border-radius: 10px;
}
.hds-dropdown-toggle-button--color-primary:active, .hds-dropdown-toggle-button--color-primary.mock-active {
  color: var(--token-color-foreground-high-contrast);
  background-color: var(--token-color-palette-blue-400);
  border-color: var(--token-color-palette-blue-400);
  box-shadow: none;
}
.hds-dropdown-toggle-button--color-primary:active::before, .hds-dropdown-toggle-button--color-primary.mock-active::before {
  border-color: transparent;
}

.hds-dropdown-toggle-button--color-secondary {
  color: var(--token-color-foreground-primary);
  background-color: var(--token-color-surface-faint);
  border-color: var(--token-color-border-strong);
  box-shadow: var(--token-elevation-low-box-shadow);
}
.hds-dropdown-toggle-button--color-secondary:hover, .hds-dropdown-toggle-button--color-secondary.mock-hover {
  color: var(--token-color-foreground-primary);
  background-color: var(--token-color-surface-primary);
  border-color: var(--token-color-border-strong);
  cursor: pointer;
}
.hds-dropdown-toggle-button--color-secondary:focus, .hds-dropdown-toggle-button--color-secondary.mock-focus {
  color: var(--token-color-foreground-primary);
  background-color: var(--token-color-surface-faint);
  border-color: var(--token-color-focus-action-internal);
}
.hds-dropdown-toggle-button--color-secondary:focus::before, .hds-dropdown-toggle-button--color-secondary.mock-focus::before {
  border-color: var(--token-color-focus-action-external);
}
.hds-dropdown-toggle-button--color-secondary:active, .hds-dropdown-toggle-button--color-secondary.mock-active {
  color: var(--token-color-foreground-primary);
  background-color: var(--token-color-surface-interactive-active);
  border-color: var(--token-color-border-strong);
  box-shadow: none;
}
.hds-dropdown-toggle-button--color-secondary:active::before, .hds-dropdown-toggle-button--color-secondary.mock-active::before {
  border-color: transparent;
}

.hds-dropdown-toggle-button--width-full {
  justify-content: space-between;
  width: 100%;
  max-width: 100%;
}

.hds-dropdown-toggle-button__text {
  text-align: left;
}

.hds-dropdown-toggle-button__icon {
  flex: none;
}

.hds-dropdown-toggle-button__badge,
.hds-dropdown-toggle-button__count {
  margin: -3px 0 -3px 0;
}

.hds-dropdown-toggle-chevron {
  margin-left: auto;
  padding-left: 2px;
}
@media (prefers-reduced-motion: no-preference) {
  .hds-dropdown-toggle-chevron .flight-icon-chevron-down {
    transition: transform 0.3s;
  }
}
.hds-dropdown-toggle-icon--is-open .hds-dropdown-toggle-chevron .flight-icon-chevron-down, .hds-dropdown-toggle-button--is-open .hds-dropdown-toggle-chevron .flight-icon-chevron-down {
  transform: rotate(-180deg);
}

.hds-dropdown__content {
  display: flex;
  flex-direction: column;
  width: -moz-max-content;
  width: max-content;
  min-width: 200px;
  max-width: 400px;
  background-color: var(--token-color-surface-primary);
  border-radius: 6px;
  box-shadow: var(--token-surface-high-box-shadow);
}

.hds-dropdown__content--fixed-width {
  min-width: initial;
  max-width: initial;
}

.hds-dropdown__content--position-bottom-right {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 2;
}

.hds-dropdown__content--position-bottom-left {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 2;
}

.hds-dropdown__content--position-top-right {
  position: absolute;
  right: 0;
  bottom: calc(100% + 4px);
  z-index: 2;
}

.hds-dropdown__content--position-top-left {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 0;
  z-index: 2;
}

.hds-dropdown__list {
  flex: 1 1 auto;
  margin: 0;
  padding: 4px 0;
  overflow-y: auto;
  list-style: none;
  overscroll-behavior: contain;
}

.hds-dropdown__header,
.hds-dropdown__footer {
  position: relative;
  flex: none;
  padding: 0 8px;
}
.hds-dropdown__header > .hds-link-standalone,
.hds-dropdown__footer > .hds-link-standalone {
  width: initial;
  margin: 4px 0;
  padding: 7px 8px;
}
.hds-dropdown__header > .hds-link-standalone::before,
.hds-dropdown__footer > .hds-link-standalone::before {
  top: 0;
  bottom: 0;
}
.hds-dropdown__header > .hds-button,
.hds-dropdown__header > .hds-form-text-input,
.hds-dropdown__footer > .hds-button,
.hds-dropdown__footer > .hds-form-text-input {
  margin: 8px 0;
}
.hds-dropdown__header > .hds-button-set,
.hds-dropdown__footer > .hds-button-set {
  gap: 8px;
  margin: 8px 0;
}

.hds-dropdown__header--with-divider {
  border-bottom: 1px solid var(--token-color-border-primary);
}

.hds-dropdown__footer--with-divider {
  border-top: 1px solid var(--token-color-border-primary);
}

.hds-dropdown-list-item__copy-item-title {
  padding: 2px 0 4px;
  color: var(--token-color-foreground-faint);
}

.hds-dropdown-list-item--variant-copy-item {
  width: 100%;
  padding: 10px 16px 12px;
}

.hds-dropdown-list-item--variant-description {
  padding: 2px 16px 4px;
  color: var(--token-color-foreground-faint);
}

.hds-dropdown-list-item--variant-generic {
  padding-right: 16px;
  padding-left: 16px;
}

.hds-dropdown-list-item--variant-interactive,
.hds-dropdown-list-item--variant-checkmark {
  position: relative;
  min-height: 36px;
  isolation: isolate;
}
.hds-dropdown-list-item--variant-interactive button,
.hds-dropdown-list-item--variant-checkmark button {
  width: 100%;
  background-color: transparent;
}
.hds-dropdown-list-item--variant-interactive button:hover,
.hds-dropdown-list-item--variant-checkmark button:hover {
  cursor: pointer;
}
.hds-dropdown-list-item--variant-interactive a,
.hds-dropdown-list-item--variant-interactive button,
.hds-dropdown-list-item--variant-checkmark a,
.hds-dropdown-list-item--variant-checkmark button {
  display: flex;
  align-items: flex-start;
  padding: 7px 9px 7px 15px;
  text-decoration: none;
  border: 1px solid transparent;
  outline-style: solid;
  outline-color: transparent;
}
.hds-dropdown-list-item--variant-interactive a::before,
.hds-dropdown-list-item--variant-interactive button::before,
.hds-dropdown-list-item--variant-checkmark a::before,
.hds-dropdown-list-item--variant-checkmark button::before {
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 4px;
  z-index: -1;
  width: 2px;
  border-radius: 1px;
  content: "";
}
.hds-dropdown-list-item--variant-interactive a::after,
.hds-dropdown-list-item--variant-interactive button::after,
.hds-dropdown-list-item--variant-checkmark a::after,
.hds-dropdown-list-item--variant-checkmark button::after {
  position: absolute;
  top: 0;
  right: 4px;
  bottom: 0;
  left: 10px;
  z-index: -1;
  border-radius: 5px;
  content: "";
}
.hds-dropdown-list-item--variant-interactive a:hover, .hds-dropdown-list-item--variant-interactive a.mock-hover,
.hds-dropdown-list-item--variant-interactive button:hover,
.hds-dropdown-list-item--variant-interactive button.mock-hover,
.hds-dropdown-list-item--variant-checkmark a:hover,
.hds-dropdown-list-item--variant-checkmark a.mock-hover,
.hds-dropdown-list-item--variant-checkmark button:hover,
.hds-dropdown-list-item--variant-checkmark button.mock-hover {
  color: var(--current-color-hover);
}
.hds-dropdown-list-item--variant-interactive a:hover::before, .hds-dropdown-list-item--variant-interactive a.mock-hover::before,
.hds-dropdown-list-item--variant-interactive button:hover::before,
.hds-dropdown-list-item--variant-interactive button.mock-hover::before,
.hds-dropdown-list-item--variant-checkmark a:hover::before,
.hds-dropdown-list-item--variant-checkmark a.mock-hover::before,
.hds-dropdown-list-item--variant-checkmark button:hover::before,
.hds-dropdown-list-item--variant-checkmark button.mock-hover::before {
  background-color: currentColor;
}
.hds-dropdown-list-item--variant-interactive a:focus, .hds-dropdown-list-item--variant-interactive a.mock-focus,
.hds-dropdown-list-item--variant-interactive button:focus,
.hds-dropdown-list-item--variant-interactive button.mock-focus,
.hds-dropdown-list-item--variant-checkmark a:focus,
.hds-dropdown-list-item--variant-checkmark a.mock-focus,
.hds-dropdown-list-item--variant-checkmark button:focus,
.hds-dropdown-list-item--variant-checkmark button.mock-focus {
  color: var(--current-color-focus);
}
.hds-dropdown-list-item--variant-interactive a:focus::after, .hds-dropdown-list-item--variant-interactive a.mock-focus::after,
.hds-dropdown-list-item--variant-interactive button:focus::after,
.hds-dropdown-list-item--variant-interactive button.mock-focus::after,
.hds-dropdown-list-item--variant-checkmark a:focus::after,
.hds-dropdown-list-item--variant-checkmark a.mock-focus::after,
.hds-dropdown-list-item--variant-checkmark button:focus::after,
.hds-dropdown-list-item--variant-checkmark button.mock-focus::after {
  left: 4px;
  box-shadow: var(--current-focus-ring-box-shadow);
}
.hds-dropdown-list-item--variant-interactive a:focus:not(:focus-visible)::after,
.hds-dropdown-list-item--variant-interactive button:focus:not(:focus-visible)::after,
.hds-dropdown-list-item--variant-checkmark a:focus:not(:focus-visible)::after,
.hds-dropdown-list-item--variant-checkmark button:focus:not(:focus-visible)::after {
  background-color: transparent;
  box-shadow: none;
}
.hds-dropdown-list-item--variant-interactive a:focus-visible,
.hds-dropdown-list-item--variant-interactive button:focus-visible,
.hds-dropdown-list-item--variant-checkmark a:focus-visible,
.hds-dropdown-list-item--variant-checkmark button:focus-visible {
  color: var(--current-color-focus);
}
.hds-dropdown-list-item--variant-interactive a:focus-visible::after,
.hds-dropdown-list-item--variant-interactive button:focus-visible::after,
.hds-dropdown-list-item--variant-checkmark a:focus-visible::after,
.hds-dropdown-list-item--variant-checkmark button:focus-visible::after {
  left: 4px;
  box-shadow: var(--current-focus-ring-box-shadow);
}
.hds-dropdown-list-item--variant-interactive a:focus:active::after, .hds-dropdown-list-item--variant-interactive a:focus-visible:active::after, .hds-dropdown-list-item--variant-interactive a.mock-focus.mock-active::after,
.hds-dropdown-list-item--variant-interactive button:focus:active::after,
.hds-dropdown-list-item--variant-interactive button:focus-visible:active::after,
.hds-dropdown-list-item--variant-interactive button.mock-focus.mock-active::after,
.hds-dropdown-list-item--variant-checkmark a:focus:active::after,
.hds-dropdown-list-item--variant-checkmark a:focus-visible:active::after,
.hds-dropdown-list-item--variant-checkmark a.mock-focus.mock-active::after,
.hds-dropdown-list-item--variant-checkmark button:focus:active::after,
.hds-dropdown-list-item--variant-checkmark button:focus-visible:active::after,
.hds-dropdown-list-item--variant-checkmark button.mock-focus.mock-active::after {
  left: 10px;
  background-color: var(--current-background-color);
  box-shadow: none;
}
.hds-dropdown-list-item--variant-interactive a:active, .hds-dropdown-list-item--variant-interactive a.mock-active,
.hds-dropdown-list-item--variant-interactive button:active,
.hds-dropdown-list-item--variant-interactive button.mock-active,
.hds-dropdown-list-item--variant-checkmark a:active,
.hds-dropdown-list-item--variant-checkmark a.mock-active,
.hds-dropdown-list-item--variant-checkmark button:active,
.hds-dropdown-list-item--variant-checkmark button.mock-active {
  color: var(--current-color-active);
}
.hds-dropdown-list-item--variant-interactive a:active::before, .hds-dropdown-list-item--variant-interactive a.mock-active::before,
.hds-dropdown-list-item--variant-interactive button:active::before,
.hds-dropdown-list-item--variant-interactive button.mock-active::before,
.hds-dropdown-list-item--variant-checkmark a:active::before,
.hds-dropdown-list-item--variant-checkmark a.mock-active::before,
.hds-dropdown-list-item--variant-checkmark button:active::before,
.hds-dropdown-list-item--variant-checkmark button.mock-active::before {
  background-color: currentColor;
}

.hds-dropdown-list-item__interactive-icon {
  display: block;
  margin-top: 2px;
  margin-right: 8px;
}

.hds-dropdown-list-item__interactive-text {
  display: block;
  flex: 1;
  text-align: left;
}

.hds-dropdown-list-item--color-action a,
.hds-dropdown-list-item--color-action button {
  color: var(--token-color-foreground-primary);
  --current-color-hover: var(--token-color-foreground-action-hover);
  --current-color-focus: var(--token-color-foreground-action-active);
  --current-color-active: var(--token-color-foreground-action-active);
}
.hds-dropdown-list-item--color-action a::after,
.hds-dropdown-list-item--color-action button::after {
  --current-focus-ring-box-shadow: var(--token-focus-ring-action-box-shadow);
}

.hds-dropdown-list-item--color-critical a,
.hds-dropdown-list-item--color-critical button {
  color: var(--token-color-foreground-critical);
  --current-color-hover: var(--token-color-palette-red-300);
  --current-color-focus: var(--token-color-palette-red-400);
  --current-color-active: var(--token-color-palette-red-400);
}
.hds-dropdown-list-item--color-critical a::after,
.hds-dropdown-list-item--color-critical button::after {
  --current-background-color: var(--token-color-surface-critical);
  --current-focus-ring-box-shadow: var(--token-focus-ring-critical-box-shadow);
}

.hds-dropdown-list-item__interactive-loading-wrapper {
  display: flex;
  align-items: center;
  padding: 8px 10px 8px 16px;
}
.hds-dropdown-list-item__interactive-loading-wrapper .hds-dropdown-list-item__interactive-text {
  color: var(--token-color-foreground-faint);
}
.hds-dropdown-list-item__interactive-loading-wrapper .hds-dropdown-list-item__interactive-icon {
  color: var(--token-color-foreground-primary);
}

.hds-dropdown-list-item--variant-separator {
  position: relative;
  width: 100%;
  height: 4px;
}
.hds-dropdown-list-item--variant-separator::before {
  position: absolute;
  right: 6px;
  bottom: 0;
  left: 6px;
  border-bottom: 1px solid var(--token-color-border-primary);
  content: "";
}

.hds-dropdown-list-item--variant-title {
  padding: 10px 16px 4px;
  color: var(--token-color-foreground-strong);
}

.hds-dropdown-list-item--variant-checkmark-selected .hds-dropdown-list-item__interactive {
  color: var(--token-color-foreground-action);
}

.hds-dropdown-list-item__checkmark {
  display: flex;
  width: 16px;
  height: 20px;
  margin-left: 8px;
}

.hds-dropdown-list-item__checkmark-icon {
  align-self: center;
}

.hds-dropdown-list-item__interactive[disabled],
.hds-dropdown-list-item__interactive[disabled]:hover {
  color: var(--token-color-foreground-disabled);
  cursor: not-allowed;
}

.hds-dropdown-list-item--variant-checkbox,
.hds-dropdown-list-item--variant-radio {
  display: flex;
  align-items: self-start;
  padding: 8px 16px;
}
.hds-dropdown-list-item--variant-checkbox .hds-dropdown-list-item__control,
.hds-dropdown-list-item--variant-radio .hds-dropdown-list-item__control {
  flex-shrink: 0;
  margin-top: 2px;
  margin-right: 8px;
}
.hds-dropdown-list-item--variant-checkbox .hds-dropdown-list-item__control[disabled] ~ .hds-dropdown-list-item__icon, .hds-dropdown-list-item--variant-checkbox .hds-dropdown-list-item__control[disabled] ~ .hds-dropdown-list-item__count, .hds-dropdown-list-item--variant-checkbox .hds-dropdown-list-item__control[disabled] ~ .hds-dropdown-list-item__text-content,
.hds-dropdown-list-item--variant-radio .hds-dropdown-list-item__control[disabled] ~ .hds-dropdown-list-item__icon,
.hds-dropdown-list-item--variant-radio .hds-dropdown-list-item__control[disabled] ~ .hds-dropdown-list-item__count,
.hds-dropdown-list-item--variant-radio .hds-dropdown-list-item__control[disabled] ~ .hds-dropdown-list-item__text-content {
  color: var(--token-color-foreground-disabled);
}
.hds-dropdown-list-item--variant-checkbox .hds-dropdown-list-item__label,
.hds-dropdown-list-item--variant-radio .hds-dropdown-list-item__label {
  display: flex;
  flex-grow: 1;
  align-items: flex-start;
  color: var(--token-color-foreground-primary);
}
.hds-dropdown-list-item--variant-checkbox .hds-dropdown-list-item__icon,
.hds-dropdown-list-item--variant-radio .hds-dropdown-list-item__icon {
  margin-top: 2px;
  margin-right: 4px;
}

.hds-dropdown-list-item__count {
  margin-left: auto;
  padding-left: 8px;
  color: var(--token-color-foreground-faint);
  line-height: 20px;
}

.hds-dropdown-list-item--variant-checkmark .hds-badge,
.hds-dropdown-list-item--variant-checkbox .hds-badge,
.hds-dropdown-list-item--variant-radio .hds-badge {
  vertical-align: bottom;
}

/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */
.hds-flyout {
  z-index: 49;
  flex-direction: column;
  height: 100vh;
  max-height: 100vh;
  margin: 0;
  padding: 0;
  background: var(--token-color-surface-primary);
  border: none;
  box-shadow: 0 2px 3px 0 rgba(59, 61, 69, 0.2509803922), 0 12px 24px 0 rgba(59, 61, 69, 0.3490196078);
}
.hds-flyout[open] {
  position: fixed;
  display: flex;
}
.hds-flyout::backdrop {
  display: none;
}

.hds-flyout__overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 49;
  background: var(--token-color-palette-neutral-700);
  opacity: 0.5;
}

.hds-flyout__header {
  display: flex;
  flex: none;
  gap: 16px;
  align-items: flex-start;
  padding: 16px 24px;
  color: var(--token-color-foreground-strong);
}

.hds-flyout__icon {
  flex: none;
  align-self: center;
}

.hds-flyout__title {
  flex-grow: 1;
}

.hds-flyout__tagline {
  margin-bottom: 4px;
}

.hds-flyout__dismiss {
  align-self: center;
}

.hds-flyout__description {
  padding: 0 24px 16px;
}

.hds-flyout__body {
  flex: 1 1 auto;
  padding: 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-top: 1px solid var(--token-color-border-primary);
}

.hds-flyout__footer {
  flex: none;
  padding: 16px 24px;
  background: var(--token-color-surface-faint);
  border-top: 1px solid var(--token-color-border-primary);
}
.hds-flyout__footer .hds-button-set .hds-button--color-tertiary {
  margin-left: auto;
}

.hds-flyout--size-medium {
  width: min(480px, 100vw - 40px);
  max-width: calc(100vw - 40px);
}
.hds-flyout--size-medium[open] {
  margin-left: calc(100% - min(480px, 100vw - 40px));
}

.hds-flyout--size-large {
  width: min(720px, 100vw - 40px);
  max-width: calc(100vw - 40px);
}
.hds-flyout--size-large[open] {
  margin-left: calc(100% - min(720px, 100vw - 40px));
}

/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */
/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */
.hds-form-label {
  display: block;
  width: -moz-max-content;
  width: max-content;
  max-width: 100%;
  color: var(--token-form-label-color);
}
.hds-form-label .hds-badge {
  vertical-align: initial;
}

/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */
.hds-form-helper-text {
  display: block;
  color: var(--token-form-helper-text-color);
}

/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */
.hds-form-character-count {
  color: var(--token-form-helper-text-color);
}

/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */
.hds-form-error {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  color: var(--token-form-error-color);
}

.hds-form-error__icon {
  flex: none;
  width: var(--token-form-error-icon-size);
  height: var(--token-form-error-icon-size);
  margin: 2px 0 2px 0;
}

.hds-form-error__content {
  flex: 1 1 auto;
}

.hds-form-error__message {
  margin: 0;
}

/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */
.hds-form-field--layout-vertical {
  display: grid;
  justify-items: start;
  width: 100%;
}
.hds-form-field--layout-vertical .hds-form-field__label {
  width: -moz-fit-content;
  width: fit-content;
}
.hds-form-field--layout-vertical .hds-form-field__helper-text:not(:first-child) {
  margin-top: 4px;
}
.hds-form-field--layout-vertical .hds-form-field__helper-text + .hds-form-helper-text {
  margin-top: 2px;
}
.hds-form-field--layout-vertical .hds-form-field__control {
  display: flex;
  justify-self: stretch;
}
.hds-form-field--layout-vertical .hds-form-field__control:not(:first-child) {
  margin-top: 8px;
}
.hds-form-field--layout-vertical .hds-form-field__control:not(:last-child) {
  margin-bottom: 8px;
}
.hds-form-field--layout-vertical .hds-form-field__character-count {
  margin-bottom: 8px;
}

.hds-form-field--layout-flag {
  display: grid;
  grid-auto-flow: row;
  grid-template-areas: "control label" "control helper-text" "control error";
  grid-template-rows: auto auto auto;
  grid-template-columns: auto 1fr;
  justify-items: start;
}
.hds-form-field--layout-flag .hds-form-field__label {
  grid-area: label;
  width: -moz-fit-content;
  width: fit-content;
}
.hds-form-field--layout-flag .hds-form-field__helper-text {
  grid-area: helper-text;
  margin-top: 4px;
}
.hds-form-field--layout-flag .hds-form-field__control {
  display: flex;
  grid-area: control;
}
.hds-form-field--layout-flag .hds-form-field__control:not(:only-child) {
  margin-top: 2px;
  margin-right: 8px;
}
.hds-form-field--layout-flag .hds-form-field__error {
  grid-area: error;
  margin-top: 4px;
}

/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */
/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */
.hds-form-file-input {
  margin: -4px 0 -4px -4px;
  padding: 3px 0 3px 3px;
  color: var(--token-color-foreground-primary);
}
.hds-form-file-input:focus, .hds-form-file-input:focus-visible {
  outline: none;
}

.hds-form-file-input::file-selector-button {
  min-height: 36px;
  margin-right: 16px;
  padding: 7px 16px 7px 37px;
  color: var(--token-color-foreground-primary);
  font: inherit;
  background-color: var(--token-color-surface-faint);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3E%3Cg fill='%233b3d45'%3E%3Cpath d='M4.24 5.8a.75.75 0 001.06-.04l1.95-2.1v6.59a.75.75 0 001.5 0V3.66l1.95 2.1a.75.75 0 101.1-1.02l-3.25-3.5a.75.75 0 00-1.101.001L4.2 4.74a.75.75 0 00.04 1.06z'/%3E%3Cpath d='M1.75 9a.75.75 0 01.75.75v3c0 .414.336.75.75.75h9.5a.75.75 0 00.75-.75v-3a.75.75 0 011.5 0v3A2.25 2.25 0 0112.75 15h-9.5A2.25 2.25 0 011 12.75v-3A.75.75 0 011.75 9z'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 15px 50%;
  background-size: var(--token-form-text-input-background-image-size);
  border: 1px solid var(--token-color-border-strong);
  border-radius: 5px;
  box-shadow: var(--token-elevation-low-box-shadow);
  cursor: pointer;
}

.hds-form-file-input::file-selector-button:hover,
.hds-form-file-input.mock-hover::file-selector-button {
  color: var(--token-color-foreground-primary);
  background-color: var(--token-color-surface-primary);
  border-color: var(--token-color-border-strong);
}

.hds-form-file-input:focus-within::file-selector-button,
.hds-form-file-input.mock-focus::file-selector-button {
  color: var(--token-color-foreground-primary);
  background-color: var(--token-color-surface-faint);
  border-color: var(--token-color-focus-action-internal);
  outline: 3px solid var(--token-color-focus-action-external);
}

.hds-form-file-input:not(:focus, .mock-focus)::file-selector-button {
  border-color: var(--token-color-border-strong);
  outline: 0;
}

.hds-form-file-input::file-selector-button:active,
.hds-form-file-input.mock-active::file-selector-button {
  color: var(--token-color-foreground-primary);
  background-color: var(--token-color-surface-interactive-active);
  border-color: var(--token-color-border-strong);
  box-shadow: none;
}

.hds-form-file-input:disabled, .hds-form-file-input[disabled], .hds-form-file-input.mock-disabled, .hds-form-file-input:disabled:focus, .hds-form-file-input[disabled]:focus, .hds-form-file-input.mock-disabled:focus, .hds-form-file-input:disabled:hover, .hds-form-file-input[disabled]:hover, .hds-form-file-input.mock-disabled:hover {
  color: var(--token-color-foreground-disabled);
}
.hds-form-file-input:disabled::file-selector-button, .hds-form-file-input[disabled]::file-selector-button, .hds-form-file-input.mock-disabled::file-selector-button, .hds-form-file-input:disabled:focus::file-selector-button, .hds-form-file-input[disabled]:focus::file-selector-button, .hds-form-file-input.mock-disabled:focus::file-selector-button, .hds-form-file-input:disabled:hover::file-selector-button, .hds-form-file-input[disabled]:hover::file-selector-button, .hds-form-file-input.mock-disabled:hover::file-selector-button {
  color: var(--token-color-foreground-disabled);
  background-color: var(--token-color-surface-faint);
  border-color: var(--token-color-border-primary);
  box-shadow: none;
  cursor: not-allowed;
}
.hds-form-file-input:disabled::file-selector-button::before, .hds-form-file-input[disabled]::file-selector-button::before, .hds-form-file-input.mock-disabled::file-selector-button::before, .hds-form-file-input:disabled:focus::file-selector-button::before, .hds-form-file-input[disabled]:focus::file-selector-button::before, .hds-form-file-input.mock-disabled:focus::file-selector-button::before, .hds-form-file-input:disabled:hover::file-selector-button::before, .hds-form-file-input[disabled]:hover::file-selector-button::before, .hds-form-file-input.mock-disabled:hover::file-selector-button::before {
  border-color: transparent;
}
.hds-form-file-input:disabled::file-selector-button, .hds-form-file-input[disabled]::file-selector-button, .hds-form-file-input.mock-disabled::file-selector-button, .hds-form-file-input:disabled:focus::file-selector-button, .hds-form-file-input[disabled]:focus::file-selector-button, .hds-form-file-input.mock-disabled:focus::file-selector-button, .hds-form-file-input:disabled:hover::file-selector-button, .hds-form-file-input[disabled]:hover::file-selector-button, .hds-form-file-input.mock-disabled:hover::file-selector-button {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3E%3Cg fill='%238c909c'%3E%3Cpath d='M4.24 5.8a.75.75 0 001.06-.04l1.95-2.1v6.59a.75.75 0 001.5 0V3.66l1.95 2.1a.75.75 0 101.1-1.02l-3.25-3.5a.75.75 0 00-1.101.001L4.2 4.74a.75.75 0 00.04 1.06z'/%3E%3Cpath d='M1.75 9a.75.75 0 01.75.75v3c0 .414.336.75.75.75h9.5a.75.75 0 00.75-.75v-3a.75.75 0 011.5 0v3A2.25 2.25 0 0112.75 15h-9.5A2.25 2.25 0 011 12.75v-3A.75.75 0 011.75 9z'/%3E%3C/g%3E%3C/svg%3E");
}

/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */
.hds-form-legend {
  display: block;
  color: var(--token-form-legend-color);
}
.hds-form-legend .hds-badge {
  vertical-align: initial;
}

/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */
.hds-form-group {
  display: block;
  margin: 0;
  padding: 0;
  border: none;
}

.hds-form-group__legend {
  margin: 0 0 8px 0;
  padding: 0;
}

.hds-form-group__legend ~ .hds-form-group__control-fields-wrapper .hds-form-label {
  font-weight: var(--token-typography-font-weight-regular);
}

.hds-form-group--layout-vertical .hds-form-group__control-fields-wrapper {
  display: flex;
  flex-direction: column;
}
.hds-form-group--layout-vertical .hds-form-group__control-field + .hds-form-group__control-field {
  margin-top: 12px;
}

.hds-form-group--layout-horizontal .hds-form-group__control-fields-wrapper {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: -4px;
}
.hds-form-group--layout-horizontal .hds-form-group__control-field {
  margin-right: 16px;
  margin-bottom: 4px;
}

.hds-form-group__helper-text {
  margin-bottom: 8px;
}

.hds-form-group__error {
  margin-top: 8px;
}

/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */
.hds-form-indicator--optional {
  color: var(--token-form-indicator-optional-color);
}

/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */
.hds-form-checkbox {
  width: var(--token-form-checkbox-size);
  height: var(--token-form-checkbox-size);
  margin: 0;
  padding: 0;
  background-position: center center;
  background-size: var(--token-form-checkbox-background-image-size) var(--token-form-checkbox-background-image-size);
  border-style: solid;
  border-width: var(--token-form-checkbox-border-width);
  border-radius: var(--token-form-checkbox-border-radius);
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.hds-form-checkbox:not(:checked, :indeterminate) {
  background-color: var(--token-form-control-base-surface-color-default);
  border-color: var(--token-form-control-base-border-color-default);
  box-shadow: var(--token-elevation-inset-box-shadow);
}
.hds-form-checkbox:checked {
  background-color: var(--token-form-control-checked-surface-color-default);
  background-image: var(--token-form-checkbox-background-image-data-url);
  border-color: var(--token-form-control-checked-border-color-default);
}
.hds-form-checkbox:indeterminate {
  background-color: var(--token-form-control-checked-surface-color-default);
  background-image: var(--token-form-checkbox-background-image-data-url-indeterminate);
  border-color: var(--token-form-control-checked-border-color-default);
}
.hds-form-checkbox:hover:not(:checked, :indeterminate), .hds-form-checkbox.mock-hover:not(:checked, :indeterminate) {
  background-color: var(--token-form-control-base-surface-color-hover);
  border-color: var(--token-form-control-base-border-color-hover);
}
.hds-form-checkbox:hover:checked, .hds-form-checkbox.mock-hover:checked, .hds-form-checkbox:hover:indeterminate, .hds-form-checkbox.mock-hover:indeterminate {
  background-color: var(--token-form-control-checked-border-color-default);
  border-color: var(--token-form-control-checked-border-color-hover);
}
.hds-form-checkbox:focus, .hds-form-checkbox.mock-focus {
  outline: 3px solid var(--token-color-focus-action-external);
  outline-offset: 1px;
}
.hds-form-checkbox:disabled:not(:checked, :indeterminate) {
  background-color: var(--token-form-control-disabled-surface-color);
  border-color: var(--token-form-control-disabled-border-color);
  box-shadow: none;
  cursor: not-allowed;
}
.hds-form-checkbox:disabled:checked {
  background-color: var(--token-form-control-disabled-surface-color);
  background-image: var(--token-form-checkbox-background-image-data-url-disabled);
  border-color: var(--token-form-control-disabled-border-color);
  box-shadow: none;
  cursor: not-allowed;
}
.hds-form-checkbox:disabled:indeterminate {
  background-color: var(--token-form-control-disabled-surface-color);
  background-image: var(--token-form-checkbox-background-image-data-url-indeterminate-disabled);
  background-repeat: no-repeat;
  border-color: var(--token-form-control-disabled-border-color);
  box-shadow: none;
  cursor: not-allowed;
}

/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */
.hds-form-masked-input {
  position: relative;
  display: grid;
  grid-template-areas: "input copy-button";
  grid-template-columns: 1fr auto;
  width: 100%;
}
.hds-form-masked-input .hds-form-masked-input__control {
  grid-area: input;
  padding-right: calc(var(--token-form-control-padding) + 24px);
}

.hds-form-masked-input--is-masked .hds-form-masked-input__control {
  -webkit-text-security: disc;
}

.hds-form-masked-input--is-not-masked .hds-form-masked-input__control {
  -webkit-text-security: none;
}

.hds-form-masked-input__toggle-button {
  position: absolute;
  top: calc(var(--token-form-control-padding) - var(--token-form-control-border-width));
  right: calc(var(--token-form-control-padding) - var(--token-form-control-border-width));
  grid-area: input;
}

.hds-form-masked-input__copy-button {
  grid-area: copy-button;
  align-self: flex-start;
  margin-left: 8px;
}

/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */
.hds-form-radio {
  width: var(--token-form-radio-size);
  height: var(--token-form-radio-size);
  margin: 0;
  padding: 0;
  background-position: center center;
  background-size: var(--token-form-radio-background-image-size) var(--token-form-radio-background-image-size);
  border-style: solid;
  border-width: var(--token-form-radio-border-width);
  border-radius: 50%;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.hds-form-radio:not(:checked) {
  background-color: var(--token-form-control-base-surface-color-default);
  border-color: var(--token-form-control-base-border-color-default);
  box-shadow: var(--token-elevation-inset-box-shadow);
}
.hds-form-radio:checked {
  background-color: var(--token-form-control-checked-surface-color-default);
  background-image: var(--token-form-radio-background-image-data-url);
  border-color: var(--token-form-control-checked-border-color-default);
}
.hds-form-radio:hover:not(:checked), .hds-form-radio.mock-hover:not(:checked) {
  background-color: var(--token-form-control-base-surface-color-hover);
  border-color: var(--token-form-control-base-border-color-hover);
}
.hds-form-radio:hover:checked, .hds-form-radio.mock-hover:checked {
  background-color: var(--token-form-control-checked-border-color-default);
  border-color: var(--token-form-control-checked-border-color-hover);
}
.hds-form-radio:focus, .hds-form-radio.mock-focus {
  outline: 3px solid var(--token-color-focus-action-external);
  outline-offset: 1px;
}
.hds-form-radio:disabled:not(:checked) {
  background-color: var(--token-form-control-disabled-surface-color);
  border-color: var(--token-form-control-disabled-border-color);
  box-shadow: none;
  cursor: not-allowed;
}
.hds-form-radio:disabled:checked {
  background-color: var(--token-form-control-disabled-surface-color);
  background-image: var(--token-form-radio-background-image-data-url-disabled);
  border-color: var(--token-form-control-disabled-border-color);
  box-shadow: none;
  cursor: not-allowed;
}

/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */
.hds-form-group--radio-cards .hds-form-group__control-fields-wrapper {
  margin: calc(-1 * var(--token-form-radiocard-group-gap) / 2);
}
.hds-form-group--radio-cards .hds-form-group__legend {
  margin-bottom: 12px;
}
.hds-form-group--radio-cards .hds-form-radio-card {
  margin: calc(var(--token-form-radiocard-group-gap) / 2);
}
.hds-form-group--radio-cards .hds-form-radio-card--has-fluid-width {
  flex: 1 0 0;
}
.hds-form-group--radio-cards .hds-form-radio-card--has-fixed-width {
  flex: 1 0 100%;
}

.hds-form-radio-card {
  display: flex;
  flex-direction: column;
  background-color: var(--token-color-surface-primary);
  border: var(--token-form-radiocard-border-width) solid var(--token-color-border-primary);
  border-radius: var(--token-form-radiocard-border-radius);
  box-shadow: var(--token-elevation-mid-box-shadow);
  cursor: pointer;
}
.hds-form-radio-card .hds-form-radio-card__control {
  outline-color: transparent;
}
.hds-form-radio-card:hover, .hds-form-radio-card.mock-hover {
  box-shadow: var(--token-elevation-high-box-shadow);
  transition: var(--token-form-radiocard-transition-duration);
}
.hds-form-radio-card:focus-within, .hds-form-radio-card.mock-focus {
  border-color: var(--token-color-focus-action-internal);
  box-shadow: 0 0 0 3px var(--token-color-focus-action-external);
}
.hds-form-radio-card--checked, .hds-form-radio-card.mock-checked {
  border-color: var(--token-color-focus-action-internal);
}
.hds-form-radio-card--checked .hds-form-radio-card__control-wrapper, .hds-form-radio-card.mock-checked .hds-form-radio-card__control-wrapper {
  background-color: var(--token-color-surface-action);
  border-color: var(--token-color-border-action);
}
.hds-form-radio-card--disabled, .hds-form-radio-card.mock-disabled {
  background-color: var(--token-color-surface-interactive-disabled);
  border-color: var(--token-color-border-primary);
  box-shadow: none;
  cursor: not-allowed;
}
.hds-form-radio-card--disabled .hds-form-radio-card__control-wrapper, .hds-form-radio-card.mock-disabled .hds-form-radio-card__control-wrapper {
  background-color: var(--token-color-surface-interactive-disabled);
  border-color: var(--token-color-border-primary);
}

.hds-form-radio-card--align-left {
  text-align: left;
}

.hds-form-radio-card--align-center {
  text-align: center;
}
.hds-form-radio-card--align-center .flight-icon {
  margin: auto;
}

.hds-form-radio-card--control-bottom .hds-form-radio-card__control-wrapper {
  border-top-width: var(--token-form-radiocard-border-width);
  border-top-style: solid;
  border-bottom-right-radius: inherit;
  border-bottom-left-radius: inherit;
}

.hds-form-radio-card--control-left {
  flex-direction: row-reverse;
}
.hds-form-radio-card--control-left .hds-form-radio-card__control-wrapper {
  display: flex;
  align-items: center;
  border-right-width: var(--token-form-radiocard-border-width);
  border-right-style: solid;
  border-top-left-radius: inherit;
  border-bottom-left-radius: inherit;
}

.hds-form-radio-card__content {
  flex: 1;
  padding: var(--token-form-radiocard-content-padding);
}
.hds-form-radio-card__content .hds-badge {
  margin-bottom: 12px;
}

.hds-form-radio-card__label {
  display: block;
  margin: 8px 0;
  color: var(--token-form-label-color);
  overflow-wrap: break-word;
}
.hds-form-radio-card__label:first-child {
  margin-top: 0;
}

.hds-form-radio-card__description {
  display: block;
  color: var(--token-color-foreground-primary);
}

.hds-form-radio-card__control-wrapper {
  padding: var(--token-form-radiocard-control-padding);
  background-color: var(--token-color-surface-faint);
  border-color: var(--token-color-border-primary);
}

.hds-form-radio-card__control {
  display: block;
  margin: auto;
}

/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */
.hds-form-select {
  max-width: 100%;
  padding: var(--token-form-control-padding);
  padding-right: calc(var(--token-form-control-padding) + 24px);
  color: var(--token-form-control-base-foreground-value-color);
  background-color: var(--token-form-control-base-surface-color-default);
  background-image: var(--token-form-select-background-image-data-url);
  background-repeat: no-repeat;
  background-position: right var(--token-form-select-background-image-position-right-x) top var(--token-form-select-background-image-position-top-y);
  background-size: var(--token-form-select-background-image-size) var(--token-form-select-background-image-size);
  border: var(--token-form-control-border-width) solid var(--token-form-control-base-border-color-default);
  border-radius: var(--token-form-control-border-radius);
  box-shadow: var(--token-elevation-low-box-shadow);
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.hds-form-select:hover, .hds-form-select.mock-hover {
  border-color: var(--token-form-control-base-border-color-hover);
}
.hds-form-select:focus, .hds-form-select.mock-focus {
  border-color: var(--token-color-focus-action-internal);
  outline: 3px solid var(--token-color-focus-action-external);
  outline-offset: 0;
}
.hds-form-select:disabled {
  color: var(--token-form-control-disabled-foreground-color);
  background-color: var(--token-form-control-disabled-surface-color);
  background-image: var(--token-form-select-background-image-data-url-disabled);
  border-color: var(--token-form-control-disabled-border-color);
  box-shadow: none;
  cursor: not-allowed;
}
.hds-form-select.hds-form-select--is-invalid {
  border-color: var(--token-form-control-invalid-border-color-default);
}
.hds-form-select.hds-form-select--is-invalid:hover, .hds-form-select.hds-form-select--is-invalid.mock-hover {
  border-color: var(--token-form-control-invalid-border-color-hover);
}
.hds-form-select.hds-form-select--is-invalid:focus, .hds-form-select.hds-form-select--is-invalid.mock-focus {
  border-color: var(--token-color-focus-critical-internal);
  outline-color: var(--token-color-focus-critical-external);
}

.hds-form-select[multiple], .hds-form-select[size] {
  background: none;
}
.hds-form-select[multiple] option, .hds-form-select[size] option {
  margin: 2px auto;
  border-radius: 3px;
}
.hds-form-select[multiple] option:hover, .hds-form-select[size] option:hover {
  color: var(--token-color-foreground-action);
}
.hds-form-select[multiple] option:disabled, .hds-form-select[size] option:disabled {
  color: var(--token-color-foreground-disabled);
}
.hds-form-select[multiple] option:checked, .hds-form-select[size] option:checked {
  color: var(--token-color-foreground-high-contrast);
  background: var(--token-color-palette-blue-200);
}
.hds-form-select[multiple] optgroup, .hds-form-select[size] optgroup {
  color: var(--token-color-foreground-strong);
  font-weight: var(--token-typography-font-weight-semibold);
  font-style: normal;
}

/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */
.hds-form-text-input {
  width: 100%;
  max-width: 100%;
  padding: var(--token-form-control-padding);
  color: var(--token-form-control-base-foreground-value-color);
  background-color: var(--token-form-control-base-surface-color-default);
  border: var(--token-form-control-border-width) solid var(--token-form-control-base-border-color-default);
  border-radius: var(--token-form-control-border-radius);
  box-shadow: var(--token-elevation-inset-box-shadow);
}
.hds-form-text-input ::-moz-placeholder {
  color: var(--token-form-control-base-foreground-placeholder-color);
}
.hds-form-text-input ::placeholder {
  color: var(--token-form-control-base-foreground-placeholder-color);
}
.hds-form-text-input:hover, .hds-form-text-input.mock-hover {
  border-color: var(--token-form-control-base-border-color-hover);
}
.hds-form-text-input:focus, .hds-form-text-input.mock-focus {
  border-color: var(--token-color-focus-action-internal);
  outline: 3px solid var(--token-color-focus-action-external);
  outline-offset: 0;
}
.hds-form-text-input:-moz-read-only {
  color: var(--token-form-control-readonly-foreground-color);
  background-color: var(--token-form-control-readonly-surface-color);
  border-color: var(--token-form-control-readonly-border-color);
  box-shadow: none;
}
.hds-form-text-input:read-only {
  color: var(--token-form-control-readonly-foreground-color);
  background-color: var(--token-form-control-readonly-surface-color);
  border-color: var(--token-form-control-readonly-border-color);
  box-shadow: none;
}
.hds-form-text-input:disabled {
  color: var(--token-form-control-disabled-foreground-color);
  background-color: var(--token-form-control-disabled-surface-color);
  border-color: var(--token-form-control-disabled-border-color);
  box-shadow: none;
  cursor: not-allowed;
}
.hds-form-text-input.hds-form-text-input--is-invalid {
  border-color: var(--token-form-control-invalid-border-color-default);
}
.hds-form-text-input.hds-form-text-input--is-invalid:hover, .hds-form-text-input.hds-form-text-input--is-invalid.mock-hover {
  border-color: var(--token-form-control-invalid-border-color-hover);
}
.hds-form-text-input.hds-form-text-input--is-invalid:focus, .hds-form-text-input.hds-form-text-input--is-invalid.mock-focus {
  border-color: var(--token-color-focus-critical-internal);
  outline-color: var(--token-color-focus-critical-external);
}

.hds-form-text-input__wrapper {
  position: relative;
  width: 100%;
}

.hds-form-text-input--has-visibility-toggle {
  padding-right: calc(var(--token-form-control-padding) + 24px);
}

.hds-form-text-input__visibility-toggle {
  position: absolute;
  top: calc(var(--token-form-control-padding) - var(--token-form-control-border-width));
  right: calc(var(--token-form-control-padding) - var(--token-form-control-border-width));
}

.hds-form-text-input[type=date], .hds-form-text-input[type=time], .hds-form-text-input[type=datetime-local] {
  width: initial;
}
.hds-form-text-input[type=date]:disabled::-webkit-calendar-picker-indicator, .hds-form-text-input[type=time]:disabled::-webkit-calendar-picker-indicator, .hds-form-text-input[type=datetime-local]:disabled::-webkit-calendar-picker-indicator {
  visibility: visible;
  opacity: 0.5;
}
.hds-form-text-input[type=date][readonly]::-webkit-calendar-picker-indicator, .hds-form-text-input[type=time][readonly]::-webkit-calendar-picker-indicator, .hds-form-text-input[type=datetime-local][readonly]::-webkit-calendar-picker-indicator {
  visibility: visible;
}
.hds-form-text-input[type=date]::-webkit-calendar-picker-indicator, .hds-form-text-input[type=datetime-local]::-webkit-calendar-picker-indicator {
  background-image: var(--token-form-text-input-background-image-data-url-date);
  background-position: center center;
  background-size: var(--token-form-text-input-background-image-size);
}
.hds-form-text-input[type=time]::-webkit-calendar-picker-indicator {
  background-image: var(--token-form-text-input-background-image-data-url-time);
  background-position: center center;
  background-size: var(--token-form-text-input-background-image-size);
}
.hds-form-text-input[type=search] {
  padding-left: calc(var(--token-form-control-padding) + 24px);
  background-image: var(--token-form-text-input-background-image-data-url-search);
  background-repeat: no-repeat;
  background-position: var(--token-form-text-input-background-image-position-x) 50%;
  background-size: var(--token-form-text-input-background-image-size);
}
.hds-form-text-input[type=search]::-webkit-search-cancel-button {
  width: var(--token-form-text-input-background-image-size);
  height: var(--token-form-text-input-background-image-size);
  background-image: var(--token-form-text-input-background-image-data-url-search-cancel);
  background-position: center center;
  background-size: var(--token-form-text-input-background-image-size);
  -webkit-appearance: none;
}
.hds-form-text-input[type=search].hds-form-text-input--is-loading {
  background-image: var(--token-form-text-input-background-image-data-url-search-loading);
}

/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */
.hds-form-textarea {
  width: 100%;
  max-width: 100%;
  min-height: 36px;
  padding: var(--token-form-control-padding);
  color: var(--token-form-control-base-foreground-value-color);
  background-color: var(--token-form-control-base-surface-color-default);
  border: var(--token-form-control-border-width) solid var(--token-form-control-base-border-color-default);
  border-radius: var(--token-form-control-border-radius);
  box-shadow: var(--token-elevation-inset-box-shadow);
  resize: vertical;
}
.hds-form-textarea ::-moz-placeholder {
  color: var(--token-form-control-base-foreground-placeholder-color);
}
.hds-form-textarea ::placeholder {
  color: var(--token-form-control-base-foreground-placeholder-color);
}
.hds-form-textarea:hover, .hds-form-textarea.mock-hover {
  border-color: var(--token-form-control-base-border-color-hover);
}
.hds-form-textarea:focus, .hds-form-textarea.mock-focus {
  border-color: var(--token-color-focus-action-internal);
  outline: 3px solid var(--token-color-focus-action-external);
  outline-offset: 0;
}
.hds-form-textarea:-moz-read-only {
  color: var(--token-form-control-readonly-foreground-color);
  background-color: var(--token-form-control-readonly-surface-color);
  border-color: var(--token-form-control-readonly-border-color);
  box-shadow: none;
}
.hds-form-textarea:read-only {
  color: var(--token-form-control-readonly-foreground-color);
  background-color: var(--token-form-control-readonly-surface-color);
  border-color: var(--token-form-control-readonly-border-color);
  box-shadow: none;
}
.hds-form-textarea:disabled {
  color: var(--token-form-control-disabled-foreground-color);
  background-color: var(--token-form-control-disabled-surface-color);
  border-color: var(--token-form-control-disabled-border-color);
  box-shadow: none;
  cursor: not-allowed;
}
.hds-form-textarea.hds-form-textarea--is-invalid {
  border-color: var(--token-form-control-invalid-border-color-default);
}
.hds-form-textarea.hds-form-textarea--is-invalid:hover, .hds-form-textarea.hds-form-textarea--is-invalid.mock-hover {
  border-color: var(--token-form-control-invalid-border-color-hover);
}
.hds-form-textarea.hds-form-textarea--is-invalid:focus, .hds-form-textarea.hds-form-textarea--is-invalid.mock-focus {
  border-color: var(--token-color-focus-critical-internal);
  outline-color: var(--token-color-focus-critical-external);
}

/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */
.hds-form-toggle {
  position: relative;
  display: inline-block;
  isolation: isolate;
}

.hds-form-toggle__control {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  display: block;
  height: 100%;
  margin: 0;
  padding: 0;
  color: transparent;
  background-color: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  opacity: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.hds-form-toggle__control:disabled {
  cursor: not-allowed;
}

.hds-form-toggle__facade {
  position: relative;
  display: block;
  width: var(--token-form-toggle-width);
  height: var(--token-form-toggle-height);
  background-image: var(--token-form-toggle-background-image-data-url);
  background-repeat: no-repeat;
  background-position: var(--token-form-toggle-background-image-position-x) 50%;
  background-size: var(--token-form-toggle-background-image-size) var(--token-form-toggle-background-image-size);
  border: var(--token-form-radio-border-width) solid var(--border-color);
  border-radius: calc(var(--token-form-toggle-height) / 2);
}
@media (prefers-reduced-motion: no-preference) {
  .hds-form-toggle__facade {
    transition-timing-function: var(--token-form-toggle-transition-timing-function);
    transition-duration: var(--token-form-toggle-transition-duration);
    transition-property: all;
  }
}
.hds-form-toggle__facade::after {
  position: absolute;
  top: calc(var(--token-form-radio-border-width) * -1);
  left: calc(var(--token-form-radio-border-width) * -1);
  width: var(--token-form-toggle-thumb-size);
  height: var(--token-form-toggle-thumb-size);
  background-color: var(--token-form-control-base-surface-color-default);
  border: var(--token-form-radio-border-width) solid var(--border-color);
  border-radius: 50%;
  transform: translate3d(0, 0, 0);
  content: "";
}
@media (prefers-reduced-motion: no-preference) {
  .hds-form-toggle__facade::after {
    transition-timing-function: var(--token-form-toggle-transition-timing-function);
    transition-duration: var(--token-form-toggle-transition-duration);
    transition-property: all;
  }
}
.hds-form-toggle__facade::before {
  position: absolute;
  top: -5px;
  right: -5px;
  bottom: -5px;
  left: -5px;
  margin: auto;
  border-width: 3px;
  border-radius: calc(var(--token-form-toggle-height) / 2 + 3px + 1px);
  content: "";
}
:not(:checked) + .hds-form-toggle__facade {
  --border-color: var(--token-form-control-base-border-color-default);
  background-color: var(--token-form-toggle-base-surface-color-default);
}
:checked + .hds-form-toggle__facade {
  --border-color: var(--token-form-control-checked-border-color-default);
  background-color: var(--token-form-control-checked-surface-color-default);
}
:checked + .hds-form-toggle__facade::after {
  transform: translate3d(calc(var(--token-form-toggle-width) - var(--token-form-toggle-thumb-size)), 0, 0);
}
:hover:not(:checked) + .hds-form-toggle__facade, .mock-hover:not(:checked) + .hds-form-toggle__facade {
  --border-color: var(--token-form-control-base-border-color-hover);
}
:hover:checked + .hds-form-toggle__facade, .mock-hover:checked + .hds-form-toggle__facade {
  --border-color: var(--token-form-control-checked-border-color-hover);
  background-color: var(--token-form-control-checked-border-color-default);
}
:focus + .hds-form-toggle__facade::before, .mock-focus + .hds-form-toggle__facade::before {
  border-color: var(--token-color-focus-action-external);
  border-style: solid;
}
:disabled:not(:checked) + .hds-form-toggle__facade, :disabled:checked + .hds-form-toggle__facade {
  --border-color: var(--token-form-control-disabled-border-color);
  background-color: var(--token-form-control-disabled-surface-color);
  background-image: var(--token-form-toggle-background-image-data-url-disabled);
}

/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */
.hds-form-visibility-toggle {
  width: 24px;
  height: 24px;
  padding: 2px;
  color: var(--token-color-foreground-primary);
  background-color: transparent;
  border-color: transparent;
  cursor: pointer;
}

/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */
.hds-icon-tile {
  position: relative;
  display: flex;
  border: 1px solid transparent;
  border-radius: 4px;
  box-shadow: 0 1px 1px rgba(101, 106, 118, 0.05);
}

.hds-icon-tile__icon,
.hds-icon-tile__logo {
  display: flex;
  margin: auto;
}

.hds-icon-tile__extra {
  position: absolute;
  right: -6px;
  bottom: -6px;
  display: flex;
  box-sizing: content-box;
  background-color: var(--token-color-surface-primary);
  border: 1px solid var(--token-color-border-primary);
  box-shadow: 0 1px 1px rgba(101, 106, 118, 0.05);
}

.hds-icon-tile__extra-icon {
  display: flex;
  margin: auto;
  color: var(--token-color-foreground-strong);
}

.hds-icon-tile--size-small {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 5px;
}
.hds-icon-tile--size-small .hds-icon-tile__icon {
  width: 1rem;
  height: 1rem;
}
.hds-icon-tile--size-small .hds-icon-tile__logo {
  width: 1.125rem;
  height: 1.125rem;
}
.hds-icon-tile--size-small .hds-icon-tile__extra {
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 4px;
}
.hds-icon-tile--size-small .hds-icon-tile__extra-icon {
  width: 0.75rem;
  height: 0.75rem;
}

.hds-icon-tile--size-medium {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 6px;
}
.hds-icon-tile--size-medium .hds-icon-tile__icon {
  width: 1.5rem;
  height: 1.5rem;
}
.hds-icon-tile--size-medium .hds-icon-tile__logo {
  width: 1.75rem;
  height: 1.75rem;
}
.hds-icon-tile--size-medium .hds-icon-tile__extra {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 5px;
}
.hds-icon-tile--size-medium .hds-icon-tile__extra-icon {
  width: 1rem;
  height: 1rem;
}

.hds-icon-tile--size-large {
  width: 3rem;
  height: 3rem;
  border-radius: 6px;
}
.hds-icon-tile--size-large .hds-icon-tile__icon {
  width: 1.5rem;
  height: 1.5rem;
}
.hds-icon-tile--size-large .hds-icon-tile__logo {
  width: 2rem;
  height: 2rem;
}
.hds-icon-tile--size-large .hds-icon-tile__extra {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 5px;
}
.hds-icon-tile--size-large .hds-icon-tile__extra-icon {
  width: 1rem;
  height: 1rem;
}

.hds-icon-tile--logo {
  background-color: var(--token-color-surface-primary);
  border-color: var(--token-color-border-primary);
}

.hds-icon-tile--icon.hds-icon-tile--color-neutral {
  color: var(--token-color-foreground-faint);
  background-color: var(--token-color-surface-faint);
  border-color: var(--token-color-border-primary);
}
.hds-icon-tile--icon.hds-icon-tile--color-boundary {
  color: var(--token-color-boundary-foreground);
  background: linear-gradient(135deg, var(--token-color-boundary-gradient-faint-start) 0%, var(--token-color-boundary-gradient-faint-stop) 100%);
  border-color: var(--token-color-boundary-border);
}
.hds-icon-tile--icon.hds-icon-tile--color-consul {
  color: var(--token-color-consul-foreground);
  background: linear-gradient(135deg, var(--token-color-consul-gradient-faint-start) 0%, var(--token-color-consul-gradient-faint-stop) 100%);
  border-color: var(--token-color-consul-border);
}
.hds-icon-tile--icon.hds-icon-tile--color-hcp {
  color: var(--token-color-palette-hcp-brand);
  background-color: var(--token-color-surface-faint);
  border-color: var(--token-color-border-primary);
}
.hds-icon-tile--icon.hds-icon-tile--color-nomad {
  color: var(--token-color-nomad-foreground);
  background: linear-gradient(135deg, var(--token-color-nomad-gradient-faint-start) 0%, var(--token-color-nomad-gradient-faint-stop) 100%);
  border-color: var(--token-color-nomad-border);
}
.hds-icon-tile--icon.hds-icon-tile--color-packer {
  color: var(--token-color-packer-foreground);
  background: linear-gradient(135deg, var(--token-color-packer-gradient-faint-start) 0%, var(--token-color-packer-gradient-faint-stop) 100%);
  border-color: var(--token-color-packer-border);
}
.hds-icon-tile--icon.hds-icon-tile--color-terraform {
  color: var(--token-color-terraform-foreground);
  background: linear-gradient(135deg, var(--token-color-terraform-gradient-faint-start) 0%, var(--token-color-terraform-gradient-faint-stop) 100%);
  border-color: var(--token-color-terraform-border);
}
.hds-icon-tile--icon.hds-icon-tile--color-vagrant {
  color: var(--token-color-vagrant-foreground);
  background: linear-gradient(135deg, var(--token-color-vagrant-gradient-faint-start) 0%, var(--token-color-vagrant-gradient-faint-stop) 100%);
  border-color: var(--token-color-vagrant-border);
}
.hds-icon-tile--icon.hds-icon-tile--color-vault {
  color: var(--token-color-vault-foreground);
  background: linear-gradient(135deg, var(--token-color-vault-gradient-faint-start) 0%, var(--token-color-vault-gradient-faint-stop) 100%);
  border-color: var(--token-color-vault-border);
}
.hds-icon-tile--icon.hds-icon-tile--color-vault-secrets {
  color: var(--token-color-vault-secrets-foreground);
  background: linear-gradient(135deg, var(--token-color-vault-secrets-gradient-faint-start) 0%, var(--token-color-vault-secrets-gradient-faint-stop) 100%);
  border-color: var(--token-color-vault-secrets-border);
}
.hds-icon-tile--icon.hds-icon-tile--color-vault-radar {
  color: var(--token-color-vault-radar-foreground);
  background: linear-gradient(135deg, var(--token-color-vault-radar-gradient-faint-start) 0%, var(--token-color-vault-radar-gradient-faint-stop) 100%);
  border-color: var(--token-color-vault-radar-border);
}
.hds-icon-tile--icon.hds-icon-tile--color-waypoint {
  color: var(--token-color-waypoint-foreground);
  background: linear-gradient(135deg, var(--token-color-waypoint-gradient-faint-start) 0%, var(--token-color-waypoint-gradient-faint-stop) 100%);
  border-color: var(--token-color-waypoint-border);
}

/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */
/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */
.hds-link-inline {
  border-radius: 2px;
}
.hds-link-inline:focus, .hds-link-inline.mock-focus, .hds-link-inline:focus-visible {
  text-decoration: none;
  outline: 2px solid var(--token-color-focus-action-internal);
  outline-offset: 1px;
}

.hds-link-inline__icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: text-bottom;
}
.hds-link-inline--icon-leading > .hds-link-inline__icon {
  margin-right: 0.25em;
}
.hds-link-inline--icon-trailing > .hds-link-inline__icon {
  margin-left: 0.25em;
}

.hds-link-inline--color-primary {
  color: var(--token-color-foreground-action);
}
.hds-link-inline--color-primary:hover, .hds-link-inline--color-primary.mock-hover {
  color: var(--token-color-foreground-action-hover);
}
.hds-link-inline--color-primary:active, .hds-link-inline--color-primary.mock-active {
  color: var(--token-color-foreground-action-active);
}

.hds-link-inline--color-secondary {
  color: var(--token-color-foreground-strong);
}
.hds-link-inline--color-secondary:hover, .hds-link-inline--color-secondary.mock-hover {
  color: var(--token-color-foreground-primary);
}
.hds-link-inline--color-secondary:active, .hds-link-inline--color-secondary.mock-active {
  color: var(--token-color-foreground-faint);
}

/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */
.hds-link-standalone {
  display: flex;
  gap: 0.375rem;
  align-items: center;
  justify-content: center;
  width: -moz-fit-content;
  width: fit-content;
  padding-top: 4px;
  padding-bottom: 4px;
  font-weight: var(--token-typography-font-weight-regular);
  font-family: var(--token-typography-font-stack-text);
  background-color: transparent;
  border: 1px solid transparent;
  text-decoration-color: transparent;
}

.hds-link-standalone__icon {
  display: block;
}

.hds-link-standalone__text {
  display: block;
  flex: 1 0 0;
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.25s ease-in;
}

.hds-link-standalone--size-small .hds-link-standalone__icon {
  width: 0.75rem;
  height: 0.75rem;
}
.hds-link-standalone--size-small .hds-link-standalone__text {
  font-size: 0.8125rem;
  line-height: 1.231;
}

.hds-link-standalone--size-medium .hds-link-standalone__icon {
  width: 1rem;
  height: 1rem;
}
.hds-link-standalone--size-medium .hds-link-standalone__text {
  font-size: 0.875rem;
  line-height: 1.143;
}

.hds-link-standalone--size-large .hds-link-standalone__icon {
  width: 1.5rem;
  height: 1.5rem;
}
.hds-link-standalone--size-large .hds-link-standalone__text {
  font-size: 1rem;
  line-height: 1.5;
}

.hds-link-standalone--color-primary {
  color: var(--token-color-foreground-action);
}
.hds-link-standalone--color-primary:hover, .hds-link-standalone--color-primary.mock-hover {
  color: var(--token-color-foreground-action-hover);
}
.hds-link-standalone--color-primary:hover .hds-link-standalone__text, .hds-link-standalone--color-primary.mock-hover .hds-link-standalone__text {
  text-decoration-color: #4e81e8;
}
.hds-link-standalone--color-primary:active, .hds-link-standalone--color-primary.mock-active {
  color: var(--token-color-foreground-action-active);
}
.hds-link-standalone--color-primary:active .hds-link-standalone__text, .hds-link-standalone--color-primary.mock-active .hds-link-standalone__text {
  text-decoration-color: #396ed6;
}
.hds-link-standalone--color-primary:active::before, .hds-link-standalone--color-primary.mock-active::before {
  background-color: var(--token-color-surface-action);
}

.hds-link-standalone--color-secondary {
  color: var(--token-color-foreground-strong);
}
.hds-link-standalone--color-secondary:hover .hds-link-standalone__text, .hds-link-standalone--color-secondary.mock-hover .hds-link-standalone__text {
  text-decoration-color: #4d4d4f;
}
.hds-link-standalone--color-secondary:active, .hds-link-standalone--color-secondary.mock-active {
  color: var(--token-color-foreground-primary);
}
.hds-link-standalone--color-secondary:active .hds-link-standalone__text, .hds-link-standalone--color-secondary.mock-active .hds-link-standalone__text {
  text-decoration-color: #6e7075;
}
.hds-link-standalone--color-secondary:active::before, .hds-link-standalone--color-secondary.mock-active::before {
  background-color: var(--token-color-surface-interactive-active);
}

.hds-link-standalone {
  position: relative;
  outline-style: solid;
  outline-color: transparent;
  isolation: isolate;
}
.hds-link-standalone::before {
  position: absolute;
  top: 0;
  right: -5px;
  bottom: 0;
  left: -5px;
  z-index: -1;
  border-radius: 5px;
  content: "";
}
.hds-link-standalone:focus::before, .hds-link-standalone.mock-focus::before {
  box-shadow: var(--token-focus-ring-action-box-shadow);
}
.hds-link-standalone:focus:not(:focus-visible)::before {
  box-shadow: none;
}
.hds-link-standalone:focus-visible::before {
  box-shadow: var(--token-focus-ring-action-box-shadow);
}
.hds-link-standalone:focus:active::before, .hds-link-standalone.mock-focus.mock-active::before {
  box-shadow: none;
}
.hds-link-standalone.hds-link-standalone--icon-position-leading::before {
  right: -7px;
}
.hds-link-standalone.hds-link-standalone--icon-position-trailing::before {
  left: -7px;
}

/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */
.hds-menu-primitive {
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
}

/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */
.hds-modal {
  z-index: 50;
  flex-direction: column;
  padding: 0;
  background: var(--token-color-surface-primary);
  border: none;
  border-radius: 8px;
  box-shadow: var(--token-surface-overlay-box-shadow);
}
.hds-modal[open] {
  position: fixed;
  display: flex;
}
.hds-modal::backdrop {
  display: none;
}

.hds-modal__overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 50;
  background: var(--token-color-palette-neutral-700);
  opacity: 0.5;
}

.hds-modal__header {
  display: flex;
  flex: none;
  gap: 16px;
  align-items: flex-start;
  padding: 16px 24px;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}

.hds-modal__icon {
  flex: none;
  align-self: center;
}

.hds-modal__title {
  flex-grow: 1;
}

.hds-modal__tagline {
  margin-bottom: 4px;
}

.hds-modal__dismiss {
  align-self: center;
}

.hds-modal__body {
  flex: 1 1 auto;
  padding: 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.hds-modal__footer {
  flex: none;
  padding: 16px 24px;
  background: var(--token-color-surface-faint);
  border-top: 1px solid var(--token-color-border-primary);
  border-bottom-right-radius: inherit;
  border-bottom-left-radius: inherit;
}
.hds-modal__footer .hds-button-set .hds-button--color-tertiary {
  margin-left: auto;
}

.hds-modal--size-small {
  width: min(400px, 95vw);
}

.hds-modal--size-medium {
  width: min(600px, 95vw);
}

.hds-modal--size-large {
  width: min(800px, 95vw);
}

.hds-modal--color-neutral .hds-modal__header {
  color: var(--token-color-foreground-strong);
  background: var(--token-color-surface-faint);
  border-bottom: 1px solid var(--token-color-border-primary);
}
.hds-modal--color-neutral .hds-modal__tagline {
  color: var(--token-color-foreground-faint);
}

.hds-modal--color-warning .hds-modal__header {
  color: var(--token-color-foreground-warning-on-surface);
  background: var(--token-color-surface-warning);
  border-bottom: 1px solid var(--token-color-border-warning);
}
.hds-modal--color-warning .hds-modal__tagline {
  color: var(--token-color-foreground-warning-on-surface);
}

.hds-modal--color-critical .hds-modal__header {
  color: var(--token-color-foreground-critical-on-surface);
  background: var(--token-color-surface-critical);
  border-bottom: 1px solid var(--token-color-border-critical);
}
.hds-modal--color-critical .hds-modal__tagline {
  color: var(--token-color-foreground-critical-on-surface);
}

/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */
.hds-page-header {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  container-type: inline-size;
}

.hds-page-header__body {
  display: flex;
  flex-direction: column;
  gap: 8px 16px;
}
.hds-page-header__body .hds-icon-tile {
  flex-shrink: 0;
}
@container (min-width: 400px) {
  .hds-page-header__body {
    flex-direction: row;
  }
}

.hds-page-header__main {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 16px;
  align-items: start;
  justify-content: start;
}
@container (min-width: 768px) {
  .hds-page-header__main {
    flex-direction: row;
    justify-content: space-between;
    min-width: 0;
  }
}

.hds-page-header__content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
}

.hds-page-header__title-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
}

.hds-page-header__title {
  max-width: 100%;
  overflow-wrap: break-word;
}

.hds-page-header__badges-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hds-page-header__metadata {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hds-page-header__subtitle,
.hds-page-header__description {
  overflow-wrap: break-word;
}

.hds-page-header__actions {
  display: flex;
  flex-direction: row;
  flex-shrink: 0;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */
.hds-pagination {
  display: grid;
  grid-template-areas: "info nav selector";
  grid-template-rows: auto;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin: 0 auto;
}
@media screen and (max-width: 1000px) {
  .hds-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
}
.hds-pagination .hds-pagination-info {
  grid-area: info;
  justify-self: flex-start;
  margin-right: var(--token-pagination-child-spacing-horizontal);
}
@media screen and (max-width: 1000px) {
  .hds-pagination .hds-pagination-info {
    margin-top: var(--token-pagination-child-spacing-vertical);
    margin-left: var(--token-pagination-child-spacing-horizontal);
  }
}
.hds-pagination .hds-pagination-nav {
  grid-area: nav;
}
@media screen and (max-width: 1000px) {
  .hds-pagination .hds-pagination-nav {
    justify-content: center;
    order: -1;
    width: 100%;
  }
}
.hds-pagination .hds-pagination-size-selector {
  grid-area: selector;
  justify-self: flex-end;
  margin-left: var(--token-pagination-child-spacing-horizontal);
}
@media screen and (max-width: 1000px) {
  .hds-pagination .hds-pagination-size-selector {
    margin-top: var(--token-pagination-child-spacing-vertical);
    margin-right: var(--token-pagination-child-spacing-horizontal);
  }
}

.hds-pagination-info {
  white-space: nowrap;
}

.hds-pagination-nav {
  display: flex;
}

.hds-pagination-nav__page-list {
  display: flex;
  margin: 0;
  padding: 0;
}

.hds-pagination-nav__page-item {
  list-style-type: none;
}

.hds-pagination-nav__control {
  display: flex;
  align-items: center;
  height: var(--token-pagination-nav-control-height);
  padding: 0 calc(var(--token-pagination-nav-control-padding-horizontal) - 1px);
  color: var(--token-color-foreground-primary);
  text-decoration: none;
  background-color: transparent;
  border: 1px solid transparent;
  position: relative;
  outline-style: solid;
  outline-color: transparent;
  isolation: isolate;
}
.hds-pagination-nav__control::before {
  position: absolute;
  top: var(--token-pagination-nav-control-focus-inset);
  right: var(--token-pagination-nav-control-focus-inset);
  bottom: var(--token-pagination-nav-control-focus-inset);
  left: var(--token-pagination-nav-control-focus-inset);
  z-index: -1;
  border-radius: 5px;
  content: "";
}
.hds-pagination-nav__control:focus::before, .hds-pagination-nav__control.mock-focus::before {
  box-shadow: var(--token-focus-ring-action-box-shadow);
}
.hds-pagination-nav__control:focus:not(:focus-visible)::before {
  box-shadow: none;
}
.hds-pagination-nav__control:focus-visible::before {
  box-shadow: var(--token-focus-ring-action-box-shadow);
}
.hds-pagination-nav__control:focus:active::before, .hds-pagination-nav__control.mock-focus.mock-active::before {
  box-shadow: none;
}
.hds-pagination-nav__control:hover, .hds-pagination-nav__control.mock-hover {
  color: var(--token-color-foreground-action-hover);
}
.hds-pagination-nav__control:active, .hds-pagination-nav__control.mock-active {
  color: var(--token-color-foreground-action-active);
}

.hds-pagination-nav__arrow {
  gap: var(--token-pagination-nav-control-icon-spacing);
}
.hds-pagination-nav__arrow:disabled, .hds-pagination-nav__arrow.mock-disabled {
  color: var(--token-color-foreground-disabled);
  cursor: not-allowed;
}

.hds-pagination-nav__arrow--direction-prev {
  flex-direction: row;
  justify-content: flex-start;
}

.hds-pagination-nav__arrow--direction-next {
  flex-direction: row-reverse;
  justify-content: flex-end;
}

.hds-pagination-nav__number--is-selected {
  position: relative;
  color: var(--token-color-foreground-action);
}
.hds-pagination-nav__number--is-selected:hover {
  color: var(--token-color-foreground-action-hover);
}
.hds-pagination-nav__number--is-selected:active {
  color: var(--token-color-foreground-action-active);
}
.hds-pagination-nav__number--is-selected::after {
  position: absolute;
  right: calc(var(--token-pagination-nav-indicator-spacing) - 1px);
  bottom: -1px;
  left: calc(var(--token-pagination-nav-indicator-spacing) - 1px);
  height: var(--token-pagination-nav-indicator-height);
  margin: 0 auto;
  background-color: currentColor;
  border-radius: 2px;
  content: "";
}

.hds-pagination-nav__ellipsis {
  display: flex;
  align-items: center;
  height: var(--token-pagination-nav-control-height);
  padding: 0 var(--token-pagination-nav-control-padding-horizontal);
  color: var(--token-color-foreground-faint);
}

.hds-pagination-size-selector {
  display: flex;
  align-items: center;
}
.hds-pagination-size-selector > label {
  white-space: nowrap;
}
.hds-pagination-size-selector > select {
  height: 28px;
  margin-left: 12px;
  padding: 0 24px 0 8px;
  font-size: var(--token-typography-body-100-font-size);
  font-family: var(--token-typography-body-100-font-family);
  line-height: var(--token-typography-body-100-line-height);
  background-position: center right 5px;
}

/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */
.hds-reveal {
  width: -moz-fit-content;
  width: fit-content;
}

.hds-reveal__toggle-button {
  min-height: 1.75rem;
  padding: 0.313rem 0.313rem 0.313rem 0.188rem;
}
@media (prefers-reduced-motion: no-preference) {
  .hds-reveal__toggle-button .flight-icon-chevron-down {
    transition: transform 0.3s;
  }
}

.hds-reveal__toggle-button--is-open .flight-icon-chevron-down {
  transform: rotate(-180deg);
}

.hds-reveal__content {
  margin-top: 4px;
}

/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */
.hds-segmented-group {
  display: inline-flex;
}
.hds-segmented-group > .hds-button:first-child:not(:only-child),
.hds-segmented-group > .hds-dropdown:first-child:not(:only-child),
.hds-segmented-group > .hds-form-select:first-child:not(:only-child),
.hds-segmented-group > .hds-form-text-input:first-child:not(:only-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.hds-segmented-group > .hds-button:first-child:not(:only-child)::before,
.hds-segmented-group > .hds-button:first-child:not(:only-child) .hds-dropdown-toggle-button,
.hds-segmented-group > .hds-button:first-child:not(:only-child) .hds-dropdown-toggle-button::before,
.hds-segmented-group > .hds-dropdown:first-child:not(:only-child)::before,
.hds-segmented-group > .hds-dropdown:first-child:not(:only-child) .hds-dropdown-toggle-button,
.hds-segmented-group > .hds-dropdown:first-child:not(:only-child) .hds-dropdown-toggle-button::before,
.hds-segmented-group > .hds-form-select:first-child:not(:only-child)::before,
.hds-segmented-group > .hds-form-select:first-child:not(:only-child) .hds-dropdown-toggle-button,
.hds-segmented-group > .hds-form-select:first-child:not(:only-child) .hds-dropdown-toggle-button::before,
.hds-segmented-group > .hds-form-text-input:first-child:not(:only-child)::before,
.hds-segmented-group > .hds-form-text-input:first-child:not(:only-child) .hds-dropdown-toggle-button,
.hds-segmented-group > .hds-form-text-input:first-child:not(:only-child) .hds-dropdown-toggle-button::before {
  border-top-right-radius: inherit;
  border-bottom-right-radius: inherit;
}
.hds-segmented-group > .hds-button:last-child:not(:only-child),
.hds-segmented-group > .hds-dropdown:last-child:not(:only-child),
.hds-segmented-group > .hds-form-select:last-child:not(:only-child),
.hds-segmented-group > .hds-form-text-input:last-child:not(:only-child) {
  margin-left: -1px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.hds-segmented-group > .hds-button:last-child:not(:only-child)::before,
.hds-segmented-group > .hds-button:last-child:not(:only-child) .hds-dropdown-toggle-button,
.hds-segmented-group > .hds-button:last-child:not(:only-child) .hds-dropdown-toggle-button::before,
.hds-segmented-group > .hds-dropdown:last-child:not(:only-child)::before,
.hds-segmented-group > .hds-dropdown:last-child:not(:only-child) .hds-dropdown-toggle-button,
.hds-segmented-group > .hds-dropdown:last-child:not(:only-child) .hds-dropdown-toggle-button::before,
.hds-segmented-group > .hds-form-select:last-child:not(:only-child)::before,
.hds-segmented-group > .hds-form-select:last-child:not(:only-child) .hds-dropdown-toggle-button,
.hds-segmented-group > .hds-form-select:last-child:not(:only-child) .hds-dropdown-toggle-button::before,
.hds-segmented-group > .hds-form-text-input:last-child:not(:only-child)::before,
.hds-segmented-group > .hds-form-text-input:last-child:not(:only-child) .hds-dropdown-toggle-button,
.hds-segmented-group > .hds-form-text-input:last-child:not(:only-child) .hds-dropdown-toggle-button::before {
  border-top-left-radius: inherit;
  border-bottom-left-radius: inherit;
}
.hds-segmented-group > .hds-button:not(:first-child, :last-child, :only-child),
.hds-segmented-group > .hds-dropdown:not(:first-child, :last-child, :only-child),
.hds-segmented-group > .hds-form-select:not(:first-child, :last-child, :only-child),
.hds-segmented-group > .hds-form-text-input:not(:first-child, :last-child, :only-child) {
  margin-left: -1px;
  border-radius: 0;
}
.hds-segmented-group > .hds-button:not(:first-child, :last-child, :only-child)::before,
.hds-segmented-group > .hds-button:not(:first-child, :last-child, :only-child) .hds-dropdown-toggle-button,
.hds-segmented-group > .hds-button:not(:first-child, :last-child, :only-child) .hds-dropdown-toggle-button::before,
.hds-segmented-group > .hds-dropdown:not(:first-child, :last-child, :only-child)::before,
.hds-segmented-group > .hds-dropdown:not(:first-child, :last-child, :only-child) .hds-dropdown-toggle-button,
.hds-segmented-group > .hds-dropdown:not(:first-child, :last-child, :only-child) .hds-dropdown-toggle-button::before,
.hds-segmented-group > .hds-form-select:not(:first-child, :last-child, :only-child)::before,
.hds-segmented-group > .hds-form-select:not(:first-child, :last-child, :only-child) .hds-dropdown-toggle-button,
.hds-segmented-group > .hds-form-select:not(:first-child, :last-child, :only-child) .hds-dropdown-toggle-button::before,
.hds-segmented-group > .hds-form-text-input:not(:first-child, :last-child, :only-child)::before,
.hds-segmented-group > .hds-form-text-input:not(:first-child, :last-child, :only-child) .hds-dropdown-toggle-button,
.hds-segmented-group > .hds-form-text-input:not(:first-child, :last-child, :only-child) .hds-dropdown-toggle-button::before {
  border-radius: inherit;
}
.hds-segmented-group > .hds-button:focus, .hds-segmented-group > .hds-button.mock-focus,
.hds-segmented-group > .hds-button .hds-dropdown-toggle-button:focus,
.hds-segmented-group > .hds-dropdown:focus,
.hds-segmented-group > .hds-dropdown.mock-focus,
.hds-segmented-group > .hds-dropdown .hds-dropdown-toggle-button:focus,
.hds-segmented-group > .hds-form-select:focus,
.hds-segmented-group > .hds-form-select.mock-focus,
.hds-segmented-group > .hds-form-select .hds-dropdown-toggle-button:focus,
.hds-segmented-group > .hds-form-text-input:focus,
.hds-segmented-group > .hds-form-text-input.mock-focus,
.hds-segmented-group > .hds-form-text-input .hds-dropdown-toggle-button:focus {
  z-index: 1;
}

/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */
.hds-separator {
  border: none;
  border-top: 1px solid var(--token-color-border-primary);
}

.hds-separator--spacing-24 {
  margin: 24px 0;
}

.hds-separator--spacing-0 {
  margin: 0;
}

/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */
/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */
:root {
  --hds-app-desktop-breakpoint: 1088px;
  --hds-app-sidenav-width-minimized: 48px;
  --hds-app-sidenav-width-expanded: 280px;
  --hds-app-sidenav-width-fixed: var(--hds-app-sidenav-width-expanded);
  --hds-app-sidenav-animation-duration: 200ms;
  --hds-app-sidenav-animation-delay: var(--hds-app-sidenav-animation-duration);
  --hds-app-sidenav-animation-easing: cubic-bezier(0.65, 0, 0.35, 1);
  --hds-app-sidenav-toggle-button-width: 24px;
}

@media (prefers-reduced-motion) {
  :root {
    --hds-app-sidenav-animation-duration: 0;
  }
}
/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */
.hds-side-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  width: var(--hds-app-sidenav-width-fixed);
  height: 100vh;
  min-height: 100vh;
  isolation: isolate;
}
.hds-side-nav.hds-side-nav--is-responsive {
  transition: width var(--hds-app-sidenav-animation-duration) var(--hds-app-sidenav-animation-easing);
}
.hds-side-nav.hds-side-nav--is-mobile {
  width: var(--hds-app-sidenav-width-minimized);
}
.hds-side-nav.hds-side-nav--is-desktop.hds-side-nav--is-not-minimized {
  width: var(--hds-app-sidenav-width-expanded);
}
.hds-side-nav.hds-side-nav--is-desktop.hds-side-nav--is-minimized {
  width: var(--hds-app-sidenav-width-minimized);
}

.hds-side-nav__overlay {
  position: fixed;
  z-index: -1;
  inset: 0;
  background-color: var(--token-color-palette-neutral-700);
  opacity: 0.2;
  transition: opacity var(--hds-app-sidenav-animation-duration) var(--hds-app-sidenav-animation-easing) var(--hds-app-sidenav-animation-delay);
}
.hds-side-nav--is-minimized .hds-side-nav__overlay {
  opacity: 0;
  pointer-events: none;
}
.hds-side-nav--is-desktop .hds-side-nav__overlay {
  display: none;
}

.hds-side-nav__wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: var(--token-side-nav-color-foreground-primary);
  background: var(--token-side-nav-color-surface-primary);
  border-right: var(--token-side-nav-wrapper-border-width) solid var(--token-side-nav-wrapper-border-color);
}
.hds-side-nav--is-responsive .hds-side-nav__wrapper {
  transition: width var(--hds-app-sidenav-animation-duration) var(--hds-app-sidenav-animation-easing);
}
.hds-side-nav--is-minimized .hds-side-nav__wrapper {
  width: var(--hds-app-sidenav-width-minimized);
}
.hds-side-nav--is-not-minimized .hds-side-nav__wrapper {
  width: var(--hds-app-sidenav-width-expanded);
}

.hds-side-nav__wrapper-header {
  padding-top: var(--token-side-nav-wrapper-padding-vertical);
  padding-right: var(--token-side-nav-wrapper-padding-horizontal);
  padding-bottom: 8px;
  padding-left: var(--token-side-nav-wrapper-padding-horizontal);
  transition: padding var(--hds-app-sidenav-animation-duration) var(--hds-app-sidenav-animation-easing);
}
.hds-side-nav--is-minimized .hds-side-nav__wrapper-header {
  padding-top: var(--token-side-nav-wrapper-padding-vertical-minimized);
  padding-right: var(--token-side-nav-wrapper-padding-horizontal-minimized);
  padding-left: var(--token-side-nav-wrapper-padding-horizontal-minimized);
}

.hds-side-nav__wrapper-body {
  flex: 1;
  padding: var(--token-side-nav-wrapper-padding-vertical) var(--token-side-nav-wrapper-padding-horizontal);
  overflow-x: hidden;
  overflow-y: auto;
}

.hds-side-nav__wrapper-footer {
  padding: var(--token-side-nav-wrapper-padding-vertical) var(--token-side-nav-wrapper-padding-horizontal);
}

.hds-side-nav--is-minimized .hds-side-nav-hide-when-minimized {
  visibility: hidden !important;
  opacity: 0;
  pointer-events: none;
}
.hds-side-nav--is-not-minimized .hds-side-nav-hide-when-minimized {
  visibility: visible;
  opacity: 1;
  transition: opacity var(--hds-app-sidenav-animation-duration) var(--hds-app-sidenav-animation-easing) var(--hds-app-sidenav-animation-delay);
}
.hds-side-nav--is-animating .hds-side-nav-hide-when-minimized {
  pointer-events: none;
}

/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */
.hds-side-nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hds-side-nav-header__logo-container {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--token-side-nav-header-home-link-logo-size);
  height: var(--token-side-nav-header-home-link-logo-size);
  transition: width var(--hds-app-sidenav-animation-duration) var(--hds-app-sidenav-animation-easing), height var(--hds-app-sidenav-animation-duration) var(--hds-app-sidenav-animation-easing);
}
.hds-side-nav--is-minimized .hds-side-nav-header__logo-container {
  width: var(--token-side-nav-header-home-link-logo-size-minimized);
  height: var(--token-side-nav-header-home-link-logo-size-minimized);
}

.hds-side-nav__home-link {
  color: var(--token-side-nav-color-foreground-strong);
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: var(--token-side-nav-body-list-item-border-radius);
  cursor: pointer;
}
.hds-side-nav__home-link:focus, .hds-side-nav__home-link.mock-focus {
  position: relative;
  outline-style: solid;
  outline-color: transparent;
  isolation: isolate;
}
.hds-side-nav__home-link:focus::before, .hds-side-nav__home-link.mock-focus::before {
  position: absolute;
  top: -1px;
  right: -1px;
  bottom: -1px;
  left: -1px;
  z-index: -1;
  border-radius: 5px;
  content: "";
}
.hds-side-nav__home-link:focus:focus::before, .hds-side-nav__home-link:focus.mock-focus::before, .hds-side-nav__home-link.mock-focus:focus::before, .hds-side-nav__home-link.mock-focus.mock-focus::before {
  box-shadow: var(--token-focus-ring-action-box-shadow);
}
.hds-side-nav__home-link:focus:focus:not(:focus-visible)::before, .hds-side-nav__home-link.mock-focus:focus:not(:focus-visible)::before {
  box-shadow: none;
}
.hds-side-nav__home-link:focus:focus-visible::before, .hds-side-nav__home-link.mock-focus:focus-visible::before {
  box-shadow: var(--token-focus-ring-action-box-shadow);
}
.hds-side-nav__home-link:focus:focus:active::before, .hds-side-nav__home-link:focus.mock-focus.mock-active::before, .hds-side-nav__home-link.mock-focus:focus:active::before, .hds-side-nav__home-link.mock-focus.mock-focus.mock-active::before {
  box-shadow: none;
}
.hds-side-nav__home-link:hover, .hds-side-nav__home-link.mock-hover {
  color: var(--token-side-nav-color-foreground-strong);
  background: var(--token-side-nav-color-surface-interactive-hover);
}
.hds-side-nav__home-link:active, .hds-side-nav__home-link.mock-active {
  color: var(--token-side-nav-color-foreground-strong);
  background: var(--token-side-nav-color-surface-interactive-active);
}
.hds-side-nav__home-link {
  display: block;
  width: 100%;
  height: 100%;
  padding: calc(var(--token-side-nav-header-home-link-padding) - 1px);
}

.hds-side-nav-header__actions-container {
  display: flex;
  gap: var(--token-side-nav-header-actions-spacing);
}

.hds-side-nav__dropdown .hds-dropdown-toggle-icon,
.hds-side-nav__dropdown .hds-dropdown-toggle-button {
  color: var(--token-side-nav-color-foreground-strong);
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: var(--token-side-nav-body-list-item-border-radius);
  cursor: pointer;
  border-color: var(--token-color-palette-neutral-500);
}
.hds-side-nav__dropdown .hds-dropdown-toggle-icon:focus, .hds-side-nav__dropdown .hds-dropdown-toggle-icon.mock-focus,
.hds-side-nav__dropdown .hds-dropdown-toggle-button:focus,
.hds-side-nav__dropdown .hds-dropdown-toggle-button.mock-focus {
  position: relative;
  outline-style: solid;
  outline-color: transparent;
  isolation: isolate;
}
.hds-side-nav__dropdown .hds-dropdown-toggle-icon:focus::before, .hds-side-nav__dropdown .hds-dropdown-toggle-icon.mock-focus::before,
.hds-side-nav__dropdown .hds-dropdown-toggle-button:focus::before,
.hds-side-nav__dropdown .hds-dropdown-toggle-button.mock-focus::before {
  position: absolute;
  top: -1px;
  right: -1px;
  bottom: -1px;
  left: -1px;
  z-index: -1;
  border-radius: 5px;
  content: "";
}
.hds-side-nav__dropdown .hds-dropdown-toggle-icon:focus:focus::before, .hds-side-nav__dropdown .hds-dropdown-toggle-icon:focus.mock-focus::before, .hds-side-nav__dropdown .hds-dropdown-toggle-icon.mock-focus:focus::before, .hds-side-nav__dropdown .hds-dropdown-toggle-icon.mock-focus.mock-focus::before,
.hds-side-nav__dropdown .hds-dropdown-toggle-button:focus:focus::before,
.hds-side-nav__dropdown .hds-dropdown-toggle-button:focus.mock-focus::before,
.hds-side-nav__dropdown .hds-dropdown-toggle-button.mock-focus:focus::before,
.hds-side-nav__dropdown .hds-dropdown-toggle-button.mock-focus.mock-focus::before {
  box-shadow: var(--token-focus-ring-action-box-shadow);
}
.hds-side-nav__dropdown .hds-dropdown-toggle-icon:focus:focus:not(:focus-visible)::before, .hds-side-nav__dropdown .hds-dropdown-toggle-icon.mock-focus:focus:not(:focus-visible)::before,
.hds-side-nav__dropdown .hds-dropdown-toggle-button:focus:focus:not(:focus-visible)::before,
.hds-side-nav__dropdown .hds-dropdown-toggle-button.mock-focus:focus:not(:focus-visible)::before {
  box-shadow: none;
}
.hds-side-nav__dropdown .hds-dropdown-toggle-icon:focus:focus-visible::before, .hds-side-nav__dropdown .hds-dropdown-toggle-icon.mock-focus:focus-visible::before,
.hds-side-nav__dropdown .hds-dropdown-toggle-button:focus:focus-visible::before,
.hds-side-nav__dropdown .hds-dropdown-toggle-button.mock-focus:focus-visible::before {
  box-shadow: var(--token-focus-ring-action-box-shadow);
}
.hds-side-nav__dropdown .hds-dropdown-toggle-icon:focus:focus:active::before, .hds-side-nav__dropdown .hds-dropdown-toggle-icon:focus.mock-focus.mock-active::before, .hds-side-nav__dropdown .hds-dropdown-toggle-icon.mock-focus:focus:active::before, .hds-side-nav__dropdown .hds-dropdown-toggle-icon.mock-focus.mock-focus.mock-active::before,
.hds-side-nav__dropdown .hds-dropdown-toggle-button:focus:focus:active::before,
.hds-side-nav__dropdown .hds-dropdown-toggle-button:focus.mock-focus.mock-active::before,
.hds-side-nav__dropdown .hds-dropdown-toggle-button.mock-focus:focus:active::before,
.hds-side-nav__dropdown .hds-dropdown-toggle-button.mock-focus.mock-focus.mock-active::before {
  box-shadow: none;
}
.hds-side-nav__dropdown .hds-dropdown-toggle-icon:hover, .hds-side-nav__dropdown .hds-dropdown-toggle-icon.mock-hover,
.hds-side-nav__dropdown .hds-dropdown-toggle-button:hover,
.hds-side-nav__dropdown .hds-dropdown-toggle-button.mock-hover {
  color: var(--token-side-nav-color-foreground-strong);
  background: var(--token-side-nav-color-surface-interactive-hover);
}
.hds-side-nav__dropdown .hds-dropdown-toggle-icon:active, .hds-side-nav__dropdown .hds-dropdown-toggle-icon.mock-active,
.hds-side-nav__dropdown .hds-dropdown-toggle-button:active,
.hds-side-nav__dropdown .hds-dropdown-toggle-button.mock-active {
  color: var(--token-side-nav-color-foreground-strong);
  background: var(--token-side-nav-color-surface-interactive-active);
  border-color: var(--token-color-palette-neutral-400);
}

.hds-side-nav__icon-button {
  color: var(--token-side-nav-color-foreground-strong);
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: var(--token-side-nav-body-list-item-border-radius);
  cursor: pointer;
  border-color: var(--token-color-palette-neutral-500);
}
.hds-side-nav__icon-button:focus, .hds-side-nav__icon-button.mock-focus {
  position: relative;
  outline-style: solid;
  outline-color: transparent;
  isolation: isolate;
}
.hds-side-nav__icon-button:focus::before, .hds-side-nav__icon-button.mock-focus::before {
  position: absolute;
  top: -1px;
  right: -1px;
  bottom: -1px;
  left: -1px;
  z-index: -1;
  border-radius: 5px;
  content: "";
}
.hds-side-nav__icon-button:focus:focus::before, .hds-side-nav__icon-button:focus.mock-focus::before, .hds-side-nav__icon-button.mock-focus:focus::before, .hds-side-nav__icon-button.mock-focus.mock-focus::before {
  box-shadow: var(--token-focus-ring-action-box-shadow);
}
.hds-side-nav__icon-button:focus:focus:not(:focus-visible)::before, .hds-side-nav__icon-button.mock-focus:focus:not(:focus-visible)::before {
  box-shadow: none;
}
.hds-side-nav__icon-button:focus:focus-visible::before, .hds-side-nav__icon-button.mock-focus:focus-visible::before {
  box-shadow: var(--token-focus-ring-action-box-shadow);
}
.hds-side-nav__icon-button:focus:focus:active::before, .hds-side-nav__icon-button:focus.mock-focus.mock-active::before, .hds-side-nav__icon-button.mock-focus:focus:active::before, .hds-side-nav__icon-button.mock-focus.mock-focus.mock-active::before {
  box-shadow: none;
}
.hds-side-nav__icon-button:hover, .hds-side-nav__icon-button.mock-hover {
  color: var(--token-side-nav-color-foreground-strong);
  background: var(--token-side-nav-color-surface-interactive-hover);
}
.hds-side-nav__icon-button:active, .hds-side-nav__icon-button.mock-active {
  color: var(--token-side-nav-color-foreground-strong);
  background: var(--token-side-nav-color-surface-interactive-active);
  border-color: var(--token-color-palette-neutral-400);
}
.hds-side-nav__icon-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 5px;
}

/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */
.hds-side-nav__content {
  margin: 0 calc(var(--token-side-nav-wrapper-padding-horizontal) * -1);
}
.hds-side-nav--is-minimized .hds-side-nav__content {
  height: 0;
  overflow: hidden;
}

.hds-side-nav__content-panels {
  display: grid;
  grid-template-columns: repeat(5, var(--hds-app-sidenav-width-expanded));
  width: 100%;
}

.hds-side-nav__content-panel {
  padding: 0 var(--token-side-nav-wrapper-padding-horizontal);
}

.hds-side-nav__list-title {
  min-height: var(--token-side-nav-body-list-item-height);
  margin-top: var(--token-side-nav-body-list-margin-vertical);
  padding: 9px var(--token-side-nav-body-list-item-padding-horizontal);
  color: var(--token-side-nav-color-foreground-faint);
  overflow-wrap: break-word;
}
.hds-side-nav__list-wrapper:first-child .hds-side-nav__list-item:first-child > .hds-side-nav__list-title {
  margin-top: 0;
}

.hds-side-nav__list-wrapper,
.hds-side-nav__list {
  margin: 0;
  padding: 0;
}

.hds-side-nav__list-item {
  list-style-type: none;
}
.hds-side-nav__list-item + .hds-side-nav__list-item {
  margin-top: var(--token-side-nav-body-list-item-spacing-vertical);
}

.hds-side-nav__list-item-link {
  display: flex;
  gap: var(--token-side-nav-body-list-item-content-spacing-horizontal);
  align-items: center;
  width: 100%;
  min-height: var(--token-side-nav-body-list-item-height);
  padding: var(--token-side-nav-body-list-item-padding-vertical) var(--token-side-nav-body-list-item-padding-horizontal);
  color: var(--token-side-nav-color-foreground-primary);
  text-decoration: none;
  background: var(--token-side-nav-color-surface-primary);
  border-color: transparent;
  border-radius: var(--token-side-nav-body-list-item-border-radius);
}
.hds-side-nav__list-item-link:focus, .hds-side-nav__list-item-link.mock-focus {
  position: relative;
  outline-style: solid;
  outline-color: transparent;
  isolation: isolate;
}
.hds-side-nav__list-item-link:focus::before, .hds-side-nav__list-item-link.mock-focus::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  border-radius: 5px;
  content: "";
}
.hds-side-nav__list-item-link:focus:focus::before, .hds-side-nav__list-item-link:focus.mock-focus::before, .hds-side-nav__list-item-link.mock-focus:focus::before, .hds-side-nav__list-item-link.mock-focus.mock-focus::before {
  box-shadow: var(--token-focus-ring-action-box-shadow);
}
.hds-side-nav__list-item-link:focus:focus:not(:focus-visible)::before, .hds-side-nav__list-item-link.mock-focus:focus:not(:focus-visible)::before {
  box-shadow: none;
}
.hds-side-nav__list-item-link:focus:focus-visible::before, .hds-side-nav__list-item-link.mock-focus:focus-visible::before {
  box-shadow: var(--token-focus-ring-action-box-shadow);
}
.hds-side-nav__list-item-link:focus:focus:active::before, .hds-side-nav__list-item-link:focus.mock-focus.mock-active::before, .hds-side-nav__list-item-link.mock-focus:focus:active::before, .hds-side-nav__list-item-link.mock-focus.mock-focus.mock-active::before {
  box-shadow: none;
}
.hds-side-nav__list-item-link:hover, .hds-side-nav__list-item-link.mock-hover {
  background: var(--token-side-nav-color-surface-interactive-hover);
  border-color: transparent;
}
.hds-side-nav__list-item-link:hover .hds-side-nav__list-item-text,
.hds-side-nav__list-item-link:hover .hds-side-nav__list-item-icon-leading,
.hds-side-nav__list-item-link:hover .hds-side-nav__list-item-icon-trailing, .hds-side-nav__list-item-link.mock-hover .hds-side-nav__list-item-text,
.hds-side-nav__list-item-link.mock-hover .hds-side-nav__list-item-icon-leading,
.hds-side-nav__list-item-link.mock-hover .hds-side-nav__list-item-icon-trailing {
  color: var(--token-side-nav-color-foreground-strong);
}
.hds-side-nav__list-item-link:hover:focus, .hds-side-nav__list-item-link.active, .hds-side-nav__list-item-link:active, .hds-side-nav__list-item-link.mock-active {
  background: var(--token-side-nav-color-surface-interactive-active);
}
.hds-side-nav__list-item-link:hover:focus .hds-side-nav__list-item-text,
.hds-side-nav__list-item-link:hover:focus .hds-side-nav__list-item-icon-leading,
.hds-side-nav__list-item-link:hover:focus .hds-side-nav__list-item-icon-trailing, .hds-side-nav__list-item-link.active .hds-side-nav__list-item-text,
.hds-side-nav__list-item-link.active .hds-side-nav__list-item-icon-leading,
.hds-side-nav__list-item-link.active .hds-side-nav__list-item-icon-trailing, .hds-side-nav__list-item-link:active .hds-side-nav__list-item-text,
.hds-side-nav__list-item-link:active .hds-side-nav__list-item-icon-leading,
.hds-side-nav__list-item-link:active .hds-side-nav__list-item-icon-trailing, .hds-side-nav__list-item-link.mock-active .hds-side-nav__list-item-text,
.hds-side-nav__list-item-link.mock-active .hds-side-nav__list-item-icon-leading,
.hds-side-nav__list-item-link.mock-active .hds-side-nav__list-item-icon-trailing {
  color: var(--token-side-nav-color-foreground-strong);
}
.hds-side-nav__list-item-link:hover:focus .hds-badge,
.hds-side-nav__list-item-link:hover:focus .hds-badge-count, .hds-side-nav__list-item-link.active .hds-badge,
.hds-side-nav__list-item-link.active .hds-badge-count, .hds-side-nav__list-item-link:active .hds-badge,
.hds-side-nav__list-item-link:active .hds-badge-count, .hds-side-nav__list-item-link.mock-active .hds-badge,
.hds-side-nav__list-item-link.mock-active .hds-badge-count {
  color: var(--token-color-foreground-primary);
  background: var(--token-color-surface-strong);
}

.hds-side-nav__list-item-link--back-link:active, .hds-side-nav__list-item-link--back-link.mock-active {
  background: var(--token-side-nav-color-surface-primary);
}
.hds-side-nav__list-item-link--back-link:active .hds-side-nav__list-item-text,
.hds-side-nav__list-item-link--back-link:active .hds-side-nav__list-item-icon-leading,
.hds-side-nav__list-item-link--back-link:active .hds-side-nav__list-item-icon-trailing, .hds-side-nav__list-item-link--back-link.mock-active .hds-side-nav__list-item-text,
.hds-side-nav__list-item-link--back-link.mock-active .hds-side-nav__list-item-icon-leading,
.hds-side-nav__list-item-link--back-link.mock-active .hds-side-nav__list-item-icon-trailing {
  color: var(--token-side-nav-color-foreground-primary);
}

.hds-side-nav__list-item-text {
  min-width: 0;
  max-width: 100%;
  color: var(--token-side-nav-color-foreground-primary);
  text-align: left;
  overflow-wrap: break-word;
}

.hds-side-nav__list-item-icon-leading {
  flex: none;
}

.hds-side-nav__list-item-icon-trailing {
  flex: none;
  margin-left: auto;
}

/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */
.hds-side-nav__toggle-button {
  position: absolute;
  top: 22px;
  left: calc(var(--token-side-nav-wrapper-border-width) * -1);
  z-index: 1;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  width: var(--hds-app-sidenav-toggle-button-width);
  height: 36px;
  padding: 0 4px;
  color: var(--token-color-foreground-high-contrast);
  background: none;
  background-color: var(--token-side-nav-color-surface-primary);
  border: var(--token-side-nav-wrapper-border-width) solid var(--token-side-nav-wrapper-border-color);
  border-left-color: transparent;
  border-top-right-radius: var(--token-side-nav-toggle-button-border-radius);
  border-bottom-right-radius: var(--token-side-nav-toggle-button-border-radius);
  transform: translateX(var(--hds-app-sidenav-width-expanded));
  cursor: pointer;
  transition: transform var(--hds-app-sidenav-animation-duration) var(--hds-app-sidenav-animation-easing), width var(--hds-app-sidenav-animation-duration) var(--hds-app-sidenav-animation-easing);
}
.hds-side-nav__toggle-button::before {
  position: absolute;
  top: calc(var(--token-side-nav-toggle-button-border-radius) * -2);
  left: calc(var(--token-side-nav-wrapper-border-width) * -1);
  box-sizing: border-box;
  width: calc(var(--token-side-nav-toggle-button-border-radius) * 2);
  height: calc(var(--token-side-nav-toggle-button-border-radius) * 2);
  border-bottom: var(--token-side-nav-wrapper-border-width) solid var(--token-side-nav-wrapper-border-color);
  border-left: var(--token-side-nav-wrapper-border-width) solid var(--token-side-nav-wrapper-border-color);
  border-bottom-left-radius: var(--token-side-nav-toggle-button-border-radius);
  box-shadow: 0 var(--token-side-nav-toggle-button-border-radius) 0 var(--token-side-nav-color-surface-primary);
  content: "";
}
.hds-side-nav__toggle-button::after {
  position: absolute;
  bottom: calc(var(--token-side-nav-toggle-button-border-radius) * -2);
  left: calc(var(--token-side-nav-wrapper-border-width) * -1);
  box-sizing: border-box;
  width: calc(var(--token-side-nav-toggle-button-border-radius) * 2);
  height: calc(var(--token-side-nav-toggle-button-border-radius) * 2);
  border-top: var(--token-side-nav-wrapper-border-width) solid var(--token-side-nav-wrapper-border-color);
  border-left: var(--token-side-nav-wrapper-border-width) solid var(--token-side-nav-wrapper-border-color);
  border-top-left-radius: var(--token-side-nav-toggle-button-border-radius);
  box-shadow: 0 calc(var(--token-side-nav-toggle-button-border-radius) * -1) 0 var(--token-side-nav-color-surface-primary);
  content: "";
}
.hds-side-nav__toggle-button:hover, .hds-side-nav__toggle-button.mock-hover {
  width: 30px;
  background-color: var(--token-side-nav-color-surface-interactive-hover);
}
.hds-side-nav__toggle-button:hover::before, .hds-side-nav__toggle-button.mock-hover::before {
  box-shadow: 0 var(--token-side-nav-toggle-button-border-radius) 0 var(--token-side-nav-color-surface-interactive-hover);
}
.hds-side-nav__toggle-button:hover::after, .hds-side-nav__toggle-button.mock-hover::after {
  box-shadow: 0 calc(var(--token-side-nav-toggle-button-border-radius) * -1) 0 var(--token-side-nav-color-surface-interactive-hover);
}
.hds-side-nav__toggle-button:active, .hds-side-nav__toggle-button.mock-active {
  background-color: var(--token-side-nav-color-surface-interactive-active);
}
.hds-side-nav__toggle-button:active::before, .hds-side-nav__toggle-button.mock-active::before {
  box-shadow: 0 var(--token-side-nav-toggle-button-border-radius) 0 var(--token-side-nav-color-surface-interactive-active);
}
.hds-side-nav__toggle-button:active::after, .hds-side-nav__toggle-button.mock-active::after {
  box-shadow: 0 calc(var(--token-side-nav-toggle-button-border-radius) * -1) 0 var(--token-side-nav-color-surface-interactive-active);
}
.hds-side-nav__toggle-button:focus-visible, .hds-side-nav__toggle-button.mock-focus {
  border-color: var(--token-color-focus-action-internal);
  outline: 3px solid var(--token-color-focus-action-external);
}
.hds-side-nav__toggle-button:focus-visible::before, .hds-side-nav__toggle-button:focus-visible::after, .hds-side-nav__toggle-button.mock-focus::before, .hds-side-nav__toggle-button.mock-focus::after {
  display: none;
}
.hds-side-nav--is-minimized .hds-side-nav__toggle-button {
  transform: translateX(var(--hds-app-sidenav-width-minimized));
}

/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */
.hds-side-nav .ember-a11y-refocus-skip-link {
  top: 10px;
  left: 10px;
  z-index: 20;
  width: -moz-max-content;
  width: max-content;
  padding: 2px 10px 4px;
  color: var(--token-color-foreground-action);
  font-size: var(--token-typography-display-200-font-size);
  font-family: var(--token-typography-display-200-font-family);
  line-height: var(--token-typography-display-200-line-height);
  background-color: var(--token-color-surface-faint);
  border-radius: 3px;
  transform: translateY(-200%);
  transition: 0.6s ease-in-out;
}
.hds-side-nav .ember-a11y-refocus-skip-link:focus {
  transform: translateY(0);
}

/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */
/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */
.hds-stepper-indicator-step {
  position: relative;
  width: 24px;
  height: 24px;
}

.hds-stepper-indicator-step__svg-hexagon {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 1px 1px rgba(101, 106, 118, 0.05));
}

.hds-stepper-indicator-step__status {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hds-stepper-indicator-step__icon {
  width: 12px;
  height: 12px;
}

.hds-stepper-indicator-step__text {
  width: 20px;
  overflow: hidden;
  white-space: nowrap;
  text-align: center;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.hds-stepper-indicator-step--status-incomplete .hds-stepper-indicator-step__status {
  color: var(--token-color-foreground-strong);
}
.hds-stepper-indicator-step--status-incomplete .hds-stepper-indicator-step__svg-hexagon path {
  fill: var(--token-color-surface-faint);
  stroke: var(--token-color-foreground-strong);
}

.hds-stepper-indicator-step--status-progress .hds-stepper-indicator-step__status {
  color: var(--token-color-foreground-high-contrast);
}
.hds-stepper-indicator-step--status-progress .hds-stepper-indicator-step__svg-hexagon path {
  fill: var(--token-color-foreground-strong);
  stroke: var(--token-color-foreground-strong);
}

.hds-stepper-indicator-step--status-processing .hds-stepper-indicator-step__status {
  color: var(--token-color-foreground-high-contrast);
}
.hds-stepper-indicator-step--status-processing .hds-stepper-indicator-step__svg-hexagon path {
  fill: var(--token-color-foreground-strong);
  stroke: var(--token-color-foreground-strong);
}

.hds-stepper-indicator-step--status-complete .hds-stepper-indicator-step__status {
  color: var(--token-color-foreground-high-contrast);
}
.hds-stepper-indicator-step--status-complete .hds-stepper-indicator-step__svg-hexagon path {
  fill: var(--token-color-foreground-strong);
  stroke: var(--token-color-foreground-strong);
}

.hds-stepper-indicator-step--is-interactive {
  cursor: pointer;
}
.hds-stepper-indicator-step--is-interactive.hds-stepper-indicator-step--status-incomplete .hds-stepper-indicator-step__status {
  color: var(--token-color-foreground-primary);
}
.hds-stepper-indicator-step--is-interactive.hds-stepper-indicator-step--status-incomplete .hds-stepper-indicator-step__svg-hexagon path {
  fill: var(--token-color-surface-interactive);
  stroke: var(--token-color-border-strong);
}
.hds-stepper-indicator-step--is-interactive.hds-stepper-indicator-step--status-incomplete:hover .hds-stepper-indicator-step__svg-hexagon path, .hds-stepper-indicator-step--is-interactive.hds-stepper-indicator-step--status-incomplete.mock-hover .hds-stepper-indicator-step__svg-hexagon path {
  fill: var(--token-color-surface-interactive-hover);
}
.hds-stepper-indicator-step--is-interactive.hds-stepper-indicator-step--status-incomplete:active .hds-stepper-indicator-step__svg-hexagon path, .hds-stepper-indicator-step--is-interactive.hds-stepper-indicator-step--status-incomplete.mock-active .hds-stepper-indicator-step__svg-hexagon path {
  fill: var(--token-color-surface-interactive-active);
}
.hds-stepper-indicator-step--is-interactive.hds-stepper-indicator-step--status-progress .hds-stepper-indicator-step__status {
  color: var(--token-color-foreground-high-contrast);
}
.hds-stepper-indicator-step--is-interactive.hds-stepper-indicator-step--status-progress .hds-stepper-indicator-step__svg-hexagon path {
  fill: var(--token-color-palette-blue-200);
  stroke: var(--token-color-palette-blue-300);
}
.hds-stepper-indicator-step--is-interactive.hds-stepper-indicator-step--status-progress:hover .hds-stepper-indicator-step__svg-hexagon path, .hds-stepper-indicator-step--is-interactive.hds-stepper-indicator-step--status-progress.mock-hover .hds-stepper-indicator-step__svg-hexagon path {
  fill: var(--token-color-palette-blue-300);
  stroke: var(--token-color-palette-blue-400);
}
.hds-stepper-indicator-step--is-interactive.hds-stepper-indicator-step--status-progress:active .hds-stepper-indicator-step__svg-hexagon path, .hds-stepper-indicator-step--is-interactive.hds-stepper-indicator-step--status-progress.mock-active .hds-stepper-indicator-step__svg-hexagon path {
  fill: var(--token-color-palette-blue-400);
  stroke: var(--token-color-palette-blue-400);
}
.hds-stepper-indicator-step--is-interactive.hds-stepper-indicator-step--status-processing .hds-stepper-indicator-step__status {
  color: var(--token-color-foreground-high-contrast);
}
.hds-stepper-indicator-step--is-interactive.hds-stepper-indicator-step--status-processing .hds-stepper-indicator-step__svg-hexagon path {
  fill: var(--token-color-palette-blue-200);
  stroke: var(--token-color-palette-blue-300);
}
.hds-stepper-indicator-step--is-interactive.hds-stepper-indicator-step--status-processing:hover .hds-stepper-indicator-step__svg-hexagon path, .hds-stepper-indicator-step--is-interactive.hds-stepper-indicator-step--status-processing.mock-hover .hds-stepper-indicator-step__svg-hexagon path {
  fill: var(--token-color-palette-blue-300);
  stroke: var(--token-color-palette-blue-400);
}
.hds-stepper-indicator-step--is-interactive.hds-stepper-indicator-step--status-processing:active .hds-stepper-indicator-step__svg-hexagon path, .hds-stepper-indicator-step--is-interactive.hds-stepper-indicator-step--status-processing.mock-active .hds-stepper-indicator-step__svg-hexagon path {
  fill: var(--token-color-palette-blue-400);
  stroke: var(--token-color-palette-blue-400);
}
.hds-stepper-indicator-step--is-interactive.hds-stepper-indicator-step--status-complete .hds-stepper-indicator-step__status {
  color: var(--token-color-palette-blue-200);
}
.hds-stepper-indicator-step--is-interactive.hds-stepper-indicator-step--status-complete .hds-stepper-indicator-step__svg-hexagon path {
  fill: var(--token-color-palette-blue-50);
  stroke: var(--token-color-palette-blue-300);
}
.hds-stepper-indicator-step--is-interactive.hds-stepper-indicator-step--status-complete:hover .hds-stepper-indicator-step__status, .hds-stepper-indicator-step--is-interactive.hds-stepper-indicator-step--status-complete.mock-hover .hds-stepper-indicator-step__status {
  color: var(--token-color-palette-blue-300);
}
.hds-stepper-indicator-step--is-interactive.hds-stepper-indicator-step--status-complete:hover .hds-stepper-indicator-step__svg-hexagon path, .hds-stepper-indicator-step--is-interactive.hds-stepper-indicator-step--status-complete.mock-hover .hds-stepper-indicator-step__svg-hexagon path {
  fill: var(--token-color-palette-blue-100);
  stroke: var(--token-color-palette-blue-400);
}
.hds-stepper-indicator-step--is-interactive.hds-stepper-indicator-step--status-complete:active .hds-stepper-indicator-step__status, .hds-stepper-indicator-step--is-interactive.hds-stepper-indicator-step--status-complete.mock-active .hds-stepper-indicator-step__status {
  color: var(--token-color-palette-blue-400);
}
.hds-stepper-indicator-step--is-interactive.hds-stepper-indicator-step--status-complete:active .hds-stepper-indicator-step__svg-hexagon path, .hds-stepper-indicator-step--is-interactive.hds-stepper-indicator-step--status-complete.mock-active .hds-stepper-indicator-step__svg-hexagon path {
  fill: var(--token-color-palette-blue-100);
  stroke: var(--token-color-palette-blue-400);
}

/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */
.hds-stepper-indicator-task {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--token-color-foreground-strong);
}

.hds-stepper-indicator-task__icon {
  width: 12px;
  height: 12px;
}

.hds-stepper-indicator-task--is-interactive {
  cursor: pointer;
}
.hds-stepper-indicator-task--is-interactive.hds-stepper-indicator-task--status-incomplete {
  color: var(--token-color-palette-neutral-300);
}
.hds-stepper-indicator-task--is-interactive.hds-stepper-indicator-task--status-incomplete:hover, .hds-stepper-indicator-task--is-interactive.hds-stepper-indicator-task--status-incomplete.mock-hover {
  color: var(--token-color-palette-blue-300);
}
.hds-stepper-indicator-task--is-interactive.hds-stepper-indicator-task--status-incomplete:active, .hds-stepper-indicator-task--is-interactive.hds-stepper-indicator-task--status-incomplete.mock-active {
  color: var(--token-color-palette-blue-400);
}
.hds-stepper-indicator-task--is-interactive.hds-stepper-indicator-task--status-progress {
  color: var(--token-color-palette-blue-200);
}
.hds-stepper-indicator-task--is-interactive.hds-stepper-indicator-task--status-progress:hover, .hds-stepper-indicator-task--is-interactive.hds-stepper-indicator-task--status-progress.mock-hover {
  color: var(--token-color-palette-blue-300);
}
.hds-stepper-indicator-task--is-interactive.hds-stepper-indicator-task--status-progress:active, .hds-stepper-indicator-task--is-interactive.hds-stepper-indicator-task--status-progress.mock-active {
  color: var(--token-color-palette-blue-400);
}
.hds-stepper-indicator-task--is-interactive.hds-stepper-indicator-task--status-processing {
  color: var(--token-color-palette-blue-200);
}
.hds-stepper-indicator-task--is-interactive.hds-stepper-indicator-task--status-processing:hover, .hds-stepper-indicator-task--is-interactive.hds-stepper-indicator-task--status-processing.mock-hover {
  color: var(--token-color-palette-blue-300);
}
.hds-stepper-indicator-task--is-interactive.hds-stepper-indicator-task--status-processing:active, .hds-stepper-indicator-task--is-interactive.hds-stepper-indicator-task--status-processing.mock-active {
  color: var(--token-color-palette-blue-400);
}
.hds-stepper-indicator-task--is-interactive.hds-stepper-indicator-task--status-complete {
  color: var(--token-color-palette-green-200);
}
.hds-stepper-indicator-task--is-interactive.hds-stepper-indicator-task--status-complete:hover, .hds-stepper-indicator-task--is-interactive.hds-stepper-indicator-task--status-complete.mock-hover {
  color: var(--token-color-palette-green-300);
}
.hds-stepper-indicator-task--is-interactive.hds-stepper-indicator-task--status-complete:active, .hds-stepper-indicator-task--is-interactive.hds-stepper-indicator-task--status-complete.mock-active {
  color: var(--token-color-palette-green-400);
}

/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */
.hds-table {
  width: 100%;
  border: 1px solid var(--token-color-border-primary);
  border-radius: 6px;
  border-spacing: 0;
}

.hds-table--layout-fixed {
  table-layout: fixed;
}

.hds-table__thead .hds-table__tr {
  color: var(--token-color-foreground-strong);
  background-color: var(--token-color-surface-strong);
}
.hds-table__thead .hds-table__tr:first-of-type th:first-child {
  border-top-left-radius: 5px;
}
.hds-table__thead .hds-table__tr:first-of-type th:last-child {
  border-top-right-radius: 5px;
}
.hds-table__thead .hds-table__th,
.hds-table__thead .hds-table__th-sort {
  min-height: 48px;
}

.hds-table__th,
.hds-table__th-sort {
  text-align: left;
  border-top: none;
  border-right: none;
  border-bottom: 1px solid var(--token-color-border-primary);
  border-left: none;
}

.hds-table__th {
  padding: 14px 16px 13px 16px;
}

.hds-table__th-sort {
  padding: 0;
}
.hds-table__th-sort button {
  width: 100%;
  height: 100%;
  min-height: 48px;
  margin: 0;
  padding: 14px 16px 13px 16px;
  text-align: inherit;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: inherit;
}
.hds-table__th-sort button .hds-table__th-sort--button-content {
  display: flex;
  align-items: center;
}
.hds-table__th-sort button .hds-table__th-sort--button-content .flight-icon {
  flex: none;
  margin-left: 8px;
  color: var(--token-color-foreground-action);
}
.hds-table__th-sort button:hover, .hds-table__th-sort button.mock-hover {
  color: var(--token-color-foreground-strong);
  background-color: var(--token-color-palette-neutral-200);
  cursor: pointer;
}
.hds-table__th-sort button {
  position: relative;
  outline-style: solid;
  outline-color: transparent;
  isolation: isolate;
}
.hds-table__th-sort button::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  border-radius: inherit;
  content: "";
}
.hds-table__th-sort button:focus::before, .hds-table__th-sort button.mock-focus::before {
  box-shadow: var(--token-focus-ring-action-box-shadow);
}
.hds-table__th-sort button:focus:not(:focus-visible)::before {
  box-shadow: none;
}
.hds-table__th-sort button:focus-visible::before {
  box-shadow: var(--token-focus-ring-action-box-shadow);
}
.hds-table__th-sort button:focus:active::before, .hds-table__th-sort button.mock-focus.mock-active::before {
  box-shadow: none;
}
.hds-table__th-sort button:active, .hds-table__th-sort button.mock-active {
  color: var(--token-color-foreground-strong);
  background-color: var(--token-color-palette-neutral-300);
}

.hds-table--striped .hds-table__tbody .hds-table__tr:nth-child(even) {
  background-color: var(--token-color-surface-faint);
}

.hds-table--density-short .hds-table__tbody th,
.hds-table--density-short .hds-table__tbody td {
  padding: 6px 16px 5px 16px;
}
.hds-table--density-medium .hds-table__tbody th,
.hds-table--density-medium .hds-table__tbody td {
  padding: 14px 16px 13px 16px;
}
.hds-table--density-tall .hds-table__tbody th,
.hds-table--density-tall .hds-table__tbody td {
  padding: 22px 16px 21px 16px;
}

.hds-table--valign-top .hds-table__tbody th,
.hds-table--valign-top .hds-table__tbody td {
  vertical-align: top;
}
.hds-table--valign-middle .hds-table__tbody th,
.hds-table--valign-middle .hds-table__tbody td {
  vertical-align: middle;
}
.hds-table--valign-baseline .hds-table__tbody th,
.hds-table--valign-baseline .hds-table__tbody td {
  vertical-align: baseline;
}

.hds-table__th-sort--text-right,
.hds-table__th--text-right,
.hds-table__td--text-right {
  text-align: right;
}

.hds-table__th-sort--text-right .hds-table__th-sort--button-content {
  justify-content: flex-end;
}

.hds-table__th-sort--text-center,
.hds-table__th--text-center,
.hds-table__td--text-center {
  text-align: center;
}

.hds-table__tbody .hds-table__tr {
  color: var(--token-color-foreground-primary);
  background-color: var(--token-color-surface-primary);
}
.hds-table__tbody .hds-table__tr th,
.hds-table__tbody .hds-table__tr td {
  border-top: none;
  border-right: none;
  border-bottom: 1px solid var(--token-color-border-primary);
  border-left: none;
}
.hds-table__tbody .hds-table__tr:last-of-type th,
.hds-table__tbody .hds-table__tr:last-of-type td {
  border-bottom: none;
}
.hds-table__tbody .hds-table__tr:last-of-type th:first-child,
.hds-table__tbody .hds-table__tr:last-of-type td:first-child {
  border-bottom-left-radius: 5px;
}
.hds-table__tbody .hds-table__tr:last-of-type td:last-child {
  border-bottom-right-radius: 5px;
}

/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */
.hds-tabs__tablist-wrapper {
  position: relative;
}
.hds-tabs__tablist-wrapper::before {
  position: absolute;
  right: 0;
  bottom: calc((var(--token-tabs-indicator-height) - var(--token-tabs-divider-height)) / 2);
  left: 0;
  display: block;
  border-top: var(--token-tabs-divider-height) solid var(--token-color-border-primary);
  content: "";
}

.hds-tabs__tablist {
  position: relative;
  display: flex;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.hds-tabs__tab {
  position: relative;
  display: flex;
  align-items: center;
  height: var(--token-tabs-tab-height);
  margin: 0;
  padding: var(--token-tabs-tab-padding-vertical) var(--token-tabs-tab-padding-horizontal);
  color: var(--token-color-foreground-primary);
  white-space: nowrap;
  text-decoration: none;
  list-style: none;
}
.hds-tabs__tab:hover, .hds-tabs__tab.mock-hover {
  color: var(--token-color-foreground-action);
}
.hds-tabs__tab.hds-tabs__tab--is-selected {
  color: var(--token-color-foreground-action);
}
.hds-tabs__tab.hds-tabs__tab--is-selected:hover {
  color: var(--token-color-foreground-action-hover);
}
.hds-tabs__tab.hds-tabs__tab--is-selected:hover ~ .hds-tabs__tab-indicator {
  background: var(--token-color-foreground-action-hover);
}

.hds-tabs__tab-button {
  position: relative;
  outline-style: solid;
  outline-color: transparent;
  isolation: isolate;
}
.hds-tabs__tab-button::before {
  position: absolute;
  top: var(--token-tabs-tab-focus-inset);
  right: var(--token-tabs-tab-focus-inset);
  bottom: var(--token-tabs-tab-focus-inset);
  left: var(--token-tabs-tab-focus-inset);
  z-index: -1;
  border-radius: 5px;
  content: "";
}
.hds-tabs__tab-button:focus::before, .hds-tabs__tab-button.mock-focus::before {
  box-shadow: var(--token-focus-ring-action-box-shadow);
}
.hds-tabs__tab-button:focus:not(:focus-visible)::before {
  box-shadow: none;
}
.hds-tabs__tab-button:focus-visible::before {
  box-shadow: var(--token-focus-ring-action-box-shadow);
}
.hds-tabs__tab-button:focus:active::before, .hds-tabs__tab-button.mock-focus.mock-active::before {
  box-shadow: none;
}
.hds-tabs__tab-button {
  position: static;
  display: flex;
  gap: var(--token-tabs-tab-gutter);
  align-items: center;
  padding: 0;
  color: inherit;
  background-color: transparent;
  border: none;
  border-radius: var(--token-tabs-tab-border-radius);
  cursor: pointer;
}
.hds-tabs__tab-button::after {
  position: absolute;
  content: "";
  inset: 0;
}

.hds-tabs__tab-indicator {
  position: absolute;
  right: 0;
  bottom: 0;
  left: var(--indicator-left-pos);
  z-index: 10;
  display: block;
  width: var(--indicator-width);
  height: var(--token-tabs-indicator-height);
  background-color: var(--token-color-foreground-action);
  border-radius: var(--token-tabs-indicator-height);
}
@media screen and (prefers-reduced-motion: no-preference) {
  .hds-tabs__tab-indicator {
    transition-timing-function: var(--token-tabs-indicator-transition-function);
    transition-duration: var(--token-tabs-indicator-transition-duration);
    transition-property: left, width;
  }
}

.hds-tabs__panel[hidden] {
  display: none;
}

/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */
.hds-tag {
  display: inline-flex;
  align-items: stretch;
  line-height: 1rem;
  vertical-align: middle;
  background-color: var(--token-color-surface-interactive);
  border: 1px solid var(--token-color-border-strong);
  border-radius: 50px;
}

.hds-tag__dismiss {
  flex: 0 0 auto;
  margin: 0;
  padding: 6px 4px 6px 8px;
  border: none;
  border-radius: inherit;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.hds-tag__dismiss-icon {
  width: 12px;
  height: 12px;
  color: var(--token-color-foreground-primary);
}

.hds-tag__text,
.hds-tag__link {
  flex: 1 0 0;
  padding: 3px 10px 5px 10px;
  border-radius: inherit;
}

.hds-tag__dismiss ~ .hds-tag__text,
.hds-tag__dismiss ~ .hds-tag__link {
  padding: 3px 8px 5px 6px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.hds-tag__dismiss,
.hds-tag__link {
  background-color: var(--token-color-surface-interactive);
  cursor: pointer;
}
.hds-tag__dismiss:hover, .hds-tag__dismiss.mock-hover,
.hds-tag__link:hover,
.hds-tag__link.mock-hover {
  background-color: var(--token-color-surface-interactive-hover);
}
.hds-tag__dismiss:active, .hds-tag__dismiss.mock-active,
.hds-tag__link:active,
.hds-tag__link.mock-active {
  background-color: var(--token-color-surface-interactive-active);
}
.hds-tag__dismiss:focus, .hds-tag__dismiss.mock-focus,
.hds-tag__link:focus,
.hds-tag__link.mock-focus {
  outline-style: solid;
  outline-color: transparent;
}
.hds-tag__dismiss:focus:focus, .hds-tag__dismiss:focus.mock-focus, .hds-tag__dismiss.mock-focus:focus, .hds-tag__dismiss.mock-focus.mock-focus,
.hds-tag__link:focus:focus,
.hds-tag__link:focus.mock-focus,
.hds-tag__link.mock-focus:focus,
.hds-tag__link.mock-focus.mock-focus {
  box-shadow: var(--token-focus-ring-action-box-shadow);
}
.hds-tag__dismiss:focus:focus:not(:focus-visible), .hds-tag__dismiss.mock-focus:focus:not(:focus-visible),
.hds-tag__link:focus:focus:not(:focus-visible),
.hds-tag__link.mock-focus:focus:not(:focus-visible) {
  box-shadow: none;
}
.hds-tag__dismiss:focus:focus-visible, .hds-tag__dismiss.mock-focus:focus-visible,
.hds-tag__link:focus:focus-visible,
.hds-tag__link.mock-focus:focus-visible {
  box-shadow: var(--token-focus-ring-action-box-shadow);
}
.hds-tag__dismiss:focus:focus:active, .hds-tag__dismiss:focus.mock-focus.mock-active, .hds-tag__dismiss.mock-focus:focus:active, .hds-tag__dismiss.mock-focus.mock-focus.mock-active,
.hds-tag__link:focus:focus:active,
.hds-tag__link:focus.mock-focus.mock-active,
.hds-tag__link.mock-focus:focus:active,
.hds-tag__link.mock-focus.mock-focus.mock-active {
  box-shadow: none;
}
.hds-tag__dismiss:focus, .hds-tag__dismiss.mock-focus,
.hds-tag__link:focus,
.hds-tag__link.mock-focus {
  z-index: 1;
}

.hds-tag--color-primary .hds-tag__link {
  color: var(--token-color-foreground-action);
}
.hds-tag--color-primary .hds-tag__link:hover, .hds-tag--color-primary .hds-tag__link.mock-hover {
  color: var(--token-color-foreground-action-hover);
}
.hds-tag--color-primary .hds-tag__link:active, .hds-tag--color-primary .hds-tag__link.mock-active {
  color: var(--token-color-foreground-action-active);
}

.hds-tag--color-secondary .hds-tag__link {
  color: var(--token-color-foreground-strong);
}

/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */
.hds-text--align-left {
  text-align: left;
}

.hds-text--align-center {
  text-align: center;
}

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

/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */
.hds-toast {
  width: -moz-fit-content;
  width: fit-content;
  min-width: min(360px, 80vw);
  max-width: min(500px, 80vw);
  box-shadow: var(--token-elevation-higher-box-shadow);
}

/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */
.hds-tooltip-button {
  position: relative;
  outline-style: solid;
  outline-color: transparent;
  isolation: isolate;
}
.hds-tooltip-button::before {
  position: absolute;
  top: var(--token-tooltip-focus-offset);
  right: var(--token-tooltip-focus-offset);
  bottom: var(--token-tooltip-focus-offset);
  left: var(--token-tooltip-focus-offset);
  z-index: -1;
  border-radius: 5px;
  content: "";
}
.hds-tooltip-button:focus::before, .hds-tooltip-button.mock-focus::before {
  box-shadow: var(--token-focus-ring-action-box-shadow);
}
.hds-tooltip-button:focus:not(:focus-visible)::before {
  box-shadow: none;
}
.hds-tooltip-button:focus-visible::before {
  box-shadow: var(--token-focus-ring-action-box-shadow);
}
.hds-tooltip-button:focus:active::before, .hds-tooltip-button.mock-focus.mock-active::before {
  box-shadow: none;
}

:where(.hds-tooltip-button) {
  margin: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  text-align: inherit;
  background-color: inherit;
  border: none;
}

:where(.hds-tooltip-button--is-inline) {
  display: inline-flex;
}

:where(.hds-tooltip-button--is-block) {
  display: flex;
}

.tippy-box[data-theme~=hds] {
  padding: var(--token-tooltip-padding-vertical) var(--token-tooltip-padding-horizontal);
  color: var(--token-tooltip-color-foreground-primary);
  font-weight: var(--token-typography-font-weight-regular);
  font-size: var(--token-typography-body-200-font-size);
  font-family: var(--token-typography-body-200-font-family);
  line-height: var(--token-typography-body-200-line-height);
  overflow-wrap: break-word;
  background-color: var(--token-tooltip-color-surface-primary);
  border-radius: var(--token-tooltip-border-radius);
  box-shadow: var(--token-elevation-higher-box-shadow);
  transition-property: transform, visibility, opacity;
}
.tippy-box[data-theme~=hds][data-animation=fade][data-state=hidden] {
  opacity: 0;
}
.tippy-box[data-theme~=hds][data-inertia][data-state=visible] {
  transition-timing-function: var(--token-tooltip-transition-function);
}
.tippy-box[data-theme~=hds] .tippy-content {
  position: relative;
  z-index: 1;
  max-width: var(--token-tooltip-max-width);
  white-space: normal;
  text-align: left;
}
.tippy-box[data-theme~=hds] .tippy-svg-arrow {
  fill: var(--token-tooltip-color-surface-primary);
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important; /* 3 */
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important; /* 1 */
  clip-path: inset(50%) !important; /* 2 */
}

.ember-application{
  background-color: var(--token-color-page-primary);
}

.secondary-screen{
  background-color: var(--token-color-page-faint);
}
.secondary-screen .ember-application{
  background-color: var(--token-color-page-faint);
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes scaleIn {
  from {
    transform: scale(var(--scaleInFrom, 0.95));
  }
  to {
    transform: scale(1);
  }
}
@keyframes slideUp {
  from {
    transform: translateY(var(--slideUpFrom, 1.5px));
  }
  to {
    transform: translateY(0);
  }
}
@keyframes slideDownXs {
  from {
    transform: translateY(-1.5px);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes slideLeftPx {
  from {
    transform: translateX(1px);
  }
  to {
    transform: translateY(0);
  }
}
em{
  font-style: normal;
}

mark,
.mark{
  background-color: var(--token-color-surface-warning);
  color: var(--token-color-foreground-warning-on-surface);
}

.line-clamp{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

.line-clamp-2 {
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.hermes-form-label{
  display: flex;
  font-size: var(--token-typography-body-200-font-size);
  line-height: var(--token-typography-body-200-line-height);
  font-weight: var(--token-typography-font-weight-semibold);
  color: var(--token-color-foreground-strong);
}
.hermes-form-label + .hermes-form-helper-text{
  margin-top: 0.25rem;
}

.hermes-form-helper-text{
  font-size: var(--token-typography-body-100-font-size);
  line-height: var(--token-typography-body-100-line-height);
}

.hermes-h-300{
  font-size: var(--token-typography-display-300-font-size);
  line-height: var(--token-typography-display-300-line-height);
  font-weight: var(--token-typography-font-weight-semibold);
  color: var(--token-color-foreground-strong);
}

.hermes-h4{
  font-size: var(--token-typography-body-100-font-size);
  line-height: var(--token-typography-body-100-line-height);
  font-weight: var(--token-typography-font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.025em;
  color: var(--token-color-foreground-faint);
}

.truncated-text-container{
  display: block;
  font-size: var(--token-typography-body-100-font-size);
  line-height: var(--token-typography-body-100-line-height);
  font-weight: var(--token-typography-font-weight-regular);
  color: var(--token-color-foreground-faint);
}
.truncated-text-container.default{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (min-width: 768px) {
  .truncated-text-container.starting-breakpoint-md{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.failed-to-load-text{
  margin-bottom: 0.5rem;
  font-size: var(--token-typography-display-300-font-size);
  line-height: var(--token-typography-display-300-line-height);
  font-weight: var(--token-typography-font-weight-semibold);
  color: var(--token-color-foreground-faint);
  opacity: 0.5;
}

.underlined-link:not([disabled]):not(.underline-on-hover),
.underline-on-hover:hover,
.underline-on-hover:focus{
  color: var(--token-color-foreground-primary);
  text-decoration-line: underline;
  text-decoration-color: var(--token-color-palette-neutral-300);
  text-underline-offset: 3px;
}
.underlined-link:not([disabled]):not(.underline-on-hover):hover, .underlined-link:not([disabled]):not(.underline-on-hover):focus,
.underline-on-hover:hover:hover,
.underline-on-hover:hover:focus,
.underline-on-hover:focus:hover,
.underline-on-hover:focus:focus{
  color: var(--token-color-foreground-strong);
  text-decoration-color: var(--token-color-palette-neutral-400);
}

.dashboard .empty-text{
  margin-top: 1.25rem;
  font-size: var(--token-typography-body-300-font-size);
  line-height: var(--token-typography-body-300-line-height);
  color: var(--token-color-foreground-disabled);
}
.dashboard .vertical-line{
  color: var(--token-color-foreground-faint);
  opacity: 0.5;
}
.dashboard .vertical-line-divider{
  margin-left: 0.125rem;
  margin-right: 0.125rem;
  height: 0.875rem;
  width: 1.25px;
  background-color: var(--token-color-foreground-faint);
  opacity: 0.25;
}
.dashboard .tags{
  display: flex;
  flex-shrink: 0;
  gap: 0.25rem;
}
.dashboard {
  /* Dark mode enhancements */
}
.dashboard .welcome-message{
  color: var(--token-color-foreground-strong);
}
.dashboard .section-header{
  color: var(--token-color-foreground-strong);
}
.dashboard .doc-list .doc-item{
  border-color: var(--token-color-border-faint);
}
.dashboard .doc-list .doc-item:hover{
  background-color: var(--token-color-surface-interactive);
}
.dashboard .main h2,
.dashboard .main h3,
.dashboard .main h5,
.dashboard .secondary h2,
.dashboard .secondary h3,
.dashboard .secondary h5{
  color: var(--token-color-foreground-strong);
}
.dashboard .main h3,
.dashboard .main h5,
.dashboard .secondary h3,
.dashboard .secondary h5{
  font-weight: var(--token-typography-font-weight-semibold);
}
.dashboard .main h2,
.dashboard .secondary h2{
  font-size: var(--token-typography-display-400-font-size);
  line-height: var(--token-typography-display-400-line-height);
}
.dashboard .main h3,
.dashboard .secondary h3{
  font-size: var(--token-typography-display-300-font-size);
  line-height: var(--token-typography-display-300-line-height);
}
@media (min-width: 1024px){
  .dashboard .main h4,
.dashboard .secondary h4{
    font-size: var(--token-typography-display-300-font-size);
    line-height: var(--token-typography-display-300-line-height);
    font-weight: var(--token-typography-font-weight-semibold);
    color: var(--token-color-foreground-strong);
  }
}
.dashboard .main h5,
.dashboard .secondary h5{
  font-size: var(--token-typography-body-200-font-size);
  line-height: var(--token-typography-body-200-line-height);
}
.dashboard .main li > a,
.dashboard .secondary li > a{
  display: block;
}
.dashboard .main li > a:hover,
.dashboard .secondary li > a:hover{
  background-color: var(--token-color-page-faint);
}
.dashboard .main-inner{
  padding-right: 2rem;
  padding-left: 0.75rem;
}
.dashboard .secondary .scroll-affordance{
  pointer-events: none;
  position: absolute;
  top: 0px;
  bottom: 1rem;
  width: 2.5rem;
  --tw-gradient-from: rgb(0 0 0 / 0.05) var(--tw-gradient-from-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.dashboard .footer{
  margin-top: 0px;
}

.hds-alert--color-highlight{
  padding-left: 1.25rem;
}
.hds-alert--color-highlight .hds-alert__icon{
  display: none;
}

.icon-list li{
  display: grid;
  align-items: center;
  gap: 0.625rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  padding-left: 0.25rem;
  grid-template-columns: 16px 1fr;
}

.person{
  display: grid;
  gap: 0.5rem;
  grid-template-columns: 20px 1fr;
}

.new h1{
  text-align: center;
  font-size: var(--token-typography-display-400-font-size);
  line-height: var(--token-typography-display-400-line-height);
}
.new .create-new-form{
  margin-left: auto;
  margin-right: auto;
  margin-top: 1.5rem;
  max-width: 36rem;
}
.new .footer{
  margin-top: 6rem;
}
.new .feature-icon {
  --slideUpFrom: 4px;
  animation: slideUp 1500ms cubic-bezier(0, 1, 0.5, 1);
}

.toolbar .hds-dropdown-list-item__interactive-text {
  font-weight: normal;
}
.toolbar .hds-dropdown-list-item .checked svg {
  fill: var(--token-color-foreground-action);
}

.facets li:not(:first-child) button,
.facets li:not(:first-child) input{
  border-radius: 0px;
  border-left-width: 0px;
}
.facets li:first-child button{
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}
.facets li:last-child button,
.facets li:last-child input{
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
.facets li:last-child input:focus, .facets li:last-child input.mock-focus{
  margin-left: -1px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border-left-width: 1px;
}

.hermes-tooltip{
  z-index: 50;
  width: -moz-max-content;
  width: max-content;
  border-radius: 0.25rem;
  background-color: var(--token-color-foreground-strong);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  color: var(--token-color-foreground-high-contrast);
}
.hermes-tooltip .arrow{
  pointer-events: none;
  position: absolute;
  z-index: -10;
  height: 0.5rem;
  width: 0.5rem;
  background-color: var(--token-color-foreground-strong);
}
.hermes-tooltip .text{
  position: relative;
}

.hermes-popover{
  z-index: 50;
  display: flex;
  min-width: 200px;
  max-width: 400px;
  flex-direction: column;
  overflow: auto;
  border-radius: 0.375rem;
  background-color: var(--token-color-foreground-high-contrast);
  box-shadow: var(--token-surface-high-box-shadow);
}
.hermes-popover .text{
  position: relative;
}

.footer{
  margin-top: 3rem;
  margin-bottom: 4rem;
  width: 100%;
  font-size: var(--token-typography-body-200-font-size);
  line-height: var(--token-typography-body-200-line-height);
  color: var(--token-color-foreground-faint);
}
.footer .footer-inner{
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  border-top-width: 1px;
  border-top-color: var(--token-color-border-primary);
  padding-top: 1.5rem;
}
.footer.compact{
  margin-top: 0px;
}
.footer.compact .footer-inner{
  border-top-width: 0px;
}

.hds-table + .footer,
.pagination + .footer{
  margin-top: 6rem;
}

.header-nav{
  position: relative;
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

@media (min-width: 768px){
  .header-nav{
    flex-wrap: nowrap;
  }
}
.header-nav .header-nav-logo{
  order: 1;
  margin-right: 1.5rem;
  margin-top: 0.875rem;
  display: flex;
  flex-shrink: 0;
  align-items: center;
}
.header-nav .header-nav-logo:hover{
  color: var(--token-color-foreground-strong);
}
@media (min-width: 768px){
  .header-nav .header-nav-logo{
    margin-top: 0px;
    margin-right: 0px;
    height: 4rem;
  }
}
.header-nav .primary-links{
  order: 3;
  margin-left: -0.625rem;
  display: flex;
  height: 4rem;
  flex-shrink: 0;
}
@media (min-width: 768px){
  .header-nav .primary-links{
    order: 2;
    margin-left: 1.5rem;
    margin-right: 1.5rem;
  }
}
.header-nav .primary-links a{
  display: flex;
  height: 100%;
  align-items: center;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  color: var(--token-color-foreground-faint);
}
@media (min-width: 768px){
  .header-nav .primary-links a{
    padding-left: 0.875rem;
    padding-right: 0.875rem;
  }
}
.header-nav .primary-links a:hover{
  color: var(--token-color-foreground-strong);
}
.header-nav .primary-links a.active{
  position: relative;
  color: var(--token-color-palette-blue-200);
  /* Active indicator */
}
.header-nav .primary-links a.active::before {
  content: "";
  position: absolute;
  left: 0px;
  bottom: -1px;
  height: 0.25rem;
  width: 100%;
  background-color: var(--token-color-palette-blue-200);
}
.header-nav .global-search{
  order: 2;
  display: flex;
  width: calc(100% - 9rem);
  padding-top: 0.875rem;
}
@media (min-width: 768px){
  .header-nav .global-search{
    order: 3;
    width: 100%;
    padding-top: 0px;
    padding-bottom: 0px;
  }
}
.header-nav .user-buttons{
  order: 4;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.625rem;
}
@media (min-width: 640px){
  .header-nav .user-buttons{
    margin-left: 1.5rem;
  }
}
@media (min-width: 768px){
  .header-nav .user-buttons{
    margin-left: 2rem;
  }
}
.header-nav .user-dropdown li a,
.header-nav .user-dropdown li button{
  padding-left: 1rem;
  padding-right: 1rem;
}
.header-nav .user-menu-button:hover .avatar {
  box-shadow: 0 0 0 3px var(--token-color-border-strong);
}
.header-nav .user-menu-button:focus .avatar, .header-nav .user-menu-button.open .avatar{
  --tw-shadow: var(--token-focus-ring-action-box-shadow);
  --tw-shadow-colored: var(--token-focus-ring-action-box-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.header-nav .user-menu-button:hover, .header-nav .user-menu-button:focus, .header-nav .user-menu-button.open{
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.header-nav .user-menu-button:hover .avatar, .header-nav .user-menu-button:focus .avatar, .header-nav .user-menu-button.open .avatar{
  outline-style: solid;
  outline-width: 1px;
  outline-color: var(--token-color-page-faint);
}
.header-nav .user-menu-external-link{
  flex-direction: row-reverse;
  justify-content: flex-end;
}
.header-nav .user-menu-external-link:not(:hover) .hds-dropdown-list-item__interactive-icon{
  color: var(--token-color-foreground-faint);
  opacity: 0.75;
}
.header-nav .user-menu-external-link .hds-dropdown-list-item__interactive-icon{
  margin-right: 0px;
  margin-left: 0.375rem;
}
.header-nav .user-menu-external-link .hds-dropdown-list-item__interactive-text{
  flex: 0 1 auto;
}
.header-nav .search-dropdown{
  width: 100%;
  min-width: 320px;
  max-width: none;
}
.header-nav a{
  text-decoration-line: none;
}
.header-nav a.hds-button:hover{
  text-decoration-line: none;
}
.header-nav .is-aria-selected .highlighted-new-badge{
  background-color: var(--token-color-palette-alpha-300);
  mix-blend-mode: normal;
}
.header-nav .is-aria-selected .highlighted-new-badge .hds-badge__text{
  color: var(--token-color-page-primary);
}

.segmented-control{
  display: flex;
}
.segmented-control a{
  position: relative;
  display: flex;
  height: 2.25rem;
  width: 33.333333%;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border-radius: 0px;
  border-width: 1px;
  border-color: var(--token-color-palette-neutral-300);
  background-color: var(--token-color-page-faint);
}
.segmented-control a:first-child{
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.segmented-control a:last-child{
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
.segmented-control a:hover:not(.active){
  background-color: var(--token-color-page-primary);
}
.segmented-control a + a{
  margin-left: -1px;
}
.segmented-control a:focus{
  z-index: 20;
}
.segmented-control .active{
  z-index: 10;
  border-color: var(--token-color-foreground-action-hover);
  background-color: var(--token-color-foreground-action);
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.segmented-control .active path{
  fill: currentColor;
}
.segmented-control .active .status-icon-fill {
  fill: none;
}

.x-dropdown-list{
  max-height: 410px;
}
.x-dropdown-list.hds-dropdown__content{
  min-width: 175px;
}
.x-dropdown-list.non-floating-list{
  position: relative;
  width: 100%;
  max-width: none;
}
.x-dropdown-list.non-floating-list .x-dropdown-list-container{
  height: 100%;
  border-radius: 0px;
}
.x-dropdown-list.non-floating-list .x-dropdown-list-scroll-container{
  border-radius: 0px;
}
.x-dropdown-list.non-floating-list .x-dropdown-list-items{
  padding-bottom: 1rem;
}
.x-dropdown-list.theme--neutral .x-dropdown-list-item-link{
  color: inherit;
}
.x-dropdown-list.theme--neutral .x-dropdown-list-item-link:not(.is-aria-selected) .check{
  color: inherit;
}
.x-dropdown-list.theme--neutral .x-dropdown-list-item-link.is-aria-selected{
  background-color: var(--token-color-surface-interactive-hover);
  color: inherit;
}
.x-dropdown-list.theme--neutral .x-dropdown-list-item-link.is-aria-selected .doc-status-fade{
  --tw-gradient-from: var(--token-color-surface-interactive-hover) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.x-dropdown-list.theme--neutral .x-dropdown-list-item-link.is-aria-selected .flight-icon{
  color: inherit;
}

.x-dropdown-list-container{
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 0.375rem;
}

.x-dropdown-list-default-loading-container{
  margin-top: 0.5rem;
  margin-bottom: 1rem;
  display: grid;
  height: 20px;
  width: 100%;
  place-items: center;
}

.x-dropdown-list-input-container{
  position: relative;
  border-bottom-width: 1px;
  border-bottom-color: var(--token-color-border-faint);
  padding: 0.25rem;
}

.x-dropdown-list-scroll-container{
  position: relative;
  width: 100%;
  overflow: auto;
  border-bottom-right-radius: 0.375rem;
  border-bottom-left-radius: 0.375rem;
}

.x-dropdown-list-default-empty-state{
  padding: 3rem;
  text-align: center;
  color: var(--token-color-foreground-faint);
}

.x-dropdown-list-items{
  padding-top: 0.25rem;
  padding-bottom: 0.375rem;
}

.x-dropdown-list-item{
  display: flex;
}

.x-dropdown-list-item-link{
  display: flex;
  width: 100%;
  align-items: center;
  padding-top: 7px;
  padding-bottom: 7px;
  padding-left: 0.625rem;
  padding-right: 2rem;
  font-size: var(--token-typography-body-200-font-size);
  line-height: var(--token-typography-body-200-line-height);
  text-decoration-line: none;
  color: var(--token-color-foreground-primary);
}
.x-dropdown-list-item-link.is-aria-selected{
  background-color: var(--token-color-foreground-action);
  color: var(--token-color-foreground-high-contrast);
  outline: 2px solid transparent;
  outline-offset: 2px;
  background-color: var(--token-color-surface-interactive-hover);
  color: var(--token-color-foreground-primary);
}
.x-dropdown-list-item-link.is-aria-selected .flight-icon{
  color: inherit;
}
.x-dropdown-list-item-link:not(.is-aria-selected) .check{
  color: var(--token-color-foreground-action);
}
.x-dropdown-list-item-link .flight-icon{
  flex-shrink: 0;
}
.x-dropdown-list-item-link .flight-icon .x-dropdown-list-item{
  display: flex;
}
.x-dropdown-list-item-link .sort-icon{
  margin-left: 0.75rem;
  margin-right: 0.75rem;
}

.checkable-item{
  display: grid;
  grid-template-columns: 16px auto;
  grid-template-areas: "check label";
}
.checkable-item.checkmark-position--trailing {
  grid-template-columns: auto 16px;
  grid-template-areas: "label check";
}
.checkable-item.has-count {
  grid-template-columns: 16px auto 60px;
  grid-template-areas: "check label count";
}
.checkable-item.has-count.checkmark-position--trailing {
  grid-template-areas: "label count check";
  grid-template-columns: auto 60px 16px;
}
.checkable-item .checkable-item-content {
  grid-area: label;
}
.checkable-item .checkable-item-count {
  grid-area: count;
}
.checkable-item .check {
  grid-area: check;
}

.x-dropdown-list-toggle-select{
  position: relative;
  display: flex;
  min-height: 36px;
  width: 100%;
  align-items: center;
  justify-content: flex-start;
  gap: 0px;
  border-radius: 5px;
  border-width: 1px;
  border-color: var(--token-form-control-base-border-color-default);
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  line-height: 1;
  background-color: var(--token-form-control-base-surface-color-default);
  color: var(--token-color-foreground-primary);
}
.x-dropdown-list-toggle-select .flight-icon{
  flex-shrink: 0;
}
.x-dropdown-list-toggle-select.hds-button{
  justify-content: flex-start;
}
.x-dropdown-list-toggle-select.hds-button--size-medium{
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
.x-dropdown-list-toggle-select .hds-button__icon + .hds-button__text{
  margin-left: 0.625rem;
}
.x-dropdown-list-toggle-select:hover, .x-dropdown-list-toggle-select.mock-hover {
  border-color: var(--token-form-control-base-border-color-hover);
}
.x-dropdown-list-toggle-select:focus, .x-dropdown-list-toggle-select.mock-focus {
  border-color: var(--token-color-focus-action-internal);
  outline: 3px solid var(--token-color-focus-action-external);
  outline-offset: 0px;
}
.x-dropdown-list-toggle-select.hds-button--color-secondary:not(:hover){
  background-color: var(--token-color-surface-primary);
}

.editable-field-container{
  margin-left: -5px;
  margin-right: -5px;
}

.editable-field{
  position: relative;
  display: flex;
  width: 100%;
}
.editable-field.saving {
  opacity: 0.5;
}
.editable-field.saving .edit-affordance{
  visibility: visible;
}
.editable-field.saving .edit-affordance::before{
  background-image: linear-gradient(to left, var(--tw-gradient-stops));
  opacity: 1;
}
.editable-field.saving .field-toggle.field-toggle:not(.read-only):hover, .editable-field.saving .field-toggle.field-toggle:not(.read-only):focus-visible .editable-field.saving .field-toggle.field-toggle:not(.read-only):focus{
  background-color: transparent;
}
.editable-field.button-affordance .field-toggle:not(.read-only):hover, .editable-field.button-affordance .field-toggle:not(.read-only):focus-visible, .editable-field.button-affordance .field-toggle:not(.read-only):focus{
  border-color: var(--token-color-border-strong);
  background-color: var(--token-color-page-primary);
}
.editable-field textarea,
.editable-field .field-toggle{
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 7px;
  padding-bottom: 7px;
  font-size: var(--token-typography-body-200-font-size);
  line-height: var(--token-typography-body-200-line-height);
  font-weight: var(--token-typography-font-weight-regular);
}
.editable-field .field-toggle{
  display: flex;
  width: 100%;
  align-items: center;
  border-radius: 5px;
  border-width: 1px;
  border-color: transparent;
  color: inherit;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  min-height: 36px;
  overflow-wrap: break-word;
}
.editable-field .field-toggle:not(.read-only):hover, .editable-field .field-toggle:not(.read-only):focus-visible, .editable-field .field-toggle:not(.read-only):focus{
  --tw-bg-opacity: 1;
  background-color: rgb(234 235 237 / var(--tw-bg-opacity, 1));
}
.editable-field .field-toggle:not(.read-only):hover .edit-affordance, .editable-field .field-toggle:not(.read-only):focus-visible .edit-affordance, .editable-field .field-toggle:not(.read-only):focus .edit-affordance{
  visibility: visible;
}
.editable-field .field-toggle:not(.read-only):hover .edit-affordance::before, .editable-field .field-toggle:not(.read-only):focus-visible .edit-affordance::before, .editable-field .field-toggle:not(.read-only):focus .edit-affordance::before{
  background-image: linear-gradient(to left, var(--tw-gradient-stops));
  opacity: 1;
}
.editable-field .field-toggle:not(.read-only):hover .edit-affordance .flight-icon, .editable-field .field-toggle:not(.read-only):focus-visible .edit-affordance .flight-icon, .editable-field .field-toggle:not(.read-only):focus .edit-affordance .flight-icon{
  position: relative;
  animation: slideLeftPx 200ms ease-out, fadeIn 100ms ease-out;
}
.editable-field .field-toggle:not(.read-only) h1{
  color: var(--token-color-foreground-strong);
}
.editable-field .field-toggle:not(.read-only) .empty-state-text{
  color: var(--token-color-foreground-disabled);
}
.editable-field .field-toggle h1 {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
}
.editable-field .field-toggle p {
  color: inherit;
}
.editable-field .edit-affordance{
  visibility: hidden;
  position: absolute;
  right: 1px;
  top: 1px;
  display: flex;
  height: calc(100% - 2px);
  width: 3.5rem;
  justify-content: flex-end;
  overflow: hidden;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-right: 7px;
}
.editable-field .edit-affordance::before {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.editable-field .edit-affordance .flight-icon-edit{
  margin-right: 1px;
}
.editable-field .edit-affordance.gray::before{
  --tw-gradient-from: #eaebed var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(234 235 237 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(234 235 237 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #eaebed var(--tw-gradient-via-position), var(--tw-gradient-to);
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}
.editable-field .edit-affordance.light-gray::before{
  --tw-gradient-from: var(--token-color-page-faint) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--token-color-page-faint) var(--tw-gradient-via-position), var(--tw-gradient-to);
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}
.editable-field .loading-indicator{
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
}
.editable-field .edit-overlay-affordance{
  position: absolute;
  left: -5px;
  bottom: 0px;
  display: flex;
  width: calc(100% + 10px);
  --tw-translate-y: 100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  gap: 0.25rem;
  padding-top: 0.625rem;
  padding-left: 5px;
  padding-bottom: 80px;
}
.editable-field .edit-overlay-affordance::before {
  content: "";
  position: absolute;
  left: 0px;
  height: 100%;
  width: 100%;
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
  --tw-gradient-from: #fff var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(255 255 255 / 0.9) var(--tw-gradient-via-position), var(--tw-gradient-to);
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}
.editable-field .edit-overlay-affordance button:first-child {
  animation: slideDownXs 150ms cubic-bezier(0, 1, 0.5, 1), fadeIn 80ms ease-in-out;
}
.editable-field .edit-overlay-affordance button:nth-child(2) {
  animation: slideDownXs 350ms cubic-bezier(0, 1, 0.5, 1), fadeIn 120ms ease-in-out;
}

.ember-application .hds-modal{
  overflow: visible;
}
.ember-application .hds-modal .search-container{
  position: sticky;
  top: 0px;
  z-index: 10;
  background-color: var(--token-color-page-primary);
  padding-left: 1rem;
  padding-right: 1rem;
  padding-bottom: 1rem;
  padding-top: 1rem;
}
.ember-application .hds-modal .ember-basic-dropdown{
  margin-bottom: 0.5rem;
  margin-top: 0.25rem;
  width: 100%;
}
.ember-application .hds-modal__body{
  overflow-y: visible;
}
.ember-application .hds-modal .hds-form-field--layout-vertical .hds-form-field__control:not(:last-child){
  margin-bottom: 0px;
}
.ember-application .hds-modal.search-window{
  overflow: hidden;
}
.ember-application .hds-modal.search-window .hds-modal__body{
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0px;
}
.ember-application .hds-modal.search-window .hds-modal__footer{
  position: relative;
}
.ember-application .hds-modal.search-window .x-dropdown-list{
  max-height: 100%;
  overflow: auto;
}
.ember-application .hds-modal.search-window .x-dropdown-list-container{
  height: 100%;
  border-radius: 0px;
}
.ember-application .hds-modal.search-window .x-dropdown-list-scroll-container{
  border-radius: 0px;
}
.ember-application .hds-modal.search-window .x-dropdown-list-items{
  padding-bottom: 1rem;
}
.ember-application .hds-modal.search-window .x-dropdown-list-item-link{
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.multiselect {
  min-width: 300px;
  background-image: var(--token-form-select-background-image-data-url);
  background-position: right var(--token-form-select-background-image-position-right-x) top var(--token-form-select-background-image-position-top-y);
  background-size: var(--token-form-select-background-image-size);
  background-repeat: no-repeat;
  box-shadow: var(--token-elevation-low-box-shadow);
  background-color: var(--token-form-control-base-surface-color-default);
  border-color: var(--token-form-control-base-border-color-default);
  padding: 0.25rem;
}
.multiselect--narrow {
  min-width: 0;
}
.multiselect.selection-made{
  background-image: none;
}
.multiselect.selection-made input{
  display: none;
}
.multiselect.ember-power-select-trigger, .multiselect.ember-power-select-trigger-multiple-input {
  line-height: 1;
  height: auto;
  min-height: 36px;
}
.multiselect:hover, .multiselect.mock-hover {
  border-color: var(--token-form-control-base-border-color-hover);
}
.multiselect:focus, .multiselect.mock-focus {
  border-color: var(--token-color-focus-action-internal);
  outline: 3px solid var(--token-color-focus-action-external);
  outline-offset: 0px;
}
.multiselect .ember-power-select-status-icon {
  display: none;
}
.multiselect .ember-power-select-multiple-options{
  margin-right: 1.5rem;
  display: flex;
  height: 100%;
  width: 100%;
  flex-wrap: wrap;
  gap: 0.625rem;
}
.multiselect .ember-power-select-option{
  padding-top: 1px;
  padding-bottom: 1px;
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}
.multiselect .ember-power-select-option:first-child{
  margin-top: 3px;
}
.multiselect .ember-power-select-option:last-child{
  margin-bottom: 3px;
}
.multiselect .ember-power-select-trigger-multiple-input{
  min-width: 80px;
  padding-left: 3px;
  padding-right: 3px;
  font-size: var(--token-typography-body-200-font-size);
  line-height: var(--token-typography-body-200-line-height);
}
.multiselect .ember-power-select-trigger-multiple-input::-moz-placeholder{
  color: var(--token-color-foreground-disabled);
}
.multiselect .ember-power-select-trigger-multiple-input::placeholder{
  color: var(--token-color-foreground-disabled);
}
.multiselect .ember-power-select-trigger-multiple-input {
  color: var(--token-color-foreground-primary);
}
.multiselect .ember-power-select-trigger-multiple-input::-webkit-search-cancel-button {
  display: none;
}
.multiselect .ember-power-select-multiple-option{
  position: relative;
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  border-width: 0px;
  color: var(--token-color-foreground-strong);
  color: var(--token-color-foreground-primary);
  margin-top: -0.25rem;
  margin-bottom: -0.25rem;
  margin-left: -3px;
  margin-right: -0.25rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-right: 0px;
  padding-left: 3px;
  padding-right: 1.75rem;
}
.multiselect .ember-power-select-multiple-option .ember-power-select-multiple-remove-btn{
  position: absolute;
  right: 0.25rem;
  z-index: 10;
  display: grid;
  height: 1.25rem;
  width: 1.25rem;
  flex-shrink: 0;
  place-items: center;
  border-radius: 0.125rem;
  padding-bottom: 1px;
  color: var(--token-color-foreground-primary);
}
.multiselect .ember-power-select-multiple-option .ember-power-select-multiple-remove-btn:hover {
  background-color: var(--token-color-surface-interactive-hover);
}
.multiselect .ember-power-select-multiple-option .ember-power-select-multiple-remove-btn:focus, .multiselect .ember-power-select-multiple-option .ember-power-select-multiple-remove-btn:active {
  outline: 2px solid var(--token-color-focus-action-internal);
}
.multiselect .ember-power-select-multiple-option .person .person-email {
  color: var(--token-color-foreground-primary) !important;
}

.custom-people-select {
  position: relative;
  border: var(--token-form-control-border-width) solid var(--token-form-control-base-border-color-default);
  border-radius: var(--token-form-control-border-radius);
  padding: 6px 36px 6px 8px;
  min-height: 40px;
  background: var(--token-form-control-base-surface-color-default);
  color: var(--token-color-foreground-primary);
  cursor: text;
}
.custom-people-select:focus-within {
  border-color: var(--token-color-focus-action-external);
  box-shadow: var(--token-elevation-low-box-shadow);
}
.custom-people-select .selected-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--token-color-surface-faint);
  border: 1px solid var(--token-color-border-strong);
  border-radius: 6px;
  padding: 4px 8px 4px 4px;
  font-size: 14px;
  color: var(--token-color-foreground-primary);
  white-space: nowrap;
}
.custom-people-select .selected-name {
  font-weight: 500;
  color: var(--token-color-foreground-primary);
}
.custom-people-select .remove-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 0 2px;
  color: var(--token-color-foreground-faint);
  transition: color 0.1s;
  margin-left: 2px;
}
.custom-people-select .remove-btn:hover {
  color: var(--token-color-foreground-primary);
}
.custom-people-select .search-input-inline {
  flex: 1;
  min-width: 120px;
  border: none;
  outline: none;
  padding: 4px;
  font-size: 14px;
  background: transparent;
  color: var(--token-color-foreground-primary);
}
.custom-people-select .search-input-inline::-moz-placeholder {
  color: var(--token-color-foreground-disabled);
}
.custom-people-select .search-input-inline::placeholder {
  color: var(--token-color-foreground-disabled);
}
.custom-people-select .search-input-inline:disabled {
  background: transparent;
  cursor: not-allowed;
  color: var(--token-color-foreground-disabled);
}
.custom-people-select.selection-made .search-input-inline {
  display: none;
}
.custom-people-select .caret-icon-inline {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--token-color-foreground-faint);
  pointer-events: none;
  flex-shrink: 0;
}
.custom-people-select .dropdown-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--token-form-control-base-surface-color-default);
  border: var(--token-form-control-border-width) solid var(--token-form-control-base-border-color-default);
  border-radius: var(--token-form-control-border-radius);
  max-height: 300px;
  overflow-y: auto;
  z-index: 1000;
  box-shadow: var(--token-elevation-low-box-shadow);
}
.custom-people-select .dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  transition: background-color 0.1s;
  color: var(--token-color-foreground-primary);
}
.custom-people-select .dropdown-item:hover, .custom-people-select .dropdown-item.is-focused {
  background-color: var(--token-color-surface-interactive-hover);
}
.custom-people-select .dropdown-item.is-focused {
  outline: 2px solid var(--token-color-focus-action-external);
  outline-offset: -2px;
}
.custom-people-select .option-details {
  flex: 1;
  min-width: 0;
}
.custom-people-select .option-name {
  font-weight: 500;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--token-color-foreground-primary);
}
.custom-people-select .option-email {
  font-size: 12px;
  color: var(--token-color-foreground-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.custom-people-select .dropdown-message {
  padding: 12px;
  text-align: center;
  color: var(--token-color-foreground-faint);
  font-size: 14px;
}

:root[data-theme=dark] .multiselect .ember-power-select-multiple-option {
  background-color: var(--token-color-surface-strong);
  border: 1px solid var(--token-color-border-faint);
  border-radius: 6px;
}
:root[data-theme=dark] .multiselect .ember-power-select-multiple-option .person {
  background: none;
  border: none;
  padding: 4px 8px;
}
:root[data-theme=dark] .multiselect .ember-power-select-multiple-option .person .person-email {
  color: var(--token-color-foreground-primary) !important;
  font-weight: 500;
}
:root[data-theme=dark] .multiselect .ember-power-select-multiple-option .person img {
  border: 1px solid var(--token-color-border-faint);
}

.overflow-button{
  pointer-events: auto;
  position: relative;
  z-index: 10;
  height: 26px;
  width: 26px;
  border-radius: 0.25rem;
  color: var(--token-color-foreground-faint);
  border: 1px solid transparent;
}
.overflow-button:hover:not(.disabled):not(:focus), .overflow-button:focus{
  background-color: var(--token-color-surface-faint);
  color: var(--token-color-foreground-primary);
  border-color: var(--token-color-border-faint);
}
.overflow-button.open{
  background-color: var(--token-color-surface-faint);
  color: var(--token-color-foreground-primary);
  border-color: var(--token-color-border-faint);
}

.overflow-menu-item-button{
  display: flex;
  width: 100%;
}

.overflow-menu-item-button > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}

.overflow-menu-item-button{
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  line-height: 1;
}
.overflow-menu-item-button > .flight-icon{
  color: inherit;
}

.overflow-button-container{
  pointer-events: none;
  position: absolute;
  top: 3px;
  right: -1px;
  display: flex;
  width: 4rem;
  justify-content: flex-end;
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
  background-image: linear-gradient(to left, var(--tw-gradient-stops));
  --tw-gradient-from: var(--token-color-page-primary) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--token-color-page-primary) var(--tw-gradient-via-position), var(--tw-gradient-to);
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}

.page{
  display: flex;
  min-height: 100%;
  flex: 1 1 0%;
  flex-direction: column;
  align-items: center;
  padding-left: 2rem;
  padding-right: 2rem;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

.page--fixed-width{
  width: 100%;
}

@media (min-width: 640px){
  .page--fixed-width{
    max-width: 640px;
  }
}

@media (min-width: 768px){
  .page--fixed-width{
    max-width: 768px;
  }
}

@media (min-width: 1024px){
  .page--fixed-width{
    max-width: 1024px;
  }
}

@media (min-width: 1280px){
  .page--fixed-width{
    max-width: 1280px;
  }
}

@media (min-width: 1536px){
  .page--fixed-width{
    max-width: 1536px;
  }
}

.page--fixed-width{
  display: flex;
  width: 100%;
  max-width: 1024px;
  flex-direction: column;
}

.page--fixed-width > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}

.page--fixed-width{
  padding-bottom: 3rem;
}

.hds-table{
  margin-bottom: 2rem;
  table-layout: fixed;
  border-width: 0px;
}
.hds-table thead{
  position: sticky;
  top: 0px;
  z-index: 10;
  background-color: var(--token-color-page-primary);
}
.hds-table th,
.hds-table td .inner{
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.hds-table th,
.hds-table td{
  padding-right: 1.25rem;
  text-align: left;
  vertical-align: top;
  border-bottom-width: 1px;
  border-bottom-color: var(--token-color-border-faint);
}
.hds-table th:last-child:not(:first-child),
.hds-table td:last-child:not(:first-child){
  padding-right: 0px;
  text-align: right;
}
.hds-table th.name,
.hds-table td.name{
  width: 15rem;
}
@media (min-width: 1024px){
  .hds-table th.name,
.hds-table td.name{
    width: auto;
  }
}
.hds-table th.name,
.hds-table td.name{
  padding-left: 0px;
}
.hds-table th.type,
.hds-table td.type{
  width: 6rem;
}
.hds-table th.status,
.hds-table td.status{
  width: 8rem;
}
.hds-table th.product,
.hds-table td.product{
  width: 10rem;
}
.hds-table th.owner,
.hds-table td.owner{
  width: 11rem;
}
.hds-table th.time,
.hds-table td.time{
  width: 7rem;
}
.hds-table tbody td .inner,
.hds-table tbody th .inner{
  position: relative;
}
.hds-table tbody + tbody th{
  padding-top: 2.5rem;
}
.hds-table tbody tr{
  position: relative;
}
.hds-table tbody tr:focus-within td, .hds-table tbody tr:hover td{
  background-color: var(--token-color-surface-faint);
}
.hds-table tbody tr:has(.name a:focus-visible){
  position: relative;
  z-index: 10;
}
.hds-table tbody tr:has(.name a:focus-visible) .name::before {
  content: "";
  position: absolute;
  left: -0.5rem;
  top: 1px;
  height: calc(100% - 1px);
  width: calc(100% + 16px);
  border-radius: 0.25rem;
  border-top-width: 1px;
  background-color: var(--token-color-surface-faint);
  outline-style: solid;
  outline-width: 2px;
  outline-color: var(--token-color-border-strong);
}
.hds-table tbody tr:has(.name a:focus-visible) td{
  border-top-color: transparent;
}
.hds-table tbody tr:last-child td{
  border-bottom-width: 0px;
}

.sort-icon{
  position: absolute;
  left: -0.375rem;
  top: 50%;
  display: flex;
  --tw-translate-y: -50%;
  --tw-translate-x: -100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@keyframes sortIconIn {
  from {
    transform: translateX(2px);
  }
}
.sortable-table-header{
  position: relative;
}
.sortable-table-header .sort-icon{
  color: var(--token-color-foreground-faint);
}
.sortable-table-header:not(.active):hover .sort-icon, .sortable-table-header:not(.active):focus-within .sort-icon{
  visibility: visible;
}
.sortable-table-header:not(.active):hover .sort-icon > .flight-icon, .sortable-table-header:not(.active):focus-within .sort-icon > .flight-icon {
  animation: sortIconIn 85ms ease-in;
}
.sortable-table-header:not(.active) .sort-icon{
  visibility: hidden;
  color: var(--token-color-foreground-disabled);
}

.active-filter-list{
  display: flex;
  align-items: flex-start;
  gap: 0.25rem;
}
.active-filter-list h3{
  margin-right: 1rem;
  display: flex;
  height: 30px;
  flex-shrink: 0;
  align-items: center;
  font-weight: var(--token-typography-font-weight-semibold);
  color: var(--token-color-foreground-strong);
}
.active-filter-list .clear-all-link{
  margin-left: 0.5rem;
  display: flex;
  height: 30px;
  flex-shrink: 0;
  align-items: center;
  color: var(--token-color-foreground-faint);
  text-decoration-line: none;
}
.active-filter-list .clear-all-link:hover{
  color: var(--token-color-foreground-strong);
}

.active-filter-list-item{
  display: flex;
  height: 30px;
  align-items: center;
  border-radius: 9999px;
  border-width: 1px;
  border-color: var(--token-color-border-strong);
  background-color: var(--token-color-surface-interactive);
  padding-left: 0.875rem;
  padding-right: 0.875rem;
  text-decoration-line: none;
}
.active-filter-list-item:hover{
  background-color: var(--token-color-surface-interactive-hover);
}
.active-filter-list-item .flight-icon{
  margin-left: -0.375rem;
  margin-right: 0.25rem;
  --tw-scale-x: .75;
  --tw-scale-y: .75;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.x-dropdown-list.search-popover{
  max-height: 85vh;
}
.x-dropdown-list.search-popover::before {
  content: "";
  pointer-events: none;
  position: absolute;
  bottom: 0px;
  left: 0px;
  z-index: 10;
  height: 1.25rem;
  width: 100%;
  background-image: linear-gradient(to top, var(--tw-gradient-stops));
  --tw-gradient-from: var(--token-color-page-primary) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}
.x-dropdown-list.search-popover.no-matches .x-dropdown-list-items{
  display: none;
}
.x-dropdown-list.search-popover .x-dropdown-list-item-link{
  align-items: flex-start;
}
.x-dropdown-list.search-popover .x-dropdown-list-item-link.global-search-popover-header-link{
  align-items: center;
  padding-top: 0.625rem;
  padding-bottom: 10px;
}

.global-search-shortcut-affordance{
  position: absolute;
  right: 13px;
  top: 50%;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  color: var(--token-color-foreground-faint);
}

.global-search-section{
  border-bottom-width: 1px;
  border-bottom-color: var(--token-color-border-primary);
  padding-bottom: 0.375rem;
}

.search-popover .x-dropdown-list-items{
  position: absolute;
}
.search-popover h5{
  margin-bottom: 0.375rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.625rem;
  font-size: var(--token-typography-display-100-font-size);
  line-height: var(--token-typography-display-100-line-height);
  font-weight: var(--token-typography-font-weight-medium);
  color: var(--token-color-foreground-faint);
}

.global-search-result-title{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--token-typography-body-200-font-size);
  line-height: var(--token-typography-body-200-line-height);
  font-weight: var(--token-typography-font-weight-semibold);
  color: var(--token-color-foreground-strong);
}

.doc-thumbnail{
  position: relative;
  display: flex;
  width: 3rem;
  flex-shrink: 0;
  overflow: hidden;
}
.doc-thumbnail::after {
  content: "";
  pointer-events: none;
  position: absolute;
  z-index: 1;
  top: 1px;
  right: 1px;
  bottom: 1px;
  left: 1px;
  border-radius: 0.125rem;
  --tw-shadow: var(--token-surface-low-box-shadow);
  --tw-shadow-colored: var(--token-surface-low-box-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.doc-thumbnail .status-icon{
  position: absolute;
  opacity: 0.75;
  mix-blend-mode: multiply;
}
:root[data-theme=dark] .group .doc-thumbnail .status-icon {
  mix-blend-mode: normal;
}
:root[data-theme=dark] .group-hover\:bg-color-page-faint.doc-thumbnail .status-icon,
:root[data-theme=dark] .group-focus-within\:bg-color-page-faint.doc-thumbnail .status-icon {
  mix-blend-mode: normal;
}
.doc-thumbnail .status-icon{
  height: 2.25rem;
  width: 2.25rem;
}
.doc-thumbnail .status-icon.approved{
  --tw-rotate: -6deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  fill: var(--token-color-palette-green-200);
  right: -7px;
  top: 5px;
}
.doc-thumbnail .status-icon.obsolete{
  fill: var(--token-color-palette-neutral-300);
  opacity: 0.6;
  left: -8px;
  top: 3px;
}
.doc-thumbnail .status-icon.archived{
  fill: var(--token-color-palette-neutral-500);
  opacity: 0.9;
  left: 50%;
  top: 2px;
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.doc-thumbnail .product-badge{
  border-top-left-radius: 0px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}
.doc-thumbnail.obsolete .product-badge{
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
  --tw-gradient-from: var(--token-color-palette-neutral-300) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: var(--token-color-palette-neutral-400) var(--tw-gradient-to-position);
  color: var(--token-color-palette-neutral-50);
}
.doc-thumbnail.medium{
  width: 72px;
}
.doc-thumbnail.medium .status-icon{
  height: 52px;
  width: 52px;
}
.doc-thumbnail.medium .status-icon.approved{
  right: -0.5rem;
  top: 0.25rem;
}
.doc-thumbnail.medium .status-icon.obsolete{
  top: 3px;
  left: -0.625rem;
}
.doc-thumbnail.medium .status-icon.archived{
  left: 50%;
  top: 3px;
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.doc-thumbnail.large{
  width: 7rem;
}
.doc-thumbnail.large::after{
  border-radius: 0.25rem;
  --tw-shadow: var(--token-surface-mid-box-shadow);
  --tw-shadow-colored: var(--token-surface-mid-box-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.doc-thumbnail.large .product-badge{
  border-bottom-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}
.doc-thumbnail.large .status-icon{
  top: 8px;
  height: 84px;
  width: 84px;
}
.doc-thumbnail.large .status-icon.approved{
  right: -0.875rem;
}
.doc-thumbnail.large .status-icon.obsolete{
  left: -1.25rem;
}
.doc-thumbnail.large .status-icon.archived{
  left: 50%;
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.doc-thumbnail .folder-affordance{
  position: absolute;
  left: -0.25rem;
  width: auto;
  --tw-scale-x: -1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  color: var(--token-color-border-primary);
  overflow: visible;
  height: calc(100% + 2px);
  top: -1px;
}

.tile .vertical-line{
  color: var(--token-color-foreground-faint);
  opacity: 0.5;
}
.tile .tags{
  display: flex;
  flex-shrink: 0;
  gap: 0.25rem;
}
.tile h3{
  font-size: var(--token-typography-display-300-font-size);
  line-height: var(--token-typography-display-300-line-height);
  font-weight: var(--token-typography-font-weight-semibold);
  color: var(--token-color-foreground-strong);
}
.tile a{
  pointer-events: auto;
}
.tile a[disabled]{
  pointer-events: none;
}

.divided-list > li:hover .drag-handle-container.shaded::before, .divided-list > li:focus-within .drag-handle-container.shaded::before {
  content: "";
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  background-color: var(--token-color-surface-faint);
}
.divided-list > li:not(:last-child):hover .drag-handle-container, .divided-list > li:not(:last-child):focus-within .drag-handle-container{
  border-bottom-color: var(--token-color-border-faint);
}
.divided-list > li:not(:first-child):hover .drag-handle-container, .divided-list > li:not(:first-child):focus-within .drag-handle-container{
  border-top-color: var(--token-color-border-faint);
}
.divided-list > li .drag-handle-container{
  border-top-width: 1px;
  border-bottom-width: 1px;
  border-top-color: transparent;
  border-bottom-color: transparent;
}

.doc-status .progress-bar{
  height: 0.125rem;
  border-radius: 9999px;
  background-color: var(--token-color-palette-neutral-200);
}
.doc-status--wip li:nth-child(1){
  background-color: var(--token-color-palette-blue-200);
}
.doc-status--in-review li:nth-child(1){
  background-color: var(--token-color-palette-purple-200);
  opacity: 0.75;
}
.doc-status--in-review li:nth-child(2){
  height: 0.25rem;
  background-color: var(--token-color-palette-purple-200);
}
.doc-status--approved .progress-bar{
  background-color: var(--token-color-palette-green-200);
  opacity: 0.75;
}
.doc-status--approved li:nth-child(3){
  height: 0.25rem;
  opacity: 1;
}

.sortable-table-header{
  position: relative;
}
.sortable-table-header .sort-icon{
  position: absolute;
  left: -0.375rem;
  top: 50%;
  display: flex;
  --tw-translate-y: -50%;
  --tw-translate-x: -100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  color: var(--token-color-foreground-faint);
}
@keyframes sortIconIn {
  from {
    transform: translateX(2px);
  }
}
.sortable-table-header:not(.active):hover .sort-icon, .sortable-table-header:not(.active):focus-within .sort-icon{
  visibility: visible;
}
.sortable-table-header:not(.active):hover .sort-icon > .flight-icon, .sortable-table-header:not(.active):focus-within .sort-icon > .flight-icon {
  animation: sortIconIn 85ms ease-in;
}
.sortable-table-header:not(.active) .sort-icon{
  visibility: hidden;
  color: var(--token-color-foreground-disabled);
}

.preview-card{
  position: sticky;
  top: 1rem;
}

.preview-card > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}

.preview-card{
  padding: 1rem;
  background: var(--token-color-surface-faint);
}

.project-screen .editable-field{
  margin-left: -0.5rem;
  margin-right: -0.5rem;
}
.project-screen .editable-field .field-toggle:not(.read-only):hover, .project-screen .editable-field .field-toggle:not(.read-only):focus-visible, .project-screen .editable-field .field-toggle:not(.read-only):focus{
  background-color: var(--token-color-page-primary);
  --tw-shadow: var(--token-surface-low-box-shadow);
  --tw-shadow-colored: var(--token-surface-low-box-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.project-screen .editable-field .edit-affordance.gray::before{
  --tw-gradient-from: var(--token-color-page-primary) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--token-color-page-primary) var(--tw-gradient-via-position), var(--tw-gradient-to);
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}
.project-screen .editable-field .edit-affordance.light-gray::before{
  --tw-gradient-from: var(--token-color-page-primary) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--token-color-page-primary) var(--tw-gradient-via-position), var(--tw-gradient-to);
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}
.project-screen .edit-overlay-affordance::before{
  display: none;
}
.project-screen .edit-overlay-affordance{
  padding-bottom: 0px;
  filter: drop-shadow(0px 20px 15px white);
}
.project-screen textarea:focus,
.project-screen .active textarea {
  filter: drop-shadow(0px 30px 15px white);
}
.project-screen .project-title .field-toggle,
.project-screen .project-title textarea,
.project-screen .project-description .field-toggle,
.project-screen .project-description textarea{
  padding-left: 0.5rem;
  padding-right: 2.5rem;
  align-items: flex-start;
}
.project-screen .project-title .field-toggle,
.project-screen .project-title textarea{
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-size: 45px;
  line-height: 55px;
  font-weight: var(--token-typography-font-weight-bold);
  color: var(--token-color-foreground-strong);
}
.project-screen .project-description .field-toggle,
.project-screen .project-description textarea{
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  font-size: var(--token-typography-display-400-font-size);
  line-height: var(--token-typography-display-400-line-height);
  color: var(--token-color-foreground-primary);
}
.project-screen .add-project-resource-button:hover, .project-screen .add-project-resource-button:focus{
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.project-screen .project-resource{
  position: relative;
}
.project-screen .project-resource .title{
  font-size: var(--token-typography-display-200-font-size);
  line-height: var(--token-typography-display-200-line-height);
  font-weight: var(--token-typography-font-weight-semibold);
  color: var(--token-color-foreground-strong);
}
.project-screen .project-resource .owner{
  color: var(--token-color-foreground-faint);
}
.project-screen .project-resource .overflow-button:hover .button-affordance, .project-screen .project-resource .overflow-button:focus .button-affordance, .project-screen .project-resource .overflow-button:active .button-affordance, .project-screen .project-resource .overflow-button:focus-visible .button-affordance, .project-screen .project-resource .overflow-button.open .button-affordance{
  background-color: var(--token-color-page-primary);
}
.project-screen .project-resource .overflow-button-container{
  position: absolute;
  right: 0.25rem;
  top: 0.25rem;
  z-index: 10;
  height: calc(100% - 16px);
  align-items: flex-start;
  background-image: none;
}
.project-screen .highlight-affordance{
  border-color: transparent;
}

a:hover .interactive-card, a:focus .interactive-card{
  background-color: var(--token-color-surface-faint);
}

.notifications-container{
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 20;
}

@keyframes notificationIn {
  from {
    opacity: 0;
    transform: translateX(8px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes notificationOut {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(8px);
  }
}
.notification {
  animation: notificationIn 700ms cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}
.notification.exiting {
  animation: notificationOut 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

.flash-message .hds-toast{
  width: 400px;
}

/* Customize the scrollbar in Firefox */
@supports not selector(::-webkit-scrollbar) {
  .sidebar-body{
    padding-right: 1rem;
    scrollbar-color: var(--token-color-palette-neutral-300) transparent;
  }
}
.sidebar{
  position: relative;
  z-index: 10;
  display: flex;
  max-height: 100%;
  flex-direction: column;
  padding-bottom: 1rem;
}
.sidebar.collapsed{
  width: 4rem;
}
.sidebar.collapsed .sidebar-header{
  position: relative;
  height: 100%;
  flex-direction: column;
  padding-left: 0px;
  padding-right: 0px;
}
.sidebar.collapsed .sidebar-dashboard-link{
  position: absolute;
  left: 50%;
  bottom: 1rem;
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.sidebar.collapsed .sidebar-header-icon-controls{
  flex-direction: column-reverse;
  align-items: center;
}
.sidebar.collapsed .sidebar-header-icon-controls > :not([hidden]) ~ :not([hidden]){
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
  --tw-space-y-reverse: 1;
}
.sidebar .hds-button.in-review {
  border-color: rgba(66, 33, 91, 0.4);
  color: rgba(67, 32, 90, 0.6);
}
.sidebar .hds-button.approved {
  border-color: rgba(5, 66, 32, 0.4);
  color: rgba(5, 66, 33, 0.6);
}
.sidebar .editable-field-container{
  margin-top: 3px;
}
.sidebar .editable-field-container.select-input{
  margin-left: -8px;
  margin-right: -8px;
  margin-top: -8px;
  margin-bottom: -8px;
}
.sidebar .editable-field-container.select-input .x-dropdown-list-toggle-select{
  align-items: flex-start;
  padding-top: 7px;
  padding-bottom: 7px;
  padding-left: 6px;
  padding-right: 6px;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.sidebar .editable-field-container.select-input .x-dropdown-list-toggle-select:not(:hover, :focus, :focus-visible, .open) .flight-icon-caret{
  display: none;
}
.sidebar .editable-field .edit-overlay-affordance{
  padding-bottom: 125px;
}
.sidebar .editable-field .edit-overlay-affordance::before{
  --tw-gradient-from: var(--token-color-page-faint) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(250 250 250 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #fafafa90 var(--tw-gradient-via-position), var(--tw-gradient-to);
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}
.sidebar .sidebar-header{
  position: sticky;
  top: 0px;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  background-color: var(--token-color-page-faint);
  padding-left: 0.875rem;
  padding-right: 0.875rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.sidebar .sidebar-header.scrolled {
  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.15);
}
.sidebar .quarternary-button{
  position: relative;
}
@keyframes slideDownAndRotateLeft {
  to {
    transform: translateY(18px) rotate(-360deg);
  }
}
.sidebar .quarternary-button.out {
  animation: fadeOut 50ms ease-out 200ms forwards, slideDownAndRotateLeft 250ms ease-out forwards;
}
.sidebar .sidebar-header .quarternary-button{
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.sidebar .draft-visibility-button{
  display: flex;
  align-items: center;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  height: 38px;
  margin-top: -7px;
  margin-bottom: -7px;
}
.sidebar .sidebar-header-icon-controls{
  display: flex;
}
.sidebar .sidebar-body{
  position: relative;
  height: 100%;
  overflow-y: scroll;
}
.sidebar .sidebar-body .sidebar-body-container > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}
.sidebar .sidebar-body .sidebar-body-container{
  padding-top: 1.75rem;
  padding-bottom: 2.5rem;
  padding-left: 1.75rem;
  padding-right: 0.75rem;
}
.sidebar .sidebar-body {
  /* Style the scrollbar for Chrome, Safari, and Opera. */
}
.sidebar .sidebar-body::-webkit-scrollbar{
  width: 1rem;
  background-color: transparent;
}
.sidebar .sidebar-body::-webkit-scrollbar-thumb{
  min-height: 40px;
  border-top-left-radius: 9999px;
  border-top-right-radius: 9999px;
  border-bottom-right-radius: 9999px;
  border-bottom-left-radius: 9999px;
  border-width: 4.5px;
  border-style: solid;
  border-color: transparent;
  background-color: var(--token-color-palette-neutral-300);
  background-clip: padding-box;
}
.sidebar .sidebar-body::-webkit-scrollbar-thumb:hover{
  background-color: var(--token-color-palette-neutral-400);
}
.sidebar .document-title .field-toggle,
.sidebar .document-title textarea{
  font-size: var(--token-typography-display-300-font-size);
  line-height: var(--token-typography-display-300-line-height);
  font-weight: var(--token-typography-font-weight-semibold);
  color: var(--token-color-foreground-strong);
}
.sidebar .sidebar-section-header-container{
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
}
.sidebar .sidebar-section-header-container .quarternary-button{
  border-radius: 0.25rem;
  height: 26px;
  width: 26px;
  margin-right: -0.125rem;
}
.sidebar .sidebar-section-header-container .quarternary-button.disabled{
  cursor: not-allowed;
  opacity: 0.5;
}
.sidebar .sidebar-section-header{
  font-size: var(--token-typography-body-100-font-size);
  line-height: var(--token-typography-body-100-line-height);
  font-weight: var(--token-typography-font-weight-regular);
  color: var(--token-color-foreground-faint);
}
.sidebar .primary-textarea{
  min-height: 76px;
}
.sidebar .person-list{
  display: grid;
  width: 100%;
  gap: 0.625rem;
}
.sidebar .sidebar-footer{
  width: 100%;
  flex-shrink: 0;
  background-color: var(--token-color-page-faint);
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}

.related-resources-list{
  margin-top: 0.125rem;
  width: 100%;
}
.related-resources-list .related-resource-inner{
  position: relative;
  width: 100%;
}
.related-resources-list .related-resource-inner:hover:not(.disabled):not(:focus) .related-resource-link, .related-resources-list .related-resource-inner:focus-within .related-resource-link{
  border-width: 1px;
  border-color: var(--token-color-border-primary);
  background-color: var(--token-color-page-primary);
}
.related-resources-list .related-resource{
  position: relative;
  display: flex;
  width: 100%;
}
.related-resources-list .related-resource .highlight-affordance{
  border-radius: 0.25rem;
}
.related-resources-list .related-resource-link{
  position: relative;
  display: grid;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.5rem;
  border-radius: 0.25rem;
  padding-top: 5px;
  padding-bottom: 5px;
  margin-left: -8px;
  margin-right: -4px;
  width: calc(100% + 12px);
  padding-left: 8px;
  padding-right: 0.75rem;
  outline-offset: 3px;
  grid-template-columns: 22px auto;
}
.related-resources-list .related-resource-link .hermes-document + .external-resource{
  margin-top: 0.375rem;
}
.related-resources-list .related-resource-link{
  position: relative;
  display: grid;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.5rem;
  border-radius: 0.25rem;
  padding-top: 5px;
  padding-bottom: 5px;
  margin-left: -8px;
  margin-right: -4px;
  width: calc(100% + 12px);
  padding-left: 8px;
  padding-right: 0.75rem;
  outline-offset: 3px;
  grid-template-columns: 22px auto;
}
.related-resources-list .related-resource-link .hermes-document + .external-resource{
  margin-top: 0.375rem;
}

.related-resources-modal-container{
  position: relative;
  width: 100%;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.add-external-resource-container{
  position: relative;
  display: flex;
  width: 100%;
  align-items: center;
  margin-top: 1.5rem;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  height: 228px;
  animation: fadeIn 400ms ease-out;
}
.add-external-resource-container::before, .add-external-resource-container::after {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: -1;
  height: 100%;
  width: 100%;
  border-radius: 0.5rem;
  border-width: 1px;
}
.add-external-resource-container::before{
  border-color: var(--token-color-border-primary);
  background-color: var(--token-color-page-faint);
  opacity: 0;
  box-shadow: var(--token-elevation-low-box-shadow);
  animation: fadeIn 200ms ease-out 500ms forwards;
}
.add-external-resource-container::after{
  border-color: var(--token-color-border-highlight);
  background-color: var(--token-color-surface-highlight);
  animation: fadeIn 400ms ease-out, scaleIn 500ms ease-out, fadeOut 500ms ease-out 600ms forwards;
}

.external-resource-title-input{
  height: 2.75rem;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  font-size: var(--token-typography-display-300-font-size);
  line-height: var(--token-typography-display-300-line-height);
  font-weight: var(--token-typography-font-weight-semibold);
}
.external-resource-title-input::-moz-placeholder{
  opacity: 0.5;
}
.external-resource-title-input::placeholder{
  opacity: 0.5;
}

.external-resource-url{
  position: relative;
  width: 100%;
  color: var(--token-color-foreground-faint);
  margin-bottom: 1.25rem;
  padding-left: 1.5rem;
}
.external-resource-url .external-resource-favicon{
  height: 1rem;
  width: 1rem;
  position: absolute;
  left: 0px;
  top: 50%;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.related-resources-modal-body-header{
  width: 100%;
  text-align: center;
  font-size: var(--token-typography-display-300-font-size);
  line-height: var(--token-typography-display-300-line-height);
  font-weight: var(--token-typography-font-weight-semibold);
  color: var(--token-color-foreground-faint);
  opacity: 0.75;
}

.related-document-option{
  display: grid;
  height: 74px;
  width: 100%;
  place-items: center;
  border-radius: 0.25rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.highlight-affordance{
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  z-index: -1;
  border-width: 1px;
  border-color: var(--token-color-border-highlight);
  background-color: var(--token-color-surface-highlight);
}

.hds-badge{
  mix-blend-mode: multiply;
}

:root[data-theme=dark] .group .hds-badge {
  mix-blend-mode: normal;
}

:root[data-theme=dark] .group-hover\:bg-color-page-faint.hds-badge,
:root[data-theme=dark] .group-focus-within\:bg-color-page-faint.hds-badge {
  mix-blend-mode: normal;
}

.hds-badge__text{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jira-widget .jira-input{
  background-image: none;
}
.jira-widget .animated-icon {
  --scaleInFrom: 0.5;
  animation: scaleIn 450ms cubic-bezier(0, 1, 0.5, 1) forwards;
}
.jira-widget a:not(.disabled):hover .primary-text, .jira-widget a:not(.disabled):focus .primary-text{
  color: var(--token-color-foreground-primary);
  text-decoration-line: underline;
  text-decoration-color: var(--token-color-palette-neutral-300);
  text-underline-offset: 3px;
}
.jira-widget .overflow-button-container{
  position: relative;
  top: auto;
  right: auto;
  margin-right: 0.25rem;
  margin-left: 0.5rem;
  width: auto;
  background-image: none;
}

.add-jira-issue-button{
  padding-top: 0px;
  padding-bottom: 0px;
  padding-left: 8px;
  padding-right: 14px;
}
.add-jira-issue-button:hover, .add-jira-issue-button:focus{
  border-radius: 5px;
  --tw-shadow: var(--token-surface-low-box-shadow);
  --tw-shadow-colored: var(--token-surface-low-box-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.attached-jira-issue{
  position: relative;
  display: grid;
  align-items: center;
  gap: 0.625rem;
  grid-template-columns: 16px 1fr min-content;
}

.product-link:hover .hds-badge--color-neutral{
  background-color: var(--token-color-palette-neutral-200);
}

.project-tile-grid {
  grid-template-columns: 1fr 120px 160px;
}
.project-tile-grid .title-and-description {
  grid-column: 1;
}
.project-tile-grid .title-and-description .inner {
  grid-template-columns: 20px 1fr;
}
.project-tile-grid .jira {
  grid-column: 2;
}
.project-tile-grid .products {
  grid-column: 3;
}

.facet-dropdown-popover{
  min-width: 175px;
}
.facet-dropdown-popover.medium:not(.has-input){
  width: 240px;
}
.facet-dropdown-popover.has-input{
  width: 320px;
}

.hermes-floating-ui-content:not(.non-floating-content){
  position: absolute;
  /* These positioning styles are overwritten by FloatingUI,
  * but they ensure that the tooltip isn't added to the bottom of the page,
  * where it could cause a reflow. This is especially important because
  * the Google Docs iframe responds to layout changes and might
  * otherwise jitter when a tooltip opened.
  */
  top: 0px;
  left: 0px;
}

.theme-toggle-modern {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--token-color-surface-faint);
  border: 1px solid var(--token-color-border-primary);
  border-radius: 8px;
  color: var(--token-color-foreground-primary);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.theme-toggle-modern:hover {
  background: var(--token-color-surface-interactive);
  border-color: var(--token-color-border-strong);
  transform: scale(1.05);
}
.theme-toggle-modern:active {
  transform: scale(0.95);
}
.theme-toggle-modern:focus {
  outline: 2px solid var(--token-color-focus-action-external);
  outline-offset: 2px;
}
.theme-toggle-modern .sun-icon,
.theme-toggle-modern .moon-icon {
  position: absolute;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.theme-toggle-modern .sun-icon {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}
.theme-toggle-modern .moon-icon {
  opacity: 0;
  transform: rotate(90deg) scale(0.5);
}

:root[data-theme=dark] .theme-toggle-modern .sun-icon {
  opacity: 0;
  transform: rotate(-90deg) scale(0.5);
}
:root[data-theme=dark] .theme-toggle-modern .moon-icon {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

.theme-toggle-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: transparent;
  border: 1px solid var(--token-color-border-primary, #ccc);
  border-radius: 6px;
  color: var(--token-color-foreground-primary, #000);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
  font-family: inherit;
}
.theme-toggle-btn:hover {
  background-color: var(--token-color-surface-interactive, #f5f5f5);
  border-color: var(--token-color-border-strong, #999);
}
.theme-toggle-btn:focus {
  outline: 2px solid var(--token-color-focus-action-internal);
  outline-offset: 2px;
}
.theme-toggle-btn:active {
  background-color: var(--token-color-surface-interactive-active);
}
.theme-toggle-btn {
  /* Size variants */
}
.theme-toggle-btn.small {
  padding: 6px 8px;
  font-size: var(--token-typography-body-100-font-size);
}
.theme-toggle-btn.small .theme-toggle__icon {
  width: 16px;
  height: 16px;
}
.theme-toggle-btn.medium {
  padding: 8px 12px;
  font-size: var(--token-typography-body-200-font-size);
}
.theme-toggle-btn.medium .theme-toggle__icon {
  width: 20px;
  height: 20px;
}
.theme-toggle-btn.large {
  padding: 12px 16px;
  font-size: var(--token-typography-body-300-font-size);
}
.theme-toggle-btn.large .theme-toggle__icon {
  width: 24px;
  height: 24px;
}

.theme-toggle__icon {
  flex-shrink: 0;
  color: var(--token-color-foreground-primary);
  transition: transform 200ms ease-in-out;
}
.theme-toggle:hover .theme-toggle__icon {
  transform: scale(1.1);
}

.theme-toggle__text {
  font-weight: var(--token-typography-font-weight-medium);
  white-space: nowrap;
}

/* Dark mode specific styles */
:root[data-theme=dark] .theme-toggle {
  background-color: var(--token-color-surface-primary);
  border-color: var(--token-color-border-primary);
  color: var(--token-color-foreground-primary);
}
:root[data-theme=dark] .theme-toggle:hover {
  background-color: var(--token-color-surface-interactive);
  border-color: var(--token-color-border-strong);
}
:root[data-theme=dark] .theme-toggle:focus {
  outline-color: var(--token-color-focus-action-internal);
}
:root[data-theme=dark] .theme-toggle:active {
  background-color: var(--token-color-surface-interactive-active);
}
:root[data-theme=dark] .theme-toggle__icon {
  color: var(--token-color-foreground-primary);
}

/* Accessibility improvements */
.theme-toggle {
  /* Screen reader only text */
}
.theme-toggle .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
  clip: rect(0, 0, 0, 0);
}

.product-badge{
  position: absolute;
  background-color: var(--token-color-palette-neutral-200);
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
  --tw-gradient-from: transparent var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}
.product-badge.hcp{
  --tw-gradient-from: var(--token-color-palette-neutral-500) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: var(--token-color-palette-neutral-600) var(--tw-gradient-to-position);
  color: var(--token-color-foreground-high-contrast);
}
.product-badge.nomad{
  --tw-gradient-from: var(--token-color-nomad-gradient-primary-start) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: var(--token-color-nomad-gradient-primary-stop) var(--tw-gradient-to-position);
  color: var(--token-color-nomad-foreground);
}
.product-badge.packer{
  --tw-gradient-from: var(--token-color-packer-gradient-primary-start) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: var(--token-color-packer-gradient-primary-stop) var(--tw-gradient-to-position);
  color: var(--token-color-packer-foreground);
}
.product-badge.vault{
  --tw-gradient-from: var(--token-color-vault-gradient-primary-start) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: var(--token-color-vault-gradient-primary-stop) var(--tw-gradient-to-position);
  color: var(--token-color-vault-foreground);
}
.product-badge.vagrant{
  --tw-gradient-from: var(--token-color-vagrant-gradient-primary-start) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: var(--token-color-vagrant-gradient-primary-stop) var(--tw-gradient-to-position);
  color: var(--token-color-vagrant-foreground);
}
.product-badge.consul{
  --tw-gradient-from: var(--token-color-consul-gradient-primary-start) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: var(--token-color-consul-gradient-primary-stop) var(--tw-gradient-to-position);
  color: var(--token-color-foreground-high-contrast);
}
.product-badge.terraform{
  --tw-gradient-from: var(--token-color-terraform-gradient-primary-start) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: var(--token-color-terraform-gradient-primary-stop) var(--tw-gradient-to-position);
  color: var(--token-color-foreground-high-contrast);
}
.product-badge.boundary{
  --tw-gradient-from: var(--token-color-boundary-gradient-primary-start) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: var(--token-color-boundary-gradient-primary-stop) var(--tw-gradient-to-position);
  color: var(--token-color-foreground-high-contrast);
}
.product-badge.waypoint{
  --tw-gradient-from: var(--token-color-waypoint-gradient-primary-start) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: var(--token-color-waypoint-gradient-primary-stop) var(--tw-gradient-to-position);
  color: var(--token-color-waypoint-foreground);
}

.hermes-logo{
  display: flex;
  flex-shrink: 0;
  align-items: center;
}

.hermes-logo > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(0.625rem * var(--tw-space-x-reverse));
  margin-left: calc(0.625rem * calc(1 - var(--tw-space-x-reverse)));
}

.hermes-logo{
  color: var(--token-color-foreground-primary);
}

.hermes-logo-text{
  font-size: var(--token-typography-display-300-font-size);
  line-height: var(--token-typography-display-300-line-height);
  font-weight: var(--token-typography-font-weight-semibold);
}

.hermes-logo-divider{
  position: relative;
  height: 1.5rem;
  width: 1px;
  background-color: var(--token-color-border-strong);
  --tw-content: none;
  content: var(--tw-content);
}

/*
 * Dark Mode Color Tokens for Hermes
 * 
 * These CSS custom properties provide dark mode variants of all HDS tokens.
 * Uses the :root[data-theme="dark"] selector to override light mode defaults.
 * 
 * Color strategy:
 * - Maintains semantic meaning (success = green, warning = orange, etc.)
 * - Ensures WCAG 2.1 AA contrast ratios (4.5:1 for normal text, 3:1 for large)
 * - Based on the existing Word add-in dark theme for consistency
 */
:root[data-theme=dark] {
  /* ===== Background Colors ===== */
  /* Form controls: input, textarea, select */
}
:root[data-theme=dark] input,
:root[data-theme=dark] textarea,
:root[data-theme=dark] select {
  background-color: var(--token-color-surface-primary) !important;
  color: var(--token-color-foreground-primary) !important;
  border-color: var(--token-color-border-primary) !important;
  caret-color: var(--token-color-foreground-primary) !important;
}
:root[data-theme=dark] {
  /* HDS form fields */
}
:root[data-theme=dark] .hds-form-field__input,
:root[data-theme=dark] .hds-form-field__textarea,
:root[data-theme=dark] .hds-form-textarea,
:root[data-theme=dark] .hds-form-text-input {
  background-color: var(--token-color-surface-primary) !important;
  color: var(--token-color-foreground-primary) !important;
  border-color: var(--token-color-border-primary) !important;
  caret-color: var(--token-color-foreground-primary) !important;
}
:root[data-theme=dark] {
  /* HDS form labels and helper text */
}
:root[data-theme=dark] .hds-form-label,
:root[data-theme=dark] .hds-form-field__label,
:root[data-theme=dark] .hds-form-helper-text,
:root[data-theme=dark] .hds-form-field__helper-text,
:root[data-theme=dark] .hds-form-field__error,
:root[data-theme=dark] .hermes-form-label,
:root[data-theme=dark] label {
  color: var(--token-color-foreground-primary) !important;
}
:root[data-theme=dark] {
  /* Form legend styling */
}
:root[data-theme=dark] legend,
:root[data-theme=dark] .hds-form-legend {
  color: var(--token-color-foreground-primary) !important;
}
:root[data-theme=dark] {
  --token-color-page-primary: #000000; /* Main page background - pitch black */
  --token-color-page-faint: #2a2a2a; /* Subtle background variations - visible contrast against black */
  --token-color-surface-primary: #242424; /* Card/panel backgrounds */
  --token-color-surface-faint: #1e1e1e; /* Subtle surface variations - lighter for contrast against black */
  --token-color-surface-strong: #333333; /* Elevated surfaces */
  --token-color-surface-interactive: #2a2a2a; /* Interactive surface base - lighter for contrast against black */
  --token-color-surface-interactive-hover: #3a3a3a; /* Interactive hover - more visible against black */
  --token-color-surface-interactive-active: #4a4a4a; /* Interactive active - brightest state */
  /* Status-specific surfaces */
  --token-color-surface-action: #0f1e42; /* Action surface (blue) - darker version of light mode */
  --token-color-surface-critical: #4a1a1a; /* Critical/error surface */
  --token-color-surface-warning: #3d2a1a; /* Warning surface */
  --token-color-surface-highlight: #2d1b3d; /* Highlight surface */
  /* ===== Text Colors ===== */
  --token-color-foreground-primary: #ffffff; /* Primary text - high contrast */
  --token-color-foreground-strong: #f0f0f0; /* Strong text */
  --token-color-foreground-high-contrast: #ffffff; /* Highest contrast text */
  --token-color-foreground-faint: #b0b0b0; /* Subtle/secondary text */
  --token-color-foreground-disabled: #666666; /* Disabled text */
  /* Interactive text colors */
  --token-color-foreground-action: #1060ff; /* Links and actions - same as light mode */
  --token-color-foreground-action-hover: #0c56e9; /* Action hover - same as light mode */
  --token-color-foreground-action-active: #0046d1; /* Action active - same as light mode */
  /* Status text colors */
  --token-color-foreground-critical: #ff6b6b; /* Error text */
  --token-color-foreground-critical-on-surface: #ff4757; /* Error on surface */
  --token-color-foreground-warning: #fb923c; /* Warning text */
  --token-color-foreground-warning-on-surface: #f39c12; /* Warning on surface */
  --token-color-foreground-highlight: #c084fc; /* Highlight text */
  /* ===== Border Colors ===== */
  --token-color-border-primary: #404040; /* Main borders */
  --token-color-border-faint: #353535; /* Subtle borders */
  --token-color-border-strong: #555555; /* Emphasized borders */
  --token-color-border-action: #1060ff; /* Action borders - same blue as actions */
  --token-color-border-critical: #d83b01; /* Error borders */
  --token-color-border-warning: #ff8c00; /* Warning borders */
  --token-color-border-highlight: #c084fc; /* Highlight borders */
  /* Form control borders */
  --token-form-control-base-border-color-default: #404040;
  --token-form-control-base-border-color-hover: #555555;
  /* Form control surfaces */
  --token-form-control-base-surface-color-default: #242424;
  --token-form-control-disabled-surface-color: #2d2d2d;
  /* Form control dimensions */
  --token-form-control-border-width: 1px;
  --token-form-control-border-radius: 6px;
  --token-form-control-padding: 8px;
  /* ===== Focus Colors ===== */
  --token-color-focus-action-internal: #1060ff; /* Focus ring inner - same as light mode */
  --token-color-focus-action-external: rgba(16, 96, 255, 0.3); /* Focus ring outer - same as light mode */
  /* ===== Status-Specific Color Schemes ===== */
  /* Success/Approved States (Green) */
  --token-color-palette-green-200: #238636; /* Medium green for progress bars (GitHub-like) */
  /* Warning States (Orange) */
  --token-color-palette-amber-200: #fb923c; /* Light orange for warnings */
  /* Critical/Error States (Red) */
  --token-color-palette-red-200: #ff6b6b; /* Light red for errors */
  /* Info/Review States (Purple) */
  --token-color-palette-purple-100: #e9d5ff; /* Very light purple */
  --token-color-palette-purple-200: #c084fc; /* Light purple for info */
  /* Neutral States (Blue) - keep same as light mode for consistency */
  --token-color-palette-blue-500: #1c345f; /* Same as light mode */
  --token-color-palette-blue-400: #0046d1; /* Same as light mode */
  --token-color-palette-blue-300: #0c56e9; /* Same as light mode */
  --token-color-palette-blue-200: #1060ff; /* Same as light mode */
  --token-color-palette-blue-100: #cce3fe; /* Same as light mode */
  --token-color-palette-blue-50: #f2f8ff; /* Same as light mode */
  /* ===== Neutral Palette ===== */
  /* Keep neutral palette consistent with light mode for product branding */
  --token-color-palette-neutral-50: #fafafa; /* Lightest neutral - same as light mode */
  --token-color-palette-neutral-100: #f1f2f3; /* Very light neutral - same as light mode */
  --token-color-palette-neutral-200: #dedfe3; /* Light neutral - same as light mode */
  --token-color-palette-neutral-300: #c2c5cb; /* Medium light neutral - same as light mode */
  --token-color-palette-neutral-400: #8c909c; /* Medium neutral - same as light mode */
  --token-color-palette-neutral-500: #656a76; /* Medium dark neutral - same as light mode */
  --token-color-palette-neutral-600: #3b3d45; /* Dark neutral - same as light mode */
  --token-color-palette-neutral-700: #0c0c0e; /* Very dark neutral - same as light mode */
  /* ===== Alpha Colors ===== */
  --token-color-palette-alpha-100: rgba(255, 255, 255, 0.1); /* Light overlay */
  --token-color-palette-alpha-300: rgba(255, 255, 255, 0.3); /* Medium overlay */
  /* ===== Component-Specific Overrides ===== */
  /* Tables */
  --token-surface-low-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  --token-surface-mid-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  --token-elevation-low-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  /* Focus rings */
  --token-focus-ring-action-box-shadow: 0 0 0 3px rgba(16, 96, 255, 0.3);
  /* Typography (if needed for overrides) */
  --token-typography-font-weight-regular: 400;
  --token-typography-font-weight-medium: 500;
  --token-typography-font-weight-semibold: 600;
  --token-typography-font-weight-bold: 700;
  /* ===== Document Status & Badge Colors ===== */
  /* HDS Badge color overrides for dark mode */
  --token-color-surface-success: #238636; /* GitHub green badge background */
  --token-color-foreground-success: #ffffff; /* White text for better contrast */
  --token-color-foreground-success-on-surface: #ffffff; /* Ensure white text on success surface */
  --hds-token-color-foreground-success: #ffffff; /* Additional HDS override */
  --token-color-surface-highlight: #2d1b4d; /* Purple highlight badge background */
  --token-color-foreground-highlight-on-surface: #c084fc; /* Purple highlight badge text */
  --token-color-surface-neutral: #525252; /* Neutral badge background */
  --token-color-foreground-neutral: #ffffff; /* Neutral badge text */
}

/* ===== System Theme Detection ===== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) {
    /* Apply dark theme when system prefers dark and no explicit theme is set */
    color-scheme: dark;
  }
}
/* ===== Accessibility Enhancements ===== */
:root[data-theme=dark] {
  /* Enhanced focus indicators for dark mode */
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  /* Ensure proper contrast for interactive elements */
  color-scheme: dark;
}

/* ===== Document Status Component Overrides ===== */
:root[data-theme=dark] .doc-status {
  /* Status progress bars */
}
:root[data-theme=dark] .doc-status .progress-bar {
  background-color: var(--token-color-surface-faint);
}
:root[data-theme=dark] .doc-status {
  /* WIP status */
}
:root[data-theme=dark] .doc-status--wip li:nth-child(1) {
  background-color: var(--token-color-palette-blue-200);
}
:root[data-theme=dark] .doc-status {
  /* In-Review status */
}
:root[data-theme=dark] .doc-status--in-review li:nth-child(1) {
  background-color: var(--token-color-palette-purple-200);
  opacity: 0.7;
}
:root[data-theme=dark] .doc-status--in-review li:nth-child(2) {
  background-color: var(--token-color-palette-purple-200);
  height: 0.25rem;
}
:root[data-theme=dark] .doc-status {
  /* Approved status */
}
:root[data-theme=dark] .doc-status--approved .progress-bar {
  background-color: var(--token-color-palette-green-200);
  opacity: 0.7;
}
:root[data-theme=dark] .doc-status--approved li:nth-child(3) {
  height: 0.25rem;
  opacity: 1;
}

/* Document Status Icon Overrides */
:root[data-theme=dark] [data-test-document-status-icon] {
  /* Default page fill - make it darker for better contrast */
}
:root[data-theme=dark] [data-test-document-status-icon] [data-test-default-page-fill] {
  fill: #2d2d2d;
}
:root[data-theme=dark] [data-test-document-status-icon] {
  /* Obsolete page fill */
}
:root[data-theme=dark] [data-test-document-status-icon] [data-test-obsolete-page-fill] {
  fill: #2d2d2d;
}
:root[data-theme=dark] [data-test-document-status-icon] {
  /* Status strokes - make them lighter */
}
:root[data-theme=dark] [data-test-document-status-icon] [data-test-default-page-stroke] {
  fill: #9ca3af;
}
:root[data-theme=dark] [data-test-document-status-icon] [data-test-approved-page-stroke] {
  fill: #9ca3af;
}
:root[data-theme=dark] [data-test-document-status-icon] [data-test-obsolete-page-stroke] {
  fill: #9ca3af;
}
:root[data-theme=dark] [data-test-document-status-icon] {
  /* Approved checkmark - make it brighter green (GitHub-like) */
}
:root[data-theme=dark] [data-test-document-status-icon] [data-test-checkmark-icon] {
  stroke: #3fb950;
}
:root[data-theme=dark] [data-test-document-status-icon] {
  /* Draft pencil icon - adjust for dark mode */
}
:root[data-theme=dark] [data-test-document-status-icon] [data-test-pencil-icon] {
  fill: #404040;
  stroke: #9ca3af;
}

/* HDS Badge Mix-blend-mode fix for dark mode */
:root[data-theme=dark] .hds-badge {
  mix-blend-mode: normal; /* Disable mix-blend-multiply in dark mode */
  /* Force white text for success badges */
}
:root[data-theme=dark] .hds-badge--color-success .hds-badge__text {
  color: #ffffff !important;
}
:root[data-theme=dark] {
  /* HDS Badge Count styling - now handled with inline styles for reliability */
  /* ===== Button Dark Mode Styling ===== */
  /* HDS Buttons - most colors are handled by palette tokens above, but ensure proper contrast */
}
:root[data-theme=dark] .hds-button {
  /* Primary buttons use blue palette colors which are now correct */
  /* Secondary buttons */
}
:root[data-theme=dark] .hds-button--color-secondary {
  background-color: var(--token-color-surface-interactive);
  border-color: var(--token-color-border-primary);
  color: var(--token-color-foreground-primary);
}
:root[data-theme=dark] .hds-button--color-secondary:hover {
  background-color: var(--token-color-surface-interactive-hover);
  border-color: var(--token-color-border-strong);
  color: var(--token-color-foreground-primary);
}
:root[data-theme=dark] .hds-button--color-secondary:focus {
  border-color: var(--token-color-focus-action-internal);
}
:root[data-theme=dark] .hds-button--color-secondary:focus::before {
  border-color: var(--token-color-focus-action-external);
}
:root[data-theme=dark] .hds-button {
  /* Tertiary buttons */
}
:root[data-theme=dark] .hds-button--color-tertiary {
  color: var(--token-color-foreground-action);
}
:root[data-theme=dark] .hds-button--color-tertiary:hover {
  color: var(--token-color-foreground-action-hover);
  background-color: var(--token-color-surface-interactive);
}
:root[data-theme=dark] .hds-button {
  /* Critical buttons - use default HDS styling which should work well in dark mode */
}
:root[data-theme=dark] {
  /* ===== Tooltip Dark Mode Styling ===== */
  /* Hermes tooltip components */
}
:root[data-theme=dark] .hermes-tooltip {
  background-color: var(--token-color-surface-strong) !important;
  color: var(--token-color-foreground-high-contrast) !important;
  border: 1px solid var(--token-color-border-primary) !important;
}
:root[data-theme=dark] .hermes-tooltip .arrow {
  background-color: var(--token-color-surface-strong) !important;
}
:root[data-theme=dark] {
  /* Hermes popover components */
}
:root[data-theme=dark] .hermes-popover {
  background-color: var(--token-color-surface-primary) !important;
  color: var(--token-color-foreground-primary) !important;
  border: 1px solid var(--token-color-border-primary) !important;
}
:root[data-theme=dark] {
  /* ===== Dropdown Dark Mode Styling ===== */
  /* X::DropdownList components */
}
:root[data-theme=dark] .x-dropdown-list .x-dropdown-list-container {
  background-color: var(--token-color-surface-primary);
  border: 1px solid var(--token-color-border-primary);
}
:root[data-theme=dark] .x-dropdown-list .x-dropdown-list-scroll-container {
  background-color: var(--token-color-surface-primary);
}
:root[data-theme=dark] .x-dropdown-list .x-dropdown-list-input-container {
  background-color: var(--token-color-surface-primary);
  border-bottom-color: var(--token-color-border-faint);
}
:root[data-theme=dark] .x-dropdown-list .x-dropdown-list-input-container input {
  background-color: transparent;
  color: var(--token-color-foreground-primary);
}
:root[data-theme=dark] .x-dropdown-list .x-dropdown-list-input-container input::-moz-placeholder {
  color: var(--token-color-foreground-faint);
}
:root[data-theme=dark] .x-dropdown-list .x-dropdown-list-input-container input::placeholder {
  color: var(--token-color-foreground-faint);
}
:root[data-theme=dark] .x-dropdown-list .x-dropdown-list-default-empty-state {
  color: var(--token-color-foreground-faint);
}
:root[data-theme=dark] {
  /* Dropdown list items */
}
:root[data-theme=dark] .x-dropdown-list-item-link {
  color: var(--token-color-foreground-primary) !important;
}
:root[data-theme=dark] .x-dropdown-list-item-link:hover {
  background-color: var(--token-color-surface-interactive-hover);
}
:root[data-theme=dark] .x-dropdown-list-item-link.is-aria-selected {
  background-color: var(--token-color-foreground-action) !important;
  color: var(--token-color-foreground-high-contrast) !important;
}
:root[data-theme=dark] .x-dropdown-list-item-link:not(.is-aria-selected) .check {
  color: var(--token-color-foreground-action);
}
:root[data-theme=dark] {
  /* HDS Dropdown components */
}
:root[data-theme=dark] .hds-dropdown .hds-dropdown__content {
  background-color: var(--token-color-surface-primary);
  border: 1px solid var(--token-color-border-primary);
}
:root[data-theme=dark] .hds-dropdown .hds-dropdown__list-item {
  color: var(--token-color-foreground-primary);
}
:root[data-theme=dark] .hds-dropdown .hds-dropdown__list-item:hover {
  background-color: var(--token-color-surface-interactive-hover);
}
:root[data-theme=dark] .hds-dropdown .hds-dropdown__list-item:focus, :root[data-theme=dark] .hds-dropdown .hds-dropdown__list-item[aria-selected=true] {
  background-color: var(--token-color-foreground-action);
  color: var(--token-color-foreground-high-contrast);
}
:root[data-theme=dark] {
  /* Facet dropdowns */
}
:root[data-theme=dark] .header-facet-dropdown .hds-dropdown__content {
  background-color: var(--token-color-surface-primary);
  border: 1px solid var(--token-color-border-primary);
}
:root[data-theme=dark] {
  /* User menu dropdown */
}
:root[data-theme=dark] .user-dropdown .hds-dropdown__content {
  background-color: var(--token-color-surface-primary);
  border: 1px solid var(--token-color-border-primary);
}
:root[data-theme=dark] {
  /* ===== Project Page Dark Mode Styling ===== */
  /* Project badge styling */
}
:root[data-theme=dark] .project-header {
  /* Project badge with neutral background */
}
:root[data-theme=dark] .project-header .bg-color-palette-neutral-100 {
  background-color: var(--token-color-surface-strong) !important;
  color: var(--token-color-foreground-strong) !important;
  border: 1px solid var(--token-color-border-faint);
}
:root[data-theme=dark] {
  /* Alternative: If we want to target it more specifically by content */
}
:root[data-theme=dark] .project-header div:has(h5:contains("Project")) {
  background-color: var(--token-color-surface-strong) !important;
  color: var(--token-color-foreground-strong) !important;
  border: 1px solid var(--token-color-border-faint);
}

/* ===== Document Tile Hover Fix ===== */
:root[data-theme=dark] {
  /* Disable mix-blend-multiply on document tile hover overlays to fix hover visibility */
}
:root[data-theme=dark] .group .mix-blend-multiply {
  mix-blend-mode: normal !important;
}
:root[data-theme=dark] {
  /* Alternative: target the specific hover overlay pattern */
}
:root[data-theme=dark] .group-hover\:bg-color-page-faint.mix-blend-multiply,
:root[data-theme=dark] .group-focus-within\:bg-color-page-faint.mix-blend-multiply {
  mix-blend-mode: normal !important;
}

/* ===== Reduced Motion Support ===== */
@media (prefers-reduced-motion: reduce) {
  :root[data-theme=dark] {
    /* Remove animations for users who prefer reduced motion */
  }
  :root[data-theme=dark] * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
.avatar{
  position: relative;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
}
.avatar.small .product-abbreviation.letter-count-1, .avatar.medium .product-abbreviation.letter-count-1{
  font-size: 12px;
  font-weight: var(--token-typography-font-weight-semibold);
}
.avatar.small .product-abbreviation.letter-count-2, .avatar.medium .product-abbreviation.letter-count-2{
  font-size: 9.5px;
  font-weight: var(--token-typography-font-weight-semibold);
}
.avatar.small .product-abbreviation.letter-count-3, .avatar.medium .product-abbreviation.letter-count-3{
  font-size: 7.5px;
  font-weight: var(--token-typography-font-weight-bold);
}
.avatar.small{
  height: 1.25rem;
  width: 1.25rem;
}
.avatar.small .default-user-icon{
  --tw-scale-x: 85%;
  --tw-scale-y: 85%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.avatar.medium{
  height: 1.75rem;
  width: 1.75rem;
}
.avatar.large{
  height: 2.25rem;
  width: 2.25rem;
}
.avatar.large .product-abbreviation.letter-count-2{
  font-size: 13px;
}
.avatar.large .product-abbreviation.letter-count-3{
  font-size: 11px;
  font-weight: var(--token-typography-font-weight-semibold);
}
.avatar.xl{
  height: 4rem;
  width: 4rem;
}
.avatar.xl .product-abbreviation{
  font-size: 32px;
  letter-spacing: -0.025em;
}
.avatar.xl .product-abbreviation.letter-count-2{
  font-size: 24px;
}
.avatar.xl .product-abbreviation.letter-count-3{
  font-size: 18px;
}

.product-abbreviation{
  display: flex;
  font-weight: var(--token-typography-font-weight-medium);
  line-height: 1;
  letter-spacing: -0.05em;
}

body.results .section-header{
  margin-bottom: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
body.results .product-area-search-result{
  display: flex;
  height: 2.5rem;
  align-items: center;
  gap: 0.75rem;
  border-radius: 5px;
  border-width: 1px;
  border-color: transparent;
  padding-left: 0.625rem;
  padding-right: 0.75rem;
  font-size: var(--token-typography-display-300-font-size);
  line-height: var(--token-typography-display-300-line-height);
  font-weight: var(--token-typography-font-weight-semibold);
  color: var(--token-color-foreground-strong);
}
body.results .product-area-search-result:hover, body.results .product-area-search-result:focus{
  border-color: var(--token-color-border-primary);
  background-color: var(--token-color-page-faint);
}

.my .hds-table td{
  padding-top: 0px;
  padding-bottom: 0px;
  padding-right: 2.5rem;
}
.my .hds-table td > .inner{
  overflow: hidden;
}
.my .footer{
  margin-top: 6rem;
}

.quarternary-button{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border-radius: 5px;
  border-width: 1px;
  border-color: transparent;
  color: var(--token-color-foreground-faint);
}
.quarternary-button:hover:not(.disabled):not(:focus), .quarternary-button:focus, .quarternary-button.open{
  border-color: var(--token-color-border-strong);
  background-color: var(--token-color-foreground-high-contrast);
  outline: 2px solid transparent;
  outline-offset: 2px;
  color: var(--token-color-foreground-primary);
}
.quarternary-button:focus, .quarternary-button:focus-visible{
  border-color: var(--token-color-focus-action-internal);
}
.quarternary-button:focus.disabled, .quarternary-button:focus-visible.disabled{
  border-color: var(--token-color-border-strong);
}
.quarternary-button:focus.disabled::before, .quarternary-button:focus-visible.disabled::before{
  border-color: var(--token-color-border-primary);
}
.quarternary-button:focus::before, .quarternary-button:focus-visible::before {
  content: "";
  position: absolute;
  top: -0.25rem;
  right: -0.25rem;
  bottom: -0.25rem;
  left: -0.25rem;
  z-index: -10;
  border-radius: 8px;
  border-width: 3px;
  border-color: var(--token-color-focus-action-external);
}
.quarternary-button[class=".rounded"]::before{
  border-radius: 6px;
}

.pill-button,
.pill-button:focus::before{
  border-top-left-radius: 9999px;
  border-bottom-left-radius: 9999px;
  border-top-right-radius: 9999px;
  border-bottom-right-radius: 9999px;
}

.ember-power-select-placeholder {
  color: var(--token-color-foreground-disabled);
}

.ember-power-select-trigger,
.ember-power-select-trigger-multiple-input {
  color: var(--token-color-foreground-primary);
}

.ember-basic-dropdown-content{
  min-height: 34px;
}
.ember-basic-dropdown-content .hds-dropdown-list-item--variant-interactive{
  display: flex;
  align-items: center;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.ember-basic-dropdown {
  position: relative;
}

.ember-basic-dropdown,
.ember-basic-dropdown-content,
.ember-basic-dropdown-content * {
  box-sizing: border-box;
}

.ember-basic-dropdown-content {
  position: absolute;
  width: auto;
  z-index: 1000;
  background-color: var(--token-form-control-base-surface-color-default);
}

.ember-basic-dropdown-content--left {
  left: 0;
}

.ember-basic-dropdown-content--right {
  right: 0;
}

.ember-basic-dropdown-overlay {
  position: fixed;
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  z-index: 10;
  top: 0;
  left: 0;
  pointer-events: none;
}

.ember-basic-dropdown-content-wormhole-origin {
  display: inline;
}

.ember-power-select-dropdown * {
  box-sizing: border-box;
}

.ember-power-select-trigger {
  position: relative;
  border-top: var(--token-form-control-border-width) solid var(--token-form-control-base-border-color-default);
  border-bottom: var(--token-form-control-border-width) solid var(--token-form-control-base-border-color-default);
  border-right: var(--token-form-control-border-width) solid var(--token-form-control-base-border-color-default);
  border-left: var(--token-form-control-border-width) solid var(--token-form-control-base-border-color-default);
  border-radius: var(--token-form-control-border-radius);
  background-color: var(--token-form-control-base-surface-color-default);
  line-height: 1.75;
  overflow-x: hidden;
  text-overflow: ellipsis;
  min-height: 1.75em;
  -moz-user-select: none;
       user-select: none;
  -webkit-user-select: none;
  color: inherit;
  /* Minimum clearfix for modern browsers */
}
.ember-power-select-trigger:after {
  content: "";
  display: table;
  clear: both;
}
.ember-power-select-trigger:not(.ember-power-select-multiple-trigger) .ember-power-select-input {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.ember-power-select-trigger:focus,
.ember-power-select-trigger--active {
  border-top: 1px solid var(--token-form-control-base-border-color-default);
  border-bottom: 1px solid var(--token-form-control-base-border-color-default);
  border-right: 1px solid var(--token-form-control-base-border-color-default);
  border-left: 1px solid var(--token-form-control-base-border-color-default);
  box-shadow: var(--token-elevation-low-box-shadow);
  outline: 3px solid var(--token-color-focus-action-external);
}

.ember-basic-dropdown-trigger--below.ember-power-select-trigger[aria-expanded=true],
.ember-basic-dropdown-trigger--in-place.ember-power-select-trigger[aria-expanded=true] {
  border-bottom-left-radius: var(--token-form-control-border-radius);
  border-bottom-right-radius: var(--token-form-control-border-radius);
}

.ember-basic-dropdown-trigger--above.ember-power-select-trigger[aria-expanded=true] {
  border-top-left-radius: var(--token-form-control-border-radius);
  border-top-right-radius: var(--token-form-control-border-radius);
}

.ember-power-select-placeholder {
  color: #999999;
  display: block;
  overflow-x: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ember-power-select-status-icon {
  position: absolute;
  display: inline-block;
  width: 0;
  height: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  border-style: solid;
  border-width: 7px 4px 0 4px;
  border-color: var(--token-form-control-base-border-color-default) transparent transparent transparent;
}
.ember-basic-dropdown-trigger[aria-expanded=true] .ember-power-select-status-icon {
  transform: rotate(180deg);
}

.ember-power-select-clear-btn {
  position: absolute;
  cursor: pointer;
}

.ember-power-select-multiple-options {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
}
.ember-power-select-multiple-options li.ember-power-select-trigger-multiple-input-container {
  flex-grow: 1;
  display: flex;
}
.ember-power-select-multiple-options li.ember-power-select-trigger-multiple-input-container input {
  flex-grow: 1;
}

.ember-power-select-trigger-multiple-input {
  font-family: inherit;
  font-size: inherit;
  border: none;
  line-height: inherit;
  -webkit-appearance: none;
  outline: none;
  padding: 0;
  background-color: transparent;
  text-indent: 2px;
}
.ember-power-select-trigger-multiple-input:disabled {
  background-color: var(--token-form-control-disabled-surface-color);
}
.ember-power-select-trigger-multiple-input {
  /* There's a browser bug where this selectos cannot be chained with commas */
}
.ember-power-select-trigger-multiple-input::-moz-placeholder {
  opacity: 1;
  color: #999999;
}
.ember-power-select-trigger-multiple-input::placeholder {
  opacity: 1;
  color: #999999;
}
.ember-power-select-trigger-multiple-input::-webkit-input-placeholder {
  opacity: 1;
  color: #999999;
}
.ember-power-select-trigger-multiple-input::-moz-placeholder {
  opacity: 1;
  color: #999999;
}
.ember-power-select-trigger-multiple-input::-ms-input-placeholder {
  opacity: 1;
  color: #999999;
}

.ember-power-select-multiple-option {
  border: 1px solid gray;
  border-radius: var(--token-form-control-border-radius);
  color: #333333;
  background-color: var(--token-color-palette-neutral-100);
  padding: 0;
  line-height: 1.3;
  margin: 2px 0 2px 3px;
}

.ember-power-select-multiple-remove-btn {
  cursor: pointer;
}
.ember-power-select-multiple-remove-btn:not(:hover) {
  opacity: 0.5;
}

.ember-power-select-search {
  padding: 4px;
}

.ember-power-select-search-input {
  border: var(--token-form-control-border-width) solid var(--token-form-control-base-border-color-default);
  border-radius: 0;
  width: 100%;
  font-size: inherit;
  line-height: inherit;
  padding: 0 5px;
}
.ember-power-select-search-input:focus {
  border: 1px solid var(--token-form-control-base-border-color-default);
  box-shadow: var(--token-elevation-low-box-shadow);
  outline: 3px solid var(--token-color-focus-action-external);
}

.ember-power-select-search-input-field {
  width: 100%;
  height: 100%;
  padding: 0 8px;
  font-family: inherit;
  font-size: inherit;
  border: none;
  display: block;
  line-height: inherit;
  -webkit-appearance: none;
  outline: none;
  background-color: transparent;
}

.ember-power-select-dropdown {
  border-left: 1px solid var(--token-form-control-base-border-color-default);
  border-right: 1px solid var(--token-form-control-base-border-color-default);
  line-height: 1.75;
  border-radius: var(--token-form-control-border-radius);
  box-shadow: var(--token-elevation-low-box-shadow);
  overflow: hidden;
  color: inherit;
}

.ember-power-select-dropdown.ember-basic-dropdown-content--above {
  border-top: 1px solid var(--token-form-control-base-border-color-default);
  border-bottom: none;
  border-bottom-left-radius: var(--token-form-control-border-radius);
  border-bottom-right-radius: var(--token-form-control-border-radius);
}

.ember-power-select-dropdown.ember-basic-dropdown-content--below,
.ember-power-select-dropdown.ember-basic-dropdown-content--in-place {
  border-top: none;
  border-bottom: 1px solid var(--token-form-control-base-border-color-default);
  border-top-left-radius: var(--token-form-control-border-radius);
  border-top-right-radius: var(--token-form-control-border-radius);
}

.ember-power-select-dropdown.ember-basic-dropdown-content--in-place {
  width: 100%;
}

.ember-power-select-options {
  list-style: none;
  margin: 0;
  padding: 0;
  -moz-user-select: none;
       user-select: none;
  -webkit-user-select: none;
}
.ember-power-select-options[role=listbox] {
  overflow-y: auto; /* in firefox in windows this can cause a word-break issue. Try `overflow-y: scroll` if that happens */
  -webkit-overflow-scrolling: touch;
  max-height: 12.25em;
}

.ember-power-select-option {
  cursor: pointer;
  padding: 0 8px;
}

.ember-power-select-group[aria-disabled=true] {
  color: #999999;
  cursor: not-allowed;
}

.ember-power-select-group[aria-disabled=true] .ember-power-select-option,
.ember-power-select-option[aria-disabled=true] {
  color: #999999;
  pointer-events: none;
  cursor: not-allowed;
}

.ember-power-select-option[aria-selected=true] {
  background-color: #dddddd;
}

.ember-power-select-option[aria-current=true] {
  background-color: var(--token-color-surface-interactive-hover);
  color: inherit;
}

.ember-power-select-group-name {
  cursor: default;
  font-weight: bold;
}

.ember-power-select-trigger[aria-disabled=true] {
  background-color: var(--token-form-control-disabled-surface-color);
}

.ember-power-select-trigger {
  padding: 7px 5px;
}

.ember-power-select-selected-item,
.ember-power-select-placeholder {
  margin-left: 8px;
}

.ember-power-select-status-icon {
  right: 5px;
}

.ember-power-select-clear-btn {
  right: 25px;
}

.ember-power-select-group .ember-power-select-group .ember-power-select-group-name {
  padding-left: 24px;
}
.ember-power-select-group .ember-power-select-group .ember-power-select-option {
  padding-left: 40px;
}
.ember-power-select-group .ember-power-select-option {
  padding-left: 24px;
}
.ember-power-select-group .ember-power-select-group-name {
  padding-left: 8px;
}

.ember-power-select-trigger[dir=rtl] {
  padding: 7px 5px;
}
.ember-power-select-trigger[dir=rtl] .ember-power-select-selected-item,
.ember-power-select-trigger[dir=rtl] .ember-power-select-placeholder {
  margin-right: 8px;
}
.ember-power-select-trigger[dir=rtl] .ember-power-select-multiple-option {
  float: right;
}
.ember-power-select-trigger[dir=rtl] .ember-power-select-trigger-multiple-input {
  float: right;
}
.ember-power-select-trigger[dir=rtl] .ember-power-select-status-icon {
  left: 5px;
  right: initial;
}
.ember-power-select-trigger[dir=rtl] .ember-power-select-clear-btn {
  left: 25px;
  right: initial;
}

.ember-power-select-visually-hidden {
  height: 1px;
  left: -9999px;
  overflow: hidden;
  position: absolute;
  width: 1px;
}

.ember-power-select-dropdown[dir=rtl] .ember-power-select-group .ember-power-select-group .ember-power-select-group-name {
  padding-right: 24px;
}
.ember-power-select-dropdown[dir=rtl] .ember-power-select-group .ember-power-select-group .ember-power-select-option {
  padding-right: 40px;
}
.ember-power-select-dropdown[dir=rtl] .ember-power-select-group .ember-power-select-option {
  padding-right: 24px;
}
.ember-power-select-dropdown[dir=rtl] .ember-power-select-group .ember-power-select-group-name {
  padding-right: 8px;
}

.ember-basic-dropdown-content {
  border: none !important;
  background-color: var(--token-color-surface-primary);
  color: var(--token-color-foreground-primary);
  margin-top: 1px;
  box-shadow: var(--token-surface-high-box-shadow);
}

.ember-power-select-options[role=listbox]{
  max-height: 200px;
}

.ember-power-select-option{
  padding-top: 1px;
  padding-bottom: 1px;
}
.ember-power-select-option:first-child{
  margin-top: 3px;
}
.ember-power-select-option:last-child{
  margin-bottom: 3px;
}

.ember-power-select-option--loading-message,
.ember-power-select-option--no-matches-message{
  height: 1.75rem;
  padding-left: 0.875rem;
  padding-right: 0.875rem;
  color: var(--token-color-foreground-faint);
}

.error-404{
  background-color: var(--token-color-page-faint);
}
.error-404 .title{
  margin-bottom: 1.25rem;
  margin-right: 5rem;
  font-size: 3.5rem;
}
.error-404 .doc-page{
  margin-top: 4rem;
  border-top-left-radius: 0.75rem;
  border-top-right-radius: 0.75rem;
  border-width: 1px;
  border-color: var(--token-color-border-primary);
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.error-404 .meta-information{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
}
.error-404 .meta-information > div > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.error-404 .divider{
  height: 4px;
  width: 100%;
  background-color: var(--token-color-foreground-strong);
}
.error-404 p{
  font-size: var(--token-typography-display-300-font-size);
  line-height: var(--token-typography-display-300-line-height);
  color: var(--token-color-foreground-strong);
}
.error-404 .summary{
  margin-bottom: 1.5rem;
  padding-right: 5rem;
  font-size: var(--token-typography-display-400-font-size);
  line-height: var(--token-typography-display-400-line-height);
}
.error-404 .gradient-overlay{
  pointer-events: none;
  position: fixed;
  left: 0px;
  bottom: 0px;
  height: 14rem;
  width: 100%;
  background-image: linear-gradient(to top, var(--tw-gradient-stops));
  --tw-gradient-from: var(--token-color-surface-strong) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}

.hds-typography-body-200.hds-form-select {
  padding: var(--token-form-control-padding);
  padding-right: calc(var(--token-form-control-padding) + 24px);
}

.hds-dropdown-toggle-button .hds-button__icon,
.hds-dropdown-toggle-chevron > svg {
  transition: none !important;
}

.hds-link-standalone.small-external-link{
  font-weight: var(--token-typography-font-weight-regular);
}
.hds-link-standalone.small-external-link .hds-link-standalone__text{
  font-size: var(--token-typography-body-100-font-size);
  line-height: var(--token-typography-body-100-line-height);
}

/* Maintain contrast across hover and focus states */
.hds-badge-count--color-neutral.hds-badge-count--type-filled:not(.checkable-item-count){
  mix-blend-mode: multiply;
}
:root[data-theme=dark] .group .hds-badge-count--color-neutral.hds-badge-count--type-filled:not(.checkable-item-count) {
  mix-blend-mode: normal;
}
:root[data-theme=dark] .group-hover\:bg-color-page-faint.hds-badge-count--color-neutral.hds-badge-count--type-filled:not(.checkable-item-count),
:root[data-theme=dark] .group-focus-within\:bg-color-page-faint.hds-badge-count--color-neutral.hds-badge-count--type-filled:not(.checkable-item-count) {
  mix-blend-mode: normal;
}

/* Dark mode override for badge counts */
:root[data-theme=dark] .hds-badge-count--color-neutral.hds-badge-count--type-filled {
  background-color: #525252 !important;
  color: #ffffff !important;
  mix-blend-mode: normal !important;
}
:root[data-theme=dark] .hds-badge-count--color-neutral.hds-badge-count--type-filled:not(.checkable-item-count) {
  mix-blend-mode: normal !important;
}

.x-dropdown-list-item-link.is-aria-selected .hds-badge-count--color-neutral.hds-badge-count--type-filled{
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-bg-opacity: 0.1;
  color: var(--token-color-foreground-high-contrast);
}

.hds-badge-dropdown{
  padding-right: 1.5rem;
}
.hds-badge-dropdown + .dropdown-caret{
  position: absolute;
  right: 0.375rem;
  top: 50%;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

a.hds-button:hover, a.hds-button:focus, a.hds-button:active{
  text-decoration-line: none;
}

.hds-button.pill-button, .hds-button.pill-button::before{
  border-top-left-radius: 9999px;
  border-bottom-left-radius: 9999px;
  border-top-right-radius: 9999px;
  border-bottom-right-radius: 9999px;
}

.hds-alert--type-inline.hds-alert--color-success {
  border-color: rgba(5, 66, 33, 0.2);
}
.hds-alert--type-inline.hds-alert--color-warning {
  border-color: rgba(82, 39, 0, 0.2);
}
.hds-alert--type-inline.hds-alert--color-critical {
  border-color: rgba(82, 20, 10, 0.2);
}

*, ::before, ::after{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}
.container{
  width: 100%;
}
@media (min-width: 640px){
  .container{
    max-width: 640px;
  }
}
@media (min-width: 768px){
  .container{
    max-width: 768px;
  }
}
@media (min-width: 1024px){
  .container{
    max-width: 1024px;
  }
}
@media (min-width: 1280px){
  .container{
    max-width: 1280px;
  }
}
@media (min-width: 1536px){
  .container{
    max-width: 1536px;
  }
}
.pointer-events-none{
  pointer-events: none;
}
.pointer-events-auto{
  pointer-events: auto;
}
.visible{
  visibility: visible;
}
.invisible{
  visibility: hidden;
}
.absolute{
  position: absolute;
}
.relative{
  position: relative;
}
.-bottom-1\.5{
  bottom: -0.375rem;
}
.-bottom-10{
  bottom: -2.5rem;
}
.-bottom-px{
  bottom: -1px;
}
.-left-\[20px\]{
  left: -20px;
}
.-right-1\.5{
  right: -0.375rem;
}
.-right-2{
  right: -0.5rem;
}
.-top-px{
  top: -1px;
}
.bottom-0{
  bottom: 0px;
}
.bottom-1{
  bottom: 0.25rem;
}
.left-0{
  left: 0px;
}
.left-1\/2{
  left: 50%;
}
.left-2{
  left: 0.5rem;
}
.left-2\.5{
  left: 0.625rem;
}
.left-\[33px\]{
  left: 33px;
}
.left-\[5px\]{
  left: 5px;
}
.right-0{
  right: 0px;
}
.right-1\.5{
  right: 0.375rem;
}
.right-14{
  right: 3.5rem;
}
.right-2{
  right: 0.5rem;
}
.right-3{
  right: 0.75rem;
}
.top-0{
  top: 0px;
}
.top-1\/2{
  top: 50%;
}
.top-\[3px\]{
  top: 3px;
}
.z-10{
  z-index: 10;
}
.z-20{
  z-index: 20;
}
.mx-0\.5{
  margin-left: 0.125rem;
  margin-right: 0.125rem;
}
.mx-1{
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}
.mx-auto{
  margin-left: auto;
  margin-right: auto;
}
.\!mb-12{
  margin-bottom: 3rem !important;
}
.-mb-1{
  margin-bottom: -0.25rem;
}
.-mb-3{
  margin-bottom: -0.75rem;
}
.-mb-6{
  margin-bottom: -1.5rem;
}
.-ml-0\.5{
  margin-left: -0.125rem;
}
.-ml-1{
  margin-left: -0.25rem;
}
.-ml-1\.5{
  margin-left: -0.375rem;
}
.-ml-\[3px\]{
  margin-left: -3px;
}
.-ml-px{
  margin-left: -1px;
}
.-mr-1{
  margin-right: -0.25rem;
}
.-mt-0\.5{
  margin-top: -0.125rem;
}
.-mt-1{
  margin-top: -0.25rem;
}
.-mt-\[5px\]{
  margin-top: -5px;
}
.-mt-px{
  margin-top: -1px;
}
.mb-0{
  margin-bottom: 0px;
}
.mb-1{
  margin-bottom: 0.25rem;
}
.mb-1\.5{
  margin-bottom: 0.375rem;
}
.mb-10{
  margin-bottom: 2.5rem;
}
.mb-14{
  margin-bottom: 3.5rem;
}
.mb-16{
  margin-bottom: 4rem;
}
.mb-2{
  margin-bottom: 0.5rem;
}
.mb-2\.5{
  margin-bottom: 0.625rem;
}
.mb-24{
  margin-bottom: 6rem;
}
.mb-3{
  margin-bottom: 0.75rem;
}
.mb-3\.5{
  margin-bottom: 0.875rem;
}
.mb-4{
  margin-bottom: 1rem;
}
.mb-40{
  margin-bottom: 10rem;
}
.mb-5{
  margin-bottom: 1.25rem;
}
.mb-6{
  margin-bottom: 1.5rem;
}
.mb-7{
  margin-bottom: 1.75rem;
}
.mb-8{
  margin-bottom: 2rem;
}
.ml-0\.5{
  margin-left: 0.125rem;
}
.ml-1{
  margin-left: 0.25rem;
}
.ml-1\.5{
  margin-left: 0.375rem;
}
.ml-4{
  margin-left: 1rem;
}
.ml-\[3px\]{
  margin-left: 3px;
}
.ml-auto{
  margin-left: auto;
}
.ml-px{
  margin-left: 1px;
}
.mr-0\.5{
  margin-right: 0.125rem;
}
.mr-1{
  margin-right: 0.25rem;
}
.mr-1\.5{
  margin-right: 0.375rem;
}
.mr-2{
  margin-right: 0.5rem;
}
.mr-3{
  margin-right: 0.75rem;
}
.mr-\[19px\]{
  margin-right: 19px;
}
.mt-0\.5{
  margin-top: 0.125rem;
}
.mt-1{
  margin-top: 0.25rem;
}
.mt-1\.5{
  margin-top: 0.375rem;
}
.mt-10{
  margin-top: 2.5rem;
}
.mt-12{
  margin-top: 3rem;
}
.mt-14{
  margin-top: 3.5rem;
}
.mt-2{
  margin-top: 0.5rem;
}
.mt-2\.5{
  margin-top: 0.625rem;
}
.mt-24{
  margin-top: 6rem;
}
.mt-3{
  margin-top: 0.75rem;
}
.mt-3\.5{
  margin-top: 0.875rem;
}
.mt-36{
  margin-top: 9rem;
}
.mt-4{
  margin-top: 1rem;
}
.mt-5{
  margin-top: 1.25rem;
}
.mt-6{
  margin-top: 1.5rem;
}
.mt-7{
  margin-top: 1.75rem;
}
.mt-8{
  margin-top: 2rem;
}
.mt-\[30px\]{
  margin-top: 30px;
}
.mt-\[3px\]{
  margin-top: 3px;
}
.mt-\[5px\]{
  margin-top: 5px;
}
.mt-px{
  margin-top: 1px;
}
.line-clamp-2{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.block{
  display: block;
}
.inline-block{
  display: inline-block;
}
.inline{
  display: inline;
}
.flex{
  display: flex;
}
.inline-flex{
  display: inline-flex;
}
.table{
  display: table;
}
.grid{
  display: grid;
}
.contents{
  display: contents;
}
.hidden{
  display: none;
}
.h-0\.5{
  height: 0.125rem;
}
.h-1{
  height: 0.25rem;
}
.h-10{
  height: 2.5rem;
}
.h-12{
  height: 3rem;
}
.h-16{
  height: 4rem;
}
.h-2\.5{
  height: 0.625rem;
}
.h-20{
  height: 5rem;
}
.h-3{
  height: 0.75rem;
}
.h-4{
  height: 1rem;
}
.h-48{
  height: 12rem;
}
.h-5{
  height: 1.25rem;
}
.h-56{
  height: 14rem;
}
.h-6{
  height: 1.5rem;
}
.h-64{
  height: 16rem;
}
.h-7{
  height: 1.75rem;
}
.h-8{
  height: 2rem;
}
.h-9{
  height: 2.25rem;
}
.h-\[26px\]{
  height: 26px;
}
.h-\[32px\]{
  height: 32px;
}
.h-\[34px\]{
  height: 34px;
}
.h-\[350px\]{
  height: 350px;
}
.h-\[36px\]{
  height: 36px;
}
.h-\[440px\]{
  height: 440px;
}
.h-\[62px\]{
  height: 62px;
}
.h-\[74px\]{
  height: 74px;
}
.h-\[calc\(100\%\+2px\)\]{
  height: calc(100% + 2px);
}
.h-\[calc\(350px\+69px\)\]{
  height: calc(350px + 69px);
}
.h-auto{
  height: auto;
}
.h-full{
  height: 100%;
}
.h-px{
  height: 1px;
}
.h-screen{
  height: 100vh;
}
.max-h-\[240px\]{
  max-height: 240px;
}
.max-h-\[275px\]{
  max-height: 275px;
}
.max-h-screen{
  max-height: 100vh;
}
.min-h-\[112px\]{
  min-height: 112px;
}
.min-h-\[24px\]{
  min-height: 24px;
}
.min-h-\[30px\]{
  min-height: 30px;
}
.min-h-\[500px\]{
  min-height: 500px;
}
.min-h-full{
  min-height: 100%;
}
.min-h-screen{
  min-height: 100vh;
}
.w-12{
  width: 3rem;
}
.w-2\.5{
  width: 0.625rem;
}
.w-20{
  width: 5rem;
}
.w-3{
  width: 0.75rem;
}
.w-4{
  width: 1rem;
}
.w-5{
  width: 1.25rem;
}
.w-6{
  width: 1.5rem;
}
.w-72{
  width: 18rem;
}
.w-8{
  width: 2rem;
}
.w-9{
  width: 2.25rem;
}
.w-\[118px\]{
  width: 118px;
}
.w-\[128px\]{
  width: 128px;
}
.w-\[18px\]{
  width: 18px;
}
.w-\[22px\]{
  width: 22px;
}
.w-\[260px\]{
  width: 260px;
}
.w-\[26px\]{
  width: 26px;
}
.w-\[320px\]{
  width: 320px;
}
.w-\[340px\]{
  width: 340px;
}
.w-\[350px\]{
  width: 350px;
}
.w-\[384px\]{
  width: 384px;
}
.w-\[400px\]{
  width: 400px;
}
.w-auto{
  width: auto;
}
.w-full{
  width: 100%;
}
.w-px{
  width: 1px;
}
.min-w-0{
  min-width: 0px;
}
.max-w-2xl{
  max-width: 42rem;
}
.max-w-3xl{
  max-width: 48rem;
}
.max-w-\[200px\]{
  max-width: 200px;
}
.max-w-\[360px\]{
  max-width: 360px;
}
.max-w-\[40\%\]{
  max-width: 40%;
}
.max-w-\[500px\]{
  max-width: 500px;
}
.max-w-\[60\%\]{
  max-width: 60%;
}
.max-w-\[70\%\]{
  max-width: 70%;
}
.max-w-\[830px\]{
  max-width: 830px;
}
.max-w-md{
  max-width: 28rem;
}
.max-w-xl{
  max-width: 36rem;
}
.flex-1{
  flex: 1 1 0%;
}
.shrink-0{
  flex-shrink: 0;
}
.basis-0{
  flex-basis: 0px;
}
.origin-bottom-right{
  transform-origin: bottom right;
}
.-translate-x-1\/2{
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-x-full{
  --tw-translate-x: -100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-1\/2{
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-full{
  --tw-translate-x: 100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-1\/2{
  --tw-translate-y: 50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-full{
  --tw-translate-y: 100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-\[70\%\]{
  --tw-scale-x: 70%;
  --tw-scale-y: 70%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes spin{
  to{
    transform: rotate(360deg);
  }
}
.animate-spin{
  animation: spin 1s linear infinite;
}
.cursor-default{
  cursor: default;
}
.cursor-grab{
  cursor: grab;
}
.cursor-grabbing{
  cursor: grabbing;
}
.resize{
  resize: both;
}
.snap-x{
  scroll-snap-type: x var(--tw-scroll-snap-strictness);
}
.snap-proximity{
  --tw-scroll-snap-strictness: proximity;
}
.snap-start{
  scroll-snap-align: start;
}
.list-none{
  list-style-type: none;
}
.auto-rows-min{
  grid-auto-rows: min-content;
}
.grid-cols-2{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.flex-row-reverse{
  flex-direction: row-reverse;
}
.flex-col{
  flex-direction: column;
}
.flex-col-reverse{
  flex-direction: column-reverse;
}
.flex-wrap{
  flex-wrap: wrap;
}
.place-items-center{
  place-items: center;
}
.items-start{
  align-items: flex-start;
}
.items-end{
  align-items: flex-end;
}
.items-center{
  align-items: center;
}
.items-stretch{
  align-items: stretch;
}
.justify-end{
  justify-content: flex-end;
}
.justify-center{
  justify-content: center;
}
.justify-between{
  justify-content: space-between;
}
.gap-0\.5{
  gap: 0.125rem;
}
.gap-1{
  gap: 0.25rem;
}
.gap-1\.5{
  gap: 0.375rem;
}
.gap-10{
  gap: 2.5rem;
}
.gap-2{
  gap: 0.5rem;
}
.gap-2\.5{
  gap: 0.625rem;
}
.gap-3{
  gap: 0.75rem;
}
.gap-3\.5{
  gap: 0.875rem;
}
.gap-4{
  gap: 1rem;
}
.gap-5{
  gap: 1.25rem;
}
.gap-7{
  gap: 1.75rem;
}
.gap-8{
  gap: 2rem;
}
.gap-\[16px\]{
  gap: 16px;
}
.gap-\[18px\]{
  gap: 18px;
}
.gap-\[3px\]{
  gap: 3px;
}
.gap-\[5px\]{
  gap: 5px;
}
.gap-px{
  gap: 1px;
}
.space-x-1\.5 > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(0.375rem * var(--tw-space-x-reverse));
  margin-left: calc(0.375rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-2 > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-3 > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(0.75rem * var(--tw-space-x-reverse));
  margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-4 > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(1rem * var(--tw-space-x-reverse));
  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-6 > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(1.5rem * var(--tw-space-x-reverse));
  margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-px > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(1px * var(--tw-space-x-reverse));
  margin-left: calc(1px * calc(1 - var(--tw-space-x-reverse)));
}
.space-y-0\.5 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.125rem * var(--tw-space-y-reverse));
}
.space-y-1 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.divide-y > :not([hidden]) ~ :not([hidden]){
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}
.divide-color-border-primary > :not([hidden]) ~ :not([hidden]){
  border-color: var(--token-color-border-primary);
}
.self-start{
  align-self: flex-start;
}
.overflow-auto{
  overflow: auto;
}
.overflow-hidden{
  overflow: hidden;
}
.truncate{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.whitespace-nowrap{
  white-space: nowrap;
}
.rounded{
  border-radius: 0.25rem;
}
.rounded-button-md{
  border-radius: 5px;
}
.rounded-full{
  border-radius: 9999px;
}
.rounded-lg{
  border-radius: 0.5rem;
}
.rounded-md{
  border-radius: 0.375rem;
}
.rounded-sm{
  border-radius: 0.125rem;
}
.rounded-l-full{
  border-top-left-radius: 9999px;
  border-bottom-left-radius: 9999px;
}
.rounded-l-md{
  border-top-left-radius: 0.375rem;
  border-bottom-left-radius: 0.375rem;
}
.rounded-r-full{
  border-top-right-radius: 9999px;
  border-bottom-right-radius: 9999px;
}
.rounded-r-md{
  border-top-right-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
}
.border{
  border-width: 1px;
}
.border-0{
  border-width: 0px;
}
.border-4{
  border-width: 4px;
}
.border-b{
  border-bottom-width: 1px;
}
.border-l{
  border-left-width: 1px;
}
.border-t{
  border-top-width: 1px;
}
.border-dotted{
  border-style: dotted;
}
.border-color-border-faint{
  border-color: var(--token-color-border-faint);
}
.border-color-border-input{
  border-color: var(--token-form-control-base-border-color-default);
}
.border-color-border-strong{
  border-color: var(--token-color-border-strong);
}
.border-color-palette-purple-200{
  border-color: var(--token-color-palette-purple-200);
}
.border-b-color-border-faint{
  border-bottom-color: var(--token-color-border-faint);
}
.border-b-color-border-primary{
  border-bottom-color: var(--token-color-border-primary);
}
.border-b-color-border-strong{
  border-bottom-color: var(--token-color-border-strong);
}
.border-l-color-border-primary{
  border-left-color: var(--token-color-border-primary);
}
.border-l-color-border-strong{
  border-left-color: var(--token-color-border-strong);
}
.border-t-color-border-primary{
  border-top-color: var(--token-color-border-primary);
}
.bg-\[color\:var\(--token-color-palette-neutral-200\)\]{
  background-color: var(--token-color-palette-neutral-200);
}
.bg-color-border-faint{
  background-color: var(--token-color-border-faint);
}
.bg-color-border-primary{
  background-color: var(--token-color-border-primary);
}
.bg-color-border-strong{
  background-color: var(--token-color-border-strong);
}
.bg-color-foreground-action{
  background-color: var(--token-color-foreground-action);
}
.bg-color-page-faint{
  background-color: var(--token-color-page-faint);
}
.bg-color-page-primary{
  background-color: var(--token-color-page-primary);
}
.bg-color-palette-alpha-100{
  background-color: var(--token-color-palette-alpha-100);
}
.bg-color-palette-blue-200{
  background-color: var(--token-color-palette-blue-200);
}
.bg-color-palette-neutral-100{
  background-color: var(--token-color-palette-neutral-100);
}
.bg-color-surface-interactive-active{
  background-color: var(--token-color-surface-interactive-active);
}
.bg-white{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-gradient-to-l{
  background-image: linear-gradient(to left, var(--tw-gradient-stops));
}
.bg-gradient-to-r{
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.bg-gradient-to-tr{
  background-image: linear-gradient(to top right, var(--tw-gradient-stops));
}
.from-color-page-primary{
  --tw-gradient-from: var(--token-color-page-primary) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-color-palette-neutral-50{
  --tw-gradient-from: var(--token-color-palette-neutral-50) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-color-palette-purple-200{
  --tw-gradient-from: var(--token-color-palette-purple-200) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.to-color-palette-neutral-200{
  --tw-gradient-to: var(--token-color-palette-neutral-200) var(--tw-gradient-to-position);
}
.to-color-palette-purple-100{
  --tw-gradient-to: var(--token-color-palette-purple-100) var(--tw-gradient-to-position);
}
.to-transparent{
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}
.p-0{
  padding: 0px;
}
.p-0\.5{
  padding: 0.125rem;
}
.p-16{
  padding: 4rem;
}
.p-px{
  padding: 1px;
}
.px-0\.5{
  padding-left: 0.125rem;
  padding-right: 0.125rem;
}
.px-1{
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.px-1\.5{
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}
.px-16{
  padding-left: 4rem;
  padding-right: 4rem;
}
.px-2{
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.px-2\.5{
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
.px-20{
  padding-left: 5rem;
  padding-right: 5rem;
}
.px-3{
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-4{
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-5{
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.px-6{
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.px-\[5px\]{
  padding-left: 5px;
  padding-right: 5px;
}
.py-1{
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.py-1\.5{
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.py-12{
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.py-2{
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-2\.5{
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.py-3{
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-3\.5{
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}
.py-4{
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-\[1px\]{
  padding-top: 1px;
  padding-bottom: 1px;
}
.py-\[5px\]{
  padding-top: 5px;
  padding-bottom: 5px;
}
.py-\[6\.5px\]{
  padding-top: 6.5px;
  padding-bottom: 6.5px;
}
.py-px{
  padding-top: 1px;
  padding-bottom: 1px;
}
.pb-0\.5{
  padding-bottom: 0.125rem;
}
.pb-12{
  padding-bottom: 3rem;
}
.pb-2\.5{
  padding-bottom: 0.625rem;
}
.pb-20{
  padding-bottom: 5rem;
}
.pb-24{
  padding-bottom: 6rem;
}
.pb-32{
  padding-bottom: 8rem;
}
.pb-4{
  padding-bottom: 1rem;
}
.pb-5{
  padding-bottom: 1.25rem;
}
.pb-6{
  padding-bottom: 1.5rem;
}
.pb-8{
  padding-bottom: 2rem;
}
.pl-1{
  padding-left: 0.25rem;
}
.pl-1\.5{
  padding-left: 0.375rem;
}
.pl-2{
  padding-left: 0.5rem;
}
.pl-2\.5{
  padding-left: 0.625rem;
}
.pl-3{
  padding-left: 0.75rem;
}
.pl-4{
  padding-left: 1rem;
}
.pl-6{
  padding-left: 1.5rem;
}
.pl-\[18px\]{
  padding-left: 18px;
}
.pl-\[35px\]{
  padding-left: 35px;
}
.pr-2{
  padding-right: 0.5rem;
}
.pr-2\.5{
  padding-right: 0.625rem;
}
.pr-3{
  padding-right: 0.75rem;
}
.pr-4{
  padding-right: 1rem;
}
.pr-5{
  padding-right: 1.25rem;
}
.pr-6{
  padding-right: 1.5rem;
}
.pr-7{
  padding-right: 1.75rem;
}
.pr-8{
  padding-right: 2rem;
}
.pr-9{
  padding-right: 2.25rem;
}
.pt-1{
  padding-top: 0.25rem;
}
.pt-1\.5{
  padding-top: 0.375rem;
}
.pt-2{
  padding-top: 0.5rem;
}
.pt-24{
  padding-top: 6rem;
}
.pt-28{
  padding-top: 7rem;
}
.pt-3{
  padding-top: 0.75rem;
}
.pt-4{
  padding-top: 1rem;
}
.pt-5{
  padding-top: 1.25rem;
}
.pt-7{
  padding-top: 1.75rem;
}
.pt-8{
  padding-top: 2rem;
}
.pt-\[7px\]{
  padding-top: 7px;
}
.text-center{
  text-align: center;
}
.text-\[12px\]{
  font-size: 12px;
}
.text-body-100{
  font-size: var(--token-typography-body-100-font-size);
  line-height: var(--token-typography-body-100-line-height);
}
.text-body-200{
  font-size: var(--token-typography-body-200-font-size);
  line-height: var(--token-typography-body-200-line-height);
}
.text-body-300{
  font-size: var(--token-typography-body-300-font-size);
  line-height: var(--token-typography-body-300-line-height);
}
.text-display-100{
  font-size: var(--token-typography-display-100-font-size);
  line-height: var(--token-typography-display-100-line-height);
}
.text-display-300{
  font-size: var(--token-typography-display-300-font-size);
  line-height: var(--token-typography-display-300-line-height);
}
.text-display-400{
  font-size: var(--token-typography-display-400-font-size);
  line-height: var(--token-typography-display-400-line-height);
}
.text-display-500{
  font-size: var(--token-typography-display-500-font-size);
  line-height: var(--token-typography-display-500-line-height);
}
.text-display-600{
  font-size: 45px;
  line-height: 55px;
}
.font-bold{
  font-weight: var(--token-typography-font-weight-bold);
}
.font-medium{
  font-weight: var(--token-typography-font-weight-medium);
}
.font-regular{
  font-weight: var(--token-typography-font-weight-regular);
}
.font-semibold{
  font-weight: var(--token-typography-font-weight-semibold);
}
.uppercase{
  text-transform: uppercase;
}
.lowercase{
  text-transform: lowercase;
}
.leading-none{
  line-height: 1;
}
.leading-tight{
  line-height: 1.25;
}
.tracking-\[-0\.15px\]{
  letter-spacing: -0.15px;
}
.text-color-foreground-action{
  color: var(--token-color-foreground-action);
}
.text-color-foreground-critical{
  color: var(--token-color-foreground-critical);
}
.text-color-foreground-disabled{
  color: var(--token-color-foreground-disabled);
}
.text-color-foreground-faint{
  color: var(--token-color-foreground-faint);
}
.text-color-foreground-primary{
  color: var(--token-color-foreground-primary);
}
.text-color-foreground-strong{
  color: var(--token-color-foreground-strong);
}
.text-color-foreground-warning{
  color: var(--token-color-foreground-warning);
}
.text-color-palette-green-200{
  color: var(--token-color-palette-green-200);
}
.line-through{
  text-decoration-line: line-through;
}
.no-underline{
  text-decoration-line: none;
}
.placeholder-color-palette-neutral-400::-moz-placeholder{
  color: var(--token-color-palette-neutral-400);
}
.placeholder-color-palette-neutral-400::placeholder{
  color: var(--token-color-palette-neutral-400);
}
.opacity-0{
  opacity: 0;
}
.opacity-50{
  opacity: 0.5;
}
.opacity-60{
  opacity: 0.6;
}
.opacity-70{
  opacity: 0.7;
}
.opacity-75{
  opacity: 0.75;
}
.mix-blend-multiply{
  mix-blend-mode: multiply;
}
.shadow-elevation-low{
  --tw-shadow: var(--token-elevation-low-box-shadow);
  --tw-shadow-colored: var(--token-elevation-low-box-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-surface-low{
  --tw-shadow: var(--token-surface-low-box-shadow);
  --tw-shadow-colored: var(--token-surface-low-box-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.outline-none{
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.blur{
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter{
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.transition{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-all{
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-200{
  transition-duration: 200ms;
}
.wrap-anywhere{
  overflow-wrap: anywhere;
}
.hermes-h4{
  font-size: var(--token-typography-body-100-font-size);
  line-height: var(--token-typography-body-100-line-height);
  font-weight: var(--token-typography-font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.025em;
  color: var(--token-color-foreground-faint);
}
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border-width: 0;
  border-style: solid;
  border-color: transparent;
}

dialog{
  margin: auto;
  --tw-translate-y: -1.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

body,
button {
  font-family: var(--token-typography-font-stack-display);
  font-size: var(--token-typography-body-200-font-size);
}

body {
  line-height: var(--token-typography-body-200-line-height);
  color: var(--token-color-foreground-primary);
}

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

ul,
ol {
  list-style: none;
}

.x-container{
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1024px;
  padding-left: 2rem;
  padding-right: 2rem;
}

h1{
  font-size: var(--token-typography-display-500-font-size);
  line-height: var(--token-typography-display-500-line-height);
  font-weight: var(--token-typography-font-weight-bold);
  color: var(--token-color-foreground-strong);
}
h1 + p{
  font-size: var(--token-typography-body-300-font-size);
  line-height: var(--token-typography-body-300-line-height);
}

.divided-list > li{
  border-top-width: 1px;
  border-top-color: transparent;
}
.divided-list > li:not(:first-child){
  border-top-color: var(--token-color-border-faint);
}

.horizontally-divided-list li{
  border-left-width: 1px;
  border-left-color: transparent;
}
.horizontally-divided-list > li:not(:first-child){
  border-left-color: var(--token-color-border-faint);
}

.group:focus-within .visible-with-group{
  visibility: visible;
  opacity: 1;
}

.group:hover .visible-with-group{
  visibility: visible;
  opacity: 1;
}
.visible-with-group:hover, .visible-with-group:focus-within{
  visibility: visible;
  opacity: 1;
}

.flight-sprite-container {
  position: fixed;
  top: 0;
  right: 0;
}

.flight-icon {
  display: block;
}

.flight-icon-display-inline {
  display: inline-block;
}

@keyframes hds-flight-icon-animation-rotation {
  to {
    transform: rotate(360deg);
  }
}
.flight-icon--animation-loading {
  animation: hds-flight-icon-animation-rotation 9s linear infinite;
}

.flight-icon--animation-running {
  animation: hds-flight-icon-animation-rotation 9s linear infinite;
}

@media (prefers-reduced-motion: no-preference) {
  .flight-icon--animation-loading {
    animation-duration: 0.7s;
  }
  .flight-icon--animation-running {
    animation-duration: 1s;
  }
}
.flight-sprite-container {
  position: absolute;
  width: 0;
  height: 0;
  visibility: hidden;
}
.focus-within\:z-10:focus-within{
  z-index: 10;
}
.hover\:scale-105:hover{
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:bg-color-page-faint:hover{
  background-color: var(--token-color-page-faint);
}
.hover\:text-color-foreground-action-hover:hover{
  color: var(--token-color-foreground-action-hover);
}
.hover\:text-color-foreground-critical-on-surface:hover{
  color: var(--token-color-foreground-critical-on-surface);
}
.hover\:text-color-foreground-faint:hover{
  color: var(--token-color-foreground-faint);
}
.hover\:text-color-foreground-primary:hover{
  color: var(--token-color-foreground-primary);
}
.hover\:text-color-foreground-strong:hover{
  color: var(--token-color-foreground-strong);
}
.hover\:no-underline:hover{
  text-decoration-line: none;
}
.focus\:z-10:focus{
  z-index: 10;
}
.focus\:text-color-foreground-faint:focus{
  color: var(--token-color-foreground-faint);
}
.focus\:outline-none:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.focus-visible\:z-10:focus-visible{
  z-index: 10;
}
.active\:z-10:active{
  z-index: 10;
}
.group:focus-within .group-focus-within\:-left-0\.5{
  left: -0.125rem;
}
.group:focus-within .group-focus-within\:-right-0\.5{
  right: -0.125rem;
}
.group:focus-within .group-focus-within\:rounded{
  border-radius: 0.25rem;
}
.group:focus-within .group-focus-within\:bg-color-page-faint{
  background-color: var(--token-color-page-faint);
}
.group:focus-within .group-focus-within\:bg-color-page-primary{
  background-color: var(--token-color-page-primary);
}
.group:focus-within .group-focus-within\:outline{
  outline-style: solid;
}
.group:focus-within .group-focus-within\:outline-2{
  outline-width: 2px;
}
.group:focus-within .group-focus-within\:outline-color-border-strong{
  outline-color: var(--token-color-border-strong);
}
.group:hover .group-hover\:bg-color-page-faint{
  background-color: var(--token-color-page-faint);
}
.group:hover .group-hover\:bg-color-surface-faint{
  background-color: var(--token-color-surface-faint);
}
.group\/primary-link:focus .group-focus\/primary-link\:outline{
  outline-style: solid;
}
.group\/primary-link:focus .group-focus\/primary-link\:outline-2{
  outline-width: 2px;
}
.group\/primary-link:focus .group-focus\/primary-link\:outline-color-border-strong{
  outline-color: var(--token-color-border-strong);
}
@media not all and (min-width: 1024px){
  .max-lg\:hermes-h4{
    font-size: var(--token-typography-body-100-font-size);
    line-height: var(--token-typography-body-100-line-height);
    font-weight: var(--token-typography-font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.025em;
    color: var(--token-color-foreground-faint);
  }
}
@media (min-width: 1024px){
  .lg\:block{
    display: block;
  }
  .lg\:hidden{
    display: none;
  }
  .lg\:w-72{
    width: 18rem;
  }
  .lg\:w-full{
    width: 100%;
  }
  .lg\:flex-row{
    flex-direction: row;
  }
  .lg\:gap-0{
    gap: 0px;
  }
  .lg\:border-l{
    border-left-width: 1px;
  }
  .lg\:px-3{
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .lg\:pl-3{
    padding-left: 0.75rem;
  }
  .lg\:pl-4{
    padding-left: 1rem;
  }
}