/*!
* 
*
* Copyright (c) 2019-2022 Software AG, Darmstadt, Germany and/or Software AG USA Inc., Reston, VA, USA,
* and/or its subsidiaries and/or its affiliates and/or their licensors.
*
*
*/

/**
 * Do not edit directly
 * Generated on Fri, 16 Dec 2022 12:25:26 GMT
 */

:root {
    --dlt-time-duration-long: 6.00s;
    --dlt-time-duration-default: 4.00s;
    --dlt-time-duration-short: 2.00s;
    --dlt-time-delay-long: 0.20s;
    --dlt-time-delay-default: 0.10s;
    --dlt-time-delay-short: 0.05s;
    --dlt-time-transition-xl: 1.00s;
    --dlt-time-transition-long: 0.60s;
    --dlt-time-transition-default: 0.30s;
    --dlt-time-transition-short: 0.25s;
    --dlt-spacing-6-x: 3rem; /* 48px */
    --dlt-spacing-5-x: 2.5rem; /* 40px */
    --dlt-spacing-4-x: 2rem; /* 32px */
    --dlt-spacing-3-x-half: 1.75rem; /* 28px */
    --dlt-spacing-3-x: 1.5rem; /* 24px */
    --dlt-spacing-2-x-half: 1.25rem; /* 20px */
    --dlt-spacing-2-x: 1rem; /* 16px */
    --dlt-spacing-1-x-half: 0.75rem; /* 12px */
    --dlt-spacing-1-x: 0.5rem; /* 8px */
    --dlt-spacing-half-x: 0.25rem; /* 4px */
    --dlt-spacing-quarter-x: 0.125rem; /* 2px */
    --dlt-spacing-none: 0rem; /* 0 */
    --dlt-sizing-xxl: 4rem;
    --dlt-sizing-xl: 3rem;
    --dlt-sizing-lg: 2.5rem; /* For large input field height */
    --dlt-sizing-md: 2rem; /* For large size icons, default input field height */
    --dlt-sizing-sm: 1.5rem; /* For default size icons, small input field height, default toggle switch height */
    --dlt-sizing-xs: 1rem; /* For small size icons, default checkboxes & radio buttons, small toggle switch height */
    --dlt-sizing-xxs: 0.75rem; /* For small checkboxes & radio buttons */
    --dlt-opacity-disabled: .5; /* Opacity for all disabled states */
    --dlt-border-style-dropzone: dashed;
    --dlt-border-style-hover: solid;
    --dlt-border-style-default: solid;
    --dlt-border-width-separator-md: 2px;
    --dlt-border-width-separator-sm: 1px;
    --dlt-border-width-stepper: 2px; /* Border width for all states indicators and connecting lines in stepper */
    --dlt-border-width-focus: 2px; /* Border width for focus states except checkboxes and radio buttons */
    --dlt-border-width-hover: 2px; /* Border width for hover states except checkboxes and radio buttons */
    --dlt-border-width-default: 1px; /* Border width for default input field, and hover & focus for checkboxes and radio buttons */
    --dlt-border-radii-emphasis: 20px; /* Emphasis buttons */
    --dlt-border-radii-toggle: 16px; /* Toggle switches */
    --dlt-border-radii-checkbox: 0; /* Checkboxes */
    --dlt-border-radii-sm: 4px;
    --dlt-border-radii-default: 0;
    --dlt-border-radii-smooth: 100%;
    --dlt-font-line-height-xxl: 64px; /* 64px */
    --dlt-font-line-height-xl: 56px; /* 56px */
    --dlt-font-line-height-lg: 32px; /* 32px */
    --dlt-font-line-height-md: 28px; /* 28px */
    --dlt-font-line-height-sm: 24px; /* 24px */
    --dlt-font-line-height-xs: 20px; /* 20px */
    --dlt-font-line-height-xxs: 16px; /* 16px */
    --dlt-font-line-height-reset: 0; /* 0 */
    --dlt-font-weight-bolder: 900; /* Black */
    --dlt-font-weight-bold: 700; /* Bold */
    --dlt-font-weight-medium: 500; /* Medium */
    --dlt-font-weight-regular: 400; /* Regular */
    --dlt-font-weight-light: 300; /* Light */
    --dlt-font-size-h1-xxl: 3.5rem; /* 56px */
    --dlt-font-size-h1-xl: 3rem; /* 48px */
    --dlt-font-size-h1-lg: 2rem; /* 32px */
    --dlt-font-size-xxl: 1.5rem; /* 24px */
    --dlt-font-size-xl: 1.375rem; /* 22px */
    --dlt-font-size-lg: 1.25rem; /* 20px */
    --dlt-font-size-md: 1.125rem; /* 18px */
    --dlt-font-size-sm: 1rem; /* 16px */
    --dlt-font-size-xs: 0.875rem; /* 14px */
    --dlt-font-size-xxs: 0.75rem; /* 12px */
    --dlt-font-family-base: Roboto,Helvetica,Arial,sans-serif; /* Roboto */
    --dlt-elevation-tooltip-nose: drop-shadow(0 -1px 0 rgba(1,31,61, .25)); /* For the Tooltips nose */
    --dlt-elevation-border: 0px 0px 1px 0px rgba(1,31,61, 1); /* For App switchers, Overflow menus, Tooltips */
    --dlt-elevation-lg: 0px 8px 24px 8px rgba(1,31,61, 0.24); /* Elevation 24 - For Modals */
    --dlt-elevation-md: 0px 2px 12px 2px rgba(1,31,61, 0.12); /* Elevation 12 - For Panels, App switchers, Overflow menus, Tooltips */
    --dlt-elevation-sm: 0px 2px 4px 1px rgba(1,31,61, 0.16); /* Elevation 4 - For Cards, Select dropdowns, Date pickers, Time pickers, Dropdown buttons */
    --dlt-color-palette-gray-980: #f9fafb;
    --dlt-color-palette-gray-950: #f0f2f4;
    --dlt-color-palette-gray-920: #e7ebee;
    --dlt-color-palette-gray-900: #e1e5ea;
    --dlt-color-palette-gray-850: #d2d9e0;
    --dlt-color-palette-gray-600: #7e96ae;
    --dlt-color-palette-gray-450: #537393;
    --dlt-color-palette-gray-350: #36597d;
    --dlt-color-palette-gray-200: #193857;
    --dlt-color-palette-gray-120: #011f3d; /* Core dark */
    --dlt-color-palette-beige-990: #fdfdfc;
    --dlt-color-palette-beige-980: #fbfbf8;
    --dlt-color-palette-beige-960: #f7f7f2;
    --dlt-color-palette-beige-930: #f2f2ea;
    --dlt-color-palette-beige-850: #ddddd5;
    --dlt-color-palette-beige-700: #b6b6af;
    --dlt-color-palette-beige-550: #909089;
    --dlt-color-palette-beige-430: #70706b;
    --dlt-color-palette-pear-940: #fafde3;
    --dlt-color-palette-pear-840: #f2f8b4;
    --dlt-color-palette-pear-740: #eaf485;
    --dlt-color-palette-pear-540: #d9ec45;
    --dlt-color-palette-pear-490: #c4dd1d;
    --dlt-color-palette-pear-440: #afce12;
    --dlt-color-palette-pear-390: #90b710;
    --dlt-color-palette-pear-340: #7ea028;
    --dlt-color-palette-purple-950: #f1e7fe;
    --dlt-color-palette-purple-870: #dabffc;
    --dlt-color-palette-purple-800: #c69dfb;
    --dlt-color-palette-purple-700: #a96cf9;
    --dlt-color-palette-purple-600: #8e3cf7; /* Accent */
    --dlt-color-palette-purple-500: #712dd2;
    --dlt-color-palette-purple-400: #5b25a7;
    --dlt-color-palette-purple-270: #3b2c5e;
    --dlt-color-palette-teal-950: #ebf9f8;
    --dlt-color-palette-teal-850: #c5edea;
    --dlt-color-palette-teal-700: #8adbd5;
    --dlt-color-palette-teal-500: #3cb7c1;
    --dlt-color-palette-teal-390: #21a2a6;
    --dlt-color-palette-teal-300: #058192; /* Primary */
    --dlt-color-palette-teal-260: #1c5569;
    --dlt-color-palette-teal-200: #134158;
    --dlt-color-palette-white: #ffffff;
    --dlt-color-overlay: rgba(19, 65, 88, 0.32); /* Overlays for modal pop-ups */
    --dlt-color-system-message-warning: #e07800; /* Color to show warning in validations and system messages */
    --dlt-color-system-message-success: #71a112; /* Color to show success in validations and system messages */
    --dlt-color-system-message-error: #d22d3d; /* Color to show error in validations and system messages */
    --dlt-color-system-message-info: #0366c9; /* Color to show information in validations and system messages */
    --dlt-color-palette-gradient-end: var(--dlt-color-palette-gray-120); /* Background/fill used rarely. Usually in: Loader indicator fill gradient end color. */
    --dlt-color-palette-gradient-start: var(--dlt-color-palette-gray-120); /* Background/fill used rarely. Usually in: Loader indicator fill gradient start color. */
    --dlt-color-global-neutral-900: var(--dlt-color-palette-white);
    --dlt-color-global-neutral-700: var(--dlt-color-palette-gray-980);
    --dlt-color-global-neutral-600: var(--dlt-color-palette-gray-950);
    --dlt-color-global-neutral-500: var(--dlt-color-palette-gray-920);
    --dlt-color-global-neutral-400: var(--dlt-color-palette-gray-850);
    --dlt-color-global-neutral-300: var(--dlt-color-palette-gray-450);
    --dlt-color-global-neutral-200: var(--dlt-color-palette-gray-350);
    --dlt-color-global-neutral-100: var(--dlt-color-palette-gray-120); /* Core dark */
    --dlt-color-global-gradient-end: var(--dlt-color-palette-teal-500); /* Background/fill used rarely. Usually in: Loader indicator fill gradient end color. */
    --dlt-color-global-gradient-start: var(--dlt-color-palette-purple-600); /* Background/fill used rarely. Usually in: Loader indicator fill gradient start color. */
    --dlt-color-global-accent-active: var(--dlt-color-palette-purple-270); /* Background/fill for emphasis buttons in active state */
    --dlt-color-global-accent-default: var(--dlt-color-palette-purple-600); /* Background/fill for emphasis buttons */
    --dlt-color-global-secondary-active: var(--dlt-color-palette-teal-850); /* Background/fill for active states in interactive component parts */
    --dlt-color-global-secondary-default: var(--dlt-color-palette-white); /* Background/fill for interactive component parts. Usually in: Secondary button, text input, radio button, checkbox, select dropdown. Others: Tab bar items, tags, toggle switches, overflow menu */
    --dlt-color-global-primary-active: var(--dlt-color-palette-teal-260); /* Background/fill to show active states. Usually in: primary buttons */
    --dlt-color-global-primary-default: var(--dlt-color-palette-teal-300); /* Background/fill for action componentsUsually in: Primary buttons Others: Stepper, toggle knob, etc. */
    --dlt-color-icon-static-inverse: var(--dlt-color-palette-white); /* Icon color for non-interactive descriptive icons in reversed backgrounds/fills */
    --dlt-color-icon-interactive-inverse: var(--dlt-color-palette-white); /* Icon color in reversed backgrounds/fills */
    --dlt-color-text-static-inverse: var(--dlt-color-palette-white); /* Text color in reversed backgrounds/fills */
    --dlt-color-text-interactive-inverse: var(--dlt-color-palette-white); /* Text color on reversed backgrounds/fills. Usually in: primary button */
    --dlt-color-border-interactive-inverse: var(--dlt-color-palette-white); /* Border/strokes color for reverse colored elements (owing to the background). Usually in: Secondary button border on reversed backgrounds/fills */
    --dlt-color-icon-static-subtle: var(--dlt-color-global-neutral-200); /* Icon color for non-interactive descriptive icons */
    --dlt-color-icon-interactive-accent: var(--dlt-color-global-accent-default); /* Icon color for accent icon buttons (special cases only). Usually in: Heart icon button */
    --dlt-color-icon-interactive-secondary: var(--dlt-color-global-neutral-100); /* Icon color for interactive icon buttons with less importance. Usually in: Navigation */
    --dlt-color-icon-interactive-primary-highlighted: var(--dlt-color-global-primary-active); /* Icon color in interactive icon buttons for hover states. Usually in: Tags close icon */
    --dlt-color-icon-interactive-primary: var(--dlt-color-global-primary-default); /* Icon color in interactive icon buttons */
    --dlt-color-text-static-subtle: var(--dlt-color-global-neutral-200); /* Text color with low importance. Usually in: Breadcrumbs, pagination, footer */
    --dlt-color-text-static-primary: var(--dlt-color-global-neutral-100); /* Default static text color. Usually in: Headings, legends, labels, text blocks */
    --dlt-color-text-interactive-link-highlighted: var(--dlt-color-global-primary-active); /* Link text color for active and visited states */
    --dlt-color-text-interactive-link-default: var(--dlt-color-global-primary-default); /* Link text color default */
    --dlt-color-text-interactive-subtle: var(--dlt-color-global-neutral-200); /* Text color with low importance. Usually in: Placeholders, steppers */
    --dlt-color-text-interactive-accent: var(--dlt-color-global-accent-default); /* Text color in interactive emphasis elements Usually in: Emphasis buttons */
    --dlt-color-text-interactive-secondary: var(--dlt-color-global-neutral-100); /* Text color in primary and secondary interactive elements. Usually in: Input, navigation menu */
    --dlt-color-text-interactive-primary: var(--dlt-color-global-primary-default); /* Text color in primary interactive elements. Usually in: Buttons */
    --dlt-color-border-static-primary: var(--dlt-color-global-neutral-400); /* Border for static discreet elements. Usually in: All separators, loaders, tab bars */
    --dlt-color-border-interactive-accent: var(--dlt-color-global-accent-default); /* Accent border/strokes color for emphasis elements. Usually in: Button borders */
    --dlt-color-border-interactive-contrast: var(--dlt-color-global-neutral-300); /* Borders/strokes for UI elements contrasting the primary color. Usually in: Steppers */
    --dlt-color-border-interactive-secondary: var(--dlt-color-global-neutral-200); /* Border/strokes for most of the interactive UI elements. Usually in: Default/hover input field, checkboxes, radio buttons, and toggle */
    --dlt-color-border-interactive-primary: var(--dlt-color-global-primary-default); /* Border/strokes for buttons or to show focus states. Usually in: Primary button, secondary button. Others: Focus input field, checkboxes, radio buttons, and toggle borders */
    --dlt-color-background-static-navigation-tertiary: var(--dlt-color-global-neutral-600); /* Background/fill for panel and additional navigation items */
    --dlt-color-background-static-navigation-secondary: var(--dlt-color-global-neutral-700); /* Background/fill for secondary navigation */
    --dlt-color-background-static-navigation-primary: var(--dlt-color-global-neutral-900); /* Background/fill for primary navigation */
    --dlt-color-background-static-contrast: var(--dlt-color-global-primary-default); /* Background/fill used rarely. Usually in: Loader indicator fill. Others: Data table multi-select first row */
    --dlt-color-background-static-tertiary: var(--dlt-color-global-neutral-600); /* Tertiary background/fill used rarely. Usually in: Card pages with optional offering of vertical and horizontal navigation. Others: Loaders track background */
    --dlt-color-background-static-secondary: var(--dlt-color-global-neutral-700); /* Alternative background/fill. Usually in: Background of card pages as optional offering. Others: Data table zebra stripes 2 */
    --dlt-color-background-static-primary: var(--dlt-color-global-neutral-900); /* Non-standard interactive background/fill. Usually in: The whole screen. Others: Data table zebra stripes 1, tooltips */
    --dlt-color-background-interactive-navigation-menu-item-secondary-active: var(--dlt-color-global-secondary-active); /* Background/fill for secondary navigation menu item in active state */
    --dlt-color-background-interactive-navigation-menu-item-secondary-selected: var(--dlt-color-global-neutral-500); /* Background/fill for secondary navigation menu item in selected state */
    --dlt-color-background-interactive-navigation-menu-item-secondary-default: var(--dlt-color-global-neutral-700); /* Background/fill for secondary navigation menu item in default state */
    --dlt-color-background-interactive-navigation-menu-item-primary-active: var(--dlt-color-global-secondary-active); /* Background/fill for primary navigation menu item in active state */
    --dlt-color-background-interactive-navigation-menu-item-primary-selected: var(--dlt-color-global-neutral-600); /* Background/fill for primary navigation menu item in selected state */
    --dlt-color-background-interactive-navigation-menu-item-primary-default: var(--dlt-color-global-secondary-default); /* Background/fill for primary navigation menu item in default state */
    --dlt-color-background-interactive-add-on: var(--dlt-color-global-neutral-600); /* Background/fill for interactive add-ons. Usually in: Input group add-on */
    --dlt-color-background-interactive-contrast: var(--dlt-color-global-neutral-300); /* For interactive elements with color contrasting the primary-default. Usually in: Toggle knob off */
    --dlt-color-background-interactive-subtle: var(--dlt-color-global-neutral-400); /* For subtle interactive UI elements. Usually in: Scrollbar thumb */
    --dlt-color-background-interactive-accent-active: var(--dlt-color-global-accent-active); /* Background/fill for emphasis buttons in active state */
    --dlt-color-background-interactive-accent-default: var(--dlt-color-global-accent-default); /* Background/fill for emphasis buttons */
    --dlt-color-background-interactive-secondary-hover: var(--dlt-color-global-neutral-600); /* Background/fill for hover states in interactive component parts. Currently in: Data table */
    --dlt-color-background-interactive-secondary-active: var(--dlt-color-global-secondary-active); /* Background/fill for active states in interactive component parts */
    --dlt-color-background-interactive-secondary-default: var(--dlt-color-global-secondary-default); /* Background/fill for interactive component parts. Usually in: Secondary button, text input, radio button, checkbox, select dropdown. Others: Tab bar items, tags, toggle switches, overflow menu */
    --dlt-color-background-interactive-primary-active: var(--dlt-color-global-primary-active); /* Background/fill to show active states. Usually in: primary buttons */
    --dlt-color-background-interactive-primary-default: var(--dlt-color-global-primary-default); /* Background/fill for action components. Usually in: Primary buttons Others: Stepper, toggle knob, etc. */
}