/* CSS variables */

:root {
    --smart-primary-rgb: 0, 92, 153;
    --smart-primary: rgb(var(--smart-primary-rgb)); /* The theme primary color */
    --smart-primary-color: #ffffff; /* Text color on top of a primary background */
    --smart-secondary: #2D2D30; /* The theme secondary color */
    --smart-secondary-color: #ffffff; /* Text color on top of a secondary background */
    --smart-error: #B00020; /* The theme error color */
    --smart-error-color: #ffffff; /* Text color on top of a error background */
    --smart-success: #8BC34A; /* The theme success color */
    --smart-success-color: #ffffff; /* Text color on top of a success background */
    --smart-background: #fefefe; /* The theme background color. The background color appears behind scrollable content.*/
    --smart-background-color: #5A5A5A; /* Text color on top of a background background */
    --smart-surface: #F5F5F5; /* The theme surface color. Surface colors affect surfaces of components, such as cards, sheets, and menus. */
    --smart-surface-color: #323232; /* Text color on top of a surface surface */
    --smart-disabled: #CCCCCC; /* The theme primary color in disabled state. */
    --smart-disabled-color: #555; /* Text color on top of a theme background in disabled state */
    --smart-ui-state-hover: #ebebeb;
    --smart-ui-state-color-hover: #333;
    --smart-ui-state-border-hover: #ebebeb;
    --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: #e2e0e0;
    --smart-ui-state-color-focus: #333;
    --smart-ui-state-border-focus: #e2e0e0;
    --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);
    --smart-item-border-width: 1px; /* Theme border-width */
    --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-font-size: 14px; /* Theme font-size */
    --smart-font-family: Roboto,"Helvetica Neue",sans-serif; /* Theme font-family */
    --smart-font-family-icon: smart-icons;
    --smart-border-width: 1px; /* Theme border-width */
    --smart-border-radius: 4px; /* Theme border-radius */
    --smart-border-top-left-radius: var(--smart-border-radius); /* Theme border-radius */
    --smart-border-top-right-radius: var(--smart-border-radius); /* Theme border-radius */
    --smart-border-bottom-left-radius: var(--smart-border-radius); /* Theme border-radius */
    --smart-border-bottom-right-radius: var(--smart-border-radius); /* Theme border-radius */
    --smart-border: #E0E0E0; /* The theme background border color */
    --smart-outline: #b2b2b2; /* The theme active element outline color */
    --smart-editor-selection: var(--smart-primary);
    --smart-editor-selection-color: var(--smart-primary-color);
    --smart-alternation-index0-color: var(--smart-surface-color); /* Alternation color for index0 */
    --smart-alternation-index0-border: var(--smart-surface); /* Alternation border color for index0 */
    --smart-alternation-index0-background: var(--smart-surface); /* 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-tick-color: var(--smart-border); /* Default tick color for smartTank, smartSlider and smartGauge */
    --smart-tick-label-color: var(--smart-background-color); /* Default 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-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;
    --smart-editor-drop-down-z-index: 9999;
    --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 */
    --smart-icon-table: '\e800';
    --smart-icon-star: '\e801';
    --smart-icon-star-empty: '\e802';
    --smart-icon-plus: '\e803';
    --smart-icon-minus: '\e804';
    --smart-icon-attention-circled: '\e805';
    --smart-icon-align-left: '\e806';
    --smart-icon-align-right: '\e807';
    --smart-icon-align-center: '\e808';
    --smart-icon-reload: '\e809';
    --smart-icon-cancel: '\e80d';
    --smart-icon-close: '\e80d';
    --smart-icon-cancel-circled: '\e80e';
    --smart-icon-plus-circled: '\e810';
    --smart-icon-power: '\e811';
    --smart-icon-minus-circled: '\e814';
    --smart-icon-arrow-up-alt: '\e817';
    --smart-icon-radio: '\e818';
    --smart-icon-refresh: '\e819';
    --smart-icon-chart: '\e81a';
    --smart-icon-check-squared: '\e81b';
    --smart-icon-resize-full: '\e81c';
    --smart-icon-resize-small: '\e81d';
    --smart-icon-resize-vertical: '\e80c';
    --smart-icon-resize-horizontal: '\e80f';
    --smart-icon-lock: '\e821';
    --smart-icon-sort: '\e823';
    --smart-icon-delete: '\e826';
    --smart-icon-search: '\e828';
    --smart-icon-calendar: '\e829';
    --smart-icon-edit: '\e82a';
    --smart-icon-popup: '\e82c';
    --smart-icon-lock-open: '\e82e';
    --smart-icon-add-filter: '\e82f';
    --smart-icon-block: '\e832';
    --smart-icon-settings: '\e833';
    --smart-icon-duplicate: '\e834';
    --smart-icon-copy-record: '\e835';
    --smart-icon-download-alt: '\e836';
    --smart-icon-clock: '\e837';
    --smart-icon-attention: '\e838';
    --smart-icon-help-circled: '\e839';
    --smart-icon-mail: '\e83c';
    --smart-icon-up: '\e83f';
    --smart-icon-first-page: '\e900';
    --smart-icon-arrow-down: '\e901';
    --smart-icon-arrow-left: '\e902';
    --smart-icon-arrow-right: '\e903';
    --smart-icon-arrow-up: '\e904';
    --smart-icon-arrow-down-filled: '\e812';
    --smart-icon-arrow-left-filled: '\e816';
    --smart-icon-arrow-right-filled: '\e81e';
    --smart-icon-arrow-up-filled: '\e815';
    --smart-icon-last-page: '\e905';
    --smart-icon-more-horiz: '\e906';
    --smart-icon-skip-next: '\e907';
    --smart-icon-check: '\e908';
    --smart-icon-mode-edit: '\e909';
    --smart-icon-replay: '\e90c';
    --smart-icon-visibility: '\e90d';
    --smart-icon-visibility-off: '\e90e';
    --smart-icon-link-ext: '\f08e';
    --smart-icon-check-empty: '\f096';
    --smart-icon-filter: '\f0b0';
    --smart-icon-resize-full-alt: '\f0b2';
    --smart-icon-menu: '\f0c9';
    --smart-icon-sort-1: '\f0dc';
    --smart-icon-paste: '\f0ea';
    --smart-icon-circle-empty: '\f10c';
    --smart-icon-circle: '\f111';
    --smart-icon-ellipsis: '\f141';
    --smart-icon-minus-squared: '\f146';
    --smart-icon-ok-squared: '\f14a';
    --smart-icon-sort-name-up: '\f15d';
    --smart-icon-sort-name-down: '\f15e';
    --smart-icon-sort-alt-up: '\f160';
    --smart-icon-sort-alt-down: '\f161';
    --smart-icon-sort-number-up: '\f162';
    --smart-icon-sort-number-down: '\f163';
    --smart-icon-dot-circled: '\f192';
    --smart-icon-toggle-off: '\f204';
    --smart-icon-toggle-on: '\f205';
    --smart-icon-group: '\f247';
    --smart-icon-ungroup: '\f248';
    --smart-icon-window-maximize: '\f2d0';
    --smart-icon-window-minimize: '\f2d1';
    --smart-icon-window-restore: '\f2d2';
    --smart-icon-window-pin-alt: '\e82d';
    --smart-icon-window-pin: '\e80a';
    --smart-icon-docs: '\f0c5';
    --smart-icon-math: '\f01a';
    --smart-icon-spin: 'e80b';
    /* Accordion */
    --smart-accordion-animation-duration: 225ms; /* smartAccordion animation duration */
    --smart-accordion-default-width: var(--smart-box-width); /* smartAccordion default width  */
    --smart-accordion-default-height: var(--smart-box-height); /* smartAccordion default height */
    --smart-accordion-expanded-content-height: 0px; /* Determines expanded content's height */
    --smart-accordion-expanded-content-local-height: 0px;
    --smart-accordion-item-header-height: calc(0.75 * var(--smart-bar-height));
    --smart-accordion-item-expanded-offset: 20px;
    /* Array */
    --smart-array-default-width: var(--smart-box-width); /* smartArray default width */
    --smart-array-default-height: var(--smart-box-height); /* smartArray default height */
    --smart-array-element-gap: 3px; /* smartArray element gap size */
    /* Breadcrumb */
    --smart-breadcrumb-default-width: 400px;
    --smart-breadcrumb-default-height: auto;
    --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 smartBreadcrumb dropdown in minimized mode */
    --smart-breadcrumb-item-height: 40px; /* Height of smartBreadcrumb items */
    --smart-breadcrumb-horizontal-offset: 10px; /* Horizontal offset between smartBreadcrumb items */
    /* Button - Default */
    --smart-button-text-transform: uppercase;
    --smart-button-padding: 8px 16px;
    --smart-button-large-padding: 10px 16px;
    --smart-button-large-font-size: 18px;
    --smart-button-small-padding: 5px 10px;
    --smart-button-small-font-size: 12px;
    --smart-button-very-small-padding: 1px 5px;
    --smart-button-very-small-font-size: 12px;
    /* Button - Flat */
    --smart-button-flat-color: var(--smart-button-color);
    /* Button - Outlined */
    --smart-button-outlined-color: var(--smart-background-color);
    --smart-button-outlined-border: var(--smart-border);
    /* 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));
    --smart-calendar-cell-size: 30px;
    --smart-calendar-cell-spacing: 4px;
    --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;
    --smart-calendar-week-title-text-transform: uppercase;
    --smart-calendar-header-text-transform: uppercase;
    --smart-calendar-footer-text-transform: uppercase;
    --smart-calendar-cell-border-top-right-radius: 15px;
    --smart-calendar-cell-border-top-left-radius: 15px;
    --smart-calendar-cell-border-bottom-left-radius: 15px;
    --smart-calendar-cell-border-bottom-right-radius: 15px;
    --smart-calendar-title-padding: 10px;
    /* CardView */
    --smart-card-view-default-width: 1200px;
    --smart-card-view-default-height: 800px;
    --smart-card-view-padding: 10px;
    --smart-card-view-header-height: 30px;
    --smart-card-view-customize-panel-width: 200px;
    --smart-card-view-filter-panel-width: 500px;
    --smart-card-view-sort-panel-width: 400px;
    --smart-card-view-search-panel-width: 250px;
    --smart-card-view-cover-height: var(--smart-carousel-default-height);
    --smart-card-view-vertical-offset: 15px;
    --smart-card-view-column-min-width: 250px;
    --smart-card-view-gap: 10px;
    --smart-card-view-add-new-button-size: 60px;
    /* 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 */
    /* Check Box */
    --smart-check-box-default-size: calc(1px + 1/2 * var(--smart-editor-height)); /* Default size for the check box used in smartCheckBox and smartListItem. */
    /* ColorPanel*/
    --smart-color-panel-default-width: auto; /* smartColorPanel default width ; was 450px*/
    --smart-color-panel-default-height: auto; /* smartColorPanel default height ; was 370px */
    --smart-color-panel-palette-size: 300px;
    --smart-color-panel-grid-mode-item-size: 20px; /* smartColorPanel item size */ /*was 40px*/
    --smart-color-panel-grid-mode-column-count: 8; /* smartColorPanel columns */
    --smart-color-panel-grid-mode-columns-gap: 1px; /* smartColorPanel columns */
    --smart-color-panel-brightness: 0;
    --smart-color-panel-default-mode-sections-gap: 8px;
    --smart-color-panel-palette-width: var(--smart-color-panel-palette-size);
    --smart-color-panel-palette-height: var(--smart-color-panel-palette-size);
    --smart-color-panel-alpha-channel-color: white; /* Used as a default color for the Alpha Scale  */
    /* ColorPicker*/
    --smart-color-picker-default-width: var(--smart-editor-width); /* smartColorPicker default width */
    --smart-color-picker-default-height: var(--smart-editor-height); /* smartColorPicker default height */
    --smart-color-picker-drop-down-width: auto; /* smartColorPicker default width */
    --smart-color-picker-drop-down-height: auto; /* smartColorPicker default height */
    /* ComboBox */
    --smart-combo-box-default-width: var(--smart-editor-width); /* smartComboBox default width */
    --smart-combo-box-default-height: var(--smart-editor-height); /* smartComboBox default height */
    --smart-combo-box-drop-down-width: auto; /* smartComboBox default width */
    --smart-combo-box-drop-down-height: auto; /* smartComboBox default height */
    /* Chip */
    --smart-chip-default-height: var(--smart-editor-height); /* Default chips height */
    --smart-chip-avatar-background: var(--smart-secondary); /* Default avatar background color */
    /* Currency format panel */
    --smart-currency-format-panel-currency-holder-width: 1fr;
    --smart-currency-format-panel-apply-button-width: 125px;
    --smart-currency-format-panel-header-holder-offset: 2%;
    --smart-currency-format-panel-currency-holder-input-width: 1fr;
    --smart-currency-format-panel-currency-holder-dropdown-width: 165px;
    --smart-currency-format-panel-currency-holder-dropdown-button-width: 95%;
    --smart-currency-format-panel-border-size: 1px;
    --smart-currency-format-panel-border-color: #ccc;
    --smart-currency-format-panel-border-radius: 4px;
    --smart-currency-format-panel-currencies-margin-top: 15px;
    --smart-currency-format-panel-currencies-max-height: 400px;
    --smart-currency-format-panel-currencies-item-padding: 12px;
    --smart-currency-format-panel-currency-holder-padding-left: 5px;
    --smart-currency-format-panel-currency-holder-padding-top: 3px;
    --smart-currency-format-panel-currency-holder-padding-bottom: 3px;
    --smart-currency-format-panel-currency-input-width: 100%;
    --smart-currency-format-panel-currencies-left-padding: 10px;
    --smart-currency-format-panel-currencies-hover-background: #f1f1f1;
    --smart-currency-format-panel-currencies-example-format-color: #777;
    /* Date Format Panel */
    --smart-date-format-panel-main-container-width: 960px; /* Main container */
    --smart-date-format-panel-main-container-padding: 15px;
    --smart-date-format-panel-border-radius: 4px; /* Default styles */
    --smart-date-format-panel-border-size: 1px;
    --smart-date-format-panel-border-color: #ccc;
    --smart-date-format-panel-smart-inputs-container-width: 1fr; /* Input and add format holder */
    --smart-date-format-panel-apply-container-width: 150px;
    --smart-date-format-panel-smart-input-buttons-column-gap: 2%;
    --smart-date-format-panel-smart-inputs-holder-width: 94%; /* Input and add format holder child */
    --smart-date-format-panel-add-format-holder-width: 6%;
    --smart-date-format-panel-smart-inputs-list-holder-offset: 2px;
    --smart-date-format-panel-smart-input-format-width: 150px; /* smart inputs */
    --smart-date-format-panel-smart-input-sign-width: 80px;
    --smart-date-format-panel-smart-input-height: 25px;
    --smart-date-format-panel-each-smart-input-offset: 4px;
    --smart-date-format-panel-all-format-holders-width: 255px;
    --smart-date-format-panel-add-format-holder-button: 120px;
    --smart-date-format-panel-each-add-format-holder-width: 120px; /* Add new format */
    --smart-date-format-panel-add-new-format-dropdown-offset: 5px;
    --smart-date-format-panel-date-time-format-list-offset-top: 15px; /* Format list */
    --smart-date-format-panel-date-time-format-list-max-height: 400px;
    --smart-date-format-panel-each-date-time-format-offset: 12px;
    /* Date Time 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;
    --smart-date-time-picker-header-opacity-active: 1;
    /*DockingLayout*/
    --smart-docking-layout-default-width: 1000px; /* smartDropDownList, smartComboBox default width */
    --smart-docking-layout-default-height: 800px; /* smartDropDownList, smartComboBox default height */
    --smart-docking-layout-feedback-background-secondary-size: 7px;
    /*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; /* smartComboBox default width */
    --smart-drop-down-list-drop-down-height: auto; /* smartComboBox default height */
    /* DropDownButton */
    --smart-drop-down-button-default-width: auto;
    --smart-drop-down-button-default-height: var(--smart-editor-height);
    --smart-drop-down-button-drop-down-width: var(--smart-editor-drop-down-width); /* smartComboBox default width */
    --smart-drop-down-button-drop-down-height: var(--smart-editor-drop-down-height); /* smartComboBox default height */
    /* Filter Builder */
    --smart-filter-builder-default-width: var(--smart-box-width); /* Default width of the smartFilterBuilder*/
    --smart-filter-builder-default-height: var(--smart-box-height); /* Default height of the smartFilterBuilder*/
    --smart-filter-builder-row-height: var(--smart-editor-height); /* Default height of the smartFilterBuilder's rows*/
    --smart-filter-builder-item-width: var(--smart-editor-width); /* Default width of the smartFilterBuilder's 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;
    /* Filter Panel */
    --smart-filter-panel-default-width: 300px; /* Default width of the smartFilterPanel */
    --smart-filter-panel-default-height: auto; /* Default height of the smartFilterPanel */
    --smart-filter-panel-padding: 10px; /* padding of the smartFilterPanel */
    --smart-filter-panel-border-top-right-radius: var(--smart-border-radius);
    --smart-filter-panel-border-top-left-radius: var(--smart-border-radius);
    --smart-filter-panel-border-bottom-left-radius: var(--smart-border-radius);
    --smart-filter-panel-border-bottom-right-radius: var(--smart-border-radius);
    --smart-filter-panel-border-width: var(--smart-border-width);
    --smart-filter-panel-border: var(--smart-border);
    --smart-filter-panel-background: var(--smart-background);
    --smart-filter-panel-color: var(--smart-background-color);
    --smart-filter-panel-vertical-offset: 10px; /* Vertical offset between smartFilterPanel sub-elements */
    --smart-filter-panel-main-element-height: 400px; /* height of the smartTree or smartFilterBuilder inside the smartFilterPanel */
    /* File Upload */
    --smart-file-upload-default-width: var(--smart-editor-width); /* Default width of the smartFileUpload*/
    --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 smartFileUpload's footer buttons*/
    --smart-file-upload-footer-button-height: auto; /* Default height of the smartFileUpload's footer buttons*/
    --smart-file-upload-text-content-uploading-start: "Connecting ..."; /* text content of smart-uploading-start::before */
    --smart-file-upload-text-content-uploading: "Uploading ..."; /* text content of smart-uploading::before */
    --smart-file-upload-text-content-error: "Upload error!"; /* text content of smart-error::before */
    --smart-file-upload-text-content-pause: "Upload paused!"; /* text content of smart-pause::before */
    --smart-file-upload-text-content-drop-zone: "Drag files here"; /* text content of smart-drop-zone::after */
    --smart-file-upload-text-content-drop-zone-over: "Drop here \e824"; /* text content of smart-drop-zone::after on drag over */
    --smart-file-upload-container-min-height: 60px; /* min height of the container with smart-drop-zone and smart-selected-files*/
    --smart-file-upload-total-files-min-height: 20px; /* min height of the container with smart-drop-zone and smart-selected-files*/
    /* Gantt Chart */
    --smart-gantt-chart-splitter-bar-fit-size: calc(var(--smart-gantt-chart-timeline-content-height) + 2 * var(--smart-gantt-chart-task-default-height)); /* The fit size of all Splitter bars inside the element*/
    --smart-gantt-chart-task-tree-splitter-bar-fit-size: var(--smart-gantt-chart-splitter-bar-fit-size); /*  The fit size of the Splitter Bars that are inside the Task Tree Splitter */
    --smart-gantt-chart-task-default-height: 30px; /* The height of a Task inside the Timeline  */
    --smart-gantt-chart-task-bar-fill-padding: 5px; /* The padding of the Fill of the Task Bar */
    --smart-gantt-chart-task-thumb-color: rgba(0,0,0,.45);
    ; /* 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; /* #38a238*/ /* The defaut color for all Project tasks */
    --smart-gantt-chart-project-label-color: #333;
    --smart-gantt-chart-project-label-color-selected: #000;
    --smart-gantt-chart-project-progress-color: var(--smart-gantt-chart-task-progress-color); /* #008000 */ /* The default color of the progress fill for all Project tasks */
    --smart-gantt-chart-task-color: rgb(43, 195, 190); /* #6495ed */ /* 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;
    --smart-gantt-chart-timeline-task-connection-feedback-color: #e6510a; /* orange */
    --smart-gantt-chart-timeline-task-connection-feedback-width: 1px;
    --smart-gantt-chart-timeline-task-connection-feedback-style: dashed;
    --smart-gantt-chart-timeline-task-connection-color: var(--smart-gantt-chart-timeline-task-connection-feedback-color);
    --smart-gantt-chart-timeline-task-connection-color-hover: var(--smart-gantt-chart-timeline-task-connection-color);
    --smart-gantt-chart-timeline-task-connection-width: var(--smart-gantt-chart-timeline-task-connection-feedback-width);
    --smart-gantt-chart-timeline-task-connection-style: solid;
    --smart-gantt-chart-timeline-task-connection-arrow-type: solid;
    --smart-gantt-chart-timeline-task-connection-arrow-width: 5px;
    --smart-gantt-chart-timeline-task-resize-indicator-width: 4px;
    --smart-gantt-chart-timeline-task-resize-indicator-color: #fff;
    --smart-gantt-chart-timeline-task-resize-indicator-border-color: #333;
    --smart-gantt-chart-timeline-task-progress-thumb-size: 10px;
    --smart-gantt-chart-timeline-cell-size: auto;
    --smart-gantt-chart-timeline-cell-min-size: 70px;
    --smart-gantt-chart-timeline-task-min-width: 5px;
    --smart-gantt-chart-timeline-weekend-color: #EFF5FD;
    --smart-gantt-chart-timeline-nonworking-color: #F5F5F5;
    --smart-gantt-chart-default-width: auto;
    --smart-gantt-chart-default-height: 600px;
    --smart-gantt-chart-task-popup-window-default-width: 500px;
    --smart-gantt-chart-connection-popup-window-default-width: 300px;
    --smart-gantt-chart-confirm-popup-window-default-width: var(--smart-gantt-chart-connection-popup-default-width);
    --smart-gantt-chart-popup-window-header-height: 35px;
    --smart-gantt-chart-popup-window-footer-height: 50px;
    /* Gauge */
    --smart-gauge-default-width: var(--smart-box-width); /* smartGauge default width */
    --smart-gauge-default-height: var(--smart-box-height); /* smartgauge default height */
    --smart-gauge-track-border: var(--smart-border);
    --smart-gauge-track-background: var(--smart-background);
    --smart-gauge-needle-background: var(--smart-primary);
    --smart-gauge-label-fill-state: initial;
    --smart-gauge-label-stroke: initial;
    /* Grid */
    /* Grid */
    --smart-grid-default-width: 800px;
    --smart-grid-default-height: 400px;
    --smart-grid-footer-height: var(--smart-bar-height);
    --smart-grid-header-height: var(--smart-bar-height);
    --smart-grid-group-header-height: var(--smart-bar-height);
    --smart-grid-row-height: 30px;
    --smart-grid-column-header-height: var(--smart-bar-height);
    --smart-grid-filter-footer-height: var(--smart-bar-height);
    --smart-grid-aggregate-footer-height: var(--smart-bar-height);
    --smart-grid-header-background-freeze: var(--smart-surface);
    --smart-grid-header-color-freeze: var(--smart-surface-color);
    --smart-grid-column-menu-width: 200px;
    --smart-grid-column-menu-height: auto;
    --smart-grid-column-buttons-width: 23px;
    --smart-grid-cell-color-freeze: var(--smart-surface-color);
    --smart-grid-cell-background-freeze: var(--smart-surface);
    --smart-grid-cell-color-delete: #333;
    --smart-grid-cell-background-delete: #FFDCDC;
    --smart-grid-cell-color-update: #333;
    --smart-grid-cell-background-update: #D7F9C7;
    --smart-grid-cell-color-add: #333;
    --smart-grid-cell-background-add: #FED59B;
    --smart-grid-cell-color-unbound: var(--smart-surface-color);
    --smart-grid-cell-background-unbound: var(--smart-surface);
    --smart-grid-cell-color-sort: var(--smart-surface-color);
    --smart-grid-cell-background-sort: var(--smart-surface);
    --smart-grid-cell-color-filter: var(--smart-surface-color);
    --smart-grid-cell-background-filter: var(--smart-surface);
    --smart-grid-group-row-vertical-offset: 5;
    --smart-grid-group-row-horizontal-offset: 1;
    --smart-grid-template-columns: none;
    --smart-grid-column-gap: 0px;
    --smart-grid-row-gap: 0px;
    --smart-grid-freeze-splitter-size: 1px;
    --smart-grid-resize-line-size: 1px;
    /* 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 */
    --smart-grid-panel-default-width: 450px; /* Default width of the smartGroupPanel/smartSortPanel */
    --smart-grid-panel-default-height: auto; /* Default height of the smartGroupPanel/smartSortPanel */
    --smart-grid-panel-padding: 10px; /* padding of the smartGroupPanel/smartSortPanel */
    --smart-grid-panel-vertical-offset: 10px; /* Vertical offset between smartGroupPanel/smartSortPanel items */
    --smart-grid-panel-item-height: 30px; /* height of smartGroupPanel/smartSortPanel items */
    --smart-multi-column-filter-panel-template-columns: 20px 60px 2fr 3fr 3fr; /* smartMultiColumnFilterPanel grid-template-columns */
    /* ListBox */
    --smart-list-box-default-width: var(--smart-editor-width); /* smartListBox default width */
    --smart-list-box-default-height: var(--smart-editor-width); /* smartListBox default height */
    --smart-list-item-group-header-text-transform: uppercase;
    --smart-list-item-horizontal-offset: 3px;
    --smart-list-item-vertical-offset: 3px;
    --smart-list-item-label-padding: 0;
    --smart-list-item-label-border-radius: 0;
    /* Loader */
    --smart-loader-size: var(--smart-editor-height); /* smartListBox loader size(width=height) */
    /* LED */
    --smart-led-default-width: var(--smart-editor-height); /* smartLed default width */
    --smart-led-default-height: var(--smart-editor-height); /* smartLed default height */
    /* List Menu */
    --smart-list-menu-default-width: var(--smart-box-width); /* smartListMenu default width */
    --smart-list-menu-default-height: var(--smart-box-height); /* smartListMenu default height */
    --smart-list-menu-filter-input-vertical-offset: 5px;
    --smart-list-menu-filter-input-horizontal-offset: 5px;
    /*Masked Text Box*/
    --smart-masked-text-box-default-width: var(--smart-editor-width); /* smartMasked default width */
    --smart-masked-text-box-default-height: var(--smart-editor-height); /* smartMasked default height */
    /* Menu */
    --smart-menu-default-width: var(--smart-bar-width); /* smartMenu default width */
    --smart-menu-default-height: var(--smart-bar-height); /* smartMenu default height */
    --smart-menu-vertical-default-width: calc(var(--smart-bar-width) / 2); /* vertical and context smartMenu default width */
    --smart-menu-vertical-default-height: var(--smart-bar-width); /* vertical and context smartMenu 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 Text Box */
    --smart-multiline-text-box-default-width: var(--smart-editor-width);
    --smart-multiline-text-box-default-height: calc(10 * var(--smart-editor-height));
    /* Multi Split Button*/
    --smart-multi-split-button-default-width: var(--smart-editor-width); /* smartDropDownList, smartComboBox default width */
    --smart-multi-split-button-default-height: var(--smart-editor-height); /* smartDropDownList, smartComboBox default height */
    /* Number format Panel */
    --smart-number-format-panel-selected-format-width: 1fr;
    --smart-number-format-panel-apply-button-width: 125px;
    --smart-number-format-panel-header-holder-offset: 10px;
    --smart-number-format-panel-border-size: 1px;
    --smart-number-format-panel-border-color: #ccc;
    --smart-number-format-panel-border-radius: 4px;
    --smart-number-format-panel-sample-container-vertical-offset: 15px;
    --smart-number-format-panel-sample-container-horizontal-offset: 5px;
    --smart-number-format-panel-formats-list-margin-top: 15px;
    --smart-number-format-panel-formats-list-max-height: 400px;
    --smart-number-format-panel-formats-item-padding: 12px;
    --smart-number-format-panel-selected-format-padding-left: 5px;
    --smart-number-format-panel-selected-format-padding-top: 3px;
    --smart-number-format-panel-selected-format-padding-bottom: 3px;
    --smart-number-format-panel-header-input-width: 100%;
    --smart-number-format-panel-formats-item-left-padding: 10px;
    --smart-number-format-panel-formats-item-hover-background: #f1f1f1;
    --smart-number-format-panel-formats-item-example-format-color: #777;
    /* Numeric Text Box */
    --smart-numeric-text-box-default-width: var(--smart-editor-width); /* smartNumericTextBox default width */
    --smart-numeric-text-box-default-height: var(--smart-editor-height); /* smartNumericTextBox default height */
    --smart-numeric-text-box-default-radix-display-width: 12%; /* smartNumericTextBox default radix display button width*/
    --smart-numeric-text-box-default-unit-display-width: var(--smart-editor-addon-width); /* smartNumericTextBox default unit display width*/
    --smart-numeric-text-box-text-align: right;
    /* Path */
    --smart-path-default-width: var(--smart-editor-width);
    --smart-path-default-height: var(--smart-editor-height);
    --smart-path-drop-down-width: auto;
    --smart-path-drop-down-height: auto;
    --smart-path-button-gap: 5px;
    --smart-path-text-align: start;
    /* Power Button */
    --smart-power-button-default-width: var(--smart-editor-height); /* smartPowerButton default width */
    --smart-power-button-default-height: var(--smart-editor-height); /* smartPowerButton default height */
    /* Progress Bar */
    --smart-progress-bar-default-width: var(--smart-editor-width); /* smartProgressBar default width */
    --smart-progress-bar-default-height: var(--smart-editor-height); /* smartProgressBar 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;
    --smart-query-builder-default-height: auto;
    --smart-query-builder-min-width: 100px;
    --smart-query-builder-content-padding: 5px;
    --smart-query-builder-editor-width: 125px;
    /* Radio Button */
    --smart-radio-button-default-size: calc(1px + 1/2 * var(--smart-editor-height)); /* Default size for the radio button. */
    /* Sortable */
    --smart-sortable-handle-size: 25px;
    /* Splitter */
    --smart-splitter-default-width: var(--smart-box-width); /* smartSplitter default width */
    --smart-splitter-default-height: var(--smart-box-height); /* smartSplitter 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;
    --smart-splitter-item-content-padding: 0;
    /* Switch Button */
    --smart-switch-button-default-width: calc(var(--smart-editor-height) + 10px);
    --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 */
    --smart-switch-button-label-animation-offset: 100px; /* smartSwitchButton animation offset used for dragging animation. Calculated throught JS !*/
    --smart-switch-button-label-animation-offset-normal: var(--smart-switch-button-label-animation-offset); /* smartSwitchButton animation offset used for dragging animation, normal state/thumb released. Calculated throught JS ! */
    --smart-switch-button-label-animation-offset-inverse: 100px;
    /* Slider */
    --smart-slider-default-width: var(--smart-editor-width); /* smartSlider default width */
    --smart-slider-default-height: 35px; /* smartSlider default height*/
    --smart-slider-track-size: 1px; /* smartSlider track size. Horizontal track height = Vertical track width */
    --smart-slider-thumb-width: 20px; /* smartSlider thumb width*/
    --smart-slider-thumb-height: 20px; /* smartSlider thumb height*/
    --smart-slider-tooltip-width: 60px; /* smartSlider tooltip width */
    --smart-slider-tooltip-height: 30px; /* smartSlider tooltip height*/
    --smart-slider-spin-button-width: 30px; /* smartSlider spin buttons width*/
    --smart-slider-spin-button-height: 30px; /* smartSlider spin buttons height*/
    --smart-slider-tick-size: 10px; /* smartSlider tick size. Horizontal Slider tick height = Vertical Slider tick width.*/
    --smart-slider-minor-tick-size: 5px; /* smartSlider minor tick size. Horizontal Slider minor tick height = Vertical Slider minor tick width.*/
    --smart-slider-thumb-border-top-right-radius: 15px;
    --smart-slider-thumb-border-top-left-radius: 15px;
    --smart-slider-thumb-border-bottom-left-radius: 15px;
    --smart-slider-thumb-border-bottom-right-radius: 15px;
    /* 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); /* smartSlider default width */
    --smart-scroll-bar-default-height: var(--smart-scroll-bar-size); /* smartSlider default height*/
    --smart-scroll-bar-background: #F1F1F1;
    --smart-scroll-bar-border: #F1F1F1;
    --smart-scroll-bar-thumb-border-top-right-radius: 0px;
    --smart-scroll-bar-thumb-border-top-left-radius: 0px;
    --smart-scroll-bar-thumb-border-bottom-left-radius: 0px;
    --smart-scroll-bar-thumb-border-bottom-right-radius: 0px;
    --smart-scroll-bar-thumb-background: #C1C1C1;
    --smart-scroll-bar-thumb-border: #C1C1C1;
    --smart-scroll-bar-thumb-background-hover: #A8A8A8;
    --smart-scroll-bar-thumb-border-hover: #A8A8A8;
    --smart-scroll-bar-thumb-background-active: #787878;
    --smart-scroll-bar-thumb-border-active: #787878;
    --smart-scroll-bar-button-background: #F1F1F1;
    --smart-scroll-bar-button-border: #F1F1F1;
    --smart-scroll-bar-button-color: #505050;
    --smart-scroll-bar-button-background-hover: #D2D2D2;
    --smart-scroll-bar-button-border-hover: #F1F1F1;
    --smart-scroll-bar-button-color-hover: #505050;
    --smart-scroll-bar-button-background-active: #787878;
    --smart-scroll-bar-button-border-active: #F1F1F1;
    --smart-scroll-bar-button-color-active: #fff;
    /* Tank */
    --smart-tank-default-width: var(--smart-editor-width); /* smartTank default width */
    --smart-tank-default-height: calc(10 * var(--smart-editor-height)); /* smartTank default height*/
    --smart-tank-scale-size: 105px; /* smartTank scale size*/
    --smart-tank-thumb-width: 25px; /* smartTank thumb width*/
    --smart-tank-thumb-height: var(--smart-tank-thumb-width); /* smartTank thumb height*/
    --smart-tank-tooltip-width: 80px; /* smartTank tooltip width*/
    --smart-tank-tooltip-height: 30px; /* smartTank thumb height*/
    --smart-tank-tick-size: 10px; /* smartTank tick size. Horizontal Tank tick height = Vertical Tank tick width. */
    --smart-tank-minor-tick-size: 5px; /* smartTank minor tick size. */
    --smart-tank-minimum-track-size: 6px; /* smartTank horizontal track min-height, vertical track min-width */
    /* Tabs */
    --smart-tabs-header-button-size: 20px; /* smartTabs header buttons size. Horizontal Tabs header buttons width = Vertical Tab header buttons height. */
    --smart-tabs-animation-duration: 0.5s; /* smartTabs animation duration */
    --smart-tabs-default-width: var(--smart-box-width); /* smartTabs default width */
    --smart-tabs-default-height: var(--smart-box-height); /* smartTabs default height */
    --smart-tabs-header-padding: 0px;
    --smart-tabs-header-offset: 0px;
    --smart-tab-item-padding: 12px 16px;
    --smart-tab-item-offset: 5px;
    --smart-tab-item-initial-offset: 5px;
    --smart-tab-item-text-transform: uppercase;
    /* 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-translate: 0;
    --smart-tooltip-padding: 4px 8px;
    /* Toast */
    --smart-toast-item-icon: '';
    --smart-toast-container-default-width: var(--smart-bar-width); /* Default width of the jaxToast's containers, positioned top-left, top-right, bottom-left, bottom-right */
    --smart-toast-header-height: 20px;
    --smart-tooltip-content-shadow: none;
    --smart-toast-info-background: #5bc0de;
    --smart-toast-info-color: #fff;
    --smart-toast-warning-background: #f0ad4e;
    --smart-toast-warning-color: #fff;
    --smart-toast-error-background: var(--smart-error);
    --smart-toast-error-color: var(--smart-error-color);
    --smart-toast-success-background: var(--smart-success);
    --smart-toast-success-color: var(--smart-success-color);
    /* Tree */
    --smart-tree-default-width: var(--smart-box-width); /* smartTree default width */
    --smart-tree-default-height: var(--smart-box-height); /* smartTree default height */
    --smart-tree-scroll-button-size: 20px; /* smartTree scroll buttons size */
    --smart-tree-lines-style: dashed;
    --smart-tree-indent: 16px;
    --smart-tree-lines-color: var(--smart-border);
    --smart-tree-lines-width: 1px;
    --smart-tree-item-label-height: 36px;
    --smart-tree-item-padding: 9px 12px;
    --smart-tree-item-vertical-offset: 3px;
    --smart-tree-item-horizontal-offset: 3px;
    /* Text Box */
    --smart-text-box-default-width: var(--smart-editor-width);
    --smart-text-box-default-height: var(--smart-editor-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);
    /*Password Text Box*/
    --smart-password-text-box-default-width: var(--smart-editor-width); /* smartMasked default width */
    --smart-password-text-box-default-height: var(--smart-editor-height); /* smartMasked 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;
    --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;
    --smart-pager-input-width: 50px;
    /*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;
    /*Window*/
    --smart-window-default-height: var(--smart-box-height); /* smartWindow default height */
    --smart-window-default-width: var(--smart-box-width); /* smartWindow default width */
    --smart-window-header-height: var(--smart-bar-height); /* smartWindow header height */
    --smart-window-footer-height: var(--smart-bar-height); /* smartWindow footer height */
    --smart-window-min-width: 250px; /* smartWindow header width */
    --smart-window-header-footer-padding: 10px;
    /*Elevations*/
    --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);
    --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);
    --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);
    --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);
    --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);
    --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);
    --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);
    --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);
    --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;
}

[theme="dark"] {
    --smart-background: #242424; /* The theme background color. The background color appears behind scrollable content.*/
    --smart-background-color: #fff; /* Text color on top of a background background */
    --smart-surface: #333; /* The theme surface color. Surface colors affect surfaces of components, such as cards, sheets, and menus. */
    --smart-surface-color: #fff; /* 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: #464646; /* The theme background border color */
    --smart-editor-selection: var(--smart-primary);
    --smart-editor-selection-color: var(--smart-primary-color);
    --smart-ui-state-hover: #444;
    --smart-ui-state-color-hover: #fff;
    --smart-ui-state-border-hover: #444;
    --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: #555;
    --smart-ui-state-color-focus: #fff;
    --smart-ui-state-border-focus: #555;
    --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);
    --smart-alternation-index0-color: var(--smart-surface-color); /* Alternation color for index0 */
    --smart-alternation-index0-border: var(--smart-surface); /* Alternation border color for index0 */
    --smart-alternation-index0-background: var(--smart-surface); /* 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-scroll-bar-background: #3E3E42;
    --smart-scroll-bar-border: #3E3E42;
    --smart-scroll-bar-thumb-background: #686868;
    --smart-scroll-bar-thumb-border: #686868;
    --smart-scroll-bar-thumb-background-hover: #9E9E9E;
    --smart-scroll-bar-thumb-border-hover: #9E9E9E;
    --smart-scroll-bar-thumb-background-active: #444;
    --smart-scroll-bar-thumb-border-active: #444;
    --smart-scroll-bar-button-background: #3E3E42;
    --smart-scroll-bar-button-border: #3E3E42;
    --smart-scroll-bar-button-color: #999999;
    --smart-scroll-bar-button-background-hover: #3E3E42;
    --smart-scroll-bar-button-border-hover: #3E3E42;
    --smart-scroll-bar-button-color-hover: var(--smart-primary);
    --smart-scroll-bar-button-background-active: #3E3E42;
    --smart-scroll-bar-button-border-active: #3E3E42;
    --smart-scroll-bar-button-color-active: var(--smart-primary);
}