/* 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 {
    box-sizing: border-box;
    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 {
    box-sizing: border-box;
    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 {
    box-sizing: border-box;
    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;
  }
}
/* 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;
    box-sizing: border-box;
    display: flex;
    padding: var(--gd-size-spacing-1x) var(--gd-size-spacing-4x);
    color: var(--gd-color-on-surface-secondary);
  }
  /* ===== GdMenuItem ===== */
  &.gd-menu-item {
    box-sizing: border-box;
    align-self: stretch;
    padding: var(--gd-size-spacing-1-5x) var(--gd-size-spacing-4x);
  }
  &.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 {
    /* ===== GdMenuItemLink ===== */
  }
  &.gd-menu-item > .menu-item-link {
    display: block;
    text-decoration: none;
    color: inherit;
    outline: none;
  }
  &.gd-menu-item {
    /* ===== GdMenuItemLink / GdMenuItemSubmenu ===== */
  }
  &.gd-menu-item .leading-icon {
    height: var(--gd-size-text-line-height-body);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  &.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 {
    /* ===== GdMenuItemActionToggleSwitch + GdMenuItemToggleSwitch ===== */
  }
  &.gd-menu-item > .menu-item-toggle {
    display: contents;
  }
  &.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 {
    /* ===== GdMenuItemSubmenu ===== */
  }
  &.gd-menu-item:focus-within > .folder-popover, &.gd-menu-item[data-active] > .folder-popover {
    visibility: visible;
  }
  /* ===== GdMenuItemContent ===== */
  &.gd-menu-item-content {
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    gap: var(--gd-size-spacing-3x);
    cursor: pointer;
    hyphens: auto;
  }
  &.gd-menu-item-content.disabled {
    opacity: var(--gd-color-opacity-disabled);
  }
  &.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;
    text-overflow: ellipsis;
    color: var(--gd-color-on-surface-primary);
    font-variant-numeric: lining-nums tabular-nums;
    font-feature-settings: "liga" off, "clig" off;
  }
  &.gd-menu-item-content > .content > .main-content > .trailing {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  &.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-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;
    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: 1;
    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));
  }
}
/* ===== GdMenuDivider ===== */
/*
If we move this Styling here into the scope, it breaks, since the scope
searches only within the :scope, but + .menu-diver 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])) {
  /* ===== GdAvatar ===== */
  &.gd-avatar {
    position: relative;
    box-sizing: border-box;
    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 {
    box-sizing: border-box;
    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.png") no-repeat;
    background-size: contain;
  }
  /* ===== GdMessageBox ===== */
  &.gd-message-box {
    width: 100%;
    display: flex;
    align-items: flex-start;
    border-radius: var(--gd-size-radius-default);
    padding-right: var(--gd-size-spacing-2x);
  }
  &.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);
  }
}
/* 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])) {
  /* ===== 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);
  }
  /* ===== GdFieldHeader ===== */
  &.gd-field-header {
    box-sizing: border-box;
    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: flex-start;
    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;
  }
  &.gd-field-header > .optional {
    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;
    padding-left: var(--gd-size-control-padding-vertical-stack);
    align-items: center;
    flex: 0 0 auto;
  }
}
/* 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:scope,
  button:scope {
    font: unset;
    letter-spacing: unset;
    line-height: unset;
    text-transform: unset;
    text-decoration: unset;
    border: unset;
    padding: unset;
    background: unset;
  }
  a:scope,
  button:scope {
    display: inline-flex;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    gap: var(--gd-size-control-padding-horizontal-gap);
    cursor: pointer;
  }
  a:scope:disabled,
  button:scope:disabled {
    cursor: not-allowed;
  }
  a: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: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: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:scope,
  button:scope {
    /* Size */
  }
  a: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:scope.size-small:is(.primary, .secondary),
  button:scope.size-small: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:scope,
  button:scope {
    /* Variant: Primary */
  }
  a: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);
  }
  a:scope.primary:hover,
  button:scope.primary:hover {
    background: var(--gd-color-button-background-primary-emphasis);
  }
  a: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:scope.primary:active,
  button:scope.primary:active {
    box-shadow: var(--gd-effect-shadow-button);
  }
  a:scope.primary:disabled,
  button:scope.primary:disabled {
    border-color: var(--gd-color-stroke-disabled);
    background: transparent;
    color: var(--gd-color-on-surface-disabled);
  }
  a:scope,
  button:scope {
    /* Variant: Secondary */
  }
  a: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);
  }
  a:scope.secondary:hover,
  button:scope.secondary:hover {
    background: var(--gd-color-button-background-secondary-emphasis);
  }
  a: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:scope.secondary:active,
  button:scope.secondary:active {
    box-shadow: var(--gd-effect-shadow-button);
  }
  a:scope.secondary:disabled,
  button:scope.secondary:disabled {
    border-color: var(--gd-color-stroke-disabled);
    background: transparent;
    color: var(--gd-color-on-surface-disabled);
  }
  a:scope,
  button:scope {
    /* Variant: Text primary */
  }
  a: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: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);
  }
  a:scope.text-primary:hover,
  button:scope.text-primary:hover {
    color: var(--gd-color-on-surface-primary); /* To override the browser-style */
  }
  a: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:scope.text-primary:disabled,
  button:scope.text-primary:disabled {
    color: var(--gd-color-on-surface-disabled);
  }
  a:scope,
  button:scope {
    /* Variant: Text secondary */
  }
  a: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);
  }
  a:scope.text-secondary:hover,
  button:scope.text-secondary:hover {
    color: var(--gd-color-link-secondary-emphasis);
  }
  a: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:scope.text-secondary:active,
  button:scope.text-secondary:active {
    color: var(--gd-color-link-secondary-emphasis);
  }
  a:scope.text-secondary:disabled,
  button:scope.text-secondary:disabled {
    color: var(--gd-color-on-surface-disabled);
  }
  a:scope,
  button:scope {
    /* Variant: Link */
  }
  a:scope.link,
  button:scope.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);
  }
  a:scope.link:hover,
  button:scope.link:hover {
    color: var(--gd-color-link-primary-emphasis);
  }
  a:scope.link:focus-visible,
  button:scope.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:scope.link:disabled,
  button:scope.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;
  }
  /* ===== GdFloatingActionButton / GdFloatingActionLinkButton ===== */
  :scope.gd-floating-action {
    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);
  }
  :scope.gd-floating-action:hover {
    background: var(--gd-color-button-background-fab-emphasis);
  }
  :scope.gd-floating-action: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);
  }
  :scope.gd-floating-action:active {
    background: var(--gd-color-button-background-fab);
  }
  :scope.gd-floating-action > .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-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);
  }
}
.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])) {
  input: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: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: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:scope:focus-visible, input: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: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: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: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);
    box-sizing: border-box;
  }
  /* ===== GdInputField ===== */
  &.gd-form-field {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gd-size-control-padding-vertical-stack);
  }
  /* ===== GdInputText / GdInputPassword / GdDropdown ===== */
  .input-container:scope {
    align-self: stretch;
    display: inline-flex;
    align-items: center;
    --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);
  }
  .input-container:scope > .leading {
    box-sizing: border-box;
    align-self: stretch;
    padding-left: calc(var(--gd-size-control-padding-horizontal-default) - var(--border-width));
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    grid-template-rows: calc(var(--gd-size-input-height-default) - 2 * var(--border-width));
    justify-content: flex-start;
    align-items: center;
    justify-items: center;
    flex-shrink: 0;
    color: var(--gd-color-on-surface-secondary);
  }
  .input-container:scope > .field-container {
    display: flex;
    padding: calc(var(--gd-size-control-padding-vertical-default) - var(--border-width)) var(--gd-size-control-padding-horizontal-default);
    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(--border-width));
  }
  .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 > input {
    appearance: none;
    outline: none;
    border: none;
    background: none;
    margin: 0;
    padding: 0;
    width: 0;
    flex: 1 1 auto;
  }
  .input-container:scope > .trailing {
    box-sizing: border-box;
    align-self: stretch;
    padding-right: calc(var(--gd-size-spacing-1x) - var(--border-width));
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: var(--gd-size-input-height-default);
    grid-template-rows: calc(var(--gd-size-input-height-default) - 2 * var(--border-width));
    justify-content: flex-end;
    align-items: center;
    justify-items: center;
    flex-shrink: 0;
    color: var(--gd-color-on-surface-secondary);
  }
  .input-container:scope > .trailing > .error-icon {
    display: none;
    width: var(--gd-size-input-height-default);
    height: var(--gd-size-input-height-default);
    justify-content: center;
    align-items: stretch;
    --gd-icon-fill: var(--gd-color-on-surface-negative);
  }
  .input-container:scope > .trailing .tooltip-container {
    display: flex;
    justify-content: center;
    align-items: center;
    justify-self: stretch;
  }
  .input-container:scope:has(> .leading:empty) > .field-container {
    padding-left: calc(var(--gd-size-control-padding-horizontal-default) - var(--border-width));
  }
  .input-container:scope:has(> .trailing:empty) > .field-container {
    padding-right: calc(var(--gd-size-control-padding-horizontal-default) - var(--border-width));
  }
  .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:has(input: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:read-only):not(.gd-dropdown-input) {
    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), .input-container:scope:has(input:focus-visible) {
    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) {
    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) {
    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) .error-icon {
    display: flex;
  }
  /* ===== GdInputPassword ===== */
  &.input-container.gd-password-input:has(input[type=text]) .show {
    display: none;
  }
  &.input-container.gd-password-input:has(input[type=password]) .hide {
    display: none;
  }
  /* ===== GdInputNumber ===== */
  &.gd-input-number.hide-spinner {
    appearance: textfield;
  }
  /* ===== GdDropdown ===== */
  &.input-container.gd-dropdown-input {
    position: relative;
    box-sizing: border-box;
    width: 100%;
  }
  &.input-container.gd-dropdown-input > datalist {
    box-sizing: border-box;
    position: absolute;
    top: calc(100% + var(--border-width));
    left: calc(-1 * var(--border-width));
    z-index: 99;
    max-height: calc(100% + 5 * (1rem + 8px));
    width: calc(100% + 2 * var(--border-width));
    overflow-y: auto;
    padding: var(--gd-size-spacing-2x) 0;
    border-radius: var(--gd-size-radius-default);
    background: var(--gd-color-surface-primary);
    box-shadow: var(--gd-effect-elevation-overlay);
  }
  &.input-container.gd-dropdown-input > datalist option {
    display: block;
    padding: var(--gd-size-spacing-1-5x) var(--gd-size-spacing-4x);
    font-family: var(--gd-font-family-primary);
    font-size: var(--gd-size-text-size-body);
    font-style: normal;
    font-weight: 400;
    box-sizing: border-box;
    width: 100%;
    text-wrap: auto;
    cursor: pointer;
  }
  &.input-container.gd-dropdown-input > datalist option[hidden] {
    display: none;
  }
  &.input-container.gd-dropdown-input > datalist option:hover, &.input-container.gd-dropdown-input > datalist option[selected] {
    background: var(--gd-color-surface-hover);
  }
  &.input-container.gd-dropdown-input > datalist > .empty-state {
    padding: var(--gd-size-spacing-1-5x) var(--gd-size-spacing-4x);
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--gd-color-on-surface-secondary);
    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);
  }
  &.input-container.gd-dropdown-input > datalist:has(option:not([hidden])) > .empty-state {
    display: none;
  }
  &.input-container.gd-dropdown-input:focus-within datalist {
    display: block;
  }
  &.input-container.gd-dropdown-input:not(:focus-within) .dropdown-close {
    display: none;
  }
  &.input-container.gd-dropdown-input:focus-within .dropdown-open {
    display: none;
  }
  &.input-container.gd-dropdown-input:has(input:first-of-type: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);
  }
  /*  ===== GdCheckbox / GdRadio ===== */
  label:has(> .control):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: flex;
    align-items: flex-start;
    gap: var(--gd-size-control-padding-horizontal-default);
    align-self: stretch;
  }
  label:has(> .control):scope > .control {
    display: flex;
    height: var(--gd-size-text-line-height-body);
    align-items: center;
    position: relative;
  }
  label:has(> .control):scope > .control > div {
    box-sizing: border-box;
    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);
  }
  label:has(> .control):scope > .control > div.checkmark {
    border-radius: var(--gd-size-radius-default);
  }
  label:has(> .control):scope > .control > div.radio {
    border-radius: var(--gd-size-radius-full);
  }
  label:has(> .control):scope > .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));
  }
  label:has(> .control):scope > .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);
  }
  label:has(> .control):scope > .control > span:empty {
    display: none;
  }
  label:has(> .control):scope > .control input:focus-visible + div {
    outline-offset: var(--gd-size-focus-offset);
    outline: var(--gd-color-stroke-focus) solid var(--gd-size-stroke-focus);
  }
  label:has(> .control):scope > .control input:checked + div {
    border: var(--border-width) solid var(--gd-color-input-border-emphasis);
    background: var(--gd-color-input-background-emphasis);
  }
  label:has(> .control):scope > .control input:disabled + div {
    border: var(--border-width) solid var(--gd-color-input-border-emphasis);
    opacity: var(--gd-color-opacity-disabled);
  }
  label:has(> .control):scope > .control:has(input:disabled) + span {
    color: var(--gd-color-on-surface-disabled);
  }
  label:has(> .control):scope > .control > input.invalid + div {
    --border-width: var(--gd-size-stroke-strong);
    border: var(--border-width) solid var(--gd-color-on-surface-negative);
  }
  label:has(> .control):scope:hover > .control:not(:has(input.invalid)) > div {
    border: var(--gd-size-stroke-default) solid var(--gd-color-input-border-emphasis);
  }
  label:has(> .control):scope: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);
    box-sizing: border-box;
    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;
    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);
    padding-right: var(--gd-size-control-padding-horizontal-gap);
  }
  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;
  }
  /* ===== GdToggleSwitch ===== */
  input:scope.gd-toggle-switch {
    cursor: pointer;
    appearance: none;
    margin: 0;
    border: none;
    width: 36px;
    height: 18px;
    flex-shrink: 0;
    border-radius: var(--gd-size-radius-full);
    background: var(--gd-color-on-surface-tertiary);
    position: relative;
  }
  input:scope.gd-toggle-switch:checked {
    background: var(--gd-color-input-background-emphasis-alt);
  }
  input:scope.gd-toggle-switch:focus-visible {
    outline-offset: var(--gd-size-stroke-focus);
    outline: var(--gd-color-stroke-focus) solid var(--gd-size-stroke-focus);
  }
  input:scope.gd-toggle-switch:disabled {
    opacity: var(--gd-color-opacity-disabled);
    cursor: not-allowed;
  }
}
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;
  box-sizing: border-box;
  height: var(--gd-size-input-height-selection-controls);
  width: var(--gd-size-input-height-selection-controls);
  position: absolute;
}

.gd-toggle-switch[b-go72696cla]::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);
}
.gd-toggle-switch[b-go72696cla]:checked::after {
  transform: translate(18px);
}

/* 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])) {
  /* ===== 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;
    box-sizing: border-box;
    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);
  }
}
/* 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 ===== */
  &.popover-container {
    position: relative;
  }
  &.popover-container:hover > .popover, &.popover-container:focus-within > .popover {
    visibility: visible;
    opacity: 1;
    transition-delay: 0.03s; /* delay for entering element, since hover is immediately active */
  }
  &.popover-container:hover > .popover:has(.close-icon:active), &.popover-container:focus-within > .popover:has(.close-icon:active) {
    display: none;
    transition-duration: 0s;
    transition-delay: 0s;
  }
  &.popover-container > button.gd-popover-icon {
    display: flex;
  }
  &.popover-container > .popover {
    --popover-arrow-size: 16px;
    --popover-viewport-clip-distance: var(--gd-size-spacing-1x);
    visibility: hidden;
    position: fixed;
    z-index: 1;
    transition-property: visibility, opacity;
    transition-duration: 0.1s;
    transition-timing-function: ease-out;
    transition-delay: 0.3s; /* delay for leaving element, since hover does not affect it anymore */
    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.
    */
  }
  &.popover-container > .popover.popover-top, &.popover-container > .popover.popover-bottom {
    --popover-offset-x: calc(-1 * (var(--gd-size-spacing-4x) + (var(--popover-arrow-size) / 2)));
  }
  &.popover-container > .popover.popover-top > .popover-pointer, &.popover-container > .popover.popover-bottom > .popover-pointer {
    padding: 0 var(--gd-size-spacing-4x);
    flex-direction: row;
    align-items: flex-start;
  }
  &.popover-container > .popover.popover-left, &.popover-container > .popover.popover-right {
    --popover-offset-y: calc(-1 * (var(--gd-size-spacing-4x) + (var(--popover-arrow-size) / 2)));
  }
  &.popover-container > .popover.popover-left > .popover-pointer, &.popover-container > .popover.popover-right > .popover-pointer {
    padding: var(--gd-size-spacing-4x) 0;
    flex-direction: column;
    align-items: flex-start;
  }
  &.popover-container > .popover.popover-top {
    flex-direction: column-reverse;
  }
  &.popover-container > .popover.popover-bottom {
    flex-direction: column;
  }
  &.popover-container > .popover.popover-left {
    flex-direction: row-reverse;
  }
  &.popover-container > .popover.popover-right {
    flex-direction: row;
  }
  &.popover-container > .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 */
  }
  &.popover-container > .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));
  }
  &.popover-container > .popover > .popover-card {
    display: flex;
    padding-right: var(--gd-size-spacing-2x);
    align-items: flex-start;
    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;
  }
  &.popover-container > .popover > .popover-card > .close-icon {
    padding-top: var(--gd-size-spacing-4x);
  }
  &.popover-container > .popover > .popover-card > .close-icon > .gd-tooltip {
    display: flex;
  }
  &.popover-container > .popover > .popover-card > .popover-content {
    display: flex;
    padding: var(--gd-size-spacing-4x) var(--gd-size-spacing-2x) var(--gd-size-spacing-4x) var(--gd-size-spacing-4x);
    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;
  }
  /* ===== GdPlainDialog ===== */
  dialog:scope {
    all: unset;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: var(--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: 1000;
    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 {
    --default-popover-offset: var(--gd-size-spacing-2x);
  }
  &.tooltip-container:hover > .tooltip {
    visibility: visible;
  }
  &.tooltip-container > .tooltip {
    display: inline-flex;
    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);
    visibility: hidden;
    position: fixed;
    z-index: 1;
    min-width: max-content;
  }
  &.tooltip-container > .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-container > .tooltip:has(span:empty) {
    display: none;
  }
}
@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 */