/*------------------------------------------------------------------------------------*/
/* This file defines all CSS properties making up a DÜRR design theme.                */
/*------------------------------------------------------------------------------------*/
/* Naming convention for CSS properties:                                              */
/*                                                                                    */
/* --dd-[<element>-][<part>-]<property>-[<state>]                                     */
/* --dd-[<scope>-]<property>-[<state>]                                                */
/*                                                                                    */
/* where                                                                              */
/*                                                                                    */
/*    <element>   Name of a standard or custom HTML element                           */
/*    <scope>     Name of a CSS class or a group/category of related elements         */
/*    <property>  Name of a CSS property                                              */
/*    <state>     Name of a CSS pseudo class or boolean element attribute             */
/*                                                                                    */
/*------------------------------------------------------------------------------------*/

/*------------------------------------------------------------------------------------*/
/* CSS PROPERTIES                                                                     */
/*------------------------------------------------------------------------------------*/

/*------------------------------------------------------------------------------------*/
/* COLOR PALETTE                                                                      */
/*------------------------------------------------------------------------------------*/
/* IMPORTANT: ALL CONCRETE COLOR VALUES MUST BE DEFINED HERE !                        */
/*------------------------------------------------------------------------------------*/
:root {
   /* A primary color is a color displayed most frequently across an app’s screens and components.  */
   --dd-primary-color-050: #F0F0F0;
   --dd-primary-color-100: #E1E1E1;
   --dd-primary-color-200: #D2D2D2;
   --dd-primary-color-300: #AAAAAA;
   --dd-primary-color-400: #828282;
   --dd-primary-color-500: #505050;
   --dd-primary-color-600: #3C3C3C;
   --dd-primary-color-700: #373737;
   --dd-primary-color-800: #323232;
   --dd-primary-color-830: #282828;
   --dd-primary-color-870: #232323;
   --dd-primary-color-900: #191919;
   --dd-primary-color-930: #141414;
   --dd-primary-color-970: #0A0A0A;
   --dd-primary-color-lightest: var(--dd-primary-color-050);
   --dd-primary-color-darkest: var(--dd-primary-color-970);
   /* A secondary color provides more ways to accent and distinguish the product. */
   --dd-secondary-color-100: #80DDF7;
   --dd-secondary-color-300: #00BBEE; /* DÜRR DENTAL Corporate */
   --dd-secondary-color-500: #0096E2;
   --dd-secondary-color-600: #007BAF; /* DÜRR DENTAL Corporate */
   --dd-secondary-color-700: #00537D;
   --dd-secondary-color-900: #212C38;
}

/* SHADOWS */
:root {
   --dd-box-shadow-blur-radius-1: 8px;
   --dd-box-shadow-blur-radius-2: 16px;
   --dd-box-shadow-color: var(--dd-primary-color-darkest);
   --dd-box-shadow-1: 0 0 var(--dd-box-shadow-blur-radius-1) var(--dd-box-shadow-color);
   --dd-box-shadow-2: 0 0 var(--dd-box-shadow-blur-radius-2) var(--dd-box-shadow-color);
}

/* SEMANTIC COLORS, BORDERS & SHADOWS */
:root {
   --dd-background-color-lightest: var(--dd-primary-color-600);
   --dd-background-color-input: var(--dd-primary-color-930);
   --dd-background-selected: var(--dd-secondary-color-900);
   --dd-background-overlay: rgba(10, 10, 10, 0.8);
   --dd-color-standard: var(--dd-primary-color-300);
   --dd-color-secondary: var(--dd-primary-color-400);
   --dd-color-disabled: var(--dd-primary-color-500);
   --dd-color-placeholder: var(--dd-primary-color-500);
   --dd-color-emphasize: var(--dd-primary-color-200);
   --dd-color-active: var(--dd-primary-color-100);
   --dd-color-selected: var(--dd-secondary-color-500);
   --dd-color-highlight: var(--dd-secondary-color-500);
   --dd-color-focus: var(--dd-secondary-color-500);
   --dd-color-attention: #F27900;
   --dd-color-valid: #1B9243;
   --dd-color-invalid: #F27900;
   --dd-color-done: #1B9243;
   --dd-color-canceled: #ED6A33;
   --dd-color-info: #69ADBA;
   --dd-color-warning: #F28E1C;
   --dd-color-error: #ED6A33;
   --dd-color-fatal: #CF4016;
   --dd-color-pulsating: var(--dd-color-highlight);
   --dd-border-color-selected: var(--dd-color-highlight);
   --dd-border-width-selected: 2px;
   --dd-border-selected: var(--dd-border-color-selected) solid var(--dd-border-width-selected);
   --dd-box-shadow-focused: inset 0 0 0 1px var(--dd-color-focus);
   --dd-box-shadow-selected-horizontal: inset 0 calc(-1 * var(--dd-border-width-selected)) 0 0 var(--dd-color-highlight);
   --dd-box-shadow-selected-vertical: inset var(--dd-border-width-selected) 0 0 0 var(--dd-color-highlight);
   --dd-hover-opacity-strong: 0.1;
   --dd-hover-opacity-weak: 0.06;
   --dd-hover-z-index: 10; /* vaadin uses single-digit indices internally */
   --dd-hover-brightness-strong: calc(1 + var(--dd-hover-opacity-strong));
   --dd-opacity-disabled: 0.3;
}

/* TYPOGRAPHY */
:root {
   /* Discrete sizes, weights, heights and spacings */
   --dd-font-family: Roboto;
   --dd-font-weight-regular: 400;
   --dd-font-weight-strong: 500;
   --dd-font-size-small: 11px;
   --dd-font-size-medium: 13px;
   --dd-font-size-large: 15px;
   --dd-font-size-huge: 18px;
   --dd-letter-spacing-dense: 0.02em;
   --dd-letter-spacing-standard: 0.04em;
   --dd-letter-spacing-airy: 0.08em;
   --dd-line-height: 1.355;
   /* Semantic fonts */
   --dd-font-body: var(--dd-font-weight-regular) var(--dd-font-size-medium)/var(--dd-line-height) var(--dd-font-family);
   --dd-font-button: var(--dd-font-weight-strong) var(--dd-font-size-medium)/var(--dd-line-height) var(--dd-font-family);
   --dd-font-caption: var(--dd-font-weight-regular) var(--dd-font-size-small)/var(--dd-line-height) var(--dd-font-family);
   --dd-font-header: var(--dd-font-weight-regular) var(--dd-font-size-large)/var(--dd-line-height) var(--dd-font-family);
   --dd-font-title: var(--dd-font-weight-strong) var(--dd-font-size-huge)/var(--dd-line-height) var(--dd-font-family);
   --dd-font-heading: var(--dd-font-weight-strong) var(--dd-font-size-small)/var(--dd-line-height) var(--dd-font-family);
   --dd-font-subtitle-1: var(--dd-font-weight-strong) var(--dd-font-size-large)/var(--dd-line-height) var(--dd-font-family);
   --dd-font-subtitle-2: var(--dd-font-weight-strong) var(--dd-font-size-medium)/var(--dd-line-height) var(--dd-font-family);
}

/* ANIMATIONS */
:root {
   --dd-pulsating-foreground-animation: dd-pulsating-foreground-keyframes 1s infinite alternate;
   --dd-pulsating-background-animation: dd-pulsating-background-keyframes 1s infinite alternate;
   --dd-fade-inout-duration: 10s;
}

/* BADGE */
:root {
   --dd-badge-offset-top: 0;
   --dd-badge-offset-right: 0;
}

/* BUSY INDICATOR */
:root {
   --dd-busy-indicator-color: var(--dd-color-active);
   --dd-busy-indicator-delay: 1000ms;
   --dd-busy-indicator-description-margin: 16px 0 0 0;
   --dd-busy-indicator-progress-min-width: 32px;
   --dd-busy-indicator-progress-width: 300px;
   --dd-busy-indicator-overlay-background: rgba(0, 0, 0, 0.6);
   --dd-busy-indicator-overlay-padding: 16px;
   --dd-busy-indicator-overlay-z-index: 5000;
}

/* BUTTON */
:root {
   --dd-button-border-radius: 4px;
   --dd-button-height: var(--dd-input-field-height);
   --dd-button-min-width: 96px;
   --dd-button-label-padding: 4px 10px;
   --dd-button-letter-spacing: var(--dd-letter-spacing-standard);
   /* Primary / High Emphasis */
   --dd-button-background-color-high: var(--dd-color-highlight);
   --dd-button-background-color-high-active: var(--dd-secondary-color-600);
   --dd-button-background-color-high-disabled: var(--dd-primary-color-500);
   --dd-button-color-high: var(--dd-primary-color-050);
   --dd-button-color-high-disabled: var(--dd-primary-color-300);
   --dd-button-font-high: var(--dd-font-button);
   --dd-button-border-width-high: 2px;
   --dd-button-border-high: var(--dd-button-border-width-high) solid var(--dd-button-background-color-high);
   --dd-button-border-high-disabled: var(--dd-button-border-width-high) solid var(--dd-button-background-color-high-disabled);
   --dd-button-border-high-focused: var(--dd-button-border-width-high) solid var(--dd-secondary-color-100);
   /* Medium Emphasis */
   --dd-button-background-color-medium: transparent;
   --dd-button-background-color-medium-active: var(--dd-button-background-color-medium);
   --dd-button-background-color-medium-disabled: transparent;
   --dd-button-border-width-medium: 2px;
   --dd-button-border-medium: var(--dd-button-border-width-medium) solid var(--dd-button-color-medium);
   --dd-button-border-medium-disabled: var(--dd-button-border-medium);
   --dd-button-border-medium-focused: var(--dd-button-border-width-medium) solid var(--dd-color-focus);
   --dd-button-color-medium: var(--dd-color-standard);
   --dd-button-color-medium-disabled: var(--dd-color-standard);
   --dd-button-font-medium: var(--dd-font-button);
   /* Low Emphasis */
   --dd-button-background-color-low: var(--dd-primary-color-800);
   --dd-button-background-color-low-active: var(--dd-primary-color-930);
   --dd-button-background-color-low-disabled: var(--dd-primary-color-800);
   --dd-button-border-width-low: 1px;
   --dd-button-border-low: var(--dd-button-border-width-low) solid var(--dd-primary-color-500);
   --dd-button-border-low-disabled: var(--dd-button-border-low);
   --dd-button-border-low-focused: var(--dd-button-border-width-low) solid var(--dd-color-focus);
   --dd-button-color-low: var(--dd-color-standard);
   --dd-button-color-low-disabled: var(--dd-color-standard);
   --dd-button-font-low: var(--dd-font-body);
}

/* CARD */
:root {
   --dd-card-background: var(--dd-primary-color-870);
   --dd-card-box-shadow: var(--dd-box-shadow-2);
   --dd-card-padding: 8px 12px;
   --dd-card-border-radius: var(--dd-overlay-border-radius);
   --dd-card-height-small: 240px;
   --dd-card-width-small: 500px;
   --dd-card-height-large: 480px;
   --dd-card-width-large: 720px;
}

/* CHECKBOX */
:root {
    --dd-checkbox-size: 18px;
    --dd-checkbox-background: var(--dd-input-field-background);
    --dd-checkbox-background-checked: var(--dd-background-selected);
    --dd-checkbox-background-readonly: transparent;
    --dd-checkbox-border-width: 1px;
    --dd-checkbox-border-color: var(--dd-input-field-border-color);
    --dd-checkbox-border-color-checked: var(--dd-input-field-border-color);
    --dd-checkbox-border-color-readonly: var(--dd-color-disabled);
    --dd-checkbox-border-radius: 3px;
    --dd-checkbox-checkmark-color: var(--dd-color-selected);
    --dd-checkbox-checkmark-color-readonly: var(--dd-color-disabled);
    --dd-checkbox-checkmark-width: 4px;
    --dd-checkbox-label-margin-left: 10px;
    --dd-checkbox-label-margin: 0 var(--dd-checkbox-label-margin-left) 3px 10px;
    --dd-checkbox-label-indentation: calc(var(--dd-checkbox-size) + var(--dd-checkbox-label-margin-left));
}

/* CHIP */
:root {
   --dd-chip-background: var(--dd-primary-color-700);
   --dd-chip-border-radius: 100000px; /* see https://stackoverflow.com/questions/18794947/capsule-shape-using-border-radius-without-a-set-width-or-height */
   --dd-chip-padding: 0 2px;
   --dd-chip-min-height: 24px;
   --dd-chip-content-padding: 0 6px;
   --dd-chip-button-background: transparent;
   --dd-chip-button-background-hover: var(--dd-primary-color-830);
}

/* CIRCULAR PROGRESS */
:root {
   --dd-circular-progress-color: var(--dd-color-highlight);
   --dd-circular-progress-size: var(--dd-icon-size-smaller);
   --dd-circular-progress-padding: var(--dd-icon-button-padding-medium);
}

/* COLOR PICKER */
:root {
   --dd-color-picker-item-size: 18px;
   --dd-color-picker-item-spacing: 6px;
   --dd-color-picker-palette-spacing: 24px;
}

/* COMBO BOX */
:root {
   --dd-combo-box-input-width: var(--dd-input-field-width-medium);
   --dd-combo-box-input-width-small: var(--dd-input-field-width-small);
}

/* DATA TABLE */
:root {
   --dd-data-table-header-background: var(--dd-primary-color-700);
   --dd-data-table-cell-min-height: 40px;
   --dd-data-table-cell-min-width: 64px;
   --dd-data-table-cell-padding-x: 12px;
   --dd-data-table-cell-padding-y: 6px;
   --dd-data-table-cell-padding: var(--dd-data-table-cell-padding-y) var(--dd-data-table-cell-padding-x);
   --dd-data-table-details-padding: 8px var(--dd-data-table-cell-padding-x);
   --dd-data-table-divider-color: var(--dd-primary-color-500);
   --dd-data-table-column-background-reordering: var(--dd-primary-color-900);
   --dd-data-table-column-background-dragging: transparent;
   --dd-data-table-resize-handle-width: 12px;
   --dd-data-table-sorter-padding-x: 2px;
   --dd-data-table-sorter-spacing: 6px;
}

/* DATE FIELD */
:root {
   --dd-date-field-input-width: var(--dd-input-field-width-small);
   --dd-date-field-background-selected: var(--dd-color-highlight);
   --dd-date-field-color-selected: var(--dd-primary-color-050);
   --dd-date-field-overlay-background: var(--dd-primary-color-870);
   --dd-date-field-overlay-width: 400px;
   --dd-date-field-months-background-hover: var(--dd-primary-color-800);
   --dd-date-field-years-background: var(--dd-primary-color-700);
   --dd-date-field-years-color: var(--dd-color-standard);
}

/* DETAILS POPUP */
:root {
   --dd-details-popup-content-padding: 12px;
   --dd-details-popup-max-width: 500px;
}

/* DIALOG */
:root {
   --dd-dialog-min-height-standard: 240px;
   --dd-dialog-min-width-standard: 500px;
   --dd-dialog-min-height-large: 480px;
   --dd-dialog-min-width-large: 720px;
   --dd-dialog-min-height-fit: fit-content;
   --dd-dialog-min-width-fit: fit-content;
   --dd-dialog-max-height: 660px;
   --dd-dialog-body-background: var(--dd-primary-color-870);
   --dd-dialog-border-color: var(--dd-header-background-color);
   --dd-dialog-border: 2px solid var(--dd-dialog-border-color);
   --dd-dialog-box-shadow: var(--dd-box-shadow-2);
   --dd-dialog-overlay-z-index: 6000;
}

/* EXPANDER */
:root {
   --dd-expander-padding-x: 12px;  
   --dd-expander-padding-y: 6px;
   --dd-expander-content-background: transparent;
   --dd-expander-header-background: transparent;
   --dd-expander-header-content-spacing: 4px;
   --dd-expander-header-font: var(--dd-font-body);
   --dd-expander-header-letter-spacing: var(--dd-letter-spacing-standard);
}

/* FLYOUT */
:root {
   --dd-flyout-arrow-size: 24px;
   --dd-flyout-body-background: var(--dd-primary-color-870);
   --dd-flyout-border-color: var(--dd-header-background-color);
   --dd-flyout-border-width: 2px;
   --dd-flyout-border: var(--dd-flyout-border-width) solid var(--dd-flyout-border-color);
   --dd-flyout-box-shadow: var(--dd-box-shadow-2);
   /* Minimum offsets to viewport boundaries (do not overlap with status bar) */
   --dd-flyout-padding: 8px 8px 38px 8px;
   --dd-flyout-backdrop-opacity: 0;
}

/* FORM ITEM */
:root {
   --dd-form-item-label-spacing: 12px;
}

/* FORM LAYOUT */
:root {
   --dd-form-layout-column-spacing: 16px;
   --dd-form-layout-row-spacing: 6px;
}

/* HEADER */
:root {
   --dd-header-color: var(--dd-color-emphasize);
   --dd-header-background-color: var(--dd-primary-color-700);
   --dd-header-background: var(--dd-header-background-color);
   --dd-header-height: 32px;
   --dd-header-content-padding: 0 var(--dd-page-padding-x);
   --dd-header-text-align: center;
}

/* HEADING */
:root {
   --dd-heading-margin-top: 12px;
   --dd-heading-margin-bottom: 8px;
   --dd-heading-divider-spacing: 3px;
   --dd-heading-color: var(--dd-color-emphasize);
   --dd-heading-border-width: thin;
   --dd-heading-border-color: var(--dd-primary-color-600);
   --dd-heading-border: var(--dd-heading-border-width) solid var(--dd-heading-border-color);
   --dd-heading-letter-spacing: var(--dd-letter-spacing-airy);
}

/* HISTOGRAM */
:root {
   --dd-histogram-background: var(--dd-primary-color-930);
   --dd-histogram-border: var(--dd-input-field-border);
   --dd-histogram-color: var(--dd-color-highlight);
   --dd-histogram-dim-color: var(--dd-primary-color-830);
   --dd-histogram-dim-opacity: 0.5;
   --dd-histogram-factor: 1.1;
   --dd-histogram-height: 120px;
}

/* ICON */
:root {
   --dd-icon-size-large: 38px;
   --dd-icon-size-medium: 28px;
   --dd-icon-size-smaller: 24px;
   --dd-icon-size-small: 16px;
   --dd-icon-size: var(--dd-icon-size-medium);
}

/* ICON BUTTON */
:root {
   --dd-icon-button-background: transparent;
   --dd-icon-button-background-opaque: var(--dd-primary-color-800);
   --dd-icon-button-background-active: var(--dd-primary-color-900);
   --dd-icon-button-border: 0 solid transparent;
   --dd-icon-button-border-radius: var(--dd-button-border-radius);
   --dd-icon-button-border-radius-small: 2px;
   --dd-icon-button-color-active: var(--dd-primary-color-400);
   --dd-icon-button-padding-large: 2px;
   --dd-icon-button-padding-medium: 2px;
   --dd-icon-button-padding-smaller: 2px;
   --dd-icon-button-padding-small: 2px;
   --dd-icon-button-padding: var(--dd-icon-button-padding-medium);
   --dd-icon-button-pointer-events: auto;
}

/* INPUT FIELDS */
:root {
   --dd-input-field-animation: none;
   --dd-input-field-background: var(--dd-primary-color-930);
   --dd-input-field-background-disabled: var(--dd-primary-color-900);
   --dd-input-field-background-focused: var(--dd-primary-color-970);
   --dd-input-field-border-color: var(--dd-primary-color-500);
   --dd-input-field-border-color-hover: var(--dd-primary-color-300);
   --dd-input-field-border-color-disabled: var(--dd-primary-color-700);
   --dd-input-field-border-radius: 4px;
   --dd-input-field-border-width: 1px;
   --dd-input-field-border: var(--dd-input-field-border-width) solid var(--dd-input-field-border-color);
   --dd-input-field-border-disabled: var(--dd-input-field-border-width) solid var(--dd-input-field-border-color-disabled);
   --dd-input-field-border-hover: var(--dd-input-field-border-width) solid var(--dd-input-field-border-color-hover);
   --dd-input-field-border-invalid: var(--dd-input-field-border-width) solid var(--dd-color-attention);
   --dd-input-field-border-focused: var(--dd-input-field-border-width) solid var(--dd-color-highlight);
   --dd-input-field-button-background: var(--dd-primary-color-900);
   --dd-input-field-button-background-disabled: var(--dd-primary-color-870);
   --dd-input-field-button-width: 24px;
   --dd-input-field-color-focused: var(--dd-color-active);
   --dd-input-field-height: 32px;
   --dd-input-field-min-width: 32px;
   --dd-input-field-overlay-shadow: var(--dd-box-shadow-1);
   --dd-input-field-padding-x: 6px;
   --dd-input-field-padding-right: var(--dd-input-field-padding-x);
   --dd-input-field-item-padding-x: 4px;
   --dd-input-field-item-padding-y: 6px;
   --dd-input-field-placeholder-font-style: normal;
   --dd-input-field-placeholder-text-align: left;
   --dd-input-field-placeholder-opacity-focused: 1;
   --dd-input-field-placeholder-opacity-unfocused: 0;
   --dd-input-field-width-medium: 320px;
   --dd-input-field-width-large: 520px;
   --dd-input-field-width-small: 180px;
   --dd-input-field-icon-button-background: var(--dd-icon-button-background-opaque);
}

/* ITEM */
:root {
   --dd-item-icon-content-spacing: 8px;
   --dd-item-content-details-spacing: 2px;
   --dd-item-details-color: var(--dd-color-secondary);
   --dd-item-details-font: var(--dd-font-caption);
   --dd-item-details-letter-spacing: var(--dd-letter-spacing-airy);
}

/* LINEAR GAUGE */
:root {
   --dd-linear-gauge-width: var(--dd-text-field-input-width);
   --dd-linear-gauge-tick-1-color: var(--dd-color-secondary);
   --dd-linear-gauge-tick-1-width: 1;
   --dd-linear-gauge-tick-2-color: var(--dd-color-secondary);
   --dd-linear-gauge-tick-2-width: 1;
   --dd-linear-gauge-tick-3-color: var(--dd-color-secondary);
   --dd-linear-gauge-tick-3-width: 1;
   --dd-linear-gauge-font: 20px sans-serif;
   --dd-linear-gauge-label-color: var(--dd-color-disabled);
   --dd-linear-gauge-value-stroke: none;
   --dd-linear-gauge-value-fill: var(--dd-color-secondary);
   --dd-linear-gauge-target-stroke: var(--dd-primary-color-300);
   --dd-linear-gauge-target-stroke-width: 1;
   --dd-linear-gauge-target-fill: var(--dd-primary-color-300);
   --dd-linear-gauge-track-fill: var(--dd-primary-color-930);
}

/* LINEAR PROGRESS */
:root {
   --dd-linear-progress-color: var(--dd-color-highlight);
   --dd-linear-progress-background-color: var(--dd-background-color-input);
   --dd-linear-progress-width: 300px;
   --dd-linear-progress-min-width: 32px;
   --dd-linear-progress-label-color: var(--dd-color-standard);
   --dd-linear-progress-label-margin: 12px 0 0 0;
   --dd-linear-progress-transition-duration: 250ms;
   --dd-linear-progress-transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
}

/* LINK BUTTON */
:root {
   --dd-link-button-color: var(--dd-color-standard);
   --dd-link-button-color-hover: var(--dd-primary-color-200);
   --dd-link-button-color-active: var(--dd-primary-color-400);
   --dd-link-button-padding: 2px 0;
   --dd-link-button-spacing: 6px;
   --dd-link-button-min-width: 32px;
}

/* LIST BOX */
:root {
   --dd-list-box-item-padding: 6px;
   --dd-list-box-item-background-selected: var(--dd-background-selected);
   --dd-list-box-item-background-hover: var(--dd-primary-color-800);
}

/* MENU */
:root {
   --dd-menu-item-icon-label-spacing: 20px;
   --dd-menu-item-background: transparent;
   --dd-menu-item-background-active: var(--dd-primary-color-900); 
   --dd-menu-item-border: 0 solid transparent;
   --dd-menu-item-border-radius: 4px;
   --dd-menu-item-spacing: 4px;
   --dd-menu-item-spacing-multi-column: 6px;
   --dd-menu-item-padding: 6px 8px;
   --dd-menu-item-content-padding: 0;
   --dd-menu-item-label-color: var(--dd-color-standard);
   --dd-menu-item-label-font: var(--dd-font-subtitle-2);
   --dd-menu-item-details-color: var(--dd-color-secondary);
   --dd-menu-item-details-font: var(--dd-font-body);
   --dd-menu-item-letter-spacing: var(--dd-letter-spacing-standard);
}

/* NUMBER/INTEGER FIELD */
:root {
   --dd-number-field-input-width: var(--dd-input-field-width-small);
   --dd-number-field-input-width-small: 100px;
   --dd-number-field-input-width-large: var(--dd-input-field-width-medium);
   --dd-number-field-input-text-align: right;
}

/* OSCILLOSCOPE */
:root {
   --dd-oscilloscope-axis-color: var(--dd-color-disabled);
   --dd-oscilloscope-axis-stroke-width: 1;
   --dd-oscilloscope-graph-fill: var(--dd-primary-color-930);
   --dd-oscilloscope-graph-color: var(--dd-color-active);
   --dd-oscilloscope-graph-stroke-width: 2;
   --dd-oscilloscope-gridline-color: var(--dd-primary-color-870);
   --dd-oscilloscope-gridline-stroke-width: 1;
   --dd-oscilloscope-label-color: var(--dd-color-secondary);
   --dd-oscilloscope-label-font: var(--dd-font-caption);
   --dd-oscilloscope-label-letter-spacing: var(--dd-letter-spacing-airy);
   --dd-oscilloscope-tick-color: var(--dd-color-disabled);
   --dd-oscilloscope-tick-stroke-width: 1;
}

/* OVERLAYS */
:root {
   --dd-overlay-border-radius: 4px;
   --dd-overlay-viewport-bottom: 0;
   --dd-overlay-background-blur-radius: 1px;
}

/* PAGE */
:root {
   --dd-page-padding-x: 12px;
   --dd-page-padding-y: 12px;
   --dd-page-body-padding: var(--dd-page-padding-y) var(--dd-page-padding-x);
   --dd-page-divider-margin: var(--dd-heading-margin-top) 0 var(--dd-heading-margin-bottom) 0;
   --dd-page-footer-background-color: var(--dd-primary-color-700);
   --dd-page-footer-background: var(--dd-page-footer-background-color);
   --dd-page-footer-padding-y: 8px;
   --dd-page-footer-padding: var(--dd-page-footer-padding-y) var(--dd-page-padding-x);
   --dd-page-width-small: 500px;
   --dd-page-width-large: 720px;
}

/* PARAGRAPH */
:root {
   --dd-paragraph-spacing: 8px;
}

/* POPUP MENU */
:root {
   --dd-popup-menu-content-padding: 12px;
   --dd-popup-menu-button-prefix-padding: var(--dd-button-label-padding);
}

/* RADIO BUTTON */
:root {
   --dd-radio-button-size: 16px;
   --dd-radio-button-background: var(--dd-input-field-background);
   --dd-radio-button-background-checked: var(--dd-background-selected);
   --dd-radio-button-background-disabled: var(--dd-input-field-background-disabled);
   --dd-radio-button-border-width: 1px;
   --dd-radio-button-border: var(--dd-radio-button-border-width) solid var(--dd-input-field-border-color);
   --dd-radio-button-border-checked: var(--dd-radio-button-border);
   --dd-radio-button-border-disabled: var(--dd-radio-button-border-width) solid var(--dd-color-disabled);
   --dd-radio-button-dot-color-checked: var(--dd-color-selected);
   --dd-radio-button-dot-color-disabled: var(--dd-color-disabled);
   --dd-radio-button-dot-size: 7px;
   --dd-radio-button-label-margin: 3px 0 3px 10px;
   --dd-radio-button-radio-margin: 3px 0;
}

/* ROW */
:root {
   --dd-row-background-dark: var(--dd-primary-color-870);
   --dd-row-background-light: var(--dd-primary-color-830);
   --dd-row-spacing: 8px;
}

/* SCROLLBAR */
:root {
   --dd-scrollbar-color: #AAAAAA4C; /* --dd-primary-color-300, opacity 0.3 */
   --dd-scrollbar-color-active: #AAAAAA66; /* --dd-primary-color-300, opacity 0.4 */
   --dd-scrollbar-thickness: 8px;
   --dd-scrollbar-track-color: var(--dd-input-field-background);
   --dd-scrollbar-corner-color: #14141466;
}

/* SEARCH FIELD */
:root {
   --dd-search-field-height: 42px;
   --dd-search-field-input-width: 400px;
   --dd-search-field-submit-margin: 0 0 0 4px;
   --dd-search-field-discard-margin: 0 4px 0 0;
   --dd-search-field-font-size: var(--dd-font-size-large);
}

/* SECTION */
:root {
   --dd-section-indentation: 12px;
   --dd-section-spacing: 24px;
}

/* SELECT FIELD */
:root {
   --dd-select-field-divider-color: var(--dd-primary-color-500);
   --dd-select-field-input-width: var(--dd-input-field-width-medium);
   --dd-select-field-input-width-small: var(--dd-input-field-width-small);
   --dd-select-list-item-padding: 6px calc(var(--dd-input-field-padding-x) + var(--dd-input-field-item-padding-x));
}

/* SLIDER */
:root {
   --dd-slider-column-spacing: 12px;
   --dd-slider-row-spacing: 2px;
   --dd-slider-input-height: 24px;
   --dd-slider-input-width: var(--dd-text-field-input-width);
   --dd-slider-input-min-width: 48px;
   --dd-slider-prefix-min-width: 24px;
   --dd-slider-suffix-min-width: 24px;
   --dd-slider-grip-point-color: transparent;
   --dd-slider-grip-dot-color: var(--dd-primary-color-lightest);
   --dd-slider-grip-dot-background: var(--dd-primary-color-lightest);
   --dd-slider-grip-outline-hover: transparent;
   --dd-slider-grip-outline-active: var(--dd-color-highlight);
   --dd-slider-track-begin-color: var(--dd-color-standard);
   --dd-slider-track-end-color: var(--dd-primary-color-970);
   --dd-slider-track-begin-color-range: black;
   --dd-slider-track-end-color-range: white;
   --dd-slider-limit-stroke: var(--dd-primary-color-300);
   --dd-slider-limit-stroke-width: 4;
   --dd-slider-thumb-background: var(--dd-primary-color-870);
   --dd-slider-thumb-color: var(--dd-color-standard);
   --dd-slider-thumb-color-hover: var(--dd-color-standard);
   --dd-slider-thumb-color-active: var(--dd-color-highlight);
}

/* SPLIT LAYOUT */
:root {
   --dd-split-layout-thickness: 4px;
   --dd-split-layout-grip-thickness: 4px; /* Increase to extend the pointer-sensitive area */
   --dd-split-layout-handle-color: transparent;
   --dd-split-layout-handle-length: 100%;
   --dd-split-layout-handle-thickness: 1px;
}

/* TABS */
:root {
   --dd-tabs-background: var(--dd-header-background);
   --dd-tab-background-selected: var(--dd-background-selected);
   --dd-tab-background-active: var(--dd-primary-color-800);
   --dd-tab-color: var(--dd-primary-color-300);
   --dd-tab-color-selected: var(--dd-color-active);
   --dd-tab-color-active: var(--dd-primary-color-400);
   --dd-tab-divider-color: var(--dd-color-disabled);
   --dd-tab-divider-thickness: thin;
   --dd-tab-min-height: 42px;
   --dd-tab-min-width: 96px;
   --dd-tab-padding-horizontal: 0 24px;
   --dd-tab-padding-vertical: 0 24px;
   --dd-tab-text-align: left;
}

/* TEXT AREA FIELD */
:root {
   --dd-text-area-field-height: 8em;
   --dd-text-area-field-input-padding: 6px var(--dd-input-field-padding-x);
}

/* TEXT FIELD */
:root {
   --dd-text-field-input-width: var(--dd-input-field-width-medium);
   --dd-text-field-input-width-small: var(--dd-input-field-width-small);
   --dd-text-field-input-width-large: var(--dd-input-field-width-large);
}

/* TOGGLE BUTTON */
:root {
   --dd-toggle-button-color: var(--dd-color-standard);
   --dd-toggle-button-color-on: var(--dd-color-selected);
   --dd-toggle-button-color-readonly: var(--dd-color-secondary);
   --dd-toggle-button-color-readonly-on: var(--dd-color-standard);
   --dd-toggle-button-background: transparent;
   --dd-toggle-button-background-on: var(--dd-background-selected);
   --dd-toggle-button-background-readonly: transparent;
   --dd-toggle-button-background-readonly-on: var(--dd-primary-color-800);
   --dd-toggle-button-border-radius: var(--dd-button-border-radius);
   --dd-toggle-button-border-width: 1px;
   --dd-toggle-button-min-height: var(--dd-input-field-height);
   --dd-toggle-button-min-width: 64px;
   --dd-toggle-button-padding: var(--dd-button-label-padding);
}

/* TOGGLE GROUP */
:root {
   --dd-toggle-group-background: var(--dd-input-field-background);
   --dd-toggle-group-border: var(--dd-input-field-border);
}

/* TOOLBAR */
:root {
   --dd-toolbar-divider-height: 60%;
   --dd-toolbar-divider-thickness: thin;
   --dd-toolbar-spacing: 12px;
   --dd-toolbar-row-spacing: 6px;
   --dd-toolbar-button-spacing: 12px;
   --dd-toolbar-icon-spacing: 6px;
   --dd-toolbar-icon-button-spacing: 6px;
   --dd-toolbar-link-button-spacing: 24px;
   --dd-toolbar-overflow-padding: 12px;
   --dd-toolbar-overflow-spacing: 6px;
}

/* TOOLTIP */
:root {
   --dd-tooltip-background: var(--dd-primary-color-darkest);
   --dd-tooltip-border: 1px solid var(--dd-primary-color-500);
   --dd-tooltip-border-radius: 4px;
   --dd-tooltip-box-shadow: var(--dd-box-shadow-1);
   --dd-tooltip-color: var(--dd-color-standard);
   --dd-tooltip-delay: 500ms;
   --dd-tooltip-max-width: 280px;
   --dd-tooltip-padding: 6px;
}

/* VALIDATION MESSAGE */
:root {
   --dd-validation-message-background: var(--dd-tooltip-background);
   --dd-validation-message-border: var(--dd-tooltip-border);
   --dd-validation-message-border-radius: var(--dd-tooltip-border-radius);
   --dd-validation-message-color: var(--dd-color-active);
   --dd-validation-message-max-width: 240px;
   --dd-validation-message-min-width: 120px;
   --dd-validation-message-padding: var(--dd-tooltip-padding);
   --dd-validation-message-z-index: 25000;
}

/* VALIDATION STATE */
:root {
   --dd-validation-state-icon-size: var(--dd-icon-size-small);
   --dd-validation-state-width: 28px;
   --dd-validation-state-padding: 0 4px 0 0;
}


/*----------------------------------------------*/
/* STANDARD ELEMENTS                            */
/*----------------------------------------------*/

a {
   display: inline-flex;
   align-items: center;
   color: currentColor;
   text-decoration: none;
}

a:hover {
   color: var(--dd-color-active);
   cursor: pointer; 
}

a:focus {
   box-shadow: var(--dd-box-shadow-focused);
}

a:not(:is(.dd-button, .dd-icon-button, .dd-menu-item))::before {
   content: '';
   mask-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%3F%3E%3Csvg%20viewBox%3D%220%200%2018%2018%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Asvg%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20enable-background%3D%22new%200%200%2018%2018%22%20version%3D%221.1%22%20xml%3Aspace%3D%22preserve%22%3E%3Cg%3E%3Cpath%20d%3D%22m8.06%2C2.73c-0.12%2C-0.12%20-0.5%2C-0.12%20-0.62%2C0c0%2C0%200%2C0%200%2C0l-0.74%2C0.74c-0.12%2C0.12%20-0.12%2C0.5%200%2C0.62l4.57%2C4.57l-4.57%2C4.57c-0.12%2C0.12%20-0.12%2C0.5%200%2C0.62l0.62%2C0.62c0.12%2C0.12%200.5%2C0.12%200.62%2C0c0%2C0%200%2C0%200%2C0l5.18%2C-5.18c0.37%2C-0.37%200.37%2C-0.98%200%2C-1.35l-5.06%2C-5.18z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
   mask-size: cover;
   background: currentColor;
   height: 1em;
   width: 1em;
   margin-right: 0.1em;
}

body {
   --dd-body-background: var(--dd-primary-color-darkest);
   background: var(--dd-body-background);
   color: var(--dd-color-standard);
   font: var(--dd-font-body);
   letter-spacing: var(--dd-letter-spacing-standard);
   height: 100vh;
   margin: 0; /* Overrides user agent style */
   user-select: none;
   text-underline-offset: 0.2em;
   --dd-background: var(--dd-body-background); /* Holds the background color of the current/closest container/panel. */
   --dd-divider-color: var(--dd-primary-color-500);
   --dd-divider-margin: 0;
}

canvas, img {
   -webkit-user-drag: none;
}

em {
   color: var(--dd-color-emphasize);
   font-style: normal;
}

fieldset {
   border-width: 0;
   margin: 0;
   padding: 0;
}

:focus {
   outline: unset !important;
}

h1, h2 {
   margin-bottom: var(--dd-heading-margin-bottom);
   margin-top: var(--dd-heading-margin-top);
}

h1 {
   color: var(--dd-heading-color);
   font: var(--dd-font-heading);
   letter-spacing: var(--dd-heading-letter-spacing);
   border-bottom: var(--dd-heading-border);
   padding-bottom: var(--dd-heading-divider-spacing);
}

h2 {
   color: currentColor;
   font: var(--dd-font-body);
   letter-spacing: var(--dd-letter-spacing-standard);
}

h1:last-child,
h2:last-child {
   margin-bottom: 0;
}

h1:first-child,
h2:first-child {
   margin-top: 0;
}

section > h1,
section > h2,
section > h3,
section > h4,
section > h5,
section > h6 {
   margin-left: calc(var(--dd-section-indentation) * -1);
}

header {
   border-bottom: var(--dd-heading-border);
   margin-bottom: 12px;
   padding-bottom: 8px;
}

input {
   letter-spacing: var(--dd-letter-spacing-standard) !important;
}

label {
   display: flex;
   flex-direction: column;
   gap: 3px;
}

label > .dd-full-height {
   flex: auto;
}

p {
   margin: 0 0 var(--dd-paragraph-spacing) 0;
}

pre {
   font: inherit;
   margin: 0;
   white-space: pre-line;
   overflow-wrap: break-word;
}

pre::-webkit-scrollbar-thumb {
   border-left: calc(var(--dd-scrollbar-thickness) / 4) solid var(--dd-scrollbar-track-color);
   border-right: calc(var(--dd-scrollbar-thickness) / 4) solid var(--dd-scrollbar-track-color);
}

pre::-webkit-scrollbar-track {
   background: transparent;
}

section {
   padding-left: var(--dd-section-indentation);
}

section:not(:last-child) {
   margin-bottom: var(--dd-section-spacing);
}

section > :last-child {
   margin-bottom: 0;
}

small {
   font-size: var(--dd-font-size-small);
}

strong {
   font-weight: var(--dd-font-weight-strong);
}

table {
   border-spacing: 0;
}

textarea {
   cursor: auto; /* change to default cursor over scrollbars */
}

th {
   background: var(--dd-primary-color-700);
   color: var(--dd-color-secondary);
   font: var(--dd-font-heading); /* overrides user agent style */
   letter-spacing: var(--dd-letter-spacing-airy);
   text-align: left;
}

tr:not(:last-child) {
   padding-bottom: var(--dd-row-spacing);
}

tr:nth-child(odd) {
   background: var(--dd-row-background-light);
   --dd-background: var(--dd-row-background-light);
}

tr:nth-child(even) {
   background: var(--dd-row-background-dark);
   --dd-background: var(--dd-row-background-dark);
}

td:not(:last-child),
th:not(:last-child) {
   padding-right: 16px;
}

ul, ol {
   padding-inline-start: 2em;
}


/*----------------------------------------------*/
/* CUSTOM ELEMENTS                              */
/*----------------------------------------------*/

dd-button:not(.dd-fill) {
   min-width: var(--dd-button-min-width);
}

dd-data-table[expand-by-selection] vaadin-grid-tree-toggle {
   display: none;
}

/* TODO RS 05.07.2021: The following rule should most likely be applied to all form layouts, but the change impact seems to be too high at the moment (3.0 system test is ongoing) */
dd-form-layout[auto-columns] > :not(.dd-fill) {
   width: fit-content;
}

dd-form-section > p:last-child {
   margin-bottom: 0;
}

dd-icon-button > dd-item.dd-vertical {
   margin-top: 2px;
   margin-bottom: 2px;
}

dd-icon-button > dd-item:not(.dd-vertical) {
   margin-left: 2px;
   margin-right: 2px;
}

dd-split-layout[orientation="horizontal"] {
   height: 100%;
}

dd-split-layout[orientation="vertical"] {
   width: 100%;
}

vaadin-dialog-overlay {
   z-index: var(--dd-dialog-overlay-z-index);
}


/*----------------------------------------------*/
/* CLASSES                                      */
/*----------------------------------------------*/

.dd-attention-border {
   box-shadow: 0 0 0 2px var(--dd-color-attention);
}

.dd-badge {
   box-sizing: content-box;
   min-width: 1em;
   min-height: 1em;
   display: inline-flex;
   justify-content: center;
   position: absolute;
   top: var(--dd-badge-offset-top);
   right: var(--dd-badge-offset-right);
   font: var(--dd-font-caption);
   letter-spacing: var(--dd-letter-spacing-airy);
   color: var(--dd-color-active);
   background: var(--dd-color-highlight);
   border-radius: var(--dd-chip-border-radius);
   padding: 2px 4px;
   z-index: 1;
}

dd-icon-button:not(.dd-large) {
   --dd-badge-offset-right: -4px;
}

.dd-canvas {
   position: relative;
   pointer-events: none;
}
.dd-canvas > * {
   position: absolute;
   pointer-events: auto;
}

.dd-card-size-small {
   min-height: var(--dd-card-height-small);
   min-width: var(--dd-card-width-small);
   max-width: var(--dd-card-width-small);
}

.dd-card-size-large {
   min-height: var(--dd-card-height-large);
   min-width: var(--dd-card-width-large);
   max-width: var(--dd-card-width-large);
}

.dd-center-content {
   display: flex;
   align-items: center;
   justify-content: center;
}

.dd-centered-overlay {
   position: absolute;
   width: fit-content;
   left: 0;
   right: 0;
   margin: auto;
}

.dd-clickable {
   position: relative;
   display: flex;
}

.dd-clickable::after {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   border-radius: inherit;
}

.dd-clickable:hover {
   cursor: pointer;
}

.dd-clickable:hover::after {
   background: white !important;
   opacity: var(--dd-hover-opacity-strong) !important;
   pointer-events: none;
}

.dd-color-button {
   height: var(--dd-icon-size-small);
   width: var(--dd-icon-size-small);
   border-radius: var(--dd-button-border-radius);
}

.dd-color-indicator {
   height: 10px;
   width: 10px;
   border-radius: 0;
}

.dd-column-layout {
   display: flex;
   flex-direction: column;
   --dd-divider-length: 100%;
}

/* See https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size why we need to manipulate min-width */
.dd-column-layout > * {
   min-height: 0;
   flex: none;
}

.dd-data-column-template-container {
   display: flex;
   align-items: center;
}

.dd-data-column-template-container > * {
   max-width: 100%;
}

.dd-data-tree-column-cell-content {
   display: inline-flex;
   align-items: center;
   width: 100%;
}

.dd-data-tree-column-cell-content > * {
   min-width: 0;
}

.dd-dialog-body {
   background: var(--dd-dialog-body-background);
}



.dd-dense,
.dd-data-column-template-container {
   --dd-data-table-cell-min-height: 28px;
   --dd-data-table-cell-padding: 1px var(--dd-data-table-cell-padding-x);
   --dd-expander-padding-x: 4px;
   --dd-form-item-label-spacing: 6px;
   --dd-form-layout-row-spacing: 2px;
   --dd-heading-divider-spacing: 1px;
   --dd-heading-margin-bottom: 6px;
   --dd-heading-margin-top: 9px;
   --dd-input-field-height: 24px;
   --dd-input-field-item-padding-y: 1px;
   --dd-list-box-item-padding: 6px 0 6px 4px;
   --dd-section-indentation: 0;
   --dd-section-spacing: 18px;
}

.dd-dense dd-select-field dd-item {
   --dd-item-icon-size: small;
}

.dd-details-popup-content {
   max-width: var(--dd-details-popup-max-width);
   padding: var(--dd-details-popup-content-padding);
}

[disabled],
[disabled] * {
   pointer-events: none;
}

[disabled] dd-icon-button {
   --dd-icon-button-pointer-events: none;
}

.dd-divider {
   align-self: center;
   height: var(--dd-divider-height);
   width: var(--dd-divider-width);
   border-style: solid;
   border-color: var(--dd-divider-color);
   border-width: var(--dd-divider-border-width);
   margin: var(--dd-divider-margin);
}

section + .dd-divider {
   margin-top: 0;
}

.dd-expander-header {
   display: contents;
}

.dd-expander-header > * {
   padding: inherit;
}

.dd-fill {
   flex: auto !important;
}

.dd-flow-direction-column {
   --dd-divider-height: auto;
   --dd-divider-width: 100%;
   --dd-divider-border-width: var(--dd-heading-border-width) 0 0 0;
}

.dd-flow-direction-row {
   --dd-divider-height: 70%;
   --dd-divider-width: auto;
   --dd-divider-border-width: 0 0 0 var(--dd-heading-border-width);
}

.dd-flyout-body {
   background: var(--dd-flyout-body-background);
}

.dd-flyout-body dd-page[has-footer],
.dd-dialog-body dd-page[has-footer] {
   --dd-page-footer-padding: var(--dd-page-footer-padding-y) var(--dd-page-padding-x) calc(var(--dd-page-footer-padding-y) - var(--dd-flyout-border-width)) var(--dd-page-padding-x);
}

.dd-dialog-icon-container {
   color: var(--dd-color-info);
   --dd-icon-size: var(--dd-icon-size-large);
}

dd-icon.dd-flyout-target,
dd-icon-button.dd-flyout-target,
dd-toggle-button.dd-flyout-target,
dd-link-button.dd-flyout-target,
.dd-view-host.dd-flyout-target > dd-icon-button,
.dd-view-host.dd-flyout-target > dd-toggle-button,
.dd-view-host.dd-flyout-target > dd-link-button,
.dd-flyout-target.dd-highlight-when-flyout-target {
   color: var(--dd-color-highlight);
}

.dd-form {
   position: relative;
}

dd-form-item:has(> dd-radio-group:first-child):not(.dd-label-above) {
   --dd-form-item-label-align: start;
   --dd-form-item-label-padding-top: 3px;
}
dd-form-item > dd-radio-group:first-child {
   padding-top: 0;
}

.dd-full-height {
   height: 100% !important;
   box-sizing: border-box;
}

.dd-full-width {
   width: 100% !important;
   box-sizing: border-box;
}

.dd-highlight-border {
   box-shadow: 0 0 0 2px var(--dd-color-highlight);
   border-radius: 4px;
}

.dd-input-field {
   border: var(--dd-input-field-border);
   border-radius: var(--dd-input-field-border-radius);
   box-sizing: border-box;
   padding: 6px var(--dd-input-field-padding-x);
   min-height: var(--dd-input-field-height);
}

.dd-input-field > * {
   height: 100%;
   overflow-y: auto;
   padding-left: var(--dd-input-field-item-padding-x);
   padding-right: var(--dd-input-field-item-padding-x);
}

.dd-input-field-placeholder-always-visible {
   --dd-input-field-placeholder-opacity-unfocused: var(--dd-input-field-placeholder-opacity-focused);
}

.dd-read-only-field .dd-input-field {
   height: 100%;
}

.dd-overlay {
   position: absolute;
   height: 100%;
   width: 100%;
   top: 0;
   left: 0;
   pointer-events: none;
   --dd-icon-button-background: var(--dd-primary-color-darkest);
}

.dd-overlay .dd-has-tooltip:not([disabled]),
.dd-overlay .dd-nowrap:not([disabled]) {
   pointer-events: initial;
}

.dd-pulsating:not([disabled]) {
   animation: var(--dd-pulsating-foreground-animation);
}

dd-button.dd-pulsating:not([disabled]),
dd-icon-button.dd-pulsating:not([disabled]),
dd-toggle-button.dd-pulsating:not([disabled]) {   
   animation: var(--dd-pulsating-background-animation);
}

.dd-fade-inout {
   animation-name: dd-fade-inout-keyframes;
   animation-duration: var(--dd-fade-inout-duration);
   animation-iteration-count: 1;
   opacity: 0;
}

.dd-list > *:nth-child(odd) {
   background: var(--dd-row-background-light);
   --dd-background: var(--dd-row-background-light);
}
.dd-list > *:nth-child(even) {
   background: var(--dd-row-background-dark);
   --dd-background: var(--dd-row-background-dark);
}

.dd-list-2 {
   display: grid;
   grid-template-columns: repeat(2, minmax(0,1fr));
   grid-auto-rows: auto;
}

.dd-list-2 > *:not(:nth-child(2n+2)) {
   padding-right: 16px;
}

.dd-list-2 > :nth-child(4n+1),
.dd-list-2 > :nth-child(4n+2) {
   background: var(--dd-row-background-light);
}

.dd-list-2 > :nth-child(4n+3),
.dd-list-2 > :nth-child(4n+4) {
   background: var(--dd-row-background-dark);
}

.dd-list-3 {
   display: grid;
   grid-template-columns: repeat(3, minmax(0,1fr));
   grid-auto-rows: auto;
}

.dd-list-3 > *:not(:nth-child(3n+3)) {
   padding-right: 16px;
}

.dd-list-3 > :nth-child(6n+1),
.dd-list-3 > :nth-child(6n+2),
.dd-list-3 > :nth-child(6n+3) {
   background: var(--dd-row-background-light);
}

.dd-list-3 > :nth-child(6n+4),
.dd-list-3 > :nth-child(6n+5),
.dd-list-3 > :nth-child(6n+6) {
   background: var(--dd-row-background-dark);
}

.dd-main-menu {
   width: 100%;
   --dd-menu-item-background: var(--dd-primary-color-830);
   --dd-menu-item-spacing: 4px;
   --dd-menu-item-content-padding: 4px 0;
   --dd-menu-item-icon-label-spacing: 8px;
   --dd-divider-height: 8px;
   --dd-divider-width: 100%;
   --dd-divider-border-width: 0;
}

.dd-main-menu-heading {
   border-width: 0;
   box-sizing: border-box;
   font-size: var(--dd-font-size-huge);
   padding: 16px;
   width: 100%;
   text-align: center;
   --dd-heading-border: unset;
   --dd-heading-color: var(--dd-color-standard);
   --dd-heading-margin-bottom: 0;
   --dd-heading-margin-top: 0;
}

.dd-main-menu-container {
   background: var(--dd-primary-color-darkest);
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
   grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
   position: relative;
   align-items: center;
   justify-items: center;
   height: 100%;
   width: 100%;
}

.dd-main-menu-container > .dd-main-menu-heading {
   grid-row: 1;
   grid-column: 2;
   align-self: center;
   justify-self: center;
}

.dd-main-menu-container > .dd-main-menu {
   grid-row: 2;
   grid-column: 2;
   min-width: 620px;
   position: relative;
}

:not(.dd-column-layout) > .dd-nowrap {
   flex: initial;
}

.dd-nowrap,
.dd-list > *,
.dd-list-2 > *,
.dd-list-3 > * {
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
}

.dd-popup-menu-content {
   box-sizing: border-box;
   height: 100%;
   overflow-y: auto;
   --dd-menu-item-spacing: 0;
   --dd-menu-item-label-font: var(--dd-font-body);
   --dd-menu-item-border: none;
   --dd-menu-item-border-radius: 0;
}
.dd-popup-menu-content[columns] {
   padding: var(--dd-popup-menu-content-padding);
}

.dd-read-only-field {
   --dd-form-item-label-padding-top: 0;
}

.dd-read-only-field-content {
   display: flex;
   align-items: center;
   width: fit-content;
   word-break: break-word;
}

.dd-read-only-field-content > * {
   flex: auto;
}

dd-form-layout[columns]:not([auto-columns]) .dd-read-only-field[is-form-layout-item] .dd-read-only-field-content {
   width: var(--dd-read-only-field-input-width);
}

.dd-row-layout {
   display: flex;
   flex-direction: row;
   --dd-divider-length: 80%;
}
.dd-row-layout > * {
   min-width: 0;
   flex: none;
}

.dd-scroll-viewer { 
   overflow-y: auto;
   pointer-events: auto;
}

.dd-section-unindent {
   margin-left: calc(-1 * var(--dd-section-indentation));
}

.dd-side-bar {
   background: var(--dd-primary-color-870);
   box-sizing: border-box;
   overflow: hidden;
   --dd-background: var(--dd-primary-color-870);
}

.dd-side-bar-container {
   gap: 0;
   height: 100%;
   width: 100%;
}

.dd-tooltip {
   background: var(--dd-tooltip-background);
   border: var(--dd-tooltip-border);
   border-radius: var(--dd-tooltip-border-radius);
   box-shadow: var(--dd-tooltip-box-shadow);
   color: var(--dd-tooltip-color);
   overflow: hidden;
   overflow-wrap: break-word;
   pointer-events: none;
   position: absolute;
   padding: var(--dd-tooltip-padding);
}
.dd-tooltip:not([nowrap]) {
   max-width: var(--dd-tooltip-max-width);
}

.dd-tooltip-content {
   white-space: pre-line;
   overflow-wrap: break-word;
}


/*----------------------------------------------*/
/* BUTTON                                       */
/*----------------------------------------------*/

:is(dd-button, .dd-button) {
   display: inline-flex;
   align-items: center;
   box-sizing: border-box;
   border-radius: var(--dd-button-border-radius);
   position: relative;
   white-space: nowrap;
   background-color: var(--dd-button-background-color);
   border: var(--dd-button-border);
   color: var(--dd-button-color);
   font: var(--dd-button-font);
   letter-spacing: var(--dd-button-letter-spacing);
   height: var(--dd-button-height);
   width: fit-content;
   -webkit-tap-highlight-color: transparent;
}

.dd-button {
   padding: var(--dd-button-label-padding);
}

:is(dd-button, .dd-button)[disabled] {
   background-color: var(--dd-button-background-color-disabled);
   border: var(--dd-button-border-disabled);
   color: var(--dd-button-color-disabled);
   pointer-events: none;
   cursor: default;
   opacity: var(--dd-opacity-disabled);
}

:is(dd-button, .dd-button):not(.dd-fill) {
   width: fit-content;
}

:is(dd-button, .dd-button):hover:not([disabled]) {
   cursor: pointer;
}

:is(dd-button, .dd-button):focus {
   border: var(--dd-button-border-focused);
}

:is(dd-button, .dd-button):active {
   background-color: var(--dd-button-background-color-active);
}

:is(dd-button, .dd-button):not([active])::after {
   content: "";
   position: absolute;
   top: var(--dd-button-border-width-negated);
   left: var(--dd-button-border-width-negated);
   right: var(--dd-button-border-width-negated);
   bottom: var(--dd-button-border-width-negated);
   border-radius: inherit;
   pointer-events: none;
   opacity: 0;
}

:is(dd-button, .dd-button):not([active]):hover::after {
   background: white;
   opacity: var(--dd-hover-opacity-strong);
}

:is(dd-button, .dd-button).dd-pulsating:not([disabled]) {
   border-color: var(--dd-color-pulsating) !important;
}

:is(dd-button, .dd-button).dd-emphasis-high.dd-pulsating:not([disabled]),
:is(dd-button, .dd-button)[primary].dd-pulsating:not([disabled]) {
   animation-name: dd-pulsating-high-emphasis-keyframes !important;
}

@keyframes dd-pulsating-high-emphasis-keyframes {
   from {
      color: var(--dd-primary-color-lightest);
   }

   to {
      background: var(--dd-background-selected);
      color: var(--dd-primary-color-lightest);
   }
}


/*----------------------------------------------*/
/* DIRECTORY FIELD / FILE FIELD                 */
/*----------------------------------------------*/

.dd-file-field-container,
.dd-directory-field-container {
   display: flex;
   align-items: center;
}

.dd-file-field-select-button,
.dd-directory-field-select-button {
   width: 36px;
}


/*----------------------------------------------*/
/* ICON BUTTON                                  */
/*----------------------------------------------*/

:is(dd-icon-button, .dd-icon-button) {
   display: inline-flex;
   align-items: baseline;
   justify-content: center;
   background: var(--dd-icon-button-background);
   border: var(--dd-icon-button-border);
   border-radius: var(--dd-icon-button-border-radius);
   box-sizing: content-box;
   font: var(--dd-font-button);
   letter-spacing: var(--dd-letter-spacing-standard);
   white-space: nowrap;
   overflow: visible;
   width: var(--dd-icon-size);
   height: var(--dd-icon-size);
   padding: var(--dd-icon-button-padding);
   position: relative;
   -webkit-tap-highlight-color: transparent;
}

:is(dd-icon-button, .dd-icon-button)[disabled] {
   cursor: default;
   pointer-events: none;
   opacity: var(--dd-opacity-disabled);
}

:is(dd-icon-button, .dd-icon-button)[focused] {
   box-shadow: var(--dd-box-shadow-focused);
}

:is(dd-icon-button, .dd-icon-button).dd-large {
   width: var(--dd-icon-size-large);
   height: var(--dd-icon-size-large);
   padding: var(--dd-icon-button-padding-large);
}

:is(dd-icon-button, .dd-icon-button).dd-medium {
   width: var(--dd-icon-size-medium);
   height: var(--dd-icon-size-medium);
   padding: var(--dd-icon-button-padding-medium);
}

:is(dd-icon-button, .dd-icon-button).dd-smaller {
   width: var(--dd-icon-size-smaller);
   height: var(--dd-icon-size-smaller);
   padding: var(--dd-icon-button-padding-smaller);
}

:is(dd-icon-button, .dd-icon-button).dd-small {
   width: var(--dd-icon-size-small);
   height: var(--dd-icon-size-small);
   padding: var(--dd-icon-button-padding-small);
   border-radius: var(--dd-icon-button-border-radius-small);
}

:is(dd-icon-button, .dd-icon-button):not([icon]) {
   width: auto !important;
}

:is(dd-icon-button, .dd-icon-button):is(:active, [active]) {
   background: var(--dd-icon-button-background-active);
   color: var(--dd-icon-button-color-active);
}

:is(dd-icon-button, .dd-icon-button):hover:not([disabled]) {
   cursor: pointer;
}

:is(dd-icon-button, .dd-icon-button)::after {
   content: "";
   pointer-events: none;
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   border-radius: inherit;
   opacity: 0;
}

:is(dd-icon-button, .dd-icon-button):hover:not(:is(:active, [active]))::after {
   background: white;
   opacity: var(--dd-hover-opacity-strong);
}

:is(dd-icon-button, .dd-icon-button).dd-pulsating:not([disabled]) {
   box-shadow: inset 0 0 0 1px var(--dd-color-pulsating) !important;
}


/*----------------------------------------------*/
/* MENU ITEM                                    */
/*----------------------------------------------*/

:is(dd-menu-item, .dd-menu-item) {
   display: block;
   position: relative;
   background: var(--dd-menu-item-background);
   border: var(--dd-menu-item-border);
   border-radius: var(--dd-menu-item-border-radius);
   box-sizing: border-box;
   padding: var(--dd-menu-item-padding);
   letter-spacing: var(--dd-menu-item-letter-spacing);
   --dd-item-icon-size: large;
}

:is(dd-menu-item, .dd-menu-item).dd-selected {
   color: var(--dd-color-selected);
}

:is(dd-menu-item, .dd-menu-item)[hidden] {
   display: none !important;
}

:is(dd-menu-item, .dd-menu-item):hover:not([disabled]) {
   cursor: pointer;
}

:is(dd-menu-item, .dd-menu-item)::after {
   content: "";
   pointer-events: none;
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
}

:is(dd-menu-item, .dd-menu-item):hover:not(:active):not([disabled])::after {
   background: white;
   opacity: var(--dd-hover-opacity-weak);
}

:is(dd-menu-item, .dd-menu-item):active {
   background: var(--dd-menu-item-background-active);
}

:is(dd-menu-item, .dd-menu-item):focus {
   box-shadow: var(--dd-box-shadow-focused);
}


/*----------------------------------------------*/
/* BUSY INDICATOR                               */
/*----------------------------------------------*/

.dd-busy-indicator {
   position: relative;
}

.dd-busy-indicator-overlay {
   height: 100%;
   width: 100%;
   align-items: center;
   display: flex;
   flex-direction: column;
   justify-content: center;
   opacity: 0;
   position: absolute;
   top: 0;
   left: 0;
   z-index: var(--dd-busy-indicator-overlay-z-index);
   backdrop-filter: blur(var(--dd-overlay-background-blur-radius));
   box-sizing: border-box;
   padding: var(--dd-busy-indicator-overlay-padding);
   --dd-background: var(--dd-busy-indicator-overlay-background);
}

.dd-busy-indicator[disabled] .dd-busy-indicator-overlay {
   animation-name: dd-busy-indicator-fade-in;
   animation-duration: var(--dd-busy-indicator-delay);
   animation-iteration-count: 1;
   animation-fill-mode: forwards;
}

.dd-busy-indicator[disabled] .dd-busy-indicator-overlay[hide-content] {
   background: var(--dd-primary-color-930);
   --dd-background: var(--dd-primary-color-930);
}

@keyframes dd-busy-indicator-fade-in {
   0% {
      opacity: 0;
   }

   80% {
      opacity: 0;
   }
   
   100% {
      opacity: 1;
   }
}

.dd-busy-indicator-progress {
   min-width: var(--dd-busy-indicator-progress-min-width);
   width: var(--dd-busy-indicator-progress-width);
}

.dd-busy-indicator-description {
   color: var(--dd-busy-indicator-color) !important;
   margin: var(--dd-busy-indicator-description-margin);
}


/*----------------------------------------------*/
/* TOGGLE GROUP                                 */
/*----------------------------------------------*/

.dd-toggle-group {
   display: flex;
   background: var(--dd-toggle-group-background);
}

.dd-toggle-group[readonly] {
   background: transparent;
}

.dd-toggle-group:not(.dd-fill) {
   width: fit-content;
}

.dd-toggle-group.dd-vertical {
   flex-direction: column;
}

.dd-toggle-group > dd-toggle-button {
   border: var(--dd-toggle-group-border);
}

.dd-toggle-group[readonly] > dd-toggle-button {
   pointer-events: none;
   cursor: default;
}

.dd-toggle-group[readonly] > dd-toggle-button > * {
   pointer-events: none;
}

.dd-toggle-group[readonly] > dd-toggle-button[on] {
   --dd-toggle-button-color-on: var(--dd-toggle-button-color-readonly-on);
   --dd-toggle-button-background-on: var(--dd-toggle-button-background-readonly-on);
}

.dd-toggle-group[readonly] > dd-toggle-button:not([on]) {
   --dd-toggle-button-color: var(--dd-toggle-button-color-readonly);
   --dd-toggle-button-background: var(--dd-toggle-button-background-readonly);
}

.dd-toggle-group:not(.dd-vertical) > dd-toggle-button:not(:first-of-type) {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
   border-left-width: 0;
}

.dd-toggle-group.dd-vertical > dd-toggle-button:not(:first-of-type) {
   border-top-left-radius: 0;
   border-top-right-radius: 0;
   border-top-width: 0;
}

.dd-toggle-group:not(.dd-vertical) > dd-toggle-button:not(:last-of-type) {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
}

.dd-toggle-group.dd-vertical > dd-toggle-button:not(:last-of-type) {
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
}

.dd-toggle-group:not(.dd-vertical) > dd-toggle-button:first-of-type {
   border-top-left-radius: var(--dd-toggle-button-border-radius);
   border-bottom-left-radius: var(--dd-toggle-button-border-radius);
}

.dd-toggle-group.dd-vertical > dd-toggle-button:first-of-type {
   border-top-left-radius: var(--dd-toggle-button-border-radius);
   border-top-right-radius: var(--dd-toggle-button-border-radius);
}

.dd-toggle-group:not(.dd-vertical) > dd-toggle-button:last-of-type {
   border-top-right-radius: var(--dd-toggle-button-border-radius);
   border-bottom-right-radius: var(--dd-toggle-button-border-radius);
}

.dd-toggle-group.dd-vertical > dd-toggle-button:last-of-type {
   border-bottom-left-radius: var(--dd-toggle-button-border-radius);
   border-bottom-right-radius: var(--dd-toggle-button-border-radius);
}

.dd-toggle-group > dd-toggle-button[focused] {
   border-color: var(--dd-color-focus);
}

.dd-toggle-group:not(.dd-vertical) > dd-toggle-button[focused]:not(:first-of-type) {
   border-left-width: var(--dd-input-field-border-width);
   margin-left: -1px;
}

.dd-toggle-group.dd-vertical > dd-toggle-button[focused]:not(:first-of-type) {
   border-top-width: var(--dd-input-field-border-width);
   margin-top: -1px;
}

dd-form-item[is-form-layout-item] dd-toggle-button {
   min-height: var(--dd-input-field-height);
}


/*----------------------------------------------*/
/* TOOLBAR                                      */
/*----------------------------------------------*/

.dd-toolbar-overflow-container {
   display: flex;
   flex-direction: column;
   align-items: center;
   background: var(--dd-flyout-body-background);
   padding: var(--dd-toolbar-overflow-padding);
   overflow-y: auto;
   row-gap: var(--dd-toolbar-overflow-spacing, 0);
}

.dd-toolbar-overflow-container > * {
   flex: none;
}

dd-toolbar > .dd-divider,
dd-toolbar > .dd-busy-indicator,
dd-toolbar > .dd-fill:empty {
   margin-right: 0;
}

dd-toolbar > .dd-divider + * {
   margin-left: var(--dd-toolbar-spacing);
}

dd-toolbar > dd-button:not(:last-child),
dd-toolbar > .dd-busy-indicator:not(:last-child) > dd-button,
dd-toolbar > dd-toggle-button:not([icon]):not(:last-child), 
dd-toolbar > .dd-busy-indicator:not(:last-child) > dd-toggle-button:not([icon]) {
   margin-right: var(--dd-toolbar-button-spacing);
}

dd-toolbar > .dd-divider + dd-button,
dd-toolbar > .dd-divider + .dd-busy-indicator > dd-button,
dd-toolbar > .dd-divider + dd-toggle-button:not([icon]),
dd-toolbar > .dd-divider + .dd-busy-indicator > dd-toggle-button:not([icon]) {
   margin-left: var(--dd-toolbar-button-spacing);
}

dd-toolbar:not([overflow-menu-enabled]) > dd-link-button,
dd-toolbar:not([overflow-menu-enabled]) > dd-button {
   flex-shrink: 1;
}

dd-toolbar > dd-link-button:not(:last-child),
dd-toolbar > .dd-busy-indicator:not(:last-child) > dd-link-button {
   margin-right: var(--dd-toolbar-link-button-spacing);
}

dd-toolbar > dd-icon-button:not(:last-child),
dd-toolbar > dd-toggle-button[icon]:not(:last-child),
dd-toolbar > .dd-busy-indicator:not(:last-child) > dd-icon-button,
dd-toolbar > .dd-busy-indicator:not(:last-child) > dd-toggle-button[icon] {
   margin-right: var(--dd-toolbar-icon-button-spacing);
}

dd-toolbar > .dd-divider + dd-icon-button,
dd-toolbar > .dd-divider + dd-toggle-button[icon],
dd-toolbar > .dd-divider + .dd-busy-indicator > dd-icon-button,
dd-toolbar > .dd-divider + .dd-busy-indicator > dd-toggle-button[icon] {
   margin-left: var(--dd-toolbar-icon-button-spacing);
}

dd-toolbar > dd-icon:not(:last-child),
dd-toolbar > .dd-busy-indicator:not(:last-child) > dd-icon {
   margin-right: var(--dd-toolbar-icon-spacing);
}

dd-toolbar > .dd-form-item[label]:not(:first-child) {
   margin-left: 16px;
}

dd-toolbar > .dd-slider-container:not(:last-child),
dd-toolbar > dd-linear-gauge:not(:last-child) {
   margin-right: 16px;
}

dd-toolbar > dd-form-item[is-form-layout-item]:not(:last-child) > *:last-child:not(dd-toolbar):not(.dd-form-item[validated]) {
   margin-right: var(--dd-toolbar-spacing);
}


/*----------------------------------------------*/
/* ICONS                                        */
/*----------------------------------------------*/

.dd-component-icon {
   display: flex;
}

.dd-icon-attention {
   fill: var(--dd-color-attention);
}

.dd-icon-invalid {
   fill: var(--dd-color-invalid);
}

.dd-icon-valid {
   fill: var(--dd-color-valid);
}

.dd-icon-info {
   fill: var(--dd-color-info);
}

.dd-icon-warning {
   fill: var(--dd-color-warning);
}

.dd-icon-error {
   fill: var(--dd-color-error);
}

.dd-icon-fatal {
   fill: var(--dd-color-fatal);
}

.dd-icon-task-canceled,
.dd-icon-task-faulted {
   fill: var(--dd-color-error);
}

.dd-icon-task-completed {
   fill: var(--dd-color-done);
}

.dd-icon-task-waiting {
   opacity: 0.4;
}

.dd-icon-task-running {
   fill: var(--dd-color-highlight);
}


/*----------------------------------------------*/
/* ANIMATIONS                                   */
/*----------------------------------------------*/

@keyframes dd-pulsating-foreground-keyframes {
   from {
      color: var(--dd-primary-color-lightest);
   }
   to {
      color: var(--dd-color-pulsating);
   }
}

@keyframes dd-pulsating-background-keyframes {
   from {
      background: var(--dd-background-selected);
      color: var(--dd-primary-color-lightest);
   }
   to {
      background: var(--dd-color-pulsating);
      color: var(--dd-primary-color-lightest);
   }
}

@keyframes dd-fade-inout-keyframes {
   0% {
      opacity: 0;
   }

   10% {
      opacity: 1;
   }

   90% {
      opacity: 1;
   }

   100% {
      opacity: 0;
   }
}


/*----------------------------------------------*/
/* OSCILLOSCOPE                                 */
/*----------------------------------------------*/

.dd-oscilloscope {
   width: 100%;
   height: 100%;
}

.dd-oscilloscope :focus {
   outline: none;
}

.dd-osc-frame {
   width: 100%;
   height: 100%;
   fill: none;
   visibility: visible;
}

.dd-osc-back {
   fill: var(--dd-oscilloscope-graph-fill);
}

.dd-osc-axis-x,
.dd-osc-axis-y,
.dd-osc-axis-top {
   stroke: var(--dd-oscilloscope-axis-color);
   stroke-width: var(--dd-oscilloscope-axis-stroke-width);
}

.dd-osc-tick-x-maj,
.dd-osc-tick-x-mid,
.dd-osc-tick-x-min,
.dd-osc-tick-y-maj,
.dd-osc-tick-y-mid,
.dd-osc-tick-y-min {
   stroke: var(--dd-oscilloscope-tick-color);
   stroke-width: var(--dd-oscilloscope-tick-stroke-width);
}

.dd-osc-label text {
   font: var(--dd-oscilloscope-label-font);
   letter-spacing: var(--dd-oscilloscope-label-letter-spacing);
   stroke: var(--dd-oscilloscope-label-color);
}

.dd-osc-grid-x-maj,
.dd-osc-grid-x-mid,
.dd-osc-grid-x-min,
.dd-osc-grid-y-maj,
.dd-osc-grid-y-mid,
.dd-osc-grid-y-min {
   stroke: var(--dd-oscilloscope-gridline-color);
   stroke-width: var(--dd-oscilloscope-gridline-stroke-width);
}

.dd-osc-graph {
   stroke: var(--dd-oscilloscope-graph-color);
   stroke-width: var(--dd-oscilloscope-graph-stroke-width);
   stroke-linejoin: "arcs";
}

/*----------------------------------------------*/
/* SLIDER                                       */
/*----------------------------------------------*/

.dd-slider-container {
   display: inline-grid;
   grid-template-rows: auto auto;
   row-gap: var(--dd-slider-row-spacing);
   align-items: center;
}

dd-form-item[is-form-layout-item] .dd-slider-container {
   margin-right: var(--dd-validation-state-width);
}

dd-slider {
   display: contents;
   position: relative;
   height: 100%;
}

dd-slider[range] {
   --dd-slider-track-begin-color: var(--dd-slider-track-begin-color-range);
   --dd-slider-track-end-color: var(--dd-slider-track-end-color-range);
}

:is(dd-slider, .dd-slider-container)[disabled] .dd-slider-input {
   opacity: var(--dd-opacity-disabled);
}

dd-slider:not([hide-buttons]) .dd-slider-input {
   padding-bottom: calc(var(--dd-icon-size-small) + var(--dd-icon-button-padding-small) * 2);
}

.dd-slider-input {
   grid-column: 2;
   height: var(--dd-slider-input-height);
   min-width: var(--dd-slider-input-min-width);
   position: relative;
}

.dd-slider-container:not(.dd-fill):not(.dd-full-width) .dd-slider-input {
   width: var(--dd-slider-input-width);
}

.dd-slider-prefix,
.dd-slider-suffix {
   grid-row: 1;
   display: flex;
}

.dd-slider-prefix {
   grid-column: 1;
   display: flex;
   justify-content: flex-start;
   margin-right: var(--dd-slider-column-spacing);
   min-width: var(--dd-slider-prefix-min-width);
}

.dd-slider-suffix {
   grid-column: 3;
   display: flex;
   justify-content: flex-end;
   margin-left: var(--dd-slider-column-spacing);
   min-width: var(--dd-slider-suffix-min-width);
}

.dd-slider-prefix:empty,
.dd-slider-suffix:empty {
   display: none;
}

.dd-slider-prefix ::slotted(*),
.dd-slider-suffix ::slotted(*) {
   display: flex;
}

dd-slider:focus {
   outline: none;
}

.dd-slider-buttons {
   --dd-opacity-disabled: 1; /* avoid double dimming */
}

.dd-slider-buttons {
   grid-column: 2;
   grid-row: 2;
   position: absolute;
   width: 100%;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
   top: calc(var(--dd-slider-input-height) + var(--dd-slider-row-spacing));
}

dd-slider[hide-buttons] .dd-slider-buttons {
   display: none;
}

.dd-slider-offs {
   display: inline-block;
   position: relative;
   left: -5%;
   width: 110%;
   height: 100%;
}

.dd-slider-fram {
   stroke: none;
   fill: none;
   width: 100%;
   height: 100%;
}

.dd-slider-track {
   stroke: none;
   stroke-width: 0;
   x: 54px;
}

.dd-slider-track.thick {
   height: 46px;
   y: 29px;
   rx: 16px;
   ry: 16px;
}

.dd-slider-track.thin {
   height: 12px;
   y: 46px;
   rx: 4px;
   ry: 4px;
}

dd-slider .targ {
   stroke: var(--dd-slider-limit-stroke);
   stroke-width: var(--dd-slider-limit-stroke-width);
   display: none;
}

.dd-slider-mgrp rect {
   stroke: none;
   fill: var(--dd-slider-grip-point-color);
   fill-opacity: 1;
}

.dd-slider-mgrp circle {
   fill: var(--dd-slider-grip-dot-background);
   stroke: var(--dd-slider-grip-dot-color);
   stroke-width: 2;
}

.dd-slider-mgrp:hover rect {
   stroke: var(--dd-slider-grip-outline-hover);
   stroke-width: 8;
}

.dd-slider-mgrp:focus rect {
   stroke: var(--dd-slider-grip-outline-active);
   stroke-width: 14;
}

.dd-slider-lthm, 
.dd-slider-rthm {
   fill: var(--dd-slider-thumb-background);
   stroke: var(--dd-slider-thumb-color);
   stroke-width: 8;
   fill-opacity: 1.0;
   r: 30px;
}

.dd-slider-lthm:hover, 
.dd-slider-rthm:hover {
   stroke: var(--dd-slider-thumb-color-hover);
   stroke-width: 8;
   r: 38px;
}

.dd-slider-lthm:focus, 
.dd-slider-rthm:focus {
   stroke: var(--dd-slider-thumb-color-active);
   stroke-width: 24;
   r: 30px;
}