
/*!
* 
*
* Copyright (c) 2019-2023 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 Wed, 13 Dec 2023 20:43:42 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(1, 31, 61, 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: #1776bf; /* Color to show information in validations and system messages */
  --dlt-color-category-warmgray-subtle: #ececdf; /* Text color for bold elements with color-coded categories, Usually in: HTTP Method tags (Contribution) */
  --dlt-color-category-green-bold: #507702; /* Text color for bold elements with color-coded categories, Usually in: HTTP Method tags (Contribution) */
  --dlt-color-category-green-vibrant: #bfea6c; /* Background/fill for vibrant elements with color-coded categories, Usually in: HTTP Method tags (Contribution) */
  --dlt-color-category-green-subtle: #dff7ab; /* Background/fill for subtle elements with color-coded categories, Usually in: colored tags */
  --dlt-color-category-yellow-bold: #a35700; /* Text color for bold elements with color-coded categories, Usually in: HTTP Method tags (Contribution) */
  --dlt-color-category-yellow-vibrant: #f7ca73; /* Background/fill for vibrant elements with color-coded categories, Usually in: HTTP Method tags (Contribution) */
  --dlt-color-category-yellow-subtle: #faf3a0; /* Background/fill for subtle elements with color-coded categories, Usually in: colored tags */
  --dlt-color-category-red-bold: #ba1936; /* Text color for bold elements with color-coded categories, Usually in: HTTP Method tags (Contribution) */
  --dlt-color-category-red-vibrant: #f39a95; /* Background/fill for vibrant elements with color-coded categories, Usually in: HTTP Method tags (Contribution) */
  --dlt-color-category-red-subtle: #f9e0c3; /* Background/fill for subtle elements with color-coded categories, Usually in: colored tags */
  --dlt-color-category-teal-bold: #00718a; /* Text color for bold elements with color-coded categories, Usually in: HTTP Method tags (Contribution) */
  --dlt-color-category-teal-vibrant: #7fd9c3; /* Background/fill for vibrant elements with color-coded categories, Usually in: HTTP Method tags (Contribution) */
  --dlt-color-category-teal-subtle: #bbf1ee; /* Background/fill for subtle elements with color-coded categories, Usually in: colored tags */
  --dlt-color-category-blue-bold: #0264c0; /* Text color for bold elements with color-coded categories, Usually in: HTTP Method tags (Contribution) */
  --dlt-color-category-blue-vibrant: #96cdf8; /* Background/fill for vibrant elements with color-coded categories, Usually in: HTTP Method tags (Contribution) */
  --dlt-color-category-blue-subtle: #cde6f9; /* Background/fill for subtle elements with color-coded categories, Usually in: colored tags */
  --dlt-color-category-purple-bold: #6537d7; /* Text color for bold elements with color-coded categories, Usually in: HTTP Method tags (Contribution) */
  --dlt-color-category-purple-vibrant: #b0affe; /* Background/fill for vibrant elements with color-coded categories, Usually in: HTTP Method tags (Contribution) */
  --dlt-color-category-purple-subtle: #e0d6ff; /* Background/fill for subtle elements with color-coded categories, Usually in: colored tags */
  --dlt-color-category-violet-bold: #9a27b7; /* Text color for bold elements with color-coded categories, Usually in: HTTP Method tags (Contribution) */
  --dlt-color-category-violet-vibrant: #efb0e1; /* Background/fill for vibrant elements with color-coded categories, Usually in: HTTP Method tags (Contribution) */
  --dlt-color-category-violet-subtle: #ffd6ef; /* Background/fill for subtle elements with color-coded categories, Usually in: colored tags */
  --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-980: var(--dlt-color-palette-white);
  --dlt-color-global-neutral-900: var(--dlt-color-palette-gray-980);
  --dlt-color-global-neutral-800: var(--dlt-color-palette-gray-950);
  --dlt-color-global-neutral-700: var(--dlt-color-palette-gray-920);
  --dlt-color-global-neutral-600: var(--dlt-color-palette-gray-850);
  --dlt-color-global-neutral-400: var(--dlt-color-palette-gray-450);
  --dlt-color-global-neutral-300: 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-subtle: var(--dlt-color-palette-purple-950); /* Background/fill for emphasis buttons in active state */
  --dlt-color-global-accent-highlighted: 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-highlighted: 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-highlighted: 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-300); /* 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-highlighted); /* 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-300); /* 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-navigation-secondary-hover: var(--dlt-color-global-primary-highlighted); /* Navigation menu item text color secondary */
  --dlt-color-text-interactive-navigation-secondary: var(--dlt-color-global-neutral-100); /* Navigation menu item text color secondary */
  --dlt-color-text-interactive-navigation-primary-hover: var(--dlt-color-global-primary-highlighted); /* Navigation menu item text color primary */
  --dlt-color-text-interactive-navigation-primary: var(--dlt-color-global-neutral-100); /* Navigation menu item text color primary */
  --dlt-color-text-interactive-link-highlighted: var(--dlt-color-global-primary-highlighted); /* 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-300); /* 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-highlighted: var(--dlt-color-global-primary-highlighted); /* Text color for interactive highlighted elements, Usually in: Selectable Tags */
  --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-600); /* Border for static discreet elements. Usually in: All separators, loaders, tab bars */
  --dlt-color-border-interactive-subtle: var(--dlt-color-global-neutral-600); /* Used as border color for interactive discreet elements, Usually in: selectable tags */
  --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-400); /* Borders/strokes for UI elements contrasting the primary color. Usually in: Steppers */
  --dlt-color-border-interactive-secondary: var(--dlt-color-global-neutral-300); /* 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-800); /* Background/fill for panel and additional navigation items */
  --dlt-color-background-static-navigation-secondary: var(--dlt-color-global-neutral-900); /* Background/fill for secondary navigation */
  --dlt-color-background-static-navigation-primary: var(--dlt-color-global-neutral-980); /* 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-800); /* 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-900); /* 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-980); /* 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-hover: var(--dlt-color-global-neutral-800); /* Background/fill for secondary navigation menu item in hover state */
  --dlt-color-background-interactive-navigation-menu-item-secondary-active: var(--dlt-color-global-secondary-highlighted); /* Background/fill for secondary navigation menu item in active state */
  --dlt-color-background-interactive-navigation-menu-item-secondary-selected: var(--dlt-color-global-neutral-700); /* Background/fill for secondary navigation menu item in selected state */
  --dlt-color-background-interactive-navigation-menu-item-secondary-default: var(--dlt-color-global-neutral-900); /* Background/fill for secondary navigation menu item in default state */
  --dlt-color-background-interactive-navigation-menu-item-primary-hover: var(--dlt-color-global-neutral-900); /* Background/fill for primary navigation menu item in hover state */
  --dlt-color-background-interactive-navigation-menu-item-primary-active: var(--dlt-color-global-secondary-highlighted); /* Background/fill for primary navigation menu item in active state */
  --dlt-color-background-interactive-navigation-menu-item-primary-selected: var(--dlt-color-global-neutral-800); /* 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-contrast: var(--dlt-color-global-neutral-400); /* For interactive elements with color contrasting the primary-default. Usually in: Toggle knob off */
  --dlt-color-background-interactive-subtle: var(--dlt-color-global-neutral-600); /* For subtle interactive UI elements. Usually in: Scrollbar thumb */
  --dlt-color-background-interactive-tertiary-highlighted: var(--dlt-color-global-secondary-highlighted); /* Background/fill for highlighted interactive discreet elements. Usually in: Selected tags */
  --dlt-color-background-interactive-tertiary-hover: var(--dlt-color-global-neutral-700); /* Background/fill for hover states in interactive subtle elements. Usually in: tags */
  --dlt-color-background-interactive-tertiary-default: var(--dlt-color-global-neutral-800); /* Background/fill for interactive subtle elements. Usually in: Input group add-on and tags */
  --dlt-color-background-interactive-accent-subtle: var(--dlt-color-global-accent-subtle); /* Background/fill for emphasis selected tags */
  --dlt-color-background-interactive-accent-active: var(--dlt-color-global-accent-highlighted); /* 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-800); /* Background/fill for hover states in interactive component parts. Currently in: Data table */
  --dlt-color-background-interactive-secondary-active: var(--dlt-color-global-secondary-highlighted); /* 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-highlighted); /* 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. */
  --dlt-color-background-interactive-add-on: var(--dlt-color-background-interactive-tertiary-default); /* Background/fill for interactive add-ons. Usually in: Input group add-on */
}
