genesys-spark 4.64.4 → 4.65.1

package/dist/css/legacy/ui.css

@@ -0,0 +1,1011 @@
+:root {
+  --gse-ui-formControl-input-contentText: 400 12px/18px Roboto;
+  --gse-ui-formControl-input-default-border: 1px solid #a3a7b0;
+  --gse-ui-formControl-input-hover-border: 1px solid #3742a2;
+  --gse-ui-formControl-input-active-border: 1px solid #252e78;
+  --gse-ui-formControl-input-error-border: 1px solid #e22245;
+  --gse-ui-formControl-input-disabled-border: 1px solid #a3a7b0;
+  --gse-ui-formControl-input-disabled-opacity: 0.5;
+  --gse-ui-formControl-input-borderRadius: 4px;
+  --gse-ui-formControl-input-backgroundColor: #ffffff;
+  --gse-ui-formControl-input-placeholderColor: #626e84;
+  --gse-ui-formControl-input-suggestionColor: #626e84;
+  --gse-ui-formControl-input-populatedColor: #1b2c48;
+  --gse-ui-formControl-input-inputClearable-inputClearableColor: #626e84;
+  --gse-ui-formControl-input-inputClearable-size: 16px;
+  --gse-ui-formControl-input-gap: 12px;
+  --gse-ui-formControl-input-top: 8px;
+  --gse-ui-formControl-input-padding: 8px 12px;
+  --gse-ui-formControl-input-prefixSufix-text: 700 14px/20px Roboto;
+  --gse-ui-formControl-input-prefixSufix-height: 32px;
+  --gse-ui-formControl-input-prefixSufix-defaultColor: #626e84;
+  --gse-ui-formControl-input-textfield-height: 32px;
+  --gse-ui-formControl-input-textfield-minWidth: 45px;
+  --gse-ui-formControl-input-colorPicker-size: 32px;
+  --gse-ui-formControl-input-inputIcon-size: 16px;
+  --gse-ui-formControl-input-inputIcon-defaultColor: #3e5374;
+  --gse-ui-formControl-input-inputIcon-iconEndColor: #626e84;
+  --gse-ui-formControl-input-focusRing-defaultColor: #7b88f7;
+  --gse-ui-formControl-input-textarea-height: 96px;
+  --gse-ui-formControl-input-focus-border: 3px solid #7b88f7;
+  --gse-ui-formControl-input-spinbuttonIcon-size: 16px;
+  --gse-ui-formControl-input-focusSelection-backgroundColor: #7b88f7;
+  --gse-ui-formControl-label-padding: 0 0 8px 0;
+  --gse-ui-formControl-label-gap: 4px;
+  --gse-ui-formControl-label-text: 400 12px/18px Roboto;
+  --gse-ui-formControl-label-textBold: 600 12px/18px Roboto;
+  --gse-ui-formControl-label-labelColor: #1b2c48;
+  --gse-ui-formControl-label-indicator-text: 400 12px/18px "Noto Sans";
+  --gse-ui-formControl-label-indicator-requiredColor: #e22245;
+  --gse-ui-formControl-label-indicator-optionalColor: #3e5374;
+  --gse-ui-formControl-label-iconSize: 16px;
+  --gse-ui-formControl-label-tooltipTrigger-optionalColor: #3e5374;
+  --gse-ui-formControl-label-tooltipTrigger-borderRadius: 2px;
+  --gse-ui-formControl-group-gapItems: 8px;
+  --gse-ui-formControl-helper-gap: 4px;
+  --gse-ui-formControl-helper-helperText: 400 12px/18px Roboto;
+  --gse-ui-formControl-helper-padding: 8px 0 0 0;
+  --gse-ui-formControl-helper-icon-padding: 1px 0 1px 0;
+  --gse-ui-formControl-helper-paddingSmall: 4px 0 0 0;
+  --gse-ui-formControl-helper-errorPadding: 4px 0 0 0;
+  --gse-ui-formControl-helper-defaultColor: #626e84;
+  --gse-ui-formControl-helper-errorColor: #e22245;
+  --gse-ui-formControl-helper-iconSize: 16px;
+  --gse-ui-formControl-spinButton-gap: 8px;
+  --gse-ui-formControl-spinner-track: #2a60c8;
+  --gse-ui-formControl-spinner-errorColor: #deeaff;
+  --gse-ui-formControl-textarea-padding: 8px 12px;
+  --gse-ui-formControl-focusRing-borderRadius: 4px;
+  --gse-ui-card-backgroundColor: #ffffff;
+  --gse-ui-card-borderRadius: 16px;
+  --gse-ui-card-borderRadiusCopy: 16px;
+  --gse-ui-card-default-border: 1px solid #c6c8ce;
+  --gse-ui-card-raised-border: 1px solid #c6c8ce;
+  --gse-ui-card-raised-boxShadow: 0 0 6px 1px rgba(35,57,92,0.12);
+  --gse-ui-card-padding: 24px;
+  --gse-ui-card-borderless-border: 1px solid transparent;
+  --gse-ui-tooltip-light-border: 1px solid #b4bccb;
+  --gse-ui-tooltip-light-backgroundColor: #ffffff;
+  --gse-ui-tooltip-light-foregroundColor: #2e394c;
+  --gse-ui-tooltip-dark-border: 1px solid #2e394c;
+  --gse-ui-tooltip-dark-backgroundColor: #283243;
+  --gse-ui-tooltip-dark-foregroundColor: #ffffff;
+  --gse-ui-tooltip-dark-iconColor: #ffffff;
+  --gse-ui-tooltip-boxShadow: 0 0 6px 1px rgba(35,57,92,0.12);
+  --gse-ui-tooltip-padding: 8px 12px;
+  --gse-ui-tooltip-height: 32px;
+  --gse-ui-tooltip-gap: 8px;
+  --gse-ui-tooltip-borderRadius: 4px;
+  --gse-ui-tooltip-text: 400 12px/16px "Noto Sans";
+  --gse-ui-tag-borderRadius: 16px;
+  --gse-ui-tag-default-backgroundColor: #23395d;
+  --gse-ui-tag-default-foregroundColor: #ffffff;
+  --gse-ui-tag-accent1-backgroundColor: #e4e5e7;
+  --gse-ui-tag-accent1-foregroundColor: #1b2c48;
+  --gse-ui-tag-accent2-backgroundColor: #90d3dd;
+  --gse-ui-tag-accent2-foregroundColor: #1b2c48;
+  --gse-ui-tag-accent3-backgroundColor: #0c6d7e;
+  --gse-ui-tag-accent3-foregroundColor: #ffffff;
+  --gse-ui-tag-accent4-backgroundColor: #547688;
+  --gse-ui-tag-accent4-foregroundColor: #ffffff;
+  --gse-ui-tag-accent5-backgroundColor: #a5cae0;
+  --gse-ui-tag-accent5-foregroundColor: #1b2c48;
+  --gse-ui-tag-accent6-backgroundColor: #b5bfe6;
+  --gse-ui-tag-accent6-foregroundColor: #1b2c48;
+  --gse-ui-tag-text: 600 12px/18px Roboto;
+  --gse-ui-tag-padding: 0 12px;
+  --gse-ui-tag-removable-padding: 0 8px 0 12px;
+  --gse-ui-tag-removable-gap: 4px;
+  --gse-ui-tag-accent7-backgroundColor: #a05195;
+  --gse-ui-tag-accent7-foregroundColor: #ffffff;
+  --gse-ui-tag-height: 20px;
+  --gse-ui-tag-accent8-backgroundColor: #f95d6a;
+  --gse-ui-tag-accent8-foregroundColor: #1b2c48;
+  --gse-ui-tag-accent9-backgroundColor: #fe8f85;
+  --gse-ui-tag-accent9-foregroundColor: #1b2c48;
+  --gse-ui-tag-accent10-backgroundColor: #ffc650;
+  --gse-ui-tag-accent10-foregroundColor: #1b2c48;
+  --gse-ui-tag-button-size: 16px;
+  --gse-ui-tag-disabled-opacity: 0.5;
+  --gse-ui-badge-borderRadius: 16px;
+  --gse-ui-badge-text: 400 12px/18px Roboto;
+  --gse-ui-badge-height: 20px;
+  --gse-ui-badge-padding: 2px 12px;
+  --gse-ui-badge-gap: 4px;
+  --gse-ui-badge-info-bold-backgroundColor: #6e5ddb;
+  --gse-ui-badge-info-bold-foregroundColor: #ffffff;
+  --gse-ui-badge-info-regular-backgroundColor: #c5bef1;
+  --gse-ui-badge-info-regular-foregroundColor: #1b2c48;
+  --gse-ui-badge-success-bold-backgroundColor: #09b581;
+  --gse-ui-badge-success-bold-foregroundColor: #1b2c48;
+  --gse-ui-badge-success-regular-backgroundColor: #9de1cd;
+  --gse-ui-badge-success-regular-foregroundColor: #1b2c48;
+  --gse-ui-badge-warning-bold-backgroundColor: #f8c73e;
+  --gse-ui-badge-warning-bold-foregroundColor: #1b2c48;
+  --gse-ui-badge-warning-regular-backgroundColor: #fce9b2;
+  --gse-ui-badge-warning-regular-foregroundColor: #1b2c48;
+  --gse-ui-badge-error-bold-backgroundColor: #e22245;
+  --gse-ui-badge-error-bold-foregroundColor: #ffffff;
+  --gse-ui-badge-error-regular-backgroundColor: #f3a7b5;
+  --gse-ui-badge-error-regular-foregroundColor: #1b2c48;
+  --gse-ui-icon-small-size: 16px;
+  --gse-ui-icon-medium-size: 24px;
+  --gse-ui-icon-large-size: 32px;
+  --gse-ui-icon-color: #2e394c;
+  --gse-ui-alert-padding: 8px 16px;
+  --gse-ui-alert-gap: 8px;
+  --gse-ui-alert-info-backgroundColor: #e2dff8;
+  --gse-ui-alert-info-foregroundColor: #1b2c48;
+  --gse-ui-alert-info-iconColor: #6e5ddb;
+  --gse-ui-alert-info-border: 1px solid #c5bef1;
+  --gse-ui-alert-success-backgroundColor: #cef0e6;
+  --gse-ui-alert-success-foregroundColor: #1b2c48;
+  --gse-ui-alert-success-iconColor: #09b581;
+  --gse-ui-alert-success-border: 1px solid #9de1cd;
+  --gse-ui-alert-warning-backgroundColor: #fef4d8;
+  --gse-ui-alert-warning-foregroundColor: #1b2c48;
+  --gse-ui-alert-warning-iconColor: #f8c73e;
+  --gse-ui-alert-warning-border: 1px solid #fce9b2;
+  --gse-ui-alert-error-backgroundColor: #f9d3da;
+  --gse-ui-alert-error-foregroundColor: #1b2c48;
+  --gse-ui-alert-error-iconColor: #e22245;
+  --gse-ui-alert-error-border: 1px solid #f3a7b5;
+  --gse-ui-alert-text: 400 12px/18px Roboto;
+  --gse-ui-alert-emphasisText: 700 12px/18px Roboto;
+  --gse-ui-alert-borderRadius: 4px;
+  --gse-ui-rating-default-color: #767c8d;
+  --gse-ui-rating-active-color: #4856cb;
+  --gse-ui-rating-hover-color: #3742a2;
+  --gse-ui-rating-disabled-color: #767c8d;
+  --gse-ui-rating-disabled-opacity: 0.5;
+  --gse-ui-rating-size: 16px;
+  --gse-ui-rating-star-gap: 8px;
+  --gse-ui-breadcrumbs-primary-height: 20px;
+  --gse-ui-breadcrumbs-primary-separator-padding: 0 12px;
+  --gse-ui-breadcrumbs-primary-separator-typography: 700 16px/20px Roboto;
+  --gse-ui-breadcrumbs-secondary-height: 18px;
+  --gse-ui-breadcrumbs-secondary-separator-padding: 0 8px;
+  --gse-ui-breadcrumbs-secondary-separator-typography: 700 14px/18px Roboto;
+  --gse-ui-breadcrumbs-separator-color: #a3a7b0;
+  --gse-ui-breadcrumbs-borderRadius: 0rem;
+  --gse-ui-segmentedControl-button-padding: 0 12px;
+  --gse-ui-segmentedControl-button-gap: 8px;
+  --gse-ui-segmentedControl-button-start-borderRadius: 4px 0 0 4px;
+  --gse-ui-segmentedControl-button-middle-borderRadius: 0rem;
+  --gse-ui-segmentedControl-button-end-borderRadius: 0 4px 4px 0;
+  --gse-ui-segmentedControl-button-disabled-opacity: 0.5;
+  --gse-ui-segmentedControl-button-disabled-backgroundColor: rgba(0, 0, 0, 0);
+  --gse-ui-segmentedControl-button-disabled-foregroundColor: #4856cb;
+  --gse-ui-segmentedControl-button-default-backgroundColor: rgba(0, 0, 0, 0);
+  --gse-ui-segmentedControl-button-default-foregroundColor: #4856cb;
+  --gse-ui-segmentedControl-button-hover-backgroundColor: #dee1fd;
+  --gse-ui-segmentedControl-button-hover-foregroundColor: #3742a2;
+  --gse-ui-segmentedControl-button-active-backgroundColor: #4856cb;
+  --gse-ui-segmentedControl-button-active-foregroundColor: #ffffff;
+  --gse-ui-segmentedControl-borderRadius: 4px;
+  --gse-ui-segmentedControl-height: 32px;
+  --gse-ui-segmentedControl-border: 1px solid #4856cb;
+  --gse-ui-segmentedControl-divider: 1px solid #4856cb;
+  --gse-ui-segmentedControl-iconOnly-padding: 0 8px;
+  --gse-ui-segmentedControl-focus-offset: 0rem;
+  --gse-ui-formFooter-page-desktop-bottomPadding: 16px; /* The recommended vertical padding for the form footer content. */
+  --gse-ui-formFooter-page-desktop-topPadding: 16px; /* The recommended vertical padding for the form footer content. */
+  --gse-ui-formFooter-page-desktop-horizontalPadding: 32px; /* The recommended vertical padding for the form footer content. */
+  --gse-ui-formFooter-page-desktop-gap: 16px; /* The recommended vertical padding for the form footer content. */
+  --gse-ui-formFooter-page-mobile-bottomPadding: 16px; /* The recommended vertical padding for the form footer content. */
+  --gse-ui-formFooter-page-mobile-topPadding: 16px; /* The recommended vertical padding for the form footer content. */
+  --gse-ui-formFooter-page-mobile-horizontalPadding: 16px; /* The recommended vertical padding for the form footer content. */
+  --gse-ui-formFooter-page-mobile-gap: 16px; /* The recommended vertical padding for the form footer content. */
+  --gse-ui-formFooter-separator: 1px solid #c6c8ce; /* This is the recommended style for the form fotter separator/divider. */
+  --gse-ui-formFooter-sideSheet-desktop-bottomPadding: 16px; /* The recommended vertical padding for the form footer content. */
+  --gse-ui-formFooter-sideSheet-desktop-topPadding: 16px; /* The recommended vertical padding for the form footer content. */
+  --gse-ui-formFooter-sideSheet-desktop-horizontalPadding: 24px; /* The recommended vertical padding for the form footer content. */
+  --gse-ui-formFooter-sideSheet-desktop-gap: 16px; /* The recommended vertical padding for the form footer content. */
+  --gse-ui-formFooter-modal-desktop-bottomPadding: 16px; /* The recommended vertical padding for the form footer content. */
+  --gse-ui-formFooter-modal-desktop-topPadding: 16px; /* The recommended vertical padding for the form footer content. */
+  --gse-ui-formFooter-modal-desktop-horizontalPadding: 32px; /* The recommended vertical padding for the form footer content. */
+  --gse-ui-formFooter-modal-desktop-gap: 16px; /* The recommended vertical padding for the form footer content. */
+  --gse-ui-formFooter-backgroundColor: #ffffff;
+  --gse-ui-formFooter-border: 1px solid #4856cb;
+  --gse-ui-copyToClipboard-label-active-backgroundColor: #dee1fd;
+  --gse-ui-copyToClipboard-label-foregroundColor: #1b2c48;
+  --gse-ui-copyToClipboard-label-padding: 2px 4px;
+  --gse-ui-copyToClipboard-label-borderRadius: 4px;
+  --gse-ui-copyToClipboard-label-text: 400 14px/20px Roboto;
+  --gse-ui-copyToClipboard-gap: 16px;
+  --gse-ui-copyToClipboard-contentContainer-gap: 2px;
+  --gse-ui-copyToClipboard-iconContainer-padding: 4px;
+  --gse-ui-copyToClipboard-tooltipIcon-success-foregroundColor: #09b581;
+  --gse-ui-copyToClipboard-tooltipIcon-error-foregroundColor: #e22245;
+  --gse-ui-dismissButton-foregroundColor: #626e84;
+  --gse-ui-button-default-height: 32px;
+  --gse-ui-button-default-padding: 0 12px;
+  --gse-ui-button-default-paddingIconOnly: 8px;
+  --gse-ui-button-iconOnly-width: 32px;
+  --gse-ui-button-icon-size: 16px;
+  --gse-ui-button-compact-height: 24px;
+  --gse-ui-button-compact-padding: 0 12px;
+  --gse-ui-button-compact-paddingIconOnly: 4px;
+  --gse-ui-button-gap: 8px;
+  --gse-ui-button-primary-default-backgroundColor: #2a60c8;
+  --gse-ui-button-primary-default-foregroundColor: #ffffff;
+  --gse-ui-button-primary-hover-backgroundColor: #2754ac;
+  --gse-ui-button-primary-hover-foregroundColor: #ffffff;
+  --gse-ui-button-primary-active-backgroundColor: #23478f;
+  --gse-ui-button-primary-active-foregroundColor: #ffffff;
+  --gse-ui-button-secondary-default-backgroundColor: #e8ecf2;
+  --gse-ui-button-secondary-default-foregroundColor: #2e394c;
+  --gse-ui-button-secondary-hover-backgroundColor: #d7dce5;
+  --gse-ui-button-secondary-hover-foregroundColor: #2e394c;
+  --gse-ui-button-secondary-active-backgroundColor: #e2e6ee;
+  --gse-ui-button-secondary-active-foregroundColor: #2e394c;
+  --gse-ui-button-tertiary-default-backgroundColor: rgba(0, 0, 0, 0);
+  --gse-ui-button-tertiary-default-foregroundColor: #2e394c;
+  --gse-ui-button-tertiary-default-border: 1px solid #2e394c;
+  --gse-ui-button-tertiary-hover-backgroundColor: #2754ac;
+  --gse-ui-button-tertiary-hover-foregroundColor: #ffffff;
+  --gse-ui-button-tertiary-active-backgroundColor: #23478f;
+  --gse-ui-button-tertiary-active-foregroundColor: #ffffff;
+  --gse-ui-button-ghost-default-backgroundColor: rgba(0, 0, 0, 0);
+  --gse-ui-button-ghost-default-foregroundColor: #2e394c;
+  --gse-ui-button-ghost-hover-backgroundColor: #d7dce5;
+  --gse-ui-button-ghost-hover-foregroundColor: #2e394c;
+  --gse-ui-button-ghost-active-backgroundColor: #e2e6ee;
+  --gse-ui-button-ghost-active-foregroundColor: #2e394c;
+  --gse-ui-button-danger-default-backgroundColor: #ea0b0b;
+  --gse-ui-button-danger-default-foregroundColor: #ffffff;
+  --gse-ui-button-danger-hover-backgroundColor: #8f0707;
+  --gse-ui-button-danger-hover-foregroundColor: #ffffff;
+  --gse-ui-button-danger-active-backgroundColor: #520404;
+  --gse-ui-button-danger-active-foregroundColor: #ffffff;
+  --gse-ui-button-borderRadius: 4px;
+  --gse-ui-button-disabled-opacity: 0.5;
+  --gse-ui-button-text: 700 12px/18px "Noto Sans";
+  --gse-ui-actionButton-rightSegment-size: 32px;
+  --gse-ui-actionButton-rightSegment-padding: 0 8px;
+  --gse-ui-actionButton-rightSegment-borderRadius: 0 4px 4px 0;
+  --gse-ui-actionButton-rightSegment-focusBorderRadius: 0 8px 8px 0;
+  --gse-ui-actionButton-height: 32px;
+  --gse-ui-actionButton-focus-height: 40px;
+  --gse-ui-actionButton-leftSegment-gap: 8px;
+  --gse-ui-actionButton-leftSegment-padding: 0 16px;
+  --gse-ui-actionButton-leftSegment-focusBorderRadius: 8px 0 0 8px;
+  --gse-ui-actionButton-leftSegment-borderRadius: 4px 0 0 4px;
+  --gse-ui-actionButton-borderRadius: 4px;
+  --gse-ui-actionButton-tertiary-divider: 2px solid #2a60c8;
+  --gse-ui-actionButton-primary-divider: 2px solid #ffffff;
+  --gse-ui-actionButton-secondary-divider: 2px solid #ffffff;
+  --gse-ui-actionButton-danger-divider: 2px solid #ffffff;
+  --gse-ui-links-asButton-height: 32px;
+  --gse-ui-links-asButton-padding: 12px;
+  --gse-ui-links-asButton-gap: 8px;
+  --gse-ui-links-asButton-text: 700 14px/20px Roboto;
+  --gse-ui-links-asButton-underlinedText: 700 14px/20px Roboto;
+  --gse-ui-links-inLine-medium-height: 20px;
+  --gse-ui-links-inLine-medium-text: 600 14px/20px "Noto Sans";
+  --gse-ui-links-inLine-medium-underlinedText: 600 14px/20px "Noto Sans";
+  --gse-ui-links-inLine-small-height: 18px;
+  --gse-ui-links-inLine-small-text: 600 12px/18px "Noto Sans";
+  --gse-ui-links-inLine-small-underlinedText: 600 12px/18px "Noto Sans";
+  --gse-ui-links-inLine-padding: 4px;
+  --gse-ui-links-icon: 16px;
+  --gse-ui-links-default-foregroundColor: #2a60c8;
+  --gse-ui-links-disabled-foregroundColor: #2a60c8;
+  --gse-ui-links-hover-foregroundColor: #2754ac;
+  --gse-ui-links-active-foregroundColor: #23478f;
+  --gse-ui-links-visited-foregroundColor: #8452cf;
+  --gse-ui-links-borderRadius: 0rem;
+  --gse-ui-radioButton-icon-default-unselectedForegroundColor: #767c8d;
+  --gse-ui-radioButton-icon-default-selectedForegroundColor: #4856cb;
+  --gse-ui-radioButton-icon-hover-foregroundColor: #3742a2;
+  --gse-ui-radioButton-icon-active-foregroundColor: #252e78;
+  --gse-ui-radioButton-icon-error-foregroundColor: #e22245;
+  --gse-ui-radioButton-icon-height: 16px;
+  --gse-ui-radioButton-icon-width: 16px;
+  --gse-ui-radioButton-label-foregroundColor: #1b2c48;
+  --gse-ui-radioButton-label-text: 400 16px/18px Roboto;
+  --gse-ui-radioButton-gap: 8px;
+  --gse-ui-radioButton-helper-padding: 4px 0 0 24px;
+  --gse-ui-radioButton-helper-gap: 8px;
+  --gse-ui-radioButton-disabled-opacity: 0.5;
+  --gse-ui-radioButton-focus-border: 2px solid #7b88f7;
+  --gse-ui-radioButton-focus-borderRadius: 16px;
+  --gse-ui-radioButton-focus-offset: 1px;
+  --gse-ui-checkbox-icon-default-unselectedForegroundColor: #767c8d;
+  --gse-ui-checkbox-icon-default-selectedForegroundColor: #4856cb;
+  --gse-ui-checkbox-icon-hover-foregroundColor: #3742a2;
+  --gse-ui-checkbox-icon-active-foregroundColor: #252e78;
+  --gse-ui-checkbox-icon-error-foregroundColor: #e22245;
+  --gse-ui-checkbox-icon-height: 16px;
+  --gse-ui-checkbox-icon-width: 16px;
+  --gse-ui-checkbox-label-foregroundColor: #1b2c48;
+  --gse-ui-checkbox-label-text: 400 16px/18px Roboto;
+  --gse-ui-checkbox-helper-padding: 4px 0 0 24px;
+  --gse-ui-checkbox-helper-gap: 8px;
+  --gse-ui-checkbox-gap: 8px;
+  --gse-ui-checkbox-disabled-opacity: 0.5;
+  --gse-ui-checkbox-focus-border: 2px solid #7b88f7;
+  --gse-ui-checkbox-focus-borderRadius: 5.5px;
+  --gse-ui-checkbox-focus-borderRadiusSmall: 2px;
+  --gse-ui-checkbox-focus-offset: 1px;
+  --gse-ui-checkbox-group-gap: 8px;
+  --gse-ui-menu-option-padding: 8px 12px;
+  --gse-ui-menu-option-gap: 8px;
+  --gse-ui-menu-option-height: 32px;
+  --gse-ui-menu-option-startIcon-height: 16px;
+  --gse-ui-menu-option-startIcon-width: 16px;
+  --gse-ui-menu-option-label-default-text: 400 12px/16px "Noto Sans";
+  --gse-ui-menu-option-label-active-text: 700 12px/18px "Noto Sans";
+  --gse-ui-menu-option-label-foregroundColor: #2e394c;
+  --gse-ui-menu-option-shortcut-text: 400 14px/20px "Noto Sans";
+  --gse-ui-menu-option-shortcut-default-foregroundColor: #4c5667;
+  --gse-ui-menu-option-shortcut-selected-foregroundColor: #2e394c;
+  --gse-ui-menu-option-hover-backgroundColor: #e8ecf2;
+  --gse-ui-menu-option-selected-backgroundColor: #e2e6ee;
+  --gse-ui-menu-option-disabled-opacity: 0.5;
+  --gse-ui-menu-option-checkbox-unchecked-default-foregroundColor: #6b7585;
+  --gse-ui-menu-option-checkbox-unchecked-hover-foregroundColor: #2754ac;
+  --gse-ui-menu-option-checkbox-unchecked-selected-foregroundColor: #23478f;
+  --gse-ui-menu-option-checkbox-checked-default-foregroundColor: #2a60c8;
+  --gse-ui-menu-option-checkbox-checked-hover-foregroundColor: #2754ac;
+  --gse-ui-menu-option-checkbox-checked-selected-foregroundColor: #23478f;
+  --gse-ui-menu-option-parentIcon-width: 16px;
+  --gse-ui-menu-option-parentIcon-height: 16px;
+  --gse-ui-menu-option-parentIcon-default-foregroundColor: #3e4a5b;
+  --gse-ui-menu-option-parentIcon-hover-foregroundColor: #2e394c;
+  --gse-ui-menu-option-parentIcon-selected-foregroundColor: #2e394c;
+  --gse-ui-menu-option-focus-border: 1px solid #aac9ff;
+  --gse-ui-menu-option-default-backgroundColor: #ffffff;
+  --gse-ui-menu-maxHeight: 344px;
+  --gse-ui-menu-borderRadius: 4px;
+  --gse-ui-menu-border: 1px solid #2e394c;
+  --gse-ui-menu-boxShadow: 0 0 4px 1px rgba(35,57,92,0.1);
+  --gse-ui-menu-padding: 8px 0px;
+  --gse-ui-menu-backgroundColor: #ffffff;
+  --gse-ui-menu-scrollbar-foregroundColor: #3e4a5b;
+  --gse-ui-menu-divider-backgroundColor: #b4bccb; /* Color for the divider that separates the day picker and the time picker inside the calendar menu. */
+  --gse-ui-menu-divider-margin: 4px 0 8px 0;
+  --gse-ui-menu-divider-height: 1px;
+  --gse-ui-menu-groupedMenu-title-padding: 8px 12px 4px;
+  --gse-ui-menu-groupedMenu-title-height: 32px;
+  --gse-ui-menu-groupedMenu-title-foregroundColor: #4c5667;
+  --gse-ui-menu-groupedMenu-title-text: 600 12px/16px Roboto;
+  --gse-ui-menu-groupedMenu-padding: 8px 8px;
+  --gse-ui-menu-groupedMenu-divider-padding: 4px 0px 8px;
+  --gse-ui-menu-groupedMenu-divider-height: 13px;
+  --gse-ui-menu-groupedMenu-subtext-foregroundColor: #4c5667;
+  --gse-ui-dropdown-menu-emptyState-header-text: 700 12px/18px Roboto;
+  --gse-ui-dropdown-menu-emptyState-header-foregroundColor: #23395d;
+  --gse-ui-dropdown-menu-emptyState-subheader-text: 400 12px/18px Roboto;
+  --gse-ui-dropdown-menu-emptyState-subheader-foregroundColor: #626e84;
+  --gse-ui-dropdown-gap: 4px;
+  --gse-ui-calendarMenu-day-range-width: 16px;
+  --gse-ui-calendarMenu-day-range-height: 32px;
+  --gse-ui-calendarMenu-day-input-height: 32px;
+  --gse-ui-calendarMenu-day-input-width: 160px;
+  --gse-ui-calendarMenu-day-headerText: 700 12px/16px Roboto;
+  --gse-ui-calendarMenu-day-date-size: 32px;
+  --gse-ui-calendarMenu-height: 234px;
+  --gse-ui-calendarMenu-width: 250px;
+  --gse-ui-calendarMenu-month-default-foregroundColor: #1b2c48;
+  --gse-ui-calendarMenu-month-single-header-textWidth: 154px;
+  --gse-ui-calendarMenu-month-single-header-width: 218px;
+  --gse-ui-calendarMenu-month-single-header-height: 44px;
+  --gse-ui-calendarMenu-month-monthCell-width: 66px;
+  --gse-ui-calendarMenu-month-monthCell-height: 49px;
+  --gse-ui-calendarMenu-month-headerText: 400 16px/24px "Noto Sans";
+  --gse-ui-calendarMenu-month-range-vertical-width: 272px;
+  --gse-ui-calendarMenu-month-range-vertical-height: 652px;
+  --gse-ui-calendarMenu-month-defaultText: 400 12px/16px Roboto;
+  --gse-ui-calendarMenu-month-currentText: 700 12px/16px Roboto;
+  --gse-ui-calendarMenu-month-focusBorderRadius: 20px;
+  --gse-ui-calendarMenu-month-borderRadius: 16px;
+  --gse-ui-calendarMenu-month-calendarButton-focusBorderRadius: 2px;
+  --gse-ui-calendarMenu-month-selected-foregroundColor: #ffffff;
+  --gse-ui-calendarMenu-month-selected-backgroundColor: #4856cb;
+  --gse-ui-calendarMenu-month-selected-hoverBackgroundColor: #3742a2;
+  --gse-ui-calendarMenu-month-hover-backgroundColor: #dee1fd;
+  --gse-ui-calendarMenu-dateBody-padding: 18px 24px;
+  --gse-ui-calendarMenu-dateBody-gap: 8px;
+  --gse-ui-calendarMenu-header-backgroundColor: #4856cb;
+  --gse-ui-calendarMenu-header-foregroundColor: #ffffff;
+  --gse-ui-calendarMenu-header-gap: 8px;
+  --gse-ui-calendarMenu-header-padding: 10px 16px;
+  --gse-ui-calendarMenu-header-arrow-padding: 8px;
+  --gse-ui-calendarMenu-backgroundColor: #ffffff;
+  --gse-ui-calendarMenu-date-defaultText: 400 12px/16px Roboto;
+  --gse-ui-calendarMenu-date-currentText: 700 12px/16px Roboto;
+  --gse-ui-calendarMenu-date-selected-foregroundColor: #ffffff;
+  --gse-ui-calendarMenu-date-selected-backgroundColor: #4856cb;
+  --gse-ui-calendarMenu-date-selected-hoverBackgroundColor: #3742a2;
+  --gse-ui-calendarMenu-date-hover-backgroundColor: #dee1fd;
+  --gse-ui-calendarMenu-date-range-backgroundColor: #dee1fd;
+  --gse-ui-calendarMenu-date-default-foregroundColor: #1b2c48;
+  --gse-ui-calendarMenu-single-header-borderRadius: 8px 8px 0 0;
+  --gse-ui-calendarMenu-single-body-borderRadius: 0 0 8px 8px;
+  --gse-ui-calendarMenu-range-header-firstMonth-borderRadius: 8px 0 0 0;
+  --gse-ui-calendarMenu-range-header-secondMonth-borderRadius: 0 8px 0 0;
+  --gse-ui-calendarMenu-range-body-firstMonth-borderRadius: 0 0 0 8px;
+  --gse-ui-calendarMenu-range-body-secondMonth-borderRadius: 0 0 8px 0;
+  --gse-ui-calendarMenu-range-date-endDate-borderRadius: 0 16px 16px 0;
+  --gse-ui-calendarMenu-range-date-startDate-borderRadius: 16px 0 0 16px;
+  --gse-ui-calendarMenu-disabled-opacity: 0.5;
+  --gse-ui-calendarMenu-monthBody-padding: 18px 24px;
+  --gse-ui-calendarMenu-monthBody-gap: 2px;
+  --gse-ui-calendarMenu-boxShadow: 0px 2px 4px 1px #23395c1a;
+  --gse-ui-datePicker-range-gap: 24px;
+  --gse-ui-datePicker-startEndInput-gap: 8px;
+  --gse-ui-datePicker-dateTyped-gap: 10px;
+  --gse-ui-datePicker-dateTyped-backgroundColor: #dee1fd;
+  --gse-ui-datePicker-disabled-opacity: 0.5;
+  --gse-ui-datePicker-focusCalendar-gap: 3px;
+  --gse-ui-datePicker-iconHover: #3742a2;
+  --gse-ui-datePicker-iconFocus: #3742a2;
+  --gse-ui-toggle-label: 400 12px/16px Roboto;
+  --gse-ui-toggle-gap: 8px;
+  --gse-ui-toggle-padding: 8px;
+  --gse-ui-toggle-track-width: 32px;
+  --gse-ui-toggle-track-height: 16px;
+  --gse-ui-toggle-track-enabled-off-backgroundColor: #c6c8ce;
+  --gse-ui-toggle-track-enabled-on-backgroundColor: #3742a2;
+  --gse-ui-toggle-track-disabled-off-backgroundColor: #c6c8ce;
+  --gse-ui-toggle-track-disabled-on-backgroundColor: #3742a2;
+  --gse-ui-toggle-track-error-off-backgroundColor: #f3a7b5;
+  --gse-ui-toggle-track-error-on-backgroundColor: #e22245;
+  --gse-ui-toggle-track-hover-off-backgroundColor: #9ca6f9;
+  --gse-ui-toggle-track-hover-on-backgroundColor: #252e78;
+  --gse-ui-toggle-track-borderRadius: 8px;
+  --gse-ui-toggle-handle-width: 16px;
+  --gse-ui-toggle-handle-height: 16px;
+  --gse-ui-toggle-handle-hover-border: 2px solid #4856cb;
+  --gse-ui-toggle-handle-enabled-border: 2px solid #4856cb;
+  --gse-ui-toggle-handle-disabled-border: 2px solid #4856cb;
+  --gse-ui-toggle-handle-error-border: 2px solid #e22245;
+  --gse-ui-toggle-handle-backgroundColor: #ffffff;
+  --gse-ui-toggle-handle-foregroundColor: #4856cb;
+  --gse-ui-toggle-handle-borderRadius: 100%;
+  --gse-ui-toggle-disabled-opacity: 0.5;
+  --gse-ui-toggle-focus-border: 2px solid #7b88f7;
+  --gse-ui-toggle-focus-borderRadius: 16px;
+  --gse-ui-toggle-focus-offset: 1px;
+  --gse-ui-timePicker-clock-padding: 3px;
+  --gse-ui-timePicker-clockStates-defaultColor: #626e84;
+  --gse-ui-timePicker-clockStates-hoverColor: #3742a2;
+  --gse-ui-timePicker-clockStates-activeColor: #4856cb;
+  --gse-ui-timePicker-clockStates-disabledColor: lch(46 13.8 267 / 0.5);
+  --gse-ui-timePicker-focusClock-border: 2px solid #7b88f7;
+  --gse-ui-timePicker-focusClock-borderRadius: 2px;
+  --gse-ui-timePicker-focusAmpm-border: 2px solid #7b88f7;
+  --gse-ui-timePicker-focusAmpm-borderRadius: 2px;
+  --gse-ui-timePicker-focusTime-border: 3px solid #7b88f7;
+  --gse-ui-timePicker-focusTime-borderRadius: 4px;
+  --gse-ui-timePicker-ampm-padding: 3px;
+  --gse-ui-colorPicker-label-requiredSymbolColor: #e22245;
+  --gse-ui-colorPicker-label-textColor: #1b2c48;
+  --gse-ui-colorPicker-label-text: 400 12px/18px Roboto;
+  --gse-ui-colorPicker-inputContainer-backgroundColor: #ffffff;
+  --gse-ui-colorPicker-inputContainer-border-defaultColor: #a3a7b0;
+  --gse-ui-colorPicker-inputContainer-border-hoverColor: #3742a2;
+  --gse-ui-colorPicker-inputContainer-border-activeColor: #252e78;
+  --gse-ui-colorPicker-inputContainer-border-errorColor: #e22245;
+  --gse-ui-colorPicker-input-containerSizing: 32px;
+  --gse-ui-colorPicker-input-swatchSizing: 24px;
+  --gse-ui-colorPicker-input-swatchBorderRadius: 2px;
+  --gse-ui-colorPicker-gap: 8px;
+  --gse-ui-slider-handle-width: 20px;
+  --gse-ui-slider-handle-height: 20px;
+  --gse-ui-slider-handle-default-backgroundColor: #4856cb;
+  --gse-ui-slider-handle-hover-backgroundColor: #3742a2;
+  --gse-ui-slider-handle-active-backgroundColor: #252e78;
+  --gse-ui-slider-handle-disabled-backgroundColor: #4856cb;
+  --gse-ui-slider-handle-borderRadius: 100%;
+  --gse-ui-slider-disabled-opacity: 0.5;
+  --gse-ui-slider-label-text: 600 14px/20px Roboto;
+  --gse-ui-slider-label-foregroundColor: #1b2c48;
+  --gse-ui-slider-bar-selected-backgroundColor: #2a60c8;
+  --gse-ui-slider-bar-default-backgroundColor: #c6c8ce;
+  --gse-ui-slider-bar-height: 4px;
+  --gse-ui-slider-gap: 16px;
+  --gse-ui-slider-focusRing-borderRadius: 100%;
+  --gse-ui-slider-track-borderRadius: 4px;
+  --gse-ui-flyoutMenu-anchor-height: 8px;
+  --gse-ui-flyoutMenu-anchor-width: 76px;
+  --gse-ui-flyoutMenu-width: 208px;
+  --gse-ui-flyoutMenu-borderRadius: 4px;
+  --gse-ui-flyoutMenu-padding: 8px 0px;
+  --gse-ui-flyoutMenu-parenting-gap: 8px;
+  --gse-ui-flyoutMenu-backgroundColor: #ffffff;
+  --gse-ui-flyoutMenu-arrow-borderRadius: 4px;
+  --gse-ui-phoneInput-dropdown-hover-backgroundColor: #eff0fe;
+  --gse-ui-phoneInput-dropdown-active-backgroundColor: #ced2fc;
+  --gse-ui-phoneInput-dropdown-foregroundColor: #626e84;
+  --gse-ui-phoneInput-dropdown-flag-height: 12px;
+  --gse-ui-phoneInput-dropdown-flag-width: 16px;
+  --gse-ui-phoneInput-dropdown-height: 32px;
+  --gse-ui-phoneInput-dropdown-menu-minWidth: 230px;
+  --gse-ui-phoneInput-dropdown-icon-width: 16px;
+  --gse-ui-phoneInput-dropdown-icon-height: 16px;
+  --gse-ui-phoneInput-dropdown-padding: 0 8px 0 12px;
+  --gse-ui-phoneInput-dropdown-disabled-padding: 0 4px 0 12px;
+  --gse-ui-phoneInput-dropdown-gap: 4px;
+  --gse-ui-phoneInput-countryCode-foregroundColor: #626e84;
+  --gse-ui-phoneInput-minWidth: 230px;
+  --gse-ui-contextMenu-button-default: 32px;
+  --gse-ui-contextMenu-button-compact: 24px;
+  --gse-ui-contextMenu-borderRadius: 4px;
+  --gse-ui-contextMenu-menu-maxHeight: 344px;
+  --gse-ui-contextMenu-menu-width: 220px;
+  --gse-ui-monthPicker-calendarStates-defaultColor: #626e84;
+  --gse-ui-monthPicker-calendarStates-hoverColor: #3742a2;
+  --gse-ui-monthPicker-calendarStates-activeColor: #4856cb;
+  --gse-ui-monthPicker-calendarStates-disabledColor: lch(46 13.8 267 / 0.5);
+  --gse-ui-monthPicker-calendarStates-focus-border: 2px solid #7b88f7;
+  --gse-ui-selectorCard-ilustrativeIcon-foregroundColor: #3e5374;
+  --gse-ui-selectorCard-text-foregroundColor: #1b2c48;
+  --gse-ui-selectorCard-default-backgroundColor: #ffffff;
+  --gse-ui-selectorCard-default-selectedIndicator-selected-foregroundColor: #4856cb;
+  --gse-ui-selectorCard-default-selectedIndicator-unselected-foregroundColor: #767c8d;
+  --gse-ui-selectorCard-hover-backgroundColor: #eff0fe;
+  --gse-ui-selectorCard-hover-selectedIndicator-foregroundColor: #3742a2;
+  --gse-ui-selectorCard-active-backgroundColor: #ced2fc;
+  --gse-ui-selectorCard-active-selectedIndicator-foregroundColor: #252e78;
+  --gse-ui-selectorCard-error-backgroundColor: #fef3f3;
+  --gse-ui-selectorCard-error-selectedIndicator-foregroundColor: #e22245;
+  --gse-ui-selectorCard-error-border: 1px solid #e22245;
+  --gse-ui-selectorCard-simple-minWidth: 108px;
+  --gse-ui-selectorCard-simple-maxWidth: 316px;
+  --gse-ui-selectorCard-simple-minHeight: 76px;
+  --gse-ui-selectorCard-simple-maxHeight: 116px;
+  --gse-ui-selectorCard-simple-padding: 12px;
+  --gse-ui-selectorCard-simple-gap: 8px;
+  --gse-ui-selectorCard-simple-borderRadius: 8px;
+  --gse-ui-selectorCard-simple-label: 700 14px/24px Urbanist;
+  --gse-ui-selectorCard-descriptive-minWidth: 216px;
+  --gse-ui-selectorCard-descriptive-maxWidth: 316px;
+  --gse-ui-selectorCard-descriptive-minHeight: 118px;
+  --gse-ui-selectorCard-descriptive-maxHeight: 220px;
+  --gse-ui-selectorCard-descriptive-padding: 16px;
+  --gse-ui-selectorCard-descriptive-gap: 8px;
+  --gse-ui-selectorCard-descriptive-text-gap: 4px;
+  --gse-ui-selectorCard-descriptive-badge-marginTop: 8px;
+  --gse-ui-selectorCard-descriptive-borderRadius: 16px;
+  --gse-ui-selectorCard-descriptive-label: 700 16px/24px Urbanist;
+  --gse-ui-selectorCard-descriptive-description: 400 12px/18px "Noto Sans";
+  --gse-ui-selectorCard-unselected-border: 1px solid #c6c8ce;
+  --gse-ui-selectorCard-selected-border: 1px solid #4856cb;
+  --gse-ui-selectorCard-disabled-opacity: 0.5;
+  --gse-ui-selectorCard-disabled-backgroundColor: #ffffff;
+  --gse-ui-selectorCard-disabled-selectedIndicator-selected-foregroundColor: #4856cb;
+  --gse-ui-selectorCard-disabled-selectedIndicator-unselected-foregroundColor: #767c8d;
+  --gse-ui-search-counter-default-foregroundColor: #626e84;
+  --gse-ui-search-counter-hover-foregroundColor: #4856cb;
+  --gse-ui-search-counter-divider-border: 1px solid #a3a7b0;
+  --gse-ui-search-counter-divider-foregroundColor: #a3a7b0;
+  --gse-ui-search-counter-text: 400 12px/18px Roboto;
+  --gse-ui-search-counter-gap: 4px;
+  --gse-ui-search-counter-icon-height: 16px;
+  --gse-ui-search-counter-icon-width: 16px;
+  --gse-ui-search-width: 320px;
+  --gse-ui-search-match-firstLevel-backgroundColor: #b5e2e8;
+  --gse-ui-search-match-firstLevel-foregroundColour: #1b2c48;
+  --gse-ui-search-match-subsequentLevel-foregroundColour: #1b2c48;
+  --gse-ui-search-match-subsequentLevel-backgroundColor: #daf0f4;
+  --gse-ui-simpleFilter-gap: 16px;
+  --gse-ui-dataTableItems-header-text: 700 12px/16px Roboto;
+  --gse-ui-dataTableItems-header-multiselect-default-height: 40px;
+  --gse-ui-dataTableItems-header-multiselect-default-width: 41px;
+  --gse-ui-dataTableItems-header-multiselect-default-selectedBar-height: 3px;
+  --gse-ui-dataTableItems-header-multiselect-default-selectedBar-width: 41px;
+  --gse-ui-dataTableItems-header-multiselect-compact-height: 32px;
+  --gse-ui-dataTableItems-header-multiselect-compact-width: 64px;
+  --gse-ui-dataTableItems-header-multiselect-compact-selectedBar-height: 3px;
+  --gse-ui-dataTableItems-header-multiselect-compact-selectedBar-width: 64px;
+  --gse-ui-dataTableItems-header-selectedIndicatorColor: #9ca6f9;
+  --gse-ui-dataTableItems-header-defaultBackgroundColor: #ffffff;
+  --gse-ui-dataTableItems-header-fixedBackgroundColor: #dee1fd;
+  --gse-ui-dataTableItems-header-foregroundColor: #1b2c48;
+  --gse-ui-dataTableItems-header-sort-foregroundColor: #626e84;
+  --gse-ui-dataTableItems-header-default-height: 40px;
+  --gse-ui-dataTableItems-header-default-width: 229px;
+  --gse-ui-dataTableItems-header-compact-height: 32px;
+  --gse-ui-dataTableItems-header-compact-width: 229px;
+  --gse-ui-dataTableItems-header-padding: 0 12px;
+  --gse-ui-dataTableItems-header-gap: 8px;
+  --gse-ui-dataTableItems-header-selectedBar-height: 3px;
+  --gse-ui-dataTableItems-header-selectedBar-width: 229px;
+  --gse-ui-dataTableItems-divider: 1px solid #e8ebf7;
+  --gse-ui-dataTableItems-scrollbar-borderRadius: 45px;
+  --gse-ui-dataTableItems-scrollbar-foregroundColor: #626e84;
+  --gse-ui-dataTableItems-cell-altBackgroundColor: #f3f5fb;
+  --gse-ui-dataTableItems-cell-defaultBackgroundColor: #ffffff;
+  --gse-ui-dataTableItems-cell-hoverBackgroundColor: #dee1fd;
+  --gse-ui-dataTableItems-cell-foregroundColor: #1b2c48;
+  --gse-ui-dataTableItems-cell-chevron-foregroundColor: #626e84;
+  --gse-ui-dataTableItems-cell-multiselect-default-height: 40px;
+  --gse-ui-dataTableItems-cell-multiselect-compact-height: 32px;
+  --gse-ui-dataTableItems-cell-multiselect-padding: 0 16px;
+  --gse-ui-dataTableItems-cell-multiselect-gap: 8px;
+  --gse-ui-dataTableItems-cell-multiselect-checkboxCell-default-height: 40px;
+  --gse-ui-dataTableItems-cell-multiselect-checkboxCell-default-width: 41px;
+  --gse-ui-dataTableItems-cell-multiselect-checkboxCell-compact-height: 32px;
+  --gse-ui-dataTableItems-cell-multiselect-checkboxCell-compact-width: 41px;
+  --gse-ui-dataTableItems-cell-default-height: 40px;
+  --gse-ui-dataTableItems-cell-default-width: 229px;
+  --gse-ui-dataTableItems-cell-compact-height: 32px;
+  --gse-ui-dataTableItems-cell-compact-width: 229px;
+  --gse-ui-dataTableItems-cell-padding: 0 12px;
+  --gse-ui-dataTableItems-cell-gap: 8px;
+  --gse-ui-dataTableItems-cell-icon-foregroundColor: #1b2c48;
+  --gse-ui-dataTableItems-cell-text: 400 12px/16px Roboto;
+  --gse-ui-dataTableItems-cell-tablePagination-width: 727px;
+  --gse-ui-dataTableItems-cell-tablePagination-height: 56px;
+  --gse-ui-dataTableItems-cell-contextMenu-default-height: 40px;
+  --gse-ui-dataTableItems-cell-contextMenu-default-width: 41px;
+  --gse-ui-dataTableItems-cell-contextMenu-compact-height: 32px;
+  --gse-ui-dataTableItems-cell-contextMenu-compact-width: 41px;
+  --gse-ui-dataTableItems-editColumn-editColumnItem-gap: 8px;
+  --gse-ui-dataTableItems-editColumn-editColumnItem-foregroundColor: #3e5374;
+  --gse-ui-dataTableItems-editColumn-editColumnItem-height: 18px;
+  --gse-ui-dataTableItems-editColumn-editColumnContent-gap: 10px;
+  --gse-ui-dataTableItems-editColumn-editColumnContent-padding: 8px 0;
+  --gse-ui-dataTableItems-tableToolbar-tableToolbarGroup-gap: 4px;
+  --gse-ui-dataTableItems-tableToolbar-gap: 4px;
+  --gse-ui-dataTableItems-tableToolbar-dividerColor: #c6ceec;
+  --gse-ui-dataTableItems-tableToolbar-divider-width: 1px;
+  --gse-ui-dataTableItems-tableToolbar-divider-height: 32px;
+  --gse-ui-dataTableItems-tableToolbar-height: 32px;
+  --gse-ui-dataTableItems-tablePagination-recordsetControls-gap: 10px;
+  --gse-ui-dataTableItems-tablePagination-padding: 12px;
+  --gse-ui-dataTableItems-tablePagination-divider: 1px solid #c6c8ce;
+  --gse-ui-dataTableItems-tablePagination-defaultText: 400 12px/16px Roboto;
+  --gse-ui-dataTableItems-tablePagination-currentResultText: 700 12px/16px Roboto;
+  --gse-ui-dataTableItems-tablePagination-defaultBackgroundColor: #ffffff;
+  --gse-ui-dataTableItems-tablePagination-foregroundColor: #1b2c48;
+  --gse-ui-dataTableItems-tablePagination-countDisplay-gap: 4px;
+  --gse-ui-avatar-groupShapes-gap: -4px;
+  --gse-ui-avatar-large-size: 96px;
+  --gse-ui-avatar-large-badge-size: 24px;
+  --gse-ui-avatar-large-focusRing-size: 98px;
+  --gse-ui-avatar-large-content-size: 84px;
+  --gse-ui-avatar-large-initials: 600 36px/1 Urbanist;
+  --gse-ui-avatar-large-presenceRing-width: 4px;
+  --gse-ui-avatar-large-ucIntegration-size: 32px;
+  --gse-ui-avatar-presenceRing-available: linear-gradient(135deg, #09b581 0%, #9de1cd 100%);
+  --gse-ui-avatar-presenceRing-busy: linear-gradient(135deg, #e22245 0%, #f3a7b5 100%);
+  --gse-ui-avatar-presenceRing-away: linear-gradient(135deg, #f8c73e 0%, #fce9b2 100%);
+  --gse-ui-avatar-presenceRing-onQueue: linear-gradient(135deg, #4856cb 0%, #9ca6f9 100%);
+  --gse-ui-avatar-presenceRing-offline: linear-gradient(135deg, #767c8d 0%, #a3a7b0 100%);
+  --gse-ui-avatar-presenceRing-outOfOffice: linear-gradient(135deg, #b74ba4 0%, #f5bfeb 100%);
+  --gse-ui-avatar-medium-size: 48px;
+  --gse-ui-avatar-medium-badge-size: 16px;
+  --gse-ui-avatar-medium-focusRing-size: 50px;
+  --gse-ui-avatar-medium-content-size: 40px;
+  --gse-ui-avatar-medium-initials: 600 18px/1 Urbanist;
+  --gse-ui-avatar-medium-presenceRing-width: 3px;
+  --gse-ui-avatar-small-size: 32px;
+  --gse-ui-avatar-small-badge-size: 8px;
+  --gse-ui-avatar-small-focusRing-size: 34px;
+  --gse-ui-avatar-small-content-size: 26px;
+  --gse-ui-avatar-small-initials: 600 12px/1 Urbanist;
+  --gse-ui-avatar-small-substract-size: 30px;
+  --gse-ui-avatar-small-presenceRing-width: 2px;
+  --gse-ui-avatar-xsmall-size: 24px;
+  --gse-ui-avatar-xsmall-focusRing-size: 26px;
+  --gse-ui-avatar-xsmall-content-size: 18px;
+  --gse-ui-avatar-xsmall-initials: 600 8px/1 Urbanist;
+  --gse-ui-avatar-xsmall-presenceRing-width: 2px;
+  --gse-ui-avatar-badge-available-color: #09b581;
+  --gse-ui-avatar-badge-busy-color: #e22245;
+  --gse-ui-avatar-badge-busy-icon-margin: 2px;
+  --gse-ui-avatar-badge-away: #f8c73e;
+  --gse-ui-avatar-badge-onQueue-color: #4856cb;
+  --gse-ui-avatar-badge-offline-color: #626e84;
+  --gse-ui-avatar-badge-outOfOffice: #b74ba4;
+  --gse-ui-avatar-badge-notification-color: #fe624d;
+  --gse-ui-avatar-badge-foregroundDefault-color: #ffffff;
+  --gse-ui-avatar-badge-foregroundDark-color: #3e5374;
+  --gse-ui-avatar-badge-notifications-icon-margin: 4px;
+  --gse-ui-avatar-badge-queue-icon-margin: 4px;
+  --gse-ui-avatar-media-initialsBackground-default: #115d71;
+  --gse-ui-avatar-media-initialsBackground-accent1: #7785b8;
+  --gse-ui-avatar-media-initialsBackground-accent2: #90d3dd;
+  --gse-ui-avatar-media-initialsBackground-accent3: #0c6d7e;
+  --gse-ui-avatar-media-initialsBackground-accent4: #547688;
+  --gse-ui-avatar-media-initialsBackground-accent5: #a5cae0;
+  --gse-ui-avatar-media-initialsBackground-accent6: #b5bfe6;
+  --gse-ui-avatar-media-initialsBackground-accent7: #a05195;
+  --gse-ui-avatar-media-initialsBackground-accent8: #f95d6a;
+  --gse-ui-avatar-media-initialsBackground-accent9: #fe8f85;
+  --gse-ui-avatar-media-initialsBackground-accent10: #ffc650;
+  --gse-ui-avatar-media-initialsBackground-accent11: #fe624d;
+  --gse-ui-avatar-media-initialsBackground-accent12: #c44b3b;
+  --gse-ui-avatar-media-initialsBackground-overflowCount: #626e84;
+  --gse-ui-avatar-media-initialsBackground-add: #ced2fc;
+  --gse-ui-avatar-media-initialsForeground-default: #1b2c48;
+  --gse-ui-avatar-media-initialsForeground-inverse: #ffffff;
+  --gse-ui-avatar-media-initialsForeground-add: #4856cb;
+  --gse-ui-avatar-hoverModal-shroudColor: #0f1929;
+  --gse-ui-avatar-hoverModal-foregroundColor: #ffffff;
+  --gse-ui-avatar-hoverModal-opacity: 0.8;
+  --gse-ui-avatar-content-borderRadius: 256px;
+  --gse-ui-avatar-content-default-border: 1px solid #ffffff;
+  --gse-ui-avatar-content-large-border: 2px solid #ffffff;
+  --gse-ui-avatar-groupSet-gap: -2px;
+  --gse-ui-avatar-focusRing-large-borderRadius: 96px;
+  --gse-ui-avatar-focusRing-large-border: 3px solid #7b88f7;
+  --gse-ui-avatar-focusRing-mediumSmall-borderRadius: 100px;
+  --gse-ui-avatar-focusRing-medium-border: 3px solid #7b88f7;
+  --gse-ui-avatar-focusRing-small-border: 2px solid #7b88f7;
+  --gse-ui-avatar-focusRing-xsmall-border: 2px solid #7b88f7;
+  --gse-ui-avatar-focus: #7b88f7;
+  --gse-ui-avatar-addChangeImage-hoverModal-shroudSize: 84px;
+  --gse-ui-avatar-addChangeImage-icon-size: 16px;
+  --gse-ui-globalNav-sideMenu: linear-gradient(135deg, #09b581 0%, #9de1cd 100%);
+  --gse-ui-globalNav-text: 700 12px/16px Roboto;
+  --gse-ui-globalNav-toggle-onQueue-text: 600 12px/16px Roboto;
+  --gse-ui-globalNav-toggle-gap: 16px;
+  --gse-ui-globalNav-toggle-offQueue-text: 400 12px/16px Roboto;
+  --gse-ui-globalNav-focus-border: 3px solid #7b88f7;
+  --gse-ui-globalNav-menuOption-height: 32px;
+  --gse-ui-globalNav-menuOption-width: 248px;
+  --gse-ui-globalNav-menuOption-padding: 0px 12px;
+  --gse-ui-globalNav-menuOption-gap: 8px;
+  --gse-ui-globalNav-menuOption-default-foregroundColor: #ffffff;
+  --gse-ui-globalNav-menuOption-hover-backgroundColor: #252e78;
+  --gse-ui-globalNav-menuOption-hover-foregroundColor: #ffffff;
+  --gse-ui-globalNav-menuOption-selected-backgroundColor: #4856cb;
+  --gse-ui-globalNav-menuOption-selected-foregroundColor: #ffffff;
+  --gse-ui-globalNav-menuOption-disabled-backgroundColor: #ffffff;
+  --gse-ui-globalNav-menuOption-focus-borderRadius: 8px;
+  --gse-ui-globalNav-menuOption-borderRadius: 4px;
+  --gse-ui-globalNav-menuOption-disableOpacity: 0.5;
+  --gse-ui-globalNav-menuOption-selectedPanel-backgroundColor: #3742a2;
+  --gse-ui-globalNav-menuOption-selectedPanel-foregroundColor: #ffffff;
+  --gse-ui-globalNav-menuOption-return-default-backgroundColor: #1c2463;
+  --gse-ui-globalNav-menuOption-return-default-foregroundColor: #ffffff;
+  --gse-ui-globalNav-menuOption-return-hover-backgroundColor: #141a4f;
+  --gse-ui-globalNav-menuOption-return-hover-foregroundColor: #ffffff;
+  --gse-ui-globalNav-menuOption-return-selected-backgroundColor: #4856cb;
+  --gse-ui-globalNav-menuOption-return-selected-foregroundColor: #ffffff;
+  --gse-ui-globalNav-menuOption-treeView-bar: #314669;
+  --gse-ui-globalNav-buttonReturn-height: 48px;
+  --gse-ui-globalNav-buttonReturn-width: 280px;
+  --gse-ui-globalNav-buttonReturn-padding: 16px 28px;
+  --gse-ui-globalNav-buttonReturn-gap: 12px;
+  --gse-ui-globalNav-treeView-border: 2px solid #3e5374;
+  --gse-ui-globalNav-treeView-gap: 8px;
+  --gse-ui-globalNav-treeView-width: 224px;
+  --gse-ui-globalNav-bar-padding: 8px 12px;
+  --gse-ui-globalNav-topBar-items-gap: 16px;
+  --gse-ui-globalNav-topBar-padding: 16px 24px;
+  --gse-ui-globalNav-topBar-height: 64px;
+  --gse-ui-globalNav-topBar-frame-backgroundColor: #ffffff;
+  --gse-ui-globalNav-topBar-frame-stroke: #c6ceec;
+  --gse-ui-globalNav-topBar-logo: #ff4f1f; /* Brand Orange from Spark 1.0 */
+  --gse-ui-globalNav-topBar-menuButton-closed-default-foregroundColor: #4856cb;
+  --gse-ui-globalNav-topBar-menuButton-closed-hover-backgroundColor: #3742a2;
+  --gse-ui-globalNav-topBar-menuButton-closed-hover-foregroundColorStroke: #4856cb;
+  --gse-ui-globalNav-topBar-menuButton-closed-hover-foregroundColor: #ffffff;
+  --gse-ui-globalNav-topBar-menuButton-open-default-foregroundColorStroke: #ffffff;
+  --gse-ui-globalNav-topBar-menuButton-open-hover-backgroundColor: #3742a2;
+  --gse-ui-globalNav-topBar-menuButton-open-hover-foregroundColor: #ffffff;
+  --gse-ui-globalNav-panel-panelTitle: #ffffff;
+  --gse-ui-globalNav-panel-primary: linear-gradient(127deg, #23395d 3.19%, #3e5374 225.06%);
+  --gse-ui-globalNav-panel-secondary: linear-gradient(358deg, #1b2b48 0.16%, #23395d 98.45%);
+  --gse-ui-dataTableComposed-boxShadow: 0 0 4px 1px rgba(35,57,92,0.1);
+  --gse-ui-dataTableComposed-width: 1440px;
+  --gse-ui-focus: 2px solid #7b88f7;
+  --gse-ui-tabs-item-height: 40px;
+  --gse-ui-tabs-item-horizontal-fixedHeight: 40px;
+  --gse-ui-tabs-item-horizontal-padding: 11px 12px 10px;
+  --gse-ui-tabs-item-disableOpacity: 0.5;
+  --gse-ui-tabs-item-itemText: 400 12px/18px Roboto;
+  --gse-ui-tabs-item-itemTextColor: #1b2c48;
+  --gse-ui-tabs-item-divider-horizontal-height: 1px;
+  --gse-ui-tabs-item-divider-vertical-height: 40px;
+  --gse-ui-tabs-item-divider-vertical-width: 1px;
+  --gse-ui-tabs-item-divider-dividerColor: #c6c8ce;
+  --gse-ui-tabs-item-indicator-vertical-height: 40px;
+  --gse-ui-tabs-item-indicator-vertical-width: 2px;
+  --gse-ui-tabs-item-indicator-horizontal-height: 2px;
+  --gse-ui-tabs-item-indicator-hoverColor: #4856cb;
+  --gse-ui-tabs-item-indicator-activeColor: #3742a2;
+  --gse-ui-tabs-item-icon-iconColor: #1b2c48;
+  --gse-ui-tabs-item-icon-size: 16px;
+  --gse-ui-tabs-item-gap: 8px;
+  --gse-ui-tabs-item-vertical-fixedHeight: 40px;
+  --gse-ui-tabs-item-vertical-padding: 11px 9px 10px 12px;
+  --gse-ui-tabs-item-focusRing-offset: 1px;
+  --gse-ui-tabs-set-vertical-height: 360px;
+  --gse-ui-tabs-set-vertical-width: 98px;
+  --gse-ui-tabs-set-vertical-marginRight: 16px;
+  --gse-ui-tabs-set-horizontal-width: 800px;
+  --gse-ui-tabs-set-horizontal-height: 40px;
+  --gse-ui-tabs-set-horizontal-marginBottom: 16px;
+  --gse-ui-tabs-set-gap: -1px;
+  --gse-ui-tabs-set-divider-horizontal-height: 1px;
+  --gse-ui-tabs-set-divider-vertical-width: 1px;
+  --gse-ui-tabs-focusRing-border: 3px solid #7b88f7;
+  --gse-ui-tabs-focusRing-borderRadius: 4px;
+  --gse-ui-advancedTabs-divider-dividerColor: #c6c8ce;
+  --gse-ui-advancedTabs-item-padding: 11px 12px 10px;
+  --gse-ui-advancedTabs-item-gap: 8px;
+  --gse-ui-advancedTabs-item-focus-borderRadius: 8px;
+  --gse-ui-advancedTabs-item-focus-border: 3px solid #7b88f7;
+  --gse-ui-advancedTabs-item-focus-borderCopy: 4px;
+  --gse-ui-advancedTabs-item-backgroundColor: #ffffff;
+  --gse-ui-advancedTabs-item-borderRadius: 4px 4px 0 0;
+  --gse-ui-advancedTabs-item-height: 48px;
+  --gse-ui-advancedTabs-item-width: 151px;
+  --gse-ui-advancedTabs-item-focusItem-height: 53px;
+  --gse-ui-advancedTabs-item-focusItem-width: 126px;
+  --gse-ui-advancedTabs-item-divider-bottom-height: 1px;
+  --gse-ui-advancedTabs-item-divider-right-height: 32px;
+  --gse-ui-advancedTabs-item-divider-right-width: 1px;
+  --gse-ui-advancedTabs-item-text-color: #1b2c48;
+  --gse-ui-advancedTabs-item-text-height: 9px;
+  --gse-ui-advancedTabs-item-indicator-hoverColor: #4856cb;
+  --gse-ui-advancedTabs-item-indicator-activeColor: #3742a2;
+  --gse-ui-advancedTabs-item-indicator-height: 2px;
+  --gse-ui-advancedTabs-item-icon-iconColor: #1b2c48;
+  --gse-ui-advancedTabs-item-icon-size: 16px;
+  --gse-ui-advancedTabs-item-menuButton-gap: 4px;
+  --gse-ui-advancedTabs-item-menuButton-height: 45px;
+  --gse-ui-advancedTabs-item-menuButton-width: 32px;
+  --gse-ui-advancedTabs-item-menuButton-defaultColor: #626e84;
+  --gse-ui-advancedTabs-item-menuButton-activeColor: #252e78;
+  --gse-ui-advancedTabs-item-menuButton-focus-height: 53px;
+  --gse-ui-advancedTabs-item-menuButton-focus-width: 40px;
+  --gse-ui-advancedTabs-item-itemText: 400 12px/18px Roboto;
+  --gse-ui-advancedTabs-button-add-height: 45px;
+  --gse-ui-advancedTabs-button-arrow-height: 48px;
+  --gse-ui-advancedTabs-set-backgroundColor: #f3f5fb;
+  --gse-ui-advancedTabs-set-standard-width: 920px;
+  --gse-ui-toast-closeButtonColor: #626e84;
+  --gse-ui-toast-success-backgroundColor: #ffffff;
+  --gse-ui-toast-success-foregroundColor: #1b2c48;
+  --gse-ui-toast-success-iconColor: #09b581;
+  --gse-ui-toast-warning-backgroundColor: #ffffff;
+  --gse-ui-toast-warning-foregroundColor: #1b2c48;
+  --gse-ui-toast-warning-iconColor: #f8c73e;
+  --gse-ui-toast-info-backgroundColor: #ffffff;
+  --gse-ui-toast-info-foregroundColor: #1b2c48;
+  --gse-ui-toast-info-iconColor: #6e5ddb;
+  --gse-ui-toast-action-backgroundColor: #ffffff;
+  --gse-ui-toast-action-foregroundColor: #1b2c48;
+  --gse-ui-toast-action-iconColor: #4856cb;
+  --gse-ui-toast-error-backgroundColor: #ffffff;
+  --gse-ui-toast-error-foregroundColor: #1b2c48;
+  --gse-ui-toast-error-iconColor: #e22245;
+  --gse-ui-toast-heading: 700 16px/24px Urbanist;
+  --gse-ui-toast-text: 400 14px/20px "Noto Sans";
+  --gse-ui-toast-margin: 16px;
+  --gse-ui-toast-gap: 12px;
+  --gse-ui-toast-gapText: 4px;
+  --gse-ui-toast-gapButton: 16px;
+  --gse-ui-toast-buttonBar-gap: 8px;
+  --gse-ui-toast-borderRadius: 8px;
+  --gse-ui-toast-boxShadow: 0 0 4px 1px rgba(35,57,92,0.1);
+  --gse-ui-toast-icon: 24px;
+  --gse-ui-toast-wrappingWidth: 320px;
+  --gse-ui-toast-stacking-gap: 4px;
+  --gse-ui-modal-closeButtonColor: #626e84;
+  --gse-ui-modal-headerColor: #1b2c48;
+  --gse-ui-modal-backgroundColor: #ffffff;
+  --gse-ui-modal-shroudColor: rgb(13.7% 22.4% 36.5% / 0.8);
+  --gse-ui-modal-header-gap: 12px;
+  --gse-ui-modal-padding: 32px;
+  --gse-ui-modal-gap: 16px;
+  --gse-ui-modal-heading: 700 24px/32px Urbanist;
+  --gse-ui-modal-icon: 32px;
+  --gse-ui-modal-small-width: 420px;
+  --gse-ui-modal-medium-width: 680px;
+  --gse-ui-modal-large-width: 800px;
+  --gse-ui-modal-buttonBar-gap: 8px;
+  --gse-ui-modal-boxShadow: 0 0 8px 1px rgba(35,57,92,0.15);
+  --gse-ui-modal-borderRadius: 16px;
+  --gse-ui-modal-shroud-opacity: 0.8;
+  --gse-ui-modal-dismissButton-paddingTop: 16px;
+  --gse-ui-modal-dismissButton-paddingRight: 8px;
+  --gse-ui-popover-borderRadius: 8px;
+  --gse-ui-popover-boxShadow: 0 0 8px 1px rgba(35,57,92,0.15);
+  --gse-ui-popover-closeButtonColor: #626e84;
+  --gse-ui-popover-headerColor: #1b2c48;
+  --gse-ui-popover-backgroundColor: #ffffff;
+  --gse-ui-popover-gap: 16px;
+  --gse-ui-popover-padding: 24px;
+  --gse-ui-popover-buttonsBar-gap: 8px;
+  --gse-ui-popover-header-gap: 4px;
+  --gse-ui-popover-spacer-height: 16px;
+  --gse-ui-popover-body-text: 400 14px/20px Roboto;
+  --gse-ui-popover-title-text: 700 16px/24px Urbanist;
+  --gse-ui-popover-anchor-width: 18px;
+  --gse-ui-popover-anchor-height: 9px;
+  --gse-ui-progressAndLoading-spinner-foreground: #2a60c8;
+  --gse-ui-progressAndLoading-spinner-base: #deeaff;
+  --gse-ui-progressAndLoading-spinner-large: 48px; /* keeping hard code as it cant have "px" */
+  --gse-ui-progressAndLoading-spinner-small: 16px; /* keeping hard code as it cant have "px" */
+  --gse-ui-progressAndLoading-spinner-text: 600 12px/18px "Noto Sans";
+  --gse-ui-progressAndLoading-textColor: #2e394c;
+  --gse-ui-progressAndLoading-loadingState-large-header: 700 24px/32px Urbanist;
+  --gse-ui-progressAndLoading-loadingState-large-subheader: 600 16px/24px Roboto;
+  --gse-ui-progressAndLoading-loadingState-large-width: 600px;
+  --gse-ui-progressAndLoading-loadingState-medium-header: 700 18px/27px Urbanist;
+  --gse-ui-progressAndLoading-loadingState-medium-subheader: 600 14px/20px Roboto;
+  --gse-ui-progressAndLoading-loadingState-medium-width: 400px;
+  --gse-ui-progressAndLoading-loadingState-small-header: 700 16px/24px Urbanist;
+  --gse-ui-progressAndLoading-loadingState-small-subheader: 600 12px/18px Roboto;
+  --gse-ui-progressAndLoading-loadingState-small-width: 200px;
+  --gse-ui-progressAndLoading-large-gap: 24px;
+  --gse-ui-progressAndLoading-large-gapText: 4px;
+  --gse-ui-progressAndLoading-pageLoading-gap: -3px;
+  --gse-ui-progressAndLoading-medium-gap: 16px;
+  --gse-ui-progressAndLoading-medium-gapText: 4px;
+  --gse-ui-progressAndLoading-small-gap: 12px;
+  --gse-ui-progressAndLoading-small-gapText: 4px;
+  --gse-ui-progressAndLoading-blankState-large-header: 700 18px/27px Urbanist;
+  --gse-ui-progressAndLoading-blankState-large-subheader: 600 14px/20px Roboto;
+  --gse-ui-progressAndLoading-blankState-small-header: 700 14px/24px Urbanist;
+  --gse-ui-progressAndLoading-blankState-small-subheader: 600 12px/18px Roboto;
+  --gse-ui-progressAndLoading-largeBorder: 4px; /* Remove px because of SVG issues from COMUI-2226 */
+  --gse-ui-progressAndLoading-smallBorder: 2px; /* Remove px because of SVG issues from COMUI-2226 */
+  --gse-ui-progressAndLoading-thinBorder: 1px; /* Remove px because of SVG issues from COMUI-2226 */
+  --gse-ui-blankState-small-width: 250px;
+  --gse-ui-blankState-small-maxWidth: 569px;
+  --gse-ui-blankState-large-minWidth: 570px;
+  --gse-ui-blankState-icon-size-sm: 32px;
+  --gse-ui-blankState-icon-size-lg: 42px;
+  --gse-ui-blankState-padding: 32px 16px;
+  --gse-ui-blankState-gapMessage: 4px;
+  --gse-ui-blankState-gapMain: 12px;
+  --gse-ui-blankState-gapContent: 24px;
+  --gse-ui-blankState-iconColor: #767c8d;
+  --gse-ui-blankState-foregroundColor: #1b2c48;
+  --gse-ui-blankState-backgroundColor: #fbfcfe;
+  --gse-ui-blankState-borderRadius: 8px;
+  --gse-ui-accordion-header-height: 40px;
+  --gse-ui-accordion-header-padding: 10px 16px 10px 16px;
+  --gse-ui-accordion-header-chevronIcon: 16px;
+  --gse-ui-accordion-header-gap: 8px;
+  --gse-ui-accordion-header-default-foreground-labelColor: #1b2c48;
+  --gse-ui-accordion-header-default-foreground-chevronIcon-closed: #626e84;
+  --gse-ui-accordion-header-default-foreground-chevronIcon-open: #252e78;
+  --gse-ui-accordion-header-default-foreground-chevronIcon-hover: #3742a2;
+  --gse-ui-accordion-header-label-defaultText: 700 14px/20px Roboto;
+  --gse-ui-accordion-reversedHeader-padding: 2px;
+  --gse-ui-accordion-menuItem-height: 32px;
+  --gse-ui-accordion-menuItem-padding: 0 12px 0 24px;
+  --gse-ui-accordion-menuItem-startIcon: 16px;
+  --gse-ui-accordion-menuItem-parentIcon: 16px;
+  --gse-ui-accordion-menuItem-gap: 8px;
+  --gse-ui-accordion-menuItem-default-foreground-startIconColor: #1b2c48;
+  --gse-ui-accordion-menuItem-default-foreground-labelColor: #1b2c48;
+  --gse-ui-accordion-menuItem-default-foreground-startShortcutColor: #626e84;
+  --gse-ui-accordion-menuItem-default-foreground-parentIconColor: #626e84;
+  --gse-ui-accordion-menuItem-hover-foreground-startIconColor: #1b2c48;
+  --gse-ui-accordion-menuItem-hover-foreground-labelColor: #1b2c48;
+  --gse-ui-accordion-menuItem-hover-foreground-startShortcutColor: #1b2c48;
+  --gse-ui-accordion-menuItem-hover-foreground-parentIconColor: #1b2c48;
+  --gse-ui-accordion-menuItem-hover-backgroundColor: #eff0fe;
+  --gse-ui-accordion-menuItem-selected-foreground-startIconColor: #1b2c48;
+  --gse-ui-accordion-menuItem-selected-foreground-labelColor: #1b2c48;
+  --gse-ui-accordion-menuItem-selected-foreground-startShortcutColor: #1b2c48;
+  --gse-ui-accordion-menuItem-selected-foreground-parentIconColor: #1b2c48;
+  --gse-ui-accordion-menuItem-selected-backgroundColor: #ced2fc;
+  --gse-ui-accordion-menuItem-focus-borderRadius: 4px;
+  --gse-ui-accordion-menuItem-label-defaultText: 400 12px/18px Roboto;
+  --gse-ui-accordion-menuItem-label-selectedText: 600 12px/18px Roboto;
+  --gse-ui-accordion-menuItem-shortcut-text: 400 14px/20px Roboto;
+  --gse-ui-accordion-focusBorder: 2px solid #7b88f7;
+  --gse-ui-accordion-contentItem-padding: 16px;
+  --gse-ui-accordion-contentItem-gap: 16px;
+  --gse-ui-accordion-contentItem-foregroundColor: #1b2c48;
+  --gse-ui-accordion-contentItem-backgroundColor: #ffffff;
+  --gse-ui-accordion-contentItem-defaultText: 400 12px/18px Roboto;
+  --gse-ui-accordion-wrapper-dividerBorder: 1px solid #c6c8ce;
+  --gse-ui-accordion-focus-offset-gap: 1px;
+  --gse-ui-accordion-contentPanel-paddingBottom: 4px;
+  --gse-ui-accordion-label-disabled-opacity: 0.5;
+}
+
+/*# sourceMappingURL=ui.css.map */