smart-webcomponents/source/styles/default/smart.variables.css

Web Components & Custom Elements for Professional Web Applications

/* CSS variables */

:root {
    --smart-primary-rgb: 0, 92, 153;
    /* The r, g, and b components of the theme primary color */
    --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-rgb: 45, 45, 48;
    /* The r, g, and b components of the theme secondary color */
    --smart-secondary: rgb(var(--smart-secondary-rgb));
    /* The theme secondary color */
    --smart-secondary-color: #ffffff;
    /* Text color on top of a secondary background */

    --smart-error-rgb: 176, 0, 32;
    /* The theme error color */
    --smart-error: rgb(var(--smart-error-rgb));
    /* The theme error color */
    --smart-error-color: #ffffff;
    /* Text color on top of a error background */

    --smart-success-rgb: 139, 195, 74;
    /* The r, g, and b components of the theme success color */
    --smart-success: rgb(var(--smart-success-rgb));
    /* The theme success color */
    --smart-success-color: #ffffff;
    /* Text color on top of a success background */

    --smart-info-rgb: 92, 192, 222;
    /* The r, g, and b components of the theme info color */
    --smart-info: rgb(var(--smart-info-rgb));
    /* The theme info color */
    --smart-info-color: #fff;
    /* Text color on top of a info background */

    --smart-warning-rgb: 240, 173, 78;
    /* The r, g, and b components of the theme warning color */
    --smart-warning: rgb(var(--smart-warning-rgb));
    /* The theme warning color */
    --smart-warning-color: #fff;
    /* Text color on top of a warning background */

    --smart-light-rgb: 255, 255, 255;
    /* The r, g, and b components of the theme light color */
    --smart-light: rgb(var(--smart-light-rgb));
    /* The theme light color */
    --smart-light-color: #222222;
    /* Text color on top of a light background */

    --smart-dark-rgb: 34, 34, 34;
    /* The r, g, and b components of the theme dark color */
    --smart-dark: rgb(var(--smart-dark-rgb));
    /* The theme dark color */
    --smart-dark-color: #ffffff;
    /* Text color on top of a dark 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;
    /* Hover state background. */
    --smart-ui-state-color-hover: #333;
    /* Text color, when UI Element's state is 'hover'. */
    --smart-ui-state-border-hover: var(--smart-ui-state-hover);
    /* Border color, when UI Element's state is 'hover'. */
    --smart-ui-state-active: var(--smart-primary);
    /* Active state background. */
    --smart-ui-state-color-active: var(--smart-primary-color);
    /* Text color, when UI Element's state is 'active'. */
    --smart-ui-state-border-active: var(--smart-primary);
    /* Border color, when UI Element's state is 'active'. */
    --smart-ui-state-focus: #e2e0e0;
    /* Focus state background. */
    --smart-ui-state-color-focus: #333;
    /* Text color, when UI Element's state is 'focus'. */
    --smart-ui-state-border-focus: var(--smart-ui-state-focus);
    /* Border color, when UI Element's state is 'focus'. */
    --smart-ui-state-selected: rgba(var(--smart-primary-rgb), .1);
    /* Selected state background. */
    --smart-ui-state-color-selected: var(--smart-primary);
    /* Text color, when UI Element's state is 'selected'. */
    --smart-ui-state-border-selected: rgba(var(--smart-primary-rgb), .1);
    /* Border color, when UI Element's state is 'selected'. */
    --smart-item-border-width: 1px;
    /* Theme border-width */
    --smart-item-border-radius: var(--smart-border-radius);
    /* Border radius of items. */
    --smart-item-border-top-left-radius: var(--smart-border-radius);
    /* Border top-left radius of items. */
    --smart-item-border-top-right-radius: var(--smart-border-radius);
    /* Border top-right radius of items. */
    --smart-item-border-bottom-left-radius: var(--smart-border-radius);
    /* Border bottom-left radius of items. */
    --smart-item-border-bottom-right-radius: var(--smart-border-radius);
    /* Border bottom-right radius of items. */
    --smart-font-size: 14px;
    /* Theme font-size */
    --smart-font-weight: inherit;
    /* Theme font-weight */
    --smart-font-style: inherit;
    /* Theme font-style */
    --smart-font-family: Roboto, "Helvetica Neue", sans-serif;
    /* Theme font-family */
    --smart-font-family-icon: smart-icons;
    /* Theme icons font-family. */
    --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');
    /* The source of the theme icons font-family */
    --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-border-rgb: 244, 224, 224;
    /* The theme background border color */
    --smart-outline: #b2b2b2;
    /* The theme active element outline color */
    --smart-editor-selection: var(--smart-primary);
    /* Background color of the selected text. */
    --smart-editor-selection-color: var(--smart-primary-color);
    /* Color of the selected text. */
    --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;
    /* 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 */
    --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 timeline icon */
    --smart-icon-timeline: '\E8A4';
    /* Code of scheduler icon */
    --smart-icon-scheduler: '\E8A5';
    /* Code of like icon */
    --smart-icon-like: '\F164';
     /* Code of heart icon */
     --smart-icon-heart: '\E84E';
     /* Code of like icon */
     --smart-icon-flag: '\E850';
     /* Code of music */
     --smart-icon-music: '\E851';
  
    /* 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;
    /* 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);
    /* 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;
    /* smartBreadcrumb default width */
    --smart-breadcrumb-default-height: auto;
    /* smartBreadcrumb 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 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;
    /* 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. */
    /* Button - Flat */
    --smart-button-flat-color: var(--smart-background-color);
    /* The color of the flat button. */
    /* Button - Outlined */
    --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;
    --smart-button-group-default-height: auto;
    /* 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 */
    /* CardView */
    --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 */
    /* 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;
    /* smartColorPanel palette size */
    --smart-color-panel-grid-mode-item-size: 20px;
    /* smartColorPanel item size */
    /*was 40px*/
    --smart-color-panel-grid-mode-column-count: 8;
    /* smartColorPanel column count */
    --smart-color-panel-grid-mode-columns-gap: 1px;
    /* smartColorPanel column gap size */
    --smart-color-panel-brightness: 0;
    /* smartColorPanel brightness */
    --smart-color-panel-default-mode-sections-gap: 8px;
    /* smartColorPanel gap size in default mode */
    --smart-color-panel-palette-width: var(--smart-color-panel-palette-size);
    /* smartColorPanel palette width */
    --smart-color-panel-palette-height: var(--smart-color-panel-palette-size);
    /* smartColorPanel palette height */
    --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;
    /* 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). */
    /* 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;
    /* 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 */
    /*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;
    /* 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;
    /* smartDropDownButton default width */
    --smart-drop-down-button-default-height: var(--smart-editor-height);
    /* smartDropDownButton default height */
    --smart-drop-down-button-drop-down-width: var(--smart-editor-drop-down-width);
    /* smartDropDownButton drop down width */
    --smart-drop-down-button-drop-down-height: var(--smart-editor-drop-down-height);
    /* smartDropDownButton drop down height */
    /* Editor */
    --smart-editor-default-width: 100%;
    /* smartEditor default width */
    --smart-editor-default-height: 600px;
    /* smartEditor default height */
    --smart-editor-input-min-height: 100px;
    /* smartEditor input min height */
    --smart-editor-padding: 15px;
    /* smartEditor padding */
    --smart-editor-toolbar-item-margin: 5px;
    /* smartEditor toolbar item margin */
    --smart-editor-toolbar-button-width: 30px;
    /* smartEditor toolbar button width */
    --smart-editor-toolbar-delimiter-width: 5px;
    /* smartEditor toolbar delimiter items width */
    --smart-editor-toolbar-drop-down-width-large: 100px;
    /* smartEditor wider drop down toolbar items like - format, fontname, etc. */
    --smart-editor-toolbar-drop-down-width-small: 65px;
    /* smartEditor all drop down toolbar items default width */
    --smart-editor-window-header-height: var(--smart-scheduler-window-header-height);
    /* smartEditor Dialog Window header height */
    --smart-editor-window-footer-height: var(--smart-scheduler-window-footer-height);
    /* smartEditor Dialog Window footer height */
    --smart-editor-inline-toolbar-max-width: 80vw;
    /* smartEditor Inline toolbar max width */
    --smart-editor-table-column-width: initial;
    /* smartEditor table column default width */
    --smart-editor-table-cell-min-height: 20px;
    /* smartEditor table cell defaut min height */
    --smart-editor-table-cell-min-width: var(--smart-editor-table-cell-min-height);
    /* smartEditor table cell default min width */
    --smart-editor-char-counter-offset: 30px;
    /* smartEditor char count offset from the edges of the element */
    --smart-editor-toolbar-item-height: 30px;
    /* smartEditor default toolbar item height */
    --smart-editor-toolbar-item-border-radius: var(--smart-border-radius);
    /* smartEditor toolbar item border radius */
    --smart-editor-toolbar-height: calc(var(--smart-editor-toolbar-item-height) + 2 * var(--smart-editor-toolbar-item-margin));
    /* smartEditor toolbar height */
    --smart-editor-highlight: var(--smart-primary);
    /* smartEditor Find and Replace highlight color */
    --smart-editor-highlight-color: var(--smart-primary-color);
    /* smartEditor highligh text color */
    --smart-editor-search-bar-offset: 5px;
    /* smartEditor search bar offset */
    --smart-editor-search-bar-padding: 5px;
    /* smartEditor search bar padding */
    /* 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);
    /* smartFilterPanel top-right border radius */
    --smart-filter-panel-border-top-left-radius: var(--smart-border-radius);
    /* smartFilterPanel top-left border radius */
    --smart-filter-panel-border-bottom-left-radius: var(--smart-border-radius);
    /* smartFilterPanel bottom-left border radius */
    --smart-filter-panel-border-bottom-right-radius: var(--smart-border-radius);
    /* smartFilterPanel bottom-right border radius */
    --smart-filter-panel-border-width: var(--smart-border-width);
    /* smartFilterPanel border width */
    --smart-filter-panel-border: var(--smart-border);
    /* smartFilterPanel border color */
    --smart-filter-panel-background: var(--smart-background);
    /* smartFilterPanel background color */
    --smart-filter-panel-color: var(--smart-background-color);
    /* smartFilterPanel text color */
    --smart-filter-panel-vertical-offset: 10px;
    /* Vertical offset between smartFilterPanel 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 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 ...";
    /* 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);
    /* */
    --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;
    /* #38a238*/
    /* 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);
    /* #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;
    /* Determines the background color of the tasks(rows) inside the Timeline. */
    --smart-gantt-chart-timeline-task-connection-feedback-color: #e6510a;
    /* orange */
    /* 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: 35px;
    /* 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 foote