/*!**********************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[2]!./src/styles.css?ngGlobalStyle ***!
  \**********************************************************************************************************************************************************************************************************************/
/* You can add global styles to this file, and also import other style files */
@font-face {
  font-family: 'FontAwesome';
  src: url('fontawesome-webfont.8a7cb27d142e3e19.ttf') format('truetype');
}

.groupRow {
  margin-left: 10px;
  margin-top: 5px;
}

.inputLabel {
  display: inline-block;
  min-width: 220px;
}

.groupRowInput {
  width: 50%;
}

/*The following section contains styles that should defined global form reusing!*/

.UxGuide2_GrayPanel_TextNormal,
.UxGuide2_GrayPanel_TextBold,
.UxGuide2_GrayPanel_Headline1 {
  font-family: 'Segoe UI';
  color: #4e5c63;
  font-size: 12pt;
}

.UxGuide2_GrayPanel_Headline1 {
  font-size: 13pt;
  margin-bottom: 15px;
}

.UxGuide2_GrayPanel_Headline {
  font-size: 15pt;
  margin-bottom: 18px;
}

.UxGuide2_GrayPanel_Label {
  font-size: 13pt;
  margin-bottom: 15px;
}

.UxGuide2_GrayPanel_TextBold {
  font-weight: Bold;
}

.UxGuide2_GrayPanel {
  background-color: #f0f3f4;
  padding: 20px;
  overflow: auto;
}

.UxGuide2_Default_Button {
  color: #3e494f;
  background-color: #e8edf0;
  border: none;
  filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=2, OffY=2, Color='gray');
  filter: drop-shadow(2px 2px 2px gray);
  -webkit-filter: drop-shadow(2px 2px 2px gray);
  min-height: 25px;
}

.UxGuide2_Default_Button:hover,
.UxGuide2_Default_Button.hover {
  color: #3e494f;
  background-color: #ebf0f3;
}

.UxGuide2_Default_Button:active,
.UxGuide2_Default_Button.active {
  color: white;
  background-color: #006093;
  border: none;
  filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=0, OffY=0, Color='gray');
  filter: drop-shadow(0px 0px 0px gray);
  -webkit-filter: drop-shadow(0px 0px 0px gray);
}

.UxGuide2_Startscreen_Button,
.DisabledUxGuide2_Startscreen_Button {
  color: #e6e8ea;
  background-color: #5b6b79;
  border: none;
  filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=2, OffY=2, Color='gray');
  filter: drop-shadow(2px 2px 2px gray);
  -webkit-filter: drop-shadow(1px 1px 1px darkgray);
  min-height: 40px;
  padding: 0px 20px 0px 00px;
}

.UxGuide2_Startscreen_Button:hover,
.UxGuide2_Startscreen_Button.hover {
  color: #e6e8ea;
  background-color: #647686;
}

.UxGuide2_Startscreen_Button:active,
.UxGuide2_Startscreen_Button.active {
  color: #e6e8ea;
  background-color: #006093;
  border: none;
  filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=0, OffY=0, Color='gray');
  filter: drop-shadow(0px 0px 0px gray);
  -webkit-filter: drop-shadow(0px 0px 0px gray);
}

.UxGuide2_Startscreen_Button_Image {
  font-size: 21pt;
  margin-left: 7px;
  margin-right: 5px;
  vertical-align: middle;
  line-height: 40px;
}

.UxGuide2_Startscreen_Button_Text {
  font-size: 11pt;
  vertical-align: middle;
  line-height: 40px;
}
/**
 * Checkbox
 */
.UxGuide2_CheckBox {
  width: 20px;
  position: relative;
}

/**
 * Box für die Checkbox
 */
.UxGuide2_CheckBox {
  float: left;
  margin-left: 2px;
  margin-top: -1px;
  margin-right: 2px;
}

.UxGuide2_CheckBox label {
  cursor: pointer;
  position: absolute;
  width: 16px;
  height: 16px;
  top: 2px;
  left: -2px;
  background: white;
  border: 1px solid #a2a8ab;
}

.UxGuide2_CheckBox label:hover {
  cursor: pointer;
  position: absolute;
  width: 16px;
  height: 16px;
  top: 2px;
  left: -2px;
  background: white;
  border: 1px solid #b8bec1;
}

*:focus {
  outline: none;
}

.checkLabel {
  padding-left: 20px;
}

/**
 * Haken der Checkbox
 */
.UxGuide2_CheckBox label:after {
  opacity: 0;
  content: '';
  position: absolute;
  width: 10px;
  height: 6px;
  background: transparent;
  top: 3px;
  left: 2px;
  border: 3px solid #445557;
  border-top: none;
  border-right: none;
  transform: rotate(-45deg);
}

/**
 * Hover
 */
.UxGuide2_CheckBox label:hover::after {
  border: 3px solid #747d82;
  border-top: none;
  border-right: none;
  transform: rotate(-45deg);
}

/**
 * Haken der Checkbox wenn gecheckt.
 */
.UxGuide2_CheckBox input[type=checkbox]:checked + label:after {
  opacity: 1;
}

button:focus {
  outline: 0;
}

.deleteIcon:before {
  font-family: FontAwesome;
  content: "\f014";
  font-size: 16pt;
  cursor: pointer;
  margin-left: 5px;
  margin-right: 5px;
}

.editIcon:before {
  content: "\f040";
  font-family: FontAwesome;
  font-size: 16pt;
  cursor: pointer;
  margin-left: 5px;
  margin-right: 5px;
}

.applyIcon:before {
  content: "\f00c";
  font-family: FontAwesome;
  font-size: 16pt;
  cursor: pointer;
  margin-left: 5px;
  margin-right: 5px;
}

.cancelIcon:before {
  content: "\f05e";
  font-family: FontAwesome;
  font-size: 16pt;
  cursor: pointer;
  margin-left: 5px;
  margin-right: 5px;
}

.addIcon:before {
  content: "\ff0b";
  font-family: FontAwesome;
  font-size: 16pt;
  cursor: pointer;
  margin-left: 5px;
  margin-right: 5px;
}

/*!************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[2]!./node_modules/@synergy-design-system/tokens/dist/themes/light.css?ngGlobalStyle ***!
  \************************************************************************************************************************************************************************************************************************************************************************/
/**
 * @synergy-design-system/tokens version 2.8.0
 * SICK Global UX Foundation
 * Do not edit directly
 * Generated on Mon, 26 Aug 2024 07:06:35 GMT
 */

:root, .syn-theme-light {
  color-scheme: light;
  --syn-font-size-x-small: 12px;
  --syn-font-size-small: 14px;
  --syn-font-size-medium: 16px;
  --syn-font-size-large: 20px;
  --syn-font-size-x-large: 24px;
  --syn-font-size-2x-large: 32px;
  --syn-font-size-3x-large: 40px;
  --syn-duration-extra-fast: 90ms;
  --syn-duration-fast: 150ms;
  --syn-duration-normal: 250ms;
  --syn-duration-slow: 350ms;
  --syn-duration-extra-slow: 500ms;
  --syn-line-height-denser: 1;
  --syn-line-height-dense: 1.2;
  --syn-line-height-normal: 1.4;
  --syn-line-height-loose: 1.8;
  --syn-line-height-looser: 2.2;
  --syn-font-weight-normal: 400;
  --syn-font-weight-semibold: 600;
  --syn-font-weight-bold: 700;
  --syn-shadow-medium: 0 1px 2px 0 rgba(49, 55, 58, 0.08), 0 1px 4px 0 rgba(49, 55, 58, 0.08), 0 2px 8px 0 rgba(49, 55, 58, 0.08);
  --syn-shadow-large: 0 0 3px 0 rgba(49, 55, 58, 0.12), 0 2px 6px 0 rgba(49, 55, 58, 0.12), 0 3px 8px 0 rgba(49, 55, 58, 0.16);
  --syn-shadow-x-large: 0 1px 4px 0 rgba(49, 55, 58, 0.12), 0 8px 24px 0 rgba(49, 55, 58, 0.12), 0 16px 48px 0 rgba(49, 55, 58, 0.16);
  --syn-shadow-overflow-down: 0 1px 4px 0 rgba(49, 55, 58, 0.12), 0 3px 8px 0 rgba(49, 55, 58, 0.12), 0 4px 12px 0 rgba(49, 55, 58, 0.16); /* Overflow Down */
  --syn-shadow-overflow-up: 0 -1px 4px 0 rgba(49, 55, 58, 0.12), 0 -3px 8px 0 rgba(49, 55, 58, 0.12), 0 -4px 12px 0 rgba(49, 55, 58, 0.16); /* Overflow Up */
  --syn-shadow-overflow-left: -1px 0 4px 0 rgba(49, 55, 58, 0.12), -3px 0 8px 0 rgba(49, 55, 58, 0.12), -4px 0 12px 0 rgba(49, 55, 58, 0.16); /* Overflow Left */
  --syn-shadow-overflow-right: 1px 0 4px 0 rgba(49, 55, 58, 0.12), 3px 0 8px 0 rgba(49, 55, 58, 0.12), 4px 0 12px 0 rgba(49, 55, 58, 0.16); /* Overflow Right */
  --syn-font-sans: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
      'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; /* Open Sans */
  --syn-font-mono: 'Roboto Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
  --syn-spacing-4x-small: calc(4px / 4);
  --syn-spacing-3x-small: calc(4px / 2);
  --syn-spacing-2x-small: calc(4px * 1);
  --syn-spacing-x-small: calc(4px * 2);
  --syn-spacing-small: calc(4px * 3);
  --syn-spacing-medium: calc(4px * 4);
  --syn-spacing-medium-large: calc(4px * 5);
  --syn-spacing-large: calc(4px * 6);
  --syn-spacing-x-large: calc(4px * 8);
  --syn-spacing-2x-large: calc(4px * 12);
  --syn-spacing-3x-large: calc(4px * 16);
  --syn-spacing-4x-large: calc(4px * 24);
  --syn-spacing-5x-large: calc(4px * 32);
  --syn-border-radius-none: 0px;
  --syn-border-radius-pill: 9999px;
  --syn-border-radius-circle: 9999px;
  --syn-border-radius-small: 4px;
  --syn-border-radius-medium: 8px;
  --syn-dimension-base: 4px;
  --syn-border-width-none: 0px; /* None */
  --syn-border-width-small: 1px; /* Small */
  --syn-border-width-medium: 2px; /* Medium */
  --syn-border-width-large: 3px; /* Large */
  --syn-border-width-x-large: 4px; /* X Large */
  --syn-font-sans-fallback: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --syn-opacity-50: 0.5; /* 50% */
  --syn-text-decoration-default: none;
  --syn-text-decoration-underline: underline;
  --syn-button-font-size-small: var(--syn-font-size-small);
  --syn-button-font-size-medium: var(--syn-font-size-medium);
  --syn-button-font-size-large: var(--syn-font-size-large);
  --syn-focus-ring-color: var(--syn-color-primary-400);
  --syn-focus-ring-width: var(--syn-border-width-medium);
  --syn-focus-ring-offset: var(--syn-spacing-3x-small);
  --syn-input-color: var(--syn-color-neutral-950);
  --syn-input-color-hover: var(--syn-color-neutral-950);
  --syn-input-color-focus: var(--syn-color-neutral-950);
  --syn-input-color-disabled: var(--syn-color-neutral-950);
  --syn-input-background-color: var(--syn-color-neutral-0);
  --syn-input-background-color-hover: var(--syn-input-background-color);
  --syn-input-background-color-focus: var(--syn-input-background-color);
  --syn-input-background-color-disabled: var(--syn-input-background-color);
  --syn-input-border-color: var(--syn-color-neutral-700);
  --syn-input-border-color-hover: var(--syn-color-neutral-950);
  --syn-input-border-color-focus: var(--syn-color-neutral-950);
  --syn-input-border-color-disables: var(--syn-color-neutral-700);
  --syn-input-border-radius-small: var(--syn-border-radius-none);
  --syn-input-border-radius-medium: var(--syn-border-radius-none);
  --syn-input-border-radius-large: var(--syn-border-radius-none);
  --syn-input-border-color-focus-error: var(--syn-color-error-700);
  --syn-input-width: var(--syn-border-width-small);
  --syn-input-icon-color: var(--syn-color-neutral-800);
  --syn-input-icon-color-hover: var(--syn-color-neutral-800);
  --syn-input-icon-color-focus: var(--syn-color-neutral-800);
  --syn-input-icon-icon-clearable-color: var(--syn-color-neutral-500);
  --syn-input-icon-icon-clearable-color-hover: var(--syn-color-neutral-500);
  --syn-input-icon-icon-clearable-color-focus: var(--syn-color-neutral-500);
  --syn-input-placeholder-color: var(--syn-color-neutral-500);
  --syn-input-placeholder-color-disabled: var(--syn-color-neutral-500);
  --syn-input-required-content: "*";
  --syn-input-required-content-color: var(--syn-input-label-color);
  --syn-input-required-content-offset: -2px;
  --syn-input-label-color: var(--syn-color-neutral-950);
  --syn-input-label-font-size-small: var(--syn-font-size-small);
  --syn-input-label-font-size-medium: var(--syn-font-size-medium);
  --syn-input-label-font-size-large: var(--syn-font-size-large);
  --syn-input-spacing-small: var(--syn-spacing-small);
  --syn-input-spacing-medium: var(--syn-spacing-medium);
  --syn-input-spacing-large: var(--syn-spacing-large);
  --syn-input-focus-ring-color: var(--syn-color-primary-400);
  --syn-input-focus-ring-offset: 0;
  --syn-input-focus-ring-error: var(--syn-color-error-400);
  --syn-input-disabled-opacity: 0.5;
  --syn-input-readonly-background-color: var(--syn-color-neutral-50);
  --syn-input-readonly-background-color-hover: var(--syn-color-neutral-50);
  --syn-input-readonly-background-color-focus: var(--syn-color-neutral-50);
  --syn-input-readonly-background-color-disabled: var(--syn-color-neutral-50);
  --syn-input-help-text-color: var(--syn-color-neutral-800);
  --syn-input-help-text-color-error: var(--syn-color-error-700);
  --syn-input-help-text-font-size-small: var(--syn-font-size-x-small);
  --syn-input-help-text-font-size-medium: var(--syn-font-size-small);
  --syn-input-help-text-font-size-large: var(--syn-font-size-medium);
  --syn-input-height-small: 36px;
  --syn-input-height-medium: var(--syn-spacing-2x-large);
  --syn-input-height-large: var(--syn-spacing-3x-large);
  --syn-input-readonly-color: var(--syn-color-neutral-800);
  --syn-input-readonly-color-disabled: var(--syn-color-neutral-800);
  --syn-input-readonly-color-hover: var(--syn-color-neutral-950);
  --syn-input-readonly-color-focus: var(--syn-color-neutral-950);
  --syn-input-font-size-small: var(--syn-font-size-small);
  --syn-input-font-size-medium: var(--syn-font-size-medium);
  --syn-input-font-size-large: var(--syn-font-size-large);
  --syn-link-color: var(--syn-color-primary-600);
  --syn-link-color-hover: var(--syn-color-primary-900);
  --syn-link-color-active: var(--syn-color-primary-950);
  --syn-link-quiet-color: var(--syn-typography-color-text);
  --syn-link-quiet-color-hover: var(--syn-color-primary-900);
  --syn-link-quiet-color-active: var(--syn-color-primary-950);
  --syn-overlay-background-color: rgba(0, 0, 0, 0.5);
  --syn-panel-background-color: var(--syn-color-neutral-0);
  --syn-panel-border-color: var(--syn-color-neutral-300);
  --syn-panel-border-width: var(--syn-border-width-small);
  --syn-toggle-size-small: 14px;
  --syn-toggle-size-medium: var(--syn-spacing-medium);
  --syn-toggle-size-large: var(--syn-spacing-large);
  --syn-tooltip-border-radius: var(--syn-border-radius-small);
  --syn-tooltip-background-color: var(--syn-color-neutral-950);
  --syn-tooltip-color: var(--syn-typography-color-text-inverted);
  --syn-tooltip-font-family: var(--syn-font-sans);
  --syn-tooltip-font-weight: var(--syn-font-weight-normal);
  --syn-tooltip-font-size: var(--syn-button-font-size-small);
  --syn-tooltip-line-height: var(--syn-line-height-normal);
  --syn-tooltip-padding: var(--syn-spacing-small);
  --syn-tooltip-arrow-size: 9px;
  --syn-body-x-small-regular: 400 12px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  --syn-body-x-small-semibold: 600 12px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  --syn-body-x-small-bold: 700 12px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  --syn-body-small-regular: 400 14px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  --syn-body-small-semibold: 600 14px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  --syn-body-small-bold: 700 14px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  --syn-body-medium-regular: 400 16px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  --syn-body-medium-semibold: 600 16px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  --syn-body-medium-bold: 700 16px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  --syn-body-large-regular: 400 20px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  --syn-body-large-semibold: 600 20px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  --syn-body-large-bold: 700 20px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  --syn-heading-large: 700 20px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  --syn-heading-x-large: 700 24px/1.2 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  --syn-heading-2x-large: 700 32px/1.2 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  --syn-heading-3x-large: 700 40px/1.2 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  --syn-typography-color-text: var(--syn-color-neutral-950);
  --syn-typography-color-text-inverted: var(--syn-color-neutral-0);
  --syn-color-primary-50: #f0f9ff;
  --syn-color-primary-100: #e0f1FE;
  --syn-color-primary-200: #b9e5fe;
  --syn-color-primary-300: #7cd1fd;
  --syn-color-primary-400: #36bbfa;
  --syn-color-primary-500: #0ca2eb;
  --syn-color-primary-600: #007cc1;
  --syn-color-primary-700: #0166a3;
  --syn-color-primary-800: #065786;
  --syn-color-primary-900: #0B486F;
  --syn-color-primary-950: #072E4A;
  --syn-color-success-50: #f5fde8;
  --syn-color-success-100: #e7facd;
  --syn-color-success-200: #D1F4A2;
  --syn-color-success-300: #B0EB6B;
  --syn-color-success-400: #93DD3E;
  --syn-color-success-500: #73C31F;
  --syn-color-success-600: #63B017;
  --syn-color-success-700: #437714;
  --syn-color-success-800: #395E16;
  --syn-color-success-900: #315017;
  --syn-color-success-950: #172C07;
  --syn-color-warning-50: #fefce8;
  --syn-color-warning-100: #fdf7c4;
  --syn-color-warning-200: #FCEC8c;
  --syn-color-warning-300: #f9da4b;
  --syn-color-warning-400: #f5c413;
  --syn-color-warning-500: #e5ae0d;
  --syn-color-warning-600: #c68608;
  --syn-color-warning-700: #9e5f0a;
  --syn-color-warning-800: #834b10;
  --syn-color-warning-900: #6f3e14;
  --syn-color-warning-950: #411f07;
  --syn-color-error-50: #fff0f2;
  --syn-color-error-100: #ffdee2;
  --syn-color-error-200: #ffc3c9;
  --syn-color-error-300: #ff98a4;
  --syn-color-error-400: #ff5d70;
  --syn-color-error-500: #ff2b44;
  --syn-color-error-600: #ea0823;
  --syn-color-error-700: #d0051d;
  --syn-color-error-800: #ab091c;
  --syn-color-error-900: #8D0f1e;
  --syn-color-error-950: #4e010a;
  --syn-color-accent-50: #FFFBEA;
  --syn-color-accent-100: #FFF2C5;
  --syn-color-accent-200: #FFE685;
  --syn-color-accent-300: #FFD246;
  --syn-color-accent-400: #FFBD1B;
  --syn-color-accent-500: #F39200;
  --syn-color-accent-600: #E27200;
  --syn-color-accent-700: #BB4D02;
  --syn-color-accent-800: #983B08;
  --syn-color-accent-900: #7C310B;
  --syn-color-accent-950: #481700;
  --syn-color-neutral-0: white;
  --syn-color-neutral-50: #f9fafb;
  --syn-color-neutral-100: #F2F3F6;
  --syn-color-neutral-200: #e8ebec;
  --syn-color-neutral-300: #d5dbdd;
  --syn-color-neutral-400: #bac2c6;
  --syn-color-neutral-500: #9ea9ae;
  --syn-color-neutral-600: #859298;
  --syn-color-neutral-700: #737f85;
  --syn-color-neutral-800: #5e676b;
  --syn-color-neutral-900: #4c5357;
  --syn-color-neutral-950: #31373a;
  --syn-color-neutral-1000: black;

  /* Fallbacks from Shoelace */
  --syn-border-radius-large: 0.5rem;
  --syn-border-radius-x-large: 1rem;
  --syn-shadow-x-small: 0 1px 2px hsla(240, 3.8%, 46.1%, 0.06);
  --syn-shadow-small: 0 1px 2px hsla(240, 3.8%, 46.1%, 0.12);
  --syn-transition-x-slow: 1000ms;
  --syn-transition-slow: 500ms;
  --syn-transition-medium: 250ms;
  --syn-transition-fast: 150ms;
  --syn-transition-x-fast: 50ms;
  --syn-font-serif: Georgia, "Times New Roman", serif;
  --syn-font-size-2x-small: 0.625rem;
  --syn-font-size-4x-large: 4.5rem;
  --syn-font-weight-light: 300;
  --syn-letter-spacing-denser: -0.03em;
  --syn-letter-spacing-dense: -0.015em;
  --syn-letter-spacing-normal: normal;
  --syn-letter-spacing-loose: 0.075em;
  --syn-letter-spacing-looser: 0.15em;
  --syn-focus-ring-style: solid;
  --syn-focus-ring: var(--syn-focus-ring-style) var(--syn-focus-ring-width) var(--syn-focus-ring-color);
  --syn-input-border-color-disabled: var(--syn-color-neutral-300);
  --syn-input-border-width: 1px;
  --syn-input-font-family: var(--syn-font-sans);
  --syn-input-font-weight: var(--syn-font-weight-normal);
  --syn-input-letter-spacing: var(--syn-letter-spacing-normal);
  --syn-z-index-drawer: 700;
  --syn-z-index-dialog: 800;
  --syn-z-index-dropdown: 900;
  --syn-z-index-toast: 950;
  --syn-z-index-tooltip: 1000;
}
/*!****************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[2]!./node_modules/@synergy-design-system/components/dist/styles/index.css?ngGlobalStyle ***!
  \****************************************************************************************************************************************************************************************************************************************************************************/
/**
 * @synergy-design-system/components version 2.7.3
 * SICK Global UX Foundation
 * 
 * This file is created automatically in the build process!
 * All changes applied will get lost!
 * To recreate it, please use "pnpm build"!
 */
/**
 * This file prevents the flash of unstyled components
 * @see https://web.dev/custom-elements-v1/#styling-a-custom-element
 * @todo: Each component should be defined using its default dimensions.
 *
 * This file is created automatically in the build process!
 * All changes applied will get lost!
 * To recreate it, please use "pnpm build"!
 */
syn-accordion:not(:defined),
syn-breadcrumb:not(:defined),
syn-details:not(:defined),
syn-divider:not(:defined),
syn-file:not(:defined),
syn-header:not(:defined),
syn-menu:not(:defined),
syn-menu-item:not(:defined),
syn-menu-label:not(:defined),
syn-nav-item:not(:defined),
syn-option:not(:defined),
syn-prio-nav:not(:defined),
syn-progress-bar:not(:defined),
syn-radio-group:not(:defined),
syn-range:not(:defined),
syn-select:not(:defined),
syn-side-nav:not(:defined),
syn-tab-group:not(:defined),
syn-tab-panel:not(:defined),
syn-textarea:not(:defined) {
  display: block;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
syn-alert:not(:defined),
syn-badge:not(:defined),
syn-breadcrumb-item:not(:defined),
syn-button:not(:defined),
syn-button-group:not(:defined),
syn-card:not(:defined),
syn-checkbox:not(:defined),
syn-dialog:not(:defined),
syn-drawer:not(:defined),
syn-dropdown:not(:defined),
syn-icon:not(:defined),
syn-icon-button:not(:defined),
syn-input:not(:defined),
syn-optgroup:not(:defined),
syn-popup:not(:defined),
syn-progress-ring:not(:defined),
syn-radio:not(:defined),
syn-radio-button:not(:defined),
syn-range-tick:not(:defined),
syn-spinner:not(:defined),
syn-switch:not(:defined),
syn-tab:not(:defined),
syn-tag:not(:defined),
syn-tooltip:not(:defined) {
  display: inline-block;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
/**
 * ---------------------------------------------------------------------
 * 🔒 AUTOGENERATED BY VENDORISM
 * Removing this comment will prevent it from being managed by it.
 * ---------------------------------------------------------------------
 */
/* stylelint-disable */
/*
 * This file contains utility classes that can't be contained in a component and must be applied to the light DOM. None
 * of the rules in this stylesheet should target component tags or HTML tags, and all classes *must* start with ".syn-"
 * to reduce the possibility of collisions.
 */
@supports (scrollbar-gutter: stable) {
  .syn-scroll-lock {
    scrollbar-gutter: var(--syn-scroll-lock-gutter) !important;
  }

  .syn-scroll-lock body {
    overflow: hidden !important;
  }
}
/** This can go away once Safari has scrollbar-gutter support. */
@supports not (scrollbar-gutter: stable) {
  .syn-scroll-lock body {
    padding-right: var(--syn-scroll-lock-size) !important;
    overflow: hidden !important;
  }
}
.syn-toast-stack {
  position: fixed;
  top: 0;
  inset-inline-end: 0;
  z-index: var(--syn-z-index-toast);
  width: 28rem;
  max-width: 100%;
  max-height: 100%;
  overflow: auto;
}
.syn-toast-stack syn-alert {
  margin: var(--syn-spacing-small);
}
.syn-toast-stack syn-alert::part(base) {
  box-shadow: var(--syn-shadow-large);
}
/* stylelint-enable */
/*!*****************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[2]!./node_modules/@synergy-design-system/styles/dist/index.css?ngGlobalStyle ***!
  \*****************************************************************************************************************************************************************************************************************************************************************/
/**
 * @synergy-design-system/styles version 1.2.0
 * SICK Global UX Foundation
 */
/**
 * Link styles
 * @variant {small | medium | large} syn-link The size of the link
 * @boolean { false } syn-link--quiet Applies the quiet link styling
 * @boolean { false } syn-link--disabled Applies the disabled link styling
 */
.syn-link {
  /* The size of the icon */
  --syn-link-icon-size: 1em;

  /* The gap that is used when there are pre or suffix icons */
  --syn-link-icon-gap: 0.25em;

  /* The font size used for the link */
  --syn-link-font-size: 1em;

  color: var(--syn-link-color);
  display: inline;
  font-family: var(--syn-font-sans);
  font-size: var(--syn-link-font-size);
  text-decoration: underline;
}
.syn-link:has(syn-icon) {
  align-items: center;
  display: inline-flex;
  gap: var(--syn-link-icon-gap);
}
.syn-link syn-icon {
  font-size: var(--syn-link-icon-size);
}
.syn-link:not(.syn-link--disabled):hover {
  color: var(--syn-link-color-hover);
}
.syn-link:not(.syn-link--disabled):active {
  color: var(--syn-link-color-active);
}
.syn-link:not(.syn-link--disabled):focus-visible {
  outline: var(--syn-focus-ring);
  outline-offset: var(--syn-focus-ring-offset);
}
/* Overrides for smaller links */
.syn-link--small {
  --syn-link-icon-size: var(--syn-spacing-medium);
  --syn-link-icon-gap: var(--syn-spacing-2x-small);
  --syn-link-font-size: var(--syn-font-size-small);
}
/*
 * Overrides for medium links.
 */
.syn-link--medium {
  --syn-link-icon-size: var(--syn-spacing-large);
  --syn-link-icon-gap: var(--syn-spacing-x-small);
  --syn-link-font-size: var(--syn-font-size-medium);
}
.syn-link--large {
  --syn-link-icon-size: var(--syn-spacing-x-large);
  --syn-link-icon-gap: var(--syn-spacing-small);
  --syn-link-font-size: var(--syn-font-size-large);
}
/* Quite Variant of links use other colors */
.syn-link--quiet:not(.syn-link--disabled) {
  color: var(--syn-link-quiet-color);
}
.syn-link--quiet:not(.syn-link--disabled):hover {
  color: var(--syn-link-quiet-color-hover);
}
.syn-link--quiet:not(.syn-link--disabled):active {
  color: var(--syn-link-quiet-color-active);
}
/* Styling for disabled links */
.syn-link--disabled:not([href]),
a.syn-link:not([href]) {
  cursor: not-allowed;
  opacity: var(--syn-input-disabled-opacity);
}
/**
 * Core typographic styles
 */
/**
 * Typographic text classes
 * @variant {x-small | small | medium | large} syn-body The font size of the body text
 */
.syn-body--x-small {
  font: var(--syn-body-x-small-regular);
}
.syn-body--small {
  font: var(--syn-body-small-regular);
}
.syn-body--medium {
  font: var(--syn-body-medium-regular);
}
.syn-body--large {
  font: var(--syn-body-large-regular);
}
/**
 * Typographic headline classes
 * @variant {3x-large | 2x-large | x-large | large} syn-heading The size of the headline
 */
.syn-heading--large {
  font: var(--syn-heading-large);
}
.syn-heading--x-large {
  font: var(--syn-heading-x-large);
}
.syn-heading--2x-large {
  font: var(--syn-heading-2x-large);
}
.syn-heading--3x-large {
  font: var(--syn-heading-3x-large);
}
/**
 * Typographic weight classes
 * @variant {normal | semibold | bold} syn-weight The font weight to apply
 */
.syn-weight--normal {
  font-weight: var(--syn-font-weight-normal);
}
.syn-weight--semibold {
  font-weight: var(--syn-font-weight-semibold);
}
.syn-weight--bold {
  font-weight: var(--syn-font-weight-bold);
}
/**
 * Table / table cell styles
 */
/**
 * Table classes
 * @boolean { false } syn-table Applies the styling to a table element
 * @boolean { true } syn-table--default Applies all default table stylings to a table and its children
 * @boolean { false } syn-table--alternating Applies all alternate table stylings to a table and its children
 * @boolean { false } syn-table--border Applies all border table stylings to a table and its children
 */
.syn-table,
.syn-table--default,
.syn-table--alternating,
.syn-table--border {
  all: unset;
  border-collapse: collapse;
  border-spacing: var(--syn-border-width-none);
  display: table;
}
/**
 * Table cell classes
 *
 * @boolean { true } syn-table-cell Applies the table cell styling
 * @boolean syn-table-cell--alternating Applies an alternating style to help separate rows visually
 * @boolean syn-table-cell--border-start Applies a border to the left of the table cell
 * @boolean syn-table-cell--border-end Applies a border to the right of the table cell
 * @boolean syn-table-cell--border-top Applies a border to the top of the table cell
 * @boolean syn-table-cell--border-bottom Applies a border to the bottom of the table cell
 * @boolean syn-table-cell--header Applies the table cell header styling
 * @variant { NO_DEFAULT | bottom | top | start | end } syn-table-cell--shadow Applies the selected shadow to the table cell
 * @boolean syn-table-cell--shadow-active Displays the table shadow
 */
.syn-table-cell,
.syn-table--default td,
.syn-table--alternating td,
.syn-table--border td {
	background-color: var(--syn-color-neutral-0);
	color: var(--syn-typography-color-text);
	font: var(--syn-body-small-regular);
	height: var(--syn-spacing-large);
	padding: var(--syn-spacing-small) var(--syn-spacing-medium);
	text-align: start;
	vertical-align: top;
}
.syn-table-cell--alternating,
.syn-table--alternating tr:nth-child(even) > td {
	background-color: var(--syn-color-neutral-50);
}
/* Border */
.syn-table-cell--border-start {
	border-inline-start: var(--syn-border-width-small) solid var(--syn-color-neutral-300);
}
.syn-table-cell--border-end,
.syn-table--border tr > td:not(:last-child) {
	border-inline-end: var(--syn-border-width-small) solid var(--syn-color-neutral-300);
}
.syn-table-cell--border-top {
	border-top: var(--syn-border-width-small) solid var(--syn-color-neutral-300);
}
.syn-table-cell--border-bottom,
.syn-table--border tr:not(:last-child) > td {
	border-bottom: var(--syn-border-width-small) solid var(--syn-color-neutral-300);
}
/* Header */
.syn-table-cell--header,
.syn-table--default th,
.syn-table--alternating th,
.syn-table--border th {
	background-color: var(--syn-color-neutral-200);
	color: var(--syn-typography-color-text);
	font: var(--syn-body-small-semibold);
	height: var(--syn-spacing-large);
	padding: var(--syn-spacing-small) var(--syn-spacing-medium);
	text-align: start;
	vertical-align: top;
}
/* Shadow */
.syn-table-cell--shadow-bottom::after,
.syn-table-cell--shadow-top::after,
.syn-table-cell--shadow-start::after,
.syn-table-cell--shadow-end::after {
	/* Fallback for no color-mix support */
	--shadow-start: rgb(49 55 58 / 0%) ;
	--shadow-end: rgb(49 55 58 / 15%);

	content: '';
	opacity: 0;
	pointer-events: none;
	position: absolute;
	transition-duration: 0.25s;
	transition-property: opacity;
	transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
}
/* I can not use var(--syn-color-neutral-950) here for some reason and therefore `grey`is used. If doing this, the fallback will not be used */
@supports (background: color-mix(in srgb, grey 0%, transparent)) {
	.syn-table-cell--shadow-bottom::after,
	.syn-table-cell--shadow-top::after,
	.syn-table-cell--shadow-start::after,
	.syn-table-cell--shadow-end::after {
		--shadow-start: color-mix(in srgb, var(--syn-color-neutral-950) 0%, transparent);
		--shadow-end: color-mix(in srgb, var(--syn-color-neutral-950) 15%, transparent);  
	}
}
.syn-table-cell--shadow-bottom::after,
.syn-table-cell--shadow-top::after {
	height: var(--syn-spacing-x-small);
	left: 0;
	right: 0;
}
.syn-table-cell--shadow-start::after,
.syn-table-cell--shadow-end::after {
	bottom: 0;
	top: 0;
	width: var(--syn-spacing-x-small);
}
.syn-table-cell--shadow-bottom::after {
	background: linear-gradient(0deg, var(--shadow-start) 0%, var(--shadow-end) 100%);
	bottom: calc(var(--syn-spacing-x-small) * -1);
}
.syn-table-cell--shadow-top::after {
	background: linear-gradient(180deg,  var(--shadow-start) 0%, var(--shadow-end) 100%);
	top: calc(var(--syn-spacing-x-small) * -1);
}
.syn-table-cell--shadow-start::after,
:dir(rtl) .syn-table-cell--shadow-end::after {
	background: linear-gradient(90deg,  var(--shadow-start) 0%, var(--shadow-end) 100%);
	left: calc(var(--syn-spacing-x-small) * -1);
	right: unset;
}
/* stylelint-disable-next-line no-descending-specificity */
.syn-table-cell--shadow-end::after,
:dir(rtl) .syn-table-cell--shadow-start::after {
	background: linear-gradient(270deg,  var(--shadow-start) 0%, var(--shadow-end) 100%);
	left: unset;
	right: calc(var(--syn-spacing-x-small) * -1);
}
.syn-table-cell--shadow-active::after {
	opacity: 1;
}


/*# sourceMappingURL=styles.b5a8b57bd7cba0a3.css.map*/