@scope ([b-go72696cla]) to (:not([b-go72696cla])) {
  :scope,
  :scope *,
  :scope *:before,
  :scope *:after {
    box-sizing: border-box;
  }
}
/* Only selects html from GdComponents, so we don't interfere with other css from ERP Components or something else */
@scope ([b-go72696cla]) to (:not([b-go72696cla])) {
  /* ===== GdButton / GdLinkButton ===== */
  /* Isolate component */
  a.gd-link-button:scope,
  a.gd-floating-action-link:scope,
  button.gd-button:scope,
  button:scope {
    font: unset;
    letter-spacing: unset;
    line-height: unset;
    text-transform: unset;
    text-decoration: unset;
    border: unset;
    padding: unset;
    background: unset;
  }
  a.gd-link-button:scope,
  a.gd-floating-action-link:scope,
  button:scope {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: var(--gd-size-control-padding-horizontal-gap);
    cursor: pointer;
  }
  a.gd-link-button:scope:disabled,
  a.gd-floating-action-link:scope:disabled,
  button:scope:disabled {
    cursor: not-allowed;
  }
  a.gd-link-button:scope > :is(.leading, .trailing):not(.loading-indicator),
  a.gd-floating-action-link:scope > :is(.leading, .trailing):not(.loading-indicator),
  button:scope > :is(.leading, .trailing):not(.loading-indicator) {
    display: flex;
    justify-content: center;
    align-items: center;
    height: var(--gd-size-icon-default);
    width: var(--gd-size-icon-default);
  }
  a.gd-link-button:scope > .content,
  a.gd-floating-action-link:scope > .content,
  button:scope > .content {
    font-family: var(--gd-text-body-regular-fontFamily);
    font-size: var(--gd-text-body-regular-fontSize);
    font-weight: var(--gd-text-body-regular-fontWeight);
    letter-spacing: var(--gd-text-body-regular-letterSpacing);
    line-height: var(--gd-text-body-regular-lineHeight);
    text-transform: var(--gd-text-body-regular-textTransform);
    text-decoration: var(--gd-text-body-regular-textDecoration);
    overflow: hidden;
    text-overflow: ellipsis;
    font-variant-numeric: lining-nums tabular-nums;
    font-feature-settings: "liga" off, "clig" off;
  }
  a.gd-link-button:scope > .loading-indicator,
  a.gd-floating-action-link:scope > .loading-indicator,
  button:scope > .loading-indicator {
    justify-content: center;
    align-items: center;
    height: var(--gd-size-icon-default);
    width: var(--gd-size-icon-default);
  }
  a.gd-link-button:scope.size-default:is(.primary, .secondary),
  a.gd-floating-action-link:scope.size-default:is(.primary, .secondary),
  button:scope.size-default:is(.primary, .secondary) {
    min-height: var(--gd-size-input-height-default);
    padding: 0 calc(var(--gd-size-control-padding-horizontal-default) - var(--gd-size-stroke-default));
    border-radius: var(--gd-size-radius-default);
    border-width: var(--gd-size-stroke-default);
    border-style: solid;
  }
  a.gd-link-button:scope.size-compact:is(.primary, .secondary),
  a.gd-floating-action-link:scope.size-compact:is(.primary, .secondary),
  button:scope.size-compact:is(.primary, .secondary) {
    min-height: var(--gd-size-input-height-compact);
    padding: 0 calc(var(--gd-size-control-padding-horizontal-default) - var(--gd-size-stroke-default));
    border-radius: var(--gd-size-radius-default);
    border-width: var(--gd-size-stroke-default);
    border-style: solid;
  }
  a.gd-link-button:scope.primary,
  a.gd-floating-action-link:scope.primary,
  button:scope.primary {
    border-color: var(--gd-color-button-border-primary);
    background: var(--gd-color-button-background-primary);
    color: var(--gd-color-button-text-primary);
  }
  .gd-popover-base:hover > a.gd-link-button:scope.primary, a.gd-link-button:scope.primary:hover,
  .gd-popover-base:hover > a.gd-floating-action-link:scope.primary,
  a.gd-floating-action-link:scope.primary:hover,
  .gd-popover-base:hover > button:scope.primary,
  button:scope.primary:hover {
    background: var(--gd-color-button-background-primary-emphasis);
  }
  a.gd-link-button:scope.primary:focus-visible,
  a.gd-floating-action-link:scope.primary:focus-visible,
  button:scope.primary:focus-visible {
    background: var(--gd-color-button-background-primary-emphasis);
    outline-offset: var(--gd-size-stroke-focus);
    outline: var(--gd-color-stroke-focus) solid var(--gd-size-stroke-focus);
  }
  a.gd-link-button:scope.primary:active,
  a.gd-floating-action-link:scope.primary:active,
  button:scope.primary:active {
    box-shadow: var(--gd-effect-shadow-button);
  }
  a.gd-link-button:scope.primary:disabled,
  a.gd-floating-action-link:scope.primary:disabled,
  button:scope.primary:disabled {
    border-color: var(--gd-color-stroke-disabled);
    background: transparent;
    color: var(--gd-color-on-surface-disabled);
  }
  a.gd-link-button:scope.secondary,
  a.gd-floating-action-link:scope.secondary,
  button:scope.secondary {
    border-color: var(--gd-color-button-border-secondary);
    background: var(--gd-color-button-background-secondary);
    color: var(--gd-color-button-text-secondary);
  }
  .gd-popover-base:hover > a.gd-link-button:scope.secondary, a.gd-link-button:scope.secondary:hover,
  .gd-popover-base:hover > a.gd-floating-action-link:scope.secondary,
  a.gd-floating-action-link:scope.secondary:hover,
  .gd-popover-base:hover > button:scope.secondary,
  button:scope.secondary:hover {
    background: var(--gd-color-button-background-secondary-emphasis);
  }
  a.gd-link-button:scope.secondary:focus-visible,
  a.gd-floating-action-link:scope.secondary:focus-visible,
  button:scope.secondary:focus-visible {
    background: var(--gd-color-button-background-secondary-emphasis);
    outline-offset: var(--gd-size-stroke-focus);
    outline: var(--gd-color-stroke-focus) solid var(--gd-size-stroke-focus);
  }
  a.gd-link-button:scope.secondary:active,
  a.gd-floating-action-link:scope.secondary:active,
  button:scope.secondary:active {
    box-shadow: var(--gd-effect-shadow-button);
  }
  a.gd-link-button:scope.secondary:disabled,
  a.gd-floating-action-link:scope.secondary:disabled,
  button:scope.secondary:disabled {
    border-color: var(--gd-color-stroke-disabled);
    background: transparent;
    color: var(--gd-color-on-surface-disabled);
  }
  a.gd-link-button:scope.text-primary .content,
  a.gd-floating-action-link:scope.text-primary .content,
  button:scope.text-primary .content {
    font-family: var(--gd-text-body-underline-fontFamily);
    font-size: var(--gd-text-body-underline-fontSize);
    font-weight: var(--gd-text-body-underline-fontWeight);
    letter-spacing: var(--gd-text-body-underline-letterSpacing);
    line-height: var(--gd-text-body-underline-lineHeight);
    text-transform: var(--gd-text-body-underline-textTransform);
    text-decoration: var(--gd-text-body-underline-textDecoration);
  }
  a.gd-link-button:scope.text-primary,
  a.gd-floating-action-link:scope.text-primary,
  button:scope.text-primary {
    /* We want to set this padding so that the outline is nicer, but the content itself should not be padded */
    padding: 0 var(--gd-size-spacing-0-5x);
    margin: 0 calc(-1 * var(--gd-size-spacing-0-5x));
    border-radius: var(--gd-size-radius-default);
    background: transparent;
    color: var(--gd-color-on-surface-primary);
  }
  .gd-popover-base:hover > a.gd-link-button:scope.text-primary, a.gd-link-button:scope.text-primary:hover,
  .gd-popover-base:hover > a.gd-floating-action-link:scope.text-primary,
  a.gd-floating-action-link:scope.text-primary:hover,
  .gd-popover-base:hover > button:scope.text-primary,
  button:scope.text-primary:hover {
    color: var(--gd-color-on-surface-primary); /* To override the browser-style */
  }
  a.gd-link-button:scope.text-primary:focus-visible,
  a.gd-floating-action-link:scope.text-primary:focus-visible,
  button:scope.text-primary:focus-visible {
    outline-offset: var(--gd-size-stroke-focus);
    outline: var(--gd-color-stroke-focus) solid var(--gd-size-stroke-focus);
  }
  a.gd-link-button:scope.text-primary:disabled,
  a.gd-floating-action-link:scope.text-primary:disabled,
  button:scope.text-primary:disabled {
    color: var(--gd-color-on-surface-disabled);
  }
  a.gd-link-button:scope.text-secondary,
  a.gd-floating-action-link:scope.text-secondary,
  button:scope.text-secondary {
    /* We want to set this padding so that the outline is nicer, but the content itself should not be padded */
    padding: 0 var(--gd-size-spacing-0-5x);
    margin: 0 calc(-1 * var(--gd-size-spacing-0-5x));
    border-radius: var(--gd-size-radius-default);
    background: transparent;
    color: var(--gd-color-on-surface-secondary);
  }
  .gd-popover-base:hover > a.gd-link-button:scope.text-secondary, a.gd-link-button:scope.text-secondary:hover,
  .gd-popover-base:hover > a.gd-floating-action-link:scope.text-secondary,
  a.gd-floating-action-link:scope.text-secondary:hover,
  .gd-popover-base:hover > button:scope.text-secondary,
  button:scope.text-secondary:hover {
    color: var(--gd-color-link-secondary-emphasis);
  }
  a.gd-link-button:scope.text-secondary:focus-visible,
  a.gd-floating-action-link:scope.text-secondary:focus-visible,
  button:scope.text-secondary:focus-visible {
    color: var(--gd-color-link-secondary-emphasis);
    outline-offset: var(--gd-size-stroke-focus);
    outline: var(--gd-color-stroke-focus) solid var(--gd-size-stroke-focus);
  }
  a.gd-link-button:scope.text-secondary:active,
  a.gd-floating-action-link:scope.text-secondary:active,
  button:scope.text-secondary:active {
    color: var(--gd-color-link-secondary-emphasis);
  }
  a.gd-link-button:scope.text-secondary:disabled,
  a.gd-floating-action-link:scope.text-secondary:disabled,
  button:scope.text-secondary:disabled {
    color: var(--gd-color-on-surface-disabled);
  }
  a.gd-link-button:scope.text-link,
  a.gd-floating-action-link:scope.text-link,
  button:scope.text-link {
    /* We want to set this padding so that the outline is nicer, but the content itself should not be padded */
    padding: 0 var(--gd-size-spacing-0-5x);
    margin: 0 calc(-1 * var(--gd-size-spacing-0-5x));
    border-radius: var(--gd-size-radius-default);
    background: transparent;
    color: var(--gd-color-link-primary);
  }
  .gd-popover-base:hover > a.gd-link-button:scope.text-link, a.gd-link-button:scope.text-link:hover,
  .gd-popover-base:hover > a.gd-floating-action-link:scope.text-link,
  a.gd-floating-action-link:scope.text-link:hover,
  .gd-popover-base:hover > button:scope.text-link,
  button:scope.text-link:hover {
    color: var(--gd-color-link-primary-emphasis);
  }
  a.gd-link-button:scope.text-link:focus-visible,
  a.gd-floating-action-link:scope.text-link:focus-visible,
  button:scope.text-link:focus-visible {
    color: var(--gd-color-link-primary-emphasis);
    outline-offset: var(--gd-size-stroke-focus);
    outline: var(--gd-color-stroke-focus) solid var(--gd-size-stroke-focus);
  }
  a.gd-link-button:scope.text-link:disabled,
  a.gd-floating-action-link:scope.text-link:disabled,
  button:scope.text-link:disabled {
    color: var(--gd-color-on-surface-disabled);
  }
  /* ===== GdClipboardCopyButton ===== */
  &.gd-copy-button-container {
    display: flex;
    /* If the button has no content, it's height becomes too small to be used inline */
    min-height: var(--gd-size-text-line-height-body);
  }
  &.gd-copy-button-container .copy-contents {
    display: none;
  }
  /* ===== GdQuickActionFavoriteToggle ===== */
  &.gd-quick-action-favorite-toggle {
    display: flex;
  }
  &.gd-quick-action-favorite-toggle[data-isFavorite] .add-favorite {
    display: none;
  }
  &.gd-quick-action-favorite-toggle:not([data-isFavorite]) .remove-favorite {
    display: none;
  }
  &.gd-quick-action-favorite-toggle .remove-favorite {
    --gd-icon-fill: var(--gd-color-surface-warning);
  }
  /* ===== GdQuickActionShopLink ===== */
  &.gd-quick-action-shop-link {
    --popover-offset-y: var(--gd-size-spacing-2x);
  }
  &.gd-quick-action-shop-link .gd-menu {
    width: 160px;
  }
  /* ===== GdQuickActionLocationMenu ===== */
  &.gd-quick-action-location-menu {
    --popover-offset-y: var(--gd-size-spacing-2x);
  }
  /* ===== GdFloatingActionButton / GdFloatingActionLinkButton ===== */
  button.gd-floating-action:scope,
  a.gd-floating-action:scope {
    min-height: var(--gd-size-input-height-default);
    padding: 0 calc(var(--gd-size-control-padding-horizontal-default) - var(--gd-size-stroke-default));
    border-width: var(--gd-size-stroke-default);
    border-style: solid;
    border-color: var(--gd-color-button-border-fab);
    border-radius: var(--gd-size-control-radius-fab);
    background: var(--gd-color-button-background-fab);
    box-shadow: var(--gd-effect-elevation-low);
    color: var(--gd-color-button-text-fab);
  }
  button.gd-floating-action:scope:hover,
  a.gd-floating-action:scope:hover {
    background: var(--gd-color-button-background-fab-emphasis);
  }
  button.gd-floating-action:scope:focus-visible,
  a.gd-floating-action:scope:focus-visible {
    background: var(--gd-color-button-background-fab-emphasis);
    outline-offset: var(--gd-size-stroke-focus);
    outline: var(--gd-color-stroke-focus) solid var(--gd-size-stroke-focus);
  }
  button.gd-floating-action:scope:active,
  a.gd-floating-action:scope:active {
    background: var(--gd-color-button-background-fab);
  }
  button.gd-floating-action:scope > .content,
  a.gd-floating-action:scope > .content {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }
  /* ===== GdIconButton ===== */
  &.gd-icon-button {
    position: relative;
    flex-shrink: 0;
    outline: none;
    --popover-viewport-clip-distance: var(--gd-size-spacing-1x);
    width: var(--gd-size-icon-button-height-default);
    height: var(--gd-size-icon-button-height-default);
    color: var(--gd-color-on-surface-secondary);
  }
  .gd-popover-base:hover > &.gd-icon-button, &.gd-icon-button:hover, &.gd-icon-button:focus-visible {
    color: var(--gd-color-on-surface-primary);
  }
  &.gd-icon-button:disabled {
    color: var(--gd-color-on-surface-disabled);
  }
  &.gd-icon-button.compact {
    width: var(--gd-size-icon-button-height-compact);
    height: var(--gd-size-icon-button-height-compact);
  }
  &.gd-icon-button.inline-body {
    width: var(--gd-size-icon-button-height-compact);
    height: var(--gd-size-icon-button-height-compact);
    margin: var(--gd-size-icon-button-offset-inline-body) var(--gd-size-icon-button-offset-icon-default);
  }
  &.gd-icon-button.icon-default {
    width: var(--gd-size-icon-button-height-compact);
    height: var(--gd-size-icon-button-height-compact);
    margin: var(--gd-size-icon-button-offset-icon-default);
  }
  &.gd-icon-button:focus-visible {
    background: var(--gd-color-surface-hover);
    border-radius: var(--gd-size-radius-default);
  }
  &.gd-icon-button:active {
    background: var(--gd-color-surface-hover);
    border-radius: var(--gd-size-radius-default);
  }
  &.gd-icon-button > span {
    display: inline-block;
    width: var(--gd-size-icon-default);
    height: var(--gd-size-icon-default);
  }
  /* ===== GdInputChip ===== */
  &.gd-input-chip {
    box-sizing: border-box;
    display: inline-flex;
    min-height: var(--gd-size-button-height-default);
    max-width: 100%;
    padding: 0 calc(var(--gd-size-control-padding-horizontal-default) - var(--gd-size-stroke-default));
    justify-content: center;
    align-items: center;
    gap: var(--gd-size-control-padding-horizontal-gap);
    color: var(--gd-color-on-surface-primary);
    border-radius: var(--gd-size-control-radius-chip);
    border: var(--gd-size-stroke-default) solid var(--gd-color-input-border-default);
    background: var(--gd-color-surface-primary);
  }
  &.gd-input-chip > .leading {
    display: flex;
    height: var(--gd-size-text-line-height-body);
    justify-content: center;
    align-items: center;
  }
  &.gd-input-chip > .label {
    font-family: var(--gd-text-body-regular-fontFamily);
    font-size: var(--gd-text-body-regular-fontSize);
    font-weight: var(--gd-text-body-regular-fontWeight);
    letter-spacing: var(--gd-text-body-regular-letterSpacing);
    line-height: var(--gd-text-body-regular-lineHeight);
    text-transform: var(--gd-text-body-regular-textTransform);
    text-decoration: var(--gd-text-body-regular-textDecoration);
    overflow: hidden;
    font-variant-numeric: lining-nums tabular-nums;
    font-feature-settings: "liga" off, "clig" off;
    text-overflow: ellipsis;
    text-wrap: nowrap;
  }
  &.gd-input-chip > .trailing {
    display: flex;
    padding-right: var(--gd-size-icon-button-offset-icon-default-in-chip);
    align-items: center;
  }
  &.gd-input-chip:hover {
    border-color: var(--gd-color-input-border-emphasis);
  }
  &.gd-input-chip:has(.trailing button:focus-visible) {
    outline: var(--gd-size-stroke-focus) solid var(--gd-color-stroke-focus);
    outline-offset: var(--gd-size-stroke-focus);
  }
  &.gd-input-chip:has(.trailing button:focus-visible) .trailing button {
    background: unset;
  }
  &.gd-input-chip:has(.trailing button:focus-visible) .trailing button::after {
    content: unset;
  }
  &.gd-input-chip:has(.trailing button:disabled) {
    color: var(--gd-color-on-surface-disabled);
    border-color: var(--gd-color-stroke-disabled);
    background: var(--gd-color-input-background-disabled);
  }
  &.gd-input-chip.compact {
    min-height: var(--gd-size-button-height-compact);
  }
  /* ===== GdQuickActionBar ===== */
  &.gd-quick-action-bar {
    display: flex;
    height: var(--gd-size-icon-button-height-inline-body);
    justify-content: flex-end;
    align-items: center;
    gap: var(--gd-size-spacing-6x);
  }
  &.gd-quick-action-bar .additional-menu {
    --popover-offset-y: var(--gd-size-spacing-2x);
  }
}
.gd-icon-button[b-go72696cla]:focus-visible::after {
  content: "";
  position: absolute;
  top: calc(-2 * var(--gd-size-stroke-focus));
  bottom: calc(-2 * var(--gd-size-stroke-focus));
  left: calc(-2 * var(--gd-size-stroke-focus));
  right: calc(-2 * var(--gd-size-stroke-focus));
  border-radius: var(--gd-size-radius-focus-default);
  border: var(--gd-color-stroke-focus) solid var(--gd-size-stroke-focus);
  pointer-events: none;
}

/* Only selects html from GdComponents, so we don't interfere with other css from ERP Components or something else */
@scope ([b-go72696cla]) to (:not([b-go72696cla])) {
  /* :where is important here so we do not influence specificity, because everything in our inputs depends on the fact that these selectors have (0, 1, 1) specificity */
  /* .gd-toggle-switch is for backwards compatibility, remove before full release */
  input:where(:not(.gd-isolated-input, .gd-toggle-switch)):scope,
  select:scope,
  textarea:scope {
    font-family: var(--gd-text-body-regular-fontFamily);
    font-size: var(--gd-text-body-regular-fontSize);
    font-weight: var(--gd-text-body-regular-fontWeight);
    letter-spacing: var(--gd-text-body-regular-letterSpacing);
    line-height: var(--gd-text-body-regular-lineHeight);
    text-transform: var(--gd-text-body-regular-textTransform);
    text-decoration: var(--gd-text-body-regular-textDecoration);
    align-self: stretch;
    outline: none;
    overflow: hidden;
    color: var(--gd-color-on-surface-primary);
    font-variant-numeric: lining-nums tabular-nums;
    font-feature-settings: "liga" off, "clig" off;
    text-overflow: ellipsis ellipsis;
    --border-width: var(--gd-size-stroke-default);
    padding: calc(var(--gd-size-control-padding-vertical-default) - var(--border-width)) calc(var(--gd-size-control-padding-horizontal-default) - var(--border-width));
    border-radius: var(--gd-size-control-radius-text-field);
    border: var(--gd-size-stroke-default) solid var(--gd-color-input-border-default);
    background: var(--gd-color-input-background-default);
  }
  input:where(:not(.gd-isolated-input, .gd-toggle-switch)):scope::placeholder,
  select:scope::placeholder,
  textarea:scope::placeholder {
    overflow: hidden;
    color: var(--gd-color-on-surface-tertiary);
    font-variant-numeric: lining-nums tabular-nums;
    font-feature-settings: "liga" off, "clig" off;
    text-overflow: ellipsis ellipsis;
  }
  input:where(:not(.gd-isolated-input, .gd-toggle-switch)):scope:hover,
  select:scope:hover,
  textarea:scope:hover {
    border: var(--gd-size-stroke-default) solid var(--gd-color-input-border-emphasis);
    --border-width: var(--gd-size-stroke-default);
  }
  input:where(:not(.gd-isolated-input, .gd-toggle-switch)):scope:focus-visible, input:where(:not(.gd-isolated-input, .gd-toggle-switch)):scope:active,
  select:scope:focus-visible,
  select:scope:active,
  textarea:scope:focus-visible,
  textarea:scope:active {
    border: var(--gd-size-stroke-focus) solid var(--gd-color-stroke-focus);
    --border-width: var(--gd-size-stroke-focus);
  }
  input:where(:not(.gd-isolated-input, .gd-toggle-switch)):scope:read-only,
  select:scope:read-only,
  textarea:scope:read-only {
    border: var(--gd-size-stroke-default) solid var(--gd-color-input-border-disabled);
    --border-width: var(--gd-size-stroke-default);
    background: var(--gd-color-input-background-disabled);
  }
  input:where(:not(.gd-isolated-input, .gd-toggle-switch)):scope:disabled,
  select:scope:disabled,
  textarea:scope:disabled {
    border: var(--gd-size-stroke-default) solid var(--gd-color-input-border-disabled);
    --border-width: var(--gd-size-stroke-default);
    background: var(--gd-color-input-background-disabled);
    color: var(--gd-color-on-surface-tertiary);
    cursor: not-allowed;
  }
  input:where(:not(.gd-isolated-input, .gd-toggle-switch)):scope.invalid,
  select:scope.invalid,
  textarea:scope.invalid {
    border: var(--gd-size-stroke-strong) solid var(--gd-color-on-surface-negative);
    background: var(--gd-color-input-background-default);
    --border-width: var(--gd-size-stroke-strong);
  }
  textarea:scope {
    resize: vertical;
    overflow: unset;
    min-height: var(--gd-size-input-height-default);
  }
  /* ===== GdInputField ===== */
  &.gd-input-field {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gd-size-control-padding-vertical-stack);
  }
  &.gd-input-field > .content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    gap: var(--gd-size-control-padding-vertical-stack);
    flex: 1 1 0;
  }
  /* ===== GdFieldHeader ===== */
  &.gd-field-header {
    padding: 0 1px; /* So that the text does not align with a field's border, looks weird otherwise */
    height: var(--gd-size-text-line-height-body);
    display: flex;
    align-items: center;
    align-self: stretch;
    gap: var(--gd-size-control-padding-vertical-stack);
    color: var(--gd-color-on-surface-secondary);
    font-variant-numeric: lining-nums tabular-nums;
    font-feature-settings: "liga" off, "clig" off;
  }
  &.gd-field-header:has(> *:only-child:empty) {
    display: none;
  }
  &.gd-field-header > .label {
    font-family: var(--gd-text-body-regular-fontFamily);
    font-size: var(--gd-text-body-regular-fontSize);
    font-weight: var(--gd-text-body-regular-fontWeight);
    letter-spacing: var(--gd-text-body-regular-letterSpacing);
    line-height: var(--gd-text-body-regular-lineHeight);
    text-transform: var(--gd-text-body-regular-textTransform);
    text-decoration: var(--gd-text-body-regular-textDecoration);
    flex: 1 1 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* ===== GdFieldHelpText / GdValidationError ===== */
  &.gd-field-help-text,
  &.validation-error {
    font-family: var(--gd-text-body-regular-fontFamily);
    font-size: var(--gd-text-body-regular-fontSize);
    font-weight: var(--gd-text-body-regular-fontWeight);
    letter-spacing: var(--gd-text-body-regular-letterSpacing);
    line-height: var(--gd-text-body-regular-lineHeight);
    text-transform: var(--gd-text-body-regular-textTransform);
    text-decoration: var(--gd-text-body-regular-textDecoration);
    padding: 0 1px; /* So that the text does not align with a field's border, looks weird otherwise */
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    align-self: stretch;
    font-variant-numeric: lining-nums tabular-nums;
    font-feature-settings: "liga" off, "clig" off;
  }
  &.gd-field-help-text:empty,
  &.validation-error:empty {
    display: none;
  }
  &.gd-field-help-text {
    color: var(--gd-color-on-surface-secondary);
  }
  &.validation-error {
    color: var(--gd-color-on-surface-negative);
  }
  /* ===== GdInputXYZ ===== */
  .input-container:scope {
    display: flex;
    width: 100%;
    min-width: 0;
    flex: 1 1 auto;
    align-self: stretch;
    align-items: center;
    gap: var(--gd-size-control-padding-horizontal-default);
    --border-width: var(--gd-size-stroke-default);
    border-radius: var(--gd-size-control-radius-text-field);
    border: var(--border-width) solid var(--gd-color-input-border-default);
    background: var(--gd-color-input-background-default);
    padding: calc(var(--gd-size-control-padding-vertical-default) - var(--border-width)) calc(var(--gd-size-control-padding-horizontal-default) - var(--border-width));
  }
  .input-container:scope > .leading {
    align-self: stretch;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: fit-content(var(--gd-size-input-height-default));
    grid-template-rows: calc(var(--gd-size-input-height-default) - 2 * var(--gd-size-control-padding-vertical-default));
    justify-content: flex-start;
    align-items: center;
    justify-items: center;
    flex-shrink: 0;
    color: var(--gd-color-on-surface-secondary);
    gap: var(--gd-size-spacing-4x);
  }
  .input-container:scope > .field-container {
    display: flex;
    align-items: center;
    gap: var(--gd-size-control-padding-horizontal-gap);
    flex: 1 1 0;
    max-height: calc(var(--gd-size-input-height-default) - 2 * (var(--gd-size-control-padding-vertical-default)));
  }
  .input-container:scope > .field-container .prefix, .input-container:scope > .field-container .suffix {
    font-family: var(--gd-text-body-regular-fontFamily);
    font-size: var(--gd-text-body-regular-fontSize);
    font-weight: var(--gd-text-body-regular-fontWeight);
    letter-spacing: var(--gd-text-body-regular-letterSpacing);
    line-height: var(--gd-text-body-regular-lineHeight);
    text-transform: var(--gd-text-body-regular-textTransform);
    text-decoration: var(--gd-text-body-regular-textDecoration);
    display: flex;
    align-items: center;
    overflow: hidden;
    color: var(--gd-color-on-surface-secondary);
    font-variant-numeric: lining-nums tabular-nums;
    font-feature-settings: "liga" off, "clig" off;
    text-overflow: ellipsis;
  }
  .input-container:scope > .field-container :is(input, select) {
    appearance: none;
    outline: none;
    border: none;
    background: none;
    margin: 0;
    padding: 0;
    width: 0;
    flex: 1 1 auto;
  }
  .input-container:scope.input-container-dense {
    padding: calc(var(--gd-size-control-padding-vertical-default-reduced) - var(--border-width)) calc(var(--gd-size-control-padding-horizontal-default) - var(--border-width));
  }
  .input-container:scope.input-container-dense > .trailing, .input-container:scope.input-container-dense > .leading {
    grid-template-rows: calc(var(--gd-size-input-height-default) - 2 * var(--gd-size-control-padding-vertical-default-reduced));
  }
  .input-container:scope.input-container-multiline > .field-container {
    max-height: unset;
    max-width: 100%;
    flex-wrap: wrap;
  }
  .input-container:scope > .trailing {
    align-self: stretch;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: fit-content(var(--gd-size-input-height-default));
    grid-template-rows: calc(var(--gd-size-input-height-default) - 2 * var(--gd-size-control-padding-vertical-default));
    justify-content: flex-end;
    align-items: center;
    justify-items: center;
    flex-shrink: 0;
    color: var(--gd-color-on-surface-secondary);
    gap: var(--gd-size-spacing-4x);
  }
  .input-container:scope > .trailing ~ * {
    margin-left: calc(var(--gd-size-spacing-4x) - var(--gd-size-control-padding-horizontal-default));
  }
  .input-container:scope > .error-icon {
    display: none;
    justify-content: center;
    align-items: stretch;
    --gd-icon-fill: var(--gd-color-on-surface-negative);
  }
  .input-container:scope > .error-icon .tooltip-container {
    display: flex;
    justify-content: center;
    align-items: center;
    justify-self: stretch;
  }
  .input-container:scope .leading:empty, .input-container:scope .prefix:empty, .input-container:scope .suffix:empty, .input-container:scope .trailing:empty {
    display: none;
  }
  .input-container:scope:hover {
    border: var(--gd-size-stroke-default) solid var(--gd-color-input-border-emphasis);
    --border-width: var(--gd-size-stroke-default);
  }
  .input-container:scope:has(input:not([type=hidden]):read-only):not(.gd-combobox) {
    border: var(--gd-size-stroke-default) solid var(--gd-color-input-border-disabled);
    --border-width: var(--gd-size-stroke-default);
    background: var(--gd-color-input-background-disabled);
  }
  .input-container:scope:has(input:active, select:active), .input-container:scope:has(input:focus-visible, select:focus-visible, select:open) {
    border: var(--gd-size-stroke-focus) solid var(--gd-color-stroke-focus);
    --border-width: var(--gd-size-stroke-focus);
  }
  .input-container:scope:has(input:disabled, select:disabled) {
    border: var(--gd-size-stroke-default) solid var(--gd-color-input-border-disabled);
    --border-width: var(--gd-size-stroke-default);
    background: var(--gd-color-input-background-disabled);
  }
  .input-container:scope:has(input.invalid, select.invalid) {
    border: var(--gd-size-stroke-strong) solid var(--gd-color-on-surface-negative);
    --border-width: var(--gd-size-stroke-strong);
    background: var(--gd-color-input-background-default);
  }
  .input-container:scope:has(input.invalid, select.invalid) .error-icon {
    display: flex;
  }
  .input-container:scope:not([data-can-clear]) .gd-tooltip:has(> button.clear) {
    display: none;
  }
  /* ===== GdInputPassword ===== */
  &.gd-password-input.input-container .show, &.gd-password-input.input-container .hide {
    display: contents;
  }
  &.gd-password-input.input-container:has(input[type=text]) .show {
    display: none;
  }
  &.gd-password-input.input-container:has(input[type=password]) .hide {
    display: none;
  }
  /* ===== GdInputDateRange ===== */
  &.gd-input-date-range {
    display: flex;
    align-items: center;
    gap: var(--gd-size-spacing-1x);
    flex: 1 0 0;
    align-self: stretch;
  }
  &.gd-input-date-range > .separator {
    font-family: var(--gd-text-body-regular-fontFamily);
    font-size: var(--gd-text-body-regular-fontSize);
    font-weight: var(--gd-text-body-regular-fontWeight);
    letter-spacing: var(--gd-text-body-regular-letterSpacing);
    line-height: var(--gd-text-body-regular-lineHeight);
    text-transform: var(--gd-text-body-regular-textTransform);
    text-decoration: var(--gd-text-body-regular-textDecoration);
  }
  /*  ===== GdCheckbox / GdRadio ===== */
  &.gd-radio,
  &.gd-checkbox {
    font-family: var(--gd-text-body-regular-fontFamily);
    font-size: var(--gd-text-body-regular-fontSize);
    font-weight: var(--gd-text-body-regular-fontWeight);
    letter-spacing: var(--gd-text-body-regular-letterSpacing);
    line-height: var(--gd-text-body-regular-lineHeight);
    text-transform: var(--gd-text-body-regular-textTransform);
    text-decoration: var(--gd-text-body-regular-textDecoration);
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    gap: var(--gd-size-control-padding-horizontal-default);
  }
  &.gd-radio > .control,
  &.gd-checkbox > .control {
    display: flex;
    height: var(--gd-size-text-line-height-body);
    align-items: center;
    position: relative;
  }
  &.gd-radio > .control > div,
  &.gd-checkbox > .control > div {
    height: var(--gd-size-input-height-selection-controls);
    width: var(--gd-size-input-height-selection-controls);
    display: flex;
    justify-content: center;
    align-items: center;
    border: var(--border-width) solid var(--gd-color-input-border-default-small-elements);
    background: var(--gd-color-input-background-default);
    --border-width: var(--gd-size-stroke-default);
  }
  &.gd-radio > .control > div.checkmark,
  &.gd-checkbox > .control > div.checkmark {
    border-radius: var(--gd-size-radius-default);
  }
  &.gd-radio > .control > div.radio,
  &.gd-checkbox > .control > div.radio {
    border-radius: var(--gd-size-radius-full);
  }
  &.gd-radio > .control > div > svg,
  &.gd-checkbox > .control > div > svg {
    height: calc(var(--gd-size-input-height-selection-controls) - var(--border-width));
    width: calc(var(--gd-size-input-height-selection-controls) - var(--border-width));
  }
  &.gd-radio > .control + span,
  &.gd-checkbox > .control + span {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gd-size-spacing-1x);
    flex: 1 0 0;
    font-family: var(--gd-text-body-regular-fontFamily);
    font-size: var(--gd-text-body-regular-fontSize);
    font-weight: var(--gd-text-body-regular-fontWeight);
    letter-spacing: var(--gd-text-body-regular-letterSpacing);
    line-height: var(--gd-text-body-regular-lineHeight);
    text-transform: var(--gd-text-body-regular-textTransform);
    text-decoration: var(--gd-text-body-regular-textDecoration);
  }
  &.gd-radio > .control + span:empty,
  &.gd-checkbox > .control + span:empty {
    display: none;
  }
  &.gd-radio > .control input:focus-visible + div,
  &.gd-checkbox > .control input:focus-visible + div {
    outline-offset: var(--gd-size-focus-offset);
    outline: var(--gd-color-stroke-focus) solid var(--gd-size-stroke-focus);
  }
  &.gd-radio > .control input:checked + div,
  &.gd-checkbox > .control input:checked + div {
    border: var(--border-width) solid var(--gd-color-input-border-emphasis);
    background: var(--gd-color-input-background-emphasis);
  }
  &.gd-radio > .control input:disabled + div,
  &.gd-checkbox > .control input:disabled + div {
    border: var(--border-width) solid var(--gd-color-input-border-emphasis);
    opacity: var(--gd-color-opacity-disabled);
  }
  &.gd-radio > .control:has(input:disabled) + span,
  &.gd-checkbox > .control:has(input:disabled) + span {
    color: var(--gd-color-on-surface-disabled);
  }
  &.gd-radio > .control > input.invalid + div,
  &.gd-checkbox > .control > input.invalid + div {
    --border-width: var(--gd-size-stroke-strong);
    border: var(--border-width) solid var(--gd-color-on-surface-negative);
  }
  &.gd-radio:hover > .control:not(:has(input.invalid)) > div,
  &.gd-checkbox:hover > .control:not(:has(input.invalid)) > div {
    border: var(--gd-size-stroke-default) solid var(--gd-color-input-border-emphasis);
  }
  &.gd-radio:has(:disabled),
  &.gd-checkbox:has(:disabled) {
    cursor: not-allowed;
  }
  /* ===== GdCheckboxChip / GdRadioChip ===== */
  label.chip:scope {
    font-family: var(--gd-text-body-regular-fontFamily);
    font-size: var(--gd-text-body-regular-fontSize);
    font-weight: var(--gd-text-body-regular-fontWeight);
    letter-spacing: var(--gd-text-body-regular-letterSpacing);
    line-height: var(--gd-text-body-regular-lineHeight);
    text-transform: var(--gd-text-body-regular-textTransform);
    text-decoration: var(--gd-text-body-regular-textDecoration);
    cursor: pointer;
    display: inline-flex;
    min-height: var(--gd-size-input-height-default);
    padding: 0 calc(var(--gd-size-control-padding-horizontal-default) - var(--gd-size-stroke-default));
    justify-content: center;
    align-items: center;
    gap: var(--gd-size-control-padding-horizontal-gap);
    border-radius: var(--gd-size-control-radius-chip);
    border: var(--gd-size-stroke-default) solid var(--gd-color-input-border-default);
    background: var(--gd-color-surface-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--gd-color-on-surface-primary);
    font-variant-numeric: lining-nums tabular-nums;
    font-feature-settings: "liga" off, "clig" off;
  }
  label.chip:scope .icon-checked {
    display: none;
    justify-content: center;
    align-items: center;
    height: var(--gd-size-text-line-height-body);
    width: var(--gd-size-icon-default);
  }
  label.chip:scope:hover {
    border: var(--gd-size-stroke-default) solid var(--gd-color-input-border-emphasis);
  }
  label.chip:scope:has(input:focus-visible) {
    border: var(--gd-size-stroke-default) solid var(--gd-color-input-border-emphasis);
    outline-offset: var(--gd-size-stroke-focus);
    outline: var(--gd-color-stroke-focus) solid var(--gd-size-stroke-focus);
  }
  label.chip:scope:has(input:checked) {
    border: var(--gd-size-stroke-default) solid var(--gd-color-button-border-primary);
    background: var(--gd-color-button-background-primary);
    color: var(--gd-color-button-text-primary);
  }
  label.chip:scope:has(input:checked) .icon-checked {
    display: flex;
  }
  label.chip:scope:has(input:disabled) {
    border: var(--gd-size-stroke-default) solid var(--gd-color-stroke-disabled);
    background: var(--gd-color-input-background-disabled);
    color: var(--gd-color-on-surface-disabled);
    cursor: not-allowed;
  }
  label.chip:scope:has(input:disabled) input:disabled {
    cursor: not-allowed;
  }
  /* ===== GdInputGrid ===== */
  &.gd-input-grid {
    width: 100%;
    display: inline-grid;
    grid-auto-flow: row;
    row-gap: var(--gd-size-spacing-4x);
    grid-template-columns: repeat(var(--columns, 2), minmax(0, 1fr));
    column-gap: var(--gd-size-spacing-8x);
  }
  /* ===== GdInputGridSection ===== */
  &.gd-input-grid-section {
    display: inline-grid;
    justify-self: stretch;
    align-content: start;
    grid-auto-flow: row;
    row-gap: var(--gd-size-spacing-2x);
    grid-template-columns: var(--column-template, minmax(auto, 1fr) minmax(auto, 3fr));
    column-gap: var(--gd-size-control-padding-horizontal-default);
  }
  &.gd-input-grid-section > .title {
    grid-row: span 1;
    grid-column: 1/-1;
    justify-self: stretch;
    color: var(--gd-color-on-surface-primary);
    font-variant-numeric: lining-nums tabular-nums;
    font-feature-settings: "liga" off, "clig" off;
    /* gd/text/body/bold */
    font-family: var(--gd-text-body-bold-fontFamily);
    font-size: var(--gd-text-body-bold-fontSize);
    font-weight: var(--gd-text-body-bold-fontWeight);
    letter-spacing: var(--gd-text-body-bold-letterSpacing);
    line-height: var(--gd-text-body-bold-lineHeight);
    text-transform: var(--gd-text-body-bold-textTransform);
    text-decoration: var(--gd-text-body-bold-textDecoration);
  }
}
label.chip[b-go72696cla] input:first-of-type {
  appearance: none;
  cursor: pointer;
  position: absolute;
  opacity: 0;
}

label:has(> .control)[b-go72696cla] input:first-of-type {
  appearance: none;
  outline: none;
  border: none;
  background: none;
  margin: 0;
  cursor: inherit;
  height: var(--gd-size-input-height-selection-controls);
  width: var(--gd-size-input-height-selection-controls);
  position: absolute;
}

input[b-go72696cla]::placeholder {
  overflow: hidden;
  color: var(--gd-color-on-surface-tertiary);
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "liga" off, "clig" off;
  text-overflow: ellipsis ellipsis;
}

/* ===== Overrides for gd-input-grid / label-left ===== */
/* must be out of the scope to allow user code elements (without gd scope) between gd-input-field and gd-field-header, gd-radio etc */
.gd-input-field.label-left {
  grid-template-columns: minmax(auto, 1fr) minmax(auto, 1fr);
}

.gd-input-grid .gd-input-field {
  grid-template-columns: subgrid;
  grid-column: span 2;
}

.gd-input-grid .gd-input-field,
.gd-input-field.label-left {
  display: grid;
  column-gap: var(--gd-size-control-padding-horizontal-default);
  grid-template-rows: fit-content(100%);
  grid-auto-flow: row;
  grid-auto-rows: fit-content(100%);
  row-gap: var(--gd-size-control-padding-vertical-stack);
}
.gd-input-grid .gd-input-field > *,
.gd-input-field.label-left > * {
  grid-column: 2/-1;
}
.gd-input-grid .gd-input-field .gd-field-header,
.gd-input-field.label-left .gd-field-header {
  font-family: var(--gd-text-body-compact-fontFamily);
  font-size: var(--gd-text-body-compact-fontSize);
  font-weight: var(--gd-text-body-compact-fontWeight);
  letter-spacing: var(--gd-text-body-compact-letterSpacing);
  line-height: var(--gd-text-body-compact-lineHeight);
  text-transform: var(--gd-text-body-compact-textTransform);
  text-decoration: var(--gd-text-body-compact-textDecoration);
  grid-column: 1/2;
  grid-row: 1/-1;
  align-self: start;
  padding: unset;
  height: var(--gd-size-input-height-default);
  max-height: 2lh;
  /* never grow the label track beyond its 1fr share, and never spill into the content column */
  min-width: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap; /* prevent the label from pushing the info icon down to the next line */
  align-items: center;
  justify-content: flex-start;
}
.gd-input-grid .gd-input-field .gd-field-header > .label,
.gd-input-field.label-left .gd-field-header > .label {
  font-family: var(--gd-text-body-compact-fontFamily);
  font-size: var(--gd-text-body-compact-fontSize);
  font-weight: var(--gd-text-body-compact-fontWeight);
  letter-spacing: var(--gd-text-body-compact-letterSpacing);
  line-height: var(--gd-text-body-compact-lineHeight);
  text-transform: var(--gd-text-body-compact-textTransform);
  text-decoration: var(--gd-text-body-compact-textDecoration);
  flex: 1 1 auto;
  min-width: 0;
  white-space: unset;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  overflow: hidden;
}
.gd-input-grid .gd-input-field .gd-field-header > .gd-popover,
.gd-input-field.label-left .gd-field-header > .gd-popover {
  flex: 0 0 auto;
}
.gd-input-grid .gd-input-field .gd-radio,
.gd-input-grid .gd-input-field .gd-checkbox,
.gd-input-grid .gd-input-field .gd-toggle-switch:not(input),
.gd-input-field.label-left .gd-radio,
.gd-input-field.label-left .gd-checkbox,
.gd-input-field.label-left .gd-toggle-switch:not(input) { /* :not(input) is for back compatibility, remove before full release */
  min-height: var(--gd-size-input-height-default);
  align-items: center;
  justify-self: flex-start;
}

/* Only selects html from GdComponents, so we don't interfere with other css from ERP Components or something else */
@scope ([b-go72696cla]) to (:not([b-go72696cla])) {
  /* ===== GdMessageBox ===== */
  &.gd-message-box {
    width: 100%;
    display: flex;
    align-items: flex-start;
    border-radius: var(--gd-size-radius-default);
  }
  &.gd-message-box > .content {
    flex: 1 0 0;
    padding: var(--gd-size-spacing-4x) var(--gd-size-spacing-2x) var(--gd-size-spacing-4x) var(--gd-size-spacing-4x);
    display: flex;
    align-items: flex-start;
    gap: var(--gd-size-spacing-3x);
  }
  &.gd-message-box .message {
    flex: 1 0 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: var(--gd-size-spacing-2x);
  }
  &.gd-message-box .message > strong {
    font-family: var(--gd-text-body-bold-fontFamily);
    font-size: var(--gd-text-body-bold-fontSize);
    font-weight: var(--gd-text-body-bold-fontWeight);
    letter-spacing: var(--gd-text-body-bold-letterSpacing);
    line-height: var(--gd-text-body-bold-lineHeight);
    text-transform: var(--gd-text-body-bold-textTransform);
    text-decoration: var(--gd-text-body-bold-textDecoration);
  }
  &.gd-message-box .message > span {
    font-family: var(--gd-text-body-regular-fontFamily);
    font-size: var(--gd-text-body-regular-fontSize);
    font-weight: var(--gd-text-body-regular-fontWeight);
    letter-spacing: var(--gd-text-body-regular-letterSpacing);
    line-height: var(--gd-text-body-regular-lineHeight);
    text-transform: var(--gd-text-body-regular-textTransform);
    text-decoration: var(--gd-text-body-regular-textDecoration);
  }
  &.gd-message-box.neutral {
    background: var(--gd-color-surface-neutral);
  }
  &.gd-message-box.info {
    background: var(--gd-color-surface-info);
  }
  &.gd-message-box.success {
    background: var(--gd-color-surface-positive);
  }
  &.gd-message-box.warning {
    background: var(--gd-color-surface-warning);
  }
  &.gd-message-box.error {
    background: var(--gd-color-surface-negative);
  }
  /* ===== GdCounterBadge ===== */
  &.gd-counter-badge {
    font-family: var(--gd-text-label-regular-fontFamily);
    font-size: var(--gd-text-label-regular-fontSize);
    font-weight: var(--gd-text-label-regular-fontWeight);
    letter-spacing: var(--gd-text-label-regular-letterSpacing);
    line-height: var(--gd-text-label-regular-lineHeight);
    text-transform: var(--gd-text-label-regular-textTransform);
    text-decoration: var(--gd-text-label-regular-textDecoration);
    display: inline-flex;
    height: var(--gd-size-text-line-height-body);
    min-width: var(--gd-size-text-line-height-body);
    padding: 0 var(--gd-size-spacing-1-5x);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: var(--gd-size-radius-full);
    border: 1px solid var(--gd-color-badge-border);
    background: var(--gd-color-surface-tertiary);
    color: var(--gd-color-on-surface-primary);
  }
  &.gd-counter-badge.prominent {
    color: var(--gd-color-on-surface-inverted-primary);
    background: var(--gd-color-surface-inverted-primary);
  }
}
/* Only selects html from GdComponents, so we don't interfere with other css from ERP Components or something else */
@scope ([b-go72696cla]) to (:not([b-go72696cla])) {
  &.gd-page-article-wrapper {
    /* ===== GdPageArticleWrapper ===== */
    display: flex;
    flex-direction: column;
    gap: var(--gd-size-spacing-1x);
  }
  &.gd-page-article-wrapper.fixed-slim, &.gd-page-article-wrapper.fixed-default {
    width: 880px;
  }
  &.gd-page-article-wrapper.fixed-wide {
    width: 1250px;
  }
}
/* The legacy ErpBox has a defined margin-bottom to add vertical space against its bottom neighbour.
We want to remove this as layout spacing should be a concern of the containing parent component, not the ErpBox.
Until then we force margin-bottom to 0 in the new page header layout */
.gd-page-article-wrapper[b-go72696cla] > div.box[razor-isolated] {
  margin-bottom: 0;
}

/* Only selects html from GdComponents, so we don't interfere with other css from ERP Components or something else */
@scope ([b-go72696cla]) to (:not([b-go72696cla])) {
  /* ===== GdBrandingBanner ===== */
  &.gd-branding-banner {
    height: 10px;
    background: linear-gradient(90deg, #C4A277 16.6666666667%, #FFC32D 16.6666666667% 33.3333333333%, #F67858 33.3333333333% 50%, #84D160 50% 66.6666666667%, #B384D3 66.6666666667% 83.3333333333%, #72C7F9 83.3333333333%);
  }
  /* ===== GdMandatorBanner ===== */
  &.gd-mandator-banner {
    height: 10px;
  }
  &.gd-mandator-banner[data-mandator="406802"] {
    background-color: var(--gd-color-surface-accent-ch, #F67858);
  }
  &.gd-mandator-banner[data-mandator="2705624"] {
    background-color: var(--gd-color-surface-accent-eu, #72C7F9);
  }
  /* ===== GdStatusBanner ===== */
  &.gd-status-banner {
    height: 40px;
    display: flex;
    flex-direction: row;
    padding: 0 var(--gd-size-spacing-6x);
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    align-self: stretch;
    background: var(--gd-color-surface-warning);
  }
  &.gd-status-banner .label {
    display: flex;
    align-items: center;
    gap: var(--gd-size-spacing-3x);
  }
  &.gd-status-banner .description {
    font-family: var(--gd-text-body-bold-fontFamily);
    font-size: var(--gd-text-body-bold-fontSize);
    font-weight: var(--gd-text-body-bold-fontWeight);
    letter-spacing: var(--gd-text-body-bold-letterSpacing);
    line-height: var(--gd-text-body-bold-lineHeight);
    text-transform: var(--gd-text-body-bold-textTransform);
    text-decoration: var(--gd-text-body-bold-textDecoration);
    overflow: hidden;
    color: var(--gd-color-on-surface-primary);
    text-align: center;
    font-variant-numeric: lining-nums tabular-nums;
    font-feature-settings: "liga" off, "clig" off;
    text-overflow: ellipsis;
  }
  &.gd-status-banner a:is(:not([href]), [href=""]) {
    display: none;
  }
  /* ===== GdCard ===== */
  &.gd-card {
    padding: var(--gd-size-spacing-4x);
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--gd-size-spacing-4x);
    border-radius: var(--gd-size-radius-default);
    background: var(--gd-color-surface-primary);
  }
  &.gd-card.secondary {
    background: var(--gd-color-surface-secondary);
  }
  &.gd-card.comfortable {
    padding: var(--gd-size-spacing-6x);
    gap: var(--gd-size-spacing-6x);
  }
  &.gd-card.spacious {
    padding: var(--gd-size-spacing-8x);
    gap: var(--gd-size-spacing-8x);
  }
  /* ===== GdCardHeader ===== */
  &.card-section-header {
    font-family: var(--gd-text-headline-h1-fontFamily);
    font-size: var(--gd-text-headline-h1-fontSize);
    font-weight: var(--gd-text-headline-h1-fontWeight);
    letter-spacing: var(--gd-text-headline-h1-letterSpacing);
    line-height: var(--gd-text-headline-h1-lineHeight);
    text-transform: var(--gd-text-headline-h1-textTransform);
    text-decoration: var(--gd-text-headline-h1-textDecoration);
  }
  /* ===== GdCardSection ===== */
  &.gd-card-section {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--gd-size-spacing-4x);
  }
  /* ===== GdCenteredContentLayout ===== */
  main:scope.gd-centered-content-layout {
    align-self: center;
    width: 480px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gd-size-spacing-1x);
    font-family: var(--gd-text-body-regular-fontFamily);
    font-size: var(--gd-text-body-regular-fontSize);
    font-weight: var(--gd-text-body-regular-fontWeight);
    letter-spacing: var(--gd-text-body-regular-letterSpacing);
    line-height: var(--gd-text-body-regular-lineHeight);
    text-transform: var(--gd-text-body-regular-textTransform);
    text-decoration: var(--gd-text-body-regular-textDecoration);
  }
  main:scope.gd-centered-content-layout > header {
    align-self: stretch;
    height: 52px;
    display: flex;
    padding: var(--gd-size-spacing-4x) var(--gd-size-spacing-8x);
    align-items: stretch;
    border-radius: var(--gd-size-radius-default);
    background: var(--gd-color-surface-secondary);
  }
  main:scope.gd-centered-content-layout > header:empty {
    opacity: 0;
  }
  main:scope.gd-centered-content-layout > article {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--gd-size-spacing-1x);
  }
  /* ===== RelatedLinks ===== */
  dl.gd-related-link {
    display: inline-grid;
    width: 100%;
    margin: 0;
    grid-auto-rows: fit-content(100%);
    grid-template-columns: minmax(0, max-content) minmax(0, max-content);
    row-gap: var(--gd-size-spacing-2x);
    column-gap: var(--gd-size-spacing-4x);
    justify-items: start;
  }
  dl.gd-related-link > dt {
    max-width: 100%;
    overflow: hidden;
    color: var(--gd-color-on-surface-secondary);
    font-variant-numeric: lining-nums tabular-nums;
    font-feature-settings: "liga" off, "clig" off;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--gd-text-body-regular-fontFamily);
    font-size: var(--gd-text-body-regular-fontSize);
    font-weight: var(--gd-text-body-regular-fontWeight);
    letter-spacing: var(--gd-text-body-regular-letterSpacing);
    line-height: var(--gd-text-body-regular-lineHeight);
    text-transform: var(--gd-text-body-regular-textTransform);
    text-decoration: var(--gd-text-body-regular-textDecoration);
  }
  dl.gd-related-link > dd {
    margin: 0;
  }
  /* ===== GdTitleSection ===== */
  &.gd-title-section {
    display: flex;
    padding: var(--gd-size-spacing-4x);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gd-size-spacing-4x);
    border-radius: var(--gd-size-radius-default);
    background: var(--gd-color-surface-secondary);
  }
  &.gd-title-section:has(.gd-tab-bar) {
    padding-bottom: 0;
  }
  &.gd-title-section .title-bar {
    display: flex;
    gap: var(--gd-size-spacing-8x);
    align-self: stretch;
    justify-content: space-between;
  }
  &.gd-title-section .quick-actions {
    display: flex;
    height: var(--gd-size-icon-button-height-inline-body);
    justify-content: flex-end;
    align-items: center;
    gap: var(--gd-size-spacing-6x);
  }
  &.gd-title-section .page-title {
    display: flex;
    align-items: flex-start;
    gap: var(--gd-size-spacing-8x);
    align-self: stretch;
  }
  &.gd-title-section .page-title .quick-actions {
    margin-top: var(--gd-size-spacing-2x);
  }
  &.gd-title-section h1 {
    font-family: var(--gd-text-headline-h1-fontFamily);
    font-size: var(--gd-text-headline-h1-fontSize);
    font-weight: var(--gd-text-headline-h1-fontWeight);
    letter-spacing: var(--gd-text-headline-h1-letterSpacing);
    line-height: var(--gd-text-headline-h1-lineHeight);
    text-transform: var(--gd-text-headline-h1-textTransform);
    text-decoration: var(--gd-text-headline-h1-textDecoration);
    margin: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    flex: 1 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* ===== GdPageHeader & GdPageHeaderPlain ===== */
  &.gd-page-header, &.gd-page-header-plain {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gd-size-spacing-1x);
    width: 100%;
  }
  &.gd-page-header > .content-close, &.gd-page-header-plain > .content-close {
    display: flex;
    flex-direction: column;
    gap: var(--gd-size-spacing-0-25x);
    align-self: stretch;
  }
  /* ===== GdSearchSection ===== */
  &.gd-search-section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    padding: var(--gd-size-spacing-4x);
    border-radius: var(--gd-size-radius-default);
    background: var(--gd-color-surface-secondary);
  }
  &.gd-search-section:has(.tab-bar) {
    padding: 0 var(--gd-size-spacing-4x) var(--gd-size-spacing-4x) var(--gd-size-spacing-4x);
  }
  &.gd-search-section > .tab-bar, &.gd-search-section > fieldset > .tab-bar {
    display: flex;
    align-items: flex-start;
    align-self: stretch;
    gap: var(--gd-size-spacing-6x);
    flex: 1 0 0;
  }
  &.gd-search-section > .content, &.gd-search-section > fieldset > .content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gd-size-spacing-4x);
    align-self: stretch;
  }
  &.gd-search-section > .content > form, &.gd-search-section > fieldset > .content > form {
    display: contents;
  }
  &.gd-search-section > fieldset {
    display: contents;
  }
  /* ===== GdSearchTools ===== */
  &.gd-search-tools {
    display: flex;
    width: 100%;
    height: var(--gd-size-button-height-default);
    justify-content: flex-end;
    align-items: center;
    gap: var(--gd-size-spacing-4x);
    grid-column: 1/-1;
    align-self: stretch;
  }
  &.gd-search-tools .gd-tooltip:has(.button-ascending[data-hidden], .button-descending[data-hidden]) {
    display: none;
  }
  &.gd-search-tools > .sorting {
    display: flex;
    align-items: center;
    gap: var(--gd-size-spacing-4x);
    flex: 1 0 0;
    --popover-offset-y: var(--gd-size-spacing-2x);
  }
  &.gd-search-tools > .tools {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--gd-size-spacing-4x);
  }
  &.gd-search-tools > .divider {
    width: 1px;
    flex-shrink: 0;
    align-self: stretch;
    background: var(--gd-color-stroke-default);
  }
  &.gd-search-tools > .actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--gd-size-spacing-4x);
  }
  &.gd-search-tools .selected-sorting-option {
    display: none;
  }
  /* ===== GdSimpleSearch ===== */
  &.gd-simple-search .gd-simple-search-content {
    display: flex;
    width: 100%;
    align-items: flex-start;
    gap: var(--gd-size-spacing-4x);
    flex-wrap: wrap;
  }
  &.gd-simple-search .gd-simple-search-content > :not(.gd-search-tools, button) {
    width: auto;
    flex: 1 1 auto;
  }
  /* ===== GdSearchFilterSection ===== */
  &.gd-search-filter-section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gd-size-spacing-4x);
    align-self: stretch;
  }
  &.gd-search-filter-section > .content {
    width: 100%;
    display: inline-grid;
    grid-template-rows: fit-content(100%);
    grid-auto-flow: row;
    grid-auto-rows: fit-content(100%);
    row-gap: var(--gd-size-spacing-2x);
    grid-template-columns: minmax(auto, 1fr) minmax(auto, 3fr) fit-content(100%);
    column-gap: var(--gd-size-spacing-2x);
    align-items: center;
  }
  &.gd-search-filter-section > .content > .filters {
    display: contents;
  }
  &.gd-search-filter-section > .content > .filter-actions {
    grid-column: span 3;
    height: var(--gd-size-input-height-default);
    display: inline-flex;
    align-items: stretch;
    gap: var(--gd-size-spacing-4x);
  }
  &.gd-search-filter-section > .content > .filter-actions > .add-filter {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    --popover-offset-y: var(--gd-size-spacing-2x);
  }
  &.gd-search-filter-section > .content > .filter-actions:has(~ :not(template)) {
    margin-bottom: var(--gd-size-spacing-2x);
  }
  /* ===== GdSearchFilter ===== */
  &.gd-search-filter {
    display: contents;
  }
  &.gd-search-filter > .remove:hover .open {
    display: flex;
  }
  &.gd-search-filter > .remove:hover .closed {
    display: none;
  }
  &.gd-search-filter > .remove .open {
    display: none;
  }
  /* ===== GdPredefinedSearchSection ===== */
  &.gd-predefined-search-section {
    align-self: stretch;
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    column-gap: var(--gd-size-spacing-8x);
    grid-template-rows: fit-content(100%);
    row-gap: var(--gd-size-spacing-4x);
    align-items: flex-start;
  }
  &.gd-predefined-search-section > .column {
    justify-self: stretch;
    display: grid;
    grid-template-rows: fit-content(100%);
    grid-auto-flow: row;
    row-gap: var(--gd-size-spacing-2x);
    grid-template-columns: minmax(0, 1fr);
  }
  &.gd-predefined-search-section > .column .gd-link-button {
    justify-content: flex-start;
  }
}
.gd-search-section[b-go72696cla] > .content > form {
  display: contents;
}

/* Only selects html from GdComponents, so we don't interfere with other css from ERP Components or something else */
@scope ([b-go72696cla]) to (:not([b-go72696cla])) {
  /* ===== GdAvatar ===== */
  &.gd-avatar {
    position: relative;
    display: flex;
    width: 32px;
    height: 32px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    border-radius: var(--gd-size-radius-full);
    cursor: pointer;
  }
  &.gd-avatar:has(span) {
    background: linear-gradient(0deg, rgba(179, 132, 211, 0.7) 0%, rgba(179, 132, 211, 0.7) 100%), #FFF;
  }
  &.gd-avatar:focus-visible {
    outline-offset: var(--gd-size-stroke-focus);
    outline: var(--gd-color-stroke-focus) solid var(--gd-size-stroke-focus);
  }
  &.gd-avatar > span {
    overflow: hidden;
    color: #000;
    text-align: center;
    font-feature-settings: "liga" off, "clig" off;
    text-overflow: ellipsis;
    font-family: Galactica;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
  }
  &.gd-avatar > img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    border-radius: var(--gd-size-radius-full);
  }
  &.gd-avatar > .border {
    position: absolute;
    inset: 0;
    background: none;
    border: 1px solid var(--gd-color-button-border-primary);
    border-radius: var(--gd-size-radius-full);
  }
  &.gd-avatar > .birthday-hat:after {
    content: " ";
    position: absolute;
    top: -61.5%;
    left: 33%;
    height: 25px;
    width: 25px;
    rotate: 12deg;
    background: url("../img/birthday-hat.1db24a92a08ee6abd549da99bc25efe1.png") no-repeat;
    background-size: contain;
  }
}
/* Only selects html from GdComponents, so we don't interfere with other css from ERP Components or something else */
@scope ([b-go72696cla]) to (:not([b-go72696cla])) {
  /* ===== GdMenu ===== */
  &.gd-menu {
    display: flex;
    width: 240px;
    margin: 0;
    padding: var(--gd-size-spacing-2x) 0;
    flex-direction: column;
    align-items: flex-start;
    border-radius: var(--gd-size-radius-default);
    background: var(--gd-color-surface-primary);
    box-shadow: var(--gd-effect-elevation-overlay);
    list-style: none;
  }
  /* ===== GdMenuSectionHeader ===== */
  &.gd-menu-section-header {
    font-family: var(--gd-text-label-regular-fontFamily);
    font-size: var(--gd-text-label-regular-fontSize);
    font-weight: var(--gd-text-label-regular-fontWeight);
    letter-spacing: var(--gd-text-label-regular-letterSpacing);
    line-height: var(--gd-text-label-regular-lineHeight);
    text-transform: var(--gd-text-label-regular-textTransform);
    text-decoration: var(--gd-text-label-regular-textDecoration);
    align-self: stretch;
    display: flex;
    padding: var(--gd-size-spacing-1x) var(--gd-size-spacing-4x);
    color: var(--gd-color-on-surface-secondary);
  }
  /* ===== GdMenuItem ===== */
  &.gd-menu-item {
    align-self: stretch;
    cursor: pointer;
  }
  &.gd-menu-item:hover {
    background: var(--gd-color-surface-hover);
  }
  &.gd-menu-item:focus-visible, &.gd-menu-item:has(:focus-visible) {
    border: var(--gd-size-stroke-focus) solid var(--gd-color-stroke-focus);
    padding: calc(var(--gd-size-spacing-1-5x) - var(--gd-size-stroke-focus)) calc(var(--gd-size-spacing-4x) - var(--gd-size-stroke-focus));
    outline: none; /* outline doesn't work here, so we use a border instead */
  }
  &.gd-menu-item:has(.gd-menu-item-content.disabled, button:disabled) {
    cursor: not-allowed;
  }
  &.gd-menu-item > .menu-item-link, &.gd-menu-item > .menu-item-button {
    /* ===== GdMenuItemLink & GdMenuItemButton ===== */
    display: block;
    text-decoration: none;
    color: inherit;
    outline: none;
    height: 100%;
    width: 100%;
  }
  &.gd-menu-item.gd-menu-item-skeleton {
    /* ===== GdMenuItemSkeleton =====*/
    padding: var(--gd-size-spacing-1-5x) var(--gd-size-spacing-4x);
  }
  &.gd-menu-item.gd-menu-item-skeleton > .menu-item-skeleton {
    display: flex;
    height: var(--gd-size-text-line-height-body);
    padding: var(--gd-size-spacing-0-5x) 0;
    align-items: flex-start;
    align-self: stretch;
    background: var(--gd-color-surface-skeleton);
  }
  @media (prefers-reduced-motion: no-preference) {
    &.gd-menu-item.gd-menu-item-skeleton > .menu-item-skeleton {
      animation-name: skeleton-pulse;
      animation-duration: 2s;
      animation-timing-function: ease-in-out;
      animation-iteration-count: infinite;
    }
    @keyframes skeleton-pulse {
      0% {
        opacity: 1;
      }
      50% {
        opacity: 0.45;
      }
      100% {
        opacity: 1;
      }
    }
  }
  &.gd-menu-item .leading-icon {
    /* ===== GdMenuItemLink / GdMenuItemSubmenu ===== */
    height: var(--gd-size-text-line-height-body);
    display: flex;
    align-items: center;
    justify-content: center;
    --gd-icon-fill: var(--gd-color-on-surface-primary);
  }
  &.gd-menu-item .label-active {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--gd-size-spacing-3x);
  }
  &.gd-menu-item .menu-link-trailing {
    font-family: var(--gd-text-body-regular-fontFamily);
    font-size: var(--gd-text-body-regular-fontSize);
    font-weight: var(--gd-text-body-regular-fontWeight);
    letter-spacing: var(--gd-text-body-regular-letterSpacing);
    line-height: var(--gd-text-body-regular-lineHeight);
    text-transform: var(--gd-text-body-regular-textTransform);
    text-decoration: var(--gd-text-body-regular-textDecoration);
    display: inline-flex;
    justify-content: flex-end;
    align-items: flex-start;
    overflow: hidden;
    color: var(--gd-color-on-surface-secondary);
    text-align: right;
    font-variant-numeric: lining-nums tabular-nums;
    font-feature-settings: "liga" off, "clig" off;
    text-overflow: ellipsis;
  }
  &.gd-menu-item > .menu-item-toggle {
    /* ===== GdMenuItemActionToggleSwitch + GdMenuItemToggleSwitch ===== */
    display: contents;
    cursor: inherit;
  }
  &.gd-menu-item > .menu-item-toggle input:focus-visible {
    outline: none;
  }
  &.gd-menu-item > label .trailing > div {
    display: flex;
    height: var(--gd-size-text-line-height-body);
    justify-content: center;
    align-items: center;
  }
  &.gd-menu-item:focus-within > .folder-popover, &.gd-menu-item[data-active] > .folder-popover {
    /* ===== GdMenuItemSubmenu ===== */
    visibility: visible;
  }
  /* ===== GdMenuItemContent ===== */
  &.gd-menu-item-content {
    display: flex;
    align-items: flex-start;
    gap: var(--gd-size-spacing-3x);
    padding: var(--gd-size-spacing-1-5x) var(--gd-size-spacing-4x);
    hyphens: auto;
  }
  &.gd-menu-item-content.disabled, button:disabled &.gd-menu-item-content {
    opacity: var(--gd-color-opacity-disabled);
    cursor: not-allowed;
  }
  &.gd-menu-item-content > .leading {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  &.gd-menu-item-content > .leading:empty {
    display: none;
  }
  &.gd-menu-item-content > .content {
    flex: 1 0 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gd-size-spacing-1x);
  }
  &.gd-menu-item-content > .content > .main-content {
    align-self: stretch;
    display: flex;
    align-items: flex-start;
    gap: var(--gd-size-spacing-3x);
    color: var(--gd-color-on-surface-primary);
    font-family: var(--gd-text-body-regular-fontFamily);
    font-size: var(--gd-text-body-regular-fontSize);
    font-weight: var(--gd-text-body-regular-fontWeight);
    letter-spacing: var(--gd-text-body-regular-letterSpacing);
    line-height: var(--gd-text-body-regular-lineHeight);
    text-transform: var(--gd-text-body-regular-textTransform);
    text-decoration: var(--gd-text-body-regular-textDecoration);
  }
  &.gd-menu-item-content > .content > .main-content > .label {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    align-self: stretch;
    flex: 1 0 min-content;
    overflow: hidden;
    overflow-wrap: anywhere;
    text-overflow: ellipsis;
    color: var(--gd-color-on-surface-primary);
    font-variant-numeric: lining-nums tabular-nums;
    font-feature-settings: "liga" off, "clig" off;
    text-align: left;
  }
  &.gd-menu-item-content > .content > .main-content > .trailing {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--gd-size-spacing-3x);
  }
  &.gd-menu-item-content > .content > .main-content > .trailing:empty {
    display: none;
  }
  &.gd-menu-item-content > .content > .main-content > .trailing > .sub-menu-trailing {
    display: inline-flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--gd-size-spacing-2x);
    min-height: var(--gd-size-text-line-height-body);
    --gd-icon-fill: var(--gd-color-on-surface-primary);
  }
  &.gd-menu-item-content > .content > .main-content > .trailing > .sub-menu-trailing > span {
    overflow: hidden;
    color: var(--gd-color-on-surface-secondary);
    text-align: right;
    font-variant-numeric: lining-nums tabular-nums;
    font-feature-settings: "liga" off, "clig" off;
    text-overflow: ellipsis;
  }
  &.gd-menu-item-content > .content > .main-content.hug-content > .label {
    flex: unset;
  }
  &.gd-menu-item-content > .content > .main-content.hug-content > .trailing {
    flex: 1 0 0;
  }
  &.gd-menu-item-content > .content > .main-content.selected {
    font-family: var(--gd-text-body-bold-fontFamily);
    font-size: var(--gd-text-body-bold-fontSize);
    font-weight: var(--gd-text-body-bold-fontWeight);
    letter-spacing: var(--gd-text-body-bold-letterSpacing);
    line-height: var(--gd-text-body-bold-lineHeight);
    text-transform: var(--gd-text-body-bold-textTransform);
    text-decoration: var(--gd-text-body-bold-textDecoration);
  }
  &.gd-menu-item-content > .content > .help-text {
    font-family: var(--gd-text-body-regular-fontFamily);
    font-size: var(--gd-text-body-regular-fontSize);
    font-weight: var(--gd-text-body-regular-fontWeight);
    letter-spacing: var(--gd-text-body-regular-letterSpacing);
    line-height: var(--gd-text-body-regular-lineHeight);
    text-transform: var(--gd-text-body-regular-textTransform);
    text-decoration: var(--gd-text-body-regular-textDecoration);
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    color: var(--gd-color-on-surface-secondary);
    font-variant-numeric: lining-nums tabular-nums;
    font-feature-settings: "liga" off, "clig" off;
  }
  &.gd-menu-item-content > .content > .help-text:empty {
    display: none;
  }
  /* ===== GdMenuItemSubmenu ===== */
  &.folder-popover {
    position: fixed;
    visibility: hidden;
    z-index: var(--gd-z-index-popover);
    display: flex;
    --popover-offset-y: calc(-1 * var(--gd-size-spacing-2x));
    --popover-viewport-clip-distance: var(--gd-size-spacing-4x);
  }
  &.folder-popover > :first-child {
    flex: 1 0 auto;
  }
  &.folder-popover.left-menu {
    --popover-offset-x: var(--gd-size-spacing-2x);
  }
  &.folder-popover.right-menu {
    --popover-offset-x: calc(-1 * var(--gd-size-spacing-2x));
  }
  /* ===== GdBreadcrumbs ===== */
  &.gd-breadcrumbs {
    display: flex;
    width: 100%;
    min-width: 0;
  }
  &.gd-breadcrumbs ol {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    width: 100%;
  }
  &.gd-breadcrumbs .breadcrumb-filler {
    flex: 1;
  }
  &.gd-breadcrumbs li {
    list-style-type: none;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
  }
  &.gd-breadcrumbs .breadcrumb-separator {
    display: flex;
    --gd-icon-fill: var(--gd-color-on-surface-secondary);
    width: var(--gd-size-icon-small);
    height: var(--gd-size-icon-small);
    margin: 0 var(--gd-size-spacing-2x);
  }
  &.gd-breadcrumbs li:last-of-type {
    flex: 1 1 auto;
    overflow: hidden;
    --gd-icon-fill: var(--gd-color-on-surface-secondary);
  }
  &.gd-breadcrumbs li:last-of-type > a.gd-link-button {
    color: var(--gd-color-on-surface-secondary);
    pointer-events: none;
  }
  &.gd-breadcrumbs li:last-of-type .breadcrumb-separator {
    display: none;
  }
  &.gd-breadcrumbs .disabled-link {
    font-family: var(--gd-text-body-regular-fontFamily);
    font-size: var(--gd-text-body-regular-fontSize);
    font-weight: var(--gd-text-body-regular-fontWeight);
    letter-spacing: var(--gd-text-body-regular-letterSpacing);
    line-height: var(--gd-text-body-regular-lineHeight);
    text-transform: var(--gd-text-body-regular-textTransform);
    text-decoration: var(--gd-text-body-regular-textDecoration);
    color: var(--gd-color-on-surface-secondary);
  }
  &.gd-breadcrumbs .disabled-link, &.gd-breadcrumbs li:last-of-type .tooltip-container, &.gd-breadcrumbs li:last-of-type button {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  &.gd-breadcrumbs li:last-of-type .copy-to-clipboard-content {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: var(--gd-size-spacing-2x);
  }
  &.gd-breadcrumbs li:last-of-type:hover .copy-to-clipboard-content .disabled-link {
    color: var(--gd-color-on-surface-primary);
  }
  &.gd-breadcrumbs li:last-of-type:hover .copy-to-clipboard-icon {
    --gd-icon-fill: var(--gd-color-on-surface-primary);
    display: flex;
  }
  &.gd-breadcrumbs .copy-to-clipboard-icon, &.gd-breadcrumbs .copy-to-clipboard-value {
    display: none;
  }
  /* ===== GdMenuBar ===== */
  &.gd-menu-bar {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 0 var(--gd-size-spacing-4x);
    border-radius: var(--gd-size-radius-default);
    background: var(--gd-color-surface-secondary);
  }
  &.gd-menu-bar > .content-slot {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    gap: var(--gd-size-spacing-6x);
    flex: 1 0 0;
  }
  &.gd-menu-bar form {
    display: contents;
  }
  &.gd-menu-bar [data-collapsed] {
    display: none;
  }
  &.gd-menu-bar .gd-tooltip:has([data-collapsed]) {
    display: none;
  }
  &.gd-menu-bar .gd-menu-bar-divider:not([data-collapsed]):has(+ [data-collapsed]) {
    display: none;
  }
  &.gd-menu-bar .more-menu {
    display: none;
  }
  &.gd-menu-bar .more-menu .gd-menu {
    --gd-icon-fill: ;
  }
  &.gd-menu-bar .more-menu[data-show] {
    display: inline-flex;
  }
  &.gd-menu-bar .more-menu li[data-collapsed] {
    display: none;
  }
  /* ===== GdMenuBarDivider ===== */
  &.gd-menu-bar-divider {
    width: 1px;
    height: var(--gd-size-text-line-height-body);
    align-self: center;
    background: var(--gd-color-stroke-default);
  }
  /* ===== GdMenuBarMenu ===== */
  &.gd-menu-bar-menu > .label {
    cursor: default;
  }
  /* ===== GdMenuBarLink / GdMenuBarButton ===== */
  &.gd-menu-bar-item,
  &.gd-menu-bar-icon-item {
    display: inline-flex;
    justify-content: center;
    align-items: flex-start;
    --gd-icon-fill: var(--gd-color-link-primary);
    position: relative; /* so we can position outline absolutely */
    outline: none;
    text-decoration: none;
    hyphens: auto;
  }
  &.gd-menu-bar-item:has(.label),
  &.gd-menu-bar-icon-item:has(.label) {
    gap: var(--gd-size-spacing-2x);
    padding: var(--gd-size-spacing-2-5x) 0;
  }
  &.gd-menu-bar-item:has(.icon-content),
  &.gd-menu-bar-icon-item:has(.icon-content) {
    padding: 0;
    margin: 0 var(--gd-size-icon-button-offset-icon-default);
  }
  &.gd-menu-bar-item:hover, &.gd-menu-bar-item.hovered,
  &.gd-menu-bar-icon-item:hover,
  &.gd-menu-bar-icon-item.hovered {
    --gd-icon-fill: var(--gd-color-link-primary-emphasis);
  }
  &.gd-menu-bar-item:hover .label, &.gd-menu-bar-item.hovered .label,
  &.gd-menu-bar-icon-item:hover .label,
  &.gd-menu-bar-icon-item.hovered .label {
    color: var(--gd-color-link-primary-emphasis);
  }
  &.gd-menu-bar-item.disabled, &.gd-menu-bar-item[disabled],
  &.gd-menu-bar-icon-item.disabled,
  &.gd-menu-bar-icon-item[disabled] {
    --gd-icon-fill: var(--gd-color-on-surface-disabled);
    cursor: not-allowed;
  }
  &.gd-menu-bar-item.disabled .label, &.gd-menu-bar-item[disabled] .label,
  &.gd-menu-bar-icon-item.disabled .label,
  &.gd-menu-bar-icon-item[disabled] .label {
    color: var(--gd-color-on-surface-disabled);
  }
  &.gd-menu-bar-item:focus-visible::before, &.gd-menu-bar-item.focused::before,
  &.gd-menu-bar-icon-item:focus-visible::before,
  &.gd-menu-bar-icon-item.focused::before {
    content: "";
    position: absolute;
    box-sizing: content-box;
    width: 100%;
    height: 100%;
    top: calc(-1 * var(--gd-size-stroke-focus));
    padding: 0 var(--gd-size-stroke-focus);
    left: calc(-2 * var(--gd-size-stroke-focus));
    border-radius: var(--gd-size-radius-focus-default);
    border: var(--gd-size-stroke-focus) solid var(--gd-color-stroke-focus);
  }
  &.gd-menu-bar-item > .label,
  &.gd-menu-bar-icon-item > .label {
    font-family: var(--gd-text-body-regular-fontFamily);
    font-size: var(--gd-text-body-regular-fontSize);
    font-weight: var(--gd-text-body-regular-fontWeight);
    letter-spacing: var(--gd-text-body-regular-letterSpacing);
    line-height: var(--gd-text-body-regular-lineHeight);
    text-transform: var(--gd-text-body-regular-textTransform);
    text-decoration: var(--gd-text-body-regular-textDecoration);
    color: var(--gd-color-link-primary);
    overflow: hidden;
    font-variant-numeric: lining-nums tabular-nums;
    font-feature-settings: "liga" off, "clig" off;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  &.gd-menu-bar-item > .icon-content,
  &.gd-menu-bar-icon-item > .icon-content {
    display: flex;
    padding: var(--gd-size-spacing-2-5x) var(--gd-size-spacing-1x);
    align-items: center;
    gap: var(--gd-size-spacing-2x);
    align-self: stretch;
  }
  /* ===== GdTabBar ===== */
  &.gd-tab-bar {
    position: relative;
    width: 100%;
  }
  &.gd-tab-bar .content-slot {
    display: flex;
    align-items: flex-start;
    gap: var(--gd-size-spacing-6x);
    flex: 1 0 0;
  }
  &.gd-tab-bar::before {
    content: "";
    position: absolute;
    top: calc(-1 * var(--gd-size-stroke-default));
    left: 0;
    width: 100%;
    height: 100%;
    border-bottom: var(--gd-size-stroke-default) solid var(--gd-color-stroke-default);
    pointer-events: none;
    display: block;
  }
  .gd-title-section &.gd-tab-bar::before, .gd-search-section &.gd-tab-bar::before {
    display: none;
  }
  /* ===== GdTabSection ===== */
  &.gd-tab-section {
    display: flex;
    width: 100%;
    padding: 0 var(--gd-size-spacing-4x);
    align-items: flex-start;
    border-radius: var(--gd-size-radius-default);
    background: var(--gd-color-surface-secondary);
  }
  &.gd-tab-section .content-slot {
    display: flex;
    align-items: flex-start;
    gap: var(--gd-size-spacing-6x);
    flex: 1 0 0;
  }
  /* ===== GdTab ===== */
  &.gd-tab,
  button.gd-tab:scope {
    padding-top: var(--gd-size-spacing-2-5x);
    color: var(--gd-color-on-surface-secondary);
    /* Reserve border space to avoid layout shifts and make hover area consistent  */
    padding-bottom: calc(var(--gd-size-spacing-2-5x) - var(--gd-size-tab-indicator-border));
    border-bottom: var(--gd-size-tab-indicator-border) solid transparent;
    display: inline-flex;
    align-items: flex-start;
    gap: var(--gd-size-spacing-2x);
    position: relative; /* so we can position outline absolutely */
    outline: none;
    text-decoration: none;
    hyphens: auto;
  }
  &.gd-tab[data-collapsed],
  button.gd-tab:scope[data-collapsed] {
    display: none;
  }
  &.gd-tab.more-menu,
  button.gd-tab:scope.more-menu {
    visibility: hidden;
  }
  &.gd-tab.more-menu[data-show],
  button.gd-tab:scope.more-menu[data-show] {
    visibility: visible;
  }
  &.gd-tab.more-menu li[data-collapsed],
  button.gd-tab:scope.more-menu li[data-collapsed] {
    display: none;
  }
  &.gd-tab:focus-visible:not(.plain), &.gd-tab.focused:not(.plain), &.gd-tab:not(.disabled):hover:not(.plain), &.gd-tab:not(.disabled).hovered:not(.plain),
  button.gd-tab:scope:focus-visible:not(.plain),
  button.gd-tab:scope.focused:not(.plain),
  button.gd-tab:scope:not(.disabled):hover:not(.plain),
  button.gd-tab:scope:not(.disabled).hovered:not(.plain) {
    border-bottom: var(--gd-size-tab-indicator-border) solid var(--gd-color-tab-indicator-hover);
  }
  &.gd-tab:focus-visible, &.gd-tab.focused, &.gd-tab:not(.disabled):hover, &.gd-tab:not(.disabled).hovered,
  button.gd-tab:scope:focus-visible,
  button.gd-tab:scope.focused,
  button.gd-tab:scope:not(.disabled):hover,
  button.gd-tab:scope:not(.disabled).hovered {
    color: var(--gd-color-on-surface-primary);
  }
  &.gd-tab.gd-tab-menu:hover,
  button.gd-tab:scope.gd-tab-menu:hover {
    cursor: pointer;
  }
  &.gd-tab:not(.disabled).selected:not(.plain),
  button.gd-tab:scope:not(.disabled).selected:not(.plain) {
    border-bottom: var(--gd-size-tab-indicator-border) solid var(--gd-color-tab-indicator-active);
  }
  &.gd-tab:not(.disabled).selected,
  button.gd-tab:scope:not(.disabled).selected {
    color: var(--gd-color-on-surface-primary);
  }
  &.gd-tab.disabled,
  button.gd-tab:scope.disabled {
    opacity: var(--gd-color-opacity-disabled);
    cursor: default;
  }
  &.gd-tab:focus-visible::before, &.gd-tab.focused::before,
  button.gd-tab:scope:focus-visible::before,
  button.gd-tab:scope.focused::before {
    content: "";
    position: absolute;
    box-sizing: content-box;
    width: 100%;
    height: 100%;
    top: 0;
    padding: 0 var(--gd-size-stroke-focus);
    left: calc(-2 * var(--gd-size-stroke-focus));
    border-radius: var(--gd-size-radius-focus-default);
    border: var(--gd-size-stroke-focus) solid var(--gd-color-stroke-focus);
  }
  &.gd-tab > .leading, &.gd-tab > .menu-icon, &.gd-tab > .trailing,
  button.gd-tab:scope > .leading,
  button.gd-tab:scope > .menu-icon,
  button.gd-tab:scope > .trailing {
    height: var(--gd-size-text-line-height-body);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  &.gd-tab > .label,
  button.gd-tab:scope > .label {
    font-family: var(--gd-text-body-regular-fontFamily);
    font-size: var(--gd-text-body-regular-fontSize);
    font-weight: var(--gd-text-body-regular-fontWeight);
    letter-spacing: var(--gd-text-body-regular-letterSpacing);
    line-height: var(--gd-text-body-regular-lineHeight);
    text-transform: var(--gd-text-body-regular-textTransform);
    text-decoration: var(--gd-text-body-regular-textDecoration);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  &.gd-tab > .tab-collapsed, &.gd-tab > .gd-menu-item-button:has(> .tab-collapsed),
  button.gd-tab:scope > .tab-collapsed,
  button.gd-tab:scope > .gd-menu-item-button:has(> .tab-collapsed) {
    display: none;
  }
  /* ===== GdQuickActionDivider ===== */
  &.gd-quick-action-divider {
    width: var(--gd-size-stroke-default);
    align-self: stretch;
    background: var(--gd-color-stroke-default);
  }
}
/* ===== GdMenuDivider ===== */
/*
If we move this Styling here into the scope, it breaks, since the scope
searches only within the :scope, but + .menu-divider is a sibling and therefore not within :scope.
 */
.gd-menu-divider[b-go72696cla] {
  display: flex;
  width: 100%;
  padding: var(--gd-size-spacing-2x) 0;
  flex-direction: column;
  align-items: flex-start;
}
.gd-menu-divider[b-go72696cla] > .line[b-go72696cla] {
  height: 1px;
  align-self: stretch;
  background: var(--gd-color-stroke-default);
}
.gd-menu-divider[b-go72696cla] + .gd-menu-divider[b-go72696cla], .gd-menu-divider[b-go72696cla]:first-child, .gd-menu-divider[b-go72696cla]:last-child {
  display: none;
}

/* Only selects html from GdComponents, so we don't interfere with other css from ERP Components or something else */
@scope ([b-go72696cla]) to (:not([b-go72696cla])) {
  /* ===== GdPopover ===== */
  &.gd-popover {
    position: relative;
  }
  &.gd-popover > button.gd-popover-icon {
    display: flex;
  }
  &.gd-popover :has(.popover-top), &.gd-popover :has(.popover-bottom) {
    --popover-offset-x: calc(-1 * (var(--gd-size-spacing-4x) + (var(--popover-arrow-size) / 2)));
  }
  &.gd-popover :has(.popover-left), &.gd-popover :has(.popover-right) {
    --popover-offset-y: calc(-1 * (var(--gd-size-spacing-4x) + (var(--popover-arrow-size) / 2)));
  }
  &.gd-popover {
    --popover-arrow-size: 16px;
    --popover-viewport-clip-distance: var(--gd-size-spacing-1x);
  }
  &.gd-popover [data-translate-y] .popover.popover-left > .popover-pointer, &.gd-popover [data-translate-y] .popover.popover-right > .popover-pointer {
    justify-content: flex-end;
  }
  &.gd-popover .popover {
    display: flex;
    flex-direction: column;
    width: var(--gd-popover-width, 272px);
    min-width: 272px;
    max-width: 408px;
    /*
      In Figma, there's a box-shadow here. But... a box-shadow is always rectangular. The tip of the popover is *not*, so
      it'd look very weird. Good thing there's drop-shadow, but drop-shadow in turn breaks elements with fixed positioning.

      So we split the shadows on the "main" card and pointer.
      The main card is rectangular; we can use the normal box-shadow without any issues.
      The pointer is spicy triangle - we need a drop-shadow here. There's nothing inside the pointer, so there's nothing
      to get moved around in a weird manner, so it's all good.
    */
  }
  &.gd-popover .popover.popover-top > .popover-pointer, &.gd-popover .popover.popover-bottom > .popover-pointer {
    padding: 0 var(--gd-size-spacing-4x);
    flex-direction: row;
    align-items: flex-start;
  }
  &.gd-popover .popover.popover-left > .popover-pointer, &.gd-popover .popover.popover-right > .popover-pointer {
    padding: var(--gd-size-spacing-4x) 0;
    flex-direction: column;
    align-items: flex-start;
  }
  &.gd-popover .popover.popover-top {
    flex-direction: column-reverse;
  }
  &.gd-popover .popover.popover-bottom {
    flex-direction: column;
  }
  &.gd-popover .popover.popover-left {
    flex-direction: row-reverse;
  }
  &.gd-popover .popover.popover-right {
    flex-direction: row;
  }
  &.gd-popover .popover > .popover-pointer {
    display: flex;
    align-self: stretch;
    color: var(--gd-color-surface-primary);
    overflow: hidden;
    z-index: 1; /* So that the tip is never covered by the card's box shadow */
  }
  &.gd-popover .popover > .popover-pointer svg {
    width: var(--popover-arrow-size);
    height: var(--popover-arrow-size);
    filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.16)) drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.08));
  }
  &.gd-popover .popover > .popover-card {
    display: flex;
    padding: var(--gd-size-spacing-4x);
    align-items: flex-start;
    gap: var(--gd-size-spacing-4x);
    flex: 1 0 0;
    background: var(--gd-color-surface-primary);
    box-shadow: var(--gd-effect-elevation-low);
    /* We set the offset for the popover itself, but the content should not be affected */
    --popover-offset-y: initial;
    --popover-offset-x: initial;
  }
  &.gd-popover .popover > .popover-card > .popover-card-content {
    font-family: var(--gd-text-body-regular-fontFamily);
    font-size: var(--gd-text-body-regular-fontSize);
    font-weight: var(--gd-text-body-regular-fontWeight);
    letter-spacing: var(--gd-text-body-regular-letterSpacing);
    line-height: var(--gd-text-body-regular-lineHeight);
    text-transform: var(--gd-text-body-regular-textTransform);
    text-decoration: var(--gd-text-body-regular-textDecoration);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gd-size-spacing-2x);
    flex: 1 0 0;
    color: var(--gd-color-on-surface-primary);
    font-variant-numeric: lining-nums tabular-nums;
    font-feature-settings: "liga" off, "clig" off;
  }
  &.gd-popover .popover > .popover-card > .close-icon {
    display: flex;
    align-items: center;
  }
  &.gd-popover .popover > .popover-card > .close-icon > .gd-tooltip {
    display: flex;
  }
  /* ===== GdPopoverBase ===== */
  &.gd-popover-base {
    display: inline-flex;
  }
  &.gd-popover-base .popover-content {
    display: none;
    position: fixed;
    z-index: var(--gd-z-index-popover);
  }
  &.gd-popover-base:hover .popover-content, &.gd-popover-base:focus-within .popover-content {
    display: block;
    color: var(--gd-color-on-surface-primary);
  }
  /* ===== GdPlainDialog ===== */
  dialog:scope {
    all: unset;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: var(--gd-z-index-overlay);
    display: flex;
    width: var(--gd-size-dialog-width-default);
    flex-direction: column;
    border-radius: var(--gd-size-radius-default);
    background: var(--gd-color-surface-primary);
    box-shadow: var(--gd-effect-elevation-overlay);
  }
  dialog:scope::backdrop {
    background-color: var(--gd-color-surface-overlay);
  }
  dialog:scope:not([open]) {
    display: none;
  }
  dialog:scope > header {
    display: flex;
    justify-content: space-between;
    gap: var(--gd-size-spacing-8x);
    align-items: center;
    align-self: stretch;
    padding: var(--gd-size-spacing-4x) var(--gd-size-spacing-8x);
    border-bottom: var(--gd-size-stroke-default) solid var(--gd-color-stroke-default);
    /* ==== GdDialog ==== */
  }
  dialog:scope > header > span.title {
    font-family: var(--gd-text-headline-h2-fontFamily);
    font-size: var(--gd-text-headline-h2-fontSize);
    font-weight: var(--gd-text-headline-h2-fontWeight);
    letter-spacing: var(--gd-text-headline-h2-letterSpacing);
    line-height: var(--gd-text-headline-h2-lineHeight);
    text-transform: var(--gd-text-headline-h2-textTransform);
    text-decoration: var(--gd-text-headline-h2-textDecoration);
    flex: 1 0 0;
    color: var(--gd-color-on-surface-primary);
    font-variant-numeric: lining-nums tabular-nums;
    font-feature-settings: "liga" off, "clig" off;
  }
  dialog:scope > header > .gd-tooltip {
    display: flex;
  }
  dialog:scope > section {
    padding: var(--gd-size-spacing-6x) var(--gd-size-spacing-8x);
  }
  dialog:scope > footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--gd-size-spacing-4x);
    padding: var(--gd-size-spacing-6x) var(--gd-size-spacing-8x);
  }
  /* ===== GdToast ===== */
  &.gd-toast {
    display: flex;
    align-items: center;
    gap: var(--gd-size-spacing-8x);
    width: calc(var(--gd-size-dialog-width-default) - 2 * var(--gd-size-spacing-4x));
    padding: var(--gd-size-spacing-4x);
    border-radius: var(--gd-size-radius-default);
    background: var(--gd-color-surface-primary);
    box-shadow: var(--gd-effect-elevation-medium);
    font-family: var(--gd-text-body-regular-fontFamily);
    font-size: var(--gd-text-body-regular-fontSize);
    font-weight: var(--gd-text-body-regular-fontWeight);
    letter-spacing: var(--gd-text-body-regular-letterSpacing);
    line-height: var(--gd-text-body-regular-lineHeight);
    text-transform: var(--gd-text-body-regular-textTransform);
    text-decoration: var(--gd-text-body-regular-textDecoration);
    opacity: 1;
    transition: opacity 0.1s linear;
  }
  &.gd-toast.leaving {
    opacity: 0;
  }
  &.gd-toast > .toast-content {
    flex: 1 0 0;
    display: flex;
    align-items: center;
  }
  &.gd-toast > .toast-content > .toast-message {
    flex: 1 0 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    color: var(--gd-color-on-surface-primary);
    font-variant-numeric: lining-nums tabular-nums;
    font-feature-settings: "liga" off, "clig" off;
    text-overflow: ellipsis;
  }
  &.gd-toast > .toast-link:not([hidden]) {
    white-space: nowrap;
  }
  &.gd-toast > .toast-close:not([hidden]) {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  &#gd-toast-container {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gd-size-spacing-4x);
    position: fixed;
    z-index: var(--gd-z-index-popover);
    left: var(--gd-size-spacing-8x);
    bottom: calc(var(--gd-size-spacing-8x) + var(--bottom-banners-total-height, 0px));
  }
  &#gd-toast-container .toast-template {
    display: none;
  }
  &#gd-toast-container .gd-toast {
    --off-screen: calc(-1 * (var(--gd-size-spacing-8x) + var(--gd-size-dialog-width-default)));
    animation-name: fly-in;
    animation-duration: 0.2s;
    animation-timing-function: cubic-bezier(0.22, 1.2, 0.36, 1.1);
  }
  @media print, (prefers-reduced-motion: reduce) {
    &#gd-toast-container .gd-toast {
      animation: none;
    }
  }
  @keyframes fly-in {
    from {
      transform: translateX(var(--off-screen));
    }
    to {
      transform: none;
    }
  }
  /* ===== GdTooltip ===== */
  &.tooltip-container {
    display: contents;
  }
  &.tooltip {
    display: inline-flex;
    --default-popover-offset: var(--gd-size-spacing-2x);
    padding: var(--gd-size-spacing-1x) var(--gd-size-spacing-2x);
    justify-content: center;
    align-items: center;
    border-radius: var(--gd-size-radius-default);
    background: var(--gd-color-surface-primary);
    box-shadow: var(--gd-effect-elevation-low);
    position: fixed;
    inset: auto;
    margin: 0;
    border: none;
    z-index: var(--gd-z-index-popover);
    min-width: max-content;
    visibility: hidden;
    transition: visibility 0s linear 150ms;
  }
  &.tooltip[data-open] {
    visibility: visible;
    transition-delay: 300ms;
  }
  &.tooltip[data-open=instant] {
    transition-delay: 0s;
  }
  &.tooltip > span {
    font-family: var(--gd-text-label-regular-fontFamily);
    font-size: var(--gd-text-label-regular-fontSize);
    font-weight: var(--gd-text-label-regular-fontWeight);
    letter-spacing: var(--gd-text-label-regular-letterSpacing);
    line-height: var(--gd-text-label-regular-lineHeight);
    text-transform: var(--gd-text-label-regular-textTransform);
    text-decoration: var(--gd-text-label-regular-textDecoration);
    color: var(--gd-color-on-surface-primary);
    text-align: center;
    font-variant-numeric: lining-nums tabular-nums;
    font-feature-settings: "liga" off, "clig" off;
  }
  &.tooltip:has(span:empty) {
    display: none;
  }
}
.gd-combobox {
  position: relative;
  box-sizing: border-box;
  min-width: min-content;
  width: 100%;
}
.gd-combobox:has(input[type=text]:read-only) {
  border: var(--gd-size-stroke-default) solid var(--gd-color-input-border-disabled);
  --border-width: var(--gd-size-stroke-default);
  background: var(--gd-color-input-background-disabled);
}
.gd-combobox:has(input[type=text]:is(:read-only, :disabled)) .gd-input-chip > .trailing {
  display: none;
}
.gd-combobox:has(input[type=text]:read-only:not(:disabled)) .trailing button:is(.gd-tooltip:has(.clear), .expand, .collapse) {
  display: none;
}
.gd-combobox input[type=text]:read-only:not(:disabled)::placeholder {
  color: transparent;
}
.gd-combobox:hover:not(:has(.gd-input-chip:hover, .suggestions:hover)):not(:focus, :focus-visible, :focus-within) {
  border: var(--gd-size-stroke-default) solid var(--gd-color-input-border-emphasis);
  --border-width: var(--gd-size-stroke-default);
  cursor: text;
}
.gd-combobox:not([data-can-clear]) .trailing .gd-tooltip:has(.clear) {
  display: none;
}
.gd-combobox:has(datalist option[data-url]) .expand, .gd-combobox:has(.suggestions[open]) .expand {
  display: none;
}
.gd-combobox:has(datalist option[data-url]) .collapse, .gd-combobox:has(.suggestions:not([open])) .collapse {
  display: none;
}
.gd-combobox > .suggestions {
  font-family: var(--gd-text-body-regular-fontFamily);
  font-size: var(--gd-text-body-regular-fontSize);
  font-weight: var(--gd-text-body-regular-fontWeight);
  letter-spacing: var(--gd-text-body-regular-letterSpacing);
  line-height: var(--gd-text-body-regular-lineHeight);
  text-transform: var(--gd-text-body-regular-textTransform);
  text-decoration: var(--gd-text-body-regular-textDecoration);
  box-sizing: border-box;
  position: absolute;
  top: calc(100% + var(--border-width));
  left: 0;
  z-index: 99;
  width: 100%;
  max-height: calc(100% + 5 * (1rem + 8px));
  overflow-y: auto;
}
.gd-combobox > .suggestions:not([open], [data-loading]) {
  display: none;
}
.gd-combobox > .suggestions:not([data-loading]) > .loading-state {
  display: none;
}
.gd-combobox > .suggestions[data-loading] > *:not(.loading-state) {
  display: none;
}
.gd-combobox > .suggestions > .empty-state, .gd-combobox > .suggestions > .loading-state {
  color: var(--gd-color-on-surface-secondary);
  pointer-events: none;
}
.gd-combobox > .suggestions > .empty-state .gd-menu-item-content .main-content, .gd-combobox > .suggestions > .loading-state .gd-menu-item-content .main-content {
  flex: 1 0 max-content;
}
.gd-combobox > .suggestions > .empty-state .gd-menu-item-content .label, .gd-combobox > .suggestions > .loading-state .gd-menu-item-content .label {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.gd-combobox > .suggestions:has(template ~ *) > .empty-state {
  display: none;
}
.gd-combobox > .suggestions .gd-menu-item[data-selected] {
  background: var(--gd-color-surface-hover);
}
.gd-combobox > .suggestions .gd-menu-item:hover:not([data-selected]) {
  background: initial;
}
.gd-combobox > .suggestions .gd-menu-item .label-active .gd-icon {
  display: none;
}
.gd-combobox > .suggestions .gd-menu-item .selected {
  font-family: var(--gd-text-body-bold-fontFamily);
  font-size: var(--gd-text-body-bold-fontSize);
  font-weight: var(--gd-text-body-bold-fontWeight);
  letter-spacing: var(--gd-text-body-bold-letterSpacing);
  line-height: var(--gd-text-body-bold-lineHeight);
  text-transform: var(--gd-text-body-bold-textTransform);
  text-decoration: var(--gd-text-body-bold-textDecoration);
}
.gd-combobox > .suggestions .gd-menu-item .selected .label-active .gd-icon {
  display: initial;
}
.gd-combobox.gd-combobox-multiple > .field-container > .input-wrapper {
  flex: 1 1 max-content;
  display: flex;
  height: var(--gd-size-button-height-compact);
  align-items: center;
  gap: var(--gd-size-control-padding-horizontal-gap);
}
.gd-combobox.gd-combobox-multiple > .field-container > .input-wrapper > input {
  field-sizing: content;
  min-width: min-content;
}
.gd-combobox.gd-combobox-multiple:not([data-can-choose]) input[type=text] {
  min-width: 0;
  field-sizing: revert;
}
.gd-combobox.gd-combobox-multiple:not([data-can-choose]) input[type=text]::placeholder {
  color: transparent;
}

.gd-select:has(select option:checked:not([value=""])):has(select option + option:checked) .gd-tooltip:has(.clear) {
  display: flex;
}
.gd-select:has(select:open) > .expand {
  display: none;
}
.gd-select:has(select:not(:open)) > .collapse {
  display: none;
}
.gd-select {
  anchor-scope: --container;
  anchor-name: --container;
}
@supports (appearance: base-select) {
  .gd-select select, .gd-select ::picker(select) {
    appearance: base-select !important;
  }
  .gd-select select::picker-icon {
    display: none;
  }
  .gd-select select:open::picker(select) {
    display: flex;
  }
  .gd-select select::picker(select) {
    box-sizing: border-box;
    position: absolute;
    position-anchor: --container;
    position-area: bottom span-all;
    padding: var(--gd-size-spacing-2x) 0;
    flex-direction: column;
    align-items: flex-start;
    border: none;
    border-radius: var(--gd-size-radius-default);
    background: var(--gd-color-surface-primary);
    box-shadow: var(--gd-effect-elevation-overlay);
  }
  .gd-select select option:not([hidden], [data-hidden]) {
    font-family: var(--gd-text-body-regular-fontFamily);
    font-size: var(--gd-text-body-regular-fontSize);
    font-weight: var(--gd-text-body-regular-fontWeight);
    letter-spacing: var(--gd-text-body-regular-letterSpacing);
    line-height: var(--gd-text-body-regular-lineHeight);
    text-transform: var(--gd-text-body-regular-textTransform);
    text-decoration: var(--gd-text-body-regular-textDecoration);
    cursor: pointer;
    align-self: stretch;
    display: flex;
    padding: var(--gd-size-spacing-1-5x) var(--gd-size-spacing-4x);
    align-items: flex-start;
    gap: var(--gd-size-spacing-3x);
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--gd-color-on-surface-primary);
    font-variant-numeric: lining-nums tabular-nums;
    font-feature-settings: "liga" off, "clig" off;
    text-align: left;
  }
  .gd-select select option:not([hidden], [data-hidden])::checkmark {
    display: none;
  }
  .gd-select select option:not([hidden], [data-hidden]):hover, .gd-select select option:not([hidden], [data-hidden]):focus-visible {
    outline: none;
    background: var(--gd-color-surface-hover);
  }
  .gd-select select option:not([hidden], [data-hidden]):checked {
    font-family: var(--gd-text-body-bold-fontFamily);
    font-size: var(--gd-text-body-bold-fontSize);
    font-weight: var(--gd-text-body-bold-fontWeight);
    letter-spacing: var(--gd-text-body-bold-letterSpacing);
    line-height: var(--gd-text-body-bold-lineHeight);
    text-transform: var(--gd-text-body-bold-textTransform);
    text-decoration: var(--gd-text-body-bold-textDecoration);
  }
  .gd-select select option:not([hidden], [data-hidden]):checked::after {
    content: " ";
    display: inline-block;
    width: 16px;
    height: 16px;
    line-height: var(--gd-text-body-regular-lineHeight);
    margin: calc((var(--gd-text-body-regular-lineHeight) - 16px) / 2) 0;
    background-color: var(--gd-icon-fill, currentColor);
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    mask-image: url("../icons/checkmark.59bce52ddf2ae32fa39c782faa5ed2e4.svg");
    mask-size: 100%;
    mask-repeat: no-repeat;
    mask-position: center;
  }
}

/* :not(input) is for backwards compatibility, remove before full release */
.gd-toggle-switch:not(input) {
  display: flex;
}

input.gd-toggle-switch,
.gd-toggle-switch > input {
  cursor: pointer;
  appearance: none;
  margin: 0;
  border: none;
  align-self: unset;
  width: 36px;
  height: 18px;
  flex-shrink: 0;
  border-radius: var(--gd-size-radius-full);
  background: var(--gd-color-on-surface-tertiary);
  position: relative;
}
input.gd-toggle-switch:checked,
.gd-toggle-switch > input:checked {
  background: var(--gd-color-input-background-emphasis-alt);
}
input.gd-toggle-switch:focus-visible,
.gd-toggle-switch > input:focus-visible {
  outline-offset: var(--gd-size-stroke-focus);
  outline: var(--gd-color-stroke-focus) solid var(--gd-size-stroke-focus);
}
input.gd-toggle-switch:disabled,
.gd-toggle-switch > input:disabled {
  opacity: var(--gd-color-opacity-disabled);
  cursor: not-allowed;
}
input.gd-toggle-switch::after,
.gd-toggle-switch > input::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 16px;
  height: 16px;
  border-radius: var(--gd-size-radius-full);
  background: var(--gd-color-surface-primary);
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
input.gd-toggle-switch:checked::after,
.gd-toggle-switch > input:checked::after {
  transform: translate(18px);
}

.gd-icon.size-default {
  width: 16px;
  height: 16px;
  line-height: 0;
}
.gd-icon.size-inline-body {
  width: 16px;
  height: 16px;
  line-height: var(--gd-text-body-regular-lineHeight);
  margin: calc((var(--gd-text-body-regular-lineHeight) - 16px) / 2) 0;
}
.gd-icon {
  --gd-icon-url: url('../icons/placeholder.e3e30276790bc1cabceaeea518dd6f6f.svg');
  display: inline-block;
  background-color: var(--gd-icon-fill, currentColor);
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  mask-image: var(--gd-icon-url);
  mask-size: 100%;
  mask-repeat: no-repeat;
  mask-position: center;
}
.gd-icon:is(svg) {
  background: none !important;
  mask: none !important;
  color: var(--gd-icon-fill, currentColor);
}
.gd-icon.AT {
  background: var(--gd-icon-url);
  mask-image: none;
}
.gd-icon.BE {
  background: var(--gd-icon-url);
  mask-image: none;
}
.gd-icon.CH {
  background: var(--gd-icon-url);
  mask-image: none;
}
.gd-icon.DE {
  background: var(--gd-icon-url);
  mask-image: none;
}
.gd-icon.EU {
  background: var(--gd-icon-url);
  mask-image: none;
}
.gd-icon.FR {
  background: var(--gd-icon-url);
  mask-image: none;
}
.gd-icon.IT {
  background: var(--gd-icon-url);
  mask-image: none;
}
.gd-icon.LU {
  background: var(--gd-icon-url);
  mask-image: none;
}
.gd-icon.NL {
  background: var(--gd-icon-url);
  mask-image: none;
}
.gd-icon.icon_select {
  --gd-icon-url: url('../icons/icon_select.443fafcbc911357883726a4a7a9cdce8.svg');
  background: var(--gd-icon-url);
  mask-image: none;
}
.gd-icon.AT {
  --gd-icon-url: url('../icons/AT.809d6728be4ca0a6e19c4391a4bd1f45.svg');
}
.gd-icon.active-off {
  --gd-icon-url: url('../icons/active-off.477942dca6833d77bd36780aabc7f2f2.svg');
}
.gd-icon.active-on {
  --gd-icon-url: url('../icons/active-on.461a782c3857650592f86d319a6aea91.svg');
}
.gd-icon.add {
  --gd-icon-url: url('../icons/add.6bac3e8f258b2acb2b6fcf4012689455.svg');
}
.gd-icon.arrow-bottom {
  --gd-icon-url: url('../icons/arrow-bottom.83e911cbaf4a73285e2561535bd73259.svg');
}
.gd-icon.arrow-down {
  --gd-icon-url: url('../icons/arrow-down.650c5d17b9798f59792e8bd922703d3d.svg');
}
.gd-icon.arrow-left {
  --gd-icon-url: url('../icons/arrow-left.4dae7e2c245ee55d9433b33e69c2feea.svg');
}
.gd-icon.arrow-right {
  --gd-icon-url: url('../icons/arrow-right.46ca51084f4938d6e34104fb573da1c5.svg');
}
.gd-icon.arrow-top {
  --gd-icon-url: url('../icons/arrow-top.6364da743a3bd464b6f55dca3cfb45a8.svg');
}
.gd-icon.arrow-up {
  --gd-icon-url: url('../icons/arrow-up.d6278ebf5c573ee4f2aac53524e30d46.svg');
}
.gd-icon.arrow-up-left {
  --gd-icon-url: url('../icons/arrow-up-left.55f1eedaf362e4af45523c3925a65f24.svg');
}
.gd-icon.awesome {
  --gd-icon-url: url('../icons/awesome.13cc795bd242e0be430af1a6e124fbd0.svg');
}
.gd-icon.BE {
  --gd-icon-url: url('../icons/BE.72015720f40869555a6738caab6398bb.svg');
}
.gd-icon.bag-checkmark {
  --gd-icon-url: url('../icons/bag-checkmark.7ae8f5c1de4912a86caf954b2773ea82.svg');
}
.gd-icon.barcode-scanner {
  --gd-icon-url: url('../icons/barcode-scanner.d27fc7cf7da525139b11c95f452f4c13.svg');
}
.gd-icon.bin-closed {
  --gd-icon-url: url('../icons/bin-closed.a6016f39a1e66357607fa617cf858d19.svg');
}
.gd-icon.bin-open {
  --gd-icon-url: url('../icons/bin-open.f9bf6ba3347d3b2f3fc64f11b2261d5c.svg');
}
.gd-icon.CH {
  --gd-icon-url: url('../icons/CH.82e500680005ccce096bdbcf66ed6f88.svg');
}
.gd-icon.calendar {
  --gd-icon-url: url('../icons/calendar.1f398246d1a6471cf604bc9bab4383e8.svg');
}
.gd-icon.camera {
  --gd-icon-url: url('../icons/camera.2764ded1ef74e0bba318d48d1c0bb57a.svg');
}
.gd-icon.caret-down {
  --gd-icon-url: url('../icons/caret-down.580e3417debf2f8042c7d2fdb9d488ac.svg');
}
.gd-icon.caret-down-small {
  --gd-icon-url: url('../icons/caret-down-small.6a6d8f853f9d7352ce566de54678de07.svg');
}
.gd-icon.caret-right {
  --gd-icon-url: url('../icons/caret-right.152f180a4edb59f806612462b9dee484.svg');
}
.gd-icon.caret-right-small {
  --gd-icon-url: url('../icons/caret-right-small.9469093eead7afe36bcc4c9648844b1a.svg');
}
.gd-icon.cart {
  --gd-icon-url: url('../icons/cart.32a8ac436285369a4bb72e52f1b69765.svg');
}
.gd-icon.cart-arrow-up {
  --gd-icon-url: url('../icons/cart-arrow-up.77a27369c79d70ec018b0bb1a969a218.svg');
}
.gd-icon.checkbox-checkmark {
  --gd-icon-url: url('../icons/checkbox-checkmark.22a38b05c591a18adb41f8525dcbebb3.svg');
}
.gd-icon.checkbox-indeterminate {
  --gd-icon-url: url('../icons/checkbox-indeterminate.87c975aaeb5ae6ccd732090edb517254.svg');
}
.gd-icon.checkmark {
  --gd-icon-url: url('../icons/checkmark.59bce52ddf2ae32fa39c782faa5ed2e4.svg');
}
.gd-icon.chevron-collapse-all {
  --gd-icon-url: url('../icons/chevron-collapse-all.ab08e684a17adfdc03345b679f7d8211.svg');
}
.gd-icon.chevron-double-down {
  --gd-icon-url: url('../icons/chevron-double-down.f12826e3535519bbe37a8d8220314633.svg');
}
.gd-icon.chevron-double-up {
  --gd-icon-url: url('../icons/chevron-double-up.695fc85c34317a561849706a4a81a275.svg');
}
.gd-icon.chevron-down {
  --gd-icon-url: url('../icons/chevron-down.eeffa7ae098ac05f2dd0f31c527d0211.svg');
}
.gd-icon.chevron-expand-all {
  --gd-icon-url: url('../icons/chevron-expand-all.ffdd3628a353190c4e56e20929864f31.svg');
}
.gd-icon.chevron-left {
  --gd-icon-url: url('../icons/chevron-left.033fcd0a57cd1e794f47e2dd0f6d715b.svg');
}
.gd-icon.chevron-right {
  --gd-icon-url: url('../icons/chevron-right.12345bfa6bec0cff524cba013014c54f.svg');
}
.gd-icon.chevron-up {
  --gd-icon-url: url('../icons/chevron-up.84eeba6ad9b8ce037625deee75a966c6.svg');
}
.gd-icon.circle {
  --gd-icon-url: url('../icons/circle.60d84b9ec8b7d310f0dbc55dff317ae2.svg');
}
.gd-icon.circle-checkmark {
  --gd-icon-url: url('../icons/circle-checkmark.98fe91d042e2dd3d9fcdb308e5b846ee.svg');
}
.gd-icon.circle-checkmark-filled {
  --gd-icon-url: url('../icons/circle-checkmark-filled.1c592732629626bbfb31b5a7f9d65cc5.svg');
}
.gd-icon.circle-filled {
  --gd-icon-url: url('../icons/circle-filled.7f38704692454720a2f07ec3860f7994.svg');
}
.gd-icon.circle-minus {
  --gd-icon-url: url('../icons/circle-minus.477942dca6833d77bd36780aabc7f2f2.svg');
}
.gd-icon.clipboard {
  --gd-icon-url: url('../icons/clipboard.f6cd3f1d408cc38e7c69614ad9ea2c73.svg');
}
.gd-icon.clock {
  --gd-icon-url: url('../icons/clock.e51000f94b0633f47488773a241e2b2c.svg');
}
.gd-icon.close {
  --gd-icon-url: url('../icons/close.48636710e158bcf010ec8b47d6426119.svg');
}
.gd-icon.comment {
  --gd-icon-url: url('../icons/comment.4c5b8c0e54c34662297c8662a2fcd0c1.svg');
}
.gd-icon.compare {
  --gd-icon-url: url('../icons/compare.871de49d6418b623b4f055597414fd58.svg');
}
.gd-icon.copy {
  --gd-icon-url: url('../icons/copy.be2824de2a58f233557539b1f63143ae.svg');
}
.gd-icon.crop {
  --gd-icon-url: url('../icons/crop.a298abb1b5d9f0d95f50946d60652193.svg');
}
.gd-icon.DE {
  --gd-icon-url: url('../icons/DE.c379ef8c17dc3ab1d5097bc34afd5800.svg');
}
.gd-icon.delivery {
  --gd-icon-url: url('../icons/delivery.0a6898757b9deb2c9d57fecd5bbffad7.svg');
}
.gd-icon.delivery-truck {
  --gd-icon-url: url('../icons/delivery-truck.e5d312d86a2155af7ead2ae9d7ae9eb8.svg');
}
.gd-icon.discount {
  --gd-icon-url: url('../icons/discount.fc77528f31715a6c84665b214cbc2381.svg');
}
.gd-icon.discussion {
  --gd-icon-url: url('../icons/discussion.c30db549149d067b38513cdd766fc6f3.svg');
}
.gd-icon.document {
  --gd-icon-url: url('../icons/document.d7df087ce1e860c6456392784ef38aac.svg');
}
.gd-icon.document-preview {
  --gd-icon-url: url('../icons/document-preview.8f2407b962c862a172f60ae4561b3bc9.svg');
}
.gd-icon.document-text {
  --gd-icon-url: url('../icons/document-text.086d8e6d7b98150b297d1f3168fd9897.svg');
}
.gd-icon.download {
  --gd-icon-url: url('../icons/download.1ffe4ac45fe42c29566f9ffd23b3c620.svg');
}
.gd-icon.drag-n-drop {
  --gd-icon-url: url('../icons/drag-n-drop.5b7211b6376680b33a8583654d87b4a9.svg');
}
.gd-icon.EU {
  --gd-icon-url: url('../icons/EU.8bca4355c8fb3e5b3ab6920cf89eccd3.svg');
}
.gd-icon.edit {
  --gd-icon-url: url('../icons/edit.fb8c55370becab42ad65c85c90bd6272.svg');
}
.gd-icon.equal {
  --gd-icon-url: url('../icons/equal.b0a5265a8308d0ee866313eab1cc0681.svg');
}
.gd-icon.eye-closed {
  --gd-icon-url: url('../icons/eye-closed.1658f6cd122b2fa45462e88ac91f17e0.svg');
}
.gd-icon.eye-open {
  --gd-icon-url: url('../icons/eye-open.f2bef5d74094f013078f11ac22b7255e.svg');
}
.gd-icon.FR {
  --gd-icon-url: url('../icons/FR.3b31da7b9c9f31c96bf9abe96a269c91.svg');
}
.gd-icon.fast-forward {
  --gd-icon-url: url('../icons/fast-forward.e79c0227fee7e363b2037fccce63f24a.svg');
}
.gd-icon.filter {
  --gd-icon-url: url('../icons/filter.2dadadaa79740ae1a2950de7f5d3875e.svg');
}
.gd-icon.flag {
  --gd-icon-url: url('../icons/flag.533b7994e114e623009018214ae57c6f.svg');
}
.gd-icon.flip {
  --gd-icon-url: url('../icons/flip.6cdbc804b0b1f02f4983e489cc774da0.svg');
}
.gd-icon.folder-arrow-down {
  --gd-icon-url: url('../icons/folder-arrow-down.db3dc62d9c54eec16b8e8424f66878f4.svg');
}
.gd-icon.full-screen {
  --gd-icon-url: url('../icons/full-screen.757ecc1d64c14d25fe5cda8c6823c106.svg');
}
.gd-icon.globe {
  --gd-icon-url: url('../icons/globe.3226fced203860853ace87075e986419.svg');
}
.gd-icon.hand-raised {
  --gd-icon-url: url('../icons/hand-raised.73b7ce6ada22d68bf1c7bafd341861e6.svg');
}
.gd-icon.heart-empty {
  --gd-icon-url: url('../icons/heart-empty.4cfff066adca03c2e24bc55a0afded36.svg');
}
.gd-icon.heart-filled {
  --gd-icon-url: url('../icons/heart-filled.721a3704827f4a0b85afa356e38b9226.svg');
}
.gd-icon.help {
  --gd-icon-url: url('../icons/help.d425025bdd16a3880f3e888bf48458d3.svg');
}
.gd-icon.home {
  --gd-icon-url: url('../icons/home.880a317d0049f016b4d4d6698f7840c4.svg');
}
.gd-icon.hot {
  --gd-icon-url: url('../icons/hot.c94f16450da5d75ccd14d0f3715ef73e.svg');
}
.gd-icon.IT {
  --gd-icon-url: url('../icons/IT.6d6564165c931989d0c6df910808c27a.svg');
}
.gd-icon.info {
  --gd-icon-url: url('../icons/info.a5ff989a3b50e579ac3ca418f0cd25d7.svg');
}
.gd-icon.info-alt {
  --gd-icon-url: url('../icons/info-alt.645cec16a9dc0089fc48820633fa9f58.svg');
}
.gd-icon.LU {
  --gd-icon-url: url('../icons/LU.ab5d1fa773d971b609c29091fa744575.svg');
}
.gd-icon.leaf {
  --gd-icon-url: url('../icons/leaf.b75cddec8c6ada271d4ceedec1bb4245.svg');
}
.gd-icon.lightbulb {
  --gd-icon-url: url('../icons/lightbulb.bd2782a53ff880adcac17a76fca971ed.svg');
}
.gd-icon.line {
  --gd-icon-url: url('../icons/line.aedd7f4e488a1b6b89d8c8dd7b6890dd.svg');
}
.gd-icon.link-external {
  --gd-icon-url: url('../icons/link-external.67ba3cb6f9ba982d4184cef7480642d1.svg');
}
.gd-icon.link-off {
  --gd-icon-url: url('../icons/link-off.09e675a431ac401af908687f9c14f14a.svg');
}
.gd-icon.link-on {
  --gd-icon-url: url('../icons/link-on.5b9b58727e5f37023e40aab27af28da9.svg');
}
.gd-icon.list-combined {
  --gd-icon-url: url('../icons/list-combined.7acf4962cce63602fb0514fd9407604a.svg');
}
.gd-icon.loading-spinner {
  --gd-icon-url: url('../icons/loading-spinner.debb9ea489e95661a6a5d5d468fbc48a.svg');
}
.gd-icon.lock {
  --gd-icon-url: url('../icons/lock.6e092bf123c8270386ef1bc64b0c58cc.svg');
}
.gd-icon.logo-digitec {
  --gd-icon-url: url('../icons/logo-digitec.094288d389a7d7672ff4d946a5470209.svg');
}
.gd-icon.logo-galaxus {
  --gd-icon-url: url('../icons/logo-galaxus.97622c6ab1151851e6108dc755b1edf6.svg');
}
.gd-icon.magazine {
  --gd-icon-url: url('../icons/magazine.efe155cc204a12e39c514cdd31e4c9a9.svg');
}
.gd-icon.mail {
  --gd-icon-url: url('../icons/mail.d5db2a6fc486a6b4b88e098ecfc64550.svg');
}
.gd-icon.menu {
  --gd-icon-url: url('../icons/menu.e78576c0324c48ffdceb66c326c87d1b.svg');
}
.gd-icon.minus {
  --gd-icon-url: url('../icons/minus.448e1826692b3a60b82bba18e58bfed6.svg');
}
.gd-icon.mode-dark {
  --gd-icon-url: url('../icons/mode-dark.fb68ba7197026b20e3ba58e3f6f45b3b.svg');
}
.gd-icon.mode-light {
  --gd-icon-url: url('../icons/mode-light.0faf6d222748f423b58f62d8758764f8.svg');
}
.gd-icon.mode-system {
  --gd-icon-url: url('../icons/mode-system.b1b65aca6b1011b6eb04da2f76e0adc9.svg');
}
.gd-icon.mood-happy {
  --gd-icon-url: url('../icons/mood-happy.442f6f295f4720ff4ddf0dd374a4781b.svg');
}
.gd-icon.mood-sad {
  --gd-icon-url: url('../icons/mood-sad.33a840eeb9d1108ee659f20c6a6fd0a0.svg');
}
.gd-icon.more-horizontal-circle {
  --gd-icon-url: url('../icons/more-horizontal-circle.166b8d0d2e9f3fe9a2dd492b2529392a.svg');
}
.gd-icon.more-vert {
  --gd-icon-url: url('../icons/more-vert.4852689f8dfcd5c280655d0323079850.svg');
}
.gd-icon.move {
  --gd-icon-url: url('../icons/move.6f47fb717eb913463fceb886ee229fdb.svg');
}
.gd-icon.NL {
  --gd-icon-url: url('../icons/NL.872c9fe05f6116f20d7e8510bf3a570c.svg');
}
.gd-icon.package-damage {
  --gd-icon-url: url('../icons/package-damage.8e856a2fe281128b9c6d782648c836fa.svg');
}
.gd-icon.paint-roller {
  --gd-icon-url: url('../icons/paint-roller.8b9d6e3125b0bda3af48eff94da8900e.svg');
}
.gd-icon.panel-closed {
  --gd-icon-url: url('../icons/panel-closed.18d5c0925e013cd062d629bfc4f423fc.svg');
}
.gd-icon.panel-open {
  --gd-icon-url: url('../icons/panel-open.8c99acae8628433c4aff14ff88e10c17.svg');
}
.gd-icon.paperclip {
  --gd-icon-url: url('../icons/paperclip.49e19d2d4a1a70fe61485e024c37bf39.svg');
}
.gd-icon.pause {
  --gd-icon-url: url('../icons/pause.b2bbb780b7e6f18d8efcad52a5d34113.svg');
}
.gd-icon.payment-clock {
  --gd-icon-url: url('../icons/payment-clock.22a5f08e0364e63ddfb1be5cce12f840.svg');
}
.gd-icon.phone {
  --gd-icon-url: url('../icons/phone.2d761b09161295dc197d4f6efccb2a5a.svg');
}
.gd-icon.pin {
  --gd-icon-url: url('../icons/pin.b875df60435ae5fa4864f7b4b5ee67a1.svg');
}
.gd-icon.placeholder {
  --gd-icon-url: url('../icons/placeholder.e3e30276790bc1cabceaeea518dd6f6f.svg');
}
.gd-icon.play {
  --gd-icon-url: url('../icons/play.fe2e9564d836807754be03c253033af0.svg');
}
.gd-icon.plus {
  --gd-icon-url: url('../icons/plus.911e1344ba78e6f811dd23cdd97237ad.svg');
}
.gd-icon.poop {
  --gd-icon-url: url('../icons/poop.acc820cbc3213f4fa8eb0a61d5c1fbdb.svg');
}
.gd-icon.print {
  --gd-icon-url: url('../icons/print.d76519529697151ec4b2d1d65bccb594.svg');
}
.gd-icon.qr-code {
  --gd-icon-url: url('../icons/qr-code.e639f651d328198761aa15d4c46197bf.svg');
}
.gd-icon.reply {
  --gd-icon-url: url('../icons/reply.353e29164dc917f2f111b7da7130d999.svg');
}
.gd-icon.report {
  --gd-icon-url: url('../icons/report.60ce8a9b32e7ca2a0406f7f746808369.svg');
}
.gd-icon.reset {
  --gd-icon-url: url('../icons/reset.1e18025369e5486651b1eebcb95f29cd.svg');
}
.gd-icon.rotate-left {
  --gd-icon-url: url('../icons/rotate-left.fc2251578bb931f77fc02d356cca5ee6.svg');
}
.gd-icon.rotate-right {
  --gd-icon-url: url('../icons/rotate-right.1b18d38f41abf202f973c7cce5e9ef01.svg');
}
.gd-icon.save {
  --gd-icon-url: url('../icons/save.5860f57f30886eddf40eda67cdd5e437.svg');
}
.gd-icon.search {
  --gd-icon-url: url('../icons/search.00dc0b1e9251ecbdde95a0956fd4cf5a.svg');
}
.gd-icon.send {
  --gd-icon-url: url('../icons/send.e202ecfb83b812d2900a566b2ef387fb.svg');
}
.gd-icon.settings {
  --gd-icon-url: url('../icons/settings.fa78feeb586de1e62449a23e9cf915f5.svg');
}
.gd-icon.share {
  --gd-icon-url: url('../icons/share.283ab58f318b6d2c45967ff893260be3.svg');
}
.gd-icon.share-alt {
  --gd-icon-url: url('../icons/share-alt.eecc32a6c6658d45317a30d6de17e195.svg');
}
.gd-icon.shield {
  --gd-icon-url: url('../icons/shield.9b3222cde4e7f84337fc63c9e4490f75.svg');
}
.gd-icon.snail {
  --gd-icon-url: url('../icons/snail.f39fcd23a8006686a30d2c9c96a71d5d.svg');
}
.gd-icon.sort {
  --gd-icon-url: url('../icons/sort.839f168b05c1c414341ed18994195365.svg');
}
.gd-icon.sort-ascending {
  --gd-icon-url: url('../icons/sort-ascending.ba696d89a60e9f40051b704ab9601efb.svg');
}
.gd-icon.sort-descending {
  --gd-icon-url: url('../icons/sort-descending.a53cf70dbd3b2d9de41afcc8f85fd04f.svg');
}
.gd-icon.sort-grid {
  --gd-icon-url: url('../icons/sort-grid.24a2007482fb48c80961faa4ae94553b.svg');
}
.gd-icon.sort-list {
  --gd-icon-url: url('../icons/sort-list.87ee53f8a851dd66ab723334a85d0a66.svg');
}
.gd-icon.star-empty {
  --gd-icon-url: url('../icons/star-empty.56f271f765c60569f05cb5cf0e2713e3.svg');
}
.gd-icon.star-filled {
  --gd-icon-url: url('../icons/star-filled.645508d0364453542623d479b932d831.svg');
}
.gd-icon.star-half {
  --gd-icon-url: url('../icons/star-half.4dfb08b8035826ee6ec24e700b216838.svg');
}
.gd-icon.statistic {
  --gd-icon-url: url('../icons/statistic.0733b764121e17c217822a37ae34b5aa.svg');
}
.gd-icon.stop {
  --gd-icon-url: url('../icons/stop.cdeda64384a5dbf63474fed834ec2f48.svg');
}
.gd-icon.switch {
  --gd-icon-url: url('../icons/switch.d5fea6310fae3627d853fb645630ef8e.svg');
}
.gd-icon.tag {
  --gd-icon-url: url('../icons/tag.d1200d670ca2a1649cad5b055271a0da.svg');
}
.gd-icon.umbrella {
  --gd-icon-url: url('../icons/umbrella.32bd6b6a0bad22279afb8cd58a4a3c68.svg');
}
.gd-icon.upload {
  --gd-icon-url: url('../icons/upload.621acaa02572e3343989892087863809.svg');
}
.gd-icon.user {
  --gd-icon-url: url('../icons/user.ab608b9047fb1394743e9ac59c804aa5.svg');
}
.gd-icon.user-employee {
  --gd-icon-url: url('../icons/user-employee.6e95d23d71b71d586129a18e86af4e94.svg');
}
.gd-icon.user-group {
  --gd-icon-url: url('../icons/user-group.3dc87509e5fb8fb69b5e8fbee2dcba48.svg');
}
.gd-icon.user-question {
  --gd-icon-url: url('../icons/user-question.f198c9df62b44940732e25538e571a15.svg');
}
.gd-icon.user-remove {
  --gd-icon-url: url('../icons/user-remove.3e15f537cfbb828ee48cbd3bcbe37019.svg');
}
.gd-icon.wallet {
  --gd-icon-url: url('../icons/wallet.3aa6737e132ccf3f057288569c691db1.svg');
}
.gd-icon.warning {
  --gd-icon-url: url('../icons/warning.36552a2eb1bc84a7c54d0d5102ab07e2.svg');
}
.gd-icon.warning-light {
  --gd-icon-url: url('../icons/warning-light.a77cad47d4bf58df33b9dcee03909b97.svg');
}
.gd-icon.warranty {
  --gd-icon-url: url('../icons/warranty.4a306c0973f168e91d7f2122973d7a4d.svg');
}
.gd-icon.wrench {
  --gd-icon-url: url('../icons/wrench.124e93ee14159549085c956f839d09ad.svg');
}

@font-face {
  font-family: Galactica;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/galactica/GalacticaVF.8db9741d1a6cef45de483c525eca28e7.woff2") format("woff2-variations");
}
* {
  font-variant-numeric: tabular-nums;
}

/* For external usages */
.headline-h1 {
  font-family: var(--gd-text-headline-h1-fontFamily);
  font-size: var(--gd-text-headline-h1-fontSize);
  font-weight: var(--gd-text-headline-h1-fontWeight);
  letter-spacing: var(--gd-text-headline-h1-letterSpacing);
  line-height: var(--gd-text-headline-h1-lineHeight);
  text-transform: var(--gd-text-headline-h1-textTransform);
  text-decoration: var(--gd-text-headline-h1-textDecoration);
}

.headline-h2 {
  font-family: var(--gd-text-headline-h2-fontFamily);
  font-size: var(--gd-text-headline-h2-fontSize);
  font-weight: var(--gd-text-headline-h2-fontWeight);
  letter-spacing: var(--gd-text-headline-h2-letterSpacing);
  line-height: var(--gd-text-headline-h2-lineHeight);
  text-transform: var(--gd-text-headline-h2-textTransform);
  text-decoration: var(--gd-text-headline-h2-textDecoration);
}

.headline-h3 {
  font-family: var(--gd-text-headline-h3-fontFamily);
  font-size: var(--gd-text-headline-h3-fontSize);
  font-weight: var(--gd-text-headline-h3-fontWeight);
  letter-spacing: var(--gd-text-headline-h3-letterSpacing);
  line-height: var(--gd-text-headline-h3-lineHeight);
  text-transform: var(--gd-text-headline-h3-textTransform);
  text-decoration: var(--gd-text-headline-h3-textDecoration);
}

.headline-h4 {
  font-family: var(--gd-text-headline-h3-fontFamily);
  font-size: var(--gd-text-headline-h3-fontSize);
  font-weight: var(--gd-text-headline-h3-fontWeight);
  letter-spacing: var(--gd-text-headline-h3-letterSpacing);
  line-height: var(--gd-text-headline-h3-lineHeight);
  text-transform: var(--gd-text-headline-h3-textTransform);
  text-decoration: var(--gd-text-headline-h3-textDecoration);
}

.body-regular {
  font-family: var(--gd-text-body-regular-fontFamily);
  font-size: var(--gd-text-body-regular-fontSize);
  font-weight: var(--gd-text-body-regular-fontWeight);
  letter-spacing: var(--gd-text-body-regular-letterSpacing);
  line-height: var(--gd-text-body-regular-lineHeight);
  text-transform: var(--gd-text-body-regular-textTransform);
  text-decoration: var(--gd-text-body-regular-textDecoration);
}

.body-bold {
  font-family: var(--gd-text-body-bold-fontFamily);
  font-size: var(--gd-text-body-bold-fontSize);
  font-weight: var(--gd-text-body-bold-fontWeight);
  letter-spacing: var(--gd-text-body-bold-letterSpacing);
  line-height: var(--gd-text-body-bold-lineHeight);
  text-transform: var(--gd-text-body-bold-textTransform);
  text-decoration: var(--gd-text-body-bold-textDecoration);
}

.body-underline {
  font-family: var(--gd-text-body-underline-fontFamily);
  font-size: var(--gd-text-body-underline-fontSize);
  font-weight: var(--gd-text-body-underline-fontWeight);
  letter-spacing: var(--gd-text-body-underline-letterSpacing);
  line-height: var(--gd-text-body-underline-lineHeight);
  text-transform: var(--gd-text-body-underline-textTransform);
  text-decoration: var(--gd-text-body-underline-textDecoration);
}

.label-regular {
  font-family: var(--gd-text-label-regular-fontFamily);
  font-size: var(--gd-text-label-regular-fontSize);
  font-weight: var(--gd-text-label-regular-fontWeight);
  letter-spacing: var(--gd-text-label-regular-letterSpacing);
  line-height: var(--gd-text-label-regular-lineHeight);
  text-transform: var(--gd-text-label-regular-textTransform);
  text-decoration: var(--gd-text-label-regular-textDecoration);
}

.label-bold {
  font-family: var(--gd-text-label-bold-fontFamily);
  font-size: var(--gd-text-label-bold-fontSize);
  font-weight: var(--gd-text-label-bold-fontWeight);
  letter-spacing: var(--gd-text-label-bold-letterSpacing);
  line-height: var(--gd-text-label-bold-lineHeight);
  text-transform: var(--gd-text-label-bold-textTransform);
  text-decoration: var(--gd-text-label-bold-textDecoration);
}

.label-underline {
  font-family: var(--gd-text-label-underline-fontFamily);
  font-size: var(--gd-text-label-underline-fontSize);
  font-weight: var(--gd-text-label-underline-fontWeight);
  letter-spacing: var(--gd-text-label-underline-letterSpacing);
  line-height: var(--gd-text-label-underline-lineHeight);
  text-transform: var(--gd-text-label-underline-textTransform);
  text-decoration: var(--gd-text-label-underline-textDecoration);
}
/*# sourceMappingURL=systemcomponents-styles.css.map */