:root { --smart-primary-rgb: 0, 92, 153; --smart-primary: rgb(var(--smart-primary-rgb)); --smart-primary-color: #ffffff; --smart-secondary-rgb: 45, 45, 48; --smart-secondary: rgb(var(--smart-secondary-rgb)); --smart-secondary-color: #ffffff; --smart-error-rgb: 176, 0, 32; --smart-error: rgb(var(--smart-error-rgb)); --smart-error-color: #ffffff; --smart-success-rgb: 139, 195, 74; --smart-success: rgb(var(--smart-success-rgb)); --smart-success-color: #ffffff; --smart-info-rgb: 92, 192, 222; --smart-info: rgb(var(--smart-info-rgb)); --smart-info-color: #fff; --smart-warning-rgb: 240, 173, 78; --smart-warning: rgb(var(--smart-warning-rgb)); --smart-warning-color: #fff; --smart-light-rgb: 255, 255, 255; --smart-light: rgb(var(--smart-light-rgb)); --smart-light-color: #222222; --smart-dark-rgb: 34, 34, 34; --smart-dark: rgb(var(--smart-dark-rgb)); --smart-dark-color: #ffffff; --smart-background: #fefefe; --smart-background-color: #5A5A5A; --smart-surface: #F5F5F5; --smart-surface-color: #323232; --smart-disabled: #CCCCCC; --smart-disabled-color: #555; --smart-ui-state-hover: #ebebeb; --smart-ui-state-color-hover: #333; --smart-ui-state-border-hover: var(--smart-ui-state-hover); --smart-ui-state-active: var(--smart-primary); --smart-ui-state-color-active: var(--smart-primary-color); --smart-ui-state-border-active: var(--smart-primary); --smart-ui-state-focus: #e2e0e0; --smart-ui-state-color-focus: #333; --smart-ui-state-border-focus: var(--smart-ui-state-focus); --smart-ui-state-selected: rgba(var(--smart-primary-rgb), .1); --smart-ui-state-color-selected: var(--smart-primary); --smart-ui-state-border-selected: rgba(var(--smart-primary-rgb), .1); --smart-item-border-width: 1px; --smart-item-border-radius: var(--smart-border-radius); --smart-item-border-top-left-radius: var(--smart-border-radius); --smart-item-border-top-right-radius: var(--smart-border-radius); --smart-item-border-bottom-left-radius: var(--smart-border-radius); --smart-item-border-bottom-right-radius: var(--smart-border-radius); --smart-font-size: 14px; --smart-font-weight: inherit; --smart-font-style: inherit; --smart-font-family: Roboto, "Helvetica Neue", sans-serif; --smart-font-family-icon: smart-icons; --smart-font-family-icon-src: local('./font/smart-icons'), url(./font/smart-icons.woff2) format('woff2'), url(./font/smart-icons.woff) format('woff'), url(./font/smart-icons.ttf) format('truetype'), url(./font/smart-icons.eot) format('embedded-opentype'); --smart-border-width: 1px; --smart-border-radius: 4px; --smart-border-top-left-radius: var(--smart-border-radius); --smart-border-top-right-radius: var(--smart-border-radius); --smart-border-bottom-left-radius: var(--smart-border-radius); --smart-border-bottom-right-radius: var(--smart-border-radius); --smart-border: #E0E0E0; --smart-border-rgb: 244, 224, 224; --smart-outline: #b2b2b2; --smart-editor-selection: var(--smart-primary); --smart-editor-selection-color: var(--smart-primary-color); --smart-alternation-index0-color: var(--smart-surface-color); --smart-alternation-index0-border: var(--smart-surface); --smart-alternation-index0-background: var(--smart-surface); --smart-alternation-index1-color: #111; --smart-alternation-index1-border: #9BBB59; --smart-alternation-index1-background: #9BBB59; --smart-alternation-index2-color: #fff; --smart-alternation-index2-border: #FC3752; --smart-alternation-index2-background: #FC3752; --smart-tick-color: var(--smart-border); --smart-tick-label-color: var(--smart-background-color); --smart-box-height: 450px; --smart-box-width: 450px; --smart-bar-height: 48px; --smart-bar-width: 400px; --smart-editor-height: 30px; --smart-editor-width: 250px; --smart-editor-drop-down-width: 300px; --smart-editor-drop-down-height: 400px; --smart-editor-drop-down-padding-size: 3px; --smart-editor-drop-down-max-width: 800px; --smart-editor-drop-down-min-width: 100px; --smart-editor-drop-down-max-height: 400px; --smart-editor-drop-down-min-height: 50px; --smart-editor-drop-down-resize-bar-height: 15px; --smart-editor-drop-down-vertical-offset: 5px; --smart-editor-drop-down-z-index: 9999; --smart-editor-label-padding: 4px; --smart-editor-addon-width: 27px; --smart-column-icon-size: 30px; --smart-icon-table: '\e800'; --smart-icon-star: '\e801'; --smart-icon-star-empty: '\e802'; --smart-icon-plus: '\e803'; --smart-icon-minus: '\e804'; --smart-icon-attention-circled: '\e805'; --smart-icon-align-left: '\e806'; --smart-icon-align-right: '\e807'; --smart-icon-align-center: '\e808'; --smart-icon-align-justify: '\e813'; --smart-icon-reload: '\e809'; --smart-icon-cancel: '\e80d'; --smart-icon-close: '\e80d'; --smart-icon-cancel-circled: '\e80e'; --smart-icon-plus-circled: '\e810'; --smart-icon-power: '\e811'; --smart-icon-minus-circled: '\e814'; --smart-icon-arrow-up-alt: '\e817'; --smart-icon-radio: '\e818'; --smart-icon-refresh: '\e819'; --smart-icon-chart: '\e81a'; --smart-icon-check-squared: '\e81b'; --smart-icon-resize-full: '\e81c'; --smart-icon-resize-small: '\e81d'; --smart-icon-resize-vertical: '\e80c'; --smart-icon-resize-horizontal: '\e80f'; --smart-icon-lock: '\e821'; --smart-icon-sort: '\e823'; --smart-icon-delete: '\e826'; --smart-icon-search: '\e828'; --smart-icon-calendar: '\e829'; --smart-icon-edit: '\e82a'; --smart-icon-popup: '\e82c'; --smart-icon-lock-open: '\e82e'; --smart-icon-add-filter: '\e82f'; --smart-icon-block: '\e832'; --smart-icon-settings: '\e833'; --smart-icon-duplicate: '\e834'; --smart-icon-copy-record: '\e835'; --smart-icon-download-alt: '\e836'; --smart-icon-clock: '\e837'; --smart-icon-attention: '\e838'; --smart-icon-help-circled: '\e839'; --smart-icon-mail: '\e83c'; --smart-icon-up: '\e83f'; --smart-icon-first-page: '\e900'; --smart-icon-arrow-down: '\e901'; --smart-icon-arrow-left: '\e902'; --smart-icon-arrow-right: '\e903'; --smart-icon-arrow-up: '\e904'; --smart-icon-arrow-down-filled: '\e812'; --smart-icon-arrow-left-filled: '\e816'; --smart-icon-arrow-right-filled: '\e81e'; --smart-icon-arrow-up-filled: '\e815'; --smart-icon-last-page: '\e905'; --smart-icon-more-horiz: '\e906'; --smart-icon-skip-next: '\e907'; --smart-icon-check: '\e908'; --smart-icon-mode-edit: '\e909'; --smart-icon-replay: '\e90c'; --smart-icon-visibility: '\e90d'; --smart-icon-visibility-off: '\e90e'; --smart-icon-link: '\e831'; --smart-icon-unlink: '\f127'; --smart-icon-link-ext: '\f08e'; --smart-icon-check-empty: '\f096'; --smart-icon-filter: '\f0b0'; --smart-icon-resize-full-alt: '\f0b2'; --smart-icon-menu: '\f0c9'; --smart-icon-sort-1: '\f0dc'; --smart-icon-paste: '\f0ea'; --smart-icon-circle-empty: '\f10c'; --smart-icon-circle: '\f111'; --smart-icon-ellipsis: '\f141'; --smart-icon-minus-squared: '\f146'; --smart-icon-ok-squared: '\f14a'; --smart-icon-sort-name-up: '\f15d'; --smart-icon-sort-name-down: '\f15e'; --smart-icon-sort-alt-up: '\f160'; --smart-icon-sort-alt-down: '\f161'; --smart-icon-sort-number-up: '\f162'; --smart-icon-sort-number-down: '\f163'; --smart-icon-dot-circled: '\f192'; --smart-icon-toggle-off: '\f204'; --smart-icon-toggle-on: '\f205'; --smart-icon-group: '\f247'; --smart-icon-ungroup: '\f248'; --smart-icon-window-maximize: '\f2d0'; --smart-icon-window-minimize: '\f2d1'; --smart-icon-window-restore: '\f2d2'; --smart-icon-window-pin-alt: '\e82d'; --smart-icon-window-pin: '\e80a'; --smart-icon-docs: '\f0c5'; --smart-icon-math: '\f01a'; --smart-icon-spin: '\e80b'; --smart-icon-user: '\e81f'; --smart-icon-font: '\f031'; --smart-icon-fontsize: '\f088'; --smart-icon-contains: '\f063'; --smart-icon-starts_with: '\f064'; --smart-icon-ends_with: '\f065'; --smart-icon-does_not_contain: '\f066'; --smart-icon-equals: '\f52c'; --smart-icon-greater-than: '\f531'; --smart-icon-greater-than-equal: '\f532'; --smart-icon-less-than: '\f536'; --smart-icon-less-than-equal: '\f537'; --smart-icon-not-equal: '\f53e'; --smart-icon-percentage: '\f541'; --smart-icon-grip-vertical: '\f58e'; --smart-icon-between: '\f06a'; --smart-icon-bold: '\e820'; --smart-icon-italic: '\e822'; --smart-icon-underline: '\f0cd'; --smart-icon-strike-through: '\f0cc'; --smart-icon-list-ordered: '\f0cb'; --smart-icon-list-unordered: '\f0ca'; --smart-icon-subscript: '\f12c'; --smart-icon-superscript: '\f12b'; --smart-icon-color-background: '\e830'; --smart-icon-indent-right: '\e824'; --smart-icon-indent-left: '\e825'; --smart-icon-image: '\e827'; --smart-icon-case-lower: 'aa'; --smart-icon-case-upper: 'AA'; --smart-icon-print: '\e82b'; --smart-icon-format-clear: 'T'; --smart-icon-source-code: '\f121'; --smart-icon-split-mode: '\e83b'; --smart-icon-cut: '\e83a'; --smart-icon-video: '\f16a'; --smart-icon-video-camera: '\e840'; --smart-icon-bell: '\f0f3'; --smart-icon-header: '\f1dc'; --smart-icon-row: '\f0db'; --smart-icon-row-before: '\f2d0'; --smart-icon-row-after: '\f2d0'; --smart-icon-row-delete: var(--smart-icon-cancel-circled); --smart-icon-column: '\f0db'; --smart-icon-column-left: '\f2d0'; --smart-icon-column-right: '\f2d0'; --smart-icon-column-delete: var(--smart-icon-cancel-circled); --smart-icon-vertical-align: '\f06a \e80c'; --smart-icon-styles: '\f1fc'; --smart-icon-comment: '\F0E5'; --smart-icon-card: '\E83E'; --smart-icon-tasks: '\F0AE'; --smart-icon-phone: '\E83D'; --smart-icon-kanban: '\F181'; --smart-icon-table-alt: '\F0CE'; --smart-icon-zoom-in: '\E841'; --smart-icon-zoom-out: '\E842'; --smart-icon-move: '\F047'; --smart-icon-home: '\E843'; --smart-accordion-animation-duration: 225ms; --smart-accordion-default-width: var(--smart-box-width); --smart-accordion-default-height: var(--smart-box-height); --smart-accordion-expanded-content-height: 0px; --smart-accordion-expanded-content-local-height: 0px; --smart-accordion-item-header-height: var(--smart-bar-height); --smart-accordion-item-expanded-offset: 20px; --smart-array-default-width: var(--smart-box-width); --smart-array-default-height: var(--smart-box-height); --smart-array-element-gap: 3px; --smart-breadcrumb-default-width: 400px; --smart-breadcrumb-default-height: auto; --smart-breadcrumb-padding: 10px; --smart-breadcrumb-drop-down-width: var(--smart-editor-drop-down-width); --smart-breadcrumb-item-height: 40px; --smart-breadcrumb-horizontal-offset: 10px; --smart-button-text-transform: uppercase; --smart-button-padding: 8px 16px; --smart-button-large-padding: 10px 16px; --smart-button-large-font-size: 18px; --smart-button-small-padding: 5px 10px; --smart-button-small-font-size: 12px; --smart-button-very-small-padding: 3px 5px; --smart-button-very-small-font-size: 10px; --smart-button-flat-color: var(--smart-background-color); --smart-button-outlined-color: var(--smart-background-color); --smart-button-outlined-border: var(--smart-border); --smart-button-group-default-width: auto; --smart-button-group-default-height: auto; --smart-calendar-header-height: calc(0.75 * var(--smart-bar-height)); --smart-calendar-footer-height: calc(0.75 * var(--smart-bar-height)); --smart-calendar-title-height: calc(1.25 * var(--smart-bar-height)); --smart-calendar-cell-size: 30px; --smart-calendar-cell-spacing: 4px; --smart-calendar-default-width: calc(50px + var(--smart-calendar-cell-spacing) + 7 * (var(--smart-calendar-cell-spacing) + var(--smart-calendar-cell-size))); --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)); --smart-calendar-title-text-transform: initial; --smart-calendar-week-title-text-transform: uppercase; --smart-calendar-header-text-transform: uppercase; --smart-calendar-footer-text-transform: uppercase; --smart-calendar-cell-border-top-right-radius: 15px; --smart-calendar-cell-border-top-left-radius: 15px; --smart-calendar-cell-border-bottom-left-radius: 15px; --smart-calendar-cell-border-bottom-right-radius: 15px; --smart-calendar-title-padding: 10px; --smart-calendar-important-date-background: var(--smart-ui-state-hover); --smart-calendar-important-date-color: var(--smart-ui-state-color-hover); --smart-calendar-important-date-border-color: var(--smart-ui-state-border-hover); --smart-calendar-navigation-button-size: 30px; --smart-card-view-default-width: 1200px; --smart-card-view-default-height: 800px; --smart-card-view-header-height: 30px; --smart-card-view-cover-height: var(--smart-carousel-default-height); --smart-card-view-vertical-offset: 15px; --smart-card-view-column-min-width: 250px; --smart-card-view-gap: 10px; --smart-card-view-add-new-button-size: 60px; --smart-carousel-default-width: 600px; --smart-carousel-default-height: 200px; --smart-carousel-3d-mode-slide-width: 400px; --smart-carousel-3d-mode-slide-height: 400px; --smart-carousel-multiple-mode-slide-width: 200px; --smart-chart-default-width: 850px; --smart-chart-default-height: 500px; --smart-check-box-default-size: calc(1px + 1/2 * var(--smart-editor-height)); --smart-color-panel-default-width: auto; --smart-color-panel-default-height: auto; --smart-color-panel-palette-size: 300px; --smart-color-panel-grid-mode-item-size: 20px; --smart-color-panel-grid-mode-column-count: 8; --smart-color-panel-grid-mode-columns-gap: 1px; --smart-color-panel-brightness: 0; --smart-color-panel-default-mode-sections-gap: 8px; --smart-color-panel-palette-width: var(--smart-color-panel-palette-size); --smart-color-panel-palette-height: var(--smart-color-panel-palette-size); --smart-color-panel-alpha-channel-color: white; --smart-color-picker-default-width: var(--smart-editor-width); --smart-color-picker-default-height: var(--smart-editor-height); --smart-color-picker-drop-down-width: auto; --smart-color-picker-drop-down-height: auto; --smart-combo-box-default-width: var(--smart-editor-width); --smart-combo-box-default-height: var(--smart-editor-height); --smart-combo-box-drop-down-width: auto; --smart-combo-box-drop-down-height: auto; --smart-chip-default-height: var(--smart-editor-height); --smart-chip-avatar-background: var(--smart-secondary); --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; --smart-data-view-padding: 10px; --smart-data-view-customize-panel-width: 320px; --smart-data-view-filter-panel-width: 550px; --smart-data-view-sort-panel-width: 470px; --smart-data-view-search-panel-width: 250px; --smart-date-format-panel-main-container-width: 960px; --smart-date-format-panel-main-container-padding: 15px; --smart-date-format-panel-border-radius: 4px; --smart-date-format-panel-border-size: 1px; --smart-date-format-panel-border-color: #ccc; --smart-date-format-panel-smart-inputs-container-width: 1fr; --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%; --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-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; --smart-date-format-panel-add-new-format-dropdown-offset: 5px; --smart-date-format-panel-date-time-format-list-offset-top: 15px; --smart-date-format-panel-date-time-format-list-max-height: 400px; --smart-date-format-panel-each-date-time-format-offset: 12px; --smart-date-time-picker-default-width: var(--smart-editor-width); --smart-date-time-picker-default-height: var(--smart-editor-height); --smart-date-time-picker-header-opacity: 0.8; --smart-date-time-picker-header-opacity-active: 1; --smart-date-time-picker-drop-down-width: var(--smart-editor-drop-down-height); --smart-date-time-picker-drop-down-height: auto; --smart-docking-layout-default-width: 1000px; --smart-docking-layout-default-height: 800px; --smart-docking-layout-feedback-background-secondary-size: 7px; --smart-drop-down-list-default-width: var(--smart-editor-width); --smart-drop-down-list-default-height: var(--smart-editor-height); --smart-drop-down-list-drop-down-width: initial; --smart-drop-down-list-drop-down-height: auto; --smart-drop-down-button-default-width: auto; --smart-drop-down-button-default-height: var(--smart-editor-height); --smart-drop-down-button-drop-down-width: var(--smart-editor-drop-down-width); --smart-drop-down-button-drop-down-height: var(--smart-editor-drop-down-height); --smart-editor-default-width: 100%; --smart-editor-default-height: 600px; --smart-editor-input-min-height: 100px; --smart-editor-padding: 15px; --smart-editor-toolbar-item-margin: 5px; --smart-editor-toolbar-button-width: 30px; --smart-editor-toolbar-delimiter-width: 5px; --smart-editor-toolbar-drop-down-width-large: 100px; --smart-editor-toolbar-drop-down-width-small: 65px; --smart-editor-window-header-height: var(--smart-scheduler-window-header-height); --smart-editor-window-footer-height: var(--smart-scheduler-window-footer-height); --smart-editor-inline-toolbar-max-width: 80vw; --smart-editor-table-column-width: initial; --smart-editor-table-cell-min-height: 20px; --smart-editor-table-cell-min-width: var(--smart-editor-table-cell-min-height); --smart-editor-char-counter-offset: 30px; --smart-editor-toolbar-item-height: 30px; --smart-editor-toolbar-item-border-radius: var(--smart-border-radius); --smart-editor-toolbar-height: calc(var(--smart-editor-toolbar-item-height) + 2 * var(--smart-editor-toolbar-item-margin)); --smart-editor-highlight: var(--smart-primary); --smart-editor-highlight-color: var(--smart-primary-color); --smart-editor-search-bar-offset: 5px; --smart-editor-search-bar-padding: 5px; --smart-filter-builder-default-width: var(--smart-box-width); --smart-filter-builder-default-height: var(--smart-box-height); --smart-filter-builder-row-height: var(--smart-editor-height); --smart-filter-builder-item-width: var(--smart-editor-width); --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; --smart-filter-panel-default-width: 300px; --smart-filter-panel-default-height: auto; --smart-filter-panel-padding: 10px; --smart-filter-panel-border-top-right-radius: var(--smart-border-radius); --smart-filter-panel-border-top-left-radius: var(--smart-border-radius); --smart-filter-panel-border-bottom-left-radius: var(--smart-border-radius); --smart-filter-panel-border-bottom-right-radius: var(--smart-border-radius); --smart-filter-panel-border-width: var(--smart-border-width); --smart-filter-panel-border: var(--smart-border); --smart-filter-panel-background: var(--smart-background); --smart-filter-panel-color: var(--smart-background-color); --smart-filter-panel-vertical-offset: 10px; --smart-filter-panel-main-element-height: 400px; --smart-file-upload-default-width: var(--smart-editor-width); --smart-file-upload-browse-button-width: auto; --smart-file-upload-browse-button-height: auto; --smart-file-upload-footer-button-width: auto; --smart-file-upload-footer-button-height: auto; --smart-file-upload-text-content-uploading-start: "Connecting ..."; --smart-file-upload-text-content-uploading: "Uploading ..."; --smart-file-upload-text-content-error: "Upload error!"; --smart-file-upload-text-content-pause: "Upload paused!"; --smart-file-upload-text-content-drop-zone: "Drag files here"; --smart-file-upload-text-content-drop-zone-over: "Drop here \e824"; --smart-file-upload-container-min-height: 60px; --smart-file-upload-total-files-min-height: 20px; --smart-file-upload-drop-zone-height: 100%; --smart-gantt-chart-resource-splitter-bar-fit-size: calc(var(--smart-gantt-chart-resource-timeline-content-height) + var(--smart-gantt-chart-task-default-height)); --smart-gantt-chart-task-splitter-bar-fit-size: var(--smart-gantt-chart-task-timeline-content-height); --smart-gantt-chart-task-default-height: 30px; --smart-gantt-chart-header-height: var(--smart-gantt-chart-task-default-height); --smart-gantt-chart-task-bar-fill-padding: 5px; --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); --smart-gantt-chart-task-progress-color: rgba(0, 0, 0, .15); --smart-gantt-chart-project-color: #ffa558; --smart-gantt-chart-project-label-color: #333; --smart-gantt-chart-project-label-color-selected: #000; --smart-gantt-chart-project-progress-color: var(--smart-gantt-chart-task-progress-color); --smart-gantt-chart-task-color: rgb(43, 195, 190); --smart-gantt-chart-milestone-color: #800080; --smart-gantt-chart-timeline-task-background-color: transparent; --smart-gantt-chart-timeline-task-connection-feedback-color: #e6510a; --smart-gantt-chart-timeline-task-connection-feedback-width: 1px; --smart-gantt-chart-timeline-task-connection-feedback-style: dashed; --smart-gantt-chart-timeline-task-connection-color: var(--smart-gantt-chart-timeline-task-connection-feedback-color); --smart-gantt-chart-timeline-task-connection-color-hover: var(--smart-gantt-chart-timeline-task-connection-color); --smart-gantt-chart-timeline-task-connection-width: var(--smart-gantt-chart-timeline-task-connection-feedback-width); --smart-gantt-chart-timeline-task-connection-style: solid; --smart-gantt-chart-timeline-task-connection-arrow-type: solid; --smart-gantt-chart-timeline-task-connection-arrow-width: 5px; --smart-gantt-chart-timeline-task-resize-indicator-width: 4px; --smart-gantt-chart-timeline-task-resize-indicator-color: #fff; --smart-gantt-chart-timeline-task-resize-indicator-border-color: #333; --smart-gantt-chart-timeline-task-progress-thumb-size: 10px; --smart-gantt-chart-timeline-cell-size: auto; --smart-gantt-chart-timeline-cell-min-size: 70px; --smart-gantt-chart-timeline-task-min-width: 5px; --smart-gantt-chart-timeline-weekend-color: #EFF5FD; --smart-gantt-chart-timeline-nonworking-color: #F5F5F5; --smart-gantt-chart-default-width: auto; --smart-gantt-chart-default-height: 600px; --smart-gantt-chart-task-popup-window-default-width: 60vw; --smart-gantt-chart-connection-popup-window-default-width: 300px; --smart-gantt-chart-confirm-popup-window-default-width: var(--smart-gantt-chart-connection-popup-default-width); --smart-gantt-chart-popup-window-header-height: 35px; --smart-gantt-chart-popup-window-footer-height: 50px; --smart-gantt-chart-header-placeholder: ' - '; --smart-gantt-chart-progress-label-padding: 0 10px 0 10px; --smart-gantt-chart-filter-row-height: 30px; --smart-gantt-chart-task-fill-border-radius: 0; --smart-gantt-chart-segment-link-color: var(--smart-gantt-chart-task-color); --smart-gantt-chart-segment-link-size: var(--smart-border-width); --smart-gantt-chart-date-marker-height: 25px; --smart-gantt-chart-date-marker-width: var(--smart-border-width); --smart-gantt-chart-date-marker-background: var(--smart-primary); --smart-gantt-chart-date-marker-color: var(--smart-primary-color); --smart-gantt-chart-date-marker-v-offset: 15%; --smart-gantt-chart-date-marker-h-offset: 10px; --smart-gantt-chart-indicator-icon: initial; --smart-gantt-chart-deadline-icon: var(--smart-icon-attention-circled); --smart-gantt-chart-deadline-color: var(--smart-error); --smart-gantt-chart-baseline-proportion: 2; --smart-gantt-chart-baseline-background: rgba(166, 205, 87, .5); --smart-gantt-chart-progress-label-width: 60px; --smart-gantt-chart-current-time-indicator-size: 1px; --smart-gantt-chart-current-time-indicator-background: var(--smart-primary); --smart-gantt-chart-current-time-indicator-arrow-size: 7px; --smart-gantt-chart-current-time-indicator-header-size: 2px; --smart-gantt-chart-shader-background: rgba(var(--smart-border-rgb), .5); --smart-gauge-default-width: var(--smart-box-width); --smart-gauge-default-height: var(--smart-box-height); --smart-gauge-track-border: var(--smart-border); --smart-gauge-track-background: var(--smart-background); --smart-gauge-needle-background: var(--smart-primary); --smart-gauge-label-fill-state: initial; --smart-gauge-label-stroke: initial; --smart-grid-default-width: 800px; --smart-grid-default-height: 400px; --smart-grid-footer-height: var(--smart-bar-height); --smart-grid-header-height: var(--smart-bar-height); --smart-grid-group-header-height: var(--smart-bar-height); --smart-grid-row-height: 30px; --smart-grid-column-header-height: var(--smart-bar-height); --smart-grid-filter-footer-height: var(--smart-bar-height); --smart-grid-aggregate-footer-height: var(--smart-bar-height); --smart-grid-header-background-freeze: var(--smart-surface); --smart-grid-header-color-freeze: var(--smart-surface-color); --smart-grid-column-menu-width: 200px; --smart-grid-column-menu-height: auto; --smart-grid-column-buttons-width: 23px; --smart-grid-cell-color-freeze: var(--smart-surface-color); --smart-grid-cell-background-freeze: var(--smart-surface); --smart-grid-cell-color-delete: #333; --smart-grid-cell-background-delete: #FFDCDC; --smart-grid-cell-color-update: #333; --smart-grid-cell-background-update: #D7F9C7; --smart-grid-cell-color-add: #333; --smart-grid-cell-background-add: #FED59B; --smart-grid-cell-color-unbound: var(--smart-surface-color); --smart-grid-cell-background-unbound: var(--smart-surface); --smart-grid-cell-color-sort: var(--smart-surface-color); --smart-grid-cell-background-sort: #FEF3dd; --smart-grid-cell-color-filter: var(--smart-surface-color); --smart-grid-cell-background-filter: #E8F2DB; --smart-grid-group-row-vertical-offset: 5; --smart-grid-group-row-horizontal-offset: 1; --smart-grid-template-columns: none; --smart-grid-column-gap: 0px; --smart-grid-row-gap: 0px; --smart-grid-freeze-splitter-size: 1px; --smart-grid-resize-line-size: 1px; --smart-grid-layout-col-gap: 10px; --smart-grid-layout-row-gap: 10px; --smart-grid-layout-width: 100%; --smart-grid-layout-rows: none; --smart-grid-panel-default-width: 450px; --smart-grid-panel-default-height: auto; --smart-grid-panel-padding: 10px; --smart-grid-panel-vertical-offset: 10px; --smart-grid-panel-item-height: 30px; --smart-column-panel-drop-down-height: 350px; --smart-multi-column-filter-panel-template-columns: 15px 60px 2fr 3fr 3fr; --smart-formatting-panel-default-width: 600px; --smart-formatting-panel-row-height: 30px; --smart-formatting-panel-add-new-button-size: 40px; --smart-formatting-panel-popup-width: 300px; --smart-formatting-panel-color-box-height: 20px; --smart-kanban-default-width: 1200px; --smart-kanban-default-height: 500px; --smart-kanban-header-size: 35px; --smart-kanban-task-min-width: 150px; --smart-kanban-task-min-height: 80px; --smart-kanban-text-max-height: 200px; --smart-kanban-user-icon-size: 30px; --smart-kanban-user-list-width: 150px; --smart-kanban-user-list-max-height: 500px; --smart-kanban-comments-list-width: 350px; --smart-kanban-comments-list-height: auto; --smart-kanban-new-comment-height: 50px; --smart-kanban-new-comment-height-expanded: 175px; --smart-kanban-send-button-height: 30px; --smart-kanban-color-band-width: 3px; --smart-kanban-add-new-column-width: 1fr; --smart-list-box-default-width: var(--smart-editor-width); --smart-list-box-default-height: var(--smart-editor-width); --smart-list-item-group-header-text-transform: uppercase; --smart-list-item-horizontal-offset: 3px; --smart-list-item-vertical-offset: 3px; --smart-list-item-height: 36px; --smart-list-item-check-box-radius: 2px; --smart-list-item-label-padding: 0; --smart-list-item-label-border-radius: 0; --smart-list-item-padding: 9px 12px; --smart-loader-size: var(--smart-editor-height); --smart-led-default-width: var(--smart-editor-height); --smart-led-default-height: var(--smart-editor-height); --smart-list-menu-default-width: var(--smart-box-width); --smart-list-menu-default-height: var(--smart-box-height); --smart-list-menu-filter-input-vertical-offset: 5px; --smart-list-menu-filter-input-horizontal-offset: 5px; --smart-masked-text-box-default-width: var(--smart-editor-width); --smart-masked-text-box-default-height: var(--smart-editor-height); --smart-menu-default-width: var(--smart-bar-width); --smart-menu-default-height: var(--smart-bar-height); --smart-menu-vertical-default-width: calc(var(--smart-bar-width) / 2); --smart-menu-vertical-default-height: var(--smart-bar-width); --smart-menu-scroll-button-size: calc(var(--smart-bar-height) / 1.5); --smart-multiline-text-box-default-width: var(--smart-editor-width); --smart-multiline-text-box-default-height: calc(10 * var(--smart-editor-height)); --smart-multi-split-button-default-width: var(--smart-editor-width); --smart-multi-split-button-default-height: var(--smart-editor-height); --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; --smart-numeric-text-box-default-width: var(--smart-editor-width); --smart-numeric-text-box-default-height: var(--smart-editor-height); --smart-numeric-text-box-default-radix-display-width: 12%; --smart-numeric-text-box-default-unit-display-width: var(--smart-editor-addon-width); --smart-numeric-text-box-text-align: right; --smart-path-default-width: var(--smart-editor-width); --smart-path-default-height: var(--smart-editor-height); --smart-path-drop-down-width: auto; --smart-path-drop-down-height: auto; --smart-path-button-gap: 5px; --smart-path-text-align: start; --smart-power-button-default-width: var(--smart-editor-height); --smart-power-button-default-height: var(--smart-editor-height); --smart-progress-bar-default-width: var(--smart-editor-width); --smart-progress-bar-default-height: var(--smart-editor-height); --smart-circular-progress-bar-default-size: var(--smart-editor-width); --smart-circular-progress-bar-fill-size: 20%; --smart-query-builder-default-width: auto; --smart-query-builder-default-height: auto; --smart-query-builder-min-width: 100px; --smart-query-builder-content-padding: 5px; --smart-query-builder-editor-width: 125px; --smart-radio-button-default-size: calc(1px + 1/2 * var(--smart-editor-height)); --smart-sortable-handle-size: 25px; --smart-splitter-default-width: var(--smart-box-width); --smart-splitter-default-height: var(--smart-box-height); --smart-splitter-bar-size: 10px; --smart-splitter-bar-fit-size: 100%; --smart-splitter-item-padding: 0; --smart-splitter-item-content-padding: 0; --smart-splitter-item-size: auto; --smart-switch-button-default-width: calc(var(--smart-editor-height) + 10px); --smart-switch-button-default-height: var(--smart-editor-height); --smart-switch-button-thumb-size: calc(var(--smart-switch-button-default-height) - 8px); --smart-slider-default-width: var(--smart-editor-width); --smart-slider-default-height: 35px; --smart-slider-track-size: 1px; --smart-slider-thumb-width: 20px; --smart-slider-thumb-height: 20px; --smart-slider-tooltip-width: 60px; --smart-slider-tooltip-height: 30px; --smart-slider-spin-button-width: 30px; --smart-slider-spin-button-height: 30px; --smart-slider-tick-size: 10px; --smart-slider-minor-tick-size: 5px; --smart-slider-thumb-border-top-right-radius: 15px; --smart-slider-thumb-border-top-left-radius: 15px; --smart-slider-thumb-border-bottom-left-radius: 15px; --smart-slider-thumb-border-bottom-right-radius: 15px; --smart-scroll-button-size: 16px; --smart-scroll-bar-size: 18px; --smart-scroll-bar-default-width: var(--smart-editor-width); --smart-scroll-bar-default-height: var(--smart-scroll-bar-size); --smart-scroll-bar-background: #F1F1F1; --smart-scroll-bar-track-background: var(--smart-scroll-bar-background); --smart-scroll-bar-border: #F1F1F1; --smart-scroll-bar-thumb-border-top-right-radius: 0px; --smart-scroll-bar-thumb-border-top-left-radius: 0px; --smart-scroll-bar-thumb-border-bottom-left-radius: 0px; --smart-scroll-bar-thumb-border-bottom-right-radius: 0px; --smart-scroll-bar-thumb-background: #C1C1C1; --smart-scroll-bar-thumb-border: transparent; --smart-scroll-bar-thumb-size: 100%; --smart-scroll-bar-thumb-padding: 1px; --smart-scroll-bar-thumb-background-hover: #A8A8A8; --smart-scroll-bar-thumb-border-hover: transparent; --smart-scroll-bar-thumb-background-active: #787878; --smart-scroll-bar-thumb-border-active: transparent; --smart-scroll-bar-button-background: #F1F1F1; --smart-scroll-bar-button-border: #F1F1F1; --smart-scroll-bar-button-color: #505050; --smart-scroll-bar-button-background-hover: #D2D2D2; --smart-scroll-bar-button-border-hover: #F1F1F1; --smart-scroll-bar-button-color-hover: #505050; --smart-scroll-bar-button-background-active: #787878; --smart-scroll-bar-button-border-active: #F1F1F1; --smart-scroll-bar-button-color-active: #fff; --smart-table-default-width: 100%; --smart-table-default-height: auto; --smart-table-header-footer-height: 56px; --smart-table-column-header-height: var(--smart-table-header-footer-height); --smart-table-row-height: 48px; --smart-table-cell-padding: 12px; --smart-table-row-detail-height: var(--smart-table-row-height); --smart-table-indent: 30px; --smart-table-arrow-size: 16px; --smart-table-arrow-margin: 5px; --smart-table-group-name-display: unset; --smart-table-group-count-display: unset; --smart-pivot-table-cell-width: 200px; --smart-pivot-table-secondary-group-width: calc(1.25 * var(--smart-pivot-table-cell-width)); --smart-pivot-panel-width: 300px; --smart-pivot-panel-default-height: 800px; --smart-pivot-panel-tab-item-height: 150px; --smart-pivot-panel-padding: 10px; --smart-tank-default-width: var(--smart-editor-width); --smart-tank-default-height: calc(10 * var(--smart-editor-height)); --smart-tank-scale-size: 105px; --smart-tank-thumb-width: 25px; --smart-tank-thumb-height: var(--smart-tank-thumb-width); --smart-tank-tooltip-width: 80px; --smart-tank-tooltip-height: 30px; --smart-tank-tick-size: 10px; --smart-tank-minor-tick-size: 5px; --smart-tank-minimum-track-size: 6px; --smart-tabs-header-button-size: 20px; --smart-tabs-animation-duration: 0.5s; --smart-tabs-default-width: var(--smart-box-width); --smart-tabs-default-height: var(--smart-box-height); --smart-tabs-header-padding: 0px; --smart-tabs-header-offset: 0px; --smart-tab-item-padding: 12px 16px; --smart-tab-item-offset: 5px; --smart-tab-item-initial-offset: 5px; --smart-tab-item-text-transform: uppercase; --smart-time-picker-default-width: var(--smart-editor-width); --smart-time-picker-default-height: calc(12 * var(--smart-editor-height)); --smart-tooltip-arrow-width: 6px; --smart-tooltip-arrow-color: var(--smart-secondary); --smart-tooltip-arrow-translate: 0; --smart-tooltip-padding: 4px 8px; --smart-tooltip-content-shadow: none; --smart-toast-item-icon: ''; --smart-toast-container-default-width: var(--smart-bar-width); --smart-toast-header-height: 20px; --smart-toast-info-background: var(--smart-info); --smart-toast-info-color: var(--smart-info-color); --smart-toast-warning-background: var(--smart-warning); --smart-toast-warning-color: var(--smart-warning-color); --smart-toast-error-background: var(--smart-error); --smart-toast-error-color: var(--smart-error-color); --smart-toast-success-background: var(--smart-success); --smart-toast-success-color: var(--smart-success-color); --smart-tree-default-width: var(--smart-box-width); --smart-tree-default-height: var(--smart-box-height); --smart-tree-scroll-button-size: 20px; --smart-tree-lines-style: dashed; --smart-tree-indent: 16px; --smart-tree-lines-color: var(--smart-border); --smart-tree-lines-width: 1px; --smart-tree-item-label-height: 36px; --smart-tree-item-padding: 9px 12px; --smart-tree-item-vertical-offset: 3px; --smart-tree-item-horizontal-offset: 3px; --smart-text-box-default-width: var(--smart-editor-width); --smart-text-box-default-height: var(--smart-editor-height); --smart-validation-panel-description-width: 20%; --smart-validation-panel-content-width: 80%; --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); --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; --smart-validation-panel-invalid-data-vertical-offset: 10px; --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); --smart-password-text-box-default-width: var(--smart-editor-width); --smart-password-text-box-default-height: var(--smart-editor-height); --smart-pager-default-width: var(--smart-bar-width); --smart-pager-default-height: var(--smart-bar-height); --smart-pager-button-width: 'auto'; --smart-pager-button-height: 32px; --smart-pager-page-size-selector-width: 60px; --smart-pager-page-index-selector-width: 32px; --smart-pager-page-index-selector-height: 32px; --smart-pager-page-index-ellipsis-selector-width: 32px; --smart-pager-page-index-ellipsis-selector-height: 32px; --smart-pager-page-index-selector-horizontal-offset: 8px; --smart-pager-padding: 2px; --smart-pager-input-width: 50px; --smart-scroll-viewer-min-width: none; --smart-scroll-viewer-max-width: none; --smart-scroll-viewer-min-height: none; --smart-scroll-viewer-max-height: none; --smart-scheduler-default-height: auto; --smart-scheduler-default-width: auto; --smart-scheduler-item-size: auto; --smart-scheduler-timeline-cell-width: auto; --smart-scheduler-timeline-cell-height: 50px; --smart-scheduler-timeline-cell-min-width: 70px; --smart-scheduler-timeline-cell-min-height: 35px; --smart-scheduler-header-height: 50px; --smart-scheduler-header-today-button-size: 70px; --smart-scheduler-header-date-button-max-size: auto; --smart-scheduler-header-navigation-button-size: 30px; --smart-scheduler-footer-height: var(--smart-scheduler-header-height); --smart-scheduler-header-box-shadow: initial; --smart-scheduler-header-padding: 10px; --smart-scheduler-timeline-header-cell-padding: 5px; --smart-scheduler-header-menu-button-size: auto; --smart-scheduler-timeline-weekend-color: var(--smart-background); --smart-scheduler-timeline-nonworking-color: var(--smart-gantt-chart-timeline-nonworking-color); --smart-scheduler-timeline-all-day-label-font-weight: 600; --smart-scheduler-timeline-header-horizontal-cells-size: 40px; --smart-scheduler-timeline-header-horizontal-label-padding: initial; --smart-scheduler-timeline-header-horizontal-details-size: var(--smart-scheduler-timeline-header-horizontal-cells-size); --smart-scheduler-timeline-header-horizontal-group-size: var(--smart-scheduler-timeline-header-horizontal-cells-size); --smart-scheduler-timeline-header-vertical-cells-size: 100px; --smart-scheduler-timeline-header-vertical-label-padding: initial; --smart-scheduler-timeline-header-vertical-details-size: var(--smart-scheduler-timeline-header-vertical-cells-size); --smart-scheduler-timeline-header-vertical-group-size: var(--smart-scheduler-timeline-header-vertical-cells-size); --smart-scheduler-timeline-header-all-day-cells-size: 75px; --smart-scheduler-timeline-group-separator-background: var(--smart-outline); --smart-scheduler-timeline-group-separator-size: var(--smart-border-width); --smart-scheduler-timeline-group-white-space: nowrap; --smart-scheduler-timeline-group-header-offset: calc(-50% - var(--smart-scheduler-timeline-header-cell-padding)); --smart-scheduler-current-time-indicator-background: var(--smart-primary); --smart-scheduler-current-time-indicator-size: 1px; --smart-scheduler-current-time-indicator-header-size: 2px; --smart-scheduler-current-time-indicator-arrow-size: 7px; --smart-scheduler-shader-background: rgba(var(--smart-border-rgb), .5); --smart-scheduler-view-background: transparent; --smart-scheduler-view-line-size: var(--smart-border-width); --smart-scheduler-view-horizontal-line-color: var(--smart-border); --smart-scheduler-view-vertical-line-color: var(--smart-border); --smart-scheduler-day-week-view-vertical-line-size: var(--smart-scheduler-view-line-size); --smart-scheduler-day-week-view-vertical-line-color: var(--smart-border); --smart-scheduler-day-week-view-hour-size: var(--smart-scheduler-view-line-size); --smart-scheduler-day-week-view-hour-color: var(--smart-border); --smart-scheduler-time-ruler-tick-size: 10px; --smart-scheduler-event-background-rgb: 52, 121, 186; --smart-scheduler-event-background: rgba(var(--smart-scheduler-event-background-rgb), 1); --smart-scheduler-legend-item-background: var(--smart-scheduler-event-background); --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-padding-agenda: 5px; --smart-scheduler-event-padding-basic: 2px; --smart-scheduler-event-padding-timeline: 2px; --smart-scheduler-event-padding-all-day: 2px; --smart-scheduler-event-content-padding: 5px; --smart-scheduler-event-label-font-size: var(--smart-font-size); --smart-scheduler-event-time-font-size: calc(var(--smart-font-size) - 3px); --smart-scheduler-event-time-font-size-agenda: var(--smart-font-size); --smart-scheduler-event-time-font-weight-agenda: 600; --smart-scheduler-event-time-opacity-agenda: 1; --smart-scheduler-event-time-opacity: 0.7; --smart-scheduler-event-icon-size: 30px; --smart-scheduler-event-size: 30px; --smart-scheduler-event-size-basic: var(--smart-scheduler-event-size); --smart-scheduler-event-size-timeline: 60px; --smart-scheduler-event-collector-size: 24px; --smart-scheduler-event-collector-mobile-size: 28px; --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-month-view-number-size: 24px; --smart-scheduler-status-size: 7px; --smart-scheduler-status-padding: 5px; --smart-scheduler-status-background: transparent; --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-cell-feedback-background: transparent; --smart-scheduler-event-resize-indicator-size: var(--smart-gantt-chart-timeline-task-resize-indicator-width); --smart-scheduler-event-resize-indicator-color: var(--smart-gantt-chart-timeline-task-resize-indicator-color); --smart-scheduler-event-resize-indicator-border-color: var(--smart-gantt-chart-timeline-task-resize-indicator-border-color); --smart-scheduler-restricted-background: 0 -245rem/12px 12px linear-gradient(135deg, rgba(255, 0, 0, .15) 25%, transparent 25%, transparent 50%, rgba(255, 0, 0, .15) 50%, rgba(255, 0, 0, .15) 75%, transparent 75%, transparent); --smart-scheduler-event-item-size: 50px; --smart-scheduler-event-button-size: 30px; --smart-scheduler-event-border-radius: initial; --smart-scheduler-event-collector-border-radius: 20px; --smart-scheduler-context-menu-max-height: calc(4 * var(--smart-scheduler-event-item-size)); --smart-scheduler-context-menu-max-width: 300px; --smart-scheduler-window-header-height: var(--smart-gantt-chart-popup-window-header-height); --smart-scheduler-window-footer-height: var(--smart-gantt-chart-popup-window-footer-height); --smart-scheduler-event-label-font-weight: 300; --smart-scheduler-event-time-font-weight: 300; --smart-scheduler-event-item-label-font-weight: 600; --smart-scheduler-toast-default-width: 400px; --smart-scheduler-toast-default-height: 50px; --smart-scheduler-shortcut-size: 28px; --smart-window-default-height: var(--smart-box-height); --smart-window-default-width: var(--smart-box-width); --smart-window-header-height: var(--smart-bar-height); --smart-window-footer-height: var(--smart-bar-height); --smart-window-min-width: 250px; --smart-window-header-padding: 10px; --smart-window-footer-padding: 6.5px; --smart-window-header-button-size: 24px; --smart-window-header-icon-size: var(--smart-font-size); --smart-window-header-background: var(--smart-surface); --smart-window-footer-background: var(--smart-surface); --smart-window-footer-button-width: 100px; --smart-window-content-padding: 10px; --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; --breakpoint-xs: 0; --breakpoint-sm: 576px; --breakpoint-md: 768px; --breakpoint-lg: 992px; --breakpoint-xl: 1200px; --pseudo-element-height: 0 } .smart-ui-component[theme=dark], body[theme=dark] { --smart-primary-rgb: 122, 202, 255; --smart-primary: rgb(var(--smart-primary-rgb)); --smart-primary-color: #242424; --smart-background: #242424; --smart-background-color: #fff; --smart-surface: #333; --smart-surface-color: #fff; --smart-disabled: #535353; --smart-disabled-color: #fff; --smart-border: #464646; --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); --smart-alternation-index0-border: var(--smart-surface); --smart-alternation-index0-background: var(--smart-surface); --smart-alternation-index1-color: #111; --smart-alternation-index1-border: #9BBB59; --smart-alternation-index1-background: #9BBB59; --smart-alternation-index2-color: #fff; --smart-alternation-index2-border: #FC3752; --smart-alternation-index2-background: #FC3752; --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); --smart-scheduler-timeline-nonworking-color: var(--smart-gantt-chart-timeline-nonworking-color); --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) } smart-accordion, smart-alert-window, smart-array, smart-breadcrumb, smart-button, smart-calendar, smart-card, smart-card-view, smart-carousel, smart-check-box, smart-circular-progress-bar, smart-color-panel, smart-color-picker, smart-column-panel, smart-combo-box, smart-date-time-picker, smart-dialog-window, smart-docking-layout, smart-drop-down-button, smart-drop-down-list, smart-filter-panel, smart-gantt-chart, smart-gauge, smart-grid, smart-group-panel, smart-kanban, smart-layout, smart-led, smart-list-box, smart-list-menu, smart-masked-text-box, smart-menu, smart-multi-column-filter-panel, smart-multi-split-button, smart-multiline-prompt-window, smart-multiline-text-box, smart-numeric-text-box, smart-pager, smart-password-text-box, smart-path, smart-pivot-panel, smart-power-button, smart-progress-bar, smart-progress-window, smart-prompt-window, smart-query-builder, smart-radio-button, smart-repeat-button, smart-scroll-bar, smart-sheduler, smart-slider, smart-sort-panel, smart-splitter, smart-switch-button, smart-tabs, smart-tabs-window, smart-tank, smart-text-box, smart-time-picker, smart-toggle-button, smart-tooltip, smart-tree, smart-wait-window, smart-window { padding: 0; margin: 0; overflow: hidden; display: block } .smart-element { outline: 0; box-sizing: border-box; font-family: var(--smart-font-family); font-size: var(--smart-font-size); font-weight: var(--smart-font-weight); -webkit-tap-highlight-color: transparent; background: var(--smart-background); color: var(--smart-background-color) } .smart-root { width: 100%; height: 100%; padding: 0; margin: 0; box-sizing: border-box } smart-alert-window[disabled], smart-breadcrumb[disabled], smart-button-group[disabled], smart-button[disabled], smart-calendar[disabled], smart-card-view[disabled], smart-card[disabled], smart-check-box[disabled], smart-check-input[disabled], smart-chip[disabled], smart-circular-progress-bar[disabled], smart-color-input[disabled], smart-color-panel[disabled], smart-color-picker[disabled], smart-column-panel[disabled], smart-combo-box[disabled], smart-date-input[disabled], smart-date-range-input[disabled], smart-date-time-picker[disabled], smart-dialog-window[disabled], smart-docking-layout[disabled], smart-drop-down-button[disabled], smart-drop-down-list[disabled], smart-editor[disabled], smart-filter-panel[disabled], smart-formatting-panel[disabled], smart-gantt-chart[disabled], smart-gantt[disabled], smart-gauge[disabled], smart-grid[disabled], smart-group-panel[disabled], smart-input[disabled], smart-kanban[disabled], smart-layout[disabled], smart-led[disabled], smart-list-box[disabled], smart-list-item[disabled], smart-list-menu[disabled], smart-menu-item[disabled], smart-menu-items-group[disabled], smart-menu[disabled], smart-multi-column-filter-panel[disabled], smart-multi-combo-input[disabled], smart-multi-input[disabled], smart-multi-split-button[disabled], smart-multiline-prompt-window[disabled], smart-multiline-text-box[disabled], smart-notification-panel[disabled], smart-number-input[disabled], smart-numeric-text-box[disabled], smart-pager .smart-pager-button[disabled], smart-pager[disabled], smart-password-input[disabled], smart-password-text-box[disabled], smart-path[disabled], smart-pivot-table[disabled], smart-power-button[disabled], smart-progress-bar[disabled], smart-progress-window[disabled], smart-prompt-window[disabled], smart-query-builder[disabled], smart-radio-button[disabled], smart-repeat-button[disabled], smart-scheduler[disabled], smart-scroll-bar[disabled], smart-slider[disabled], smart-sort-panel[disabled], smart-splitter[disabled], smart-switch-button[disabled], smart-tab[disabled], smart-table[disabled], smart-tabs[disabled], smart-tank[disabled], smart-text-area[disabled], smart-text-box[disabled], smart-time-input[disabled], smart-time-picker[disabled], smart-toggle-button[disabled], smart-tree-item[disabled]>.smart-tree-item-label-container, smart-tree-items-group[disabled]>.smart-tree-item-label-container, smart-tree[disabled], smart-wait-window[disabled], smart-window[disabled] { opacity: .55; cursor: default; pointer-events: none; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none } .smart-window, smart-accordion, smart-button, smart-button-group, smart-calendar, smart-card-view, smart-color-panel, smart-column-panel, smart-date-time-picker, smart-docking-layout, smart-formatting-panel, smart-gantt-chart, smart-grid, smart-group-panel, smart-kanban, smart-layout, smart-list-box, smart-list-menu, smart-menu, smart-multi-column-filter-panel, smart-multiline-text-box, smart-pager, smart-progress-bar, smart-scheduler, smart-scroll-viewer, smart-sort-panel, smart-splitter, smart-tank, smart-text-box, smart-time-picker, smart-tree { border-color: var(--smart-border); border-top-left-radius: var(--smart-border-top-left-radius); border-top-right-radius: var(--smart-border-top-right-radius); border-bottom-left-radius: var(--smart-border-bottom-left-radius); border-bottom-right-radius: var(--smart-border-bottom-right-radius); border-width: var(--smart-border-width); border-style: solid } smart-card-view.smart-element, smart-color-panel.smart-element, smart-color-picker.smart-element, smart-combo-box.smart-element, smart-date-time-picker.smart-element, smart-drop-down-button.smart-element, smart-drop-down-list.smart-element, smart-filter-panel.smart-element, smart-kanban.smart-element, smart-masked-text-box.smart-element, smart-menu.smart-element, smart-multi-split-button.smart-element, smart-multiline-text-box.smart-element, smart-numeric-text-box.smart-element, smart-pager.smart-element, smart-password-text-box.smart-element, smart-path.smart-element, smart-query-builder.smart-element, smart-slider.smart-element, smart-switch-button.smart-element, smart-tabs.smart-element, smart-tank.smart-element, smart-text-box.smart-element { overflow: visible } .smart-disabled { opacity: .55; cursor: default; pointer-events: none; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none } .smart-element input::selection, .smart-input::selection { background: var(--smart-editor-selection); color: var(--smart-editor-selection-color) } @media (hover:hover) { .smart-element[theme=dark], body[theme=dark] { scrollbar-color: var(--smart-scroll-bar-thumb-background) var(--smart-scroll-bar-track-background) } body[theme=dark] ::-webkit-scrollbar, body[theme=dark]::-webkit-scrollbar { background-color: var(--smart-background) } body[theme=dark] ::-webkit-scrollbar-track, body[theme=dark] ::-webkit-scrollbar-track-piece, body[theme=dark]::-webkit-scrollbar-track, body[theme=dark]::-webkit-scrollbar-track-piece { background-color: var(--smart-scroll-bar-track-background) } body[theme=dark] ::-webkit-scrollbar-thumb, body[theme=dark]::-webkit-scrollbar-thumb { border: 1px solid var(--smart-scroll-bar-thumb-border); background-color: var(--smart-scroll-bar-thumb-background) } body[theme=dark] ::-webkit-scrollbar-thumb:hover, body[theme=dark]::-webkit-scrollbar-thumb:hover { border-color: var(--smart-scroll-bar-thumb-border-hover); background-color: var(--smart-scroll-bar-thumb-background-hover) } body[theme=dark] ::-webkit-scrollbar-button, body[theme=dark]::-webkit-scrollbar-button { background-color: var(--smart-scroll-bar-button-background) } } smart-accordion { width: var(--smart-accordion-default-width); height: var(--smart-accordion-default-height); border: 0; display: block } smart-accordion.smart-element { background: 0 0 } smart-accordion:not(.smart-element) { visibility: hidden } smart-accordion>.smart-container { overflow: auto; touch-action: none; padding: 10px } smart-accordion.smart-container { overflow: auto; touch-action: none } smart-accordion .smart-reordering * { user-select: none; -webkit-user-select: none; cursor: move } smart-accordion .smart-empty:after { content: "No accordion items."; display: flex; justify-content: center; align-items: center; width: 100%; height: 100% } smart-accordion .smart-accordion.smart-container { padding: 10px } smart-accordion smart-accordion-item { font-size: inherit; font-family: inherit; display: block; overflow: hidden; box-sizing: border-box; box-shadow: var(--smart-elevation-4); width: 100%; border: 0; border-top-left-radius: var(--smart-item-border-top-left-radius); border-top-right-radius: var(--smart-item-border-top-right-radius); border-bottom-left-radius: var(--smart-item-border-bottom-left-radius); border-bottom-right-radius: var(--smart-item-border-bottom-right-radius) } smart-accordion smart-accordion-item:first-child { border-top-left-radius: var(--smart-first-item-border-top-left-radius, --smart-item-border-top-left-radius); border-top-right-radius: var(--smart-first-item-border-top-right-radius, --smart-item-border-top-right-radius); border-bottom-left-radius: var(--smart-first-item-border-bottom-left-radius, --smart-item-border-bottom-left-radius); border-bottom-right-radius: var(--smart-first-item-border-bottom-right-radius, --smart-item-border-bottom-right-radius) } smart-accordion smart-accordion-item:last-child { border-top-left-radius: var(--smart-last-item-border-top-left-radius, --smart-item-border-top-left-radius); border-top-right-radius: var(--smart-last-item-border-top-right-radius, --smart-item-border-top-right-radius); border-bottom-left-radius: var(--smart-last-item-border-bottom-left-radius, --smart-item-border-bottom-left-radius); border-bottom-right-radius: var(--smart-last-item-border-bottom-right-radius, --smart-item-border-bottom-right-radius) } smart-accordion smart-accordion-item>.smart-container { border-bottom: var(--smart-border-width) solid var(--smart-border) } smart-accordion smart-accordion-item .smart-ripple { background-color: var(--smart-background-color); opacity: .5 } smart-accordion smart-accordion-item .smart-accordion-item-header { width: 100%; cursor: pointer; color: var(--smart-surface-color); background: var(--smart-surface); border-color: var(--smart-border); font-family: inherit; font-size: inherit; box-sizing: border-box; padding: 0 24px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: flex; align-items: center; position: relative; height: var(--smart-accordion-item-header-height) } smart-accordion smart-accordion-item .smart-accordion-item-header>.smart-arrow { width: var(--smart-editor-addon-width); display: flex; justify-content: center; align-items: center; order: 2 } smart-accordion smart-accordion-item .smart-accordion-item-header>.smart-arrow:after { vertical-align: middle; content: var(--smart-icon-arrow-up-alt); transform: rotate(180deg); width: var(--smart-editor-addon-width); height: 100%; margin-left: 2px; font-family: var(--smart-font-family-icon); font-style: normal; font-weight: 400; font-size: 12px; text-decoration: inherit; font-variant: normal; text-transform: none; display: flex; justify-content: center; align-items: center; color: var(--smart-ui-state); transform-origin: center } smart-accordion smart-accordion-item .smart-accordion-item-header>.smart-label { margin-left: 5px; width: calc(100% - var(--smart-editor-addon-width)); display: block; text-overflow: ellipsis; white-space: nowrap; overflow: hidden } smart-accordion smart-accordion-item .smart-accordion-item-content { overflow-y: auto; height: var(--smart-accordion-expanded-content-height); padding: 0 24px; color: var(--smart-background-color); background: var(--smart-background); width: 100%; box-sizing: border-box; display: none } smart-accordion smart-accordion-item .smart-accordion-item-content .smart-content-container { width: 100%; height: 100%; box-sizing: border-box; min-height: 5px; padding: 10px } smart-accordion smart-accordion-item[expanded]:not(:last-child) { margin-bottom: var(--smart-accordion-item-expanded-offset) } smart-accordion smart-accordion-item[expanded]:last-child:not(:first-child) { margin-top: var(--smart-accordion-item-expanded-offset) } smart-accordion smart-accordion-item[expanded] .smart-accordion-item-header { color: var(--smart-ui-state-color-focus); background: var(--smart-ui-state-focus); border-color: var(--smart-ui-state-border-focus); border-bottom: var(--smart-border-width) solid var(--smart-border) } smart-accordion smart-accordion-item[expanded] .smart-accordion-item-header>.smart-arrow:after { transform: rotate(0); transform-origin: center } smart-accordion smart-accordion-item[expanded]>.smart-container>.smart-accordion-item-content { display: block } smart-accordion smart-accordion-item[hover] .smart-accordion-item-header { color: var(--smart-ui-state-color-hover); background: var(--smart-ui-state-hover); border-color: vaR(--smart-ui-state-border-hover) } smart-accordion smart-accordion-item[focused] .smart-accordion-item-header { color: var(--smart-ui-state-color-focus); background: var(--smart-ui-state-focus); border-color: vaR(--smart-ui-state-border-focus) } smart-accordion smart-accordion-item[focused] .smart-accordion-item-header>.smart-arrow { opacity: .6 } smart-accordion smart-accordion-item[dragged] { user-select: none; cursor: move } smart-accordion smart-accordion-item[dragged] .smart-accordion-item-header { cursor: move } smart-accordion smart-accordion-item[disabled] { cursor: default; opacity: 1 } smart-accordion smart-accordion-item[disabled] .smart-accordion-item-header { cursor: initial } smart-accordion[expand-mode=singleFitHeight] smart-accordion-item .smart-accordion-item-header { height: var(--smart-accordion-item-header-height) } smart-accordion[expand-mode=singleFitHeight] smart-accordion-item .smart-accordion-item-content { overflow-y: auto; height: var(--smart-accordion-expanded-content-height); padding: 0 24px; color: var(--smart-background-color); background: var(--smart-background) } smart-accordion[expand-mode=single] smart-accordion-item .smart-accordion-item-content, smart-accordion[expand-mode=toggle] smart-accordion-item .smart-accordion-item-content, smart-accordion[expand-mode=multiple] smart-accordion-item .smart-accordion-item-content, smart-accordion[expand-mode=none] smart-accordion-item .smart-accordion-item-content { overflow-y: hidden; height: auto } smart-accordion[expand-mode=multiple].smart-container.smart-toggling, smart-accordion[expand-mode=multiple]>.smart-container.smart-toggling { padding: 10px } smart-accordion[disabled], smart-accordion[disabled] smart-accordion-item .smart-accordion-item-header { cursor: default } smart-accordion:focus, smart-accordion:focus smart-accordion-item:focus { outline: 0 } smart-accordion.smart-no-arrow .smart-accordion-item-header>.smart-arrow, smart-accordion.smart-no-arrow .smart-accordion-item-header>.smart-arrow:after { visibility: hidden; width: 0 } smart-accordion.smart-arrow-right smart-accordion-item .smart-accordion-item-header>.smart-arrow { float: right } smart-accordion.smart-arrow-right smart-accordion-item .smart-accordion-item-header>.smart-arrow:after { content: var(--smart-icon-arrow-right) } smart-accordion.smart-arrow-right smart-accordion-item[expanded] .smart-accordion-item-header>.smart-arrow:after { content: var(--smart-icon-arrow-up-alt) } smart-accordion .smart-toggled-item .smart-accordion-item-content { overflow: hidden } smart-accordion:not([animation=none]) { animation-duration: var(--smart-accordion-animation-duration) } smart-accordion:not([animation=none]) * { animation-duration: inherit } smart-accordion:not([animation=none])[expand-mode=singleFitHeight] smart-accordion-item.smart-toggled-item .smart-accordion-item-content { animation: smart-accordion-item-expand-animation-default-mode ease-out; animation-direction: reverse; display: block; animation-duration: inherit; -webkit-animation-iteration-count: 1; animation-iteration-count: 1 } smart-accordion:not([animation=none])[expand-mode=singleFitHeight].smart-toggled-item smart-accordion-item[expanded] .smart-accordion-item-content { animation: smart-accordion-item-expand-animation-default-mode ease-in; animation-duration: inherit; animation-iteration-count: 1 } smart-accordion:not([animation=none])[expand-mode=single] smart-accordion-item.smart-toggled-item .smart-accordion-item-content, smart-accordion:not([animation=none])[expand-mode=toggle] smart-accordion-item.smart-toggled-item .smart-accordion-item-content, smart-accordion:not([animation=none])[expand-mode=multiple] smart-accordion-item.smart-toggled-item .smart-accordion-item-content, smart-accordion:not([animation=none])[expand-mode=none] smart-accordion-item.smart-toggled-item .smart-accordion-item-content { animation: smart-accordion-item-expand-animation ease-out; animation-direction: reverse; display: block; animation-duration: inherit; animation-iteration-count: 1 } smart-accordion:not([animation=none])[expand-mode=single] smart-accordion-item[expanded].smart-toggled-item .smart-accordion-item-content, smart-accordion:not([animation=none])[expand-mode=toggle] smart-accordion-item[expanded].smart-toggled-item .smart-accordion-item-content, smart-accordion:not([animation=none])[expand-mode=multiple] smart-accordion-item[expanded].smart-toggled-item .smart-accordion-item-content, smart-accordion:not([animation=none])[expand-mode=none] smart-accordion-item[expanded].smart-toggled-item .smart-accordion-item-content { animation: smart-accordion-item-expand-animation ease-in; animation-duration: inherit; animation-iteration-count: 1 } smart-accordion:not([animation=none]) smart-accordion-item .smart-accordion-item-header>.smart-arrow.smart-animate-trigger:after { transition: transform .2s ease-out } smart-accordion:not([animation=none]) smart-accordion-item.smart-toggled-item .smart-accordion-item-content { animation: smart-accordion-item-expand-animation-default-mode ease-out; animation-direction: reverse; display: block; animation-duration: inherit; -webkit-animation-iteration-count: 1; animation-iteration-count: 1 } smart-accordion:not([animation=none]) smart-accordion-item[expanded].smart-toggled-item .smart-accordion-item-content { animation: smart-accordion-item-expand-animation-default-mode ease-in; animation-duration: inherit; animation-iteration-count: 1 } smart-accordion[right-to-left]>.smart-container { direction: rtl } :host .smart-ripple { background-color: var(--smart-background-color); opacity: .5 } @keyframes smart-accordion-item-expand-animation-default-mode { 0% { height: 0 } 100% { height: var(--smart-accordion-expanded-content-height) } } @keyframes smart-accordion-item-expand-animation { 0% { height: 0 } 100% { height: var(--smart-accordion-expanded-content-local-height) } } smart-array { width: var(--smart-array-default-width); height: var(--smart-array-default-height); display: block; overflow: visible } smart-array .smart-big-container, smart-array>.smart-container { display: flex } smart-array .smart-array-indexer { display: block; margin-bottom: 2px; width: 100% } smart-array .smart-big-container { background-color: var(--smart-background) } smart-array[show-index-display] .smart-big-container { margin-left: 2px } smart-array .smart-main-container, smart-array .smart-scrollbar-container-horizontal { width: 100% } smart-array .smart-array-element-gap { border-spacing: 0 } smart-array .smart-array-table-data { border: 2px solid transparent; padding: 0; min-width: 0; background-color: transparent; white-space: nowrap } smart-array .smart-array-table-data-gap { border-width: var(--smart-array-element-gap); padding: var(--smart-array-element-gap) } smart-array .smart-scrollbar-container-horizontal { height: 20px } smart-array .smart-scrollbar-container-vertical { width: 20px } smart-array .smart-scrollbar-container-horizontal>smart-scroll-bar, smart-array .smart-scrollbar-container-vertical>smart-scroll-bar { width: 100%; height: 100% } smart-array .smart-array-element { position: relative } smart-array .smart-array-element-selected { border-color: #00f } smart-array .smart-array-element-empty { border-color: #999; color: #999; opacity: .7 } smart-array .smart-array-element>smart-check-box, smart-array .smart-array-element>smart-led, smart-array .smart-array-element>smart-numeric-text-box, smart-array .smart-array-element>smart-power-button, smart-array .smart-array-element>smart-radio-button, smart-array .smart-array-element>smart-switch-button, smart-array .smart-array-element>smart-toggle-button, smart-array smart-switch-button.smart-array-element, smart-array smart-text-box.smart-array-element { display: block } smart-array .smart-array-element>smart-check-box { padding: 0 } .smart-badge { display: inline-block; padding: .25em .4em; font-weight: 700; line-height: 1 } .smart-badge.smart-badge-primary { color: var(--smart-primary-color); background-color: var(--smart-primary) } .smart-badge.smart-badge-secondary { color: var(--smart-secondary-color); background-color: var(--smart-secondary) } .smart-badge.smart-badge-success { color: var(--smart-success-color); background-color: var(--smart-success) } .smart-badge.smart-badge-error { color: var(--smart-error-color); background-color: var(--smart-error) } .smart-badge.smart-badge-info { color: var(--smart-info-color); background-color: var(--smart-info) } .smart-badge.smart-badge-warning { color: var(--smart-warning-color); background-color: var(--smart-warning) } .smart-badge.smart-badge-light { color: var(--smart-light-color); background-color: var(--smart-light) } .smart-badge.smart-badge-dark { color: var(--smart-dark-color); background-color: var(--smart-dark) } .smart-badge.smart-badge-danger { color: var(--smart-error-color); background-color: var(--smart-error) } .smart-badge.smart-badge-pill { border-radius: 10rem } .smart-badge[right-to-left] { direction: rtl } .smart-breadcrumb-feedback, .smart-breadcrumb-feedback *, smart-breadcrumb { box-sizing: border-box } smart-breadcrumb { display: block; width: var(--smart-breadcrumb-default-width); min-width: calc(2 * var(--smart-breadcrumb-padding) + 2 * var(--smart-border-width) + 40px); height: var(--smart-breadcrumb-default-height); border: var(--smart-border-width) solid var(--smart-border); padding: var(--smart-breadcrumb-padding); padding-top: 0; border-top-right-radius: var(--smart-border-top-right-radius); border-top-left-radius: var(--smart-border-top-left-radius); border-bottom-left-radius: var(--smart-border-bottom-left-radius); border-bottom-right-radius: var(--smart-border-bottom-right-radius) } smart-breadcrumb .smart-template-container { height: auto } smart-breadcrumb .smart-template-container .smart-breadcrumb-items { width: 100%; height: auto; display: flex; flex-direction: row; flex-wrap: wrap } .smart-breadcrumb-feedback, smart-breadcrumb .smart-template-container .smart-breadcrumb-items .smart-breadcrumb-item { flex-direction: row; margin-top: var(--smart-breadcrumb-padding); width: auto; padding: 5px; color: var(--smart-background-color) } smart-breadcrumb .smart-template-container .smart-breadcrumb-items .smart-breadcrumb-item { display: flex; align-items: center; position: relative; border: var(--smart-border-width) solid var(--smart-border); margin-right: var(--smart-breadcrumb-horizontal-offset); height: var(--smart-breadcrumb-item-height); background-color: var(--smart-background) } smart-breadcrumb .smart-template-container .smart-breadcrumb-items .smart-breadcrumb-item:not(:last-child):after { position: absolute; width: var(--smart-breadcrumb-horizontal-offset); height: 2px; background-color: var(--smart-border); left: calc(100% + var(--smart-border-width)); top: 50%; content: '' } smart-breadcrumb .smart-template-container .smart-breadcrumb-items .smart-breadcrumb-item>.smart-close-button { display: none; margin-left: 10px; margin-right: 5px; width: 1em; user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; cursor: pointer; font-family: smart-icons } smart-breadcrumb .smart-template-container .smart-breadcrumb-items .smart-breadcrumb-item>.smart-close-button:after { content: var(--smart-icon-close) } smart-breadcrumb .smart-template-container .smart-breadcrumb-items .smart-breadcrumb-item .smart-breadcrumb-item-label { user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none } smart-breadcrumb .smart-template-container .smart-breadcrumb-items>.afterTarget:last-child:after, smart-breadcrumb .smart-template-container .smart-breadcrumb-items>.target:before { position: absolute; width: 2px; height: 100%; background-color: var(--smart-primary); left: calc(-1 * var(--smart-breadcrumb-horizontal-offset)/ 2 - 1px); content: '' } smart-breadcrumb .smart-template-container .smart-breadcrumb-items>.afterTarget:last-child:after { left: calc(100% + var(--smart-breadcrumb-horizontal-offset)/ 2) } smart-breadcrumb .smart-breadcrumb-placeholder { width: 100%; height: 100%; display: flex; padding: 5px } smart-breadcrumb[allow-drag] .smart-template-container .smart-breadcrumb-items .smart-breadcrumb-item { cursor: pointer; touch-action: none } smart-breadcrumb[allow-drag] .smart-template-container .smart-breadcrumb-items .smart-breadcrumb-item.dragged { background-image: linear-gradient(45deg, rgba(0, 0, 0, .1) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, .1) 50%, rgba(0, 0, 0, .1) 75%, transparent 75%, transparent); background-size: 3em 3em } smart-breadcrumb[add-new-item] .smart-template-container .smart-breadcrumb-items>smart-button { --smart-button-padding: 0; position: relative; margin-right: var(--smart-breadcrumb-horizontal-offset); margin-top: var(--smart-breadcrumb-padding); border: var(--smart-border-width) solid var(--smart-border); border-radius: initial; width: var(--smart-breadcrumb-item-height); height: var(--smart-breadcrumb-item-height); text-align: center; font-size: 25px; overflow: visible } smart-breadcrumb[add-new-item] .smart-template-container .smart-breadcrumb-items>smart-button>button { overflow: hidden; user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none } smart-breadcrumb[close-buttons] .smart-template-container .smart-breadcrumb-items .smart-breadcrumb-item>.smart-close-button { display: block } smart-breadcrumb[minimized] { padding: 0; overflow: visible } smart-breadcrumb[minimized] .smart-container { display: flex; align-items: center; position: relative; padding: var(--smart-breadcrumb-padding) } smart-breadcrumb[minimized] .smart-hamburger-icon { width: 40px; height: 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; float: none; cursor: pointer } smart-breadcrumb[minimized] .smart-hamburger-icon.smart-close-button>.smart-hamburger-icon-line-top { width: 29px; transform: translateX(4px) rotate(45deg) } smart-breadcrumb[minimized] .smart-hamburger-icon.smart-close-button>.smart-hamburger-icon-line-center { visibility: hidden } smart-breadcrumb[minimized] .smart-hamburger-icon.smart-close-button>.smart-hamburger-icon-line-bottom { width: 29px; transform: translateX(4px) rotate(-45deg) } smart-breadcrumb[minimized] .smart-hamburger-icon-line { margin-bottom: 5px; border-radius: 10px; width: 30px; height: 5px; background-color: var(--smart-primary); transform-origin: left } smart-breadcrumb[minimized] .smart-hamburger-icon-line-bottom { margin-bottom: 0 } smart-breadcrumb[minimized] .smart-template-container { position: absolute; left: calc(-1 * var(--smart-border-width)); top: calc(100% + 2px + var(--smart-border-width)); margin: calc(var(--smart-drop-down-vertical-offset) + var(--smart-drop-down-element-padding-size)) 0; border-width: var(--smart-border-width); border-style: solid; border-color: var(--smart-border); padding: var(--smart-drop-down-element-padding-size); width: var(--smart-breadcrumb-drop-down-width); background-color: var(--smart-background); box-shadow: var(--smart-elevation-8); z-index: 1 } smart-breadcrumb[minimized] .smart-template-container .smart-breadcrumb-items .smart-breadcrumb-item { width: 100%; margin: 0; justify-content: space-between } smart-breadcrumb[minimized] .smart-template-container .smart-breadcrumb-items .smart-breadcrumb-item:not(:last-child):after { content: none } smart-breadcrumb[minimized] .smart-template-container .smart-breadcrumb-items>smart-button { width: 100%; margin: 0 } smart-breadcrumb[minimized] .smart-template-container .smart-breadcrumb-items>smart-button>button { padding: 0; justify-content: center } smart-breadcrumb[minimized] .smart-template-container .smart-breadcrumb-items>.afterTarget:last-child:after, smart-breadcrumb[minimized] .smart-template-container .smart-breadcrumb-items>.target:before { width: 100%; height: 4px; left: 0; top: calc(-3px) } smart-breadcrumb[minimized] .smart-template-container .smart-breadcrumb-items>.afterTarget:last-child:after { top: 100% } smart-breadcrumb[minimized][animation=none] .smart-template-container.smart-visibility-hidden { display: none } smart-breadcrumb[minimized]:not([animation=none]) .smart-template-container { opacity: 1; transform: scaleY(1); -webkit-transform-origin: top; transform-origin: top; transition: opacity .2s ease-in, visibility .2s ease-in, transform .2s ease-in } smart-breadcrumb[minimized]:not([animation=none]) .smart-template-container.smart-visibility-hidden.not-in-view { left: -9999px; top: -9999px; transition: none } smart-breadcrumb[minimized]:not([animation=none]) .smart-template-container.smart-visibility-hidden { opacity: .2; transform: scaleY(0) } smart-breadcrumb[minimized]:not([animation=none]) .smart-hamburger-icon-line { transition: visibility 20ms ease-in, transform .2s ease-in, width .2s ease-in } .smart-breadcrumb-feedback { align-items: center; border: var(--smart-border-width) solid var(--smart-border); margin-right: var(--smart-breadcrumb-horizontal-offset); height: var(--smart-breadcrumb-item-height); background-color: var(--smart-background); box-shadow: var(--smart-elevation-12); white-space: nowrap; opacity: .8; position: absolute; display: inline-flex; font-family: var(--smart-font-family); font-size: var(--smart-font-size); z-index: 999 } .smart-breadcrumb-feedback:after { margin-left: 10px; content: var(--smart-icon-check); font-family: smart-icons; font-size: 14px; width: 1.5em; border-radius: 100%; height: 1.5em; background-color: var(--smart-success); color: var(--smart-success-color); display: flex; align-items: center; justify-content: center } .smart-breadcrumb-feedback.freeze:after { background-color: inherit; color: var(--smart-primary); content: var(--smart-icon-lock) } .smart-breadcrumb-feedback.unfreeze:after { background-color: inherit; color: var(--smart-primary); content: var(--smart-icon-lock-open) } .smart-breadcrumb-feedback.error:after { background-color: var(--smart-error); color: var(--smart-error-color); content: var(--smart-icon-attention-circled) } .smart-breadcrumb-feedback.data:after { background-color: var(--smart-primary); color: var(--smart-primary-color); content: var(--smart-icon-docs) } smart-breadcrumb[right-to-left]>.smart-container { direction: rtl } smart-breadcrumb[right-to-left]>.smart-container .smart-template-container .smart-breadcrumb-items>.afterTarget:first-child:after { position: absolute; content: ''; width: 2px; height: 100%; top: 0; left: calc(100% + var(--smart-breadcrumb-horizontal-offset)/ 2); background-color: var(--smart-success) } smart-breadcrumb[right-to-left]>.smart-container .smart-template-container .smart-breadcrumb-items .smart-breadcrumb-item>.smart-close-button { margin-left: 5px; margin-right: 10px } .smart-breadcrumb-feedback[right-to-left], smart-breadcrumb[right-to-left]:not([minimized]) .smart-template-container .smart-breadcrumb-items .smart-breadcrumb-item, smart-breadcrumb[right-to-left]:not([minimized])[add-new-item]:not([minimized]) .smart-breadcrumb-items>smart-button { margin-left: var(--smart-breadcrumb-horizontal-offset); margin-right: initial } smart-breadcrumb[right-to-left]>.smart-container .smart-template-container .smart-breadcrumb-items .smart-breadcrumb-item:not(:last-child):after { left: calc(-1 * var(--smart-breadcrumb-horizontal-offset)) } smart-breadcrumb[right-to-left][minimized] .smart-container .smart-template-container { right: calc(-1 * var(--smart-border-width)); left: auto } .smart-breadcrumb-feedback[right-to-left] { direction: rtl } .smart-breadcrumb-feedback[right-to-left]:after { margin-left: initial; margin-right: var(--smart-breadcrumb-horizontal-offset) } smart-button, smart-repeat-button, smart-toggle-button { --smart-button-flat-color: var(--smart-background-color); text-align: center; display: inline-flex; vertical-align: middle; cursor: pointer; text-transform: var(--smart-button-text-transform); letter-spacing: .08929em; overflow: hidden; border-color: var(--smart-border); border-top-left-radius: var(--smart-border-top-left-radius); border-top-right-radius: var(--smart-border-top-right-radius); border-bottom-left-radius: var(--smart-border-bottom-left-radius); border-bottom-right-radius: var(--smart-border-bottom-right-radius); border-width: var(--smart-border-width); border-style: solid; visibility: hidden; font-weight: 500 } smart-button.smart-element, smart-repeat-button.smart-element, smart-toggle-button.smart-element { display: inline-flex; visibility: inherit } smart-button button::-moz-focus-inner, smart-repeat-button button::-moz-focus-inner, smart-toggle-button button::-moz-focus-inner { border: 0 } smart-button.primary, smart-repeat-button.primary, smart-toggle-button.primary { --smart-button-opacity-hover: 0.75; --smart-button-opacity-focus: 0.7; --smart-button-opacity-active: 0.65; --smart-background: var(--smart-primary); --smart-border: var(--smart-primary); --smart-border-rgb: var(--smart-primary-rgb); --smart-background-color: var(--smart-primary-color); --smart-ui-state-hover: var(--smart-primary); --smart-ui-state-border-hover: var(--smart-primary); --smart-ui-state-color-hover: var(--smart-primary-color); --smart-ui-state-active: var(--smart-primary); --smart-ui-state-border-active: var(--smart-primary); --smart-ui-state-color-active: var(--smart-primary-color); --smart-ui-state-focus: var(--smart-primary); --smart-ui-state-border-focus: var(--smart-primary); --smart-ui-state-color-focus: var(--smart-primary-color); --smart-button-flat-color: var(--smart-primary); --smart-button-outlined-color: var(--smart-primary); --smart-button-outlined-border: var(--smart-primary) } smart-button.secondary, smart-repeat-button.secondary, smart-toggle-button.secondary { --smart-button-opacity-hover: 0.75; --smart-button-opacity-focus: 0.7; --smart-button-opacity-active: 0.65; --smart-background: var(--smart-secondary); --smart-border: var(--smart-secondary); --smart-border-rgb: var(--smart-secondary-rgb); --smart-background-color: var(--smart-secondary-color); --smart-ui-state-hover: var(--smart-secondary); --smart-ui-state-border-hover: var(--smart-secondary); --smart-ui-state-color-hover: var(--smart-secondary-color); --smart-ui-state-active: var(--smart-secondary); --smart-ui-state-border-active: var(--smart-secondary); --smart-ui-state-color-active: var(--smart-secondary-color); --smart-ui-state-focus: var(--smart-secondary); --smart-ui-state-border-focus: var(--smart-secondary); --smart-ui-state-color-focus: var(--smart-secondary-color); --smart-button-flat-color: var(--smart-secondary); --smart-button-outlined-color: var(--smart-secondary); --smart-button-outlined-border: var(--smart-secondary) } smart-button.success, smart-repeat-button.success, smart-toggle-button.success { --smart-button-opacity-hover: 0.75; --smart-button-opacity-focus: 0.7; --smart-button-opacity-active: 0.65; --smart-background: var(--smart-success); --smart-border: var(--smart-success); --smart-border-rgb: var(--smart-success-rgb); --smart-background-color: var(--smart-success-color); --smart-ui-state-hover: var(--smart-success); --smart-ui-state-border-hover: var(--smart-success); --smart-ui-state-color-hover: var(--smart-success-color); --smart-ui-state-active: var(--smart-success); --smart-ui-state-border-active: var(--smart-success); --smart-ui-state-color-active: var(--smart-success-color); --smart-ui-state-focus: var(--smart-success); --smart-ui-state-border-focus: var(--smart-success); --smart-ui-state-color-focus: var(--smart-success-color); --smart-button-flat-color: var(--smart-success); --smart-button-outlined-color: var(--smart-success); --smart-button-outlined-border: var(--smart-success) } smart-button.error, smart-repeat-button.error, smart-toggle-button.error { --smart-button-opacity-hover: 0.75; --smart-button-opacity-focus: 0.7; --smart-button-opacity-active: 0.65; --smart-background: var(--smart-error); --smart-border: var(--smart-error); --smart-border-rgb: var(--smart-error-rgb); --smart-background-color: var(--smart-error-color); --smart-ui-state-hover: var(--smart-error); --smart-ui-state-border-hover: var(--smart-error); --smart-ui-state-color-hover: var(--smart-error-color); --smart-ui-state-active: var(--smart-error); --smart-ui-state-border-active: var(--smart-error); --smart-ui-state-color-active: var(--smart-error-color); --smart-ui-state-focus: var(--smart-error); --smart-ui-state-border-focus: var(--smart-error); --smart-ui-state-color-focus: var(--smart-error-color); --smart-button-flat-color: var(--smart-error); --smart-button-outlined-color: var(--smart-error); --smart-button-outlined-border: var(--smart-error) } smart-button.info, smart-repeat-button.info, smart-toggle-button.info { --smart-button-opacity-hover: 0.75; --smart-button-opacity-focus: 0.7; --smart-button-opacity-active: 0.65; --smart-background: var(--smart-info); --smart-border: var(--smart-info); --smart-border-rgb: var(--smart-info-rgb); --smart-background-color: var(--smart-info-color); --smart-ui-state-hover: var(--smart-info); --smart-ui-state-border-hover: var(--smart-info); --smart-ui-state-color-hover: var(--smart-info-color); --smart-ui-state-active: var(--smart-info); --smart-ui-state-border-active: var(--smart-info); --smart-ui-state-color-active: var(--smart-info-color); --smart-ui-state-focus: var(--smart-info); --smart-ui-state-border-focus: var(--smart-info); --smart-ui-state-color-focus: var(--smart-info-color); --smart-button-flat-color: var(--smart-info); --smart-button-outlined-color: var(--smart-info); --smart-button-outlined-border: var(--smart-info) } smart-button.warning, smart-repeat-button.warning, smart-toggle-button.warning { --smart-button-opacity-hover: 0.75; --smart-button-opacity-focus: 0.7; --smart-button-opacity-active: 0.65; --smart-background: var(--smart-warning); --smart-border: var(--smart-warning); --smart-border-rgb: var(--smart-warning-rgb); --smart-background-color: var(--smart-warning-color); --smart-ui-state-hover: var(--smart-warning); --smart-ui-state-border-hover: var(--smart-warning); --smart-ui-state-color-hover: var(--smart-warning-color); --smart-ui-state-active: var(--smart-warning); --smart-ui-state-border-active: var(--smart-warning); --smart-ui-state-color-active: var(--smart-warning-color); --smart-ui-state-focus: var(--smart-warning); --smart-ui-state-border-focus: var(--smart-warning); --smart-ui-state-color-focus: var(--smart-warning-color); --smart-button-flat-color: var(--smart-warning); --smart-button-outlined-color: var(--smart-warning); --smart-button-outlined-border: var(--smart-warning) } smart-button.light, smart-repeat-button.light, smart-toggle-button.light { --smart-button-opacity-hover: 0.75; --smart-button-opacity-focus: 0.7; --smart-button-opacity-active: 0.65; --smart-background: var(--smart-light); --smart-border: var(--smart-light); --smart-border-rgb: var(--smart-light-rgb); --smart-background-color: var(--smart-light-color); --smart-ui-state-hover: var(--smart-light); --smart-ui-state-border-hover: var(--smart-light); --smart-ui-state-color-hover: var(--smart-light-color); --smart-ui-state-active: var(--smart-light); --smart-ui-state-border-active: var(--smart-light); --smart-ui-state-color-active: var(--smart-light-color); --smart-ui-state-focus: var(--smart-light); --smart-ui-state-border-focus: var(--smart-light); --smart-ui-state-color-focus: var(--smart-light-color); --smart-button-flat-color: var(--smart-light); --smart-button-outlined-color: var(--smart-light); --smart-button-outlined-border: var(--smart-light) } smart-button.dark, smart-repeat-button.dark, smart-toggle-button.dark { --smart-button-opacity-hover: 0.75; --smart-button-opacity-focus: 0.7; --smart-button-opacity-active: 0.65; --smart-background: var(--smart-dark); --smart-border: var(--smart-dark); --smart-border-rgb: var(--smart-dark-rgb); --smart-background-color: var(--smart-dark-color); --smart-ui-state-hover: var(--smart-dark); --smart-ui-state-border-hover: var(--smart-dark); --smart-ui-state-color-hover: var(--smart-dark-color); --smart-ui-state-active: var(--smart-dark); --smart-ui-state-border-active: var(--smart-dark); --smart-ui-state-color-active: var(--smart-dark-color); --smart-ui-state-focus: var(--smart-dark); --smart-ui-state-border-focus: var(--smart-dark); --smart-ui-state-color-focus: var(--smart-dark-color); --smart-button-flat-color: var(--smart-dark); --smart-button-outlined-color: var(--smart-dark); --smart-button-outlined-border: var(--smart-dark) } smart-button[hover], smart-repeat-button[hover], smart-toggle-button[hover] { color: var(--smart-ui-state-color-hover); border-color: var(--smart-ui-state-border-hover); background-color: var(--smart-ui-state-hover); transition: background-color .1s linear, box-shadow 280ms ease-in-out; opacity: var(--smart-button-opacity-hover) } smart-button[focus], smart-repeat-button[focus], smart-toggle-button[focus] { color: var(--smart-ui-state-color-focus); border-color: var(--smart-ui-state-border-focus); background-color: var(--smart-ui-state-focus); opacity: var(--smart-button-opacity-focus) } smart-button[active], smart-repeat-button[active], smart-toggle-button[active] { color: var(--smart-ui-state-color-active); border-color: var(--smart-ui-state-border-active); background-color: var(--smart-ui-state-active); transition: background-color .1s linear, box-shadow 280ms ease-in-out; opacity: var(--smart-button-opacity-active) } smart-button[disabled], smart-repeat-button[disabled], smart-toggle-button[disabled] { color: var(--smart-disabled-color); border-color: var(--smart-disabled); background-color: var(--smart-disabled); cursor: default; --smart-background: var(--smart-disabled); --smart-border: var(--smart-disabled); --smart-background-color: var(--smart-disabled-color) } smart-button.large button, smart-repeat-button.large button, smart-toggle-button.large button { padding: var(--smart-button-large-padding); font-size: var(--smart-button-large-font-size) } smart-button.small button, smart-repeat-button.small button, smart-toggle-button.small button { padding: var(--smart-button-small-padding); font-size: var(--smart-button-small-font-size) } smart-button.very-small button, smart-repeat-button.very-small button, smart-toggle-button.very-small button { padding: var(--smart-button-very-small-padding); font-size: var(--smart-button-very-small-font-size) } smart-button.rounded, smart-repeat-button.rounded, smart-toggle-button.rounded { --smart-border-top-left-radius: 50px; --smart-border-top-right-radius: 50px; --smart-border-bottom-left-radius: 50px; --smart-border-bottom-right-radius: 50px; border-radius: var(--smart-border-bottom-left-radius) !important } smart-button.squared, smart-repeat-button.squared, smart-toggle-button.squared { --smart-border-top-left-radius: 0; --smart-border-top-right-radius: 0; --smart-border-bottom-left-radius: 0; --smart-border-bottom-right-radius: 0 } smart-button.flat, smart-button.flat[active], smart-button.flat[hover], smart-repeat-button.flat, smart-repeat-button.flat[active], smart-repeat-button.flat[hover], smart-toggle-button.flat, smart-toggle-button.flat[active], smart-toggle-button.flat[hover] { color: var(--smart-button-flat-color); background: 0 0; border-color: transparent } smart-button.outlined, smart-button.outlined[active], smart-button.outlined[hover], smart-repeat-button.outlined, smart-repeat-button.outlined[active], smart-repeat-button.outlined[hover], smart-toggle-button.outlined, smart-toggle-button.outlined[active], smart-toggle-button.outlined[hover] { color: var(--smart-button-outlined-color); border-color: var(--smart-button-outlined-border); background: 0 0 } smart-button.flat[focus], smart-repeat-button.flat[focus], smart-toggle-button.flat[focus] { border-color: var(--smart-ui-state-focus) } smart-button.flat[checked], smart-repeat-button.flat[checked], smart-toggle-button.flat[checked] { text-decoration: underline; background: var(--smart-ui-state-active) } smart-button.flat .smart-ripple, smart-repeat-button.flat .smart-ripple, smart-toggle-button.flat .smart-ripple { background-color: var(--smart-button-flat-color) } smart-button.outlined, smart-repeat-button.outlined, smart-toggle-button.outlined { border-width: calc(2 * var(--smart-border-width)) } smart-button.outlined[focus], smart-repeat-button.outlined[focus], smart-toggle-button.outlined[focus] { color: var(--smart-button-outlined-color); border-color: var(--smart-ui-state-focus); background: 0 0 } smart-button.outlined[checked], smart-repeat-button.outlined[checked], smart-toggle-button.outlined[checked] { color: var(--smart-ui-state-color-active); border-color: var(--smart-ui-state-active); background: var(--smart-ui-state-active) } smart-button.outlined .smart-ripple, smart-repeat-button.outlined .smart-ripple, smart-toggle-button.outlined .smart-ripple { background-color: var(--smart-button-outlined-color) } smart-button.outlined button.smart-button, smart-repeat-button.outlined button.smart-button, smart-toggle-button.outlined button.smart-button { border-radius: initial } smart-button.raised, smart-repeat-button.raised, smart-toggle-button.raised { box-shadow: var(--smart-elevation-2); transition: background-color .1s linear, box-shadow 280ms ease-in-out } smart-button.raised[hover], smart-repeat-button.raised[hover], smart-toggle-button.raised[hover] { box-shadow: var(--smart-elevation-4) } smart-button.raised button[active], smart-button.raised[active], smart-button.raised[checked], smart-repeat-button.raised button[active], smart-repeat-button.raised[active], smart-repeat-button.raised[checked], smart-toggle-button.raised button[active], smart-toggle-button.raised[active], smart-toggle-button.raised[checked] { box-shadow: var(--smart-elevation-8) } smart-button.raised[focus], smart-button.raised[focus]:not([checked]), smart-repeat-button.raised[focus], smart-repeat-button.raised[focus]:not([checked]), smart-toggle-button.raised[focus], smart-toggle-button.raised[focus]:not([checked]) { box-shadow: var(--smart-elevation-6) } smart-button.floating, smart-repeat-button.floating, smart-toggle-button.floating { border-radius: 50%; width: 48px; height: 48px; box-shadow: var(--smart-elevation-4); transition: background-color .1s linear, box-shadow 280ms ease-in-out } smart-button.floating[hover], smart-repeat-button.floating[hover], smart-toggle-button.floating[hover] { box-shadow: var(--smart-elevation-6) } smart-button.floating[active], smart-button.floating[checked], smart-repeat-button.floating[active], smart-repeat-button.floating[checked], smart-toggle-button.floating[active], smart-toggle-button.floating[checked] { box-shadow: var(--smart-elevation-12) } smart-button.floating[focus], smart-button.floating[focus]:not([checked]), smart-repeat-button.floating[focus], smart-repeat-button.floating[focus]:not([checked]), smart-toggle-button.floating[focus], smart-toggle-button.floating[focus]:not([checked]) { box-shadow: var(--smart-elevation-6) } button.smart-button { position: relative; padding: var(--smart-button-padding); text-align: inherit; vertical-align: inherit; cursor: inherit; text-transform: inherit; font-weight: inherit; letter-spacing: inherit; background: inherit; color: inherit; border: none; -webkit-font-smoothing: antialiased; opacity: var(--smart-button-opacity); white-space: nowrap; border-radius: inherit } .smart-button .smart-ripple { background: var(--smart-background-color) } [smart-toggle-button] .smart-container, smart-toggle-button .smart-container { font-weight: inherit; font-style: inherit } [smart-toggle-button][checked], smart-toggle-button[checked] { color: var(--smart-ui-state-color-selected); border-color: var(--smart-ui-state-border-selected); background-color: var(--smart-ui-state-selected) } .smart-scroll-button .smart-button { padding: 0 } :host(.smart-button.flat) .smart-ripple { background-color: var(--smart-button-flat-color) } :host(.smart-button.outlined) .smart-ripple { background-color: var(--smart-button-outlined-color) } button.smart-button[type]:not(.smart-container) { border-color: var(--smart-border); border-top-left-radius: var(--smart-border-top-left-radius); border-top-right-radius: var(--smart-border-top-right-radius); border-bottom-left-radius: var(--smart-border-bottom-left-radius); border-bottom-right-radius: var(--smart-border-bottom-right-radius); border-width: var(--smart-border-width); border-style: solid; text-align: center; vertical-align: middle; cursor: pointer; text-transform: var(--smart-button-text-transform); font-weight: 500; letter-spacing: .08929em; overflow: hidden; font-style: var(--smart-font-style); font-size: var(--smart-font-size); background: var(--smart-background); outline: 0 } button.smart-button[type]:hover { color: var(--smart-ui-state-color-hover); border-color: var(--smart-ui-state-border-hover); background-color: var(--smart-ui-state-hover) } button.smart-button[type]:not([disabled]):active { color: var(--smart-ui-state-color-active); border-color: var(--smart-ui-state-border-active); background-color: var(--smart-ui-state-active) } smart-button[right-to-left], smart-repeat-button[right-to-left], smart-toggle-button[right-to-left] { direction: rtl } .smart-button-group { display: inline-flex; vertical-align: middle; width: var(--smart-button-group-default-width); height: var(--smart-button-group-default-height); cursor: pointer; text-transform: var(--smart-button-text-transform); letter-spacing: .08929em; overflow: hidden } .smart-button-group .smart-button-group-items { display: flex; align-items: center; height: 100%; width: 100% } .smart-button-group .smart-button-group-items .smart-button-group-item { display: flex; align-items: center; justify-content: center; position: relative; padding: var(--smart-button-padding); cursor: inherit; font-weight: inherit; -webkit-font-smoothing: antialiased; opacity: var(--smart-button-opacity); white-space: nowrap; border-radius: inherit; width: 100%; height: 100% } .smart-button-group .smart-button-group-items .smart-button-group-item>div { overflow: hidden; text-overflow: ellipsis; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none } .smart-button-group .smart-button-group-items .smart-button-group-item:hover { color: var(--smart-ui-state-color-hover); border-color: var(--smart-ui-state-border-hover); background-color: var(--smart-ui-state-hover); opacity: var(--smart-button-opacity-hover) } .smart-button-group .smart-button-group-items .smart-button-group-item[active] { color: var(--smart-ui-state-color-selected); border-color: var(--smart-ui-state-border-selected); background-color: var(--smart-ui-state-selected) } .smart-button-group .smart-button-group-items .smart-button-group-item:active { color: var(--smart-ui-state-color-active); border-color: var(--smart-ui-state-border-active); background-color: var(--smart-ui-state-active); opacity: var(--smart-button-opacity-active) } .smart-button-group.small .smart-button-group-items .smart-button-group-item { padding: var(--smart-button-small-padding); font-size: var(--smart-button-small-font-size) } .smart-button-group.large .smart-button-group-items .smart-button-group-item { padding: var(--smart-button-large-padding); font-size: var(--smart-button-large-font-size) } .smart-button-group:focus .smart-button-group-item[focus]:not(:active) { color: var(--smart-ui-state-color-focus); border-color: var(--smart-ui-state-border-focus); background-color: var(--smart-ui-state-focus); opacity: var(--smart-button-opacity-focus) } .smart-button-group.primary { border-color: var(--smart-primary) } .smart-button-group.primary .smart-button-group-items .smart-button-group-item { color: var(--smart-primary-color); background-color: var(--smart-primary) } .smart-button-group.primary .smart-button-group-items .smart-button-group-item:hover { background-color: rgba(var(--smart-primary-rgb), .8) } .smart-button-group.primary .smart-button-group-items .smart-button-group-item:active, .smart-button-group.primary .smart-button-group-items .smart-button-group-item[active] { color: var(--smart-primary); border-color: var(--smart-ui-state-border-selected); background-color: rgba(var(--smart-primary-rgb), .2) } .smart-button-group.secondary { border-color: var(--smart-secondary) } .smart-button-group.secondary .smart-button-group-items .smart-button-group-item { color: var(--smart-secondary-color); background-color: var(--smart-secondary) } .smart-button-group.secondary .smart-button-group-items .smart-button-group-item:hover { background-color: rgba(var(--smart-secondary-rgb), .8) } .smart-button-group.secondary .smart-button-group-items .smart-button-group-item:active, .smart-button-group.secondary .smart-button-group-items .smart-button-group-item[active] { color: var(--smart-secondary); border-color: var(--smart-ui-state-border-selected); background-color: rgba(var(--smart-secondary-rgb), .2) } .smart-button-group.success { border-color: var(--smart-success) } .smart-button-group.success .smart-button-group-items .smart-button-group-item { color: var(--smart-success-color); background-color: var(--smart-success) } .smart-button-group.success .smart-button-group-items .smart-button-group-item:hover { background-color: rgba(var(--smart-success-rgb), .8) } .smart-button-group.success .smart-button-group-items .smart-button-group-item:active, .smart-button-group.success .smart-button-group-items .smart-button-group-item[active] { color: var(--smart-success); border-color: var(--smart-ui-state-border-selected); background-color: rgba(var(--smart-success-rgb), .2) } .smart-button-group.error { border-color: var(--smart-error) } .smart-button-group.error .smart-button-group-items .smart-button-group-item { color: var(--smart-error-color); background-color: var(--smart-error) } .smart-button-group.error .smart-button-group-items .smart-button-group-item:hover { background-color: rgba(var(--smart-error-rgb), .8) } .smart-button-group.error .smart-button-group-items .smart-button-group-item:active, .smart-button-group.error .smart-button-group-items .smart-button-group-item[active] { color: var(--smart-error); border-color: var(--smart-ui-state-border-selected); background-color: rgba(var(--smart-error-rgb), .2) } .smart-button-group.info { border-color: var(--smart-info) } .smart-button-group.info .smart-button-group-items .smart-button-group-item { color: var(--smart-info-color); background-color: var(--smart-info) } .smart-button-group.info .smart-button-group-items .smart-button-group-item:hover { background-color: rgba(var(--smart-info-rgb), .8) } .smart-button-group.info .smart-button-group-items .smart-button-group-item:active, .smart-button-group.info .smart-button-group-items .smart-button-group-item[active] { color: var(--smart-info); border-color: var(--smart-ui-state-border-selected); background-color: rgba(var(--smart-info-rgb), .2) } .smart-button-group.warning { border-color: var(--smart-warning) } .smart-button-group.warning .smart-button-group-items .smart-button-group-item { color: var(--smart-warning-color); background-color: var(--smart-warning) } .smart-button-group.warning .smart-button-group-items .smart-button-group-item:hover { background-color: rgba(var(--smart-warning-rgb), .8) } .smart-button-group.warning .smart-button-group-items .smart-button-group-item:active, .smart-button-group.warning .smart-button-group-items .smart-button-group-item[active] { color: var(--smart-warning); border-color: var(--smart-ui-state-border-selected); background-color: rgba(var(--smart-warning-rgb), .2) } .smart-button-group.light { border-color: var(--smart-light) } .smart-button-group.light .smart-button-group-items .smart-button-group-item { color: var(--smart-light-color); background-color: var(--smart-light) } .smart-button-group.light .smart-button-group-items .smart-button-group-item:hover { background-color: rgba(var(--smart-light-rgb), .8) } .smart-button-group.light .smart-button-group-items .smart-button-group-item:active, .smart-button-group.light .smart-button-group-items .smart-button-group-item[active] { color: var(--smart-light); border-color: var(--smart-ui-state-border-selected); background-color: rgba(var(--smart-light-rgb), .2) } .smart-button-group.dark { border-color: var(--smart-dark) } .smart-button-group.dark .smart-button-group-items .smart-button-group-item { color: var(--smart-dark-color); background-color: var(--smart-dark) } .smart-button-group.dark .smart-button-group-items .smart-button-group-item:hover { background-color: rgba(var(--smart-dark-rgb), .8) } .smart-button-group.dark .smart-button-group-items .smart-button-group-item:active, .smart-button-group.dark .smart-button-group-items .smart-button-group-item[active] { color: var(--smart-dark); border-color: var(--smart-ui-state-border-selected); background-color: rgba(var(--smart-dark-rgb), .2) } .smart-button-group:not([animation=none]) .smart-button-group-item { transition: background-color .1s linear, box-shadow 280ms ease-in-out } .smart-button-group[right-to-left] .smart-button-group-items { direction: rtl } .smart-calendar, .smart-calendar[months="1"] { min-width: var(--smart-calendar-default-width); min-height: var(--smart-calendar-default-height) } .smart-calendar { width: var(--smart-calendar-default-width); height: var(--smart-calendar-default-height) } .smart-calendar:focus { border-color: var(--smart-outline) } .smart-calendar>.smart-container { user-select: none; -moz-user-select: none; -webkit-user-select: none } .smart-calendar.smart-container, .smart-calendar>.smart-container { display: flex; justify-content: center; flex-direction: column } .smart-calendar smart-drop-down-list { --smart-drop-down-list-default-min-height: initial } .smart-calendar smart-tooltip { top: 0 } .smart-calendar smart-tooltip .smart-tooltip-content { border-top-left-radius: var(--smart-border-top-left-radius); border-top-right-radius: var(--smart-border-top-right-radius); border-bottom-left-radius: var(--smart-border-bottom-left-radius); border-bottom-right-radius: var(--smart-border-bottom-right-radius) } .smart-calendar input { background: inherit; color: inherit } .smart-calendar button:focus { border: 1px solid var(--smart-outline); outline: 0 } .smart-calendar .smart-calendar-container { width: 100%; height: 100%; border: initial; padding: 0 } .smart-calendar .smart-calendar-container>.smart-calendar-body { position: relative; width: 96%; height: calc(100% - var(--smart-calendar-header-height)); display: flex; padding: 2px; padding-left: initial; padding-right: initial; margin-left: 2%; margin-right: 2%; cursor: default; overflow: hidden; outline: initial; user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; touch-action: none } .smart-calendar .smart-calendar-container>.smart-calendar-body:focus .smart-calendar-date-view-container .smart-calendar-cell:focus, .smart-calendar .smart-calendar-container>.smart-calendar-body:focus .smart-calendar-date-view-container .smart-calendar-cell[focus] { background-color: var(--smart-background); color: var(--smart-primary); border-color: var(--smart-primary) } .smart-calendar .smart-calendar-footer, .smart-calendar .smart-calendar-header { background: var(--smart-surface); color: var(--smart-surface-color); width: 100%; outline: initial } .smart-calendar .smart-calendar-container>.smart-calendar-body>div { display: flex; flex-shrink: 0; flex-wrap: wrap; font-size: inherit } .smart-calendar .smart-calendar-container>.smart-calendar-body .smart-hidden { display: none } .smart-calendar .smart-calendar-header { display: flex; align-items: center; justify-content: center; border: var(--smart-border-width) solid var(--smart-border); height: var(--smart-calendar-header-height); border-left-width: 0; border-right-width: 0; border-top-width: 0; box-sizing: border-box; text-transform: var(--smart-calendar-header-text-transform) } .smart-calendar .smart-calendar-header.smart-hidden { display: none } .smart-calendar .smart-calendar-footer { display: flex; align-items: center; justify-content: center; border: var(--smart-border-width) solid var(--smart-border); height: var(--smart-calendar-footer-height); border-left-width: 0; border-right-width: 0; border-top-width: 0; box-sizing: border-box; text-transform: var(--smart-calendar-footer-text-transform) } .smart-calendar .smart-calendar-footer.smart-hidden { display: none } .smart-calendar .smart-calendar-title { width: 100%; padding: var(--smart-calendar-title-padding); font-size: inherit; font-family: inherit; background: var(--smart-primary); border: none; color: var(--smart-primary-color); user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; overflow: hidden; display: flex; justify-content: center; flex-direction: column; text-transform: var(--smart-calendar-title-text-transform); height: calc(var(--smart-calendar-title-height)) } .smart-calendar .smart-calendar-title.smart-hidden { display: none } .smart-calendar .smart-calendar-title div:first-of-type { font-size: 70% } .smart-calendar .smart-calendar-title .smart-calendar-selected { opacity: 1 } .smart-calendar .smart-calendar-title div { position: relative; opacity: .5; font-size: 125%; cursor: pointer; display: table; border: 1px solid transparent } .smart-calendar .smart-calendar-cell[other-month] { background: var(--smart-background); color: var(--smart-background-color); border-color: var(--smart-border); opacity: .5 } .smart-calendar .smart-calendar-cell[focus] { border-color: var(--smart-outline) } .smart-calendar .smart-calendar-date-element { cursor: default; align-items: center; border: 1px solid transparent; position: relative; display: flex; width: 74%; height: 100%; outline: initial; overflow: hidden; text-align: center } .smart-calendar .smart-calendar-date-element:focus { border-color: var(--smart-outline) } .smart-calendar .smart-calendar-date-element>div { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; outline: initial; font-size: inherit } .smart-calendar .smart-calendar-date-element>div:first-of-type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none } .smart-calendar .smart-calendar-date-element div.smart-hidden { display: none } .smart-calendar .smart-calendar-date-element .smart-ripple { background-color: var(--smart-button-color); opacity: .2 } .smart-calendar .smart-calendar-button .smart-button { font-family: var(--smart-font-family-icon); padding: 0; border-radius: 0; border: none; background: 0 0; min-height: initial } .smart-calendar .smart-calendar-button[next-month], .smart-calendar .smart-calendar-button[prev-month] { width: var(--smart-calendar-navigation-button-size); min-width: var(--smart-calendar-navigation-button-size); height: var(--smart-calendar-navigation-button-size); position: relative; font-size: initial; display: inline-block; font-weight: inherit; font-family: var(--smart-font-family-icon); border-radius: 100%; background: 0 0; border: none; color: inherit } .smart-calendar .smart-calendar-button[next-month][active] button, .smart-calendar .smart-calendar-button[prev-month][active] button { border: 1px solid var(--smart-ui-state-hover); background-color: var(--smart-ui-state-hover); color: var(--smart-primary) } .smart-calendar .smart-calendar-button[next-year], .smart-calendar .smart-calendar-button[prev-year] { position: relative; display: block; cursor: default; font-size: 10px; padding: 0; margin: 0; border-radius: 0; border-color: var(--smart-border); border-left: none } .smart-calendar .smart-calendar-button[next-year] span:after { content: var(--smart-icon-arrow-up) } .smart-calendar .smart-calendar-button[prev-year] { border-top-color: transparent } .smart-calendar .smart-calendar-button[prev-year] span:after { content: var(--smart-icon-arrow-down) } .smart-calendar [next-month][focus] button, .smart-calendar [next-year][focus] button, .smart-calendar [prev-month][focus] button, .smart-calendar [prev-year][focus] button { border: 1px solid var(--smart-border-focus); background-color: var(--smart-background-focus); outline: 0 } .smart-calendar .smart-calendar-list-view.smart-scroll-viewer { --smart-input-drop-down-menu-height: 100%; --smart-input-drop-down-menu-width: 100%; width: 100%; height: 100%; border: initial; position: absolute; color: inherit; text-align: center; top: 0; left: 0; opacity: initial; z-index: initial; padding: initial; float: initial; transform: initial; margin: initial; transition: initial; box-shadow: initial } .smart-calendar .smart-calendar-week .smart-calendar-cell, .smart-calendar .smart-calendar-week .smart-calendar-week-number { padding: 0; text-overflow: ellipsis; width: var(--smart-calendar-cell-size); height: var(--smart-calendar-cell-size); line-height: calc(var(--smart-calendar-cell-size) - 2px); overflow: hidden; position: relative } .smart-calendar .smart-calendar-list-view.smart-scroll-viewer>.smart-container { max-height: initial } .smart-calendar .smart-calendar-list-view.smart-scroll-viewer a { pointer-events: none } .smart-calendar .smart-calendar-week { display: flex; overflow: hidden; text-align: center; justify-content: center } .smart-calendar .smart-calendar-week .smart-calendar-cell { border: 1px solid transparent; border-top-left-radius: var(--smart-calendar-cell-border-top-left-radius); border-top-right-radius: var(--smart-calendar-cell-border-top-right-radius); border-bottom-left-radius: var(--smart-calendar-cell-border-bottom-left-radius); border-bottom-right-radius: var(--smart-calendar-cell-border-bottom-right-radius); margin-right: var(--smart-calendar-cell-spacing); margin-bottom: var(--smart-calendar-cell-spacing) } .smart-calendar .smart-calendar-week .smart-calendar-cell[selected], .smart-calendar .smart-calendar-week .smart-calendar-cell[selected][hover] { background-color: var(--smart-primary); color: var(--smart-primary-color); border-color: var(--smart-primary) } .smart-calendar .smart-calendar-week .smart-calendar-cell[today], .smart-calendar .smart-calendar-week .smart-calendar-cell[today][hover] { background: var(--smart-secondary); color: var(--smart-secondary-color); border-color: var(--smart-secondary) } .smart-calendar .smart-calendar-week .smart-calendar-cell[selected][today] { background-color: var(--smart-primary); color: var(--smart-primary-color); border-color: var(--smart-primary) } .smart-calendar .smart-calendar-week .smart-calendar-cell:focus:not([selected]), .smart-calendar .smart-calendar-week .smart-calendar-cell[focus]:not([selected]) { background-color: var(--smart-background); color: var(--smart-primary); border-color: var(--smart-primary) } .smart-calendar .smart-calendar-week .smart-calendar-cell .smart-ripple { background-color: var(--smart-primary-color); opacity: .5 } .smart-calendar .smart-calendar-week .smart-calendar-week-number { border: 1px solid transparent; border-top-left-radius: var(--smart-calendar-cell-border-top-left-radius); border-top-right-radius: var(--smart-calendar-cell-border-top-right-radius); border-bottom-left-radius: var(--smart-calendar-cell-border-bottom-left-radius); border-bottom-right-radius: var(--smart-calendar-cell-border-bottom-right-radius); margin: 0 } .smart-calendar .smart-calendar-week.smart-hidden { display: none } .smart-calendar .smart-calendar-week div[restricted] { cursor: not-allowed; opacity: .55; text-decoration: line-through } .smart-calendar .smart-calendar-week div[hover]:not([restricted]) { background-color: var(--smart-ui-state-hover); color: var(--smart-ui-state-color-hover); border-color: var(--smart-ui-state-border-hover) } .smart-calendar .smart-calendar-week div[important] { background: var(--smart-calendar-important-date-background); color: var(--smart-calendar-important-date-color); border-color: var(--smart-calendar-important-date-border-color) } @-moz-document url-prefix() { .smart-calendar .smart-calendar-week div { padding: initial } } .smart-calendar .smart-calendar-week-number { display: none; margin: auto } .smart-calendar .smart-calendar-week-titles { display: flex; overflow: hidden; text-align: center; justify-content: center } .smart-calendar .smart-calendar-week-titles div:first-child { display: none; margin: auto } .smart-calendar .smart-calendar-week-titles .smart-calendar-week-title { text-overflow: ellipsis; overflow: hidden; border: 1px solid transparent; padding: 0; border-top-left-radius: var(--smart-calendar-cell-border-top-left-radius); border-top-right-radius: var(--smart-calendar-cell-border-top-right-radius); border-bottom-left-radius: var(--smart-calendar-cell-border-bottom-left-radius); border-bottom-right-radius: var(--smart-calendar-cell-border-bottom-right-radius); width: var(--smart-calendar-cell-size); height: var(--smart-calendar-cell-size); line-height: calc(var(--smart-calendar-cell-size) - 2px); margin-right: var(--smart-calendar-cell-spacing); margin-bottom: var(--smart-calendar-cell-spacing); position: relative; text-transform: var(--smart-calendar-week-title-text-transform) } .smart-calendar .smart-calendar-months-container { order: 1; width: 100%; height: 100%; align-items: center } .smart-calendar .smart-calendar-month { display: flex; overflow: hidden; text-align: center; justify-content: center; flex-direction: column; max-width: var(--smart-calendar-default-width); margin: auto } .smart-calendar .smart-calendar-month-name { display: none } .smart-calendar .smart-calendar-month-separator { display: flex; overflow: hidden; text-align: center; justify-content: center; width: 50%; order: 2 } .smart-calendar .smart-calendar-month-element { position: relative; width: 70%; height: 80%; margin: 5% 0; text-align: center; font-size: inherit } .smart-calendar .smart-calendar-year-container:focus { border: 1px solid var(--smart-outline); outline: 0 } .smart-calendar .smart-calendar-year-element { outline: 0; width: 25%; height: 80%; margin-left: 5%; padding: 2px; text-align: center; font-size: inherit; border-style: solid; border-width: 1px; border-color: var(--smart-border); border-top-left-radius: var(--smart-border-top-left-radius); border-top-right-radius: 0; border-bottom-left-radius: var(--smart-border-bottom-left-radius); border-bottom-right-radius: 0; background: var(--smart-background) } .smart-calendar .smart-calendar-year-element:focus { border-color: var(--smart-outline) } .smart-calendar .smart-calendar-year-elements { display: flex; width: 10%; height: 80%; flex-direction: column; align-items: center; justify-content: space-around } .smart-calendar .smart-calendar-year-elements>smart-repeat-button { height: 50%; width: 100% } .smart-calendar .smart-calendar-year-selector { display: inline-block } .smart-calendar .smart-calendar-next-months-container { order: 3; width: 100%; height: 100%; align-items: center } @-moz-document url-prefix() { .smart-calendar .smart-calendar-months-container, .smart-calendar .smart-calendar-next-months-container { line-height: initial } } .smart-calendar .smart-calendar-date-container:focus { border: 1px solid var(--smart-outline); outline: 0 } .smart-calendar .smart-calendar-date-view-container { width: 100%; height: 100%; text-align: center; flex-direction: row; align-items: center } .smart-calendar .smart-calendar-date-view-container.smart-list-display-mode-view { flex-direction: column } .smart-calendar .smart-calendar-date-view-container .smart-calendar-cell { display: flex; justify-content: center; align-items: center; position: relative; width: 23%; margin: 0 1%; height: 23%; border: 1px solid transparent; border-top-left-radius: var(--smart-calendar-cell-border-top-left-radius); border-top-right-radius: var(--smart-calendar-cell-border-top-right-radius); border-bottom-left-radius: var(--smart-calendar-cell-border-bottom-left-radius); border-bottom-right-radius: var(--smart-calendar-cell-border-bottom-right-radius) } .smart-calendar .smart-calendar-date-view-container .smart-calendar-cell[focus] { border-color: var(--smart-outline) } .smart-calendar .smart-calendar-date-view-container .smart-calendar-cell[other-month] { background: var(--smart-background); color: var(--smart-background-color); border-color: var(--smart-border); opacity: .5 } .smart-calendar .smart-calendar-date-view-container .smart-visibility-hidden { visibility: visible; opacity: .55 } .smart-calendar .smart-calendar-animation-panel { position: absolute; background-color: var(--smart-background); justify-content: center; align-items: center; pointer-events: none } .smart-calendar[months] .smart-calendar-month { width: 50% } .smart-calendar[months] .smart-calendar-month-name { display: initial } .smart-calendar[hide-day-names] .smart-calendar-week-titles, .smart-calendar[months="1"] .smart-calendar-month-name { display: none } .smart-calendar[months]:not([months="1"]) { width: calc(2 * var(--smart-calendar-default-width) + var(--smart-calendar-cell-size)); height: calc(var(--smart-calendar-title-height) + var(--smart-calendar-cell-spacing) + 7 * (var(--smart-calendar-cell-spacing) + var(--smart-calendar-cell-size)) + var(--smart-calendar-header-height) + var(--smart-calendar-footer-height)) } .smart-calendar[months="1"] { width: var(--smart-calendar-default-width); height: var(--smart-calendar-default-height) } .smart-calendar[months="1"] .smart-calendar-month { width: 100%; font-size: 100% } .smart-calendar[months="3"], .smart-calendar[months="4"] { --smart-calendar-default-height: calc(2 * calc(var(--smart-calendar-title-height) + var(--smart-calendar-cell-spacing) + 7 * (var(--smart-calendar-cell-spacing) + var(--smart-calendar-cell-size)) + var(--smart-calendar-header-height))) } .smart-calendar[months="5"], .smart-calendar[months="6"] { --smart-calendar-default-height: calc(3 * calc(var(--smart-calendar-title-height) + var(--smart-calendar-cell-spacing) + 7 * (var(--smart-calendar-cell-spacing) + var(--smart-calendar-cell-size)) + var(--smart-calendar-header-height))) } .smart-calendar[months="7"], .smart-calendar[months="8"] { --smart-calendar-default-height: calc(4 * calc(var(--smart-calendar-title-height) + var(--smart-calendar-cell-spacing) + 7 * (var(--smart-calendar-cell-spacing) + var(--smart-calendar-cell-size)) + var(--smart-calendar-header-height))) } .smart-calendar[months="9"], .smart-calendar[months="10"] { --smart-calendar-default-height: calc(5 * calc(var(--smart-calendar-title-height) + var(--smart-calendar-cell-spacing) + 7 * (var(--smart-calendar-cell-spacing) + var(--smart-calendar-cell-size)) + var(--smart-calendar-header-height))) } .smart-calendar[months="12"], .smart-calendar[months="11"] { --smart-calendar-default-height: calc(6 * calc(var(--smart-calendar-title-height) + var(--smart-calendar-cell-spacing) + 7 * (var(--smart-calendar-cell-spacing) + var(--smart-calendar-cell-size)) + var(--smart-calendar-header-height))) } @media only screen and (max-width:768px) { .smart-calendar[months] .smart-calendar-month { width: 100% } .smart-calendar[months="2"] { height: calc(var(--smart-calendar-title-height) + var(--smart-calendar-cell-spacing) + 7 * (var(--smart-calendar-cell-spacing) + var(--smart-calendar-cell-size)) + var(--smart-calendar-header-height) + var(--smart-calendar-footer-height)) } .smart-calendar[months="3"] { --smart-calendar-default-height: calc(3 * calc(var(--smart-calendar-title-height) + var(--smart-calendar-cell-spacing) + 7 * (var(--smart-calendar-cell-spacing) + var(--smart-calendar-cell-size)) + var(--smart-calendar-header-height))) } .smart-calendar[months="4"] { --smart-calendar-default-height: calc(4 * calc(var(--smart-calendar-title-height) + var(--smart-calendar-cell-spacing) + 7 * (var(--smart-calendar-cell-spacing) + var(--smart-calendar-cell-size)) + var(--smart-calendar-header-height))) } .smart-calendar[months="5"] { --smart-calendar-default-height: calc(5 * calc(var(--smart-calendar-title-height) + var(--smart-calendar-cell-spacing) + 7 * (var(--smart-calendar-cell-spacing) + var(--smart-calendar-cell-size)) + var(--smart-calendar-header-height))) } .smart-calendar[months="6"] { --smart-calendar-default-height: calc(6 * calc(var(--smart-calendar-title-height) + var(--smart-calendar-cell-spacing) + 7 * (var(--smart-calendar-cell-spacing) + var(--smart-calendar-cell-size)) + var(--smart-calendar-header-height))) } .smart-calendar[months="7"] { --smart-calendar-default-height: calc(7 * calc(var(--smart-calendar-title-height) + var(--smart-calendar-cell-spacing) + 7 * (var(--smart-calendar-cell-spacing) + var(--smart-calendar-cell-size)) + var(--smart-calendar-header-height))) } .smart-calendar[months="8"] { --smart-calendar-default-height: calc(8 * calc(var(--smart-calendar-title-height) + var(--smart-calendar-cell-spacing) + 7 * (var(--smart-calendar-cell-spacing) + var(--smart-calendar-cell-size)) + var(--smart-calendar-header-height))) } .smart-calendar[months="9"] { --smart-calendar-default-height: calc(9 * calc(var(--smart-calendar-title-height) + var(--smart-calendar-cell-spacing) + 7 * (var(--smart-calendar-cell-spacing) + var(--smart-calendar-cell-size)) + var(--smart-calendar-header-height))) } .smart-calendar[months="10"] { --smart-calendar-default-height: calc(10 * calc(var(--smart-calendar-title-height) + var(--smart-calendar-cell-spacing) + 7 * (var(--smart-calendar-cell-spacing) + var(--smart-calendar-cell-size)) + var(--smart-calendar-header-height))) } .smart-calendar[months="11"] { --smart-calendar-default-height: calc(11 * calc(var(--smart-calendar-title-height) + var(--smart-calendar-cell-spacing) + 7 * (var(--smart-calendar-cell-spacing) + var(--smart-calendar-cell-size)) + var(--smart-calendar-header-height))) } .smart-calendar[months="12"] { --smart-calendar-default-height: calc(12 * calc(var(--smart-calendar-title-height) + var(--smart-calendar-cell-spacing) + 7 * (var(--smart-calendar-cell-spacing) + var(--smart-calendar-cell-size)) + var(--smart-calendar-header-height))) } } .smart-calendar[view-sections*=footer] { --smart-calendar-default-height: calc(var(--smart-calendar-title-height) + var(--smart-calendar-cell-spacing) + 7 * (var(--smart-calendar-cell-spacing) + var(--smart-calendar-cell-size)) + var(--smart-calendar-header-height) + var(--smart-calendar-footer-height)) } .smart-calendar[view-sections*=footer][view-sections*=header] .smart-calendar-container>.smart-calendar-body { height: calc(100% - var(--smart-calendar-header-height) - var(--smart-calendar-footer-height)) } .smart-calendar[view-sections*=title] { --smart-calendar-default-height: calc(var(--smart-calendar-title-height) + var(--smart-calendar-cell-spacing) + 7 * (var(--smart-calendar-cell-spacing) + var(--smart-calendar-cell-size)) + var(--smart-calendar-header-height)) } .smart-calendar[view-sections*=title] .smart-calendar-container { width: 100%; height: calc(100% - calc(var(--smart-calendar-title-height))) } .smart-calendar[view-sections*=title][view-sections*=footer] { --smart-calendar-default-height: calc(var(--smart-calendar-title-height) + var(--smart-calendar-cell-spacing) + 7 * (var(--smart-calendar-cell-spacing) + var(--smart-calendar-cell-size)) + var(--smart-calendar-header-height) + var(--smart-calendar-footer-height)) } .smart-calendar[scroll-buttons-position=near] .smart-calendar-button[prev-month] { order: 1 } .smart-calendar[scroll-buttons-position=near] .smart-calendar-button[next-month] { order: 2 } .smart-calendar[scroll-buttons-position=near] .smart-calendar-date-element { order: 3 } .smart-calendar[scroll-buttons-position=far] .smart-calendar-date-element { order: 1 } .smart-calendar[scroll-buttons-position=far] .smart-calendar-button[prev-month] { order: 2 } .smart-calendar[scroll-buttons-position=far] .smart-calendar-button[next-month] { order: 3 } .smart-calendar[scroll-buttons-navigation-mode=portrait] .smart-calendar-month-separator { width: 100%; height: 50% } .smart-calendar[scroll-buttons-navigation-mode=portrait] .smart-calendar-container>.smart-calendar-body { flex-direction: column } .smart-calendar[calendar-mode=classic] .smart-calendar-title div { cursor: initial } .smart-calendar[calendar-mode=classic] .smart-calendar-date-element { align-items: initial; overflow: initial } .smart-calendar[display-mode-view=list][display-mode=year] .smart-calendar-container>.smart-calendar-body, .smart-calendar[display-mode-view=list][display-mode=decade] .smart-calendar-container>.smart-calendar-body { touch-action: auto } .smart-calendar[hide-other-month-days] .smart-calendar-cell[other-month] { visibility: hidden } .smart-calendar[week-numbers] { --smart-calendar-default-width: calc(var(--smart-calendar-cell-spacing) + 8 * (var(--smart-calendar-cell-spacing) + var(--smart-calendar-cell-size))) } .smart-calendar[week-numbers][view-sections*=title][view=landscape] { --smart-calendar-default-width: calc(var(--smart-calendar-title-height) + var(--smart-calendar-cell-spacing) + 8 * (var(--smart-calendar-cell-spacing) + var(--smart-calendar-cell-size))) } .smart-calendar[week-numbers] .smart-calendar-week-number, .smart-calendar[week-numbers] .smart-calendar-week-titles div:first-child { display: initial } .smart-calendar[view=portrait].smart-container, .smart-calendar[view=portrait]>.smart-container { display: flex; justify-content: center; flex-direction: column } .smart-calendar[view=landscape] { --smart-calendar-default-width: calc(var(--smart-calendar-title-height) + var(--smart-calendar-cell-spacing) + 7 * (var(--smart-calendar-cell-spacing) + var(--smart-calendar-cell-size))); --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)) } .smart-calendar[view=landscape].smart-container, .smart-calendar[view=landscape]>.smart-container { flex-direction: row } .smart-calendar[view=landscape] .smart-calendar-container { width: calc(100% - calc(var(--smart-calendar-title-height))); height: 100% } .smart-calendar[view=landscape] .smart-calendar-title { width: calc(var(--smart-calendar-title-height)); height: 100%; justify-content: flex-start } .smart-calendar[view=landscape][view-sections*=footer] { --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) + var(--smart-calendar-footer-height)) } .smart-calendar[animation=none] .smart-calendar-body .smart-calendar-month-separator, .smart-calendar[animation=none] .smart-calendar-body .smart-calendar-next-months-container { display: none } .smart-calendar[right-to-left] .smart-calendar-date-element>div, .smart-calendar[right-to-left] .smart-calendar-date-view-container, .smart-calendar[right-to-left] .smart-calendar-date-view-container .smart-calendar-cell, .smart-calendar[right-to-left] .smart-calendar-footer, .smart-calendar[right-to-left] .smart-calendar-title, .smart-calendar[right-to-left] .smart-calendar-week .smart-calendar-cell, .smart-calendar[right-to-left] .smart-calendar-week .smart-calendar-week-number, .smart-calendar[right-to-left] .smart-calendar-week-titles .smart-calendar-week-title { direction: rtl } .smart-calendar[right-to-left] .smart-calendar-month-element { direction: initial } .smart-calendar[right-to-left] .smart-calendar-year-element { margin-left: initial; margin-right: 5% } .smart-calendar[right-to-left][view=landscape]>.smart-container { flex-direction: row-reverse } .smart-cards { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-evenly; width: 100%; max-width: 1500px; margin-left: auto; margin-right: auto; background-color: var(--smart-surface) } @media only screen and (max-width:768px) { .smart-cards smart-card { margin: 0 10px 10px } } smart-card { display: inline-block; width: 30.5%; min-height: 20px; margin: 1%; box-shadow: var(--smart-elevation-2); box-sizing: border-box; font-size: inherit } @media only screen and (max-width:1024px) { smart-card { display: inline-block; width: 47% } } @media only screen and (max-width:768px) { smart-card { display: block; width: 100%; margin: 0; max-height: 100vh; overflow-y: auto } } smart-card:hover { box-shadow: var(--smart-elevation-4) } smart-card.simple { box-shadow: unset; width: auto; margin: 0 } smart-card[right-to-left].smart-container, smart-card[right-to-left]>.smart-container { direction: rtl } .smart-card-view { width: var(--smart-card-view-default-width); min-width: var(--smart-card-view-column-min-width); height: var(--smart-card-view-default-height); min-height: 100px } .smart-card-view.smart-container { position: relative; contain: layout style } .smart-card-view.smart-container>smart-scroll-viewer, .smart-card-view>.smart-container>smart-scroll-viewer { position: relative; contain: layout style; border: none; width: 100%; height: 100%; background-color: transparent } .smart-card-view.smart-container>smart-scroll-viewer .smart-scroll-viewer-content-container, .smart-card-view>.smart-container>smart-scroll-viewer .smart-scroll-viewer-content-container { display: flex; padding: 0 } .smart-card-view.smart-container[modal], .smart-card-view>.smart-container[modal] { position: relative; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } .smart-card-view.smart-container[modal]:after, .smart-card-view>.smart-container[modal]:after { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: #000; opacity: .3; pointer-events: none; cursor: default; -moz-user-select: none; -webkit-user-select: none; user-select: none } .smart-card-view.smart-container[modal] .smart-indicator, .smart-card-view>.smart-container[modal] .smart-indicator { position: relative; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } .smart-card-view.smart-container[modal] .smart-carousel-item.smart-active, .smart-card-view>.smart-container[modal] .smart-carousel-item.smart-active { pointer-events: none } .smart-card-view smart-card { display: flex; margin: 0; border: var(--smart-border-width) solid; width: unset; padding: var(--smart-data-view-padding); overflow: auto; font-family: inherit; font-size: inherit; background-color: var(--smart-background); color: var(--smart-background-color); border-top-left-radius: var(--smart-border-top-left-radius); border-top-right-radius: var(--smart-border-top-right-radius); border-bottom-left-radius: var(--smart-border-bottom-left-radius); border-bottom-right-radius: var(--smart-border-bottom-right-radius) } .smart-card-view smart-card>.smart-container { display: grid; grid-template-rows: 1fr; grid-row-gap: var(--smart-card-view-vertical-offset); overflow: auto } .smart-card-view smart-card .smart-arrow-up.collapsed { transform: rotate(-180deg) } .smart-card-view smart-card .smart-card-view-content.smart-visibility-hidden { margin-top: 0; height: 0; transform: scaleY(0); opacity: 0 } .smart-card-view smart-card.collapsed { height: auto !important; align-self: start } .smart-card-view smart-card[updating] .smart-card-view-content, .smart-card-view smart-card[updating] .smart-card-view-title .smart-arrow-up { transition: none } .smart-card-view smart-card.drop-target { position: relative } .smart-card-view smart-card.drop-target:after { content: ''; position: absolute; width: 10%; height: 5000px; background-color: var(--smart-primary); text-decoration: underline; top: 0 } .smart-card-view smart-card.drop-target.left:after { left: 0 } .smart-card-view smart-card.drop-target.right:after { right: 0 } .smart-card-view smart-card.dragged { position: relative } .smart-card-view smart-card.dragged:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 5000px; background-image: linear-gradient(45deg, rgba(0, 0, 0, .1) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, .1) 50%, rgba(0, 0, 0, .1) 75%, transparent 75%, transparent); background-size: 3em 3em; opacity: .8 } .smart-card-view smart-carousel { width: 100% } .smart-card-view smart-carousel .smart-carousel-item { border-bottom: 1px solid var(--smart-border); background-size: cover } .smart-card-view smart-carousel .smart-carousel-item.smart-active { pointer-events: none } .smart-card-view smart-carousel .smart-indicator { pointer-events: all } .smart-card-view smart-carousel .smart-indicator:only-child { display: none } .smart-card-view smart-carousel * { pointer-events: none } .smart-card-view[header-position=top].smart-container>smart-scroll-viewer, .smart-card-view[header-position=bottom].smart-container>smart-scroll-viewer { height: calc(100% - var(--smart-card-view-header-height)) } .smart-card-view .smart-card-container { border: none; width: 100%; height: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--smart-card-view-column-min-width), 1fr)); grid-column-gap: var(--smart-card-view-column-gap, var(--smart-card-view-gap)); grid-row-gap: var(--smart-card-view-row-gap, var(--smart-card-view-gap)) } .smart-card-view .smart-data-view-header { height: var(--smart-card-view-header-height) } .smart-card-view .smart-data-view-header-drop-down .smart-card-view-customize-top { padding: var(--smart-data-view-padding); padding-bottom: 0 } .smart-card-view .smart-data-view-header-drop-down .smart-card-view-customize-top>div { display: flex; align-items: center; justify-content: space-between } .smart-card-view .smart-data-view-header-drop-down .smart-card-view-customize-top smart-switch-button { margin-left: 30px; margin-right: 30px; position: relative; z-index: 1 } .smart-card-view .smart-data-view-header-drop-down .smart-card-view-customize-top smart-switch-button:before { content: attr(crop); position: absolute; left: -30px; top: 50%; transform: translateY(-50%); font-size: 11px } .smart-card-view .smart-data-view-header-drop-down .smart-card-view-customize-top smart-switch-button:after { position: absolute; top: 50%; transform: translateY(-50%); font-size: 11px; content: attr(fit); left: calc(100% + 5px) } .smart-card-view .smart-data-view-header-drop-down .smart-card-view-customize-top smart-input { width: 100% } .smart-card-view .smart-scroll-viewer-container.vscroll .smart-card-container { padding-right: 3px } .smart-card-view .smart-card-data-container { display: grid; grid-template-rows: 1fr; padding: 0 .5rem } .smart-card-view .smart-card-view-value { overflow: hidden; text-overflow: ellipsis; word-break: break-word } .smart-card-view .smart-card-view-title { font-size: calc(var(--smart-font-size) + 3px); font-weight: 700; display: grid; grid-template-columns: 1fr auto; width: 100%; align-items: center; overflow: hidden; text-overflow: ellipsis } .smart-card-view .smart-card-view-title:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .smart-card-view .smart-card-view-title .smart-arrow-up { display: none; border-radius: 50%; width: 16px; height: 16px; background-color: var(--smart-background-color); opacity: .7; cursor: pointer } .smart-card-view .smart-card-view-title .smart-arrow-up:after { color: var(--smart-background) } .smart-card-view .smart-card-view-title .smart-arrow-up:hover { opacity: 1 } .smart-card-view .smart-card-view-label { margin-bottom: calc(var(--smart-card-view-vertical-offset)/ 3); text-transform: uppercase; font-size: calc(var(--smart-font-size) - 2px); opacity: .7; overflow: hidden; text-overflow: ellipsis } .smart-card-view .smart-card-view-label.icon { position: relative; padding-left: 30px } .smart-card-view .smart-card-view-label.icon:after { content: ''; position: absolute; left: 0; top: 0; width: 30px; height: 100%; background-repeat: no-repeat; background-position: center } .smart-card-view .smart-card-view-content { margin-top: var(--smart-card-view-vertical-offset); transform: scaleY(1); transform-origin: top; opacity: 1 } .smart-card-view .smart-card-view-cell { margin-bottom: var(--smart-card-view-vertical-offset) } .smart-card-view .smart-card-view-cell:last-child, .smart-card-view[cell-orientation=horizontal] .smart-card-view-label { margin-bottom: 0 } .smart-card-view .smart-add-new-button { display: none } .smart-card-view[cell-orientation=horizontal] .smart-card-view-cell { display: flex; align-items: center; justify-content: space-between } .smart-card-view[cell-orientation=horizontal] .smart-card-view-value { text-align: right } .smart-card-view[cover-mode=fit] .smart-carousel-item { background-size: contain } .smart-card-view[editable] smart-card { cursor: pointer } .smart-card-view[add-new-button] .smart-add-new-button { display: block; position: absolute; bottom: 20px; right: calc(23px + var(--smart-scroll-bar-size)); width: var(--smart-card-view-add-new-button-size); height: var(--smart-card-view-add-new-button-size); border-radius: 50%; background-color: var(--smart-primary); color: var(--smart-primary-color); cursor: pointer } .smart-card-view[add-new-button] .smart-add-new-button:after { content: var(--smart-icon-plus); display: flex; align-items: center; justify-content: center; margin-top: 2px; width: 100%; height: 100%; font-family: var(--smart-font-family-icon); font-size: 20px } .smart-card-view[add-new-button] .smart-add-new-button:hover { transform: scale(1.2, 1.2) } .smart-card-view[add-new-button]:not([animation=none]) .smart-add-new-button { transition: transform cubic-bezier(.81, .27, 0, .93) .5s } .smart-card-view[empty] .smart-card-view-header { pointer-events: none; opacity: .55 } .smart-card-view[empty] .smart-card-container:after { content: attr(no-data) } .smart-card-view[no-matches] .smart-card-container:after { content: attr(no-matches) } .smart-card-view[empty] .smart-card-container, .smart-card-view[empty] .smart-scroll-viewer-content-container, .smart-card-view[no-matches] .smart-card-container, .smart-card-view[no-matches] .smart-scroll-viewer-content-container { height: 100% } .smart-card-view[empty] .smart-card-container:after, .smart-card-view[no-matches] .smart-card-container:after { display: flex; align-items: center; justify-content: center; font-style: italic } .smart-card-view[loading] smart-card>.smart-container { visibility: hidden } .smart-card-view[loading] smart-card.smart-hidden { display: flex !important } .smart-card-view[loading] .smart-card-view-content { transition: none } .smart-card-view[cover-field]:not([cover-field=null]) smart-card>.smart-container { grid-template-rows: var(--smart-card-view-cover-height) 1fr } .smart-card-view[collapsible] .smart-card-data-container, .smart-card-view[title-field] .smart-card-data-container { grid-template-rows: auto 1fr } .smart-card-view:not([collapsible]) .smart-card-view-title.empty { display: none } .smart-card-view:not([collapsible]) .smart-card-view-title.empty:first-child+.smart-card-view-content { margin-top: 0 } .smart-card-view:not([animation=none]) .smart-card-view-title .smart-arrow-up { transition: transform .2s ease-in } .smart-card-view:not([animation=none]) .smart-card-view-content { transition-property: margin-top, height, transform, visibility, opacity; transition-duration: .2s; transition-timing-function: ease-in } .smart-card-view[collapsible] .smart-card-view-title .smart-arrow-up { display: block } .smart-card-view[dragging] smart-card { overflow: hidden } .smart-card-view[allow-drag] .smart-card-data-container { -moz-user-select: none; -webkit-user-select: none; user-select: none } .smart-card-view[allow-drag] .smart-card-view-content { pointer-events: none } .smart-window.smart-card-view-window { --smart-numeric-text-box-text-align: left; --smart-window-default-height: 75%; cursor: initial; z-index: 999 } .smart-window.smart-card-view-window .smart-header { font-size: calc(var(--smart-font-size) * 1.5) } .smart-window.smart-card-view-window .smart-next-button:after, .smart-window.smart-card-view-window .smart-prev-button:after { font-size: calc(100% - 2px) } .smart-window.smart-card-view-window .smart-prev-button:after { content: var(--smart-icon-arrow-up) } .smart-window.smart-card-view-window .smart-next-button:after { content: var(--smart-icon-arrow-down) } .smart-window.smart-card-view-window .smart-card-view-label { overflow: hidden; text-overflow: ellipsis; display: flex; justify-content: space-between; margin-bottom: calc(var(--smart-card-view-vertical-offset)/ 3); text-transform: uppercase; font-size: calc(var(--smart-font-size) - 2px); opacity: .7 } .smart-window.smart-card-view-window .smart-card-view-label .toggle-visibility { font-family: var(--smart-font-family-icon); cursor: pointer; color: var(--smart-color) } .smart-window.smart-card-view-window .smart-card-view-label .toggle-visibility:after { content: var(--smart-icon-visibility) } .smart-window.smart-card-view-window .smart-card-view-label .toggle-visibility.hidden:after { content: var(--smart-icon-visibility-off) } .smart-window.smart-card-view-window .smart-card-view-label:not(:first-child) { margin-top: var(--smart-card-view-vertical-offset) } .smart-window.smart-card-view-window .smart-card-view-label.icon { position: relative; padding-left: 30px } .smart-window.smart-card-view-window .smart-card-view-label.icon:after { content: ''; position: absolute; left: 0; top: 0; width: 30px; height: 100%; background-repeat: no-repeat; background-position: center } .smart-window.smart-card-view-window .smart-content-container>.smart-content { display: block; padding: 20px } .smart-window.smart-card-view-window .smart-content-container>.smart-footer { display: flex; justify-content: space-evenly; align-items: center } .smart-window.smart-card-view-window .smart-footer smart-button { --smart-button-padding: 0; width: 25%; height: 100% } .smart-window.smart-card-view-window .smart-card-view-editor { width: 100% } .smart-window.smart-card-view-window .smart-card-view-editor.image .thumbnail { position: relative; display: inline-block; margin-right: 5px; border: var(--smart-border-width) solid var(--smart-border); width: 75px; height: 75px; background-position: center; background-repeat: no-repeat; background-size: cover; cursor: pointer } .smart-window.smart-card-view-window .smart-card-view-editor.image .thumbnail:hover:after { content: var(--smart-icon-close); position: absolute; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; left: 0; top: 0; background-color: var(--smart-ui-state-hover); color: var(--smart-ui-state-color-hover); font-family: var(--smart-font-family-icon); font-size: 50px; opacity: .4 } .smart-card-view[right-to-left] .smart-card-view-label.icon:after, .smart-window.smart-card-view-window[right-to-left] .smart-card-view-label.icon:after { left: initial; right: 0 } .smart-window.smart-card-view-window .smart-card-view-editor.image .label { margin-top: 3px; font-size: calc(var(--smart-font-size) - 3px); text-transform: uppercase; opacity: .7 } .smart-window.smart-card-view-window .smart-card-view-editor.image .container { display: flex; flex-direction: row; justify-content: space-between; align-items: stretch; margin-top: 5px; height: 30px } .smart-window.smart-card-view-window .smart-card-view-editor.image smart-input { width: calc(100% - 40px); height: 100% } .smart-window.smart-card-view-window .smart-card-view-editor.image smart-button { --smart-button-padding: 0; width: 30px; height: 100%; font-size: 20px } .smart-window.smart-card-view-window textarea.smart-card-view-editor { min-height: 150px; resize: vertical; border-color: var(--smart-border); border-top-right-radius: var(--smart-border-top-right-radius); border-top-left-radius: var(--smart-border-top-left-radius); border-bottom-left-radius: var(--smart-border-bottom-left-radius); border-bottom-right-radius: var(--smart-border-bottom-right-radius); font-family: inherit; font-size: inherit } .smart-window.smart-card-view-window textarea.smart-card-view-editor:hover { border-color: var(--smart-ui-state-border-hover) } .smart-window.smart-card-view-window textarea.smart-card-view-editor:focus { outline: 0; border-color: var(--smart-outline) } .smart-card-view-drag-feedback { position: absolute; display: flex; align-items: center; box-shadow: var(--smart-elevation-8); border: var(--smart-border-width) solid var(--smart-border); border-radius: var(--smart-border-radius); padding: 5px; white-space: nowrap; font-family: var(--smart-font-family); font-size: 20px; background-color: var(--smart-background); color: var(--smart-background-color); z-index: 10000; opacity: .85 } .smart-card-view-drag-feedback>.drag-feedback-thumbnail { width: 50px; height: 50px; background-size: cover } .smart-card-view-drag-feedback:nth-child(2) { margin-left: 10px } .smart-card-view[right-to-left] .smart-card-view-label.icon { padding-left: 0; padding-right: 30px } .smart-card-view[right-to-left] .smart-card-view-customize-top { direction: rtl } .smart-card-view[right-to-left] .smart-scroll-viewer-container.vscroll .smart-card-container { padding-left: 3px; padding-right: initial } .smart-window.smart-card-view-window[right-to-left] .smart-card-view-label.icon { padding-left: 0; padding-right: 30px } .smart-card-view-drag-feedback[right-to-left] { direction: rtl } .smart-card-view-drag-feedback[right-to-left]:nth-child(2) { margin-right: 10px; margin-left: initial } .smart-column-panel[right-to-left] .smart-grid-panel-container-footer, .smart-group-panel[right-to-left] .smart-grid-panel-container-footer, .smart-multi-column-filter-panel[right-to-left] .smart-grid-panel-container-footer, .smart-sort-panel[right-to-left] .smart-grid-panel-container-footer { flex-direction: row-reverse } .smart-column-panel[right-to-left] .smart-grid-panel-buttons-container .smart-grid-panel-apply-button, .smart-group-panel[right-to-left] .smart-grid-panel-buttons-container .smart-grid-panel-apply-button, .smart-multi-column-filter-panel[right-to-left] .smart-grid-panel-buttons-container .smart-grid-panel-apply-button, .smart-sort-panel[right-to-left] .smart-grid-panel-buttons-container .smart-grid-panel-apply-button { margin-right: 15px; margin-left: initial } smart-carousel .smart-carousel-item, smart-carousel .smart-carousel-item .smart-carousel-item-container { pointer-events: none; background-repeat: no-repeat; background-position: center; box-sizing: border-box; height: 100% } smart-carousel { width: var(--smart-carousel-default-width); height: var(--smart-carousel-default-height) } smart-carousel.smart-container, smart-carousel>.smart-container { display: block; position: relative; width: 100%; height: 100% } smart-carousel .smart-items-container { position: relative; width: 100%; height: 100%; box-sizing: border-box; overflow: hidden } smart-carousel[disabled] { opacity: .55; cursor: default; pointer-events: none } smart-carousel[swipe] { user-select: none } smart-carousel .smart-carousel-item { width: 100%; position: absolute; left: 0; top: 0; opacity: 0; z-index: 0; user-select: none } smart-carousel .smart-carousel-item .smart-carousel-item-container { user-select: text; position: relative; width: 100%; padding-top: 50px; z-index: 1; background-size: cover } smart-carousel .smart-carousel-item .smart-carousel-item-content, smart-carousel .smart-carousel-item .smart-carousel-item-label { text-align: center; box-sizing: border-box; position: absolute; top: 30%; left: 50%; transform: translate(-50%, -50%) } smart-carousel .smart-carousel-item .smart-carousel-item-content { top: 40%; transform: translate(-50%, 0) } smart-carousel .smart-carousel-item .smart-carousel-html-content { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; box-sizing: border-box } smart-carousel .smart-carousel-item.smart-active { opacity: 1; pointer-events: all; user-select: text } smart-carousel .smart-arrow { position: absolute; top: 0; width: 30px; height: 100%; cursor: pointer; opacity: .6; display: block } smart-carousel[hide-arrows] .smart-arrow, smart-carousel[hide-indicators] .smart-indicators-container { display: none } smart-carousel .smart-arrow:after { font-size: 20px; position: absolute; left: 0; top: 0; pointer-events: none; user-select: none } smart-carousel .smart-arrow:focus, smart-carousel .smart-arrow:hover { opacity: .8 } smart-carousel .smart-arrow:active { opacity: 1 } smart-carousel .smart-arrow>.smart-button { border-width: 0 } smart-carousel .smart-arrow>.smart-button:active { background-color: transparent } smart-carousel .smart-arrow[disabled] { opacity: .4; pointer-events: none } smart-carousel .smart-arrow.smart-arrow-left { left: 0 } smart-carousel .smart-arrow.smart-arrow-right { right: 0 } smart-carousel .smart-indicators-container { position: absolute; bottom: 10px; left: 50%; transform: translate(-50%); display: flex; flex-direction: row; align-items: center } smart-carousel .smart-indicators-container .smart-indicator { width: 10px; height: 10px; border: 1px solid gray; background-color: #fff; margin: 2px; cursor: pointer; box-sizing: content-box; opacity: .5 } smart-carousel .smart-indicators-container .smart-indicator.smart-active { opacity: .9; border-width: 3px } smart-carousel .smart-indicators-container .smart-indicator:hover { opacity: .7 } smart-carousel:not([animation=none]) .smart-carousel-item { animation-duration: 1s } smart-carousel:not([animation=none]) .smart-carousel-item.smart-active.smart-animate-trigger, smart-carousel:not([animation=none]).fade .smart-carousel-item.smart-active.smart-animate-trigger { animation-name: carousel-active-fade } smart-carousel:not([animation=none]) .smart-carousel-item.smart-out.smart-animate-trigger, smart-carousel:not([animation=none]).fade .smart-carousel-item.smart-out.smart-animate-trigger { animation-name: carousel-out-fade } smart-carousel:not([animation=none]).slide .smart-carousel-item.smart-active.smart-animate-trigger, smart-carousel:not([animation=none]).slide-left .smart-carousel-item.smart-active.smart-animate-trigger { animation-name: carousel-active-slide } smart-carousel:not([animation=none]).slide .smart-carousel-item.smart-out.smart-animate-trigger, smart-carousel:not([animation=none]).slide-left .smart-carousel-item.smart-out.smart-animate-trigger { animation-name: carousel-out-slide } smart-carousel:not([animation=none]).slide-right .smart-carousel-item.smart-active.smart-animate-trigger { animation-name: carousel-active-slide-right } smart-carousel:not([animation=none]).slide-right .smart-carousel-item.smart-out.smart-animate-trigger { animation-name: carousel-out-slide-right } smart-carousel:not([animation=none]).slide-top .smart-carousel-item.smart-active.smart-animate-trigger { animation-name: carousel-active-slide-top } smart-carousel:not([animation=none]).slide-top .smart-carousel-item.smart-out.smart-animate-trigger { animation-name: carousel-out-slide-top } smart-carousel:not([animation=none]).slide-bottom .smart-carousel-item.smart-active.smart-animate-trigger { animation-name: carousel-active-slide-bottom } smart-carousel:not([animation=none]).slide-bottom .smart-carousel-item.smart-out.smart-animate-trigger { animation-name: carousel-out-slide-bottom } smart-carousel[display-mode="3d"] .smart-carousel-html-content { padding-left: 30px; padding-right: 20px } smart-carousel[display-mode="3d"] .smart-carousel-item { width: var(--smart-carousel-3d-mode-slide-width); height: var(--smart-carousel-3d-mode-slide-height); border: 20px solid #fff; position: absolute; box-sizing: border-box; overflow: hidden; top: 50%; left: 50%; z-index: 10; transform: translateX(-50%) translateY(-50%) rotateX(1deg) scale(1); transition-duration: 0s } smart-carousel[display-mode="3d"] .smart-carousel-item[position="-3"] { transform: perspective(800px) translateX(calc(-50% - 340px)) translateY(-50%) scale(.4); opacity: .1; z-index: 1 } smart-carousel[display-mode="3d"] .smart-carousel-item[position="-2"] { transform: perspective(800px) translateX(calc(-50% - 300px)) translateY(-50%) scale(.5); opacity: .2; z-index: 8 } smart-carousel[display-mode="3d"] .smart-carousel-item[position="-1"] { transform: perspective(800px) translateX(calc(-50% - 260px)) translateY(-50%) scale(.6); opacity: .3; z-index: 9 } smart-carousel[display-mode="3d"] .smart-carousel-item[position="1"] { transform: perspective(800px) translateX(calc(-50% + 260px)) translateY(-50%) scale(.6); opacity: .3; z-index: 9 } smart-carousel[display-mode="3d"] .smart-carousel-item[position="2"] { transform: perspective(800px) translateX(calc(-50% + 300px)) translateY(-50%) scale(.5); opacity: .2; z-index: 8 } smart-carousel[display-mode="3d"] .smart-carousel-item[position="3"] { transform: perspective(800px) translateX(calc(-50% + 340px)) translateY(-50%) scale(.4); opacity: .1; z-index: 1 } smart-carousel[display-mode="3d"]:not([animation=none]) .smart-carousel-item { transition-duration: .7s } smart-carousel[display-mode="3d"]:not([animation=none]) .smart-carousel-item, smart-carousel[display-mode="3d"]:not([animation=none]) .smart-carousel-item.smart-active, smart-carousel[display-mode="3d"]:not([animation=none]) .smart-carousel-item.smart-out { animation-name: unset } smart-carousel[display-mode="3d"].circle .smart-carousel-item { border-radius: 50% } smart-carousel[display-mode="3d"].vertical .smart-carousel-item[position="-3"] { transform: perspective(800px) translateX(-50%) translateY(calc(-50% - 210px)) scale(.4) } smart-carousel[display-mode="3d"].vertical .smart-carousel-item[position="-2"] { transform: perspective(800px) translateX(-50%) translateY(calc(-50% - 180px)) scale(.5) } smart-carousel[display-mode="3d"].vertical .smart-carousel-item[position="-1"] { transform: perspective(800px) translateX(-50%) translateY(calc(-50% - 150px)) scale(.6) } smart-carousel[display-mode="3d"].vertical .smart-carousel-item[position="1"] { transform: perspective(800px) translateX(-50%) translateY(calc(-50% + 150px)) scale(.6) } smart-carousel[display-mode="3d"].vertical .smart-carousel-item[position="2"] { transform: perspective(800px) translateX(-50%) translateY(calc(-50% + 180px)) scale(.5) } smart-carousel[display-mode="3d"].vertical .smart-carousel-item[position="3"] { transform: perspective(800px) translateX(-50%) translateY(calc(-50% + 210px)) scale(.4) } smart-carousel[display-mode="3d"]:not([animation=none]).horizontal-stacked .smart-carousel-item[position="-3"] { transform: perspective(800px) translateX(calc(-50% - 395px)) translateY(-50%) scale(.4) } smart-carousel[display-mode="3d"]:not([animation=none]).horizontal-stacked .smart-carousel-item[position="-2"] { transform: perspective(800px) translateX(calc(-50% - 355px)) translateY(-50%) scale(.5) } smart-carousel[display-mode="3d"]:not([animation=none]).horizontal-stacked .smart-carousel-item[position="-1"] { transform: perspective(800px) translateX(calc(-50% - 280px)) translateY(-50%) scale(.6) } smart-carousel[display-mode="3d"]:not([animation=none]).horizontal-stacked .smart-carousel-item[position="1"] { transform: perspective(800px) translateX(calc(-50% + 280px)) translateY(-50%) scale(.6) } smart-carousel[display-mode="3d"]:not([animation=none]).horizontal-stacked .smart-carousel-item[position="2"] { transform: perspective(800px) translateX(calc(-50% + 355px)) translateY(-50%) scale(.5) } smart-carousel[display-mode="3d"]:not([animation=none]).horizontal-stacked .smart-carousel-item[position="3"] { transform: perspective(800px) translateX(calc(-50% + 395px)) translateY(-50%) scale(.4) } smart-carousel[display-mode="3d"]:not([animation=none]).bottom-top .smart-carousel-item[position="-3"] { transform: perspective(800px) translateX(calc(-50% - 450px)) translateY(calc(-50% + 150px)) scale(.2) } smart-carousel[display-mode="3d"]:not([animation=none]).bottom-top .smart-carousel-item[position="-2"] { transform: perspective(800px) translateX(calc(-50% - 380px)) translateY(calc(-50% + 100px)) scale(.4) } smart-carousel[display-mode="3d"]:not([animation=none]).bottom-top .smart-carousel-item[position="-1"] { transform: perspective(800px) translateX(calc(-50% - 280px)) translateY(calc(-50% + 30px)) scale(.6) } smart-carousel[display-mode="3d"]:not([animation=none]).bottom-top .smart-carousel-item[position="1"] { transform: perspective(800px) translateX(calc(-50% + 280px)) translateY(calc(-50% - 30px)) scale(.6) } smart-carousel[display-mode="3d"]:not([animation=none]).bottom-top .smart-carousel-item[position="2"] { transform: perspective(800px) translateX(calc(-50% + 380px)) translateY(calc(-50% - 100px)) scale(.4) } smart-carousel[display-mode="3d"]:not([animation=none]).bottom-top .smart-carousel-item[position="3"] { transform: perspective(800px) translateX(calc(-50% + 450px)) translateY(calc(-50% - 150px)) scale(.2) } smart-carousel[display-mode="3d"]:not([animation=none]).top-bottom .smart-carousel-item[position="-3"] { transform: perspective(800px) translateX(calc(-50% - 450px)) translateY(calc(-50% - 150px)) scale(.2) } smart-carousel[display-mode="3d"]:not([animation=none]).top-bottom .smart-carousel-item[position="-2"] { transform: perspective(800px) translateX(calc(-50% - 380px)) translateY(calc(-50% - 100px)) scale(.4) } smart-carousel[display-mode="3d"]:not([animation=none]).top-bottom .smart-carousel-item[position="-1"] { transform: perspective(800px) translateX(calc(-50% - 280px)) translateY(calc(-50% - 30px)) scale(.6) } smart-carousel[display-mode="3d"]:not([animation=none]).top-bottom .smart-carousel-item[position="1"] { transform: perspective(800px) translateX(calc(-50% + 280px)) translateY(calc(-50% + 30px)) scale(.6) } smart-carousel[display-mode="3d"]:not([animation=none]).top-bottom .smart-carousel-item[position="2"] { transform: perspective(800px) translateX(calc(-50% + 380px)) translateY(calc(-50% + 100px)) scale(.4) } smart-carousel[display-mode="3d"]:not([animation=none]).top-bottom .smart-carousel-item[position="3"] { transform: perspective(800px) translateX(calc(-50% + 450px)) translateY(calc(-50% + 150px)) scale(.2) } smart-carousel[display-mode=multiple]:not([animation=none]).smart-carousel-item.smart-active, smart-carousel[display-mode=multiple]:not([animation=none]).smart-carousel-item.smart-animate-trigger.smart-active, smart-carousel[display-mode=multiple]:not([animation=none]).smart-carousel-item.smart-animate-trigger.smart-out, smart-carousel[display-mode=multiple]:not([animation=none]).smart-carousel-item.smart-out { animation-name: none } smart-carousel[display-mode=multiple]:not([animation=none]) .smart-items-container { transition-duration: 1s } smart-carousel[display-mode=multiple] .smart-items-container { overflow: hidden; width: max-content; transition: margin-left ease-in-out } smart-carousel[display-mode=multiple] .smart-carousel-item { opacity: 1; float: left; display: inline-block; position: relative; width: var(--smart-carousel-multiple-mode-slide-width) } smart-carousel[display-mode=multiple] .smart-carousel-item.smart-active { background-color: #d3d3d3; transition: background-color 1s ease-in-out } smart-carousel[display-mode=multiple] .smart-carousel-item.smart-out { transition: background-color 1s ease-in-out } smart-carousel smart-repeat-button[hover] button { background-color: transparent } smart-carousel[adaptive-auto-height], smart-carousel[adaptive-height] { height: 100%; overflow: visible; transition: height .6s ease-out; margin: 0 auto 70px } smart-carousel[adaptive-auto-height].smart-container, smart-carousel[adaptive-auto-height]>.smart-container, smart-carousel[adaptive-height].smart-container, smart-carousel[adaptive-height]>.smart-container { position: relative } smart-carousel[adaptive-auto-height] .smart-container, smart-carousel[adaptive-height] .smart-container { overflow: visible } smart-carousel[adaptive-auto-height] .smart-carousel-item, smart-carousel[adaptive-height] .smart-carousel-item { height: auto } smart-carousel[adaptive-auto-height] .smart-slide-wrapper, smart-carousel[adaptive-height] .smart-slide-wrapper { height: 100%; position: relative; display: flex; align-items: center; padding: 0 65px } smart-carousel[adaptive-auto-height] .smart-indicators-container, smart-carousel[adaptive-height] .smart-indicators-container { display: flex; align-items: center; justify-content: center; position: relative; bottom: 0; margin-top: 20px } smart-carousel[adaptive-auto-height] .smart-arrow, smart-carousel[adaptive-height] .smart-arrow { width: 50px; height: 50px; background: var(--smart-surface); display: flex; align-items: center; justify-content: center; border-color: var(--smart-border); top: 50%; transform: translateY(-50%) } smart-carousel[adaptive-auto-height].smart-calculated-height .smart-carousel-item, smart-carousel[adaptive-height].smart-calculated-height .smart-carousel-item { height: 100%; display: flex; justify-content: center; align-items: center } smart-carousel[adaptive-auto-height].smart-calculated-height .smart-slide-wrapper, smart-carousel[adaptive-height].smart-calculated-height .smart-slide-wrapper { height: auto } [disabled] .smart-carousel-item.smart-active { pointer-events: none } @keyframes carousel-active-fade { from { opacity: 0 } to { opacity: 1 } } @keyframes carousel-out-fade { from { opacity: 1 } to { opacity: 0 } } @keyframes carousel-active-slide { from { left: 100%; opacity: 1 } to { left: 0; opacity: 1 } } @keyframes carousel-out-slide { from { left: 0; opacity: 1 } to { left: -100%; opacity: 1 } } @keyframes carousel-active-slide-right { from { opacity: 1; left: -100% } to { opacity: 1; left: 0 } } @keyframes carousel-out-slide-right { from { left: 0; opacity: 1 } to { left: 100%; opacity: 1 } } @keyframes carousel-active-slide-top { from { top: 100%; opacity: 1 } to { top: 0; opacity: 1 } } @keyframes carousel-out-slide-top { from { top: 0; opacity: 1 } to { top: -100%; opacity: 1 } } @keyframes carousel-active-slide-bottom { from { opacity: 1; top: -100% } to { opacity: 1; top: 0 } } @keyframes carousel-out-slide-bottom { from { opacity: 1; top: 0 } to { opacity: 1; top: 100% } } smart-carousel[right-to-left] .smart-carousel-item, smart-carousel[right-to-left] .smart-indicators-container { direction: rtl } .smart-chart-tooltip .smart-chart-tooltip-text, smart-chart .smart-chart-annotation-text, smart-chart .smart-chart-axis-description, smart-chart .smart-chart-axis-text, smart-chart .smart-chart-label-text, smart-chart .smart-chart-legend-text, smart-chart .smart-chart-title-description, smart-chart .smart-chart-title-text { fill: var(--smart-background-color); color: var(--smart-background-color); font-family: var(--smart-font-family) } smart-chart { display: block; width: var(--smart-chart-default-width); height: var(--smart-chart-default-height) } smart-chart .smart-chart-annotation-text, smart-chart .smart-chart-axis-description, smart-chart .smart-chart-axis-text, smart-chart .smart-chart-label-text, smart-chart .smart-chart-legend-text { box-sizing: content-box; font-size: calc(var(--smart-font-size) - 1px) } smart-chart .smart-chart-title-text { font-weight: 700; font-size: calc(var(--smart-font-size) + 2px) } smart-chart .smart-chart-title-description { font-size: var(--smart-font-size) } smart-chart[theme=dark] .smart-chart-annotation-text, smart-chart[theme=dark] .smart-chart-axis-description .smart-chart-label-text, smart-chart[theme=dark] .smart-chart-axis-text, smart-chart[theme=dark] .smart-chart-legend-text, smart-chart[theme=dark] .smart-chart-title-description, smart-chart[theme=dark] .smart-chart-title-text { fill: var(--smart-background-color); color: var(--smart-background-color) } .smart-chart-range-selector>smart-chart { width: 100%; height: 100%; touch-action: none } .smart-chart-range-selector .slider { box-sizing: content-box; pointer-events: none } .smart-chart-tooltip { position: absolute; cursor: default; z-index: 10000000; transition: .3s ease-in, transform .3s ease-in; opacity: 1; transform: scale(1) } .smart-chart-tooltip .smart-chart-tooltip-content { position: absolute; box-sizing: content-box; outline: 0; border: 1px solid transparent; padding: 3px; text-align: center; vertical-align: middle; margin: 0; cursor: default; left: 0; top: 0; border-radius: var(--smart-border-radius) } .smart-chart-tooltip .smart-chart-tooltip-text { box-sizing: content-box; font-size: calc(var(--smart-font-size) - 1px) } .smart-chart-tooltip .smart-chart-tooltip-arrow-outer { box-sizing: content-box; width: 0; height: 0; position: absolute; z-index: 10000001 } .smart-chart-tooltip .smart-chart-tooltip-arrow-inner { box-sizing: content-box; width: 0; height: 0; position: absolute; z-index: 10000002 } .smart-chart-tooltip[animation=none] { transition: none } .smart-chart-tooltip.smart-visibility-hidden { transform: scale(0) } [theme=dark] .smart-chart-tooltip:not([theme=dark]) .smart-chart-tooltip-text { fill: var(--smart-background); color: var(--smart-background) } .smart-chart-tooltip[right-to-left] .smart-chart-tooltip-text, smart-chart[right-to-left] .smart-chart-annotation-text, smart-chart[right-to-left] .smart-chart-axis-description, smart-chart[right-to-left] .smart-chart-axis-text, smart-chart[right-to-left] .smart-chart-label-text, smart-chart[right-to-left] .smart-chart-legend-text, smart-chart[right-to-left] .smart-chart-title-text { direction: rtl; text-anchor: end } .smart-chip .smart-avatar, .smart-chip .smart-value { text-overflow: ellipsis; vertical-align: middle; display: none } .smart-chip .smart-avatar, .smart-chip .smart-close-button { width: var(--smart-chip-default-height); height: var(--smart-chip-default-height); vertical-align: middle } .smart-chip .smart-value, .smart-chip.smart-container, smart-chip .smart-container { white-space: nowrap } smart-chip:focus, smart-chip:hover { box-shadow: var(--smart-elevation-2); outline: 0 } smart-chip.smart-element { display: inline-block } smart-chip[disabled]:hover { box-shadow: none } .smart-chip { min-height: var(--smart-chip-default-height); min-width: var(--smart-chip-default-height); border-radius: calc(var(--smart-chip-default-height)/ 2); box-sizing: border-box; background-color: var(--smart-primary); color: var(--smart-primary-color); position: relative; margin: 2px } .smart-chip .smart-avatar { line-height: var(--smart-chip-default-height); border-radius: 50%; font-size: 20px; box-sizing: border-box; text-align: center; overflow: hidden } .smart-chip .smart-value { line-height: var(--smart-chip-default-height); padding: 0 15px; overflow: hidden; margin: 0; cursor: default } .smart-chip .smart-close-button { display: none; position: relative } .smart-chip .smart-close-button:after, .smart-chip[avatar] .smart-avatar, .smart-chip[close-button] .smart-close-button, .smart-chip[value] .smart-value { display: inline-block } .smart-chip .smart-close-button:after { font-family: var(--smart-font-family-icon); content: var(--smart-icon-close); color: inherit; line-height: var(--smart-chip-default-height); width: 100%; text-align: center } .smart-chip .smart-close-button:hover:after { color: var(--smart-primary-color); cursor: pointer } .smart-chip[avatar] .smart-avatar img { width: 100%; height: 100%; border-radius: 50% } .smart-chip[avatar] .smart-value { width: calc(100% - var(--smart-chip-default-height)); padding-left: 5px } .smart-chip[close-button] .smart-value { width: calc(100% - var(--smart-chip-default-height)); padding-right: 5px } .smart-chip[avatar][close-button] .smart-value { width: calc(100% - 2 * var(--smart-chip-default-height)) } smart-chip[right-to-left]>.smart-container { direction: rtl } smart-combo-box { width: var(--smart-combo-box-default-width); height: var(--smart-combo-box-default-height); overflow: initial; visibility: hidden; cursor: pointer } smart-combo-box.smart-element { overflow: visible; visibility: inherit; border-width: 0 } .smart-combo-box smart-list-box { position: relative; width: 100%; height: 100%; border: initial; padding: initial; overflow: hidden; font-size: inherit; font-family: inherit; outline: 0 } .smart-combo-box .smart-action-button input.smart-input { flex-grow: 1; align-self: center; width: var(--smart-editor-addon-width); min-width: var(--smart-editor-addon-width); min-height: 100%; max-height: 1rem; vertical-align: middle; margin: 0 } .smart-combo-box .smart-buttons-container .smart-token { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; cursor: pointer; margin: 0 2px; user-select: none } .smart-combo-box .smart-buttons-container .smart-combo-box-auto-complete-string { position: absolute; display: flex; pointer-events: none; align-items: center; padding: var(--smart-editor-label-padding); opacity: .5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; z-index: 1 } .smart-combo-box .smart-buttons-container .smart-combo-box-auto-complete-string:empty { display: none } .smart-combo-box.smart-element .smart-drop-down.smart-visibility-hidden { transform: scale(0); transition: transform .2s ease-in; transform-origin: left top 0 } smart-color-panel { width: var(--smart-color-panel-default-width); height: var(--smart-color-panel-default-height); user-select: none } smart-color-panel .no-touch { touch-action: none } smart-color-panel.smart-element { display: inline-block; overflow: initial; border: none; background: var(--smart-background); color: var(--smart-background-color) } smart-color-panel[disabled] { opacity: .55; pointer-events: none; user-select: none } .smart-color-panel .smart-content { position: relative; cursor: pointer; display: flex; width: 100%; height: 100% } .smart-color-panel label { display: inline-block; user-select: none } .smart-color-panel smart-tooltip .smart-tooltip-content { box-shadow: 0 0 20px 0 #8b8b8b } .smart-color-panel input[type=number]::-webkit-inner-spin-button, .smart-color-panel input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0 } .smart-color-panel input[type=number] { -moz-appearance: textfield; -webkit-appearance: textfied } .smart-color-panel .color-input { width: 70px; height: var(--smart-editor-height); margin: 5px; padding: 5px; border: var(--smart-border-width) solid var(--smart-border); border-radius: var(--smart-border-radius); background: var(--smart-background); color: var(--smart-color); outline: 0 } .smart-color-panel .color-input:focus { border-color: var(--smart-outline) } .smart-color-panel .color-input::selection { background: var(--smart-editor-selection); color: var(--smart-editor-selection-color) } .smart-color-panel .grid-mode-container, .smart-color-panel .palette-mode-container { width: 100%; max-height: 100%; position: relative } .smart-color-panel .custom-color-selection .buttons-container { display: flex; align-items: center; justify-content: flex-end } .smart-color-panel .custom-colors-box, .smart-color-panel .gray-shades-box, .smart-color-panel .grid-samples-container, .smart-color-panel .spectrum-box { display: grid; grid-template-columns: repeat(var(--smart-color-panel-grid-mode-column-count), auto) } .smart-color-panel .hue-scale { display: block; max-width: 100px; height: var(--smart-color-panel-palette-size); background-image: linear-gradient(red, #f0f, #00f, #0ff, #0f0, #ff0, red); width: 20px; margin-left: 15px; margin-right: 15px; position: relative; padding: 1px; border: var(--smart-border-width) solid var(--smart-border); background-clip: content-box; -webkit-background-clip: content-box } .smart-color-panel .hue-scale-thumb { width: 100%; height: 10px; box-sizing: content-box; border: 3px solid #fff; border-left-width: 10px; border-right-width: 10px; position: absolute; left: -10px; top: -3px; box-shadow: 0 0 5px #666, inset 0 0 2px 0 #999, inset 0 0 2px 0 #999; opacity: .8; cursor: pointer } .smart-color-panel .color-palette-thumb { width: 0; height: 0; top: 0; position: absolute; z-index: 10; pointer-events: none } .smart-color-panel .color-palette-thumb:after { content: " "; position: absolute; left: -14px; top: -14px; width: 16px; height: 16px; border: 5px solid #fff; border-radius: 50%; box-shadow: var(--smart-elevation-2) } .smart-color-panel .color-palette { width: var(--smart-color-panel-palette-size); height: var(--smart-color-panel-palette-size); background-color: red; display: block; position: relative; overflow: hidden; cursor: crosshair; padding: 1px; border: 1px solid #d3d3d3; background-clip: content-box; -webkit-background-clip: content-box } .smart-color-panel .color-palette:after, .smart-color-panel .color-palette:before { width: 100%; height: 100%; content: " "; display: block; position: absolute; left: 0; top: 0; z-index: 0 } .smart-color-panel .color-palette:before { background-image: linear-gradient(90deg, #fff, transparent) } .smart-color-panel .color-palette:after { background-image: linear-gradient(transparent, #000) } .smart-color-panel .color-controls-container { display: block; max-width: 100px; overflow: hidden } .smart-color-panel .color-palette-container { width: 100%; height: var(--smart-color-panel-palette-size); display: flex; flex-direction: row } .smart-color-panel .preview-container { width: 100%; min-width: 100px; height: 100px; background-color: #fff; margin-bottom: 20px; position: relative; padding: 1px; border: var(--smart-border-width) solid var(--smart-border); background-clip: content-box; -webkit-background-clip: content-box } .smart-color-panel .preview-container-bottom, .smart-color-panel .preview-container-top { width: 100%; height: 50%; display: block; background-color: #fff } .smart-color-panel .alpha-channel-container { flex-direction: row; width: 100%; align-items: center; align-content: space-around; margin-top: 5px; display: none } .smart-color-panel .alpha-channel-container label { width: 48px } .smart-color-panel .alpha-channel-scale { width: var(--smart-color-panel-palette-size); height: 20px; margin-top: 15px; margin-bottom: 15px; position: relative; border: var(--smart-border-width) solid var(--smart-border); margin-right: 20px } .smart-color-panel .alpha-channel-scale:after, .smart-color-panel .alpha-channel-scale:before { position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; content: " " } .smart-color-panel .alpha-channel-scale:before { background-image: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 74%, #ccc 75%, #ccc), linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 74%, #ccc 75%, #ccc); background-position: 0 6px, 8px 14px; background-size: 16px 16px } .smart-color-panel .alpha-channel-scale:after { background-image: linear-gradient(90deg, var(--smart-color-panel-alpha-channel-color), transparent); box-shadow: inset 1px -1px 0 0 #fff, inset -1px 1px 0 0 #fff } .smart-color-panel .alpha-channel-thumb { width: 10px; height: 100%; box-sizing: content-box; border: 3px solid #fff; border-top-width: 10px; border-bottom-width: 10px; position: absolute; left: -3px; top: -10px; opacity: .8; box-shadow: 0 0 5px #666, inset 0 0 2px 0 #999, inset 0 0 2px 0 #999; cursor: pointer; z-index: 1 } .smart-color-panel .buttons-container { display: none; flex-direction: row; justify-content: flex-end; padding: 10px 0 0 } .smart-color-panel .buttons-container smart-button { width: 100px } .smart-color-panel .color-sample, .smart-color-panel .user-color-container { width: var(--smart-color-panel-grid-mode-item-size); height: var(--smart-color-panel-grid-mode-item-size) } .smart-color-panel .buttons-container smart-button:last-of-type { margin-left: 20px } .smart-color-panel .gradient-background { background-image: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 74%, #ccc 75%, #ccc), linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 74%, #ccc 75%, #ccc); background-position: 0 6px, 8px 14px; background-size: 16px 16px } .smart-color-panel .color-sample.user-color:before, .smart-color-panel .user-color-container { background-image: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 74%, #ccc 75%, #ccc), linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 74%, #ccc 75%, #ccc); background-position: 0 5px, 5px 10px; background-size: 10px 10px } .smart-color-panel .material-grid-samples-container { display: grid; grid-template-columns: 80px repeat(14, auto) } .smart-color-panel .button-custom-color { margin: 5px 0 } .smart-color-panel .color-sample { margin: var(--smart-color-panel-grid-mode-columns-gap); box-sizing: border-box; cursor: pointer; border: var(--smart-border-width) solid rgba(0, 0, 0, .1); background-clip: content-box; -webkit-background-clip: content-box; text-overflow: ellipsis } .smart-color-panel .color-sample.user-color { position: relative; background-clip: padding-box; -webkit-background-clip: padding-box } .smart-color-panel .color-sample.user-color:before { position: absolute; content: ''; width: 100%; height: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: -1 } .smart-color-panel .color-sample.selected { border: 2px solid var(--smart-ui-state-color-selected); padding: 1px } .smart-color-panel .color-sample.empty { visibility: hidden } .smart-color-panel .color-sample.header, .smart-color-panel .color-sample.label-column { display: flex; align-items: center; justify-content: center; font-size: 11px; border-width: 0; pointer-events: none; user-select: none } .smart-color-panel .color-sample.label-column { width: 100%; justify-content: flex-start } .smart-color-panel .color-sample.color-sample-column, .smart-color-panel .color-sample.color-sample-row { width: 16px; height: 16px; border: 2px solid rgba(0, 0, 0, .2); padding: 1px; background: repeating-linear-gradient(-55deg, #fff, #fff 10px, #eee 10px, #eee 20px) } .smart-color-panel .color-sample[transparent] { position: relative } .smart-color-panel .color-sample[transparent]:after { content: ''; border: 1px solid red; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-45deg); position: absolute; width: 150%; border-radius: 5px } .smart-color-panel .user-color.empty { background: repeating-linear-gradient(-55deg, #fff, #fff 10px, #eee 10px, #eee 20px); background-origin: content-box; border-color: #d3d3d3 } .smart-color-panel .default-samples-container div { display: grid; grid-template-columns: repeat(10, auto); justify-items: center } .smart-color-panel .default-samples-container .theme-shades-box { margin-top: var(--smart-color-panel-default-mode-sections-gap); margin-bottom: var(--smart-color-panel-default-mode-sections-gap) } .smart-color-panel .default-samples-container .standard-colors-label, .smart-color-panel .default-samples-container .theme-colors-label { display: block; font-weight: 600; margin-left: 2px; margin-top: var(--smart-color-panel-default-mode-sections-gap); margin-bottom: calc(var(--smart-color-panel-default-mode-sections-gap)/ 2) } .smart-color-panel .hex-mode-resize-trigger { visibility: hidden; position: absolute; left: 0; top: 0 } .smart-color-panel[edit-alpha-channel] .alpha-channel-container { display: flex } .smart-color-panel[enable-custom-colors] .button-custom-color, .smart-color-panel[enable-custom-colors] .user-samples-container { width: 100%; display: flex; align-items: center } .smart-color-panel[enable-custom-colors]:not([display-mode=palette]):not([display-mdoe=radial]) .custom-color-selection .palette-mode-container { display: block } .smart-color-panel:not([display-mode=radial]) .canvas-radial { display: none } .smart-color-panel[display-mode=radial] .brightness-scale, .smart-color-panel[display-mode=hexagonal] .brightness-scale { display: block; max-width: 100px; height: var(--smart-color-panel-palette-size); background-image: linear-gradient(red, #f0f, #00f, #0ff, #0f0, #ff0, red); width: 20px; margin-left: 15px; margin-right: 15px; position: relative; padding: 1px; border: var(--smart-border-width) solid var(--smart-border); background-clip: content-box; -webkit-background-clip: content-box } .smart-color-panel[display-mode=radial] .brightness-scale-thumb, .smart-color-panel[display-mode=hexagonal] .brightness-scale-thumb { width: 100%; height: 10px; box-sizing: content-box; border: 3px solid #fff; border-left-width: 10px; border-right-width: 10px; position: absolute; left: -10px; top: -3px; box-shadow: 0 0 5px #666, inset 0 0 2px 0 #999, inset 0 0 2px 0 #999; opacity: .8; cursor: pointer } .smart-color-panel[display-mode=hexagonal] .alpha-channel-scale { width: var(--smart-color-panel-palette-width) } .smart-color-panel[display-mode=hexagonal] .brightness-scale { display: block; height: var(--smart-color-panel-palette-height); background-image: linear-gradient(white, #000) } .smart-color-panel[display-mode=hexagonal] .selected { stroke: #fff; stroke-width: 4px } .smart-color-panel[display-mode=hexagonal] .color-palette-container { height: var(--smart-color-panel-palette-height) } .smart-color-panel[display-mode=hexagonal] .color-palette-hexagonal, .smart-color-panel[display-mode=hexagonal] .palette-mode-container { display: block } .smart-color-panel[display-mode=radial] .hue-scale { display: none } .smart-color-panel[display-mode=radial] .brightness-scale { background-image: linear-gradient(white, #000) } .smart-color-panel[display-mode=radial] .color-palette-radial { width: var(--smart-color-panel-palette-size); height: var(--smart-color-panel-palette-size); display: block; position: relative; overflow: hidden; cursor: crosshair; padding: 1px; border: 1px solid #d3d3d3; background-clip: content-box; -webkit-background-clip: content-box; background: conic-gradient(from 90deg, red, #ff0, #0f0, #0ff, #00f, #ff00ff, red) #ff005a; border-radius: 50% } .smart-color-panel[display-mode=radial] .color-palette-radial:after { width: 100%; height: 100%; content: " "; display: block; position: absolute; left: 0; top: 0; z-index: 0; background: #000; opacity: var(--smart-color-panel-brightness); border-radius: 50% } .smart-color-panel[display-mode=radial] .color-palette-radial-thumb { width: 0; height: 0; position: absolute; z-index: 10; pointer-events: none; left: 50%; top: 50% } .smart-color-panel[display-mode=radial] .color-palette-radial-thumb:after { content: " "; position: absolute; left: -14px; top: -14px; width: 16px; height: 16px; border: 5px solid #fff; border-radius: 50%; box-shadow: var(--smart-elevation-2) } .smart-color-panel[display-mode=radial] .white-radial-gradient { z-index: 2; width: var(--smart-color-panel-palette-size); height: var(--smart-color-panel-palette-size); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; background-image: radial-gradient(circle, #fff, transparent) } .smart-color-panel[display-mode=radial] .palette-mode-container { display: block } .smart-color-panel[display-mode=radial] canvas { transform: rotate(-180deg); transform-origin: center } .smart-color-panel[display-mode=radial][inverted] .color-palette-radial:after { background: #fff } .smart-color-panel[display-mode=radial][inverted] .white-radial-gradient { background: radial-gradient(black, transparent) } .smart-color-panel[display-mode=palette] .color-palette, .smart-color-panel[display-mode=palette] .palette-mode-container, .smart-color-panel[display-mode=spectrumGrid] .spectrum-grid-samples-container, .smart-color-panel[display-mode=default] .default-samples-container, .smart-color-panel[display-mode=materialGrid] .color-palette { display: block } .smart-color-panel[apply-value-mode=useButtons] .buttons-container { display: flex; align-items: center; justify-content: flex-end } .smart-color-panel .button-custom-color, .smart-color-panel .color-palette-hexagonal, .smart-color-panel .custom-color-selection .grid-mode-container, .smart-color-panel .palette-mode-container, .smart-color-panel .spectrum-grid-samples-container, .smart-color-panel .user-samples-container, .smart-color-panel[display-mode=palette] .color-palette-radial, .smart-color-panel[display-mode=palette] .grid-mode-container, .smart-color-panel[display-mode=radial] .color-palette, .smart-color-panel[display-mode=radial] .grid-mode-container, .smart-color-panel[display-mode=hexagonal] .color-palette, .smart-color-panel[display-mode=hexagonal] .default-samples-container, .smart-color-panel[display-mode=hexagonal] .grid-samples-container, .smart-color-panel[display-mode=hexagonal] .hue-scale, .smart-color-panel[display-mode=hexagonal] .spectrum-grid-samples-container, .smart-color-panel[display-mode=spectrumGrid] .default-samples-container, .smart-color-panel[display-mode=spectrumGrid] .grid-samples-container, .smart-color-panel[display-mode=spectrumGrid] .material-grid-samples-container, .smart-color-panel[display-mode=spectrumGrid] .palette-mode-container, .smart-color-panel[display-mode=default] .grid-samples-container, .smart-color-panel[display-mode=default] .material-grid-samples-container, .smart-color-panel[display-mode=default] .palette-mode-container, .smart-color-panel[display-mode=materialGrid] .default-samples-container, .smart-color-panel[display-mode=materialGrid] .grid-samples-container, .smart-color-panel[display-mode=materialGrid] .palette-mode-container, .smart-color-panel[display-mode=grid] .default-samples-container, .smart-color-panel[display-mode=grid] .material-grid-samples-container, .smart-color-panel[display-mode=grid] .palette-mode-container, .smart-color-panel[enable-custom-colors][display-mode=hexagonal] .button-custom-color, .smart-color-panel[enable-custom-colors][display-mode=hexagonal] .user-samples-container, .smart-color-panel[hide-alpha-editor] .a-channel, .smart-color-panel[hide-h-e-x-editor] .hex, .smart-color-panel[hide-preview-container] .preview-container, .smart-color-panel[hide-r-g-b-editor] .b-channel, .smart-color-panel[hide-r-g-b-editor] .g-channel, .smart-color-panel[hide-r-g-b-editor] .r-channel { display: none } smart-color-panel[right-to-left] .alpha-channel-container, smart-color-panel[right-to-left] .color-palette-container, smart-color-panel[right-to-left] .grid-mode-container { direction: rtl } smart-color-panel[right-to-left] .alpha-channel-scale { margin: 0 0 0 20px } smart-color-panel[right-to-left] .alpha-channel-scale:after { background-image: linear-gradient(90deg, transparent, var(--smart-color-panel-alpha-channel-color)) } smart-color-panel[right-to-left] .buttons-container { flex-direction: row-reverse } smart-color-panel[right-to-left] .buttons-container smart-button:last-of-type { margin: 0 0 0 20px } smart-color-picker { width: var(--smart-color-picker-default-width); height: var(--smart-color-picker-default-height) } smart-color-picker.smart-element { overflow: initial; border: none } .smart-color-picker smart-color-panel { position: relative; display: flex; width: 100%; height: 100%; padding: 5px; border: none } .smart-color-picker .smart-color-box { position: relative; width: 20px; height: 20px; border-radius: var(--smart-border-radius); border: var(--smart-border-width) solid var(--smart-border); background-color: var(--smart-background); margin-right: 5px; overflow: hidden; background-image: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 74%, #ccc 75%, #ccc), linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 74%, #ccc 75%, #ccc); background-position: 0 5px, 5px 10px; background-size: 10px 10px } .smart-color-picker .smart-color-box.no-color { background-image: linear-gradient(45deg, transparent 47.5%, rgba(0, 0, 0, .2) 0, rgba(0, 0, 0, .2) 52.5%, transparent 52.5%), linear-gradient(-45deg, transparent 47.5%, rgba(0, 0, 0, .2) 20%, rgba(0, 0, 0, .2) 52.5%, transparent 52.5%); background-position: initial; background-size: initial } .smart-color-picker .smart-color-box>div { width: 100%; height: 100% } .smart-color-picker .smart-color-input { border: 0; background-color: transparent; outline: 0; color: inherit } .smart-color-picker .smart-ripple { background: var(--smart-primary-color) } .smart-color-picker .smart-drop-down.smart-drop-down-color-picker.smart-drop-down-container { width: var(--smart-color-picker-drop-down-width); max-width: none; height: var(--smart-color-picker-drop-down-height); max-height: none; box-sizing: content-box; overflow: hidden } .smart-color-picker:not([opened]) .smart-color-input { color: inherit } .smart-color-picker:not([editable]) .smart-color-input { cursor: pointer; user-select: none } .smart-color-picker[value-display-mode=none] .smart-color-box, .smart-color-picker[value-display-mode=none] .smart-color-input { display: none } .smart-color-picker[value-display-mode=none] .smart-color-input.smart-input { width: 0; opacity: 0; padding: initial } .smart-color-picker[value-display-mode=none] .smart-action-button { padding: initial; border: none } .smart-color-picker[value-display-mode=none] .smart-drop-down-button { border-top-left-radius: var(--smart-border-top-left-radius); border-bottom-left-radius: var(--smart-border-bottom-left-radius); border-left-width: var(--smart-border-width); border-left-style: solid } .smart-color-picker[value-display-mode=none]:not([opened]):not([drop-down-open-mode=dropDownButton]) .smart-drop-down-button { border-left-color: var(--smart-border) } .smart-color-picker[value-display-mode=colorCode] .smart-color-box { display: none } .smart-color-picker[value-display-mode=colorCode] .smart-color-input, .smart-color-picker[value-display-mode=colorBox] .smart-color-box { display: block } .smart-color-picker[value-display-mode=colorBox] .smart-input { display: none } .smart-color-picker[editable] .smart-action-button { cursor: initial } .smart-color-picker[editable]:not([opened]):not([drop-down-open-mode=dropDownButton])[hover] .smart-action-button { background: var(--smart-background); color: var(--smart-background-color) } .smart-color-picker[opened][editable] .smart-action-button { background-color: var(--smart-backgroud); color: var(--smart-background-color) } .smart-color-panel .color-sample.no-color { background-image: linear-gradient(45deg, transparent 47.5%, rgba(0, 0, 0, .2) 0, rgba(0, 0, 0, .2) 52.5%, transparent 52.5%), linear-gradient(-45deg, transparent 47.5%, rgba(0, 0, 0, .2) 20%, rgba(0, 0, 0, .2) 52.5%, transparent 52.5%); background-position: initial; background-size: initial } .smart-drop-down-repositioned smart-color-panel { width: 100%; height: 100%; padding: 5px; border: none } .smart-drop-down.smart-drop-down-color-picker.smart-drop-down-container, .smart-drop-down.smart-drop-down-color-picker.smart-drop-down-container.smart-drop-down-repositioned { width: var(--smart-color-picker-drop-down-width); max-width: none; height: var(--smart-color-picker-drop-down-height); max-height: none; box-sizing: content-box; overflow: hidden } smart-date-time-picker { width: var(--smart-date-time-picker-default-width); min-width: var(--smart-editor-addon-width); height: var(--smart-date-time-picker-default-height); min-height: var(--smart-editor-height) } smart-date-time-picker.smart-element { overflow: visible } smart-date-time-picker[hover] { border-color: var(--smart-ui-state-border-hover) } .smart-date-time-picker.smart-container, smart-date-time-picker>.smart-container { display: flex; position: relative; align-items: center } .smart-date-time-picker.smart-container>.smart-content, smart-date-time-picker>.smart-container>.smart-content { display: flex; height: 100%; width: 100% } .smart-date-time-picker.smart-container>input, smart-date-time-picker>.smart-container>input { height: 100% } .smart-date-time-picker .smart-input.smart-date-time-input { width: 100%; border: none; background: inherit; padding: var(--smart-editor-label-padding); outline: 0; color: inherit; font-family: inherit; font-size: inherit; text-align: inherit } .smart-date-time-picker>.smart-container>.smart-hint, .smart-date-time-picker>.smart-container>.smart-label { display: none; position: absolute } .smart-date-time-picker .smart-spin-buttons-container { height: 100%; display: none; width: var(--smart-editor-addon-width); border-radius: 0 } .smart-date-time-picker .smart-spin-button { --smart-button-padding: 0; display: block; width: 100%; height: 50%; min-height: 0; color: var(--smart-surface-color); background-color: var(--smart-surface); border: solid; border-width: 0; border-color: var(--smart-border); border-left-width: var(--smart-border-width); font-weight: 500; border-radius: 0 } .smart-date-time-picker .smart-spin-button:first-child { border-bottom-width: 1px } .smart-date-time-picker .smart-spin-button[hover] { background-color: var(--smart-ui-state-hover); color: var(--smart-ui-state-color-hover); border-color: var(--smart-ui-state-border-hover) } .smart-date-time-picker .smart-spin-button[active] { background-color: var(--smart-ui-state-active); color: var(--smart-ui-state-color-active); border-color: var(--smart-ui-state-border-active) } .smart-date-time-picker .smart-drop-down-button.smart-calendar-button { height: 100%; display: none; width: var(--smart-editor-addon-width); cursor: pointer; background-color: var(--smart-surface); color: var(--smart-surface-color); border-color: var(--smart-border); border-width: 0; border-left-width: var(--smart-border-width); border-style: solid; border-top-right-radius: var(--smart-border-top-right-radius); border-bottom-right-radius: var(--smart-border-bottom-right-radius); overflow: hidden } .smart-date-time-picker .smart-drop-down-button.smart-calendar-button:after { width: 100%; height: 100%; font-family: var(--smart-font-family-icon); font-style: normal; font-weight: 400; color: inherit; font-size: var(--smart-arrow-size); text-decoration: inherit; font-variant: normal; text-transform: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; content: var(--smart-icon-calendar) } .smart-date-time-picker .smart-drop-down-button.smart-calendar-button[hover] { background-color: var(--smart-ui-state-hover); color: var(--smart-ui-state-color-hover); border-color: var(--smart-ui-state-border-hover) } .smart-date-time-picker .smart-drop-down-button.smart-calendar-button[active] { background-color: var(--smart-ui-state-active); color: var(--smart-ui-state-color-active); border-color: var(--smart-ui-state-border-active) } .smart-date-time-picker .smart-drop-down-button.smart-calendar-button.time:after { content: var(--smart-icon-clock) } .smart-date-time-picker .smart-drop-down-button.smart-calendar-button.smart-drop-down-button-pressed { color: var(--smart-ui-state-color) } .smart-date-time-picker .smart-drop-down-button.smart-calendar-button.smart-drop-down-button-pressed[hover]:after { color: var(--smart-ui-state-color-hover) } .smart-date-time-picker .smart-drop-down.smart-date-time-drop-down { padding: 0 !important } .smart-date-time-picker .smart-ripple { background: var(--smart-background) } .smart-date-time-picker[focus], .smart-date-time-picker[focus] .smart-drop-down-button.smart-calendar-button { border-color: var(--smart-outline) } .smart-date-time-picker[disabled] .smart-input.smart-date-time-input { background-color: transparent; user-select: none } .smart-date-time-picker[disabled] .smart-drop-down-button.smart-calendar-button, .smart-date-time-picker[readonly] .smart-drop-down-button.smart-calendar-button { cursor: default } .smart-date-time-picker[label]>.smart-container>.smart-label { position: absolute; left: 0; bottom: 100%; font-size: 12px; width: 100%; display: block; padding: var(--smart-editor-label-padding); pointer-events: none; user-select: none; -webkit-user-select: none; -ms-user-select: none; -moz-user-select: none; text-align: initial; line-height: initial } .smart-date-time-picker[calendar-button] .smart-input.smart-date-time-input, .smart-date-time-picker[spin-buttons] .smart-input.smart-date-time-input { width: calc(100% - var(--smart-editor-addon-width)) } .smart-date-time-picker[spin-buttons-position=left] .smart-spin-button { border-right-width: var(--smart-border-width); border-left-width: 0 } .smart-date-time-picker[spin-buttons-position=left] .smart-spin-button:first-child { border-top-left-radius: var(--smart-border-top-left-radius) } .smart-date-time-picker[spin-buttons-position=left] .smart-spin-button:last-child { border-bottom-left-radius: var(--smart-border-bottom-left-radius) } .smart-date-time-picker[spin-buttons] { min-width: calc(var(--smart-editor-addon-width)) } .smart-date-time-picker[spin-buttons] .smart-spin-buttons-container { display: block } .smart-date-time-picker[spin-buttons]:not([spin-buttons-position=left]) .smart-input.smart-date-time-input { border-top-left-radius: var(--smart-border-top-left-radius); border-bottom-left-radius: var(--smart-border-bottom-left-radius) } .smart-date-time-picker[calendar-button] { min-width: var(--smart-editor-addon-width) } .smart-date-time-picker[calendar-button] .smart-drop-down-button.smart-calendar-button { display: block; position: relative } .smart-date-time-picker[spin-buttons][calendar-button] { min-width: calc(var(--smart-editor-addon-width) + var(--smart-editor-addon-width)) } .smart-date-time-picker[spin-buttons][calendar-button] .smart-input.smart-date-time-input { width: calc(100% - var(--smart-editor-addon-width) - var(--smart-editor-addon-width)) } .smart-date-time-picker[spin-buttons][calendar-button][calendar-button-position=left][spin-buttons-position=left] .smart-spin-button:first-child { border-top-left-radius: 0 } .smart-date-time-picker[spin-buttons][calendar-button][calendar-button-position=left][spin-buttons-position=left] .smart-spin-button:last-child { border-bottom-left-radius: 0 } .smart-date-time-picker:not([spin-buttons]) .smart-input.smart-date-time-input, .smart-date-time-picker[calendar-button-position=left] .smart-drop-down-button { border-top-left-radius: var(--smart-border-top-left-radius); border-bottom-left-radius: var(--smart-border-bottom-left-radius) } .smart-date-time-picker[calendar-button-position=left] .smart-drop-down-button { border-left: none; border-right-width: var(--smart-border-width); border-top-right-radius: 0; border-bottom-right-radius: 0 } .smart-date-time-picker[calendar-button-position=left][spin-buttons]:not([spin-buttons-position=left]) .smart-spin-button:first-child { border-top-right-radius: var(--smart-border-top-right-radius) } .smart-date-time-picker[calendar-button-position=left][spin-buttons]:not([spin-buttons-position=left]) .smart-spin-button:last-child { border-bottom-right-radius: var(--smart-border-bottom-right-radius) } .smart-date-time-picker:not([calendar-button])[spin-buttons-position=left] .smart-input.smart-date-time-input, .smart-date-time-picker[calendar-button-position=left][spin-buttons-position=left] .smart-input.smart-date-time-input { border-top-right-radius: var(--smart-border-top-right-radius); border-bottom-right-radius: var(--smart-border-bottom-right-radius) } .smart-date-time-picker:not([calendar-button])[spin-buttons]:not([spin-buttons-position=left]) .smart-spin-button:first-child { border-top-right-radius: var(--smart-border-top-right-radius) } .smart-date-time-picker:not([calendar-button])[spin-buttons]:not([spin-buttons-position=left]) .smart-spin-button:last-child { border-bottom-right-radius: var(--smart-border-bottom-right-radius) } .smart-date-time-picker:not([spin-buttons]):not([calendar-button]) .smart-input.smart-date-time-input, .smart-date-time-picker:not([spin-buttons])[calendar-button-position=left] .smart-input.smart-date-time-input { border-top-right-radius: var(--smart-border-top-right-radius); border-bottom-right-radius: var(--smart-border-bottom-right-radius) } .smart-date-time-picker.underlined { border-width: 0 0 1px; background: var(--smart-background) } .smart-date-time-picker.underlined .smart-drop-down-button, .smart-date-time-picker.underlined .smart-spin-button { border-width: 0; background: var(--smart-background) } .smart-date-time-picker.underlined .smart-spin-button[active], .smart-date-time-picker.underlined .smart-spin-button[hover] { background: var(--smart-background); color: var(--smart-ui-state-active) } .smart-date-time-picker.underlined .smart-drop-down-button.smart-calendar-button[active], .smart-date-time-picker.underlined .smart-drop-down-button.smart-calendar-button[hover] { background: var(--smart-background); color: var(--smart-ui-state-active) } .smart-date-time-picker.underlined .smart-hint { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: block !important; box-sizing: border-box; padding: var(--smart-editor-label-padding); color: var(--smart-background-color); pointer-events: none; font-size: 75%; opacity: 0; transition: color .2s, font-size .2s, line-height .2s, margin-top .2s, opacity .1s, top .2s; margin-top: calc(0px - var(--smart-font-size)) } .smart-date-time-picker.underlined .smart-hint:after { content: ""; position: absolute; left: 0; bottom: -2px; display: block; width: 100%; height: 2px; background-color: var(--smart-primary); transform-origin: bottom center; transform: scaleX(0); transition: transform .2s } .smart-date-time-picker.underlined:not([focus]) .smart-hint { margin-top: 0 } .smart-date-time-picker.underlined[focus] .smart-drop-down-button.smart-calendar-button, .smart-date-time-picker.underlined[focus] .smart-hint { color: var(--smart-primary); opacity: 1 } .smart-date-time-picker.underlined[focus] .smart-hint:after { transform: scale(1) } .smart-date-time-picker.outlined { padding-top: 6px; height: auto; min-height: 0; border: none; background: inherit } .smart-date-time-picker.outlined input { padding: 0; border: none !important; z-index: initial } .smart-date-time-picker.outlined .smart-content { padding: 4px 3px; border: 1px solid var(--smart-border); height: auto; border-radius: var(--smart-border-radius); background: var(--smart-background); z-index: 5 } .smart-date-time-picker.outlined .smart-spin-button { background: var(--smart-background); border-width: 0 } .smart-date-time-picker.outlined .smart-spin-button[active], .smart-date-time-picker.outlined .smart-spin-button[hover] { background: var(--smart-background); color: var(--smart-ui-state-active) } .smart-date-time-picker.outlined .smart-drop-down-button { padding: 8px 0; background: var(--smart-background); border-width: 0 } .smart-date-time-picker.outlined .smart-drop-down-button.smart-calendar-button[active], .smart-date-time-picker.outlined .smart-drop-down-button.smart-calendar-button[hover] { background: var(--smart-background); color: var(--smart-ui-state-active) } .smart-date-time-picker.outlined .smart-hint { position: absolute; top: 0; left: 0; display: flex !important; border-color: var(--smart-border) !important; width: 100%; max-height: 100%; color: var(--smart-background-color); z-index: 5; pointer-events: none; font-size: 75%; line-height: 15px; cursor: text; margin-top: -6px; transition: color .2s, font-size .2s, opacity .1s, font-size .2s, line-height .2s } .smart-date-time-picker.outlined .smart-hint:after, .smart-date-time-picker.outlined .smart-hint:before { content: ""; display: block; box-sizing: border-box; margin-top: 6px; border-top: solid 1px; border-top-color: var(--smart-border) !important; min-width: 10px; height: 8px; pointer-events: none; box-shadow: inset 0 1px transparent; transition: border-color .2s, box-shadow .2s } .smart-date-time-picker.outlined .smart-hint:before { margin-right: 4px; border-left: solid 1px transparent; border-radius: 4px 0 } .smart-date-time-picker.outlined .smart-hint:after { flex-grow: 1; margin-left: 4px; border-right: solid 1px transparent; border-radius: 0 4px } .smart-date-time-picker.outlined:not([focus]) .smart-hint { font-size: var(--smart-font-size); line-height: 48px; opacity: 0 } .smart-date-time-picker.outlined[focus] .smart-content { border-color: var(--smart-primary); border-top-color: transparent !important } .smart-date-time-picker.outlined[focus] .smart-drop-down-button { color: var(--smart-primary) } .smart-date-time-picker.outlined[focus] .smart-hint { color: var(--smart-primary); opacity: 1 } .smart-date-time-picker.outlined[focus] .smart-hint:after, .smart-date-time-picker.outlined[focus] .smart-hint:before { border-top-color: var(--smart-primary) !important } .smart-date-time-picker.outlined.smart-element-init .smart-hint { visibility: hidden; display: none !important } .smart-drop-down.smart-date-time-drop-down { padding: 0 !important } .smart-drop-down.smart-date-time-drop-down[footer] { height: calc(30px + var(--smart-editor-drop-down-height)); max-height: calc(30px + var(--smart-editor-drop-down-height)) } .smart-drop-down.smart-date-time-drop-down smart-calendar { border: none; width: 100%; height: 100%; min-width: 0; min-height: 0; border-radius: 0 } .smart-drop-down.smart-date-time-drop-down smart-time-picker { border: none; width: 100%; height: 100%; min-height: 0; border-radius: 0; min-width: initial } .smart-drop-down.smart-date-time-drop-down smart-time-picker .smart-hour-minute-container { font-size: 40px } .smart-drop-down.smart-date-time-drop-down .smart-footer, .smart-drop-down.smart-date-time-drop-down .smart-header { cursor: initial } .smart-drop-down.smart-date-time-drop-down .smart-date-time-picker-footer { height: 100%; width: 100%; display: flex; padding: 1px } .smart-drop-down.smart-date-time-drop-down .smart-am-pm-element { width: 100% } .smart-drop-down.smart-date-time-drop-down .smart-footer-component { display: flex; padding: 1px } .smart-drop-down.smart-date-time-drop-down .smart-footer-component:focus { border-color: var(--smart-outline) } .smart-drop-down.smart-date-time-drop-down .smart-footer-component>input { outline: 0; border: var(--smart-border-width) solid var(--smart-border); text-align: center; color: inherit; font-family: inherit; font-size: inherit; height: 100% } .smart-drop-down.smart-date-time-drop-down .smart-footer-component>input:focus { border-color: var(--smart-outline) } .smart-drop-down.smart-date-time-drop-down .smart-footer-component>span { width: 30%; overflow: hidden; display: flex; flex-direction: column } .smart-drop-down.smart-date-time-drop-down .smart-footer-component-today { padding: 1px; font-family: var(--smart-font-family-icon); border: var(--smart-border-width) solid transparent; display: flex; width: 30%; overflow: hidden; flex-direction: column; align-items: center; justify-content: center } .smart-drop-down.smart-date-time-drop-down .smart-footer-component-today:focus { outline: 0 } .smart-drop-down.smart-date-time-drop-down .smart-footer-component-hour, .smart-drop-down.smart-date-time-drop-down .smart-footer-component-minute { width: 30% } .smart-drop-down.smart-date-time-drop-down .smart-footer-component-hour smart-repeat-button, .smart-drop-down.smart-date-time-drop-down .smart-footer-component-minute smart-repeat-button { border-radius: 0; margin: 0 0 0 -1px; width: 100%; height: 50% } .smart-drop-down.smart-date-time-drop-down .smart-footer-component-hour smart-repeat-button:last-child, .smart-drop-down.smart-date-time-drop-down .smart-footer-component-minute smart-repeat-button:last-child { border-top-color: transparent } .smart-drop-down.smart-date-time-drop-down .smart-footer-component-hour button, .smart-drop-down.smart-date-time-drop-down .smart-footer-component-minute button { border-radius: 0; padding: 0 } .smart-drop-down.smart-date-time-drop-down .smart-footer-component-ampm { width: 30%; overflow: hidden; display: flex; flex-direction: column } .smart-drop-down.smart-date-time-drop-down .smart-hour-element, .smart-drop-down.smart-date-time-drop-down .smart-minute-element { width: 60% } .smart-drop-down.smart-date-time-drop-down .smart-today-element { cursor: pointer; outline: 0 } .smart-drop-down.smart-date-time-drop-down .smart-today-element:after { content: var(--smart-icon-calendar) } .smart-drop-down.smart-date-time-drop-down .smart-today-element:focus { border-color: var(--smart-outline) } .smart-drop-down.smart-date-time-drop-down .smart-drop-down-header { height: var(--smart-bar-height); width: 100%; display: flex; align-items: center } .smart-drop-down.smart-date-time-drop-down .smart-drop-down-header:focus { outline: 0 } .smart-drop-down.smart-date-time-drop-down .smart-drop-down-header>div { width: 50%; height: 100%; display: flex; align-items: center; justify-content: center; cursor: pointer; background-color: var(--smart-primary); color: var(--smart-primary-color); opacity: var(--smart-date-time-picker-header-opacity); outline: unset } .smart-drop-down.smart-date-time-drop-down .smart-drop-down-header>div:focus { text-decoration: underline } .smart-drop-down.smart-date-time-drop-down .smart-drop-down-header>.smart-selected { background-color: var(--smart-primary); border-color: var(--smart-primary); color: var(--smart-primary-color); opacity: var(--smart-date-time-picker-header-opacity-active) } .smart-drop-down.smart-date-time-drop-down .smart-drop-down-content { width: 100%; height: calc(100% - var(--smart-bar-height)) } .smart-drop-down.smart-date-time-drop-down .smart-drop-down-content.partial, .smart-drop-down.smart-date-time-drop-down[drop-down-display-mode=classic] .smart-calendar-container, .smart-drop-down.smart-date-time-drop-down[drop-down-display-mode=timePicker] .smart-calendar-container { height: 100% } .smart-drop-down.smart-date-time-drop-down .smart-date-time-picker .smart-hidden { display: none } .smart-drop-down.smart-date-time-drop-down.smart-visibility-hidden.not-in-view { left: -9999px; top: -9999px; transition: none } .smart-date-time-picker[right-to-left]>.smart-container { direction: initial } .smart-date-time-picker[right-to-left] .smart-hint, .smart-date-time-picker[right-to-left] .smart-input.smart-date-time-input, .smart-date-time-picker[right-to-left]>.smart-container>.smart-label { direction: rtl } smart-docking-layout { width: var(--smart-docking-layout-default-width); height: var(--smart-docking-layout-default-height) } .smart-docking-layout .smart-items-container, smart-docking-layout .smart-horizontal-hidden-items-container, smart-docking-layout .smart-items-container, smart-docking-layout .smart-vertical-hidden-items-container { height: 100%; width: 100%; background-color: transparent } smart-docking-layout.smart-element { overflow: initial } smart-docking-layout:not([animation=none]) .smart-window .smart-dock-button:after { transition: transform .2s ease } .smart-docking-layout>.smart-container { overflow: hidden } .smart-docking-layout .smart-tabs-window-feedback.smart-window { position: absolute; opacity: 0; max-width: 400px; max-height: 400px; pointer-events: none } .smart-docking-layout .smart-tabs-window-feedback.smart-window:not([animation=none]) { transition: transform .2s ease-out, opacity .2s ease-out, visibility .2s ease-out } .smart-docking-layout .smart-tabs-window-feedback[tabs-window-dragged] { z-index: 10001; opacity: .9; transform: scale(.2); min-width: 400px; min-height: 400px } .smart-docking-layout .smart-window .smart-content-container>.smart-content { align-items: stretch } .smart-docking-layout .smart-window .smart-dock-button:after { content: var(--smart-icon-arrow-up); font-size: .8rem } .smart-docking-layout .smart-window .smart-buttons-container .smart-dock-button:after { content: var(--smart-icon-window-pin-alt); font-size: .8rem } .smart-docking-layout .smart-window .smart-buttons-container .smart-menu-button:after { content: var(--smart-icon-menu); transform: rotate(180deg); font-size: .8rem } .smart-docking-layout .smart-window .smart-buttons-container .smart-auto-hide-button:after { content: var(--smart-icon-window-pin); font-size: .8rem } .smart-docking-layout .smart-window[focused] { box-shadow: none } .smart-docking-layout .smart-placeholder .smart-window .smart-content-container>.smart-header-section { min-height: 0; height: 0; padding: 0 } .smart-docking-layout .smart-docking-layout-item-holder { width: 100%; height: 100% } .smart-docking-layout .smart-horizontal-hidden-items-container, .smart-docking-layout .smart-vertical-hidden-items-container { width: 100%; height: 100%; background-color: transparent } .smart-docking-layout .smart-horizontal-hidden-items-container>.smart-container>smart-splitter-item, .smart-docking-layout .smart-vertical-hidden-items-container>.smart-container>smart-splitter-item { background-color: transparent } .smart-docking-layout .smart-docking-layout-auto-hide-window:focus, .smart-docking-layout .smart-docking-layout-auto-hide-window[focused] { box-shadow: none } .smart-docking-layout .smart-docking-layout-auto-hide-window[resize-mode=right] { transition: animation, visibility .2s ease-in; transform-origin: left; animation: leftToRightOut .2s cubic-bezier(.4, 0, 1, 1) } .smart-docking-layout .smart-docking-layout-auto-hide-window[resize-mode=right][opened] { transition: animation, visibility .2s ease-in; transform-origin: left; animation: leftToRightIn .2s cubic-bezier(0, 0, .2, 1) } .smart-docking-layout .smart-docking-layout-auto-hide-window[resize-mode=right]:not([animation=none]) { transform: scaleX(1) } .smart-docking-layout .smart-docking-layout-auto-hide-window[resize-mode=right]:not([animation=none]).smart-visibility-hidden { transform: scaleX(0) } .smart-docking-layout .smart-docking-layout-auto-hide-window[resize-mode=left] { transition: animation, visibility .2s ease-in; transform-origin: right; animation: rightToLeftOut .2s cubic-bezier(.4, 0, 1, 1) } .smart-docking-layout .smart-docking-layout-auto-hide-window[resize-mode=left][opened] { transition: animation, visibility .2s ease-in; transform-origin: right; animation: rightToLeftIn .2s cubic-bezier(0, 0, .2, 1) } .smart-docking-layout .smart-docking-layout-auto-hide-window[resize-mode=left]:not([animation=none]) { transform: scaleX(1) } .smart-docking-layout .smart-docking-layout-auto-hide-window[resize-mode=left]:not([animation=none]).smart-visibility-hidden { transform: scaleX(0) } .smart-docking-layout .smart-docking-layout-auto-hide-window[resize-mode=top] { transition: animation, visibility .2s ease-in; transform-origin: bottom; animation: bottomToTopOut .2s cubic-bezier(.4, 0, 1, 1) } .smart-docking-layout .smart-docking-layout-auto-hide-window[resize-mode=top][opened] { transition: animation, visibility .2s ease-in; transform-origin: bottom; animation: bottomToTopIn .2s cubic-bezier(0, 0, .2, 1) } .smart-docking-layout .smart-docking-layout-auto-hide-window[resize-mode=top]:not([animation=none]) { transform: scaleY(1) } .smart-docking-layout .smart-docking-layout-auto-hide-window[resize-mode=top]:not([animation=none]).smart-visibility-hidden { transform: scaleY(0) } .smart-docking-layout .smart-docking-layout-auto-hide-window[resize-mode=bottom] { transition: animation, visibility .2s ease-in; transform-origin: top; animation: topToBottomOut .2s cubic-bezier(.4, 0, 1, 1) } .smart-docking-layout .smart-docking-layout-auto-hide-window[resize-mode=bottom][opened] { transition: animation, visibility .2s ease-in; transform-origin: top; animation: topToBottomIn .2s cubic-bezier(0, 0, .2, 1) } .smart-docking-layout .smart-docking-layout-auto-hide-window[resize-mode=bottom]:not([animation=none]) { transform: scaleY(1) } .smart-docking-layout .smart-docking-layout-auto-hide-window[resize-mode=bottom]:not([animation=none]).smart-visibility-hidden { transform: scaleY(0) } .smart-docking-layout .smart-docking-layout-auto-hide-window.smart-window { position: absolute; box-shadow: none; border: 1px solid #A9A9A9; border-radius: 0; width: 200px; height: 200px; min-width: 100px; min-height: 100px } .smart-docking-layout .smart-docking-layout-auto-hide-window.smart-window .smart-content-container:not([class*=smart-window-resizing])>.smart-header-section { cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } .smart-docking-layout .smart-window-resize-feedback { border: 2.5px solid #d3d3d3 } .smart-docking-layout smart-tabs-window.smart-window { width: 100%; height: 100%; max-width: 100%; top: initial; left: initial; z-index: initial; transform: initial; border-radius: 0; position: relative; min-width: 0; min-height: 0; box-shadow: none; border: var(--smart-border-width) solid var(--smart-border) } .smart-docking-layout smart-tabs-window.smart-window smart-tabs { min-width: 0; min-height: 0; height: 100% } .smart-docking-layout smart-tabs-window.smart-window .smart-maximize-button, .smart-docking-layout smart-tabs-window.smart-window .smart-minimize-button, .smart-docking-layout smart-tabs-window.smart-window .smart-pin-button { display: none } .smart-docking-layout smart-tabs-window.smart-window:not(.smart-docking-layout-auto-hide-window) .smart-content-container, .smart-docking-layout smart-tabs-window.smart-window[pinned]:not(.smart-docking-layout-auto-hide-window) .smart-content-container { cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } .smart-docking-layout smart-tabs-window.smart-window:not([animation=none]):not(.smart-docking-layout-auto-hide-window) { transition: transform .2s ease-out } .smart-docking-layout smart-tabs-window.smart-window[collapsed] { height: 100% } .smart-docking-layout smart-tabs-window.smart-window[tabs-window-dragged]:not(.smart-tabs-window-feedback) { transform: scale(.75) } .smart-docking-layout smart-tabs-window.smart-window[ontop]:not([tabs-window-dragged]) { z-index: initial } .smart-docking-layout smart-tabs-window.smart-window[auto-hide] { height: 100%; width: 100%; border: none } .smart-docking-layout smart-tabs-window.smart-window[auto-hide] smart-tabs { height: 100%; width: 100% } .smart-docking-layout smart-tabs-window.smart-window[auto-hide] .smart-content-container>.smart-content { padding: 0; overflow: hidden } .smart-docking-layout smart-placeholder .smart-window .smart-content { height: 100% } .smart-docking-layout smart-splitter { border: none } .smart-docking-layout smart-splitter smart-splitter-bar .smart-splitter-resize-button { display: none } .smart-docking-layout smart-splitter[show-locked-items] smart-splitter-item[locked].auto-hide-bottom>.smart-container::after, .smart-docking-layout smart-splitter[show-locked-items] smart-splitter-item[locked].auto-hide-left>.smart-container::after, .smart-docking-layout smart-splitter[show-locked-items] smart-splitter-item[locked].auto-hide-right>.smart-container::after, .smart-docking-layout smart-splitter[show-locked-items] smart-splitter-item[locked].auto-hide-top>.smart-container::after { content: '' } .smart-docking-layout smart-splitter-item smart-tabs-window.smart-window[auto-hide] .smart-content-container>.smart-content { height: 100% } .smart-docking-layout smart-splitter-item smart-tabs-window.smart-window:not([animation=none]) { transition: none; animation: none; border: none } .smart-docking-layout smart-splitter-item.smart-placeholder smart-tab-item .smart-container:after { content: 'Drop Items Here'; font-family: var(--smart-font-family-icon); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 20px; padding: 15px; color: gray; opacity: .75 } @-moz-document url-prefix() { .smart-docking-layout smart-splitter-item[locked].auto-hide-top { line-height: 100% } } @supports (-ms-ime-align:auto) { .smart-docking-layout smart-tabs[vertical]>.smart-container { display: table-cell } } .smart-docking-layout[dragged] { cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } .smart-docking-layout[dragged]>.smart-container { overflow: visible } .smart-docking-layout[snap-mode=advanced] smart-splitter-item .smart-content { overflow: hidden } smart-tabs-window[tabs-window-dragged]:not(.smart-tabs-window-feedback) { transform: scale(.2) } smart-tabs-window.smart-window .smart-buttons-container .smart-auto-hide-button:after { content: var(--smart-icon-window-pin); font-size: .8rem } smart-tabs-window.smart-window[auto-hide] .smart-content-container>.smart-content { padding: 5px } smart-tabs-window.smart-window[tabs-window-dragged] { animation: none; position: absolute; opacity: .5; transform: scale(.2); transform-origin: top left; z-index: 10001; pointer-events: none; min-width: 400px; min-height: 400px } smart-tabs-window.smart-window[tabs-window-dragged]:not([animation=none]) { transition: transform .2s ease-in; animation: scaleInNo .2s cubic-bezier(.4, 0, .2, 1) } .smart-docking-snap-bottom-feedback, .smart-docking-snap-left-feedback, .smart-docking-snap-right-feedback, .smart-docking-snap-top-feedback { transition: all 50ms cubic-bezier(.4, 0, .6, 1); z-index: 10001; position: absolute; opacity: .65; border-radius: 2px; box-shadow: 0 0 1px 1px var(--smart-background-color); border-top-left-radius: var(--smart-border-top-left-radius); border-top-right-radius: var(--smart-border-top-right-radius); border-bottom-left-radius: var(--smart-border-bottom-right-radius); border-bottom-right-radius: var(--smart-border-bottom-right-radius); animation: scaleIn .2s cubic-bezier(.4, 0, .2, 1); transform: scale(1); pointer-events: none } .smart-docking-snap-bottom-feedback[disabled]:after, .smart-docking-snap-left-feedback[disabled]:after, .smart-docking-snap-right-feedback[disabled]:after, .smart-docking-snap-top-feedback[disabled]:after { position: absolute; content: var(--smart-icon-block); font-family: var(--smart-font-family-icon); opacity: .25; color: red; font-size: calc(2.5 * 14px); top: 50%; left: 50%; transform: translate(-50%, -50%) } .smart-docking-snap-right-feedback { width: 50%; left: calc(50% - 5px) } .smart-docking-snap-header-feedback, .smart-docking-snap-layout-bottom-feedback, .smart-docking-snap-layout-left-feedback, .smart-docking-snap-layout-right-feedback, .smart-docking-snap-layout-top-feedback { position: absolute; opacity: .65; box-shadow: 0 0 1px 1px var(--smart-background-color); border-radius: var(--smart-border-radius); animation: scaleIn .2s cubic-bezier(.4, 0, .2, 1); transform: scale(1); pointer-events: none; cursor: pointer; z-index: 10001; transition: width 50ms cubic-bezier(.4, 0, .2, 1), height 50ms cubic-bezier(.4, 0, .2, 1), top 50ms cubic-bezier(.4, 0, .6, 1), animation .2s cubic-bezier(.4, 0, .6, 1), left 50ms cubic-bezier(.4, 0, .2, 1) } .smart-docking-snap-header-feedback.smart-visibility-hidden, .smart-docking-snap-layout-bottom-feedback.smart-visibility-hidden, .smart-docking-snap-layout-left-feedback.smart-visibility-hidden, .smart-docking-snap-layout-right-feedback.smart-visibility-hidden, .smart-docking-snap-layout-top-feedback.smart-visibility-hidden { transition: animation .2s cubic-bezier(.4, 0, .6, 1), visibility .2s cubic-bezier(.4, 0, .6, 1), top .2s cubic-bezier(.4, 0, .2, 1), left .1s cubic-bezier(.4, 0, .2, 1); animation: scaleOut .2s cubic-bezier(.4, 0, .6, 1); transform: scale(0) } .smart-docking-snap-header-feedback[disabled]:after, .smart-docking-snap-layout-bottom-feedback[disabled]:after, .smart-docking-snap-layout-left-feedback[disabled]:after, .smart-docking-snap-layout-right-feedback[disabled]:after, .smart-docking-snap-layout-top-feedback[disabled]:after { position: absolute; content: var(--smart-icon-block); font-family: var(--smart-font-family-icon); opacity: .25; color: red; font-size: calc(2.5 * 14px); top: 50%; left: 50%; transform: translate(-50%, -50%) } .smart-docking-snap-layout-left-feedback, .smart-docking-snap-layout-right-feedback { max-width: 50px; transform-origin: left } .smart-docking-snap-layout-bottom-feedback, .smart-docking-snap-layout-top-feedback { max-height: 50px; transform-origin: left } .smart-docking-layout-auto-hide-window, .smart-docking-layout-auto-hide-window[ontop] { z-index: 9999 !important } .smart-docking-layout-snap { width: 110px; height: 110px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) } .smart-docking-layout-snap>div { width: 100%; height: calc(100% / 3); display: flex; justify-content: center; align-items: center } .smart-docking-layout-snap .header { background-color: var(--smart-primary); position: absolute } .smart-docking-layout-snap .bottom, .smart-docking-layout-snap .center, .smart-docking-layout-snap .left, .smart-docking-layout-snap .right, .smart-docking-layout-snap .top { width: 35px; height: 35px; float: left; padding: 2px; overflow: hidden; opacity: .25 } .smart-docking-layout-snap .bottom>div, .smart-docking-layout-snap .center>div, .smart-docking-layout-snap .left>div, .smart-docking-layout-snap .right>div, .smart-docking-layout-snap .top>div { width: 100%; height: 100%; border: 1px solid var(--smart-border); background: var(--smart-background); border-top-width: 6px; box-sizing: border-box; display: flex; pointer-events: none } .smart-docking-layout-snap .bottom>div div, .smart-docking-layout-snap .center>div div, .smart-docking-layout-snap .left>div div, .smart-docking-layout-snap .right>div div, .smart-docking-layout-snap .top>div div { width: 100%; height: 50%; background-color: var(--smart-primary) } .smart-docking-layout-snap .bottom[show], .smart-docking-layout-snap .center[show], .smart-docking-layout-snap .left[show], .smart-docking-layout-snap .right[show], .smart-docking-layout-snap .top[show] { opacity: 1 } .smart-docking-layout-snap .left>div div, .smart-docking-layout-snap .right>div div { width: 50%; height: 100% } .smart-docking-layout-snap .right>div { flex-direction: column; align-items: flex-end } .smart-docking-layout-snap .bottom>div { align-items: flex-end } .smart-docking-layout-snap .center>div div { height: 100% } .smart-docking-layout-snap.layout-bottom, .smart-docking-layout-snap.layout-left, .smart-docking-layout-snap.layout-right, .smart-docking-layout-snap.layout-top { position: absolute; width: 30px; height: 30px; overflow: hidden; opacity: .25 } .smart-docking-layout-snap.layout-bottom>div, .smart-docking-layout-snap.layout-left>div, .smart-docking-layout-snap.layout-right>div, .smart-docking-layout-snap.layout-top>div { width: 100%; height: 100%; border: 1px solid var(--smart-border); background: var(--smart-background); border-top-width: 6px; box-sizing: border-box; display: flex; pointer-events: none } .smart-docking-layout-snap.layout-bottom>div div, .smart-docking-layout-snap.layout-left>div div, .smart-docking-layout-snap.layout-right>div div, .smart-docking-layout-snap.layout-top>div div { width: 100%; height: 100%; background-color: var(--smart-primary) } .smart-docking-layout-snap.layout-bottom.smart-hidden, .smart-docking-layout-snap.layout-left.smart-hidden, .smart-docking-layout-snap.layout-right.smart-hidden, .smart-docking-layout-snap.layout-top.smart-hidden { display: none } .smart-docking-layout-snap.layout-bottom[show], .smart-docking-layout-snap.layout-left[show], .smart-docking-layout-snap.layout-right[show], .smart-docking-layout-snap.layout-top[show] { opacity: 1 } .smart-docking-layout-snap.layout-top { left: 50%; transform: translateX(-50%); top: 5px } .smart-docking-layout-snap.layout-top>div { height: 50%; position: relative } .smart-docking-layout-snap.layout-bottom>div:after, .smart-docking-layout-snap.layout-top>div:after { position: absolute; height: 0; border-left: var(--smart-docking-layout-feedback-background-secondary-size) solid transparent } .smart-docking-layout-snap.layout-top>div:after { content: ""; width: 0; border-right: var(--smart-docking-layout-feedback-background-secondary-size) solid transparent; border-top: none; border-bottom: var(--smart-docking-layout-feedback-background-secondary-size) solid var(--smart-border); left: 50%; top: 180%; transform: translateX(-50%) } .smart-docking-layout-snap.layout-bottom { display: flex; align-items: flex-end; left: 50%; transform: translateX(-50%); top: auto; bottom: 5px } .smart-docking-layout-snap.layout-bottom>div { height: 50%; position: relative } .smart-docking-layout-snap.layout-bottom>div:after { content: ""; width: 0; border-right: var(--smart-docking-layout-feedback-background-secondary-size) solid transparent; border-top: var(--smart-docking-layout-feedback-background-secondary-size) solid var(--smart-border); border-bottom: none; left: 50%; top: -100%; transform: translate(-50%, -150%) } .smart-docking-layout-snap.layout-left>div:after, .smart-docking-layout-snap.layout-right>div:after { content: ""; height: 0; border-top: var(--smart-docking-layout-feedback-background-secondary-size) solid transparent } .smart-docking-layout-snap.layout-left { top: 50%; transform: translateY(-50%); left: 5px } .smart-docking-layout-snap.layout-left>div { width: 50%; position: relative } .smart-docking-layout-snap.layout-left>div:after { position: absolute; width: 0; border-left: none; border-right: var(--smart-docking-layout-feedback-background-secondary-size) solid var(--smart-border); border-bottom: var(--smart-docking-layout-feedback-background-secondary-size) solid transparent; left: 155%; top: 50%; transform: translateY(-50%) } .smart-docking-layout-snap.layout-right { display: flex; align-items: flex-end; flex-direction: column; left: auto; top: 50%; transform: translateY(-50%); right: 5px } .smart-docking-layout-snap.layout-right>div { width: 50%; position: relative } .smart-docking-layout-snap.layout-right>div:after { position: absolute; width: 0; top: 50%; transform: translateY(-50%); border-right: none; border-left: var(--smart-docking-layout-feedback-background-secondary-size) solid var(--smart-border); border-bottom: var(--smart-docking-layout-feedback-background-secondary-size) solid transparent; left: calc(-100% - 1px) } .smart-docking-layout-snap-highlighter { background-color: var(--smart-primary); opacity: .5; position: absolute; pointer-events: none; z-index: 10001 } .smart-docking-layout-snap-highlighter[position=header] { width: 100%; height: 100% } .smart-docking-layout-snap-highlighter[position=center] { top: 0; left: 0; width: 100%; height: 100% } .smart-docking-layout-snap-highlighter[position=top] { width: 100%; height: 50%; max-height: 50%; top: 0 } .smart-docking-layout-snap-highlighter[position=bottom] { width: 100%; height: 50%; max-height: 50%; bottom: 0 } .smart-docking-layout-snap-highlighter[position=left] { width: 50%; max-width: 50%; height: 100%; left: 0; top: 0 } .smart-docking-layout-snap-highlighter[position=right] { width: 50%; max-width: 50%; height: 100%; right: 0; top: 0 } .smart-docking-layout-snap-highlighter[position=layout-top] { width: 100%; height: 10%; max-height: 50%; top: 0 } .smart-docking-layout-snap-highlighter[position=layout-bottom] { width: 100%; height: 10%; max-height: 50%; bottom: 0 } .smart-docking-layout-snap-highlighter[position=layout-left] { width: 10%; max-width: 50%; height: 100%; left: 0; bottom: 0 } .smart-docking-layout-snap-highlighter[position=layout-right] { width: 10%; max-width: 50%; height: 100%; right: 0; bottom: 0 } .smart-docking-layout-snap-highlighter-header { background-color: var(--smart-primary); opacity: .5; position: absolute; pointer-events: none; z-index: 10001; transform: none } @keyframes scaleInNo { 0% { transform: scale(1) } 100% { transform: scale(.2) } } @keyframes leftToRightIn { 0% { transform: scaleX(0) } } @keyframes leftToRightOut { 0% { transform: scaleX(1) } 100% { transform: scaleX(0) } } @keyframes rightToLeftIn { 0% { transform: scaleX(0) } } @keyframes rightToLeftOut { 0% { transform: scaleX(1) } 100% { transform: scaleX(0) } } @keyframes bottomToTopIn { 0% { transform: scaleY(0) } } @keyframes bottomToTopOut { 0% { transform: scaleY(1) } 100% { transform: scaleY(0) } } @keyframes topToBottomIn { 0% { transform: scaleY(0) } } @keyframes topToBottomOut { 0% { transform: scaleY(1) } 100% { transform: scaleY(0) } } smart-drop-down-list { width: var(--smart-drop-down-list-default-width); height: var(--smart-drop-down-list-default-height); overflow: initial; visibility: hidden; cursor: pointer } smart-drop-down-list.smart-element { overflow: visible; visibility: inherit; border-width: 0 } smart-drop-down-list.smart-element .smart-drop-down.smart-visibility-hidden { transform: scale(0); transition: transform .2s ease-in; transform-origin: left top 0 } .smart-drop-down-list smart-list-box { position: relative; width: 100%; height: 100%; border: initial; padding: initial; overflow: hidden; font-size: inherit; font-family: inherit; outline: 0 } .smart-drop-down-list .smart-buttons-container .smart-action-button .smart-token { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; cursor: pointer; margin: 0 2px; user-select: none } .smart-drop-down-list .smart-drop-down-list-unselect-button { pointer-events: none } .smart-drop-down-list .smart-drop-down-list-unselect-button:not(:empty) { margin-right: 2px } .smart-drop-down-list[selection-display-mode=tokens] .smart-drop-down-list-unselect-button { pointer-events: initial } smart-drop-down-button { width: var(--smart-drop-down-button-default-width); height: var(--smart-drop-down-button-default-height); visibility: hidden } smart-drop-down-button.smart-element { display: inline-block; -webkit-backface-visibility: hidden; backface-visibility: hidden; overflow: visible; border: none; visibility: inherit } smart-drop-down-button .smart-ripple { background: var(--smart-primary-color) } smart-drop-down-button .smart-buttons-container>.smart-action-button:empty { padding: 0; width: 0 } smart-drop-down-button .smart-drop-down-container>smart-scroll-viewer { --smart-scroll-viewer-min-width: calc(var(--smart-editor-drop-down-min-width) - 2 * var(--smart-border-width) - 2 * var(--smart-editor-drop-down-padding-size)); --smart-scroll-viewer-max-width: calc(var(--smart-editor-drop-down-max-width) - 2 * var(--smart-border-width) - 2 * var(--smart-editor-drop-down-padding-size)); --smart-scroll-viewer-min-height: calc(var(--smart-editor-drop-down-min-height) - 2 * var(--smart-border-width) - 2 * var(--smart-editor-drop-down-padding-size)); --smart-scroll-viewer-max-height: calc(var(--smart-editor-drop-down-max-height) - 2 * var(--smart-border-width) - 2 * var(--smart-editor-drop-down-padding-size)); width: 100%; height: 100%; border: none; padding: 0; overflow: hidden } smart-drop-down-button .smart-drop-down-container>smart-scroll-viewer>.smart-container>.smart-scroll-viewer-container>.smart-scroll-viewer-content-container { vertical-align: top; padding: 0 } smart-drop-down-button .smart-drop-down-container:not([resize-mode=none])>smart-scroll-viewer { --smart-scroll-viewer-min-height: calc(var(--smart-editor-drop-down-min-height) - 2 * var(--smart-border-width) - 2 * var(--smart-editor-drop-down-padding-size) - var(--smart-editor-drop-down-resize-bar-height)); --smart-scroll-viewer-max-height: calc(var(--smart-editor-drop-down-max-height) - 2 * var(--smart-border-width) - 2 * var(--smart-editor-drop-down-padding-size) - var(--smart-editor- drop-down-resize-bar-height)); height: calc(100% - var(--smart-editor-drop-down-resize-bar-height)) } smart-drop-down-button .smart-drop-down-container[empty]>smart-scroll-viewer>.smart-container>.smart-scroll-viewer-container { display: flex; align-items: center; justify-content: center; font-style: italic } smart-drop-down-button .smart-drop-down-container smart-tree { border: 0 } smart-drop-down-button.primary { --smart-editor-selection: var(--smart-primary); --smart-editor-selection-color: var(--smart-primary-color); --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-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-border: rgba(var(--smart-primary-rgb), .9) } smart-drop-down-button.primary:not([drop-down-open-mode=dropDownButton]) .smart-action-button { --smart-border: rgba(var(--smart-primary-rgb), .9); background-color: var(--smart-primary); color: var(--smart-primary-color) } smart-drop-down-button.primary .smart-action-button, smart-drop-down-button.primary .smart-drop-down-button { --smart-ui-state-border-hover: rgba(var(--smart-primary-rgb), .9); --smart-ui-state-hover: rgba(var(--smart-primary-rgb), .9); --smart-ui-state-color-hover: var(--smart-primary-color); background-color: var(--smart-primary); color: var(--smart-primary-color) } smart-drop-down-button.secondary { --smart-editor-selection: var(--smart-secondary); --smart-editor-selection-color: var(--smart-secondary-color); --smart-ui-state-active: var(--smart-secondary); --smart-ui-state-color-active: var(--smart-secondary-color); --smart-ui-state-border-active: var(--smart-secondary); --smart-ui-state-selected: rgba(var(--smart-secondary-rgb), .1); --smart-ui-state-color-selected: var(--smart-secondary); --smart-ui-state-border-selected: rgba(var(--smart-secondary-rgb), .1); --smart-border: rgba(var(--smart-secondary-rgb), .9) } smart-drop-down-button.secondary:not([drop-down-open-mode=dropDownButton]) .smart-action-button { --smart-border: rgba(var(--smart-secondary-rgb), .9); background-color: var(--smart-secondary); color: var(--smart-secondary-color) } smart-drop-down-button.secondary .smart-action-button, smart-drop-down-button.secondary .smart-drop-down-button { --smart-ui-state-border-hover: rgba(var(--smart-secondary-rgb), .9); --smart-ui-state-hover: rgba(var(--smart-secondary-rgb), .9); --smart-ui-state-color-hover: var(--smart-secondary-color); background-color: var(--smart-secondary); color: var(--smart-secondary-color) } smart-drop-down-button.success { --smart-editor-selection: var(--smart-success); --smart-editor-selection-color: var(--smart-success-color); --smart-ui-state-active: var(--smart-success); --smart-ui-state-color-active: var(--smart-success-color); --smart-ui-state-border-active: var(--smart-success); --smart-ui-state-selected: rgba(var(--smart-success-rgb), .1); --smart-ui-state-color-selected: var(--smart-success); --smart-ui-state-border-selected: rgba(var(--smart-success-rgb), .1); --smart-border: rgba(var(--smart-success-rgb), .9) } smart-drop-down-button.success:not([drop-down-open-mode=dropDownButton]) .smart-action-button { --smart-border: rgba(var(--smart-success-rgb), .9); background-color: var(--smart-success); color: var(--smart-success-color) } smart-drop-down-button.success .smart-action-button, smart-drop-down-button.success .smart-drop-down-button { --smart-ui-state-border-hover: rgba(var(--smart-success-rgb), .9); --smart-ui-state-hover: rgba(var(--smart-success-rgb), .9); --smart-ui-state-color-hover: var(--smart-success-color); background-color: var(--smart-success); color: var(--smart-success-color) } smart-drop-down-button.info { --smart-editor-selection: var(--smart-info); --smart-editor-selection-color: var(--smart-info-color); --smart-ui-state-active: var(--smart-info); --smart-ui-state-color-active: var(--smart-info-color); --smart-ui-state-border-active: var(--smart-info); --smart-ui-state-selected: rgba(var(--smart-info-rgb), .1); --smart-ui-state-color-selected: var(--smart-info); --smart-ui-state-border-selected: rgba(var(--smart-info-rgb), .1); --smart-border: rgba(var(--smart-info-rgb), .9) } smart-drop-down-button.info:not([drop-down-open-mode=dropDownButton]) .smart-action-button { --smart-border: rgba(var(--smart-info-rgb), .9); background-color: var(--smart-info); color: var(--smart-info-color) } smart-drop-down-button.info .smart-action-button, smart-drop-down-button.info .smart-drop-down-button { --smart-ui-state-border-hover: rgba(var(--smart-info-rgb), .9); --smart-ui-state-hover: rgba(var(--smart-info-rgb), .9); --smart-ui-state-color-hover: var(--smart-info-color); background-color: var(--smart-info); color: var(--smart-info-color) } smart-drop-down-button.warning { --smart-editor-selection: var(--smart-warning); --smart-editor-selection-color: var(--smart-warning-color); --smart-ui-state-active: var(--smart-warning); --smart-ui-state-color-active: var(--smart-warning-color); --smart-ui-state-border-active: var(--smart-warning); --smart-ui-state-selected: rgba(var(--smart-warning-rgb), .1); --smart-ui-state-color-selected: var(--smart-warning); --smart-ui-state-border-selected: rgba(var(--smart-warning-rgb), .1); --smart-border: rgba(var(--smart-warning-rgb), .9) } smart-drop-down-button.warning:not([drop-down-open-mode=dropDownButton]) .smart-action-button { --smart-border: rgba(var(--smart-warning-rgb), .9); background-color: var(--smart-warning); color: var(--smart-warning-color) } smart-drop-down-button.warning .smart-action-button, smart-drop-down-button.warning .smart-drop-down-button { --smart-ui-state-border-hover: rgba(var(--smart-warning-rgb), .9); --smart-ui-state-hover: rgba(var(--smart-warning-rgb), .9); --smart-ui-state-color-hover: var(--smart-warning-color); background-color: var(--smart-warning); color: var(--smart-warning-color) } smart-drop-down-button.error { --smart-editor-selection: var(--smart-error); --smart-editor-selection-color: var(--smart-error-color); --smart-ui-state-active: var(--smart-error); --smart-ui-state-color-active: var(--smart-error-color); --smart-ui-state-border-active: var(--smart-error); --smart-ui-state-selected: rgba(var(--smart-error-rgb), .1); --smart-ui-state-color-selected: var(--smart-error); --smart-ui-state-border-selected: rgba(var(--smart-error-rgb), .1); --smart-border: rgba(var(--smart-error-rgb), .9) } smart-drop-down-button.error:not([drop-down-open-mode=dropDownButton]) .smart-action-button { --smart-border: rgba(var(--smart-error-rgb), .9); background-color: var(--smart-error); color: var(--smart-error-color) } smart-drop-down-button.error .smart-action-button, smart-drop-down-button.error .smart-drop-down-button { --smart-ui-state-border-hover: rgba(var(--smart-error-rgb), .9); --smart-ui-state-hover: rgba(var(--smart-error-rgb), .9); --smart-ui-state-color-hover: var(--smart-error-color); background-color: var(--smart-error); color: var(--smart-error-color) } smart-drop-down-button.light { --smart-editor-selection: var(--smart-light); --smart-editor-selection-color: var(--smart-light-color); --smart-ui-state-active: var(--smart-light); --smart-ui-state-color-active: var(--smart-light-color); --smart-ui-state-border-active: var(--smart-light); --smart-ui-state-selected: rgba(var(--smart-light-rgb), .1); --smart-ui-state-color-selected: var(--smart-light); --smart-ui-state-border-selected: rgba(var(--smart-light-rgb), .1); --smart-border: rgba(var(--smart-light-rgb), .9) } smart-drop-down-button.light:not([drop-down-open-mode=dropDownButton]) .smart-action-button { --smart-border: rgba(var(--smart-light-rgb), .9); background-color: var(--smart-light); color: var(--smart-light-color) } smart-drop-down-button.light .smart-action-button, smart-drop-down-button.light .smart-drop-down-button { --smart-ui-state-border-hover: rgba(var(--smart-light-rgb), .9); --smart-ui-state-hover: rgba(var(--smart-light-rgb), .9); --smart-ui-state-color-hover: var(--smart-light-color); background-color: var(--smart-light); color: var(--smart-light-color) } smart-drop-down-button.dark { --smart-editor-selection: var(--smart-dark); --smart-editor-selection-color: var(--smart-dark-color); --smart-ui-state-active: var(--smart-dark); --smart-ui-state-color-active: var(--smart-dark-color); --smart-ui-state-border-active: var(--smart-dark); --smart-ui-state-selected: rgba(var(--smart-dark-rgb), .1); --smart-ui-state-color-selected: var(--smart-dark); --smart-ui-state-border-selected: rgba(var(--smart-dark-rgb), .1); --smart-border: rgba(var(--smart-dark-rgb), .9) } smart-drop-down-button.dark:not([drop-down-open-mode=dropDownButton]) .smart-action-button { --smart-border: rgba(var(--smart-dark-rgb), .9); background-color: var(--smart-dark); color: var(--smart-dark-color) } smart-drop-down-button.dark .smart-action-button, smart-drop-down-button.dark .smart-drop-down-button { --smart-ui-state-border-hover: rgba(var(--smart-dark-rgb), .9); --smart-ui-state-hover: rgba(var(--smart-dark-rgb), .9); --smart-ui-state-color-hover: var(--smart-dark-color); background-color: var(--smart-dark); color: var(--smart-dark-color) } .smart-drop-down-box, .smart-drop-down-box .smart-action-button { border-color: var(--smart-border); border-top-left-radius: var(--smart-border-top-left-radius); border-bottom-left-radius: var(--smart-border-bottom-left-radius) } .smart-drop-down-box { background: var(--smart-surface); border-top-right-radius: var(--smart-border-top-right-radius); border-bottom-right-radius: var(--smart-border-bottom-right-radius); overflow: initial; font-family: var(--smart-font-family); font-size: var(--smart-font-size); outline: 0; height: var(--smart-editor-height) } .smart-drop-down-box.smart-container, .smart-drop-down-box>.smart-container { display: flex; position: relative; align-items: center } .smart-drop-down-box.smart-container>.smart-content, .smart-drop-down-box>.smart-container>.smart-content { position: relative; display: flex; width: 100%; height: 100% } .smart-drop-down-box .smart-buttons-container { width: inherit; height: inherit; display: inherit; flex-direction: inherit; cursor: inherit; position: inherit; overflow: hidden; min-height: inherit } .smart-drop-down-box .smart-action-button { display: flex; padding-left: var(--smart-editor-label-padding); align-content: center; outline: transparent solid 1px; height: 100%; width: calc(100% - var(--smart-editor-addon-width)); flex-wrap: wrap; overflow: hidden; position: relative; border-style: solid; border-width: var(--smart-border-width); align-items: center; border-right: none; user-select: none; white-space: nowrap } .smart-drop-down-box .smart-action-button .smart-input { color: inherit; background: inherit; border: none; width: calc(100% - var(--smart-editor-addon-width)); height: 100%; outline: 0; text-overflow: ellipsis } .smart-drop-down-box .smart-action-button .smart-input::placeholder { color: inherit } .smart-drop-down-box .smart-drop-down-button { display: flex; align-items: center; justify-content: center; width: var(--smart-editor-addon-width); min-width: var(--smart-editor-addon-width); color: inherit; outline: transparent solid 1px; overflow: hidden; position: relative; background-color: var(--smart-surface); border-width: var(--smart-border-width); border-style: solid; border-color: var(--smart-border); border-left: none; color: var(--smart-surface-color); border-top-right-radius: var(--smart-border-top-right-radius); border-bottom-right-radius: var(--smart-border-bottom-right-radius); cursor: pointer } .smart-drop-down-box .smart-drop-down-button .smart-drop-down-button-icon { pointer-events: none; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; transform-origin: center; font-family: var(--smart-font-family-icon) } .smart-drop-down-box .smart-drop-down-button .smart-drop-down-button-icon:after { content: var(--smart-icon-arrow-down); font-size: var(--smart-arrow-size) } .smart-drop-down-box .smart-drop-down-button[active] { border-color: var(--smart-ui-state-border-active); background-color: var(--smart-ui-state-active); color: var(--smart-ui-state-color-active) } .smart-drop-down-box .smart-drop-down-button[center-top] .smart-drop-down-button-icon:after, .smart-drop-down-box .smart-drop-down-button[top] .smart-drop-down-button-icon:after { transform: rotate(180deg) } .smart-drop-down-box .smart-drop-down { font-family: var(--smart-font-family); font-size: var(--smart-font-size) } .smart-drop-down-box .smart-drop-down.smart-visibility-hidden { transform: scale(0); transition: transform .2s ease-in; transform-origin: left top 0 } .smart-drop-down-box[drop-down-button-position=top] .smart-action-button, .smart-drop-down-box[drop-down-button-position=bottom] .smart-action-button { min-height: var(--smart-editor-height); padding-left: initial } .smart-drop-down-box[drop-down-button-position=top] .smart-action-button, .smart-drop-down-box[drop-down-button-position=top] .smart-drop-down-button, .smart-drop-down-box[drop-down-button-position=bottom] .smart-action-button, .smart-drop-down-box[drop-down-button-position=bottom] .smart-drop-down-button { width: 100%; border: var(--smart-border-width) solid var(--smart-border); height: 50%; justify-content: center } .smart-drop-down-box[drop-down-button-position=top]:not([drop-down-open-mode=dropDownButton]) .smart-action-button, .smart-drop-down-box[drop-down-button-position=bottom]:not([drop-down-open-mode=dropDownButton]) .smart-drop-down-button { border-top: initial } .smart-drop-down-box[drop-down-button-position=top] { min-height: calc(2 * var(--smart-editor-height)) } .smart-drop-down-box[drop-down-button-position=top] .smart-content { flex-direction: column-reverse } .smart-drop-down-box[drop-down-button-position=top] .smart-drop-down-button { border-bottom: initial; border-top-left-radius: var(--smart-border-top-left-radius); border-bottom-left-radius: 0; border-top-right-radius: var(--smart-border-top-right-radius); border-bottom-right-radius: 0 } .smart-drop-down-box[drop-down-button-position=top] .smart-action-button { border-top-left-radius: 0; border-bottom-left-radius: var(--smart-border-bottom-left-radius); border-top-right-radius: 0; border-bottom-right-radius: var(--smart-border-bottom-right-radius) } .smart-drop-down-box[drop-down-button-position=bottom] { min-height: calc(2 * var(--smart-editor-height)) } .smart-drop-down-box[drop-down-button-position=bottom] .smart-content { flex-direction: column } .smart-drop-down-box[drop-down-button-position=bottom] .smart-action-button { border-bottom: initial; border-top-left-radius: var(--smart-border-top-left-radius); border-bottom-left-radius: 0; border-top-right-radius: var(--smart-border-top-right-radius); border-bottom-right-radius: 0 } .smart-drop-down-box[drop-down-button-position=bottom] .smart-drop-down-button { border-top-left-radius: 0; border-bottom-left-radius: var(--smart-border-bottom-left-radius); border-top-right-radius: 0; border-bottom-right-radius: var(--smart-border-bottom-right-radius) } .smart-drop-down-box[drop-down-button-position=left].smart-container>.smart-content, .smart-drop-down-box[drop-down-button-position=left]>.smart-container>.smart-content { flex-direction: row-reverse } .smart-drop-down-box[drop-down-button-position=left] .smart-action-button { padding-right: var(--smart-editor-label-padding); border-right: var(--smart-border-width) solid var(--smart-border); border-color: var(--smart-border); border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: var(--smart-border-top-right-radius); border-bottom-right-radius: var(--smart-border-bottom-right-radius); padding-left: initial; flex-direction: row-reverse } .smart-drop-down-box[drop-down-button-position=left] .smart-drop-down-button { border-left: var(--smart-border-width) solid var(--smart-border); border-color: var(--smart-border); border-top-left-radius: var(--smart-border-top-left-radius); border-bottom-left-radius: var(--smart-border-bottom-left-radius); border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: initial } .smart-drop-down-box[drop-down-button-position=left] .smart-drop-down-button[selected] { border-right: initial } .smart-drop-down-box[drop-down-button-position=left]:not([drop-down-open-mode=dropDownButton]) .smart-action-button { border-left: initial } .smart-drop-down-box[drop-down-button-position=right] .smart-action-button { padding-left: var(--smart-editor-label-padding) } .smart-drop-down-box[drop-down-button-position=none] .smart-action-button { border-right: var(--smart-border-width) solid var(--smart-border); border-top-right-radius: var(--smart-border-top-right-radius); border-bottom-right-radius: var(--smart-border-bottom-right-radius); width: 100%; padding-right: var(--smart-editor-label-padding) } .smart-drop-down-box[drop-down-button-position=none] .smart-drop-down-button { display: none } .smart-drop-down-box:not([drop-down-open-mode=dropDownButton]) .smart-action-button { border-color: var(--smart-border); background-color: var(--smart-surface); color: var(--smart-surface-color) } .smart-drop-down-box[drop-down-open-mode=dropDownButton] .smart-action-button { border-color: var(--smart-border); background-color: var(--smart-background); color: var(--smart-background-color) } .smart-drop-down-box[drop-down-open-mode=dropDownButton] .smart-action-button[active] { border-color: var(--smart-ui-state-border-active); background-color: var(--smart-ui-state-active); color: var(--smart-ui-state-color-active) } .smart-drop-down-box[drop-down-open-mode=dropDownButton] .smart-drop-down-button { border-color: var(--smart-border); background-color: var(--smart-surface); color: var(--smart-surface-color); border-left-style: solid; border-left-width: var(--smart-border-width) } .smart-drop-down-box[drop-down-open-mode=dropDownButton][drop-down-button-position=left]:not([hover]) .smart-drop-down-button:focus { border-color: var(--smart-outline); box-shadow: var(--smart-border-width) 0 0 0 var(--smart-outline) } .smart-drop-down-box[drop-down-open-mode=dropDownButton][drop-down-button-position=left]:not([hover]) .smart-action-button:focus { border-color: var(--smart-outline); box-shadow: calc(-1 * var(--smart-border-width)) 0 0 0 var(--smart-outline) } .smart-drop-down-box[drop-down-open-mode=dropDownButton]:not([drop-down-button-position]):not([hover]) .smart-action-button:focus, .smart-drop-down-box[drop-down-open-mode=dropDownButton][drop-down-button-position=right]:not([hover]) .smart-action-button:focus { box-shadow: var(--smart-border-width) 0 0 0 var(--smart-outline); border-color: var(--smart-outline); z-index: 1 } .smart-drop-down-box[drop-down-open-mode=dropDownButton]:not([drop-down-button-position]):not([hover]) .smart-drop-down-button:focus { border-color: var(--smart-outline) } .smart-drop-down-box[resizing] { user-select: none; touch-action: none } .smart-drop-down-box[readonly] input { user-select: none; -moz-user-select: none; -webkit-user-select: none } .smart-drop-down-box[hover] .smart-drop-down-button, .smart-drop-down-box[hover]:not([drop-down-open-mode=dropDownButton]) .smart-action-button { border-color: var(--smart-ui-state-border-hover); background-color: var(--smart-ui-state-hover); color: var(--smart-ui-state-color-hover) } .smart-drop-down-box[focus]:not([opened]) .smart-action-button, .smart-drop-down-box[focus]:not([opened]) .smart-action-button[focus], .smart-drop-down-box[focus]:not([opened]) .smart-drop-down-button, .smart-drop-down-box[focus]:not([opened]) .smart-drop-down-button[focus] { outline: initial; border-color: var(--smart-outline) } .smart-drop-down-box[active] .smart-action-button, .smart-drop-down-box[active][drop-down-open-mode=dropDownButton] .smart-drop-down-button:focus, .smart-drop-down-box[active][focus][drop-down-open-mode=dropDownButton] .smart-action-button, .smart-drop-down-box[active][focus][drop-down-open-mode=dropDownButton] .smart-drop-down-button { border-color: var(--smart-ui-state-border-active); background-color: var(--smart-ui-state-active); color: var(--smart-ui-state-color-active) } .smart-drop-down-box[opened] .smart-drop-down-button .smart-drop-down-button-icon:after, .smart-drop-down-box[opened] .smart-drop-down-button[bottom] .smart-drop-down-button-icon:after, .smart-drop-down-box[opened] .smart-drop-down-button[center-bottom] .smart-drop-down-button-icon:after { transform: rotate(180deg) } .smart-drop-down-box[opened] .smart-drop-down-button[center-top] .smart-drop-down-button-icon:after, .smart-drop-down-box[opened] .smart-drop-down-button[top] .smart-drop-down-button-icon:after { transform: rotate(0) } .smart-drop-down-box[opened]:not(.outlined):not(.underlined) .smart-drop-down-button, .smart-drop-down-box[opened]:not([drop-down-open-mode=dropDownButton]):not(.outlined):not(.underlined) .smart-action-button { border-color: var(--smart-ui-state-active); background-color: var(--smart-ui-state-active); color: var(--smart-ui-state-color-active) } .smart-drop-down-box.auto-height { height: auto; min-height: var(--smart-editor-height) } .smart-drop-down-box.auto-height .smart-action-button, .smart-drop-down-box.auto-height .smart-content, .smart-drop-down-box.auto-height.smart-container, .smart-drop-down-box.auto-height>.smart-container { min-height: inherit } .smart-drop-down-box.auto-height .smart-action-button { padding: 3px } .smart-drop-down-box.auto-height[hint], .smart-drop-down-box.auto-height[label] { height: auto } .smart-drop-down-box[label][hint]>.smart-container { display: flex; position: relative; align-items: center } .smart-drop-down-box[label]>.smart-container { align-items: flex-end } .smart-drop-down-box[hint]>.smart-container { align-items: flex-start } .smart-drop-down-box[hint] .smart-hint { opacity: 0; transition: opacity .2s cubic-bezier(.4, 0, .6, 1); top: 100% } .smart-drop-down-box[hint][focus] .smart-hint { opacity: 1; transition: opacity .2s cubic-bezier(.4, 0, .2, 1) } .smart-drop-down-box[hint] .smart-hint, .smart-drop-down-box[label] .smart-label { position: absolute; left: 0; bottom: 100%; font-size: 12px; width: 100%; display: block; padding: var(--smart-editor-label-padding); pointer-events: none; user-select: none; -webkit-user-select: none; -ms-user-select: none; -moz-user-select: none; text-align: initial; line-height: initial; vertical-align: initial } .smart-drop-down-box[disabled] .smart-drop-down-button, .smart-drop-down-box[disabled]>.smart-container { cursor: default; background-color: initial } .smart-drop-down-box[disabled][selection-display-mode=tokens] .smart-action-button>span { cursor: default } .smart-drop-down-box.underlined { background-color: transparent; border-width: 0 0 1px; background: var(--smart-background); border-bottom-color: var(--smart-border) } .smart-drop-down-box.underlined .smart-action-button { border-top-color: transparent; border-left-color: transparent; border-right-color: transparent; border-bottom-left-radius: 0; background-color: transparent; color: var(--smart-background-color) } .smart-drop-down-box.underlined .smart-action-button input { border-color: transparent !important } .smart-drop-down-box.underlined .smart-action-button[active] { background-color: var(--smart-ui-state-active); color: var(--smart-ui-state-color-active) } .smart-drop-down-box.underlined .smart-drop-down-button[hover], .smart-drop-down-box.underlined .smart-spin-button[active], .smart-drop-down-box.underlined .smart-spin-button[hover] { background: var(--smart-background); color: var(--smart-ui-state-active) } .smart-drop-down-box.underlined .smart-spin-button { background: var(--smart-background); border-width: 0 } .smart-drop-down-box.underlined .smart-drop-down-button { background: var(--smart-background); border-width: 0; border-bottom: 1px solid var(--smart-border) !important; border-top-color: transparent; border-left-color: transparent; border-right-color: transparent } .smart-drop-down-box.underlined .smart-drop-down-button[active] { background-color: var(--smart-ui-state-active); color: var(--smart-ui-state-color-active) } .smart-drop-down-box.underlined .smart-hint { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: block !important; box-sizing: border-box; padding: var(--smart-editor-label-padding); color: var(--smart-background-color); pointer-events: none; font-size: 75%; opacity: 0; transition: color .2s, opacity .1s, font-size .2s, line-height .2s, margin-top .2s, top .2s; margin-top: calc(0px - var(--smart-font-size)) } .smart-drop-down-box.underlined .smart-hint:after { content: ""; position: absolute; left: 0; bottom: -2px; display: block; width: 100%; height: 2px; background-color: var(--smart-primary); transform-origin: bottom center; transform: scaleX(0); transition: transform .2s } .smart-drop-down-box.underlined:not([focus]) .smart-hint { margin-top: 0 } .smart-drop-down-box.underlined[focus] .smart-action-button, .smart-drop-down-box.underlined[focus] input { border-color: transparent !important } .smart-drop-down-box.underlined[focus] .smart-drop-down-button, .smart-drop-down-box.underlined[focus] .smart-hint { color: var(--smart-primary) !important; opacity: 1; border-color: transparent !important } .smart-drop-down-box.underlined:not([opened]):not([hover]) .smart-drop-down-button, .smart-drop-down-box.underlined[opened] .smart-action-button { color: var(--smart-background-color); background-color: transparent } .smart-drop-down-box.underlined[drop-down-open-mode=dropDownButton][hover]:not([opened]) .smart-action-button[hover], .smart-drop-down-box.underlined[hover]:not([opened]) .smart-action-button, .smart-drop-down-box.underlined[hover]:not([opened]):not([drop-down-open-mode=dropDownButton]) .smart-action-button:not([active]), .smart-drop-down-box.underlined[opened] .smart-action-button { border-top-color: transparent; border-left-color: transparent; border-right-color: transparent } .smart-drop-down-box.underlined[focus] .smart-hint:after { transform: scale(1) } .smart-drop-down-box.underlined[opened] .smart-action-button { border-bottom-left-radius: 0 } .smart-drop-down-box.underlined:not([opened]):not([hover]) .smart-drop-down-button:not([hover]) { border-bottom-left-radius: 0 } .smart-drop-down-box.underlined:not([opened]) .smart-action-button:not([active]):not([hover]), .smart-drop-down-box.underlined:not([opened]):not([hover]) .smart-drop-down-button:not([active]):not([hover]) { border-radius: initial } .smart-drop-down-box.underlined[hover]:not([drop-down-open-mode=dropDownButton]):not([opened]) .smart-action-button { border-bottom-left-radius: 0 } .smart-drop-down-box.underlined[hover]:not([drop-down-open-mode=dropDownButton]):not([opened]) .smart-action-button:not([active]) { background-color: transparent } .smart-drop-down-box.underlined[drop-down-open-mode=dropDownButton]:not([drop-down-button-position=left]):not([drop-down-button-position=top]):not([drop-down-button-position=bottom]):not([hover]) .smart-action-button:focus { box-shadow: none; z-index: initial } .smart-drop-down-box.underlined[drop-down-open-mode=dropDownButton][drop-down-button-position=left]:not([hover]) .smart-drop-down-button:focus { box-shadow: none } .smart-drop-down-box.underlined.smart-invalid .smart-drop-down-button { border-bottom-color: rgba(var(--smart-error-rgb), .5) !important } .smart-drop-down-box.outlined { padding-top: 6px; height: auto; min-height: 0; border: none; background: 0 0 } .smart-drop-down-box.outlined>.smart-container>.smart-content { padding: 4px 3px; border: 1px solid var(--smart-border); height: auto; background: var(--smart-background); border-radius: var(--smart-border-radius); z-index: 5 } .smart-drop-down-box.outlined .smart-action-button { border: none; background: var(--smart-background) !important; border-color: var(--smart-border) !important; color: var(--smart-background-color) !important } .smart-drop-down-box.outlined .smart-action-button input { padding: 0; border: none !important; z-index: initial } .smart-drop-down-box.outlined .smart-spin-button { background: var(--smart-background); border-width: 0 } .smart-drop-down-box.outlined .smart-spin-button[active], .smart-drop-down-box.outlined .smart-spin-button[hover] { background: var(--smart-background); color: var(--smart-ui-state-active) } .smart-drop-down-box.outlined .smart-drop-down-button { border-width: 0; padding: 8px 0; background: var(--smart-background) !important; border-color: var(--smart-border) !important; color: var(--smart-background-color) !important } .smart-drop-down-box.outlined .smart-drop-down-button.smart-calendar-button[active], .smart-drop-down-box.outlined .smart-drop-down-button.smart-calendar-button[hover] { background: var(--smart-background); color: var(--smart-ui-state-active) } .smart-drop-down-box.outlined:not([opened]) .smart-action-button:not([active]), .smart-drop-down-box.outlined:not([opened]) .smart-drop-down-button, .smart-drop-down-box.outlined[drop-down-open-mode=dropDownButton]:not([hover]) .smart-action-button:not([active]), .smart-drop-down-box.outlined[focus], .smart-drop-down-box.outlined[hover]:not([opened]):not([drop-down-open-mode=dropDownButton]) .smart-action-button:not([active]) { background-color: transparent } .smart-drop-down-box.outlined.smart-element-init .smart-hint { visibility: hidden; display: none !important } .smart-drop-down-box.outlined:not([focus])[hint] .smart-hint { font-size: var(--smart-font-size); line-height: 48px; opacity: 0 } .smart-drop-down-box.outlined[hint] .smart-hint { position: absolute; top: 0; left: 0; display: flex !important; border-color: var(--smart-border) !important; width: 100%; max-height: 100%; color: var(--smart-background-color); font-size: 75%; line-height: 15px; cursor: text; margin-top: -6px; z-index: 10; padding: 0; transition: color .2s, font-size .2s, opacity .1s, font-size .2s, line-height .2s } .smart-drop-down-box.outlined[hint] .smart-hint:after, .smart-drop-down-box.outlined[hint] .smart-hint:before { content: ""; display: block; box-sizing: border-box; margin-top: 6px; border-top: solid 1px; border-top-color: var(--smart-border) !important; min-width: 10px; height: 8px; pointer-events: none; box-shadow: inset 0 1px transparent; transition: border-color .2s, box-shadow .2s } .smart-drop-down-box.outlined[hint] .smart-hint:before { margin-right: 4px; border-left: solid 1px transparent; border-radius: 4px 0 } .smart-drop-down-box.outlined[hint] .smart-hint:after { flex-grow: 1; margin-left: 4px; border-right: solid 1px transparent; border-radius: 0 4px } .smart-drop-down-box[right-to-left]:not([drop-down-button-position])>.smart-container>.smart-content, .smart-drop-down-box[right-to-left][drop-down-button-position=left] .smart-action-button, .smart-drop-down-box[right-to-left][drop-down-button-position=left]>.smart-container>.smart-content { flex-direction: row } .smart-drop-down-box.outlined[focus]>.smart-container>.smart-content { border-color: var(--smart-primary) } .smart-drop-down-box.outlined[focus] .smart-drop-down-button { color: var(--smart-ui-state-active) !important } .smart-drop-down-box.outlined[focus][hint]>.smart-container>.smart-content { border-top-color: transparent !important } .smart-drop-down-box.outlined[focus][hint] .smart-hint { color: var(--smart-primary); opacity: 1 } .smart-drop-down-box.outlined[focus][hint] .smart-hint:after, .smart-drop-down-box.outlined[focus][hint] .smart-hint:before { border-top-color: var(--smart-primary) !important } .smart-drop-down-box.outlined.smart-invalid>.smart-container>.smart-content { border-color: rgba(var(--smart-error-rgb), .5) } .smart-drop-down-box:not([placeholder])[dropDownButtonPosition=none] .smart-drop-down-button, .smart-drop-down-box[placeholder=""][dropDownButtonPosition=none] .smart-drop-down-button { border-left-width: var(--smart-border-width); border-left-style: solid; border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: var(--smart-border-top-right-radius); border-bottom-right-radius: var(--smart-border-bottom-right-radius) } .smart-drop-down-box:not([placeholder]):not([opened])[dropDownButtonPosition=none] .smart-drop-down-button:not([focus]), .smart-drop-down-box[placeholder=""]:not([opened])[dropDownButtonPosition=none] .smart-drop-down-button:not([focus]) { border-color: var(--smart-border) } .smart-drop-down-box:not([animation=none]) .smart-drop-down-button .smart-drop-down-button-icon:after { transition: transform .2s } .smart-drop-down-box[drop-down-position=overlay-center] .smart-drop-down-button .smart-drop-down-button-icon:after { content: var(--smart-icon-minus) } .smart-drop-down-box.smart-invalid:not([drop-down-open-mode=dropDownButton]) .smart-action-button { border-bottom-color: rgba(var(--smart-error-rgb), .5) !important } .smart-drop-down-box[right-to-left], .smart-drop-down-box[right-to-left] .smart-hint, .smart-drop-down-box[right-to-left] .smart-label { direction: rtl } .smart-drop-down-box[right-to-left] .smart-drop-down-button:focus, .smart-drop-down-box[right-to-left]:not([hover]) .smart-action-button[focus], .smart-drop-down-box[right-to-left]:not([hover]) .smart-drop-down-button[focus] { border-color: var(--smart-outline) } .smart-drop-down-box[right-to-left][drop-down-button-position=right]>.smart-container>.smart-content { flex-direction: row-reverse } .smart-drop-down-box[right-to-left]:not([drop-down-button-position]) .smart-action-button, .smart-drop-down-box[right-to-left][drop-down-button-position=left] .smart-action-button { padding: 0 var(--smart-editor-label-padding) 0 0; border-right: var(--smart-border-width) solid var(--smart-border); border-top-left-radius: initial; border-top-right-radius: var(--smart-border-top-right-radius); border-bottom-left-radius: initial; border-bottom-right-radius: var(--smart-border-bottom-right-radius) } .smart-drop-down-box[right-to-left]:not([drop-down-button-position]) .smart-drop-down-button, .smart-drop-down-box[right-to-left][drop-down-button-position=left] .smart-drop-down-button { border-left: var(--smart-border-width) solid var(--smart-border); border-top-right-radius: initial; border-bottom-right-radius: initial; border-top-left-radius: var(--smart-border-top-left-radius); border-bottom-left-radius: var(--smart-border-bottom-left-radius) } .smart-drop-down.smart-drop-down-container, .smart-drop-down.smart-drop-down-container.smart-drop-down-repositioned { flex-direction: column; height: var(--smart-editor-drop-down-height); min-height: var(--smart-editor-drop-down-min-height) } .smart-drop-down-box[right-to-left]:not([drop-down-button-position]) .smart-action-button, .smart-drop-down-box[right-to-left]:not([drop-down-open-mode=dropDownButton])[drop-down-button-position=left] .smart-action-button { border-left: initial } .smart-drop-down-box[right-to-left]:not([drop-down-open-mode=dropDownButton]):not([drop-down-button-position]) .smart-drop-down-button, .smart-drop-down-box[right-to-left][drop-down-button-position=left] .smart-drop-down-button { border-right: initial } .smart-drop-down-box[right-to-left][opened] .smart-action-button, .smart-drop-down-box[right-to-left][opened] .smart-drop-down-button { border-color: var(--smart-border-active) } .smart-drop-down-box[right-to-left][drop-down-open-mode=dropDownButton]:not([drop-down-button-position]):not([hover]) .smart-action-button:focus, .smart-drop-down-box[right-to-left][drop-down-open-mode=dropDownButton][drop-down-button-position=right]:not([hover]) .smart-action-button:focus { box-shadow: calc(-1 * var(--smart-border-width)) 0 0 0 var(--smart-outline) } .smart-drop-down.smart-drop-down-container { box-shadow: var(--smart-elevation-8); background-color: var(--smart-background); box-sizing: border-box; outline: 0; border-width: var(--smart-border-width); border-style: solid; border-color: var(--smart-border); display: flex; max-height: var(--smart-editor-drop-down-max-height); width: var(--smart-editor-drop-down-width); max-width: var(--smart-editor-drop-down-max-width); min-width: var(--smart-editor-drop-down-min-width); font-size: var(--smart-font-size); font-family: var(--smart-font-family); margin: calc(var(--smart-editor-drop-down-vertical-offset) + var(--smart-editor-drop-down-padding-size)) 0; padding: var(--smart-editor-drop-down-padding-size) 0 !important } .smart-drop-down.smart-drop-down-container smart-list-box:focus { border-color: var(--smart-outline) } .smart-drop-down.smart-date-time-drop-down.smart-drop-down-repositioned, .smart-drop-down.smart-drop-down-container.smart-drop-down-repositioned { outline: 0; border-width: var(--smart-border-width); border-style: solid; border-color: var(--smart-border); display: flex; max-height: var(--smart-editor-drop-down-max-height); max-width: var(--smart-editor-drop-down-max-width); min-width: var(--smart-editor-drop-down-min-width); font-size: var(--smart-font-size); font-family: var(--smart-font-family); padding: var(--smart-editor-drop-down-padding-size) 0 !important; box-sizing: border-box; background-color: var(--smart-background) } .smart-drop-down.smart-drop-down-container .smart-drop-down-resize-bar { position: relative; width: 100%; margin-top: 2.5px; height: calc(var(--smart-editor-drop-down-resize-bar-height) - 2.5px); touch-action: none } .smart-drop-down.smart-drop-down-container.smart-visibility-hidden { transform: scale(0) } .smart-drop-down.smart-drop-down-container.smart-drop-down-repositioned.smart-visibility-hidden { top: 0; left: 0 } .smart-drop-down.smart-drop-down-container.smart-visibility-hidden.not-in-view { left: -9999px; top: -9999px; transition: none } .smart-drop-down.smart-drop-down-container.smart-drop-down-repositioned { width: var(--smart-editor-drop-down-width); margin: calc(var(--smart-editor-drop-down-vertical-offset) + var(--smart-editor-drop-down-padding-size)) 0 } .smart-drop-down.smart-drop-down-container.smart-drop-down-repositioned.smart-visibility-hidden.not-in-view { left: -9999px; top: -9999px; transition: none } .smart-drop-down.smart-drop-down-container.smart-drop-down-repositioned[center-top], .smart-drop-down.smart-drop-down-container.smart-drop-down-repositioned[top] { margin: calc(-1 * (var(--smart-editor-drop-down-vertical-offset) + 3px)) 0 } .smart-drop-down.smart-date-time-drop-down { width: var(--smart-editor-drop-down-width); height: var(--smart-editor-drop-down-height) } .smart-drop-down.smart-date-time-drop-down.smart-drop-down-repositioned { flex-direction: column; height: var(--smart-editor-drop-down-height); min-height: var(--smart-editor-drop-down-min-height); width: var(--smart-editor-drop-down-width); margin: calc(var(--smart-editor-drop-down-vertical-offset) + var(--smart-editor-drop-down-padding-size)) 0 } .smart-drop-down.smart-date-time-drop-down[drop-down-display-mode=calendar] { height: calc(var(--smart-editor-drop-down-height) - var(--smart-calendar-title-height)) !important } .smart-drop-down.smart-drop-down-color-picker.smart-drop-down-repositioned { max-height: calc(var(--smart-editor-drop-down-max-height) + 50px) } .smart-drop-down[top] .smart-drop-down-resize-bar { margin-top: 0; margin-bottom: 2.5px } .smart-drop-down[top].smart-drop-down-container.smart-drop-down-repositioned, .smart-drop-down[top].smart-drop-down-container.smart-drop-down-repositioned.smart-visibility-hidden { top: initial; bottom: calc(100% - var(--smart-border-width)); flex-direction: column-reverse } .smart-drop-down[overlay-bottom], .smart-drop-down[overlay-center], .smart-drop-down[overlay-top] { margin: unset } .smart-drop-down:not([resize-mode=none]) smart-list-box { position: relative; width: 100%; height: calc(100% - var(--smart-editor-drop-down-resize-bar-height)); border: none } .smart-drop-down:not([resize-mode=none]) .smart-drop-down-resize-bar { border-top: 1px solid var(--smart-border) } .smart-drop-down:not([resize-mode=none])[top] .smart-drop-down-resize-bar { border-top: initial; border-bottom: 1px solid var(--smart-border) } .smart-drop-down[resize-mode][top] .smart-drop-down-resize-bar>div { top: calc(50% - 1px) } .smart-drop-down[resize-mode=none] smart-list-box { width: 100%; height: 100%; position: relative; border: none } .smart-drop-down[resize-mode=none] .smart-drop-down-resize-bar { display: none; cursor: default } .smart-drop-down[resize-mode=none] .smart-drop-down-resize-bar>div { display: none } .smart-drop-down[resize-mode=vertical] .smart-drop-down-resize-bar>div, .smart-drop-down[resize-mode=both] .smart-drop-down-resize-bar>div { display: initial; position: absolute; width: 5px; height: 5px; left: 50%; top: calc(50% + 1px); transform: translate(-50%, -50%); border: 1px solid var(--smart-border); border-radius: 50%; pointer-events: none } .smart-drop-down[resize-mode=vertical] .smart-drop-down-resize-bar>div:after, .smart-drop-down[resize-mode=vertical] .smart-drop-down-resize-bar>div:before, .smart-drop-down[resize-mode=both] .smart-drop-down-resize-bar>div:after, .smart-drop-down[resize-mode=both] .smart-drop-down-resize-bar>div:before { position: absolute; top: 50%; transform: translate(-50%, -50%); content: ''; width: 100%; height: 100%; border: 1px solid var(--smart-border); border-radius: 50%; pointer-events: none } .smart-drop-down[resize-mode=vertical] .smart-drop-down-resize-bar>div:after, .smart-drop-down[resize-mode=both] .smart-drop-down-resize-bar>div:after { left: 500% } .smart-drop-down[resize-mode=vertical] .smart-drop-down-resize-bar>div:before, .smart-drop-down[resize-mode=both] .smart-drop-down-resize-bar>div:before { left: -400% } .smart-drop-down[resize-mode=vertical].smart-drop-down-container.smart-drop-down-repositioned .smart-drop-down-resize-bar>div, .smart-drop-down[resize-mode=both].smart-drop-down-container.smart-drop-down-repositioned .smart-drop-down-resize-bar>div { width: 3px; height: 3px } .smart-drop-down[resize-mode=both][resize-indicator] .smart-drop-down-resize-bar:before, .smart-drop-down[resize-mode=horizontal][resize-indicator] .smart-drop-down-resize-bar:before { width: 8px; height: 5px; font-family: var(--smart-font-family-icon); content: var(--smart-icon-resize-horizontal); position: absolute; top: calc(100% - 8px); left: calc(100% - 8px); transform: rotate(-45deg); font-size: 10px; cursor: se-resize } .smart-drop-down[resize-mode=both][resize-indicator] .smart-drop-down-resize-bar:after, .smart-drop-down[resize-mode=horizontal][resize-indicator] .smart-drop-down-resize-bar:after { width: 8px; height: 12px; font-family: var(--smart-font-family-icon); content: var(--smart-icon-resize-full); position: absolute; top: calc(100% - 12px); left: calc(100% - 7px); transform: rotate(-45deg) scaleX(2.25); font-size: 10px; cursor: e-resize } .smart-color-picker .smart-drop-down, .smart-combo-box .smart-drop-down, .smart-date-time-picker .smart-drop-down, .smart-drop-down-button .smart-drop-down, .smart-drop-down-container.smart-drop-down-repositioned, .smart-drop-down-list .smart-drop-down, .smart-multi-split-button .smart-drop-down, .smart-path .smart-drop-down, .smart-text-box .smart-drop-down { height: var(--smart-editor-drop-down-height); max-height: var(--smart-editor-drop-down-max-height); min-height: var(--smart-editor-drop-down-min-height); width: var(--smart-editor-drop-down-width); max-width: var(--smart-editor-drop-down-max-width); min-width: var(--smart-editor-drop-down-min-width); font-size: var(--smart-font-size); font-family: var(--smart-font-family); padding: var(--smart-editor-drop-down-padding-size) 0 !important; margin: calc(var(--smart-editor-drop-down-vertical-offset) + var(--smart-editor-drop-down-padding-size)) 0; border-width: var(--smart-border-width); border-style: solid; border-color: var(--smart-border); outline: 0 } .smart-drop-down[resize-mode=both][top] .smart-drop-down-resize-bar:before, .smart-drop-down[resize-mode=horizontal][top] .smart-drop-down-resize-bar:before { transform: rotate(45deg); top: calc(100% - 13px); left: calc(100% - 4px) } .smart-drop-down[resize-mode=vertical] .smart-drop-down-resize-bar { cursor: n-resize } .smart-drop-down[resize-mode=horizontal] .smart-drop-down-resize-bar { cursor: e-resize } .smart-drop-down[resize-mode=horizontal] .smart-drop-down-resize-bar>div { display: none } .smart-drop-down[resize-mode=both] .smart-drop-down-resize-bar { cursor: nwse-resize } .smart-drop-down[resize-mode=both][top] .smart-drop-down-resize-bar { cursor: sw-resize } .smart-drop-down-container.smart-drop-down-repositioned { background-color: var(--smart-background); box-sizing: border-box; display: flex; flex-direction: column } .smart-drop-down-container.smart-drop-down-repositioned.smart-visibility-hidden.not-in-view { left: -9999px; top: -9999px; transition: none } .smart-drop-down-container.smart-drop-down-repositioned:focus { border-color: var(--smart-border) } .smart-drop-down-container.smart-drop-down-repositioned[overlay-bottom], .smart-drop-down-container.smart-drop-down-repositioned[overlay-center], .smart-drop-down-container.smart-drop-down-repositioned[overlay-top] { margin: unset } .smart-drop-down-container.smart-drop-down-repositioned[overlay-bottom]:not([animation=none]), .smart-drop-down-container.smart-drop-down-repositioned[overlay-center]:not([animation=none]), .smart-drop-down-container.smart-drop-down-repositioned[overlay-top]:not([animation=none]) { animation: smart-drop-down-list-smart-animate-opening .2s ease-out; -webkit-transform-origin: center; transform-origin: center } .smart-drop-down-container.smart-drop-down-repositioned[overlay-bottom]:not([animation=none]).smart-visibility-hidden, .smart-drop-down-container.smart-drop-down-repositioned[overlay-center]:not([animation=none]).smart-visibility-hidden, .smart-drop-down-container.smart-drop-down-repositioned[overlay-top]:not([animation=none]).smart-visibility-hidden { animation: smart-drop-down-list-smart-animate-closing .2s ease-in; -webkit-transform-origin: center; transform-origin: center } .smart-drop-down-container.smart-drop-down-repositioned[center-top], .smart-drop-down-container.smart-drop-down-repositioned[top] { margin: calc(-1 * (var(--smart-editor-drop-down-vertical-offset) + 3px)) 0 } .smart-drop-down-container.smart-drop-down-repositioned[center-top]:not([animation=none]), .smart-drop-down-container.smart-drop-down-repositioned[top]:not([animation=none]) { animation: smart-drop-down-list-smart-animate-opening .2s ease-out; -webkit-transform-origin: bottom; transform-origin: bottom } .smart-drop-down-container.smart-drop-down-repositioned[center-top]:not([animation=none]).smart-visibility-hidden, .smart-drop-down-container.smart-drop-down-repositioned[top]:not([animation=none]).smart-visibility-hidden { animation: smart-drop-down-list-smart-animate-closing .2s ease-in; -webkit-transform-origin: bottom; transform-origin: bottom } .smart-drop-down-container.smart-drop-down-repositioned[bottom]:not([animation=none]), .smart-drop-down-container.smart-drop-down-repositioned[center-bottom]:not([animation=none]) { animation: smart-drop-down-list-smart-animate-opening .2s ease-out; -webkit-transform-origin: top; transform-origin: top } .smart-drop-down-container.smart-drop-down-repositioned[bottom]:not([animation=none]).smart-visibility-hidden, .smart-drop-down-container.smart-drop-down-repositioned[center-bottom]:not([animation=none]).smart-visibility-hidden { animation: smart-drop-down-list-smart-animate-closing .2s ease-in; -webkit-transform-origin: top; transform-origin: top } .smart-drop-down-container.smart-drop-down-repositioned:not([animation=none]).smart-visibility-hidden { transition: animation, visibility .2s ease-in } .smart-drop-down-container[top].smart-drop-down-container.smart-drop-down-repositioned { bottom: initial } .smart-drop-down-container[top].smart-drop-down-container.smart-drop-down-repositioned.smart-visibility-hidden { bottom: calc(100% - var(--smart-border-width)) } .smart-color-picker .smart-drop-down, .smart-combo-box .smart-drop-down, .smart-date-time-picker .smart-drop-down, .smart-drop-down-button .smart-drop-down, .smart-drop-down-list .smart-drop-down, .smart-multi-split-button .smart-drop-down, .smart-path .smart-drop-down, .smart-text-box .smart-drop-down { background-color: var(--smart-background); box-sizing: border-box; display: flex; flex-direction: column; top: calc(100% - var(--smart-border-width)) } .smart-color-picker .smart-drop-down.smart-visibility-hidden, .smart-combo-box .smart-drop-down.smart-visibility-hidden, .smart-date-time-picker .smart-drop-down.smart-visibility-hidden, .smart-drop-down-button .smart-drop-down.smart-visibility-hidden, .smart-drop-down-list .smart-drop-down.smart-visibility-hidden, .smart-multi-split-button .smart-drop-down.smart-visibility-hidden, .smart-path .smart-drop-down.smart-visibility-hidden, .smart-text-box .smart-drop-down.smart-visibility-hidden { top: calc(100% - var(--smart-border-width)) } .smart-color-picker .smart-drop-down.smart-visibility-hidden.not-in-view, .smart-combo-box .smart-drop-down.smart-visibility-hidden.not-in-view, .smart-date-time-picker .smart-drop-down.smart-visibility-hidden.not-in-view, .smart-drop-down-button .smart-drop-down.smart-visibility-hidden.not-in-view, .smart-drop-down-list .smart-drop-down.smart-visibility-hidden.not-in-view, .smart-multi-split-button .smart-drop-down.smart-visibility-hidden.not-in-view, .smart-path .smart-drop-down.smart-visibility-hidden.not-in-view, .smart-text-box .smart-drop-down.smart-visibility-hidden.not-in-view { left: -9999px; top: -9999px; transition: none } .smart-color-picker .smart-drop-down[overlay-bottom], .smart-color-picker .smart-drop-down[overlay-bottom].smart-visibility-hidden, .smart-combo-box .smart-drop-down[overlay-bottom], .smart-combo-box .smart-drop-down[overlay-bottom].smart-visibility-hidden, .smart-date-time-picker .smart-drop-down[overlay-bottom], .smart-date-time-picker .smart-drop-down[overlay-bottom].smart-visibility-hidden, .smart-drop-down-button .smart-drop-down[overlay-bottom], .smart-drop-down-button .smart-drop-down[overlay-bottom].smart-visibility-hidden, .smart-drop-down-list .smart-drop-down[overlay-bottom], .smart-drop-down-list .smart-drop-down[overlay-bottom].smart-visibility-hidden, .smart-multi-split-button .smart-drop-down[overlay-bottom], .smart-multi-split-button .smart-drop-down[overlay-bottom].smart-visibility-hidden, .smart-path .smart-drop-down[overlay-bottom], .smart-path .smart-drop-down[overlay-bottom].smart-visibility-hidden, .smart-text-box .smart-drop-down[overlay-bottom], .smart-text-box .smart-drop-down[overlay-bottom].smart-visibility-hidden { border-color: var(--smart-border); border-width: var(--smart-border-width); border-style: solid; top: 0 } .smart-color-picker .smart-drop-down[overlay-center], .smart-color-picker .smart-drop-down[overlay-center].smart-visibility-hidden, .smart-combo-box .smart-drop-down[overlay-center], .smart-combo-box .smart-drop-down[overlay-center].smart-visibility-hidden, .smart-date-time-picker .smart-drop-down[overlay-center], .smart-date-time-picker .smart-drop-down[overlay-center].smart-visibility-hidden, .smart-drop-down-button .smart-drop-down[overlay-center], .smart-drop-down-button .smart-drop-down[overlay-center].smart-visibility-hidden, .smart-drop-down-list .smart-drop-down[overlay-center], .smart-drop-down-list .smart-drop-down[overlay-center].smart-visibility-hidden, .smart-multi-split-button .smart-drop-down[overlay-center], .smart-multi-split-button .smart-drop-down[overlay-center].smart-visibility-hidden, .smart-path .smart-drop-down[overlay-center], .smart-path .smart-drop-down[overlay-center].smart-visibility-hidden, .smart-text-box .smart-drop-down[overlay-center], .smart-text-box .smart-drop-down[overlay-center].smart-visibility-hidden { border-color: var(--smart-border); border-width: var(--smart-border-width); border-style: solid; top: 50%; transform: translateY(-50%) } .smart-color-picker .smart-drop-down[overlay-top], .smart-color-picker .smart-drop-down[overlay-top].smart-visibility-hidden, .smart-combo-box .smart-drop-down[overlay-top], .smart-combo-box .smart-drop-down[overlay-top].smart-visibility-hidden, .smart-date-time-picker .smart-drop-down[overlay-top], .smart-date-time-picker .smart-drop-down[overlay-top].smart-visibility-hidden, .smart-drop-down-button .smart-drop-down[overlay-top], .smart-drop-down-button .smart-drop-down[overlay-top].smart-visibility-hidden, .smart-drop-down-list .smart-drop-down[overlay-top], .smart-drop-down-list .smart-drop-down[overlay-top].smart-visibility-hidden, .smart-multi-split-button .smart-drop-down[overlay-top], .smart-multi-split-button .smart-drop-down[overlay-top].smart-visibility-hidden, .smart-path .smart-drop-down[overlay-top], .smart-path .smart-drop-down[overlay-top].smart-visibility-hidden, .smart-text-box .smart-drop-down[overlay-top], .smart-text-box .smart-drop-down[overlay-top].smart-visibility-hidden { border-color: var(--smart-border); border-width: var(--smart-border-width); border-style: solid; top: initial; bottom: 0 } .smart-color-picker .smart-drop-down[top], .smart-color-picker .smart-drop-down[top].smart-visibility-hidden, .smart-combo-box .smart-drop-down[top], .smart-combo-box .smart-drop-down[top].smart-visibility-hidden, .smart-date-time-picker .smart-drop-down[top], .smart-date-time-picker .smart-drop-down[top].smart-visibility-hidden, .smart-drop-down-button .smart-drop-down[top], .smart-drop-down-button .smart-drop-down[top].smart-visibility-hidden, .smart-drop-down-list .smart-drop-down[top], .smart-drop-down-list .smart-drop-down[top].smart-visibility-hidden, .smart-multi-split-button .smart-drop-down[top], .smart-multi-split-button .smart-drop-down[top].smart-visibility-hidden, .smart-path .smart-drop-down[top], .smart-path .smart-drop-down[top].smart-visibility-hidden, .smart-text-box .smart-drop-down[top], .smart-text-box .smart-drop-down[top].smart-visibility-hidden { top: initial; bottom: calc(100% - var(--smart-border-width)); flex-direction: column-reverse } .smart-color-picker .smart-drop-down[bottom], .smart-combo-box .smart-drop-down[bottom], .smart-date-time-picker .smart-drop-down[bottom], .smart-drop-down-button .smart-drop-down[bottom], .smart-drop-down-list .smart-drop-down[bottom], .smart-multi-split-button .smart-drop-down[bottom], .smart-path .smart-drop-down[bottom], .smart-text-box .smart-drop-down[bottom] { cursor: default; left: 0; box-sizing: border-box; font-size: inherit; padding: var(--smart-editor-drop-down-padding-size); margin: calc(var(--smart-editor-drop-down-vertical-offset) + var(--smart-editor-drop-down-padding-size)) 0; background-color: var(--smart-background); border-width: var(--smart-border-width); border-style: solid; border-color: var(--smart-border); box-shadow: var(--smart-elevation-8); display: flex; flex-direction: column; padding-left: 0; top: calc(100% - var(--smart-border-width)) } .smart-color-picker .smart-drop-down .smart-list-items-container.vscroll[orientation=vertical], .smart-combo-box .smart-drop-down .smart-list-items-container.vscroll[orientation=vertical], .smart-drop-down-button .smart-drop-down .smart-list-items-container.vscroll[orientation=vertical], .smart-drop-down-list .smart-drop-down .smart-list-items-container.vscroll[orientation=vertical], .smart-multi-split-button .smart-drop-down .smart-list-items-container.vscroll[orientation=vertical], .smart-text-box .smart-drop-down .smart-list-items-container.vscroll[orientation=vertical] { padding-top: initial } .smart-color-picker .smart-drop-down[bottom].smart-visibility-hidden, .smart-combo-box .smart-drop-down[bottom].smart-visibility-hidden, .smart-date-time-picker .smart-drop-down[bottom].smart-visibility-hidden, .smart-drop-down-button .smart-drop-down[bottom].smart-visibility-hidden, .smart-drop-down-list .smart-drop-down[bottom].smart-visibility-hidden, .smart-multi-split-button .smart-drop-down[bottom].smart-visibility-hidden, .smart-path .smart-drop-down[bottom].smart-visibility-hidden, .smart-text-box .smart-drop-down[bottom].smart-visibility-hidden { top: calc(100% - var(--smart-border-width)) } .smart-color-picker .smart-drop-down[center-bottom], .smart-color-picker .smart-drop-down[center-bottom].smart-visibility-hidden, .smart-combo-box .smart-drop-down[center-bottom], .smart-combo-box .smart-drop-down[center-bottom].smart-visibility-hidden, .smart-date-time-picker .smart-drop-down[center-bottom], .smart-date-time-picker .smart-drop-down[center-bottom].smart-visibility-hidden, .smart-drop-down-button .smart-drop-down[center-bottom], .smart-drop-down-button .smart-drop-down[center-bottom].smart-visibility-hidden, .smart-drop-down-list .smart-drop-down[center-bottom], .smart-drop-down-list .smart-drop-down[center-bottom].smart-visibility-hidden, .smart-multi-split-button .smart-drop-down[center-bottom], .smart-multi-split-button .smart-drop-down[center-bottom].smart-visibility-hidden, .smart-path .smart-drop-down[center-bottom], .smart-path .smart-drop-down[center-bottom].smart-visibility-hidden, .smart-text-box .smart-drop-down[center-bottom], .smart-text-box .smart-drop-down[center-bottom].smart-visibility-hidden { left: 50%; border: var(--smart-border-width) solid var(--smart-border); top: calc(100% - var(--smart-border-width)) } .smart-color-picker .smart-drop-down[center-top], .smart-color-picker .smart-drop-down[center-top].smart-visibility-hidden, .smart-combo-box .smart-drop-down[center-top], .smart-combo-box .smart-drop-down[center-top].smart-visibility-hidden, .smart-date-time-picker .smart-drop-down[center-top], .smart-date-time-picker .smart-drop-down[center-top].smart-visibility-hidden, .smart-drop-down-button .smart-drop-down[center-top], .smart-drop-down-button .smart-drop-down[center-top].smart-visibility-hidden, .smart-drop-down-list .smart-drop-down[center-top], .smart-drop-down-list .smart-drop-down[center-top].smart-visibility-hidden, .smart-multi-split-button .smart-drop-down[center-top], .smart-multi-split-button .smart-drop-down[center-top].smart-visibility-hidden, .smart-path .smart-drop-down[center-top], .smart-path .smart-drop-down[center-top].smart-visibility-hidden, .smart-text-box .smart-drop-down[center-top], .smart-text-box .smart-drop-down[center-top].smart-visibility-hidden { left: 50%; border: var(--smart-border-width) solid var(--smart-border); top: initial; bottom: calc(100% - var(--smart-border-width)) } .smart-color-picker:not([animation=none]) .smart-drop-down, .smart-combo-box:not([animation=none]) .smart-drop-down, .smart-date-time-picker:not([animation=none]) .smart-drop-down, .smart-drop-down-button:not([animation=none]) .smart-drop-down, .smart-drop-down-list:not([animation=none]) .smart-drop-down, .smart-multi-split-button:not([animation=none]) .smart-drop-down, .smart-path:not([animation=none]) .smart-drop-down, .smart-text-box:not([animation=none]) .smart-drop-down { animation: smart-drop-down-list-smart-animate-opening .2s ease-out; -webkit-transform-origin: top; transform-origin: top } .smart-color-picker:not([animation=none]) .smart-drop-down.smart-visibility-hidden, .smart-combo-box:not([animation=none]) .smart-drop-down.smart-visibility-hidden, .smart-date-time-picker:not([animation=none]) .smart-drop-down.smart-visibility-hidden, .smart-drop-down-button:not([animation=none]) .smart-drop-down.smart-visibility-hidden, .smart-drop-down-list:not([animation=none]) .smart-drop-down.smart-visibility-hidden, .smart-multi-split-button:not([animation=none]) .smart-drop-down.smart-visibility-hidden, .smart-path:not([animation=none]) .smart-drop-down.smart-visibility-hidden, .smart-text-box:not([animation=none]) .smart-drop-down.smart-visibility-hidden { transition: animation, visibility .2s ease-in; animation: smart-drop-down-list-smart-animate-closing .2s ease-in; -webkit-transform-origin: top; transform-origin: top } .smart-color-picker:not([animation=none]) .smart-drop-down[bottom], .smart-color-picker:not([animation=none]) .smart-drop-down[center-bottom], .smart-combo-box:not([animation=none]) .smart-drop-down[bottom], .smart-combo-box:not([animation=none]) .smart-drop-down[center-bottom], .smart-date-time-picker:not([animation=none]) .smart-drop-down[bottom], .smart-date-time-picker:not([animation=none]) .smart-drop-down[center-bottom], .smart-drop-down-button:not([animation=none]) .smart-drop-down[bottom], .smart-drop-down-button:not([animation=none]) .smart-drop-down[center-bottom], .smart-drop-down-list:not([animation=none]) .smart-drop-down[bottom], .smart-drop-down-list:not([animation=none]) .smart-drop-down[center-bottom], .smart-multi-split-button:not([animation=none]) .smart-drop-down[bottom], .smart-multi-split-button:not([animation=none]) .smart-drop-down[center-bottom], .smart-path:not([animation=none]) .smart-drop-down[bottom], .smart-path:not([animation=none]) .smart-drop-down[center-bottom], .smart-text-box:not([animation=none]) .smart-drop-down[bottom], .smart-text-box:not([animation=none]) .smart-drop-down[center-bottom] { animation: smart-drop-down-list-smart-animate-opening .2s ease-out; -webkit-transform-origin: top; transform-origin: top } .smart-color-picker:not([animation=none]) .smart-drop-down[bottom].smart-visibility-hidden, .smart-color-picker:not([animation=none]) .smart-drop-down[center-bottom].smart-visibility-hidden, .smart-combo-box:not([animation=none]) .smart-drop-down[bottom].smart-visibility-hidden, .smart-combo-box:not([animation=none]) .smart-drop-down[center-bottom].smart-visibility-hidden, .smart-date-time-picker:not([animation=none]) .smart-drop-down[bottom].smart-visibility-hidden, .smart-date-time-picker:not([animation=none]) .smart-drop-down[center-bottom].smart-visibility-hidden, .smart-drop-down-button:not([animation=none]) .smart-drop-down[bottom].smart-visibility-hidden, .smart-drop-down-button:not([animation=none]) .smart-drop-down[center-bottom].smart-visibility-hidden, .smart-drop-down-list:not([animation=none]) .smart-drop-down[bottom].smart-visibility-hidden, .smart-drop-down-list:not([animation=none]) .smart-drop-down[center-bottom].smart-visibility-hidden, .smart-multi-split-button:not([animation=none]) .smart-drop-down[bottom].smart-visibility-hidden, .smart-multi-split-button:not([animation=none]) .smart-drop-down[center-bottom].smart-visibility-hidden, .smart-path:not([animation=none]) .smart-drop-down[bottom].smart-visibility-hidden, .smart-path:not([animation=none]) .smart-drop-down[center-bottom].smart-visibility-hidden, .smart-text-box:not([animation=none]) .smart-drop-down[bottom].smart-visibility-hidden, .smart-text-box:not([animation=none]) .smart-drop-down[center-bottom].smart-visibility-hidden { animation: smart-drop-down-list-smart-animate-closing .2s ease-in; -webkit-transform-origin: top; transform-origin: top } .smart-color-picker:not([animation=none]) .smart-drop-down[center-top], .smart-color-picker:not([animation=none]) .smart-drop-down[top], .smart-combo-box:not([animation=none]) .smart-drop-down[center-top], .smart-combo-box:not([animation=none]) .smart-drop-down[top], .smart-date-time-picker:not([animation=none]) .smart-drop-down[center-top], .smart-date-time-picker:not([animation=none]) .smart-drop-down[top], .smart-drop-down-button:not([animation=none]) .smart-drop-down[center-top], .smart-drop-down-button:not([animation=none]) .smart-drop-down[top], .smart-drop-down-list:not([animation=none]) .smart-drop-down[center-top], .smart-drop-down-list:not([animation=none]) .smart-drop-down[top], .smart-multi-split-button:not([animation=none]) .smart-drop-down[center-top], .smart-multi-split-button:not([animation=none]) .smart-drop-down[top], .smart-path:not([animation=none]) .smart-drop-down[center-top], .smart-path:not([animation=none]) .smart-drop-down[top], .smart-text-box:not([animation=none]) .smart-drop-down[center-top], .smart-text-box:not([animation=none]) .smart-drop-down[top] { animation: smart-drop-down-list-smart-animate-opening .2s ease-out; -webkit-transform-origin: bottom; transform-origin: bottom } .smart-color-picker:not([animation=none]) .smart-drop-down[center-top].smart-visibility-hidden, .smart-color-picker:not([animation=none]) .smart-drop-down[top].smart-visibility-hidden, .smart-combo-box:not([animation=none]) .smart-drop-down[center-top].smart-visibility-hidden, .smart-combo-box:not([animation=none]) .smart-drop-down[top].smart-visibility-hidden, .smart-date-time-picker:not([animation=none]) .smart-drop-down[center-top].smart-visibility-hidden, .smart-date-time-picker:not([animation=none]) .smart-drop-down[top].smart-visibility-hidden, .smart-drop-down-button:not([animation=none]) .smart-drop-down[center-top].smart-visibility-hidden, .smart-drop-down-button:not([animation=none]) .smart-drop-down[top].smart-visibility-hidden, .smart-drop-down-list:not([animation=none]) .smart-drop-down[center-top].smart-visibility-hidden, .smart-drop-down-list:not([animation=none]) .smart-drop-down[top].smart-visibility-hidden, .smart-multi-split-button:not([animation=none]) .smart-drop-down[center-top].smart-visibility-hidden, .smart-multi-split-button:not([animation=none]) .smart-drop-down[top].smart-visibility-hidden, .smart-path:not([animation=none]) .smart-drop-down[center-top].smart-visibility-hidden, .smart-path:not([animation=none]) .smart-drop-down[top].smart-visibility-hidden, .smart-text-box:not([animation=none]) .smart-drop-down[center-top].smart-visibility-hidden, .smart-text-box:not([animation=none]) .smart-drop-down[top].smart-visibility-hidden { animation: smart-drop-down-list-smart-animate-closing .2s ease-in; -webkit-transform-origin: bottom; transform-origin: bottom } .smart-color-picker:not([animation=none]) .smart-drop-down[overlay-bottom], .smart-color-picker:not([animation=none]) .smart-drop-down[overlay-top], .smart-combo-box:not([animation=none]) .smart-drop-down[overlay-bottom], .smart-combo-box:not([animation=none]) .smart-drop-down[overlay-top], .smart-date-time-picker:not([animation=none]) .smart-drop-down[overlay-bottom], .smart-date-time-picker:not([animation=none]) .smart-drop-down[overlay-top], .smart-drop-down-button:not([animation=none]) .smart-drop-down[overlay-bottom], .smart-drop-down-button:not([animation=none]) .smart-drop-down[overlay-top], .smart-drop-down-list:not([animation=none]) .smart-drop-down[overlay-bottom], .smart-drop-down-list:not([animation=none]) .smart-drop-down[overlay-top], .smart-multi-split-button:not([animation=none]) .smart-drop-down[overlay-bottom], .smart-multi-split-button:not([animation=none]) .smart-drop-down[overlay-top], .smart-path:not([animation=none]) .smart-drop-down[overlay-bottom], .smart-path:not([animation=none]) .smart-drop-down[overlay-top], .smart-text-box:not([animation=none]) .smart-drop-down[overlay-bottom], .smart-text-box:not([animation=none]) .smart-drop-down[overlay-top] { animation: smart-drop-down-list-smart-animate-opening .2s ease-out; -webkit-transform-origin: center; transform-origin: center } .smart-color-picker:not([animation=none]) .smart-drop-down[overlay-bottom].smart-visibility-hidden, .smart-color-picker:not([animation=none]) .smart-drop-down[overlay-top].smart-visibility-hidden, .smart-combo-box:not([animation=none]) .smart-drop-down[overlay-bottom].smart-visibility-hidden, .smart-combo-box:not([animation=none]) .smart-drop-down[overlay-top].smart-visibility-hidden, .smart-date-time-picker:not([animation=none]) .smart-drop-down[overlay-bottom].smart-visibility-hidden, .smart-date-time-picker:not([animation=none]) .smart-drop-down[overlay-top].smart-visibility-hidden, .smart-drop-down-button:not([animation=none]) .smart-drop-down[overlay-bottom].smart-visibility-hidden, .smart-drop-down-button:not([animation=none]) .smart-drop-down[overlay-top].smart-visibility-hidden, .smart-drop-down-list:not([animation=none]) .smart-drop-down[overlay-bottom].smart-visibility-hidden, .smart-drop-down-list:not([animation=none]) .smart-drop-down[overlay-top].smart-visibility-hidden, .smart-multi-split-button:not([animation=none]) .smart-drop-down[overlay-bottom].smart-visibility-hidden, .smart-multi-split-button:not([animation=none]) .smart-drop-down[overlay-top].smart-visibility-hidden, .smart-path:not([animation=none]) .smart-drop-down[overlay-bottom].smart-visibility-hidden, .smart-path:not([animation=none]) .smart-drop-down[overlay-top].smart-visibility-hidden, .smart-text-box:not([animation=none]) .smart-drop-down[overlay-bottom].smart-visibility-hidden, .smart-text-box:not([animation=none]) .smart-drop-down[overlay-top].smart-visibility-hidden { animation: smart-drop-down-list-smart-animate-closing .2s ease-in; -webkit-transform-origin: center; transform-origin: center } .smart-color-picker:not([animation=none]) .smart-drop-down[overlay-center], .smart-combo-box:not([animation=none]) .smart-drop-down[overlay-center], .smart-date-time-picker:not([animation=none]) .smart-drop-down[overlay-center], .smart-drop-down-button:not([animation=none]) .smart-drop-down[overlay-center], .smart-drop-down-list:not([animation=none]) .smart-drop-down[overlay-center], .smart-multi-split-button:not([animation=none]) .smart-drop-down[overlay-center], .smart-path:not([animation=none]) .smart-drop-down[overlay-center], .smart-text-box:not([animation=none]) .smart-drop-down[overlay-center] { animation: smart-drop-down-list-smart-animate-overlay-center-opening .2s ease-out; -webkit-transform-origin: top; transform-origin: top } .smart-color-picker:not([animation=none]) .smart-drop-down[overlay-center].smart-visibility-hidden, .smart-combo-box:not([animation=none]) .smart-drop-down[overlay-center].smart-visibility-hidden, .smart-date-time-picker:not([animation=none]) .smart-drop-down[overlay-center].smart-visibility-hidden, .smart-drop-down-button:not([animation=none]) .smart-drop-down[overlay-center].smart-visibility-hidden, .smart-drop-down-list:not([animation=none]) .smart-drop-down[overlay-center].smart-visibility-hidden, .smart-multi-split-button:not([animation=none]) .smart-drop-down[overlay-center].smart-visibility-hidden, .smart-path:not([animation=none]) .smart-drop-down[overlay-center].smart-visibility-hidden, .smart-text-box:not([animation=none]) .smart-drop-down[overlay-center].smart-visibility-hidden { animation: smart-drop-down-list-smart-animate-overlay-center-closing .2s ease-in; -webkit-transform-origin: top; transform-origin: top } .smart-drop-down-button .smart-drop-down, .smart-drop-down-list .smart-drop-down, .smart-multi-split-button .smart-drop-down, .smart-text-box .smart-drop-down { height: calc(var(--smart-scroll-bar-size)) } .smart-drop-down-button .smart-drop-down smart-scroll-bar:before, .smart-drop-down-list .smart-drop-down smart-scroll-bar:before, .smart-multi-split-button .smart-drop-down smart-scroll-bar:before, .smart-text-box .smart-drop-down smart-scroll-bar:before { display: none; background-color: var(--smart-border) } .smart-drop-down-button .smart-drop-down smart-scroll-bar[orientation=vertical].bottom-corner, .smart-drop-down-list .smart-drop-down smart-scroll-bar[orientation=vertical].bottom-corner, .smart-multi-split-button .smart-drop-down smart-scroll-bar[orientation=vertical].bottom-corner, .smart-text-box .smart-drop-down smart-scroll-bar[orientation=vertical].bottom-corner { width: calc(var(--smart-scroll-bar-size)); height: calc(100% - var(--smart-scroll-bar-size)) } .smart-drop-down-button .smart-drop-down .smart-list-items-container.vscroll, .smart-drop-down-button .smart-drop-down smart-scroll-bar.bottom-corner, .smart-drop-down-list .smart-drop-down .smart-list-items-container.vscroll, .smart-drop-down-list .smart-drop-down smart-scroll-bar.bottom-corner, .smart-multi-split-button .smart-drop-down .smart-list-items-container.vscroll, .smart-multi-split-button .smart-drop-down smart-scroll-bar.bottom-corner, .smart-text-box .smart-drop-down .smart-list-items-container.vscroll, .smart-text-box .smart-drop-down smart-scroll-bar.bottom-corner { width: calc(100% - var(--smart-scroll-bar-size)) } .smart-drop-down-button .smart-drop-down input:focus, .smart-drop-down-list .smart-drop-down input:focus, .smart-multi-split-button .smart-drop-down input:focus, .smart-text-box .smart-drop-down input:focus { outline: 0 } .smart-drop-down-button.auto-height .smart-action-button, .smart-drop-down-list.auto-height .smart-action-button, .smart-multi-split-button.auto-height .smart-action-button { white-space: initial; text-overflow: initial; line-height: 1rem; flex-wrap: wrap } .smart-drop-down-button.auto-height[selection-display-mode=tokens] .smart-action-button>span:first-of-type, .smart-drop-down-button.auto-height[selection-display-mode=tokens] smart-action-button>span, .smart-drop-down-list.auto-height[selection-display-mode=tokens] .smart-action-button>span:first-of-type, .smart-drop-down-list.auto-height[selection-display-mode=tokens] smart-action-button>span, .smart-multi-split-button.auto-height[selection-display-mode=tokens] .smart-action-button>span:first-of-type, .smart-multi-split-button.auto-height[selection-display-mode=tokens] smart-action-button>span { display: inline-block; margin: .2em } .smart-color-picker .smart-drop-down smart-scroll-bar:before, .smart-combo-box .smart-drop-down smart-scroll-bar:before, .smart-list-box smart-scroll-bar:before, .smart-scroll-viewer smart-scroll-bar:before { display: none; background-color: var(--smart-border) } .smart-color-picker .smart-drop-down { width: var(--smart-drop-down-button-drop-down-width); height: var(--smart-drop-down-button-drop-down-height) } .smart-color-picker .smart-drop-down.smart-drop-down-color-picker { max-height: calc(var(--smart-editor-drop-down-max-height) + 50px) } .smart-color-picker .smart-drop-down smart-scroll-bar[orientation=vertical].bottom-corner { width: calc(var(--smart-scroll-bar-size)); height: calc(100% - var(--smart-scroll-bar-size)) } .smart-color-picker .smart-drop-down .smart-list-items-container.vscroll { width: calc(100% - var(--smart-scroll-bar-size)) } .smart-drop-down-list .smart-drop-down { width: var(--smart-drop-down-list-drop-down-width); height: var(--smart-drop-down-list-drop-down-height) } .smart-combo-box .smart-drop-down { width: var(--smart-combo-box-drop-down-width); height: var(--smart-combo-box-drop-down-height) } .smart-combo-box .smart-drop-down smart-scroll-bar[orientation=vertical].bottom-corner { width: calc(var(--smart-scroll-bar-size)); height: calc(100% - var(--smart-scroll-bar-size)) } .smart-combo-box .smart-drop-down .smart-list-items-container.vscroll, .smart-combo-box .smart-drop-down smart-scroll-bar.bottom-corner { width: calc(100% - var(--smart-scroll-bar-size)) } .smart-combo-box .smart-selection-field input { outline: 0 } .smart-drop-down-button .smart-drop-down { width: var(--smart-drop-down-button-drop-down-width); height: var(--smart-drop-down-button-drop-down-height) } .smart-date-time-picker .smart-drop-down { border: none } .smart-drop-down-overlay { position: absolute; top: 0; left: 0; z-index: 9000 } .smart-list-box input.vscroll { outline: 0 } .smart-list-box smart-scroll-bar[orientation=vertical].bottom-corner { width: calc(var(--smart-scroll-bar-size)); height: calc(100% - var(--smart-scroll-bar-size)) } .smart-list-box .smart-list-items-container.vscroll, .smart-list-box smart-scroll-bar.bottom-corner { width: calc(100% - var(--smart-scroll-bar-size)) } .smart-scroll-viewer { max-width: 100%; border: 0 } .smart-drop-down-box[right-to-left]:not([drop-down-button-position]) .smart-action-button, .smart-drop-down-box[right-to-left]:not([drop-down-button-position]) .smart-drop-down-button, .smart-drop-down-box[right-to-left]:not([drop-down-button-position]) .smart-drop-down-button[focus], .smart-drop-down-box[right-to-left]:not([hover]) .smart-action-button[focus] { border-top-color: transparent; border-left-color: transparent; border-right-color: transparent } .smart-scroll-viewer smart-scroll-bar[orientation=vertical].bottom-corner { width: calc(var(--smart-scroll-bar-size)); height: calc(100% - var(--smart-scroll-bar-size)) } .smart-scroll-viewer .smart-list-items-container.vscroll, .smart-scroll-viewer smart-scroll-bar.bottom-corner { width: calc(100% - var(--smart-scroll-bar-size)) } @keyframes smart-drop-down-list-smart-animate-overlay-center-opening { 0% { opacity: .2; transform: scaleY(0) translateY(-50%) } 50% { opacity: .4 } 100% { opacity: 1; transform: scaleY(1) translateY(-50%) } } @keyframes smart-drop-down-list-smart-animate-overlay-center-closing { 0% { opacity: 1; transform: scaleY(1) translateY(-50%) } 50% { opacity: .4 } 100% { opacity: .2; transform: scaleY(0) translateY(-50%) } } @keyframes smart-drop-down-list-smart-animate-opening { 0% { opacity: .2; transform: scaleY(0) } 50% { opacity: .4 } 100% { opacity: 1; transform: scaleY(1) } } @keyframes smart-drop-down-list-smart-animate-closing { 0% { opacity: 1; transform: scaleY(1); pointer-events: none } 50% { opacity: .4; pointer-events: none } 100% { opacity: .2; transform: scaleY(0); pointer-events: none } } .smart-drop-down-box[right-to-left]:not([hover]) .smart-action-button[focus] { border-bottom-left-radius: 0 } .smart-drop-down-box[right-to-left]:not([drop-down-button-position]) .smart-action-button { border-bottom-left-radius: 0; border-bottom-right-radius: 0 } .smart-drop-down-box[right-to-left]:not([drop-down-button-position]):not([opened]):not([hover]) .smart-drop-down-button:not([hover]), .smart-drop-down-box[right-to-left]:not([drop-down-button-position]):not([opened]):not([hover]) .smart-drop-down-button[focus]:not([hover]) { border-bottom-left-radius: 0 } .smart-editor .smart-editor-content-container .smart-editor-editable, .smart-editor .smart-editor-content-container textarea { width: 100%; height: 100%; outline: 0; padding: var(--smart-editor-padding); background: 0 0 } .smart-editor-toolbar-item[item-type=button], .smart-editor-toolbar-item[item-type=toggle], .smart-editor-toolbar-item[item-type=drop-down], .smart-editor-toolbar-item[item-type=color-input], .smart-editor-toolbar-item[item-type=delimiter] { position: relative; height: var(--smart-editor-toolbar-item-height); outline: 0 } .smart-editor-toolbar-item:not([item-type=drop-down])::before, .smart-editor-toolbar-item[item-name=clearformat]::after, .smart-editor-toolbar-item[item-name=alignment]::before, .smart-editor-toolbar-item[item-type=drop-down]:after, .smart-editor-toolbar-item[item-type=color-input] .smart-editor-item-drop-down-button::before, .smart-editor-toolbar-item[item-type=delimiter]::before { font-size: var(--smart-font-size); font-family: var(--smart-font-family-icon); display: flex; align-items: center; justify-content: center; width: 100%; min-width: var(--smart-editor-addon-width); height: 100%; box-sizing: border-box; pointer-events: none } .smart-editor-toolbar-item[item-type=drop-down]:after, .smart-editor-toolbar-item[item-type=color-input] .smart-editor-item-drop-down-button::before { content: var(--smart-icon-arrow-down); width: var(--smart-editor-addon-width); min-width: var(--smart-editor-addon-width) } .smart-editor-toolbar-item[item-type=drop-down]:before { font-size: var(--smart-font-size); font-family: var(--smart-font-family-icon); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; content: attr(item-value); width: calc(100% - 30px); padding: var(--smart-editor-label-padding); padding-top: initial; padding-right: initial; padding-bottom: initial; text-align: center } [disabled].smart-editor-toolbar-item { -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; user-select: none; opacity: .55; cursor: default; pointer-events: none } .smart-editor { display: block; width: var(--smart-editor-default-width); height: var(--smart-editor-default-height); min-height: var(--smart-editor-input-min-height); border: var(--smart-border-width) solid var(--smart-border); border-radius: var(--smart-border-radius); contain: content } .smart-editor.smart-editor-iframe-body { margin: initial; border: initial; min-height: initial; border-radius: initial; width: 100%; height: 100% } .smart-editor .smart-editor-toolbar-items-primary .smart-editor-toolbar-item, .smart-editor[toolbar-mode=singleLineRibbon] .smart-editor-toolbar-items-secondary .smart-editor-toolbar-item { margin-bottom: var(--smart-editor-toolbar-item-margin) } .smart-editor.smart-editor-iframe-body table { font-size: var(--smart-font-size); font-weight: var(--smart-font-weight) } .smart-editor.smart-editor-iframe-body * { box-sizing: border-box } .smart-editor>.smart-container { display: grid; grid-template-columns: 100%; grid-template-rows: auto minmax(0, 1fr); position: relative; min-height: inherit } .smart-editor .smart-toast-container.smart-toast-container-custom { position: absolute; top: 0; right: 0; height: auto; max-height: 100% } .smart-editor.full-screen-mode { min-width: 100%; max-width: 100%; min-height: 100%; max-height: 100%; position: fixed !important; left: 0 !important; right: 0 !important; top: 0 !important; z-index: calc(var(--smart-editor-drop-down-z-index) - 1) } .smart-editor[readonly] .smart-editor-toolbar-items-primary, .smart-editor[readonly] .smart-editor-toolbar-items-secondary { pointer-events: none } .smart-editor[toolbar-mode=singleLineRibbon] .smart-editor-toolbar[toolbar-tab-selected]:not([expanded]) .smart-editor-toolbar-toggle-button::before { content: var(--smart-icon-window-pin) } .smart-editor[toolbar-mode=singleLineRibbon] .smart-editor-toolbar-tab-selection-bar { position: absolute; bottom: 0; height: calc(2* var(--smart-border-width)); background-color: var(--smart-primary); transform: scaleX(1) } .smart-editor[toolbar-mode=singleLineRibbon] .smart-editor-toolbar-tab-selection-bar.smart-visibility-hidden { transform: scaleX(0) } .smart-editor[toolbar-mode=singleLineRibbon] .smart-editor-toolbar-items-primary { position: relative } .smart-editor[toolbar-mode=singleLineRibbon] .smart-editor-toolbar[expanded] .smart-editor-toolbar-items-primary, .smart-editor[toolbar-mode=singleLineRibbon] .smart-editor-toolbar[expanded] .smart-editor-toolbar-toggle-button { border-bottom: var(--smart-border-width) solid var(--smart-border) } .smart-editor[toolbar-mode=singleLineRibbon] .smart-editor-toolbar:not(.smart-tooltip) .smart-editor-toolbar-items-secondary .smart-editor-toolbar-item { margin-left: initial } .smart-editor[toolbar-mode=singleLineRibbon] .smart-editor-toolbar-items-secondary { background-color: var(--smart-background); padding-bottom: initial; flex-wrap: initial } .smart-editor[toolbar-mode=singleLineRibbon] .smart-editor-toolbar-items-secondary.smart-drop-down { border-bottom: var(--smart-border-width) solid var(--smart-border); box-shadow: var(--smart-elevation-4); overflow: hidden } .smart-editor[toolbar-mode=singleLineRibbon] .smart-editor-toolbar-items-secondary .smart-editor-toolbar-item:not(:last-of-type) { margin-right: var(--smart-editor-toolbar-item-margin) } .smart-editor[toolbar-mode=singleLineRibbon] .smart-editor-toolbar-tab { -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; user-select: none; padding: var(--smart-tab-item-padding) } .smart-editor[toolbar-mode=singleLineRibbon] .smart-editor-toolbar-tab:not([disabled]) { cursor: pointer } .smart-editor[toolbar-mode=singleLineRibbon] .smart-editor-toolbar .smart-editor-toolbar-tab-group { padding-top: initial } .smart-editor[toolbar-mode=singleLineRibbon] .smart-editor-toolbar-tab-group { position: relative; display: flex; align-items: center; flex-wrap: wrap; height: 100%; padding: var(--smart-editor-toolbar-item-margin); padding-bottom: initial } .smart-editor[hide-toolbar] .smart-editor-toolbar:not(.smart-tooltip), .smart-editor[toolbar-view-mode=multiRow] .smart-editor-toolbar .smart-editor-toolbar-toggle-button, .smart-editor[toolbar-view-mode=scroll] .smart-editor-toolbar .smart-editor-toolbar-toggle-button { display: none } .smart-editor[toolbar-mode=singleLineRibbon] .smart-editor-toolbar-tab-group:not(:first-of-type) { border-left: var(--smart-border-width) solid var(--smart-border) } .smart-editor[toolbar-view-mode=multiRow] .smart-editor-toolbar, .smart-editor[toolbar-view-mode=scroll] .smart-editor-toolbar { grid-template-areas: 'primary primary' 'secondary secondary ' } .smart-editor[toolbar-view-mode=multiRow] .smart-editor-toolbar-items-primary, .smart-editor[toolbar-view-mode=scroll] .smart-editor-toolbar-items-primary { padding: 0 5px 5px 0 } .smart-editor[toolbar-view-mode=multiRow] .smart-editor-toolbar-items-primary .smart-editor-toolbar-item, .smart-editor[toolbar-view-mode=scroll] .smart-editor-toolbar-items-primary .smart-editor-toolbar-item { margin-bottom: initial } .smart-editor[toolbar-view-mode=multiRow]>.smart-container { grid-template-rows: auto minmax(0, 1fr) } .smart-editor[toolbar-view-mode=multiRow] .smart-editor-toolbar .smart-editor-toolbar-items-primary { height: auto } .smart-editor[toolbar-view-mode=scroll]>.smart-container { grid-template-rows: auto minmax(0, 1fr) } .smart-editor[toolbar-view-mode=scroll] .smart-editor-toolbar-items-primary { overflow-y: auto } .smart-editor:not([animation=none]) .smart-editor-toolbar-tab-selection-bar { transition: width .2s cubic-bezier(.35, 0, .25, 1), left .2s cubic-bezier(.35, 0, .25, 1), visibility .2s cubic-bezier(.35, 0, .25, 1), transform .2s cubic-bezier(.35, 0, .25, 1) } .smart-editor:not([animation=none]) .smart-editor-search-bar, .smart-editor:not([animation=none])[toolbar-mode=singleLineRibbon] .smart-editor-toolbar-items-secondary { animation: smart-drop-down-list-smart-animate-opening .2s ease-out; transition: animation .2s ease-out, opacity .2s ease-out, visibility .2s ease-out; -webkit-transform-origin: top; transform-origin: top } .smart-editor:not([animation=none]) .smart-editor-search-bar.smart-visibility-hidden, .smart-editor:not([animation=none])[toolbar-mode=singleLineRibbon] .smart-editor-toolbar-items-secondary.smart-visibility-hidden { animation: smart-drop-down-list-smart-animate-closing .2s ease-in; transition: animation .2s ease-in, opacity .2s ease-in, visibility .2s ease-in } .smart-editor:not([animation=none]) .smart-editor-content-container, .smart-editor:not([animation=none]) .smart-editor-toolbar:not(.smart-tooltip) { transition: height .2s ease-in-out } .smart-editor:not([animation=none]) .smart-editor-toolbar-item, .smart-editor:not([animation=none]) .smart-editor-toolbar-toggle-button { transition: background-color 0s linear, border-color 0s ease-in-out, color 0s linear, box-shadow .2s ease-in-out } .smart-editor:not([animation=none]) .smart-editor-toolbar-toggle-button::before { transition: transform .2s ease-in-out } .smart-editor.preview-mode .smart-editor-toolbar-item:not([item-name=print]):not([item-name=sourcecode]):not([item-name=fullscreen]):not([item-name=splitmode]), .smart-editor[edit-mode=markdown] .smart-editor-toolbar-item[item-name=indent], .smart-editor[edit-mode=markdown] .smart-editor-toolbar-item[item-name=outdent], .smart-editor[edit-mode=markdown] .smart-editor-toolbar-item[item-name=lowercase], .smart-editor[edit-mode=markdown] .smart-editor-toolbar-item[item-name=uppercase], .smart-editor[edit-mode=markdown] .smart-editor-toolbar-item[item-name=removelink], .smart-editor[edit-mode=markdown] .smart-editor-toolbar-item[item-name=alignment] { -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; user-select: none; opacity: .55; cursor: default; pointer-events: none } .smart-editor[hide-toolbar]>.smart-container { grid-template-rows: minmax(auto, 1fr) } .smart-editor .smart-editor-toolbar:not(.smart-tooltip) { width: 100%; height: 100%; border-bottom: var(--smart-border-width) solid var(--smart-border); background: var(--smart-surface); display: grid; grid-template-areas: 'primary toggleButton' 'secondary secondary '; grid-template-columns: minmax(0, 1fr) auto; overflow: hidden; position: relative } .smart-editor .smart-editor-toolbar:not(.smart-tooltip)[expanded] .smart-editor-toolbar-toggle-button::before { transform: rotate(180deg) } .smart-editor .smart-editor-toolbar:not(.smart-tooltip) .smart-editor-toolbar-item { margin-left: var(--smart-editor-toolbar-item-margin); margin-top: var(--smart-editor-toolbar-item-margin) } .smart-editor[toolbar-sticky] .smart-editor-toolbar { position: sticky; top: 0; z-index: calc(var(--smart-editor-drop-down-z-index) - 1) } .smart-editor[edit-mode=markdown] .smart-editor-toolbar-item[item-name=sourcecode]::before { content: var(--smart-icon-visibility) } .smart-editor .smart-editor-toolbar-toggle-button { grid-area: toggleButton; width: var(--smart-editor-toolbar-button-width); height: var(--smart-editor-toolbar-height); position: relative; cursor: pointer } .smart-editor .smart-editor-toolbar-toggle-button::before { font-size: var(--smart-font-size); font-family: var(--smart-font-family-icon); display: flex; align-items: center; justify-content: center; height: 100%; box-sizing: border-box; pointer-events: none; content: var(--smart-icon-arrow-down); width: var(--smart-editor-addon-width); min-width: var(--smart-editor-addon-width) } .smart-editor .smart-editor-toolbar-items-primary { grid-area: primary; height: var(--smart-editor-toolbar-height); overflow: hidden } .smart-editor .smart-editor-toolbar-items-secondary { grid-area: secondary; padding-bottom: var(--smart-editor-toolbar-item-margin) } .smart-editor .smart-editor-toolbar-items-secondary:empty { display: none } .smart-editor .smart-editor-toolbar-items-primary, .smart-editor .smart-editor-toolbar-items-secondary { width: 100%; display: flex; align-items: center; flex-wrap: wrap } .smart-editor iframe { width: 100%; height: 100%; min-height: var(--smart-editor-input-min-height); border: initial } .smart-editor .smart-editor-content-container { display: grid; width: 100%; height: 100%; position: relative; overflow: hidden; outline: 0; background: 0 0 } .smart-editor .smart-editor-content-container[split-mode] { display: grid; grid-template-columns: minmax(0, 1fr) var(--smart-border-width) minmax(0, 1fr); grid-template-rows: 100%; grid-column-gap: 2px } .smart-editor .smart-editor-content-container[split-mode] .smart-editor-editable { order: 1 } .smart-editor .smart-editor-content-container[split-mode]::before { content: ''; width: 100%; height: 100%; background-color: var(--smart-border); order: 2 } .smart-editor .smart-editor-content-container[split-mode] textarea, .smart-editor[edit-mode=markdown] .smart-editor-content-container[split-mode] .smart-editor-editable { order: 3 } .smart-editor .smart-editor-content-container textarea { resize: none; outline: 0; border: initial; min-height: var(--smart-editor-input-min-height); font-size: inherit; font-family: inherit; color: inherit } .smart-editor .smart-editor-content-container .smart-editor-editable { min-height: var(--smart-editor-input-min-height); overflow: auto } .smart-editor .smart-editor-content-container .smart-editor-editable[show-placeholder]::before { content: attr(placeholder); width: 100%; height: 100%; position: absolute; pointer-events: none; color: var(--smart-disabled-color); opacity: .9; font-family: inherit; font-size: inherit } .smart-editor .smart-editor-content-container .smart-editor-editable p:first-child { margin-top: 0 } .smart-editor .smart-editor-content-container .smart-editor-editable p:last-child { margin-bottom: 0 } .smart-editor .smart-editor-content-container .smart-editor-editable a { display: inline-block } .smart-editor .smart-editor-content-container .smart-editor-editable [alignment=left] { text-align: left } .smart-editor .smart-editor-content-container .smart-editor-editable [alignment=center] { text-align: center } .smart-editor .smart-editor-content-container .smart-editor-editable [alignment=right] { text-align: right } .smart-editor .smart-editor-content-container .smart-editor-editable [alignment=justify] { text-align: justify } .smart-editor .smart-editor-content-container .smart-editor-editable[table-cell-resize=horizontal] { cursor: col-resize } .smart-editor .smart-editor-content-container .smart-editor-editable[table-cell-resize=horizontal] table { overflow: hidden } .smart-editor .smart-editor-content-container .smart-editor-editable[table-cell-resize=horizontal] td[resizing], .smart-editor .smart-editor-content-container .smart-editor-editable[table-cell-resize=horizontal] th[resizing] { position: relative } .smart-editor .smart-editor-content-container .smart-editor-editable[table-cell-resize=horizontal] td[resizing]::after, .smart-editor .smart-editor-content-container .smart-editor-editable[table-cell-resize=horizontal] th[resizing]::after { content: ''; position: absolute; right: 0; display: flex; width: var(--smart-border-width); height: 100%; transform: scaleY(100); background-color: var(--smart-primary) } .smart-editor .smart-editor-content-container .smart-editor-editable[table-cell-resize=vertical] { cursor: row-resize } .smart-editor .smart-editor-content-container .smart-editor-editable[table-cell-resize=vertical] tr[resizing]>td, .smart-editor .smart-editor-content-container .smart-editor-editable[table-cell-resize=vertical] tr[resizing]>th { border-bottom-color: var(--smart-primary) } .smart-editor .smart-editor-content-container .smart-editor-editable[contenteditable=true] img { cursor: pointer } .smart-editor .smart-editor-content-container .smart-editor-editable font:empty { min-width: 1px; min-height: 1px; display: inline-block } .smart-editor .smart-editor-content-container .smart-editor-editable font:empty::before { content: 'a'; opacity: 0 } .smart-editor .smart-editor-content-container .smart-editor-editable pre { padding: 10px; background: var(--smart-surface) } .smart-editor .smart-editor-content-container .smart-editor-editable blockquote { border-left: calc(2 * var(--smart-border-width)) solid var(--smart-border); padding: 20px 10px } .smart-editor .smart-editor-content-container .smart-editor-editable .find-and-replace-match { background-color: var(--smart-editor-highlight); opacity: .75; color: var(--smart-editor-highlight-color) } .smart-editor .smart-editor-content-container .smart-editor-editable .find-and-replace-match.selected { background-color: var(--smart-editor-highlight); opacity: 1 } .smart-editor .smart-editor-content-container .smart-editor-video-container iframe, .smart-editor .smart-editor-content-container .smart-editor-video-container video, .smart-editor .smart-editor-content-container img { float: initial; vertical-align: initial; margin: auto; min-width: 10px; min-height: 10px } .smart-editor .smart-editor-content-container .smart-editor-video-container iframe:not([display=block])[alignment=left], .smart-editor .smart-editor-content-container .smart-editor-video-container video:not([display=block])[alignment=left], .smart-editor .smart-editor-content-container img:not([display=block])[alignment=left], .smart-editor .smart-editor-image-container:not([display=block])[alignment=left] { float: left } .smart-editor .smart-editor-content-container .smart-editor-video-container iframe[display=block], .smart-editor .smart-editor-content-container .smart-editor-video-container video[display=block], .smart-editor .smart-editor-content-container img[display=block] { display: block } .smart-editor .smart-editor-content-container .smart-editor-video-container iframe[display=block][alignment=left], .smart-editor .smart-editor-content-container .smart-editor-video-container video[display=block][alignment=left], .smart-editor .smart-editor-content-container img[display=block][alignment=left] { margin-left: 0 } .smart-editor .smart-editor-content-container .smart-editor-video-container iframe[display=block][alignment=right], .smart-editor .smart-editor-content-container .smart-editor-video-container video[display=block][alignment=right], .smart-editor .smart-editor-content-container img[display=block][alignment=right] { margin-right: 0 } .smart-editor .smart-editor-content-container .smart-editor-video-container iframe[show-resize-frame], .smart-editor .smart-editor-content-container .smart-editor-video-container video[show-resize-frame], .smart-editor .smart-editor-content-container img[show-resize-frame] { box-shadow: 0 0 0 var(--smart-border-width) var(--smart-primary) } .smart-editor .smart-editor-content-container .smart-editor-video-container iframe:not([display=block])[alignment=right], .smart-editor .smart-editor-content-container .smart-editor-video-container video:not([display=block])[alignment=right], .smart-editor .smart-editor-content-container img:not([display=block])[alignment=right] { float: right } .smart-editor .smart-editor-content-container .smart-editor-search-bar { position: absolute; top: var(--smart-editor-search-bar-offset); right: var(--smart-editor-search-bar-offset); padding: var(--smart-editor-search-bar-padding); display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, auto); grid-column-gap: 5px; border: var(--smart-border-width) solid var(--smart-border); box-shadow: var(--smart-elevation-4); background: var(--smart-background); border-top-left-radius: var(--smart-border-top-left-radius); border-top-right-radius: var(--smart-border-top-right-radius); border-bottom-left-radius: var(--smart-border-bottom-left-radius); border-bottom-right-radius: var(--smart-border-bottom-right-radius) } .smart-editor .smart-editor-content-container .smart-editor-search-bar .smart-search-input-container { width: var(--smart-text-box-default-width); display: flex; align-items: center } .smart-editor .smart-editor-content-container .smart-editor-search-bar .smart-search-input-container::after { content: attr(selected) "/" attr(matches); margin: 0 var(--smart-editor-search-bar-offset) } .smart-editor .smart-editor-content-container .smart-editor-search-bar .smart-search-input { height: 100%; outline: 0; border: initial; padding: var(--smart-editor-label-padding) } .smart-editor .smart-editor-content-container .smart-editor-search-bar .smart-search-input:focus { border-color: var(--smart-outline) } .smart-editor .smart-editor-content-container .smart-editor-search-bar .smart-search-button { --smart-button-padding: 0; border: initial; height: var(--smart-editor-toolbar-button-width); width: var(--smart-editor-toolbar-button-width) } .smart-editor .smart-editor-content-container .smart-editor-search-bar .smart-search-button button::after { font-size: var(--smart-font-size); font-family: var(--smart-font-family-icon); display: flex; align-items: center; justify-content: center; box-sizing: border-box; pointer-events: none } .smart-editor .smart-editor-content-container .smart-editor-search-bar .smart-search-button.prev button::after { content: var(--smart-icon-arrow-up) } .smart-editor .smart-editor-content-container .smart-editor-search-bar .smart-search-button.next button::after { content: var(--smart-icon-arrow-down) } .smart-editor .smart-editor-content-container .smart-editor-search-bar .smart-search-button.close button::after { content: var(--smart-icon-close) } .smart-editor[show-char-count] .smart-editor-content-container::after { content: attr(char-count); position: absolute; display: flex; justify-content: flex-end; bottom: var(--smart-editor-char-counter-offset); right: var(--smart-editor-char-counter-offset); box-sizing: border-box; background: var(--smart-background); border-radius: var(--smart-border-radius); background-clip: content-box; -webkit-background-clip: content-box; font-family: inherit; font-size: inherit; pointer-events: none; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; user-select: none } .smart-editor[show-char-count] .smart-editor-content-container.char-count-error::after { color: var(--smart-error) } .smart-editor[show-char-count] .smart-editor-content-container.char-count-warning::after { color: var(--smart-warning) } .smart-editor[edit-mode=markdown] .smart-editor-content-container[split-mode] textarea { order: 1 } .smart-editor .smart-editor-resize-frame { -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; user-select: none; position: absolute } .smart-editor .smart-editor-resize-frame span { cursor: pointer; position: absolute; width: 10px; height: 10px; background: var(--smart-primary); transform: translate(-50%, -50%) } .smart-editor .smart-editor-resize-frame span[position=top-left], .smart-editor .smart-editor-resize-frame span[position=bottom-right] { cursor: se-resize } .smart-editor .smart-editor-resize-frame span[position=top-right], .smart-editor .smart-editor-resize-frame span[position=bottom-left] { cursor: sw-resize } .smart-editor .smart-editor-resize-frame span[position=top-center], .smart-editor .smart-editor-resize-frame span[position=bottom-center] { cursor: ns-resize } .smart-editor .smart-editor-resize-frame span[position=left-center], .smart-editor .smart-editor-resize-frame span[position=right-center] { cursor: ew-resize } .smart-editor .smart-editor-image-container { display: inline-block } .smart-editor .smart-editor-image-container.smart-editor-video-container { position: relative } .smart-editor .smart-editor-image-container.smart-editor-video-container .smart-editor-video-white-space { position: absolute; opacity: 0 } .smart-editor .smart-editor-image-container.smart-editor-video-container[dragged]::before { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0 } .smart-editor .smart-editor-image-container.smart-editor-video-container iframe, .smart-editor .smart-editor-image-container.smart-editor-video-container video { width: 100%; height: 100% } .smart-editor .smart-editor-image-container.smart-editor-video-container>br[class] { display: none } .smart-editor .smart-editor-image-container.smart-editor-video-container::after { content: var(--smart-icon-menu); position: absolute; font-family: var(--smart-font-family-icon); font-size: var(--smart-font-size); width: var(--smart-editor-toolbar-item-height); height: var(--smart-editor-toolbar-item-height); top: 0; left: calc(50% - var(--smart-editor-toolbar-item-height)/ 2); background: var(--smart-background); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; visibility: hidden; transform-origin: top; transform: scale(0) translateY(-100%); transition: transform .2s ease-in-out, visibility .2s ease-in-out } .smart-editor .smart-editor-image-container.smart-editor-video-container:hover::after { visibility: visible; transform: scale(1) translateY(25%) } .smart-editor .smart-editor-image-container[display=block] { display: block } .smart-editor .smart-editor-image-container[display=block][alignment=left] img { margin-left: 0 } .smart-editor .smart-editor-image-container[display=block][alignment=left] .smart-editor-image-caption { text-align: left } .smart-editor .smart-editor-image-container[display=block][alignment=right] img { margin-right: 0 } .smart-editor .smart-editor-image-container[display=block][alignment=right] .smart-editor-image-caption { text-align: right } .smart-editor .smart-editor-image-container:not([display=block])[alignment=right] { float: right } .smart-editor .smart-editor-image-container .smart-editor-image-caption { display: block; text-align: center; outline: 0 } .smart-editor table { width: 100%; border-collapse: collapse; empty-cells: show; border-spacing: 0; table-layout: fixed } .smart-editor table td, .smart-editor table th { border: var(--smart-border-width) solid var(--smart-border); width: var(--smart-editor-table-column-width); min-height: var(--smart-editor-table-cell-min-height); min-width: var(--smart-editor-table-cell-min-width); padding: 2px 5px; vertical-align: middle } .smart-editor table img { max-width: 100% } .smart-editor table table { width: 100% } .smart-editor table th { background: var(--smart-surface) } .smart-editor table td:empty::before, .smart-editor table th:empty::before { content: 'A'; visibility: hidden } .smart-editor table[dashed-borders] td, .smart-editor table[dashed-borders] th { border-style: dashed } .smart-editor table[alternation] tr:nth-child(2n) { background-color: var(--smart-alternation-index0-background) } .smart-editor table [selected] { box-shadow: 0 0 0 var(--smart-border-width) var(--smart-primary) inset } .smart-editor[focus] .smart-editor-toolbar-item[item-type=button][checked] { color: var(--smart-ui-state-color-active); border-color: var(--smart-ui-state-border-active); background-color: var(--smart-ui-state-active) } .smart-editor-toolbar-item { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; position: relative; border-radius: var(--smart-editor-toolbar-item-border-radius); cursor: pointer } .smart-editor-toolbar-item:not([item-type=custom]):hover { color: var(--smart-ui-state-color-hover); border-color: var(--smart-ui-state-border-hover); background-color: var(--smart-ui-state-hover); box-shadow: var(--smart-elevation-1) } .smart-editor-toolbar-item:not([item-type=custom]):not([item-type=color-input]):not([disabled]):active, .smart-editor-toolbar-item[item-type=toggle][checked] { color: var(--smart-ui-state-color-active); border-color: var(--smart-ui-state-border-active); background-color: var(--smart-ui-state-active) } .smart-editor-toolbar-item[item-name=bold]::before { content: var(--smart-icon-bold) } .smart-editor-toolbar-item[item-name=italic]::before { content: var(--smart-icon-italic) } .smart-editor-toolbar-item[item-name=underline]::before { content: var(--smart-icon-underline) } .smart-editor-toolbar-item[item-name=strikethrough]::before { content: var(--smart-icon-strike-through) } .smart-editor-toolbar-item[item-name=caption]::before { content: var(--smart-icon-format-clear); font-weight: 600 } .smart-editor-toolbar-item[item-name=orderedlist]::before { content: var(--smart-icon-list-ordered) } .smart-editor-toolbar-item[item-name=unorderedlist]::before { content: var(--smart-icon-list-unordered) } .smart-editor-toolbar-item[item-name=subscript]::before { content: var(--smart-icon-subscript) } .smart-editor-toolbar-item[item-name=superscript]::before { content: var(--smart-icon-superscript) } .smart-editor-toolbar-item .smart-editor-item-action-button[item-name=backgroundcolor]::before { content: var(--smart-icon-color-background) } .smart-editor-toolbar-item .smart-editor-item-action-button[item-name=fontcolor]::before { content: var(--smart-icon-font) } .smart-editor-toolbar-item[item-name=delete]::before { content: var(--smart-icon-delete) } .smart-editor-toolbar-item[item-name=redo]::before, .smart-editor-toolbar-item[item-name=undo]::before { content: var(--smart-icon-reload) } .smart-editor-toolbar-item[item-name=indent]::before { content: var(--smart-icon-indent-left) } .smart-editor-toolbar-item[item-name=outdent]::before { content: var(--smart-icon-indent-right) } .smart-editor-toolbar-item[item-name=createlink]::before { content: var(--smart-icon-link) } .smart-editor-toolbar-item[item-name=removelink]::before { content: var(--smart-icon-unlink) } .smart-editor-toolbar-item[item-name=hyperlink]::before { content: var(--smart-icon-link) } .smart-editor-toolbar-item[item-name=openlink]::before { content: var(--smart-icon-link-ext) } .smart-editor-toolbar-item[item-name=editlink]::before { content: var(--smart-icon-mode-edit) } .smart-editor-toolbar-item[item-name=image]::before { content: var(--smart-icon-image) } .smart-editor-toolbar-item[item-name=table]::before { content: var(--smart-icon-table) } .smart-editor-toolbar-item[item-name=lowercase]::before { content: var(--smart-icon-case-lower) } .smart-editor-toolbar-item[item-name=uppercase]::before { content: var(--smart-icon-case-upper) } .smart-editor-toolbar-item[item-name=print]::before { content: var(--smart-icon-print) } .smart-editor-toolbar-item[item-name=copy]::before { content: var(--smart-icon-copy-record) } .smart-editor-toolbar-item[item-name=paste]::before { content: var(--smart-icon-paste) } .smart-editor-toolbar-item[item-name=cut]::before { content: var(--smart-icon-cut); transform: rotate(-90deg) } .smart-editor-toolbar-item[item-name=clearformat]::before { content: var(--smart-icon-format-clear); font-style: italic; font-weight: 600 } .smart-editor-toolbar-item[item-name=fullscreen]::before { content: var(--smart-icon-resize-full) } .smart-editor-toolbar-item[item-name=sourcecode]::before { content: var(--smart-icon-source-code) } .smart-editor-toolbar-item[item-name=preview]::before { content: var(--smart-icon-visibility) } .smart-editor-toolbar-item[item-name=splitmode]::before { content: var(--smart-icon-split-mode) } .smart-editor-toolbar-item[item-name=tableheader]::before { content: var(--smart-icon-header) } .smart-editor-toolbar-item[item-name=tablerows]::before { content: var(--smart-icon-row) } .smart-editor-toolbar-item[item-name=tablecolumns]::before { content: var(--smart-icon-column) } .smart-editor-toolbar-item[item-name=tablevalign]::before { content: var(--smart-icon-vertical-align) } .smart-editor-toolbar-item[item-name=tablestyle]::before { content: var(--smart-icon-styles) } .smart-editor-toolbar-item[item-name=findandreplace]::before { content: var(--smart-icon-search) } .smart-editor-toolbar-item[item-name=video]::before { content: var(--smart-icon-video) } .smart-editor-toolbar-item[item-name=redo]::before { transform: scaleX(-1) } .smart-editor-toolbar-item[item-name=clearformat]::after { content: '-'; position: absolute; top: 0; font-weight: 600; transform: scaleX(1.5) } .smart-editor-toolbar-item[item-name=alignment][item-value=left]::before { content: var(--smart-icon-align-left) } .smart-editor-toolbar-item[item-name=alignment][item-value=center]::before { content: var(--smart-icon-align-center) } .smart-editor-toolbar-item[item-name=alignment][item-value=right]::before { content: var(--smart-icon-align-right) } .smart-editor-toolbar-item[item-name=alignment][item-value=justify]::before { content: var(--smart-icon-align-justify) } .smart-editor-toolbar-item[item-type=button], .smart-editor-toolbar-item[item-type=toggle] { width: var(--smart-editor-toolbar-button-width) } .smart-editor-toolbar-item[item-type=drop-down], .smart-editor-toolbar-item[item-type=color-input] { display: flex; align-items: center; justify-content: space-between; width: var(--smart-editor-toolbar-drop-down-width-small) } .smart-editor-toolbar-item[item-type=drop-down][item-name=fontname], .smart-editor-toolbar-item[item-type=drop-down][item-name=formats] { width: var(--smart-editor-toolbar-drop-down-width-large) } .smart-editor-toolbar-item[item-type=drop-down][item-name=tablerows]:before { transform: rotate(90deg); padding: var(--smart-editor-label-padding); padding-left: initial; padding-right: initial; padding-top: initial } .smart-editor-toolbar-item[item-type=color-input] .smart-editor-item-action-button { display: flex; align-items: center; justify-content: center; position: relative; width: calc(100% - var(--smart-editor-addon-width)); height: 100%; min-width: var(--smart-editor-addon-width); padding: var(--smart-editor-label-padding); padding-top: initial; padding-bottom: initial } .smart-editor-toolbar-item[item-type=color-input] .smart-editor-item-action-button::before { font-size: var(--smart-font-size); font-family: var(--smart-font-family-icon); border-bottom: calc(3 * var(--smart-border-width)) solid var(--item-value) } .smart-editor-toolbar-item[item-type=color-input] .smart-editor-item-drop-down-button { position: relative; height: 100% } .smart-editor-toolbar-item[item-type=custom]>:first-child { width: 100%; height: var(--smart-editor-toolbar-item-height) } .smart-editor-toolbar-item .smart-editor-item-action-button:hover, .smart-editor-toolbar-item .smart-editor-item-drop-down-button:hover { color: var(--smart-ui-state-color-hover); border-color: var(--smart-ui-state-focus); background-color: var(--smart-ui-state-focus) } .smart-editor-toolbar-item .smart-editor-item-action-button:not([disabled]):active, .smart-editor-toolbar-item .smart-editor-item-drop-down-button:not([disabled]):active { color: var(--smart-ui-state-color-active); border-color: var(--smart-ui-state-border-active); background-color: var(--smart-ui-state-active) } .smart-editor-toolbar-item[item-type=delimiter] { width: var(--smart-editor-toolbar-delimiter-width); pointer-events: none } .smart-editor-toolbar-item[item-type=delimiter]::before { content: attr(item-name); transform: scaleY(1.5); min-width: initial } .smart-editor-toolbar-item .smart-ripple { background-color: var(--smart-background-color) } .smart-editor-toolbar-item .smart-editor-item-drop-down { position: absolute; top: 0; left: 0; visibility: hidden } .smart-color-input-drop-down-menu.smart-editor-color-input .grid-samples-container { grid-template-columns: repeat(2, minmax(0, 1fr)) } .smart-color-input-drop-down-menu.smart-editor-color-input:not([animation=none]) .default-samples-container div { transition: transform .2s ease-in-out } .smart-color-input-drop-down-menu.smart-editor-color-input .default-samples-container div { position: relative; border-radius: 50%; border: initial; transform: scale(.95) } .smart-color-input-drop-down-menu.smart-editor-color-input .default-samples-container div.selected { transform: scale(1) } .smart-color-input-drop-down-menu.smart-editor-color-input .default-samples-container div.selected:not(.no-color):after { content: var(--smart-icon-check); width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: flex; justify-content: center; align-items: center; font-family: var(--smart-font-family-icon); color: var(--smart-secondary-color); border-radius: inherit } .smart-editor-color-input { --smart-input-drop-down-menu-width: auto } .smart-editor-color-input.smart-color-input-drop-down-menu .default-samples-container div.selected[value="#FFFFFF"]::after { border: var(--smart-border-width) solid var(--smart-border); color: var(--smart-ui-state-color-hover); box-sizing: border-box } .smart-editor-input li .editor-icon::before { font-size: var(--smart-font-size); font-family: var(--smart-font-family-icon); display: flex; align-items: center; justify-content: center; position: absolute; left: 0; width: var(--smart-column-icon-size); line-height: 1rem } .smart-editor-input li[value=left] .editor-icon::before { content: var(--smart-icon-align-left) } .smart-editor-input li[value=center] .editor-icon::before { content: var(--smart-icon-align-center) } .smart-editor-input li[value=right] .editor-icon::before { content: var(--smart-icon-align-right) } .smart-editor-input li[value=justify] .editor-icon::before { content: var(--smart-icon-align-justify) } .smart-editor-input li[value=insertRowBefore] .editor-icon::before { content: var(--smart-icon-row-before) } .smart-editor-input li[value=insertRowAfter] .editor-icon::before { content: var(--smart-icon-row-after); transform: rotate(180deg) } .smart-editor-input li[value=deleteRow] .editor-icon::before { content: var(--smart-icon-row-delete) } .smart-editor-input li[value=insertColumnLeft] .editor-icon::before { content: var(--smart-icon-column-left); transform: rotate(-90deg) } .smart-editor-input li[value=insertColumnRight] .editor-icon::before { content: var(--smart-icon-column-right); transform: rotate(90deg) } .smart-editor-input li[value=deleteColumn] .editor-icon::before { content: var(--smart-icon-column-delete) } .smart-editor-input li[value=h1] a { font-size: 1.5rem; font-weight: 700 } .smart-editor-input li[value=h2] a { font-size: 1.3rem; font-weight: 700 } .smart-editor-input li[value=h3] a { font-size: 1.1rem; font-weight: 700 } .smart-editor-input li[value=h4] a { font-size: .9rem; font-weight: 700 } .smart-editor-input li[value=segueUi] a { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif } .smart-editor-input li[value=arial] a { font-family: Arial, Helvetica, sans-serif } .smart-editor-input li[value=georgia] a { font-family: Georgia, "Times New Roman", Times, serif } .smart-editor-input li[value=impact] a { font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif } .smart-editor-input li[value=tahoma] a { font-family: Tahoma, Geneva, Verdana, sans-serif } .smart-editor-input li[value=timesnewRoman] a { font-family: "Times New Roman", Times, serif } .smart-editor-input li[value=verdana] a { font-family: Verdana, Geneva, Tahoma, sans-serif } .smart-editor-window { --smart-window-default-width: auto; --smart-window-default-height: auto; --smart-window-header-height: var(--smart-editor-window-header-height); --smart-window-footer-height: var(--smart-editor-window-footer-height); --smart-window-header-footer-padding: 10px; --smart-window-header-background: transparent; --smart-window-footer-padding: 10px; --smart-window-content-padding: 20px; max-width: 95vw; max-height: 95vh } .smart-editor-window.smart-window .smart-content-container>.smart-content { padding: initial; align-items: flex-start } .smart-editor-window .smart-editor-window-button { width: 100%; height: 100%; --smart-button-padding: 0.2rem 16px } .smart-editor-window .smart-editor-window-button:not(:last-of-type) { margin-right: 2.5% } .smart-editor-window .smart-editor-window-content-wrapper { grid-template-rows: auto minmax(auto, 1fr); padding: var(--smart-window-content-padding); width: 100% } .smart-editor-window .smart-editor-window-content-wrapper>div { display: grid; width: var(--smart-box-width); grid-row-gap: 10px; justify-content: center; grid-template-columns: 100% } .smart-editor-window .smart-editor-window-editor { display: grid; grid-row-gap: 5px; grid-column-gap: 10px } .smart-editor-window .smart-editor-window-editor>.smart-input, .smart-editor-window .smart-editor-window-editor>.smart-list-box { width: 100% } .smart-editor-window .smart-editor-window-editor>.smart-check-box { width: max-content } .smart-editor-window .smart-editor-window-editor[multiple] .smart-editor-window-editor { grid-template-columns: repeat(2, minmax(0, 1fr)) } .smart-editor-window .smart-editor-window-editor[type=results] label { display: flex; justify-content: space-between } .smart-editor-window .smart-editor-window-editor[type=results] label[matches]::after { content: attr(selected) " of " attr(matches) } .smart-editor-window .smart-editor-window-editor[type=file] .smart-drop-zone { width: 100%; height: 100px; border: calc(2 * var(--smart-border-width)) dashed var(--smart-border); border-radius: var(--smart-border-radius) } .smart-editor-window .smart-editor-window-editor[type=file] .smart-file-upload { --smart-file-upload-drop-zone-height: 100px; width: 100%; order: 1; min-height: initial } .smart-editor-window .smart-editor-window-editor[type=file] .smart-file-upload .smart-browse-button { margin: initial } .smart-editor-window .smart-editor-window-editor[type=file] .smart-file-upload .smart-item-upload-button { display: none } .smart-editor-window .smart-editor-window-editor[type=file] .smart-file-upload .smart-file-upload-header { margin-bottom: 5px; padding: initial } .smart-editor-window .smart-editor-window-editor[type=file] .smart-file-upload .smart-file-upload-container, .smart-editor-window .smart-editor-window-editor[type=file] .smart-file-upload .smart-selected-files { padding: initial } .smart-editor-window .smart-editor-window-editor[type=file] .smart-file-upload .smart-selected-files .smart-file { display: flex; margin: initial; border: var(--smart-border-width) solid var(--smart-border); border-radius: var(--smart-border-radius) } .smart-editor-window .smart-editor-window-editor[type=file] .smart-file-upload .smart-selected-files .smart-item-cancel-button:after, .smart-editor-window .smart-editor-window-editor[type=file] .smart-file-upload .smart-selected-files .smart-item-pause-button:after, .smart-editor-window .smart-editor-window-editor[type=file] .smart-file-upload .smart-selected-files .smart-item-upload-button:after { position: initial; left: initial; top: initial; display: flex; align-items: center; justify-content: center } .smart-editor-window .smart-editor-window-editor[type=file] .smart-file-upload .smart-selected-files .smart-item-name { width: 100% } .smart-tooltip .smart-tooltip-content { display: flex; background-color: var(--smart-background); color: var(--smart-background-color); border-color: var(--smart-background); opacity: initial } .smart-tooltip.smart-editor-context-menu:not([animation=none]) { transition: opacity .2s ease-in, visibility .2s ease-in, transform .2s ease-in } .smart-tooltip.smart-editor-toolbar { --smart-tooltip-padding: 5px; --smart-tooltip-arrow-color: var(--smart-surface) } .smart-tooltip.smart-editor-toolbar .smart-tooltip-content { background-color: var(--smart-surface); color: var(--smart-surface-color); border-color: var(--smart-surface) } .smart-tooltip.smart-editor-toolbar.smart-editor-inline-toolbar .smart-tooltip-content { max-width: var(--smart-editor-inline-toolbar-max-width); flex-wrap: wrap } .smart-tooltip.smart-editor-toolbar:not([animation=none]) .smart-editor-toolbar-item { transition: background-color 0s linear, border-color 0s ease-in-out, color 0s linear, box-shadow .2s ease-in-out } .smart-tooltip.smart-editor-toolbar:not(.smart-editor-drop-down-toolbar) .smart-editor-toolbar-item:not(:first-of-type) { margin-left: var(--smart-editor-toolbar-item-margin) } .smart-tooltip.smart-editor-context-menu { opacity: .2; transform: scale(0); -webkit-transform-origin: 0 0; transform-origin: 0 0 } .smart-tooltip.smart-editor-context-menu[visible] { opacity: 1; transform: scale(1) } .smart-tooltip .smart-editor-context-menu-item-container { width: 100%; height: 100%; display: grid; align-items: center; justify-content: flex-start } .smart-tooltip .smart-editor-context-menu-item-container .smart-editor-context-menu-item { -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; user-select: none; height: var(--smart-list-item-height); padding: var(--smart-list-item-padding); border-top-left-radius: var(--smart-item-border-top-left-radius); border-top-right-radius: var(--smart-item-border-top-right-radius); border-bottom-left-radius: var(--smart-item-border-bottom-left-radius); border-bottom-right-radius: var(--smart-item-border-bottom-right-radius); white-space: nowrap; text-overflow: ellipsis; background: var(--smart-background); color: var(--smart-background-color); display: flex; align-items: center; position: relative; padding-left: var(--smart-column-icon-size) } .smart-tooltip .smart-editor-context-menu-item-container .smart-editor-context-menu-item::before { font-size: var(--smart-font-size); font-family: var(--smart-font-family-icon); display: flex; align-items: center; justify-content: center; position: absolute; left: 0; width: var(--smart-column-icon-size); line-height: 1rem } .smart-tooltip .smart-editor-context-menu-item-container .smart-editor-context-menu-item[value=insertRowBefore]::before { content: var(--smart-icon-row-before) } .smart-tooltip .smart-editor-context-menu-item-container .smart-editor-context-menu-item[value=insertRowAfter]::before { content: var(--smart-icon-row-after); transform: rotate(180deg) } .smart-tooltip .smart-editor-context-menu-item-container .smart-editor-context-menu-item[value=deleteRow]::before { content: var(--smart-icon-row-delete) } .smart-tooltip .smart-editor-context-menu-item-container .smart-editor-context-menu-item[value=insertColumnLeft]::before { content: var(--smart-icon-column-left); transform: rotate(-90deg) } .smart-tooltip .smart-editor-context-menu-item-container .smart-editor-context-menu-item[value=insertColumnRight]::before { content: var(--smart-icon-column-right); transform: rotate(90deg) } .smart-tooltip .smart-editor-context-menu-item-container .smart-editor-context-menu-item[value=deleteColumn]::before { content: var(--smart-icon-column-delete) } .smart-tooltip .smart-editor-context-menu-item-container .smart-editor-context-menu-item[value=tableProperties]::before { content: var(--smart-icon-table) } .smart-tooltip .smart-editor-context-menu-item-container .smart-editor-context-menu-item[value=imageProperties]::before { content: var(--smart-icon-image) } .smart-tooltip .smart-editor-context-menu-item-container .smart-editor-context-menu-item[value=linkProperties]::before, .smart-tooltip .smart-editor-context-menu-item-container .smart-editor-context-menu-item[value=videoProperties]::before { content: var(--smart-icon-link) } .smart-tooltip .smart-editor-context-menu-item-container .smart-editor-context-menu-item[value=deleteTable]::before { content: var(--smart-icon-delete) } .smart-tooltip .smart-editor-context-menu-item-container .smart-editor-context-menu-item[value=copyImage]::before, .smart-tooltip .smart-editor-context-menu-item-container .smart-editor-context-menu-item[value=copyVideo]::before { content: var(--smart-icon-copy-record) } .smart-tooltip .smart-editor-context-menu-item-container .smart-editor-context-menu-item[value=cutImage]::before, .smart-tooltip .smart-editor-context-menu-item-container .smart-editor-context-menu-item[value=cutVideo]::before { content: var(--smart-icon-cut); transform: rotate(-90deg) } .smart-tooltip .smart-editor-context-menu-item-container .smart-editor-context-menu-item[value=deleteImage]::before, .smart-tooltip .smart-editor-context-menu-item-container .smart-editor-context-menu-item[value=deleteVideo]::before, .smart-tooltip .smart-editor-context-menu-item-container .smart-editor-context-menu-item[value=deleteLink]::before { content: var(--smart-icon-delete) } .smart-tooltip .smart-editor-context-menu-item-container .smart-editor-context-menu-item[value=createLink]::before { content: var(--smart-icon-link) } .smart-tooltip .smart-editor-context-menu-item-container .smart-editor-context-menu-item[value=deleteLink]::before { content: var(--smart-icon-unlink) } .smart-tooltip .smart-editor-context-menu-item-container .smart-editor-context-menu-item[value=caption]::before { content: var(--smart-icon-format-clear) } .smart-tooltip .smart-editor-context-menu-item-container .smart-editor-context-menu-item[value=selectAll]::before { content: var(--smart-icon-group) } .smart-tooltip .smart-editor-context-menu-item-container .smart-editor-context-menu-item[value=cut]::before { content: var(--smart-icon-cut); transform: rotate(-90deg) } .smart-tooltip .smart-editor-context-menu-item-container .smart-editor-context-menu-item[value=copy]::before { content: var(--smart-icon-copy-record) } .smart-tooltip .smart-editor-context-menu-item-container .smart-editor-context-menu-item[value=paste]::before { content: var(--smart-icon-paste) } .smart-tooltip .smart-editor-context-menu-item-container .smart-editor-context-menu-item:hover { background: var(--smart-ui-state-hover); color: var(--smart-ui-state-color-hover) } .smart-tooltip .smart-editor-context-menu-item-container .smart-editor-context-menu-item[selected] { background-color: var(--smart-ui-state-selected); border-color: var(--smart-ui-state-border-selected); color: var(--smart-ui-state-color-selected) } .smart-tooltip .smart-editor-context-menu-item-container .smart-editor-context-menu-item[disabled] { opacity: .55; cursor: default; pointer-events: none } .smart-editor-drop-down-toolbar:not([animation=none]) { animation: smart-drop-down-list-smart-animate-closing .2s ease-in; transition: animation .2s ease-in, opacity .2s ease-in, visibility .2s ease-in } .smart-editor-drop-down-toolbar:not([animation=none])[visible] { animation: smart-drop-down-list-smart-animate-opening .2s ease-out; transition: animation .2s ease-out, opacity .2s ease-out, visibility .2s ease-out } .smart-editor-drop-down-toolbar:not([arrow-direction]), .smart-editor-drop-down-toolbar[arrow-direction=bottom] { -webkit-transform-origin: bottom; transform-origin: bottom } .smart-editor-drop-down-toolbar:not([arrow]), .smart-editor-drop-down-toolbar[arrow-direction=top] { -webkit-transform-origin: top; transform-origin: top } .smart-editor-drop-down-toolbar .smart-table-picker { overflow: hidden; display: block; background: 0 0 } .smart-editor-drop-down-toolbar .smart-table-picker .smart-table-picker-grid { width: 100%; display: flex; flex-direction: column; align-items: center } .smart-editor-drop-down-toolbar .smart-table-picker .smart-table-picker-grid::before { content: attr(value); display: flex; width: 100%; justify-content: center; align-items: center; padding: .2rem 16px; box-sizing: border-box } .smart-editor-drop-down-toolbar .smart-table-picker .smart-table-picker-grid>div { display: flex } .smart-editor-drop-down-toolbar .smart-table-picker .smart-table-picker-cell { width: 15px; height: 15px; border: var(--smart-border-width) solid var(--smart-border); margin: 2px; cursor: pointer } .smart-editor-drop-down-toolbar .smart-table-picker .smart-table-picker-cell[selected] { border-color: var(--smart-primary); background: var(--smart-primary) } .smart-editor-drop-down-toolbar .smart-table-picker .smart-table-picker-separator { width: 100%; height: var(--smart-border-width); background: var(--smart-border); margin: 10px 0 } .smart-editor-drop-down-toolbar .smart-table-picker .smart-table-picker-button { width: 100%; background: 0 0; border: initial } .smart-editor-drop-down-toolbar .smart-table-picker .smart-table-picker-button button::before { font-size: var(--smart-font-size); font-family: var(--smart-font-family-icon); content: var(--smart-icon-table); margin-right: 10px; box-sizing: border-box } .smart-editor[right-to-left] .smart-editor-toolbar:not(.smart-tooltip) .smart-editor-toolbar-item, .smart-tooltip.smart-editor-toolbar[right-to-left]:not(.smart-editor-drop-down-toolbar) .smart-editor-toolbar-item:not(:first-of-type) { margin-left: initial; margin-right: var(--smart-editor-toolbar-item-margin) } .smart-editor[right-to-left] .smart-editor-toolbar:not(.smart-tooltip) { grid-template-areas: 'toggleButton primary' 'secondary secondary'; grid-template-columns: auto minmax(0, 1fr) } .smart-editor[right-to-left] .smart-editor-content-container, .smart-editor[right-to-left] .smart-editor-toolbar-item[item-type=drop-down], .smart-editor[right-to-left] .smart-editor-toolbar-item[item-type=color-input], .smart-editor[right-to-left] .smart-editor-toolbar-items-primary, .smart-editor[right-to-left] .smart-editor-toolbar-items-secondary { direction: rtl } .smart-editor[right-to-left] .smart-editor-resize-frame span { transform: translate(50%, -50%) } .smart-editor[right-to-left] .smart-editor-resize-frame span[position=top-left], .smart-editor[right-to-left] .smart-editor-resize-frame span[position=bottom-right] { cursor: sw-resize } .smart-editor[right-to-left] .smart-editor-resize-frame span[position=top-right], .smart-editor[right-to-left] .smart-editor-resize-frame span[position=bottom-left] { cursor: se-resize } .smart-editor-input[right-to-left] li .editor-icon::before { right: 0; left: initial } .smart-editor-drop-down-toolbar .smart-table-picker[right-to-left] .smart-table-picker-grid { direction: rtl } .smart-editor-drop-down-toolbar .smart-table-picker[right-to-left] .smart-table-picker-button>button.smart-button { display: flex; align-items: center; justify-content: center } .smart-editor-drop-down-toolbar .smart-table-picker[right-to-left] .smart-table-picker-button>button.smart-button::before { margin-right: initial; margin-left: 10px } smart-file-upload { display: inline-block; width: var(--smart-file-upload-default-width); font-size: var(--smart-file-upload-font-size); font-family: var(--smart-file-upload-font-family); color: var(--smart-file-upload-color); overflow: hidden; box-sizing: border-box; border: var(--smart-file-upload-border-width) dashed var(--smart-file-upload-border); background-color: var(--smart-file-upload-background); min-width: 200px; min-height: 100px } smart-file-upload .smart-selected-files .smart-file.smart-hidden, smart-file-upload .smart-total-files.smart-hidden, smart-file-upload[show-progress] .smart-file smart-progress-bar { display: none } smart-file-upload[disabled] { opacity: .55; cursor: default } smart-file-upload[show-progress] .smart-file smart-progress-bar[value] { display: block } .smart-file.smart-uploading-start:before { width: 100%; height: 100%; position: absolute; left: 0; top: 0; font-family: arial; content: var(--smart-file-upload-text-content-uploading-start); background-color: #c1c1c169; opacity: 1; display: flex; justify-content: flex-end; flex-direction: column; box-sizing: border-box; font-size: 11px; color: #737373; padding: 0 0 2px 5px; pointer-events: none; z-index: 1; animation: connecting 1s linear infinite } .smart-file.smart-pause:before, .smart-file.smart-uploading:before { justify-content: flex-end; height: 100%; display: flex; font-size: 11px; padding: 0 0 2px 5px; z-index: 1; position: absolute; left: 0; font-family: arial; pointer-events: none; box-sizing: border-box; top: 0 } .smart-file.smart-uploading:before { content: var(--smart-file-upload-text-content-uploading); width: 100%; background-color: #c1c1c169; opacity: 1; flex-direction: column; color: var(--smart-ui-state) } .smart-file.smart-uploading .smart-item-upload-button { pointer-events: none } .smart-file.smart-uploading .smart-item-name { opacity: .2; user-select: none } .smart-file.smart-pause:before { content: var(--smart-file-upload-text-content-pause); width: 100%; background-color: #f0030; border-radius: 3px; opacity: .8; flex-direction: column; color: #8a0000 } .smart-file.smart-error:before { font-family: arial; position: absolute; left: 0; top: 0; content: var(--smart-file-upload-text-content-error); width: 100%; height: 100%; background-color: var(--smart-error); border-radius: var(--smart-error-border-radius); opacity: 0; display: flex; justify-content: flex-end; flex-direction: column; box-sizing: border-box; font-size: 11px; color: var(--smart-on-error); padding: 0 0 2px 5px; pointer-events: none; z-index: 1; animation: error 6s linear 1 } .smart-file.smart-error smart-progress-bar, .smart-selected-files .smart-uploading .smart-item-upload-button { opacity: .3 } .smart-file smart-progress-bar { display: none; width: 100%; height: 4px; position: absolute; bottom: 0; left: 0 } .smart-file smart-progress-bar .smart-container { border-style: none } .smart-file smart-progress-bar .smart-value { background-color: orange } .smart-file-upload .smart-file-upload-container, .smart-file-upload .smart-file-upload-footer, .smart-file-upload .smart-file-upload-header { padding: 5px; width: 100%; box-sizing: border-box } .smart-file-upload .smart-browse-button { display: block; margin: 4px; width: var(--smart-file-upload-browse-button-width); height: var(--smart-file-upload-browse-button-height) } .smart-file-upload .smart-cancel-all-button, .smart-file-upload .smart-pause-all-button, .smart-file-upload .smart-upload-all-button { width: var(--smart-file-upload-footer-button-width); height: var(--smart-file-upload-footer-button-height); margin: 4px } .smart-file-upload .smart-browse-input { display: none } .smart-file-upload .smart-drop-zone { display: none; width: 100%; height: 100px } .smart-file-upload .smart-total-files { font-family: arial; font-size: 12px; color: gray; display: block; box-sizing: border-box; padding: 0 0 2px 5px } .smart-file-upload .smart-total-files:empty, .smart-file-upload[hide-footer] .smart-file-upload-footer { display: none } .smart-file-upload[disabled] .smart-file-upload-container { pointer-events: none; user-select: none } .smart-file-upload[drop-zone] .smart-drop-zone { display: block } .smart-file-upload[drop-zone] .smart-overflow .smart-drop-zone { display: none } .smart-drop-zone { width: 100%; height: 100%; background-color: var(--smart-background); position: relative; box-sizing: border-box; border: 1px dotted #d3d3d3 } .smart-drop-zone:after { font-family: var(--smart-font-family-icon); overflow: hidden; text-overflow: ellipsis; display: flex; justify-content: center; flex-direction: column; height: 100%; width: 100%; text-align: center; content: var(--smart-file-upload-text-content-drop-zone); color: var(--smart-ui-state); box-sizing: border-box; border: 5px dashed transparent; transition: border .5s ease-out } .smart-drop-zone.smart-drag-over:after, [data-theme=modern] .smart-drop-zone.smart-drag-over:after { content: var(--smart-file-upload-text-content-drop-zone-over); transition: border .5s ease-out; animation: drop-zone 1s ease-in infinite } .smart-drop-zone.smart-drag-over:after { font-size: 50px; border: 3px dashed var(--smart-background-border) } [data-theme=modern] { --smart-file-upload-text-content-drop-zone-over: "Drop here" } [data-theme=modern] .smart-drop-zone { border: 2px dashed var(--smart-surface); width: 100%; background-size: contain; background-repeat: no-repeat; background-position: bottom center; padding: 10px; display: flex; justify-content: center; align-items: center } [data-theme=modern] .smart-drop-zone:after { font-family: Verdana; font-size: .875rem; font-weight: 400; line-height: 1.5 } [data-theme=modern] .smart-drop-zone:hover { border-color: var(--smart-primary); background-color: rgba(var(--smart-primary-rgb), .1) } [data-theme=modern] .smart-drop-zone.smart-drag-over:after { border-color: transparent; font-size: 2.5rem } .smart-selected-files .smart-item-cancel-button:after, .smart-selected-files .smart-item-pause-button:after, .smart-selected-files .smart-item-upload-button:after { font-family: var(--smart-font-family-icon); font-size: 16px; text-shadow: 2px 2px 2px #d3d3d3; left: 0 } .smart-selected-files { width: 100%; height: 100%; display: block; box-sizing: border-box; padding: 2px } .smart-selected-files .smart-file { height: auto; position: relative; display: block; box-sizing: border-box; border: 1px solid #d3d3d3; padding: 10px; border-radius: 3px; margin-bottom: 1px; background-color: #fafafa; transition: border-color .5s ease } .smart-selected-files .smart-file:hover { transition: border-color .5s ease; border-color: gray } .smart-selected-files .smart-item-pause-button { pointer-events: none; box-sizing: border-box; height: 16px; position: relative; width: 16px; color: #999; transition: color .5s ease; display: none } .smart-selected-files .smart-item-pause-button:after { position: absolute; top: 0; content: var(--smart-icon-close) } .smart-selected-files .smart-item-cancel-button { display: inline-block; box-sizing: border-box; height: 16px; position: relative; width: 16px; color: #999; transition: color .5s ease } .smart-selected-files .smart-item-cancel-button:after { position: absolute; top: 0; content: var(--smart-icon-close) } .smart-selected-files .smart-item-cancel-button:hover { cursor: pointer; transition: color .5s ease; color: orange } .smart-selected-files .smart-item-upload-button { display: inline-block; box-sizing: border-box; height: 16px; position: relative; width: 16px; color: #999; transition: color .5s ease } .smart-selected-files .smart-item-upload-button:after { content: var(--smart-icon-up); position: absolute; top: 0 } .smart-selected-files .smart-item-upload-button:hover { cursor: pointer; color: var(--smart-success); transition: color .5s ease } .smart-selected-files .smart-item-name { display: inline-block; box-sizing: border-box; position: relative; width: calc(100% - 40px); overflow: hidden; text-overflow: ellipsis; height: auto } .smart-selected-files .smart-uploading .smart-item-name { width: calc(100% - 60px); overflow: hidden; text-overflow: ellipsis; height: auto } .smart-selected-files .smart-uploading .smart-item-pause-button { display: inline-block; cursor: pointer; pointer-events: all; transition: color .5s, opacity .5s ease; color: #dc1919; opacity: .5 } .smart-selected-files .smart-uploading .smart-item-pause-button:hover { transition: color .5s, opacity .5s ease; color: red; opacity: 1 } .smart-selected-files .smart-uploading .smart-item-cancel-button { display: inline-block; cursor: pointer; pointer-events: all; transition: color .5s, opacity .5s ease; opacity: .5; color: #ff8c00 } .smart-selected-files .smart-uploading .smart-item-cancel-button:hover { transition: color .5s, opacity .5s ease; color: orange; opacity: 1 } .smart-drop-zone-square { position: relative } .smart-drop-zone-square:before { content: ""; display: block; padding-bottom: 100% } .smart-drop-zone-square .smart-drop-zone { position: absolute; top: 0; bottom: 0; left: 0; right: 0 } .smart-drop-zone-square.smart-drop-zone-small { min-width: 115px } .smart-drop-zone-small { position: relative; width: auto; display: inline-block } .smart-drop-zone-small .smart-drop-zone.smart-drag-over:after { font-size: 1.25rem } .smart-drop-zone-images-only .smart-drop-zone { display: flex; align-items: center; flex-flow: column; justify-content: space-evenly } .smart-drop-zone-images-only .smart-drop-zone:after { height: auto } .smart-drop-zone-images-only .smart-drop-zone:before { display: block; content: ''; background-image: url(./images/dropable_zone_image.svg); width: 70px; height: 55px; background-size: contain; background-position: center center } @-webkit-keyframes connecting { 0%, 100% { color: #73737350 } 50% { color: #73737399 } } @-webkit-keyframes drop-zone { 0%, 100% { color: #b1b1b100 } 50% { color: #b1b1b199 } } @-webkit-keyframes rotating { from { transform: rotate(0) } to { transform: rotate(360deg) } } @-webkit-keyframes error { 0% { opacity: .8; background-color: #f0015 } 3%, 9% { background-color: #f0040 } 12%, 6% { background-color: #f0015 } 80% { opacity: .8 } 100% { opacity: 0 } } .smart-drop-zone[right-to-left], .smart-file[right-to-left], smart-file-upload[right-to-left]>.smart-container { direction: rtl } .smart-filter-builder.smart-container, smart-filter-builder, smart-filter-builder>.smart-container { overflow: visible; position: relative } smart-filter-builder { display: inline-block; width: var(--smart-filter-builder-default-width); height: var(--smart-filter-builder-default-height); font-size: var(--smart-filter-builder-font-size); font-family: var(--smart-filter-builder-font-family); box-sizing: border-box; background-color: transparent } smart-filter-builder[disabled] { opacity: .55; cursor: default; pointer-events: none; user-select: none } .smart-filter-builder.smart-container>.smart-inner-container, smart-filter-builder>.smart-container>.smart-inner-container { overflow: hidden; width: 100%; height: 100%; position: relative } .smart-filter-builder smart-menu[mode=dropDown] { width: auto; height: auto } .smart-filter-builder smart-scroll-viewer { width: 100%; height: 100%; position: relative } .smart-filter-builder .filter-builder-item { min-height: var(--smart-filter-builder-row-height); vertical-align: middle; margin-right: 5px; border: none; border-radius: 3px; background-color: #add8e6; display: inline-flex; align-content: center; justify-content: center; align-items: center; padding: 5px; cursor: pointer } .smart-filter-builder .smart-filter-builder-icon { width: 40px; height: 100%; display: inline-block; font-weight: 700; border-right: 1px solid gray; margin-right: 5px; padding: 0 2px; text-align: center } .smart-filter-builder .smart-filter-builder-menu-item { height: 100%; display: inline-block } .smart-filter-builder .smart-filter-add-btn, .smart-filter-builder .smart-filter-delete-btn { min-width: var(--smart-filter-builder-row-height); min-height: var(--smart-filter-builder-row-height); box-sizing: border-box; vertical-align: middle; display: inline-block; padding: 5px 0; opacity: .3; font-size: 16px } .smart-filter-builder .smart-filter-add-btn:after, .smart-filter-builder .smart-filter-delete-btn:after { content: "+"; font-family: var(--smart-font-family-icon); display: inline-block; text-align: center; width: 100%; vertical-align: middle; cursor: pointer; font-size: 25px } .smart-filter-builder .smart-filter-add-btn:hover, .smart-filter-builder .smart-filter-delete-btn:hover { opacity: .6 } .smart-filter-builder .smart-filter-add-btn:active, .smart-filter-builder .smart-filter-delete-btn:active { opacity: 1 } .smart-filter-builder .smart-filter-add-btn { color: var(--smart-background-color) } .smart-filter-builder .smart-filter-add-btn:after { font-weight: 700 } .smart-filter-builder .smart-filter-delete-btn:after { content: "\e81F"; font-size: 10px } .smart-filter-builder .smart-filter-value { min-width: 100px; padding: 0 } .smart-filter-builder .smart-filter-value .smart-value-container { color: gray; width: 100%; height: 100%; display: inline-flex; align-content: center; justify-content: center; padding: 5px; margin: 0 } .smart-filter-builder .smart-filter-value[edited] { padding: 0; background-color: transparent } .smart-filter-builder .smart-filter-value[edited] .smart-value-container { display: none } .smart-filter-builder .smart-filter-group, .smart-filter-builder .smart-filter-group-condition, .smart-filter-builder .smart-filter-group-condition-container, .smart-filter-builder .smart-filter-group-operator { display: block; width: 100%; box-sizing: border-box; white-space: nowrap } .smart-filter-builder .smart-filter-group-condition { margin-bottom: 5px } .smart-filter-builder .smart-filter-group-condition-container { padding-left: 30px } .smart-filter-builder .smart-filter-group-operation { min-width: 50px } .smart-filter-builder .smart-content-container>.smart-filter-group>.smart-filter-group-operator { margin-left: 30px } .smart-filter-builder .smart-content-container>.smart-filter-group>.smart-filter-group-operator .smart-filter-delete-btn { display: none } .smart-filter-builder .smart-editors-container { position: relative; pointer-events: none; height: 20px } .smart-filter-builder .smart-editors-container[open] { min-width: 100px; width: var(--smart-filter-builder-item-width); min-height: var(--smart-filter-builder-row-height) } .smart-filter-builder .smart-editors-container[open] .smart-check-box-editor { margin-left: auto; margin-right: auto; display: flex; align-self: center; justify-self: center; width: 30px; height: 30px } .smart-filter-builder .smart-editors-container[open] .smart-check-box-editor.smart-hidden, .smart-filter-builder .smart-hidden { display: none } .smart-filter-builder .smart-editors-container .smart-check-box-editor, .smart-filter-builder .smart-editors-container .smart-combo-box-editor, .smart-filter-builder .smart-editors-container .smart-custom-editor>*, .smart-filter-builder .smart-editors-container .smart-date-time-picker-editor, .smart-filter-builder .smart-editors-container .smart-drop-down-list-editor, .smart-filter-builder .smart-editors-container .smart-numeric-text-box-editor, .smart-filter-builder .smart-editors-container .smart-text-box-editor { pointer-events: all; width: 100% } .smart-filter-builder .smart-filter-field-name, .smart-filter-builder .smart-filter-operation { min-width: 100px } .smart-filter-builder .smart-selected-menu-item { background-color: #d3d3d3 } .smart-filter-builder .smart-scrollable-outer-container { width: 100%; height: 100% } .smart-filter-builder .smart-filter-value:hover>* { color: initial; border-color: initial; background-color: initial } smart-filter-panel { width: var(--smart-filter-panel-default-width); height: var(--smart-filter-panel-default-height) } smart-filter-panel.smart-element { padding: var(--smart-filter-panel-padding); border: none } .smart-filter-panel .smart-filter-panel-input:active, .smart-filter-panel .smart-filter-panel-input:focus { border-color: var(--smart-primary) } .smart-filter-panel smart-numeric-text-box.smart-filter-panel-input input { text-align: right } .smart-filter-panel smart-tree { width: 100%; height: var(--smart-filter-panel-main-element-height); margin-bottom: var(--smart-filter-panel-vertical-offset) } .smart-filter-panel smart-tree.date-excel smart-tree-items-group[level="1"]>.smart-tree-item-label-container>.smart-tree-items-group-arrow, .smart-filter-panel smart-tree.standard-excel .smart-tree-items-group-arrow { visibility: hidden } .smart-filter-panel smart-tree.standard-excel smart-tree-item:not([level="1"])>.smart-tree-item-label-container { margin-left: -30px } .smart-filter-panel smart-menu-item[value=notand], .smart-filter-panel smart-menu-item[value=notor] { display: none } .smart-filter-panel .smart-filter-panel-label { margin-bottom: var(--smart-filter-panel-vertical-offset) } .smart-filter-panel .smart-filter-panel-list { width: 100%; margin-bottom: var(--smart-filter-panel-vertical-offset) } .smart-filter-panel .smart-filter-panel-operator-list { width: 80px; margin-bottom: var(--smart-filter-panel-vertical-offset) } .smart-filter-panel .smart-filter-panel-button-container { width: 100%; min-height: 33px; height: var(--smart-editor-height); display: flex; justify-content: space-around } .smart-filter-panel .smart-filter-panel-button-container>smart-button { width: 80px } .smart-filter-panel .smart-filter-panel-button-container>smart-button button { padding: 8px } .smart-filter-panel .smart-filter-panel-input { height: var(--smart-editor-height); width: 100%; display: block; margin-bottom: var(--smart-filter-panel-vertical-offset) } .smart-filter-panel .smart-filter-panel-input.case-sensitive { width: calc(100% - 32px); display: inline-block } .smart-filter-panel[filter-type=string] .case-sensitive { display: block; margin-top: 5px; margin-bottom: calc(var(--smart-filter-panel-vertical-offset) - 5px) } .smart-filter-panel span.case-sensitive.smart-icon { font-family: var(--smart-font-family-icon); font-size: 16px; position: relative; margin-left: 5px; padding: 5px; border: 1px solid transparent; border-radius: var(--smart-border-radius) } .smart-filter-panel span.case-sensitive.smart-icon.smart-icon-font-size:after { content: var(--smart-icon-fontsize) } .smart-filter-panel span.case-sensitive.smart-icon:hover { background: var(--smart-ui-state-hover); color: var(--smart-ui-state-color-hover); border: 1px solid var(--smart-ui-state-border-hover) } .smart-filter-panel span.case-sensitive.smart-icon.active, .smart-filter-panel span.case-sensitive.smart-icon:active { background: var(--smart-ui-state-active); color: var(--smart-ui-state-color-active); border: 1px solid var(--smart-ui-state-border-active) } .smart-filter-panel-list-drop-down-menu.smart-input-drop-down-menu ul li span.smart-icon { font-family: var(--smart-font-family-icon); margin-right: 5px; font-size: 16px; position: relative; left: -3px } .smart-filter-panel-list-drop-down-menu.smart-input-drop-down-menu ul li span.smart-icon.smart-icon-contains:after { content: var(--smart-icon-contains) } .smart-filter-panel-list-drop-down-menu.smart-input-drop-down-menu ul li span.smart-icon.smart-icon-starts-with:after { content: var(--smart-icon-starts_with) } .smart-filter-panel-list-drop-down-menu.smart-input-drop-down-menu ul li span.smart-icon.smart-icon-ends-with:after { content: var(--smart-icon-ends_with) } .smart-filter-panel-list-drop-down-menu.smart-input-drop-down-menu ul li span.smart-icon.smart-icon-does-not-contain:after { content: var(--smart-icon-does_not_contain) } .smart-filter-panel-list-drop-down-menu.smart-input-drop-down-menu ul li span.smart-icon.smart-icon-equal:after { content: var(--smart-icon-equals) } .smart-filter-panel-list-drop-down-menu.smart-input-drop-down-menu ul li span.smart-icon.smart-icon-greater-than:after { content: var(--smart-icon-greater-than) } .smart-filter-panel-list-drop-down-menu.smart-input-drop-down-menu ul li span.smart-icon.smart-icon-greater-than-equal:after { content: var(--smart-icon-greater-than-equal) } .smart-filter-panel-list-drop-down-menu.smart-input-drop-down-menu ul li span.smart-icon.smart-icon-less-than:after { content: var(--smart-icon-less-than) } .smart-filter-panel-list-drop-down-menu.smart-input-drop-down-menu ul li span.smart-icon.smart-icon-less-than-equal:after { content: var(--smart-icon-less-than-equal) } .smart-filter-panel-list-drop-down-menu.smart-input-drop-down-menu ul li span.smart-icon.smart-icon-not-equal:after { content: var(--smart-icon-not-equal) } .smart-filter-panel-list-drop-down-menu.smart-input-drop-down-menu ul li span.smart-icon.smart-icon-between:after { content: var(--smart-icon-between) } .smart-filter-panel-list-drop-down-menu.smart-input-drop-down-menu ul li span.smart-icon.smart-icon-empty:after, .smart-filter-panel-list-drop-down-menu.smart-input-drop-down-menu ul li span.smart-icon.smart-icon-not-empty:after { content: var(--smart-icon-check-empty); position: relative; top: 1px } .smart-filter-panel-list-drop-down-menu.smart-input-drop-down-menu ul li span.smart-icon.smart-icon-not-empty:before { content: var(--smart-icon-close); font-size: 10px; left: calc(50% - 4px); top: calc(50% - 5px); position: absolute } .smart-filter-panel-list-drop-down-menu.smart-input-drop-down-menu ul li span.smart-icon.smart-icon-null:after { content: var(--smart-icon-circle-empty) } .smart-filter-panel-list-drop-down-menu.smart-input-drop-down-menu ul li span.smart-icon.smart-icon-not-null:after { content: var(--smart-icon-circle) } .smart-filter-panel[right-to-left] { direction: rtl } .smart-filter-panel[right-to-left] smart-tree.standard-excel smart-tree-item:not([level="1"])>.smart-tree-item-label-container { margin-right: -30px; margin-left: unset } smart-gantt-chart { display: block; width: var(--smart-gantt-chart-default-width); height: var(--smart-gantt-chart-default-height); contain: content } .smart-gantt-chart .smart-splitter, smart-gantt-chart .smart-splitter { width: 100%; height: 100%; border: none; border-radius: initial } .smart-gantt-chart smart-table, smart-gantt-chart smart-table { width: 100%; height: 100%; --smart-table-row-height: var(--smart-gantt-chart-task-default-height); --smart-table-header-footer-height: var(--smart-gantt-chart-filter-row-height) } .smart-gantt-chart.smart-container, smart-gantt-chart>.smart-container { overflow: hidden; --smart-scroll-bar-default-height: 100%; --smart-scroll-bar-default-width: 100%; --smart-gantt-chart-task-timeline-content-height: calc(2 * var(--smart-gantt-chart-task-default-height)); --smart-gantt-chart-task-splitter-bar-fit-size: var(--smart-gantt-chart-task-timeline-content-height); --smart-gantt-chart-resource-splitter-bar-fit-size: calc(var(--smart-gantt-chart-resource-timeline-content-height) + var(--smart-gantt-chart-task-default-height)); --smart-gantt-chart-baseline-size: calc(var(--smart-gantt-chart-task-default-height) / var(--smart-gantt-chart-baseline-proportion)) } .smart-gantt-chart.smart-container:not(.hscroll), smart-gantt-chart>.smart-container:not(.hscroll) { margin-bottom: -1px } .smart-gantt-chart.smart-container:not(.hscroll)[show-resource-panel], smart-gantt-chart>.smart-container:not(.hscroll)[show-resource-panel] { margin-bottom: -4px } .smart-gantt-chart .smart-task-splitter>.smart-resize-trigger-container, .smart-gantt-chart.smart-container .smart-splitter>.smart-resize-trigger-container, smart-gantt-chart>.smart-container .smart-splitter>.smart-resize-trigger-container { margin-bottom: -2px } .smart-gantt-chart smart-splitter { --smart-splitter-bar-size: 5px } .smart-gantt-chart .smart-task-splitter smart-splitter-item>.smart-container, .smart-gantt-chart .smart-task-splitter smart-splitter-item>.smart-container>.smart-content { overflow: hidden } .smart-gantt-chart smart-splitter-bar .smart-splitter-resize-button { display: none } .smart-gantt-chart smart-scroll-viewer { width: 100%; height: 100%; border: none; padding: initial } .smart-gantt-chart .smart-table { --smart-table-cell-padding: var(--smart-gantt-chart-task-bar-fill-padding) } .smart-gantt-chart .smart-table.smart-task-table { --smart-table-column-header-height: calc(2 * var(--smart-gantt-chart-task-default-height) - calc(var(--smart-border-width) / 2)) } .smart-gantt-chart .smart-table.smart-resource-table { --smart-table-column-header-height: calc(var(--smart-gantt-chart-task-default-height) - calc(var(--smart-border-width) / 2)) } .smart-gantt-chart .smart-table>.smart-container { border: initial } .smart-gantt-chart .smart-table[hide-selection-column] tr td { background: inherit } .smart-gantt-chart .smart-table[hide-selection-column] tr[aria-selected=true] td { background: initial } .smart-gantt-chart .smart-table thead tr th, .smart-gantt-chart .smart-table thead tr th.smart-table-select-all.freeze-near { background-color: var(--smart-surface); color: var(--smart-surface-color) } .smart-gantt-chart .smart-table .smart-table-virtualization-container .smart-scroll-viewer-content-container { display: block } .smart-gantt-chart .smart-table td.tree-cell>div .hierarchy-arrow::after { display: initial } .smart-gantt-chart .smart-table td div, .smart-gantt-chart .smart-table td span { line-height: inherit } .smart-gantt-chart .smart-table td.tree-cell>div div:nth-child(2) { line-height: 1rem } .smart-gantt-chart .smart-table thead tr th { border-bottom: var(--smart-border-width) solid var(--smart-border); font-size: var(--smart-font-size) } .smart-gantt-chart .smart-table tbody tr { cursor: pointer; white-space: nowrap; text-overflow: ellipsis; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none } .smart-gantt-chart .smart-table tbody tr td { line-height: 100% } .smart-gantt-chart .smart-table tbody tr[unused] td { border: initial } .smart-gantt-chart .smart-table tbody tr[focus] { border-color: var(--smart-ui-state-border-focus); background-color: var(--smart-ui-state-focus); color: var(--smart-ui-state-color-focus) } .smart-gantt-chart .smart-table tbody tr[hover] { border-color: var(--smart-ui-state-border-hover); background-color: var(--smart-ui-state-hover); color: var(--smart-ui-state-color-hover) } .smart-gantt-chart .smart-table tbody tr[aria-selected=true] { border-color: var(--smart-ui-state-border-selected); background-color: var(--smart-ui-state-selected); color: var(--smart-ui-state-color-selected) } .smart-gantt-chart .smart-table td { border-bottom: var(--smart-border-width) solid var(--smart-border); border-top: none } .smart-gantt-chart .smart-table td[data-field=overdue]::after { font-family: var(--smart-font-family-icon); font-size: 1.25em; color: var(--smart-gantt-chart-deadline-color); position: absolute; left: 0; top: 0; height: 100%; display: flex; align-items: center; pointer-events: none; padding-left: var(--smart-table-cell-padding); padding-right: var(--smart-table-cell-padding) } .smart-gantt-chart .smart-table td[data-field=overdue][overdue]::after { content: var(--smart-gantt-chart-deadline-icon) } .smart-gantt-chart .smart-table[freeze-footer] .smart-table-container:focus td[focus]:after { height: 100% } @-moz-document url-prefix() { .smart-gantt-chart .smart-table.smart-task-table { --smart-table-column-header-height: calc(2 * var(--smart-gantt-chart-task-default-height)) } .smart-gantt-chart .smart-table.smart-resource-table { --smart-table-column-header-height: var(--smart-gantt-chart-task-default-height) } .smart-gantt-chart .smart-table[freeze-footer] .smart-table-container:focus td[focus]:after { top: 0 } } .smart-gantt-chart[group-by-resources] .smart-table tbody tr[role=group] { background: var(--smart-background); color: var(--smart-background-color); cursor: initial } .smart-gantt-chart[group-by-resources] .smart-table tbody tr[role=group] .selection-checkbox { background: var(--smart-background); color: var(--smart-background-color); cursor: initial; border-color: var(--smart-border) } .smart-gantt-chart[group-by-resources] .smart-table tbody tr[role=group] .selection-checkbox::after, .smart-gantt-chart[group-by-resources] .smart-table tbody tr[role=group] .selection-checkbox::before { content: initial } .smart-gantt-chart.smart-container, .smart-gantt-chart>.smart-container { position: relative } .smart-gantt-chart.smart-container.hscroll>smart-splitter, .smart-gantt-chart>.smart-container.hscroll>smart-splitter { height: calc(100% - var(--smart-scroll-bar-size)) } .smart-gantt-chart.smart-container>.smart-popup-window-modal, .smart-gantt-chart>.smart-container>.smart-popup-window-modal { position: absolute; opacity: .5; background-color: var(--smart-disabled); top: 0; left: 0; width: 100%; min-height: 100%; z-index: calc(var(--smart-editor-drop-down-z-index) - 1) } .smart-gantt-chart .smart-splitter>.smart-container>smart-splitter-bar>.smart-container { transform: scaleX(5); transform-origin: left } .smart-gantt-chart .smart-splitter:not([dragged]) smart-splitter-bar.smart-element { background-color: var(--smart-border) } .smart-gantt-chart .smart-splitter[orientation=horizontal]>.smart-container>smart-splitter-bar>.smart-container { transform: scaleY(2.5); transform-origin: center } .smart-gantt-chart .smart-timeline { user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; text-align: center; overflow: hidden; height: 100% } .smart-gantt-chart .smart-timeline[task-bar-hovered], .smart-gantt-chart .smart-timeline[task-bar-hovered] .smart-timeline-task.project .smart-timeline-task-fill, .smart-gantt-chart .smart-timeline[task-bar-hovered] .smart-timeline-task.task .smart-timeline-task-fill { cursor: e-resize } .smart-gantt-chart[task-filtering][hide-timeline-header-details] .smart-task-splitter .smart-timeline-view-cells .smart-timeline-view-cell { border-top: initial } .smart-gantt-chart[task-filtering][hide-timeline-header-details] .smart-task-splitter .smart-timeline-content-container { height: calc(100% - var(--smart-gantt-chart-task-default-height) - var(--smart-gantt-chart-filter-row-height)) } .smart-gantt-chart[task-filtering] .smart-task-splitter .smart-timeline-content-container { height: calc(100% - 2 * var(--smart-gantt-chart-task-default-height) - var(--smart-gantt-chart-filter-row-height)) } .smart-gantt-chart[task-filtering] .smart-task-splitter .smart-timeline-header::before { content: '' } .smart-gantt-chart[resource-filtering] .smart-resource-splitter { --smart-splitter-bar-fit-size: calc(var(--smart-gantt-chart-resource-splitter-bar-fit-size) + var(--smart-gantt-chart-filter-row-height)) } .smart-gantt-chart[resource-filtering] .smart-resource-splitter .smart-timeline-header::before, .smart-gantt-chart[task-filtering][filter-row] .smart-task-splitter .smart-timeline-header::after { content: '' } .smart-gantt-chart[task-filtering][filter-row] .smart-task-splitter .smart-timeline-header::before { content: none } .smart-gantt-chart .smart-timeline-header { position: relative; overflow: hidden; width: 100% } .smart-gantt-chart .smart-timeline-header::after, .smart-gantt-chart .smart-timeline-header::before { width: 100%; height: var(--smart-gantt-chart-filter-row-height); display: block; background: var(--smart-surface); border-bottom: var(--smart-border) solid var(--smart-border-width); box-sizing: border-box; position: sticky; left: 0 } .smart-gantt-chart .smart-timeline-header .smart-timeline-header-content { width: 100% } .smart-gantt-chart .smart-timeline-content-container { width: 100%; height: calc(100% - 2 * var(--smart-gantt-chart-task-default-height)); position: relative; overflow: hidden } .smart-gantt-chart .smart-timeline-content { width: 100%; height: 100%; position: relative } .smart-gantt-chart .smart-timeline-content:empty:after { content: 'No Items'; height: var(--smart-gantt-chart-task-default-height); display: flex; align-items: center; justify-content: center; pointer-events: none; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none } .smart-gantt-chart .smart-timeline-content .smart-timeline-task:not(.milestone)[disable-resize] .smart-task-container:after, .smart-gantt-chart .smart-timeline-content .smart-timeline-task:not(.milestone)[disable-resize]:after { content: none } .smart-gantt-chart .smart-timeline-container { display: inline-block; position: relative; width: 100%; height: 100% } .smart-gantt-chart .smart-timeline-scroll-bar { overflow: visible; position: relative; height: calc(var(--smart-scroll-bar-size)); width: 100% } .smart-gantt-chart .smart-timeline-scroll-bar:after { position: absolute; content: ''; width: 100%; height: var(--smart-scroll-bar-size); background: var(--smart-scroll-bar-background); left: 100%; top: 0 } .smart-gantt-chart .smart-timeline-scroll-bar.bottom-corner { width: calc(100% - var(--smart-scroll-bar-size)) } .smart-gantt-chart .smart-timeline-scroll-bar.smart-resource-scroll-bar[orientation=vertical] { height: calc(100% - var(--smart-gantt-chart-task-default-height)); top: var(--smart-gantt-chart-task-default-height); z-index: 1 } .smart-gantt-chart .smart-timeline-scroll-bar.smart-resource-scroll-bar[orientation=vertical]:before { top: calc(-1 * var(--smart-gantt-chart-task-default-height)); height: var(--smart-gantt-chart-task-default-height) } .smart-gantt-chart .smart-timeline-scroll-bar[orientation=vertical] { position: absolute; right: 0; top: calc(2 * var(--smart-gantt-chart-task-default-height)); height: calc(100% - 2 * var(--smart-gantt-chart-task-default-height)); width: calc(var(--smart-scroll-bar-size)) } .smart-gantt-chart .smart-timeline-scroll-bar[orientation=vertical]:before { position: absolute; width: 100%; background: var(--smart-scroll-bar-background); content: ''; left: 0; top: calc(-2 * var(--smart-gantt-chart-task-default-height)); height: calc(2 * var(--smart-gantt-chart-task-default-height)); border: 1px solid var(--smart-border); border-top: none; box-sizing: border-box } .smart-gantt-chart[show-baseline] .smart-timeline-task.milestone .smart-task-container::after, .smart-gantt-chart[show-baseline] .smart-timeline-task.milestone .smart-task-container::before { border-top: calc(calc(var(--smart-gantt-chart-task-default-height) - var(--smart-gantt-chart-baseline-size))/ 2) solid transparent; border-bottom: calc(calc(var(--smart-gantt-chart-task-default-height) - var(--smart-gantt-chart-baseline-size))/ 2) solid transparent } .smart-gantt-chart .smart-timeline-scroll-bar[orientation=vertical][disabled]:after { left: 0; height: 100% } .smart-gantt-chart[show-baseline] .smart-timeline-task { height: calc(var(--smart-gantt-chart-task-default-height) - var(--smart-gantt-chart-baseline-size)) } .smart-gantt-chart[show-baseline] .smart-timeline-task .smart-task-container { padding-bottom: calc(var(--smart-gantt-chart-task-bar-fill-padding)/ 2) } .smart-gantt-chart[show-baseline] .smart-timeline-task.milestone .smart-task-container::after { border-left: calc(calc(var(--smart-gantt-chart-task-default-height) - var(--smart-gantt-chart-baseline-size))/ 2) solid var(--smart-gantt-chart-milestone-color) } .smart-gantt-chart[show-baseline] .smart-timeline-task.milestone .smart-task-container::before { left: calc(-1 * calc(calc(var(--smart-gantt-chart-task-default-height) - var(--smart-gantt-chart-baseline-size))/ 2)); border-right: calc(calc(var(--smart-gantt-chart-task-default-height) - var(--smart-gantt-chart-baseline-size))/ 2) solid var(--smart-gantt-chart-milestone-color) } .smart-gantt-chart[show-baseline] .smart-task-connection-point { top: calc(calc(var(--smart-gantt-chart-task-default-height) - var(--smart-gantt-chart-baseline-size))/ 2) } .smart-gantt-chart[show-baseline] .smart-task-connection-point.end, .smart-gantt-chart[show-baseline] .smart-task-connection-point.start { width: calc(var(--smart-gantt-chart-task-default-height)/ 3); height: calc(var(--smart-gantt-chart-task-default-height)/ 3) } .smart-gantt-chart[show-baseline] .smart-task-connection-point.end { right: calc(-1 * var(--smart-gantt-chart-task-default-height)/ 2) } .smart-gantt-chart[show-baseline] .smart-task-connection-point.start { left: calc(-1 * var(--smart-gantt-chart-task-default-height)/ 2) } .smart-gantt-chart .smart-timeline-task { position: absolute; height: var(--smart-gantt-chart-task-default-height) } .smart-gantt-chart .smart-timeline-task:empty { height: 0 } .smart-gantt-chart .smart-timeline-task .smart-timeline-task-progress-thumb:after { content: ""; border-right: var(--smart-gantt-chart-timeline-task-progress-thumb-size) solid transparent; border-left: var(--smart-gantt-chart-timeline-task-progress-thumb-size) solid transparent; border-bottom: var(--smart-gantt-chart-timeline-task-progress-thumb-size) solid var(--smart-gantt-chart-task-thumb-color); box-shadow: 0 1px 0 0 var(--smart-gantt-chart-task-thumb-color); position: absolute; bottom: calc(-1 * var(--smart-gantt-chart-task-bar-fill-padding)/ 2); left: calc(-1 * var(--smart-gantt-chart-timeline-task-progress-thumb-size)); z-index: 1 } .smart-gantt-chart .smart-timeline-view-cells .smart-timeline-view-cell:not(:first-of-type), .smart-gantt-chart .smart-timeline-view-details .smart-timeline-view-cell:not(:first-of-type) { border-left-color: transparent } .smart-gantt-chart .smart-timeline-task:not(.milestone) .smart-task-container:after, .smart-gantt-chart .smart-timeline-task:not(.milestone):after { width: var(--smart-gantt-chart-timeline-task-resize-indicator-width); height: var(--smart-gantt-chart-timeline-task-resize-indicator-width); position: absolute; top: calc(50% - var(--smart-gantt-chart-timeline-task-resize-indicator-width)/ 2); background-color: var(--smart-gantt-chart-timeline-task-resize-indicator-color); box-shadow: 0 0 0 1px var(--smart-gantt-chart-timeline-task-resize-indicator-border-color); transform: scale(0) } .smart-gantt-chart .smart-timeline-task.task .smart-timeline-task-label { color: var(--smart-gantt-chart-task-label-color) } .smart-gantt-chart .smart-timeline-task.task[selected] .smart-timeline-task-label { color: var(--smart-gantt-chart-task-label-color-selected) } .smart-gantt-chart .smart-timeline-task.project .smart-timeline-task-label { color: var(--smart-gantt-chart-project-label-color) } .smart-gantt-chart .smart-timeline-task.project[selected] .smart-timeline-task-label { color: var(--smart-gantt-chart-project-label-color-selected) } .smart-gantt-chart .smart-timeline-task.project .smart-task-segments::before { content: initial } .smart-gantt-chart .smart-timeline-task:not(.milestone) { min-width: var(--smart-gantt-chart-timeline-task-min-width) } .smart-gantt-chart .smart-timeline-task:not(.milestone):after { content: ''; left: calc(100% - var(--smart-gantt-chart-timeline-task-resize-indicator-width)/ 2); pointer-events: none } .smart-gantt-chart .smart-timeline-task:not(.milestone) .smart-task-container:after { content: ''; left: calc(-1 * var(--smart-gantt-chart-timeline-task-resize-indicator-width)/ 2); pointer-events: none } .smart-gantt-chart .smart-timeline-task[selected]:not([disable-resize]) .smart-task-container::after, .smart-gantt-chart .smart-timeline-task[selected]:not([disable-resize]):after, .smart-gantt-chart .smart-timeline-task[selected]:not([resource-group]) .smart-timeline-task-progress-thumb { transform: scale(1) } .smart-gantt-chart .smart-timeline-task[selected]:not(.milestone) .smart-timeline-task-fill { box-shadow: var(--smart-elevation-2) } .smart-gantt-chart .smart-timeline-task[connection-point=end] .smart-task-connection-feedback { left: 100% } .smart-gantt-chart .smart-timeline-task[disable-drag] { cursor: pointer } .smart-gantt-chart .smart-timeline-task[resource-group] { cursor: initial } .smart-gantt-chart .smart-timeline-task .smart-task-segment, .smart-gantt-chart .smart-timeline-task .smart-task-segments { width: 100%; height: 100% } .smart-gantt-chart .smart-timeline-task .smart-task-segments { position: relative } .smart-gantt-chart .smart-timeline-task .smart-task-segments::before { pointer-events: none; content: ''; width: 100%; border-bottom: var(--smart-gantt-chart-segment-link-size) dashed var(--smart-gantt-chart-segment-link-color); box-sizing: border-box; position: absolute; top: calc(50% - var(--smart-gantt-chart-segment-link-size)/ 2); left: 0 } .smart-gantt-chart .smart-timeline-task .smart-task-segment { position: absolute; min-width: var(--smart-gantt-chart-timeline-task-min-width) } .smart-gantt-chart .smart-timeline-task .smart-task-segment[deadline]::after { content: attr(deadline); position: absolute; height: 100%; top: 0; left: 100%; white-space: nowrap; display: flex; align-items: center; margin-inline-start: 10px; font-size: .8em; font-weight: 600; pointer-events: none } .smart-gantt-chart .smart-timeline-view-cells:empty:after, .smart-gantt-chart .smart-timeline-view-details:empty:after { content: var(--smart-gantt-chart-header-placeholder) } .smart-gantt-chart .smart-timeline-task-progress { width: 100%; height: 100%; transform-origin: left; position: relative; pointer-events: none } .smart-gantt-chart .smart-timeline-task-progress-thumb { position: absolute; right: 0; cursor: e-resize; transform: scale(0); transform-origin: left bottom } .smart-gantt-chart .smart-timeline-task-fill { width: 100%; height: 100%; border-radius: var(--smart-gantt-chart-task-fill-border-radius); overflow: hidden } .smart-gantt-chart .smart-timeline-task-label { position: absolute; width: 100%; height: 100%; left: 0; top: 0; display: flex; align-items: center; justify-content: center; padding: var(--smart-gantt-chart-task-label-padding); font-size: inherit; font-family: inherit; pointer-events: none; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none } .smart-gantt-chart .smart-timeline-view-cells:empty, .smart-gantt-chart .smart-timeline-view-details:empty { border-bottom: var(--smart-border-width) solid var(--smart-border); justify-content: center; display: flex; background-color: var(--smart-surface); color: var(--smart-surface-color) } .smart-gantt-chart .smart-timeline-task-label>div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .smart-gantt-chart .smart-timeline-task-cells { position: relative } .smart-gantt-chart .smart-timeline-view-details { display: flex; width: 100%; height: var(--smart-gantt-chart-task-default-height) } .smart-gantt-chart .smart-timeline-view-details:empty { user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; align-items: center } .smart-gantt-chart .smart-timeline-view-details .smart-timeline-view-cell { min-width: initial; border-top: none } .smart-gantt-chart .smart-timeline-row .smart-timeline-cell, .smart-gantt-chart .smart-timeline-view-cell { padding: var(--smart-gantt-chart-task-bar-fill-padding); min-width: var(--smart-gantt-chart-timeline-cell-min-size) } .smart-gantt-chart .smart-timeline-view-cells { display: flex; width: 100%; height: var(--smart-gantt-chart-task-default-height) } .smart-gantt-chart .smart-timeline-view-cells:empty { user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; align-items: center } .smart-gantt-chart .smart-timeline-view-cells .smart-timeline-view-cell:last-of-type:after { border-right-color: transparent } .smart-gantt-chart .smart-timeline-view-cells .smart-timeline-view-cell[weekend] { background: var(--smart-gantt-chart-timeline-weekend-color) } .smart-gantt-chart .smart-timeline-view-cells .smart-timeline-view-cell[nonworking] { background: var(--smart-gantt-chart-timeline-nonworking-color) } .smart-gantt-chart .smart-timeline-view-cells div { border-bottom-color: var(--smart-border) } .smart-gantt-chart .smart-timeline-view-cell { position: absolute; display: flex; justify-content: center; align-items: center; background-color: var(--smart-surface); color: var(--smart-surface-color); border-top: var(--smart-border-width) solid var(--smart-border); border-bottom: var(--smart-border-width) solid var(--smart-border); border-left: var(--smart-border-width) solid var(--smart-border); border-right: var(--smart-border-width) solid var(--smart-border); text-overflow: ellipsis; white-space: nowrap; border-bottom-color: transparent; height: var(--smart-gantt-chart-task-default-height); width: var(--smart-gantt-chart-timeline-cell-size) } .smart-gantt-chart .smart-timeline-view-cell:first-of-type { border-left: none } .smart-gantt-chart .smart-timeline-view-cell:last-of-type { border-right: none } .smart-gantt-chart .smart-timeline-view-cell>div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; pointer-events: none } .smart-gantt-chart .smart-timeline-cells-container { width: 100% } .smart-gantt-chart .smart-timeline-deadlines-container:empty, .smart-gantt-chart .smart-timeline-indicators-container:empty, .smart-gantt-chart .smart-timeline-markers-container:empty { display: none } .smart-gantt-chart .smart-gantt-chart-date-marker { height: 100%; top: 0; position: absolute; border-left: var(--smart-gantt-chart-date-marker-width) dashed var(--smart-gantt-chart-date-marker-color); width: 0; pointer-events: none; background: var(--smart-gantt-chart-date-marker-background); color: var(--smart-gantt-chart-date-marker-color) } .smart-gantt-chart .smart-gantt-chart-date-marker .smart-gantt-chart-marker-label { position: sticky; top: var(--smart-gantt-chart-date-marker-v-offset); height: var(--smart-gantt-chart-date-marker-height); background: inherit; color: inherit; box-sizing: border-box; white-space: nowrap; display: inline-flex; align-items: center; border-radius: var(--smart-gantt-chart-task-fill-border-radius); padding: 5px; margin-inline-start: var(--smart-gantt-chart-date-marker-h-offset) } .smart-gantt-chart .smart-gantt-chart-date-marker .smart-gantt-chart-marker-label::before { content: ''; position: absolute; border-top: calc(var(--smart-gantt-chart-date-marker-height)/ 2) solid transparent; border-bottom: calc(var(--smart-gantt-chart-date-marker-height)/ 2) solid transparent; border-right: calc(var(--smart-gantt-chart-date-marker-height)/ 2) solid var(--smart-gantt-chart-date-marker-background); box-sizing: inherit; right: 100% } .smart-gantt-chart .smart-gantt-chart-task-indicator { position: absolute; height: var(--smart-gantt-chart-task-default-height); display: flex; align-items: center; white-space: nowrap } .smart-gantt-chart .smart-gantt-chart-task-indicator.icon::before { content: var(--smart-gantt-chart-indicator-icon); font-family: var(--smart-font-family-icon); font-size: var(--smart-font-size); margin-inline-end: 2.5px } .smart-gantt-chart .smart-gantt-chart-task-deadline { position: absolute; height: var(--smart-gantt-chart-task-default-height); display: inline-flex; align-items: center; justify-content: center; width: 1px } .smart-gantt-chart .smart-gantt-chart-task-deadline::before { content: var(--smart-gantt-chart-deadline-icon); font-family: var(--smart-font-family-icon); font-size: 1.25em; color: var(--smart-gantt-chart-deadline-color) } .smart-gantt-chart .smart-gantt-chart-task-baseline { position: absolute; background: var(--smart-gantt-chart-baseline-background); background-clip: content-box; border-top: calc(var(--smart-gantt-chart-task-bar-fill-padding)/ 2) solid transparent; border-bottom: var(--smart-gantt-chart-task-bar-fill-padding) solid transparent; height: var(--smart-gantt-chart-baseline-size); max-height: var(--smart-gantt-chart-task-default-height); transform: translateY(calc(var(--smart-gantt-chart-task-default-height) - var(--smart-gantt-chart-baseline-size))); pointer-events: none } .smart-gantt-chart .smart-gantt-chart-time-indicators-container { pointer-events: none } .smart-gantt-chart .smart-gantt-chart-time-indicators-container .smart-gantt-chart-current-time-indicator { position: absolute; height: 100%; width: var(--smart-gantt-chart-current-time-indicator-size); background: var(--smart-gantt-chart-current-time-indicator-background) } .smart-gantt-chart .smart-gantt-chart-time-indicators-container .smart-gantt-chart-current-time-indicator:before { position: absolute; left: calc(-1 * var(--smart-gantt-chart-current-time-indicator-arrow-size) + var(--smart-gantt-chart-current-time-indicator-size)/ 2); border-right: var(--smart-gantt-chart-current-time-indicator-arrow-size) solid transparent; border-left: var(--smart-gantt-chart-current-time-indicator-arrow-size) solid transparent; border-top: var(--smart-gantt-chart-current-time-indicator-arrow-size) solid var(--smart-gantt-chart-current-time-indicator-background) } .smart-gantt-chart .smart-gantt-chart-time-indicators-container .smart-gantt-chart-current-time-shader { position: absolute; height: 100%; background: var(--smart-gantt-chart-shader-background) } .smart-gantt-chart[current-time-indicator] .smart-gantt-chart-current-time-indicator::before { content: '' } .smart-gantt-chart[current-time-indicator] .smart-timeline-view-cell[current] { border-bottom: var(--smart-gantt-chart-current-time-indicator-header-size) solid var(--smart-gantt-chart-current-time-indicator-background) } .smart-gantt-chart .smart-timeline-row { display: flex; border-width: var(--smart-border-width); border-style: solid; border-top: initial; border-bottom-color: var(--smart-border); background: var(--smart-gantt-chart-timeline-task-background-color); border-left: none; border-right: none; position: absolute; left: 0; width: inherit; height: var(--smart-gantt-chart-task-default-height) } .smart-gantt-chart .smart-timeline-row:first-of-type { border-left-color: var(--smart-border) } .smart-gantt-chart .smart-timeline-row:last-of-type { border-right-color: var(--smart-border) } .smart-gantt-chart .smart-timeline-row[hover] { background: var(--smart-ui-state-hover) } .smart-gantt-chart .smart-timeline-row[selected] { background: var(--smart-ui-state-selected) } .smart-gantt-chart .smart-timeline-row .smart-timeline-cell { position: absolute; height: 100%; width: var(--smart-gantt-chart-timeline-cell-size) } .smart-gantt-chart .smart-timeline-row .smart-timeline-cell:not(:last-of-type) { border-right: var(--smart-border-width) solid var(--smart-border) } .smart-gantt-chart .smart-timeline-row:not([hover]):not([selected]) .smart-timeline-cell[weekend] { background: var(--smart-gantt-chart-timeline-weekend-color) } .smart-gantt-chart .smart-timeline-row:not([hover]):not([selected]) .smart-timeline-cell[nonworking] { background: var(--smart-gantt-chart-timeline-nonworking-color) } .smart-gantt-chart .smart-resource-splitter { --smart-splitter-bar-fit-size: var(--smart-gantt-chart-resource-splitter-bar-fit-size) } .smart-gantt-chart .smart-resource-splitter .smart-timeline-content { overflow: hidden; position: relative; height: calc(100% - var(--smart-gantt-chart-task-default-height)) } .smart-gantt-chart .smart-resource-splitter .smart-timeline-view-cells .smart-timeline-view-cell { border-top: none } .smart-gantt-chart .smart-resource-splitter .smart-timeline-row .smart-timeline-cell { padding: initial } .smart-gantt-chart .smart-resource-splitter-item>.smart-container>.smart-content { overflow: hidden } .smart-gantt-chart .smart-resource-splitter-item .smart-timeline-view-cells .smart-timeline-view-cell:after { height: var(--smart-gantt-chart-resource-timeline-content-height) } .smart-gantt-chart .smart-resource-splitter-item[show-header] .smart-resource-splitter { height: calc(100% - var(--smart-gantt-chart-header-height)) } .smart-gantt-chart .smart-resource-splitter-item .smart-timeline-cell:first-of-type .smart-resource-timeline-view-cell { width: 100%; left: 0 } .smart-gantt-chart .smart-resource-panel-header { width: 100%; justify-content: center; align-items: center; height: var(--smart-gantt-chart-header-height); background: var(--smart-surface); border-bottom: var(--smart-border) solid var(--smart-border-width) } .smart-gantt-chart .smart-resource-panel-header:empty { display: none } .smart-gantt-chart .smart-resource-timeline-view-cell { position: absolute; background: var(--smart-gantt-chart-timeline-task-background-color); bottom: 0; border: none; width: calc(100% + var(--smart-border-width)); left: calc(-1 * var(--smart-border-width)); height: 100%; display: flex; justify-content: center; align-items: center } .smart-gantt-chart .smart-resource-timeline-view-cell:after { content: ''; display: flex; justify-content: center; align-items: center; overflow: hidden; font-size: var(--smart-font-size); font-family: var(--smart-font-family-icon); box-sizing: border-box } .smart-gantt-chart .smart-task-panel-header:empty, .smart-gantt-chart[hide-timeline-header-details] .smart-timeline-view-details { display: none } .smart-gantt-chart .smart-resource-timeline-view-cell[load]:after { content: attr(load); transform: scale(1) rotate(0) } .smart-gantt-chart .smart-resource-timeline-view-cell.warning[load]:after { background: var(--smart-error); color: var(--smart-error-color); border-radius: 5px } .smart-gantt-chart .smart-task-container { position: relative; width: 100%; height: 100%; box-sizing: border-box; padding-top: var(--smart-gantt-chart-task-bar-fill-padding); padding-bottom: var(--smart-gantt-chart-task-bar-fill-padding) } .smart-gantt-chart .smart-task-panel-header { width: 100%; justify-content: center; align-items: center; height: var(--smart-gantt-chart-header-height); background: var(--smart-surface) } .smart-gantt-chart .smart-task-splitter { --smart-splitter-bar-fit-size: var(--smart-gantt-chart-task-splitter-bar-fit-size) } .smart-gantt-chart .smart-task-splitter-item>.smart-container>.smart-content { overflow: hidden } .smart-gantt-chart .smart-task-splitter-item[show-header] .smart-task-panel-header { border-bottom: var(--smart-border-width) solid var(--smart-border) } .smart-gantt-chart .smart-task-splitter-item[show-header] .smart-task-splitter { height: calc(100% - var(--smart-gantt-chart-header-height)) } .smart-gantt-chart .smart-task-splitter-item[show-header] .smart-timeline-view-details .smart-timeline-view-cell { border-top: initial } .smart-gantt-chart .smart-task-connection { cursor: pointer; position: absolute; border: var(--smart-gantt-chart-timeline-task-connection-width) var(--smart-gantt-chart-timeline-task-connection-style) var(--smart-gantt-chart-timeline-task-connection-color); top: 50% } .smart-gantt-chart .smart-task-connection:after { content: ''; width: 100%; height: 100%; border: inherit inherit transparent; position: absolute; border-width: 10px; top: 50%; left: 50%; transform: translate(-50%, -50%) } .smart-gantt-chart .smart-task-connection[arrow-direction]:before { content: ''; position: absolute; left: calc(100% - var(--smart-gantt-chart-timeline-task-connection-arrow-width) + 1px); top: calc(-1 * var(--smart-gantt-chart-timeline-task-connection-arrow-width)); border-top: var(--smart-gantt-chart-timeline-task-connection-arrow-width) var(--smart-gantt-chart-timeline-task-connection-arrow-type) transparent; border-bottom: var(--smart-gantt-chart-timeline-task-connection-arrow-width) var(--smart-gantt-chart-timeline-task-connection-arrow-type) transparent; border-left: var(--smart-gantt-chart-timeline-task-connection-arrow-width) var(--smart-gantt-chart-timeline-task-connection-arrow-type) var(--smart-gantt-chart-timeline-task-connection-feedback-color) } .smart-gantt-chart .smart-task-connection[arrow-direction=left]:before { left: calc(-1 * var(--smart-gantt-chart-timeline-task-connection-arrow-width)/ 2 + 1px); border-right: var(--smart-gantt-chart-timeline-task-connection-arrow-width) var(--smart-gantt-chart-timeline-task-connection-arrow-type) var(--smart-gantt-chart-timeline-task-connection-feedback-color); border-left: none } .smart-gantt-chart .smart-task-connection[hover] { border-color: var(--smart-gantt-chart-timeline-task-connection-color-hover); box-shadow: 0 0 2.5px 0 var(--smart-gantt-chart-timeline-task-connection-color) } .smart-gantt-chart .smart-task-connection[hover]:before { border-left-color: var(--smart-gantt-chart-timeline-task-connection-color-hover); border-right-color: var(--smart-gantt-chart-timeline-task-connection-color-hover) } .smart-gantt-chart .smart-task-connection-point { cursor: pointer; position: absolute; border: 1px solid #A9A9A9; border-radius: 50%; width: calc(var(--smart-gantt-chart-task-default-height)/ 2); height: calc(var(--smart-gantt-chart-task-default-height)/ 2); top: calc(var(--smart-gantt-chart-task-default-height)/ 2); transform: scale(0); background-color: #DEDEDE } .smart-gantt-chart .smart-task-connection-point.start { left: calc(-1 * var(--smart-gantt-chart-task-default-height)/ 1.5) } .smart-gantt-chart .smart-task-connection-point.end { right: calc(-1 * var(--smart-gantt-chart-task-default-height)/ 1.5) } .smart-gantt-chart .smart-task-connection-feedback { position: absolute; top: 50%; transform-origin: left; border: var(--smart-gantt-chart-timeline-task-connection-feedback-width) var(--smart-gantt-chart-timeline-task-connection-feedback-style) var(--smart-gantt-chart-timeline-task-connection-feedback-color); z-index: 1; pointer-events: none } .smart-gantt-chart .smart-task-connection-feedback:before { content: ''; position: absolute; left: calc(100% - var(--smart-gantt-chart-timeline-task-connection-arrow-width) + 1px); top: calc(-1 * var(--smart-gantt-chart-timeline-task-connection-arrow-width)); border-top: var(--smart-gantt-chart-timeline-task-connection-arrow-width) var(--smart-gantt-chart-timeline-task-connection-arrow-type) transparent; border-bottom: var(--smart-gantt-chart-timeline-task-connection-arrow-width) var(--smart-gantt-chart-timeline-task-connection-arrow-type) transparent; border-left: var(--smart-gantt-chart-timeline-task-connection-arrow-width) var(--smart-gantt-chart-timeline-task-connection-arrow-type) var(--smart-gantt-chart-timeline-task-connection-feedback-color) } .smart-gantt-chart .milestone .smart-task-connection-feedback, .smart-gantt-chart .milestone .smart-task-container:before { left: calc(-1 * var(--smart-gantt-chart-task-default-height)/ 2) } .smart-gantt-chart .smart-task-bar-limiter { position: absolute; top: 0; height: 100%; width: 1px } .smart-gantt-chart .smart-task-bar-limiter.min { border: var(--smart-border-width) dashed #90ee90 } .smart-gantt-chart .smart-task-bar-limiter.max { border: var(--smart-border-width) dashed red } .smart-gantt-chart .smart-task-bar-limiter.max-date, .smart-gantt-chart .smart-task-bar-limiter.min-date { background-image: linear-gradient(135deg, rgba(255, 0, 0, .2) 25%, transparent 25%, transparent 50%, rgba(255, 0, 0, .2) 50%, rgba(255, 0, 0, .2) 75%, transparent 75%, transparent); background-size: 1rem 1rem; border: 1px solid #fff } .smart-gantt-chart .milestone .smart-task-container:after, .smart-gantt-chart .milestone .smart-task-container:before { border-top: calc(var(--smart-gantt-chart-task-default-height)/ 2) solid transparent; border-bottom: calc(var(--smart-gantt-chart-task-default-height)/ 2) solid transparent } .smart-gantt-chart .smart-task-bar-limiter.max-date { right: 0 } .smart-gantt-chart .milestone { height: var(--smart-gantt-chart-task-default-height); padding: initial } .smart-gantt-chart .milestone .smart-task-container { padding: 0 } .smart-gantt-chart .milestone .smart-task-container:after, .smart-gantt-chart .milestone .smart-task-container:before { content: ""; position: absolute; box-sizing: border-box; top: 0 } .smart-gantt-chart .milestone .smart-task-container:before { border-right: calc(var(--smart-gantt-chart-task-default-height)/ 2) solid var(--smart-gantt-chart-milestone-color) } .smart-gantt-chart .milestone .smart-task-container:after { border-left: calc(var(--smart-gantt-chart-task-default-height)/ 2) solid var(--smart-gantt-chart-milestone-color) } .smart-gantt-chart .milestone .smart-task-connection-point.start { transform: translateX(calc(-1 * var(--smart-gantt-chart-task-default-height)/ 2)) scale(0) } .smart-gantt-chart .milestone .smart-task-connection-point.end { transform: translateX(calc(var(--smart-gantt-chart-task-default-height)/ 2)) scale(0) } .smart-gantt-chart .milestone[connection-point=end] .smart-task-connection-feedback { left: calc(100% + var(--smart-gantt-chart-task-default-height)/ 2) } .smart-gantt-chart .milestone .smart-task-segment { min-width: initial } .smart-gantt-chart .project .smart-timeline-task-fill { background: var(--smart-gantt-chart-project-color) } .smart-gantt-chart .project .smart-timeline-task-progress { background: var(--smart-gantt-chart-project-progress-color) } .smart-gantt-chart .task .smart-timeline-task-fill { background: var(--smart-gantt-chart-task-color) } .smart-gantt-chart .task .smart-timeline-task-progress { background: var(--smart-gantt-chart-task-progress-color) } .smart-gantt-chart:not([disable-task-drag]) .smart-timeline-task.milestone .smart-task-container::after, .smart-gantt-chart:not([disable-task-drag]) .smart-timeline-task.milestone .smart-task-container::before, .smart-gantt-chart:not([disable-task-drag]) .smart-timeline-task:not([disable-drag]) .smart-task-segment:not([disable-drag]) { cursor: move } .smart-gantt-chart:not([dragged]):not([resized]) .smart-timeline-task[hover]:not([resource-group]) .smart-task-connection-point, .smart-gantt-chart:not([dragged]):not([resized]) .smart-timeline-task[selected]:not([resource-group]) .smart-task-connection-point { transform: translateY(-50%) scale(1) } .smart-gantt-chart:not([dragged]):not([resized]):not([right-to-left])[show-baseline] .smart-timeline-task.milestone[hover] .smart-task-connection-point.start, .smart-gantt-chart:not([dragged]):not([resized]):not([right-to-left])[show-baseline] .smart-timeline-task.milestone[selected] .smart-task-connection-point.start { transform: translate(calc(-1 * var(--smart-gantt-chart-task-default-height)/ 4), -50%) scale(1) } .smart-gantt-chart:not([dragged]):not([resized]):not([right-to-left])[show-baseline] .smart-timeline-task.milestone[hover] .smart-task-connection-point.end, .smart-gantt-chart:not([dragged]):not([resized]):not([right-to-left])[show-baseline] .smart-timeline-task.milestone[selected] .smart-task-connection-point.end { transform: translate(calc(1 * var(--smart-gantt-chart-task-default-height)/ 4), -50%) scale(1) } .smart-gantt-chart:not([dragged]):not([resized]):not([right-to-left]) .smart-timeline-task.milestone[hover] .smart-task-connection-point.start, .smart-gantt-chart:not([dragged]):not([resized]):not([right-to-left]) .smart-timeline-task.milestone[selected] .smart-task-connection-point.start { transform: translate(calc(-1 * var(--smart-gantt-chart-task-default-height)/ 2), -50%) scale(1) } .smart-gantt-chart:not([dragged]):not([resized]):not([right-to-left]) .smart-timeline-task.milestone[hover] .smart-task-connection-point.end, .smart-gantt-chart:not([dragged]):not([resized]):not([right-to-left]) .smart-timeline-task.milestone[selected] .smart-task-connection-point.end { transform: translate(calc(1 * var(--smart-gantt-chart-task-default-height)/ 2), -50%) scale(1) } .smart-gantt-chart:not([disable-task-progress-change]) .smart-timeline-task .smart-timeline-task-progress-thumb:after { cursor: pointer } .smart-gantt-chart:not([inverted]) .smart-timeline-scroll-bar[orientation=vertical]::before { border-right: none } .smart-gantt-chart:not([resource-timeline-mode=histogram]) .smart-resource-timeline-view-cell:not([load])::after { transform: scale(0) rotate(360deg) } .smart-gantt-chart:not([resource-timeline-mode=histogram]) .smart-resource-timeline-view-cell::after { height: calc(var(--smart-gantt-chart-task-default-height) - var(--smart-gantt-chart-task-bar-fill-padding)); width: calc(var(--smart-gantt-chart-task-default-height) - var(--smart-gantt-chart-task-bar-fill-padding)); border-radius: 50%; background: var(--smart-success); color: var(--smart-success-color); line-height: 100% } .smart-gantt-chart:not([resource-timeline-mode=histogram]) .smart-timeline-row:first-of-type .smart-resource-timeline-view-cell { border-top: none } .smart-gantt-chart[resource-timeline-mode=histogram] .smart-resource-timeline-view-cell { border: var(--smart-border-width) solid var(--smart-primary); border-bottom: none; height: 0; padding: 0; background: rgba(var(--smart-primary-rgb), .15) } .smart-gantt-chart[resource-timeline-mode=histogram] .smart-resource-timeline-view-cell:after { width: 100%; height: calc(var(--smart-gantt-chart-task-default-height) - 2px); bottom: 0 } .smart-gantt-chart[resource-timeline-mode=histogram] .smart-resource-timeline-view-cell:not([load]):after { content: '-' } .smart-gantt-chart[resource-timeline-mode=histogram] .smart-resource-timeline-view-cell.hide-left-border:before, .smart-gantt-chart[resource-timeline-mode=histogram] .smart-resource-timeline-view-cell.hide-right-border:before { width: 100%; content: ''; position: absolute; height: 100%; bottom: 0; z-index: 1 } .smart-gantt-chart[resource-timeline-mode=histogram] .smart-resource-timeline-view-cell.hide-left-border.warning:before, .smart-gantt-chart[resource-timeline-mode=histogram] .smart-resource-timeline-view-cell.hide-right-border.warning:before { z-index: initial; left: initial } .smart-gantt-chart[resource-timeline-mode=histogram] .smart-resource-timeline-view-cell.hide-right-border { border-right: none } .smart-gantt-chart[resource-timeline-mode=histogram] .smart-resource-timeline-view-cell.hide-right-border:before { border-right: 1px solid var(--smart-border); left: 0 } .smart-gantt-chart[resource-timeline-mode=histogram] .smart-resource-timeline-view-cell.hide-left-border { border-left: none } .smart-gantt-chart[resource-timeline-mode=histogram] .smart-resource-timeline-view-cell.hide-left-border:before { border-left: 1px solid var(--smart-border); left: -1px } .smart-gantt-chart[resource-timeline-mode=histogram] .smart-resource-timeline-view-cell[load] { border-bottom: none; border-top: var(--smart-border-width) solid var(--smart-primary) } .smart-gantt-chart[resource-timeline-mode=histogram] .smart-resource-timeline-view-cell.warning[load]::after { border-radius: initial } .smart-gantt-chart:not([animation=none]) .smart-resource-timeline-view-cell[load]:after { transition: transform .2s cubic-bezier(.4, 0, .6, 1), border-radius .2s cubic-bezier(.4, 0, .6, 1) } .smart-gantt-chart:not([animation=none])[resource-timeline-mode=histogram] .smart-resource-timeline-view-cell { transition: height .2s cubic-bezier(.4, 0, .6, 1) } .smart-gantt-chart:not([animation=none])[show-progress-label] .smart-timeline-task-progress::after { transition: color .2s ease-in-out } .smart-gantt-chart.smart-container.vscroll .smart-timeline, .smart-gantt-chart>.smart-container.vscroll .smart-timeline { width: calc(100% - var(--smart-scroll-bar-size)) } .smart-gantt-chart[inverted] .smart-timeline-scroll-bar[orientation=vertical] { right: initial } .smart-gantt-chart[inverted] .smart-timeline-scroll-bar[orientation=vertical]:before { border-left: none } .smart-gantt-chart[inverted].smart-container.vscroll .smart-timeline, .smart-gantt-chart[inverted]>.smart-container.vscroll .smart-timeline { margin-left: var(--smart-scroll-bar-size) } .smart-gantt-chart[inverted].smart-container.vscroll .smart-timeline-scroll-bar:not([orientation=vertical]), .smart-gantt-chart[inverted]>.smart-container.vscroll .smart-timeline-scroll-bar:not([orientation=vertical]) { left: calc(var(--smart-scroll-bar-size)) } .smart-gantt-chart[inverted] .smart-timeline-scroll-bar:after { width: calc(var(--smart-scroll-bar-size)); left: calc(-1 * var(--smart-scroll-bar-size)) } .smart-gantt-chart[hide-timeline-header-details].smart-container, .smart-gantt-chart[hide-timeline-header-details]>.smart-container { --smart-gantt-chart-task-timeline-content-height: var(--smart-gantt-chart-task-default-height) } .smart-gantt-chart[hide-timeline-header-details] .smart-task-splitter-item[show-header] .smart-timeline-view-cell { border-top: none } .smart-gantt-chart[hide-timeline-header-details] .smart-timeline-view-cells { height: var(--smart-gantt-chart-task-default-height) } .smart-gantt-chart[hide-timeline-header-details] .smart-timeline-view-cells .smart-timeline-view-cell { border-top: initial } .smart-gantt-chart[hide-timeline-header-details] .smart-table { --smart-table-column-header-height: calc(var(--smart-gantt-chart-task-default-height) - var(--smart-border-width)) } .smart-gantt-chart[hide-timeline-header-details] .smart-timeline-content-container { height: calc(100% - var(--smart-gantt-chart-task-default-height)) } .smart-gantt-chart[hide-timeline-header-details] .smart-timeline-scroll-bar[orientation=vertical] { top: var(--smart-gantt-chart-task-default-height); height: calc(100% - var(--smart-gantt-chart-task-default-height)) } .smart-gantt-chart[hide-timeline-header-details] .smart-timeline-scroll-bar[orientation=vertical]:before { top: calc(-1 * var(--smart-gantt-chart-task-default-height)); height: var(--smart-gantt-chart-task-default-height) } .smart-gantt-chart[show-progress-label] .smart-timeline-task-progress[value]:after { display: flex; height: 100%; content: attr(value); align-items: center; padding: var(--smart-gantt-chart-progress-label-padding); color: var(--smart-gantt-chart-task-label-color); font-weight: var(--smart-font-weight); font-size: var(--smart-font-size) } .smart-gantt-chart[show-progress-label] .project .smart-task-segment[show-progress-label] .smart-timeline-task-label, .smart-gantt-chart[show-progress-label] .task .smart-task-segment[show-progress-label] .smart-timeline-task-label { padding-left: var(--smart-gantt-chart-progress-label-width) } .smart-gantt-chart[show-progress-label] [selected] .smart-timeline-task-progress::after { color: var(--smart-gantt-chart-task-label-color-selected) } .smart-gantt-chart[show-progress-label] .project .smart-timeline-task-progress::after { color: var(--smart-gantt-chart-project-label-color) } .smart-gantt-chart[show-progress-label] .project[selected] .smart-timeline-task-progress::after { color: var(--smart-gantt-chart-project-label-color-selected) } .smart-gantt-chart[connecting-task] .smart-task-connection { pointer-events: none } .smart-gantt-chart[auto-schedule][auto-schedule-strict-mode] .smart-timeline-task.milestone[connected] .smart-task-container::after, .smart-gantt-chart[auto-schedule][auto-schedule-strict-mode] .smart-timeline-task.milestone[connected] .smart-task-container::before, .smart-gantt-chart[auto-schedule][auto-schedule-strict-mode] .smart-timeline:not([task-bar-hovered]) .smart-timeline-task[connected] .smart-timeline-task-fill { cursor: initial } .smart-gantt-chart[dragged], .smart-gantt-chart[resized] { touch-action: none; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none } .smart-gantt-chart[modal] { pointer-events: none } .smart-window.smart-gantt-chart-popup-window { --smart-window-header-height: var(--smart-gantt-chart-popup-window-header-height); --smart-window-footer-height: var(--smart-gantt-chart-popup-window-footer-height); --smart-window-header-footer-padding: 10px; --smart-window-default-height: auto; --smart-window-header-background: transparent; --smart-window-content-padding: 10px; min-height: 50px; max-width: 97vw; max-height: 97vh } .smart-window.smart-gantt-chart-popup-window .smart-content-container>.smart-content { align-items: initial } .smart-window.smart-gantt-chart-popup-window .smart-content-container>.smart-footer smart-button { width: 100%; height: 100%; --smart-button-padding: 0.2rem } .smart-window.smart-gantt-chart-popup-window .smart-popup-window-button.ok { grid-area: buttonOk } .smart-window.smart-gantt-chart-popup-window .smart-popup-window-button.cancel { grid-area: buttonCancel } .smart-window.smart-gantt-chart-popup-window .smart-popup-window-button.cancel .smart-icon::after { content: var(--smart-icon-cancel) } .smart-window.smart-gantt-chart-popup-window .smart-popup-window-button.delete { grid-area: buttonDelete } .smart-window.smart-gantt-chart-popup-window .smart-popup-window-button.delete .smart-icon::after { content: var(--smart-icon-delete) } .smart-window.smart-gantt-chart-popup-window .smart-tabs { min-height: initial; height: 100%; width: 100% } .smart-window.smart-gantt-chart-popup-window .smart-tabs .smart-tabs-content-section, .smart-window.smart-gantt-chart-popup-window .smart-tabs .smart-tabs-header-section { border: initial } .smart-window.smart-gantt-chart-popup-window .smart-tabs .smart-tabs-header-section { background: inherit } .smart-window.smart-gantt-chart-popup-window .smart-tabs .smart-tab-item>.smart-container { padding: 10px } .smart-window.smart-gantt-chart-popup-window .smart-gantt-chart-popup-window-editor { display: grid; grid-column-gap: 10px; grid-row-gap: 10px; flex: calc(50% - 10px) } .smart-window.smart-gantt-chart-popup-window .smart-gantt-chart-popup-window-editor .smart-gantt-chart-label-container { display: flex; justify-content: space-between; align-items: center } .smart-window.smart-gantt-chart-popup-window .smart-gantt-chart-popup-window-editor .smart-popup-window-editor-toggle { text-align: center; display: inline-flex; vertical-align: middle; cursor: pointer; letter-spacing: .08929em; overflow: hidden; border-color: var(--smart-border); border-top-left-radius: var(--smart-border-top-left-radius); border-top-right-radius: var(--smart-border-top-right-radius); border-bottom-left-radius: var(--smart-border-bottom-left-radius); border-bottom-right-radius: var(--smart-border-bottom-right-radius); border-width: var(--smart-border-width); border-style: solid; font-weight: 500; padding: 5px 20px; -webkit-font-smoothing: antialiased; opacity: var(--smart-button-opacity); white-space: nowrap; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none } .smart-window.smart-gantt-chart-popup-window .smart-gantt-chart-popup-window-editor .smart-popup-window-editor-toggle:hover { color: var(--smart-ui-state-color-hover); border-color: var(--smart-ui-state-border-hover); background-color: var(--smart-ui-state-hover) } .smart-window.smart-gantt-chart-popup-window .smart-gantt-chart-popup-window-editor .smart-popup-window-editor-toggle:active { color: var(--smart-ui-state-color-active); border-color: var(--smart-ui-state-border-active); background-color: var(--smart-ui-state-active) } .smart-window.smart-gantt-chart-popup-window .smart-gantt-chart-popup-window-editor .smart-date-time-picker, .smart-window.smart-gantt-chart-popup-window .smart-gantt-chart-popup-window-editor .smart-drop-down-list { width: 100% } .smart-window.smart-gantt-chart-popup-window .smart-gantt-chart-popup-window-editor>b { text-align: center } .smart-window.smart-gantt-chart-popup-window .smart-gantt-chart-popup-window-editor input { height: var(--smart-editor-height) } .smart-window.smart-task-popup-window { --smart-window-default-width: var(--smart-gantt-chart-task-popup-window-default-width) } .smart-window.smart-task-popup-window .smart-content-container>.smart-footer { display: grid; grid-template-columns: 23% 23% 23% 23%; grid-column-gap: 2%; grid-template-areas: "buttonOk buttonCancel . buttonDelete" } .smart-window.smart-task-popup-window .smart-content-container>.smart-footer .smart-icon { position: relative; height: 100%; font-family: var(--smart-font-family-icon); font-size: 18px; margin-right: 2.5px } .smart-window.smart-task-popup-window .smart-popup-window-button.ok .smart-icon::after { content: var(--smart-icon-check) } .smart-window.smart-task-popup-window .smart-tab-item[value=general]>.smart-container { display: flex; grid-row-gap: 10px; grid-column-gap: 10px; flex-wrap: wrap } .smart-window.smart-task-popup-window .smart-tab-item .smart-table { --smart-table-column-header-height: 40px; --smart-table-row-height: 35px; width: 100%; height: 100% } .smart-window.smart-task-popup-window .smart-tab-item .smart-table th { font-weight: 600 } .smart-window.smart-task-popup-window .smart-tab-item .smart-gantt-window-table-buttons { display: grid; justify-content: flex-end; grid-template-columns: repeat(2, auto); grid-column-gap: 5px; margin-bottom: 5px } .smart-window.smart-task-popup-window .smart-tab-item .smart-gantt-window-table-buttons smart-button { --smart-button-padding: 8px 16px 8px 8px; border: initial } .smart-window.smart-task-popup-window .smart-tab-item .smart-gantt-window-table-buttons smart-button button::before { display: inline-flex; justify-content: center; align-items: center; box-sizing: border-box; font-family: var(--smart-font-family-icon); font-size: var(--smart-font-size); padding-right: 5px } .smart-window.smart-task-popup-window .smart-tab-item .smart-gantt-window-table-buttons smart-button[action=add] button::before { content: var(--smart-icon-plus) } .smart-window.smart-task-popup-window .smart-tab-item .smart-gantt-window-table-buttons smart-button[action=delete] button::before { content: var(--smart-icon-delete) } .smart-window.smart-task-popup-window .smart-tab-item .smart-gantt-window-validation-message { color: var(--smart-error); font-style: italic; margin-top: 5px; display: inline-flex; white-space: pre-wrap } .smart-window.smart-task-popup-window .smart-tab-item .smart-gantt-window-validation-message:empty { display: none } .smart-confirm-popup-window { --smart-window-default-width: var(--smart-gantt-chart-confirm-popup-window-default-width) } .smart-connection-popup-window { --smart-window-default-width: var(--smart-gantt-chart-connection-popup-window-default-width) } .smart-confirm-popup-window .smart-content-container>.smart-content, .smart-connection-popup-window .smart-content-container>.smart-content { justify-content: center } .smart-confirm-popup-window .smart-content-container>.smart-footer, .smart-connection-popup-window .smart-content-container>.smart-footer { display: grid; grid-template-columns: 49% 49%; grid-column-gap: 2%; grid-template-areas: "buttonOk buttonCancel" } @media not all and (min-resolution:0.001dpcm) { .smart-confirm-popup-window .smart-content-container>.smart-footer, .smart-connection-popup-window .smart-content-container>.smart-footer { align-content: start } } .smart-confirm-popup-window .smart-gantt-chart-popup-window-editor, .smart-connection-popup-window .smart-gantt-chart-popup-window-editor { justify-items: center } .smart-gantt-chart-popup-window-editor .smart-input[disabled] { opacity: .55; cursor: default; pointer-events: none; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none } .smart-gantt-chart-tooltip { --smart-tooltip-padding: 10px } .smart-gantt-chart-tooltip[visible] { pointer-events: none } .smart-gantt-chart-tooltip .smart-tooltip-content { flex-direction: column; text-align: left; white-space: nowrap } .smart-gantt-chart-tooltip .smart-tooltip-content label:not(:first-of-type) { margin-top: 5px } .smart-gantt-chart[right-to-left] .smart-timeline-task-label { direction: rtl } .smart-gantt-chart[right-to-left] .milestone .smart-task-container { direction: initial } .smart-gantt-chart[right-to-left]>.smart-container.vscroll .smart-timeline-scroll-bar:not([orientation=vertical]) { left: calc(var(--smart-scroll-bar-size)) } .smart-gantt-chart[right-to-left]>.smart-container.vscroll .smart-timeline { margin-left: var(--smart-scroll-bar-size) } .smart-gantt-chart[right-to-left] .smart-timeline-view-cell { direction: rtl } .smart-gantt-chart[right-to-left] .smart-timeline-view-cell:last-of-type { border-right: var(--smart-border-width) solid var(--smart-border) } .smart-gantt-chart[right-to-left] .smart-timeline-view-cell:first-of-type { border-right: none; border-left: var(--smart-border-width) solid transparent } .smart-gantt-chart[right-to-left] .smart-timeline-row { left: initial; right: 0 } .smart-gantt-chart[right-to-left] .smart-timeline-scroll-bar:after, .smart-gantt-chart[right-to-left] .smart-timeline-task[connection-point=end] .smart-task-connection-feedback { right: 100%; left: initial } .smart-gantt-chart[right-to-left] .smart-timeline-row .smart-timeline-cell:first-of-type { border-right: initial } .smart-gantt-chart[right-to-left] .smart-timeline-row .smart-timeline-cell:not(:first-of-type) { border-right: var(--smart-border-width) solid var(--smart-border) } .smart-gantt-chart[right-to-left] .smart-timeline-scroll-bar[orientation=vertical]:after { left: calc(-1 * var(--smart-scroll-bar-size)) } .smart-gantt-chart[right-to-left] .smart-task-connection-point.end { left: calc(-1 * var(--smart-gantt-chart-task-default-height)/ 1.5); right: initial } .smart-gantt-chart[right-to-left] .smart-task-connection-point.start { right: calc(-1 * var(--smart-gantt-chart-task-default-height)/ 1.5); left: initial } .smart-gantt-chart[right-to-left] .smart-task-connection-feedback { transform-origin: right } .smart-gantt-chart[right-to-left] .smart-task-connection-feedback:before { left: initial; right: calc(100% - var(--smart-gantt-chart-timeline-task-connection-arrow-width) + 1px); border-right: var(--smart-gantt-chart-timeline-task-connection-arrow-width) var(--smart-gantt-chart-timeline-task-connection-arrow-type) var(--smart-gantt-chart-timeline-task-connection-feedback-color); border-left: initial } .smart-gantt-chart[right-to-left] .smart-task-bar-limiter.max-date, .smart-gantt-chart[right-to-left] .smart-task-bar-limiter.min-date { right: var(--smart-gantt-chart-timeline-column-border-width); left: initial } .smart-gantt-chart[right-to-left] .smart-task-bar-limiter.max-date { left: 0 } .smart-gantt-chart[right-to-left] .milestone .smart-task-connection-point.end { left: calc(-1 * var(--smart-gantt-chart-task-default-height) * 1.15); right: initial } .smart-gantt-chart[right-to-left] .milestone .smart-task-connection-point.start { right: calc(-1 * var(--smart-gantt-chart-task-default-height) * 1.15); left: initial } .smart-gantt-chart[right-to-left] .milestone .smart-task-connection-feedback { right: calc(-1 * var(--smart-gantt-chart-task-default-height)/ 2); left: initial } .smart-gantt-chart[right-to-left] .milestone[connection-point=end] .smart-task-connection-feedback { right: calc(100% + var(--smart-gantt-chart-task-default-height)/ 2) } .smart-gantt-chart[right-to-left][show-baseline] .smart-task-connection-point.end { left: calc(-1 * var(--smart-gantt-chart-task-default-height)/ 2) } .smart-gantt-chart[right-to-left][show-baseline] .smart-task-connection-point.start { right: calc(-1 * var(--smart-gantt-chart-task-default-height)/ 2) } .smart-gantt-chart[right-to-left][show-baseline] .milestone .smart-task-connection-point.end { left: calc(-1 * var(--smart-gantt-chart-task-default-height) * .75) } .smart-gantt-chart[right-to-left][show-baseline] .milestone .smart-task-connection-point.start { right: calc(-1 * var(--smart-gantt-chart-task-default-height) * .75) } .smart-gantt-chart[right-to-left]:not([inverted]) .smart-timeline-scroll-bar[orientation=vertical] { right: initial; left: 0 } .smart-gantt-chart[right-to-left]:not([inverted]) .smart-timeline-scroll-bar[orientation=vertical]:before { border-left: none; border-right: 1px solid var(--smart-border) } .smart-gantt-chart[right-to-left][inverted]>.smart-container.vscroll .smart-timeline { margin-right: var(--smart-scroll-bar-size) } .smart-gantt-chart[right-to-left][inverted]>.smart-container.vscroll .smart-timeline-scroll-bar:not([orientation=vertical]) { left: initial } .smart-gantt-chart[right-to-left][inverted] .smart-timeline-scroll-bar:after { right: calc(-1 * var(--smart-scroll-bar-size)) } .smart-gantt-chart[right-to-left][inverted] .smart-timeline-scroll-bar[orientation=vertical] { right: 0 } .smart-gantt-chart[right-to-left][inverted] .smart-timeline-scroll-bar[orientation=vertical]:before { border-right: none; border-left: 1px solid var(--smart-border) } .smart-window.smart-task-popup-window .smart-tab-item[right-to-left]>.smart-container>.smart-footer .smart-icon { margin-left: 2.5px } smart-gauge { display: block; width: var(--smart-gauge-default-width); height: var(--smart-gauge-default-height); min-width: 125px; min-height: 125px; fill: var(--smart-background-color) } smart-gauge:focus { outline: 0 } smart-gauge.smart-element { border: none } smart-gauge[disabled] { user-select: none } smart-gauge[size-mode=auto] { min-height: initial } .smart-gauge:focus .smart-needle, .smart-gauge:focus .smart-needle-central-circle { fill: var(--smart-primary) } .smart-gauge .smart-container, .smart-gauge.smart-container { position: relative; border-radius: 50% } .smart-gauge .drawContainer>svg { fill: var(--smart-gauge-label-fill-state); stroke: var(--smart-gauge-label-stroke) } .smart-gauge .smart-needle, .smart-gauge .smart-needle-central-circle { fill: var(--smart-background-color) } .smart-gauge .smart-svg-container { width: 100%; height: 100%; touch-action: none } .smart-gauge .smart-tick { stroke: var(--smart-border); stroke-width: 1px; width: 15px; pointer-events: none } .smart-gauge .smart-tick-minor { width: 5px } .smart-gauge .smart-needle { width: 20px; height: 110px } .smart-gauge .smart-track { width: 15px; stroke: var(--smart-border); stroke-width: 2px; fill: var(--smart-background) } .smart-gauge .smart-value { stroke: var(--smart-ui-state-border-active); stroke-width: 2px; fill: var(--smart-ui-state-active) } .smart-gauge .smart-line { stroke: var(--smart-background-color); stroke-width: 5px } .smart-gauge .smart-range { width: 75px; fill: #D8D8D8 } .smart-gauge .smart-digital-display-container { width: 100%; height: 100%; position: absolute; left: 0; top: 0; pointer-events: none } .smart-gauge .smart-digital-display { --smart-numeric-text-box-background: transparent; --smart-numeric-text-box-text-align: center; position: absolute; display: none; width: 80px; height: auto; top: 75%; left: 50%; transform: translate(-50%, -50%); color: #000; font-size: inherit; pointer-events: initial } .smart-gauge[dragged], .smart-gauge[dragged] .smart-label { cursor: pointer } .smart-gauge[analog-display-type=fill][ticks-position=track] .smart-tick, .smart-gauge[analog-display-type=line][ticks-position=track] .smart-tick { stroke: #F2F2F2 } .smart-gauge[labels-visibility=endPoints] .smart-label-middle, .smart-gauge[ticks-visibility=major] .smart-tick-minor { visibility: hidden } .smart-gauge[show-ranges][ranges] .smart-track { opacity: 0 } .smart-gauge[show-unit] .smart-digital-display { --smart-numeric-text-box-text-align: right } .smart-gauge[show-unit] .smart-digital-display input.smart-input { border-right: none } .smart-gauge[digital-display] .smart-digital-display { display: inline-block } .smart-gauge[digital-display-position=top] .smart-digital-display { top: 25%; transform: translate(-50%, -50%) } .smart-gauge[digital-display-position=right] .smart-digital-display { top: 50%; left: 70%; transform: translate(-50%, -50%) } .smart-gauge[digital-display-position=left] .smart-digital-display { top: 50%; left: 30%; transform: translate(-50%, -50%) } .smart-gauge[digital-display-position=center] .smart-digital-display { top: 50%; transform: translate(-50%, -50%) } smart-gauge[right-to-left] .smart-label, smart-gauge[right-to-left] .smart-label-middle { direction: rtl; text-anchor: end } input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0 } .smart-grid-footer { background: var(--smart-surface); color: var(--smart-surface-color); border-color: var(--smart-border); height: var(--smart-grid-footer-height); border-top-width: 1px; border-top-style: solid } .smart-grid-group-header { min-height: var(--smart-grid-group-header-height); height: var(--smart-grid-group-header-height); overflow: hidden; position: relative; z-index: 99; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: var(--smart-border); background: var(--smart-surface); display: flex; align-items: center } .smart-grid-group-header .smart-breadcrumb { background: 0 0; border: none; width: 100%; --smart-breadcrumb-item-height: 35px; margin-top: 1px; padding: 0 0 0 5px } .smart-grid-group-header .smart-breadcrumb .smart-template-container .smart-breadcrumb-items .smart-breadcrumb-item { border-radius: var(--smart-border-radius); margin-top: 0 } .smart-grid-group-header .smart-breadcrumb-item-label { display: flex; justify-content: center; align-content: center } .smart-grid-group-header .smart-breadcrumb-item-label .smart-grid-icon { font-weight: 700; font-size: 16px; margin-right: -10px } .smart-grid-column-group, smart-grid-column { font-size: var(--smart-grid-column-font-size, inherit); font-weight: var(--smart-grid-column-font-weight, inherit); text-overflow: ellipsis } .smart-grid-column-header.smart-columns-sticky { border-top: 1px solid var(--smart-border); border-bottom: 1px solid var(--smart-border); margin-top: -2px } .smart-grid-column-header .smart-arrow-down.smart-animate { transform: rotate(90deg); transition: transform .2s ease-out } .smart-grid-column-header .smart-arrow-down.smart-animate:after { content: var(--smart-icon-arrow-down) } .smart-grid-column-header .top-right-corner { overflow: hidden; right: 0; top: 0; width: calc(1px + var(--smart-scroll-bar-size)); position: absolute; border-left: 1px solid inherit; z-index: 1 } .smart-grid-column-header .top-right-corner:first-child { left: -1px; z-index: 2 } .smart-grid-column-header-cell-container { position: relative; z-index: 1; height: 100% } .smart-grid-column-header-cell-container:hover smart-grid-column[freeze][checkbox][auto-show] .smart-input { opacity: 1; border-color: var(--smart-border) } .smart-grid-cell-container.far, .smart-grid-column-header-cell-container.far { border-left: var(--smart-grid-freeze-splitter-size) solid var(--smart-border) } .smart-grid-column-header-cell-container.far, .smart-grid-column-header-cell-container.near { position: absolute; z-index: 6; box-sizing: content-box } .smart-grid-column-header-cell-container.near { border-right: var(--smart-grid-freeze-splitter-size) solid var(--smart-border) } .smart-grid-column-header-cell-container.far { right: 0; top: 0 } .smart-grid-column-header-cell-container.far.vscroll { right: var(--smart-scroll-bar-size) } .smart-grid-column-header-cell-container.border-collapse.near { box-sizing: border-box; border-right: none } .smart-grid-column-header-cell-container.border-collapse.far { box-sizing: border-box; border-left: none } .smart-grid-column-group { color: var(--smart-surface-color); background: var(--smart-surface); white-space: nowrap; border-width: 0; border-style: solid; overflow: hidden; height: 100%; position: absolute } .smart-grid-column-group.smart-grid-column-border { border-width: var(--smart-border-width); border-top-color: var(--smart-border); border-top-width: 0; border-bottom-color: var(--smart-border); border-left-color: var(--smart-border); border-right-color: var(--smart-border) } .smart-grid-column-group:not(.smart-grid-column-border):after { height: var(--smart-border-width); width: 100%; content: ''; position: absolute; bottom: 0; background: var(--smart-grid-column-horizontal-border, var(--smart-border)) } .smart-grid-column-group:not(.smart-grid-column-border):after:not(.smart-grid-column-border-collapse):before { width: var(--smart-border-width); height: 100%; content: ''; position: absolute; top: 0; left: 0; background: var(--smart-grid-column-vertical-border, var(--smart-border)) } .smart-grid-column-menu { position: absolute; background: var(--smart-surface); width: var(--smart-grid-column-menu-width); height: var(--smart-grid-column-menu-height); z-index: 9999; box-shadow: var(--smart-elevation-8); min-height: 60px; overflow: hidden } .smart-grid-column-menu smart-menu { border: none } .smart-grid-column-menu.smart-animate { transition: opacity .2s, transform .2s ease-out; transform: scale(0); opacity: 0; transform-origin: top left } .smart-grid-column-menu.smart-animate.smart-open-right, .smart-grid-column-menu[right-to-left].smart-animate { transform-origin: top right } .smart-grid-column-menu.smart-animate.smart-grid-download-menu { width: auto; transform: scaleY(0) } .smart-grid-column-menu smart-menu[mode=vertical] { height: 100% } .smart-grid-column-menu.open.smart-animate { transform: scale(1); opacity: 1 } .smart-grid-column-menu .smart-grid-icon { display: inline-block } .smart-grid-column-menu .smart-filter-container { width: 100%; height: auto; background: var(--smart-background) } .smart-grid-column-menu .smart-filter-container smart-filter-panel { width: 100%; border: none; background: 0 0 } .smart-grid-column-menu .smart-filter-container .smart-filter-panel smart-tree, .smart-grid-column-menu .smart-filter-panel smart-filter-builder { height: 250px } .smart-grid-filter-footer { height: var(--smart-grid-filter-footer-height) } .smart-grid-icon { height: 100%; font-family: var(--smart-font-family-icon); font-style: normal; font-weight: 400; color: inherit; font-size: 14px; text-decoration: inherit; font-variant: normal; text-transform: none; flex-wrap: wrap; align-items: center; justify-content: center; cursor: pointer; width: var(--smart-grid-column-buttons-width); min-width: 0; display: none } .smart-grid-icon.visible { display: inline-block !important; width: 20px } .smart-grid-icon.show { display: flex !important } .smart-grid-icon.smart-icon-link:before { content: var(--smart-icon-link) } .smart-grid-icon.smart-icon-mail:before { content: var(--smart-icon-mail) } .smart-grid-icon.smart-icon-user:before { content: var(--smart-icon-user) } .smart-grid-icon.smart-icon-list-ordered:before { content: var(--smart-icon-list-ordered) } .smart-grid-icon.smart-icon-list-unordered:before { content: var(--smart-icon-list-unordered) } .smart-grid-icon.smart-icon-plus:before { content: var(--smart-icon-plus) } .smart-grid-icon.smart-icon-image:before { content: var(--smart-icon-image) } .smart-grid-icon.smart-icon-plus-circled:before { content: var(--smart-icon-plus-circled) } .smart-grid-icon.smart-icon-docs:before { content: var(--smart-icon-docs) } .smart-grid-icon.smart-icon-minus:before { content: var(--smart-icon-minus) } .smart-grid-icon.smart-icon-resize-full:before { content: var(--smart-icon-resize-full) } .smart-grid-icon.smart-icon-align-left:before { content: var(--smart-icon-align-left) } .smart-grid-icon.smart-icon-align-right:before { content: var(--smart-icon-align-right) } .smart-grid-icon.smart-icon-align-center:before { content: var(--smart-icon-align-center) } .smart-grid-icon.smart-icon-cancel:before { content: var(--smart-icon-cancel) } .smart-grid-icon.smart-icon-cancel-circled:before { content: var(--smart-icon-cancel-circled) } .smart-grid-icon.smart-icon-edit:before { content: var(--smart-icon-edit) } .smart-grid-icon.smart-icon-mode-edit:before { content: var(--smart-icon-mode-edit) } .smart-grid-icon.smart-icon-sort:before { content: var(--smart-icon-sort) } .smart-grid-icon.smart-icon-delete:before { content: var(--smart-icon-delete) } .smart-grid-icon.smart-icon-close:before { content: var(--smart-icon-close) } .smart-grid-icon.smart-icon-search:before { content: var(--smart-icon-search) } .smart-grid-icon.smart-icon-settings:before { content: var(--smart-icon-settings) } .smart-grid-icon.smart-icon-visibility-off:before { content: var(--smart-icon-visibility-off) } .smart-grid-icon.smart-icon-visibility-on:before { content: var(--smart-icon-visibility) } .smart-grid-icon.smart-icon-add-filter:before { content: var(--smart-icon-add-filter) } .smart-grid-icon.smart-icon-duplicate:before { content: var(--smart-icon-duplicate) } .smart-grid-icon.smart-icon-check-empty:before { content: var(--smart-icon-check-empty) } .smart-grid-icon.smart-icon-check-squared:before { content: var(--smart-icon-check-squared) } .smart-grid-icon.smart-icon-number:before { content: '#'; font-weight: 700; font-style: normal; font-variant: normal; text-rendering: auto; font-family: var(--smart-font-family); -webkit-font-smoothing: antialiased; padding-left: 2px } .smart-grid-icon.smart-icon-filter:before { content: var(--smart-icon-filter) } .smart-grid-icon.smart-icon-phone:before { content: var(--smart-icon-phone) } .smart-grid-icon.smart-icon-lock:before { content: var(--smart-icon-lock) } .smart-grid-icon.smart-icon-tasks:before { content: var(--smart-icon-tasks) } .smart-grid-icon.smart-icon-table-alt:before { content: var(--smart-icon-table-alt) } .smart-grid-icon.smart-icon-kanban:before { content: var(--smart-icon-kanban) } .smart-grid-icon.smart-icon-card:before { content: var(--smart-icon-card) } .smart-grid-icon.smart-icon-clock:before { content: var(--smart-icon-clock) } .smart-grid-icon.smart-icon-font:before { content: var(--smart-icon-font) } .smart-grid-icon.smart-icon-fontsize:before { content: var(--smart-icon-fontsize) } .smart-grid-icon.smart-icon-menu:before { content: var(--smart-icon-menu) } .smart-grid-icon.smart-icon-sort-down:before { content: var(--smart-icon-arrow-down) } .smart-grid-icon.smart-icon-sort-up:before { content: var(--smart-icon-arrow-up) } .smart-grid-icon.smart-icon-ellipsis:before { content: var(--smart-icon-ellipsis) } .smart-grid-icon.smart-icon-ellipsis-vert:before { content: var(--smart-icon-ellipsis); transform: rotate(90deg) } .smart-grid-icon.smart-icon-minus-squared:before { content: var(--smart-icon-minus-squared) } .smart-grid-icon.smart-icon-ok-squared:before { content: var(--smart-icon-ok-squared) } .smart-grid-icon.smart-icon-sort-name-up:before { content: var(--smart-icon-sort-name-up) } .smart-grid-icon.smart-icon-sort-name-down:before { content: var(--smart-icon-sort-name-down) } .smart-grid-icon.smart-icon-sort-alt-up:before { content: var(--smart-icon-sort-alt-up) } .smart-grid-icon.smart-icon-sort-alt-down:before { content: var(--smart-icon-sort-alt-down) } .smart-grid-icon.smart-icon-sort-number-up:before { content: var(--smart-icon-sort-number-up) } .smart-grid-icon.smart-icon-sort-number-down:before { content: var(--smart-icon-sort-number-down) } .smart-grid-icon.smart-icon-group:before { content: var(--smart-icon-group) } .smart-grid-icon.smart-icon-ungroup:before { content: var(--smart-icon-ungroup) } .smart-grid-icon.smart-icon-reload:before { content: var(--smart-icon-reload) } .smart-grid-icon.smart-icon-contains:before { content: var(--smart-icon-contains) } .smart-grid-icon.smart-icon-starts-with:before { content: var(--smart-icon-starts_with) } .smart-grid-icon.smart-icon-ends-with:before { content: var(--smart-icon-ends_with) } .smart-grid-icon.smart-icon-does-not-contain:before { content: var(--smart-icon-does_not_contain) } .smart-grid-icon.smart-icon-equals:before { content: var(--smart-icon-equals) } .smart-grid-icon.smart-icon-greater-than:before { content: var(--smart-icon-greater-than) } .smart-grid-icon.smart-icon-greater-than-equal:before { content: var(--smart-icon-greater-than-equal) } .smart-grid-icon.smart-icon-less-than:before { content: var(--smart-icon-less-than) } .smart-grid-icon.smart-icon-less-than-equal:before { content: var(--smart-icon-less-than-equal) } .smart-grid-icon.smart-icon-not-equal:before { content: var(--smart-icon-not-equal) } .smart-grid-icon.smart-icon-percentage:before { content: var(--smart-icon-percentage) } .smart-grid-icon.smart-icon-grip-vertical:before { content: var(--smart-icon-grip-vertical) } .smart-grid-icon.smart-icon-between:before { content: var(--smart-icon-between) } .smart-grid-icon.smart-icon-bold:before { content: var(--smart-icon-bold) } .smart-grid-icon.smart-icon-italic:before { content: var(--smart-icon-italic) } .smart-grid-icon.smart-icon-underline:before { content: var(--smart-icon-underline) } .smart-grid-icon.smart-icon-color-background:before { content: var(--smart-icon-color-background) } .smart-grid-icon.smart-icon-calendar:before { content: var(--smart-icon-calendar) } .smart-grid-icon.smart-icon-attention:before { content: var(--smart-icon-attention) } .smart-grid-icon.smart-icon-help-circled:before { content: var(--smart-icon-help-circled) } .smart-grid-icon.smart-icon-star:before { content: var(--smart-icon-star) } .smart-grid-icon.smart-icon-attention-circled:before { content: var(--smart-icon-attention-circled) } .smart-grid-pager smart-pager { width: calc(100% - 10px); height: calc(100% - 10px); margin-left: 2px; margin-top: 5px; border: none } .smart-grid-aggregate-footer { position: absolute; bottom: 0; z-index: 99; height: var(--smart-grid-aggregate-footer-height); width: 100%; border-top-style: solid; border-top-color: inherit; border-top-width: 1px } .smart-grid-loader { margin: inherit; display: block; position: absolute; top: 50%; left: 50%; z-index: 99; transform: translate(-50%, -50%); opacity: .85; text-align: left; border: 6px solid rgba(43, 51, 63, .1); box-sizing: border-box; background-clip: padding-box; -webkit-background-clip: padding-box; border-radius: 50%; width: calc(var(--smart-loader-size) + 10px); height: calc(var(--smart-loader-size) + 10px) } .smart-grid-loader:after, .smart-grid-loader:before { content: ""; position: absolute; margin: -6px; box-sizing: inherit; width: inherit; height: inherit; border-radius: inherit; opacity: 1; border: inherit inherit transparent; border-width: 6px; animation: smart-loader-spin 1.1s cubic-bezier(.6, .2, 0, .8) infinite, smart-loader-spin-fade 1.1s linear infinite } .smart-grid-loader[loading-indicator-position=top] { width: var(--smart-loader-size); height: var(--smart-loader-size) } .smart-grid-loader[loading-indicator-position=top] .smart-loader-container { top: 0 } .smart-grid-loader[loading-indicator-position=bottom] .smart-loader-container { top: -10% } .smart-grid-loader[loading-indicator-position=top] .smart-loader-container, .smart-grid-loader[loading-indicator-position=bottom] .smart-loader-container { display: block; position: relative; width: 100%; height: 10%; background-color: var(--smart-background); overflow: hidden; animation: smart-loader-container-pop-up-down .3s linear; left: 20% } .smart-grid-loader[loading-indicator-position=top] .smart-loader-label, .smart-grid-loader[loading-indicator-position=bottom] .smart-loader-label { position: absolute; display: block; top: 50%; transform: translate(-50%, -50%); left: 60%; font-family: inherit; font-size: inherit; vertical-align: middle; white-space: nowrap } .smart-grid-placeholder { user-select: none; text-align: center; display: flex; height: 100%; min-height: 50px; justify-content: center; align-items: center; background: var(--smart-background) } .smart-grid-content.auto-height .smart-grid-placeholder { height: initial } .smart-grid-content.auto-height smart-grid-cell[addNewRow] { border-right: none } .smart-grid-special-cells-container { overflow: hidden; position: absolute; width: 100%; height: 100%; left: 0; top: 0 } .smart-grid-sort-animation { transition-timing-function: ease-in-out; transition-delay: 0 } .smart-grid-cell-container { height: 100%; position: relative } .smart-grid-cell-container.far, .smart-grid-cell-container.near { position: absolute; z-index: 6; box-sizing: content-box } .smart-grid-cell-container.far { right: 0; top: 0 } .smart-grid-cell-container.far.vscroll { right: var(--smart-scroll-bar-size) } .smart-grid-cell-container.border-collapse.near { box-sizing: border-box; border-right: none } .smart-grid-cell-container.border-collapse.far { box-sizing: border-box; border-left: none } .smart-grid-cell-editor>* { display: block; width: 100%; height: 100%; border: none; overflow: hidden; margin: 0; outline: 0; background: inherit; color: inherit; border-radius: 0; --smart-border-top-left-radius: 0px; --smart-border-top-right-radius: 0px; --smart-border-bottom-left-radius: 0px; --smart-border-bottom-right-radius: 0px } .smart-grid-cell-editor.smart-grid-date-time-picker-cell-editor, .smart-grid-cell-editor.smart-grid-passowrd-input-cell-editor, .smart-grid-cell-editor.smart-grid-phone-input-cell-editor { border-radius: 0; border: none; font-size: inherit; font-weight: inherit; background: inherit; color: inherit } .smart-grid-cell-editor.smart-grid-number-input-cell-editor { width: 100%; height: 100%; margin: 0; border-radius: 0; border: none; font-size: inherit; font-weight: inherit; background: inherit; color: inherit; display: flex } .smart-grid-cell-editor.smart-grid-number-input-cell-editor .nav { padding: 0; display: flex; width: var(--smart-editor-addon-width); height: 100%; flex-direction: column; color: var(--smart-surface-color); border-left: 1px solid var(--smart-border); background: var(--smart-surface) } .smart-grid-cell-editor.smart-grid-number-input-cell-editor .nav .down, .smart-grid-cell-editor.smart-grid-number-input-cell-editor .nav .up { display: flex; height: 50%; overflow: hidden; cursor: pointer; font-family: var(--smart-font-family-icon); justify-content: center; align-items: center; outline: 0 } .smart-grid-cell-editor.smart-grid-number-input-cell-editor .nav .down:hover, .smart-grid-cell-editor.smart-grid-number-input-cell-editor .nav .up:hover { background: var(--smart-ui-state-hover); color: var(--smart-ui-state-color-hover) } .smart-grid-cell-editor.smart-grid-number-input-cell-editor .nav .down:active, .smart-grid-cell-editor.smart-grid-number-input-cell-editor .nav .down[active], .smart-grid-cell-editor.smart-grid-number-input-cell-editor .nav .up:active, .smart-grid-cell-editor.smart-grid-number-input-cell-editor .nav .up[active] { background: var(--smart-ui-state-active); color: var(--smart-ui-state-color-active) } .smart-grid-cell-editor.smart-grid-auto-complete-cell-editor, .smart-grid-cell-editor.smart-grid-input-cell-editor, .smart-grid-cell-editor.smart-grid-text-area-cell-editor { background: inherit; color: inherit; width: 100%; margin: 0; font-size: inherit; font-weight: inherit } .smart-grid-cell-editor.smart-grid-number-input-cell-editor .nav .up { border-bottom: 1px solid var(--smart-border) } .smart-grid-cell-editor.smart-grid-number-input-cell-editor .nav .up:after { content: var(--smart-icon-arrow-up) } .smart-grid-cell-editor.smart-grid-number-input-cell-editor .nav .down:after { content: var(--smart-icon-arrow-down) } .smart-grid-cell-editor.smart-grid-text-area-cell-editor { display: flex; height: 100%; border-radius: 0; border: none; font-family: inherit } .smart-grid-cell-editor.smart-grid-input-cell-editor { height: 100%; border-radius: 0; border: none } .smart-grid-cell-editor.smart-grid-auto-complete-cell-editor { height: 100% !important; border-radius: 0; border: none } .smart-grid-cell-editor.smart-grid-auto-complete-cell-editor div, .smart-grid-cell-editor.smart-grid-auto-complete-cell-editor input { border-radius: 0 } .smart-grid-cell-editor>input[type=checkbox] { border: none; min-width: 16px; height: 16px; top: 6px; position: relative } .smart-grid-cell-content-popup { background: var(--smart-primary) !important; color: var(--smart-primary-color) !important; border: 1px solid var(--smart-primary) !important; z-index: 19 !important } .smart-grid-cell-content-popup-content { box-shadow: none !important; padding: 6px 2px 6px 6px } .smart-grid-row-container { position: relative } .smart-grid-row-container.far, .smart-grid-row-container.near { z-index: 7; position: absolute; width: 100% } .smart-grid-row-container.near { border-bottom: var(--smart-grid-freeze-splitter-size) solid var(--smart-border); box-sizing: content-box } .smart-grid-row-container.far { border-top: var(--smart-grid-freeze-splitter-size) solid var(--smart-border); box-sizing: content-box; z-index: 11 } .smart-grid-row-drag-feedback { height: auto !important; flex-direction: column } .smart-grid-row-drag-feedback div { padding-top: 3px } .smart-grid-row-drag-feedback>div { display: flex; align-items: flex-start; padding: 3px; white-space: nowrap; font-family: var(--smart-font-family); font-size: 8px; background-color: var(--smart-background); color: var(--smart-background-color); flex-direction: column; max-height: 200px; overflow: hidden } .smart-grid-scroll-view { width: 100%; height: 100%; position: relative; overflow: hidden } .smart-grid-scroll-view .smart-grid-row-container.far { bottom: -2px } .smart-grid-scroll-view.vscroll, .smart-grid-scroll-view.vscroll .smart-grid-row-container.far, .smart-grid-scroll-view.vscroll .smart-grid-row-container.near { width: calc(100% - var(--smart-scroll-bar-size)) } .smart-grid-scroll-view.hscroll .smart-grid-row-container.far { bottom: calc(-2px + var(--smart-scroll-bar-size)) } .smart-grid-summary-row-cell { background: var(--smart-surface) !important; color: var(--smart-surface-color) !important; border-color: var(--smart-border) !important; opacity: 1 !important } .smart-grid-summary-row-cell button { display: none } .smart-grid-summary-row-cell .summary-value { font-size: 11px; opacity: .75; height: calc(100% - 2px); display: flex; justify-content: flex-end; align-items: center; width: 100% } .smart-grid-summary-row-cell .summary-value .smart-arrow-down, .smart-grid-summary-row-cell .summary-value .smart-summary-placeholder { opacity: 0; transition: opacity .2s ease-in-out } .smart-grid-summary-row-cell .summary-value[has-summary] .smart-arrow-down, .smart-grid-summary-row-cell .summary-value[has-summary] .smart-summary-placeholder { display: inherit; opacity: .7 } .smart-grid-summary-row-cell .summary-value.summary-chooser .smart-arrow-down, .smart-grid-summary-row-cell .summary-value.summary-chooser .smart-summary-placeholder, .smart-grid-summary-row-cell .summary-value:hover .smart-arrow-down, .smart-grid-summary-row-cell .summary-value:hover .smart-summary-placeholder { opacity: 1 } .smart-grid-summary-row-cell .summary-value .label { margin-top: -3px } .smart-grid-summary-row-cell::before { display: none } .smart-grid-resize-mode { overflow: visible } .smart-grid-dialog-editor.add-column { display: flex; height: 30px; align-items: center; margin-bottom: 10px } .smart-grid-dialog-editor.radio-group { height: auto } .smart-grid-dialog-add-column .smart-grid-dialog-radio-field { width: 100% } .smart-grid-dialog-add-column .smart-grid-dialog-radio-field .smart-input { border-radius: 50% !important; margin-right: 10px } .smart-grid-dialog-add-column .smart-grid-dialog-radio-field .smart-input:after { content: '' !important } .smart-grid-dialog-add-column .smart-grid-dialog-radio-field .smart-input[checked]:after { content: var(--smart-icon-radio) !important } .smart-grid-dialog-add-column .smart-grid-dialog-boolean-field { display: flex; align-items: center; margin-bottom: 5px } .smart-grid-dialog-add-column .smart-grid-dialog-boolean-field .smart-grid-dialog-editor { margin-bottom: initial; margin-right: 10px } .smart-grid-dialog-editor[template=colorInput] { border: none !important } .smart-grid-dialog-editor[template=colorInput] smart-color-input { border: 1px solid var(--smart-border) } .smart-grid-dialog-editor .images { display: grid; grid-template-columns: 1fr auto auto; height: 100% } .smart-grid-dialog-editor .images .container { display: flex; height: calc(100% - 3px); align-items: center; overflow: hidden; padding-left: 5px } .smart-grid-dialog-editor .images .smart-drop-image { margin-left: -5px } .smart-grid-dialog-editor .images .smart-drop-image::after { font-family: var(--smart-font-family-icon); content: var(--smart-icon-download-alt); margin-left: 5px } .smart-grid-dialog-editor .images .arrowbtn { width: 15px; background: var(--smart-surface) } .smart-grid-dialog-editor .images .arrowbtn:hover { cursor: pointer; background: var(--smart-primary); color: var(--smart-primary-color) } .smart-grid-dialog-editor .images img { height: 23px; width: 23px; border: 1px solid var(--smart-border); margin-right: 3px; border-radius: var(--smart-border-radius) } .smart-grid-dialog-editor .images img:hover { cursor: pointer; border-color: var(--smart-primary) } .smart-grid-image-dialog { width: 500px !important; min-height: 400px !important; background: var(--smart-background) } .smart-grid-image-dialog .smart-header { display: flex; justify-content: center; align-items: center } .smart-grid-image-dialog .tabs { width: 100%; height: 30px; overflow: hidden; transition: all .2s ease-in-out; display: flex; margin-bottom: 5px } .smart-grid-image-dialog .tabs .tab { width: 50%; display: flex; align-items: center; justify-content: center; text-transform: uppercase; color: var(--smart-background-color); cursor: pointer } .smart-grid-image-dialog .tabs .tab label { cursor: pointer } .smart-grid-image-dialog .tabs .tab.active { color: var(--smart-primary); border-bottom: 2px solid var(--smart-primary); font-weight: 700 } .smart-grid-image-dialog .preview { margin-top: 10px } .smart-grid-image-dialog .preview p { font-size: 10px; text-align: center } .smart-grid-image-dialog .preview .smart-icon-delete { margin: 5px } .smart-grid-image-dialog .preview .smart-icon-delete:hover { color: var(--smart-primary) } .smart-grid-image-dialog .preview .list { max-height: 100px; max-width: 500px; overflow: auto; display: flex; flex-direction: row } .smart-grid-image-dialog .preview .list .item { display: flex; align-items: center; flex-direction: column; font-size: 10px; color: var(--smart-background-color); max-width: 100px; margin-right: 10px; overflow: hidden; min-width: 60px } .smart-grid-image-dialog .preview .list .item:after { font-family: var(--smart-font-family-icon); width: 16px; height: 16px; content: var(--smart-icon-close); cursor: pointer } .smart-grid-image-dialog .preview .list .item img { width: 50px; height: 50px; min-height: 50px; border: 2px solid transparent } .smart-grid-image-dialog .preview .list .item img:hover { border: 2px solid var(--smart-primary); border-radius: var(--smart-border-radius); cursor: pointer } .smart-grid-image-dialog .preview .list .item div { text-overflow: ellipsis; text-align: center } .smart-grid-image-dialog .url-zone { display: flex; justify-content: center; align-items: center; flex-direction: column; height: 220px } .smart-grid-image-dialog .url-zone .upload { display: flex; flex-direction: column } .smart-grid-image-dialog .url-zone .url-title { margin-top: 10px; font-size: 10px; color: var(--smart-background-color) } .smart-grid-image-dialog .url-zone .smart-input { text-align: center } .smart-grid-image-dialog .smart-grid-drop-zone { border: 2px dashed rgba(0, 0, 0, .1); border-radius: 6px; height: 220px; background: var(--smart-background); display: flex; align-items: center; justify-content: center; text-align: center; transition: all .2s ease-out; flex-direction: column; outline: 0 } .smart-grid-image-dialog .smart-grid-drop-zone .title { cursor: pointer; font-size: 20px; font-weight: 500; height: 50px; display: flex; align-items: center; flex-direction: column; margin-top: 20px } .smart-grid-image-dialog .smart-grid-drop-zone .title .smart-grid-icon { font-size: 24px; margin-bottom: 5px; color: var(--smart-primary) } .smart-grid-image-dialog .smart-grid-drop-zone .subtitle { margin-top: 20px; margin-bottom: 20px; display: flex; align-items: center; color: var(--smart-background-color) } .smart-grid-dialog-overlay { z-index: 100; background: #333; opacity: .1; width: 100%; height: 100%; position: absolute; left: 0; top: 0 } .smart-grid-overlay { z-index: 100; background: 0 0; opacity: .1; width: 100%; height: 100%; position: absolute; left: 0; top: 0 } .smart-grid-slider-dialog, .smart-grid-text-area-dialog { z-index: 99999; position: absolute; min-width: 150px; min-height: 120px; font-size: var(--smart-font-size); font-family: var(--smart-font-family); background: var(--smart-background); border: none; box-shadow: 0 0 0 3px var(--smart-primary) !important; border-radius: 1px; color: var(--smart-background-color); box-sizing: border-box; overflow: visible } .smart-grid-slider-dialog.smart-grid-slider-dialog, .smart-grid-text-area-dialog.smart-grid-slider-dialog { min-height: 60px; max-width: 200px; transform: rotate(-90deg) } .smart-grid-slider-dialog .smart-grid-slider-container, .smart-grid-slider-dialog .smart-grid-text-area-container, .smart-grid-text-area-dialog .smart-grid-slider-container, .smart-grid-text-area-dialog .smart-grid-text-area-container { width: 100%; height: 100%; overflow: hidden } .smart-grid-slider-dialog .smart-grid-slider-container, .smart-grid-text-area-dialog .smart-grid-slider-container { height: 100%; position: absolute; display: flex; padding: 6px; box-sizing: border-box } .smart-grid-slider-dialog smart-scroll-bar[orientation=vertical], .smart-grid-text-area-dialog smart-scroll-bar[orientation=vertical] { height: 100%; right: 0; top: 0; position: absolute; width: var(--smart-scroll-bar-size) } .smart-grid-slider-dialog textarea, .smart-grid-text-area-dialog textarea { padding: 3px 20px 3px 3px; min-height: 120px; width: calc(100% + var(--smart-scroll-bar-size)); overflow-x: hidden; height: 120px; box-sizing: border-box; border: none; background: inherit; outline: 0; resize: none; color: inherit } .smart-grid-validation-error { position: absolute; background: var(--smart-error); color: var(--smart-error-color); border-radius: var(--smart-border-radius); padding: 7px; width: auto; height: auto; z-index: 99 } .smart-selection-overlay { position: absolute; border: 2px solid var(--smart-primary); z-index: 10 } .smart-selection-overlay-content { background: var(--smart-ui-state-selected); opacity: .2; width: 100%; height: 100% } .smart-selection-overlay-content:after { cursor: move; content: ''; height: 4px; width: calc(100% - 10px); position: absolute; bottom: 0 } .smart-selection-overlay-border-content { border: 0 solid var(--smart-background); width: 100%; height: 100% } .smart-selection-overlay-border-content.handle:after { border: 1px solid var(--smart-background); content: ''; background: var(--smart-primary); width: 4px; height: 4px; position: absolute; right: -4px; bottom: -4px; cursor: crosshair } .smart-input-overlay { background: var(--smart-ui-state-active); position: absolute; border-radius: 100%; opacity: 0; transform: scale(0); z-index: 9; cursor: pointer } .smart-input-overlay.smart-animate { transition: transform .25s ease-in-out, opacity .25s ease-in-out } .smart-input-overlay-on { opacity: .3; transform: scale(1) } .smart-window.smart-grid-dialog { transition: opacity .2s, transform .2s ease-out; transform: scale(0); opacity: 0; font-family: var(--smart-font-family); font-size: var(--smart-font-size) } .smart-window.smart-grid-dialog.smart-grid-dialog-add-column, .smart-window.smart-grid-dialog.smart-grid-dialog-description { transform: scaleY(0) !important; transform-origin: top !important } .smart-window.smart-grid-dialog.smart-grid-dialog-add-column.view, .smart-window.smart-grid-dialog.smart-grid-dialog-description.view { transform-origin: unset !important; transform: scale(0) !important } .smart-window.smart-grid-dialog.smart-grid-dialog-add-column .smart-header-notes, .smart-window.smart-grid-dialog.smart-grid-dialog-description .smart-header-notes { margin-bottom: 10px; display: block } .smart-window.smart-grid-dialog.smart-grid-dialog-add-column.center, .smart-window.smart-grid-dialog.smart-grid-dialog-description.center { transform: scale(0); transform-origin: unset } .smart-window.smart-grid-dialog.smart-grid-dialog-summary { transform: scaleY(0); transform-origin: bottom; --smart-window-content-padding: 0px; box-shadow: none; border-radius: 0 } .smart-window.smart-grid-dialog.smart-grid-dialog.disable-animation { transition: none } .smart-window.smart-grid-dialog.smart-grid-dialog-expand-row { width: 750px !important } .smart-window.smart-grid-dialog.smart-grid-dialog-expand-row .smart-grid-edit-dialog-column-info { display: grid; grid-template-columns: 25px 1fr 25px; padding: 5px 0; line-height: normal } .smart-window.smart-grid-dialog.smart-grid-dialog-expand-row .smart-grid-edit-dialog-column-info.format { grid-template-columns: 25px 1fr; padding: 0 } .smart-window.smart-grid-dialog.smart-grid-dialog-expand-row .smart-grid-edit-dialog-column-info.header { display: flex; flex-direction: row; justify-content: space-between; font-weight: 700; font-size: calc(var(--smart-font-size) + 1px) } .smart-window.smart-grid-dialog.smart-grid-dialog-expand-row .tabs { width: 100%; height: 35px; overflow: hidden; background: var(--smart-background); transition: all .2s ease-in-out; display: flex; margin-bottom: 10px; border-bottom: 1px solid var(--smart-border) } .smart-window.smart-grid-dialog.smart-grid-dialog-expand-row .tabs .tab { padding: 8px 22px; display: flex; align-items: center; justify-content: center; text-transform: uppercase; color: var(--smart-background-color); cursor: pointer; white-space: nowrap } .smart-window.smart-grid-dialog.smart-grid-dialog-expand-row .tabs .tab.active { color: var(--smart-primary); border-bottom: 2px solid var(--smart-primary) } .smart-window.smart-grid-dialog.smart-grid-dialog-expand-row .smart-content-container { width: 100% } .smart-window.smart-grid-dialog.smart-grid-dialog-expand-row .smart-next-button:after, .smart-window.smart-grid-dialog.smart-grid-dialog-expand-row .smart-prev-button:after { font-size: calc(100% - 2px) } .smart-window.smart-grid-dialog.smart-grid-dialog-expand-row .smart-prev-button:after { content: var(--smart-icon-arrow-up) } .smart-window.smart-grid-dialog.smart-grid-dialog-expand-row .smart-next-button:after { content: var(--smart-icon-arrow-down) } .smart-window.smart-grid-dialog.smart-grid-dialog-expand-row [editor]:not([template=checkBox]) { width: auto; max-width: initial } .smart-window.smart-grid-dialog.smart-grid-dialog-expand-row.disable-edit .smart-grid-edit-dialog-layout { display: block } .smart-window.smart-grid-dialog.smart-grid-dialog-expand-row.disable-edit .smart-grid-edit-dialog-layout .smart-drop-down-button, .smart-window.smart-grid-dialog.smart-grid-dialog-expand-row.disable-edit .smart-grid-edit-dialog-layout .smart-grid-edit-dialog-activity-container { display: none !important } .smart-window.smart-grid-dialog.smart-grid-dialog-expand-row.disable-edit .smart-grid-edit-dialog-layout .smart-grid-dialog-editor { background: var(--smart-surface); pointer-events: none } .smart-window.smart-grid-dialog.smart-grid-dialog-expand-row.disable-edit .smart-grid-edit-dialog-layout .smart-grid-dialog-editor[template=image] { pointer-events: initial; height: 100px; border: none; background: initial } .smart-window.smart-grid-dialog.smart-grid-dialog-expand-row.disable-edit .smart-grid-edit-dialog-layout .smart-grid-dialog-editor[template=image] .smart-grid-cell-editor>div { display: block !important } .smart-window.smart-grid-dialog.smart-grid-dialog-expand-row.disable-edit .smart-grid-edit-dialog-layout .smart-grid-dialog-editor[template=image] img { width: 95px; height: 95px } .smart-window.smart-grid-dialog.smart-grid-dialog-expand-row.disable-edit .smart-grid-edit-dialog-layout .smart-grid-dialog-editor[template=image] .smart-drop-image, .smart-window.smart-grid-dialog.smart-grid-dialog-expand-row.disable-edit .smart-grid-edit-dialog-layout .smart-grid-dialog-editor[template=image] .smart-grid-icon.smart-icon-plus { display: none !important } .smart-window.smart-grid-dialog.smart-grid-dialog-expand-row .smart-grid-edit-dialog-layout { display: grid; grid-template-columns: 1fr 350px; column-gap: 20px } .smart-window.smart-grid-dialog.smart-grid-dialog-expand-row .smart-grid-edit-dialog-layout .smart-grid-edit-dialog-editors-container.many { display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 1rem } .smart-window.smart-grid-dialog.smart-grid-dialog-expand-row .smart-grid-edit-dialog-layout .smart-grid-edit-dialog-activity-container { background: var(--smart-surface); border: 1px solid var(--smart-border); border-radius: var(--smart-border-radius); overflow: hidden } .smart-window.smart-grid-dialog.smart-grid-dialog-expand-row .smart-grid-edit-dialog-layout .smart-grid-edit-dialog-activity-container>div { height: 100% } .smart-window.smart-grid-dialog.smart-grid-dialog-expand-row .smart-grid-edit-dialog-layout .smart-grid-edit-dialog-activity-container .smart-grid-edit-dialog-row { height: 100%; display: grid; grid-template-rows: 40px 40px 40px 40px 40px 1fr } .smart-window.smart-grid-dialog.smart-grid-dialog-expand-row .smart-grid-edit-dialog-layout .smart-grid-edit-dialog-activity-container .history-row { padding: 5px } .smart-window.smart-grid-dialog.smart-grid-dialog-expand-row .smart-grid-edit-dialog-layout .smart-grid-edit-dialog-activity-container .history-layout { max-height: 500px; overflow: auto } .smart-window.smart-grid-dialog.smart-grid-dialog-expand-row .smart-grid-edit-dialog-layout .smart-grid-edit-dialog-activity-container .history-user { display: grid; grid-template-columns: 35px 1fr 1fr; align-items: center } .smart-window.smart-grid-dialog.smart-grid-dialog-expand-row .smart-grid-edit-dialog-layout .smart-grid-edit-dialog-activity-container .history-action { display: grid; padding-left: 35px; grid-template-columns: 50% 50%; align-items: center; opacity: .8 } .smart-window.smart-grid-dialog.smart-grid-dialog-expand-row .smart-grid-edit-dialog-layout .smart-grid-edit-dialog-activity-container .history-action .detail { white-space: initial } .smart-window.smart-grid-dialog.smart-grid-dialog-expand-row .smart-grid-edit-dialog-layout .smart-grid-edit-dialog-activity-container .smart-user { position: relative; top: 10px; left: -3px } .smart-window.smart-grid-dialog.smart-grid-dialog-expand-row .smart-grid-edit-dialog-layout .smart-grid-edit-dialog-activity-container .user-icon { height: 30px; width: 30px; border-radius: 50%; background-size: cover; background-position: center } .smart-window.smart-grid-dialog.smart-grid-dialog-expand-row .smart-grid-edit-dialog-layout .smart-grid-edit-dialog-activity-container .user-icon.image:after { content: '' } .smart-window.smart-grid-dialog.smart-grid-dialog-expand-row .smart-grid-edit-dialog-layout .smart-grid-edit-dialog-activity-container .user-icon:after { content: var(--smart-icon-user); font-family: var(--smart-font-family-icon); width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; font-size: 24px } .smart-window.smart-grid-dialog.smart-grid-dialog-expand-row .smart-grid-edit-dialog-layout .smart-grid-edit-dialog-activity-container .user-name { font-weight: 700 } .smart-window.smart-grid-dialog.smart-grid-dialog-expand-row .smart-grid-edit-dialog-layout .smart-grid-edit-dialog-activity-container .time { opacity: .8 } .smart-window.smart-grid-dialog.smart-grid-dialog-expand-row .smart-grid-edit-dialog-layout .smart-grid-edit-dialog-activity-container .comments-header { white-space: nowrap } .smart-window.smart-grid-dialog.smart-grid-dialog-expand-row .smart-grid-edit-dialog-layout .smart-grid-edit-dialog-activity-container .comments-tab { height: calc(100% - 35px) } .smart-window.smart-grid-dialog.smart-grid-dialog-expand-row .smart-grid-edit-dialog-layout .smart-grid-edit-dialog-activity-container .comments-layout { display: grid; grid-template-rows: 1fr auto; flex-direction: column; padding: 3px; height: calc(100% - 55px) } .smart-window.smart-grid-dialog.smart-grid-dialog-expand-row .smart-grid-edit-dialog-layout .smart-grid-edit-dialog-activity-container .comments-layout .comment { display: grid; grid-template-columns: 30px 1fr; grid-column-gap: var(--smart-data-view-padding); margin: var(--smart-data-view-padding) } .smart-window.smart-grid-dialog.smart-grid-dialog-expand-row .smart-grid-edit-dialog-layout .smart-grid-edit-dialog-activity-container .comments-layout .comment .comment-header { display: grid; grid-template-columns: 1fr auto auto; grid-column-gap: calc(var(--smart-data-view-padding)/ 2); margin-bottom: var(--smart-data-view-padding) } .smart-window.smart-grid-dialog.smart-grid-dialog-expand-row .smart-grid-edit-dialog-layout .smart-grid-edit-dialog-activity-container .comments-layout .comment .remove-button { transform: rotate(90deg); width: 16px; cursor: pointer } .smart-window.smart-grid-dialog.smart-grid-dialog-expand-row .smart-grid-edit-dialog-layout .smart-grid-edit-dialog-activity-container .comments-layout .comment .remove-button:after { content: var(--smart-icon-close); display: flex; align-items: center; justify-content: center; height: 100%; font-family: var(--smart-font-family-icon); cursor: pointer } .smart-window.smart-grid-dialog.smart-grid-dialog-expand-row .smart-grid-edit-dialog-layout .smart-grid-edit-dialog-activity-container .comments-layout .comment .remove-button.enabled { visibility: visible } .smart-window.smart-grid-dialog.smart-grid-dialog-expand-row .smart-grid-edit-dialog-layout .smart-grid-edit-dialog-activity-container .comments-layout .comments { overflow: auto; min-height: 180px; max-height: 350px } .smart-window.smart-grid-dialog.smart-grid-dialog-expand-row .smart-grid-edit-dialog-layout .smart-grid-edit-dialog-activity-container .comments-layout .footer { height: 45px; display: flex; padding: 5px; box-sizing: border-box; transition: height ease-in-out .2s } .smart-window.smart-grid-dialog.smart-grid-dialog-expand-row .smart-grid-edit-dialog-layout .smart-grid-edit-dialog-activity-container .comments-layout .footer.focus { height: 70px } .smart-window.smart-grid-dialog.smart-grid-dialog-expand-row .smart-grid-edit-dialog-layout .smart-grid-edit-dialog-activity-container .comments-layout .footer smart-text-area { width: 100%; height: 100%; border-radius: 0 } .smart-window.smart-grid-dialog.smart-grid-dialog-expand-row .smart-grid-edit-dialog-layout .smart-grid-edit-dialog-activity-container .comments-layout .footer smart-button { border-top-left-radius: 0; border-bottom-left-radius: 0; width: 100px; border-left-color: transparent } .smart-window.smart-grid-dialog.smart-grid-dialog-expand-row .smart-grid-edit-dialog-layout .smart-grid-edit-dialog-activity-container .format-layout { display: grid; grid-template-columns: 1fr 1fr 1fr; padding: 5px; width: 300px } .smart-window.smart-grid-dialog.smart-grid-dialog-expand-row .smart-grid-edit-dialog-layout .smart-grid-edit-dialog-activity-container .format-layout.font-group { grid-column-gap: 10px } .smart-grid.smart-container, smart-grid { grid-template-columns: var(--smart-grid-template-columns); grid-column-gap: var(--smart-grid-column-gap); grid-row-gap: var(--smart-grid-row-gap) } .smart-window.smart-grid-dialog.smart-grid-dialog-expand-row .smart-grid-edit-dialog-layout .smart-grid-edit-dialog-activity-container .format-layout.font-group .format:first-child { grid-column: 1/2 span } .smart-window.smart-grid-dialog.smart-grid-dialog-expand-row .smart-grid-edit-dialog-layout .smart-grid-edit-dialog-activity-container .format-layout.font-group .format:last-child { width: 100px } .smart-window.smart-grid-dialog.smart-grid-dialog-expand-row .smart-grid-edit-dialog-layout .smart-grid-edit-dialog-activity-container .format-layout.button-group { background: var(--smart-background); border: 1px solid var(--smart-border); border-radius: var(--smart-border-radius); height: var(--smart-editor-height); width: 100px; padding: 0; display: flex; justify-content: space-between } .smart-window.smart-grid-dialog.smart-grid-dialog-expand-row .smart-grid-edit-dialog-layout .smart-grid-edit-dialog-activity-container .format-layout.button-group .bold, .smart-window.smart-grid-dialog.smart-grid-dialog-expand-row .smart-grid-edit-dialog-layout .smart-grid-edit-dialog-activity-container .format-layout.button-group .italic, .smart-window.smart-grid-dialog.smart-grid-dialog-expand-row .smart-grid-edit-dialog-layout .smart-grid-edit-dialog-activity-container .format-layout.button-group .underline { font-weight: 400; display: block; height: 100%; padding: 5px; width: 100%; border-bottom: 2px solid transparent; transition: border ease-in-out .2s } .smart-window.smart-grid-dialog.smart-grid-dialog-expand-row .smart-grid-edit-dialog-layout .smart-grid-edit-dialog-activity-container .format-layout.button-group .bold:hover, .smart-window.smart-grid-dialog.smart-grid-dialog-expand-row .smart-grid-edit-dialog-layout .smart-grid-edit-dialog-activity-container .format-layout.button-group .italic:hover, .smart-window.smart-grid-dialog.smart-grid-dialog-expand-row .smart-grid-edit-dialog-layout .smart-grid-edit-dialog-activity-container .format-layout.button-group .underline:hover { border-bottom: 2px solid var(--smart-primary) } .smart-window.smart-grid-dialog.smart-grid-dialog-expand-row .smart-grid-edit-dialog-layout .smart-grid-edit-dialog-activity-container .format-layout.button-group .bold.checked, .smart-window.smart-grid-dialog.smart-grid-dialog-expand-row .smart-grid-edit-dialog-layout .smart-grid-edit-dialog-activity-container .format-layout.button-group .italic.checked, .smart-window.smart-grid-dialog.smart-grid-dialog-expand-row .smart-grid-edit-dialog-layout .smart-grid-edit-dialog-activity-container .format-layout.button-group .underline.checked { background: var(--smart-primary); color: var(--smart-primary-color) } .smart-window.smart-grid-dialog .col-sm-6 { padding: 0 } .smart-window.smart-grid-dialog>.smart-container .smart-header-section { cursor: default } .smart-window.smart-grid-dialog.open, .smart-window.smart-grid-dialog.view.open { transform: scale(1) !important; opacity: 1 } .smart-window.smart-grid-dialog .smart-field-editor-error-label { font-size: 10px; color: var(--smart-error) } .smart-window.smart-grid-dialog [editor]:not([template=checkBox]) { max-width: 150px; height: 30px; overflow: hidden; border: 1px solid var(--smart-border); border-radius: var(--smart-border-radius) } .smart-window.smart-grid-dialog [editor][focus], .smart-window.smart-grid-dialog [editor][focus] .smart-grid-cell-editor { border-color: var(--smart-primary) } .smart-window.smart-grid-dialog [editor][template=checkBox] { height: 30px; display: flex; align-items: center } .smart-window.smart-grid-dialog [editor]:not([template=checkBox]) .smart-grid-cell-editor { width: 100%; height: 100% } .smart-window.smart-grid-dialog>.smart-container>.smart-footer { height: auto } .smart-window.smart-grid-dialog .column { display: flex; justify-content: space-between; padding: 5px; flex-direction: column } .smart-window.smart-grid-dialog .column label { justify-content: flex-end; padding: 5px 0 } .smart-window.smart-grid-dialog .smart-footer .smart-stack-layout { padding: 0 10px } smart-grid { width: var(--smart-grid-default-width); height: var(--smart-grid-default-height); contain: content; visibility: hidden } smart-grid .smart-grid-cell-loading { height: 10px; position: absolute; top: calc(50% - 5px); background: var(--smart-surface); width: 80%; left: 10%; border: 1px solid var(--smart-surface); border-radius: var(--smart-border-radius) } smart-grid .smart-grid-add-column-button, smart-grid .smart-grid-add-row-button { position: absolute; bottom: 0; left: 0; z-index: 12; width: 30px; background: var(--smart-surface); transform: scale(0); opacity: 0; transition: all .2s ease-in-out; height: 28px } smart-grid .smart-grid-add-column-button.float, smart-grid .smart-grid-add-row-button.float { height: 30px; border-radius: 50%; border: 1px solid var(--smart-primary); left: 5px; bottom: 5px; background: var(--smart-primary); color: var(--smart-primary-color); box-shadow: var(--smart-elevation-4) } smart-grid .smart-grid-add-column-button.smart-grid-add-column-button, smart-grid .smart-grid-add-row-button.smart-grid-add-column-button { right: 5px; left: initial; top: 55px } smart-grid .smart-grid-add-column-button.show, smart-grid .smart-grid-add-row-button.show { transform: scale(1); opacity: 1 } smart-grid .smart-grid-add-column-button.show:active, smart-grid .smart-grid-add-column-button.show:hover, smart-grid .smart-grid-add-row-button.show:active, smart-grid .smart-grid-add-row-button.show:hover { color: var(--smart-primary-color); background: var(--smart-primary) } smart-grid .smart-grid-add-column-button.show:active.float, smart-grid .smart-grid-add-column-button.show:hover.float, smart-grid .smart-grid-add-row-button.show:active.float, smart-grid .smart-grid-add-row-button.show:hover.float { transform: scale(1.2); box-shadow: var(--smart-elevation-6) } smart-grid.smart-kanban-view { background: #fafafa } smart-grid.smart-kanban-view .smart-grid-add-row-button { display: none !important } smart-grid[appearance_allow-hover] smart-grid-cell:not([focus]):hover:not(.smart-add-new-column) { background: var(--smart-ui-state-hover); color: var(--smart-ui-state-color-hover) } smart-grid[appearance_allow-hover] smart-grid-cell:not([focus]):hover:not(.smart-add-new-column) .smart-label { background: var(--smart-ui-state-hover) !important; color: var(--smart-ui-state-color-hover) !important } smart-grid[appearance_allow-hover]:not([selection_allow-cell-selection]) smart-grid-row:hover smart-grid-cell:not([focus]) { background: var(--smart-ui-state-hover); color: var(--smart-ui-state-color-hover) } smart-grid[appearance_allow-hover]:not([selection_allow-cell-selection]) smart-grid-row:hover smart-grid-cell:not([focus]) .smart-label { background: var(--smart-ui-state-hover) !important; color: var(--smart-ui-state-color-hover) !important } smart-grid[tree] smart-grid-cell[has-toggle-button]:not([detail]) button[toggle-button] { padding-right: 14px; margin-left: 7px } smart-grid.smart-element { visibility: inherit } smart-grid:not([selection_allow-cell-selection]) smart-grid-row[focus] smart-grid-cell:not([editor]):not([header]), smart-grid:not([selection_allow-cell-selection]) smart-grid-row[focus] smart-grid-cell:not([editor]):not([header]) .smart-label { background: var(--smart-primary) !important; color: var(--smart-primary-color) !important; border-color: var(--smart-primary) !important } smart-grid:not([selection_allow-cell-selection]) smart-grid-row[focus] smart-grid-cell:not([editor]):not([header]):before { background: var(--smart-primary) } smart-grid[selection_allow-cell-selection] smart-grid-row[focus] smart-grid-cell[focus]:not([editor]):not([header]) { background: var(--smart-primary); color: var(--smart-primary-color); border-color: var(--smart-primary) } .smart-grid.smart-container { contain: content; visibility: hidden } .smart-grid.smart-container .smart-grid-header, .smart-grid>.smart-container .smart-grid-header { background: var(--smart-surface); color: var(--smart-surface-color); border-color: var(--smart-border); height: var(--smart-grid-header-height); border-bottom-width: 1px; border-bottom-style: solid; width: 100% } .smart-grid.smart-container .smart-grid-column-header, .smart-grid>.smart-container .smart-grid-column-header { height: var(--smart-grid-column-header-height); min-height: 30px; color: var(--smart-surface-color); overflow: hidden; position: relative; z-index: 99 } .smart-grid.smart-container .smart-grid-pager, .smart-grid>.smart-container .smart-grid-pager { height: var(--smart-pager-default-height); overflow: hidden; z-index: 99; border-top-width: 1px; border-top-style: solid; border-top-color: var(--smart-border); width: 100%; background: var(--smart-surface); color: var(--smart-surface-color) } .smart-grid.smart-container .smart-grid-pager[top], .smart-grid>.smart-container .smart-grid-pager[top] { border-top-color: transparent; border-bottom: 1px solid var(--smart-border) } .smart-grid.smart-container .smart-grid-content, .smart-grid>.smart-container .smart-grid-content { width: 100%; height: 100%; padding: 0; overflow: hidden; border: none; background: var(--smart-surface) } .smart-grid.smart-container.smart-grid-resize-mode, .smart-grid>.smart-container.smart-grid-resize-mode { overflow: visible } .smart-grid.smart-element { visibility: inherit } .smart-grid[sorting_mode=many] smart-grid-column[sort-index] .smart-label.align-right { margin-left: -10px } .smart-grid[sorting_mode=many] smart-grid-column[sort-index] .smart-sort-button[order] { width: 40px } .smart-grid[sorting_mode=many] smart-grid-column[sort-index] .smart-sort-button:after { content: attr(order); font-family: var(--smart-font-family); font-size: 11px; display: flex; justify-content: center; align-items: center; border-radius: 50%; background: var(--smart-primary); color: var(--smart-primary-color); padding: 5px; margin-left: 5px; height: 8px; box-sizing: content-box } .smart-grid smart-grid-row .smart-grid-row-detail { overflow: hidden; width: 100%; z-index: 3; position: absolute; background: var(--smart-background); color: var(--smart-background-color); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: var(--smart-border); transform-origin: top; transform: scaleY(0); display: flex; justify-content: flex-start } .smart-grid smart-grid-row .smart-grid-row-detail>div { width: 100%; height: 100%; line-height: initial; overflow: hidden; position: relative } .smart-grid smart-grid-column:not(.smart-grid-column-border).smart-grid-vertical-border-collapse:before, .smart-grid smart-grid-row smart-grid-cell:not(.smart-grid-column-border).smart-grid-vertical-border-collapse:before { width: 0 } .smart-grid smart-grid-column:not(.smart-grid-column-border).smart-grid-horizontal-border-collapse:after, .smart-grid smart-grid-row smart-grid-cell:not(.smart-grid-column-border).smart-grid-horizontal-border-collapse:after { height: 0 } .smart-grid smart-grid-row[has-detail] { transition: height .25s ease-in-out } .smart-grid smart-grid-row[has-detail] .smart-grid-row-detail.smart-animate { transition: transform .25s ease-in-out, height .25s ease-in-out } .smart-grid smart-grid-row[show-detail] .smart-grid-row-detail { transform: scaleY(1) } .smart-grid smart-grid-row[unbound] smart-grid-cell { background: var(--smart-grid-cell-background-unbound); color: var(--smart-grid-cell-color-unbound) } .smart-grid smart-grid-cell.dragged, .smart-grid smart-grid-column.dragged { background-image: linear-gradient(45deg, rgba(0, 0, 0, .1) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, .1) 50%, rgba(0, 0, 0, .1) 75%, transparent 75%, transparent); background-size: 3em 3em } .smart-grid smart-grid-column .smart-grid-command-item { padding: 0; align-items: center; justify-content: center; border-radius: 0 } .smart-grid smart-grid-column .smart-add-new-column { border-right: 1px solid var(--smart-border) } .smart-grid smart-grid-column.afterTarget:last-child:after { right: 0 } .smart-grid smart-grid-cell .smart-grid-command-item { padding: 0 3px; overflow: hidden } .smart-grid smart-scroll-bar { overflow: visible; position: absolute; bottom: 0; height: calc(var(--smart-scroll-bar-size)); width: 100%; z-index: 11; touch-action: none } .smart-grid smart-scroll-bar:after, .smart-grid smart-scroll-bar:before { height: var(--smart-scroll-bar-size); background: var(--smart-scroll-bar-background); content: ''; position: absolute; top: 0 } .smart-grid smart-scroll-bar:after { width: var(--smart-scroll-bar-size); min-width: var(--smart-scroll-bar-far-size); left: 100% } .smart-grid smart-scroll-bar:before { width: var(--smart-scroll-bar-near-size); left: calc(0px - var(--smart-scroll-bar-near-size)) } .smart-grid smart-scroll-bar.smart-element { border: none; border-radius: 0 } .smart-grid smart-scroll-bar.bottom-corner-visible { width: calc(100% - var(--smart-scroll-bar-size)) } .smart-grid smart-scroll-bar[orientation=vertical] { right: 0; top: 0; height: 100%; width: calc(var(--smart-scroll-bar-size)); border-left: 1px solid var(--smart-border) } .smart-grid smart-scroll-bar[orientation=vertical]:before { position: absolute; content: ''; height: var(--smart-scroll-bar-near-size); width: var(--smart-scroll-bar-size); background: var(--smart-scroll-bar-background); left: -1px; top: calc(0px - var(--smart-scroll-bar-near-size)); border-left: 1px solid var(--smart-border) } .smart-grid smart-scroll-bar[orientation=vertical]:after { position: absolute; content: ''; width: var(--smart-scroll-bar-size); height: var(--smart-scroll-bar-size); min-height: var(--smart-scroll-bar-far-size); background: var(--smart-scroll-bar-background); left: 0; bottom: calc(0px - var(--smart-scroll-bar-far-size)); top: auto; min-width: 0; z-index: -1 } .smart-grid smart-scroll-bar[orientation=vertical].bottom-corner-visible { height: calc(100% - var(--smart-scroll-bar-size)) } .smart-grid .smart-data-view-header-drop-down { transition: transform ease-in-out .2s; transform: scaleY(0) } .smart-grid .smart-data-view-header-drop-down.open { transform: scaleY(1) } .smart-grid .smart-breadcrumb-items>.afterTarget:last-child:after, .smart-grid .smart-breadcrumb-items>.target:before { content: ''; display: none } .smart-grid .smart-grid-command-item { display: flex; padding: 5px 8px; user-select: none; min-width: 25px; border: 1px solid transparent; cursor: pointer; border-top-left-radius: var(--smart-item-border-top-left-radius); border-top-right-radius: var(--smart-item-border-top-right-radius); border-bottom-right-radius: var(--smart-item-border-bottom-right-radius); border-bottom-left-radius: var(--smart-item-border-bottom-left-radius) } .smart-grid .smart-grid-command-item:hover { background: var(--smart-ui-state-hover); color: var(--smart-ui-state-color-hover); border: 1px solid var(--smart-ui-state-border-hover) } .smart-grid .smart-grid-command-item:active { background: var(--smart-ui-state-active); color: var(--smart-ui-state-color-active); border: 1px solid var(--smart-ui-state-border-active) } .smart-grid .smart-grid-command-item .smart-grid-icon { display: flex; min-width: 16px; width: auto } .smart-grid .smart-grid-command-item span:last-child:not(:first-child) { margin-left: 4px } .smart-grid .smart-grid-command-bar { display: flex; align-items: center; padding: 5px } .smart-grid .smart-grid-command-bar .smart-grid-icon { display: flex } .smart-grid .smart-grid-row:not([leaf]) smart-grid-cell[group]:not([header]) div:not([content]) { visibility: hidden } .smart-grid .smart-grid-resize-line { position: absolute; z-index: 99; opacity: .8; width: var(--smart-grid-resize-line-size); background: var(--smart-primary) } .smart-grid .smart-grid-resize-line.row { height: var(--smart-grid-resize-line-size) } .smart-grid .smart-grid-resize-tooltip { position: absolute; bottom: 0; z-index: 99; background: var(--smart-primary); color: var(--smart-primary-color); padding: 5px; transition: width .2s ease-out } .smart-grid .smart-grid-drag-line:after, .smart-grid .smart-grid-drag-line:before { color: var(--smart-primary); left: 0; margin-left: -7px; font-weight: 700; font-size: 16px } .smart-grid .smart-grid-drag-line { position: absolute; z-index: 199; opacity: 1; width: calc(2 * var(--smart-grid-resize-line-size)); background: var(--smart-primary); font-family: var(--smart-font-family-icon); transition: opacity cubic-bezier(.6, .2, 0, .8) .25s } .smart-grid .smart-grid-drag-line:after { content: var(--smart-icon-arrow-up); position: absolute; bottom: 0; margin-bottom: -11px } .smart-grid .smart-grid-drag-line:before { content: var(--smart-icon-arrow-down); position: absolute; top: 0; margin-top: -7px } .smart-grid .smart-grid-drag-line.row { height: calc(2 * var(--smart-grid-resize-line-size)) } .smart-grid .smart-grid-drag-line.row:after { content: var(--smart-icon-arrow-left); right: 0; left: initial; bottom: 0; margin-right: -7px; font-weight: 700; margin-bottom: -7px } .smart-grid[grouped] smart-grid-row[level]>.smart-grid-cell-container>smart-grid-cell div[content]>div[checkbox]:not(.smart-hidden), .smart-grid[tree] smart-grid-row[level]>.smart-grid-cell-container>smart-grid-cell div[content]>div[checkbox]:not(.smart-hidden) { margin-right: 7px } .smart-grid .smart-grid-drag-line.row:before { content: var(--smart-icon-arrow-right); left: 0 } .smart-grid[tree] smart-grid-row[level]>.smart-grid-cell-container>smart-grid-cell div[content] { line-height: initial; width: 100%; height: 100%; display: flex; align-items: center } .smart-grid[grouped] smart-grid-row[level]>.smart-grid-cell-container>smart-grid-cell div[content] { line-height: initial; width: 100%; height: 100%; display: flex; align-items: center } .smart-grid[grouped] smart-grid-row[level] smart-grid-cell[group] { border-right: 1px solid var(--smart-border); padding-right: 1px } .smart-grid[grouped] smart-grid-row[level] smart-grid-cell[group] div[group-advanced] { font-size: 12px; grid-template-columns: auto auto auto; display: grid; grid-column-gap: 5px; align-items: center } .smart-grid[grouped] smart-grid-row[level] smart-grid-cell[group] div[group-advanced] span[group] { font-size: var(--smart-font-size); font-weight: 700 } .smart-grid[grouped] smart-grid-row[level] smart-grid-cell[group] div[group-advanced] span[value] { position: relative; white-space: nowrap; text-overflow: ellipsis; user-select: none; display: flex; align-items: center; padding: 4px 12px; font-weight: 400; border-radius: 4px; background-color: var(--smart-primary); color: var(--smart-primary-color); border: 1px solid var(--smart-primary) } .smart-grid[grouped] smart-grid-row[level] smart-grid-cell[group] div[group-advanced] span[summary] { font-weight: 400; font-size: 10px; opacity: .7 } .smart-grid[appearance_allow-header-hover] smart-grid-cell[header]:hover, .smart-grid[appearance_allow-header-hover] smart-grid-column:not(.top-far-corner):not(.top-near-corner)[header]:hover, .smart-grid[appearance_allow-hover] smart-grid-row:hover smart-grid-cell:not(.smart-add-new-column) { background: var(--smart-ui-state-hover); color: var(--smart-ui-state-color-hover); cursor: default } .smart-grid[appearance_show-column-header-drag-icon][behavior_allow-column-reorder] smart-grid-column:not([auto-generated]) .smart-drag-handle { transition: opacity ease-in-out .2s; overflow: hidden; opacity: 0; width: 5px; height: 100%; position: absolute; left: 1px; z-index: 9; font-family: var(--smart-font-family-icon); cursor: move } .smart-grid[appearance_show-column-header-drag-icon][behavior_allow-column-reorder] smart-grid-column:not([auto-generated]) .smart-drag-handle:before { position: relative; font-family: var(--smart-font-family-icon); content: var(--smart-icon-ellipsis); transform: rotate(90deg); display: flex; justify-content: center } .smart-grid[appearance_show-column-header-drag-icon][behavior_allow-column-reorder] smart-grid-column:not([auto-generated]) .smart-drag-handle:hover { opacity: 1 } .smart-grid[appearance_show-row-header-drag-icon] smart-grid-row smart-grid-cell[header]:not([detail])>.smart-label { height: 100%; font-family: var(--smart-font-family-icon); font-style: normal; font-weight: 400; color: inherit; font-size: 14px; text-decoration: inherit; font-variant: normal; text-transform: none; flex-wrap: wrap; align-items: center; justify-content: center; cursor: pointer; width: 100%; position: absolute; left: 0; top: 0; min-width: 0 } .smart-grid[appearance_show-row-header-drag-icon] smart-grid-row smart-grid-cell[header]:not([detail])>.smart-label:before { background: var(--smart-ui-state-hover); color: var(--smart-ui-state-color-hover); position: absolute; left: 0; width: 100%; content: var(--smart-icon-ellipsis); cursor: move; transform: rotate(90deg); display: flex; align-items: flex-end; justify-content: center; opacity: .25 } .smart-grid[appearance_show-row-header-edit-icon] smart-grid-row[edit] smart-grid-cell[header]:not([detail])>.smart-label, .smart-grid[appearance_show-row-header-edit-icon] smart-grid-row[edit][focus] smart-grid-cell[header]:not([detail])>.smart-label { height: 100%; font-family: var(--smart-font-family-icon); font-style: normal; font-weight: 400; color: inherit; font-size: 14px; text-decoration: inherit; font-variant: normal; text-transform: none; flex-wrap: wrap; align-items: center; justify-content: center; cursor: pointer; width: 100%; position: absolute; left: 0; top: 0; min-width: 0 } .smart-grid[appearance_show-row-header-edit-icon] smart-grid-row[edit] smart-grid-cell[header]:not([detail])>.smart-label:before, .smart-grid[appearance_show-row-header-edit-icon] smart-grid-row[edit][focus] smart-grid-cell[header]:not([detail])>.smart-label:before { content: var(--smart-icon-mode-edit); background: var(--smart-ui-state-hover); color: var(--smart-ui-state-color-hover); position: absolute; left: 0; width: 100% } .smart-grid[appearance_show-row-header-edit-icon] smart-grid-row[edit] smart-grid-cell[header]:not([detail]):last-child>.smart-label, .smart-grid[appearance_show-row-header-edit-icon] smart-grid-row[edit][focus] smart-grid-cell[header]:not([detail]):last-child>.smart-label { height: 100%; font-family: var(--smart-font-family-icon); font-style: normal; font-weight: 400; color: inherit; font-size: 14px; text-decoration: inherit; font-variant: normal; text-transform: none; flex-wrap: wrap; align-items: center; justify-content: center; cursor: pointer; width: 100%; position: absolute; left: 0; top: 0; min-width: 0 } .smart-grid[appearance_show-row-header-focus-icon] smart-grid-row[focus]:not([edit]) smart-grid-cell[header]:not([detail]):not(:hover)>.smart-label:before { content: var(--smart-icon-arrow-right) } .smart-grid[appearance_show-row-header-focus-icon] smart-grid-row[focus]:not([edit]) smart-grid-cell[header]:not([detail]):last-child>.smart-label, .smart-grid[appearance_show-row-header-focus-icon] smart-grid-row[focus]:not([edit]) smart-grid-cell[header]:not([detail])>.smart-label { height: 100%; font-family: var(--smart-font-family-icon); font-style: normal; font-weight: 400; color: inherit; font-size: 14px; text-decoration: inherit; font-variant: normal; text-transform: none; flex-wrap: wrap; align-items: center; justify-content: center; cursor: pointer; width: 100%; position: absolute; left: 0; top: 0; min-width: 0 } .smart-grid[appearance_show-row-header-focus-icon] smart-grid-row[focus]:not([edit]) smart-grid-cell[header]:not([detail])>.smart-label:before { content: var(--smart-icon-check-empty); background: var(--smart-ui-state-hover); color: var(--smart-ui-state-color-hover); position: absolute; left: 0; width: 100% } .smart-grid[appearance_show-row-header-select-icon][selection_enabled][selection_allow-row-header-selection] smart-grid-row smart-grid-cell[header]:not([group]):not([detail]):hover>.smart-label, .smart-grid[appearance_show-row-header-select-icon][selection_enabled][selection_allow-row-header-selection] smart-grid-row smart-grid-cell[header]:not([group]):not([detail])[selected]>.smart-label { height: 100%; font-family: var(--smart-font-family-icon); font-style: normal; font-weight: 400; color: inherit; font-size: 14px; text-decoration: inherit; font-variant: normal; text-transform: none; flex-wrap: wrap; align-items: center; justify-content: center; cursor: pointer; width: 100%; position: absolute; left: 0; top: 0; min-width: 0 } .smart-grid[appearance_show-row-header-select-icon][selection_enabled][selection_allow-row-header-selection] smart-grid-row smart-grid-cell[header]:not([group]):not([detail]):hover>.smart-label:before, .smart-grid[appearance_show-row-header-select-icon][selection_enabled][selection_allow-row-header-selection] smart-grid-row smart-grid-cell[header]:not([group]):not([detail])[selected]>.smart-label:before { content: var(--smart-icon-check-empty); background: var(--smart-ui-state-hover); color: var(--smart-ui-state-color-hover); position: absolute; left: 0; width: 100% } .smart-grid[appearance_show-row-header-select-icon][selection_enabled][selection_allow-row-header-selection] smart-grid-row smart-grid-cell[header]:not([group]):not([detail]):hover:last-child>.smart-label, .smart-grid[appearance_show-row-header-select-icon][selection_enabled][selection_allow-row-header-selection] smart-grid-row smart-grid-cell[header]:not([group]):not([detail])[selected]:last-child>.smart-label { height: 100%; font-family: var(--smart-font-family-icon); font-style: normal; font-weight: 400; color: inherit; font-size: 14px; text-decoration: inherit; font-variant: normal; text-transform: none; flex-wrap: wrap; align-items: center; justify-content: center; cursor: pointer; width: 100%; position: absolute; left: 0; top: 0; min-width: 0 } .smart-grid[appearance_show-row-header-select-icon][selection_enabled][selection_allow-row-header-selection] smart-grid-row smart-grid-cell[header]:not([group]):not([detail]):hover[selected]>.smart-label:before, .smart-grid[appearance_show-row-header-select-icon][selection_enabled][selection_allow-row-header-selection] smart-grid-row smart-grid-cell[header]:not([group]):not([detail])[selected][selected]>.smart-label:before { content: var(--smart-icon-check-squared); transform: rotate(0) } .smart-grid[appearance_show-row-header-select-icon][selection_enabled][selection_allow-row-header-selection] smart-grid-row smart-grid-cell[header]:not([group]):not([detail])[selected]>.smart-label:before { font-family: var(--smart-font-family-icon); font-style: normal; font-weight: 400; content: var(--smart-icon-check-squared); transform: rotate(0) } .smart-grid.smart-container, smart-grid>.smart-container { height: 100%; width: 100%; margin-bottom: -3px; border-style: solid; border-width: 0; border-color: transparent; position: relative; overflow: hidden; max-height: inherit; padding: 0 } smart-grid-row { display: block; overflow: visible; position: relative; padding: 0; height: var(--smart-grid-row-height); cursor: default } smart-grid-row:hover smart-grid-cell[checkbox][header][auto-show] .smart-input { opacity: 1; border-color: var(--smart-border) } smart-grid-row smart-grid-cell[header] .smart-grid-cell-editor.smart-grid-input-cell-editor { background: var(--smart-background); color: var(--smart-background-color); position: absolute; z-index: 10; left: 1px; top: 0; padding-top: 0; padding-bottom: 0; height: calc(100% - 1px); box-sizing: border-box } smart-grid-row .smart-grid-row-sub-container { overflow: visible; width: 100%; z-index: 3; position: relative; transform-origin: top } smart-grid-row .smart-grid-row-sub-container.smart-animate { transition: transform .25s ease-in-out, height .25s ease-in-out } smart-grid-row .smart-grid-command-bar { z-index: 7; height: calc(100% - 1px); position: absolute; right: 0; top: 0; box-sizing: border-box; overflow: hidden; transform: scaleX(0); transform-origin: right; transition: transform .25s ease; background: var(--smart-surface); color: var(--smart-surface-color); border-left: 1px solid var(--smart-border) } smart-grid-row .smart-grid-command-bar.show { transform: scaleX(1) } smart-grid-row[edit] { z-index: 7 } smart-grid-row[edit][error] { z-index: 101 } smart-grid-row[edit][error] smart-grid-cell[editor] { border-color: var(--smart-error) } smart-grid-row[filter=indeterminate] { opacity: .75 } smart-grid-row.smart-animate { transition: margin-bottom .25s ease-in-out, height .25s ease-in-out } smart-grid-row:not([selected]) smart-grid-cell[selected]:not([selected=indeterminate]):not([header]):not(.smart-grid-column-border):after { background: var(--smart-ui-state-color-selected); opacity: var(--smart-grid-cell-horizontal-border-opacity-selected, .3) } smart-grid-row[selected] smart-grid-cell[selected]:not([selected=indeterminate]):not([header]):not(.smart-grid-column-border):not(.smart-grid-column-border-collapse):before { background: var(--smart-ui-state-color-selected); opacity: var(--smart-grid-cell-vertical-border-opacity-selected, .3) } smart-grid-row[selected] smart-grid-cell[selected]:not([selected=indeterminate]):not([header]):not(.smart-grid-column-border):after { background: var(--smart-ui-state-color-selected); opacity: var(--smart-grid-cell-horizontal-border-opacity-selected, .3) } smart-grid-row[selected] smart-grid-cell[header] { background: var(--smart-ui-state-hover); color: var(--smart-ui-state-color-hover) } smart-grid-row[selected] smart-grid-cell[checkbox][header][auto-show] .smart-input { opacity: 1; border-color: var(--smart-border) } smart-grid-row[selected]:not([selected=indeterminate]):not([selected]+smart-grid-row[selected]:not([selected=indeterminate]):not([selected=none])) smart-grid-cell[selected]:not([editor]):not([header]):not(.smart-add-new-column) { background: var(--smart-ui-state-selected); color: var(--smart-ui-state-color-selected) } smart-grid-row[selected]:not([selected=indeterminate]):not([selected]+smart-grid-row[selected]:not([selected=indeterminate]):not([selected=none])) smart-grid-cell[selected]:not([editor]):not([header]):not(.smart-add-new-column) .smart-label:not([data-field="_addNewColumn"]):not([data-field="_rowDetailColumn"]) { border-top: 1px solid var(--smart-ui-state-selected) } smart-grid-row[selected]:not([selected=indeterminate]) smart-grid-cell[selected]:not([selected=indeterminate]):not([header]):not(.smart-grid-column-border):before { background: var(--smart-ui-state-color-selected); opacity: var(--smart-grid-cell-vertical-border-opacity-selected, .3) } smart-grid-row[selected=none] smart-grid-cell { color: var(--smart-disabled) } smart-grid-row[selected=indeterminate] smart-grid-cell[selected]:not([editor]) { background: var(--smart-ui-state-selected); color: var(--smart-ui-state-color-selected) } smart-grid-row[selected=indeterminate] smart-grid-cell[selected][focus]:not([editor]):not([rowspan]):not([colspan]) { background: var(--smart-ui-state-active); color: var(--smart-ui-state-color-active); opacity: 1 } smart-grid-row[alternation-index="0"] smart-grid-cell[editor]:not([selected]):not([header]):not([highlight]):not([freeze])>.smart-label, smart-grid-row[alternation-index="1"] smart-grid-cell[editor]:not([selected]):not([header]):not([highlight]):not([freeze])>.smart-label, smart-grid-row[alternation-index="3"] smart-grid-cell[editor]:not([selected]):not([header]):not([highlight]):not([freeze])>.smart-label, smart-grid-row[alternation-index="4"] smart-grid-cell[editor]:not([selected]):not([header]):not([highlight]):not([freeze])>.smart-label { padding: 0; margin: 0; border: 1px solid var(--smart-primary); background: var(--smart-background); box-sizing: border-box; outline: 0; width: calc(100% - 1px); height: calc(100% - 1px); position: relative; left: 1px; user-select: none } smart-grid-row[alternation-index="0"] smart-grid-cell:not([selected]):not([header]):not([update]):not([delete]):not([add]):not([freeze]):not([focus]):not([sort]):not([filter]) .smart-label { background-color: var(--smart-background); color: var(--smart-background-color); border-color: var(--smart-border) } smart-grid-row[alternation-index="1"] smart-grid-cell:not([selected]):not([header]):not([update]):not([delete]):not([add]):not([freeze]):not([focus]):not([sort]):not([filter]) .smart-label { background-color: var(--smart-alternation-index0-background); color: var(--smart-alternation-index0-color); border-color: var(--smart-alternation-index0-border) } smart-grid-row[alternation-index="2"] smart-grid-cell:not([selected]):not([header]):not([update]):not([delete]):not([add]):not([freeze]):not([focus]):not([sort]):not([filter]) .smart-label { background-color: var(--smart-alternation-index1-background); color: var(--smart-alternation-index1-color); border-color: var(--smart-alternation-index1-border) } smart-grid-row[alternation-index="3"] smart-grid-cell:not([selected]):not([header]):not([update]):not([delete]):not([add]):not([freeze]):not([focus]):not([sort]):not([filter]) .smart-label { background-color: var(--smart-alternation-index2-background); color: var(--smart-alternation-index2-color); border-color: var(--smart-alternation-index2-border) } smart-grid-row[alternation-index="4"] smart-grid-cell:not([selected]):not([header]):not([update]):not([delete]):not([add]):not([freeze]):not([focus]):not([sort]):not([filter]) .smart-label { background-color: var(--smart-alternation-index3-background); color: var(--smart-alternation-index3-color); border-color: var(--smart-alternation-index3-border) } smart-grid-column { color: var(--smart-surface-color); background: var(--smart-surface); white-space: nowrap; border-width: 0; border-style: solid; overflow: hidden; height: 100%; position: absolute; display: flex; cursor: default; min-height: 30px } smart-grid-cell.smart-add-new-column:after, smart-grid-cell.smart-add-new-column:before, smart-grid-column .smart-icon { display: none } smart-grid-column[aria-controls], smart-grid-column[focus], smart-grid-column[selected] { background: var(--smart-ui-state-hover); color: var(--smart-ui-state-color-hover) } smart-grid-column[highlight], smart-grid-column[highlight][freeze] { background: var(--smart-primary); color: var(--smart-primary-color) } smart-grid-column:hover .smart-action-button { border-color: var(--smart-ui-state-border-hover); background: var(--smart-ui-state-hover); color: var(--smart-ui-state-color-hover); cursor: pointer } smart-grid-column:hover .smart-action-button div:after, smart-grid-column:hover .smart-action-button div:before { background: var(--smart-ui-state-color-hover) } smart-grid-column .smart-icon.show { display: flex !important; width: var(--smart-grid-column-buttons-width); height: 100%; left: 4px; position: relative } smart-grid-column .smart-icon.show.smart-add-new-column { left: 0; width: 100%; justify-content: center } smart-grid-column .smart-icon .smart-grid-icon { display: flex } smart-grid-column .smart-label:not(.smart-input) { position: relative; left: 0 } smart-grid-column .smart-label:not(.smart-input).smart-animate { transition: width .25s ease } smart-grid-column .smart-label:not(.smart-input).one { width: calc(100% - var(--smart-grid-column-buttons-width)); min-width: 30px } smart-grid-column .smart-label:not(.smart-input).two { width: calc(100% - 2 * var(--smart-grid-column-buttons-width)); min-width: 30px } smart-grid-column .smart-label:not(.smart-input).three { width: calc(100% - 3 * var(--smart-grid-column-buttons-width)); min-width: 30px } smart-grid-column .smart-label:not(.smart-input).four { width: calc(100% - 4 * var(--smart-grid-column-buttons-width)); min-width: 30px } smart-grid-column .smart-label:not(.smart-input).five { width: calc(100% - 5 * var(--smart-grid-column-buttons-width)); min-width: 30px } smart-grid-column .smart-label:not(.smart-input).six { width: calc(100% - 6 * var(--smart-grid-column-buttons-width)); min-width: 30px } smart-grid-column .smart-buttons-group { height: 100%; right: 0; top: 0; display: flex; position: absolute; transform: translateX(var(--smart-grid-column-buttons-width)) } smart-grid-column .smart-buttons-group.smart-animate { transition: transform .25s ease } smart-grid-column .smart-buttons-group.action { transform: translateX(0) } smart-grid-column .smart-sort-button.asc, smart-grid-column .smart-sort-button.desc { display: flex } smart-grid-column .smart-sort-button.asc:before, smart-grid-column .smart-sort-button.desc:before { content: var(--smart-icon-arrow-down); position: relative } smart-grid-column .smart-sort-button.asc:before { transform: rotate(180deg) } smart-grid-column .smart-sort-button.desc:before { transform: rotate(0) } smart-grid-column .smart-filter-button.smart-animate:before, smart-grid-column .smart-sort-button.smart-animate:before { transition: transform .2s ease-out, opacity .3s ease-out } smart-grid-column .smart-description-button { margin-right: 3px } smart-grid-column .smart-action-button { display: flex; border-left: 1px solid var(--smart-border); background: var(--smart-surface); color: var(--smart-surface-color) } smart-grid-column .smart-action-button div { width: 14px; position: relative; display: flex !important; background: 0 0; border-top: 2px solid; border-bottom: 2px solid; color: inherit; font-size: 0; transition: all .25s ease-in-out; height: 12px } smart-grid-column .smart-action-button div:after, smart-grid-column .smart-action-button div:before { content: ''; display: block; width: 100%; height: 2px; position: absolute; top: 50%; left: 50%; background: var(--smart-surface-color); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); transition: transform .25s ease-in-out } smart-grid-column .smart-action-button.smart-animate { transition: width .25s ease } smart-grid-column .smart-action-button.active:before { -webkit-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg) } smart-grid-column .smart-action-button.active:after { -webkit-transform: translate(-50%, -50%) rotate(-45deg); transform: translate(-50%, -50%) rotate(-45deg) } smart-grid-column .smart-grid-cell-editor.smart-grid-input-cell-editor { background: var(--smart-background); color: var(--smart-background-color); position: absolute; z-index: 10; left: 1px; top: 0; padding-top: 0; padding-bottom: 0; height: calc(100% - 1px); box-sizing: border-box } smart-grid-column[freeze] { background: var(--smart-surface); color: var(--smart-surface-color) } smart-grid-column[aria-controls] .smart-action-button { border-color: var(--smart-ui-state-border-focus); background: var(--smart-ui-state-focus); color: var(--smart-ui-state-color-focus) } smart-grid-column[aria-controls] .smart-action-button div:after, smart-grid-column[aria-controls] .smart-action-button div:before { background: var(--smart-ui-state-color-focus) } smart-grid-column.smart-grid-column-border { border-width: var(--smart-border-width) } smart-grid-column.top-far-corner { width: var(--smart-scroll-bar-size); position: absolute; right: 0; top: 0; z-index: 1 } smart-grid-column:not(.smart-grid-column-border):after { background: var(--smart-grid-column-horizontal-border, var(--smart-border)) } smart-grid-column:not(.smart-grid-column-border):not(.smart-grid-column-border-collapse):before { background: var(--smart-border) } smart-grid-column:not(.smart-grid-column-border-collapse):before { background: var(--smart-grid-column-vertical-border, var(--smart-border)) } smart-grid-row[error] smart-grid-cell.smart-add-new-column.smart-add-new-column .smart-label { background: #E2E2E2 !important } smart-grid-cell { display: block; color: var(--smart-background-color); background: var(--smart-background); white-space: nowrap; border-width: 0; border-style: solid; overflow: hidden; height: 100%; position: absolute; text-overflow: ellipsis; font-size: var(--smart-grid-cell-font-size, inherit); font-weight: var(--smart-grid-cell-font-weight, inherit) } smart-grid-cell button[toggle-button]:after { justify-content: flex-start } smart-grid-cell .wrap { white-space: normal; display: flex; flex-direction: column; justify-content: center; line-height: 1.5 } smart-grid-cell .nowrap { white-space: nowrap; display: flex; flex-direction: column; justify-content: center; line-height: 1.5 } smart-grid-cell.smart-add-new-row { box-shadow: rgba(140, 149, 159, .15) 0 3px 6px 0; background-color: var(--smart-surface); font-style: italic } smart-grid-cell.smart-add-new-row>div { display: block !important } smart-grid-cell.smart-add-new-row[selected] { background: var(--smart-background) !important; color: var(--smart-background-color) !important } smart-grid-cell.smart-add-new-row[selected]::after, smart-grid-cell.smart-add-new-row[selected]::before { color: var(--smart-background-color) !important; background: var(--smart-border) !important } smart-grid-cell.smart-add-new-row:not([header]) { z-index: 7; background: var(--smart-surface) !important } smart-grid-cell.smart-add-new-row:not([header]) .smart-label { background: var(--smart-surface) !important } smart-grid-cell.smart-add-new-row:not([header]):before { opacity: 0 } smart-grid-cell.smart-add-new-row[has-toggle-button] .row-status, smart-grid-cell.smart-add-new-row[has-toggle-button] button { display: none !important } smart-grid-cell.smart-add-new-row code { border: 1px solid var(--smart-border); background-color: var(--smart-background); padding: 1px 6px; border-radius: 6px; font-size: 12px; font-family: var(--smart-font-family) } smart-grid-cell .dropdownlist, smart-grid-cell .list, smart-grid-cell .tokens { padding-left: 6px; align-items: center } smart-grid-cell .dropdownlist .smart-token, smart-grid-cell .list .smart-token, smart-grid-cell .tokens .smart-token { line-height: 1.5; display: inline-flex; margin-bottom: var(--smart-editor-label-padding) } smart-grid-cell .dropdownlist .smart-arrow-down, smart-grid-cell .list .smart-arrow-down, smart-grid-cell .tokens .smart-arrow-down { width: 0; opacity: 0; cursor: pointer } smart-grid-cell .dropdownlist.dropdownlist .smart-arrow-down, smart-grid-cell .list.dropdownlist .smart-arrow-down, smart-grid-cell .tokens.dropdownlist .smart-arrow-down { background: inherit } smart-grid-cell .dropdownlist.dropdownlist .smart-arrow-down, smart-grid-cell .dropdownlist:hover .smart-arrow-down, smart-grid-cell .list.dropdownlist .smart-arrow-down, smart-grid-cell .list:hover .smart-arrow-down, smart-grid-cell .tokens.dropdownlist .smart-arrow-down, smart-grid-cell .tokens:hover .smart-arrow-down, smart-grid-cell[focus] .list .smart-arrow-down, smart-grid-cell[focus] .tokens .smart-arrow-down { width: var(--smart-editor-addon-width); min-width: var(--smart-editor-addon-width); opacity: 1 } smart-grid-cell .images { display: grid; grid-template-columns: 1fr auto auto; height: 100% } smart-grid-cell .images .container { display: flex; height: calc(100% - 3px); align-items: center; overflow: hidden; padding-left: 5px } smart-grid-cell .images .smart-drop-image { margin-left: -5px } smart-grid-cell .images .smart-drop-image::after { font-family: var(--smart-font-family-icon); content: var(--smart-icon-download-alt); margin-left: 5px } smart-grid-cell .images .arrowbtn { width: 15px; background: var(--smart-surface) } smart-grid-cell .images .arrowbtn:hover { cursor: pointer; background: var(--smart-primary); color: var(--smart-primary-color) } smart-grid-cell .images img { height: 23px; width: 23px; border: 1px solid var(--smart-border); margin-right: 3px; border-radius: var(--smart-border-radius) } smart-grid-cell .images img:hover { cursor: pointer; border-color: var(--smart-primary) } smart-grid-cell .smart-grid-cell-editor { width: 100%; height: 100%; margin: 0; border-radius: 0; border: none; font-size: inherit; font-weight: inherit; background: inherit; color: inherit } smart-grid-cell.smart-grid-filter-row-cell .smart-filter-input-type, smart-grid-cell[has-toggle-button] button[toggle-button] { font-family: var(--smart-font-family-icon); font-style: normal; font-weight: 400; outline: 0; text-decoration: inherit; font-variant: normal; text-transform: none; cursor: pointer } smart-grid-cell.smart-grid-row-border { border-top-width: var(--smart-border-width) } smart-grid-cell.smart-grid-column-border { border-bottom-width: var(--smart-border-width); border-left-width: var(--smart-border-width); border-right-width: var(--smart-border-width) } smart-grid-cell.smart-add-new-column { background: var(--smart-surface); border-left: 1px solid var(--smart-border) } smart-grid-cell.smart-add-new-column.smart-add-new-column .smart-label { background: var(--smart-surface) !important } smart-grid-cell.smart-grid-filter-row-cell { background: var(--smart-surface); color: var(--smart-surface-color); border-color: var(--smart-surface); --smart-grid-cell-horizontal-border: transparent } smart-grid-cell.smart-grid-filter-row-cell .smart-filter-input-type { background: inherit; border: none; border-radius: 0; width: var(--smart-editor-addon-width); color: inherit; font-size: 14px; flex-wrap: wrap; align-items: center; justify-content: center } smart-grid-cell.smart-grid-filter-row-cell .smart-filter-input-value { width: calc(100% - var(--smart-editor-addon-width)); border: none; resize: none; border-radius: 0; background: inherit; color: inherit; outline: 0; overflow: hidden } smart-grid-cell.smart-grid-filter-row-cell .smart-filter-input-value.smart-grid-number-input-cell-editor .nav { border: 1px solid var(--smart-border) } smart-grid-cell.smart-grid-filter-row-cell .smart-filter-input-container { display: flex; margin-left: 1px; width: calc(100% - 1px) !important; height: 100%; border: 1px solid transparent } smart-grid-cell.smart-grid-filter-row-cell .smart-filter-input-container[focus] { border-color: var(--smart-ui-state-border-active); border-style: solid; border-width: 1px; background: var(--smart-background) } smart-grid-cell.smart-grid-filter-row-cell .smart-filter-input-container[focus] .smart-filter-input-value.smart-grid-number-input-cell-editor .nav { background: var(--smart-background) } smart-grid-cell.smart-grid-filter-row-cell[template=checkBox] .smart-filter-input-value.smart-grid-check-box-cell-editor { width: 14px; height: 14px } smart-grid-cell:not(.smart-grid-column-border):after { background: var(--smart-grid-cell-horizontal-border, var(--smart-border)) } smart-grid-cell:not(.smart-grid-column-border):not(.smart-grid-column-border-collapse):before { background: var(--smart-grid-cell-vertical-border, var(--smart-border)) } smart-grid-cell[has-toggle-button] .smart-label { padding: 0; flex-direction: unset } smart-grid-cell[has-toggle-button] .row-status { font-size: 16px; font-family: var(--smart-font-family-icon); width: 20px; min-width: 20px } smart-grid-cell[has-toggle-button] .row-status:before { color: var(--smart-surface-color); content: var(--smart-icon-star-empty); transition: opacity .2s ease-in-out; opacity: .3 } smart-grid-cell[has-toggle-button] .row-status:hover::before { color: var(--smart-primary); opacity: 1 } smart-grid-cell[has-toggle-button] .row-status.starred::before { color: var(--smart-primary); content: var(--smart-icon-star); opacity: 1 } smart-grid-cell[has-toggle-button] .row-status.custom.starred::before, smart-grid-cell[has-toggle-button] .row-status.custom:hover, smart-grid-cell[has-toggle-button] .row-status.custom:hover::before { color: inherit } smart-grid-cell[has-toggle-button] .row-status.comments::after { content: ''; width: 10px; height: 10px; background: var(--smart-error); position: absolute; transform: rotate(45deg); top: -5px; right: -5px } smart-grid-cell[has-toggle-button] button[toggle-button] { color: inherit; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; width: 20px; padding: 0; min-width: 20px; background: 0 0; border: none; font-size: 16px; flex-direction: column } smart-grid-cell[has-toggle-button] button[toggle-button]:after { content: var(--smart-icon-arrow-down) } smart-grid-cell[has-toggle-button] button[toggle-button][load]::after { background-image: url(./images/load.gif) !important; background-repeat: no-repeat !important; content: ''; width: 16px; height: 16px } smart-grid-cell[has-toggle-button] button[toggle-button].row-detail.row-comments>div { font-size: 11px; font-family: var(--smart-font-family); display: flex; justify-content: center; font-weight: 700; color: var(--smart-primary) } smart-grid-cell[has-toggle-button] button[toggle-button].row-detail.row-comments:before { content: ''; width: 10px; height: 10px; background: var(--smart-error); position: absolute; transform: rotate(45deg); top: -5px; right: -5px } smart-grid-cell[has-toggle-button] button[toggle-button].row-detail:after { content: var(--smart-icon-resize-full); font-size: 13px; color: var(--smart-primary) } smart-grid-cell[has-toggle-button] button[toggle-button].row-detail:hover:after { background: var(--smart-ui-state-selected); padding: 3px; border-radius: 50% } smart-grid-cell[has-toggle-button] button[toggle-button][toggled]:after { transform: rotate(180deg) } smart-grid-cell[has-toggle-button] button[toggle-button].smart-animate:after { transition: transform .25s ease-out } smart-grid-cell[has-toggle-button] .smart-indent { width: 14px; left: 7px; height: 100%; position: relative } smart-grid-cell[has-toggle-button] .smart-indent:after { height: 50%; content: '-'; color: var(--smart-background-color); visibility: hidden } smart-grid-cell[editor]>.smart-label:not(.smart-input), smart-grid-cell[error]:not([row-editor])>.smart-label { width: calc(100% - 1px); height: calc(100% - 1px); position: relative; user-select: none; box-sizing: border-box; outline: 0 } smart-grid-cell[has-toggle-button] .smart-indent:first-child { visibility: hidden; border-left: 1px solid var(--smart-border) } smart-grid-cell[has-toggle-button] .smart-label, smart-grid-cell[has-toggle-button] div[indent] { display: flex } smart-grid-cell[command] .smart-label { display: flex; flex-direction: row; cursor: pointer; justify-content: center } smart-grid-cell[command] .align-center { padding: 0 } smart-grid-cell[header], smart-grid-cell[header]:last-child { background: var(--smart-surface); color: var(--smart-surface-color); border-color: var(--smart-border) } smart-grid-cell[header]:not(.smart-grid-column-border):after { background: var(--smart-grid-cell-header-horizontal-border, var(--smart-grid-cell-horizontal-border, var(--smart-border))) } smart-grid-cell[header]:not(.smart-grid-column-border):not(.smart-grid-column-border-collapse):before { background: var(--smart-grid-cell-header-vertical-border, var(--smart-grid-cell-vertical-border, var(--smart-border))) } smart-grid-cell[editor]>.smart-label:not(.smart-input) { padding: 0; margin: 0 0 0 1px; border: 1px solid var(--smart-primary); background: var(--smart-background) } smart-grid-cell[selected]:not([editor]), smart-grid-cell[selected]:not([editor])[focus]:not([rowspan]):not([colspan]) { background: var(--smart-ui-state-selected); color: var(--smart-ui-state-color-selected) } smart-grid-cell[editor][row-editor] { border: 0 solid var(--smart-primary); border-top: 1px solid var(--smart-primary); border-bottom: 1px solid var(--smart-primary); border-left: 1px solid var(--smart-primary) } smart-grid-cell[editor][row-editor] .smart-label:not(.smart-input) { border: 0 solid var(--smart-primary) !important } smart-grid-cell[editor][row-editor]:first-child { border-left: 1px solid var(--smart-primary) !important } smart-grid-cell[editor][row-editor]:last-child { border-right: 1px solid var(--smart-primary) } smart-grid-cell[editor][row-editor]~smart-grid-cell[editor][row-editor] { border-left: 0 solid var(--smart-primary) } smart-grid-cell[editor=dateTimePicker] { --smart-border-radius: 0px; --smart-border-top-left-radius: 0px; --smart-border-top-right-radius: 0px; --smart-border-bottom-left-radius: 0px; --smart-border-bottom-right-radius: 0px } smart-grid-cell[editor=checkBox] .smart-label { padding-bottom: 0; justify-content: center; align-items: center; cursor: pointer } smart-grid-cell[template] .smart-label { padding-left: 0; padding-right: 0 } smart-grid-cell[template][template=url] a, smart-grid-cell[template][template=email] a { color: var(--smart-primary); font-size: var(--smart-font-size) } smart-grid-cell[template][template=url][selected] a, smart-grid-cell[template][template=email][selected] a { color: var(--smart-primary-color) } smart-grid-cell[template][template=url] .smart-label, smart-grid-cell[template][template=email] .smart-label, smart-grid-cell[template][template=modifiedTime] .smart-label, smart-grid-cell[template][template=createdTime] .smart-label, smart-grid-cell[template][template=autoNumber] .smart-label, smart-grid-cell[template][template=phone] .smart-label, smart-grid-cell[template][template=password] .smart-label { padding-left: 4px; padding-right: 2px } smart-grid-cell[template=checkBox] .smart-label { padding-bottom: 0; justify-content: center; align-items: center; cursor: pointer } smart-grid-cell[template=checkBox][readonly] .smart-label, smart-grid-cell[template=checkBox][readonly] .smart-label .smart-input:after, smart-grid-cell[template=checkBox][readonly] .smart-label:after { cursor: default !important } smart-grid-cell[template=checkBox][readonly] .smart-label:hover .smart-input { --smart-ui-state-hover: var(--smart-background) } smart-grid-cell[selected]:not([editor])[focus]:not([rowspan]):not([colspan]) { opacity: .8 } smart-grid-cell[selected]:not([editor])[freeze]:not([rowspan]):not([colspan]) { opacity: 1 } smart-grid-cell[selected]:not([editor])[freeze]:not([rowspan]):not([colspan])[header] { background: var(--smart-ui-state-hover); color: var(--smart-ui-state-color-hover) } smart-grid-cell[addNewRow] { border-right: 1px solid var(--smart-border) } smart-grid-cell[addNewRow]:after { visibility: hidden } smart-grid-cell[colspan], smart-grid-cell[rowspan] { background: var(--smart-background); color: var(--smart-background-color); z-index: 5; padding: 0 } smart-grid-cell[colspan][selected]:not([editor]), smart-grid-cell[rowspan][selected]:not([editor]) { background: var(--smart-primary) !important; color: var(--smart-primary-color) !important } smart-grid-cell[error] { overflow: visible; z-index: 9999 } smart-grid-cell[error]:not([row-editor])>.smart-label { padding: 0; margin: 0; border: 1px solid var(--smart-error) !important; left: 1px } smart-grid-cell[sort], smart-grid-cell[sort]:not([selected]) .smart-label { background: var(--smart-grid-cell-background-sort); color: var(--smart-grid-cell-color-sort) } smart-grid-cell[filter], smart-grid-cell[filter]:not([selected]) .smart-label { background: var(--smart-grid-cell-background-filter); color: var(--smart-grid-cell-color-filter) } smart-grid-cell[update] { background: var(--smart-grid-cell-background-update); color: var(--smart-grid-cell-color-update) } smart-grid-cell[add] { background: var(--smart-grid-cell-background-add); color: var(--smart-grid-cell-color-add) } smart-grid-cell[delete] { background: var(--smart-grid-cell-background-delete); color: var(--smart-grid-cell-color-delete) } smart-grid-cell[editor] { background: var(--smart-background); color: var(--smart-background-color) } smart-grid-cell[freeze] { background: var(--smart-grid-cell-background-freeze); color: var(--smart-grid-cell-color-freeze) } smart-grid-cell[highlight] .smart-label { background: #FFF1C8 !important; color: #333 !important } smart-grid-cell[highlight][highlight-data-field] { border-left: 1px solid var(--smart-primary); border-right: 1px solid var(--smart-primary) } smart-grid-cell[highlight][highlight-data-field]:first-child { border-left: 2px solid var(--smart-primary) } smart-grid-cell[group] { font-size: var(--smart-font-size) } smart-grid-cell[group] span[summary], smart-grid-cell[group] span[value] { font-weight: 600 } smart-grid-cell>.smart-label:not(.smart-input), smart-grid-column>.smart-label:not(.smart-input) { width: 100%; height: 100% } smart-grid-cell.rotate, smart-grid-column.rotate { line-height: initial; display: inline-block; left: 0; top: 0; position: absolute; transform-origin: 50% 50% 0; transform: rotate(0) } smart-grid-cell .align-left, smart-grid-column .align-left { overflow: hidden; text-overflow: ellipsis; text-align: left; padding-left: 7px; padding-right: 2px } smart-grid-cell .align-top, smart-grid-column .align-top { align-items: flex-start; display: flex; line-height: initial } smart-grid-cell .align-bottom, smart-grid-column .align-bottom { align-items: flex-end; display: flex; line-height: initial } smart-grid-cell .align-right, smart-grid-column .align-right { overflow: hidden; text-overflow: ellipsis; text-align: right; padding-right: 7px; padding-left: 2px } smart-grid-cell .align-right.align-bottom, smart-grid-column .align-right.align-bottom { flex-direction: column-reverse } smart-grid-cell .align-right.align-top, smart-grid-column .align-right.align-top { flex-direction: column; align-items: flex-end } smart-grid-cell .align-center, smart-grid-column .align-center { text-overflow: ellipsis; overflow: hidden; text-align: center; padding-right: 7px; padding-left: 7px } smart-grid-cell .align-center.align-bottom, smart-grid-cell .align-center.align-top, smart-grid-column .align-center.align-bottom, smart-grid-column .align-center.align-top { margin-left: 50%; margin-right: 50%; padding-left: 0; padding-right: 0 } smart-grid-cell .align-middle, smart-grid-column .align-middle { display: flex; align-items: center } smart-grid-cell .align-center.align-middle, smart-grid-column .align-center.align-middle { justify-content: center } smart-grid-cell.smart-grid-column-border, smart-grid-column.smart-grid-column-border { border-top-color: var(--smart-border); border-bottom-color: var(--smart-border); border-left-color: var(--smart-border); border-right-color: var(--smart-border); border-top-width: 0 } smart-grid-cell:not(.smart-grid-column-border):after, smart-grid-column:not(.smart-grid-column-border):after { height: var(--smart-border-width); width: 100%; content: ''; position: absolute; bottom: 0; left: 0 } smart-grid-cell:not(.smart-grid-column-border):not(.smart-grid-column-border-collapse):before, smart-grid-column:not(.smart-grid-column-border):not(.smart-grid-column-border-collapse):before { width: var(--smart-border-width); height: 100%; content: ''; position: absolute; top: 0; left: 0 } .smart-grid-add-column-dialog-color-panel { width: 100% } .smart-grid-add-column-dialog-color-panel .smart-sortable { width: 100%; max-height: 200px; margin-bottom: 10px; overflow: auto } .smart-grid-add-column-dialog-color-panel .smart-sortable .smart-sortable-container { overflow: hidden } .smart-grid-add-column-dialog-color-panel .smart-sortable .smart-grid-add-column-dialog-color-item { display: flex; align-items: center; width: calc(100% - 25px); margin-left: 5%; margin-top: 10px } .smart-grid-add-column-dialog-color-panel .smart-sortable .smart-grid-add-column-dialog-color-item smart-color-input .smart-color-box { border-radius: 50% } smart-menu.smart-grid-column-chooser-menu[checkboxes][checkable] smart-menu-item[level="1"] { flex-direction: row-reverse } smart-menu.smart-grid-column-chooser-menu[checkboxes][checkable] smart-menu-item[level="1"] .smart-menu-item-label-container { padding-left: 10px } smart-menu.smart-grid-column-chooser-menu[checkboxes][checkable] smart-menu-item[level="1"][checked] .smart-menu-item-label-container:after { left: initial; right: 10px } @keyframes fadeAnimation { 0%, 100% { background-color: inherit } 20%, 50% { background-color: #9F9 } } .smart-flash-cell .smart-label { background-image: none !important; animation: fadeAnimation 2s ease-in-out } [check-boxes_visible] [has-toggle-button] .smart-label, [check-boxes_visible] [has-toggle-button] .smart-label [checkbox], [checkbox] .smart-label, [checkbox] .smart-label [checkbox], [editor=checkBox] .smart-label, [editor=checkBox] .smart-label [checkbox], [template=checkBox] .smart-label, [template=checkBox] .smart-label [checkbox] { display: flex; padding-bottom: 0; justify-content: center; align-items: center; cursor: pointer } [check-boxes_visible] [has-toggle-button] .smart-input:not(.smart-grid-cell-editor), [checkbox] .smart-input:not(.smart-grid-cell-editor), [editor=checkBox] .smart-input:not(.smart-grid-cell-editor), [template=checkBox] .smart-input:not(.smart-grid-cell-editor) { width: calc(-2px + var(--smart-check-box-default-size)); height: calc(-2px + var(--smart-check-box-default-size)); line-height: var(--smart-check-box-default-size); box-sizing: initial; position: relative; border-style: solid; padding: 2px; border-width: var(--smart-border-width); border-radius: var(--smart-border-radius); font-family: inherit; font-size: 12px; background-repeat: no-repeat; border-color: var(--smart-border); background-color: transparent; color: var(--smart-background-color); display: block; outline: 0 } [check-boxes_visible] [has-toggle-button] .smart-input:not(.smart-grid-cell-editor):after, [checkbox] .smart-input:not(.smart-grid-cell-editor):after, [editor=checkBox] .smart-input:not(.smart-grid-cell-editor):after, [template=checkBox] .smart-input:not(.smart-grid-cell-editor):after { cursor: pointer; content: inherit; text-align: center; width: 100%; height: 100%; font-family: var(--smart-font-family-icon); font-weight: 400; text-decoration: inherit; font-variant: normal; text-transform: none; display: inline-block; position: absolute; left: 0; top: 2px; outline: 0 } [check-boxes_visible] [has-toggle-button] .smart-input:not(.smart-grid-cell-editor):hover, [checkbox] .smart-input:not(.smart-grid-cell-editor):hover, [editor=checkBox] .smart-input:not(.smart-grid-cell-editor):hover, [template=checkBox] .smart-input:not(.smart-grid-cell-editor):hover { border-color: var(--smart-ui-state-border-hover); background-color: var(--smart-ui-state-hover); color: var(--smart-ui-state-color-hover) } [check-boxes_visible] [has-toggle-button] .smart-input:not(.smart-grid-cell-editor)[checked], [checkbox] .smart-input:not(.smart-grid-cell-editor)[checked], [editor=checkBox] .smart-input:not(.smart-grid-cell-editor)[checked], [template=checkBox] .smart-input:not(.smart-grid-cell-editor)[checked] { border-color: var(--smart-ui-state-border-active); background-color: var(--smart-ui-state-active); color: var(--smart-ui-state-color-active) } [check-boxes_visible] [has-toggle-button] .smart-input:not(.smart-grid-cell-editor)[checked]:after, [checkbox] .smart-input:not(.smart-grid-cell-editor)[checked]:after, [editor=checkBox] .smart-input:not(.smart-grid-cell-editor)[checked]:after, [template=checkBox] .smart-input:not(.smart-grid-cell-editor)[checked]:after { content: var(--smart-icon-check) } [check-boxes_visible] [has-toggle-button] .smart-input.smart-grid-check-box-cell-editor, [checkbox] .smart-input.smart-grid-check-box-cell-editor, [editor=checkBox] .smart-input.smart-grid-check-box-cell-editor, [template=checkBox] .smart-input.smart-grid-check-box-cell-editor { width: calc(-2px + var(--smart-check-box-default-size)); height: calc(-2px + var(--smart-check-box-default-size)); line-height: var(--smart-check-box-default-size); box-sizing: initial; position: relative; border-style: solid; padding: 2px; border-width: var(--smart-border-width); border-radius: var(--smart-border-radius); font-family: inherit; font-size: 12px; background-repeat: no-repeat; border-color: var(--smart-border); background-color: transparent; color: var(--smart-background-color); display: block; outline: 0 } [check-boxes_visible] [has-toggle-button] .smart-input.smart-grid-check-box-cell-editor:after, [checkbox] .smart-input.smart-grid-check-box-cell-editor:after, [editor=checkBox] .smart-input.smart-grid-check-box-cell-editor:after, [template=checkBox] .smart-input.smart-grid-check-box-cell-editor:after { cursor: pointer; content: inherit; text-align: center; width: 100%; height: 100%; font-family: var(--smart-font-family-icon); font-weight: 400; text-decoration: inherit; font-variant: normal; text-transform: none; display: inline-block; position: absolute; left: 0; top: 2px; outline: 0 } [check-boxes_visible] [has-toggle-button] .smart-input.smart-grid-check-box-cell-editor:hover, [checkbox] .smart-input.smart-grid-check-box-cell-editor:hover, [editor=checkBox] .smart-input.smart-grid-check-box-cell-editor:hover, [template=checkBox] .smart-input.smart-grid-check-box-cell-editor:hover { border-color: var(--smart-ui-state-border-hover); background-color: var(--smart-ui-state-hover); color: var(--smart-ui-state-color-hover) } [check-boxes_visible] [has-toggle-button] .smart-input.smart-grid-check-box-cell-editor[checked], [checkbox] .smart-input.smart-grid-check-box-cell-editor[checked], [editor=checkBox] .smart-input.smart-grid-check-box-cell-editor[checked], [template=checkBox] .smart-input.smart-grid-check-box-cell-editor[checked], smart-grid-cell[checkbox][selected] .smart-input:not(.smart-grid-cell-editor), smart-grid-column[checkbox][selected] .smart-input:not(.smart-grid-cell-editor) { border-color: var(--smart-ui-state-border-active); background-color: var(--smart-ui-state-active); color: var(--smart-ui-state-color-active) } [check-boxes_visible] [has-toggle-button] .smart-input.smart-grid-check-box-cell-editor[checked]:after, [checkbox] .smart-input.smart-grid-check-box-cell-editor[checked]:after, [editor=checkBox] .smart-input.smart-grid-check-box-cell-editor[checked]:after, [template=checkBox] .smart-input.smart-grid-check-box-cell-editor[checked]:after { content: var(--smart-icon-check) } smart-grid-cell[checkbox], smart-grid-column[checkbox] { display: flex; padding-bottom: 0; justify-content: center; align-items: center; cursor: pointer } .smart-grid-column-menu[right-to-left] .smart-filter-panel .smart-filter-panel-button-container, .smart-grid[grouped][right-to-left] smart-grid-row[group]>.smart-grid-cell-container>smart-grid-cell div[content], .smart-grid[tree][right-to-left] smart-grid-row[level]>.smart-grid-cell-container>smart-grid-cell div[content] { flex-direction: row-reverse } smart-grid-cell[checkbox][selected] .smart-input:not(.smart-grid-cell-editor):after, smart-grid-column[checkbox][selected] .smart-input:not(.smart-grid-cell-editor):after { content: var(--smart-icon-check) } smart-grid-cell[checkbox][checked=indeterminate]:after, smart-grid-cell[checkbox][selected=indeterminate] .smart-input:not(.smart-grid-cell-editor):after, smart-grid-column[checkbox][checked=indeterminate]:after, smart-grid-column[checkbox][selected=indeterminate] .smart-input:not(.smart-grid-cell-editor):after { top: 0; background-color: var(--smart-ui-state-color-active) } [has-toggle-button][selected] [checkbox] .smart-input[checked] { border-color: var(--smart-ui-state-border-hover); background-color: var(--smart-ui-state-hover); color: var(--smart-ui-state-color-hover) } [freeze][checkbox][auto-show] .smart-input { opacity: 0; transition: opacity ease-in-out .2s } [freeze][checkbox][auto-show][selected] .smart-input { opacity: 1; border-color: var(--smart-border) } [radioButton][selected] .smart-input:after { content: var(--smart-icon-radio) } [editor=checkBox] .smart-input { left: -1px } [editor=checkBox] .smart-input:focus { border-color: var(--smart-ui-state-border-active) } [editor=checkBox]:not([readonly]) .smart-input:focus, [editor=checkBox]:not([readonly]) .smart-input:hover { border-color: var(--smart-ui-state-border-hover); background-color: var(--smart-ui-state-hover); color: var(--smart-ui-state-color-hover) } smart-grid-row:not([selected]):not(:hover) [header][checkbox][auto-show]:not(:hover) .smart-input { opacity: 0; transition: opacity ease-in-out .2s } .smart-grid-dialog-editor[checkbox][checked=indeterminate] .smart-input:after, .smart-grid-dialog-editor[checkbox][selected=indeterminate] .smart-input:after, smart-grid-cell[checkbox][checked=indeterminate] .smart-input:after, smart-grid-cell[checkbox][selected=indeterminate] .smart-input:after, smart-grid-column[checkbox][checked=indeterminate] .smart-input:after, smart-grid-column[checkbox][selected=indeterminate] .smart-input:after { margin: 14%; width: 70%; height: 70%; content: ''; background-color: var(--smart-ui-state-color-active); box-sizing: border-box; top: 0; border-radius: 0 } .smart-grid-dialog-editor div[checkbox] .smart-input[checked=indeterminate]:after, smart-grid-cell div[checkbox] .smart-input[checked=indeterminate]:after, smart-grid-column div[checkbox] .smart-input[checked=indeterminate]:after { margin: 14%; width: 70% !important; height: 70% !important; content: ''; background-color: var(--smart-ui-state-color-active); box-sizing: border-box; top: 0 !important; border-radius: 0 } .smart-grid-cell-editor.smart-grid-number-input-cell-editor .smart-input, .smart-grid-cell-editor.smart-grid-text-area-cell-editor .smart-input { width: calc(100% - var(--smart-editor-addon-width)); border: none; padding: var(--smart-editor-label-padding); resize: none; border-radius: 0; background: inherit; color: inherit } .smart-grid-cell-editor.smart-grid-number-input-cell-editor .smart-input { text-align: right; height: 100% } .smart-grid-cell-editor.smart-grid-number-input-cell-editor .smart-input[type=number] { -moz-appearance: textfield; -webkit-appearance: textfield } .smart-grid-cell-editor.smart-grid-number-input-cell-editor .smart-input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0 } .smart-slider-editor input[type=range] { -webkit-appearance: none; width: 100%; outline: 0; background: 0 0 } .smart-slider-editor input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 32px; height: 32px; border: 0; border-radius: 32px; margin-top: -12px; background: var(--smart-primary); background-size: 18px 12px; box-shadow: 0 0 1px rgba(0, 0, 0, .06), 0 2px 2px rgba(0, 0, 20, .1); transition: box-shadow .2s } .smart-slider-editor input[type=range]:focus::-webkit-slider-thumb { box-shadow: 0 0 1px rgba(0, 0, 0, .06), 0 4px 2px rgba(0, 0, 20, .06), 0 4px 12px rgba(0, 0, 20, .25) } .smart-slider-editor input[type=range]::-moz-range-thumb { width: 32px; height: 32px; border: 0; border-radius: 32px; background: var(--smart-primary); background-size: 18px 12px; box-shadow: 0 0 1px rgba(0, 0, 0, .06), 0 2px 2px rgba(0, 0, 20, .1); transition: box-shadow .2s } .smart-slider-editor input[type=range]:focus::-moz-range-thumb { box-shadow: 0 0 1px rgba(0, 0, 0, .06), 0 4px 2px rgba(0, 0, 20, .06), 0 4px 12px rgba(0, 0, 20, .25) } .smart-slider-editor input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 8px; border: 0; border-radius: 8px; background: #fff; box-shadow: 0 0 0 1px rgba(204, 204, 204, .25) } .smart-slider-editor input[type=range]:focus::-webkit-slider-runnable-track { box-shadow: 0 0 0 1px rgba(204, 204, 204, .75) } .smart-slider-editor input[type=range]::-moz-range-track { width: 100%; height: 8px; border: 0; border-radius: 8px; background: #fff; box-shadow: 0 0 0 1px rgba(204, 204, 204, .25) } .smart-slider-editor input[type=range]:focus::-moz-range-track { box-shadow: 0 0 0 1px rgba(204, 204, 204, .75) } .smart-grid-column-menu[right-to-left] .smart-filter-panel .smart-filter-panel-operator-list { position: relative } .smart-grid[tree][right-to-left] smart-grid-row[level]>.smart-grid-cell-container>smart-grid-cell div[content]>div[checkbox]:not(.smart-hidden) { margin-left: 5px; margin-right: initial } .smart-grid[right-to-left] .smart-grid-toolbar .smart-data-view-header { display: flex; flex-direction: row-reverse } .smart-grid[right-to-left] .smart-grid-toolbar .smart-data-view-header .smart-data-view-search-button { left: 6px; width: 24px; right: initial } .smart-grid[right-to-left] smart-grid-column .smart-add-new-column { border-left: 1px solid var(--smart-border); border-right: none } .smart-grid[right-to-left] smart-grid-cell.smart-add-new-column { border-left: 1px solid transparent !important; border-right: 1px solid var(--smart-border) } .smart-grid[right-to-left] smart-scroll-bar:after { left: initial; right: 100% } .smart-grid[right-to-left] smart-scroll-bar:before { left: 0 } .smart-grid[right-to-left] smart-scroll-bar[orientation=vertical] { right: initial; left: 0; border-right: 1px solid var(--smart-border); border-left: initial } .smart-grid[right-to-left] smart-grid-cell.smart-add-new-row:not([header]) { z-index: 5 } .smart-grid[right-to-left] smart-grid-column { direction: ltr } .smart-grid[right-to-left] smart-grid-column .smart-label.smart-animate { transition: left .25s ease, width .25s ease } .smart-grid[right-to-left] smart-grid-column .smart-label.one { left: var(--smart-grid-column-buttons-width) } .smart-grid[right-to-left] smart-grid-column .smart-label.two { left: calc(2 * var(--smart-grid-column-buttons-width)) } .smart-grid[right-to-left] smart-grid-column .smart-label.three { left: calc(3 * var(--smart-grid-column-buttons-width)) } .smart-grid[right-to-left] smart-grid-column .smart-label.four { left: calc(4 * var(--smart-grid-column-buttons-width)) } .smart-grid[right-to-left] smart-grid-column .smart-label.five { left: calc(5 * var(--smart-grid-column-buttons-width)) } .smart-grid[right-to-left] smart-grid-column .smart-label.six { left: calc(6 * var(--smart-grid-column-buttons-width)) } .smart-grid[right-to-left] smart-grid-column[has-icon] .smart-label.one { width: calc(100% - 2 * var(--smart-grid-column-buttons-width)); left: calc(1 * var(--smart-grid-column-buttons-width)) } .smart-grid[right-to-left] smart-grid-column[has-icon] .smart-label.two { width: calc(100% - 3 * var(--smart-grid-column-buttons-width)); left: calc(2 * var(--smart-grid-column-buttons-width)) } .smart-grid[right-to-left] smart-grid-column[has-icon] .smart-label.three { width: calc(100% - 4 * var(--smart-grid-column-buttons-width)); left: calc(3 * var(--smart-grid-column-buttons-width)) } .smart-grid[right-to-left] smart-grid-column[has-icon] .smart-label.four { width: calc(100% - 5 * var(--smart-grid-column-buttons-width)); left: calc(4 * var(--smart-grid-column-buttons-width)) } .smart-grid[right-to-left] smart-grid-column[has-icon] .smart-label.five { width: calc(100% - 6 * var(--smart-grid-column-buttons-width)); left: calc(5 * var(--smart-grid-column-buttons-width)) } .smart-grid[right-to-left] smart-grid-column[has-icon] .smart-label.six { width: calc(100% - 7 * var(--smart-grid-column-buttons-width)); left: calc(6 * var(--smart-grid-column-buttons-width)) } .smart-grid[right-to-left] smart-grid-column[has-icon] .smart-grid-icon.column-icon.show { right: 0; position: absolute } .smart-grid[right-to-left] smart-grid-column .smart-buttons-group { right: initial; left: 0; flex-direction: row-reverse; transform: translateX(calc(.1px - var(--smart-grid-column-buttons-width))) } .smart-grid[right-to-left] smart-grid-column .smart-buttons-group.action { transform: translateX(0) } .smart-grid[right-to-left] smart-grid-column .smart-action-button { border-right: 1px solid var(--smart-border); border-left: initial } .smart-grid[right-to-left] smart-grid-column.top-far-corner { left: 0; right: initial } .smart-grid[right-to-left] smart-grid-cell[has-toggle-button] .smart-label, .smart-grid[right-to-left] smart-grid-cell[has-toggle-button] div[indent] { flex-direction: row-reverse } .smart-grid[right-to-left] .smart-grid-column-group:not(.smart-grid-column-border):not(.smart-grid-column-border-collapse):before, .smart-grid[right-to-left] smart-grid-cell:not(.smart-grid-column-border):not(.smart-grid-column-border-collapse):before, .smart-grid[right-to-left] smart-grid-column:not(.smart-grid-column-border):not(.smart-grid-column-border-collapse):before { right: 0; left: initial } .smart-color-input-drop-down-menu.smart-grid-color-input .grid-samples-container { grid-template-columns: repeat(2, minmax(0, 1fr)) } .smart-color-input-drop-down-menu.smart-grid-color-input:not([animation=none]) .default-samples-container div { transition: transform .2s ease-in-out } .smart-color-input-drop-down-menu.smart-grid-color-input .default-samples-container div { position: relative; border-radius: 50%; border: initial; transform: scale(.95) } .smart-color-input-drop-down-menu.smart-grid-color-input .default-samples-container div.selected { transform: scale(1) } .smart-color-input-drop-down-menu.smart-grid-color-input .default-samples-container div.selected:not(.no-color):after { content: var(--smart-icon-check); width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: flex; justify-content: center; align-items: center; font-family: var(--smart-font-family-icon); color: var(--smart-secondary-color); border-radius: inherit } .smart-grid-color-input { --smart-input-drop-down-menu-width: auto } smart-column-panel, smart-formatting-panel, smart-group-panel, smart-multi-column-filter-panel, smart-sort-panel { display: block; min-width: 375px; height: var(--smart-grid-panel-default-height); padding: var(--smart-grid-panel-padding); background: var(--smart-background); color: var(--smart-background-color); width: var(--smart-grid-panel-default-width); overflow: auto } .smart-sort-panel .smart-grid-panel-maintain-sort-button, smart-column-panel, smart-formatting-panel, smart-group-panel, smart-multi-column-filter-panel, smart-sort-panel { font-size: var(--smart-font-size); font-family: var(--smart-font-family) } .smart-group-panel .smart-grid-panel-item.dragged, .smart-sort-panel .smart-grid-panel-item.dragged { opacity: .7 } .smart-group-panel .smart-grid-panel-label-by, .smart-sort-panel .smart-grid-panel-label-by { padding: 5px; width: 60px; flex-grow: 1; text-overflow: ellipsis; white-space: nowrap; overflow: hidden } .smart-group-panel .smart-grid-panel-field-container, .smart-sort-panel .smart-grid-panel-field-container { height: 100%; width: 100px; flex-grow: 3 } .smart-group-panel .smart-grid-panel-field-selection, .smart-sort-panel .smart-grid-panel-field-selection { height: 100%; width: 100% } .smart-group-panel .smart-grid-panel-from, .smart-sort-panel .smart-grid-panel-from { display: flex; justify-content: center; padding: 5px; width: 40px; flex-grow: 1; text-overflow: ellipsis; white-space: nowrap; overflow: hidden } .smart-group-panel .smart-grid-panel-direction, .smart-sort-panel .smart-grid-panel-direction { display: flex; width: 115px; flex-grow: 2; height: 100%; background-color: var(--smart-surface); border-top-right-radius: var(--smart-border-top-right-radius); border-top-left-radius: var(--smart-border-top-left-radius); border-bottom-left-radius: var(--smart-border-bottom-left-radius); border-bottom-right-radius: var(--smart-border-bottom-right-radius) } .smart-group-panel .smart-grid-panel-direction:focus, .smart-sort-panel .smart-grid-panel-direction:focus { outline: 0; box-shadow: 0 0 0 1px var(--smart-primary) } .smart-group-panel .smart-grid-panel-direction>div, .smart-sort-panel .smart-grid-panel-direction>div { display: flex; align-items: center; justify-content: center; margin: 3px; width: calc(50% - 6px); height: calc(100% - 6px); border-top-right-radius: var(--smart-border-top-right-radius); border-top-left-radius: var(--smart-border-top-left-radius); border-bottom-left-radius: var(--smart-border-bottom-left-radius); border-bottom-right-radius: var(--smart-border-bottom-right-radius) } .smart-group-panel .smart-grid-panel-buttons-container .smart-grid-panel-apply-button, .smart-multi-column-filter-panel .smart-grid-panel-buttons-container .smart-grid-panel-apply-button, .smart-sort-panel .smart-grid-panel-buttons-container .smart-grid-panel-apply-button { margin-left: 5px } .smart-group-panel .smart-grid-panel-direction>div.selected, .smart-sort-panel .smart-grid-panel-direction>div.selected { background-color: var(--smart-primary); color: var(--smart-primary-color) } .smart-sort-panel .smart-grid-panel-maintain-sort { justify-content: flex-end; margin-top: 5px } .smart-sort-panel .smart-grid-panel-buttons-container { align-items: flex-start !important } .smart-sort-panel .smart-grid-panel-maintain-sort-button::before { font-family: var(--smart-font-family-icon); content: var(--smart-icon-check-empty); margin-right: 5px } .smart-sort-panel .smart-grid-panel-maintain-sort-button[active] { color: var(--smart-primary) } .smart-sort-panel .smart-grid-panel-maintain-sort-button[active]::before { font-family: var(--smart-font-family-icon); content: var(--smart-icon-check-squared) } .smart-group-panel .smart-grid-panel-item-close-button, .smart-multi-column-filter-panel .smart-grid-panel-item-close-button, .smart-sort-panel .smart-grid-panel-item-close-button { justify-content: center; width: 20px } .smart-group-panel .smart-grid-panel-item-close-button:after, .smart-multi-column-filter-panel .smart-grid-panel-item-close-button:after, .smart-sort-panel .smart-grid-panel-item-close-button:after { content: var(--smart-icon-close); font-family: var(--smart-font-family-icon) } @media (pointer:coarse) { .smart-group-panel .smart-grid-panel-item-close-button:after, .smart-multi-column-filter-panel .smart-grid-panel-item-close-button:after, .smart-sort-panel .smart-grid-panel-item-close-button:after { font-size: 16px } } .smart-group-panel .smart-grid-panel-item-close-button:hover, .smart-multi-column-filter-panel .smart-grid-panel-item-close-button:hover, .smart-sort-panel .smart-grid-panel-item-close-button:hover { color: var(--smart-ui-state-color-selected); background: var(--smart-ui-state-selected); border-color: var(--smart-ui-state-selected); cursor: pointer } .smart-group-panel .smart-grid-panel-item-close-button:active, .smart-group-panel .smart-grid-panel-item-close-button:focus, .smart-multi-column-filter-panel .smart-grid-panel-item-close-button:active, .smart-multi-column-filter-panel .smart-grid-panel-item-close-button:focus, .smart-sort-panel .smart-grid-panel-item-close-button:active, .smart-sort-panel .smart-grid-panel-item-close-button:focus { color: var(--smart-primary) } .smart-group-panel .smart-grid-panel-item-close-button:focus, .smart-multi-column-filter-panel .smart-grid-panel-item-close-button:focus, .smart-sort-panel .smart-grid-panel-item-close-button:focus { outline: 0 } .smart-group-panel .smart-grid-panel-item, .smart-multi-column-filter-panel .smart-grid-panel-item, .smart-sort-panel .smart-grid-panel-item { display: flex; align-items: center; margin-top: calc(var(--smart-grid-panel-vertical-offset)/ 2); margin-bottom: calc(var(--smart-grid-panel-vertical-offset)/ 2); width: calc(100% - var(--smart-sortable-handle-size)); height: var(--smart-grid-panel-item-height); min-height: var(--smart-grid-panel-item-height); background-color: var(--smart-background) } .smart-group-panel[close-button-position=right] .smart-grid-panel-item-close-button, .smart-multi-column-filter-panel[close-button-position=right] .smart-grid-panel-item-close-button, .smart-sort-panel[close-button-position=right] .smart-grid-panel-item-close-button { order: 1 } .smart-group-panel[close-button-position=right] .smart-sortable-container, .smart-multi-column-filter-panel[close-button-position=right] .smart-sortable-container, .smart-sort-panel[close-button-position=right] .smart-sortable-container { align-items: flex-end } .smart-column-panel .smart-grid-panel-container-footer, .smart-group-panel .smart-grid-panel-container-footer, .smart-multi-column-filter-panel .smart-grid-panel-container-footer, .smart-sort-panel .smart-grid-panel-container-footer { display: flex; flex-direction: row; justify-content: space-between } .smart-column-panel .smart-grid-panel-buttons-container, .smart-group-panel .smart-grid-panel-buttons-container, .smart-multi-column-filter-panel .smart-grid-panel-buttons-container, .smart-sort-panel .smart-grid-panel-buttons-container { width: auto; display: flex; flex-direction: row; align-items: center; justify-content: space-between } .smart-column-panel .smart-grid-panel-buttons-container span, .smart-group-panel .smart-grid-panel-buttons-container span, .smart-multi-column-filter-panel .smart-grid-panel-buttons-container span, .smart-sort-panel .smart-grid-panel-buttons-container span { display: flex; align-items: center; padding: 5px } .smart-column-panel .smart-grid-panel-buttons-container span:hover, .smart-group-panel .smart-grid-panel-buttons-container span:hover, .smart-multi-column-filter-panel .smart-grid-panel-buttons-container span:hover, .smart-sort-panel .smart-grid-panel-buttons-container span:hover { color: var(--smart-ui-state-color-selected); background: var(--smart-ui-state-selected); border-color: var(--smart-ui-state-selected); cursor: pointer } .smart-column-panel .smart-grid-panel-buttons-container span:focus, .smart-group-panel .smart-grid-panel-buttons-container span:focus, .smart-multi-column-filter-panel .smart-grid-panel-buttons-container span:focus, .smart-sort-panel .smart-grid-panel-buttons-container span:focus { outline: 0 } .smart-sort-panel .smart-sortable-container { margin-bottom: var(--smart-grid-panel-padding) } .smart-sort-panel .smart-sortable-container:empty:after { content: attr(no-sorting); margin-top: calc(var(--smart-grid-panel-vertical-offset)/ 2); margin-bottom: calc(var(--smart-grid-panel-vertical-offset)/ 2); opacity: .7 } .smart-sort-panel .smart-grid-panel-container-footer>smart-input { min-width: 215px; width: 40% } .smart-sort-panel .smart-grid-panel-item-close-button { display: flex; align-items: center; padding: 5px } .smart-multi-column-filter-panel>.smart-container { display: grid; grid-auto-rows: 1fr max-content; grid-row-gap: var(--smart-grid-panel-padding) } .smart-multi-column-filter-panel .smart-filter-panel-items-container { overflow: auto; padding-top: 10px } .smart-multi-column-filter-panel .smart-filter-panel-items-container:empty:after { margin-top: calc(var(--smart-grid-panel-vertical-offset)/ 2); margin-bottom: calc(var(--smart-grid-panel-vertical-offset)/ 2); opacity: .7; content: attr(no-filters) } .smart-multi-column-filter-panel .smart-filter-panel-add-filter-button { display: flex; align-items: center; padding: 5px } .smart-multi-column-filter-panel .smart-filter-panel-add-filter-button:hover { color: var(--smart-ui-state-color-selected); background: var(--smart-ui-state-selected); border-color: var(--smart-ui-state-selected); cursor: pointer } .smart-multi-column-filter-panel .smart-filter-panel-add-filter-button:focus { outline: 0 } .smart-multi-column-filter-panel .smart-grid-panel-item { width: 100%; display: grid; columns: 5; grid-template-columns: var(--smart-multi-column-filter-panel-template-columns); grid-gap: var(--smart-grid-panel-padding) } .smart-multi-column-filter-panel .smart-grid-panel-item>* { width: 100% } .smart-multi-column-filter-panel .smart-grid-panel-item-close-button { display: flex; align-items: center; padding: 5px } .smart-multi-column-filter-panel[close-button-position=right] { --smart-multi-column-filter-panel-template-columns: 60px 2fr 3fr 3fr 15px } .smart-kanban-column-panel .smart-grid-panel-item::after, .smart-kanban-column-panel .smart-grid-panel-item::before { display: none !important } .smart-group-panel .smart-sortable-container smart-column-panel smart-sortable { margin-bottom: var(--smart-grid-panel-padding) } .smart-group-panel .smart-sortable-container:empty:after { margin-top: calc(var(--smart-grid-panel-vertical-offset)/ 2); margin-bottom: calc(var(--smart-grid-panel-vertical-offset)/ 2); opacity: .7; content: attr(no-grouping) } .smart-group-panel .smart-grid-panel-container-footer>smart-input { min-width: 215px; width: 40% } .smart-group-panel .smart-grid-panel-item-close-button { display: flex; align-items: center; padding: 5px } .smart-group-panel .smart-grid-panel-direction, .smart-group-panel .smart-grid-panel-from { display: none } .smart-group-panel .smart-grid-panel-expand-collapse { justify-content: flex-end; margin-top: 10px; margin-bottom: 10px } .smart-group-panel .smart-group-panel-expand-button { margin-left: 15px } .smart-group-panel .smart-group-panel-collapse-button[active], .smart-group-panel .smart-group-panel-expand-button[active] { color: var(--smart-primary) } .smart-format-panel .smart-grid-panel-buttons-container { width: auto; display: flex; flex-direction: row; align-items: center; justify-content: space-between } .smart-format-panel .smart-grid-panel-buttons-container span { display: flex; align-items: center; padding: 5px } .smart-format-panel .smart-grid-panel-buttons-container span:hover { color: var(--smart-ui-state-color-selected); background: var(--smart-ui-state-selected); border-color: var(--smart-ui-state-selected); cursor: pointer } .smart-format-panel .smart-grid-panel-buttons-container .smart-grid-panel-apply-button { margin-left: 5px } .smart-format-panel.smart-grid-panel-container-footer { display: flex; flex-direction: row; height: 50px; justify-content: center; padding: 15px } .smart-column-panel { --smart-grid-panel-item-height: 20px; min-width: 100px } .smart-column-panel.smart-container, .smart-column-panel>.smart-container { display: flex; flex-direction: column } .smart-column-panel smart-sortable { flex: 5; min-height: 50px; overflow: auto; max-height: var(--smart-column-panel-drop-down-height) } .smart-column-panel .smart-column-panel-find-container { display: flex; align-items: center; border-bottom: 2px solid var(--smart-border); height: var(--smart-editor-height); position: relative } .smart-column-panel .smart-column-panel-find-container input { outline: 0; border: none; width: calc(100% - 16px); height: 100%; font-family: var(--smart-font-family); font-size: var(--smart-font-size); background: var(--smart-grid-panel-background); color: var(--smart-grid-panel-color) } .smart-column-panel .smart-column-panel-find-container .clear-button { width: 16px; cursor: pointer } .smart-column-panel .smart-column-panel-find-container .clear-button:after { content: var(--smart-icon-cancel); font-family: var(--smart-font-family-icon); display: flex; align-items: center; justify-content: center } .smart-column-panel .smart-column-panel-find-container.no-results:after { content: attr(no-results); position: absolute; top: calc(100% + 10px) } .smart-column-panel .smart-column-panel-label { margin-left: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .smart-column-panel .smart-column-panel-label.icon { position: relative; padding-left: var(--smart-column-icon-size) } .smart-column-panel .smart-column-panel-label.icon:after { content: ''; position: absolute; left: 0; top: 0; width: var(--smart-column-icon-size); height: 100%; background-repeat: no-repeat; background-position: center } .smart-column-panel .smart-grid-panel-buttons-container { width: 100%; justify-content: center; margin-top: 3px } .smart-column-panel .smart-grid-panel-buttons-container .smart-grid-panel-apply-button { margin-left: 5px } .smart-column-panel .smart-grid-panel-container-footer { display: grid; grid-template-columns: auto auto } .smart-column-panel .toggle-visibility { width: 16px; height: 16px; font-family: var(--smart-font-family-icon); cursor: pointer; display: flex; align-items: center; justify-content: center } .smart-column-panel .toggle-visibility:after { content: var(--smart-icon-visibility) } .smart-column-panel .toggle-visibility:focus { outline: 0; color: var(--smart-primary) } .smart-column-panel .toggle-visibility.disable-toggle { pointer-events: none; opacity: .5 } .smart-column-panel .toggle-visibility.hidden:after { content: var(--smart-icon-visibility-off) } .smart-column-panel .clear-button:focus { outline: 0; color: var(--smart-primary) } .smart-column-panel .smart-grid-panel-item { display: flex; align-items: center; margin-top: calc(var(--smart-grid-panel-vertical-offset)/ 2); margin-bottom: calc(var(--smart-grid-panel-vertical-offset)/ 2); width: calc(100% - var(--smart-sortable-handle-size)); height: var(--smart-grid-panel-item-height); min-height: var(--smart-grid-panel-item-height); background-color: var(--smart-background) } .smart-column-panel .smart-grid-panel-item.group:after, .smart-column-panel .smart-grid-panel-item.group:before { opacity: 0 !important; pointer-events: none } .smart-column-panel .smart-grid-panel-item.indent { padding-left: 12px } .smart-grid-panel-apply-button, .smart-grid-panel-cancel-button { padding: 5px 8px; min-width: 80px; display: flex; text-transform: uppercase } .smart-grid-panel-reset-button { text-decoration: underline; display: flex; align-items: center; cursor: pointer; text-transform: uppercase } .smart-grid-panel-cancel-button { background: var(--smart-surface); color: var(--smart-surface-color); border: 1px solid var(--smart-border); border-radius: var(--smart-border-radius); justify-content: center } .smart-grid-panel-apply-button { border-radius: var(--smart-border-radius); justify-content: center; background: var(--smart-primary); color: var(--smart-primary-color); border: 1px solid var(--smart-primary) } .smart-data-view-header { padding: 3px; position: relative; display: grid; grid-template-areas: "views customize filter sort format details delete . search"; grid-template-columns: minmax(0, max-content) minmax(50px, max-content) minmax(50px, max-content) minmax(50px, max-content) minmax(50px, max-content) minmax(50px, max-content) 1fr 24px; grid-gap: 10px; grid-template-rows: 100%; background: var(--smart-surface); color: var(--smart-surface-color) } .smart-data-view-header-button { display: flex; align-items: center; justify-content: center; padding: 5px 5px 5px 25px; height: 30px; margin-top: 5px; position: relative; cursor: pointer; border-top-right-radius: var(--smart-border-top-right-radius); border-top-left-radius: var(--smart-border-top-left-radius); border-bottom-left-radius: var(--smart-border-bottom-left-radius); border-bottom-right-radius: var(--smart-border-bottom-right-radius) } .smart-data-view-header-button:after { position: absolute; font-family: var(--smart-font-family-icon); left: 8px } .smart-data-view-header-button:active { color: var(--smart-ui-state-color-active); background-color: var(--smart-ui-state-active) } .smart-data-view-header-button:focus { outline: var(--smart-primary) solid 1px } .smart-data-view-header-button:hover { color: var(--smart-ui-state-color-hover); background-color: var(--smart-ui-state-hover) } .smart-data-view-header-button[aria-expanded=true] { color: var(--smart-ui-state-color-selected); background-color: var(--smart-ui-state-selected); border-color: var(--smart-ui-state-border-selected) } .smart-data-view-header-button.smart-data-view-search-button:active { color: var(--smart-ui-state-active) } .smart-data-view-header-button>div { text-overflow: ellipsis; white-space: nowrap; overflow: hidden } .smart-data-view-header-drop-down { position: absolute; background-color: var(--smart-background); box-shadow: var(--smart-elevation-8); z-index: 1000; height: auto; transform: scaleY(1); transform-origin: top; opacity: 1 } .smart-data-view-header-drop-down smart-column-panel, .smart-data-view-header-drop-down smart-multi-column-filter-panel, .smart-data-view-header-drop-down smart-sort-panel { width: 100%; border: none } .smart-data-view-header-drop-down.smart-visibility-hidden { transform: scaleY(0); opacity: 0 } .smart-data-view-header-drop-down.customize-panel { width: var(--smart-data-view-customize-panel-width) } .smart-data-view-header-drop-down.filter-panel { width: var(--smart-data-view-filter-panel-width) } .smart-data-view-header-drop-down.format-panel { max-height: 320px; overflow: auto } .smart-data-view-header-drop-down.sort-panel { width: var(--smart-data-view-sort-panel-width) } .smart-data-view-header-drop-down.search-panel { width: var(--smart-data-view-search-panel-width); padding: var(--smart-data-view-padding) } .smart-data-view-header-drop-down.search-panel .smart-data-view-search-box { display: grid; grid-template-columns: 1fr 16px; grid-template-rows: 100%; grid-gap: 2px; align-items: center } .smart-data-view-header-drop-down.search-panel .smart-data-view-search-box.matches { grid-template-columns: 1fr max-content 16px 16px 16px } .smart-data-view-header-drop-down.search-panel .smart-data-view-search-box.matches .smart-data-view-search-next, .smart-data-view-header-drop-down.search-panel .smart-data-view-search-box.matches .smart-data-view-search-prev { display: flex } .smart-data-view-header-drop-down.search-panel .smart-data-view-search-box.matches .smart-data-view-search-label { display: block } .smart-data-view-header-drop-down.search-panel .smart-data-view-search-box.no-matches { grid-template-columns: 1fr max-content 16px } .smart-data-view-header-drop-down.search-panel .smart-data-view-search-box.no-matches .smart-data-view-search-label { display: block } .smart-data-view-header-drop-down.search-panel input { outline: 0; border: none; min-width: 0; padding: 0; font-family: var(--smart-font-family); font-size: var(--smart-font-size); background: var(--smart-background); color: var(--smart-background-color) } .smart-data-view-search-box div:focus { outline: var(--smart-primary) solid 1px } .smart-data-view-search-button { grid-area: search; margin-right: 0; padding: 0 } .smart-data-view-search-button:after { content: var(--smart-icon-search) } .smart-data-view-customize-button { grid-area: customize } .smart-data-view-customize-button:after { content: var(--smart-icon-visibility-off) } .smart-data-view-customize-button.hidden { background-color: var(--smart-info); color: var(--smart-info-color) } .smart-data-view-delete-button { grid-area: delete } .smart-data-view-delete-button:after { content: var(--smart-icon-delete) } .smart-data-view-details-button { grid-area: details } .smart-data-view-details-button:after { content: var(--smart-icon-resize-full) } .smart-data-view-filter-button { grid-area: filter } .smart-data-view-filter-button:after { content: var(--smart-icon-filter) } .smart-data-view-filter-button.filtered { background-color: var(--smart-success); color: var(--smart-success-color) } .smart-data-view-sort-button { grid-area: sort } .smart-data-view-sort-button:after { content: var(--smart-icon-sort) } .smart-data-view-sort-button.sorted { background-color: #FDE1A8; color: var(--smart-surface-color) } .smart-data-view-group-button { grid-area: group } .smart-data-view-group-button:after { content: var(--smart-icon-group) } .smart-data-view-group-button.grouped { background-color: var(--smart-secondary); color: var(--smart-secondary-color) } .smart-data-view-download-button.formatted, .smart-data-view-format-button.formatted, .smart-data-view-views-button.formatted { background-color: var(--smart-primary); color: var(--smart-primary-color) } .smart-data-view-format-button { grid-area: format } .smart-data-view-format-button:after { content: var(--smart-icon-table) } .smart-data-view-download-button { grid-area: download } .smart-data-view-download-button:after { content: var(--smart-icon-arrow-down); position: initial; margin-left: 8px } .smart-data-view-download-button:before { font-family: var(--smart-font-family-icon); left: 8px; content: var(--smart-icon-download-alt); position: absolute } .smart-data-view-views-button { grid-area: views } .smart-data-view-views-button:after { content: var(--smart-icon-arrow-down); position: initial; margin-left: 8px } .smart-data-view-views-button:before { font-family: var(--smart-font-family-icon); left: 8px; content: var(--smart-icon-table-alt); position: absolute } .smart-data-view-views-button.kanban:before { content: var(--smart-icon-kanban) } .smart-grid-toolbar .smart-data-view-header { height: 100%; display: flex } .smart-grid-toolbar .smart-data-view-header-button { margin-right: 0 } .smart-grid-toolbar .smart-data-view-header-button.smart-disabled { pointer-events: none; opacity: .5 } .smart-grid-toolbar .smart-data-view-search-button { position: absolute; right: 30px; top: 0 } .smart-card-view .smart-data-view-header-button, .smart-kanban .smart-data-view-header-button { margin-top: 0; height: 100% } .smart-card-view .smart-data-view-header-button.smart-data-view-search-button, .smart-kanban .smart-data-view-header-button.smart-data-view-search-button { min-width: 30px } .smart-card-view:not([animation=none]) .smart-data-view-header-drop-down, .smart-data-view-header-drop-down[owner], .smart-kanban:not([animation=none]) .smart-data-view-header-drop-down { transition: height .2s ease-in, transform .2s ease-in, visibility .2s ease-in, opacity .2s ease-in } .smart-data-view-search-label { display: none; font-size: calc(var(--smart-font-size) - 3px); opacity: .7 } .smart-data-view-search-next, .smart-data-view-search-prev { align-items: center; justify-content: center; cursor: pointer; font-family: var(--smart-font-family-icon); font-size: 10px; display: none; background-color: var(--smart-surface); color: var(--smart-surface-color); height: 100% } .smart-data-view-search-next:hover, .smart-data-view-search-prev:hover { color: var(--smart-ui-state-color-hover); background-color: var(--smart-ui-state-hover) } .smart-data-view-search-next:active, .smart-data-view-search-prev:active { color: var(--smart-ui-state-color-active); background-color: var(--smart-ui-state-active) } .smart-data-view-search-prev:after { content: var(--smart-icon-arrow-up) } .smart-data-view-search-next:after { content: var(--smart-icon-arrow-down) } .smart-data-view-search-close { display: flex; align-items: center; justify-content: center; cursor: pointer; font-family: var(--smart-font-family-icon); font-size: 10px; color: var(--smart-background-color) } .smart-data-view-search-close:after { content: var(--smart-icon-close) } .smart-data-view-search-close:hover { color: var(--smart-ui-state-color-hover); background-color: var(--smart-ui-state-hover) } .smart-data-view-search-close:active { color: var(--smart-ui-state-color-active); background-color: var(--smart-ui-state-active) } .smart-data-view-found { outline: var(--smart-outline) solid 4px; outline-offset: -4px } .smart-data-view-highlighted { box-shadow: 0 0 23px 1px var(--smart-primary); outline: var(--smart-primary) solid 4px; outline-offset: -4px } [header-position=bottom] .smart-data-view-header-drop-down { transform-origin: bottom } .smart-formatting-panel { width: var(--smart-formatting-panel-default-width); min-height: 150px; padding: 0; overflow: visible } .smart-formatting-panel>.smart-container { position: relative; min-height: inherit } .smart-formatting-panel .smart-formatting-panel-items-container { width: 100%; height: 100%; padding: 0 calc(2 * var(--smart-grid-panel-padding)); overflow: auto } .smart-formatting-panel .smart-formatting-panel-item>.format-label { grid-area: format-label; justify-self: end } .smart-formatting-panel .smart-formatting-panel-item>.font-family-input { grid-area: font-family-input } .smart-formatting-panel .smart-formatting-panel-item>.font-size-input { grid-area: font-size-input } .smart-formatting-panel .smart-formatting-panel-item>.popup-button { display: flex; align-items: center; border: var(--smart-border-width) solid var(--smart-border); width: 100%; height: 100%; grid-area: popup-button; justify-content: center; cursor: pointer; font-size: 20px; font-weight: 700 } .smart-formatting-panel .smart-formatting-panel-item>.preview { display: flex; align-items: center; border: var(--smart-border-width) solid var(--smart-border); width: 100%; height: 100%; grid-area: preview; padding: 0 var(--smart-grid-panel-padding) } .smart-formatting-panel .smart-add-new-button { display: block; position: absolute; bottom: calc(var(--smart-grid-panel-padding) - 5px); right: calc(var(--smart-grid-panel-padding) - 5px); width: var(--smart-formatting-panel-add-new-button-size); height: var(--smart-formatting-panel-add-new-button-size); border-radius: 50%; background-color: var(--smart-primary); color: var(--smart-primary-color); cursor: pointer; opacity: .3 } .smart-formatting-panel .smart-add-new-button:after { content: '+'; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 35px } .smart-formatting-panel .smart-add-new-button:focus, .smart-formatting-panel .smart-add-new-button:hover { opacity: 1; transform: scale(1.2, 1.2) } .smart-formatting-panel .smart-add-new-button:focus { outline: 0 } .smart-formatting-panel .close-button:focus, .smart-formatting-panel .popup-button:focus, .smart-formatting-panel-popup .colors-container:focus, .smart-formatting-panel-popup .header>div:focus, .smart-formatting-panel-popup input:focus { outline: var(--smart-ui-state-border-active) solid var(--smart-border-width) } .smart-formatting-panel.scroll .smart-add-new-button { right: calc(12px + var(--smart-grid-panel-padding)); border-radius: 50% } .smart-formatting-panel:not([animation=none]) .smart-add-new-button { transition: transform cubic-bezier(.81, .27, 0, .93) .5s, opacity .2s ease-in } .smart-formatting-panel-item { display: grid; grid-template-columns: auto 3fr 2fr var(--smart-formatting-panel-row-height) 1fr .5fr 1fr 1fr; grid-template-rows: var(--smart-formatting-panel-row-height) var(--smart-formatting-panel-row-height); grid-template-areas: "value-label columns-input condition-input condition-input first-value first-value first-value close-button" "format-label font-family-input font-size-input popup-button preview preview preview close-button"; gap: var(--smart-grid-panel-padding); border-bottom: var(--smart-border-width) solid var(--smart-border); width: 100%; padding: calc(2 * var(--smart-grid-panel-padding)) 0 } .smart-formatting-panel-item:last-child { border-bottom: none } .smart-formatting-panel-item>* { min-width: 0; max-width: none; min-height: 0; max-height: none; width: auto; align-self: center; justify-self: center } .smart-formatting-panel-item>.value-label { grid-area: value-label; justify-self: end } .smart-formatting-panel-item>.columns-input { grid-area: columns-input } .smart-formatting-panel-item>.condition-input { grid-area: condition-input } .smart-formatting-panel-item>.first-value { grid-area: first-value } .smart-formatting-panel-item>.ampersand { grid-area: ampersand; display: none } .smart-formatting-panel-item>.second-value { grid-area: second-value; display: none } .smart-formatting-panel-item>.close-button { grid-area: close-button; position: relative; width: 16px; height: 16px } .smart-formatting-panel-item>.close-button:after { content: var(--smart-icon-close); display: flex; align-items: center; justify-content: center; position: absolute; width: 100%; height: 100%; font-size: 20px; font-family: smart-icons; opacity: .5; cursor: pointer } .smart-formatting-panel-item.between { grid-template-areas: "value-label columns-input condition-input condition-input first-value ampersand second-value close-button" "format-label font-family-input font-size-input popup-button preview preview preview close-button" } .smart-formatting-panel-item.between>.ampersand, .smart-formatting-panel-item.between>.second-value { display: block } .smart-formatting-panel-popup { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: var(--smart-formatting-panel-row-height) var(--smart-formatting-panel-row-height) auto var(--smart-formatting-panel-row-height); grid-template-areas: "header header" "code input" "colors colors" "apply cancel"; gap: var(--smart-grid-panel-padding); position: absolute; border: var(--smart-border-width) solid var(--smart-border); border-top-right-radius: var(--smart-border-top-right-radius); border-top-left-radius: var(--smart-border-top-left-radius); border-bottom-left-radius: var(--border-bottom-left-radius); border-bottom-right-radius: var(--smart-border-bottom-right-radius); width: var(--smart-formatting-panel-popup-width); padding: var(--smart-grid-panel-padding); background-color: var(--smart-background); box-shadow: var(--smart-elevation-8); z-index: 1003; opacity: 1; transform: scale(1); transform-origin: top; font-family: var(--smart-font-family); font-size: var(--smart-font-size) } .smart-formatting-panel-popup .header, .smart-formatting-panel-popup input, .smart-formatting-panel-popup>.color-code { border: var(--smart-border-width) solid var(--smart-border) } .smart-formatting-panel-popup>.color-code { width: 100%; height: 100%; grid-area: code; display: flex; align-items: center; box-sizing: border-box; padding: var(--smart-grid-panel-padding); color: var(--smart-background-color) } .smart-formatting-panel-popup .header { grid-area: header; display: flex } .smart-formatting-panel-popup .header>div { display: flex; flex-direction: row; align-items: center; justify-content: center; width: 50%; height: 100%; text-transform: uppercase; font-weight: 700; cursor: pointer; color: var(--smart-background-color) } .smart-formatting-panel-popup .header>div:first-child { border-right: var(--smart-border-width) solid var(--smart-border) } .smart-formatting-panel-popup .header>.selected { background-color: var(--smart-ui-state-selected); color: var(--smart-ui-state-color-selected) } .smart-formatting-panel-popup input { width: 100%; height: 100%; grid-area: input; background-color: var(--smart-background); cursor: pointer } .smart-formatting-panel-popup input:focus { border-color: var(--smart-ui-state-border-focus) } .smart-formatting-panel-popup .colors-container { grid-area: colors; display: grid; grid-template-columns: repeat(8, 1fr); grid-auto-rows: var(--smart-formatting-panel-color-box-height); gap: 3px; width: 100% } .smart-formatting-panel-popup .colors-container>div { border: var(--smart-border-width) solid var(--smart-border); cursor: pointer } .smart-formatting-panel-popup .colors-container>div.selected { position: relative; display: flex; align-items: center; justify-content: center } .smart-formatting-panel-popup .colors-container>div.selected:after { display: flex; align-items: center; justify-content: center; position: absolute; height: 100%; font-size: 20px; font-family: smart-icons; cursor: pointer; border-radius: 50%; content: var(--smart-icon-check); background-color: var(--smart-background-color); color: var(--smart-background); width: var(--smart-formatting-panel-color-box-height); opacity: 1 } .smart-formatting-panel-popup>smart-button { --smart-button-padding: 0 } .smart-formatting-panel-popup>.apply { grid-area: apply } .smart-formatting-panel-popup>.cancel { grid-area: cancel } .smart-formatting-panel-popup:not([animation=none]) { transition: transform .2s ease-in-out, opacity .2s ease-in-out, visibility .2s ease-in-out } .smart-formatting-panel-popup.smart-visibility-hidden { transform: scale(0); opacity: 0 } .smart-column-panel[right-to-left] .smart-column-panel-find-container { direction: rtl } .smart-column-panel[right-to-left] .smart-grid-panel-buttons-container { flex-direction: row-reverse } .smart-column-panel[right-to-left] .smart-grid-panel-item { right: var(--smart-sortable-handle-size); justify-content: space-between } .smart-group-panel[right-to-left] .smart-grid-panel-buttons-container, .smart-group-panel[right-to-left] .smart-grid-panel-direction, .smart-sort-panel[right-to-left] .smart-grid-panel-buttons-container, .smart-sort-panel[right-to-left] .smart-grid-panel-direction { flex-direction: row-reverse } .smart-column-panel[right-to-left] .toggle-visibility { order: 1 } .smart-group-panel[right-to-left] .smart-grid-panel-from, .smart-group-panel[right-to-left] .smart-grid-panel-label-by, .smart-group-panel[right-to-left] .smart-group-panel-apply-button, .smart-group-panel[right-to-left] .smart-group-panel-cancel-button, .smart-group-panel[right-to-left] .smart-group-panel-collapse-button, .smart-group-panel[right-to-left] .smart-group-panel-expand-button { direction: rtl } .smart-group-panel[right-to-left] .smart-group-panel-expand-button { margin-left: initial; margin-right: 5px } .smart-group-panel[right-to-left] .smart-grid-panel-label-by { order: 3 } .smart-group-panel[right-to-left] .smart-grid-panel-field-container { order: 2 } .smart-group-panel[right-to-left] .smart-grid-panel-from { order: 1 } .smart-group-panel[right-to-left] .smart-sortable .smart-sortable-items-parent { direction: unset } .smart-group-panel[right-to-left][close-button-position=right] .smart-grid-panel-item-close-button { order: 4 } .smart-sort-panel[right-to-left] .smart-grid-panel-apply-button, .smart-sort-panel[right-to-left] .smart-grid-panel-cancel-button { direction: rtl } .smart-sort-panel[right-to-left] .smart-grid-panel-label-by { order: 3 } .smart-sort-panel[right-to-left] .smart-grid-panel-field-container { order: 2 } .smart-sort-panel[right-to-left] .smart-grid-panel-from { order: 1 } .smart-sort-panel[right-to-left] .smart-sortable .smart-sortable-items-parent { direction: unset } .smart-sort-panel[right-to-left][close-button-position=right] .smart-grid-panel-item-close-button { order: 4 } .smart-multi-column-filter-panel[right-to-left] .smart-filter-panel-add-filter-button, .smart-multi-column-filter-panel[right-to-left] .smart-filter-panel-items-container:empty, .smart-multi-column-filter-panel[right-to-left] .smart-grid-panel-apply-button, .smart-multi-column-filter-panel[right-to-left] .smart-grid-panel-cancel-button, .smart-multi-column-filter-panel[right-to-left] .smart-grid-panel-item-close-button+div { direction: rtl } .smart-multi-column-filter-panel[right-to-left] .smart-grid-panel-item>.smart-grid-panel-item-close-button+div { order: 3 } .smart-multi-column-filter-panel[right-to-left] .smart-grid-panel-item>.smart-input:nth-of-type(1) { order: 2 } .smart-multi-column-filter-panel[right-to-left] .smart-grid-panel-item>.smart-input:nth-of-type(2) { order: 1 } .smart-multi-column-filter-panel[right-to-left] .smart-grid-panel-buttons-container { flex-direction: row-reverse } .smart-multi-column-filter-panel[right-to-left][close-button-position=right] .smart-grid-panel-item-close-button { order: 4 } [right-to-left] .smart-data-view-header-drop-down.search-panel .smart-data-view-search-box { direction: rtl } [right-to-left] .smart-data-view-header { grid-template-areas: "search . sort filter customize"; grid-template-columns: 24px 1fr minmax(50px, max-content) minmax(50px, max-content) minmax(50px, max-content) } [right-to-left] .smart-data-view-header-button:not(.smart-data-view-search-button) { direction: rtl; padding-left: 5px; padding-right: 25px } [right-to-left] .smart-data-view-header-button:after { right: 5px; left: initial } .smart-formatting-panel[right-to-left] { direction: rtl } .smart-formatting-panel[right-to-left] .smart-add-new-button { left: calc(var(--smart-grid-panel-padding) - 5px); right: unset } .smart-formatting-panel[right-to-left].scroll .smart-add-new-button { left: calc(12px + var(--smart-grid-panel-padding)) } .smart-input-group>.custom-select:not(:first-child), .smart-input-group>.form-control:not(:first-child), .smart-input-group>.smart-input-group-append>.smart-input-group-text, .smart-input-group>.smart-input-group-append>smart-button, .smart-input-group>.smart-input-group-prepend:first-child>.smart-input-group-text:not(:first-child), .smart-input-group>.smart-input-group-prepend:first-child>smart-button:not(:first-child), .smart-input-group>.smart-input-group-prepend:not(:first-child)>.smart-input-group-text, .smart-input-group>.smart-input-group-prepend:not(:first-child)>smart-button { border-top-left-radius: 0; border-bottom-left-radius: 0 } .smart-input-group>.custom-select:not(:last-child), .smart-input-group>.form-control:not(:last-child), .smart-input-group>.smart-input-group-append:last-child>.smart-input-group-text:not(:last-child), .smart-input-group>.smart-input-group-append:last-child>smart-button:not(:last-child):not(.dropdown-toggle), .smart-input-group>.smart-input-group-append:not(:last-child)>.smart-input-group-text, .smart-input-group>.smart-input-group-append:not(:last-child)>smart-button, .smart-input-group>.smart-input-group-prepend>.smart-input-group-text, .smart-input-group>.smart-input-group-prepend>smart-button { border-top-right-radius: 0; border-bottom-right-radius: 0 } .smart-input-group smart-button[focus], .smart-input-group>.custom-file:focus, .smart-input-group>.custom-select:focus, .smart-input-group>.form-control:focus, .smart-input-group>.form-control[focus] { z-index: 3 } .smart-input-group-append, .smart-input-group-append .smart-input-group-text+.smart-input-group-text, .smart-input-group-append .smart-input-group-text+smart-button, .smart-input-group-append smart-button+.smart-input-group-text, .smart-input-group-append smart-button+smart-button, .smart-input-group-prepend .smart-input-group-text+.smart-input-group-text, .smart-input-group-prepend .smart-input-group-text+smart-button, .smart-input-group-prepend smart-button+.smart-input-group-text, .smart-input-group-prepend smart-button+smart-button, .smart-input-group>.custom-file+.custom-file, .smart-input-group>.custom-file+.custom-select, .smart-input-group>.custom-file+.form-control, .smart-input-group>.custom-select+.custom-file, .smart-input-group>.custom-select+.custom-select, .smart-input-group>.custom-select+.form-control, .smart-input-group>.form-control+.custom-file, .smart-input-group>.form-control+.custom-select, .smart-input-group>.form-control+.form-control { margin-left: -1px } .form-control, .smart-input-group-text { padding: .375rem .75rem; line-height: 1.5 } .smart-input-group { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; box-sizing: border-box; font-family: var(--smart-font-family) } .smart-input-group smart-input .smart-drop-down-button { border-left: none } .smart-input-group>.custom-file, .smart-input-group>.custom-select, .smart-input-group>.form-control { position: relative; flex: 1 1 auto; width: 1%; margin-bottom: 0 } .smart-input-group-append, .smart-input-group-prepend { display: -webkit-box; display: -ms-flexbox; display: flex; box-sizing: border-box; height: auto } .smart-input-group-append>smart-button, .smart-input-group-prepend>smart-button { height: 100% } .smart-input-group-prepend { margin-right: -1px } .smart-input-group-text { border-radius: var(--smart-border-radius); display: flex; align-items: center; margin-bottom: 0; font-size: 1rem; font-weight: 400; color: var(--smart-surface-color); text-align: center; white-space: nowrap; background-color: var(--smart-surface); border: 1px solid var(--smart-border) } .form-control, .smart-form { font-size: var(--smart-font-size); display: block } .form-control { border-radius: var(--smart-border-radius); height: auto; width: 100%; color: #495057; background-color: var(--smart-background); background-clip: padding-box; -webkit-background-clip: padding-box; border: 1px solid var(--smart-border); transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out } .form-control:focus, .form-control[focus] { color: var(--smart-color); background-color: var(--smart-background); border-color: var(--smart-primary); outline: 0 } .smart-form { background: var(--smart-background); color: var(--smart-background-color); border: 0 solid var(--smart-border); border-radius: var(--smart-border-radius); box-sizing: border-box; overflow: visible; width: 600px; font-family: var(--smart-font-family) } @media only screen and (max-width:600px) { .smart-form { width: 350px } } .smart-form-editor, .smart-form-tab-strip[vertical] .smart-form-tab .smart-form-tab-label { width: 100% } .smart-form-row { padding: 5px 0; box-sizing: border-box } .smart-form-row .smart-form-control-label { display: flex; align-items: center; white-space: nowrap; text-overflow: ellipsis; font-family: var(--smart-font-family); font-size: calc(.9 * var(--smart-font-size)) } .smart-form-row .smart-form-control+.smart-form-label[required]:before, .smart-form-row .smart-form-control-label[required]:after { content: '*'; color: #a94442; font-size: 14px; margin-left: 2px; margin-right: 2px } .smart-form-row .smart-form-control { display: flex; box-sizing: border-box } .smart-form-row .smart-form-control+.smart-form-control-label[required]:after { content: '' } .smart-form-row-flex { display: flex } .smart-form-control .smart-form-control-addon { display: flex; align-items: center } .smart-form-control.left { justify-content: flex-start } .smart-form-control.center { justify-content: center } .smart-form-control.right { justify-content: flex-end } .smart-form-control[readonly] .smart-form-editor { pointer-events: none } .smart-form-control[readonly] .smart-form-editor .smart-calendar-button, .smart-form-control[readonly] .smart-form-editor .smart-drop-down-button { visibility: hidden } .smart-form-control[readonly] .smart-form-editor div, .smart-form-control[readonly] .smart-form-editor input, .smart-form-control[readonly] .smart-form-editor span, .smart-form-control[readonly] .smart-form-editor textarea { border: none !important } .smart-form-control[readonly] .smart-form-editor+.smart-form-control-addon, .smart-form-control[readonly] .smart-form-editor+.smart-form-control-icon, .smart-form-control[readonly] .smart-form-editor+div { visibility: hidden } .smart-form-control-icon:after { content: attr(tooltip); visibility: hidden; white-space: nowrap; margin-top: 25px; position: absolute; border-top-left-radius: var(--smart-border-top-left-radius); border-top-right-radius: var(--smart-border-top-right-radius); border-bottom-left-radius: var(--smart-border-bottom-left-radius); border-bottom-right-radius: var(--smart-border-bottom-right-radius); padding: 7px; background-color: var(--smart-secondary); color: var(--smart-secondary-color); font-size: calc(var(--smart-font-size) - 2px); opacity: 0; transform: scale(0); transition: opacity .2s ease-out, transform .1s ease-out; z-index: 9 } .smart-form-control-icon:hover:after { visibility: visible; opacity: .9; transform: scale(1); color: var(--smart-secondary-color); background: var(--smart-secondary) } .smart-form-control-label[readonly]:after { visibility: hidden } .smart-form-group .smart-form-group-content { display: grid; grid-template-columns: none } .smart-form-group[columns="2"]>.smart-form-group-content { grid-template-columns: 50% 50% } .smart-form-group[columns="3"]>.smart-form-group-content { grid-template-columns: 33% 33% 33% } .smart-form-group[columns="4"]>.smart-form-group-content { grid-template-columns: 25% 25% 25% 25% } .smart-form-group[columns="5"]>.smart-form-group-content { grid-template-columns: 20% 20% 20% 20% 20% } .smart-form-group[columns="6"]>.smart-form-group-content { grid-template-columns: 16.66% 16.66% 16.66% 16.66% 16.66% 16.66% } .smart-form-group-label { font-size: 20px; font-family: var(--smart-font-family); padding-top: 10px; padding-bottom: 10px; margin-bottom: 20px; border-bottom: 1px solid var(--smart-border) } .smart-form-group-label.center { display: flex; justify-content: center } .smart-form-group-label.right { display: flex; justify-content: flex-end } .smart-form-group-buttons { display: flex; justify-content: flex-end; padding-right: 30px } .smart-form-editor.smart-validation-success:not(smart-check-box):not([focus])>div.smart-container::after, input.smart-form-editor.smart-valid:not(:focus)+.smart-success-label-like-after-element { display: none } .smart-form-group-buttons smart-button { margin-left: 20px } .smart-form-editor.smart-validation-error:not(smart-check-box)>div.smart-container::after, .smart-form-editor.smart-validation-success:not(smart-check-box)[focus]>div.smart-container::after { left: initial; right: 0; z-index: 9 } .smart-form-editor.smart-number-input[focus]:not([drop-down-button-position=none]).smart-validation-error[focus] input, .smart-form-editor.smart-number-input[focus]:not([drop-down-button-position=none]).smart-validation-success[focus] input, .smart-form-editor.smart-numeric-text-box.smart-validation-error:not(smart-check-box)>div.smart-container input, .smart-form-editor.smart-numeric-text-box.smart-validation-success:not(smart-check-box)[focus]>div.smart-container input, .smart-form-editor.smart-numeric-text-box[focus][spin-buttons].smart-validation-error[focus] input, .smart-form-editor.smart-numeric-text-box[focus][spin-buttons].smart-validation-success[focus] input { padding-right: 30px } .smart-form-editor.smart-combo-box.smart-validation-error:not(smart-check-box)>div.smart-container::after, .smart-form-editor.smart-combo-box.smart-validation-success:not(smart-check-box)[focus]>div.smart-container::after, .smart-form-editor.smart-date-time-picker.smart-validation-error:not(smart-check-box)>div.smart-container::after, .smart-form-editor.smart-date-time-picker.smart-validation-success:not(smart-check-box)[focus]>div.smart-container::after, .smart-form-editor.smart-drop-down-list.smart-validation-error:not(smart-check-box)>div.smart-container::after, .smart-form-editor.smart-drop-down-list.smart-validation-success:not(smart-check-box)[focus]>div.smart-container::after, .smart-form-editor.smart-number-input.smart-validation-error:not(smart-check-box)>div.smart-container::after, .smart-form-editor.smart-number-input.smart-validation-success:not(smart-check-box)[focus]>div.smart-container::after, .smart-form-editor.smart-numeric-text-box.smart-validation-error:not(smart-check-box)>div.smart-container::after, .smart-form-editor.smart-numeric-text-box.smart-validation-success:not(smart-check-box)[focus]>div.smart-container::after { right: 20px } .smart-form-editor.smart-invalid+.smart-error-label-like-after-element, .smart-form-editor.smart-valid+.smart-success-label-like-after-element { left: initial; right: 0; z-index: 9 } input.smart-form-editor.smart-invalid+.smart-error-label-like-after-element, input.smart-form-editor.smart-valid+.smart-success-label-like-after-element { right: 35px } .smart-form-tab { grid-row: 1; display: flex; align-items: center; justify-content: center; min-width: 0; cursor: pointer; font-family: var(--smart-font-family); box-sizing: border-box; transition: background-color .2s ease-in-out } .smart-form-tab.selected { border-bottom: 2px solid var(--smart-primary); color: var(--smart-primary) } .smart-form-tab.smart-invalid { border-bottom: 2px solid var(--smart-error); color: var(--smart-error) } .smart-form-tab-strip { display: grid; grid-auto-columns: 1fr; overflow: hidden; border-bottom: var(--smart-border-width) solid var(--smart-border); height: 30px; margin-bottom: 10px } .smart-form-tab-strip .smart-form-tab .smart-form-tab-label { font-size: calc(var(--smart-font-size) + 1px); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 5px } .smart-form-tab-strip .smart-form-tab:hover { background: var(--smart-ui-state-hover); color: var(--smart-ui-state-color-hover) } .smart-form-tab-strip[vertical] { display: flex; height: auto; flex-direction: column; background: var(--smart-background); border: none; border-radius: initial; padding-bottom: 1px } .smart-form-tab-strip[vertical] .smart-form-tab { background-color: var(--smart-surface); color: var(--smart-surface-color); overflow: hidden; border: var(--smart-border-width) solid var(--smart-border); border-radius: 0; padding: 10px; margin-bottom: -1px; justify-content: left } .smart-form-tab-strip[vertical] .smart-form-tab .smart-form-tab-button { float: right; transition: transform .3s ease-in-out; transform: rotate(-180deg); font-size: 17px } .smart-form-tab-strip[vertical] .smart-form-tab.selected { background: var(--smart-ui-state-focus) } .smart-form-tab-strip[vertical] .smart-form-tab.selected .smart-form-tab-button { transform: rotate(0) } .smart-form-tab-strip[vertical] .smart-form-tab.smart-invalid { color: var(--smart-error); background-color: var(--smart-surface) } .smart-form-tab-strip[breadcrumb] { border: none } .smart-form-tab-strip[breadcrumb] .smart-form-tab { border-bottom: none } .smart-form-tab-strip[breadcrumb] .smart-form-tab .smart-form-tab-label { display: flex; align-items: center } .smart-form-tab-strip[breadcrumb] .smart-form-tab .smart-form-tab-label .circle { border-radius: 100%; font-family: var(--smart-font-family); width: 12px; height: 12px; padding: 5px; margin-right: 10px; background: var(--smart-secondary); color: var(--smart-secondary-color); align-items: center; justify-content: center; display: flex } .smart-form-tab-strip[breadcrumb] .smart-form-tab.smart-invalid { color: var(--smart-color) } .smart-form-tab-strip[breadcrumb] .smart-form-tab.selected .smart-form-tab-label .circle { background: var(--smart-primary); color: var(--smart-primary-color) } .smart-form-tab-control { padding: 0; display: none !important } .smart-form-tab-control.selected { margin-bottom: -1px; display: grid !important } .smart-form-tab-control.selected[vertical] { padding: 10px; border: 1px solid var(--smart-border) } .smart-form-options-horizontal { display: flex } smart-led { padding: 0; width: var(--smart-led-default-width); height: var(--smart-led-default-height); display: inline-block; border-radius: 50% } smart-led .smart-container { cursor: pointer; height: 100%; position: relative; display: flex; overflow: hidden } smart-led .smart-ripple { background: var(--smart-primary) } smart-led[focus] { outline: 0 } smart-led[disabled] .smart-container { cursor: initial } smart-led[shape=square] { border-radius: 0 } .smart-led.smart-container { cursor: pointer; height: 100%; position: relative; display: flex; overflow: hidden } .smart-led .smart-input { width: 100%; height: 100%; border-radius: 100%; text-align: center; display: flex; align-items: center; justify-content: center; min-width: 20px; min-height: 20px; padding: 4%; background-clip: content-box; border-style: solid; box-sizing: border-box; border-width: var(--smart-border-width); border-color: var(--smart-border); font-family: inherit; font-size: inherit; outline: 0 } .smart-led .smart-false-content-container, .smart-led .smart-indeterminate-content-container, .smart-led .smart-true-content-container { border-radius: 50%; width: 100%; height: 100%; align-items: center; justify-content: center; overflow: hidden; text-overflow: ellipsis } .smart-led .smart-false-content-container { display: flex; background-color: transparent } .smart-led .smart-true-content-container { display: none; background-color: var(--smart-primary) } .smart-led .smart-indeterminate-content-container { display: none; background-color: #d3d3d3 } .smart-led .smart-false-content, .smart-led[checked] .smart-true-content { display: flex; align-items: center; overflow: hidden; text-overflow: ellipsis; width: 100%; height: 100% } .smart-led .smart-false-content { justify-content: center } .smart-led[focus] .smart-input { border: var(--smart-border-width) solid var(--smart-ui-state-border-focus); background: var(--smart-ui-state-focus); color: var(--smart-ui-state-color-focus) } .smart-led:hover .smart-input { border: var(--smart-border-width) solid var(--smart-ui-state-border-hover); background: var(--smart-ui-state-hover); color: var(--smart-ui-state-color-hover); transition: background-color .1s linear } .smart-led.active .smart-input { border: var(--smart-border-width) solid var(--smart-ui-state-border-active); background: var(--smart-ui-state-active); color: var(--smart-ui-state-color-active) } .smart-led[checked] .smart-true-content { justify-content: center } .smart-led[checked] .smart-false-content-container { display: none } .smart-led[checked] .smart-true-content-container { display: flex } .smart-led[checked=null] .smart-indeterminate-content { display: flex; align-items: center; justify-content: center; overflow: hidden; text-overflow: ellipsis; width: 100%; height: 100% } .smart-led[checked=null] .smart-indeterminate-content-container { display: flex } .smart-led[checked=null] .smart-true-content-container { display: none } .smart-led[shape=square] .smart-false-content-container, .smart-led[shape=square] .smart-indeterminate-content-container, .smart-led[shape=square] .smart-input, .smart-led[shape=square] .smart-true-content-container { border-radius: 0 } .smart-led[right-to-left] .smart-false-content-container, .smart-led[right-to-left] .smart-indeterminate-content-container, .smart-led[right-to-left] .smart-true-content-container { direction: rtl } smart-list-box, smart-list-item, smart-list-items-group { visibility: hidden } smart-list-item.smart-element, smart-list-items-group.smart-element { border: none; visibility: inherit } smart-list-item .smart-input, smart-list-items-group .smart-input { margin-left: 4px; width: calc(-4px + var(--smart-check-box-default-size)); height: calc(-4px + var(--smart-check-box-default-size)); line-height: var(--smart-check-box-default-size); box-sizing: initial; position: absolute; top: var(--smart-list-item-vertical-offset); margin-top: calc(var(--smart-list-item-height)/ 2 - 10px); border-style: solid; padding: 3px; border-width: var(--smart-border-width); border-radius: var(--smart-list-item-check-box-radius); font-family: inherit; background-repeat: no-repeat; border-color: var(--smart-border); background-color: var(--smart-background); color: var(--smart-background-color); display: block } smart-list-item .smart-input:after, smart-list-items-group .smart-input:after { content: ''; font-family: var(--smart-font-family-icon); display: flex; justify-content: center; align-content: center; margin-top: -2px } smart-list-item .smart-input.smart-hidden, smart-list-items-group .smart-input.smart-hidden { display: none } smart-list-item[selected] .smart-input, smart-list-items-group[selected] .smart-input { border-color: var(--smart-primary); background-color: var(--smart-primary); color: var(--smart-primary-color) } smart-list-item[hover] .smart-input:hover, smart-list-items-group[hover] .smart-input:hover { border-color: var(--smart-ui-state-border-hover); background-color: var(--smart-ui-state-hover); color: var(--smart-ui-state-color-hover) } smart-list-item[display-mode=checkBox][selected] .smart-input:after, smart-list-items-group[display-mode=checkBox][selected] .smart-input:after { content: var(--smart-icon-check) } smart-list-item { background-color: inherit; -webkit-font-smoothing: antialiased; letter-spacing: .00937em; width: 100%; outline: 0; display: flex; align-items: center; padding: 0 5px; height: calc(var(--smart-list-item-height) + var(--smart-list-item-vertical-offset)); position: relative; user-select: none } smart-list-item .smart-content, smart-list-item .smart-overlay { transition: opacity 280ms ease-in-out; height: calc(100% - var(--smart-list-item-vertical-offset)); border-top-left-radius: var(--smart-item-border-top-left-radius); border-top-right-radius: var(--smart-item-border-top-right-radius); border-bottom-left-radius: var(--smart-item-border-bottom-left-radius); border-bottom-right-radius: var(--smart-item-border-bottom-right-radius); left: 0; width: 100%; top: var(--smart-list-item-vertical-offset); overflow: hidden } smart-list-item .smart-container { display: flex; align-items: center } smart-list-item .smart-overlay { display: inline-block; position: absolute; background: var(--smart-background) } smart-list-item .smart-content { position: absolute; white-space: nowrap; display: flex; align-items: flex-start; flex-direction: column; justify-content: center; padding: var(--smart-list-item-padding); color: var(--smart-background-color); border-width: var(--smart-item-border-width); border-style: solid; border-color: transparent } smart-list-item .smart-content-details { opacity: .5; margin-top: 2px; font-size: 10px } smart-list-item .smart-input:before { content: ''; width: 100%; height: 100%; display: inline-block; position: absolute; left: 0; top: 2px; text-align: center; background: var(--smart-primary) !important; transition: opacity .2s ease-in-out; opacity: 0; border-radius: 100%; transform: scale(1) } smart-list-item .smart-ripple { background: var(--smart-list-item-color-active) } smart-list-item.smart-list-item-line-feedback { border-top-color: var(--smart-secondary); border-top-width: 1px; border-top-style: dashed } smart-list-item.smart-list-item-bottom-line-feedback { border-bottom-color: var(--smart-secondary); border-bottom-width: 1px; border-bottom-style: dashed } smart-list-item.smart-header-item, smart-list-item[grouped] { color: var(--smart-surface-color); text-transform: var(--smart-list-item-group-header-text-transform); top: var(--smart-list-item-vertical-offset); margin-bottom: var(--smart-list-item-vertical-offset); background: var(--smart-surface); border-width: 1px; border-style: solid; border-color: var(--smart-surface); display: flex; align-items: center } smart-list-item:focus, smart-list-item:focus .smart-input { outline: 0 } smart-list-item[hover] .smart-overlay { background-color: var(--smart-ui-state-hover) } smart-list-item[hover] .smart-content { color: var(--smart-ui-state-color-hover); border-color: var(--smart-ui-state-border-hover) } smart-list-item[selected] .smart-overlay { background-color: var(--smart-ui-state-selected) } smart-list-item[selected] .smart-content { color: var(--smart-ui-state-color-selected); border-color: var(--smart-ui-state-border-selected) } smart-list-item[selected].smart-list-item-line-feedback { border-top-color: var(--smart-secondary); border-top-width: 1px; border-top-style: dashed } smart-list-item[selected].smart-list-item-bottom-line-feedback { border-bottom-color: var(--smart-secondary); border-bottom-width: 1px; border-bottom-style: dashed } smart-list-item[display-mode=checkBox] .smart-content, smart-list-item[display-mode=checkBox] .smart-overlay, smart-list-item[display-mode=radioButton] .smart-content, smart-list-item[display-mode=radioButton] .smart-overlay { padding: 5px; left: calc(16px + var(--smart-check-box-default-size)); width: calc(100% - 16px - var(--smart-check-box-default-size)) } smart-list-item[display-mode=checkBox][selected][alternation-index="0"] .smart-overlay, smart-list-item[display-mode=radioButton][selected][alternation-index="0"] .smart-overlay { background-color: var(--smart-alternation-index0-background); color: var(--smart-alternation-index0-color); border-color: var(--smart-alternation-index0-border) } smart-list-item[display-mode=checkBox][selected][alternation-index="1"] .smart-overlay, smart-list-item[display-mode=radioButton][selected][alternation-index="1"] .smart-overlay { background-color: var(--smart-alternation-index1-background); color: var(--smart-alternation-index1-color); border-color: var(--smart-alternation-index1-border) } smart-list-item[display-mode=checkBox][selected][alternation-index="2"] .smart-overlay, smart-list-item[display-mode=radioButton][selected][alternation-index="2"] .smart-overlay { background-color: var(--smart-alternation-index2-background); color: var(--smart-alternation-index2-color); border-color: var(--smart-alternation-index2-border) } smart-list-item[display-mode=radioButton] .smart-input { border-radius: 100% } smart-list-item[display-mode=radioButton][selected] .smart-input:after { content: var(--smart-icon-radio) } smart-list-items-group>.smart-container { height: auto } smart-list-items-group .smart-list-items-group-label { background-color: inherit; -webkit-font-smoothing: antialiased; letter-spacing: .00937em; width: 100%; outline: 0; padding: 0 5px; height: calc(var(--smart-list-item-height) + var(--smart-list-item-vertical-offset)); position: relative; user-select: none; color: var(--smart-surface-color); top: var(--smart-list-item-vertical-offset); margin-bottom: var(--smart-list-item-vertical-offset); background: var(--smart-surface); border-width: 1px; border-style: solid; border-color: var(--smart-surface); display: flex; align-items: center; text-transform: capitalize; border-radius: initial } smart-list-items-group .smart-list-items-group-label .smart-container { display: flex; align-items: center } smart-list-items-group:focus .smart-input { outline: 0 } smart-list-box { display: block; width: var(--smart-list-box-default-width); height: var(--smart-list-box-default-height) } smart-list-box.smart-element { visibility: inherit } smart-list-box:focus { outline: 0; border-color: var(--smart-outline) } smart-list-box:focus smart-list-item[focus] .smart-overlay { background-color: var(--smart-ui-state-focus) } smart-list-box:focus smart-list-item[focus] .smart-content { color: var(--smart-ui-state-color-focus); border-color: var(--smart-ui-state-border-focus) } smart-list-box:focus smart-list-item[focus][selected] .smart-overlay { background-color: var(--smart-ui-state-selected) } smart-list-box:focus smart-list-item[focus][selected] .smart-content { color: var(--smart-ui-state-color-selected); border-color: var(--smart-ui-state-border-selected) } .smart-list-box smart-list-item.smart-header-item[hover], .smart-list-box[disabled] smart-list-item { color: inherit } smart-list-box smart-scroll-bar[orientation=vertical].bottom-corner { height: calc(100% - var(--smart-scroll-bar-size)) } .smart-list-box.smart-container, .smart-list-box>.smart-container { height: 100%; width: 100%; border-style: solid; border-width: 0; border-color: gray; position: relative; overflow: hidden } .smart-list-box smart-list-item[alternation-index="0"] .smart-overlay { background-color: var(--smart-alternation-index0-background); color: var(--smart-alternation-index0-color); border-color: var(--smart-alternation-index0-border) } .smart-list-box smart-list-item[alternation-index="1"] .smart-overlay { background-color: var(--smart-alternation-index1-background); color: var(--smart-alternation-index1-color); border-color: var(--smart-alternation-index1-border) } .smart-list-box smart-list-item[alternation-index="2"] .smart-overlay { background-color: var(--smart-alternation-index2-background); color: var(--smart-alternation-index2-color); border-color: var(--smart-alternation-index2-border) } .smart-list-box smart-scroll-bar { overflow: visible; position: absolute; bottom: 0; height: calc(var(--smart-scroll-bar-size)); width: 100% } .smart-list-box smart-scroll-bar:after { position: absolute; content: ''; width: 100%; height: var(--smart-scroll-bar-size); background: var(--smart-scroll-bar-background); left: 100%; top: 0 } .smart-list-box smart-scroll-bar.bottom-corner { width: calc(100% - var(--smart-scroll-bar-size)) } .smart-list-box smart-scroll-bar[orientation=vertical] { right: 0; top: 0; height: 100%; width: calc(var(--smart-scroll-bar-size)) } .smart-list-box input { border: var(--smart-border-width) solid var(--smart-border); width: 100%; height: 100%; padding: var(--smart-editor-label-padding); outline: initial; padding-right: 25px } .smart-list-box input:focus { border-color: var(--smart-outline) } .smart-list-box .smart-list-box-filter-input-container { position: relative; width: calc(100% - 10px); height: var(--smart-editor-height); margin-left: 5px; margin-top: 5px } .smart-list-box .smart-list-box-filter-input-container:after { content: var(--smart-icon-search); font-family: var(--smart-font-family-icon); height: var(--smart-text-box-default-height); position: absolute; top: 0; width: 25px; display: flex; align-items: center; justify-content: center; left: calc(100% - 25px) } .smart-list-box .smart-list-box-filter-input-container.vscroll { width: calc(100% - 10px - var(--smart-scroll-bar-size)) } .smart-list-box .smart-list-items-container { width: 100%; height: calc(100% - var(--smart-list-item-vertical-offset)); overflow: hidden; position: relative; background-color: transparent } .smart-list-box .smart-list-items-container input { position: absolute; background: initial; background-color: var(--smart-background); background-size: initial; border: 1px solid var(--smart-border); padding: 9px 12px; margin: 0; left: 5px; width: calc(100% - 5px); font-family: inherit; font-size: inherit; border-top-left-radius: var(--smart-item-border-top-left-radius); border-top-right-radius: var(--smart-item-border-top-right-radius); border-bottom-left-radius: var(--smart-item-border-bottom-left-radius); border-bottom-right-radius: var(--smart-item-border-bottom-right-radius) } .smart-list-box[right-to-left] .smart-list-items-container.vscroll .smart-list-items-inner-container, .smart-list-box[right-to-left] .smart-list-items-inner-container { margin-right: var(--smart-list-item-horizontal-offset) } .smart-list-box .smart-list-items-container.hscroll { height: calc(100% - var(--smart-scroll-bar-size) - var(--smart-list-item-vertical-offset)) } .smart-list-box .smart-list-items-container.filter { height: calc(100% - var(--smart-text-box-default-height) - 10px) } .smart-list-box .smart-list-items-container.hscroll.filter { height: calc(100% - var(--smart-text-box-default-height) - var(--smart-scroll-bar-size) - 10px - var(--smart-list-item-vertical-offset)) } .smart-list-box .smart-list-items-inner-container { width: calc(100% - 2 * var(--smart-list-item-horizontal-offset)); height: 100%; display: block; position: relative; background-color: transparent } .smart-list-box .smart-placeholder { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); user-select: none; text-align: center } .smart-list-box .smart-content-label { padding: var(--smart-list-item-label-padding); border-radius: var(--smart-list-item-label-border-radius) } .smart-list-box[horizontal-scroll-bar-visibility=hidden] smart-list-item .smart-content { white-space: initial } .smart-list-box[selection-mode=checkBox]:focus smart-list-item[focus][selected] .smart-input:before, .smart-list-box[selection-mode=checkBox][focus] smart-list-item[focus][selected] .smart-input:before, .smart-list-box[selection-mode=radioButton]:focus smart-list-item[focus][selected] .smart-input:before, .smart-list-box[selection-mode=radioButton][focus] smart-list-item[focus][selected] .smart-input:before { position: absolute; content: ''; border-radius: 50%; width: calc(var(--smart-check-box-default-size) + 14px); height: calc(var(--smart-check-box-default-size) + 14px); background: var(--smart-primary); opacity: .3; z-index: 1; top: 50%; left: 50%; transform: translate(-50%, -50%) } .smart-list-box:not([right-to-left]) .smart-list-items-inner-container { margin-left: var(--smart-list-item-horizontal-offset) } [type=list][opened][focus] smart-list-item[focus] .smart-overlay { background-color: var(--smart-ui-state-selected) } [type=list][opened][focus] smart-list-item[focus] .smart-content { color: var(--smart-ui-state-color-selected); border-color: var(--smart-ui-state-border-selected) } .smart-list-item-feedback { background-color: var(--smart-surface); color: var(--smart-surface-color); border-color: var(--smart-border); border-width: 1px; border-style: solid; box-shadow: var(--smart-elevation-8); cursor: move; padding: 0; z-index: var(--smart-drop-down-z-index); width: 200px } .smart-list-item-feedback smart-list-item { padding: 0; border: none } .smart-list-item-feedback smart-list-item .smart-overlay { background-color: inherit; border: none } .smart-list-item-feedback smart-list-item .smart-content { border-color: transparent; color: inherit } .smart-drop-down smart-list-box smart-scroll-bar[orientation=vertical] { right: 0; top: 0; height: 100%; width: calc(var(--smart-scroll-bar-size)) } .smart-list-box[right-to-left] { direction: initial } .smart-list-box[right-to-left] smart-scroll-bar { left: initial; right: 0 } .smart-list-box[right-to-left] smart-scroll-bar:after { left: -100% } .smart-list-box[right-to-left] smart-scroll-bar[orientation=vertical] { left: 0; right: initial } .smart-list-box[right-to-left] smart-scroll-bar[orientation=vertical]:after { content: none } .smart-list-box[right-to-left] smart-list-item .smart-list-item-container { direction: rtl; left: 0 } .smart-list-box[right-to-left] smart-list-item[display-mode=checkBox] .smart-overlay, .smart-list-box[right-to-left] smart-list-item[display-mode=radioButton] .smart-overlay { left: 0 } .smart-list-box[right-to-left] smart-list-items-group .smart-list-items-group-label { direction: rtl } .smart-list-box[right-to-left] .smart-list-box-filter-input-container.vscroll { left: initial; right: 0 } .smart-list-box[right-to-left] .smart-list-items-container, .smart-list-box[right-to-left] .smart-list-items-container input { direction: rtl } .smart-list-box[right-to-left] .smart-list-items-container.vscroll { left: var(--smart-scroll-bar-size); right: initial } .smart-popup.smart-list-item.smart-list-item-feedback[right-to-left] smart-list-item .smart-list-item-container { direction: rtl; left: 0 } .smart-list-menu .smart-filter-input:focus, .smart-list-menu-view.smart-drop-down-repositioned .smart-filter-input:focus, smart-list-menu, smart-tree .smart-filter-input:focus { outline: 0 } smart-list-menu { width: var(--smart-list-menu-default-width); height: var(--smart-list-menu-default-height); display: block; background: var(--smart-background); border: var(--smart-border-width) solid var(--smart-border); border-top-left-radius: var(--smart-border-top-left-radius); border-top-right-radius: var(--smart-border-top-right-radius); border-bottom-left-radius: var(--smart-border-bottom-left-radius); border-bottom-right-radius: var(--smart-border-bottom-right-radius); color: var(--smart-background-color); visibility: hidden } smart-list-menu:focus { border-color: var(--smart-outline) } smart-list-menu>.smart-container { position: relative; display: flex } smart-list-menu.smart-element { visibility: inherit } smart-list-menu .smart-ripple { background: var(--smart-ui-state-focus) } smart-list-menu[minimized] { height: auto; overflow: visible; border: var(--smart-border-width) solid var(--smart-border); background: var(--smart-surface) } smart-list-menu[drop-down-position|=top] .smart-list-menu-view-minimized { top: calc(-1 * var(--smart-border-width)); transform: translateY(-100%); box-shadow: var(--smart-elevation-8) } smart-list-menu[drop-down-position$=left] .smart-list-menu-view-minimized { left: initial; right: calc(-1 * var(--smart-border-width)) } smart-list-menu:not([animation=none]) .smart-hamburger-icon-line { transition: visibility 20ms ease-in, transform .2s ease-in, width .2s ease-in } .smart-list-menu.smart-container { position: relative; display: flex } .smart-list-menu smart-menu-item[hover], .smart-list-menu smart-menu-items-group[hover] { background: var(--smart-ui-state-hover); border-color: var(--smart-ui-state-border-hover); color: var(--smart-ui-state-color-hover) } .smart-list-menu .smart-hamburger-icon { width: 40px; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; float: none; cursor: pointer; margin-top: 2px } .smart-list-menu .smart-hamburger-icon .smart-hamburger-icon-custom-container { height: 100%; display: flex; align-items: center } .smart-list-menu .smart-hamburger-icon.smart-close-button>.smart-hamburger-icon-line-top { width: 29px; transform: translateX(4px) rotate(45deg) } .smart-list-menu .smart-hamburger-icon.smart-close-button>.smart-hamburger-icon-line-center { visibility: hidden } .smart-list-menu .smart-hamburger-icon.smart-close-button>.smart-hamburger-icon-line-bottom { width: 29px; transform: translateX(4px) rotate(-45deg) } .smart-list-menu .smart-hamburger-icon-line { margin-bottom: 5px; border-radius: 10px; width: 30px; height: 5px; background-color: var(--smart-surface-color); transform-origin: left } .smart-list-menu .smart-hamburger-icon-line-bottom { margin-bottom: 0 } .smart-list-menu .smart-list-menu-view-minimized { left: calc(-1 * var(--smart-border-width)); top: calc(100% + var(--smart-border-width)) } .smart-list-menu .smart-list-menu-view-minimized.smart-visibility-hidden.not-in-view { left: -9999px; top: -9999px; transition: none } .smart-list-menu[minimized] .smart-minimized-header { background: var(--smart-surface); justify-content: flex-end } .smart-list-menu[disabled] .smart-hamburger-icon, .smart-list-menu[disabled] smart-menu-item, .smart-list-menu[disabled] smart-menu-items-group { cursor: default } .smart-list-menu[minimize-icon-template] .smart-hamburger-icon { width: auto; float: left } .smart-list-menu:not([animation=none]) .smart-hamburger-icon-line { transition: visibility 20ms ease-in, transform .2s ease-in, width .2s ease-in } .smart-list-menu:not([animation=none]) .smart-list-menu-view-minimized { opacity: 1; transform: scaleY(1); margin: 8px 0; -webkit-transform-origin: top; transform-origin: top; transition: opacity .2s ease-in, visibility .2s ease-in, transform .2s ease-in } .smart-list-menu:not([animation=none]) .smart-list-menu-view-minimized.smart-visibility-hidden { opacity: .2; transform: scaleY(0) } .smart-list-menu[minimize-icon-template=null] .smart-hamburger-icon { width: 40px; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; float: none; cursor: pointer; margin-top: 2px } .smart-list-menu-view-minimized.smart-menu-drop-down.smart-drop-down-repositioned[drop-down-position*=top], .smart-list-menu[drop-down-position*=top] .smart-list-menu-view-minimized { margin: -8px 0 } .smart-list-menu[drop-down-position|=top]:not([animation=none]) .smart-list-menu-view-minimized { transform: translateY(-100%) scaleY(1); -webkit-transform-origin: bottom; transform-origin: bottom } .smart-list-menu[drop-down-position|=top]:not([animation=none]) .smart-list-menu-view-minimized.smart-visibility-hidden { transform: translateY(-100%) scaleY(0) } .smart-list-menu smart-menu-item, .smart-list-menu smart-menu-items-group, .smart-list-menu-view.smart-drop-down-repositioned smart-menu-item, .smart-list-menu-view.smart-drop-down-repositioned smart-menu-items-group { padding: 10px 0 } .smart-list-menu smart-menu-item.smart-element, .smart-list-menu smart-menu-items-group.smart-element, .smart-list-menu-view.smart-drop-down-repositioned smart-menu-item.smart-element, .smart-list-menu-view.smart-drop-down-repositioned smart-menu-items-group.smart-element { display: block; width: 100%; height: auto; overflow: hidden } .smart-list-menu smart-menu-item[separator]:last-child, .smart-list-menu smart-menu-items-group.smart-menu-items-group-opened[separator], .smart-list-menu smart-menu-items-group[separator]:last-child, .smart-list-menu-view.smart-drop-down-repositioned smart-menu-item[separator]:last-child, .smart-list-menu-view.smart-drop-down-repositioned smart-menu-items-group.smart-menu-items-group-opened[separator], .smart-list-menu-view.smart-drop-down-repositioned smart-menu-items-group[separator]:last-child { border-bottom: none } .smart-list-menu .smart-header, .smart-list-menu-view.smart-drop-down-repositioned .smart-header { background: var(--smart-primary); color: var(--smart-primary-color); border-color: var(--smart-primary); box-shadow: var(--smart-elevation-4); z-index: 3; padding: 0 16px; display: flex; align-items: center; justify-content: center; position: relative; width: 100%; height: var(--smart-bar-height); border-bottom: var(--smart-border-width) solid var(--smart-primary); overflow: hidden } .smart-list-menu .smart-header>smart-button, .smart-list-menu-view.smart-drop-down-repositioned .smart-header>smart-button { position: absolute; width: 50px; height: 100%; left: 0; top: 0; background: inherit; border: inherit; color: inherit } .smart-list-menu .smart-header>smart-button>.smart-button, .smart-list-menu-view.smart-drop-down-repositioned .smart-header>smart-button>.smart-button { border: none } .smart-list-menu .smart-header>smart-button .smart-arrow:after, .smart-list-menu-view.smart-drop-down-repositioned .smart-header>smart-button .smart-arrow:after { font-size: calc(var(--smart-font-size) - 3px); color: inherit } .smart-list-menu .smart-menu-scroll-button, .smart-list-menu-view.smart-drop-down-repositioned .smart-menu-scroll-button { display: block; background-color: var(--smart-scroll-bar-background); color: var(--smart-scroll-bar-color); border-radius: 0; border-left: none; border-right: none; width: 100%; height: var(--smart-menu-scroll-button-size) } .smart-list-menu .smart-menu-scroll-button>button, .smart-list-menu-view.smart-drop-down-repositioned .smart-menu-scroll-button>button { border: none; min-height: 0 } .smart-list-menu .smart-menu-scroll-button:last-of-type, .smart-list-menu-view.smart-drop-down-repositioned .smart-menu-scroll-button:last-of-type { border-bottom: none } .smart-list-menu .smart-hidden, .smart-list-menu-view.smart-drop-down-repositioned .smart-hidden { display: none !important } .smart-list-menu .smart-title, .smart-list-menu-view.smart-drop-down-repositioned .smart-title { display: flex; align-items: center; font-size: calc(var(--smart-font-size) + 2px) } .smart-list-menu .smart-menu-item-label-container, .smart-list-menu-view.smart-drop-down-repositioned .smart-menu-item-label-container { display: flex; position: relative; justify-content: space-between; padding: 10px; width: 100% } .smart-list-menu .smart-menu-item-label-element, .smart-list-menu .smart-menu-items-group-arrow, .smart-list-menu-view.smart-drop-down-repositioned .smart-menu-item-label-element, .smart-list-menu-view.smart-drop-down-repositioned .smart-menu-items-group-arrow { align-items: center; display: flex } .smart-list-menu .smart-menu-main-container, .smart-list-menu-view.smart-drop-down-repositioned .smart-menu-main-container { width: 100%; height: 100%; overflow: hidden; position: relative } .smart-list-menu .smart-menu-main-container .smart-scroll-viewer-content-container, .smart-list-menu-view.smart-drop-down-repositioned .smart-menu-main-container .smart-scroll-viewer-content-container { width: 100% } .smart-list-menu .smart-menu-main-container.header-shown, .smart-list-menu-view.smart-drop-down-repositioned .smart-menu-main-container.header-shown { height: calc(100% - var(--smart-bar-height)) } .smart-list-menu .smart-menu-main-container.header-shown.scroll-buttons-shown, .smart-list-menu-view.smart-drop-down-repositioned .smart-menu-main-container.header-shown.scroll-buttons-shown { height: calc(100% - var(--smart-bar-height) - 2 * var(--smart-menu-scroll-button-size)) } .smart-list-menu .smart-menu-main-container.header-shown.scroll-buttons-shown.one-button-shown, .smart-list-menu-view.smart-drop-down-repositioned .smart-menu-main-container.header-shown.scroll-buttons-shown.one-button-shown { height: calc(100% - var(--smart-bar-height) - var(--smart-menu-scroll-button-size)) } .smart-list-menu .smart-menu-main-container.header-shown.scroll-buttons-shown.one-button-shown.filter-input-shown, .smart-list-menu-view.smart-drop-down-repositioned .smart-menu-main-container.header-shown.scroll-buttons-shown.one-button-shown.filter-input-shown { height: calc(100% - var(--smart-bar-height) - var(--smart-menu-scroll-button-size) - var(--smart-text-box-default-height) - 2 * var(--smart-list-menu-filter-input-vertical-offset)) } .smart-list-menu .smart-menu-main-container.header-shown.scroll-buttons-shown.filter-input-shown, .smart-list-menu-view.smart-drop-down-repositioned .smart-menu-main-container.header-shown.scroll-buttons-shown.filter-input-shown { height: calc(100% - var(--smart-bar-height) - 2 * var(--smart-menu-scroll-button-size) - var(--smart-text-box-default-height) - 2 * var(--smart-list-menu-filter-input-vertical-offset)) } .smart-list-menu .smart-menu-main-container.header-shown.filter-input-shown, .smart-list-menu-view.smart-drop-down-repositioned .smart-menu-main-container.header-shown.filter-input-shown { height: calc(100% - var(--smart-bar-height) - var(--smart-text-box-default-height) - 2 * var(--smart-list-menu-filter-input-vertical-offset)) } .smart-list-menu .smart-menu-main-container.scroll-buttons-shown, .smart-list-menu-view.smart-drop-down-repositioned .smart-menu-main-container.scroll-buttons-shown { height: calc(100% - 2 * var(--smart-menu-scroll-button-size)) } .smart-list-menu .smart-menu-main-container.scroll-buttons-shown.one-button-shown, .smart-list-menu-view.smart-drop-down-repositioned .smart-menu-main-container.scroll-buttons-shown.one-button-shown { height: calc(100% - var(--smart-menu-scroll-button-size)) } .smart-list-menu .smart-menu-main-container.scroll-buttons-shown.one-button-shown.filter-input-shown, .smart-list-menu-view.smart-drop-down-repositioned .smart-menu-main-container.scroll-buttons-shown.one-button-shown.filter-input-shown { height: calc(100% - var(--smart-menu-scroll-button-size) - var(--smart-text-box-default-height) - 2 * var(--smart-list-menu-filter-input-vertical-offset)) } .smart-list-menu .smart-menu-main-container.scroll-buttons-shown.filter-input-shown, .smart-list-menu-view.smart-drop-down-repositioned .smart-menu-main-container.scroll-buttons-shown.filter-input-shown { height: calc(100% - 2 * var(--smart-menu-scroll-button-size) - var(--smart-text-box-default-height) - 2 * var(--smart-list-menu-filter-input-vertical-offset)) } .smart-list-menu .smart-menu-main-container.filter-input-shown, .smart-list-menu-view.smart-drop-down-repositioned .smart-menu-main-container.filter-input-shown { height: calc(100% - var(--smart-text-box-default-height)) } .smart-list-menu .smart-menu-main-container.bounce-top, .smart-list-menu-view.smart-drop-down-repositioned .smart-menu-main-container.bounce-top { padding-top: 50px } .smart-list-menu .smart-menu-main-container.bounce-bottom, .smart-list-menu-view.smart-drop-down-repositioned .smart-menu-main-container.bounce-bottom { padding-bottom: 50px } .smart-list-menu .smart-menu-item-shortcut, .smart-list-menu-view.smart-drop-down-repositioned .smart-menu-item-shortcut { margin-left: 0 } .smart-list-menu .smart-menu-drop-down, .smart-list-menu-view.smart-drop-down-repositioned .smart-menu-drop-down { width: 100% } .smart-list-menu .smart-menu-drop-down[level="2"]:not(.smart-menu-minimized-items-container), .smart-list-menu-view.smart-drop-down-repositioned .smart-menu-drop-down[level="2"]:not(.smart-menu-minimized-items-container) { margin: 0 } .smart-list-menu .smart-tree-main-container, .smart-list-menu-view.smart-drop-down-repositioned .smart-tree-main-container { position: relative; width: 100%; height: 100%; padding: var(--smart-tree-item-horizontal-offset); overflow: hidden } .smart-list-menu-view-minimized:not([animation=none]) .smart-menu-items-group-opened, .smart-list-menu-view-minimized:not([animation=none]) smart-menu-items-group.smart-element.smart-menu-items-group-opened, .smart-list-menu:not([animation=none]) .smart-menu-items-group-opened { overflow: visible } .smart-list-menu .smart-list-menu-filter-input-container, .smart-list-menu-view.smart-drop-down-repositioned .smart-list-menu-filter-input-container { position: relative; width: calc(100% - 10px); height: calc(var(--smart-text-box-default-height)); margin: 5px; font-size: inherit } .smart-list-menu .smart-list-menu-filter-input-container:after, .smart-list-menu-view.smart-drop-down-repositioned .smart-list-menu-filter-input-container:after { content: var(--smart-icon-filter); font-family: var(--smart-font-family-icon); height: var(--smart-text-box-default-height); position: absolute; top: 0; width: 25px; display: flex; align-items: center; justify-content: center; left: calc(100% - 25px) } .smart-list-menu .smart-filter-input, .smart-list-menu-view.smart-drop-down-repositioned .smart-filter-input { border: 1px solid var(--smart-border); width: 100%; height: 100%; padding-left: var(--smart-editor-label-padding); padding-right: calc(var(--smart-editor-label-padding) + 25px); font-size: inherit } .smart-list-menu .smart-filter-input::selection, .smart-list-menu-view.smart-drop-down-repositioned .smart-filter-input::selection { background: var(--smart-editor-selection); color: var(--smart-editor-selection-color) } .smart-list-menu .smart-list-menu-group-label, .smart-list-menu-view.smart-drop-down-repositioned .smart-list-menu-group-label { margin-bottom: 1px; padding: 10px; background-color: var(--smart-disabled); color: var(--smart-disabled-color); font-size: calc(var(--smart-font-size) + 1px); font-weight: 700; cursor: default; user-select: none } .smart-list-menu .smart-scroll-viewer, .smart-list-menu-view.smart-drop-down-repositioned .smart-scroll-viewer { border: none } .smart-list-menu-view.smart-drop-down-repositioned[checkboxes] .smart-menu-item-container[checkable]>smart-menu-item>.smart-menu-item-label-container, .smart-list-menu-view.smart-drop-down-repositioned[checkboxes] .smart-menu-item-container[checkable]>smart-menu-items-group>.smart-menu-item-label-container, .smart-list-menu-view.smart-drop-down-repositioned[checkboxes][checkable] smart-menu-item[level="1"]>.smart-menu-item-label-container, .smart-list-menu-view.smart-drop-down-repositioned[checkboxes][checkable] smart-menu-items-group[level="1"]>.smart-menu-item-label-container, .smart-list-menu[checkboxes] .smart-menu-item-container[checkable]>smart-menu-item>.smart-menu-item-label-container, .smart-list-menu[checkboxes] .smart-menu-item-container[checkable]>smart-menu-items-group>.smart-menu-item-label-container, .smart-list-menu[checkboxes][checkable] smart-menu-item[level="1"]>.smart-menu-item-label-container, .smart-list-menu[checkboxes][checkable] smart-menu-items-group[level="1"]>.smart-menu-item-label-container { padding-left: 35px } .smart-list-menu-view.smart-drop-down-repositioned[checkboxes] .smart-menu-item-container[checkable]>smart-menu-item[checked]>.smart-menu-item-label-container:after, .smart-list-menu-view.smart-drop-down-repositioned[checkboxes] .smart-menu-item-container[checkable]>smart-menu-items-group[checked]>.smart-menu-item-label-container:after, .smart-list-menu-view.smart-drop-down-repositioned[checkboxes][checkable] smart-menu-item[level="1"][checked]>.smart-menu-item-label-container:after, .smart-list-menu-view.smart-drop-down-repositioned[checkboxes][checkable] smart-menu-items-group[level="1"][checked]>.smart-menu-item-label-container:after, .smart-list-menu[checkboxes] .smart-menu-item-container[checkable]>smart-menu-item[checked]>.smart-menu-item-label-container:after, .smart-list-menu[checkboxes] .smart-menu-item-container[checkable]>smart-menu-items-group[checked]>.smart-menu-item-label-container:after, .smart-list-menu[checkboxes][checkable] smart-menu-item[level="1"][checked]>.smart-menu-item-label-container:after, .smart-list-menu[checkboxes][checkable] smart-menu-items-group[level="1"][checked]>.smart-menu-item-label-container:after { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); content: var(--smart-icon-check); font-family: var(--smart-font-family-icon) } .smart-list-menu-view-minimized:not([animation=none]) .smart-list-menu-group-label, .smart-list-menu-view-minimized:not([animation=none]) smart-menu-item, .smart-list-menu:not([animation=none]) .smart-list-menu-group-label, .smart-list-menu:not([animation=none]) smart-menu-item { position: relative } .smart-list-menu-view.smart-drop-down-repositioned[checkboxes] .smart-menu-item-container[checkable][check-mode=radioButton]>smart-menu-item[checked]>.smart-menu-item-label-container:after, .smart-list-menu-view.smart-drop-down-repositioned[checkboxes] .smart-menu-item-container[checkable][check-mode=radioButton]>smart-menu-items-group[checked]>.smart-menu-item-label-container:after, .smart-list-menu-view.smart-drop-down-repositioned[checkboxes][checkable][check-mode=radioButton] smart-menu-item[level="1"][checked]>.smart-menu-item-label-container:after, .smart-list-menu-view.smart-drop-down-repositioned[checkboxes][checkable][check-mode=radioButton] smart-menu-items-group[level="1"][checked]>.smart-menu-item-label-container:after, .smart-list-menu[checkboxes] .smart-menu-item-container[checkable][check-mode=radioButton]>smart-menu-item[checked]>.smart-menu-item-label-container:after, .smart-list-menu[checkboxes] .smart-menu-item-container[checkable][check-mode=radioButton]>smart-menu-items-group[checked]>.smart-menu-item-label-container:after, .smart-list-menu[checkboxes][checkable][check-mode=radioButton] smart-menu-item[level="1"][checked]>.smart-menu-item-label-container:after, .smart-list-menu[checkboxes][checkable][check-mode=radioButton] smart-menu-items-group[level="1"][checked]>.smart-menu-item-label-container:after { content: var(--smart-icon-radio) } .smart-list-menu-view.smart-drop-down-repositioned[animation=none].smart-visibility-hidden, .smart-list-menu[animation=none].smart-visibility-hidden { transform: scale(0) } .smart-list-menu-view-minimized:not([animation=none]) .smart-list-menu-group-label, .smart-list-menu-view-minimized:not([animation=none]) .smart-menu-item-label-container, .smart-list-menu-view-minimized:not([animation=none]) smart-menu-item, .smart-list-menu-view-minimized:not([animation=none]) smart-menu-items-group, .smart-list-menu:not([animation=none]) .smart-list-menu-group-label, .smart-list-menu:not([animation=none]) .smart-menu-item-label-container, .smart-list-menu:not([animation=none]) smart-menu-item, .smart-list-menu:not([animation=none]) smart-menu-items-group { left: 0; transition: left .3s ease-in } .smart-list-menu-view-minimized:not([animation=none]) .smart-list-menu-group-label.animate, .smart-list-menu-view-minimized:not([animation=none]) .smart-menu-item-label-container.animate, .smart-list-menu-view-minimized:not([animation=none]) smart-menu-item.animate, .smart-list-menu-view-minimized:not([animation=none]) smart-menu-items-group.animate, .smart-list-menu:not([animation=none]) .smart-list-menu-group-label.animate, .smart-list-menu:not([animation=none]) .smart-menu-item-label-container.animate, .smart-list-menu:not([animation=none]) smart-menu-item.animate, .smart-list-menu:not([animation=none]) smart-menu-items-group.animate { left: -100% } .smart-list-menu-view-minimized:not([animation=none]) .smart-list-menu-group-label.right, .smart-list-menu-view-minimized:not([animation=none]) .smart-menu-item-label-container.right, .smart-list-menu-view-minimized:not([animation=none]) smart-menu-item.right, .smart-list-menu-view-minimized:not([animation=none]) smart-menu-items-group.right, .smart-list-menu:not([animation=none]) .smart-list-menu-group-label.right, .smart-list-menu:not([animation=none]) .smart-menu-item-label-container.right, .smart-list-menu:not([animation=none]) smart-menu-item.right, .smart-list-menu:not([animation=none]) smart-menu-items-group.right { left: -100%; transition: none } .smart-list-menu-view-minimized:not([animation=none]) .smart-menu-drop-down, .smart-list-menu:not([animation=none]) .smart-menu-drop-down { position: absolute; top: 0; left: 0; transition: left .3s ease-in } .smart-list-menu-view-minimized:not([animation=none]) .smart-menu-drop-down.smart-hidden, .smart-list-menu:not([animation=none]) .smart-menu-drop-down.smart-hidden { display: block !important; left: 100% } .smart-list-menu-view-minimized:not([animation=none]) .smart-menu-drop-down.no-transition, .smart-list-menu:not([animation=none]) .smart-menu-drop-down.no-transition { transition: none } .smart-list-menu-view { width: 100%; height: 100%; overflow: hidden } .smart-list-menu-view.smart-list-menu-view-minimized { position: absolute; width: var(--smart-editor-drop-down-width); height: var(--smart-editor-drop-down-height); left: calc(-1 * var(--smart-border-width)); top: calc(100% + var(--smart-border-width)); background-color: #fff; box-shadow: var(--smart-elevation-8) } .smart-list-menu-view-minimized:not([animation=none]) { opacity: 1; transform: scaleY(1); margin: 8px 0; -webkit-transform-origin: top; transform-origin: top; transition: opacity .2s ease-in, visibility .2s ease-in, transform .2s ease-in } .smart-list-menu-view-minimized:not([animation=none]).smart-visibility-hidden { opacity: .2; transform: scaleY(0) } .smart-list-menu-view-minimized.smart-drop-down-repositioned.smart-visibility-hidden.not-in-view { left: -9999px; top: -9999px; transition: none } .smart-list-menu-view-minimized[drop-down-position|=top]:not([animation=none]) { transform: translateY(-100%) scaleY(1); -webkit-transform-origin: bottom; transform-origin: bottom } .smart-list-menu-view-minimized[drop-down-position|=top]:not([animation=none]).smart-visibility-hidden { transform: translateY(-100%) scaleY(0) } .smart-list-menu-view-minimized:not([animation=none])[right-to-left] .smart-menu-drop-down.smart-hidden, .smart-list-menu:not([animation=none])[right-to-left] .smart-menu-drop-down.smart-hidden { left: -100% } .smart-list-menu-view-minimized:not([animation=none])[right-to-left] .smart-list-menu-group-label.animate, .smart-list-menu-view-minimized:not([animation=none])[right-to-left] .smart-list-menu-group-label.right, .smart-list-menu-view-minimized:not([animation=none])[right-to-left] .smart-menu-item-label-container.animate, .smart-list-menu-view-minimized:not([animation=none])[right-to-left] .smart-menu-item-label-container.right, .smart-list-menu-view-minimized:not([animation=none])[right-to-left] smart-menu-item.animate, .smart-list-menu-view-minimized:not([animation=none])[right-to-left] smart-menu-item.right, .smart-list-menu-view-minimized:not([animation=none])[right-to-left] smart-menu-items-group.animate, .smart-list-menu-view-minimized:not([animation=none])[right-to-left] smart-menu-items-group.right, .smart-list-menu:not([animation=none])[right-to-left] .smart-list-menu-group-label.animate, .smart-list-menu:not([animation=none])[right-to-left] .smart-list-menu-group-label.right, .smart-list-menu:not([animation=none])[right-to-left] .smart-menu-item-label-container.animate, .smart-list-menu:not([animation=none])[right-to-left] .smart-menu-item-label-container.right, .smart-list-menu:not([animation=none])[right-to-left] smart-menu-item.animate, .smart-list-menu:not([animation=none])[right-to-left] smart-menu-item.right, .smart-list-menu:not([animation=none])[right-to-left] smart-menu-items-group.animate, .smart-list-menu:not([animation=none])[right-to-left] smart-menu-items-group.right { left: 100% } .smart-list-menu-view.smart-drop-down-repositioned[right-to-left] .smart-filter-input, .smart-list-menu[right-to-left] .smart-filter-input { direction: rtl; padding-right: var(--smart-editor-label-padding); padding-left: calc(var(--smart-editor-label-padding) + 25px) } .smart-list-menu-view.smart-drop-down-repositioned[right-to-left] .smart-list-menu-filter-input-container:after, .smart-list-menu[right-to-left] .smart-list-menu-filter-input-container:after { left: 0 } .smart-list-menu-view.smart-drop-down-repositioned[right-to-left] .smart-header>smart-button, .smart-list-menu[right-to-left] .smart-header>smart-button { left: initial; right: 0 } .smart-list-menu-view.smart-drop-down-repositioned[right-to-left] smart-menu-items-group .smart-menu-items-group-arrow, .smart-list-menu[right-to-left] smart-menu-items-group .smart-menu-items-group-arrow { margin-left: initial } .smart-list-menu-view.smart-drop-down-repositioned[checkboxes][checkable][right-to-left] smart-menu-item[level="1"]>.smart-menu-item-label-container, .smart-list-menu-view.smart-drop-down-repositioned[checkboxes][checkable][right-to-left] smart-menu-items-group[level="1"]>.smart-menu-item-label-container, .smart-list-menu-view.smart-drop-down-repositioned[checkboxes][right-to-left] .smart-menu-item-container[checkable]>smart-menu-item>.smart-menu-item-label-container, .smart-list-menu-view.smart-drop-down-repositioned[checkboxes][right-to-left] .smart-menu-item-container[checkable]>smart-menu-items-group>.smart-menu-item-label-container, .smart-list-menu[checkboxes][checkable][right-to-left] smart-menu-item[level="1"]>.smart-menu-item-label-container, .smart-list-menu[checkboxes][checkable][right-to-left] smart-menu-items-group[level="1"]>.smart-menu-item-label-container, .smart-list-menu[checkboxes][right-to-left] .smart-menu-item-container[checkable]>smart-menu-item>.smart-menu-item-label-container, .smart-list-menu[checkboxes][right-to-left] .smart-menu-item-container[checkable]>smart-menu-items-group>.smart-menu-item-label-container { padding-left: initial; padding-right: 35px } .smart-list-menu-view.smart-drop-down-repositioned[checkboxes][checkable][right-to-left] smart-menu-item[level="1"][checked]>.smart-menu-item-label-container:after, .smart-list-menu-view.smart-drop-down-repositioned[checkboxes][checkable][right-to-left] smart-menu-items-group[level="1"][checked]>.smart-menu-item-label-container:after, .smart-list-menu-view.smart-drop-down-repositioned[checkboxes][right-to-left] .smart-menu-item-container[checkable]>smart-menu-item[checked]>.smart-menu-item-label-container:after, .smart-list-menu-view.smart-drop-down-repositioned[checkboxes][right-to-left] .smart-menu-item-container[checkable]>smart-menu-items-group[checked]>.smart-menu-item-label-container:after, .smart-list-menu[checkboxes][checkable][right-to-left] smart-menu-item[level="1"][checked]>.smart-menu-item-label-container:after, .smart-list-menu[checkboxes][checkable][right-to-left] smart-menu-items-group[level="1"][checked]>.smart-menu-item-label-container:after, .smart-list-menu[checkboxes][right-to-left] .smart-menu-item-container[checkable]>smart-menu-item[checked]>.smart-menu-item-label-container:after, .smart-list-menu[checkboxes][right-to-left] .smart-menu-item-container[checkable]>smart-menu-items-group[checked]>.smart-menu-item-label-container:after { left: initial; right: 10px } .smart-list-menu[right-to-left] smart-menu-items-group[level="1"]>.smart-menu-item-label-container>.smart-menu-items-group-arrow { margin-right: initial } .smart-list-menu[right-to-left] smart-menu-item .smart-menu-item-shortcut { margin-left: initial; margin-right: 100px } .smart-list-menu[right-to-left] .smart-menu-main-container { direction: rtl } .smart-list-menu[right-to-left] .smart-menu-items-group-arrow.right.smart-arrow-right { margin-left: initial; margin-right: 50px } .smart-list-menu[right-to-left]>.smart-container { flex-direction: row-reverse } .smart-list-menu[right-to-left] .smart-list-menu-view.smart-list-menu-view-minimized { left: initial; right: calc(-1 * var(--smart-border-width)) } .smart-list-menu[right-to-left][minimized] .smart-list-menu-view-minimized, .smart-list-menu[right-to-left][mode=tree] .smart-list-menu-view-minimized { direction: rtl } .smart-list-menu-view-minimized[right-to-left] .smart-menu-item-shortcut, .smart-list-menu-view-minimized[right-to-left] smart-menu-items-group .smart-menu-items-group-arrow, .smart-list-menu[right-to-left] .smart-list-menu-view-minimized .smart-menu-item-shortcut, .smart-list-menu[right-to-left] smart-menu-items-group .smart-menu-items-group-arrow, .smart-list-menu[right-to-left][mode=dropDown] smart-menu-item[level="1"] .smart-menu-item-shortcut { margin-right: initial } .smart-menu-drop-down.smart-drop-down-repositioned.smart-list-menu-view-minimized[right-to-left] { direction: rtl } .smart-menu-drop-down.smart-drop-down-repositioned[right-to-left] .smart-menu-items-group-arrow.right.smart-arrow-right { margin-left: initial; margin-right: 50px } .smart-menu-drop-down.smart-drop-down-repositioned[right-to-left] .smart-menu-item-container { direction: rtl } .smart-menu-drop-down.smart-drop-down-repositioned[right-to-left] smart-menu-item .smart-menu-item-shortcut { margin-left: initial; margin-right: 100px } smart-masked-text-box { width: var(--smart-text-box-default-width); height: var(--smart-text-box-default-height) } smart-masked-text-box.smart-element { border: 1px solid var(--smart-border); background: var(--smart-background); overflow: visible; border-radius: var(--smart-border-radius) } .smart-masked-text-box>.smart-container { position: relative } .smart-masked-text-box .smart-input { width: 100%; height: 100%; color: inherit; font-family: inherit; position: relative; overflow: hidden; outline: 0 } .smart-masked-text-box[right-to-left] .smart-container { direction: rtl } .smart-menu .smart-menu-drop-down, smart-menu[mode=dropDown] { z-index: var(--smart-editor-drop-down-z-index); top: 0; box-shadow: var(--smart-elevation-8); border-radius: var(--smart-border-radius) } .smart-menu .smart-element[level="2"]:last-child, .smart-menu .smart-element[level="3"]:last-child, .smart-menu:not([aria-orientation=horizontal]) .smart-element[level="1"]:last-child { margin-bottom: var(--smart-border-radius) } smart-menu { width: var(--smart-menu-default-width); height: var(--smart-menu-default-height); visibility: hidden } smart-menu:focus { outline: 0; border-color: var(--smart-outline) } smart-menu>.smart-container { display: flex; position: relative } smart-menu smart-menu-item[level="1"][separator], smart-menu smart-menu-item[separator][level]:last-child, smart-menu smart-menu-items-group[level="1"][separator], smart-menu smart-menu-items-group[separator][level]:last-child { border-bottom: none } smart-menu.smart-element { visibility: inherit; overflow: visible } smart-menu .smart-ripple { background: var(--smart-primary) } smart-menu[aria-orientation=horizontal] { background: var(--smart-surface); color: var(--smart-surface-color); border-color: var(--smart-border) } smart-menu[mode=vertical], smart-menu[mode=dropDown], smart-menu[mode=tree] { width: var(--smart-menu-vertical-default-width); height: var(--smart-menu-vertical-default-height) } smart-menu[mode=tree]:focus { outline: 0; border-color: var(--smart-outline) } smart-menu[minimized] smart-menu-item[level="1"][separator], smart-menu[minimized] smart-menu-items-group[level="1"][separator], smart-menu[mode=vertical] smart-menu-item[level="1"][separator], smart-menu[mode=vertical] smart-menu-items-group[level="1"][separator], smart-menu[mode=dropDown] smart-menu-item[level="1"][separator], smart-menu[mode=dropDown] smart-menu-items-group[level="1"][separator], smart-menu[mode=tree] smart-menu-item[level="1"][separator], smart-menu[mode=tree] smart-menu-items-group[level="1"][separator] { border-bottom: 1px solid var(--smart-border) } smart-menu[minimized][drop-down-position$=left] .smart-menu-minimized-items-container .smart-menu-item-label-container { flex-direction: row } smart-menu[mode=tree] { background: var(--smart-background); border-color: var(--smart-border); color: var(--smart-background-color) } smart-menu[mode=dropDown] { position: absolute; background: var(--smart-background); color: var(--smart-background-color); left: 0 } smart-menu-item, smart-menu-items-group { visibility: hidden; cursor: pointer; height: auto; display: flex; justify-content: space-between; align-items: center; white-space: nowrap } smart-menu-item.smart-element, smart-menu-items-group.smart-element { visibility: inherit; overflow: visible; background: inherit; color: inherit; border-color: inherit } smart-menu-item[hover], smart-menu-items-group[hover] { background-color: var(--smart-ui-state-hover); border-color: var(--smart-ui-state-border-hover); color: var(--smart-ui-state-color-hover) } smart-menu-item[focus], smart-menu-items-group[focus] { background-color: var(--smart-ui-state-focus); border-color: var(--smart-ui-state-border-focus); color: var(--smart-ui-state-color-focus) } smart-menu-item[separator], smart-menu-items-group[separator] { border-bottom: 1px solid var(--smart-border) } smart-menu-item .smart-menu-item-shortcut { margin-left: 100px; opacity: .5 } smart-menu-item[template-applied] { cursor: default } smart-menu-item[disabled] { opacity: .5 } smart-menu-items-group { position: relative } .smart-menu a { color: inherit } .smart-menu smart-menu-item[level="1"], .smart-menu smart-menu-item[level="1"]>.smart-menu-item-label-container, .smart-menu smart-menu-items-group[level="1"], .smart-menu smart-menu-items-group[level="1"]>.smart-menu-item-label-container { height: 100% } .smart-menu .smart-menu-drop-down { position: absolute; background: var(--smart-background); color: var(--smart-background-color); left: 100% } .smart-menu .smart-menu-drop-down .smart-menu-drop-down, .smart-menu .smart-menu-drop-down .smart-menu-drop-down.smart-visibility-hidden { border: none } .smart-menu .smart-menu-drop-down.smart-visibility-hidden.not-in-view { left: -9999px; top: -9999px; transition: none } .smart-menu .smart-menu-drop-down[level="2"] { top: 100%; left: 0 } .smart-menu .smart-menu-main-container { display: flex; position: relative; align-items: center; width: 100%; height: 100%; cursor: default } .smart-menu .smart-menu-main-container>smart-menu-item[level="1"] .smart-menu-item-shortcut { display: none } .smart-menu .smart-menu-main-container.scroll-buttons-shown { width: calc(100% - 2 * var(--smart-menu-scroll-button-size)); overflow: hidden } .smart-menu .smart-menu-main-container.scroll-buttons-shown.one-button-shown { width: calc(100% - var(--smart-menu-scroll-button-size)) } .smart-menu .smart-menu-item-label-element { display: flex; align-items: center; overflow: hidden } .smart-menu .smart-menu-item-label-element>span { display: flex; align-items: center } .smart-menu .smart-element[level="2"]:first-child { margin-top: var(--smart-border-radius) } .smart-menu .smart-element[level="3"]:first-child { margin-top: var(--smart-border-radius) } .smart-menu .smart-header { background: var(--smart-surface); color: var(--smart-surface-color); box-shadow: var(--smart-elevation-4); border: var(--smart-border-width) solid var(--smart-border); border-top-left-radius: var(--smart-border-top-left-radius); border-top-right-radius: var(--smart-border-top-right-radius); border-bottom-left-radius: var(--smart-border-bottom-left-radius); border-bottom-right-radius: var(--smart-border-bottom-right-radius); z-index: 3; padding: 0 16px; display: flex; align-items: center; justify-content: center; position: relative; width: 100% } .smart-menu .smart-hamburger-icon { width: 40px; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; float: none; cursor: pointer } .smart-menu-drop-down, .smart-menu-item[template-applied], .smart-menu[disabled] .smart-hamburger-icon, .smart-menu[disabled] smart-menu-item, .smart-menu[disabled] smart-menu-items-group { cursor: default } .smart-menu .smart-hamburger-icon.smart-close-button>.smart-hamburger-icon-line-top { width: 29px; transform: translateX(4px) rotate(45deg) } .smart-menu .smart-hamburger-icon.smart-close-button>.smart-hamburger-icon-line-center { visibility: hidden } .smart-menu .smart-hamburger-icon.smart-close-button>.smart-hamburger-icon-line-bottom { width: 29px; transform: translateX(4px) rotate(-45deg) } .smart-menu .smart-hamburger-icon .smart-hamburger-icon-custom-container { height: 100%; display: flex; align-items: center } .smart-menu .smart-hamburger-icon-line { margin-bottom: 5px; border-radius: 10px; width: 30px; height: 5px; transform-origin: left; background-color: #757575 } .smart-menu .smart-hamburger-icon-line-bottom { margin-bottom: 0 } .smart-menu .smart-menu-minimized-items-container .smart-menu-items-group-opened>.smart-menu-item-label-container { padding-bottom: 0 } .smart-menu .smart-menu-minimized-items-container .smart-menu-drop-down.smart-visibility-hidden { margin-top: 0; height: 0; transform: scaleY(0) } .smart-menu .smart-menu-minimized-items-container.smart-visibility-hidden.not-in-view { left: -9999px; top: -9999px; transition: none } .smart-menu:not([mode=tree])[checkboxes][drop-down-position$=left] .smart-menu-item-container[checkable]>smart-menu-item>.smart-menu-item-label-container:after, .smart-menu:not([mode=tree])[checkboxes][drop-down-position$=left] .smart-menu-item-container[checkable]>smart-menu-items-group>.smart-menu-item-label-container:after, .smart-menu[minimized][checkboxes][checkable][drop-down-position$=left] .smart-menu-minimized-items-container>smart-menu-item>.smart-menu-item-label-container:after, .smart-menu[minimized][checkboxes][checkable][drop-down-position$=left] .smart-menu-minimized-items-container>smart-menu-items-group>.smart-menu-item-label-container:after { left: initial; right: 10px } .smart-menu .smart-menu-item-label-container { position: relative; width: 100%; padding: 10px; display: flex; flex-direction: row; align-items: center; justify-content: space-between; overflow: hidden } .smart-menu .smart-menu-scroll-button { display: block; background-color: var(--smart-scroll-bar-button-background); color: var(--smart-scroll-bar-button-color); border-color: var(--smart-scroll-bar-button-border); min-height: 0; width: var(--smart-menu-scroll-button-size); height: 100% } .smart-menu .smart-menu-scroll-button[hover] { background-color: var(--smart-scroll-bar-button-background-hover); color: var(--smart-scroll-bar-button-color-hover); border-color: var(--smart-scroll-bar-button-border-hover) } .smart-menu .smart-menu-scroll-button[active] { background-color: var(--smart-scroll-bar-button-background-active); color: var(--smart-scroll-bar-button-color-active); border-color: var(--smart-scroll-bar-button-border-active) } .smart-menu .smart-menu-scroll-button>button { border: none } .smart-menu .smart-hidden { display: none !important } .smart-menu.smart-container { display: flex; position: relative } .smart-menu:not([animation=none]) .smart-menu-drop-down, .smart-menu:not([animation=none]) .smart-menu-minimized-items-container { opacity: 1; transform: scaleY(1); -webkit-transform-origin: top; transform-origin: top; transition: opacity .2s ease-in, visibility .2s ease-in, transform .2s ease-in } .smart-menu:not([animation=none]) .smart-menu-drop-down.smart-visibility-hidden, .smart-menu:not([animation=none]) .smart-menu-minimized-items-container.smart-visibility-hidden { opacity: .2; transform: scaleY(0) } .smart-menu:not([animation=none]) .smart-menu-minimized-items-container .smart-menu-drop-down { -webkit-transform-origin: top; transform-origin: top; transition: height .2s ease-in } .smart-menu:not([animation=none]) .smart-menu-minimized-items-container .smart-menu-item-label-container>.smart-menu-items-group-arrow { transition: transform .2s ease-in } .smart-menu:not([animation=none]) .smart-hamburger-icon-line { transition: visibility 20ms ease-in, transform .2s ease-in, width .2s ease-in } .smart-menu[animation=none] .smart-menu-drop-down.smart-visibility-hidden, .smart-menu[animation=none] .smart-menu-minimized-items-container.smart-visibility-hidden { transform: scale(0) } .smart-menu[drop-down-append-to]:not([drop-down-append-to=null]) .smart-menu-main-container { overflow: hidden } .smart-menu[overflow=hidden] .smart-menu-main-container { width: 100% } .smart-menu[overflow=hidden][mode]:not([mode=horizontal]) .smart-menu-main-container { height: 100% } .smart-menu[aria-orientation=horizontal] .smart-element[level="1"]:first-child { margin-left: var(--smart-border-radius) } .smart-menu[aria-orientation=horizontal] .smart-element[level="1"]:last-child { margin-right: var(--smart-border-radius) } .smart-menu:not([aria-orientation=horizontal]) .smart-element[level="1"]:first-child { margin-top: var(--smart-border-radius) } .smart-menu[disabled][mode=dropDown]:not([animation=none]) { opacity: .55 } .smart-menu[minimized] .smart-minimized-header { border: var(--smart-border-width) solid var(--smart-border); background: var(--smart-surface); justify-content: flex-end } .smart-menu:not([mode=tree])[drop-down-position$=left] smart-menu-item:not([level="1"])>.smart-menu-item-label-container, .smart-menu[minimized][drop-down-position$=left] .smart-menu-minimized-items-container .smart-menu-item-label-container, .smart-menu[minimized][drop-down-position$=left]>.smart-container { flex-direction: row-reverse } .smart-menu[minimized][drop-down-position$=left] .smart-menu-minimized-items-container .smart-menu-items-group-arrow { margin: 0 } .smart-menu[minimized][drop-down-position$=left] .smart-menu-minimized-items-container .smart-menu-drop-down { padding-left: 0; padding-right: 20px } .smart-menu:not([mode=tree])[checkboxes][drop-down-position$=left] .smart-menu-item-container[checkable]>smart-menu-item>.smart-menu-item-label-container, .smart-menu:not([mode=tree])[checkboxes][drop-down-position$=left] .smart-menu-item-container[checkable]>smart-menu-items-group>.smart-menu-item-label-container, .smart-menu[minimized][checkboxes][checkable][drop-down-position$=left] .smart-menu-minimized-items-container>smart-menu-item>.smart-menu-item-label-container, .smart-menu[minimized][checkboxes][checkable][drop-down-position$=left] .smart-menu-minimized-items-container>smart-menu-items-group>.smart-menu-item-label-container, .smart-menu[mode=vertical][checkboxes][checkable][drop-down-position$=left] smart-menu-item[level="1"]>.smart-menu-item-label-container, .smart-menu[mode=vertical][checkboxes][checkable][drop-down-position$=left] smart-menu-items-group[level="1"]>.smart-menu-item-label-container, .smart-menu[mode=dropDown][checkboxes][checkable][drop-down-position$=left] smart-menu-item[level="1"]>.smart-menu-item-label-container, .smart-menu[mode=dropDown][checkboxes][checkable][drop-down-position$=left] smart-menu-items-group[level="1"]>.smart-menu-item-label-container, .smart-menu[mode=tree][minimized][checkboxes][drop-down-position$=left] .smart-menu-item-container[checkable]>smart-menu-item>.smart-menu-item-label-container, .smart-menu[mode=tree][minimized][checkboxes][drop-down-position$=left] .smart-menu-item-container[checkable]>smart-menu-items-group>.smart-menu-item-label-container { padding-right: 35px; padding-left: 10px } .smart-menu[minimize-icon-template] .smart-hamburger-icon { width: auto; float: left } .smart-menu[minimize-icon-template=null] .smart-hamburger-icon { width: 40px; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; float: none; cursor: pointer } .smart-menu[mode]:not([mode=horizontal]) smart-menu-item[level="1"]>.smart-menu-item-label-container, .smart-menu[mode]:not([mode=horizontal]) smart-menu-items-group[level="1"]>.smart-menu-item-label-container { height: initial } .smart-menu[mode]:not([mode=horizontal]):not([mode=tree])[drop-down-position$=left] smart-menu-item>.smart-menu-item-label-container, .smart-menu[mode]:not([mode=horizontal])[drop-down-position$=left] .smart-menu-main-container smart-menu-items-group>.smart-menu-item-label-container { flex-direction: row-reverse } .smart-menu[mode]:not([mode=horizontal])[drop-down-position$=left] .smart-menu-main-container smart-menu-items-group>.smart-menu-item-label-container>.smart-menu-items-group-arrow { margin-left: 0; margin-right: 50px; transform: rotate(180deg) } .smart-menu[mode]:not([mode=horizontal])[drop-down-position$=left] .smart-menu-main-container smart-menu-item>.smart-menu-item-label-container>.smart-menu-item-shortcut { margin-left: 0; margin-right: 100px } .smart-menu[mode]:not([mode=horizontal]):not([minimized]).smart-container, .smart-menu[mode]:not([mode=horizontal]):not([minimized])>.smart-container { display: block } .smart-menu[mode=vertical] .smart-menu-main-container, .smart-menu[mode=dropDown] .smart-menu-main-container { flex-direction: column } .smart-menu[mode=vertical] .smart-menu-main-container.scroll-buttons-shown, .smart-menu[mode=dropDown] .smart-menu-main-container.scroll-buttons-shown { width: 100%; height: calc(100% - 2 * var(--smart-menu-scroll-button-size)) } .smart-menu[mode=vertical] .smart-menu-main-container.scroll-buttons-shown.one-button-shown, .smart-menu[mode=dropDown] .smart-menu-main-container.scroll-buttons-shown.one-button-shown { width: 100%; height: calc(100% - var(--smart-menu-scroll-button-size)) } .smart-menu[mode=vertical] .smart-menu-drop-down[level="2"], .smart-menu[mode=dropDown] .smart-menu-drop-down[level="2"] { top: 0; left: 100% } .smart-menu[mode=vertical] smart-menu-item[level="1"], .smart-menu[mode=vertical] smart-menu-items-group[level="1"], .smart-menu[mode=dropDown] smart-menu-item[level="1"], .smart-menu[mode=dropDown] smart-menu-items-group[level="1"] { width: 100%; height: auto } .smart-menu[mode=vertical] .smart-menu-scroll-button, .smart-menu[mode=dropDown] .smart-menu-scroll-button, .smart-menu[mode=tree] .smart-menu-scroll-button { height: var(--smart-menu-scroll-button-size); width: 100% } .smart-menu[mode=vertical] smart-menu-item[level="1"]>.smart-menu-item-label-element, .smart-menu[mode=vertical] smart-menu-items-group[level="1"]>.smart-menu-item-label-element, .smart-menu[mode=dropDown] smart-menu-item[level="1"]>.smart-menu-item-label-element, .smart-menu[mode=dropDown] smart-menu-items-group[level="1"]>.smart-menu-item-label-element { max-width: calc(100% - 10px) } .smart-menu[mode=vertical][drop-down-position$=left] .smart-menu-drop-down[level="2"], .smart-menu[mode=dropDown][drop-down-position$=left] .smart-menu-drop-down[level="2"] { left: initial; right: 100% } .smart-menu[mode=vertical][drop-down-position|=top] .smart-menu-drop-down, .smart-menu[mode=dropDown][drop-down-position|=top] .smart-menu-drop-down { box-shadow: var(--smart-elevation-8) } .smart-menu[mode=vertical][drop-down-position|=top] .smart-menu-drop-down[level="2"], .smart-menu[mode=dropDown][drop-down-position|=top] .smart-menu-drop-down[level="2"] { top: 100% } .smart-menu[mode=vertical][drop-down-position=overlay-right] .smart-menu-drop-down[level="2"], .smart-menu[mode=dropDown][drop-down-position=overlay-right] .smart-menu-drop-down[level="2"] { left: 0 } .smart-menu[mode=vertical][drop-down-position=overlay-left] .smart-menu-drop-down[level="2"], .smart-menu[mode=dropDown][drop-down-position=overlay-left] .smart-menu-drop-down[level="2"] { right: 0 } .smart-menu[mode=vertical][checkboxes][checkable][drop-down-position$=left] smart-menu-item[level="1"]>.smart-menu-item-label-container:after, .smart-menu[mode=vertical][checkboxes][checkable][drop-down-position$=left] smart-menu-items-group[level="1"]>.smart-menu-item-label-container:after, .smart-menu[mode=dropDown][checkboxes][checkable][drop-down-position$=left] smart-menu-item[level="1"]>.smart-menu-item-label-container:after, .smart-menu[mode=dropDown][checkboxes][checkable][drop-down-position$=left] smart-menu-items-group[level="1"]>.smart-menu-item-label-container:after { left: initial; right: 10px } .smart-menu[mode=vertical] .smart-menu-drop-down:not(.smart-menu-minimized-items-container) { margin: 0 calc(var(--smart-editor-drop-down-vertical-offset) + 3px) } .smart-menu[mode=vertical] .smart-menu-drop-down:not(.smart-menu-minimized-items-container) .smart-menu-drop-down { margin: 0 } .smart-menu[mode=vertical] .smart-menu-main-container>smart-menu-item[level="1"] .smart-menu-item-shortcut { display: none } .smart-menu[mode=dropDown][drop-down-position$=left] .smart-menu-main-container smart-menu-item[level="1"]>.smart-menu-item-label-container>.smart-menu-item-shortcut { margin-right: initial } .smart-menu[mode=dropDown] smart-menu-item[level="1"] .smart-menu-item-shortcut { display: block; margin-left: 0 } .smart-menu[mode=dropDown]:not([animation=none]) { transition: opacity .2s ease-in, visibility .2s ease-in, transform .2s ease-in; opacity: 1; transform: scale(1); -webkit-transform-origin: 0 0; transform-origin: 0 0 } .smart-menu[mode=dropDown]:not([animation=none]).smart-visibility-hidden { opacity: .2; transform: scale(0) } .smart-menu[mode=tree] smart-menu-item[level="1"] .smart-menu-item-shortcut { display: block } .smart-menu[mode=tree] .smart-menu-minimized-items-container.scroll-buttons-shown { width: 100%; height: calc(100% - 2 * var(--smart-menu-scroll-button-size)) } .smart-menu[mode=tree] .smart-menu-minimized-items-container.scroll-buttons-shown.one-button-shown { width: 100%; height: calc(100% - var(--smart-menu-scroll-button-size)) } .smart-menu[mode=tree]:not([minimized]) .smart-menu-minimized-items-container { position: relative; width: 100%; height: 100%; box-shadow: none; overflow: hidden; transform: none; left: 0; top: 0 } .smart-menu[mode=tree]:not([minimized])[drop-down-position$=left] smart-menu-items-group:not([level="1"])>.smart-menu-item-label-container { flex-direction: row } .smart-menu[mode=tree][minimized][checkboxes][drop-down-position$=left] .smart-menu-item-container[checkable]>smart-menu-item>.smart-menu-item-label-container:after, .smart-menu[mode=tree][minimized][checkboxes][drop-down-position$=left] .smart-menu-item-container[checkable]>smart-menu-items-group>.smart-menu-item-label-container:after { left: initial; right: 10px } .smart-menu[drop-down-position] .smart-menu-minimized-items-container .smart-menu-drop-down { position: static; width: 100%; height: auto; padding-left: 20px; box-shadow: none; transform: none } .smart-menu[checkboxes] .smart-menu-item-container[checkable]>smart-menu-item>.smart-menu-item-label-container, .smart-menu[checkboxes] .smart-menu-item-container[checkable]>smart-menu-items-group>.smart-menu-item-label-container, .smart-menu[checkboxes][checkable] smart-menu-item[level="1"]>.smart-menu-item-label-container, .smart-menu[checkboxes][checkable] smart-menu-items-group[level="1"]>.smart-menu-item-label-container { padding-left: 35px } .smart-menu[drop-down-position*=overlay] .smart-menu-drop-down, .smart-menu[drop-down-position*=overlay] .smart-menu-drop-down[level="2"] { margin: unset } .smart-menu-drop-down.smart-drop-down-repositioned.smart-drop-down-container[drop-down-position*=top], .smart-menu[drop-down-position*=top] .smart-menu-drop-down, .smart-menu[drop-down-position*=top] .smart-menu-drop-down[level="2"] { margin: calc(-1 * (var(--smart-editor-drop-down-vertical-offset) + 3px)) 0 } .smart-menu[drop-down-position|=overlay] .smart-menu-drop-down { top: 50%; left: 0; transform: translateY(-50%); box-shadow: var(--smart-elevation-8) } .smart-menu[drop-down-position|=overlay] .smart-menu-drop-down[level="2"] { top: initial; transform: initial } .smart-menu[drop-down-position|=overlay]:not([animation=none]) .smart-menu-drop-down { transform: translateY(-50%) scaleY(1); -webkit-transform-origin: center; transform-origin: center } .smart-menu[drop-down-position|=overlay]:not([animation=none]) .smart-menu-drop-down.smart-visibility-hidden { transform: translateY(-50%) scaleY(0) } .smart-menu[drop-down-position|=overlay]:not([animation=none]) .smart-menu-drop-down[level="2"] { transform: scaleY(1) } .smart-menu[drop-down-position|=overlay]:not([animation=none]) .smart-menu-drop-down[level="2"].smart-visibility-hidden { transform: scaleY(0) } .smart-menu[drop-down-position|=top] .smart-menu-drop-down { top: 100%; transform: translateY(-100%); box-shadow: var(--smart-elevation-8) } .smart-menu[drop-down-position|=top] .smart-menu-drop-down[level="2"] { top: 0 } .smart-menu[drop-down-position|=top] .smart-menu-minimized-items-container { top: calc(-1 * var(--smart-border-width)); transform: translateY(-100%); box-shadow: var(--smart-elevation-4) } .smart-menu[drop-down-position|=top]:not([animation=none]) .smart-menu-drop-down { transform: translateY(-100%) scaleY(1); -webkit-transform-origin: bottom; transform-origin: bottom } .smart-menu[drop-down-position|=top]:not([animation=none]) .smart-menu-drop-down.smart-visibility-hidden, .smart-menu[drop-down-position|=top]:not([animation=none]) .smart-menu-minimized-items-container.smart-visibility-hidden { transform: translateY(-100%) scaleY(0) } .smart-menu[drop-down-position|=top]:not([animation=none]):not([mode=tree]) .smart-menu-minimized-items-container { transform: translateY(-100%) scaleY(1); -webkit-transform-origin: bottom; transform-origin: bottom } .smart-menu[drop-down-position|=top][mode=vertical]:not([animation=none]) .smart-menu-minimized-items-container .smart-menu-drop-down, .smart-menu[drop-down-position|=top][mode=dropDown]:not([animation=none]) .smart-menu-minimized-items-container .smart-menu-drop-down { -webkit-transform-origin: top; transform-origin: top } .smart-menu[drop-down-position$=left] .smart-menu-drop-down { left: initial; right: 100% } .smart-menu[drop-down-position$=left] .smart-menu-drop-down[level="2"] { left: initial; right: 0 } .smart-menu[drop-down-position$=left] .smart-menu-main-container smart-menu-items-group:not([level="1"])>.smart-menu-item-label-container>.smart-menu-items-group-arrow { margin-left: 0; margin-right: 50px; transform: rotate(180deg) } .smart-menu[drop-down-position$=left] .smart-menu-main-container smart-menu-item:not([level="1"])>.smart-menu-item-label-container>.smart-menu-item-shortcut { margin-left: 0; margin-right: 100px } .smart-menu[drop-down-position$=left] smart-menu-items-group:not([level="1"])>.smart-menu-item-label-container { flex-direction: row-reverse } .smart-menu[drop-down-position$=left] .smart-menu-minimized-items-container { left: initial; right: calc(-1 * var(--smart-border-width)) } .smart-menu[drop-down-position=overlay-left] .smart-menu-main-container .smart-menu-drop-down:not([level="2"]) { left: initial; right: 0 } .smart-menu[checkboxes] .smart-menu-item-container[checkable]>smart-menu-item[checked]>.smart-menu-item-label-container:after, .smart-menu[checkboxes] .smart-menu-item-container[checkable]>smart-menu-items-group[checked]>.smart-menu-item-label-container:after { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); content: var(--smart-icon-check); font-family: smart-icons } .smart-menu[checkboxes] .smart-menu-item-container[checkable]>smart-menu-item[checked][check-type=radioButton]>.smart-menu-item-label-container:after, .smart-menu[checkboxes] .smart-menu-item-container[checkable]>smart-menu-items-group[checked][check-type=radioButton]>.smart-menu-item-label-container:after, .smart-menu[checkboxes] .smart-menu-item-container[checkable][check-mode=radioButton]>smart-menu-item[checked]>.smart-menu-item-label-container:after, .smart-menu[checkboxes] .smart-menu-item-container[checkable][check-mode=radioButton]>smart-menu-items-group[checked]>.smart-menu-item-label-container:after { content: var(--smart-icon-radio) } .smart-menu[checkboxes][checkable] smart-menu-item[level="1"][checked]>.smart-menu-item-label-container:after, .smart-menu[checkboxes][checkable] smart-menu-items-group[level="1"][checked]>.smart-menu-item-label-container:after { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); content: var(--smart-icon-check); font-family: smart-icons } .smart-menu[checkboxes][checkable] smart-menu-item[level="1"][checked][check-type=radioButton]>.smart-menu-item-label-container:after, .smart-menu[checkboxes][checkable] smart-menu-items-group[level="1"][checked][check-type=radioButton]>.smart-menu-item-label-container:after, .smart-menu[checkboxes][checkable][check-mode=radioButton] smart-menu-item[level="1"][checked]>.smart-menu-item-label-container:after, .smart-menu[checkboxes][checkable][check-mode=radioButton] smart-menu-items-group[level="1"][checked]>.smart-menu-item-label-container:after { content: var(--smart-icon-radio) } .smart-menu[checkboxes][mode=tree] .smart-menu-minimized-items-container smart-menu-items-group.smart-menu-items-group-opened>.smart-menu-item-label-container:after { top: calc(50% + 5px) } .smart-menu-items-group .smart-menu-items-group-arrow { margin-left: 50px; font-size: calc(var(--smart-font-size) - 3px); font-family: var(--smart-family-icon); transform: rotate(0) } .smart-menu-items-group[level="1"]>.smart-menu-item-label-container>.smart-menu-items-group-arrow { margin-left: 10px } .smart-menu-item[template-applied] .smart-menu-item-label-container { overflow: visible } .smart-menu-item[template-applied] .smart-menu-item-label-element { width: 100%; overflow: visible; display: block; white-space: normal } .smart-menu-drop-down { background: var(--smart-background); color: var(--smart-background-color) } .smart-menu-drop-down .smart-menu-drop-down { margin: 0 } .smart-menu-drop-down[level="2"]:not(.smart-menu-minimized-items-container) { margin: calc(var(--smart-editor-drop-down-vertical-offset) + 3px) 0 } .smart-menu-drop-down[level="2"][mode=vertical]:not(.smart-menu-minimized-items-container), .smart-menu-drop-down[level="2"][mode=dropDown]:not(.smart-menu-minimized-items-container) { margin: 0 } .smart-menu-drop-down.smart-drop-down-repositioned[drop-down-position*=overlay], .smart-menu-drop-down[drop-down-position*=overlay] { margin: unset } .smart-menu-drop-down.drop-down-height-set .smart-menu-scroll-button { display: block; background-color: var(--smart-scroll-bar-button-background); color: var(--smart-scroll-bar-button-color); border-color: var(--smart-scroll-bar-button-border); min-height: 0; width: 100%; height: var(--smart-menu-scroll-button-size) } .smart-menu-drop-down.drop-down-height-set .smart-menu-scroll-button[hover] { background-color: var(--smart-scroll-bar-button-background-hover); color: var(--smart-scroll-bar-button-color-hover); border-color: var(--smart-scroll-bar-button-border-hover) } .smart-menu-drop-down.drop-down-height-set .smart-menu-scroll-button[active] { background-color: var(--smart-scroll-bar-button-background-active); color: var(--smart-scroll-bar-button-color-active); border-color: var(--smart-scroll-bar-button-border-active) } .smart-menu-drop-down.smart-drop-down-repositioned, .smart-menu-minimized-items-container, .smart-menu-minimized-items-container.smart-drop-down-repositioned .smart-menu-drop-down { background: var(--smart-background); color: var(--smart-background-color); z-index: var(--smart-editor-drop-down-z-index) } .smart-menu-drop-down.drop-down-height-set .smart-menu-scroll-button>button { border: none } .smart-menu-drop-down.drop-down-height-set .smart-menu-main-container.scroll-buttons-shown { width: calc(100% - 2 * var(--smart-menu-scroll-button-size)); overflow: hidden } .smart-menu-drop-down.drop-down-height-set[mode=vertical] .smart-menu-scroll-button, .smart-menu-drop-down.drop-down-height-set[mode=dropDown] .smart-menu-scroll-button, .smart-menu-drop-down.drop-down-height-set[mode=tree] .smart-menu-scroll-button { width: 100%; height: var(--smart-menu-scroll-button-size) } .smart-menu-drop-down.drop-down-height-set>.smart-menu-item-container { height: 100%; overflow: hidden } .smart-menu-drop-down.drop-down-height-set>.smart-menu-item-container.scroll-buttons-shown { height: calc(100% - 2 * var(--smart-menu-scroll-button-size)) } .smart-menu-drop-down.drop-down-height-set>.smart-menu-item-container.scroll-buttons-shown.one-button-shown { width: 100%; height: calc(100% - var(--smart-menu-scroll-button-size)) } .smart-menu-drop-down.drop-down-height-set>.smart-menu-item-container>smart-menu-items-group { position: static } .smart-menu-drop-down.smart-drop-down-repositioned { position: absolute; box-shadow: var(--smart-elevation-8); border-radius: var(--smart-border-radius); left: 100%; top: 0; box-sizing: border-box; font-size: var(--smart-font-size); font-family: var(--smart-font-family) } .smart-menu-drop-down.smart-drop-down-repositioned a { color: inherit } .smart-menu-drop-down.smart-drop-down-repositioned * { box-sizing: border-box } .smart-menu-drop-down.smart-drop-down-repositioned .smart-ripple { background: var(--smart-primary) } .smart-menu-drop-down.smart-drop-down-repositioned .smart-menu-drop-down { border: none } .smart-menu-drop-down.smart-drop-down-repositioned .smart-menu-item-label-container { position: relative; width: 100%; padding: 10px; display: flex; flex-direction: row; align-items: center; justify-content: space-between; overflow: hidden } .smart-menu-drop-down.smart-drop-down-repositioned smart-menu-item[separator][level]:last-child, .smart-menu-drop-down.smart-drop-down-repositioned smart-menu-items-group[separator][level]:last-child { border-bottom: none } .smart-menu-drop-down.smart-drop-down-repositioned[checkboxes] .smart-menu-item-container[checkable]>smart-menu-item>.smart-menu-item-label-container, .smart-menu-drop-down.smart-drop-down-repositioned[checkboxes] .smart-menu-item-container[checkable]>smart-menu-items-group>.smart-menu-item-label-container { padding-left: 35px } .smart-menu-drop-down.smart-drop-down-repositioned[checkboxes] .smart-menu-item-container[checkable]>smart-menu-item[checked]>.smart-menu-item-label-container:after, .smart-menu-drop-down.smart-drop-down-repositioned[checkboxes] .smart-menu-item-container[checkable]>smart-menu-items-group[checked]>.smart-menu-item-label-container:after { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); content: var(--smart-icon-check); font-family: smart-icons } .smart-menu-drop-down.smart-drop-down-repositioned[checkboxes] .smart-menu-item-container[checkable]>smart-menu-item[checked][check-type=radioButton]>.smart-menu-item-label-container:after, .smart-menu-drop-down.smart-drop-down-repositioned[checkboxes] .smart-menu-item-container[checkable]>smart-menu-items-group[checked][check-type=radioButton]>.smart-menu-item-label-container:after, .smart-menu-drop-down.smart-drop-down-repositioned[checkboxes] .smart-menu-item-container[checkable][check-mode=radioButton]>smart-menu-item[checked]>.smart-menu-item-label-container:after, .smart-menu-drop-down.smart-drop-down-repositioned[checkboxes] .smart-menu-item-container[checkable][check-mode=radioButton]>smart-menu-items-group[checked]>.smart-menu-item-label-container:after { content: var(--smart-icon-radio) } .smart-menu-drop-down.smart-drop-down-repositioned[level="2"] { top: 100%; left: 0 } .smart-menu-drop-down.smart-drop-down-repositioned[mode=vertical][level="2"], .smart-menu-drop-down.smart-drop-down-repositioned[mode=dropDown][level="2"] { top: 0; left: 100% } .smart-menu-drop-down.smart-drop-down-repositioned[mode=vertical][drop-down-position|=top], .smart-menu-drop-down.smart-drop-down-repositioned[mode=dropDown][drop-down-position|=top] { box-shadow: var(--smart-elevation-8); transform: translateY(-100%) } .smart-menu-drop-down.smart-drop-down-repositioned[mode=vertical][drop-down-position|=top][level="2"], .smart-menu-drop-down.smart-drop-down-repositioned[mode=dropDown][drop-down-position|=top][level="2"] { top: 100%; transform: none } .smart-menu-drop-down.smart-drop-down-repositioned[mode=vertical][drop-down-position=overlay-right][level="2"], .smart-menu-drop-down.smart-drop-down-repositioned[mode=dropDown][drop-down-position=overlay-right][level="2"] { left: 0 } .smart-menu-drop-down.smart-drop-down-repositioned[mode=vertical][drop-down-position=overlay-left][level="2"], .smart-menu-drop-down.smart-drop-down-repositioned[mode=dropDown][drop-down-position=overlay-left][level="2"] { right: 0 } .smart-menu-drop-down.smart-drop-down-repositioned[drop-down-position$=left], .smart-menu-drop-down.smart-drop-down-repositioned[mode=dropDown][drop-down-position$=left][level="2"] { left: initial; right: 100% } .smart-menu-drop-down.smart-drop-down-repositioned[drop-down-position$=left][level="2"], .smart-menu-drop-down.smart-drop-down-repositioned[drop-down-position=overlay-left]:not([level="2"]) { left: initial; right: 0 } .smart-menu-drop-down.smart-drop-down-repositioned[drop-down-position|=overlay] { top: 50%; left: 0; transform: translateY(-50%); box-shadow: var(--smart-elevation-8) } .smart-menu-drop-down.smart-drop-down-repositioned[drop-down-position*=top] { margin: calc(-1 * (var(--smart-editor-drop-down-vertical-offset) + 3px)) 0 } .smart-menu-minimized-items-container .smart-menu-item-shortcut, .smart-menu-minimized-items-container smart-menu-items-group .smart-menu-items-group-arrow { margin-left: 0 } .smart-menu-drop-down.smart-drop-down-repositioned[drop-down-position|=top] { top: 100%; transform: translateY(-100%); box-shadow: var(--smart-elevation-8) } .smart-menu-drop-down.smart-drop-down-repositioned[drop-down-position|=top][level="2"] { top: 0; transform: none } .smart-menu-drop-down.smart-drop-down-repositioned[animation=none].smart-visibility-hidden { transform: scale(0) } .smart-menu-drop-down.smart-drop-down-repositioned.smart-visibility-hidden.not-in-view { left: -9999px; top: -9999px; transition: none } .smart-menu-drop-down.smart-drop-down-repositioned .smart-hidden { display: none !important } .smart-menu-drop-down:not([animation=none]).smart-drop-down-repositioned { opacity: 1; transform: scaleY(1); -webkit-transform-origin: top; transform-origin: top; transition: opacity .2s ease-in, visibility .2s ease-in, transform .2s ease-in } .smart-menu-drop-down:not([animation=none]).smart-drop-down-repositioned.smart-visibility-hidden { opacity: .2; transform: scaleY(0) } .smart-menu-drop-down:not([animation=none]).smart-drop-down-repositioned[drop-down-position|=top] { transform: translateY(-100%) scaleY(1); -webkit-transform-origin: bottom; transform-origin: bottom } .smart-menu-drop-down:not([animation=none]).smart-drop-down-repositioned[drop-down-position|=top].smart-visibility-hidden { transform: translateY(-100%) scaleY(0) } .smart-menu-drop-down:not([animation=none]).smart-drop-down-repositioned[drop-down-position|=top][level="2"] { transform: scaleY(1) } .smart-menu-drop-down:not([animation=none]).smart-drop-down-repositioned[drop-down-position|=top][level="2"].smart-visibility-hidden { transform: scaleY(0) } .smart-menu-drop-down:not([animation=none]).smart-drop-down-repositioned[drop-down-position|=overlay] { transform: translateY(-50%) scaleY(1); -webkit-transform-origin: center; transform-origin: center } .smart-menu-drop-down:not([animation=none]).smart-drop-down-repositioned[drop-down-position|=overlay].smart-visibility-hidden { transform: translateY(-50%) scaleY(0) } .smart-menu-drop-down:not(.smart-list-menu-view-minimized).smart-drop-down-repositioned[checkboxes][drop-down-position$=left] .smart-menu-item-container[checkable]>smart-menu-item>.smart-menu-item-label-container, .smart-menu-drop-down:not(.smart-list-menu-view-minimized).smart-drop-down-repositioned[checkboxes][drop-down-position$=left] .smart-menu-item-container[checkable]>smart-menu-items-group>.smart-menu-item-label-container { padding-left: 10px; padding-right: 35px } .smart-menu-drop-down:not(.smart-list-menu-view-minimized).smart-drop-down-repositioned[checkboxes][drop-down-position$=left] .smart-menu-item-container[checkable]>smart-menu-item>.smart-menu-item-label-container:after, .smart-menu-drop-down:not(.smart-list-menu-view-minimized).smart-drop-down-repositioned[checkboxes][drop-down-position$=left] .smart-menu-item-container[checkable]>smart-menu-items-group>.smart-menu-item-label-container:after { left: initial; right: 10px } .smart-menu-minimized-items-container { position: absolute; box-shadow: var(--smart-elevation-8); border-radius: var(--smart-border-radius); left: calc(-1 * var(--smart-border-width)); top: calc(100% + var(--smart-border-width)) } .smart-menu-minimized-items-container smart-menu-items-group { display: flex; flex-direction: column; overflow: hidden } .smart-menu-minimized-items-container smart-menu-item[level], .smart-menu-minimized-items-container smart-menu-items-group[level] { margin: 0; height: auto } .smart-menu-minimized-items-container .smart-menu-drop-down { margin: 0; border: none; position: static; width: 100%; height: auto; padding-left: 20px; box-shadow: none; transform: none } .smart-menu-minimized-items-container .smart-menu-drop-down.smart-visibility-hidden { border: none } .smart-menu-minimized-items-container .smart-menu-drop-down:not(.smart-menu-minimized-items-container) { margin: 0 } .smart-menu-minimized-items-container .smart-menu-drop-down.drop-down-height-set>.smart-menu-item-container { overflow: initial } .smart-menu-minimized-items-container.smart-menu-drop-down.smart-drop-down-repositioned[drop-down-position$=left] .smart-menu-drop-down .smart-menu-item-label-container>.smart-menu-item-shortcut { margin-right: 0 } .smart-menu-minimized-items-container.smart-menu-drop-down.smart-drop-down-repositioned[drop-down-position|=overlay] { transform: none } .smart-menu-minimized-items-container.smart-menu-drop-down:not([animation=none]).smart-drop-down-repositioned[drop-down-position|=overlay] { transform: scaleY(1); -webkit-transform-origin: top; transform-origin: top } .smart-menu-minimized-items-container.smart-menu-drop-down:not([animation=none]).smart-visibility-hidden.smart-drop-down-repositioned[drop-down-position|=overlay] { transform: scaleY(0) } .smart-menu-minimized-items-container .smart-menu-item-label-container { position: relative; width: 100%; padding: 10px; display: flex; flex-direction: row; align-items: center; justify-content: space-between; overflow: hidden } .smart-menu-minimized-items-container .smart-menu-items-group-opened>.smart-menu-drop-down { margin-top: 10px } .smart-menu-minimized-items-container .smart-menu-items-group-opened>.smart-menu-item-label-container>.smart-menu-items-group-arrow { transform: rotate(180deg) } .smart-menu-minimized-items-container .smart-menu-item-label-element { overflow: hidden; white-space: nowrap; text-overflow: ellipsis } .smart-menu-minimized-items-container.smart-drop-down-repositioned { z-index: var(--smart-editor-drop-down-z-index) } .smart-menu-minimized-items-container.smart-drop-down-repositioned .smart-menu-drop-down { position: absolute; box-shadow: var(--smart-elevation-8); border-radius: var(--smart-border-radius); left: 100%; top: 0 } .smart-menu-minimized-items-container.smart-drop-down-repositioned .smart-menu-drop-down.smart-visibility-hidden { border: none; margin-top: 0; height: 0; transform: scaleY(0) } .smart-menu-minimized-items-container.smart-drop-down-repositioned .smart-menu-items-group-opened>.smart-menu-item-label-container { padding-bottom: 0 } .smart-menu-minimized-items-container.smart-drop-down-repositioned[drop-down-position$=left] { left: initial; right: calc(-1 * var(--smart-border-width)) } .smart-menu-minimized-items-container.smart-drop-down-repositioned[drop-down-position$=left] .smart-menu-items-group-arrow { margin: 0 } .smart-drop-down.smart-menu-minimized-items-container, .smart-menu-minimized-items-container[drop-down] { margin: calc(var(--smart-editor-drop-down-vertical-offset) + 3px) 0 } .smart-menu-minimized-items-container.smart-drop-down-repositioned[checkboxes] smart-menu-items-group.smart-menu-items-group-opened>.smart-menu-item-label-container:after { top: calc(50% + 5px) } .smart-menu-minimized-items-container:not([animation=none]) { opacity: 1; transform: scaleY(1); -webkit-transform-origin: top; transform-origin: top; transition: opacity .2s ease-in, visibility .2s ease-in, transform .2s ease-in } .smart-menu-minimized-items-container:not([animation=none]) .smart-menu-drop-down { -webkit-transform-origin: top; transform-origin: top; transition: height .2s ease-in } .smart-menu-minimized-items-container:not([animation=none]) .smart-menu-item-label-container>.smart-menu-items-group-arrow { transition: transform .2s ease-in } .smart-menu-minimized-items-container:not([animation=none]).smart-visibility-hidden { opacity: .2; transform: scaleY(0) } .smart-menu-minimized-items-container[drop-down-position] .smart-menu-drop-down { position: static; width: 100%; height: auto; padding-left: 20px; box-shadow: none; transform: none } .smart-menu-minimized-items-container[drop-down-position|=top] { top: calc(-1 * var(--smart-border-width)); transform: translateY(-100%); box-shadow: var(--smart-elevation-4) } .smart-menu-minimized-items-container[drop-down-position|=top]:not([animation=none]) { transform: translateY(-100%) scaleY(1); -webkit-transform-origin: bottom; transform-origin: bottom } .smart-menu-minimized-items-container[drop-down-position|=top]:not([animation=none]).smart-visibility-hidden { transform: translateY(-100%) scaleY(0) } .smart-menu-minimized-items-container[drop-down-position|=top][mode=vertical]:not([animation=none]) .smart-menu-drop-down, .smart-menu-minimized-items-container[drop-down-position|=top][mode=dropDown]:not([animation=none]) .smart-menu-drop-down { -webkit-transform-origin: top; transform-origin: top } .smart-menu-minimized-items-container[drop-down-position$=left] .smart-menu-drop-down { padding-left: 0; padding-right: 20px } .smart-menu-minimized-items-container[checkboxes][checkable]>smart-menu-item>.smart-menu-item-label-container, .smart-menu-minimized-items-container[checkboxes][checkable]>smart-menu-items-group>.smart-menu-item-label-container { padding-left: 35px } .smart-menu-drop-down.smart-drop-down-repositioned[right-to-left][checkboxes] .smart-menu-item-container[checkable]>smart-menu-item>.smart-menu-item-label-container, .smart-menu-drop-down.smart-drop-down-repositioned[right-to-left][checkboxes] .smart-menu-item-container[checkable]>smart-menu-items-group>.smart-menu-item-label-container, .smart-menu-minimized-items-container[checkboxes][checkable][drop-down-position$=left]>smart-menu-item>.smart-menu-item-label-container, .smart-menu-minimized-items-container[checkboxes][checkable][drop-down-position$=left]>smart-menu-items-group>.smart-menu-item-label-container, .smart-menu-minimized-items-container[right-to-left][checkboxes][checkable]>smart-menu-item>.smart-menu-item-label-container, .smart-menu-minimized-items-container[right-to-left][checkboxes][checkable]>smart-menu-items-group>.smart-menu-item-label-container, .smart-menu[right-to-left][checkboxes] .smart-menu-item-container[checkable]>smart-menu-item>.smart-menu-item-label-container, .smart-menu[right-to-left][checkboxes] .smart-menu-item-container[checkable]>smart-menu-items-group>.smart-menu-item-label-container, .smart-menu[right-to-left][checkboxes][checkable] smart-menu-item[level="1"]>.smart-menu-item-label-container, .smart-menu[right-to-left][checkboxes][checkable] smart-menu-items-group[level="1"]>.smart-menu-item-label-container { padding-left: 10px; padding-right: 35px } .smart-menu-minimized-items-container[checkboxes][checkable]>smart-menu-item[checked]>.smart-menu-item-label-container:after, .smart-menu-minimized-items-container[checkboxes][checkable]>smart-menu-items-group[checked]>.smart-menu-item-label-container:after { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); content: var(--smart-icon-check); font-family: smart-icons } .smart-menu-minimized-items-container[checkboxes][checkable]>smart-menu-item[checked][check-type=radioButton]>.smart-menu-item-label-container:after, .smart-menu-minimized-items-container[checkboxes][checkable]>smart-menu-items-group[checked][check-type=radioButton]>.smart-menu-item-label-container:after, .smart-menu-minimized-items-container[checkboxes][checkable][check-mode=radioButton]>smart-menu-item[checked]>.smart-menu-item-label-container:after, .smart-menu-minimized-items-container[checkboxes][checkable][check-mode=radioButton]>smart-menu-items-group[checked]>.smart-menu-item-label-container:after { content: var(--smart-icon-radio) } .smart-menu-minimized-items-container[checkboxes][checkable][drop-down-position$=left]>smart-menu-item>.smart-menu-item-label-container:after, .smart-menu-minimized-items-container[checkboxes][checkable][drop-down-position$=left]>smart-menu-items-group>.smart-menu-item-label-container:after { left: initial; right: 10px } .smart-date-time-picker .smart-date-time-drop-down.smart-visibility-hidden.not-in-view { left: -9999px; top: -9999px; transition: none } .minus:after { content: var(--smart-icon-minus); font-family: var(--smart-font-family-icon) } .smart-menu[right-to-left] .smart-menu-main-container { direction: rtl } .smart-menu[right-to-left] .smart-menu-minimized-items-container { left: initial; right: calc(-1 * var(--smart-border-width)) } .smart-menu[right-to-left] .smart-menu-minimized-items-container .smart-menu-item-shortcut { margin-right: initial; margin-left: initial } .smart-menu[right-to-left] .smart-menu-items-group-arrow.right.smart-arrow-right { margin-left: initial; margin-right: 50px } .smart-menu[right-to-left] .smart-menu-drop-down { left: initial; right: 100% } .smart-menu[right-to-left] .smart-menu-drop-down[level="2"] { right: 0 } .smart-menu[right-to-left][mode=vertical] .smart-menu-drop-down[level="2"], .smart-menu[right-to-left][mode=dropDown] { left: initial; right: 100% } .smart-menu[right-to-left] smart-menu-item .smart-menu-item-shortcut { margin-left: initial; margin-right: 100px } .smart-menu[right-to-left] smart-menu-items-group .smart-menu-items-group-arrow { margin-right: initial; margin-left: initial } .smart-menu[right-to-left] smart-menu-items-group[level="1"]>.smart-menu-item-label-container>.smart-menu-items-group-arrow { margin-right: 10px; margin-left: initial } .smart-menu[right-to-left]:not([mode=tree])[drop-down-position$=left] smart-menu-item:not([level="1"])>.smart-menu-item-label-container, .smart-menu[right-to-left][mode]:not([mode=horizontal]):not([mode=tree])[drop-down-position$=left] smart-menu-item>.smart-menu-item-label-container, .smart-menu[right-to-left][mode]:not([mode=horizontal])[drop-down-position$=left] .smart-menu-main-container smart-menu-items-group>.smart-menu-item-label-container { flex-direction: row } .smart-menu[right-to-left][mode=tree] .smart-menu-minimized-items-container { direction: rtl } .smart-menu[right-to-left][mode=dropDown] smart-menu-item[level="1"] .smart-menu-item-shortcut { margin-right: initial; margin-left: initial } .smart-menu[right-to-left][drop-down-position$=left] smart-menu-items-group:not([level="1"])>.smart-menu-item-label-container { flex-direction: row } .smart-menu[right-to-left][drop-down-position$=right] .smart-menu-drop-down[level="2"], .smart-menu[right-to-left][drop-down-position=overlay-right] .smart-menu-main-container .smart-menu-drop-down:not([level="2"]) { right: initial; left: 0 } .smart-menu[right-to-left][checkboxes] .smart-menu-item-container[checkable]>smart-menu-item[checked]>.smart-menu-item-label-container:after, .smart-menu[right-to-left][checkboxes] .smart-menu-item-container[checkable]>smart-menu-items-group[checked]>.smart-menu-item-label-container:after, .smart-menu[right-to-left][checkboxes][checkable] smart-menu-item[level="1"][checked]>.smart-menu-item-label-container:after, .smart-menu[right-to-left][checkboxes][checkable] smart-menu-items-group[level="1"][checked]>.smart-menu-item-label-container:after { right: 10px; left: initial } .smart-menu[right-to-left][minimized] .smart-menu-minimized-items-container { direction: rtl } .smart-menu[right-to-left][minimized][drop-down-position$=left]>.smart-container { flex-direction: row } .smart-menu-drop-down.smart-drop-down-repositioned[right-to-left] { left: initial; right: 100% } .smart-menu-drop-down.smart-drop-down-repositioned[right-to-left] .smart-menu-item-container, .smart-menu-drop-down.smart-drop-down-repositioned[right-to-left].smart-menu-minimized-items-container { direction: rtl } .smart-menu-drop-down.smart-drop-down-repositioned[right-to-left] .smart-menu-items-group-arrow.right.smart-arrow-right { margin-left: initial; margin-right: 50px } .smart-menu-drop-down.smart-drop-down-repositioned[right-to-left] smart-menu-item .smart-menu-item-shortcut { margin-left: initial; margin-right: 100px } .smart-menu-drop-down.smart-drop-down-repositioned[right-to-left][drop-down-position$=left][level="2"], .smart-menu-drop-down.smart-drop-down-repositioned[right-to-left][drop-down-position=overlay-right]:not([level="2"]) { right: initial; left: 0 } .smart-menu-drop-down.smart-drop-down-repositioned[right-to-left][level="2"] { right: 0 } .smart-menu-drop-down.smart-drop-down-repositioned[right-to-left][checkboxes] .smart-menu-item-container[checkable]>smart-menu-item[checked]>.smart-menu-item-label-container:after, .smart-menu-drop-down.smart-drop-down-repositioned[right-to-left][checkboxes] .smart-menu-item-container[checkable]>smart-menu-items-group[checked]>.smart-menu-item-label-container:after { left: initial; right: 10px } .smart-menu-minimized-items-container[right-to-left] { left: initial; right: 100% } .smart-menu-minimized-items-container[right-to-left] .smart-menu-item-shortcut, .smart-menu-minimized-items-container[right-to-left] smart-menu-items-group .smart-menu-items-group-arrow { margin-right: initial; margin-left: initial } .smart-menu-minimized-items-container[right-to-left].smart-drop-down-repositioned { left: initial; right: calc(-1 * var(--smart-border-width)) } .smart-menu-minimized-items-container[right-to-left].smart-drop-down-repositioned .smart-menu-drop-down { left: initial; right: 100% } .smart-menu-minimized-items-container[right-to-left][checkboxes][checkable]>smart-menu-item[checked]>.smart-menu-item-label-container:after, .smart-menu-minimized-items-container[right-to-left][checkboxes][checkable]>smart-menu-items-group[checked]>.smart-menu-item-label-container:after { left: initial; right: 10px } smart-multi-split-button { width: var(--smart-multi-split-button-default-width); height: var(--smart-multi-split-button-default-height); overflow: initial; visibility: hidden; cursor: pointer } smart-multi-split-button.smart-element { overflow: visible; visibility: inherit; border-width: 0 } smart-multi-split-button[right-to-left] .smart-content, smart-multi-split-button[right-to-left] .smart-hint, smart-multi-split-button[right-to-left] .smart-label { direction: rtl } smart-multi-split-button[right-to-left] .smart-drop-down { direction: initial } .smart-multi-split-button smart-list-box { position: relative; width: 100%; height: 100%; border: initial; padding: initial; overflow: hidden; font-size: inherit; font-family: inherit; outline: 0 } .smart-multi-split-button .smart-buttons-container .smart-input .smart-token { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; cursor: pointer; margin: 0 2px; user-select: none } .smart-multi-split-button .smart-drop-down.smart-visibility-hidden { transform: scale(0); transition: transform .2s ease-in; transform-origin: left top 0 } .smart-multi-split-button .smart-template-container { width: 100%; height: 100% } .smart-multi-split-button .smart-multi-split-button-buttons { display: flex; width: 100%; height: 100%; align-items: stretch; justify-content: space-around } .smart-multi-split-button .smart-multi-split-button-buttons .smart-action-split-button { display: flex; width: 100%; height: 100%; justify-content: center; align-items: center } .smart-multi-split-button .smart-multi-split-button-buttons .smart-action-split-button[hover] { background: var(--smart-ui-state-hover); border: var(--smart-ui-state-border-hover); color: var(--smart-ui-state-color-hover) } .smart-multi-split-button .smart-multi-split-button-buttons .smart-action-split-button[active] { background: var(--smart-ui-state-active); border: var(--smart-ui-state-border-active); color: var(--smart-ui-state-color-active) } .smart-multi-split-button.primary { --smart-border: var(--smart-primary); --smart-outline: var(--smart-primary); --smart-surface: var(--smart-primary); --smart-surface-color: var(--smart-primary-color); --smart-ui-state-selected: rgba(var(--smart-primary-rgb), .8); --smart-ui-state-color-selected: var(--smart-primary-color); --smart-ui-state-active: rgba(var(--smart-primary-rgb), .8); --smart-ui-state-color-active: var(--smart-primary-color); --smart-ui-state-hover: var(--smart-primary); --smart-ui-state-color-hover: var(--smart-primary-color); --smart-ui-state-border-selected: var(--smart-primary); --smart-ui-state-border-active: var(--smart-primary); --smart-ui-state-border-hover: var(--smart-primary) } .smart-multi-split-button.primary[hover] { --smart-surface: var(--smart-primary-color) } .smart-multi-split-button.secondary { --smart-border: var(--smart-secondary); --smart-outline: var(--smart-secondary); --smart-surface: var(--smart-secondary); --smart-surface-color: var(--smart-secondary-color); --smart-ui-state-selected: rgba(var(--smart-secondary-rgb), .8); --smart-ui-state-color-selected: var(--smart-secondary-color); --smart-ui-state-active: rgba(var(--smart-secondary-rgb), .8); --smart-ui-state-color-active: var(--smart-secondary-color); --smart-ui-state-hover: var(--smart-secondary); --smart-ui-state-color-hover: var(--smart-secondary-color); --smart-ui-state-border-selected: var(--smart-secondary); --smart-ui-state-border-active: var(--smart-secondary); --smart-ui-state-border-hover: var(--smart-secondary) } .smart-multi-split-button.secondary[hover] { --smart-surface: var(--smart-secondary-color) } .smart-multi-split-button.success { --smart-border: var(--smart-success); --smart-outline: var(--smart-success); --smart-surface: var(--smart-success); --smart-surface-color: var(--smart-success-color); --smart-ui-state-selected: rgba(var(--smart-success-rgb), .8); --smart-ui-state-color-selected: var(--smart-success-color); --smart-ui-state-active: rgba(var(--smart-success-rgb), .8); --smart-ui-state-color-active: var(--smart-success-color); --smart-ui-state-hover: var(--smart-success); --smart-ui-state-color-hover: var(--smart-success-color); --smart-ui-state-border-selected: var(--smart-success); --smart-ui-state-border-active: var(--smart-success); --smart-ui-state-border-hover: var(--smart-success) } .smart-multi-split-button.success[hover] { --smart-surface: var(--smart-success-color) } .smart-multi-split-button.error { --smart-border: var(--smart-error); --smart-outline: var(--smart-error); --smart-surface: var(--smart-error); --smart-surface-color: var(--smart-error-color); --smart-ui-state-selected: rgba(var(--smart-error-rgb), .8); --smart-ui-state-color-selected: var(--smart-error-color); --smart-ui-state-active: rgba(var(--smart-error-rgb), .8); --smart-ui-state-color-active: var(--smart-error-color); --smart-ui-state-hover: var(--smart-error); --smart-ui-state-color-hover: var(--smart-error-color); --smart-ui-state-border-selected: var(--smart-error); --smart-ui-state-border-active: var(--smart-error); --smart-ui-state-border-hover: var(--smart-error) } .smart-multi-split-button.error[hover] { --smart-surface: var(--smart-error-color) } .smart-multi-split-button.info { --smart-border: var(--smart-info); --smart-outline: var(--smart-info); --smart-surface: var(--smart-info); --smart-surface-color: var(--smart-info-color); --smart-ui-state-selected: rgba(var(--smart-info-rgb), .8); --smart-ui-state-color-selected: var(--smart-info-color); --smart-ui-state-active: rgba(var(--smart-info-rgb), .8); --smart-ui-state-color-active: var(--smart-info-color); --smart-ui-state-hover: var(--smart-info); --smart-ui-state-color-hover: var(--smart-info-color); --smart-ui-state-border-selected: var(--smart-info); --smart-ui-state-border-active: var(--smart-info); --smart-ui-state-border-hover: var(--smart-info) } .smart-multi-split-button.info[hover] { --smart-surface: var(--smart-info-color) } .smart-multi-split-button.warning { --smart-border: var(--smart-warning); --smart-outline: var(--smart-warning); --smart-surface: var(--smart-warning); --smart-surface-color: var(--smart-warning-color); --smart-ui-state-selected: rgba(var(--smart-warning-rgb), .8); --smart-ui-state-color-selected: var(--smart-warning-color); --smart-ui-state-active: rgba(var(--smart-warning-rgb), .8); --smart-ui-state-color-active: var(--smart-warning-color); --smart-ui-state-hover: var(--smart-warning); --smart-ui-state-color-hover: var(--smart-warning-color); --smart-ui-state-border-selected: var(--smart-warning); --smart-ui-state-border-active: var(--smart-warning); --smart-ui-state-border-hover: var(--smart-warning) } .smart-multi-split-button.warning[hover] { --smart-surface: var(--smart-warning-color) } .smart-multi-split-button.light { --smart-border: var(--smart-light); --smart-outline: var(--smart-light); --smart-surface: var(--smart-light); --smart-surface-color: var(--smart-light-color); --smart-ui-state-selected: rgba(var(--smart-light-rgb), .8); --smart-ui-state-color-selected: var(--smart-light-color); --smart-ui-state-active: rgba(var(--smart-light-rgb), .8); --smart-ui-state-color-active: var(--smart-light-color); --smart-ui-state-hover: var(--smart-light); --smart-ui-state-color-hover: var(--smart-light-color); --smart-ui-state-border-selected: var(--smart-light); --smart-ui-state-border-active: var(--smart-light); --smart-ui-state-border-hover: var(--smart-light) } .smart-multi-split-button.light[hover] { --smart-surface: var(--smart-light-color) } .smart-multi-split-button.dark { --smart-border: var(--smart-dark); --smart-outline: var(--smart-dark); --smart-surface: var(--smart-dark); --smart-surface-color: var(--smart-dark-color); --smart-ui-state-selected: rgba(var(--smart-dark-rgb), .8); --smart-ui-state-color-selected: var(--smart-dark-color); --smart-ui-state-active: rgba(var(--smart-dark-rgb), .8); --smart-ui-state-color-active: var(--smart-dark-color); --smart-ui-state-hover: var(--smart-dark); --smart-ui-state-color-hover: var(--smart-dark-color); --smart-ui-state-border-selected: var(--smart-dark); --smart-ui-state-border-active: var(--smart-dark); --smart-ui-state-border-hover: var(--smart-dark) } .smart-multi-split-button.dark[hover] { --smart-surface: var(--smart-dark-color) } .smart-multi-split-button[selection-display-mode=tokens] .smart-multi-split-button-unselect-button { pointer-events: initial } .smart-multi-split-button[selection-display-mode=plain] .smart-multi-split-button-unselect-button { pointer-events: none } smart-multiline-text-box.smart-element { width: var(--smart-multiline-text-box-default-width); height: var(--smart-multiline-text-box-default-height); background: 0 0; overflow: initial } smart-multiline-text-box[cols] { width: auto } smart-multiline-text-box[rows] { height: auto } .smart-multiline-text-box[hover] { border-color: var(--smart-ui-state-border-hover) } .smart-multiline-text-box[focus] { border-color: var(--smart-outline) } .smart-multiline-text-box .smart-container>.smart-resize-trigger-container, .smart-multiline-text-box .smart-inner-container>.smart-resize-trigger-container, .smart-multiline-text-box>.smart-resize-trigger-container { margin-bottom: -1px } .smart-multiline-text-box.smart-drop-down-box.smart-container, .smart-multiline-text-box.smart-drop-down-box>.smart-container, .smart-multiline-text-box.smart-drop-down-box[label][hint]>.smart-container { overflow: visible; display: block; max-height: inherit } .smart-multiline-text-box .smart-inner-container, .smart-multiline-text-box textarea { font-family: inherit; font-size: inherit; font-weight: inherit; font-style: inherit; overflow: hidden; color: inherit; width: 100% } .smart-multiline-text-box smart-scroll-bar { display: none } .smart-multiline-text-box textarea { height: 100%; outline: 0; padding: var(--smart-editor-label-padding); border: none; background-color: inherit; resize: none; float: left; border-top-left-radius: var(--smart-border-top-left-radius); border-bottom-left-radius: var(--smart-border-bottom-left-radius); border-top-right-radius: var(--smart-border-top-right-radius); border-bottom-right-radius: var(--smart-border-bottom-right-radius) } .smart-multiline-text-box textarea:not(.smart-text-box-hidden) { max-height: inherit } .smart-multiline-text-box textarea.smart-text-box-hidden { visibility: hidden; width: 100%; height: 0; position: absolute; left: 0; top: 0 } .smart-multiline-text-box .smart-inner-container { height: 100%; position: relative; max-height: inherit } .smart-multiline-text-box .smart-initialization-value { display: none } .smart-multiline-text-box .smart-resize-element { box-sizing: border-box; height: calc(var(--smart-scroll-bar-size)); width: calc(var(--smart-scroll-bar-size)); position: absolute; bottom: 0; right: 0; background-color: #d3d3d3; background-clip: content-box; border: var(--smart-border) solid var(--smart-border-width); display: none; padding: 2px 0 0 2px; cursor: nw-resize; touch-action: none } .smart-multiline-text-box .smart-required-message { display: none } .smart-multiline-text-box .smart-container textarea, .smart-multiline-text-box.smart-container textarea { height: 100% } .smart-multiline-text-box .smart-container.hscroll textarea, .smart-multiline-text-box.smart-container.hscroll textarea { height: calc(100% - var(--smart-scroll-bar-size)) } .smart-multiline-text-box .smart-container.hscroll smart-scroll-bar, .smart-multiline-text-box.smart-container.hscroll smart-scroll-bar { width: 100%; height: calc(var(--smart-scroll-bar-size)); display: block } .smart-multiline-text-box .smart-container.hscroll smart-scroll-bar[orientation=vertical], .smart-multiline-text-box.smart-container.hscroll smart-scroll-bar[orientation=vertical] { display: none } .smart-multiline-text-box .smart-container.vscroll textarea, .smart-multiline-text-box.smart-container.vscroll textarea { width: calc(100% - var(--smart-scroll-bar-size)) } .smart-multiline-text-box .smart-container.vscroll smart-scroll-bar[orientation=vertical], .smart-multiline-text-box.smart-container.vscroll smart-scroll-bar[orientation=vertical] { float: right; width: calc(var(--smart-scroll-bar-size)); height: 100%; display: block; border-top-right-radius: var(--smart-border-top-right-radius); border-bottom-right-radius: var(--smart-border-bottom-right-radius) } .smart-multiline-text-box .smart-container.vscroll.hscroll smart-scroll-bar, .smart-multiline-text-box.smart-container.vscroll.hscroll smart-scroll-bar { width: calc(100% - var(--smart-scroll-bar-size)) } .smart-multiline-text-box .smart-container.vscroll.hscroll smart-scroll-bar[orientation=vertical], .smart-multiline-text-box.smart-container.vscroll.hscroll smart-scroll-bar[orientation=vertical] { height: calc(100% - var(--smart-scroll-bar-size)); width: calc(var(--smart-scroll-bar-size)) } .smart-multiline-text-box[auto-expand] { height: auto; min-height: var(--smart-editor-height) } .smart-multiline-text-box[auto-expand] textarea.smart-text-box-hidden { height: 0 } .smart-multiline-text-box[auto-capitalize=words] textarea { text-transform: capitalize } .smart-multiline-text-box[auto-capitalize=characters] textarea { text-transform: uppercase } .smart-multiline-text-box[display-mode=escaped] textarea { white-space: nowrap } .smart-multiline-text-box[cols] textarea, .smart-multiline-text-box[rows] textarea { width: inherit; height: inherit } .smart-multiline-text-box[resizable] .smart-container.hscroll smart-scroll-bar, .smart-multiline-text-box[resizable].smart-container.hscroll smart-scroll-bar { width: calc(100% - var(--smart-scroll-bar-size)) } .smart-multiline-text-box[resizable] .smart-container.hscroll smart-scroll-bar smart-multiline-text-box .smart-container.vscroll.hscroll smart-scroll-bar, .smart-multiline-text-box[resizable].smart-container.hscroll smart-scroll-bar smart-multiline-text-box .smart-container.vscroll.hscroll smart-scroll-bar { height: calc(var(--smart-scroll-bar-size)); width: calc(100% - var(--smart-scroll-bar-size)) } .smart-multiline-text-box[resizable] .smart-container.vscroll smart-scroll-bar[orientation=vertical], .smart-multiline-text-box[resizable].smart-container.vscroll smart-scroll-bar[orientation=vertical] { height: calc(100% - var(--smart-scroll-bar-size)); width: calc(var(--smart-scroll-bar-size)) } .smart-multiline-text-box[resizable] .smart-resize-element { display: block } .smart-multiline-text-box[resizable] .smart-resize, .smart-multiline-text-box[resizable] .smart-resize textarea { user-select: none } .smart-multiline-text-box.outlined textarea { border: 1px solid var(--smart-border) !important; padding: 10px } .smart-multiline-text-box.outlined[focus] textarea { border: 1px solid var(--smart-primary) !important; border-top-color: transparent !important } .smart-multiline-text-box.outlined.smart-element { height: var(--smart-multiline-text-box-default-height) } .smart-multiline-text-box[right-to-left] textarea { float: right } .smart-multiline-text-box[right-to-left] .smart-container.vscroll smart-scroll-bar[orientation=vertical], .smart-multiline-text-box[right-to-left].smart-container.vscroll smart-scroll-bar[orientation=vertical] { border-top-left-radius: var(--smart-border-top-right-radius); border-bottom-left-radius: var(--smart-border-bottom-right-radius); border-top-right-radius: initial; border-bottom-right-radius: initial } smart-numeric-text-box { width: var(--smart-numeric-text-box-default-width); height: var(--smart-numeric-text-box-default-height) } smart-numeric-text-box .smart-container { display: flex; border: none; width: 100% } smart-numeric-text-box.smart-element { overflow: visible; border: none; background: 0 0 } smart-numeric-text-box[spin-buttons][spin-buttons-position=left] .smart-spin-button.smart-element:first-child, smart-numeric-text-box[spin-buttons][spin-buttons-position=left] .smart-spin-button.smart-element:last-child { border-right: none } smart-numeric-text-box[hint] .smart-hint, smart-numeric-text-box[label] .smart-label { position: absolute; left: 0; bottom: 100%; font-size: 12px; width: 100%; display: block; padding: var(--smart-editor-label-padding); pointer-events: none; user-select: none; -webkit-user-select: none; -ms-user-select: none; -moz-user-select: none; text-align: initial; line-height: initial; vertical-align: initial } .smart-numeric-text-box { border-color: var(--smart-border); border-width: 1px; border-style: solid } .smart-numeric-text-box:focus { border-color: var(--smart-outline) } .smart-numeric-text-box * { box-sizing: border-box } .smart-numeric-text-box.smart-container { display: flex; border: none; width: 100%; height: 100%; position: relative } .smart-numeric-text-box .smart-container { height: 100%; position: relative } .smart-numeric-text-box input.smart-input { width: 100%; height: 100%; border-color: var(--smart-border); border-width: 1px; border-style: solid; border-right-width: var(--smart-border-width); padding: var(--smart-editor-label-padding); background-color: var(--smart-background); color: inherit; font: inherit; text-align: var(--smart-numeric-text-box-text-align); outline: 0; -webkit-appearance: none } .smart-numeric-text-box .smart-spin-button { width: 100%; height: 50%; background-color: var(--smart-surface); color: var(--smart-surface-color); border-color: var(--smart-border); border-width: 1px; border-style: solid } .smart-numeric-text-box .smart-spin-button:first-child { border-bottom: none } .smart-numeric-text-box .smart-spin-button.smart-element { display: block; min-height: 0; border-radius: 0; background: var(--smart-surface); color: var(--smart-surface-color) } .smart-numeric-text-box .smart-spin-button[hover] { background-color: var(--smart-ui-state-hover); color: var(--smart-ui-state-color-hover); border-color: var(--smart-ui-state-border-hover) } .smart-numeric-text-box .smart-spin-button[active] { background-color: var(--smart-ui-state-active); color: var(--smart-ui-state-color-active); border-color: var(--smart-ui-state-border-active) } .smart-numeric-text-box .smart-spin-button .smart-button { border: none; padding: 0 } .smart-numeric-text-box .smart-numeric-text-box-component { border-width: var(--smart-border-width); border-style: solid; border-color: var(--smart-border); border-left-width: var(--smart-border-width); border-right-width: 0 } .smart-numeric-text-box .smart-input-addon { border-color: var(--smart-border); border-width: 1px; border-style: solid } .smart-numeric-text-box .smart-spin-buttons-container { width: var(--smart-editor-addon-width); border: none } .smart-numeric-text-box .smart-numeric-text-box-drop-down { width: 100% } .smart-numeric-text-box .smart-numeric-text-box-radix-display.smart-numeric-text-box-pressed-component, .smart-numeric-text-box .smart-numeric-text-box-radix-display.smart-numeric-text-box-pressed-component[hover] { background-color: var(--smart-ui-state-active); color: var(--smart-ui-state-color-active); border-color: var(--smart-ui-state-border-active) } .smart-numeric-text-box .smart-numeric-text-box-unit-display { width: var(--smart-numeric-text-box-default-unit-display-width); border-width: var(--smart-border-width) 0; overflow: hidden; background-color: var(--smart-background) } .smart-numeric-text-box .smart-numeric-text-box-unit-display[hover], .smart-numeric-text-box[drop-down-enabled] .smart-numeric-text-box-radix-display[hover]:not([aria-expanded=true]) { background-color: var(--smart-ui-state-hover); color: var(--smart-ui-state-color-hover) } .smart-numeric-text-box .smart-numeric-text-box-unit-display[hover] { border-color: var(--smart-ui-state-border-hover) } .smart-numeric-text-box .smart-arrow { position: relative } .smart-numeric-text-box .smart-hint, .smart-numeric-text-box .smart-label { display: none; position: absolute } .smart-numeric-text-box .smart-numeric-text-box-component:not(.smart-hidden) { border-radius: 0 } .smart-numeric-text-box .smart-numeric-text-box-component:not(.smart-hidden).smart-numeric-text-box-component-border-left, .smart-numeric-text-box .smart-numeric-text-box-component:not(.smart-hidden).smart-numeric-text-box-component-border-left .smart-spin-button.smart-repeat-button-element { border-top-left-radius: var(--smart-border-top-left-radius); border-bottom-left-radius: var(--smart-border-bottom-left-radius); overflow: hidden } .smart-numeric-text-box .smart-numeric-text-box-component:not(.smart-hidden).smart-numeric-text-box-component-border-left .smart-spin-button.smart-element:first-child { border-bottom-left-radius: 0 } .smart-numeric-text-box .smart-numeric-text-box-component:not(.smart-hidden).smart-numeric-text-box-component-border-left .smart-spin-button.smart-element:last-child { border-top-left-radius: 0 } .smart-numeric-text-box .smart-numeric-text-box-component:not(.smart-hidden).smart-numeric-text-box-component-border-right, .smart-numeric-text-box .smart-numeric-text-box-component:not(.smart-hidden).smart-numeric-text-box-component-border-right .smart-spin-button.smart-element { border-top-right-radius: var(--smart-border-top-right-radius); border-bottom-right-radius: var(--smart-border-bottom-right-radius); overflow: hidden } .smart-numeric-text-box .smart-numeric-text-box-component:not(.smart-hidden).smart-numeric-text-box-component-border-right .smart-spin-button.smart-element:first-child { border-bottom-right-radius: 0 } .smart-numeric-text-box .smart-numeric-text-box-component:not(.smart-hidden).smart-numeric-text-box-component-border-right .smart-spin-button.smart-element:last-child { border-top-right-radius: 0 } .smart-numeric-text-box[drop-down-enabled] .smart-numeric-text-box-radix-display { cursor: pointer } .smart-numeric-text-box:not([animation=none])[hint] .smart-hint { transition: opacity .2s cubic-bezier(.4, 0, .6, 1) } .smart-numeric-text-box:not([animation=none])[hint][focus] .smart-hint { transition: opacity .2s cubic-bezier(.4, 0, .2, 1) } .smart-numeric-text-box:not([animation=none]) .smart-numeric-text-box-drop-down { transform-origin: top; transition: opacity .2s ease-in, visibility .2s ease-in, transform .2s ease-in } .smart-numeric-text-box[focus] .smart-input-addon, .smart-numeric-text-box[focus] .smart-spin-button, .smart-numeric-text-box[focus] input.smart-input { border-color: var(--smart-outline) } .smart-numeric-text-box[hint] .smart-hint { opacity: 0; top: 100%; bottom: initial } .smart-numeric-text-box[hint][focus] .smart-hint { opacity: 1 } .smart-numeric-text-box[radix-display-position=right]:not([spin-buttons]) .smart-numeric-text-box-radix-display, .smart-numeric-text-box[radix-display-position=right][spin-buttons][spin-buttons-position=left] .smart-numeric-text-box-radix-display { border-left-width: 0; border-right-width: var(--smart-border-width) } .smart-numeric-text-box[disabled], .smart-numeric-text-box[value=-Infinity] .smart-spin-buttons-container, .smart-numeric-text-box[value=Infinity] .smart-spin-buttons-container, .smart-numeric-text-box[value=NaN] .smart-spin-buttons-container, .smart-numeric-text-box[value=null] .smart-numeric-text-box-radix-display { opacity: .55; cursor: default } .smart-numeric-text-box[spin-buttons] input.smart-input { width: calc(100% - var(--smart-editor-addon-width)); border-right-width: 0 } .smart-numeric-text-box[radix-display] input.smart-input { width: calc(100% - var(--smart-numeric-text-box-default-radix-display-width)) } .smart-numeric-text-box[show-unit] input.smart-input { width: calc(100% - var(--smart-numeric-text-box-default-unit-display-width)) } .smart-numeric-text-box[spin-buttons][radix-display] input.smart-input { width: calc(100% - var(--smart-editor-addon-width) - var(--smart-numeric-text-box-default-radix-display-width)) } .smart-numeric-text-box[spin-buttons][show-unit] input.smart-input { width: calc(100% - var(--smart-editor-addon-width) - var(--smart-numeric-text-box-default-unit-display-width)) } .smart-numeric-text-box[radix-display][show-unit] input.smart-input { width: calc(100% - var(--smart-numeric-text-box-default-radix-display-width) - var(--smart-numeric-text-box-default-unit-display-width)) } .smart-numeric-text-box[spin-buttons][radix-display][show-unit] input.smart-input { width: calc(100% - var(--smart-numeric-text-box-default-unit-display-width) - var(--smart-editor-addon-width) - var(--smart-numeric-text-box-default-radix-display-width)) } .smart-numeric-text-box[spin-buttons] .smart-spin-buttons-container { border-right-width: var(--smart-border-width) } .smart-numeric-text-box[spin-buttons][spin-buttons-position=left] .smart-spin-buttons-container { border-right-width: 0 } .smart-numeric-text-box[spin-buttons][spin-buttons-position=left] input.smart-input { border-right-width: var(--smart-border-width) } .smart-numeric-text-box[spin-buttons][spin-buttons-position=left][show-unit] input.smart-input { border-right-width: 0 } .smart-numeric-text-box[spin-buttons][spin-buttons-position=left][show-unit] .smart-numeric-text-box-unit-display { border-right-width: var(--smart-border-width) } .smart-numeric-text-box[show-unit] input.smart-input, .smart-numeric-text-box[spin-buttons][show-unit] .smart-numeric-text-box-unit-display { border-right-width: 0 } .smart-numeric-text-box[show-unit] .smart-numeric-text-box-unit-display { border-right-width: var(--smart-border-width) } .smart-numeric-text-box.underlined { border-width: 0 0 1px; background: var(--smart-background) } .smart-numeric-text-box.underlined input { border-width: 0 0 1px } .smart-numeric-text-box.underlined input:focus { border: none } .smart-numeric-text-box.underlined .smart-drop-down-button, .smart-numeric-text-box.underlined .smart-spin-button { background: var(--smart-background); border-width: 0 0 1px; border-radius: 0 } .smart-numeric-text-box.underlined .smart-drop-down-button[active], .smart-numeric-text-box.underlined .smart-drop-down-button[hover], .smart-numeric-text-box.underlined .smart-spin-button[active], .smart-numeric-text-box.underlined .smart-spin-button[hover] { background: var(--smart-background); color: var(--smart-ui-state-active) } .smart-numeric-text-box.underlined .smart-hint { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: block !important; box-sizing: border-box; padding: var(--smart-editor-label-padding); color: var(--smart-background-color); pointer-events: none; font-size: 75%; opacity: 0; transition: color .2s, font-size .2s, line-height .2s, margin-top .2s, opacity .1s, top .2s; margin-top: calc(0px - var(--smart-font-size)) } .smart-numeric-text-box.underlined .smart-hint:after { content: ""; position: absolute; left: 0; bottom: -2px; display: block; width: 100%; height: 2px; background-color: var(--smart-primary); transform-origin: bottom center; transform: scaleX(0); transition: transform .2s } .smart-numeric-text-box.underlined:not([focus]) .smart-hint { margin-top: 0 } .smart-numeric-text-box.underlined[focus] .smart-drop-down-button { color: var(--smart-primary); opacity: 1; border-bottom-color: transparent } .smart-numeric-text-box.underlined[focus] .smart-hint { color: var(--smart-primary); opacity: 1 } .smart-numeric-text-box.underlined[focus] .smart-hint:after { transform: scale(1) } .smart-numeric-text-box.underlined[focus] .smart-spin-button { border-bottom-color: transparent } .smart-numeric-text-box.outlined { height: auto; min-height: 0; border-radius: var(--smart-border-radius); background: var(--smart-background) } .smart-numeric-text-box.outlined input { transition: border-color .2s; border: 1px solid var(--smart-border); outline: unset; display: block; padding: 13px } .smart-numeric-text-box.outlined .smart-drop-down-button, .smart-numeric-text-box.outlined .smart-spin-button { background: var(--smart-background); border-width: 0 } .smart-numeric-text-box.outlined .smart-drop-down-button[active], .smart-numeric-text-box.outlined .smart-drop-down-button[hover], .smart-numeric-text-box.outlined .smart-spin-button[active], .smart-numeric-text-box.outlined .smart-spin-button[hover] { background: var(--smart-background); color: var(--smart-ui-state-active) } .smart-numeric-text-box.outlined .smart-drop-down-button { padding: 8px 0 } .smart-numeric-text-box.outlined .smart-hint { position: absolute; top: 0; left: 0; display: flex !important; border-color: var(--smart-border) !important; width: 100%; max-height: 100%; color: var(--smart-background-color); font-size: 75%; line-height: 15px; cursor: text; padding: 0; margin-top: -6px; transition: color .2s, z-index .2s, font-size .2s, opacity .3s, font-size .2s, line-height .2s } .smart-numeric-text-box.outlined .smart-hint:after, .smart-numeric-text-box.outlined .smart-hint:before { content: ""; display: block; box-sizing: border-box; margin-top: 6px; border-top: solid 1px; border-top-color: var(--smart-border) !important; min-width: 10px; height: 8px; pointer-events: none; box-shadow: inset 0 1px transparent; transition: border-color .2s, box-shadow .2s } .smart-numeric-text-box.outlined .smart-hint:before { margin-right: 4px; border-left: solid 1px transparent; border-radius: var(--smart-border-radius) 0 } .smart-numeric-text-box.outlined .smart-hint:after { flex-grow: 1; margin-left: 4px; border-right: solid 1px transparent; border-radius: 0 var(--smart-border-radius) } .smart-numeric-text-box.outlined:not([focus]) .smart-hint { font-size: var(--smart-font-size); line-height: 48px; opacity: 0 } .smart-numeric-text-box.outlined[focus] { --smart-border: var(--smart-primary) } .smart-numeric-text-box.outlined[focus] .smart-input { border: 1px solid var(--smart-border); border-top-color: transparent !important } .smart-numeric-text-box.outlined[focus] .smart-drop-down-button { color: var(--smart-primary) } .smart-numeric-text-box.outlined[focus] .smart-hint { color: var(--smart-primary); opacity: 1 } .smart-numeric-text-box.outlined[focus] .smart-hint:after, .smart-numeric-text-box.outlined[focus] .smart-hint:before { border-top-color: var(--smart-primary) !important } .smart-numeric-text-box-radix-display { display: flex; align-items: center; cursor: default; background-color: var(--smart-surface); color: var(--smart-surface-color); width: var(--smart-numeric-text-box-default-radix-display-width); justify-content: center } .smart-numeric-text-box-unit-display { display: flex; align-items: center; cursor: default } .smart-numeric-text-box-drop-down { position: absolute; box-sizing: border-box; height: auto; border-width: var(--smart-border-width); border-style: solid; border-color: var(--smart-border); box-shadow: var(--smart-elevation-8); padding: 2px; top: 100%; z-index: 9999; list-style-type: none; transform: scaleY(1); opacity: 1; background: var(--smart-background); color: var(--smart-background-color); font-family: var(--smart-font-family); font-size: var(--smart-font-size) } .smart-numeric-text-box-drop-down .smart-list-item { cursor: pointer; margin: 1px; border: 1px solid transparent; padding: 4px 8px; word-break: break-all } .smart-numeric-text-box-drop-down .smart-list-item:hover, .smart-numeric-text-box-drop-down .smart-list-item[hover] { background-color: var(--smart-ui-state-hover); color: var(--smart-ui-state-color-hover) } .smart-numeric-text-box-drop-down.smart-visibility-hidden { transform: scaleY(0); opacity: 0 } .smart-numeric-text-box-drop-down.smart-drop-down-repositioned:not([animation=none]) { transform-origin: top; transition: opacity .2s ease-in, visibility .2s ease-in, transform .2s ease-in } .smart-numeric-text-box-pressed-component { background-color: var(--smart-ui-state-active); color: var(--smart-ui-state-color-active); border-color: var(--smart-ui-state-border-active) } smart-numeric-text-box[right-to-left]>.smart-container { direction: initial } smart-numeric-text-box[right-to-left] .smart-hint, smart-numeric-text-box[right-to-left] .smart-label, smart-numeric-text-box[right-to-left] .smart-numeric-text-box-drop-down, smart-numeric-text-box[right-to-left] .smart-numeric-text-box-radix-display, smart-numeric-text-box[right-to-left] input.smart-input { direction: rtl } smart-numeric-text-box[right-to-left] .smart-numeric-text-box-unit-display { direction: rtl; flex-direction: row-reverse } .smart-numeric-text-box-drop-down.smart-drop-down-repositioned[right-to-left] { direction: rtl } .smart-pager-middle-buttons-container { order: 1; height: 100% } .smart-pager-far-buttons-container { order: 2; height: 100% } .smart-pager-far-buttons-container.near { order: 0 } .smart-pager-far-buttons-container.far { order: 2 } .smart-pager-input-and-label-container { order: 3 } .smart-pager-input-and-label-container.near { order: -2 } .smart-pager-size-selector-and-label-container { order: 4 } .smart-pager-size-selector-and-label-container.near { order: -1 } .smart-pager-summary-container { order: 5 } .smart-pager-summary-container.near { order: -2 } .smart-pager-near-buttons-container { order: 0; height: 100% } .smart-pager-near-buttons-container.near { order: 0 } .smart-pager-near-buttons-container.far { order: 2 } smart-pager { min-width: 300px; height: var(--smart-pager-default-height); justify-content: center; padding: var(--smart-pager-padding); --smart-item-border-radius: 100%; --smart-item-border-top-left-radius: 100%; --smart-item-border-top-right-radius: 100%; --smart-item-border-bottom-left-radius: 100%; --smart-item-border-bottom-right-radius: 100% } smart-pager.smart-element { overflow: visible; border-radius: 0; background: var(--smart-surface); color: var(--smart-surface-color) } smart-pager:focus { border-color: var(--smart-outline) } smart-pager.smart-container, smart-pager>.smart-container { flex-direction: row; display: flex; align-items: center } smart-pager .smart-pager-far-buttons-container, smart-pager .smart-pager-input-and-label-container, smart-pager .smart-pager-middle-buttons-container, smart-pager .smart-pager-near-buttons-container, smart-pager .smart-pager-size-selector-and-label-container, smart-pager .smart-pager-summary-container { display: flex; flex-direction: row; align-items: center; justify-content: center; margin: 0 4px } smart-pager .smart-pager-page-index-selectors-container { display: flex; color: var(--smart-pager-color); width: auto; height: 100%; outline: 0; align-items: center } smart-pager .smart-pager-page-index-selectors-container:focus .smart-pager-page-index-selector[selected] { text-decoration: underline } smart-pager .smart-pager-label { display: flex; border: none; align-items: center; justify-content: center; overflow: hidden; text-overflow: ellipsis; height: 100%; margin: 0 8px } smart-pager .smart-pager-button, smart-pager .smart-pager-page-index-selector { font-size: inherit; font-family: inherit; display: flex; overflow: hidden; position: relative; border-top-left-radius: var(--smart-item-border-top-left-radius); border-top-right-radius: var(--smart-item-border-top-right-radius); border-bottom-left-radius: var(--smart-item-border-bottom-left-radius); border-bottom-right-radius: var(--smart-item-border-bottom-right-radius) } smart-pager .smart-pager-label span { padding: 2px } smart-pager .smart-pager-button { align-items: center; justify-content: center; width: var(--smart-pager-button-width); height: var(--smart-pager-button-height) } smart-pager .smart-pager-button:hover { background: var(--smart-ui-state-hover); border-color: var(--smart-ui-state-border-hover); color: var(--smart-ui-state-color-hover) } smart-pager .smart-pager-button:active { background: var(--smart-ui-state-active); border-color: var(--smart-ui-state-border-active); color: var(--smart-ui-state-color-active) } smart-pager .smart-pager-button:active .smart-ripple { background-color: var(--smart-ui-state-color-active) } smart-pager .smart-pager-button[disabled] { opacity: .55 } smart-pager .smart-pager-button .smart-ripple { background-color: var(--smart-ui-state-active) } smart-pager .smart-pager-page-index-selector { flex-grow: 1; align-items: center; justify-content: center; user-select: none; cursor: pointer; text-overflow: ellipsis; width: var(--smart-pager-page-index-selector-width); height: var(--smart-pager-page-index-selector-height); margin-left: var(--smart-pager-page-index-selector-horizontal-offset) } smart-pager .smart-pager-page-index-selector:first-child { margin-left: -1px } smart-pager .smart-pager-page-index-selector:hover { background-color: var(--smart-ui-state-hover); color: var(--smart-ui-state-color-hover); border-color: var(--smart-ui-state-border-hover) } smart-pager .smart-pager-page-index-selector .smart-ripple { background-color: var(--smart-ui-state-active) } smart-pager .smart-pager-page-index-selector[selected] { background-color: var(--smart-ui-state-active); color: var(--smart-ui-state-color-active); border-color: var(--smart-ui-state-border-active); box-shadow: var(--smart-elevation-2) } smart-pager .smart-pager-page-index-selector[selected] .smart-ripple { background-color: var(--smart-ui-state-color-active) } smart-pager .smart-page-size-selector, smart-pager .smart-pager-input { background: var(--smart-background); color: var(--smart-background-color) } smart-pager .smart-next-ellipsis-button, smart-pager .smart-previous-ellipsis-button { width: var(--smart-pager-page-index-ellipsis-selector-width); height: var(--smart-pager-page-index-ellipsis-selector-height) } smart-pager .smart-page-size-selector { width: var(--smart-pager-page-size-selector-width); --smart-item-border-top-left-radius: var(--smart-border-radius); --smart-item-border-top-right-radius: var(--smart-border-radius); --smart-item-border-bottom-left-radius: var(--smart-border-radius); --smart-item-border-bottom-right-radius: var(--smart-border-radius) } smart-pager .smart-pager-input { width: var(--smart-pager-input-width); box-sizing: border-box; padding: 0 var(--smart-editor-label-padding); margin: 0 5px; border-top-left-radius: var(--smart-border-top-left-radius); border-top-right-radius: var(--smart-border-top-right-radius); border-bottom-left-radius: var(--smart-border-bottom-left-radius); border-bottom-right-radius: var(--smart-border-bottom-right-radius); border-color: var(--smart-border); border-style: solid; border-width: var(--smart-border-width); height: var(--smart-text-box-default-height) } smart-pager:not([show-navigation-button-labels]) .smart-pager-button { border-top-left-radius: var(--smart-item-border-top-left-radius); border-top-right-radius: var(--smart-item-border-top-right-radius); border-bottom-left-radius: var(--smart-item-border-bottom-left-radius); border-bottom-right-radius: var(--smart-item-border-bottom-right-radius); width: var(--smart-pager-page-index-selector-width) } smart-pager[disabled] .smart-pager-page-index-selector { user-select: none; cursor: default } smart-pager[right-to-left] .smart-pager-far-buttons-container, smart-pager[right-to-left] .smart-pager-input-and-label-container, smart-pager[right-to-left] .smart-pager-label, smart-pager[right-to-left] .smart-pager-middle-buttons-container, smart-pager[right-to-left] .smart-pager-near-buttons-container, smart-pager[right-to-left] .smart-pager-page-index-selectors-container, smart-pager[right-to-left] .smart-pager-size-selector-and-label-container, smart-pager[right-to-left]>.smart-container { flex-direction: row-reverse } smart-pager[right-to-left] .smart-arrow-left-first:after, smart-pager[right-to-left] .smart-arrow-left:after, smart-pager[right-to-left] .smart-arrow-right-last:after, smart-pager[right-to-left] .smart-arrow-right:after { transform: rotate(180deg); transform-origin: center } smart-pager[right-to-left] .smart-first-button, smart-pager[right-to-left] .smart-last-button, smart-pager[right-to-left] .smart-next-page-button, smart-pager[right-to-left] .smart-pager-input, smart-pager[right-to-left] .smart-pager-label, smart-pager[right-to-left] .smart-pager-label>span, smart-pager[right-to-left] .smart-pager-page-index-selector, smart-pager[right-to-left] .smart-previous-page-button { direction: rtl } smart-password-text-box { display: block; width: var(--smart-text-box-default-width); height: var(--smart-text-box-default-height) } smart-password-text-box.smart-element { border: 1px solid var(--smart-border); background: var(--smart-background); overflow: visible; border-radius: var(--smart-border-radius) } .smart-password-text-box>.smart-container { position: relative } .smart-password-text-box .smart-content, .smart-password-text-box .smart-content .smart-input { width: 100%; height: 100%; color: inherit; font-family: inherit; position: relative; overflow: hidden } .smart-password-text-box .smart-content .smart-input::-ms-reveal { display: none } .smart-password-text-box .smart-password-icon { position: absolute; right: 0; top: 0; height: 100%; width: 30px; display: flex; justify-content: center; font-size: inherit; align-items: center; cursor: pointer; user-select: none; color: var(--smart-background-color); font-family: var(--smart-font-family-icon) } .smart-password-text-box .smart-password-icon:after { content: var(--smart-icon-visibility) } .smart-password-text-box .smart-password-icon.smart-hidden { display: none } .smart-password-text-box smart-tooltip { font-size: inherit; font-family: inherit; font-weight: inherit } .smart-password-text-box .smart-hint, .smart-password-text-box .smart-label { display: none; position: absolute } .smart-password-text-box[hint] .smart-hint, .smart-password-text-box[label] .smart-label { position: absolute; left: 0; bottom: 100%; font-size: 12px; width: 100%; display: block; padding: var(--smart-editor-label-padding); pointer-events: none; user-select: none; -webkit-user-select: none; -ms-user-select: none; -moz-user-select: none; text-align: initial; line-height: initial; vertical-align: initial } .smart-password-text-box[hint] .smart-hint { opacity: 0; transition: opacity .2s cubic-bezier(.4, 0, .6, 1); top: 100%; bottom: initial } .smart-password-text-box[hint][focus] .smart-hint { opacity: 1; transition: opacity .2s cubic-bezier(.4, 0, .2, 1) } @media not all and (min-resolution:0.001dpcm) { @supports (-webkit-appearance:none) { .smart-password-text-box .smart-hint, .smart-password-text-box .smart-hint::after { transition-duration: .1s } } } .smart-password-text-box[show-password-strength] .smart-password-short input:focus, .smart-password-text-box[show-password-strength]:focus .smart-password-short input { border-color: var(--smart-error) } .smart-password-text-box[show-password-strength] .smart-password-weak input:focus, .smart-password-text-box[show-password-strength]:focus .smart-password-weak input { border-color: orange } .smart-password-text-box[show-password-strength] .smart-password-far input:focus, .smart-password-text-box[show-password-strength]:focus .smart-password-far input { border-color: #ff0 } .smart-password-text-box[show-password-strength] .smart-password-good input:focus, .smart-password-text-box[show-password-strength]:focus .smart-password-good input { border-color: #00bfff } .smart-password-text-box[show-password-strength] .smart-password-strong input:focus, .smart-password-text-box[show-password-strength]:focus .smart-password-strong input { border-color: var(--smart-success) } smart-password-text-box[right-to-left] .smart-hint, smart-password-text-box[right-to-left] .smart-label, smart-password-text-box[right-to-left]>.smart-container { direction: rtl } smart-password-text-box[right-to-left] smart-tooltip { direction: initial } smart-password-text-box[right-to-left] .smart-password-icon { left: 0; right: initial } .smart-pivot-table tfoot td, .smart-pivot-table thead th { font-weight: 700 } .smart-pivot-table thead th:not(:last-child):not(.last-visible) { border-right: var(--smart-border-width) solid var(--smart-border) } .smart-pivot-table tbody tr td { transform: scaleY(1) } .smart-pivot-table tbody tr.collapsed { height: 0 } .smart-pivot-table tbody tr.collapsed td { border-top-width: 0; border-top-color: transparent; padding-top: 0; padding-bottom: 0; line-height: 0; transform: scaleY(0) } .smart-pivot-table tbody tr.no-height td { line-height: 0 } .smart-pivot-table th.align-left>.wrapper { justify-content: flex-start } .smart-pivot-table th.align-center>.wrapper { justify-content: center } .smart-pivot-table th.align-right>.wrapper { justify-content: flex-end } .smart-pivot-table tr td { line-height: calc(var(--smart-table-row-height) - 2 * var(--smart-table-cell-padding) - var(--smart-border-width)); white-space: nowrap } .smart-pivot-table tr:last-child:not(:first-child) .smart-pivot-table-grouping-header, .smart-pivot-table tr:last-child:not(:first-child) .smart-pivot-table-total-header { border-top: var(--smart-border-width) solid var(--smart-border) } .smart-pivot-table tr:not(:last-child) .smart-pivot-table-grouping-header, .smart-pivot-table tr:not(:last-child) .smart-pivot-table-selection-header, .smart-pivot-table tr:not(:last-child) .smart-pivot-table-total-header { border-bottom: none } .smart-pivot-table td.align-left { text-align: left } .smart-pivot-table td.align-center { text-align: center } .smart-pivot-table td.align-right { text-align: right } .smart-pivot-table td.sort-by { position: relative } .smart-pivot-table td.sort-by:before { content: var(--smart-icon-up); display: flex; align-items: center; justify-content: flex-end; visibility: hidden; position: absolute; top: 0; right: var(--smart-table-cell-padding); height: 100%; font-family: var(--smart-font-family-icon); opacity: 0; transform: rotate(90deg) } .smart-pivot-table td.sort-by.asc:before, .smart-pivot-table td.sort-by.desc:before { opacity: 1; visibility: visible } .smart-pivot-table td[selection-detail]:before { content: attr(selection-detail); position: absolute; top: 100%; left: 0; padding: 3px; background-color: var(--smart-secondary); color: var(--smart-secondary-color); font-size: var(--smart-font-size); font-variant: small-caps; opacity: .8; pointer-events: none } .smart-pivot-table td[selection-detail][detail-position-x=right]:before { left: unset; right: 0 } .smart-pivot-table td[selection-detail][detail-position-y=top]:before { top: 0; transform: translateY(-100%) } .smart-pivot-table .smart-pivot-table-main-container { width: 100%; height: 100%; overflow: auto } .smart-pivot-table .smart-pivot-table-main-container.prevent-scroll { overflow: hidden } .smart-pivot-table .smart-pivot-table-selection-header { border-top: none } .smart-pivot-table .smart-pivot-table-total-header { border-top: none; width: var(--smart-pivot-table-cell-width) } .smart-pivot-table .smart-pivot-table-grouping-header { border-top: none; width: var(--smart-pivot-table-secondary-group-width) } .smart-pivot-table .smart-pivot-table-toolbar { display: none; border: none; border-bottom: var(--smart-border-width) solid var(--smart-border); height: var(--smart-table-row-height) } .smart-pivot-table .smart-pivot-table-toolbar smart-breadcrumb .smart-breadcrumb-items .smart-breadcrumb-item { height: calc(100% - var(--smart-breadcrumb-padding)) } .smart-pivot-table .smart-pivot-table-row-group-breadcrumb:before { content: var(--smart-icon-align-left); transform: scale(-1) } .smart-pivot-table:not([right-to-left]) td.sort-by.desc::before, .smart-pivot-table[right-to-left] td.sort-by.asc:before { transform: rotate(270deg) } .smart-pivot-table .smart-pivot-table-pivot-breadcrumb { border-left: var(--smart-border-width) solid var(--smart-border); border-radius: 0 } .smart-pivot-table .smart-pivot-table-pivot-breadcrumb:before { content: var(--smart-icon-refresh) } .smart-pivot-table .empty { border-top: none } .smart-pivot-table .total-arrow { display: inline-flex; margin-left: var(--smart-table-arrow-margin); width: var(--smart-table-arrow-size); height: var(--smart-table-arrow-size); cursor: pointer } .smart-pivot-table .total-arrow:focus { outline: 0; border: 1px solid var(--smart-ui-state-color-focus); border-radius: 50%; color: var(--smart-ui-state-color-focus) } .smart-pivot-table .smart-pivot-panel { border-top: none; border-right: none; border-bottom: none; width: 100%; height: 100% } .smart-pivot-table smart-breadcrumb { position: relative; border: none; width: unset; height: 100%; padding-left: calc(3 * var(--smart-breadcrumb-padding)) } .smart-pivot-panel .smart-accordion smart-accordion-item .smart-accordion-item-content, .smart-pivot-panel smart-accordion-item .smart-content-container { padding: 0 } .smart-pivot-table smart-breadcrumb:before { position: absolute; left: 0; display: flex; align-items: center; justify-content: center; width: calc(3 * var(--smart-breadcrumb-padding)); height: 100%; font-family: var(--smart-font-family-icon) } .smart-pivot-table smart-breadcrumb>.smart-container { position: relative } .smart-pivot-table smart-breadcrumb>.smart-container.drop-target:after { content: ''; position: absolute; top: 0; left: calc(-3 * var(--smart-breadcrumb-padding)); box-sizing: border-box; border: 2px dashed var(--smart-primary); width: calc(100% + 4 * var(--smart-breadcrumb-padding)); height: calc(100% + var(--smart-breadcrumb-padding)) } .smart-pivot-table smart-breadcrumb .smart-breadcrumb-items, .smart-pivot-table smart-breadcrumb .smart-template-container { height: 100% } .smart-pivot-table smart-breadcrumb .smart-breadcrumb-item { height: calc(100% - var(--smart-breadcrumb-padding)) } .smart-pivot-table smart-breadcrumb .smart-breadcrumb-placeholder { position: absolute; top: var(--smart-breadcrumb-padding); left: 0; font-style: italic } .smart-pivot-table [selection-detail] { position: relative; overflow: visible; z-index: 1 } .smart-pivot-table:not([animation=none]) tbody tr { transition: height .2s ease-in-out } .smart-pivot-table:not([animation=none]) tr td { transition: padding-top .2s ease-in-out, padding-bottom .2s ease-in-out, transform .2s ease-in-out, border-top-color .2s ease-in-out } .smart-pivot-table:not([designer]) .smart-pivot-table-designer-container { display: none } .smart-pivot-table[group-layout=classic] .smart-pivot-table-grouping-header { width: calc(.75 * var(--smart-pivot-table-cell-width)) } .smart-pivot-table[group-layout=classic] tbody td.expanded:not(.main)+td[data-field^=group]:not(.main), .smart-pivot-table[group-layout=classic] tbody td:not(.expanded)+td[data-field^=group]:not(.main) { font-size: 0 } .smart-pivot-table[group-layout=classic] .hierarchy-arrow::after { content: var(--smart-icon-plus) } .smart-pivot-table[group-layout=classic] td.expanded .hierarchy-arrow::after { content: var(--smart-icon-minus) } .smart-pivot-table[designer]>.smart-container { display: grid; grid-template-columns: 1fr var(--smart-pivot-panel-width); grid-template-rows: 100% } .smart-pivot-table[designer] .smart-pivot-table-designer-container { display: block; height: 100% } .smart-pivot-table[designer-position=near]>.smart-container { grid-template-columns: var(--smart-pivot-panel-width) 1fr } .smart-pivot-table[designer-position=near] .smart-pivot-table-main-container { order: 1 } .smart-pivot-table[designer-position=near]:not([right-to-left]) .smart-pivot-panel { border-left: none; border-right: var(--smart-border-width) solid var(--smart-border) } .smart-pivot-table[toolbar]>.smart-container { display: flex; flex-direction: column } .smart-pivot-table[toolbar] .smart-pivot-table-main-container { height: calc(100% - var(--smart-table-row-height)); grid-area: main } .smart-pivot-table[toolbar] .smart-pivot-table-toolbar { display: grid; grid-template-columns: 1fr 1fr var(--smart-table-row-height) var(--smart-table-row-height); grid-area: toolbar; gap: var(--smart-pivot-panel-padding) } .smart-pivot-table[toolbar] .smart-pivot-table-designer-container { grid-area: designer; min-height: 0; max-height: unset } .smart-pivot-table[toolbar][designer]>.smart-container { display: grid; grid-template-columns: 1fr var(--smart-pivot-panel-width); grid-template-rows: var(--smart-table-row-height) 1fr; grid-template-areas: "toolbar toolbar" "main designer" } .smart-pivot-table[toolbar][designer] .smart-pivot-table-toolbar { grid-template-columns: 1fr 1fr var(--smart-table-row-height) } .smart-pivot-table[toolbar][designer] .smart-table-toolbar-button.fields { display: none } .smart-pivot-table[toolbar][designer] .smart-pivot-table-main-container { width: 100%; height: 100% } .smart-pivot-table[toolbar][designer][designer-position=near]>.smart-container { grid-template-columns: var(--smart-pivot-panel-width) 1fr; grid-template-areas: "toolbar toolbar" "designer main" } .smart-pivot-table[selection][selection-mode=cell] tbody td { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none } .smart-pivot-table[selection][selection-mode=cell] tbody td.selected { background-color: rgba(var(--smart-primary-rgb), .8); color: var(--smart-primary-color) } .smart-table[column-reorder] th[data-field].smart-pivot-table-total-header, .smart-table[column-reorder][column-totals] th[data-field] { cursor: unset } .smart-table[freeze-header] thead tr:nth-child(4)>th { top: calc(3 * var(--smart-table-column-header-height)) } .smart-table[freeze-header] thead tr:nth-child(5)>th { top: calc(4 * var(--smart-table-column-header-height)) } .smart-table[freeze-header] thead tr:nth-child(6)>th { top: calc(5 * var(--smart-table-column-header-height)) } .smart-table[freeze-header] thead tr:nth-child(7)>th { top: calc(6 * var(--smart-table-column-header-height)) } .smart-table[freeze-header] thead tr:nth-child(8)>th { top: calc(7 * var(--smart-table-column-header-height)) } .smart-table[freeze-header] thead tr:nth-child(9)>th { top: calc(8 * var(--smart-table-column-header-height)) } .smart-table[freeze-header] thead tr:nth-child(10)>th { top: calc(9 * var(--smart-table-column-header-height)) } .smart-table-window.drill-down { --smart-window-default-width: 750px; --smart-window-footer-padding: 0; --smart-window-footer-height: 0px } .smart-table-window.drill-down .smart-content-container>.smart-content>div { display: grid; grid-template-rows: auto 1fr; grid-template-columns: 100%; gap: var(--smart-pivot-panel-padding); width: 100%; height: 100% } .smart-table-window.drill-down .drill-down-details { display: flex } .smart-table-window.drill-down .smart-content strong { margin-right: var(--smart-pivot-panel-padding); margin-left: calc(var(--smart-pivot-panel-padding)/ 3) } .smart-table-window.drill-down smart-table { min-height: 0 } .smart-table-window.fields { --smart-window-footer-padding: 0; --smart-window-footer-height: 0px; --smart-window-default-width: 600px; --smart-window-default-height: 800px } .smart-table-window.fields smart-pivot-panel { width: 100%; height: 100% } .smart-table-window.fields smart-pivot-panel>.smart-container { grid-template-rows: auto 1fr; grid-template-columns: unset } .smart-table-window.fields smart-pivot-panel>.smart-container>div:first-child { order: 1 } .smart-table-window.fields smart-pivot-panel>.smart-container>div:nth-child(2) { order: 0 } .smart-table-window.fields smart-pivot-panel .smart-filter-panel .smart-filter-panel-button-container>smart-button { width: 40% } .smart-table-window.fields smart-pivot-panel .smart-pivot-panel-columns-view { grid-template-rows: 2fr 1fr 1fr 1fr } .smart-table-window.fields smart-pivot-panel .smart-pivot-panel-tabs { border-left: none; writing-mode: unset } .smart-table-window.fields smart-pivot-panel .smart-pivot-panel-tab-item { height: auto; border-bottom-width: calc(2 * var(--smart-border-width)); border-left-width: var(--smart-border-width); border-left-color: transparent } .smart-table-window.fields smart-pivot-panel .smart-pivot-panel-tab-item:first-child { margin-top: 0; margin-right: var(--smart-pivot-panel-padding) } .smart-table-window.fields smart-pivot-panel .smart-pivot-panel-tab-item:focus { border-color: var(--smart-ui-state-color-focus) } .smart-table-window.fields smart-pivot-panel .smart-pivot-panel-tab-item.selected { border-bottom-color: var(--smart-primary) } .smart-table-window.fields smart-pivot-panel .smart-pivot-panel-tab-item.selected:focus { border-color: var(--smart-ui-state-color-focus) var(--smart-ui-state-color-focus) var(--smart-primary) } .smart-table-window.fields smart-pivot-panel .smart-pivot-panel-tab-item .icon { margin-bottom: 0; margin-right: 3px } .smart-table-window.fields:not([animation=none]) smart-pivot-panel .smart-pivot-panel-tab-item { transition: border-bottom-color .3s ease-out } .smart-window.smart-table-window.drill-down .smart-content-container>.smart-footer, .smart-window.smart-table-window.fields .smart-content-container>.smart-footer { display: none } .smart-pivot-panel { border: var(--smart-border-width) solid var(--smart-border); width: var(--smart-pivot-panel-width); height: var(--smart-pivot-panel-default-height) } .smart-pivot-panel>.smart-container { display: grid; grid-template-columns: 1fr auto; min-width: 0; min-height: 0 } .smart-pivot-panel>.smart-container>div:first-child { min-height: 0 } .smart-pivot-panel>.smart-container .check-box { position: relative; left: unset; transform: none } .smart-pivot-panel smart-accordion-item.filtered .smart-label { position: relative; color: var(--smart-primary) } .smart-pivot-panel .icon:before, .smart-pivot-panel smart-accordion-item.filtered .smart-label:before, .smart-pivot-panel smart-tree-item .settings-icon:before { height: 100%; font-weight: 400; color: inherit; text-decoration: inherit; font-family: var(--smart-font-family-icon); font-size: var(--smart-arrow-size); font-variant: normal; text-transform: none } .smart-pivot-panel smart-accordion-item.filtered .smart-label:before { font-style: normal; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; content: var(--smart-icon-filter); position: absolute; right: calc(100% + var(--smart-pivot-panel-padding)/ 2); width: 16px } .smart-pivot-panel smart-tree-item .settings-icon { margin-right: calc(var(--smart-pivot-panel-padding)/ 2) } .smart-pivot-panel smart-tree-item .settings-icon:before { width: 100%; font-style: normal; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; position: relative; content: var(--smart-icon-settings) } .smart-pivot-panel smart-accordion, .smart-pivot-panel smart-filter-panel { width: 100%; height: 100% } .smart-pivot-panel smart-filter-panel>.smart-container { display: grid; grid-template-rows: auto 1fr auto; row-gap: var(--smart-pivot-panel-padding) } .smart-pivot-panel smart-filter-panel>.smart-container>div:nth-child(2) { min-height: 0 } .smart-pivot-panel smart-filter-panel>.smart-container smart-tree { height: 100% } .smart-pivot-panel smart-tree.smart-element { visibility: inherit } .smart-pivot-panel smart-tree:focus { border-color: var(--smart-ui-state-color-focus) } .smart-pivot-panel .icon:before { width: 100%; font-style: normal; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; position: relative } .smart-pivot-panel .smart-pivot-panel-tabs { display: flex; border-left: var(--smart-border-width) solid var(--smart-border); writing-mode: vertical-lr } .smart-pivot-panel .smart-pivot-panel-tab-item { display: flex; align-items: center; justify-content: center; border: 1px solid transparent; border-left-width: calc(2 * var(--smart-border-width)); height: var(--smart-pivot-panel-tab-item-height); padding: var(--smart-pivot-panel-padding); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; cursor: pointer } .smart-pivot-panel .smart-pivot-panel-tab-item:first-child { margin-top: var(--smart-pivot-panel-padding) } .smart-pivot-panel .smart-pivot-panel-tab-item:first-child .icon:before { content: var(--smart-icon-table) } .smart-pivot-panel .smart-pivot-panel-tab-item:nth-child(2) .icon:before { content: var(--smart-icon-filter) } .smart-pivot-panel .smart-pivot-panel-tab-item:hover { color: var(--smart-primary) } .smart-pivot-panel .smart-pivot-panel-tab-item:focus { border-color: var(--smart-ui-state-color-focus); outline: 0 } .smart-pivot-panel .smart-pivot-panel-tab-item.selected { border-left-color: var(--smart-primary) } .smart-pivot-panel .smart-pivot-panel-tab-item.selected:focus { border-color: var(--smart-ui-state-color-focus) var(--smart-ui-state-color-focus) var(--smart-ui-state-color-focus) var(--smart-primary) } .smart-pivot-panel .smart-pivot-panel-tab-item .icon { margin-bottom: 3px } .smart-pivot-panel .smart-pivot-panel-columns-view { display: grid; grid-template-rows: 3fr 1fr 1fr 1fr; width: 100%; min-width: 0; height: 100%; min-height: 0 } .smart-pivot-panel .smart-pivot-panel-columns-view smart-tree { border-color: transparent; width: 100%; height: 100% } .smart-pivot-panel .smart-pivot-panel-active-columns { display: grid; grid-template-rows: auto 1fr; min-width: 0; min-height: 0; border-top: var(--smart-border-width) solid var(--smart-border) } .smart-pivot-panel .smart-pivot-panel-active-columns smart-tree-item .smart-tree-item-label-element>span { display: flex } .smart-pivot-panel .smart-pivot-panel-label { display: flex; padding: var(--smart-pivot-panel-padding); background: var(--smart-primary); color: var(--smart-primary-color) } .smart-pivot-panel .smart-pivot-panel-label .icon { margin-right: calc(var(--smart-pivot-panel-padding)/ 2) } .smart-pivot-panel .smart-pivot-panel-row-groups-label .icon:before { content: var(--smart-icon-align-left); transform: scale(-1) } .smart-pivot-panel .smart-pivot-panel-summaries-label .icon:before { content: var(--smart-icon-math) } .smart-pivot-panel .smart-pivot-panel-pivots-label .icon:before { content: var(--smart-icon-refresh) } .smart-pivot-panel .smart-pivot-panel-columns-container { min-height: 0; overflow: auto } .smart-pivot-panel .smart-pivot-panel-filters-view { height: 100% } .smart-pivot-panel:not([animation=none]) .smart-pivot-panel-tab-item { transition: border-left-color .3s ease-out } .smart-pivot-panel[inverted]>.smart-container { grid-template-columns: auto 1fr } .smart-pivot-panel[inverted]>.smart-container>div:first-child { order: 1 } .smart-pivot-panel[inverted] .smart-pivot-panel-tabs { border-left: none; border-right: var(--smart-border-width) solid var(--smart-border) } .smart-pivot-panel[inverted] .smart-pivot-panel-tab-item { border-left: 1px solid transparent; border-right-width: calc(2 * var(--smart-border-width)) } .smart-pivot-panel[inverted] .smart-pivot-panel-tab-item span:nth-child(2) { transform: rotate(180deg) } .smart-pivot-panel[inverted] .smart-pivot-panel-tab-item.selected { border-right-color: var(--smart-primary) } .smart-pivot-panel[inverted] .smart-pivot-panel-tab-item.selected:focus { border-color: var(--smart-ui-state-color-focus) var(--smart-primary) var(--smart-ui-state-color-focus) var(--smart-ui-state-color-focus) } .smart-pivot-panel[inverted]:not([animation=none]) .smart-pivot-panel-tab-item { transition: border-right-color .3s ease-out } .smart-window.smart-pivot-window { --smart-window-default-height: 190px } .smart-window.smart-pivot-window .smart-content-container>.smart-content { display: grid; grid-template-columns: minmax(175px, auto) 1fr; grid-auto-rows: max-content; gap: var(--smart-pivot-panel-padding); min-width: 0 } .smart-window.smart-pivot-window .smart-content-container>.smart-footer { display: flex; justify-content: space-evenly; align-items: center } .smart-window.smart-pivot-window .smart-content-container>.smart-footer smart-button { --smart-button-padding: 0; width: 40%; height: 100% } .smart-window.smart-pivot-window .smart-content .category.label { grid-column-start: 1; grid-column-end: 3; font-weight: 700; text-decoration: underline } .smart-window.smart-pivot-window smart-input { width: 100% } .smart-window.smart-pivot-window.summary { --smart-window-default-height: 500px } .smart-window.smart-pivot-window:not(.summary) .summary { display: none } .smart-breadcrumb-feedback.cancel:after { content: var(--smart-icon-block); background-color: var(--smart-error); color: var(--smart-error-color) } .smart-breadcrumb-feedback.delete:after { content: var(--smart-icon-delete); background-color: var(--smart-primary); color: var(--smart-primary-color) } .smart-breadcrumb-feedback.pivot:after { content: var(--smart-icon-refresh) } .smart-breadcrumb-feedback.row-group:after { content: var(--smart-icon-align-left); transform: scale(-1) } .smart-breadcrumb-feedback.summary:after { content: var(--smart-icon-math) } .smart-tree-item-feedback.forbidden { border-color: var(--smart-error); color: var(--smart-error) } .smart-tree-item-feedback.forbidden:before { width: 100%; height: 100%; font-family: var(--smart-font-family-icon); font-style: normal; font-weight: 400; font-size: var(--smart-arrow-size); color: inherit; text-decoration: inherit; font-variant: normal; text-transform: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; position: relative; content: var(--smart-icon-block); margin-right: calc(var(--smart-pivot-panel-padding)/ 2) } .smart-pivot-table[right-to-left] thead th:not(:last-child) { border-left: var(--smart-border-width) solid var(--smart-border); border-right: none } .smart-pivot-table[right-to-left] .smart-pivot-table-pivot-breadcrumb, .smart-pivot-table[right-to-left]:not([designer-position=near]) .smart-pivot-panel { border-left: none; border-right: var(--smart-border-width) solid var(--smart-border) } .smart-pivot-table[right-to-left] th.expanded .total-arrow { transform: none } .smart-pivot-table[right-to-left] smart-breadcrumb { padding-left: var(--smart-breadcrumb-padding); padding-right: calc(3 * var(--smart-breadcrumb-padding)) } .smart-pivot-table[right-to-left] smart-breadcrumb:before { left: unset; right: 0 } .smart-pivot-table[right-to-left] .total-arrow { transform: rotate(180deg) } .smart-pivot-table[right-to-left][selection]:not([selection-mode=cell]) thead th:first-child { border-left: none } .smart-table-window[right-to-left].drill-down .smart-content strong { margin-right: calc(var(--smart-pivot-panel-padding)/ 3); margin-left: var(--smart-pivot-panel-padding) } .smart-table-window[right-to-left].fields smart-pivot-panel .smart-pivot-panel-tab-item, .smart-table-window[right-to-left].fields smart-pivot-panel .smart-pivot-panel-tabs { flex-direction: row-reverse } .smart-table-window[right-to-left].fields smart-pivot-panel .smart-pivot-panel-tab-item { display: flex } .smart-table-window[right-to-left].fields smart-pivot-panel .smart-pivot-panel-tab-item:first-child { margin-left: var(--smart-pivot-panel-padding); margin-right: 0 } .smart-table-window[right-to-left].fields smart-pivot-panel .smart-pivot-panel-tab-item .icon { margin-left: 3px; margin-right: 0 } .smart-pivot-panel[right-to-left] { direction: ltr } .smart-pivot-panel[right-to-left] .smart-pivot-panel-tab-item>span:nth-child(2), .smart-pivot-panel[right-to-left]>.smart-container>div:first-child { direction: rtl } .smart-pivot-panel[right-to-left] .smart-pivot-panel-label .icon, .smart-pivot-panel[right-to-left] smart-tree-item .settings-icon { margin-left: calc(var(--smart-pivot-panel-padding)/ 2); margin-right: 0 } .smart-power-button { padding: 0; border-radius: 100%; display: inline-block; width: var(--smart-power-button-default-width); height: var(--smart-power-button-default-width) } .smart-power-button .smart-input { border-radius: 100%; outline: 0; width: 100%; height: 100%; min-width: var(--smart-power-button-default-width); min-height: var(--smart-power-button-default-width); background-color: var(--smart-background); border-style: solid; box-sizing: border-box; border-width: var(--smart-border-width); border-color: var(--smart-border); display: block; position: relative; overflow: hidden } .smart-power-button .smart-input:after { content: var(--smart-icon-power); width: 100%; height: 100%; font-family: smart-icons; font-style: normal; font-weight: 400; font-size: 20px; text-decoration: inherit; font-variant: normal; text-transform: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: center } .smart-power-button .smart-container { cursor: pointer; height: 100%; position: relative; display: flex } .smart-power-button .smart-animation { pointer-events: none } .smart-power-button[focus] { outline: 0 } .smart-power-button[focus] .smart-input { outline: 0; border: var(--smart-border-width) solid var(--smart-ui-state-border-focus); background: var(--smart-ui-state-focus); color: var(--smart-ui-state-color-focus) } .smart-power-button:hover .smart-input { border: var(--smart-border-width) solid var(--smart-ui-state-border-hover); background: var(--smart-ui-state-hover); color: var(--smart-ui-state-color-hover); transition: background-color .1s linear } .smart-power-button:active .smart-input { border: var(--smart-border-width) solid var(--smart-ui-state-border-active); background: var(--smart-ui-state-active); color: var(--smart-ui-state-color-active); transition: background-color .1s linear } .smart-power-button[disabled] .smart-container { cursor: initial } .smart-power-button[checked] .smart-input { background-color: var(--smart-primary); color: var(--smart-primary) } .smart-power-button[checked] .smart-input:after { color: #fff } .smart-power-button[readonly].active .smart-input, .smart-power-button[readonly]:active .smart-input, .smart-power-button[readonly]:hover .smart-input { color: initial; border: var(--smart-border-width) solid var(--smart-button-border); background: var(--smart-button-background); transition: none } smart-power-button.active .smart-input { border: var(--smart-border-width) solid var(--smart-ui-state-border-active); background: var(--smart-ui-state-active); color: var(--smart-ui-state-color-active); transition: background-color .1s linear } smart-power-button.raised { box-shadow: var(--smart-elevation-2) } smart-power-button[right-to-left]>.smart-container>.smart-input { direction: rtl } smart-circular-progress-bar.smart-element, smart-progress-bar.smart-element { border: none } smart-circular-progress-bar.smart-element:focus>.smart-container, smart-progress-bar.smart-element:focus>.smart-container { border-color: var(--smart-outline) } smart-circular-progress-bar.smart-container, smart-circular-progress-bar>.smart-container, smart-progress-bar.smart-container, smart-progress-bar>.smart-container { border-top-left-radius: var(--smart-border-top-left-radius); border-top-right-radius: var(--smart-border-top-right-radius); border-bottom-left-radius: var(--smart-border-bottom-left-radius); border-bottom-right-radius: var(--smart-border-bottom-right-radius); overflow: hidden; position: relative; border-width: var(--smart-border-width); border-style: solid; border-color: var(--smart-border); color: var(--smart-background-color) } smart-circular-progress-bar .smart-label, smart-progress-bar .smart-label { top: 50%; left: 50%; transform: translate(-50%, -50%); position: absolute; text-align: center; color: var(--smart-background-color) } smart-progress-bar { width: var(--smart-progress-bar-default-width); height: var(--smart-progress-bar-default-height) } smart-progress-bar .smart-label { width: auto; color: var(--smart-outline) } smart-progress-bar .smart-value { outline: 0; height: 100%; width: 100%; box-sizing: border-box; position: absolute; border: 1px solid var(--smart-ui-state-border-active); background-color: var(--smart-ui-state-active); transform-origin: left } smart-progress-bar .smart-value.smart-value-animation { animation: indeterminate 3s infinite linear } smart-progress-bar.primary .smart-value { border: 1px solid var(--smart-primary); background-color: var(--smart-primary) } smart-progress-bar.secondary .smart-value { border: 1px solid var(--smart-secondary); background-color: var(--smart-secondary) } smart-progress-bar.success .smart-value { border: 1px solid var(--smart-success); background-color: var(--smart-success) } smart-progress-bar.info .smart-value { border: 1px solid var(--smart-info); background-color: var(--smart-info) } smart-progress-bar.warning .smart-value { border: 1px solid var(--smart-warning); background-color: var(--smart-warning) } smart-progress-bar.error .smart-value { border: 1px solid var(--smart-error); background-color: var(--smart-error) } smart-progress-bar.light .smart-value { border: 1px solid var(--smart-light); background-color: var(--smart-light) } smart-progress-bar.dark .smart-value { border: 1px solid var(--smart-dark); background-color: var(--smart-dark) } smart-progress-bar:not([animation=none]) .smart-value { transition: .2s ease-in-out } smart-progress-bar[inverted] .smart-value, smart-progress-bar[orientation][inverted] .smart-value { transform-origin: right } smart-progress-bar[inverted] .smart-value.smart-value-animation { animation: indeterminate-inverted 3s infinite linear } smart-progress-bar[orientation] .smart-value { transform-origin: left } smart-progress-bar[orientation=vertical] { width: var(--smart-progress-bar-default-height); height: var(--smart-progress-bar-default-width) } smart-progress-bar[orientation=vertical][inverted] .smart-value { transform-origin: left bottom } smart-progress-bar[orientation=vertical] .smart-value { transform-origin: left top } smart-progress-bar[orientation=vertical] .smart-value.smart-value-animation { animation: indeterminate-vertical 3s infinite linear } smart-progress-bar[orientation=vertical] .smart-label { width: 100% } smart-progress-bar[inverted][orientation=vertical] .smart-value.smart-value-animation { animation: indeterminate-vertical-inverted 3s infinite linear } smart-circular-progress-bar { width: var(--smart-circular-progress-bar-default-size); height: var(--smart-circular-progress-bar-default-size) } smart-circular-progress-bar.smart-container, smart-circular-progress-bar>.smart-container { border-radius: 50% } smart-circular-progress-bar .smart-value-animation-ms { stroke-dashoffset: 114 } smart-circular-progress-bar svg:first-of-type { position: absolute; border-radius: 50%; pointer-events: none } smart-circular-progress-bar svg:first-of-type .smart-value.smart-value-animation { animation: circle 2s infinite linear } smart-circular-progress-bar .smart-label-container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); overflow: hidden; box-sizing: content-box; border-radius: 50%; background-color: transparent; border-style: solid; border-width: var(--smart-border-width); border-color: var(--smart-border); width: calc(100% - var(--smart-circular-progress-bar-fill-size)); height: calc(100% - var(--smart-circular-progress-bar-fill-size)) } smart-circular-progress-bar .smart-value, smart-circular-progress-bar .smart-value-path { stroke-width: var(--smart-circular-progress-bar-fill-size); fill: transparent; stroke-dasharray: 314.159 } smart-circular-progress-bar .smart-value { stroke: var(--smart-ui-state-active) } smart-circular-progress-bar .smart-value-path { stroke-dashoffset: 0; stroke: transparent } smart-circular-progress-bar.primary .smart-value { stroke: var(--smart-primary) } smart-circular-progress-bar.secondary .smart-value { stroke: var(--smart-secondary) } smart-circular-progress-bar.success .smart-value { stroke: var(--smart-success) } smart-circular-progress-bar.info .smart-value { stroke: var(--smart-info) } smart-circular-progress-bar.warning .smart-value { stroke: var(--smart-warning) } smart-circular-progress-bar.error .smart-value { stroke: var(--smart-error) } smart-circular-progress-bar.light .smart-value { stroke: var(--smart-light) } smart-circular-progress-bar.dark .smart-value { stroke: var(--smart-dark) } smart-circular-progress-bar:not([animation=none]) .smart-value { transition: stroke-dashoffset 1s linear } smart-circular-progress-bar[inverted] svg:first-of-type .smart-value.smart-value-animation { animation: circle-inverted 2s infinite linear } smart-circular-progress-bar[indeterminate][inverted] svg:first-of-type, smart-circular-progress-bar[value=null][inverted] svg:first-of-type { animation: rotate-circle-inverted 1s infinite linear } smart-circular-progress-bar[indeterminate] svg:first-of-type, smart-circular-progress-bar[value=null] svg:first-of-type { animation: rotate-circle 1s infinite linear } .barber-shop-effect .smart-value { background-image: linear-gradient(45deg, rgba(0, 0, 0, .2) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, .2) 50%, rgba(0, 0, 0, .2) 75%, transparent 75%, transparent); background-size: 5rem 5rem; background-position: 0 -244rem; animation: stripes 10s linear infinite; animation-direction: normal } .barber-shop-effect[inverted] .smart-value, .barber-shop-effect[orientation=vertical] .smart-value { animation-direction: reverse } @keyframes stripes { 0% { background-position: 0 0 } 100% { background-position: 60rem 0 } } @keyframes indeterminate { 0% { left: -100%; transform: scaleX(.4); transform-origin: left } 20% { left: -40%; transform: scaleX(.3); transform-origin: left } 35% { left: 35%; transform: scaleX(.4); transform-origin: left } 50% { left: 75%; transform: scaleX(.6); transform-origin: left } 55% { left: 100%; transform: scaleX(.7); transform-origin: left } 55.99% { left: 100%; transform: scaleX(0); transform-origin: left } 56% { left: -100%; transform: scaleX(0); transform-origin: left } 56.99% { left: -100%; transform: scaleX(.6); transform-origin: left } 75% { left: -5%; transform: scaleX(.6); transform-origin: left } 80% { left: 30%; transform: scaleX(.5); transform-origin: left } 85% { left: 50%; transform: scaleX(.4); transform-origin: left } 90% { left: 75%; transform: scaleX(.3); transform-origin: left } 95% { left: 95%; transform: scaleX(.2); transform-origin: left } 98% { left: 100%; transform: scaleX(.2); transform-origin: left } 99.99% { left: 100%; transform: scaleX(0); transform-origin: left } 100% { left: -100%; transform: scaleX(0); transform-origin: left } } @keyframes indeterminate-vertical { 0% { bottom: -100%; transform: scaleY(.4); transform-origin: bottom } 20% { bottom: -40%; transform: scaleY(.3); transform-origin: bottom } 35% { bottom: 35%; transform: scaleY(.4); transform-origin: bottom } 50% { bottom: 75%; transform: scaleY(.6); transform-origin: bottom } 55% { bottom: 100%; transform: scaleY(.7); transform-origin: bottom } 55.99% { bottom: 100%; transform: scaleY(0); transform-origin: bottom } 56% { bottom: -100%; transform: scaleY(0); transform-origin: bottom } 56.99% { bottom: -100%; transform: scaleY(.6); transform-origin: bottom } 75% { bottom: -5%; transform: scaleY(.6); transform-origin: bottom } 80% { bottom: 30%; transform: scaleY(.5); transform-origin: bottom } 85% { bottom: 50%; transform: scaleY(.4); transform-origin: bottom } 90% { bottom: 75%; transform: scaleY(.3); transform-origin: bottom } 95% { bottom: 95%; transform: scaleY(.2); transform-origin: bottom } 98% { bottom: 100%; transform: scaleY(.2); transform-origin: bottom } 99.99% { bottom: 100%; transform: scaleY(0); transform-origin: bottom } 100% { bottom: -100%; transform: scaleY(0); transform-origin: bottom } } @keyframes circle { 0% { stroke-dashoffset: 314 } 5% { stroke-dashoffset: 164 } 25% { stroke-dashoffset: 104 } } @keyframes circle-inverted { 0% { stroke-dashoffset: -314 } 5% { stroke-dashoffset: -164 } 25% { stroke-dashoffset: -104 } } @keyframes rotate-circle { 50% { transform: rotate(180deg) } 75% { transform: rotate(270deg) } 100% { transform: rotate(360deg) } } @keyframes rotate-circle-inverted { 50% { transform: rotate(-180deg) } 75% { transform: rotate(-270deg) } 100% { transform: rotate(-360deg) } } smart-circular-progress-bar[right-to-left] .smart-label, smart-progress-bar[right-to-left] .smart-label { direction: rtl } smart-progress-bar[right-to-left]:not([orientation=vertical]) .smart-value, smart-progress-bar[right-to-left][orientation=horizontal] .smart-value { transform-origin: right } smart-progress-bar[right-to-left]:not([orientation=vertical])[inverted] .smart-value, smart-progress-bar[right-to-left][orientation=horizontal][inverted] .smart-value { transform-origin: left } smart-progress-bar[right-to-left]:not([orientation=vertical]) .smart-value.smart-value-animation, smart-progress-bar[right-to-left][orientation=horizontal] .smart-value.smart-value-animation { animation: indeterminate-inverted 3s infinite linear } smart-progress-bar[right-to-left][inverted]:not([orientation=vertical]) .smart-value.smart-value-animation, smart-progress-bar[right-to-left][inverted][orientation=horizontal] .smart-value.smart-value-animation { animation: indeterminate 3s infinite linear } smart-circular-progress-bar[right-to-left][inverted] svg:first-of-type .smart-value.smart-value-animation { animation: circle 2s infinite linear } smart-circular-progress-bar[right-to-left] svg:first-of-type .smart-value.smart-value-animation { animation: circle-inverted 2s infinite linear } smart-circular-progress-bar[right-to-left][indeterminate] svg:first-of-type, smart-circular-progress-bar[right-to-left][value=null] svg:first-of-type { animation: rotate-circle-inverted 1s infinite linear } smart-circular-progress-bar[right-to-left][indeterminate][inverted] svg:first-of-type, smart-circular-progress-bar[right-to-left][value=null][inverted] svg:first-of-type { animation: rotate-circle 1s infinite linear } .barber-shop-effect[right-to-left] .smart-value { animation-direction: reverse } .barber-shop-effect[right-to-left][inverted] .smart-value { animation-direction: normal } smart-query-builder { display: block; border: var(--smart-border-width) solid var(--smart-border); width: var(--smart-query-builder-default-width); min-width: var(--smart-query-builder-min-width); height: var(--smart-query-builder-default-height) } smart-query-builder.smart-element { overflow: visible } smart-query-builder[allow-drag] .smart-filter-group-condition:after, smart-query-builder[allow-drag] .smart-filter-group-condition:before { content: var(--smart-icon-ellipsis); font-weight: 400 } smart-query-builder[dragging] .smart-filter-group-condition:after, smart-query-builder[dragging] .smart-filter-group-condition:before { content: none } .smart-query-builder { border-top-right-radius: var(--smart-border-top-right-radius); border-top-left-radius: var(--smart-border-top-left-radius); border-bottom-left-radius: var(--smart-border-bottom-left-radius); border-bottom-right-radius: var(--smart-border-bottom-right-radius) } .smart-query-builder.smart-container, .smart-query-builder>.smart-container { position: relative; overflow: visible } .smart-query-builder.smart-container>.smart-inner-container, .smart-query-builder>.smart-container>.smart-inner-container { overflow: hidden; width: 100%; height: 100%; position: relative } .smart-query-builder smart-menu.smart-conditions-menu:not([animation=none]) { width: auto; height: auto; padding: 2px; transform-origin: top; transform: scaleY(1) } .smart-query-builder smart-menu.smart-conditions-menu.smart-visibility-hidden:not([animation=none]) { transform: scaleY(0) } .smart-query-builder smart-menu[mode=dropDown] { --smart-menu-vertical-default-width: auto; --smart-menu-vertical-default-height: auto } .smart-query-builder smart-scroll-viewer { border: none; width: 100%; height: 100%; position: relative; padding: var(--smart-query-builder-content-padding) } .smart-query-builder .smart-content-container>.smart-filter-group:first-child>.smart-filter-group-operator { display: none } .smart-query-builder .smart-query-builder-label { margin: var(--smart-query-builder-content-padding) 0 calc(2 * var(--smart-query-builder-content-padding)) var(--smart-query-builder-content-padding); font-weight: 700; opacity: .75 } .smart-query-builder .filter-builder-item { min-height: var(--smart-filter-builder-row-height); margin-left: calc(var(--smart-filter-builder-item-margin)/ 2); margin-right: calc(var(--smart-filter-builder-item-margin)/ 2); border: none; border-bottom: var(--smart-border-width) solid var(--smart-border); display: flex; align-items: center; cursor: pointer } .smart-query-builder .filter-builder-item .smart-value-container { padding-left: var(--smart-editor-label-padding) } .smart-query-builder .filter-builder-item[edited] { border: none } .smart-query-builder .filter-builder-item[edited] .smart-value-container { display: none } .smart-query-builder .filter-builder-item[placeholder] { opacity: .75; font-style: italic } .smart-query-builder .filter-builder-item[placeholder] .smart-value-container { padding-right: 2px } .smart-query-builder .smart-conditions-menu { border-top-right-radius: var(--smart-border-top-right-radius); border-top-left-radius: var(--smart-border-top-left-radius); border-bottom-left-radius: var(--smart-border-bottom-left-radius); border-bottom-right-radius: var(--smart-border-bottom-right-radius) } .smart-query-builder .smart-conditions-menu:focus { border: var(--smart-menu-border-width) solid var(--smart-menu-border) } .smart-query-builder .smart-conditions-menu smart-menu-item { border-top-right-radius: var(--smart-border-top-right-radius); border-top-left-radius: var(--smart-border-top-left-radius); border-bottom-left-radius: var(--smart-border-bottom-left-radius); border-bottom-right-radius: var(--smart-border-bottom-right-radius) } .smart-query-builder .smart-conditions-menu smart-menu-item:first-child { margin-bottom: 1px } .smart-query-builder .smart-conditions-menu smart-menu-item.hover { background-color: var(--smart-menu-item-background-focus); border-color: var(--smart-menu-item-border-focus); color: var(--smart-menu-item-color-focus) } .smart-query-builder .smart-editors-container>* { width: var(--smart-query-builder-editor-width); min-width: 100px } .smart-query-builder .smart-editors-container smart-numeric-text-box input.smart-input { text-align: left } .smart-query-builder .smart-editors-container smart-input .arrow { transition: none } .smart-query-builder .smart-editors-container .smart-custom-editor>* { pointer-events: all; width: 100% } .smart-query-builder .smart-editors-container[open] .smart-check-box-editor { margin-left: auto; margin-right: auto; display: flex; align-self: center; justify-self: center; width: 30px; height: 30px } .smart-query-builder .smart-editors-container[open] .smart-check-box-editor.smart-hidden { display: none } .smart-query-builder .smart-editors-container[open] smart-check-box { display: block } .smart-query-builder .smart-filter-group { display: flex; width: 100%; box-sizing: border-box; white-space: nowrap; flex-direction: column; align-items: flex-start } .smart-query-builder .smart-filter-group:last-of-type .smart-filter-add-btn { display: initial } .smart-query-builder .smart-filter-group:not(:first-of-type) { margin-top: var(--smart-filter-builder-group-margin) } .smart-query-builder .smart-filter-group .smart-filter-add-btn, .smart-query-builder .smart-filter-group[max-level] .smart-filter-add-btn, .smart-query-builder .smart-filter-group[node-id="0"] .smart-filter-group-operator { display: none } .smart-query-builder .smart-filter-group-condition { margin-bottom: var(--smart-filter-builder-group-condition-margin); position: relative; display: flex; width: 100%; box-sizing: border-box; white-space: nowrap } .smart-query-builder .smart-filter-group-condition:after, .smart-query-builder .smart-filter-group-condition:before { font-weight: 800; font-family: var(--smart-font-family-icon); position: absolute; right: 100%; width: auto; content: none; transform: rotate(90deg); display: flex; align-items: flex-end; justify-content: center; font-size: 12px; height: 10px; top: 10px; opacity: .25; margin-right: calc(5px + 1px); cursor: move; line-height: 1rem } .smart-query-builder .smart-filter-group-condition:after { transform: rotate(-90deg) } .smart-query-builder .smart-filter-group-condition.dragged { background-image: linear-gradient(45deg, rgba(0, 0, 0, .1) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, .1) 50%, rgba(0, 0, 0, .1) 75%, transparent 75%, transparent); background-size: 3em 3em } .smart-query-builder .smart-filter-group-condition[limit-selection]:after, .smart-query-builder .smart-filter-group-condition[limit-selection]:before { content: none } .smart-query-builder .smart-filter-group-condition[limit-selection] .filter-builder-item:not(.smart-filter-field-name) { pointer-events: none } .smart-query-builder .smart-filter-group-condition-container { display: flex; box-sizing: border-box; white-space: nowrap; flex-direction: column; padding-left: calc(var(--smart-filter-builder-group-condition-margin) * 6); border-left: var(--smart-filter-builder-group-container-border) solid var(--smart-border); margin-left: calc(var(--smart-filter-builder-group-condition-margin) * 3 - var(--smart-filter-builder-group-container-border)/ 2); width: calc(100% - var(--smart-filter-builder-group-condition-margin) * 3 - var(--smart-filter-builder-group-container-border)/ 3) } .smart-query-builder .smart-filter-group-operator { cursor: pointer; min-width: 50px; border-radius: 50px; text-transform: uppercase; background: var(--smart-primary); color: var(--smart-primary-color); border: none; margin-right: 0; -webkit-user-select: none; -ms-user-select: none; -moz-user-select: none; user-select: none } .smart-query-builder .smart-filter-group-operator:not(:empty) { margin-bottom: calc(var(--smart-filter-builder-group-condition-margin) * 2); padding: 4px; display: flex; justify-content: center } .smart-query-builder .smart-filter-nested-operator { cursor: pointer; margin-top: calc(var(--smart-filter-builder-group-condition-margin) * 3); margin-bottom: calc(var(--smart-filter-builder-group-condition-margin) * 3); margin-left: calc(-1 * var(--smart-filter-builder-item-margin)); opacity: .5; font-weight: 600; text-transform: uppercase; align-self: flex-start; -webkit-user-select: none; -ms-user-select: none; -moz-user-select: none; user-select: none } .smart-query-builder .smart-filter-group-operation { min-width: 50px; border-radius: 50px; text-transform: uppercase; background: var(--smart-primary); color: var(--smart-primary-color); border: none; margin-right: 0; -webkit-user-select: none; -ms-user-select: none; -moz-user-select: none; user-select: none } .smart-query-builder .smart-filter-delete-btn { min-width: var(--smart-filter-builder-row-height); min-height: var(--smart-filter-builder-row-height); box-sizing: border-box; display: flex; align-items: center; justify-content: center; opacity: .25; font-size: 16px; cursor: pointer } .smart-query-builder .smart-filter-delete-btn:after { display: flex; justify-content: center; align-items: center; width: 100%; height: 0; cursor: pointer; font-weight: 800; font-family: var(--smart-font-family-icon); content: var(--smart-icon-close); font-size: var(--smart-font-size) } .smart-query-builder .smart-filter-add-btn, .smart-query-builder .smart-filter-add-condition-btn { min-height: var(--smart-filter-builder-row-height); width: var(--smart-filter-builder-row-height); display: flex } .smart-query-builder .smart-filter-delete-btn:hover { opacity: .6 } .smart-query-builder .smart-filter-delete-btn:active { opacity: 1 } .smart-query-builder .smart-filter-add-btn { min-width: var(--smart-filter-builder-row-height); box-sizing: border-box; align-items: center; justify-content: center; font-size: 16px; height: var(--smart-filter-builder-row-height); border-radius: 50%; background: var(--smart-primary); color: var(--smart-primary-color); margin-top: calc(var(--smart-filter-builder-group-condition-margin) * 2); margin-bottom: calc(var(--smart-filter-builder-group-condition-margin) * 2); line-height: 1rem; opacity: 1 } @media only screen and (min-device-width:768px) and (max-device-width:1024px) { .smart-query-builder .smart-filter-add-btn { padding-bottom: 7px } } .smart-query-builder .smart-filter-add-btn:after { content: "+"; display: flex; justify-content: center; align-items: center; width: 100%; cursor: pointer; font-size: 30px; font-weight: 800; font-family: var(--smart-font-family-icon); height: 100% } .smart-query-builder .smart-filter-add-condition-btn { box-sizing: border-box; font-size: 16px; padding-left: calc(var(--smart-filter-builder-group-condition-margin) * 6); border-left: calc(var(--smart-filter-builder-group-container-border)/ 2.5) dashed var(--smart-border); margin-left: calc(calc(var(--smart-filter-builder-group-condition-margin) * 3) - var(--smart-filter-builder-group-container-border)/ 5); opacity: initial; min-width: 50px; justify-content: flex-start; color: var(--smart-background-color); cursor: pointer; align-items: flex-end; -webkit-user-select: none; -ms-user-select: none; -moz-user-select: none; user-select: none } .smart-query-builder .smart-filter-add-condition-btn>div { position: relative; padding-left: calc(var(--smart-filter-builder-item-margin)/ 2) } .smart-query-builder .smart-filter-add-condition-btn>div:before { content: "+"; display: flex; justify-content: center; align-items: center; cursor: pointer; font-weight: 800; font-family: var(--smart-font-family-icon); position: absolute; right: 100%; top: 0; width: auto; height: 100%; font-size: 20px; margin-right: 5px } .smart-query-builder .smart-filter-add-condition-btn[limit-selection] { pointer-events: none; opacity: .75 } .smart-query-builder .smart-filter-value { padding: 0; min-width: 100px; width: var(--smart-query-builder-editor-width); text-overflow: ellipsis } .smart-query-builder .smart-filter-value[edited] { padding: 0; background-color: transparent } .smart-query-builder .smart-filter-value .smart-value-container { width: 100%; height: 100%; display: flex; align-items: center; margin: 0; overflow: hidden; -webkit-user-select: none; -ms-user-select: none; -moz-user-select: none; user-select: none } .smart-query-builder .smart-filter-value .smart-value-container>span { text-overflow: ellipsis; overflow: hidden; min-width: 0 } .smart-query-builder .smart-filter-operation { position: relative; min-width: 100px; width: var(--smart-query-builder-editor-width); text-overflow: ellipsis; overflow: hidden; -webkit-user-select: none; -ms-user-select: none; -moz-user-select: none; user-select: none } .smart-query-builder .smart-filter-operation .smart-value-container { text-overflow: ellipsis; width: calc(100% - var(--smart-editor-addon-width)); overflow: hidden } .smart-query-builder .smart-filter-operation:not([edited]):after { content: var(--smart-icon-arrow-down); display: flex; overflow: hidden; cursor: pointer; font-family: var(--smart-font-family-icon); justify-content: center; align-items: center; font-size: var(--smart-arrow-size); outline: 0; width: var(--smart-editor-addon-width); position: absolute; right: -1px } .smart-query-builder .smart-filter-field-name { position: relative; min-width: 100px; width: var(--smart-query-builder-editor-width); text-overflow: ellipsis; overflow: hidden; -webkit-user-select: none; -ms-user-select: none; -moz-user-select: none; user-select: none } .smart-query-builder .smart-filter-field-name .smart-value-container { text-overflow: ellipsis; overflow: hidden } .smart-query-builder .smart-filter-builder-icon { width: 40px; height: 100%; font-weight: 700; border-right: 1px solid gray; margin-right: 5px; display: flex; justify-content: center; align-items: center } .smart-query-builder .smart-filter-builder-menu-item { height: 100% } .smart-query-builder .smart-hidden { display: none } .smart-query-builder .smart-scrollable-outer-container { width: 100%; height: 100% } .smart-query-builder .smart-scroll-viewer-content-container { vertical-align: top; padding: initial } .smart-query-builder .drop-target.bottom:after, .smart-query-builder .drop-target.top:after { content: ''; position: absolute; box-sizing: border-box; width: 100%; height: var(--smart-filter-builder-group-condition-margin); left: 0; pointer-events: none; transform: none; background-color: var(--smart-primary); opacity: .75 } .smart-query-builder .drop-target.bottom:after { top: calc(100% + 3px) } .smart-query-builder .drop-target.top:after { top: calc(-1 * var(--smart-filter-builder-group-condition-margin)) } .smart-query-builder .mac .smart-filter-add-btn:after, .smart-query-builder .mac .smart-filter-add-condition-btn>div:before { align-items: stretch; line-height: 80% } .smart-query-builder[show-field-name-arrow] .smart-filter-field-name:not([edited]):after { content: var(--smart-icon-arrow-down); display: flex; outline: 0; width: var(--smart-editor-addon-width); position: absolute; top: 1px; right: -1px; height: 100% } .smart-query-builder-drag-feedback { position: absolute; display: flex; align-items: center; box-shadow: var(--smart-elevation-8); border: var(--smart-border-width) solid var(--smart-border); border-radius: var(--smart-border-radius); padding: 5px; white-space: nowrap; font-family: var(--smart-font-family-icon); font-size: 26px; background-color: var(--smart-background); color: var(--smart-background-color); z-index: 10000; opacity: .75 } .smart-query-builder-drag-feedback:after { content: var(--smart-icon-docs); width: 100%; height: 100%; position: relative; top: 0; left: 0 } .smart-input-drop-down-menu .icon:after { display: flex; align-items: center; justify-content: center; font-size: calc(var(--smart-font-size) - 2px); font-weight: 700 } .smart-input-drop-down-menu .icon.equals:after { content: '=' } .smart-input-drop-down-menu .icon.notequals:after { content: '≠' } .smart-input-drop-down-menu .icon.greaterthan:after { content: '>' } .smart-input-drop-down-menu .icon.greaterthanorequal:after { content: '≥' } .smart-input-drop-down-menu .icon.lessthan:after { content: '<' } .smart-input-drop-down-menu .icon.lessthanorequal:after { content: '≤' } .smart-input-drop-down-menu .icon.startswith:after { content: 'a|bc' } .smart-input-drop-down-menu .icon.endswith:after { content: 'ab|c' } .smart-input-drop-down-menu .icon.contains:after { content: 'abc' } .smart-input-drop-down-menu .icon.notcontains:after { content: '!abc' } .smart-input-drop-down-menu .icon.isblank:after { content: '□' } .smart-input-drop-down-menu .icon.isnotblank:after { content: '■' } .smart-query-builder-drag-feedback[right-to-left], smart-query-builder[right-to-left] .smart-filter-group { direction: rtl } smart-query-builder[right-to-left] .smart-filter-group-condition-container { padding-left: initial; padding-right: calc(var(--smart-filter-builder-group-condition-margin) * 6); border-left: initial; border-right: var(--smart-border-width) solid var(--smart-border); margin-left: initial; margin-right: calc(var(--smart-filter-builder-group-condition-margin) * 3 - var(--smart-filter-builder-group-container-border)/ 2) } smart-query-builder[right-to-left] .smart-filter-nested-operator { margin-left: initial; margin-right: calc(-1 * var(--smart-filter-builder-item-margin)) } smart-query-builder[right-to-left] .smart-filter-group-condition:after, smart-query-builder[right-to-left] .smart-filter-group-condition:before { right: initial; left: 100%; margin: 0 0 0 6px } smart-query-builder[right-to-left] .smart-filter-add-condition-btn { padding-left: initial; padding-right: calc(var(--smart-filter-builder-group-condition-margin) * 6); border-left: initial; border-right: calc(var(--smart-border-width)/ 2.5) dashed var(--smart-border); margin-left: initial; margin-right: calc(calc(var(--smart-filter-builder-group-condition-margin) * 3) - var(--smart-border-width)/ 5) } smart-query-builder[right-to-left] .smart-filter-add-condition-btn>div { padding-left: initial; padding-right: calc(var(--smart-filter-builder-item-margin)/ 2) } smart-query-builder[right-to-left] .smart-filter-add-condition-btn>div:before { right: initial; left: 100% } smart-query-builder[right-to-left] .smart-filter-operation:not([edited])::after { left: -1px; right: initial } smart-query-builder[right-to-left] .drop-target.bottom:after, smart-query-builder[right-to-left] .drop-target.top:after { left: initial; right: 0 } .smart-rating .rating-star:after { width: 100%; height: 100%; top: 0; font-size: var(--smart-font-size); content: var(--smart-icon-star); color: var(--smart-primary); font-family: var(--smart-font-family-icon) } .smart-rating .rating-star.active.hover:after, .smart-rating .rating-star.active:after, .smart-rating .rating-star.hover:after { color: var(--smart-secondary) } smart-scroll-bar { display: block; touch-action: none; width: var(--smart-scroll-bar-default-width); height: var(--smart-scroll-bar-default-height) } smart-scroll-bar .smart-thumb { position: absolute; width: 40px; background-clip: content-box; padding: var(--smart-scroll-bar-thumb-padding) 0; height: var(--smart-scroll-bar-thumb-size); cursor: default; box-sizing: border-box; border-width: 1px; border-style: solid; border-color: var(--smart-scroll-bar-thumb-border); background-color: var(--smart-scroll-bar-thumb-background); border-top-left-radius: var(--smart-scroll-bar-thumb-border-top-left-radius); border-top-right-radius: var(--smart-scroll-bar-thumb-border-top-right-radius); border-bottom-left-radius: var(--smart-scroll-bar-thumb-border-bottom-left-radius); border-bottom-right-radius: var(--smart-scroll-bar-thumb-border-bottom-right-radius) } smart-scroll-bar .smart-thumb:hover { border-color: var(--smart-scroll-bar-thumb-border-hover); background-color: var(--smart-scroll-bar-thumb-background-hover) } smart-scroll-bar .smart-thumb:active { border-color: var(--smart-scroll-bar-thumb-border-active); background-color: var(--smart-scroll-bar-thumb-background-active) } smart-scroll-bar .smart-track { position: relative; float: left; height: 100%; background-color: var(--smart-scroll-bar-track-background); width: 100% } smart-scroll-bar .smart-scroll-button { display: none; float: left; width: var(--smart-scroll-button-size); height: 100%; cursor: default; background-color: var(--smart-scroll-bar-button-background); color: var(--smart-scroll-bar-button-color); border: 1px solid var(--smart-scroll-bar-button-border); min-height: 0; padding: 0; border-radius: 0 } smart-scroll-bar .smart-scroll-button:hover { background-color: var(--smart-scroll-bar-button-background-hover); color: var(--smart-scroll-bar-button-color-hover); border-color: var(--smart-scroll-bar-button-border-hover) } smart-scroll-bar .smart-scroll-button:active { background-color: var(--smart-scroll-bar-button-background-active); color: var(--smart-scroll-bar-button-color-active); border-color: var(--smart-scroll-bar-button-border-active) } smart-scroll-bar[show-buttons] .smart-track { width: calc(calc(100% - var(--smart-scroll-button-size) * 2)) } smart-scroll-bar[show-buttons] .smart-scroll-button { display: block } smart-scroll-bar[spinner][show-buttons] .smart-track { display: none } smart-scroll-bar[spinner][show-buttons] .smart-scroll-button { width: 50% } smart-scroll-bar[discrete] { --smart-scroll-button-size: 0px; --smart-scroll-bar-size: 15px; --smart-scroll-bar-thumb-border-top-right-radius: 6px; --smart-scroll-bar-thumb-border-top-left-radius: 6px; --smart-scroll-bar-thumb-border-bottom-left-radius: 6px; --smart-scroll-bar-thumb-border-bottom-right-radius: 6px; --smart-scroll-bar-thumb-size: 100%; --smart-scroll-bar-thumb-padding: 3px; --smart-scroll-bar-default-width: var(--smart-editor-width); --smart-scroll-bar-default-height: var(--smart-scroll-bar-size); --smart-scroll-bar-background: #fafafa; --smart-scroll-bar-track-background: var(--smart-scroll-bar-background); --smart-scroll-bar-border: #F1F1F1; --smart-scroll-bar-thumb-background: #C1C1C1; --smart-scroll-bar-thumb-border: transparent } smart-scroll-bar[orientation=vertical] { height: var(--smart-scroll-bar-default-width); width: var(--smart-scroll-bar-default-height) } smart-scroll-bar[orientation=vertical] .smart-thumb { width: var(--smart-scroll-bar-thumb-size); padding: 0 var(--smart-scroll-bar-thumb-padding); height: 40px; top: 0 } smart-scroll-bar[orientation=vertical] .smart-track { float: none; width: 100%; height: 100% } smart-scroll-bar[orientation=vertical] .smart-scroll-button { float: none; height: var(--smart-scroll-button-size); width: 100% } smart-scroll-bar[orientation=vertical][show-buttons] .smart-track { height: calc(calc(100% - var(--smart-scroll-button-size) * 2)) } smart-scroll-bar[orientation=vertical][spinner] .smart-scroll-button { height: 50%; width: 100%; float: none } smart-scroll-viewer { display: block; width: var(--smart-editor-width); min-width: var(--smart-scroll-viewer-min-width); max-width: var(--smart-scroll-viewer-max-width); height: var(--smart-list-box-default-height); min-height: var(--smart-scroll-viewer-min-height); max-height: var(--smart-scroll-viewer-max-height); padding: 3px } .smart-scroll-viewer.smart-container, smart-scroll-viewer>.smart-container { height: 100%; width: 100%; border: none; position: relative; overflow: hidden } .smart-scroll-viewer>.smart-container, .smart-scroll-viewer>.smart-container>.smart-scroll-viewer-container { max-height: inherit; min-height: inherit; max-width: inherit; min-width: inherit } .smart-scroll-viewer smart-scroll-bar { overflow: visible; position: absolute; bottom: 0; height: calc(var(--smart-scroll-bar-size)); width: 100% } .smart-scroll-viewer smart-scroll-bar:before { position: absolute; content: ''; width: 100%; height: var(--smart-scroll-bar-size); background-color: var(--smart-surface); left: 100% } .smart-scroll-viewer smart-scroll-bar.bottom-corner { width: calc(100% - var(--smart-scroll-bar-size)) } .smart-scroll-viewer smart-scroll-bar[orientation=vertical] { right: 0; top: 0; height: 100%; width: calc(var(--smart-scroll-bar-size)) } .smart-scroll-viewer smart-scroll-bar[orientation=vertical].bottom-corner { height: calc(100% - var(--smart-scroll-bar-size)) } .smart-scroll-viewer .smart-scroll-viewer-container { width: 100%; height: 100%; overflow: hidden; position: relative; background-color: transparent } .smart-scroll-viewer .smart-scroll-viewer-container.hscroll { height: calc(100% - var(--smart-scroll-bar-size)) } .smart-scroll-viewer .smart-scroll-viewer-container.vscroll { width: calc(100% - var(--smart-scroll-bar-size)) } .smart-scroll-viewer .smart-scroll-viewer-content-container { width: auto; height: auto; display: inline-block; padding: 5px; position: relative; background-color: transparent } .smart-scroll-viewer[right-to-left] .smart-scroll-viewer-container { direction: rtl; text-align: initial } .smart-scroll-viewer[right-to-left] .smart-scroll-viewer-container.vscroll, .smart-scroll-viewer[right-to-left] smart-scroll-bar { left: var(--smart-scroll-bar-size); right: 0 } .smart-scroll-viewer[right-to-left] smart-scroll-bar:after { left: -100% } .smart-scroll-viewer[right-to-left] smart-scroll-bar[orientation=vertical] { left: 0; right: initial } .smart-scroll-viewer[right-to-left] smart-scroll-bar[orientation=vertical]:after { content: none } smart-slider { display: block; width: var(--smart-slider-default-width); height: var(--smart-slider-default-height); --smart-border-top-left-radius: 100%; --smart-border-top-right-radius: 100%; --smart-border-bottom-left-radius: 100%; --smart-border-bottom-right-radius: 100% } smart-slider[orientation=vertical] { width: var(--smart-slider-default-height); height: var(--smart-slider-default-width) } smart-slider.smart-element { overflow: visible } .smart-slider .smart-track-container { width: 100%; height: var(--smart-slider-track-size); margin-top: calc((var(--smart-slider-thumb-height) - var(--smart-slider-track-size))/ 2 + 2px); margin-bottom: calc((var(--smart-slider-thumb-height) - var(--smart-slider-track-size))/ 2 + 2px) } .smart-slider .smart-track { user-select: none; -webkit-user-select: none; position: relative; float: left; width: 100%; height: var(--smart-slider-track-size); background-color: var(--smart-disabled); cursor: pointer } .smart-slider .smart-thumb { position: absolute; margin-left: calc(-1 * var(--smart-slider-thumb-width)/ 2); margin-top: calc(var(--smart-slider-track-size)/ 2 - var(--smart-slider-thumb-height)/ 2); border-top-left-radius: var(--smart-slider-thumb-border-top-left-radius); border-top-right-radius: var(--smart-slider-thumb-border-top-right-radius); border-bottom-left-radius: var(--smart-slider-thumb-border-bottom-left-radius); border-bottom-right-radius: var(--smart-slider-thumb-border-bottom-right-radius); border: var(--smart-border-width) solid var(--smart-primary); width: var(--smart-slider-thumb-width); min-width: var(--smart-slider-track-size); height: var(--smart-slider-thumb-height); min-height: var(--smart-slider-track-size); background-color: var(--smart-primary); cursor: pointer; user-select: none; -webkit-user-select: none } .smart-slider .smart-thumb:before { width: 100%; height: 100%; transition: .2s; display: block; border-radius: 50%; content: ""; z-index: -1; opacity: .2; background: var(--smart-primary) } .smart-slider .smart-thumb[hover]:before { transform: scale(3); animation: slider-thumb-effect 1s infinite; animation-delay: .1s } .smart-slider .smart-thumb.accessible { z-index: 1 } .smart-slider .smart-thumb-label, .smart-slider .smart-thumb~.smart-thumb { display: none } .smart-slider .smart-value { position: absolute; width: 0; height: var(--smart-slider-track-size); background-color: var(--smart-ui-state-active) } .smart-slider .smart-tooltip { position: absolute; display: flex; align-items: center; justify-content: center; border: 1px solid var(--smart-primary); width: var(--smart-slider-tooltip-width); height: var(--smart-slider-tooltip-height); padding: 4px 12px; font-family: var(--smart-font-family); font-size: 75%; opacity: .5; border-radius: 0; background-color: var(--smart-primary); color: var(--smart-primary-color); left: calc(-1 * var(--smart-slider-tooltip-width)/ 2 + var(--smart-slider-thumb-width)/ 2 - 1px); top: calc(-1 * var(--smart-slider-tooltip-height) - 22px) } .smart-slider .smart-scale.smart-hidden, .smart-slider .smart-tooltip.smart-hidden { display: none } .smart-slider .smart-tooltip .smart-tooltip-content { background: inherit; color: inherit; border-color: inherit; background-color: inherit } .smart-slider .smart-tick { position: absolute; width: 1px; height: var(--smart-slider-tick-size); background-color: var(--smart-border) } .smart-slider .smart-tick-minor { height: var(--smart-slider-minor-tick-size) } .smart-slider .smart-scale { margin-left: var(--smart-border-width); height: calc(100% - var(--smart-slider-thumb-height) - 4px) } .smart-slider .smart-scale-near .smart-tick { bottom: 0 } .smart-slider .smart-scale-near .smart-label { bottom: calc(var(--smart-slider-tick-size) + 2px) } .smart-slider .smart-scale-far .smart-tick { top: 0 } .smart-slider .smart-scale-far .smart-label { top: calc(var(--smart-slider-tick-size) + 2px) } .smart-slider .smart-spin-button { display: block; float: left; margin-top: calc(var(--smart-slider-track-size)/ 2 - var(--smart-slider-spin-button-height)/ 2); border: var(--smart-border-width) solid var(--smart-border); border-top-left-radius: var(--smart-border-top-left-radius); border-top-right-radius: var(--smart-border-top-right-radius); border-bottom-left-radius: var(--smart-border-bottom-left-radius); border-bottom-right-radius: var(--smart-border-bottom-right-radius); width: var(--smart-slider-spin-button-width); height: var(--smart-slider-spin-button-height); background-color: var(--smart-surface); color: var(--smart-surface-color); cursor: pointer; padding: 0; min-height: 0; top: 0; position: relative } .smart-slider .smart-spin-button.smart-hidden, .smart-slider:not([hint]) .smart-hint { display: none } .smart-slider .smart-spin-button .smart-button { padding: 0; min-height: 0 } .smart-slider .smart-spin-button .smart-arrow { left: 1px; top: 1px } .smart-slider .smart-spin-button[hover] { background-color: var(--smart-ui-state-hover); color: var(--smart-ui-state-color-hover); border-color: var(--smart-ui-state-border-hover) } .smart-slider .smart-spin-button[active] { background-color: var(--smart-ui-state-active); color: var(--smart-ui-state-color-active); border-color: var(--smart-ui-state-border-active) } .smart-slider:focus { border-color: var(--smart-outline) } .smart-slider:focus .smart-thumb:before { transform: scale(3); animation: slider-thumb-effect 1s infinite; animation-delay: .1s } .smart-slider:not([animation=none]) .smart-thumb.enable-animation { transition: margin-left .4s cubic-bezier(.25, .8, .25, 1) } .smart-slider:not([animation=none]) .smart-value.enable-animation { transition: width .4s cubic-bezier(.25, .8, .25, 1) } .smart-slider:not([animation=none])[inverted] .smart-value.enable-animation, .smart-slider:not([animation=none])[range-slider] .smart-value.enable-animation { transition: width .4s cubic-bezier(.25, .8, .25, 1), margin-left .4s cubic-bezier(.25, .8, .25, 1) } .smart-slider:not([animation=none])[orientation=vertical] .smart-thumb.enable-animation { transition: margin-top .4s cubic-bezier(.25, .8, .25, 1) } .smart-slider:not([animation=none])[orientation=vertical] .smart-value.enable-animation { transition: height .4s cubic-bezier(.25, .8, .25, 1), margin-top .4s cubic-bezier(.25, .8, .25, 1) } .smart-slider:not([animation=none])[orientation=vertical][inverted] .smart-value.enable-animation { transition: height .4s cubic-bezier(.25, .8, .25, 1) } .smart-slider:not([animation=none])[orientation=vertical][range-slider] .smart-value.enable-animation { transition: height .4s cubic-bezier(.25, .8, .25, 1), margin-top .4s cubic-bezier(.25, .8, .25, 1) } .smart-slider[disabled] .smart-spin-button, .smart-slider[disabled] .smart-thumb, .smart-slider[disabled] .smart-track, .smart-slider[disabled] .smart-value, .smart-slider[readonly] .smart-spin-button, .smart-slider[readonly] .smart-thumb, .smart-slider[readonly] .smart-track, .smart-slider[readonly] .smart-value { cursor: default } .smart-slider[hint] .smart-hint { position: absolute; left: 0; bottom: calc(100% + 2px); font-size: 12px; width: 100%; display: block; pointer-events: none; user-select: none; -webkit-user-select: none; -ms-user-select: none; -moz-user-select: none } .smart-slider[hint] .smart-hint:empty { display: none } .smart-slider[range-slider] .smart-thumb~.smart-thumb, .smart-slider[show-thumb-label]:focus .smart-thumb-label { display: block } .smart-slider[hint][scale-position=both]:not([orientation=vertical]) .smart-hint { bottom: 150% } .smart-slider[ticks-position=track] .smart-scale-near .smart-label, .smart-slider[ticks-visibility=none] .smart-scale-near .smart-label { bottom: 2px } .smart-slider[hint]:not([animation=none]) .smart-hint { transition: opacity .2s cubic-bezier(.4, 0, .6, 1) } .smart-slider[value="0"] .smart-thumb { background-color: var(--smart-border); border-color: var(--smart-border) } .smart-slider[value="0"] .smart-thumb:before { background: var(--smart-border) } .smart-slider[show-buttons] .smart-track-container { margin-top: calc((var(--smart-slider-spin-button-height) - var(--smart-slider-track-size))/ 2 + 2px); margin-bottom: calc((var(--smart-slider-spin-button-height) - var(--smart-slider-track-size))/ 2 + 2px) } .smart-slider[show-buttons] .smart-track { margin-left: calc(var(--smart-slider-thumb-width)/ 2); margin-right: calc(var(--smart-slider-thumb-width)/ 2); width: calc(100% - 2 * var(--smart-slider-spin-button-width) - var(--smart-slider-thumb-width)) } .smart-slider[show-buttons] .smart-scale { height: calc(100% - var(--smart-slider-spin-button-height) - 4px); margin-left: calc(var(--smart-slider-spin-button-width) + var(--smart-slider-thumb-width)/ 2 + var(--smart-border-width)); margin-right: calc(var(--smart-slider-spin-button-width) + var(--smart-slider-thumb-width)/ 2) } .smart-slider[tooltip-position=far] .smart-tooltip { top: calc(var(--smart-slider-thumb-height) + 1px) } .smart-slider[scale-position=both] .smart-scale { height: calc((100% - var(--smart-slider-thumb-height))/ 2 - 2px) } .smart-slider[scale-position=both][show-buttons] .smart-scale { height: calc((100% - var(--smart-slider-spin-button-height))/ 2 - 2px) } .smart-slider[ticks-visibility=none] .smart-scale-far .smart-label { top: 2px } .smart-slider[ticks-position=track] .smart-tick { height: 100% } .smart-slider[ticks-position=track] .smart-tick-minor { height: 60%; top: 50%; transform: translateY(-50%) } .smart-slider[ticks-position=track] .smart-scale-far .smart-label { top: 2px } .smart-slider[show-thumb-label] .smart-thumb { overflow: hidden; text-overflow: ellipsis; z-index: 9999 } .smart-slider[show-thumb-label] .smart-thumb-label { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 7px; font-family: var(--smart-font-family); user-select: none } .smart-slider[thumb-label-position=far] .smart-thumb { top: 0 } .smart-slider[thumb-label-position=far]:focus .smart-thumb { top: calc(var(--smart-slider-default-height) + var(--smart-slider-thumb-width) * 2) } .smart-slider[orientation=vertical].smart-container, .smart-slider[orientation=vertical]>.smart-container { display: flex; flex-flow: row; justify-content: space-between } .smart-slider[orientation=vertical] .smart-thumb { margin-left: calc(var(--smart-slider-track-size)/ 2 - var(--smart-slider-thumb-width)/ 2); margin-top: calc(-1 * var(--smart-slider-thumb-height)/ 2) } .smart-slider[orientation=vertical] .smart-track-container { float: left; width: var(--smart-slider-track-size); height: 100%; margin-top: 0; margin-right: calc((var(--smart-slider-thumb-width) - var(--smart-slider-track-size))/ 2 + 2px); margin-bottom: 0; margin-left: calc((var(--smart-slider-thumb-width) - var(--smart-slider-track-size))/ 2 + 2px); z-index: 1 } .smart-slider[orientation=vertical] .smart-track { float: none; width: var(--smart-slider-track-size); height: 100% } .smart-slider[orientation=vertical] .smart-value { width: var(--smart-slider-track-size); height: 0 } .smart-slider[orientation=vertical] .smart-scale { float: left; margin-top: var(--smart-border-width); width: calc(100% - var(--smart-slider-thumb-width) - 2px); height: 100% } .smart-slider[orientation=vertical] .smart-tooltip { left: calc(-1 * var(--smart-slider-tooltip-width) - 8px); top: calc(-1 * var(--smart-slider-tooltip-height)/ 2 + var(--smart-slider-thumb-height)/ 2 - 1px) } .smart-slider[orientation=vertical] .smart-tick { width: var(--smart-slider-tick-size); height: 1px } .smart-slider[orientation=vertical] .smart-tick-minor { width: var(--smart-slider-minor-tick-size) } .smart-slider[orientation=vertical] .smart-scale-near .smart-tick { right: 0 } .smart-slider[orientation=vertical] .smart-scale-near .smart-label { right: calc(var(--smart-slider-tick-size) + 2px); bottom: initial } .smart-slider[orientation=vertical][ticks-position=track] .smart-scale-near .smart-label, .smart-slider[orientation=vertical][ticks-visibility=none] .smart-scale-near .smart-label { right: 2px } .smart-slider[orientation=vertical] .smart-scale-far .smart-label { left: calc(var(--smart-slider-tick-size) + 2px) } .smart-slider[orientation=vertical] .smart-spin-button { float: none; margin-left: calc(var(--smart-slider-track-size)/ 2 - var(--smart-slider-spin-button-width)/ 2); margin-top: 0 } .smart-slider[orientation=vertical][inverted] .smart-thumb { margin-top: 0 } .smart-slider[orientation=vertical][scale-position=both] .smart-scale { width: calc((100% - var(--smart-slider-thumb-width))/ 2 - 2px) } .smart-slider[orientation=vertical][scale-position=both][show-buttons] .smart-scale { width: calc((100% - var(--smart-slider-spin-button-width))/ 2) } .smart-slider[orientation=vertical][show-buttons] .smart-track-container { margin-right: calc((var(--smart-slider-spin-button-width) - var(--smart-slider-track-size))/ 2 + 2px); margin-left: calc((var(--smart-slider-spin-button-width) - var(--smart-slider-track-size))/ 2 + 2px) } .smart-slider[orientation=vertical][show-buttons] .smart-track { margin-left: 0; margin-right: 0; margin-top: calc(var(--smart-slider-thumb-height)/ 2); margin-bottom: calc(var(--smart-slider-thumb-height)/ 2); width: 100%; height: calc(100% - 2 * var(--smart-slider-spin-button-height) - var(--smart-slider-thumb-height)) } .smart-slider[orientation=vertical][show-buttons] .smart-scale { margin-top: calc(var(--smart-slider-spin-button-height) + var(--smart-slider-thumb-height)/ 2 + var(--smart-border-width)); margin-right: 0; margin-left: 0; height: calc(100% - var(--smart-slider-spin-button-height) * 2 - var(--smart-slider-thumb-height)) } .smart-slider[orientation=vertical][tooltip-position=far] .smart-tooltip { left: calc(var(--smart-slider-thumb-width) + 1px) } .smart-slider[orientation=vertical][ticks-position=track] .smart-tick { width: 100%; height: 1px } .smart-slider[orientation=vertical][ticks-position=track] .smart-tick-minor { width: 60%; left: 50%; transform: translateX(-50%) } .smart-slider[orientation=vertical][ticks-position=track] .smart-scale-far .smart-label, .smart-slider[orientation=vertical][ticks-visibility=none] .smart-scale-far .smart-label { left: 2px } .smart-slider[orientation=vertical][thumb-label-position=far] .smart-thumb { left: 100%; top: calc(100% + var(--smart-slider-thumb-height)/ 2) } @keyframes slider-thumb-effect { 0%, 100% { transform: scale(3) } 50% { transform: scale(2.75) } } .smart-slider[right-to-left] .smart-hint, .smart-slider[right-to-left] .smart-label, smart-slider[right-to-left] .smart-tooltip-content { direction: rtl } .smart-slider[right-to-left]:not([animation=none]) .smart-value.enable-animation { transition: width .4s cubic-bezier(.25, .8, .25, 1), margin-left .4s cubic-bezier(.25, .8, .25, 1) } .smart-sortable { display: block } .smart-sortable .smart-sortable-items-parent { display: flex; flex-direction: column } .smart-sortable .smart-sortable-item { transform: translate(0, 0); position: relative } .smart-sortable .smart-sortable-item.dragged { position: absolute; box-shadow: var(--smart-elevation-4); z-index: 9999999 } .smart-sortable .smart-sortable-item.placeholder:after, .smart-sortable .smart-sortable-item.placeholder:before { content: none } .smart-sortable:not([disabled]) .smart-sortable-item { touch-action: none } .smart-sortable[disabled] { pointer-events: none; opacity: .7 } .smart-sortable:not([items]).smart-container, .smart-sortable:not([items])>.smart-container { display: flex; flex-direction: column } .smart-sortable:not([items])[mode=horizontal]>.smart-container { flex-direction: row } .smart-sortable[dragged]>.smart-container { user-select: none } .smart-sortable[mode=horizontal] .smart-sortable-items-parent { flex-direction: row } .smart-sortable[handle-position=left] .smart-sortable-item:after, .smart-sortable[handle-position=left] .smart-sortable-item:before { left: calc(-1 * var(--smart-sortable-handle-size)) !important } .smart-sortable:not([animation=none]) .smart-sortable-item { transition: transform .15s ease-in } .smart-sortable:not([animation=none]) .smart-sortable-item.returning { transition: left .15s ease-in, top .15s ease-in } .smart-sortable:not([drag-mode=handle]):not([disabled]) .smart-sortable-item { cursor: grab } .smart-sortable[drag-mode=handle] .smart-sortable-item:after, .smart-sortable[drag-mode=handle] .smart-sortable-item:before { content: var(--smart-icon-ellipsis); position: absolute; left: 100%; top: calc(50% - var(--smart-sortable-handle-size)/ 2); width: var(--smart-sortable-handle-size); height: var(--smart-sortable-handle-size); display: flex; align-items: flex-end; justify-content: center; font-family: var(--smart-font-family-icon); font-size: var(--smart-font-size); line-height: calc(var(--smart-sortable-handle-size) - var(--smart-font-size)/ 2); cursor: grab; visibility: hidden; opacity: 0; transition: visibility .2s ease-in, opacity .2s ease-in; color: var(--smart-background-color) } .smart-sortable[drag-mode=handle] .smart-sortable-item.dragged:after, .smart-sortable[drag-mode=handle] .smart-sortable-item.dragged:before, .smart-sortable[drag-mode=handle][handle-visibility=visible]:not([disabled]) .smart-sortable-item:after, .smart-sortable[drag-mode=handle][handle-visibility=visible]:not([disabled]) .smart-sortable-item:before { visibility: visible; opacity: .5 } .smart-sortable[drag-mode=handle] .smart-sortable-item:before { transform: rotate(-90deg) } .smart-sortable[drag-mode=handle] .smart-sortable-item:after { transform: rotate(90deg) } .smart-sortable[drag-mode=handle]:not([disabled]) .smart-sortable-item:hover:after, .smart-sortable[drag-mode=handle]:not([disabled]) .smart-sortable-item:hover:before { z-index: 9999999; visibility: visible; opacity: .5 } .smart-sortable[drag-mode=handle][handle-position=bottom] .smart-sortable-item:after, .smart-sortable[drag-mode=handle][handle-position=bottom] .smart-sortable-item:before, .smart-sortable[drag-mode=handle][handle-position=top] .smart-sortable-item:after, .smart-sortable[drag-mode=handle][handle-position=top] .smart-sortable-item:before { left: calc(50% - var(--smart-sortable-handle-size)/ 2); top: 100%; align-items: center; transform: none } .smart-sortable[drag-mode=handle][handle-position=bottom] .smart-sortable-item:after { align-items: flex-start } .smart-sortable[drag-mode=handle][handle-position=top] .smart-sortable-item:before { top: calc(-1 * var(--smart-sortable-handle-size)) } .smart-sortable[drag-mode=handle][handle-position=top] .smart-sortable-item:after { top: calc(-1 * var(--smart-sortable-handle-size)); align-items: flex-end } .smart-sortable[right-to-left] .smart-column-panel-label, .smart-sortable[right-to-left] .smart-sortable-items-parent { direction: rtl } smart-splitter { width: var(--smart-splitter-default-width); height: var(--smart-splitter-default-height); position: relative } smart-splitter[dragged] { cursor: w-resize } smart-splitter[orientation=horizontal][dragged] { cursor: s-resize } smart-splitter-item>.smart-container { overflow: hidden; position: relative; padding: var(--smart-splitter-item-padding) } .smart-splitter smart-splitter-bar { min-width: 5px; width: var(--smart-splitter-bar-size); position: relative; user-select: none; overflow: hidden; touch-action: none } .smart-splitter smart-splitter-bar>.smart-container { display: flex; align-items: center; justify-content: center; flex-direction: column-reverse } .smart-splitter smart-splitter-bar.smart-element { background: var(--smart-surface); border-color: var(--smart-surface-color); color: var(--smart-surface-color); border-radius: initial } .smart-splitter smart-splitter-bar[focus] .smart-splitter-resize-button>span, .smart-splitter smart-splitter-bar[focus] .smart-splitter-resize-button>span::after, .smart-splitter smart-splitter-bar[focus] .smart-splitter-resize-button>span::before { background-color: var(--smart-ui-state-color-active); border-color: var(--smart-ui-state-color-active); color: var(--smart-ui-state-color-active) } .smart-splitter smart-splitter-bar[focus].smart-element { outline: 0; background: var(--smart-ui-state-active); color: var(--smart-ui-state-color-active) } .smart-splitter smart-splitter-bar[locked] .smart-splitter-resize-button>span { visibility: hidden } .smart-splitter smart-splitter-bar[locked] .smart-splitter-resize-button>span:after, .smart-splitter smart-splitter-bar[locked] .smart-splitter-resize-button>span:before { content: none } .smart-splitter smart-splitter-bar[locked][hover] { background-color: var(--smart-ui-state-hover); color: var(--smart-ui-state-color-hover) } .smart-splitter smart-splitter-bar[locked][focus] { background-color: var(--smart-ui-state-active); color: var(--smart-ui-state-color-active) } .smart-splitter smart-splitter-bar[show-far-button] .smart-splitter-far-collapse-button, .smart-splitter smart-splitter-bar[show-near-button] .smart-splitter-near-collapse-button { visibility: visible; width: 100% } .smart-splitter smart-splitter-bar[item-collapsed] { cursor: initial } .smart-splitter smart-splitter-bar[item-collapsed]>.smart-container { flex-direction: initial } .smart-splitter smart-splitter-bar[item-collapsed] .smart-splitter-resize-button { display: none } .smart-splitter smart-splitter-bar[item-collapsed] .smart-splitter-resize-button>span:after, .smart-splitter smart-splitter-bar[item-collapsed] .smart-splitter-resize-button>span:before { content: initial } .smart-splitter smart-splitter-bar[item-collapsed] .smart-splitter-far-collapse-button>span, .smart-splitter smart-splitter-bar[item-collapsed] .smart-splitter-near-collapse-button>span { transform: rotate(270deg) } .smart-splitter smart-splitter-bar[item-collapsed] .smart-splitter-far-collapse-button.smart-visibility-hidden, .smart-splitter smart-splitter-bar[item-collapsed] .smart-splitter-near-collapse-button.smart-visibility-hidden { width: initial } .smart-splitter smart-splitter-bar[item-collapsed] .smart-splitter-near-collapse-button>span { transform: translate(-50%, -50%) rotate(270deg) } .smart-splitter smart-splitter-bar[item-collapsed] .smart-splitter-far-collapse-button>span { transform: translate(-50%, -50%) rotate(90deg) } .smart-splitter smart-splitter-item { overflow: hidden } .smart-splitter smart-splitter-item>.smart-container>.smart-content { width: 100%; height: 100%; overflow: auto; padding: var(--smart-splitter-item-content-padding) } .smart-splitter smart-splitter-item.smart-element { background-color: inherit; color: inherit; border-radius: initial } .smart-splitter smart-splitter-item[collapsed] { overflow: hidden; padding: initial } .smart-splitter .smart-splitter { margin: 0; width: 100%; height: 100%; border: none } .smart-splitter .smart-splitter smart-splitter-bar { background-color: var(--smart-primary); color: var(--smart-primary-color) } .smart-splitter>.smart-container { display: flex; position: relative; overflow: inherit } .smart-splitter>.smart-container>smart-splitter-item { height: 100%; flex-shrink: 0; width: var(--smart-splitter-item-size) } .smart-splitter>.smart-container>smart-splitter-bar { flex-shrink: 0; height: var(--smart-splitter-bar-fit-size) } .smart-splitter>.smart-container>smart-splitter-bar[locked] { cursor: default } .smart-splitter>.smart-container>.smart-splitter-bar-feedback { height: 100%; flex-shrink: 0 } .smart-splitter .smart-splitter-bar-feedback { min-width: 5px; width: var(--smart-splitter-bar-size); user-select: none; overflow: hidden; touch-action: none; position: absolute; background-color: var(--smart-ui-state-hover); color: var(--smart-ui-state-color-hover); opacity: .5 } .smart-splitter .smart-splitter-bar-feedback.limit-reached { background-color: var(--smart-error) } .smart-splitter .smart-splitter-resize-button { width: 100%; position: relative; font-family: var(--smart-font-family-icon); height: 40px; display: flex; justify-content: center; align-items: center; cursor: inherit } .smart-splitter .smart-splitter-resize-button>span { width: 6px; height: 6px; border: 1px solid var(--smart-surface-color); background-color: var(--smart-surface-color); color: var(--smart-surface-color); border-radius: 50%; cursor: inherit } .smart-splitter .smart-splitter-resize-button>span:after, .smart-splitter .smart-splitter-resize-button>span:before { position: absolute; transform: translate(-50%, -50%); content: ''; width: 4px; height: 4px; border-radius: 50%; border: 1px solid var(--smart-surface-color); background-color: var(--smart-surface-color); color: var(--smart-surface-color); pointer-events: none; font-family: var(--smart-font-family-icon) } .smart-splitter .smart-splitter-resize-button>span:before { left: 50%; top: calc(50% - var(--smart-splitter-bar-size)) } .smart-splitter .smart-splitter-resize-button>span:after { top: calc(50% + var(--smart-splitter-bar-size)); left: 50% } .smart-splitter .smart-splitter-far-collapse-button, .smart-splitter .smart-splitter-near-collapse-button { height: 20px; position: relative; font-family: var(--smart-font-family-icon); cursor: pointer; visibility: hidden; width: 0 } .smart-splitter .smart-splitter-far-collapse-button .smart-arrow, .smart-splitter .smart-splitter-near-collapse-button .smart-arrow { position: absolute; top: 50%; left: 50%; width: auto; height: auto } .smart-splitter .smart-splitter-far-collapse-button .smart-arrow:after, .smart-splitter .smart-splitter-near-collapse-button .smart-arrow:after { content: var(--smart-icon-arrow-down); position: absolute; display: flex; align-items: center; justify-content: center; pointer-events: none; width: 100%; height: 100%; top: 0; line-height: normal } .smart-splitter .smart-splitter-far-collapse-button>span { transform: translate(-50%, -50%) rotate(270deg) } .smart-splitter .smart-splitter-near-collapse-button .smart-arrow { transform: translate(-55%, -50%) rotate(90deg) } .smart-splitter:not([readonly])>.smart-container>smart-splitter-bar[hover] { cursor: w-resize } .smart-splitter:not([dragged])>.smart-container>smart-splitter-bar:not([focus]) .smart-splitter-far-collapse-button, .smart-splitter:not([dragged])>.smart-container>smart-splitter-bar:not([focus]) .smart-splitter-near-collapse-button { color: inherit } .smart-splitter:not([dragged])>.smart-container>smart-splitter-bar[hover]:not([item-collapsed]):not([focus]) .smart-splitter-far-collapse-button, .smart-splitter:not([dragged])>.smart-container>smart-splitter-bar[hover]:not([item-collapsed]):not([focus]) .smart-splitter-near-collapse-button { color: var(--smart-ui-state-color-hover) } .smart-splitter:not([dragged]) smart-splitter-bar.smart-element, .smart-splitter:not([dragged]) smart-splitter-bar[hover] { background-color: var(--smart-ui-state-hover); border-color: var(--smart-ui-state-border-hover); color: var(--smart-ui-state-color-hover) } .smart-splitter:not([dragged]) smart-splitter-bar[hover]:not([item-collapsed]):not([focus]) .smart-splitter-resize-button span, .smart-splitter:not([dragged]) smart-splitter-bar[hover]:not([item-collapsed]):not([focus]) .smart-splitter-resize-button span:after, .smart-splitter:not([dragged]) smart-splitter-bar[hover]:not([item-collapsed]):not([focus]) .smart-splitter-resize-button span:before { background-color: var(--smart-ui-state-color-hover); border-color: var(--smart-ui-state-color-hover); color: var(--smart-ui-state-color-hover) } .smart-splitter:not([dragged]) smart-splitter-bar[focus] { background-color: var(--smart-ui-state-active); border-color: var(--smart-ui-state-border-active); color: var(--smart-ui-state-color-active) } .smart-splitter:not([dragged]) smart-splitter-bar[focus]:not([item-collapsed]) .smart-splitter-resize-button span, .smart-splitter:not([dragged]) smart-splitter-bar[focus]:not([item-collapsed]) .smart-splitter-resize-button span:after, .smart-splitter:not([dragged]) smart-splitter-bar[focus]:not([item-collapsed]) .smart-splitter-resize-button span:before { background-color: var(--smart-ui-state-color-active); border-color: var(--smart-ui-state-color-active); color: var(--smart-ui-state-color-active) } .smart-splitter:not([dragged]) smart-splitter-bar:not([item-collapsed]):not([focus]) .smart-splitter-far-collapse-button[hover], .smart-splitter:not([dragged]) smart-splitter-bar:not([item-collapsed]):not([focus]) .smart-splitter-near-collapse-button[hover] { color: var(--smart-ui-state-color-hover) } .smart-splitter[dragged] { cursor: w-resize; pointer-events: none; user-select: none; touch-action: none } .smart-splitter[dragged]:not([animation=none])>.smart-container>smart-splitter-item { transition: none } .smart-splitter[auto-fit-mode=overflow]>.smart-container { overflow: auto } .smart-splitter[orientation=horizontal]>.smart-container { flex-direction: column } .smart-splitter[orientation=horizontal]>.smart-container>smart-splitter-item { width: 100%; height: var(--smart-splitter-item-size) } .smart-splitter[orientation=horizontal]>.smart-container>smart-splitter-bar { width: var(--smart-splitter-bar-fit-size); min-height: 5px; height: var(--smart-splitter-bar-size) } .smart-splitter[orientation=horizontal]>.smart-container>smart-splitter-bar>.smart-container { flex-direction: row } .smart-splitter[orientation=horizontal]>.smart-container>smart-splitter-bar .smart-splitter-far-collapse-button, .smart-splitter[orientation=horizontal]>.smart-container>smart-splitter-bar .smart-splitter-near-collapse-button { width: 0; height: 100% } .smart-splitter[orientation=horizontal]>.smart-container>smart-splitter-bar .smart-splitter-resize-button, .smart-splitter[orientation=horizontal]>.smart-container>smart-splitter-bar[show-far-button] .smart-splitter-far-collapse-button, .smart-splitter[orientation=horizontal]>.smart-container>smart-splitter-bar[show-near-button] .smart-splitter-near-collapse-button { width: 20px; height: 100% } .smart-splitter[orientation=horizontal]>.smart-container>smart-splitter-bar .smart-splitter-far-collapse-button>span { transform: translate(-50%, -45%) rotate(0) } .smart-splitter[orientation=horizontal]>.smart-container>smart-splitter-bar .smart-splitter-near-collapse-button>span, .smart-splitter[orientation=horizontal]>.smart-container>smart-splitter-bar[item-collapsed] .smart-splitter-far-collapse-button>span { transform: translate(-50%, -50%) rotate(180deg) } .smart-splitter[orientation=horizontal]>.smart-container>smart-splitter-bar .smart-splitter-resize-button>span:before { left: calc(50% - var(--smart-splitter-bar-size)); top: 50% } .smart-splitter[orientation=horizontal]>.smart-container>smart-splitter-bar .smart-splitter-resize-button>span:after { top: 50%; left: calc(50% + var(--smart-splitter-bar-size)) } .smart-splitter[orientation=horizontal]>.smart-container>smart-splitter-bar[item-collapsed] .smart-splitter-near-collapse-button>span { transform: translate(-50%, -50%) rotate(0) } .smart-splitter[orientation=horizontal]>.smart-container>.smart-splitter-bar-feedback { width: 100%; min-height: 5px; height: var(--smart-splitter-bar-size) } .smart-splitter[orientation=horizontal] smart-splitter-item[collapsed] { min-width: 0; min-height: 0 } .smart-splitter[orientation=horizontal]:not([resize-mode=none]):not([readonly])>.smart-container>smart-splitter-bar[hover]:not([locked]), .smart-splitter[orientation=horizontal][dragged] { cursor: s-resize } .smart-splitter[resize-mode=none]>.smart-container>smart-splitter-bar { cursor: default } .smart-splitter[disabled]>.smart-container>smart-splitter-bar { cursor: default; outline: 0; border: none; box-shadow: none } .smart-splitter[dragging-not-allowed]>.smart-container>.smart-splitter-bar-feedback, .smart-splitter[dragging-not-allowed]>.smart-container>smart-splitter-bar, .smart-splitter[orientation][disabled]>.smart-container>smart-splitter-bar { cursor: default } .smart-splitter:not([animation=none]) .smart-splitter-far-collapse-button .smart-arrow, .smart-splitter:not([animation=none]) .smart-splitter-near-collapse-button .smart-arrow { transition: transform .2s ease-out } .smart-splitter:not([animation=none])>.smart-container>smart-splitter-item.animate { transition: all .25s cubic-bezier(.4, 0, .2, 1) } .smart-splitter[orientation-change]:not([animation=none])>.smart-container>smart-splitter-item { transition: none } .smart-splitter[show-locked-items]>.smart-container>smart-splitter-item[locked]>.smart-container:after { position: absolute; content: var(--smart-icon-lock); font-family: var(--smart-font-family-icon); opacity: .25; font-size: calc(2.5 * var(--smart-splitter-font-size)); top: 50%; left: 50%; transform: translate(-50%, -50%) } .smart-splitter[right-to-left] .smart-splitter>.smart-container { direction: initial } .smart-splitter[right-to-left] smart-splitter-item>.smart-container>.smart-content { direction: rtl } smart-switch-button { width: var(--smart-switch-button-default-width); height: var(--smart-switch-button-default-height) } smart-switch-button[orientation=vertical] { height: var(--smart-switch-button-default-width); width: var(--smart-switch-button-default-height) } smart-switch-button.smart-element { display: inline-block; border: none; background: 0 0; overflow: visible } .smart-switch-button .smart-thumb { border: var(--smart-border-width) solid var(--smart-border); border-radius: 100%; width: var(--smart-switch-button-thumb-size); height: var(--smart-switch-button-thumb-size); background-color: var(--smart-surface); box-shadow: var(--smart-elevation-2); align-self: center; position: relative; cursor: pointer; order: 2; pointer-events: all } .smart-switch-button .smart-thumb:before { background-color: var(--smart-primary); position: absolute; width: 200%; height: 200%; left: 50%; top: 50%; transition: .2s; display: block; border-radius: 100%; content: ""; transform: scale(0) translate(-50%, -50%); transform-origin: left top; opacity: .2 } .smart-switch-button .smart-thumb:active:before { animation: button-wave-effect .1s ease-in; transform: scale(1) translate(-50%, -50%) } .smart-switch-button .smart-container { font-size: inherit; position: relative; user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; touch-action: none } .smart-switch-button .smart-container:before { content: ""; position: absolute; width: 90%; height: 50%; left: 5%; top: 25%; border-radius: 10px; background-color: var(--smart-surface) } .smart-switch-button .smart-inner-container { width: calc(200% - var(--smart-switch-button-thumb-size)); height: 100%; position: absolute; color: inherit; display: flex; flex-direction: row; justify-content: flex-start; pointer-events: none; left: 0 } .smart-switch-button .smart-false-content, .smart-switch-button .smart-true-content { font-size: inherit; font-weight: inherit; display: inline-block; text-align: center; box-sizing: border-box; color: inherit } .smart-switch-button .smart-false-content-container, .smart-switch-button .smart-true-content-container { height: 100%; display: flex; justify-content: center; align-items: center; background-clip: content-box; padding: 2px 0; color: inherit; overflow: hidden; width: calc((100% - var(--smart-switch-button-thumb-size))/ 2) } .smart-switch-button .smart-true-content-container { order: 1 } .smart-switch-button .smart-false-content-container, .smart-switch-button[inverted] .smart-true-content-container { order: 3 } .smart-switch-button:not([animation=none]) .smart-container:before { transition: opacity .2s ease-in-out, background .2s ease-in-out } .smart-switch-button:not([animation=none]):not([dragged]):not([checked=null]) .smart-inner-container { transition: left .2s ease-in-out } .smart-switch-button:not([animation=none])[orientation=vertical]:not([dragged]):not([checked=null]) .smart-inner-container { transition: top .2s ease-in-out } .smart-switch-button[hover] { border-color: var(--smart-ui-state-hover) } .smart-switch-button:focus .smart-thumb, .smart-switch-button[checked] .smart-thumb { border-color: var(--smart-primary); background-color: var(--smart-primary) } .smart-switch-button:focus .smart-thumb:before { transform: scale(1) translate(-50%, -50%); background-color: var(--smart-primary); animation: button-wave-effect .1s ease-in } .smart-switch-button[readonly] { pointer-events: none } .smart-switch-button[disabled] .smart-thumb:before { content: none } .smart-switch-button[checked] .smart-thumb:active:before { transform: scale(1) translate(-50%, -50%); background-color: var(--smart-primary) } .smart-switch-button[checked] .smart-container:before { background-color: var(--smart-primary); opacity: .4 } .smart-switch-button[checked] .smart-inner-container { left: calc(-1 * (100% - var(--smart-switch-button-thumb-size))) } .smart-switch-button[checked]:focus .smart-thumb:before { transform: scale(1) translate(-50%, -50%); background-color: var(--smart-primary) } .smart-switch-button[checked][inverted] .smart-inner-container { left: 0 } .smart-switch-button[checked=null] .smart-inner-container, .smart-switch-button[checked=null][inverted] .smart-inner-container { left: calc(-1 * 100% / 2 + var(--smart-switch-button-thumb-size)/ 2) } .smart-switch-button[checked]:not([animation=none]) .smart-thumb:active:before, .smart-switch-button[checked]:not([animation=none]):focus .smart-thumb:before { animation: button-wave-effect .1s ease-in } .smart-switch-button[checked][orientation=vertical] .smart-thumb { background-color: var(--smart-primary) } .smart-switch-button[checked][orientation=vertical] .smart-thumb:active:before { transform: scale(1) translate(-50%, -50%); background-color: var(--smart-primary) } .smart-switch-button[checked][orientation=vertical] .smart-container:before { background-color: var(--smart-primary); opacity: .4 } .smart-switch-button[checked][orientation=vertical]:focus .smart-thumb:before { transform: scale(1) translate(-50%, -50%); background-color: var(--smart-primary) } .smart-switch-button[checked][orientation=vertical]:not([animation=none]) .smart-thumb:active:before, .smart-switch-button[checked][orientation=vertical]:not([animation=none]):focus .smart-thumb:before { animation: button-wave-effect .1s ease-in } .smart-switch-button[checked=null] .smart-thumb { background-color: var(--smart-surface); border-color: var(--smart-border) } .smart-switch-button[checked=null] .smart-false-content, .smart-switch-button[checked=null] .smart-true-content { visibility: hidden } .smart-switch-button[checked=null] .smart-false-content-container, .smart-switch-button[checked=null] .smart-true-content-container { color: transparent } .smart-switch-button[inverted] .smart-inner-container { left: calc(-1 * (100% - var(--smart-switch-button-thumb-size))) } .smart-switch-button[inverted] .smart-false-content-container { order: 1 } .smart-switch-button[orientation=vertical] .smart-thumb { width: var(--smart-switch-button-thumb-size); height: var(--smart-switch-button-thumb-size); box-shadow: var(--smart-elevation-2) } .smart-switch-button[orientation=vertical] .smart-thumb:before { border: var(--smart-border-width) solid var(--smart-border) } .smart-switch-button[orientation=vertical] .smart-thumb:active:before { animation: button-wave-effect .1s ease-in; transform: scale(1) translate(-50%, -50%) } .smart-switch-button[orientation=vertical] .smart-thumb:focus .smart-thumb:before { transform: scale(1) translate(-50%, -50%) } .smart-switch-button[orientation=vertical] .smart-container:before { content: ""; position: absolute; width: 50%; height: 90%; left: 25%; top: 5%; border-radius: 10px } .smart-switch-button[orientation=vertical] .smart-inner-container { height: calc(200% - var(--smart-switch-button-thumb-size)); width: 100%; flex-direction: column; left: 0; top: 0 } .smart-switch-button[orientation=vertical] .smart-false-content-container, .smart-switch-button[orientation=vertical] .smart-true-content-container { width: 100%; padding: 0 2px; height: calc((100% - var(--smart-switch-button-thumb-size))/ 2) } .smart-switch-button[orientation=vertical]:focus .smart-thumb:before { animation: button-wave-effect .1s ease-in } .smart-switch-button[orientation=vertical][checked] .smart-inner-container { left: 0; top: calc(-1 * (100% - var(--smart-switch-button-thumb-size))) } .smart-switch-button[orientation=vertical][checked][inverted] .smart-inner-container { top: 0 } .smart-switch-button[orientation=vertical][checked=null] .smart-inner-container { top: calc(-1 * 100% / 2 + var(--smart-switch-button-thumb-size)/ 2) } .smart-switch-button[orientation=vertical][checked=null][inverted] .smart-inner-container { left: 0; top: calc(-1 * 100% / 2 + var(--smart-switch-button-thumb-size)/ 2) } .smart-switch-button[orientation=vertical][inverted] .smart-inner-container { left: 0; top: calc(-1 * (100% - var(--smart-switch-button-thumb-size))) } @keyframes button-wave-effect { 0% { transform: scale(.2) translate(-50%, -50%) } 50% { transform: scale(.5) translate(-50%, -50%) } 100% { transform: scale(1) translate(-50%, -50%) } } .smart-switch-button[right-to-left][checked]:not([orientation=vertical]) .smart-inner-container, .smart-switch-button[right-to-left][inverted]:not([orientation=vertical]) .smart-inner-container { left: 0 } .smart-switch-button[right-to-left]:not([orientation=vertical]) .smart-inner-container, .smart-switch-button[right-to-left][checked][inverted]:not([orientation=vertical]) .smart-inner-container { left: calc(-1 * (100% - var(--smart-switch-button-thumb-size))) } .smart-switch-button[right-to-left][checked=null]:not([orientation=vertical]) .smart-inner-container { left: calc(-1 * 100% / 2 + var(--smart-switch-button-thumb-size)/ 2) } .smart-table thead th, .smart-table[virtualization] tr.last-row td { border-bottom: var(--smart-border-width) solid var(--smart-border) } smart-table table:not(.smart-table-container) { display: none } smart-table tr.expanded .hierarchy-arrow { transform: rotate(180deg) } .smart-table { display: block; border-radius: var(--smart-border-top-left-radius) var(--smart-border-top-right-radius) var(--smart-border-bottom-right-radius) var(--smart-border-bottom-left-radius); width: var(--smart-table-default-width); height: var(--smart-table-default-height); font-family: var(--smart-font-family); font-size: var(--smart-font-size) } .smart-table>.smart-container { border: var(--smart-border-width) solid var(--smart-border); position: relative; overflow: auto; border-radius: inherit; max-height: inherit } .smart-table .smart-table { background-color: #fff } .smart-table table { table-layout: fixed; border-collapse: collapse; border-radius: inherit } .smart-table thead th { background-color: var(--smart-background); color: var(--smart-background-color); font-size: calc(var(--smart-font-size) - 2px); text-align: left; font-weight: 500 } .smart-table thead th .sort-by:before, .smart-table thead th[filter]::before { font-style: normal; font-size: var(--smart-arrow-size); color: inherit; text-decoration: inherit; font-variant: normal; font-family: var(--smart-font-family-icon); text-transform: none } .smart-table thead th[filter]::before { content: var(--smart-icon-filter); font-weight: 400; display: flex; flex-wrap: wrap; margin-top: 2px; align-items: center; justify-content: center; position: absolute; right: 10px } .smart-table thead th .sort-by { display: none; position: relative; visibility: hidden; width: 16px; height: 16px; user-select: none; opacity: 0 } .smart-table thead th .sort-by:before { content: var(--smart-icon-up); width: 100%; height: 100%; font-weight: 400; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; position: relative } .smart-table thead th .sort-by:after { display: flex; align-items: center; justify-content: center; position: absolute; top: 0; left: 100%; border-radius: 50%; width: 50%; height: 50%; padding: 3px; background-color: var(--smart-primary); color: var(--smart-primary-color); font-size: 8px } .smart-table td, .smart-table th { padding-top: var(--smart-table-cell-padding); padding-right: var(--smart-table-cell-padding); padding-bottom: var(--smart-table-cell-padding); padding-left: var(--smart-table-cell-padding); vertical-align: middle; overflow: hidden; text-overflow: ellipsis } .smart-table thead th .sort-by.asc, .smart-table thead th .sort-by.desc { display: inline-block; visibility: visible; opacity: 1 } .smart-table thead th .sort-by.desc:before { transform: rotateX(180deg) } .smart-table thead th:not(.smart-table-select-all) { opacity: .9 } .smart-table thead th.freeze-far, .smart-table thead th.freeze-near { opacity: 1 } .smart-table thead tr { height: var(--smart-table-column-header-height) } .smart-table thead tr:first-child th { border-top: none } .smart-table tbody tr { height: var(--smart-table-row-height) } .smart-table tbody tr.last-visible { height: unset } .smart-table tbody tr.last-visible.sized { box-shadow: inset 0 var(--smart-border-width) 0 0 var(--smart-border) } .smart-table tbody+tbody { border-top: 2px solid var(--smart-border) } .smart-table tfoot tr { height: var(--smart-table-row-height) } .smart-table tfoot td { --smart-surface: var(--smart-background); --smart-surface-color: var(--smart-background-color); font-size: calc(var(--smart-font-size) - 2px); background-color: var(--smart-surface); color: var(--smart-surface-color) } .smart-table tr[row-id] td { white-space: nowrap } .smart-table th { border-top-width: var(--smart-border-width); border-top-style: solid; border-top-color: var(--smart-border); white-space: nowrap } .smart-table th:hover .column-menu, .smart-table th[column-menu-button] .column-menu { overflow: hidden; text-overflow: ellipsis; position: absolute; right: 3px; width: 25px; height: 100% } .smart-table th:hover .column-menu:after, .smart-table th[column-menu-button] .column-menu:after { content: var(--smart-icon-arrow-down); font-family: var(--smart-font-family-icon); width: 100%; cursor: pointer; color: var(--smart-surface-color); font-size: 16px; font-weight: 700 } .smart-table th>.wrapper { display: flex; align-items: center; overflow: hidden; position: relative } .smart-table th>.wrapper>.label { overflow: hidden; text-overflow: ellipsis } .smart-table th.smart-table-select-all { width: calc(var(--smart-check-box-default-size) * 3) } .smart-table td.indeterminate>div:after, .smart-table th.smart-table-select-all.indeterminate>div:after { content: ''; position: absolute; width: calc(.5 * var(--smart-check-box-default-size)); height: calc(.5 * var(--smart-check-box-default-size)) } .smart-table th.smart-table-select-all.indeterminate>div { background-color: var(--smart-primary) } .smart-table th.smart-table-select-all.indeterminate>div:after { background-color: var(--smart-primary-color) } .smart-table th.column-header { text-align: center; border-bottom: none } .smart-table th.column-header:empty { border-top: none } .smart-table td { border-top-width: var(--smart-border-width); border-top-style: solid; border-top-color: var(--smart-border) } .smart-table td div { font-size: var(--smart-font-size); padding: 0; margin: 0; line-height: initial } .smart-table td span { line-height: initial } .smart-table td.no-edit { background-color: rgba(0, 0, 0, .02) } .smart-table td.indeterminate>div { background-color: var(--smart-primary) } .smart-table td.indeterminate>div:after { background-color: var(--smart-primary-color) } .smart-table td.editing { padding: 0 } .smart-table td.editing .smart-table-editor { width: 100%; height: 100% } .smart-table td.editing .smart-table-editor.standard { border: var(--smart-border-width) solid var(--smart-border); padding: var(--smart-table-cell-padding); font-family: inherit; font-size: inherit; box-shadow: none } .smart-table td.editing .smart-table-editor.standard:focus { border: var(--smart-border-width) solid var(--smart-border); outline: 0 } .smart-table td.group-header>div, .smart-table td.tree-cell>div { display: flex; flex-direction: row; align-items: center } .smart-table td.tree-cell>div div:nth-child(2) { width: calc(100% - var(--smart-table-arrow-margin) - var(--smart-table-arrow-size)); overflow: hidden; text-overflow: ellipsis; line-height: 1.2 } .smart-table td.editing.invalid { position: relative; overflow: visible } .smart-table td.editing.invalid:before { content: attr(validation-message); visibility: hidden; position: absolute; top: -100%; border-top-left-radius: var(--smart-border-top-left-radius); border-top-right-radius: var(--smart-border-top-right-radius); border-bottom-left-radius: var(--smart-border-bottom-left-radius); border-bottom-right-radius: var(--smart-border-bottom-right-radius); padding: 7px; background-color: var(--smart-error); color: var(--smart-secondary-color); font-size: calc(var(--smart-font-size) - 4px); opacity: 0; transform: scale(0) } .smart-table smart-pager .smart-pager-far-buttons-container, .smart-table smart-pager .smart-pager-near-buttons-container { font-size: calc(var(--smart-font-size) * 2) } .smart-table td.editing.invalid:hover:before { visibility: visible; opacity: .7; transform: scale(1) } .smart-table td.editing.invalid .smart-table-editor { border-color: var(--smart-error) } .smart-table td.smart-table-select-row:hover, .smart-table th.smart-table-select-all:hover { z-index: 99; overflow: visible } .smart-table td.smart-table-select-row>div, .smart-table th.smart-table-select-all>div { display: flex; align-items: center; justify-content: center; position: absolute; left: 50%; transform: translate(-50%, -50%); border: var(--smart-border-width) solid var(--smart-border); width: var(--smart-check-box-default-size); height: var(--smart-check-box-default-size); padding: 8px; color: var(--smart-primary-color); font-family: var(--smart-font-family-icon); cursor: pointer; border-radius: var(--smart-border-radius) } .smart-table .smart-table-toolbar-button:before, .smart-table smart-pager .smart-pager-button:before { padding: 7px; color: var(--smart-secondary-color); font-size: calc(var(--smart-font-size) - 4px); opacity: 0 } .smart-table td.smart-table-select-row>div:before, .smart-table th.smart-table-select-all>div:before { content: ''; position: absolute; border-radius: 50%; width: 100%; height: 100%; background-color: var(--smart-secondary); opacity: .1; transform: scale(0); transform-origin: center } .smart-table td.smart-table-select-row>div:hover:before, .smart-table th.smart-table-select-all>div:hover:before { transform: scale(2.5) } .smart-table td.smart-table-select-row>div:hover:active:before, .smart-table th.smart-table-select-all>div:hover:active:before { background-color: var(--smart-primary); animation-name: active; animation-duration: .2s; animation-timing-function: ease-out; animation-iteration-count: 1 } .smart-table td.smart-table-select-row.selected>div, .smart-table th.smart-table-select-all.selected>div { border-color: var(--smart-primary); background-color: var(--smart-primary) } .smart-table td.smart-table-select-row.selected>div:after, .smart-table th.smart-table-select-all.selected>div:after { content: var(--smart-icon-check) } .smart-table td.smart-table-select-row.selected>div:before, .smart-table th.smart-table-select-all.selected>div:before { background-color: var(--smart-primary) } .smart-table .smart-table-select-all.freeze-near { background-color: var(--smart-background); color: var(--smart-background-color) } .smart-table smart-pager.smart-element { display: none; min-width: 0; height: var(--smart-table-header-footer-height); background-color: var(--smart-background); border-left: none; border-right: none; border-bottom: none; position: sticky; left: 0; bottom: 0 } .smart-table smart-pager>.smart-container { justify-content: flex-end } .smart-table smart-pager .smart-pager-near-buttons-container.near { order: 2 } .smart-table smart-pager .smart-pager-near-buttons-container.far { order: 3 } .smart-table smart-pager .smart-pager-size-selector-and-label-container, .smart-table[right-to-left] smart-pager .smart-pager-far-buttons-container { order: 0 } .smart-table smart-pager .smart-pager-label { font-size: calc(var(--smart-font-size) - 2px); opacity: .7 } .smart-table smart-pager .smart-pager-summary-container.smart-pager-label { order: 1; margin: 0 32px 0 24px } .smart-table smart-pager .smart-pager-button:before { content: attr(tooltip); visibility: hidden; position: absolute; top: -125%; border-top-left-radius: var(--smart-border-top-left-radius); border-top-right-radius: var(--smart-border-top-right-radius); border-bottom-left-radius: var(--smart-border-bottom-left-radius); border-bottom-right-radius: var(--smart-border-bottom-right-radius); background-color: var(--smart-secondary); transform: scale(0) } .smart-table smart-pager .smart-pager-button:hover:before { visibility: visible; opacity: .7; transform: scale(1) } .smart-table .smart-pager .smart-pager-button { overflow: visible } .smart-table .smart-table-container:focus { outline: 0 } .smart-table .smart-table-container:focus td[focus]:after { content: ''; box-sizing: border-box; position: absolute; width: calc(100% - 1px); height: 100%; top: 0; left: 1px; pointer-events: none; border: 1px solid var(--smart-ui-state-color-focus) } .smart-table .smart-table-container:focus td[focus]:not(.freeze-near):not(.freeze-far) { position: relative } .smart-table .smart-table-header { height: var(--smart-table-header-footer-height); display: none; position: sticky; left: 0; top: 0; background-color: var(--smart-background); z-index: 2 } .smart-table .smart-table-header .smart-input, .smart-table .smart-table-header .smart-table-filter-template-container { display: none; width: 100%; height: 100% } .smart-table .smart-table-header .smart-table-toolbar-button.conditional-formatting { display: none; border: var(--smart-border-width) solid var(--smart-border); border-top: none; border-right: none; width: var(--smart-table-header-footer-height); height: 100% } .smart-table .smart-table-header .smart-table-toolbar-button.conditional-formatting:before { left: unset; right: 0 } .smart-table .smart-table-toolbar-button { --smart-border-top-left-radius: 0; --smart-border-top-right-radius: 0; --smart-border-bottom-left-radius: 0; --smart-border-bottom-right-radius: 0; --smart-button-padding: 0; position: relative; border-top: none; border-bottom: none; overflow: visible; min-height: 0 } .smart-table .smart-table-toolbar-button:before { content: attr(tooltip); visibility: hidden; position: absolute; border-top-left-radius: var(--smart-border-top-left-radius); border-top-right-radius: var(--smart-border-top-right-radius); border-bottom-left-radius: var(--smart-border-bottom-left-radius); border-bottom-right-radius: var(--smart-border-bottom-right-radius); background-color: var(--smart-secondary); transform: scale(0); box-sizing: border-box; top: 125%; left: calc(-1 * var(--smart-table-row-height)/ 2); width: calc(2 * var(--smart-table-row-height)); white-space: normal; word-wrap: break-word; text-transform: none; z-index: 1000 } .smart-table .smart-table-toolbar-button:after { content: var(--smart-icon-table); display: flex; align-items: center; justify-content: center; position: absolute; width: 100%; height: 100%; font-size: 20px; font-family: smart-icons; pointer-events: none; opacity: .4 } .smart-table .smart-table-toolbar-button:hover:before { visibility: visible; opacity: .7; transform: scale(1) } .smart-table[hide-selection-column] td.smart-table-select-row, .smart-table[hide-selection-column] td.smart-table-select-row .selection-checkbox, .smart-table[hide-selection-column] th.smart-table-select-all>div, .smart-table[virtualization] tr[unused] { visibility: hidden } .smart-table .smart-table-toolbar-button>button { overflow: hidden } .smart-table .smart-table-toolbar-button.conditional-formatting>button:after { display: flex; align-items: center; justify-content: center; position: absolute; width: 100%; height: 100%; font-family: smart-icons; pointer-events: none; content: var(--smart-icon-less-than-equal); font-size: 16px; top: 8px; left: 8px; opacity: 1 } .smart-table .smart-table-toolbar-button.fields { border-right: none } .smart-table .smart-table-toolbar-button.fields:before { left: unset; right: 0; width: calc(2 * var(--smart-table-row-height)) } .smart-table .smart-table-toolbar-button.fields>button:after { display: flex; align-items: center; justify-content: center; position: absolute; width: 100%; height: 100%; font-family: smart-icons; pointer-events: none; font-size: 16px; top: 8px; left: 8px; opacity: 1; content: var(--smart-icon-settings) } .smart-table .smart-table-filter-row smart-button { --smart-button-padding: 0 } .smart-table .smart-table-filter-row smart-button button:after { content: var(--smart-icon-filter); font-family: var(--smart-font-family-icon); width: 100%; height: 100%; text-decoration: line-through } .smart-table .smart-table-filter-row>td>div { --smart-filter-row-content-height: calc(var(--smart-table-row-height) - 2 * var(--smart-table-cell-padding) - var(--smart-border-width)); display: grid; grid-template-columns: 1fr var(--smart-filter-row-content-height) var(--smart-filter-row-content-height); grid-template-rows: 100%; column-gap: 2px; height: var(--smart-filter-row-content-height) } .smart-table .smart-table-filter-row>td.no-filter { opacity: .6; pointer-events: none } .smart-table .smart-table-filter-row .filter-value { min-width: 0; border: var(--smart-border-width) solid var(--smart-border); border-top-right-radius: var(--smart-border-top-right-radius); border-top-left-radius: var(--smart-border-top-left-radius); border-bottom-left-radius: var(--smart-border-bottom-left-radius); border-bottom-right-radius: var(--smart-border-bottom-right-radius); padding: var(--smart-editor-label-padding); background-color: var(--smart-background); color: var(--smart-background-color); font-family: inherit; font-size: inherit } .smart-table .smart-table-filter-row .filter-value:hover { border-color: var(--smart-ui-state-border-hover) } .smart-table .smart-table-filter-row .filter-value:focus { outline: 0; border-color: var(--smart-outline) } .smart-table .smart-table-filter-row .filter-value[type=number] { -webkit-appearance: none; -moz-appearance: textfield } .smart-table .smart-table-filter-row .filter-value::-webkit-inner-spin-button, .smart-table .smart-table-filter-row .filter-value::-webkit-outer-spin-button { -webkit-appearance: none; -moz-appearance: textfield } .smart-table .smart-table-filter-row .smart-input { --smart-editor-addon-width: 100%; --smart-editor-label-padding: 0; width: unset; height: 100% } .smart-table .smart-table-filter-row .smart-input .smart-drop-down-button { border-top-left-radius: var(--smart-border-top-left-radius); border-bottom-left-radius: var(--smart-border-bottom-left-radius) } .smart-table .smart-table-filter-row .smart-input .smart-drop-down-button .arrow:after { content: var(--smart-icon-filter); transform: none !important } .smart-table .smart-table-row-detail { height: var(--smart-table-row-detail-height) } .smart-table .smart-table-row-detail>td { border: none; padding: 0 } .smart-table .smart-table-row-detail .smart-table-detail-container { height: calc(var(--smart-table-row-detail-height) - 2 * var(--smart-table-cell-padding)); padding: 0 var(--smart-table-cell-padding); overflow: hidden } .smart-table .smart-table-row-detail.collapsed { height: 0 } .smart-table .smart-table-row-detail.collapsed .smart-table-detail-container { height: 0; padding-top: 0; padding-bottom: 0 } .smart-table .smart-table-cell-template { overflow: hidden; text-overflow: ellipsis; display: contents } .smart-table .disable-select td.smart-table-select-row>div { pointer-events: none; opacity: .2 } .smart-table .dragged, .smart-table .drop-column { position: relative } .smart-table .drop-column:after { content: ''; position: absolute; width: 2px; height: 100%; background-color: var(--smart-primary); top: 0 } .smart-table .freeze-far, .smart-table .freeze-near { position: sticky; opacity: 1; background-color: var(--smart-background); color: var(--smart-background-color); z-index: 1 } .smart-table .drop-column.left:after { left: 0 } .smart-table .drop-column.right:after { right: 0 } .smart-table .freeze-near { left: 0; box-shadow: 1px 0 0 0 var(--smart-border) } .smart-table .freeze-far { right: 0; box-shadow: -1px 0 0 0 var(--smart-border) } .smart-table .smart-table-virtualization-container { width: 100%; height: 100%; border: none; padding: 0 } .smart-table[conditional-formatting-button] .smart-table-container, .smart-table[conditional-formatting-button] .smart-table-virtualization-container, .smart-table[filtering]:not([filter-row]):not([column-menu]) .smart-table-container, .smart-table[filtering]:not([filter-row]):not([column-menu]) .smart-table-virtualization-container, .smart-table[paging] .smart-table-container, .smart-table[paging] .smart-table-virtualization-container { height: calc(100% - var(--smart-table-header-footer-height)) } .smart-table .smart-table-virtualization-container .smart-scroll-viewer-content-container { padding: 0 } .smart-table .hierarchy-arrow { margin-right: var(--smart-table-arrow-margin); width: var(--smart-table-arrow-size); cursor: pointer } .smart-table .group-label-name { display: var(--smart-table-group-name-display) } .smart-table .group-label-value { font-weight: 700 } .smart-table .group-label-count { display: var(--smart-table-group-count-display) } .smart-table .outline-level-1 { padding-left: var(--smart-table-indent) } .smart-table .outline-level-1.tree-leaf { padding-left: calc(var(--smart-table-indent) + var(--smart-table-arrow-size) + var(--smart-table-arrow-margin)) } .smart-table .outline-level-2 { padding-left: calc(2 * var(--smart-table-indent)) } .smart-table .outline-level-2.tree-leaf { padding-left: calc(2 * var(--smart-table-indent) + var(--smart-table-arrow-size) + var(--smart-table-arrow-margin)) } .smart-table .outline-level-3 { padding-left: calc(3 * var(--smart-table-indent)) } .smart-table .outline-level-3.tree-leaf { padding-left: calc(3 * var(--smart-table-indent) + var(--smart-table-arrow-size) + var(--smart-table-arrow-margin)) } .smart-table .outline-level-4 { padding-left: calc(4 * var(--smart-table-indent)) } .smart-table .outline-level-4.tree-leaf { padding-left: calc(4 * var(--smart-table-indent) + var(--smart-table-arrow-size) + var(--smart-table-arrow-margin)) } .smart-table .outline-level-5 { padding-left: calc(5 * var(--smart-table-indent)) } .smart-table .outline-level-5.tree-leaf { padding-left: calc(5 * var(--smart-table-indent) + var(--smart-table-arrow-size) + var(--smart-table-arrow-margin)) } .smart-table .outline-level-6 { padding-left: calc(6 * var(--smart-table-indent)) } .smart-table .outline-level-6.tree-leaf { padding-left: calc(6 * var(--smart-table-indent) + var(--smart-table-arrow-size) + var(--smart-table-arrow-margin)) } .smart-table .outline-level-7 { padding-left: calc(7 * var(--smart-table-indent)) } .smart-table .outline-level-7.tree-leaf { padding-left: calc(7 * var(--smart-table-indent) + var(--smart-table-arrow-size) + var(--smart-table-arrow-margin)) } .smart-table .outline-level-8 { padding-left: calc(8 * var(--smart-table-indent)) } .smart-table .outline-level-8.tree-leaf { padding-left: calc(8 * var(--smart-table-indent) + var(--smart-table-arrow-size) + var(--smart-table-arrow-margin)) } .smart-table .outline-level-9 { padding-left: calc(9 * var(--smart-table-indent)) } .smart-table .outline-level-9.tree-leaf { padding-left: calc(9 * var(--smart-table-indent) + var(--smart-table-arrow-size) + var(--smart-table-arrow-margin)) } .smart-table .outline-level-10 { padding-left: calc(10 * var(--smart-table-indent)) } .smart-table .outline-level-10.tree-leaf { padding-left: calc(10 * var(--smart-table-indent) + var(--smart-table-arrow-size) + var(--smart-table-arrow-margin)) } .smart-table.thead-dark table th { color: #fff; background-color: #212529; border-color: #32383e } .smart-table.thead-dark thead th .sort-by::before { color: #fff } .smart-table.thead-primary table th { color: var(--smart-primary-color); background-color: var(--smart-primary); border-color: var(--smart-primary) } .smart-table.thead-primary th.smart-table-select-all.selected>div, .smart-table.thead-primary th.smart-table-select-all>div { border-color: var(--smart-primary-color) } .smart-table.thead-primary th.smart-table-select-all.indeterminate>div { background-color: var(--smart-primary-color) } .smart-table.thead-secondary table th { color: var(--smart-secondary-color); background-color: var(--smart-secondary); border-color: var(--smart-secondary) } .smart-table.thead-surface table th { color: var(--smart-surface-color); background-color: var(--smart-surface); border-color: var(--smart-surface) } .smart-table.thead-light table th { color: #495057; background-color: #e9ecef; border-color: #dee2e6 } .smart-table.table-dark table { color: #fff; background-color: #212529 } .smart-table.table-dark thead th .sort-by::before { color: #fff } .smart-table.table-dark.table-bordered table { border: 0 } .smart-table.table-dark.table-striped table tbody tr:nth-of-type(odd) { background-color: rgba(255, 255, 255, .05) } .smart-table.table-dark.table-hover table tbody tr:hover { background-color: rgba(255, 255, 255, .075) } .smart-table.table-bordered table { border: var(--smart-border-width) solid var(--smart-border) } .smart-table.table-bordered table thead td, .smart-table.table-bordered table thead th { border-bottom-width: 2px } .smart-table.table-bordered table td, .smart-table.table-bordered table th { border: var(--smart-border-width) solid var(--smart-border) } .smart-table.table-striped table tbody tr:nth-of-type(odd) { background-color: rgba(0, 0, 0, .05) } .smart-table.table-hover table tbody tr:hover { background-color: rgba(0, 0, 0, .075) } .smart-table.table-hover table .smart-table-primary:hover, .smart-table.table-hover table .smart-table-primary:hover>td, .smart-table.table-hover table .smart-table-primary:hover>th { background-color: #9fcdff } .smart-table.table-hover table .smart-table-secondary:hover, .smart-table.table-hover table .smart-table-secondary:hover>td, .smart-table.table-hover table .smart-table-secondary:hover>th { background-color: #c8cbcf } .smart-table.table-hover table .smart-table-success:hover, .smart-table.table-hover table .smart-table-success:hover>td, .smart-table.table-hover table .smart-table-success:hover>th { background-color: #b1dfbb } .smart-table.table-hover table .smart-table-info:hover, .smart-table.table-hover table .smart-table-info:hover>td, .smart-table.table-hover table .smart-table-info:hover>th { background-color: #abdde5 } .smart-table.table-hover table .smart-table-warning:hover, .smart-table.table-hover table .smart-table-warning:hover>td, .smart-table.table-hover table .smart-table-warning:hover>th { background-color: #ffe8a1 } .smart-table.table-hover table .smart-table-danger:hover, .smart-table.table-hover table .smart-table-danger:hover>td, .smart-table.table-hover table .smart-table-danger:hover>th { background-color: #f1b0b7 } .smart-table.table-hover table .smart-table.table-light table:hover, .smart-table.table-hover table .smart-table.table-light table:hover>td, .smart-table.table-hover table .smart-table.table-light table:hover>th { background-color: #ececf6 } .smart-table.table-hover table .smart-table.table-dark table:hover, .smart-table.table-hover table .smart-table.table-dark table:hover>td, .smart-table.table-hover table .smart-table.table-dark table:hover>th { background-color: #b9bbbe } .smart-table.table-hover table .smart-table-active:hover, .smart-table.table-hover table .smart-table-active:hover>td, .smart-table.table-hover table .smart-table-active:hover>th { background-color: rgba(0, 0, 0, .075) } .smart-table.no-border>.smart-container { border: none } .smart-table.table-elevation { border: none; border-radius: unset; box-shadow: var(--smart-elevation-8) } .smart-table:not([animation=none]) thead th .sort-by { transition: visibility .5s ease-out, opacity .5s ease-out } .smart-table:not([animation=none]) thead th .sort-by:before { transition: transform .5s ease-out } .smart-table:not([animation=none]) tr[row-id] td:not(.editing) { transition: padding-top .2s ease-in-out, padding-bottom .2s ease-in-out, transform .2s ease-in-out, border-top-color .2s ease-in-out } .smart-table:not([animation=none]) td.editing.invalid:before { transition: visibility .2s ease-in-out, opacity .2s ease-out, transform .1s ease-out } .smart-table:not([animation=none]) .smart-table-toolbar-button:before, .smart-table:not([animation=none]) smart-pager .smart-pager-button:before { transition: visibility .2s ease-out, opacity .2s ease-out, transform .1s ease-out } .smart-table:not([animation=none]) .hierarchy-arrow { transition: transform .2s ease-in-out } .smart-table:not([animation=none]):not([ignore-detail-animation]) .smart-table-row-detail { transition: height .2s ease-in-out } .smart-table:not([animation=none]):not([ignore-detail-animation]) .smart-table-row-detail .smart-table-detail-container { transition: height .2s ease-in-out, padding-top .2s ease-in-out, padding-bottom .2s ease-in-out } .smart-table[virtualization] { --smart-table-default-height: var(--smart-grid-default-height) } .smart-table[filtering] .smart-table-header { display: grid; grid-template-columns: 1fr } .smart-table[filtering] .smart-table-header .smart-input, .smart-table[filtering] .smart-table-header .smart-table-filter-template-container { display: block } .smart-table[filtering][filter-row][conditional-formatting-button] .smart-table-header .smart-input, .smart-table[filtering][filter-row][conditional-formatting-button] .smart-table-header .smart-table-filter-template-container { display: none } .smart-table[filtering][conditional-formatting-button] .smart-table-header { grid-template-columns: 1fr auto } .smart-table[conditional-formatting-button] .smart-table-header { display: grid } .smart-table[conditional-formatting-button] .smart-table-header .smart-table-toolbar-button.conditional-formatting { display: flex } .smart-table[conditional-formatting-button]:not([filtering]) .smart-table-header { grid-template-columns: 1fr auto; grid-template-areas: ". button" } .smart-table[conditional-formatting-button]:not([filtering]) .smart-table-header .smart-table-toolbar-button.conditional-formatting { grid-area: button } .smart-table[conditional-formatting-button][filtering][filter-row] .smart-table-header { grid-template-columns: 1fr auto; grid-template-areas: ". button" } .smart-table[conditional-formatting-button][filtering][filter-row] .smart-table-header .smart-table-toolbar-button.conditional-formatting { grid-area: button } .smart-table[paging] smart-pager { display: block; z-index: 1 } .smart-table[paging][conditional-formatting-button] .smart-table-container, .smart-table[paging][conditional-formatting-button] .smart-table-virtualization-container, .smart-table[paging][filtering]:not([filter-row]) .smart-table-container, .smart-table[paging][filtering]:not([filter-row]) .smart-table-virtualization-container { height: calc(100% - 2 * var(--smart-table-header-footer-height)) } .smart-table[column-reorder] thead th { touch-action: none } .smart-table[column-reorder] th[data-field] { cursor: move } .smart-table:not([column-resize]) .dragged:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(45deg, rgba(0, 0, 0, .1) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, .1) 50%, rgba(0, 0, 0, .1) 75%, transparent 75%, transparent); background-size: 3em 3em; opacity: .8 } .smart-table[column-resize] thead th { touch-action: none } .smart-table[column-resize] th[data-field]:after, .smart-table[column-resize] th[data-field]:before { content: ''; position: absolute; top: 0; width: 5px; height: 100%; cursor: col-resize } .smart-table[column-resize]:not([right-to-left]) th[locked]+th[data-field]:before, .smart-table[column-resize]:not([right-to-left]) th[locked]:after, .smart-table[column-resize]:not([selection]) th[data-field]:first-child:before, .smart-table[column-resize][resize-max-reached] th[data-field]:after, .smart-table[column-resize][resize-max-reached] th[data-field]:before, .smart-table[column-resize][selection] th[data-field]:nth-child(2):before { content: none } .smart-table[column-resize] th[data-field]:before { left: 0 } .smart-table[column-resize] th[data-field]:after { right: 0; width: 4px } .smart-table[column-resize]:not([freeze-header]) th[data-field]:not(.freeze-near):not(.freeze-far) { position: relative } @media (hover:none) { .smart-table[column-resize]:not(.resizing) th[data-field]:before { border-left: 1px solid rgba(var(--smart-primary-rgb), .3) } .smart-table[column-resize]:not(.resizing) th[data-field]:after { border-right: 1px solid rgba(var(--smart-primary-rgb), .3) } } @media (hover:hover) { .smart-table[column-resize]:not(.resizing) th[data-field]:hover:before { border-left: 1px solid rgba(var(--smart-primary-rgb), .3) } .smart-table[column-resize]:not(.resizing) th[data-field]:hover:after { border-right: 1px solid rgba(var(--smart-primary-rgb), .3) } } .smart-table[sort-mode=many] thead th .sort-by:after { content: attr(order) } .smart-table[loading] tbody td { opacity: 0 } .smart-table[loading] smart-pager { pointer-events: none } .smart-table[freeze-header]:not([virtualization]) thead th { position: sticky; opacity: 1; border-bottom: none; top: 0; box-shadow: 0 1px 0 0 var(--smart-border); z-index: 100 } .smart-table[freeze-header]:not([virtualization]) thead th.freeze-near { box-shadow: 1px 1px 0 0 var(--smart-border); z-index: 200 } .smart-table[freeze-header]:not([virtualization]) thead th.freeze-far { box-shadow: -1px 1px 0 0 var(--smart-border); z-index: 200 } .smart-table[freeze-header]:not([virtualization]) thead tr:nth-child(2)>th { top: var(--smart-table-column-header-height) } .smart-table[freeze-header]:not([virtualization]) thead tr:nth-child(3)>th { top: calc(2 * var(--smart-table-column-header-height)) } .smart-table[freeze-header]:not([virtualization]) thead tr:nth-child(4)>th { top: calc(3 * var(--smart-table-column-header-height)) } .smart-table[freeze-header]:not([virtualization]) thead tr:nth-child(5)>th { top: calc(4 * var(--smart-table-column-header-height)) } .smart-table[freeze-header]:not([virtualization])[conditional-formatting-button] thead th, .smart-table[freeze-header]:not([virtualization])[filtering]:not([filter-row]):not([column-menu]) thead th { top: var(--smart-table-header-footer-height) } .smart-table[freeze-header]:not([virtualization])[conditional-formatting-button] thead tr:nth-child(2)>th, .smart-table[freeze-header]:not([virtualization])[filtering]:not([filter-row]):not([column-menu]) thead tr:nth-child(2)>th { top: calc(var(--smart-table-header-footer-height) + var(--smart-table-column-header-height)) } .smart-table[freeze-header]:not([virtualization])[conditional-formatting-button] thead tr:nth-child(3)>th, .smart-table[freeze-header]:not([virtualization])[filtering]:not([filter-row]):not([column-menu]) thead tr:nth-child(3)>th { top: calc(var(--smart-table-header-footer-height) + 2 * var(--smart-table-column-header-height)) } .smart-table[freeze-header]:not([virtualization])[conditional-formatting-button] thead tr:nth-child(4)>th, .smart-table[freeze-header]:not([virtualization])[filtering]:not([filter-row]):not([column-menu]) thead tr:nth-child(4)>th { top: calc(var(--smart-table-header-footer-height) + 3 * var(--smart-table-column-header-height)) } .smart-table[freeze-header]:not([virtualization])[conditional-formatting-button] thead tr:nth-child(5)>th, .smart-table[freeze-header]:not([virtualization])[filtering]:not([filter-row]):not([column-menu]) thead tr:nth-child(5)>th { top: calc(var(--smart-table-header-footer-height) + 4 * var(--smart-table-column-header-height)) } .smart-table[freeze-header][virtualization] thead { box-shadow: 0 1px 0 0 var(--smart-border); top: 0; position: relative; z-index: 200 } .smart-table[freeze-header][virtualization] thead th { opacity: 1; border-bottom: none; top: 0; box-shadow: 0 1px 0 0 var(--smart-border); z-index: 100; position: relative } .smart-table[freeze-header][virtualization] thead th.sticky { position: sticky } .smart-table[freeze-header][virtualization] thead th.freeze-near { box-shadow: 1px 1px 0 0 var(--smart-border); z-index: 200 } .smart-table[freeze-header][virtualization] thead th.freeze-far { box-shadow: -1px 1px 0 0 var(--smart-border); z-index: 200 } .smart-table[freeze-header][virtualization] thead tr:nth-child(2)>th { top: var(--smart-table-column-header-height) } .smart-table[freeze-header][virtualization] thead tr:nth-child(3)>th { top: calc(2 * var(--smart-table-column-header-height)) } .smart-table[freeze-header][virtualization] thead tr:nth-child(4)>th { top: calc(3 * var(--smart-table-column-header-height)) } .smart-table[freeze-header][virtualization] thead tr:nth-child(5)>th { top: calc(4 * var(--smart-table-column-header-height)) } .smart-table[freeze-header][virtualization][conditional-formatting-button] thead th, .smart-table[freeze-header][virtualization][filtering]:not([filter-row]):not([column-menu]) thead th { top: var(--smart-table-header-footer-height) } .smart-table[freeze-header][virtualization][conditional-formatting-button] thead tr:nth-child(2)>th, .smart-table[freeze-header][virtualization][filtering]:not([filter-row]):not([column-menu]) thead tr:nth-child(2)>th { top: calc(var(--smart-table-header-footer-height) + var(--smart-table-column-header-height)) } .smart-table[freeze-header][virtualization][conditional-formatting-button] thead tr:nth-child(3)>th, .smart-table[freeze-header][virtualization][filtering]:not([filter-row]):not([column-menu]) thead tr:nth-child(3)>th { top: calc(var(--smart-table-header-footer-height) + 2 * var(--smart-table-column-header-height)) } .smart-table[freeze-header][virtualization][conditional-formatting-button] thead tr:nth-child(4)>th, .smart-table[freeze-header][virtualization][filtering]:not([filter-row]):not([column-menu]) thead tr:nth-child(4)>th { top: calc(var(--smart-table-header-footer-height) + 3 * var(--smart-table-column-header-height)) } .smart-table[freeze-header][virtualization][conditional-formatting-button] thead tr:nth-child(5)>th, .smart-table[freeze-header][virtualization][filtering]:not([filter-row]):not([column-menu]) thead tr:nth-child(5)>th { top: calc(var(--smart-table-header-footer-height) + 4 * var(--smart-table-column-header-height)) } .smart-table[freeze-footer] tfoot td { position: sticky; opacity: 1; border-top: none; bottom: 0; box-shadow: 0 -1px 0 0 var(--smart-border); z-index: 100 } .smart-table[freeze-footer] tfoot td.freeze-near { box-shadow: 1px -1px 0 0 var(--smart-border); z-index: 200 } .smart-table[freeze-footer] tfoot td.freeze-far { box-shadow: -1px -1px 0 0 var(--smart-border); z-index: 200 } .smart-table[freeze-footer] tfoot tr:nth-last-child(2) td { bottom: var(--smart-table-row-height) } .smart-table[freeze-footer] tfoot tr:nth-last-child(3) td { bottom: calc(2 * var(--smart-table-row-height)) } .smart-table[freeze-footer] .smart-table-container:focus td[focus]:after { height: calc(100% - 1px) } .smart-table[freeze-footer][paging] tfoot td { bottom: var(--smart-table-header-footer-height) } .smart-table[freeze-footer][paging] tfoot tr:nth-last-child(2) td { bottom: calc(var(--smart-table-row-height) + var(--smart-table-header-footer-height)) } .smart-table[freeze-footer][paging] tfoot tr:nth-last-child(3) td { bottom: calc(2 * var(--smart-table-row-height) + var(--smart-table-header-footer-height)) } .smart-table[row-detail-template] tr[row-id] { cursor: pointer } .smart-table[hierarchy] tr[row-id] td { transform: scaleY(1) } .smart-table[hierarchy] tr[row-id].no-height td { line-height: 0 } .smart-table[hierarchy] tr.collapsed[row-id] { height: 0 } .smart-table[hierarchy] tr.collapsed[row-id] td { border-top-width: 0; border-top-color: transparent; padding-top: 0; padding-bottom: 0; line-height: 0; transform: scaleY(0) } .smart-table[column-groups][selection] th.empty, .smart-table[column-groups][selection] th.smart-table-select-all, .smart-table[virtualization] tr[unused] td { border-top: none } .smart-pivot-table th.expanded .total-arrow, .smart-pivot-table:not([group-layout=classic]) tr.expanded .hierarchy-arrow { transform: rotate(180deg) } .smart-table[hierarchy]:not([animation=none]) tr[row-id] { transition: height .2s ease-in-out } .smart-table[modal] { position: relative; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } .smart-table[modal]:after { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: #000; opacity: .3; pointer-events: none; cursor: default; -moz-user-select: none; -webkit-user-select: none; user-select: none; z-index: 100 } .smart-table[toolbar][designer] .smart-table-toolbar-button.conditional-formatting { border-right: none } .smart-table[toolbar][designer] .smart-table-toolbar-button.conditional-formatting:before { left: unset; right: 0; width: calc(2 * var(--smart-table-row-height)) } .smart-table[auto-size] table { table-layout: auto } .smart-table[column-groups]:not([right-to-left]) th:not(:last-child) { border-right: var(--smart-border-width) solid var(--smart-border) } .smart-table[virtualization] tr.smart-table-filter-row td { position: sticky; top: var(--smart-table-column-header-height); background-color: var(--smart-background); box-shadow: 0 1px 0 0 var(--smart-border) } .smart-table[virtualization][conditional-formatting-button] .smart-table-container, .smart-table[virtualization][filtering]:not([filter-row]) .smart-table-container, .smart-table[virtualization][paging] .smart-table-container, .smart-table[virtualization][paging][conditional-formatting-button] .smart-table-container, .smart-table[virtualization][paging][filtering]:not([filter-row]):not([column-menu]) .smart-table-container { height: 100% } .smart-table[virtualization][freeze-header][conditional-formatting-button] thead th, .smart-table[virtualization][freeze-header][filtering]:not([filter-row]):not([column-menu]) thead th { top: 0 } @media (max-width:575.98px) { .smart-table.table-responsive-sm { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar } .smart-table.table-responsive-sm>.smart-table.table-bordered table { border: 0 } } @media (max-width:767.98px) { .smart-table.table-responsive-md { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar } .smart-table.table-responsive-md>.smart-table.table-bordered table { border: 0 } } @media (max-width:991.98px) { .smart-table.table-responsive-lg { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar } .smart-table.table-responsive-lg>.smart-table.table-bordered table { border: 0 } } @media (max-width:1199.98px) { .smart-table.table-responsive-xl { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar } .smart-table.table-responsive-xl>.smart-table.table-bordered table { border: 0 } } .smart-table.table-responsive { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar } .smart-table.table-responsive>.smart-table.table-bordered table { border: 0 } @media only screen and (max-width:1280px) { .smart-table .priority-5 { display: none } } @media only screen and (max-width:1024px) { .smart-table .priority-4 { display: none } } @media only screen and (max-width:800px) { .smart-table .priority-3 { display: none } } @media only screen and (max-width:640px) { .smart-table .priority-2 { display: none } } .smart-table[hide-selection-column] th.smart-table-select-all { width: 0; padding-left: 0; padding-right: 0 } .smart-table[hide-selection-column] tr[aria-selected=true] td { background: var(--smart-ui-state-selected); color: var(--smart-ui-state-color-selected) } .smart-pivot-table:not([animation=none]) .total-arrow { transition: transform .2s ease-in-out } @-moz-document url-prefix() { .smart-table thead th:not(.smart-table-select-all) { opacity: 1 } .smart-table .freeze-far, .smart-table .freeze-near { box-shadow: 0 0 0 1px var(--smart-border) } .smart-table .smart-table-container:focus td[focus]:after { height: calc(100% - 1px); top: 1px } .smart-table[freeze-header] thead th.empty, .smart-table[freeze-header] thead th:empty { box-shadow: -1px 0 0 0 var(--smart-border) } .smart-table[freeze-footer] .smart-table-container:focus td[focus]::after { height: calc(100% - 2px) } .smart-table[column-groups][freeze-header] thead th { box-shadow: 0 0 0 1px var(--smart-border) } .smart-pivot-table thead th:last-child, .smart-pivot-table thead th:not(:last-child) { border: none; box-shadow: 0 0 0 1px var(--smart-border) } .smart-pivot-table tbody tr[row-id]:first-child td { border-top: none } .smart-pivot-table[freeze-header] thead th { box-shadow: 0 0 0 1px var(--smart-border) } .smart-pivot-table[freeze-header] .smart-pivot-table-grouping-header:empty { box-shadow: -1px 0 0 0 var(--smart-border) } } .smart-pivot-panel>.smart-container[modal] { position: relative; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } .smart-pivot-panel>.smart-container[modal]:after { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: #000; opacity: .3; pointer-events: none; cursor: default; -moz-user-select: none; -webkit-user-select: none; user-select: none; z-index: 100 } .smart-table-primary, .smart-table-primary>td, .smart-table-primary>th { background-color: #b8daff } .smart-table-secondary, .smart-table-secondary>td, .smart-table-secondary>th { background-color: #d6d8db } .smart-table-success, .smart-table-success>td, .smart-table-success>th { background-color: #c3e6cb } .smart-table-info, .smart-table-info>td, .smart-table-info>th { background-color: #bee5eb } .smart-table-warning, .smart-table-warning>td, .smart-table-warning>th { background-color: #ffeeba } .smart-table-danger, .smart-table-danger>td, .smart-table-danger>th { background-color: #f5c6cb } .smart-table.table-light table, .smart-table.table-light table>td, .smart-table.table-light table>th { background-color: #fdfdfe } .smart-table.table-dark table td, .smart-table.table-dark table th, .smart-table.table-dark table thead th { border-color: #32383e } .smart-table.table-dark table>td, .smart-table.table-dark table>th { background-color: #212529 } .smart-table-active, .smart-table-active>td, .smart-table-active>th { background-color: rgba(0, 0, 0, .075) } .smart-table-container { width: 100%; height: 100% } .smart-table-sm td, .smart-table-sm th { padding: .3rem } .smart-table-feedback, .smart-table-resize-feedback { padding: 5px; font-family: var(--smart-font-family); position: absolute } .smart-table-feedback { display: flex; align-items: center; box-shadow: var(--smart-elevation-8); border: var(--smart-border-width) solid var(--smart-border); border-radius: var(--smart-border-radius); white-space: nowrap; font-size: var(--smart-font-size); background-color: var(--smart-background); color: var(--smart-background-color); z-index: 10000; opacity: .85 } .smart-table-resize-feedback { box-sizing: border-box; border-left: 1px dashed var(--smart-primary); font-size: 12px; font-weight: 700; z-index: 100 } .smart-table-resize-feedback.static { border-left-style: solid } .smart-table-resize-feedback.max, .smart-table-resize-feedback.min { border-left-color: var(--smart-error) } .smart-table-window.conditional-formatting { --smart-window-default-width: 650px } .smart-table-window.conditional-formatting .smart-content-container>.smart-content, .smart-table-window.conditional-formatting>.smart-container { overflow: visible } .smart-table-window.conditional-formatting smart-formatting-panel { border: none; width: 100%; height: 100% } .smart-table-window.smart-window.conditional-formatting { overflow: visible } .smart-table-window.smart-window .smart-content-container>.smart-footer { display: flex; justify-content: space-evenly; align-items: center } .smart-table-window.smart-window .smart-content-container>.smart-footer smart-button { --smart-button-padding: 0; width: 40%; height: 100% } .smart-table-column-menu { border: 1px solid var(--smart-border); box-shadow: var(--smart-elevation-8); z-index: 9999; width: 200px; height: auto; padding: 10px; border-radius: var(--smart-border-radius); /* position: absolute; */ position: fixed; background: var(--smart-background); top: 0; left: 0 } .smart-table-column-menu smart-button { --smart-button-padding: 0 } .smart-table-column-menu smart-button button:after { content: var(--smart-icon-filter); font-family: var(--smart-font-family-icon); width: 100%; height: 100%; text-decoration: line-through } .smart-table-column-menu.wrapper>div { --smart-filter-row-content-height: calc(var(--smart-table-row-height) - 2 * var(--smart-table-cell-padding) - var(--smart-border-width)); display: grid; grid-template-columns: 1fr var(--smart-filter-row-content-height) var(--smart-filter-row-content-height); grid-template-rows: 100%; column-gap: 2px; height: var(--smart-filter-row-content-height); position: relative } .smart-table-column-menu.wrapper .smart-table-menu-item { display: flex; cursor: pointer; font-family: var(--smart-font-family); font-size: var(--smart-font-size); height: 30px; align-items: center; padding: 5px; box-sizing: border-box; margin-bottom: 5px } .smart-table-column-menu.wrapper .smart-table-menu-item.smart-disabled { user-select: none; pointer-events: none; opacity: .5 } .smart-table-column-menu.wrapper .smart-table-menu-item .label { padding: 5px } .smart-table-column-menu.wrapper .smart-table-menu-item:not(.filter-item):hover { background: var(--smart-ui-state-hover); color: var(--smart-ui-state-color-hover) } .smart-table-column-menu.wrapper .smart-table-menu-item .menu-icon::after, .smart-table-column-menu.wrapper .smart-table-menu-item.columns-item::after { font-family: var(--smart-font-family-icon); width: 100%; color: var(--smart-surface-color); height: 100% } .smart-table-column-menu.wrapper .smart-table-menu-item .sort-asc::after { content: var(--smart-icon-sort-name-up) } .smart-table-column-menu.wrapper .smart-table-menu-item .sort-desc::after { content: var(--smart-icon-sort-name-down) } .smart-table-column-menu.wrapper .smart-table-menu-item .sort-remove::after { content: var(--smart-icon-sort-name-up); text-decoration: line-through } .smart-table-column-menu.wrapper .smart-table-menu-item .reset::after { content: var(--smart-icon-refresh) } .smart-table-column-menu.wrapper .smart-table-menu-item .columns::after { content: var(--smart-icon-table) } .smart-table-column-menu.wrapper .smart-table-menu-item .filter-by::after { content: var(--smart-icon-add-filter) } .smart-table-column-menu.wrapper .smart-table-menu-item .filter-by-remove::after { content: var(--smart-icon-filter); text-decoration: line-through } .smart-table-column-menu.wrapper .smart-table-menu-item .column-item::after { content: var(--smart-icon-check-squared) } .smart-table-column-menu.wrapper .smart-table-menu-item .column-item.off::after { content: var(--smart-icon-check-empty) } .smart-table-column-menu.wrapper .smart-table-menu-item.columns-item::after { content: var(--smart-icon-arrow-right); display: flex; justify-content: flex-end; align-items: center } .smart-table-column-menu.wrapper .smart-table-menu-item.filter-item { cursor: default; border-top: 1px solid var(--smart-border); padding-top: 20px; margin-bottom: 10px } .smart-table-column-menu.wrapper.no-filter { opacity: .6; pointer-events: none } .smart-table-column-menu .filter-value { min-width: 0; border: var(--smart-border-width) solid var(--smart-border); border-top-right-radius: var(--smart-border-top-right-radius); border-top-left-radius: var(--smart-border-top-left-radius); border-bottom-left-radius: var(--smart-border-bottom-left-radius); border-bottom-right-radius: var(--smart-border-bottom-right-radius); padding: var(--smart-editor-label-padding); background-color: var(--smart-background); color: var(--smart-background-color); font-family: inherit; font-size: inherit } .smart-table-column-menu .filter-value:hover { border-color: var(--smart-ui-state-border-hover) } .smart-table-column-menu .filter-value:focus { outline: 0; border-color: var(--smart-outline) } .smart-table-column-menu .filter-value[type=number] { -webkit-appearance: none; -moz-appearance: textfield } .smart-table-column-menu .filter-value::-webkit-inner-spin-button, .smart-table-column-menu .filter-value::-webkit-outer-spin-button { -webkit-appearance: none; -moz-appearance: textfield } .smart-table-column-menu .smart-input { --smart-editor-addon-width: 100%; --smart-editor-label-padding: 0; width: unset; height: 100% } .smart-table-column-menu .smart-input .smart-drop-down-button { border-top-left-radius: var(--smart-border-top-left-radius); border-bottom-left-radius: var(--smart-border-bottom-left-radius) } .smart-table-column-menu .smart-input .smart-drop-down-button .arrow:after { content: var(--smart-icon-filter); transform: none !important } @keyframes active { from { transform: scale(0) } to { transform: scale(2.5) } } @-moz-document url-prefix() { .smart-table[right-to-left] .freeze-far, .smart-table[right-to-left] .freeze-near { box-shadow: 0 0 0 1px var(--smart-border) } } .smart-table[right-to-left]>.smart-container { direction: rtl } .smart-table[right-to-left] thead th { text-align: right } .smart-table[right-to-left] thead th .sort-by:after { left: unset; right: 100% } .smart-table[right-to-left] th.column-header { text-align: center } .smart-table[right-to-left] td { text-align: initial } .smart-table[right-to-left] .smart-table-container:focus td[focus]:after { left: unset; right: 1px } .smart-table[right-to-left] .smart-table-header { left: unset; right: 0 } .smart-table[right-to-left] .smart-table-header .smart-table-toolbar-button.conditional-formatting { border-left: none; border-right: var(--smart-border-width) solid var(--smart-border) } .smart-table[right-to-left] .smart-table-header .smart-table-toolbar-button.conditional-formatting:before { left: 0; right: unset } .smart-table[right-to-left] .freeze-far { left: 0; box-shadow: 1px 0 0 0 var(--smart-border); right: unset } .smart-table[right-to-left] .freeze-near { right: 0; box-shadow: -1px 0 0 0 var(--smart-border); left: unset } .smart-pivot-table[right-to-left] .smart-table-toolbar-button.fields:before, .smart-pivot-table[right-to-left][toolbar][designer] .smart-table-toolbar-button.conditional-formatting:before { left: 0; right: unset } .smart-table[right-to-left] smart-pager .smart-container { justify-content: flex-start } .smart-table[right-to-left] smart-pager .smart-pager-near-buttons-container { order: 1 } .smart-table[right-to-left] smart-pager .smart-pager-summary-container.smart-pager-label { order: 2 } .smart-table[right-to-left] smart-pager .smart-pager-size-selector-and-label-container { order: 3; flex-direction: row } .smart-table[right-to-left] .group-header, .smart-table[right-to-left] .tree-cell, .smart-table[right-to-left] .tree-leaf { padding-left: var(--smart-table-cell-padding) } .smart-table[right-to-left] .hierarchy-arrow { margin-left: var(--smart-table-arrow-margin); margin-right: unset } .smart-table[right-to-left][freeze-header] thead th.freeze-far { box-shadow: 1px 1px 0 0 var(--smart-border) } .smart-table[right-to-left][freeze-header] thead th.freeze-near { box-shadow: -1px 1px 0 0 var(--smart-border) } .smart-table[right-to-left][freeze-footer] tfoot td.freeze-far { box-shadow: 1px -1px 0 0 var(--smart-border) } .smart-table[right-to-left][freeze-footer] tfoot td.freeze-near { box-shadow: -1px -1px 0 0 var(--smart-border) } .smart-table[right-to-left][conditional-formatting-button]:not([filtering]) .smart-table-header { grid-template-columns: 1fr auto; grid-template-areas: ". button" } .smart-table[right-to-left][filtering] .smart-table-header { grid-template-columns: 1fr } .smart-table[right-to-left][filtering][conditional-formatting-button] .smart-table-header { grid-template-columns: 1fr auto } .smart-table[right-to-left][column-resize] th[locked]+th[data-field]:after, .smart-table[right-to-left][column-resize] th[locked]:before, .smart-table[right-to-left][column-resize]:not([selection]) th[data-field]:first-child:after { content: none } .smart-table[right-to-left][column-resize]:not([selection]) th[data-field]:not([locked]):first-child:before { content: '' } .smart-table[right-to-left][column-resize][selection] th[data-field]:nth-child(2):after { content: none } .smart-table[right-to-left][column-resize][selection] th[data-field]:not([locked]):nth-child(2):before { content: '' } .smart-table[right-to-left][column-groups] th:not(:last-child) { border-left: var(--smart-border-width) solid var(--smart-border) } @-moz-document url-prefix() { .smart-pivot-table[right-to-left] thead th:last-child, .smart-pivot-table[right-to-left] thead th:not(:last-child) { border: none; box-shadow: 0 0 0 1px var(--smart-border) } } .smart-pivot-table[right-to-left] .smart-table-toolbar-button.fields, .smart-pivot-table[right-to-left][toolbar][designer] .smart-table-toolbar-button.conditional-formatting { border-left: none; border-right: var(--smart-border-width) solid var(--smart-border) } .smart-table[right-to-left] .outline-level-1 { padding-right: var(--smart-table-indent) } .smart-table[right-to-left] .outline-level-1.tree-leaf { padding-right: calc(var(--smart-table-indent) + var(--smart-table-arrow-size) + var(--smart-table-arrow-margin)) } .smart-table[right-to-left] .outline-level-2 { padding-right: calc(2 * var(--smart-table-indent)) } .smart-table[right-to-left] .outline-level-2.tree-leaf { padding-right: calc(2 * var(--smart-table-indent) + var(--smart-table-arrow-size) + var(--smart-table-arrow-margin)) } .smart-table[right-to-left] .outline-level-3 { padding-right: calc(3 * var(--smart-table-indent)) } .smart-table[right-to-left] .outline-level-3.tree-leaf { padding-right: calc(3 * var(--smart-table-indent) + var(--smart-table-arrow-size) + var(--smart-table-arrow-margin)) } .smart-table[right-to-left] .outline-level-4 { padding-right: calc(4 * var(--smart-table-indent)) } .smart-table[right-to-left] .outline-level-4.tree-leaf { padding-right: calc(4 * var(--smart-table-indent) + var(--smart-table-arrow-size) + var(--smart-table-arrow-margin)) } .smart-table[right-to-left] .outline-level-5 { padding-right: calc(5 * var(--smart-table-indent)) } .smart-table[right-to-left] .outline-level-5.tree-leaf { padding-right: calc(5 * var(--smart-table-indent) + var(--smart-table-arrow-size) + var(--smart-table-arrow-margin)) } .smart-table[right-to-left] .outline-level-6 { padding-right: calc(6 * var(--smart-table-indent)) } .smart-table[right-to-left] .outline-level-6.tree-leaf { padding-right: calc(6 * var(--smart-table-indent) + var(--smart-table-arrow-size) + var(--smart-table-arrow-margin)) } .smart-table[right-to-left] .outline-level-7 { padding-right: calc(7 * var(--smart-table-indent)) } .smart-table[right-to-left] .outline-level-7.tree-leaf { padding-right: calc(7 * var(--smart-table-indent) + var(--smart-table-arrow-size) + var(--smart-table-arrow-margin)) } .smart-table[right-to-left] .outline-level-8 { padding-right: calc(8 * var(--smart-table-indent)) } .smart-table[right-to-left] .outline-level-8.tree-leaf { padding-right: calc(8 * var(--smart-table-indent) + var(--smart-table-arrow-size) + var(--smart-table-arrow-margin)) } .smart-table[right-to-left] .outline-level-9 { padding-right: calc(9 * var(--smart-table-indent)) } .smart-table[right-to-left] .outline-level-9.tree-leaf { padding-right: calc(9 * var(--smart-table-indent) + var(--smart-table-arrow-size) + var(--smart-table-arrow-margin)) } .smart-table[right-to-left] .outline-level-10 { padding-right: calc(10 * var(--smart-table-indent)) } .smart-table[right-to-left] .outline-level-10.tree-leaf { padding-right: calc(10 * var(--smart-table-indent) + var(--smart-table-arrow-size) + var(--smart-table-arrow-margin)) } smart-tabs { border: none; min-width: 125px; width: var(--smart-tabs-default-width); min-height: 125px; height: var(--smart-tabs-default-height); padding: 2px; overflow: visible; line-height: initial } .smart-tabs .smart-tab-close-button, .smart-tabs .smart-tab-group-arrow { font-family: var(--smart-font-family-icon); line-height: var(--smart-editor-addon-width); text-align: center } smart-tabs.smart-element { background: 0 0; border: none } smart-tab-item { position: relative; top: 0; left: 0; width: 100%; height: 100%; font-size: inherit; overflow: auto; outline: 0 } smart-tab-item>.smart-container { padding: 5px } smart-tab-item>.smart-container .smart-widget * { box-sizing: initial } smart-tab-item.smart-element { background: 0 0; border: none } smart-tab-item.animate { transition: left var(--smart-tabs-animation-duration) cubic-bezier(.35, 0, .25, 1), top var(--smart-tabs-animation-duration) cubic-bezier(.35, 0, .25, 1), visibility 2s cubic-bezier(.35, 0, .25, 1), opacity 2s cubic-bezier(.35, 0, .25, 1) } smart-tab-item.smart-visibility-hidden { position: absolute } smart-tab-item.smart-visibility-hidden .smart-container, smart-tab-item.smart-visibility-hidden>.smart-container .smart-widget * { visibility: hidden } smart-tab-item.smart-visibility-hidden.animate .smart-container { visibility: initial } smart-tab-items-group.smart-element { background: 0 0; border: none } .smart-tabs { outline: 0 } .smart-tabs>.smart-container { display: flex; -webkit-flex-direction: column; flex-direction: column; position: relative; min-height: inherit } .smart-tabs .smart-tabs-content-section, .smart-tabs .smart-tabs-header-items { position: relative; min-height: 0; width: 100%; overflow: hidden } .smart-tabs .smart-tabs-header-section { border: var(--smart-border-width) solid var(--smart-surface); background: var(--smart-surface); color: var(--smart-surface-color); padding: var(--smart-tabs-header-padding) } .smart-tabs .smart-tabs-header-items>.smart-drop-down-button { font-family: var(--smart-font-family-icon); position: relative; display: none; cursor: pointer } .smart-tabs .smart-tabs-content-section { flex: 1; margin: 0; color: var(--smart-tabs-color); background: var(--smart-background); border: var(--smart-border-width) solid var(--smart-border); border-bottom-left-radius: var(--smart-border-bottom-left-radius); border-bottom-right-radius: var(--smart-border-bottom-right-radius); margin-top: var(--smart-tabs-header-offset) } .smart-tabs .smart-drop-down-button-drop-down, .smart-tabs .smart-tab-group-drop-down { padding: 2px; width: auto; z-index: var(--smart-editor-drop-down-z-index); box-shadow: var(--smart-elevation-8); white-space: nowrap } .smart-tabs .smart-tabs-resize-token { position: absolute; background-color: #000; opacity: .5 } .smart-tabs .smart-tab-header-controls:empty { display: none } .smart-tabs .smart-tab-group-container { position: relative; display: inline-block; cursor: pointer; color: inherit; text-transform: var(--smart-tab-item-text-transform) } .smart-tabs .smart-tab-group-container .smart-tab-label-text-container { margin-right: 18px } .smart-tabs .smart-tab-group-container[hover], .smart-tabs .smart-tab-group-container[hover][focus] { color: var(--smart-ui-state-color-hover); border-color: var(--smart-ui-state-border-hover); background-color: var(--smart-ui-state-hover) } .smart-tabs .smart-tab-group-drop-down { position: absolute; border-width: var(--smart-border-width); border-style: solid; border-color: var(--smart-border); border-top: none; height: auto; border-radius: var(--smart-border-radius); background-color: var(--smart-background); color: var(--smart-background-color) } .smart-tabs .smart-tab-group-drop-down .smart-tab-label-container { display: block; width: 100%; overflow: hidden } .smart-tabs .smart-tab-group-arrow { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); width: var(--smart-editor-addon-width); height: var(--smart-editor-addon-width) } .smart-tabs .smart-tab-group-arrow:after { content: var(--smart-icon-arrow-down) } .smart-tabs .smart-tab-label-container { position: relative; display: inline-block; cursor: pointer; color: inherit; text-transform: var(--smart-tab-item-text-transform); background-color: inherit; border-color: transparent; margin-right: var(--smart-tab-item-offset); border-top-left-radius: var(--smart-item-border-top-left-radius); border-top-right-radius: var(--smart-item-border-top-right-radius); border-bottom-left-radius: var(--smart-item-border-bottom-left-radius); border-bottom-right-radius: var(--smart-item-border-bottom-right-radius) } .smart-tabs .smart-tab-label-container[selected], .smart-tabs .smart-tab-label-container[selected][focus] { background-color: var(--smart-ui-state-selected); border-color: var(--smart-item-border-selected); color: var(--smart-ui-state-color-selected) } .smart-tabs .smart-tab-label-container[disabled] { opacity: .55; cursor: default; pointer-events: none; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none } .smart-tabs .smart-tab-label-container[hover], .smart-tabs .smart-tab-label-container[hover][focus] { color: var(--smart-ui-state-color-hover); border-color: var(--smart-ui-state-border-hover); background-color: var(--smart-ui-state-hover) } .smart-tabs .smart-tab-label-text-wrapper { width: 100%; height: 100%; position: relative; padding: var(--smart-tab-item-padding) } .smart-tabs .smart-tab-label-text-container { overflow: hidden; white-space: nowrap; text-overflow: ellipsis } .smart-tabs .smart-tab-label-text-container.smart-close-button-enabled { margin-right: 18px } .smart-tabs .smart-tab-close-button { font-size: 10px; position: absolute; right: 2px; top: 50%; transform: translateY(-50%); width: var(--smart-editor-addon-width); height: var(--smart-editor-addon-width) } .smart-tabs .smart-tab-close-button:after { content: var(--smart-icon-close); display: flex; justify-content: center; width: 100%; height: 100%; align-items: center } .smart-tabs .smart-tab-close-button[hover] { border-radius: 50%; border: 1px solid var(--smart-ui-state-border-hover); background-color: var(--smart-ui-state-hover); color: var(--smart-ui-state-color-hover) } .smart-tabs .smart-drop-down-button-arrow { position: absolute; width: 10px; height: 10px; top: 50%; left: 50%; transform: translate(-50%, -50%); color: inherit } .smart-tabs .smart-drop-down-button-arrow:after { content: var(--smart-icon-arrow-down) } .smart-tabs .smart-drop-down-button-drop-down { position: absolute; border-width: var(--smart-border-width); border-style: solid; border-color: var(--smart-border); border-top: none; height: auto; border-radius: var(--smart-border-radius); background-color: var(--smart-background); color: var(--smart-background-color); top: 100% } .smart-tabs .smart-drop-down-button-drop-down .smart-tab-label-container { display: block; width: 100%; overflow: hidden; padding: var(--smart-tab-item-padding) } .smart-tabs .smart-add-new-tab[hover] { color: var(--smart-ui-state-color-hover) } .smart-tabs .smart-nav-button { position: relative; border-radius: 0; z-index: 100 } .smart-tabs .smart-nav-button>.smart-button { border: none; height: initial; padding: 0 } .smart-tabs .ripple-agent { position: absolute; width: 100%; height: 100%; top: 0; left: 0; overflow: hidden; pointer-events: none } .smart-tabs .smart-ripple { background-color: var(--smart-primary); opacity: .5 } .smart-tabs:focus .smart-tabs-content-section, .smart-tabs:focus .smart-tabs-header-section { border-color: var(--smart-outline) } .smart-tabs:focus .smart-tab-label-container[selected] { color: var(--smart-ui-state-color-focus) } .smart-tabs:focus .smart-add-new-tab[focus], .smart-tabs:focus .smart-tab-group-container[focus], .smart-tabs:focus .smart-tab-label-container[focus] { color: var(--smart-ui-state-color-selected) } .smart-tabs:not([animation=none]) smart-tab-item.right { left: 100% } .smart-tabs:not([animation=none]) smart-tab-item.left { left: -100% } .smart-tabs:not([animation=none]) smart-tab-item.top { top: -100% } .smart-tabs:not([animation=none]) smart-tab-item.bottom { top: 100% } .smart-tabs:not([animation=none]) .smart-tabs-selection-bar { transition: width var(--smart-tabs-animation-duration) cubic-bezier(.35, 0, .25, 1), height var(--smart-tabs-animation-duration) cubic-bezier(.35, 0, .25, 1), top var(--smart-tabs-animation-duration) cubic-bezier(.35, 0, .25, 1), left var(--smart-tabs-animation-duration) cubic-bezier(.35, 0, .25, 1) } .smart-tabs:not([animation=none]) .smart-tabs-content-section:after { transition: opacity .2s ease-in } .smart-tabs[keyboard-navigate] { color: var(--smart-ui-state-color-focus) } .smart-tabs[collapsed] .smart-tabs-content-section { margin: 0; display: none } .smart-tabs[collapsed][horizontal] { min-height: initial; height: auto } .smart-tabs[collapsed][vertical] { display: table-caption; min-width: initial; width: auto } .smart-tabs[dragged], .smart-tabs[dragged] .smart-tab-label-container { cursor: move } .smart-tabs[resizing][horizontal], .smart-tabs[resizing][horizontal] .smart-tab-group-container, .smart-tabs[resizing][horizontal] .smart-tab-label-container { cursor: e-resize } .smart-tabs[resizing][vertical], .smart-tabs[resizing][vertical] .smart-tab-group-container, .smart-tabs[resizing][vertical] .smart-tab-label-container { cursor: n-resize } .smart-tabs[disabled] .smart-nav-button, .smart-tabs[disabled] .smart-tab-group-container, .smart-tabs[disabled] .smart-tab-label-container, .smart-tabs[disabled] .smart-tabs-header-items>.smart-drop-down-button, .smart-tabs[readonly] .smart-nav-button, .smart-tabs[readonly] .smart-tab-group-container, .smart-tabs[readonly] .smart-tab-label-container, .smart-tabs[readonly] .smart-tabs-header-items>.smart-drop-down-button { cursor: default } .smart-tabs[allow-toggle] .smart-tabs-content-section:after { content: 'No Items Selected'; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 1; pointer-events: none } .smart-tabs[vertical]>.smart-container { -webkit-flex-direction: row; flex-direction: row } .smart-tabs[vertical] .smart-tabs-header-section { width: auto; min-height: initial; height: 100% } .smart-tabs[vertical] .smart-tabs-header-section.scroll-buttons-shown .smart-tab-strip { height: calc(100% - 2 * var(--smart-tabs-header-button-size)) } .smart-tabs[vertical] .smart-tabs-header-section.scroll-buttons-shown.one-button-shown .smart-tab-strip { height: calc(100% - var(--smart-tabs-header-button-size)) } .smart-tabs[vertical] .smart-tabs-content-section, .smart-tabs[vertical] .smart-tabs-header-items { width: auto; min-height: initial; height: 100% } .smart-tabs[vertical] .smart-tabs-header-items>.smart-drop-down-button { height: var(--smart-tabs-header-button-size); width: 100%; border: none; background: 0 0 } .smart-tabs[vertical] .smart-tab-strip { height: 100% } .smart-tabs[vertical] .smart-tab-strip>.smart-tab-label-container { border: none; border-right: var(--smart-item-border-width) solid transparent; min-height: 20px } .smart-tabs[vertical] .smart-tab-strip>.smart-add-new-tab { min-height: initial; min-width: initial } .smart-tabs[vertical] .smart-tab-group-container { display: block; border: none; border-right: var(--smart-item-border-width) solid transparent; min-height: 20px } .smart-tabs[vertical] .smart-tab-label-container { display: block } .smart-tabs[vertical] .smart-tab-label-container:last-child { margin-right: 0; margin-bottom: 0 } .smart-tabs[tab-text-orientation=vertical] .smart-tab-group-container .smart-tab-label-text-container, .smart-tabs[tab-text-orientation=vertical] .smart-tab-strip>.smart-tab-label-container .smart-tab-label-text-container.smart-close-button-enabled { margin-bottom: 18px; margin-right: 0 } .smart-tabs[vertical] .smart-tab-group-drop-down { border-top: var(--smart-border-width) solid var(--smart-border) } .smart-tabs[vertical] .smart-add-new-tab { text-align: center } .smart-tabs[vertical] .smart-add-new-tab>.smart-tab-label-text-wrapper { padding-left: 10px; padding-right: 10px } .smart-tabs[vertical] .smart-nav-button { height: var(--smart-tabs-header-button-size); width: 100%; border: none; background: 0 0 } .smart-tabs[vertical] .smart-drop-down-button-drop-down { border-top: var(--smart-border-width) solid var(--smart-border); top: initial } .smart-tabs[vertical] .smart-tabs-resize-token { width: 100%; height: 3px; transform: translateY(-50%) } .smart-tabs[horizontal] .smart-tab-strip { width: 100%; min-height: 0 } .smart-tabs[horizontal] .smart-tab-strip>.smart-tab-label-container { min-width: 10px; border: none; border-bottom: var(--smart-item-border-width) solid transparent } .smart-tabs[horizontal] .smart-tab-strip>.smart-tab-label-container:first-child { margin-left: var(--smart-tab-item-initial-offset) } .smart-tabs[horizontal] .smart-tab-group-container { min-width: 40px } .smart-tabs[horizontal] .smart-tabs-header-section.scroll-buttons-shown .smart-tab-strip { width: calc(100% - 2 * var(--smart-tabs-header-button-size)) } .smart-tabs[horizontal] .smart-tabs-header-section.scroll-buttons-shown.one-button-shown .smart-tab-strip { width: calc(100% - var(--smart-tabs-header-button-size)) } .smart-tabs[horizontal] .smart-nav-button, .smart-tabs[horizontal] .smart-tabs-header-items>.smart-drop-down-button { width: var(--smart-tabs-header-button-size); border: none; background: 0 0 } .smart-tabs[horizontal] .smart-tabs-resize-token { width: 3px; height: 100%; transform: translateX(-50%) } .smart-tabs[tab-text-orientation=vertical] .smart-tab-strip>.smart-tab-label-container>.smart-tab-close-button { top: initial; right: initial; bottom: 2px; left: 50%; transform: translateX(-50%) } .smart-tabs[tab-text-orientation=vertical] .smart-tab-group-arrow { top: initial; right: initial; bottom: 2px; left: 50%; transform: translateX(-50%) } .smart-tabs[tab-text-orientation=vertical] .smart-tab-group-drop-down { writing-mode: horizontal-tb } .smart-tabs[tab-text-orientation=vertical][horizontal] .smart-tab-strip { writing-mode: vertical-lr } .smart-tabs[tab-text-orientation=vertical][horizontal] .smart-tab-group-container, .smart-tabs[tab-text-orientation=vertical][horizontal] .smart-tab-strip>.smart-tab-label-container { min-width: 20px; display: block } .smart-tabs[tab-text-orientation=vertical][horizontal] .smart-tab-close-button { padding-left: 2px } .smart-tabs[tab-text-orientation=vertical][vertical] .smart-tab-strip { writing-mode: vertical-rl } .smart-tabs[tab-text-orientation=vertical][vertical] .smart-tab-strip>.smart-tab-label-container { min-height: 10px; display: inline-block } .smart-tabs[tab-text-orientation=vertical][vertical] .smart-tab-group-container { min-height: 40px; display: inline-block } .smart-tabs[tab-text-orientation=vertical][vertical] .smart-tab-close-button, .smart-tabs[tab-text-orientation=vertical][vertical] .smart-tab-group-arrow { padding-right: 1px } .smart-tabs[tab-text-orientation=vertical][tab-position=bottom] .smart-tab-group-container .smart-tab-label-text-container { margin-top: 18px; margin-bottom: 0 } .smart-tabs[tab-text-orientation=vertical][tab-position=bottom] .smart-tab-group-arrow { bottom: initial; top: 2px } .smart-tabs[tab-text-orientation=vertical][tab-position=right] .smart-tab-group-container .smart-tab-label-text-container { margin-left: 0 } .smart-tabs:not([tab-position=bottom]):not([tab-position=left]):not([tab-position=right]) .smart-tabs-header-section { border-bottom-width: 0 } .smart-tabs[tab-position=hidden] .smart-tabs-header-section { display: none } .smart-tabs[tab-position=hidden] .smart-tabs-content-section { margin: 0 } .smart-tabs[tab-position=right] .smart-tabs-selection-bar { width: 2px; left: 0 } .smart-tabs[tab-position=right] .smart-tabs-header-section { border-left-width: 0 } .smart-tabs[tab-position=right] .smart-tab-label-container { margin-right: 0; margin-left: 0; margin-top: var(--smart-tab-item-initial-offset); margin-bottom: var(--smart-tab-item-offset) } .smart-tabs[tab-position=right] .smart-tabs-content-section { margin: 0 var(--smart-tabs-header-offset) 0 0; border-bottom-left-radius: var(--smart-border-bottom-left-radius); border-top-left-radius: var(--smart-border-top-left-radius) } .smart-tabs[tab-position=right] .smart-drop-down-button-drop-down, .smart-tabs[tab-position=right] .smart-tab-group-drop-down { transform: translateX(-100%); border-right: none; box-shadow: var(--smart-elevation-8) } .smart-tabs[tab-position=right] .smart-tab-group-container .smart-tab-label-text-container { margin-left: 12px; margin-right: 0 } .smart-tabs[tab-position=right] .smart-tab-group-arrow { left: 0; right: initial } .smart-tabs[tab-position=bottom] .smart-tabs-selection-bar { height: 2px; top: 0 } .smart-tabs[tab-position=bottom] .smart-tabs-header-section { border-top-width: 0 } .smart-tabs[tab-position=bottom] .smart-drop-down-button-drop-down, .smart-tabs[tab-position=bottom] .smart-tab-group-drop-down { border-top: var(--smart-border-width) solid var(--smart-border); transform: translateY(-100%); border-bottom: none; box-shadow: var(--smart-elevation-8) } .smart-tabs[tab-position=bottom] .smart-tab-label-container { margin-right: var(--smart-tab-item-offset) } .smart-tabs[tab-position=bottom] .smart-tabs-content-section { margin: 0 0 var(--smart-tabs-header-offset); border-top-left-radius: var(--smart-border-top-left-radius); border-top-right-radius: var(--smart-border-top-right-radius) } .smart-tabs[tab-position=bottom] .smart-drop-down-button-drop-down { top: initial } .smart-tabs[tab-position=left] .smart-tabs-selection-bar { width: 2px; right: 0 } .smart-tabs[tab-position=left] .smart-tabs-header-section { border-right-width: 0 } .smart-tabs[tab-position=left] .smart-tab-label-container { margin-right: 0; margin-left: 0; margin-top: var(--smart-tab-item-initial-offset); margin-bottom: var(--smart-tab-item-offset) } .smart-tabs[tab-position=left] .smart-tabs-content-section { margin: 0 0 0 var(--smart-tabs-header-offset); border-bottom-right-radius: var(--smart-border-bottom-right-radius); border-top-right-radius: var(--smart-border-top-right-radius) } .smart-tabs[tab-position=left] .smart-tab-group-drop-down { border-left: none } .smart-tabs[tab-position=left] .smart-drop-down-button-drop-down { border-left: none; left: 100% } .smart-tabs[tab-layout=wrap][tab-text-orientation=vertical][horizontal] .smart-tab-strip, .smart-tabs[tab-layout=wrap][vertical] .smart-tab-strip { display: flex; flex-direction: column; flex-wrap: wrap } .smart-tabs[tab-layout=wrap][tab-text-orientation=vertical][vertical] .smart-tab-strip { display: block } .smart-tabs[tab-layout=scroll] .smart-tab-strip { overflow: hidden; white-space: nowrap } .smart-tabs[tab-layout=scroll] .smart-tabs-header-section .smart-nav-button.smart-hidden { display: none } .smart-tabs[tab-layout=scroll] .smart-tabs-header-section.scroll-buttons-shown .smart-nav-button, .smart-tabs[tab-layout=scroll][horizontal] .smart-tabs-header-items, .smart-tabs[tab-layout=scroll][horizontal] .smart-tabs-header-section { display: flex } .smart-tabs[tab-layout=shrink] .smart-tab-strip { overflow: hidden; white-space: nowrap } .smart-tabs[tab-layout=shrink] .smart-tab-strip>.smart-tab-group-container .smart-tab-label-text-container, .smart-tabs[tab-layout=shrink] .smart-tab-strip>.smart-tab-label-container .smart-tab-label-text-container { overflow: hidden } .smart-tabs[tab-layout=shrink] .smart-tab-strip.shrink-tabs { display: table; table-layout: fixed } .smart-tabs[tab-layout=shrink] .smart-tab-strip.shrink-tabs>.smart-tab-group-container, .smart-tabs[tab-layout=shrink] .smart-tab-strip.shrink-tabs>.smart-tab-label-container { display: table-cell; vertical-align: top } .smart-tabs[tab-layout=shrink] .smart-tab-strip.shrink-tabs>.smart-tab-group-container .smart-tab-label-text-container, .smart-tabs[tab-layout=shrink] .smart-tab-strip.shrink-tabs>.smart-tab-label-container .smart-tab-label-text-container { white-space: nowrap; text-overflow: ellipsis } .smart-tabs[tab-layout=shrink][horizontal] .smart-tab-group-container, .smart-tabs[tab-layout=shrink][horizontal] .smart-tab-strip>.smart-tab-label-container { min-width: initial } .smart-tabs[tab-layout=shrink][vertical] .smart-tab-strip { display: flex; flex-direction: column } .smart-tabs[tab-layout=shrink][vertical] .smart-tab-strip>.smart-tab-group-container { display: flex } .smart-tabs[tab-layout=shrink][vertical] .smart-tab-strip>.smart-tab-label-container { display: flex; min-height: initial; overflow: hidden } .smart-tabs[tab-layout=shrink][vertical] .smart-tab-strip.shrink-tabs-vertical>.smart-tab-group-container, .smart-tabs[tab-layout=shrink][vertical] .smart-tab-strip.shrink-tabs-vertical>.smart-tab-label-container { margin-top: 0; margin-bottom: 0 } .smart-tabs[tab-layout=shrink][vertical] .smart-tab-group-container { min-height: initial; overflow: hidden } .smart-tabs[tab-layout=shrink][tab-text-orientation=vertical] .smart-tab-strip>.smart-tab-group-container .smart-tab-label-text-container, .smart-tabs[tab-layout=shrink][tab-text-orientation=vertical] .smart-tab-strip>.smart-tab-label-container .smart-tab-label-text-container { writing-mode: vertical-lr } .smart-tabs[tab-layout=shrink][tab-text-orientation=vertical] .smart-tab-strip.shrink-tabs { writing-mode: initial } .smart-tabs[tab-layout=shrink][tab-text-orientation=vertical] .smart-tab-strip.shrink-tabs>.smart-tab-group-container .smart-tab-label-text-container, .smart-tabs[tab-layout=shrink][tab-text-orientation=vertical] .smart-tab-strip.shrink-tabs>.smart-tab-label-container .smart-tab-label-text-container { width: 100% } .smart-tabs[tab-layout=shrink][tab-text-orientation=vertical][vertical] .smart-tab-strip { writing-mode: initial; white-space: nowrap } @media screen and (-webkit-min-device-pixel-ratio:0) { .smart-tabs[tab-layout=shrink][tab-text-orientation=vertical][vertical] .smart-tab-label-text-wrapper { display: flex; height: auto } } @media not all and (min-resolution:0.001dpcm) { .smart-tabs[tab-layout=shrink][tab-text-orientation=vertical][vertical] .smart-tab-label-text-wrapper { overflow: hidden } } .smart-tabs[tab-layout=shrink][tab-text-orientation=vertical][horizontal] .smart-tab-strip.shrink-tabs>div>.smart-tab-label-text-wrapper { padding-left: 5px; padding-right: 5px } .smart-tabs[tab-layout=dropDown] .smart-tab-strip { overflow: hidden; white-space: nowrap } .smart-tabs[tab-layout=dropDown] .smart-tabs-header-items>.smart-drop-down-button { display: block; background-color: var(--smart-surface); color: var(--smart-surface-color); border-color: var(--smart-border) } .smart-tabs[tab-layout=dropDown][horizontal] .smart-tabs-header-items, .smart-tabs[tab-layout=dropDown][horizontal] .smart-tabs-header-section { display: flex } .smart-tabs[tab-layout=dropDown][horizontal] .smart-tab-strip { width: calc(100% - var(--smart-tabs-header-button-size)) } .smart-tabs[tab-layout=dropDown][vertical] .smart-tab-strip { height: calc(100% - var(--smart-tabs-header-button-size)) } .smart-tabs[selected-index] .smart-tabs-content-section:after { opacity: 0 } .smart-tabs[selected-index=null] .smart-tabs-selection-bar { visibility: hidden } .smart-tabs[selected-index=null] .smart-tabs-content-section:after { opacity: 1 } .smart-tabs[close-buttons][horizontal] .smart-tab-strip>.smart-tab-label-container { min-width: 40px } .smart-tabs[close-buttons][horizontal] .smart-tab-strip>.smart-add-new-tab { min-width: initial } .smart-tabs[close-buttons][vertical] .smart-tab-strip>.smart-add-new-tab { min-height: initial } .smart-tabs[close-buttons][tab-text-orientation=vertical][vertical] .smart-tab-strip>.smart-tab-label-container { min-height: 40px } @-moz-document url-prefix() { .smart-tabs .smart-tab-label-container .smart-tab-label-text-container-full-height { height: 100% } .smart-tabs .smart-tab-group-container .smart-tab-label-text-container-full-height { height: calc(100% - 10px) } .smart-tabs[tab-layout=wrap][tab-text-orientation=vertical][horizontal] .smart-tab-strip { height: 100%; display: block; writing-mode: initial } .smart-tabs[tab-layout=wrap][tab-text-orientation=vertical][horizontal] .smart-tab-strip>div { float: left; writing-mode: vertical-lr } .smart-tabs[tab-layout=shrink][vertical] .smart-tab-strip, .smart-tabs[tab-layout=shrink][vertical] .smart-tab-strip .smart-tab-label-text-wrapper, .smart-tabs[tab-layout=shrink][vertical] .smart-tab-strip>.smart-tab-group-container, .smart-tabs[tab-layout=shrink][vertical] .smart-tab-strip>.smart-tab-label-container { display: block } } @supports (-ms-ime-align:auto) { .smart-tabs[tab-layout=wrap][tab-text-orientation=vertical][horizontal] .smart-tab-strip { height: 100%; display: block; writing-mode: initial } .smart-tabs[tab-layout=wrap][tab-text-orientation=vertical][horizontal] .smart-tab-strip>div { writing-mode: vertical-lr; float: left } .smart-tabs[tab-layout=shrink][tab-text-orientation=vertical][horizontal] .smart-tab-strip { height: 100%; writing-mode: initial; display: flex } .smart-tabs[tab-layout=shrink][tab-text-orientation=vertical][horizontal] .smart-tab-strip>div { writing-mode: vertical-lr } } .smart-tabs-selection-bar { position: absolute; bottom: 0; background: var(--smart-ui-state-color-selected); height: 2px; z-index: 10 } .smart-tabs[right-to-left] .smart-tab-group-container, .smart-tabs[right-to-left] .smart-tab-label-container, .smart-tabs[right-to-left] smart-tab-item>.smart-container { direction: rtl } .smart-tabs[right-to-left][tab-text-orientation=vertical] .smart-tab-strip { writing-mode: vertical-rl } .smart-tabs[right-to-left]:not([vertical]) .smart-tab-strip { direction: rtl; text-align: right } .smart-tabs[right-to-left]:not([vertical]) .smart-tab-strip>.smart-tab-label-container:last-child { margin-left: initial; margin-right: var(--smart-tab-item-offset) } .smart-tabs[right-to-left]:not([vertical]) .smart-tab-strip>.smart-tab-label-container:first-child { margin-left: initial; margin-right: initial } .smart-tabs[right-to-left][tab-position=right]:not([tab-text-orientation=vertical]):not([vertical]) .smart-tab-group-container .smart-tab-label-text-container { margin-right: 18px; margin-left: 0 } .smart-tabs[right-to-left][tab-position=right]:not([tab-text-orientation=vertical]):not([vertical]) .smart-tab-group-arrow { right: 2px; left: initial } .smart-tabs[right-to-left]:not([tab-text-orientation=vertical]):not([vertical]) .smart-tab-group-container .smart-tab-label-text-container, .smart-tabs[right-to-left]:not([tab-text-orientation=vertical]):not([vertical]) .smart-tab-label-text-container.smart-close-button-enabled { margin-left: 18px; margin-right: initial } .smart-tabs[right-to-left]:not([tab-text-orientation=vertical]):not([vertical]) .smart-tab-close-button, .smart-tabs[right-to-left]:not([tab-text-orientation=vertical]):not([vertical]) .smart-tab-group-arrow { left: 2px; right: initial } .smart-tank:focus, smart-slider:focus { outline: 0 } smart-slider.smart-element, smart-tank.smart-element { border: none; background: 0 0; overflow: visible } .smart-tank[labels-visibility=none] .smart-label, .smart-tank[labels-visibility=endPoints] .smart-label-middle, smart-slider[labels-visibility=none] .smart-label, smart-slider[labels-visibility=endPoints] .smart-label-middle { visibility: hidden } .smart-tank *, smart-slider * { box-sizing: border-box } .smart-tank .smart-label, smart-slider .smart-label { font-family: inherit; font-size: inherit; white-space: nowrap; color: var(--smart-background-color); float: left } smart-tank { padding-left: 5px; padding-right: 5px; width: var(--smart-tank-default-width); height: var(--smart-tank-default-height) } smart-tank.smart-scale-far .smart-tick { top: initial } smart-slider .smart-container { overflow: visible } smart-slider .smart-scale { position: relative; user-select: none; pointer-events: none } smart-slider .smart-label { position: absolute } smart-slider .smart-tooltip { z-index: 1 } smart-slider .smart-tooltip-content { overflow: hidden; white-space: nowrap; text-overflow: ellipsis } smart-slider .smart-track-container { touch-action: none } smart-slider .smart-track-ticks-container { position: absolute; width: 100%; height: 100%; pointer-events: none } smart-slider[ticks-visibility=major] .smart-tick, smart-slider[ticks-visibility=major] .smart-tick-minor, smart-slider[ticks-visibility=none] .smart-tick, smart-slider[ticks-visibility=none] .smart-tick-minor { display: none } .smart-tank .smart-container { overflow: visible } .smart-tank .smart-track { height: 100%; width: calc(100% - var(--smart-tank-scale-size) - 4px); min-width: var(--smart-tank-minimum-track-size); position: relative; border: var(--smart-border) solid; border-width: var(--smart-border-width); background-color: var(--smart-background); float: left; border-top-left-radius: var(--smart-border-top-left-radius); border-bottom-left-radius: var(--smart-border-bottom-left-radius); border-top-right-radius: var(--smart-border-top-right-radius); border-bottom-right-radius: var(--smart-border-bottom-right-radius); touch-action: none; margin: 0 2px } .smart-tank .smart-track.track-hovered { cursor: pointer } .smart-tank .smart-track-ticks-container { position: absolute; width: 100%; height: 100%; pointer-events: none } .smart-tank .smart-value { width: 100%; height: 0; background-color: var(--smart-primary); border-color: var(--smart-primary); position: absolute } .smart-tank .smart-label { position: absolute } .smart-tank .smart-thumb { display: none; position: absolute; width: var(--smart-tank-thumb-width); height: var(--smart-tank-thumb-height); transform: scale(0); transition: transform .2s ease-out; left: calc(-1 * var(--smart-tank-thumb-width) * 2); top: calc(-1 * var(--smart-tank-thumb-height)/ 2); border-radius: 50%; background-color: var(--smart-primary) } .smart-tank .smart-thumb:before { transform: scale(1.1) rotate(45deg); border: 1px solid var(--smart-primary); border-radius: 50% 0 50% 50%; background-color: var(--smart-primary); width: 100%; height: 100%; display: block; content: "" } .smart-tank .smart-thumb-label-container { overflow: hidden; text-overflow: ellipsis; width: var(--smart-tank-thumb-width); height: var(--smart-tank-thumb-height); position: absolute; top: 0; left: 0 } .smart-tank .smart-scale { position: relative; user-select: none; pointer-events: none; float: left; margin-top: var(--smart-border-width); margin-left: initial; height: calc(100% - var(--smart-border-width)); width: var(--smart-tank-scale-size); max-width: calc(100% - var(--smart-tank-minimum-track-size) - 4px) } .smart-tank .smart-scale-near .smart-tick { bottom: initial; right: 0 } .smart-tank .smart-scale-near .smart-label { bottom: initial; right: calc(var(--smart-tank-tick-size) + 2px) } .smart-tank .smart-scale-far .smart-label { left: calc(var(--smart-tank-tick-size) + 2px); top: initial } .smart-tank .smart-tooltip { position: absolute; display: flex; align-items: center; justify-content: center; border: 1px solid var(--smart-border); width: var(--smart-tank-tooltip-width); height: var(--smart-tank-tooltip-height); padding: 5px; background-color: var(--smart-background); color: var(--smart-background-color); opacity: .7; left: calc(-1 * var(--smart-tank-tooltip-width) - 10.5px); top: calc(-1 * var(--smart-tank-tooltip-height)/ 2); z-index: 1 } .smart-tank .smart-tooltip.smart-hidden, .smart-tank:not([animation=none])[disabled] .bubble, .smart-tank:not([animation=none])[inverted] .bubble, .smart-tank:not([animation=none])[orientation=horizontal] .bubble, .smart-tank[ticks-visibility=major] .smart-tick, .smart-tank[ticks-visibility=major] .smart-tick-minor, .smart-tank[ticks-visibility=none] .smart-tick, .smart-tank[ticks-visibility=none] .smart-tick-minor { display: none } .smart-tank .smart-tooltip:before { content: ""; width: 0; height: 0; border-right: none; border-left: 6px solid var(--smart-border); border-top: 6px solid transparent; border-bottom: 6px solid transparent; position: absolute; top: calc(50% - 6px); right: -7px; left: auto } .smart-tank .smart-tooltip-content { overflow: hidden; white-space: nowrap; text-overflow: ellipsis } .smart-tank .smart-tick { position: absolute; background-color: var(--smart-background-color); float: initial; width: var(--smart-tank-tick-size); height: 1px } .smart-tank .smart-tick-minor { width: var(--smart-tank-minor-tick-size); height: 1px } .smart-tank:focus .smart-track { border-style: solid; border-color: var(--smart-outline); border-width: var(--smart-border-width) } .smart-tank:active .smart-track { cursor: n-resize } .smart-tank:not([animation=none]) .smart-value { transition: height .15s ease-out, margin-top .15s ease-out } .smart-tank:not([animation=none]) .smart-value.disable-animation { transition: none } .smart-tank:not([animation=none]) .smart-bubble-container { position: relative; overflow: hidden; touch-action: none; width: 100%; height: 100%; user-select: none } .smart-tank:not([animation=none]) .bubble { user-select: none; pointer-events: none; border-radius: 50%; box-shadow: 0 10px 20px rgba(0, 0, 0, .2), inset 0 10px 25px 5px #fff; width: 50px; height: 50px } .smart-tank:not([animation=none]) .bubble1 { left: 10%; top: 40%; animation: animateBubble 12.5s linear infinite, sideWays 5s ease-in-out infinite alternate; transform: scale(.25) } .smart-tank:not([animation=none]) .bubble2 { left: 5%; top: 35%; animation: animateBubble 15s linear infinite, sideWays 4.5s ease-in-out infinite alternate; transform: scale(.2) } .smart-tank:not([animation=none]) .bubble3 { left: 0; top: 50%; animation: animateBubble 10s linear infinite, sideWays 7s ease-in-out infinite alternate; transform: scale(.3) } .smart-tank:not([animation=none]) .bubble4 { left: 10%; top: 60%; animation: animateBubble 7s linear infinite, sideWays 11s ease-in-out infinite alternate; transform: scale(.275) } .smart-tank:not([animation=none]) .bubble5 { left: 8%; top: 70%; animation: animateBubble 14.5s linear infinite, sideWays 8s ease-in-out infinite alternate; transform: scale(.35) } .smart-tank[disabled] .smart-track.track-hovered, .smart-tank[disabled]:active .smart-track, .smart-tank[readonly] .smart-track.track-hovered, .smart-tank[readonly]:active .smart-track { cursor: default } .smart-tank[inverted] .smart-thumb { top: calc(100% - var(--smart-tank-thumb-height)/ 2); margin-left: initial; margin-top: initial } .smart-tank[inverted] .smart-tooltip { left: calc(-1 * var(--smart-tank-tooltip-width) - 10.5px); top: calc(100% - 1 * var(--smart-tank-tooltip-height)/ 2) } .smart-tank[inverted]:focus .smart-thumb { top: calc(100% - var(--smart-tank-thumb-height)/ 2) } .smart-tank[inverted][tooltip-position=far] .smart-tooltip { top: calc(100% - var(--smart-tank-tooltip-height)/ 2) } .smart-tank[inverted][tooltip-position=far][scale-position=none] .smart-tooltip { left: calc(-100% - 7px) } .smart-tank[inverted][tooltip-position=near] .smart-tooltip { left: calc(-1 * var(--smart-tank-tooltip-width) - 10.5px); top: calc(100% - var(--smart-tank-tooltip-height)/ 2) } .smart-tank[inverted][orientation=vertical] .smart-thumb { top: calc(100% - var(--smart-tank-thumb-height)/ 2) } .smart-tank[ticks-visibility=none] .smart-scale-near .smart-label { right: 2px } .smart-tank[ticks-visibility=none] .smart-scale-far .smart-label { left: 2px; top: initial } .smart-tank[ticks-position=track] .smart-tick { width: 100% } .smart-tank[ticks-position=track] .smart-tick-minor { width: 80%; left: 50%; transform: translateX(-50%) } .smart-tank[ticks-position=track] .smart-scale-near .smart-label { right: 2px } .smart-tank[ticks-position=track] .smart-scale-far .smart-label { left: 2px; top: initial } .smart-tank[tooltip-position=far] .smart-tooltip { left: calc(100% + 10.5px); top: calc(-1 * var(--smart-tank-tooltip-height)/ 2) } .smart-tank[tooltip-position=far] .smart-tooltip:before { border-left: none; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-right: 6px solid var(--smart-border); top: calc(50% - 6px); left: -7px } .smart-tank[show-thumb-label] .smart-thumb { left: calc(-1 * var(--smart-tank-thumb-width)/ 2); overflow: visible; display: initial } .smart-tank[show-thumb-label] .smart-thumb-label { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: .65rem; font-family: var(--smart-font-family); user-select: none; color: var(--smart-background-color) } .smart-tank[show-thumb-label]:focus .smart-thumb { left: calc(-1 * var(--smart-tank-thumb-width) - var(--smart-tank-thumb-width)/ 2 - 2px); transform: scale(1) } .smart-tank[show-thumb-label]:not([animation=none]) .smart-thumb { transition: transform .2s ease-out, left .2s ease-in-out, top .2s ease-in-out } .smart-tank[show-thumb-label][thumb-label-position=far] .smart-thumb { left: calc(100% - var(--smart-tank-thumb-width)/ 2) } .smart-tank[show-thumb-label][orientation=horizontal] .smart-thumb { left: 100%; top: calc(-1 * var(--smart-tank-thumb-width)/ 2) } .smart-tank[show-thumb-label][orientation=horizontal][inverted] .smart-thumb { left: calc(-1 * var(--smart-tank-thumb-width)/ 2) } .smart-tank[show-thumb-label][orientation=horizontal][thumb-label-position=far] .smart-thumb { left: 100%; top: calc(100% - var(--smart-tank-thumb-width)/ 2) } .smart-tank[show-thumb-label][orientation=horizontal][thumb-label-position=far][inverted] .smart-thumb { left: calc(-1 * var(--smart-tank-thumb-width)/ 2) } .smart-tank[show-thumb-label][orientation=horizontal][thumb-label-position=near] .smart-thumb { left: 100%; top: calc(-1 * var(--smart-tank-thumb-width)/ 2) } .smart-tank[thumb-label-position=far] .smart-thumb:before { border: 1px solid var(--smart-primary); border-radius: 50% 50% 50% 0 } .smart-tank[thumb-label-position=far]:focus .smart-thumb { left: calc(100% + var(--smart-tank-thumb-width)/ 2 + 2px) } .smart-tank[scale-position=none] .smart-track { height: 100%; width: 100%; position: relative; border: var(--smart-border) solid; border-width: var(--smart-border-width); margin: 0 } .smart-tank[scale-position=none]:focus .smart-track { border-style: solid; border-color: var(--smart-outline); border-width: var(--smart-border-width) } .smart-tank[scale-position=none][tooltip-position=near] .smart-tooltip { top: calc(-1 * var(--smart-tank-tooltip-height)/ 2) } .smart-tank[scale-position=both] .smart-track { width: calc(100% - 2 * var(--smart-tank-scale-size) - 4px) } .smart-tank[scale-position=both] .smart-scale { width: var(--smart-tank-scale-size); height: 100%; max-width: 47% } .smart-tank[orientation=vertical][thumb-label-position=far] .smart-thumb:before { border: 1px solid var(--smart-primary); border-radius: 50% 50% 50% 0 } .smart-tank[orientation=vertical]:not([animation=none]) .smart-value { transition: height .15s ease-out, margin-top .15s ease-out } .smart-tank[orientation=vertical]:not([animation=none]) .smart-value.disable-animation { transition: none } .smart-tank[orientation=horizontal] { padding-top: 5px; padding-bottom: 5px; padding-left: initial; padding-right: initial } .smart-tank[orientation=horizontal]:active .smart-track { cursor: w-resize } .smart-tank[orientation=horizontal] .smart-track { height: calc(100% - var(--smart-tank-scale-size) - 4px); min-height: var(--smart-tank-minimum-track-size); width: 100%; background-color: transparent; margin-top: 2px; margin-bottom: 2px } .smart-tank[orientation=horizontal] .smart-value { height: 100%; width: 0 } .smart-tank[orientation=horizontal] .smart-thumb { margin-left: calc(-1 * var(--smart-tank-thumb-width)/ 2) } .smart-tank[orientation=horizontal] .smart-thumb:before { border-radius: 50% 50% 0 } .smart-tank[orientation=horizontal] .smart-scale { width: 100%; float: left; height: calc(var(--smart-tank-scale-size)); margin-left: var(--smart-border-width) } .smart-tank[orientation=horizontal] .smart-scale-near .smart-tick { bottom: 0; right: initial } .smart-tank[orientation=horizontal] .smart-scale-near .smart-label { bottom: calc(var(--smart-tank-tick-size) + 2px); right: initial } .smart-tank[orientation=horizontal] .smart-scale-far .smart-tick { top: 0 } .smart-tank[orientation=horizontal] .smart-scale-far .smart-label { top: calc(var(--smart-tank-tick-size) + 2px); left: initial } .smart-tank[orientation=horizontal] .smart-tooltip { top: calc(-1 * var(--smart-tank-tooltip-height) - 12px); left: calc(100% - var(--smart-tank-tooltip-width)/ 2) } .smart-tank[orientation=horizontal] .smart-tooltip:before { content: ""; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid var(--smart-border); position: absolute; top: 100%; left: calc(var(--smart-tank-tooltip-width)/ 2 - 6px) } .smart-tank[orientation=horizontal] .smart-tick { float: left; width: 1px; height: var(--smart-tank-tick-size) } .smart-tank[orientation=horizontal] .smart-tick-minor { height: var(--smart-tank-minor-tick-size); width: 1px } .smart-tank[orientation=horizontal]:not([animation=none]) .smart-value { transition: width .15s ease-out, margin-left .15s ease-out } .smart-tank[orientation=horizontal]:not([animation=none]) .smart-value.disable-animation { transition: none } .smart-tank[orientation=horizontal][inverted] .smart-tooltip { top: calc(-1 * var(--smart-tank-tooltip-height) - 12px); left: calc(-1 * var(--smart-tank-tooltip-width)/ 2) } .smart-tank[orientation=horizontal][inverted]:focus .smart-thumb { left: calc(-1 * var(--smart-tank-thumb-width)/ 2) } .smart-tank[orientation=horizontal][inverted][tooltip-position=far] .smart-tooltip { left: calc(-1 * var(--smart-tank-tooltip-width)/ 2); top: calc(100% + 12px) } .smart-tank[orientation=horizontal][ticks-visibility=none] .smart-scale-near .smart-label { bottom: 2px } .smart-tank[orientation=horizontal][ticks-visibility=none] .smart-scale-far .smart-label { top: 2px; left: initial } .smart-tank[orientation=horizontal][ticks-position=track] .smart-tick { height: 100%; width: 1px } .smart-tank[orientation=horizontal][ticks-position=track] .smart-tick-minor { height: 80%; top: 50%; transform: translateY(-50%) } .smart-tank[orientation=horizontal][ticks-position=track] .smart-scale-near .smart-label { bottom: 2px } .smart-tank[orientation=horizontal][ticks-position=track] .smart-scale-far .smart-label { top: 2px; left: initial } .smart-tank[orientation=horizontal][tooltip-position=near][inverted] .smart-tooltip { top: calc(-1 * var(--smart-tank-tooltip-height) - 12px); left: calc(-1 * var(--smart-tank-tooltip-width)/ 2) } .smart-tank[orientation=horizontal][tooltip-position=far] .smart-tooltip { top: calc(100% + 12px); left: calc(100% - var(--smart-tank-tooltip-width)/ 2) } .smart-tank[orientation=horizontal][tooltip-position=far] .smart-tooltip:before { border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid var(--smart-border); border-top: 0; position: absolute; left: calc(var(--smart-tank-tooltip-width)/ 2 - 6px); top: -7px } .smart-tank[orientation=horizontal][show-thumb-label]:focus .smart-thumb { left: 100%; top: calc(-1 * var(--smart-tank-thumb-height) - var(--smart-tank-thumb-height)/ 2 - 2px) } .smart-tank[orientation=horizontal][show-thumb-label][thumb-label-position=far]:focus .smart-thumb { top: calc(100% + var(--smart-tank-thumb-height)/ 2) } .smart-tank[orientation=horizontal][thumb-label-position=far] .smart-thumb:before { border-radius: 0 50% 50% } .smart-tank[orientation=horizontal][thumb-label-position=far]:focus .smart-thumb { left: 100% } .smart-tank[orientation=horizontal][scale-position=none] .smart-track { height: 100%; width: 100%; position: relative; border: var(--smart-border) solid; border-width: var(--smart-border-width); background-color: transparent; margin-top: 0; margin-bottom: 0 } .smart-tank[orientation=horizontal][scale-position=both] .smart-track { height: calc(100% - 2 * var(--smart-tank-scale-size) - 4px) } .smart-tank[orientation=horizontal][scale-position=both] .smart-scale { width: 100%; height: var(--smart-tank-scale-size) } @keyframes sideWays { 0% { margin-left: -10% } 100% { margin-left: 55% } } @keyframes animateBubble { 0% { margin-top: 100% } 100% { margin-top: -100% } } smart-tank[right-to-left] .smart-label, smart-tank[right-to-left] .smart-tooltip-content { direction: rtl } smart-tank[right-to-left][show-thumb-label][orientation=horizontal] .smart-thumb { left: calc(-1 * var(--smart-tank-thumb-width)/ 2); margin-left: initial } smart-tank[right-to-left][show-thumb-label][orientation=horizontal][inverted] .smart-thumb { left: 100%; margin-left: calc(-1 * var(--smart-tank-thumb-width)/ 2) } smart-tank[right-to-left][show-thumb-label][orientation=horizontal][thumb-label-position=far] .smart-thumb { left: calc(-1 * var(--smart-tank-thumb-width)/ 2) } smart-tank[right-to-left][show-thumb-label][orientation=horizontal][thumb-label-position=far][inverted] .smart-thumb { top: calc(100% - var(--smart-tank-thumb-width)/ 2) } smart-tank[right-to-left][show-thumb-label][orientation=horizontal][thumb-label-position=far][inverted]:focus .smart-thumb { top: calc(100% + var(--smart-tank-thumb-height)/ 2) } smart-tank[right-to-left][show-thumb-label][orientation=horizontal][thumb-label-position=near][inverted] .smart-thumb { top: calc(-1 * var(--smart-tank-thumb-width)/ 2) } smart-tank[right-to-left][show-thumb-label][orientation=horizontal][thumb-label-position=near][inverted]:focus .smart-thumb { top: calc(-1 * var(--smart-tank-thumb-height) - var(--smart-tank-thumb-height)/ 2 - 2px) } .smart-input-drop-down-menu, input.smart-input { font-size: var(--smart-font-size); font-family: var(--smart-font-family) } input.smart-input { border-width: var(--smart-border-width); background: var(--smart-background); border-style: solid; border-color: var(--smart-border); color: var(--smart-background-color); border-top-left-radius: var(--smart-border-top-left-radius); border-top-right-radius: var(--smart-border-top-right-radius); border-bottom-left-radius: var(--smart-border-bottom-left-radius); border-bottom-right-radius: var(--smart-border-bottom-right-radius); padding-left: var(--smart-editor-label-padding); padding-right: var(--smart-editor-label-padding); padding-top: 0; padding-bottom: 0; height: var(--smart-editor-height); outline: 0; text-align: var(--smart-text-box-text-align); box-sizing: border-box } input.smart-input:focus { border-color: var(--smart-outline) } input.smart-input:hover { border-color: var(--smart-ui-state-border-hover) } input.smart-input:disabled { border-color: var(--smart-disabled); outline: 0 } input.smart-input::selection { background: var(--smart-editor-selection); color: var(--smart-editor-selection-color) } textarea.smart-input::selection { background: var(--smart-editor-selection); color: var(--smart-editor-selection-color) } .smart-input-drop-down-menu { display: block; transform: scaleY(0); transform-origin: top left; opacity: 0; position: absolute; top: 100%; left: 0; z-index: var(--smart-editor-drop-down-z-index); float: left; padding: 2px; margin: var(--smart-list-item-vertical-offset) var(--smart-list-item-horizontal-offset); color: var(--smart-background-color); background-color: var(--smart-background); border: 1px solid var(--smart-border); border-top-left-radius: var(--smart-border-top-left-radius); border-top-right-radius: var(--smart-border-top-right-radius); border-bottom-left-radius: var(--smart-border-bottom-left-radius); border-bottom-right-radius: var(--smart-border-bottom-right-radius); box-shadow: var(--smart-elevation-8); overflow: hidden; width: auto; height: auto; --smart-input-drop-down-menu-width: auto; --smart-input-drop-down-menu-height: 200px; min-height: 0 } .smart-input-drop-down-menu:not([animation=none]) { transition: opacity .2s, transform .2s ease-out } .smart-input-drop-down-menu.smart-container { box-shadow: none; padding: 0; margin: 0 } .smart-input-drop-down-menu .smart-scroll-viewer-container, .smart-input-drop-down-menu .smart-scroll-viewer-content-container, .smart-input-drop-down-menu>.smart-container { width: var(--smart-input-drop-down-menu-width); max-height: calc(var(--smart-input-drop-down-menu-height) - 6px) } .smart-input-drop-down-menu .smart-scroll-viewer-content-container { padding: 0; max-height: initial } .smart-input-drop-down-menu ul { list-style: none; padding: 0; margin: 0; width: 100%; height: auto } .smart-input-drop-down-menu ul.scroll { width: calc(100% - var(--smart-scroll-bar-size) - 2px) } .smart-input-drop-down-menu ul li { padding-bottom: 1px } .smart-input-drop-down-menu ul li:last-child { padding-bottom: 0 } .smart-input-drop-down-menu ul li a { display: block; padding: 8px 12px; border-top-left-radius: var(--smart-item-border-top-left-radius); border-top-right-radius: var(--smart-item-border-top-right-radius); border-bottom-left-radius: var(--smart-item-border-bottom-left-radius); border-bottom-right-radius: var(--smart-item-border-bottom-right-radius); clear: both; font-weight: 400; white-space: nowrap; color: var(--smart-background-color); text-decoration: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } .smart-input-drop-down-menu ul li a:hover { color: var(--smart-ui-state-color-hover); background: var(--smart-ui-state-hover) } .smart-input-drop-down-menu ul li a.icon { position: relative; padding-left: var(--smart-column-icon-size) } .smart-input-drop-down-menu ul li a.icon:after { content: ""; position: absolute; left: 0; top: 0; width: var(--smart-column-icon-size); height: 100%; background-repeat: no-repeat; background-position: center } .smart-input-drop-down-menu:not(.smart-check-input-drop-down-menu) li.active a { color: var(--smart-ui-state-color-focus); background: var(--smart-ui-state-focus); text-decoration: none; outline: 0 } .smart-input-drop-down-menu[open] { transform: scale(1); opacity: 1 } .smart-multi-combo-input-scroll-viewer .smart-scroll-viewer-content-container { width: var(--smart-input-drop-down-menu-width); max-height: initial } .smart-multi-combo-input-scroll-viewer .smart-scroll-viewer-container, .smart-multi-combo-input-scroll-viewer>.smart-container { width: var(--smart-input-drop-down-menu-width); max-height: calc(var(--smart-input-drop-down-menu-height) - 6px) } .smart-drop-down smart-list-item[focus] .smart-overlay { background-color: var(--smart-ui-state-focus) } .smart-drop-down smart-list-item[focus] .smart-content { color: var(--smart-ui-state-color-focus); border-color: var(--smart-ui-state-border-focus) } .smart-drop-down smart-list-item[focus][selected] .smart-overlay { background-color: var(--smart-ui-state-selected) } .smart-drop-down smart-list-item[focus][selected] .smart-content { color: var(--smart-ui-state-color-selected); border-color: var(--smart-ui-state-border-selected) } .smart-text-box:focus.hovered input, smart-text-box input:hover, smart-text-box:focus input.hovered, smart-text-box[hover] input { border-color: var(--smart-ui-state-border-hover) } smart-text-box { --smart-outline: var(--smart-primary); display: inline-block; border: none; width: var(--smart-text-box-default-width); height: var(--smart-text-box-default-height); overflow: visible; background: var(--smart-background) } smart-text-box input::selection { background: var(--smart-editor-selection); color: var(--smart-editor-selection-color) } smart-text-box.smart-element { background: var(--smart-background) } smart-text-box[disabled] { border-color: var(--smart-disabled); outline: 0 } smart-text-box input:focus { border-color: var(--smart-outline) } .smart-text-box .smart-container, .smart-text-box input, .smart-text-box.smart-container { width: 100%; height: 100%; color: inherit; font-family: inherit; position: relative; overflow: visible } .smart-text-box>.smart-container>.smart-content { height: 100% } .smart-text-box>.smart-container>.smart-content>div { width: 100%; height: 100%; outline: 0; border-width: var(--smart-border-width); border-style: solid; border-color: var(--smart-border); border-top-left-radius: var(--smart-border-top-left-radius); border-top-right-radius: var(--smart-border-top-right-radius); border-bottom-left-radius: var(--smart-border-bottom-left-radius); border-bottom-right-radius: var(--smart-border-bottom-right-radius); padding: var(--smart-editor-label-padding); color: inherit; font-family: inherit; font-size: inherit; background-color: transparent; font-weight: inherit; font-style: inherit; overflow: hidden } .smart-text-box>.smart-container>.smart-content>div>label { color: transparent } .smart-text-box>.smart-container>.smart-content>div:first-of-type { position: absolute; display: flex; width: initial; height: initial; user-select: none; pointer-events: none; min-height: initial; max-height: initial; align-items: center; padding-top: 1px; padding-bottom: 1px; opacity: .5; text-overflow: ellipsis; white-space: nowrap; border: var(--smart-border-width) solid transparent } .smart-text-box[disabled] input, .smart-text-box[readonly] input { user-select: none; -webkit-user-select: none; -ms-user-select: none; -moz-user-select: none } .smart-text-box .smart-hint, .smart-text-box .smart-label { display: none; position: absolute } .smart-text-box[hint] .smart-hint, .smart-text-box[label] .smart-label { position: absolute; font-size: 12px; width: 100%; display: block; padding: var(--smart-editor-label-padding); text-align: initial; line-height: initial; vertical-align: initial; left: 0; pointer-events: none } .smart-text-box[label] .smart-label { bottom: 100%; user-select: none; -webkit-user-select: none; -ms-user-select: none; -moz-user-select: none } .smart-text-box[hint] .smart-hint { user-select: none; -webkit-user-select: none; -ms-user-select: none; -moz-user-select: none; opacity: 0; transition: opacity .2s cubic-bezier(.4, 0, .6, 1); top: 100%; bottom: initial } smart-input, smart-text-area { display: inline-block; background: var(--smart-background); overflow: visible } .smart-text-box[hint][focus] .smart-hint { opacity: 1; transition: opacity .2s cubic-bezier(.4, 0, .2, 1) } .smart-text-box .smart-drop-down { font-family: inherit } .smart-text-box[right-to-left] .smart-hint, .smart-text-box[right-to-left] .smart-label, .smart-text-box[right-to-left]>.smart-container>.smart-content { direction: rtl } smart-text-area { --smart-outline: var(--smart-primary); width: var(--smart-text-box-default-width); border: 1px solid var(--smart-border); border-top-left-radius: var(--smart-border-top-left-radius); border-top-right-radius: var(--smart-border-top-right-radius); border-bottom-left-radius: var(--smart-border-bottom-left-radius); border-bottom-right-radius: var(--smart-border-bottom-right-radius); height: calc(1.5 * var(--smart-text-box-default-height)) } smart-text-area textarea { margin: 0; resize: none } smart-text-area textarea.smart-input { border: none; text-overflow: ellipsis } .smart-text-area .smart-container { width: 100%; height: 100%; color: inherit; font-family: inherit; position: relative; overflow: visible } .smart-text-area textarea.smart-input { font-family: var(--smart-font-family); font-size: var(--smart-font-size); background: var(--smart-background); color: var(--smart-background-color); border-top-left-radius: var(--smart-border-top-left-radius); border-top-right-radius: var(--smart-border-top-right-radius); border-bottom-left-radius: var(--smart-border-bottom-left-radius); border-bottom-right-radius: var(--smart-border-bottom-right-radius); padding-top: 0; padding-bottom: 0; padding: var(--smart-editor-label-padding); outline: 0; text-align: var(--smart-text-box-text-align); box-sizing: border-box; border: none; height: 100%; width: 100% } smart-input { --smart-outline: var(--smart-primary); width: var(--smart-text-box-default-width); height: var(--smart-text-box-default-height); border: 1px solid var(--smart-border); border-top-left-radius: var(--smart-border-top-left-radius); border-top-right-radius: var(--smart-border-top-right-radius); border-bottom-left-radius: var(--smart-border-bottom-left-radius); border-bottom-right-radius: var(--smart-border-bottom-right-radius) } smart-input>option { display: none } .smart-input.smart-container, smart-input>.smart-container { display: flex } smart-input.smart-element { background: var(--smart-background) } smart-input input::selection { background: var(--smart-editor-selection); color: var(--smart-editor-selection-color) } smart-input input.smart-input { border: none; text-overflow: ellipsis } smart-input:focus { border-color: var(--smart-outline) } smart-input:hover { border-color: var(--smart-ui-state-border-hover) } smart-input[disabled] { border-color: var(--smart-disabled); outline: 0 } smart-input[drop-down-button-position=right] .smart-input { width: calc(100% - var(--smart-editor-addon-width)) } .smart-input .smart-container, .smart-input.smart-container { width: 100%; height: 100%; color: inherit; font-family: inherit; position: relative; overflow: visible } .smart-input .smart-drop-down-button, .smart-input[readonly]:not(.underlined):not(.outlined):not([opened]):not(:active) input.smart-input, .smart-input[readonly]:not(.underlined):not(.outlined):not([opened]):not(:active) textarea.smart-input { background: var(--smart-surface); color: var(--smart-surface-color) } .smart-input .smart-drop-down-button { display: none; width: var(--smart-editor-addon-width); height: 100%; flex-direction: column; border-left: 1px solid var(--smart-border); border-top-right-radius: var(--smart-border-top-right-radius); border-bottom-right-radius: var(--smart-border-bottom-right-radius); outline: 0 } .smart-input .smart-drop-down-button .arrow { display: flex; height: 100%; overflow: hidden; cursor: pointer; font-family: var(--smart-font-family-icon); justify-content: center; align-items: center; font-size: var(--smart-arrow-size); outline: 0 } .smart-input .smart-drop-down-button .arrow:after { content: var(--smart-icon-arrow-down); transition: opacity .2s, transform .2s ease-out } .smart-input .smart-drop-down-button[open] .arrow:after { transform: rotate(-180deg) } .smart-input .smart-input { border: none; padding: var(--smart-editor-label-padding); height: 100%; width: 100% } .smart-input[drop-down-button-position=left] .smart-drop-down-button, .smart-input[drop-down-button-position=right] .smart-drop-down-button { display: flex } .smart-input[drop-down-button-position=left] .smart-input, .smart-input[drop-down-button-position=right] .smart-input { width: calc(100% - var(--smart-editor-addon-width)) } .smart-input[drop-down-button-position=left][disabled] .smart-drop-down-button, .smart-input[drop-down-button-position=right][disabled] .smart-drop-down-button { opacity: .5 } .smart-input[drop-down-button-position=left] .smart-drop-down-button { order: -1; border-right: 1px solid var(--smart-border); border-left: none; border-top-right-radius: 0; border-bottom-right-radius: 0; border-top-left-radius: var(--smart-border-top-left-radius); border-bottom-left-radius: var(--smart-border-bottom-left-radius) } .smart-input[drop-down-button-position=left] .smart-input, .smart-input[right-to-left][drop-down-button-position=right] .smart-input { border-top-left-radius: 0; border-bottom-left-radius: 0 } .smart-input[drop-down-button-position=left][readonly] .smart-drop-down-button { border-right: none } .smart-input[drop-down-button-position=right] .smart-input { border-top-right-radius: 0; border-bottom-right-radius: 0 } .smart-input[focus], .smart-input[focus]:not([disabled]) .smart-drop-down-button { border-color: var(--smart-outline) } .smart-input[readonly] .smart-drop-down-button { border-left: none } .smart-input[readonly]:not(.underlined):not(.outlined) input.smart-input, .smart-input[readonly]:not(.underlined):not(.outlined) textarea.smart-input { padding: 0; cursor: pointer; padding-left: var(--smart-editor-label-padding); outline: 0 } .smart-input:not([disabled]) .smart-drop-down-button:hover, .smart-input:not([disabled])[readonly]:hover .smart-drop-down-button, .smart-input:not([disabled])[readonly]:hover .smart-input { background: var(--smart-ui-state-hover); color: var(--smart-ui-state-color-hover) } .smart-input:not([disabled]) .smart-drop-down-button:active, .smart-input:not([disabled]) .smart-drop-down-button[open], .smart-input:not([disabled])[readonly]:active .smart-drop-down-button, .smart-input:not([disabled])[readonly]:active .smart-input, .smart-input:not([disabled])[readonly][open] .smart-drop-down-button, .smart-input:not([disabled])[readonly][open] .smart-input { background: var(--smart-ui-state-active); color: var(--smart-ui-state-color-active) } smart-number-input, smart-number-input.smart-element { background: var(--smart-background) } .smart-input:not([disabled])[readonly]:active .smart-input::-webkit-input-placeholder, .smart-input:not([disabled])[readonly][open] .smart-input::-webkit-input-placeholder { color: var(--smart-ui-state-color-active) } .smart-input:not([disabled])[readonly]:active .smart-input::-moz-placeholder, .smart-input:not([disabled])[readonly][open] .smart-input::-moz-placeholder { color: var(--smart-ui-state-color-active) } .smart-input[disabled] .smart-drop-down-button .arrow { cursor: initial } .smart-input[right-to-left] .smart-input { direction: rtl } .smart-input[right-to-left][readonly] .smart-drop-down-button { border-right: none; border-top-right-radius: 0; border-bottom-right-radius: 0 } .smart-input[right-to-left][readonly] .smart-input, .smart-input[right-to-left][readonly]:not(.underlined):not(.outlined) .smart-input { padding-left: initial; padding-right: var(--smart-editor-label-padding) } .smart-input-drop-down-menu[right-to-left] ul.scroll { width: 100% } .smart-input-drop-down-menu[right-to-left] li a.icon { padding-left: initial; padding-right: var(--smart-column-icon-size) } .smart-input-drop-down-menu[right-to-left] li a.icon:after { left: initial; right: 0 } smart-number-input { --smart-outline: var(--smart-primary); display: inline-block; width: var(--smart-text-box-default-width); height: var(--smart-text-box-default-height); overflow: visible; border: 1px solid var(--smart-border); border-top-left-radius: var(--smart-border-top-left-radius); border-top-right-radius: var(--smart-border-top-right-radius); border-bottom-left-radius: var(--smart-border-bottom-left-radius); border-bottom-right-radius: var(--smart-border-bottom-right-radius); text-align: right } smart-number-input>.smart-container { display: flex } .smart-number-input .nav, .smart-number-input .nav.smart-drop-down-button:active, .smart-number-input .nav.smart-drop-down-button:hover, .smart-number-input .nav:active, .smart-number-input .nav:hover { background: var(--smart-surface); color: var(--smart-surface-color) } smart-number-input input.smart-input { border: none; text-overflow: ellipsis } .smart-multi-combo-input-drop-down-menu .smart-select-all, .smart-number-input .nav .up { border-bottom: var(--smart-border-width) solid var(--smart-border) } smart-number-input[drop-down-button-position=right] .smart-input { width: calc(100% - var(--smart-editor-addon-width)) } .smart-number-input .nav { display: flex; width: var(--smart-editor-addon-width); height: 100%; flex-direction: column; border-left: 1px solid var(--smart-border) } smart-multi-input, smart-password-input { width: var(--smart-text-box-default-width) } .smart-number-input .nav .down, .smart-number-input .nav .up { display: flex; height: 50%; overflow: hidden; cursor: pointer; font-family: var(--smart-font-family-icon); justify-content: center; align-items: center; outline: 0 } .smart-check-input .smart-container, .smart-multi-combo-input .smart-container, .smart-multi-input .smart-container, .smart-password-input .smart-container { font-family: inherit; position: relative; overflow: visible } .smart-number-input .nav .down:hover, .smart-number-input .nav .up:hover { background: var(--smart-ui-state-hover); color: var(--smart-ui-state-color-hover) } .smart-number-input .nav .down:active, .smart-number-input .nav .down[active], .smart-number-input .nav .up:active, .smart-number-input .nav .up[active] { background: var(--smart-ui-state-active); color: var(--smart-ui-state-color-active) } smart-password-input, smart-password-input.smart-element { background: var(--smart-background) } .smart-number-input .nav .up:after { content: var(--smart-icon-arrow-up) } .smart-number-input .nav .down:after { content: var(--smart-icon-arrow-down) } .smart-number-input[disabled] .nav .down, .smart-number-input[disabled] .nav .up { pointer-events: none } .smart-number-input[right-to-left]>.smart-container { direction: rtl } .smart-number-input[right-to-left] .nav { border-left: initial; border-right: var(--smart-border-width) solid var(--smart-border); border-top-left-radius: var(--smart-border-top-right-radius); border-bottom-left-radius: var(--smart-border-bottom-right-radius); border-top-right-radius: initial; border-bottom-right-radius: initial; order: initial } .smart-number-input[right-to-left] .smart-input { border-top-left-radius: initial; border-bottom-left-radius: initial; border-top-right-radius: var(--smart-border-top-right-radius); border-bottom-right-radius: var(--smart-border-bottom-right-radius) } .smart-number-input[right-to-left][focus] .nav { border-color: var(--smart-outline) } smart-password-input { --smart-outline: var(--smart-primary); display: inline-block; height: var(--smart-text-box-default-height); overflow: visible; border: 1px solid var(--smart-border); border-top-left-radius: var(--smart-border-top-left-radius); border-top-right-radius: var(--smart-border-top-right-radius); border-bottom-left-radius: var(--smart-border-bottom-left-radius); border-bottom-right-radius: var(--smart-border-bottom-right-radius) } smart-password-input>.smart-container { display: flex } smart-password-input input.smart-input { border: none; text-overflow: ellipsis } .smart-password-input input::-ms-clear, .smart-password-input input::-ms-reveal { display: none } .smart-password-input .smart-container { width: 100%; height: 100%; color: inherit } .smart-password-input .smart-drop-down-button { background: 0 0; border-color: transparent; display: block; border-left: none } .smart-password-input .smart-drop-down-button:active, .smart-password-input .smart-drop-down-button:hover, .smart-password-input .smart-drop-down-button[active] { color: var(--smart-primary) !important; background: 0 0 !important; border-color: transparent !important } smart-multi-input, smart-multi-input.smart-element { background: var(--smart-background) } .smart-password-input .smart-drop-down-button .arrow:after { color: var(--smart-background-color); content: var(--smart-icon-visibility) } .smart-password-input .smart-drop-down-button .arrow.off:after { color: var(--smart-background-color); content: var(--smart-icon-visibility-off) } smart-multi-input { --smart-outline: var(--smart-primary); display: inline-block; height: var(--smart-text-box-default-height); overflow: visible; border: 1px solid var(--smart-border); border-top-left-radius: var(--smart-border-top-left-radius); border-top-right-radius: var(--smart-border-top-right-radius); border-bottom-left-radius: var(--smart-border-bottom-left-radius); border-bottom-right-radius: var(--smart-border-bottom-right-radius) } smart-multi-input>option { display: none } smart-multi-input>.smart-container { display: flex } smart-multi-input input::selection { background: var(--smart-editor-selection); color: var(--smart-editor-selection-color) } smart-multi-input input.smart-input { border: none; text-overflow: ellipsis } smart-multi-input:focus, smart-multi-input[focus] { border-color: var(--smart-outline) } smart-multi-input:hover { border-color: var(--smart-ui-state-border-hover) } smart-multi-input[disabled] { border-color: var(--smart-disabled); outline: 0 } smart-multi-input[drop-down-button-position=left] .smart-input, smart-multi-input[drop-down-button-position=right] .smart-input { width: calc(100% - var(--smart-editor-addon-width)) } .smart-multi-input .smart-container { width: 100%; height: 100%; color: inherit } .smart-multi-input-drop-down-menu li a { border-left: var(--smart-border-width) solid transparent } .smart-multi-input-drop-down-menu:not(.smart-check-input-drop-down-menu) li.active a { border-left: var(--smart-border-width) solid var(--smart-primary); border-top-left-radius: 0; border-bottom-left-radius: 0; color: var(--smart-ui-state-color-selected); background: var(--smart-ui-state-selected) } smart-multi-combo-input, smart-multi-combo-input.smart-element { background: var(--smart-background) } .smart-multi-input-drop-down-menu[right-to-left] li a { border-left: none; border-right: var(--smart-border-width) solid transparent } .smart-multi-input-drop-down-menu[right-to-left]:not(.smart-check-input-drop-down-menu) li.active a { border-left: var(--smart-border-width) solid transparent; border-right: var(--smart-border-width) solid var(--smart-primary); border-top-left-radius: var(--smart-border-top-left-radius); border-bottom-left-radius: var(--smart-border-bottom-left-radius); border-top-right-radius: 0; border-bottom-right-radius: 0 } smart-multi-combo-input { --smart-outline: var(--smart-primary); display: inline-block; width: var(--smart-text-box-default-width); height: var(--smart-text-box-default-height); overflow: visible; border: 1px solid var(--smart-border); border-top-left-radius: var(--smart-border-top-left-radius); border-top-right-radius: var(--smart-border-top-right-radius); border-bottom-left-radius: var(--smart-border-bottom-left-radius); border-bottom-right-radius: var(--smart-border-bottom-right-radius) } smart-multi-combo-input>option { display: none } smart-multi-combo-input>.smart-container { display: flex } smart-multi-combo-input input::selection { background: var(--smart-editor-selection); color: var(--smart-editor-selection-color) } smart-multi-combo-input input.smart-input { border: none; text-overflow: ellipsis } smart-multi-combo-input:hover { border-color: var(--smart-ui-state-border-hover) } smart-multi-combo-input[focus] { border-color: var(--smart-outline) } .smart-multi-combo-input { height: var(--smart-editor-height); min-height: var(--smart-editor-height) } .smart-multi-combo-input:not([input-tags-mode=one]):not(.smart-grid-cell-editor) { height: auto !important } .smart-multi-combo-input .smart-container { width: 100%; height: 100%; color: inherit } .smart-multi-combo-input .smart-drop-down-button, .smart-multi-combo-input .smart-drop-down-button .arrow, .smart-multi-combo-input>.smart-container { min-height: var(--smart-editor-height) } .smart-multi-combo-input .smart-token { position: relative; white-space: nowrap; text-overflow: ellipsis; cursor: pointer; user-select: none; display: flex; align-items: center; padding: 1px 6px; border-radius: 20px; background-color: var(--smart-primary); color: var(--smart-primary-color); margin: var(--smart-editor-label-padding) 0 0 var(--smart-editor-label-padding); height: 22px } .smart-multi-combo-input .smart-token .smart-drop-down-list-selection-label { text-overflow: ellipsis; overflow: hidden } .smart-multi-combo-input .smart-token .smart-drop-down-list-selection-image { display: flex; justify-content: center; align-items: center; border-radius: 50%; width: 20px; height: 20px; background-position: center; background-repeat: no-repeat; background-size: cover; margin-right: 4px } .smart-multi-combo-input .smart-action-button { display: flex; outline: transparent solid 1px; height: 100%; width: 100%; flex-wrap: wrap; overflow: hidden; position: relative; user-select: none; border-top-left-radius: var(--smart-border-top-left-radius); border-bottom-left-radius: var(--smart-border-bottom-left-radius); min-height: var(--smart-editor-height) } .smart-multi-combo-input .smart-drop-down-list-unselect-button { position: relative; margin-left: 2px; margin-right: -2px } .smart-multi-combo-input .smart-drop-down-list-unselect-button:after { content: var(--smart-icon-close); display: flex; justify-content: center; align-items: center; transform-origin: center; font-family: var(--smart-font-family-icon); background: rgba(var(--smart-primary-rgb), .2); border-radius: 50%; width: 20px; height: 20px } .smart-multi-combo-input.smart-input .smart-input { flex-grow: 1; align-self: center; width: var(--smart-editor-addon-width); min-width: var(--smart-editor-addon-width); min-height: 100%; max-height: 1rem; vertical-align: middle; margin: 0 } .smart-multi-combo-input.smart-input .smart-drop-down-button { height: initial } .smart-multi-combo-input[drop-down-button-position=left] .smart-action-button, .smart-multi-combo-input[drop-down-button-position=right] .smart-action-button { width: calc(100% - var(--smart-editor-addon-width)) } .smart-multi-combo-input[input-tags-mode=one] .smart-action-button { align-items: center } .smart-multi-combo-input[readonly] .smart-input { visibility: hidden } .smart-multi-combo-input[readonly]:hover .smart-action-button { background: var(--smart-ui-state-hover); color: var(--smart-ui-state-color-hover) } .smart-multi-combo-input[hide-input-tags-close-button] .smart-drop-down-list-unselect-button:after { display: none } .smart-multi-combo-input[right-to-left] .smart-token { margin: var(--smart-editor-label-padding) var(--smart-editor-label-padding) 0 0; padding: 1px 6px 1px 2px } .smart-multi-combo-input[right-to-left] .smart-token:last-of-type { margin: var(--smart-editor-label-padding) var(--smart-editor-label-padding) var(--smart-editor-label-padding) 0 } .smart-multi-combo-input[right-to-left] .smart-action-button { direction: rtl } .smart-multi-combo-input[right-to-left] .smart-drop-down-list-unselect-button { margin: 0 5px 0 0 } .smart-multi-combo-input-drop-down-menu .smart-scroll-viewer { width: inherit; height: inherit; padding: initial; min-height: inherit; border: initial } .smart-multi-combo-input-drop-down-menu .close-button:after { font-family: var(--smart-font-family-icon); content: var(--smart-icon-close); margin-left: 5px } .smart-multi-combo-input-drop-down-menu .add-new-item { display: grid; grid-template-columns: 1fr var(--smart-text-box-default-height); grid-column-gap: 5px; margin-left: 7px; margin-right: 7px; height: 36px } .smart-multi-combo-input-drop-down-menu .add-new-item input { height: 30px } .smart-multi-combo-input-drop-down-menu .add-new-item smart-button { justify-content: center; align-content: center; height: 30px } .smart-multi-combo-input-drop-down-menu .add-new-item button { padding: 0; display: flex; align-items: center; justify-content: center } .smart-multi-combo-input-drop-down-menu .add-new-item button:after { font-family: var(--smart-font-family-icon); content: var(--smart-icon-plus) } .smart-multi-combo-input-drop-down-menu .smart-select-all { height: auto } .smart-multi-combo-input-drop-down-menu[right-to-left]>ul { direction: rtl } .smart-multi-combo-input-drop-down-menu ul li a { display: flex; align-items: center } .smart-multi-combo-input-drop-down-menu ul li a .smart-drop-down-list-selection-image { display: flex; justify-content: center; align-items: center; width: 25px; height: 25px; background-position: center; background-repeat: no-repeat; background-size: cover; margin-right: 4px; border-radius: 50%; border: 1px solid var(--smart-border) } .smart-multi-combo-input-drop-down-menu[pills] ul li:after, .smart-multi-combo-input-drop-down-menu[pills] ul li:before, .smart-multi-combo-input-drop-down-menu[single-select] ul li.selected:after, .smart-multi-combo-input-drop-down-menu[single-select] ul li::after, .smart-multi-combo-input-drop-down-menu[single-select] ul li:hover:after { display: none } .smart-multi-combo-input-drop-down-menu[single-select] ul li { height: 36px; margin-top: 1px; cursor: pointer } .smart-multi-combo-input-drop-down-menu[single-select] ul li a { padding: 0 0 0 6px; height: 100% } .smart-multi-combo-input-drop-down-menu[single-select] ul li.selected, .smart-multi-combo-input-drop-down-menu[single-select] ul li:hover { background: var(--smart-ui-state-hover); border-color: var(--smart-ui-state-hover); color: var(--smart-ui-state-color-hover) } .smart-multi-combo-input-drop-down-menu[pills] ul li { height: 30px; margin-top: 1px } .smart-multi-combo-input-drop-down-menu[pills] ul li a { padding: 2px 10px; color: inherit; display: inline-flex; align-items: center; border-radius: 15px !important; margin-top: 5px; margin-left: 5px; height: auto; background: var(--smart-primary); border-color: var(--smart-primary); color: var(--smart-primary-color) } .smart-multi-combo-input-drop-down-menu[pills] ul li a .smart-drop-down-list-selection-image { height: 20px; width: 20px } .smart-multi-combo-input-drop-down-menu[pills] ul li.focused a { background: var(--smart-primary) !important; border-color: var(--smart-primary) !important; color: var(--smart-primary-color) !important } .smart-multi-combo-input-drop-down-menu[pills] ul li.focused, .smart-multi-combo-input-drop-down-menu[pills] ul li.selected, .smart-multi-combo-input-drop-down-menu[pills] ul li:hover { background: var(--smart-ui-state-hover); border-color: var(--smart-ui-state-hover); color: var(--smart-ui-state-color-hover) } smart-check-input, smart-check-input.smart-element { background: var(--smart-background) } .smart-multi-combo-input-drop-down-menu[pills] ul li.active.selected:before, .smart-multi-combo-input-drop-down-menu[pills] ul li.focused:after, .smart-multi-combo-input-drop-down-menu[pills] ul li.selected:after, .smart-multi-combo-input-drop-down-menu[pills] ul li:hover:after { display: none } smart-check-input { --smart-outline: var(--smart-primary); display: inline-block; width: var(--smart-text-box-default-width); height: var(--smart-text-box-default-height); overflow: visible; border: 1px solid var(--smart-border); border-top-left-radius: var(--smart-border-top-left-radius); border-top-right-radius: var(--smart-border-top-right-radius); border-bottom-left-radius: var(--smart-border-bottom-left-radius); border-bottom-right-radius: var(--smart-border-bottom-right-radius) } smart-check-input>option { display: none } smart-check-input>.smart-container { display: flex } smart-check-input input::selection { background: var(--smart-editor-selection); color: var(--smart-editor-selection-color) } smart-check-input input.smart-input { border: none; text-overflow: ellipsis } smart-check-input:hover { border-color: var(--smart-ui-state-border-hover) } smart-check-input[disabled] { border-color: var(--smart-disabled); outline: 0 } smart-check-input:focus, smart-check-input[focus] { border-color: var(--smart-outline) } smart-check-input[drop-down-button-position=left] .smart-input, smart-check-input[drop-down-button-position=right] .smart-input { width: calc(100% - var(--smart-editor-addon-width)) } .smart-check-input .smart-container { width: 100%; height: 100%; color: inherit } .smart-check-input-drop-down-menu ul li { position: relative } .smart-check-input-drop-down-menu ul li:before { content: ""; transform: scale(0); background-color: #fff } .smart-check-input-drop-down-menu ul li:after { content: ""; position: absolute; border: var(--smart-border-width) solid var(--smart-border); border-top-left-radius: var(--smart-border-top-left-radius); border-top-right-radius: var(--smart-border-top-right-radius); border-bottom-left-radius: var(--smart-border-bottom-left-radius); border-bottom-right-radius: var(--smart-border-bottom-right-radius); width: var(--smart-check-box-default-size); height: var(--smart-check-box-default-size); padding: 1px; margin-left: 10px; font-family: var(--smart-font-family-icon); justify-content: center; align-items: center; display: flex; top: 50%; transform: translateY(-50%); pointer-events: none; box-sizing: content-box } .smart-check-input-drop-down-menu ul li a { padding-left: calc(var(--smart-tree-indent) + 25px) } .smart-check-input-drop-down-menu ul li.selected:after { content: var(--smart-icon-check); background: var(--smart-primary); border-color: var(--smart-primary); color: var(--smart-primary-color) } .smart-check-input-drop-down-menu ul li.active.selected:before { position: absolute; content: ""; border-radius: 50%; width: calc(var(--smart-check-box-default-size) + 16px); height: calc(var(--smart-check-box-default-size) + 16px); background: var(--smart-primary); opacity: .3; margin-left: 4px; top: 50%; transform: scale(1) translateY(-50%); transform-origin: top } smart-color-input, smart-date-input, smart-date-range-input, smart-time-input { width: var(--smart-text-box-default-width); height: var(--smart-text-box-default-height); display: inline-block } .smart-check-input-drop-down-menu ul li.active.focused a { border-left: var(--smart-border-width) solid var(--smart-primary); border-top-left-radius: 0; border-bottom-left-radius: 0; color: var(--smart-ui-state-color-selected); background: var(--smart-ui-state-selected) } .smart-check-input-drop-down-menu ul li[indeterminate]:after { background-color: var(--smart-ui-state-selected); padding: 2px; background-clip: content-box } .smart-check-input-drop-down-menu[inverted] ul li a, .smart-check-input-drop-down-menu[right-to-left] ul li a { padding-left: 10px; padding-right: calc(var(--smart-tree-indent) + 25px) } .smart-check-input-drop-down-menu[inverted] ul li:after { margin-left: initial; margin-right: 10px; right: 0 } .smart-check-input-drop-down-menu[inverted] ul li.selected:before { right: 0 } .smart-check-input-drop-down-menu[inverted] ul li.active.selected:before { margin-left: initial; margin-right: 4px } .smart-check-input-drop-down-menu:not([animation=none]) ul li:before { transition: transform .25s ease-in-out } .smart-check-input-drop-down-menu[right-to-left] ul li:after { margin-left: initial; margin-right: 10px } .smart-check-input-drop-down-menu[right-to-left] ul li.active.focused a { border-left: var(--smart-border-width) solid transparent; border-right: var(--smart-border-width) solid var(--smart-primary); border-top-left-radius: var(--smart-border-top-left-radius); border-bottom-left-radius: var(--smart-border-bottom-left-radius); border-top-right-radius: 0; border-bottom-right-radius: 0 } .smart-check-input-drop-down-menu[right-to-left] ul li.active.selected:before { margin-left: initial; margin-right: 4px } .smart-check-input-drop-down-menu[right-to-left][pills] ul li a { padding-right: initial } smart-color-input { --smart-outline: var(--smart-primary); border: none; overflow: visible; background: var(--smart-background) } smart-color-input[value-display-mode=colorBox] .smart-action-button { cursor: pointer } smart-date-input, smart-date-range-input, smart-time-input { --smart-outline: var(--smart-primary); background: var(--smart-background); border: 1px solid var(--smart-border); border-top-left-radius: var(--smart-border-top-left-radius); border-top-right-radius: var(--smart-border-top-right-radius); border-bottom-left-radius: var(--smart-border-bottom-left-radius); border-bottom-right-radius: var(--smart-border-bottom-right-radius); overflow: hidden } smart-date-input>.smart-container, smart-date-range-input>.smart-container, smart-time-input>.smart-container { display: flex } smart-date-input.smart-element, smart-date-range-input.smart-element, smart-time-input.smart-element { background: var(--smart-background) } smart-date-input[drop-down-button-position=left] .smart-input, smart-date-input[drop-down-button-position=right] .smart-input, smart-date-range-input[drop-down-button-position=left] .smart-input, smart-date-range-input[drop-down-button-position=right] .smart-input, smart-time-input[drop-down-button-position=left] .smart-input, smart-time-input[drop-down-button-position=right] .smart-input { width: calc(100% - var(--smart-editor-addon-width)) } smart-date-range-input input::selection { background: var(--smart-editor-selection); color: var(--smart-editor-selection-color) } smart-date-range-input input.smart-input { border: none; text-overflow: ellipsis } smart-date-range-input:focus, smart-date-range-input[focus] { border-color: var(--smart-outline) } .smart-time-box { display: block; height: auto; width: 300px; overflow: hidden } .smart-time-box .smart-timepicker { display: grid; grid-template-columns: 60% 35%; grid-column-gap: 5%; background: var(--smart-background); padding: 10px; border-color: var(--smart-border) } .smart-time-box[right-to-left] .smart-timepicker { direction: rtl } .smart-time-input.smart-input .smart-drop-down-button .arrow:after, .smart-time-input.smart-input .smart-drop-down-button[open] .arrow:after { content: var(--smart-icon-clock); transform: rotate(0) } .smart-timepicker .hour-selection, .smart-timepicker .minute-selection { display: grid; grid-template-columns: repeat(5, 20%); grid-template-rows: repeat(6, auto); justify-content: center; align-items: center; justify-items: center; position: relative; cursor: default } .smart-timepicker .hour-selection .smart-calendar-cell, .smart-timepicker .minute-selection .smart-calendar-cell { margin: initial; line-height: var(--smart-calendar-cell-size); display: flex; justify-content: center; align-items: center; width: 32px; height: 32px; box-sizing: border-box; border-radius: 100% } .smart-date-range-input-drop-down-menu .smart-done-button, .smart-date-range-input-drop-down-menu .smart-today-button, .smart-date-range-input-drop-down-menu smart-button:last-of-type { margin-right: 5px } .smart-timepicker .hour-selection .header, .smart-timepicker .minute-selection .header { content: attr(header-label); width: 100%; display: flex; justify-content: center; align-items: center; grid-row: 1/3; grid-column: 1/6; font-weight: 600; height: var(--smart-calendar-cell-size); line-height: calc(var(--smart-calendar-cell-size) - 2px) } .smart-timepicker .minute-selection { border-right: var(--smart-border-width) solid var(--smart-border); grid-template-columns: repeat(2, 50%); border-left: var(--smart-border-width) solid var(--smart-border) } .smart-timepicker .minute-selection .header { grid-column: span 2 } .smart-timepicker .hour-selection:after, .smart-timepicker .hour-selection:before { content: attr(am-label); width: 100%; display: flex; justify-content: center; grid-column: 1; font-weight: 600; height: var(--smart-calendar-cell-size); line-height: calc(var(--smart-calendar-cell-size) - 2px) } .smart-date-range-input-drop-down-menu .smart-button-controls, .smart-date-range-input-drop-down-menu .smart-timepicker-button:empty, .smart-date-range-input-drop-down-menu .smart-timepicker-buttons { display: none } .smart-timepicker .hour-selection:after { content: attr(pm-label); grid-row: 4/9 } .smart-date-input.smart-input .smart-drop-down-button .arrow:after, .smart-date-input.smart-input .smart-drop-down-button[open] .arrow:after, .smart-date-range-input.smart-input .smart-drop-down-button .arrow:after, .smart-date-range-input.smart-input .smart-drop-down-button[open] .arrow:after { content: var(--smart-icon-calendar); transform: rotate(0) } .smart-date-range-input .smart-container { width: 100%; height: 100%; color: inherit; font-family: inherit; position: relative; overflow: visible } .smart-date-range-input-drop-down-menu smart-button:first-of-type { margin-left: 5px } .smart-date-range-input-drop-down-menu .smart-calendar { height: 100%; min-width: 100%; --smart-calendar-default-height: auto; --smart-calendar-footer-height: 0px } .smart-date-range-input-drop-down-menu .smart-clear-button, .smart-date-range-input-drop-down-menu .smart-done-button, .smart-date-range-input-drop-down-menu .smart-today-button { height: auto; --smart-button-padding: 5px } .smart-date-range-input-drop-down-menu .smart-calendar-footer { flex-direction: column } .smart-date-range-input-drop-down-menu .smart-date-range-input-footer-controls { width: 100%; height: 100% } .smart-date-range-input-drop-down-menu .smart-timepicker-button { position: relative; white-space: nowrap } .smart-date-range-input-drop-down-menu .smart-timepicker-button:before { content: var(--smart-icon-clock); height: 100%; font-family: var(--smart-font-family-icon); font-weight: var(--smart-font-weight); font-size: var(--smart-arrow-size); margin: 0 var(--smart-editor-label-padding) } .smart-date-range-input-drop-down-menu .smart-timepicker-button:hover { color: var(--smart-ui-state-color-hover); border-color: var(--smart-ui-state-hover); background-color: var(--smart-ui-state-hover); transition: background-color .1s linear, color .1s ease-in-out; opacity: var(--smart-button-opacity-hover); cursor: pointer } .smart-date-range-input-drop-down-menu .smart-timepicker-button[selected] { color: var(--smart-ui-state-color-selected) } .smart-date-range-input-drop-down-menu .smart-icon-today:before { content: var(--smart-icon-calendar) } .smart-date-range-input-drop-down-menu .smart-icon-clear:before { content: var(--smart-icon-cancel) } .smart-date-range-input-drop-down-menu .smart-timepicker { position: absolute; top: 0; display: grid; grid-template-columns: 60% 35%; height: calc(100% - var(--smart-calendar-footer-height)); width: 100%; grid-column-gap: 5%; background: var(--smart-background); box-sizing: border-box; padding: 10px; border-color: var(--smart-border); border-top-left-radius: var(--smart-border-top-left-radius); border-top-right-radius: var(--smart-border-top-right-radius); border-bottom-left-radius: var(--smart-border-bottom-left-radius); border-bottom-right-radius: var(--smart-border-bottom-right-radius); border-width: var(--smart-border-width); border-style: solid; border-bottom: none } .smart-date-range-input-drop-down-menu[icons] smart-calendar, .smart-date-range-input-drop-down-menu[timepicker] smart-calendar { --smart-calendar-footer-height: 30px } .smart-date-range-input-drop-down-menu[icons] .smart-timepicker-buttons, .smart-date-range-input-drop-down-menu[timepicker] .smart-timepicker-buttons { display: flex; justify-content: space-around; width: 100%; height: 100%; align-items: center } .smart-date-range-input-drop-down-menu[timepicker][icons] .smart-date-range-input-footer-controls { display: grid; grid-template-columns: 60% 38%; grid-column-gap: 2%; justify-items: center } .smart-date-range-input-drop-down-menu.smart-input-drop-down-menu { height: auto; width: var(--smart-input-drop-down-menu-width) } .smart-date-range-input-drop-down-menu.smart-input-drop-down-menu.smart-date-input-drop-down-menu { height: 250px } .smart-date-range-input-drop-down-menu:not([timepicker]) .smart-timepicker-buttons { display: none } .smart-date-range-input-drop-down-menu:not([animation=none]) .smart-timepicker { transition: transform .2s cubic-bezier(.4, 0, .2, 1), visibility .2s cubic-bezier(.4, 0, .2, 1); transform: scale(1) } .smart-date-range-input-drop-down-menu:not([animation=none]) .smart-timepicker.smart-visibility-hidden { transition: visibility .2s cubic-bezier(.4, 0, .6, 1), transform .2s cubic-bezier(.4, 0, .6, 1); transform: scale(0) } .smart-date-range-input-drop-down-menu[right-to-left] .smart-timepicker { direction: rtl } smart-country-input, smart-phone-input { --smart-outline: var(--smart-primary); display: inline-block; width: var(--smart-text-box-default-width); height: var(--smart-text-box-default-height); overflow: visible; background: var(--smart-background); border: 1px solid var(--smart-border); border-top-left-radius: var(--smart-border-top-left-radius); border-top-right-radius: var(--smart-border-top-right-radius); border-bottom-left-radius: var(--smart-border-bottom-left-radius); border-bottom-right-radius: var(--smart-border-bottom-right-radius) } smart-country-input>.smart-container, smart-phone-input>.smart-container { display: flex } smart-country-input.smart-element, smart-phone-input.smart-element { background: var(--smart-background) } smart-country-input input::selection, smart-phone-input input::selection { background: var(--smart-editor-selection); color: var(--smart-editor-selection-color) } smart-country-input input.smart-input, smart-phone-input input.smart-input { border: none; text-overflow: ellipsis } smart-country-input:focus, smart-country-input[focus], smart-phone-input:focus, smart-phone-input[focus] { border-color: var(--smart-outline) } smart-country-input:hover, smart-phone-input:hover { border-color: var(--smart-ui-state-border-hover) } smart-country-input[disabled], smart-phone-input[disabled] { border-color: var(--smart-disabled); outline: 0 } smart-country-input[drop-down-button-position=left] .smart-input, smart-country-input[drop-down-button-position=right] .smart-input, smart-phone-input[drop-down-button-position=left] .smart-input, smart-phone-input[drop-down-button-position=right] .smart-input { width: calc(100% - var(--smart-editor-addon-width)) } .smart-country-input .smart-container, .smart-phone-input .smart-container { width: 100%; height: 100%; color: inherit; font-family: inherit; position: relative; overflow: visible; align-items: center } .smart-phone-input { --smart-editor-addon-width: 45px } .smart-phone-input.invalid-number .smart-container::after { color: var(--smart-error) } .smart-phone-input .smart-container::after { font-family: var(--smart-font-family-icon); content: var(--smart-icon-phone); color: var(--smart-success); padding-right: 5px } .smart-phone-input .smart-drop-down-button { display: flex; justify-content: center; align-items: center; flex-direction: row; background: 0 0; border-right: none; padding-left: 2px } .smart-phone-input .smart-drop-down-button::after { font-family: var(--smart-font-family-icon); content: var(--smart-icon-arrow-down) } .smart-flag-box { margin-right: 6px } .smart-flag-box .flag { width: 20px } .smart-flag-box .flag.be { width: 18px } .smart-flag-box .flag.ch { width: 15px } .smart-flag-box .flag.mc { width: 19px } .smart-flag-box .flag.ne { width: 18px } @media (-webkit-min-device-pixel-ratio:2), (min-resolution:192dpi) { .smart-flag-box .flag { background-size: 5652px 15px } } .smart-flag-box .flag.ac { height: 10px; background-position: 0 0 } .smart-flag-box .flag.ad { height: 14px; background-position: -22px 0 } .smart-flag-box .flag.ae { height: 10px; background-position: -44px 0 } .smart-flag-box .flag.af { height: 14px; background-position: -66px 0 } .smart-flag-box .flag.ag { height: 14px; background-position: -88px 0 } .smart-flag-box .flag.ai { height: 10px; background-position: -110px 0 } .smart-flag-box .flag.al { height: 15px; background-position: -132px 0 } .smart-flag-box .flag.am { height: 10px; background-position: -154px 0 } .smart-flag-box .flag.ao { height: 14px; background-position: -176px 0 } .smart-flag-box .flag.aq { height: 14px; background-position: -198px 0 } .smart-flag-box .flag.ar { height: 13px; background-position: -220px 0 } .smart-flag-box .flag.as { height: 10px; background-position: -242px 0 } .smart-flag-box .flag.at { height: 14px; background-position: -264px 0 } .smart-flag-box .flag.au { height: 10px; background-position: -286px 0 } .smart-flag-box .flag.aw { height: 14px; background-position: -308px 0 } .smart-flag-box .flag.ax { height: 13px; background-position: -330px 0 } .smart-flag-box .flag.az { height: 10px; background-position: -352px 0 } .smart-flag-box .flag.ba { height: 10px; background-position: -374px 0 } .smart-flag-box .flag.bb { height: 14px; background-position: -396px 0 } .smart-flag-box .flag.bd { height: 12px; background-position: -418px 0 } .smart-flag-box .flag.be { height: 15px; background-position: -440px 0 } .smart-flag-box .flag.bf { height: 14px; background-position: -460px 0 } .smart-flag-box .flag.bg { height: 12px; background-position: -482px 0 } .smart-flag-box .flag.bh { height: 12px; background-position: -504px 0 } .smart-flag-box .flag.bi { height: 12px; background-position: -526px 0 } .smart-flag-box .flag.bj { height: 14px; background-position: -548px 0 } .smart-flag-box .flag.bl { height: 14px; background-position: -570px 0 } .smart-flag-box .flag.bm { height: 10px; background-position: -592px 0 } .smart-flag-box .flag.bn { height: 10px; background-position: -614px 0 } .smart-flag-box .flag.bo { height: 14px; background-position: -636px 0 } .smart-flag-box .flag.bq { height: 14px; background-position: -658px 0 } .smart-flag-box .flag.br { height: 14px; background-position: -680px 0 } .smart-flag-box .flag.bs { height: 10px; background-position: -702px 0 } .smart-flag-box .flag.bt { height: 14px; background-position: -724px 0 } .smart-flag-box .flag.bv { height: 15px; background-position: -746px 0 } .smart-flag-box .flag.bw { height: 14px; background-position: -768px 0 } .smart-flag-box .flag.by { height: 10px; background-position: -790px 0 } .smart-flag-box .flag.bz { height: 14px; background-position: -812px 0 } .smart-flag-box .flag.ca { height: 10px; background-position: -834px 0 } .smart-flag-box .flag.cc { height: 10px; background-position: -856px 0 } .smart-flag-box .flag.cd { height: 15px; background-position: -878px 0 } .smart-flag-box .flag.cf { height: 14px; background-position: -900px 0 } .smart-flag-box .flag.cg { height: 14px; background-position: -922px 0 } .smart-flag-box .flag.ch { height: 15px; background-position: -944px 0 } .smart-flag-box .flag.ci { height: 14px; background-position: -961px 0 } .smart-flag-box .flag.ck { height: 10px; background-position: -983px 0 } .smart-flag-box .flag.cl { height: 14px; background-position: -1005px 0 } .smart-flag-box .flag.cm { height: 14px; background-position: -1027px 0 } .smart-flag-box .flag.cn { height: 14px; background-position: -1049px 0 } .smart-flag-box .flag.co { height: 14px; background-position: -1071px 0 } .smart-flag-box .flag.cp { height: 14px; background-position: -1093px 0 } .smart-flag-box .flag.cr { height: 12px; background-position: -1115px 0 } .smart-flag-box .flag.cu { height: 10px; background-position: -1137px 0 } .smart-flag-box .flag.cv { height: 12px; background-position: -1159px 0 } .smart-flag-box .flag.cw { height: 14px; background-position: -1181px 0 } .smart-flag-box .flag.cx { height: 10px; background-position: -1203px 0 } .smart-flag-box .flag.cy { height: 14px; background-position: -1225px 0 } .smart-flag-box .flag.cz { height: 14px; background-position: -1247px 0 } .smart-flag-box .flag.de { height: 12px; background-position: -1269px 0 } .smart-flag-box .flag.dg { height: 10px; background-position: -1291px 0 } .smart-flag-box .flag.dj { height: 14px; background-position: -1313px 0 } .smart-flag-box .flag.dk { height: 15px; background-position: -1335px 0 } .smart-flag-box .flag.dm { height: 10px; background-position: -1357px 0 } .smart-flag-box .flag.do { height: 14px; background-position: -1379px 0 } .smart-flag-box .flag.dz { height: 14px; background-position: -1401px 0 } .smart-flag-box .flag.ea { height: 14px; background-position: -1423px 0 } .smart-flag-box .flag.ec { height: 14px; background-position: -1445px 0 } .smart-flag-box .flag.ee { height: 13px; background-position: -1467px 0 } .smart-flag-box .flag.eg { height: 14px; background-position: -1489px 0 } .smart-flag-box .flag.eh { height: 10px; background-position: -1511px 0 } .smart-flag-box .flag.er { height: 10px; background-position: -1533px 0 } .smart-flag-box .flag.es { height: 14px; background-position: -1555px 0 } .smart-flag-box .flag.et { height: 10px; background-position: -1577px 0 } .smart-flag-box .flag.eu { height: 14px; background-position: -1599px 0 } .smart-flag-box .flag.fi { height: 12px; background-position: -1621px 0 } .smart-flag-box .flag.fj { height: 10px; background-position: -1643px 0 } .smart-flag-box .flag.fk { height: 10px; background-position: -1665px 0 } .smart-flag-box .flag.fm { height: 11px; background-position: -1687px 0 } .smart-flag-box .flag.fo { height: 15px; background-position: -1709px 0 } .smart-flag-box .flag.fr { height: 14px; background-position: -1731px 0 } .smart-flag-box .flag.ga { height: 15px; background-position: -1753px 0 } .smart-flag-box .flag.gb { height: 10px; background-position: -1775px 0 } .smart-flag-box .flag.gd { height: 12px; background-position: -1797px 0 } .smart-flag-box .flag.ge { height: 14px; background-position: -1819px 0 } .smart-flag-box .flag.gf { height: 14px; background-position: -1841px 0 } .smart-flag-box .flag.gg { height: 14px; background-position: -1863px 0 } .smart-flag-box .flag.gh { height: 14px; background-position: -1885px 0 } .smart-flag-box .flag.gi { height: 10px; background-position: -1907px 0 } .smart-flag-box .flag.gl { height: 14px; background-position: -1929px 0 } .smart-flag-box .flag.gm { height: 14px; background-position: -1951px 0 } .smart-flag-box .flag.gn { height: 14px; background-position: -1973px 0 } .smart-flag-box .flag.gp { height: 14px; background-position: -1995px 0 } .smart-flag-box .flag.gq { height: 14px; background-position: -2017px 0 } .smart-flag-box .flag.gr { height: 14px; background-position: -2039px 0 } .smart-flag-box .flag.gs { height: 10px; background-position: -2061px 0 } .smart-flag-box .flag.gt { height: 13px; background-position: -2083px 0 } .smart-flag-box .flag.gu { height: 11px; background-position: -2105px 0 } .smart-flag-box .flag.gw { height: 10px; background-position: -2127px 0 } .smart-flag-box .flag.gy { height: 12px; background-position: -2149px 0 } .smart-flag-box .flag.hk { height: 14px; background-position: -2171px 0 } .smart-flag-box .flag.hm { height: 10px; background-position: -2193px 0 } .smart-flag-box .flag.hn { height: 10px; background-position: -2215px 0 } .smart-flag-box .flag.hr { height: 10px; background-position: -2237px 0 } .smart-flag-box .flag.ht { height: 12px; background-position: -2259px 0 } .smart-flag-box .flag.hu { height: 10px; background-position: -2281px 0 } .smart-flag-box .flag.ic { height: 14px; background-position: -2303px 0 } .smart-flag-box .flag.id { height: 14px; background-position: -2325px 0 } .smart-flag-box .flag.ie { height: 10px; background-position: -2347px 0 } .smart-flag-box .flag.il { height: 15px; background-position: -2369px 0 } .smart-flag-box .flag.im { height: 10px; background-position: -2391px 0 } .smart-flag-box .flag.in { height: 14px; background-position: -2413px 0 } .smart-flag-box .flag.io { height: 10px; background-position: -2435px 0 } .smart-flag-box .flag.iq { height: 14px; background-position: -2457px 0 } .smart-flag-box .flag.ir { height: 12px; background-position: -2479px 0 } .smart-flag-box .flag.is { height: 15px; background-position: -2501px 0 } .smart-flag-box .flag.it { height: 14px; background-position: -2523px 0 } .smart-flag-box .flag.je { height: 12px; background-position: -2545px 0 } .smart-flag-box .flag.jm { height: 10px; background-position: -2567px 0 } .smart-flag-box .flag.jo { height: 10px; background-position: -2589px 0 } .smart-flag-box .flag.jp { height: 14px; background-position: -2611px 0 } .smart-flag-box .flag.ke { height: 14px; background-position: -2633px 0 } .smart-flag-box .flag.kg { height: 12px; background-position: -2655px 0 } .smart-flag-box .flag.kh { height: 13px; background-position: -2677px 0 } .smart-flag-box .flag.ki { height: 10px; background-position: -2699px 0 } .smart-flag-box .flag.km { height: 12px; background-position: -2721px 0 } .smart-flag-box .flag.kn { height: 14px; background-position: -2743px 0 } .smart-flag-box .flag.kp { height: 10px; background-position: -2765px 0 } .smart-flag-box .flag.kr { height: 14px; background-position: -2787px 0 } .smart-flag-box .flag.kw { height: 10px; background-position: -2809px 0 } .smart-flag-box .flag.ky { height: 10px; background-position: -2831px 0 } .smart-flag-box .flag.kz { height: 10px; background-position: -2853px 0 } .smart-flag-box .flag.la { height: 14px; background-position: -2875px 0 } .smart-flag-box .flag.lb { height: 14px; background-position: -2897px 0 } .smart-flag-box .flag.lc { height: 10px; background-position: -2919px 0 } .smart-flag-box .flag.li { height: 12px; background-position: -2941px 0 } .smart-flag-box .flag.lk { height: 10px; background-position: -2963px 0 } .smart-flag-box .flag.lr { height: 11px; background-position: -2985px 0 } .smart-flag-box .flag.ls { height: 14px; background-position: -3007px 0 } .smart-flag-box .flag.lt { height: 12px; background-position: -3029px 0 } .smart-flag-box .flag.lu { height: 12px; background-position: -3051px 0 } .smart-flag-box .flag.lv { height: 10px; background-position: -3073px 0 } .smart-flag-box .flag.ly { height: 10px; background-position: -3095px 0 } .smart-flag-box .flag.ma { height: 14px; background-position: -3117px 0 } .smart-flag-box .flag.mc { height: 15px; background-position: -3139px 0 } .smart-flag-box .flag.md { height: 10px; background-position: -3160px 0 } .smart-flag-box .flag.me { height: 10px; background-position: -3182px 0 } .smart-flag-box .flag.mf { height: 14px; background-position: -3204px 0 } .smart-flag-box .flag.mg { height: 14px; background-position: -3226px 0 } .smart-flag-box .flag.mh { height: 11px; background-position: -3248px 0 } .smart-flag-box .flag.mk { height: 10px; background-position: -3270px 0 } .smart-flag-box .flag.ml { height: 14px; background-position: -3292px 0 } .smart-flag-box .flag.mm { height: 14px; background-position: -3314px 0 } .smart-flag-box .flag.mn { height: 10px; background-position: -3336px 0 } .smart-flag-box .flag.mo { height: 14px; background-position: -3358px 0 } .smart-flag-box .flag.mp { height: 10px; background-position: -3380px 0 } .smart-flag-box .flag.mq { height: 14px; background-position: -3402px 0 } .smart-flag-box .flag.mr { height: 14px; background-position: -3424px 0 } .smart-flag-box .flag.ms { height: 10px; background-position: -3446px 0 } .smart-flag-box .flag.mt { height: 14px; background-position: -3468px 0 } .smart-flag-box .flag.mu { height: 14px; background-position: -3490px 0 } .smart-flag-box .flag.mv { height: 14px; background-position: -3512px 0 } .smart-flag-box .flag.mw { height: 14px; background-position: -3534px 0 } .smart-flag-box .flag.mx { height: 12px; background-position: -3556px 0 } .smart-flag-box .flag.my { height: 10px; background-position: -3578px 0 } .smart-flag-box .flag.mz { height: 14px; background-position: -3600px 0 } .smart-flag-box .flag.na { height: 14px; background-position: -3622px 0 } .smart-flag-box .flag.nc { height: 10px; background-position: -3644px 0 } .smart-flag-box .flag.ne { height: 15px; background-position: -3666px 0 } .smart-flag-box .flag.nf { height: 10px; background-position: -3686px 0 } .smart-flag-box .flag.ng { height: 10px; background-position: -3708px 0 } .smart-flag-box .flag.ni { height: 12px; background-position: -3730px 0 } .smart-flag-box .flag.nl { height: 14px; background-position: -3752px 0 } .smart-flag-box .flag.no { height: 15px; background-position: -3774px 0 } .smart-flag-box .flag.np { width: 13px; height: 15px; background-position: -3796px 0 } .smart-flag-box .flag.nr { height: 10px; background-position: -3811px 0 } .smart-flag-box .flag.nu { height: 10px; background-position: -3833px 0 } .smart-flag-box .flag.nz { height: 10px; background-position: -3855px 0 } .smart-flag-box .flag.om { height: 10px; background-position: -3877px 0 } .smart-flag-box .flag.pa { height: 14px; background-position: -3899px 0 } .smart-flag-box .flag.pe { height: 14px; background-position: -3921px 0 } .smart-flag-box .flag.pf { height: 14px; background-position: -3943px 0 } .smart-flag-box .flag.pg { height: 15px; background-position: -3965px 0 } .smart-flag-box .flag.ph { height: 10px; background-position: -3987px 0 } .smart-flag-box .flag.pk { height: 14px; background-position: -4009px 0 } .smart-flag-box .flag.pl { height: 13px; background-position: -4031px 0 } .smart-flag-box .flag.pm { height: 14px; background-position: -4053px 0 } .smart-flag-box .flag.pn { height: 10px; background-position: -4075px 0 } .smart-flag-box .flag.pr { height: 14px; background-position: -4097px 0 } .smart-flag-box .flag.ps { height: 10px; background-position: -4119px 0 } .smart-flag-box .flag.pt { height: 14px; background-position: -4141px 0 } .smart-flag-box .flag.pw { height: 13px; background-position: -4163px 0 } .smart-flag-box .flag.py { height: 11px; background-position: -4185px 0 } .smart-flag-box .flag.qa { height: 8px; background-position: -4207px 0 } .smart-flag-box .flag.re { height: 14px; background-position: -4229px 0 } .smart-flag-box .flag.ro { height: 14px; background-position: -4251px 0 } .smart-flag-box .flag.rs { height: 14px; background-position: -4273px 0 } .smart-flag-box .flag.ru { height: 14px; background-position: -4295px 0 } .smart-flag-box .flag.rw { height: 14px; background-position: -4317px 0 } .smart-flag-box .flag.sa { height: 14px; background-position: -4339px 0 } .smart-flag-box .flag.sb { height: 10px; background-position: -4361px 0 } .smart-flag-box .flag.sc { height: 10px; background-position: -4383px 0 } .smart-flag-box .flag.sd { height: 10px; background-position: -4405px 0 } .smart-flag-box .flag.se { height: 13px; background-position: -4427px 0 } .smart-flag-box .flag.sg { height: 14px; background-position: -4449px 0 } .smart-flag-box .flag.sh { height: 10px; background-position: -4471px 0 } .smart-flag-box .flag.si { height: 10px; background-position: -4493px 0 } .smart-flag-box .flag.sj { height: 15px; background-position: -4515px 0 } .smart-flag-box .flag.sk { height: 14px; background-position: -4537px 0 } .smart-flag-box .flag.sl { height: 14px; background-position: -4559px 0 } .smart-flag-box .flag.sm { height: 15px; background-position: -4581px 0 } .smart-flag-box .flag.sn { height: 14px; background-position: -4603px 0 } .smart-flag-box .flag.so { height: 14px; background-position: -4625px 0 } .smart-flag-box .flag.sr { height: 14px; background-position: -4647px 0 } .smart-flag-box .flag.ss { height: 10px; background-position: -4669px 0 } .smart-flag-box .flag.st { height: 10px; background-position: -4691px 0 } .smart-flag-box .flag.sv { height: 12px; background-position: -4713px 0 } .smart-flag-box .flag.sx { height: 14px; background-position: -4735px 0 } .smart-flag-box .flag.sy { height: 14px; background-position: -4757px 0 } .smart-flag-box .flag.sz { height: 14px; background-position: -4779px 0 } .smart-flag-box .flag.ta { height: 10px; background-position: -4801px 0 } .smart-flag-box .flag.tc { height: 10px; background-position: -4823px 0 } .smart-flag-box .flag.td { height: 14px; background-position: -4845px 0 } .smart-flag-box .flag.tf { height: 14px; background-position: -4867px 0 } .smart-flag-box .flag.tg { height: 13px; background-position: -4889px 0 } .smart-flag-box .flag.th { height: 14px; background-position: -4911px 0 } .smart-flag-box .flag.tj { height: 10px; background-position: -4933px 0 } .smart-flag-box .flag.tk { height: 10px; background-position: -4955px 0 } .smart-flag-box .flag.tl { height: 10px; background-position: -4977px 0 } .smart-flag-box .flag.tm { height: 14px; background-position: -4999px 0 } .smart-flag-box .flag.tn { height: 14px; background-position: -5021px 0 } .smart-flag-box .flag.to { height: 10px; background-position: -5043px 0 } .smart-flag-box .flag.tr { height: 14px; background-position: -5065px 0 } .smart-flag-box .flag.tt { height: 12px; background-position: -5087px 0 } .smart-flag-box .flag.tv { height: 10px; background-position: -5109px 0 } .smart-flag-box .flag.tw { height: 14px; background-position: -5131px 0 } .smart-flag-box .flag.tz { height: 14px; background-position: -5153px 0 } .smart-flag-box .flag.ua { height: 14px; background-position: -5175px 0 } .smart-flag-box .flag.ug { height: 14px; background-position: -5197px 0 } .smart-flag-box .flag.um { height: 11px; background-position: -5219px 0 } .smart-flag-box .flag.un { height: 14px; background-position: -5241px 0 } .smart-flag-box .flag.us { height: 11px; background-position: -5263px 0 } .smart-flag-box .flag.uy { height: 14px; background-position: -5285px 0 } .smart-flag-box .flag.uz { height: 10px; background-position: -5307px 0 } .smart-flag-box .flag.va { width: 15px; height: 15px; background-position: -5329px 0 } .smart-flag-box .flag.vc { height: 14px; background-position: -5346px 0 } .smart-flag-box .flag.ve { height: 14px; background-position: -5368px 0 } .smart-flag-box .flag.vg { height: 10px; background-position: -5390px 0 } .smart-flag-box .flag.vi { height: 14px; background-position: -5412px 0 } .smart-flag-box .flag.vn { height: 14px; background-position: -5434px 0 } .smart-flag-box .flag.vu { height: 12px; background-position: -5456px 0 } .smart-flag-box .flag.wf { height: 14px; background-position: -5478px 0 } .smart-flag-box .flag.ws { height: 10px; background-position: -5500px 0 } .smart-flag-box .flag.xk { height: 15px; background-position: -5522px 0 } .smart-flag-box .flag.ye { height: 14px; background-position: -5544px 0 } .smart-flag-box .flag.yt { height: 14px; background-position: -5566px 0 } .smart-flag-box .flag.za { height: 14px; background-position: -5588px 0 } .smart-flag-box .flag.zm { height: 14px; background-position: -5610px 0 } .smart-flag-box .flag.zw { height: 10px; background-position: -5632px 0 } .smart-flag-box .flag { height: 15px; box-shadow: 0 0 1px 0 #888; background-image: url(./images/flags.png); background-repeat: no-repeat; background-color: #DBDBDB; background-position: 20px 0 } .smart-flag-box .flag.np { background-color: transparent } .smart-country-input-drop-down-menu ul li a, .smart-phone-input-drop-down-menu ul li a { border-left: var(--smart-border-width) solid transparent; display: flex; align-items: center } .smart-country-input-drop-down-menu ul li .dial-code, .smart-phone-input-drop-down-menu ul li .dial-code { margin-left: 6px; opacity: .5 } .smart-country-input-drop-down-menu:not(.smart-check-input-drop-down-menu) li.active a, .smart-phone-input-drop-down-menu:not(.smart-check-input-drop-down-menu) li.active a { border-left: var(--smart-border-width) solid var(--smart-primary); border-top-left-radius: 0; border-bottom-left-radius: 0; color: var(--smart-ui-state-color-selected); background: var(--smart-ui-state-selected) } .smart-country-input-drop-down-menu[right-to-left] li a, .smart-phone-input-drop-down-menu[right-to-left] li a { border-left: none; border-right: var(--smart-border-width) solid transparent } .smart-country-input-drop-down-menu[right-to-left]:not(.smart-check-input-drop-down-menu) li.active a, .smart-phone-input-drop-down-menu[right-to-left]:not(.smart-check-input-drop-down-menu) li.active a { border-left: var(--smart-border-width) solid transparent; border-right: var(--smart-border-width) solid var(--smart-primary); border-top-left-radius: var(--smart-border-top-left-radius); border-bottom-left-radius: var(--smart-border-bottom-left-radius); border-top-right-radius: 0; border-bottom-right-radius: 0 } .underlined.smart-input, .underlined.smart-input .smart-drop-down-button, .underlined.smart-text-box input.smart-input { border-top: none; border-left: none; border-right: none } .underlined.smart-input, .underlined.smart-input[hover] { border-bottom-left-radius: 0; border-bottom-right-radius: 0 } smart-date-input.underlined, smart-date-range-input.underlined, smart-time-input.underlined { overflow: visible } .underlined.smart-input { transition: border-bottom .2s, background-color .2s } .underlined.smart-input .smart-hint { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: block !important; box-sizing: border-box; padding: var(--smart-editor-label-padding); color: var(--smart-background-color); pointer-events: none; font-size: 75%; opacity: 0; transition: color .2s, font-size .2s, line-height .2s, margin-top .2s, opacity .3s, top .2s; margin-top: calc(0px - var(--smart-font-size)) } .underlined.smart-input .smart-hint:after { content: ""; position: absolute; left: 0; bottom: -2px; display: block; width: 100%; height: 2px; background-color: var(--smart-primary); transform-origin: bottom center; transform: scaleX(0); transition: transform .2s } .underlined.smart-input[hover] { border-bottom-color: var(--smart-background-color) } .underlined.smart-input[focus] .smart-hint { color: var(--smart-primary); opacity: 1 } .underlined.smart-input[focus] .smart-hint:before { opacity: .12 } .underlined.smart-input[focus] .smart-hint:after { transform: scale(1) } .underlined.smart-input .smart-input:not(:focus):placeholder-shown+.smart-hint { font-size: inherit; margin-top: 0 } .underlined.smart-input:not([readonly]) .smart-drop-down-button { border-bottom-left-radius: initial; border-bottom-right-radius: initial } .underlined.smart-input:not([opened]) .smart-drop-down-button { background-color: transparent } .underlined.smart-input.smart-multi-combo-input:not([focus]) .smart-hint { margin-top: 0 } .underlined.smart-input.smart-date-range-input[opened][drop-down-button-position=right]:not([readonly]) { border-bottom-left-radius: 0; border-bottom-right-radius: 0 } .underlined.smart-input[readonly] .smart-input { cursor: pointer; background: var(--smart-background) !important; color: var(--smart-background-color) !important; opacity: .75 } .underlined.smart-input[drop-down-button-position=left] .smart-drop-down-button { background: inherit; color: inherit; border-bottom-left-radius: initial } .underlined.smart-input[drop-down-button-position=left] .smart-hint { margin-left: var(--smart-editor-addon-width) } .underlined.smart-input[drop-down-button-position=left][focus] .smart-hint:after { margin-left: calc(0px - var(--smart-editor-addon-width)); width: calc(100% + var(--smart-editor-addon-width)) } .underlined.smart-input[drop-down-button-position=left][opened]:not([readonly]), .underlined.smart-input[drop-down-button-position=left][opened]:not([readonly]) input { border-bottom-right-radius: 0 } .underlined.smart-input[drop-down-button-position=right] .smart-drop-down-button { background: var(--smart-background); color: var(--smart-background-color); border-bottom-right-radius: initial } .underlined.smart-input[drop-down-button-position=right][opened]:not([readonly]), .underlined.smart-input[drop-down-button-position=right][opened]:not([readonly]) input { border-bottom-left-radius: 0 } .underlined.smart-input.smart-invalid { border-bottom-color: rgba(var(--smart-error-rgb), .5) } .underlined.smart-input.smart-invalid .smart-hint:after { background-color: var(--smart-error) } .underlined.smart-text-box input.smart-input { border-bottom-left-radius: initial; border-bottom-right-radius: initial } .underlined.smart-number-input .nav { background: var(--smart-background); color: var(--smart-background-color) } .underlined.smart-number-input .nav .up { border-bottom: none } .underlined.smart-element.smart-material { --smart-border-top-left-radius: 0; --smart-border-top-right-radius: 0; --smart-border-bottom-left-radius: 0; --smart-border-bottom-right-radius: 0 } .underlined.smart-element.smart-material.smart-valid { --smart-border: #28a745 } .underlined.smart-element.smart-material.smart-invalid { --smart-border: #dc3545 } .underlined.smart-element.smart-material .smart-hint { opacity: 1; transition: color .2s, opacity .1s, font-size .2s, line-height .2s, margin-top .2s, top .2s !important; margin-top: 0; font-size: 100% } .underlined.smart-element.smart-material.has-value .smart-hint, .underlined.smart-element.smart-material[focus] .smart-hint, .underlined.smart-element.smart-material[focus][hover] .smart-hint, .underlined.smart-element.smart-material[value]:not([value=""]) .smart-hint { margin-top: -20px; font-size: 80% !important } smart-check-input.outlined, smart-date-range-input.outlined, smart-input.outlined, smart-masked-text-box.outlined, smart-multi-combo-input.outlined, smart-multi-input.outlined, smart-password-input.outlined, smart-password-text-box.outlined, smart-text-box.outlined { background-color: transparent } smart-date-input.outlined, smart-date-range-input.outlined, smart-time-input.outlined { overflow: visible } .outlined.smart-input { position: relative; display: inline-block; font-family: var(--smart-font-family); font-size: var(--smart-font-size); line-height: 1.5; height: 50px; margin: 0; border: none; border-radius: 0; padding-top: 6px; overflow: hidden } .outlined.smart-input .smart-input { padding: 12px 13px; z-index: 5; background: var(--smart-background); border: 1px solid var(--smart-border); transition: border-color .2s } .outlined.smart-input.smart-valid[focus] .smart-drop-down-button, .outlined.smart-input.smart-valid[focus] .smart-input { border-color: var(--smart-primary) } .outlined.smart-input.smart-valid[focus] .smart-drop-down-button { color: var(--smart-primary) } .outlined.smart-input.smart-invalid .smart-drop-down-button, .outlined.smart-input.smart-invalid .smart-input { border-color: rgba(var(--smart-error-rgb), .5) } .outlined.smart-input.smart-invalid[focus] .smart-drop-down-button, .outlined.smart-input.smart-invalid[focus] .smart-input { border-color: var(--smart-error) } .outlined.smart-input.smart-invalid[focus] .smart-drop-down-button { color: var(--smart-error) } .outlined.smart-input.smart-multi-combo-input .smart-input { padding: 0; border: none !important; z-index: initial } .outlined.smart-input.smart-multi-combo-input .smart-drop-down-button { padding: 0 !important } .outlined.smart-input.smart-multi-combo-input .smart-action-button { padding: 12px 13px; z-index: 5; background: var(--smart-background); border: 1px solid var(--smart-border); transition: border-color .2s } .outlined.smart-input.smart-multi-combo-input[hint] .smart-action-button { border-top: 1px solid var(--smart-background) } .outlined.smart-input.smart-multi-combo-input[focus] .smart-action-button { border-color: var(--smart-primary); color: var(--smart-primary) } .outlined.smart-input.smart-multi-combo-input[focus][hint] .smart-action-button { border-top-color: var(--smart-background) } .outlined.smart-input.smart-multi-combo-input.smart-valid[focus] .smart-action-button, .outlined.smart-input[focus] { border-color: var(--smart-primary) } .outlined.smart-input.smart-multi-combo-input.smart-valid[focus] .smart-action-button.smart-valid { color: var(--smart-primary) } .outlined.smart-input.smart-multi-combo-input.smart-invalid[focus] .smart-action-button.smart-invalid { color: var(--smart-error) } .outlined.smart-input[drop-down-button-position=right] input { border-right: none } .outlined.smart-input[drop-down-button-position=right] .smart-drop-down-button { padding: 10px 0 9px; border-left: none; border-bottom: 1px solid var(--smart-border); border-right: 1px solid var(--smart-border); border-top: 1px solid var(--smart-border); background: inherit; color: inherit; z-index: 6; cursor: pointer } .outlined.smart-input[drop-down-button-position=left] input { border-left: none } .outlined.smart-input[drop-down-button-position=left] .smart-drop-down-button { padding: 10px 0; border-right: none; border-bottom: 1px solid var(--smart-border); border-left: 1px solid var(--smart-border); background: inherit; color: inherit; z-index: 6; cursor: pointer } .outlined.smart-input[hint] .smart-hint { position: absolute; top: 0; left: 0; display: flex !important; border-color: var(--smart-border) !important; width: 100%; max-height: 100%; color: var(--smart-background-color); font-size: 75%; line-height: 15px; cursor: text; margin-top: -6px; z-index: 7; white-space: nowrap; transition: color .2s, z-index .2s, font-size .2s, opacity .3s, font-size .2s, line-height .2s } .outlined.smart-input[hint] .smart-hint:after, .outlined.smart-input[hint] .smart-hint:before { content: ""; display: block; box-sizing: border-box; margin-top: 6px; border-top: solid 1px; border-top-color: var(--smart-border) !important; min-width: 10px; height: 8px; pointer-events: none; box-shadow: inset 0 1px transparent; transition: border-color .2s, box-shadow .2s; z-index: 7 } .outlined.smart-input[hint] .smart-hint:before { margin-right: 4px; border-left: solid 1px transparent; border-radius: 4px 0 } .outlined.smart-input[hint] .smart-hint:after { flex-grow: 1; margin-left: 4px; border-right: solid 1px transparent; border-radius: 0 4px } .outlined.smart-input[hint][drop-down-button-position=left] .smart-hint:before { width: var(--smart-editor-addon-width); margin-right: 13px } .outlined.smart-input[focus] { border-top-color: transparent !important; box-shadow: inset 1px 0 var(--smart-material-safari-helper1), inset -1px 0 var(--smart-material-safari-helper1), inset 0 -1px var(--smart-material-safari-helper1); outline: 0 } .outlined.smart-input[focus] .smart-input { border-color: var(--smart-primary) } .outlined.smart-input[focus] .smart-drop-down-button { color: var(--smart-primary); border-color: var(--smart-primary) } .outlined.smart-input[focus][hint] .smart-input { border-top-color: var(--smart-background) } .outlined.smart-input[focus][hint] .smart-hint { color: var(--smart-primary); opacity: 1 } .outlined.smart-input[focus][hint] .smart-hint:after, .outlined.smart-input[focus][hint] .smart-hint:before { border-top-color: var(--smart-primary) !important; box-shadow: none !important } .outlined.smart-input[hover] { border-color: var(--smart-border); border-top-color: transparent } .outlined.smart-input[hover][hint] .smart-hint:before { border-top-color: var(--smart-border) } .outlined.smart-input[hover][hint]>input:not(:focus):placeholder-shown, .outlined.smart-input[hover][hint]>textarea:not(:focus):placeholder-shown { border-color: var(--smart-border) } .outlined.smart-input[readonly] .smart-input { background: var(--smart-background) !important; color: var(--smart-background-color) !important; opacity: .75 } .outlined.smart-input:not([focus]) .smart-input, .outlined.smart-input:not([focus]) .smart-input:not(:focus):placeholder-shown { border-top: 1px solid var(--smart-border); z-index: 5 } .outlined.smart-input:not([focus]).smart-invalid .smart-input, .outlined.smart-input:not([focus]).smart-invalid .smart-input:not(:focus):placeholder-shown { border-top: 1px solid rgba(var(--smart-error-rgb), .5); z-index: 5 } .outlined.smart-input:not([focus]):not([value]).smart-multi-combo-input[hint] .smart-hint, .outlined.smart-input[hint] .smart-input:not(:focus):placeholder-shown+.smart-hint, .outlined.smart-input[hint]:not([focus]) .smart-hint { font-size: var(--smart-font-size); line-height: 60px; z-index: 2; user-select: none; pointer-events: none } .outlined.smart-input.smart-invalid[focus] { border-color: var(--smart-error) } .outlined.smart-input.smart-invalid[focus][hint] .smart-hint { color: var(--smart-error) } .outlined.smart-input.smart-invalid[focus][hint] .smart-hint:after, .outlined.smart-input.smart-invalid[focus][hint] .smart-hint:before { border-top-color: var(--smart-error) !important } .outlined.smart-input.smart-valid[focus] { border-color: var(--smart-primary) } .outlined.smart-input.smart-valid[focus][hint] .smart-hint { color: var(--smart-primary) } .outlined.smart-input.smart-valid[focus][hint] .smart-hint:after, .outlined.smart-input.smart-valid[focus][hint] .smart-hint:before { border-top-color: var(--smart-primary) !important } .outlined.smart-text-area[hint] .smart-input:not(:focus):placeholder-shown+.smart-hint, .outlined.smart-text-area[hint]:not([focus]) .smart-hint { font-size: var(--smart-font-size); line-height: var(--smart-editor-height); opacity: 0; z-index: 2 } .outlined.smart-text-box input { border: none; padding: 7px } .outlined.smart-number-input .nav { background: var(--smart-background); color: var(--smart-background-color) } .outlined.smart-number-input .nav .up { border-bottom: none } .outlined.smart-number-input[drop-down-button-position=left] .smart-drop-down-button, .outlined.smart-number-input[drop-down-button-position=right] .smart-drop-down-button { padding: 0 } .outlined.smart-element.smart-material.smart-valid { --smart-border: #28a745 } .outlined.smart-element.smart-material.smart-invalid { --smart-border: #dc3545 } .outlined.smart-element.smart-material .smart-hint { opacity: 1 !important; transition: color .2s, opacity .1s, font-size .2s, line-height .2s, margin-top .2s, top .2s !important; z-index: 7 !important } .outlined.smart-element.smart-material.has-value, .outlined.smart-element.smart-material[focus], .outlined.smart-element.smart-material[focus][hover], .outlined.smart-element.smart-material[value]:not([value=""]) { border-color: var(--smart-primary); border-top-color: transparent !important; outline: 0 } .outlined.smart-element.smart-material.has-value .smart-input, .outlined.smart-element.smart-material[focus] .smart-input, .outlined.smart-element.smart-material[focus][hover] .smart-input, .outlined.smart-element.smart-material[value]:not([value=""]) .smart-input { border-top-color: var(--smart-background) !important } .outlined.smart-element.smart-material.has-value .smart-hint, .outlined.smart-element.smart-material[focus] .smart-hint, .outlined.smart-element.smart-material[focus][hover] .smart-hint, .outlined.smart-element.smart-material[value]:not([value=""]) .smart-hint { color: var(--smart-primary) !important; opacity: 1 !important; font-size: 75% !important; line-height: 15px; z-index: 7; transition: color .2s, z-index .2s, font-size .2s, opacity .3s, font-size .2s, line-height .2s } .outlined.smart-element.smart-material.has-value .smart-container .smart-content, .outlined.smart-element.smart-material[focus] .smart-container .smart-content, .outlined.smart-element.smart-material[focus][hover] .smart-container .smart-content, .outlined.smart-element.smart-material[value]:not([value=""]) .smart-container .smart-content { border-top-color: transparent !important } .outlined.smart-drop-down-box>.smart-container>.smart-content { z-index: 7 !important } .smart-invalid .outlined.smart-input.smart-multi-combo-input .smart-action-button { border-color: rgba(var(--smart-error-rgb), .5) } .smart-invalid .outlined.smart-input.smart-multi-combo-input[focus] .smart-action-button { border-color: var(--smart-error) } @media not all and (min-resolution:0.001dpcm) { @supports (-webkit-appearance:none) { .smart-input .smart-hint, .smart-input .smart-hint::after, .smart-input .smart-input { transition-duration: .1s } } } .smart-time-picker { display: block; width: var(--smart-time-picker-default-width); height: var(--smart-time-picker-default-height); line-height: initial; min-width: 250px } .smart-time-picker>.smart-container { width: 100%; height: 100% } .smart-time-picker .smart-main-container { width: 100%; height: calc(100% - var(--smart-calendar-title-height)); padding: 2%; background-color: var(--smart-background) } .smart-time-picker .smart-header { display: flex; width: 100%; height: var(--smart-calendar-title-height); background-color: var(--smart-primary); color: var(--smart-primary-color); justify-content: center; align-items: center } .smart-time-picker .smart-header:focus { outline: var(--smart-background) solid 1px } .smart-time-picker .smart-footer { display: none } .smart-time-picker .smart-svg-container { display: flex; justify-content: center; align-items: center; width: 100%; height: 100% } .smart-time-picker .smart-am-container, .smart-time-picker .smart-hour-container, .smart-time-picker .smart-minute-container, .smart-time-picker .smart-pm-container { opacity: .5; cursor: pointer } .smart-time-picker .smart-hour-minute-container { display: flex; font-size: 50px } .smart-time-picker .smart-hour-minute-container div:nth-child(2) { opacity: .5 } .smart-time-picker .smart-am-pm-container { margin-left: 10px } .smart-time-picker .smart-selected { opacity: 1 } .smart-time-picker .smart-svg-picker { border-radius: 50%; background-color: var(--smart-background); position: relative; box-sizing: content-box; touch-action: none } .smart-time-picker .smart-svg-picker:focus { border: 1px solid var(--smart-outline); outline: 0 } .smart-time-picker .smart-svg-picker.animate { animation: smart-time-picker-animation .5s linear } .smart-time-picker .smart-label { fill: var(--smart-background-color) } .smart-time-picker .smart-label.smart-selected { fill: var(--smart-primary-color); stroke: var(--smart-primary-color); stroke-width: 0 } .smart-time-picker .smart-needle, .smart-time-picker .smart-needle-central-circle { fill: var(--smart-primary) } .smart-time-picker[disabled] .smart-am-container, .smart-time-picker[disabled] .smart-hour-container, .smart-time-picker[disabled] .smart-minute-container, .smart-time-picker[disabled] .smart-pm-container, .smart-time-picker[readonly] .smart-am-container, .smart-time-picker[readonly] .smart-hour-container, .smart-time-picker[readonly] .smart-minute-container, .smart-time-picker[readonly] .smart-pm-container { cursor: default } .smart-time-picker[footer] .smart-footer { display: block; width: 100%; height: 30px } .smart-time-picker[footer] .smart-svg-container { height: calc(100% - 30px) } .smart-time-picker[view=landscape] { width: var(--smart-time-picker-default-height); height: var(--smart-time-picker-default-width); min-width: 400px } .smart-time-picker[view=landscape]>.smart-container { display: flex } .smart-time-picker[view=landscape] .smart-header { flex-direction: column; width: 33%; height: 100% } .smart-time-picker[view=landscape] .smart-main-container { width: 67%; height: 100% } .smart-time-picker[view=landscape] .smart-am-pm-container { margin-left: 0 } @keyframes smart-time-picker-animation { 0%, 100% { opacity: 1 } 25%, 75% { opacity: .5 } 50% { opacity: 0 } } .smart-time-picker[right-to-left] .smart-footer, .smart-time-picker[right-to-left] .smart-header { direction: rtl } .smart-time-picker[right-to-left] .smart-am-pm-container { margin: 0 10px 0 0 } .smart-time-picker[right-to-left][view=landscape]>.smart-container { flex-direction: row-reverse } smart-toast, smart-toast .smart-toast-container { font-family: var(--smart-font-family-icon); display: none } .smart-toast-container.smart-toast-container-bottom-left, .smart-toast-container.smart-toast-container-bottom-right, .smart-toast-container.smart-toast-container-custom, .smart-toast-container.smart-toast-container-top-left, .smart-toast-container.smart-toast-container-top-right { width: var(--smart-toast-container-default-width); padding: 5px; position: fixed; overflow-y: hidden; box-sizing: border-box; z-index: var(--smart-editor-drop-down-z-index) } .smart-toast-container.smart-toast-container-top-left { top: 0; left: 0 } .smart-toast-container.smart-toast-container-top-right { top: 0; right: 0 } .smart-toast-container.smart-toast-container-bottom-left { bottom: 0; left: 0 } .smart-toast-container.smart-toast-container-bottom-right { bottom: 0; right: 0 } .smart-toast-container.smart-toast-container-modal { width: 100%; height: 100% } .smart-toast-container.smart-toast-container-modal:not(:empty) { background-color: rgba(0, 0, 0, .5); display: flex; flex-direction: column; align-items: center; justify-content: center; position: fixed; left: 0; top: 0; z-index: var(--smart-editor-drop-down-z-index) } .smart-toast-container.smart-toast-container-modal .smart-toast-item { width: 200px } .smart-toast-item { display: block; width: 100%; margin-bottom: 2px; opacity: .8; user-select: none; background-color: var(--smart-surface); border-color: var(--smart-border); color: var(--smart-surface-color) } .smart-toast-item:hover { opacity: 1 } .smart-toast-item .smart-toast-item-header { display: flex; justify-content: flex-end; height: var(--smart-toast-header-height) } .smart-toast-item .smart-toast-item-header .smart-toast-item-close-button { font-family: var(--smart-font-family-icon); user-select: none; position: relative; cursor: pointer; margin: 5px; opacity: 1; display: none; width: var(--smart-font-size); height: var(--smart-font-size); color: inherit } .smart-toast-item .smart-toast-item-container { padding: 0 0 10px; display: flex; align-items: center; position: relative; top: -4px } .smart-toast-item .smart-toast-item-container .smart-toast-item-icon { width: 25px; height: 25px; margin: 0 15px; display: inline-block; background-repeat: no-repeat } .smart-toast-item .smart-toast-item-container .smart-toast-item-icon:after { content: var(--smart-toast-item-icon); width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; font-family: var(--smart-font-family-icon); font-size: 1.75em } .smart-toast-item .smart-toast-item-container .smart-toast-item-content { text-align: center; opacity: 1; font-family: inherit; font-size: inherit; font-weight: inherit; color: inherit; text-overflow: ellipsis; overflow: hidden; display: inline-block; width: calc(100% - 110px); margin: 0 15px } .smart-toast-item[show-close-button] .smart-toast-item-header .smart-toast-item-close-button { display: block } .smart-toast-item[show-close-button] .smart-toast-item-header .smart-toast-item-close-button:after { font-family: var(--smart-font-family-icon); content: var(--smart-icon-close); font-size: inherit; user-select: none; cursor: pointer; color: inherit; position: absolute; left: 0; top: 0; display: block } .smart-toast-item.primary, .smart-toast-item.primary .smart-toast-item-header .smart-toast-item-close-button { color: var(--smart-primary-color) } .smart-toast-item[opened] { opacity: .8 } .smart-toast-item[opened]:hover { opacity: 1 } .smart-toast-item.blink { animation: blink normal 1s infinite ease-in } .smart-toast-item.primary { background-color: var(--smart-primary); border-color: var(--smart-primary) } .smart-toast-item.secondary { background-color: var(--smart-secondary); border-color: var(--smart-secondary); color: var(--smart-secondary-color) } .smart-toast-item.secondary .smart-toast-item-header .smart-toast-item-close-button { color: var(--smart-primary-color) } .smart-toast-item.success { background-color: var(--smart-success); border-color: var(--smart-success); color: var(--smart-success-color) } .smart-toast-item.success .smart-toast-item-header .smart-toast-item-close-button { color: var(--smart-primary-color) } .smart-toast-item.error { background-color: var(--smart-error); border-color: var(--smart-error); color: var(--smart-error-color) } .smart-toast-item.error .smart-toast-item-header .smart-toast-item-close-button { color: var(--smart-primary-color) } .smart-toast-item.info { background-color: var(--smart-info); border-color: var(--smart-info); color: var(--smart-info-color) } .smart-toast-item.info .smart-toast-item-header .smart-toast-item-close-button { color: var(--smart-primary-color) } .smart-toast-item.warning { background-color: var(--smart-warning); border-color: var(--smart-warning); color: var(--smart-warning-color) } .smart-toast-item.warning .smart-toast-item-header .smart-toast-item-close-button { color: var(--smart-primary-color) } .smart-toast-item.light { background-color: var(--smart-light); border-color: var(--smart-light); color: var(--smart-light-color) } .smart-toast-item.light .smart-toast-item-header .smart-toast-item-close-button { color: var(--smart-primary-color) } .smart-toast-item.dark { background-color: var(--smart-dark); border-color: var(--smart-dark); color: var(--smart-dark-color) } .smart-toast-item.dark .smart-toast-item-header .smart-toast-item-close-button { color: var(--smart-primary-color) } .smart-toast-item.mail { background-color: #337ab7; border-color: #337ab7; color: #fff } .smart-toast-item.mail .smart-toast-item-header .smart-toast-item-close-button { color: #fff } .smart-toast-item.time { background-color: #363636; border-color: #363636; color: #fff } .smart-toast-item.time .smart-toast-item-header .smart-toast-item-close-button { color: #fff } .smart-toast-item.info .smart-toast-item-icon:after { --smart-toast-item-icon: var(--smart-icon-help-circled) } .smart-toast-item.warning .smart-toast-item-icon:after { --smart-toast-item-icon: var(--smart-icon-attention) } .smart-toast-item.success .smart-toast-item-icon:after { --smart-toast-item-icon: var(--smart-icon-check) } .smart-toast-item.error .smart-toast-item-icon:after { --smart-toast-item-icon: var(--smart-icon-block) } .smart-toast-item.mail .smart-toast-item-icon:after { --smart-toast-item-icon: var(--smart-icon-mail) } .smart-toast-item.time .smart-toast-item-icon:after { --smart-toast-item-icon: var(--smart-icon-clock) } .smart-toast-item[right-to-left]>.smart-container { direction: rtl } @keyframes blink { 50% { opacity: .5 } } .smart-toggle-box { display: inline-block; outline: 0; height: var(--smart-editor-height); cursor: pointer } .smart-toggle-box.smart-element { border: none; background: 0 0 } .smart-toggle-box .smart-container, .smart-toggle-box.smart-container { position: relative; display: flex; align-items: center } .smart-toggle-box .smart-ripple { background: var(--smart-primary) } .smart-toggle-box .smart-overlay { top: 0; height: 100%; background: var(--smart-primary); width: var(--smart-editor-height); position: absolute; left: 2px; border-radius: 100%; padding: 0; opacity: 0; box-sizing: content-box; transition: opacity 280ms ease-in-out; margin: 0 } .smart-toggle-box .smart-label { color: var(--smart-background-color); background: inherit; font-size: inherit; font-family: inherit; margin: 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: auto } .smart-toggle-box.smart-check-box .smart-input { width: var(--smart-check-box-default-size); min-width: var(--smart-check-box-default-size); height: var(--smart-check-box-default-size); min-height: var(--smart-check-box-default-size); background-color: var(--smart-background); box-sizing: initial; border: var(--smart-border-width) solid var(--smart-border); display: inline-block; color: var(--smart-background-color); border-top-left-radius: var(--smart-border-top-left-radius); border-top-right-radius: var(--smart-border-top-right-radius); border-bottom-left-radius: var(--smart-border-bottom-left-radius); border-bottom-right-radius: var(--smart-border-bottom-right-radius); margin: 0 0 0 8px; transition: background linear .2s; position: relative } .smart-toggle-box.smart-check-box .smart-input:after { font-family: var(--smart-font-family-icon); display: flex; justify-content: center; align-content: center; height: 100%; align-items: center } .smart-toggle-box.smart-check-box[checked] .smart-input:after { font-weight: 100; content: var(--smart-icon-check); pointer-events: none } .smart-toggle-box.smart-check-box[checked=null] .smart-input:after { content: '-'; margin-top: -1px } .smart-toggle-box.smart-radio-button .smart-input { width: var(--smart-radio-button-default-size); min-width: var(--smart-radio-button-default-size); height: var(--smart-radio-button-default-size); min-height: var(--smart-radio-button-default-size); background-color: var(--smart-background); box-sizing: initial; border-style: solid; border-width: var(--smart-border-width); border-color: var(--smart-border); display: inline-block; border-radius: 100%; color: var(--smart-background-color); margin: 0 0 0 8px; position: relative } .smart-toggle-box.smart-radio-button .smart-input:after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50%; height: 50%; font-style: normal; text-decoration: inherit; font-variant: normal; text-transform: none; color: inherit; border-radius: 50%; line-height: 100% } .smart-toggle-box.smart-radio-button[checked] .smart-input:after { font-size: 15px; font-weight: 100; background: var(--smart-primary-color) } .smart-toggle-box.smart-radio-button[checked][hover]:not([focus]) .smart-input::after { background: var(--smart-ui-state-color-hover) } .smart-toggle-box[active] .smart-input, .smart-toggle-box[checked] .smart-input { border-color: var(--smart-ui-state-border-active); background-color: var(--smart-ui-state-active); color: var(--smart-ui-state-color-active) } .smart-toggle-box[active]:focus .smart-overlay, .smart-toggle-box[active][focus] .smart-overlay { opacity: .4 } .smart-toggle-box[hover] .smart-input { border-color: var(--smart-ui-state-border-hover); background-color: var(--smart-ui-state-hover); color: var(--smart-ui-state-color-hover) } .smart-toggle-box:focus .smart-input, .smart-toggle-box[focus] .smart-input { outline: 0; overflow: visible; border-color: var(--smart-primary); background-color: var(--smart-primary); color: var(--smart-primary-color) } .smart-toggle-box:focus .smart-overlay, .smart-toggle-box[focus] .smart-overlay { opacity: .3 } .smart-toggle-box[readonly], .smart-toggle-box[readonly] .smart-input, .smart-toggle-box[readonly] .smart-label { cursor: initial } .smart-toggle-box[check-mode=input] { cursor: default } .smart-toggle-box[check-mode=input] .smart-input, .smart-toggle-box[check-mode=label] .smart-label { cursor: pointer } .smart-toggle-box[right-to-left] .smart-container, .smart-toggle-box[right-to-left] .smart-hidden-input { direction: rtl } .smart-toggle-box[right-to-left] .smart-overlay { left: initial; right: 2px } .smart-toggle-box[right-to-left] .smart-input { margin: 0 8px 0 0 } smart-tooltip { position: absolute; text-align: center; z-index: var(--smart-editor-drop-down-z-index); font-family: var(--smart-font-family); font-size: var(--smart-font-size); visibility: hidden; pointer-events: none } smart-tooltip.smart-element { background: 0 0; overflow: visible } smart-tooltip .smart-tooltip-content { overflow: hidden; text-overflow: ellipsis; padding: var(--smart-tooltip-padding); background-color: var(--smart-secondary); color: var(--smart-secondary-color); border: var(--smart-border-width) solid var(--smart-secondary); width: 100%; height: 100%; opacity: .9; box-shadow: var(--smart-elevation-6); font-family: var(--smart-font-family); border-top-left-radius: var(--smart-border-top-left-radius); border-bottom-left-radius: var(--smart-border-bottom-left-radius); border-top-right-radius: var(--smart-border-top-right-radius); border-bottom-right-radius: var(--smart-border-bottom-right-radius) } smart-tooltip[arrow], smart-tooltip[arrow][arrow-direction=bottom] { padding-bottom: var(--smart-tooltip-arrow-width) } smart-tooltip.auto, smart-tooltip.auto .smart-container, smart-tooltip.auto .smart-tooltip-content { height: auto } smart-tooltip[arrow] .smart-tooltip-content:after, smart-tooltip[arrow][arrow-direction=bottom] .smart-tooltip-content:after { content: ""; width: 0; height: 0; border-top: var(--smart-tooltip-arrow-width) solid var(--smart-tooltip-arrow-color); position: absolute; bottom: 0; left: calc(100% / 2 - var(--smart-tooltip-arrow-width)); border-left: var(--smart-tooltip-arrow-width) solid transparent; border-right: var(--smart-tooltip-arrow-width) solid transparent; transform: translateX(var(--smart-tooltip-arrow-translate)) } smart-tooltip[visible] { visibility: visible; pointer-events: auto } smart-tooltip[arrow][arrow-direction=top] { padding-bottom: initial; padding-top: var(--smart-tooltip-arrow-width) } smart-tooltip[arrow][arrow-direction=top] .smart-tooltip-content:after { border-left: var(--smart-tooltip-arrow-width) solid transparent; border-right: var(--smart-tooltip-arrow-width) solid transparent; border-bottom: var(--smart-tooltip-arrow-width) solid var(--smart-tooltip-arrow-color); border-top: initial; top: 0; bottom: calc(100% + var(--smart-tooltip-arrow-width)); transform: translateX(var(--smart-tooltip-arrow-translate)) } smart-tooltip[arrow][arrow-direction=left] { padding-bottom: initial; padding-left: var(--smart-tooltip-arrow-width) } smart-tooltip[arrow][arrow-direction=left] .smart-tooltip-content:after { border-bottom: var(--smart-tooltip-arrow-width) solid transparent; border-top: var(--smart-tooltip-arrow-width) solid transparent; border-right: var(--smart-tooltip-arrow-width) solid var(--smart-tooltip-arrow-color); border-left: initial; left: 0; top: calc(50% - var(--smart-tooltip-arrow-width)); transform: translateY(var(--smart-tooltip-arrow-translate)) } smart-tooltip[arrow][arrow-direction=right] { padding-bottom: initial; padding-right: var(--smart-tooltip-arrow-width) } smart-tooltip[arrow][arrow-direction=right] .smart-tooltip-content:after { border-bottom: var(--smart-tooltip-arrow-width) solid transparent; border-top: var(--smart-tooltip-arrow-width) solid transparent; border-left: var(--smart-tooltip-arrow-width) solid var(--smart-tooltip-arrow-color); border-right: initial; left: calc(100% - var(--smart-tooltip-arrow-width)); top: calc(50% - var(--smart-tooltip-arrow-width)); transform: translateY(var(--smart-tooltip-arrow-translate)) } smart-tooltip:not([animation=none]) { opacity: 0; transition: opacity .5s ease-in-out } smart-tooltip:not([animation=none])[visible] { opacity: 1 } smart-tooltip[right-to-left] .smart-tooltip-content { direction: rtl } smart-tree { display: block; width: var(--smart-tree-default-width); height: var(--smart-tree-default-height); overflow: hidden; visibility: hidden } .smart-tree.smart-container, .smart-tree>.smart-container { display: flex; flex-direction: column; position: relative } .smart-tree.smart-element { visibility: inherit } .smart-tree smart-scroll-bar { overflow: hidden } .smart-tree smart-scroll-viewer { position: relative; border: none; width: 100%; height: 100%; padding: 0 } .smart-tree smart-scroll-viewer.smart-scroll-viewer-element { border: none } .smart-tree smart-scroll-viewer.scroll-buttons-shown { width: 100%; height: calc(100% - 2 * var(--smart-tree-scroll-button-size)) } .smart-tree smart-scroll-viewer.scroll-buttons-shown.one-button-shown { width: 100%; height: calc(100% - var(--smart-tree-scroll-button-size)) } .smart-tree smart-tree-item, .smart-tree smart-tree-items-group { position: relative; height: auto; justify-content: space-between; align-items: center; white-space: nowrap; cursor: pointer } .smart-tree .smart-tree-drop-down, .smart-tree smart-tree-item[disabled], .smart-tree smart-tree-item[template-applied], .smart-tree smart-tree-items-group[disabled], .smart-tree[disabled] smart-tree-item, .smart-tree[disabled] smart-tree-items-group, .smart-tree[display-loading-indicator] smart-tree-item, .smart-tree[display-loading-indicator] smart-tree-items-group { cursor: default } .smart-tree smart-tree-item.smart-element, .smart-tree smart-tree-items-group.smart-element { border: none } .smart-tree smart-tree-item[separator]:after, .smart-tree smart-tree-items-group[separator]:after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background-color: rgba(0, 0, 0, .1); pointer-events: none } .smart-tree smart-tree-item { overflow: hidden; display: block; padding-left: 0 } .smart-tree smart-tree-item .smart-tree-item-shortcut { opacity: .5 } .smart-tree smart-tree-items-group { display: flex; flex-direction: column; overflow: hidden } .smart-tree smart-tree-items-group>.smart-tree-item-label-container { justify-content: flex-start; overflow: hidden } .smart-tree smart-tree-items-group>.smart-tree-item-label-container>.smart-tree-item-label-element { order: 1 } .smart-tree smart-tree-items-group .smart-tree-items-group-arrow { order: 0; position: relative; display: flex; justify-content: center; width: var(--smart-tree-indent); left: calc(1px - var(--smart-tree-indent)/ 2); height: 13px; font-family: var(--smart-font-family-icon); transform: rotate(0); line-height: 1 } .smart-tree smart-tree-items-group .smart-tree-items-group-arrow:after { position: relative; height: 100%; left: 0; top: 0 } .smart-tree smart-tree-items-group.filtered-child>.smart-tree-item-label-container>.smart-tree-item-label-element { font-weight: unset } .smart-tree .smart-tree-main-container { position: relative; width: 100%; height: 100%; overflow: hidden } .smart-tree .smart-tree-items-group-opened>.smart-tree-item-label-container>.smart-tree-items-group-arrow { transform: rotate(180deg) } .smart-tree .smart-tree-item-label-element { width: 100%; display: flex; align-items: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis } .smart-tree .smart-tree-item-label-element>span { position: relative; padding: var(--smart-tree-item-padding); overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .smart-tree .smart-tree-item-label-element>span>smart-button button { padding: initial } .smart-tree .smart-tree-item-label-element>span>i { vertical-align: middle } .smart-tree .smart-tree-item-label-container { height: var(--smart-tree-item-label-height); position: relative; width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: space-between; overflow: hidden } .smart-tree .smart-tree-edit-input { position: absolute; outline: 0; margin: 0 var(--smart-tree-item-horizontal-offset); border: 1px solid var(--smart-border); width: calc(100% - 2 * var(--smart-tree-item-horizontal-offset)); font-family: var(--smart-font-family); font-size: var(--smart-font-size); z-index: 1 } .smart-tree .smart-tree-edit-input::selection { background-color: var(--smart-ui-state-selected); color: var(--smart-ui-state-color-selected) } .smart-tree .smart-tree-filter-input-container { display: none; position: relative; width: calc(100% - 2 * var(--smart-tree-item-horizontal-offset)); height: calc(var(--smart-text-box-default-height)); margin: var(--smart-tree-item-vertical-offset) var(--smart-tree-item-horizontal-offset); font-size: inherit } .smart-tree .smart-tree-filter-input-container:after { content: var(--smart-icon-filter); font-family: var(--smart-font-family-icon); height: var(--smart-text-box-default-height); position: absolute; top: 0; width: 25px; display: flex; align-items: center; justify-content: center; left: calc(100% - 25px) } .smart-tree .smart-filter-input { border: 1px solid var(--smart-border); color: inherit; background: inherit; width: 100%; height: 100%; padding-left: var(--smart-editor-label-padding); padding-right: calc(var(--smart-editor-label-padding) + 25px); font-size: inherit } .smart-tree .smart-filter-input:focus { outline: 0 } .smart-tree .smart-filter-input::selection { background-color: var(--smart-ui-state-selected); color: var(--smart-ui-state-color-selected) } .smart-tree .smart-tree-scroll-button { width: 100%; height: var(--smart-tree-scroll-button-size); background-color: var(--smart-scroll-bar-button-background); --smart-button-padding: 0 } .smart-tree .smart-tree-scroll-button>button { border: none } .smart-tree .smart-scroll-viewer-container .smart-tree-main-container { padding-left: var(--smart-tree-item-horizontal-offset); padding-right: var(--smart-tree-item-horizontal-offset); padding-top: var(--smart-tree-item-vertical-offset) } .smart-tree .smart-scroll-viewer-container.vscroll .smart-tree-main-container { padding-right: var(--smart-tree-item-horizontal-offset) } .smart-tree .smart-scroll-viewer-content-container { display: block; padding: 0 } .smart-tree .smart-tree-drop-down { width: 100%; height: auto; transform: none; transform: scaleY(1) } .smart-tree .smart-tree-drop-down.smart-visibility-hidden { margin-top: 0; height: 0; transform: scaleY(0) } .smart-tree .drop-target:after { content: ''; position: absolute; box-sizing: border-box; border: 2px dashed var(--smart-primary); width: 100%; height: 100%; left: 0; top: 0; pointer-events: none; opacity: .75 } .smart-tree .drop-target.top:after { border: none; border-top: 2px dashed var(--smart-primary) } .smart-tree .drop-target.bottom:after { border: none; border-bottom: 2px dashed var(--smart-primary) } .smart-tree .smart-ripple { background: var(--smart-primary) } .smart-tree .smart-hidden { display: none !important } .smart-tree[overflow=hidden], .smart-tree[scroll-mode=scrollButtons] { --smart-scroll-bar-size: 0px } .smart-tree[selection-mode=radioButton] smart-tree-item>.smart-tree-item-label-container:before, .smart-tree[selection-mode=radioButton] smart-tree-items-group>.smart-tree-item-label-container:before, .smart-tree[selection-mode=checkBox] smart-tree-item>.smart-tree-item-label-container:before, .smart-tree[selection-mode=checkBox] smart-tree-items-group>.smart-tree-item-label-container:before { content: ''; transform: scale(0) } .smart-tree[selection-mode=radioButton] smart-tree-item>.smart-tree-item-label-container:after, .smart-tree[selection-mode=radioButton] smart-tree-items-group>.smart-tree-item-label-container:after, .smart-tree[selection-mode=checkBox] smart-tree-item>.smart-tree-item-label-container:after, .smart-tree[selection-mode=checkBox] smart-tree-items-group>.smart-tree-item-label-container:after { content: ''; position: absolute; border: var(--smart-border-width) solid var(--smart-border); border-top-left-radius: var(--smart-border-top-left-radius); border-top-right-radius: var(--smart-border-top-right-radius); border-bottom-left-radius: var(--smart-border-bottom-left-radius); border-bottom-right-radius: var(--smart-border-bottom-right-radius); width: var(--smart-check-box-default-size); height: var(--smart-check-box-default-size); padding: 1px; margin-left: 5px; font-family: var(--smart-font-family-icon); justify-content: center; align-items: center; display: flex } .smart-tree[filterable] .smart-tree-filter-input-container, .smart-tree[scroll-mode=scrollButtons] .smart-tree-scroll-button { display: block } .smart-tree[selection-mode=radioButton] smart-tree-item[selected][focus]>.smart-tree-item-label-container:before, .smart-tree[selection-mode=radioButton] smart-tree-items-group[selected][focus]>.smart-tree-item-label-container:before, .smart-tree[selection-mode=checkBox] smart-tree-item[selected][focus]>.smart-tree-item-label-container:before, .smart-tree[selection-mode=checkBox] smart-tree-items-group[selected][focus]>.smart-tree-item-label-container:before { position: absolute; content: ''; margin-left: 5px; border-radius: 50%; width: calc(var(--smart-check-box-default-size) + 16px); height: calc(var(--smart-check-box-default-size) + 16px); background: var(--smart-primary); opacity: .3; z-index: 1; transform: scale(1) } .smart-tree[selection-mode=radioButton][show-lines] smart-tree-items-group>.smart-tree-item-label-container:after, .smart-tree[selection-mode=checkBox][show-lines] smart-tree-items-group>.smart-tree-item-label-container:after { margin-left: calc(var(--smart-tree-indent) + 5px) } .smart-tree[selection-mode=radioButton][show-lines] smart-tree-items-group[selected][focus]>.smart-tree-item-label-container:before, .smart-tree[selection-mode=checkBox][show-lines] smart-tree-items-group[selected][focus]>.smart-tree-item-label-container:before { margin-left: calc(var(--smart-tree-indent)) } .smart-tree[selection-mode=radioButton][show-lines] smart-tree-item[selected][focus]>.smart-tree-item-label-container:before, .smart-tree[selection-mode=checkBox][show-lines] smart-tree-item[selected][focus]>.smart-tree-item-label-container:before { margin-left: 0 } .smart-tree[selection-mode=radioButton] smart-tree-item .smart-tree-item-label-element, .smart-tree[selection-mode=radioButton] smart-tree-items-group>.smart-tree-item-label-container>.smart-tree-item-label-element, .smart-tree[selection-mode=checkBox] smart-tree-item .smart-tree-item-label-element, .smart-tree[selection-mode=checkBox] smart-tree-items-group>.smart-tree-item-label-container>.smart-tree-item-label-element { padding-left: calc(var(--smart-tree-indent) + 10px) } .smart-tree[selection-mode=radioButton] .smart-tree-item-label-element>span, .smart-tree[selection-mode=checkBox] .smart-tree-item-label-element>span { padding-left: 5px } .smart-tree[selection-mode=radioButton]:not([animation=none]) smart-tree-item>.smart-tree-item-label-container:before, .smart-tree[selection-mode=radioButton]:not([animation=none]) smart-tree-items-group>.smart-tree-item-label-container:before, .smart-tree[selection-mode=checkBox]:not([animation=none]) smart-tree-item>.smart-tree-item-label-container:before, .smart-tree[selection-mode=checkBox]:not([animation=none]) smart-tree-items-group>.smart-tree-item-label-container:before { transition: transform .25s ease-in-out } .smart-tree[selection-mode=radioButton][toggle-element-position=far] smart-tree-item[focus]>.smart-tree-item-label-container:before, .smart-tree[selection-mode=radioButton][toggle-element-position=far] smart-tree-items-group[focus]>.smart-tree-item-label-container:before, .smart-tree[selection-mode=checkBox][toggle-element-position=far] smart-tree-item[focus]>.smart-tree-item-label-container:before, .smart-tree[selection-mode=checkBox][toggle-element-position=far] smart-tree-items-group[focus]>.smart-tree-item-label-container:before { margin-left: -1px } .smart-tree[selection-mode=radioButton]:not([show-lines]) smart-tree-items-group>.smart-tree-item-label-container:after, .smart-tree[selection-mode=checkBox]:not([show-lines]) smart-tree-items-group>.smart-tree-item-label-container:after { margin-left: calc(var(--smart-check-box-default-size) + 5px) } .smart-tree[selection-mode=radioButton]:not([show-lines]):not([toggle-element-position=far]) smart-tree-item>.smart-tree-item-label-container:after, .smart-tree[selection-mode=radioButton]:not([show-lines]):not([toggle-element-position=far]) smart-tree-items-group>.smart-tree-item-label-container:after, .smart-tree[selection-mode=checkBox]:not([show-lines]):not([toggle-element-position=far]) smart-tree-item>.smart-tree-item-label-container:after, .smart-tree[selection-mode=checkBox]:not([show-lines]):not([toggle-element-position=far]) smart-tree-items-group>.smart-tree-item-label-container:after { margin-left: calc(var(--smart-check-box-default-size) - 5px) } .smart-tree[selection-mode=radioButton]:not([show-lines]):not([toggle-element-position=far]):not([right-to-left]) smart-tree-item .smart-tree-item-label-element>span, .smart-tree[selection-mode=checkBox]:not([show-lines]):not([toggle-element-position=far]):not([right-to-left]) smart-tree-item .smart-tree-item-label-element>span { padding: var(--smart-tree-item-padding) } .smart-tree[selection-mode=radioButton] smart-tree-item>.smart-tree-item-label-container:after, .smart-tree[selection-mode=radioButton] smart-tree-items-group>.smart-tree-item-label-container:after { border-radius: 100% } .smart-tree[selection-mode=radioButton] smart-tree-item[selected]>.smart-tree-item-label-container:after, .smart-tree[selection-mode=radioButton] smart-tree-items-group[selected]>.smart-tree-item-label-container:after { content: var(--smart-icon-radio); background: var(--smart-primary); border-color: var(--smart-primary); color: var(--smart-primary-color) } .smart-tree[selection-mode=checkBox] smart-tree-item[selected]>.smart-tree-item-label-container:after, .smart-tree[selection-mode=checkBox] smart-tree-items-group[selected]>.smart-tree-item-label-container:after { background: var(--smart-primary); border-color: var(--smart-primary); color: var(--smart-primary-color); content: var(--smart-icon-check) } .smart-tree[selection-mode=checkBox] smart-tree-item[indeterminate]>.smart-tree-item-label-container:after, .smart-tree[selection-mode=checkBox] smart-tree-items-group[indeterminate]>.smart-tree-item-label-container:after { padding: 2px; background-clip: content-box; width: calc(var(--smart-check-box-default-size) - 1px); height: calc(var(--smart-check-box-default-size) - 1px) } .smart-tree[filterable] smart-scroll-viewer { height: calc(100% - var(--smart-text-box-default-height) - 2 * var(--smart-tree-item-vertical-offset)) } .smart-tree[filterable] smart-scroll-viewer.scroll-buttons-shown { height: calc(100% - 2 * var(--smart-tree-scroll-button-size) - var(--smart-text-box-default-height) - 2 * var(--smart-tree-item-vertical-offset)) } .smart-tree[filterable] smart-scroll-viewer.scroll-buttons-shown.one-button-shown { height: calc(100% - var(--smart-tree-scroll-button-size) - var(--smart-text-box-default-height) - 2 * var(--smart-tree-item-vertical-offset)) } .smart-tree[filter-applied] .smart-tree-item-label-element { font-weight: bolder } .smart-tree[filter-applied] smart-tree-items-group.hidden-children { cursor: not-allowed } .smart-tree:not([toggle-element-position=far]) smart-tree-items-group .smart-tree-items-group-arrow { opacity: 1; z-index: 1 } .smart-tree[toggle-element-position=far] smart-tree-items-group>.smart-tree-item-label-container { justify-content: space-between } .smart-tree[toggle-element-position=far] smart-tree-items-group>.smart-tree-item-label-container>.smart-tree-item-label-element { order: 0; margin-left: var(--smart-tree-indent) } .smart-tree[toggle-element-position=far] smart-tree-items-group>.smart-tree-item-label-container>.smart-tree-items-group-arrow { order: 1 } .smart-tree:not([show-lines])[selection-mode=radioButton][toggle-element-position=far]:not([right-to-left]) smart-tree-items-group>.smart-tree-item-label-container>.smart-tree-item-label-element, .smart-tree:not([show-lines])[selection-mode=checkBox][toggle-element-position=far]:not([right-to-left]) smart-tree-items-group>.smart-tree-item-label-container>.smart-tree-item-label-element { margin-left: calc(var(--smart-tree-indent) - 11px) } .smart-tree:not([show-lines]):not([toggle-element-position=far]):not([right-to-left]) smart-tree-items-group>.smart-tree-item-label-container>.smart-tree-item-label-element { margin-left: -4px } .smart-tree:not([show-lines])[toggle-element-position=far]:not([right-to-left]) smart-tree-items-group>.smart-tree-item-label-container>.smart-tree-item-label-element { margin-left: calc(var(--smart-tree-indent) - 4px) } .smart-tree:not([show-lines]):not([selection-display-mode=label]):not([right-to-left]) smart-tree-items-group>.smart-tree-item-label-container>.smart-tree-item-label-element>span { padding-left: 0 } .smart-tree[show-lines] smart-tree-item>.smart-tree-item-label-container, .smart-tree[show-lines] smart-tree-item>.smart-tree-item-label-container>.smart-tree-item-label-element, .smart-tree[show-lines] smart-tree-items-group>.smart-tree-item-label-container, .smart-tree[show-lines] smart-tree-items-group>.smart-tree-item-label-container>.smart-tree-item-label-element { position: relative; overflow: visible } .smart-tree[show-lines] smart-tree-item>.smart-tree-item-label-container>.smart-tree-item-label-element:before, .smart-tree[show-lines] smart-tree-items-group>.smart-tree-item-label-container>.smart-tree-item-label-element:before { content: ''; position: absolute; border-left: var(--smart-tree-lines-width) var(--smart-tree-lines-style) var(--smart-tree-lines-color); height: 300%; left: calc(0px - var(--smart-tree-indent)); pointer-events: none } .smart-tree[show-lines] smart-tree-item>.smart-tree-item-label-container>.smart-tree-item-label-element:after, .smart-tree[show-lines] smart-tree-items-group>.smart-tree-item-label-container>.smart-tree-item-label-element:after { content: ''; position: absolute; border-top: var(--smart-tree-lines-width) var(--smart-tree-lines-style) var(--smart-tree-lines-color); pointer-events: none; width: var(--smart-tree-indent); left: calc(0px - var(--smart-tree-indent)) } .smart-tree:not([selection-display-mode=label]) smart-tree-item, .smart-tree:not([selection-display-mode=label]) smart-tree-items-group>.smart-tree-item-label-container, .smart-tree[selection-display-mode=label] smart-tree-item>.smart-tree-item-label-container>.smart-tree-item-label-element>span, .smart-tree[selection-display-mode=label] smart-tree-items-group>.smart-tree-item-label-container>.smart-tree-item-label-element>span { border-top-left-radius: var(--smart-item-border-top-left-radius); border-top-right-radius: var(--smart-item-border-top-right-radius); border-bottom-left-radius: var(--smart-item-border-bottom-left-radius); border-bottom-right-radius: var(--smart-item-border-bottom-right-radius); border-width: var(--smart-item-border-width); border-style: solid; margin-bottom: var(--smart-tree-item-vertical-offset) } .smart-tree[show-lines] smart-tree-item.last-filtered-child>.smart-tree-item-label-container>.smart-tree-item-label-element:before, .smart-tree[show-lines] smart-tree-item:last-child>.smart-tree-item-label-container>.smart-tree-item-label-element:before, .smart-tree[show-lines] smart-tree-items-group.last-filtered-child>.smart-tree-item-label-container>.smart-tree-item-label-element:before, .smart-tree[show-lines] smart-tree-items-group:last-child>.smart-tree-item-label-container>.smart-tree-item-label-element:before { height: 150%; top: -100% } .smart-tree[show-lines] smart-tree-item { padding-left: var(--smart-tree-indent) } .smart-tree[show-lines] smart-tree-items-group>.smart-tree-item-label-container>.smart-tree-item-label-element { width: calc(100% - var(--smart-tree-indent)) } .smart-tree[show-lines]:not([show-root-lines]) smart-tree-item[level="1"] .smart-tree-item-label-element:after, .smart-tree[show-lines]:not([show-root-lines]) smart-tree-item[level="1"] .smart-tree-item-label-element:before, .smart-tree[show-lines]:not([show-root-lines]) smart-tree-items-group[level="1"]>.smart-tree-item-label-container>.smart-tree-item-label-element:after, .smart-tree[show-lines]:not([show-root-lines]) smart-tree-items-group[level="1"]>.smart-tree-item-label-container>.smart-tree-item-label-element:before { content: none } .smart-tree[show-lines][show-root-lines] smart-tree-item[level="1"] .smart-tree-item-label-element:after, .smart-tree[show-lines][show-root-lines] smart-tree-item[level="1"] .smart-tree-item-label-element:before, .smart-tree[show-lines][show-root-lines] smart-tree-items-group[level="1"]>.smart-tree-item-label-container>.smart-tree-item-label-element:after, .smart-tree[show-lines][show-root-lines] smart-tree-items-group[level="1"]>.smart-tree-item-label-container>.smart-tree-item-label-element:before { pointer-events: none } .smart-tree[show-lines] .smart-tree-items-group-expanded:not(:last-child):not(.last-filtered-child)>.smart-tree-item-label-container>.smart-tree-item-label-element:before { height: 3000px; z-index: 1 } .smart-tree:not([selection-display-mode=label]) smart-tree-item { border-color: transparent } .smart-tree:not([selection-display-mode=label]) smart-tree-item[focus] { color: var(--smart-ui-state-color-focus); background-color: var(--smart-ui-state-focus); border-color: var(--smart-ui-state-border-focus) } .smart-tree:not([selection-display-mode=label]) smart-tree-item[selected] { border-color: var(--smart-ui-state-border-selected); background-color: var(--smart-ui-state-selected); color: var(--smart-ui-state-color-selected) } .smart-tree:not([selection-display-mode=label]) smart-tree-items-group>.smart-tree-item-label-container { border-color: transparent } .smart-tree:not([selection-display-mode=label]) smart-tree-items-group[focus]>.smart-tree-item-label-container { color: var(--smart-ui-state-color-focus); background-color: var(--smart-ui-state-focus); border-color: var(--smart-ui-state-border-focus) } .smart-tree:not([selection-display-mode=label]) smart-tree-items-group[selected]>.smart-tree-item-label-container { border-color: var(--smart-ui-state-border-selected); background-color: var(--smart-ui-state-selected); color: var(--smart-ui-state-color-selected) } .smart-tree:not([selection-display-mode=label]):not([animation=none]) smart-tree-item, .smart-tree:not([selection-display-mode=label]):not([animation=none]) smart-tree-items-group>.smart-tree-item-label-container { transition: color ease-in-out .28s, border-color ease-in-out .28s, background ease-in-out .28s } .smart-tree[selection-display-mode=label] smart-tree-item>.smart-tree-item-label-container>.smart-tree-item-label-element>span, .smart-tree[selection-display-mode=label] smart-tree-items-group>.smart-tree-item-label-container>.smart-tree-item-label-element>span { border-color: transparent; margin-top: var(--smart-tree-item-vertical-offset) } .smart-tree[selection-display-mode=label] smart-tree-item[focus]>.smart-tree-item-label-container>.smart-tree-item-label-element>span:not(.smart-ripple), .smart-tree[selection-display-mode=label] smart-tree-items-group[focus]>.smart-tree-item-label-container>.smart-tree-item-label-element>span:not(.smart-ripple) { color: var(--smart-ui-state-color-focus); background-color: var(--smart-ui-state-focus); border-color: var(--smart-ui-state-border-focus) } .smart-tree[selection-display-mode=label] smart-tree-items-group .smart-tree-items-group-arrow { top: calc(-.5px - var(--smart-tree-item-border-width)/ 2) } .smart-tree[selection-display-mode=label][selection-mode=radioButton]:not([right-to-left]) smart-tree-item>.smart-tree-item-label-container>.smart-tree-item-label-element>span, .smart-tree[selection-display-mode=label][selection-mode=radioButton]:not([right-to-left]) smart-tree-items-group>.smart-tree-item-label-container>.smart-tree-item-label-element>span, .smart-tree[selection-display-mode=label][selection-mode=checkBox]:not([right-to-left]) smart-tree-item>.smart-tree-item-label-container>.smart-tree-item-label-element>span, .smart-tree[selection-display-mode=label][selection-mode=checkBox]:not([right-to-left]) smart-tree-items-group>.smart-tree-item-label-container>.smart-tree-item-label-element>span { margin-left: 5px; padding: var(--smart-tree-item-padding) } .smart-tree[selection-display-mode=label][selection-mode=radioButton]:not([show-lines]):not([right-to-left]):not([toggle-element-position=far]) smart-tree-item>.smart-tree-item-label-container>.smart-tree-item-label-element, .smart-tree[selection-display-mode=label][selection-mode=checkBox]:not([show-lines]):not([right-to-left]):not([toggle-element-position=far]) smart-tree-item>.smart-tree-item-label-container>.smart-tree-item-label-element { padding-left: calc(var(--smart-tree-indent) + 15px) } .smart-tree[selection-display-mode=label][selection-mode=radioButton]:not([show-lines]):not([right-to-left]):not([toggle-element-position=far]) smart-tree-items-group>.smart-tree-item-label-container>.smart-tree-item-label-element, .smart-tree[selection-display-mode=label][selection-mode=checkBox]:not([show-lines]):not([right-to-left]):not([toggle-element-position=far]) smart-tree-items-group>.smart-tree-item-label-container>.smart-tree-item-label-element { padding-left: calc(var(--smart-tree-indent) + 3px) } .smart-tree[selection-display-mode=label][selection-mode=radioButton]:not([show-lines]):not([right-to-left])[toggle-element-position=far] smart-tree-items-group>.smart-tree-item-label-container>.smart-tree-item-label-element, .smart-tree[selection-display-mode=label][selection-mode=checkBox]:not([show-lines]):not([right-to-left])[toggle-element-position=far] smart-tree-items-group>.smart-tree-item-label-container>.smart-tree-item-label-element { margin-left: 0 } .smart-tree[selection-display-mode=label]:not([selection-mode=checkBox]):not([selection-mode=radioButton]) smart-tree-item[selected]>.smart-tree-item-label-container>.smart-tree-item-label-element>span:not(.smart-ripple), .smart-tree[selection-display-mode=label]:not([selection-mode=checkBox]):not([selection-mode=radioButton]) smart-tree-items-group[selected]>.smart-tree-item-label-container>.smart-tree-item-label-element>span:not(.smart-ripple) { background-color: var(--smart-ui-state-selected); color: var(--smart-ui-state-color-selected); border-color: var(--smart-ui-state-border-selected) } .smart-tree[selection-display-mode=label]:not([show-lines]):not([right-to-left]) smart-tree-item>.smart-tree-item-label-container>.smart-tree-item-label-element>span { margin: var(--smart-tree-item-padding); margin-right: 0; margin-top: 0; margin-top: var(--smart-tree-item-vertical-offset); margin-bottom: var(--smart-tree-item-vertical-offset) } .smart-tree[selection-display-mode=label]:not([animation=none]) smart-tree-item>.smart-tree-item-label-container>.smart-tree-item-label-element>span, .smart-tree[selection-display-mode=label]:not([animation=none]) smart-tree-items-group>.smart-tree-item-label-container>.smart-tree-item-label-element>span { transition: color ease-in-out .28s, background ease-in-out .28s, border-color ease-in-out .28s } .smart-tree[selection-display-mode=label]:not([animation=none]) smart-tree-item[focus]:not([selected])>.smart-tree-item-label-container>.smart-tree-item-label-element>span:not(.smart-ripple), .smart-tree[selection-display-mode=label]:not([animation=none]) smart-tree-items-group[focus]:not([selected])>.smart-tree-item-label-container>.smart-tree-item-label-element>span:not(.smart-ripple) { transition: color ease-in-out .28s, border-color ease-in-out .28s, background ease-in-out .28s } .smart-tree[auto-hide-toggle-element] .hidden-arrows smart-tree-items-group .smart-tree-items-group-arrow { opacity: 0 } .smart-tree:not([animation=none]) .smart-tree-drop-down { -webkit-transform-origin: top; transform-origin: top; transition: height .2s ease-in, transform .2s ease-in, visibility .2s ease-in } .smart-tree:not([animation=none]) .smart-tree-item-label-container>.smart-tree-items-group-arrow { transition: transform .2s ease-in } .smart-tree:not([animation=none])[auto-hide-toggle-element] .smart-tree-item-label-container>.smart-tree-items-group-arrow { transition: transform .2s ease-in, opacity .2s ease-in } @media (hover:hover) { .smart-tree[selection-mode=radioButton] smart-tree-item:hover>.smart-tree-item-label-container>.smart-tree-item-label-element span.smart-ripple, .smart-tree[selection-mode=radioButton] smart-tree-items-group>.smart-tree-item-label-container:hover>.smart-tree-item-label-element span.smart-ripple, .smart-tree[selection-mode=checkBox] smart-tree-item:hover>.smart-tree-item-label-container>.smart-tree-item-label-element span.smart-ripple, .smart-tree[selection-mode=checkBox] smart-tree-items-group>.smart-tree-item-label-container:hover>.smart-tree-item-label-element span.smart-ripple { background-color: var(--smart-ui-state-selected) } .smart-tree[selection-mode=checkBox] smart-tree-item:hover>.smart-tree-item-label-container:after, .smart-tree[selection-mode=checkBox] smart-tree-items-group>.smart-tree-item-label-container:hover:after { color: var(--smart-background-color); background-color: var(--smart-background); border-color: var(--smart-border) } .smart-tree[selection-mode=checkBox] smart-tree-item[indeterminate]:not(:hover)>.smart-tree-item-label-container:after, .smart-tree[selection-mode=checkBox] smart-tree-items-group[indeterminate]>.smart-tree-item-label-container:not(:hover):after { background-color: var(--smart-ui-state-selected) } .smart-tree[selection-mode=radioButton] smart-tree-item:not([selected]):hover>.smart-tree-item-label-container:after, .smart-tree[selection-mode=radioButton] smart-tree-items-group:not([selected])>.smart-tree-item-label-container:hover:after { color: var(--smart-background-color); background-color: var(--smart-background); border-color: var(--smart-border) } .smart-tree:not([selection-display-mode=label]) smart-tree-item:not([selected])[hover], .smart-tree:not([selection-display-mode=label]) smart-tree-items-group:not([selected])[hover]>.smart-tree-item-label-container, .smart-tree:not([selection-display-mode=label]):not([disable-hover]) smart-tree-item:not([selected]):hover, .smart-tree:not([selection-display-mode=label]):not([disable-hover]) smart-tree-items-group:not([selected])>.smart-tree-item-label-container:hover, .smart-tree[selection-display-mode=label] smart-tree-item:not([selected])[hover]>.smart-tree-item-label-container>.smart-tree-item-label-element>span, .smart-tree[selection-display-mode=label] smart-tree-items-group:not([selected])[hover]>.smart-tree-item-label-container, .smart-tree[selection-display-mode=label]:not([disable-hover]) smart-tree-item:not([selected]):hover>.smart-tree-item-label-container>.smart-tree-item-label-element>span { color: var(--smart-ui-state-color-hover); background-color: var(--smart-ui-state-hover); border-color: var(--smart-ui-state-border-hover) } } .smart-tree-item-feedback { position: absolute; display: flex; align-items: center; box-shadow: var(--smart-elevation-8); border: 1px solid var(--smart-border); padding: 5px; color: var(--smart-background-color); background-color: var(--smart-background); font-family: var(--smart-font-family); font-size: var(--smart-font-size); white-space: nowrap; cursor: move; z-index: 10000 } .smart-tree-item-feedback.multiple { font-family: var(--smart-font-family-icon); font-size: 26px } .smart-hidden { display: none !important } .smart-tree smart-tree-items-group[right-to-left] smart-tree-item .smart-tree-item-label-element, .smart-tree smart-tree-items-group[right-to-left] smart-tree-items-group>.smart-tree-item-label-container>.smart-tree-item-label-element { padding-left: initial; padding-right: calc(var(--smart-tree-indent) + 10px) } .smart-tree smart-tree-items-group[right-to-left] smart-tree-item>.smart-tree-item-label-container:after { margin-left: -5px } .smart-tree smart-tree-items-group[right-to-left] smart-tree-items-group>.smart-tree-item-label-container:after { margin-left: calc(0px - var(--smart-check-box-default-size) - 5px) } .smart-tree smart-tree-items-group[right-to-left] smart-tree-item[focus]>.smart-tree-item-label-container:before, .smart-tree smart-tree-items-group[right-to-left] smart-tree-items-group[focus]>.smart-tree-item-label-container:before { margin-left: -3px } .smart-tree smart-tree-items-group[right-to-left][show-lines] smart-tree-item[focus]>.smart-tree-item-label-container:before, .smart-tree smart-tree-items-group[right-to-left][toggle-element-position=far] smart-tree-item[focus]>.smart-tree-item-label-container:before, .smart-tree smart-tree-items-group[right-to-left][toggle-element-position=far] smart-tree-items-group[focus]>.smart-tree-item-label-container:before { margin-left: 1px } .smart-tree smart-tree-items-group[right-to-left][show-lines] smart-tree-items-group[focus]>.smart-tree-item-label-container:before { margin-left: calc(1px - var(--smart-check-box-default-size)) } .smart-tree[toggle-element-position=far][right-to-left] smart-tree-items-group>.smart-tree-item-label-container>.smart-tree-item-label-element { margin-left: initial; margin-right: var(--smart-tree-indent) } .smart-tree:not([show-lines])[selection-mode=radioButton][toggle-element-position=far][right-to-left] smart-tree-item .smart-tree-item-label-element, .smart-tree:not([show-lines])[selection-mode=radioButton][toggle-element-position=far][right-to-left] smart-tree-items-group>.smart-tree-item-label-container>.smart-tree-item-label-element, .smart-tree:not([show-lines])[selection-mode=checkBox][toggle-element-position=far][right-to-left] smart-tree-item .smart-tree-item-label-element, .smart-tree:not([show-lines])[selection-mode=checkBox][toggle-element-position=far][right-to-left] smart-tree-items-group>.smart-tree-item-label-container>.smart-tree-item-label-element { padding-right: calc(var(--smart-tree-indent) + 4px) } .smart-tree:not([show-lines]):not([toggle-element-position=far])[right-to-left] smart-tree-items-group>.smart-tree-item-label-container>.smart-tree-item-label-element { margin-right: -4px } .smart-tree:not([show-lines])[toggle-element-position=far][right-to-left] smart-tree-items-group>.smart-tree-item-label-container>.smart-tree-item-label-element { margin-right: calc(var(--smart-tree-indent) - 4px) } .smart-tree:not([show-lines]):not([selection-display-mode=label])[right-to-left] smart-tree-items-group>.smart-tree-item-label-container>.smart-tree-item-label-element>span { padding-right: 0 } .smart-tree[show-lines][right-to-left] smart-tree-item { padding-left: 0; padding-right: var(--smart-tree-indent) } .smart-tree[show-lines][right-to-left] smart-tree-item .smart-tree-item-label-element:after, .smart-tree[show-lines][right-to-left] smart-tree-item .smart-tree-item-label-element:before, .smart-tree[show-lines][right-to-left] smart-tree-items-group>.smart-tree-item-label-container>.smart-tree-item-label-element:after, .smart-tree[show-lines][right-to-left] smart-tree-items-group>.smart-tree-item-label-container>.smart-tree-item-label-element:before { right: calc(0px - var(--smart-tree-indent)); left: initial } .smart-tree[selection-display-mode=label][selection-mode=radioButton]:not([show-lines])[right-to-left]:not([toggle-element-position=far]) smart-tree-item>.smart-tree-item-label-container>.smart-tree-item-label-element, .smart-tree[selection-display-mode=label][selection-mode=checkBox]:not([show-lines])[right-to-left]:not([toggle-element-position=far]) smart-tree-item>.smart-tree-item-label-container>.smart-tree-item-label-element { padding-right: calc(var(--smart-tree-indent) + 15px) } .smart-tree[selection-display-mode=label][selection-mode=radioButton]:not([show-lines])[right-to-left]:not([toggle-element-position=far]) smart-tree-items-group>.smart-tree-item-label-container>.smart-tree-item-label-element, .smart-tree[selection-display-mode=label][selection-mode=checkBox]:not([show-lines])[right-to-left]:not([toggle-element-position=far]) smart-tree-items-group>.smart-tree-item-label-container>.smart-tree-item-label-element { padding-right: calc(var(--smart-tree-indent) + 3px) } .smart-tree[selection-display-mode=label][selection-mode=radioButton]:not([show-lines])[right-to-left][toggle-element-position=far] smart-tree-item>.smart-tree-item-label-container>.smart-tree-item-label-element, .smart-tree[selection-display-mode=label][selection-mode=radioButton]:not([show-lines])[right-to-left][toggle-element-position=far] smart-tree-items-group>.smart-tree-item-label-container>.smart-tree-item-label-element, .smart-tree[selection-display-mode=label][selection-mode=checkBox]:not([show-lines])[right-to-left][toggle-element-position=far] smart-tree-item>.smart-tree-item-label-container>.smart-tree-item-label-element, .smart-tree[selection-display-mode=label][selection-mode=checkBox]:not([show-lines])[right-to-left][toggle-element-position=far] smart-tree-items-group>.smart-tree-item-label-container>.smart-tree-item-label-element { margin-right: 5px } .smart-tree[selection-display-mode=label]:not([show-lines])[right-to-left] smart-tree-item>.smart-tree-item-label-container>.smart-tree-item-label-element>span { margin: var(--smart-tree-item-padding); margin-left: 0; margin-top: var(--smart-tree-item-vertical-offset); margin-bottom: var(--smart-tree-item-vertical-offset) } .smart-tree[right-to-left] smart-tree-items-group .smart-tree-items-group-arrow { right: calc(1px - var(--smart-tree-indent)/ 2); left: initial } .smart-tree[right-to-left] .smart-tree-filter-input-container:after { left: 0 } .smart-tree[right-to-left] .smart-tree-item-label-container { flex-direction: row-reverse; position: relative; overflow: visible } .smart-tree[right-to-left] .smart-filter-input { direction: rtl; padding-right: 1px; padding-left: 25px } .smart-tree[right-to-left] .smart-tree-edit-input { direction: rtl } .smart-tree[right-to-left] .smart-tree-item-label-element { direction: rtl; position: relative; overflow: visible } smart-window:not([opened]) { opacity: 0 } .smart-window:not(.smart-container) { position: absolute; top: calc(50% - var(--smart-window-default-height)/ 2); left: calc(50% - var(--smart-window-default-width)/ 2); width: var(--smart-window-default-width); height: var(--smart-window-default-height); min-width: var(--smart-window-min-width); min-height: var(--smart-window-header-height); box-shadow: var(--smart-elevation-24); z-index: calc(var(--smart-editor-drop-down-z-index) - 1); display: block; overflow: hidden } .smart-window>.smart-container:not(.smart-window) { max-height: inherit } .smart-window .smart-content-container { display: flex; flex-direction: column; font-family: inherit; font-size: inherit; width: 100%; height: 100%; outline: 0; max-height: inherit } .smart-window .smart-content-container>.smart-header-section { display: flex; justify-content: space-between; cursor: move; overflow: hidden; align-items: center; touch-action: none; width: 100%; font-family: inherit; font-size: inherit; user-select: none; -webkit-user-select: none; -ms-user-select: none; -moz-user-select: none; border-color: var(--smart-border); color: var(--smart-surface-color); line-height: initial; height: var(--smart-window-header-height); min-height: var(--smart-window-header-height); background: var(--smart-window-header-background); padding: var(--smart-window-header-padding) } .smart-window .smart-content-container>.smart-header-section>.smart-buttons-container { height: 100%; display: flex; justify-content: center; align-items: center } .smart-window .smart-content-container>.smart-header-section>.smart-buttons-container button { position: relative; margin-left: 1px; margin-right: 1px; cursor: pointer; height: var(--smart-window-header-button-size); width: var(--smart-window-header-button-size); padding: 0; min-height: 0; background: 0 0; color: inherit; border: none; outline: 0 } .smart-window .smart-content-container>.smart-header-section>.smart-buttons-container button:active { outline: 0; background-color: initial } .smart-window .smart-content-container>.smart-content { width: 100%; height: calc(100% - var(--smart-window-header-height)); display: flex; align-items: center; overflow-y: auto; padding: var(--smart-window-content-padding); background: var(--smart-background); flex-direction: column } @media not all and (min-resolution:0.001dpcm) { .smart-window .smart-content-container>.smart-content { align-content: start } } .smart-window .smart-content-container>.smart-footer { width: 100%; min-height: var(--smart-window-footer-height); font-family: inherit; font-size: inherit; user-select: none; -webkit-user-select: none; -ms-user-select: none; -moz-user-select: none; border-color: var(--smart-border); color: var(--smart-surface-color); line-height: initial; position: relative; background-color: initial; display: flex; justify-content: center; height: var(--smart-window-footer-height); background: var(--smart-window-footer-background); padding: var(--smart-window-footer-padding) } .smart-window .smart-content-container>.smart-footer:empty { display: none } .smart-window .smart-content-container.smart-window-resizing-left, .smart-window .smart-content-container.smart-window-resizing-left>.smart-header-section, .smart-window .smart-content-container.smart-window-resizing-right, .smart-window .smart-content-container.smart-window-resizing-right>.smart-header-section { cursor: e-resize } .smart-window .smart-content-container.smart-window-resizing-bottom, .smart-window .smart-content-container.smart-window-resizing-bottom>.smart-header-section, .smart-window .smart-content-container.smart-window-resizing-top, .smart-window .smart-content-container.smart-window-resizing-top>.smart-header-section { cursor: ns-resize } .smart-window .smart-content-container.smart-window-resizing-bottom-right, .smart-window .smart-content-container.smart-window-resizing-bottom-right>.smart-header-section, .smart-window .smart-content-container.smart-window-resizing-top-left, .smart-window .smart-content-container.smart-window-resizing-top-left>.smart-header-section { cursor: se-resize } .smart-window .smart-content-container.smart-window-resizing-bottom-left, .smart-window .smart-content-container.smart-window-resizing-bottom-left>.smart-header-section, .smart-window .smart-content-container.smart-window-resizing-top-right, .smart-window .smart-content-container.smart-window-resizing-top-right>.smart-header-section { cursor: sw-resize } .smart-window .smart-header-section>.smart-buttons-container button:after { position: absolute; top: 0; font-family: var(--smart-font-family-icon); font-size: var(--smart-window-header-icon-size); width: 100%; height: 100%; text-align: center; display: flex; align-items: center; justify-content: center; pointer-events: none } .smart-window.smart-tabs-window .smart-content-container>.smart-footer.smart-hidden, .smart-window.smart-tabs-window .smart-content-container>.smart-header-section.smart-hidden, .smart-window.smart-tabs-window[auto-hide] .smart-content-container>.smart-header-section, .smart-window.smart-tabs-window[auto-hide] .smart-tabs-content-section, .smart-window[header-position=none] .smart-content-container>.smart-header-section { display: none } .smart-window .smart-header-section>.smart-buttons-container button:first-of-type { margin-left: initial } .smart-window .smart-header-section>.smart-buttons-container button:last-of-type { margin-right: initial } .smart-window .smart-header-section>.smart-buttons-container button.hover { color: initial; background-color: initial } .smart-window .smart-header-section .smart-close-button:after { content: var(--smart-icon-close) } .smart-window .smart-header-section .smart-collapse-button:after { content: var(--smart-icon-arrow-down) } .smart-window .smart-header-section .smart-maximize-button:after { content: var(--smart-icon-window-maximize) } .smart-window .smart-header-section .smart-pin-button:after { content: var(--smart-icon-window-pin) } .smart-window .smart-header-section .smart-minimize-button:after { content: var(--smart-icon-window-minimize) } .smart-window:focus, .smart-window[focus] { outline: 0; border-color: var(--smart-primary); box-shadow: var(--smart-elevation-24) } .smart-window:focus .smart-content-container>.smart-header-section, .smart-window[focus] .smart-content-container>.smart-header-section { background-color: var(--smart-primary); color: var(--smart-primary-color) } .smart-window[ontop] { z-index: var(--smart-editor-drop-down-z-index) } .smart-window:not([animation=none]) { transition: width .2s cubic-bezier(.4, 0, .2, 1), height .25s cubic-bezier(.4, 0, .2, 1), top .2s cubic-bezier(.4, 0, .6, 1), left .2s cubic-bezier(.4, 0, .6, 1), transform .2s cubic-bezier(.4, 0, .2, 1), visibility .2s cubic-bezier(.4, 0, .2, 1), min-height .25s cubic-bezier(.4, 0, .2, 1), min-width .25s cubic-bezier(.4, 0, .2, 1), opacity .25s cubic-bezier(.4, 0, .2, 1); transform: scale(1) } .smart-window:not([animation=none]) .smart-header-section .smart-collapse-button:after, .smart-window:not([animation=none]) .smart-header-section .smart-pin-button:after { transition: transform .15s linear } .smart-window:not([animation=none]).no-transition, .smart-window:not([animation=none]).no-transition.smart-visibility-hidden { transition: none } .smart-window:not([animation=none]).smart-visibility-hidden, .smart-window:not([animation=none]).smart-visibility-hidden[maximized] { transition: width .2s cubic-bezier(.4, 0, .2, 1), height .2s cubic-bezier(.4, 0, .2, 1), top .2s cubic-bezier(.4, 0, .2, 1), left .2s cubic-bezier(.4, 0, .2, 1), visibility .2s cubic-bezier(.4, 0, .6, 1), transform .2s cubic-bezier(.4, 0, .6, 1), min-height .25s cubic-bezier(.4, 0, .2, 1), min-width .25s cubic-bezier(.4, 0, .2, 1), opacity .25s cubic-bezier(.4, 0, .2, 1); transform: scale(0) } .smart-window:not([animation=none])[dragged] { opacity: .5; z-index: calc(1 + var(--smart-editor-drop-down-z-index)); transition: none } .smart-window:not([animation=none])[minimized] { transition: width .2s cubic-bezier(.4, 0, .2, 1), height .2s cubic-bezier(.4, 0, .2, 1), top .2s cubic-bezier(.4, 0, .2, 1), left .2s cubic-bezier(.4, 0, .2, 1), animation .2s cubic-bezier(.4, 0, .6) } .smart-window.smart-visibility-hidden { transform: scale(0) } .smart-window.smart-tabs-window[collapsed][header-position=left], .smart-window.smart-tabs-window[collapsed][header-position=right], .smart-window.smart-tabs-window[maximized][collapsed][header-position=left], .smart-window.smart-tabs-window[maximized][collapsed][header-position=right] { width: var(--smart-window-header-height); min-width: initial; height: var(--smart-window-default-height) } .smart-window.smart-tabs-window[dragged] { pointer-events: none } .smart-window.smart-tabs-window[dragged] .smart-tab-label-container, .smart-window.smart-tabs-window[dragged] .smart-tabs-header-section { cursor: move } .smart-window.smart-tabs-window .smart-content-container>.smart-content { width: 100%; height: calc(100% - var(--smart-window-header-height)); overflow: hidden; padding: 0; background-color: var(--smart-background) } .smart-window.smart-tabs-window[active] .smart-content-container>.smart-header-section, .smart-window.smart-tabs-window[dragged] .smart-content-container>.smart-header-section, .smart-window.smart-tabs-window[focus] .smart-content-container>.smart-header-section, .smart-window[active] .smart-content-container>.smart-header-section, .smart-window[dragged] .smart-content-container>.smart-header-section { background-color: var(--smart-primary); color: var(--smart-primary-color) } .smart-window.smart-tabs-window smart-tabs { width: 100%; height: 250px; min-height: 100%; border: initial; outline: 0; padding: 0 } .smart-window.smart-tabs-window smart-tabs .smart-tabs-header-items { width: 100% } .smart-window.smart-tabs-window smart-tabs[vertical] .smart-tabs-header-items { width: auto; height: 100% } .smart-window.smart-tabs-window .smart-tabs .smart-header { border: none } .smart-window.smart-tabs-window .smart-tabs-content-section { margin: initial; border: none } .smart-window.smart-tabs-window[auto-hide] { overflow: visible; height: auto; min-height: 0 } .smart-window.smart-tabs-window[auto-hide] .smart-tabs { min-width: 0; height: auto; min-height: 0 } .smart-window.smart-tabs-window[auto-hide] .smart-content-container>.smart-content { overflow: visible } .smart-window.smart-tabs-window[auto-hide] .smart-window { width: auto; height: auto } .smart-window.smart-tabs-window[auto-hide][tab-position=left], .smart-window.smart-tabs-window[auto-hide][tab-position=left] smart-tabs, .smart-window.smart-tabs-window[auto-hide][tab-position=right], .smart-window.smart-tabs-window[auto-hide][tab-position=right] smart-tabs, .smart-window.smart-tabs-window[auto-hide][tab-text-orientation=horizontal][tab-position=left], .smart-window.smart-tabs-window[auto-hide][tab-text-orientation=horizontal][tab-position=left] smart-tabs, .smart-window.smart-tabs-window[auto-hide][tab-text-orientation=horizontal][tab-position=right], .smart-window.smart-tabs-window[auto-hide][tab-text-orientation=horizontal][tab-position=right] smart-tab, .smart-window.smart-tabs-window[auto-hide][tab-text-orientation=vertical][tab-position=left], .smart-window.smart-tabs-window[auto-hide][tab-text-orientation=vertical][tab-position=left] smart-tabs, .smart-window.smart-tabs-window[auto-hide][tab-text-orientation=vertical][tab-position=right], .smart-window.smart-tabs-window[auto-hide][tab-text-orientation=vertical][tab-position=right] smart-tabs { width: auto; min-width: 0 } .smart-window.smart-tabs-window[tab-position=hidden] .smart-content-container>.smart-content { height: 100% } .smart-window[collapsed], .smart-window[collapsed].smart-window-snapped-left, .smart-window[collapsed].smart-window-snapped-right, .smart-window[collapsed].smart-window-snapped-top, .smart-window[collapsed][header-position=top].smart-window-snapped-left, .smart-window[collapsed][header-position=top].smart-window-snapped-right, .smart-window[collapsed][header-position=top].smart-window-snapped-top, .smart-window[collapsed][header-position=bottom].smart-window-snapped-left, .smart-window[collapsed][header-position=bottom].smart-window-snapped-right, .smart-window[collapsed][header-position=bottom].smart-window-snapped-top { height: var(--smart-window-header-height) } .smart-window.smart-tabs-window smart-tab-item { padding: 5px; user-select: text; -webkit-user-select: text } .smart-window[minimized] { max-width: var(--smart-window-min-width); min-height: var(--smart-window-header-height); cursor: default } .smart-window[minimized] .smart-content-container>.smart-header-section { cursor: default } .smart-window[minimized] .smart-content-container>.smart-content { padding: initial } .smart-window[minimized] .smart-minimize-button:after { content: var(--smart-icon-arrow-up-alt); transform: rotate(-45deg); margin-top: -1px } .smart-window.smart-progress-window.smart-visibility-hidden smart-progress-bar, .smart-window[maximized].smart-visibility-hidden { transform: scale(0) } .smart-window[maximized] .smart-content-container>.smart-header-section { cursor: initial } .smart-window.smart-wait-window .smart-content-container>.smart-header-section, .smart-window[pinned] .smart-content-container>.smart-header-section { cursor: default } .smart-window[maximized] .smart-header-section .smart-maximize-button:after { content: var(--smart-icon-window-restore); font-size: 100% } .smart-window[collapsed] .smart-content-container.smart-window-resizing-bottom-left, .smart-window[collapsed] .smart-content-container.smart-window-resizing-bottom-left>.smart-header-section, .smart-window[collapsed] .smart-content-container.smart-window-resizing-bottom-right, .smart-window[collapsed] .smart-content-container.smart-window-resizing-bottom-right>.smart-header-section, .smart-window[collapsed] .smart-content-container.smart-window-resizing-top-left, .smart-window[collapsed] .smart-content-container.smart-window-resizing-top-left>.smart-header-section, .smart-window[collapsed] .smart-content-container.smart-window-resizing-top-right, .smart-window[collapsed] .smart-content-container.smart-window-resizing-top-right>.smart-header-section, .smart-window[disabled] .smart-header-section>.smart-buttons-container button { cursor: initial } .smart-window[pinned] .smart-header-section .smart-pin-button:after { content: var(--smart-icon-window-pin); transform: rotate(-45deg) } .smart-window[collapsed] .smart-header-section .smart-collapse-button:after { transform: rotate(180deg) translateY(1px) } .smart-window[collapsed][header-position=left] .smart-content-container>.smart-footer, .smart-window[collapsed][header-position=left] .smart-content-container>.smart-header-section, .smart-window[collapsed][header-position=right] .smart-content-container>.smart-footer, .smart-window[collapsed][header-position=right] .smart-content-container>.smart-header-section { min-width: var(--smart-window-header-height) } .smart-window[collapsed][header-position=left].smart-window-snapped-left, .smart-window[collapsed][header-position=left].smart-window-snapped-right, .smart-window[collapsed][header-position=left].smart-window-snapped-top, .smart-window[collapsed][header-position=right].smart-window-snapped-left, .smart-window[collapsed][header-position=right].smart-window-snapped-right, .smart-window[collapsed][header-position=right].smart-window-snapped-top { height: 100%; width: var(--smart-window-header-height); min-width: initial } .smart-window[collapsed][maximized] { height: var(--smart-window-header-height) } .smart-window[resize-indicator] .smart-content-container:after, .smart-window[resize-indicator] .smart-content-container:before { width: 10px; height: 10px; font-family: var(--smart-font-family-icon); content: var(--smart-icon-minus); font-size: 10px; position: absolute } .smart-window[collapsed][maximized][header-position=left] .smart-content-container>.smart-footer, .smart-window[collapsed][maximized][header-position=left] .smart-content-container>.smart-header-section, .smart-window[collapsed][maximized][header-position=right] .smart-content-container>.smart-footer, .smart-window[collapsed][maximized][header-position=right] .smart-content-container>.smart-header-section { min-width: var(--smart-window-header-height) } .smart-window[dragged] { opacity: .5; z-index: calc(1 + var(--smart-editor-drop-down-z-index)); transition: none } .smart-window[dragged] .smart-content-container { user-select: none; -webkit-user-select: none; -ms-user-select: none; -moz-user-select: none } .smart-window[resized] .smart-content-container { user-select: none; -webkit-user-select: none; -ms-user-select: none; -moz-user-select: none } .smart-window[resize-indicator] .smart-content-container:before { top: calc(100% - 13px); left: calc(100% - 10px); transform: rotate(-45deg) scaleX(2) } .smart-window[resize-indicator] .smart-content-container:after { top: calc(100% - 9px); left: calc(100% - 8px); transform: rotate(-45deg) } .smart-window[resize-indicator][resize-mode=left] .smart-content-container:before, .smart-window[resize-indicator][resize-mode=top] .smart-content-container:before { top: 0; left: 5px } .smart-window[resize-indicator][resize-mode=left] .smart-content-container:after, .smart-window[resize-indicator][resize-mode=top] .smart-content-container:after { top: 4px; left: 5px } .smart-window[resize-indicator][collapsed] .smart-content-container:after, .smart-window[resize-indicator][collapsed] .smart-content-container:before { content: '' } .smart-window[header-position=none] .smart-content-container>.smart-content { height: 100% } .smart-window[header-position=bottom] .smart-content-container { flex-direction: column-reverse } .smart-window[header-position=left] .smart-content-container { flex-direction: row } .smart-window[header-position=left] .smart-content-container .smart-header-section { flex-direction: column } .smart-window[header-position=left] .smart-content-container .smart-header-section .smart-collapse-button:after { transform: rotate(275deg) translateY(1px) } .smart-window[header-position=left][collapsed] .smart-content-container .smart-header-section .smart-collapse-button:after, .smart-window[header-position=right] .smart-content-container .smart-header-section .smart-collapse-button:after { transform: rotate(90deg) translateY(1px) } .smart-window[header-position=left] .smart-content-container .smart-header-section>.smart-header { writing-mode: vertical-lr } .smart-window[header-position=left] .smart-content-container>.smart-footer, .smart-window[header-position=left] .smart-content-container>.smart-header-section { width: var(--smart-window-header-height); min-width: var(--smart-window-header-height); height: 100% } .smart-window[header-position=right] .smart-content-container { flex-direction: row-reverse } .smart-window[header-position=right] .smart-content-container .smart-header-section { flex-direction: column } .smart-window[header-position=right] .smart-content-container .smart-header-section>.smart-header { writing-mode: vertical-lr } .smart-window[header-position=right] .smart-content-container>.smart-footer, .smart-window[header-position=right] .smart-content-container>.smart-header-section { width: var(--smart-window-header-height); min-width: var(--smart-window-header-height); height: 100% } .smart-window[header-position=right][collapsed] .smart-content-container .smart-header-section .smart-collapse-button:after { transform: rotate(275deg) translateY(1px) } .smart-window[header-position=left], .smart-window[header-position=right] { min-width: var(--smart-window-header-height); min-height: var(--smart-window-min-width) } .smart-window[header-position=left].smart-window-snapped-left, .smart-window[header-position=left].smart-window-snapped-right, .smart-window[header-position=right].smart-window-snapped-left, .smart-window[header-position=right].smart-window-snapped-right { height: 100%; width: 50% } .smart-window[header-position=left].smart-window-snapped-top, .smart-window[header-position=right].smart-window-snapped-top { height: 100%; width: 100% } .smart-window[header-position=left][minimized], .smart-window[header-position=right][minimized] { max-width: var(--smart-window-header-height) } .smart-window[header-position=left] .smart-content-container>.smart-content, .smart-window[header-position=right] .smart-content-container>.smart-content { height: 100% } .smart-window[header-position=left] .smart-content-container>.smart-header-section .smart-buttons-container, .smart-window[header-position=right] .smart-content-container>.smart-header-section .smart-buttons-container { display: flex; justify-content: center; flex-direction: column; height: initial } .smart-window.smart-alert-window .smart-cancel-button, .smart-window[footer-position=none] .smart-content-container>.smart-footer { display: none } .smart-window[header-position=left] .smart-content-container>.smart-header-section .smart-buttons-container button, .smart-window[header-position=right] .smart-content-container>.smart-header-section .smart-buttons-container button { margin-left: initial; margin-top: 1px } .smart-window[header-position=left] .smart-content-container>.smart-header-section .smart-buttons-container button:first-of-type, .smart-window[header-position=right] .smart-content-container>.smart-header-section .smart-buttons-container button:first-of-type { margin-top: initial } .smart-window[footer-template] .smart-content-container>.smart-content { height: calc(100% - var(--smart-window-header-height) - var(--smart-window-footer-height)) } .smart-window[footer-template=null] .smart-content-container>.smart-content { height: calc(100% - var(--smart-window-header-height)) } .smart-window.smart-window-snapped-left, .smart-window.smart-window-snapped-right, .smart-window.smart-window-snapped-top { height: 100%; z-index: 9999; box-shadow: none; border: var(--smart-border-width) solid var(--smart-border) } .smart-window.smart-window-snapped-left[ontop], .smart-window.smart-window-snapped-right[ontop], .smart-window.smart-window-snapped-top[ontop] { z-index: 10000; box-shadow: none } .smart-window.smart-window-snapped-left, .smart-window.smart-window-snapped-right { width: 50% } .smart-window.smart-window-snapped-top { width: 100% } .smart-window.smart-alert-window .smart-content-container>.smart-footer .smart-button, .smart-window.smart-dialog-window .smart-content-container>.smart-footer .smart-button, .smart-window.smart-multiline-prompt-window .smart-content-container>.smart-footer .smart-button, .smart-window.smart-progress-window .smart-content-container>.smart-footer .smart-button, .smart-window.smart-prompt-window .smart-content-container>.smart-footer .smart-button { width: var(--smart-window-footer-button-width); height: 100%; text-align: center; vertical-align: middle; cursor: pointer; text-transform: var(--smart-button-text-transform); font-weight: 500; letter-spacing: .08929em; overflow: hidden; border-color: var(--smart-border); border-top-left-radius: var(--smart-border-top-left-radius); border-top-right-radius: var(--smart-border-top-right-radius); border-bottom-left-radius: var(--smart-border-bottom-left-radius); border-bottom-right-radius: var(--smart-border-bottom-right-radius); border-width: var(--smart-border-width); border-style: solid } .smart-window.smart-alert-window, .smart-window.smart-dialog-window, .smart-window.smart-prompt-window { width: var(--smart-window-default-width); top: calc(50% - var(--smart-window-default-height)/ 2); left: calc(50% - var(--smart-window-default-width)/ 2) } .smart-window.smart-alert-window, .smart-window.smart-alert-window[collapsed][header-position=left], .smart-window.smart-alert-window[collapsed][header-position=right], .smart-window.smart-alert-window[collapsed][maximized][header-position=left], .smart-window.smart-alert-window[collapsed][maximized][header-position=right], .smart-window.smart-dialog-window, .smart-window.smart-dialog-window[collapsed][header-position=left], .smart-window.smart-dialog-window[collapsed][header-position=right], .smart-window.smart-dialog-window[collapsed][maximized][header-position=left], .smart-window.smart-dialog-window[collapsed][maximized][header-position=right], .smart-window.smart-multiline-prompt-window, .smart-window.smart-multiline-prompt-window[collapsed][header-position=left], .smart-window.smart-multiline-prompt-window[collapsed][header-position=right], .smart-window.smart-multiline-prompt-window[collapsed][maximized][header-position=left], .smart-window.smart-multiline-prompt-window[collapsed][maximized][header-position=right], .smart-window.smart-progress-window, .smart-window.smart-prompt-window, .smart-window.smart-prompt-window[collapsed][header-position=left], .smart-window.smart-prompt-window[collapsed][header-position=right], .smart-window.smart-prompt-window[collapsed][maximized][header-position=left], .smart-window.smart-prompt-window[collapsed][maximized][header-position=right] { height: var(--smart-window-default-height) } .smart-window.smart-alert-window .smart-content-container>.smart-footer .smart-button:focus, .smart-window.smart-dialog-window .smart-content-container>.smart-footer .smart-button:focus, .smart-window.smart-multiline-prompt-window .smart-content-container>.smart-footer .smart-button:focus, .smart-window.smart-progress-window .smart-content-container>.smart-footer .smart-button:focus, .smart-window.smart-prompt-window .smart-content-container>.smart-footer .smart-button:focus { color: var(--smart-ui-state-color-focus); border-color: var(--smart-ui-state-focus); background-color: var(--smart-ui-state-focus); opacity: var(--smart-button-opacity-focus) } .smart-window.smart-progress-window .smart-content-container>.smart-footer smart-progress-bar>.smart-container, .smart-window.smart-progress-window smart-progress-bar .smart-value { border: initial } .smart-window.smart-dialog-window .smart-content-container>.smart-footer button:first-child { margin-right: 10px } .smart-window.smart-alert-window .smart-content-container>.smart-footer button:first-child { margin-right: 10px } .smart-window.smart-prompt-window .smart-content-container>.smart-content { flex-direction: column-reverse; align-items: flex-start } .smart-window.smart-prompt-window .smart-content-container>.smart-footer button:first-child { margin-right: 10px } .smart-window.smart-prompt-window smart-text-box { width: 100%; margin-top: 5px } .smart-window.smart-multiline-prompt-window { width: var(--smart-window-default-width); top: calc(50% - var(--smart-window-default-height)/ 2); left: calc(50% - var(--smart-window-default-width)/ 2) } .smart-window.smart-multiline-prompt-window smart-multiline-text-box { width: 100%; margin-top: 5px } .smart-window.smart-multiline-prompt-window .smart-content-container>.smart-content { flex-direction: column-reverse; align-items: flex-start } .smart-window.smart-multiline-prompt-window .smart-content-container>.smart-footer button:first-child { margin-right: 10px } .smart-window.smart-progress-window { width: var(--smart-window-default-width); top: calc(50% - var(--smart-window-default-height)/ 2); left: calc(50% - var(--smart-window-default-width)/ 2) } .smart-window.smart-progress-window smart-progress-bar.smart-visibility-hidden { transition: none } .smart-window.smart-progress-window .smart-content-container>.smart-content { user-select: none; -webkit-user-select: none; -ms-user-select: none; -moz-user-select: none } .smart-window.smart-progress-window .smart-content-container>.smart-footer smart-progress-bar { width: 100%; height: 100%; box-shadow: initial; background-color: var(--smart-surface); transition: opacity .25s ease-in, visibility .25s cubic-bezier(0, 0, .2, 1) } .smart-window.smart-progress-window .smart-content-container>.smart-footer smart-progress-bar.smart-visibility-hidden { opacity: .5; transition: opacity .25s ease-out, visibility .25s cubic-bezier(0, 0, .2, 1) } .smart-window.smart-progress-window .smart-content-container>.smart-footer button.smart-button { position: absolute; width: calc(100% - 13px); height: calc(100% - 13px); top: 6.5px; left: 6.5px; text-align: center; background-color: rgba(224, 224, 224, .5) } .smart-window.smart-progress-window[collapsed][header-position=left], .smart-window.smart-progress-window[collapsed][header-position=right], .smart-window.smart-progress-window[collapsed][maximized][header-position=left], .smart-window.smart-progress-window[collapsed][maximized][header-position=right], .smart-window.smart-wait-window { height: var(--smart-window-default-height) } .smart-window.smart-progress-window .smart-content-container>.smart-footer button.smart-button.smart-visibility-hidden { top: 100% } .smart-window.smart-progress-window:not([animation=none]) .smart-content-container>.smart-footer button, .smart-window.smart-progress-window:not([animation=none]) .smart-content-container>.smart-footer button.smart-visibility-hidden { transition: top .25s cubic-bezier(0, 0, .2, 1), visibility .25s cubic-bezier(0, 0, .2, 1) } .smart-window.smart-wait-window { width: var(--smart-window-default-width); top: calc(50% - var(--smart-window-default-height)/ 2); left: calc(50% - var(--smart-window-default-width)/ 2) } .smart-window.smart-wait-window .smart-content-container>.smart-content smart-progress-bar { width: 100%; height: 75% } .smart-window.smart-wait-window[collapsed][header-position=left], .smart-window.smart-wait-window[collapsed][header-position=right], .smart-window.smart-wait-window[collapsed][maximized][header-position=left], .smart-window.smart-wait-window[collapsed][maximized][header-position=right] { height: var(--smart-window-default-height) } smart-window.smart-window[collapsed][header-position=left], smart-window.smart-window[collapsed][header-position=right], smart-window.smart-window[collapsed][maximized][header-position=left], smart-window.smart-window[collapsed][maximized][header-position=right] { width: var(--smart-window-header-height); min-width: initial; height: var(--smart-window-default-height) } .smart-modal { position: absolute; opacity: .5; background-color: var(--smart-disabled); top: 0; left: 0; width: 100%; min-height: 100% } .smart-window-resize-feedback { position: absolute; z-index: 10000; pointer-events: none; user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; border: 2.5px solid #000; box-sizing: border-box } smart-docking-layout .smart-window-resize-feedback { border: 2.5px solid #d3d3d3 } .smart-window-snap-bottom-feedback, .smart-window-snap-left-feedback, .smart-window-snap-right-feedback, .smart-window-snap-top-feedback { position: absolute; height: calc(100% - 10px); top: 5px; bottom: 5px; opacity: .65; box-shadow: 0 0 1px 1px #8a8a8a; border-radius: 2px; transition: all 50ms cubic-bezier(.4, 0, .6, 1); animation: scaleIn .2s cubic-bezier(.4, 0, .2, 1); transform: scale(1); pointer-events: none } .smart-window-snap-bottom-feedback.smart-visibility-hidden, .smart-window-snap-left-feedback.smart-visibility-hidden, .smart-window-snap-right-feedback.smart-visibility-hidden, .smart-window-snap-top-feedback.smart-visibility-hidden { transition: animation .2s cubic-bezier(.4, 0, .6, 1), visibility .2s cubic-bezier(.4, 0, .6, 1), top .2s cubic-bezier(.4, 0, .2, 1), left .2s cubic-bezier(.4, 0, .2, 1); animation: scaleOut .2s cubic-bezier(.4, 0, .6, 1); transform: scale(0) } .smart-window-snap-right-feedback { width: 50%; left: calc(50% - 5px); transform-origin: right } .smart-window-snap-left-feedback { width: 50%; left: 5px; transform-origin: left } .smart-window-snap-bottom-feedback, .smart-window-snap-top-feedback { width: calc(100% - 10px); left: 5px; transform-origin: top } @keyframes scaleIn { 0% { transform: scale(0) } 50% { transform: scale(.5); opacity: .5 } 100% { transform: scale(1); opacity: 1 } } @keyframes scaleOut { 0% { transform: scale(1); opacity: 1 } 50% { transform: scale(.5); opacity: .5 } 100% { transform: scale(0) } } @keyframes scaleInRight { 0% { transform: scale(0) } 50% { transform: scale(.5); opacity: .5 } 100% { transform: scale(1); opacity: 1 } } .smart-window[right-to-left] .smart-content-container>.smart-content, .smart-window[right-to-left] .smart-content-container>.smart-footer, .smart-window[right-to-left] .smart-content-container>.smart-header-section { direction: rtl } .smart-window[right-to-left][header-position=left] .smart-header-section>.smart-header, .smart-window[right-to-left][header-position=right] .smart-header-section>.smart-header { writing-mode: vertical-rl } .smart-window[right-to-left].smart-alert-window .smart-content-container>.smart-footer button:first-child, .smart-window[right-to-left].smart-dialog-window .smart-content-container>.smart-footer button:first-child, .smart-window[right-to-left].smart-multiline-prompt-window .smart-content-container>.smart-footer button:first-child, .smart-window[right-to-left].smart-prompt-window .smart-content-container>.smart-footer button:first-child { margin-left: 10px; margin-right: initial } .smart-tabs-window[right-to-left] .smart-content-container>.smart-content { direction: initial } .smart-grid-layout .col, .smart-grid-layout .col-1, .smart-grid-layout .col-10, .smart-grid-layout .col-11, .smart-grid-layout .col-12, .smart-grid-layout .col-2, .smart-grid-layout .col-3, .smart-grid-layout .col-4, .smart-grid-layout .col-5, .smart-grid-layout .col-6, .smart-grid-layout .col-7, .smart-grid-layout .col-8, .smart-grid-layout .col-9, .smart-grid-layout .col-lg, .smart-grid-layout .col-lg-1, .smart-grid-layout .col-lg-10, .smart-grid-layout .col-lg-11, .smart-grid-layout .col-lg-12, .smart-grid-layout .col-lg-2, .smart-grid-layout .col-lg-3, .smart-grid-layout .col-lg-4, .smart-grid-layout .col-lg-5, .smart-grid-layout .col-lg-6, .smart-grid-layout .col-lg-7, .smart-grid-layout .col-lg-8, .smart-grid-layout .col-lg-9, .smart-grid-layout .col-md, .smart-grid-layout .col-md-1, .smart-grid-layout .col-md-10, .smart-grid-layout .col-md-11, .smart-grid-layout .col-md-12, .smart-grid-layout .col-md-2, .smart-grid-layout .col-md-3, .smart-grid-layout .col-md-4, .smart-grid-layout .col-md-5, .smart-grid-layout .col-md-6, .smart-grid-layout .col-md-7, .smart-grid-layout .col-md-8, .smart-grid-layout .col-md-9, .smart-grid-layout .col-sm, .smart-grid-layout .col-sm-1, .smart-grid-layout .col-sm-10, .smart-grid-layout .col-sm-11, .smart-grid-layout .col-sm-12, .smart-grid-layout .col-sm-2, .smart-grid-layout .col-sm-3, .smart-grid-layout .col-sm-4, .smart-grid-layout .col-sm-5, .smart-grid-layout .col-sm-6, .smart-grid-layout .col-sm-7, .smart-grid-layout .col-sm-8, .smart-grid-layout .col-sm-9, .smart-grid-layout .col-xl, .smart-grid-layout .col-xl-1, .smart-grid-layout .col-xl-10, .smart-grid-layout .col-xl-11, .smart-grid-layout .col-xl-12, .smart-grid-layout .col-xl-2, .smart-grid-layout .col-xl-3, .smart-grid-layout .col-xl-4, .smart-grid-layout .col-xl-5, .smart-grid-layout .col-xl-6, .smart-grid-layout .col-xl-7, .smart-grid-layout .col-xl-8, .smart-grid-layout .col-xl-9 { position: relative; width: 100%; min-height: 1px; padding: 15px; box-sizing: border-box; grid-column: span 12 } .smart-grid-layout, .smart-grid-layout .row { display: grid; width: var(--smart-grid-layout-width); grid-gap: var(--smart-grid-layout-row-gap); grid-column-gap: var(--smart-grid-layout-col-gap); grid-template-columns: repeat(12, 1fr); box-sizing: border-box } .smart-grid-layout { grid-template-rows: var(--smart-grid-layout-rows); padding: 0 } .smart-grid-layout .row { margin-right: auto; margin-left: auto; grid-column: span 12 } .smart-grid-layout.no-gaps, .smart-grid-layout.no-gaps .row { --smart-grid-row-gap: 0px; --smart-grid-column-gap: 0px; grid-columns-gap: 0; grid-gap: 0 } .smart-grid-layout .order-0 { order: -1 } .smart-grid-layout .order-1 { order: 0 } .smart-grid-layout .order-2 { order: 1 } .smart-grid-layout .order-3 { order: 2 } .smart-grid-layout .order-4 { order: 3 } .smart-grid-layout .order-5 { order: 4 } .smart-grid-layout .order-6 { order: 5 } .smart-grid-layout .order-7 { order: 6 } .smart-grid-layout .order-8 { order: 7 } .smart-grid-layout .order-9 { order: 8 } .smart-grid-layout .order-10 { order: 9 } .smart-grid-layout .order-11 { order: 10 } .smart-grid-layout .order-12 { order: 11 } .smart-grid-layout [span="1"] { grid-row: span 1 } .smart-grid-layout [span="2"] { grid-row: span 2 } .smart-grid-layout [span="3"] { grid-row: span 3 } .smart-grid-layout [span="4"] { grid-row: span 4 } .smart-grid-layout [span="5"] { grid-row: span 5 } .smart-grid-layout [span="6"] { grid-row: span 6 } .smart-grid-layout [span="7"] { grid-row: span 7 } .smart-grid-layout [span="8"] { grid-row: span 8 } .smart-grid-layout [span="9"] { grid-row: span 9 } .smart-grid-layout [span="10"] { grid-row: span 10 } .smart-grid-layout [span="11"] { grid-row: span 11 } .smart-grid-layout [span="12"] { grid-row: span 12 } .smart-grid-layout .col-1 { grid-column: span 1 } .smart-grid-layout .col-2 { grid-column: span 2 } .smart-grid-layout .col-3 { grid-column: span 3 } .smart-grid-layout .col-4 { grid-column: span 4 } .smart-grid-layout .col-5 { grid-column: span 5 } .smart-grid-layout .col-6 { grid-column: span 6 } .smart-grid-layout .col-7 { grid-column: span 7 } .smart-grid-layout .col-8 { grid-column: span 8 } .smart-grid-layout .col-9 { grid-column: span 9 } .smart-grid-layout .col-10 { grid-column: span 10 } .smart-grid-layout .col-11 { grid-column: span 11 } .smart-grid-layout .col-12 { grid-column: span 12 } @media (min-width:576px) { .smart-grid-layout.fixed { max-width: 540px } .smart-grid-layout .col-sm-1 { grid-column: span 1 } .smart-grid-layout .col-sm-2 { grid-column: span 2 } .smart-grid-layout .col-sm-3 { grid-column: span 3 } .smart-grid-layout .col-sm-4 { grid-column: span 4 } .smart-grid-layout .col-sm-5 { grid-column: span 5 } .smart-grid-layout .col-sm-6 { grid-column: span 6 } .smart-grid-layout .col-sm-7 { grid-column: span 7 } .smart-grid-layout .col-sm-8 { grid-column: span 8 } .smart-grid-layout .col-sm-9 { grid-column: span 9 } .smart-grid-layout .col-sm-10 { grid-column: span 10 } .smart-grid-layout .col-sm-11 { grid-column: span 11 } .smart-grid-layout .col-sm-12 { grid-column: span 12 } } @media (min-width:768px) { .smart-grid-layout.fixed { max-width: 720px } .smart-grid-layout .col-md-1 { grid-column: span 1 } .smart-grid-layout .col-md-2 { grid-column: span 2 } .smart-grid-layout .col-md-3 { grid-column: span 3 } .smart-grid-layout .col-md-4 { grid-column: span 4 } .smart-grid-layout .col-md-5 { grid-column: span 5 } .smart-grid-layout .col-md-6 { grid-column: span 6 } .smart-grid-layout .col-md-7 { grid-column: span 7 } .smart-grid-layout .col-md-8 { grid-column: span 8 } .smart-grid-layout .col-md-9 { grid-column: span 9 } .smart-grid-layout .col-md-10 { grid-column: span 10 } .smart-grid-layout .col-md-11 { grid-column: span 11 } .smart-grid-layout .col-md-12 { grid-column: span 12 } } @media (min-width:992px) { .smart-grid-layout.fixed { max-width: 960px } .smart-grid-layout .col-lg-1 { grid-column: span 1 } .smart-grid-layout .col-lg-2 { grid-column: span 2 } .smart-grid-layout .col-lg-3 { grid-column: span 3 } .smart-grid-layout .col-lg-4 { grid-column: span 4 } .smart-grid-layout .col-lg-5 { grid-column: span 5 } .smart-grid-layout .col-lg-6 { grid-column: span 6 } .smart-grid-layout .col-lg-7 { grid-column: span 7 } .smart-grid-layout .col-lg-8 { grid-column: span 8 } .smart-grid-layout .col-lg-9 { grid-column: span 9 } .smart-grid-layout .col-lg-10 { grid-column: span 10 } .smart-grid-layout .col-lg-11 { grid-column: span 11 } .smart-grid-layout .col-lg-12 { grid-column: span 12 } } @media (min-width:1200px) { .smart-grid-layout.fixed { max-width: 1140px } .smart-grid-layout .col-xl-1 { grid-column: span 1 } .smart-grid-layout .col-xl-2 { grid-column: span 2 } .smart-grid-layout .col-xl-3 { grid-column: span 3 } .smart-grid-layout .col-xl-4 { grid-column: span 4 } .smart-grid-layout .col-xl-5 { grid-column: span 5 } .smart-grid-layout .col-xl-6 { grid-column: span 6 } .smart-grid-layout .col-xl-7 { grid-column: span 7 } .smart-grid-layout .col-xl-8 { grid-column: span 8 } .smart-grid-layout .col-xl-9 { grid-column: span 9 } .smart-grid-layout .col-xl-10 { grid-column: span 10 } .smart-grid-layout .col-xl-11 { grid-column: span 11 } .smart-grid-layout .col-xl-12 { grid-column: span 12 } } .smart-stack-layout { display: flex; box-sizing: border-box; overflow: hidden; width: 100%; align-items: baseline; padding: 15px } .smart-stack-layout .item { display: flex; border-radius: 0; box-shadow: none; min-width: 100px } .smart-stack-layout.vertical { flex-direction: column } .smart-stack-layout:not(.space-around):not(.space-evenly):not(.space-between):not(.vertical) .item:first-child { border-top-left-radius: var(--smart-border-radius); border-bottom-left-radius: var(--smart-border-radius); border-top-right-radius: 0; border-bottom-right-radius: 0 } .smart-stack-layout:not(.space-around):not(.space-evenly):not(.space-between):not(.vertical) .item:last-child { border-top-right-radius: var(--smart-border-radius); border-bottom-right-radius: var(--smart-border-radius); border-top-left-radius: 0; border-bottom-left-radius: 0 } .smart-stack-layout:not(.space-around):not(.space-evenly):not(.space-between).vertical .item:first-child { border-top-left-radius: var(--smart-border-radius); border-top-right-radius: var(--smart-border-radius); border-bottom-left-radius: 0; border-bottom-right-radius: 0 } .smart-stack-layout:not(.space-around):not(.space-evenly):not(.space-between).vertical .item:last-child { border-bottom-right-radius: var(--smart-border-radius); border-bottom-left-radius: var(--smart-border-radius); border-top-left-radius: 0; border-top-right-radius: 0 } .smart-stack-layout.spacing .item { margin: 0 6px } .smart-stack-layout.spacing.vertical .item { margin: 6px 0 } .smart-stack-layout.spacing-2 .item { margin: 0 12px } .smart-stack-layout.spacing-2.vertical .item { margin: 12px 0 } .smart-stack-layout.spacing-3 .item { margin: 0 24px } .smart-stack-layout.spacing-3.vertical .item { margin: 24px 0 } .smart-stack-layout.spacing-4 .item { margin: 0 48px } .smart-stack-layout.spacing-4.vertical .item { margin: 48px 0 } .smart-stack-layout.spacing-5 .item { margin: 0 64px } .smart-stack-layout.spacing-5.vertical .item { margin: 64px 0 } .smart-stack-layout.spacing-6 .item { margin: 0 128px } .smart-stack-layout.spacing-6.vertical .item { margin: 128px 0 } .smart-stack-layout.spacing-2:not(.vertical) .item:first-child, .smart-stack-layout.spacing-3:not(.vertical) .item:first-child, .smart-stack-layout.spacing-4:not(.vertical) .item:first-child, .smart-stack-layout.spacing-5:not(.vertical) .item:first-child, .smart-stack-layout.spacing-6:not(.vertical) .item:first-child, .smart-stack-layout.spacing:not(.vertical) .item:first-child { margin-left: 0 } .smart-stack-layout.spacing-2:not(.vertical) .item:last-child, .smart-stack-layout.spacing-3:not(.vertical) .item:last-child, .smart-stack-layout.spacing-4:not(.vertical) .item:last-child, .smart-stack-layout.spacing-5:not(.vertical) .item:last-child, .smart-stack-layout.spacing-6:not(.vertical) .item:last-child, .smart-stack-layout.spacing:not(.vertical) .item:last-child { margin-right: 0 } .smart-stack-layout.spacing-2.vertical .item:first-child, .smart-stack-layout.spacing-3.vertical .item:first-child, .smart-stack-layout.spacing-4.vertical .item:first-child, .smart-stack-layout.spacing-5.vertical .item:first-child, .smart-stack-layout.spacing-6.vertical .item:first-child, .smart-stack-layout.spacing.vertical .item:first-child { margin-top: 0 } .smart-stack-layout.spacing-2.vertical .item:last-child, .smart-stack-layout.spacing-3.vertical .item:last-child, .smart-stack-layout.spacing-4.vertical .item:last-child, .smart-stack-layout.spacing-5.vertical .item:last-child, .smart-stack-layout.spacing-6.vertical .item:last-child, .smart-stack-layout.spacing.vertical .item:last-child { margin-bottom: 0 } .smart-stack-layout .top, .smart-stack-layout:not(.vertical).top { align-items: flex-start } .smart-stack-layout .right, .smart-stack-layout:not(.vertical).right { justify-content: flex-end } .smart-stack-layout .bottom, .smart-stack-layout:not(.vertical).bottom { align-items: flex-end } .smart-stack-layout .left, .smart-stack-layout:not(.vertical).left { justify-content: flex-start } .smart-stack-layout .center, .smart-stack-layout:not(.vertical).center { justify-content: center } .smart-stack-layout .middle, .smart-stack-layout:not(.vertical).middle { align-items: center } .smart-stack-layout .space-between, .smart-stack-layout.space-between { justify-content: space-between } .smart-stack-layout .space-evenly, .smart-stack-layout.space-evenly { justify-content: space-evenly } .smart-stack-layout .space-around, .smart-stack-layout.space-around { justify-content: space-around } .smart-stack-layout.vertical.top { justify-content: flex-start } .smart-stack-layout.vertical.right { align-items: flex-end } .smart-stack-layout.vertical.bottom { justify-content: flex-end } .smart-stack-layout.vertical.left { align-items: flex-start } .smart-stack-layout.vertical.center { align-items: center } .smart-stack-layout.vertical.middle { justify-content: center } .smart-stack-layout.stretch:not(.vertical) .item, .smart-stack-layout.vertical.vertical-stretch .item { flex: 1 } .smart-stack-layout.stretch:not(.vertical) .item.flex-2, .smart-stack-layout.vertical.vertical-stretch .item.flex-2 { flex: 2 } .smart-stack-layout.stretch:not(.vertical) .item.flex-3, .smart-stack-layout.vertical.vertical-stretch .item.flex-3 { flex: 3 } .smart-stack-layout.stretch:not(.vertical) .item.flex-4, .smart-stack-layout.vertical.vertical-stretch .item.flex-4 { flex: 4 } .smart-stack-layout.stretch:not(.vertical) .item.flex-5, .smart-stack-layout.vertical.vertical-stretch .item.flex-5 { flex: 5 } .smart-stack-layout.stretch:not(.vertical) .item.flex-6, .smart-stack-layout.vertical.vertical-stretch .item.flex-6 { flex: 6 } .smart-stack-layout.stretch.vertical, .smart-stack-layout:not(.vertical).vertical-stretch { align-items: stretch } .smart-validation-error:not(smart-check-box)>div.smart-container:after, .smart-validation-success:not(smart-check-box)>div.smart-container:after { left: calc(100% + 20px); top: 50%; position: absolute; transform: translate(-50%, -50%); pointer-events: none; font-weight: 700; font-family: var(--smart-font-family); font-size: var(--smart-font-size); width: 20px; height: 20px; border-radius: 50%; display: flex; text-align: center; justify-content: center; align-items: center } .smart-validation-error:not(.underlined):not(.outlined), .smart-validation-error:not(.underlined):not(.outlined) input, .smart-validation-error:not(.underlined):not(.outlined) span { border-color: var(--smart-error) !important; outline: 0 } .smart-validation-error:not(smart-check-box)>div.smart-container:after { background-color: var(--smart-error); color: var(--smart-error-color); content: '!' } .smart-success-label-like-after-element:after, .smart-validation-success:not(smart-check-box)>div.smart-container:after { color: var(--smart-success-color); content: '✓'; background-color: var(--smart-success) } .smart-validation-error.smart-element:not(.outlined):not(.underlined) .smart-hint::after { background-color: var(--smart-error) } .smart-validation-success.smart-element:not(.outlined):not(.underlined) .smart-hint::after { background-color: var(--smart-success) } input[type=checkbox].smart-validation-error, input[type=radio].smart-validation-error { outline: auto; outline-color: var(--smart-error) } input.smart-validation-error { border-style: solid; border-width: 1px } .smart-error-label-like-after-element:after, .smart-success-label-like-after-element:after { pointer-events: none; font-weight: 700; font-family: var(--smart-font-family); font-size: var(--smart-font-size); width: 20px; height: 20px; border-radius: 50%; display: flex; text-align: center; justify-content: center; align-items: center; top: 50%; position: absolute; left: calc(50% + 15px); transform: translate(-50%, -50%) } .smart-error-label-like-after-element, .smart-success-label-like-after-element { position: relative } .smart-error-label-like-after-element:after { background-color: var(--smart-error); color: var(--smart-error-color); content: '!' } .smart-validation-summary { font-family: var(--smart-font-family); font-size: var(--smart-font-size); color: var(--smart-error) } .smart-validation-summary span { display: block; margin-top: 5px } .smart-error-holder { position: absolute; font-size: var(--smart-font-size); background-color: var(--smart-error); color: var(--smart-error-color); padding: 10px; pointer-events: none; z-index: var(--smart-editor-drop-down-z-index); margin-top: 10px } .smart-error-holder.smart-error-hint-position-right { white-space: nowrap } .smart-input-buttons-elements-holder { display: grid; grid-template-columns: var(--smart-date-format-panel-smart-inputs-container-width) var(--smart-date-format-panel-apply-container-width); grid-template-rows: auto; grid-column-gap: var(--smart-date-format-panel-smart-input-buttons-column-gap) } .smart-input-and-add-formats-holder { border: var(--smart-date-format-panel-border-size) solid var(--smart-date-format-panel-border-color); border-radius: var(--smart-date-format-panel-border-radius); display: grid; grid-template-columns: var(--smart-date-format-panel-smart-inputs-holder-width) var(--smart-date-format-panel-add-format-holder-width); grid-template-rows: auto; align-items: baseline; justify-content: center } .smart-input-list-holder { padding: var(--smart-date-format-panel-smart-inputs-list-holder-offset) } .smart-input-list-holder:empty { border: none } .smart-input-list-holder smart-input { display: inline-flex; height: var(--smart-date-format-panel-smart-input-height); margin: var(--smart-date-format-panel-each-smart-input-offset) } .smart-input-list-holder .format-smart-input-list { width: var(--smart-date-format-panel-smart-input-format-width) } .smart-input-list-holder .sign-smart-input { width: var(--smart-date-format-panel-smart-input-sign-width) } .all-format-holders { width: var(--smart-date-format-panel-all-format-holders-width) } .format-holder { width: var(--smart-date-format-panel-each-add-format-holder-width); text-align: center; float: left } .add-format-holder { margin: var(--smart-date-format-panel-add-new-format-dropdown-offset); align-self: normal; justify-self: end } .add-format-holder span.smart-drop-down-button { --smart-date-format-panel-smart-drop-down-button-border: transparent } .add-format-holder smart-button { font-size: var(--smart-date-format-panel-smart-font-size); width: auto; min-width: var(--smart-date-format-panel-add-format-holder-button) } .use-format-button { margin: 0 auto; margin-top: var(--smart-date-format-panel-margin-from-the-top) } .use-format-button[disabled] { display: none } li[value=' '] a { height: calc(var(--smart-date-format-panel-smart-font-size) + 2 * 8px) } .date-time-format-list { padding: 0; margin: 0; margin-top: var(--smart-date-format-panel-date-time-format-list-offset-top); max-height: var(--smart-date-format-panel-date-time-format-list-max-height); overflow-y: auto } .date-time-format { cursor: pointer; border: var(--smart-date-format-panel-border-size) solid var(--smart-date-format-panel-border-color); border-bottom: none; text-align: center; padding: var(--smart-date-format-panel-each-date-time-format-offset); list-style-type: none; padding-left: 0 } .date-time-format:last-child { border-bottom: var(--smart-date-format-panel-border-size) solid var(--smart-date-format-panel-border-color) } .date-time-format:hover { background: #f1f1f1 } .text-tramsform-none { text-transform: none } .cboth { clear: both } .bold { font-weight: 700 } .currency-format-panel-demo-container { max-width: 960px; border: 1px solid #ccc; border-radius: 4px; padding: 15px } .selected-currency-holder-and-apply-holder { display: grid; grid-template-columns: var(--smart-currency-format-panel-currency-holder-width) var(--smart-currency-format-panel-apply-button-width); grid-template-rows: auto; grid-column-gap: var(--smart-currency-format-panel-header-holder-offset) } .input-currency-formats { width: var(--smart-currency-format-panel-currency-holder-dropdown-button-width) } .selected-currency-holder { border: var(--smart-currency-format-panel-border-size) solid var(--smart-currency-format-panel-border-color); border-radius: var(--smart-currency-format-panel-border-radius); display: grid; grid-template-columns: var(--smart-currency-format-panel-currency-holder-input-width) var(--smart-currency-format-panel-currency-holder-dropdown-width); grid-template-rows: auto; align-items: baseline; justify-content: center; padding-left: var(--smart-currency-format-panel-currency-holder-padding-left); padding-top: var(--smart-currency-format-panel-currency-holder-padding-top); padding-bottom: var(--smart-currency-format-panel-currency-holder-padding-bottom) } .selected-currency-holder .currency-sign-input-holder { width: auto } .selected-currency-holder .currency-sign-input-holder smart-text-box { width: var(--smart-currency-format-panel-currency-input-width) } .selected-currency-holder .currency-sign-input-holder smart-text-box input { border: none } .currency-item, .currency-list { border: var(--smart-currency-format-panel-border-size) solid var(--smart-currency-format-panel-border-color) } .currency-list { padding: 0; margin: 0; margin-top: var(--smart-currency-format-panel-currencies-margin-top); max-height: var(--smart-currency-format-panel-currencies-max-height); overflow-y: auto } .currency-item { cursor: pointer; border-left: 0; border-bottom: none; padding: var(--smart-currency-format-panel-currencies-item-padding); padding-left: var(--smart-currency-format-panel-currencies-left-padding); list-style-type: none } .currency-item:last-child { border-bottom: 0 } .currency-item:first-child { border-top: 0 !important } .currency-item:hover { background: var(--smart-currency-format-panel-currencies-hover-background) } .currency-item-default-format { float: right; color: var(--smart-currency-format-panel-currencies-example-format-color) } .smart-appearance, .smart-data-validation-container, .smart-on-invalid-data-container { grid-template-columns: var(--smart-validation-panel-description-width) var(--smart-validation-panel-content-width); grid-template-rows: auto; grid-column-gap: 0 } .smart-on-invalid-data-container { margin-top: var(--smart-validation-panel-invalid-data-vertical-offset); display: grid } .smart-appearance { margin-top: var(--smart-validation-panel-appearance-vertical-offset); display: grid } .smart-appearance .smart-checkbox-appearance { display: block } .smart-appearance .smart-appearance-text-box-value { display: inline-block; margin-top: var(--smart-validation-panel-appearance-textbox-vertical-offset) } .smart-appearance .reset-appearance { cursor: pointer; display: inline-block; margin-left: var(--smart-validation-panel-appearance-reset-button-left-offset); text-decoration: underline; color: var(--smart-validation-panel-appearance-reset-button-color) } .smart-data-validation-container { margin-top: var(--smart-validation-panel-criteria-container-vertical-offset); display: grid } .smart-data-validation-container .criteria-container { margin-top: var(--smart-validation-panel-criteria-row-margin-top) } .smart-data-validation-container .right-elements { display: flex; align-items: center; flex-wrap: wrap; flex-direction: row } .smart-data-validation-container .smart-criteria-container, .smart-data-validation-container .smart-criteria-type-container { display: flex; align-items: center } .smart-data-validation-container .smart-input-criteria, .smart-data-validation-container .smart-input-criteria-type { display: inline-block; width: var(--smart-validation-panel-criteria-container-input-width); margin-left: var(--smart-validation-panel-criteria-container-input-horizontal-offset); margin-right: var(--smart-validation-panel-criteria-container-input-horizontal-offset) } .smart-data-validation-container .smart-input-criteria-container { display: inline-flex; flex-direction: row; align-items: center } .smart-data-validation-container .smart-input-criteria-container smart-text-box { display: inline-block; width: var(--smart-validation-panel-criteria-container-textbox-width); margin-left: var(--smart-validation-panel-criteria-container-textbox-horizontal-offset); margin-right: var(--smart-validation-panel-criteria-container-textbox-horizontal-offset) } .smart-data-validation-container .smart-input-criteria-container smart-text-box:nth-child(1) { order: 1 } .smart-data-validation-container .smart-input-criteria-container smart-text-box:nth-child(2) { order: 3 } .smart-data-validation-container .smart-input-criteria-container .smart-text-between-inputs { margin: var(--smart-validation-panel-criteria-container-text-between-inputs-offset); order: 2 } .smart-criteria-container, .smart-criteria-type-container, .smart-input-criteria-container { margin-top: var(--smart-validation-panel-criteria-row-margin-top) } .smart-footer-buttons { margin-top: var(--smart-validation-panel-footer-vertical-offset) } .smart-footer-buttons smart-button { margin-left: var(--smart-validation-panel-footer-button-horizontal-offset); margin-right: var(--smart-validation-panel-footer-button-horizontal-offset) } .smart-footer-buttons smart-button.smart-remove-validation-footer-button { width: auto; color: var(--smart-validation-panel-footer-remove-validation-button-color); font-weight: 700 } .smart-footer-buttons smart-button.smart-cancel-footer-button { color: var(--smart-validation-panel-footer-cancel-button-color); font-weight: 700 } .smart-footer-buttons smart-button.smart-save-footer-button { background: var(--smart-validation-panel-footer-save-button-background); color: var(--smart-validation-panel-footer-save-button-color) } .smart-footer-buttons .right-elements { float: right } .right-elements-reset { display: flex; align-items: center } .smart-path-item, .smart-path[hint]>.smart-container { align-items: flex-start } .smart-path .smart-drop-down-button, .smart-path-item { border-top-left-radius: var(--smart-border-top-left-radius); border-bottom-left-radius: var(--smart-border-bottom-left-radius) } .smart-path-item { box-sizing: border-box; transition: opacity 280ms ease-in-out; overflow: hidden; white-space: nowrap; display: flex; position: relative; flex-direction: column; justify-content: center; padding: 9px 12px; width: 100%; height: calc(100% - var(--smart-list-item-vertical-offset)); left: 0; top: 0; color: var(--smart-background-color); border-width: var(--smart-border-width); border-style: solid; border-color: transparent; border-top-right-radius: var(--smart-border-top-right-radius); border-bottom-right-radius: var(--smart-border-bottom-right-radius); user-select: none; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none } .smart-path-item .smart-ripple { background: var(--smart-ui-state-active) } .smart-path-item[disabled] { opacity: .55; cursor: default; pointer-events: none; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none } .smart-path-item[hover] { color: var(--smart-ui-state-color-hover); border-color: var(--smart-ui-state-border-hover); background-color: var(--smart-ui-state-hover) } .smart-path-item[active] { color: var(--smart-ui-state-color-active); border-color: var(--smart-ui-state-border-active); background-color: var(--smart-ui-state-active); opacity: 1 } .smart-path-item[focus] { color: var(--smart-primary-color); border-color: var(--smart-primary); background-color: var(--smart-primary) } smart-path .smart-ripple { background: var(--smart-ui-state-active) } .smart-path, .smart-path.smart-container { display: block; width: var(--smart-path-default-width); height: var(--smart-path-default-height); background: var(--smart-background); color: var(--smart-background-color); border-color: var(--smart-border) } .smart-path>.smart-container { display: flex; position: relative; align-items: center } .smart-path .smart-content { position: relative; cursor: pointer; display: flex; width: 100%; height: 100% } .smart-path .smart-content .smart-input::selection { background: var(--smart-editor-selection); color: var(--smart-editor-selection-color) } .smart-path .smart-input, .smart-path input.smart-input { cursor: initial; outline: transparent solid 1px; width: 100%; height: 100%; border: none; min-height: 100%; vertical-align: middle; font-size: inherit; font-family: inherit; background-color: inherit; margin: 0; color: inherit; background: var(--smart-background); text-align: var(--smart-path-text-align); border-radius: 0 } .smart-path .smart-input:focus { outline: initial; border-color: var(--smart-primary); background-color: var(--smart-background); color: var(--smart-background-color) } .smart-path .smart-input::-webkit-input-placeholder, .smart-path .smart-input::placeholder { color: var(--smart-disabled-color); font-style: italic } .smart-path .smart-input[hover] { border-color: var(--smart-ui-state-border-hover) } .smart-path .smart-input[position-absolute] { position: absolute } .smart-path div.smart-input { padding: calc(var(--smart-editor-label-padding) + 2 * var(--smart-border-width)) calc(var(--smart-editor-label-padding) - var(--smart-border-width)); outline: 0; background: initial; overflow-y: auto; overflow-x: hidden; scrollbar-width: none } .smart-path .smart-path-input-wrapper, .smart-path div.smart-input:after { padding: 0 var(--smart-editor-label-padding); pointer-events: none; white-space: nowrap } .smart-path div.smart-input:after { position: absolute; display: flex; align-items: center; width: 100%; height: 100%; top: 0; font-size: var(--smart-arrow-size); color: var(--smart-disabled-color); font-style: italic; content: attr(placeholder); justify-content: initial; left: 0; opacity: 0 } .smart-path div.smart-input[show-placeholder]:after { opacity: 1 } .smart-path .smart-buttons-container { display: grid; width: 100%; grid-template-columns: var(--smart-editor-addon-width) minmax(0, 1fr) var(--smart-editor-addon-width); grid-column-gap: var(--smart-path-button-gap) } .smart-path .smart-hint, .smart-path .smart-label { display: none; position: absolute } .smart-path .smart-drop-down.smart-visibility-hidden { transform: scale(0); transition: transform .2s ease-in; transform-origin: left top 0 } .smart-path .smart-browse-button, .smart-path .smart-drop-down-button { font-family: var(--smart-font-family-icon); font-size: 10px; width: var(--smart-editor-addon-width); min-width: var(--smart-editor-addon-width); min-height: var(--smart-editor-height); height: 100%; user-select: none; -moz-user-select: none; -webkit-user-select: none; outline: transparent solid 1px; cursor: pointer; overflow: hidden; position: relative; background: var(--smart-surface); border-width: var(--smart-border-width); border-style: solid; color: var(--smart-background-color); border-color: var(--smart-border); transition: background-color .1s linear } .smart-path .smart-browse-button span, .smart-path .smart-drop-down-button span { font-family: inherit; font-size: inherit; color: inherit; pointer-events: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) } .smart-path .smart-browse-button span:not(.smart-ripple):after, .smart-path .smart-drop-down-button span:not(.smart-ripple):after { position: absolute; display: flex; align-items: center; justify-content: center; pointer-events: none; width: 100%; height: 100%; top: 0; white-space: nowrap } .smart-path .smart-browse-button[hover], .smart-path .smart-drop-down-button[hover] { color: var(--smart-ui-state-color-hover); background: var(--smart-ui-state-hover); border-color: var(--smart-ui-state-border-hover) } .smart-path .smart-browse-button:active, .smart-path .smart-browse-button[active], .smart-path .smart-drop-down-button:active, .smart-path .smart-drop-down-button[active] { color: var(--smart-ui-state-color-active); background: var(--smart-ui-state-active); border-color: var(--smart-ui-state-border-active) } .smart-path .smart-drop-down-button { border-top-right-radius: 0; border-bottom-right-radius: 0 } .smart-path .smart-drop-down-button span:not(.smart-ripple):after { content: var(--smart-icon-arrow-down); font-size: var(--smart-arrow-size) } .smart-path .smart-browse-button { border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: var(--smart-border-top-right-radius); border-bottom-right-radius: var(--smart-border-bottom-right-radius) } .smart-path .smart-browse-button span:not(.smart-ripple):after { content: '...'; font-weight: 600; font-size: 1rem } .smart-path .smart-path-input-container { position: relative; overflow: hidden; border-style: solid; border-color: var(--smart-border); border-width: var(--smart-border-width); border-radius: 0 } .smart-path .smart-path-input-wrapper { position: absolute; top: 0; left: 0; opacity: 0; text-align: var(--smart-path-text-align); vertical-align: middle; outline: 0; visibility: hidden } .smart-path .smart-path-input-wrapper::-moz-focus-inner { border: 0 } @-moz-document url-prefix() { .smart-path .smart-path-input-wrapper { line-height: 1rem } } .smart-path .smart-path-multiline-container { cursor: initial; outline: transparent solid 1px; width: 100%; height: 100%; min-height: 100%; vertical-align: middle; font-size: inherit; font-family: inherit; background-color: inherit; margin: 0; color: inherit; background: var(--smart-background); text-align: var(--smart-path-text-align); overflow: hidden; position: relative; padding: initial; border: none; border-radius: 0 } .smart-path .smart-path-multiline-container .smart-input::-webkit-scrollbar { width: 0 } .smart-path:not([animation=none])[hint] .smart-hint { transition: opacity .2s cubic-bezier(.4, 0, .6, 1) } .smart-path:not([animation=none])[hint][focus] .smart-hint { transition: opacity .2s cubic-bezier(.4, 0, .2, 1) } .smart-path[readonly] .smart-input { user-select: none; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none } .smart-path[indicator] .smart-input { background: var(--smart-surface) } .smart-path[disabled] .smart-browse-button, .smart-path[disabled] .smart-drop-down-button, .smart-path[disabled] input, .smart-path[disabled]>.smart-container { cursor: default; background-color: initial } .smart-path[indicator] .smart-path-input-container { border-top-right-radius: var(--smart-border-top-right-radius); border-bottom-right-radius: var(--smart-border-bottom-right-radius) } .smart-path[indicator] .smart-browse-button { display: none } .smart-path[indicator] .smart-buttons-container { grid-template-columns: var(--smart-editor-addon-width) minmax(0, 1fr) } .smart-path[disabled] input { user-select: none; -moz-user-select: none; -webkit-user-select: none } .smart-path[focus] .smart-path-input-container { outline: initial; border-color: var(--smart-primary); background-color: var(--smart-background); color: var(--smart-background-color) } .smart-path[focus] .smart-browse-button, .smart-path[focus] .smart-drop-down-button { outline: initial; border-color: var(--smart-primary); background-color: var(--smart-surface); color: var(--smart-background-color) } .smart-path[label][hint]>.smart-container { display: flex; position: relative; align-items: center } .smart-path[hint] .smart-hint, .smart-path[label] .smart-label { position: absolute; left: 0; font-size: 12px; display: block; padding: var(--smart-editor-label-padding); pointer-events: none; text-align: initial; line-height: initial; vertical-align: initial; width: 100% } .smart-path[label]>.smart-container { align-items: flex-end } .smart-path[label] .smart-label { bottom: 100%; -webkit-user-select: none; -ms-user-select: none; -moz-user-select: none; user-select: none } .smart-path[hint] .smart-hint { -webkit-user-select: none; -ms-user-select: none; -moz-user-select: none; user-select: none; opacity: 0; top: 100%; bottom: initial } .smart-path[hint][focus] .smart-hint { opacity: 1 } .smart-path[opened] .smart-drop-down-button { color: var(--smart-ui-state-color-active); background: var(--smart-ui-state-active); border-color: var(--smart-ui-state-border-active) } .smart-path[wrap] .smart-path-input-wrapper { padding-top: calc(var(--smart-editor-label-padding) + 2 * var(--smart-border-width)); padding-bottom: calc(var(--smart-editor-label-padding) + 2 * var(--smart-border-width)) } .smart-path.outlined { background-color: transparent; color: inherit } .smart-path.outlined[label] .smart-label { top: -11px; left: var(--smart-editor-label-padding); background: var(--smart-background); color: var(--smart-background-color); z-index: 1; height: auto; min-height: 20px; width: auto; transition: all .2s ease; transform: scale(1) } .smart-path.outlined[label][focus] .smart-label { transform: scale(.8); color: var(--smart-primary) } .smart-path.outlined[hover] .smart-drop-down-button { color: var(--smart-ui-state-color-hover); border-color: var(--smart-ui-state-border-hover); background-color: var(--smart-ui-state-hover) } .smart-path.underlined .smart-browse-button:after, .smart-path.underlined .smart-drop-down-button:after, .smart-path.underlined .smart-path-input-container:after { border-bottom-color: var(--smart-primary); content: ''; width: 0; position: absolute; left: 0; border-bottom-width: 1px; border-bottom-style: solid; transition: all .2s cubic-bezier(0, 0, .2, 1); bottom: 0 } .smart-path.underlined .smart-browse-button, .smart-path.underlined .smart-drop-down-button, .smart-path.underlined .smart-input, .smart-path.underlined .smart-path-input-container, .smart-path.underlined[hover]:not([opened]) .smart-input { border-top-color: transparent; border-left-color: transparent; border-right-color: transparent } .smart-path.underlined { background-color: transparent; color: inherit } .smart-path.underlined .smart-browse-button[active], .smart-path.underlined .smart-drop-down-button[active], .smart-path.underlined .smart-input[active] { background-color: var(--smart-ui-state-active); color: var(--smart-ui-state-color-active) } .smart-path.underlined:not([opened]) .smart-input, .smart-path.underlined:not([opened]):not([hover]) .smart-browse-button, .smart-path.underlined:not([opened]):not([hover]) .smart-drop-down-button { background-color: transparent; color: inherit; border-radius: initial } .smart-path.underlined:not([hover]) .smart-browse-button:focus, .smart-path.underlined:not([hover]) .smart-drop-down-button:focus { box-shadow: none } .smart-path.underlined:not([hover]) .smart-input:focus { box-shadow: none; z-index: initial } .smart-path.underlined[hover]:not([opened]) .smart-input { background-color: transparent } .smart-path.underlined[focus] .smart-browse-button:after, .smart-path.underlined[focus] .smart-drop-down-button:after, .smart-path.underlined[focus] .smart-path-input-container:after { width: 100% } .smart-path.underlined[label] .smart-label { transition: all .2s cubic-bezier(0, 0, .2, 1); transform: scale(1); transform-origin: top left } .smart-path.underlined[label][value=""] .smart-label { bottom: 0 } .smart-path.underlined[label][focus] .smart-label, .smart-path.underlined[label][opened] .smart-label { transform: scale(.8); color: var(--smart-primary); bottom: 100% } .smart-path[right-to-left]>.smart-container { direction: rtl } .smart-path[right-to-left] .smart-browse-button { border-top-left-radius: var(--smart-border-top-left-radius); border-bottom-left-radius: var(--smart-border-bottom-left-radius); border-top-right-radius: 0; border-bottom-right-radius: 0 } .smart-path[right-to-left] .smart-drop-down-button { border-top-right-radius: var(--smart-border-top-right-radius); border-bottom-right-radius: var(--smart-border-bottom-left-radius); border-top-left-radius: 0; border-bottom-left-radius: 0 } .smart-path[right-to-left][indicator] .smart-path-input-container { border-top-left-radius: var(--smart-border-top-left-radius); border-top-right-radius: 0; border-bottom-left-radius: var(--smart-border-bottom-left-radius); border-bottom-right-radius: 0 } .smart-drop-down.smart-drop-down-repositioned[right-to-left] { direction: rtl } .number-format-panel-demo-container { max-width: 960px; border: 1px solid #ccc; border-radius: 4px; padding: 15px } .selected-custom-number-format-holder-and-apply-holder { display: grid; grid-template-columns: var(--smart-number-format-panel-selected-format-width) var(--smart-number-format-panel-apply-button-width); grid-template-rows: auto; grid-column-gap: var(--smart-number-format-panel-header-holder-offset) } .selected-custom-number-format-holder { display: block; border: var(--smart-number-format-panel-border-size) solid var(--smart-number-format-panel-border-color); border-radius: var(--smart-number-format-panel-border-radius); padding-left: var(--smart-number-format-panel-selected-format-padding-left); padding-top: var(--smart-number-format-panel-selected-format-padding-top); padding-bottom: var(--smart-number-format-panel-selected-format-padding-bottom) } .selected-custom-number-format-holder .custom-number-format-input-holder { width: auto } .selected-custom-number-format-holder .custom-number-format-input-holder smart-text-box { width: var(--smart-number-format-panel-header-input-width) } .selected-custom-number-format-holder .custom-number-format-input-holder smart-text-box input { border: none } .custom-number-format-item, .custom-number-format-list { border: var(--smart-number-format-panel-border-size) solid var(--smart-number-format-panel-border-color) } .apply-button-holder .use-number-format-button { height: 100% } .sample-container { margin-top: var(--smart-number-format-panel-sample-container-vertical-offset); margin-left: var(--smart-number-format-panel-sample-container-horizontal-offset) } .custom-number-format-list { padding: 0; margin: 0; margin-top: var(--smart-number-format-panel-formats-list-margin-top); max-height: var(--smart-number-format-panel-formats-list-max-height); overflow-y: auto } .custom-number-format-item { cursor: pointer; border-left: 0; border-bottom: none; padding: var(--smart-number-format-panel-formats-item-padding); padding-left: var(--smart-number-format-panel-formats-item-left-padding); list-style-type: none } .custom-number-format-item:last-child { border-bottom: 0 } .custom-number-format-item:first-child { border-top: 0 !important } .custom-number-format-item:hover { background: var(--smart-number-format-panel-formats-item-hover-background) } .custom-number-format-item-default-format { float: right; color: var(--smart-number-format-panel-formats-item-example-format-color) } .smart-kanban { width: var(--smart-kanban-default-width); height: var(--smart-kanban-default-height); border: none; padding: 0 } .smart-kanban .smart-kanban-scroll-viewer { width: 100%; height: 100% } .smart-kanban .smart-kanban-scroll-viewer .smart-scroll-viewer-content-container[disable-vertical] { padding: var(--smart-data-view-padding); height: 100%; min-width: 100% } .smart-kanban.smart-kanban-column-color .smart-kanban-column:not(.smart-kanban-add-new-column) { background: var(--smart-surface); padding: 5px; border: 1px solid var(--smart-border); border-radius: 5px; box-sizing: border-box } .smart-kanban.smart-kanban-column-color .smart-kanban-column:not(.smart-kanban-add-new-column) .smart-kanban-column-header { background: 0 0; border: none } .smart-kanban .smart-kanban-column .smart-kanban-column-footer { display: flex; font-family: var(--smart-font-family); font-size: 11px; color: var(--smart-surface-color); opacity: .5; align-items: center; text-align: center; padding: 8px } .smart-kanban .smart-kanban-column.collapsed .smart-kanban-column-footer { padding: 0 } .smart-kanban.smart-container, .smart-kanban>.smart-container { position: relative } .smart-kanban.smart-container[modal], .smart-kanban>.smart-container[modal] { pointer-events: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } .smart-kanban.smart-container[modal]:after, .smart-kanban>.smart-container[modal]:after { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: #000; opacity: .3; pointer-events: none; cursor: default; -moz-user-select: none; -webkit-user-select: none; user-select: none } .smart-kanban .smart-kanban-body { position: relative; width: 100%; height: 100%; display: grid; grid-column-gap: var(--smart-data-view-padding); grid-template-rows: 100% } .smart-kanban .smart-kanban-body>.smart-kanban-column { height: 100%; overflow: hidden } .smart-kanban .smart-kanban-column { display: grid; grid-template-rows: var(--smart-kanban-header-size) 1fr; grid-row-gap: var(--smart-data-view-padding); min-height: 0 } .smart-kanban .smart-kanban-column:not(.collapsed)>.smart-kanban-column-header { grid-template-columns: 1fr auto auto } .smart-kanban .smart-kanban-column.collapsed>.smart-kanban-column-header>.smart-kanban-column-header-label.pill .heading { padding: 8px 2px } .smart-kanban .smart-kanban-column>.smart-kanban-column-header { border: var(--smart-border-width) solid var(--smart-border); border-top-left-radius: var(--smart-border-top-left-radius); border-top-right-radius: var(--smart-border-top-right-radius); border-bottom-left-radius: var(--smart-border-bottom-left-radius); border-bottom-right-radius: var(--smart-border-bottom-right-radius); min-width: 0; display: grid; grid-template-columns: 1fr auto; align-content: center; align-items: center; padding: 0 var(--smart-data-view-padding); background-color: var(--smart-surface); color: var(--smart-surface-color) } .smart-kanban .smart-kanban-column>.smart-kanban-column-header>.smart-kanban-column-header-label { font-size: calc(var(--smart-font-size) + 1px); font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .smart-kanban .smart-kanban-column>.smart-kanban-column-header>.smart-kanban-column-header-label.pill { overflow: visible; display: inline-flex; align-content: center } .smart-kanban .smart-kanban-column>.smart-kanban-column-header>.smart-kanban-column-header-label.pill .heading { border-radius: 12px; font-size: var(--smart-font-size); padding: 2px 8px; min-width: 22px; font-weight: 500; display: flex; align-items: center } .smart-kanban .smart-kanban-column>.smart-kanban-column-header>.smart-kanban-column-header-label.pill .heading .summary { font-size: 10px; margin-left: 3px; opacity: .8 } .smart-kanban .smart-kanban-column>.smart-kanban-column-header>.smart-kanban-column-header-label.pending { position: relative; overflow: visible; visibility: hidden } .smart-kanban .smart-kanban-column>.smart-kanban-column-header>.smart-arrow, .smart-kanban .smart-kanban-column>.smart-kanban-column-header>.smart-kanban-column-header-add { display: none } .smart-kanban .smart-kanban-column>.smart-kanban-column-content { display: grid; grid-row-gap: var(--smart-data-view-padding); min-height: 0; grid-template-rows: 1fr 3fr } .smart-kanban .smart-kanban-column .smart-kanban-column-content-tasks:empty, .smart-kanban .smart-kanban-column.collapsed>.smart-kanban-column-content { display: none } .smart-kanban .smart-kanban-column.has-swimlane, .smart-kanban .smart-kanban-column>.smart-kanban-column-content.has-swimlane { grid-row-gap: calc(var(--smart-kanban-header-size) + 2 * var(--smart-data-view-padding)) } .smart-kanban .smart-kanban-column>.smart-kanban-column-content.no-sub-columns { grid-template-rows: 1fr } .smart-kanban .smart-kanban-column .smart-kanban-column-content-tasks { position: relative; border: none; width: unset; min-width: unset; height: unset; min-height: 0; max-height: unset; padding: 0; background-color: transparent } .smart-kanban .smart-kanban-column.collapsed { width: var(--smart-kanban-header-size); grid-template-rows: 1fr } .smart-kanban .smart-kanban-column.collapsed>.smart-kanban-column-header { width: 100%; padding: var(--smart-data-view-padding) 0; writing-mode: vertical-lr; color: var(--smart-primary); direction: ltr } .smart-kanban .smart-kanban-column.collapsed.has-swimlane>.smart-kanban-column-header>.smart-kanban-column-header-label { margin-top: calc(2 * var(--smart-kanban-header-size) + var(--smart-data-view-padding)) } .smart-kanban .smart-kanban-column.dragged .smart-kanban-column-header { background-image: linear-gradient(45deg, rgba(0, 0, 0, .1) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, .1) 50%, rgba(0, 0, 0, .1) 75%, transparent 75%, transparent); background-size: 3em 3em } .smart-kanban .smart-kanban-column.drop-target { position: relative; overflow: visible } .smart-kanban .smart-kanban-column.drop-target.before:after { border-left: var(--smart-kanban-color-band-width) dashed var(--smart-primary); left: calc(-1 * var(--smart-kanban-color-band-width)); margin-left: -3px } .smart-kanban .smart-kanban-column.drop-target.after:after { border-right: var(--smart-kanban-color-band-width) dashed var(--smart-primary); margin-left: 3px } .smart-kanban .smart-kanban-column[orientation=horizontal]>.smart-kanban-column-content>.smart-kanban-column-content-tasks>.smart-container>.smart-scroll-viewer-container>.smart-scroll-viewer-content-container { grid-template-columns: repeat(auto-fit, minmax(var(--smart-kanban-task-min-width), 1fr)); grid-column-gap: var(--smart-data-view-padding) } .smart-kanban .smart-kanban-column[orientation=horizontal]>.smart-kanban-column-content>.smart-kanban-column-content-tasks .drop-target.before:after { border-left: var(--smart-kanban-color-band-width) dashed var(--smart-primary-color); left: calc(-1 * var(--smart-kanban-color-band-width)) } .smart-kanban .smart-kanban-column[orientation=horizontal]>.smart-kanban-column-content>.smart-kanban-column-content-tasks .drop-target.after:after { border-right: 2px dashed var(--smart-primary) } .smart-kanban .smart-kanban-column[orientation=vertical]>.smart-kanban-column-content>.smart-kanban-column-content-tasks .drop-target.before:after { border-top: 2px dashed var(--smart-primary) } .smart-kanban .smart-kanban-column[orientation=vertical]>.smart-kanban-column-content>.smart-kanban-column-content-tasks .drop-target.after:after { border-bottom: 2px dashed var(--smart-primary) } .smart-kanban .smart-kanban-column-header:focus { outline: 0; border-color: var(--smart-ui-state-border-active) } .smart-kanban .smart-kanban-column-header-label.pending .smart-kanban-column-header-input { position: absolute; top: -10%; left: 0; width: 100%; height: 120%; outline: 0; font-size: calc(var(--smart-font-size) - 1px); visibility: visible; border: var(--smart-border-width) solid var(--smart-border); border-top-right-radius: var(--smart-border-top-right-radius); border-top-left-radius: var(--smart-border-top-left-radius); border-bottom-left-radius: var(--smart-border-bottom-left-radius); border-bottom-right-radius: var(--smart-border-bottom-right-radius); background-color: var(--smart-background); color: var(--smart-background-color); font-family: inherit; padding: 4px } .smart-kanban .smart-kanban-task[selected], .smart-kanban-task-progress-container { background-color: var(--smart-ui-state-selected) } .smart-kanban .smart-kanban-column-header-label.pending .smart-kanban-column-header-input:hover { border-color: var(--smart-ui-state-border-hover) } .smart-kanban .smart-kanban-column-header-label.pending .smart-kanban-column-header-input:focus { border-color: var(--smart-primary) } .smart-kanban .smart-kanban-column-header-label.pending.colors .smart-kanban-column-header-input { width: calc(100% - 30px) } .smart-kanban .smart-kanban-column-header-label.pending.colors smart-color-input { position: absolute; right: 2px; visibility: visible } .smart-kanban .smart-kanban-column-header-add:focus { outline: 0; color: var(--smart-primary) } .smart-kanban .smart-kanban-column-content-tasks:focus { outline: 0 } .smart-kanban .smart-kanban-column-content-tasks.empty { position: relative } .smart-kanban .smart-kanban-column-content-tasks.empty:after { content: attr(empty); position: absolute; top: calc(50% - 11px); display: flex; align-items: center; align-content: center; justify-content: center; width: 100%; opacity: .5; font-size: 11px } .smart-kanban .smart-kanban-column-content-tasks .smart-kanban-task[focus] { box-shadow: inset 0 0 1px 1px var(--smart-primary) } .smart-kanban .smart-kanban-column-content-tasks>.smart-container>.smart-scroll-viewer-container>.smart-scroll-viewer-content-container { display: grid; grid-row-gap: var(--smart-data-view-padding); padding: 0 } .smart-kanban .smart-kanban-column-content-columns { display: grid; grid-column-gap: var(--smart-data-view-padding); min-height: 0 } .smart-kanban .smart-kanban-column-content-columns.has-tabs { display: grid; grid-row-gap: var(--smart-data-view-padding); min-height: 0; grid-template-rows: var(--smart-kanban-header-size) 1fr } .smart-kanban .smart-kanban-column-content-columns.has-tabs .smart-kanban-column { grid-template-rows: 1fr } .smart-kanban .smart-kanban-task.dragged { background-image: linear-gradient(45deg, rgba(0, 0, 0, .1) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, .1) 50%, rgba(0, 0, 0, .1) 75%, transparent 75%, transparent); background-size: 3em 3em } .smart-kanban .smart-kanban-task-user:focus { outline: 0; border: 1px solid var(--smart-primary) } .smart-kanban .remove-button:focus, .smart-kanban .smart-kanban-task-actions:focus, .smart-kanban .smart-kanban-task-comments:focus { outline: var(--smart-primary) solid 1px } .smart-kanban .smart-kanban-task-actions:hover, .smart-kanban .smart-kanban-task-comments:hover { color: var(--smart-primary) } .smart-kanban .smart-data-view-header { border: var(--smart-border-width) solid var(--smart-border); border-top-left-radius: var(--smart-border-top-left-radius); border-top-right-radius: var(--smart-border-top-right-radius); border-bottom-left-radius: var(--smart-border-bottom-left-radius); border-bottom-right-radius: var(--smart-border-bottom-right-radius); min-width: 0; height: var(--smart-kanban-header-size) } .smart-kanban .swimlane, .smart-kanban-task { border: var(--smart-border-width) solid var(--smart-border); min-width: 0 } .smart-kanban .smart-kanban-add-new-column { cursor: pointer } .smart-kanban .smart-kanban-add-new-column .smart-kanban-column-content { display: none } .smart-kanban .smart-kanban-add-new-column-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(var(--smart-font-size) + 1px); font-weight: 700; display: flex; align-items: center } .smart-kanban .swimlane { position: absolute; display: flex; align-items: center; justify-content: center; height: var(--smart-kanban-header-size); background-color: var(--smart-primary); color: var(--smart-primary-color); font-size: calc(var(--smart-font-size) + 2px); padding: var(--smart-data-view-padding); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-top-left-radius: var(--smart-border-top-left-radius); border-top-right-radius: var(--smart-border-top-right-radius); border-bottom-left-radius: var(--smart-border-bottom-left-radius); border-bottom-right-radius: var(--smart-border-bottom-right-radius) } .smart-kanban .drop-target:after { content: ''; position: absolute; box-sizing: border-box; border: 2px dashed var(--smart-primary); width: 100%; height: 100%; left: 0; top: 0; pointer-events: none; opacity: .75 } .smart-kanban .drop-target.after:after, .smart-kanban .drop-target.before:after { border: none } .smart-kanban:not([right-to-left]) .smart-kanban-column.collapsed>.smart-kanban-column-header>.smart-arrow { transform: rotate(180deg) } .smart-kanban[add-new-button] .smart-kanban-column[add-new-button]>.smart-kanban-column-header>.smart-kanban-column-header-add:after { content: var(--smart-icon-plus-circled); font-family: var(--smart-font-family-icon); padding: 0 10px 10px 0 } .smart-kanban[add-new-button] .smart-kanban-column[add-new-button]>.smart-kanban-column-header>.smart-kanban-column-header-add:hover { cursor: pointer; color: var(--smart-primary) } .smart-kanban[add-new-button] .smart-kanban-column[add-new-button]:not(.collapsed)>.smart-kanban-column-header[add-new-button] { grid-template-columns: auto 1fr auto auto } .smart-kanban[add-new-button] .smart-kanban-column[add-new-button]:not(.collapsed)>.smart-kanban-column-header[add-new-button]>.smart-kanban-column-header-add { display: block } .smart-kanban[add-new-button] .smart-kanban-add-new-button { width: 30px; height: 30px; border-radius: 50%; background: var(--smart-primary); color: var(--smart-primary-color); position: absolute; display: flex; justify-content: center; align-content: center; align-items: center; font-size: 24px; box-shadow: var(--smart-elevation-6); cursor: pointer; transition: transform .1s ease-out, box-shadow .2s ease-in-out; transform: scale(1); transition-delay: 0s } .smart-kanban[header-position=top] .smart-kanban-body, .smart-kanban[header-position=bottom] .smart-kanban-body { height: calc(100% - var(--smart-kanban-header-size) - var(--smart-data-view-padding)) } .smart-kanban[add-new-button] .smart-kanban-add-new-button:hover { box-shadow: var(--smart-elevation-8); transform: scale(1.2) } .smart-kanban[add-new-button] .smart-kanban-add-new-button:after { content: var(--smart-icon-plus); font-family: var(--smart-font-family-icon); font-size: 14px } .smart-kanban[add-new-button] .smart-kanban-add-new-button.show { opacity: 1 } .smart-kanban[column-actions] .smart-kanban-column:not(.collapsed)>.smart-kanban-column-header[settings]>.smart-kanban-column-header-settings-button { display: block; transition: transform .2s ease-in-out; margin-top: -1px } .smart-kanban[column-actions] .smart-kanban-column:not(.collapsed)>.smart-kanban-column-header[settings]>.smart-kanban-column-header-settings-button:hover, .smart-kanban[column-actions] .smart-kanban-column:not(.collapsed)>.smart-kanban-column-header[settings]>.smart-kanban-column-header-settings-button[aria-expanded] { color: var(--smart-primary) } .smart-kanban[column-actions] .smart-kanban-column:not(.collapsed)>.smart-kanban-column-header[settings]>.smart-kanban-column-header-settings-button:after { margin-left: 5px; content: var(--smart-icon-menu); font-family: var(--smart-font-family-icon) } .smart-kanban[column-actions] .smart-kanban-column:not(.collapsed):not([add-new-button])>.smart-kanban-column-header[settings] { grid-template-columns: 1fr auto auto auto } .smart-kanban[collapsible] .smart-kanban-column[collapsible]>.smart-kanban-column-header { cursor: pointer } .smart-kanban[collapsible] .smart-kanban-column[collapsible]>.smart-kanban-column-header:hover { background-color: var(--smart-ui-state-hover); color: var(--smart-ui-state-color-hover) } .smart-kanban[collapsible] .smart-kanban-column[collapsible]>.smart-kanban-column-header>.smart-arrow { display: block; transition: transform .2s ease-in-out } .smart-kanban[collapsible] .smart-kanban-column[collapsible]>.smart-kanban-column-header>.smart-arrow:hover { color: var(--smart-primary); transform: scale(1.2) } .smart-kanban[task-position=leaf] .smart-kanban-column>.smart-kanban-column-content:not(.no-sub-columns) { grid-template-rows: 0 1fr; grid-row-gap: 0 } .smart-kanban[user-list] .smart-kanban-task-user:hover { border: none; box-shadow: 0 0 4px 1px var(--smart-primary) } .smart-kanban[header-position=top] .smart-data-view-header { margin-bottom: var(--smart-data-view-padding) } .smart-kanban[header-position=bottom] .smart-data-view-header { margin-top: var(--smart-data-view-padding) } .smart-data-view-header { height: var(--smart-kanban-header-size) } .smart-kanban-task { border-left: var(--smart-kanban-color-band-width) solid var(--smart-primary); border-top-right-radius: var(--smart-border-top-right-radius); border-bottom-right-radius: var(--smart-border-bottom-right-radius); width: 100%; height: auto; min-height: var(--smart-kanban-task-min-height); display: grid; grid-template-columns: 100%; grid-template-rows: 1fr auto auto; padding: 5px; grid-row-gap: 5px; cursor: pointer; background-color: var(--smart-background); position: relative } .smart-kanban-task .smart-kanban-task-cover-content { height: 100px; display: flex; overflow: hidden } .smart-kanban-task .smart-kanban-task-cover-content img { max-width: 100%; max-height: 100% } .smart-kanban-task .smart-kanban-task-custom-fields { display: grid; grid-template-columns: 1fr 1fr } .smart-kanban-task .smart-kanban-task-custom-fields .smart-kanban-task-field { display: flex; flex-direction: column; padding: 5px } .smart-kanban-task .smart-kanban-task-custom-fields .smart-kanban-task-field .smart-kanban-task-field-label { margin-bottom: calc(var(--smart-card-view-vertical-offset)/ 3); text-transform: uppercase; font-size: calc(var(--smart-font-size) - 2px); opacity: .7; overflow: hidden; text-overflow: ellipsis } .smart-kanban-task .smart-kanban-task-custom-fields .smart-kanban-task-field .smart-kanban-task-field-value { overflow: hidden; text-overflow: ellipsis; word-break: break-word } .smart-kanban-task .smart-kanban-task-custom-fields .smart-kanban-task-field .smart-kanban-task-field-value img { border: 1px solid var(--smart-border); width: 25px; height: 25px } .smart-kanban-task .smart-kanban-task-custom-fields .smart-kanban-task-field .smart-kanban-task-field-value img:hover { border: 2px solid var(--smart-primary) } .smart-kanban-task-input { height: 20px; opacity: .8; border: none !important; width: 100%; text-decoration: underline; background: 0 0; cursor: pointer; font-size: calc(var(--smart-font-size) - 1px) !important } .smart-kanban-task-input:active, .smart-kanban-task-input:focus { text-decoration: initial; cursor: initial; opacity: 1 } .smart-kanban-task-subtasks .smart-kanban-sub-task[selected] .label, .smart-window.smart-kanban-window .checklist-editor smart-list-item[selected] .label { text-decoration: line-through } .smart-kanban-task-subtasks .smart-kanban-sub-task { display: grid; grid-column-gap: 5px; grid-template-columns: 16px 1fr 16px; font-size: calc(var(--smart-font-size) - 1px) !important; padding: 2px } .smart-kanban-task-subtasks .smart-kanban-sub-task:before { content: var(--smart-icon-check-empty); font-family: var(--smart-font-family-icon); cursor: pointer } .smart-kanban-task-subtasks .smart-kanban-sub-task:hover .remove-subtask:after { content: var(--smart-icon-close); font-family: var(--smart-font-family-icon); cursor: pointer } .smart-kanban-task-subtasks .smart-kanban-sub-task.selected { background: var(--smart-ui-state-selected); color: var(--smart-ui-state-color-selected) } .smart-kanban-task-subtasks .smart-kanban-sub-task.selected:before { content: var(--smart-icon-check-squared) } .smart-kanban-task-content { display: grid; grid-template-columns: 1fr auto; grid-column-gap: 5px } .smart-kanban-task-text { padding: 5px; word-break: break-word; max-height: var(--smart-kanban-text-max-height); overflow: auto } .smart-kanban-task-text:after, .smart-kanban-task-text:before { font-family: var(--smart-font-family-icon) } .smart-kanban-task-text:before { margin-right: 10px } .smart-kanban-task-text:after { margin-left: 10px } .smart-kanban-task-footer { display: grid; grid-template-columns: 1fr auto auto; align-items: center; grid-column-gap: 5px } .smart-kanban-task-due { display: none; letter-spacing: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .smart-kanban-task-due:not(:empty) { margin-top: calc(var(--smart-data-view-padding)/ 2) } .smart-kanban-task-due.overdue { color: var(--smart-error) } .smart-kanban-task-due.overdue:after { font-family: var(--smart-font-family-icon); content: var(--smart-icon-attention-circled) } .smart-kanban-task-info { display: grid; grid-template-rows: auto auto } .smart-kanban-task-checked { letter-spacing: 1px } .smart-kanban-task-progress { background-color: var(--smart-primary); position: absolute; height: 20%; left: 0 } .smart-kanban-task-progress.bottom { bottom: 0 } .smart-kanban-task-progress-container { display: none; height: 20px; position: relative; align-items: center; justify-content: center } .smart-kanban-task-user { display: none } .smart-kanban-task-user.empty:after { content: var(--smart-icon-user); font-family: var(--smart-font-family-icon); width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; font-size: var(--smart-kanban-user-icon-size) } .smart-kanban-task-tags { display: none } .smart-kanban-task-tag { display: inline-block; padding: 5px; background-color: rgba(var(--smart-primary-rgb), .15); color: var(--smart-background-color); margin-right: 5px; border-radius: 20px } .smart-kanban-task-actions, .smart-kanban-task-comments { display: none } .smart-kanban-task-actions:after { content: var(--smart-icon-settings); font-family: var(--smart-font-family-icon) } .smart-kanban-task-comments:after { content: var(--smart-icon-comment) " " attr(num); font-family: var(--smart-font-family-icon); white-space: nowrap } .smart-kanban-feedback { position: absolute; color: var(--smart-background-color); font-family: var(--smart-font-family); font-size: var(--smart-font-size); cursor: move; opacity: .9 } .smart-kanban-feedback * { box-sizing: border-box } .smart-kanban-feedback .smart-kanban-task { position: absolute; box-shadow: var(--smart-elevation-4); pointer-events: none } .smart-kanban-feedback[column-drag] { box-shadow: var(--smart-elevation-4); border: none; height: auto; transform: scale(.8); transform-origin: top left } .smart-kanban-feedback[column-drag] .smart-kanban { border: none; overflow: visible } .smart-kanban-feedback[column-drag] .smart-kanban-task { position: static; box-shadow: none } .smart-kanban-feedback .smart-kanban-feedback-additional, .smart-kanban-feedback .smart-kanban-feedback-additional.multiple:before { box-shadow: var(--smart-elevation-4); border: var(--smart-border-width) solid var(--smart-border); background-color: var(--smart-background); position: absolute; pointer-events: none } .smart-kanban-feedback .smart-kanban-feedback-additional { top: -8px; left: 8px } .smart-kanban-feedback .smart-kanban-feedback-additional.multiple { top: -16px; left: 16px } .smart-kanban-feedback .smart-kanban-feedback-additional.multiple:before { content: ''; width: 100%; height: 100%; bottom: -9px; left: -9px } .smart-kanban-feedback .smart-kanban-feedback-additional+.smart-kanban-task::after { display: flex; justify-content: center; align-items: center; content: attr(num); position: absolute; width: 20px; height: 20px; background-color: var(--smart-primary); color: var(--smart-primary-color); right: -10px; top: -10px; border-radius: 50% } [task-progress] .smart-kanban-task-progress-container { display: flex } [task-user-icon] .smart-kanban-task-user { display: block; width: var(--smart-kanban-user-icon-size); height: var(--smart-kanban-user-icon-size); border: var(--smart-border-width) solid var(--smart-border); border-radius: 50%; background-color: var(--smart-surface); color: var(--smart-background-color); background-position: center; background-repeat: no-repeat; background-size: cover } [task-tags] .smart-kanban-task-tags { display: flex; flex-direction: row; overflow: hidden } [task-actions] .smart-kanban-task-actions, [task-comments] .smart-kanban-task-comments, [task-due] .smart-kanban-task-due { display: block } [task-priority] .smart-kanban-task-text { display: flex; align-items: center } [task-priority] .smart-kanban-task-text .priority { font-family: var(--smart-font-family-icon); margin-left: 5px; display: inline-block; width: 16px; height: 16px; background-repeat: no-repeat } [task-priority] .smart-kanban-task-text .priority.low { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232666BE'%3E%3Cpath d='M2.73804 7.00207C1.96611 5.66874 2.92823 4 4.46889 4H19.5311C21.0718 4 22.0339 5.66874 21.262 7.00207L13.7309 20.0103C12.9605 21.3409 11.0395 21.3409 10.2691 20.0103L2.73804 7.00207Z'/%3E%3C/svg%3E") } [task-priority] .smart-kanban-task-text .priority.average { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23005C99'%3E%3Cpath d='M12 5.98999L19.53 19H4.47L12 5.98999ZM2.74 18C1.97 19.33 2.93 21 4.47 21H19.53C21.07 21 22.03 19.33 21.26 18L13.73 4.98999C12.96 3.65999 11.04 3.65999 10.27 4.98999L2.74 18Z'/%3E%3C/svg%3E") } [task-priority] .smart-kanban-task-text .priority.high { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23DD5347'%3E%3Cpath d='M2.73804 17.9979C1.96611 19.3313 2.92823 21 4.46889 21H19.5311C21.0718 21 22.0339 19.3313 21.262 17.9979L13.7309 4.98965C12.9605 3.65908 11.0395 3.65908 10.2691 4.98965L2.73804 17.9979Z'/%3E%3C/svg%3E") } [task-priority] .smart-kanban-task-text .priority.critical { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23AF0020'%3E%3Cpath d='M2.73804 17.9979C1.96611 19.3313 2.92823 21 4.46889 21H19.5311C21.0718 21 22.0339 19.3313 21.262 17.9979L13.7309 4.98965C12.9605 3.65908 11.0395 3.65908 10.2691 4.98965L2.73804 17.9979ZM13.5 17.5C13.5 18.3284 12.8284 19 12 19V19C11.1716 19 10.5 18.3284 10.5 17.5V17.5C10.5 16.6716 11.1716 16 12 16V16C12.8284 16 13.5 16.6716 13.5 17.5V17.5ZM13.5 13.5C13.5 14.3284 12.8284 15 12 15V15C11.1716 15 10.5 14.3284 10.5 13.5V9.5C10.5 8.67157 11.1716 8 12 8V8C12.8284 8 13.5 8.67157 13.5 9.5V13.5Z'/%3E%3C/svg%3E") } .smart-kanban-tab-strip { height: 35px; background: inherit; margin-bottom: 10px; display: flex; border-bottom: 1px solid var(--smart-border) } .smart-kanban-tab-strip .smart-kanban-tab { padding: 8px 22px; cursor: pointer; text-transform: uppercase } .smart-kanban-tab-strip .smart-kanban-tab.selected { color: var(--smart-primary); border-bottom: 2px solid var(--smart-primary) } .smart-window.smart-kanban-window[readonly] .smart-date-time-picker[calendar-button] .smart-drop-down-button.smart-calendar-button, .smart-window.smart-kanban-window[readonly] .smart-numeric-text-box .smart-numeric-text-box-unit-display, .smart-window.smart-kanban-window[readonly] smart-numeric-text-box input { border: none } .smart-kanban-tab-strip .smart-kanban-tab[focus] { color: var(--smart-primary); outline: 0 } .smart-window.smart-kanban-window { max-height: 800px; width: auto !important; max-width: 700px; min-width: 700px !important } .smart-window.smart-kanban-window[readonly] .new-subtask, .smart-window.smart-kanban-window[readonly] .remove-subtask { display: none } .smart-window.smart-kanban-window[readonly] .smart-button.add, .smart-window.smart-kanban-window[readonly] .smart-button.delete, .smart-window.smart-kanban-window[readonly] .smart-footer { display: none !important } .smart-window.smart-kanban-window[readonly] .smart-multi-combo-input .smart-drop-down-button, .smart-window.smart-kanban-window[readonly] .smart-multi-combo-input .smart-drop-down-list-unselect-button { display: none } .smart-window.smart-kanban-window[readonly] smart-color-input { pointer-events: none; opacity: .7 } .smart-window.smart-kanban-window[readonly] .smart-kanban-tab-content.details textarea, .smart-window.smart-kanban-window[readonly] input, .smart-window.smart-kanban-window[readonly] smart-date-time-picker, .smart-window.smart-kanban-window[readonly] smart-input, .smart-window.smart-kanban-window[readonly] smart-multi-combo-input, .smart-window.smart-kanban-window[readonly] smart-numeric-text-box { opacity: .7; --smart-surface: var(--smart-background); --smart-surface-color: var(--smart-background); border: none !important; border-bottom: 1px solid var(--smart-border) !important; pointer-events: none } .smart-window.smart-kanban-window .details .layout { display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 30px } .smart-window.smart-kanban-window .details .layout.single-column { grid-template-columns: 1fr } .smart-comment, .smart-window.smart-kanban-window .comments .smart-comment { grid-template-columns: var(--smart-kanban-user-icon-size) 1fr; grid-column-gap: var(--smart-data-view-padding) } .smart-window.smart-kanban-window .details .layout .description-editor { height: 91px } .smart-window.smart-kanban-window .details .layout .tags-editor { margin-top: 2px } .smart-window.smart-kanban-window .details .layout .text-editor { height: 32px } .smart-window.smart-kanban-window .smart-kanban-task-user { display: block; width: var(--smart-kanban-user-icon-size); height: var(--smart-kanban-user-icon-size); border: var(--smart-border-width) solid var(--smart-border); border-radius: 50%; background-color: var(--smart-surface); color: var(--smart-background-color); background-position: center; background-repeat: no-repeat; background-size: cover } .smart-window.smart-kanban-window .fields .smart-kanban-task-field-editor { width: 100% } .smart-window.smart-kanban-window .fields .editor-label { display: flex; justify-content: space-between } .smart-window.smart-kanban-window .fields .editor-label .icon { width: 16px; height: 16px; display: inline-block } .smart-window.smart-kanban-window .fields .editor-label .icon::before { content: var(--smart-icon-visibility); font-family: var(--smart-font-family-icon); cursor: pointer } .smart-window.smart-kanban-window .fields .editor-label .icon.hide::before { content: var(--smart-icon-visibility-off) } .smart-window.smart-kanban-window .history-table { display: block !important; max-height: 400px; overflow: auto } .smart-window.smart-kanban-window .history-table table { border-collapse: collapse; width: 100% } .smart-window.smart-kanban-window .history-table table .smart-kanban-task-user-history { display: flex; align-items: center } .smart-window.smart-kanban-window .history-table table .smart-kanban-task-user-history .name { margin-left: 5px } .smart-window.smart-kanban-window .history-table table td, .smart-window.smart-kanban-window .history-table table th { border: 1px solid var(--smart-border); padding: 8px } .smart-window.smart-kanban-window .history-table table tr:nth-child(even) { background-color: var(--smart-surface); color: var(--smart-surface-color) } .smart-window.smart-kanban-window .history-table table tr:hover { background-color: var(--smart-ui-state-hover); color: var(--smart-ui-state-color-hover) } .smart-window.smart-kanban-window .history-table table th { padding-top: 12px; padding-bottom: 12px; text-align: left; background-color: var(--smart-info); color: var(--smart-info-color) } .smart-window.smart-kanban-window .comments { margin: 0 auto } .smart-window.smart-kanban-window .comments .smart-comment { display: grid; margin: var(--smart-data-view-padding) } .smart-window.smart-kanban-window .comments .smart-comment .comment-header { display: grid; grid-template-columns: 1fr auto auto; grid-column-gap: calc(var(--smart-data-view-padding)/ 2); margin-bottom: var(--smart-data-view-padding) } .smart-window.smart-kanban-window .comments .smart-comment .user-icon { width: 100%; height: var(--smart-kanban-user-icon-size); border-radius: 50%; background-size: cover; background-position: center } .smart-window.smart-kanban-window .comments .smart-comment .user-icon.empty { background: var(--smart-surface); display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--smart-border) } .smart-window.smart-kanban-window .comments .smart-comment .user-icon.empty:after { content: var(--smart-icon-user); font-family: var(--smart-font-family-icon); font-size: 20px } .smart-window.smart-kanban-window .comments .smart-comment .user-name { font-weight: 700 } .smart-window.smart-kanban-window .comments .smart-comment .time { opacity: .8 } .smart-window.smart-kanban-window .comments .smart-comment .remove-button { visibility: hidden; transform: rotate(90deg); width: 16px; cursor: pointer } .smart-window.smart-kanban-window .comments .smart-comment .remove-button:after { content: var(--smart-icon-close); display: flex; align-items: center; justify-content: center; height: 100%; font-family: var(--smart-font-family-icon); cursor: pointer } .smart-window.smart-kanban-window .comments .smart-kanban-list.comments .smart-kanban-new-comment textarea, .smart-window.smart-kanban-window .description-editor { border: var(--smart-border-width) solid var(--smart-border); background-color: var(--smart-background); font-family: inherit; color: var(--smart-background-color); font-size: inherit } .smart-window.smart-kanban-window .comments .smart-comment .remove-button.enabled { visibility: visible } .smart-window.smart-kanban-window .comments .smart-kanban-list.comments { width: var(--smart-kanban-comments-list-width); height: var(--smart-kanban-comments-list-height); max-height: 100% } .smart-window.smart-kanban-window .comments .smart-kanban-list.comments .smart-kanban-comments { overflow: auto } .smart-window.smart-kanban-window .comments .smart-kanban-list.comments .smart-kanban-new-comment { border-top: var(--smart-border-width) solid var(--smart-border); padding: var(--smart-data-view-padding); overflow: hidden } .smart-window.smart-kanban-window .comments .smart-kanban-list.comments .smart-kanban-new-comment textarea { resize: none; width: 100%; border-top-right-radius: var(--smart-border-top-right-radius); border-top-left-radius: var(--smart-border-top-left-radius); border-bottom-left-radius: var(--smart-border-bottom-left-radius); border-bottom-right-radius: var(--smart-border-bottom-right-radius) } .smart-window.smart-kanban-window .comments .smart-kanban-list.comments .smart-kanban-new-comment textarea:focus { outline: 0; border-color: var(--smart-outline) } .smart-window.smart-kanban-window .comments .smart-kanban-list.comments .smart-kanban-new-comment textarea:hover { border-color: var(--smart-ui-state-border-hover) } .smart-window.smart-kanban-window .comments .smart-kanban-list.comments .smart-kanban-new-comment textarea[disabled] { opacity: .5 } .smart-window.smart-kanban-window .comments .smart-kanban-list.comments .smart-kanban-new-comment smart-button { --smart-button-padding: 0; margin-left: auto; height: var(--smart-kanban-send-button-height); display: block } .smart-window.smart-kanban-window .comments .smart-kanban-list.comments .smart-kanban-new-comment smart-button[disabled] { pointer-events: unset; cursor: not-allowed } .smart-window.smart-kanban-window .comments .smart-kanban-list.comments .smart-kanban-comments { height: calc(100% - var(--smart-kanban-new-comment-height-expanded)) } .smart-window.smart-kanban-window .comments .smart-kanban-list.comments .smart-kanban-new-comment { height: var(--smart-kanban-new-comment-height-expanded) } .smart-window.smart-kanban-window .comments .smart-kanban-list.comments .smart-kanban-new-comment textarea { margin-bottom: var(--smart-data-view-padding); height: calc(100% - var(--smart-data-view-padding) - var(--smart-kanban-send-button-height)); display: block } .smart-window.smart-kanban-window .edit, .smart-window.smart-kanban-window .prompt { display: none } .smart-window.smart-kanban-window.prompt { --smart-window-default-width: 250px; --smart-window-default-height: 150px; min-width: 100px; min-height: 100px } .smart-window.smart-kanban-window.prompt .prompt { display: block; width: 100%; height: 100%; padding: 20px } .smart-window.smart-kanban-window.prompt .task-text { display: inline-block; max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700 } .smart-window.smart-kanban-window.edit { --smart-numeric-text-box-default-unit-display-width: 20px } .smart-window.smart-kanban-window.edit .edit { display: block; width: 100%; height: 100% } .smart-window.smart-kanban-window .editor-label { margin-bottom: calc(var(--smart-data-view-padding)/ 2); text-transform: uppercase } .smart-window.smart-kanban-window .editor-container { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; grid-column-gap: var(--smart-data-view-padding) } .smart-window.smart-kanban-window .editor-container.single-column { grid-template-columns: 1fr } .smart-window.smart-kanban-window .editor { width: 100%; margin-bottom: var(--smart-data-view-padding) } .smart-window.smart-kanban-window .description-editor { min-height: 75px; resize: none; border-top-right-radius: var(--smart-border-top-right-radius); border-top-left-radius: var(--smart-border-top-left-radius); border-bottom-left-radius: var(--smart-border-bottom-left-radius); border-bottom-right-radius: var(--smart-border-bottom-right-radius) } .smart-window.smart-kanban-window .description-editor:hover { border-color: var(--smart-ui-state-border-hover) } .smart-window.smart-kanban-window .description-editor:focus { outline: 0; border-color: var(--smart-primary) } .smart-window.smart-kanban-window .new-container { display: grid; grid-template-columns: 1fr var(--smart-text-box-default-height); grid-column-gap: var(--smart-data-view-padding); height: var(--smart-text-box-default-height) } .smart-window.smart-kanban-window .new-container>smart-button { width: unset; height: unset; --smart-button-padding: 0 } .smart-window.smart-kanban-window .color-editor { width: 60px } .smart-window.smart-kanban-window .checklist-editor { border: none; height: auto } .smart-window.smart-kanban-window .checklist-editor smart-list-item .smart-overlay, .smart-window.smart-kanban-window .checklist-editor smart-list-item[focus][selected] .smart-overlay { background-color: transparent } .smart-window.smart-kanban-window .checklist-editor smart-list-item .smart-list-item-container, .smart-window.smart-kanban-window .checklist-editor smart-list-item[focus][selected] .smart-list-item-container { border-color: transparent } .smart-window.smart-kanban-window .checklist-editor .smart-kanban-sub-task { display: grid; grid-column-gap: 5px; grid-template-columns: auto auto } .smart-window.smart-kanban-window .checklist-editor .remove-subtask:after { content: var(--smart-icon-close); font-family: var(--smart-font-family-icon); cursor: pointer } .smart-window.smart-kanban-window .new-subtask { border: var(--smart-border-width) solid var(--smart-border); border-top-right-radius: var(--smart-border-top-right-radius); border-top-left-radius: var(--smart-border-top-left-radius); border-bottom-left-radius: var(--smart-border-bottom-left-radius); border-bottom-right-radius: var(--smart-border-bottom-right-radius); background-color: var(--smart-background); color: var(--smart-background-color); font-family: inherit; font-size: inherit } .smart-window.smart-kanban-window .new-subtask:hover { border-color: var(--smart-ui-state-border-hover) } .smart-window.smart-kanban-window .new-subtask:focus { outline: 0; border-color: var(--smart-outline) } .smart-window.smart-kanban-window .smart-content-container>.smart-footer { display: flex; align-items: center } .smart-window.smart-kanban-window .smart-footer smart-button { width: auto; min-width: 150px; margin-right: 10px; height: 100% } @media only screen and (max-width:600px) { .smart-window.smart-kanban-window { min-width: 300px !important } .smart-window.smart-kanban-window .details .layout { grid-template-columns: 1fr } } .smart-color-input-drop-down-menu.smart-kanban-color-input .grid-samples-container { grid-template-columns: repeat(2, minmax(0, 1fr)) } .smart-color-input-drop-down-menu.smart-kanban-color-input:not([animation=none]) .default-samples-container div { transition: transform .2s ease-in-out } .smart-color-input-drop-down-menu.smart-kanban-color-input .default-samples-container div { position: relative; border-radius: 50%; border: initial; transform: scale(.95) } .smart-color-input-drop-down-menu.smart-kanban-color-input .default-samples-container div.selected { transform: scale(1) } .smart-color-input-drop-down-menu.smart-kanban-color-input .default-samples-container div.selected:not(.no-color):after { content: var(--smart-icon-check); width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: flex; justify-content: center; align-items: center; font-family: var(--smart-font-family-icon); color: var(--smart-secondary-color); border-radius: inherit } .smart-kanban-color-input { --smart-input-drop-down-menu-width: auto } .smart-kanban-color-input.smart-color-picker { background: 0 0 !important } .smart-kanban-color-input .smart-action-button { width: 100%; background: 0 0 !important; border: none !important } .smart-kanban-color-input .smart-action-button .smart-color-box { border-radius: 50% } .smart-kanban-color-input .smart-drop-down-button { display: none } .smart-kanban-list.dialog { position: absolute; border: var(--smart-border-width) solid var(--smart-border); border-top-left-radius: var(--smart-border-top-left-radius); border-top-right-radius: var(--smart-border-top-right-radius); border-bottom-left-radius: var(--smart-border-bottom-left-radius); border-bottom-right-radius: var(--smart-border-bottom-right-radius); width: var(--smart-kanban-user-list-width); max-height: var(--smart-kanban-user-list-max-height); background-color: var(--smart-background); box-shadow: var(--smart-elevation-8); overflow: auto; transform: scaleY(1); transform-origin: top; opacity: 1; z-index: 15 } .smart-kanban-list.dialog.comments .smart-kanban-comments, .smart-kanban-list.dialog.comments .smart-kanban-new-comment, .smart-kanban-list.dialog.comments .smart-kanban-new-comment textarea { transition: height .2s ease-in } .smart-kanban-list.dialog:focus { outline: var(--smart-primary) solid 1px } .smart-kanban-list.dialog .item { display: flex; align-items: center; min-height: calc(var(--smart-kanban-user-icon-size) + 10px); padding: 5px 10px; cursor: pointer } .smart-kanban-list.dialog .item:hover { background-color: var(--smart-ui-state-hover); color: var(--smart-ui-state-color-hover) } .smart-kanban-list.dialog .item.selected { border-left: var(--smart-kanban-color-band-width) solid var(--smart-primary); padding-left: 7px; background-color: var(--smart-ui-state-selected); color: var(--smart-ui-state-color-selected) } .smart-kanban-list.dialog .item[disabled] { opacity: .55; pointer-events: none } .smart-kanban-list.dialog .icon { margin-right: 10px; border-radius: 50%; width: var(--smart-kanban-user-icon-size); min-width: var(--smart-kanban-user-icon-size); height: var(--smart-kanban-user-icon-size); background-size: cover; background-position: center } .smart-kanban-list.dialog .name { overflow: hidden; text-overflow: ellipsis } .smart-kanban-list.dialog.smart-visibility-hidden { transform: scaleY(0); opacity: 0 } .smart-kanban-list.dialog.actions.edit-comment .item[data-id="1"] { display: none } .smart-kanban-list.dialog.comments { width: var(--smart-kanban-comments-list-width); height: var(--smart-kanban-comments-list-height); max-height: 100% } .smart-kanban-list.dialog.comments .smart-kanban-comments { height: calc(100% - var(--smart-kanban-new-comment-height)); overflow: auto } .smart-kanban-list.dialog.comments .smart-kanban-new-comment { border-top: var(--smart-border-width) solid var(--smart-border); height: var(--smart-kanban-new-comment-height); padding: var(--smart-data-view-padding); overflow: hidden } .smart-kanban-list.dialog.comments .smart-kanban-new-comment textarea { resize: none; width: 100%; height: 100%; border: var(--smart-border-width) solid var(--smart-border); border-top-right-radius: var(--smart-border-top-right-radius); border-top-left-radius: var(--smart-border-top-left-radius); border-bottom-left-radius: var(--smart-border-bottom-left-radius); border-bottom-right-radius: var(--smart-border-bottom-right-radius); background-color: var(--smart-background); color: var(--smart-background-color); font-family: inherit; font-size: inherit } .smart-kanban-list.dialog.comments .smart-kanban-new-comment textarea:focus { outline: 0; border-color: var(--smart-outline) } .smart-kanban-list.dialog.comments .smart-kanban-new-comment textarea:hover { border-color: var(--smart-ui-state-border-hover) } .smart-kanban-list.dialog.comments .smart-kanban-new-comment textarea[disabled] { opacity: .5 } .smart-kanban-list.dialog.comments .smart-kanban-new-comment smart-button { --smart-button-padding: 0; display: none; margin-left: auto; height: var(--smart-kanban-send-button-height) } .smart-kanban-list.dialog.comments .smart-kanban-new-comment smart-button[disabled] { pointer-events: unset; cursor: not-allowed } .smart-kanban-list.dialog.comments.expanded .smart-kanban-comments { height: calc(100% - var(--smart-kanban-new-comment-height-expanded)) } .smart-kanban-list.dialog.comments.expanded .smart-kanban-new-comment { height: var(--smart-kanban-new-comment-height-expanded) } .smart-kanban-list.dialog.comments.expanded .smart-kanban-new-comment textarea { margin-bottom: var(--smart-data-view-padding); height: calc(100% - var(--smart-data-view-padding) - var(--smart-kanban-send-button-height)); display: block } .smart-kanban-list.dialog.comments.expanded .smart-kanban-new-comment smart-button { display: block } .smart-comment { display: grid; margin: var(--smart-data-view-padding) } .smart-comment .comment-header { display: grid; grid-template-columns: 1fr auto auto; grid-column-gap: calc(var(--smart-data-view-padding)/ 2); margin-bottom: var(--smart-data-view-padding) } .smart-comment .user-icon { width: 100%; height: var(--smart-kanban-user-icon-size); border-radius: 50%; background-size: cover; background-position: center } .smart-comment .user-icon.empty { background: var(--smart-surface); display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--smart-border) } .smart-comment .user-icon.empty:after { content: var(--smart-icon-user); font-family: var(--smart-font-family-icon); font-size: 20px } .smart-comment .user-name { font-weight: 700 } .smart-comment .time { opacity: .8 } .smart-comment .remove-button { visibility: hidden; transform: rotate(90deg); width: 16px; cursor: pointer } .smart-comment .remove-button:after { content: var(--smart-icon-ellipsis); display: flex; align-items: center; justify-content: center; height: 100%; font-family: var(--smart-font-family-icon); cursor: pointer } .smart-comment .remove-button.enabled { visibility: visible } .smart-kanban-task-text { display: flex; align-items: center } .smart-kanban-task-text .priority { font-family: var(--smart-font-family-icon); margin-left: 5px; display: inline-block; width: 16px; height: 16px } .smart-kanban-task-text .priority.low { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232666BE'%3E%3Cpath d='M2.73804 7.00207C1.96611 5.66874 2.92823 4 4.46889 4H19.5311C21.0718 4 22.0339 5.66874 21.262 7.00207L13.7309 20.0103C12.9605 21.3409 11.0395 21.3409 10.2691 20.0103L2.73804 7.00207Z'/%3E%3C/svg%3E") } .smart-kanban-task-text .priority.average { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23005C99'%3E%3Cpath d='M12 5.98999L19.53 19H4.47L12 5.98999ZM2.74 18C1.97 19.33 2.93 21 4.47 21H19.53C21.07 21 22.03 19.33 21.26 18L13.73 4.98999C12.96 3.65999 11.04 3.65999 10.27 4.98999L2.74 18Z'/%3E%3C/svg%3E") } .smart-kanban-task-text .priority.high { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23DD5347'%3E%3Cpath d='M2.73804 17.9979C1.96611 19.3313 2.92823 21 4.46889 21H19.5311C21.0718 21 22.0339 19.3313 21.262 17.9979L13.7309 4.98965C12.9605 3.65908 11.0395 3.65908 10.2691 4.98965L2.73804 17.9979Z'/%3E%3C/svg%3E") } .smart-kanban-task-text .priority.critical { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23AF0020'%3E%3Cpath d='M2.73804 17.9979C1.96611 19.3313 2.92823 21 4.46889 21H19.5311C21.0718 21 22.0339 19.3313 21.262 17.9979L13.7309 4.98965C12.9605 3.65908 11.0395 3.65908 10.2691 4.98965L2.73804 17.9979ZM13.5 17.5C13.5 18.3284 12.8284 19 12 19V19C11.1716 19 10.5 18.3284 10.5 17.5V17.5C10.5 16.6716 11.1716 16 12 16V16C12.8284 16 13.5 16.6716 13.5 17.5V17.5ZM13.5 13.5C13.5 14.3284 12.8284 15 12 15V15C11.1716 15 10.5 14.3284 10.5 13.5V9.5C10.5 8.67157 11.1716 8 12 8V8C12.8284 8 13.5 8.67157 13.5 9.5V13.5Z'/%3E%3C/svg%3E") } .smart-kanban[right-to-left] .smart-kanban-body, .smart-kanban[right-to-left] .smart-kanban-column-header-label, .smart-kanban[right-to-left] .swimlane { direction: rtl } .smart-kanban[right-to-left] .smart-kanban-column.collapsed>.smart-kanban-column-header>.smart-kanban-column-header-label { margin-bottom: auto } .smart-kanban[right-to-left] .smart-kanban-column:not(.collapsed) .smart-kanban-column-header .smart-arrow { transform: rotate(180deg) } .smart-kanban[right-to-left] .smart-kanban-list { direction: rtl } .smart-kanban[right-to-left] .smart-kanban-list .icon { margin-left: 10px; margin-right: unset } .smart-kanban[right-to-left] .smart-kanban-list .item.selected { border-left: unset; border-right: var(--smart-kanban-color-band-width) solid var(--smart-primary); padding-left: 10px; padding-right: 7px } .smart-kanban[right-to-left][add-new-button] .smart-kanban-column[add-new-button]>.smart-kanban-column-header>.smart-kanban-column-header-add::after { padding: 0 0 10px 10px } .smart-kanban-feedback[right-to-left] .smart-kanban-task { direction: rtl } [right-to-left] .smart-kanban-task { border-left: var(--smart-border-width) solid var(--smart-border); border-right: var(--smart-kanban-color-band-width) solid var(--smart-primary); border-top-left-radius: var(--smart-border-top-right-radius); border-bottom-left-radius: var(--smart-border-bottom-right-radius); border-top-right-radius: 0; border-bottom-right-radius: 0 } [right-to-left] .smart-kanban-task-progress { left: unset; right: 0 } smart-layout { display: block; --smart-layout-buttons-border-radius: 50%; --smart-layout-context-menu-default-width: var(--smart-menu-vertical-default-width); --smart-layout-context-menu-default-height: auto; overflow: initial; width: 600px; height: 600px } smart-layout>.smart-container { position: relative } smart-tab-layout-group[position=right] .smart-layout-tab, smart-tab-layout-group[position=left] .smart-layout-tab { padding: 24px 12px } .smart-layout-tab, smart-tab-layout-group[position=top] .smart-layout-tab, smart-tab-layout-group[position=bottom] .smart-layout-tab { padding: 12px 24px } smart-tab-layout-group[position=right] .smart-layout-tab:after, smart-tab-layout-group[position=left] .smart-layout-tab:after { position: absolute; bottom: 0; top: 0; width: 100%; height: 100%; content: ""; transition: all .2s ease; transform: perspective(5px) rotateY(2deg); transform-origin: left; left: 0; right: -1px; border-radius: 0 8px 8px 0 } smart-tab-layout-group[position=right] .smart-layout-tab label, smart-tab-layout-group[position=right] .smart-layout-tab.selected .smart-close-button { margin-right: 5px } smart-tab-layout-group[position=left] .smart-layout-tab:after { right: 0; border-radius: 0 8px 8px 0 } smart-tab-layout-group[position=left] .smart-layout-tab label, smart-tab-layout-group[position=left] .smart-layout-tab.selected .smart-close-button { transform: rotateY(0); margin-left: -5px } smart-tab-layout-group[position=bottom] .smart-layout-tab:after { transform-origin: top; transform: perspective(5px) rotateX(-2deg); top: 0; border-radius: 0 0 8px 8px } smart-tab-layout-group[position=bottom] .smart-layout-tab label, smart-tab-layout-group[position=bottom] .smart-layout-tab.selected .smart-close-button { margin-top: -5px } .smart-layout smart-layout-group { display: grid; overflow: hidden } .smart-layout smart-layout-group[data-id=root] { width: 100%; height: 100%; overflow: hidden; grid-template-columns: 1fr } .smart-layout smart-tab-layout-group { display: grid; overflow: hidden; grid-template-rows: 35px 1fr; border-right: 1px solid var(--smart-border); border-bottom: 1px solid var(--smart-border) } .smart-layout smart-tab-layout-group .smart-layout-tab-strip { background: var(--smart-surface); display: flex; overflow: hidden; border-bottom: 2px solid var(--smart-primary) } .smart-layout smart-tab-layout-group[position=bottom] { grid-template-rows: 1fr 35px } .smart-layout smart-tab-layout-group[position=bottom]>.smart-layout-tab-strip { border: none; border-top: 2px solid var(--smart-primary) } .smart-layout smart-tab-layout-group[position=right] .smart-layout-tab-strip .smart-layout-tab .smart-close-button:after, .smart-layout smart-tab-layout-group[position=left] .smart-layout-tab-strip .smart-layout-tab .smart-close-button:after { margin-left: initial; margin-top: 5px } .smart-layout smart-tab-layout-group[position=left] { grid-template-columns: 35px 1fr; grid-template-rows: initial } .smart-layout smart-tab-layout-group[position=left]>.smart-layout-tab-strip { writing-mode: vertical-rl; transform: rotate(180deg); justify-content: flex-end; align-items: center; border: none; border-left: 2px solid var(--smart-primary) } .smart-layout smart-tab-layout-group[position=right] { grid-template-columns: 1fr 35px; grid-template-rows: initial } .smart-layout smart-tab-layout-group[position=right]>.smart-layout-tab-strip { writing-mode: vertical-rl; align-items: center; border: none; border-left: 2px solid var(--smart-primary) } .smart-layout smart-tab-layout-group[orientation=vertical] { height: 100% } .smart-layout smart-tab-layout-group[orientation=horizontal] { width: 100% } .smart-layout smart-tab-layout-item { overflow: hidden } .smart-layout smart-tab-layout-item>smart-layout-group { width: 100%; height: 100% } .smart-layout .smart-layout-context-menu { opacity: 1; transform: scale(1); transform-origin: 0; -webkit-transform-origin: 0; position: absolute; background: var(--smart-background); color: var(--smart-background-color); box-shadow: var(--smart-elevation-8); border-radius: var(--smart-border-radius); width: var(--smart-layout-context-menu-default-width); height: var(--smart-layout-context-menu-default-height); z-index: var(--smart-editor-drop-down-z-index) } .smart-layout .smart-layout-context-menu.smart-visibility-hidden { opacity: .2; transform: scale(0) } .smart-layout .smart-layout-context-menu>div { width: 100%; padding: 10px; display: flex; align-items: center; justify-content: space-between; overflow: hidden } .smart-layout .smart-layout-context-menu>div:not([disabled]) { cursor: pointer } .smart-layout .smart-layout-context-menu>div[hover] { background-color: var(--smart-ui-state-hover); border-color: var(--smart-ui-state-border-hover); color: var(--smart-ui-state-color-hover) } .smart-layout .smart-layout-context-menu>div[disabled] { pointer-events: none; cursor: default; opacity: .5 } .smart-layout .smart-layout-buttons-container { position: absolute; width: 100px; height: 100px; left: calc(50% - 50px); top: calc(50% - 50px); z-index: 9999 } .smart-layout .smart-layout-buttons-container div { position: absolute; display: flex; align-items: center; justify-content: center; color: var(--smart-primary-color); background: var(--smart-primary); font-family: var(--smart-font-family-icon); font-size: var(--smart-font-size); padding: 5px; left: calc(50% - var(--smart-editor-addon-width)/ 2); width: var(--smart-editor-addon-width); height: var(--smart-editor-addon-width); cursor: pointer; border-top-left-radius: var(--smart-layout-buttons-border-radius); border-top-right-radius: var(--smart-layout-buttons-border-radius); border-bottom-left-radius: var(--smart-layout-buttons-border-radius); border-bottom-right-radius: var(--smart-layout-buttons-border-radius); z-index: 1; touch-action: none } .smart-layout .smart-layout-buttons-container div:after { content: var(--smart-icon-plus) } .smart-layout .smart-layout-buttons-container div:active { color: var(--smart-ui-state-color-active); border-color: var(--smart-ui-state-active); background-color: var(--smart-ui-state-active); opacity: var(--smart-button-opacity-active) } .smart-layout .smart-layout-buttons-container div:hover { color: var(--smart-ui-state-color-hover); border-color: var(--smart-ui-state-hover); background-color: var(--smart-ui-state-hover); opacity: var(--smart-button-opacity-active) } .smart-layout .smart-layout-buttons-container div[position=rotate]:after { content: var(--smart-icon-reload) } .smart-layout .smart-layout-buttons-container div[position=center] { top: calc(50% - var(--smart-editor-addon-width)/ 2) } .smart-layout .smart-layout-buttons-container div[position=left] { top: calc(50% - var(--smart-editor-addon-width)/ 2); left: 0 } .smart-layout .smart-layout-buttons-container div[position=right] { left: initial; top: calc(50% - var(--smart-editor-addon-width)/ 2); right: 0 } .smart-layout .smart-layout-buttons-container div[position=top] { top: 0 } .smart-layout .smart-layout-buttons-container div[position=bottom] { bottom: 0 } .smart-layout .smart-layout-drop-area { position: absolute; width: 100%; height: 100%; z-index: 99; pointer-events: none; left: 0; top: 0; opacity: 0; background: rgba(var(--smart-primary-rgb), .2); transition: opacity .2s ease-in-out } .smart-layout .smart-layout-item { height: auto; overflow: hidden; background: var(--smart-background); border-right: 1px solid var(--smart-border); border-bottom: 1px solid var(--smart-border) } .smart-layout .smart-layout-item[hover] { overflow: hidden } .smart-layout [data-id] { position: relative } .smart-layout:not([animation=none]) .smart-layout-context-menu { transition: opacity .2s ease-in, visibility .2s ease-in, transform .2s ease-in } .smart-layout:not([animation=none]) .smart-layout-buttons-container div:active, .smart-layout:not([animation=none]) .smart-layout-buttons-container div:hover { transition: background-color .1s linear, box-shadow 280ms ease-in-out } .smart-layout:not([animation=none]) .smart-layout-buttons-container div[position=left] { animation: leftRight .2s ease-in } .smart-layout:not([animation=none]) .smart-layout-buttons-container div[position=right] { animation: rightLeft .2s ease-in } .smart-layout:not([animation=none]) .smart-layout-buttons-container div[position=top] { animation: topBottom .2s ease-in } .smart-layout :not([animation=none]) .smart-layout-buttons-container div[position=bottom] { animation: bottomTop .2s ease-in } .smart-layout.outline .smart-layout-splitter { opacity: 1 } .smart-layout .smart-layout-splitter { z-index: 999; position: absolute; background: var(--smart-border); border: 1px solid var(--smart-border); top: 0; left: 0; opacity: 0; transition: opacity .2s ease-in-out } .smart-layout .smart-layout-splitter:hover { border-color: var(--smart-primary); border-style: dashed } .smart-layout .smart-layout-splitter:not([root-splitter]) { transition: opacity .2s ease-in-out, width .2s ease-in-out, height .2s ease-in-out } .smart-layout .smart-layout-splitter.active { background: var(--smart-primary); border-color: var(--smart-primary) } .smart-layout .smart-layout-splitter.error { background: var(--smart-error); border-color: var(--smart-error) } .smart-layout .smart-layout-splitter.horizontal { height: 1px; width: 100%; bottom: 0; top: initial; cursor: s-resize } .smart-layout .smart-layout-splitter.horizontal.last { top: 0; bottom: initial; display: none } .smart-layout .smart-layout-splitter.vertical { width: 1px; height: 100%; right: 0; left: initial; cursor: e-resize } .smart-layout .smart-layout-splitter.vertical.last { left: 0; right: initial; display: none } .smart-layout .smart-layout-group[hover]>.smart-layout-splitter.horizontal, .smart-layout .smart-layout-group[hover]>.smart-layout-splitter.vertical, .smart-layout .smart-layout-item[hover]>.smart-layout-splitter.horizontal, .smart-layout .smart-layout-item[hover]>.smart-layout-splitter.vertical, .smart-layout .smart-layout-splitter[drag].horizontal, .smart-layout .smart-layout-splitter[drag].vertical { opacity: 1; z-index: 99 } .smart-layout-tab { grid-row: 1; display: flex; align-items: center; justify-content: center; min-width: 0; position: relative; overflow: hidden; cursor: pointer; font-family: var(--smart-font-family); box-sizing: border-box; transition: background-color .2s ease-in-out } .smart-layout-tab:after { position: absolute; left: 0; bottom: 0; right: 0; width: 100%; height: 120%; border-top-left-radius: 8px; border-top-right-radius: 8px; content: ""; transition: all .2s ease; transform: perspective(5px) rotateX(2deg); transform-origin: bottom } .smart-layout-tab:hover { color: var(--smart-primary) } .smart-layout-tab.selected { color: var(--smart-primary-color) } .smart-layout-tab.selected:after { background: var(--smart-primary) } .smart-layout-tab.selected .smart-close-button { z-index: 10; color: inherit } .smart-layout-tab.selected .smart-close-button:after { content: var(--smart-icon-close); width: 16px; height: 16px; cursor: pointer; font-family: var(--smart-font-family-icon); margin-left: 5px; text-align: center; display: flex; align-items: center; justify-content: center; pointer-events: none } .smart-layout-tab label { cursor: pointer; text-overflow: ellipsis; overflow: hidden; z-index: 9; margin-top: 2px; color: inherit } .smart-layout-feedback { box-shadow: var(--smart-elevation-24); background: var(--smart-background); position: absolute; width: 300px; height: 150px; max-height: 150px; overflow: hidden; left: 0; top: 0; pointer-events: none; transform-origin: top left; transform: scale(1); transition: transform .25s ease-in-out } .smart-layout-feedback.dragging { transform: scale(.5) } .smart-layout-overlay { position: absolute; z-index: 999; left: 0; top: 0; width: 100%; height: 100%; opacity: .01; background: #000 } @keyframes topBottom { 0% { top: calc(-1 * var(--smart-editor-addon-width)) } 100% { top: 0 } } @keyframes bottomTop { 0% { bottom: calc(-1 * var(--smart-editor-addon-width)) } 100% { bottom: 0 } } @keyframes leftRight { 0% { left: calc(-1 * var(--smart-editor-addon-width)) } 100% { left: 0 } } @keyframes rightLeft { 0% { right: calc(-1 * var(--smart-editor-addon-width)) } 100% { right: 0 } } smart-scheduler { --smart-scheduler-event-size: var(--smart-scheduler-event-size-basic); display: block; width: var(--smart-scheduler-default-width); height: var(--smart-scheduler-default-height); contain: content } smart-scheduler.smart-container, smart-scheduler>.smart-container { overflow: hidden; display: grid; grid-template-rows: var(--smart-scheduler-header-height) minmax(0, 1fr); grid-template-columns: 100%; margin-bottom: -2px } smart-scheduler.smart-container[show-footer], smart-scheduler>.smart-container[show-footer] { grid-template-rows: var(--smart-scheduler-header-height) minmax(0, 1fr) var(--smart-scheduler-footer-height) } smart-scheduler.smart-container.hscroll .smart-scheduler-view, smart-scheduler>.smart-container.hscroll .smart-scheduler-view { height: calc(100% - var(--smart-scroll-bar-size)) } smart-scheduler.smart-container.vscroll .smart-scheduler-view, smart-scheduler>.smart-container.vscroll .smart-scheduler-view { width: calc(100% - var(--smart-scroll-bar-size)) } smart-scheduler .smart-scheduler-nav[current], smart-scheduler .smart-scheduler-nav[next], smart-scheduler .smart-scheduler-nav[prev], smart-scheduler .smart-scheduler-nav[today] { width: var(--smart-scheduler-header-navigation-button-size); min-width: var(--smart-scheduler-header-navigation-button-size); height: 100%; position: relative; font-size: initial; display: inline-block; font-weight: inherit; font-family: var(--smart-font-family-icon); border: var(--smart-border-width) solid var(--smart-border); text-transform: initial } smart-scheduler .smart-scheduler-nav[current]:after, smart-scheduler .smart-scheduler-nav[next]:after, smart-scheduler .smart-scheduler-nav[prev]:after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; font-family: var(--smart-font-family-icon); font-size: var(--smart-arrow-size); color: inherit; display: flex; align-items: center; justify-content: center; pointer-events: none } smart-scheduler .smart-scheduler-nav[current]:after { width: var(--smart-editor-addon-width); min-width: var(--smart-editor-addon-width); left: initial; right: 0; content: var(--smart-icon-arrow-down); background: 0 0; color: inherit } smart-scheduler .smart-scheduler-nav[today] { width: var(--smart-scheduler-header-today-button-size); --smart-button-padding: 0 10px 0 10px; border-top-left-radius: var(--smart-item-border-top-left-radius); border-bottom-left-radius: var(--smart-item-border-bottom-left-radius); border-top-right-radius: var(--smart-item-border-top-right-radius); border-bottom-right-radius: var(--smart-item-border-bottom-right-radius); margin-right: 10px } smart-scheduler .smart-scheduler-nav[today] button { text-overflow: ellipsis; overflow: hidden } smart-scheduler .smart-scheduler-nav[next][focus] button, smart-scheduler .smart-scheduler-nav[prev][focus] button { background-color: var(--smart-background-focus); outline: 0 } smart-scheduler .smart-scheduler-nav[next] .smart-button, smart-scheduler .smart-scheduler-nav[prev] .smart-button { font-family: var(--smart-font-family-icon); padding: 0; border-radius: 0; border: none; min-height: initial } smart-scheduler .smart-scheduler-header, smart-scheduler .smart-scheduler-view[show-group-header=vertical] .smart-scheduler-cell[group-separator]:not(:last-of-type) { border-bottom: var(--smart-border-width) solid var(--smart-border) } smart-scheduler .smart-scheduler-nav[prev]:after { content: var(--smart-icon-arrow-left) } smart-scheduler .smart-scheduler-nav[next]:after { content: var(--smart-icon-arrow-right) } smart-scheduler .smart-scheduler-header { width: 100%; height: var(--smart-scheduler-header-height); display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 100%; grid-template-areas: "date view"; align-items: center; justify-content: start; background: var(--smart-surface) } smart-scheduler .smart-scheduler-footer:empty, smart-scheduler .smart-scheduler-header:empty { display: none } smart-scheduler .smart-scheduler-header[responsive-mode] { grid-template-columns: repeat(2, auto) } smart-scheduler .smart-scheduler-footer { width: 100%; height: var(--smart-scheduler-footer-height); border-top: var(--smart-border-width) solid var(--smart-border); justify-content: center; align-items: center; background: var(--smart-surface) } smart-scheduler .smart-scheduler-view { text-align: center; overflow: hidden; height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "hHeader hHeader" "vHeader content"; grid-template-columns: auto minmax(0, 1fr); outline: 0; position: relative } smart-scheduler .smart-scheduler-view[show-group-header=vertical] .smart-scheduler-view-header-vertical { display: grid; grid-template-columns: repeat(2, auto) } smart-scheduler .smart-scheduler-view[show-group-header=vertical] .smart-scheduler-view-header-groups-container { flex-direction: row } smart-scheduler .smart-scheduler-view[show-group-header=vertical] .smart-scheduler-cell-container[group-separator]:not(:last-of-type), smart-scheduler .smart-scheduler-view[show-group-header=vertical] .smart-scheduler-cell:not(.scale)[group-separator]:not(:last-of-type), smart-scheduler .smart-scheduler-view[show-group-header=vertical] .smart-scheduler-cell[group-separator]:not(:last-of-type) { border-bottom-color: var(--smart-scheduler-timeline-group-separator-background); border-bottom-width: var(--smart-scheduler-timeline-group-separator-size) } smart-scheduler .smart-scheduler-view[show-group-header=horizontal] .smart-scheduler-view-header-groups-container { flex-direction: column } smart-scheduler .smart-scheduler-view[show-group-header=horizontal] .smart-scheduler-view-header-groups-container .smart-scheduler-cell-container:not(:last-of-type)>.smart-scheduler-cell { border-bottom: var(--smart-scheduler-view-line-size) solid var(--smart-scheduler-view-horizontal-line-color) } smart-scheduler .smart-scheduler-view[show-group-header=horizontal] .smart-scheduler-cell-container[group-separator]:not(:last-of-type), smart-scheduler .smart-scheduler-view[show-group-header=horizontal] .smart-scheduler-cell:not(.scale)[group-separator]:not(:last-of-type), smart-scheduler .smart-scheduler-view[show-group-header=horizontal] .smart-scheduler-cell[group-separator]:not(:last-of-type) { border-right-color: var(--smart-scheduler-timeline-group-separator-background); border-right-width: var(--smart-scheduler-timeline-group-separator-size); border-right-style: solid } smart-scheduler .smart-scheduler-view:focus .smart-scheduler-cell:not(.scale)[selected] { background: var(--smart-ui-state-selected); color: var(--smart-ui-state-color-selected) } smart-scheduler .smart-scheduler-view:focus .smart-scheduler-cell:not(.scale)[selected=start] { background: var(--smart-ui-state-active); color: var(--smart-ui-state-color-active) } smart-scheduler .smart-scheduler-view[event-hovered=left], smart-scheduler .smart-scheduler-view[event-hovered=left] .smart-scheduler-event-content, smart-scheduler .smart-scheduler-view[event-hovered=right], smart-scheduler .smart-scheduler-view[event-hovered=right] .smart-scheduler-event-content { cursor: e-resize } smart-scheduler .smart-scheduler-view[event-hovered=top], smart-scheduler .smart-scheduler-view[event-hovered=top] .smart-scheduler-event-content, smart-scheduler .smart-scheduler-view[event-hovered=bottom], smart-scheduler .smart-scheduler-view[event-hovered=bottom] .smart-scheduler-event-content { cursor: n-resize } smart-scheduler .smart-scheduler-view[mobile] .smart-scheduler-content:not(.hide-overlay):after { position: fixed; content: ''; width: 100%; height: 100%; display: block } smart-scheduler .smart-scheduler-view[mobile] .smart-scheduler-event[collector] { display: flex; justify-content: center; align-items: center; border-radius: 50%; overflow: hidden } smart-scheduler .smart-scheduler-view[mobile] .smart-scheduler-event[collector] .smart-scheduler-event-content { width: var(--smart-scheduler-event-collector-mobile-size); height: var(--smart-scheduler-event-collector-mobile-size) } smart-scheduler .smart-scheduler-view-nav { grid-area: view; display: flex; align-items: center; justify-content: flex-end; height: 100%; overflow: hidden } smart-scheduler .smart-scheduler-view-nav .smart-scheduler-nav[next], smart-scheduler .smart-scheduler-view-nav .smart-scheduler-nav[prev] { border: initial; border-radius: initial; --smart-background: transparent; --smart-disabled: transparent } smart-scheduler .smart-scheduler-view-nav[show-menu] { padding: var(--smart-scheduler-header-padding) } smart-scheduler .smart-scheduler-view-nav.no-overflowing .smart-scheduler-items-container { overflow: hidden } smart-scheduler .smart-scheduler-view-header { box-shadow: var(--smart-scheduler-header-box-shadow); position: relative } smart-scheduler .smart-scheduler-view-header-vertical { height: 100%; grid-area: vHeader; display: grid; grid-template-columns: repeat(2, auto) } smart-scheduler .smart-scheduler-view-header-vertical .smart-scheduler-view-details { width: var(--smart-scheduler-timeline-header-vertical-details-size) } smart-scheduler .smart-scheduler-view-header-vertical .smart-scheduler-groups-container { width: var(--smart-scheduler-timeline-header-vertical-group-size) } smart-scheduler .smart-scheduler-view-header-vertical .smart-scheduler-cells { width: var(--smart-scheduler-timeline-header-vertical-cells-size); border: none; background: var(--smart-background); position: relative } smart-scheduler .smart-scheduler-view-header-vertical .smart-scheduler-cell { width: 100%; min-width: initial; align-items: flex-start } smart-scheduler .smart-scheduler-view-header-vertical .smart-scheduler-cell>div { overflow: hidden; text-overflow: ellipsis; background: inherit; padding: var(--smart-scheduler-timeline-header-vertical-label-padding) } smart-scheduler .smart-scheduler-view-header-vertical-content { width: 100%; height: 100%; position: relative; overflow: hidden; display: flex } smart-scheduler .smart-scheduler-view-header-horizontal { width: 100%; display: grid; grid-area: hHeader } smart-scheduler .smart-scheduler-view-header-horizontal .smart-scheduler-view-details { height: var(--smart-scheduler-timeline-header-horizontal-details-size) } smart-scheduler .smart-scheduler-view-header-horizontal .smart-scheduler-groups-container { height: var(--smart-scheduler-timeline-header-horizontal-group-size) } smart-scheduler .smart-scheduler-view-header-horizontal .smart-scheduler-view-time-container { display: grid; width: 100%; overflow: hidden; border-bottom: var(--smart-scheduler-view-line-size) solid var(--smart-scheduler-view-horizontal-line-color); grid-template-columns: auto minmax(0, 1fr) } smart-scheduler .smart-scheduler-view-header-horizontal .smart-scheduler-cells { height: var(--smart-scheduler-timeline-header-horizontal-cells-size); position: relative; display: flex; width: 100%; min-height: inherit } smart-scheduler .smart-scheduler-view-header-horizontal .smart-scheduler-cells .smart-scheduler-cell { width: 100%; min-height: inherit; display: flex; height: 100%; border-left: var(--smart-scheduler-view-line-size) solid var(--smart-scheduler-view-vertical-line-color); border-right: var(--smart-scheduler-view-line-size) solid var(--smart-scheduler-view-vertical-line-color) } smart-scheduler .smart-scheduler-view-header-horizontal .smart-scheduler-cells .smart-scheduler-cell>div { overflow: hidden; text-overflow: ellipsis; padding: var(--smart-scheduler-timeline-header-horizontal-label-padding) } smart-scheduler .smart-scheduler-view-header-horizontal .smart-scheduler-cells .smart-scheduler-cell:first-of-type { border-left: none } smart-scheduler .smart-scheduler-view-header-horizontal .smart-scheduler-view-groups-content { border-bottom: var(--smart-border-width) solid var(--smart-border) } smart-scheduler .smart-scheduler-view-header-horizontal-content { width: 100%; height: 100%; position: relative; overflow: hidden; display: flex; flex-direction: column } smart-scheduler .smart-scheduler-view-header-groups-container { width: 100%; display: flex; position: relative } smart-scheduler .smart-scheduler-view-header-groups-container .smart-scheduler-cell-container { position: relative; width: 100%; height: 100%; min-height: initial; min-width: initial } smart-scheduler .smart-scheduler-view-header-groups-container .smart-scheduler-cell { height: 100%; border-right: var(--smart-scheduler-view-line-size) solid var(--smart-scheduler-view-vertical-line-color) } smart-scheduler .smart-scheduler-view-time { display: flex; position: relative } smart-scheduler .smart-scheduler-view-all-day { grid-template-columns: auto minmax(0, 1fr); border-bottom: var(--smart-scheduler-day-week-view-hour-size) solid var(--smart-scheduler-day-week-view-hour-color); height: var(--smart-scheduler-timeline-header-all-day-cells-size); display: grid } smart-scheduler .smart-scheduler-view-all-day .smart-scheduler-cell[all-day] { height: 100%; border-left: initial } smart-scheduler .smart-scheduler-view-all-day .smart-scheduler-event { padding: var(--smart-scheduler-event-padding-all-day); height: var(--smart-scheduler-event-size) } smart-scheduler .smart-scheduler-view-all-day .smart-scheduler-event:after { top: calc(50% - var(--smart-scheduler-event-resize-indicator-size)/ 4); left: calc(100% - var(--smart-scheduler-event-resize-indicator-size)) } smart-scheduler .smart-scheduler-view-all-day .smart-scheduler-event:before { top: calc(50% - var(--smart-scheduler-event-resize-indicator-size)/ 4); left: 0 } smart-scheduler .smart-scheduler-view-all-day .smart-scheduler-event .smart-scheduler-event-button { display: none } smart-scheduler .smart-scheduler-view-all-day .smart-scheduler-event[repeating] .smart-scheduler-event-content[single-line] { grid-template-columns: repeat(2, auto) var(--smart-scheduler-event-icon-size) } smart-scheduler .smart-scheduler-view-all-day .smart-scheduler-event-content { grid-template-columns: minmax(auto, 1fr) } smart-scheduler .smart-scheduler-view-all-day .smart-scheduler-event-content[single-line] { grid-template-columns: repeat(2, auto); grid-template-rows: 100%; grid-column-gap: 5px; justify-content: space-between } smart-scheduler .smart-scheduler-view-all-day[exception] .smart-scheduler-event-content, smart-scheduler .smart-scheduler-view-all-day[repeating] .smart-scheduler-event-content { grid-template-columns: minmax(auto, 1fr) var(--smart-scheduler-event-icon-size) } smart-scheduler .smart-scheduler-view-all-day-content { width: 100%; height: 100%; position: relative; overflow: hidden; display: flex; flex-direction: column } smart-scheduler .smart-scheduler-view-all-day-label { display: flex; justify-content: center; align-items: center; text-overflow: ellipsis; white-space: nowrap; width: 100%; height: 100%; min-width: var(--smart-scheduler-timeline-header-vertical-cells-size); font-weight: var(--smart-scheduler-timeline-all-day-label-font-weight); padding: var(--smart-scheduler-timeline-header-cell-padding) } smart-scheduler .smart-scheduler-view-all-day-label>div { overflow: hidden; text-overflow: ellipsis } smart-scheduler .smart-scheduler-view-all-day-label-container { display: flex; flex-direction: column; overflow: hidden } smart-scheduler .smart-scheduler-view-details { display: flex; position: relative } smart-scheduler .smart-scheduler-view-details .smart-scheduler-cell { border-bottom: var(--smart-border-width) solid var(--smart-border); height: 100%; min-height: inherit; min-width: inherit } smart-scheduler .smart-scheduler-view-details .smart-scheduler-cell:not(:first-of-type) { border-left: none } smart-scheduler .smart-scheduler-view-container { position: relative } smart-scheduler .smart-scheduler-view-groups-label-container, smart-scheduler .smart-scheduler-view-label-container { display: flex; height: 100% } smart-scheduler .smart-scheduler-view-groups-content { width: 100%; height: 100%; position: relative; overflow: hidden; display: flex } smart-scheduler .smart-scheduler-view-items-button { --smart-button-text-transform: initial; transform: scale(1); height: 100%; width: var(--smart-scheduler-header-menu-button-size); border-top-left-radius: var(--smart-item-border-top-left-radius); border-bottom-left-radius: var(--smart-item-border-bottom-left-radius); border-top-right-radius: var(--smart-item-border-top-right-radius); border-bottom-right-radius: var(--smart-item-border-bottom-right-radius); overflow: hidden } smart-scheduler .smart-scheduler-view-items-button:after { position: absolute; top: 0; height: 100%; font-family: var(--smart-font-family-icon); font-size: var(--smart-arrow-size); color: inherit; display: flex; align-items: center; justify-content: center; pointer-events: none; width: var(--smart-editor-addon-width); min-width: var(--smart-editor-addon-width); left: initial; right: 0; content: var(--smart-icon-arrow-down); background: 0 0 } smart-scheduler .smart-scheduler-view-items-button button { display: flex; align-items: center; justify-content: center; border-radius: initial } smart-scheduler .smart-scheduler-view-items-button button>span { text-overflow: ellipsis; overflow: hidden } smart-scheduler .smart-scheduler-view-items-button:not([active]) button:active { color: inherit; border-color: inherit; background-color: inherit } smart-scheduler .smart-scheduler-view-items-button.smart-visibility-hidden { transform: scale(0) } smart-scheduler[hide-other-month-days] .smart-scheduler-cell[other-month]>div { visibility: hidden } smart-scheduler .smart-scheduler-cells .smart-scheduler-cell:empty { display: none } smart-scheduler .smart-scheduler-cells .smart-scheduler-cell:not(:first-of-type) { border-left: none } smart-scheduler .smart-scheduler-cells div { border-bottom-color: var(--smart-border); white-space: nowrap; pointer-events: none } smart-scheduler .smart-scheduler-cells-container .smart-scheduler-cell.scale { position: relative; width: 100%; height: 100%; min-height: initial; min-width: initial } smart-scheduler .smart-scheduler-cells-container .smart-scheduler-cell:not(.scale)[restricted] { background: var(--smart-scheduler-restricted-background) } smart-scheduler .smart-scheduler-cells-container .smart-scheduler-cell[nonworking], smart-scheduler .smart-scheduler-cells-container .smart-scheduler-cell[nonworking] .smart-scheduler-cell { background: var(--smart-scheduler-timeline-nonworking-color) } smart-scheduler .smart-scheduler-cells-container .smart-scheduler-cell[weekend] { background: var(--smart-scheduler-timeline-weekend-color) } smart-scheduler .smart-scheduler-cells-container .smart-scheduler-cell-container { width: 100%; height: 100%; overflow: hidden; padding: initial; display: flex; flex-direction: column } smart-scheduler .smart-scheduler-cells-container .smart-scheduler-cell:not(.scale) { width: 100%; height: 100%; min-height: initial; min-width: initial } smart-scheduler .smart-scheduler-cell, smart-scheduler .smart-scheduler-cell-container { min-height: var(--smart-scheduler-timeline-cell-min-height); min-width: var(--smart-scheduler-timeline-cell-min-size); white-space: nowrap; position: absolute; text-overflow: ellipsis } smart-scheduler .smart-scheduler-cell { display: flex; justify-content: center; align-items: center; background: var(--smart-background); color: var(--smart-surface-color); padding: var(--smart-scheduler-timeline-header-cell-padding); border-bottom-color: transparent; height: var(--smart-scheduler-timeline-cell-height); width: var(--smart-scheduler-timeline-cell-width) } smart-scheduler .smart-scheduler-cell.smart-scheduler-feedback:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; box-sizing: border-box; border: 2px dashed var(--smart-primary); pointer-events: none; background: var(--smart-scheduler-cell-feedback-background) } smart-scheduler .smart-scheduler-cell[other-month] { background: var(--smart-background); color: var(--smart-background-color); border-color: var(--smart-border) } smart-scheduler .smart-scheduler-cell[other-month]>div { opacity: .5 } smart-scheduler .smart-scheduler-cell.smart-scheduler-view-header-cell-feedback { width: initial; height: initial; visibility: hidden } smart-scheduler .smart-scheduler-cell-container { display: flex; justify-content: center; align-items: center; background: var(--smart-background); color: var(--smart-surface-color); padding: var(--smart-scheduler-timeline-header-cell-padding); border-bottom-color: transparent; height: var(--smart-scheduler-timeline-cell-height); width: var(--smart-scheduler-timeline-cell-width) } smart-scheduler .smart-scheduler-event .smart-scheduler-event-button, smart-scheduler .smart-scheduler-events-container .smart-scheduler-event .smart-scheduler-event-button { display: none } smart-scheduler .smart-scheduler-event { position: absolute; padding: var(--smart-scheduler-event-padding-basic); outline: 0; -webkit-tap-highlight-color: transparent; border-radius: var(--smart-scheduler-event-border-radius); -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; user-select: none } smart-scheduler .smart-scheduler-event:after { left: calc(50% - var(--smart-scheduler-event-resize-indicator-size)/ 4); top: calc(100% - var(--smart-scheduler-event-resize-indicator-size)) } smart-scheduler .smart-scheduler-event:before { left: calc(50% - var(--smart-scheduler-event-resize-indicator-size)/ 4); top: 0 } smart-scheduler .smart-scheduler-event[focus]:not([collector]):after, smart-scheduler .smart-scheduler-event[focus]:not([collector]):before, smart-scheduler .smart-scheduler-event[hover]:not([collector]):after, smart-scheduler .smart-scheduler-event[hover]:not([collector]):before { transform: scale(1) } smart-scheduler .smart-scheduler-event:not([resized])[focus] .smart-scheduler-event-content { background: var(--smart-scheduler-event-focus); color: var(--smart-scheduler-event-color-focus) } smart-scheduler .smart-scheduler-event:not([resized])[hover] .smart-scheduler-event-content { background: var(--smart-scheduler-event-hover); color: var(--smart-scheduler-event-color-hover) } smart-scheduler .smart-scheduler-event:not([collector]):after, smart-scheduler .smart-scheduler-event:not([collector]):before { content: ''; width: var(--smart-scheduler-event-resize-indicator-size); height: var(--smart-scheduler-event-resize-indicator-size); position: absolute; background-color: var(--smart-scheduler-event-resize-indicator-color); box-shadow: 0 0 0 1px var(--smart-scheduler-event-resize-indicator-border-color); transform: scale(0); pointer-events: none; z-index: 1 } smart-scheduler .smart-scheduler-event .smart-scheduler-event-label { font-weight: var(--smart-scheduler-event-label-font-weight); font-size: var(--smart-scheduler-event-label-font-size); pointer-events: none; white-space: nowrap } smart-scheduler .smart-scheduler-event .smart-scheduler-event-time { font-weight: var(--smart-scheduler-event-time-font-weight); font-size: var(--smart-scheduler-event-time-font-size); opacity: var(--smart-scheduler-event-time-opacity); pointer-events: none; white-space: pre-wrap } smart-scheduler .smart-scheduler-event .smart-scheduler-event-content>div { max-width: 100%; max-height: 100%; overflow: hidden; text-overflow: ellipsis; align-self: flex-start } smart-scheduler .smart-scheduler-event .smart-scheduler-event-content>div:first-of-type { align-self: center } smart-scheduler .smart-scheduler-event .smart-scheduler-event-content:not([single-line])>div:not(:first-of-type) { grid-column: 1/span 2 } smart-scheduler .smart-scheduler-event .smart-scheduler-event-content[single-line]>div { align-self: initial } smart-scheduler .smart-scheduler-event[resized] { opacity: .75; z-index: 10000 } smart-scheduler .smart-scheduler-event[cut] .smart-scheduler-event-content { opacity: .75 } smart-scheduler .smart-scheduler-event[collector] { width: var(--smart-scheduler-event-collector-size); height: var(--smart-scheduler-event-collector-size); border-radius: var(--smart-scheduler-event-collector-border-radius) } smart-scheduler .smart-scheduler-event[collector] .smart-scheduler-event-content { padding: 1px 5px; justify-items: center; background: var(--smart-scheduler-event-collector-background); color: var(--smart-scheduler-event-collector-color); grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); grid-column-gap: 5px } smart-scheduler .smart-scheduler-event[collector] .smart-scheduler-event-content>div { align-self: initial; white-space: nowrap } smart-scheduler .smart-scheduler-event[collector][focus] .smart-scheduler-event-content { background: var(--smart-scheduler-event-collector-focus); color: var(--smart-scheduler-event-collector-color-focus) } smart-scheduler .smart-scheduler-event[collector][hover] .smart-scheduler-event-content { background: var(--smart-scheduler-event-collector-hover); color: var(--smart-scheduler-event-collector-color-hover) } smart-scheduler .smart-scheduler-event[repeating] .smart-scheduler-event-content:after { content: var(--smart-icon-spin); width: var(--smart-scheduler-event-icon-size); position: absolute; display: flex; justify-content: center; align-items: center; top: 0; right: 0; font-family: var(--smart-font-family-icon); font-size: var(--smart-font-size); padding: var(--smart-scheduler-event-content-padding); box-sizing: border-box; line-height: 1rem } smart-scheduler .smart-scheduler-event[repeating] .smart-scheduler-event-content[single-line] { grid-template-columns: repeat(2, auto) var(--smart-scheduler-event-icon-size) } smart-scheduler .smart-scheduler-event[repeating][exception] .smart-scheduler-event-content:after { content: var(--smart-icon-attention-circled) } smart-scheduler .smart-scheduler-event[status] .smart-scheduler-event-content::before { content: ''; position: absolute; display: block; width: var(--smart-scheduler-status-size); height: 100%; background: var(--smart-scheduler-status-background); box-shadow: 0 0 0 .5px var(--smart-background); border: 1px solid var(--smart-border); border-radius: 20px; overflow: hidden; box-sizing: border-box } smart-scheduler .smart-scheduler-event[status=free] .smart-scheduler-event-content::before { background: var(--smart-scheduler-status-free-background) } smart-scheduler .smart-scheduler-event[status=busy] .smart-scheduler-event-content::before { background: var(--smart-scheduler-status-busy-background) } smart-scheduler .smart-scheduler-event[status=outOfOffice] .smart-scheduler-event-content::before { background: var(--smart-scheduler-status-out-of-office-background) } smart-scheduler .smart-scheduler-event[status=tentative] .smart-scheduler-event-content::before { background: var(--smart-scheduler-status-tentative-background) } smart-scheduler .smart-scheduler-event[exception] .smart-scheduler-event-button, smart-scheduler .smart-scheduler-event[repeating] .smart-scheduler-event-button { display: none } smart-scheduler .smart-scheduler-event[exception] .smart-scheduler-event-content, smart-scheduler .smart-scheduler-event[repeating] .smart-scheduler-event-content { grid-template-columns: minmax(auto, 1fr) var(--smart-scheduler-event-icon-size) } smart-scheduler .smart-scheduler-event:not([repeating]) .smart-scheduler-event-content:not([single-line])>div { grid-column: 1/span 2 } smart-scheduler .smart-scheduler-event-content { width: 100%; height: 100%; max-height: 100%; display: grid; grid-template-rows: min-content minmax(auto, 1fr); justify-content: flex-start; justify-items: flex-start; align-items: center; overflow: hidden; padding: var(--smart-scheduler-event-content-padding); color: var(--smart-scheduler-event-color); background: var(--smart-scheduler-event-background); cursor: pointer; position: relative; border-radius: inherit; grid-row-gap: 2px; grid-template-columns: minmax(auto, 1fr) } smart-scheduler .smart-scheduler-event-content[single-line] { grid-template-columns: repeat(2, auto); grid-template-rows: 100%; grid-column-gap: 5px; justify-content: space-between } smart-scheduler .smart-scheduler-date-nav { grid-area: date; display: flex; align-items: center; height: 100%; padding: var(--smart-scheduler-header-padding); background: var(--smart-surface); background-clip: content-box; overflow: hidden } smart-scheduler .smart-scheduler-date-nav .smart-scheduler-nav[current] { --smart-button-padding: 0 10px 0 10px; width: auto; max-width: var(--smart-scheduler-header-date-button-max-size); border-top-right-radius: var(--smart-item-border-top-right-radius); border-bottom-right-radius: var(--smart-item-border-bottom-right-radius); border-top-left-radius: var(--smart-item-border-top-left-radius); border-bottom-left-radius: var(--smart-item-border-bottom-left-radius) } smart-scheduler .smart-scheduler-date-nav .smart-scheduler-nav[current] .smart-button { overflow: hidden; text-overflow: ellipsis; white-space: nowrap } smart-scheduler .smart-scheduler-time-zone { width: var(--smart-scheduler-timeline-header-vertical-cells-size); overflow: hidden; display: flex; align-items: center; justify-content: center; padding: var(--smart-scheduler-timeline-header-cell-padding) } smart-scheduler .smart-scheduler-time-zone>div { overflow: hidden; text-overflow: ellipsis } smart-scheduler .smart-scheduler-time-zone-container { display: flex; height: 100%; align-items: center } smart-scheduler .smart-scheduler-time-zone-container:empty { display: none } smart-scheduler .smart-scheduler-current-time-indicator { position: absolute; pointer-events: none; width: var(--smart-scheduler-current-time-indicator-size); height: var(--smart-scheduler-current-time-indicator-size); background: var(--smart-scheduler-current-time-indicator-background) } smart-scheduler .smart-scheduler-items-container { display: flex; align-items: center; height: 100%; position: relative; outline: 0 } smart-scheduler .smart-scheduler-items-container .smart-scheduler-item[selected] { background: var(--smart-background); border-left: var(--smart-border-width) solid var(--smart-border); border-right: var(--smart-border-width) solid var(--smart-border); border-top: var(--smart-border-width) solid var(--smart-border) } smart-scheduler .smart-scheduler-items-container:focus .smart-scheduler-item[selected] { background-color: var(--smart-ui-state-focus); border-color: var(--smart-ui-state-border-focus); color: var(--smart-ui-state-color-focus) } smart-scheduler .smart-scheduler-items-container .smart-scheduler-item { position: relative; display: flex; align-items: center; justify-content: center; cursor: pointer; height: 100%; width: var(--smart-scheduler-item-size); padding: var(--smart-scheduler-header-padding); border: var(--smart-border-width) solid transparent } smart-scheduler .smart-scheduler-items-container .smart-scheduler-item:last-of-type { border-right: none } smart-scheduler .smart-scheduler-item>div { position: relative; align-items: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap } smart-scheduler .smart-scheduler-groups-container { display: flex; width: 100%; height: 100%; overflow: hidden } smart-scheduler .smart-scheduler-groups-container .smart-scheduler-cell { font-weight: var(--smart-scheduler-timeline-all-day-label-font-weight); white-space: var(--smart-scheduler-timeline-group-white-space); min-height: inherit; min-width: inherit } smart-scheduler .smart-scheduler-groups-container .smart-scheduler-cell>div { overflow: hidden; text-overflow: ellipsis } smart-scheduler .smart-scheduler-groups-container .smart-scheduler-cell:not(:first-of-type) { border-left: none } smart-scheduler .smart-scheduler-scrollable-container { width: 100%; position: relative; overflow: hidden; display: grid; grid-area: content; height: 100%; background: var(--smart-scheduler-view-background) } smart-scheduler .smart-scheduler-content .smart-scheduler-cell[nonworking], smart-scheduler[view-type=month] .smart-scheduler-content .smart-scheduler-cell[nonworking][other-month]:not([selected]) { background: var(--smart-scheduler-timeline-nonworking-color) } smart-scheduler .smart-scheduler-content { position: relative; overflow: hidden; width: 100%; height: 100% } smart-scheduler .smart-scheduler-content .smart-scheduler-cell[weekend] { background: var(--smart-scheduler-timeline-weekend-color) } smart-scheduler .smart-scheduler-view-scroll-bar { overflow: visible; position: relative; height: var(--smart-scroll-bar-size); width: 100% } smart-scheduler .smart-scheduler-view-scroll-bar:after { position: absolute; content: ''; width: 100%; height: var(--smart-scroll-bar-size); background: var(--smart-scroll-bar-background); left: 100%; top: 0 } smart-scheduler .smart-scheduler-view-scroll-bar.bottom-corner { width: calc(100% - var(--smart-scroll-bar-size)) } smart-scheduler .smart-scheduler-view-scroll-bar[orientation=vertical] { position: absolute; right: 0; top: 0; height: 100%; width: var(--smart-scroll-bar-size) } smart-scheduler .smart-scheduler-view-scroll-bar[orientation=vertical].bottom-corner { height: calc(100% - var(--smart-scroll-bar-size)) } smart-scheduler .smart-scheduler-tooltip { pointer-events: none; transform: scale(0) } smart-scheduler .smart-toast-container-custom.smart-toast-container { width: var(--smart-scheduler-toast-default-width); top: 0; right: 0; max-width: 100%; max-height: 100%; height: auto } smart-scheduler .smart-toast-container-custom.smart-toast-container .smart-toast-item { border-radius: 5px; height: var(--smart-scheduler-toast-default-height) } smart-scheduler .smart-toast-container-custom.smart-toast-container .smart-toast-item>.smart-container { display: flex; flex-direction: row-reverse } smart-scheduler .smart-toast-container-custom.smart-toast-container .smart-toast-item .smart-toast-item-container { padding: initial; top: initial; width: 100% } smart-scheduler .smart-scheduler-legend { width: 100%; height: 100%; display: flex; grid-row-gap: 10px; grid-column-gap: 10px; grid-area: legend } smart-scheduler .smart-scheduler-legend .smart-scheduler-legend-item { display: flex; flex-direction: column; justify-content: center; max-width: 100%; padding: var(--smart-scheduler-header-padding); overflow: hidden; grid-row-gap: 2px } smart-scheduler .smart-scheduler-legend .smart-scheduler-legend-res-items { display: flex } smart-scheduler .smart-scheduler-legend .smart-scheduler-legend-res-item { position: relative; display: flex; align-items: center; grid-column-gap: 5px; white-space: nowrap; outline: initial; overflow: hidden } smart-scheduler .smart-scheduler-legend .smart-scheduler-legend-res-item:hover { color: var(--smart-ui-state-color-hover) } smart-scheduler .smart-scheduler-legend .smart-scheduler-legend-res-item:before { content: ''; width: var(--smart-check-box-default-size); min-width: var(--smart-check-box-default-size); height: var(--smart-check-box-default-size); min-height: var(--smart-check-box-default-size); display: flex; border: var(--smart-border-width) solid var(--smart-border); box-sizing: border-box; background-color: var(--smart-scheduler-legend-item-background); border-radius: var(--smart-border-radius) } smart-scheduler:not([view-type=day]) .smart-scheduler-view[show-group-header=vertical] .smart-scheduler-view-header-groups-container .smart-scheduler-cell-container:not(:last-of-type)>.smart-scheduler-cell, smart-scheduler:not([view-type^=timeline]) .smart-scheduler-cells-container .smart-scheduler-cell:not(.scale):not(:last-of-type) { border-right: var(--smart-scheduler-view-line-size) solid var(--smart-scheduler-view-vertical-line-color) } smart-scheduler .smart-scheduler-legend .smart-scheduler-legend-res-item:not(:first-of-type) { margin-left: 20px } smart-scheduler .smart-scheduler-legend .smart-scheduler-legend-res-item>span { overflow: hidden; text-overflow: ellipsis; pointer-events: none } @media only screen and (min-device-width:320px) and (max-device-width:900px) { smart-scheduler .smart-scheduler-legend .smart-scheduler-legend-res-item>span { width: 0 } } smart-scheduler .smart-scheduler-window-modal { position: absolute; opacity: .5; background-color: var(--smart-disabled); top: 0; left: 0; width: 100%; min-height: 100%; z-index: calc(var(--smart-editor-drop-down-z-index) - 1) } smart-scheduler .smart-scheduler-shade-section { position: absolute; pointer-events: none; background: var(--smart-scheduler-shader-background) } smart-scheduler .smart-scheduler-cells-container .smart-scheduler-cell:not(.scale)>div, smart-scheduler .smart-scheduler-item>div, smart-scheduler .smart-scheduler-view-all-day-label, smart-scheduler .smart-scheduler-view-header-horizontal .smart-scheduler-cell, smart-scheduler .smart-scheduler-view-header-vertical .smart-scheduler-cell { -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; user-select: none } smart-scheduler:not([animation=none]) .smart-scheduler-legend .smart-scheduler-legend-res-item:before { transition: background linear .2s, border linear .2s } smart-scheduler:not([animation=none]) .smart-scheduler-event:after, smart-scheduler:not([animation=none]) .smart-scheduler-event:before { transition: transform .2s cubic-bezier(.4, 0, .6, 1) } .smart-color-input-drop-down-menu.smart-scheduler-color-input:not([animation=none]) .default-samples-container div, smart-scheduler:not([animation=none]) .smart-scheduler-view-items-button { transition: transform .2s ease-in-out } smart-scheduler:not([animation=none]) .smart-scheduler-items-container .smart-scheduler-item { transition: border-top .2s ease-in-out } smart-scheduler:not([event-render-mode=classic]) .smart-scheduler-event { padding-right: initial } smart-scheduler:not([disable-date-menu]):not([right-to-left]) .smart-scheduler-nav[current] button, smart-scheduler:not([disable-view-menu]):not([right-to-left]) .smart-scheduler-view-items-button button { padding-right: var(--smart-editor-addon-width) } smart-scheduler:not([view-type^=timeline]) .smart-scheduler-cells-container .smart-scheduler-cell.scale:not(:last-of-type) { border-bottom: var(--smart-border-width) solid rgba(var(--smart-border-rgb), .5) } smart-scheduler:not([view-type^=timeline]) .smart-scheduler-cells-container .smart-scheduler-cell-container:not(:last-of-type) { border-bottom: var(--smart-scheduler-view-line-size) solid var(--smart-scheduler-view-horizontal-line-color) } smart-scheduler:not([view-type^=timeline]) .smart-scheduler-view-header-horizontal .smart-scheduler-time-zone { width: var(--smart-scheduler-timeline-header-vertical-cells-size); height: 100% } smart-scheduler:not([view-type^=timeline]) .smart-scheduler-current-time-indicator:before { left: 0; top: calc(-1 * var(--smart-scheduler-current-time-indicator-arrow-size) + var(--smart-scheduler-current-time-indicator-size)/ 2); border-top: var(--smart-scheduler-current-time-indicator-arrow-size) solid transparent; border-bottom: var(--smart-scheduler-current-time-indicator-arrow-size) solid transparent; border-left: var(--smart-scheduler-current-time-indicator-arrow-size) solid var(--smart-scheduler-current-time-indicator-background) } smart-scheduler:not([view-type=timelineDay]) .smart-scheduler-view-header-horizontal .smart-scheduler-cells:not(:last-of-type) .smart-scheduler-cell, smart-scheduler[view-type^=timeline] .smart-scheduler-cells-container .smart-scheduler-cell:not(.scale):not(:last-of-type) { border-bottom: var(--smart-border-width) solid var(--smart-border) } smart-scheduler:not([view-type^=timeline]) .smart-scheduler-event { width: var(--smart-scheduler-event-size) } smart-scheduler:not([view-type=timelineWeek]) .smart-scheduler-view-details, smart-scheduler:not([view-type=timelineWeek]) .smart-scheduler-view-details-label:empty { display: none } smart-scheduler:not([view-type=day]) .smart-scheduler-view-header-cell-feedback, smart-scheduler:not([view-type=day]):not([view-type=agenda]) .smart-scheduler-view-header-vertical .smart-scheduler-cell, smart-scheduler:not([view-type=day]):not([view-type^=timeline]) .smart-scheduler-view-label-container:empty { border-right: var(--smart-border-width) solid var(--smart-border) } smart-scheduler[view-type]:not([view-type=day]) .smart-scheduler-view-all-day-label, smart-scheduler[view-type]:not([view-type=day]):not([view-type=agenda]) .smart-scheduler-time-zone:last-of-type, smart-scheduler[view-type^=timeline] .smart-scheduler-time-zone, smart-scheduler[view-type^=timeline] .smart-scheduler-view[show-vertical-header][show-group-header=horizontal] .smart-scheduler-view-details-label { border-right: var(--smart-scheduler-view-line-size) solid var(--smart-scheduler-view-vertical-line-color) } smart-scheduler:not([view-type=month]) .smart-scheduler-view[show-group-header=vertical] .smart-scheduler-view-label-container:before { content: ''; width: var(--smart-scheduler-timeline-header-vertical-group-size); height: 100%; display: flex } smart-scheduler[view-type=day] .smart-scheduler-view[show-group-header=horizontal] .smart-scheduler-current-time-indicator:not(:first-of-type)::before, smart-scheduler[view-type^=timeline] .smart-scheduler-view[show-group-header=vertical] .smart-scheduler-current-time-indicator:not(:first-of-type)::before { content: none } smart-scheduler:not([view-type=agenda])[group-by-date] .smart-scheduler-view[show-group-header=vertical] .smart-scheduler-view-header-vertical .smart-scheduler-view-time .smart-scheduler-cell:not([group-separator])>div, smart-scheduler[view-type=timelineWeek] .smart-scheduler-view[show-group-header=vertical] .smart-scheduler-view-details-label, smart-scheduler[view-type^=timeline] .smart-scheduler-view-all-day { display: none } smart-scheduler:not([view-type=month]) .smart-scheduler-view[show-group-header=vertical] .smart-scheduler-view-all-day-label-container { margin-left: var(--smart-scheduler-timeline-header-vertical-group-size) } smart-scheduler:not([view-type=agenda]) .smart-scheduler-view-header-vertical-content .smart-scheduler-cell:not(:first-of-type)>div { transform: translateY(calc(-50% - var(--smart-scheduler-timeline-header-cell-padding))) } smart-scheduler:not([view-type=agenda]) .smart-scheduler-event[status] .smart-scheduler-event-content { padding-left: calc(var(--smart-scheduler-status-size) + var(--smart-scheduler-status-padding)); border-top-left-radius: 5px; border-bottom-left-radius: 5px } smart-scheduler:not([view-type=agenda]) .smart-scheduler-cells-container .smart-scheduler-cell:not(.scale):hover, smart-scheduler:not([view-type=agenda]) .smart-scheduler-view-all-day .smart-scheduler-cell:hover { background: var(--smart-ui-state-hover); color: var(--smart-ui-state-color-hover) } smart-scheduler[view-type^=timeline] { --smart-scheduler-event-size: var(--smart-scheduler-event-size-timeline) } smart-scheduler[view-type^=timeline] .smart-scheduler-view-label-container { flex-direction: column } smart-scheduler[view-type^=timeline] .smart-scheduler-cells .smart-scheduler-cell>div { text-overflow: ellipsis; overflow: hidden } smart-scheduler[view-type=agenda] .smart-scheduler-cells-container .smart-scheduler-cell-container, smart-scheduler[view-type^=timeline][group-by-date] .smart-scheduler-view-header-horizontal-content .smart-scheduler-cell { overflow: initial } smart-scheduler[view-type^=timeline] .smart-scheduler-time-zone { height: var(--smart-scheduler-timeline-header-horizontal-cells-size) } smart-scheduler[view-type^=timeline] .smart-scheduler-view:not([show-vertical-header]) { --smart-scheduler-timeline-header-vertical-cells-size: 0 } smart-scheduler[view-type^=timeline] .smart-scheduler-view[show-group-header=vertical] .smart-scheduler-view-label-container { border-right: var(--smart-border-width) solid var(--smart-border) } smart-scheduler[view-type^=timeline] .smart-scheduler-view[show-group-header=vertical] .smart-scheduler-view-header-vertical { grid-template-columns: auto 0 } smart-scheduler[view-type^=timeline] .smart-scheduler-view[show-group-header=vertical] .smart-scheduler-view-header-horizontal .smart-scheduler-view-time-container { grid-template-columns: var(--smart-scheduler-timeline-header-vertical-group-size) minmax(0, 1fr) } smart-scheduler[view-type^=timeline] .smart-scheduler-time-zone-container { height: auto; flex-direction: column } smart-scheduler[view-type^=timeline] .smart-scheduler-view-time { flex-direction: column } smart-scheduler[view-type^=timeline] .smart-scheduler-event { padding: var(--smart-scheduler-event-padding-timeline); height: var(--smart-scheduler-event-size) } smart-scheduler[view-type=month]:not([event-render-mode=classic]) .smart-scheduler-event, smart-scheduler[view-type^=timeline]:not([event-render-mode=classic]) .smart-scheduler-event { padding-bottom: 0 } smart-scheduler[view-type^=timeline] .smart-scheduler-event:after { top: calc(50% - var(--smart-scheduler-event-resize-indicator-size)/ 4); left: calc(100% - var(--smart-scheduler-event-resize-indicator-size)) } smart-scheduler[view-type^=timeline] .smart-scheduler-event:before { top: calc(50% - var(--smart-scheduler-event-resize-indicator-size)/ 4); left: 0 } smart-scheduler[view-type^=timeline] .smart-scheduler-cells-container .smart-scheduler-cell.scale:not(:last-of-type) { border-right: var(--smart-border-width) solid rgba(var(--smart-border-rgb), .5) } smart-scheduler[view-type^=timeline] .smart-scheduler-cells-container .smart-scheduler-cell-container { flex-direction: row } smart-scheduler[view-type^=timeline] .smart-scheduler-cells-container .smart-scheduler-cell-container:not(:last-of-type) { border-right: var(--smart-scheduler-view-line-size) solid var(--smart-scheduler-view-vertical-line-color) } smart-scheduler[view-type^=timeline] .smart-scheduler-current-time-indicator:before { left: calc(-1 * var(--smart-scheduler-current-time-indicator-arrow-size) + var(--smart-scheduler-current-time-indicator-size)/ 2); border-right: var(--smart-scheduler-current-time-indicator-arrow-size) solid transparent; border-left: var(--smart-scheduler-current-time-indicator-arrow-size) solid transparent; border-top: var(--smart-scheduler-current-time-indicator-arrow-size) solid var(--smart-scheduler-current-time-indicator-background) } smart-scheduler[view-type=timelineWeek] .smart-scheduler-view[show-vertical-header] .smart-scheduler-view-details-label { border-right: var(--smart-border-width) solid var(--smart-border) } smart-scheduler[view-type=day] .smart-scheduler-cells-container .smart-scheduler-cell:not(.scale):not(:last-of-type), smart-scheduler[view-type=day] .smart-scheduler-view-header-horizontal .smart-scheduler-cell, smart-scheduler[view-type=week] .smart-scheduler-cells-container .smart-scheduler-cell:not(.scale):not(:last-of-type), smart-scheduler[view-type=week] .smart-scheduler-view-header-horizontal .smart-scheduler-cell { border-right: var(--smart-scheduler-day-week-view-vertical-line-size) solid var(--smart-scheduler-day-week-view-vertical-line-color) } smart-scheduler[view-type=timelineWeek] .smart-scheduler-view-label-container { display: flex; flex-direction: column } smart-scheduler[view-type=timelineWeek] .smart-scheduler-view-details:empty, smart-scheduler[view-type=day] .smart-scheduler-view-header-horizontal .smart-scheduler-view-time-container, smart-scheduler[view-type=agenda] .smart-scheduler-view-header-horizontal .smart-scheduler-view-all-day, smart-scheduler[view-type=month] .smart-scheduler-view-header-horizontal .smart-scheduler-view-all-day, smart-scheduler[view-type=month] .smart-scheduler-view-header-vertical-content, smart-scheduler[view-type=month] .smart-scheduler-view:not([show-group-header=vertical]) .smart-scheduler-view-header-vertical, smart-scheduler[view-type=month] .smart-scheduler-view:not([show-group-header=vertical]) .smart-scheduler-view-label-container { display: none } smart-scheduler[view-type=timelineWeek] .smart-scheduler-view-details-label { height: var(--smart-scheduler-timeline-header-horizontal-details-size); width: 100% } smart-scheduler[view-type=day] .smart-scheduler-view { grid-template-rows: auto minmax(0, 1fr) } smart-scheduler[view-type=day] .smart-scheduler-cells-container .smart-scheduler-cell-container:not(:last-of-type) { border-bottom: var(--smart-scheduler-day-week-view-hour-size) solid var(--smart-scheduler-day-week-view-hour-color) } smart-scheduler[view-type=day] .smart-scheduler-view-header-horizontal .smart-scheduler-view-groups-label-container { border-bottom: var(--smart-border-width) solid var(--smart-border) } smart-scheduler[view-type=week] .smart-scheduler-cells-container .smart-scheduler-cell-container:not(:last-of-type) { border-bottom: var(--smart-scheduler-day-week-view-hour-size) solid var(--smart-scheduler-day-week-view-hour-color) } smart-scheduler[view-type=month] .smart-scheduler-event { height: var(--smart-scheduler-event-size) } smart-scheduler[view-type=month] .smart-scheduler-event:after { top: calc(50% - var(--smart-scheduler-event-resize-indicator-size)/ 4); left: calc(100% - var(--smart-scheduler-event-resize-indicator-size)) } smart-scheduler[view-type=month] .smart-scheduler-event:before { top: calc(50% - var(--smart-scheduler-event-resize-indicator-size)/ 4); left: 0 } smart-scheduler[view-type=month] .smart-scheduler-content { grid-template-columns: 100% } smart-scheduler[view-type=month] .smart-scheduler-cells-container .smart-scheduler-cell:not(.scale) { justify-content: flex-end; align-items: flex-start } smart-scheduler[view-type=month] .smart-scheduler-cells-container .smart-scheduler-cell:not(.scale)[today]>div:not([class]) { border-radius: 50%; background: var(--smart-primary); color: var(--smart-primary-color); box-shadow: 0 0 0 2px var(--smart-primary); width: calc(var(--smart-scheduler-month-view-number-size)/ 1.5); height: calc(var(--smart-scheduler-month-view-number-size)/ 1.5) } smart-scheduler[view-type=month] .smart-scheduler-scrollable-container { grid-template-columns: 100% } smart-scheduler[view-type=month] .smart-scheduler-view[show-group-header=vertical] .smart-scheduler-view-header-vertical { grid-template-columns: auto 0 } smart-scheduler[view-type=month] .smart-scheduler-view[show-group-header=vertical] .smart-scheduler-view-header-horizontal .smart-scheduler-view-time-container { grid-template-columns: var(--smart-scheduler-timeline-header-vertical-group-size) minmax(0, 1fr) } smart-scheduler[view-type=month] .smart-scheduler-view:not([mobile]) .smart-scheduler-event[collector] { padding-right: calc(var(--smart-scheduler-month-view-number-size) + 5px) } smart-scheduler[view-type=month] .smart-scheduler-view:not([mobile]) .smart-scheduler-event[collector][first-month-day] { padding-right: calc(var(--smart-scheduler-month-view-number-size) + 25px) } smart-scheduler[view-type=month] .smart-scheduler-view-all-day, smart-scheduler[view-type=month] .smart-scheduler-view-header-horizontal .smart-scheduler-view-time-container { grid-template-columns: minmax(0, 1fr) } smart-scheduler[view-type=agenda] { --smart-scheduler-timeline-header-vertical-label-padding: 0 0 0 25%; --smart-scheduler-event-time-font-weight: 600 } smart-scheduler[view-type=agenda] .smart-scheduler-cells-container .smart-scheduler-cell-container:not([separator]) { border: none } smart-scheduler[view-type=agenda] .smart-scheduler-view-header-vertical .smart-scheduler-cell { justify-content: flex-start } smart-scheduler[view-type=agenda] .smart-scheduler-view-header-vertical .smart-scheduler-cell>div { text-align: left } smart-scheduler[view-type=agenda] .smart-scheduler-view-header-horizontal { grid-template-rows: auto minmax(0, 1fr) } smart-scheduler[view-type=agenda] .smart-scheduler-view-header-horizontal .smart-scheduler-view-time-container { height: 0; border: none } smart-scheduler[view-type=agenda] .smart-scheduler-view-header-horizontal .smart-scheduler-view-groups-label-container { border-bottom: var(--smart-border-width) solid var(--smart-border) } smart-scheduler[view-type=agenda] .smart-scheduler-cells-container .smart-scheduler-cell-container[separator]:last-of-type>.smart-scheduler-cell:after, smart-scheduler[view-type=agenda] .smart-scheduler-view-header-vertical .smart-scheduler-cell[separator]:last-of-type>.smart-scheduler-cell:after { border-bottom: var(--smart-border-width) solid var(--smart-border); content: ''; height: 100%; width: 100%; position: absolute; top: var(--smart-border-width); left: 0; box-sizing: border-box; pointer-events: none } smart-scheduler[view-type=agenda] .smart-scheduler-cells-container .smart-scheduler-cell-container[separator]:not(:last-of-type), smart-scheduler[view-type=agenda] .smart-scheduler-view-header-vertical .smart-scheduler-cell[separator]:not(:last-of-type) { border-bottom: var(--smart-border-width) solid var(--smart-border) } smart-scheduler[view-type=agenda] .smart-scheduler-cell.smart-scheduler-view-header-cell-feedback { padding: calc(2 * var(--smart-scheduler-timeline-header-cell-padding)) } smart-scheduler[view-type=agenda] .smart-scheduler-view.no-agenda:after { content: attr(agenda-placeholder); width: 100%; height: 100%; position: absolute; display: flex; align-items: center; justify-content: center; pointer-events: none; text-overflow: ellipsis; overflow: hidden } smart-scheduler[disable-resize] .smart-scheduler-event:not([collector]):after, smart-scheduler[disable-resize] .smart-scheduler-event:not([collector]):before, smart-scheduler[view-type=agenda] .smart-scheduler-event:not([collector]):not([disable-resize]):after, smart-scheduler[view-type=agenda] .smart-scheduler-event:not([collector]):not([disable-resize]):before, smart-scheduler[view-type=agenda] .smart-scheduler-event[status] .smart-scheduler-event-content::before { content: initial } smart-scheduler[group-by-date] .smart-scheduler-view[show-group-header=horizontal] .smart-scheduler-view-header-horizontal .smart-scheduler-view-time .smart-scheduler-cell:not([show-label])>div, smart-scheduler[hide-all-day] .smart-scheduler-view-all-day, smart-scheduler[hide-today-button] .smart-scheduler-nav[today] { display: none } smart-scheduler[view-type=agenda] .smart-scheduler-event { padding: var(--smart-scheduler-event-padding-agenda) } .smart-notification-panel[right-to-left] .smart-notification-item .smart-input[interval], .smart-notification-panel[right-to-left] .smart-notification-item .smart-input[type], smart-scheduler[right-to-left]:not([disable-date-menu]) .smart-scheduler-nav[current] button, smart-scheduler[right-to-left]:not([disable-view-menu]) .smart-scheduler-view-items-button button { padding-left: var(--smart-editor-addon-width) } smart-scheduler[view-type=agenda] .smart-scheduler-event .smart-scheduler-event-time { opacity: var(--smart-scheduler-event-time-opacity-agenda); font-size: var(--smart-scheduler-event-time-font-size-agenda); font-weight: var(--smart-scheduler-event-time-font-weight-agenda) } smart-scheduler[view-type=agenda]:not([event-render-mode=classic]) .smart-scheduler-event { padding-bottom: 0 } smart-scheduler:not([filterable]) .smart-scheduler-legend { opacity: .55; cursor: default; pointer-events: none } smart-scheduler[filterable] .smart-scheduler-legend .smart-scheduler-legend-res-item { cursor: pointer; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; user-select: none } smart-scheduler[filterable] .smart-scheduler-legend .smart-scheduler-legend-res-item:hover:before { border-color: var(--smart-ui-state-border-hover) } smart-scheduler[filterable] .smart-scheduler-legend .smart-scheduler-legend-res-item:focus:before { border-color: var(--smart-primary) } smart-scheduler[group-by-date] .smart-scheduler-view[show-group-header=vertical] .smart-scheduler-view-header-vertical .smart-scheduler-view-time .smart-scheduler-cell, smart-scheduler[group-by-date] .smart-scheduler-view[show-group-header=horizontal] .smart-scheduler-view-header-horizontal .smart-scheduler-view-time .smart-scheduler-cell:not([group-separator]) { border-right: initial } smart-scheduler[filterable] .smart-scheduler-legend .smart-scheduler-legend-res-item[unselected]:before { background: 0 0 } smart-scheduler[filterable] .smart-scheduler-legend .smart-scheduler-legend-res-item[disabled] { opacity: .55; cursor: default; pointer-events: none } smart-scheduler[group-by-date] .smart-scheduler-view[show-group-header=horizontal] .smart-scheduler-view-header-horizontal .smart-scheduler-view-time-container { border-bottom: initial } smart-scheduler[group-by-date] .smart-scheduler-view[show-group-header=horizontal] .smart-scheduler-cell[show-label] { justify-content: flex-start } smart-scheduler[group-by-date] .smart-scheduler-view[show-group-header=horizontal] .smart-scheduler-cell[show-label]>div { transform: translateX(calc(-50% - var(--smart-scheduler-timeline-header-cell-padding))) } smart-scheduler[group-by-date] .smart-scheduler-view[show-group-header=horizontal] .smart-scheduler-cell[show-label=offset]>div { margin-left: var(--smart-scheduler-timeline-group-header-offset) } smart-scheduler[group-by-date] .smart-scheduler-view[show-group-header=vertical] .smart-scheduler-cell[show-label]>div { transform: translateY(calc(-50% - var(--smart-scheduler-timeline-header-cell-padding))) } smart-scheduler[group-by-date] .smart-scheduler-view[show-group-header=vertical] .smart-scheduler-cell[show-label=offset]>div { margin-top: var(--smart-scheduler-timeline-group-header-offset) } smart-scheduler[group-by-date] .smart-scheduler-view[show-group-header=vertical] .smart-scheduler-groups-container .smart-scheduler-cell { align-items: center } smart-scheduler[group-by-date] .smart-scheduler-view-header-horizontal .smart-scheduler-groups-container, smart-scheduler[group-by-date]:not([view-type^=timeline]) .smart-scheduler-view-header-vertical .smart-scheduler-groups-container { order: 1 } smart-scheduler[group-by-date] .smart-scheduler-view-all-day { order: 2 } smart-scheduler[group-by-date] .smart-scheduler-view-header-horizontal .smart-scheduler-view-groups-label-container, smart-scheduler[group-by-date]:not([view-type=agenda]) .smart-scheduler-view[show-group-header=vertical] .smart-scheduler-groups-container .smart-scheduler-cell:not([group-separator]) { border-bottom: var(--smart-border-width) solid var(--smart-border) } smart-scheduler[current-time-indicator] .smart-scheduler-view-header-horizontal .smart-scheduler-cell[current] { color: var(--smart-scheduler-current-time-indicator-background); border-bottom: var(--smart-scheduler-current-time-indicator-header-size) solid var(--smart-scheduler-current-time-indicator-background) } smart-scheduler[current-time-indicator] .smart-scheduler-view-header-vertical .smart-scheduler-cell[current] { color: var(--smart-scheduler-current-time-indicator-background); border-right: var(--smart-scheduler-current-time-indicator-header-size) solid var(--smart-scheduler-current-time-indicator-background) } smart-scheduler[current-time-indicator] .smart-scheduler-current-time-indicator:before { content: ""; position: absolute } smart-scheduler[disable-date-menu] .smart-scheduler-nav[current]::after, smart-scheduler[disable-view-menu] .smart-scheduler-view-items-button::after { content: initial } smart-scheduler[resized] { touch-action: none } smart-scheduler[resized] .smart-scheduler-cell[restricted]:hover { cursor: no-drop } smart-scheduler[resized] .smart-scheduler-event { pointer-events: none } smart-scheduler[dragged] { touch-action: none } smart-scheduler[dragged] .smart-scheduler-events-container, smart-scheduler[modal] .smart-scheduler-footer, smart-scheduler[modal] .smart-scheduler-header, smart-scheduler[modal] .smart-scheduler-view-container { pointer-events: none } smart-scheduler[disable-date-menu] .smart-scheduler-nav[current] { cursor: initial } smart-scheduler[disable-date-menu] .smart-scheduler-nav[current] .smart-ripple { visibility: hidden } smart-scheduler[disable-date-menu] .smart-scheduler-nav[current][focus], smart-scheduler[disable-date-menu] .smart-scheduler-nav[current][hover], smart-scheduler[disable-date-menu] .smart-scheduler-view-items-button[focus], smart-scheduler[disable-date-menu] .smart-scheduler-view-items-button[hover] { background: 0 0; color: var(--smart-background-color) } smart-scheduler[disable-view-menu] .smart-scheduler-view-items-button { border: initial; cursor: initial } smart-scheduler[disable-view-menu] .smart-scheduler-view-items-button .smart-ripple { visibility: hidden } smart-scheduler[time-ruler-ticks][view-type=day] .smart-scheduler-view-header-vertical .smart-scheduler-cells:last-of-type .smart-scheduler-cell:not(:last-of-type):after, smart-scheduler[time-ruler-ticks][view-type=week] .smart-scheduler-view-header-vertical .smart-scheduler-cells:last-of-type .smart-scheduler-cell:not(:last-of-type):after { content: ''; position: absolute; bottom: 0; right: 0; width: var(--smart-scheduler-time-ruler-tick-size); height: var(--smart-scheduler-day-week-view-hour-size); background: var(--smart-scheduler-day-week-view-hour-color) } smart-scheduler[legend-location=header] { --smart-scheduler-header-height: auto } smart-scheduler[legend-location=header] .smart-scheduler-header { grid-template-areas: "date view" "legend legend"; grid-template-rows: auto minmax(0, 1fr) } smart-scheduler[legend-position=far] .smart-scheduler-legend { justify-content: flex-end } smart-scheduler[scroll-buttons-position=both] .smart-scheduler-date-nav .smart-scheduler-nav[prev] { order: 1 } smart-scheduler[scroll-buttons-position=both] .smart-scheduler-date-nav .smart-scheduler-nav[current] { order: 2 } smart-scheduler[scroll-buttons-position=both] .smart-scheduler-date-nav .smart-scheduler-nav[next] { order: 3 } smart-scheduler[scroll-buttons-position=both][header-navigation-style=raised] .smart-scheduler-date-nav .smart-scheduler-nav[current] { border-radius: initial } smart-scheduler[scroll-buttons-position=both][header-navigation-style=raised] .smart-scheduler-date-nav .smart-scheduler-nav[next] { border-top-right-radius: var(--smart-item-border-top-right-radius); border-bottom-right-radius: var(--smart-item-border-bottom-right-radius); border-top-left-radius: initial; border-bottom-left-radius: initial; border-left: initial; border-right: var(--smart-border-width) solid var(--smart-border) } smart-scheduler[scroll-buttons-position=far] .smart-scheduler-date-nav .smart-scheduler-nav[current] { order: 1 } smart-scheduler[scroll-buttons-position=far] .smart-scheduler-date-nav .smart-scheduler-nav[next] { order: 3 } smart-scheduler[scroll-buttons-position=far] .smart-scheduler-date-nav .smart-scheduler-nav[prev] { order: 2 } smart-scheduler[scroll-buttons-position=far][header-navigation-style=raised] .smart-scheduler-date-nav .smart-scheduler-nav[current] { border-top-left-radius: var(--smart-item-border-top-left-radius); border-bottom-left-radius: var(--smart-item-border-bottom-left-radius); border-top-right-radius: initial; border-bottom-right-radius: initial } smart-scheduler[scroll-buttons-position=far][header-navigation-style=raised] .smart-scheduler-date-nav .smart-scheduler-nav[next], smart-scheduler[scroll-buttons-position=far][header-navigation-style=raised] .smart-scheduler-date-nav .smart-scheduler-nav[prev] { border-top-left-radius: initial; border-bottom-left-radius: initial; border-left: initial; border-right: var(--smart-border-width) solid var(--smart-border) } smart-scheduler[scroll-buttons-position=far][header-navigation-style=raised] .smart-scheduler-date-nav .smart-scheduler-nav[next] { border-top-right-radius: var(--smart-item-border-top-right-radius); border-bottom-right-radius: var(--smart-item-border-bottom-right-radius) } smart-scheduler[scroll-buttons-position=near] .smart-scheduler-date-nav .smart-scheduler-nav[prev] { order: 1 } smart-scheduler[scroll-buttons-position=near] .smart-scheduler-date-nav .smart-scheduler-nav[next] { order: 2 } smart-scheduler[scroll-buttons-position=near][header-navigation-style=raised] .smart-scheduler-date-nav .smart-scheduler-nav[current] { order: 3 } smart-scheduler[scroll-buttons-position=near][header-navigation-style=raised] .smart-scheduler-date-nav .smart-scheduler-nav[next] { border-top-right-radius: initial; border-bottom-right-radius: initial; border-right: initial; border-left: var(--smart-border-width) solid var(--smart-border) } smart-scheduler:not([header-navigation-style=raised]) .smart-scheduler-date-nav .smart-scheduler-nav[next], smart-scheduler:not([header-navigation-style=raised]) .smart-scheduler-date-nav .smart-scheduler-nav[prev] { border-radius: 50% } smart-scheduler:not([header-navigation-style=raised]) .smart-scheduler-date-nav .smart-scheduler-nav[current], smart-scheduler:not([header-navigation-style=raised]) .smart-scheduler-date-nav .smart-scheduler-nav[next], smart-scheduler:not([header-navigation-style=raised]) .smart-scheduler-date-nav .smart-scheduler-nav[prev] { border: initial } smart-scheduler:not([header-navigation-style=raised]) .smart-scheduler-date-nav .smart-scheduler-nav[current] { margin-left: 10px } smart-scheduler:not([header-navigation-style=raised]) .smart-scheduler-date-nav .smart-scheduler-nav[current]:not([focus]), smart-scheduler:not([header-navigation-style=raised]) .smart-scheduler-date-nav .smart-scheduler-nav[next]:not([active]):not([focus]), smart-scheduler:not([header-navigation-style=raised]) .smart-scheduler-date-nav .smart-scheduler-nav[prev]:not([active]):not([focus]), smart-scheduler:not([header-navigation-style=raised]) .smart-scheduler-nav[today]:not([focus]), smart-scheduler:not([header-navigation-style=raised]) .smart-scheduler-view-items-button:not([focus]) { background: 0 0 } smart-scheduler[header-date-position=far] .smart-scheduler-header { grid-template-columns: 1fr auto; grid-template-areas: "view date" } smart-scheduler[header-view-position=near] .smart-scheduler-view-nav { justify-content: flex-start } smart-scheduler[header-view-position=near] .smart-scheduler-view-items-button { order: 2 } smart-scheduler[header-view-position=near] .smart-scheduler-items-container .smart-scheduler-item:first-of-type, smart-scheduler[header-view-position=near] .smart-scheduler-items-container .smart-scheduler-item:first-of-type[selected] { border-left: none } smart-scheduler[header-view-position=near] .smart-scheduler-items-container .smart-scheduler-item[selected] { border-left: var(--smart-border-width) solid var(--smart-border); border-right: var(--smart-border-width) solid var(--smart-border) } smart-scheduler[header-navigation-style=raised] .smart-scheduler-date-nav .smart-scheduler-nav[prev] { border-top-left-radius: var(--smart-item-border-top-left-radius); border-bottom-left-radius: var(--smart-item-border-bottom-left-radius); border-top-right-radius: initial; border-bottom-right-radius: initial; border-right: initial } smart-scheduler[header-navigation-style=raised] .smart-scheduler-date-nav .smart-scheduler-nav[next] { border-top-left-radius: initial; border-bottom-left-radius: initial; border-top-right-radius: initial; border-bottom-right-radius: initial; border-right: initial; border-left: var(--smart-border-width) solid var(--smart-border) } smart-scheduler[header-navigation-style=raised] .smart-scheduler-date-nav .smart-scheduler-nav[current] { border-radius: initial; border-top-right-radius: var(--smart-item-border-top-right-radius); border-bottom-right-radius: var(--smart-item-border-bottom-right-radius) } smart-scheduler[header-navigation-style=raised] .smart-scheduler-nav[today], smart-scheduler[header-navigation-style=raised] .smart-scheduler-view-items-button { background: var(--smart-background) } smart-scheduler[view-selector-type=tabs] .smart-scheduler-view-items-button { position: absolute } smart-scheduler[view-selector-type=tabs] .smart-scheduler-header, smart-scheduler[view-selector-type=auto] .smart-scheduler-header { grid-template-areas: "date . view" } smart-scheduler:not([right-to-left]) .smart-scheduler-view-header-horizontal .smart-scheduler-cell:last-of-type { border-right: none } smart-scheduler[right-to-left] .smart-scheduler-header, smart-scheduler[right-to-left] .smart-scheduler-view { direction: rtl } smart-scheduler[right-to-left] .smart-scheduler-date-nav .smart-scheduler-nav[today] { order: 1 } smart-scheduler[right-to-left] .smart-scheduler-date-nav .smart-scheduler-nav[prev] { order: 2 } smart-scheduler[right-to-left] .smart-scheduler-date-nav .smart-scheduler-nav[prev]:after { content: var(--smart-icon-arrow-right) } smart-scheduler[right-to-left] .smart-scheduler-date-nav .smart-scheduler-nav[next] { order: 3 } smart-scheduler[right-to-left] .smart-scheduler-date-nav .smart-scheduler-nav[next]:after { content: var(--smart-icon-arrow-left) } smart-scheduler[right-to-left] .smart-scheduler-date-nav .smart-scheduler-nav[current] { order: 4 } smart-scheduler[right-to-left].smart-container.vscroll .smart-scheduler-view, smart-scheduler[right-to-left]>.smart-container.vscroll .smart-scheduler-view { margin-left: var(--smart-scroll-bar-size) } smart-scheduler[right-to-left].smart-container.vscroll .smart-scheduler-view-scroll-bar:not([orientation=vertical]), smart-scheduler[right-to-left]>.smart-container.vscroll .smart-scheduler-view-scroll-bar:not([orientation=vertical]) { left: var(--smart-scroll-bar-size) } smart-scheduler[right-to-left] .smart-scheduler-view-scroll-bar[orientation=vertical] { right: initial; left: 0 } smart-scheduler[right-to-left] .smart-scheduler-view-scroll-bar[orientation=vertical]:before { border-left: none; border-right: var(--smart-border-width) solid var(--smart-border) } smart-scheduler[right-to-left] .smart-scheduler-view-scroll-bar[orientation=vertical]:after { right: 100%; left: initial; left: calc(-1 * var(--smart-scroll-bar-size)) } smart-scheduler[right-to-left][view-type=day] .smart-scheduler-cells-container .smart-scheduler-cell:not(.scale):not(:last-of-type), smart-scheduler[right-to-left][view-type=week] .smart-scheduler-cells-container .smart-scheduler-cell:not(.scale):not(:last-of-type) { border-right: initial; border-left: var(--smart-scheduler-day-week-view-vertical-line-size) solid var(--smart-scheduler-day-week-view-vertical-line-color) } smart-scheduler[right-to-left]:not([view-type^=timeline]) .smart-scheduler-cells-container .smart-scheduler-cell:not(.scale):not(:last-of-type), smart-scheduler[right-to-left][view-type]:not([view-type=day]) .smart-scheduler-view-all-day-label, smart-scheduler[right-to-left][view-type]:not([view-type=day]):not([view-type=agenda]) .smart-scheduler-time-zone:last-of-type, smart-scheduler[right-to-left][view-type^=timeline] .smart-scheduler-time-zone, smart-scheduler[right-to-left][view-type^=timeline] .smart-scheduler-view[show-vertical-header][show-group-header=horizontal] .smart-scheduler-view-details-label { border-right: initial; border-left: var(--smart-scheduler-view-line-size) solid var(--smart-scheduler-view-vertical-line-color) } smart-scheduler[right-to-left]:not([view-type=day]) .smart-scheduler-view-header-cell-feedback, smart-scheduler[right-to-left]:not([view-type=day]):not([view-type=agenda]) .smart-scheduler-view-header-vertical .smart-scheduler-cell, smart-scheduler[right-to-left]:not([view-type=day]):not([view-type^=timeline]) .smart-scheduler-view-label-container:empty, smart-scheduler[right-to-left][view-type^=timeline] .smart-scheduler-view[show-group-header=vertical] .smart-scheduler-view-label-container { border-right: initial; border-left: var(--smart-border-width) solid var(--smart-border) } smart-scheduler[right-to-left] .smart-scheduler-view-all-day .smart-scheduler-cell[all-day]:not(:last-of-type), smart-scheduler[right-to-left] .smart-scheduler-view-details .smart-scheduler-cell:not(:last-of-type), smart-scheduler[right-to-left] .smart-scheduler-view-header-horizontal .smart-scheduler-cell:not(:last-of-type) { border-right: initial; border-left: var(--smart-scheduler-day-week-view-vertical-line-size) solid var(--smart-scheduler-day-week-view-vertical-line-color) } smart-scheduler[right-to-left] .smart-scheduler-view-all-day .smart-scheduler-cell[all-day]:last-of-type, smart-scheduler[right-to-left] .smart-scheduler-view-header-horizontal .smart-scheduler-cell:last-of-type { border-right: initial } smart-scheduler[right-to-left]:not([view-type=day]) .smart-scheduler-view[show-group-header=vertical] .smart-scheduler-view-header-groups-container .smart-scheduler-cell-container:not(:last-of-type)>.smart-scheduler-cell, smart-scheduler[right-to-left][view-type^=timeline] .smart-scheduler-cells-container .smart-scheduler-cell-container:not(:last-of-type) { border-right: initial; border-left: var(--smart-scheduler-view-line-size) solid var(--smart-scheduler-view-vertical-line-color) } smart-scheduler[right-to-left] .smart-scheduler-view[show-group-header=horizontal] .smart-scheduler-cell-container[group-separator]:not(:last-of-type), smart-scheduler[right-to-left] .smart-scheduler-view[show-group-header=horizontal] .smart-scheduler-cell:not(.scale)[group-separator]:not(:last-of-type), smart-scheduler[right-to-left] .smart-scheduler-view[show-group-header=horizontal] .smart-scheduler-cell[group-separator]:not(:last-of-type) { border-right-color: initial; border-right-width: initial; border-left-color: var(--smart-scheduler-timeline-group-separator-background); border-left-width: var(--smart-scheduler-timeline-group-separator-size) } smart-scheduler[right-to-left][group-by-date] .smart-scheduler-view[show-group-header=horizontal] .smart-scheduler-view-header-horizontal .smart-scheduler-view-time .smart-scheduler-cell:not([group-separator]) { border-left: initial } smart-scheduler[right-to-left][group-by-date] .smart-scheduler-view[show-group-header=horizontal] .smart-scheduler-view-header-horizontal .smart-scheduler-view-time .smart-scheduler-cell[show-label=offset]>div { margin-left: initial; margin-right: var(--smart-scheduler-timeline-group-header-offset) } smart-scheduler[right-to-left][group-by-date] .smart-scheduler-view[show-group-header=horizontal] .smart-scheduler-view-header-horizontal .smart-scheduler-view-time .smart-scheduler-cell[show-label]>div { transform: translateX(calc(50% + var(--smart-scheduler-timeline-header-cell-padding))) } smart-scheduler[right-to-left] .smart-scheduler-nav[current]:after, smart-scheduler[right-to-left] .smart-scheduler-view-items-button:after { left: 0; right: initial } smart-scheduler[right-to-left][view-type=agenda] { --smart-scheduler-timeline-header-vertical-label-padding: 0 25% 0 0 } smart-scheduler[right-to-left][view-type=agenda] .smart-scheduler-view-header-vertical .smart-scheduler-cell>div { text-align: right } smart-scheduler[right-to-left][view-type=month] .smart-scheduler-view:not([mobile]) .smart-scheduler-event[collector] { padding-right: initial; padding-left: calc(var(--smart-scheduler-month-view-number-size) + 5px) } smart-scheduler[right-to-left][view-type=month] .smart-scheduler-view:not([mobile]) .smart-scheduler-event[collector][first-month-day] { padding-left: calc(var(--smart-scheduler-month-view-number-size) + 25px) } smart-scheduler[right-to-left] .smart-toast-container-custom { right: initial; left: 0 } smart-scheduler[right-to-left]:not([view-type=agenda]) .smart-scheduler-event[status] .smart-scheduler-event-content { padding-left: initial; padding-right: calc(var(--smart-scheduler-status-size) + var(--smart-scheduler-status-padding)); border-top-left-radius: initial; border-bottom-left-radius: initial; border-top-right-radius: 5px; border-bottom-right-radius: 5px } smart-scheduler[right-to-left]:not([view-type=month]) .smart-scheduler-view[show-group-header=vertical] .smart-scheduler-view-all-day-label-container { margin-left: initial; margin-right: var(--smart-scheduler-timeline-header-vertical-group-size) } smart-scheduler[right-to-left][header-navigation-style=raised] .smart-scheduler-date-nav .smart-scheduler-nav[current] { border-top-right-radius: initial; border-bottom-right-radius: initial; border-top-left-radius: var(--smart-item-border-top-right-radius); border-bottom-left-radius: var(--smart-item-border-bottom-right-radius) } smart-scheduler[right-to-left][header-navigation-style=raised] .smart-scheduler-date-nav .smart-scheduler-nav[prev] { border-top-left-radius: initial; border-bottom-left-radius: initial; border-left: initial } smart-scheduler[right-to-left][header-navigation-style=raised] .smart-scheduler-date-nav .smart-scheduler-nav[next] { border-top-right-radius: var(--smart-item-border-top-left-radius); border-bottom-right-radius: var(--smart-item-border-bottom-left-radius); border-right: var(--smart-border-width) solid var(--smart-border) } smart-scheduler[right-to-left] .smart-scheduler-nav[today] { margin-right: initial; margin-left: 10px } smart-scheduler[right-to-left] .smart-scheduler-event[repeating] .smart-scheduler-event-content:after { right: initial; left: 0 } smart-scheduler[right-to-left][view-type=timelineWeek] .smart-scheduler-view[show-vertical-header] .smart-scheduler-view-details-label { border-right: initial; border-left: var(--smart-border-width) solid var(--smart-border) } smart-scheduler[right-to-left] .smart-scheduler-items-container .smart-scheduler-item:last-of-type { border-right: var(--smart-border-width) solid var(--smart-border); border-left: none } smart-scheduler[right-to-left] .smart-scheduler-legend { direction: rtl } @-moz-document url-prefix() { .smart-scheduler .smart-scheduler-view[mobile] .smart-scheduler-content:not(.hide-overlay):after { display: none } } .smart-scheduler-window { --smart-window-default-width: auto; --smart-window-default-height: auto; --smart-window-header-height: var(--smart-scheduler-window-header-height); --smart-window-footer-height: var(--smart-scheduler-window-footer-height); --smart-window-header-footer-padding: 10px; --smart-window-header-background: transparent; --smart-window-footer-padding: 10px; --smart-window-content-padding: 20px; max-width: 100vw; max-height: 100vh } .smart-scheduler-window[mobile] { border-radius: initial } .smart-scheduler-window.smart-window.confirm .smart-scheduler-confirm-label { width: var(--smart-box-width) } .smart-scheduler-window.smart-window.confirm .smart-content-container>.smart-content { width: 100%; padding: var(--smart-window-content-padding); justify-items: center; justify-items: safe center; grid-template-rows: auto minmax(auto, 1fr); display: grid; justify-content: center; grid-template-columns: 100%; grid-row-gap: initial } .smart-scheduler-window.smart-window .smart-scheduler-window-content-wrapper { width: 100%; padding: var(--smart-window-content-padding); justify-items: center; justify-items: safe center; grid-template-rows: auto minmax(auto, 1fr) } .smart-scheduler-window.smart-window .smart-scheduler-window-content-wrapper, .smart-scheduler-window.smart-window .smart-scheduler-window-main, .smart-scheduler-window.smart-window .smart-scheduler-window-repeat { display: grid; grid-row-gap: 10px; justify-content: center; grid-template-columns: 100% } .smart-scheduler-window.smart-window .smart-content-container>.smart-content { padding: initial; align-items: flex-start } .smart-scheduler-window.smart-window .smart-scheduler-window-main, .smart-scheduler-window.smart-window .smart-scheduler-window-repeat { width: var(--smart-box-width) } .smart-scheduler-window.smart-window[horizontal] .smart-scheduler-window-content-wrapper { grid-template-columns: repeat(2, auto); grid-column-gap: 20px } .smart-scheduler-window.smart-window .smart-scheduler-window-repeat [multiple] { grid-template-columns: minmax(0, 1fr) } .smart-scheduler-window.smart-window .smart-scheduler-window-repeat [multiple] .smart-scheduler-window-editor { grid-template-columns: auto auto minmax(0, 1fr) } .smart-color-input-drop-down-menu.smart-scheduler-color-input .grid-samples-container, .smart-scheduler-window .smart-scheduler-window-editor[multiple] { grid-template-columns: repeat(2, minmax(0, 1fr)) } .smart-scheduler-window .smart-content-container, .smart-scheduler-window>.smart-container { max-height: inherit } .smart-scheduler-window [multiple] .smart-scheduler-window-editor { align-items: center; justify-content: flex-start } .smart-scheduler-window [multiple] .smart-scheduler-window-editor:nth-child(even), .smart-scheduler-window [multiple] .smart-scheduler-window-editor:nth-child(odd):not(:first-of-type):not(:last-of-type), .smart-scheduler-window [multiple] .smart-scheduler-window-editor[type=repeat] { justify-content: flex-end } .smart-scheduler-window .smart-content-container>.smart-footer { display: flex } @media not all and (min-resolution:0.001dpcm) { .smart-scheduler-window .smart-content-container>.smart-footer { align-content: start } } .smart-scheduler-window .smart-content-container>.smart-footer smart-button { width: 100%; height: 100%; --smart-button-padding: 0.2rem 16px } .smart-scheduler-window .smart-content-container>.smart-footer smart-button:not(:first-of-type) { margin-inline-start: 2% } .smart-scheduler-window .smart-content-container>.smart-footer .smart-icon { position: relative; height: 100%; font-family: var(--smart-font-family-icon); font-size: 18px; margin-right: 2.5px } .smart-scheduler-window .smart-scheduler-window-button.ok .smart-icon::after { content: var(--smart-icon-check) } .smart-scheduler-window .smart-scheduler-window-button.cancel { grid-area: buttonCancel } .smart-scheduler-window .smart-scheduler-window-button.cancel .smart-icon::after { content: var(--smart-icon-cancel) } .smart-scheduler-window .smart-scheduler-window-button.delete .smart-icon::after { content: var(--smart-icon-delete) } .smart-scheduler-window .smart-scheduler-window-editor { display: grid; grid-row-gap: 5px; grid-column-gap: 10px } .smart-scheduler-window .smart-scheduler-window-editor[type=repeat], .smart-scheduler-window .smart-scheduler-window-editor[type=allDay] { grid-column-gap: initial } .smart-scheduler-window .smart-scheduler-window-editor[type=conference] label::before { content: var(--smart-icon-video-camera); font-family: var(--smart-font-family-icon); font-size: 14px; margin-right: 5px; position: relative; top: -3px } .smart-scheduler-window .smart-scheduler-window-editor[type=notifications] label::before { content: var(--smart-icon-bell); font-family: var(--smart-font-family-icon); font-size: 14px; margin-right: 5px } .smart-scheduler-window .smart-scheduler-window-editor[multiple] .smart-color-input[event-editor] { width: auto; --smart-border-radius: 50% } .smart-scheduler-window .smart-scheduler-window-editor .smart-date-time-picker, .smart-scheduler-window .smart-scheduler-window-editor .smart-drop-down-list, .smart-scheduler-window .smart-scheduler-window-editor>.smart-input { width: 100% } .smart-scheduler-window .smart-scheduler-window-editor .smart-switch-button { margin: auto 10px } .smart-scheduler-window .smart-scheduler-window-editor>b { text-align: center } .smart-scheduler-window .smart-scheduler-window-editor>.smart-number-input { width: 100px } .smart-scheduler-window .smart-scheduler-window-editor input:not(.smart-input) { height: var(--smart-editor-height) } .smart-scheduler-window .smart-scheduler-window-editor .smart-input[disabled] { opacity: .55; cursor: default; pointer-events: none; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; user-select: none } .smart-scheduler-window .smart-scheduler-window-main [multiple] .smart-scheduler-window-editor:not([type^=date]):not([resource-type]) { grid-template-columns: repeat(2, auto) } .smart-scheduler-window .smart-scheduler-window-repeat [multiple] .smart-scheduler-window-editor[type=repeatEnd] { grid-template-columns: initial } .smart-scheduler-tooltip { --smart-tooltip-arrow-color: var(--smart-background); --smart-tooltip-padding: 4px } .smart-scheduler-tooltip.smart-tooltip .smart-tooltip-content { opacity: initial; background-color: var(--smart-background); color: var(--smart-color); border: none } .smart-scheduler-tooltip .smart-calendar { border: initial; border-radius: initial; direction: initial } .smart-scheduler-tooltip .smart-calendar .smart-calendar-header { border: var(--smart-border-width) solid var(--smart-border) } .smart-scheduler-tooltip .smart-scheduler-items-container { flex-direction: column; outline: 0 } .smart-scheduler-tooltip .smart-scheduler-items-container:focus .smart-scheduler-item[selected] { background-color: var(--smart-ui-state-focus); border-color: var(--smart-ui-state-border-focus); color: var(--smart-ui-state-color-focus) } .smart-scheduler-tooltip .smart-scheduler-item { width: 100%; cursor: pointer; height: auto; position: relative; padding-right: calc(var(--smart-scheduler-shortcut-size) - 4px) } .smart-scheduler-tooltip .smart-scheduler-item:after { content: attr(shortcut-key); position: absolute; height: 100%; width: var(--smart-scheduler-shortcut-size); display: flex; align-items: center; justify-content: center; box-sizing: border-box; top: 0; right: 0; overflow: hidden; white-space: nowrap; opacity: .5; margin: 0 6px 0 10px } .smart-scheduler-tooltip .smart-scheduler-item:hover { color: var(--smart-ui-state-color-hover); background-color: var(--smart-ui-state-hover) } .smart-scheduler-tooltip .smart-scheduler-item[checkable]:after { content: ''; opacity: initial; left: 0; right: initial; margin: initial } .smart-scheduler-tooltip .smart-scheduler-item[checkable]>div { padding-left: var(--smart-scheduler-shortcut-size); padding-right: initial } .smart-scheduler-tooltip .smart-scheduler-item[checkable][checked]:after { content: var(--smart-icon-check); font-family: var(--smart-font-family-icon); font-size: var(--smart-font-size) } .smart-scheduler-tooltip .smart-scheduler-item[separator] { position: relative; margin-top: 15px } .smart-scheduler-tooltip .smart-scheduler-item[separator]:before { content: ''; display: flex; width: 100%; border-bottom: var(--smart-border-width) solid var(--smart-border); margin: 7px 0; position: absolute; left: 0; bottom: 100% } .smart-scheduler-tooltip .smart-scheduler-item>div { position: relative; align-items: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; padding: 10px var(--smart-scheduler-shortcut-size) 10px 12px; display: flex; flex-direction: row; justify-content: space-between; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; user-select: none } .smart-scheduler-tooltip .smart-scheduler-event { display: grid; position: relative; width: 100% !important; height: var(--smart-scheduler-event-item-size) !important; top: initial !important; left: initial !important; right: initial !important; grid-template-columns: 20px minmax(0, 1fr) var(--smart-scheduler-event-button-size); grid-column-gap: 10px; justify-content: center; padding: var(--smart-scheduler-event-content-padding); cursor: pointer; background: var(--smart-background); color: var(--smart-background-color); outline: 0; --smart-scheduler-event-focus: var(--smart-ui-state-focus); --smart-scheduler-event-color-focus: var(--smart-ui-state-color-focus); --smart-scheduler-event-hover: var(--smart-ui-state-hover); --smart-scheduler-event-color-hover: var(--smart-ui-state-color-hover); -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; user-select: none } .smart-scheduler-tooltip .smart-scheduler-event:before { content: ''; width: 20px; height: 20px; display: flex; background: var(--smart-scheduler-event-background); justify-content: center; align-items: center; pointer-events: none; box-sizing: border-box; border-radius: 50%; padding: var(--smart-scheduler-event-content-padding) } .smart-scheduler-tooltip .smart-scheduler-event:hover { background: var(--smart-ui-state-hover); color: var(--smart-ui-state-color-hover) } .smart-scheduler-tooltip .smart-scheduler-event[hover] .smart-scheduler-event-button:hover { color: var(--smart-ui-state-color-focus); background-color: var(--smart-ui-state-focus) } .smart-scheduler-tooltip .smart-scheduler-event .smart-scheduler-event-content { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; overflow: hidden } .smart-scheduler-tooltip .smart-scheduler-event .smart-scheduler-event-content .meeting { font-size: 12px; color: var(--smart-primary) } .smart-scheduler-tooltip .smart-scheduler-event .smart-scheduler-event-content .meeting a { color: var(--smart-primary) } .smart-scheduler-tooltip .smart-scheduler-event .smart-scheduler-event-content .meeting::before { content: var(--smart-icon-video-camera); font-family: var(--smart-font-family-icon); font-size: 12px; margin-right: 5px } .smart-scheduler-tooltip .smart-scheduler-event .smart-scheduler-event-content>div { max-width: 100%; max-height: 100%; overflow: hidden; text-overflow: ellipsis; align-self: flex-start } .smart-scheduler-tooltip .smart-scheduler-context-menu { width: 100%; height: 100%; display: grid; align-items: center; justify-content: flex-start } .smart-scheduler-tooltip .smart-scheduler-context-menu .smart-scheduler-context-menu-item { height: var(--smart-list-item-height); padding: var(--smart-list-item-padding); border-top-left-radius: var(--smart-item-border-top-left-radius); border-top-right-radius: var(--smart-item-border-top-right-radius); border-bottom-left-radius: var(--smart-item-border-bottom-left-radius); border-bottom-right-radius: var(--smart-item-border-bottom-right-radius); white-space: nowrap; text-overflow: ellipsis; background: var(--smart-background); color: var(--smart-background-color); display: flex; align-items: center; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; user-select: none } .smart-notification-panel .smart-notification-item .smart-button[delete]:active, .smart-notification-panel .smart-notification-item .smart-button[delete]:hover, .smart-scheduler-tooltip .smart-scheduler-event-button:hover { color: var(--smart-ui-state-color-hover); background-color: var(--smart-ui-state-hover) } .smart-scheduler-tooltip .smart-scheduler-context-menu .smart-scheduler-context-menu-item:hover { background: var(--smart-ui-state-hover); color: var(--smart-ui-state-color-hover) } .smart-scheduler-tooltip .smart-scheduler-context-menu .smart-scheduler-context-menu-item[selected], .smart-scheduler-tooltip .smart-scheduler-event[selected], .smart-scheduler-tooltip .smart-scheduler-item[selected] { background-color: var(--smart-ui-state-selected); border-color: var(--smart-ui-state-border-selected); color: var(--smart-ui-state-color-selected) } .smart-scheduler-tooltip .smart-scheduler-context-menu .smart-scheduler-context-menu-item[disabled], .smart-scheduler-tooltip .smart-scheduler-event[disabled], .smart-scheduler-tooltip .smart-scheduler-item[disabled] { opacity: .55; cursor: default; pointer-events: none } .smart-scheduler-tooltip .smart-scheduler-collector-event-list { width: 100%; height: 100% } .smart-scheduler-tooltip .smart-scroll-viewer { --smart-scroll-viewer-max-height: var(--smart-scheduler-context-menu-max-height); --smart-scroll-viewer-max-width: var(--smart-scheduler-context-menu-max-width); --smart-list-box-default-height: auto; width: auto; border: initial; padding: initial } .smart-notification-panel .smart-notification-item .smart-input, .smart-scheduler-tooltip .smart-scheduler-event-button { border-top-right-radius: var(--smart-border-top-right-radius); border-bottom-left-radius: var(--smart-border-bottom-left-radius); outline: 0 } .smart-scheduler-tooltip .smart-scroll-viewer .smart-scroll-viewer-container.vscroll .smart-scheduler-context-menu { padding-right: var(--smart-scroll-bar-size) } .smart-scheduler-tooltip .smart-scroll-viewer .smart-scroll-viewer-container .smart-scroll-viewer-content-container { padding: initial } .smart-scheduler-tooltip .smart-scheduler-event-button { position: relative; width: var(--smart-scheduler-collector-item-button-size); height: var(--smart-scheduler-collector-item-button-size); display: flex; justify-content: center; align-items: center; overflow: hidden; border-color: var(--smart-border); border-top-left-radius: var(--smart-border-top-left-radius); border-bottom-right-radius: var(--smart-border-bottom-right-radius) } .smart-scheduler-tooltip .smart-scheduler-event-button:active { color: var(--smart-ui-state-color-active); background-color: var(--smart-ui-state-active) } .smart-scheduler-tooltip .smart-scheduler-event-button:focus { color: var(--smart-ui-state-color-focus); background-color: var(--smart-ui-state-focus) } .smart-scheduler-tooltip .smart-scheduler-event-button:before { content: var(--smart-icon-delete); font-family: var(--smart-font-family-icon); position: absolute; pointer-events: none; box-sizing: border-box; font-size: var(--smart-button-large-font-size) } .smart-scheduler-tooltip .smart-scheduler-event-label { font-weight: var(--smart-scheduler-event-label-font-weight); font-size: var(--smart-scheduler-event-label-font-size); pointer-events: none; white-space: nowrap } .smart-scheduler-tooltip .smart-scheduler-event-time { font-weight: var(--smart-scheduler-event-time-font-weight); font-size: var(--smart-scheduler-event-time-font-size); opacity: var(--smart-scheduler-event-time-opacity); pointer-events: none; white-space: nowrap } .smart-scheduler-tooltip:not([animation=none]) { animation: smart-drop-down-list-smart-animate-closing .2s ease-in; transition: animation .2s ease-in, opacity .2s ease-in, visibility .2s ease-in } .smart-scheduler-tooltip:not([animation=none])[visible] { animation: smart-drop-down-list-smart-animate-opening .2s ease-out; transition: animation .2s ease-out, opacity .2s ease-out, visibility .2s ease-out } .smart-scheduler-tooltip:not([arrow-direction]), .smart-scheduler-tooltip[arrow-direction=bottom] { -webkit-transform-origin: bottom; transform-origin: bottom } .smart-scheduler-tooltip:not([arrow]), .smart-scheduler-tooltip[arrow-direction=top] { -webkit-transform-origin: top; transform-origin: top } .smart-scheduler-tooltip[right-to-left] .smart-scheduler-item { padding-right: initial; padding-left: calc(var(--smart-scheduler-shortcut-size) - 4px) } .smart-scheduler-tooltip[right-to-left] .smart-scheduler-item:after { left: 0; right: initial; margin: 0 10px 0 6px } .smart-scheduler-tooltip[right-to-left] .smart-scheduler-item>div { padding: 10px 12px 10px var(--smart-scheduler-shortcut-size) } .smart-scheduler-drag-feedback { position: absolute; outline: 0; -webkit-tap-highlight-color: transparent; border-radius: var(--smart-scheduler-event-border-radius); pointer-events: none; padding: initial; text-align: center; box-sizing: border-box; background: 0 0; box-shadow: var(--smart-elevation-8); font-family: var(--smart-font-family); font-size: var(--smart-font-size); cursor: move; opacity: .75; z-index: 10000 } .smart-scheduler-drag-feedback .smart-scheduler-event-content { box-sizing: border-box; width: 100%; height: 100%; max-height: 100%; display: grid; grid-template-rows: min-content minmax(auto, 1fr); justify-content: flex-start; justify-items: flex-start; align-items: center; overflow: hidden; padding: var(--smart-scheduler-event-content-padding); color: var(--smart-scheduler-event-color); background: var(--smart-scheduler-event-background); cursor: pointer; position: relative; border-radius: inherit; grid-row-gap: 2px } .smart-scheduler-drag-feedback .smart-scheduler-event-content[single-line] { grid-template-columns: repeat(2, auto); grid-template-rows: 100%; grid-column-gap: 5px; justify-content: space-between } .smart-scheduler-drag-feedback .smart-scheduler-event-content[single-line]>div { align-self: initial } .smart-scheduler-drag-feedback .smart-scheduler-event-content:not([single-line])>div:not(:first-of-type) { grid-column: 1/span 2 } .smart-scheduler-drag-feedback .smart-scheduler-event-label { font-weight: var(--smart-scheduler-event-label-font-weight); font-size: var(--smart-scheduler-event-label-font-size); pointer-events: none; white-space: nowrap } .smart-scheduler-drag-feedback .smart-scheduler-event-time { font-weight: var(--smart-scheduler-event-time-font-weight); font-size: var(--smart-scheduler-event-time-font-size); opacity: var(--smart-scheduler-event-time-opacity); pointer-events: none; white-space: pre-wrap } .smart-scheduler-drag-feedback .smart-scheduler-event-content { grid-template-columns: minmax(auto, 1fr) } .smart-scheduler-drag-feedback .smart-scheduler-event-content>div { max-width: 100%; max-height: 100%; overflow: hidden; text-overflow: ellipsis; align-self: flex-start } .smart-scheduler-drag-feedback .smart-scheduler-event-content>div:first-of-type { align-self: center } .smart-scheduler-drag-feedback[status] .smart-scheduler-event-content:before { content: ''; position: absolute; display: block; width: var(--smart-scheduler-status-size); height: 100%; background: var(--smart-scheduler-status-background); box-shadow: 0 0 0 .5px var(--smart-background); border: 1px solid var(--smart-border); border-radius: 20px; overflow: hidden; box-sizing: border-box } .smart-scheduler-drag-feedback[status]:not([view-type=agenda]) .smart-scheduler-event-content { padding-left: calc(var(--smart-scheduler-status-size) + var(--smart-scheduler-status-padding)) } .smart-scheduler-drag-feedback[status=free] .smart-scheduler-event-content:before { background: var(--smart-scheduler-status-free-background) } .smart-scheduler-drag-feedback[status=busy] .smart-scheduler-event-content:before { background: var(--smart-scheduler-status-busy-background) } .smart-scheduler-drag-feedback[status=outOfOffice] .smart-scheduler-event-content:before { background: var(--smart-scheduler-status-out-of-office-background) } .smart-scheduler-drag-feedback[status=tentative] .smart-scheduler-event-content:before { background: var(--smart-scheduler-status-tentative-background) } .smart-scheduler-drag-feedback[view-type=agenda] .smart-scheduler-event-time { opacity: var(--smart-scheduler-event-time-opacity-agenda); font-size: var(--smart-scheduler-event-time-font-size-agenda); font-weight: var(--smart-scheduler-event-time-font-weight-agenda) } .smart-scheduler-drag-feedback[view-type=agenda] .smart-scheduler-event, .smart-scheduler-drag-feedback[view-type=agenda] .smart-scheduler-event-content>div { padding: var(--smart-scheduler-event-padding-agenda) } .smart-scheduler-drag-feedback[view-type=agenda][status] .smart-scheduler-event-content:before { content: initial } .smart-scheduler-drag-feedback:not([view-type^=timeline]) { width: var(--smart-scheduler-event-size) } .smart-scheduler-drag-feedback:not([view-type^=timeline]) .smart-scheduler-event-content>div { padding: var(--smart-scheduler-event-padding-basic) } .smart-scheduler-drag-feedback[view-type^=timeline] .smart-scheduler-event-content>div { padding: var(--smart-scheduler-event-padding-timeline) } .smart-scheduler-drag-feedback[mobile]:not([view-type^=timeline]) { min-width: var(--smart-scheduler-event-size-timeline) } .smart-scheduler-drag-feedback[exception] .smart-scheduler-event-content, .smart-scheduler-drag-feedback[repeating] .smart-scheduler-event-content { grid-template-columns: minmax(auto, 1fr) var(--smart-scheduler-event-icon-size) } .smart-scheduler-drag-feedback:not([repeating]) .smart-scheduler-event-content:not([single-line])>div { grid-column: 1/span 2 } .smart-scheduler-drag-feedback[repeating] .smart-scheduler-event-content:after { content: var(--smart-icon-spin); width: var(--smart-scheduler-event-icon-size); position: absolute; display: flex; justify-content: center; align-items: center; top: 0; right: 0; font-family: var(--smart-font-family-icon); font-size: var(--smart-font-size); padding: var(--smart-scheduler-event-content-padding); box-sizing: border-box; line-height: 1rem } .smart-scheduler-drag-feedback[repeating] .smart-scheduler-event-content[single-line] { grid-template-columns: repeat(2, auto) var(--smart-scheduler-event-icon-size) } .smart-scheduler-drag-feedback[repeating][exception] .smart-scheduler-event-content:after { content: var(--smart-icon-attention-circled) } .smart-scheduler-drag-feedback[right-to-left] { direction: rtl } .smart-scheduler-drag-feedback[right-to-left]:not([view-type=agenda])[status] .smart-scheduler-event-content { padding-left: initial; padding-right: calc(var(--smart-scheduler-status-size) + var(--smart-scheduler-status-padding)) } .smart-scheduler-drag-feedback[right-to-left][repeating] .smart-scheduler-event-content:after { right: initial; left: 0 } .smart-dragging-disabled { cursor: no-drop } .smart-notification-panel { width: auto; height: auto; display: inline-block; contain: content; max-height: 100px } .smart-notification-panel:focus { border-color: var(--smart-outline) } .smart-notification-panel.smart-container, .smart-notification-panel>.smart-container { padding: var(--smart-editor-label-padding); overflow: auto; max-height: inherit } .smart-notification-panel .smart-notification-container { display: flex; width: 100%; flex-direction: column } .smart-notification-panel .smart-notification-container:empty { display: none } .smart-notification-panel .smart-notification-item, .smart-notification-panel .smart-notification-placeholder { -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; user-select: none } .smart-notification-panel .smart-notification-item { display: inline-grid; grid-template-columns: repeat(4, minmax(0, 1fr)) var(--smart-editor-height); grid-column-gap: 10px; align-items: center; padding: 0 0 var(--smart-editor-label-padding); justify-items: center } .smart-notification-panel .smart-notification-item .smart-input { width: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; background: var(--smart-surface); color: var(--smart-surface-color); position: relative; padding: var(--smart-editor-label-padding); height: var(--smart-editor-height); border-top-left-radius: var(--smart-border-top-left-radius); border-bottom-right-radius: var(--smart-border-bottom-right-radius); display: inline-flex; align-items: center; cursor: pointer; font-family: var(--smart-font-family); font-size: var(--smart-font-size); border: var(--smart-border-width) solid transparent } .smart-notification-panel .smart-notification-item .smart-input[interval]::after, .smart-notification-panel .smart-notification-item .smart-input[interval]::before, .smart-notification-panel .smart-notification-item .smart-input[type]::after { content: var(--smart-icon-arrow-down); display: flex; overflow: hidden; cursor: pointer; font-family: var(--smart-font-family-icon); justify-content: center; align-items: center; font-size: var(--smart-arrow-size); outline: 0; width: var(--smart-editor-addon-width); position: absolute; top: 1px; right: -1px; height: 100%; box-sizing: border-box } .smart-notification-panel .smart-notification-item .smart-input[interval]::before { content: var(--smart-icon-arrow-up); top: 0; height: 50%; border-bottom: var(--smart-border-width) solid transparent } .smart-notification-panel .smart-notification-item .smart-input[interval]::after { content: var(--smart-icon-arrow-down); bottom: 0; top: initial; height: 50% } .smart-notification-panel .smart-notification-item .smart-button[delete] { width: var(--smart-editor-height); height: var(--smart-editor-height); box-sizing: border-box; display: flex; align-items: center; justify-content: center; opacity: .25; font-size: 16px; cursor: pointer; position: relative; border-radius: 50%; outline: 0 } .smart-notification-panel .smart-notification-item .smart-button[delete]:after { content: var(--smart-icon-close); display: flex; justify-content: center; align-items: center; width: 100%; height: 0; cursor: pointer; font-size: var(--smart-font-size); font-family: var(--smart-font-family-icon) } .smart-notification-panel .smart-notification-placeholder, .smart-notification-panel .smart-notification-placeholder .smart-input { outline: 0; align-items: center; cursor: pointer; font-family: var(--smart-font-family); font-size: var(--smart-font-size); display: inline-flex } .smart-notification-panel .smart-notification-item .smart-button[delete]:hover { opacity: .6 } .smart-notification-panel .smart-notification-item .smart-button[delete]:active { opacity: 1 } .smart-notification-panel .smart-notification-item .smart-button[delete]:focus, .smart-notification-panel .smart-notification-item .smart-input:focus { box-shadow: 0 0 0 1px var(--smart-outline) } .smart-notification-panel .smart-notification-placeholder { border-bottom: var(--smart-border-width) solid var(--smart-primary); color: var(--smart-primary) } .smart-notification-panel .smart-notification-placeholder .smart-input { border: var(--smart-border-width) solid transparent } .smart-notification-panel .smart-notification-placeholder:hover { color: var(--smart-ui-state-color-hover) } .smart-notification-panel .smart-notification-editor { position: absolute; background: var(--smart-background); color: var(--smart-background-color) } .smart-notification-panel label { display: inline-flex; align-items: center; justify-content: center } .smart-notification-panel[right-to-left] .smart-notification-item .smart-input[interval] { padding-left: calc(var(--smart-editor-addon-width) + var(--smart-editor-label-padding)) } .smart-notification-panel[right-to-left] .smart-notification-item .smart-input[interval]::after, .smart-notification-panel[right-to-left] .smart-notification-item .smart-input[interval]::before, .smart-notification-panel[right-to-left] .smart-notification-item .smart-input[type]::after { right: initial; left: -1px } .smart-scheduler-loading-container .smart-loader-label { position: absolute; top: 50%; left: 50%; z-index: 99; transform: translate(-50%, -50%); margin-top: calc(5px + var(--smart-loader-size)); margin-left: 5px } .smart-scheduler-loader { margin: inherit; display: block; position: absolute; top: 50%; left: 50%; z-index: 99; transform: translate(-50%, -50%); opacity: .85; text-align: left; border: 6px solid rgba(43, 51, 63, .1); box-sizing: border-box; background-clip: padding-box; border-radius: 50%; width: calc(var(--smart-loader-size) + 10px); height: calc(var(--smart-loader-size) + 10px) } .smart-scheduler-loader:after, .smart-scheduler-loader:before { content: ""; position: absolute; margin: -6px; box-sizing: inherit; width: inherit; height: inherit; border-radius: inherit; opacity: 1; border: inherit inherit transparent; border-width: 6px; animation: smart-loader-spin 1.1s cubic-bezier(.6, .2, 0, .8) infinite, smart-loader-spin-fade 1.1s linear infinite } .smart-color-input-drop-down-menu.smart-scheduler-color-input .default-samples-container div { position: relative; border-radius: 50%; border: initial; transform: scale(.95) } .smart-color-input-drop-down-menu.smart-scheduler-color-input .default-samples-container div.selected { transform: scale(1) } .smart-color-input-drop-down-menu.smart-scheduler-color-input .default-samples-container div.selected:not(.no-color):after { content: var(--smart-icon-check); width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: flex; justify-content: center; align-items: center; font-family: var(--smart-font-family-icon); color: var(--smart-secondary-color); border-radius: inherit } .smart-scheduler-color-input { --smart-input-drop-down-menu-width: auto } .drawContainer, .smart-arrow, .smart-container { height: 100%; width: 100% } .smart-container { box-sizing: border-box; font-family: inherit; font-size: inherit; display: block; outline: 0; margin: 0; padding: 0 } .smart-container * { box-sizing: border-box } .smart-drop-down, .smart-popup { position: absolute; box-sizing: border-box; margin: var(--smart-editor-drop-down-vertical-offset) 0; z-index: var(--smart-editor-drop-down-z-index); list-style-type: none } @font-face { font-family: smart-icons; src: 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"); font-weight: 400; font-style: normal } .smart-icons { font-family: smart-icons; font-weight: 400; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-smoothing: antialiased } .smart-arrow { background-position: center; background-repeat: no-repeat; background-size: 1em 1em } .smart-arrow-down:after, .smart-arrow-left-first:after, .smart-arrow-left:after, .smart-arrow-right-last:after, .smart-arrow-right:after, .smart-arrow-up:after { width: 100%; height: 100%; font-family: var(--smart-font-family-icon); font-style: normal; font-weight: 400; font-size: var(--smart-arrow-size); color: inherit; text-decoration: inherit; font-variant: normal; text-transform: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; position: relative } .smart-arrow-up:after { content: var(--smart-icon-arrow-up); top: -1px } .smart-arrow-down:after { content: var(--smart-icon-arrow-down) } .smart-arrow-left:after { content: var(--smart-icon-arrow-left) } .smart-arrow-left-first:after { content: var(--smart-icon-first-page) } .smart-arrow-right-last:after { content: var(--smart-icon-last-page) } .smart-arrow-right:after { content: var(--smart-icon-arrow-right) } .drawContainer { position: relative } .smart-ripple { display: block; position: absolute; border-radius: 50%; transform: scale(0); pointer-events: none; animation: ripple .35s linear; border: none; opacity: .5 } .smart-ripple.smart-animate { animation: ripple .65s linear; position: absolute } @keyframes ripple { 100% { opacity: 0; transform: scale(2.5) } } .smart-overlay { pointer-events: none } .smart-unselectable { -webkit-user-select: none; -ms-user-select: none; -moz-user-select: none } .smart-hidden { display: none !important } .smart-visibility-hidden { visibility: hidden !important } .smart-element-init { visibility: hidden } .smart-element-ready { overflow: hidden } .smart-shown { display: block } .smart-resize-trigger { position: absolute; left: 0; top: 0; transition: 0s } .smart-resize-trigger-shrink { position: absolute; left: 0; top: 0; transition: 0s; width: 200%; height: 200% } .smart-resize-trigger-container { display: block; position: relative; top: -100%; left: 0; height: 100%; width: 100%; min-height: 1px; overflow: hidden; pointer-events: none; z-index: -1; visibility: hidden } .smart-list-menu-view.smart-drop-down-repositioned .smart-loader, smart-card-view .smart-loader, smart-grid .smart-loader, smart-list-box .smart-loader, smart-list-menu .smart-loader, smart-table .smart-loader, smart-tree .smart-loader { margin: inherit; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: .85; text-align: left; border: 6px solid rgba(43, 51, 63, .1); box-sizing: border-box; background-clip: padding-box; border-radius: 50%; z-index: 10; width: calc(var(--smart-loader-size) + 10px); height: calc(var(--smart-loader-size) + 10px) } .smart-list-menu-view.smart-drop-down-repositioned .smart-loader:after, .smart-list-menu-view.smart-drop-down-repositioned .smart-loader:before, smart-card-view .smart-loader:after, smart-card-view .smart-loader:before, smart-grid .smart-loader:after, smart-grid .smart-loader:before, smart-list-box .smart-loader:after, smart-list-box .smart-loader:before, smart-list-menu .smart-loader:after, smart-list-menu .smart-loader:before, smart-table .smart-loader:after, smart-table .smart-loader:before, smart-tree .smart-loader:after, smart-tree .smart-loader:before { content: ""; position: absolute; margin: -6px; box-sizing: inherit; width: inherit; height: inherit; border-radius: inherit; opacity: 1; border: 6px solid transparent; animation: smart-loader-spin 1.1s cubic-bezier(.6, .2, 0, .8) infinite, smart-loader-spin-fade 1.1s linear infinite } .smart-list-menu-view.smart-drop-down-repositioned .smart-loader.smart-hidden, smart-card-view .smart-loader.smart-hidden, smart-grid .smart-loader.smart-hidden, smart-list-box .smart-loader.smart-hidden, smart-list-menu .smart-loader.smart-hidden, smart-table .smart-loader.smart-hidden, smart-tree .smart-loader.smart-hidden { display: none } .smart-list-menu-view.smart-drop-down-repositioned[loading-indicator-position=top] .smart-loader, .smart-list-menu-view.smart-drop-down-repositioned[loading-indicator-position=bottom] .smart-loader, smart-grid[loading-indicator-position=top] .smart-loader, smart-grid[loading-indicator-position=bottom] .smart-loader, smart-list-box[loading-indicator-position=top] .smart-loader, smart-list-box[loading-indicator-position=bottom] .smart-loader, smart-list-menu[loading-indicator-position=top] .smart-loader, smart-list-menu[loading-indicator-position=bottom] .smart-loader, smart-tree[loading-indicator-position=top] .smart-loader, smart-tree[loading-indicator-position=bottom] .smart-loader { width: var(--smart-loader-size); height: var(--smart-loader-size); left: 20% } .smart-list-menu-view.smart-drop-down-repositioned[loading-indicator-position=top] .smart-loader-container, .smart-list-menu-view.smart-drop-down-repositioned[loading-indicator-position=bottom] .smart-loader-container, smart-grid[loading-indicator-position=top] .smart-loader-container, smart-grid[loading-indicator-position=bottom] .smart-loader-container, smart-list-box[loading-indicator-position=top] .smart-loader-container, smart-list-box[loading-indicator-position=bottom] .smart-loader-container, smart-list-menu[loading-indicator-position=top] .smart-loader-container, smart-list-menu[loading-indicator-position=bottom] .smart-loader-container, smart-tree[loading-indicator-position=top] .smart-loader-container, smart-tree[loading-indicator-position=bottom] .smart-loader-container { display: block; position: relative; width: 100%; height: 10%; background-color: #F2F2F2; overflow: hidden; animation: smart-loader-container-pop-up-down .3s linear } .smart-list-menu-view.smart-drop-down-repositioned[loading-indicator-position=top] .smart-loader-container.smart-hidden, .smart-list-menu-view.smart-drop-down-repositioned[loading-indicator-position=bottom] .smart-loader-container.smart-hidden, smart-grid[loading-indicator-position=top] .smart-loader-container.smart-hidden, smart-grid[loading-indicator-position=bottom] .smart-loader-container.smart-hidden, smart-list-box[loading-indicator-position=top] .smart-loader-container.smart-hidden, smart-list-box[loading-indicator-position=bottom] .smart-loader-container.smart-hidden, smart-list-menu[loading-indicator-position=top] .smart-loader-container.smart-hidden, smart-list-menu[loading-indicator-position=bottom] .smart-loader-container.smart-hidden, smart-tree[loading-indicator-position=top] .smart-loader-container.smart-hidden, smart-tree[loading-indicator-position=bottom] .smart-loader-container.smart-hidden { display: none } .smart-list-menu-view.smart-drop-down-repositioned[loading-indicator-position=top] .smart-loader-label, .smart-list-menu-view.smart-drop-down-repositioned[loading-indicator-position=bottom] .smart-loader-label, smart-grid[loading-indicator-position=top] .smart-loader-label, smart-grid[loading-indicator-position=bottom] .smart-loader-label, smart-list-box[loading-indicator-position=top] .smart-loader-label, smart-list-box[loading-indicator-position=bottom] .smart-loader-label, smart-list-menu[loading-indicator-position=top] .smart-loader-label, smart-list-menu[loading-indicator-position=bottom] .smart-loader-label, smart-tree[loading-indicator-position=top] .smart-loader-label, smart-tree[loading-indicator-position=bottom] .smart-loader-label { position: absolute; display: block; top: 50%; transform: translate(-50%, -50%); left: 60%; font-family: inherit; font-size: inherit; vertical-align: middle; white-space: nowrap } .smart-list-menu-view.smart-drop-down-repositioned[loading-indicator-position=top] .smart-loader-container, smart-grid[loading-indicator-position=top] .smart-loader-container, smart-list-box[loading-indicator-position=top] .smart-loader-container, smart-list-menu[loading-indicator-position=top] .smart-loader-container, smart-tree[loading-indicator-position=top] .smart-loader-container { top: 0; position: absolute; animation: smart-loader-container-pop-up-top .3s linear } .smart-list-menu-view.smart-drop-down-repositioned[loading-indicator-position=bottom] .smart-loader-container, smart-grid[loading-indicator-position=bottom] .smart-loader-container, smart-list-box[loading-indicator-position=bottom] .smart-loader-container, smart-list-menu[loading-indicator-position=bottom] .smart-loader-container, smart-tree[loading-indicator-position=bottom] .smart-loader-container { top: -10% } .smart-list-menu-view.smart-drop-down-repositioned[loading-indicator-position=center] .smart-loader, smart-grid[loading-indicator-position=center] .smart-loader, smart-list-box[loading-indicator-position=center] .smart-loader, smart-list-menu[loading-indicator-position=center] .smart-loader, smart-tree[loading-indicator-position=center] .smart-loader { width: calc(var(--smart-loader-size) + 10px); height: calc(var(--smart-loader-size) + 10px) } smart-grid[disabled] .smart-loader:after, smart-grid[disabled] .smart-loader:before, smart-list-box[disabled] .smart-loader:after, smart-list-box[disabled] .smart-loader:before, smart-list-menu[disabled] .smart-loader:after, smart-list-menu[disabled] .smart-loader:before, smart-tree[disabled] .smart-loader:after, smart-tree[disabled] .smart-loader:before { animation: none } @keyframes smart-loader-container-pop-up-down { 0% { top: 0 } 20% { top: -2% } 35% { top: -6% } 60% { top: -8% } 100% { top: -10% } } @keyframes smart-loader-container-pop-up-top { 0% { top: -10% } 20% { top: -8% } 35% { top: -6% } 60% { top: -2% } 100% { top: 0 } } @keyframes smart-loader-spin { 100% { transform: rotate(360deg) } } @keyframes smart-loader-spin-fade { 0%, 100%, 20%, 60% { border-top-color: #7A7A7A } 35% { border-top-color: transparent } } .smart-right-to-left { direction: rtl } .smart-micro { font-size: 9px } .smart-caps { text-transform: uppercase; letter-spacing: .1em } .smart-strong { font-weight: 500 } .smart-truncate { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .smart-flex-auto { flex: 1 1 auto; display: flex; min-width: 0; min-height: 0 } .smart-flex { display: flex; align-items: center } .smart-quiet { opacity: .75 } .smart-dragging, .smart-dragging * { cursor: move !important }