/**
 * Global Reset of all HTML Elements
 *
 * Resetting all of our HTML Elements ensures a smoother
 * visual transition between browsers. If you don't believe me,
 * try temporarily commenting out this block of code, then go
 * and look at Mozilla versus Safari, both good browsers with
 * a good implementation of CSS. The thing is, all browser CSS
 * defaults are different and at the end of the day if visual
 * consistency is what we're shooting for, then we need to
 * make sure we're resetting all spacing elements.
 *
 */
html,
body {
  border: 0;
  font-family: "Helvetica-Neue", "Helvetica", Arial, sans-serif;
  line-height: 1.5;
  margin: 0;
  padding: 0;
}
div,
span,
object,
iframe,
img,
table,
caption,
thead,
tbody,
tfoot,
tr,
tr,
td,
article,
aside,
canvas,
details,
figure,
hgroup,
menu,
nav,
footer,
header,
section,
summary,
mark,
audio,
video {
  border: 0;
  margin: 0;
  padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
address,
cit,
code,
del,
dfn,
em,
ins,
q,
samp,
small,
strong,
sub,
sup,
b,
i,
hr,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
legend,
label {
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
  margin: 0;
  padding: 0;
}
article,
aside,
canvas,
figure,
figure img,
figcaption,
hgroup,
footer,
header,
nav,
section,
audio,
video {
  display: block;
}
table {
  border-collapse: separate;
  border-spacing: 0;
}
table caption,
table th,
table td {
  text-align: left;
  vertical-align: middle;
}
a img {
  border: 0;
}
:focus {
  outline: 0;
}
@font-face {
  font-family: "Fira Regular";
  src: url(/style-editor/assets/fonts/FiraGO-Regular.efd740cb..ttf);
}
@font-face {
  font-family: "Fira Medium";
  src: url(/style-editor/assets/fonts/FiraGO-Medium.c20fbd9f..ttf);
}
@font-face {
  font-family: "Fira Light";
  src: url(/style-editor/assets/fonts/FiraGO-Light.90f3ecdd..ttf);
}
.dark-theme {
  --base-padding: 4px;
  --half-panel-margin: 1px;
  --panel-margin: 2px;
  --panel-body-border-radius: 4px;
  --panel-header-border-radius: 5px;
  --font-family: "Fira Regular";
  --font-family-subdued: "Fira Light";
  --font-family-emphasized: "Fira Medium";
  --text-size-dashboard-title: 18px;
  --text-size-dashboard-section-title: 16px;
  --text-size-dashboard-description: 16px;
  --text-size-big: 16px;
  --text-size-big-button: 14px;
  --text-size-big-input: 14px;
  --text-size-menu: 12px;
  --text-size-dialog: 14px;
  --text-size: 12px;
  --text-size-tiny: 10px;
  --text-size-super-tiny: 8px;
  --text-size-drag-and-drop-title: 20px;
  --text-size-dialog-big: 18px;
  --line-height-tiny: 12px;
  --line-height-menu: 16px;
  --line-height: 20px;
  --header-line-height: 24px;
  --line-height-dashboard-title: 26px;
  --line-height-dashboard-section-title: 24px;
  --line-height-dashboard-description: 24px;
  --line-height-drag-and-drop-title: 24px;
  --line-height-dialog-header: 16px;
  --line-height-dialog-content: 20px;
  --divider-thickness: 1px;
  --divider-spacing: 0px;
  --divider-padding: calc(4 * var(--base-padding));
  --popup-border-radius: 4px;
  --popup-border-radius-large: 8px;
  --popup-item-height-large: 40px;
  --popup-menu-width: 200px;
  --popup-footer-height: 64px;
  --popup-header-height: 64px;
  --popup-padding-h: 24px;
  --popup-padding-v: 20px;
  --white-popup-max-height: 280px;
  --popup-description-height: 200px;
  --popup-item-selection-height: 2px;
  --popup-image-width: 400px;
  --popup-image-height: 175px;
  --border-size: 1px;
  --border-size-highlighted: 2px;
  --border-radius: 4px;
  --button-icon-spacing: 8px;
  --input-height: 22px;
  --input-width: 93px;
  --number-input-width: var(--input-width);
  --file-input-width: var(--input-width);
  --dash-input-width: 125px;
  --input-prefix-width: 6px;
  --input-prefix-left-padding: 5px;
  --input-border-radius: 2px;
  --input-border-size: 1px;
  --input-padding: 4px;
  --input-icon-padding: 6px;
  --input-disabled-opacity: 0.5;
  --boolean-input-height: 16px;
  --sliding-toggle-height: 20px;
  --sliding-toggle-width: 40px;
  --input-animation-duration: 300ms;
  --input-animation-duration-quick: 100ms;
  --item-border-radius: 2px;
  --reduced-item-height: 28px;
  --main-item-height: 35px;
  --large-main-item-height: 48px;
  --icon-button-group-height: 28px;
  --icon-box-size: 16px;
  --icon-text-inline-size: var(--text-size);
  --icon-header-size: var(--header-line-height);
  --icon-big-size: 40px;
  --icon-padding-size: calc(2 * var(--base-padding));
  --tooltip-text-size: 13px;
  --tooltip-line-height: 18px;
  --tooltip-nibble-size: 6px;
  --tooltip-nibble-indentation: 18px;
  --tooltip-width: 200px;
  --tooltip-width-wide: 320px;
  --selected-item-selection-bar-width: 3px;
  --selected-group-item-selection-bar-width: 4px;
  --inactive-item-opacity: 0.4;
  --graph-width: 2px;
  --zoomlevel-line-width: 1px;
  --collapsible-margin: 12px;
  --scrollbar-width: 8px;
  --scrollbar-expanded-grabber-width: 6px;
  --scrollbar-grabber-width: 4px;
  --map-overlay-margin: 12px;
  --map-overlay-item-size: 40px;
  --menubar-size: 48px;
  --menubar-title-width: 300px;
  --menubar-select-menu-width: 150px;
  --menubar-icon-size: 32px;
  --menubar-lang-dropdown-height: 400px;
  --menubar-notification-dot-size: 8px;
  --menubar-scheme-selection-item-label-width: 200px;
  --search-field-height: 25px;
  --panel-small-width: 230px;
  --panel-width: 300px;
  --panel-large-width: 360px;
  --panel-tab-height: 25px;
  --panel-empty-content-top-offset: 200px;
  --panel-header-button-size: 20px;
  --slider-width: 4px;
  --slider-length: 82px;
  --slider-grabber-size: 14px;
  --slider-tick-length: 2px;
  --slider-tick-width: 1px;
  --slider-tick-offset: 1px;
  --navigation-bar-size: 40px;
  --drag-item-divider-height: 1px;
  --drag-item-divider-end-size: 5px;
  --notification-container-height: 32px;
  --notification-toast-height: 56px;
  --notification-animation-curve: cubic-bezier(0.7, 0, 0.5, 1.5);
  --notification-animation-duration: 200ms;
  --color-picker-height: 150px;
  --color-picker-crosshair-size: 15px;
  --color-picker-input-width: 70px;
  --color-picker-slider-track-height: 8px;
  --color-picker-slider-handle-size: 12px;
  --color-picker-container-width: 320px;
  --color-picker-eyedrop-size: 24px;
  --icon-picker-container-width: 254px;
  --icon-picker-container-height: 318px;
  --icon-picker-icon-size: 24px;
  --swatch-height: 22px;
  --swatch-width: 50px;
  --ga-blend-mode-btn-width: 52px;
  --basic-template-thumbnail-height: 40px;
  --basic-template-thumbnail-width: 56px;
  --basic-template-thumbnail-border: 2px;
  --basic-template-thumbnail-border-offset: 1px;
  --window-header-height: 73px;
  --extra-small-window-width: 468px;
  --extra-small-window-height: 212px;
  --small-window-width: 460px;
  --small-window-height: 280px;
  --medium-window-width: 380px;
  --medium-window-height: 320px;
  --big-window-width: 640px;
  --big-window-height: 520px;
  --wide-big-window-width: 720px;
  --wide-big-window-height: 520px;
  --wide-extra-big-window-width: 950px;
  --wide-extra-big-window-height: 520px;
  --fluid-window-height: calc(100vh - 200px);
  --fluid-window-width: calc(100vw - 512px);
  --search-bar-height: 50px;
  --icon-window-drag-area-height: 310px;
  --medium-area-height: 100px;
  --big-area-height: 180px;
  --extra-big-area-height: 320px;
  --icon-window-area-height: 393px;
  --drop-target-outline-size: 1px;
  --drop-target-outline-offset: 1px;
  --image-picker-crosshair-size: 8px;
  --image-picker-border-size: 2px;
  --icon-window-side-bar-width: 207px;
  --icon-window-icon-entity-width: 77px;
  --icon-window-icon-entity-height: 88px;
  --icon-window-icon-entity-background-size: 48px;
  --icon-window-icon-entity-background-size-small: 24px;
  --icon-window-change-view-header: 32px;
  --icon-window-change-item-text-width: 100px;
  --icon-window-change-item-indentation: 53px;
  --icon-window-resource-view-header: 64px;
  --icon-window-name-pill-container-width: 240px;
  --icon-window-name-pill-border-radius: 16px;
  --icon-window-item-border-width: 2px;
  --icon-window-notification-height: 32px;
  --medium-button-height: 24px;
  --button-height: 32px;
  --large-button-height: 40px;
  --dashboard-item-width: 340px;
  --dashboard-item-height: 160px;
  --dashboard-thumbnail-height: 176px;
  --dashboard-input-height: 32px;
  --component-highlight-thickness: 2px;
  --modifier-group-item-indentation: 24px;
  --region-specific-bar-width: 2px;
  --region-specific-bar-height: 16px;
  --modifier-affected-specific-margin: -20px;
  --modifier-affected-specific-tooltip-width: 296px;
  --tooltip-content-max-width: 225px;
  --modifier-overlay-panel-header-height: 38px;
  --drag-item-divider: #126EF8;
  --drag-item-highlight: #0f1621;
  --font-color-highlighted: #126EF8;
  --font-color-highlighted-emphasized: #d0e2fe;
  --font-color-emphasized: #ffffff;
  --font-color-active: #E9ECF2;
  --font-color: #CCD1DB;
  --font-color-subdued: #B8BFCC;
  --font-color-hint: var(--hds-gray-400);
  --font-color-disabled: #6A7483;
  --main-button-font-color: #CCD1DB;
  --main-button-font-color-emphasized: #ffffff;
  --font-color-menu: #CCD1DB;
  --font-color-tooltip: #ffffff;
  --font-color-group-item: #E9ECF2;
  --font-color-dialog: #FFFFFF;
  --font-color-oncolor: #ffffff;
  --font-color-oncolor-hover: rgba(247, 250, 253, 0.98);
  --font-color-oncolor-subdued: #333B47;
  --font-color-apply-modifier-btn: #DADFE7;
  --font-color-apply-modifier-btn-hover: #E9ECF2;
  --font-color-panel-notification: #E9ECF2;
  --disabled-item-group-text-color: #6A7483;
  --font-color-inactive-item-text: #CCD1DB;
  --font-color-item-text-hover: #ffffff;
  --font-color-hds-tertiary: rgba(225, 234, 254, 0.58);
  --font-color-hds-tertiary-hover: rgba(234, 241, 255, 0.7);
  --font-color-hds-tertiary-disabled: rgba(195, 205, 222, 0.35);
  --font-color-body: rgba(238, 242, 252, 0.83);
  --font-color-primary: rgba(242, 246, 252, 0.95);
  --font-color-primary-disabled: rgba(225, 234, 254, 0.58);
  --font-color-secondary: rgba(232, 239, 252, 0.78);
  --font-color-secondary-disabled: rgba(217, 231, 251, 0.45);
  --header-icon-color: rgba(255, 255, 255, 0.6);
  --active-icon-color: #E9ECF2;
  --active-icon-color-inverted: #000;
  --inactive-icon-color: #6A7483;
  --hint-icon-color: #A4ACBA;
  --disabled-icon-color: #6A7483;
  --action-icon-color: #B8BFCC;
  --disabled-action-icon-color: #6A7483;
  --error-icon-color: #CF001A;
  --warning-icon-color: #EDB41B;
  --warning-icon-color-hover: #E9A32D;
  --toggle-button-icon-color: #A4ACBA;
  --hover-toggle-button-icon-color: #CCD1DB;
  --inactive-icon-border-color: #6A7483;
  --icon-bg-hover-color: #4E5663;
  --modifier-input-hover-border-color: #B8BFCC;
  --panel-header-button-bg: #1b222c;
  --panel-tab-bg-unselected: rgba(15, 22, 33, 0.8);
  --divider-color: #333B47;
  --divider-color-ondark: rgba(255, 255, 255, 0.2);
  --sub-item-box-border-color: transparent;
  --sub-item-box-bg-color: #1C232E;
  --bg-color-ui: #161A22;
  --bg-color-panel-base: #1b222c;
  --bg-color-panel-content: #272d37;
  --bg-color-modifier-panel-content: #1C232E;
  --bg-color-panel-section: #3F4855;
  --bg-color-content: rgba(15, 22, 33, 0.4);
  --bg-color-item: #272F3A;
  --bg-color-item-selected: #1C232E;
  --bg-color-panel-dark: #0E1520;
  --bg-color-panel-header-dark: #1C232E;
  --bg-color-panel-section-dark: #333B47;
  --bg-color-panel-group-item-selected: #0E1520;
  --border-color-panel-item: #0E1520;
  --bg-color-item-highlighted: #333B47;
  --bg-color-item-header: #3f454d;
  --bg-color-button-group: #0E1520;
  --blur-popup-color: rgba(8, 23, 52, 0.6);
  --bg-color-popup: #0f1621;
  --bg-color-popup-item-hover: #126EF8;
  --bg-color-popup-divider: rgba(255, 255, 255, 0.2);
  --bg-window: #272d37;
  --bg-hds-secondary: #1C232E;
  --bg-window-content: rgba(15, 22, 33, 0.4);
  --bg-white-window-content: #ffffff;
  --bg-global-adjustments: #272F3A;
  --bg-window-header: #272F3A;
  --bg-global-adjustments: rgba(255, 255, 255, 0.9);
  --bg-color-inline-box: rgba(15, 22, 33, 0.4);
  --bg-color-empty-thumbnail: #333B47;
  --border-color: rgba(255, 255, 255, 0.1);
  --border-color-highlighted: #CCD1DB;
  --bg-selected-item: var(--hds-blue-ondark-600-020);
  --main-button-color: #126EF8;
  --main-button-color-hover: #0D5ED9;
  --action-text-button: #5FB2FF;
  --action-text-button-hover: #85C4FF;
  --normal-button-bg-color: rgba(0, 10, 25, 0.8);
  --normal-button-bg-color-hover: rgba(0, 10, 25, 0.8);
  --button-primary-bg: linear-gradient(270deg, #1BE0D7 0%, #3675F5 100%);
  --button-primary-bg-hover: linear-gradient(90deg, #6B9CFF 0%, #65EBE2 100%);
  --button-primary-bg-active: linear-gradient(90deg, #8FB4FF 0%, #85EFE8 100%);
  --button-primary-bg-disabled: linear-gradient(270deg, rgba(27, 224, 215, 0.6) 0%, rgba(54, 117, 245, 0.6) 100%);
  --button-primary-color: rgba(0, 10, 26, 0.8);
  --button-primary-color-disabled: rgba(217, 231, 251, 0.45);
  --button-secondary-bg: rgba(223, 239, 250, 0.12);
  --button-secondary-bg-hover: rgba(195, 207, 223, 0.2);
  --button-secondary-bg-active: rgba(201, 214, 232, 0.26);
  --button-secondary-bg-disabled: rgba(223, 239, 250, 0.12);
  --button-secondary-color: rgba(242, 246, 252, 0.95);
  --button-secondary-color-disabled: rgba(217, 231, 251, 0.45);
  --button-danger-bg: #840B2E;
  --button-danger-bg-hover: #990C34;
  --button-danger-bg-active: #E94F63;
  --button-danger-bg-disabled: rgba(233, 79, 99, 0.3);
  --button-danger-color: #ffffff;
  --button-warn-bg: #92600C;
  --button-warn-bg-hover: #E9A32D;
  --button-warn-bg-active: #92600C;
  --button-warn-bg-disabled: rgba(237, 181, 29, 0.3);
  --button-warn-color: rgba(15, 24, 36, 0.9);
  --button-warn-color-active: #FFFFFF;
  --button-oncolor-primary-bg: #1C232E;
  --button-oncolor-primary-color: rgba(242, 246, 252, 0.95);
  --button-oncolor-primary-bg-disabled: #1C232E;
  --button-oncolor-primary-color-disabled: rgba(217, 231, 251, 0.45);
  --button-oncolor-primary-bg-hover: #272F3A;
  --button-oncolor-primary-bg-active: #333B47;
  --button-apply-modifiers-bg: #333B47;
  --button-oncolor-secondary-bg: rgba(225, 234, 254, 0.58);
  --button-oncolor-secondary-color: rgba(0, 10, 26, 0.8);
  --button-oncolor-secondary-bg-disabled: rgba(225, 234, 254, 0.58);
  --button-oncolor-secondary-color-disabled: rgba(18, 41, 84, 0.3);
  --button-oncolor-secondary-bg-hover: rgba(234, 241, 255, 0.7);
  --button-oncolor-secondary-bg-active: rgba(237, 242, 252, 0.85);
  --button-apply-modifiers-bg-hover: #3F4855;
  --button-apply-modifiers-bg-disabled: #272F3A;
  --background-object: rgba(223, 239, 250, 0.12);
  --background-object-hover: rgba(195, 207, 223, 0.2);
  --button-apply-modifiers-bg: rgba(255, 255, 255, 0.8);
  --button-apply-modifiers-bg-hover: rgba(255, 255, 255, 0.7);
  --button-apply-modifiers-bg-disabled: rgba(255, 255, 255, 0.9);
  --button-apply-modifiers-border: #4791FF;
  --button-apply-modifiers-border-hover: #5FB2FF;
  --button-apply-modifiers-border-disabled: rgba(18, 110, 248, 0.4);
  --colorblind-popup-divider: rgba(218, 239, 250, 0.12);
  --colorblind-popup-header-bg-color: #0f1621;
  --colorblind-popup-body-bg-color: #1C232E;
  --colorblind-popup-body-font-color: #B8BFCC;
  --colorblind-popup-button-color: rgba(218, 239, 250, 0.12);
  --input-border-color-focussed: #126EF8;
  --input-border-color-active: #8890A0;
  --input-border-color-hover: #B8BFCC;
  --input-border-color-inactive: #6A7483;
  --input-border-color-error: #D35566;
  --input-bg-color-active: #1C232E;
  --input-bg-color-inactive: #272F3A;
  --input-bg-color-inactive-lighter: rgba(255, 255, 255, 0.1);
  --hds-input-bg-color: #1C232E;
  --hds-input-border: rgba(225, 234, 254, 0.58);
  --hds-input-border-color-focussed: #15BDB9;
  --hds-input-border-color-hover: rgba(234, 241, 255, 0.7);
  --hds-input-caret-color: rgba(242, 246, 252, 0.95);
  --hds-input-placeholder-color: rgba(225, 234, 254, 0.58);
  --hds-input-color: rgba(242, 246, 252, 0.95);
  --input-inner-shadow-color: rgba(0, 0, 0, 0.1);
  --input-caret-color: #126EF8;
  --input-slider-bg-color: rgba(255, 255, 255, 0.1);
  --input-slider-color: #126EF8;
  --slider-input-border-color: #8890A0;
  --slider-input-selected-border-color: #8890A0;
  --color-picker-slider-grabber-color: #ffffff;
  --color-picker-bg-color: #3F4855;
  --color-picker-input-border-color: #8890A0;
  --color-picker-input-bg-color: #333B47;
  --color-picker-input-color: #E9ECF2;
  --dropdown-bg-color-opened: #0f1621;
  --dropdown-item-color: #0f1621;
  --dropdown-item-color-selected: #272d37;
  --dropdown-item-color-hover: #0f1621;
  --shadow-color: rgba(15, 22, 33, 0.4);
  --drop-shadow-gradient: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, transparent 100%);
  --selected-item-marker-color: #126EF8;
  --selection-color: #126EF8;
  --selection-gradient: rgba(18, 110, 248, 0.1);
  --region-specific-color: var(--hds-purple-onlight-200);
  --region-specific-color-hover: var(--hds-purple-onlight-400);
  --region-specific-color-bg-hover: rgba(179, 156, 201, 0.8);
  --region-specific-color-bg-pressed: rgba(179, 156, 201, 0.9);
  --region-specific-bg-color: rgba(179, 156, 201, 0.3);
  --region-specific-icon-color: rgba(179, 156, 201, 0.4);
  --jp-region-specific-bg-color: #e8e1ef;
  --notification-color: #D35566;
  --notification-error-color: #CF001A;
  --notification-warning-color: #FFBD09;
  --notification-overlay-bg-color: #3F4855;
  --notification-overlay-bg-hover-color: #535C6B;
  --notification-overlay2-bg-color: #1C232E;
  --component-highlight-color: #A4ACBA;
  --component-highlight-color-subdued: #535C6B;
  --graph-color: var(--hds-background-inverse);
  --graph-stop: var(--hds-background-inverse);
  --graph-bg: transparent;
  --graph-border: var(--hds-foreground-tertiary-hover);
  --graph-border-hover: var(--hds-foreground-tertiary-press);
  --dash-color: #ffffff;
  --scrollbar-color: #333B47;
  --scrollbar-color-active: rgba(255, 255, 255, 0.2);
  --scrollbar-color-hover: rgba(255, 255, 255, 0.4);
  --slider-grabber-outline-color: transparent;
  --slider-tick-color: rgba(255, 255, 255, 0.4);
  --chart-item-color-selected: #126EF8;
  --chart-item-color: rgba(255, 255, 255, 0.2);
  --chart-selection-bg: rgba(255, 255, 255, 0.05);
  --color-swatch-border: #A4ACBA;
  --inactive-color-swatch: #6A7483;
  --map-picker-color-border: rgba(255, 255, 255, 0.1);
  --map-picker-no-color-bg: rgba(15, 22, 33, 0.6);
  --code-string-color: #126EF8;
  --drop-target-color: #126EF8;
  --path-type-color-text: #000;
  --path-type-color-scheme: #000;
  --path-type-color-layer: rgba(255, 255, 255, 0.1);
  --path-type-color-condition: rgba(255, 255, 255, 0.2);
  --path-type-color-styleset: #2E468F;
  --path-type-color-style: #2C48A1;
  --path-type-color-attribute: rgba(15, 22, 33, 0.4);
  --path-type-color-definition: #52A3DB;
  --path-type-color-subcondition: #3A7BDB;
  --path-type-color-zoomlevel: #000;
  --path-type-color-height: #000;
  --image-picker-popup-color: #ffffff;
  --grid-placement-hover: rgba(255, 255, 255, 0.6);
  --grid-placement-selected: #126EF8;
  --grid-placement-selected-secondary: rgba(18, 110, 248, 0.8);
  --grid-placement-unselected: rgba(255, 255, 255, 0.1);
  --tag-pill-bg-color: #0f1621;
  --tag-pill-included: #00A870;
  --tag-pill-excluded: #D35566;
  --help-bg-color: #D468A0;
  --bg-dashboard-item: #0f1621;
  --tooltip-bg: var(--hds-background-inverse);
  --tooltip-text: var(--hds-inverse-primary);
  --menu-bar-bg: #1C232E;
  --menu-bar-bg-hover: rgba(223, 239, 250, 0.12);
  --menu-bar-item-description-color: #A4ACBA;
  --notification-info-bg: #15BDB9;
  --notification-warning-bg: #92600C;
  --notification-confirmation-bg: #0A7651;
  --notification-error-bg: #840B2E;
  --backgrounds-background-object: rgba(218, 239, 250, 0.12);
  --modifier-dot--default-state: var(--hds-accent);
  --modifier-dot--hover-state: var(--hds-aqua-onlight-500);
  --modifier-header-bg: var(--hds-aqua-ondark-200);
  --modifier-preset-border: #343c46;
  --modifier-overlay-panel-preset-bg: #20353E;
  --modifier-overlay-panel-create-apply-modifiers-bg: #1E2C36;
  --modifier-overlay-panel-create-modifiers-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  --modifier-overlay-panel-create-apply-modifiers-active-bg: rgba(95, 178, 255, 0.2);
  --modifier-overlay-panel-drag-drop-box-bg: rgba(64, 71, 82, 0.5);
  --modifier-overlay-active-bg: #4b556399;
  --modifier-overlay-active-header-bg: #535d6c66;
  --modifier-overlay-active-border: #5D6875;
  --modifier-overlay-header-bg: rgba(234, 240, 250, 0.03);
  --scheme-selector-bar-bg: #1f364d;
  --scheme-selector-shadow: 0px 0px 2px 0px var(--Dropshadow-overlay-dropshadow-layer-A-overlay, rgba(0, 0, 0, 0.36)), 0px 6px 6px 0px var(--Dropshadow-overlay-dropshadow-layer-B-overlay, rgba(0, 0, 0, 0.18)), 0px 0px 21px 0px var(--Dropshadow-overlay-dropshadow-layer-C-overlay, rgba(0, 0, 0, 0.15)), 0px 13px 13px 0px var(--Dropshadow-overlay-dropshadow-layer-D-overlay, rgba(0, 0, 0, 0.24));
  --quick-tour-highlight: var(--hds-action);
  --file-entity-bg-hover: var(--hds-blue-ondark-600-015);
  --file-entity-bg-selected: var(--hds-blue-ondark-600-020);
  --thumbnail-border-color: var(--hds-foreground-secondary);
}
.white-theme {
  --base-padding: 4px;
  --half-panel-margin: 1px;
  --panel-margin: 2px;
  --panel-body-border-radius: 4px;
  --panel-header-border-radius: 5px;
  --font-family: "Fira Regular";
  --font-family-subdued: "Fira Light";
  --font-family-emphasized: "Fira Medium";
  --text-size-dashboard-title: 18px;
  --text-size-dashboard-section-title: 16px;
  --text-size-dashboard-description: 16px;
  --text-size-big: 16px;
  --text-size-big-button: 14px;
  --text-size-big-input: 14px;
  --text-size-menu: 12px;
  --text-size-dialog: 14px;
  --text-size: 12px;
  --text-size-tiny: 10px;
  --text-size-super-tiny: 8px;
  --text-size-drag-and-drop-title: 20px;
  --text-size-dialog-big: 18px;
  --line-height-tiny: 12px;
  --line-height-menu: 16px;
  --line-height: 20px;
  --header-line-height: 24px;
  --line-height-dashboard-title: 26px;
  --line-height-dashboard-section-title: 24px;
  --line-height-dashboard-description: 24px;
  --line-height-drag-and-drop-title: 24px;
  --line-height-dialog-header: 16px;
  --line-height-dialog-content: 20px;
  --divider-thickness: 1px;
  --divider-spacing: 0px;
  --divider-padding: calc(4 * var(--base-padding));
  --popup-border-radius: 4px;
  --popup-border-radius-large: 8px;
  --popup-item-height-large: 40px;
  --popup-menu-width: 200px;
  --popup-footer-height: 64px;
  --popup-header-height: 64px;
  --popup-padding-h: 24px;
  --popup-padding-v: 20px;
  --white-popup-max-height: 280px;
  --popup-description-height: 200px;
  --popup-item-selection-height: 2px;
  --popup-image-width: 400px;
  --popup-image-height: 175px;
  --border-size: 1px;
  --border-size-highlighted: 2px;
  --border-radius: 4px;
  --button-icon-spacing: 8px;
  --input-height: 22px;
  --input-width: 93px;
  --number-input-width: var(--input-width);
  --file-input-width: var(--input-width);
  --dash-input-width: 125px;
  --input-prefix-width: 6px;
  --input-prefix-left-padding: 5px;
  --input-border-radius: 2px;
  --input-border-size: 1px;
  --input-padding: 4px;
  --input-icon-padding: 6px;
  --input-disabled-opacity: 0.5;
  --boolean-input-height: 16px;
  --sliding-toggle-height: 20px;
  --sliding-toggle-width: 40px;
  --input-animation-duration: 300ms;
  --input-animation-duration-quick: 100ms;
  --item-border-radius: 2px;
  --reduced-item-height: 28px;
  --main-item-height: 35px;
  --large-main-item-height: 48px;
  --icon-button-group-height: 28px;
  --icon-box-size: 16px;
  --icon-text-inline-size: var(--text-size);
  --icon-header-size: var(--header-line-height);
  --icon-big-size: 40px;
  --icon-padding-size: calc(2 * var(--base-padding));
  --tooltip-text-size: 13px;
  --tooltip-line-height: 18px;
  --tooltip-nibble-size: 6px;
  --tooltip-nibble-indentation: 18px;
  --tooltip-width: 200px;
  --tooltip-width-wide: 320px;
  --selected-item-selection-bar-width: 3px;
  --selected-group-item-selection-bar-width: 4px;
  --inactive-item-opacity: 0.4;
  --graph-width: 2px;
  --zoomlevel-line-width: 1px;
  --collapsible-margin: 12px;
  --scrollbar-width: 8px;
  --scrollbar-expanded-grabber-width: 6px;
  --scrollbar-grabber-width: 4px;
  --map-overlay-margin: 12px;
  --map-overlay-item-size: 40px;
  --menubar-size: 48px;
  --menubar-title-width: 300px;
  --menubar-select-menu-width: 150px;
  --menubar-icon-size: 32px;
  --menubar-lang-dropdown-height: 400px;
  --menubar-notification-dot-size: 8px;
  --menubar-scheme-selection-item-label-width: 200px;
  --search-field-height: 25px;
  --panel-small-width: 230px;
  --panel-width: 300px;
  --panel-large-width: 360px;
  --panel-tab-height: 25px;
  --panel-empty-content-top-offset: 200px;
  --panel-header-button-size: 20px;
  --slider-width: 4px;
  --slider-length: 82px;
  --slider-grabber-size: 14px;
  --slider-tick-length: 2px;
  --slider-tick-width: 1px;
  --slider-tick-offset: 1px;
  --navigation-bar-size: 40px;
  --drag-item-divider-height: 1px;
  --drag-item-divider-end-size: 5px;
  --notification-container-height: 32px;
  --notification-toast-height: 56px;
  --notification-animation-curve: cubic-bezier(0.7, 0, 0.5, 1.5);
  --notification-animation-duration: 200ms;
  --color-picker-height: 150px;
  --color-picker-crosshair-size: 15px;
  --color-picker-input-width: 70px;
  --color-picker-slider-track-height: 8px;
  --color-picker-slider-handle-size: 12px;
  --color-picker-container-width: 320px;
  --color-picker-eyedrop-size: 24px;
  --icon-picker-container-width: 254px;
  --icon-picker-container-height: 318px;
  --icon-picker-icon-size: 24px;
  --swatch-height: 22px;
  --swatch-width: 50px;
  --ga-blend-mode-btn-width: 52px;
  --basic-template-thumbnail-height: 40px;
  --basic-template-thumbnail-width: 56px;
  --basic-template-thumbnail-border: 2px;
  --basic-template-thumbnail-border-offset: 1px;
  --window-header-height: 73px;
  --extra-small-window-width: 468px;
  --extra-small-window-height: 212px;
  --small-window-width: 460px;
  --small-window-height: 280px;
  --medium-window-width: 380px;
  --medium-window-height: 320px;
  --big-window-width: 640px;
  --big-window-height: 520px;
  --wide-big-window-width: 720px;
  --wide-big-window-height: 520px;
  --wide-extra-big-window-width: 950px;
  --wide-extra-big-window-height: 520px;
  --fluid-window-height: calc(100vh - 200px);
  --fluid-window-width: calc(100vw - 512px);
  --search-bar-height: 50px;
  --icon-window-drag-area-height: 310px;
  --medium-area-height: 100px;
  --big-area-height: 180px;
  --extra-big-area-height: 320px;
  --icon-window-area-height: 393px;
  --drop-target-outline-size: 1px;
  --drop-target-outline-offset: 1px;
  --image-picker-crosshair-size: 8px;
  --image-picker-border-size: 2px;
  --icon-window-side-bar-width: 207px;
  --icon-window-icon-entity-width: 77px;
  --icon-window-icon-entity-height: 88px;
  --icon-window-icon-entity-background-size: 48px;
  --icon-window-icon-entity-background-size-small: 24px;
  --icon-window-change-view-header: 32px;
  --icon-window-change-item-text-width: 100px;
  --icon-window-change-item-indentation: 53px;
  --icon-window-resource-view-header: 64px;
  --icon-window-name-pill-container-width: 240px;
  --icon-window-name-pill-border-radius: 16px;
  --icon-window-item-border-width: 2px;
  --icon-window-notification-height: 32px;
  --medium-button-height: 24px;
  --button-height: 32px;
  --large-button-height: 40px;
  --dashboard-item-width: 340px;
  --dashboard-item-height: 160px;
  --dashboard-thumbnail-height: 176px;
  --dashboard-input-height: 32px;
  --component-highlight-thickness: 2px;
  --modifier-group-item-indentation: 24px;
  --region-specific-bar-width: 2px;
  --region-specific-bar-height: 16px;
  --modifier-affected-specific-margin: -20px;
  --modifier-affected-specific-tooltip-width: 296px;
  --tooltip-content-max-width: 225px;
  --modifier-overlay-panel-header-height: 38px;
  --drag-item-divider: #126EF8;
  --drag-item-highlight: rgba(15, 22, 33, 0.1);
  --font-color-highlighted: #126EF8;
  --font-color-highlighted-emphasized: #d0e2fe;
  --font-color-emphasized: #0E1520;
  --font-color-active: #1C232E;
  --font-color: #272F3A;
  --font-color-subdued: #535C6B;
  --font-color-hint: var(--hds-gray-600);
  --font-color-disabled: #8890A0;
  --main-button-font-color: #272F3A;
  --main-button-font-color-emphasized: #0f1621;
  --font-color-menu: #535C6B;
  --font-color-tooltip: #1C232E;
  --font-color-group-item: #1C232E;
  --font-color-dialog: rgba(16, 23, 35, 0.95);
  --font-color-oncolor: #ffffff;
  --font-color-oncolor-hover: #ffffff;
  --font-color-oncolor-subdued: rgba(225, 234, 254, 0.58);
  --font-color-panel-notification: #E9ECF2;
  --font-color-inactive-item-text: #333B47;
  --font-color-item-text-hover: #0f1621;
  --font-color-hds-tertiary: rgba(34, 54, 89, 0.41);
  --font-color-hds-tertiary-hover: rgba(19, 35, 67, 0.5);
  --font-color-hds-tertiary-disabled: rgba(0, 26, 77, 0.2);
  --font-color-body: #3F4855;
  --font-color-primary: rgba(16, 23, 35, 0.95);
  --font-color-primary-disabled: rgba(0, 26, 77, 0.2);
  --font-color-secondary: rgba(7, 23, 49, 0.6);
  --font-color-secondary-disabled: rgba(0, 26, 77, 0.2);
  --header-icon-color: #535C6B;
  --active-icon-color: #1C232E;
  --active-icon-color-inverted: #ffffff;
  --inactive-icon-color: #6A7483;
  --disabled-item-group-text-color: #6A7483;
  --hint-icon-color: #6A7483;
  --disabled-icon-color: #8890A0;
  --action-icon-color: #535C6B;
  --disabled-action-icon-color: #8890A0;
  --error-icon-color: #CF001A;
  --warning-icon-color: #9E6400;
  --warning-icon-color-hover: #FAAA1E;
  --inactive-icon-border-color: #A4ACBA;
  --slider-input-border-color: #A4ACBA;
  --panel-header-button-bg: #f3f3f4;
  --panel-tab-bg-unselected: rgba(255, 255, 255, 0.8);
  --divider-color: rgba(255, 255, 255, 0.2);
  --divider-color-ondark: rgba(15, 22, 33, 0.2);
  --sub-item-box-border-color: #E9ECF2;
  --sub-item-box-bg-color: #CCD1DB;
  --bg-color-ui: #f3f3f4;
  --bg-color-panel-base: #ffffff;
  --bg-color-panel-content: #e7e8e9;
  --bg-color-modifier-panel-content: #ffffff;
  --bg-color-panel-section: #ffffff;
  --bg-color-content: rgba(255, 255, 255, 0.4);
  --bg-color-panel-dark: #ffffff;
  --bg-color-panel-header-dark: #ffffff;
  --bg-color-panel-group-item-selected: #ffffff;
  --border-color-panel-item: #ffffff;
  --bg-color-item: rgba(255, 255, 255, 0.9);
  --bg-color-item-selected: rgba(255, 255, 255, 0.95);
  --bg-color-item-highlighted: rgba(255, 255, 255, 0.6);
  --bg-color-item-header: #cfd0d3;
  --bg-color-button-group: #f3f3f4;
  --blur-popup-color: rgba(8, 23, 52, 0.6);
  --bg-color-popup: #ffffff;
  --bg-color-popup-item-hover: #ffffff;
  --bg-color-popup-divider: rgba(15, 55, 115, 0.1);
  --bg-window: #ffffff;
  --bg-hds-secondary: #ffffff;
  --bg-window-content: rgba(255, 255, 255, 0.4);
  --bg-window-header: #e7e8e9;
  --bg-global-adjustments: rgba(255, 255, 255, 0.9);
  --bg-color-inline-box: rgba(255, 255, 255, 0.4);
  --border-color: rgba(15, 22, 33, 0.1);
  --border-color-highlighted: #1C232E;
  --bg-selected-item: var(--hds-blue-onlight-400-020);
  --main-button-color: #126EF8;
  --main-button-color-hover: #0D5ED9;
  --action-text-button: #126EF8;
  --action-text-button-hover: #0D5ED9;
  --normal-button-bg-color: rgba(255, 255, 255, 0.8);
  --normal-button-bg-color-hover: rgba(255, 255, 255, 0.95);
  --button-primary-bg: linear-gradient(270deg, #65EBE2 0%, #6B9CFF 100%);
  --button-primary-bg-hover: linear-gradient(90deg, #3675F5 0%, #1BE0D7 100%);
  --button-primary-bg-active: linear-gradient(90deg, #1854CC 0%, #08CCC3 100%);
  --button-primary-bg-disabled: linear-gradient(270deg, rgba(125, 230, 225, 0.4) 0%, rgba(128, 170, 255, 0.4) 100%);
  --button-primary-color: rgba(16, 25, 37, 0.9);
  --button-primary-color-disabled: rgba(18, 41, 84, 0.3);
  --button-secondary-bg: rgba(0, 55, 141, 0.05);
  --button-secondary-bg-hover: rgba(15, 55, 115, 0.1);
  --button-secondary-bg-active: rgba(30, 43, 70, 0.6);
  --button-secondary-bg-disabled: rgba(0, 55, 141, 0.05);
  --button-secondary-color: rgba(16, 23, 35, 0.95);
  --button-secondary-color-disabled: rgba(18, 41, 84, 0.3);
  --button-danger-bg: #CF001A;
  --button-danger-bg-hover: #A5002F;
  --button-danger-bg-active: #8F0029;
  --button-danger-bg-disabled: rgba(207, 0, 26, 0.3);
  --button-danger-color: #ffffff;
  --button-warn-bg: #FFBD09;
  --button-warn-bg-hover: #FAAA1E;
  --button-warn-bg-active: #9E6400;
  --button-warn-bg-disabled: rgba(255, 190, 10, 0.3);
  --button-warn-color: rgba(15, 24, 36, 0.9);
  --button-warn-color-active: #FFFFFF;
  --button-oncolor-primary-bg: #ffffff;
  --button-oncolor-primary-color: rgba(16, 23, 35, 0.95);
  --button-oncolor-primary-bg-disabled: #ffffff;
  --button-oncolor-primary-color-disabled: rgba(18, 41, 84, 0.3);
  --button-oncolor-primary-bg-hover: #F2F5F9;
  --button-oncolor-primary-bg-active: #DADFE7;
  --button-oncolor-secondary-bg: rgba(34, 54, 89, 0.41);
  --button-oncolor-secondary-color: #ffffff;
  --button-oncolor-secondary-bg-disabled: rgba(34, 54, 89, 0.41);
  --button-oncolor-secondary-color-disabled: rgba(225, 234, 254, 0.58);
  --button-oncolor-secondary-bg-hover: rgba(19, 35, 67, 0.5);
  --button-oncolor-secondary-bg-active: rgba(7, 23, 49, 0.6);
  --background-object: rgba(0, 55, 141, 0.05);
  --background-object-hover: rgba(15, 55, 115, 0.1);
  --button-apply-modifiers-bg: rgba(255, 255, 255, 0.8);
  --button-apply-modifiers-bg-hover: rgba(255, 255, 255, 0.7);
  --button-apply-modifiers-bg-disabled: rgba(255, 255, 255, 0.9);
  --button-apply-modifiers-border: #4791FF;
  --button-apply-modifiers-border-hover: #5FB2FF;
  --button-apply-modifiers-border-disabled: rgba(18, 110, 248, 0.4);
  --colorblind-popup-divider: rgba(15, 54, 113, 0.1);
  --colorblind-popup-header-bg-color: #ffffff;
  --colorblind-popup-body-bg-color: #F2F5F9;
  --colorblind-popup-body-font-color: #535C6B;
  --colorblind-popup-button-color: rgba(15, 54, 113, 0.1);
  --input-border-color-focussed: #126EF8;
  --input-border-color-active: #0f1621;
  --input-border-color-hover: rgba(15, 22, 33, 0.3);
  --input-border-color-inactive: #6A7483;
  --input-border-color-error: #D35566;
  --input-bg-color-active: #ffffff;
  --input-bg-color-inactive: rgba(255, 255, 255, 0.3);
  --input-bg-color-inactive-lighter: rgba(255, 255, 255, 0.5);
  --hds-input-bg-color: #ffffff;
  --hds-input-border: rgba(34, 54, 89, 0.41);
  --hds-input-border-color-focussed: #0BC7C2;
  --hds-input-border-color-hover: rgba(19, 35, 67, 0.5);
  --hds-input-caret-color: rgba(16, 23, 35, 0.95);
  --hds-input-placeholder-color: rgba(34, 54, 89, 0.41);
  --hds-input-color: rgba(16, 23, 35, 0.95);
  --input-inner-shadow-color: rgba(0, 0, 0, 0.1);
  --input-caret-color: #126EF8;
  --input-slider-bg-color: rgba(15, 22, 33, 0.1);
  --input-slider-color: #126EF8;
  --color-picker-slider-grabber-color: #ffffff;
  --color-picker-bg-color: #3F4855;
  --color-picker-input-border-color: #8890A0;
  --color-picker-input-bg-color: #1C232E;
  --color-picker-input-color: #E9ECF2;
  --dropdown-bg-color-opened: #e7e8e9;
  --dropdown-item-color: #ffffff;
  --dropdown-item-color-selected: #e7e8e9;
  --dropdown-item-color-hover: #ffffff;
  --shadow-color: rgba(15, 22, 33, 0.4);
  --drop-shadow-gradient: linear-gradient(to bottom, rgba(233, 236, 242, 0.6) 0%, transparent 100%);
  --selected-item-marker-color: #126EF8;
  --selection-color: #126EF8;
  --selection-gradient: rgba(18, 110, 248, 0.1);
  --region-specific-color: var(--hds-purple-onlight-400);
  --region-specific-color-hover: var(--hds-purple-onlight-200);
  --region-specific-color-bg-hover: rgba(140, 107, 174, 0.8);
  --region-specific-color-bg-pressed: rgba(140, 107, 174, 0.9);
  --region-specific-icon-color: rgba(247, 250, 253, 0.2);
  --region-specific-bg-color: rgba(179, 156, 201, 0.3);
  --jp-region-specific-bg-color: #49475d;
  --notification-color: #D35566;
  --notification-error-color: #CF001A;
  --notification-warning-color: #FFBD09;
  --notification-overlay-bg-color: #3F4855;
  --notification-overlay-bg-hover-color: #535C6B;
  --notification-overlay2-bg-color: #1C232E;
  --component-highlight-color: #6A7483;
  --component-highlight-color-subdued: #A4ACBA;
  --graph-color: var(--hds-background-inverse);
  --graph-stop: var(--hds-background-inverse);
  --graph-bg: var(--hds-background-primary);
  --graph-border: var(--hds-foreground-tertiary-hover);
  --graph-border-hover: var(--hds-foreground-tertiary-press);
  --dash-color: #0f1621;
  --scrollbar-color: rgba(15, 22, 33, 0.2);
  --scrollbar-color-active: rgba(15, 22, 33, 0.2);
  --scrollbar-color-hover: rgba(15, 22, 33, 0.4);
  --slider-grabber-outline-color: rgba(218, 239, 250, 0.12);
  --slider-tick-color: rgba(15, 22, 33, 0.4);
  --chart-item-color-selected: #126EF8;
  --chart-item-color: rgba(15, 22, 33, 0.2);
  --chart-selection-bg: rgba(15, 22, 33, 0.05);
  --color-swatch-border: #272F3A;
  --inactive-color-swatch: #6A7483;
  --hover-inactive-color-swatch: #A4ACBA;
  --map-picker-color-border: rgba(15, 22, 33, 0.1);
  --map-picker-no-color-bg: rgba(255, 255, 255, 0.6);
  --code-string-color: #126EF8;
  --drop-target-color: #126EF8;
  --path-type-color-text: #000;
  --path-type-color-scheme: #000;
  --path-type-color-layer: rgba(255, 255, 255, 0.1);
  --path-type-color-condition: rgba(255, 255, 255, 0.2);
  --path-type-color-styleset: #2E468F;
  --path-type-color-style: #2C48A1;
  --path-type-color-attribute: rgba(15, 22, 33, 0.4);
  --path-type-color-definition: #52A3DB;
  --path-type-color-subcondition: #3A7BDB;
  --path-type-color-zoomlevel: #000;
  --path-type-color-height: #000;
  --image-picker-popup-color: #ffffff;
  --grid-placement-hover: rgba(15, 22, 33, 0.6);
  --grid-placement-selected: #126EF8;
  --grid-placement-selected-secondary: rgba(18, 110, 248, 0.8);
  --grid-placement-unselected: rgba(15, 22, 33, 0.1);
  --tag-pill-bg-color: #ffffff;
  --tag-pill-included: #00C78F;
  --tag-pill-excluded: #EC610E;
  --help-bg-color: #D468A0;
  --bg-dashboard-item: #ffffff;
  --tooltip-bg: var(--hds-background-inverse);
  --tooltip-text: var(--hds-inverse-primary);
  --menu-bar-bg: rgba(255, 255, 255, 0.95);
  --menu-bar-bg-hover: rgba(0, 55, 141, 0.05);
  --menu-bar-item-description-color: #A4ACBA;
  --notification-info-bg: #15BDB9;
  --notification-warning-bg: #92600C;
  --notification-confirmation-bg: #0A7651;
  --notification-error-bg: #840B2E;
  --backgrounds-background-object: rgba(218, 239, 250, 0.12);
  --modifier-header-bg: var(--hds-aqua-onlight-400);
  --modifier-preset-border: #e7ebf1;
  --modifier-dot--default-state: var(--hds-accent);
  --modifier-dot--hover-state: var(--hds-aqua-onlight-500);
  --modifier-overlay-panel-preset-bg: #EDFBFA;
  --modifier-overlay-panel-create-apply-modifiers-bg: #F6FDFD;
  --modifier-overlay-panel-create-modifiers-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.08);
  --modifier-overlay-panel-create-apply-modifiers-active-bg: rgba(95, 178, 255, 0.2);
  --modifier-overlay-panel-drag-drop-box-bg: rgba(64, 71, 82, 0.5);
  --modifier-overlay-active-bg: #e3e6eb99;
  --modifier-overlay-active-header-bg: #dddfe466;
  --modifier-overlay-active-border: #CED4DF;
  --modifier-overlay-header-bg: #00378f08;
  --scheme-selector-bar-bg: #dae6fa;
  --scheme-selector-shadow: 0px 0px 2px 0px var(--Dropshadow-overlay-dropshadow-layer-A-overlay, rgba(0, 25, 75, 0.12)), 0px 6px 6px 0px var(--Dropshadow-overlay-dropshadow-layer-B-overlay, rgba(0, 25, 75, 0.06)), 0px 0px 21px 0px var(--Dropshadow-overlay-dropshadow-layer-C-overlay, rgba(0, 25, 75, 0.05)), 0px 13px 13px 0px var(--Dropshadow-overlay-dropshadow-layer-D-overlay, rgba(0, 25, 75, 0.08));
  --quick-tour-highlight: var(--hds-blue-ondark-400);
  --file-entity-bg-hover: var(--hds-blue-onlight-400-010);
  --file-entity-bg-selected: var(--hds-blue-onlight-400-020);
  --thumbnail-border-color: var(--hds-foreground-divider);
}
.spacer {
  width: 1px;
  height: 1px;
  flex-grow: 1;
}
.nibble-top-start {
  box-shadow: 0 1px 4px 0 var(--shadow-color);
  width: calc(4 * var(--base-padding));
  height: calc(4 * var(--base-padding));
  background-color: var(--tooltip-bg);
  position: relative;
  margin-left: var(--tooltip-nibble-indentation);
  margin-right: auto;
}
.nibble-top-start.with-border {
  z-index: 3;
  border-top: 1px solid var(--button-oncolor-primary-color-disabled);
  border-left: 1px solid var(--button-oncolor-primary-color-disabled);
}
.nibble-top-center {
  box-shadow: 0 1px 4px 0 var(--shadow-color);
  width: calc(4 * var(--base-padding));
  height: calc(4 * var(--base-padding));
  background-color: var(--tooltip-bg);
  position: relative;
  margin-left: auto;
  margin-right: auto;
}
.nibble-top-center.with-border {
  z-index: 3;
  border-top: 1px solid var(--button-oncolor-primary-color-disabled);
  border-left: 1px solid var(--button-oncolor-primary-color-disabled);
}
.nibble-top-end {
  box-shadow: 0 1px 4px 0 var(--shadow-color);
  width: calc(4 * var(--base-padding));
  height: calc(4 * var(--base-padding));
  background-color: var(--tooltip-bg);
  position: relative;
  margin-left: auto;
  margin-right: var(--tooltip-nibble-indentation);
}
.nibble-top-end.with-border {
  z-index: 3;
  border-top: 1px solid var(--button-oncolor-primary-color-disabled);
  border-left: 1px solid var(--button-oncolor-primary-color-disabled);
}
.nibble-top-unaligned {
  box-shadow: 0 1px 4px 0 var(--shadow-color);
  width: calc(4 * var(--base-padding));
  height: calc(4 * var(--base-padding));
  background-color: var(--tooltip-bg);
  position: relative;
}
.nibble-top-unaligned.with-border {
  z-index: 3;
  border-top: 1px solid var(--button-oncolor-primary-color-disabled);
  border-left: 1px solid var(--button-oncolor-primary-color-disabled);
}
.nibble-right-start {
  box-shadow: 0 1px 4px 0 var(--shadow-color);
  width: calc(4 * var(--base-padding));
  height: calc(4 * var(--base-padding));
  background-color: var(--tooltip-bg);
  position: relative;
  margin-top: var(--tooltip-nibble-indentation);
  margin-bottom: auto;
}
.nibble-right-start.with-border {
  z-index: 3;
  border-top: 1px solid var(--button-oncolor-primary-color-disabled);
  border-right: 1px solid var(--button-oncolor-primary-color-disabled);
}
.nibble-right-center {
  box-shadow: 0 1px 4px 0 var(--shadow-color);
  width: calc(4 * var(--base-padding));
  height: calc(4 * var(--base-padding));
  background-color: var(--tooltip-bg);
  position: relative;
  margin-top: auto;
  margin-bottom: auto;
}
.nibble-right-center.with-border {
  z-index: 3;
  border-top: 1px solid var(--button-oncolor-primary-color-disabled);
  border-right: 1px solid var(--button-oncolor-primary-color-disabled);
}
.nibble-right-end {
  box-shadow: 0 1px 4px 0 var(--shadow-color);
  width: calc(4 * var(--base-padding));
  height: calc(4 * var(--base-padding));
  background-color: var(--tooltip-bg);
  position: relative;
  margin-top: auto;
  margin-bottom: var(--tooltip-nibble-indentation);
}
.nibble-right-end.with-border {
  z-index: 3;
  border-top: 1px solid var(--button-oncolor-primary-color-disabled);
  border-right: 1px solid var(--button-oncolor-primary-color-disabled);
}
.nibble-right-unaligned {
  box-shadow: 0 1px 4px 0 var(--shadow-color);
  width: calc(4 * var(--base-padding));
  height: calc(4 * var(--base-padding));
  background-color: var(--tooltip-bg);
  position: relative;
}
.nibble-right-unaligned.with-border {
  z-index: 3;
  border-top: 1px solid var(--button-oncolor-primary-color-disabled);
  border-right: 1px solid var(--button-oncolor-primary-color-disabled);
}
.nibble-bottom-start {
  box-shadow: 0 1px 4px 0 var(--shadow-color);
  width: calc(4 * var(--base-padding));
  height: calc(4 * var(--base-padding));
  background-color: var(--tooltip-bg);
  position: relative;
  margin-left: var(--tooltip-nibble-indentation);
  margin-right: auto;
}
.nibble-bottom-start.with-border {
  z-index: 3;
  border-bottom: 1px solid var(--button-oncolor-primary-color-disabled);
  border-right: 1px solid var(--button-oncolor-primary-color-disabled);
}
.nibble-bottom-center {
  box-shadow: 0 1px 4px 0 var(--shadow-color);
  width: calc(4 * var(--base-padding));
  height: calc(4 * var(--base-padding));
  background-color: var(--tooltip-bg);
  position: relative;
  margin-left: auto;
  margin-right: auto;
}
.nibble-bottom-center.with-border {
  z-index: 3;
  border-bottom: 1px solid var(--button-oncolor-primary-color-disabled);
  border-right: 1px solid var(--button-oncolor-primary-color-disabled);
}
.nibble-bottom-end {
  box-shadow: 0 1px 4px 0 var(--shadow-color);
  width: calc(4 * var(--base-padding));
  height: calc(4 * var(--base-padding));
  background-color: var(--tooltip-bg);
  position: relative;
  margin-left: auto;
  margin-right: var(--tooltip-nibble-indentation);
}
.nibble-bottom-end.with-border {
  z-index: 3;
  border-bottom: 1px solid var(--button-oncolor-primary-color-disabled);
  border-right: 1px solid var(--button-oncolor-primary-color-disabled);
}
.nibble-bottom-unaligned {
  box-shadow: 0 1px 4px 0 var(--shadow-color);
  width: calc(4 * var(--base-padding));
  height: calc(4 * var(--base-padding));
  background-color: var(--tooltip-bg);
  position: relative;
}
.nibble-bottom-unaligned.with-border {
  z-index: 3;
  border-bottom: 1px solid var(--button-oncolor-primary-color-disabled);
  border-right: 1px solid var(--button-oncolor-primary-color-disabled);
}
.nibble-left-start {
  box-shadow: 0 1px 4px 0 var(--shadow-color);
  width: calc(4 * var(--base-padding));
  height: calc(4 * var(--base-padding));
  background-color: var(--tooltip-bg);
  position: relative;
  margin-top: var(--tooltip-nibble-indentation);
  margin-bottom: auto;
}
.nibble-left-start.with-border {
  z-index: 3;
  border-bottom: 1px solid var(--button-oncolor-primary-color-disabled);
  border-left: 1px solid var(--button-oncolor-primary-color-disabled);
}
.nibble-left-center {
  box-shadow: 0 1px 4px 0 var(--shadow-color);
  width: calc(4 * var(--base-padding));
  height: calc(4 * var(--base-padding));
  background-color: var(--tooltip-bg);
  position: relative;
  margin-top: auto;
  margin-bottom: auto;
}
.nibble-left-center.with-border {
  z-index: 3;
  border-bottom: 1px solid var(--button-oncolor-primary-color-disabled);
  border-left: 1px solid var(--button-oncolor-primary-color-disabled);
}
.nibble-left-end {
  box-shadow: 0 1px 4px 0 var(--shadow-color);
  width: calc(4 * var(--base-padding));
  height: calc(4 * var(--base-padding));
  background-color: var(--tooltip-bg);
  position: relative;
  margin-top: auto;
  margin-bottom: var(--tooltip-nibble-indentation);
}
.nibble-left-end.with-border {
  z-index: 3;
  border-bottom: 1px solid var(--button-oncolor-primary-color-disabled);
  border-left: 1px solid var(--button-oncolor-primary-color-disabled);
}
.nibble-left-unaligned {
  box-shadow: 0 1px 4px 0 var(--shadow-color);
  width: calc(4 * var(--base-padding));
  height: calc(4 * var(--base-padding));
  background-color: var(--tooltip-bg);
  position: relative;
}
.nibble-left-unaligned.with-border {
  z-index: 3;
  border-bottom: 1px solid var(--button-oncolor-primary-color-disabled);
  border-left: 1px solid var(--button-oncolor-primary-color-disabled);
}
.popover-bottom .nibble-detect-start {
  box-shadow: 0 1px 4px 0 var(--shadow-color);
  width: calc(4 * var(--base-padding));
  height: calc(4 * var(--base-padding));
  background-color: var(--tooltip-bg);
  position: relative;
  margin-left: var(--tooltip-nibble-indentation);
  margin-right: auto;
}
.popover-bottom .nibble-detect-start.with-border {
  z-index: 3;
  border-top: 1px solid var(--button-oncolor-primary-color-disabled);
  border-left: 1px solid var(--button-oncolor-primary-color-disabled);
}
.popover-left .nibble-detect-start {
  box-shadow: 0 1px 4px 0 var(--shadow-color);
  width: calc(4 * var(--base-padding));
  height: calc(4 * var(--base-padding));
  background-color: var(--tooltip-bg);
  position: relative;
  margin-top: var(--tooltip-nibble-indentation);
  margin-bottom: auto;
}
.popover-left .nibble-detect-start.with-border {
  z-index: 3;
  border-top: 1px solid var(--button-oncolor-primary-color-disabled);
  border-right: 1px solid var(--button-oncolor-primary-color-disabled);
}
.popover-top .nibble-detect-start {
  box-shadow: 0 1px 4px 0 var(--shadow-color);
  width: calc(4 * var(--base-padding));
  height: calc(4 * var(--base-padding));
  background-color: var(--tooltip-bg);
  position: relative;
  margin-left: var(--tooltip-nibble-indentation);
  margin-right: auto;
}
.popover-top .nibble-detect-start.with-border {
  z-index: 3;
  border-bottom: 1px solid var(--button-oncolor-primary-color-disabled);
  border-right: 1px solid var(--button-oncolor-primary-color-disabled);
}
.popover-right .nibble-detect-start {
  box-shadow: 0 1px 4px 0 var(--shadow-color);
  width: calc(4 * var(--base-padding));
  height: calc(4 * var(--base-padding));
  background-color: var(--tooltip-bg);
  position: relative;
  margin-top: var(--tooltip-nibble-indentation);
  margin-bottom: auto;
}
.popover-right .nibble-detect-start.with-border {
  z-index: 3;
  border-bottom: 1px solid var(--button-oncolor-primary-color-disabled);
  border-left: 1px solid var(--button-oncolor-primary-color-disabled);
}
.popover-bottom .nibble-detect-center {
  box-shadow: 0 1px 4px 0 var(--shadow-color);
  width: calc(4 * var(--base-padding));
  height: calc(4 * var(--base-padding));
  background-color: var(--tooltip-bg);
  position: relative;
  margin-left: auto;
  margin-right: auto;
}
.popover-bottom .nibble-detect-center.with-border {
  z-index: 3;
  border-top: 1px solid var(--button-oncolor-primary-color-disabled);
  border-left: 1px solid var(--button-oncolor-primary-color-disabled);
}
.popover-left .nibble-detect-center {
  box-shadow: 0 1px 4px 0 var(--shadow-color);
  width: calc(4 * var(--base-padding));
  height: calc(4 * var(--base-padding));
  background-color: var(--tooltip-bg);
  position: relative;
  margin-top: auto;
  margin-bottom: auto;
}
.popover-left .nibble-detect-center.with-border {
  z-index: 3;
  border-top: 1px solid var(--button-oncolor-primary-color-disabled);
  border-right: 1px solid var(--button-oncolor-primary-color-disabled);
}
.popover-top .nibble-detect-center {
  box-shadow: 0 1px 4px 0 var(--shadow-color);
  width: calc(4 * var(--base-padding));
  height: calc(4 * var(--base-padding));
  background-color: var(--tooltip-bg);
  position: relative;
  margin-left: auto;
  margin-right: auto;
}
.popover-top .nibble-detect-center.with-border {
  z-index: 3;
  border-bottom: 1px solid var(--button-oncolor-primary-color-disabled);
  border-right: 1px solid var(--button-oncolor-primary-color-disabled);
}
.popover-right .nibble-detect-center {
  box-shadow: 0 1px 4px 0 var(--shadow-color);
  width: calc(4 * var(--base-padding));
  height: calc(4 * var(--base-padding));
  background-color: var(--tooltip-bg);
  position: relative;
  margin-top: auto;
  margin-bottom: auto;
}
.popover-right .nibble-detect-center.with-border {
  z-index: 3;
  border-bottom: 1px solid var(--button-oncolor-primary-color-disabled);
  border-left: 1px solid var(--button-oncolor-primary-color-disabled);
}
.popover-bottom .nibble-detect-end {
  box-shadow: 0 1px 4px 0 var(--shadow-color);
  width: calc(4 * var(--base-padding));
  height: calc(4 * var(--base-padding));
  background-color: var(--tooltip-bg);
  position: relative;
  margin-left: auto;
  margin-right: var(--tooltip-nibble-indentation);
}
.popover-bottom .nibble-detect-end.with-border {
  z-index: 3;
  border-top: 1px solid var(--button-oncolor-primary-color-disabled);
  border-left: 1px solid var(--button-oncolor-primary-color-disabled);
}
.popover-left .nibble-detect-end {
  box-shadow: 0 1px 4px 0 var(--shadow-color);
  width: calc(4 * var(--base-padding));
  height: calc(4 * var(--base-padding));
  background-color: var(--tooltip-bg);
  position: relative;
  margin-top: auto;
  margin-bottom: var(--tooltip-nibble-indentation);
}
.popover-left .nibble-detect-end.with-border {
  z-index: 3;
  border-top: 1px solid var(--button-oncolor-primary-color-disabled);
  border-right: 1px solid var(--button-oncolor-primary-color-disabled);
}
.popover-top .nibble-detect-end {
  box-shadow: 0 1px 4px 0 var(--shadow-color);
  width: calc(4 * var(--base-padding));
  height: calc(4 * var(--base-padding));
  background-color: var(--tooltip-bg);
  position: relative;
  margin-left: auto;
  margin-right: var(--tooltip-nibble-indentation);
}
.popover-top .nibble-detect-end.with-border {
  z-index: 3;
  border-bottom: 1px solid var(--button-oncolor-primary-color-disabled);
  border-right: 1px solid var(--button-oncolor-primary-color-disabled);
}
.popover-right .nibble-detect-end {
  box-shadow: 0 1px 4px 0 var(--shadow-color);
  width: calc(4 * var(--base-padding));
  height: calc(4 * var(--base-padding));
  background-color: var(--tooltip-bg);
  position: relative;
  margin-top: auto;
  margin-bottom: var(--tooltip-nibble-indentation);
}
.popover-right .nibble-detect-end.with-border {
  z-index: 3;
  border-bottom: 1px solid var(--button-oncolor-primary-color-disabled);
  border-left: 1px solid var(--button-oncolor-primary-color-disabled);
}
.popover-bottom .nibble-detect-unaligned {
  box-shadow: 0 1px 4px 0 var(--shadow-color);
  width: calc(4 * var(--base-padding));
  height: calc(4 * var(--base-padding));
  background-color: var(--tooltip-bg);
  position: relative;
}
.popover-bottom .nibble-detect-unaligned.with-border {
  z-index: 3;
  border-top: 1px solid var(--button-oncolor-primary-color-disabled);
  border-left: 1px solid var(--button-oncolor-primary-color-disabled);
}
.popover-left .nibble-detect-unaligned {
  box-shadow: 0 1px 4px 0 var(--shadow-color);
  width: calc(4 * var(--base-padding));
  height: calc(4 * var(--base-padding));
  background-color: var(--tooltip-bg);
  position: relative;
}
.popover-left .nibble-detect-unaligned.with-border {
  z-index: 3;
  border-top: 1px solid var(--button-oncolor-primary-color-disabled);
  border-right: 1px solid var(--button-oncolor-primary-color-disabled);
}
.popover-top .nibble-detect-unaligned {
  box-shadow: 0 1px 4px 0 var(--shadow-color);
  width: calc(4 * var(--base-padding));
  height: calc(4 * var(--base-padding));
  background-color: var(--tooltip-bg);
  position: relative;
}
.popover-top .nibble-detect-unaligned.with-border {
  z-index: 3;
  border-bottom: 1px solid var(--button-oncolor-primary-color-disabled);
  border-right: 1px solid var(--button-oncolor-primary-color-disabled);
}
.popover-right .nibble-detect-unaligned {
  box-shadow: 0 1px 4px 0 var(--shadow-color);
  width: calc(4 * var(--base-padding));
  height: calc(4 * var(--base-padding));
  background-color: var(--tooltip-bg);
  position: relative;
}
.popover-right .nibble-detect-unaligned.with-border {
  z-index: 3;
  border-bottom: 1px solid var(--button-oncolor-primary-color-disabled);
  border-left: 1px solid var(--button-oncolor-primary-color-disabled);
}
.icon-toggle-button {
  cursor: pointer;
  user-select: none;
  --icon-color-emphasized: var(--hds-foreground-secondary-press);
  --icon-color-hover: var(--hds-foreground-primary);
  --icon-color: var(--hds-foreground-secondary);
  display: flex;
  background: none;
}
.icon-toggle-button hds-icon {
  --hds-icon-color: var(--icon-color);
}
.icon-toggle-button:hover .base-icon,
.icon-toggle-button:hover hds-icon {
  --hds-icon-color: var(--icon-color-hover);
  --icon-color: var(--icon-color-hover);
}
.icon-toggle-button:active .base-icon,
.icon-toggle-button:active hds-icon {
  --hds-icon-color: var(--icon-color-emphasized);
  --icon-color: var(--icon-color-emphasized);
}
.icon-toggle-button-disabled {
  opacity: var(--input-disabled-opacity);
  pointer-events: none;
  cursor: default;
  --icon-color: var(--disabled-icon-color);
  --hds-icon-color: var(--hds-foreground-inactive);
}
.icon-toggle-button-checked {
  --icon-color: var(--font-color-group-item);
}
.icon-toggle-button-unchecked {
  --icon-color: var(--checkbox-unchecked-border-color);
}
.icon-toggle-button-green {
  --icon-color: var(--hds-green-onlight-400);
  --icon-color-hover: var(--hds-hsd-green-ondark-950);
  --icon-color-emphasized: var(--hds-hsd-green-ondark-800);
}
.icon-toggle-button-red {
  --icon-color: var(--hds-red-onlight-400);
  --icon-color-hover: var(--hds-red-onlight-950);
  --icon-color-emphasized: var(--hds-red-onlight-800);
}
.icon-toggle-button-active hds-icon {
  --hds-icon-color: var(--icon-color-emphasized);
}
.base-main-icon-toggle-button {
  cursor: pointer;
  user-select: none;
  display: flex;
  width: var(--line-height);
  height: var(--line-height);
  line-height: var(--line-height);
  border-radius: var(--item-border-radius);
  margin: calc(-1 * (var(--line-height) - var(--icon-box-size)) / 2);
}
.main-icon-toggle-button-disabled {
  cursor: pointer;
  user-select: none;
  display: flex;
  width: var(--line-height);
  height: var(--line-height);
  line-height: var(--line-height);
  border-radius: var(--item-border-radius);
  margin: calc(-1 * (var(--line-height) - var(--icon-box-size)) / 2);
  --icon-color: var(--disabled-icon-color);
}
.main-icon-toggle-button-checked {
  cursor: pointer;
  user-select: none;
  display: flex;
  width: var(--line-height);
  height: var(--line-height);
  line-height: var(--line-height);
  border-radius: var(--item-border-radius);
  margin: calc(-1 * (var(--line-height) - var(--icon-box-size)) / 2);
  --icon-color: var(--active-icon-color);
  --icon-color-hover: var(--active-icon-color);
}
.main-icon-toggle-button-unchecked {
  cursor: pointer;
  user-select: none;
  display: flex;
  width: var(--line-height);
  height: var(--line-height);
  line-height: var(--line-height);
  border-radius: var(--item-border-radius);
  margin: calc(-1 * (var(--line-height) - var(--icon-box-size)) / 2);
  --icon-color: var(--inactive-icon-color);
}
.base-rounded-button {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--rounded-button-height);
  border-radius: calc(var(--rounded-button-height) / 2);
  padding: 0 calc(var(--rounded-button-height) / 2);
}
.base-rounded-button > *:not(:first-child) {
  margin-left: var(--button-icon-spacing);
}
.rounded-button-disabled {
  pointer-events: none;
  cursor: default;
}
.rounded-button-size-extra-small {
  --rounded-button-height: var(--icon-box-size);
  font-family: var(--font-family-emphasized);
  font-size: var(--text-size-tiny);
  line-height: var(--line-height-menu);
}
.rounded-button-size-small {
  --rounded-button-height: var(--line-height);
  font-family: var(--font-family-emphasized);
  font-size: var(--text-size-menu);
  line-height: var(--line-height-menu);
}
.rounded-button-size-medium {
  --rounded-button-height: var(--medium-button-height);
  font-family: var(--font-family-emphasized);
  font-size: var(--text-size-big-button);
  line-height: var(--line-height-menu);
}
.rounded-button-size-big {
  --rounded-button-height: var(--button-height);
  font-family: var(--font-family-emphasized);
  font-size: var(--text-size-big-button);
  line-height: var(--line-height-menu);
}
.rounded-button-size-extra-big {
  --rounded-button-height: var(--large-button-height);
  font-family: var(--font-family-emphasized);
  font-size: var(--text-size-big-button);
  line-height: var(--line-height-menu);
}
.rounded-button-normal {
  background-color: var(--normal-button-bg-color);
  color: var(--font-color-emphasized);
  --icon-color: var(--font-color-emphasized);
}
.rounded-button-normal.rounded-button-disabled {
  opacity: var(--inactive-item-opacity);
}
.rounded-button-normal:hover {
  background-color: var(--normal-button-bg-color-hover);
}
.rounded-button-base-scheme {
  background-color: var(--normal-button-bg-color);
  color: var(--font-color-emphasized);
  --icon-color: var(--font-color-emphasized);
  color: #52A3DB;
}
.rounded-button-base-scheme.rounded-button-disabled {
  opacity: var(--inactive-item-opacity);
}
.rounded-button-base-scheme:hover {
  background-color: var(--normal-button-bg-color-hover);
}
.rounded-button-action {
  background-color: var(--main-button-color);
  color: var(--font-color-emphasized);
  --icon-color: var(--font-color-emphasized);
}
.rounded-button-action.rounded-button-disabled {
  opacity: var(--inactive-item-opacity);
}
.rounded-button-action:hover {
  background-color: var(--main-button-color-hover);
}
.rounded-button-panel-header {
  background-color: var(--button-apply-modifiers-bg);
  color: var(--font-color-apply-modifier-btn);
  --icon-color: var(--font-color-apply-modifier-btn);
  box-sizing: border-box;
  border: 1px solid var(--button-apply-modifiers-border);
  padding: 0 calc(var(--rounded-button-height) * 3 / 4);
}
.rounded-button-panel-header.rounded-button-disabled {
  color: var(--font-color-disabled);
  --icon-color: var(--disabled-icon-color);
  background-color: var(--button-apply-modifiers-bg-disabled);
  border-color: var(--button-apply-modifiers-border-disabled);
}
.rounded-button-panel-header:hover {
  background-color: var(--button-apply-modifiers-bg-hover);
  border: 1px solid var(--button-apply-modifiers-border-hover);
  color: var(--font-color-apply-modifier-btn-hover);
  --icon-color: var(--font-color-apply-modifier-btn-hover);
}
.rounded-button-primary {
  background: var(--button-primary-bg);
  color: var(--button-primary-color);
  --icon-color: var(--button-primary-color);
}
.rounded-button-primary.rounded-button-disabled {
  background: var(--button-primary-bg-disabled);
  color: var(--button-primary-color-disabled);
  --icon-color: var(--button-primary-color-disabled);
}
.rounded-button-primary:hover {
  background: var(--button-primary-bg-hover);
}
.rounded-button-primary:active {
  background: var(--button-primary-bg-active);
}
.rounded-button-secondary {
  background-color: var(--button-secondary-bg);
  color: var(--button-secondary-color);
  --icon-color: var(--button-secondary-color);
}
.rounded-button-secondary.rounded-button-disabled {
  background-color: var(--button-secondary-bg-disabled);
  color: var(--button-secondary-color-disabled);
  --icon-color: var(--button-secondary-color-disabled);
}
.rounded-button-secondary:hover {
  background-color: var(--button-secondary-bg-hover);
}
.rounded-button-secondary:active {
  background-color: var(--button-secondary-bg-active);
}
.rounded-button-danger {
  background-color: var(--button-danger-bg);
  color: var(--button-danger-color);
  --icon-color: var(--button-danger-color);
}
.rounded-button-danger.rounded-button-disabled {
  background-color: var(--button-danger-bg-disabled);
}
.rounded-button-danger:hover {
  background-color: var(--button-danger-bg-hover);
}
.rounded-button-danger:active {
  background-color: var(--button-danger-bg-active);
}
.rounded-button-oncolor-primary {
  background-color: var(--button-oncolor-primary-bg);
  color: var(--button-oncolor-primary-color);
  --icon-color: var(--button-oncolor-primary-color);
}
.rounded-button-oncolor-primary.rounded-button-disabled {
  background-color: var(--button-oncolor-primary-bg-disabled);
  color: var(--button-oncolor-primary-color-disabled);
  --icon-color: var(--button-oncolor-primary-color-disabled);
}
.rounded-button-oncolor-primary:hover {
  background-color: var(--button-oncolor-primary-bg-hover);
}
.rounded-button-oncolor-primary:active {
  background-color: var(--button-oncolor-primary-bg-active);
}
.rounded-button-oncolor-secondary {
  background-color: var(--button-oncolor-secondary-bg);
  color: var(--button-oncolor-secondary-color);
  --icon-color: var(--button-oncolor-secondary-color);
}
.rounded-button-oncolor-secondary.rounded-button-disabled {
  background-color: var(--button-oncolor-secondary-bg-disabled);
  color: var(--button-oncolor-secondary-color-disabled);
  --icon-color: var(--button-oncolor-secondary-color-disabled);
}
.rounded-button-oncolor-secondary:hover {
  background-color: var(--button-oncolor-secondary-bg-hover);
}
.rounded-button-oncolor-secondary:active {
  background-color: var(--button-oncolor-secondary-bg-active);
}
.rounded-button-warning {
  background-color: var(--button-warn-bg);
  color: var(--button-warn-color);
  --icon-color: var(--button-warn-color);
}
.rounded-button-warning.rounded-button-disabled {
  background-color: var(--button-warn-bg-disabled);
  color: var(--button-warn-color);
  --icon-color: var(--button-warn-color);
}
.rounded-button-warning:hover {
  background-color: var(--button-warn-bg-hover);
}
.rounded-button-warning:active {
  background-color: var(--button-warn-bg-active);
  color: var(--button-warn-color-active);
  --icon-color: var(--button-warn-color-active);
}
.rounded-button-fixed-width {
  width: 128px;
  box-sizing: border-box;
}
.base-icon-action-button {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-button-size-override, var(--line-height));
  height: var(--icon-button-size-override, var(--line-height));
  border-radius: 50%;
}
.rounded-add-button-label {
  flex-grow: 1;
}
.rounded-add-button-label-with-icon {
  flex-grow: 1;
}
.toggle-button-checked {
  width: var(--input-width);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0 calc(2 * var(--base-padding));
  color: var(--font-color-highlighted);
  --icon-color: var(--font-color-highlighted);
  border-color: var(--main-button-color);
  --divider-color-override: var(--main-button-color);
  background: transparent;
}
.toggle-button-checked:hover {
  color: var(--font-color-emphasized);
  border-color: var(--main-button-color-hover);
  --divider-color-override: var(--main-button-color-hover);
  background: transparent;
}
.toggle-button-unchecked {
  width: var(--input-width);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0 calc(2 * var(--base-padding));
  color: var(--font-color-disabled);
  --icon-color: var(--font-color-disabled);
  border-color: var(--font-color-disabled);
  --divider-color-override: var(--font-color-disabled);
}
.rounded-icon-toggle-button-active {
  cursor: pointer;
  user-select: none;
  height: var(--line-height);
  width: calc(8 * var(--base-padding));
  border-radius: calc(var(--line-height) / 2);
  background-color: var(--normal-button-bg-color);
  display: flex;
  align-items: center;
  --icon-color: var(--active-icon-color);
  --icon-color-hover: var(--active-icon-color);
}
.rounded-icon-toggle-button-inactive {
  cursor: pointer;
  user-select: none;
  height: var(--line-height);
  width: calc(8 * var(--base-padding));
  border-radius: calc(var(--line-height) / 2);
  background-color: var(--normal-button-bg-color);
  display: flex;
  align-items: center;
  --icon-color: var(--font-color-group-item);
}
.rounded-icon-button {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  background: var(--hds-background-object);
}
.rounded-icon-button:hover,
.rounded-icon-button:focus {
  background: var(--hds-background-object-hover);
}
.rounded-icon-button:active {
  background: var(--hds-background-object-press);
}
.rounded-icon-button-disabled {
  pointer-events: none;
  cursor: default;
}
.rounded-icon-button-disabled hds-icon {
  --hds-icon-color: var(--hds-foreground-primary-disabled);
}
.rounded-icon-button-large {
  height: calc(var(--hds-spacing-8) + var(--hds-spacing-2));
  width: calc(var(--hds-spacing-8) + var(--hds-spacing-2));
}
.rounded-icon-button-medium {
  height: var(--hds-spacing-8);
  width: var(--hds-spacing-8);
}
.rounded-icon-button-small {
  height: var(--hds-spacing-7);
  width: var(--hds-spacing-7);
}
.rounded-icon-button-extrasmall {
  height: var(--hds-spacing-6);
  width: var(--hds-spacing-6);
}
.rounded-icon-button-tiny {
  height: var(--hds-spacing-4);
  width: var(--hds-spacing-4);
}
.rounded-icon-button-floating {
  background: var(--hds-background-secondary);
  --icon-color: var(--hds-foreground-primary);
  filter: var(--hds-overlay);
}
.rounded-icon-button-floating hds-icon {
  --hds-icon-color: var(--hds-foreground-primary);
}
.rounded-icon-button-floating:hover {
  background: var(--hds-background-oncolor-hover);
}
.rounded-icon-button-floating:active {
  background-color: var(--hds-background-oncolor-press);
}
.rounded-icon-button-selected {
  background-color: var(--hds-action);
  --icon-color: var(--hds-white);
}
.rounded-icon-button-selected hds-icon {
  --hds-icon-color: var(--hds-inverse-primary);
}
.rounded-icon-button-selected:hover {
  background-color: var(--hds-action-hover);
}
.rounded-icon-button-selected:active {
  background-color: var(--hds-action-press);
}
.notification-close-button {
  background-color: var(--hds-foreground-tertiary) !important;
}
.notification-close-button:hover {
  background-color: var(--hds-foreground-tertiary-hover) !important;
}
.notification-close-button:active {
  background-color: var(--hds-foreground-tertiary-press) !important;
}
.notification-close-button hds-icon {
  --hds-icon-color: var(--hds-inverse-primary);
}
.hds-button-fixed-width {
  width: 128px;
}
.base-icon {
  background-color: var(--icon-color, var(--font-color));
  flex-shrink: 0;
}
.icon {
  background-color: var(--icon-color, var(--font-color));
  flex-shrink: 0;
  width: var(--icon-box-size);
  height: var(--icon-box-size);
}
.standard-icon-size {
  width: var(--icon-box-size);
  height: var(--icon-box-size);
}
.text-inline-icon-size {
  width: var(--icon-text-inline-size);
  height: var(--icon-text-inline-size);
}
.header-icon-size {
  width: var(--icon-header-size);
  height: var(--icon-header-size);
}
.icon-big-size {
  width: var(--icon-big-size);
  height: var(--icon-big-size);
}
.icon-padding-size {
  width: var(--icon-padding-size);
  height: var(--icon-padding-size);
}
.icon-default-style {
  --icon-color-emphasized: var(--font-color-emphasized);
  --icon-color: var(--font-color);
}
.icon-highlighted-style {
  --icon-color-emphasized: var(--font-color-highlighted-emphasized);
  --icon-color: var(--font-color-highlighted);
}
.icon-emphasized-style {
  --icon-color: var(--active-icon-color);
  --icon-color-hover: var(--active-icon-color);
}
.icon-inactive-style {
  --icon-color: var(--inactive-icon-color);
}
.icon-hint-style {
  --icon-color: var(--hint-icon-color);
}
.icon-disabled-style {
  --icon-color: var(--disabled-icon-color);
}
.icon-warning-style {
  --icon-color-emphasized: var(--warning-icon-color-hover);
  --icon-color: var(--warning-icon-color);
}
.icon-on-hover:hover {
  --icon-color: var(--icon-color-hover, var(--icon-color-emphasized, var(--font-color-emphasized)));
}
.popover-container-opened .icon-on-popover-open {
  --icon-color: var(--icon-color-emphasized, var(--font-color-emphasized));
}
.icon-inline {
  display: inline-block;
  vertical-align: middle;
}
.icon-centered {
  margin: auto;
}
.icon-placeholder {
  width: var(--icon-box-size);
  height: var(--icon-box-size);
  flex-shrink: 0;
}
.icon-placeholder-big {
  width: var(--icon-big-size);
  height: var(--icon-big-size);
  flex-shrink: 0;
}
.icon-placeholder-header {
  width: var(--icon-header-size);
  height: var(--icon-header-size);
  flex-shrink: 0;
}
.icon-placeholder-small {
  width: var(--icon-padding-size);
  height: var(--icon-padding-size);
  flex-shrink: 0;
}
.icon-placeholder-inline {
  width: var(--icon-text-inline-size);
  height: var(--icon-text-inline-size);
  flex-shrink: 0;
}
.color-icon {
  width: var(--icon-box-size);
  height: var(--icon-box-size);
  flex-shrink: 0;
}
.collapse-icon-open {
  --icon-color: var(--font-color-group-item);
}
.collapse-icon-closed {
  --icon-color: var(--checkbox-unchecked-border-color);
}
.action-icon {
  --icon-color: var(--action-icon-color);
}
.action-icon-disabled {
  --icon-color: var(--disabled-action-icon-color);
}
.activatable-icon-disabled {
  opacity: var(--input-disabled-opacity);
  pointer-events: none;
  cursor: default;
  --icon-color: var(--disabled-icon-color);
  --hds-icon-color: var(--hds-foreground-inactive);
}
.activatable-icon-active {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-box-size);
  height: var(--icon-box-size);
  border-radius: var(--selected-item-selection-bar-width);
  background-color: var(--active-icon-color);
  --icon-color: var(--active-icon-color-inverted);
  --icon-color-emphasized: var(--active-icon-color-inverted);
}
.activatable-icon-active:hover {
  --icon-color: var(--icon-color-hover, var(--icon-color-emphasized, var(--font-color-emphasized)));
}
.activatable-icon-inactive {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-box-size);
  height: var(--icon-box-size);
  border-radius: var(--selected-item-selection-bar-width);
  --icon-color: var(--toggle-button-icon-color);
}
.activatable-icon-inactive:hover {
  --icon-color: var(--icon-color-hover, var(--icon-color-emphasized, var(--font-color-emphasized)));
}
.attribute-subeditor-icon .activatable-icon-inactive {
  border-radius: var(--selected-item-selection-bar-width);
  box-shadow: inset 0 0 0 1px var(--inactive-icon-border-color);
}
.activatable-icon-autoactivate {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-box-size);
  height: var(--icon-box-size);
  border-radius: var(--selected-item-selection-bar-width);
  --icon-color: var(--toggle-button-icon-color);
}
.activatable-icon-autoactivate:hover {
  --icon-color: var(--icon-color-hover, var(--icon-color-emphasized, var(--font-color-emphasized)));
}
.popover-container-opened .activatable-icon-autoactivate {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-box-size);
  height: var(--icon-box-size);
  border-radius: var(--selected-item-selection-bar-width);
  background-color: var(--active-icon-color);
  --icon-color: var(--active-icon-color-inverted);
  --icon-color-emphasized: var(--active-icon-color-inverted);
}
.popover-container-opened .activatable-icon-autoactivate:hover {
  --icon-color: var(--icon-color-hover, var(--icon-color-emphasized, var(--font-color-emphasized)));
}
.filter-button {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  width: 25px;
  height: 20px;
}
.filter-button-active {
  position: absolute;
  top: 0;
  right: 0;
  width: var(--icon-box-size);
  height: var(--icon-box-size);
  border-radius: 50%;
  --icon-color: var(--main-button-color);
  background-color: var(--active-icon-color);
  border: 3px solid #272d37;
  box-sizing: border-box;
}
.filter-button-active > * {
  margin: -3px;
}
.filter-button-disabled {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  width: 25px;
  height: 20px;
  cursor: default;
}
.interactive-icon {
  cursor: pointer;
  user-select: none;
}
.component-highlight {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  border-radius: var(--border-radius);
  outline: var(--component-highlight-thickness) solid var(--highlight-color, var(--component-highlight-color));
  outline-offset: calc(-1 * var(--component-highlight-thickness));
  pointer-events: none;
}
.component-highlight-animated {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  border-radius: var(--border-radius);
  outline: var(--component-highlight-thickness) solid var(--highlight-color, var(--component-highlight-color));
  outline-offset: calc(-1 * var(--component-highlight-thickness));
  pointer-events: none;
  animation-duration: var(--highlight-duration);
  animation-name: component-highlight-animation;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
}
@keyframes component-highlight-animation {
  from {
    opacity: 0;
  }
  33% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.plus-number {
  font-family: var(--font-family-emphasized);
  font-size: var(--text-size-super-tiny);
  line-height: var(--line-height-tiny);
  color: var(--font-color-hint);
  flex-shrink: 0;
  width: var(--icon-text-inline-size);
  height: var(--icon-text-inline-size);
  line-height: var(--icon-text-inline-size);
  border-radius: 50%;
  text-align: center;
  color: var(--bg-color-ui);
  background-color: var(--font-color);
}
.plus-number-hover {
  background-color: var(--font-color-emphasized);
}
.draggable-number-composite-container {
  display: flex;
  flex-direction: row;
}
.draggable-number-composite-container-expanding {
  flex-grow: 1;
}
.draggable-number-container {
  background-color: transparent;
  border-radius: var(--input-border-radius);
  border: var(--input-border-size) solid var(--input-border-color-active);
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-tiny);
  color: var(--font-color-active);
  caret-color: var(--input-caret-color);
  height: var(--input-height);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  position: relative;
}
.draggable-number-container input[type="number"],
.draggable-number-container input[type="text"] {
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-tiny);
  color: var(--font-color-active);
  caret-color: var(--input-caret-color);
}
.draggable-number-container-fixed {
  width: var(--number-input-width);
}
.draggable-number-container-expanding {
  flex-grow: 1;
}
.draggable-number-disabled {
  opacity: var(--input-disabled-opacity);
  pointer-events: none;
}
.draggable-number-input-container {
  display: flex;
  flex-direction: row;
  position: relative;
  flex-grow: 1;
  width: var(--swatch-width);
  align-items: center;
}
.draggable-number-container-selected {
  background-color: transparent;
  border-radius: var(--input-border-radius);
  border: var(--input-border-size) solid var(--input-border-color-active);
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-tiny);
  color: var(--font-color-active);
  caret-color: var(--input-caret-color);
  height: var(--input-height);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  position: relative;
  --input-bg-color: black;
}
.draggable-number-container-selected input[type="number"],
.draggable-number-container-selected input[type="text"] {
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-tiny);
  color: var(--font-color-active);
  caret-color: var(--input-caret-color);
}
.draggable-number-container:focus-within {
  border: var(--input-border-size) solid var(--input-border-color-focussed);
  background-color: transparent;
  color: var(--font-color-emphasized);
}
.draggable-number-container-error {
  border: var(--input-border-size) solid var(--input-border-color-error);
}
.draggable-number-container-error:focus-within {
  border-color: var(--input-border-color-error);
}
.draggable-number-container input[type="number"]:focus,
.draggable-number-container input[type="text"]:focus {
  border: none;
}
.draggable-number-progress-container {
  width: 100%;
  background-color: var(--input-slider-bg-color);
  position: relative;
  margin-top: 2px;
  height: 2px;
}
.draggable-number-progress {
  position: absolute;
  width: calc(var(--right) - var(--left));
  left: var(--left);
  height: 2px;
  background-color: var(--input-slider-color);
}
.draggable-number-draggable-underlay-disabled {
  width: 0%;
  height: 100%;
  flex-grow: 1;
  flex-shrink: 0;
  display: flex;
}
.draggable-number-draggable-underlay {
  width: 0%;
  height: 100%;
  flex-grow: 1;
  flex-shrink: 0;
  display: flex;
}
.draggable-number-draggable-underlay .number-input:not(:focus),
.draggable-number-draggable-underlay input:not(:focus) {
  cursor: ew-resize;
}
.string-big-input {
  flex-grow: 1;
}
.number-input-container,
.string-input-container {
  background-color: transparent;
  border-radius: var(--input-border-radius);
  border: var(--input-border-size) solid var(--input-border-color-active);
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-tiny);
  color: var(--font-color-active);
  caret-color: var(--input-caret-color);
  height: var(--input-height);
  box-sizing: border-box;
  display: flex;
  align-items: center;
}
.number-input-container input[type="number"],
.string-input-container input[type="number"],
.number-input-container input[type="text"],
.string-input-container input[type="text"] {
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-tiny);
  color: var(--font-color-active);
  caret-color: var(--input-caret-color);
}
.number-input-container:hover,
.string-input-container:hover {
  border-color: var(--input-border-color-hover);
}
.number-input-container:focus-within,
.string-input-container:focus-within {
  border: var(--input-border-size) solid var(--input-border-color-focussed);
  background-color: transparent;
  color: var(--font-color-emphasized);
}
.number-input-container input[type="number"]:focus,
.string-input-container input[type="number"]:focus,
.number-input-container input[type="text"]:focus,
.string-input-container input[type="text"]:focus {
  border: none;
}
.number-input-container-fixed {
  width: var(--number-input-width);
  max-width: var(--number-input-width);
  height: var(--swatch-height);
}
.number-input-container-expanding {
  flex-grow: 1;
}
.string-input-container-highlight-border {
  border: var(--input-border-size) solid var(--input-border-color-focussed);
  background-color: transparent;
  color: var(--font-color-emphasized);
}
.string-input-container-disabled,
.number-input-container-disabled {
  opacity: var(--input-disabled-opacity);
}
.string-input-container-invisible:not(:focus-within) {
  border-color: transparent;
  background-color: transparent;
}
.string-input-container-expanding {
  flex-grow: 1;
  width: unset;
  max-width: unset;
}
.string-input-clear-button {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity var(--input-animation-duration) ease-in-out;
}
.string-input-clear-button-empty {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity var(--input-animation-duration) ease-in-out;
  opacity: 0;
  pointer-events: none;
}
.input-container-selected {
  border-radius: var(--input-border-radius);
  border: var(--input-border-size) solid var(--input-border-color-active);
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-tiny);
  color: var(--font-color-active);
  caret-color: var(--input-caret-color);
  height: var(--input-height);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: var(--number-input-width);
  max-width: var(--number-input-width);
  height: var(--swatch-height);
  border: var(--input-border-size) solid var(--input-border-color-focussed);
  background-color: transparent;
  color: var(--font-color-emphasized);
}
.input-container-selected input[type="number"],
.input-container-selected input[type="text"] {
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-tiny);
  color: var(--font-color-active);
  caret-color: var(--input-caret-color);
}
.input-container-selected:hover {
  border-color: var(--input-border-color-hover);
}
.input-container-selected:focus-within {
  border: var(--input-border-size) solid var(--input-border-color-focussed);
  background-color: transparent;
  color: var(--font-color-emphasized);
}
.input-container-selected input[type="number"]:focus,
.input-container-selected input[type="text"]:focus {
  border: none;
}
.number-input-container-selected,
.string-input-container-selected {
  border: var(--input-border-size) solid var(--input-border-color-focussed);
  background-color: transparent;
  color: var(--font-color-emphasized);
}
.text-input {
  height: calc(3 * var(--line-height));
  width: 100%;
  resize: none;
}
.number-input[type=number]:focus,
.number-input[type=text]:focus,
.string-input[type=text]:focus,
.number-input[type=number],
.number-input[type=text],
.string-input[type=text] {
  border: none;
}
.number-input[type=number],
.number-input[type=text],
.string-input[type=text] {
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-tiny);
  color: var(--font-color-active);
  caret-color: var(--input-caret-color);
  width: 100%;
  height: calc(var(--line-height) - 2 * var(--input-border-size));
  background-color: transparent;
  line-height: calc(var(--line-height) - 2 * var(--input-border-size));
  padding: 0px 0px 0px var(--input-padding);
}
.number-input-disabled[type=number],
.number-input-disabled[type=text],
.string-input-disabled[type=text] {
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-tiny);
  color: var(--font-color-hint);
  --icon-color: var(--font-color-hint);
}
.number-input-non-value[type=number]::placeholder,
.number-input-non-value[type=text]::placeholder,
.string-input-non-text-value[type=text]::placeholder {
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height);
  color: var(--font-color-hint);
  font-style: normal;
}
.string-input-wrapper {
  display: flex;
  max-width: var(--color-picker-input-width);
  margin: 0 auto;
}
.input-label {
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height);
  color: var(--font-color-hint);
  text-transform: uppercase;
  width: var(--text-size);
  height: calc(var(--line-height) - 2px);
  line-height: calc(var(--line-height) - 2px);
  text-align: center;
  border-right: 1px solid var(--input-separator-color);
  padding-left: var(--base-padding);
}
.input-postfix {
  font-family: var(--font-family);
  font-size: var(--text-size-tiny);
  color: var(--font-color);
  --icon-color: var(--font-color);
  line-height: var(--line-height-tiny);
  height: calc(var(--line-height) - 2px);
  width: auto;
  flex-shrink: 2;
  line-height: calc(var(--line-height) - 2px);
  padding: 0;
}
.input-postfix:last-child {
  margin-right: var(--base-padding);
}
.input-prefix {
  font-family: var(--font-family);
  font-size: var(--text-size-tiny);
  color: var(--font-color);
  --icon-color: var(--font-color);
  line-height: var(--line-height-tiny);
  color: var(--hds-foreground-secondary);
  --icon-color: var(--hds-foreground-secondary);
  height: calc(var(--line-height) - 2px);
  width: var(--input-prefix-width);
  flex-shrink: 2;
  line-height: calc(var(--line-height) - 2px);
  padding-left: var(--input-prefix-left-padding);
  margin-right: var(--base-padding);
}
.input-buttons {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: 12px;
  --icon-color: var(--hds-foreground-secondary);
}
.input-buttons-on-hover {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: 12px;
  --icon-color: var(--hds-foreground-secondary);
}
.input-buttons-on-hover > .input-button-up,
.input-buttons-on-hover > .input-button-down {
  opacity: 0;
}
.input-buttons-on-hover:hover > .input-button-up,
.input-buttons-on-hover:hover > .input-button-down {
  opacity: 1;
}
.input-button {
  cursor: pointer;
  user-select: none;
  flex-grow: 1;
  display: flex;
}
.input-button-up {
  cursor: pointer;
  user-select: none;
  flex-grow: 1;
  display: flex;
  align-items: flex-end;
}
.input-button-down {
  cursor: pointer;
  user-select: none;
  flex-grow: 1;
  display: flex;
  align-items: flex-start;
}
.input-icon {
  --icon-color: var(--hint-icon-color);
}
.input-button-icon {
  background-color: var(--icon-color, var(--font-color));
  flex-shrink: 0;
  width: var(--icon-box-size);
  height: var(--icon-box-size);
  margin: 0px var(--input-padding);
}
.hds-string-input {
  caret-color: var(--hds-input-caret-color);
  box-sizing: border-box;
  border-radius: var(--border-radius);
  border: var(--border-size) solid var(--hds-input-border);
  background-color: var(--hds-input-bg-color);
  color: var(--hds-input-color);
  font-family: var(--font-family);
  font-size: var(--text-size-dialog);
  font-style: normal;
  font-weight: 400;
  line-height: var(--line-height);
  color: var(--font-color-secondary);
  --icon-color: var(--font-color-secondary);
  height: var(--medium-button-height);
  padding: 0px var(--base-padding) 0px calc(2 * var(--base-padding));
  display: flex;
  align-items: center;
}
.hds-string-input::placeholder {
  color: var(--hds-input-placeholder-color);
}
.hds-string-input:focus {
  border: var(--border-size-highlighted) solid var(--hds-input-border-color-focussed);
}
.hds-string-input:hover:not(:focus) {
  border-color: var(--hds-input-border-color-hover);
}
.hds-string-input:focus {
  padding-left: calc(calc(2 * var(--base-padding)) - (var(--border-size-highlighted) - var(--border-size)));
}
.hds-string-input-input[type=text] {
  font-family: var(--font-family);
  font-size: var(--text-size-dialog);
  font-style: normal;
  font-weight: 400;
  line-height: var(--line-height);
  color: var(--font-color-secondary);
  --icon-color: var(--font-color-secondary);
  caret-color: var(--hds-input-caret-color);
  width: 1px;
  flex-grow: 1;
  background-color: unset;
  border-radius: unset;
  padding: 0;
  border: none;
}
.hds-string-input-input[type=text]::placeholder {
  color: var(--hds-input-placeholder-color);
}
.hds-string-input-input[type=text]:focus {
  border: none;
}
.hds-input-postfix {
  font-family: var(--font-family);
  font-size: var(--text-size);
  font-style: normal;
  font-weight: 400;
  line-height: var(--line-height-menu);
  letter-spacing: -0.024px;
  color: var(--font-color-subdued);
  color: var(--font-color-hds-tertiary);
}
.hds-input-prefix {
  font-family: var(--font-family);
  font-size: var(--text-size);
  font-style: normal;
  font-weight: 400;
  line-height: var(--line-height-menu);
  letter-spacing: -0.024px;
  color: var(--font-color-subdued);
  color: var(--font-color-hds-tertiary);
}
.select-popover-container {
  overflow-y: auto;
  max-height: inherit;
}
.select-popover-container::-webkit-scrollbar {
  width: var(--scrollbar-expanded-grabber-width);
}
.select-popover-container::-webkit-scrollbar-track {
  background-color: inherit;
  border-radius: inherit;
}
.select-popover-container::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-color-hover);
  border-radius: calc(var(--scrollbar-expanded-grabber-width) / 2);
}
.popover-bottom .select-popover-container {
  flex-direction: column-reverse;
}
.select-popover {
  box-shadow: 0 1px 4px 0 var(--shadow-color);
  --divider-color-override: var(--bg-color-popup-divider);
  background-color: var(--popup-color, var(--bg-color-popup));
  border: var(--border-size) solid var(--border-color);
  border-radius: var(--popup-border-radius);
  z-index: 9;
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}
.select-popover-content {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.select-item-label {
  flex-grow: 1;
  margin-right: calc(2 * var(--base-padding));
}
.select-item-label:not(:first-child) {
  margin-left: calc(2 * var(--base-padding));
}
.select-combo-box {
  cursor: pointer;
  user-select: none;
  line-height: var(--header-line-height);
  border-radius: var(--item-border-radius);
  background-color: transparent;
  border-radius: var(--input-border-radius);
  border: var(--input-border-size) solid var(--input-border-color-active);
  color: var(--font-color-active);
  caret-color: var(--input-caret-color);
  align-items: center;
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-tiny);
  color: var(--font-color-hint);
  --icon-color: var(--font-color-hint);
  --icon-color: var(--hint-icon-color);
  padding: 0 0 0 var(--base-padding);
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  height: var(--input-height);
  line-height: var(--input-height);
}
.select-combo-box input[type="number"],
.select-combo-box input[type="text"] {
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-tiny);
  color: var(--font-color-active);
  caret-color: var(--input-caret-color);
}
.select-combo-box:hover {
  border-color: var(--input-border-color-hover);
}
.select-combo-box:focus-within {
  border: var(--input-border-size) solid var(--input-border-color-focussed);
  background-color: transparent;
  color: var(--font-color-emphasized);
}
.select-combo-box input[type="number"]:focus,
.select-combo-box input[type="text"]:focus {
  border: none;
}
.select-combo-box > *:not(:first-child) {
  margin-left: var(--base-padding);
}
.select-combo-box:hover {
  border-color: var(--input-border-color-hover);
}
.popover-container-opened .select-combo-box,
.popover-container-opened .select-combo-box:hover {
  border: var(--input-border-size) solid var(--input-border-color-active);
  background-color: transparent;
  color: var(--font-color-active);
}
.select-combo-box.select-combo-box-disabled {
  opacity: var(--inactive-item-opacity);
  pointer-events: none;
}
.select-combo-box.select-combo-box-active {
  border: var(--input-border-size) solid var(--input-border-color-active);
  background-color: transparent;
  color: var(--font-color-active);
}
.select-combo-box-expand {
  width: 1px;
  flex-grow: 1;
}
.select-combo-box-custom-width {
  width: unset;
}
.select-combo-box-label {
  flex-grow: 1;
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
}
.combobox-popup-container {
  overflow-y: auto;
  min-width: var(--number-input-width);
  max-height: inherit;
}
.combobox-popup-container::-webkit-scrollbar {
  width: var(--scrollbar-expanded-grabber-width);
}
.combobox-popup-container::-webkit-scrollbar-track {
  background-color: inherit;
  border-radius: inherit;
}
.combobox-popup-container::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-color-hover);
  border-radius: calc(var(--scrollbar-expanded-grabber-width) / 2);
}
.vector-input {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: var(--number-input-width);
}
.vector-input-expanding {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex-grow: 1;
}
.vector-component-input {
  background-color: transparent;
  border-radius: var(--input-border-radius);
  border: var(--input-border-size) solid var(--input-border-color-active);
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-tiny);
  color: var(--font-color-active);
  caret-color: var(--input-caret-color);
  height: var(--input-height);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  margin-top: var(--base-padding);
}
.vector-component-input input[type="number"],
.vector-component-input input[type="text"] {
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-tiny);
  color: var(--font-color-active);
  caret-color: var(--input-caret-color);
}
.vector-component-input:hover {
  border-color: var(--input-border-color-hover);
}
.vector-component-input:focus-within {
  border: var(--input-border-size) solid var(--input-border-color-focussed);
  background-color: transparent;
  color: var(--font-color-emphasized);
}
.vector-component-input input[type="number"]:focus,
.vector-component-input input[type="text"]:focus {
  border: none;
}
.vector-component-input:focus-within {
  --input-bg-color: black;
}
.vector-component-input:first-of-type {
  margin-top: 0;
}
.dash-input {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: var(--dash-input-width);
}
.dash-input-input {
  background-color: transparent;
  border-radius: var(--input-border-radius);
  border: var(--input-border-size) solid var(--input-border-color-active);
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-tiny);
  color: var(--font-color-active);
  caret-color: var(--input-caret-color);
  height: var(--input-height);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: var(--number-input-width);
  max-width: var(--number-input-width);
  height: var(--swatch-height);
  flex-shrink: 0;
}
.dash-input-input input[type="number"],
.dash-input-input input[type="text"] {
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-tiny);
  color: var(--font-color-active);
  caret-color: var(--input-caret-color);
}
.dash-input-input:hover {
  border-color: var(--input-border-color-hover);
}
.dash-input-input:focus-within {
  border: var(--input-border-size) solid var(--input-border-color-focussed);
  background-color: transparent;
  color: var(--font-color-emphasized);
}
.dash-input-input input[type="number"]:focus,
.dash-input-input input[type="text"]:focus {
  border: none;
}
.dash-input-input:focus-within {
  --input-bg-color: black;
}
.dash-input-wrapper {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--base-padding);
}
.dash-input-label {
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height);
  color: var(--font-color-hint);
  text-transform: uppercase;
}
.dash-input-label:first-of-type {
  margin-top: 0;
}
.dash-input-button {
  cursor: pointer;
  user-select: none;
  align-self: flex-end;
  margin-top: var(--base-padding);
}
.boolean-input-container {
  height: var(--hds-spacing-5);
  width: var(--hds-spacing-5);
  border-radius: var(--hds-border-radius);
  box-sizing: border-box;
  flex-shrink: 0;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.boolean-input-container-indeterminate {
  height: var(--hds-spacing-5);
  width: var(--hds-spacing-5);
  border-radius: var(--hds-border-radius);
  box-sizing: border-box;
  flex-shrink: 0;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%, auto;
  border: var(--border-size) solid var(--border-color);
  background-clip: content-box;
}
.boolean-input-container-indeterminate::before {
  background-color: var(--border-color);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns=%27http://www.w3.org/2000/svg%27 version=%271.1%27 preserveAspectRatio=%27none%27 viewBox=%270 0 100 100%27><path d=%27M0 99 L99 0 L100 1 L1 100%27 stroke=%27white%27 fill=%27none%27 stroke-width=%272%27 /></svg>");
  mask: url("data:image/svg+xml;utf8,<svg xmlns=%27http://www.w3.org/2000/svg%27 version=%271.1%27 preserveAspectRatio=%27none%27 viewBox=%270 0 100 100%27><path d=%27M0 99 L99 0 L100 1 L1 100%27 stroke=%27white%27 fill=%27none%27 stroke-width=%272%27 /></svg>");
  mask-size: 100% 100%;
  position: absolute;
  width: 100%;
  height: 100%;
  content: "";
}
.boolean-input-container-indeterminate > * {
  opacity: 0;
}
.boolean-input-container-checked {
  height: var(--hds-spacing-5);
  width: var(--hds-spacing-5);
  border-radius: var(--hds-border-radius);
  box-sizing: border-box;
  flex-shrink: 0;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--hds-action);
}
.boolean-input-container-unchecked {
  height: var(--hds-spacing-5);
  width: var(--hds-spacing-5);
  border-radius: var(--hds-border-radius);
  box-sizing: border-box;
  flex-shrink: 0;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hds-foreground-tertiary);
}
.boolean-input-container-unchecked:hover {
  border: 1px solid var(--hds-foreground-tertiary-hover);
}
.boolean-input-container-unchecked:active {
  border: 1px solid var(--hds-foreground-tertiary-press);
}
.boolean-input-container-unchecked.big,
.boolean-input-container-checked.big {
  height: var(--hds-spacing-5);
  width: var(--hds-spacing-5);
  border-radius: var(--hds-border-radius);
}
.boolean-input-container-unchecked.small,
.boolean-input-container-checked.small {
  height: var(--hds-spacing-4);
  width: var(--hds-spacing-4);
  border-radius: var(--hds-border-radius);
}
.boolean-input-container-disabled {
  border: 1px solid var(--hds-foreground-inactive);
  background-color: unset;
  pointer-events: none;
  cursor: unset;
}
.boolean-input-container-disabled .boolean-input-checkmark-checked {
  --hds-icon-color: var(--hds-foreground-inactive);
  --icon-color: var(--hds-foreground-inactive);
}
.boolean-input-checkmark-checked {
  --hds-icon-color: var(--hds-ondarkcolor-primary);
  --icon-color: var(--hds-ondarkcolor-primary);
  opacity: 1;
}
.boolean-input-checkmark-unchecked {
  opacity: 0;
}
.clearable-text-field-container {
  background-color: transparent;
  border-radius: var(--input-border-radius);
  border: var(--input-border-size) solid var(--input-border-color-active);
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-tiny);
  color: var(--font-color-active);
  caret-color: var(--input-caret-color);
  height: var(--input-height);
  box-sizing: border-box;
  height: var(--line-height);
  display: flex;
  flex-grow: 1;
  align-items: center;
}
.clearable-text-field-container input[type="number"],
.clearable-text-field-container input[type="text"] {
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-tiny);
  color: var(--font-color-active);
  caret-color: var(--input-caret-color);
}
.clearable-text-field-container:focus-within {
  border-radius: var(--input-border-radius);
  border: var(--input-border-size) solid var(--input-border-color-active);
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-tiny);
  color: var(--font-color-active);
  caret-color: var(--input-caret-color);
  height: var(--input-height);
  box-sizing: border-box;
  height: var(--line-height);
  display: flex;
  flex-grow: 1;
  align-items: center;
  border: var(--input-border-size) solid var(--input-border-color-focussed);
  background-color: transparent;
  color: var(--font-color-emphasized);
}
.clearable-text-field-container:focus-within input[type="number"],
.clearable-text-field-container:focus-within input[type="text"] {
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-tiny);
  color: var(--font-color-active);
  caret-color: var(--input-caret-color);
}
.clearable-text-field-container-input {
  --input-border-color-focussed: transparent;
  --input-border-color-active: transparent;
  --input-border-color-inactive: transparent;
  --input-bg-color-inactive: transparent;
  --input-bg-color-active: transparent;
  border-width: 0;
  box-sizing: border-box;
  flex-grow: 1;
}
.clearable-text-field-clear-button {
  border: none;
  margin: 0 var(--base-padding);
  cursor: pointer;
  transition: opacity var(--input-animation-duration) ease-in-out;
}
.clearable-text-field-clear-button-hidden {
  border: none;
  margin: 0 var(--base-padding);
  cursor: pointer;
  transition: opacity var(--input-animation-duration) ease-in-out;
  opacity: 0;
  pointer-events: none;
}
.clearable-text-field-clear-button-icon {
  background-color: var(--icon-color, var(--font-color));
  flex-shrink: 0;
  width: var(--icon-box-size);
  height: var(--icon-box-size);
}
.clearable-text-field-clear-button-icon:active {
  --icon-color: var(--disabled-icon-color);
}
.number-display {
  border-radius: var(--hds-border-radius);
  overflow: hidden;
  position: relative;
}
.number-display::after {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: var(--hds-border-radius);
  pointer-events: none;
  box-shadow: inset 0px 0px 0px 1.05px var(--hds-foreground-divider);
}
.number-display:hover::after {
  box-shadow: inset 0px 0px 0px 1.05px var(--hds-foreground-tertiary-hover);
}
.number-display:active::after {
  box-shadow: inset 0px 0px 0px 1.05px var(--hds-foreground-tertiary-press);
}
.number-display:has(.color-display-picker-active)::after {
  box-shadow: inset 0px 0px 0px 1.05px var(--hds-foreground-primary);
}
.number-display-range {
  background-color: var(--bg-color-item-selected);
  position: absolute;
  height: calc(100% * (var(--upper) - var(--lower)));
  width: 100%;
  top: calc(100% * (1 - var(--upper)));
}
.number-display-name {
  font-family: var(--font-family);
  font-size: var(--text-size-tiny);
  color: var(--font-color);
  --icon-color: var(--font-color);
  line-height: var(--line-height-tiny);
  height: 100%;
  width: 100%;
  text-align: center;
  line-height: var(--swatch-height);
  mix-blend-mode: difference;
}
.file-segment {
  padding: 0;
  display: flex;
  align-items: center;
}
.file-segment-add {
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.file-input-container {
  cursor: pointer;
  user-select: none;
  width: var(--file-input-width);
  box-sizing: border-box;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.file-input-container > *:not(:first-child) {
  margin-left: var(--base-padding);
}
.file-input-container:hover .file-input-label {
  color: var(--font-color-emphasized);
}
.file-input-container:hover .plus-number {
  background-color: var(--font-color-emphasized);
}
.file-input-container-disabled {
  cursor: pointer;
  user-select: none;
  width: var(--file-input-width);
  box-sizing: border-box;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  pointer-events: none;
  opacity: var(--input-disabled-opacity);
  cursor: default;
}
.file-input-container-disabled > *:not(:first-child) {
  margin-left: var(--base-padding);
}
.file-input-container-disabled:hover .file-input-label {
  color: var(--font-color-emphasized);
}
.file-input-container-disabled:hover .plus-number {
  background-color: var(--font-color-emphasized);
}
.file-input-label {
  font-family: var(--font-family);
  font-size: var(--text-size-tiny);
  color: var(--font-color);
  --icon-color: var(--font-color);
  line-height: var(--line-height-tiny);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.grid-placement-container {
  display: flex;
  align-items: center;
  justify-content: center;
}
.grid-placement-selector {
  width: 20px;
  height: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  overflow: hidden;
  cursor: pointer;
}
.grid-placement-selector:hover .grid-placement-selector-option {
  background-color: var(--grid-placement-hover);
}
.grid-placement-selector-editable {
  width: 20px;
  height: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  overflow: hidden;
  cursor: pointer;
}
.grid-placement-selector-editable:hover .grid-placement-selector-option {
  background-color: var(--grid-placement-hover);
}
.grid-placement-selector-editable:hover .grid-placement-selector-option-selected {
  background-color: var(--grid-placement-selected);
}
.grid-placement-selector-option {
  width: 6px;
  height: 6px;
  background-color: var(--grid-placement-unselected);
  border-radius: 1px;
  margin-bottom: 1px;
  transition: background-color var(--input-animation-duration-quick) ease-in-out;
}
.grid-placement-selector-option-selected {
  width: 6px;
  height: 6px;
  background-color: var(--grid-placement-unselected);
  border-radius: 1px;
  margin-bottom: 1px;
  transition: background-color var(--input-animation-duration-quick) ease-in-out;
  background-color: var(--grid-placement-selected);
}
.grid-placement-selector-option-selected-secondary {
  width: 6px;
  height: 6px;
  background-color: var(--grid-placement-unselected);
  border-radius: 1px;
  margin-bottom: 1px;
  transition: background-color var(--input-animation-duration-quick) ease-in-out;
  background-color: var(--grid-placement-selected);
  background-color: var(--grid-placement-selected-secondary);
}
.grid-placement-list-container {
  padding: var(--base-padding) 0;
}
.grid-placement-list {
  display: flex;
  flex: wrap;
  padding: calc(2 * var(--base-padding)) 0;
}
.grid-placement-list-header {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.grid-placement-list-header-icon {
  cursor: pointer;
  user-select: none;
}
.grid-placement-list-item {
  cursor: pointer;
  margin-right: calc(2 * var(--base-padding));
}
.grid-placement-list-item-label {
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height);
  color: var(--font-color-hint);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: var(--base-padding);
}
.grid-placement-list-add-item {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--input-border-color-inactive);
  border-radius: var(--input-border-radius);
}
.grid-placement-list-add-item:hover {
  border: 1px dashed var(--input-border-color-hover);
  border-radius: var(--input-border-radius);
}
.grid-placement-list-add-item:hover .grid-placement-list-add-icon {
  --icon-color: rgba(255, 255, 255, 0.6);
}
.grid-placement-list-add-icon {
  background-color: var(--icon-color, var(--font-color));
  flex-shrink: 0;
  width: var(--icon-box-size);
  height: var(--icon-box-size);
}
.grid-placement-picker-top-nibble {
  display: none;
}
.popover-bottom .grid-placement-picker-top-nibble {
  margin-bottom: var(--tooltip-nibble-size);
  display: block;
}
.grid-placement-picker-bottom-nibble {
  display: none;
}
.popover-top .grid-placement-picker-bottom-nibble {
  margin-top: var(--tooltip-nibble-size);
  display: block;
}
.grid-placement-picker-container {
  display: block;
}
.grid-placement-picker {
  width: 129px;
  height: 150px;
  box-sizing: border-box;
  box-shadow: 0 1px 4px 0 var(--shadow-color);
  --divider-color-override: var(--bg-color-popup-divider);
  background-color: var(--popup-color, var(--bg-color-popup));
  border: var(--border-size) solid var(--border-color);
  border-radius: var(--popup-border-radius);
  z-index: 9;
  padding: calc(2 * var(--base-padding));
  display: flex;
  flex-direction: column;
  align-items: center;
}
.grid-placement-picker-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: calc(2 * var(--base-padding));
  font-family: var(--font-family);
  font-size: var(--text-size);
  color: var(--font-color-group-item);
  --icon-color: var(--font-color-group-item);
  line-height: var(--line-height);
  color: var(--font-color-inactive-item-text);
  --icon-color: var(--font-color-inactive-item-text);
}
.grid-placement-picker-grid {
  width: 108px;
  height: 108px;
  display: flex;
  flex-wrap: wrap;
}
.grid-placement-picker-item {
  height: 32px;
  width: 32px;
  margin: 2px;
  background-color: var(---grid-placement-unselected);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family);
  font-size: var(--text-size);
  color: var(--font-color-group-item);
  --icon-color: var(--font-color-group-item);
  line-height: var(--line-height);
  color: var(--font-color-inactive-item-text);
  --icon-color: var(--font-color-inactive-item-text);
  cursor: pointer;
  user-select: none;
}
.grid-placement-picker-item:hover {
  height: 32px;
  width: 32px;
  margin: 2px;
  background-color: var(---grid-placement-unselected);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family);
  font-size: var(--text-size);
  color: var(--font-color-group-item);
  --icon-color: var(--font-color-group-item);
  line-height: var(--line-height);
  color: var(--font-color-inactive-item-text);
  --icon-color: var(--font-color-inactive-item-text);
  cursor: pointer;
  user-select: none;
  color: var(--font-color-item-text-hover);
  --icon-color: var(--font-color-item-text-hover);
  background-color: var(--grid-placement-hover);
}
.grid-placement-picker-item-selected {
  height: 32px;
  width: 32px;
  margin: 2px;
  background-color: var(---grid-placement-unselected);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family);
  font-size: var(--text-size);
  color: var(--font-color-group-item);
  --icon-color: var(--font-color-group-item);
  line-height: var(--line-height);
  color: var(--font-color-inactive-item-text);
  --icon-color: var(--font-color-inactive-item-text);
  cursor: pointer;
  user-select: none;
  background-color: var(--grid-placement-selected);
  color: var(--main-button-font-color);
}
.grid-placement-picker-item-disabled {
  height: 32px;
  width: 32px;
  margin: 2px;
  background-color: var(---grid-placement-unselected);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family);
  font-size: var(--text-size);
  color: var(--font-color-group-item);
  --icon-color: var(--font-color-group-item);
  line-height: var(--line-height);
  color: var(--font-color-inactive-item-text);
  --icon-color: var(--font-color-inactive-item-text);
  cursor: pointer;
  user-select: none;
  opacity: var(--input-disabled-opacity);
  cursor: default;
  pointer-events: none;
}
.slider-input-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  --slider-length: calc(var(--input-width) - var(--base-padding) - 40px);
}
.slider-input-group > *:not(:first-child) {
  margin-left: var(--base-padding);
}
.slider-input-group .number-input-container-fixed {
  margin-right: var(--base-padding);
}
.slider-input-group-expanding {
  flex-grow: 1;
}
.search-field-box {
  background-color: transparent;
  border-radius: var(--input-border-radius);
  border: var(--input-border-size) solid var(--input-border-color-active);
  box-shadow: inset 0px 4px 6px var(--input-inner-shadow-color);
  --icon-color: var(--hint-icon-color);
  height: var(--search-field-height);
  border-radius: calc(var(--search-field-height) / 2);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding-left: calc(2 * var(--base-padding));
  position: relative;
}
.search-field-box:hover {
  border-color: var(--input-border-color-hover);
}
.search-field-box:focus-within {
  border: var(--input-border-size) solid var(--input-border-color-focussed);
  background-color: transparent;
  color: var(--font-color-emphasized);
}
.search-field-box input[type="number"]:focus,
.search-field-box input[type="text"]:focus {
  border: none;
}
.search-field-input {
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-tiny);
  color: var(--font-color-active);
  caret-color: var(--input-caret-color);
  background: transparent;
  border: none;
  flex-grow: 1;
  margin: 0 calc(2 * var(--base-padding));
}
.search-field-input::placeholder {
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height);
  color: var(--font-color-hint);
  font-style: normal;
}
input[type=text],
input[type=number],
textarea {
  background-color: transparent;
  border-radius: var(--input-border-radius);
  border: var(--input-border-size) solid var(--input-border-color-active);
  height: var(--input-height);
  box-sizing: border-box;
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-tiny);
  color: var(--font-color-active);
  caret-color: var(--input-caret-color);
  padding: var(--base-padding) calc(2 * var(--base-padding));
}
input[type=text] input[type="number"],
input[type=number] input[type="number"],
textarea input[type="number"],
input[type=text] input[type="text"],
input[type=number] input[type="text"],
textarea input[type="text"] {
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-tiny);
  color: var(--font-color-active);
  caret-color: var(--input-caret-color);
}
input[type=text]:focus,
input[type=number]:focus {
  border: var(--input-border-size) solid var(--input-border-color-focussed);
  background-color: transparent;
  color: var(--font-color-emphasized);
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
}
input[type=number] {
  -moz-appearance: textfield;
}
input::placeholder {
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height);
  color: var(--font-color-hint);
  font-style: normal;
}
.hds-input-medium[type=text] {
  caret-color: var(--hds-input-caret-color);
  box-sizing: border-box;
  border-radius: var(--border-radius);
  border: var(--border-size) solid var(--hds-input-border);
  background-color: var(--hds-input-bg-color);
  font-family: var(--font-family);
  font-size: var(--text-size-big-input);
  line-height: var(--line-height);
  color: var(--hds-input-color);
  height: var(--dashboard-input-height);
  padding: 0 calc(4 * var(--base-padding));
}
.hds-input-medium[type=text]::placeholder {
  color: var(--hds-input-placeholder-color);
}
.hds-input-medium[type=text]:focus {
  border: var(--border-size-highlighted) solid var(--hds-input-border-color-focussed);
}
.hds-input-medium[type=text]:hover:not(:focus) {
  border-color: var(--hds-input-border-color-hover);
}
.hds-input-medium[type=text]:focus {
  padding-left: calc(calc(4 * var(--base-padding)) - (var(--border-size-highlighted) - var(--border-size)));
}
.hds-input-small[type=number] {
  caret-color: var(--hds-input-caret-color);
  box-sizing: border-box;
  border-radius: var(--border-radius);
  border: var(--border-size) solid var(--hds-input-border);
  background-color: var(--hds-input-bg-color);
  color: var(--hds-input-color);
  font-family: var(--font-family);
  font-size: var(--text-size-dialog);
  font-style: normal;
  font-weight: 400;
  line-height: var(--line-height);
  color: var(--font-color-secondary);
  --icon-color: var(--font-color-secondary);
  height: var(--medium-button-height);
  padding: 0px var(--base-padding) 0px calc(2 * var(--base-padding));
}
.hds-input-small[type=number]::placeholder {
  color: var(--hds-input-placeholder-color);
}
.hds-input-small[type=number]:focus {
  border: var(--border-size-highlighted) solid var(--hds-input-border-color-focussed);
}
.hds-input-small[type=number]:hover:not(:focus) {
  border-color: var(--hds-input-border-color-hover);
}
.hds-input-small[type=number]:focus {
  padding-left: calc(calc(2 * var(--base-padding)) - (var(--border-size-highlighted) - var(--border-size)));
}
.slider-container-v {
  cursor: pointer;
  user-select: none;
  position: relative;
  display: flex;
  --track-rounding: calc(var(--slider-width) / 2);
  flex-direction: row;
}
.slider-container-v.slider-container-expanding {
  height: 1px;
  flex-grow: 1;
}
.slider-container-v.slider-container-fixed {
  height: var(--slider-length);
}
.slider-container-h {
  cursor: pointer;
  user-select: none;
  position: relative;
  display: flex;
  --track-rounding: calc(var(--slider-width) / 2);
  flex-direction: column;
}
.slider-container-h.slider-container-expanding {
  width: 1px;
  flex-grow: 1;
}
.slider-container-h.slider-container-fixed {
  width: var(--slider-length, --swatch-width);
}
.slider-inner-container-h {
  position: relative;
  display: flex;
  flex-direction: row;
  height: var(--slider-width);
}
.slider-inner-container-v {
  position: relative;
  display: flex;
  flex-direction: column-reverse;
  width: var(--slider-width);
}
.slider-track-full-v {
  background-color: var(--hds-action);
  flex-grow: var(--full-progress);
  width: var(--slider-width);
  border-radius: 0 0 var(--track-rounding) var(--track-rounding);
  height: 0px;
}
.slider-track-full-v-disabled {
  background-color: var(--hds-action);
  flex-grow: var(--full-progress);
  width: var(--slider-width);
  border-radius: 0 0 var(--track-rounding) var(--track-rounding);
  height: 0px;
  background-color: var(--hds-action-disabled);
}
.slider-track-full-h {
  background-color: var(--hds-action);
  flex-grow: var(--full-progress);
  height: var(--slider-width);
  border-radius: var(--track-rounding) 0 0 var(--track-rounding);
  width: 0px;
}
.slider-track-full-h-disabled {
  background-color: var(--hds-action);
  flex-grow: var(--full-progress);
  height: var(--slider-width);
  border-radius: var(--track-rounding) 0 0 var(--track-rounding);
  width: 0px;
  background-color: var(--hds-action-disabled);
}
.slider-track-empty-v {
  background-color: var(--hds-foreground-tertiary);
  flex-grow: var(--empty-progress);
  width: var(--slider-width);
  height: 0px;
  border-radius: var(--track-rounding) var(--track-rounding) 0 0;
}
.slider-track-empty-h {
  background-color: var(--hds-foreground-tertiary);
  flex-grow: var(--empty-progress);
  height: var(--slider-width);
  width: 0px;
  border-radius: 0 var(--track-rounding) var(--track-rounding) 0;
}
.slider-button-v,
.slider-button-v-disabled {
  position: absolute;
  width: var(--slider-grabber-size);
  height: var(--slider-grabber-size);
  border-radius: var(--hds-spacing-4);
  background-color: var(--sub-item-box-bg-color);
  border: 1px solid #e0f0fa1f;
  filter: var(--hds-object--subtle);
  left: calc(((var(--slider-grabber-size) - var(--slider-width)) / -2) - 0.5px);
  bottom: calc(((100% - var(/*var(--slider-length)*/ --slider-width)) * var(--full-progress) / var(--range)) - (var(--slider-grabber-size) / 2) + (var(--slider-width) / 2));
}
.slider-button-h,
.slider-button-h-disabled {
  position: absolute;
  width: var(--slider-grabber-size);
  height: var(--slider-grabber-size);
  border-radius: var(--hds-spacing-4);
  background-color: var(--sub-item-box-bg-color);
  border: 1px solid #e0f0fa1f;
  filter: var(--hds-object--subtle);
  top: calc(((var(--slider-grabber-size) - var(--slider-width)) / -2) - 0.5px);
  left: calc(((100% - var(/*var(--slider-length)*/ --slider-width)) * var(--full-progress) / var(--range)) - (var(--slider-grabber-size) / 2) + (var(--slider-width) / 2));
}
.slider-button-v-disabled,
.slider-button-h-disabled {
  cursor: not-allowed;
  outline: 0px;
}
.slider-tick-container-v {
  display: flex;
  justify-content: space-between;
  position: absolute;
  flex-direction: column;
  height: 100%;
  left: calc(var(--slider-width) + var(--slider-tick-offset));
  padding: calc(var(--track-rounding) - var(--slider-tick-width) / 2) 0;
  box-sizing: border-box;
}
.slider-tick-container-h {
  display: flex;
  justify-content: space-between;
  position: absolute;
  flex-direction: row;
  width: 100%;
  top: calc(var(--slider-width) + var(--slider-tick-offset));
  padding: 0 calc(var(--track-rounding) - var(--slider-tick-width) / 2);
  box-sizing: border-box;
}
.base-slider-tick {
  background-color: var(--slider-tick-color);
}
.slider-tick-v {
  background-color: var(--slider-tick-color);
  width: var(--slider-tick-length);
  height: var(--slider-tick-width);
}
.slider-tick-h {
  background-color: var(--slider-tick-color);
  width: var(--slider-tick-width);
  height: var(--slider-tick-length);
}
.slider-tooltip-container {
  max-width: unset;
  --base-padding: 4px;
  --half-panel-margin: 1px;
  --panel-margin: 2px;
  --panel-body-border-radius: 4px;
  --panel-header-border-radius: 5px;
  --font-family: "Fira Regular";
  --font-family-subdued: "Fira Light";
  --font-family-emphasized: "Fira Medium";
  --text-size-dashboard-title: 18px;
  --text-size-dashboard-section-title: 16px;
  --text-size-dashboard-description: 16px;
  --text-size-big: 16px;
  --text-size-big-button: 14px;
  --text-size-big-input: 14px;
  --text-size-menu: 12px;
  --text-size-dialog: 14px;
  --text-size: 12px;
  --text-size-tiny: 10px;
  --text-size-super-tiny: 8px;
  --text-size-drag-and-drop-title: 20px;
  --text-size-dialog-big: 18px;
  --line-height-tiny: 12px;
  --line-height-menu: 16px;
  --line-height: 20px;
  --header-line-height: 24px;
  --line-height-dashboard-title: 26px;
  --line-height-dashboard-section-title: 24px;
  --line-height-dashboard-description: 24px;
  --line-height-drag-and-drop-title: 24px;
  --line-height-dialog-header: 16px;
  --line-height-dialog-content: 20px;
  --divider-thickness: 1px;
  --divider-spacing: 0px;
  --divider-padding: calc(4 * var(--base-padding));
  --popup-border-radius: 4px;
  --popup-border-radius-large: 8px;
  --popup-item-height-large: 40px;
  --popup-menu-width: 200px;
  --popup-footer-height: 64px;
  --popup-header-height: 64px;
  --popup-padding-h: 24px;
  --popup-padding-v: 20px;
  --white-popup-max-height: 280px;
  --popup-description-height: 200px;
  --popup-item-selection-height: 2px;
  --popup-image-width: 400px;
  --popup-image-height: 175px;
  --border-size: 1px;
  --border-size-highlighted: 2px;
  --border-radius: 4px;
  --button-icon-spacing: 8px;
  --input-height: 22px;
  --input-width: 93px;
  --number-input-width: var(--input-width);
  --file-input-width: var(--input-width);
  --dash-input-width: 125px;
  --input-prefix-width: 6px;
  --input-prefix-left-padding: 5px;
  --input-border-radius: 2px;
  --input-border-size: 1px;
  --input-padding: 4px;
  --input-icon-padding: 6px;
  --input-disabled-opacity: 0.5;
  --boolean-input-height: 16px;
  --sliding-toggle-height: 20px;
  --sliding-toggle-width: 40px;
  --input-animation-duration: 300ms;
  --input-animation-duration-quick: 100ms;
  --item-border-radius: 2px;
  --reduced-item-height: 28px;
  --main-item-height: 35px;
  --large-main-item-height: 48px;
  --icon-button-group-height: 28px;
  --icon-box-size: 16px;
  --icon-text-inline-size: var(--text-size);
  --icon-header-size: var(--header-line-height);
  --icon-big-size: 40px;
  --icon-padding-size: calc(2 * var(--base-padding));
  --tooltip-text-size: 13px;
  --tooltip-line-height: 18px;
  --tooltip-nibble-size: 6px;
  --tooltip-nibble-indentation: 18px;
  --tooltip-width: 200px;
  --tooltip-width-wide: 320px;
  --selected-item-selection-bar-width: 3px;
  --selected-group-item-selection-bar-width: 4px;
  --inactive-item-opacity: 0.4;
  --graph-width: 2px;
  --zoomlevel-line-width: 1px;
  --collapsible-margin: 12px;
  --scrollbar-width: 8px;
  --scrollbar-expanded-grabber-width: 6px;
  --scrollbar-grabber-width: 4px;
  --map-overlay-margin: 12px;
  --map-overlay-item-size: 40px;
  --menubar-size: 48px;
  --menubar-title-width: 300px;
  --menubar-select-menu-width: 150px;
  --menubar-icon-size: 32px;
  --menubar-lang-dropdown-height: 400px;
  --menubar-notification-dot-size: 8px;
  --menubar-scheme-selection-item-label-width: 200px;
  --search-field-height: 25px;
  --panel-small-width: 230px;
  --panel-width: 300px;
  --panel-large-width: 360px;
  --panel-tab-height: 25px;
  --panel-empty-content-top-offset: 200px;
  --panel-header-button-size: 20px;
  --slider-width: 4px;
  --slider-length: 82px;
  --slider-grabber-size: 14px;
  --slider-tick-length: 2px;
  --slider-tick-width: 1px;
  --slider-tick-offset: 1px;
  --navigation-bar-size: 40px;
  --drag-item-divider-height: 1px;
  --drag-item-divider-end-size: 5px;
  --notification-container-height: 32px;
  --notification-toast-height: 56px;
  --notification-animation-curve: cubic-bezier(0.7, 0, 0.5, 1.5);
  --notification-animation-duration: 200ms;
  --color-picker-height: 150px;
  --color-picker-crosshair-size: 15px;
  --color-picker-input-width: 70px;
  --color-picker-slider-track-height: 8px;
  --color-picker-slider-handle-size: 12px;
  --color-picker-container-width: 320px;
  --color-picker-eyedrop-size: 24px;
  --icon-picker-container-width: 254px;
  --icon-picker-container-height: 318px;
  --icon-picker-icon-size: 24px;
  --swatch-height: 22px;
  --swatch-width: 50px;
  --ga-blend-mode-btn-width: 52px;
  --basic-template-thumbnail-height: 40px;
  --basic-template-thumbnail-width: 56px;
  --basic-template-thumbnail-border: 2px;
  --basic-template-thumbnail-border-offset: 1px;
  --window-header-height: 73px;
  --extra-small-window-width: 468px;
  --extra-small-window-height: 212px;
  --small-window-width: 460px;
  --small-window-height: 280px;
  --medium-window-width: 380px;
  --medium-window-height: 320px;
  --big-window-width: 640px;
  --big-window-height: 520px;
  --wide-big-window-width: 720px;
  --wide-big-window-height: 520px;
  --wide-extra-big-window-width: 950px;
  --wide-extra-big-window-height: 520px;
  --fluid-window-height: calc(100vh - 200px);
  --fluid-window-width: calc(100vw - 512px);
  --search-bar-height: 50px;
  --icon-window-drag-area-height: 310px;
  --medium-area-height: 100px;
  --big-area-height: 180px;
  --extra-big-area-height: 320px;
  --icon-window-area-height: 393px;
  --drop-target-outline-size: 1px;
  --drop-target-outline-offset: 1px;
  --image-picker-crosshair-size: 8px;
  --image-picker-border-size: 2px;
  --icon-window-side-bar-width: 207px;
  --icon-window-icon-entity-width: 77px;
  --icon-window-icon-entity-height: 88px;
  --icon-window-icon-entity-background-size: 48px;
  --icon-window-icon-entity-background-size-small: 24px;
  --icon-window-change-view-header: 32px;
  --icon-window-change-item-text-width: 100px;
  --icon-window-change-item-indentation: 53px;
  --icon-window-resource-view-header: 64px;
  --icon-window-name-pill-container-width: 240px;
  --icon-window-name-pill-border-radius: 16px;
  --icon-window-item-border-width: 2px;
  --icon-window-notification-height: 32px;
  --medium-button-height: 24px;
  --button-height: 32px;
  --large-button-height: 40px;
  --dashboard-item-width: 340px;
  --dashboard-item-height: 160px;
  --dashboard-thumbnail-height: 176px;
  --dashboard-input-height: 32px;
  --component-highlight-thickness: 2px;
  --modifier-group-item-indentation: 24px;
  --region-specific-bar-width: 2px;
  --region-specific-bar-height: 16px;
  --modifier-affected-specific-margin: -20px;
  --modifier-affected-specific-tooltip-width: 296px;
  --tooltip-content-max-width: 225px;
  --modifier-overlay-panel-header-height: 38px;
  --drag-item-divider: #126EF8;
  --drag-item-highlight: rgba(15, 22, 33, 0.1);
  --font-color-highlighted: #126EF8;
  --font-color-highlighted-emphasized: #d0e2fe;
  --font-color-emphasized: #0E1520;
  --font-color-active: #1C232E;
  --font-color: #272F3A;
  --font-color-subdued: #535C6B;
  --font-color-hint: var(--hds-gray-600);
  --font-color-disabled: #8890A0;
  --main-button-font-color: #272F3A;
  --main-button-font-color-emphasized: #0f1621;
  --font-color-menu: #535C6B;
  --font-color-tooltip: #1C232E;
  --font-color-group-item: #1C232E;
  --font-color-dialog: rgba(16, 23, 35, 0.95);
  --font-color-oncolor: #ffffff;
  --font-color-oncolor-hover: #ffffff;
  --font-color-oncolor-subdued: rgba(225, 234, 254, 0.58);
  --font-color-panel-notification: #E9ECF2;
  --font-color-inactive-item-text: #333B47;
  --font-color-item-text-hover: #0f1621;
  --font-color-hds-tertiary: rgba(34, 54, 89, 0.41);
  --font-color-hds-tertiary-hover: rgba(19, 35, 67, 0.5);
  --font-color-hds-tertiary-disabled: rgba(0, 26, 77, 0.2);
  --font-color-body: #3F4855;
  --font-color-primary: rgba(16, 23, 35, 0.95);
  --font-color-primary-disabled: rgba(0, 26, 77, 0.2);
  --font-color-secondary: rgba(7, 23, 49, 0.6);
  --font-color-secondary-disabled: rgba(0, 26, 77, 0.2);
  --header-icon-color: #535C6B;
  --active-icon-color: #1C232E;
  --active-icon-color-inverted: #ffffff;
  --inactive-icon-color: #6A7483;
  --disabled-item-group-text-color: #6A7483;
  --hint-icon-color: #6A7483;
  --disabled-icon-color: #8890A0;
  --action-icon-color: #535C6B;
  --disabled-action-icon-color: #8890A0;
  --error-icon-color: #CF001A;
  --warning-icon-color: #9E6400;
  --warning-icon-color-hover: #FAAA1E;
  --inactive-icon-border-color: #A4ACBA;
  --slider-input-border-color: #A4ACBA;
  --panel-header-button-bg: #f3f3f4;
  --panel-tab-bg-unselected: rgba(255, 255, 255, 0.8);
  --divider-color: rgba(255, 255, 255, 0.2);
  --divider-color-ondark: rgba(15, 22, 33, 0.2);
  --sub-item-box-border-color: #E9ECF2;
  --sub-item-box-bg-color: #CCD1DB;
  --bg-color-ui: #f3f3f4;
  --bg-color-panel-base: #ffffff;
  --bg-color-panel-content: #e7e8e9;
  --bg-color-modifier-panel-content: #ffffff;
  --bg-color-panel-section: #ffffff;
  --bg-color-content: rgba(255, 255, 255, 0.4);
  --bg-color-panel-dark: #ffffff;
  --bg-color-panel-header-dark: #ffffff;
  --bg-color-panel-group-item-selected: #ffffff;
  --border-color-panel-item: #ffffff;
  --bg-color-item: rgba(255, 255, 255, 0.9);
  --bg-color-item-selected: rgba(255, 255, 255, 0.95);
  --bg-color-item-highlighted: rgba(255, 255, 255, 0.6);
  --bg-color-item-header: #cfd0d3;
  --bg-color-button-group: #f3f3f4;
  --blur-popup-color: rgba(8, 23, 52, 0.6);
  --bg-color-popup: #ffffff;
  --bg-color-popup-item-hover: #ffffff;
  --bg-color-popup-divider: rgba(15, 55, 115, 0.1);
  --bg-window: #ffffff;
  --bg-hds-secondary: #ffffff;
  --bg-window-content: rgba(255, 255, 255, 0.4);
  --bg-window-header: #e7e8e9;
  --bg-global-adjustments: rgba(255, 255, 255, 0.9);
  --bg-color-inline-box: rgba(255, 255, 255, 0.4);
  --border-color: rgba(15, 22, 33, 0.1);
  --border-color-highlighted: #1C232E;
  --bg-selected-item: var(--hds-blue-onlight-400-020);
  --main-button-color: #126EF8;
  --main-button-color-hover: #0D5ED9;
  --action-text-button: #126EF8;
  --action-text-button-hover: #0D5ED9;
  --normal-button-bg-color: rgba(255, 255, 255, 0.8);
  --normal-button-bg-color-hover: rgba(255, 255, 255, 0.95);
  --button-primary-bg: linear-gradient(270deg, #65EBE2 0%, #6B9CFF 100%);
  --button-primary-bg-hover: linear-gradient(90deg, #3675F5 0%, #1BE0D7 100%);
  --button-primary-bg-active: linear-gradient(90deg, #1854CC 0%, #08CCC3 100%);
  --button-primary-bg-disabled: linear-gradient(270deg, rgba(125, 230, 225, 0.4) 0%, rgba(128, 170, 255, 0.4) 100%);
  --button-primary-color: rgba(16, 25, 37, 0.9);
  --button-primary-color-disabled: rgba(18, 41, 84, 0.3);
  --button-secondary-bg: rgba(0, 55, 141, 0.05);
  --button-secondary-bg-hover: rgba(15, 55, 115, 0.1);
  --button-secondary-bg-active: rgba(30, 43, 70, 0.6);
  --button-secondary-bg-disabled: rgba(0, 55, 141, 0.05);
  --button-secondary-color: rgba(16, 23, 35, 0.95);
  --button-secondary-color-disabled: rgba(18, 41, 84, 0.3);
  --button-danger-bg: #CF001A;
  --button-danger-bg-hover: #A5002F;
  --button-danger-bg-active: #8F0029;
  --button-danger-bg-disabled: rgba(207, 0, 26, 0.3);
  --button-danger-color: #ffffff;
  --button-warn-bg: #FFBD09;
  --button-warn-bg-hover: #FAAA1E;
  --button-warn-bg-active: #9E6400;
  --button-warn-bg-disabled: rgba(255, 190, 10, 0.3);
  --button-warn-color: rgba(15, 24, 36, 0.9);
  --button-warn-color-active: #FFFFFF;
  --button-oncolor-primary-bg: #ffffff;
  --button-oncolor-primary-color: rgba(16, 23, 35, 0.95);
  --button-oncolor-primary-bg-disabled: #ffffff;
  --button-oncolor-primary-color-disabled: rgba(18, 41, 84, 0.3);
  --button-oncolor-primary-bg-hover: #F2F5F9;
  --button-oncolor-primary-bg-active: #DADFE7;
  --button-oncolor-secondary-bg: rgba(34, 54, 89, 0.41);
  --button-oncolor-secondary-color: #ffffff;
  --button-oncolor-secondary-bg-disabled: rgba(34, 54, 89, 0.41);
  --button-oncolor-secondary-color-disabled: rgba(225, 234, 254, 0.58);
  --button-oncolor-secondary-bg-hover: rgba(19, 35, 67, 0.5);
  --button-oncolor-secondary-bg-active: rgba(7, 23, 49, 0.6);
  --background-object: rgba(0, 55, 141, 0.05);
  --background-object-hover: rgba(15, 55, 115, 0.1);
  --button-apply-modifiers-bg: rgba(255, 255, 255, 0.8);
  --button-apply-modifiers-bg-hover: rgba(255, 255, 255, 0.7);
  --button-apply-modifiers-bg-disabled: rgba(255, 255, 255, 0.9);
  --button-apply-modifiers-border: #4791FF;
  --button-apply-modifiers-border-hover: #5FB2FF;
  --button-apply-modifiers-border-disabled: rgba(18, 110, 248, 0.4);
  --colorblind-popup-divider: rgba(15, 54, 113, 0.1);
  --colorblind-popup-header-bg-color: #ffffff;
  --colorblind-popup-body-bg-color: #F2F5F9;
  --colorblind-popup-body-font-color: #535C6B;
  --colorblind-popup-button-color: rgba(15, 54, 113, 0.1);
  --input-border-color-focussed: #126EF8;
  --input-border-color-active: #0f1621;
  --input-border-color-hover: rgba(15, 22, 33, 0.3);
  --input-border-color-inactive: #6A7483;
  --input-border-color-error: #D35566;
  --input-bg-color-active: #ffffff;
  --input-bg-color-inactive: rgba(255, 255, 255, 0.3);
  --input-bg-color-inactive-lighter: rgba(255, 255, 255, 0.5);
  --hds-input-bg-color: #ffffff;
  --hds-input-border: rgba(34, 54, 89, 0.41);
  --hds-input-border-color-focussed: #0BC7C2;
  --hds-input-border-color-hover: rgba(19, 35, 67, 0.5);
  --hds-input-caret-color: rgba(16, 23, 35, 0.95);
  --hds-input-placeholder-color: rgba(34, 54, 89, 0.41);
  --hds-input-color: rgba(16, 23, 35, 0.95);
  --input-inner-shadow-color: rgba(0, 0, 0, 0.1);
  --input-caret-color: #126EF8;
  --input-slider-bg-color: rgba(15, 22, 33, 0.1);
  --input-slider-color: #126EF8;
  --color-picker-slider-grabber-color: #ffffff;
  --color-picker-bg-color: #3F4855;
  --color-picker-input-border-color: #8890A0;
  --color-picker-input-bg-color: #1C232E;
  --color-picker-input-color: #E9ECF2;
  --dropdown-bg-color-opened: #e7e8e9;
  --dropdown-item-color: #ffffff;
  --dropdown-item-color-selected: #e7e8e9;
  --dropdown-item-color-hover: #ffffff;
  --shadow-color: rgba(15, 22, 33, 0.4);
  --drop-shadow-gradient: linear-gradient(to bottom, rgba(233, 236, 242, 0.6) 0%, transparent 100%);
  --selected-item-marker-color: #126EF8;
  --selection-color: #126EF8;
  --selection-gradient: rgba(18, 110, 248, 0.1);
  --region-specific-color: var(--hds-purple-onlight-400);
  --region-specific-color-hover: var(--hds-purple-onlight-200);
  --region-specific-color-bg-hover: rgba(140, 107, 174, 0.8);
  --region-specific-color-bg-pressed: rgba(140, 107, 174, 0.9);
  --region-specific-icon-color: rgba(247, 250, 253, 0.2);
  --region-specific-bg-color: rgba(179, 156, 201, 0.3);
  --jp-region-specific-bg-color: #49475d;
  --notification-color: #D35566;
  --notification-error-color: #CF001A;
  --notification-warning-color: #FFBD09;
  --notification-overlay-bg-color: #3F4855;
  --notification-overlay-bg-hover-color: #535C6B;
  --notification-overlay2-bg-color: #1C232E;
  --component-highlight-color: #6A7483;
  --component-highlight-color-subdued: #A4ACBA;
  --graph-color: var(--hds-background-inverse);
  --graph-stop: var(--hds-background-inverse);
  --graph-bg: var(--hds-background-primary);
  --graph-border: var(--hds-foreground-tertiary-hover);
  --graph-border-hover: var(--hds-foreground-tertiary-press);
  --dash-color: #0f1621;
  --scrollbar-color: rgba(15, 22, 33, 0.2);
  --scrollbar-color-active: rgba(15, 22, 33, 0.2);
  --scrollbar-color-hover: rgba(15, 22, 33, 0.4);
  --slider-grabber-outline-color: rgba(218, 239, 250, 0.12);
  --slider-tick-color: rgba(15, 22, 33, 0.4);
  --chart-item-color-selected: #126EF8;
  --chart-item-color: rgba(15, 22, 33, 0.2);
  --chart-selection-bg: rgba(15, 22, 33, 0.05);
  --color-swatch-border: #272F3A;
  --inactive-color-swatch: #6A7483;
  --hover-inactive-color-swatch: #A4ACBA;
  --map-picker-color-border: rgba(15, 22, 33, 0.1);
  --map-picker-no-color-bg: rgba(255, 255, 255, 0.6);
  --code-string-color: #126EF8;
  --drop-target-color: #126EF8;
  --path-type-color-text: #000;
  --path-type-color-scheme: #000;
  --path-type-color-layer: rgba(255, 255, 255, 0.1);
  --path-type-color-condition: rgba(255, 255, 255, 0.2);
  --path-type-color-styleset: #2E468F;
  --path-type-color-style: #2C48A1;
  --path-type-color-attribute: rgba(15, 22, 33, 0.4);
  --path-type-color-definition: #52A3DB;
  --path-type-color-subcondition: #3A7BDB;
  --path-type-color-zoomlevel: #000;
  --path-type-color-height: #000;
  --image-picker-popup-color: #ffffff;
  --grid-placement-hover: rgba(15, 22, 33, 0.6);
  --grid-placement-selected: #126EF8;
  --grid-placement-selected-secondary: rgba(18, 110, 248, 0.8);
  --grid-placement-unselected: rgba(15, 22, 33, 0.1);
  --tag-pill-bg-color: #ffffff;
  --tag-pill-included: #00C78F;
  --tag-pill-excluded: #EC610E;
  --help-bg-color: #D468A0;
  --bg-dashboard-item: #ffffff;
  --tooltip-bg: var(--hds-background-inverse);
  --tooltip-text: var(--hds-inverse-primary);
  --menu-bar-bg: rgba(255, 255, 255, 0.95);
  --menu-bar-bg-hover: rgba(0, 55, 141, 0.05);
  --menu-bar-item-description-color: #A4ACBA;
  --notification-info-bg: #15BDB9;
  --notification-warning-bg: #92600C;
  --notification-confirmation-bg: #0A7651;
  --notification-error-bg: #840B2E;
  --backgrounds-background-object: rgba(218, 239, 250, 0.12);
  --modifier-header-bg: var(--hds-aqua-onlight-400);
  --modifier-preset-border: #e7ebf1;
  --modifier-dot--default-state: var(--hds-accent);
  --modifier-dot--hover-state: var(--hds-aqua-onlight-500);
  --modifier-overlay-panel-preset-bg: #EDFBFA;
  --modifier-overlay-panel-create-apply-modifiers-bg: #F6FDFD;
  --modifier-overlay-panel-create-modifiers-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.08);
  --modifier-overlay-panel-create-apply-modifiers-active-bg: rgba(95, 178, 255, 0.2);
  --modifier-overlay-panel-drag-drop-box-bg: rgba(64, 71, 82, 0.5);
  --modifier-overlay-active-bg: #e3e6eb99;
  --modifier-overlay-active-header-bg: #dddfe466;
  --modifier-overlay-active-border: #CED4DF;
  --modifier-overlay-header-bg: #00378f08;
  --scheme-selector-bar-bg: #dae6fa;
  --scheme-selector-shadow: 0px 0px 2px 0px var(--Dropshadow-overlay-dropshadow-layer-A-overlay, rgba(0, 25, 75, 0.12)), 0px 6px 6px 0px var(--Dropshadow-overlay-dropshadow-layer-B-overlay, rgba(0, 25, 75, 0.06)), 0px 0px 21px 0px var(--Dropshadow-overlay-dropshadow-layer-C-overlay, rgba(0, 25, 75, 0.05)), 0px 13px 13px 0px var(--Dropshadow-overlay-dropshadow-layer-D-overlay, rgba(0, 25, 75, 0.08));
  --quick-tour-highlight: var(--hds-blue-ondark-400);
  --file-entity-bg-hover: var(--hds-blue-onlight-400-010);
  --file-entity-bg-selected: var(--hds-blue-onlight-400-020);
  --thumbnail-border-color: var(--hds-foreground-divider);
  display: flex;
  flex-direction: column-reverse;
  display: none;
  position: absolute;
  left: calc(100% * var(--full-progress) / var(--range));
  transform: translateX(-50%);
  z-index: 8;
}
.slider-tooltip-container .tooltip-content {
  max-width: unset;
}
.slider-tooltip-container-top {
  max-width: unset;
  --base-padding: 4px;
  --half-panel-margin: 1px;
  --panel-margin: 2px;
  --panel-body-border-radius: 4px;
  --panel-header-border-radius: 5px;
  --font-family: "Fira Regular";
  --font-family-subdued: "Fira Light";
  --font-family-emphasized: "Fira Medium";
  --text-size-dashboard-title: 18px;
  --text-size-dashboard-section-title: 16px;
  --text-size-dashboard-description: 16px;
  --text-size-big: 16px;
  --text-size-big-button: 14px;
  --text-size-big-input: 14px;
  --text-size-menu: 12px;
  --text-size-dialog: 14px;
  --text-size: 12px;
  --text-size-tiny: 10px;
  --text-size-super-tiny: 8px;
  --text-size-drag-and-drop-title: 20px;
  --text-size-dialog-big: 18px;
  --line-height-tiny: 12px;
  --line-height-menu: 16px;
  --line-height: 20px;
  --header-line-height: 24px;
  --line-height-dashboard-title: 26px;
  --line-height-dashboard-section-title: 24px;
  --line-height-dashboard-description: 24px;
  --line-height-drag-and-drop-title: 24px;
  --line-height-dialog-header: 16px;
  --line-height-dialog-content: 20px;
  --divider-thickness: 1px;
  --divider-spacing: 0px;
  --divider-padding: calc(4 * var(--base-padding));
  --popup-border-radius: 4px;
  --popup-border-radius-large: 8px;
  --popup-item-height-large: 40px;
  --popup-menu-width: 200px;
  --popup-footer-height: 64px;
  --popup-header-height: 64px;
  --popup-padding-h: 24px;
  --popup-padding-v: 20px;
  --white-popup-max-height: 280px;
  --popup-description-height: 200px;
  --popup-item-selection-height: 2px;
  --popup-image-width: 400px;
  --popup-image-height: 175px;
  --border-size: 1px;
  --border-size-highlighted: 2px;
  --border-radius: 4px;
  --button-icon-spacing: 8px;
  --input-height: 22px;
  --input-width: 93px;
  --number-input-width: var(--input-width);
  --file-input-width: var(--input-width);
  --dash-input-width: 125px;
  --input-prefix-width: 6px;
  --input-prefix-left-padding: 5px;
  --input-border-radius: 2px;
  --input-border-size: 1px;
  --input-padding: 4px;
  --input-icon-padding: 6px;
  --input-disabled-opacity: 0.5;
  --boolean-input-height: 16px;
  --sliding-toggle-height: 20px;
  --sliding-toggle-width: 40px;
  --input-animation-duration: 300ms;
  --input-animation-duration-quick: 100ms;
  --item-border-radius: 2px;
  --reduced-item-height: 28px;
  --main-item-height: 35px;
  --large-main-item-height: 48px;
  --icon-button-group-height: 28px;
  --icon-box-size: 16px;
  --icon-text-inline-size: var(--text-size);
  --icon-header-size: var(--header-line-height);
  --icon-big-size: 40px;
  --icon-padding-size: calc(2 * var(--base-padding));
  --tooltip-text-size: 13px;
  --tooltip-line-height: 18px;
  --tooltip-nibble-size: 6px;
  --tooltip-nibble-indentation: 18px;
  --tooltip-width: 200px;
  --tooltip-width-wide: 320px;
  --selected-item-selection-bar-width: 3px;
  --selected-group-item-selection-bar-width: 4px;
  --inactive-item-opacity: 0.4;
  --graph-width: 2px;
  --zoomlevel-line-width: 1px;
  --collapsible-margin: 12px;
  --scrollbar-width: 8px;
  --scrollbar-expanded-grabber-width: 6px;
  --scrollbar-grabber-width: 4px;
  --map-overlay-margin: 12px;
  --map-overlay-item-size: 40px;
  --menubar-size: 48px;
  --menubar-title-width: 300px;
  --menubar-select-menu-width: 150px;
  --menubar-icon-size: 32px;
  --menubar-lang-dropdown-height: 400px;
  --menubar-notification-dot-size: 8px;
  --menubar-scheme-selection-item-label-width: 200px;
  --search-field-height: 25px;
  --panel-small-width: 230px;
  --panel-width: 300px;
  --panel-large-width: 360px;
  --panel-tab-height: 25px;
  --panel-empty-content-top-offset: 200px;
  --panel-header-button-size: 20px;
  --slider-width: 4px;
  --slider-length: 82px;
  --slider-grabber-size: 14px;
  --slider-tick-length: 2px;
  --slider-tick-width: 1px;
  --slider-tick-offset: 1px;
  --navigation-bar-size: 40px;
  --drag-item-divider-height: 1px;
  --drag-item-divider-end-size: 5px;
  --notification-container-height: 32px;
  --notification-toast-height: 56px;
  --notification-animation-curve: cubic-bezier(0.7, 0, 0.5, 1.5);
  --notification-animation-duration: 200ms;
  --color-picker-height: 150px;
  --color-picker-crosshair-size: 15px;
  --color-picker-input-width: 70px;
  --color-picker-slider-track-height: 8px;
  --color-picker-slider-handle-size: 12px;
  --color-picker-container-width: 320px;
  --color-picker-eyedrop-size: 24px;
  --icon-picker-container-width: 254px;
  --icon-picker-container-height: 318px;
  --icon-picker-icon-size: 24px;
  --swatch-height: 22px;
  --swatch-width: 50px;
  --ga-blend-mode-btn-width: 52px;
  --basic-template-thumbnail-height: 40px;
  --basic-template-thumbnail-width: 56px;
  --basic-template-thumbnail-border: 2px;
  --basic-template-thumbnail-border-offset: 1px;
  --window-header-height: 73px;
  --extra-small-window-width: 468px;
  --extra-small-window-height: 212px;
  --small-window-width: 460px;
  --small-window-height: 280px;
  --medium-window-width: 380px;
  --medium-window-height: 320px;
  --big-window-width: 640px;
  --big-window-height: 520px;
  --wide-big-window-width: 720px;
  --wide-big-window-height: 520px;
  --wide-extra-big-window-width: 950px;
  --wide-extra-big-window-height: 520px;
  --fluid-window-height: calc(100vh - 200px);
  --fluid-window-width: calc(100vw - 512px);
  --search-bar-height: 50px;
  --icon-window-drag-area-height: 310px;
  --medium-area-height: 100px;
  --big-area-height: 180px;
  --extra-big-area-height: 320px;
  --icon-window-area-height: 393px;
  --drop-target-outline-size: 1px;
  --drop-target-outline-offset: 1px;
  --image-picker-crosshair-size: 8px;
  --image-picker-border-size: 2px;
  --icon-window-side-bar-width: 207px;
  --icon-window-icon-entity-width: 77px;
  --icon-window-icon-entity-height: 88px;
  --icon-window-icon-entity-background-size: 48px;
  --icon-window-icon-entity-background-size-small: 24px;
  --icon-window-change-view-header: 32px;
  --icon-window-change-item-text-width: 100px;
  --icon-window-change-item-indentation: 53px;
  --icon-window-resource-view-header: 64px;
  --icon-window-name-pill-container-width: 240px;
  --icon-window-name-pill-border-radius: 16px;
  --icon-window-item-border-width: 2px;
  --icon-window-notification-height: 32px;
  --medium-button-height: 24px;
  --button-height: 32px;
  --large-button-height: 40px;
  --dashboard-item-width: 340px;
  --dashboard-item-height: 160px;
  --dashboard-thumbnail-height: 176px;
  --dashboard-input-height: 32px;
  --component-highlight-thickness: 2px;
  --modifier-group-item-indentation: 24px;
  --region-specific-bar-width: 2px;
  --region-specific-bar-height: 16px;
  --modifier-affected-specific-margin: -20px;
  --modifier-affected-specific-tooltip-width: 296px;
  --tooltip-content-max-width: 225px;
  --modifier-overlay-panel-header-height: 38px;
  --drag-item-divider: #126EF8;
  --drag-item-highlight: rgba(15, 22, 33, 0.1);
  --font-color-highlighted: #126EF8;
  --font-color-highlighted-emphasized: #d0e2fe;
  --font-color-emphasized: #0E1520;
  --font-color-active: #1C232E;
  --font-color: #272F3A;
  --font-color-subdued: #535C6B;
  --font-color-hint: var(--hds-gray-600);
  --font-color-disabled: #8890A0;
  --main-button-font-color: #272F3A;
  --main-button-font-color-emphasized: #0f1621;
  --font-color-menu: #535C6B;
  --font-color-tooltip: #1C232E;
  --font-color-group-item: #1C232E;
  --font-color-dialog: rgba(16, 23, 35, 0.95);
  --font-color-oncolor: #ffffff;
  --font-color-oncolor-hover: #ffffff;
  --font-color-oncolor-subdued: rgba(225, 234, 254, 0.58);
  --font-color-panel-notification: #E9ECF2;
  --font-color-inactive-item-text: #333B47;
  --font-color-item-text-hover: #0f1621;
  --font-color-hds-tertiary: rgba(34, 54, 89, 0.41);
  --font-color-hds-tertiary-hover: rgba(19, 35, 67, 0.5);
  --font-color-hds-tertiary-disabled: rgba(0, 26, 77, 0.2);
  --font-color-body: #3F4855;
  --font-color-primary: rgba(16, 23, 35, 0.95);
  --font-color-primary-disabled: rgba(0, 26, 77, 0.2);
  --font-color-secondary: rgba(7, 23, 49, 0.6);
  --font-color-secondary-disabled: rgba(0, 26, 77, 0.2);
  --header-icon-color: #535C6B;
  --active-icon-color: #1C232E;
  --active-icon-color-inverted: #ffffff;
  --inactive-icon-color: #6A7483;
  --disabled-item-group-text-color: #6A7483;
  --hint-icon-color: #6A7483;
  --disabled-icon-color: #8890A0;
  --action-icon-color: #535C6B;
  --disabled-action-icon-color: #8890A0;
  --error-icon-color: #CF001A;
  --warning-icon-color: #9E6400;
  --warning-icon-color-hover: #FAAA1E;
  --inactive-icon-border-color: #A4ACBA;
  --slider-input-border-color: #A4ACBA;
  --panel-header-button-bg: #f3f3f4;
  --panel-tab-bg-unselected: rgba(255, 255, 255, 0.8);
  --divider-color: rgba(255, 255, 255, 0.2);
  --divider-color-ondark: rgba(15, 22, 33, 0.2);
  --sub-item-box-border-color: #E9ECF2;
  --sub-item-box-bg-color: #CCD1DB;
  --bg-color-ui: #f3f3f4;
  --bg-color-panel-base: #ffffff;
  --bg-color-panel-content: #e7e8e9;
  --bg-color-modifier-panel-content: #ffffff;
  --bg-color-panel-section: #ffffff;
  --bg-color-content: rgba(255, 255, 255, 0.4);
  --bg-color-panel-dark: #ffffff;
  --bg-color-panel-header-dark: #ffffff;
  --bg-color-panel-group-item-selected: #ffffff;
  --border-color-panel-item: #ffffff;
  --bg-color-item: rgba(255, 255, 255, 0.9);
  --bg-color-item-selected: rgba(255, 255, 255, 0.95);
  --bg-color-item-highlighted: rgba(255, 255, 255, 0.6);
  --bg-color-item-header: #cfd0d3;
  --bg-color-button-group: #f3f3f4;
  --blur-popup-color: rgba(8, 23, 52, 0.6);
  --bg-color-popup: #ffffff;
  --bg-color-popup-item-hover: #ffffff;
  --bg-color-popup-divider: rgba(15, 55, 115, 0.1);
  --bg-window: #ffffff;
  --bg-hds-secondary: #ffffff;
  --bg-window-content: rgba(255, 255, 255, 0.4);
  --bg-window-header: #e7e8e9;
  --bg-global-adjustments: rgba(255, 255, 255, 0.9);
  --bg-color-inline-box: rgba(255, 255, 255, 0.4);
  --border-color: rgba(15, 22, 33, 0.1);
  --border-color-highlighted: #1C232E;
  --bg-selected-item: var(--hds-blue-onlight-400-020);
  --main-button-color: #126EF8;
  --main-button-color-hover: #0D5ED9;
  --action-text-button: #126EF8;
  --action-text-button-hover: #0D5ED9;
  --normal-button-bg-color: rgba(255, 255, 255, 0.8);
  --normal-button-bg-color-hover: rgba(255, 255, 255, 0.95);
  --button-primary-bg: linear-gradient(270deg, #65EBE2 0%, #6B9CFF 100%);
  --button-primary-bg-hover: linear-gradient(90deg, #3675F5 0%, #1BE0D7 100%);
  --button-primary-bg-active: linear-gradient(90deg, #1854CC 0%, #08CCC3 100%);
  --button-primary-bg-disabled: linear-gradient(270deg, rgba(125, 230, 225, 0.4) 0%, rgba(128, 170, 255, 0.4) 100%);
  --button-primary-color: rgba(16, 25, 37, 0.9);
  --button-primary-color-disabled: rgba(18, 41, 84, 0.3);
  --button-secondary-bg: rgba(0, 55, 141, 0.05);
  --button-secondary-bg-hover: rgba(15, 55, 115, 0.1);
  --button-secondary-bg-active: rgba(30, 43, 70, 0.6);
  --button-secondary-bg-disabled: rgba(0, 55, 141, 0.05);
  --button-secondary-color: rgba(16, 23, 35, 0.95);
  --button-secondary-color-disabled: rgba(18, 41, 84, 0.3);
  --button-danger-bg: #CF001A;
  --button-danger-bg-hover: #A5002F;
  --button-danger-bg-active: #8F0029;
  --button-danger-bg-disabled: rgba(207, 0, 26, 0.3);
  --button-danger-color: #ffffff;
  --button-warn-bg: #FFBD09;
  --button-warn-bg-hover: #FAAA1E;
  --button-warn-bg-active: #9E6400;
  --button-warn-bg-disabled: rgba(255, 190, 10, 0.3);
  --button-warn-color: rgba(15, 24, 36, 0.9);
  --button-warn-color-active: #FFFFFF;
  --button-oncolor-primary-bg: #ffffff;
  --button-oncolor-primary-color: rgba(16, 23, 35, 0.95);
  --button-oncolor-primary-bg-disabled: #ffffff;
  --button-oncolor-primary-color-disabled: rgba(18, 41, 84, 0.3);
  --button-oncolor-primary-bg-hover: #F2F5F9;
  --button-oncolor-primary-bg-active: #DADFE7;
  --button-oncolor-secondary-bg: rgba(34, 54, 89, 0.41);
  --button-oncolor-secondary-color: #ffffff;
  --button-oncolor-secondary-bg-disabled: rgba(34, 54, 89, 0.41);
  --button-oncolor-secondary-color-disabled: rgba(225, 234, 254, 0.58);
  --button-oncolor-secondary-bg-hover: rgba(19, 35, 67, 0.5);
  --button-oncolor-secondary-bg-active: rgba(7, 23, 49, 0.6);
  --background-object: rgba(0, 55, 141, 0.05);
  --background-object-hover: rgba(15, 55, 115, 0.1);
  --button-apply-modifiers-bg: rgba(255, 255, 255, 0.8);
  --button-apply-modifiers-bg-hover: rgba(255, 255, 255, 0.7);
  --button-apply-modifiers-bg-disabled: rgba(255, 255, 255, 0.9);
  --button-apply-modifiers-border: #4791FF;
  --button-apply-modifiers-border-hover: #5FB2FF;
  --button-apply-modifiers-border-disabled: rgba(18, 110, 248, 0.4);
  --colorblind-popup-divider: rgba(15, 54, 113, 0.1);
  --colorblind-popup-header-bg-color: #ffffff;
  --colorblind-popup-body-bg-color: #F2F5F9;
  --colorblind-popup-body-font-color: #535C6B;
  --colorblind-popup-button-color: rgba(15, 54, 113, 0.1);
  --input-border-color-focussed: #126EF8;
  --input-border-color-active: #0f1621;
  --input-border-color-hover: rgba(15, 22, 33, 0.3);
  --input-border-color-inactive: #6A7483;
  --input-border-color-error: #D35566;
  --input-bg-color-active: #ffffff;
  --input-bg-color-inactive: rgba(255, 255, 255, 0.3);
  --input-bg-color-inactive-lighter: rgba(255, 255, 255, 0.5);
  --hds-input-bg-color: #ffffff;
  --hds-input-border: rgba(34, 54, 89, 0.41);
  --hds-input-border-color-focussed: #0BC7C2;
  --hds-input-border-color-hover: rgba(19, 35, 67, 0.5);
  --hds-input-caret-color: rgba(16, 23, 35, 0.95);
  --hds-input-placeholder-color: rgba(34, 54, 89, 0.41);
  --hds-input-color: rgba(16, 23, 35, 0.95);
  --input-inner-shadow-color: rgba(0, 0, 0, 0.1);
  --input-caret-color: #126EF8;
  --input-slider-bg-color: rgba(15, 22, 33, 0.1);
  --input-slider-color: #126EF8;
  --color-picker-slider-grabber-color: #ffffff;
  --color-picker-bg-color: #3F4855;
  --color-picker-input-border-color: #8890A0;
  --color-picker-input-bg-color: #1C232E;
  --color-picker-input-color: #E9ECF2;
  --dropdown-bg-color-opened: #e7e8e9;
  --dropdown-item-color: #ffffff;
  --dropdown-item-color-selected: #e7e8e9;
  --dropdown-item-color-hover: #ffffff;
  --shadow-color: rgba(15, 22, 33, 0.4);
  --drop-shadow-gradient: linear-gradient(to bottom, rgba(233, 236, 242, 0.6) 0%, transparent 100%);
  --selected-item-marker-color: #126EF8;
  --selection-color: #126EF8;
  --selection-gradient: rgba(18, 110, 248, 0.1);
  --region-specific-color: var(--hds-purple-onlight-400);
  --region-specific-color-hover: var(--hds-purple-onlight-200);
  --region-specific-color-bg-hover: rgba(140, 107, 174, 0.8);
  --region-specific-color-bg-pressed: rgba(140, 107, 174, 0.9);
  --region-specific-icon-color: rgba(247, 250, 253, 0.2);
  --region-specific-bg-color: rgba(179, 156, 201, 0.3);
  --jp-region-specific-bg-color: #49475d;
  --notification-color: #D35566;
  --notification-error-color: #CF001A;
  --notification-warning-color: #FFBD09;
  --notification-overlay-bg-color: #3F4855;
  --notification-overlay-bg-hover-color: #535C6B;
  --notification-overlay2-bg-color: #1C232E;
  --component-highlight-color: #6A7483;
  --component-highlight-color-subdued: #A4ACBA;
  --graph-color: var(--hds-background-inverse);
  --graph-stop: var(--hds-background-inverse);
  --graph-bg: var(--hds-background-primary);
  --graph-border: var(--hds-foreground-tertiary-hover);
  --graph-border-hover: var(--hds-foreground-tertiary-press);
  --dash-color: #0f1621;
  --scrollbar-color: rgba(15, 22, 33, 0.2);
  --scrollbar-color-active: rgba(15, 22, 33, 0.2);
  --scrollbar-color-hover: rgba(15, 22, 33, 0.4);
  --slider-grabber-outline-color: rgba(218, 239, 250, 0.12);
  --slider-tick-color: rgba(15, 22, 33, 0.4);
  --chart-item-color-selected: #126EF8;
  --chart-item-color: rgba(15, 22, 33, 0.2);
  --chart-selection-bg: rgba(15, 22, 33, 0.05);
  --color-swatch-border: #272F3A;
  --inactive-color-swatch: #6A7483;
  --hover-inactive-color-swatch: #A4ACBA;
  --map-picker-color-border: rgba(15, 22, 33, 0.1);
  --map-picker-no-color-bg: rgba(255, 255, 255, 0.6);
  --code-string-color: #126EF8;
  --drop-target-color: #126EF8;
  --path-type-color-text: #000;
  --path-type-color-scheme: #000;
  --path-type-color-layer: rgba(255, 255, 255, 0.1);
  --path-type-color-condition: rgba(255, 255, 255, 0.2);
  --path-type-color-styleset: #2E468F;
  --path-type-color-style: #2C48A1;
  --path-type-color-attribute: rgba(15, 22, 33, 0.4);
  --path-type-color-definition: #52A3DB;
  --path-type-color-subcondition: #3A7BDB;
  --path-type-color-zoomlevel: #000;
  --path-type-color-height: #000;
  --image-picker-popup-color: #ffffff;
  --grid-placement-hover: rgba(15, 22, 33, 0.6);
  --grid-placement-selected: #126EF8;
  --grid-placement-selected-secondary: rgba(18, 110, 248, 0.8);
  --grid-placement-unselected: rgba(15, 22, 33, 0.1);
  --tag-pill-bg-color: #ffffff;
  --tag-pill-included: #00C78F;
  --tag-pill-excluded: #EC610E;
  --help-bg-color: #D468A0;
  --bg-dashboard-item: #ffffff;
  --tooltip-bg: var(--hds-background-inverse);
  --tooltip-text: var(--hds-inverse-primary);
  --menu-bar-bg: rgba(255, 255, 255, 0.95);
  --menu-bar-bg-hover: rgba(0, 55, 141, 0.05);
  --menu-bar-item-description-color: #A4ACBA;
  --notification-info-bg: #15BDB9;
  --notification-warning-bg: #92600C;
  --notification-confirmation-bg: #0A7651;
  --notification-error-bg: #840B2E;
  --backgrounds-background-object: rgba(218, 239, 250, 0.12);
  --modifier-header-bg: var(--hds-aqua-onlight-400);
  --modifier-preset-border: #e7ebf1;
  --modifier-dot--default-state: var(--hds-accent);
  --modifier-dot--hover-state: var(--hds-aqua-onlight-500);
  --modifier-overlay-panel-preset-bg: #EDFBFA;
  --modifier-overlay-panel-create-apply-modifiers-bg: #F6FDFD;
  --modifier-overlay-panel-create-modifiers-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.08);
  --modifier-overlay-panel-create-apply-modifiers-active-bg: rgba(95, 178, 255, 0.2);
  --modifier-overlay-panel-drag-drop-box-bg: rgba(64, 71, 82, 0.5);
  --modifier-overlay-active-bg: #e3e6eb99;
  --modifier-overlay-active-header-bg: #dddfe466;
  --modifier-overlay-active-border: #CED4DF;
  --modifier-overlay-header-bg: #00378f08;
  --scheme-selector-bar-bg: #dae6fa;
  --scheme-selector-shadow: 0px 0px 2px 0px var(--Dropshadow-overlay-dropshadow-layer-A-overlay, rgba(0, 25, 75, 0.12)), 0px 6px 6px 0px var(--Dropshadow-overlay-dropshadow-layer-B-overlay, rgba(0, 25, 75, 0.06)), 0px 0px 21px 0px var(--Dropshadow-overlay-dropshadow-layer-C-overlay, rgba(0, 25, 75, 0.05)), 0px 13px 13px 0px var(--Dropshadow-overlay-dropshadow-layer-D-overlay, rgba(0, 25, 75, 0.08));
  --quick-tour-highlight: var(--hds-blue-ondark-400);
  --file-entity-bg-hover: var(--hds-blue-onlight-400-010);
  --file-entity-bg-selected: var(--hds-blue-onlight-400-020);
  --thumbnail-border-color: var(--hds-foreground-divider);
  flex-direction: column-reverse;
  display: none;
  position: absolute;
  left: calc(100% * var(--full-progress) / var(--range));
  transform: translateX(-50%);
  z-index: 8;
  display: flex;
  flex-direction: column;
  bottom: var(--slider-grabber-size);
}
.slider-tooltip-container-top .tooltip-content {
  max-width: unset;
}
.slider-container-v:hover .slider-tooltip-container,
.slider-container-h:hover .slider-tooltip-container,
.slider-container-v:hover .slider-tooltip-container-top,
.slider-container-h:hover .slider-tooltip-container-top {
  display: flex;
}
.slider-tooltip-value {
  font-family: var(--font-family);
  font-size: var(--text-size);
  font-style: normal;
  font-weight: 400;
  line-height: var(--line-height-menu);
  letter-spacing: -0.024px;
  color: var(--font-color-subdued);
  background-color: var(--tooltip-bg);
  padding: var(--hds-spacing-2) var(--hds-spacing-4);
  color: var(--tooltip-text);
  --icon-color: var(--tooltip-text);
  border-radius: var(--border-radius);
  z-index: 1;
  position: relative;
  max-width: calc(calc(2 * var(--base-padding)) * 32);
  min-width: calc(2 * var(--base-padding));
  text-wrap: pretty;
  white-space: nowrap;
}
.slider-value-display-top {
  width: 100%;
  display: flex;
  margin-bottom: calc(2 * var(--base-padding));
}
.slider-value-display-bottom {
  width: 100%;
  display: flex;
  margin-top: calc(2 * var(--base-padding));
}
.slider-value-text {
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height);
  color: var(--font-color-hint);
  text-transform: uppercase;
  display: inline-block;
  position: relative;
  left: calc(100% * var(--full-progress) / var(--range));
  transform: translateX(-50%);
}
.scrollarea-vertical-container {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  width: 100%;
  max-height: 100%;
}
.popover-popover .scrollarea-vertical-container {
  max-height: inherit;
}
.scrollarea-vertical-container-clip {
  overflow: hidden;
}
.scrollarea-vertical-outside-bar {
  width: calc(100% + var(--scrollbar-width));
  margin-right: calc(-1 * var(--scrollbar-width));
}
.scrollarea-horizontal-container-expand {
  flex-grow: 1;
  display: flex;
  flex-direction: row;
  min-height: 1px;
}
.scrollarea-horizontal-container {
  flex-grow: 1;
  display: flex;
  flex-direction: row;
  min-height: 1px;
  max-height: inherit;
}
.scrollarea-view-expand {
  flex-grow: 1;
}
.scrollarea-view {
  flex-grow: 1;
  width: calc(100% - var(--scrollbar-width));
}
.scrollarea-view-clip {
  overflow: hidden;
  position: relative;
}
.scrollarea-content {
  padding: 0px;
  display: flex;
  flex-direction: column;
}
.scrollbar-track-hidden {
  display: none;
}
.scrollbar-track-horizontal {
  width: 100%;
  height: var(--scrollbar-width);
}
.scrollbar-track-vertical {
  width: var(--scrollbar-width);
}
.scrollbar-grabber-horizontal {
  --grabber-width: var(--scrollbar-grabber-width);
  cursor: pointer;
  height: var(--grabber-width);
  background-color: var(--scrollbar-color);
  border-radius: calc(var(--grabber-width) / 2);
  margin-top: calc((var(--scrollbar-width) - var(--grabber-width)) / 2);
  transition-property: height, border-radius, margin-left, background-color;
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
}
.scrollbar-grabber-vertical {
  --grabber-width: var(--scrollbar-grabber-width);
  cursor: pointer;
  width: var(--grabber-width);
  background-color: var(--scrollbar-color);
  border-radius: calc(var(--grabber-width) / 2);
  margin-left: calc((var(--scrollbar-width) - var(--grabber-width)) / 2);
  transition-property: width, border-radius, margin-left, background-color;
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
}
.scrollbar-grabber-hidden {
  display: none;
}
.scrollarea-vertical-container:hover .scrollbar-grabber-horizontal,
.scrollarea-vertical-container:hover .scrollbar-grabber-vertical {
  background-color: var(--scrollbar-color-active);
  transition: background-color 0.2s;
}
.scrollbar-track-vertical:hover .scrollbar-grabber-vertical,
.scrollbar-track-horizontal:hover .scrollbar-grabber-horizontal {
  --grabber-width: var(--scrollbar-expanded-grabber-width);
  background-color: var(--scrollbar-color-hover);
  transition: background-color 0.2s;
}
.scrollarea-horizontal-bar-container {
  display: flex;
  flex-direction: row;
  flex-shrink: 0;
}
.scrollarea-corner-square {
  width: var(--scrollbar-width);
  height: var(--scrollbar-width);
}
.scrollarea-autoscroll-scroll-bar-container {
  --grabber-width: var(--scrollbar-grabber-width);
  background-color: var(--scrollbar-color-hover);
  overflow: hidden;
  overflow-y: scroll;
  height: 100%;
  transition: background-color 0.2s;
  -webkit-background-clip: text;
  margin-right: calc(var(--scrollbar-grabber-width) / 2);
  cursor: pointer;
}
.scrollarea-autoscroll-scroll-bar-container::-webkit-scrollbar {
  width: var(--grabber-width);
  cursor: pointer;
  background-color: transparent;
}
.scrollarea-autoscroll-scroll-bar-container::-webkit-scrollbar-track {
  background-color: var(--bg-color-content);
}
.scrollarea-autoscroll-scroll-bar-container::-webkit-scrollbar-thumb {
  background-color: inherit;
  cursor: pointer;
  border-radius: calc(var(--grabber-width) / 2);
}
.scrollarea-autoscroll-scroll-bar-container-autohide {
  --grabber-width: var(--scrollbar-grabber-width);
  background-color: var(--scrollbar-color-hover);
  overflow: hidden;
  overflow-y: scroll;
  height: 100%;
  transition: background-color 0.2s;
  -webkit-background-clip: text;
  margin-right: calc(var(--scrollbar-grabber-width) / 2);
  cursor: pointer;
  background-color: var(--scrollbar-color);
}
.scrollarea-autoscroll-scroll-bar-container-autohide::-webkit-scrollbar {
  width: var(--grabber-width);
  cursor: pointer;
  background-color: transparent;
}
.scrollarea-autoscroll-scroll-bar-container-autohide::-webkit-scrollbar-track {
  background-color: var(--bg-color-content);
}
.scrollarea-autoscroll-scroll-bar-container-autohide::-webkit-scrollbar-thumb {
  background-color: inherit;
  cursor: pointer;
  border-radius: calc(var(--grabber-width) / 2);
}
.scrollarea-autoscroll-scroll-bar-container-autohide:hover {
  background-color: var(--scrollbar-color-hover);
}
.scrollarea-autoscroll-content {
  box-sizing: border-box;
  --right-shift: calc(var(--scrollbar-grabber-width) / 2);
  background-color: var(--bg-color-panel-content);
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  margin-right: calc(0px - var(--scrollbar-grabber-width) - var(--right-shift));
}
.scrollarea-bottom-padding {
  width: 100%;
  height: calc(5 * var(--line-height));
}
.list-window-container {
  width: 100%;
  height: calc(var(--list-window-height) - var(--list-window-offset));
  margin-top: var(--list-window-offset);
  display: flex;
  flex-direction: column;
}
.scrollarea2 {
  display: flex;
  flex-direction: row;
  height: 1px;
  flex-grow: 1;
}
.scrollarea2-content {
  flex-grow: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -ms-overflow-style: none;
  /* Internet Explorer 10+ */
  scrollbar-width: none;
  /* Firefox, Safari 18.2+, Chromium 121+ */
}
.divider-vertical {
  background-color: var(--divider-color-override, var(--hds-foreground-divider));
  width: var(--divider-thickness);
  height: calc(100% - 2 * var(--divider-actual-padding));
  margin: var(--divider-actual-padding) var(--divider-spacing);
  flex-grow: 0;
  flex-shrink: 0;
}
.divider-horizontal {
  background-color: var(--divider-color-override, var(--hds-foreground-divider));
  height: var(--divider-thickness);
  width: calc(100% - 2 * var(--divider-actual-padding));
  margin: var(--divider-spacing) var(--divider-actual-padding);
  flex-grow: 0;
  flex-shrink: 0;
}
.divider-no-padding {
  --divider-actual-padding: var(--hds-spacing-0);
}
.divider-quarter-padding {
  --divider-actual-padding: var(--hds-spacing-1);
}
.divider-half-padding {
  --divider-actual-padding: var(--hds-spacing-2);
}
.divider-full-padding {
  --divider-actual-padding: var(--hds-spacing-4);
}
.divider-medium-spaced {
  --divider-spacing: var(--hds-spacing-3);
}
.divider-spaced {
  --divider-spacing: var(--hds-spacing-2);
}
.divider-half-spaced {
  --divider-spacing: var(--hds-spacing-1);
}
.titled-divider-container {
  box-sizing: border-box;
  width: calc(100% - 2 * var(--divider-actual-padding));
  display: flex;
  align-items: center;
  margin: var(--divider-spacing) var(--divider-actual-padding);
  flex-grow: 0;
  flex-shrink: 0;
}
.titled-divider {
  background-color: var(--divider-color-override, var(--hds-foreground-divider));
  flex-grow: 1;
  flex-shrink: 0;
  height: var(--divider-thickness);
}
.divider-label {
  font-family: var(--font-family-emphasized);
  font-size: var(--text-size-super-tiny);
  line-height: var(--line-height-tiny);
  color: var(--font-color-hint);
  flex-shrink: 0;
  margin: 0 var(--hds-spacing-1);
}
.divider-autohide:first-child,
.divider-autohide:last-child {
  display: none;
}
.popover-expanding {
  display: flex;
  flex-grow: 1;
}
.popover-theme {
  max-height: inherit;
  max-width: inherit;
}
.popover-popover {
  position: fixed;
  z-index: 9;
}
.popover-popover-modal {
  position: fixed;
  z-index: 9;
  z-index: 14;
}
.popover-delayed-popover {
  position: fixed;
  z-index: 9;
  visibility: hidden;
  animation: 0.2s 1s forwards delayed_popup;
}
.popover-delayed-popover-modal {
  position: fixed;
  z-index: 9;
  visibility: hidden;
  animation: 0.2s 1s forwards delayed_popup;
  z-index: 14;
}
.popover-top.popover-start,
.popover-top.popover-center {
  left: var(--x);
  bottom: var(--y);
}
.popover-top.popover-end {
  right: var(--x);
  bottom: var(--y);
}
.popover-right.popover-start,
.popover-right.popover-center {
  left: var(--x);
  top: var(--y);
}
.popover-right.popover-end {
  left: var(--x);
  bottom: var(--y);
}
.popover-bottom.popover-start,
.popover-bottom.popover-center {
  left: var(--x);
  top: var(--y);
}
.popover-bottom.popover-end {
  right: var(--x);
  top: var(--y);
}
.popover-left.popover-start,
.popover-left.popover-center {
  right: calc(100vw - var(--x));
  top: var(--y);
}
.popover-left.popover-end {
  right: calc(100vw - var(--x));
  bottom: var(--y);
}
@keyframes delayed_popup {
  from {
    visibility: hidden;
  }
  to {
    visibility: visible;
  }
}
.popover-elevated {
  z-index: 1001;
}
.combo-input-container {
  background-color: transparent;
  border-radius: var(--input-border-radius);
  border: var(--input-border-size) solid var(--input-border-color-active);
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-tiny);
  color: var(--font-color-active);
  caret-color: var(--input-caret-color);
  height: var(--input-height);
  box-sizing: border-box;
  align-items: center;
  display: flex;
  flex-direction: column;
  position: relative;
  flex-grow: 1;
}
.combo-input-container input[type="number"],
.combo-input-container input[type="text"] {
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-tiny);
  color: var(--font-color-active);
  caret-color: var(--input-caret-color);
}
.combo-input-container:hover {
  border-color: var(--input-border-color-hover);
}
.combo-input-container:focus-within {
  border: var(--input-border-size) solid var(--input-border-color-focussed);
  background-color: transparent;
  color: var(--font-color-emphasized);
}
.combo-input-container input[type="number"]:focus,
.combo-input-container input[type="text"]:focus {
  border: none;
}
.combo-input-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-right: var(--base-padding);
}
.combo-input-options {
  box-shadow: 0 1px 4px 0 var(--shadow-color);
  --divider-color-override: var(--bg-color-popup-divider);
  background-color: var(--popup-color, var(--bg-color-popup));
  border: var(--border-size) solid var(--border-color);
  border-radius: var(--popup-border-radius);
  z-index: 9;
  position: absolute;
  top: 100%;
  left: calc(-1 * var(--border-size));
  width: 100%;
  display: flex;
  flex-direction: column;
  border: var(--border-size) solid transparent;
  background-color: var(--dropdown-bg-color-opened);
}
.combo-input-options:empty {
  display: none;
}
.combo-input-option {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  white-space: nowrap;
  background-color: var(--dropdown-item-color);
  margin-top: 1px;
  border-radius: var(--item-border-radius);
  padding: 0px var(--base-padding);
}
.combo-input-option-selected {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  white-space: nowrap;
  background-color: var(--dropdown-item-color);
  margin-top: 1px;
  border-radius: var(--item-border-radius);
  padding: 0px var(--base-padding);
  background-color: var(--dropdown-item-color-selected);
}
.combo-input-option-text {
  flex-grow: 1;
}
.menu-bar {
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  background-color: var(--bg-color-panel-content);
}
.menu-bar-disabled {
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  background-color: var(--bg-color-panel-content);
  pointer-events: none;
}
.menu-bar-logo-link {
  display: flex;
  height: var(--menubar-size);
  align-items: center;
}
.menu-bar-icon {
  width: var(--menubar-icon-size);
  height: var(--menubar-icon-size);
  box-sizing: border-box;
  flex-shrink: 0;
  margin: 0 calc((var(--menubar-size) - var(--menubar-icon-size)) / 2);
}
.menu-bar-button {
  cursor: pointer;
  user-select: none;
  font-family: var(--font-family);
  font-size: var(--text-size-menu);
  line-height: var(--line-height);
  color: var(--font-color-secondary);
  --icon-color: var(--font-color-secondary);
  padding: 0 calc(3 * var(--base-padding));
  height: var(--menubar-size);
  line-height: var(--menubar-size);
}
.menu-bar-tab-container {
  display: flex;
  align-items: center;
}
.menu-bar-left-container {
  display: flex;
  align-items: center;
}
.menu-bar-right-container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 0 calc(3 * var(--base-padding));
}
.menu-bar-button:hover {
  color: var(--font-color-emphasized);
  --icon-color: var(--font-color-emphasized);
}
.popover-container-opened .menu-bar-button {
  font-family: var(--font-family);
  font-size: var(--text-size-menu);
  line-height: var(--line-height);
  color: var(--font-color-primary);
  --icon-color: var(--font-color-secondary);
  font-family: var(--font-family-emphasized);
  line-height: var(--menubar-size);
}
.menu-popup {
  box-shadow: 0 1px 4px 0 var(--shadow-color);
  --divider-color-override: var(--bg-color-popup-divider);
  background-color: var(--popup-color, var(--bg-color-popup));
  border: var(--border-size) solid var(--border-color);
  border-radius: var(--popup-border-radius);
  z-index: 9;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
}
.menu-submenu {
  box-shadow: 0 1px 4px 0 var(--shadow-color);
  --divider-color-override: var(--bg-color-popup-divider);
  background-color: var(--popup-color, var(--bg-color-popup));
  border: var(--border-size) solid var(--border-color);
  border-radius: var(--popup-border-radius);
  z-index: 9;
}
.menu-item-icon {
  font-size: var(--icon-text-inline-size);
  width: var(--icon-box-size);
  height: var(--icon-box-size);
  line-height: var(--icon-box-size);
  text-align: center;
  line-height: var(--line-height);
}
.menu-item-name {
  flex-grow: 1;
  white-space: nowrap;
  margin: 0px calc(2 * var(--base-padding));
}
.menu-item.menu-item-with-description {
  padding: calc(3 * var(--base-padding));
  align-items: flex-start;
}
.menu-item-description {
  white-space: initial;
}
.menu-item-name:first-child {
  margin-left: 0px;
}
.menu-item-name:last-child {
  margin-right: 0px;
}
.menu-item-hint {
  font-family: var(--font-family);
  font-size: var(--text-size-tiny);
  line-height: var(--line-height-menu);
  color: var(--font-color);
}
.menu-item-disabled .menu-item-hint {
  color: var(--font-color-disabled);
  --icon-color: var(--font-color-disabled);
}
.menu-select-menu {
  cursor: pointer;
  user-select: none;
  line-height: var(--header-line-height);
  border-radius: var(--item-border-radius);
  background-color: transparent;
  border-radius: var(--input-border-radius);
  border: var(--input-border-size) solid var(--input-border-color-active);
  color: var(--font-color-active);
  caret-color: var(--input-caret-color);
  align-items: center;
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-tiny);
  color: var(--font-color-hint);
  --icon-color: var(--font-color-hint);
  --icon-color: var(--hint-icon-color);
  padding: 0 0 0 var(--base-padding);
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  height: var(--input-height);
  line-height: var(--input-height);
  --combobox-width: var(--menubar-select-menu-width);
}
.menu-select-menu input[type="number"],
.menu-select-menu input[type="text"] {
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-tiny);
  color: var(--font-color-active);
  caret-color: var(--input-caret-color);
}
.menu-select-menu:hover {
  border-color: var(--input-border-color-hover);
}
.menu-select-menu:focus-within {
  border: var(--input-border-size) solid var(--input-border-color-focussed);
  background-color: transparent;
  color: var(--font-color-emphasized);
}
.menu-select-menu input[type="number"]:focus,
.menu-select-menu input[type="text"]:focus {
  border: none;
}
.menu-select-menu > *:not(:first-child) {
  margin-left: var(--base-padding);
}
.menu-select-menu:hover {
  border-color: var(--input-border-color-hover);
}
.popover-container-opened .menu-select-menu,
.popover-container-opened .menu-select-menu:hover {
  border: var(--input-border-size) solid var(--input-border-color-active);
  background-color: transparent;
  color: var(--font-color-active);
}
.menu-select-menu.select-combo-box-disabled {
  opacity: var(--inactive-item-opacity);
  pointer-events: none;
}
.menu-select-menu.select-combo-box-active {
  border: var(--input-border-size) solid var(--input-border-color-active);
  background-color: transparent;
  color: var(--font-color-active);
}
.menu-select-menu-label {
  flex-grow: 1;
}
.menu-select-menu-popup {
  overflow-y: auto;
  max-height: inherit;
  width: var(--menubar-select-menu-width);
  margin-right: calc(2 * var(--base-padding));
  background-color: var(--bg-color-popup);
}
.menu-select-menu-popup::-webkit-scrollbar {
  width: var(--scrollbar-expanded-grabber-width);
}
.menu-select-menu-popup::-webkit-scrollbar-track {
  background-color: inherit;
  border-radius: inherit;
}
.menu-select-menu-popup::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-color-hover);
  border-radius: calc(var(--scrollbar-expanded-grabber-width) / 2);
}
.menu-bar-filter {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  white-space: nowrap;
  height: var(--header-line-height);
  padding: 0 calc(2 * var(--base-padding));
  font-family: var(--font-family);
  font-size: var(--text-size-menu);
  line-height: var(--line-height);
  color: var(--font-color-secondary);
  --icon-color: var(--font-color-secondary);
  padding: 0 calc(4 * var(--base-padding));
  height: var(--popup-item-height-large);
}
.menu-bar-filter:hover {
  background-color: var(--bg-color-popup-item-hover);
  font-family: var(--font-family);
  font-size: var(--text-size-menu);
  line-height: var(--line-height);
  color: var(--font-color-primary);
  --icon-color: var(--font-color-secondary);
}
.menu-bar-filtered-children-container {
  height: var(--menubar-lang-dropdown-height);
}
.menu-bar-divider {
  margin: 0 calc(3 * var(--base-padding));
  --divider-color-override: var(--bg-color-popup-divider);
  height: 100%;
}
.menu-bar-icon-button {
  cursor: pointer;
  user-select: none;
  margin: 0 calc(3 * var(--base-padding));
  --icon-color: var(--header-icon-color);
  position: relative;
}
.menu-bar-icon-button:hover {
  --icon-color: var(--font-color-emphasized);
}
.menu-bar-icon-notification {
  --shadow-size: calc(var(--size) / 6);
  width: var(--size);
  height: var(--size);
  overflow: hidden;
  border-radius: calc(var(--size) / 2);
  flex-shrink: 0;
  position: absolute;
  top: 0;
  right: 0;
  --size: var(--menubar-notification-dot-size);
}
.menu-bar-icon-notification-color {
  border-width: 1px;
  border-style: solid;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: var(--notification-color);
  border-color: transparent;
}
.scheme-selector-menu {
  cursor: pointer;
  user-select: none;
  line-height: var(--header-line-height);
  border-radius: var(--item-border-radius);
  background-color: transparent;
  border-radius: var(--input-border-radius);
  border: var(--input-border-size) solid var(--input-border-color-active);
  color: var(--font-color-active);
  caret-color: var(--input-caret-color);
  align-items: center;
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-tiny);
  color: var(--font-color-hint);
  --icon-color: var(--font-color-hint);
  --icon-color: var(--hint-icon-color);
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  height: var(--input-height);
  line-height: var(--input-height);
  padding: 0 0 0 var(--base-padding);
  --combobox-width: var(--menubar-select-menu-width);
  max-width: max(33vw, var(--combobox-width));
}
.scheme-selector-menu input[type="number"],
.scheme-selector-menu input[type="text"] {
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-tiny);
  color: var(--font-color-active);
  caret-color: var(--input-caret-color);
}
.scheme-selector-menu:hover {
  border-color: var(--input-border-color-hover);
}
.scheme-selector-menu:focus-within {
  border: var(--input-border-size) solid var(--input-border-color-focussed);
  background-color: transparent;
  color: var(--font-color-emphasized);
}
.scheme-selector-menu input[type="number"]:focus,
.scheme-selector-menu input[type="text"]:focus {
  border: none;
}
.scheme-selector-menu > *:not(:first-child) {
  margin-left: var(--base-padding);
}
.scheme-selector-menu:hover {
  border-color: var(--input-border-color-hover);
}
.popover-container-opened .scheme-selector-menu,
.popover-container-opened .scheme-selector-menu:hover {
  border: var(--input-border-size) solid var(--input-border-color-active);
  background-color: transparent;
  color: var(--font-color-active);
}
.scheme-selector-menu.select-combo-box-disabled {
  opacity: var(--inactive-item-opacity);
  pointer-events: none;
}
.scheme-selector-menu.select-combo-box-active {
  border: var(--input-border-size) solid var(--input-border-color-active);
  background-color: transparent;
  color: var(--font-color-active);
}
.editor-mode-select {
  padding: 0 calc(3 * var(--base-padding));
  display: flex;
  align-items: center;
}
.editor-mode-select-label {
  font: var(--hds-body-extrasmall-font);
  text-transform: uppercase;
  color: var(--font-color-hint);
  margin-right: calc(3 * var(--base-padding));
}
.editor-mode-select-menu {
  cursor: pointer;
  user-select: none;
  line-height: var(--header-line-height);
  border-radius: var(--item-border-radius);
  background-color: transparent;
  border-radius: var(--input-border-radius);
  border: var(--input-border-size) solid var(--input-border-color-active);
  color: var(--font-color-active);
  caret-color: var(--input-caret-color);
  align-items: center;
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-tiny);
  color: var(--font-color-hint);
  --icon-color: var(--font-color-hint);
  --icon-color: var(--hint-icon-color);
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  height: var(--input-height);
  line-height: var(--input-height);
  padding: 0 0 0 var(--base-padding);
  --combobox-width: var(--menubar-select-menu-width);
}
.editor-mode-select-menu input[type="number"],
.editor-mode-select-menu input[type="text"] {
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-tiny);
  color: var(--font-color-active);
  caret-color: var(--input-caret-color);
}
.editor-mode-select-menu:hover {
  border-color: var(--input-border-color-hover);
}
.editor-mode-select-menu:focus-within {
  border: var(--input-border-size) solid var(--input-border-color-focussed);
  background-color: transparent;
  color: var(--font-color-emphasized);
}
.editor-mode-select-menu input[type="number"]:focus,
.editor-mode-select-menu input[type="text"]:focus {
  border: none;
}
.editor-mode-select-menu > *:not(:first-child) {
  margin-left: var(--base-padding);
}
.editor-mode-select-menu:hover {
  border-color: var(--input-border-color-hover);
}
.popover-container-opened .editor-mode-select-menu,
.popover-container-opened .editor-mode-select-menu:hover {
  border: var(--input-border-size) solid var(--input-border-color-active);
  background-color: transparent;
  color: var(--font-color-active);
}
.editor-mode-select-menu.select-combo-box-disabled {
  opacity: var(--inactive-item-opacity);
  pointer-events: none;
}
.editor-mode-select-menu.select-combo-box-active {
  border: var(--input-border-size) solid var(--input-border-color-active);
  background-color: transparent;
  color: var(--font-color-active);
}
.editor-mode-select-popover {
  box-shadow: 0 1px 4px 0 var(--shadow-color);
  --divider-color-override: var(--bg-color-popup-divider);
  background-color: var(--popup-color, var(--bg-color-popup));
  border: var(--border-size) solid var(--border-color);
  border-radius: var(--popup-border-radius);
  z-index: 9;
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  width: var(--menubar-select-menu-width);
}
.language-switcher-menu {
  cursor: pointer;
  user-select: none;
  line-height: var(--header-line-height);
  border-radius: var(--item-border-radius);
  background-color: transparent;
  border-radius: var(--input-border-radius);
  border: var(--input-border-size) solid var(--input-border-color-active);
  color: var(--font-color-active);
  caret-color: var(--input-caret-color);
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-tiny);
  color: var(--font-color-hint);
  --icon-color: var(--font-color-hint);
  --icon-color: var(--hint-icon-color);
  padding: 0 0 0 var(--base-padding);
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  height: var(--input-height);
  line-height: var(--input-height);
  align-items: center;
}
.language-switcher-menu input[type="number"],
.language-switcher-menu input[type="text"] {
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-tiny);
  color: var(--font-color-active);
  caret-color: var(--input-caret-color);
}
.language-switcher-menu:hover {
  border-color: var(--input-border-color-hover);
}
.language-switcher-menu:focus-within {
  border: var(--input-border-size) solid var(--input-border-color-focussed);
  background-color: transparent;
  color: var(--font-color-emphasized);
}
.language-switcher-menu input[type="number"]:focus,
.language-switcher-menu input[type="text"]:focus {
  border: none;
}
.language-switcher-menu > *:not(:first-child) {
  margin-left: var(--base-padding);
}
.language-switcher-menu:hover {
  border-color: var(--input-border-color-hover);
}
.popover-container-opened .language-switcher-menu,
.popover-container-opened .language-switcher-menu:hover {
  border: var(--input-border-size) solid var(--input-border-color-active);
  background-color: transparent;
  color: var(--font-color-active);
}
.language-switcher-menu.select-combo-box-disabled {
  opacity: var(--inactive-item-opacity);
  pointer-events: none;
}
.language-switcher-menu.select-combo-box-active {
  border: var(--input-border-size) solid var(--input-border-color-active);
  background-color: transparent;
  color: var(--font-color-active);
}
.language-switcher-label {
  font-family: var(--font-family);
  font-size: var(--text-size-big-button);
  line-height: var(--line-height-menu);
  color: var(--font-color-subdued);
  text-transform: uppercase;
  margin-right: calc(2 * var(--base-padding));
}
.popover-container-opened .language-switcher-label {
  font-family: var(--font-family-emphasized);
  font-size: var(--text-size-big-button);
  line-height: var(--line-height-menu);
  color: var(--font-color);
}
.language-switcher-popover {
  box-shadow: 0 1px 4px 0 var(--shadow-color);
  --divider-color-override: var(--bg-color-popup-divider);
  background-color: var(--popup-color, var(--bg-color-popup));
  border: var(--border-size) solid var(--border-color);
  border-radius: var(--popup-border-radius);
  z-index: 9;
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  width: var(--menubar-select-menu-width);
}
.language-switcher-popover .select-item,
.language-switcher-popover .select-item-selected {
  padding: 0 calc(4 * var(--base-padding));
  height: var(--popup-item-height-large);
}
.maplab-menu-bar.menu-bar {
  background-color: var(--bg-color-item-selected);
  height: var(--large-main-item-height);
}
.maplab-menu-bar .menu-bar-button {
  font-family: var(--font-family);
  font-size: var(--text-size-dialog);
  font-style: normal;
  font-weight: 400;
  line-height: var(--line-height);
  --icon-color: var(--font-color-secondary);
  height: var(--large-main-item-height);
  line-height: var(--large-main-item-height);
  color: var(--font-color-secondary);
  padding: 0 calc(6 * var(--base-padding));
  position: relative;
}
.maplab-menu-bar .popover-container-opened .menu-bar-button:hover,
.maplab-menu-bar .menu-bar-button:hover {
  background-color: var(--menu-bar-bg-hover);
}
.maplab-menu-bar .popover-container-opened .menu-bar-button {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family);
  font-size: var(--text-size-dialog);
  font-style: normal;
  font-weight: 400;
  line-height: var(--line-height);
  color: var(--font-color-secondary);
  --icon-color: var(--font-color-secondary);
  font-weight: 500;
  font-family: var(--font-family-emphasized);
  color: var(--button-oncolor-primary-color);
  background-color: unset;
}
.maplab-menu-bar .menu-bar-icon {
  margin: calc(2 * var(--base-padding)) var(--base-padding) calc(2 * var(--base-padding)) calc(6 * var(--base-padding));
}
.application-title {
  font-family: var(--font-family);
  font-size: var(--text-size-dashboard-title);
  font-style: normal;
  font-weight: 400;
  line-height: var(--line-height-dashboard-title);
  color: var(--font-color-secondary);
  --icon-color: var(--font-color-secondary);
  color: var(--foregrounds-foreground-primary, var(--button-oncolor-primary-color));
  padding-right: 42px;
  margin: calc(calc(2 * var(--base-padding)) + var(--base-padding)) calc(calc(2 * var(--base-padding)) + var(--base-padding)) calc(calc(2 * var(--base-padding)) + var(--base-padding)) var(--base-padding);
}
.menubar-menu {
  background-color: var(--backgrounds-background-secondary, var(--menu-bar-bg));
  filter: drop-shadow(0px 13px 13px rgba(0, 0, 0, 0.24)) drop-shadow(0px 0px 21px rgba(0, 0, 0, 0.15)) drop-shadow(0px 6px 6px rgba(0, 0, 0, 0.18)) drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.36));
  padding: calc(2 * var(--base-padding)) 0;
  min-width: 200px;
}
.menubar-menu .menu-item,
.menubar-menu .menu-item-disabled {
  padding: var(--base-padding) calc(2 * var(--base-padding));
  height: var(--button-height);
  font-family: var(--font-family);
  font-size: var(--text-size);
  font-style: normal;
  font-weight: 400;
  line-height: var(--text-size-dialog-big);
  letter-spacing: -0.048px;
  color: var(--font-color-secondary);
  --icon-color: var(--font-color-secondary);
}
.menubar-menu .menu-item {
  color: var(--font-color-secondary);
  --icon-color: var(--font-color-secondary);
}
.menubar-menu .menu-item:hover {
  line-height: var(--text-size-dialog-big);
  background-color: var(--menu-bar-bg-hover);
  color: var(--button-oncolor-primary-color);
  --icon-color: var(--button-oncolor-primary-color);
}
.menubar-menu .menu-item-with-description {
  padding: var(--hds-spacing-3) var(--hds-spacing-2);
  align-items: flex-start;
}
.menubar-menu .menu-item-disabled,
.menubar-menu .menu-item-hint {
  color: var(--button-oncolor-primary-color-disabled);
  --icon-color: var(--button-oncolor-primary-color-disabled);
}
.menubar-menu .menu-item-hint {
  margin-right: calc(2 * var(--base-padding));
}
.menubar-menu .menu-item-icon {
  padding-left: calc(2 * var(--base-padding));
}
.menubar-menu .menu-item-name {
  margin: 0 calc(2 * var(--base-padding));
}
.menubar-menu .menu-item-description {
  color: var(--hds-foreground-secondary);
  white-space: initial;
}
.menubar-menu-wide {
  width: 559px;
}
.partition-container {
  display: flex;
  flex-direction: column;
}
.partition-column-container {
  display: flex;
  flex-direction: row;
}
.partition-column-container .divider-vertical {
  height: unset;
}
.partition-column-container > div:first-child {
  margin-right: calc(2 * var(--base-padding));
}
.partition-column-container > div:last-child {
  margin-left: calc(2 * var(--base-padding));
}
.active-indicator {
  position: absolute;
  bottom: 0px;
  background-image: var(--button-primary-bg);
  height: 2px;
  width: 100%;
}
.maplab-menu-nav {
  z-index: 5;
  position: relative;
}
.menubar-right-tray,
.menubar-partitioned-menu {
  display: flex;
  align-items: center;
  justify-content: center;
}
.menubar-partitioned-menu-divider {
  width: 1px;
  height: 135px;
  margin: var(--hds-spacing-2);
  background: var(--hds-foreground-divider);
}
.menu-item-with-description {
  align-items: flex-start;
  min-width: 300px;
}
.menu-item-description {
  line-height: var(--hds-caption-line-height) !important;
  color: var(--hds-foreground-secondary);
  white-space: initial;
}
.maplab-menu-list {
  padding: var(--hds-spacing-0) var(--hds-spacing-2);
}
.maplab-menu-item {
  border-radius: var(--hds-border-radius);
  margin-bottom: var(--hds-spacing-2);
}
.maplab-menu-item:last-of-type {
  margin-bottom: var(--hds-spacing-0);
}
.menu-item-with-description-container {
  cursor: pointer;
  user-select: none;
  padding: var(--hds-spacing-3) var(--hds-spacing-2);
  display: flex;
  align-items: center;
  gap: var(--hds-spacing-2);
  border-radius: var(--hds-border-radius);
  --hds-icon-color: var(--hds-foreground-secondary);
}
.menu-item-with-description-container:hover {
  background-color: var(--hds-background-hover);
}
.menu-item-with-description-container:active {
  background-color: var(--hds-background-press);
}
.maplab-menu-nav-theme-label {
  color: var(--hds-foreground-secondary);
}
.tooltip-container-expanding {
  --base-padding: 4px;
  --half-panel-margin: 1px;
  --panel-margin: 2px;
  --panel-body-border-radius: 4px;
  --panel-header-border-radius: 5px;
  --font-family: "Fira Regular";
  --font-family-subdued: "Fira Light";
  --font-family-emphasized: "Fira Medium";
  --text-size-dashboard-title: 18px;
  --text-size-dashboard-section-title: 16px;
  --text-size-dashboard-description: 16px;
  --text-size-big: 16px;
  --text-size-big-button: 14px;
  --text-size-big-input: 14px;
  --text-size-menu: 12px;
  --text-size-dialog: 14px;
  --text-size: 12px;
  --text-size-tiny: 10px;
  --text-size-super-tiny: 8px;
  --text-size-drag-and-drop-title: 20px;
  --text-size-dialog-big: 18px;
  --line-height-tiny: 12px;
  --line-height-menu: 16px;
  --line-height: 20px;
  --header-line-height: 24px;
  --line-height-dashboard-title: 26px;
  --line-height-dashboard-section-title: 24px;
  --line-height-dashboard-description: 24px;
  --line-height-drag-and-drop-title: 24px;
  --line-height-dialog-header: 16px;
  --line-height-dialog-content: 20px;
  --divider-thickness: 1px;
  --divider-spacing: 0px;
  --divider-padding: calc(4 * var(--base-padding));
  --popup-border-radius: 4px;
  --popup-border-radius-large: 8px;
  --popup-item-height-large: 40px;
  --popup-menu-width: 200px;
  --popup-footer-height: 64px;
  --popup-header-height: 64px;
  --popup-padding-h: 24px;
  --popup-padding-v: 20px;
  --white-popup-max-height: 280px;
  --popup-description-height: 200px;
  --popup-item-selection-height: 2px;
  --popup-image-width: 400px;
  --popup-image-height: 175px;
  --border-size: 1px;
  --border-size-highlighted: 2px;
  --border-radius: 4px;
  --button-icon-spacing: 8px;
  --input-height: 22px;
  --input-width: 93px;
  --number-input-width: var(--input-width);
  --file-input-width: var(--input-width);
  --dash-input-width: 125px;
  --input-prefix-width: 6px;
  --input-prefix-left-padding: 5px;
  --input-border-radius: 2px;
  --input-border-size: 1px;
  --input-padding: 4px;
  --input-icon-padding: 6px;
  --input-disabled-opacity: 0.5;
  --boolean-input-height: 16px;
  --sliding-toggle-height: 20px;
  --sliding-toggle-width: 40px;
  --input-animation-duration: 300ms;
  --input-animation-duration-quick: 100ms;
  --item-border-radius: 2px;
  --reduced-item-height: 28px;
  --main-item-height: 35px;
  --large-main-item-height: 48px;
  --icon-button-group-height: 28px;
  --icon-box-size: 16px;
  --icon-text-inline-size: var(--text-size);
  --icon-header-size: var(--header-line-height);
  --icon-big-size: 40px;
  --icon-padding-size: calc(2 * var(--base-padding));
  --tooltip-text-size: 13px;
  --tooltip-line-height: 18px;
  --tooltip-nibble-size: 6px;
  --tooltip-nibble-indentation: 18px;
  --tooltip-width: 200px;
  --tooltip-width-wide: 320px;
  --selected-item-selection-bar-width: 3px;
  --selected-group-item-selection-bar-width: 4px;
  --inactive-item-opacity: 0.4;
  --graph-width: 2px;
  --zoomlevel-line-width: 1px;
  --collapsible-margin: 12px;
  --scrollbar-width: 8px;
  --scrollbar-expanded-grabber-width: 6px;
  --scrollbar-grabber-width: 4px;
  --map-overlay-margin: 12px;
  --map-overlay-item-size: 40px;
  --menubar-size: 48px;
  --menubar-title-width: 300px;
  --menubar-select-menu-width: 150px;
  --menubar-icon-size: 32px;
  --menubar-lang-dropdown-height: 400px;
  --menubar-notification-dot-size: 8px;
  --menubar-scheme-selection-item-label-width: 200px;
  --search-field-height: 25px;
  --panel-small-width: 230px;
  --panel-width: 300px;
  --panel-large-width: 360px;
  --panel-tab-height: 25px;
  --panel-empty-content-top-offset: 200px;
  --panel-header-button-size: 20px;
  --slider-width: 4px;
  --slider-length: 82px;
  --slider-grabber-size: 14px;
  --slider-tick-length: 2px;
  --slider-tick-width: 1px;
  --slider-tick-offset: 1px;
  --navigation-bar-size: 40px;
  --drag-item-divider-height: 1px;
  --drag-item-divider-end-size: 5px;
  --notification-container-height: 32px;
  --notification-toast-height: 56px;
  --notification-animation-curve: cubic-bezier(0.7, 0, 0.5, 1.5);
  --notification-animation-duration: 200ms;
  --color-picker-height: 150px;
  --color-picker-crosshair-size: 15px;
  --color-picker-input-width: 70px;
  --color-picker-slider-track-height: 8px;
  --color-picker-slider-handle-size: 12px;
  --color-picker-container-width: 320px;
  --color-picker-eyedrop-size: 24px;
  --icon-picker-container-width: 254px;
  --icon-picker-container-height: 318px;
  --icon-picker-icon-size: 24px;
  --swatch-height: 22px;
  --swatch-width: 50px;
  --ga-blend-mode-btn-width: 52px;
  --basic-template-thumbnail-height: 40px;
  --basic-template-thumbnail-width: 56px;
  --basic-template-thumbnail-border: 2px;
  --basic-template-thumbnail-border-offset: 1px;
  --window-header-height: 73px;
  --extra-small-window-width: 468px;
  --extra-small-window-height: 212px;
  --small-window-width: 460px;
  --small-window-height: 280px;
  --medium-window-width: 380px;
  --medium-window-height: 320px;
  --big-window-width: 640px;
  --big-window-height: 520px;
  --wide-big-window-width: 720px;
  --wide-big-window-height: 520px;
  --wide-extra-big-window-width: 950px;
  --wide-extra-big-window-height: 520px;
  --fluid-window-height: calc(100vh - 200px);
  --fluid-window-width: calc(100vw - 512px);
  --search-bar-height: 50px;
  --icon-window-drag-area-height: 310px;
  --medium-area-height: 100px;
  --big-area-height: 180px;
  --extra-big-area-height: 320px;
  --icon-window-area-height: 393px;
  --drop-target-outline-size: 1px;
  --drop-target-outline-offset: 1px;
  --image-picker-crosshair-size: 8px;
  --image-picker-border-size: 2px;
  --icon-window-side-bar-width: 207px;
  --icon-window-icon-entity-width: 77px;
  --icon-window-icon-entity-height: 88px;
  --icon-window-icon-entity-background-size: 48px;
  --icon-window-icon-entity-background-size-small: 24px;
  --icon-window-change-view-header: 32px;
  --icon-window-change-item-text-width: 100px;
  --icon-window-change-item-indentation: 53px;
  --icon-window-resource-view-header: 64px;
  --icon-window-name-pill-container-width: 240px;
  --icon-window-name-pill-border-radius: 16px;
  --icon-window-item-border-width: 2px;
  --icon-window-notification-height: 32px;
  --medium-button-height: 24px;
  --button-height: 32px;
  --large-button-height: 40px;
  --dashboard-item-width: 340px;
  --dashboard-item-height: 160px;
  --dashboard-thumbnail-height: 176px;
  --dashboard-input-height: 32px;
  --component-highlight-thickness: 2px;
  --modifier-group-item-indentation: 24px;
  --region-specific-bar-width: 2px;
  --region-specific-bar-height: 16px;
  --modifier-affected-specific-margin: -20px;
  --modifier-affected-specific-tooltip-width: 296px;
  --tooltip-content-max-width: 225px;
  --modifier-overlay-panel-header-height: 38px;
  --drag-item-divider: #126EF8;
  --drag-item-highlight: rgba(15, 22, 33, 0.1);
  --font-color-highlighted: #126EF8;
  --font-color-highlighted-emphasized: #d0e2fe;
  --font-color-emphasized: #0E1520;
  --font-color-active: #1C232E;
  --font-color: #272F3A;
  --font-color-subdued: #535C6B;
  --font-color-hint: var(--hds-gray-600);
  --font-color-disabled: #8890A0;
  --main-button-font-color: #272F3A;
  --main-button-font-color-emphasized: #0f1621;
  --font-color-menu: #535C6B;
  --font-color-tooltip: #1C232E;
  --font-color-group-item: #1C232E;
  --font-color-dialog: rgba(16, 23, 35, 0.95);
  --font-color-oncolor: #ffffff;
  --font-color-oncolor-hover: #ffffff;
  --font-color-oncolor-subdued: rgba(225, 234, 254, 0.58);
  --font-color-panel-notification: #E9ECF2;
  --font-color-inactive-item-text: #333B47;
  --font-color-item-text-hover: #0f1621;
  --font-color-hds-tertiary: rgba(34, 54, 89, 0.41);
  --font-color-hds-tertiary-hover: rgba(19, 35, 67, 0.5);
  --font-color-hds-tertiary-disabled: rgba(0, 26, 77, 0.2);
  --font-color-body: #3F4855;
  --font-color-primary: rgba(16, 23, 35, 0.95);
  --font-color-primary-disabled: rgba(0, 26, 77, 0.2);
  --font-color-secondary: rgba(7, 23, 49, 0.6);
  --font-color-secondary-disabled: rgba(0, 26, 77, 0.2);
  --header-icon-color: #535C6B;
  --active-icon-color: #1C232E;
  --active-icon-color-inverted: #ffffff;
  --inactive-icon-color: #6A7483;
  --disabled-item-group-text-color: #6A7483;
  --hint-icon-color: #6A7483;
  --disabled-icon-color: #8890A0;
  --action-icon-color: #535C6B;
  --disabled-action-icon-color: #8890A0;
  --error-icon-color: #CF001A;
  --warning-icon-color: #9E6400;
  --warning-icon-color-hover: #FAAA1E;
  --inactive-icon-border-color: #A4ACBA;
  --slider-input-border-color: #A4ACBA;
  --panel-header-button-bg: #f3f3f4;
  --panel-tab-bg-unselected: rgba(255, 255, 255, 0.8);
  --divider-color: rgba(255, 255, 255, 0.2);
  --divider-color-ondark: rgba(15, 22, 33, 0.2);
  --sub-item-box-border-color: #E9ECF2;
  --sub-item-box-bg-color: #CCD1DB;
  --bg-color-ui: #f3f3f4;
  --bg-color-panel-base: #ffffff;
  --bg-color-panel-content: #e7e8e9;
  --bg-color-modifier-panel-content: #ffffff;
  --bg-color-panel-section: #ffffff;
  --bg-color-content: rgba(255, 255, 255, 0.4);
  --bg-color-panel-dark: #ffffff;
  --bg-color-panel-header-dark: #ffffff;
  --bg-color-panel-group-item-selected: #ffffff;
  --border-color-panel-item: #ffffff;
  --bg-color-item: rgba(255, 255, 255, 0.9);
  --bg-color-item-selected: rgba(255, 255, 255, 0.95);
  --bg-color-item-highlighted: rgba(255, 255, 255, 0.6);
  --bg-color-item-header: #cfd0d3;
  --bg-color-button-group: #f3f3f4;
  --blur-popup-color: rgba(8, 23, 52, 0.6);
  --bg-color-popup: #ffffff;
  --bg-color-popup-item-hover: #ffffff;
  --bg-color-popup-divider: rgba(15, 55, 115, 0.1);
  --bg-window: #ffffff;
  --bg-hds-secondary: #ffffff;
  --bg-window-content: rgba(255, 255, 255, 0.4);
  --bg-window-header: #e7e8e9;
  --bg-global-adjustments: rgba(255, 255, 255, 0.9);
  --bg-color-inline-box: rgba(255, 255, 255, 0.4);
  --border-color: rgba(15, 22, 33, 0.1);
  --border-color-highlighted: #1C232E;
  --bg-selected-item: var(--hds-blue-onlight-400-020);
  --main-button-color: #126EF8;
  --main-button-color-hover: #0D5ED9;
  --action-text-button: #126EF8;
  --action-text-button-hover: #0D5ED9;
  --normal-button-bg-color: rgba(255, 255, 255, 0.8);
  --normal-button-bg-color-hover: rgba(255, 255, 255, 0.95);
  --button-primary-bg: linear-gradient(270deg, #65EBE2 0%, #6B9CFF 100%);
  --button-primary-bg-hover: linear-gradient(90deg, #3675F5 0%, #1BE0D7 100%);
  --button-primary-bg-active: linear-gradient(90deg, #1854CC 0%, #08CCC3 100%);
  --button-primary-bg-disabled: linear-gradient(270deg, rgba(125, 230, 225, 0.4) 0%, rgba(128, 170, 255, 0.4) 100%);
  --button-primary-color: rgba(16, 25, 37, 0.9);
  --button-primary-color-disabled: rgba(18, 41, 84, 0.3);
  --button-secondary-bg: rgba(0, 55, 141, 0.05);
  --button-secondary-bg-hover: rgba(15, 55, 115, 0.1);
  --button-secondary-bg-active: rgba(30, 43, 70, 0.6);
  --button-secondary-bg-disabled: rgba(0, 55, 141, 0.05);
  --button-secondary-color: rgba(16, 23, 35, 0.95);
  --button-secondary-color-disabled: rgba(18, 41, 84, 0.3);
  --button-danger-bg: #CF001A;
  --button-danger-bg-hover: #A5002F;
  --button-danger-bg-active: #8F0029;
  --button-danger-bg-disabled: rgba(207, 0, 26, 0.3);
  --button-danger-color: #ffffff;
  --button-warn-bg: #FFBD09;
  --button-warn-bg-hover: #FAAA1E;
  --button-warn-bg-active: #9E6400;
  --button-warn-bg-disabled: rgba(255, 190, 10, 0.3);
  --button-warn-color: rgba(15, 24, 36, 0.9);
  --button-warn-color-active: #FFFFFF;
  --button-oncolor-primary-bg: #ffffff;
  --button-oncolor-primary-color: rgba(16, 23, 35, 0.95);
  --button-oncolor-primary-bg-disabled: #ffffff;
  --button-oncolor-primary-color-disabled: rgba(18, 41, 84, 0.3);
  --button-oncolor-primary-bg-hover: #F2F5F9;
  --button-oncolor-primary-bg-active: #DADFE7;
  --button-oncolor-secondary-bg: rgba(34, 54, 89, 0.41);
  --button-oncolor-secondary-color: #ffffff;
  --button-oncolor-secondary-bg-disabled: rgba(34, 54, 89, 0.41);
  --button-oncolor-secondary-color-disabled: rgba(225, 234, 254, 0.58);
  --button-oncolor-secondary-bg-hover: rgba(19, 35, 67, 0.5);
  --button-oncolor-secondary-bg-active: rgba(7, 23, 49, 0.6);
  --background-object: rgba(0, 55, 141, 0.05);
  --background-object-hover: rgba(15, 55, 115, 0.1);
  --button-apply-modifiers-bg: rgba(255, 255, 255, 0.8);
  --button-apply-modifiers-bg-hover: rgba(255, 255, 255, 0.7);
  --button-apply-modifiers-bg-disabled: rgba(255, 255, 255, 0.9);
  --button-apply-modifiers-border: #4791FF;
  --button-apply-modifiers-border-hover: #5FB2FF;
  --button-apply-modifiers-border-disabled: rgba(18, 110, 248, 0.4);
  --colorblind-popup-divider: rgba(15, 54, 113, 0.1);
  --colorblind-popup-header-bg-color: #ffffff;
  --colorblind-popup-body-bg-color: #F2F5F9;
  --colorblind-popup-body-font-color: #535C6B;
  --colorblind-popup-button-color: rgba(15, 54, 113, 0.1);
  --input-border-color-focussed: #126EF8;
  --input-border-color-active: #0f1621;
  --input-border-color-hover: rgba(15, 22, 33, 0.3);
  --input-border-color-inactive: #6A7483;
  --input-border-color-error: #D35566;
  --input-bg-color-active: #ffffff;
  --input-bg-color-inactive: rgba(255, 255, 255, 0.3);
  --input-bg-color-inactive-lighter: rgba(255, 255, 255, 0.5);
  --hds-input-bg-color: #ffffff;
  --hds-input-border: rgba(34, 54, 89, 0.41);
  --hds-input-border-color-focussed: #0BC7C2;
  --hds-input-border-color-hover: rgba(19, 35, 67, 0.5);
  --hds-input-caret-color: rgba(16, 23, 35, 0.95);
  --hds-input-placeholder-color: rgba(34, 54, 89, 0.41);
  --hds-input-color: rgba(16, 23, 35, 0.95);
  --input-inner-shadow-color: rgba(0, 0, 0, 0.1);
  --input-caret-color: #126EF8;
  --input-slider-bg-color: rgba(15, 22, 33, 0.1);
  --input-slider-color: #126EF8;
  --color-picker-slider-grabber-color: #ffffff;
  --color-picker-bg-color: #3F4855;
  --color-picker-input-border-color: #8890A0;
  --color-picker-input-bg-color: #1C232E;
  --color-picker-input-color: #E9ECF2;
  --dropdown-bg-color-opened: #e7e8e9;
  --dropdown-item-color: #ffffff;
  --dropdown-item-color-selected: #e7e8e9;
  --dropdown-item-color-hover: #ffffff;
  --shadow-color: rgba(15, 22, 33, 0.4);
  --drop-shadow-gradient: linear-gradient(to bottom, rgba(233, 236, 242, 0.6) 0%, transparent 100%);
  --selected-item-marker-color: #126EF8;
  --selection-color: #126EF8;
  --selection-gradient: rgba(18, 110, 248, 0.1);
  --region-specific-color: var(--hds-purple-onlight-400);
  --region-specific-color-hover: var(--hds-purple-onlight-200);
  --region-specific-color-bg-hover: rgba(140, 107, 174, 0.8);
  --region-specific-color-bg-pressed: rgba(140, 107, 174, 0.9);
  --region-specific-icon-color: rgba(247, 250, 253, 0.2);
  --region-specific-bg-color: rgba(179, 156, 201, 0.3);
  --jp-region-specific-bg-color: #49475d;
  --notification-color: #D35566;
  --notification-error-color: #CF001A;
  --notification-warning-color: #FFBD09;
  --notification-overlay-bg-color: #3F4855;
  --notification-overlay-bg-hover-color: #535C6B;
  --notification-overlay2-bg-color: #1C232E;
  --component-highlight-color: #6A7483;
  --component-highlight-color-subdued: #A4ACBA;
  --graph-color: var(--hds-background-inverse);
  --graph-stop: var(--hds-background-inverse);
  --graph-bg: var(--hds-background-primary);
  --graph-border: var(--hds-foreground-tertiary-hover);
  --graph-border-hover: var(--hds-foreground-tertiary-press);
  --dash-color: #0f1621;
  --scrollbar-color: rgba(15, 22, 33, 0.2);
  --scrollbar-color-active: rgba(15, 22, 33, 0.2);
  --scrollbar-color-hover: rgba(15, 22, 33, 0.4);
  --slider-grabber-outline-color: rgba(218, 239, 250, 0.12);
  --slider-tick-color: rgba(15, 22, 33, 0.4);
  --chart-item-color-selected: #126EF8;
  --chart-item-color: rgba(15, 22, 33, 0.2);
  --chart-selection-bg: rgba(15, 22, 33, 0.05);
  --color-swatch-border: #272F3A;
  --inactive-color-swatch: #6A7483;
  --hover-inactive-color-swatch: #A4ACBA;
  --map-picker-color-border: rgba(15, 22, 33, 0.1);
  --map-picker-no-color-bg: rgba(255, 255, 255, 0.6);
  --code-string-color: #126EF8;
  --drop-target-color: #126EF8;
  --path-type-color-text: #000;
  --path-type-color-scheme: #000;
  --path-type-color-layer: rgba(255, 255, 255, 0.1);
  --path-type-color-condition: rgba(255, 255, 255, 0.2);
  --path-type-color-styleset: #2E468F;
  --path-type-color-style: #2C48A1;
  --path-type-color-attribute: rgba(15, 22, 33, 0.4);
  --path-type-color-definition: #52A3DB;
  --path-type-color-subcondition: #3A7BDB;
  --path-type-color-zoomlevel: #000;
  --path-type-color-height: #000;
  --image-picker-popup-color: #ffffff;
  --grid-placement-hover: rgba(15, 22, 33, 0.6);
  --grid-placement-selected: #126EF8;
  --grid-placement-selected-secondary: rgba(18, 110, 248, 0.8);
  --grid-placement-unselected: rgba(15, 22, 33, 0.1);
  --tag-pill-bg-color: #ffffff;
  --tag-pill-included: #00C78F;
  --tag-pill-excluded: #EC610E;
  --help-bg-color: #D468A0;
  --bg-dashboard-item: #ffffff;
  --tooltip-bg: var(--hds-background-inverse);
  --tooltip-text: var(--hds-inverse-primary);
  --menu-bar-bg: rgba(255, 255, 255, 0.95);
  --menu-bar-bg-hover: rgba(0, 55, 141, 0.05);
  --menu-bar-item-description-color: #A4ACBA;
  --notification-info-bg: #15BDB9;
  --notification-warning-bg: #92600C;
  --notification-confirmation-bg: #0A7651;
  --notification-error-bg: #840B2E;
  --backgrounds-background-object: rgba(218, 239, 250, 0.12);
  --modifier-header-bg: var(--hds-aqua-onlight-400);
  --modifier-preset-border: #e7ebf1;
  --modifier-dot--default-state: var(--hds-accent);
  --modifier-dot--hover-state: var(--hds-aqua-onlight-500);
  --modifier-overlay-panel-preset-bg: #EDFBFA;
  --modifier-overlay-panel-create-apply-modifiers-bg: #F6FDFD;
  --modifier-overlay-panel-create-modifiers-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.08);
  --modifier-overlay-panel-create-apply-modifiers-active-bg: rgba(95, 178, 255, 0.2);
  --modifier-overlay-panel-drag-drop-box-bg: rgba(64, 71, 82, 0.5);
  --modifier-overlay-active-bg: #e3e6eb99;
  --modifier-overlay-active-header-bg: #dddfe466;
  --modifier-overlay-active-border: #CED4DF;
  --modifier-overlay-header-bg: #00378f08;
  --scheme-selector-bar-bg: #dae6fa;
  --scheme-selector-shadow: 0px 0px 2px 0px var(--Dropshadow-overlay-dropshadow-layer-A-overlay, rgba(0, 25, 75, 0.12)), 0px 6px 6px 0px var(--Dropshadow-overlay-dropshadow-layer-B-overlay, rgba(0, 25, 75, 0.06)), 0px 0px 21px 0px var(--Dropshadow-overlay-dropshadow-layer-C-overlay, rgba(0, 25, 75, 0.05)), 0px 13px 13px 0px var(--Dropshadow-overlay-dropshadow-layer-D-overlay, rgba(0, 25, 75, 0.08));
  --quick-tour-highlight: var(--hds-blue-ondark-400);
  --file-entity-bg-hover: var(--hds-blue-onlight-400-010);
  --file-entity-bg-selected: var(--hds-blue-onlight-400-020);
  --thumbnail-border-color: var(--hds-foreground-divider);
  max-width: unset;
}
.tooltip-container-expanding .tooltip-content {
  max-width: unset;
}
.tooltip-container {
  display: flex;
  white-space: normal;
}
.tooltip-container-dark {
  --base-padding: 4px;
  --half-panel-margin: 1px;
  --panel-margin: 2px;
  --panel-body-border-radius: 4px;
  --panel-header-border-radius: 5px;
  --font-family: "Fira Regular";
  --font-family-subdued: "Fira Light";
  --font-family-emphasized: "Fira Medium";
  --text-size-dashboard-title: 18px;
  --text-size-dashboard-section-title: 16px;
  --text-size-dashboard-description: 16px;
  --text-size-big: 16px;
  --text-size-big-button: 14px;
  --text-size-big-input: 14px;
  --text-size-menu: 12px;
  --text-size-dialog: 14px;
  --text-size: 12px;
  --text-size-tiny: 10px;
  --text-size-super-tiny: 8px;
  --text-size-drag-and-drop-title: 20px;
  --text-size-dialog-big: 18px;
  --line-height-tiny: 12px;
  --line-height-menu: 16px;
  --line-height: 20px;
  --header-line-height: 24px;
  --line-height-dashboard-title: 26px;
  --line-height-dashboard-section-title: 24px;
  --line-height-dashboard-description: 24px;
  --line-height-drag-and-drop-title: 24px;
  --line-height-dialog-header: 16px;
  --line-height-dialog-content: 20px;
  --divider-thickness: 1px;
  --divider-spacing: 0px;
  --divider-padding: calc(4 * var(--base-padding));
  --popup-border-radius: 4px;
  --popup-border-radius-large: 8px;
  --popup-item-height-large: 40px;
  --popup-menu-width: 200px;
  --popup-footer-height: 64px;
  --popup-header-height: 64px;
  --popup-padding-h: 24px;
  --popup-padding-v: 20px;
  --white-popup-max-height: 280px;
  --popup-description-height: 200px;
  --popup-item-selection-height: 2px;
  --popup-image-width: 400px;
  --popup-image-height: 175px;
  --border-size: 1px;
  --border-size-highlighted: 2px;
  --border-radius: 4px;
  --button-icon-spacing: 8px;
  --input-height: 22px;
  --input-width: 93px;
  --number-input-width: var(--input-width);
  --file-input-width: var(--input-width);
  --dash-input-width: 125px;
  --input-prefix-width: 6px;
  --input-prefix-left-padding: 5px;
  --input-border-radius: 2px;
  --input-border-size: 1px;
  --input-padding: 4px;
  --input-icon-padding: 6px;
  --input-disabled-opacity: 0.5;
  --boolean-input-height: 16px;
  --sliding-toggle-height: 20px;
  --sliding-toggle-width: 40px;
  --input-animation-duration: 300ms;
  --input-animation-duration-quick: 100ms;
  --item-border-radius: 2px;
  --reduced-item-height: 28px;
  --main-item-height: 35px;
  --large-main-item-height: 48px;
  --icon-button-group-height: 28px;
  --icon-box-size: 16px;
  --icon-text-inline-size: var(--text-size);
  --icon-header-size: var(--header-line-height);
  --icon-big-size: 40px;
  --icon-padding-size: calc(2 * var(--base-padding));
  --tooltip-text-size: 13px;
  --tooltip-line-height: 18px;
  --tooltip-nibble-size: 6px;
  --tooltip-nibble-indentation: 18px;
  --tooltip-width: 200px;
  --tooltip-width-wide: 320px;
  --selected-item-selection-bar-width: 3px;
  --selected-group-item-selection-bar-width: 4px;
  --inactive-item-opacity: 0.4;
  --graph-width: 2px;
  --zoomlevel-line-width: 1px;
  --collapsible-margin: 12px;
  --scrollbar-width: 8px;
  --scrollbar-expanded-grabber-width: 6px;
  --scrollbar-grabber-width: 4px;
  --map-overlay-margin: 12px;
  --map-overlay-item-size: 40px;
  --menubar-size: 48px;
  --menubar-title-width: 300px;
  --menubar-select-menu-width: 150px;
  --menubar-icon-size: 32px;
  --menubar-lang-dropdown-height: 400px;
  --menubar-notification-dot-size: 8px;
  --menubar-scheme-selection-item-label-width: 200px;
  --search-field-height: 25px;
  --panel-small-width: 230px;
  --panel-width: 300px;
  --panel-large-width: 360px;
  --panel-tab-height: 25px;
  --panel-empty-content-top-offset: 200px;
  --panel-header-button-size: 20px;
  --slider-width: 4px;
  --slider-length: 82px;
  --slider-grabber-size: 14px;
  --slider-tick-length: 2px;
  --slider-tick-width: 1px;
  --slider-tick-offset: 1px;
  --navigation-bar-size: 40px;
  --drag-item-divider-height: 1px;
  --drag-item-divider-end-size: 5px;
  --notification-container-height: 32px;
  --notification-toast-height: 56px;
  --notification-animation-curve: cubic-bezier(0.7, 0, 0.5, 1.5);
  --notification-animation-duration: 200ms;
  --color-picker-height: 150px;
  --color-picker-crosshair-size: 15px;
  --color-picker-input-width: 70px;
  --color-picker-slider-track-height: 8px;
  --color-picker-slider-handle-size: 12px;
  --color-picker-container-width: 320px;
  --color-picker-eyedrop-size: 24px;
  --icon-picker-container-width: 254px;
  --icon-picker-container-height: 318px;
  --icon-picker-icon-size: 24px;
  --swatch-height: 22px;
  --swatch-width: 50px;
  --ga-blend-mode-btn-width: 52px;
  --basic-template-thumbnail-height: 40px;
  --basic-template-thumbnail-width: 56px;
  --basic-template-thumbnail-border: 2px;
  --basic-template-thumbnail-border-offset: 1px;
  --window-header-height: 73px;
  --extra-small-window-width: 468px;
  --extra-small-window-height: 212px;
  --small-window-width: 460px;
  --small-window-height: 280px;
  --medium-window-width: 380px;
  --medium-window-height: 320px;
  --big-window-width: 640px;
  --big-window-height: 520px;
  --wide-big-window-width: 720px;
  --wide-big-window-height: 520px;
  --wide-extra-big-window-width: 950px;
  --wide-extra-big-window-height: 520px;
  --fluid-window-height: calc(100vh - 200px);
  --fluid-window-width: calc(100vw - 512px);
  --search-bar-height: 50px;
  --icon-window-drag-area-height: 310px;
  --medium-area-height: 100px;
  --big-area-height: 180px;
  --extra-big-area-height: 320px;
  --icon-window-area-height: 393px;
  --drop-target-outline-size: 1px;
  --drop-target-outline-offset: 1px;
  --image-picker-crosshair-size: 8px;
  --image-picker-border-size: 2px;
  --icon-window-side-bar-width: 207px;
  --icon-window-icon-entity-width: 77px;
  --icon-window-icon-entity-height: 88px;
  --icon-window-icon-entity-background-size: 48px;
  --icon-window-icon-entity-background-size-small: 24px;
  --icon-window-change-view-header: 32px;
  --icon-window-change-item-text-width: 100px;
  --icon-window-change-item-indentation: 53px;
  --icon-window-resource-view-header: 64px;
  --icon-window-name-pill-container-width: 240px;
  --icon-window-name-pill-border-radius: 16px;
  --icon-window-item-border-width: 2px;
  --icon-window-notification-height: 32px;
  --medium-button-height: 24px;
  --button-height: 32px;
  --large-button-height: 40px;
  --dashboard-item-width: 340px;
  --dashboard-item-height: 160px;
  --dashboard-thumbnail-height: 176px;
  --dashboard-input-height: 32px;
  --component-highlight-thickness: 2px;
  --modifier-group-item-indentation: 24px;
  --region-specific-bar-width: 2px;
  --region-specific-bar-height: 16px;
  --modifier-affected-specific-margin: -20px;
  --modifier-affected-specific-tooltip-width: 296px;
  --tooltip-content-max-width: 225px;
  --modifier-overlay-panel-header-height: 38px;
  --drag-item-divider: #126EF8;
  --drag-item-highlight: #0f1621;
  --font-color-highlighted: #126EF8;
  --font-color-highlighted-emphasized: #d0e2fe;
  --font-color-emphasized: #ffffff;
  --font-color-active: #E9ECF2;
  --font-color: #CCD1DB;
  --font-color-subdued: #B8BFCC;
  --font-color-hint: var(--hds-gray-400);
  --font-color-disabled: #6A7483;
  --main-button-font-color: #CCD1DB;
  --main-button-font-color-emphasized: #ffffff;
  --font-color-menu: #CCD1DB;
  --font-color-tooltip: #ffffff;
  --font-color-group-item: #E9ECF2;
  --font-color-dialog: #FFFFFF;
  --font-color-oncolor: #ffffff;
  --font-color-oncolor-hover: rgba(247, 250, 253, 0.98);
  --font-color-oncolor-subdued: #333B47;
  --font-color-apply-modifier-btn: #DADFE7;
  --font-color-apply-modifier-btn-hover: #E9ECF2;
  --font-color-panel-notification: #E9ECF2;
  --disabled-item-group-text-color: #6A7483;
  --font-color-inactive-item-text: #CCD1DB;
  --font-color-item-text-hover: #ffffff;
  --font-color-hds-tertiary: rgba(225, 234, 254, 0.58);
  --font-color-hds-tertiary-hover: rgba(234, 241, 255, 0.7);
  --font-color-hds-tertiary-disabled: rgba(195, 205, 222, 0.35);
  --font-color-body: rgba(238, 242, 252, 0.83);
  --font-color-primary: rgba(242, 246, 252, 0.95);
  --font-color-primary-disabled: rgba(225, 234, 254, 0.58);
  --font-color-secondary: rgba(232, 239, 252, 0.78);
  --font-color-secondary-disabled: rgba(217, 231, 251, 0.45);
  --header-icon-color: rgba(255, 255, 255, 0.6);
  --active-icon-color: #E9ECF2;
  --active-icon-color-inverted: #000;
  --inactive-icon-color: #6A7483;
  --hint-icon-color: #A4ACBA;
  --disabled-icon-color: #6A7483;
  --action-icon-color: #B8BFCC;
  --disabled-action-icon-color: #6A7483;
  --error-icon-color: #CF001A;
  --warning-icon-color: #EDB41B;
  --warning-icon-color-hover: #E9A32D;
  --toggle-button-icon-color: #A4ACBA;
  --hover-toggle-button-icon-color: #CCD1DB;
  --inactive-icon-border-color: #6A7483;
  --icon-bg-hover-color: #4E5663;
  --modifier-input-hover-border-color: #B8BFCC;
  --panel-header-button-bg: #1b222c;
  --panel-tab-bg-unselected: rgba(15, 22, 33, 0.8);
  --divider-color: #333B47;
  --divider-color-ondark: rgba(255, 255, 255, 0.2);
  --sub-item-box-border-color: transparent;
  --sub-item-box-bg-color: #1C232E;
  --bg-color-ui: #161A22;
  --bg-color-panel-base: #1b222c;
  --bg-color-panel-content: #272d37;
  --bg-color-modifier-panel-content: #1C232E;
  --bg-color-panel-section: #3F4855;
  --bg-color-content: rgba(15, 22, 33, 0.4);
  --bg-color-item: #272F3A;
  --bg-color-item-selected: #1C232E;
  --bg-color-panel-dark: #0E1520;
  --bg-color-panel-header-dark: #1C232E;
  --bg-color-panel-section-dark: #333B47;
  --bg-color-panel-group-item-selected: #0E1520;
  --border-color-panel-item: #0E1520;
  --bg-color-item-highlighted: #333B47;
  --bg-color-item-header: #3f454d;
  --bg-color-button-group: #0E1520;
  --blur-popup-color: rgba(8, 23, 52, 0.6);
  --bg-color-popup: #0f1621;
  --bg-color-popup-item-hover: #126EF8;
  --bg-color-popup-divider: rgba(255, 255, 255, 0.2);
  --bg-window: #272d37;
  --bg-hds-secondary: #1C232E;
  --bg-window-content: rgba(15, 22, 33, 0.4);
  --bg-white-window-content: #ffffff;
  --bg-global-adjustments: #272F3A;
  --bg-window-header: #272F3A;
  --bg-global-adjustments: rgba(255, 255, 255, 0.9);
  --bg-color-inline-box: rgba(15, 22, 33, 0.4);
  --bg-color-empty-thumbnail: #333B47;
  --border-color: rgba(255, 255, 255, 0.1);
  --border-color-highlighted: #CCD1DB;
  --bg-selected-item: var(--hds-blue-ondark-600-020);
  --main-button-color: #126EF8;
  --main-button-color-hover: #0D5ED9;
  --action-text-button: #5FB2FF;
  --action-text-button-hover: #85C4FF;
  --normal-button-bg-color: rgba(0, 10, 25, 0.8);
  --normal-button-bg-color-hover: rgba(0, 10, 25, 0.8);
  --button-primary-bg: linear-gradient(270deg, #1BE0D7 0%, #3675F5 100%);
  --button-primary-bg-hover: linear-gradient(90deg, #6B9CFF 0%, #65EBE2 100%);
  --button-primary-bg-active: linear-gradient(90deg, #8FB4FF 0%, #85EFE8 100%);
  --button-primary-bg-disabled: linear-gradient(270deg, rgba(27, 224, 215, 0.6) 0%, rgba(54, 117, 245, 0.6) 100%);
  --button-primary-color: rgba(0, 10, 26, 0.8);
  --button-primary-color-disabled: rgba(217, 231, 251, 0.45);
  --button-secondary-bg: rgba(223, 239, 250, 0.12);
  --button-secondary-bg-hover: rgba(195, 207, 223, 0.2);
  --button-secondary-bg-active: rgba(201, 214, 232, 0.26);
  --button-secondary-bg-disabled: rgba(223, 239, 250, 0.12);
  --button-secondary-color: rgba(242, 246, 252, 0.95);
  --button-secondary-color-disabled: rgba(217, 231, 251, 0.45);
  --button-danger-bg: #840B2E;
  --button-danger-bg-hover: #990C34;
  --button-danger-bg-active: #E94F63;
  --button-danger-bg-disabled: rgba(233, 79, 99, 0.3);
  --button-danger-color: #ffffff;
  --button-warn-bg: #92600C;
  --button-warn-bg-hover: #E9A32D;
  --button-warn-bg-active: #92600C;
  --button-warn-bg-disabled: rgba(237, 181, 29, 0.3);
  --button-warn-color: rgba(15, 24, 36, 0.9);
  --button-warn-color-active: #FFFFFF;
  --button-oncolor-primary-bg: #1C232E;
  --button-oncolor-primary-color: rgba(242, 246, 252, 0.95);
  --button-oncolor-primary-bg-disabled: #1C232E;
  --button-oncolor-primary-color-disabled: rgba(217, 231, 251, 0.45);
  --button-oncolor-primary-bg-hover: #272F3A;
  --button-oncolor-primary-bg-active: #333B47;
  --button-apply-modifiers-bg: #333B47;
  --button-oncolor-secondary-bg: rgba(225, 234, 254, 0.58);
  --button-oncolor-secondary-color: rgba(0, 10, 26, 0.8);
  --button-oncolor-secondary-bg-disabled: rgba(225, 234, 254, 0.58);
  --button-oncolor-secondary-color-disabled: rgba(18, 41, 84, 0.3);
  --button-oncolor-secondary-bg-hover: rgba(234, 241, 255, 0.7);
  --button-oncolor-secondary-bg-active: rgba(237, 242, 252, 0.85);
  --button-apply-modifiers-bg-hover: #3F4855;
  --button-apply-modifiers-bg-disabled: #272F3A;
  --background-object: rgba(223, 239, 250, 0.12);
  --background-object-hover: rgba(195, 207, 223, 0.2);
  --button-apply-modifiers-bg: rgba(255, 255, 255, 0.8);
  --button-apply-modifiers-bg-hover: rgba(255, 255, 255, 0.7);
  --button-apply-modifiers-bg-disabled: rgba(255, 255, 255, 0.9);
  --button-apply-modifiers-border: #4791FF;
  --button-apply-modifiers-border-hover: #5FB2FF;
  --button-apply-modifiers-border-disabled: rgba(18, 110, 248, 0.4);
  --colorblind-popup-divider: rgba(218, 239, 250, 0.12);
  --colorblind-popup-header-bg-color: #0f1621;
  --colorblind-popup-body-bg-color: #1C232E;
  --colorblind-popup-body-font-color: #B8BFCC;
  --colorblind-popup-button-color: rgba(218, 239, 250, 0.12);
  --input-border-color-focussed: #126EF8;
  --input-border-color-active: #8890A0;
  --input-border-color-hover: #B8BFCC;
  --input-border-color-inactive: #6A7483;
  --input-border-color-error: #D35566;
  --input-bg-color-active: #1C232E;
  --input-bg-color-inactive: #272F3A;
  --input-bg-color-inactive-lighter: rgba(255, 255, 255, 0.1);
  --hds-input-bg-color: #1C232E;
  --hds-input-border: rgba(225, 234, 254, 0.58);
  --hds-input-border-color-focussed: #15BDB9;
  --hds-input-border-color-hover: rgba(234, 241, 255, 0.7);
  --hds-input-caret-color: rgba(242, 246, 252, 0.95);
  --hds-input-placeholder-color: rgba(225, 234, 254, 0.58);
  --hds-input-color: rgba(242, 246, 252, 0.95);
  --input-inner-shadow-color: rgba(0, 0, 0, 0.1);
  --input-caret-color: #126EF8;
  --input-slider-bg-color: rgba(255, 255, 255, 0.1);
  --input-slider-color: #126EF8;
  --slider-input-border-color: #8890A0;
  --slider-input-selected-border-color: #8890A0;
  --color-picker-slider-grabber-color: #ffffff;
  --color-picker-bg-color: #3F4855;
  --color-picker-input-border-color: #8890A0;
  --color-picker-input-bg-color: #333B47;
  --color-picker-input-color: #E9ECF2;
  --dropdown-bg-color-opened: #0f1621;
  --dropdown-item-color: #0f1621;
  --dropdown-item-color-selected: #272d37;
  --dropdown-item-color-hover: #0f1621;
  --shadow-color: rgba(15, 22, 33, 0.4);
  --drop-shadow-gradient: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, transparent 100%);
  --selected-item-marker-color: #126EF8;
  --selection-color: #126EF8;
  --selection-gradient: rgba(18, 110, 248, 0.1);
  --region-specific-color: var(--hds-purple-onlight-200);
  --region-specific-color-hover: var(--hds-purple-onlight-400);
  --region-specific-color-bg-hover: rgba(179, 156, 201, 0.8);
  --region-specific-color-bg-pressed: rgba(179, 156, 201, 0.9);
  --region-specific-bg-color: rgba(179, 156, 201, 0.3);
  --region-specific-icon-color: rgba(179, 156, 201, 0.4);
  --jp-region-specific-bg-color: #e8e1ef;
  --notification-color: #D35566;
  --notification-error-color: #CF001A;
  --notification-warning-color: #FFBD09;
  --notification-overlay-bg-color: #3F4855;
  --notification-overlay-bg-hover-color: #535C6B;
  --notification-overlay2-bg-color: #1C232E;
  --component-highlight-color: #A4ACBA;
  --component-highlight-color-subdued: #535C6B;
  --graph-color: var(--hds-background-inverse);
  --graph-stop: var(--hds-background-inverse);
  --graph-bg: transparent;
  --graph-border: var(--hds-foreground-tertiary-hover);
  --graph-border-hover: var(--hds-foreground-tertiary-press);
  --dash-color: #ffffff;
  --scrollbar-color: #333B47;
  --scrollbar-color-active: rgba(255, 255, 255, 0.2);
  --scrollbar-color-hover: rgba(255, 255, 255, 0.4);
  --slider-grabber-outline-color: transparent;
  --slider-tick-color: rgba(255, 255, 255, 0.4);
  --chart-item-color-selected: #126EF8;
  --chart-item-color: rgba(255, 255, 255, 0.2);
  --chart-selection-bg: rgba(255, 255, 255, 0.05);
  --color-swatch-border: #A4ACBA;
  --inactive-color-swatch: #6A7483;
  --map-picker-color-border: rgba(255, 255, 255, 0.1);
  --map-picker-no-color-bg: rgba(15, 22, 33, 0.6);
  --code-string-color: #126EF8;
  --drop-target-color: #126EF8;
  --path-type-color-text: #000;
  --path-type-color-scheme: #000;
  --path-type-color-layer: rgba(255, 255, 255, 0.1);
  --path-type-color-condition: rgba(255, 255, 255, 0.2);
  --path-type-color-styleset: #2E468F;
  --path-type-color-style: #2C48A1;
  --path-type-color-attribute: rgba(15, 22, 33, 0.4);
  --path-type-color-definition: #52A3DB;
  --path-type-color-subcondition: #3A7BDB;
  --path-type-color-zoomlevel: #000;
  --path-type-color-height: #000;
  --image-picker-popup-color: #ffffff;
  --grid-placement-hover: rgba(255, 255, 255, 0.6);
  --grid-placement-selected: #126EF8;
  --grid-placement-selected-secondary: rgba(18, 110, 248, 0.8);
  --grid-placement-unselected: rgba(255, 255, 255, 0.1);
  --tag-pill-bg-color: #0f1621;
  --tag-pill-included: #00A870;
  --tag-pill-excluded: #D35566;
  --help-bg-color: #D468A0;
  --bg-dashboard-item: #0f1621;
  --tooltip-bg: var(--hds-background-inverse);
  --tooltip-text: var(--hds-inverse-primary);
  --menu-bar-bg: #1C232E;
  --menu-bar-bg-hover: rgba(223, 239, 250, 0.12);
  --menu-bar-item-description-color: #A4ACBA;
  --notification-info-bg: #15BDB9;
  --notification-warning-bg: #92600C;
  --notification-confirmation-bg: #0A7651;
  --notification-error-bg: #840B2E;
  --backgrounds-background-object: rgba(218, 239, 250, 0.12);
  --modifier-dot--default-state: var(--hds-accent);
  --modifier-dot--hover-state: var(--hds-aqua-onlight-500);
  --modifier-header-bg: var(--hds-aqua-ondark-200);
  --modifier-preset-border: #343c46;
  --modifier-overlay-panel-preset-bg: #20353E;
  --modifier-overlay-panel-create-apply-modifiers-bg: #1E2C36;
  --modifier-overlay-panel-create-modifiers-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  --modifier-overlay-panel-create-apply-modifiers-active-bg: rgba(95, 178, 255, 0.2);
  --modifier-overlay-panel-drag-drop-box-bg: rgba(64, 71, 82, 0.5);
  --modifier-overlay-active-bg: #4b556399;
  --modifier-overlay-active-header-bg: #535d6c66;
  --modifier-overlay-active-border: #5D6875;
  --modifier-overlay-header-bg: rgba(234, 240, 250, 0.03);
  --scheme-selector-bar-bg: #1f364d;
  --scheme-selector-shadow: 0px 0px 2px 0px var(--Dropshadow-overlay-dropshadow-layer-A-overlay, rgba(0, 0, 0, 0.36)), 0px 6px 6px 0px var(--Dropshadow-overlay-dropshadow-layer-B-overlay, rgba(0, 0, 0, 0.18)), 0px 0px 21px 0px var(--Dropshadow-overlay-dropshadow-layer-C-overlay, rgba(0, 0, 0, 0.15)), 0px 13px 13px 0px var(--Dropshadow-overlay-dropshadow-layer-D-overlay, rgba(0, 0, 0, 0.24));
  --quick-tour-highlight: var(--hds-action);
  --file-entity-bg-hover: var(--hds-blue-ondark-600-015);
  --file-entity-bg-selected: var(--hds-blue-ondark-600-020);
  --thumbnail-border-color: var(--hds-foreground-secondary);
}
.tooltip-container-light {
  --base-padding: 4px;
  --half-panel-margin: 1px;
  --panel-margin: 2px;
  --panel-body-border-radius: 4px;
  --panel-header-border-radius: 5px;
  --font-family: "Fira Regular";
  --font-family-subdued: "Fira Light";
  --font-family-emphasized: "Fira Medium";
  --text-size-dashboard-title: 18px;
  --text-size-dashboard-section-title: 16px;
  --text-size-dashboard-description: 16px;
  --text-size-big: 16px;
  --text-size-big-button: 14px;
  --text-size-big-input: 14px;
  --text-size-menu: 12px;
  --text-size-dialog: 14px;
  --text-size: 12px;
  --text-size-tiny: 10px;
  --text-size-super-tiny: 8px;
  --text-size-drag-and-drop-title: 20px;
  --text-size-dialog-big: 18px;
  --line-height-tiny: 12px;
  --line-height-menu: 16px;
  --line-height: 20px;
  --header-line-height: 24px;
  --line-height-dashboard-title: 26px;
  --line-height-dashboard-section-title: 24px;
  --line-height-dashboard-description: 24px;
  --line-height-drag-and-drop-title: 24px;
  --line-height-dialog-header: 16px;
  --line-height-dialog-content: 20px;
  --divider-thickness: 1px;
  --divider-spacing: 0px;
  --divider-padding: calc(4 * var(--base-padding));
  --popup-border-radius: 4px;
  --popup-border-radius-large: 8px;
  --popup-item-height-large: 40px;
  --popup-menu-width: 200px;
  --popup-footer-height: 64px;
  --popup-header-height: 64px;
  --popup-padding-h: 24px;
  --popup-padding-v: 20px;
  --white-popup-max-height: 280px;
  --popup-description-height: 200px;
  --popup-item-selection-height: 2px;
  --popup-image-width: 400px;
  --popup-image-height: 175px;
  --border-size: 1px;
  --border-size-highlighted: 2px;
  --border-radius: 4px;
  --button-icon-spacing: 8px;
  --input-height: 22px;
  --input-width: 93px;
  --number-input-width: var(--input-width);
  --file-input-width: var(--input-width);
  --dash-input-width: 125px;
  --input-prefix-width: 6px;
  --input-prefix-left-padding: 5px;
  --input-border-radius: 2px;
  --input-border-size: 1px;
  --input-padding: 4px;
  --input-icon-padding: 6px;
  --input-disabled-opacity: 0.5;
  --boolean-input-height: 16px;
  --sliding-toggle-height: 20px;
  --sliding-toggle-width: 40px;
  --input-animation-duration: 300ms;
  --input-animation-duration-quick: 100ms;
  --item-border-radius: 2px;
  --reduced-item-height: 28px;
  --main-item-height: 35px;
  --large-main-item-height: 48px;
  --icon-button-group-height: 28px;
  --icon-box-size: 16px;
  --icon-text-inline-size: var(--text-size);
  --icon-header-size: var(--header-line-height);
  --icon-big-size: 40px;
  --icon-padding-size: calc(2 * var(--base-padding));
  --tooltip-text-size: 13px;
  --tooltip-line-height: 18px;
  --tooltip-nibble-size: 6px;
  --tooltip-nibble-indentation: 18px;
  --tooltip-width: 200px;
  --tooltip-width-wide: 320px;
  --selected-item-selection-bar-width: 3px;
  --selected-group-item-selection-bar-width: 4px;
  --inactive-item-opacity: 0.4;
  --graph-width: 2px;
  --zoomlevel-line-width: 1px;
  --collapsible-margin: 12px;
  --scrollbar-width: 8px;
  --scrollbar-expanded-grabber-width: 6px;
  --scrollbar-grabber-width: 4px;
  --map-overlay-margin: 12px;
  --map-overlay-item-size: 40px;
  --menubar-size: 48px;
  --menubar-title-width: 300px;
  --menubar-select-menu-width: 150px;
  --menubar-icon-size: 32px;
  --menubar-lang-dropdown-height: 400px;
  --menubar-notification-dot-size: 8px;
  --menubar-scheme-selection-item-label-width: 200px;
  --search-field-height: 25px;
  --panel-small-width: 230px;
  --panel-width: 300px;
  --panel-large-width: 360px;
  --panel-tab-height: 25px;
  --panel-empty-content-top-offset: 200px;
  --panel-header-button-size: 20px;
  --slider-width: 4px;
  --slider-length: 82px;
  --slider-grabber-size: 14px;
  --slider-tick-length: 2px;
  --slider-tick-width: 1px;
  --slider-tick-offset: 1px;
  --navigation-bar-size: 40px;
  --drag-item-divider-height: 1px;
  --drag-item-divider-end-size: 5px;
  --notification-container-height: 32px;
  --notification-toast-height: 56px;
  --notification-animation-curve: cubic-bezier(0.7, 0, 0.5, 1.5);
  --notification-animation-duration: 200ms;
  --color-picker-height: 150px;
  --color-picker-crosshair-size: 15px;
  --color-picker-input-width: 70px;
  --color-picker-slider-track-height: 8px;
  --color-picker-slider-handle-size: 12px;
  --color-picker-container-width: 320px;
  --color-picker-eyedrop-size: 24px;
  --icon-picker-container-width: 254px;
  --icon-picker-container-height: 318px;
  --icon-picker-icon-size: 24px;
  --swatch-height: 22px;
  --swatch-width: 50px;
  --ga-blend-mode-btn-width: 52px;
  --basic-template-thumbnail-height: 40px;
  --basic-template-thumbnail-width: 56px;
  --basic-template-thumbnail-border: 2px;
  --basic-template-thumbnail-border-offset: 1px;
  --window-header-height: 73px;
  --extra-small-window-width: 468px;
  --extra-small-window-height: 212px;
  --small-window-width: 460px;
  --small-window-height: 280px;
  --medium-window-width: 380px;
  --medium-window-height: 320px;
  --big-window-width: 640px;
  --big-window-height: 520px;
  --wide-big-window-width: 720px;
  --wide-big-window-height: 520px;
  --wide-extra-big-window-width: 950px;
  --wide-extra-big-window-height: 520px;
  --fluid-window-height: calc(100vh - 200px);
  --fluid-window-width: calc(100vw - 512px);
  --search-bar-height: 50px;
  --icon-window-drag-area-height: 310px;
  --medium-area-height: 100px;
  --big-area-height: 180px;
  --extra-big-area-height: 320px;
  --icon-window-area-height: 393px;
  --drop-target-outline-size: 1px;
  --drop-target-outline-offset: 1px;
  --image-picker-crosshair-size: 8px;
  --image-picker-border-size: 2px;
  --icon-window-side-bar-width: 207px;
  --icon-window-icon-entity-width: 77px;
  --icon-window-icon-entity-height: 88px;
  --icon-window-icon-entity-background-size: 48px;
  --icon-window-icon-entity-background-size-small: 24px;
  --icon-window-change-view-header: 32px;
  --icon-window-change-item-text-width: 100px;
  --icon-window-change-item-indentation: 53px;
  --icon-window-resource-view-header: 64px;
  --icon-window-name-pill-container-width: 240px;
  --icon-window-name-pill-border-radius: 16px;
  --icon-window-item-border-width: 2px;
  --icon-window-notification-height: 32px;
  --medium-button-height: 24px;
  --button-height: 32px;
  --large-button-height: 40px;
  --dashboard-item-width: 340px;
  --dashboard-item-height: 160px;
  --dashboard-thumbnail-height: 176px;
  --dashboard-input-height: 32px;
  --component-highlight-thickness: 2px;
  --modifier-group-item-indentation: 24px;
  --region-specific-bar-width: 2px;
  --region-specific-bar-height: 16px;
  --modifier-affected-specific-margin: -20px;
  --modifier-affected-specific-tooltip-width: 296px;
  --tooltip-content-max-width: 225px;
  --modifier-overlay-panel-header-height: 38px;
  --drag-item-divider: #126EF8;
  --drag-item-highlight: rgba(15, 22, 33, 0.1);
  --font-color-highlighted: #126EF8;
  --font-color-highlighted-emphasized: #d0e2fe;
  --font-color-emphasized: #0E1520;
  --font-color-active: #1C232E;
  --font-color: #272F3A;
  --font-color-subdued: #535C6B;
  --font-color-hint: var(--hds-gray-600);
  --font-color-disabled: #8890A0;
  --main-button-font-color: #272F3A;
  --main-button-font-color-emphasized: #0f1621;
  --font-color-menu: #535C6B;
  --font-color-tooltip: #1C232E;
  --font-color-group-item: #1C232E;
  --font-color-dialog: rgba(16, 23, 35, 0.95);
  --font-color-oncolor: #ffffff;
  --font-color-oncolor-hover: #ffffff;
  --font-color-oncolor-subdued: rgba(225, 234, 254, 0.58);
  --font-color-panel-notification: #E9ECF2;
  --font-color-inactive-item-text: #333B47;
  --font-color-item-text-hover: #0f1621;
  --font-color-hds-tertiary: rgba(34, 54, 89, 0.41);
  --font-color-hds-tertiary-hover: rgba(19, 35, 67, 0.5);
  --font-color-hds-tertiary-disabled: rgba(0, 26, 77, 0.2);
  --font-color-body: #3F4855;
  --font-color-primary: rgba(16, 23, 35, 0.95);
  --font-color-primary-disabled: rgba(0, 26, 77, 0.2);
  --font-color-secondary: rgba(7, 23, 49, 0.6);
  --font-color-secondary-disabled: rgba(0, 26, 77, 0.2);
  --header-icon-color: #535C6B;
  --active-icon-color: #1C232E;
  --active-icon-color-inverted: #ffffff;
  --inactive-icon-color: #6A7483;
  --disabled-item-group-text-color: #6A7483;
  --hint-icon-color: #6A7483;
  --disabled-icon-color: #8890A0;
  --action-icon-color: #535C6B;
  --disabled-action-icon-color: #8890A0;
  --error-icon-color: #CF001A;
  --warning-icon-color: #9E6400;
  --warning-icon-color-hover: #FAAA1E;
  --inactive-icon-border-color: #A4ACBA;
  --slider-input-border-color: #A4ACBA;
  --panel-header-button-bg: #f3f3f4;
  --panel-tab-bg-unselected: rgba(255, 255, 255, 0.8);
  --divider-color: rgba(255, 255, 255, 0.2);
  --divider-color-ondark: rgba(15, 22, 33, 0.2);
  --sub-item-box-border-color: #E9ECF2;
  --sub-item-box-bg-color: #CCD1DB;
  --bg-color-ui: #f3f3f4;
  --bg-color-panel-base: #ffffff;
  --bg-color-panel-content: #e7e8e9;
  --bg-color-modifier-panel-content: #ffffff;
  --bg-color-panel-section: #ffffff;
  --bg-color-content: rgba(255, 255, 255, 0.4);
  --bg-color-panel-dark: #ffffff;
  --bg-color-panel-header-dark: #ffffff;
  --bg-color-panel-group-item-selected: #ffffff;
  --border-color-panel-item: #ffffff;
  --bg-color-item: rgba(255, 255, 255, 0.9);
  --bg-color-item-selected: rgba(255, 255, 255, 0.95);
  --bg-color-item-highlighted: rgba(255, 255, 255, 0.6);
  --bg-color-item-header: #cfd0d3;
  --bg-color-button-group: #f3f3f4;
  --blur-popup-color: rgba(8, 23, 52, 0.6);
  --bg-color-popup: #ffffff;
  --bg-color-popup-item-hover: #ffffff;
  --bg-color-popup-divider: rgba(15, 55, 115, 0.1);
  --bg-window: #ffffff;
  --bg-hds-secondary: #ffffff;
  --bg-window-content: rgba(255, 255, 255, 0.4);
  --bg-window-header: #e7e8e9;
  --bg-global-adjustments: rgba(255, 255, 255, 0.9);
  --bg-color-inline-box: rgba(255, 255, 255, 0.4);
  --border-color: rgba(15, 22, 33, 0.1);
  --border-color-highlighted: #1C232E;
  --bg-selected-item: var(--hds-blue-onlight-400-020);
  --main-button-color: #126EF8;
  --main-button-color-hover: #0D5ED9;
  --action-text-button: #126EF8;
  --action-text-button-hover: #0D5ED9;
  --normal-button-bg-color: rgba(255, 255, 255, 0.8);
  --normal-button-bg-color-hover: rgba(255, 255, 255, 0.95);
  --button-primary-bg: linear-gradient(270deg, #65EBE2 0%, #6B9CFF 100%);
  --button-primary-bg-hover: linear-gradient(90deg, #3675F5 0%, #1BE0D7 100%);
  --button-primary-bg-active: linear-gradient(90deg, #1854CC 0%, #08CCC3 100%);
  --button-primary-bg-disabled: linear-gradient(270deg, rgba(125, 230, 225, 0.4) 0%, rgba(128, 170, 255, 0.4) 100%);
  --button-primary-color: rgba(16, 25, 37, 0.9);
  --button-primary-color-disabled: rgba(18, 41, 84, 0.3);
  --button-secondary-bg: rgba(0, 55, 141, 0.05);
  --button-secondary-bg-hover: rgba(15, 55, 115, 0.1);
  --button-secondary-bg-active: rgba(30, 43, 70, 0.6);
  --button-secondary-bg-disabled: rgba(0, 55, 141, 0.05);
  --button-secondary-color: rgba(16, 23, 35, 0.95);
  --button-secondary-color-disabled: rgba(18, 41, 84, 0.3);
  --button-danger-bg: #CF001A;
  --button-danger-bg-hover: #A5002F;
  --button-danger-bg-active: #8F0029;
  --button-danger-bg-disabled: rgba(207, 0, 26, 0.3);
  --button-danger-color: #ffffff;
  --button-warn-bg: #FFBD09;
  --button-warn-bg-hover: #FAAA1E;
  --button-warn-bg-active: #9E6400;
  --button-warn-bg-disabled: rgba(255, 190, 10, 0.3);
  --button-warn-color: rgba(15, 24, 36, 0.9);
  --button-warn-color-active: #FFFFFF;
  --button-oncolor-primary-bg: #ffffff;
  --button-oncolor-primary-color: rgba(16, 23, 35, 0.95);
  --button-oncolor-primary-bg-disabled: #ffffff;
  --button-oncolor-primary-color-disabled: rgba(18, 41, 84, 0.3);
  --button-oncolor-primary-bg-hover: #F2F5F9;
  --button-oncolor-primary-bg-active: #DADFE7;
  --button-oncolor-secondary-bg: rgba(34, 54, 89, 0.41);
  --button-oncolor-secondary-color: #ffffff;
  --button-oncolor-secondary-bg-disabled: rgba(34, 54, 89, 0.41);
  --button-oncolor-secondary-color-disabled: rgba(225, 234, 254, 0.58);
  --button-oncolor-secondary-bg-hover: rgba(19, 35, 67, 0.5);
  --button-oncolor-secondary-bg-active: rgba(7, 23, 49, 0.6);
  --background-object: rgba(0, 55, 141, 0.05);
  --background-object-hover: rgba(15, 55, 115, 0.1);
  --button-apply-modifiers-bg: rgba(255, 255, 255, 0.8);
  --button-apply-modifiers-bg-hover: rgba(255, 255, 255, 0.7);
  --button-apply-modifiers-bg-disabled: rgba(255, 255, 255, 0.9);
  --button-apply-modifiers-border: #4791FF;
  --button-apply-modifiers-border-hover: #5FB2FF;
  --button-apply-modifiers-border-disabled: rgba(18, 110, 248, 0.4);
  --colorblind-popup-divider: rgba(15, 54, 113, 0.1);
  --colorblind-popup-header-bg-color: #ffffff;
  --colorblind-popup-body-bg-color: #F2F5F9;
  --colorblind-popup-body-font-color: #535C6B;
  --colorblind-popup-button-color: rgba(15, 54, 113, 0.1);
  --input-border-color-focussed: #126EF8;
  --input-border-color-active: #0f1621;
  --input-border-color-hover: rgba(15, 22, 33, 0.3);
  --input-border-color-inactive: #6A7483;
  --input-border-color-error: #D35566;
  --input-bg-color-active: #ffffff;
  --input-bg-color-inactive: rgba(255, 255, 255, 0.3);
  --input-bg-color-inactive-lighter: rgba(255, 255, 255, 0.5);
  --hds-input-bg-color: #ffffff;
  --hds-input-border: rgba(34, 54, 89, 0.41);
  --hds-input-border-color-focussed: #0BC7C2;
  --hds-input-border-color-hover: rgba(19, 35, 67, 0.5);
  --hds-input-caret-color: rgba(16, 23, 35, 0.95);
  --hds-input-placeholder-color: rgba(34, 54, 89, 0.41);
  --hds-input-color: rgba(16, 23, 35, 0.95);
  --input-inner-shadow-color: rgba(0, 0, 0, 0.1);
  --input-caret-color: #126EF8;
  --input-slider-bg-color: rgba(15, 22, 33, 0.1);
  --input-slider-color: #126EF8;
  --color-picker-slider-grabber-color: #ffffff;
  --color-picker-bg-color: #3F4855;
  --color-picker-input-border-color: #8890A0;
  --color-picker-input-bg-color: #1C232E;
  --color-picker-input-color: #E9ECF2;
  --dropdown-bg-color-opened: #e7e8e9;
  --dropdown-item-color: #ffffff;
  --dropdown-item-color-selected: #e7e8e9;
  --dropdown-item-color-hover: #ffffff;
  --shadow-color: rgba(15, 22, 33, 0.4);
  --drop-shadow-gradient: linear-gradient(to bottom, rgba(233, 236, 242, 0.6) 0%, transparent 100%);
  --selected-item-marker-color: #126EF8;
  --selection-color: #126EF8;
  --selection-gradient: rgba(18, 110, 248, 0.1);
  --region-specific-color: var(--hds-purple-onlight-400);
  --region-specific-color-hover: var(--hds-purple-onlight-200);
  --region-specific-color-bg-hover: rgba(140, 107, 174, 0.8);
  --region-specific-color-bg-pressed: rgba(140, 107, 174, 0.9);
  --region-specific-icon-color: rgba(247, 250, 253, 0.2);
  --region-specific-bg-color: rgba(179, 156, 201, 0.3);
  --jp-region-specific-bg-color: #49475d;
  --notification-color: #D35566;
  --notification-error-color: #CF001A;
  --notification-warning-color: #FFBD09;
  --notification-overlay-bg-color: #3F4855;
  --notification-overlay-bg-hover-color: #535C6B;
  --notification-overlay2-bg-color: #1C232E;
  --component-highlight-color: #6A7483;
  --component-highlight-color-subdued: #A4ACBA;
  --graph-color: var(--hds-background-inverse);
  --graph-stop: var(--hds-background-inverse);
  --graph-bg: var(--hds-background-primary);
  --graph-border: var(--hds-foreground-tertiary-hover);
  --graph-border-hover: var(--hds-foreground-tertiary-press);
  --dash-color: #0f1621;
  --scrollbar-color: rgba(15, 22, 33, 0.2);
  --scrollbar-color-active: rgba(15, 22, 33, 0.2);
  --scrollbar-color-hover: rgba(15, 22, 33, 0.4);
  --slider-grabber-outline-color: rgba(218, 239, 250, 0.12);
  --slider-tick-color: rgba(15, 22, 33, 0.4);
  --chart-item-color-selected: #126EF8;
  --chart-item-color: rgba(15, 22, 33, 0.2);
  --chart-selection-bg: rgba(15, 22, 33, 0.05);
  --color-swatch-border: #272F3A;
  --inactive-color-swatch: #6A7483;
  --hover-inactive-color-swatch: #A4ACBA;
  --map-picker-color-border: rgba(15, 22, 33, 0.1);
  --map-picker-no-color-bg: rgba(255, 255, 255, 0.6);
  --code-string-color: #126EF8;
  --drop-target-color: #126EF8;
  --path-type-color-text: #000;
  --path-type-color-scheme: #000;
  --path-type-color-layer: rgba(255, 255, 255, 0.1);
  --path-type-color-condition: rgba(255, 255, 255, 0.2);
  --path-type-color-styleset: #2E468F;
  --path-type-color-style: #2C48A1;
  --path-type-color-attribute: rgba(15, 22, 33, 0.4);
  --path-type-color-definition: #52A3DB;
  --path-type-color-subcondition: #3A7BDB;
  --path-type-color-zoomlevel: #000;
  --path-type-color-height: #000;
  --image-picker-popup-color: #ffffff;
  --grid-placement-hover: rgba(15, 22, 33, 0.6);
  --grid-placement-selected: #126EF8;
  --grid-placement-selected-secondary: rgba(18, 110, 248, 0.8);
  --grid-placement-unselected: rgba(15, 22, 33, 0.1);
  --tag-pill-bg-color: #ffffff;
  --tag-pill-included: #00C78F;
  --tag-pill-excluded: #EC610E;
  --help-bg-color: #D468A0;
  --bg-dashboard-item: #ffffff;
  --tooltip-bg: var(--hds-background-inverse);
  --tooltip-text: var(--hds-inverse-primary);
  --menu-bar-bg: rgba(255, 255, 255, 0.95);
  --menu-bar-bg-hover: rgba(0, 55, 141, 0.05);
  --menu-bar-item-description-color: #A4ACBA;
  --notification-info-bg: #15BDB9;
  --notification-warning-bg: #92600C;
  --notification-confirmation-bg: #0A7651;
  --notification-error-bg: #840B2E;
  --backgrounds-background-object: rgba(218, 239, 250, 0.12);
  --modifier-header-bg: var(--hds-aqua-onlight-400);
  --modifier-preset-border: #e7ebf1;
  --modifier-dot--default-state: var(--hds-accent);
  --modifier-dot--hover-state: var(--hds-aqua-onlight-500);
  --modifier-overlay-panel-preset-bg: #EDFBFA;
  --modifier-overlay-panel-create-apply-modifiers-bg: #F6FDFD;
  --modifier-overlay-panel-create-modifiers-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.08);
  --modifier-overlay-panel-create-apply-modifiers-active-bg: rgba(95, 178, 255, 0.2);
  --modifier-overlay-panel-drag-drop-box-bg: rgba(64, 71, 82, 0.5);
  --modifier-overlay-active-bg: #e3e6eb99;
  --modifier-overlay-active-header-bg: #dddfe466;
  --modifier-overlay-active-border: #CED4DF;
  --modifier-overlay-header-bg: #00378f08;
  --scheme-selector-bar-bg: #dae6fa;
  --scheme-selector-shadow: 0px 0px 2px 0px var(--Dropshadow-overlay-dropshadow-layer-A-overlay, rgba(0, 25, 75, 0.12)), 0px 6px 6px 0px var(--Dropshadow-overlay-dropshadow-layer-B-overlay, rgba(0, 25, 75, 0.06)), 0px 0px 21px 0px var(--Dropshadow-overlay-dropshadow-layer-C-overlay, rgba(0, 25, 75, 0.05)), 0px 13px 13px 0px var(--Dropshadow-overlay-dropshadow-layer-D-overlay, rgba(0, 25, 75, 0.08));
  --quick-tour-highlight: var(--hds-blue-ondark-400);
  --file-entity-bg-hover: var(--hds-blue-onlight-400-010);
  --file-entity-bg-selected: var(--hds-blue-onlight-400-020);
  --thumbnail-border-color: var(--hds-foreground-divider);
}
.tooltip-content {
  font-family: var(--font-family);
  font-size: var(--text-size);
  font-style: normal;
  font-weight: 400;
  line-height: var(--line-height-menu);
  letter-spacing: -0.024px;
  color: var(--font-color-subdued);
  background-color: var(--tooltip-bg);
  padding: var(--hds-spacing-2) var(--hds-spacing-4);
  color: var(--tooltip-text);
  --icon-color: var(--tooltip-text);
  border-radius: var(--border-radius);
  z-index: 1;
  position: relative;
  max-width: calc(calc(2 * var(--base-padding)) * 32);
  min-width: calc(2 * var(--base-padding));
  text-wrap: pretty;
}
.tooltip-bottom {
  display: flex;
  flex-direction: column-reverse;
}
.tooltip-left {
  display: flex;
  flex-direction: row;
}
.tooltip-top {
  display: flex;
  flex-direction: column;
}
.tooltip-right {
  display: flex;
  flex-direction: row-reverse;
}
.popover-bottom .tooltip-auto-position {
  filter: var(--hds-overlay);
  display: flex;
  flex-direction: column-reverse;
  margin-top: var(--tooltip-nibble-size);
}
.popover-bottom .tooltip-auto-position .tooltip-nibble {
  transform: rotate(45deg);
  position: absolute;
  top: calc(-1 * calc(var(--hds-spacing-1px) * 2));
  right: unset;
  bottom: unset;
  left: calc(50% - var(--hds-spacing-2));
}
.popover-left .tooltip-auto-position {
  filter: var(--hds-overlay);
  display: flex;
  flex-direction: row;
  margin-right: var(--tooltip-nibble-size);
}
.popover-left .tooltip-auto-position .tooltip-nibble {
  transform: rotate(45deg);
  position: absolute;
  top: calc(50% - var(--hds-spacing-2));
  right: calc(-1 * calc(var(--hds-spacing-1px) * 2));
  bottom: unset;
  left: unset;
}
.popover-top .tooltip-auto-position {
  filter: var(--hds-overlay);
  display: flex;
  flex-direction: column;
  margin-bottom: var(--tooltip-nibble-size);
}
.popover-top .tooltip-auto-position .tooltip-nibble {
  transform: rotate(45deg);
  position: absolute;
  top: unset;
  right: unset;
  bottom: calc(-1 * calc(var(--hds-spacing-1px) * 2));
  left: calc(50% - var(--hds-spacing-2));
}
.popover-right .tooltip-auto-position {
  filter: var(--hds-overlay);
  display: flex;
  flex-direction: row-reverse;
  margin-left: calc(var(--tooltip-nibble-size));
}
.popover-right .tooltip-auto-position .tooltip-nibble {
  transform: rotate(45deg);
  position: absolute;
  top: calc(50% - var(--hds-spacing-2));
  right: unset;
  bottom: unset;
  left: calc(-1 * calc(var(--hds-spacing-1px) * 2));
}
.popover-start .tooltip-container-expanding,
.popover-start .tooltip-container {
  margin-left: calc((var(--container-width)/2) - var(--tooltip-nibble-size) - var(--tooltip-nibble-indentation));
}
.tooltip-title {
  font-family: var(--font-family-emphasized);
  color: var(--font-color-emphasized);
  --icon-color: var(--font-color-emphasized);
  text-transform: uppercase;
}
.tooltip-description:not(:first-child) {
  margin-top: var(--base-padding);
}
.tooltip-description .base-icon {
  margin-bottom: 2.5px;
}
.autoscroll-text {
  white-space: nowrap;
}
.dropdown-placeholder {
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height);
  color: var(--font-color-hint);
  font-style: normal;
  margin: 0px calc(2 * var(--base-padding));
}
.dropdown-container {
  position: relative;
}
.dropdown-list-opened {
  box-shadow: 0 1px 4px 0 var(--shadow-color);
  position: absolute;
  display: flex;
  flex-direction: column;
  width: 100%;
  z-index: 7;
  background-color: var(--dropdown-bg-color-opened);
}
.dropdown-list-opened::-webkit-scrollbar {
  width: var(--scrollbar-expanded-grabber-width);
}
.dropdown-list-opened::-webkit-scrollbar-track {
  background-color: inherit;
  border-radius: inherit;
}
.dropdown-list-opened::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-color-hover);
  border-radius: calc(var(--scrollbar-expanded-grabber-width) / 2);
}
.dropdown-list-closed {
  display: none;
}
.dropdown-arrow {
  font-size: var(--icon-text-inline-size);
  width: var(--icon-box-size);
  height: var(--icon-box-size);
  line-height: var(--icon-box-size);
  text-align: center;
  color: var(--font-color);
}
.dropdown-input-disabled {
  cursor: pointer;
  user-select: none;
  background-color: transparent;
  border: var(--input-border-size) solid var(--input-border-color-active);
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-tiny);
  color: var(--font-color-active);
  caret-color: var(--input-caret-color);
  height: var(--input-height);
  box-sizing: border-box;
  width: var(--number-input-width);
  max-width: var(--number-input-width);
  height: var(--swatch-height);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: var(--input-border-radius);
  padding: 0px var(--base-padding);
  opacity: var(--input-disabled-opacity);
  pointer-events: none;
  cursor: default;
}
.dropdown-input-disabled input[type="number"],
.dropdown-input-disabled input[type="text"] {
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-tiny);
  color: var(--font-color-active);
  caret-color: var(--input-caret-color);
}
.dropdown-input-disabled:hover {
  border-color: var(--input-border-color-hover);
}
.dropdown-input-disabled:focus-within {
  border: var(--input-border-size) solid var(--input-border-color-focussed);
  background-color: transparent;
  color: var(--font-color-emphasized);
}
.dropdown-input-disabled input[type="number"]:focus,
.dropdown-input-disabled input[type="text"]:focus {
  border: none;
}
.dropdown-input-opened {
  cursor: pointer;
  user-select: none;
  background-color: transparent;
  border: var(--input-border-size) solid var(--input-border-color-active);
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-tiny);
  color: var(--font-color-active);
  caret-color: var(--input-caret-color);
  height: var(--input-height);
  box-sizing: border-box;
  width: var(--number-input-width);
  max-width: var(--number-input-width);
  height: var(--swatch-height);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: var(--input-border-radius);
  padding: 0px var(--base-padding);
  border: var(--border-size) solid var(--main-button-color);
  margin: calc(-1 * var(--border-size));
}
.dropdown-input-opened input[type="number"],
.dropdown-input-opened input[type="text"] {
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-tiny);
  color: var(--font-color-active);
  caret-color: var(--input-caret-color);
}
.dropdown-input-opened:hover {
  border-color: var(--input-border-color-hover);
}
.dropdown-input-opened:focus-within {
  border: var(--input-border-size) solid var(--input-border-color-focussed);
  background-color: transparent;
  color: var(--font-color-emphasized);
}
.dropdown-input-opened input[type="number"]:focus,
.dropdown-input-opened input[type="text"]:focus {
  border: none;
}
.dropdown-input-closed {
  cursor: pointer;
  user-select: none;
  background-color: transparent;
  border: var(--input-border-size) solid var(--input-border-color-active);
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-tiny);
  color: var(--font-color-active);
  caret-color: var(--input-caret-color);
  height: var(--input-height);
  box-sizing: border-box;
  width: var(--number-input-width);
  max-width: var(--number-input-width);
  height: var(--swatch-height);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: var(--input-border-radius);
  padding: 0px var(--base-padding);
}
.dropdown-input-closed input[type="number"],
.dropdown-input-closed input[type="text"] {
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-tiny);
  color: var(--font-color-active);
  caret-color: var(--input-caret-color);
}
.dropdown-input-closed:hover {
  border-color: var(--input-border-color-hover);
}
.dropdown-input-closed:focus-within {
  border: var(--input-border-size) solid var(--input-border-color-focussed);
  background-color: transparent;
  color: var(--font-color-emphasized);
}
.dropdown-input-closed input[type="number"]:focus,
.dropdown-input-closed input[type="text"]:focus {
  border: none;
}
.dropdown-input-detect {
  cursor: pointer;
  user-select: none;
  background-color: transparent;
  border: var(--input-border-size) solid var(--input-border-color-active);
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-tiny);
  color: var(--font-color-active);
  caret-color: var(--input-caret-color);
  height: var(--input-height);
  box-sizing: border-box;
  width: var(--number-input-width);
  max-width: var(--number-input-width);
  height: var(--swatch-height);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: var(--input-border-radius);
  padding: 0px var(--base-padding);
}
.dropdown-input-detect input[type="number"],
.dropdown-input-detect input[type="text"] {
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-tiny);
  color: var(--font-color-active);
  caret-color: var(--input-caret-color);
}
.dropdown-input-detect:hover {
  border-color: var(--input-border-color-hover);
}
.dropdown-input-detect:focus-within {
  border: var(--input-border-size) solid var(--input-border-color-focussed);
  background-color: transparent;
  color: var(--font-color-emphasized);
}
.dropdown-input-detect input[type="number"]:focus,
.dropdown-input-detect input[type="text"]:focus {
  border: none;
}
.popover-container-opened .dropdown-input-detect {
  border: var(--border-size) solid var(--main-button-color);
  margin: calc(-1 * var(--border-size));
}
.dropdown-selected-item {
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-tiny);
  color: var(--font-color-active);
  caret-color: var(--input-caret-color);
  overflow: hidden;
  width: 1px;
  flex-grow: 1;
}
.dropdown-option {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  white-space: nowrap;
  background-color: var(--dropdown-item-color);
  margin-top: 1px;
  border-radius: var(--item-border-radius);
  padding: 0px var(--base-padding);
}
.dropdown-option-selected {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  white-space: nowrap;
  background-color: var(--dropdown-item-color);
  margin-top: 1px;
  border-radius: var(--item-border-radius);
  padding: 0px var(--base-padding);
  background-color: var(--dropdown-item-color-selected);
}
.dropdown-opened-icon {
  display: none;
}
.popover-container-opened .dropdown-opened-icon {
  display: initial;
}
.popover-container-opened .dropdown-closed-icon {
  display: none;
}
.hds-dropdown-input-disabled {
  caret-color: var(--hds-input-caret-color);
  box-sizing: border-box;
  border-radius: var(--border-radius);
  border: var(--border-size) solid var(--hds-input-border);
  background-color: var(--hds-input-bg-color);
  color: var(--hds-input-color);
  font-family: var(--font-family);
  font-size: var(--text-size-dialog);
  font-style: normal;
  font-weight: 400;
  line-height: var(--line-height);
  color: var(--font-color-secondary);
  --icon-color: var(--font-color-secondary);
  height: var(--medium-button-height);
  padding: 0px var(--base-padding) 0px calc(2 * var(--base-padding));
}
.hds-dropdown-input-disabled::placeholder {
  color: var(--hds-input-placeholder-color);
}
.hds-dropdown-input-disabled:focus {
  border: var(--border-size-highlighted) solid var(--hds-input-border-color-focussed);
}
.hds-dropdown-input-disabled:hover:not(:focus) {
  border-color: var(--hds-input-border-color-hover);
}
.hds-dropdown-input-disabled:focus {
  padding-left: calc(calc(2 * var(--base-padding)) - (var(--border-size-highlighted) - var(--border-size)));
}
.hds-dropdown-input-closed {
  caret-color: var(--hds-input-caret-color);
  box-sizing: border-box;
  border-radius: var(--border-radius);
  border: var(--border-size) solid var(--hds-input-border);
  background-color: var(--hds-input-bg-color);
  color: var(--hds-input-color);
  font-family: var(--font-family);
  font-size: var(--text-size-dialog);
  font-style: normal;
  font-weight: 400;
  line-height: var(--line-height);
  color: var(--font-color-secondary);
  --icon-color: var(--font-color-secondary);
  height: var(--medium-button-height);
  padding: 0px var(--base-padding) 0px calc(2 * var(--base-padding));
  display: flex;
  align-items: center;
}
.hds-dropdown-input-closed::placeholder {
  color: var(--hds-input-placeholder-color);
}
.hds-dropdown-input-closed:focus {
  border: var(--border-size-highlighted) solid var(--hds-input-border-color-focussed);
}
.hds-dropdown-input-closed:hover:not(:focus) {
  border-color: var(--hds-input-border-color-hover);
}
.hds-dropdown-input-closed:focus {
  padding-left: calc(calc(2 * var(--base-padding)) - (var(--border-size-highlighted) - var(--border-size)));
}
.hds-dropdown-input-opened {
  caret-color: var(--hds-input-caret-color);
  box-sizing: border-box;
  border-radius: var(--border-radius);
  border: var(--border-size) solid var(--hds-input-border);
  background-color: var(--hds-input-bg-color);
  color: var(--hds-input-color);
  font-family: var(--font-family);
  font-size: var(--text-size-dialog);
  font-style: normal;
  font-weight: 400;
  line-height: var(--line-height);
  color: var(--font-color-secondary);
  --icon-color: var(--font-color-secondary);
  height: var(--medium-button-height);
  padding: 0px var(--base-padding) 0px calc(2 * var(--base-padding));
  display: flex;
  align-items: center;
  border: var(--border-size-highlighted) solid var(--hds-input-border-color-focussed);
}
.hds-dropdown-input-opened::placeholder {
  color: var(--hds-input-placeholder-color);
}
.hds-dropdown-input-opened:focus {
  border: var(--border-size-highlighted) solid var(--hds-input-border-color-focussed);
}
.hds-dropdown-input-opened:hover:not(:focus) {
  border-color: var(--hds-input-border-color-hover);
}
.hds-dropdown-input-opened:focus {
  padding-left: calc(calc(2 * var(--base-padding)) - (var(--border-size-highlighted) - var(--border-size)));
}
.hds-dropdown-input-detect {
  caret-color: var(--hds-input-caret-color);
  box-sizing: border-box;
  border-radius: var(--border-radius);
  border: var(--border-size) solid var(--hds-input-border);
  background-color: var(--hds-input-bg-color);
  color: var(--hds-input-color);
  font-family: var(--font-family);
  font-size: var(--text-size-dialog);
  font-style: normal;
  font-weight: 400;
  line-height: var(--line-height);
  color: var(--font-color-secondary);
  --icon-color: var(--font-color-secondary);
  height: var(--medium-button-height);
  padding: 0px var(--base-padding) 0px calc(2 * var(--base-padding));
  display: flex;
  align-items: center;
}
.hds-dropdown-input-detect::placeholder {
  color: var(--hds-input-placeholder-color);
}
.hds-dropdown-input-detect:focus {
  border: var(--border-size-highlighted) solid var(--hds-input-border-color-focussed);
}
.hds-dropdown-input-detect:hover:not(:focus) {
  border-color: var(--hds-input-border-color-hover);
}
.hds-dropdown-input-detect:focus {
  padding-left: calc(calc(2 * var(--base-padding)) - (var(--border-size-highlighted) - var(--border-size)));
}
.popover-container-opened .hds-dropdown-input-detect {
  border: var(--border-size-highlighted) solid var(--hds-input-border-color-focussed);
}
.hds-dropdown-selected-item {
  overflow: hidden;
  width: 1px;
  flex-grow: 1;
}
.hds-dropdown-opened-icon {
  display: none;
}
.popover-container-opened .hds-dropdown-opened-icon {
  display: initial;
}
.popover-container-opened .hds-dropdown-closed-icon {
  display: none;
}
.dd-menu-container {
  display: flex;
  position: relative;
  z-index: 7;
}
.dd-menu-header {
  display: block;
  float: left;
  flex-grow: 1;
}
.dd-menu-list {
  list-style: none;
  display: none;
  position: absolute;
}
.dd-menu-list-right {
  list-style: none;
  display: none;
  position: absolute;
  left: 100%;
}
.dd-menu-list-bottom {
  list-style: none;
  display: none;
  position: absolute;
  top: 100%;
}
.dd-menu-container:hover > .dd-menu-list-right,
.dd-menu-container:hover > .dd-menu-list-bottom {
  display: block;
  max-height: calc(100vh - var(--top-offset) - 3px);
  margin-left: unset;
}
.dd-menu-container:hover > .dd-menu-header > .menu-item {
  background-color: var(--bg-color-popup-item-hover);
  font-family: var(--font-family);
  font-size: var(--text-size-menu);
  line-height: var(--line-height);
  color: var(--font-color-primary);
  --icon-color: var(--font-color-secondary);
}
.dd-menu-item {
  display: block;
}
.color-picker-container {
  padding: var(--hds-spacing-2);
  background-color: var(--hds-background-secondary) !important;
  width: var(--color-picker-container-width);
  box-sizing: border-box;
  filter: var(--hds-overlay);
}
.color-picker-color-row {
  display: flex;
  flex-direction: row;
  align-items: stretch;
}
.color-picker-palette-container {
  width: 100%;
  display: flex;
  margin-top: calc(2 * var(--base-padding));
}
.color-picker-palette-inner {
  width: 0px;
  flex-grow: 1;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
}
.color-picker-color-preview {
  border-radius: var(--input-border-radius);
  border: var(--border-size) inset #0F162119;
  background-clip: content-box;
  width: 12px;
  height: 12px;
  margin: 2px 0 0 2px;
}
.color-picker-saturation {
  position: relative;
  width: var(--color-picker-height);
  height: var(--color-picker-height);
  flex-shrink: 0;
  flex-grow: 1;
  overflow: hidden;
  border-radius: var(--item-border-radius);
}
.color-picker-saturation-gradient1 {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0));
}
.color-picker-saturation-gradient2 {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, #000000, rgba(0, 0, 0, 0));
}
.color-picker-picker {
  box-shadow: 0 1px 4px 0 var(--shadow-color);
  position: absolute;
  border-radius: 50%;
  width: var(--color-picker-crosshair-size);
  height: var(--color-picker-crosshair-size);
  background-color: transparent;
  border: 1px solid white;
  left: calc(var(--left) - var(--color-picker-crosshair-size) / 2);
  top: calc(var(--top) - var(--color-picker-crosshair-size) / 2);
}
.color-picker-color-container {
  position: relative;
  margin: 0px 0px 0px calc(2 * var(--base-padding));
  height: 20px;
}
.color-picker-color-background {
  --checker-opacity: 1;
  --checker-size: 20px;
  --checker-half-size: calc(var(--checker-size) / 2);
  --checker-off-color: transparent;
  --checker-color: rgba(128, 128, 128, var(--checker-opacity));
  background-image: linear-gradient(45deg, var(--checker-color) 25%, var(--checker-off-color) 25%), linear-gradient(-45deg, var(--checker-color) 25%, var(--checker-off-color) 25%), linear-gradient(45deg, var(--checker-off-color) 75%, var(--checker-color) 75%), linear-gradient(-45deg, var(--checker-off-color) 75%, var(--checker-color) 75%);
  background-size: var(--checker-size) var(--checker-size);
  background-position: 0 0, 0 var(--checker-half-size), var(--checker-half-size) calc(-1 * var(--checker-half-size)), calc(-1 * var(--checker-half-size)) 0px;
  position: absolute;
  width: 100%;
  height: 100%;
}
.color-picker-color {
  border: var(--border-size) solid var(--border-color);
  position: absolute;
  width: 100%;
  height: 100%;
}
.color-picker-controls-container {
  display: flex;
  align-items: center;
  margin-top: calc(2 * var(--base-padding));
}
.color-picker-slider-controls-container {
  gap: var(--base-padding);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-shrink: 0;
  flex-grow: 1;
}
.color-picker-hue-container {
  position: relative;
  height: var(--color-picker-slider-track-height);
  margin: calc((var(--color-picker-slider-handle-size) - var(--color-picker-slider-track-height)) / 2) calc(var(--color-picker-slider-handle-size) / 2);
  flex-grow: 1;
}
.color-picker-hue-background {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: var(--input-border-radius);
  border: var(--border-size) inset #0F162119;
  border-radius: calc(var(--color-picker-slider-track-height) / 2);
  background-clip: content-box;
  box-sizing: border-box;
  background-image: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
}
.color-picker-hue-grabber-position {
  box-shadow: 0 1px 4px 0 var(--shadow-color);
  position: absolute;
  border-radius: 50%;
  width: var(--color-picker-slider-handle-size);
  height: var(--color-picker-slider-handle-size);
  background-color: transparent;
  border: 2px solid var(--color-picker-slider-grabber-color);
  box-sizing: border-box;
  margin-top: calc(-1 * (var(--color-picker-slider-handle-size) - var(--color-picker-slider-track-height)) / 2);
  left: calc(var(--left) - var(--color-picker-slider-handle-size) / 2);
}
.color-picker-alpha-container {
  display: flex;
  align-items: center;
  width: 100%;
}
.color-picker-slider-container {
  position: relative;
  height: var(--color-picker-slider-track-height);
  margin: calc((var(--color-picker-slider-handle-size) - var(--color-picker-slider-track-height)) / 2) calc(var(--color-picker-slider-handle-size) / 2);
  flex-grow: 1;
}
.color-picker-slider-grabber {
  box-shadow: 0 1px 4px 0 var(--shadow-color);
  position: absolute;
  border-radius: 50%;
  width: var(--color-picker-slider-handle-size);
  height: var(--color-picker-slider-handle-size);
  background-color: transparent;
  border: 2px solid var(--color-picker-slider-grabber-color);
  box-sizing: border-box;
  margin-top: calc(-1 * (var(--color-picker-slider-handle-size) - var(--color-picker-slider-track-height)) / 2);
  left: calc(var(--left) - var(--color-picker-slider-handle-size) / 2);
}
.color-picker-alpha-slider-container {
  position: relative;
  height: var(--color-picker-slider-track-height);
  margin: calc((var(--color-picker-slider-handle-size) - var(--color-picker-slider-track-height)) / 2) calc(var(--color-picker-slider-handle-size) / 2);
  flex-grow: 1;
}
.color-picker-alpha-track {
  border-radius: var(--input-border-radius);
  border: var(--border-size) inset #0F162119;
  width: 100%;
  height: 100%;
  position: absolute;
  border-radius: calc(var(--color-picker-slider-track-height) / 2);
  background-clip: content-box;
  box-sizing: border-box;
  overflow: hidden;
}
.color-picker-alpha-background1 {
  --checker-opacity: 1;
  --checker-size: 6px;
  --checker-half-size: calc(var(--checker-size) / 2);
  --checker-off-color: transparent;
  --checker-color: rgba(128, 128, 128, var(--checker-opacity));
  background-image: linear-gradient(45deg, var(--checker-color) 25%, var(--checker-off-color) 25%), linear-gradient(-45deg, var(--checker-color) 25%, var(--checker-off-color) 25%), linear-gradient(45deg, var(--checker-off-color) 75%, var(--checker-color) 75%), linear-gradient(-45deg, var(--checker-off-color) 75%, var(--checker-color) 75%);
  background-size: var(--checker-size) var(--checker-size);
  background-position: 0 0, 0 var(--checker-half-size), var(--checker-half-size) calc(-1 * var(--checker-half-size)), calc(-1 * var(--checker-half-size)) 0px;
  position: absolute;
  width: 100%;
  height: 100%;
}
.color-picker-alpha-background2 {
  position: absolute;
  width: 100%;
  height: 100%;
}
.color-picker-alpha-grabber-position {
  box-shadow: 0 1px 4px 0 var(--shadow-color);
  position: absolute;
  border-radius: 50%;
  width: var(--color-picker-slider-handle-size);
  height: var(--color-picker-slider-handle-size);
  background-color: transparent;
  border: 2px solid var(--color-picker-slider-grabber-color);
  box-sizing: border-box;
  margin-top: calc(-1 * (var(--color-picker-slider-handle-size) - var(--color-picker-slider-track-height)) / 2);
  left: calc(var(--left) - var(--color-picker-slider-handle-size) / 2);
}
.color-picker-input {
  background-color: transparent;
  border-radius: var(--input-border-radius);
  border: var(--input-border-size) solid var(--input-border-color-active);
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-tiny);
  color: var(--font-color-active);
  caret-color: var(--input-caret-color);
  height: var(--input-height);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  background-color: var(--color-picker-input-bg-color);
  border-color: var(--color-picker-input-border-color);
  width: var(--color-picker-input-width);
}
.color-picker-input input[type="number"],
.color-picker-input input[type="text"] {
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-tiny);
  color: var(--font-color-active);
  caret-color: var(--input-caret-color);
}
.color-picker-input:hover {
  border-color: var(--input-border-color-hover);
}
.color-picker-input:focus-within {
  border: var(--input-border-size) solid var(--input-border-color-focussed);
  background-color: transparent;
  color: var(--font-color-emphasized);
}
.color-picker-input input[type="number"]:focus,
.color-picker-input input[type="text"]:focus {
  border: none;
}
.color-picker-input .input-prefix {
  color: var(--color-picker-input-color);
}
.color-picker-input .string-input[type=text],
.color-picker-input .number-input[type=number] {
  color: var(--color-picker-input-color);
}
.color-picker-alpha-input {
  background-color: transparent;
  border-radius: var(--input-border-radius);
  border: var(--input-border-size) solid var(--input-border-color-active);
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-tiny);
  color: var(--font-color-active);
  caret-color: var(--input-caret-color);
  height: var(--input-height);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  background-color: var(--color-picker-input-bg-color);
  border-color: var(--color-picker-input-border-color);
  width: var(--color-picker-input-width);
  -moz-appearance: textfield;
  margin-left: var(--base-padding);
}
.color-picker-alpha-input input[type="number"],
.color-picker-alpha-input input[type="text"] {
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-tiny);
  color: var(--font-color-active);
  caret-color: var(--input-caret-color);
}
.color-picker-alpha-input:hover {
  border-color: var(--input-border-color-hover);
}
.color-picker-alpha-input:focus-within {
  border: var(--input-border-size) solid var(--input-border-color-focussed);
  background-color: transparent;
  color: var(--font-color-emphasized);
}
.color-picker-alpha-input input[type="number"]:focus,
.color-picker-alpha-input input[type="text"]:focus {
  border: none;
}
.color-picker-alpha-input .input-prefix {
  color: var(--color-picker-input-color);
}
.color-picker-alpha-input .string-input[type=text],
.color-picker-alpha-input .number-input[type=number] {
  color: var(--color-picker-input-color);
}
.color-picker-input-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: var(--hds-spacing-2) var(--hds-spacing-1) var(--hds-spacing-0) var(--hds-spacing-1);
  gap: var(--hds-spacing-2);
}
.color-picker-input-container .hex-alpha-input {
  flex-basis: 100px;
}
.color-picker-input-container .rgb-alpha-input {
  flex-basis: 57px;
}
.color-picker-input-container .color-component-label {
  margin-left: -10px;
}
.color-picker-hex-input {
  background-color: transparent;
  border-radius: var(--input-border-radius);
  border: var(--input-border-size) solid var(--input-border-color-active);
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-tiny);
  color: var(--font-color-active);
  caret-color: var(--input-caret-color);
  height: var(--input-height);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  background-color: var(--color-picker-input-bg-color);
  border-color: var(--color-picker-input-border-color);
  width: var(--color-picker-input-width);
  -moz-appearance: textfield;
  width: calc(var(--color-picker-input-width) * 3);
}
.color-picker-hex-input input[type="number"],
.color-picker-hex-input input[type="text"] {
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-tiny);
  color: var(--font-color-active);
  caret-color: var(--input-caret-color);
}
.color-picker-hex-input:hover {
  border-color: var(--input-border-color-hover);
}
.color-picker-hex-input:focus-within {
  border: var(--input-border-size) solid var(--input-border-color-focussed);
  background-color: transparent;
  color: var(--font-color-emphasized);
}
.color-picker-hex-input input[type="number"]:focus,
.color-picker-hex-input input[type="text"]:focus {
  border: none;
}
.color-picker-hex-input .input-prefix {
  color: var(--color-picker-input-color);
}
.color-picker-hex-input .string-input[type=text],
.color-picker-hex-input .number-input[type=number] {
  color: var(--color-picker-input-color);
}
.color-picker-component-input {
  background-color: transparent;
  border-radius: var(--input-border-radius);
  border: var(--input-border-size) solid var(--input-border-color-active);
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-tiny);
  color: var(--font-color-active);
  caret-color: var(--input-caret-color);
  height: var(--input-height);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  background-color: var(--color-picker-input-bg-color);
  border-color: var(--color-picker-input-border-color);
  width: var(--color-picker-input-width);
  -moz-appearance: textfield;
  margin-left: var(--base-padding);
}
.color-picker-component-input input[type="number"],
.color-picker-component-input input[type="text"] {
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-tiny);
  color: var(--font-color-active);
  caret-color: var(--input-caret-color);
}
.color-picker-component-input:hover {
  border-color: var(--input-border-color-hover);
}
.color-picker-component-input:focus-within {
  border: var(--input-border-size) solid var(--input-border-color-focussed);
  background-color: transparent;
  color: var(--font-color-emphasized);
}
.color-picker-component-input input[type="number"]:focus,
.color-picker-component-input input[type="text"]:focus {
  border: none;
}
.color-picker-component-input .input-prefix {
  color: var(--color-picker-input-color);
}
.color-picker-component-input .string-input[type=text],
.color-picker-component-input .number-input[type=number] {
  color: var(--color-picker-input-color);
}
.color-picker-component-input:first-of-type {
  margin-left: 0;
}
.color-picker-hex-container {
  display: flex;
  flex-direction: row;
  align-items: center;
}
/* For Firefox */
.color-picker-input {
  -moz-appearance: textfield;
}
/* Webkit browsers like Safari and Chrome */
.color-picker-input::-webkit-inner-spin-button,
.color-picker-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.color-picker-reference-container {
  border-radius: var(--hds-border-radius);
  position: relative;
  width: 40px;
  display: flex;
  flex-direction: column;
  margin-left: var(--base-padding);
  border-radius: var(--item-border-radius);
  overflow: hidden;
}
.color-picker-reference-container::after {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: var(--hds-border-radius);
  pointer-events: none;
  box-shadow: inset 0px 0px 0px 1.05px var(--hds-foreground-divider);
}
.color-picker-reference-container:hover::after {
  box-shadow: inset 0px 0px 0px 1.05px var(--hds-foreground-tertiary-hover);
}
.color-picker-reference-container:active::after {
  box-shadow: inset 0px 0px 0px 1.05px var(--hds-foreground-tertiary-press);
}
.color-picker-reference-container:has(.color-display-picker-active)::after {
  box-shadow: inset 0px 0px 0px 1.05px var(--hds-foreground-primary);
}
.color-picker-reference {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.color-picker-reference-clickable {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  user-select: none;
}
.color-picker-reference-color {
  border: none;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.color-picker-mode-tab-row {
  display: flex;
  flex-direction: row;
  margin-top: calc(2 * var(--base-padding));
}
.color-picker-mode-tab {
  cursor: pointer;
  user-select: none;
  padding: 0 var(--base-padding) var(--base-padding) var(--base-padding);
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height);
  color: var(--font-color-subdued);
  --icon-color: var(--font-color-subdued);
}
.color-picker-mode-tab-selected {
  cursor: pointer;
  user-select: none;
  padding: 0 var(--base-padding) var(--base-padding) var(--base-padding);
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height);
  color: var(--font-color-emphasized);
  --icon-color: var(--font-color-emphasized);
  border-bottom: 2px solid var(--selected-item-marker-color);
}
.color-picker-eye-dropper {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  border: 1px solid var(--border-color);
  width: var(--color-picker-eyedrop-size);
  height: var(--color-picker-eyedrop-size);
  border-radius: var(--item-border-radius);
  flex-grow: 0;
  flex-shrink: 0;
  box-sizing: border-box;
}
.color-picker-popover {
  border-radius: var(--popup-border-radius);
  overflow: hidden;
  display: flex;
  box-shadow: 0 1px 4px 0 var(--shadow-color);
}
.popover-right .color-picker-popover,
.popover-left .color-picker-popover {
  flex-direction: row;
}
.popover-bottom .color-picker-popover,
.popover-top .color-picker-popover {
  flex-direction: column;
}
.color-display {
  --checker-opacity: 1;
  --checker-size: 20px;
  --checker-half-size: calc(var(--checker-size) / 2);
  --checker-off-color: transparent;
  --checker-color: rgba(128, 128, 128, var(--checker-opacity));
  background-image: linear-gradient(45deg, var(--checker-color) 25%, var(--checker-off-color) 25%), linear-gradient(-45deg, var(--checker-color) 25%, var(--checker-off-color) 25%), linear-gradient(45deg, var(--checker-off-color) 75%, var(--checker-color) 75%), linear-gradient(-45deg, var(--checker-off-color) 75%, var(--checker-color) 75%);
  background-size: var(--checker-size) var(--checker-size);
  background-position: 0 0, 0 var(--checker-half-size), var(--checker-half-size) calc(-1 * var(--checker-half-size)), calc(-1 * var(--checker-half-size)) 0px;
  border-radius: var(--hds-border-radius);
  position: relative;
  overflow: hidden;
}
.color-display:not(.color-display-disabled):after {
  box-shadow: inset 0px 0px 0px 1.05px var(--hds-foreground-tertiary);
}
.color-display::after {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: var(--hds-border-radius);
  pointer-events: none;
  box-shadow: inset 0px 0px 0px 1.05px var(--hds-foreground-divider);
}
.color-display:hover::after {
  box-shadow: inset 0px 0px 0px 1.05px var(--hds-foreground-tertiary-hover);
}
.color-display:active::after {
  box-shadow: inset 0px 0px 0px 1.05px var(--hds-foreground-tertiary-press);
}
.color-display:has(.color-display-picker-active)::after {
  box-shadow: inset 0px 0px 0px 1.05px var(--hds-foreground-primary);
}
.color-display-fixed {
  height: var(--size, var(--swatch-height));
  width: var(--swatch-width);
}
.color-display-expanding-h {
  height: var(--size, var(--swatch-height));
  width: var(--swatch-width);
  width: 1px;
  flex-grow: 1;
}
.color-display-expanding-v {
  height: var(--size, var(--swatch-height));
  width: var(--swatch-width);
  height: 1px;
  flex-grow: 1;
}
.color-display-disabled {
  --checker-opacity: 1;
  --checker-size: 20px;
  --checker-half-size: calc(var(--checker-size) / 2);
  --checker-off-color: transparent;
  --checker-color: rgba(128, 128, 128, var(--checker-opacity));
  background-image: linear-gradient(45deg, var(--checker-color) 25%, var(--checker-off-color) 25%), linear-gradient(-45deg, var(--checker-color) 25%, var(--checker-off-color) 25%), linear-gradient(45deg, var(--checker-off-color) 75%, var(--checker-color) 75%), linear-gradient(-45deg, var(--checker-off-color) 75%, var(--checker-color) 75%);
  background-size: var(--checker-size) var(--checker-size);
  background-position: 0 0, 0 var(--checker-half-size), var(--checker-half-size) calc(-1 * var(--checker-half-size)), calc(-1 * var(--checker-half-size)) 0px;
  border-radius: var(--hds-border-radius);
  position: relative;
  overflow: hidden;
  opacity: var(--input-disabled-opacity);
  pointer-events: none;
}
.color-display-disabled:not(.color-display-disabled):after {
  box-shadow: inset 0px 0px 0px 1.05px var(--hds-foreground-tertiary);
}
.color-display-disabled::after {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: var(--hds-border-radius);
  pointer-events: none;
  box-shadow: inset 0px 0px 0px 1.05px var(--hds-foreground-divider);
}
.color-display-disabled:hover::after {
  box-shadow: inset 0px 0px 0px 1.05px var(--hds-foreground-tertiary-hover);
}
.color-display-disabled:active::after {
  box-shadow: inset 0px 0px 0px 1.05px var(--hds-foreground-tertiary-press);
}
.color-display-disabled:has(.color-display-picker-active)::after {
  box-shadow: inset 0px 0px 0px 1.05px var(--hds-foreground-primary);
}
.color-display-disabled:after {
  box-shadow: inset 0px 0px 0px 1.05px var(--hds-foreground-tertiary-disabled);
}
.color-display-color {
  height: 100%;
  flex-grow: 1;
}
.color-display-no-color {
  border-radius: var(--hds-border-radius);
  overflow: hidden;
  height: var(--size, var(--swatch-height));
  width: var(--swatch-width);
  position: relative;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%, auto;
  background-color: var(--bg-global-adjustments);
  box-shadow: inset 0px 0px 0px 1px var(--hds-foreground-divider);
  --color-swatch-border: var(--hds-foreground-tertiary-hover);
}
.color-display-no-color::after {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: var(--hds-border-radius);
  pointer-events: none;
  box-shadow: inset 0px 0px 0px 1.05px var(--hds-foreground-divider);
}
.color-display-no-color:hover::after {
  box-shadow: inset 0px 0px 0px 1.05px var(--hds-foreground-tertiary-hover);
}
.color-display-no-color:active::after {
  box-shadow: inset 0px 0px 0px 1.05px var(--hds-foreground-tertiary-press);
}
.color-display-no-color:has(.color-display-picker-active)::after {
  box-shadow: inset 0px 0px 0px 1.05px var(--hds-foreground-primary);
}
.color-display-no-color::before {
  background-color: var(--color-swatch-border);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns=%27http://www.w3.org/2000/svg%27 version=%271.1%27 preserveAspectRatio=%27none%27 viewBox=%270 0 100 100%27><path d=%27M0 99 L99 0 L100 1 L1 100%27 stroke=%27white%27 fill=%27none%27 stroke-width=%272%27 /></svg>");
  mask: url("data:image/svg+xml;utf8,<svg xmlns=%27http://www.w3.org/2000/svg%27 version=%271.1%27 preserveAspectRatio=%27none%27 viewBox=%270 0 100 100%27><path d=%27M0 99 L99 0 L100 1 L1 100%27 stroke=%27white%27 fill=%27none%27 stroke-width=%272%27 /></svg>");
  mask-size: 100% 100%;
  position: absolute;
  width: 100%;
  height: 100%;
  content: "";
}
.color-display-no-color.color-display-clickable::after {
  box-shadow: inset 0px 0px 0px 1px var(--hds-foreground-tertiary);
}
.color-display-no-color.color-display-clickable:hover::after {
  box-shadow: inset 0px 0px 0px 1px var(--hds-foreground-tertiary-hover);
}
.color-display-no-color.color-display-clickable:active::after {
  box-shadow: inset 0px 0px 0px 1px var(--hds-foreground-tertiary-press);
}
.color-display-no-color.color-display-clickable.color-display-picker-active::after {
  box-shadow: inset 0px 0px 0px 1px var(--hds-foreground-secondary);
}
.color-display-no-color:not(.color-display-clickable)::after {
  box-shadow: inset 0px 0px 0px 1px var(--hds-foreground-tertiary-disabled);
}
.color-display-clickable {
  cursor: pointer;
  user-select: none;
}
.multi-color-gradient-horizontal {
  --checker-opacity: 1;
  --checker-size: 20px;
  --checker-half-size: calc(var(--checker-size) / 2);
  --checker-off-color: transparent;
  --checker-color: rgba(128, 128, 128, var(--checker-opacity));
  background-image: linear-gradient(45deg, var(--checker-color) 25%, var(--checker-off-color) 25%), linear-gradient(-45deg, var(--checker-color) 25%, var(--checker-off-color) 25%), linear-gradient(45deg, var(--checker-off-color) 75%, var(--checker-color) 75%), linear-gradient(-45deg, var(--checker-off-color) 75%, var(--checker-color) 75%);
  background-size: var(--checker-size) var(--checker-size);
  background-position: 0 0, 0 var(--checker-half-size), var(--checker-half-size) calc(-1 * var(--checker-half-size)), calc(-1 * var(--checker-half-size)) 0px;
  display: flex;
  border-radius: var(--hds-border-radius);
  position: relative;
  overflow: hidden;
  height: var(--line-height);
  flex-grow: 1;
  overflow: unset;
}
.multi-color-gradient-horizontal::after {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: var(--hds-border-radius);
  pointer-events: none;
  box-shadow: inset 0px 0px 0px 1.05px var(--hds-foreground-divider);
}
.multi-color-gradient-horizontal:hover::after {
  box-shadow: inset 0px 0px 0px 1.05px var(--hds-foreground-tertiary-hover);
}
.multi-color-gradient-horizontal:active::after {
  box-shadow: inset 0px 0px 0px 1.05px var(--hds-foreground-tertiary-press);
}
.multi-color-gradient-horizontal:has(.color-display-picker-active)::after {
  box-shadow: inset 0px 0px 0px 1.05px var(--hds-foreground-primary);
}
.multi-color-gradient-vertical {
  --checker-opacity: 1;
  --checker-size: 20px;
  --checker-half-size: calc(var(--checker-size) / 2);
  --checker-off-color: transparent;
  --checker-color: rgba(128, 128, 128, var(--checker-opacity));
  background-image: linear-gradient(45deg, var(--checker-color) 25%, var(--checker-off-color) 25%), linear-gradient(-45deg, var(--checker-color) 25%, var(--checker-off-color) 25%), linear-gradient(45deg, var(--checker-off-color) 75%, var(--checker-color) 75%), linear-gradient(-45deg, var(--checker-off-color) 75%, var(--checker-color) 75%);
  background-size: var(--checker-size) var(--checker-size);
  background-position: 0 0, 0 var(--checker-half-size), var(--checker-half-size) calc(-1 * var(--checker-half-size)), calc(-1 * var(--checker-half-size)) 0px;
  border-radius: var(--hds-border-radius);
  position: relative;
  overflow: hidden;
  height: var(--size, var(--swatch-height));
  width: var(--swatch-width);
}
.multi-color-gradient-vertical::after {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: var(--hds-border-radius);
  pointer-events: none;
  box-shadow: inset 0px 0px 0px 1.05px var(--hds-foreground-divider);
}
.multi-color-gradient-vertical:hover::after {
  box-shadow: inset 0px 0px 0px 1.05px var(--hds-foreground-tertiary-hover);
}
.multi-color-gradient-vertical:active::after {
  box-shadow: inset 0px 0px 0px 1.05px var(--hds-foreground-tertiary-press);
}
.multi-color-gradient-vertical:has(.color-display-picker-active)::after {
  box-shadow: inset 0px 0px 0px 1.05px var(--hds-foreground-primary);
}
.multi-color-gradient-expanding {
  height: var(--size, var(--swatch-height));
  width: var(--swatch-width);
  width: 1px;
  flex-grow: 1;
}
.multi-color-gradient-fixed {
  height: var(--size, var(--swatch-height));
  width: var(--swatch-width);
}
.multi-color-gradient-inner {
  height: 100%;
  flex-grow: 1;
  border-radius: var(--hds-border-radius);
  box-sizing: border-box;
  border: var(--input-border-size) solid var(--graph-border);
}
.multi-color-gradient-stop-row {
  position: absolute;
  bottom: 1px;
  width: 100%;
}
.multi-color-gradient-stop {
  position: absolute;
  border-radius: 0.5px;
  width: 1px;
  height: 1px;
  background-color: var(--graph-stop);
}
.multi-color-horizontal {
  width: 100%;
  height: 100%;
}
.multi-color-vertical {
  width: 100%;
  height: 100%;
}
.multi-color-grid {
  --checker-opacity: 1;
  --checker-size: 20px;
  --checker-half-size: calc(var(--checker-size) / 2);
  --checker-off-color: transparent;
  --checker-color: rgba(128, 128, 128, var(--checker-opacity));
  background-image: linear-gradient(45deg, var(--checker-color) 25%, var(--checker-off-color) 25%), linear-gradient(-45deg, var(--checker-color) 25%, var(--checker-off-color) 25%), linear-gradient(45deg, var(--checker-off-color) 75%, var(--checker-color) 75%), linear-gradient(-45deg, var(--checker-off-color) 75%, var(--checker-color) 75%);
  background-size: var(--checker-size) var(--checker-size);
  background-position: 0 0, 0 var(--checker-half-size), var(--checker-half-size) calc(-1 * var(--checker-half-size)), calc(-1 * var(--checker-half-size)) 0px;
  border-radius: var(--hds-border-radius);
  position: relative;
  overflow: hidden;
  height: var(--size, var(--swatch-height));
  width: var(--swatch-width);
  display: flex;
}
.multi-color-grid::after {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: var(--hds-border-radius);
  pointer-events: none;
  box-shadow: inset 0px 0px 0px 1.05px var(--hds-foreground-divider);
}
.multi-color-grid:hover::after {
  box-shadow: inset 0px 0px 0px 1.05px var(--hds-foreground-tertiary-hover);
}
.multi-color-grid:active::after {
  box-shadow: inset 0px 0px 0px 1.05px var(--hds-foreground-tertiary-press);
}
.multi-color-grid:has(.color-display-picker-active)::after {
  box-shadow: inset 0px 0px 0px 1.05px var(--hds-foreground-primary);
}
.multi-color-grid-horizontal {
  --checker-opacity: 1;
  --checker-size: 20px;
  --checker-half-size: calc(var(--checker-size) / 2);
  --checker-off-color: transparent;
  --checker-color: rgba(128, 128, 128, var(--checker-opacity));
  background-image: linear-gradient(45deg, var(--checker-color) 25%, var(--checker-off-color) 25%), linear-gradient(-45deg, var(--checker-color) 25%, var(--checker-off-color) 25%), linear-gradient(45deg, var(--checker-off-color) 75%, var(--checker-color) 75%), linear-gradient(-45deg, var(--checker-off-color) 75%, var(--checker-color) 75%);
  background-size: var(--checker-size) var(--checker-size);
  background-position: 0 0, 0 var(--checker-half-size), var(--checker-half-size) calc(-1 * var(--checker-half-size)), calc(-1 * var(--checker-half-size)) 0px;
  border-radius: var(--hds-border-radius);
  position: relative;
  overflow: hidden;
  height: var(--size, var(--swatch-height));
  width: var(--swatch-width);
  display: flex;
  flex-direction: row;
}
.multi-color-grid-horizontal::after {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: var(--hds-border-radius);
  pointer-events: none;
  box-shadow: inset 0px 0px 0px 1.05px var(--hds-foreground-divider);
}
.multi-color-grid-horizontal:hover::after {
  box-shadow: inset 0px 0px 0px 1.05px var(--hds-foreground-tertiary-hover);
}
.multi-color-grid-horizontal:active::after {
  box-shadow: inset 0px 0px 0px 1.05px var(--hds-foreground-tertiary-press);
}
.multi-color-grid-horizontal:has(.color-display-picker-active)::after {
  box-shadow: inset 0px 0px 0px 1.05px var(--hds-foreground-primary);
}
.multi-color-grid-vertical {
  --checker-opacity: 1;
  --checker-size: 20px;
  --checker-half-size: calc(var(--checker-size) / 2);
  --checker-off-color: transparent;
  --checker-color: rgba(128, 128, 128, var(--checker-opacity));
  background-image: linear-gradient(45deg, var(--checker-color) 25%, var(--checker-off-color) 25%), linear-gradient(-45deg, var(--checker-color) 25%, var(--checker-off-color) 25%), linear-gradient(45deg, var(--checker-off-color) 75%, var(--checker-color) 75%), linear-gradient(-45deg, var(--checker-off-color) 75%, var(--checker-color) 75%);
  background-size: var(--checker-size) var(--checker-size);
  background-position: 0 0, 0 var(--checker-half-size), var(--checker-half-size) calc(-1 * var(--checker-half-size)), calc(-1 * var(--checker-half-size)) 0px;
  border-radius: var(--hds-border-radius);
  position: relative;
  overflow: hidden;
  height: var(--size, var(--swatch-height));
  width: var(--swatch-width);
  display: flex;
  flex-direction: column;
}
.multi-color-grid-vertical::after {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: var(--hds-border-radius);
  pointer-events: none;
  box-shadow: inset 0px 0px 0px 1.05px var(--hds-foreground-divider);
}
.multi-color-grid-vertical:hover::after {
  box-shadow: inset 0px 0px 0px 1.05px var(--hds-foreground-tertiary-hover);
}
.multi-color-grid-vertical:active::after {
  box-shadow: inset 0px 0px 0px 1.05px var(--hds-foreground-tertiary-press);
}
.multi-color-grid-vertical:has(.color-display-picker-active)::after {
  box-shadow: inset 0px 0px 0px 1.05px var(--hds-foreground-primary);
}
.multi-color-cell {
  flex-grow: 1;
}
.blend-modes-container {
  display: flex;
  align-items: center;
  gap: var(--hds-spacing-2);
}
.color-swatch-blendmode-overlay {
  background-color: var(--hds-background-inverse);
  opacity: 0.7;
  height: var(--hds-spacing-4);
  width: var(--hds-spacing-4);
  border-radius: 50px;
  position: absolute;
  top: calc(3 * var(--hds-spacing-1px));
  right: 0px;
  display: flex;
  margin-right: var(--hds-spacing-1);
}
.color-swatch-blendmode-overlay .base-icon {
  --icon-color: var(--hds-background-secondary);
}
.graph-line {
  stroke: var(--graph-color);
  stroke-linecap: round;
  stroke-width: 1px;
  fill: transparent;
}
.graph {
  border-radius: var(--input-border-radius);
}
.graph-background {
  fill: var(--graph-bg);
  stroke: var(--graph-border);
  border-radius: var(--input-border-radius);
  stroke-width: var(--input-border-size);
  rx: 4px;
}
.graph-background:hover {
  stroke: var(--graph-border-hover);
}
.graph-text {
  text-anchor: end;
  font-size: var(--text-size-tiny);
  fill: var(--hds-foreground-secondary);
  font-family: var(--font-family);
  font-style: normal;
  font-weight: 400;
  line-height: var(--hds-spacing-3);
  /* 120% */
  letter-spacing: -0.2px;
}
.graph-stops {
  fill: var(--graph-stop);
  stroke: none;
}
.histogram-container {
  display: flex;
  flex-direction: column;
}
.histogram-histogram {
  position: relative;
  display: flex;
  flex-direction: row;
  height: 100px;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: var(--base-padding);
}
.histogram-histogram-selection-container {
  position: absolute;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  padding-left: calc(100% * var(--min));
  padding-right: calc(100% * var(--max-inv));
  display: flex;
  justify-content: stretch;
  align-items: stretch;
}
.histogram-histogram-selection {
  flex-grow: 1;
  background-color: var(--chart-selection-bg);
}
.histogram-histogram-bar {
  width: 10px;
  background-color: var(--chart-item-color);
}
.histogram-histogram-bar-selected {
  width: 10px;
  background-color: var(--chart-item-color-selected);
}
.histogram-slider {
  position: relative;
  display: flex;
  align-items: center;
  height: var(--slider-grabber-size);
}
.histogram-slider-track {
  position: absolute;
  top: calc(var(--slider-grabber-size) / 2 - var(--slider-width) / 2);
  height: var(--slider-width);
  width: 100%;
  background-color: var(--hds-foreground-tertiary);
  pointer-events: none;
}
.histogram-min {
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
  width: var(--slider-grabber-size);
  height: var(--slider-grabber-size);
  border-radius: calc(var(--slider-grabber-size) / 2);
  background-color: var(--hds-ondarkcolor-primary);
  margin-left: calc(var(--min) * 100%);
}
.histogram-max {
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
  width: var(--slider-grabber-size);
  height: var(--slider-grabber-size);
  border-radius: calc(var(--slider-grabber-size) / 2);
  background-color: var(--hds-ondarkcolor-primary);
  margin-right: calc(var(--max-inv) * 100%);
}
.histogram-slider-bar {
  flex-grow: 1;
  flex-shrink: 1;
  height: var(--slider-width);
  background-color: var(--hds-action);
}
.dash-view {
  stroke: var(--dash-color);
}
.dash-preset-popup {
  box-shadow: 0 1px 4px 0 var(--shadow-color);
  --divider-color-override: var(--bg-color-popup-divider);
  background-color: var(--popup-color, var(--bg-color-popup));
  border: var(--border-size) solid var(--border-color);
  border-radius: var(--popup-border-radius);
  z-index: 9;
  width: var(--number-input-width);
  box-sizing: border-box;
}
.dash-preset-popup-item {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  white-space: nowrap;
  height: var(--header-line-height);
  padding: 0 calc(2 * var(--base-padding));
  font-family: var(--font-family);
  font-size: var(--text-size-menu);
  line-height: var(--line-height);
  color: var(--font-color-secondary);
  --icon-color: var(--font-color-secondary);
  padding: 0 calc(4 * var(--base-padding));
  height: var(--popup-item-height-large);
  justify-content: space-between;
}
.dash-preset-popup-item:hover {
  background-color: var(--bg-color-popup-item-hover);
  font-family: var(--font-family);
  font-size: var(--text-size-menu);
  line-height: var(--line-height);
  color: var(--font-color-primary);
  --icon-color: var(--font-color-secondary);
}
.dash-preset-input-container {
  background-color: transparent;
  border-radius: var(--input-border-radius);
  border: var(--input-border-size) solid var(--input-border-color-active);
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-tiny);
  color: var(--font-color-active);
  caret-color: var(--input-caret-color);
  height: var(--input-height);
  box-sizing: border-box;
  display: flex;
  width: var(--number-input-width);
  padding: 0 var(--base-padding);
  align-items: center;
}
.dash-preset-input-container input[type="number"],
.dash-preset-input-container input[type="text"] {
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-tiny);
  color: var(--font-color-active);
  caret-color: var(--input-caret-color);
}
.dash-preset-input-container:hover {
  border-color: var(--input-border-color-hover);
}
.dash-preset-input-container:focus-within {
  border: var(--input-border-size) solid var(--input-border-color-focussed);
  background-color: transparent;
  color: var(--font-color-emphasized);
}
.dash-preset-input-container input[type="number"]:focus,
.dash-preset-input-container input[type="text"]:focus {
  border: none;
}
.dash-preset-input {
  flex-grow: 1;
  display: flex;
}
.filter-dropdown-popup {
  box-shadow: 0 1px 4px 0 var(--shadow-color);
  --divider-color-override: var(--bg-color-popup-divider);
  background-color: var(--popup-color, var(--bg-color-popup));
  border: var(--border-size) solid var(--border-color);
  border-radius: var(--popup-border-radius);
  z-index: 9;
  width: var(--popup-menu-width);
}
.filter-dropdown-function {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  white-space: nowrap;
  height: var(--header-line-height);
  padding: 0 calc(2 * var(--base-padding));
  font-family: var(--font-family);
  font-size: var(--text-size-menu);
  line-height: var(--line-height);
  color: var(--font-color-secondary);
  --icon-color: var(--font-color-secondary);
  padding: 0 calc(4 * var(--base-padding));
  height: var(--popup-item-height-large);
}
.filter-dropdown-function:hover {
  background-color: var(--bg-color-popup-item-hover);
  font-family: var(--font-family);
  font-size: var(--text-size-menu);
  line-height: var(--line-height);
  color: var(--font-color-primary);
  --icon-color: var(--font-color-secondary);
}
.filter-dropdown-function > *:not(:first-child) {
  margin-left: calc(2 * var(--base-padding));
}
.filter-dropdown-name {
  flex-grow: 1;
}
.stylefilter-container {
  display: flex;
  flex-direction: column;
  padding: var(--hds-spacing-2);
  gap: var(--hds-spacing-2);
  width: 100%;
}
.stylefilter-buttons-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 26px;
  width: 100%;
}
.stylefilter-buttons-container > *:not(:first-child) {
  margin-left: 2px;
}
.stylefilter-label {
  color: var(--hds-foreground-secondary);
}
.bookmarks-overlay {
  position: relative;
}
.bookmarks-card {
  max-height: var(--bookmark-popover-height);
  position: absolute;
  right: 115%;
  top: 0;
  min-width: 250px;
}
.bookmarks-header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: var(--hds-spacing-2);
}
.bookmarks-title-row {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: var(--hds-spacing-2);
}
.bookmarks-search {
  padding: var(--hds-spacing-2);
  background-color: var(--hds-background-secondary);
}
.bookmarks-list-container {
  max-height: calc(var(--bookmark-popover-height) - 105px);
  display: flex;
  padding: var(--hds-spacing-1) 0px;
  border-bottom-left-radius: var(--hds-border-radius);
  border-bottom-right-radius: var(--hds-border-radius);
  background-color: var(--hds-background-secondary);
  box-sizing: border-box;
  position: relative;
}
.bookmarks-list-container hds-accordion {
  width: 100%;
}
.bookmarks-list-container hds-accordion hds-list {
  width: 100%;
}
.custom-bookmarks-list,
.preset-bookmarks-list {
  margin: var(--hds-spacing-0) var(--hds-spacing-2) var(--hds-spacing-1) var(--hds-spacing-4);
  width: 218px;
}
.custom-bookmark-actions {
  display: flex;
}
.custom-bookmark {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.custom-bookmark .actions-section {
  display: none;
}
.custom-bookmark:hover .actions-section {
  display: flex;
}
.bookmarks-popover-nibble {
  margin-left: calc(var(--tooltip-nibble-size));
  --nibble-color: var(--tooltip-bg);
  margin-top: calc(var(--map-overlay-item-size) / 2 - var(--tooltip-nibble-size));
  margin-bottom: 0px;
}
.custom-bookmark-item:hover .custom-bookmark-action-button {
  visibility: visible;
}
.custom-bookmark-action-button {
  visibility: hidden;
}
.new-bookmark-input {
  height: var(--hds-spacing-7) !important;
  font: var(--hds-body-extrasmall-font);
  font-size: var(--hds-body-extrasmall-font-size) !important;
  line-height: var(--hds-body-extrasmall-line-height) !important;
  background: var(--hds-background-secondary);
  border: var(--hds-border-width) solid var(--hds-foreground-tertiary);
  border-radius: var(--hds-border-radius);
  margin-left: var(--hds-spacing-2);
  width: 207px;
}
.new-bookmark-input:hover {
  border-color: var(--hds-foreground-tertiary-hover);
}
.new-bookmark-input:focus,
.new-bookmark-input:active {
  border: var(--hds-border-width) solid #0000;
  box-shadow: 0 0 0 0.125rem var(--hds-object-focused);
}
.edit-bookmark-input {
  height: var(--hds-spacing-7) !important;
  font: var(--hds-body-extrasmall-font);
  font-size: var(--hds-body-extrasmall-font-size) !important;
  line-height: var(--hds-body-extrasmall-line-height) !important;
  border: none !important;
  margin-left: var(--hds-spacing-2);
  color: var(--hds-foreground-primary) !important;
  caret-color: var(--hds-foreground-primary) !important;
}
.edit-bookmark-input:focus,
.edit-bookmark-input:hover,
.edit-bookmark-input:active {
  border: none !important;
  color: var(--hds-foreground-primary) !important;
  caret-color: var(--hds-foreground-primary) !important;
}
.places-search-overlay {
  display: flex;
  gap: calc(2 * var(--base-padding));
}
.places-search-card {
  width: 290px;
  margin-bottom: var(--base-padding);
}
.places-search-result-list {
  width: 290px;
}
.places-search-input {
  width: 100%;
}
.places-search-result-error:hover {
  cursor: default;
  background-color: unset;
  color: var(--font-color-secondary);
}
.tree-list-subitem {
  display: flex;
  cursor: pointer;
  user-select: none;
  font-family: var(--font-family);
  font-size: var(--text-size);
  color: var(--font-color-group-item);
  --icon-color: var(--font-color-group-item);
  line-height: var(--line-height);
  color: var(--font-color-inactive-item-text);
  --icon-color: var(--font-color-inactive-item-text);
  padding: calc(2 * var(--base-padding));
}
.tree-list-subitem-inactive {
  display: flex;
  cursor: pointer;
  user-select: none;
  font-family: var(--font-family);
  font-size: var(--text-size);
  color: var(--font-color-group-item);
  --icon-color: var(--font-color-group-item);
  line-height: var(--line-height);
  color: var(--font-color-inactive-item-text);
  --icon-color: var(--font-color-inactive-item-text);
  padding: calc(2 * var(--base-padding));
  opacity: var(--inactive-item-opacity);
}
.tree-list-subitem-selected {
  display: flex;
  cursor: pointer;
  user-select: none;
  color: var(--font-color-inactive-item-text);
  --icon-color: var(--font-color-inactive-item-text);
  padding: calc(2 * var(--base-padding));
  font-family: var(--font-family);
  font-size: var(--text-size);
  color: var(--font-color-group-item);
  --icon-color: var(--font-color-group-item);
  line-height: var(--line-height);
  border-left: solid var(--selected-item-selection-bar-width) var(--selected-item-marker-color);
  background-color: var(--bg-color-item-selected);
}
.tree-list-subitem-name {
  flex-grow: 1;
  padding-left: calc(2 * var(--base-padding));
}
.tree-list-collapse-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.tree-list-item-header {
  cursor: pointer;
  user-select: none;
  font-size: var(--text-size);
  line-height: var(--line-height-menu);
  color: var(--font-color-emphasized);
  --icon-color: var(--active-icon-color);
  text-transform: uppercase;
  font-family: var(--font-family);
  display: flex;
  align-items: center;
  padding: calc(2 * var(--base-padding));
}
.tree-list-collapsable-item-header {
  cursor: pointer;
  user-select: none;
  font-size: var(--text-size);
  line-height: var(--line-height-menu);
  color: var(--font-color-emphasized);
  --icon-color: var(--active-icon-color);
  text-transform: uppercase;
  font-family: var(--font-family);
  display: flex;
  align-items: center;
  padding: calc(2 * var(--base-padding));
}
.tree-list-selected-item-header {
  cursor: pointer;
  user-select: none;
  line-height: var(--line-height-menu);
  color: var(--font-color-emphasized);
  --icon-color: var(--active-icon-color);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  padding: calc(2 * var(--base-padding));
  font-family: var(--font-family);
  font-size: var(--text-size);
  color: var(--font-color-group-item);
  --icon-color: var(--font-color-group-item);
  line-height: var(--line-height);
  border-left: solid var(--selected-item-selection-bar-width) var(--selected-item-marker-color);
  background-color: var(--bg-color-item-selected);
}
.tree-list-collapsable-item-header-open {
  cursor: pointer;
  user-select: none;
  font-size: var(--text-size);
  line-height: var(--line-height-menu);
  color: var(--font-color-emphasized);
  --icon-color: var(--active-icon-color);
  text-transform: uppercase;
  font-family: var(--font-family);
  display: flex;
  align-items: center;
  padding: calc(2 * var(--base-padding));
  border-bottom: var(--divider-thickness) solid var(--bg-color-popup);
}
.tree-list-item-inactive {
  opacity: var(--inactive-item-opacity);
}
.tree-list-item {
  display: flex;
  flex-direction: column;
}
.tree-list-item-name {
  flex-grow: 1;
  padding-left: calc(2 * var(--base-padding));
}
.tree-list-subitem-prefix {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--collapsible-margin);
  text-align: center;
  flex-shrink: 0;
}
.tree-list-item-prefix {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--collapsible-margin);
  text-align: center;
  flex-shrink: 0;
}
.tree-list-view {
  display: flex;
  flex-direction: column;
}
.srishti-dot {
  --size: var(--text-size);
  --shadow-size: calc(var(--size) / 6);
  width: var(--size);
  height: var(--size);
  overflow: hidden;
  border-radius: calc(var(--size) / 2);
  flex-shrink: 0;
}
.srishti-dot-color {
  border-width: 1px;
  border-style: solid;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.srishti-dot-ellipsis {
  border-width: 1px;
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  background-color: var(--bg-color-item);
}
.srishti-dot-ellipsis-icon {
  background-color: var(--icon-color, var(--font-color));
  width: var(--icon-box-size);
  height: var(--icon-box-size);
  --size: var(--text-size);
  --shadow-size: calc(var(--size) / 6);
  width: var(--size);
  height: var(--size);
  overflow: hidden;
  border-radius: calc(var(--size) / 2);
  flex-shrink: 0;
}
.srishti-dot-mini {
  --size: var(--base-padding);
  --shadow-size: calc(var(--size) / 6);
  width: var(--size);
  height: var(--size);
  overflow: hidden;
  border-radius: calc(var(--size) / 2);
  flex-shrink: 0;
}
.srishti-dot-mini-hidden {
  opacity: 0;
}
.zoom-level-container {
  display: flex;
  flex-direction: column;
}
.zoom-level-box {
  paint-order: stroke;
  --stroke-color: var(--hds-background-secondary);
  --bg: var(--hds-foreground-secondary);
  rx: 4px;
}
.zoom-level-label {
  font-family: var(--font-family-emphasized);
  font-size: var(--text-size-tiny);
  line-height: var(--line-height-menu);
  letter-spacing: -0.004em;
  color: var(--font-color-secondary);
  --icon-color: var(--font-color-secondary);
  text-anchor: middle;
  fill: var(--hds-foreground-primary);
}
.zoom-select-label {
  font-family: var(--font-family-emphasized);
  font-size: var(--text-size-tiny);
  line-height: var(--line-height-menu);
  letter-spacing: -0.004em;
  color: var(--font-color-secondary);
  --icon-color: var(--font-color-secondary);
  text-anchor: middle;
  fill: var(--hds-foreground-inactive);
}
.zoom-select-indicator {
  stroke: var(--hds-foreground-inactive);
  stroke-width: 2px;
}
.zoom-select-indicator-active {
  stroke: var(--hds-foreground-secondary);
  stroke-width: 2px;
}
.zoom-select-splitter {
  stroke: var(--hds-ondarkcolor-inactive);
  stroke-width: var(--zoomlevel-line-width);
}
.zoom-select-graph {
  stroke: var(--hds-background-secondary);
  stroke-width: var(--graph-width);
  fill: transparent;
}
.zoom-select-table-row {
  display: flex;
  align-items: center;
  height: var(--hds-spacing-6);
  margin-bottom: var(--hds-spacing-1);
}
.zoom-select-table-row hds-tooltip {
  --hds-tooltip--z-index: 9 !important;
}
.zoom-select-table-row-selected {
  display: flex;
  align-items: center;
  height: var(--hds-spacing-6);
  margin-bottom: var(--hds-spacing-1);
}
.zoom-select-table-row-selected hds-tooltip {
  --hds-tooltip--z-index: 9 !important;
}
.zoom-select-table-row:first-child,
.zoom-select-table-row-selected:first-child {
  margin-top: 0;
}
.zoom-select-table {
  margin: var(--hds-spacing-2) var(--hds-spacing-0);
}
.zoom-select-table-header {
  display: flex;
  align-items: center;
  margin-bottom: var(--hds-spacing-1);
}
.zoom-level-column {
  display: flex;
  align-items: center;
  flex-grow: 1;
  width: 1px;
  color: var(--hds-foreground-secondary);
}
.zoom-level-column-left {
  display: flex;
  align-items: center;
  flex-grow: 1;
  width: 1px;
  color: var(--hds-foreground-secondary);
  margin-right: var(--base-padding);
  --input-border-radius: var(--hds-border-radius);
  --input-border-color-hover: var(--hds-foreground-tertiary-hover);
  --input-border-color-focussed: var(--hds-object-focused);
  --input-border-color-active: var(--hds-foreground-tertiary);
  --input-border-color-inactive: var(--hds-foreground-tertiary-disabled);
  --input-bg-color-inactive: var(--hds-background-primary);
  --input-bg-color-active: var(--hds-background-secondary);
}
.zoom-level-fallback-column-left {
  display: flex;
  align-items: center;
  flex-grow: 1;
  width: 1px;
  color: var(--hds-foreground-secondary);
  margin-right: var(--base-padding);
  --input-border-radius: var(--hds-border-radius);
  --input-border-color-hover: var(--hds-foreground-tertiary-hover);
  --input-border-color-focussed: var(--hds-object-focused);
  --input-border-color-active: var(--hds-foreground-tertiary);
  --input-border-color-inactive: var(--hds-foreground-tertiary-disabled);
  --input-bg-color-inactive: var(--hds-background-primary);
  --input-bg-color-active: var(--hds-background-secondary);
}
.zoom-level-fallback-text {
  padding-left: var(--input-padding);
}
.zoom-level-column-buttons-placeholder {
  width: var(--hds-spacing-7);
  height: var(--hds-spacing-7);
  flex-shrink: 0;
}
.zoom-level-column-left-header {
  display: flex;
  align-items: center;
  flex-grow: 1;
  width: 1px;
  color: var(--hds-foreground-secondary);
  margin-right: var(--base-padding);
  --input-border-radius: var(--hds-border-radius);
  --input-border-color-hover: var(--hds-foreground-tertiary-hover);
  --input-border-color-focussed: var(--hds-object-focused);
  --input-border-color-active: var(--hds-foreground-tertiary);
  --input-border-color-inactive: var(--hds-foreground-tertiary-disabled);
  --input-bg-color-inactive: var(--hds-background-primary);
  --input-bg-color-active: var(--hds-background-secondary);
}
.zoom-level-column-right {
  display: flex;
  align-items: center;
  flex-grow: 1;
  width: 1px;
  color: var(--hds-foreground-secondary);
  margin-left: var(--hds-spacing-1);
}
.zoom-level-column-right .color-display {
  width: var(--hds-spacing-12);
  height: 22px;
}
.zoom-level-column-right hds-dropdown:has(.color-display) {
  margin-top: 3px;
}
.zoom-level-column-buttons {
  --icon-color: var(--hds-foreground-secondary) !important;
}
.zoom-level-column-right-header {
  display: flex;
  align-items: center;
  flex-grow: 1;
  width: 1px;
  color: var(--hds-foreground-secondary);
  margin-left: var(--hds-spacing-1);
  padding-right: calc(calc(2 * var(--base-padding)) + var(--icon-box-size));
}
.zoom-level-column-right-header .color-display {
  width: var(--hds-spacing-12);
  height: 22px;
}
.zoom-level-column-right-header hds-dropdown:has(.color-display) {
  margin-top: 3px;
}
.zoom-level-header {
  display: flex;
  flex-direction: column;
  gap: var(--hds-spacing-1);
}
.zoom-level-header-stacked {
  display: flex;
  flex-direction: column;
  gap: var(--hds-spacing-1);
  margin-bottom: var(--line-height);
}
.zoom-level-header-text {
  color: var(--hds-foreground-secondary);
}
.zoom-level-button-row {
  display: flex;
  align-items: center;
  gap: var(--hds-spacing-2);
}
.zoom-level-header-button {
  cursor: pointer;
  user-select: none;
  width: var(--hds-spacing-7);
  height: var(--hds-spacing-7);
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
  --icon-color: var(--hds-foreground-primary);
}
.zoom-level-header-button:hover {
  background: var(--hds-background-hover);
}
.zoom-level-header-button:focus {
  border: 2px solid var(--hds-object-focused);
}
.zoom-level-header-button:active {
  background: var(--hds-background-press);
}
.zoom-level-header-button.zoom-level-header-button-disabled {
  pointer-events: none;
  --icon-color: var(--hds-foreground-primary-disabled);
}
.zoom-level-header-button-selected {
  cursor: pointer;
  user-select: none;
  width: var(--hds-spacing-7);
  height: var(--hds-spacing-7);
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
  --icon-color: var(--hds-foreground-primary);
  color: var(--selected-item-marker-color);
}
.zoom-level-header-button-selected:hover {
  background: var(--hds-background-hover);
}
.zoom-level-header-button-selected:focus {
  border: 2px solid var(--hds-object-focused);
}
.zoom-level-header-button-selected:active {
  background: var(--hds-background-press);
}
.zoom-level-header-button-selected.zoom-level-header-button-disabled {
  pointer-events: none;
  --icon-color: var(--hds-foreground-primary-disabled);
}
.zoom-level-header-button:first-child,
.zoom-level-header-button-selected:first-child {
  border-left: none;
}
.zoom-level-header-stack {
  display: flex;
  flex-direction: column;
  position: relative;
}
.zoom-level-empty-hint {
  color: var(--hds-foreground-secondary);
  position: absolute;
  top: 100%;
}
.zoom-level-control-points {
  margin-top: var(--hds-spacing-2);
  border-radius: var(--hds-border-radius);
  background: var(--hds-background-object);
}
.zoom-level-control-points-header {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
}
.zoom-level-control-points-label {
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-menu);
  color: var(--font-color-hint);
  --icon-color: var(--font-color-hint);
}
.zoom-level-control-points-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: var(--hds-spacing-2);
  padding: var(--hds-spacing-2) var(--hds-spacing-1);
}
.zoom-level-control-point {
  display: flex;
  flex-direction: column;
  width: 1;
  flex-grow: 1;
}
.zoom-level-control-point-input {
  width: 100%;
}
.zoom-level-control-point-label {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hds-foreground-tertiary);
  margin-top: var(--hds-spacing-1);
}
.zoom-level-control-point-value {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hds-foreground-secondary);
}
.zoom-level-exponent {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: var(--hds-spacing-3);
  padding: var(--hds-spacing-2);
  align-items: center;
  border-radius: var(--hds-border-radius);
  background: var(--hds-background-object);
  margin-top: var(--hds-spacing-2);
  --input-border-radius: var(--hds-border-radius);
  --input-border-color-hover: var(--hds-foreground-tertiary-hover);
  --input-border-color-focussed: var(--hds-object-focused);
  --input-border-color-active: var(--hds-foreground-tertiary);
  --input-border-color-inactive: var(--hds-foreground-tertiary-disabled);
  --input-bg-color-inactive: var(--hds-background-primary);
  --input-bg-color-active: var(--hds-background-secondary);
}
.zoom-level-exponent .ga-slider-input {
  width: unset;
}
.zoom-level-exponent-label {
  color: var(--hds-foreground-secondary);
}
.zoom-level-range-row {
  display: flex;
  align-items: center;
  margin-top: var(--hds-spacing-2);
}
.zoom-level-spreader {
  flex-grow: 1;
}
.zoom-level-type-button {
  cursor: pointer;
  user-select: none;
}
.zoom-level-range {
  fill: var(--input-slider-color);
}
.zoom-level-interpolation-menu-item {
  display: flex;
}
.zoom-level-stop {
  cursor: pointer;
  user-select: none;
}
.base-definition-editor-container {
  margin-top: var(--panel-margin);
  border-radius: var(--panel-body-border-radius);
  background-color: var(--bg-color-panel-content);
  display: flex;
  flex-direction: column;
}
.base-definition-editor-container:first-child {
  margin-top: 0;
}
.definition-editor-container {
  margin-top: var(--panel-margin);
  border-radius: var(--panel-body-border-radius);
  background-color: var(--bg-color-panel-content);
  display: flex;
  flex-direction: column;
  max-height: 40%;
}
.definition-editor-container:first-child {
  margin-top: 0;
}
.definition-editor-container-fullsize {
  margin-top: var(--panel-margin);
  border-radius: var(--panel-body-border-radius);
  background-color: var(--bg-color-panel-content);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  height: 1px;
}
.definition-editor-container-fullsize:first-child {
  margin-top: 0;
}
.definition-editor-scrolleable-content {
  height: 1px;
  flex-grow: 1;
  margin-bottom: calc(2 * var(--base-padding));
}
.definition-editor-limited-content {
  max-height: calc(100% - calc(2 * var(--base-padding)) - calc(2 * var(--base-padding)) - var(/* fill .definition-editor-container */ /* own margin-bottom */ --header-line-height) - calc(2 * var(--base-padding)) - calc(2 * var(--base-padding)) - var(/* .definition-editor-header height */ --line-height) /* button row */);
}
.definition-editor-limited-content-variants {
  max-height: calc(100% - calc(2 * var(--base-padding)) - calc(2 * var(--base-padding)) - var(/* fill .definition-editor-container */ /* own margin-bottom */ --header-line-height) - calc(2 * var(--base-padding)) - calc(2 * var(--base-padding)) - var(/* .definition-editor-header height */ --line-height) - calc(2 * var(--base-padding)) - var(/* show/hide variants button */ --line-height) /* button row */);
}
.definition-editor-variants-button {
  display: flex;
  align-items: center;
  justify-content: center;
}
.definition-editor-button-row {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  margin-top: calc(2 * var(--base-padding));
  margin-right: calc(var(--icon-box-size) + calc(2 * var(--base-padding)));
  margin-bottom: calc(2 * var(--base-padding));
}
.definition-editor-button-row > *:not(:first-child) {
  margin-left: calc(2 * var(--base-padding));
}
.definition-editor-cancel-button {
  cursor: pointer;
  user-select: none;
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-menu);
  color: var(--font-color);
  --icon-color: var(--font-color);
  background-color: transparent;
  border: var(--border-size) solid var(--border-color);
  border-radius: var(--input-border-radius);
  border-color: var(--main-button-color);
  box-sizing: border-box;
  --divider-color-override: var(--main-button-color);
  text-align: center;
  padding: 0px calc(2 * var(--base-padding));
  line-height: calc(var(--line-height) - 2 * var(--border-size));
}
.definition-editor-cancel-button:hover {
  color: var(--font-color-emphasized);
  --divider-color-override: var(--main-button-color-hover);
  border: var(--border-size) solid var(--main-button-color-hover);
}
.definition-editor-cancel-button-disabled {
  cursor: pointer;
  user-select: none;
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-menu);
  color: var(--font-color);
  --icon-color: var(--font-color);
  background-color: transparent;
  border: var(--border-size) solid var(--border-color);
  border-radius: var(--input-border-radius);
  border-color: var(--main-button-color);
  box-sizing: border-box;
  --divider-color-override: var(--main-button-color);
  text-align: center;
  padding: 0px calc(2 * var(--base-padding));
  line-height: calc(var(--line-height) - 2 * var(--border-size));
  opacity: var(--input-disabled-opacity);
  pointer-events: none;
  cursor: default;
}
.definition-editor-cancel-button-disabled:hover {
  color: var(--font-color-emphasized);
  --divider-color-override: var(--main-button-color-hover);
  border: var(--border-size) solid var(--main-button-color-hover);
}
.definition-editor-accept-button {
  cursor: pointer;
  user-select: none;
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-menu);
  color: var(--font-color);
  --icon-color: var(--font-color);
  color: var(--main-button-font-color);
  background-color: var(--main-button-color);
  --divider-color-override: var(--main-button-color);
  border: none;
  border-radius: var(--input-border-radius);
  text-align: center;
  padding: 0px calc(2 * var(--base-padding));
  line-height: var(--line-height);
}
.definition-editor-accept-button:hover {
  color: var(--main-button-font-color-emphasized);
  --divider-color-override: var(--main-button-color-hover);
  background-color: var(--main-button-color-hover);
}
.definition-editor-accept-button-disabled {
  cursor: pointer;
  user-select: none;
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-menu);
  color: var(--font-color);
  --icon-color: var(--font-color);
  color: var(--main-button-font-color);
  background-color: var(--main-button-color);
  --divider-color-override: var(--main-button-color);
  border: none;
  border-radius: var(--input-border-radius);
  text-align: center;
  padding: 0px calc(2 * var(--base-padding));
  line-height: var(--line-height);
  opacity: var(--input-disabled-opacity);
  pointer-events: none;
  cursor: default;
}
.definition-editor-header {
  cursor: pointer;
  user-select: none;
  line-height: var(--header-line-height);
  border-radius: var(--item-border-radius);
  display: flex;
  align-items: center;
  margin: calc(2 * var(--base-padding));
}
.definition-editor-header > *:not(:first-child) {
  margin-left: var(--base-padding);
}
.definition-editor-drag-icon {
  cursor: grab;
}
.definition-editor-name-box {
  width: 0;
  flex-grow: 1;
  display: flex;
}
.definition-editor-name {
  font-family: var(--font-family);
  font-size: var(--text-size);
  color: var(--font-color-group-item);
  --icon-color: var(--font-color-group-item);
  line-height: var(--line-height);
  color: var(--font-color-inactive-item-text);
  --icon-color: var(--font-color-inactive-item-text);
  overflow: hidden;
}
.definition-editor-menu {
  box-shadow: 0 1px 4px 0 var(--shadow-color);
  --divider-color-override: var(--bg-color-popup-divider);
  background-color: var(--popup-color, var(--bg-color-popup));
  border: var(--border-size) solid var(--border-color);
  border-radius: var(--popup-border-radius);
  z-index: 9;
}
.definition-editor-menu-item {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  white-space: nowrap;
  height: var(--header-line-height);
  padding: 0 calc(2 * var(--base-padding));
  font-family: var(--font-family);
  font-size: var(--text-size-menu);
  line-height: var(--line-height);
  color: var(--font-color-secondary);
  --icon-color: var(--font-color-secondary);
  padding: 0 calc(4 * var(--base-padding));
  height: var(--popup-item-height-large);
}
.definition-editor-menu-item:hover {
  background-color: var(--bg-color-popup-item-hover);
  font-family: var(--font-family);
  font-size: var(--text-size-menu);
  line-height: var(--line-height);
  color: var(--font-color-primary);
  --icon-color: var(--font-color-secondary);
}
.definition-editor-menu-item-disabled {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  white-space: nowrap;
  height: var(--header-line-height);
  padding: 0 calc(2 * var(--base-padding));
  font-family: var(--font-family);
  font-size: var(--text-size-menu);
  line-height: var(--line-height);
  color: var(--font-color-disabled);
  --icon-color: var(--font-color-disabled);
  padding: 0 calc(4 * var(--base-padding));
  height: var(--popup-item-height-large);
  cursor: default;
}
.definition-editor-file {
  display: flex;
  align-items: center;
  margin: var(--base-padding) calc(var(--icon-box-size) + calc(2 * var(--base-padding)));
}
.definition-editor-file-disabled {
  display: flex;
  align-items: center;
  margin: var(--base-padding) calc(var(--icon-box-size) + calc(2 * var(--base-padding)));
  opacity: var(--input-disabled-opacity);
  pointer-events: none;
  cursor: default;
}
.definition-editor-file-selection {
  width: 1px;
  flex-grow: 1;
  flex-shrink: 1;
}
.definition-editor-file-copy {
  margin-left: var(--base-padding);
  margin-right: calc(-1 * (var(--base-padding) + var(--icon-box-size)));
}
.definition-editor-editor {
  margin: 0 calc(var(--icon-box-size) + calc(2 * var(--base-padding))) 0 calc(var(--icon-box-size) + calc(2 * var(--base-padding)));
}
.definition-editor-variant-base {
  border-left: var(--selected-item-selection-bar-width) solid;
  border-color: #52A3DB;
}
.definition-editor-variant-conditioned {
  border-left: var(--selected-item-selection-bar-width) solid;
  border-color: #82DBBD;
}
.definition-editor-any-type-icon {
  --icon-color: rgba(255, 255, 255, 0.6);
}
.definition-editor-condition-type-icon {
  --icon-color: #4791FF;
}
.definition-editor-value-type-icon {
  --icon-color: #F1894A;
  transform: scaleX(-1);
}
.definition-make-definition-button {
  margin-right: var(--base-padding);
}
.definition-editor-make-definition-icon {
  --icon-color: #F1894A;
  transform: scaleX(-1);
}
.definition-editor-copy-container {
  background-color: var(--bg-color-item);
  display: flex;
  flex-direction: column;
  border-radius: var(--item-border-radius);
  margin: 0 calc(calc(var(--icon-box-size) + calc(2 * var(--base-padding))) - calc(2 * var(--base-padding)));
  padding: calc(2 * var(--base-padding));
}
.definition-editor-copy-container > *:not(:first-child) {
  margin-top: calc(2 * var(--base-padding));
}
.definition-editor-copy-label {
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height);
  color: var(--font-color-hint);
  text-transform: uppercase;
}
.definition-editor-copy-buttons {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
.definition-editor-copy-buttons > *:not(:first-child) {
  margin-left: calc(2 * var(--base-padding));
}
.definition-filter-menu-item {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  white-space: nowrap;
  height: var(--header-line-height);
  padding: 0 calc(2 * var(--base-padding));
  font-family: var(--font-family);
  font-size: var(--text-size-menu);
  line-height: var(--line-height);
  color: var(--font-color-secondary);
  --icon-color: var(--font-color-secondary);
  padding: 0 calc(4 * var(--base-padding));
  height: var(--popup-item-height-large);
  justify-content: space-between;
}
.definition-filter-menu-item:hover {
  background-color: var(--bg-color-popup-item-hover);
  font-family: var(--font-family);
  font-size: var(--text-size-menu);
  line-height: var(--line-height);
  color: var(--font-color-primary);
  --icon-color: var(--font-color-secondary);
}
.definition-filter-menu {
  box-shadow: 0 1px 4px 0 var(--shadow-color);
  --divider-color-override: var(--bg-color-popup-divider);
  background-color: var(--popup-color, var(--bg-color-popup));
  border: var(--border-size) solid var(--border-color);
  border-radius: var(--popup-border-radius);
  z-index: 9;
  width: var(--popup-menu-width);
}
.definition-filter-header {
  display: flex;
  flex-direction: row;
}
.definition-filter-filter-row {
  flex-grow: 1;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: calc(-1 * var(--base-padding));
}
.definition-filter-filter-row > * {
  margin: var(--base-padding);
}
.definition-filter-button {
  cursor: pointer;
  user-select: none;
}
.definition-filter-button-active {
  cursor: pointer;
  user-select: none;
  --icon-color: var(--font-color-emphasized);
}
.definition-filter-new-definition-button {
  cursor: pointer;
  user-select: none;
}
.definition-filter-new-definition-button-disabled {
  cursor: pointer;
  user-select: none;
  opacity: var(--input-disabled-opacity);
  pointer-events: none;
  cursor: default;
}
.definition-filter-file-filter {
  display: flex;
  align-items: center;
  margin-top: calc(2 * var(--base-padding));
}
.definition-filter-file-label {
  font-family: var(--font-family);
  font-size: var(--text-size);
  color: var(--font-color-group-item);
  --icon-color: var(--font-color-group-item);
  line-height: var(--line-height);
  color: var(--font-color-inactive-item-text);
  --icon-color: var(--font-color-inactive-item-text);
  margin: 0 calc(2 * var(--base-padding));
}
.drop-definition {
  display: flex;
  flex-grow: 1;
}
.drop-definition-draggging {
  outline: var(--drop-target-outline-size) dashed var(--drop-target-color);
  outline-offset: var(--drop-target-outline-offset);
}
.definition-list-item {
  font-family: var(--font-family);
  font-size: var(--text-size);
  color: var(--font-color-group-item);
  --icon-color: var(--font-color-group-item);
  line-height: var(--line-height);
  color: var(--font-color-inactive-item-text);
  --icon-color: var(--font-color-inactive-item-text);
  cursor: pointer;
  user-select: none;
  margin-top: var(--panel-margin);
  border-radius: var(--panel-body-border-radius);
  background-color: var(--bg-color-panel-content);
  display: flex;
  align-items: center;
  padding: var(--base-padding) calc(2 * var(--base-padding));
}
.definition-list-item:first-child {
  margin-top: 0;
}
.definition-list-item:hover {
  color: var(--font-color-item-text-hover);
  --icon-color: var(--font-color-item-text-hover);
}
.definition-list-item-drag-container {
  margin-right: var(--base-padding);
}
.definition-list-item-drag-icon {
  cursor: grab;
}
.definition-list-item-name {
  overflow: hidden;
  flex-grow: 1;
  margin-left: calc(2 * var(--base-padding));
}
.definition-list-item-name-selected {
  overflow: hidden;
  flex-grow: 1;
  margin-left: calc(2 * var(--base-padding));
  font-family: var(--font-family);
  font-size: var(--text-size);
  color: var(--font-color-group-item);
  --icon-color: var(--font-color-group-item);
  line-height: var(--line-height);
}
.definition-list-item-name-unused {
  overflow: hidden;
  flex-grow: 1;
  margin-left: calc(2 * var(--base-padding));
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-menu);
  color: var(--font-color-disabled);
  --icon-color: var(--font-color-disabled);
}
.definition-list-item-menu {
  box-shadow: 0 1px 4px 0 var(--shadow-color);
  --divider-color-override: var(--bg-color-popup-divider);
  background-color: var(--popup-color, var(--bg-color-popup));
  border: var(--border-size) solid var(--border-color);
  border-radius: var(--popup-border-radius);
  z-index: 9;
}
.definition-list-item-menu-entry {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  white-space: nowrap;
  height: var(--header-line-height);
  padding: 0 calc(2 * var(--base-padding));
  font-family: var(--font-family);
  font-size: var(--text-size-menu);
  line-height: var(--line-height);
  color: var(--font-color-secondary);
  --icon-color: var(--font-color-secondary);
  padding: 0 calc(4 * var(--base-padding));
  height: var(--popup-item-height-large);
}
.definition-list-item-menu-entry:hover {
  background-color: var(--bg-color-popup-item-hover);
  font-family: var(--font-family);
  font-size: var(--text-size-menu);
  line-height: var(--line-height);
  color: var(--font-color-primary);
  --icon-color: var(--font-color-secondary);
}
.definition-list-item-menu-entry-disabled {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  white-space: nowrap;
  height: var(--header-line-height);
  padding: 0 calc(2 * var(--base-padding));
  font-family: var(--font-family);
  font-size: var(--text-size-menu);
  line-height: var(--line-height);
  color: var(--font-color-disabled);
  --icon-color: var(--font-color-disabled);
  padding: 0 calc(4 * var(--base-padding));
  height: var(--popup-item-height-large);
  cursor: default;
}
.definition-large-editor-container {
  width: var(--panel-width);
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--panel-margin) 0 0 var(--panel-margin);
  width: var(--panel-large-width);
}
.definition-large-editor-header {
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-menu);
  color: var(--font-color-emphasized);
  --icon-color: var(--font-color-emphasized);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
}
.definition-large-editor-label {
  margin-left: calc(2 * var(--base-padding));
  flex-grow: 1;
}
.definition-library-list {
  height: 1px;
  flex-grow: 1;
  display: flex;
  margin-top: var(--half-panel-margin);
}
.definition-library-search {
  display: flex;
  align-items: center;
}
.panel {
  width: var(--panel-width);
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--panel-margin) 0 0 var(--panel-margin);
}
.panel-auto-width {
  width: var(--panel-width);
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--panel-margin) 0 0 var(--panel-margin);
  width: auto;
  max-width: var(--panel-width);
}
.panel-dark {
  --panel-section-bg-override: var(--bg-color-panel-section-dark);
}
.panel-dark .panel-body {
  background-color: var(--bg-color-panel-dark);
}
.panel-dark .panel-header {
  background-color: var(--bg-color-panel-header-dark);
}
.panel-white {
  --base-padding: 4px;
  --half-panel-margin: 1px;
  --panel-margin: 2px;
  --panel-body-border-radius: 4px;
  --panel-header-border-radius: 5px;
  --font-family: "Fira Regular";
  --font-family-subdued: "Fira Light";
  --font-family-emphasized: "Fira Medium";
  --text-size-dashboard-title: 18px;
  --text-size-dashboard-section-title: 16px;
  --text-size-dashboard-description: 16px;
  --text-size-big: 16px;
  --text-size-big-button: 14px;
  --text-size-big-input: 14px;
  --text-size-menu: 12px;
  --text-size-dialog: 14px;
  --text-size: 12px;
  --text-size-tiny: 10px;
  --text-size-super-tiny: 8px;
  --text-size-drag-and-drop-title: 20px;
  --text-size-dialog-big: 18px;
  --line-height-tiny: 12px;
  --line-height-menu: 16px;
  --line-height: 20px;
  --header-line-height: 24px;
  --line-height-dashboard-title: 26px;
  --line-height-dashboard-section-title: 24px;
  --line-height-dashboard-description: 24px;
  --line-height-drag-and-drop-title: 24px;
  --line-height-dialog-header: 16px;
  --line-height-dialog-content: 20px;
  --divider-thickness: 1px;
  --divider-spacing: 0px;
  --divider-padding: calc(4 * var(--base-padding));
  --popup-border-radius: 4px;
  --popup-border-radius-large: 8px;
  --popup-item-height-large: 40px;
  --popup-menu-width: 200px;
  --popup-footer-height: 64px;
  --popup-header-height: 64px;
  --popup-padding-h: 24px;
  --popup-padding-v: 20px;
  --white-popup-max-height: 280px;
  --popup-description-height: 200px;
  --popup-item-selection-height: 2px;
  --popup-image-width: 400px;
  --popup-image-height: 175px;
  --border-size: 1px;
  --border-size-highlighted: 2px;
  --border-radius: 4px;
  --button-icon-spacing: 8px;
  --input-height: 22px;
  --input-width: 93px;
  --number-input-width: var(--input-width);
  --file-input-width: var(--input-width);
  --dash-input-width: 125px;
  --input-prefix-width: 6px;
  --input-prefix-left-padding: 5px;
  --input-border-radius: 2px;
  --input-border-size: 1px;
  --input-padding: 4px;
  --input-icon-padding: 6px;
  --input-disabled-opacity: 0.5;
  --boolean-input-height: 16px;
  --sliding-toggle-height: 20px;
  --sliding-toggle-width: 40px;
  --input-animation-duration: 300ms;
  --input-animation-duration-quick: 100ms;
  --item-border-radius: 2px;
  --reduced-item-height: 28px;
  --main-item-height: 35px;
  --large-main-item-height: 48px;
  --icon-button-group-height: 28px;
  --icon-box-size: 16px;
  --icon-text-inline-size: var(--text-size);
  --icon-header-size: var(--header-line-height);
  --icon-big-size: 40px;
  --icon-padding-size: calc(2 * var(--base-padding));
  --tooltip-text-size: 13px;
  --tooltip-line-height: 18px;
  --tooltip-nibble-size: 6px;
  --tooltip-nibble-indentation: 18px;
  --tooltip-width: 200px;
  --tooltip-width-wide: 320px;
  --selected-item-selection-bar-width: 3px;
  --selected-group-item-selection-bar-width: 4px;
  --inactive-item-opacity: 0.4;
  --graph-width: 2px;
  --zoomlevel-line-width: 1px;
  --collapsible-margin: 12px;
  --scrollbar-width: 8px;
  --scrollbar-expanded-grabber-width: 6px;
  --scrollbar-grabber-width: 4px;
  --map-overlay-margin: 12px;
  --map-overlay-item-size: 40px;
  --menubar-size: 48px;
  --menubar-title-width: 300px;
  --menubar-select-menu-width: 150px;
  --menubar-icon-size: 32px;
  --menubar-lang-dropdown-height: 400px;
  --menubar-notification-dot-size: 8px;
  --menubar-scheme-selection-item-label-width: 200px;
  --search-field-height: 25px;
  --panel-small-width: 230px;
  --panel-width: 300px;
  --panel-large-width: 360px;
  --panel-tab-height: 25px;
  --panel-empty-content-top-offset: 200px;
  --panel-header-button-size: 20px;
  --slider-width: 4px;
  --slider-length: 82px;
  --slider-grabber-size: 14px;
  --slider-tick-length: 2px;
  --slider-tick-width: 1px;
  --slider-tick-offset: 1px;
  --navigation-bar-size: 40px;
  --drag-item-divider-height: 1px;
  --drag-item-divider-end-size: 5px;
  --notification-container-height: 32px;
  --notification-toast-height: 56px;
  --notification-animation-curve: cubic-bezier(0.7, 0, 0.5, 1.5);
  --notification-animation-duration: 200ms;
  --color-picker-height: 150px;
  --color-picker-crosshair-size: 15px;
  --color-picker-input-width: 70px;
  --color-picker-slider-track-height: 8px;
  --color-picker-slider-handle-size: 12px;
  --color-picker-container-width: 320px;
  --color-picker-eyedrop-size: 24px;
  --icon-picker-container-width: 254px;
  --icon-picker-container-height: 318px;
  --icon-picker-icon-size: 24px;
  --swatch-height: 22px;
  --swatch-width: 50px;
  --ga-blend-mode-btn-width: 52px;
  --basic-template-thumbnail-height: 40px;
  --basic-template-thumbnail-width: 56px;
  --basic-template-thumbnail-border: 2px;
  --basic-template-thumbnail-border-offset: 1px;
  --window-header-height: 73px;
  --extra-small-window-width: 468px;
  --extra-small-window-height: 212px;
  --small-window-width: 460px;
  --small-window-height: 280px;
  --medium-window-width: 380px;
  --medium-window-height: 320px;
  --big-window-width: 640px;
  --big-window-height: 520px;
  --wide-big-window-width: 720px;
  --wide-big-window-height: 520px;
  --wide-extra-big-window-width: 950px;
  --wide-extra-big-window-height: 520px;
  --fluid-window-height: calc(100vh - 200px);
  --fluid-window-width: calc(100vw - 512px);
  --search-bar-height: 50px;
  --icon-window-drag-area-height: 310px;
  --medium-area-height: 100px;
  --big-area-height: 180px;
  --extra-big-area-height: 320px;
  --icon-window-area-height: 393px;
  --drop-target-outline-size: 1px;
  --drop-target-outline-offset: 1px;
  --image-picker-crosshair-size: 8px;
  --image-picker-border-size: 2px;
  --icon-window-side-bar-width: 207px;
  --icon-window-icon-entity-width: 77px;
  --icon-window-icon-entity-height: 88px;
  --icon-window-icon-entity-background-size: 48px;
  --icon-window-icon-entity-background-size-small: 24px;
  --icon-window-change-view-header: 32px;
  --icon-window-change-item-text-width: 100px;
  --icon-window-change-item-indentation: 53px;
  --icon-window-resource-view-header: 64px;
  --icon-window-name-pill-container-width: 240px;
  --icon-window-name-pill-border-radius: 16px;
  --icon-window-item-border-width: 2px;
  --icon-window-notification-height: 32px;
  --medium-button-height: 24px;
  --button-height: 32px;
  --large-button-height: 40px;
  --dashboard-item-width: 340px;
  --dashboard-item-height: 160px;
  --dashboard-thumbnail-height: 176px;
  --dashboard-input-height: 32px;
  --component-highlight-thickness: 2px;
  --modifier-group-item-indentation: 24px;
  --region-specific-bar-width: 2px;
  --region-specific-bar-height: 16px;
  --modifier-affected-specific-margin: -20px;
  --modifier-affected-specific-tooltip-width: 296px;
  --tooltip-content-max-width: 225px;
  --modifier-overlay-panel-header-height: 38px;
  --drag-item-divider: #126EF8;
  --drag-item-highlight: rgba(15, 22, 33, 0.1);
  --font-color-highlighted: #126EF8;
  --font-color-highlighted-emphasized: #d0e2fe;
  --font-color-emphasized: #0E1520;
  --font-color-active: #1C232E;
  --font-color: #272F3A;
  --font-color-subdued: #535C6B;
  --font-color-hint: var(--hds-gray-600);
  --font-color-disabled: #8890A0;
  --main-button-font-color: #272F3A;
  --main-button-font-color-emphasized: #0f1621;
  --font-color-menu: #535C6B;
  --font-color-tooltip: #1C232E;
  --font-color-group-item: #1C232E;
  --font-color-dialog: rgba(16, 23, 35, 0.95);
  --font-color-oncolor: #ffffff;
  --font-color-oncolor-hover: #ffffff;
  --font-color-oncolor-subdued: rgba(225, 234, 254, 0.58);
  --font-color-panel-notification: #E9ECF2;
  --font-color-inactive-item-text: #333B47;
  --font-color-item-text-hover: #0f1621;
  --font-color-hds-tertiary: rgba(34, 54, 89, 0.41);
  --font-color-hds-tertiary-hover: rgba(19, 35, 67, 0.5);
  --font-color-hds-tertiary-disabled: rgba(0, 26, 77, 0.2);
  --font-color-body: #3F4855;
  --font-color-primary: rgba(16, 23, 35, 0.95);
  --font-color-primary-disabled: rgba(0, 26, 77, 0.2);
  --font-color-secondary: rgba(7, 23, 49, 0.6);
  --font-color-secondary-disabled: rgba(0, 26, 77, 0.2);
  --header-icon-color: #535C6B;
  --active-icon-color: #1C232E;
  --active-icon-color-inverted: #ffffff;
  --inactive-icon-color: #6A7483;
  --disabled-item-group-text-color: #6A7483;
  --hint-icon-color: #6A7483;
  --disabled-icon-color: #8890A0;
  --action-icon-color: #535C6B;
  --disabled-action-icon-color: #8890A0;
  --error-icon-color: #CF001A;
  --warning-icon-color: #9E6400;
  --warning-icon-color-hover: #FAAA1E;
  --inactive-icon-border-color: #A4ACBA;
  --slider-input-border-color: #A4ACBA;
  --panel-header-button-bg: #f3f3f4;
  --panel-tab-bg-unselected: rgba(255, 255, 255, 0.8);
  --divider-color: rgba(255, 255, 255, 0.2);
  --divider-color-ondark: rgba(15, 22, 33, 0.2);
  --sub-item-box-border-color: #E9ECF2;
  --sub-item-box-bg-color: #CCD1DB;
  --bg-color-ui: #f3f3f4;
  --bg-color-panel-base: #ffffff;
  --bg-color-panel-content: #e7e8e9;
  --bg-color-modifier-panel-content: #ffffff;
  --bg-color-panel-section: #ffffff;
  --bg-color-content: rgba(255, 255, 255, 0.4);
  --bg-color-panel-dark: #ffffff;
  --bg-color-panel-header-dark: #ffffff;
  --bg-color-panel-group-item-selected: #ffffff;
  --border-color-panel-item: #ffffff;
  --bg-color-item: rgba(255, 255, 255, 0.9);
  --bg-color-item-selected: rgba(255, 255, 255, 0.95);
  --bg-color-item-highlighted: rgba(255, 255, 255, 0.6);
  --bg-color-item-header: #cfd0d3;
  --bg-color-button-group: #f3f3f4;
  --blur-popup-color: rgba(8, 23, 52, 0.6);
  --bg-color-popup: #ffffff;
  --bg-color-popup-item-hover: #ffffff;
  --bg-color-popup-divider: rgba(15, 55, 115, 0.1);
  --bg-window: #ffffff;
  --bg-hds-secondary: #ffffff;
  --bg-window-content: rgba(255, 255, 255, 0.4);
  --bg-window-header: #e7e8e9;
  --bg-global-adjustments: rgba(255, 255, 255, 0.9);
  --bg-color-inline-box: rgba(255, 255, 255, 0.4);
  --border-color: rgba(15, 22, 33, 0.1);
  --border-color-highlighted: #1C232E;
  --bg-selected-item: var(--hds-blue-onlight-400-020);
  --main-button-color: #126EF8;
  --main-button-color-hover: #0D5ED9;
  --action-text-button: #126EF8;
  --action-text-button-hover: #0D5ED9;
  --normal-button-bg-color: rgba(255, 255, 255, 0.8);
  --normal-button-bg-color-hover: rgba(255, 255, 255, 0.95);
  --button-primary-bg: linear-gradient(270deg, #65EBE2 0%, #6B9CFF 100%);
  --button-primary-bg-hover: linear-gradient(90deg, #3675F5 0%, #1BE0D7 100%);
  --button-primary-bg-active: linear-gradient(90deg, #1854CC 0%, #08CCC3 100%);
  --button-primary-bg-disabled: linear-gradient(270deg, rgba(125, 230, 225, 0.4) 0%, rgba(128, 170, 255, 0.4) 100%);
  --button-primary-color: rgba(16, 25, 37, 0.9);
  --button-primary-color-disabled: rgba(18, 41, 84, 0.3);
  --button-secondary-bg: rgba(0, 55, 141, 0.05);
  --button-secondary-bg-hover: rgba(15, 55, 115, 0.1);
  --button-secondary-bg-active: rgba(30, 43, 70, 0.6);
  --button-secondary-bg-disabled: rgba(0, 55, 141, 0.05);
  --button-secondary-color: rgba(16, 23, 35, 0.95);
  --button-secondary-color-disabled: rgba(18, 41, 84, 0.3);
  --button-danger-bg: #CF001A;
  --button-danger-bg-hover: #A5002F;
  --button-danger-bg-active: #8F0029;
  --button-danger-bg-disabled: rgba(207, 0, 26, 0.3);
  --button-danger-color: #ffffff;
  --button-warn-bg: #FFBD09;
  --button-warn-bg-hover: #FAAA1E;
  --button-warn-bg-active: #9E6400;
  --button-warn-bg-disabled: rgba(255, 190, 10, 0.3);
  --button-warn-color: rgba(15, 24, 36, 0.9);
  --button-warn-color-active: #FFFFFF;
  --button-oncolor-primary-bg: #ffffff;
  --button-oncolor-primary-color: rgba(16, 23, 35, 0.95);
  --button-oncolor-primary-bg-disabled: #ffffff;
  --button-oncolor-primary-color-disabled: rgba(18, 41, 84, 0.3);
  --button-oncolor-primary-bg-hover: #F2F5F9;
  --button-oncolor-primary-bg-active: #DADFE7;
  --button-oncolor-secondary-bg: rgba(34, 54, 89, 0.41);
  --button-oncolor-secondary-color: #ffffff;
  --button-oncolor-secondary-bg-disabled: rgba(34, 54, 89, 0.41);
  --button-oncolor-secondary-color-disabled: rgba(225, 234, 254, 0.58);
  --button-oncolor-secondary-bg-hover: rgba(19, 35, 67, 0.5);
  --button-oncolor-secondary-bg-active: rgba(7, 23, 49, 0.6);
  --background-object: rgba(0, 55, 141, 0.05);
  --background-object-hover: rgba(15, 55, 115, 0.1);
  --button-apply-modifiers-bg: rgba(255, 255, 255, 0.8);
  --button-apply-modifiers-bg-hover: rgba(255, 255, 255, 0.7);
  --button-apply-modifiers-bg-disabled: rgba(255, 255, 255, 0.9);
  --button-apply-modifiers-border: #4791FF;
  --button-apply-modifiers-border-hover: #5FB2FF;
  --button-apply-modifiers-border-disabled: rgba(18, 110, 248, 0.4);
  --colorblind-popup-divider: rgba(15, 54, 113, 0.1);
  --colorblind-popup-header-bg-color: #ffffff;
  --colorblind-popup-body-bg-color: #F2F5F9;
  --colorblind-popup-body-font-color: #535C6B;
  --colorblind-popup-button-color: rgba(15, 54, 113, 0.1);
  --input-border-color-focussed: #126EF8;
  --input-border-color-active: #0f1621;
  --input-border-color-hover: rgba(15, 22, 33, 0.3);
  --input-border-color-inactive: #6A7483;
  --input-border-color-error: #D35566;
  --input-bg-color-active: #ffffff;
  --input-bg-color-inactive: rgba(255, 255, 255, 0.3);
  --input-bg-color-inactive-lighter: rgba(255, 255, 255, 0.5);
  --hds-input-bg-color: #ffffff;
  --hds-input-border: rgba(34, 54, 89, 0.41);
  --hds-input-border-color-focussed: #0BC7C2;
  --hds-input-border-color-hover: rgba(19, 35, 67, 0.5);
  --hds-input-caret-color: rgba(16, 23, 35, 0.95);
  --hds-input-placeholder-color: rgba(34, 54, 89, 0.41);
  --hds-input-color: rgba(16, 23, 35, 0.95);
  --input-inner-shadow-color: rgba(0, 0, 0, 0.1);
  --input-caret-color: #126EF8;
  --input-slider-bg-color: rgba(15, 22, 33, 0.1);
  --input-slider-color: #126EF8;
  --color-picker-slider-grabber-color: #ffffff;
  --color-picker-bg-color: #3F4855;
  --color-picker-input-border-color: #8890A0;
  --color-picker-input-bg-color: #1C232E;
  --color-picker-input-color: #E9ECF2;
  --dropdown-bg-color-opened: #e7e8e9;
  --dropdown-item-color: #ffffff;
  --dropdown-item-color-selected: #e7e8e9;
  --dropdown-item-color-hover: #ffffff;
  --shadow-color: rgba(15, 22, 33, 0.4);
  --drop-shadow-gradient: linear-gradient(to bottom, rgba(233, 236, 242, 0.6) 0%, transparent 100%);
  --selected-item-marker-color: #126EF8;
  --selection-color: #126EF8;
  --selection-gradient: rgba(18, 110, 248, 0.1);
  --region-specific-color: var(--hds-purple-onlight-400);
  --region-specific-color-hover: var(--hds-purple-onlight-200);
  --region-specific-color-bg-hover: rgba(140, 107, 174, 0.8);
  --region-specific-color-bg-pressed: rgba(140, 107, 174, 0.9);
  --region-specific-icon-color: rgba(247, 250, 253, 0.2);
  --region-specific-bg-color: rgba(179, 156, 201, 0.3);
  --jp-region-specific-bg-color: #49475d;
  --notification-color: #D35566;
  --notification-error-color: #CF001A;
  --notification-warning-color: #FFBD09;
  --notification-overlay-bg-color: #3F4855;
  --notification-overlay-bg-hover-color: #535C6B;
  --notification-overlay2-bg-color: #1C232E;
  --component-highlight-color: #6A7483;
  --component-highlight-color-subdued: #A4ACBA;
  --graph-color: var(--hds-background-inverse);
  --graph-stop: var(--hds-background-inverse);
  --graph-bg: var(--hds-background-primary);
  --graph-border: var(--hds-foreground-tertiary-hover);
  --graph-border-hover: var(--hds-foreground-tertiary-press);
  --dash-color: #0f1621;
  --scrollbar-color: rgba(15, 22, 33, 0.2);
  --scrollbar-color-active: rgba(15, 22, 33, 0.2);
  --scrollbar-color-hover: rgba(15, 22, 33, 0.4);
  --slider-grabber-outline-color: rgba(218, 239, 250, 0.12);
  --slider-tick-color: rgba(15, 22, 33, 0.4);
  --chart-item-color-selected: #126EF8;
  --chart-item-color: rgba(15, 22, 33, 0.2);
  --chart-selection-bg: rgba(15, 22, 33, 0.05);
  --color-swatch-border: #272F3A;
  --inactive-color-swatch: #6A7483;
  --hover-inactive-color-swatch: #A4ACBA;
  --map-picker-color-border: rgba(15, 22, 33, 0.1);
  --map-picker-no-color-bg: rgba(255, 255, 255, 0.6);
  --code-string-color: #126EF8;
  --drop-target-color: #126EF8;
  --path-type-color-text: #000;
  --path-type-color-scheme: #000;
  --path-type-color-layer: rgba(255, 255, 255, 0.1);
  --path-type-color-condition: rgba(255, 255, 255, 0.2);
  --path-type-color-styleset: #2E468F;
  --path-type-color-style: #2C48A1;
  --path-type-color-attribute: rgba(15, 22, 33, 0.4);
  --path-type-color-definition: #52A3DB;
  --path-type-color-subcondition: #3A7BDB;
  --path-type-color-zoomlevel: #000;
  --path-type-color-height: #000;
  --image-picker-popup-color: #ffffff;
  --grid-placement-hover: rgba(15, 22, 33, 0.6);
  --grid-placement-selected: #126EF8;
  --grid-placement-selected-secondary: rgba(18, 110, 248, 0.8);
  --grid-placement-unselected: rgba(15, 22, 33, 0.1);
  --tag-pill-bg-color: #ffffff;
  --tag-pill-included: #00C78F;
  --tag-pill-excluded: #EC610E;
  --help-bg-color: #D468A0;
  --bg-dashboard-item: #ffffff;
  --tooltip-bg: var(--hds-background-inverse);
  --tooltip-text: var(--hds-inverse-primary);
  --menu-bar-bg: rgba(255, 255, 255, 0.95);
  --menu-bar-bg-hover: rgba(0, 55, 141, 0.05);
  --menu-bar-item-description-color: #A4ACBA;
  --notification-info-bg: #15BDB9;
  --notification-warning-bg: #92600C;
  --notification-confirmation-bg: #0A7651;
  --notification-error-bg: #840B2E;
  --backgrounds-background-object: rgba(218, 239, 250, 0.12);
  --modifier-header-bg: var(--hds-aqua-onlight-400);
  --modifier-preset-border: #e7ebf1;
  --modifier-dot--default-state: var(--hds-accent);
  --modifier-dot--hover-state: var(--hds-aqua-onlight-500);
  --modifier-overlay-panel-preset-bg: #EDFBFA;
  --modifier-overlay-panel-create-apply-modifiers-bg: #F6FDFD;
  --modifier-overlay-panel-create-modifiers-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.08);
  --modifier-overlay-panel-create-apply-modifiers-active-bg: rgba(95, 178, 255, 0.2);
  --modifier-overlay-panel-drag-drop-box-bg: rgba(64, 71, 82, 0.5);
  --modifier-overlay-active-bg: #e3e6eb99;
  --modifier-overlay-active-header-bg: #dddfe466;
  --modifier-overlay-active-border: #CED4DF;
  --modifier-overlay-header-bg: #00378f08;
  --scheme-selector-bar-bg: #dae6fa;
  --scheme-selector-shadow: 0px 0px 2px 0px var(--Dropshadow-overlay-dropshadow-layer-A-overlay, rgba(0, 25, 75, 0.12)), 0px 6px 6px 0px var(--Dropshadow-overlay-dropshadow-layer-B-overlay, rgba(0, 25, 75, 0.06)), 0px 0px 21px 0px var(--Dropshadow-overlay-dropshadow-layer-C-overlay, rgba(0, 25, 75, 0.05)), 0px 13px 13px 0px var(--Dropshadow-overlay-dropshadow-layer-D-overlay, rgba(0, 25, 75, 0.08));
  --quick-tour-highlight: var(--hds-blue-ondark-400);
  --file-entity-bg-hover: var(--hds-blue-onlight-400-010);
  --file-entity-bg-selected: var(--hds-blue-onlight-400-020);
  --thumbnail-border-color: var(--hds-foreground-divider);
}
.panel-header {
  display: flex;
  flex-direction: column;
  border-radius: var(--panel-header-border-radius) var(--panel-header-border-radius) 0 0;
  background-color: var(--bg-color-panel-content);
  padding: calc(2 * var(--base-padding));
  margin-bottom: var(--panel-margin);
}
.panel-header > *:not(:first-child) {
  margin-top: calc(2 * var(--base-padding));
}
.panel-body {
  position: relative;
  height: 1px;
  flex-grow: 1;
  background-color: var(--bg-color-panel-base);
  border-radius: var(--panel-body-border-radius);
  display: flex;
  flex-direction: column;
}
.panel-white > .panel-body {
  border-radius: 0;
}
.panel-default-width {
  width: var(--panel-width);
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--panel-margin) 0 0 var(--panel-margin);
}
.panel-small-width {
  width: var(--panel-width);
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--panel-margin) 0 0 var(--panel-margin);
  width: var(--panel-small-width);
}
.panel-double-width {
  width: var(--panel-width);
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--panel-margin) 0 0 var(--panel-margin);
  width: calc(2 * var(--panel-width));
}
.panel-large-width {
  width: var(--panel-width);
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--panel-margin) 0 0 var(--panel-margin);
  width: var(--panel-large-width);
}
.panel-half-screen-width {
  width: var(--panel-width);
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--panel-margin) 0 0 var(--panel-margin);
  width: calc(50vw - var(--navigation-bar-size));
}
.panel-two-thirds-screen-width {
  width: var(--panel-width);
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--panel-margin) 0 0 var(--panel-margin);
  padding: 0;
  width: calc(66vw - var(--navigation-bar-size));
  height: 100vh;
}
.panel-auto-width {
  width: var(--panel-width);
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--panel-margin) 0 0 var(--panel-margin);
  padding: 0;
  height: 100vh;
  width: unset;
  max-width: unset;
}
.panel-title {
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-menu);
  color: var(--font-color-emphasized);
  --icon-color: var(--font-color-emphasized);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
}
.panel-icon {
  margin-right: calc(2 * var(--base-padding));
}
.panel-name {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.panel-close-button {
  cursor: pointer;
  user-select: none;
  --icon-color: var(--inactive-icon-color);
  position: absolute;
  right: 0;
  display: flex;
  align-items: center;
  width: var(--panel-header-button-size);
  height: var(--panel-header-button-size);
  border-radius: 50%;
  background-color: var(--panel-header-button-bg);
}
.panel-help {
  cursor: pointer;
  user-select: none;
  z-index: 1;
  margin-top: calc(var(--hds-spacing-1) - var(--hds-spacing-1px));
  margin-left: calc(2 * var(--base-padding));
}
.panel-highlight {
  --highlight-color: var(--component-highlight-color-subdued);
}
.panel-v2 {
  padding: 0px;
  overflow-y: hidden;
}
.panel-v2-header {
  display: flex;
  flex-direction: column;
}
.panel-v2-title {
  background-color: var(--hds-background-primary);
  border-bottom: 1px solid var(--hds-foreground-divider);
  height: var(--hds-spacing-8);
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.panel-v2-icon {
  display: flex;
}
.panel-v2-help {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  margin-left: var(--hds-spacing-2);
}
.panel-v2-help .panel-v2-help-icon {
  --icon-color: var(--hds-foreground-tertiary);
}
.panel-v2-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  height: var(--hds-spacing-7);
  margin-right: var(--hds-spacing-2);
}
.panel-v2-search {
  margin: var(--hds-spacing-0) var(--hds-spacing-1);
  width: 100%;
}
#modifiers-panel.panel-v2 .panel-v2-title {
  background-color: var(--modifier-header-bg);
}
#modifiers-panel.panel-v2 .panel-v2-text {
  color: var(--hds-background-secondary);
}
#modifiers-panel.panel-v2 .panel-v2-icon {
  --hds-icon-color: var(--hds-background-secondary);
}
#modifiers-panel.panel-v2 .panel-v2-help .panel-v2-help-icon {
  --icon-color: var(--hds-background-secondary);
}
#modifiers-panel.panel-v2 .panel-v2-subsection {
  padding: var(--hds-spacing-1) var(--hds-spacing-2);
  border-bottom: var(--hds-spacing-1px) solid var(--hds-foreground-divider);
}
#layers-panel.panel-v2 {
  width: 250px;
}
#layers-panel.panel-v2 .panel-v2-subsection {
  background-color: var(--hds-foreground-divider);
  padding: var(--hds-spacing-2);
}
#editor-panel.panel-v2 .panel-v2-subsection {
  background-color: var(--hds-background-primary);
}
#editor-panel.panel-v2 .panel-v2-search {
  margin-right: var(--hds-spacing-1);
  width: 100%;
}
.empty-panel-content-container {
  cursor: pointer;
  user-select: none;
}
.drawer-container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 80px);
  position: relative;
  overflow: hidden;
  transition: width 0.2s ease-in-out;
  border-left: 1px solid var(--hds-foreground-divider);
}
.drawer-inner-container {
  width: var(--panel-width);
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.drawer-header-row {
  background-color: var(--hds-background-primary);
  height: var(--hds-spacing-8);
  display: flex;
  align-items: center;
  position: relative;
  flex-shrink: 0;
}
.drawer-header-title {
  font-family: var(--font-family);
  font-size: var(--text-size-big);
  font-style: normal;
  font-weight: 400;
  line-height: var(--header-line-height);
  /* 150% */
  letter-spacing: -0.2px;
  color: var(--font-color-secondary);
  --icon-color: var(--font-color-secondary);
  color: var(--hds-foreground-primary);
  --icon-color: var(--hds-foreground-primary);
}
.drawer-header-title:first-child {
  margin-left: var(--hds-spacing-2);
}
.drawer-container-header-icon {
  padding-left: var(--hds-spacing-2);
  padding-right: var(--hds-spacing-2);
  display: flex;
}
.drawer-close-button {
  position: absolute;
  right: 0;
}
.error-log-scroll-wrapper1,
.environment-scroll-wrapper1 {
  height: 1px;
  flex-grow: 1;
}
.error-log-scroll-wrapper2,
.environment-scroll-wrapper2 {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.environment-content {
  height: 1px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.environment-header {
  padding: var(--hds-spacing-4);
}
.environment-table {
  border-collapse: separate !important;
}
.environment-table-header {
  color: var(--hds-foreground-secondary);
}
.environment-table-header td {
  font: var(--hds-caption-font) !important;
}
.environment-table-row > td {
  width: 50%;
  overflow: hidden;
  text-overflow: ellipsis;
  font: var(--hds-body-extrasmall-font) !important;
  color: var(--hds-foreground-primary) !important;
}
.environment-table-value {
  word-break: break-all;
}
.error-log-content {
  height: 1px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.error-log-header {
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-menu);
  color: var(--font-color-emphasized);
  --icon-color: var(--font-color-emphasized);
  display: flex;
  flex-direction: row;
  padding: calc(2 * var(--base-padding)) calc(4 * var(--base-padding));
}
.error-log-header > *:not(:first-child) {
  margin-left: calc(2 * var(--base-padding));
}
.error-log-clear-button {
  cursor: pointer;
  user-select: none;
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-menu);
  color: var(--font-color);
  --icon-color: var(--font-color);
}
.error-log-clear-button:hover {
  font-family: var(--font-family-emphasized);
  font-size: var(--text-size);
  line-height: var(--line-height-menu);
  color: var(--font-color-emphasized);
  --icon-color: var(--active-icon-color);
}
.error-log-error-container {
  cursor: pointer;
  user-select: none;
  margin-top: var(--panel-margin);
  border-radius: var(--panel-body-border-radius);
  background-color: var(--bg-color-panel-content);
  display: flex;
  flex-direction: row;
  padding: calc(2 * var(--base-padding)) calc(3 * var(--base-padding));
}
.error-log-error-container:first-child {
  margin-top: 0;
}
.error-log-error-dismissed {
  cursor: pointer;
  user-select: none;
  margin-top: var(--panel-margin);
  border-radius: var(--panel-body-border-radius);
  background-color: var(--bg-color-panel-content);
  display: flex;
  flex-direction: row;
  padding: calc(2 * var(--base-padding)) calc(3 * var(--base-padding));
  opacity: 0.5;
}
.error-log-error-dismissed:first-child {
  margin-top: 0;
}
.error-log-error-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.error-log-error-description {
  font-family: var(--font-family);
  font-size: var(--text-size);
  color: var(--font-color-group-item);
  --icon-color: var(--font-color-group-item);
  line-height: var(--line-height);
  color: var(--font-color-inactive-item-text);
  --icon-color: var(--font-color-inactive-item-text);
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: calc(4 * var(--base-padding));
}
.error-log-confirm {
  background-color: #00A86F;
}
.error-log-info {
  background: linear-gradient(270deg, #65EBE2 0%, #6B9CFF 100%);
  color: rgba(16, 25, 37, 0.9);
  --icon-color: rgba(16, 25, 37, 0.9);
}
.error-log-warning {
  background-color: #FFBD09;
  color: rgba(16, 23, 35, 0.95);
  --icon-color: rgba(16, 23, 35, 0.95);
}
.error-log-error {
  background-color: #CF001A;
}
.icon-user-content {
  height: 1px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.icon-user-header {
  background-color: var(--hds-background-object);
  border-radius: var(--hds-border-radius) var(--hds-border-radius) 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: var(--hds-spacing-4);
}
.icon-user-label {
  font-family: var(--font-family);
  font-size: var(--text-size);
  font-style: normal;
  font-weight: 400;
  line-height: var(--text-size-dialog-big);
  letter-spacing: -0.048px;
  color: var(--font-color-secondary);
  --icon-color: var(--font-color-secondary);
  font-weight: 500;
  font-family: var(--font-family-emphasized);
  color: var(--hds-foreground-primary);
  --icon-color: var(--hds-foreground-primary);
  margin-top: var(--hds-spacing-2);
  margin-bottom: var(--hds-spacing-4);
}
.icon-user-info-box {
  display: flex;
  padding: var(--hds-spacing-2) var(--hds-spacing-3);
  gap: var(--hds-spacing-2);
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}
.icon-user-info-box-text {
  font-family: var(--font-family);
  font-size: var(--text-size);
  font-style: normal;
  font-weight: 400;
  line-height: var(--text-size-dialog-big);
  letter-spacing: -0.048px;
  color: var(--font-color-secondary);
  --icon-color: var(--font-color-secondary);
  color: var(--hds-foreground-primary);
  --icon-color: var(--hds-foreground-primary);
  width: 1px;
  flex-grow: 1;
}
.icon-user-references-label {
  font: var(--hds-body-extrasmall-strong-font);
  color: var(--hds-foreground-primary);
  --icon-color: var(--hds-foreground-primary);
  margin: var(--hds-spacing-4);
}
.icon-user-references-tags {
  padding: 0 var(--hds-spacing-4);
}
.icon-user-list {
  height: 1px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  margin-bottom: var(--hds-spacing-2);
}
.help-panel-scroll-wrapper1 {
  flex-grow: 1;
  height: 1px;
  display: flex;
  flex-direction: column;
}
.help-panel-scroll-wrapper2 {
  flex-grow: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.help-panel-section {
  display: flex;
  flex-direction: column;
}
.help-panel-description {
  display: flex;
  flex-direction: column;
  padding: var(--hds-spacing-2) 0;
  gap: var(--hds-spacing-2);
}
.help-panel-section-header {
  font: var(--hds-body-extrasmall-strong-font);
  color: var(--hds-foreground-primary);
  --icon-color: var(--hds-foreground-primary);
  font-weight: 500;
  height: 40px;
  display: flex;
  align-items: center;
  border-top: 1px solid var(--hds-foreground-divider);
  margin-top: var(--hds-spacing-2);
}
.help-panel-description-header {
  font: var(--hds-body-extrasmall-strong-font);
  color: var(--hds-foreground-primary);
  --icon-color: var(--hds-foreground-primary);
  display: flex;
  align-items: center;
}
.help-panel-description-header > .base-icon,
.help-panel-description-header > hds-icon,
.help-panel-description-header > .help-panel-special-icon-round {
  margin-right: var(--hds-spacing-2);
  --hds-icon-color: var(--font-color-primary);
  --icon-color: var(--font-color-primary);
}
.help-panel-icon-text-item {
  font: var(--hds-body-extrasmall-strong-font);
  color: var(--hds-foreground-primary);
  --icon-color: var(--hds-foreground-primary);
  font-weight: 500;
  height: 40px;
  display: flex;
  align-items: center;
  border-top: 1px solid var(--hds-foreground-divider);
  margin-top: var(--hds-spacing-2);
}
.help-panel-special-icon-round {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  width: var(--icon-box-size);
  height: var(--icon-box-size);
  opacity: 0.8;
  border: 1px solid #FFFFFF66;
}
.help-panel-text {
  font-family: var(--font-family);
  font-size: var(--text-size);
  font-style: normal;
  font-weight: 400;
  line-height: var(--text-size-dialog-big);
  letter-spacing: -0.048px;
  color: var(--font-color-secondary);
  --icon-color: var(--font-color-secondary);
}
.help-panel-text-top-level {
  font-family: var(--font-family);
  font-size: var(--text-size);
  font-style: normal;
  font-weight: 400;
  line-height: var(--text-size-dialog-big);
  letter-spacing: -0.048px;
  color: var(--font-color-secondary);
  --icon-color: var(--font-color-secondary);
}
.help-panel-text-top-level > p {
  color: var(--hds-foreground-primary);
  line-height: var(--hds-body-extrasmall-line-height) !important;
}
.help-panel-content {
  display: flex;
  flex-direction: column;
}
.help-panel-content .accordion-subtle {
  margin-top: var(--hds-spacing-2);
}
.help-panel-content .accordion-item {
  border-radius: var(--hds-spacing-0) !important;
}
.help-panel-content .accordion-item:not(.accordion-item-expanded) {
  border-bottom: 1px solid var(--hds-foreground-divider);
}
.help-panel-content .accordion-item:first-of-type {
  border-top: 1px solid transparent;
}
.help-panel-content .accordion-item:first-of-type:hover {
  border-color: var(--hds-foreground-divider);
}
.help-panel-content .accordion-item-header {
  padding: var(--hds-spacing-2) var(--hds-spacing-3);
}
.help-panel-video-box {
  border-radius: 4px;
  background-color: var(--hds-background-oncolor-press);
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: var(--hds-spacing-2) var(--hds-spacing-3);
  margin: var(--hds-spacing-2) var(--hds-spacing-3);
  gap: var(--hds-spacing-2);
}
.help-panel-video-box-button {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--icon-header-size);
  width: var(--icon-header-size);
  background-color: var(--hds-background-inverse);
  border-radius: 50%;
  flex-shrink: 0;
  --hds-icon-color: var(--hds-background-primary);
}
.help-panel-video-box-text {
  font-family: var(--font-family);
  font-size: var(--text-size);
  font-style: normal;
  font-weight: 400;
  line-height: var(--text-size-dialog-big);
  letter-spacing: -0.048px;
  color: var(--font-color-secondary);
  --icon-color: var(--font-color-secondary);
}
.help-panel-accordion-title {
  font: var(--hds-body-extrasmall-strong-font);
  color: var(--hds-foreground-primary);
  --icon-color: var(--hds-foreground-primary);
  font-weight: 500;
}
.help-panel-accordion-content {
  display: flex;
  flex-direction: column;
  gap: var(--hds-spacing-2);
  padding: var(--hds-spacing-3) var(--hds-spacing-6);
  border-bottom: 1px solid var(--hds-foreground-divider);
}
.help-panel-documentation-link {
  font-family: var(--font-family);
  font-size: var(--text-size);
  font-style: normal;
  font-weight: 400;
  line-height: var(--text-size-dialog-big);
  letter-spacing: -0.048px;
  color: var(--font-color-secondary);
  --icon-color: var(--font-color-secondary);
  cursor: pointer;
  user-select: none;
  --icon-color: var(--hds-action);
  color: var(--hds-action);
  text-decoration: none;
}
.help-panel-documentation-link:hover {
  --icon-color: var(--hds-action-hover);
  color: var(--hds-action-hover);
}
.help-panel-documentation-link:active {
  --icon-color: var(--hds-action-press);
  color: var(--hds-action-press);
}
.help-panel-documentation-link:has(.base-icon) {
  display: flex;
  align-items: center;
  gap: var(--hds-spacing-1);
}
.help-panel-bg-object {
  background-color: var(--hds-background-object);
}
.help-panel-bg {
  padding: var(--hds-spacing-2) var(--hds-spacing-5) var(--hds-spacing-4) var(--hds-spacing-5);
  display: flex;
  flex-direction: column;
  gap: var(--hds-spacing-2);
}
.help-panel-box {
  border-radius: 4px;
  background-color: var(--hds-background-object);
}
.help-panel-box-header {
  font: var(--hds-body-extrasmall-strong-font);
  color: var(--hds-foreground-primary);
  --icon-color: var(--hds-foreground-primary);
  font-weight: 500;
  padding: 8px 8px 12px 8px;
  border-bottom: 1px solid var(--hds-foreground-divider);
}
.help-panel-box-content {
  padding: 8px 8px 16px 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--font-family);
  font-size: var(--text-size);
  font-style: normal;
  font-weight: 400;
  line-height: var(--text-size-dialog-big);
  letter-spacing: -0.048px;
  color: var(--font-color-secondary);
  --icon-color: var(--font-color-secondary);
  color: var(--hds-foreground-primary);
  --icon-color: var(--hds-foreground-primary);
}
ol.help-panel-list.help-panel-list2.help-panel-list3 li:before {
  font-family: var(--font-family);
  font-size: var(--text-size);
  font-style: normal;
  font-weight: 400;
  line-height: var(--text-size-dialog-big);
  letter-spacing: -0.048px;
  color: var(--font-color-secondary);
  --icon-color: var(--font-color-secondary);
  content: counter(item) ".";
  margin-left: calc(-1 * var(--hds-spacing-5));
  position: absolute;
  text-align: right;
  width: var(--text-size);
}
.notification-overlay {
  position: absolute;
  width: 100vw;
}
.notification-error {
  font-family: var(--font-family);
  font-size: var(--text-size);
  color: var(--font-color-group-item);
  --icon-color: var(--font-color-group-item);
  line-height: var(--line-height);
  color: var(--font-color-inactive-item-text);
  --icon-color: var(--font-color-inactive-item-text);
  z-index: 10;
  width: 100%;
  height: 0;
  animation-name: fadeInNotification;
  animation-iteration-count: 1;
  animation-duration: var(--duration);
  background-color: var(--notification-error-color);
  text-align: center;
  line-height: 30px;
  overflow: hidden;
}
@keyframes fadeInNotification {
  0% {
    height: 0;
  }
  10% {
    height: 30px;
  }
  90% {
    height: 30px;
  }
  100% {
    height: 0;
  }
}
.map-overlay-container {
  flex-grow: 1;
  position: relative;
  min-width: 1px;
}
.map-dim {
  position: absolute;
  top: -6px;
  left: -6px;
  right: -6px;
  bottom: -6px;
  z-index: 9;
  background-color: var(--blur-popup-color);
  backdrop-filter: blur(3px);
  opacity: 0.8;
  z-index: unset;
}
.map-overlay {
  width: 100%;
  height: 100%;
  z-index: 3;
  position: relative;
}
.map-overlay-disabled {
  width: 100%;
  height: 100%;
  z-index: 3;
  position: relative;
  pointer-events: none;
}
.bookmarks-overlay-positioning {
  position: absolute;
  top: calc(2 * var(--map-overlay-margin) + var(--map-overlay-item-size));
  right: var(--map-overlay-margin);
}
.select-dropdown-overlay-positioning {
  position: absolute;
  top: 10px;
  right: 28%;
}
.places-search-overlay-positioning {
  position: absolute;
  top: var(--map-overlay-margin);
  right: var(--map-overlay-margin);
}
.compass-overlay-positioning {
  position: absolute;
  top: calc(4 * var(--map-overlay-margin) + 3 * var(--map-overlay-item-size) + 185px);
  right: var(--map-overlay-margin);
}
.tilt-overlay-positioning {
  position: absolute;
  top: calc(5 * var(--map-overlay-margin) + 3 * var(--map-overlay-item-size) + 228px);
  right: var(--map-overlay-margin);
}
.zoomlevel-overlay-positioning {
  position: absolute;
  top: calc(3 * var(--map-overlay-margin) + 2 * var(--map-overlay-item-size) + 20px);
  right: var(--map-overlay-margin);
}
.camera-vector-overlay-positioning {
  position: absolute;
  top: calc(5 * var(--map-overlay-margin) + 6 * var(--map-overlay-item-size) + 224px);
  right: var(--map-overlay-margin);
}
.camera-settings-overlay-positioning {
  position: absolute;
  bottom: calc(100vh - (7 * var(--map-overlay-margin) + 7 * var(--map-overlay-item-size) + 209px + calc(2 * var(--map-overlay-item-size)) + var(--menubar-size)));
  right: var(--map-overlay-margin);
}
.icon-editor-overlay-positioning {
  position: absolute;
  left: var(--map-overlay-margin);
  top: 150px;
}
.zoom-level-overlay {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 4px;
  border-radius: 50px;
  border: none;
  background: var(--hds-background-secondary);
  filter: var(--hds-overlay);
  overflow: hidden;
}
.zoom-level-input[type=number] {
  caret-color: var(--hds-input-caret-color);
  box-sizing: border-box;
  border-radius: var(--border-radius);
  border: var(--border-size) solid var(--hds-input-border);
  background-color: var(--hds-input-bg-color);
  color: var(--hds-input-color);
  font-family: var(--font-family);
  font-size: var(--text-size-dialog);
  font-style: normal;
  font-weight: 400;
  line-height: var(--line-height);
  color: var(--font-color-secondary);
  --icon-color: var(--font-color-secondary);
  height: var(--medium-button-height);
  padding: 0px var(--base-padding) 0px calc(2 * var(--base-padding));
  text-align: center;
  width: calc(var(--map-overlay-item-size) - calc(2 * var(--base-padding)));
  padding: 0;
}
.zoom-level-input[type=number]::placeholder {
  color: var(--hds-input-placeholder-color);
}
.zoom-level-input[type=number]:focus {
  border: var(--border-size-highlighted) solid var(--hds-input-border-color-focussed);
}
.zoom-level-input[type=number]:hover:not(:focus) {
  border-color: var(--hds-input-border-color-hover);
}
.zoom-level-input[type=number]:focus {
  padding-left: calc(calc(2 * var(--base-padding)) - (var(--border-size-highlighted) - var(--border-size)));
}
.zoom-level-input[type=number]:focus {
  padding: 0;
}
.zoomlevel-slider-container {
  display: flex;
  align-items: center;
  justify-content: center;
}
.mouse-camera-controller {
  position: absolute;
  width: 100%;
  height: 100%;
}
.compass-needle {
  display: block;
  transform: rotate(var(--rotation));
  width: 24px;
  height: 24px;
  margin: calc((40px - 24px) / -2);
}
.tilt-overlay {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 4px;
  border-radius: 50px;
  border: none;
  background: var(--hds-background-secondary);
  filter: var(--hds-overlay);
  overflow: hidden;
}
.tilt-input[type=number] {
  caret-color: var(--hds-input-caret-color);
  box-sizing: border-box;
  border-radius: var(--border-radius);
  border: var(--border-size) solid var(--hds-input-border);
  background-color: var(--hds-input-bg-color);
  color: var(--hds-input-color);
  font-family: var(--font-family);
  font-size: var(--text-size-dialog);
  font-style: normal;
  font-weight: 400;
  line-height: var(--line-height);
  color: var(--font-color-secondary);
  --icon-color: var(--font-color-secondary);
  height: var(--medium-button-height);
  padding: 0px var(--base-padding) 0px calc(2 * var(--base-padding));
  width: calc(var(--map-overlay-item-size) - calc(2 * var(--base-padding)));
  padding: 0;
  margin-bottom: calc(3 * var(--base-padding));
  padding: 0 calc(2 * var(--base-padding)) 0 var(--base-padding);
  text-align: center;
}
.tilt-input[type=number]::placeholder {
  color: var(--hds-input-placeholder-color);
}
.tilt-input[type=number]:focus {
  border: var(--border-size-highlighted) solid var(--hds-input-border-color-focussed);
}
.tilt-input[type=number]:hover:not(:focus) {
  border-color: var(--hds-input-border-color-hover);
}
.tilt-input[type=number]:focus {
  padding-left: calc(calc(2 * var(--base-padding)) - (var(--border-size-highlighted) - var(--border-size)));
}
.tilt-input[type=number]:focus {
  padding: 0;
}
.tilt-input[type=number]:focus {
  padding: 0 calc(calc(2 * var(--base-padding)) - 1px) 0 var(--base-padding);
}
.tilt-overlay-input-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
}
.tilt-overlay-input-degree {
  font-family: var(--font-family);
  font-size: var(--text-size-dialog);
  font-style: normal;
  font-weight: 400;
  line-height: var(--line-height);
  color: var(--font-color-secondary);
  --icon-color: var(--font-color-secondary);
  position: absolute;
  right: calc(2 * var(--base-padding));
  bottom: calc(calc(3 * var(--base-padding)) + 2px /*(24px input height - 20px degree line height) / 2*/);
  transform: translateX(100%);
}
.template-image-overlay-positioning {
  position: absolute;
  left: var(--map-overlay-margin);
  bottom: var(--map-overlay-margin);
}
.image-template-picker {
  box-shadow: 0 1px 4px 0 var(--shadow-color);
  background-color: var(--image-picker-popup-color);
  border-radius: var(--border-radius);
  padding: calc(2 * var(--base-padding));
}
.image-template-image {
  display: block;
  max-width: 200px;
  max-height: 200px;
  object-fit: scale-down;
  user-select: none;
}
.image-template-sampler-container {
  position: absolute;
  width: calc(100% - 2 * calc(2 * var(--base-padding)));
  height: calc(100% - 2 * calc(2 * var(--base-padding)));
  top: calc(2 * var(--base-padding));
  left: calc(2 * var(--base-padding));
}
.image-template-sampler {
  box-shadow: 0 1px 4px 0 var(--shadow-color);
  width: var(--image-picker-crosshair-size);
  height: var(--image-picker-crosshair-size);
  border: var(--image-picker-border-size) solid var(--border-color);
  border-radius: 50%;
  position: absolute;
  top: calc(var(--y) - var(--image-picker-crosshair-size) / 2);
  left: calc(var(--x) - var(--image-picker-crosshair-size) / 2);
  background-color: var(--color);
  cursor: crosshair;
}
.modifier-overlay-positioning {
  position: absolute;
  top: var(--map-overlay-margin);
  left: var(--map-overlay-margin);
}
.modifier-overlay-positioning > *:not(:first-child) {
  margin-top: var(--map-overlay-margin);
}
.modifier-overlay-panel-positioning {
  position: absolute;
  top: var(--map-overlay-margin);
  left: var(--map-overlay-margin);
  border: 1px solid var(--hds-foreground-divider);
  border-radius: 50%;
}
.modifier-overlay-panel-positioning > *:not(:first-child) {
  margin-top: var(--map-overlay-margin);
}
.map-picking-feature {
  padding-bottom: var(--hds-spacing-4);
}
.map-picking-feature:last-of-type {
  padding-bottom: var(--hds-spacing-0);
}
.map-picking-style {
  margin-right: var(--hds-spacing-2);
}
.map-picking-style hds-icon {
  display: block;
}
.map-picking-part-base {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  white-space: nowrap;
  white-space: unset;
}
.map-picking-part-style {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  white-space: nowrap;
  white-space: unset;
  padding: var(--hds-spacing-2);
  border-radius: var(--hds-border-radius);
  background: var(--hds-background-object);
  position: relative;
  flex-direction: column;
  align-items: unset;
  justify-content: unset;
  margin-bottom: var(--hds-spacing-2);
}
.map-picking-part-style:hover {
  background-color: var(--hds-background-object-hover);
}
.map-picking-part-style:active {
  background-color: var(--hds-background-object-press);
}
.map-picking-part-style:last-of-type {
  margin-bottom: var(--hds-spacing-0);
}
.map-picking-part-style-header {
  display: flex;
  align-items: center;
  width: 100%;
}
.map-picking-japan-view {
  position: relative;
}
.map-picking-japan-view::before {
  position: absolute;
  left: 0;
  top: calc(50% - 18px / 2);
  height: var(--region-specific-bar-height);
  width: var(--region-specific-bar-width);
  border-radius: 1px;
  content: "";
  background-color: var(--region-specific-color);
}
.map-picking-part-style-labels {
  display: flex;
  flex-direction: column;
}
.map-picking-part-style-sublabel {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.picker-tooltip {
  --hds-icon-color: var(--hds-background-primary);
  display: flex;
  align-items: center;
  padding-top: var(--hds-spacing-1);
}
.map-picking-color-dot-wrapper {
  flex-shrink: 0;
  margin-left: auto;
  --checker-opacity: 1;
  --checker-size: 6px;
  --checker-half-size: calc(var(--checker-size) / 2);
  --checker-off-color: transparent;
  --checker-color: rgba(128, 128, 128, var(--checker-opacity));
  background-image: linear-gradient(45deg, var(--checker-color) 25%, var(--checker-off-color) 25%), linear-gradient(-45deg, var(--checker-color) 25%, var(--checker-off-color) 25%), linear-gradient(45deg, var(--checker-off-color) 75%, var(--checker-color) 75%), linear-gradient(-45deg, var(--checker-off-color) 75%, var(--checker-color) 75%);
  background-size: var(--checker-size) var(--checker-size);
  background-position: 0 0, 0 var(--checker-half-size), var(--checker-half-size) calc(-1 * var(--checker-half-size)), calc(-1 * var(--checker-half-size)) 0px;
  border-radius: var(--item-border-radius);
}
.map-picking-color-dot {
  flex-shrink: 0;
  width: var(--hds-spacing-6);
  height: var(--hds-spacing-4);
  border-radius: var(--item-border-radius);
  box-sizing: border-box;
  border: 1px solid var(--hds-foreground-divider);
  background-color: var(--dot-color);
}
.map-picking-icon-wrapper {
  background: repeating-conic-gradient(var(--hds-white-onlight-100-045) 0 25%, var(--hds-white-onlight-100-035) 0 50%) 50% / 8px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: auto;
  width: var(--hds-spacing-6);
  height: var(--hds-spacing-6);
  border-radius: var(--item-border-radius);
}
.map-picking-icon {
  width: var(--hds-spacing-4);
  height: var(--hds-spacing-4);
}
.map-picking-empty-color-dot {
  font-family: var(--font-family-emphasized);
  font-size: var(--text-size-super-tiny);
  line-height: var(--line-height-tiny);
  color: var(--font-color-hint);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--hds-spacing-6);
  height: var(--hds-spacing-4);
  border-radius: var(--item-border-radius);
  box-sizing: border-box;
  border: 1px solid var(--hds-foreground-divider);
  background-color: transparent;
}
.scheme-selector-container {
  background-color: var(--scheme-selector-bar-bg);
  min-height: var(--hds-spacing-7);
  gap: var(--hds-spacing-2);
  display: flex;
  justify-content: center;
  align-items: center;
}
.scheme-selector-container .popover-content {
  display: flex;
  align-items: center;
  gap: var(--hds-spacing-2);
}
.scheme-selector-container .divider-vertical {
  height: var(--hds-spacing-6);
  margin: var(--hds-spacing-0) var(--hds-spacing-1);
}
.with-elevation .scheme-selector-container {
  pointer-events: none;
}
.scheme-selector-popup-container {
  border-top-left-radius: 0px !important;
  border-top-right-radius: 0px !important;
  width: 755px;
  transform: translateX(calc((755px / 2) - (var(--icon-header-size)/2 + calc(4 * var(--base-padding)) + 522px))) translateY(var(--base-padding));
  box-shadow: var(--scheme-selector-shadow);
  filter: unset !important;
}
.scheme-selector-popup-header {
  display: flex;
  align-items: center;
  gap: var(--hds-spacing-4);
  background-color: var(--hds-background-selected-hover);
  padding: var(--hds-spacing-3) var(--hds-spacing-2);
}
.save-scheme-notification-container {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--hds-background-selected-hover);
  padding-bottom: var(--hds-spacing-3);
}
.save-scheme-notification-container hds-notification {
  width: 97.75%;
}
.scheme-selector-popup-list {
  border-top: 1px solid var(--hds-foreground-divider);
  background-color: var(--hds-background-secondary);
  padding-bottom: var(--hds-spacing-4);
  border-bottom-left-radius: var(--hds-border-radius);
  border-bottom-right-radius: var(--hds-border-radius);
  padding: var(--hds-spacing-0) var(--hds-spacing-2) var(--hds-spacing-2) var(--hds-spacing-2);
}
.scheme-selector-popup-list tr {
  margin-bottom: var(--hds-spacing-1);
}
.scheme-selector-popup-list tr:last-of-type {
  margin-bottom: 0px;
}
.scheme-selector-popup-list tr th {
  font: var(--hds-body-extrasmall-strong-font) !important;
  padding: var(--hds-spacing-2) var(--hds-spacing-4) !important;
}
.scheme-selector-popup-list tr th:first-of-type {
  padding-left: var(--hds-spacing-2) !important;
}
.scheme-selector-popup-list tbody tr {
  height: 55px;
  margin-right: calc(var(--hds-spacing-1) / 2);
  border-bottom: none !important;
}
.scheme-selector-popup-list tbody tr td {
  font: var(--hds-body-extrasmall-font) !important;
  padding: var(--hds-spacing-0) var(--hds-spacing-4) !important;
}
.scheme-selector-popup-list tbody tr td:first-of-type {
  padding-left: var(--hds-spacing-2) !important;
}
.scheme-selector-popup-list tbody tr td.scheme-selector-upgrade-notification {
  padding-right: var(--hds-spacing-0) !important;
}
.scheme-selector-popup-list-header-row {
  display: flex;
  --hds-icon-color: var(--hds-foreground-secondary);
}
.scheme-selector-popup-list-header-name {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: var(--hds-spacing-1);
  width: 221px;
}
.scheme-selector-popup-list-header-created {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: var(--hds-spacing-1);
  width: 140px;
}
.scheme-selector-popup-list-header-modified {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: var(--hds-spacing-1);
  width: 150px;
}
.scheme-selector-popup-list-header-base {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: var(--hds-spacing-1);
  width: 212px;
}
.scheme-selector-table-head {
  display: block;
}
.scheme-selector-table-body {
  max-height: 340px;
  display: block;
  overflow-y: auto;
  overflow-x: hidden;
}
.scheme-selector-component-input-container {
  display: flex;
  align-items: center;
  gap: var(--hds-spacing-2);
}
.scheme-selector-component-renaming-input {
  height: 1.875rem;
  border: none;
  background-color: inherit;
  font: var(--hds-body-small-font);
  letter-spacing: var(--hds-body-small-letter-spacing);
  text-decoration: var(--hds-body-small-text-decoration, inherit);
  color: var(--hds-foreground-primary);
  text-align: center;
}
.scheme-selector-item-renaming-input {
  height: 1.875rem;
  border: none;
  background-color: inherit;
  font: var(--hds-body-small-font);
  letter-spacing: var(--hds-body-small-letter-spacing);
  text-decoration: var(--hds-body-small-text-decoration, inherit);
  color: var(--hds-foreground-primary);
  width: var(--hds-spacing-12);
  margin-left: var(--hds-spacing-4);
  font: var(--hds-body-extrasmall-font);
}
.char-count {
  color: var(--hds-foreground-secondary);
}
.scheme-selector {
  display: flex;
  align-items: center;
  gap: var(--hds-spacing-2);
}
.scheme-selector-scheme-name {
  cursor: text;
  display: flex;
}
.scheme-selector-scheme-unsaved-name {
  color: var(--hds-foreground-warning);
}
.scheme-selector-count {
  padding-left: calc(var(--hds-spacing-1px) * 2);
}
.scheme-selector-base-style-name {
  color: var(--hds-foreground-secondary);
}
.scheme-selector-base-style-name-variant {
  color: var(--hds-foreground-secondary);
  position: relative;
}
.scheme-selector-base-style-name-variant::before {
  position: absolute;
  left: calc(-1 * var(--hds-spacing-2));
  top: calc(50% - var(--region-specific-bar-height) / 2);
  height: var(--region-specific-bar-height);
  width: var(--region-specific-bar-width);
  border-radius: 1px;
  content: "";
  background-color: var(--region-specific-color);
}
.scheme-selector-button-container {
  display: flex;
  align-items: center;
}
.scheme-selector-item {
  cursor: pointer;
  user-select: none;
  display: flex;
}
.scheme-selector-item.active {
  background-color: var(--hds-background-selected);
  border-radius: var(--hds-border-radius);
}
.scheme-selector-item:hover {
  background-color: var(--hds-background-hover);
  border-radius: var(--hds-border-radius);
}
.scheme-selector-item:active {
  background-color: var(--hds-background-press);
  border-radius: var(--hds-border-radius);
}
.scheme-selector-item-column-name {
  display: flex;
  align-items: center;
  width: 221px;
  box-sizing: border-box;
  padding: 0 calc(4 * var(--base-padding));
  overflow: hidden;
}
.scheme-selector-item-column-name [id^="schemename"] {
  max-width: calc(221px - 50px);
}
.scheme-selector-item-colors {
  min-width: var(--hds-spacing-8);
  height: var(--hds-spacing-8);
  border-radius: var(--hds-border-radius);
  border: 1px solid var(--hds-accent);
}
.scheme-selector-item-name {
  color: var(--hds-foreground-secondary);
  margin-left: var(--hds-spacing-4);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.scheme-selector-item-name-unsaved-changes {
  color: var(--hds-foreground-warning);
}
.scheme-selector-item-column-created {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--hds-foreground-secondary);
  padding: 0 var(--hds-spacing-4);
  width: 140px;
  box-sizing: border-box;
}
.scheme-selector-item-column-modified {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--hds-foreground-secondary);
  padding: 0 var(--hds-spacing-4);
  width: 150px;
  box-sizing: border-box;
}
.scheme-selector-item-column-modified-upgraded {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--hds-foreground-secondary);
  padding: 0 var(--hds-spacing-4);
  width: 150px;
  box-sizing: border-box;
}
.scheme-selector-item:hover .scheme-selector-item-column-modified-upgraded {
  display: none;
}
.scheme-selector-item-date {
  color: var(--hds-foreground-secondary);
}
.scheme-selector-item-time {
  color: var(--hds-foreground-tertiary);
}
.scheme-selector-item-column-base {
  display: flex;
  align-items: center;
  padding: 0 var(--hds-spacing-4);
  width: calc(212px - var(--scrollbar-width));
  box-sizing: border-box;
}
.scheme-selector-item-column-base-upgraded {
  display: flex;
  align-items: center;
  padding: 0 var(--hds-spacing-4);
  width: calc(212px - var(--scrollbar-width));
  box-sizing: border-box;
}
.scheme-selector-item:hover .scheme-selector-item-column-base-upgraded {
  display: none;
}
.scheme-selector-item-base-name {
  display: flex;
  justify-content: space-between;
  color: var(--hds-foreground-tertiary);
  --hds-icon-color: var(--hds-foreground-tertiary);
  width: 100%;
}
.scheme-selector-item:hover .scheme-selector-item-base-name,
.scheme-selector-item-selected:hover .scheme-selector-item-base-name {
  display: none;
}
.scheme-selector-item-base-name-variant {
  display: flex;
  justify-content: space-between;
  color: var(--hds-foreground-tertiary);
  --hds-icon-color: var(--hds-foreground-tertiary);
  width: 100%;
  position: relative;
}
.scheme-selector-item:hover .scheme-selector-item-base-name-variant,
.scheme-selector-item-selected:hover .scheme-selector-item-base-name-variant {
  display: none;
}
.scheme-selector-item-base-name-variant::before {
  position: absolute;
  left: calc(-1 * var(--hds-spacing-2));
  top: calc(50% - var(--region-specific-bar-height) / 2);
  height: var(--region-specific-bar-height);
  width: var(--region-specific-bar-width);
  border-radius: 1px;
  content: "";
  background-color: var(--region-specific-color);
}
.scheme-selector-item-buttons {
  display: none;
  justify-content: space-between;
  flex-grow: 1;
}
.scheme-selector-item:hover .scheme-selector-item-buttons,
.scheme-selector-item-selected:hover .scheme-selector-item-buttons {
  display: flex;
}
.scheme-selector-upgrade-notification {
  display: none;
  align-items: center;
  width: calc(150px + 212px);
}
.scheme-selector-item:hover .scheme-selector-upgrade-notification {
  display: flex;
}
.scheme-selector-popup-container-position {
  transform: unset;
}
.scheme-selector-search {
  width: 34%;
}
.scheme-selector-list-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 200px;
  text-align: center !important;
}
.scheme-selector-list-empty .no-styles-found-hint {
  text-align: center;
}
.scheme-selector-list-empty .no-styles-found-message {
  margin-bottom: calc(6 * var(--base-padding));
  text-align: center;
}
.scheme-list-table {
  width: 100%;
}
.scheme-selector-popup-disabled {
  pointer-events: none;
}
.template-dashboard {
  --base-padding: 4px;
  --half-panel-margin: 1px;
  --panel-margin: 2px;
  --panel-body-border-radius: 4px;
  --panel-header-border-radius: 5px;
  --font-family: "Fira Regular";
  --font-family-subdued: "Fira Light";
  --font-family-emphasized: "Fira Medium";
  --text-size-dashboard-title: 18px;
  --text-size-dashboard-section-title: 16px;
  --text-size-dashboard-description: 16px;
  --text-size-big: 16px;
  --text-size-big-button: 14px;
  --text-size-big-input: 14px;
  --text-size-menu: 12px;
  --text-size-dialog: 14px;
  --text-size: 12px;
  --text-size-tiny: 10px;
  --text-size-super-tiny: 8px;
  --text-size-drag-and-drop-title: 20px;
  --text-size-dialog-big: 18px;
  --line-height-tiny: 12px;
  --line-height-menu: 16px;
  --line-height: 20px;
  --header-line-height: 24px;
  --line-height-dashboard-title: 26px;
  --line-height-dashboard-section-title: 24px;
  --line-height-dashboard-description: 24px;
  --line-height-drag-and-drop-title: 24px;
  --line-height-dialog-header: 16px;
  --line-height-dialog-content: 20px;
  --divider-thickness: 1px;
  --divider-spacing: 0px;
  --divider-padding: calc(4 * var(--base-padding));
  --popup-border-radius: 4px;
  --popup-border-radius-large: 8px;
  --popup-item-height-large: 40px;
  --popup-menu-width: 200px;
  --popup-footer-height: 64px;
  --popup-header-height: 64px;
  --popup-padding-h: 24px;
  --popup-padding-v: 20px;
  --white-popup-max-height: 280px;
  --popup-description-height: 200px;
  --popup-item-selection-height: 2px;
  --popup-image-width: 400px;
  --popup-image-height: 175px;
  --border-size: 1px;
  --border-size-highlighted: 2px;
  --border-radius: 4px;
  --button-icon-spacing: 8px;
  --input-height: 22px;
  --input-width: 93px;
  --number-input-width: var(--input-width);
  --file-input-width: var(--input-width);
  --dash-input-width: 125px;
  --input-prefix-width: 6px;
  --input-prefix-left-padding: 5px;
  --input-border-radius: 2px;
  --input-border-size: 1px;
  --input-padding: 4px;
  --input-icon-padding: 6px;
  --input-disabled-opacity: 0.5;
  --boolean-input-height: 16px;
  --sliding-toggle-height: 20px;
  --sliding-toggle-width: 40px;
  --input-animation-duration: 300ms;
  --input-animation-duration-quick: 100ms;
  --item-border-radius: 2px;
  --reduced-item-height: 28px;
  --main-item-height: 35px;
  --large-main-item-height: 48px;
  --icon-button-group-height: 28px;
  --icon-box-size: 16px;
  --icon-text-inline-size: var(--text-size);
  --icon-header-size: var(--header-line-height);
  --icon-big-size: 40px;
  --icon-padding-size: calc(2 * var(--base-padding));
  --tooltip-text-size: 13px;
  --tooltip-line-height: 18px;
  --tooltip-nibble-size: 6px;
  --tooltip-nibble-indentation: 18px;
  --tooltip-width: 200px;
  --tooltip-width-wide: 320px;
  --selected-item-selection-bar-width: 3px;
  --selected-group-item-selection-bar-width: 4px;
  --inactive-item-opacity: 0.4;
  --graph-width: 2px;
  --zoomlevel-line-width: 1px;
  --collapsible-margin: 12px;
  --scrollbar-width: 8px;
  --scrollbar-expanded-grabber-width: 6px;
  --scrollbar-grabber-width: 4px;
  --map-overlay-margin: 12px;
  --map-overlay-item-size: 40px;
  --menubar-size: 48px;
  --menubar-title-width: 300px;
  --menubar-select-menu-width: 150px;
  --menubar-icon-size: 32px;
  --menubar-lang-dropdown-height: 400px;
  --menubar-notification-dot-size: 8px;
  --menubar-scheme-selection-item-label-width: 200px;
  --search-field-height: 25px;
  --panel-small-width: 230px;
  --panel-width: 300px;
  --panel-large-width: 360px;
  --panel-tab-height: 25px;
  --panel-empty-content-top-offset: 200px;
  --panel-header-button-size: 20px;
  --slider-width: 4px;
  --slider-length: 82px;
  --slider-grabber-size: 14px;
  --slider-tick-length: 2px;
  --slider-tick-width: 1px;
  --slider-tick-offset: 1px;
  --navigation-bar-size: 40px;
  --drag-item-divider-height: 1px;
  --drag-item-divider-end-size: 5px;
  --notification-container-height: 32px;
  --notification-toast-height: 56px;
  --notification-animation-curve: cubic-bezier(0.7, 0, 0.5, 1.5);
  --notification-animation-duration: 200ms;
  --color-picker-height: 150px;
  --color-picker-crosshair-size: 15px;
  --color-picker-input-width: 70px;
  --color-picker-slider-track-height: 8px;
  --color-picker-slider-handle-size: 12px;
  --color-picker-container-width: 320px;
  --color-picker-eyedrop-size: 24px;
  --icon-picker-container-width: 254px;
  --icon-picker-container-height: 318px;
  --icon-picker-icon-size: 24px;
  --swatch-height: 22px;
  --swatch-width: 50px;
  --ga-blend-mode-btn-width: 52px;
  --basic-template-thumbnail-height: 40px;
  --basic-template-thumbnail-width: 56px;
  --basic-template-thumbnail-border: 2px;
  --basic-template-thumbnail-border-offset: 1px;
  --window-header-height: 73px;
  --extra-small-window-width: 468px;
  --extra-small-window-height: 212px;
  --small-window-width: 460px;
  --small-window-height: 280px;
  --medium-window-width: 380px;
  --medium-window-height: 320px;
  --big-window-width: 640px;
  --big-window-height: 520px;
  --wide-big-window-width: 720px;
  --wide-big-window-height: 520px;
  --wide-extra-big-window-width: 950px;
  --wide-extra-big-window-height: 520px;
  --fluid-window-height: calc(100vh - 200px);
  --fluid-window-width: calc(100vw - 512px);
  --search-bar-height: 50px;
  --icon-window-drag-area-height: 310px;
  --medium-area-height: 100px;
  --big-area-height: 180px;
  --extra-big-area-height: 320px;
  --icon-window-area-height: 393px;
  --drop-target-outline-size: 1px;
  --drop-target-outline-offset: 1px;
  --image-picker-crosshair-size: 8px;
  --image-picker-border-size: 2px;
  --icon-window-side-bar-width: 207px;
  --icon-window-icon-entity-width: 77px;
  --icon-window-icon-entity-height: 88px;
  --icon-window-icon-entity-background-size: 48px;
  --icon-window-icon-entity-background-size-small: 24px;
  --icon-window-change-view-header: 32px;
  --icon-window-change-item-text-width: 100px;
  --icon-window-change-item-indentation: 53px;
  --icon-window-resource-view-header: 64px;
  --icon-window-name-pill-container-width: 240px;
  --icon-window-name-pill-border-radius: 16px;
  --icon-window-item-border-width: 2px;
  --icon-window-notification-height: 32px;
  --medium-button-height: 24px;
  --button-height: 32px;
  --large-button-height: 40px;
  --dashboard-item-width: 340px;
  --dashboard-item-height: 160px;
  --dashboard-thumbnail-height: 176px;
  --dashboard-input-height: 32px;
  --component-highlight-thickness: 2px;
  --modifier-group-item-indentation: 24px;
  --region-specific-bar-width: 2px;
  --region-specific-bar-height: 16px;
  --modifier-affected-specific-margin: -20px;
  --modifier-affected-specific-tooltip-width: 296px;
  --tooltip-content-max-width: 225px;
  --modifier-overlay-panel-header-height: 38px;
  --drag-item-divider: #126EF8;
  --drag-item-highlight: rgba(15, 22, 33, 0.1);
  --font-color-highlighted: #126EF8;
  --font-color-highlighted-emphasized: #d0e2fe;
  --font-color-emphasized: #0E1520;
  --font-color-active: #1C232E;
  --font-color: #272F3A;
  --font-color-subdued: #535C6B;
  --font-color-hint: var(--hds-gray-600);
  --font-color-disabled: #8890A0;
  --main-button-font-color: #272F3A;
  --main-button-font-color-emphasized: #0f1621;
  --font-color-menu: #535C6B;
  --font-color-tooltip: #1C232E;
  --font-color-group-item: #1C232E;
  --font-color-dialog: rgba(16, 23, 35, 0.95);
  --font-color-oncolor: #ffffff;
  --font-color-oncolor-hover: #ffffff;
  --font-color-oncolor-subdued: rgba(225, 234, 254, 0.58);
  --font-color-panel-notification: #E9ECF2;
  --font-color-inactive-item-text: #333B47;
  --font-color-item-text-hover: #0f1621;
  --font-color-hds-tertiary: rgba(34, 54, 89, 0.41);
  --font-color-hds-tertiary-hover: rgba(19, 35, 67, 0.5);
  --font-color-hds-tertiary-disabled: rgba(0, 26, 77, 0.2);
  --font-color-body: #3F4855;
  --font-color-primary: rgba(16, 23, 35, 0.95);
  --font-color-primary-disabled: rgba(0, 26, 77, 0.2);
  --font-color-secondary: rgba(7, 23, 49, 0.6);
  --font-color-secondary-disabled: rgba(0, 26, 77, 0.2);
  --header-icon-color: #535C6B;
  --active-icon-color: #1C232E;
  --active-icon-color-inverted: #ffffff;
  --inactive-icon-color: #6A7483;
  --disabled-item-group-text-color: #6A7483;
  --hint-icon-color: #6A7483;
  --disabled-icon-color: #8890A0;
  --action-icon-color: #535C6B;
  --disabled-action-icon-color: #8890A0;
  --error-icon-color: #CF001A;
  --warning-icon-color: #9E6400;
  --warning-icon-color-hover: #FAAA1E;
  --inactive-icon-border-color: #A4ACBA;
  --slider-input-border-color: #A4ACBA;
  --panel-header-button-bg: #f3f3f4;
  --panel-tab-bg-unselected: rgba(255, 255, 255, 0.8);
  --divider-color: rgba(255, 255, 255, 0.2);
  --divider-color-ondark: rgba(15, 22, 33, 0.2);
  --sub-item-box-border-color: #E9ECF2;
  --sub-item-box-bg-color: #CCD1DB;
  --bg-color-ui: #f3f3f4;
  --bg-color-panel-base: #ffffff;
  --bg-color-panel-content: #e7e8e9;
  --bg-color-modifier-panel-content: #ffffff;
  --bg-color-panel-section: #ffffff;
  --bg-color-content: rgba(255, 255, 255, 0.4);
  --bg-color-panel-dark: #ffffff;
  --bg-color-panel-header-dark: #ffffff;
  --bg-color-panel-group-item-selected: #ffffff;
  --border-color-panel-item: #ffffff;
  --bg-color-item: rgba(255, 255, 255, 0.9);
  --bg-color-item-selected: rgba(255, 255, 255, 0.95);
  --bg-color-item-highlighted: rgba(255, 255, 255, 0.6);
  --bg-color-item-header: #cfd0d3;
  --bg-color-button-group: #f3f3f4;
  --blur-popup-color: rgba(8, 23, 52, 0.6);
  --bg-color-popup: #ffffff;
  --bg-color-popup-item-hover: #ffffff;
  --bg-color-popup-divider: rgba(15, 55, 115, 0.1);
  --bg-window: #ffffff;
  --bg-hds-secondary: #ffffff;
  --bg-window-content: rgba(255, 255, 255, 0.4);
  --bg-window-header: #e7e8e9;
  --bg-global-adjustments: rgba(255, 255, 255, 0.9);
  --bg-color-inline-box: rgba(255, 255, 255, 0.4);
  --border-color: rgba(15, 22, 33, 0.1);
  --border-color-highlighted: #1C232E;
  --bg-selected-item: var(--hds-blue-onlight-400-020);
  --main-button-color: #126EF8;
  --main-button-color-hover: #0D5ED9;
  --action-text-button: #126EF8;
  --action-text-button-hover: #0D5ED9;
  --normal-button-bg-color: rgba(255, 255, 255, 0.8);
  --normal-button-bg-color-hover: rgba(255, 255, 255, 0.95);
  --button-primary-bg: linear-gradient(270deg, #65EBE2 0%, #6B9CFF 100%);
  --button-primary-bg-hover: linear-gradient(90deg, #3675F5 0%, #1BE0D7 100%);
  --button-primary-bg-active: linear-gradient(90deg, #1854CC 0%, #08CCC3 100%);
  --button-primary-bg-disabled: linear-gradient(270deg, rgba(125, 230, 225, 0.4) 0%, rgba(128, 170, 255, 0.4) 100%);
  --button-primary-color: rgba(16, 25, 37, 0.9);
  --button-primary-color-disabled: rgba(18, 41, 84, 0.3);
  --button-secondary-bg: rgba(0, 55, 141, 0.05);
  --button-secondary-bg-hover: rgba(15, 55, 115, 0.1);
  --button-secondary-bg-active: rgba(30, 43, 70, 0.6);
  --button-secondary-bg-disabled: rgba(0, 55, 141, 0.05);
  --button-secondary-color: rgba(16, 23, 35, 0.95);
  --button-secondary-color-disabled: rgba(18, 41, 84, 0.3);
  --button-danger-bg: #CF001A;
  --button-danger-bg-hover: #A5002F;
  --button-danger-bg-active: #8F0029;
  --button-danger-bg-disabled: rgba(207, 0, 26, 0.3);
  --button-danger-color: #ffffff;
  --button-warn-bg: #FFBD09;
  --button-warn-bg-hover: #FAAA1E;
  --button-warn-bg-active: #9E6400;
  --button-warn-bg-disabled: rgba(255, 190, 10, 0.3);
  --button-warn-color: rgba(15, 24, 36, 0.9);
  --button-warn-color-active: #FFFFFF;
  --button-oncolor-primary-bg: #ffffff;
  --button-oncolor-primary-color: rgba(16, 23, 35, 0.95);
  --button-oncolor-primary-bg-disabled: #ffffff;
  --button-oncolor-primary-color-disabled: rgba(18, 41, 84, 0.3);
  --button-oncolor-primary-bg-hover: #F2F5F9;
  --button-oncolor-primary-bg-active: #DADFE7;
  --button-oncolor-secondary-bg: rgba(34, 54, 89, 0.41);
  --button-oncolor-secondary-color: #ffffff;
  --button-oncolor-secondary-bg-disabled: rgba(34, 54, 89, 0.41);
  --button-oncolor-secondary-color-disabled: rgba(225, 234, 254, 0.58);
  --button-oncolor-secondary-bg-hover: rgba(19, 35, 67, 0.5);
  --button-oncolor-secondary-bg-active: rgba(7, 23, 49, 0.6);
  --background-object: rgba(0, 55, 141, 0.05);
  --background-object-hover: rgba(15, 55, 115, 0.1);
  --button-apply-modifiers-bg: rgba(255, 255, 255, 0.8);
  --button-apply-modifiers-bg-hover: rgba(255, 255, 255, 0.7);
  --button-apply-modifiers-bg-disabled: rgba(255, 255, 255, 0.9);
  --button-apply-modifiers-border: #4791FF;
  --button-apply-modifiers-border-hover: #5FB2FF;
  --button-apply-modifiers-border-disabled: rgba(18, 110, 248, 0.4);
  --colorblind-popup-divider: rgba(15, 54, 113, 0.1);
  --colorblind-popup-header-bg-color: #ffffff;
  --colorblind-popup-body-bg-color: #F2F5F9;
  --colorblind-popup-body-font-color: #535C6B;
  --colorblind-popup-button-color: rgba(15, 54, 113, 0.1);
  --input-border-color-focussed: #126EF8;
  --input-border-color-active: #0f1621;
  --input-border-color-hover: rgba(15, 22, 33, 0.3);
  --input-border-color-inactive: #6A7483;
  --input-border-color-error: #D35566;
  --input-bg-color-active: #ffffff;
  --input-bg-color-inactive: rgba(255, 255, 255, 0.3);
  --input-bg-color-inactive-lighter: rgba(255, 255, 255, 0.5);
  --hds-input-bg-color: #ffffff;
  --hds-input-border: rgba(34, 54, 89, 0.41);
  --hds-input-border-color-focussed: #0BC7C2;
  --hds-input-border-color-hover: rgba(19, 35, 67, 0.5);
  --hds-input-caret-color: rgba(16, 23, 35, 0.95);
  --hds-input-placeholder-color: rgba(34, 54, 89, 0.41);
  --hds-input-color: rgba(16, 23, 35, 0.95);
  --input-inner-shadow-color: rgba(0, 0, 0, 0.1);
  --input-caret-color: #126EF8;
  --input-slider-bg-color: rgba(15, 22, 33, 0.1);
  --input-slider-color: #126EF8;
  --color-picker-slider-grabber-color: #ffffff;
  --color-picker-bg-color: #3F4855;
  --color-picker-input-border-color: #8890A0;
  --color-picker-input-bg-color: #1C232E;
  --color-picker-input-color: #E9ECF2;
  --dropdown-bg-color-opened: #e7e8e9;
  --dropdown-item-color: #ffffff;
  --dropdown-item-color-selected: #e7e8e9;
  --dropdown-item-color-hover: #ffffff;
  --shadow-color: rgba(15, 22, 33, 0.4);
  --drop-shadow-gradient: linear-gradient(to bottom, rgba(233, 236, 242, 0.6) 0%, transparent 100%);
  --selected-item-marker-color: #126EF8;
  --selection-color: #126EF8;
  --selection-gradient: rgba(18, 110, 248, 0.1);
  --region-specific-color: var(--hds-purple-onlight-400);
  --region-specific-color-hover: var(--hds-purple-onlight-200);
  --region-specific-color-bg-hover: rgba(140, 107, 174, 0.8);
  --region-specific-color-bg-pressed: rgba(140, 107, 174, 0.9);
  --region-specific-icon-color: rgba(247, 250, 253, 0.2);
  --region-specific-bg-color: rgba(179, 156, 201, 0.3);
  --jp-region-specific-bg-color: #49475d;
  --notification-color: #D35566;
  --notification-error-color: #CF001A;
  --notification-warning-color: #FFBD09;
  --notification-overlay-bg-color: #3F4855;
  --notification-overlay-bg-hover-color: #535C6B;
  --notification-overlay2-bg-color: #1C232E;
  --component-highlight-color: #6A7483;
  --component-highlight-color-subdued: #A4ACBA;
  --graph-color: var(--hds-background-inverse);
  --graph-stop: var(--hds-background-inverse);
  --graph-bg: var(--hds-background-primary);
  --graph-border: var(--hds-foreground-tertiary-hover);
  --graph-border-hover: var(--hds-foreground-tertiary-press);
  --dash-color: #0f1621;
  --scrollbar-color: rgba(15, 22, 33, 0.2);
  --scrollbar-color-active: rgba(15, 22, 33, 0.2);
  --scrollbar-color-hover: rgba(15, 22, 33, 0.4);
  --slider-grabber-outline-color: rgba(218, 239, 250, 0.12);
  --slider-tick-color: rgba(15, 22, 33, 0.4);
  --chart-item-color-selected: #126EF8;
  --chart-item-color: rgba(15, 22, 33, 0.2);
  --chart-selection-bg: rgba(15, 22, 33, 0.05);
  --color-swatch-border: #272F3A;
  --inactive-color-swatch: #6A7483;
  --hover-inactive-color-swatch: #A4ACBA;
  --map-picker-color-border: rgba(15, 22, 33, 0.1);
  --map-picker-no-color-bg: rgba(255, 255, 255, 0.6);
  --code-string-color: #126EF8;
  --drop-target-color: #126EF8;
  --path-type-color-text: #000;
  --path-type-color-scheme: #000;
  --path-type-color-layer: rgba(255, 255, 255, 0.1);
  --path-type-color-condition: rgba(255, 255, 255, 0.2);
  --path-type-color-styleset: #2E468F;
  --path-type-color-style: #2C48A1;
  --path-type-color-attribute: rgba(15, 22, 33, 0.4);
  --path-type-color-definition: #52A3DB;
  --path-type-color-subcondition: #3A7BDB;
  --path-type-color-zoomlevel: #000;
  --path-type-color-height: #000;
  --image-picker-popup-color: #ffffff;
  --grid-placement-hover: rgba(15, 22, 33, 0.6);
  --grid-placement-selected: #126EF8;
  --grid-placement-selected-secondary: rgba(18, 110, 248, 0.8);
  --grid-placement-unselected: rgba(15, 22, 33, 0.1);
  --tag-pill-bg-color: #ffffff;
  --tag-pill-included: #00C78F;
  --tag-pill-excluded: #EC610E;
  --help-bg-color: #D468A0;
  --bg-dashboard-item: #ffffff;
  --tooltip-bg: var(--hds-background-inverse);
  --tooltip-text: var(--hds-inverse-primary);
  --menu-bar-bg: rgba(255, 255, 255, 0.95);
  --menu-bar-bg-hover: rgba(0, 55, 141, 0.05);
  --menu-bar-item-description-color: #A4ACBA;
  --notification-info-bg: #15BDB9;
  --notification-warning-bg: #92600C;
  --notification-confirmation-bg: #0A7651;
  --notification-error-bg: #840B2E;
  --backgrounds-background-object: rgba(218, 239, 250, 0.12);
  --modifier-header-bg: var(--hds-aqua-onlight-400);
  --modifier-preset-border: #e7ebf1;
  --modifier-dot--default-state: var(--hds-accent);
  --modifier-dot--hover-state: var(--hds-aqua-onlight-500);
  --modifier-overlay-panel-preset-bg: #EDFBFA;
  --modifier-overlay-panel-create-apply-modifiers-bg: #F6FDFD;
  --modifier-overlay-panel-create-modifiers-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.08);
  --modifier-overlay-panel-create-apply-modifiers-active-bg: rgba(95, 178, 255, 0.2);
  --modifier-overlay-panel-drag-drop-box-bg: rgba(64, 71, 82, 0.5);
  --modifier-overlay-active-bg: #e3e6eb99;
  --modifier-overlay-active-header-bg: #dddfe466;
  --modifier-overlay-active-border: #CED4DF;
  --modifier-overlay-header-bg: #00378f08;
  --scheme-selector-bar-bg: #dae6fa;
  --scheme-selector-shadow: 0px 0px 2px 0px var(--Dropshadow-overlay-dropshadow-layer-A-overlay, rgba(0, 25, 75, 0.12)), 0px 6px 6px 0px var(--Dropshadow-overlay-dropshadow-layer-B-overlay, rgba(0, 25, 75, 0.06)), 0px 0px 21px 0px var(--Dropshadow-overlay-dropshadow-layer-C-overlay, rgba(0, 25, 75, 0.05)), 0px 13px 13px 0px var(--Dropshadow-overlay-dropshadow-layer-D-overlay, rgba(0, 25, 75, 0.08));
  --quick-tour-highlight: var(--hds-blue-ondark-400);
  --file-entity-bg-hover: var(--hds-blue-onlight-400-010);
  --file-entity-bg-selected: var(--hds-blue-onlight-400-020);
  --thumbnail-border-color: var(--hds-foreground-divider);
  box-sizing: border-box;
  height: 100%;
  width: 752px;
  display: flex;
  flex-grow: 0;
  flex-direction: column;
}
.template-dashboard-custom-navbar {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  background-color: var(--hds-background-primary);
  border: var(--hds-spacing-1px) solid var(--hds-foreground-divider);
  height: 64px;
  padding: var(--hds-spacing-0) calc(4 * var(--base-padding)) var(--hds-spacing-0) var(--hds-spacing-5);
}
.template-dashboard-header-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.template-dashboard-project-content-innercontainer {
  display: flex;
  flex-direction: column;
  padding-bottom: var(--hds-spacing-4);
}
.template-dashboard-swap-base-map-header-wrapper {
  display: flex;
  align-items: center;
  flex-direction: row;
  padding: var(--hds-spacing-0) var(--hds-spacing-6) var(--hds-spacing-2) var(--hds-spacing-0);
}
.template-dashboard-swap-base-map-header {
  color: var(--hds-foreground-primary) !important;
  margin-left: var(--hds-spacing-2);
  font-family: var(--font-family);
  font-size: var(--line-height);
  font-style: normal;
  font-weight: 500;
  line-height: var(--header-line-height);
  /* 120% */
  color: var(--font-color-primary);
  --icon-color: var(--font-color-primary);
}
.template-dashboard-swap-base-map-sub-header {
  color: var(--hds-foreground-secondary) !important;
  font-family: var(--font-family);
  font-size: var(--text-size-dialog);
  font-style: normal;
  font-weight: 400;
  line-height: var(--line-height);
  color: var(--font-color-secondary);
  --icon-color: var(--font-color-secondary);
}
.template-dashboard-swap-base-map-sub-header > div:last-child {
  padding-bottom: calc(2 * var(--base-padding));
}
.template-dashboard-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 64px;
  padding-right: calc(4 * var(--base-padding));
}
.template-dashboard-header-icon {
  width: 32px;
  height: 32px;
  box-sizing: border-box;
  flex-shrink: 0;
}
.template-dashboard-header-divider {
  width: var(--divider-thickness);
  height: var(--header-line-height);
  background-color: var(--hds-foreground-divider);
  margin-left: var(--hds-spacing-3);
  margin-right: var(--hds-spacing-6);
}
.dashboard-page-title {
  font-family: var(--font-family);
  font-size: var(--text-size-dashboard-title);
  font-style: normal;
  font-weight: 400;
  line-height: var(--line-height-dashboard-title);
  color: var(--font-color-secondary);
  --icon-color: var(--font-color-secondary);
  color: var(--hds-foreground-primary) !important;
  width: 141px;
  height: 27px;
}
.template-dashboard-header-label {
  font-family: var(--font-family);
  font-size: var(--text-size-dashboard-title);
  line-height: var(--line-height-dashboard-title);
  color: #333B47;
  display: flex;
  align-items: center;
  flex-grow: 1;
  margin: 0px calc(4 * var(--base-padding));
}
.template-dashboard-button-container {
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background-color: var(--hds-background-primary);
  padding: calc(4 * var(--base-padding)) calc(6 * var(--base-padding));
}
.template-dashboard-button-container > *:not(:first-child) {
  margin-left: calc(2 * var(--base-padding));
}
.template-dashboard-selector {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  --divider-color: #E9ECF2;
}
.template-dashboard-selector-title {
  font-family: var(--font-family);
  font-size: var(--text-size-big);
  font-style: normal;
  line-height: var(--header-line-height);
  /* 120% */
  color: var(--font-color-primary);
  --icon-color: var(--font-color-primary);
  font-family: var(--font-family-emphasized);
  font-weight: 500;
  color: var(--hds-foreground-primary);
  --icon-color: var(--hds-foreground-primary);
  padding-top: var(--hds-spacing-1);
}
.template-dashboard-selector-subtitle {
  font-family: var(--font-family);
  font-size: var(--text-size-dialog);
  font-style: normal;
  font-weight: 400;
  line-height: var(--line-height);
  color: var(--font-color-secondary);
  --icon-color: var(--font-color-secondary);
  font-weight: 500;
  font-family: var(--font-family-emphasized);
  color: var(--hds-foreground-primary);
  --icon-color: var(--hds-foreground-primary);
  margin: 0;
}
.template-dashboard-learn-more-content {
  font-family: var(--font-family);
  font-size: var(--text-size-dialog);
  font-style: normal;
  font-weight: 400;
  line-height: var(--line-height);
  color: var(--font-color-secondary);
  --icon-color: var(--font-color-secondary);
  color: var(--hds-foreground-secondary);
  margin-bottom: var(--hds-spacing-4);
}
.template-dashboard-selector-link-subtitle {
  cursor: pointer;
  user-select: none;
  font-size: var(--text-size-dashboard-section-title);
  line-height: var(--line-height-dashboard-section-title);
  color: #4E5663;
  font-family: var(--font-family-emphasized);
  --icon-color: var(--hds-action);
  color: var(--hds-action);
  width: 100%;
  margin: 0;
  display: flex;
  align-items: center;
}
.template-dashboard-selector-link-subtitle .base-icon {
  margin-right: var(--base-padding);
}
.template-dashboard-selector-link-subtitle-disabled {
  cursor: pointer;
  user-select: none;
  font-size: var(--text-size-dashboard-section-title);
  line-height: var(--line-height-dashboard-section-title);
  color: #4E5663;
  font-family: var(--font-family-emphasized);
  --icon-color: var(--hds-action);
  color: var(--hds-action);
  width: 100%;
  margin: 0;
  display: flex;
  align-items: center;
}
.template-dashboard-selector-link-subtitle-disabled .base-icon {
  margin-right: var(--base-padding);
}
.template-dashboard-project-content-container {
  height: 1px;
  flex-grow: 1;
  background: var(--hds-background-secondary);
}
.template-dashboard-project-content {
  display: flex;
  flex-direction: column;
  padding: calc(6 * var(--base-padding));
}
.template-dashboard-open-container {
  display: flex;
  align-items: center;
  padding: calc(2 * var(--base-padding)) var(--hds-spacing-7);
  --icon-color: var(--hds-action);
  --title-font-color: var(--hds-action);
  --description-font-color: var(--hds-background-inverse);
  cursor: pointer;
  user-select: none;
}
.template-dashboard-open-container > *:not(:first-child) {
  margin-left: calc(6 * var(--base-padding));
}
.template-dashboard-open-container:hover {
  --icon-color: var(--hds-action-hover);
  --title-font-color: var(--hds-action-hover);
  --description-font-color: var(--hds-background-inverse);
}
.template-dashboard-open-container:active {
  --icon-color: var(--hds-action-press);
  --title-font-color: var(--hds-action-press);
  --description-font-color: var(--hds-background-inverse);
}
.template-dashboard-open-container-disabled {
  display: flex;
  align-items: center;
  padding: calc(2 * var(--base-padding)) var(--hds-spacing-7);
  --icon-color: var(--hds-action);
  --title-font-color: var(--hds-action);
  --description-font-color: var(--hds-background-inverse);
}
.template-dashboard-open-container-disabled > *:not(:first-child) {
  margin-left: calc(6 * var(--base-padding));
}
.template-dashboard-open-label-layout > *:not(:first-child) {
  margin-top: calc(2 * var(--base-padding));
}
.template-dashboard-open-label-first-row {
  color: var(--title-font-color);
}
.template-dashboard-open-label-second-row {
  color: var(--description-font-color);
}
.template-dashboard-project-name {
  justify-content: flex-start;
  width: 100%;
  display: flex;
}
.template-dashboard-project-name > *:not(:first-child) {
  margin-left: var(--hds-spacing-4);
}
.template-dashboard-project-name > hds-input {
  width: 360px;
}
.template-dashboard-project-name-input[type="text"] {
  caret-color: var(--hds-input-caret-color);
  box-sizing: border-box;
  border-radius: var(--border-radius);
  border: var(--border-size) solid var(--hds-input-border);
  background-color: var(--hds-input-bg-color);
  font-family: var(--font-family);
  font-size: var(--text-size-big-input);
  line-height: var(--line-height);
  color: var(--hds-input-color);
  height: var(--dashboard-input-height);
  padding: 0 calc(4 * var(--base-padding));
  width: 468px;
}
.template-dashboard-project-name-input[type="text"]::placeholder {
  color: var(--hds-input-placeholder-color);
}
.template-dashboard-project-name-input[type="text"]:focus {
  border: var(--border-size-highlighted) solid var(--hds-input-border-color-focussed);
}
.template-dashboard-project-name-input[type="text"]:hover:not(:focus) {
  border-color: var(--hds-input-border-color-hover);
}
.template-dashboard-project-name-input[type="text"]:focus {
  padding-left: calc(calc(4 * var(--base-padding)) - (var(--border-size-highlighted) - var(--border-size)));
}
.template-dashboard-divider {
  width: 100%;
  display: flex;
  align-items: center;
  margin: calc(6 * var(--base-padding)) 0px;
}
.template-dashboard-divider-line {
  height: var(--divider-thickness);
  flex-shrink: 0;
  flex-grow: 1;
  box-sizing: border-box;
  background-color: var(--hds-foreground-divider);
}
.template-dashboard-divider-label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--hds-spacing-8);
  font: var(--hds-headline-05-font);
  letter-spacing: var(--hds-headline-05-letter-spacing);
  line-height: var(--hds-headline-04-line-height);
  color: var(--hds-foreground-secondary);
}
.template-dashboard-divider-label-left {
  margin-left: var(--hds-spacing-2);
}
.template-dashboard-divider-label-right {
  margin-right: var(--hds-spacing-2);
}
.template-dashboard-selector-description-wrapper {
  width: 100%;
  display: flex;
}
.template-dashboard-selector-description-wrapper > *:not(:first-child) {
  margin-left: var(--base-padding);
}
.template-dashboard-selector-description {
  font-family: var(--font-family);
  font-size: var(--text-size-dashboard-description);
  line-height: var(--line-height-dashboard-description);
  color: var(--font-color-subdued);
  margin: calc(2 * var(--base-padding)) 0;
}
.template-dashboard-selector-description-error {
  font-family: var(--font-family);
  font-size: var(--text-size-dashboard-description);
  line-height: var(--line-height-dashboard-description);
  color: var(--font-color-subdued);
  margin: calc(2 * var(--base-padding)) 0;
  color: #CF001A;
}
.template-dashboard-selector-drop-area-sizing {
  height: 84px;
}
.template-dashboard-selector-drop-area {
  width: 100%;
  border: var(--border-size) dashed var(--hds-foreground-tertiary);
  box-sizing: border-box;
  border-radius: var(--border-radius);
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  --divider-color-override: var(--hds-foreground-tertiary);
}
.template-dashboard-selector-drop-area > *:not(:first-child) {
  margin-top: calc(2 * var(--base-padding));
}
.template-dashboard-selector-drop-area:hover {
  border-color: var(--hds-foreground-tertiary-hover);
  background-color: var(--hds-background-hover);
}
.template-dashboard-selector-drop-area-highlighted {
  width: 100%;
  border: var(--border-size) dashed var(--hds-foreground-tertiary);
  box-sizing: border-box;
  border-radius: var(--border-radius);
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  --divider-color-override: var(--hds-foreground-tertiary);
  border-color: var(--hds-foreground-tertiary-hover);
  background-color: var(--hds-background-hover);
}
.template-dashboard-selector-drop-area-highlighted > *:not(:first-child) {
  margin-top: calc(2 * var(--base-padding));
}
.template-dashboard-selector-drop-area-highlighted:hover {
  border-color: var(--hds-foreground-tertiary-hover);
  background-color: var(--hds-background-hover);
}
.template-dashboard-selector-drop-area-selected {
  width: 100%;
  border: var(--border-size) dashed var(--hds-foreground-tertiary);
  box-sizing: border-box;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  --divider-color-override: var(--hds-foreground-tertiary);
  border: 1px solid var(--selection-color);
  border-radius: var(--border-radius);
  background-color: var(--hds-background-hover);
}
.template-dashboard-selector-drop-area-selected > *:not(:first-child) {
  margin-top: calc(2 * var(--base-padding));
}
.template-dashboard-selector-drop-area-selected:hover {
  border-color: var(--hds-foreground-tertiary-hover);
  background-color: var(--hds-background-hover);
}
.template-dashboard-selector-drop-area-disabled {
  width: 100%;
  border: var(--border-size) dashed var(--hds-foreground-tertiary);
  box-sizing: border-box;
  border-radius: var(--border-radius);
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  --divider-color-override: var(--hds-foreground-tertiary);
  cursor: wait;
}
.template-dashboard-selector-drop-area-disabled > *:not(:first-child) {
  margin-top: calc(2 * var(--base-padding));
}
.template-dashboard-selector-drop-area-disabled:hover {
  border-color: var(--hds-foreground-tertiary-hover);
  background-color: var(--hds-background-hover);
}
.template-dashboard-selector-drop-area-select-row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.template-dashboard-selector-drop-area-prompt {
  font-family: var(--font-family);
  line-height: var(--line-height-dashboard-description);
  font-size: var(--text-size-dialog);
  color: var(--hds-foreground-primary);
}
.template-dashboard-selector-drop-area-separator {
  font-family: var(--font-family);
  line-height: var(--line-height-dashboard-description);
  font-size: var(--text-size-dialog);
  color: var(--hds-foreground-secondary);
  margin: 0 calc(2 * var(--base-padding));
}
.template-dashboard-selector-drop-area-link-disabled {
  font-family: var(--font-family);
  line-height: var(--line-height-dashboard-description);
  font-size: var(--text-size-dialog);
  font-family: var(--font-family-emphasized);
  --icon-color: var(--hds-action);
  color: var(--hds-action);
  display: flex;
  align-items: center;
}
.template-dashboard-selector-drop-area-link {
  font-family: var(--font-family);
  line-height: var(--line-height-dashboard-description);
  font-size: var(--text-size-dialog);
  font-family: var(--font-family-emphasized);
  --icon-color: var(--hds-action);
  color: var(--hds-action);
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}
.template-dashboard-selector-selected-file {
  font-family: var(--font-family);
  font-size: var(--text-size-dialog);
  font-style: normal;
  font-weight: 400;
  line-height: var(--line-height);
  color: var(--font-color-secondary);
  --icon-color: var(--font-color-secondary);
  color: var(--hds-foreground-tertiary);
  display: flex;
  align-items: center;
}
.template-dashboard-selector-drop-area-link-icon {
  font-family: var(--font-family-emphasized);
  --icon-color: var(--hds-action);
  color: var(--hds-action);
  margin-left: var(--base-padding);
}
.template-dashboard-selector-input {
  background-color: transparent;
  border-radius: var(--input-border-radius);
  border: var(--input-border-size) solid var(--input-border-color-active);
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-tiny);
  color: var(--font-color-active);
  caret-color: var(--input-caret-color);
  height: var(--input-height);
  box-sizing: border-box;
  height: var(--dashboard-input-height);
  width: 100%;
  display: flex;
  align-items: center;
  padding: 0 calc(2 * var(--base-padding));
  border-radius: var(--border-radius);
  border-color: #B8BFCC;
}
.template-dashboard-selector-input input[type="number"],
.template-dashboard-selector-input input[type="text"] {
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-tiny);
  color: var(--font-color-active);
  caret-color: var(--input-caret-color);
}
.template-dashboard-selector-input:hover {
  border-color: var(--input-border-color-hover);
}
.template-dashboard-selector-input:focus-within {
  border: var(--input-border-size) solid var(--input-border-color-focussed);
  background-color: transparent;
  color: var(--font-color-emphasized);
}
.template-dashboard-selector-input input[type="number"]:focus,
.template-dashboard-selector-input input[type="text"]:focus {
  border: none;
}
.template-dashboard-selector-input input[type="text"] {
  font-family: var(--font-family);
  font-size: var(--text-size-dashboard-description);
  line-height: var(--line-height-dashboard-description);
  color: var(--font-color-emphasized);
  caret-color: var(--input-caret-color);
}
.template-dashboard-selector-input input[type="text"]::placeholder {
  color: #CCD1DB;
}
.template-dashboard-project-opener {
  width: 100%;
  display: flex;
  align-items: center;
  margin-top: calc(6 * var(--base-padding));
}
.template-dashboard-project-opener > *:not(:first-child) {
  margin-left: calc(2 * var(--base-padding));
}
.dashboard-template-prompt-tooltip-icon {
  cursor: pointer;
  user-select: none;
  --icon-color: var(--hds-background-inverse);
  --icon-color-emphasized: var(--hds-background-inverse);
}
.open-existing-map-style-button {
  margin-right: var(--hds-spacing-2);
}
.dashboard-template-prompt-tooltip-container {
  --tooltip-width-override: var(--tooltip-width-wide);
}
.dashboard-template-prompt-tooltip {
  margin: 0 calc(2 * var(--base-padding));
}
.dashboard-template-prompt-tooltip > *:not(:first-child) {
  margin-top: calc(2 * var(--base-padding));
}
.dashboard-template-prompt-tooltip-url {
  color: var(--font-color-tooltip);
  font-size: var(--tooltip-text-size);
  font-family: var(--font-family);
  font-weight: 400;
  line-height: var(--tooltip-line-height);
  display: block;
  color: var(--hds-action);
  --icon-color: var(--hds-action);
  text-decoration: none;
}
.dashboard-template-prompt-tooltip-url:hover {
  --icon-color: var(--hds-action-hover);
}
.dashboard-template-prompt-tooltip-url:active {
  --icon-color: var(--hds-action-press);
}
.template-dashboard-project-tab-desc-row {
  display: flex;
  flex-direction: row;
  margin-top: calc(6 * var(--base-padding));
}
.template-dashboard-project-tab-description {
  font-family: var(--font-family);
  font-size: var(--text-size-dialog);
  line-height: var(--line-height);
  color: var(--font-color-body);
  --icon-color: var(--font-color-body);
  color: var(--hds-background-inverse);
  width: 1px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.template-dashboard-project-tab-description > ul {
  margin-left: 1em;
}
.template-dashboard-project-tab-description > ul > *:not(:first-child) {
  margin-top: calc(2 * var(--base-padding));
}
.template-dashboard-wrapper {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  padding: calc(4 * var(--base-padding));
  border-radius: var(--border-radius);
}
.template-dashboard-wrapper:hover {
  background-color: var(--hds-background-hover);
  cursor: pointer;
}
.template-dashboard-wrapper:active {
  background-color: var(--hds-background-press);
  cursor: pointer;
}
.template-dashboard-preview-list {
  flex-shrink: 0;
  display: flex;
  margin-top: calc(6 * var(--base-padding));
  flex-direction: column;
  gap: var(--hds-spacing-2);
}
.template-dashboard-thumbnail-img {
  width: 72px;
  height: 110px;
  border-radius: var(--hds-spacing-1);
  border: var(--hds-spacing-1px) solid var(--thumbnail-border-color);
}
.template-dashboard-thumbnail-img-day-variant {
  border-radius: var(--hds-spacing-1);
  border: var(--hds-spacing-1px) solid var(--thumbnail-border-color);
}
.template-dashboard-thumbnail-wrapper {
  display: flex;
  gap: var(--hds-spacing-1);
  flex-direction: row;
}
#tab-demo-bar {
  position: sticky;
  top: var(--hds-spacing-0);
  z-index: 100;
  border-bottom: var(--hds-spacing-1px) solid var(--hds-foreground-divider);
  background-color: var(--hds-background-secondary);
}
#tab-demo-bar hds-tab {
  width: 172px;
  display: flex;
  justify-content: space-around;
}
.template-dashboard-content-wrapper {
  justify-content: center;
  display: flex;
  flex-direction: column;
  margin-top: var(--hds-spacing-0);
  padding-left: var(--hds-spacing-4);
  width: 100%;
}
.template-dashboard-content-title {
  font-family: var(--font-family);
  font-size: var(--text-size-big);
  font-style: normal;
  line-height: var(--header-line-height);
  /* 120% */
  color: var(--font-color-primary);
  --icon-color: var(--font-color-primary);
  font-family: var(--font-family-emphasized);
  font-weight: 500;
  color: var(--hds-foreground-primary);
  --icon-color: var(--hds-foreground-primary);
  margin-bottom: var(--hds-spacing-1);
}
.template-dashboard-content-subtitle {
  margin-bottom: var(--hds-spacing-2);
}
.template-dashboard-content-content {
  color: var(--hds-foreground-secondary);
}
.template-dashboard-preview-container:hover {
  position: relative;
}
.template-dashboard-preview-container:hover::after {
  content: "";
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  position: absolute;
}
.template-dashboard-preview-container-selected {
  background-color: var(--modifier-overlay-panel-create-apply-modifiers-active-bg);
}
.template-dashboard-preview-container-selected:hover {
  background-color: var(--modifier-overlay-panel-create-apply-modifiers-active-bg);
}
.template-dashboard-preview-thumbnail {
  width: var(--dashboard-item-width);
  height: var(--dashboard-thumbnail-height);
  box-sizing: border-box;
  background-color: #F9FAFC;
  display: flex;
  justify-content: center;
  align-items: center;
  background-position: center;
  background-size: cover;
}
.template-dashboard-preview-thumbnail-image {
  width: 100%;
  height: 1px;
  flex-grow: 1;
  border-radius: var(--border-radius) var(--border-radius) 0 0;
  object-fit: cover;
}
.template-dashboard-preview-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-family);
  font-size: var(--text-size-dialog);
  font-style: normal;
  font-weight: 400;
  line-height: var(--line-height);
  color: var(--font-color-secondary);
  --icon-color: var(--font-color-secondary);
  font-weight: 500;
  font-family: var(--font-family-emphasized);
  color: var(--hds-foreground-secondary);
  padding: var(--base-padding) 0;
  width: var(--dashboard-item-width);
  display: flex;
  align-items: center;
  justify-content: center;
}
.template-dashboard-japan-container {
  box-shadow: var(--hds-dropshadow-layer-3-drawer-offset-x, 0px) var(--hds-dropshadow-layer-3-drawer-offset-y, 0px) var(--hds-dropshadow-layer-3-drawer-radius, 2px) var(--hds-dropshadow-layer-3-drawer-spread, 0px) var(--hds-dropshadow-layer-3-drawer, rgba(0, 0, 0, 0.3)), var(--hds-dropshadow-layer-2-drawer-offset-x, 0px) var(--hds-dropshadow-layer-2-drawer-offset-y, -2.5px) var(--hds-dropshadow-layer-2-drawer-radius, 2.5px) var(--hds-dropshadow-layer-2-drawer-spread, 0px) var(--hds-dropshadow-layer-2-drawer, rgba(0, 0, 0, 0.08)), var(--hds-dropshadow-layer-1-drawer-offset-x, 0px) var(--hds-dropshadow-layer-1-drawer-offset-y, 0px) var(--hds-dropshadow-layer-1-drawer-radius, 8px) var(--hds-dropshadow-layer-1-drawer-spread, 0px) var(--hds-dropshadow-layer-1-drawer, rgba(0, 0, 0, 0.15)), var(--hds-dropshadow-layer-0-drawer-offset-x, 0px) var(--hds-dropshadow-layer-0-drawer-offset-y, -5px) var(--hds-dropshadow-layer-0-drawer-radius, 5px) var(--hds-dropshadow-layer-0-drawer-spread, 0px) var(--hds-dropshadow-layer-0-drawer, rgba(0, 0, 0, 0.15));
  padding: var(--hds-spacing-4) var(--hds-spacing-6);
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: var(--hds-background-primary);
}
.template-dashboard-japan-slot1 {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--hds-spacing-2);
  flex-grow: 1;
}
.template-dashboard-japan-slot1::before {
  position: absolute;
  height: 100%;
  width: var(--region-specific-bar-width);
  border-radius: 1px;
  content: "";
  background-color: var(--region-specific-color);
}
.template-dashboard-japan-slot2 {
  display: flex;
}
.template-dashboard-japan-row1 {
  position: relative;
  padding-left: var(--hds-spacing-2);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--hds-spacing-4);
}
.template-dashboard-japan-row1::before {
  position: absolute;
  left: 0;
  top: calc(50% - 18px / 2);
  height: var(--region-specific-bar-height);
  width: var(--region-specific-bar-width);
  border-radius: 1px;
  content: "";
  background-color: var(--region-specific-color);
}
.template-dashboard-japan-row2 {
  padding-left: var(--hds-spacing-2);
}
.template-dashboard-japan-title {
  font-family: var(--font-family);
  font-size: var(--text-size-dialog);
  font-style: normal;
  font-weight: 400;
  line-height: var(--line-height);
  color: var(--font-color-secondary);
  --icon-color: var(--font-color-secondary);
  color: var(--hds-foreground-primary);
  --icon-color: var(--hds-foreground-primary);
}
.template-dashboard-japan-description {
  font-family: var(--font-family);
  font-size: var(--text-size-dialog);
  font-style: normal;
  font-weight: 400;
  line-height: var(--line-height);
  color: var(--font-color-secondary);
  --icon-color: var(--font-color-secondary);
  color: var(--hds-foreground-secondary);
  --icon-color: var(--hds-foreground-secondary);
}
.template-dashboard-japan-documentation {
  display: flex;
}
:root .template-dashboard-japan-documentation .hds-toast-notification-action {
  font-family: var(--font-family);
  font-size: var(--text-size);
  font-style: normal;
  font-weight: 400;
  line-height: var(--text-size-dialog-big);
  letter-spacing: -0.048px;
  color: var(--font-color-secondary);
  --icon-color: var(--font-color-secondary);
  color: var(--region-specific-color);
  --icon-color: var(--region-specific-color);
}
:root .template-dashboard-japan-documentation .hds-toast-notification-action:hover {
  color: var(--region-specific-color-hover);
  --icon-color: var(--region-specific-color-hover);
}
.template-dashboard-japan-toggle {
  --hds-action: var(--region-specific-color);
  height: var(--sliding-toggle-height);
}
.progress-indicator-icon-color {
  --hds-icon-color: var(--hds-action);
}
.dashboard-map-loader {
  position: fixed;
  right: var(--hds-spacing-11);
  bottom: var(--hds-spacing-11);
  padding: var(--hds-spacing-4);
  border-radius: var(--hds-border-radius);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: var(--hds-spacing-4);
  background-color: var(--hds-background-secondary);
  filter: var(--hds-overlay);
}
.scheme-view-selector {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex-shrink: 0;
  padding: var(--hds-spacing-2);
  gap: var(--hds-spacing-2);
  border-bottom: 1px solid var(--hds-foreground-divider);
}
.scheme-view-selector-header {
  position: relative;
  padding-left: var(--hds-spacing-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.scheme-view-selector-header::before {
  position: absolute;
  left: 0;
  top: calc(50% - 18px / 2);
  height: var(--region-specific-bar-height);
  width: var(--region-specific-bar-width);
  border-radius: 1px;
  content: "";
  background-color: var(--region-specific-color);
}
.scheme-view-selector-header-wrapper {
  padding-top: var(--hds-spacing-1);
  display: flex;
  align-items: center;
}
.scheme-view-selector-header-text {
  display: flex;
  flex-direction: row;
  justify-content: center;
  font-family: var(--font-family);
  font-size: var(--text-size);
  font-style: normal;
  font-weight: 400;
  line-height: var(--text-size-dialog-big);
  letter-spacing: -0.048px;
  color: var(--font-color-secondary);
  --icon-color: var(--font-color-secondary);
  color: var(--region-specific-color);
  margin: -2px;
}
.scheme-view-selector-header-info-icon {
  --icon-color: var(--hds-foreground-tertiary);
}
.scheme-view-selector-header-info-icon .go-to-japan-button {
  align-items: center;
  justify-content: center;
  background-color: var(--region-specific-color) !important;
}
.scheme-view-selector-header-info-icon .go-to-japan-button:hover {
  background-color: var(--region-specific-color-bg-hover) !important;
}
.scheme-view-selector-header-info-icon .go-to-japan-button:active {
  background-color: var(--region-specific-color-bg-pressed) !important;
}
.scheme-view-selector-header-info-icon .go-to-japan-button .go-to-japan-icon {
  --icon-color: var(--hds-inverse-primary);
  width: var(--hds-spacing-4);
  height: var(--hds-spacing-6);
}
.scheme-view-selector-header-info-icon .go-to-japan-button-disabled {
  background-color: var(--hds-background-object) !important;
  cursor: not-allowed;
}
.scheme-view-selector-header-info-icon .go-to-japan-button-disabled:hover {
  background-color: var(--hds-background-object) !important;
}
.scheme-view-selector-header-info-icon .go-to-japan-button-disabled:active {
  background-color: var(--hds-background-object) !important;
}
.scheme-view-selector-header-info-icon .go-to-japan-button-disabled .go-to-japan-icon {
  --icon-color: #b39cc980;
  width: var(--hds-spacing-4);
  height: var(--hds-spacing-6);
}
.notification-close-button {
  background-color: var(--hds-foreground-tertiary) !important;
}
.notification-close-button:hover {
  background-color: var(--hds-foreground-tertiary-hover) !important;
}
.notification-close-button:active {
  background-color: var(--hds-foreground-tertiary-press) !important;
}
.notification-close-button hds-icon {
  --hds-icon-color: var(--hds-inverse-primary);
}
.scheme-view-selector-checkbox {
  --hds-action: var(--region-specific-color);
  --hds-ondarkcolor-primary: var(--bg-color-panel-base);
}
.scheme-view-selector-notification {
  display: flex;
  align-items: flex-start;
  padding: var(--hds-spacing-2);
  border-radius: var(--hds-border-radius);
  background: var(--region-specific-bg-color);
}
.scheme-view-selector-notification .content {
  letter-spacing: -0.048px;
  color: var(--hds-foreground-primary);
  --icon-color: var(--hds-foreground-primary);
}
.scheme-view-base {
  cursor: pointer;
  user-select: none;
  font-family: var(--font-family);
  font-size: var(--text-size);
  color: var(--font-color-group-item);
  --icon-color: var(--font-color-group-item);
  line-height: var(--line-height);
  color: var(--font-color-inactive-item-text);
  --icon-color: var(--font-color-inactive-item-text);
  border-left: var(--selected-item-selection-bar-width) solid;
  border-color: #F0F;
  padding: 0 calc(2 * var(--base-padding));
  margin: calc(3 * var(--base-padding)) calc(2 * var(--base-padding)) 0 0;
  border-color: #52A3DB;
}
.scheme-view-selected-base {
  cursor: pointer;
  user-select: none;
  color: var(--font-color-inactive-item-text);
  --icon-color: var(--font-color-inactive-item-text);
  border-left: var(--selected-item-selection-bar-width) solid;
  border-color: #F0F;
  padding: 0 calc(2 * var(--base-padding));
  margin: calc(3 * var(--base-padding)) calc(2 * var(--base-padding)) 0 0;
  border-color: #52A3DB;
  background-color: var(--hds-background-selected-press);
  font-family: var(--font-family);
  font-size: var(--text-size);
  color: var(--font-color-group-item);
  --icon-color: var(--font-color-group-item);
  line-height: var(--line-height);
}
.scheme-view-0 {
  cursor: pointer;
  user-select: none;
  font-family: var(--font-family);
  font-size: var(--text-size);
  color: var(--font-color-group-item);
  --icon-color: var(--font-color-group-item);
  line-height: var(--line-height);
  color: var(--font-color-inactive-item-text);
  --icon-color: var(--font-color-inactive-item-text);
  border-left: var(--selected-item-selection-bar-width) solid;
  border-color: #F0F;
  padding: 0 calc(2 * var(--base-padding));
  margin: calc(3 * var(--base-padding)) calc(2 * var(--base-padding)) 0 0;
  border-color: #82DBBD;
}
.scheme-view-selected-0 {
  cursor: pointer;
  user-select: none;
  color: var(--font-color-inactive-item-text);
  --icon-color: var(--font-color-inactive-item-text);
  border-left: var(--selected-item-selection-bar-width) solid;
  border-color: #F0F;
  padding: 0 calc(2 * var(--base-padding));
  margin: calc(3 * var(--base-padding)) calc(2 * var(--base-padding)) 0 0;
  border-color: #82DBBD;
  background-color: var(--hds-background-selected-press);
  font-family: var(--font-family);
  font-size: var(--text-size);
  color: var(--font-color-group-item);
  --icon-color: var(--font-color-group-item);
  line-height: var(--line-height);
}
.scheme-view-1 {
  cursor: pointer;
  user-select: none;
  font-family: var(--font-family);
  font-size: var(--text-size);
  color: var(--font-color-group-item);
  --icon-color: var(--font-color-group-item);
  line-height: var(--line-height);
  color: var(--font-color-inactive-item-text);
  --icon-color: var(--font-color-inactive-item-text);
  border-left: var(--selected-item-selection-bar-width) solid;
  padding: 0 calc(2 * var(--base-padding));
  margin: calc(3 * var(--base-padding)) calc(2 * var(--base-padding)) 0 0;
  border-color: #F0F;
}
.scheme-view-selected-1 {
  cursor: pointer;
  user-select: none;
  color: var(--font-color-inactive-item-text);
  --icon-color: var(--font-color-inactive-item-text);
  border-left: var(--selected-item-selection-bar-width) solid;
  padding: 0 calc(2 * var(--base-padding));
  margin: calc(3 * var(--base-padding)) calc(2 * var(--base-padding)) 0 0;
  border-color: #F0F;
  background-color: var(--hds-background-selected-press);
  font-family: var(--font-family);
  font-size: var(--text-size);
  color: var(--font-color-group-item);
  --icon-color: var(--font-color-group-item);
  line-height: var(--line-height);
}
.layer-list-part {
  margin-bottom: var(--hds-spacing-1);
}
.layer-list-part:last-of-type {
  margin-bottom: var(--hds-spacing-0);
}
.layer-list-part.accordion-item-disabled .layer-list-part-icon {
  --hds-icon-color: var(--hds-foreground-inactive);
  --icon-color: var(--hds-foreground-inactive);
}
.layer-list-feature-toggle {
  position: relative;
  margin-right: var(--hds-spacing-1);
}
.layer-list-styles {
  display: flex;
  flex-direction: row;
}
.layer-list-section-headline {
  display: flex;
  align-items: center;
  gap: var(--hds-spacing-2);
  --hds-icon-color: var(--hds-foreground-tertiary);
}
.layer-list-section-headline div:last-child {
  display: flex;
  --icon-color: var(--hds-foreground-tertiary);
}
.layer-list-section-content {
  padding: var(--hds-spacing-2) var(--hds-spacing-2) var(--hds-spacing-2) var(--hds-spacing-2);
}
.layer-list-section-tooltip > *:not(:first-child) {
  margin-top: calc(2 * var(--base-padding));
}
.layer-list-section-tooltip-section {
  white-space: break-spaces;
}
.documentation-link {
  text-decoration: none;
}
.documentation-link .base-icon {
  --icon-color: var(--hds-action) !important;
}
.documentation-link:hover .base-icon {
  --icon-color: var(--hds-action-hover);
}
.documentation-link:active .base-icon {
  --icon-color: var(--hds-action-press);
}
.layer-list-layer-name-visibility-icon-hidden,
.layer-remove-button {
  opacity: 0;
}
.layer-list-part:hover > .layer-remove-button,
.layer-list-part:hover > .layer-list-layer-name-visibility-icon-hidden,
.layer-list-item:hover .layer-list-layer-name-visibility-icon-hidden,
.layer-list-item:hover > .layer-remove-button {
  opacity: 1;
}
.layer-list-container {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
.layer-list-container-empty {
  margin-top: var(--hds-spacing-12);
  text-align: center;
}
.layer-list-header-buttons-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.layer-list-style-filter {
  display: flex;
  align-items: center;
  width: 100%;
}
.layer-panel-container {
  position: relative;
}
.layer-list-feature-mode-container {
  margin-top: var(--hds-spacing-2);
  padding: var(--hds-spacing-1) var(--hds-spacing-2);
  border-radius: var(--hds-border-radius);
  background-color: var(--hds-background-object);
}
.layer-list-feature-mode-container hds-label {
  display: block;
  margin-bottom: var(--hds-spacing-2);
}
.layer-list-feature-mode-label {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--hds-spacing-2);
}
.layer-list-feature-mode-label hds-tooltip {
  --hds-tooltip--z-index: 9 !important;
}
.layer-list-feature-mode-label .panel-help-icon {
  --icon-color: var(--hds-foreground-tertiary);
}
.layer-list-item {
  border-radius: var(--hds-border-radius);
  margin-bottom: var(--hds-spacing-1);
}
.layer-list-item.accordion-item-expanded {
  border-bottom-left-radius: var(--hds-spacing-0);
  border-bottom-right-radius: var(--hds-spacing-0);
  margin-bottom: var(--hds-spacing-0);
}
.accordion-solid > .layer-list-item-specific {
  background-color: var(--hds-background-selected-press);
}
.layer-list-layer-view-changes {
  position: relative;
}
.layer-list-layer-view-changes::before {
  position: absolute;
  left: 0;
  top: calc(50% - 18px / 2);
  height: var(--region-specific-bar-height);
  width: var(--region-specific-bar-width);
  border-radius: 1px;
  content: "";
  background-color: var(--region-specific-color);
}
.layer-list-item-specific {
  position: relative;
}
.layer-list-item-specific::before {
  position: absolute;
  left: 0;
  top: calc(50% - 18px / 2);
  height: var(--region-specific-bar-height);
  width: var(--region-specific-bar-width);
  border-radius: 1px;
  content: "";
  background-color: var(--region-specific-color);
}
.layer-list-item-content {
  background: var(--hds-background-object);
  border-bottom-left-radius: var(--hds-border-radius);
  border-bottom-right-radius: var(--hds-border-radius);
  margin-bottom: var(--hds-spacing-1);
  padding: var(--hds-spacing-1) var(--hds-spacing-2) var(--hds-spacing-2) var(--hds-spacing-2);
}
.layer-list-item-headline,
.layer-list-item-actions {
  display: flex;
  align-items: center;
}
.layer-list-info {
  display: flex;
  margin-left: var(--hds-spacing-2);
}
.layer-list-info .panel-help-icon {
  --icon-color: var(--hds-foreground-tertiary);
}
.layer-list-item-headline {
  display: flex;
  align-items: center;
  justify-content: center;
}
.layer-list-item-headline > div:first-child {
  white-space: nowrap;
}
.layer-list-part-disabled-clickable {
  pointer-events: all;
}
.layer-list-part-container {
  border-radius: var(--hds-border-radius);
  margin-bottom: var(--hds-spacing-1);
}
.layer-list-part-container:last-of-type {
  margin-bottom: var(--hds-spacing-0);
}
.layer-list-part-container.layer-list-part-container-selected {
  background-color: var(--hds-background-object-hover);
}
.layer-list-part-icon {
  --hds-icon-color: var(--hds-foreground-secondary);
  --icon-color: var(--hds-foreground-secondary);
  margin-right: var(--hds-spacing-2);
  display: flex;
}
.layer-list-part-view-changes {
  position: relative;
}
.layer-list-part-view-changes::before {
  position: absolute;
  left: calc(-1 * var(--hds-spacing-4));
  top: calc(50% - var(--region-specific-bar-height) / 2);
  height: var(--region-specific-bar-height);
  width: var(--region-specific-bar-width);
  border-radius: 1px;
  content: "";
  background-color: var(--region-specific-color);
}
.layer-list-overlay-notification {
  margin-bottom: var(--hds-spacing-2);
  display: flex;
  align-items: center;
  padding: var(--hds-spacing-2) var(--hds-spacing-3);
  border-radius: var(--hds-border-radius);
  background: var(--hds-background-oncolor-press);
}
.layer-list-overlay-notification .content {
  line-height: var(--hds-body-extrasmall-strong-font-line-height, 18px);
  /* 150% */
  letter-spacing: var(--hds-body-extrasmall-strong-letter-spacing, -0.2px);
  color: var(--hds-foreground-primary);
}
.layer-list-overlay-notification .content hds-button {
  margin-top: var(--hds-spacing-2);
  --icon-color: var(--hds-inverse-primary);
}
.layer-list-overlay-notification .content hds-button .trans-bold {
  font-size: var(--hds-spacing-3);
}
.layer-list-overlay-notification .actions {
  align-self: start;
}
.layers-type-switcher {
  display: flex;
  justify-content: center;
}
.scheme-preview-container {
  cursor: pointer;
  user-select: none;
  display: flex;
  flex-direction: column;
  padding: 0 calc(3 * var(--base-padding));
}
.scheme-list-folder .scheme-preview-container {
  margin-left: calc(calc(2 * var(--base-padding)) + var(--icon-text-inline-size));
}
.scheme-preview-name-container {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-grow: 1;
}
.scheme-name-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.scheme-preview-name {
  font-family: var(--font-family);
  font-size: var(--text-size);
  color: var(--font-color-group-item);
  --icon-color: var(--font-color-group-item);
  line-height: var(--line-height);
  color: var(--font-color-inactive-item-text);
  --icon-color: var(--font-color-inactive-item-text);
}
.scheme-preview-container:hover .scheme-preview-name {
  color: var(--font-color-item-text-hover);
  --icon-color: var(--font-color-item-text-hover);
}
.scheme-selected {
  border-left: solid var(--selected-item-selection-bar-width) var(--selection-color);
  background-color: var(--bg-color-item-selected);
}
.scheme-preview-overflow-btn,
.scheme-preview-button {
  opacity: 0;
}
.scheme-preview-container:hover .scheme-preview-overflow-btn,
.scheme-preview-container:hover .scheme-preview-button {
  opacity: 1;
}
.scheme-preview-overflow-container {
  cursor: pointer;
  user-select: none;
}
.scheme-preview-button-container {
  display: flex;
  align-items: center;
}
.scheme-preview-button-container > *:not(:first-child) {
  margin-left: calc(2 * var(--base-padding));
}
.scheme-preview-menu {
  box-shadow: 0 1px 4px 0 var(--shadow-color);
  --divider-color-override: var(--bg-color-popup-divider);
  background-color: var(--popup-color, var(--bg-color-popup));
  border: var(--border-size) solid var(--border-color);
  border-radius: var(--popup-border-radius);
  z-index: 9;
}
.scheme-preview-menu-item {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  white-space: nowrap;
  height: var(--header-line-height);
  padding: 0 calc(2 * var(--base-padding));
  font-family: var(--font-family);
  font-size: var(--text-size-menu);
  line-height: var(--line-height);
  color: var(--font-color-secondary);
  --icon-color: var(--font-color-secondary);
  padding: 0 calc(4 * var(--base-padding));
  height: var(--popup-item-height-large);
}
.scheme-preview-menu-item:hover {
  background-color: var(--bg-color-popup-item-hover);
  font-family: var(--font-family);
  font-size: var(--text-size-menu);
  line-height: var(--line-height);
  color: var(--font-color-primary);
  --icon-color: var(--font-color-secondary);
}
.scheme-preview-menu-item-disabled {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  white-space: nowrap;
  height: var(--header-line-height);
  padding: 0 calc(2 * var(--base-padding));
  font-family: var(--font-family);
  font-size: var(--text-size-menu);
  line-height: var(--line-height);
  color: var(--font-color-disabled);
  --icon-color: var(--font-color-disabled);
  padding: 0 calc(4 * var(--base-padding));
  height: var(--popup-item-height-large);
  cursor: default;
}
.scheme-preview-header {
  display: flex;
  align-items: center;
  padding: calc(2 * var(--base-padding)) 0;
}
.scheme-preview-header > *:not(:first-child) {
  margin-left: calc(2 * var(--base-padding));
}
.attribute-divider-container {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--half-panel-margin);
}
.attribute-header-headline {
  display: flex;
  align-items: center;
  position: relative;
}
.attribute-header-headline .attribute-name {
  margin-left: var(--hds-spacing-2);
}
.attribute-condition-header,
.attribute-matching-header,
.attribute-fallback-header {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  min-height: var(--main-item-height);
}
.attribute-condition-header-selected,
.attribute-matching-header-selected,
.attribute-fallback-header-selected {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  min-height: var(--main-item-height);
}
.attribute-condition-header-dot-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.attribute-matching-header-dot-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.attribute-name {
  margin-right: var(--hds-spacing-1);
}
.attribute-description-tooltip-content > *:not(:first-child) {
  margin-top: calc(2 * var(--base-padding));
}
.attribute-description-name {
  font-family: var(--font-family-emphasized);
}
.attribute-description-description-emphasized {
  font-family: var(--font-family-emphasized);
}
.attribute-description-no-value {
  font-family: var(--font-family-emphasized);
}
.attribute-description-icon {
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}
.attribute-attribute:hover .attribute-description-icon,
.popover-container-opened .attribute-description-icon {
  opacity: 1;
}
.attribute-left-box {
  position: relative;
  display: flex;
  align-items: center;
  flex-grow: 1;
  flex-shrink: 1;
  word-break: break-word;
}
.attribute-left-box .attribute-header-label {
  max-width: 130px;
}
.attribute-left-box > *:not(:first-child) {
  margin-left: 2px;
}
.attribute-header-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-grow: 1;
}
.attribute-header-label-matching {
  white-space: break-spaces;
}
.attribute-label-matches-filter {
  color: var(--main-button-font-color);
  background-color: var(--hds-background-selected-press);
}
.attribute-right-box {
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: var(--base-padding) 0;
  --number-input-width: var(--swatch-width);
  --slider-length: var(--swatch-width);
}
.artificial-attribute-right-box {
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: var(--base-padding) 0;
  --number-input-width: var(--swatch-width);
  --slider-length: var(--swatch-width);
  padding-right: var(--icon-box-size);
}
.value-drag-target-container {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.attribute-input {
  display: flex;
  align-items: center;
  flex-grow: 1;
  justify-content: flex-end;
}
.attribute-input:has(hds-dropdown .color-display) {
  margin-bottom: calc(-1 * 3.75px);
}
.attribute-input input {
  width: var(--swatch-width);
}
.attribute-clickable-input:has(hds-dropdown .color-display) {
  margin-bottom: calc(-1 * 3.75px);
}
.attribute-clickable-input input {
  width: var(--swatch-width);
}
.attribute-terrain-editor {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--base-padding);
}
.attribute-terrain-editor > div {
  width: 0%;
  flex-grow: 0.5;
}
.attribute-expand-base-values {
  position: relative;
}
.attribute-expand-base-values::before {
  position: absolute;
  content: " ";
  height: 100%;
  width: var(--selected-item-selection-bar-width);
  background-color: #52A3DB;
  left: calc(-1 * (var(--selected-item-selection-bar-width) + 20px));
}
.attribute-matching-container {
  margin-bottom: 10px;
  margin-left: 8px;
}
.attribute-matching-label {
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height);
  color: var(--font-color-hint);
  text-transform: uppercase;
}
.attribute-matching-property {
  display: flex;
}
.attribute-matching-property > *:not(:first-child) {
  margin-left: calc(2 * var(--base-padding));
}
.attribute-matching-match-specific {
  position: relative;
}
.attribute-matching-match-specific::before {
  position: absolute;
  content: " ";
  height: 100%;
  width: var(--selected-item-selection-bar-width);
  background-color: #82DBBD;
  left: calc(-1 * (var(--selected-item-selection-bar-width) + 20px));
}
.attribute-matching-match-base {
  position: relative;
}
.attribute-matching-match-base::before {
  position: absolute;
  content: " ";
  height: 100%;
  width: var(--selected-item-selection-bar-width);
  background-color: #52A3DB;
  left: calc(-1 * (var(--selected-item-selection-bar-width) + 20px));
}
.attribute-condition-container {
  margin-bottom: 10px;
  margin-left: 8px;
}
.attribute-condition-ellipsis {
  --icon-color: var(--hint-icon-color);
  margin-left: var(--base-padding);
}
.attribute-condition-property-match-container {
  padding-left: calc(3 * calc(2 * var(--base-padding)));
}
.attribute-condition-condition-specific {
  position: relative;
}
.attribute-condition-condition-specific::before {
  position: absolute;
  content: " ";
  height: 100%;
  width: var(--selected-item-selection-bar-width);
  background-color: #82DBBD;
  left: calc(-1 * (var(--selected-item-selection-bar-width) + 20px));
}
.attribute-condition-condition-base {
  position: relative;
}
.attribute-condition-condition-base::before {
  position: absolute;
  content: " ";
  height: 100%;
  width: var(--selected-item-selection-bar-width);
  background-color: #52A3DB;
  left: calc(-1 * (var(--selected-item-selection-bar-width) + 20px));
}
.attribute-condition-button {
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-menu);
  color: var(--font-color);
  --icon-color: var(--font-color);
  cursor: pointer;
  user-select: none;
  margin-left: var(--base-padding);
  text-align: center;
}
.attribute-expand-base-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: calc(2 * var(--base-padding));
}
.attribute-expand-base-button::before {
  position: absolute;
  content: " ";
  height: 100%;
  width: var(--selected-item-selection-bar-width);
  background-color: #52A3DB;
  left: calc(-1 * (var(--selected-item-selection-bar-width) + 20px));
}
.attribute-subeditor-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: calc(2 * var(--base-padding));
}
.attribute-vector-container {
  margin-bottom: 10px;
  margin-left: 8px;
}
.style-panel-multi-value-container {
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-menu);
  color: var(--font-color-disabled);
  --icon-color: var(--font-color-disabled);
}
.attribute-menu {
  box-shadow: 0 1px 4px 0 var(--shadow-color);
  --divider-color-override: var(--bg-color-popup-divider);
  background-color: var(--popup-color, var(--bg-color-popup));
  border: var(--border-size) solid var(--border-color);
  border-radius: var(--popup-border-radius);
  z-index: 9;
}
.attribute-menu-item {
  cursor: pointer;
  user-select: none;
  align-items: center;
  white-space: nowrap;
  height: var(--header-line-height);
  padding: 0 calc(2 * var(--base-padding));
  font-family: var(--font-family);
  font-size: var(--text-size-menu);
  line-height: var(--line-height);
  color: var(--font-color-secondary);
  --icon-color: var(--font-color-secondary);
  padding: 0 calc(4 * var(--base-padding));
  height: var(--popup-item-height-large);
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: flex-start;
}
.attribute-menu-item:hover {
  background-color: var(--bg-color-popup-item-hover);
  font-family: var(--font-family);
  font-size: var(--text-size-menu);
  line-height: var(--line-height);
  color: var(--font-color-primary);
  --icon-color: var(--font-color-secondary);
}
.attribute-menu-item-disabled {
  cursor: pointer;
  user-select: none;
  align-items: center;
  white-space: nowrap;
  height: var(--header-line-height);
  padding: 0 calc(2 * var(--base-padding));
  font-family: var(--font-family);
  font-size: var(--text-size-menu);
  line-height: var(--line-height);
  color: var(--font-color-disabled);
  --icon-color: var(--font-color-disabled);
  padding: 0 calc(4 * var(--base-padding));
  height: var(--popup-item-height-large);
  cursor: default;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: flex-start;
}
.attribute-menu-editor {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  white-space: nowrap;
  height: var(--header-line-height);
  padding: 0 calc(2 * var(--base-padding));
  font-family: var(--font-family);
  font-size: var(--text-size-menu);
  line-height: var(--line-height);
  color: var(--font-color-secondary);
  --icon-color: var(--font-color-secondary);
  padding: 0 calc(4 * var(--base-padding));
  height: var(--popup-item-height-large);
}
.attribute-menu-editor:hover {
  background-color: var(--bg-color-popup-item-hover);
  font-family: var(--font-family);
  font-size: var(--text-size-menu);
  line-height: var(--line-height);
  color: var(--font-color-primary);
  --icon-color: var(--font-color-secondary);
}
.attribute-menu-editor > *:not(:first-child) {
  margin-left: calc(2 * var(--base-padding));
}
.attribute-menu-editor-selected {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  white-space: nowrap;
  height: var(--header-line-height);
  padding: 0 calc(2 * var(--base-padding));
  color: var(--font-color-secondary);
  padding: 0 calc(4 * var(--base-padding));
  height: var(--popup-item-height-large);
  font-family: var(--font-family);
  font-size: var(--text-size-menu);
  line-height: var(--line-height);
  color: var(--font-color-primary);
  --icon-color: var(--font-color-secondary);
}
.attribute-menu-editor-selected:hover {
  background-color: var(--bg-color-popup-item-hover);
  font-family: var(--font-family);
  font-size: var(--text-size-menu);
  line-height: var(--line-height);
  color: var(--font-color-primary);
  --icon-color: var(--font-color-secondary);
}
.attribute-menu-editor-selected > *:not(:first-child) {
  margin-left: calc(2 * var(--base-padding));
}
.attribute-menu-editor-icon {
  font-size: var(--icon-text-inline-size);
  width: var(--icon-box-size);
  height: var(--icon-box-size);
  line-height: var(--icon-box-size);
  text-align: center;
}
.attribute-menu-editor-name {
  flex-grow: 1;
}
.attribute-menu-text-btn {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-box-size);
  height: var(--icon-box-size);
  border-radius: var(--selected-item-selection-bar-width);
  --icon-color: var(--toggle-button-icon-color);
  color: var(--icon-color);
}
.attribute-menu-text-btn:hover {
  --icon-color: var(--icon-color-hover, var(--icon-color-emphasized, var(--font-color-emphasized)));
}
.popover-container-opened .attribute-menu-text-btn {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-box-size);
  height: var(--icon-box-size);
  border-radius: var(--selected-item-selection-bar-width);
  background-color: var(--active-icon-color);
  --icon-color: var(--active-icon-color-inverted);
  --icon-color-emphasized: var(--active-icon-color-inverted);
}
.popover-container-opened .attribute-menu-text-btn:hover {
  --icon-color: var(--icon-color-hover, var(--icon-color-emphasized, var(--font-color-emphasized)));
}
.attribute-menu-info {
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height);
  color: var(--font-color-hint);
  text-transform: uppercase;
  padding: calc(2 * var(--base-padding));
}
.attribute-menu-submenu {
  position: relative;
}
.attribute-menu-submenu:hover > .attribute-submenu-submenu {
  display: flex;
}
.attribute-menu-title {
  font-family: var(--font-family);
  font-size: var(--text-size-tiny);
  line-height: var(--line-height-menu);
  color: var(--font-color);
  color: var(--font-color-secondary);
  --icon-color: var(--font-color-secondary);
  font-weight: initial;
  padding: calc(2 * var(--base-padding)) calc(4 * var(--base-padding));
}
.attribute-menu-title:only-of-type {
  display: none;
}
.attribute-submenu-title {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  white-space: nowrap;
  height: var(--header-line-height);
  padding: 0 calc(2 * var(--base-padding));
  font-family: var(--font-family);
  font-size: var(--text-size-menu);
  line-height: var(--line-height);
  color: var(--font-color-secondary);
  --icon-color: var(--font-color-secondary);
  padding: 0 calc(4 * var(--base-padding));
  height: var(--popup-item-height-large);
  flex-direction: row;
}
.attribute-submenu-title:hover {
  background-color: var(--bg-color-popup-item-hover);
  font-family: var(--font-family);
  font-size: var(--text-size-menu);
  line-height: var(--line-height);
  color: var(--font-color-primary);
  --icon-color: var(--font-color-secondary);
}
.attribute-submenu-title > *:first-child {
  flex-grow: 1;
  margin-right: calc(2 * var(--base-padding));
}
.attribute-submenu-submenu {
  box-shadow: 0 1px 4px 0 var(--shadow-color);
  --divider-color-override: var(--bg-color-popup-divider);
  background-color: var(--popup-color, var(--bg-color-popup));
  border: var(--border-size) solid var(--border-color);
  border-radius: var(--popup-border-radius);
  z-index: 9;
  display: none;
  flex-direction: column;
  position: absolute;
  left: 100%;
  top: 0%;
}
.attribute-submenu-submenu:hover {
  display: flex;
}
.attribute-submenu-item {
  cursor: pointer;
  user-select: none;
  align-items: center;
  white-space: nowrap;
  height: var(--header-line-height);
  padding: 0 calc(2 * var(--base-padding));
  font-family: var(--font-family);
  font-size: var(--text-size-menu);
  line-height: var(--line-height);
  color: var(--font-color-secondary);
  --icon-color: var(--font-color-secondary);
  padding: 0 calc(4 * var(--base-padding));
  height: var(--popup-item-height-large);
  display: flex;
}
.attribute-submenu-item:hover {
  background-color: var(--bg-color-popup-item-hover);
  font-family: var(--font-family);
  font-size: var(--text-size-menu);
  line-height: var(--line-height);
  color: var(--font-color-primary);
  --icon-color: var(--font-color-secondary);
}
.attribute-submenu-item > *:first-child {
  flex-grow: 1;
  margin-right: calc(2 * var(--base-padding));
}
.attribute-submenu-item-selected {
  cursor: pointer;
  user-select: none;
  align-items: center;
  white-space: nowrap;
  height: var(--header-line-height);
  padding: 0 calc(2 * var(--base-padding));
  color: var(--font-color-secondary);
  padding: 0 calc(4 * var(--base-padding));
  height: var(--popup-item-height-large);
  display: flex;
  font-family: var(--font-family);
  font-size: var(--text-size-menu);
  line-height: var(--line-height);
  color: var(--font-color-primary);
  --icon-color: var(--font-color-secondary);
}
.attribute-submenu-item-selected:hover {
  background-color: var(--bg-color-popup-item-hover);
  font-family: var(--font-family);
  font-size: var(--text-size-menu);
  line-height: var(--line-height);
  color: var(--font-color-primary);
  --icon-color: var(--font-color-secondary);
}
.attribute-submenu-item-selected > *:first-child {
  flex-grow: 1;
  margin-right: calc(2 * var(--base-padding));
}
.attribute-reference-link-box-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: var(--hds-spacing-2);
}
.text-editor-container {
  display: flex;
  flex-direction: row;
  padding: calc(2 * var(--base-padding)) 0;
}
.text-editor-container-collapsed {
  display: flex;
  flex-direction: row;
  padding: calc(2 * var(--base-padding)) 0;
  margin-right: calc(-1 * (2 * var(--base-padding) + var(--icon-box-size)));
}
.text-editor-input {
  height: calc(3 * var(--line-height));
  width: 100%;
  resize: none;
  background-color: transparent;
  border-radius: var(--input-border-radius);
  border: var(--input-border-size) solid var(--input-border-color-active);
  font-family: var(--font-family);
  line-height: var(--line-height-tiny);
  color: var(--font-color-active);
  caret-color: var(--input-caret-color);
  height: var(--input-height);
  box-sizing: border-box;
  font-family: 'Courier New', Courier, monospace;
  font-size: var(--text-size);
  color: var(--font-color-subdued);
  --icon-color: var(--font-color-subdued);
  line-height: var(--line-height);
  height: auto;
  padding: var(--base-padding);
  margin-bottom: var(--base-padding);
  width: 1px;
  flex-grow: 1;
}
.text-editor-input input[type="number"],
.text-editor-input input[type="text"] {
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-tiny);
  color: var(--font-color-active);
  caret-color: var(--input-caret-color);
}
.text-editor-input:focus-within {
  border: var(--input-border-size) solid var(--input-border-color-focussed);
  background-color: transparent;
  color: var(--font-color-emphasized);
}
.text-editor-input-error {
  height: calc(3 * var(--line-height));
  width: 100%;
  resize: none;
  border-radius: var(--input-border-radius);
  border: var(--input-border-size) solid var(--input-border-color-active);
  font-family: var(--font-family);
  line-height: var(--line-height-tiny);
  color: var(--font-color-active);
  caret-color: var(--input-caret-color);
  height: var(--input-height);
  box-sizing: border-box;
  font-family: 'Courier New', Courier, monospace;
  font-size: var(--text-size);
  color: var(--font-color-subdued);
  --icon-color: var(--font-color-subdued);
  line-height: var(--line-height);
  height: auto;
  padding: var(--base-padding);
  margin-bottom: var(--base-padding);
  width: 1px;
  flex-grow: 1;
  border: var(--input-border-size) solid var(--input-border-color-focussed);
  background-color: transparent;
  color: var(--font-color-emphasized);
  border: var(--input-border-size) solid var(--input-border-color-error);
}
.text-editor-input-error input[type="number"],
.text-editor-input-error input[type="text"] {
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-tiny);
  color: var(--font-color-active);
  caret-color: var(--input-caret-color);
}
.text-editor-input-error:focus-within {
  border: var(--input-border-size) solid var(--input-border-color-focussed);
  background-color: transparent;
  color: var(--font-color-emphasized);
}
.text-editor-input-error:focus-within {
  border-color: var(--input-border-color-error);
}
.text-editor-input-large-content {
  height: calc(3 * var(--line-height));
  width: 100%;
  resize: none;
  background-color: transparent;
  border-radius: var(--input-border-radius);
  border: var(--input-border-size) solid var(--input-border-color-active);
  font-family: var(--font-family);
  line-height: var(--line-height-tiny);
  color: var(--font-color-active);
  caret-color: var(--input-caret-color);
  height: var(--input-height);
  box-sizing: border-box;
  font-family: 'Courier New', Courier, monospace;
  font-size: var(--text-size);
  color: var(--font-color-subdued);
  --icon-color: var(--font-color-subdued);
  line-height: var(--line-height);
  height: auto;
  padding: var(--base-padding);
  margin-bottom: var(--base-padding);
  flex-grow: 1;
  width: 1px;
  height: 100%;
}
.text-editor-input-large-content input[type="number"],
.text-editor-input-large-content input[type="text"] {
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-tiny);
  color: var(--font-color-active);
  caret-color: var(--input-caret-color);
}
.text-editor-input-large-content:focus-within {
  border: var(--input-border-size) solid var(--input-border-color-focussed);
  background-color: transparent;
  color: var(--font-color-emphasized);
}
.text-editor-input-large-content .DraftEditor-root {
  overflow-x: auto;
}
.text-editor-input-large-content .DraftEditor-root::-webkit-scrollbar {
  display: none;
}
.text-editor-input-large-content .DraftEditor-editorContainer,
.text-editor-input-large-content .public-DraftEditor-content {
  min-height: 100vh;
}
.text-editor-input-large-content .public-DraftStyleDefault-block {
  white-space: pre;
}
.text-editor-input-chromeless {
  background-color: unset;
  resize: unset;
  border: none;
  padding: 0;
}
.text-editor-input-chromeless:focus-within {
  border: unset;
  background-color: unset;
}
.text-editor-large-content-label {
  cursor: pointer;
  user-select: none;
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-menu);
  color: var(--font-color);
  --icon-color: var(--font-color);
  text-align: center;
  flex-grow: 1;
}
.text-editor-button-container {
  padding: 0 var(--base-padding);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
.text-editor-button-container:empty {
  padding: 0;
}
.text-editor-menu {
  margin-top: var(--base-padding);
}
.text-editor-open-externally {
  cursor: pointer;
  user-select: none;
}
.text-editor-decorator {
  font-family: 'Courier New', Courier, monospace;
  font-size: var(--text-size);
  color: var(--font-color-subdued);
  --icon-color: var(--font-color-subdued);
  line-height: var(--line-height);
  color: var(--font-color);
}
.text-editor-color-decorator {
  font-family: 'Courier New', Courier, monospace;
  font-size: var(--text-size);
  color: var(--font-color-subdued);
  --icon-color: var(--font-color-subdued);
  line-height: var(--line-height);
  color: var(--font-color);
  padding: 0 var(--base-padding);
}
.text-editor-string-literal-decorator {
  font-family: 'Courier New', Courier, monospace;
  font-size: var(--text-size);
  color: var(--font-color-subdued);
  --icon-color: var(--font-color-subdued);
  line-height: var(--line-height);
  color: var(--font-color);
  color: var(--code-string-color);
}
.text-editor-number-decorator {
  font-family: 'Courier New', Courier, monospace;
  font-size: var(--text-size);
  color: var(--font-color-subdued);
  --icon-color: var(--font-color-subdued);
  line-height: var(--line-height);
  color: var(--font-color);
  color: #8e70f3;
}
.text-editor-special-symbol-decorator {
  font-family: 'Courier New', Courier, monospace;
  font-size: var(--text-size);
  color: var(--font-color-subdued);
  --icon-color: var(--font-color-subdued);
  line-height: var(--line-height);
  color: var(--font-color);
  font-weight: bold;
}
.property-editor-min-max {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: var(--base-padding);
}
.property-editor-dropdown {
  width: 80px;
}
.property-editor-container {
  display: flex;
  flex-direction: column;
  margin-bottom: calc(2 * var(--base-padding));
}
.property-editor-container > *:not(:first-child) {
  margin-top: calc(2 * var(--base-padding));
}
.property-editor-header {
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height);
  color: var(--font-color-hint);
  text-transform: uppercase;
}
.property-editor-input-row {
  display: flex;
  align-items: center;
}
.property-editor-input-row > *:not(:first-child) {
  margin-left: calc(2 * var(--base-padding));
}
.sub-editor {
  background: var(--hds-background-object);
  margin-bottom: var(--hds-spacing-1);
  padding: 0 var(--hds-spacing-1);
  padding: var(--hds-spacing-1) var(--hds-spacing-2);
}
.sub-editor-selected {
  background: var(--hds-background-object);
  margin-bottom: var(--hds-spacing-1);
  padding: 0 var(--hds-spacing-1);
  padding: var(--hds-spacing-1) var(--hds-spacing-2);
  border-bottom-left-radius: var(--hds-border-radius);
  border-bottom-right-radius: var(--hds-border-radius);
}
.sub-editor-divider {
  margin: calc(2 * var(--base-padding)) 0 calc(2 * var(--base-padding)) 0;
  height: var(--panel-margin);
  width: 100%;
  background-color: var(--sub-item-box-bg-color);
}
.sub-editor-spacing {
  height: calc(2 * var(--base-padding));
  width: 100%;
}
.file-editor-container {
  background: var(--hds-background-object);
  margin-bottom: var(--hds-spacing-1);
  padding: 0 var(--hds-spacing-1);
  display: flex;
  flex-direction: column;
  padding: calc(2 * var(--base-padding)) var(--base-padding);
  margin-bottom: calc(3 * var(--base-padding));
}
.file-editor-container > *:not(:first-child) {
  margin-top: var(--base-padding);
}
.attribute-matching-expanded .file-editor-container,
.attribute-condition-expanded .file-editor-container {
  border: none;
  background-color: unset;
  margin: 0;
  padding: 0 ;
  padding: calc(2 * var(--base-padding)) var(--base-padding);
  margin-bottom: calc(3 * var(--base-padding));
}
.file-editor-segment {
  padding: 0;
  display: flex;
  align-items: center;
}
.file-editor-segment-index {
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height);
  color: var(--font-color-hint);
  text-transform: uppercase;
  margin-right: var(--base-padding);
}
.file-editor-segment-add {
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.file-editor-input-container {
  flex-grow: 1;
  cursor: pointer;
  user-select: none;
}
.file-editor-input-label {
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-menu);
  color: var(--font-color);
  --icon-color: var(--font-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.file-editor-input-label:hover {
  color: var(--font-color-emphasized);
}
.icon-exception {
  padding: 0;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  justify-content: flex-end;
}
.icon-exception-input-container {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  box-sizing: border-box;
  cursor: pointer;
  user-select: none;
}
.icon-exception-label {
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-menu);
  color: var(--font-color);
  --icon-color: var(--font-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.icon-exception-icon-container {
  margin: 0;
  flex-shrink: 0;
  margin-left: var(--base-padding);
}
.icon-exception-icon-container-bordered {
  margin: 0;
  flex-shrink: 0;
  margin-left: var(--base-padding);
  border-radius: var(--input-border-radius);
  border: var(--input-border-size) solid var(--input-border-color-active);
}
.icon-exception-icon {
  background-color: var(--icon-color, var(--font-color));
  width: var(--icon-box-size);
  height: var(--icon-box-size);
  --icon-color: var(--disabled-icon-color);
  margin: 0;
  flex-shrink: 0;
}
.dash-preset-positioning {
  margin-right: calc(var(--icon-box-size) + var(--base-padding));
}
.file-editor-catalogue-row {
  display: flex;
}
.base-file-editor-catalogue-button {
  cursor: pointer;
  user-select: none;
  font-size: var(--icon-text-inline-size);
  width: var(--icon-box-size);
  height: var(--icon-box-size);
  line-height: var(--icon-box-size);
  text-align: center;
  margin-left: calc(2 * var(--base-padding));
  transition: opacity 100ms ease-in-out;
  opacity: 0;
}
.file-editor-catalogue-button {
  cursor: pointer;
  user-select: none;
  font-size: var(--icon-text-inline-size);
  width: var(--icon-box-size);
  height: var(--icon-box-size);
  line-height: var(--icon-box-size);
  text-align: center;
  margin-left: calc(2 * var(--base-padding));
  transition: opacity 100ms ease-in-out;
  opacity: 0;
}
.attribute-attribute .file-editor-catalogue-button {
  opacity: 1;
}
.file-editor-catalogue-button-disabled {
  cursor: pointer;
  user-select: none;
  font-size: var(--icon-text-inline-size);
  width: var(--icon-box-size);
  height: var(--icon-box-size);
  line-height: var(--icon-box-size);
  text-align: center;
  margin-left: calc(2 * var(--base-padding));
  transition: opacity 100ms ease-in-out;
  opacity: 0;
  opacity: var(--input-disabled-opacity);
  pointer-events: none;
  cursor: default;
}
.toll-class-selector-container {
  width: 13rem;
}
.attribute-item-content:has(.property-content-header),
.attribute-item-content:has(.condition-content-header),
.attribute-item-content:has(.gradient-content-header),
.attribute-item-content:has(.fallback-content-header) {
  padding: var(--hds-spacing-1) var(--hds-spacing-2) var(--hds-spacing-2) var(--hds-spacing-2);
}
.attribute-menu-group-title {
  padding: var(--hds-spacing-1) var(--hds-spacing-4);
  padding-top: var(--hds-spacing-3);
  color: var(--hds-foreground-secondary);
}
.overflow-attribute-border {
  border-bottom: var(--hds-spacing-1px) solid var(--hds-foreground-divider);
}
.top-level-dropdown,
.sub-condition-dropdown {
  margin-bottom: calc(-2 * var(--hds-spacing-1px));
}
.top-level-dropdown hds-list #more-actions-group-title:first-child {
  display: none;
}
.top-level-dropdown hds-list:has(#more-actions-group-title:first-child) {
  padding: var(--hds-spacing-2) var(--hds-spacing-0);
}
.sub-condition-dropdown hds-list:first-child hds-list:last-child {
  padding-bottom: var(--hds-spacing-2);
}
.layer-editor-modification-notification {
  margin: var(--hds-spacing-2) var(--hds-spacing-3) var(--hds-spacing-0) var(--hds-spacing-2);
  display: flex;
  align-items: center;
  padding: var(--hds-spacing-2) var(--hds-spacing-3);
  border-radius: var(--hds-border-radius);
  background: var(--hds-background-oncolor-press);
}
.layer-editor-modification-notification .content {
  line-height: var(--hds-body-extrasmall-strong-font-line-height, 18px);
  /* 150% */
  letter-spacing: var(--hds-body-extrasmall-strong-letter-spacing, -0.2px);
  color: var(--hds-foreground-primary);
}
.attribute-menu-placeholder {
  height: var(--hds-spacing-7);
  width: var(--hds-spacing-7);
}
.property-content-header:has(svg.graph) .attribute-left-box,
.condition-content-header:has(svg.graph) .attribute-left-box {
  max-width: 125px;
}
.property-content-header:has(svg.graph):has(.attribute-reference-link-box-container > hds-button) .attribute-left-box,
.condition-content-header:has(svg.graph):has(.attribute-reference-link-box-container > hds-button) .attribute-left-box {
  max-width: 100px;
}
.attribute-icon-header-headline {
  display: flex;
  align-items: center;
  position: relative;
  padding: var(--hds-spacing-1px) var(--hds-spacing-2) var(--hds-spacing-1px) 0;
}
.attribute-icon-header-headline .attribute-name {
  margin-left: var(--hds-spacing-2);
}
.attribute-icon-header-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--button-height);
  height: var(--button-height);
}
.attribute-icon-search-header {
  flex-grow: 1;
  display: flex;
  align-items: center;
  gap: var(--hds-spacing-1);
  padding-right: var(--hds-spacing-2);
}
.attribute-icon-row-search {
  flex-grow: 1;
}
.attribute-icon-content {
  background: var(--hds-background-object);
  padding: var(--hds-spacing-2);
  border-radius: 0 0 var(--hds-border-radius) var(--hds-border-radius);
  display: flex;
  flex-direction: column;
  gap: var(--hds-spacing-1);
}
.attribute-editor-icon-item {
  border-radius: var(--hds-border-radius);
  margin-bottom: var(--hds-spacing-1);
  display: flex;
}
.attribute-editor-icon-item.accordion-item-expanded {
  border-bottom-left-radius: var(--hds-spacing-0);
  border-bottom-right-radius: var(--hds-spacing-0);
  margin-bottom: var(--hds-spacing-0);
}
.accordion-solid > .attribute-editor-icon-item-specific {
  background-color: var(--hds-background-selected-press);
}
.attribute-editor-icon-item .accordion-item-header {
  flex-grow: 1;
}
.attribute-editor-icon-item .attribute-icon-header-headline {
  flex-grow: 1;
}
.attribute-editor-icon-item .accordion-item-header-left {
  flex-grow: 1;
}
.icon-attribute-name {
  margin-right: var(--hds-spacing-1);
  font: var(--hds-body-extrasmall-strong-font);
  flex-grow: 1;
}
.attribute-icon-row {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  min-height: 2rem;
  padding: 0 var(--hds-spacing-2) 0 var(--hds-spacing-1);
  border-radius: var(--hds-border-radius);
  gap: var(--hds-spacing-2);
}
.attribute-icon-row:hover {
  background-color: var(--hds-background-hover);
}
.attribute-icon-row > .popover-container {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}
.attribute-editor-icon-icon {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}
.attribute-editor-icon-placeholder {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  background: repeating-conic-gradient(var(--hds-white-onlight-100-045) 0 25%, var(--hds-white-onlight-100-035) 0 50%) 50% / 8px 8px;
  box-sizing: border-box;
  border-radius: 2px;
  border: 1px dashed var(--hds-foreground-tertiary);
}
.attribute-icon-row-selected {
  background-color: var(--bg-selected-item);
}
.attribute-icon-row-label {
  flex-grow: 1;
}
.attribute-icon-header-headline .attribute-icon-row-label {
  margin-left: var(--hds-spacing-2);
}
.attribute-icon-category-selector-container {
  background: var(--hds-background-object);
  border-radius: var(--hds-border-radius);
  padding: var(--hds-spacing-1) var(--hds-spacing-2) var(--hds-spacing-2) var(--hds-spacing-2);
  margin-bottom: calc(2 * var(--base-padding));
  display: flex;
  flex-direction: column;
  gap: var(--hds-spacing-2);
}
.attribute-icon-category-selector-label {
  font-family: var(--font-family);
  font-size: var(--text-size);
  font-style: normal;
  font-weight: 400;
  line-height: var(--text-size-dialog-big);
  letter-spacing: -0.048px;
  color: var(--font-color-secondary);
  --icon-color: var(--font-color-secondary);
  color: var(--hds-foreground-secondary);
  --icon-color: var(--hds-foreground-secondary);
}
.attribute-icon-category-header {
  cursor: pointer;
  user-select: none;
  font: var(--hds-body-extrasmall-strong-font);
  color: var(--hds-action);
  --icon-color: var(--hds-action);
  line-height: var(--hds-body-link-line-height);
  padding: 0 var(--hds-spacing-2);
}
.attribute-icon-category-header:hover {
  color: var(--hds-action-hover);
  --icon-color: var(--hds-action-hover);
}
.attribute-icon-empty-search {
  border-radius: var(--hds-border-radius);
  background-color: var(--hds-background-selected);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--hds-spacing-3);
  padding-top: var(--hds-spacing-4);
  padding-bottom: var(--hds-spacing-8);
  --hds-icon-color: var(--hds-foreground-inactive);
}
.attribute-icon-empty-search-text {
  font-family: var(--font-family);
  font-size: var(--text-size);
  font-style: normal;
  font-weight: 400;
  line-height: var(--text-size-dialog-big);
  letter-spacing: -0.048px;
  color: var(--font-color-secondary);
  --icon-color: var(--font-color-secondary);
  font-weight: 500;
  font-family: var(--font-family-emphasized);
  color: var(--hds-foreground-secondary);
  --icon-color: var(--hds-foreground-secondary);
}
.revision-container {
  cursor: pointer;
  user-select: none;
  margin-top: var(--panel-margin);
  border-radius: var(--panel-body-border-radius);
  background-color: var(--bg-color-panel-content);
  height: var(--main-item-height);
  display: flex;
  align-items: center;
  padding: var(--base-padding);
}
.revision-container:first-child {
  margin-top: 0;
}
.revision-container > :not(:last-child) {
  margin-right: calc(2 * var(--base-padding));
}
.revision-container-selected {
  cursor: pointer;
  user-select: none;
  margin-top: var(--panel-margin);
  border-radius: var(--panel-body-border-radius);
  background-color: var(--bg-color-panel-content);
  height: var(--main-item-height);
  display: flex;
  align-items: center;
  padding: var(--base-padding);
  border-left: solid var(--selected-item-selection-bar-width) var(--selection-color);
  background-color: var(--bg-color-item-selected);
}
.revision-container-selected:first-child {
  margin-top: 0;
}
.revision-container-selected > :not(:last-child) {
  margin-right: calc(2 * var(--base-padding));
}
.revision-name {
  flex-grow: 1;
}
.revision-name > * {
  flex-grow: 1;
  max-width: unset;
  width: unset;
}
.revision-container-selected > .revision-name {
  font-family: var(--font-family);
  font-size: var(--text-size);
  color: var(--font-color-group-item);
  --icon-color: var(--font-color-group-item);
  line-height: var(--line-height);
}
.revisions-header {
  display: flex;
}
.revisions-scheme-name {
  flex-grow: 1;
}
.revisions-content {
  height: 1px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.layer-editor-header-banner {
  font-family: var(--font-family);
  font-size: var(--text-size);
  color: var(--font-color-group-item);
  --icon-color: var(--font-color-group-item);
  line-height: var(--line-height);
  color: var(--font-color-inactive-item-text);
  --icon-color: var(--font-color-inactive-item-text);
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: var(--notification-container-height);
  border-radius: var(--border-radius);
  box-shadow: 0 1px 4px 0 var(--shadow-color);
  padding: 0 calc(2 * var(--base-padding));
  transition: all var(--notification-animation-duration) ease-in-out;
  background-color: #EC610E;
  width: unset;
  margin: 0 calc(2 * var(--base-padding));
  flex-shrink: 0;
  position: absolute;
  bottom: calc(2 * var(--base-padding));
  z-index: 10;
  width: calc(100% - calc(4 * var(--base-padding)));
  box-sizing: border-box;
}
.layer-editor-header-banner-icon-container {
  cursor: pointer;
  user-select: none;
}
.layer-editor-body {
  height: 1px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.layer-editor-layer-container {
  display: flex;
  flex-direction: column;
  padding: var(--hds-spacing-2) var(--hds-spacing-1) var(--hds-spacing-2) var(--hds-spacing-2);
  flex-grow: 1;
}
.layer-editor-layer-container-empty {
  display: flex;
  justify-content: center;
  height: calc(100vh - 184px);
  margin-top: var(--margin-from-top);
  text-align: center;
}
.attribute-property-filter {
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height);
  color: var(--font-color-panel-notification);
  --icon-color: var(--font-color-panel-notification);
  --divider-color: var(--font-color-panel-notification);
  display: flex;
  align-items: center;
  padding: calc(2 * var(--base-padding)) calc(4 * var(--base-padding));
  background-color: var(--notification-overlay2-bg-color);
  margin-top: var(--panel-margin);
}
.attribute-property-filter-text {
  width: 1px;
  flex-grow: 1;
}
.attribute-property-filter-clear {
  cursor: pointer;
  user-select: none;
  font-family: var(--font-family-emphasized);
  font-size: var(--text-size-big-button);
  line-height: var(--line-height-menu);
  color: var(--action-text-button);
  --icon-color: var(--action-text-button);
  flex-shrink: 0;
  margin-left: calc(2 * var(--base-padding));
}
.attribute-property-filter-clear:hover {
  color: var(--action-text-button-hover);
}
.attribute-toll-row {
  display: flex;
  justify-content: flex-start;
  padding: var(--hds-spacing-2) var(--hds-spacing-0) var(--hds-spacing-0) var(--hds-spacing-2);
}
.header-prefix-highlight-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-text-inline-size);
  height: var(--icon-text-inline-size);
  position: absolute;
  left: calc(-1 * var(--hds-spacing-1));
}
.highlight-dot {
  width: 4px;
  height: 4px;
  border-radius: 2px;
}
.toll-class-highlight-dot {
  width: 4px;
  height: 4px;
  border-radius: 2px;
  background-color: var(--hds-background-inverse);
}
.toll-class-highlight-dot:not(.toll-class-highlight-dot-active) {
  display: none;
}
.modifier-affected-highlight-dot-container {
  position: relative;
  top: -9px;
  right: -5px;
  background-color: transparent;
}
.modifier-affected-highlight-dot-container:has(~ .value-drag-target-container > .attribute-input > svg.graph) {
  margin-right: var(--modifier-affected-specific-margin);
  height: var(--menubar-icon-size);
  width: var(--menubar-icon-size);
  z-index: 1;
  justify-content: center;
  align-items: center;
}
.value-drag-target-container:has(.attribute-input > svg.graph) .modifier-affected-highlight-dot-container {
  position: relative;
  top: -10px;
  right: -38px;
}
.modifier-template-prompt-tooltip-container {
  width: var(--modifier-affected-specific-tooltip-width);
}
.modifier-affected-tooltip-container {
  cursor: pointer;
  user-select: none;
  display: flex;
  flex-direction: column;
  padding: 0.25rem 0;
}
.modifier-affected-tooltip-container .global-icon {
  height: var(--boolean-input-height);
  width: var(--boolean-input-height);
  border-radius: 50%;
  padding: var(--button-icon-spacing);
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: 1.2rem;
  margin-right: var(--button-icon-spacing);
  --hds-icon-color: var(--font-color-item-text-hover);
}
.modifier-affected-tooltip-container .divider-line {
  border-bottom: 1px solid var(--divider-color-ondark);
  margin: var(--button-icon-spacing) -12px;
  width: var(--modifier-affected-specific-tooltip-width);
}
.modifier-affected-tooltip-container .tooltip-icon-wrapper {
  display: flex;
}
.modifier-affected-highlight-dot {
  cursor: pointer;
  user-select: none;
  height: var(--button-icon-spacing);
  width: var(--button-icon-spacing);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hds-foreground-tertiary-hover);
  background: var(--modifier-dot--default-state);
  position: relative;
  z-index: 1;
}
.modifier-affected-highlight-dot:hover {
  background: var(--modifier-dot--hover-state);
}
.modifier-affected-highlight-dot:focus {
  background: var(--modifier-dot--default-state);
}
.property-content-header,
.condition-content-header,
.gradient-content-header,
.fallback-content-header {
  position: relative;
  margin-bottom: var(--hds-spacing-1);
  border-radius: var(--hds-border-radius);
}
.property-content-header.accordion-item-expanded,
.condition-content-header.accordion-item-expanded,
.gradient-content-header.accordion-item-expanded,
.fallback-content-header.accordion-item-expanded {
  margin-bottom: var(--hds-spacing-0);
  border-bottom-left-radius: var(--hds-spacing-0);
  border-bottom-right-radius: var(--hds-spacing-0);
  background-color: var(--hds-background-object);
}
.property-content-header:last-of-type,
.condition-content-header:last-of-type,
.gradient-content-header:last-of-type,
.fallback-content-header:last-of-type {
  margin-bottom: var(--hds-spacing-0);
}
.property-content-header:has(svg.graph) .attribute-left-box div,
.condition-content-header:has(svg.graph) .attribute-left-box div,
.gradient-content-header:has(svg.graph) .attribute-left-box div,
.fallback-content-header:has(svg.graph) .attribute-left-box div {
  max-width: calc(var(--hds-spacing-14) + var(--hds-spacing-3));
}
.property-content-header:has(svg.graph):has(.attribute-reference-link-box-container > .icon-toggle-button) .attribute-left-box div,
.condition-content-header:has(svg.graph):has(.attribute-reference-link-box-container > .icon-toggle-button) .attribute-left-box div,
.gradient-content-header:has(svg.graph):has(.attribute-reference-link-box-container > .icon-toggle-button) .attribute-left-box div,
.fallback-content-header:has(svg.graph):has(.attribute-reference-link-box-container > .icon-toggle-button) .attribute-left-box div {
  max-width: var(--hds-spacing-13);
}
.property-content-header:hover hds-button[id^="-sub-menu-button"],
.condition-content-header:hover hds-button[id^="-sub-menu-button"],
.gradient-content-header:hover hds-button[id^="-sub-menu-button"],
.fallback-content-header:hover hds-button[id^="-sub-menu-button"] {
  visibility: visible;
}
.property-content-header-specific,
.condition-content-header-specific,
.gradient-content-header-specific,
.fallback-content-header-specific {
  position: relative;
}
.property-content-header-specific::before,
.condition-content-header-specific::before,
.gradient-content-header-specific::before,
.fallback-content-header-specific::before {
  position: absolute;
  left: calc(-1 * var(--hds-spacing-2));
  top: calc(50% - var(--region-specific-bar-height) / 2);
  height: var(--region-specific-bar-height);
  width: var(--region-specific-bar-width);
  border-radius: 1px;
  content: "";
  background-color: var(--region-specific-color);
}
hds-button[id^="-sub-menu-button"] {
  visibility: hidden;
}
.modifier-affecting-notification {
  position: sticky;
  bottom: 0px;
  margin: var(--hds-spacing-1) var(--hds-spacing-2);
}
.modifier-affecting-notification div[class^=collapsible-notification-heading-] {
  background-color: var(--modifier-header-bg);
  color: var(--hds-background-secondary);
}
.modifier-affecting-notification div[class^=collapsible-notification-heading-] .collapsible-notification-icon {
  --hds-icon-color: var(--hds-background-secondary);
}
.ga-function-block {
  display: flex;
  flex-direction: column;
  padding: var(--hds-spacing-0) var(--hds-spacing-1) var(--hds-spacing-1) var(--hds-spacing-2);
}
.ga-function-block-horizontal {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
.ga-basic-function-block {
  display: flex;
  flex-direction: column;
}
.ga-function-item-row {
  display: flex;
  align-items: center;
  height: var(--main-item-height);
  padding: 0px calc(2 * var(--base-padding));
}
.ga-function-item-row > *:not(:first-child) {
  margin-left: var(--base-padding);
}
.ga-function-item-row-vertical {
  display: flex;
  flex-direction: column;
  gap: var(--hds-spacing-1);
}
.ga-label {
  color: var(--hds-foreground-secondary);
  flex-grow: 1;
}
.ga-label-disabled {
  color: var(--hds-foreground-tertiary);
}
.ga-input {
  --input-border-radius: var(--hds-border-radius);
  --input-border-color-hover: var(--hds-foreground-tertiary-hover);
  --input-border-color-focussed: var(--hds-object-focused);
  --input-border-color-active: var(--hds-foreground-tertiary);
  --input-border-color-inactive: var(--hds-foreground-tertiary-disabled);
  --input-bg-color-inactive: var(--hds-background-primary);
  --input-bg-color-active: var(--hds-background-secondary);
  --number-input-width: var(--ga-blend-mode-btn-width);
}
.ga-input .slider-input-group {
  --slider-length: 85px;
}
.ga-slider-container {
  display: flex;
  align-items: center;
  --slider-length: 85px;
  --input-border-radius: var(--hds-border-radius);
  --input-border-color-hover: var(--hds-foreground-tertiary-hover);
  --input-border-color-focussed: var(--hds-object-focused);
  --input-border-color-active: var(--hds-foreground-tertiary);
  --input-border-color-inactive: var(--hds-foreground-tertiary-disabled);
  --input-bg-color-inactive: var(--hds-background-primary);
  --input-bg-color-active: var(--hds-background-secondary);
  --number-input-width: var(--ga-blend-mode-btn-width);
}
.ga-slider-container > *:first-child {
  margin-right: calc(2 * var(--base-padding));
}
.ga-slider-input {
  background-color: transparent;
  border-radius: var(--input-border-radius);
  border: var(--input-border-size) solid var(--input-border-color-active);
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-tiny);
  color: var(--font-color-active);
  caret-color: var(--input-caret-color);
  height: var(--input-height);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  position: relative;
  width: var(--ga-blend-mode-btn-width);
}
.ga-slider-input input[type="number"],
.ga-slider-input input[type="text"] {
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-tiny);
  color: var(--font-color-active);
  caret-color: var(--input-caret-color);
}
.ga-slider-input:not(.draggable-number-disabled) {
  border: var(--input-border-size) solid var(--input-border-color-active);
  background-color: transparent;
  color: var(--font-color-active);
}
.ga-slider-input:hover {
  border-color: var(--input-border-color-hover);
}
.ga-slider-input:focus-within {
  border: var(--input-border-size) solid var(--input-border-color-focussed);
  background-color: transparent;
  color: var(--font-color-emphasized);
}
.ga-slider-input.number-input-container-disabled {
  pointer-events: none;
}
.ga-hsv-block {
  display: flex;
  flex-direction: column;
  padding: var(--hds-spacing-0) var(--hds-spacing-1) var(--hds-spacing-1) var(--hds-spacing-2);
}
.ga-hsv-row {
  display: flex;
  align-items: center;
  height: var(--main-item-height);
  padding: 0px calc(2 * var(--base-padding));
}
.ga-hsv-row > *:not(:first-child) {
  margin-left: var(--base-padding);
}
.ga-path-search {
  border-radius: 5px;
  min-height: calc(48px + var(--hds-spacing-1));
}
.ga-path-input-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  border-radius: var(--hds-border-radius);
  background: var(--hds-background-secondary);
  border: 1px solid var(--hds-foreground-tertiary);
  padding: calc(var(--hds-spacing-3) + (3 * var(--hds-spacing-1px))) var(--hds-spacing-2);
  gap: calc(2 * var(--hds-spacing-1px));
}
.ga-path-input-row:has(input:focus) {
  border: 1px solid var(--hds-object-focused);
}
.ga-path-input-with-close-row {
  display: flex;
  height: 100%;
}
.ga-path-input-with-close-row .popover-container-closed,
.ga-path-input-with-close-row .popover-container-opened {
  width: 100%;
}
.export-style-custom-header {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.export-style-custom-header .info-icon {
  margin: var(--hds-spacing-0) var(--hds-spacing-3) var(--hds-spacing-0);
}
.export-style-custom-header .cross-icon {
  display: flex;
  position: absolute;
  right: var(--hds-spacing-4);
}
.region-specific-confirmation-header {
  position: relative;
  font-family: var(--font-family);
  font-size: var(--text-size);
  font-style: normal;
  font-weight: 400;
  line-height: var(--text-size-dialog-big);
  letter-spacing: -0.048px;
  color: var(--font-color-secondary);
  --icon-color: var(--font-color-secondary);
  font-weight: 500;
  font-family: var(--font-family-emphasized);
  color: var(--hds-foreground-primary);
  --icon-color: var(--hds-foreground-primary);
  font-size: var(--text-size-drag-and-drop-title);
  line-height: var(--line-height-drag-and-drop-title);
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: var(--hds-spacing-2);
  padding-left: var(--hds-spacing-3);
}
.region-specific-confirmation-header::before {
  position: absolute;
  left: 0;
  top: calc(50% - 18px / 2);
  height: var(--region-specific-bar-height);
  width: var(--region-specific-bar-width);
  border-radius: 1px;
  content: "";
  background-color: var(--region-specific-color);
}
.ga-path-input[type=text] {
  font: var(--hds-body-extrasmall-strong-font);
  width: 100%;
  color: var(--hds-foreground-primary);
  background: var(--hds-background-secondary);
  border-radius: var(--hds-border-radius);
  border: none;
  padding: var(--hds-spacing-0);
}
.ga-path-input[type=text]:focus {
  border: none;
}
.ga-path-input-clear-visible {
  cursor: pointer;
  user-select: none;
  visibility: visible;
}
.ga-path-input-clear-hidden {
  visibility: hidden;
}
.ga-path-suggestion-box {
  background-color: var(--hds-background-secondary);
  border-radius: var(--hds-border-radius);
  width: 236px;
  max-height: 312px;
  filter: var(--hds-overlay);
}
.ga-path-suggestion-box:not(:empty) {
  padding: var(--hds-spacing-2) 0;
}
.ga-path-suggestion-row {
  cursor: pointer;
  user-select: none;
  height: var(--hds-spacing-7);
  display: flex;
  align-items: center;
  padding: var(--hds-spacing-0) var(--hds-spacing-3);
}
.ga-path-selected-suggestion-row {
  cursor: pointer;
  user-select: none;
  height: var(--hds-spacing-7);
  display: flex;
  align-items: center;
  padding: var(--hds-spacing-0) var(--hds-spacing-3);
  background-color: var(--hds-background-selected);
}
.ga-suggestion-path {
  display: flex;
  align-items: center;
  height: var(--line-height);
  padding: 0 var(--base-padding);
  border-radius: var(--item-border-radius);
  width: 1px;
  flex-grow: 1;
}
.ga-suggestion-path > *:not(:first-child) {
  margin-left: var(--base-padding);
}
.ga-suggestion-path .base-icon {
  padding: var(--hds-spacing-0) var(--hds-spacing-2);
  --icon-color: var(--hds-foreground-secondary);
}
.ga-suggestion-path-label {
  color: var(--hds-foreground-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 1px;
  flex-grow: 1;
  flex-shrink: 1;
}
.ga-path-selected-suggestion-row .ga-suggestion-path {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.ga-path-suggestion-row:hover {
  background-color: var(--hds-background-hover);
}
.ga-path-selected-suggestion-row:hover {
  background-color: var(--hds-background-selected-hover);
}
.ga-path-suggestion-row:active {
  background-color: var(--hds-background-press);
}
.ga-path-selected-suggestion-row:active {
  background-color: var(--hds-background-selected-press);
}
.ga-modifier-btn-path {
  cursor: pointer;
  user-select: none;
  margin-right: calc(2 * var(--base-padding));
}
.ga-modifier-btn-path .icon-toggle-button .popover-container .popover-content > hds-icon {
  padding-top: var(--hds-spacing-1);
}
.apply-modifiers-section {
  margin-left: auto;
}
.modifier-map-overlay-panel-apply-modifiers-button {
  flex-grow: 1;
}
.ga-path {
  display: flex;
  flex-direction: column;
  width: 1px;
  flex-grow: 1;
}
.ga-edited-path-fragment-container {
  margin-left: calc(var(--index) * calc(3 * var(--base-padding)));
}
.ga-edited-path-fragment {
  display: flex;
  align-items: center;
  height: var(--line-height);
  padding: 0 var(--base-padding);
  border-radius: var(--item-border-radius);
}
.ga-edited-path-fragment > *:not(:first-child) {
  margin-left: var(--base-padding);
}
.ga-edited-path-fragment .base-icon {
  padding: var(--hds-spacing-0) var(--hds-spacing-2);
  --icon-color: var(--hds-foreground-secondary);
}
.ga-edited-path-fragment-label {
  font-family: var(--font-family);
  font-size: var(--text-size-tiny);
  color: var(--font-color);
  --icon-color: var(--font-color);
  line-height: var(--line-height-tiny);
}
.ga-suggestion-path:hover .ga-edited-path-fragment-label {
  color: var(--font-color-emphasized);
}
.ga-path-fragment {
  display: flex;
  align-items: center;
  height: var(--line-height);
  padding: 0 var(--base-padding);
  border-radius: var(--item-border-radius);
}
.ga-path-fragment > *:not(:first-child) {
  margin-left: var(--base-padding);
}
.ga-path-fragment .base-icon {
  padding: var(--hds-spacing-0) var(--hds-spacing-2);
  --icon-color: var(--hds-foreground-secondary);
}
.ga-path-fragment-label {
  font-family: var(--font-family);
  font-size: var(--text-size-tiny);
  color: var(--font-color);
  --icon-color: var(--font-color);
  line-height: var(--line-height-tiny);
}
.ga-suggestion-path:hover .ga-path-fragment-label {
  color: var(--font-color-emphasized);
}
.ga-path-fragment-button {
  cursor: pointer;
  user-select: none;
}
.ga-path-suggestion-group {
  display: flex;
  flex-direction: column;
}
.ga-path-suggestion-header {
  color: var(--hds-foreground-secondary);
  padding: var(--hds-spacing-1) var(--hds-spacing-4);
  border-top: 1px solid var(--hds-foreground-divider);
}
.ga-dropzone-include {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background-color: var(--hds-hsd-green-ondark-600-040);
  border-radius: var(--hds-border-radius);
  border: 1px dashed var(--hds-foreground-tertiary);
}
.ga-dropzone-include-hover {
  border-color: transparent;
  outline: 2px solid var(--hds-action);
  background-color: var(--hds-hsd-green-ondark-950);
}
.ga-dropzone-include-disabled {
  background-color: var(--hds-hsd-green-ondark-600-040);
}
.ga-dropzone-exclude {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border-radius: var(--hds-border-radius);
  background-color: var(--hds-red-onlight-400);
  border: 1px dashed var(--hds-foreground-tertiary);
}
.ga-dropzone-exclude-hover {
  border-color: transparent;
  outline: 2px solid var(--hds-action);
  background-color: var(--hds-hsd-red-ondark-600-040);
}
.ga-dropzone-exclude-disabled {
  background-color: var(--hds-red-onlight-400);
}
.ga-dropzone {
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-menu);
  color: var(--font-color-emphasized);
  --icon-color: var(--font-color-emphasized);
  width: 100%;
  display: flex;
  text-align: center;
  flex-direction: row;
  gap: var(--hds-spacing-1);
  border-radius: var(--hds-border-radius);
}
.ga-dropzone-heading {
  display: flex;
  align-items: center;
  gap: var(--hds-spacing-1);
  color: var(--hds-foreground-secondary);
  --hds-icon-color: var(--hds-action);
}
.ga-dropzone-heading:hover {
  --hds-icon-color: var(--hds-action-hover);
}
.ga-dropzone-heading .ga-dropzone-heading-drag-drop {
  font: var(--hds-body-extrasmall-strong-font);
  color: var(--hds-foreground-secondary);
}
.ga-dropzone-heading .ga-dropzone-heading-search-text {
  font: var(--hds-body-extrasmall-strong-font);
  color: var(--hds-action);
  padding-right: var(--hds-spacing-1px);
}
.ga-dropzone-heading .ga-dropzone-heading-search-text:hover {
  color: var(--hds-action-hover);
}
.ga-dropzone-heading .ga-dropzone-heading-search-text:active {
  color: var(--hds-action-press);
}
.ga-dropzone-heading-wrapper {
  display: flex;
  font: var(--hds-body-extrasmall-strong-font);
}
.ga-dropzone-heading-wrapper > hds-icon.ga-dropzone-heading-search-icon {
  padding-top: 1px;
  padding-left: var(--hds-spacing-1px);
}
.ga-dropzone-heading-wrapper:hover {
  --hds-icon-color: var(--hds-action-hover);
}
.ga-dropzone-hover {
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-menu);
  color: var(--font-color-emphasized);
  --icon-color: var(--font-color-emphasized);
  width: 100%;
  display: flex;
  text-align: center;
  flex-direction: row;
  gap: var(--hds-spacing-1);
  border-radius: var(--hds-border-radius);
}
.ga-dropzone-disabled {
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-menu);
  color: var(--font-color-emphasized);
  --icon-color: var(--font-color-emphasized);
  width: 100%;
  display: flex;
  text-align: center;
  flex-direction: row;
  gap: var(--hds-spacing-1);
  border-radius: var(--hds-border-radius);
  justify-content: center;
}
.ga-dropzone-disabled .ga-dropzone-heading {
  color: var(--hds-foreground-inactive);
  --hds-icon-color: var(--hds-action-disabled);
}
.ga-dropzone-disabled .ga-dropzone-heading-search-text {
  font: var(--hds-body-extrasmall-strong-font);
  color: var(--hds-action-disabled);
}
.ga-dropzone-disabled .ga-dropzone-heading-drag-drop {
  color: var(--hds-foreground-inactive);
}
.modifier-item-highlight {
  background-color: var(--hds-background-selected);
}
.ga-basic-template-list-container {
  overflow-x: hidden;
}
.ga-basic-template {
  cursor: pointer;
  user-select: none;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ga-basic-template-disabled {
  cursor: pointer;
  user-select: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: var(--input-disabled-opacity);
  pointer-events: none;
}
.ga-basic-template-thumbnail {
  width: var(--basic-template-thumbnail-width);
  height: var(--basic-template-thumbnail-height);
  border-radius: var(--hds-border-radius);
  border: 1px solid var(--modifier-preset-border);
  background-position: center;
  background-size: cover;
  box-sizing: border-box;
}
.ga-basic-template-thumbnail:hover {
  border-color: var(--hds-action-hover);
}
.ga-basic-template-thumbnail:active {
  border-color: var(--hds-action-press);
}
.ga-basic-template-thumbnail-selected {
  width: var(--basic-template-thumbnail-width);
  height: var(--basic-template-thumbnail-height);
  border-radius: var(--hds-border-radius);
  border: 1px solid var(--modifier-preset-border);
  background-position: center;
  background-size: cover;
  box-sizing: border-box;
}
.ga-basic-template-thumbnail-selected:hover {
  border-color: var(--hds-action-hover);
}
.ga-basic-template-thumbnail-selected:active {
  border-color: var(--hds-action-press);
}
.ga-basic-template-thumbnail-empty {
  width: var(--basic-template-thumbnail-width);
  height: var(--basic-template-thumbnail-height);
  border-radius: var(--hds-border-radius);
  border: 1px solid var(--modifier-preset-border);
  background-position: center;
  background-size: cover;
  box-sizing: border-box;
  font-family: var(--font-family);
  font-size: var(--text-size-tiny);
  line-height: var(--line-height-menu);
  color: var(--font-color);
  color: var(--font-color-disabled);
  --icon-color: var(--font-color-disabled);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bg-color-empty-thumbnail);
  border: 1px solid var(--hds-foreground-divider);
}
.ga-basic-template-thumbnail-empty:hover {
  border-color: var(--hds-action-hover);
}
.ga-basic-template-thumbnail-empty:active {
  border-color: var(--hds-action-press);
}
.ga-basic-template-thumbnail-empty-selected {
  width: var(--basic-template-thumbnail-width);
  height: var(--basic-template-thumbnail-height);
  border-radius: var(--hds-border-radius);
  border: 1px solid var(--modifier-preset-border);
  background-position: center;
  background-size: cover;
  box-sizing: border-box;
  font-family: var(--font-family);
  font-size: var(--text-size-tiny);
  line-height: var(--line-height-menu);
  color: var(--font-color);
  color: var(--font-color-disabled);
  --icon-color: var(--font-color-disabled);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bg-color-empty-thumbnail);
  border: 1px solid var(--hds-foreground-divider);
}
.ga-basic-template-thumbnail-empty-selected:hover {
  border-color: var(--hds-action-hover);
}
.ga-basic-template-thumbnail-empty-selected:active {
  border-color: var(--hds-action-press);
}
.loading-splash-screen {
  width: 100vw;
  height: 100vh;
  position: absolute;
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #6A7483;
}
.loading-splash-screen-popup {
  --base-padding: 4px;
  --half-panel-margin: 1px;
  --panel-margin: 2px;
  --panel-body-border-radius: 4px;
  --panel-header-border-radius: 5px;
  --font-family: "Fira Regular";
  --font-family-subdued: "Fira Light";
  --font-family-emphasized: "Fira Medium";
  --text-size-dashboard-title: 18px;
  --text-size-dashboard-section-title: 16px;
  --text-size-dashboard-description: 16px;
  --text-size-big: 16px;
  --text-size-big-button: 14px;
  --text-size-big-input: 14px;
  --text-size-menu: 12px;
  --text-size-dialog: 14px;
  --text-size: 12px;
  --text-size-tiny: 10px;
  --text-size-super-tiny: 8px;
  --text-size-drag-and-drop-title: 20px;
  --text-size-dialog-big: 18px;
  --line-height-tiny: 12px;
  --line-height-menu: 16px;
  --line-height: 20px;
  --header-line-height: 24px;
  --line-height-dashboard-title: 26px;
  --line-height-dashboard-section-title: 24px;
  --line-height-dashboard-description: 24px;
  --line-height-drag-and-drop-title: 24px;
  --line-height-dialog-header: 16px;
  --line-height-dialog-content: 20px;
  --divider-thickness: 1px;
  --divider-spacing: 0px;
  --divider-padding: calc(4 * var(--base-padding));
  --popup-border-radius: 4px;
  --popup-border-radius-large: 8px;
  --popup-item-height-large: 40px;
  --popup-menu-width: 200px;
  --popup-footer-height: 64px;
  --popup-header-height: 64px;
  --popup-padding-h: 24px;
  --popup-padding-v: 20px;
  --white-popup-max-height: 280px;
  --popup-description-height: 200px;
  --popup-item-selection-height: 2px;
  --popup-image-width: 400px;
  --popup-image-height: 175px;
  --border-size: 1px;
  --border-size-highlighted: 2px;
  --border-radius: 4px;
  --button-icon-spacing: 8px;
  --input-height: 22px;
  --input-width: 93px;
  --number-input-width: var(--input-width);
  --file-input-width: var(--input-width);
  --dash-input-width: 125px;
  --input-prefix-width: 6px;
  --input-prefix-left-padding: 5px;
  --input-border-radius: 2px;
  --input-border-size: 1px;
  --input-padding: 4px;
  --input-icon-padding: 6px;
  --input-disabled-opacity: 0.5;
  --boolean-input-height: 16px;
  --sliding-toggle-height: 20px;
  --sliding-toggle-width: 40px;
  --input-animation-duration: 300ms;
  --input-animation-duration-quick: 100ms;
  --item-border-radius: 2px;
  --reduced-item-height: 28px;
  --main-item-height: 35px;
  --large-main-item-height: 48px;
  --icon-button-group-height: 28px;
  --icon-box-size: 16px;
  --icon-text-inline-size: var(--text-size);
  --icon-header-size: var(--header-line-height);
  --icon-big-size: 40px;
  --icon-padding-size: calc(2 * var(--base-padding));
  --tooltip-text-size: 13px;
  --tooltip-line-height: 18px;
  --tooltip-nibble-size: 6px;
  --tooltip-nibble-indentation: 18px;
  --tooltip-width: 200px;
  --tooltip-width-wide: 320px;
  --selected-item-selection-bar-width: 3px;
  --selected-group-item-selection-bar-width: 4px;
  --inactive-item-opacity: 0.4;
  --graph-width: 2px;
  --zoomlevel-line-width: 1px;
  --collapsible-margin: 12px;
  --scrollbar-width: 8px;
  --scrollbar-expanded-grabber-width: 6px;
  --scrollbar-grabber-width: 4px;
  --map-overlay-margin: 12px;
  --map-overlay-item-size: 40px;
  --menubar-size: 48px;
  --menubar-title-width: 300px;
  --menubar-select-menu-width: 150px;
  --menubar-icon-size: 32px;
  --menubar-lang-dropdown-height: 400px;
  --menubar-notification-dot-size: 8px;
  --menubar-scheme-selection-item-label-width: 200px;
  --search-field-height: 25px;
  --panel-small-width: 230px;
  --panel-width: 300px;
  --panel-large-width: 360px;
  --panel-tab-height: 25px;
  --panel-empty-content-top-offset: 200px;
  --panel-header-button-size: 20px;
  --slider-width: 4px;
  --slider-length: 82px;
  --slider-grabber-size: 14px;
  --slider-tick-length: 2px;
  --slider-tick-width: 1px;
  --slider-tick-offset: 1px;
  --navigation-bar-size: 40px;
  --drag-item-divider-height: 1px;
  --drag-item-divider-end-size: 5px;
  --notification-container-height: 32px;
  --notification-toast-height: 56px;
  --notification-animation-curve: cubic-bezier(0.7, 0, 0.5, 1.5);
  --notification-animation-duration: 200ms;
  --color-picker-height: 150px;
  --color-picker-crosshair-size: 15px;
  --color-picker-input-width: 70px;
  --color-picker-slider-track-height: 8px;
  --color-picker-slider-handle-size: 12px;
  --color-picker-container-width: 320px;
  --color-picker-eyedrop-size: 24px;
  --icon-picker-container-width: 254px;
  --icon-picker-container-height: 318px;
  --icon-picker-icon-size: 24px;
  --swatch-height: 22px;
  --swatch-width: 50px;
  --ga-blend-mode-btn-width: 52px;
  --basic-template-thumbnail-height: 40px;
  --basic-template-thumbnail-width: 56px;
  --basic-template-thumbnail-border: 2px;
  --basic-template-thumbnail-border-offset: 1px;
  --window-header-height: 73px;
  --extra-small-window-width: 468px;
  --extra-small-window-height: 212px;
  --small-window-width: 460px;
  --small-window-height: 280px;
  --medium-window-width: 380px;
  --medium-window-height: 320px;
  --big-window-width: 640px;
  --big-window-height: 520px;
  --wide-big-window-width: 720px;
  --wide-big-window-height: 520px;
  --wide-extra-big-window-width: 950px;
  --wide-extra-big-window-height: 520px;
  --fluid-window-height: calc(100vh - 200px);
  --fluid-window-width: calc(100vw - 512px);
  --search-bar-height: 50px;
  --icon-window-drag-area-height: 310px;
  --medium-area-height: 100px;
  --big-area-height: 180px;
  --extra-big-area-height: 320px;
  --icon-window-area-height: 393px;
  --drop-target-outline-size: 1px;
  --drop-target-outline-offset: 1px;
  --image-picker-crosshair-size: 8px;
  --image-picker-border-size: 2px;
  --icon-window-side-bar-width: 207px;
  --icon-window-icon-entity-width: 77px;
  --icon-window-icon-entity-height: 88px;
  --icon-window-icon-entity-background-size: 48px;
  --icon-window-icon-entity-background-size-small: 24px;
  --icon-window-change-view-header: 32px;
  --icon-window-change-item-text-width: 100px;
  --icon-window-change-item-indentation: 53px;
  --icon-window-resource-view-header: 64px;
  --icon-window-name-pill-container-width: 240px;
  --icon-window-name-pill-border-radius: 16px;
  --icon-window-item-border-width: 2px;
  --icon-window-notification-height: 32px;
  --medium-button-height: 24px;
  --button-height: 32px;
  --large-button-height: 40px;
  --dashboard-item-width: 340px;
  --dashboard-item-height: 160px;
  --dashboard-thumbnail-height: 176px;
  --dashboard-input-height: 32px;
  --component-highlight-thickness: 2px;
  --modifier-group-item-indentation: 24px;
  --region-specific-bar-width: 2px;
  --region-specific-bar-height: 16px;
  --modifier-affected-specific-margin: -20px;
  --modifier-affected-specific-tooltip-width: 296px;
  --tooltip-content-max-width: 225px;
  --modifier-overlay-panel-header-height: 38px;
  --drag-item-divider: #126EF8;
  --drag-item-highlight: rgba(15, 22, 33, 0.1);
  --font-color-highlighted: #126EF8;
  --font-color-highlighted-emphasized: #d0e2fe;
  --font-color-emphasized: #0E1520;
  --font-color-active: #1C232E;
  --font-color: #272F3A;
  --font-color-subdued: #535C6B;
  --font-color-hint: var(--hds-gray-600);
  --font-color-disabled: #8890A0;
  --main-button-font-color: #272F3A;
  --main-button-font-color-emphasized: #0f1621;
  --font-color-menu: #535C6B;
  --font-color-tooltip: #1C232E;
  --font-color-group-item: #1C232E;
  --font-color-dialog: rgba(16, 23, 35, 0.95);
  --font-color-oncolor: #ffffff;
  --font-color-oncolor-hover: #ffffff;
  --font-color-oncolor-subdued: rgba(225, 234, 254, 0.58);
  --font-color-panel-notification: #E9ECF2;
  --font-color-inactive-item-text: #333B47;
  --font-color-item-text-hover: #0f1621;
  --font-color-hds-tertiary: rgba(34, 54, 89, 0.41);
  --font-color-hds-tertiary-hover: rgba(19, 35, 67, 0.5);
  --font-color-hds-tertiary-disabled: rgba(0, 26, 77, 0.2);
  --font-color-body: #3F4855;
  --font-color-primary: rgba(16, 23, 35, 0.95);
  --font-color-primary-disabled: rgba(0, 26, 77, 0.2);
  --font-color-secondary: rgba(7, 23, 49, 0.6);
  --font-color-secondary-disabled: rgba(0, 26, 77, 0.2);
  --header-icon-color: #535C6B;
  --active-icon-color: #1C232E;
  --active-icon-color-inverted: #ffffff;
  --inactive-icon-color: #6A7483;
  --disabled-item-group-text-color: #6A7483;
  --hint-icon-color: #6A7483;
  --disabled-icon-color: #8890A0;
  --action-icon-color: #535C6B;
  --disabled-action-icon-color: #8890A0;
  --error-icon-color: #CF001A;
  --warning-icon-color: #9E6400;
  --warning-icon-color-hover: #FAAA1E;
  --inactive-icon-border-color: #A4ACBA;
  --slider-input-border-color: #A4ACBA;
  --panel-header-button-bg: #f3f3f4;
  --panel-tab-bg-unselected: rgba(255, 255, 255, 0.8);
  --divider-color: rgba(255, 255, 255, 0.2);
  --divider-color-ondark: rgba(15, 22, 33, 0.2);
  --sub-item-box-border-color: #E9ECF2;
  --sub-item-box-bg-color: #CCD1DB;
  --bg-color-ui: #f3f3f4;
  --bg-color-panel-base: #ffffff;
  --bg-color-panel-content: #e7e8e9;
  --bg-color-modifier-panel-content: #ffffff;
  --bg-color-panel-section: #ffffff;
  --bg-color-content: rgba(255, 255, 255, 0.4);
  --bg-color-panel-dark: #ffffff;
  --bg-color-panel-header-dark: #ffffff;
  --bg-color-panel-group-item-selected: #ffffff;
  --border-color-panel-item: #ffffff;
  --bg-color-item: rgba(255, 255, 255, 0.9);
  --bg-color-item-selected: rgba(255, 255, 255, 0.95);
  --bg-color-item-highlighted: rgba(255, 255, 255, 0.6);
  --bg-color-item-header: #cfd0d3;
  --bg-color-button-group: #f3f3f4;
  --blur-popup-color: rgba(8, 23, 52, 0.6);
  --bg-color-popup: #ffffff;
  --bg-color-popup-item-hover: #ffffff;
  --bg-color-popup-divider: rgba(15, 55, 115, 0.1);
  --bg-window: #ffffff;
  --bg-hds-secondary: #ffffff;
  --bg-window-content: rgba(255, 255, 255, 0.4);
  --bg-window-header: #e7e8e9;
  --bg-global-adjustments: rgba(255, 255, 255, 0.9);
  --bg-color-inline-box: rgba(255, 255, 255, 0.4);
  --border-color: rgba(15, 22, 33, 0.1);
  --border-color-highlighted: #1C232E;
  --bg-selected-item: var(--hds-blue-onlight-400-020);
  --main-button-color: #126EF8;
  --main-button-color-hover: #0D5ED9;
  --action-text-button: #126EF8;
  --action-text-button-hover: #0D5ED9;
  --normal-button-bg-color: rgba(255, 255, 255, 0.8);
  --normal-button-bg-color-hover: rgba(255, 255, 255, 0.95);
  --button-primary-bg: linear-gradient(270deg, #65EBE2 0%, #6B9CFF 100%);
  --button-primary-bg-hover: linear-gradient(90deg, #3675F5 0%, #1BE0D7 100%);
  --button-primary-bg-active: linear-gradient(90deg, #1854CC 0%, #08CCC3 100%);
  --button-primary-bg-disabled: linear-gradient(270deg, rgba(125, 230, 225, 0.4) 0%, rgba(128, 170, 255, 0.4) 100%);
  --button-primary-color: rgba(16, 25, 37, 0.9);
  --button-primary-color-disabled: rgba(18, 41, 84, 0.3);
  --button-secondary-bg: rgba(0, 55, 141, 0.05);
  --button-secondary-bg-hover: rgba(15, 55, 115, 0.1);
  --button-secondary-bg-active: rgba(30, 43, 70, 0.6);
  --button-secondary-bg-disabled: rgba(0, 55, 141, 0.05);
  --button-secondary-color: rgba(16, 23, 35, 0.95);
  --button-secondary-color-disabled: rgba(18, 41, 84, 0.3);
  --button-danger-bg: #CF001A;
  --button-danger-bg-hover: #A5002F;
  --button-danger-bg-active: #8F0029;
  --button-danger-bg-disabled: rgba(207, 0, 26, 0.3);
  --button-danger-color: #ffffff;
  --button-warn-bg: #FFBD09;
  --button-warn-bg-hover: #FAAA1E;
  --button-warn-bg-active: #9E6400;
  --button-warn-bg-disabled: rgba(255, 190, 10, 0.3);
  --button-warn-color: rgba(15, 24, 36, 0.9);
  --button-warn-color-active: #FFFFFF;
  --button-oncolor-primary-bg: #ffffff;
  --button-oncolor-primary-color: rgba(16, 23, 35, 0.95);
  --button-oncolor-primary-bg-disabled: #ffffff;
  --button-oncolor-primary-color-disabled: rgba(18, 41, 84, 0.3);
  --button-oncolor-primary-bg-hover: #F2F5F9;
  --button-oncolor-primary-bg-active: #DADFE7;
  --button-oncolor-secondary-bg: rgba(34, 54, 89, 0.41);
  --button-oncolor-secondary-color: #ffffff;
  --button-oncolor-secondary-bg-disabled: rgba(34, 54, 89, 0.41);
  --button-oncolor-secondary-color-disabled: rgba(225, 234, 254, 0.58);
  --button-oncolor-secondary-bg-hover: rgba(19, 35, 67, 0.5);
  --button-oncolor-secondary-bg-active: rgba(7, 23, 49, 0.6);
  --background-object: rgba(0, 55, 141, 0.05);
  --background-object-hover: rgba(15, 55, 115, 0.1);
  --button-apply-modifiers-bg: rgba(255, 255, 255, 0.8);
  --button-apply-modifiers-bg-hover: rgba(255, 255, 255, 0.7);
  --button-apply-modifiers-bg-disabled: rgba(255, 255, 255, 0.9);
  --button-apply-modifiers-border: #4791FF;
  --button-apply-modifiers-border-hover: #5FB2FF;
  --button-apply-modifiers-border-disabled: rgba(18, 110, 248, 0.4);
  --colorblind-popup-divider: rgba(15, 54, 113, 0.1);
  --colorblind-popup-header-bg-color: #ffffff;
  --colorblind-popup-body-bg-color: #F2F5F9;
  --colorblind-popup-body-font-color: #535C6B;
  --colorblind-popup-button-color: rgba(15, 54, 113, 0.1);
  --input-border-color-focussed: #126EF8;
  --input-border-color-active: #0f1621;
  --input-border-color-hover: rgba(15, 22, 33, 0.3);
  --input-border-color-inactive: #6A7483;
  --input-border-color-error: #D35566;
  --input-bg-color-active: #ffffff;
  --input-bg-color-inactive: rgba(255, 255, 255, 0.3);
  --input-bg-color-inactive-lighter: rgba(255, 255, 255, 0.5);
  --hds-input-bg-color: #ffffff;
  --hds-input-border: rgba(34, 54, 89, 0.41);
  --hds-input-border-color-focussed: #0BC7C2;
  --hds-input-border-color-hover: rgba(19, 35, 67, 0.5);
  --hds-input-caret-color: rgba(16, 23, 35, 0.95);
  --hds-input-placeholder-color: rgba(34, 54, 89, 0.41);
  --hds-input-color: rgba(16, 23, 35, 0.95);
  --input-inner-shadow-color: rgba(0, 0, 0, 0.1);
  --input-caret-color: #126EF8;
  --input-slider-bg-color: rgba(15, 22, 33, 0.1);
  --input-slider-color: #126EF8;
  --color-picker-slider-grabber-color: #ffffff;
  --color-picker-bg-color: #3F4855;
  --color-picker-input-border-color: #8890A0;
  --color-picker-input-bg-color: #1C232E;
  --color-picker-input-color: #E9ECF2;
  --dropdown-bg-color-opened: #e7e8e9;
  --dropdown-item-color: #ffffff;
  --dropdown-item-color-selected: #e7e8e9;
  --dropdown-item-color-hover: #ffffff;
  --shadow-color: rgba(15, 22, 33, 0.4);
  --drop-shadow-gradient: linear-gradient(to bottom, rgba(233, 236, 242, 0.6) 0%, transparent 100%);
  --selected-item-marker-color: #126EF8;
  --selection-color: #126EF8;
  --selection-gradient: rgba(18, 110, 248, 0.1);
  --region-specific-color: var(--hds-purple-onlight-400);
  --region-specific-color-hover: var(--hds-purple-onlight-200);
  --region-specific-color-bg-hover: rgba(140, 107, 174, 0.8);
  --region-specific-color-bg-pressed: rgba(140, 107, 174, 0.9);
  --region-specific-icon-color: rgba(247, 250, 253, 0.2);
  --region-specific-bg-color: rgba(179, 156, 201, 0.3);
  --jp-region-specific-bg-color: #49475d;
  --notification-color: #D35566;
  --notification-error-color: #CF001A;
  --notification-warning-color: #FFBD09;
  --notification-overlay-bg-color: #3F4855;
  --notification-overlay-bg-hover-color: #535C6B;
  --notification-overlay2-bg-color: #1C232E;
  --component-highlight-color: #6A7483;
  --component-highlight-color-subdued: #A4ACBA;
  --graph-color: var(--hds-background-inverse);
  --graph-stop: var(--hds-background-inverse);
  --graph-bg: var(--hds-background-primary);
  --graph-border: var(--hds-foreground-tertiary-hover);
  --graph-border-hover: var(--hds-foreground-tertiary-press);
  --dash-color: #0f1621;
  --scrollbar-color: rgba(15, 22, 33, 0.2);
  --scrollbar-color-active: rgba(15, 22, 33, 0.2);
  --scrollbar-color-hover: rgba(15, 22, 33, 0.4);
  --slider-grabber-outline-color: rgba(218, 239, 250, 0.12);
  --slider-tick-color: rgba(15, 22, 33, 0.4);
  --chart-item-color-selected: #126EF8;
  --chart-item-color: rgba(15, 22, 33, 0.2);
  --chart-selection-bg: rgba(15, 22, 33, 0.05);
  --color-swatch-border: #272F3A;
  --inactive-color-swatch: #6A7483;
  --hover-inactive-color-swatch: #A4ACBA;
  --map-picker-color-border: rgba(15, 22, 33, 0.1);
  --map-picker-no-color-bg: rgba(255, 255, 255, 0.6);
  --code-string-color: #126EF8;
  --drop-target-color: #126EF8;
  --path-type-color-text: #000;
  --path-type-color-scheme: #000;
  --path-type-color-layer: rgba(255, 255, 255, 0.1);
  --path-type-color-condition: rgba(255, 255, 255, 0.2);
  --path-type-color-styleset: #2E468F;
  --path-type-color-style: #2C48A1;
  --path-type-color-attribute: rgba(15, 22, 33, 0.4);
  --path-type-color-definition: #52A3DB;
  --path-type-color-subcondition: #3A7BDB;
  --path-type-color-zoomlevel: #000;
  --path-type-color-height: #000;
  --image-picker-popup-color: #ffffff;
  --grid-placement-hover: rgba(15, 22, 33, 0.6);
  --grid-placement-selected: #126EF8;
  --grid-placement-selected-secondary: rgba(18, 110, 248, 0.8);
  --grid-placement-unselected: rgba(15, 22, 33, 0.1);
  --tag-pill-bg-color: #ffffff;
  --tag-pill-included: #00C78F;
  --tag-pill-excluded: #EC610E;
  --help-bg-color: #D468A0;
  --bg-dashboard-item: #ffffff;
  --tooltip-bg: var(--hds-background-inverse);
  --tooltip-text: var(--hds-inverse-primary);
  --menu-bar-bg: rgba(255, 255, 255, 0.95);
  --menu-bar-bg-hover: rgba(0, 55, 141, 0.05);
  --menu-bar-item-description-color: #A4ACBA;
  --notification-info-bg: #15BDB9;
  --notification-warning-bg: #92600C;
  --notification-confirmation-bg: #0A7651;
  --notification-error-bg: #840B2E;
  --backgrounds-background-object: rgba(218, 239, 250, 0.12);
  --modifier-header-bg: var(--hds-aqua-onlight-400);
  --modifier-preset-border: #e7ebf1;
  --modifier-dot--default-state: var(--hds-accent);
  --modifier-dot--hover-state: var(--hds-aqua-onlight-500);
  --modifier-overlay-panel-preset-bg: #EDFBFA;
  --modifier-overlay-panel-create-apply-modifiers-bg: #F6FDFD;
  --modifier-overlay-panel-create-modifiers-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.08);
  --modifier-overlay-panel-create-apply-modifiers-active-bg: rgba(95, 178, 255, 0.2);
  --modifier-overlay-panel-drag-drop-box-bg: rgba(64, 71, 82, 0.5);
  --modifier-overlay-active-bg: #e3e6eb99;
  --modifier-overlay-active-header-bg: #dddfe466;
  --modifier-overlay-active-border: #CED4DF;
  --modifier-overlay-header-bg: #00378f08;
  --scheme-selector-bar-bg: #dae6fa;
  --scheme-selector-shadow: 0px 0px 2px 0px var(--Dropshadow-overlay-dropshadow-layer-A-overlay, rgba(0, 25, 75, 0.12)), 0px 6px 6px 0px var(--Dropshadow-overlay-dropshadow-layer-B-overlay, rgba(0, 25, 75, 0.06)), 0px 0px 21px 0px var(--Dropshadow-overlay-dropshadow-layer-C-overlay, rgba(0, 25, 75, 0.05)), 0px 13px 13px 0px var(--Dropshadow-overlay-dropshadow-layer-D-overlay, rgba(0, 25, 75, 0.08));
  --quick-tour-highlight: var(--hds-blue-ondark-400);
  --file-entity-bg-hover: var(--hds-blue-onlight-400-010);
  --file-entity-bg-selected: var(--hds-blue-onlight-400-020);
  --thumbnail-border-color: var(--hds-foreground-divider);
  box-shadow: 0 1px 4px 0 var(--shadow-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 24px;
  gap: calc(4 * var(--base-padding));
  width: 256px;
  background: #ffffff;
  border-radius: var(--border-radius);
}
.loading-splash-screen-text {
  font-family: var(--font-family);
  font-size: var(--text-size-dialog);
  line-height: var(--line-height-dialog-content);
  color: var(--font-color-dialog);
  --icon-color: var(--font-color-dialog);
  text-align: center;
  flex: none;
  flex-grow: 0;
}
.loading-splash-screen-footer {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
}
.loading-splash-screen-image-animated {
  animation: spin-animation 1s infinite;
}
@keyframes spin-animation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(359deg);
  }
}
.draggable-list-item {
  margin: var(--drag-item-divider-height) 0px;
  padding: calc(2 * var(--base-padding));
  cursor: grab;
  cursor: -moz-grab;
  cursor: -webkit-grab;
}
.draggable-list-item:active {
  cursor: grabbing;
  cursor: -moz-grabbing;
  cursor: -webkit-grabbing;
}
.draggable-list-item-divider-hidden,
.draggable-list-item-divider-hover {
  height: var(--drag-item-divider-height);
  margin: calc(0px - var(--drag-item-divider-height)) 0;
  padding: 0;
  background-color: var(--drag-item-divider);
  display: flex;
  justify-content: space-between;
  align-items: center;
  opacity: 0;
  transition: opacity 300ms ease-in-out;
}
.draggable-list-item-container:hover .draggable-list-item-divider-hover,
.draggable-list-item-divider {
  height: var(--drag-item-divider-height);
  margin: calc(0px - var(--drag-item-divider-height)) 0;
  padding: 0;
  background-color: var(--drag-item-divider);
  display: flex;
  justify-content: space-between;
  align-items: center;
  opacity: 0;
  transition: opacity 300ms ease-in-out;
  opacity: 1;
}
.draggable-list-item-divider-end {
  height: var(--drag-item-divider-end-size);
  width: var(--drag-item-divider-end-size);
  border-radius: 50%;
  background-color: var(--drag-item-divider);
  margin: 0;
  padding: 0;
}
/***************************************************/
/***************************************************/
.toast-common-container {
  position: absolute;
  box-sizing: border-box;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  z-index: 10;
  box-shadow: 0 1px 4px 0 var(--shadow-color);
}
.toast-notification {
  font-family: var(--font-family);
  font-size: var(--text-size-dialog);
  line-height: var(--line-height-dialog-content);
  color: var(--font-color-dialog);
  --icon-color: var(--font-color-dialog);
  position: absolute;
  box-sizing: border-box;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  z-index: 10;
  box-shadow: 0 1px 4px 0 var(--shadow-color);
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  text-align: left;
  align-items: center;
  justify-content: space-between;
  background-color: #3A7BDB;
  padding: calc(3 * var(--base-padding)) calc(4 * var(--base-padding));
  height: var(--notification-toast-height);
  line-height: var(--tooltip-line-height);
  z-index: 9;
}
.panel-notification-container {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  width: 100%;
  height: calc(var(--panel-tab-height) * 2);
  box-sizing: border-box;
  flex-shrink: 0;
  padding: var(--hds-spacing-1) var(--hds-spacing-4);
  transition: all var(--notification-animation-duration) ease-in-out var(--notification-animation-duration);
  overflow: hidden;
}
.panel-notification-container-hidden {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  width: 100%;
  height: calc(var(--panel-tab-height) * 2);
  box-sizing: border-box;
  flex-shrink: 0;
  padding: var(--hds-spacing-1) var(--hds-spacing-4);
  transition: all var(--notification-animation-duration) ease-in-out var(--notification-animation-duration);
  overflow: hidden;
  display: none;
  height: 0;
  padding: 0;
  opacity: 0;
}
.panel-notification-container-hidden > .panel-notification {
  opacity: 0;
}
/***************************************************/
/***************************************************/
.error-notification {
  background-color: #CF001A;
}
.warning-notification {
  background-color: #FFBD09;
  color: rgba(16, 23, 35, 0.95);
  --icon-color: rgba(16, 23, 35, 0.95);
}
.confirmation-notification {
  background-color: #00A86F;
}
.info-notification {
  background: linear-gradient(270deg, #65EBE2 0%, #6B9CFF 100%);
  color: rgba(16, 25, 37, 0.9);
  --icon-color: rgba(16, 25, 37, 0.9);
}
/***************************************************/
/***************************************************/
.toast-section-left {
  display: flex;
  gap: var(--text-size);
  overflow: hidden;
}
.toast-message {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.toast-section-right {
  display: flex;
  justify-content: flex-end;
  cursor: pointer;
}
.panel-notification {
  font-family: var(--font-family);
  font-size: var(--text-size);
  color: var(--font-color-group-item);
  --icon-color: var(--font-color-group-item);
  line-height: var(--line-height);
  color: var(--font-color-inactive-item-text);
  --icon-color: var(--font-color-inactive-item-text);
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: var(--notification-container-height);
  border-radius: var(--border-radius);
  box-shadow: 0 1px 4px 0 var(--shadow-color);
  padding: 0 calc(2 * var(--base-padding));
  transition: all var(--notification-animation-duration) ease-in-out;
}
.schematic-cta-wrapper {
  display: flex;
  justify-content: space-evenly;
  padding: var(--hds-spacing-2) var(--hds-spacing-0);
}
.hds-toast-close-export-button {
  flex-grow: 1;
  margin-right: var(--hds-spacing-4);
  font: var(--hds-body-extrasmall-strong-font);
}
.hds-toast-open-schematic-view-export-button {
  flex-grow: 1;
  font: var(--hds-body-extrasmall-strong-font);
}
.hds-toast-notification-action {
  cursor: pointer;
  user-select: none;
  --icon-color: var(--hds-action);
  color: var(--hds-action);
  text-decoration: none;
}
.hds-toast-notification-action:hover {
  --icon-color: var(--hds-action-hover);
  color: var(--hds-action-hover);
}
.hds-toast-notification-action:active {
  --icon-color: var(--hds-action-press);
  color: var(--hds-action-press);
}
.hds-toast-notification-action:has(.base-icon) {
  display: flex;
  align-items: center;
  gap: var(--hds-spacing-1);
}
.hds-toast-notification-body {
  font: var(--hds-body-extrasmall-font);
}
.hds-toast-notification-body .hds-toast-notification-action {
  cursor: pointer;
  user-select: none;
  color: var(--hds-action);
  --icon-color: var(--hds-action);
}
.hds-toast-notification-body .hds-toast-notification-action:hover {
  color: var(--hds-action-hover);
  --icon-color: var(--hds-action-hover);
}
.hds-toast-notification-body .hds-toast-notification-action:active {
  color: var(--hds-action-press);
  --icon-color: var(--hds-action-press);
}
.hds-toast-notification-body .hds-toast-notification-emphasized-text {
  font: var(--hds-body-extrasmall-strong-font);
}
.hds-banner-positioning .hds-toast-notification-action {
  cursor: pointer;
  user-select: none;
  font: var(--hds-body-small-link-font-style);
  --icon-color: var(--hds-action);
  color: var(--hds-onlightcolor-primary);
  text-decoration: underline;
  padding-left: var(--hds-spacing-4);
}
.hds-banner-positioning .hds-toast-notification-action:hover {
  --icon-color: var(--hds-action-hover);
  color: var(--hds-onlightcolor-primary);
}
.hds-banner-positioning .hds-toast-notification-action:active {
  --icon-color: var(--hds-action-press);
  color: var(--hds-onlightcolor-primary);
}
.hds-banner-positioning .hds-toast-notification-action:has(.base-icon) {
  display: flex;
  align-items: center;
  gap: var(--hds-spacing-1);
}
.hds-toast-notification-suppress-choice {
  display: flex;
  align-items: center;
  margin-top: var(--hds-spacing-2);
  gap: var(--hds-spacing-2);
}
.hds-banner-positioning {
  z-index: 3;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
}
.collapsible-notification-container {
  display: flex;
  flex-direction: column;
  filter: var(--hds-object);
}
.collapsible-notification-heading-error {
  cursor: pointer;
  user-select: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: var(--hds-border-radius);
  padding: var(--hds-spacing-2);
  background-color: var(--hds-negative);
}
.collapsible-notification-heading-error.collapsible-notification-heading-expanded {
  border-bottom-left-radius: var(--hds-spacing-0);
  border-bottom-right-radius: var(--hds-spacing-0);
}
.collapsible-notification-heading-warning {
  cursor: pointer;
  user-select: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: var(--hds-border-radius);
  padding: var(--hds-spacing-2);
  background-color: var(--hds-warning);
}
.collapsible-notification-heading-warning.collapsible-notification-heading-expanded {
  border-bottom-left-radius: var(--hds-spacing-0);
  border-bottom-right-radius: var(--hds-spacing-0);
}
.collapsible-notification-heading-confirmation {
  cursor: pointer;
  user-select: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: var(--hds-border-radius);
  padding: var(--hds-spacing-2);
  background-color: var(--hds-positive);
}
.collapsible-notification-heading-confirmation.collapsible-notification-heading-expanded {
  border-bottom-left-radius: var(--hds-spacing-0);
  border-bottom-right-radius: var(--hds-spacing-0);
}
.collapsible-notification-heading-info {
  cursor: pointer;
  user-select: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: var(--hds-border-radius);
  padding: var(--hds-spacing-2);
  background-color: var(--hds-gradient);
}
.collapsible-notification-heading-info.collapsible-notification-heading-expanded {
  border-bottom-left-radius: var(--hds-spacing-0);
  border-bottom-right-radius: var(--hds-spacing-0);
}
.collapsible-notification-heading-default {
  cursor: pointer;
  user-select: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: var(--hds-border-radius);
  padding: var(--hds-spacing-2);
  background-color: var(--hds-background-inverse);
}
.collapsible-notification-heading-default.collapsible-notification-heading-expanded {
  border-bottom-left-radius: var(--hds-spacing-0);
  border-bottom-right-radius: var(--hds-spacing-0);
}
.collapsible-notification-heading-icon-title {
  display: flex;
  align-items: center;
  gap: var(--hds-spacing-2);
  background-color: inherit;
  max-width: 85%;
}
.collapsible-notification-heading-title-collapsed {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.collapsible-notification-icon {
  display: flex;
  --hds-icon-color: var(--hds-ondarkcolor-primary);
}
.collapsible-notification-heading-icon-title {
  color: var(--hds-ondarkcolor-primary);
}
.collapsible-notification-content {
  padding: var(--hds-spacing-4);
  background: var(--hds-background-primary);
  color: var(--hds-foreground-secondary);
  border-bottom-left-radius: var(--hds-border-radius);
  border-bottom-right-radius: var(--hds-border-radius);
}
#app {
  overflow: hidden;
  user-drag: none;
  -webkit-user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}
.main-layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: var(--hds-background-primary);
}
.main-content {
  width: 100vw;
  height: 1px;
  flex-grow: 1;
  display: flex;
  flex-direction: row;
  align-items: stretch;
}
.main-content:not(:first-child) .map-overlay-container {
  max-height: calc(100vh - 81px);
}
.main-content.with-quick-tour .panel-container,
.main-content.with-quick-tour .map-overlay {
  z-index: unset;
}
.frontend-container {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  background-color: var(--bg-color-ui);
}
.panel-container {
  display: flex;
}
.panel-container .layer-panel-container,
.panel-container .attributes-panel-container {
  border-right: 1px solid var(--hds-foreground-divider);
}
.panel-border {
  width: var(--panel-margin);
  height: 100%;
}
.blocking-window-screen-overlay {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: rgba(15, 22, 33, 0.3);
  transition: 300ms ease-in-out;
  cursor: pointer;
  z-index: 12;
  display: flex;
  justify-content: center;
  align-items: center;
}
.blocking-window-screen-overlay-no-pointer {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: rgba(15, 22, 33, 0.3);
  transition: 300ms ease-in-out;
  cursor: pointer;
  z-index: 12;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: default;
}
.blocking-window-screen-overlay-hidden {
  opacity: 0;
  pointer-events: none;
}
#modal-window {
  --hds-modal-tablet-grid-column: 1 / -1;
  --hds-modal-desktop-small-grid-column: 2 / -2;
  --hds-modal-desktop-medium-grid-column: 3 / -3;
  --hds-modal-desktop-large-grid-column: 4 / -4;
}
#modal-window-small {
  --hds-modal-tablet-grid-column: 2 / -2;
  --hds-modal-desktop-small-grid-column: 4 / -4;
  --hds-modal-desktop-medium-grid-column: 5 / -5;
  --hds-modal-desktop-large-grid-column: 5 / -5;
}
#modal-window-extrasmall {
  --hds-modal-tablet-grid-column: 2 / -2;
  --hds-modal-desktop-small-grid-column: 4 / -4;
  --hds-modal-desktop-medium-grid-column: 5 / -5;
  --hds-modal-desktop-large-grid-column: 6 / -6;
}
#modal-window-medium-small {
  --hds-modal-tablet-grid-column: 3 / -3;
  --hds-modal-desktop-small-grid-column: 5 / -4;
  --hds-modal-desktop-medium-grid-column: 5 / -5;
  --hds-modal-desktop-large-grid-column: 5 / -5;
}
.pop-up-window {
  cursor: default;
  box-shadow: 0 1px 4px 0 var(--shadow-color);
  --divider-color-override: var(--bg-color-popup-divider);
  background-color: var(--popup-color, var(--bg-color-popup));
  border: var(--border-size) solid var(--border-color);
  border-radius: var(--popup-border-radius);
  z-index: 9;
  font-family: var(--font-family);
  font-size: var(--text-size);
  color: var(--font-color-group-item);
  --icon-color: var(--font-color-group-item);
  line-height: var(--line-height);
  color: var(--font-color-inactive-item-text);
  --icon-color: var(--font-color-inactive-item-text);
  box-sizing: border-box;
  position: absolute;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--bg-window);
}
.window-center-fixed {
  width: var(--width);
  max-width: calc(100vw - calc(4 * var(--base-padding)));
  --half-width: calc(var(--width) / 2);
  left: calc(50% - var(--half-width));
  height: var(--height);
  --half-height: calc(var(--height) / 2);
  top: calc(50% - var(--half-height));
}
.window-center-expanding {
  width: var(--width);
  max-width: calc(100vw - calc(4 * var(--base-padding)));
  --half-width: calc(var(--width) / 2);
  left: calc(50% - var(--half-width));
  top: 50%;
  transform: translateY(-50%);
}
.pop-up-window-extra-small {
  --width: var(--extra-small-window-width);
  --height: var(--extra-small-window-height);
}
.pop-up-window-small {
  --width: var(--small-window-width);
  --height: var(--small-window-height);
}
.pop-up-window-medium-small {
  --width: var(--small-window-width);
  --height: var(--small-window-height);
}
.pop-up-window-medium {
  --width: var(--medium-window-width);
  --height: var(--medium-window-height);
}
.pop-up-window-big {
  --width: var(--big-window-width);
  --height: var(--big-window-height);
}
.pop-up-window-wide-big {
  --width: var(--wide-big-window-width);
  --height: var(--wide-big-window-height);
}
.pop-up-window-extra-wide-big {
  --width: var(--wide-extra-big-window-width);
  --height: var(--wide-extra-big-window-height);
}
.pop-up-window-fluid {
  --width: var(--fluid-window-width);
  --height: var(--fluid-window-height);
}
.window-content {
  padding: var(--base-padding) calc(4 * var(--base-padding));
  background-color: var(--normal-button-bg-color-hover);
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-menu);
  color: var(--font-color-emphasized);
  --icon-color: var(--font-color-emphasized);
  background-color: var(--bg-window-content);
  flex-grow: 1;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.window-content-box-only {
  padding: var(--base-padding) calc(4 * var(--base-padding));
  background-color: var(--normal-button-bg-color-hover);
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-menu);
  color: var(--font-color-emphasized);
  --icon-color: var(--font-color-emphasized);
  background-color: var(--bg-window-content);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  height: unset;
  flex-grow: 1;
}
.window-content-no-padding {
  padding: var(--base-padding) calc(4 * var(--base-padding));
  background-color: var(--normal-button-bg-color-hover);
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-menu);
  color: var(--font-color-emphasized);
  --icon-color: var(--font-color-emphasized);
  background-color: var(--bg-window-content);
  flex-grow: 1;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}
.window-close-button-icon {
  background-color: var(--icon-color, var(--font-color));
  flex-shrink: 0;
  width: var(--icon-box-size);
  height: var(--icon-box-size);
}
.window-close-button-icon:active {
  --icon-color: var(--disabled-icon-color);
}
.window-close-button-circle-cross-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--panel-header-button-size);
  height: var(--panel-header-button-size);
  border-radius: 50%;
  background-color: var(--panel-header-button-bg);
}
.window-close-button {
  cursor: pointer;
}
.window-anchor-link {
  font-family: var(--font-family-emphasized);
  color: var(--font-color-emphasized);
  --icon-color: var(--font-color-emphasized);
  text-decoration: underline;
}
.window-title-common {
  box-sizing: border-box;
  display: flex;
  flex-shrink: 0;
  justify-content: space-between;
  z-index: 13;
}
.window-title {
  font-family: var(--font-family-emphasized);
  color: var(--font-color-emphasized);
  --icon-color: var(--font-color-emphasized);
  line-height: var(--line-height);
  font-size: var(--text-size-big);
  box-sizing: border-box;
  display: flex;
  flex-shrink: 0;
  justify-content: space-between;
  z-index: 13;
  flex-direction: row;
  height: var(--window-header-height);
  background-color: var(--bg-window-header);
  padding: calc(2 * var(--base-padding));
}
.window-title-left {
  font-family: var(--font-family-emphasized);
  font-size: var(--text-size-dialog);
  line-height: var(--line-height-dialog-header);
  color: var(--font-color-dialog);
  --icon-color: var(--font-color-dialog);
  display: flex;
  gap: var(--text-size);
  color: rgba(16, 23, 35, 0.95);
  --icon-color: #8F0029;
}
.window-title-right {
  --icon-color: #6A7483;
}
.window-title-close-wrapper {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0 16px;
}
.window-title-content-wrapper {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;
}
.window-title-shadow {
  box-shadow: 0 4px 8px var(--shadow-color);
}
.window-footer {
  font-family: var(--font-family-emphasized);
  color: var(--font-color-emphasized);
  --icon-color: var(--font-color-emphasized);
  line-height: var(--line-height);
  font-size: var(--text-size-big);
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: var(--window-header-height);
  background-color: var(--bg-window-header);
  z-index: 13;
  padding: calc(4 * var(--base-padding));
}
.window-text {
  padding: var(--base-padding) calc(4 * var(--base-padding));
  background-color: var(--normal-button-bg-color-hover);
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-menu);
  color: var(--font-color-emphasized);
  --icon-color: var(--font-color-emphasized);
}
.window-actions {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  margin-right: var(--popup-padding-h);
}
.window-actions > *:not(:first-child) {
  margin-left: calc(2 * var(--base-padding));
}
.window-input-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: calc(2 * var(--base-padding));
}
.window-input-item > input[type="text"] {
  flex-grow: 1;
}
.window-input-label {
  width: 20%;
  margin-right: calc(2 * var(--base-padding));
}
.window-button-aqua {
  display: flex;
  align-items: center;
  justify-content: center;
  --line-height: var(--header-line-height);
  cursor: pointer;
  user-select: none;
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-menu);
  color: var(--font-color);
  --icon-color: var(--font-color);
  color: var(--main-button-font-color);
  background-color: var(--main-button-color);
  --divider-color-override: var(--main-button-color);
  border: none;
  border-radius: var(--input-border-radius);
  text-align: center;
  padding: 0px calc(2 * var(--base-padding));
  padding: 0 calc(4 * var(--base-padding));
}
.window-button-aqua:hover {
  color: var(--main-button-font-color-emphasized);
  --divider-color-override: var(--main-button-color-hover);
  background-color: var(--main-button-color-hover);
}
.window-button-disabled {
  pointer-events: none;
  opacity: 0.25;
}
.window-button {
  display: flex;
  align-items: center;
  justify-content: center;
  --line-height: var(--header-line-height);
  cursor: pointer;
  user-select: none;
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-menu);
  color: var(--font-color);
  --icon-color: var(--font-color);
  background-color: transparent;
  border: var(--border-size) solid var(--border-color);
  border-radius: var(--input-border-radius);
  border-color: var(--main-button-color);
  box-sizing: border-box;
  --divider-color-override: var(--main-button-color);
  text-align: center;
  padding: 0px calc(2 * var(--base-padding));
  padding: 0 calc(4 * var(--base-padding));
}
.window-button:hover {
  color: var(--font-color-emphasized);
  --divider-color-override: var(--main-button-color-hover);
  border: var(--border-size) solid var(--main-button-color-hover);
}
.window-background {
  position: absolute;
  top: -6px;
  left: -6px;
  right: -6px;
  bottom: -6px;
  z-index: 9;
  background-color: var(--blur-popup-color);
  backdrop-filter: blur(3px);
  opacity: 0.8;
}
.window-background-mask {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 12;
  background-color: var(--blur-popup-color);
  opacity: 0.8;
}
.window-background-opaque {
  position: absolute;
  top: -6px;
  left: -6px;
  right: -6px;
  bottom: -6px;
  z-index: 9;
  background-color: var(--bg-color-panel-base);
}
.add-data-window {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
}
.add-data-window-input-container {
  box-sizing: border-box;
  padding: calc(2 * var(--base-padding));
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
}
.add-data-window-input {
  background-color: transparent;
  border-radius: var(--input-border-radius);
  border: var(--input-border-size) solid var(--input-border-color-active);
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-tiny);
  color: var(--font-color-active);
  caret-color: var(--input-caret-color);
  height: var(--input-height);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 100%;
  height: unset;
  padding: calc(2 * var(--base-padding));
}
.add-data-window-input input[type="number"],
.add-data-window-input input[type="text"] {
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-tiny);
  color: var(--font-color-active);
  caret-color: var(--input-caret-color);
}
.add-data-window-input:hover {
  border-color: var(--input-border-color-hover);
}
.add-data-window-input:focus-within {
  border: var(--input-border-size) solid var(--input-border-color-focussed);
  background-color: transparent;
  color: var(--font-color-emphasized);
}
.add-data-window-input input[type="number"]:focus,
.add-data-window-input input[type="text"]:focus {
  border: none;
}
.add-data-window-labeled-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: calc(2 * var(--base-padding));
}
.add-data-window-labeled-item > input[type="text"] {
  flex-grow: 1;
}
.add-data-window-labeled-item-file-list {
  justify-content: space-between;
  margin-bottom: calc(2 * var(--base-padding));
  display: flex;
}
.add-data-window-labeled-item-file-list > input[type="text"] {
  flex-grow: 1;
}
.add-data-window-upload-file-container {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
}
.add-data-window-drag-and-drop-area {
  border: 1px dashed var(--input-border-color-inactive);
  border-radius: var(--input-border-radius);
  justify-content: center;
  font-family: var(--font-family);
  font-size: var(--text-size-tiny);
  line-height: var(--line-height-menu);
  color: var(--font-color);
  background-color: transparent;
  height: var(--medium-area-height);
  flex-grow: 1;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: border var(--input-animation-duration) ease-in-out;
}
.add-data-window-drag-and-drop-area-highlighted {
  border: 1px dashed var(--input-border-color-inactive);
  justify-content: center;
  font-family: var(--font-family);
  font-size: var(--text-size-tiny);
  line-height: var(--line-height-menu);
  color: var(--font-color);
  background-color: transparent;
  height: var(--medium-area-height);
  flex-grow: 1;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: border var(--input-animation-duration) ease-in-out;
  border: 1px dashed var(--input-border-color-focussed);
  border-radius: var(--input-border-radius);
}
.add-data-window-drag-and-drop-label {
  display: flex;
}
.add-data-window-file-selector-container {
  display: flex;
}
.add-data-window-file-selector {
  cursor: pointer;
  user-select: none;
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-menu);
  color: var(--font-color);
  --icon-color: var(--font-color);
  padding: var(--base-padding) calc(2 * var(--base-padding));
  flex-grow: 0;
  width: auto;
}
.add-data-window-file-selector:hover {
  font-family: var(--font-family-emphasized);
  font-size: var(--text-size);
  line-height: var(--line-height-menu);
  color: var(--font-color-emphasized);
  --icon-color: var(--active-icon-color);
}
.add-data-window-button-container {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  flex-shrink: 0;
  margin-bottom: calc(2 * var(--base-padding));
}
.add-data-window-button-container > *:not(:first-child) {
  margin-left: calc(2 * var(--base-padding));
}
.add-data-window-file-list-container {
  width: 100%;
  height: var(--big-area-height);
  border-radius: var(--input-border-radius);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.add-data-window-file-list {
  width: 100%;
  height: 100%;
}
.add-data-window-space-container {
  display: flex;
  flex-grow: 1;
  justify-content: flex-end;
}
.add-data-window-space-container > input[type="text"] {
  margin-left: calc(2 * var(--base-padding));
}
.add-data-window-file-item {
  display: flex;
  align-items: flex-start;
}
.add-data-window-file-label-container {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.add-data-window-file-label {
  padding: var(--base-padding);
}
.add-data-window-file-label-secondary {
  padding: var(--base-padding);
  font-family: var(--font-family);
  font-size: var(--text-size-tiny);
  color: var(--font-color-hint);
  --icon-color: var(--font-color-hint);
  fill: var(--font-color-hint);
  line-height: var(--line-height-tiny);
  padding-top: 0;
}
.add-data-window-icon-container {
  padding: var(--input-icon-padding);
}
.add-data-window-icon {
  background-color: var(--icon-color, var(--font-color));
  flex-shrink: 0;
  width: var(--icon-box-size);
  height: var(--icon-box-size);
  --icon-color: var(--disabled-icon-color);
  cursor: pointer;
  user-select: none;
}
.add-data-window-delete-icon {
  background-color: var(--icon-color, var(--font-color));
  flex-shrink: 0;
  width: var(--icon-box-size);
  height: var(--icon-box-size);
  --icon-color: var(--disabled-icon-color);
  cursor: pointer;
  user-select: none;
}
.add-data-window-delete-icon:hover {
  --icon-color: var(--active-icon-color);
  --icon-color-hover: var(--active-icon-color);
  margin: 0;
}
.legal-window-container {
  font-family: var(--font-family);
  font-size: var(--text-size-big);
  line-height: var(--header-line-height);
  color: var(--font-color);
  --icon-color: var(--font-color);
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.legal-window-container ul {
  list-style-type: none;
}
.legal-window-container ul li {
  padding-bottom: var(--base-padding);
}
.legal-window-container a {
  font-family: var(--font-family-emphasized);
  color: var(--font-color-emphasized);
  --icon-color: var(--font-color-emphasized);
  text-decoration: underline;
}
.legal-window-version {
  color: var(--hds-foreground-secondary);
}
.auth-window {
  justify-content: space-between;
  overflow: hidden;
  box-sizing: border-box;
  height: unset;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.auth-window-inputs {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  flex-grow: 1;
}
.auth-window-label {
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height);
  color: var(--font-color-hint);
  text-transform: uppercase;
  padding: var(--base-padding) 0;
}
.auth-window-input {
  background-color: transparent;
  border-radius: var(--input-border-radius);
  border: var(--input-border-size) solid var(--input-border-color-active);
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-tiny);
  color: var(--font-color-active);
  caret-color: var(--input-caret-color);
  height: var(--input-height);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 100%;
  height: unset;
  padding: calc(2 * var(--base-padding));
}
.auth-window-input input[type="number"],
.auth-window-input input[type="text"] {
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-tiny);
  color: var(--font-color-active);
  caret-color: var(--input-caret-color);
}
.auth-window-input:hover {
  border-color: var(--input-border-color-hover);
}
.auth-window-input:focus-within {
  border: var(--input-border-size) solid var(--input-border-color-focussed);
  background-color: transparent;
  color: var(--font-color-emphasized);
}
.auth-window-input input[type="number"]:focus,
.auth-window-input input[type="text"]:focus {
  border: none;
}
.auth-window-input-error {
  background-color: transparent;
  border-radius: var(--input-border-radius);
  border: var(--input-border-size) solid var(--input-border-color-active);
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-tiny);
  color: var(--font-color-active);
  caret-color: var(--input-caret-color);
  height: var(--input-height);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 100%;
  height: unset;
  padding: calc(2 * var(--base-padding));
  border-color: #CF001A;
}
.auth-window-input-error input[type="number"],
.auth-window-input-error input[type="text"] {
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-tiny);
  color: var(--font-color-active);
  caret-color: var(--input-caret-color);
}
.auth-window-input-error:hover {
  border-color: var(--input-border-color-hover);
}
.auth-window-input-error:focus-within {
  border: var(--input-border-size) solid var(--input-border-color-focussed);
  background-color: transparent;
  color: var(--font-color-emphasized);
}
.auth-window-input-error input[type="number"]:focus,
.auth-window-input-error input[type="text"]:focus {
  border: none;
}
.auth-window-input-space {
  height: calc(2 * var(--base-padding));
  box-sizing: border-box;
}
.auth-window-button-container {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  flex-shrink: 0;
  margin-bottom: calc(2 * var(--base-padding));
}
.auth-window-button-container > *:not(:first-child) {
  margin-left: calc(2 * var(--base-padding));
}
.auth-window-bottom-text-container {
  width: 100%;
  display: flex;
  flex-shrink: 0;
  margin-bottom: calc(2 * var(--base-padding));
  justify-content: flex-end;
  padding: calc(2 * var(--base-padding)) 0;
}
.auth-window-bottom-text-container > *:not(:first-child) {
  margin-left: calc(2 * var(--base-padding));
}
.auth-window-bottom-text-container a {
  font-family: var(--font-family-emphasized);
  color: var(--font-color-emphasized);
  --icon-color: var(--font-color-emphasized);
  text-decoration: underline;
  flex-shrink: 0;
}
.auth-window-bottom-text-hint {
  flex-grow: 1;
  box-sizing: border-box;
  margin-right: calc(2 * var(--base-padding));
  padding: 0 var(--base-padding);
  color: #D35566;
  overflow: hidden;
  height: var(--line-height);
}
.resource-window {
  box-shadow: var(--hds-dropshadow-layer-3-drawer-offset-x, 0px) var(--hds-dropshadow-layer-3-drawer-offset-y, 0px) var(--hds-dropshadow-layer-3-drawer-radius, 2px) var(--hds-dropshadow-layer-3-drawer-spread, 0px) var(--hds-dropshadow-layer-3-drawer, rgba(0, 0, 0, 0.3)), var(--hds-dropshadow-layer-2-drawer-offset-x, 0px) var(--hds-dropshadow-layer-2-drawer-offset-y, -2.5px) var(--hds-dropshadow-layer-2-drawer-radius, 2.5px) var(--hds-dropshadow-layer-2-drawer-spread, 0px) var(--hds-dropshadow-layer-2-drawer, rgba(0, 0, 0, 0.08)), var(--hds-dropshadow-layer-1-drawer-offset-x, 0px) var(--hds-dropshadow-layer-1-drawer-offset-y, 0px) var(--hds-dropshadow-layer-1-drawer-radius, 8px) var(--hds-dropshadow-layer-1-drawer-spread, 0px) var(--hds-dropshadow-layer-1-drawer, rgba(0, 0, 0, 0.15)), var(--hds-dropshadow-layer-0-drawer-offset-x, 0px) var(--hds-dropshadow-layer-0-drawer-offset-y, -5px) var(--hds-dropshadow-layer-0-drawer-radius, 5px) var(--hds-dropshadow-layer-0-drawer-spread, 0px) var(--hds-dropshadow-layer-0-drawer, rgba(0, 0, 0, 0.15));
  border-radius: var(--popup-border-radius-large);
}
.resources-window-container {
  display: flex;
  flex-direction: row;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.resources-window-header {
  width: 100%;
  background-color: var(--hds-background-primary);
  display: flex;
  align-items: center;
  gap: var(--hds-spacing-6);
  box-sizing: border-box;
  padding-right: var(--hds-spacing-8);
  border-bottom: 1px solid var(--hds-foreground-divider);
}
.resources-window-header-left-box {
  margin: var(--hds-spacing-5) var(--hds-spacing-6);
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: var(--hds-spacing-1);
}
.resources-window-link {
  font-family: var(--font-family);
  font-size: var(--text-size-dialog);
  font-style: normal;
  font-weight: 400;
  line-height: var(--line-height);
  color: var(--font-color-secondary);
  --icon-color: var(--font-color-secondary);
  font-weight: 500;
  font-family: var(--font-family-emphasized);
  color: var(--hds-action);
  --icon-color: var(--hds-action);
}
.resources-window-link-link {
  text-decoration: none;
}
.resources-window-divider {
  width: 1px;
  height: var(--hds-body-line-height);
  background-color: var(--hds-foreground-divider);
}
.resources-window-view-buttons {
  display: flex;
  gap: var(--hds-spacing-2);
}
.resources-window-notification {
  --hds-border-radius: 0;
}
.resources-window-license-notification {
  --hds-border-radius: 0;
  --hds-onlightcolor-primary: var(--hds-foreground-primary);
}
.resources-window-license-notification-button {
  margin-top: var(--hds-spacing-1);
  margin-bottom: var(--hds-spacing-1);
  --hds-button-font: var(--hds-body-extrasmall-strong-font);
}
.resources-window-footer-button-container {
  display: flex;
  justify-content: flex-end;
  padding: var(--hds-spacing-4) var(--hds-spacing-6);
  border-top: 1px solid var(--hds-foreground-divider);
}
.resources-window-footer-button-container > *:not(:first-child) {
  margin-left: calc(2 * var(--base-padding));
}
.resources-window-footer-hint {
  font-family: var(--font-family);
  font-size: var(--text-size);
  font-style: normal;
  font-weight: 400;
  line-height: var(--line-height-menu);
  letter-spacing: -0.024px;
  color: var(--font-color-subdued);
  color: var(--font-color-hds-tertiary);
  --icon-color: var(--font-color-hds-tertiary);
  font-style: italic;
  display: flex;
  align-items: center;
  flex-grow: 1;
}
.resources-window-left-panel {
  display: flex;
  flex-direction: column;
  width: 245px;
  background-color: var(--hds-background-primary);
  padding: var(--hds-spacing-2) 0 var(--hds-spacing-2) var(--hds-spacing-2);
  gap: var(--hds-spacing-2);
  flex-shrink: 0;
  --divider-color-override: var(--hds-foreground-divider);
}
.resources-directory-container {
  display: flex;
  flex-direction: column;
}
.resources-directory-entry-top-level {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: var(--hds-spacing-2);
  padding: 0 var(--hds-spacing-4);
  border-radius: var(--hds-border-radius);
  color: var(--hds-foreground-secondary);
  --icon-color: var(--hds-foreground-secondary);
  --hds-icon-color: var(--hds-foreground-secondary);
  height: 2rem;
}
.resources-directory-entry {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: var(--hds-spacing-2);
  padding: 0 var(--hds-spacing-4);
  border-radius: var(--hds-border-radius);
  color: var(--hds-foreground-secondary);
  --icon-color: var(--hds-foreground-secondary);
  --hds-icon-color: var(--hds-foreground-secondary);
  height: 2rem;
  margin-left: calc(var(--level) * var(--hds-spacing-6));
}
.resources-directory-entry-selected {
  background-color: var(--bg-selected-item);
  color: var(--hds-foreground-primary);
  --icon-color: var(--hds-foreground-primary);
  --hds-icon-color: var(--hds-foreground-primary);
}
.resources-directory-entry-expanded {
  color: var(--hds-foreground-primary);
  --icon-color: var(--hds-foreground-primary);
  --hds-icon-color: var(--hds-foreground-primary);
}
.resources-directory-name {
  font-family: var(--font-family);
  font-size: var(--text-size);
  font-style: normal;
  font-weight: 400;
  line-height: var(--text-size-dialog-big);
  letter-spacing: -0.048px;
  color: var(--font-color-secondary);
  --icon-color: var(--font-color-secondary);
  flex-grow: 1;
}
.resources-directory-entry-expanded .resources-directory-name,
.resources-directory-entry-selected .resources-directory-name {
  color: var(--hds-foreground-primary);
  --icon-color: var(--hds-foreground-primary);
}
.resources-directory-entry-top-level .resources-directory-name {
  font-family: var(--font-family-emphasized);
  font-weight: 500;
}
.resources-directory-chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  --hds-icon-color: var(--hds-foreground-secondary);
}
.resource-directory-subdirectories {
  display: flex;
  flex-direction: column;
  margin-top: var(--hds-spacing-1);
  gap: var(--hds-spacing-1);
}
.resources-window-right-panel {
  background-color: var(--hds-background-secondary);
  flex-grow: 1;
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.resources-window-drop-box {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px dashed transparent;
  margin: var(--hds-spacing-4);
  border-radius: var(--hds-border-radius);
}
.resources-window-drop-box-dragging {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px dashed transparent;
  margin: var(--hds-spacing-4);
  border-radius: var(--hds-border-radius);
  background-color: var(--hds-background-hover);
  border: 1px dashed var(--hds-foreground-tertiary-hover);
}
.resources-window-upload-label {
  margin-bottom: var(--hds-spacing-2);
  padding: var(--hds-spacing-2) var(--hds-spacing-3);
  display: flex;
  align-items: center;
  gap: var(--hds-spacing-2);
}
.resources-window-upload-label-drag {
  font-family: var(--font-family);
  font-size: var(--text-size-dialog);
  font-style: normal;
  font-weight: 400;
  line-height: var(--line-height);
  color: var(--font-color-secondary);
  --icon-color: var(--font-color-secondary);
  color: var(--hds-foreground-primary);
  --icon-color: var(--hds-foreground-primary);
}
.resources-window-upload-label-conj {
  font-family: var(--font-family);
  font-size: var(--text-size-dialog);
  font-style: normal;
  font-weight: 400;
  line-height: var(--line-height);
  color: var(--font-color-secondary);
  --icon-color: var(--font-color-secondary);
  color: var(--hds-foreground-secondary);
  --icon-color: var(--hds-foreground-secondary);
}
.resources-window-upload-label-link {
  cursor: pointer;
  user-select: none;
  font-family: var(--font-family);
  font-size: var(--text-size-dialog);
  font-style: normal;
  font-weight: 400;
  line-height: var(--line-height);
  color: var(--font-color-secondary);
  --icon-color: var(--font-color-secondary);
  font-weight: 500;
  font-family: var(--font-family-emphasized);
  color: var(--hds-action);
  --icon-color: var(--hds-action);
  --hds-icon-color: var(--icon-color);
  display: flex;
  align-items: center;
  gap: var(--hds-spacing-1);
}
.resources-window-upload-label-link:hover {
  color: var(--hds-action-hover);
  --icon-color: var(--hds-action-hover);
}
.resources-window-scroll-area {
  flex-grow: 1;
  height: 1px;
  display: flex;
  flex-direction: column;
}
.resources-window-upload-area {
  flex-grow: 1;
  height: 1px;
  display: flex;
  flex-direction: column;
  padding: var(--hds-spacing-4);
}
.resources-window-file-entity-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 85px);
  grid-auto-rows: max-content;
  align-items: flex-start;
  justify-items: center;
  padding: 0 var(--hds-spacing-3);
  box-sizing: border-box;
  gap: var(--hds-spacing-6);
  width: 100%;
  height: 100%;
}
.resources-window-list-view-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--hds-spacing-2);
  padding-left: var(--hds-spacing-4);
}
.base-resources-window-list-item-container {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  cursor: pointer;
  user-select: none;
  width: 100%;
  gap: var(--hds-spacing-4);
  border-radius: var(--hds-border-radius);
}
.resources-window-list-item-container {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  cursor: pointer;
  user-select: none;
  width: 100%;
  gap: var(--hds-spacing-4);
  border-radius: var(--hds-border-radius);
}
.resources-window-list-item-container:hover {
  background-color: var(--hds-background-object-hover);
}
.resources-window-list-item-container:active {
  background-color: var(--hds-background-object-press);
}
.resources-window-list-item-container-disabled {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  cursor: pointer;
  user-select: none;
  width: 100%;
  gap: var(--hds-spacing-4);
  border-radius: var(--hds-border-radius);
  cursor: not-allowed;
}
.resources-window-list-item-container-selected {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  cursor: pointer;
  user-select: none;
  width: 100%;
  gap: var(--hds-spacing-4);
  border-radius: var(--hds-border-radius);
  background-color: var(--bg-selected-item);
}
.resources-window-list-item-icon {
  background-color: var(--icon-color, var(--font-color));
  width: var(--icon-box-size);
  height: var(--icon-box-size);
  width: var(--icon-text-inline-size);
  height: var(--icon-text-inline-size);
  margin: 0;
  flex-shrink: 0;
}
.resources-window-list-item-icon:hover {
  --icon-color: var(--icon-color-hover, var(--icon-color-emphasized, var(--font-color-emphasized)));
}
.resources-window-list-item-label {
  font-family: var(--font-family);
  font-size: var(--text-size);
  font-style: normal;
  font-weight: 400;
  line-height: var(--text-size-dialog-big);
  letter-spacing: -0.048px;
  color: var(--font-color-secondary);
  --icon-color: var(--font-color-secondary);
  color: var(--hds-foreground-primary);
  --icon-color: var(--hds-foreground-primary);
  flex-grow: 1;
  padding: 0 var(--base-padding);
}
.resources-window-list-item-thumbnail {
  background-color: var(--icon-color, var(--font-color));
  flex-shrink: 0;
  width: var(--icon-box-size);
  height: var(--icon-box-size);
  width: var(--icon-text-inline-size);
  height: var(--icon-text-inline-size);
  box-sizing: border-box;
}
.window-content .boolean-input-container-unchecked {
  background-color: initial;
}
.confirmation-window-button-container {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
.confirmation-window-button-container > *:not(:first-child) {
  margin-left: calc(2 * var(--base-padding));
}
.confirmation-window-button-inner-wrapper {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
.confirmation-window-button-inner-wrapper > *:not(:first-child) {
  margin-left: calc(2 * var(--base-padding));
}
.confirmation-window-read-document-link {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.confirmation-window-read-document-link > *:not(:first-child) {
  margin-left: calc(2 * var(--base-padding));
}
.hds-confirmation-label {
  font-family: var(--font-family);
  font-size: var(--text-size-dialog);
  font-style: normal;
  font-weight: 400;
  line-height: var(--line-height);
  color: var(--font-color-secondary);
  --icon-color: var(--font-color-secondary);
  color: var(--hds-background-inverse);
  flex-grow: 1;
}
.hds-window-input-group {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.hds-window-input-group > *:not(:first-child) {
  margin-top: var(--base-padding);
}
.hds-window-prompt {
  margin-bottom: calc(4 * var(--base-padding));
}
.hds-cancel-button {
  background-color: var(--button-secondary-bg);
  color: var(--font-color-primary);
}
.hds-cancel-button:hover {
  color: var(--font-color-primary);
  background-color: var(--button-secondary-bg-hover);
}
.hds-confirmation-warning {
  --icon-color: var(--button-warn-bg);
}
.revert-confirmation-dialog-content {
  display: flex;
  flex-direction: column;
  padding-left: calc(6 * var(--base-padding));
  padding-right: calc(6 * var(--base-padding));
}
.revert-confirmation-dialog-section {
  display: flex;
  flex-direction: column;
}
.revert-confirmation-dialog-section-label {
  font-family: var(--font-family);
  font-size: var(--text-size);
  font-style: normal;
  font-weight: 400;
  line-height: var(--text-size-dialog-big);
  letter-spacing: -0.048px;
  color: var(--font-color-secondary);
  --icon-color: var(--font-color-secondary);
  color: var(--font-color-hds-tertiary);
  --icon-color: var(--font-color-hds-tertiary);
  margin-left: calc(calc(2 * var(--base-padding)) + 4px + calc(2 * var(--base-padding)));
}
.revert-confirmation-dialog-section-items {
  list-style: none;
}
.revert-confirmation-dialog-section-item {
  margin-left: calc(2 * var(--base-padding));
}
.revert-confirmation-dialog-section-item::before {
  content: "•";
  width: 4px;
  margin-right: calc(2 * var(--base-padding));
  display: inline-block;
}
.revert-confirmation-dialog-scroll-container {
  margin-left: calc(-1 * calc(6 * var(--base-padding)));
  margin-right: calc(-1 * calc(6 * var(--base-padding)));
  max-height: 344px;
}
.revert-confirmation-dialog-scroll-container .scrollarea-vertical-container,
.revert-confirmation-dialog-scroll-container .scrollarea-horizontal-container {
  max-height: inherit;
}
.export-style-dialog-container {
  margin-top: calc(-1 * var(--hds-spacing-4));
  max-height: 344px;
}
.revert-confirmation-dialog-message {
  padding-left: calc(6 * var(--base-padding));
  padding-right: calc(6 * var(--base-padding));
  margin-bottom: calc(2 * var(--base-padding));
}
.dialog-change-original-scheme-description {
  margin-top: calc(-1 * var(--hds-spacing-3));
}
.icon-window-title {
  font-family: var(--font-family-emphasized);
  color: var(--font-color-emphasized);
  --icon-color: var(--font-color-emphasized);
  line-height: var(--line-height);
  font-size: var(--text-size-big);
  box-sizing: border-box;
  display: flex;
  flex-shrink: 0;
  z-index: 13;
  flex-direction: row;
  height: var(--window-header-height);
  background-color: var(--bg-window-header);
  padding: calc(2 * var(--base-padding));
  box-shadow: 0 4px 8px var(--shadow-color);
  justify-content: space-between;
  flex-wrap: wrap;
}
.icon-window-title-close-wrapper {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0 16px;
}
.icon-window-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}
.icon-window-icon-selection-title-container {
  display: flex;
  align-items: center;
  box-sizing: border-box;
}
.icon-window-icon-selection-title-item {
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-menu);
  color: var(--font-color-hint);
  --icon-color: var(--font-color-hint);
  padding: 0 calc(2 * var(--base-padding));
}
.icon-window-sort-selector {
  cursor: pointer;
  user-select: none;
  line-height: var(--header-line-height);
  border-radius: var(--item-border-radius);
  background-color: transparent;
  border-radius: var(--input-border-radius);
  border: var(--input-border-size) solid var(--input-border-color-active);
  color: var(--font-color-active);
  caret-color: var(--input-caret-color);
  align-items: center;
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-tiny);
  color: var(--font-color-hint);
  --icon-color: var(--font-color-hint);
  --icon-color: var(--hint-icon-color);
  padding: 0 0 0 var(--base-padding);
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  height: var(--input-height);
  line-height: var(--input-height);
  --combobox-width: var(--menubar-select-menu-width);
}
.icon-window-sort-selector input[type="number"],
.icon-window-sort-selector input[type="text"] {
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-tiny);
  color: var(--font-color-active);
  caret-color: var(--input-caret-color);
}
.icon-window-sort-selector:hover {
  border-color: var(--input-border-color-hover);
}
.icon-window-sort-selector:focus-within {
  border: var(--input-border-size) solid var(--input-border-color-focussed);
  background-color: transparent;
  color: var(--font-color-emphasized);
}
.icon-window-sort-selector input[type="number"]:focus,
.icon-window-sort-selector input[type="text"]:focus {
  border: none;
}
.icon-window-sort-selector > *:not(:first-child) {
  margin-left: var(--base-padding);
}
.icon-window-sort-selector:hover {
  border-color: var(--input-border-color-hover);
}
.popover-container-opened .icon-window-sort-selector,
.popover-container-opened .icon-window-sort-selector:hover {
  border: var(--input-border-size) solid var(--input-border-color-active);
  background-color: transparent;
  color: var(--font-color-active);
}
.icon-window-sort-selector.select-combo-box-disabled {
  opacity: var(--inactive-item-opacity);
  pointer-events: none;
}
.icon-window-sort-selector.select-combo-box-active {
  border: var(--input-border-size) solid var(--input-border-color-active);
  background-color: transparent;
  color: var(--font-color-active);
}
.icon-window-sort-popup-container {
  overflow-y: auto;
  max-height: inherit;
  width: var(--menubar-select-menu-width);
}
.icon-window-sort-popup-container::-webkit-scrollbar {
  width: var(--scrollbar-expanded-grabber-width);
}
.icon-window-sort-popup-container::-webkit-scrollbar-track {
  background-color: inherit;
  border-radius: inherit;
}
.icon-window-sort-popup-container::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-color-hover);
  border-radius: calc(var(--scrollbar-expanded-grabber-width) / 2);
}
.icon-window-icon-selection-title-search-field {
  margin: 0 calc(2 * var(--base-padding));
}
.icon-window-icon-selection-container {
  display: flex;
  justify-content: space-between;
  height: 100%;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}
.icon-window-icon-selection-side-bar {
  display: flex;
  justify-content: space-between;
  height: 100%;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  justify-content: flex-start;
  flex-direction: column;
  flex-shrink: 0;
  height: calc(var(--height) - var(--window-header-height));
  width: var(--icon-window-side-bar-width);
  background-color: var(--bg-window-header);
}
.icon-window-icon-selection-side-bar-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: calc(2 * var(--base-padding)) calc(4 * var(--base-padding));
  box-sizing: border-box;
}
.icon-window-icon-selection-side-bar-filter-container {
  width: 100%;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.icon-window-icon-selection-side-bar-hint {
  font-family: var(--font-family);
  font-size: var(--text-size-tiny);
  color: var(--font-color-hint);
  --icon-color: var(--font-color-hint);
  fill: var(--font-color-hint);
  line-height: var(--line-height-tiny);
  display: flex;
  align-items: center;
}
.icon-window-icon-selection-side-bar-label {
  font-family: var(--font-family);
  font-size: var(--text-size-tiny);
  color: var(--font-color-hint);
  --icon-color: var(--font-color-hint);
  fill: var(--font-color-hint);
  line-height: var(--line-height-tiny);
  color: var(--font-color-emphasized);
  --icon-color: var(--font-color-emphasized);
  margin: calc(4 * var(--base-padding)) 0;
}
.icon-window-icon-selection-side-bar-title {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: calc(2 * var(--base-padding)) calc(4 * var(--base-padding));
  box-sizing: border-box;
  justify-content: flex-start;
  align-items: center;
  font-family: var(--font-family);
  font-size: var(--text-size);
  color: var(--font-color-group-item);
  --icon-color: var(--font-color-group-item);
  line-height: var(--line-height);
}
.icon-window-icon-selection-side-bar-title-icon {
  margin-right: calc(2 * var(--base-padding));
}
.icon-window-icon-selection-side-bar-item-wrapper {
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: center;
  padding-left: calc(4 * var(--base-padding));
}
.icon-window-icon-selection-side-bar-item {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: calc(2 * var(--base-padding)) calc(4 * var(--base-padding));
  box-sizing: border-box;
  justify-content: flex-start;
  align-items: center;
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-menu);
  color: var(--font-color-hint);
  --icon-color: var(--font-color-hint);
}
.icon-window-icon-selection-main-section {
  display: flex;
  justify-content: space-between;
  height: 100%;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  flex-direction: column;
}
.icons-window-main-section-notification {
  width: calc(100% - var(--icon-window-side-bar-width));
  height: var(--icon-window-notification-height);
  box-sizing: border-box;
  display: flex;
  padding: calc(2 * var(--base-padding)) calc(4 * var(--base-padding));
  position: absolute;
  z-index: 13;
}
.icons-window-main-section-notification-warning {
  width: calc(100% - var(--icon-window-side-bar-width));
  height: var(--icon-window-notification-height);
  box-sizing: border-box;
  display: flex;
  padding: calc(2 * var(--base-padding)) calc(4 * var(--base-padding));
  position: absolute;
  z-index: 13;
  background-color: #FFBD09;
  --icon-color: rgba(15, 22, 33, 0.8);
  color: rgba(15, 22, 33, 0.8);
}
.icons-window-main-section-notification-positive {
  width: calc(100% - var(--icon-window-side-bar-width));
  height: var(--icon-window-notification-height);
  box-sizing: border-box;
  display: flex;
  padding: calc(2 * var(--base-padding)) calc(4 * var(--base-padding));
  position: absolute;
  z-index: 13;
  background-color: #00A86F;
}
.icons-window-main-section-notification-message {
  flex-grow: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.icons-window-main-section-notification-icon-wrapper {
  cursor: pointer;
  user-select: none;
}
.icons-window-main-section-notification-icon-wrapper:hover {
  --icon-color: rgba(15, 22, 33, 0.7);
}
.icon-window-scroll-area {
  box-sizing: border-box;
  width: 100%;
  height: var(--icon-window-area-height);
  background-color: transparent;
}
.icon-window-scroll-area-notification-open {
  box-sizing: border-box;
  width: 100%;
  height: var(--icon-window-area-height);
  background-color: transparent;
  margin-top: var(--icon-window-notification-height);
  height: calc(var(--icon-window-area-height) - var(--icon-window-notification-height));
}
.icon-window-change-scroll-area {
  box-sizing: border-box;
  width: 100%;
  height: var(--icon-window-area-height);
  background-color: transparent;
  height: calc(var(--icon-window-area-height) - var(--icon-window-change-view-header));
}
.icon-window-resource-scroll-area {
  box-sizing: border-box;
  width: 100%;
  height: var(--icon-window-area-height);
  background-color: transparent;
  height: calc(var(--icon-window-area-height) - var(--icon-window-resource-view-header));
}
.icon-window-scroll-area-content {
  display: flex;
  flex-wrap: wrap;
  padding: calc(2 * var(--base-padding));
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}
.icon-window-scroll-area-content-row {
  display: flex;
  width: 100%;
  align-items: center;
  box-sizing: border-box;
}
.icon-window-button-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-grow: 1;
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 0 calc(4 * var(--base-padding));
  background-color: var(--bg-window-header);
}
.icon-window-button-container .rounded-button-secondary-dark {
  margin-right: calc(2 * var(--base-padding));
}
.icon-window-file-entity {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  justify-content: flex-start;
  box-sizing: border-box;
  width: var(--icon-window-icon-entity-width);
  height: var(--icon-window-icon-entity-height);
  margin: calc(2 * var(--base-padding));
}
.icon-window-file-entity .file-entity,
.icon-window-file-entity .file-entity-selected {
  margin: 0;
}
.icon-window-icon-entity {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  justify-content: flex-start;
  box-sizing: border-box;
  width: var(--icon-window-icon-entity-width);
  height: var(--icon-window-icon-entity-height);
  margin: calc(2 * var(--base-padding));
  padding: var(--base-padding);
}
.icon-window-icon-entity .file-entity,
.icon-window-icon-entity .file-entity-selected {
  margin: 0;
}
.icon-window-icon-entity:hover .icon-window-icon-entity-label {
  font-family: var(--font-family);
  font-size: var(--text-size-tiny);
  color: var(--font-color);
  --icon-color: var(--font-color);
  line-height: var(--line-height-tiny);
}
.icon-window-icon-entity-link-icon {
  margin: calc(var(--base-padding)/2);
  position: absolute;
  z-index: 12;
}
.icon-window-icon-entity-image-wrapper {
  border: var(--border-size) solid var(--border-color);
  border-radius: var(--input-border-radius);
  border-color: transparent;
  border-width: var(--icon-window-item-border-width);
  box-sizing: border-box;
  border-radius: var(--border-radius);
  margin-bottom: var(--base-padding);
  background-color: #6b7485;
}
.icon-window-icon-entity-icon-clear-icon {
  --icon-color: #ffffff;
  position: relative;
}
.icon-window-icon-entity-icon-wrapper {
  width: var(--icon-window-icon-entity-background-size-small);
  height: var(--icon-window-icon-entity-background-size-small);
  box-sizing: border-box;
  --icon-color: #6b7485;
}
.icon-window-icon-entity-icon-wrapper .icon-window-icon-entity-icon-clear-icon {
  left: calc((var(--icon-window-icon-entity-background-size-small) / 2) - var(--base-padding));
  bottom: calc(2 * var(--base-padding));
}
.icon-window-icon-entity-icon-wrapper-big {
  width: var(--icon-window-icon-entity-background-size-small);
  height: var(--icon-window-icon-entity-background-size-small);
  box-sizing: border-box;
  --icon-color: #6b7485;
  --icon-window-icon-entity-size: calc(var(--icon-window-icon-entity-background-size) + 2px);
  width: var(--icon-window-icon-entity-size);
  height: var(--icon-window-icon-entity-size);
}
.icon-window-icon-entity-icon-wrapper-big .icon-window-icon-entity-icon-clear-icon {
  left: calc((var(--icon-window-icon-entity-background-size-small) / 2) - var(--base-padding));
  bottom: calc(2 * var(--base-padding));
}
.icon-window-icon-entity-icon-wrapper-big .icon-window-icon-entity-icon-clear-icon {
  left: calc((var(--icon-window-icon-entity-size)/2) - calc(2 * var(--base-padding)));
  bottom: calc(4 * var(--base-padding));
}
.icon-window-icon-entity-image-wrapper-small {
  border: var(--border-size) solid var(--border-color);
  border-radius: var(--input-border-radius);
  border-color: transparent;
  border-width: var(--icon-window-item-border-width);
  box-sizing: border-box;
  border-radius: var(--border-radius);
  margin-bottom: var(--base-padding);
  background-color: #6b7485;
  margin: 0;
}
.icon-window-icon-entity-image-wrapper-unset {
  border: var(--border-size) solid var(--border-color);
  border-radius: var(--input-border-radius);
  border-color: transparent;
  border-width: var(--icon-window-item-border-width);
  box-sizing: border-box;
  border-radius: var(--border-radius);
  margin-bottom: var(--base-padding);
  background-color: #6b7485;
  background-color: transparent;
}
.icon-window-icon-entity-image-wrapper-unset-selected {
  border: var(--border-size) solid var(--border-color);
  border-radius: var(--input-border-radius);
  border-color: transparent;
  border-width: var(--icon-window-item-border-width);
  box-sizing: border-box;
  border-radius: var(--border-radius);
  margin-bottom: var(--base-padding);
  background-color: #6b7485;
  background-color: transparent;
  border: var(--icon-window-item-border-width) solid #5FB2FF;
}
.icon-window-icon-entity-image-wrapper-selected {
  border: var(--border-size) solid var(--border-color);
  border-radius: var(--input-border-radius);
  border-color: transparent;
  border-width: var(--icon-window-item-border-width);
  box-sizing: border-box;
  border-radius: var(--border-radius);
  margin-bottom: var(--base-padding);
  background-color: #6b7485;
  border: var(--icon-window-item-border-width) solid #5FB2FF;
}
.base-icon-window-icon-entity-image {
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}
.icon-window-icon-entity-image-transparent-background {
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--icon-window-icon-entity-background-size);
  height: var(--icon-window-icon-entity-background-size);
}
.icon-window-icon-entity-image-background {
  --checker-opacity: 0.5;
  --checker-size: 12px;
  --checker-half-size: calc(var(--checker-size) / 2);
  --checker-off-color: transparent;
  --checker-color: #535c6b;
  background-image: linear-gradient(45deg, var(--checker-color) 25%, var(--checker-off-color) 25%), linear-gradient(-45deg, var(--checker-color) 25%, var(--checker-off-color) 25%), linear-gradient(45deg, var(--checker-off-color) 75%, var(--checker-color) 75%), linear-gradient(-45deg, var(--checker-off-color) 75%, var(--checker-color) 75%);
  background-size: var(--checker-size) var(--checker-size);
  background-position: 0 0, 0 var(--checker-half-size), var(--checker-half-size) calc(-1 * var(--checker-half-size)), calc(-1 * var(--checker-half-size)) 0px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--icon-window-icon-entity-background-size);
  height: var(--icon-window-icon-entity-background-size);
}
.icon-window-icon-entity-image-transparent-background-small {
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--icon-window-icon-entity-background-size-small);
  height: var(--icon-window-icon-entity-background-size-small);
}
.icon-window-icon-entity-image-background-small {
  --checker-opacity: 0.5;
  --checker-size: 6px;
  --checker-half-size: calc(var(--checker-size) / 2);
  --checker-off-color: transparent;
  --checker-color: rgba(128, 128, 128, var(--checker-opacity));
  background-image: linear-gradient(45deg, var(--checker-color) 25%, var(--checker-off-color) 25%), linear-gradient(-45deg, var(--checker-color) 25%, var(--checker-off-color) 25%), linear-gradient(45deg, var(--checker-off-color) 75%, var(--checker-color) 75%), linear-gradient(-45deg, var(--checker-off-color) 75%, var(--checker-color) 75%);
  background-size: var(--checker-size) var(--checker-size);
  background-position: 0 0, 0 var(--checker-half-size), var(--checker-half-size) calc(-1 * var(--checker-half-size)), calc(-1 * var(--checker-half-size)) 0px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--icon-window-icon-entity-background-size-small);
  height: var(--icon-window-icon-entity-background-size-small);
}
.icon-window-icon-entity-label {
  font-family: var(--font-family);
  font-size: var(--text-size-tiny);
  color: var(--font-color);
  --icon-color: var(--font-color);
  line-height: var(--line-height-tiny);
  color: var(--font-color-subdued);
  flex-grow: 1;
  width: 100%;
  text-align: center;
  overflow: hidden;
}
.icon-window-change-sub-header-label {
  box-sizing: border-box;
  width: 100%;
  margin: calc(2 * var(--base-padding));
}
.icon-window-change-list {
  width: 100%;
  box-sizing: border-box;
}
.icon-window-change-list-header {
  background-color: var(--bg-window-header);
  height: var(--icon-window-change-view-header);
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  padding-left: var(--icon-window-change-item-indentation);
}
.icon-window-change-list-header-column {
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-menu);
  color: var(--font-color-hint);
  --icon-color: var(--font-color-hint);
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding-right: calc(2 * var(--icon-window-change-item-indentation) - calc(2 * var(--base-padding)));
}
.icon-window-change-list-item {
  margin-top: var(--panel-margin);
  border-radius: var(--panel-body-border-radius);
  background-color: var(--bg-color-panel-content);
  font-family: var(--font-family);
  font-size: var(--text-size);
  color: var(--font-color-group-item);
  --icon-color: var(--font-color-group-item);
  line-height: var(--line-height);
  color: var(--font-color-inactive-item-text);
  --icon-color: var(--font-color-inactive-item-text);
  background-color: #333B47;
  display: flex;
  box-sizing: border-box;
  padding: calc(2 * var(--base-padding));
  padding-left: calc(var(--icon-window-change-item-indentation) - calc(2 * var(--base-padding)));
}
.icon-window-change-list-item:first-child {
  margin-top: 0;
}
.icon-window-change-list-item-pill-container {
  display: flex;
  box-sizing: border-box;
  flex-wrap: wrap;
  width: var(--icon-window-name-pill-container-width);
}
.icon-window-change-list-item-pill {
  background-color: rgba(8, 23, 52, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--base-padding) calc(2 * var(--base-padding));
  margin-bottom: var(--base-padding);
  margin-right: calc(2 * var(--base-padding));
  border-radius: var(--icon-window-name-pill-border-radius);
}
.icon-window-change-list-item-pill-label {
  font-family: var(--font-family);
  font-size: var(--text-size);
  color: var(--font-color-group-item);
  --icon-color: var(--font-color-group-item);
  line-height: var(--line-height);
  color: var(--font-color-inactive-item-text);
  --icon-color: var(--font-color-inactive-item-text);
  padding: 0 var(--base-padding);
}
.icon-window-change-list-item-column {
  width: 100%;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}
.icon-window-change-list-item-column:not(:first-of-type) {
  padding-left: calc(4 * var(--base-padding));
}
.icon-window-change-list-item-icon-container {
  flex-grow: 1;
  box-sizing: border-box;
  padding-left: var(--base-padding);
  display: flex;
  justify-content: flex-start;
}
.icon-window-change-list-item-icon {
  margin-right: calc(2 * var(--base-padding));
}
.icon-window-change-list-item-icon-disabled {
  margin-right: calc(2 * var(--base-padding));
  opacity: var(--input-disabled-opacity);
  cursor: default;
  --icon-color: var(--disabled-icon-color);
  --hds-icon-color: var(--hds-foreground-inactive);
  pointer-events: none;
}
.icon-window-change-list-item-text {
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-menu);
  color: var(--font-color-hint);
  --icon-color: var(--font-color-hint);
  width: var(--icon-window-change-item-text-width);
  margin-left: var(--base-padding);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.icon-window-change-list-item-display-container {
  display: flex;
  align-items: center;
}
.icon-window-change-list-item-display-icon {
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height);
  --icon-color: var(--font-color-highlighted);
  color: var(--font-color-highlighted);
  font-style: normal;
  border: var(--border-size) solid var(--border-color);
  border-radius: var(--input-border-radius);
  border-color: transparent;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: content-box;
  width: var(--icon-window-icon-entity-background-size-small);
  height: var(--icon-window-icon-entity-background-size-small);
}
.icon-window-change-list-item-display-text {
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-menu);
  color: var(--font-color-hint);
  --icon-color: var(--font-color-hint);
  box-sizing: border-box;
  flex-grow: 0;
  flex-shrink: 0;
  width: var(--icon-window-change-item-text-width);
  display: flex;
  margin-left: var(--base-padding);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.icon-window-resource-container {
  display: flex;
  justify-content: space-between;
  height: 100%;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}
.icon-window-resource-side-bar {
  display: flex;
  justify-content: space-between;
  height: 100%;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  justify-content: flex-start;
  flex-direction: column;
  flex-shrink: 0;
  height: calc(var(--height) - var(--window-header-height));
  width: var(--icon-window-side-bar-width);
  background-color: var(--bg-window-header);
}
.icon-window-resource-side-bar-section {
  flex-shrink: 0;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: calc(4 * var(--base-padding));
}
.icon-window-resource-side-bar-item {
  cursor: pointer;
  user-select: none;
  display: flex;
  width: 100%;
  box-sizing: border-box;
  padding: calc(2 * var(--base-padding));
}
.icon-window-resource-side-bar-item:hover .icon-window-resource-side-bar-item-label {
  color: var(--font-color-item-text-hover);
  --icon-color: var(--font-color-item-text-hover);
}
.icon-window-resource-side-bar-item-label {
  font-family: var(--font-family);
  font-size: var(--text-size);
  color: var(--font-color-group-item);
  --icon-color: var(--font-color-group-item);
  line-height: var(--line-height);
  color: var(--font-color-inactive-item-text);
  --icon-color: var(--font-color-inactive-item-text);
  flex-grow: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.icon-window-resource-side-bar-item-selected {
  cursor: pointer;
  user-select: none;
  display: flex;
  width: 100%;
  box-sizing: border-box;
  padding: calc(2 * var(--base-padding));
  background-color: rgba(15, 22, 33, 0.95);
}
.icon-window-resource-side-bar-item-selected:hover .icon-window-resource-side-bar-item-label {
  color: var(--font-color-item-text-hover);
  --icon-color: var(--font-color-item-text-hover);
}
.icon-window-resource-side-bar-sub-item-wrapper {
  padding-left: calc(4 * var(--base-padding));
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.icon-window-resource-side-bar-sub-item {
  cursor: pointer;
  user-select: none;
  display: flex;
  width: 100%;
  box-sizing: border-box;
  padding: calc(2 * var(--base-padding));
  border-left: var(--selected-item-selection-bar-width) solid #333B47;
  width: unset;
  border-width: var(--border-size);
}
.icon-window-resource-side-bar-sub-item:hover .icon-window-resource-side-bar-item-label {
  color: var(--font-color-item-text-hover);
  --icon-color: var(--font-color-item-text-hover);
}
.icon-window-resource-side-bar-sub-item-selected {
  cursor: pointer;
  user-select: none;
  display: flex;
  width: 100%;
  box-sizing: border-box;
  padding: calc(2 * var(--base-padding));
  border-left: var(--selected-item-selection-bar-width) solid #333B47;
  width: unset;
  border-left: solid var(--selected-item-selection-bar-width) var(--selected-item-marker-color);
  border-width: var(--border-size);
  background-color: rgba(15, 22, 33, 0.95);
}
.icon-window-resource-side-bar-sub-item-selected:hover .icon-window-resource-side-bar-item-label {
  color: var(--font-color-item-text-hover);
  --icon-color: var(--font-color-item-text-hover);
}
.icon-window-resource-replacement-drop-area {
  border: 1px dashed var(--input-border-color-hover);
  border-radius: var(--input-border-radius);
  transition: border var(--input-animation-duration) ease-in-out;
  width: 100%;
  height: var(--icon-window-drag-area-height);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  background-color: #0f1621;
}
.icon-window-resource-replacement-drop-area-highlighted {
  border: 1px dashed var(--input-border-color-hover);
  transition: border var(--input-animation-duration) ease-in-out;
  width: 100%;
  height: var(--icon-window-drag-area-height);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  background-color: #0f1621;
  border: 1px dashed var(--input-border-color-focussed);
  border-radius: var(--input-border-radius);
}
.icon-window-resource-replacement-drop-area-title {
  font-family: var(--font-family);
  font-size: var(--text-size);
  color: var(--font-color-group-item);
  --icon-color: var(--font-color-group-item);
  line-height: var(--line-height);
  font-size: var(--text-size-drag-and-drop-title);
  line-height: var(--line-height-drag-and-drop-title);
}
.icon-window-resource-replacement-drop-area-subtitle {
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-menu);
  color: var(--font-color-hint);
  --icon-color: var(--font-color-hint);
}
.icon-window-resource-replacement-item-icon {
  --icon-color: #126EF8;
  background-color: var(--icon-color, var(--font-color));
  flex-shrink: 0;
  width: var(--icon-box-size);
  height: var(--icon-box-size);
  margin: 0;
  margin-right: calc(2 * var(--base-padding));
}
.icon-window-resource-main-section {
  display: flex;
  justify-content: space-between;
  height: 100%;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  flex-direction: column;
}
.icon-window-resource-sub-header {
  height: var(--icon-window-resource-view-header);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 0;
  background-color: transparent;
}
.icon-window-resource-header-buttons {
  width: 100%;
  display: flex;
}
.icon-window-resource-replacement-item-wrapper {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: var(--hds-spacing-2) var(--hds-spacing-2) var(--hds-spacing-1) var(--hds-spacing-2);
  box-sizing: border-box;
  width: 85px;
  min-height: 70px;
  max-height: 85px;
  width: fit-content;
  border-radius: var(--hds-border-radius);
  gap: var(--hds-spacing-1);
  cursor: pointer;
  user-select: none;
  margin: 0;
  justify-content: flex-start;
}
.icon-window-resource-replacement-item-wrapper:hover {
  background-color: var(--file-entity-bg-hover);
}
.icon-window-resource-replacement-item {
  background-color: transparent;
  border: var(--input-border-size) solid var(--input-border-color-active);
  font-size: var(--text-size);
  color: var(--font-color-active);
  caret-color: var(--input-caret-color);
  height: var(--input-height);
  font-family: var(--font-family);
  font-size: var(--text-size-tiny);
  line-height: var(--line-height-tiny);
  --icon-color: var(--font-color-highlighted);
  color: var(--font-color-highlighted);
  border: var(--border-size) solid var(--border-color);
  border-radius: var(--input-border-radius);
  border-color: var(--main-button-color);
  cursor: pointer;
  user-select: none;
  width: var(--icon-big-size);
  height: var(--icon-big-size);
  box-sizing: border-box;
  margin: calc(2 * var(--base-padding));
  display: flex;
  justify-content: center;
  align-items: center;
}
.icon-window-resource-replacement-item input[type="number"],
.icon-window-resource-replacement-item input[type="text"] {
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-tiny);
  color: var(--font-color-active);
  caret-color: var(--input-caret-color);
}
.changelog-window-log-outer-container {
  height: 60vh;
  display: flex;
  flex-direction: column;
  margin-left: calc(-1 * var(--hds-spacing-6));
  margin-right: calc(-1 * var(--hds-spacing-6));
}
.changelog-window-log-container {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  padding: var(--hds-spacing-0) var(--hds-spacing-2);
  margin: 0;
  border: 0;
}
.changelog-window-version-entry {
  font-family: var(--font-family);
  font-size: var(--text-size-dialog);
  font-style: normal;
  font-weight: 400;
  line-height: var(--line-height);
  color: var(--font-color-secondary);
  --icon-color: var(--font-color-secondary);
  color: var(--hds-foreground-primary);
  padding: var(--hds-spacing-3) var(--hds-spacing-4);
  margin-bottom: var(--hds-spacing-3);
}
.changelog-h1 {
  display: none;
}
.changelog-h2 {
  font-family: var(--font-family);
  font-size: var(--text-size-dialog);
  font-style: normal;
  font-weight: 400;
  line-height: var(--line-height);
  color: var(--font-color-secondary);
  --icon-color: var(--font-color-secondary);
  font-weight: 500;
  font-family: var(--font-family-emphasized);
  color: var(--hds-foreground-primary);
  margin-top: var(--hds-spacing-5);
}
.changelog-window-log-container-item {
  border-radius: var(--hds-spacing-0) !important;
  border-bottom: 1px solid var(--hds-foreground-divider);
}
.changelog-window-log-container-item .changelog-window-log-container-item-headline {
  color: var(--hds-foreground-secondary);
}
.changelog-window-log-container-item.accordion-item-expanded .chevron-left,
.changelog-window-log-container-item.accordion-item-expanded .chevron-right {
  --hds-icon-color: var(--hds-foreground-primary);
}
.changelog-window-log-container-item.accordion-item-expanded .changelog-window-log-container-item-headline {
  color: var(--hds-foreground-primary);
}
.changelog-window-log-container-item .accordion-item-header {
  padding-right: var(--hds-spacing-2);
}
.changelog-window-log-container-item .accordion-item-header .accordion-item-header-right {
  padding-right: var(--hds-spacing-2);
}
.import-style-window-file-container-sizing {
  height: 144px;
}
.import-style-window-file-container {
  width: 100%;
  border: var(--border-size) dashed var(--hds-foreground-tertiary);
  box-sizing: border-box;
  border-radius: var(--border-radius);
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  --divider-color-override: var(--hds-foreground-tertiary);
  height: 144px;
}
.import-style-window-file-container > *:not(:first-child) {
  margin-top: calc(2 * var(--base-padding));
}
.uploaded-file-container {
  width: calc(100% - 24px - (2 * calc(4 * var(--base-padding))));
  display: flex;
  align-items: center;
  border-radius: var(--border-radius);
  padding: calc(2 * var(--base-padding)) calc(4 * var(--base-padding)) calc(2 * var(--base-padding)) calc(2 * var(--base-padding));
}
.uploaded-file-container > *:not(:first-child) {
  margin-left: calc(2 * var(--base-padding));
}
.uploaded-file-accepted {
  background-color: var(--hds-background-object);
}
.uploaded-file-accepted:hover {
  background-color: var(--hds-background-object-hover);
}
.uploaded-file-accepted .uploaded-file-icon-box {
  background-color: var(--hds-background-object);
}
.uploaded-file-error {
  background-color: var(--hds-negative-secondary);
}
.uploaded-file-error:hover {
  background-color: var(--hds-negative-secondary-hover);
}
.uploaded-file-error .uploaded-file-icon-box {
  background-color: var(--hds-negative-secondary);
}
.uploaded-file-icon-box {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  border-radius: var(--border-radius);
  width: 40px;
  height: 40px;
}
.uploaded-file-accept-icon {
  --icon-color: var(--hds-foreground-positive);
}
.uploaded-file-error-icon {
  --icon-color: var(--hds-foreground-negative);
}
.uploaded-file-rows {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.uploaded-file-basename {
  font-family: var(--font-family);
  font-size: var(--text-size-dialog);
  line-height: var(--line-height-dialog-content);
  color: var(--font-color-dialog);
  --icon-color: var(--font-color-dialog);
  color: rgba(16, 23, 35, 0.95);
}
.uploaded-file-ext {
  font-family: var(--font-family);
  font-size: var(--text-size-dialog);
  line-height: var(--line-height-dialog-content);
  color: var(--font-color-dialog);
  --icon-color: var(--font-color-dialog);
  color: rgba(34, 54, 89, 0.41);
}
.uploaded-file-second-row {
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-menu);
  color: var(--font-color-hint);
  --icon-color: var(--font-color-hint);
}
.uploaded-file-second-row-error {
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-menu);
  color: var(--font-color-hint);
  --icon-color: var(--font-color-hint);
  color: var(--hds-foreground-negative);
}
.link-dialog-content {
  border-top: var(--divider-thickness) solid var(--bg-color-popup-divider);
  border-bottom: var(--divider-thickness) solid var(--bg-color-popup-divider);
  padding-top: calc(5 * var(--base-padding));
  padding-bottom: calc(5 * var(--base-padding));
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-height: 344px;
}
.link-dialog-content > *:not(:first-child) {
  margin-top: calc(6 * var(--base-padding));
}
.link-dialog-content .scrollarea-vertical-container,
.link-dialog-content .scrollarea-horizontal-container {
  max-height: inherit;
}
.link-dialog-notification-container {
  padding-left: calc(6 * var(--base-padding));
  padding-right: calc(6 * var(--base-padding));
  margin-bottom: calc(4 * var(--base-padding));
}
.link-dialog-notification-outer-container {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 2 * 20px - 2 * 20px - 65px - 74px);
}
.link-dialog-notification-outer-container .scrollarea-vertical-container,
.link-dialog-notification-outer-container .scrollarea-horizontal-container {
  max-height: inherit;
}
.link-dialog-header-icon {
  --icon-color: var(--font-color);
}
.link-dialog-footer {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  height: var(--popup-footer-height);
  padding: 0px calc(6 * var(--base-padding));
}
.link-dialog-footer-buttons {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: calc(2 * var(--base-padding));
}
.link-dialog-footer-button-icon {
  margin-right: calc(2 * var(--base-padding));
}
.link-dialog-message {
  font-family: var(--font-family);
  font-size: var(--text-size);
  font-style: normal;
  font-weight: 400;
  line-height: var(--text-size-dialog-big);
  letter-spacing: -0.048px;
  color: var(--font-color-secondary);
  --icon-color: var(--font-color-secondary);
  padding-left: calc(6 * var(--base-padding));
  padding-right: calc(6 * var(--base-padding));
  margin-bottom: calc(2 * var(--base-padding));
}
.link-dialog-emphasized {
  color: var(--font-color-primary);
  --icon-color: var(--font-color-primary);
}
.link-dialog-list {
  display: flex;
  flex-direction: column;
  padding-left: calc(6 * var(--base-padding));
  padding-right: calc(6 * var(--base-padding));
}
.link-dialog-section {
  display: flex;
  flex-direction: column;
}
.link-dialog-section-label {
  font-family: var(--font-family);
  font-size: var(--text-size);
  font-style: normal;
  font-weight: 400;
  line-height: var(--text-size-dialog-big);
  letter-spacing: -0.048px;
  color: var(--font-color-secondary);
  --icon-color: var(--font-color-secondary);
  color: var(--font-color-hds-tertiary);
  --icon-color: var(--font-color-hds-tertiary);
  margin-left: calc(calc(2 * var(--base-padding)) + 4px + calc(2 * var(--base-padding)));
}
.link-dialog-section-items {
  list-style: none;
}
.link-dialog-section-item {
  margin-left: calc(2 * var(--base-padding));
}
.link-dialog-section-item::before {
  content: "•";
  width: 4px;
  margin-right: calc(2 * var(--base-padding));
  display: inline-block;
}
.confirmation-header {
  font-family: var(--font-family);
  font-size: var(--text-size);
  font-style: normal;
  font-weight: 400;
  line-height: var(--text-size-dialog-big);
  letter-spacing: -0.048px;
  color: var(--font-color-secondary);
  --icon-color: var(--font-color-secondary);
  font-weight: 500;
  font-family: var(--font-family-emphasized);
  color: var(--hds-foreground-primary);
  --icon-color: var(--hds-foreground-primary);
  font-size: var(--text-size-drag-and-drop-title);
  line-height: var(--line-height-drag-and-drop-title);
  display: flex;
  flex-direction: row;
  align-items: center;
}
.white-dialog-window {
  --base-padding: 4px;
  --half-panel-margin: 1px;
  --panel-margin: 2px;
  --panel-body-border-radius: 4px;
  --panel-header-border-radius: 5px;
  --font-family: "Fira Regular";
  --font-family-subdued: "Fira Light";
  --font-family-emphasized: "Fira Medium";
  --text-size-dashboard-title: 18px;
  --text-size-dashboard-section-title: 16px;
  --text-size-dashboard-description: 16px;
  --text-size-big: 16px;
  --text-size-big-button: 14px;
  --text-size-big-input: 14px;
  --text-size-menu: 12px;
  --text-size-dialog: 14px;
  --text-size: 12px;
  --text-size-tiny: 10px;
  --text-size-super-tiny: 8px;
  --text-size-drag-and-drop-title: 20px;
  --text-size-dialog-big: 18px;
  --line-height-tiny: 12px;
  --line-height-menu: 16px;
  --line-height: 20px;
  --header-line-height: 24px;
  --line-height-dashboard-title: 26px;
  --line-height-dashboard-section-title: 24px;
  --line-height-dashboard-description: 24px;
  --line-height-drag-and-drop-title: 24px;
  --line-height-dialog-header: 16px;
  --line-height-dialog-content: 20px;
  --divider-thickness: 1px;
  --divider-spacing: 0px;
  --divider-padding: calc(4 * var(--base-padding));
  --popup-border-radius: 4px;
  --popup-border-radius-large: 8px;
  --popup-item-height-large: 40px;
  --popup-menu-width: 200px;
  --popup-footer-height: 64px;
  --popup-header-height: 64px;
  --popup-padding-h: 24px;
  --popup-padding-v: 20px;
  --white-popup-max-height: 280px;
  --popup-description-height: 200px;
  --popup-item-selection-height: 2px;
  --popup-image-width: 400px;
  --popup-image-height: 175px;
  --border-size: 1px;
  --border-size-highlighted: 2px;
  --border-radius: 4px;
  --button-icon-spacing: 8px;
  --input-height: 22px;
  --input-width: 93px;
  --number-input-width: var(--input-width);
  --file-input-width: var(--input-width);
  --dash-input-width: 125px;
  --input-prefix-width: 6px;
  --input-prefix-left-padding: 5px;
  --input-border-radius: 2px;
  --input-border-size: 1px;
  --input-padding: 4px;
  --input-icon-padding: 6px;
  --input-disabled-opacity: 0.5;
  --boolean-input-height: 16px;
  --sliding-toggle-height: 20px;
  --sliding-toggle-width: 40px;
  --input-animation-duration: 300ms;
  --input-animation-duration-quick: 100ms;
  --item-border-radius: 2px;
  --reduced-item-height: 28px;
  --main-item-height: 35px;
  --large-main-item-height: 48px;
  --icon-button-group-height: 28px;
  --icon-box-size: 16px;
  --icon-text-inline-size: var(--text-size);
  --icon-header-size: var(--header-line-height);
  --icon-big-size: 40px;
  --icon-padding-size: calc(2 * var(--base-padding));
  --tooltip-text-size: 13px;
  --tooltip-line-height: 18px;
  --tooltip-nibble-size: 6px;
  --tooltip-nibble-indentation: 18px;
  --tooltip-width: 200px;
  --tooltip-width-wide: 320px;
  --selected-item-selection-bar-width: 3px;
  --selected-group-item-selection-bar-width: 4px;
  --inactive-item-opacity: 0.4;
  --graph-width: 2px;
  --zoomlevel-line-width: 1px;
  --collapsible-margin: 12px;
  --scrollbar-width: 8px;
  --scrollbar-expanded-grabber-width: 6px;
  --scrollbar-grabber-width: 4px;
  --map-overlay-margin: 12px;
  --map-overlay-item-size: 40px;
  --menubar-size: 48px;
  --menubar-title-width: 300px;
  --menubar-select-menu-width: 150px;
  --menubar-icon-size: 32px;
  --menubar-lang-dropdown-height: 400px;
  --menubar-notification-dot-size: 8px;
  --menubar-scheme-selection-item-label-width: 200px;
  --search-field-height: 25px;
  --panel-small-width: 230px;
  --panel-width: 300px;
  --panel-large-width: 360px;
  --panel-tab-height: 25px;
  --panel-empty-content-top-offset: 200px;
  --panel-header-button-size: 20px;
  --slider-width: 4px;
  --slider-length: 82px;
  --slider-grabber-size: 14px;
  --slider-tick-length: 2px;
  --slider-tick-width: 1px;
  --slider-tick-offset: 1px;
  --navigation-bar-size: 40px;
  --drag-item-divider-height: 1px;
  --drag-item-divider-end-size: 5px;
  --notification-container-height: 32px;
  --notification-toast-height: 56px;
  --notification-animation-curve: cubic-bezier(0.7, 0, 0.5, 1.5);
  --notification-animation-duration: 200ms;
  --color-picker-height: 150px;
  --color-picker-crosshair-size: 15px;
  --color-picker-input-width: 70px;
  --color-picker-slider-track-height: 8px;
  --color-picker-slider-handle-size: 12px;
  --color-picker-container-width: 320px;
  --color-picker-eyedrop-size: 24px;
  --icon-picker-container-width: 254px;
  --icon-picker-container-height: 318px;
  --icon-picker-icon-size: 24px;
  --swatch-height: 22px;
  --swatch-width: 50px;
  --ga-blend-mode-btn-width: 52px;
  --basic-template-thumbnail-height: 40px;
  --basic-template-thumbnail-width: 56px;
  --basic-template-thumbnail-border: 2px;
  --basic-template-thumbnail-border-offset: 1px;
  --window-header-height: 73px;
  --extra-small-window-width: 468px;
  --extra-small-window-height: 212px;
  --small-window-width: 460px;
  --small-window-height: 280px;
  --medium-window-width: 380px;
  --medium-window-height: 320px;
  --big-window-width: 640px;
  --big-window-height: 520px;
  --wide-big-window-width: 720px;
  --wide-big-window-height: 520px;
  --wide-extra-big-window-width: 950px;
  --wide-extra-big-window-height: 520px;
  --fluid-window-height: calc(100vh - 200px);
  --fluid-window-width: calc(100vw - 512px);
  --search-bar-height: 50px;
  --icon-window-drag-area-height: 310px;
  --medium-area-height: 100px;
  --big-area-height: 180px;
  --extra-big-area-height: 320px;
  --icon-window-area-height: 393px;
  --drop-target-outline-size: 1px;
  --drop-target-outline-offset: 1px;
  --image-picker-crosshair-size: 8px;
  --image-picker-border-size: 2px;
  --icon-window-side-bar-width: 207px;
  --icon-window-icon-entity-width: 77px;
  --icon-window-icon-entity-height: 88px;
  --icon-window-icon-entity-background-size: 48px;
  --icon-window-icon-entity-background-size-small: 24px;
  --icon-window-change-view-header: 32px;
  --icon-window-change-item-text-width: 100px;
  --icon-window-change-item-indentation: 53px;
  --icon-window-resource-view-header: 64px;
  --icon-window-name-pill-container-width: 240px;
  --icon-window-name-pill-border-radius: 16px;
  --icon-window-item-border-width: 2px;
  --icon-window-notification-height: 32px;
  --medium-button-height: 24px;
  --button-height: 32px;
  --large-button-height: 40px;
  --dashboard-item-width: 340px;
  --dashboard-item-height: 160px;
  --dashboard-thumbnail-height: 176px;
  --dashboard-input-height: 32px;
  --component-highlight-thickness: 2px;
  --modifier-group-item-indentation: 24px;
  --region-specific-bar-width: 2px;
  --region-specific-bar-height: 16px;
  --modifier-affected-specific-margin: -20px;
  --modifier-affected-specific-tooltip-width: 296px;
  --tooltip-content-max-width: 225px;
  --modifier-overlay-panel-header-height: 38px;
  --drag-item-divider: #126EF8;
  --drag-item-highlight: rgba(15, 22, 33, 0.1);
  --font-color-highlighted: #126EF8;
  --font-color-highlighted-emphasized: #d0e2fe;
  --font-color-emphasized: #0E1520;
  --font-color-active: #1C232E;
  --font-color: #272F3A;
  --font-color-subdued: #535C6B;
  --font-color-hint: var(--hds-gray-600);
  --font-color-disabled: #8890A0;
  --main-button-font-color: #272F3A;
  --main-button-font-color-emphasized: #0f1621;
  --font-color-menu: #535C6B;
  --font-color-tooltip: #1C232E;
  --font-color-group-item: #1C232E;
  --font-color-dialog: rgba(16, 23, 35, 0.95);
  --font-color-oncolor: #ffffff;
  --font-color-oncolor-hover: #ffffff;
  --font-color-oncolor-subdued: rgba(225, 234, 254, 0.58);
  --font-color-panel-notification: #E9ECF2;
  --font-color-inactive-item-text: #333B47;
  --font-color-item-text-hover: #0f1621;
  --font-color-hds-tertiary: rgba(34, 54, 89, 0.41);
  --font-color-hds-tertiary-hover: rgba(19, 35, 67, 0.5);
  --font-color-hds-tertiary-disabled: rgba(0, 26, 77, 0.2);
  --font-color-body: #3F4855;
  --font-color-primary: rgba(16, 23, 35, 0.95);
  --font-color-primary-disabled: rgba(0, 26, 77, 0.2);
  --font-color-secondary: rgba(7, 23, 49, 0.6);
  --font-color-secondary-disabled: rgba(0, 26, 77, 0.2);
  --header-icon-color: #535C6B;
  --active-icon-color: #1C232E;
  --active-icon-color-inverted: #ffffff;
  --inactive-icon-color: #6A7483;
  --disabled-item-group-text-color: #6A7483;
  --hint-icon-color: #6A7483;
  --disabled-icon-color: #8890A0;
  --action-icon-color: #535C6B;
  --disabled-action-icon-color: #8890A0;
  --error-icon-color: #CF001A;
  --warning-icon-color: #9E6400;
  --warning-icon-color-hover: #FAAA1E;
  --inactive-icon-border-color: #A4ACBA;
  --slider-input-border-color: #A4ACBA;
  --panel-header-button-bg: #f3f3f4;
  --panel-tab-bg-unselected: rgba(255, 255, 255, 0.8);
  --divider-color: rgba(255, 255, 255, 0.2);
  --divider-color-ondark: rgba(15, 22, 33, 0.2);
  --sub-item-box-border-color: #E9ECF2;
  --sub-item-box-bg-color: #CCD1DB;
  --bg-color-ui: #f3f3f4;
  --bg-color-panel-base: #ffffff;
  --bg-color-panel-content: #e7e8e9;
  --bg-color-modifier-panel-content: #ffffff;
  --bg-color-panel-section: #ffffff;
  --bg-color-content: rgba(255, 255, 255, 0.4);
  --bg-color-panel-dark: #ffffff;
  --bg-color-panel-header-dark: #ffffff;
  --bg-color-panel-group-item-selected: #ffffff;
  --border-color-panel-item: #ffffff;
  --bg-color-item: rgba(255, 255, 255, 0.9);
  --bg-color-item-selected: rgba(255, 255, 255, 0.95);
  --bg-color-item-highlighted: rgba(255, 255, 255, 0.6);
  --bg-color-item-header: #cfd0d3;
  --bg-color-button-group: #f3f3f4;
  --blur-popup-color: rgba(8, 23, 52, 0.6);
  --bg-color-popup: #ffffff;
  --bg-color-popup-item-hover: #ffffff;
  --bg-color-popup-divider: rgba(15, 55, 115, 0.1);
  --bg-window: #ffffff;
  --bg-hds-secondary: #ffffff;
  --bg-window-content: rgba(255, 255, 255, 0.4);
  --bg-window-header: #e7e8e9;
  --bg-global-adjustments: rgba(255, 255, 255, 0.9);
  --bg-color-inline-box: rgba(255, 255, 255, 0.4);
  --border-color: rgba(15, 22, 33, 0.1);
  --border-color-highlighted: #1C232E;
  --bg-selected-item: var(--hds-blue-onlight-400-020);
  --main-button-color: #126EF8;
  --main-button-color-hover: #0D5ED9;
  --action-text-button: #126EF8;
  --action-text-button-hover: #0D5ED9;
  --normal-button-bg-color: rgba(255, 255, 255, 0.8);
  --normal-button-bg-color-hover: rgba(255, 255, 255, 0.95);
  --button-primary-bg: linear-gradient(270deg, #65EBE2 0%, #6B9CFF 100%);
  --button-primary-bg-hover: linear-gradient(90deg, #3675F5 0%, #1BE0D7 100%);
  --button-primary-bg-active: linear-gradient(90deg, #1854CC 0%, #08CCC3 100%);
  --button-primary-bg-disabled: linear-gradient(270deg, rgba(125, 230, 225, 0.4) 0%, rgba(128, 170, 255, 0.4) 100%);
  --button-primary-color: rgba(16, 25, 37, 0.9);
  --button-primary-color-disabled: rgba(18, 41, 84, 0.3);
  --button-secondary-bg: rgba(0, 55, 141, 0.05);
  --button-secondary-bg-hover: rgba(15, 55, 115, 0.1);
  --button-secondary-bg-active: rgba(30, 43, 70, 0.6);
  --button-secondary-bg-disabled: rgba(0, 55, 141, 0.05);
  --button-secondary-color: rgba(16, 23, 35, 0.95);
  --button-secondary-color-disabled: rgba(18, 41, 84, 0.3);
  --button-danger-bg: #CF001A;
  --button-danger-bg-hover: #A5002F;
  --button-danger-bg-active: #8F0029;
  --button-danger-bg-disabled: rgba(207, 0, 26, 0.3);
  --button-danger-color: #ffffff;
  --button-warn-bg: #FFBD09;
  --button-warn-bg-hover: #FAAA1E;
  --button-warn-bg-active: #9E6400;
  --button-warn-bg-disabled: rgba(255, 190, 10, 0.3);
  --button-warn-color: rgba(15, 24, 36, 0.9);
  --button-warn-color-active: #FFFFFF;
  --button-oncolor-primary-bg: #ffffff;
  --button-oncolor-primary-color: rgba(16, 23, 35, 0.95);
  --button-oncolor-primary-bg-disabled: #ffffff;
  --button-oncolor-primary-color-disabled: rgba(18, 41, 84, 0.3);
  --button-oncolor-primary-bg-hover: #F2F5F9;
  --button-oncolor-primary-bg-active: #DADFE7;
  --button-oncolor-secondary-bg: rgba(34, 54, 89, 0.41);
  --button-oncolor-secondary-color: #ffffff;
  --button-oncolor-secondary-bg-disabled: rgba(34, 54, 89, 0.41);
  --button-oncolor-secondary-color-disabled: rgba(225, 234, 254, 0.58);
  --button-oncolor-secondary-bg-hover: rgba(19, 35, 67, 0.5);
  --button-oncolor-secondary-bg-active: rgba(7, 23, 49, 0.6);
  --background-object: rgba(0, 55, 141, 0.05);
  --background-object-hover: rgba(15, 55, 115, 0.1);
  --button-apply-modifiers-bg: rgba(255, 255, 255, 0.8);
  --button-apply-modifiers-bg-hover: rgba(255, 255, 255, 0.7);
  --button-apply-modifiers-bg-disabled: rgba(255, 255, 255, 0.9);
  --button-apply-modifiers-border: #4791FF;
  --button-apply-modifiers-border-hover: #5FB2FF;
  --button-apply-modifiers-border-disabled: rgba(18, 110, 248, 0.4);
  --colorblind-popup-divider: rgba(15, 54, 113, 0.1);
  --colorblind-popup-header-bg-color: #ffffff;
  --colorblind-popup-body-bg-color: #F2F5F9;
  --colorblind-popup-body-font-color: #535C6B;
  --colorblind-popup-button-color: rgba(15, 54, 113, 0.1);
  --input-border-color-focussed: #126EF8;
  --input-border-color-active: #0f1621;
  --input-border-color-hover: rgba(15, 22, 33, 0.3);
  --input-border-color-inactive: #6A7483;
  --input-border-color-error: #D35566;
  --input-bg-color-active: #ffffff;
  --input-bg-color-inactive: rgba(255, 255, 255, 0.3);
  --input-bg-color-inactive-lighter: rgba(255, 255, 255, 0.5);
  --hds-input-bg-color: #ffffff;
  --hds-input-border: rgba(34, 54, 89, 0.41);
  --hds-input-border-color-focussed: #0BC7C2;
  --hds-input-border-color-hover: rgba(19, 35, 67, 0.5);
  --hds-input-caret-color: rgba(16, 23, 35, 0.95);
  --hds-input-placeholder-color: rgba(34, 54, 89, 0.41);
  --hds-input-color: rgba(16, 23, 35, 0.95);
  --input-inner-shadow-color: rgba(0, 0, 0, 0.1);
  --input-caret-color: #126EF8;
  --input-slider-bg-color: rgba(15, 22, 33, 0.1);
  --input-slider-color: #126EF8;
  --color-picker-slider-grabber-color: #ffffff;
  --color-picker-bg-color: #3F4855;
  --color-picker-input-border-color: #8890A0;
  --color-picker-input-bg-color: #1C232E;
  --color-picker-input-color: #E9ECF2;
  --dropdown-bg-color-opened: #e7e8e9;
  --dropdown-item-color: #ffffff;
  --dropdown-item-color-selected: #e7e8e9;
  --dropdown-item-color-hover: #ffffff;
  --shadow-color: rgba(15, 22, 33, 0.4);
  --drop-shadow-gradient: linear-gradient(to bottom, rgba(233, 236, 242, 0.6) 0%, transparent 100%);
  --selected-item-marker-color: #126EF8;
  --selection-color: #126EF8;
  --selection-gradient: rgba(18, 110, 248, 0.1);
  --region-specific-color: var(--hds-purple-onlight-400);
  --region-specific-color-hover: var(--hds-purple-onlight-200);
  --region-specific-color-bg-hover: rgba(140, 107, 174, 0.8);
  --region-specific-color-bg-pressed: rgba(140, 107, 174, 0.9);
  --region-specific-icon-color: rgba(247, 250, 253, 0.2);
  --region-specific-bg-color: rgba(179, 156, 201, 0.3);
  --jp-region-specific-bg-color: #49475d;
  --notification-color: #D35566;
  --notification-error-color: #CF001A;
  --notification-warning-color: #FFBD09;
  --notification-overlay-bg-color: #3F4855;
  --notification-overlay-bg-hover-color: #535C6B;
  --notification-overlay2-bg-color: #1C232E;
  --component-highlight-color: #6A7483;
  --component-highlight-color-subdued: #A4ACBA;
  --graph-color: var(--hds-background-inverse);
  --graph-stop: var(--hds-background-inverse);
  --graph-bg: var(--hds-background-primary);
  --graph-border: var(--hds-foreground-tertiary-hover);
  --graph-border-hover: var(--hds-foreground-tertiary-press);
  --dash-color: #0f1621;
  --scrollbar-color: rgba(15, 22, 33, 0.2);
  --scrollbar-color-active: rgba(15, 22, 33, 0.2);
  --scrollbar-color-hover: rgba(15, 22, 33, 0.4);
  --slider-grabber-outline-color: rgba(218, 239, 250, 0.12);
  --slider-tick-color: rgba(15, 22, 33, 0.4);
  --chart-item-color-selected: #126EF8;
  --chart-item-color: rgba(15, 22, 33, 0.2);
  --chart-selection-bg: rgba(15, 22, 33, 0.05);
  --color-swatch-border: #272F3A;
  --inactive-color-swatch: #6A7483;
  --hover-inactive-color-swatch: #A4ACBA;
  --map-picker-color-border: rgba(15, 22, 33, 0.1);
  --map-picker-no-color-bg: rgba(255, 255, 255, 0.6);
  --code-string-color: #126EF8;
  --drop-target-color: #126EF8;
  --path-type-color-text: #000;
  --path-type-color-scheme: #000;
  --path-type-color-layer: rgba(255, 255, 255, 0.1);
  --path-type-color-condition: rgba(255, 255, 255, 0.2);
  --path-type-color-styleset: #2E468F;
  --path-type-color-style: #2C48A1;
  --path-type-color-attribute: rgba(15, 22, 33, 0.4);
  --path-type-color-definition: #52A3DB;
  --path-type-color-subcondition: #3A7BDB;
  --path-type-color-zoomlevel: #000;
  --path-type-color-height: #000;
  --image-picker-popup-color: #ffffff;
  --grid-placement-hover: rgba(15, 22, 33, 0.6);
  --grid-placement-selected: #126EF8;
  --grid-placement-selected-secondary: rgba(18, 110, 248, 0.8);
  --grid-placement-unselected: rgba(15, 22, 33, 0.1);
  --tag-pill-bg-color: #ffffff;
  --tag-pill-included: #00C78F;
  --tag-pill-excluded: #EC610E;
  --help-bg-color: #D468A0;
  --bg-dashboard-item: #ffffff;
  --tooltip-bg: var(--hds-background-inverse);
  --tooltip-text: var(--hds-inverse-primary);
  --menu-bar-bg: rgba(255, 255, 255, 0.95);
  --menu-bar-bg-hover: rgba(0, 55, 141, 0.05);
  --menu-bar-item-description-color: #A4ACBA;
  --notification-info-bg: #15BDB9;
  --notification-warning-bg: #92600C;
  --notification-confirmation-bg: #0A7651;
  --notification-error-bg: #840B2E;
  --backgrounds-background-object: rgba(218, 239, 250, 0.12);
  --modifier-header-bg: var(--hds-aqua-onlight-400);
  --modifier-preset-border: #e7ebf1;
  --modifier-dot--default-state: var(--hds-accent);
  --modifier-dot--hover-state: var(--hds-aqua-onlight-500);
  --modifier-overlay-panel-preset-bg: #EDFBFA;
  --modifier-overlay-panel-create-apply-modifiers-bg: #F6FDFD;
  --modifier-overlay-panel-create-modifiers-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.08);
  --modifier-overlay-panel-create-apply-modifiers-active-bg: rgba(95, 178, 255, 0.2);
  --modifier-overlay-panel-drag-drop-box-bg: rgba(64, 71, 82, 0.5);
  --modifier-overlay-active-bg: #e3e6eb99;
  --modifier-overlay-active-header-bg: #dddfe466;
  --modifier-overlay-active-border: #CED4DF;
  --modifier-overlay-header-bg: #00378f08;
  --scheme-selector-bar-bg: #dae6fa;
  --scheme-selector-shadow: 0px 0px 2px 0px var(--Dropshadow-overlay-dropshadow-layer-A-overlay, rgba(0, 25, 75, 0.12)), 0px 6px 6px 0px var(--Dropshadow-overlay-dropshadow-layer-B-overlay, rgba(0, 25, 75, 0.06)), 0px 0px 21px 0px var(--Dropshadow-overlay-dropshadow-layer-C-overlay, rgba(0, 25, 75, 0.05)), 0px 13px 13px 0px var(--Dropshadow-overlay-dropshadow-layer-D-overlay, rgba(0, 25, 75, 0.08));
  --quick-tour-highlight: var(--hds-blue-ondark-400);
  --file-entity-bg-hover: var(--hds-blue-onlight-400-010);
  --file-entity-bg-selected: var(--hds-blue-onlight-400-020);
  --thumbnail-border-color: var(--hds-foreground-divider);
  cursor: default;
  box-shadow: 0 1px 4px 0 var(--shadow-color);
  --divider-color-override: var(--bg-color-popup-divider);
  background-color: var(--popup-color, var(--bg-color-popup));
  border: var(--border-size) solid var(--border-color);
  border-radius: var(--popup-border-radius);
  z-index: 9;
  font-family: var(--font-family);
  font-size: var(--text-size);
  color: var(--font-color-group-item);
  --icon-color: var(--font-color-group-item);
  line-height: var(--line-height);
  color: var(--font-color-inactive-item-text);
  --icon-color: var(--font-color-inactive-item-text);
  box-sizing: border-box;
  position: absolute;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--bg-window);
  width: var(--width);
  max-width: calc(100vw - calc(4 * var(--base-padding)));
  --half-width: calc(var(--width) / 2);
  left: calc(50% - var(--half-width));
  height: var(--height);
  --half-height: calc(var(--height) / 2);
  top: calc(50% - var(--half-height));
  --width: var(--extra-small-window-width);
  --height: var(--extra-small-window-height);
  max-height: var(--white-popup-max-height);
  height: auto;
  min-width: var(--width);
}
.white-dialog-window > *:not(:last-child) {
  box-shadow: inset 0px -1px 0px #DFE4EB;
}
.white-dialog-window-header {
  font-family: var(--font-family-emphasized);
  font-size: var(--text-size-dialog);
  line-height: var(--line-height-dialog-header);
  color: var(--font-color-dialog);
  --icon-color: var(--font-color-dialog);
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  z-index: 13;
  padding: 0 var(--popup-padding-h);
  height: var(--popup-header-height);
}
.white-dialog-window-header > *:not(:first-child) {
  margin-left: calc(2 * var(--base-padding));
}
.white-dialog-window-content {
  font-family: var(--font-family);
  font-size: var(--text-size-dialog);
  line-height: var(--line-height-dialog-content);
  color: var(--font-color-dialog);
  --icon-color: var(--font-color-dialog);
  padding: var(--popup-padding-v) var(--popup-padding-h);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.white-dialog-window-footer {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  height: var(--popup-footer-height);
}
.display-warning-icon {
  --icon-color-emphasized: var(--warning-icon-color-hover);
  --icon-color: var(--warning-icon-color);
}
.error-icon {
  --icon-color: var(--error-icon-color);
}
.error-window-button-icon {
  margin-right: calc(2 * var(--base-padding));
}
.error-splash {
  --base-padding: 4px;
  --half-panel-margin: 1px;
  --panel-margin: 2px;
  --panel-body-border-radius: 4px;
  --panel-header-border-radius: 5px;
  --font-family: "Fira Regular";
  --font-family-subdued: "Fira Light";
  --font-family-emphasized: "Fira Medium";
  --text-size-dashboard-title: 18px;
  --text-size-dashboard-section-title: 16px;
  --text-size-dashboard-description: 16px;
  --text-size-big: 16px;
  --text-size-big-button: 14px;
  --text-size-big-input: 14px;
  --text-size-menu: 12px;
  --text-size-dialog: 14px;
  --text-size: 12px;
  --text-size-tiny: 10px;
  --text-size-super-tiny: 8px;
  --text-size-drag-and-drop-title: 20px;
  --text-size-dialog-big: 18px;
  --line-height-tiny: 12px;
  --line-height-menu: 16px;
  --line-height: 20px;
  --header-line-height: 24px;
  --line-height-dashboard-title: 26px;
  --line-height-dashboard-section-title: 24px;
  --line-height-dashboard-description: 24px;
  --line-height-drag-and-drop-title: 24px;
  --line-height-dialog-header: 16px;
  --line-height-dialog-content: 20px;
  --divider-thickness: 1px;
  --divider-spacing: 0px;
  --divider-padding: calc(4 * var(--base-padding));
  --popup-border-radius: 4px;
  --popup-border-radius-large: 8px;
  --popup-item-height-large: 40px;
  --popup-menu-width: 200px;
  --popup-footer-height: 64px;
  --popup-header-height: 64px;
  --popup-padding-h: 24px;
  --popup-padding-v: 20px;
  --white-popup-max-height: 280px;
  --popup-description-height: 200px;
  --popup-item-selection-height: 2px;
  --popup-image-width: 400px;
  --popup-image-height: 175px;
  --border-size: 1px;
  --border-size-highlighted: 2px;
  --border-radius: 4px;
  --button-icon-spacing: 8px;
  --input-height: 22px;
  --input-width: 93px;
  --number-input-width: var(--input-width);
  --file-input-width: var(--input-width);
  --dash-input-width: 125px;
  --input-prefix-width: 6px;
  --input-prefix-left-padding: 5px;
  --input-border-radius: 2px;
  --input-border-size: 1px;
  --input-padding: 4px;
  --input-icon-padding: 6px;
  --input-disabled-opacity: 0.5;
  --boolean-input-height: 16px;
  --sliding-toggle-height: 20px;
  --sliding-toggle-width: 40px;
  --input-animation-duration: 300ms;
  --input-animation-duration-quick: 100ms;
  --item-border-radius: 2px;
  --reduced-item-height: 28px;
  --main-item-height: 35px;
  --large-main-item-height: 48px;
  --icon-button-group-height: 28px;
  --icon-box-size: 16px;
  --icon-text-inline-size: var(--text-size);
  --icon-header-size: var(--header-line-height);
  --icon-big-size: 40px;
  --icon-padding-size: calc(2 * var(--base-padding));
  --tooltip-text-size: 13px;
  --tooltip-line-height: 18px;
  --tooltip-nibble-size: 6px;
  --tooltip-nibble-indentation: 18px;
  --tooltip-width: 200px;
  --tooltip-width-wide: 320px;
  --selected-item-selection-bar-width: 3px;
  --selected-group-item-selection-bar-width: 4px;
  --inactive-item-opacity: 0.4;
  --graph-width: 2px;
  --zoomlevel-line-width: 1px;
  --collapsible-margin: 12px;
  --scrollbar-width: 8px;
  --scrollbar-expanded-grabber-width: 6px;
  --scrollbar-grabber-width: 4px;
  --map-overlay-margin: 12px;
  --map-overlay-item-size: 40px;
  --menubar-size: 48px;
  --menubar-title-width: 300px;
  --menubar-select-menu-width: 150px;
  --menubar-icon-size: 32px;
  --menubar-lang-dropdown-height: 400px;
  --menubar-notification-dot-size: 8px;
  --menubar-scheme-selection-item-label-width: 200px;
  --search-field-height: 25px;
  --panel-small-width: 230px;
  --panel-width: 300px;
  --panel-large-width: 360px;
  --panel-tab-height: 25px;
  --panel-empty-content-top-offset: 200px;
  --panel-header-button-size: 20px;
  --slider-width: 4px;
  --slider-length: 82px;
  --slider-grabber-size: 14px;
  --slider-tick-length: 2px;
  --slider-tick-width: 1px;
  --slider-tick-offset: 1px;
  --navigation-bar-size: 40px;
  --drag-item-divider-height: 1px;
  --drag-item-divider-end-size: 5px;
  --notification-container-height: 32px;
  --notification-toast-height: 56px;
  --notification-animation-curve: cubic-bezier(0.7, 0, 0.5, 1.5);
  --notification-animation-duration: 200ms;
  --color-picker-height: 150px;
  --color-picker-crosshair-size: 15px;
  --color-picker-input-width: 70px;
  --color-picker-slider-track-height: 8px;
  --color-picker-slider-handle-size: 12px;
  --color-picker-container-width: 320px;
  --color-picker-eyedrop-size: 24px;
  --icon-picker-container-width: 254px;
  --icon-picker-container-height: 318px;
  --icon-picker-icon-size: 24px;
  --swatch-height: 22px;
  --swatch-width: 50px;
  --ga-blend-mode-btn-width: 52px;
  --basic-template-thumbnail-height: 40px;
  --basic-template-thumbnail-width: 56px;
  --basic-template-thumbnail-border: 2px;
  --basic-template-thumbnail-border-offset: 1px;
  --window-header-height: 73px;
  --extra-small-window-width: 468px;
  --extra-small-window-height: 212px;
  --small-window-width: 460px;
  --small-window-height: 280px;
  --medium-window-width: 380px;
  --medium-window-height: 320px;
  --big-window-width: 640px;
  --big-window-height: 520px;
  --wide-big-window-width: 720px;
  --wide-big-window-height: 520px;
  --wide-extra-big-window-width: 950px;
  --wide-extra-big-window-height: 520px;
  --fluid-window-height: calc(100vh - 200px);
  --fluid-window-width: calc(100vw - 512px);
  --search-bar-height: 50px;
  --icon-window-drag-area-height: 310px;
  --medium-area-height: 100px;
  --big-area-height: 180px;
  --extra-big-area-height: 320px;
  --icon-window-area-height: 393px;
  --drop-target-outline-size: 1px;
  --drop-target-outline-offset: 1px;
  --image-picker-crosshair-size: 8px;
  --image-picker-border-size: 2px;
  --icon-window-side-bar-width: 207px;
  --icon-window-icon-entity-width: 77px;
  --icon-window-icon-entity-height: 88px;
  --icon-window-icon-entity-background-size: 48px;
  --icon-window-icon-entity-background-size-small: 24px;
  --icon-window-change-view-header: 32px;
  --icon-window-change-item-text-width: 100px;
  --icon-window-change-item-indentation: 53px;
  --icon-window-resource-view-header: 64px;
  --icon-window-name-pill-container-width: 240px;
  --icon-window-name-pill-border-radius: 16px;
  --icon-window-item-border-width: 2px;
  --icon-window-notification-height: 32px;
  --medium-button-height: 24px;
  --button-height: 32px;
  --large-button-height: 40px;
  --dashboard-item-width: 340px;
  --dashboard-item-height: 160px;
  --dashboard-thumbnail-height: 176px;
  --dashboard-input-height: 32px;
  --component-highlight-thickness: 2px;
  --modifier-group-item-indentation: 24px;
  --region-specific-bar-width: 2px;
  --region-specific-bar-height: 16px;
  --modifier-affected-specific-margin: -20px;
  --modifier-affected-specific-tooltip-width: 296px;
  --tooltip-content-max-width: 225px;
  --modifier-overlay-panel-header-height: 38px;
  --drag-item-divider: #126EF8;
  --drag-item-highlight: #0f1621;
  --font-color-highlighted: #126EF8;
  --font-color-highlighted-emphasized: #d0e2fe;
  --font-color-emphasized: #ffffff;
  --font-color-active: #E9ECF2;
  --font-color: #CCD1DB;
  --font-color-subdued: #B8BFCC;
  --font-color-hint: var(--hds-gray-400);
  --font-color-disabled: #6A7483;
  --main-button-font-color: #CCD1DB;
  --main-button-font-color-emphasized: #ffffff;
  --font-color-menu: #CCD1DB;
  --font-color-tooltip: #ffffff;
  --font-color-group-item: #E9ECF2;
  --font-color-dialog: #FFFFFF;
  --font-color-oncolor: #ffffff;
  --font-color-oncolor-hover: rgba(247, 250, 253, 0.98);
  --font-color-oncolor-subdued: #333B47;
  --font-color-apply-modifier-btn: #DADFE7;
  --font-color-apply-modifier-btn-hover: #E9ECF2;
  --font-color-panel-notification: #E9ECF2;
  --disabled-item-group-text-color: #6A7483;
  --font-color-inactive-item-text: #CCD1DB;
  --font-color-item-text-hover: #ffffff;
  --font-color-hds-tertiary: rgba(225, 234, 254, 0.58);
  --font-color-hds-tertiary-hover: rgba(234, 241, 255, 0.7);
  --font-color-hds-tertiary-disabled: rgba(195, 205, 222, 0.35);
  --font-color-body: rgba(238, 242, 252, 0.83);
  --font-color-primary: rgba(242, 246, 252, 0.95);
  --font-color-primary-disabled: rgba(225, 234, 254, 0.58);
  --font-color-secondary: rgba(232, 239, 252, 0.78);
  --font-color-secondary-disabled: rgba(217, 231, 251, 0.45);
  --header-icon-color: rgba(255, 255, 255, 0.6);
  --active-icon-color: #E9ECF2;
  --active-icon-color-inverted: #000;
  --inactive-icon-color: #6A7483;
  --hint-icon-color: #A4ACBA;
  --disabled-icon-color: #6A7483;
  --action-icon-color: #B8BFCC;
  --disabled-action-icon-color: #6A7483;
  --error-icon-color: #CF001A;
  --warning-icon-color: #EDB41B;
  --warning-icon-color-hover: #E9A32D;
  --toggle-button-icon-color: #A4ACBA;
  --hover-toggle-button-icon-color: #CCD1DB;
  --inactive-icon-border-color: #6A7483;
  --icon-bg-hover-color: #4E5663;
  --modifier-input-hover-border-color: #B8BFCC;
  --panel-header-button-bg: #1b222c;
  --panel-tab-bg-unselected: rgba(15, 22, 33, 0.8);
  --divider-color: #333B47;
  --divider-color-ondark: rgba(255, 255, 255, 0.2);
  --sub-item-box-border-color: transparent;
  --sub-item-box-bg-color: #1C232E;
  --bg-color-ui: #161A22;
  --bg-color-panel-base: #1b222c;
  --bg-color-panel-content: #272d37;
  --bg-color-modifier-panel-content: #1C232E;
  --bg-color-panel-section: #3F4855;
  --bg-color-content: rgba(15, 22, 33, 0.4);
  --bg-color-item: #272F3A;
  --bg-color-item-selected: #1C232E;
  --bg-color-panel-dark: #0E1520;
  --bg-color-panel-header-dark: #1C232E;
  --bg-color-panel-section-dark: #333B47;
  --bg-color-panel-group-item-selected: #0E1520;
  --border-color-panel-item: #0E1520;
  --bg-color-item-highlighted: #333B47;
  --bg-color-item-header: #3f454d;
  --bg-color-button-group: #0E1520;
  --blur-popup-color: rgba(8, 23, 52, 0.6);
  --bg-color-popup: #0f1621;
  --bg-color-popup-item-hover: #126EF8;
  --bg-color-popup-divider: rgba(255, 255, 255, 0.2);
  --bg-window: #272d37;
  --bg-hds-secondary: #1C232E;
  --bg-window-content: rgba(15, 22, 33, 0.4);
  --bg-white-window-content: #ffffff;
  --bg-global-adjustments: #272F3A;
  --bg-window-header: #272F3A;
  --bg-global-adjustments: rgba(255, 255, 255, 0.9);
  --bg-color-inline-box: rgba(15, 22, 33, 0.4);
  --bg-color-empty-thumbnail: #333B47;
  --border-color: rgba(255, 255, 255, 0.1);
  --border-color-highlighted: #CCD1DB;
  --bg-selected-item: var(--hds-blue-ondark-600-020);
  --main-button-color: #126EF8;
  --main-button-color-hover: #0D5ED9;
  --action-text-button: #5FB2FF;
  --action-text-button-hover: #85C4FF;
  --normal-button-bg-color: rgba(0, 10, 25, 0.8);
  --normal-button-bg-color-hover: rgba(0, 10, 25, 0.8);
  --button-primary-bg: linear-gradient(270deg, #1BE0D7 0%, #3675F5 100%);
  --button-primary-bg-hover: linear-gradient(90deg, #6B9CFF 0%, #65EBE2 100%);
  --button-primary-bg-active: linear-gradient(90deg, #8FB4FF 0%, #85EFE8 100%);
  --button-primary-bg-disabled: linear-gradient(270deg, rgba(27, 224, 215, 0.6) 0%, rgba(54, 117, 245, 0.6) 100%);
  --button-primary-color: rgba(0, 10, 26, 0.8);
  --button-primary-color-disabled: rgba(217, 231, 251, 0.45);
  --button-secondary-bg: rgba(223, 239, 250, 0.12);
  --button-secondary-bg-hover: rgba(195, 207, 223, 0.2);
  --button-secondary-bg-active: rgba(201, 214, 232, 0.26);
  --button-secondary-bg-disabled: rgba(223, 239, 250, 0.12);
  --button-secondary-color: rgba(242, 246, 252, 0.95);
  --button-secondary-color-disabled: rgba(217, 231, 251, 0.45);
  --button-danger-bg: #840B2E;
  --button-danger-bg-hover: #990C34;
  --button-danger-bg-active: #E94F63;
  --button-danger-bg-disabled: rgba(233, 79, 99, 0.3);
  --button-danger-color: #ffffff;
  --button-warn-bg: #92600C;
  --button-warn-bg-hover: #E9A32D;
  --button-warn-bg-active: #92600C;
  --button-warn-bg-disabled: rgba(237, 181, 29, 0.3);
  --button-warn-color: rgba(15, 24, 36, 0.9);
  --button-warn-color-active: #FFFFFF;
  --button-oncolor-primary-bg: #1C232E;
  --button-oncolor-primary-color: rgba(242, 246, 252, 0.95);
  --button-oncolor-primary-bg-disabled: #1C232E;
  --button-oncolor-primary-color-disabled: rgba(217, 231, 251, 0.45);
  --button-oncolor-primary-bg-hover: #272F3A;
  --button-oncolor-primary-bg-active: #333B47;
  --button-apply-modifiers-bg: #333B47;
  --button-oncolor-secondary-bg: rgba(225, 234, 254, 0.58);
  --button-oncolor-secondary-color: rgba(0, 10, 26, 0.8);
  --button-oncolor-secondary-bg-disabled: rgba(225, 234, 254, 0.58);
  --button-oncolor-secondary-color-disabled: rgba(18, 41, 84, 0.3);
  --button-oncolor-secondary-bg-hover: rgba(234, 241, 255, 0.7);
  --button-oncolor-secondary-bg-active: rgba(237, 242, 252, 0.85);
  --button-apply-modifiers-bg-hover: #3F4855;
  --button-apply-modifiers-bg-disabled: #272F3A;
  --background-object: rgba(223, 239, 250, 0.12);
  --background-object-hover: rgba(195, 207, 223, 0.2);
  --button-apply-modifiers-bg: rgba(255, 255, 255, 0.8);
  --button-apply-modifiers-bg-hover: rgba(255, 255, 255, 0.7);
  --button-apply-modifiers-bg-disabled: rgba(255, 255, 255, 0.9);
  --button-apply-modifiers-border: #4791FF;
  --button-apply-modifiers-border-hover: #5FB2FF;
  --button-apply-modifiers-border-disabled: rgba(18, 110, 248, 0.4);
  --colorblind-popup-divider: rgba(218, 239, 250, 0.12);
  --colorblind-popup-header-bg-color: #0f1621;
  --colorblind-popup-body-bg-color: #1C232E;
  --colorblind-popup-body-font-color: #B8BFCC;
  --colorblind-popup-button-color: rgba(218, 239, 250, 0.12);
  --input-border-color-focussed: #126EF8;
  --input-border-color-active: #8890A0;
  --input-border-color-hover: #B8BFCC;
  --input-border-color-inactive: #6A7483;
  --input-border-color-error: #D35566;
  --input-bg-color-active: #1C232E;
  --input-bg-color-inactive: #272F3A;
  --input-bg-color-inactive-lighter: rgba(255, 255, 255, 0.1);
  --hds-input-bg-color: #1C232E;
  --hds-input-border: rgba(225, 234, 254, 0.58);
  --hds-input-border-color-focussed: #15BDB9;
  --hds-input-border-color-hover: rgba(234, 241, 255, 0.7);
  --hds-input-caret-color: rgba(242, 246, 252, 0.95);
  --hds-input-placeholder-color: rgba(225, 234, 254, 0.58);
  --hds-input-color: rgba(242, 246, 252, 0.95);
  --input-inner-shadow-color: rgba(0, 0, 0, 0.1);
  --input-caret-color: #126EF8;
  --input-slider-bg-color: rgba(255, 255, 255, 0.1);
  --input-slider-color: #126EF8;
  --slider-input-border-color: #8890A0;
  --slider-input-selected-border-color: #8890A0;
  --color-picker-slider-grabber-color: #ffffff;
  --color-picker-bg-color: #3F4855;
  --color-picker-input-border-color: #8890A0;
  --color-picker-input-bg-color: #333B47;
  --color-picker-input-color: #E9ECF2;
  --dropdown-bg-color-opened: #0f1621;
  --dropdown-item-color: #0f1621;
  --dropdown-item-color-selected: #272d37;
  --dropdown-item-color-hover: #0f1621;
  --shadow-color: rgba(15, 22, 33, 0.4);
  --drop-shadow-gradient: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, transparent 100%);
  --selected-item-marker-color: #126EF8;
  --selection-color: #126EF8;
  --selection-gradient: rgba(18, 110, 248, 0.1);
  --region-specific-color: var(--hds-purple-onlight-200);
  --region-specific-color-hover: var(--hds-purple-onlight-400);
  --region-specific-color-bg-hover: rgba(179, 156, 201, 0.8);
  --region-specific-color-bg-pressed: rgba(179, 156, 201, 0.9);
  --region-specific-bg-color: rgba(179, 156, 201, 0.3);
  --region-specific-icon-color: rgba(179, 156, 201, 0.4);
  --jp-region-specific-bg-color: #e8e1ef;
  --notification-color: #D35566;
  --notification-error-color: #CF001A;
  --notification-warning-color: #FFBD09;
  --notification-overlay-bg-color: #3F4855;
  --notification-overlay-bg-hover-color: #535C6B;
  --notification-overlay2-bg-color: #1C232E;
  --component-highlight-color: #A4ACBA;
  --component-highlight-color-subdued: #535C6B;
  --graph-color: var(--hds-background-inverse);
  --graph-stop: var(--hds-background-inverse);
  --graph-bg: transparent;
  --graph-border: var(--hds-foreground-tertiary-hover);
  --graph-border-hover: var(--hds-foreground-tertiary-press);
  --dash-color: #ffffff;
  --scrollbar-color: #333B47;
  --scrollbar-color-active: rgba(255, 255, 255, 0.2);
  --scrollbar-color-hover: rgba(255, 255, 255, 0.4);
  --slider-grabber-outline-color: transparent;
  --slider-tick-color: rgba(255, 255, 255, 0.4);
  --chart-item-color-selected: #126EF8;
  --chart-item-color: rgba(255, 255, 255, 0.2);
  --chart-selection-bg: rgba(255, 255, 255, 0.05);
  --color-swatch-border: #A4ACBA;
  --inactive-color-swatch: #6A7483;
  --map-picker-color-border: rgba(255, 255, 255, 0.1);
  --map-picker-no-color-bg: rgba(15, 22, 33, 0.6);
  --code-string-color: #126EF8;
  --drop-target-color: #126EF8;
  --path-type-color-text: #000;
  --path-type-color-scheme: #000;
  --path-type-color-layer: rgba(255, 255, 255, 0.1);
  --path-type-color-condition: rgba(255, 255, 255, 0.2);
  --path-type-color-styleset: #2E468F;
  --path-type-color-style: #2C48A1;
  --path-type-color-attribute: rgba(15, 22, 33, 0.4);
  --path-type-color-definition: #52A3DB;
  --path-type-color-subcondition: #3A7BDB;
  --path-type-color-zoomlevel: #000;
  --path-type-color-height: #000;
  --image-picker-popup-color: #ffffff;
  --grid-placement-hover: rgba(255, 255, 255, 0.6);
  --grid-placement-selected: #126EF8;
  --grid-placement-selected-secondary: rgba(18, 110, 248, 0.8);
  --grid-placement-unselected: rgba(255, 255, 255, 0.1);
  --tag-pill-bg-color: #0f1621;
  --tag-pill-included: #00A870;
  --tag-pill-excluded: #D35566;
  --help-bg-color: #D468A0;
  --bg-dashboard-item: #0f1621;
  --tooltip-bg: var(--hds-background-inverse);
  --tooltip-text: var(--hds-inverse-primary);
  --menu-bar-bg: #1C232E;
  --menu-bar-bg-hover: rgba(223, 239, 250, 0.12);
  --menu-bar-item-description-color: #A4ACBA;
  --notification-info-bg: #15BDB9;
  --notification-warning-bg: #92600C;
  --notification-confirmation-bg: #0A7651;
  --notification-error-bg: #840B2E;
  --backgrounds-background-object: rgba(218, 239, 250, 0.12);
  --modifier-dot--default-state: var(--hds-accent);
  --modifier-dot--hover-state: var(--hds-aqua-onlight-500);
  --modifier-header-bg: var(--hds-aqua-ondark-200);
  --modifier-preset-border: #343c46;
  --modifier-overlay-panel-preset-bg: #20353E;
  --modifier-overlay-panel-create-apply-modifiers-bg: #1E2C36;
  --modifier-overlay-panel-create-modifiers-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  --modifier-overlay-panel-create-apply-modifiers-active-bg: rgba(95, 178, 255, 0.2);
  --modifier-overlay-panel-drag-drop-box-bg: rgba(64, 71, 82, 0.5);
  --modifier-overlay-active-bg: #4b556399;
  --modifier-overlay-active-header-bg: #535d6c66;
  --modifier-overlay-active-border: #5D6875;
  --modifier-overlay-header-bg: rgba(234, 240, 250, 0.03);
  --scheme-selector-bar-bg: #1f364d;
  --scheme-selector-shadow: 0px 0px 2px 0px var(--Dropshadow-overlay-dropshadow-layer-A-overlay, rgba(0, 0, 0, 0.36)), 0px 6px 6px 0px var(--Dropshadow-overlay-dropshadow-layer-B-overlay, rgba(0, 0, 0, 0.18)), 0px 0px 21px 0px var(--Dropshadow-overlay-dropshadow-layer-C-overlay, rgba(0, 0, 0, 0.15)), 0px 13px 13px 0px var(--Dropshadow-overlay-dropshadow-layer-D-overlay, rgba(0, 0, 0, 0.24));
  --quick-tour-highlight: var(--hds-action);
  --file-entity-bg-hover: var(--hds-blue-ondark-600-015);
  --file-entity-bg-selected: var(--hds-blue-ondark-600-020);
  --thumbnail-border-color: var(--hds-foreground-secondary);
  background-color: var(--bg-color-ui);
  height: 100vh;
  width: 100vw;
}
.error-splash > h1 {
  font-family: var(--font-family);
  font-size: var(--text-size-tiny);
  line-height: var(--line-height-menu);
  color: var(--font-color);
  line-height: 100vh;
  text-align: center;
}
.tag-selector {
  display: flex;
  flex-direction: row;
  height: 26px;
}
.tag-selector-filter-selector-container {
  width: 1px;
  flex-grow: 1;
  margin-left: var(--base-padding);
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.tag-selector-visible-enums-container {
  flex-grow: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
}
.tag-selector-filter {
  display: flex;
  padding: var(--base-padding) 0;
  flex-shrink: 0;
  flex-direction: column;
}
.tag-selector-filter-combo-container {
  width: 100%;
  display: flex;
}
.tag-selector-filter-combo-container > *:first-child {
  flex-grow: 1;
  margin-right: var(--base-padding);
}
.tag-selector-filter-dot {
  --size: var(--base-padding);
  --shadow-size: calc(var(--size) / 6);
  width: var(--size);
  height: var(--size);
  overflow: hidden;
  border-radius: calc(var(--size) / 2);
  flex-shrink: 0;
  background-color: #D468A0;
  position: relative;
  right: 22px;
  top: calc(var(--base-padding) / 2);
  margin-right: calc(-1 * var(--base-padding));
}
.tag-selector-tag-container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin: calc(var(--base-padding) / -2) calc(calc(2 * var(--base-padding)) / -2);
  margin-top: calc(2 * var(--base-padding));
}
.tag-selector-tag-container > * {
  margin: calc(var(--base-padding) / 2) calc(calc(2 * var(--base-padding)) / 2);
}
.tag-selector-header {
  display: flex;
  align-items: center;
  flex-grow: 1;
}
.tag-selector-tag {
  font-family: var(--font-family);
  font-size: var(--text-size);
  color: var(--font-color-group-item);
  --icon-color: var(--font-color-group-item);
  line-height: var(--line-height);
  color: var(--font-color-inactive-item-text);
  --icon-color: var(--font-color-inactive-item-text);
  max-width: 100%;
  height: var(--line-height);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  border-radius: var(--line-height);
  background-color: var(--tag-pill-bg-color);
  padding-left: calc(2 * var(--base-padding));
  padding-right: calc((var(--line-height) - var(--icon-text-inline-size)) / 2);
}
.tag-selector-tag-clickable {
  font-family: var(--font-family);
  font-size: var(--text-size);
  color: var(--font-color-group-item);
  --icon-color: var(--font-color-group-item);
  line-height: var(--line-height);
  color: var(--font-color-inactive-item-text);
  --icon-color: var(--font-color-inactive-item-text);
  max-width: 100%;
  height: var(--line-height);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  border-radius: var(--line-height);
  background-color: var(--tag-pill-bg-color);
  padding-left: calc(2 * var(--base-padding));
  padding-right: calc((var(--line-height) - var(--icon-text-inline-size)) / 2);
  cursor: pointer;
  user-select: none;
}
.tag-negative {
  color: var(--tag-pill-excluded);
}
.tag-positive {
  color: var(--tag-pill-included);
}
.tag-flag {
  color: var(--tag-pill-included);
}
.tag-selector-tag-label {
  flex-shrink: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tag-selector-tag-icon {
  background-color: var(--icon-color, var(--font-color));
  flex-shrink: 0;
  width: var(--icon-box-size);
  height: var(--icon-box-size);
  width: var(--icon-text-inline-size);
  height: var(--icon-text-inline-size);
  cursor: pointer;
  user-select: none;
  margin-left: calc(2 * var(--base-padding));
}
.tag-selector-clear-all {
  cursor: pointer;
  user-select: none;
  line-height: var(--header-line-height);
  border-radius: var(--item-border-radius);
  display: flex;
  flex-shrink: 0;
}
.tag-selector-add {
  cursor: pointer;
  user-select: none;
  line-height: var(--header-line-height);
  border-radius: var(--item-border-radius);
}
.tag-selector-add-popup {
  box-shadow: 0 1px 4px 0 var(--shadow-color);
  --divider-color-override: var(--bg-color-popup-divider);
  background-color: var(--popup-color, var(--bg-color-popup));
  border: var(--border-size) solid var(--border-color);
  border-radius: var(--popup-border-radius);
  z-index: 9;
}
.tag-selector-add-property {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  height: var(--header-line-height);
  padding: 0 calc(2 * var(--base-padding));
  font-family: var(--font-family);
  font-size: var(--text-size-menu);
  line-height: var(--line-height);
  color: var(--font-color-secondary);
  --icon-color: var(--font-color-secondary);
  padding: 0 calc(4 * var(--base-padding));
  height: var(--popup-item-height-large);
  display: flex;
  align-items: center;
}
.tag-selector-add-property:hover {
  background-color: var(--bg-color-popup-item-hover);
  font-family: var(--font-family);
  font-size: var(--text-size-menu);
  line-height: var(--line-height);
  color: var(--font-color-primary);
  --icon-color: var(--font-color-secondary);
}
.tag-selector-add-property > *:not(:first-child) {
  margin-left: calc(4 * var(--base-padding));
}
.tag-selector-add-property-label {
  font-family: var(--font-family);
  font-size: var(--text-size-menu);
  line-height: var(--line-height);
  color: var(--font-color-primary);
  --icon-color: var(--font-color-secondary);
  flex-grow: 1;
}
.tag-selector-add-property-icon {
  background-color: var(--icon-color, var(--font-color));
  flex-shrink: 0;
  width: var(--icon-box-size);
  height: var(--icon-box-size);
}
.base-tag {
  --tag-height: var(--line-height);
  border-radius: var(--tag-height);
  background-color: var(--normal-button-bg-color);
  display: flex;
  align-items: center;
  padding: 0 calc(2 * var(--base-padding));
}
.tag-disabled-style {
  opacity: var(--input-disabled-opacity);
  pointer-events: none;
  cursor: default;
}
.tag-highlighted-style {
  background-color: var(--normal-button-bg-color-hover);
}
.tag-clickable {
  cursor: pointer;
  user-select: none;
}
.tag-on-hover:hover {
  color: var(--font-color-emphasized);
}
.tag-label {
  font-family: var(--font-family);
  font-size: var(--text-size-tiny);
  color: var(--font-color);
  --icon-color: var(--font-color);
  line-height: var(--line-height-tiny);
}
.tag-icon-container {
  display: flex;
}
.tag-icon {
  cursor: pointer;
  user-select: none;
  margin-left: var(--base-padding);
}
.camera-settings-overlay {
  position: relative;
}
.camera-settings-popover {
  display: flex;
  align-items: flex-end;
  z-index: 9;
  position: absolute;
  right: 100%;
  bottom: 0;
}
.camera-settings-card {
  max-height: 316px;
  position: absolute;
  right: 115%;
  min-width: 264px;
}
@media screen and (max-height: 899px) {
  .camera-settings-card-pos {
    bottom: 0;
  }
}
@media screen and (min-height: 900px) {
  .camera-settings-card-pos {
    top: 0;
  }
}
.camera-settings-container {
  min-width: 264px;
}
.camera-settings-header {
  display: flex;
  align-items: center;
  gap: var(--hds-spacing-2);
  padding: var(--hds-spacing-2);
  margin-bottom: calc(2 * var(--hds-spacing-1px));
  border-top-left-radius: var(--hds-border-radius);
  border-top-right-radius: var(--hds-border-radius);
  background-color: var(--hds-background-primary);
}
.camera-settings-popover-nibble {
  margin-left: calc(var(--tooltip-nibble-size));
  --nibble-color: var(--tooltip-bg);
  margin-top: 0px;
  margin-bottom: calc(var(--map-overlay-item-size) / 2 - var(--tooltip-nibble-size));
}
.camera-settings-button {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  --icon-color: var(--header-icon-color);
  width: var(--map-overlay-item-size);
  height: var(--map-overlay-item-size);
  border-radius: calc(var(--map-overlay-item-size) / 2);
  box-sizing: border-box;
  border: 1px solid #3F4855;
  box-shadow: 0 1px 4px 0 var(--shadow-color);
  background-color: var(--bg-color-panel-content);
}
.camera-settings-button-selected {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  --icon-color: var(--header-icon-color);
  width: var(--map-overlay-item-size);
  height: var(--map-overlay-item-size);
  border-radius: calc(var(--map-overlay-item-size) / 2);
  box-sizing: border-box;
  border: 1px solid #3F4855;
  box-shadow: 0 1px 4px 0 var(--shadow-color);
  background-color: var(--bg-color-panel-content);
  background-color: var(--selection-color);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--font-color-emphasized);
  --icon-color: var(--font-color-emphasized);
}
.camera-settings-button:hover,
.camera-settings-button-selected:hover {
  --icon-color: var(--font-color-emphasized);
}
.camera-settings-row {
  background-color: var(--hds-background-secondary);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: calc(var(--hds-spacing-3) - 2px) var(--hds-spacing-2);
  border-bottom: 1px solid var(--hds-foreground-divider);
}
.camera-settings-row:last-of-type {
  border-bottom-left-radius: var(--hds-border-radius);
  border-bottom-right-radius: var(--hds-border-radius);
  border-bottom: none;
}
.camera-settings-row hds-toggle {
  margin-right: calc(-1 * var(--hds-spacing-2));
}
.camera-settings-row-column-layout {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.camera-settings-half-row {
  background-color: var(--colorblind-popup-body-bg-color);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0 calc(4 * var(--base-padding)) calc(2 * var(--base-padding)) calc(4 * var(--base-padding));
  gap: calc(4 * var(--base-padding));
}
.camera-settings-half-row:last-child {
  padding-bottom: calc(4 * var(--base-padding));
}
.camera-settings-row-left {
  flex-grow: 1;
  width: 1px;
}
.camera-settings-row-right {
  flex-grow: 1;
  width: 1px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.camera-settings-row-right-unaligned {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.camera-settings-row-right-centered {
  flex-grow: 1;
  width: 1px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.camera-settings-row-right-centered > *:not(:first-child) {
  margin-left: var(--base-padding);
}
.camera-settings-row-right-stacked {
  flex-grow: 1;
  width: 1px;
  display: flex;
  flex-direction: column;
}
.camera-settings-row-right-stacked > *:not(:first-child) {
  margin-top: calc(2 * var(--base-padding));
}
.camera-settings-row-right-columns {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.camera-settings-row-right-gap {
  gap: var(--hds-spacing-2);
}
.camera-settings-row-right-label {
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height);
  color: var(--font-color-hint);
  text-transform: uppercase;
  margin-right: calc(2 * var(--base-padding));
}
.camera-settings-screenshot-button {
  --icon-button-size-override: var(--header-line-height);
}
.camera-settings-projection-tabs {
  --panel-tab-height: var(--line-height);
  width: var(--input-width);
}
.map-language-row .map-language-menuList {
  height: 250px;
}
.map-language-control {
  width: 155px;
}
.camera-settings-screenshot {
  cursor: pointer;
  user-select: none;
}
.camera-settings-screenshot-hotkey {
  color: var(--hds-foreground-secondary);
}
.camera-settings-lat-long {
  --input-border-radius: var(--hds-border-radius);
  --input-border-color-hover: var(--hds-foreground-tertiary-hover);
  --input-border-color-focussed: var(--hds-object-focused);
  --input-border-color-active: var(--hds-foreground-tertiary);
  --input-border-color-inactive: var(--hds-foreground-tertiary-disabled);
  --input-bg-color-inactive: var(--hds-background-primary);
  --input-bg-color-active: var(--hds-background-secondary);
}
.camera-settings-lat-long .ga-slider-input {
  width: calc(var(--hds-spacing-13) + var(--hds-spacing-2));
  max-width: calc(var(--hds-spacing-13) + var(--hds-spacing-2));
}
.camera-settings-lat-long-assistive-text {
  font: var(--hds-caption-font);
  letter-spacing: var(--hds-caption-letter-spacing);
  -webkit-text-decoration: var(--hds-caption-text-decoration, inherit);
  text-decoration: var(--hds-caption-text-decoration, inherit);
  font-size: 0.65rem !important;
  color: var(--hds-foreground-secondary);
  margin-top: calc(var(--hds-spacing-2) - 2px);
  margin-bottom: var(--hds-spacing-1);
}
.camera-settings-map-overlay-button {
  position: relative;
}
.text-editor-panel-content {
  height: 1px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  background-color: transparent;
}
.text-editor-panel-content:focus-within {
  border: var(--input-border-size) solid var(--input-border-color-focussed);
  background-color: transparent;
  color: var(--font-color-emphasized);
  border: none;
}
.text-editor-panel-editor-wrapper {
  box-sizing: border-box;
  padding-left: calc(2 * var(--base-padding));
  width: 100%;
}
.text-editor-panel-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.text-editor-panel-status-icon {
  background-color: var(--icon-color, var(--font-color));
  flex-shrink: 0;
  width: var(--icon-box-size);
  height: var(--icon-box-size);
  width: var(--icon-padding-size);
  height: var(--icon-padding-size);
  padding: 0;
  margin: 0;
}
.text-editor-panel-status-icon-wrapper {
  border-radius: 50%;
  padding: var(--base-padding);
  margin: 0 var(--base-padding);
  background-color: var(--hds-background-object);
}
.text-editor-panel-status-icon-wrapper-positive {
  --hds-icon-color: var(--hds-positive);
}
.text-editor-panel-status-icon-wrapper-negative {
  --hds-icon-color: var(--hds-negative);
}
.parititions-overlay-header {
  display: flex;
  align-items: center;
}
.parititions-overlay-label {
  flex-grow: 1;
}
.partitions-content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  overflow: hidden;
}
.partition {
  margin-top: var(--panel-margin);
  border-radius: var(--panel-body-border-radius);
  background-color: var(--bg-color-panel-content);
  height: var(--main-item-height);
  display: flex;
  flex-direction: column;
  border-left: var(--selected-item-selection-bar-width) solid;
  border-color: transparent;
  padding: var(--base-padding) calc(2 * var(--base-padding));
}
.partition:first-child {
  margin-top: 0;
}
.partition-selected {
  margin-top: var(--panel-margin);
  border-radius: var(--panel-body-border-radius);
  background-color: var(--bg-color-panel-content);
  height: var(--main-item-height);
  display: flex;
  flex-direction: column;
  border-left: var(--selected-item-selection-bar-width) solid;
  border-color: transparent;
  padding: var(--base-padding) calc(2 * var(--base-padding));
  border-left: solid var(--selected-item-selection-bar-width) var(--selection-color);
  background-color: var(--bg-color-item-selected);
}
.partition-selected:first-child {
  margin-top: 0;
}
.partition-readonly {
  margin-top: var(--panel-margin);
  border-radius: var(--panel-body-border-radius);
  background-color: var(--bg-color-panel-content);
  height: var(--main-item-height);
  display: flex;
  flex-direction: column;
  border-left: var(--selected-item-selection-bar-width) solid;
  border-color: transparent;
  padding: var(--base-padding) calc(2 * var(--base-padding));
}
.partition-readonly:first-child {
  margin-top: 0;
}
.partition-readonly .partition-partition-name {
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-menu);
  color: var(--font-color-disabled);
  --icon-color: var(--font-color-disabled);
}
.partition-base {
  margin-top: var(--panel-margin);
  border-radius: var(--panel-body-border-radius);
  background-color: var(--bg-color-panel-content);
  height: var(--main-item-height);
  display: flex;
  flex-direction: column;
  border-left: var(--selected-item-selection-bar-width) solid;
  border-color: transparent;
  padding: var(--base-padding) calc(2 * var(--base-padding));
  border-color: #52A3DB;
}
.partition-base:first-child {
  margin-top: 0;
}
.partition-base-selected {
  margin-top: var(--panel-margin);
  border-radius: var(--panel-body-border-radius);
  background-color: var(--bg-color-panel-content);
  height: var(--main-item-height);
  display: flex;
  flex-direction: column;
  border-left: var(--selected-item-selection-bar-width) solid;
  border-color: transparent;
  padding: var(--base-padding) calc(2 * var(--base-padding));
  border-left: solid var(--selected-item-selection-bar-width) var(--selection-color);
  background-color: var(--bg-color-item-selected);
  border-color: #52A3DB;
}
.partition-base-selected:first-child {
  margin-top: 0;
}
.partition-base-readonly {
  margin-top: var(--panel-margin);
  border-radius: var(--panel-body-border-radius);
  background-color: var(--bg-color-panel-content);
  height: var(--main-item-height);
  display: flex;
  flex-direction: column;
  border-left: var(--selected-item-selection-bar-width) solid;
  border-color: transparent;
  padding: var(--base-padding) calc(2 * var(--base-padding));
  border-color: #52A3DB;
}
.partition-base-readonly:first-child {
  margin-top: 0;
}
.partition-base-readonly .partition-partition-name {
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-menu);
  color: var(--font-color-disabled);
  --icon-color: var(--font-color-disabled);
}
.partition-conditioned {
  margin-top: var(--panel-margin);
  border-radius: var(--panel-body-border-radius);
  background-color: var(--bg-color-panel-content);
  height: var(--main-item-height);
  display: flex;
  flex-direction: column;
  border-left: var(--selected-item-selection-bar-width) solid;
  border-color: transparent;
  padding: var(--base-padding) calc(2 * var(--base-padding));
  border-color: #82DBBD;
}
.partition-conditioned:first-child {
  margin-top: 0;
}
.partition-conditioned-selected {
  margin-top: var(--panel-margin);
  border-radius: var(--panel-body-border-radius);
  background-color: var(--bg-color-panel-content);
  height: var(--main-item-height);
  display: flex;
  flex-direction: column;
  border-left: var(--selected-item-selection-bar-width) solid;
  border-color: transparent;
  padding: var(--base-padding) calc(2 * var(--base-padding));
  border-left: solid var(--selected-item-selection-bar-width) var(--selection-color);
  background-color: var(--bg-color-item-selected);
  border-color: #82DBBD;
}
.partition-conditioned-selected:first-child {
  margin-top: 0;
}
.partition-conditioned-readonly {
  margin-top: var(--panel-margin);
  border-radius: var(--panel-body-border-radius);
  background-color: var(--bg-color-panel-content);
  height: var(--main-item-height);
  display: flex;
  flex-direction: column;
  border-left: var(--selected-item-selection-bar-width) solid;
  border-color: transparent;
  padding: var(--base-padding) calc(2 * var(--base-padding));
  border-color: #82DBBD;
}
.partition-conditioned-readonly:first-child {
  margin-top: 0;
}
.partition-conditioned-readonly .partition-partition-name {
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-menu);
  color: var(--font-color-disabled);
  --icon-color: var(--font-color-disabled);
}
.partition-partition-header {
  display: flex;
  align-items: center;
}
.partition-partition-header > *:not(:first-child) {
  margin-left: calc(2 * var(--base-padding));
}
.partition-partition-name {
  font-family: var(--font-family);
  font-size: var(--text-size);
  color: var(--font-color-group-item);
  --icon-color: var(--font-color-group-item);
  line-height: var(--line-height);
  color: var(--font-color-inactive-item-text);
  --icon-color: var(--font-color-inactive-item-text);
  flex-grow: 1;
  overflow: hidden;
}
.partition-edit-button {
  --line-height: var(--header-line-height);
  cursor: pointer;
  user-select: none;
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-menu);
  color: var(--font-color);
  --icon-color: var(--font-color);
  background-color: transparent;
  border: var(--border-size) solid var(--border-color);
  border-radius: var(--input-border-radius);
  border-color: var(--main-button-color);
  box-sizing: border-box;
  --divider-color-override: var(--main-button-color);
  text-align: center;
  padding: 0px calc(2 * var(--base-padding));
  padding: 0 calc(2 * var(--base-padding));
  display: none;
}
.partition-edit-button:hover {
  color: var(--font-color-emphasized);
  --divider-color-override: var(--main-button-color-hover);
  border: var(--border-size) solid var(--main-button-color-hover);
}
.partition:hover .partition-edit-button,
.partition-base:hover .partition-edit-button,
.partition-conditioned:hover .partition-edit-button {
  display: initial;
}
.partition-edited-button {
  --line-height: var(--header-line-height);
  cursor: pointer;
  user-select: none;
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-menu);
  color: var(--font-color);
  --icon-color: var(--font-color);
  background-color: transparent;
  border: var(--border-size) solid var(--border-color);
  border-radius: var(--input-border-radius);
  border-color: var(--main-button-color);
  box-sizing: border-box;
  --divider-color-override: var(--main-button-color);
  text-align: center;
  padding: 0px calc(2 * var(--base-padding));
  padding: 0 calc(2 * var(--base-padding));
}
.partition-edited-button:hover {
  color: var(--font-color-emphasized);
  --divider-color-override: var(--main-button-color-hover);
  border: var(--border-size) solid var(--main-button-color-hover);
}
.partition-information {
  font-family: var(--font-family);
  font-size: var(--text-size-tiny);
  color: var(--font-color-hint);
  --icon-color: var(--font-color-hint);
  fill: var(--font-color-hint);
  line-height: var(--line-height-tiny);
}
.partition-information-clickable {
  cursor: pointer;
  user-select: none;
}
.history-content {
  display: flex;
  flex-direction: column;
  height: 1px;
  flex-grow: 1;
}
.history-list {
  display: flex;
  flex-direction: column;
}
.history-list-section {
  margin-top: var(--panel-margin);
  border-radius: var(--panel-body-border-radius);
  background-color: var(--bg-color-panel-content);
  display: flex;
  flex-direction: column;
}
.history-list-section:first-child {
  margin-top: 0;
}
.history-header {
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height);
  color: var(--font-color-hint);
  text-transform: uppercase;
  height: var(--header-line-height);
  padding: 0 calc(2 * var(--base-padding));
}
.history-undo {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  white-space: nowrap;
  height: var(--header-line-height);
  padding: 0 calc(2 * var(--base-padding));
  font-family: var(--font-family);
  font-size: var(--text-size-menu);
  line-height: var(--line-height);
  color: var(--font-color-secondary);
  --icon-color: var(--font-color-secondary);
  padding: 0 calc(4 * var(--base-padding));
  height: var(--popup-item-height-large);
}
.history-undo:hover {
  background-color: var(--bg-color-popup-item-hover);
  font-family: var(--font-family);
  font-size: var(--text-size-menu);
  line-height: var(--line-height);
  color: var(--font-color-primary);
  --icon-color: var(--font-color-secondary);
}
.history-new-undo {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  white-space: nowrap;
  height: var(--header-line-height);
  padding: 0 calc(2 * var(--base-padding));
  color: var(--font-color-secondary);
  padding: 0 calc(4 * var(--base-padding));
  height: var(--popup-item-height-large);
  font-family: var(--font-family);
  font-size: var(--text-size-menu);
  line-height: var(--line-height);
  color: var(--font-color-primary);
  --icon-color: var(--font-color-secondary);
}
.history-new-undo:hover {
  background-color: var(--bg-color-popup-item-hover);
  font-family: var(--font-family);
  font-size: var(--text-size-menu);
  line-height: var(--line-height);
  color: var(--font-color-primary);
  --icon-color: var(--font-color-secondary);
}
.history-redo {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  white-space: nowrap;
  height: var(--header-line-height);
  padding: 0 calc(2 * var(--base-padding));
  font-family: var(--font-family);
  font-size: var(--text-size-menu);
  line-height: var(--line-height);
  color: var(--font-color-secondary);
  --icon-color: var(--font-color-secondary);
  padding: 0 calc(4 * var(--base-padding));
  height: var(--popup-item-height-large);
}
.history-redo:hover {
  background-color: var(--bg-color-popup-item-hover);
  font-family: var(--font-family);
  font-size: var(--text-size-menu);
  line-height: var(--line-height);
  color: var(--font-color-primary);
  --icon-color: var(--font-color-secondary);
}
.history-new-redo {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  white-space: nowrap;
  height: var(--header-line-height);
  padding: 0 calc(2 * var(--base-padding));
  color: var(--font-color-secondary);
  padding: 0 calc(4 * var(--base-padding));
  height: var(--popup-item-height-large);
  font-family: var(--font-family);
  font-size: var(--text-size-menu);
  line-height: var(--line-height);
  color: var(--font-color-primary);
  --icon-color: var(--font-color-secondary);
}
.history-new-redo:hover {
  background-color: var(--bg-color-popup-item-hover);
  font-family: var(--font-family);
  font-size: var(--text-size-menu);
  line-height: var(--line-height);
  color: var(--font-color-primary);
  --icon-color: var(--font-color-secondary);
}
.save-spinner {
  -webkit-transform: rotate(var(--rotation));
  transform: rotate(var(--rotation));
}
.save-checked {
  transition: opacity 0.2s ease-in-out;
}
.save-idle {
  opacity: 0;
}
.tooltip-container-with-subcontent {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.tooltip-title {
  color: var(--hds-inverse-primary);
  word-break: break-all;
}
.tooltip-subtitle {
  color: var(--hds-inverse-primary);
  word-break: break-all;
}
.file-entity {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: var(--hds-spacing-2) var(--hds-spacing-2) var(--hds-spacing-1) var(--hds-spacing-2);
  box-sizing: border-box;
  width: 85px;
  min-height: 70px;
  max-height: 85px;
  width: fit-content;
  border-radius: var(--hds-border-radius);
  gap: var(--hds-spacing-1);
  cursor: pointer;
  user-select: none;
}
.file-entity:hover {
  background-color: var(--file-entity-bg-hover);
}
.file-entity-disabled {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: var(--hds-spacing-2) var(--hds-spacing-2) var(--hds-spacing-1) var(--hds-spacing-2);
  box-sizing: border-box;
  width: 85px;
  min-height: 70px;
  max-height: 85px;
  width: fit-content;
  border-radius: var(--hds-border-radius);
  gap: var(--hds-spacing-1);
  cursor: not-allowed;
}
.file-entity-selected {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: var(--hds-spacing-2) var(--hds-spacing-2) var(--hds-spacing-1) var(--hds-spacing-2);
  box-sizing: border-box;
  width: 85px;
  min-height: 70px;
  max-height: 85px;
  width: fit-content;
  border-radius: var(--hds-border-radius);
  gap: var(--hds-spacing-1);
  cursor: pointer;
  user-select: none;
  background-color: var(--bg-selected-item);
  background-color: var(--file-entity-bg-selected);
}
.file-entity-selected:hover {
  background-color: var(--file-entity-bg-hover);
}
.file-entity-label-box {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%;
}
.file-entity-label {
  font-family: var(--font-family);
  font-size: var(--text-size);
  font-style: normal;
  font-weight: 400;
  line-height: var(--line-height-menu);
  letter-spacing: -0.024px;
  color: var(--font-color-subdued);
  color: var(--hds-foreground-primary);
  --icon-color: var(--hds-foreground-primary);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow-wrap: break-word;
  word-break: break-word;
  box-sizing: border-box;
  padding: 0 2px;
  text-align: center;
  overflow: hidden;
  flex-grow: 0;
}
.file-entity-mark {
  width: var(--base-padding);
  height: var(--base-padding);
  border-radius: 50%;
  background-color: var(--hds-action);
  position: absolute;
  left: -4px;
  flex-shrink: 0;
}
.upload-entity-label {
  font-family: var(--font-family);
  font-size: var(--text-size);
  font-style: normal;
  font-weight: 400;
  line-height: var(--text-size-dialog-big);
  letter-spacing: -0.048px;
  color: var(--font-color-secondary);
  --icon-color: var(--font-color-secondary);
  font-weight: 500;
  font-family: var(--font-family-emphasized);
  color: var(--hds-action);
  --icon-color: var(--hds-action);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow-wrap: break-word;
  word-break: break-word;
  box-sizing: border-box;
  padding: 0 2px;
  text-align: center;
  overflow: hidden;
}
.file-entity-icon {
  background-color: var(--icon-color, var(--font-color));
  flex-shrink: 0;
  width: var(--icon-box-size);
  height: var(--icon-box-size);
  --icon-color: var(--disabled-icon-color);
  width: var(--icon-big-size);
  height: var(--icon-big-size);
}
.file-entity-icon:hover {
  --icon-color: var(--active-icon-color);
  --icon-color-hover: var(--active-icon-color);
}
.file-entity-icon-box {
  position: relative;
}
.file-entity-lock-icon {
  position: absolute;
  right: -7px;
  bottom: -3px;
  --hds-icon-color: var(--hds-foreground-primary);
  filter: drop-shadow(0 0 13px #00194B14) drop-shadow(0 0 21px #00194B0D) drop-shadow(0 0 6px #00194B0F) drop-shadow(0 0 2px #00194B1F);
}
.file-entity-thumbnail-container {
  background: repeating-conic-gradient(var(--hds-white-onlight-100-045) 0 25%, var(--hds-white-onlight-100-035) 0 50%) 50% / 8px 8px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: var(--icon-container-width);
  height: var(--icon-container-width);
  border-radius: var(--hds-border-radius);
  --icon-container-width: var(--icon-big-size);
  --icon-container-height: var(--icon-big-size);
}
.file-entity-thumbnail {
  position: absolute;
  box-sizing: border-box;
  width: var(--icon-width);
  height: var(--icon-height);
  --half-width: calc(var(--icon-width) / 2);
  --half-height: calc(var(--icon-height) / 2);
  --half-background-width: calc(var(--icon-container-width) / 2);
  --half-background-height: calc(var(--icon-container-height) / 2);
  top: calc(var(--half-background-height) - var(--half-height));
  right: calc(var(--half-background-width) - var(--half-width));
  --icon-width: 32px;
  --icon-height: 32px;
}
.file-entity-folder {
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: var(--icon-container-width);
  height: var(--icon-container-width);
  border-radius: var(--hds-border-radius);
  --icon-container-width: var(--icon-big-size);
  --icon-container-height: var(--icon-big-size);
  --hds-icon-color: var(--hds-foreground-secondary);
}
.file-entity-empty {
  background: repeating-conic-gradient(var(--hds-white-onlight-100-045) 0 25%, var(--hds-white-onlight-100-035) 0 50%) 50% / 8px 8px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: var(--icon-container-width);
  height: var(--icon-container-width);
  border-radius: var(--hds-border-radius);
  border: 1px dashed var(--hds-foreground-tertiary);
  --icon-container-width: var(--icon-big-size);
  --icon-container-height: var(--icon-big-size);
}
.help-tour-doc {
  font-family: var(--font-family-emphasized);
  font-size: var(--text-size-dialog);
  line-height: var(--line-height-dialog-header);
  color: var(--font-color-oncolor);
  --icon-color: var(--font-color-oncolor);
  display: flex;
  align-items: center;
  text-decoration: none;
}
.help-tour-doc:hover {
  color: var(--font-color-oncolor-hover);
  --icon-color: var(--font-color-oncolor-hover);
}
.help-tour-doc > .base-icon {
  margin-left: calc(2 * var(--base-padding));
}
.help-tour-start-popup {
  z-index: 14;
  animation-duration: 0.8s;
  animation-name: fadeIn;
  animation-timing-function: ease;
  -webkit-animation-duration: 0.8s;
  -webkit-animation-name: fadeIn;
  -webkit-animation-timing-function: ease;
  background: var(--hds-gradient);
  filter: var(--hds-overlay);
  border-radius: var(--hds-border-radius);
  overflow: hidden;
  width: 380px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.help-tour-start-title {
  width: 100%;
  box-sizing: border-box;
  background-color: #000;
  font-family: var(--font-family);
  font-size: var(--line-height);
  font-style: normal;
  font-weight: 500;
  line-height: var(--header-line-height);
  /* 120% */
  color: var(--font-color-primary);
  --icon-color: var(--font-color-primary);
  color: var(--hds-background-secondary);
  padding: var(--hds-spacing-7) var(--hds-spacing-7);
}
.help-tour-start-text {
  font-family: var(--font-family);
  font-size: var(--text-size);
  font-style: normal;
  font-weight: 400;
  line-height: var(--text-size-dialog-big);
  letter-spacing: -0.048px;
  color: var(--font-color-secondary);
  --icon-color: var(--font-color-secondary);
  color: var(--hds-foreground-primary);
  padding: var(--hds-spacing-4) var(--hds-spacing-7);
}
.help-tour-start-action-text {
  font-family: var(--font-family);
  font-size: var(--text-size);
  font-style: normal;
  font-weight: 400;
  line-height: var(--text-size-dialog-big);
  letter-spacing: -0.048px;
  color: var(--font-color-secondary);
  --icon-color: var(--font-color-secondary);
  color: var(--hds-foreground-primary);
  padding: 0 var(--hds-spacing-7) var(--hds-spacing-4) var(--hds-spacing-7);
}
.help-tour-start-button-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--hds-spacing-7) var(--hds-spacing-7) var(--hds-spacing-7);
}
.help-tour-highlight {
  position: absolute;
  box-sizing: border-box;
  border: 2px dotted var(--quick-tour-highlight);
  pointer-events: none;
  z-index: 6;
  top: var(--y);
  left: var(--x);
  width: var(--w);
  height: var(--h);
}
.help-tour-highlight-outer {
  position: absolute;
  box-sizing: border-box;
  border: 2px dotted var(--quick-tour-highlight);
  pointer-events: none;
  z-index: 6;
  border-radius: var(--hds-border-radius);
  top: calc(var(--y) - 2px);
  left: calc(var(--x) - 2px);
  width: calc(var(--w) + 2 * 2px);
  height: calc(var(--h) + 2 * 2px);
}
.help-tour-highlight-rounded.help-tour-highlight {
  border-radius: calc(var(--h) / 2);
}
.help-tour-highlight-rounded.help-tour-highlight-outer {
  border-radius: calc(var(--h) / 2 + 2px);
}
.help-tour-highlight-element-border {
  border: 2px dotted var(--quick-tour-highlight);
}
.help-tour-highlight-element-border.help-tour-highlight-element-border-rounded {
  border-radius: calc(var(--h) / 2 + 2px);
}
.help-tour-highlight-element-border.help-tour-highlight-element-border-outer {
  padding: calc(var(--hds-spacing-1) / 2);
}
.help-tour-popup-position {
  position: absolute;
  top: calc(var(--y) + var(--hds-spacing-4));
  display: flex;
  flex-direction: row;
  z-index: 14;
  transition: top 0.3s ease-in-out, left 0.3s ease-in-out;
  -webkit-transition: top 0.3s ease-in-out, left 0.3s ease-in-out;
}
.help-tour-popup-position-left {
  left: calc(var(--x) + var(--w) + 16px);
}
.help-tour-popup-position-right {
  right: calc(100vw - (var(--x) - 16px));
}
.help-tour-popup {
  z-index: 14;
  animation-duration: 0.8s;
  animation-name: fadeIn;
  animation-timing-function: ease;
  -webkit-animation-duration: 0.8s;
  -webkit-animation-name: fadeIn;
  -webkit-animation-timing-function: ease;
  background: var(--hds-gradient);
  filter: var(--hds-overlay);
  border-radius: var(--hds-border-radius);
  overflow: hidden;
  width: 360px;
  padding: var(--hds-spacing-6) var(--hds-spacing-7);
  box-sizing: border-box;
}
.help-tour-close-button {
  cursor: pointer;
  user-select: none;
  position: absolute;
  top: var(--hds-spacing-4);
  right: var(--hds-spacing-4);
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: var(--font-family-emphasized);
  font-size: var(--text-size-dialog);
  line-height: var(--line-height-dialog-header);
  color: var(--font-color-oncolor);
  --icon-color: var(--font-color-oncolor);
}
.help-tour-close-button:hover {
  color: var(--font-color-oncolor-hover);
  --icon-color: var(--font-color-oncolor-hover);
}
.help-tour-title {
  font-family: var(--font-family);
  font-size: var(--line-height);
  font-style: normal;
  line-height: var(--header-line-height);
  /* 120% */
  color: var(--font-color-primary);
  --icon-color: var(--font-color-primary);
  font-family: var(--font-family-emphasized);
  font-weight: 500;
  color: var(--hds-foreground-primary);
}
.help-tour-text {
  font-family: var(--font-family);
  font-size: var(--text-size);
  font-style: normal;
  font-weight: 400;
  line-height: var(--text-size-dialog-big);
  letter-spacing: -0.048px;
  color: var(--font-color-secondary);
  --icon-color: var(--font-color-secondary);
  color: var(--hds-foreground-primary);
  --icon-color: var(--hds-foreground-primary);
  padding: var(--hds-spacing-4) 0;
}
#help-tour-doc-link {
  font-family: var(--font-family-emphasized);
  font-size: var(--hds-button-font-size);
  font-weight: var(--hds-button-font-weight);
  line-height: var(--hds-button-line-height);
  letter-spacing: var(--hds-button-letter-spacing);
  text-align: var(--hds-button-text-align);
  color: var(--hds-foreground-primary);
}
#help-tour-doc-link > span {
  margin-right: var(--hds-spacing-2);
}
.help-tour-progress {
  font-family: var(--font-family-emphasized);
  font-size: var(--hds-button-font-size);
  font-weight: var(--hds-button-font-weight);
  line-height: var(--hds-button-line-height);
  letter-spacing: var(--hds-button-letter-spacing);
  text-align: var(--hds-button-text-align);
  color: var(--hds-foreground-primary);
  flex-grow: 1;
}
.help-tour-progress-total {
  color: var(--hds-foreground-secondary);
}
.help-tour-button-row {
  display: flex;
  align-items: center;
  margin-top: var(--hds-spacing-4);
  gap: var(--hds-spacing-2);
}
.help-tour-button {
  font-family: var(--font-family-emphasized);
  font-size: var(--text-size-dialog);
  line-height: var(--line-height-dialog-header);
  color: var(--font-color-oncolor);
  --icon-color: var(--font-color-oncolor);
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
}
.help-tour-button:hover {
  color: var(--font-color-oncolor-hover);
  --icon-color: var(--font-color-oncolor-hover);
}
.help-tour-button > *:not(:first-child) {
  margin-left: calc(2 * var(--base-padding));
}
.help-tour-background {
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  z-index: 12;
}
.pulse {
  --pulse-color: #FFF;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: var(--pulse-color);
  opacity: 0;
}
.pulse-anim {
  animation: pulse-frames 0.75s 0s;
  animation-iteration-count: 1;
}
@keyframes pulse-frames {
  0% {
    box-shadow: 0 0 0 0 var(--pulse-color);
    opacity: 1;
  }
  100% {
    box-shadow: 0 0 0 30px var(--pulse-color);
    opacity: 0;
  }
}
.colorblind-split-divider {
  box-shadow: 0 1px 4px 0 var(--shadow-color);
  width: 2px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--hds-action-hover);
}
.colorblind-split-divider-colored {
  box-shadow: 0 1px 4px 0 var(--shadow-color);
  width: 2px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--hds-action-hover);
}
.colorblind-popover {
  width: 306px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.colorblind-popover-split-pos {
  position: absolute;
  bottom: 38px;
  left: 75%;
  transform: translateX(-50%);
}
.colorblind-popover-full-pos {
  position: absolute;
  bottom: 38px;
  left: 50%;
  transform: translateX(-50%);
}
.colorblind-popover-header {
  padding: var(--hds-spacing-2) var(--hds-spacing-4);
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
  gap: calc(2 * var(--base-padding));
  background-color: var(--hds-background-primary);
}
.colorblind-popover-body {
  background-color: var(--hds-background-secondary);
  padding: var(--hds-spacing-4);
}
.colorblindness-popover-controls-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 28px;
}
.colorblindness-popover-controls-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--hds-spacing-2);
}
.colorblindness-popover-controls-buttons {
  display: flex;
  flex-direction: row;
  gap: var(--hds-spacing-3);
}
.color-blindness-popover-button-container {
  padding: calc(3 * var(--hds-spacing-1px));
  border: calc(2 * var(--hds-spacing-1px)) solid transparent;
  border-radius: var(--hds-border-radius);
}
.color-blindness-popover-button-container:has(.colorblindness-popover-button:hover) {
  border-color: var(--hds-action-hover);
}
.color-blindness-popover-button-container:has(.colorblindness-popover-button:active) {
  border-color: var(--hds-action-press);
}
.color-blindness-popover-button-container.color-blindness-popover-button-container-selected {
  border-color: var(--hds-action);
}
.colorblindness-popover-button {
  cursor: pointer;
  user-select: none;
  width: var(--hds-spacing-7);
  height: var(--hds-spacing-7);
  border-radius: var(--hds-border-radius);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}
.colorblindness-popover-button .stop-icon-color {
  --hds-icon-color: var(--hds-background-primary);
}
.colorblindness-popover-button.color-blindness-type-protanopia {
  background-color: var(--hds-negative);
}
.colorblindness-popover-button.color-blindness-type-deuteranopia {
  background-color: var(--hds-positive);
}
.colorblindness-popover-button.color-blindness-type-tritanopia {
  background-color: var(--hds-action);
}
.colorblindness-popover-button-img {
  width: var(--hds-spacing-7);
  height: var(--hds-spacing-7);
}
.colorblind-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--hds-spacing-1) var(--hds-spacing-2);
  border-radius: var(--hds-border-radius);
  color: var(--hds-ondarkcolor-primary);
}
.colorblind-heading.color-blindness-type-protanopia {
  background-color: var(--hds-negative);
}
.colorblind-heading.color-blindness-type-deuteranopia {
  background-color: var(--hds-positive);
}
.colorblind-heading.color-blindness-type-tritanopia {
  background-color: var(--hds-action);
}
.colorblind-heading .view-text {
  text-transform: lowercase;
}
.colorblind-heading-split-pos {
  position: absolute;
  top: 72px;
  left: 75%;
  transform: translateX(-50%);
}
.colorblind-heading-full-pos {
  position: absolute;
  top: 72px;
  left: 50%;
  transform: translateX(-50%);
}
.modifier-overlay-popover {
  box-shadow: 0 1px 4px 0 var(--shadow-color);
  background-color: var(--bg-color-panel-base);
  overflow: hidden;
  border-radius: var(--popup-border-radius);
  --divider-color-override: var(--divider-color-ondark);
  margin-left: calc(2 * var(--base-padding));
  position: absolute;
  left: var(--map-overlay-item-size);
  display: flex;
}
.modifier-overlay-left-column {
  width: 250px;
  position: relative;
}
.modifier-overlay-header {
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-menu);
  color: var(--font-color-emphasized);
  --icon-color: var(--font-color-emphasized);
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: calc(2 * var(--base-padding));
}
.modifier-overlay-header-label {
  flex-grow: 1;
}
.modifier-overlay-types {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: calc(2 * var(--base-padding));
  padding-top: 0;
}
.modifier-overlay-types > *:not(:first-child) {
  margin-left: var(--base-padding);
}
.modifier-overlay-function {
  padding: calc(2 * var(--base-padding));
}
.modifier-overlay-path-container {
  padding: var(--hds-spacing-2) var(--hds-spacing-0) var(--hds-spacing-0) var(--hds-spacing-0);
}
.modifier-overlay-path-container .dropzone-wrapper {
  padding: var(--hds-spacing-2) var(--hds-spacing-3);
}
.modifier-overlay-dropzone-container {
  cursor: pointer;
  user-select: none;
  padding: 2px;
  display: flex;
  position: relative;
  border-radius: var(--hds-border-radius);
  border: 1px dashed var(--hds-foreground-tertiary);
  background-color: rgba(0, 55, 143, 0.05);
  min-height: 48px;
}
.modifier-overlay-dropzone-container:hover:not(.modifier-overlay-dropzone-container-disabled) {
  background-color: var(--colorblind-popup-button-color);
}
.modifier-overlay-dropzone-container:hover:not(.modifier-overlay-dropzone-container-disabled) :not(.ga-dropzone-disabled) .ga-dropzone-heading-search-text {
  color: var(--hds-action-hover);
}
.modifier-overlay-dropzone-container:hover:not(.modifier-overlay-dropzone-container-disabled) :not(.ga-dropzone-disabled) .ga-dropzone-heading-wrapper {
  --hds-icon-color: var(--hds-action-hover);
}
.modifier-overlay-dropzone-container:active:not(.modifier-overlay-dropzone-container-disabled) {
  background-color: var(--hds-background-press);
}
.modifier-overlay-dropzone-container:has(.ga-dropzone-disabled) {
  border-color: var(--hds-foreground-inactive);
  cursor: not-allowed;
}
.modifier-overlay-dropzone-container .ga-dropzone {
  align-items: center;
  justify-content: center;
}
.modifier-overlay-dropzone-container-dragging {
  cursor: pointer;
  user-select: none;
  padding: 2px;
  display: flex;
  position: relative;
  border-radius: var(--hds-border-radius);
  border: 1px dashed var(--hds-foreground-tertiary);
  background-color: rgba(0, 55, 143, 0.05);
  min-height: 48px;
}
.modifier-overlay-dropzone-container-dragging:hover:not(.modifier-overlay-dropzone-container-disabled) {
  background-color: var(--colorblind-popup-button-color);
}
.modifier-overlay-dropzone-container-dragging:hover:not(.modifier-overlay-dropzone-container-disabled) :not(.ga-dropzone-disabled) .ga-dropzone-heading-search-text {
  color: var(--hds-action-hover);
}
.modifier-overlay-dropzone-container-dragging:hover:not(.modifier-overlay-dropzone-container-disabled) :not(.ga-dropzone-disabled) .ga-dropzone-heading-wrapper {
  --hds-icon-color: var(--hds-action-hover);
}
.modifier-overlay-dropzone-container-dragging:active:not(.modifier-overlay-dropzone-container-disabled) {
  background-color: var(--hds-background-press);
}
.modifier-overlay-dropzone-container-dragging:has(.ga-dropzone-disabled) {
  border-color: var(--hds-foreground-inactive);
  cursor: not-allowed;
}
.modifier-overlay-dropzone-container-dragging .ga-dropzone {
  align-items: center;
  justify-content: center;
}
.modifier-overlay-dropzone-container-dragging:not(.modifier-overlay-dropzone-container-disabled) {
  border-color: transparent;
  background-color: var(--hds-background-hover);
}
.modifier-overlay-dropzone-container-dragging .ga-dropzone {
  align-items: unset;
  justify-content: unset;
}
.modifier-overlay-dropzone-container-disabled {
  pointer-events: none;
}
.modifier-overlay-dropzone {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.modifier-overlay-paths {
  padding: var(--hds-spacing-2) var(--hds-spacing-4);
  display: flex;
  flex-direction: column;
  gap: var(--hds-spacing-1);
}
.modifier-overlay-path {
  display: flex;
  align-items: center;
  border-radius: var(--hds-border-radius);
  padding: var(--hds-spacing-1) var(--hds-spacing-0);
}
.modifier-overlay-path .icon-toggle-button {
  align-self: center;
}
.modifier-overlay-path-label {
  display: flex;
  flex-direction: column;
  gap: calc(var(--hds-spacing-1px) * 2);
  flex-grow: 1;
  width: 1px;
  margin-right: 8px;
  color: var(--hds-foreground-secondary);
  line-height: var(--hds-body-extrasmall-line-height);
  /* 150% */
  letter-spacing: var(--hds-body-extrasmall-letter-spacing);
}
.modifier-overlay-path-label > div:first-of-type {
  color: var(--hds-foreground-tertiary);
}
.modifier-overlay-path-label > div:only-child {
  color: var(--hds-foreground-secondary);
}
.modifier-overlay-path-label div {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.modifier-overlay-path-label-disabled {
  color: var(--hds-foreground-inactive);
}
.modifier-overlay-path-label-disabled > div:first-of-type {
  color: var(--hds-foreground-inactive);
}
.modifier-overlay-path-label-disabled > div:only-child {
  color: var(--hds-foreground-inactive);
}
.modifier-overlay-footer {
  padding: calc(2 * var(--base-padding));
}
.modifier-overlay-empty-hint {
  font-family: var(--font-family);
  font-size: var(--text-size-tiny);
  line-height: var(--line-height-menu);
  color: var(--font-color);
  line-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modifier-overlay-add-menu {
  box-shadow: 0 1px 4px 0 var(--shadow-color);
  background-color: var(--bg-color-panel-base);
  overflow: hidden;
  border-radius: var(--popup-border-radius);
  --divider-color-override: var(--divider-color-ondark);
  margin-left: calc(2 * var(--base-padding));
  display: flex;
  flex-direction: column;
  min-width: 264px;
  position: absolute;
  left: var(--map-overlay-item-size);
}
.modifier-overlay-add-menu-entry {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  white-space: nowrap;
  height: var(--header-line-height);
  padding: 0 calc(2 * var(--base-padding));
  font-family: var(--font-family);
  font-size: var(--text-size-menu);
  line-height: var(--line-height);
  color: var(--font-color-secondary);
  --icon-color: var(--font-color-secondary);
  padding: 0 calc(4 * var(--base-padding));
  height: var(--popup-item-height-large);
}
.modifier-overlay-add-menu-entry:hover {
  background-color: var(--bg-color-popup-item-hover);
  font-family: var(--font-family);
  font-size: var(--text-size-menu);
  line-height: var(--line-height);
  color: var(--font-color-primary);
  --icon-color: var(--font-color-secondary);
}
.modifier-overlay-add-menu-entry > *:not(:first-child) {
  margin-left: calc(4 * var(--base-padding));
}
.modifier-overlay-add-label {
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-menu);
  color: var(--font-color-emphasized);
  --icon-color: var(--font-color-emphasized);
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: calc(2 * var(--base-padding));
}
.modifier-overlay-add-items {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: calc(2 * var(--base-padding));
}
.modifier-overlay-add-buttons {
  display: flex;
  flex-direction: row;
  gap: calc(2 * var(--base-padding));
  align-items: center;
  justify-content: flex-end;
  padding: calc(2 * var(--base-padding));
}
.modifier-overlay-target-icons {
  display: flex;
  gap: calc(2 * var(--base-padding));
}
.modifier-map-overlay-button {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  --icon-color: var(--header-icon-color);
  width: var(--map-overlay-item-size);
  height: var(--map-overlay-item-size);
  border-radius: calc(var(--map-overlay-item-size) / 2);
  box-sizing: border-box;
  border: 1px solid #3F4855;
  box-shadow: 0 1px 4px 0 var(--shadow-color);
  background-color: var(--bg-color-panel-content);
}
.modifier-map-overlay-button-selected {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  --icon-color: var(--header-icon-color);
  width: var(--map-overlay-item-size);
  height: var(--map-overlay-item-size);
  border-radius: calc(var(--map-overlay-item-size) / 2);
  box-sizing: border-box;
  border: 1px solid #3F4855;
  box-shadow: 0 1px 4px 0 var(--shadow-color);
  background-color: var(--bg-color-panel-content);
  background-color: var(--selection-color);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--font-color-emphasized);
  --icon-color: var(--font-color-emphasized);
}
.modifier-map-overlay-panel-button {
  display: flex;
  width: var(--hds-spacing-8);
  height: var(--hds-spacing-8);
  justify-content: center;
  align-items: center;
  gap: var(--hds-spacing-2);
  flex-shrink: 0;
  cursor: pointer;
  --hds-icon-color: var(--hds-inverse-primary);
  background-color: var(--hds-foreground-tertiary);
  color: var(--hds-inverse-primary);
  filter: var(--hds-overlay);
  border-radius: 50%;
  position: relative;
  background-color: var(--hds-accent);
}
.modifier-map-overlay-panel-button:hover {
  background-color: var(--hds-foreground-tertiary-hover);
  color: var(--hds-inverse-primary);
}
.modifier-map-overlay-panel-button:active {
  background-color: var(--hds-foreground-tertiary-press);
}
.modifier-map-overlay-panel-button:hover {
  background-color: var(--hds-aqua-ondark-200);
}
.modifier-map-overlay-panel-button:active {
  background-color: var(--hds-aqua-ondark-500);
}
.modifier-map-overlay-panel-button .modifier-count {
  position: absolute;
  bottom: -4px;
  right: -4px;
  --hds-flag-custom-accent-color: var(--hds-background-inverse);
}
.modifier-map-overlay-panel-button-selected {
  background-color: var(--hds-background-object-press);
}
.modifier-map-overlay-panel-card {
  width: 287px;
  padding: var(--hds-spacing-0) !important;
  position: relative;
  background-color: var(--hds-background-secondary) !important;
  filter: var(--hds-overlay) !important;
}
.modifier-overlay-panel-notification-container {
  position: absolute;
  top: 275px;
  left: calc(287px + var(--hds-spacing-3));
  width: 300px;
}
.modifier-map-overlay-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: var(--hds-spacing-1);
  border-top-left-radius: var(--hds-border-radius);
  border-top-right-radius: var(--hds-border-radius);
  height: var(--modifier-overlay-panel-header-height);
  background-color: var(--hds-accent);
}
.modifier-map-overlay-panel-header-title {
  display: flex;
  align-items: center;
}
.modifier-map-overlay-panel-header-title hds-icon {
  cursor: pointer;
  user-select: none;
  padding: var(--hds-spacing-0) var(--hds-spacing-1) var(--hds-spacing-0) var(--hds-spacing-2);
}
.modifier-map-overlay-panel-header-title .panel-v2-help-icon {
  --icon-color: var(--hds-gray-600);
}
.modifier-map-overlay-panel-header-count {
  margin-left: var(--hds-spacing-1);
  border-radius: var(--hds-spacing-6);
  background-color: var(--hds-inverse-secondary);
}
.modifier-map-overlay-panel-header-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--hds-spacing-2);
  position: relative;
}
.modifier-map-overlay-panel-header-buttons::after {
  position: absolute;
  content: "";
  width: 1px;
  height: var(--icon-box-size);
  left: 50%;
  background-color: #4E5663;
  opacity: 22%;
}
.modifier-map-overlay-panel-body {
  border-bottom-left-radius: var(--hds-border-radius);
  border-bottom-right-radius: var(--hds-border-radius);
}
.modifier-map-overlay-panel-body > div[class^="accordion-dense"] {
  background-color: var(--modifier-overlay-panel-preset-bg);
  padding: var(--hds-spacing-2) var(--hds-spacing-0);
}
.modifier-map-overlay-panel-body > div[class^="accordion-dense"] .accordion-item-header {
  height: 1.5rem;
}
.modifier-map-overlay-panel-body > div[class^="accordion-dense"] .accordion-item-header .layer-list-section-headline {
  color: var(--hds-foreground-secondary);
}
.modifier-map-overlay-panel-body > div[class^="accordion-dense"] :hover {
  color: var(--hds-foreground-primary);
}
.modifier-map-overlay-panel-body > div[class^="accordion-dense"] .layer-list-section-content {
  padding-top: var(--hds-spacing-0);
  padding-bottom: var(--hds-spacing-0);
}
.modifier-map-overlay-panel-body-presets {
  display: flex;
  justify-content: space-between;
}
.modifier-map-overlay-panel-body-presets .ga-basic-template {
  padding: var(--hds-spacing-1);
}
.modifier-map-overlay-panel-create-modifier-section {
  z-index: 1;
  position: relative;
  background-color: var(--modifier-overlay-panel-create-apply-modifiers-bg);
  box-shadow: var(--modifier-overlay-panel-create-modifiers-shadow);
}
.create--modifier-text {
  padding: var(--hds-spacing-2) var(--hds-spacing-2) var(--hds-spacing-2) var(--hds-spacing-3);
  color: var(--hds-foreground-secondary);
}
.create--modifier-buttons {
  padding: var(--hds-spacing-0) var(--hds-spacing-3) var(--hds-spacing-4) var(--hds-spacing-3);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.create--modifier-buttons-drag-drop {
  border-radius: 50px;
  border: 1px solid transparent;
}
.create--modifier-buttons-drag-drop .base-icon {
  --icon-color: var(--hds-foreground-primary);
}
.create--modifier-buttons-on-drop-eligible {
  border-style: dashed;
  border-color: var(--hds-foreground-inactive);
}
.create--modifier-buttons-on-drop-not-eligible {
  cursor: not-allowed;
}
.create--modifier-buttons-on-drop-not-eligible .base-icon {
  --icon-color: var(--hds-foreground-inactive);
}
.create--modifier-buttons-on-hover {
  border-color: transparent;
  outline: 2px solid var(--hds-action);
}
.modifier-map-overlay-panel-body-actions {
  z-index: 1;
  position: relative;
  border-bottom: 1px solid var(--hds-foreground-divider);
  height: var(--modifier-overlay-panel-header-height);
  display: flex;
  align-items: center;
}
.modifier-map-overlay-panel-body-actions .actions-left,
.modifier-map-overlay-panel-body-actions .actions-right {
  width: 100%;
  display: flex;
  align-items: center;
}
.modifier-map-overlay-panel-body-actions .actions-left > div,
.modifier-map-overlay-panel-body-actions .actions-right > div {
  padding: var(--hds-spacing-0) var(--hds-spacing-2);
}
.modifier-map-overlay-panel-body-actions .actions-left {
  justify-content: flex-start;
}
.modifier-map-overlay-panel-body-actions .actions-right {
  justify-content: flex-end;
}
.modifier-map-overlay-panel-body-modifiers-container {
  max-height: calc(100vh - (104px + 400px));
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--hds-spacing-2);
  gap: var(--hds-spacing-1);
}
.modifier-map-overlay-panel-body-modifiers-container.chrome-scrollbar .modifier-map-overlay-panel-first-time-notification {
  width: calc(287px - (var(--hds-spacing-7) + var(--hds-spacing-1)));
}
.modifier-map-overlay-panel-body-modifiers-container-empty {
  height: var(--hds-spacing-11);
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--hds-foreground-secondary);
}
.modifier-map-overlay-panel-body-modifiers-container-applied {
  height: var(--hds-spacing-11);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--hds-spacing-1);
  color: var(--hds-foreground-positive);
  --hds-icon-color: var(--hds-foreground-positive);
}
.modifier-map-overlay-panel-apply-modifiers-section {
  box-shadow: var(--hds-dropshadow-layer-3-drawer-offset-x, 0px) var(--hds-dropshadow-layer-3-drawer-offset-y, 0px) var(--hds-dropshadow-layer-3-drawer-radius, 2px) var(--hds-dropshadow-layer-3-drawer-spread, 0px) var(--hds-dropshadow-layer-3-drawer, rgba(0, 0, 0, 0.3)), var(--hds-dropshadow-layer-2-drawer-offset-x, 0px) var(--hds-dropshadow-layer-2-drawer-offset-y, -2.5px) var(--hds-dropshadow-layer-2-drawer-radius, 2.5px) var(--hds-dropshadow-layer-2-drawer-spread, 0px) var(--hds-dropshadow-layer-2-drawer, rgba(0, 0, 0, 0.08)), var(--hds-dropshadow-layer-1-drawer-offset-x, 0px) var(--hds-dropshadow-layer-1-drawer-offset-y, 0px) var(--hds-dropshadow-layer-1-drawer-radius, 8px) var(--hds-dropshadow-layer-1-drawer-spread, 0px) var(--hds-dropshadow-layer-1-drawer, rgba(0, 0, 0, 0.15)), var(--hds-dropshadow-layer-0-drawer-offset-x, 0px) var(--hds-dropshadow-layer-0-drawer-offset-y, -5px) var(--hds-dropshadow-layer-0-drawer-radius, 5px) var(--hds-dropshadow-layer-0-drawer-spread, 0px) var(--hds-dropshadow-layer-0-drawer, rgba(0, 0, 0, 0.15));
  border-top: 1px solid #e0f0fa1f;
  background-color: var(--modifier-overlay-panel-create-apply-modifiers-bg);
  border-bottom-left-radius: var(--hds-border-radius);
  border-bottom-right-radius: var(--hds-border-radius);
  display: flex;
  padding: var(--hds-spacing-3) var(--hds-spacing-2);
}
.modifier-map-overlay-panel-first-time-notification {
  width: calc(287px - var(--hds-spacing-7));
  display: flex;
  flex-direction: column;
  gap: var(--hds-spacing-2);
  padding: var(--hds-spacing-2);
  margin-bottom: var(--hds-spacing-1);
  border-radius: var(--hds-border-radius);
  background: #00FFF63D;
  color: var(--hds-foreground-primary);
}
.modifier-map-overlay-panel-first-time-notification-heading {
  display: flex;
  flex-direction: column;
  gap: var(--hds-spacing-2);
}
.modifier-map-overlay-panel-first-time-notification-heading .header-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.modifier-map-overlay-panel-first-time-notification-heading .heading-text {
  font: var(--hds-body-extrasmall-strong-font);
  width: calc(287px - var(--hds-spacing-9));
}
.modifier-map-overlay-panel-first-time-notification-heading .modifier-first-time-use-notification-link {
  color: var(--hds-action);
}
.modifier-map-overlay-panel-first-time-notification-heading .modifier-first-time-use-notification-link:hover {
  cursor: pointer;
  color: var(--hds-action-hover);
}
.modifier-overlay-panel-item {
  display: flex;
  flex-direction: column;
  padding: 0px !important;
  background-color: var(--hds-background-object) !important;
  border: 1px solid transparent;
  border-radius: var(--hds-border-radius);
}
.modifier-overlay-panel-item:hover {
  background-color: var(--hds-background-object-hover) !important;
}
.modifier-overlay-panel-item:active {
  background-color: var(--hds-background-object) !important;
}
.modifier-overlay-panel-item:last-of-type {
  margin-bottom: var(--hds-spacing-0);
}
.modifier-overlay-panel-item.modifier-overlay-panel-item-inactive .modifier-overlay-panel-item-header-icon {
  --icon-color: var(--hds-foreground-inactive);
}
.modifier-overlay-panel-item.modifier-overlay-panel-item-inactive .modifier-overlay-panel-item-header-icon hds-icon {
  --hds-icon-color: var(--hds-foreground-inactive);
}
.modifier-overlay-panel-item.modifier-overlay-panel-item-inactive .modifier-overlay-all-paths-checkbox {
  padding: var(--hds-spacing-4) var(--hds-spacing-4);
  color: var(--hds-foreground-inactive);
  --icon-color: var(--hds-foreground-inactive);
}
.modifier-overlay-panel-item.modifier-overlay-panel-item-inactive .modifier-overlay-all-paths-checkbox hds-icon {
  --hds-icon-color: var(--hds-foreground-inactive);
}
.modifier-overlay-panel-item.modifier-overlay-panel-item-inactive .ga-label {
  color: var(--hds-foreground-inactive) !important;
}
.modifier-overlay-panel-item.modifier-overlay-panel-item-inactive .ga-label-disabled {
  color: var(--hds-foreground-tertiary);
}
.modifier-overlay-panel-item.modifier-overlay-panel-item-inactive .modifier-overlay-path-label {
  color: var(--hds-foreground-inactive);
}
.modifier-overlay-panel-item.modifier-overlay-panel-item-inactive .modifier-overlay-panel-item-header-info {
  color: var(--hds-foreground-inactive);
  padding-right: var(--hds-spacing-2);
}
.modifier-overlay-panel-item.modifier-overlay-panel-item-on-drop-eligible {
  border-style: dashed;
  border-color: var(--hds-foreground-inactive);
}
.modifier-overlay-panel-item .modifier-overlay-panel-item-on-drop-ineligible {
  cursor: not-allowed;
}
.modifier-overlay-panel-item.modifier-overlay-panel-item-on-drop-hover {
  border-color: transparent;
  outline: 2px solid var(--hds-action);
}
.modifier-overlay-panel-item:hover .modifier-item-disable {
  visibility: visible;
  padding: var(--hds-spacing-0) var(--hds-spacing-2);
}
.modifier-overlay-panel-item:hover:not(.modifier-overlay-panel-item-expanded) .modifier-overlay-panel-item-header-info {
  max-width: 125px;
}
.modifier-overlay-panel-item-expanded:not(.modifier-overlay-panel-item-selected) {
  background-color: var(--hds-background-object) !important;
}
.modifier-overlay-panel-item-expanded:not(.modifier-overlay-panel-item-selected):hover {
  background-color: var(--hds-background-object) !important;
}
.modifier-overlay-panel-item-expanded:not(.modifier-overlay-panel-item-selected):active {
  background: var(--modifier-overlay-active-bg) !important;
}
.modifier-overlay-panel-item-expanded.modifier-overlay-panel-item-selected {
  border: 1px solid var(--modifier-overlay-active-border) !important;
  background: var(--modifier-overlay-active-bg) !important;
}
.modifier-overlay-panel-item-expanded.modifier-overlay-panel-item-selected:hover {
  background: var(--modifier-overlay-active-bg) !important;
}
.modifier-overlay-panel-item-expanded.modifier-overlay-panel-item-selected:active {
  background: var(--modifier-overlay-active-bg) !important;
}
.modifier-overlay-panel-item-expanded.modifier-overlay-panel-item-selected .modifier-overlay-panel-item-header {
  background: var(--modifier-overlay-active-header-bg);
}
.modifier-overlay-panel-item-expanded.modifier-overlay-panel-item-selected .modifier-overlay-panel-item-header .modifier-overlay-panel-item-header-left .modifier-overlay-panel-item-header-icon > hds-icon {
  --hds-icon-color: var(--hds-foreground-primary) !important;
}
.modifier-overlay-panel-item-expanded.modifier-overlay-panel-item-selected .modifier-overlay-panel-item-header .modifier-overlay-panel-item-header-left .modifier-overlay-panel-item-header-icon-disable > hds-icon {
  --hds-icon-color: var(--hds-foreground-inactive) !important;
}
.modifier-overlay-panel-item-expanded.modifier-overlay-panel-item-selected .modifier-overlay-panel-item-header .modifier-overlay-panel-item-header-left .modifier-overlay-panel-item-header-left-info-warning {
  --icon-color: var(--foreground-warning);
}
.modifier-overlay-panel-item-expanded.modifier-overlay-panel-item-selected .modifier-overlay-panel-item-body .modifier-overlay-panel-item-wrapper {
  background: var(--modifier-overlay-active-header-bg);
}
.modifier-overlay-panel-item-expanded.modifier-overlay-panel-item-selected .modifier-overlay-panel-item-body .modifier-overlay-panel-item-wrapper .ga-hsv-block .ga-hsv-row .ga-label {
  color: var(--hds-foreground-primary);
}
.modifier-overlay-panel-item-expanded.modifier-overlay-panel-item-selected .modifier-overlay-panel-item-body .modifier-overlay-panel-item-wrapper .ga-function-block .ga-function-item-row .ga-label {
  color: var(--hds-foreground-primary);
}
.modifier-overlay-panel-item-expanded.modifier-overlay-panel-item-selected .modifier-overlay-panel-item-body .modifier-overlay-panel-item-wrapper .ga-function-block-horizontal .ga-function-item-row-vertical .ga-label {
  color: var(--hds-foreground-primary);
}
.modifier-overlay-panel-item-expanded.modifier-overlay-panel-item-selected .modifier-overlay-panel-item-body .modifier-overlay-panel-item-wrapper .ga-function-block-horizontal .ga-function-item-row-vertical .ga-label:active {
  color: var(--hds-foreground-primary);
}
.modifier-overlay-panel-item-expanded.modifier-overlay-panel-item-selected .modifier-overlay-panel-item-body .modifier-overlay-panel-item-wrapper .ga-function-block-horizontal .ga-function-item-row-vertical .ga-label-disabled {
  color: var(--hds-foreground-tertiary);
}
.modifier-overlay-panel-item-expanded.modifier-overlay-panel-item-selected .modifier-overlay-panel-item-body .modifier-overlay-path-container .dropzone-wrapper .modifier-overlay-dropzone-container .ga-dropzone .ga-dropzone-heading {
  font: var(--hds-body-extrasmall-strong-font);
}
.modifier-overlay-panel-item-expanded.modifier-overlay-panel-item-selected .modifier-overlay-panel-item-body .modifier-overlay-path-container .dropzone-wrapper .modifier-overlay-dropzone-container .ga-dropzone .ga-dropzone-heading .ga-dropzone-heading-drag-drop {
  color: var(--hds-foreground-primary);
}
.modifier-overlay-panel-item-expanded.modifier-overlay-panel-item-selected .modifier-overlay-panel-item-body .modifier-overlay-path-container .modifier-overlay-all-paths-checkbox {
  color: var(--hds-foreground-primary);
}
.modifier-overlay-panel-item-expanded.modifier-overlay-panel-item-selected .modifier-overlay-panel-item-body .modifier-overlay-path-container .modifier-overlay-paths .modifier-overlay-path-label {
  color: var(--hds-foreground-primary);
}
.modifier-overlay-panel-item-expanded.modifier-overlay-panel-item-selected .modifier-overlay-panel-item-body .modifier-overlay-path-container .modifier-overlay-paths .modifier-overlay-path-label > div:first-of-type {
  color: var(--hds-foreground-secondary);
}
.modifier-overlay-panel-item-expanded.modifier-overlay-panel-item-selected .modifier-overlay-panel-item-body .modifier-overlay-path-container .modifier-overlay-paths .modifier-overlay-path-label > div:only-child {
  color: var(--hds-foreground-primary);
}
.modifier-overlay-panel-item-expanded.modifier-overlay-panel-item-selected .modifier-overlay-panel-item-body .modifier-overlay-path-container .modifier-overlay-paths .modifier-overlay-path-label-disabled > div {
  color: var(--hds-foreground-tertiary);
}
.modifier-overlay-panel-item-expanded.modifier-overlay-panel-item-selected .modifier-overlay-panel-item-body .modifier-overlay-path-container .modifier-overlay-paths .modifier-overlay-path-label-disabled > div:only-child {
  color: var(--hds-foreground-tertiary);
}
.modifier-overlay-panel-item-expanded .modifier-overlay-panel-item-header {
  border-top-left-radius: var(--hds-border-radius);
  border-top-right-radius: var(--hds-border-radius);
  background-color: var(--modifier-overlay-header-bg);
}
.modifier-overlay-panel-item-expanded .modifier-overlay-panel-item-header:hover {
  background-color: var(--hds-background-object-hover);
}
.modifier-overlay-panel-item-expanded .modifier-overlay-panel-item-header:hover .modifier-item-disable {
  visibility: visible;
}
.modifier-overlay-panel-item-expanded .modifier-overlay-panel-item-header:hover .modifier-overlay-panel-item-header-info {
  max-width: 125px;
}
.modifier-overlay-panel-item-expanded .modifier-overlay-panel-item-header:active {
  background-color: var(--modifier-overlay-active-header-bg);
}
.modifier-overlay-panel-item-expanded .modifier-overlay-panel-item-header:active .modifier-item-disable {
  visibility: visible;
}
.modifier-overlay-panel-item-expanded .modifier-overlay-panel-item-header:active .modifier-overlay-panel-item-header-info {
  max-width: 125px;
}
.modifier-overlay-panel-item-expanded:hover .modifier-item-disable {
  visibility: hidden;
}
.modifier-overlay-panel-item-header {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  padding: var(--hds-spacing-0) var(--hds-spacing-1) var(--hds-spacing-0) var(--hds-spacing-2);
}
.modifier-overlay-panel-item-header-left {
  display: flex;
  align-items: center;
}
.modifier-overlay-panel-item-header-left hds-icon {
  display: block;
}
.modifier-overlay-panel-item-header-expansion {
  --hds-icon-color: var(--hds-foreground-secondary);
  padding: var(--hds-spacing-0) calc(2 * var(--hds-spacing-1px));
}
.modifier-overlay-panel-item-header-icon {
  padding-left: var(--hds-spacing-2);
  --icon-color: var(--hds-foreground-primary);
}
.modifier-overlay-panel-item-header-icon hds-icon {
  --hds-icon-color: var(--hds-foreground-primary);
}
.modifier-overlay-panel-item-header-info {
  display: flex;
  flex-direction: column;
  gap: var(--hds-spacing-1);
  padding-left: var(--hds-spacing-1);
  padding-right: var(--hds-spacing-1);
  color: var(--hds-foreground-primary);
  max-width: 200px;
}
.modifier-overlay-panel-item-header-icon-disable + .modifier-overlay-panel-item-header-info {
  max-width: 125px;
}
.modifier-overlay-panel-item-header-info .modifier-overlay-panel-item-name-truncated {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.modifier-overlay-panel-item-header-actions-container {
  position: absolute;
  right: var(--hds-spacing-0);
}
.modifier-overlay-panel-item-header-actions {
  display: flex;
  align-items: center;
}
.modifier-overlay-panel-item-header-actions > div {
  display: flex;
  flex-direction: row;
}
.modifier-overlay-panel-item-renaming-input {
  height: 1.875rem;
  border: none;
  background-color: inherit;
  font: var(--hds-body-small-font);
  letter-spacing: var(--hds-body-small-letter-spacing);
  text-decoration: var(--hds-body-small-text-decoration, inherit);
  color: var(--hds-foreground-primary);
  font: var(--hds-body-extra-small-font);
  letter-spacing: var(--hds-body-extra-small-letter-spacing);
  text-decoration: var(--hds-body-extra-small-text-decoration, inherit);
  background-color: var(--hds-background-oncolor-hover);
  width: 130px;
  height: 0.875rem;
}
.modifier-item-disable {
  visibility: hidden;
  padding: var(--hds-spacing-0) var(--hds-spacing-2);
}
.modifier-item-enable {
  visibility: visible;
  padding: var(--hds-spacing-0) var(--hds-spacing-2);
}
.modifier-overlay-panel-item-body {
  display: flex;
  flex-direction: column;
  border-bottom-left-radius: var(--hds-border-radius);
  border-bottom-right-radius: var(--hds-border-radius);
}
.modifier-overlay-panel-item-body .modifier-overlay-panel-item-wrapper {
  background-color: var(--modifier-overlay-header-bg);
  padding: var(--hds-spacing-2) var(--hds-spacing-0) var(--hds-spacing-1);
}
.modifier-overlay-panel-item-menu {
  background-color: var(--hds-background-secondary);
  border-radius: var(--hds-border-radius);
  filter: var(--hds-overlay);
}
.modifier-overlay-panel-item-menu hds-list-item:first-of-type {
  border-top-left-radius: var(--hds-border-radius);
  border-top-right-radius: var(--hds-border-radius);
}
.modifier-overlay-panel-item-menu hds-list-item:last-of-type {
  border-bottom-left-radius: var(--hds-border-radius);
}
.modifier-overlay-panel-item-menu hds-list-item.has-separator {
  border-bottom: 1px solid var(--hds-foreground-divider);
}
.modifier-overlay-all-paths-checkbox {
  display: flex;
  align-items: center;
  color: var(--hds-foreground-secondary);
  padding: var(--hds-spacing-4) var(--hds-spacing-4);
  --icon-color: var(--hds-background-inverse);
}
.modifier-overlay-all-paths-checkbox hds-icon {
  --hds-icon-color: var(--hds-background-inverse);
}
.modifier-overlay-all-paths-checkbox .boolean-input-checkmark-checked {
  --hds-icon-color: var(--hds-ondarkcolor-primary);
  --icon-color: var(--hds-ondarkcolor-primary);
}
.modifier-overlay-panel-item-drag-highlight-divider {
  background-color: var(--hds-action);
  height: 2px;
  width: calc(287px - var(--hds-spacing-5));
  margin: var(--hds-spacing-0);
  flex-shrink: 0;
}
.modifier-overlay-panel-item-drag-highlight-divider.direction-after {
  margin-top: var(--hds-spacing-1);
}
.modifier-overlay-panel-item-drag-highlight-divider.direction-before {
  margin-bottom: var(--hds-spacing-1);
}
.map-view-overlay-overlay {
  position: relative;
}
.map-view-overlay-popover {
  display: flex;
  align-items: flex-end;
  z-index: 9;
  position: absolute;
  right: 100%;
  bottom: 0;
}
.map-view-overlay-card {
  max-height: 316px;
  position: absolute;
  right: 115%;
  min-width: 264px;
}
@media screen and (max-height: 899px) {
  .map-view-overlay-card-pos {
    bottom: 0;
  }
}
@media screen and (min-height: 900px) {
  .map-view-overlay-card-pos {
    top: 0;
  }
}
.map-view-overlay-container {
  min-width: 264px;
}
.map-view-overlay-header {
  display: flex;
  align-items: center;
  gap: var(--hds-spacing-2);
  padding: var(--hds-spacing-2);
  margin-bottom: calc(2 * var(--hds-spacing-1px));
  border-top-left-radius: var(--hds-border-radius);
  border-top-right-radius: var(--hds-border-radius);
  background-color: var(--hds-background-primary);
}
.map-view-overlay-popover-nibble {
  margin-left: calc(var(--tooltip-nibble-size));
  --nibble-color: var(--tooltip-bg);
  margin-top: 0px;
  margin-bottom: calc(var(--map-overlay-item-size) / 2 - var(--tooltip-nibble-size));
}
.map-view-overlay-button {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  --icon-color: var(--header-icon-color);
  width: var(--map-overlay-item-size);
  height: var(--map-overlay-item-size);
  border-radius: calc(var(--map-overlay-item-size) / 2);
  box-sizing: border-box;
  border: 1px solid #3F4855;
  box-shadow: 0 1px 4px 0 var(--shadow-color);
  background-color: var(--bg-color-panel-content);
}
.map-view-overlay-button-selected {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  --icon-color: var(--header-icon-color);
  width: var(--map-overlay-item-size);
  height: var(--map-overlay-item-size);
  border-radius: calc(var(--map-overlay-item-size) / 2);
  box-sizing: border-box;
  border: 1px solid #3F4855;
  box-shadow: 0 1px 4px 0 var(--shadow-color);
  background-color: var(--bg-color-panel-content);
  background-color: var(--selection-color);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--font-color-emphasized);
  --icon-color: var(--font-color-emphasized);
}
.map-view-overlay-button:hover,
.map-view-overlay-button-selected:hover {
  --icon-color: var(--font-color-emphasized);
}
.map-view-overlay-col {
  background-color: var(--hds-background-secondary);
  display: flex;
  flex-direction: column;
  padding: calc(var(--hds-spacing-3) - 2px) var(--hds-spacing-2);
  border-bottom: 1px solid var(--hds-foreground-divider);
}
.map-view-overlay-col:last-of-type {
  border-bottom-left-radius: var(--hds-border-radius);
  border-bottom-right-radius: var(--hds-border-radius);
  border-bottom: none;
}
.map-view-overlay-col .map-view-overlay-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: var(--hds-spacing-0) var(--hds-spacing-0) var(--hds-spacing-2);
}
.map-view-overlay-col .map-view-overlay-row hds-toggle {
  margin-right: calc(-1 * var(--hds-spacing-2));
}
.map-view-overlay-col .map-view-overlay-content {
  color: var(--hds-foreground-tertiary);
}
.map-view-overlay-row-column-layout {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.map-view-overlay-half-row {
  background-color: var(--colorblind-popup-body-bg-color);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0 calc(4 * var(--base-padding)) calc(2 * var(--base-padding)) calc(4 * var(--base-padding));
  gap: calc(4 * var(--base-padding));
}
.map-view-overlay-half-row:last-child {
  padding-bottom: calc(4 * var(--base-padding));
}
.map-view-overlay-row-left {
  flex-grow: 1;
  width: 1px;
}
.map-view-overlay-row-right {
  flex-grow: 1;
  width: 1px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.map-view-overlay-row-right-unaligned {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.map-view-overlay-row-right-centered {
  flex-grow: 1;
  width: 1px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.map-view-overlay-row-right-centered > *:not(:first-child) {
  margin-left: var(--base-padding);
}
.map-view-overlay-row-right-stacked {
  flex-grow: 1;
  width: 1px;
  display: flex;
  flex-direction: column;
}
.map-view-overlay-row-right-stacked > *:not(:first-child) {
  margin-top: calc(2 * var(--base-padding));
}
.map-view-overlay-row-right-columns {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.map-view-overlay-row-right-gap {
  gap: var(--hds-spacing-2);
}
.map-view-overlay-row-right-label {
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height);
  color: var(--font-color-hint);
  text-transform: uppercase;
  margin-right: calc(2 * var(--base-padding));
}
.map-view-overlay-map-overlay-button {
  position: relative;
}
.icon-editor-overlay {
  width: 287px;
  padding: var(--hds-spacing-0) !important;
  position: relative;
  background-color: var(--hds-background-secondary) !important;
  filter: var(--hds-overlay) !important;
  border-radius: var(--hds-border-radius);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--hds-foreground-divider);
}
.icon-editor-overlay-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--hds-background-primary);
  padding: var(--hds-spacing-1) var(--hds-spacing-1) var(--hds-spacing-1) var(--hds-spacing-4);
  border-bottom: 1px solid var(--hds-foreground-divider);
}
.icon-editor-overlay-title {
  display: flex;
  align-items: center;
  gap: var(--hds-spacing-2);
  --hds-icon-color: var(--hds-foreground-tertiary);
}
.icon-editor-overlay-title > div {
  height: var(--icon-box-size);
}
.icon-editor-overlay-title-help-icon {
  cursor: pointer;
  user-select: none;
}
.micon-editor-overlay--panel-header-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--hds-spacing-2);
  position: relative;
}
.micon-editor-overlay--panel-header-buttons::after {
  position: absolute;
  content: "";
  width: 1px;
  height: var(--icon-box-size);
  left: 50%;
  background-color: #4E5663;
  opacity: 22%;
}
.icon-editor-overlay-button {
  --hds-foreground-primary: var(--hds-background-secondary);
  flex-grow: 1;
  width: 1px;
}
.icon-editor-overlay-content {
  border-bottom-left-radius: var(--hds-border-radius);
  border-bottom-right-radius: var(--hds-border-radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--hds-spacing-2);
  background-color: var(--hds-background-secondary);
}
.icon-editor-overlay-content > div[class^="accordion-dense"] {
  background-color: var(--modifier-overlay-panel-preset-bg);
  padding: var(--hds-spacing-2) var(--hds-spacing-0);
}
.icon-editor-overlay-content > div[class^="accordion-dense"] .accordion-item-header {
  height: 1.5rem;
}
.icon-editor-overlay-content > div[class^="accordion-dense"] .accordion-item-header .layer-list-section-headline {
  color: var(--hds-foreground-secondary);
}
.icon-editor-overlay-content > div[class^="accordion-dense"] :hover {
  color: var(--hds-foreground-primary);
}
.icon-editor-overlay-content > div[class^="accordion-dense"] .layer-list-section-content {
  padding-top: var(--hds-spacing-0);
  padding-bottom: var(--hds-spacing-0);
}
.icon-editor-overlay-content > hds-notification {
  align-self: stretch;
  margin: var(--hds-spacing-2) var(--hds-spacing-2) 0 var(--hds-spacing-2);
}
.icon-editor-overlay-icon-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  background-color: var(--hds-background-object);
  margin: 0 var(--hds-spacing-2);
  border-radius: var(--hds-border-radius);
  padding: var(--hds-spacing-4);
  gap: var(--hds-spacing-2);
}
.icon-editor-overlay-icon-display:first-child {
  margin-top: var(--hds-spacing-2);
}
.icon-editor-overlay-icon {
  height: 42px;
  width: 42px;
  object-fit: contain;
}
.icon-editor-overlay-icon-name {
  font-family: var(--font-family);
  font-size: var(--text-size);
  font-style: normal;
  font-weight: 400;
  line-height: var(--text-size-dialog-big);
  letter-spacing: -0.048px;
  color: var(--font-color-secondary);
  --icon-color: var(--font-color-secondary);
  font-weight: 500;
  font-family: var(--font-family-emphasized);
  color: var(--hds-foreground-primary);
  --icon-color: var(--hds-foreground-primary);
}
.icon-editor-overlay-empty {
  background: repeating-conic-gradient(var(--hds-white-onlight-100-045) 0 25%, var(--hds-white-onlight-100-035) 0 50%) 50% / 8px 8px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: var(--icon-container-width);
  height: var(--icon-container-width);
  border-radius: var(--hds-border-radius);
  border: 1px dashed var(--hds-foreground-tertiary);
  --icon-container-width: 44px;
  --icon-container-height: 44px;
}
.icon-editor-overlay-thumbnail-container {
  background: repeating-conic-gradient(var(--hds-white-onlight-100-045) 0 25%, var(--hds-white-onlight-100-035) 0 50%) 50% / 8px 8px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: var(--icon-container-width);
  height: var(--icon-container-width);
  border-radius: var(--hds-border-radius);
  --icon-container-width: 44px;
  --icon-container-height: 44px;
}
.icon-editor-overlay-thumbnail {
  position: absolute;
  box-sizing: border-box;
  width: var(--icon-width);
  height: var(--icon-height);
  --half-width: calc(var(--icon-width) / 2);
  --half-height: calc(var(--icon-height) / 2);
  --half-background-width: calc(var(--icon-container-width) / 2);
  --half-background-height: calc(var(--icon-container-height) / 2);
  top: calc(var(--half-background-height) - var(--half-height));
  right: calc(var(--half-background-width) - var(--half-width));
  --icon-width: 36px;
  --icon-height: 36px;
}
.icon-editor-overlay-references {
  align-self: stretch;
  padding: var(--hds-spacing-2) var(--hds-spacing-4);
  display: flex;
  flex-direction: column;
  gap: var(--hds-spacing-2);
}
.icon-editor-overlay-references-label {
  font: var(--hds-body-extrasmall-strong-font);
  color: var(--hds-foreground-primary);
  --icon-color: var(--hds-foreground-primary);
}
.icon-editor-overlay-references-tags {
  display: flex;
  flex-direction: row;
}
.icon-editor-overlay-references-tags-inner {
  width: 1px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: var(--hds-spacing-2);
  align-items: flex-start;
}
.icon-row-label-pill {
  font-family: var(--font-family);
  font-size: var(--text-size);
  font-style: normal;
  font-weight: 400;
  line-height: var(--line-height-menu);
  letter-spacing: -0.024px;
  color: var(--font-color-subdued);
  color: var(--hds-foreground-secondary);
  --icon-color: var(--hds-foreground-secondary);
  background-color: var(--hds-background-object);
  height: var(--hds-spacing-4);
  border-radius: var(--hds-spacing-2);
  padding: 0 var(--hds-spacing-2);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: calc(100% - var(--hds-spacing-4));
}
.icon-row-more-labels-pill {
  cursor: pointer;
  user-select: none;
  font-family: var(--font-family);
  font-size: var(--text-size);
  font-style: normal;
  font-weight: 400;
  line-height: var(--text-size-dialog-big);
  letter-spacing: -0.048px;
  color: var(--font-color-secondary);
  --icon-color: var(--font-color-secondary);
  font-weight: 500;
  font-family: var(--font-family-emphasized);
  color: var(--hds-action);
  --icon-color: var(--hds-action);
}
.icon-row-more-labels-pill:hover {
  color: var(--hds-action-hover);
  --icon-color: var(--hds-action-hover);
}
.icon-editor-overlay-label-category {
  align-self: stretch;
  padding: var(--hds-spacing-2) var(--hds-spacing-4);
  display: flex;
  flex-direction: column;
  gap: var(--hds-spacing-2);
  gap: unset;
}
.icon-editor-overlay-label-category > .icon-editor-overlay-label-category-color {
  margin-top: var(--hds-spacing-2);
  margin-bottom: var(--hds-spacing-4);
}
.icon-editor-overlay-label-category-label {
  font: var(--hds-body-extrasmall-strong-font);
  color: var(--hds-foreground-primary);
  --icon-color: var(--hds-foreground-primary);
}
.icon-editor-overlay-label-category-color {
  font-family: var(--font-family);
  font-size: var(--text-size);
  font-style: normal;
  font-weight: 400;
  line-height: var(--text-size-dialog-big);
  letter-spacing: -0.048px;
  color: var(--font-color-secondary);
  --icon-color: var(--font-color-secondary);
  color: var(--hds-foreground-primary);
  --icon-color: var(--hds-foreground-primary);
  margin-top: var(--hds-spacing-2);
  margin-bottom: var(--hds-spacing-4);
  display: flex;
  gap: var(--hds-spacing-2);
  align-items: center;
}
.icon-editor-overlay-label-category-description {
  display: flex;
  flex-direction: row;
}
.icon-editor-overlay-label-category-description-inner {
  font-family: var(--font-family);
  font-size: var(--text-size);
  font-style: normal;
  font-weight: 400;
  line-height: var(--text-size-dialog-big);
  letter-spacing: -0.048px;
  color: var(--font-color-secondary);
  --icon-color: var(--font-color-secondary);
  color: var(--hds-foreground-secondary);
  --icon-color: var(--hds-foreground-secondary);
  width: 1px;
  flex-grow: 1;
}
.icon-editor-overlay-button-row {
  box-shadow: var(--hds-dropshadow-layer-3-drawer-offset-x, 0px) var(--hds-dropshadow-layer-3-drawer-offset-y, 0px) var(--hds-dropshadow-layer-3-drawer-radius, 2px) var(--hds-dropshadow-layer-3-drawer-spread, 0px) var(--hds-dropshadow-layer-3-drawer, rgba(0, 0, 0, 0.3)), var(--hds-dropshadow-layer-2-drawer-offset-x, 0px) var(--hds-dropshadow-layer-2-drawer-offset-y, -2.5px) var(--hds-dropshadow-layer-2-drawer-radius, 2.5px) var(--hds-dropshadow-layer-2-drawer-spread, 0px) var(--hds-dropshadow-layer-2-drawer, rgba(0, 0, 0, 0.08)), var(--hds-dropshadow-layer-1-drawer-offset-x, 0px) var(--hds-dropshadow-layer-1-drawer-offset-y, 0px) var(--hds-dropshadow-layer-1-drawer-radius, 8px) var(--hds-dropshadow-layer-1-drawer-spread, 0px) var(--hds-dropshadow-layer-1-drawer, rgba(0, 0, 0, 0.15)), var(--hds-dropshadow-layer-0-drawer-offset-x, 0px) var(--hds-dropshadow-layer-0-drawer-offset-y, -5px) var(--hds-dropshadow-layer-0-drawer-radius, 5px) var(--hds-dropshadow-layer-0-drawer-spread, 0px) var(--hds-dropshadow-layer-0-drawer, rgba(0, 0, 0, 0.15));
  align-self: stretch;
  background-color: var(--hds-background-object);
  padding: var(--hds-spacing-3) var(--hds-spacing-2);
  border-top: 1px solid var(--hds-foreground-divider);
}
.icon-editor-overlay-buttons {
  background-color: var(--hds-foreground-tertiary);
  border-radius: 1rem;
  display: flex;
  justify-content: space-between;
}
body {
  font-size: 20px;
  font-family: "Courier New", Courier, monospace;
  color: #F0F;
  background-color: transparent;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  position: fixed;
}
.harp4web-mapview {
  flex: 1;
  height: 100%;
}
.secondary-harp4web-mapview {
  flex: 1;
  height: 100%;
  border-left: 2px solid var(--hds-action);
}
.harp4web-mapview-container {
  display: flex;
  height: 100%;
  background-color: blue;
  position: absolute;
  z-index: 0;
}
.container-mapview-display {
  width: 100%;
  display: flex;
  justify-content: center;
  height: 100%;
  flex-wrap: wrap;
}
.schematic-popover {
  width: 306px;
  display: flex;
  flex-direction: column;
}
.schematic-popover-split-pos {
  position: absolute;
  bottom: 50px;
  left: 75%;
  transform: translateX(-50%);
}
.colorblind-popover-full-pos {
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
}
.schematic-popover-header {
  padding: var(--hds-spacing-2) var(--hds-spacing-4);
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
  gap: calc(2 * var(--base-padding));
  background-color: var(--hds-background-primary);
  border-top-left-radius: var(--hds-border-radius);
  border-top-right-radius: var(--hds-border-radius);
}
.schematic-popover-body {
  background-color: var(--hds-background-secondary);
  padding: var(--hds-spacing-4);
  border-bottom-left-radius: var(--hds-border-radius);
  border-bottom-right-radius: var(--hds-border-radius);
}
.schematic-popover-body .schematic-popover-menuList {
  height: auto;
}
.select-item {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  white-space: nowrap;
  height: var(--header-line-height);
  padding: 0 calc(2 * var(--base-padding));
  font-family: var(--font-family);
  font-size: var(--text-size-menu);
  line-height: var(--line-height);
  color: var(--font-color-secondary);
  --icon-color: var(--font-color-secondary);
}
.select-item:hover {
  background-color: var(--bg-color-popup-item-hover);
  font-family: var(--font-family);
  font-size: var(--text-size-menu);
  line-height: var(--line-height);
  color: var(--font-color-primary);
  --icon-color: var(--font-color-secondary);
}
.select-item-disabled {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  white-space: nowrap;
  height: var(--header-line-height);
  padding: 0 calc(2 * var(--base-padding));
  font-family: var(--font-family);
  font-size: var(--text-size-menu);
  line-height: var(--line-height);
  color: var(--font-color-disabled);
  --icon-color: var(--font-color-disabled);
}
.select-item-selected {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  white-space: nowrap;
  height: var(--header-line-height);
  padding: 0 calc(2 * var(--base-padding));
  font-family: var(--font-family);
  font-size: var(--text-size-menu);
  line-height: var(--line-height);
  color: var(--font-color-primary);
  --icon-color: var(--font-color-secondary);
}
.select-item-selected:hover {
  background-color: var(--bg-color-popup-item-hover);
  font-family: var(--font-family);
  font-size: var(--text-size-menu);
  line-height: var(--line-height);
  color: var(--font-color-primary);
  --icon-color: var(--font-color-secondary);
}
.select-item-large {
  padding: 0 calc(4 * var(--base-padding));
  height: var(--popup-item-height-large);
}
.menu-item {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  white-space: nowrap;
  height: var(--header-line-height);
  padding: 0 calc(2 * var(--base-padding));
  font-family: var(--font-family);
  font-size: var(--text-size-menu);
  line-height: var(--line-height);
  color: var(--font-color-secondary);
  --icon-color: var(--font-color-secondary);
  padding: 0 calc(4 * var(--base-padding));
  height: var(--popup-item-height-large);
}
.menu-item:hover {
  background-color: var(--bg-color-popup-item-hover);
  font-family: var(--font-family);
  font-size: var(--text-size-menu);
  line-height: var(--line-height);
  color: var(--font-color-primary);
  --icon-color: var(--font-color-secondary);
}
.menu-item-disabled {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  white-space: nowrap;
  height: var(--header-line-height);
  padding: 0 calc(2 * var(--base-padding));
  font-family: var(--font-family);
  font-size: var(--text-size-menu);
  line-height: var(--line-height);
  color: var(--font-color-disabled);
  --icon-color: var(--font-color-disabled);
  padding: 0 calc(4 * var(--base-padding));
  height: var(--popup-item-height-large);
  cursor: default;
}
.menu-item-selected {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  white-space: nowrap;
  height: var(--header-line-height);
  padding: 0 calc(2 * var(--base-padding));
  color: var(--font-color-secondary);
  padding: 0 calc(4 * var(--base-padding));
  height: var(--popup-item-height-large);
  font-family: var(--font-family);
  font-size: var(--text-size-menu);
  line-height: var(--line-height);
  color: var(--font-color-primary);
  --icon-color: var(--font-color-secondary);
}
.menu-item-selected:hover {
  background-color: var(--bg-color-popup-item-hover);
  font-family: var(--font-family);
  font-size: var(--text-size-menu);
  line-height: var(--line-height);
  color: var(--font-color-primary);
  --icon-color: var(--font-color-secondary);
}
.clear-scrollbar::-webkit-scrollbar {
  width: var(--scrollbar-expanded-grabber-width);
}
.clear-scrollbar::-webkit-scrollbar-track {
  background-color: inherit;
  border-radius: inherit;
}
.clear-scrollbar::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-color-hover);
  border-radius: calc(var(--scrollbar-expanded-grabber-width) / 2);
}
.subtract-scrollbar {
  margin-right: calc(-1 * var(--scrollbar-width));
}
.disabled-button-modifier {
  opacity: var(--input-disabled-opacity);
  pointer-events: none;
  cursor: default;
}
.aqua-button-color {
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-menu);
  color: var(--font-color);
  --icon-color: var(--font-color);
  background-color: transparent;
  border: var(--border-size) solid var(--border-color);
  border-radius: var(--input-border-radius);
  border-color: var(--main-button-color);
  box-sizing: border-box;
  --divider-color-override: var(--main-button-color);
}
.main-aqua-button-color {
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-menu);
  color: var(--font-color);
  --icon-color: var(--font-color);
  color: var(--main-button-font-color);
  background-color: var(--main-button-color);
  --divider-color-override: var(--main-button-color);
  border: none;
  border-radius: var(--input-border-radius);
}
.checkerboard-background {
  --checker-half-size: calc(var(--checker-size) / 2);
  --checker-off-color: transparent;
  --checker-color: rgba(128, 128, 128, var(--checker-opacity));
  background-image: linear-gradient(45deg, var(--checker-color) 25%, var(--checker-off-color) 25%), linear-gradient(-45deg, var(--checker-color) 25%, var(--checker-off-color) 25%), linear-gradient(45deg, var(--checker-off-color) 75%, var(--checker-color) 75%), linear-gradient(-45deg, var(--checker-off-color) 75%, var(--checker-color) 75%);
  background-size: var(--checker-size) var(--checker-size);
  background-position: 0 0, 0 var(--checker-half-size), var(--checker-half-size) calc(-1 * var(--checker-half-size)), calc(-1 * var(--checker-half-size)) 0px;
}
.lighter-checkerboard-background {
  --checker-half-size: calc(var(--checker-size) / 2);
  --checker-off-color: transparent;
  --checker-color: #535c6b;
  background-image: linear-gradient(45deg, var(--checker-color) 25%, var(--checker-off-color) 25%), linear-gradient(-45deg, var(--checker-color) 25%, var(--checker-off-color) 25%), linear-gradient(45deg, var(--checker-off-color) 75%, var(--checker-color) 75%), linear-gradient(-45deg, var(--checker-off-color) 75%, var(--checker-color) 75%);
  background-size: var(--checker-size) var(--checker-size);
  background-position: 0 0, 0 var(--checker-half-size), var(--checker-half-size) calc(-1 * var(--checker-half-size)), calc(-1 * var(--checker-half-size)) 0px;
}
.icon-checkerboard-pattern {
  background: repeating-conic-gradient(var(--hds-white-onlight-100-045) 0 25%, var(--hds-white-onlight-100-035) 0 50%) 50% / 8px 8px;
}
.checkerboard-background-big {
  --checker-opacity: 1;
  --checker-size: 20px;
  --checker-half-size: calc(var(--checker-size) / 2);
  --checker-off-color: transparent;
  --checker-color: rgba(128, 128, 128, var(--checker-opacity));
  background-image: linear-gradient(45deg, var(--checker-color) 25%, var(--checker-off-color) 25%), linear-gradient(-45deg, var(--checker-color) 25%, var(--checker-off-color) 25%), linear-gradient(45deg, var(--checker-off-color) 75%, var(--checker-color) 75%), linear-gradient(-45deg, var(--checker-off-color) 75%, var(--checker-color) 75%);
  background-size: var(--checker-size) var(--checker-size);
  background-position: 0 0, 0 var(--checker-half-size), var(--checker-half-size) calc(-1 * var(--checker-half-size)), calc(-1 * var(--checker-half-size)) 0px;
}
.checkerboard-background-medium {
  --checker-opacity: 1;
  --checker-size: 12px;
  --checker-half-size: calc(var(--checker-size) / 2);
  --checker-off-color: transparent;
  --checker-color: rgba(128, 128, 128, var(--checker-opacity));
  background-image: linear-gradient(45deg, var(--checker-color) 25%, var(--checker-off-color) 25%), linear-gradient(-45deg, var(--checker-color) 25%, var(--checker-off-color) 25%), linear-gradient(45deg, var(--checker-off-color) 75%, var(--checker-color) 75%), linear-gradient(-45deg, var(--checker-off-color) 75%, var(--checker-color) 75%);
  background-size: var(--checker-size) var(--checker-size);
  background-position: 0 0, 0 var(--checker-half-size), var(--checker-half-size) calc(-1 * var(--checker-half-size)), calc(-1 * var(--checker-half-size)) 0px;
}
.checkerboard-background-small {
  --checker-opacity: 1;
  --checker-size: 6px;
  --checker-half-size: calc(var(--checker-size) / 2);
  --checker-off-color: transparent;
  --checker-color: rgba(128, 128, 128, var(--checker-opacity));
  background-image: linear-gradient(45deg, var(--checker-color) 25%, var(--checker-off-color) 25%), linear-gradient(-45deg, var(--checker-color) 25%, var(--checker-off-color) 25%), linear-gradient(45deg, var(--checker-off-color) 75%, var(--checker-color) 75%), linear-gradient(-45deg, var(--checker-off-color) 75%, var(--checker-color) 75%);
  background-size: var(--checker-size) var(--checker-size);
  background-position: 0 0, 0 var(--checker-half-size), var(--checker-half-size) calc(-1 * var(--checker-half-size)), calc(-1 * var(--checker-half-size)) 0px;
}
.checkerboard-background-big-subdued {
  --checker-opacity: 0.5;
  --checker-size: 20px;
  --checker-half-size: calc(var(--checker-size) / 2);
  --checker-off-color: transparent;
  --checker-color: rgba(128, 128, 128, var(--checker-opacity));
  background-image: linear-gradient(45deg, var(--checker-color) 25%, var(--checker-off-color) 25%), linear-gradient(-45deg, var(--checker-color) 25%, var(--checker-off-color) 25%), linear-gradient(45deg, var(--checker-off-color) 75%, var(--checker-color) 75%), linear-gradient(-45deg, var(--checker-off-color) 75%, var(--checker-color) 75%);
  background-size: var(--checker-size) var(--checker-size);
  background-position: 0 0, 0 var(--checker-half-size), var(--checker-half-size) calc(-1 * var(--checker-half-size)), calc(-1 * var(--checker-half-size)) 0px;
}
.checkerboard-background-medium-subdued {
  --checker-opacity: 0.5;
  --checker-size: 12px;
  --checker-half-size: calc(var(--checker-size) / 2);
  --checker-off-color: transparent;
  --checker-color: rgba(128, 128, 128, var(--checker-opacity));
  background-image: linear-gradient(45deg, var(--checker-color) 25%, var(--checker-off-color) 25%), linear-gradient(-45deg, var(--checker-color) 25%, var(--checker-off-color) 25%), linear-gradient(45deg, var(--checker-off-color) 75%, var(--checker-color) 75%), linear-gradient(-45deg, var(--checker-off-color) 75%, var(--checker-color) 75%);
  background-size: var(--checker-size) var(--checker-size);
  background-position: 0 0, 0 var(--checker-half-size), var(--checker-half-size) calc(-1 * var(--checker-half-size)), calc(-1 * var(--checker-half-size)) 0px;
}
.checkerboard-background-small-subdued {
  --checker-opacity: 0.5;
  --checker-size: 6px;
  --checker-half-size: calc(var(--checker-size) / 2);
  --checker-off-color: transparent;
  --checker-color: rgba(128, 128, 128, var(--checker-opacity));
  background-image: linear-gradient(45deg, var(--checker-color) 25%, var(--checker-off-color) 25%), linear-gradient(-45deg, var(--checker-color) 25%, var(--checker-off-color) 25%), linear-gradient(45deg, var(--checker-off-color) 75%, var(--checker-color) 75%), linear-gradient(-45deg, var(--checker-off-color) 75%, var(--checker-color) 75%);
  background-size: var(--checker-size) var(--checker-size);
  background-position: 0 0, 0 var(--checker-half-size), var(--checker-half-size) calc(-1 * var(--checker-half-size)), calc(-1 * var(--checker-half-size)) 0px;
}
.lighter-checkerboard-background-medium-subdued {
  --checker-opacity: 0.5;
  --checker-size: 12px;
  --checker-half-size: calc(var(--checker-size) / 2);
  --checker-off-color: transparent;
  --checker-color: #535c6b;
  background-image: linear-gradient(45deg, var(--checker-color) 25%, var(--checker-off-color) 25%), linear-gradient(-45deg, var(--checker-color) 25%, var(--checker-off-color) 25%), linear-gradient(45deg, var(--checker-off-color) 75%, var(--checker-color) 75%), linear-gradient(-45deg, var(--checker-off-color) 75%, var(--checker-color) 75%);
  background-size: var(--checker-size) var(--checker-size);
  background-position: 0 0, 0 var(--checker-half-size), var(--checker-half-size) calc(-1 * var(--checker-half-size)), calc(-1 * var(--checker-half-size)) 0px;
}
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
}
.grid-item + .grid-item {
  margin-left: calc(5 * var(--base-padding));
}
.pull-left {
  float: left;
}
.card-container {
  display: flex;
  flex-direction: column;
  border-radius: var(--hds-border-radius);
  background: var(--hds-background-primary);
}
.card-subtle {
  filter: var(--hds-object--subtle);
}
.card-floating {
  filter: var(--hds-overlay);
}
.accordion-item {
  cursor: pointer;
  user-select: none;
  display: flex;
  flex-direction: column;
  border-radius: var(--hds-border-radius);
}
.accordion-solid > .accordion-item {
  background-color: var(--hds-background-object);
}
.accordion-solid > .accordion-item:hover {
  background-color: var(--hds-background-object-hover);
}
.accordion-solid > .accordion-item.active {
  background-color: var(--hds-background-object-press);
}
.accordion-solid > .accordion-item.accordion-item-selected:not(.accordion-item-expanded) {
  background-color: var(--modifier-overlay-panel-create-apply-modifiers-active-bg);
}
.accordion-solid > .accordion-item.accordion-item-disabled {
  color: var(--hds-foreground-inactive);
  cursor: default;
  pointer-events: all;
}
.accordion-solid > .accordion-item.accordion-item-disabled .accordion-item-header-left,
.accordion-solid > .accordion-item.accordion-item-disabled .accordion-item-header-right {
  --hds-icon-color: var(--hds-foreground-inactive);
  --icon-color: var(--hds-foreground-inactive);
}
.accordion-subtle > .accordion-item:hover {
  background-color: var(--hds-background-hover);
}
.accordion-subtle > .accordion-item.active {
  background-color: var(--hds-background-press);
}
.accordion-subtle > .accordion-item.accordion-item-selected:not(.accordion-item-expanded) {
  background-color: var(--modifier-overlay-panel-create-apply-modifiers-active-bg);
}
.accordion-subtle > .accordion-item.accordion-item-disabled {
  background-color: initial;
  color: var(--hds-foreground-inactive);
  cursor: default;
  pointer-events: all;
}
.accordion-subtle > .accordion-item.accordion-item-disabled .accordion-item-header-left,
.accordion-subtle > .accordion-item.accordion-item-disabled .accordion-item-header-right {
  --hds-icon-color: var(--hds-foreground-inactive);
  --icon-color: var(--hds-foreground-inactive);
}
.accordion-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2rem;
  padding-left: var(--hds-spacing-2);
}
.accordion-item-header-left,
.accordion-item-header-right {
  display: flex;
  align-items: center;
  justify-content: center;
}
.accordion-item-truncated .accordion-item-header-left {
  max-width: 70%;
}
.accordion-item-header-left {
  white-space: nowrap;
}
.chevron-left,
.chevron-right {
  --hds-icon-color: var(--hds-foreground-secondary);
}
.accordion-item-header-divider {
  height: 1px;
  width: 100%;
  background-color: var(--hds-foreground-divider);
  margin-left: 8px;
}
.number-slider-container {
  background: var(--hds-background-secondary);
  color: var(--hds-foreground-secondary);
  border-radius: var(--hds-border-radius);
  padding: var(--hds-spacing-1);
  min-height: calc(var(--hds-spacing-6) + var(--hds-spacing-1));
  min-width: calc(var(--hds-spacing-14) + var(--hds-spacing-3));
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--hds-spacing-2);
  filter: var(--hds-overlay);
  margin-left: var(--hds-spacing-2);
}
.number-slider-input-container {
  display: flex;
  gap: var(--hds-spacing-1);
  --input-border-radius: var(--hds-border-radius);
  --input-border-color-hover: var(--hds-foreground-tertiary-hover);
  --input-border-color-focussed: var(--hds-object-focused);
  --input-border-color-active: var(--hds-foreground-tertiary);
  --input-border-color-inactive: var(--hds-foreground-tertiary-disabled);
  --input-bg-color-inactive: var(--hds-background-primary);
  --input-bg-color-active: var(--hds-background-secondary);
}
.navbar-left {
  display: inline-flex;
  padding: var(--hds-spacing-3) var(--hds-spacing-2);
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
  border-right: 1px solid var(--hds-foreground-divider);
  background: var(--hds-background-secondary);
  gap: var(--hds-spacing-3);
}
.navbar-left hds-tooltip {
  --hds-tooltip--z-index: 9 !important;
}
.switcher-tab {
  position: relative;
}
.switcher-tab-text {
  font: var(--hds-body-extrasmall-strong-font);
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
}
.switcher-tab-text .text-icon {
  display: flex;
  margin-left: var(--hds-spacing-2);
  --hds-icon-color: var(--hds-foreground-secondary);
}
.switcher-tab-text hds-tooltip {
  --hds-tooltip--z-index: 9 !important;
}
.switcher-tab-text:hover .switcher-tab-icon,
.switcher-tab-text.with-fixed-info-icon .switcher-tab-icon {
  visibility: visible;
}
.switcher-tab-text.with-fixed-width {
  min-width: var(--hds-spacing-11);
}
.switcher-tab-text #layerswitcheroverlaytooltip {
  margin-left: var(--hds-spacing-1);
}
.switcher-tab-icon {
  visibility: hidden;
  --icon-color: var(--hds-foreground-tertiary);
}
.switcher-tab-dot {
  position: absolute;
  right: var(--hds-spacing-2);
  width: var(--hds-spacing-1);
  height: var(--hds-spacing-1);
  border-radius: 2px;
  background-color: var(--hds-accent);
}
div[class$="-ValueContainer"] {
  font: var(--hds-body-extrasmall-font);
  padding-bottom: var(--hds-spacing-0);
}
.hds-search-field-clear-btn {
  cursor: pointer;
  user-select: none;
}
.with-elevation {
  z-index: 1001;
  pointer-events: none;
}
.hds-tooltip-wrapper {
  max-width: var(--tooltip-content-max-width);
  text-align: left;
  overflow-wrap: break-word;
}
.hds-tooltip-wrapper .base-icon {
  --icon-color: var(var(--icon-color), --hds-inverse-primary);
  vertical-align: text-top;
}
.hds-tooltip-wrapper .hds-toast-notification-action .base-icon {
  --icon-color: inherit;
}
/********** Styling for default browser scrollbar ***********/
.chrome-scrollbar::-webkit-scrollbar {
  width: var(--hds-spacing-1);
  /* width of the scrollbar */
}
.chrome-scrollbar::-webkit-scrollbar-track {
  background: var(--hds-background-secondary);
  /* color of the track */
}
.chrome-scrollbar::-webkit-scrollbar-thumb {
  background: var(--scrollbar-color);
  /* color of the thumb */
  border-radius: calc(var(--hds-spacing-2) / 2);
}
.firefox-scrollbar {
  scrollbar-color: var(--scrollbar-color) var(--hds-background-secondary);
  scrollbar-width: thin;
}
.component-inner-text-input-prefix {
  font-family: var(--font-family);
  font-size: var(--text-size-tiny);
  color: var(--font-color);
  --icon-color: var(--font-color);
  line-height: var(--line-height-tiny);
  color: var(--hds-foreground-secondary);
  --icon-color: var(--hds-foreground-secondary);
}
.item-text-selected {
  font-family: var(--font-family);
  font-size: var(--text-size);
  color: var(--font-color-group-item);
  --icon-color: var(--font-color-group-item);
  line-height: var(--line-height);
}
.item-text-disabled {
  font-family: var(--font-family);
  font-size: var(--text-size);
  line-height: var(--line-height-menu);
  color: var(--font-color-disabled);
  --icon-color: var(--font-color-disabled);
}
.trans-bold {
  font-family: var(--font-family-emphasized);
  font-weight: 500;
}
.trans-italic {
  font-style: italic;
}
/* Global/Layout/caption */
.caption {
  font-family: var(--font-family);
  font-size: var(--text-size);
  font-style: normal;
  font-weight: 400;
  line-height: var(--line-height-menu);
  letter-spacing: -0.024px;
  color: var(--font-color-subdued);
}
/* HDS styles */
/* Global/Body/body */
/* Global/Body/body-strong */
/* Global/Body/body-extrasmall */
/* Global/Body/body-small-strong */
/* Global/Headlines/subheadline */
/* Desktop/Headlines/headline-03 */
/* Headlines/headline-04 */
/* Headlines/headline-05 */
/* Desktop/Headlines/headline-06 */
/* Global/Components/Avatar/avatar-initials-small; */
.hds-body--extrasmall {
  font: var(--hds-body-extrasmall-font);
}
.hds-body--extrasmall-lineheight {
  line-height: var(--hds-body-extrasmall-line-height);
}
.hds-strong--extrasmall {
  font: var(--hds-body-extrasmall-strong-font);
}
.hds-link--extrasmall {
  font: var(--hds-body-extrasmall-link-font);
}
.hds-caption--strong {
  font: var(--hds-caption-strong-font);
}
/* Global/Components/button */
.map-picking-popover-base {
  --bg-color-popup: #272d37;
  pointer-events: all;
  position: absolute;
  display: flex;
  z-index: 11;
}
.map-picking-popover-top {
  bottom: calc(var(--container-height) - var(--y));
}
.map-picking-popover-right {
  --bg-color-popup: #272d37;
  pointer-events: all;
  position: absolute;
  display: flex;
  z-index: 11;
  flex-direction: row-reverse;
  left: var(--x);
}
.map-picking-popover-bottom {
  --bg-color-popup: #272d37;
  pointer-events: all;
  position: absolute;
  display: flex;
  z-index: 11;
  top: calc(var(--y));
}
.map-picking-popover-left {
  --bg-color-popup: #272d37;
  pointer-events: all;
  position: absolute;
  display: flex;
  z-index: 11;
  flex-direction: row;
  right: calc(var(--container-width) - var(--x));
}
.map-picking-popover-content {
  overflow-y: auto;
  width: 260px;
  min-height: 40px;
  max-height: 370px;
  background-color: var(--hds-background-secondary);
  border-radius: var(--hds-border-radius);
  filter: var(--hds-overlay);
  padding: var(--hds-spacing-2) var(--hds-spacing-0) var(--hds-spacing-2) var(--hds-spacing-2);
}
.map-picking-overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  pointer-events: none;
}
.breadcrumb-active-item {
  text-transform: capitalize;
}
.map-picking-nibble {
  z-index: 1;
  position: absolute;
  border-radius: 50%;
  border: var(--hds-spacing-1) solid var(--hds-warning);
  background-color: var(--hds-foreground-secondary);
  width: var(--hds-spacing-2);
  height: var(--hds-spacing-2);
}
.map-picking-nibble.nibble-left {
  left: calc(-1 * var(--hds-spacing-2));
}
.map-picking-nibble.nibble-right {
  right: calc(-1 * var(--hds-spacing-2));
}
.map-picking-nibble.nibble-start {
  top: calc(-1 * var(--hds-spacing-2));
}
.map-picking-nibble.nibble-end {
  bottom: calc(-1 * var(--hds-spacing-2));
}
body {
  font-size: 20px;
  font-family: "Courier New", Courier, monospace;
  color: #F0F;
  background-color: transparent;
  overflow: hidden;
  display: flex;
  flex-direction: row;
}