/* 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-cancel: '\e80d'; /* Code of cancel icon */ --smart-icon-close: '\e80d'; /* Code of close icon */ --smart-icon-cancel-circled: '\e80e'; /* 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-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 */ /* 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 footer of the popup windows insinde the element. */ --smart-gantt-chart-header-placeholder: ' - '; /* Placeholder for thea Header sections when there're no items */ --smart-gantt-chart-progress-label-padding: 0 10px 0 10px; /* Task progress label padding */ --smart-gantt-chart-filter-row-height: 30px; /* Sets a box shadow to the Task Timeline header */ --smart-gantt-chart-task-fill-border-radius: 0; /* Sets the default border radius for the Timeline task bars */ --smart-gantt-chart-segment-link-color: var(--smart-gantt-chart-task-color); /* Determines the color of the link between the task segments */ --smart-gantt-chart-segment-link-size: var(--smart-border-width); /* Determines the height of the link between the task segments */ --smart-gantt-chart-date-marker-color: var(--smart-primary); /* Determines the color of the date markers */ --smart-gantt-chart-date-marker-height: 25px; /* Determines the background of the date markers */ --smart-gantt-chart-date-marker-width: var(--smart-border-width); /* Determines the width of the date markers */ --smart-gantt-chart-date-marker-background: var(--smart-primary); /* Determines the background of the date markers */ --smart-gantt-chart-date-marker-color: var(--smart-primary-color); /* Determines the background of the date markers */ --smart-gantt-chart-date-marker-v-offset: 15%; /* Determines the vertical position of the date markers */ --smart-gantt-chart-date-marker-h-offset: 10px; /* Determines the horizontal offset of the date markers */ --smart-gantt-chart-indicator-icon: initial; /* Determines the task indicator icon */ --smart-gantt-chart-deadline-icon: var(--smart-icon-attention-circled); /* Determines the icon for the task deadline */ --smart-gantt-chart-deadline-color: var(--smart-error); /* Determines the color for the task deadline icon */ --smart-gantt-chart-baseline-proportion: 2; /* Determines the proportion of the baseline compared to the task height */ --smart-gantt-chart-baseline-background: rgba(166, 205, 87, .5); /* Determines the background color of the task baseline */ --smart-gantt-chart-progress-label-width: 60px; /* Determines the task progress label width */ --smart-gantt-chart-current-time-indicator-size: 1px; /* Determines the current time indicator width */ --smart-gantt-chart-current-time-indicator-background: var(--smart-primary); /* Determines the current time indicator background */ --smart-gantt-chart-current-time-indicator-arrow-size: 7px; /* Determines the arrow size of the curernt time indicator */ --smart-gantt-chart-current-time-indicator-header-size: 2px; /* Determines the current time indicator size inside the timeline header cell */ --smart-gantt-chart-shader-background: rgba(var(--smart-border-rgb), .5); /* Determines the current time shader background color */ /* Gauge */ --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); /* Track's border color */ --smart-gauge-track-background: var(--smart-background); /* Track's background color */ --smart-gauge-needle-background: var(--smart-primary); /* Needle's background color */ --smart-gauge-label-fill-state: initial; /* Fill color of labels */ --smart-gauge-label-stroke: initial; /* Stroke color of labels */ /* Grid */ --smart-grid-default-width: 800px; /* Used to set the default width. */ --smart-grid-default-height: 400px; /* Used to set the default height. */ --smart-grid-footer-height: var(--smart-bar-height); /* Sets footer height. */ --smart-grid-header-height: var(--smart-bar-height); /* Sets header height. */ --smart-grid-group-header-height: var(--smart-bar-height); /* Sets group header height. */ --smart-grid-row-height: 30px; /* Sets rows height. */ --smart-grid-column-header-height: var(--smart-bar-height); /* Sets columns height. */ --smart-grid-filter-footer-height: var(--smart-bar-height); /* Sets filter row height. */ --smart-grid-aggregate-footer-height: var(--smart-bar-height); /* Sets aggregates height. */ --smart-grid-header-background-freeze: var(--smart-surface); /* Sets row/column header background, when row/column is frozen. */ --smart-grid-header-color-freeze: var(--smart-surface-color); /* Sets row/column header text color, when row/column is frozen. */ --smart-grid-column-menu-width: 200px; /* Sets column menu's width. */ --smart-grid-column-menu-height: auto; /* Sets column menu's height. */ --smart-grid-column-buttons-width: 23px; /* Sets column buttons width. */ --smart-grid-cell-color-freeze: var(--smart-surface-color); /* Sets text color of cells, when row/column is frozen. */ --smart-grid-cell-background-freeze: var(--smart-surface); /* Sets background color of cells, when row/column is frozen */ --smart-grid-cell-color-delete: #333; /* Sets text color of cells, when row is deleted. */ --smart-grid-cell-background-delete: #FFDCDC; /* Sets background color of cells, when row is deleted. */ --smart-grid-cell-color-update: #333; /* Sets text color of cells, when cell is updated.. */ --smart-grid-cell-background-update: #D7F9C7; /* Sets background color of cells, when cell is updated.. */ --smart-grid-cell-color-add: #333; /* Sets text color of cells, when row is added.. */ --smart-grid-cell-background-add: #FED59B; /* Sets background color of cells, when row is deleted.. */ --smart-grid-cell-color-unbound: var(--smart-surface-color); /* Sets text color of cells, when row is unbound. */ --smart-grid-cell-background-unbound: var(--smart-surface); /* Sets background color of cells, when row is unbound. */ --smart-grid-cell-color-sort: var(--smart-surface-color); /* Sets text color of cells, when column is sorted. */ --smart-grid-cell-background-sort: #FEF3dd; /* Sets background color of cells, when column is sorted. */ --smart-grid-cell-color-filter: var(--smart-surface-color); /* Sets text color of cells, when column is filtered. */ --smart-grid-cell-background-filter: #E8F2DB; /* Sets background color of cells, when column is filtered. */ --smart-grid-group-row-vertical-offset: 5; /* Sets grouped rows vertical offset. */ --smart-grid-group-row-horizontal-offset: 1; /* Sets grouped rows horizontal offset. */ --smart-grid-template-columns: none; /* Sets Template columns. */ --smart-grid-column-gap: 0px; /* Sets the element's grid-column-gap (related to CSS Grid) */ --smart-grid-row-gap: 0px; /* Sets the element's grid-row-gap (related to CSS Grid) */ --smart-grid-freeze-splitter-size: 1px; /* Sets frozen split bar size. */ --smart-grid-resize-line-size: 1px; /* Sets resize line size. */ /* Grid Layout */ --smart-grid-layout-col-gap: 10px; --smart-grid-layout-row-gap: 10px; --smart-grid-layout-width: 100%; --smart-grid-layout-rows: none; /* Group Panel, Sort Panel, Column Panel, Multi Column Filter Panel, Formatting Panel */ --smart-grid-panel-default-width: 450px; /* Default width of the smartGroupPanel/smartSortPanel/smartColumnPanel/smartMultiColumnFilterPanel */ --smart-grid-panel-default-height: auto; /* Default height of the smartGroupPanel/smartSortPanel/smartColumnPanel/smartMultiColumnFilterPanel */ --smart-grid-panel-padding: 10px; /* padding of the smartGroupPanel/smartSortPanel/smartColumnPanel/smartMultiColumnFilterPanel */ --smart-grid-panel-vertical-offset: 10px; /* Vertical offset between smartGroupPanel/smartSortPanel/smartColumnPanel/smartMultiColumnFilterPanel items */ --smart-grid-panel-item-height: 30px; /* height of smartGroupPanel/smartSortPanel/smartColumnPanel/smartMultiColumnFilterPanel items */ --smart-column-panel-drop-down-height: 350px; /* height of drop-downs */ --smart-multi-column-filter-panel-template-columns: 15px 60px 2fr 3fr 3fr; /* smartMultiColumnFilterPanel grid-template-columns */ --smart-formatting-panel-default-width: 600px; /* Default width of the smartFormattingPanel */ --smart-formatting-panel-row-height: 30px; /* Height of rows in smartFormattingPanel */ --smart-formatting-panel-add-new-button-size: 40px; /* Size of "Add new" (+) button in smartFormattingPanel */ --smart-formatting-panel-popup-width: 300px; /* Width of smartFormattingPanel's pop-up */ --smart-formatting-panel-color-box-height: 20px; /* Height of color boxes in smartFormattingPanel's pop-up */ /* Kanban */ --smart-kanban-default-width: 1200px; /* Default width of Kanban */ --smart-kanban-default-height: 500px; /* Default height of Kanban */ --smart-kanban-header-size: 35px; /* Header size of Kanban (applies to header and column headers) */ --smart-kanban-task-min-width: 150px; /* Min width for Kanban tasks in columns with horizontal orientation */ --smart-kanban-task-min-height: 80px; /* Kanban task min height */ --smart-kanban-text-max-height: 200px; /* Kanban task text part max height */ --smart-kanban-user-icon-size: 30px; /* Kanban user icon size */ --smart-kanban-user-list-width: 150px; /* Kanban user list width */ --smart-kanban-user-list-max-height: 500px; /* Kanban user list max height */ --smart-kanban-comments-list-width: 350px; /* Kanban comments list width */ --smart-kanban-comments-list-height: auto; /* Kanban comments list height */ --smart-kanban-new-comment-height: 50px; /* Height of new comment section */ --smart-kanban-new-comment-height-expanded: 175px; /* Expanded height of new comment section */ --smart-kanban-send-button-height: 30px; /* Height of Send button in new comment section */ --smart-kanban-color-band-width: 3px; /* Kanban color band width (i.e. left border of tasks) */ --smart-kanban-add-new-column-width: 1fr; /* Kanban "+ New status" column width */ /* ListBox */ --smart-list-box-default-width: var(--smart-editor-width); /* smartListBox default width */ --smart-list-box-default-height: var(--smart-editor-width); /* smartListBox default height */ --smart-list-item-group-header-text-transform: uppercase; /* smartListBox item group header text transform */ --smart-list-item-horizontal-offset: 3px; /* Defines list item's horizontal offset. */ --smart-list-item-vertical-offset: 3px; /* Defines list item's vertical offset. */ --smart-list-item-height: 36px; /* smartListBox item height */ --smart-list-item-check-box-radius: 2px; /* smartListBox checkbox radius */ --smart-list-item-label-padding: 0; /* smartListBox item label padding */ --smart-list-item-label-border-radius: 0; /* smartListBox item label border radius */ --smart-list-item-padding: 9px 12px; /* smartListBox item padding */ /* 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; /* Defines vertical offset of the ListMenu's filter input. */ --smart-list-menu-filter-input-horizontal-offset: 5px; /* Defines horizontal offset of the ListMenu's filter input. */ /*Masked Text Box*/ --smart-masked-text-box-default-width: var(--smart-editor-width); /* 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); /* Default width of the element. */ --smart-multiline-text-box-default-height: calc(10 * var(--smart-editor-height)); /* Default height of the element. */ /* Multi Split Button*/ --smart-multi-split-button-default-width: var(--smart-editor-width); /* Element's default width. */ --smart-multi-split-button-default-height: var(--smart-editor-height); /* Element's 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; /* smartNumericTextBox input text align */ /* Path */ --smart-path-default-width: var(--smart-editor-width); /* smartPath default width */ --smart-path-default-height: var(--smart-editor-height); /* smartPath default height */ --smart-path-drop-down-width: auto; /* smartPath drop down width */ --smart-path-drop-down-height: auto; /* smartPath drop down height */ --smart-path-button-gap: 5px; /* smartPath button gap */ --smart-path-text-align: start; /* smartPath text align */ /* Power Button */ --smart-power-button-default-width: var(--smart-editor-height); /* 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; /* Default width of QueryBuilder. */ --smart-query-builder-default-height: auto; /* Default height of QueryBuilder. */ --smart-query-builder-min-width: 100px; /* Minimum width of QueryBuilder. */ --smart-query-builder-content-padding: 5px; /* Padding of QueryBuilder. */ --smart-query-builder-editor-width: 125px; /* Width of editors in QueryBuilder. */ /* Radio Button */ --smart-radio-button-default-size: calc(1px + 1/2 * var(--smart-editor-height)); /* Default size for the radio button. */ /* Sortable */ --smart-sortable-handle-size: 25px; /* smartSortable handle size */ /* 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; /* Splitter item padding */ --smart-splitter-item-content-padding: 0; /* Splitter item content padding */ --smart-splitter-item-size: auto; /* The default size of the Splitter Items */ /* Switch Button */ --smart-switch-button-default-width: calc(var(--smart-editor-height) + 10px); /* Default width of the SwitchButton. */ --smart-switch-button-default-height: var(--smart-editor-height); /* smartSwitchButton default height */ --smart-switch-button-thumb-size: calc(var(--smart-switch-button-default-height) - 8px); /* smartSwitchButton thumb size */ /* Slider */ --smart-slider-default-width: var(--smart-editor-width); /* 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; /* Top-right border radius of smartSlider thumb */ --smart-slider-thumb-border-top-left-radius: 15px; /* Top-left border radius of smartSlider thumb */ --smart-slider-thumb-border-bottom-left-radius: 15px; /* Bottom-left border radius of smartSlider thumb */ --smart-slider-thumb-border-bottom-right-radius: 15px; /* Bottom-right border radius of smartSlider thumb */ /* ScrollBar */ --smart-scroll-button-size: 16px; /* smartScrollBar buttons size. Horizontal ScrollBar button width = Vertical ScrollBar button height. ScrollBar track is calculated defaultd on this value. */ --smart-scroll-bar-size: 18px; /* Default scrollbar size */ --smart-scroll-bar-default-width: var(--smart-editor-width); /* ScrollBar's default width. */ --smart-scroll-bar-default-height: var(--smart-scroll-bar-size); /* ScrollBar's default height. */ --smart-scroll-bar-background: #F1F1F1; /* Default ScrollBar's background color. */ --smart-scroll-bar-track-background: var(--smart-scroll-bar-background); --smart-scroll-bar-border: #F1F1F1; /* The border color of the ScrollBar */ --smart-scroll-bar-thumb-border-top-right-radius: 0px; /* Default ScrollBar's top-right border radius. */ --smart-scroll-bar-thumb-border-top-left-radius: 0px; /* Default ScrollBar's top-left border radius. */ --smart-scroll-bar-thumb-border-bottom-left-radius: 0px; /* Default ScrollBar's bottom-left border radius. */ --smart-scroll-bar-thumb-border-bottom-right-radius: 0px; /* Default ScrollBar's bottom-right border radius. */ --smart-scroll-bar-thumb-background: #C1C1C1; /* The color of the ScrollBar's thumb. */ --smart-scroll-bar-thumb-border: transparent; /* The color of the ScrollBar's thumb border. */ --smart-scroll-bar-thumb-size: 100%; /* The size of the ScrollBar's thumb. */ --smart-scroll-bar-thumb-padding: 1px; /* The padding of the ScrollBar's thumb. */ --smart-scroll-bar-thumb-background-hover: #A8A8A8; /* The background color of the ScrollBar's thumb in hover state. */ --smart-scroll-bar-thumb-border-hover: transparent; /* The border color of the ScrollBar's thumb in hover state. */ --smart-scroll-bar-thumb-background-active: #787878; /* The background color of the ScrollBar's thumb in active state. */ --smart-scroll-bar-thumb-border-active: transparent; /* The border color of the ScrollBar's thumb in active state. */ --smart-scroll-bar-button-background: #F1F1F1; /* The background color of ScrollBar's navigation buttons. */ --smart-scroll-bar-button-border: #F1F1F1; /* The border color of ScrollBar's navigation buttons. */ --smart-scroll-bar-button-color: #505050; /* The color of ScrollBar's navigation buttons. */ --smart-scroll-bar-button-background-hover: #D2D2D2; /* The background color of the hovered ScrollBar's buttons. */ --smart-scroll-bar-button-border-hover: #F1F1F1; /* The border color of the hovered ScrollBar's buttons. */ --smart-scroll-bar-button-color-hover: #505050; /* The color of the hovered ScrollBar's buttons. */ --smart-scroll-bar-button-background-active: #787878; /* The background color of the ScrollBar's buttons in active state. */ --smart-scroll-bar-button-border-active: #F1F1F1; /* The border color of the ScrollBar's buttons in active state. */ --smart-scroll-bar-button-color-active: #fff; /* The color of the ScrollBar's buttons in active state. */ /* Table and PivotTable */ --smart-table-default-width: 100%; /* smartTable default width */ --smart-table-default-height: auto; /* smartTable default height */ --smart-table-header-footer-height: 56px; /* smartTable height of header and footer */ --smart-table-column-header-height: var(--smart-table-header-footer-height); /* smartTable height of column header */ --smart-table-row-height: 48px; /* smartTable height of rows */ --smart-table-cell-padding: 12px; /* smartTable cell padding */ --smart-table-row-detail-height: var(--smart-table-row-height); /* smartTable row detail height */ --smart-table-indent: 30px; /* smartTable hierarchical cell indent */ --smart-table-arrow-size: 16px; /* smartTable arrow size */ --smart-table-arrow-margin: 5px; /* smartTable arrow margin */ --smart-table-group-name-display: unset; /* smartTable group header name display */ --smart-table-group-count-display: unset; /* smartTable group header leaf count display */ --smart-pivot-table-cell-width: 200px; /* smartPivotTable cell width */ --smart-pivot-table-secondary-group-width: calc(1.25 * var(--smart-pivot-table-cell-width)); /* smartPivotTable row group width */ --smart-pivot-panel-width: 300px; /* smartPivotTable designer (smartPivotPanel) width */ --smart-pivot-panel-default-height: 800px; /* Standalone smartPivotPanel default height */ --smart-pivot-panel-tab-item-height: 150px; /* smartPivotTable designer (smartPivotPanel) tab item height */ --smart-pivot-panel-padding: 10px; /* smartPivotTable designer (smartPivotPanel) padding */ /* 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; /* Defines Tabs header padding. */ --smart-tabs-header-offset: 0px; /* Defines Tabs header offset. */ --smart-tab-item-padding: 12px 16px; /* Defines vertical and horizontal padding of tab items. */ --smart-tab-item-offset: 5px; /* Default tab item offset. */ --smart-tab-item-initial-offset: 5px; /* Initial tab item offset. */ --smart-tab-item-text-transform: uppercase; /* Tab item text capitalization. */ /* Time Picker */ --smart-time-picker-default-width: var(--smart-editor-width); /* smartTimePicker default width */ --smart-time-picker-default-height: calc(12 * var(--smart-editor-height)); /* smartTimePicker default height */ /* Tooltip */ --smart-tooltip-arrow-width: 6px; /* Default smartTooltip arrow width */ --smart-tooltip-arrow-color: var(--smart-secondary); /* smartTooltip arrow color */ --smart-tooltip-arrow-translate: 0; /* smartTooltip arrow translation (transformation) */ --smart-tooltip-padding: 4px 8px; /* smartTooltip padding */ --smart-tooltip-content-shadow: none; /* smartTooltip content box-shadow */ /* Toast */ --smart-toast-item-icon: ''; /* Code of toast item icon */ --smart-toast-container-default-width: var(--smart-bar-width); /* Default width of the smartToast's containers, positioned top-left, top-right, bottom-left, bottom-right */ --smart-toast-header-height: 20px; /* smartToast header height */ --smart-toast-info-background: var(--smart-info); /* Background color for type info */ --smart-toast-info-color: var(--smart-info-color); /* Text color for type info */ --smart-toast-warning-background: var(--smart-warning); /* Background color for type warning */ --smart-toast-warning-color: var(--smart-warning-color); /* Text color for type warning */ --smart-toast-error-background: var(--smart-error); /* Background color for type error */ --smart-toast-error-color: var(--smart-error-color); /* Text color for type error */ --smart-toast-success-background: var(--smart-success); /* Background color for type success */ --smart-toast-success-color: var(--smart-success-color); /* Text color for type success */ /* Tree */ --smart-tree-default-width: var(--smart-box-width); /* 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; /* Default style of the connecting tree lines. */ --smart-tree-indent: 16px; /* Defines the indent(hierarchy offset) size of the tree items. */ --smart-tree-lines-color: var(--smart-border); /* Defines the color of the connecting lines. */ --smart-tree-lines-width: 1px; /* Defines the width of the connecting lines. */ --smart-tree-item-label-height: 36px; /* Defines the height of tree item labels. */ --smart-tree-item-padding: 9px 12px; /* Defines the padding of the tree items. */ --smart-tree-item-vertical-offset: 3px; /* Defines the vertical offset of the tree items. */ --smart-tree-item-horizontal-offset: 3px; /* Defines the horizontal offset of the tree items. */ /* Text Box */ --smart-text-box-default-width: var(--smart-editor-width); /* Text Box default width. */ --smart-text-box-default-height: var(--smart-editor-height); /* Text Box default height. */ /* Validation panel */ --smart-validation-panel-description-width: 20%; --smart-validation-panel-content-width: 80%; /* Validation panel - appearance */ --smart-validation-panel-appearance-vertical-offset: 10px; --smart-validation-panel-appearance-reset-button-left-offset: 5px; --smart-validation-panel-appearance-textbox-vertical-offset: 5px; --smart-validation-panel-appearance-reset-button-color: var(--smart-primary); /* Validation panel - Criteria container */ --smart-validation-panel-criteria-row-margin-top: 10px; --smart-validation-panel-criteria-container-vertical-offset: 10px; --smart-validation-panel-criteria-container-input-width: 180px; --smart-validation-panel-criteria-container-input-horizontal-offset: 2px; --smart-validation-panel-criteria-container-textbox-width: 80px; --smart-validation-panel-criteria-container-textbox-horizontal-offset: 2px; --smart-validation-panel-criteria-container-text-between-inputs-offset: 5px; /* Validation panel - Invalid data */ --smart-validation-panel-invalid-data-vertical-offset: 10px; /* Validation panel - Footer */ --smart-validation-panel-footer-button-color: #188038; --smart-validation-panel-footer-button-background: white; --smart-validation-panel-footer-vertical-offset: 20px; --smart-validation-panel-footer-button-horizontal-offset: 5px; --smart-validation-panel-footer-remove-validation-button-color: var(--smart-validation-panel-footer-button-color); --smart-validation-panel-footer-cancel-button-color: var(--smart-validation-panel-footer-button-color); --smart-validation-panel-footer-save-button-color: var(--smart-validation-panel-footer-button-background); --smart-validation-panel-footer-save-button-background: var(--smart-validation-panel-footer-button-color); /*Password Text Box*/ --smart-password-text-box-default-width: var(--smart-editor-width); /* smartPasswordTextBox default width */ --smart-password-text-box-default-height: var(--smart-editor-height); /* smartPasswordTextBox default height */ /* Pager */ --smart-pager-default-width: var(--smart-bar-width); /* default pager width */ --smart-pager-default-height: var(--smart-bar-height); /* default pager height */ --smart-pager-button-width: 'auto'; /* default pager button width */ --smart-pager-button-height: 32px; /* default pager button height */ --smart-pager-page-size-selector-width: 60px; /* Default page size selector width. */ --smart-pager-page-index-selector-width: 32px; /* default pager item width */ --smart-pager-page-index-selector-height: 32px; /* default pager item height */ --smart-pager-page-index-ellipsis-selector-width: 32px; /* default pager ellipsis width */ --smart-pager-page-index-ellipsis-selector-height: 32px; /* default pager ellipsis width */ --smart-pager-page-index-selector-horizontal-offset: 8px; /* default pager ellipsis width */ --smart-pager-padding: 2px; /* Default padding. */ --smart-pager-input-width: 50px; /* Default width of the pager input. */ /*ScrollViewer*/ --smart-scroll-viewer-min-width: none; --smart-scroll-viewer-max-width: none; --smart-scroll-viewer-min-height: none; --smart-scroll-viewer-max-height: none; /*Scheduler*/ --smart-scheduler-default-height: auto; /* Sets the default height of the smartScheduler */ --smart-scheduler-default-width: auto; /* Sets the default width of the smartScheduler */ --smart-scheduler-item-size: auto; /* Sets the default size of the view selection items insinde the Timeline Header */ --smart-scheduler-timeline-cell-width: auto; /* Sets the default width of the cells inside the Timeline */ --smart-scheduler-timeline-cell-height: 50px; /* Sets the default height of the cells inside the Timeline */ --smart-scheduler-timeline-cell-min-width: 70px; /* Sets the default min-width of the cells inside the Timeline */ --smart-scheduler-timeline-cell-min-height: 35px; /* Sets the min-height of the cells inside the Timeline */ --smart-scheduler-header-height: 50px; /* Sets the height of the header */ --smart-scheduler-header-today-button-size: 70px; /* Scheduler header Today Button width */ --smart-scheduler-header-date-button-max-size: auto; /* Sets the size of the Header Date Selection Button*/ --smart-scheduler-header-navigation-button-size: 30px; /* Sets the size of the header buttons */ --smart-scheduler-footer-height: var(--smart-scheduler-header-height); /* The height of the footer */ --smart-scheduler-header-box-shadow: initial; /* Sets a Box shadow to the Timeline header */ --smart-scheduler-header-padding: 10px; /* Sets a the padding for the header/footer */ --smart-scheduler-timeline-header-cell-padding: 5px; /* Sets a the padding for the header/footer cells */ --smart-scheduler-header-menu-button-size: auto; /* Sets the size for the Header menu button */ --smart-scheduler-timeline-weekend-color: var(--smart-background); /* Sets the background color for the weekend cells */ --smart-scheduler-timeline-nonworking-color: var(--smart-gantt-chart-timeline-nonworking-color); /* Sets the background color for nonworking days/hours cells */ --smart-scheduler-timeline-all-day-label-font-weight: 600; /* Sets a the font-weight of the All day label */ --smart-scheduler-timeline-header-horizontal-cells-size: 40px; /* Sets a the horizontal header cells size */ --smart-scheduler-timeline-header-horizontal-label-padding: initial; /* Sets a the horizontal header cells label padding */ --smart-scheduler-timeline-header-horizontal-details-size: var(--smart-scheduler-timeline-header-horizontal-cells-size); /* Sets the size of the Horizontal Details Header */ --smart-scheduler-timeline-header-horizontal-group-size: var(--smart-scheduler-timeline-header-horizontal-cells-size); /* Sets the size of the Horizontal Group Header */ --smart-scheduler-timeline-header-vertical-cells-size: 100px; /* Sets the vertical header cell size */ --smart-scheduler-timeline-header-vertical-label-padding: initial; /* Sets the vertical header cells padding */ --smart-scheduler-timeline-header-vertical-details-size: var(--smart-scheduler-timeline-header-vertical-cells-size); /* Sets the size of the Vertical Details Header */ --smart-scheduler-timeline-header-vertical-group-size: var(--smart-scheduler-timeline-header-vertical-cells-size); /* Sets the size of the Vertical Group Header */ --smart-scheduler-timeline-header-all-day-cells-size: 75px; /* Sets the All Day View height */ --smart-scheduler-timeline-group-separator-background: var(--smart-outline); /* Sets the color for the group separator */ --smart-scheduler-timeline-group-separator-size: var(--smart-border-width); /* Sets the group cell separator size */ --smart-scheduler-timeline-group-white-space: nowrap; /* Sets the white-space property for the Header Group cells */ --smart-scheduler-timeline-group-header-offset: calc(-50% - var(--smart-scheduler-timeline-header-cell-padding)); /* Sets the label offset for the header cells when groupByDate is enabled */ --smart-scheduler-current-time-indicator-background: var(--smart-primary); /* Current Time Indicator background-color*/ --smart-scheduler-current-time-indicator-size: 1px; /* Current Time Indicator size(width/height depending on the view orientation) */ --smart-scheduler-current-time-indicator-header-size: 2px; /* Current Time Indicator size(width/height) inside the Headers */ --smart-scheduler-current-time-indicator-arrow-size: 7px; /* Current Time Indicator arrow size */ --smart-scheduler-shader-background: rgba(var(--smart-border-rgb), .5); /* Shade Until Current Time background */ --smart-scheduler-view-background: transparent; --smart-scheduler-view-line-size: var(--smart-border-width); /* Timeline lines size */ --smart-scheduler-view-horizontal-line-color: var(--smart-border); /* Horizontal timeline line color */ --smart-scheduler-view-vertical-line-color: var(--smart-border); /* Vertical timeline line color */ --smart-scheduler-day-week-view-vertical-line-size: var(--smart-scheduler-view-line-size); /* Vertical line size in 'day' and 'week' views */ --smart-scheduler-day-week-view-vertical-line-color: var(--smart-border); /* Vertical timeline color in 'day' and 'week' views */ --smart-scheduler-day-week-view-hour-size: var(--smart-scheduler-view-line-size); /* Horizontal line size for 'day', 'week'. Only the hour lines (excluding minutes) */ --smart-scheduler-day-week-view-hour-color: var(--smart-border); /* Horizontal line color for 'day', 'week' views. Only the hour lines ( excluding the minutes) */ --smart-scheduler-time-ruler-tick-size: 10px; /* Time ruler tick size. Applicable only to day/week views */ --smart-scheduler-event-background-rgb: 52, 121, 186; /* Event background RGB */ --smart-scheduler-event-background: rgba(var(--smart-scheduler-event-background-rgb), 1); /* Event background color */ --smart-scheduler-legend-item-background: var(--smart-scheduler-event-background); /* The default background color for the legen items */ --smart-scheduler-event-color: var(--smart-primary-color); /* Event color */ --smart-scheduler-event-focus: rgba(var(--smart-scheduler-event-background-rgb), .9); /* Event focus background color */ --smart-scheduler-event-color-focus: var(--smart-scheduler-event-color); /* Event focus color */ --smart-scheduler-event-hover: rgba(var(--smart-scheduler-event-background-rgb), .8); /* Event hover background color */ --smart-scheduler-event-color-hover: var(--smart-scheduler-event-color); /* Event hover color */ --smart-scheduler-event-padding-agenda: 5px; /* Event padding in 'agenda' view only */ --smart-scheduler-event-padding-basic: 2px; /* Event padding in all basic views */ --smart-scheduler-event-padding-timeline: 2px; /* Event padding in all timeline views */ --smart-scheduler-event-padding-all-day: 2px; /* Event padding for events inside AllDay container */ --smart-scheduler-event-content-padding: 5px; /* Event content padding */ --smart-scheduler-event-label-font-size: var(--smart-font-size); /* Event label font size */ --smart-scheduler-event-time-font-size: calc(var(--smart-font-size) - 3px); /* Event time label font size */ --smart-scheduler-event-time-font-size-agenda: var(--smart-font-size); /* Event time font size for 'agenda' view */ --smart-scheduler-event-time-font-weight-agenda: 600; /* Event time label font weight for 'agenda' view */ --smart-scheduler-event-time-opacity-agenda: 1; /* Event time label opacity for 'agenda' view */ --smart-scheduler-event-time-opacity: 0.7; /* Event time label opacity */ --smart-scheduler-event-icon-size: 30px; /* Event icon (repeating, exception icon) size */ --smart-scheduler-event-size: 30px; /* Sets the size of the timeline events in all views. Main variable. Used this variable to change the size of the events. Used by the Scheduler internally !*/ --smart-scheduler-event-size-basic: var(--smart-scheduler-event-size); /* Sets the size of the events only in Basic views */ --smart-scheduler-event-size-timeline: 60px; /* Sests the size of the events only in Timeline views. Should only be in pixels. Do not use calc()! */ --smart-scheduler-event-collector-size: 24px; /* Event collector size */ --smart-scheduler-event-collector-mobile-size: 28px; /* Event collector size on mobile */ --smart-scheduler-event-collector-background: rgba(var(--smart-primary-rgb), 1); /* Event collector background color */ --smart-scheduler-event-collector-color: var(--smart-primary-color); /* Event collector color */ --smart-scheduler-event-collector-focus: rgba(var(--smart-primary-rgb), .9); /* Event collector background color on focus */ --smart-scheduler-event-collector-color-focus: var(--smart-scheduler-event-collector-color); /* Event collector color on focus */ --smart-scheduler-event-collector-hover: rgba(var(--smart-primary-rgb), .8); /* Event collector background colot on hover */ --smart-scheduler-event-collector-color-hover: var(--smart-scheduler-event-collector-color); /* Event collector color on hover */ --smart-scheduler-month-view-number-size: 24px; /* The size of the day number in month view */ --smart-scheduler-status-size: 7px; /* The size of the day number in month view */ --smart-scheduler-status-padding: 5px; /* The paddng between the content of the event and the satus strip */ --smart-scheduler-status-background: transparent; /* The size of the day number in month view */ --smart-scheduler-status-free-background: white; /* Event Status 'free' background color */ --smart-scheduler-status-tentative-background: 0 -244rem / 5rem 5rem linear-gradient(45deg, #fd7e14 25%, rgba(0, 0, 0, .2) 25%, rgba(0, 0, 0, .2) 50%, #fd7e14 50%, #fd7e14 75%, rgba(0, 0, 0, .2) 75%, rgba(0, 0, 0, .2)); /* Event status 'tentative' background color */ --smart-scheduler-status-busy-background: #dc3545; /* Event status 'busy' background color */ --smart-scheduler-status-out-of-office-background: #00a9e6; /* Event status 'out-of-office' background color */ --smart-scheduler-cell-feedback-background: transparent; /* Cell feedback background color on event drop */ --smart-scheduler-event-resize-indicator-size: var(--smart-gantt-chart-timeline-task-resize-indicator-width); /* Event resize indicator size */ --smart-scheduler-event-resize-indicator-color: var(--smart-gantt-chart-timeline-task-resize-indicator-color); /* Event resize indicator color */ --smart-scheduler-event-resize-indicator-border-color: var(--smart-gantt-chart-timeline-task-resize-indicator-border-color); /* Event resize indicator border color */ --smart-scheduler-restricted-background: 0 -245rem / 12px 12px linear-gradient(135deg, rgba(255, 0, 0, .15) 25%, transparent 25%, transparent 50%, rgba(255, 0, 0, .15) 50%, rgba(255, 0, 0, .15) 75%, transparent 75%, transparent); /* Restricted cells background color */ --smart-scheduler-event-item-size: 50px; /* Event menu item size(height) */ --smart-scheduler-event-button-size: 30px; /* Event menu item button size(delete button) */ --smart-scheduler-event-border-radius: initial; /* Event border radius */ --smart-scheduler-event-collector-border-radius: 20px; /* Event collector border radius */ --smart-scheduler-context-menu-max-height: calc(4 * var(--smart-scheduler-event-item-size)); /* Context menu max-height */ --smart-scheduler-context-menu-max-width: 300px; /* Context menu max-width */ --smart-scheduler-window-header-height: var(--smart-gantt-chart-popup-window-header-height); /* Window editor header height */ --smart-scheduler-window-footer-height: var(--smart-gantt-chart-popup-window-footer-height); /* Window editor footer height */ --smart-scheduler-event-label-font-weight: 300; /* Event label font weight */ --smart-scheduler-event-time-font-weight: 300; /* Event time label font weight */ --smart-scheduler-event-item-label-font-weight: 600; /* Event menu item label font-weight */ --smart-scheduler-toast-default-width: 400px; /* Toast(notifications) default width */ --smart-scheduler-toast-default-height: 50px; /* Toast(notifications) default height */ --smart-scheduler-shortcut-size: 28px; /* The width of the shortuct of the view items when placed inside a drop down */ /*Window*/ --smart-window-default-height: var(--smart-box-height); /* 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-padding: 10px; /* smartWindow header and footer padding */ --smart-window-footer-padding: 6.5px; /* smartWindow header and footer padding */ --smart-window-header-button-size: 24px; /* Sets the size of the header buttons */ --smart-window-header-icon-size: var(--smart-font-size); /* Sets the size of the header button icons */ --smart-window-header-background: var(--smart-surface); /* Sets the background of the header section */ --smart-window-footer-background: var(--smart-surface); /* Sets the size of the background of the footer section */ --smart-window-footer-button-width: 100px; /* Sets the width of the footer buttons */ --smart-window-content-padding: 10px; /* Sets the content section padding */ /*Elevations*/ --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; } body[theme="dark"], .smart-ui-component[theme="dark"] { --smart-primary-rgb: 122, 202, 255; --smart-primary: rgb(var(--smart-primary-rgb)); /* The theme primary color */ --smart-primary-color: #242424; --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: var(--smart-ui-state-hover); --smart-ui-state-active: var(--smart-primary); --smart-ui-state-color-active: var(--smart-primary-color); --smart-ui-state-border-active: var(--smart-primary); --smart-ui-state-focus: #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-grid-cell-background-freeze: #242424; --smart-grid-cell-color-freeze: #fff; --smart-scroll-bar-background: #3E3E42; --smart-scroll-bar-track-background: var(--smart-scroll-bar-background); --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); --smart-gantt-chart-timeline-nonworking-color: #3E3E42; --smart-scheduler-timeline-weekend-color: var(--smart-background); /* Sets the background color for the weekend cells */ --smart-scheduler-timeline-nonworking-color: var(--smart-gantt-chart-timeline-nonworking-color); /* Sets the background color for nonworking days/hours cells */ --smart-scheduler-event-background-rgb: 103, 176, 245; --smart-scheduler-event-background: rgba(var(--smart-scheduler-event-background-rgb), 1); --smart-scheduler-event-color: var(--smart-primary-color); --smart-scheduler-event-focus: rgba(var(--smart-scheduler-event-background-rgb), .9); --smart-scheduler-event-color-focus: var(--smart-scheduler-event-color); --smart-scheduler-event-hover: rgba(var(--smart-scheduler-event-background-rgb), .8); --smart-scheduler-event-color-hover: var(--smart-scheduler-event-color); --smart-scheduler-event-collector-background: rgba(var(--smart-primary-rgb), 1); --smart-scheduler-event-collector-color: var(--smart-primary-color); --smart-scheduler-event-collector-focus: rgba(var(--smart-primary-rgb), .9); --smart-scheduler-event-collector-color-focus: var(--smart-scheduler-event-collector-color); --smart-scheduler-event-collector-hover: rgba(var(--smart-primary-rgb), .8); --smart-scheduler-event-collector-color-hover: var(--smart-scheduler-event-collector-color); --smart-scheduler-status-free-background: white; --smart-scheduler-status-tentative-background: 0 -244rem / 5rem 5rem linear-gradient(45deg, #fd7e14 25%, rgba(0, 0, 0, .2) 25%, rgba(0, 0, 0, .2) 50%, #fd7e14 50%, #fd7e14 75%, rgba(0, 0, 0, .2) 75%, rgba(0, 0, 0, .2)); --smart-scheduler-status-busy-background: #dc3545; --smart-scheduler-status-out-of-office-background: #00a9e6; --smart-scheduler-event-resize-indicator-color: var(--smart-gantt-chart-timeline-task-resize-indicator-color); --smart-scheduler-event-resize-indicator-border-color: var(--smart-gantt-chart-timeline-task-resize-indicator-border-color); --smart-scheduler-restricted-background: 0 -245rem / 12px 12px linear-gradient(135deg, rgba(255, 0, 0, .15) 25%, transparent 25%, transparent 50%, rgba(255, 0, 0, .15) 50%, rgba(255, 0, 0, .15) 75%, transparent 75%, transparent); }