@charset "UTF-8";
/* ==========================================================================
  Smart UI Theme CSS Variables
  ==========================================================================
  Purpose:        Central definition of all customizable design tokens
  Usage:          :root + dark theme variant + component-specific overrides
  Convention:     --smart-{scope?}-{property-or-role}[-state-or-modifier]
  ========================================================================== */
/* CSS variables */
:root {
  /* ── Brand / Semantic Colors ──────────────────────────────────────── */
  --smart-primary-rgb: 0, 78, 140;
  --smart-primary: rgb(var(--smart-primary-rgb));
  --smart-primary-color: #ffffff;
  --smart-secondary-rgb: 45, 45, 48;
  --smart-secondary: rgb(var(--smart-secondary-rgb));
  --smart-secondary-color: #ffffff;
  --smart-error-rgb: 176, 0, 32;
  --smart-error: rgb(var(--smart-error-rgb));
  --smart-error-color: #ffffff;
  --smart-success-rgb: 139, 195, 74;
  --smart-success: rgb(var(--smart-success-rgb));
  --smart-success-color: #ffffff;
  --smart-info-rgb: 92, 192, 222;
  --smart-info: rgb(var(--smart-info-rgb));
  --smart-info-color: #ffffff;
  --smart-warning-rgb: 240, 173, 78;
  --smart-warning: rgb(var(--smart-warning-rgb));
  --smart-warning-color: #ffffff;
  /* ── Application Surfaces ─────────────────────────────────────────── */
  --smart-white: #ffffff;
  --smart-black: #000000;
  --smart-base: #dfe5ec;
  --smart-base-50: #f8fafb;
  --smart-base-100: #f3f6f9;
  --smart-base-200: #e3eaf2;
  --smart-base-300: #dfe5ec;
  --smart-base-400: #dbe0e6;
  --smart-base-500: #d7dbe0;
  --smart-base-600: #c6cbd2;
  --smart-base-700: #74787e;
  --smart-base-800: #45494f;
  --smart-base-900: #1b1d20;
  --smart-light-rgb: 255, 255, 255;
  --smart-light: rgb(var(--smart-light-rgb));
  --smart-light-color: #222222;
  --smart-dark-rgb: 34, 34, 34;
  --smart-dark: rgb(var(--smart-dark-rgb));
  --smart-dark-color: #ffffff;
  --smart-background: #fefefe;
  --smart-background-color: #5A5A5A;
  --smart-surface: #f8fafb;
  --smart-base-background-color: var(--smart-base-50);
  --smart-base-background-color-dark: var(--smart-base-900);
  --smart-body-background-color: var(--smart-base-100);
  --smart-outline-color: var(--smart-primary);
  --smart-surface-color: #323232;
  /* ── Interaction / State Colors ───────────────────────────────────── */
  --smart-disabled: #CCCCCC;
  --smart-disabled-color: #555555;
  --smart-ui-state-hover: var(--smart-base-200);
  --smart-ui-state-color-hover: #333;
  --smart-ui-state-border-hover: var(--smart-ui-state-hover);
  --smart-ui-state-active: var(--smart-primary);
  --smart-ui-state-color-active: var(--smart-primary-color);
  --smart-ui-state-border-active: var(--smart-primary);
  --smart-ui-state-focus: rgba(var(--smart-primary-rgb), .1);
  --smart-ui-state-color-focus: #333;
  --smart-ui-state-border-focus: var(--smart-ui-state-focus);
  --smart-ui-state-selected: rgba(var(--smart-primary-rgb), .1);
  --smart-ui-state-color-selected: var(--smart-primary);
  --smart-ui-state-border-selected: rgba(var(--smart-primary-rgb), .1);
  /* ── Borders & Shape ───────────────────────────────────────────── */
  --smart-item-border-width: 1px;
  --smart-item-border-radius: var(--smart-border-radius);
  --smart-item-border-top-left-radius: var(--smart-border-radius);
  --smart-item-border-top-right-radius: var(--smart-border-radius);
  --smart-item-border-bottom-left-radius: var(--smart-border-radius);
  --smart-item-border-bottom-right-radius: var(--smart-border-radius);
  --smart-border-width: 1px;
  --smart-border-radius: 4px;
  --smart-border-radius-0: 0;
  --smart-border-radius-1: 0.25rem;
  --smart-border-radius-2: 0.5rem;
  --smart-border-radius-3: 0.75rem;
  --smart-border-radius-4: 1rem;
  --smart-border-radius-5: 1.25rem;
  --smart-border-radius-6: 1.5rem;
  --smart-border-radius-7: 1.75rem;
  --smart-border-radius-8: 2rem;
  --smart-border-radius-9: 2.25rem;
  --smart-border-radius-10: 2.5rem;
  --smart-border-top-left-radius: var(--smart-border-radius);
  --smart-border-top-right-radius: var(--smart-border-radius);
  --smart-border-bottom-left-radius: var(--smart-border-radius);
  --smart-border-bottom-right-radius: var(--smart-border-radius);
  --smart-border: #E0E0E0;
  --smart-border-rgb: 244, 224, 224;
  --smart-outline: #b2b2b2;
  --smart-border-normal: var(--smart-base-400);
  --smart-border-hover: var(--smart-base-700);
  --smart-border-focus: var(--smart-primary);
  --smart-border-disabled: var(--smart-base-400);
  /* ── Typography & Icons ───────────────────────────────────────────── */
  --smart-text-title-color: var(--smart-base-900);
  --smart-text-color: var(--smart-base-900);
  --smart-text-secondary-color: var(--smart-base-800);
  --smart-text-tertiary-color: var(--smart-base-700);
  --smart-text-disabled-color: var(--smart-base-600);
  --smart-text-contrast-color: var(--smart-white);
  --smart-font-size: 14px;
  --smart-font-weight: inherit;
  --smart-font-style: inherit;
  --smart-font-family: Roboto, "Helvetica Neue", sans-serif;
  --smart-font-family-icon: smart-icons;
  --smart-font-family-icon-src: local('../font/smart-icons'), url('../font/smart-icons.woff2') format('woff2'), url('../font/smart-icons.woff') format('woff'), url('../font/smart-icons.ttf') format('truetype'), url('../font/smart-icons.eot') format('embedded-opentype');
  /* ── Global Component Defaults ─────────────────────────────── */
  --smart-tick-color: var(--smart-border);
  /* tick color for smartTank, smartSlider and smartGauge */
  --smart-tick-label-color: var(--smart-background-color);
  /* tick label color for smartTank, smartSlider and smartGauge */
  --smart-box-height: 450px;
  /* default height for Dialog, Gauge, Accordion, Tabs, Tree, Array */
  --smart-box-width: 450px;
  /* default width for  Dialog, Gauge, Accordion, Tabs, Tree, Array */
  --smart-bar-height: 48px;
  /* default height for headers and footers */
  --smart-bar-width: 400px;
  /* default width for headers and footers */
  --smart-editor-selection: var(--smart-primary);
  /* default selection bg color */
  --smart-editor-selection-color: var(--smart-primary-color);
  /* default selection color */
  --smart-editor-height: 30px;
  /* default height for editors */
  --smart-editor-width: 250px;
  /* default width for editors */
  --smart-editor-drop-down-width: 300px;
  /* default width for editors drop-down */
  --smart-editor-drop-down-height: 400px;
  /* default height for editors drop-down */
  --smart-editor-drop-down-padding-size: 3px;
  /* smartDropDownList, smartComboBox drop down default height */
  --smart-editor-drop-down-max-width: 800px;
  /* smartDropDownList, smartComboBox, smartTextBox popup max width */
  --smart-editor-drop-down-min-width: 100px;
  /* smartDropDownList, smartComboBox, smartTextBox popup min width */
  --smart-editor-drop-down-max-height: 400px;
  /* smartDropDownList, smartComboBox, smartTextBox popup max height */
  --smart-editor-drop-down-min-height: 50px;
  /* smartDropDownList, smartComboBox, smartTextBox popup min height */
  --smart-editor-drop-down-resize-bar-height: 15px;
  /* smartDropDownList, smartComboBox, smartTextBox popup resize bar default height */
  --smart-editor-drop-down-vertical-offset: 5px;
  /* Vertical offset of editor drop downs */
  --smart-editor-drop-down-z-index: 9999;
  /* z-index of editor drop downs */
  --smart-editor-label-padding: 4px;
  /* default padding for inputs */
  --smart-editor-addon-width: 27px;
  /* default width for spin buttons, dropdown buttons. */
  --smart-column-icon-size: 30px;
  /* default size of column icons */
  /* ── Icon Glyphs (unicode values) ─────────────────────────────────── */
  --smart-icon-table: '\e800';
  /* Code of table icon */
  --smart-icon-star: '\e801';
  /* Code of star icon */
  --smart-icon-star-empty: '\e802';
  /* Code of empty star icon */
  --smart-icon-plus: '\e803';
  /* Code of plus icon */
  --smart-icon-minus: '\e804';
  /* Code of minus icon */
  --smart-icon-attention-circled: '\e805';
  /* Code of circled attention icon */
  --smart-icon-align-left: '\e806';
  /* Code of align left icon */
  --smart-icon-align-right: '\e807';
  /* Code of align right icon */
  --smart-icon-align-center: '\e808';
  /* Code of align center icon */
  --smart-icon-align-justify: '\e813';
  /* Code of align justify icon */
  --smart-icon-reload: '\e809';
  /* Code of reload icon */
  --smart-icon-cloud: '\e84d';
  /* Code of cloud icon */
  --smart-icon-cancel: '\e80d';
  /* Code of cancel icon */
  --smart-icon-close: '\e80d';
  /* Code of close icon */
  --smart-icon-cancel-circled: '\e80e';
  /* Code of Close icon Alt */
  --smart-icon-cancel-alt: '\E849';
  /* Code of Close icon Alt */
  --smart-icon-arrow-alt: '\F105';
  /* Code of circled cancel icon */
  --smart-icon-plus-circled: '\e810';
  /* Code of circled plus icon */
  --smart-icon-power: '\e811';
  /* Code of power icon */
  --smart-icon-minus-circled: '\e814';
  /* Code of circled minus icon */
  --smart-icon-arrow-up-alt: '\e817';
  /* Code of alternative up arrow icon */
  --smart-icon-radio: '\e818';
  /* Code of radio icon */
  --smart-icon-refresh: '\e819';
  /* Code of refresh icon */
  --smart-icon-chart: '\e81a';
  /* Code of chart icon */
  --smart-icon-check-squared: '\e81b';
  /* Code of squared check icon */
  --smart-icon-resize-full: '\e81c';
  /* Code of full resize icon */
  --smart-icon-resize-small: '\e81d';
  /* Code of small resize icon */
  --smart-icon-resize-vertical: '\e80c';
  /* Code of vertical resize icon */
  --smart-icon-resize-horizontal: '\e80f';
  /* Code of horizontal resize icon */
  --smart-icon-lock: '\e821';
  /* Code of lock icon */
  --smart-icon-sort: '\e823';
  /* Code of sort icon */
  --smart-icon-delete: '\e826';
  /* Code of delete icon */
  --smart-icon-search: '\e828';
  /* Code of search icon */
  --smart-icon-calendar: '\e829';
  /* Code of calendar icon */
  --smart-icon-edit: '\e82a';
  /* Code of edit icon */
  --smart-icon-popup: '\e82c';
  /* Code of popup icon */
  --smart-icon-lock-open: '\e82e';
  /* Code of open lock icon */
  --smart-icon-add-filter: '\e82f';
  /* Code of add filter icon */
  --smart-icon-block: '\e832';
  /* Code of block icon */
  --smart-icon-settings: '\e833';
  /* Code of settings icon */
  --smart-icon-duplicate: '\e834';
  /* Code of duplicate icon */
  --smart-icon-copy-record: '\e835';
  /* Code of copy record icon */
  --smart-icon-download-alt: '\e836';
  /* Code of alternative download icon */
  --smart-icon-clock: '\e837';
  /* Code of clock icon */
  --smart-icon-attention: '\e838';
  /* Code of attention icon */
  --smart-icon-help-circled: '\e839';
  /* Code of circled help icon */
  --smart-icon-mail: '\e83c';
  /* Code of mail icon */
  --smart-icon-up: '\e83f';
  /* Code of up icon */
  --smart-icon-first-page: '\e900';
  /* Code of first page icon */
  --smart-icon-arrow-down: '\e901';
  /* Code of down arrow icon */
  --smart-icon-arrow-left: '\e902';
  /* Code of left arrow icon */
  --smart-icon-arrow-right: '\e903';
  /* Code of right arrow icon */
  --smart-icon-arrow-up: '\e904';
  /* Code of up arrow icon */
  --smart-icon-arrow-down-filled: '\e812';
  /* Code of filled down arrow icon */
  --smart-icon-arrow-left-filled: '\e816';
  /* Code of filled left arrow icon */
  --smart-icon-arrow-right-filled: '\e81e';
  /* Code of filled right arrow icon */
  --smart-icon-arrow-up-filled: '\e815';
  /* Code of filled up arrow icon */
  --smart-icon-last-page: '\e905';
  /* Code of last page icon */
  --smart-icon-more-horiz: '\e906';
  /* Code of more icon */
  --smart-icon-skip-next: '\e907';
  /* Code of skip next icon */
  --smart-icon-check: '\e908';
  /* Code of check icon */
  --smart-icon-mode-edit: '\e909';
  /* Code of edit mode icon */
  --smart-icon-replay: '\e90c';
  /* Code of replay icon */
  --smart-icon-visibility: '\e90d';
  /* Code of visibility icon */
  --smart-icon-visibility-off: '\e90e';
  /* Code of visibility off icon */
  --smart-icon-link: '\e831';
  /* Code of link icon */
  --smart-icon-unlink: '\f127';
  /* Code of link icon */
  --smart-icon-link-ext: '\f08e';
  /* Code of link icon */
  --smart-icon-check-empty: '\f096';
  /* Code of empty check icon */
  --smart-icon-filter: '\f0b0';
  /* Code of filter icon */
  --smart-icon-resize-full-alt: '\f0b2';
  /* Code of full resize alternative icon */
  --smart-icon-menu: '\f0c9';
  /* Code of menu icon */
  --smart-icon-sort-1: '\f0dc';
  /* Code of sort alternative icon */
  --smart-icon-paste: '\f0ea';
  /* Code of paste icon */
  --smart-icon-circle-empty: '\f10c';
  /* Code of empty circle icon */
  --smart-icon-circle: '\f111';
  /* Code of circle icon */
  --smart-icon-ellipsis: '\f141';
  /* Code of ellipsis icon */
  --smart-icon-minus-squared: '\f146';
  /* Code of squared minus icon */
  --smart-icon-ok-squared: '\f14a';
  /* Code of squared ok icon */
  --smart-icon-sort-name-up: '\f15d';
  /* Code of sort name up icon */
  --smart-icon-sort-name-down: '\f15e';
  /* Code of sort name down icon */
  --smart-icon-sort-alt-up: '\f160';
  /* Code of sort up alternative icon */
  --smart-icon-sort-alt-down: '\f161';
  /* Code of sort down alternative icon */
  --smart-icon-sort-number-up: '\f162';
  /* Code of sort number up icon */
  --smart-icon-sort-number-down: '\f163';
  /* Code of sort number down icon */
  --smart-icon-dot-circled: '\f192';
  /* Code of circled dot icon */
  --smart-icon-toggle-off: '\f204';
  /* Code of toggle off icon */
  --smart-icon-toggle-on: '\f205';
  /* Code of toggle on icon */
  --smart-icon-group: '\f247';
  /* Code of group icon */
  --smart-icon-ungroup: '\f248';
  /* Code of ungroup icon */
  --smart-icon-window-maximize: '\f2d0';
  /* Code of maximize window icon */
  --smart-icon-window-minimize: '\f2d1';
  /* Code of minimize window icon */
  --smart-icon-window-restore: '\f2d2';
  /* Code of restore window icon */
  --smart-icon-window-pin-alt: '\e82d';
  /* Code of pin window alternative icon */
  --smart-icon-window-pin: '\e80a';
  /* Code of window pin icon */
  --smart-icon-docs: '\f0c5';
  /* Code of docs icon */
  --smart-icon-pdf: '\f1c1';
  /* Code of pdf icon */
  --smart-icon-excel: '\f1C3';
  /* Code of excel icon */
  --smart-icon-word: '\f1C2';
  /* Code of word icon */
  --smart-icon-archive: '\f1C6';
  /* Code of zip icon */
  --smart-icon-file: '\e845';
  /* Code of file icon */
  --smart-icon-powerpoint: '\f1c4';
  /* Code of powerpoint icon */
  --smart-icon-text: '\f0f6';
  /* Code of text icon */
  --smart-icon-math: '\f01a';
  /* Code of math icon */
  --smart-icon-spin: '\e80b';
  /* Code of spin icon */
  --smart-icon-user: '\e81f';
  /* Code of user icon */
  --smart-icon-font: '\f031';
  /* Code of font icon */
  --smart-icon-fontsize: '\f088';
  /* Code of fontsize icon */
  --smart-icon-contains: '\f063';
  /* Code of contains icon */
  --smart-icon-starts_with: '\f064';
  /* Code of starts with icon */
  --smart-icon-ends_with: '\f065';
  /* Code of ends with icon */
  --smart-icon-does_not_contain: '\f066';
  /* Code of does not contain icon */
  --smart-icon-equals: '\f52c';
  /* Code of equals icon */
  --smart-icon-greater-than: '\f531';
  /* Code of greater than icon */
  --smart-icon-greater-than-equal: '\f532';
  /* Code of greater than or equal icon */
  --smart-icon-less-than: '\f536';
  /* Code of less than icon */
  --smart-icon-less-than-equal: '\f537';
  /* Code of less than or equal icon */
  --smart-icon-not-equal: '\f53e';
  /* Code of not equal icon */
  --smart-icon-percentage: '\f541';
  /* Code of percentage icon */
  --smart-icon-grip-vertical: '\f58e';
  /* Code of grip icon */
  --smart-icon-between: '\f06a';
  /* Code of between icon */
  --smart-icon-bold: '\e820';
  /* Code of bold icon */
  --smart-icon-italic: '\e822';
  /* Code of italic icon */
  --smart-icon-underline: '\f0cd';
  /* Code of underline icon */
  --smart-icon-strike-through: '\f0cc';
  /* Code of strike-through icon */
  --smart-icon-list-ordered: '\f0cb';
  /* Code of list numbered icon */
  --smart-icon-list-unordered: '\f0ca';
  /* Code of list bullet icon */
  --smart-icon-list-check: '\e89f';
  /* Code of list check icon */
  --smart-icon-subscript: '\f12c';
  /* Code of subscript icon */
  --smart-icon-superscript: '\f12b';
  /* Code of superscript icon */
  --smart-icon-color-background: '\e830';
  /* Code of bucket icon */
  --smart-icon-indent-right: '\e824';
  /* Code of indent icon */
  --smart-icon-indent-left: '\e825';
  /* Code of outdent icon */
  --smart-icon-image: '\e827';
  /* Code of image icon */
  --smart-icon-case-lower: 'aa';
  /* Code of lower case icon */
  --smart-icon-case-upper: 'AA';
  /* Code of upper case icon */
  --smart-icon-print: '\e82b';
  /* Code of print icon */
  --smart-icon-format-clear: 'T';
  /* Code of clear format icon */
  --smart-icon-source-code: '\f121';
  /* Code of source code icon */
  --smart-icon-split-mode: '\e83b';
  /* Code of split mode icon */
  --smart-icon-cut: '\e83a';
  /* Code of Cut icon */
  --smart-icon-video: '\f16a';
  /* Code of YouTube video icon */
  --smart-icon-video-camera: '\e840';
  /* Code of Bell  icon */
  --smart-icon-bell: '\f0f3';
  /* Code of video icon */
  --smart-icon-header: '\f1dc';
  /* Code of Table Header */
  --smart-icon-row: '\f0db';
  /* Code of Table Row icon */
  --smart-icon-row-before: '\f2d0';
  /* Code of Table Row icon */
  --smart-icon-row-after: '\f2d0';
  /* Code of Table Row icon */
  --smart-icon-row-delete: var(--smart-icon-cancel-circled);
  /* Code of Table Row icon */
  --smart-icon-column: '\f0db';
  /* Code of Table Column icon */
  --smart-icon-column-left: '\f2d0';
  /* Code of Table Column left insert icon */
  --smart-icon-column-right: '\f2d0';
  /* Code of Table Column right insert icon */
  --smart-icon-column-delete: var(--smart-icon-cancel-circled);
  /* Code of Table Column delete icon */
  --smart-icon-vertical-align: '\f06a \e80c';
  /* Code of Table Vertical Align icon */
  --smart-icon-styles: '\f1fc';
  /* Code of Table Styles icon */
  --smart-icon-comment: '\F0E5';
  /* Code of Comment icon */
  --smart-icon-card: '\E83E';
  /* Code of Card icon */
  --smart-icon-tasks: '\F0AE';
  /* Code of Tasks icon */
  --smart-icon-phone: '\E83D';
  /* Code of Phone icon */
  --smart-icon-kanban: '\F181';
  /* Code of Kanban icon */
  --smart-icon-table-alt: '\F0CE';
  /* Code of Table icon */
  --smart-icon-zoom-in: '\E841';
  /* Code of Zoom In icon */
  --smart-icon-zoom-out: '\E842';
  /* Code of Zoom Out icon */
  --smart-icon-move: '\F047';
  /* Code of Move icon */
  --smart-icon-home: '\E843';
  /* Code of Home icon */
  --smart-icon-history: '\F1DA';
  /* Code of History icon */
  --smart-icon-kanban-alt: '\e8a1';
  /* Code of Kanban icon */
  --smart-icon-card-alt: '\e8a2';
  /* Code of Card icon */
  --smart-icon-grid-alt: '\e8a3';
  /* Code of Grid icon */
  --smart-icon-timeline: '\E8A4';
  /* Code of timeline icon */
  --smart-icon-scheduler: '\E8A5';
  /* Code of scheduler icon */
  --smart-icon-like: '\F164';
  /* Code of like icon */
  --smart-icon-heart: '\E84E';
  /* Code of heart icon */
  --smart-icon-flag: '\E850';
  /* Code of flag icon */
  --smart-icon-music: '\E851';
  /* Code of music */
  /* ── Accordion ─────────────────────────────────── */
  --smart-accordion-animation-duration: 225ms;
  /* animation duration */
  --smart-accordion-default-width: var(--smart-box-width);
  /* default width */
  --smart-accordion-default-height: var(--smart-box-height);
  /* default height */
  --smart-accordion-expanded-content-height: 0px;
  /* Determines expanded content's height */
  --smart-accordion-expanded-content-local-height: 0px;
  /* The height of an expanded item content part. Calculated dynamically for each item. Used in all modes except 'singleFitHeight'. */
  --smart-accordion-item-header-height: var(--smart-bar-height);
  /* Element's header height. Used in several calcilations related to items height. */
  --smart-accordion-item-expanded-offset: 20px;
  /* An offset below each expanded accordion item. */
  /* ── Array ─────────────────────────────────── */
  --smart-array-default-width: var(--smart-box-width);
  /* default width */
  --smart-array-default-height: var(--smart-box-height);
  /* default height */
  --smart-array-element-gap: 3px;
  /* gap size */
  /* ── Breadcrumb ─────────────────────────────────── */
  --smart-breadcrumb-default-width: 400px;
  /* default width */
  --smart-breadcrumb-default-height: auto;
  /* default height */
  --smart-breadcrumb-padding: 10px;
  /* Padding of smart-breadcrumb and vertical offset between smartBreadcrumb items */
  --smart-breadcrumb-drop-down-width: var(--smart-editor-drop-down-width);
  /* Width of dropdown in minimized mode */
  --smart-breadcrumb-item-height: 40px;
  /* Height of items */
  --smart-breadcrumb-horizontal-offset: 10px;
  /* Horizontal offset between items */
  /* ── Button ─────────────────────────────────── */
  --smart-button-text-transform: none;
  /* Controls the capitalization of button's text. Could be set as uppercase/lowercase/capitalize. */
  --smart-button-padding: 8px 16px;
  /* Sets button's paddings. */
  --smart-button-large-padding: 10px 16px;
  /* Sets large button's paddings. */
  --smart-button-large-font-size: 18px;
  /* Sets large button's font size. */
  --smart-button-small-padding: 5px 10px;
  /* Sets small button's paddings. */
  --smart-button-small-font-size: 12px;
  /* Sets small button's font size. */
  --smart-button-very-small-padding: 3px 5px;
  /* Sets very small button's paddings. */
  --smart-button-very-small-font-size: 10px;
  /* Sets very small button's font size. */
  --smart-button-flat-color: var(--smart-background-color);
  /* The color of the flat button. */
  --smart-button-outlined-color: var(--smart-background-color);
  /* The color of the outlined button. */
  --smart-button-outlined-border: var(--smart-border);
  /* The border of the outlined button. */
  /* ── Button Group ─────────────────────────────────── */
  --smart-button-group-default-width: auto;
  /* default width */
  --smart-button-group-default-height: auto;
  /* defuult height */
  /* ── Calendar ─────────────────────────────────── */
  --smart-calendar-header-height: calc(0.75 * var(--smart-bar-height));
  /* default height for smartCalendar's header section */
  --smart-calendar-footer-height: calc(0.75 * var(--smart-bar-height));
  /* default height for smartCalendar's footer section */
  --smart-calendar-title-height: calc(1.25 * var(--smart-bar-height));
  /* default height for calendar's title. */
  --smart-calendar-cell-size: 30px;
  /* default size of calendar's cell. */
  --smart-calendar-cell-spacing: 4px;
  /* Defines calendar's cell spacing. */
  --smart-calendar-default-width: calc(50px + var(--smart-calendar-cell-spacing) + 7 * (var(--smart-calendar-cell-spacing) + var(--smart-calendar-cell-size)));
  /* smartCalendar default width */
  --smart-calendar-default-height: calc(var(--smart-calendar-cell-spacing) + 7 * (var(--smart-calendar-cell-spacing) + var(--smart-calendar-cell-size)) + var(--smart-calendar-header-height));
  /* smartCalendar default height */
  --smart-calendar-title-text-transform: initial;
  /* Controls the capitalization of the title text. */
  --smart-calendar-week-title-text-transform: uppercase;
  /* Controls the capitalization of the week title. */
  --smart-calendar-header-text-transform: uppercase;
  /* Controls the capitalization of the header text. */
  --smart-calendar-footer-text-transform: uppercase;
  /* Controls the capitalization of the footer text. */
  --smart-calendar-cell-border-top-right-radius: 15px;
  /* Defines cell's top-right border radius. */
  --smart-calendar-cell-border-top-left-radius: 15px;
  /* Defines cell's top-left border radius. */
  --smart-calendar-cell-border-bottom-left-radius: 15px;
  /* Defines cell's bottom-left border radius. */
  --smart-calendar-cell-border-bottom-right-radius: 15px;
  /* Defines cell's bottom-right border radius. */
  --smart-calendar-title-padding: 10px;
  /* Defines title's padding */
  --smart-calendar-important-date-background: var(--smart-ui-state-hover);
  /* Defines title's padding */
  --smart-calendar-important-date-color: var(--smart-ui-state-color-hover);
  /* Defines title's padding */
  --smart-calendar-important-date-border-color: var(--smart-ui-state-border-hover);
  /* Defines title's padding */
  --smart-calendar-navigation-button-size: 30px;
  /* Sets the size for the navigation buttons */
  /* ── Card View ─────────────────────────────────── */
  --smart-card-view-default-width: 1200px;
  /* default width of CardView. */
  --smart-card-view-default-height: 800px;
  /* default height of CardView. */
  --smart-card-view-header-height: 30px;
  /* Height of the CardView header */
  --smart-card-view-cover-height: var(--smart-carousel-default-height);
  /* Height of CardView cover (carousel). */
  --smart-card-view-vertical-offset: 15px;
  /* Vertical offset of CardView. */
  --smart-card-view-column-min-width: 250px;
  /* Min width of CardView visual columns. */
  --smart-card-view-gap: 10px;
  /* Gap between CardView cards. */
  --smart-card-view-add-new-button-size: 60px;
  /* Size of the 'Add new record' (+) button. */
  /* ── Carousel ─────────────────────────────────── */
  --smart-carousel-default-width: 600px;
  /* default width of the element */
  --smart-carousel-default-height: 200px;
  /* default height of the element */
  --smart-carousel-3d-mode-slide-width: 400px;
  /* default width of a slide in 3d mode */
  --smart-carousel-3d-mode-slide-height: 400px;
  /* default height of a slide in 3d mode */
  --smart-carousel-multiple-mode-slide-width: 200px;
  /* default width of a slide in multiple mode*/
  /* ── Chart ─────────────────────────────────── */
  --smart-chart-default-width: 850px;
  /* default width of the element */
  --smart-chart-default-height: 500px;
  /* default height of the element */
  /* ── CheckBox ─────────────────────────────────── */
  --smart-check-box-default-size: calc(1px + 1/2 * var(--smart-editor-height));
  /* default size for the check box used in smartCheckBox and smartListItem. */
  /* ── Color Panel ─────────────────────────────────── */
  --smart-color-panel-default-width: auto;
  /*  default width */
  --smart-color-panel-default-height: auto;
  /*  default height  */
  --smart-color-panel-palette-size: 300px;
  /*  palette size */
  --smart-color-panel-grid-mode-item-size: 20px;
  /*  item size */
  --smart-color-panel-grid-mode-column-count: 8;
  /*  column count */
  --smart-color-panel-grid-mode-columns-gap: 1px;
  /*  column gap size */
  --smart-color-panel-brightness: 0;
  /*  brightness */
  --smart-color-panel-default-mode-sections-gap: 8px;
  /*  gap size in default mode */
  --smart-color-panel-palette-width: var(--smart-color-panel-palette-size);
  /*  palette width */
  --smart-color-panel-palette-height: var(--smart-color-panel-palette-size);
  /*  palette height */
  --smart-color-panel-alpha-channel-color: white;
  /* Used as a default color for the Alpha Scale */
  /* ── Color Picker ─────────────────────────────────── */
  --smart-color-picker-default-width: var(--smart-editor-width);
  /*  default width */
  --smart-color-picker-default-height: var(--smart-editor-height);
  /*  default height */
  --smart-color-picker-drop-down-width: auto;
  /*  default width of dropdown */
  --smart-color-picker-drop-down-height: auto;
  /*  default height of dropdown */
  /* ── ComboBox ─────────────────────────────────── */
  --smart-combo-box-default-width: var(--smart-editor-width);
  /*  default width */
  --smart-combo-box-default-height: var(--smart-editor-height);
  /*  default height */
  --smart-combo-box-drop-down-width: auto;
  /*  default width of dropdown */
  --smart-combo-box-drop-down-height: auto;
  /*  default height of dropdown */
  /* ── Chip ─────────────────────────────────── */
  --smart-chip-default-height: var(--smart-editor-height);
  /* default  height */
  --smart-chip-avatar-background: var(--smart-secondary);
  /*  avatar background color */
  /* ── DataView - Common for CardView and Kanban ─────────────────────────────────── */
  --smart-data-view-padding: 10px;
  /* Padding of the CardView and Kanban */
  --smart-data-view-customize-panel-width: 320px;
  /* Width of the CardView and Kanban customize panel (drop down). */
  --smart-data-view-filter-panel-width: 550px;
  /* Width of the CardView and Kanban filter panel (drop down). */
  --smart-data-view-sort-panel-width: 470px;
  /* Width of the CardView and Kanban sort panel (drop down). */
  --smart-data-view-search-panel-width: 250px;
  /* Width of the CardView and Kanban search panel (drop down). */
  /* ── Datetime Picker ─────────────────────────────────── */
  --smart-date-time-picker-default-width: var(--smart-editor-width);
  /* smartDateTimePicker default width */
  --smart-date-time-picker-default-height: var(--smart-editor-height);
  /* smartDateTimePicker default height */
  --smart-date-time-picker-header-opacity: 0.8;
  /* Opacity of header elements */
  --smart-date-time-picker-header-opacity-active: 1;
  /* Opacity of header elements when selected */
  --smart-date-time-picker-drop-down-width: var(--smart-editor-drop-down-height);
  /* smartDropDownList drop down width */
  --smart-date-time-picker-drop-down-height: auto;
  /* smartDropDownList drop down height */
  /* ── Docking Layout ─────────────────────────────────── */
  --smart-docking-layout-default-width: 1000px;
  /* default width */
  --smart-docking-layout-default-height: 800px;
  /* default height */
  --smart-docking-layout-feedback-background-secondary-size: 7px;
  /* The size of the arrows of the advanced snapping highlighters that show possible drop position of the dragged item. */
  /* ── DropDownList ─────────────────────────────────── */
  --smart-drop-down-list-default-width: var(--smart-editor-width);
  /* smartDropDownList, smartComboBox default width */
  --smart-drop-down-list-default-height: var(--smart-editor-height);
  /* smartDropDownList, smartComboBox default height */
  --smart-drop-down-list-drop-down-width: initial;
  /* smartDropDownList drop down width */
  --smart-drop-down-list-drop-down-height: auto;
  /* smartDropDownList drop down height */
  /* ── DropDownButton ─────────────────────────────────── */
  --smart-drop-down-button-default-width: auto;
  /*  default width */
  --smart-drop-down-button-default-height: var(--smart-editor-height);
  /*  default height */
  --smart-drop-down-button-drop-down-width: var(--smart-editor-drop-down-width);
  /*  dropdown width */
  --smart-drop-down-button-drop-down-height: var(--smart-editor-drop-down-height);
  /*  drop downheight */
  /* ── Editor ─────────────────────────────────── */
  --smart-editor-default-width: 100%;
  /*  default width */
  --smart-editor-default-height: 600px;
  /*  default height */
  --smart-editor-input-min-height: 100px;
  /*  input min height */
  --smart-editor-padding: 15px;
  /*  padding */
  --smart-editor-toolbar-item-margin: 5px;
  /*  toolbar item margin */
  --smart-editor-toolbar-button-width: 30px;
  /*  toolbar button width */
  --smart-editor-toolbar-delimiter-width: 5px;
  /*  toolbar delimiter items width */
  --smart-editor-toolbar-drop-down-width-large: 100px;
  /*  wider drop down toolbar items like - format, fontname, etc. */
  --smart-editor-toolbar-drop-down-width-small: 65px;
  /*  all drop down toolbar items default width */
  --smart-editor-window-header-height: var(--smart-scheduler-window-header-height);
  /*  Dialog Window header height */
  --smart-editor-window-footer-height: var(--smart-scheduler-window-footer-height);
  /*  Dialog Window footer height */
  --smart-editor-inline-toolbar-max-width: 80vw;
  /*  Inline toolbar max width */
  --smart-editor-table-column-width: initial;
  /*  table column default width */
  --smart-editor-table-cell-min-height: 20px;
  /*  table cell defaut min height */
  --smart-editor-table-cell-min-width: var(--smart-editor-table-cell-min-height);
  /*  table cell default min width */
  --smart-editor-char-counter-offset: 30px;
  /*  char count offset from the edges of the element */
  --smart-editor-toolbar-item-height: 30px;
  /*  default toolbar item height */
  --smart-editor-toolbar-item-border-radius: var(--smart-border-radius);
  /*  toolbar item border radius */
  --smart-editor-toolbar-height: calc(var(--smart-editor-toolbar-item-height) + 2 * var(--smart-editor-toolbar-item-margin));
  /*  toolbar height */
  --smart-editor-highlight: var(--smart-primary);
  /*  Find and Replace highlight color */
  --smart-editor-highlight-color: var(--smart-primary-color);
  /*  highligh text color */
  --smart-editor-search-bar-offset: 5px;
  /*  search bar offset */
  --smart-editor-search-bar-padding: 5px;
  /*  search bar padding */
  /* ── Query Builder ─────────────────────────────────── */
  --smart-filter-builder-default-width: var(--smart-box-width);
  /* default width */
  --smart-filter-builder-default-height: var(--smart-box-height);
  /* default height */
  --smart-filter-builder-row-height: var(--smart-editor-height);
  /* default height of the rows*/
  --smart-filter-builder-item-width: var(--smart-editor-width);
  /* default width of the button items*/
  --smart-filter-builder-group-container-border: 4px;
  --smart-filter-builder-item-margin: 20px;
  --smart-filter-builder-group-condition-margin: 5px;
  --smart-filter-builder-group-margin: 15px;
  /* ── Fitler Panel ─────────────────────────────────── */
  --smart-filter-panel-default-width: 300px;
  /* default width  */
  --smart-filter-panel-default-height: auto;
  /* default height */
  --smart-filter-panel-padding: 10px;
  /* padding  */
  --smart-filter-panel-border-top-right-radius: var(--smart-border-radius);
  /*  top-right border radius */
  --smart-filter-panel-border-top-left-radius: var(--smart-border-radius);
  /*  top-left border radius */
  --smart-filter-panel-border-bottom-left-radius: var(--smart-border-radius);
  /*  bottom-left border radius */
  --smart-filter-panel-border-bottom-right-radius: var(--smart-border-radius);
  /*  bottom-right border radius */
  --smart-filter-panel-border-width: var(--smart-border-width);
  /*  border width */
  --smart-filter-panel-border: var(--smart-border);
  /*  border color */
  --smart-filter-panel-background: var(--smart-background);
  /*  background color */
  --smart-filter-panel-color: var(--smart-background-color);
  /*  text color */
  --smart-filter-panel-vertical-offset: 10px;
  /* Vertical offset between  sub-elements */
  --smart-filter-panel-main-element-height: 400px;
  /* height of the smartTree inside the smartFilterPanel */
  /* ── File upload ─────────────────────────────────── */
  --smart-file-upload-default-width: var(--smart-editor-width);
  /* default width */
  --smart-file-upload-browse-button-width: auto;
  /* default width of the browse button*/
  --smart-file-upload-browse-button-height: auto;
  /* default height of the browse button*/
  --smart-file-upload-footer-button-width: auto;
  /* default height of the  footer buttons*/
  --smart-file-upload-footer-button-height: auto;
  /* default height of the footer buttons*/
  --smart-file-upload-text-content-uploading-start: "Connecting ...";
  /* default text content of the pseudo element shown when upload starts. */
  --smart-file-upload-text-content-uploading: "Uploading ...";
  /* default text content of the pseudo element shown during the upload. */
  --smart-file-upload-text-content-error: "Upload error!";
  /* default text content of the pseudo element shown on error. */
  --smart-file-upload-text-content-pause: "Upload paused!";
  /* default text content of the pseudo element shown when upload is paused. */
  --smart-file-upload-text-content-drop-zone: "Drag files here";
  /* default text content of the pseudo element shown where is the drop zone. */
  --smart-file-upload-text-content-drop-zone-over: "Drop here \e824";
  /* default text content of the pseudo element shown when dragged files are over the drop zone. */
  --smart-file-upload-container-min-height: 60px;
  /* Sets minimmum height of the drop zone and file zone containers. */
  --smart-file-upload-total-files-min-height: 20px;
  /* Sets min height of the container where total numbers of items is displayed. */
  --smart-file-upload-drop-zone-height: 100%;
  /* Sets min height of the container where total numbers of items is displayed. */
  /* ── Gantt Chart ─────────────────────────────────── */
  --smart-gantt-chart-resource-splitter-bar-fit-size: calc(var(--smart-gantt-chart-resource-timeline-content-height) + var(--smart-gantt-chart-task-default-height));
  /* The fit size of all Resource Splitter bar inside the Resource Panel of the element*/
  --smart-gantt-chart-task-splitter-bar-fit-size: var(--smart-gantt-chart-task-timeline-content-height);
  /* The fit size of all Splitter bar inside the element*/
  --smart-gantt-chart-task-default-height: 30px;
  /* The height of a Task inside the Timeline */
  --smart-gantt-chart-header-height: var(--smart-gantt-chart-task-default-height);
  /* The height of the header of the Task and Resource Panels */
  --smart-gantt-chart-task-bar-fill-padding: 5px;
  /* The padding of the Fill of the Task Bar */
  --smart-gantt-chart-task-label-padding: 2px var(--smart-gantt-chart-task-bar-fill-padding);
  /* Thumb color */
  --smart-gantt-chart-task-thumb-color: rgba(0, 0, 0, .55);
  /* The color of the thumb */
  --smart-gantt-chart-task-progress-color: rgba(0, 0, 0, .15);
  /* #2d75f5 */
  /* The default color of the progress fill of all Tasks inside the Timeline */
  --smart-gantt-chart-project-color: #ffa558;
  /* The defaut color for all Project tasks */
  --smart-gantt-chart-project-label-color: #333;
  /* Determines the label color of the project tasks inside the Timeline. */
  --smart-gantt-chart-project-label-color-selected: #000;
  /* Determines the label color of the project tasks inside the Timeline when selected. */
  --smart-gantt-chart-project-progress-color: var(--smart-gantt-chart-task-progress-color);
  /* The default color of the progress fill for all Project tasks */
  --smart-gantt-chart-task-color: rgb(43, 195, 190);
  /* The default color of a Task inside the Timeline */
  --smart-gantt-chart-milestone-color: #800080;
  /* The default color for all Milestones */
  --smart-gantt-chart-timeline-task-background-color: transparent;
  /* Determines the background color of the tasks(rows) inside the Timeline. */
  --smart-gantt-chart-timeline-task-connection-feedback-color: #e6510a;
  /* Determines the default color of the feedback that is shows when creating a connection between tasks inside the Timeline. */
  --smart-gantt-chart-timeline-task-connection-feedback-width: 1px;
  /* Determines the default width of the feedback that is shows when creating a connection between tasks inside the Timeline. */
  --smart-gantt-chart-timeline-task-connection-feedback-style: dashed;
  /* Determines the style of the feedback that is shows when creating a connection between tasks inside the Timeline. */
  --smart-gantt-chart-timeline-task-connection-color: var(--smart-gantt-chart-timeline-task-connection-feedback-color);
  /* Determines the color of the connections between Tasks inside the Timeline. */
  --smart-gantt-chart-timeline-task-connection-color-hover: var(--smart-gantt-chart-timeline-task-connection-color);
  /* Determines the color on hover of the connections between Tasks inside the Timeline. */
  --smart-gantt-chart-timeline-task-connection-width: var(--smart-gantt-chart-timeline-task-connection-feedback-width);
  /* Determines the width of the connections between the tasks inside the Timeline. */
  --smart-gantt-chart-timeline-task-connection-style: solid;
  /* Determines the style of the connections between the tasks inside the Timeline. */
  --smart-gantt-chart-timeline-task-connection-arrow-type: solid;
  /* Determines the border type of the arrow of the connections between Tasks inside the Timeline. */
  --smart-gantt-chart-timeline-task-connection-arrow-width: 5px;
  /* Determines the width of the arrow of the connections between Tasks inside the Timeline. */
  --smart-gantt-chart-timeline-task-resize-indicator-width: 4px;
  /* Determines the defualt width of the resize indicator of the Task bars inside the Timeline. */
  --smart-gantt-chart-timeline-task-resize-indicator-color: #fff;
  /* Determines the background-color of the resize indicators of the Task bars insinde the Timeline. */
  --smart-gantt-chart-timeline-task-resize-indicator-border-color: #333;
  /* Determines the border-color of the resize indicator of the Task bars inside the Timeline. */
  --smart-gantt-chart-timeline-task-progress-thumb-size: 10px;
  /* Determines the size of the thumb controlling the progress of a Task inside the Timeline. */
  --smart-gantt-chart-timeline-cell-size: auto;
  /* Determines the default width of the cells inside the Timeline. */
  --smart-gantt-chart-timeline-cell-min-size: 70px;
  /* Determines the default min-width of the cells inside the Timeline. */
  --smart-gantt-chart-timeline-task-min-width: 5px;
  /* Determines the default min-width of the Tasks insinde the Timeline. Not applicable to Milestone tasks. */
  --smart-gantt-chart-timeline-weekend-color: #EFF5FD;
  /* Determines the default background color of the 'weekend' cells insinde the Timeline. */
  --smart-gantt-chart-timeline-nonworking-color: #F5F5F5;
  /* Determines the default background-color of the nonworking days/hours inside the Timeline. */
  --smart-gantt-chart-default-width: auto;
  /* Determines the default width of the element. */
  --smart-gantt-chart-default-height: 600px;
  /* Determines the height of the element. */
  --smart-gantt-chart-task-popup-window-default-width: 60vw;
  /* Determines the width of the task editing popup windows of the element. */
  --smart-gantt-chart-connection-popup-window-default-width: 300px;
  /* Determines the width of the connection editing popup windows of the element. */
  --smart-gantt-chart-confirm-popup-window-default-width: var(--smart-gantt-chart-connection-popup-default-width);
  /* Determines the width of the confirm popup window of the element. */
  --smart-gantt-chart-popup-window-header-height: 40px;
  /* Determines the height of the header of the popup windows inside the element. */
  --smart-gantt-chart-popup-window-footer-height: 50px;
  /* Determines the height of the footer of the popup windows insinde the element. */
  --smart-gantt-chart-header-placeholder: ' - ';
  /* Placeholder for thea Header sections when there're no items */
  --smart-gantt-chart-progress-label-padding: 0 10px 0 10px;
  /* Task progress label padding */
  --smart-gantt-chart-filter-row-height: 30px;
  /* Sets a box shadow to the Task Timeline header */
  --smart-gantt-chart-task-fill-border-radius: 0;
  /* Sets the default border radius for the Timeline task bars */
  --smart-gantt-chart-segment-link-color: var(--smart-gantt-chart-task-color);
  /* Determines the color of the link between the task segments */
  --smart-gantt-chart-segment-link-size: var(--smart-border-width);
  /* Determines the height of the link between the task segments */
  --smart-gantt-chart-date-marker-color: var(--smart-primary);
  /* Determines the color of the date markers */
  --smart-gantt-chart-date-marker-height: 25px;
  /* Determines the background of the date markers */
  --smart-gantt-chart-date-marker-width: var(--smart-border-width);
  /* Determines the width of the date markers */
  --smart-gantt-chart-date-marker-background: var(--smart-primary);
  /* Determines the background of the date markers */
  --smart-gantt-chart-date-marker-color: var(--smart-primary-color);
  /* Determines the background of the date markers */
  --smart-gantt-chart-date-marker-v-offset: 15%;
  /* Determines the vertical position of the date markers */
  --smart-gantt-chart-date-marker-h-offset: 10px;
  /* Determines the horizontal offset of the date markers */
  --smart-gantt-chart-indicator-icon: initial;
  /* Determines the task indicator icon */
  --smart-gantt-chart-deadline-icon: var(--smart-icon-attention-circled);
  /* Determines the icon for the task deadline */
  --smart-gantt-chart-deadline-color: var(--smart-error);
  /* Determines the color for the task deadline icon */
  --smart-gantt-chart-baseline-proportion: 2;
  /* Determines the proportion of the baseline compared to the task height */
  --smart-gantt-chart-baseline-background: rgba(166, 205, 87, .5);
  /* Determines the background color of the task baseline */
  --smart-gantt-chart-progress-label-width: 60px;
  /* Determines the task progress label width */
  --smart-gantt-chart-current-time-indicator-size: 1px;
  /* Determines the current time indicator width */
  --smart-gantt-chart-current-time-indicator-background: var(--smart-primary);
  /* Determines the current time indicator background */
  --smart-gantt-chart-current-time-indicator-arrow-size: 7px;
  /* Determines the arrow size of the curernt time indicator */
  --smart-gantt-chart-current-time-indicator-header-size: 2px;
  /* Determines the current time indicator size inside the timeline header cell */
  --smart-gantt-chart-shader-background: rgba(var(--smart-border-rgb), .5);
  /* Determines the current time shader background color */
  /* Gauge default height*/
  --smart-gauge-default-width: var(--smart-box-width);
  /* smartgauge default height */
  --smart-gauge-default-height: var(--smart-box-height);
  /* Gauge track border */
  --smart-gauge-track-border: var(--smart-border);
  /* Track's background color */
  --smart-gauge-track-background: var(--smart-background);
  /* Needle's background color */
  --smart-gauge-needle-background: var(--smart-primary);
  /* Fill color of labels */
  --smart-gauge-label-fill-state: initial;
  /* Stroke color of labels */
  --smart-gauge-label-stroke: initial;
  /* Alternating Colors for Grid/Table/Scheduler/Pivot */
  --smart-alternation-index0-color: var(--smart-surface-color);
  --smart-alternation-index0-border: var(--smart-surface);
  --smart-alternation-index0-background: var(--smart-surface);
  --smart-alternation-index1-color: #111;
  --smart-alternation-index1-border: #9BBB59;
  --smart-alternation-index1-background: #9BBB59;
  --smart-alternation-index2-color: #fff;
  --smart-alternation-index2-border: #FC3752;
  --smart-alternation-index2-background: #FC3752;
  /* ── Grid ─────────────────────────────────── */
  --smart-grid-default-width: 800px;
  /* default width */
  --smart-grid-default-height: 400px;
  /* default height */
  --smart-grid-footer-height: var(--smart-bar-height);
  /*  footer height. */
  --smart-grid-header-height: var(--smart-bar-height);
  /*  header height. */
  --smart-grid-group-header-height: var(--smart-bar-height);
  /*  group header height. */
  --smart-grid-row-height: 30px;
  /*  rows height. */
  --smart-grid-column-header-height: var(--smart-bar-height);
  /*  columns height. */
  --smart-grid-filter-footer-height: var(--smart-bar-height);
  /*  filter row height. */
  --smart-grid-aggregate-footer-height: var(--smart-bar-height);
  /*  aggregates height. */
  --smart-grid-header-background-freeze: var(--smart-surface);
  /*  row/column header background, when row/column is frozen. */
  --smart-grid-header-color-freeze: var(--smart-surface-color);
  /*  row/column header text color, when row/column is frozen. */
  --smart-grid-column-menu-width: 200px;
  /*  column menu's width. */
  --smart-grid-column-menu-height: auto;
  /*  column menu's height. */
  --smart-grid-column-buttons-width: 23px;
  /*  column buttons width. */
  --smart-grid-cell-color-freeze: var(--smart-surface-color);
  /*  text color of cells, when row/column is frozen. */
  --smart-grid-cell-background-freeze: var(--smart-surface);
  /* frozen background when selected */
  --smart-grid-cell-background-freeze-selected: #DCE5EC;
  /*  background color of cells, when row/column is frozen */
  --smart-grid-cell-color-delete: #333;
  /* text color of cells, when row is deleted. */
  --smart-grid-cell-background-delete: #FFDCDC;
  /* background color of cells, when row is deleted. */
  --smart-grid-cell-color-update: #333;
  /* text color of cells, when cell is updated.. */
  --smart-grid-cell-background-update: #D7F9C7;
  /* background for update state of cell*/
  --smart-grid-cell-background-color: #D7F9C7;
  /* background color of cells, when cell is updated.. */
  --smart-grid-cell-color-add: #333;
  /* text color of cells, when row is added.. */
  --smart-grid-cell-background-add: #FED59B;
  /* background color of cells, when row is deleted.. */
  --smart-grid-cell-color-unbound: var(--smart-surface-color);
  /* text color of cells, when row is unbound. */
  --smart-grid-cell-background-unbound: var(--smart-surface);
  /* background color of cells, when row is unbound. */
  --smart-grid-cell-color-sort: var(--smart-surface-color);
  /* text color of cells, when column is sorted. */
  --smart-grid-cell-background-sort: #FEF3dd;
  /* background color of cells, when column is sorted. */
  --smart-grid-cell-color-filter: var(--smart-surface-color);
  /* text color of cells, when column is filtered. */
  --smart-grid-cell-background-filter: #E8F2DB;
  /* the view bar background colors */
  --smart-grid-view-bar-background: #FCFCFC;
  /* background color of cells, when column is filtered. */
  --smart-grid-group-row-vertical-offset: 5;
  /* grouped rows vertical offset. */
  --smart-grid-group-row-horizontal-offset: 1;
  /* grouped rows horizontal offset. */
  --smart-grid-template-columns: none;
  /* Template columns. */
  --smart-grid-column-gap: 0px;
  /* the element's grid-column-gap (related to CSS Grid) */
  --smart-grid-row-gap: 0px;
  /* the element's grid-row-gap (related to CSS Grid) */
  --smart-grid-freeze-splitter-size: 1px;
  /* frozen split bar size. */
  --smart-grid-resize-line-size: 1px;
  /* resize line size. */
  /* ── Grid Layout ─────────────────────────────────── */
  --smart-grid-layout-col-gap: 10px;
  --smart-grid-layout-row-gap: 10px;
  --smart-grid-layout-width: 100%;
  --smart-grid-layout-rows: none;
  /* ── Group Panel, Sort Panel, Column Panel, Multi Column Filter Panel, Formatting Panel ─────────────────────────────────── */
  --smart-grid-panel-default-width: 450px;
  /* default width of the smartGroupPanel/smartSortPanel/smartColumnPanel/smartMultiColumnFilterPanel */
  --smart-grid-panel-default-height: auto;
  /* default height of the smartGroupPanel/smartSortPanel/smartColumnPanel/smartMultiColumnFilterPanel */
  --smart-grid-panel-padding: 10px;
  /* padding of the smartGroupPanel/smartSortPanel/smartColumnPanel/smartMultiColumnFilterPanel */
  --smart-grid-panel-vertical-offset: 10px;
  /* Vertical offset between smartGroupPanel/smartSortPanel/smartColumnPanel/smartMultiColumnFilterPanel items */
  --smart-grid-panel-item-height: 30px;
  /* height of smartGroupPanel/smartSortPanel/smartColumnPanel/smartMultiColumnFilterPanel items */
  --smart-column-panel-drop-down-height: 350px;
  /* height of drop-downs */
  --smart-multi-column-filter-panel-template-columns: 15px 60px 2fr 3fr 3fr;
  /* smartMultiColumnFilterPanel grid-template-columns */
  --smart-formatting-panel-default-width: 600px;
  /* default width of the smartFormattingPanel */
  --smart-formatting-panel-row-height: 30px;
  /* Height of rows in smartFormattingPanel */
  --smart-formatting-panel-add-new-button-size: 40px;
  /* Size of "Add new" (+) button in smartFormattingPanel */
  --smart-formatting-panel-popup-width: 300px;
  /* Width of smartFormattingPanel's pop-up */
  --smart-formatting-panel-color-box-height: 20px;
  /* Height of color boxes in smartFormattingPanel's pop-up */
  /* ── Kanban ─────────────────────────────────── */
  --smart-kanban-default-width: 1200px;
  /* default width  */
  --smart-kanban-default-height: 500px;
  /* default height  */
  --smart-kanban-header-size: 35px;
  /* Header size  (applies to header and column headers) */
  --smart-kanban-task-min-width: 150px;
  /* Min width for tasks in columns with horizontal orientation */
  --smart-kanban-task-min-height: 80px;
  /* task min height */
  --smart-kanban-text-max-height: 200px;
  /* task text part max height */
  --smart-kanban-user-icon-size: 30px;
  /* user icon size */
  --smart-kanban-user-list-width: 150px;
  /* user list width */
  --smart-kanban-user-list-max-height: 500px;
  /* user list max height */
  --smart-kanban-comments-list-width: 350px;
  /* comments list width */
  --smart-kanban-comments-list-height: auto;
  /* comments list height */
  --smart-kanban-new-comment-height: 50px;
  /* Height of new comment section */
  --smart-kanban-new-comment-height-expanded: 175px;
  /* Expanded height of new comment section */
  --smart-kanban-send-button-height: 30px;
  /* Height of Send button in new comment section */
  --smart-kanban-color-band-width: 3px;
  /* Kanban color band width (i.e. left border of tasks) */
  --smart-kanban-add-new-column-width: 1fr;
  /* Kanban "+ New status" column width */
  /* ── ListBox ─────────────────────────────────── */
  --smart-list-box-default-width: var(--smart-editor-width);
  /* default width */
  --smart-list-box-default-height: var(--smart-editor-width);
  /* default height */
  --smart-list-item-group-header-text-transform: uppercase;
  /* item group header text transform */
  --smart-list-item-horizontal-offset: 3px;
  /* Defines list item's horizontal offset. */
  --smart-list-item-vertical-offset: 3px;
  /* Defines list item's vertical offset. */
  --smart-list-item-height: 36px;
  /* smartListBox item height */
  --smart-list-item-label-padding: 0;
  /* smartListBox item label padding */
  --smart-list-item-label-border-radius: 0;
  /* smartListBox item label border radius */
  --smart-list-item-padding: 9px 12px;
  /* smartListBox item padding */
  --smart-loader-size: var(--smart-editor-height);
  /* smartListBox loader size(width=height) */
  /* ── LED ─────────────────────────────────── */
  --smart-led-default-width: var(--smart-editor-height);
  /* default width */
  --smart-led-default-height: var(--smart-editor-height);
  /* default height */
  /* ── ListMenu ─────────────────────────────────── */
  --smart-list-menu-default-width: var(--smart-box-width);
  /* default width */
  --smart-list-menu-default-height: var(--smart-box-height);
  /* default height */
  --smart-list-menu-filter-input-vertical-offset: 5px;
  /* Defines vertical offset of the ListMenu's filter input. */
  --smart-list-menu-filter-input-horizontal-offset: 5px;
  /* Defines horizontal offset of the ListMenu's filter input. */
  /* ── Masked Text Box ─────────────────────────────────── */
  --smart-masked-text-box-default-width: var(--smart-editor-width);
  /* default width */
  --smart-masked-text-box-default-height: var(--smart-editor-height);
  /* default height */
  /* ── Menu ─────────────────────────────────── */
  --smart-menu-default-width: var(--smart-bar-width);
  /* default width */
  --smart-menu-default-height: var(--smart-bar-height);
  /* default height */
  --smart-menu-vertical-default-width: calc(var(--smart-bar-width) / 2);
  /* vertical and context Menu default width */
  --smart-menu-vertical-default-height: var(--smart-bar-width);
  /* vertical and context Menu default height */
  --smart-menu-scroll-button-size: calc(var(--smart-bar-height) / 1.5);
  /* smartMenu scroll buttons size. Horizontal Menu scroll buttons width = Vertical Menu scroll buttons height. */
  /* ── MultiLine TextBox ─────────────────────────────────── */
  --smart-multiline-text-box-default-width: var(--smart-editor-width);
  /* default width of the element. */
  --smart-multiline-text-box-default-height: calc(10 * var(--smart-editor-height));
  /* default height of the element. */
  /* Multi Split Button*/
  --smart-multi-split-button-default-width: var(--smart-editor-width);
  /* default width. */
  --smart-multi-split-button-default-height: var(--smart-editor-height);
  /* default height. */
  /* ── Numeric TextBox ─────────────────────────────────── */
  --smart-numeric-text-box-default-width: var(--smart-editor-width);
  /* default width */
  --smart-numeric-text-box-default-height: var(--smart-editor-height);
  /* default height */
  --smart-numeric-text-box-default-radix-display-width: 12%;
  /* default radix display button width*/
  --smart-numeric-text-box-default-unit-display-width: var(--smart-editor-addon-width);
  /* default unit display width*/
  --smart-numeric-text-box-text-align: right;
  /* input text align */
  /* ── Path  ─────────────────────────────────── */
  --smart-path-default-width: var(--smart-editor-width);
  /* smartPath default width */
  --smart-path-default-height: var(--smart-editor-height);
  /* smartPath default height */
  --smart-path-drop-down-width: auto;
  /* smartPath drop down width */
  --smart-path-drop-down-height: auto;
  /* smartPath drop down height */
  --smart-path-button-gap: 5px;
  /* smartPath button gap */
  --smart-path-text-align: start;
  /* smartPath text align */
  /* ── Power Button  ─────────────────────────────────── */
  --smart-power-button-default-width: var(--smart-editor-height);
  /*  default width */
  --smart-power-button-default-height: var(--smart-editor-height);
  /* default height */
  /* ── Progress Bar  ─────────────────────────────────── */
  --smart-progress-bar-default-width: var(--smart-editor-width);
  /* default width */
  --smart-progress-bar-default-height: var(--smart-editor-height);
  /* default height */
  --smart-circular-progress-bar-default-size: var(--smart-editor-width);
  /* smartCircularProgressBar default size (width = height) */
  --smart-circular-progress-bar-fill-size: 20%;
  /* smartCircularProgressBar ui-state size. The width of the ui-state. The middle container's width is calculated defaultd on this value. */
  /* ── Query Builder  ─────────────────────────────────── */
  --smart-query-builder-default-width: auto;
  /* default width of QueryBuilder. */
  --smart-query-builder-default-height: auto;
  /* default height of QueryBuilder. */
  --smart-query-builder-min-width: 100px;
  /* Minimum width of QueryBuilder. */
  --smart-query-builder-content-padding: 5px;
  /* Padding of QueryBuilder. */
  --smart-query-builder-editor-width: 125px;
  /* Width of editors in QueryBuilder. */
  /* ── Radio Button  ─────────────────────────────────── */
  --smart-radio-button-default-size: calc(1px + 1/2 * var(--smart-editor-height));
  /* default size for the radio button. */
  /* ── Ribbon  ─────────────────────────────────── */
  --smart-ribbon-tab-height: 125px;
  /* smartRibbon tab height */
  --smart-ribbon-collapsed-tab-height: 50px;
  /* smartRibbon collapsed tab height */
  --smart-ribbon-border-color: var(--smart-border);
  /* smartRibbon border color */
  --smart-ribbon-tab-header-width: 100px;
  /* smartRibbon tab header width */
  --smart-ribbon-tab-padding: 0px;
  /* smartRibbon tab padding */
  --smart-ribbon-group-items-padding: 0 10px;
  /* smartRibbon group items padding */
  --smart-ribbon-tab-header-height: 32px;
  /* smartRibbon tab header height */
  --smart-ribbon-header-padding: 0px;
  /* smartRibbon header padding */
  /* ── Sortable  ─────────────────────────────────── */
  --smart-sortable-handle-size: 25px;
  /* smartSortable handle size */
  /* ── Splitter  ─────────────────────────────────── */
  --smart-splitter-default-width: var(--smart-box-width);
  /* default width */
  --smart-splitter-default-height: var(--smart-box-height);
  /* default height */
  --smart-splitter-bar-size: 10px;
  /* The width of the scrollbar when vertical and the height of the scrollbar when horizontal*/
  --smart-splitter-bar-fit-size: 100%;
  /* The size of the splitter according to the orientation of the Splitter. By 'default' a SplitterBar fits the size of the Splitter. */
  --smart-splitter-item-padding: 0;
  /* Splitter item padding */
  --smart-splitter-item-content-padding: 0;
  /* Splitter item content padding */
  --smart-splitter-item-size: auto;
  /* The default size of the Splitter Items */
  /* ── Switch Button  ─────────────────────────────────── */
  --smart-switch-button-default-width: calc(var(--smart-editor-height) + 10px);
  /* default width of the SwitchButton. */
  --smart-switch-button-default-height: var(--smart-editor-height);
  /* smartSwitchButton default height */
  --smart-switch-button-thumb-size: calc(var(--smart-switch-button-default-height) - 8px);
  /* smartSwitchButton thumb size */
  /* ── Slider  ─────────────────────────────────── */
  --smart-slider-default-width: var(--smart-editor-width);
  /* default width */
  --smart-slider-default-height: 35px;
  /* default height*/
  --smart-slider-track-size: 1px;
  /* track size. Horizontal track height = Vertical track width */
  --smart-slider-thumb-width: 20px;
  /* thumb width*/
  --smart-slider-thumb-height: 20px;
  /* thumb height*/
  --smart-slider-tooltip-width: 60px;
  /* tooltip width */
  --smart-slider-tooltip-height: 30px;
  /* tooltip height*/
  --smart-slider-spin-button-width: 30px;
  /* spin buttons width*/
  --smart-slider-spin-button-height: 30px;
  /* spin buttons height*/
  --smart-slider-tick-size: 10px;
  /* tick size. Horizontal Slider tick height = Vertical Slider tick width.*/
  --smart-slider-minor-tick-size: 5px;
  /* minor tick size. Horizontal Slider minor tick height = Vertical Slider minor tick width.*/
  --smart-slider-thumb-border-top-right-radius: 15px;
  /* Top-right border radius of smartSlider thumb */
  --smart-slider-thumb-border-top-left-radius: 15px;
  /* Top-left border radius of smartSlider thumb */
  --smart-slider-thumb-border-bottom-left-radius: 15px;
  /* Bottom-left border radius of smartSlider thumb */
  --smart-slider-thumb-border-bottom-right-radius: 15px;
  /* Bottom-right border radius of smartSlider thumb */
  /* ── Scrollbar  ─────────────────────────────────── */
  --smart-scroll-button-size: 16px;
  /* smartScrollBar buttons size. Horizontal ScrollBar button width = Vertical ScrollBar button height. ScrollBar track is calculated defaultd on this value. */
  --smart-scroll-bar-size: 18px;
  /* default scrollbar size */
  --smart-scroll-bar-default-width: var(--smart-editor-width);
  /* ScrollBar's default width. */
  --smart-scroll-bar-default-height: var(--smart-scroll-bar-size);
  /* ScrollBar's default height. */
  --smart-scroll-bar-background: #f8fafb;
  /* default ScrollBar's background color. */
  --smart-scroll-bar-track-background: var(--smart-scroll-bar-background);
  --smart-scroll-bar-border: #f8fafb;
  /* The border color of the ScrollBar */
  --smart-scroll-bar-thumb-border-top-right-radius: 0px;
  /* default ScrollBar's top-right border radius. */
  --smart-scroll-bar-thumb-border-top-left-radius: 0px;
  /* default ScrollBar's top-left border radius. */
  --smart-scroll-bar-thumb-border-bottom-left-radius: 0px;
  /* default ScrollBar's bottom-left border radius. */
  --smart-scroll-bar-thumb-border-bottom-right-radius: 0px;
  /* default ScrollBar's bottom-right border radius. */
  --smart-scroll-bar-thumb-background: #D5D8DB;
  /* The color of the ScrollBar's thumb. */
  --smart-scroll-bar-thumb-border: transparent;
  /* The color of the ScrollBar's thumb border. */
  --smart-scroll-bar-thumb-size: 100%;
  /* The size of the ScrollBar's thumb. */
  --smart-scroll-bar-thumb-padding: 1px;
  /* The padding of the ScrollBar's thumb. */
  --smart-scroll-bar-thumb-background-hover: #d7dbe0;
  /* The background color of the ScrollBar's thumb in hover state. */
  --smart-scroll-bar-thumb-border-hover: transparent;
  /* The border color of the ScrollBar's thumb in hover state. */
  --smart-scroll-bar-thumb-background-active: #c6cbd2;
  /* The background color of the ScrollBar's thumb in active state. */
  --smart-scroll-bar-thumb-border-active: transparent;
  /* The border color of the ScrollBar's thumb in active state. */
  --smart-scroll-bar-button-background: #f8fafb;
  /* The background color of ScrollBar's navigation buttons. */
  --smart-scroll-bar-button-border: #f8fafb;
  /* The border color of ScrollBar's navigation buttons. */
  --smart-scroll-bar-button-color: #505050;
  /* The color of ScrollBar's navigation buttons. */
  --smart-scroll-bar-button-background-hover: #d7dbe0;
  /* The background color of the hovered ScrollBar's buttons. */
  --smart-scroll-bar-button-border-hover: #f8fafb;
  /* The border color of the hovered ScrollBar's buttons. */
  --smart-scroll-bar-button-color-hover: #505050;
  /* The color of the hovered ScrollBar's buttons. */
  --smart-scroll-bar-button-background-active: #c6cbd2;
  /* The background color of the ScrollBar's buttons in active state. */
  --smart-scroll-bar-button-border-active: #f8fafb;
  /* The border color of the ScrollBar's buttons in active state. */
  --smart-scroll-bar-button-color-active: #505050;
  /* The color of the ScrollBar's buttons in active state. */
  /* ── Table & PivotTable  ─────────────────────────────────── */
  --smart-table-default-width: 100%;
  /* default width */
  --smart-table-default-height: auto;
  /* default height */
  --smart-table-header-footer-height: 56px;
  /* height of header and footer */
  --smart-table-column-header-height: var(--smart-table-header-footer-height);
  /* height of column header */
  --smart-table-row-height: 48px;
  /* height of rows */
  --smart-table-cell-padding: 12px;
  /* cell padding */
  --smart-table-row-detail-height: var(--smart-table-row-height);
  /* row detail height */
  --smart-table-indent: 30px;
  /* hierarchical cell indent */
  --smart-table-arrow-size: 16px;
  /* arrow size */
  --smart-table-arrow-margin: 5px;
  /*  arrow margin */
  --smart-table-group-name-display: unset;
  /* group header name display */
  --smart-table-group-count-display: unset;
  /* group header leaf count display */
  --smart-pivot-table-cell-width: 200px;
  /* cell width */
  --smart-pivot-table-secondary-group-width: calc(1.25 * var(--smart-pivot-table-cell-width));
  /* row group width */
  --smart-pivot-panel-width: 300px;
  /* designer (smartPivotPanel) width */
  --smart-pivot-panel-default-height: 800px;
  /* Standalone smartPivotPanel default height */
  --smart-pivot-panel-tab-item-height: 150px;
  /* designer (smartPivotPanel) tab item height */
  --smart-pivot-panel-padding: 10px;
  /* designer (smartPivotPanel) padding */
  /* ── Tank  ─────────────────────────────────── */
  --smart-tank-default-width: var(--smart-editor-width);
  /* default width */
  --smart-tank-default-height: calc(10 * var(--smart-editor-height));
  /* default height*/
  --smart-tank-scale-size: 105px;
  /* scale size*/
  --smart-tank-thumb-width: 25px;
  /* thumb width*/
  --smart-tank-thumb-height: var(--smart-tank-thumb-width);
  /* thumb height*/
  --smart-tank-tooltip-width: 80px;
  /* tooltip width*/
  --smart-tank-tooltip-height: 30px;
  /* thumb height*/
  --smart-tank-tick-size: 10px;
  /* tick size. Horizontal Tank tick height = Vertical Tank tick width. */
  --smart-tank-minor-tick-size: 5px;
  /* minor tick size. */
  --smart-tank-minimum-track-size: 6px;
  /* horizontal track min-height, vertical track min-width */
  /* ── Tabs  ─────────────────────────────────── */
  --smart-tabs-header-button-size: 20px;
  /* header buttons size. Horizontal Tabs header buttons width = Vertical Tab header buttons height. */
  --smart-tabs-animation-duration: 0.5s;
  /* animation duration */
  --smart-tabs-default-width: var(--smart-box-width);
  /* default width */
  --smart-tabs-default-height: var(--smart-box-height);
  /* default height */
  --smart-tabs-header-padding: 0px;
  /* Defines Tabs header padding. */
  --smart-tabs-header-offset: 0px;
  /* Defines Tabs header offset. */
  --smart-tab-item-padding: 12px 16px;
  /* Defines vertical and horizontal padding of tab items. */
  --smart-tab-item-offset: 5px;
  /* default tab item offset. */
  --smart-tab-item-initial-offset: 5px;
  /* Initial tab item offset. */
  --smart-tab-item-text-transform: uppercase;
  /* Tab item text capitalization. */
  /* ── Time Picker  ─────────────────────────────────── */
  --smart-time-picker-default-width: var(--smart-editor-width);
  /* smartTimePicker default width */
  --smart-time-picker-default-height: calc(12 * var(--smart-editor-height));
  /* smartTimePicker default height */
  /* ── Tooltip  ─────────────────────────────────── */
  --smart-tooltip-arrow-width: 6px;
  /* default smartTooltip arrow width */
  --smart-tooltip-arrow-color: var(--smart-secondary);
  /* smartTooltip arrow color */
  --smart-tooltip-arrow-translate: 0;
  /* smartTooltip arrow translation (transformation) */
  --smart-tooltip-padding: 4px 8px;
  /* smartTooltip padding */
  --smart-tooltip-content-shadow: none;
  /* smartTooltip content box-shadow */
  /* ── Toast  ─────────────────────────────────── */
  --smart-toast-item-icon: '';
  /* Code of toast item icon */
  --smart-toast-container-default-width: var(--smart-bar-width);
  /* default width of the smartToast's containers, positioned top-left, top-right, bottom-left, bottom-right */
  --smart-toast-header-height: 20px;
  /* smartToast header height */
  --smart-toast-info-background: var(--smart-info);
  /* Background color for type info */
  --smart-toast-info-color: var(--smart-info-color);
  /* Text color for type info */
  --smart-toast-warning-background: var(--smart-warning);
  /* Background color for type warning */
  --smart-toast-warning-color: var(--smart-warning-color);
  /* Text color for type warning */
  --smart-toast-error-background: var(--smart-error);
  /* Background color for type error */
  --smart-toast-error-color: var(--smart-error-color);
  /* Text color for type error */
  --smart-toast-success-background: var(--smart-success);
  /* Background color for type success */
  --smart-toast-success-color: var(--smart-success-color);
  /* Text color for type success */
  /* ── Tree  ─────────────────────────────────── */
  --smart-tree-default-width: var(--smart-box-width);
  /* default width */
  --smart-tree-default-height: var(--smart-box-height);
  /* default height */
  --smart-tree-scroll-button-size: 20px;
  /* smartTree scroll buttons size */
  --smart-tree-lines-style: dashed;
  /* default style of the connecting tree lines. */
  --smart-tree-indent: 16px;
  /* Defines the indent(hierarchy offset) size of the tree items. */
  --smart-tree-lines-color: var(--smart-border);
  /* Defines the color of the connecting lines. */
  --smart-tree-lines-width: 1px;
  /* Defines the width of the connecting lines. */
  --smart-tree-item-label-height: 36px;
  /* Defines the height of tree item labels. */
  --smart-tree-item-padding: 7px 10px;
  /* Defines the padding of the tree items. */
  --smart-tree-item-vertical-offset: 3px;
  /* Defines the vertical offset of the tree items. */
  --smart-tree-item-horizontal-offset: 3px;
  /* Defines the horizontal offset of the tree items. */
  /* ── TextBox  ─────────────────────────────────── */
  --smart-text-box-default-width: var(--smart-editor-width);
  /* Text Box default width. */
  --smart-text-box-default-height: var(--smart-editor-height);
  /* Text Box default height. */
  /* ── Validation Panel  ─────────────────────────────────── */
  --smart-validation-panel-description-width: 20%;
  --smart-validation-panel-content-width: 80%;
  /* Validation panel - appearance */
  --smart-validation-panel-appearance-vertical-offset: 10px;
  --smart-validation-panel-appearance-reset-button-left-offset: 5px;
  --smart-validation-panel-appearance-textbox-vertical-offset: 5px;
  --smart-validation-panel-appearance-reset-button-color: var(--smart-primary);
  /* Validation panel - Criteria container */
  --smart-validation-panel-criteria-row-margin-top: 10px;
  --smart-validation-panel-criteria-container-vertical-offset: 10px;
  --smart-validation-panel-criteria-container-input-width: 180px;
  --smart-validation-panel-criteria-container-input-horizontal-offset: 2px;
  --smart-validation-panel-criteria-container-textbox-width: 80px;
  --smart-validation-panel-criteria-container-textbox-horizontal-offset: 2px;
  --smart-validation-panel-criteria-container-text-between-inputs-offset: 5px;
  /* Validation panel - Invalid data */
  --smart-validation-panel-invalid-data-vertical-offset: 10px;
  /* Validation panel - Footer */
  --smart-validation-panel-footer-button-color: #188038;
  --smart-validation-panel-footer-button-background: white;
  --smart-validation-panel-footer-vertical-offset: 20px;
  --smart-validation-panel-footer-button-horizontal-offset: 5px;
  --smart-validation-panel-footer-remove-validation-button-color: var(--smart-validation-panel-footer-button-color);
  --smart-validation-panel-footer-cancel-button-color: var(--smart-validation-panel-footer-button-color);
  --smart-validation-panel-footer-save-button-color: var(--smart-validation-panel-footer-button-background);
  --smart-validation-panel-footer-save-button-background: var(--smart-validation-panel-footer-button-color);
  /* ── PasswordTextBox  ─────────────────────────────────── */
  --smart-password-text-box-default-width: var(--smart-editor-width);
  /* default width */
  --smart-password-text-box-default-height: var(--smart-editor-height);
  /* default height */
  /* ── Pager  ─────────────────────────────────── */
  --smart-pager-default-width: var(--smart-bar-width);
  /* default pager width */
  --smart-pager-default-height: var(--smart-bar-height);
  /* default pager height */
  --smart-pager-button-width: 'auto';
  /* default pager button width */
  --smart-pager-button-height: 32px;
  /* default pager button height */
  --smart-pager-page-size-selector-width: 60px;
  /* default page size selector width. */
  --smart-pager-page-index-selector-width: 32px;
  /* default pager item width */
  --smart-pager-page-index-selector-height: 32px;
  /* default pager item height */
  --smart-pager-page-index-ellipsis-selector-width: 32px;
  /* default pager ellipsis width */
  --smart-pager-page-index-ellipsis-selector-height: 32px;
  /* default pager ellipsis width */
  --smart-pager-page-index-selector-horizontal-offset: 8px;
  /* default pager ellipsis width */
  --smart-pager-padding: 2px;
  /* default padding. */
  --smart-pager-input-width: 50px;
  /* default width of the pager input. */
  /* ── ScrollViewer  ─────────────────────────────────── */
  --smart-scroll-viewer-min-width: none;
  --smart-scroll-viewer-max-width: none;
  --smart-scroll-viewer-min-height: none;
  --smart-scroll-viewer-max-height: none;
  /* ── Scheduler  ─────────────────────────────────── */
  --smart-scheduler-default-height: auto;
  /* default height of the smartScheduler */
  --smart-scheduler-default-width: auto;
  /* default width of the smartScheduler */
  --smart-scheduler-item-size: auto;
  /* default size of the view selection items insinde the Timeline Header */
  --smart-scheduler-timeline-cell-width: auto;
  /* default width of the cells inside the Timeline  */
  --smart-scheduler-timeline-cell-height: 50px;
  /* default height of the cells inside the Timeline  */
  --smart-scheduler-timeline-cell-min-width: 70px;
  /*  default min-width of the cells inside the Timeline */
  --smart-scheduler-timeline-cell-min-height: 35px;
  /* min-height of the cells inside the Timeline */
  --smart-scheduler-header-height: 50px;
  /*   height of the header */
  --smart-scheduler-header-today-button-size: auto;
  /* header Today Button width */
  --smart-scheduler-header-date-button-max-size: auto;
  /*  size of the Header Date Selection Button*/
  --smart-scheduler-header-navigation-button-size: 30px;
  /*  size of the header buttons */
  --smart-scheduler-footer-height: var(--smart-scheduler-header-height);
  /* The height of the footer */
  --smart-scheduler-header-box-shadow: initial;
  /* Sets a Box shadow to the Timeline header */
  --smart-scheduler-header-padding: 10px;
  /* Sets a the padding for the header/footer */
  --smart-scheduler-timeline-header-cell-padding: 5px;
  /* Sets a the padding for the header/footer cells */
  --smart-scheduler-header-menu-button-size: auto;
  /* Sets the size for the Header menu button */
  --smart-scheduler-timeline-weekend-color: var(--smart-background);
  /* Sets the background color for the weekend cells */
  --smart-scheduler-timeline-nonworking-color: var(--smart-gantt-chart-timeline-nonworking-color);
  /* Sets the background color for nonworking days/hours cells */
  --smart-scheduler-timeline-all-day-label-font-weight: 600;
  /* Sets a the font-weight of the All day label */
  --smart-scheduler-timeline-header-horizontal-cells-size: 40px;
  /* Sets a the horizontal header cells size */
  --smart-scheduler-timeline-header-horizontal-label-padding: initial;
  /* Sets a the horizontal header cells label padding */
  --smart-scheduler-timeline-header-horizontal-details-size: var(--smart-scheduler-timeline-header-horizontal-cells-size);
  /* Sets the size of the Horizontal Details Header */
  --smart-scheduler-timeline-header-horizontal-group-size: var(--smart-scheduler-timeline-header-horizontal-cells-size);
  /* Sets the size of the Horizontal Group Header */
  --smart-scheduler-timeline-header-vertical-cells-size: 100px;
  /* Sets the vertical header cell size */
  --smart-scheduler-timeline-header-vertical-label-padding: initial;
  /* Sets the vertical header cells padding */
  --smart-scheduler-timeline-header-vertical-details-size: var(--smart-scheduler-timeline-header-vertical-cells-size);
  /* Sets the size of the Vertical Details Header */
  --smart-scheduler-timeline-header-vertical-group-size: var(--smart-scheduler-timeline-header-vertical-cells-size);
  /* Sets the size of the Vertical Group Header  */
  --smart-scheduler-timeline-header-all-day-cells-size: 75px;
  /* Sets the All Day View height */
  --smart-scheduler-timeline-group-separator-background: var(--smart-outline);
  /* Sets the color for the group separator */
  --smart-scheduler-timeline-group-separator-size: var(--smart-border-width);
  /* Sets the group cell separator size */
  --smart-scheduler-timeline-group-white-space: nowrap;
  /* Sets the white-space property for the Header Group cells */
  --smart-scheduler-timeline-group-header-offset: calc(-50% - var(--smart-scheduler-timeline-header-cell-padding));
  /* Sets the label offset for the header cells when groupByDate is enabled */
  --smart-scheduler-current-time-indicator-background: var(--smart-primary);
  /* Current Time Indicator background-color*/
  --smart-scheduler-current-time-indicator-size: 1px;
  /* Current Time Indicator size(width/height depending on the view orientation) */
  --smart-scheduler-current-time-indicator-header-size: 2px;
  /* Current Time Indicator size(width/height) inside the Headers */
  --smart-scheduler-current-time-indicator-arrow-size: 7px;
  /* Current Time Indicator arrow size */
  --smart-scheduler-shader-background: rgba(var(--smart-border-rgb), .5);
  /* Shade Until Current Time background */
  --smart-scheduler-view-background: transparent;
  --smart-scheduler-view-line-size: var(--smart-border-width);
  /* Timeline lines size */
  --smart-scheduler-view-horizontal-line-color: var(--smart-border);
  /* Horizontal timeline line color */
  --smart-scheduler-view-vertical-line-color: var(--smart-border);
  /* Vertical timeline line color */
  --smart-scheduler-day-week-view-vertical-line-size: var(--smart-scheduler-view-line-size);
  /* Vertical line size in 'day' and 'week' views */
  --smart-scheduler-day-week-view-vertical-line-color: var(--smart-border);
  /* Vertical timeline color in 'day' and 'week' views */
  --smart-scheduler-day-week-view-hour-size: var(--smart-scheduler-view-line-size);
  /* Horizontal line size for 'day', 'week'. Only the hour lines (excluding minutes) */
  --smart-scheduler-day-week-view-hour-color: var(--smart-border);
  /* Horizontal line color for 'day', 'week' views. Only the hour lines ( excluding the minutes) */
  --smart-scheduler-time-ruler-tick-size: 10px;
  /* Time ruler tick size. Applicable only to day/week views */
  --smart-scheduler-event-background-rgb: 52, 121, 186;
  /* Event background RGB */
  --smart-scheduler-event-background: rgba(var(--smart-scheduler-event-background-rgb), 1);
  /* Event background color */
  --smart-scheduler-legend-item-background: var(--smart-scheduler-event-background);
  /* The default background color for the legen items */
  --smart-scheduler-event-color: var(--smart-primary-color);
  /* Event color */
  --smart-scheduler-event-focus: rgba(var(--smart-scheduler-event-background-rgb), .9);
  /* Event focus background color */
  --smart-scheduler-event-color-focus: var(--smart-scheduler-event-color);
  /* Event focus color */
  --smart-scheduler-event-hover: rgba(var(--smart-scheduler-event-background-rgb), .8);
  /* Event hover background color */
  --smart-scheduler-event-color-hover: var(--smart-scheduler-event-color);
  /* Event hover color */
  --smart-scheduler-event-padding-agenda: 5px;
  /* Event padding in 'agenda' view only */
  --smart-scheduler-event-padding-basic: 2px;
  /* Event padding in all basic views */
  --smart-scheduler-event-padding-timeline: 2px;
  /* Event padding in all timeline views */
  --smart-scheduler-event-padding-all-day: 2px;
  /* Event padding for events inside AllDay container */
  --smart-scheduler-event-content-padding: 5px;
  /* Event content padding */
  --smart-scheduler-event-label-font-size: var(--smart-font-size);
  /* Event label font size */
  --smart-scheduler-event-time-font-size: calc(var(--smart-font-size) - 3px);
  /* Event time label font size */
  --smart-scheduler-event-time-font-size-agenda: var(--smart-font-size);
  /* Event time font size for 'agenda' view */
  --smart-scheduler-event-time-font-weight-agenda: 600;
  /* Event time label font weight for 'agenda' view */
  --smart-scheduler-event-time-opacity-agenda: 1;
  /* Event time label opacity for 'agenda' view */
  --smart-scheduler-event-time-opacity: 0.7;
  /* Event time label opacity */
  --smart-scheduler-event-icon-size: 30px;
  /* Event icon (repeating, exception icon) size */
  --smart-scheduler-event-size: 30px;
  /* Sets the size of the timeline events in all views. Main variable. Used this variable to change the size of the events. Used by the Scheduler internally !*/
  --smart-scheduler-event-size-basic: var(--smart-scheduler-event-size);
  /* Sets the size of the events only in Basic views */
  --smart-scheduler-event-size-timeline: 60px;
  /* Sests the size of the events only in Timeline views. Should only be in pixels. Do not use calc()! */
  --smart-scheduler-event-collector-size: 24px;
  /* Event collector size */
  --smart-scheduler-event-collector-mobile-size: 28px;
  /* Event collector size on mobile */
  --smart-scheduler-event-collector-background: rgba(var(--smart-primary-rgb), 1);
  /* Event collector background color */
  --smart-scheduler-event-collector-color: var(--smart-primary-color);
  /* Event collector color */
  --smart-scheduler-event-collector-focus: rgba(var(--smart-primary-rgb), .9);
  /* Event collector background color on focus */
  --smart-scheduler-event-collector-color-focus: var(--smart-scheduler-event-collector-color);
  /* Event collector color on focus */
  --smart-scheduler-event-collector-hover: rgba(var(--smart-primary-rgb), .8);
  /* Event collector background colot on hover */
  --smart-scheduler-event-collector-color-hover: var(--smart-scheduler-event-collector-color);
  /* Event collector color on hover */
  --smart-scheduler-month-view-number-size: 24px;
  /* The size of the day number in month view */
  --smart-scheduler-status-size: 7px;
  /* The size of the day number in month view */
  --smart-scheduler-status-padding: 5px;
  /* The paddng between the content of the event and the satus strip */
  --smart-scheduler-status-background: transparent;
  /* The size of the day number in month view */
  --smart-scheduler-status-free-background: white;
  /* Event Status 'free' background color */
  --smart-scheduler-status-tentative-background: 0 -244rem / 5rem 5rem linear-gradient(45deg, #fd7e14 25%, rgba(0, 0, 0, .2) 25%, rgba(0, 0, 0, .2) 50%, #fd7e14 50%, #fd7e14 75%, rgba(0, 0, 0, .2) 75%, rgba(0, 0, 0, .2));
  /* Event status 'tentative' background color */
  --smart-scheduler-status-busy-background: #dc3545;
  /* Event status 'busy' background color */
  --smart-scheduler-status-out-of-office-background: #00a9e6;
  /* Event status 'out-of-office' background color */
  --smart-scheduler-cell-feedback-background: transparent;
  /* Cell feedback background color on event drop  */
  --smart-scheduler-event-resize-indicator-size: var(--smart-gantt-chart-timeline-task-resize-indicator-width);
  /* Event resize indicator size */
  --smart-scheduler-event-resize-indicator-color: var(--smart-gantt-chart-timeline-task-resize-indicator-color);
  /* Event resize indicator color */
  --smart-scheduler-event-resize-indicator-border-color: var(--smart-gantt-chart-timeline-task-resize-indicator-border-color);
  /* Event resize indicator border color */
  --smart-scheduler-restricted-background: 0 -245rem / 12px 12px linear-gradient(135deg, rgba(255, 0, 0, .15) 25%, transparent 25%, transparent 50%, rgba(255, 0, 0, .15) 50%, rgba(255, 0, 0, .15) 75%, transparent 75%, transparent);
  /* Restricted cells background color */
  --smart-scheduler-event-item-size: 50px;
  /* Event menu item size(height) */
  --smart-scheduler-event-button-size: 30px;
  /* Event menu item button size(delete button) */
  --smart-scheduler-event-border-radius: initial;
  /* Event border radius */
  --smart-scheduler-event-collector-border-radius: 20px;
  /* Event collector border radius */
  --smart-scheduler-context-menu-max-height: calc(4 * var(--smart-scheduler-event-item-size));
  /* Context menu max-height */
  --smart-scheduler-context-menu-max-width: 300px;
  /* Context menu max-width */
  --smart-scheduler-window-header-height: var(--smart-gantt-chart-popup-window-header-height);
  /* Window editor header height */
  --smart-scheduler-window-footer-height: var(--smart-gantt-chart-popup-window-footer-height);
  /* Window editor footer height */
  --smart-scheduler-event-label-font-weight: 300;
  /* Event label font weight */
  --smart-scheduler-event-time-font-weight: 300;
  /* Event time label font weight */
  --smart-scheduler-event-item-label-font-weight: 600;
  /* Event menu item label font-weight */
  --smart-scheduler-toast-default-width: 400px;
  /* Toast(notifications) default width */
  --smart-scheduler-toast-default-height: 50px;
  /* Toast(notifications) default height */
  --smart-scheduler-shortcut-size: 28px;
  /* The width of the shortuct of the view items when placed inside a drop down */
  /* ── Window  ─────────────────────────────────── */
  --smart-window-default-height: var(--smart-box-height);
  /*  default height */
  --smart-window-default-width: var(--smart-box-width);
  /*  default width */
  --smart-window-header-height: 40px;
  /*  header height */
  --smart-window-footer-height: var(--smart-bar-height);
  /*  footer height */
  --smart-window-min-width: 250px;
  /*  header width */
  --smart-window-header-padding: 10px;
  /* header and footer padding */
  --smart-window-footer-padding: 6.5px;
  /* header and footer padding */
  --smart-window-header-button-size: 24px;
  /* Size of the header buttons */
  --smart-window-header-icon-size: var(--smart-font-size);
  /* size of the header button icons */
  --smart-window-header-background: var(--smart-surface);
  /* Sets the background of the header section */
  --smart-window-footer-background: var(--smart-surface);
  /* Sets the size of the background of the footer section */
  --smart-window-footer-button-width: 100px;
  /* Sets the width of the footer buttons */
  --smart-window-content-padding: 10px;
  /* Sets the content section padding */
  /* ── Elevations  ─────────────────────────────────── */
  /* Highest elevation – used for topmost surfaces (modals, dialogs) */
  --smart-elevation-24: 0 24px 38px 3px rgba(0, 0, 0, .14), 0 9px 46px 8px rgba(0, 0, 0, .12), 0 11px 15px 0 rgba(0, 0, 0, .2);
  /* High elevation – for prominent cards or menus */
  --smart-elevation-16: 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12), 0 8px 10px 0 rgba(0, 0, 0, .2);
  /* Medium-high elevation – for raised cards or floating elements */
  --smart-elevation-12: 0 12px 17px 2px rgba(0, 0, 0, .14), 0 5px 22px 4px rgba(0, 0, 0, .12), 0 7px 8px 0 rgba(0, 0, 0, .2);
  /* Medium elevation – default cards, panels */
  --smart-elevation-8: 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 3px rgba(0, 0, 0, .12), 0 4px 15px 0 rgba(0, 0, 0, .2);
  /* Slight elevation – small popovers, tooltips */
  --smart-elevation-6: 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12), 0 3px 5px 0 rgba(0, 0, 0, .2);
  /* Low elevation – subtle shadow for buttons, inputs */
  --smart-elevation-4: 0 2px 4px 0 rgba(0, 0, 0, .14), 0 4px 5px 0 rgba(0, 0, 0, .12), 0 1px 10px 0 rgba(0, 0, 0, .2);
  /* Minimal elevation – slight shadow, barely raised */
  --smart-elevation-2: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
  /* Very subtle elevation – almost flat */
  --smart-elevation-1: 0 0 2px 0 rgba(0, 0, 0, .14), 0 2px 2px 0 rgba(0, 0, 0, .12), 0 1px 3px 0 rgba(0, 0, 0, .2);
  /* No elevation – completely flat surface */
  --smart-elevation-0: none;
  /* Breakpoints */
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  /*Misc*/
  --pseudo-element-height: 0;
}

/* ── Dark Theme Variant ───────────────────────────────────────────── */
body[theme=dark],
.smart-ui-component[theme=dark] {
  --smart-white: #ffffff;
  --smart-black: #0a0a0a;
  --smart-base: #3d3d3d;
  --smart-base-50: #d6d6d6;
  --smart-base-100: #adadad;
  --smart-base-200: #5c5c5c;
  --smart-base-300: #3d3d3d;
  --smart-base-400: #383838;
  --smart-base-500: #333333;
  --smart-base-600: #2e2e2e;
  --smart-base-700: #292929;
  --smart-base-800: #1f1f1f;
  --smart-base-900: #141414;
  --smart-base-light: #adadad;
  --smart-base-lighter: #ffffff;
  --smart-base-dark: #292929;
  --smart-base-darker: #141414;
  --smart-primary: #0073E6;
  --smart-primary-rgb: 0, 115, 230;
  --smart-primary-light: #62abf5;
  --smart-primary-lighter: #96c6fa;
  --smart-primary-dark: #115fa3;
  --smart-primary-darker: #0c3a5e;
  --smart-secondary: #2e2e2e;
  --smart-secondary-light: #3b3b3b;
  --smart-secondary-lighter: #727272;
  --smart-secondary-dark: #2a2a2a;
  --smart-secondary-darker: #1e1e1e;
  --smart-info: #2886de;
  --smart-info-light: #3a93e6;
  --smart-info-lighter: #99c5f5;
  --smart-info-dark: #2477c5;
  --smart-info-darker: #1b4f81;
  --smart-success: #107c10;
  --smart-success-light: #0f970f;
  --smart-success-lighter: #9fd89f;
  --smart-success-dark: #0f6e0f;
  --smart-success-darker: #0d4a0d;
  --smart-warning: #fde300;
  --smart-warning-light: #ffe718;
  --smart-warning-lighter: #fff786;
  --smart-warning-dark: #e0c901;
  --smart-warning-darker: #928404;
  --smart-danger: #d13438;
  --smart-danger-light: #db4448;
  --smart-danger-lighter: #ef9f9e;
  --smart-danger-dark: #b92f32;
  --smart-danger-darker: #792224;
  --smart-on-base: #ffffff;
  --smart-on-base-light: #141414;
  --smart-on-base-lighter: #141414;
  --smart-on-base-dark: #ffffff;
  --smart-on-base-darker: #ffffff;
  --smart-on-primary: #0a0a0a;
  --smart-on-primary-light: #0c3a5e;
  --smart-on-primary-lighter: #0c3a5e;
  --smart-on-primary-dark: #ffffff;
  --smart-on-primary-darker: #ffffff;
  --smart-on-secondary: #ffffff;
  --smart-on-secondary-light: #ffffff;
  --smart-on-secondary-lighter: #ffffff;
  --smart-on-secondary-dark: #ffffff;
  --smart-on-secondary-darker: #ffffff;
  --smart-on-info: #ffffff;
  --smart-on-info-light: #ffffff;
  --smart-on-info-lighter: #1b4f81;
  --smart-on-info-dark: #ffffff;
  --smart-on-info-darker: #ffffff;
  --smart-on-success: #ffffff;
  --smart-on-success-light: #ffffff;
  --smart-on-success-lighter: #0d4a0d;
  --smart-on-success-dark: #ffffff;
  --smart-on-success-darker: #ffffff;
  --smart-on-warning: #141414;
  --smart-on-warning-light: #141414;
  --smart-on-warning-lighter: #928404;
  --smart-on-warning-dark: #141414;
  --smart-on-warning-darker: #ffffff;
  --smart-on-danger: #ffffff;
  --smart-on-danger-light: #ffffff;
  --smart-on-danger-lighter: #792224;
  --smart-on-danger-dark: #ffffff;
  --smart-on-danger-darker: #ffffff;
  --smart-secondary-background: var(--smart-base-500);
  --smart-secondary-background-alt: var(--smart-base-500);
  --smart-outline-color: var(--smart-primary);
  --smart-text-title-color: var(--smart-base-50);
  --smart-text-color: var(--smart-base-50);
  --smart-text-secondary-color: var(--smart-base-100);
  --smart-text-tertiary-color: var(--smart-base-200);
  --smart-text-disabled-color: var(--smart-base-300);
  --smart-text-contrast-color: var(--smart-white);
  --smart-background: var(--smart-base-800);
  /* The theme background color. The background color appears behind scrollable content.*/
  --smart-background-color: var(--smart-white);
  /* Text color on top of a background background */
  --smart-surface: var(--smart-base-800);
  /* The theme surface color. Surface colors affect surfaces of components, such as cards, sheets, and menus. */
  --smart-surface-color: var(--smart-white);
  /* Text color on top of a surface surface */
  --smart-disabled: #535353;
  /* The theme primary color in disabled state. */
  --smart-disabled-color: #fff;
  /* Text color on top of a theme background in disabled state */
  --smart-border: var(--smart-base-500);
  /* The theme background border color */
  --smart-editor-selection: var(--smart-primary);
  --smart-editor-selection-color: var(--smart-on-primary-dark);
  --smart-ui-state-hover: var(--smart-base-500);
  --smart-ui-state-color-hover: #fff;
  --smart-ui-state-border-hover: var(--smart-ui-state-hover);
  --smart-ui-state-active: var(--smart-primary);
  --smart-ui-state-color-active: var(--smart-on-primary-dark);
  --smart-ui-state-border-active: var(--smart-primary);
  --smart-ui-state-focus: var(--smart-base-500);
  --smart-ui-state-color-focus: #fff;
  --smart-ui-state-border-focus: var(--smart-base-500);
  --smart-ui-state-selected: var(--smart-secondary-light);
  --smart-ui-state-color-selected: var(--smart-on-secondary-light);
  --smart-ui-state-border-selected: var(--smart-secondary-light);
  --smart-alternation-index0-color: var(--smart-surface-color);
  /* Alternation color for index0 */
  --smart-alternation-index0-border: var(--smart-base-700);
  /* Alternation border color for index0 */
  --smart-alternation-index0-background: var(--smart-base-700);
  /* Alternation background color for index0 */
  --smart-alternation-index1-color: #111;
  /*Alternation color for index1 */
  --smart-alternation-index1-border: #9BBB59;
  /* Alternation border color for index1 */
  --smart-alternation-index1-background: #9BBB59;
  /* Alternation background color for index1 */
  --smart-alternation-index2-color: #fff;
  /*Alternation color for index2 */
  --smart-alternation-index2-border: #FC3752;
  /* Alternation border color for index2 */
  --smart-alternation-index2-background: #FC3752;
  /* Alternation background color for index2 */
  --smart-grid-cell-background-freeze: #242424;
  --smart-grid-cell-color-freeze: #fff;
  --smart-scroll-bar-background: var(--smart-surface);
  --smart-scroll-bar-track-background: var(--smart-scroll-bar-background);
  --smart-scroll-bar-border: var(--smart-surface);
  --smart-scroll-bar-thumb-background: var(--smart-base-200);
  --smart-scroll-bar-thumb-border: var(--smart-base-200);
  --smart-scroll-bar-thumb-background-hover: var(--smart-base-100);
  --smart-scroll-bar-thumb-border-hover: var(--smart-base-100);
  --smart-scroll-bar-thumb-background-active: var(--smart-base-100);
  --smart-scroll-bar-thumb-border-active: var(--smart-base-100);
  --smart-scroll-bar-button-background: var(--smart-surface);
  --smart-scroll-bar-button-border: var(--smart-surface);
  --smart-scroll-bar-button-color: var(--smart-on-surface);
  --smart-scroll-bar-button-background-hover: var(--smart-surface);
  --smart-scroll-bar-button-border-hover: var(--smart-surface);
  --smart-scroll-bar-button-color-hover: var(--smart-on-surface);
  --smart-scroll-bar-button-background-active: var(--smart-surface);
  --smart-scroll-bar-button-border-active: var(--smart-surface);
  --smart-scroll-bar-button-color-active: var(--smart-on-surface);
  --smart-gantt-chart-timeline-nonworking-color: #3E3E42;
  --smart-scheduler-timeline-weekend-color: var(--smart-background);
  /* Sets the background color for the weekend cells */
  --smart-scheduler-timeline-nonworking-color: var(--smart-gantt-chart-timeline-nonworking-color);
  /* Sets the background color for nonworking days/hours cells */
  --smart-scheduler-day-week-view-hour-color: var(--smart-base-500);
  --smart-scheduler-view-horizontal-line-color: var(--smart-base-500);
  --smart-scheduler-view-vertical-line-color: var(--smart-base-500);
  --smart-scheduler-event-background-rgb: 103, 176, 245;
  --smart-scheduler-event-background: rgba(var(--smart-scheduler-event-background-rgb), 1);
  --smart-scheduler-event-color: var(--smart-on-primary-dark);
  --smart-scheduler-event-focus: rgba(var(--smart-scheduler-event-background-rgb), .9);
  --smart-scheduler-event-color-focus: var(--smart-scheduler-event-color);
  --smart-scheduler-event-hover: rgba(var(--smart-scheduler-event-background-rgb), .8);
  --smart-scheduler-event-color-hover: var(--smart-scheduler-event-color);
  --smart-scheduler-event-collector-background: rgba(var(--smart-primary-rgb), 1);
  --smart-scheduler-event-collector-color: var(--smart-on-primary-dark);
  --smart-scheduler-event-collector-focus: rgba(var(--smart-primary-rgb), .9);
  --smart-scheduler-event-collector-color-focus: var(--smart-scheduler-event-collector-color);
  --smart-scheduler-event-collector-hover: rgba(var(--smart-primary-rgb), .8);
  --smart-scheduler-event-collector-color-hover: var(--smart-scheduler-event-collector-color);
  --smart-scheduler-status-free-background: white;
  --smart-scheduler-status-tentative-background: 0 -244rem / 5rem 5rem linear-gradient(45deg, #fd7e14 25%, rgba(0, 0, 0, .2) 25%, rgba(0, 0, 0, .2) 50%, #fd7e14 50%, #fd7e14 75%, rgba(0, 0, 0, .2) 75%, rgba(0, 0, 0, .2));
  --smart-scheduler-status-busy-background: #dc3545;
  --smart-scheduler-status-out-of-office-background: #00a9e6;
  --smart-scheduler-event-resize-indicator-color: var(--smart-gantt-chart-timeline-task-resize-indicator-color);
  --smart-scheduler-event-resize-indicator-border-color: var(--smart-gantt-chart-timeline-task-resize-indicator-border-color);
  --smart-scheduler-restricted-background: 0 -245rem / 12px 12px linear-gradient(135deg, rgba(255, 0, 0, .15) 25%, transparent 25%, transparent 50%, rgba(255, 0, 0, .15) 50%, rgba(255, 0, 0, .15) 75%, transparent 75%, transparent);
  --smart-window-header-background: var(--smart-surface);
  --smart-window-footer-background: var(--smart-surface);
}

body[theme=dark],
.smart-ui-component[theme=dark] {
  --smart-primary: #17a2b8;
  --smart-primary-rgb: 23, 162, 184;
  --smart-primary-light: #a9dce5;
  --smart-primary-lighter: rgba(23, 162, 184, 0.13);
  --smart-primary-dark: #63c2d1;
  --smart-primary-darker: #0b3c44;
  --smart-outline-color: var(--smart-primary);
  --smart-ui-state-active: var(--smart-primary);
  --smart-ui-state-border-active: var(--smart-primary);
}