/* ========================================================================== Smart UI Theme CSS Variables ========================================================================== Purpose: Central definition of all customizable design tokens Usage: :root + dark theme variant + component-specific overrides Convention: --jqx-{scope?}-{property-or-role}[-state-or-modifier] ========================================================================== */ /* CSS variables */ :root { /* ── Brand / Semantic Colors ──────────────────────────────────────── */ --jqx-primary-rgb: 0, 78, 140; --jqx-primary: rgb(var(--jqx-primary-rgb)); --jqx-primary-color: #ffffff; --jqx-secondary-rgb: 45, 45, 48; --jqx-secondary: rgb(var(--jqx-secondary-rgb)); --jqx-secondary-color: #ffffff; --jqx-error-rgb: 176, 0, 32; --jqx-error: rgb(var(--jqx-error-rgb)); --jqx-error-color: #ffffff; --jqx-success-rgb: 139, 195, 74; --jqx-success: rgb(var(--jqx-success-rgb)); --jqx-success-color: #ffffff; --jqx-info-rgb: 92, 192, 222; --jqx-info: rgb(var(--jqx-info-rgb)); --jqx-info-color: #ffffff; --jqx-warning-rgb: 240, 173, 78; --jqx-warning: rgb(var(--jqx-warning-rgb)); --jqx-warning-color: #ffffff; /* ── Application Surfaces ─────────────────────────────────────────── */ --jqx-white: #ffffff; --jqx-black: #000000; --jqx-base: #dfe5ec; --jqx-base-50: #f8fafb; --jqx-base-100: #f3f6f9; --jqx-base-200: #e3eaf2; --jqx-base-300: #dfe5ec; --jqx-base-400: #dbe0e6; --jqx-base-500: #d7dbe0; --jqx-base-600: #c6cbd2; --jqx-base-700: #74787e; --jqx-base-800: #45494f; --jqx-base-900: #1b1d20; --jqx-light-rgb: 255, 255, 255; --jqx-light: rgb(var(--jqx-light-rgb)); --jqx-light-color: #222222; --jqx-dark-rgb: 34, 34, 34; --jqx-dark: rgb(var(--jqx-dark-rgb)); --jqx-dark-color: #ffffff; --jqx-background: #fefefe; --jqx-background-color: #5A5A5A; --jqx-surface: #f8fafb; --jqx-base-background-color: var(--jqx-base-50); --jqx-base-background-color-dark: var(--jqx-base-900); --jqx-body-background-color: var(--jqx-base-100); --jqx-outline-color: var(--jqx-primary); --jqx-surface-color: #323232; /* ── Interaction / State Colors ───────────────────────────────────── */ --jqx-disabled: #CCCCCC; --jqx-disabled-color: #555555; --jqx-ui-state-hover: var(--jqx-base-200); --jqx-ui-state-color-hover: #333; --jqx-ui-state-border-hover: var(--jqx-ui-state-hover); --jqx-ui-state-active: var(--jqx-primary); --jqx-ui-state-color-active: var(--jqx-primary-color); --jqx-ui-state-border-active: var(--jqx-primary); --jqx-ui-state-focus: rgba(var(--jqx-primary-rgb), .1); --jqx-ui-state-color-focus: #333; --jqx-ui-state-border-focus: var(--jqx-ui-state-focus); --jqx-ui-state-selected: rgba(var(--jqx-primary-rgb), .1); --jqx-ui-state-color-selected: var(--jqx-primary); --jqx-ui-state-border-selected: rgba(var(--jqx-primary-rgb), .1); /* ── Borders & Shape ───────────────────────────────────────────── */ --jqx-item-border-width: 1px; --jqx-item-border-radius: var(--jqx-border-radius); --jqx-item-border-top-left-radius: var(--jqx-border-radius); --jqx-item-border-top-right-radius: var(--jqx-border-radius); --jqx-item-border-bottom-left-radius: var(--jqx-border-radius); --jqx-item-border-bottom-right-radius: var(--jqx-border-radius); --jqx-border-width: 1px; --jqx-border-radius: 4px; --jqx-border-radius-0: 0; --jqx-border-radius-1: 0.25rem; --jqx-border-radius-2: 0.5rem; --jqx-border-radius-3: 0.75rem; --jqx-border-radius-4: 1rem; --jqx-border-radius-5: 1.25rem; --jqx-border-radius-6: 1.5rem; --jqx-border-radius-7: 1.75rem; --jqx-border-radius-8: 2rem; --jqx-border-radius-9: 2.25rem; --jqx-border-radius-10: 2.5rem; --jqx-border-top-left-radius: var(--jqx-border-radius); --jqx-border-top-right-radius: var(--jqx-border-radius); --jqx-border-bottom-left-radius: var(--jqx-border-radius); --jqx-border-bottom-right-radius: var(--jqx-border-radius); --jqx-border: #E0E0E0; --jqx-border-rgb: 244, 224, 224; --jqx-outline: #b2b2b2; --jqx-border-normal: var(--jqx-base-400); --jqx-border-hover: var(--jqx-base-700); --jqx-border-focus: var(--jqx-primary); --jqx-border-disabled: var(--jqx-base-400); /* ── Typography & Icons ───────────────────────────────────────────── */ --jqx-text-title-color: var(--jqx-base-900); --jqx-text-color: var(--jqx-base-900); --jqx-text-secondary-color: var(--jqx-base-800); /* tertiary text: base-700 (#74787e) read 4.24:1 on base-50 and 4.44:1 on white, under the 4.5:1 WCAG asks of body text; this is base-700 a tenth of the way to base-900, 4.8:1 and 5.1:1 */ --jqx-text-tertiary-color: #6b6f75; --jqx-text-disabled-color: var(--jqx-base-600); --jqx-text-contrast-color: var(--jqx-white); --jqx-font-size: 14px; --jqx-font-weight: inherit; --jqx-font-style: inherit; --jqx-font-family: Roboto, "Helvetica Neue", sans-serif; --jqx-font-family-icon: jqx-icons; --jqx-font-family-icon-src: local('../font/jqx-icons'), url('font/jqx-icons.woff2') format('woff2'), url('font/jqx-icons.woff') format('woff'), url('font/jqx-icons.ttf') format('truetype'), url('font/jqx-icons.eot') format('embedded-opentype'); /* ── Global Component Defaults ─────────────────────────────── */ --jqx-tick-color: var(--jqx-border); /* tick color for jqxTank, jqxSlider and jqxGauge */ --jqx-tick-label-color: var(--jqx-background-color); /* tick label color for jqxTank, jqxSlider and jqxGauge */ --jqx-box-height: 450px; /* default height for Dialog, Gauge, Accordion, Tabs, Tree, Array */ --jqx-box-width: 450px; /* default width for Dialog, Gauge, Accordion, Tabs, Tree, Array */ --jqx-bar-height: 48px; /* default height for headers and footers */ --jqx-bar-width: 400px; /* default width for headers and footers */ --jqx-editor-selection: var(--jqx-primary); /* default selection bg color */ --jqx-editor-selection-color: var(--jqx-primary-color); /* default selection color */ --jqx-editor-height: 30px; /* default height for editors */ --jqx-editor-width: 250px; /* default width for editors */ --jqx-editor-drop-down-width: 300px; /* default width for editors drop-down */ --jqx-editor-drop-down-height: 400px; /* default height for editors drop-down */ --jqx-editor-drop-down-padding-size: 3px; /* jqxDropDownList, jqxComboBox drop down default height */ --jqx-editor-drop-down-max-width: 800px; /* jqxDropDownList, jqxComboBox, jqxTextBox popup max width */ --jqx-editor-drop-down-min-width: 100px; /* jqxDropDownList, jqxComboBox, jqxTextBox popup min width */ --jqx-editor-drop-down-max-height: 400px; /* jqxDropDownList, jqxComboBox, jqxTextBox popup max height */ --jqx-editor-drop-down-min-height: 50px; /* jqxDropDownList, jqxComboBox, jqxTextBox popup min height */ --jqx-editor-drop-down-resize-bar-height: 15px; /* jqxDropDownList, jqxComboBox, jqxTextBox popup resize bar default height */ --jqx-editor-drop-down-vertical-offset: 5px; /* Vertical offset of editor drop downs */ --jqx-editor-drop-down-z-index: 9999; /* z-index of editor drop downs */ --jqx-editor-label-padding: 4px; /* default padding for inputs */ --jqx-editor-addon-width: 27px; /* default width for spin buttons, dropdown buttons. */ --jqx-column-icon-size: 30px; /* default size of column icons */ /* ── Icon Glyphs (unicode values) ─────────────────────────────────── */ --jqx-icon-table: '\e800'; /* Code of table icon */ --jqx-icon-star: '\e801'; /* Code of star icon */ --jqx-icon-star-empty: '\e802'; /* Code of empty star icon */ --jqx-icon-plus: '\e803'; /* Code of plus icon */ --jqx-icon-minus: '\e804'; /* Code of minus icon */ --jqx-icon-attention-circled: '\e805'; /* Code of circled attention icon */ --jqx-icon-align-left: '\e806'; /* Code of align left icon */ --jqx-icon-align-right: '\e807'; /* Code of align right icon */ --jqx-icon-align-center: '\e808'; /* Code of align center icon */ --jqx-icon-align-justify: '\e813'; /* Code of align justify icon */ --jqx-icon-reload: '\e809'; /* Code of reload icon */ --jqx-icon-cloud: '\e84d'; /* Code of cloud icon */ --jqx-icon-cancel: '\e80d'; /* Code of cancel icon */ --jqx-icon-close: '\e80d'; /* Code of close icon */ --jqx-icon-cancel-circled: '\e80e'; /* Code of Close icon Alt */ --jqx-icon-cancel-alt: '\E849'; /* Code of Close icon Alt */ --jqx-icon-arrow-alt: '\F105'; /* Code of circled cancel icon */ --jqx-icon-plus-circled: '\e810'; /* Code of circled plus icon */ --jqx-icon-power: '\e811'; /* Code of power icon */ --jqx-icon-minus-circled: '\e814'; /* Code of circled minus icon */ --jqx-icon-arrow-up-alt: '\e817'; /* Code of alternative up arrow icon */ --jqx-icon-radio: '\e818'; /* Code of radio icon */ --jqx-icon-refresh: '\e819'; /* Code of refresh icon */ --jqx-icon-chart: '\e81a'; /* Code of chart icon */ --jqx-icon-check-squared: '\e81b'; /* Code of squared check icon */ --jqx-icon-resize-full: '\e81c'; /* Code of full resize icon */ --jqx-icon-resize-small: '\e81d'; /* Code of small resize icon */ --jqx-icon-resize-vertical: '\e80c'; /* Code of vertical resize icon */ --jqx-icon-resize-horizontal: '\e80f'; /* Code of horizontal resize icon */ --jqx-icon-lock: '\e821'; /* Code of lock icon */ --jqx-icon-sort: '\e823'; /* Code of sort icon */ --jqx-icon-delete: '\e826'; /* Code of delete icon */ --jqx-icon-search: '\e828'; /* Code of search icon */ --jqx-icon-calendar: '\e829'; /* Code of calendar icon */ --jqx-icon-edit: '\e82a'; /* Code of edit icon */ --jqx-icon-popup: '\e82c'; /* Code of popup icon */ --jqx-icon-lock-open: '\e82e'; /* Code of open lock icon */ --jqx-icon-add-filter: '\e82f'; /* Code of add filter icon */ --jqx-icon-block: '\e832'; /* Code of block icon */ --jqx-icon-settings: '\e833'; /* Code of settings icon */ --jqx-icon-duplicate: '\e834'; /* Code of duplicate icon */ --jqx-icon-copy-record: '\e835'; /* Code of copy record icon */ --jqx-icon-download-alt: '\e836'; /* Code of alternative download icon */ --jqx-icon-clock: '\e837'; /* Code of clock icon */ --jqx-icon-attention: '\e838'; /* Code of attention icon */ --jqx-icon-help-circled: '\e839'; /* Code of circled help icon */ --jqx-icon-mail: '\e83c'; /* Code of mail icon */ --jqx-icon-up: '\e83f'; /* Code of up icon */ --jqx-icon-first-page: '\e900'; /* Code of first page icon */ --jqx-icon-arrow-down: '\e901'; /* Code of down arrow icon */ --jqx-icon-arrow-left: '\e902'; /* Code of left arrow icon */ --jqx-icon-arrow-right: '\e903'; /* Code of right arrow icon */ --jqx-icon-arrow-up: '\e904'; /* Code of up arrow icon */ --jqx-icon-arrow-down-filled: '\e812'; /* Code of filled down arrow icon */ --jqx-icon-arrow-left-filled: '\e816'; /* Code of filled left arrow icon */ --jqx-icon-arrow-right-filled: '\e81e'; /* Code of filled right arrow icon */ --jqx-icon-arrow-up-filled: '\e815'; /* Code of filled up arrow icon */ --jqx-icon-last-page: '\e905'; /* Code of last page icon */ --jqx-icon-more-horiz: '\e906'; /* Code of more icon */ --jqx-icon-skip-next: '\e907'; /* Code of skip next icon */ --jqx-icon-check: '\e908'; /* Code of check icon */ --jqx-icon-mode-edit: '\e909'; /* Code of edit mode icon */ --jqx-icon-replay: '\e90c'; /* Code of replay icon */ --jqx-icon-visibility: '\e90d'; /* Code of visibility icon */ --jqx-icon-visibility-off: '\e90e'; /* Code of visibility off icon */ --jqx-icon-link: '\e831'; /* Code of link icon */ --jqx-icon-unlink: '\f127'; /* Code of link icon */ --jqx-icon-link-ext: '\f08e'; /* Code of link icon */ --jqx-icon-check-empty: '\f096'; /* Code of empty check icon */ --jqx-icon-filter: '\f0b0'; /* Code of filter icon */ --jqx-icon-resize-full-alt: '\f0b2'; /* Code of full resize alternative icon */ --jqx-icon-menu: '\f0c9'; /* Code of menu icon */ --jqx-icon-sort-1: '\f0dc'; /* Code of sort alternative icon */ --jqx-icon-paste: '\f0ea'; /* Code of paste icon */ --jqx-icon-circle-empty: '\f10c'; /* Code of empty circle icon */ --jqx-icon-circle: '\f111'; /* Code of circle icon */ --jqx-icon-ellipsis: '\f141'; /* Code of ellipsis icon */ --jqx-icon-minus-squared: '\f146'; /* Code of squared minus icon */ --jqx-icon-ok-squared: '\f14a'; /* Code of squared ok icon */ --jqx-icon-sort-name-up: '\f15d'; /* Code of sort name up icon */ --jqx-icon-sort-name-down: '\f15e'; /* Code of sort name down icon */ --jqx-icon-sort-alt-up: '\f160'; /* Code of sort up alternative icon */ --jqx-icon-sort-alt-down: '\f161'; /* Code of sort down alternative icon */ --jqx-icon-sort-number-up: '\f162'; /* Code of sort number up icon */ --jqx-icon-sort-number-down: '\f163'; /* Code of sort number down icon */ --jqx-icon-dot-circled: '\f192'; /* Code of circled dot icon */ --jqx-icon-toggle-off: '\f204'; /* Code of toggle off icon */ --jqx-icon-toggle-on: '\f205'; /* Code of toggle on icon */ --jqx-icon-group: '\f247'; /* Code of group icon */ --jqx-icon-ungroup: '\f248'; /* Code of ungroup icon */ --jqx-icon-window-maximize: '\f2d0'; /* Code of maximize window icon */ --jqx-icon-window-minimize: '\f2d1'; /* Code of minimize window icon */ --jqx-icon-window-restore: '\f2d2'; /* Code of restore window icon */ --jqx-icon-window-pin-alt: '\e82d'; /* Code of pin window alternative icon */ --jqx-icon-window-pin: '\e80a'; /* Code of window pin icon */ --jqx-icon-docs: '\f0c5'; /* Code of docs icon */ --jqx-icon-pdf: '\f1c1'; /* Code of pdf icon */ --jqx-icon-excel: '\f1C3'; /* Code of excel icon */ --jqx-icon-word: '\f1C2'; /* Code of word icon */ --jqx-icon-archive: '\f1C6'; /* Code of zip icon */ --jqx-icon-file: '\e845'; /* Code of file icon */ --jqx-icon-powerpoint: '\f1c4'; /* Code of powerpoint icon */ --jqx-icon-text: '\f0f6'; /* Code of text icon */ --jqx-icon-math: '\f01a'; /* Code of math icon */ --jqx-icon-spin: '\e80b'; /* Code of spin icon */ --jqx-icon-user: '\e81f'; /* Code of user icon */ --jqx-icon-font: '\f031'; /* Code of font icon */ --jqx-icon-fontsize: '\f088'; /* Code of fontsize icon */ --jqx-icon-contains: '\f063'; /* Code of contains icon */ --jqx-icon-starts_with: '\f064'; /* Code of starts with icon */ --jqx-icon-ends_with: '\f065'; /* Code of ends with icon */ --jqx-icon-does_not_contain: '\f066'; /* Code of does not contain icon */ --jqx-icon-equals: '\f52c'; /* Code of equals icon */ --jqx-icon-greater-than: '\f531'; /* Code of greater than icon */ --jqx-icon-greater-than-equal: '\f532'; /* Code of greater than or equal icon */ --jqx-icon-less-than: '\f536'; /* Code of less than icon */ --jqx-icon-less-than-equal: '\f537'; /* Code of less than or equal icon */ --jqx-icon-not-equal: '\f53e'; /* Code of not equal icon */ --jqx-icon-percentage: '\f541'; /* Code of percentage icon */ --jqx-icon-grip-vertical: '\f58e'; /* Code of grip icon */ --jqx-icon-between: '\f06a'; /* Code of between icon */ --jqx-icon-bold: '\e820'; /* Code of bold icon */ --jqx-icon-italic: '\e822'; /* Code of italic icon */ --jqx-icon-underline: '\f0cd'; /* Code of underline icon */ --jqx-icon-strike-through: '\f0cc'; /* Code of strike-through icon */ --jqx-icon-list-ordered: '\f0cb'; /* Code of list numbered icon */ --jqx-icon-list-unordered: '\f0ca'; /* Code of list bullet icon */ --jqx-icon-list-check: '\e89f'; /* Code of list check icon */ --jqx-icon-subscript: '\f12c'; /* Code of subscript icon */ --jqx-icon-superscript: '\f12b'; /* Code of superscript icon */ --jqx-icon-color-background: '\e830'; /* Code of bucket icon */ --jqx-icon-indent-right: '\e824'; /* Code of indent icon */ --jqx-icon-indent-left: '\e825'; /* Code of outdent icon */ --jqx-icon-image: '\e827'; /* Code of image icon */ --jqx-icon-case-lower: 'aa'; /* Code of lower case icon */ --jqx-icon-case-upper: 'AA'; /* Code of upper case icon */ --jqx-icon-print: '\e82b'; /* Code of print icon */ --jqx-icon-format-clear: 'T'; /* Code of clear format icon */ --jqx-icon-source-code: '\f121'; /* Code of source code icon */ --jqx-icon-split-mode: '\e83b'; /* Code of split mode icon */ --jqx-icon-cut: '\e83a'; /* Code of Cut icon */ --jqx-icon-video: '\f16a'; /* Code of YouTube video icon */ --jqx-icon-video-camera: '\e840'; /* Code of Bell icon */ --jqx-icon-bell: '\f0f3'; /* Code of video icon */ --jqx-icon-header: '\f1dc'; /* Code of Table Header */ --jqx-icon-row: '\f0db'; /* Code of Table Row icon */ --jqx-icon-row-before: '\f2d0'; /* Code of Table Row icon */ --jqx-icon-row-after: '\f2d0'; /* Code of Table Row icon */ --jqx-icon-row-delete: var(--jqx-icon-cancel-circled); /* Code of Table Row icon */ --jqx-icon-column: '\f0db'; /* Code of Table Column icon */ --jqx-icon-column-left: '\f2d0'; /* Code of Table Column left insert icon */ --jqx-icon-column-right: '\f2d0'; /* Code of Table Column right insert icon */ --jqx-icon-column-delete: var(--jqx-icon-cancel-circled); /* Code of Table Column delete icon */ --jqx-icon-vertical-align: '\f06a \e80c'; /* Code of Table Vertical Align icon */ --jqx-icon-styles: '\f1fc'; /* Code of Table Styles icon */ --jqx-icon-comment: '\F0E5'; /* Code of Comment icon */ --jqx-icon-card: '\E83E'; /* Code of Card icon */ --jqx-icon-tasks: '\F0AE'; /* Code of Tasks icon */ --jqx-icon-phone: '\E83D'; /* Code of Phone icon */ --jqx-icon-kanban: '\F181'; /* Code of Kanban icon */ --jqx-icon-table-alt: '\F0CE'; /* Code of Table icon */ --jqx-icon-zoom-in: '\E841'; /* Code of Zoom In icon */ --jqx-icon-zoom-out: '\E842'; /* Code of Zoom Out icon */ --jqx-icon-move: '\F047'; /* Code of Move icon */ --jqx-icon-home: '\E843'; /* Code of Home icon */ --jqx-icon-history: '\F1DA'; /* Code of History icon */ --jqx-icon-kanban-alt: '\e8a1'; /* Code of Kanban icon */ --jqx-icon-card-alt: '\e8a2'; /* Code of Card icon */ --jqx-icon-grid-alt: '\e8a3'; /* Code of Grid icon */ --jqx-icon-timeline: '\E8A4'; /* Code of timeline icon */ --jqx-icon-scheduler: '\E8A5'; /* Code of scheduler icon */ --jqx-icon-like: '\F164'; /* Code of like icon */ --jqx-icon-heart: '\E84E'; /* Code of heart icon */ --jqx-icon-flag: '\E850'; /* Code of flag icon */ --jqx-icon-music: '\E851'; /* Code of music */ /* ── Accordion ─────────────────────────────────── */ --jqx-accordion-animation-duration: 225ms; /* animation duration */ --jqx-accordion-default-width: var(--jqx-box-width); /* default width */ --jqx-accordion-default-height: var(--jqx-box-height); /* default height */ --jqx-accordion-expanded-content-height: 0px; /* Determines expanded content's height */ --jqx-accordion-expanded-content-local-height: 0px; /* The height of an expanded item content part. Calculated dynamically for each item. Used in all modes except 'singleFitHeight'. */ --jqx-accordion-item-header-height: var(--jqx-bar-height); /* Element's header height. Used in several calcilations related to items height. */ --jqx-accordion-item-expanded-offset: 20px; /* An offset below each expanded accordion item. */ /* ── Array ─────────────────────────────────── */ --jqx-array-default-width: var(--jqx-box-width); /* default width */ --jqx-array-default-height: var(--jqx-box-height); /* default height */ --jqx-array-element-gap: 3px; /* gap size */ /* ── Breadcrumb ─────────────────────────────────── */ --jqx-breadcrumb-default-width: 400px; /* default width */ --jqx-breadcrumb-default-height: auto; /* default height */ --jqx-breadcrumb-padding: 10px; /* Padding of jqx-breadcrumb and vertical offset between jqxBreadcrumb items */ --jqx-breadcrumb-drop-down-width: var(--jqx-editor-drop-down-width); /* Width of dropdown in minimized mode */ --jqx-breadcrumb-item-height: 40px; /* Height of items */ --jqx-breadcrumb-horizontal-offset: 10px; /* Horizontal offset between items */ /* ── Button ─────────────────────────────────── */ --jqx-button-text-transform: none; /* Controls the capitalization of button's text. Could be set as uppercase/lowercase/capitalize. */ --jqx-button-padding: 8px 16px; /* Sets button's paddings. */ --jqx-button-large-padding: 10px 16px; /* Sets large button's paddings. */ --jqx-button-large-font-size: 18px; /* Sets large button's font size. */ --jqx-button-small-padding: 5px 10px; /* Sets small button's paddings. */ --jqx-button-small-font-size: 12px; /* Sets small button's font size. */ --jqx-button-very-small-padding: 3px 5px; /* Sets very small button's paddings. */ --jqx-button-very-small-font-size: 10px; /* Sets very small button's font size. */ --jqx-button-flat-color: var(--jqx-background-color); /* The color of the flat button. */ --jqx-button-outlined-color: var(--jqx-background-color); /* The color of the outlined button. */ --jqx-button-outlined-border: var(--jqx-border); /* The border of the outlined button. */ /* ── Button Group ─────────────────────────────────── */ --jqx-button-group-default-width: auto; /* default width */ --jqx-button-group-default-height: auto; /* defuult height */ /* ── Calendar ─────────────────────────────────── */ --jqx-calendar-header-height: calc(0.75 * var(--jqx-bar-height)); /* default height for jqxCalendar's header section */ --jqx-calendar-footer-height: calc(0.75 * var(--jqx-bar-height)); /* default height for jqxCalendar's footer section */ --jqx-calendar-title-height: calc(1.25 * var(--jqx-bar-height)); /* default height for calendar's title. */ --jqx-calendar-cell-size: 30px; /* default size of calendar's cell. */ --jqx-calendar-cell-spacing: 4px; /* Defines calendar's cell spacing. */ --jqx-calendar-default-width: calc(50px + var(--jqx-calendar-cell-spacing) + 7 * (var(--jqx-calendar-cell-spacing) + var(--jqx-calendar-cell-size))); /* jqxCalendar default width */ --jqx-calendar-default-height: calc(var(--jqx-calendar-cell-spacing) + 7 * (var(--jqx-calendar-cell-spacing) + var(--jqx-calendar-cell-size)) + var(--jqx-calendar-header-height)); /* jqxCalendar default height */ --jqx-calendar-title-text-transform: initial; /* Controls the capitalization of the title text. */ --jqx-calendar-week-title-text-transform: uppercase; /* Controls the capitalization of the week title. */ --jqx-calendar-header-text-transform: uppercase; /* Controls the capitalization of the header text. */ --jqx-calendar-footer-text-transform: uppercase; /* Controls the capitalization of the footer text. */ --jqx-calendar-cell-border-top-right-radius: 15px; /* Defines cell's top-right border radius. */ --jqx-calendar-cell-border-top-left-radius: 15px; /* Defines cell's top-left border radius. */ --jqx-calendar-cell-border-bottom-left-radius: 15px; /* Defines cell's bottom-left border radius. */ --jqx-calendar-cell-border-bottom-right-radius: 15px; /* Defines cell's bottom-right border radius. */ --jqx-calendar-title-padding: 10px; /* Defines title's padding */ --jqx-calendar-important-date-background: var(--jqx-ui-state-hover); /* Defines title's padding */ --jqx-calendar-important-date-color: var(--jqx-ui-state-color-hover); /* Defines title's padding */ --jqx-calendar-important-date-border-color: var(--jqx-ui-state-border-hover); /* Defines title's padding */ --jqx-calendar-navigation-button-size: 30px; /* Sets the size for the navigation buttons */ /* ── Card View ─────────────────────────────────── */ --jqx-card-view-default-width: 1200px; /* default width of CardView. */ --jqx-card-view-default-height: 800px; /* default height of CardView. */ --jqx-card-view-header-height: 30px; /* Height of the CardView header */ --jqx-card-view-cover-height: var(--jqx-carousel-default-height); /* Height of CardView cover (carousel). */ --jqx-card-view-vertical-offset: 15px; /* Vertical offset of CardView. */ --jqx-card-view-column-min-width: 250px; /* Min width of CardView visual columns. */ --jqx-card-view-gap: 10px; /* Gap between CardView cards. */ --jqx-card-view-add-new-button-size: 60px; /* Size of the 'Add new record' (+) button. */ /* ── Carousel ─────────────────────────────────── */ --jqx-carousel-default-width: 600px; /* default width of the element */ --jqx-carousel-default-height: 200px; /* default height of the element */ --jqx-carousel-3d-mode-slide-width: 400px; /* default width of a slide in 3d mode */ --jqx-carousel-3d-mode-slide-height: 400px; /* default height of a slide in 3d mode */ --jqx-carousel-multiple-mode-slide-width: 200px; /* default width of a slide in multiple mode*/ /* ── Chart ─────────────────────────────────── */ --jqx-chart-default-width: 850px; /* default width of the element */ --jqx-chart-default-height: 500px; /* default height of the element */ /* ── CheckBox ─────────────────────────────────── */ --jqx-check-box-default-size: calc(1px + 1/2 * var(--jqx-editor-height)); /* default size for the check box used in jqxCheckBox and jqxListItem. */ /* ── Color Panel ─────────────────────────────────── */ --jqx-color-panel-default-width: auto; /* default width */ --jqx-color-panel-default-height: auto; /* default height */ --jqx-color-panel-palette-size: 300px; /* palette size */ --jqx-color-panel-grid-mode-item-size: 20px; /* item size */ --jqx-color-panel-grid-mode-column-count: 8; /* column count */ --jqx-color-panel-grid-mode-columns-gap: 1px; /* column gap size */ --jqx-color-panel-brightness: 0; /* brightness */ --jqx-color-panel-default-mode-sections-gap: 8px; /* gap size in default mode */ --jqx-color-panel-palette-width: var(--jqx-color-panel-palette-size); /* palette width */ --jqx-color-panel-palette-height: var(--jqx-color-panel-palette-size); /* palette height */ --jqx-color-panel-alpha-channel-color: white; /* Used as a default color for the Alpha Scale */ /* ── Color Picker ─────────────────────────────────── */ --jqx-color-picker-default-width: var(--jqx-editor-width); /* default width */ --jqx-color-picker-default-height: var(--jqx-editor-height); /* default height */ --jqx-color-picker-drop-down-width: auto; /* default width of dropdown */ --jqx-color-picker-drop-down-height: auto; /* default height of dropdown */ /* ── ComboBox ─────────────────────────────────── */ --jqx-combo-box-default-width: var(--jqx-editor-width); /* default width */ --jqx-combo-box-default-height: var(--jqx-editor-height); /* default height */ --jqx-combo-box-drop-down-width: auto; /* default width of dropdown */ --jqx-combo-box-drop-down-height: auto; /* default height of dropdown */ /* ── Chip ─────────────────────────────────── */ --jqx-chip-default-height: var(--jqx-editor-height); /* default height */ --jqx-chip-avatar-background: var(--jqx-secondary); /* avatar background color */ /* ── DataView - Common for CardView and Kanban ─────────────────────────────────── */ --jqx-data-view-padding: 10px; /* Padding of the CardView and Kanban */ --jqx-data-view-customize-panel-width: 320px; /* Width of the CardView and Kanban customize panel (drop down). */ --jqx-data-view-filter-panel-width: 550px; /* Width of the CardView and Kanban filter panel (drop down). */ --jqx-data-view-sort-panel-width: 470px; /* Width of the CardView and Kanban sort panel (drop down). */ --jqx-data-view-search-panel-width: 250px; /* Width of the CardView and Kanban search panel (drop down). */ /* ── Datetime Picker ─────────────────────────────────── */ --jqx-date-time-picker-default-width: var(--jqx-editor-width); /* jqxDateTimePicker default width */ --jqx-date-time-picker-default-height: var(--jqx-editor-height); /* jqxDateTimePicker default height */ --jqx-date-time-picker-header-opacity: 0.8; /* Opacity of header elements */ --jqx-date-time-picker-header-opacity-active: 1; /* Opacity of header elements when selected */ --jqx-date-time-picker-drop-down-width: var(--jqx-editor-drop-down-height); /* jqxDropDownList drop down width */ --jqx-date-time-picker-drop-down-height: auto; /* jqxDropDownList drop down height */ /* ── Docking Layout ─────────────────────────────────── */ --jqx-docking-layout-default-width: 1000px; /* default width */ --jqx-docking-layout-default-height: 800px; /* default height */ --jqx-docking-layout-feedback-background-secondary-size: 7px; /* The size of the arrows of the advanced snapping highlighters that show possible drop position of the dragged item. */ /* ── DropDownList ─────────────────────────────────── */ --jqx-drop-down-list-default-width: var(--jqx-editor-width); /* jqxDropDownList, jqxComboBox default width */ --jqx-drop-down-list-default-height: var(--jqx-editor-height); /* jqxDropDownList, jqxComboBox default height */ --jqx-drop-down-list-drop-down-width: initial; /* jqxDropDownList drop down width */ --jqx-drop-down-list-drop-down-height: auto; /* jqxDropDownList drop down height */ /* ── DropDownButton ─────────────────────────────────── */ --jqx-drop-down-button-default-width: auto; /* default width */ --jqx-drop-down-button-default-height: var(--jqx-editor-height); /* default height */ --jqx-drop-down-button-drop-down-width: var(--jqx-editor-drop-down-width); /* dropdown width */ --jqx-drop-down-button-drop-down-height: var(--jqx-editor-drop-down-height); /* drop downheight */ /* ── Editor ─────────────────────────────────── */ --jqx-editor-default-width: 100%; /* default width */ --jqx-editor-default-height: 600px; /* default height */ --jqx-editor-input-min-height: 100px; /* input min height */ --jqx-editor-padding: 15px; /* padding */ --jqx-editor-toolbar-item-margin: 5px; /* toolbar item margin */ --jqx-editor-toolbar-button-width: 30px; /* toolbar button width */ --jqx-editor-toolbar-delimiter-width: 5px; /* toolbar delimiter items width */ --jqx-editor-toolbar-drop-down-width-large: 100px; /* wider drop down toolbar items like - format, fontname, etc. */ --jqx-editor-toolbar-drop-down-width-small: 65px; /* all drop down toolbar items default width */ --jqx-editor-window-header-height: var(--jqx-scheduler-window-header-height); /* Dialog Window header height */ --jqx-editor-window-footer-height: var(--jqx-scheduler-window-footer-height); /* Dialog Window footer height */ --jqx-editor-inline-toolbar-max-width: 80vw; /* Inline toolbar max width */ --jqx-editor-table-column-width: initial; /* table column default width */ --jqx-editor-table-cell-min-height: 20px; /* table cell defaut min height */ --jqx-editor-table-cell-min-width: var(--jqx-editor-table-cell-min-height); /* table cell default min width */ --jqx-editor-char-counter-offset: 30px; /* char count offset from the edges of the element */ --jqx-editor-toolbar-item-height: 30px; /* default toolbar item height */ --jqx-editor-toolbar-item-border-radius: var(--jqx-border-radius); /* toolbar item border radius */ --jqx-editor-toolbar-height: calc(var(--jqx-editor-toolbar-item-height) + 2 * var(--jqx-editor-toolbar-item-margin)); /* toolbar height */ --jqx-editor-highlight: var(--jqx-primary); /* Find and Replace highlight color */ --jqx-editor-highlight-color: var(--jqx-primary-color); /* highligh text color */ --jqx-editor-search-bar-offset: 5px; /* search bar offset */ --jqx-editor-search-bar-padding: 5px; /* search bar padding */ /* ── Query Builder ─────────────────────────────────── */ --jqx-filter-builder-default-width: var(--jqx-box-width); /* default width */ --jqx-filter-builder-default-height: var(--jqx-box-height); /* default height */ --jqx-filter-builder-row-height: var(--jqx-editor-height); /* default height of the rows*/ --jqx-filter-builder-item-width: var(--jqx-editor-width); /* default width of the button items*/ --jqx-filter-builder-group-container-border: 4px; --jqx-filter-builder-item-margin: 20px; --jqx-filter-builder-group-condition-margin: 5px; --jqx-filter-builder-group-margin: 15px; /* ── Fitler Panel ─────────────────────────────────── */ --jqx-filter-panel-default-width: 300px; /* default width */ --jqx-filter-panel-default-height: auto; /* default height */ --jqx-filter-panel-padding: 10px; /* padding */ --jqx-filter-panel-border-top-right-radius: var(--jqx-border-radius); /* top-right border radius */ --jqx-filter-panel-border-top-left-radius: var(--jqx-border-radius); /* top-left border radius */ --jqx-filter-panel-border-bottom-left-radius: var(--jqx-border-radius); /* bottom-left border radius */ --jqx-filter-panel-border-bottom-right-radius: var(--jqx-border-radius); /* bottom-right border radius */ --jqx-filter-panel-border-width: var(--jqx-border-width); /* border width */ --jqx-filter-panel-border: var(--jqx-border); /* border color */ --jqx-filter-panel-background: var(--jqx-background); /* background color */ --jqx-filter-panel-color: var(--jqx-background-color); /* text color */ --jqx-filter-panel-vertical-offset: 10px; /* Vertical offset between sub-elements */ --jqx-filter-panel-main-element-height: 400px; /* height of the jqxTree inside the jqxFilterPanel */ /* ── File upload ─────────────────────────────────── */ --jqx-file-upload-default-width: var(--jqx-editor-width); /* default width */ --jqx-file-upload-browse-button-width: auto; /* default width of the browse button*/ --jqx-file-upload-browse-button-height: auto; /* default height of the browse button*/ --jqx-file-upload-footer-button-width: auto; /* default height of the footer buttons*/ --jqx-file-upload-footer-button-height: auto; /* default height of the footer buttons*/ --jqx-file-upload-text-content-uploading-start: "Connecting ..."; /* default text content of the pseudo element shown when upload starts. */ --jqx-file-upload-text-content-uploading: "Uploading ..."; /* default text content of the pseudo element shown during the upload. */ --jqx-file-upload-text-content-error: "Upload error!"; /* default text content of the pseudo element shown on error. */ --jqx-file-upload-text-content-pause: "Upload paused!"; /* default text content of the pseudo element shown when upload is paused. */ --jqx-file-upload-text-content-drop-zone: "Drag files here"; /* default text content of the pseudo element shown where is the drop zone. */ --jqx-file-upload-text-content-drop-zone-over: "Drop here \e824"; /* default text content of the pseudo element shown when dragged files are over the drop zone. */ --jqx-file-upload-container-min-height: 60px; /* Sets minimmum height of the drop zone and file zone containers. */ --jqx-file-upload-total-files-min-height: 20px; /* Sets min height of the container where total numbers of items is displayed. */ --jqx-file-upload-drop-zone-height: 100%; /* Sets min height of the container where total numbers of items is displayed. */ /* ── Gantt Chart ─────────────────────────────────── */ --jqx-gantt-chart-resource-splitter-bar-fit-size: calc(var(--jqx-gantt-chart-resource-timeline-content-height) + var(--jqx-gantt-chart-task-default-height)); /* The fit size of all Resource Splitter bar inside the Resource Panel of the element*/ --jqx-gantt-chart-task-splitter-bar-fit-size: var(--jqx-gantt-chart-task-timeline-content-height); /* The fit size of all Splitter bar inside the element*/ --jqx-gantt-chart-task-default-height: 30px; /* The height of a Task inside the Timeline */ --jqx-gantt-chart-header-height: var(--jqx-gantt-chart-task-default-height); /* The height of the header of the Task and Resource Panels */ --jqx-gantt-chart-task-bar-fill-padding: 5px; /* The padding of the Fill of the Task Bar */ --jqx-gantt-chart-task-label-padding: 2px var(--jqx-gantt-chart-task-bar-fill-padding); /* Thumb color */ --jqx-gantt-chart-task-thumb-color: rgba(0, 0, 0, .55); /* The color of the thumb */ --jqx-gantt-chart-task-progress-color: rgba(0, 0, 0, .15); /* #2d75f5 */ /* The default color of the progress fill of all Tasks inside the Timeline */ --jqx-gantt-chart-project-color: #ffa558; /* The defaut color for all Project tasks */ --jqx-gantt-chart-project-label-color: #333; /* Determines the label color of the project tasks inside the Timeline. */ --jqx-gantt-chart-project-label-color-selected: #000; /* Determines the label color of the project tasks inside the Timeline when selected. */ --jqx-gantt-chart-project-progress-color: var(--jqx-gantt-chart-task-progress-color); /* The default color of the progress fill for all Project tasks */ --jqx-gantt-chart-task-color: rgb(43, 195, 190); /* The default color of a Task inside the Timeline */ --jqx-gantt-chart-milestone-color: #800080; /* The default color for all Milestones */ --jqx-gantt-chart-timeline-task-background-color: transparent; /* Determines the background color of the tasks(rows) inside the Timeline. */ --jqx-gantt-chart-timeline-task-connection-feedback-color: #e6510a; /* Determines the default color of the feedback that is shows when creating a connection between tasks inside the Timeline. */ --jqx-gantt-chart-timeline-task-connection-feedback-width: 1px; /* Determines the default width of the feedback that is shows when creating a connection between tasks inside the Timeline. */ --jqx-gantt-chart-timeline-task-connection-feedback-style: dashed; /* Determines the style of the feedback that is shows when creating a connection between tasks inside the Timeline. */ --jqx-gantt-chart-timeline-task-connection-color: var(--jqx-gantt-chart-timeline-task-connection-feedback-color); /* Determines the color of the connections between Tasks inside the Timeline. */ --jqx-gantt-chart-timeline-task-connection-color-hover: var(--jqx-gantt-chart-timeline-task-connection-color); /* Determines the color on hover of the connections between Tasks inside the Timeline. */ --jqx-gantt-chart-timeline-task-connection-width: var(--jqx-gantt-chart-timeline-task-connection-feedback-width); /* Determines the width of the connections between the tasks inside the Timeline. */ --jqx-gantt-chart-timeline-task-connection-style: solid; /* Determines the style of the connections between the tasks inside the Timeline. */ --jqx-gantt-chart-timeline-task-connection-arrow-type: solid; /* Determines the border type of the arrow of the connections between Tasks inside the Timeline. */ --jqx-gantt-chart-timeline-task-connection-arrow-width: 5px; /* Determines the width of the arrow of the connections between Tasks inside the Timeline. */ --jqx-gantt-chart-timeline-task-resize-indicator-width: 4px; /* Determines the defualt width of the resize indicator of the Task bars inside the Timeline. */ --jqx-gantt-chart-timeline-task-resize-indicator-color: #fff; /* Determines the background-color of the resize indicators of the Task bars insinde the Timeline. */ --jqx-gantt-chart-timeline-task-resize-indicator-border-color: #333; /* Determines the border-color of the resize indicator of the Task bars inside the Timeline. */ --jqx-gantt-chart-timeline-task-progress-thumb-size: 10px; /* Determines the size of the thumb controlling the progress of a Task inside the Timeline. */ --jqx-gantt-chart-timeline-cell-size: auto; /* Determines the default width of the cells inside the Timeline. */ --jqx-gantt-chart-timeline-cell-min-size: 70px; /* Determines the default min-width of the cells inside the Timeline. */ --jqx-gantt-chart-timeline-task-min-width: 5px; /* Determines the default min-width of the Tasks insinde the Timeline. Not applicable to Milestone tasks. */ --jqx-gantt-chart-timeline-weekend-color: #EFF5FD; /* Determines the default background color of the 'weekend' cells insinde the Timeline. */ --jqx-gantt-chart-timeline-nonworking-color: #F5F5F5; /* Determines the default background-color of the nonworking days/hours inside the Timeline. */ --jqx-gantt-chart-default-width: auto; /* Determines the default width of the element. */ --jqx-gantt-chart-default-height: 600px; /* Determines the height of the element. */ --jqx-gantt-chart-task-popup-window-default-width: 60vw; /* Determines the width of the task editing popup windows of the element. */ --jqx-gantt-chart-connection-popup-window-default-width: 300px; /* Determines the width of the connection editing popup windows of the element. */ --jqx-gantt-chart-confirm-popup-window-default-width: var(--jqx-gantt-chart-connection-popup-default-width); /* Determines the width of the confirm popup window of the element. */ --jqx-gantt-chart-popup-window-header-height: 40px; /* Determines the height of the header of the popup windows inside the element. */ --jqx-gantt-chart-popup-window-footer-height: 50px; /* Determines the height of the footer of the popup windows insinde the element. */ --jqx-gantt-chart-header-placeholder: ' - '; /* Placeholder for thea Header sections when there're no items */ --jqx-gantt-chart-progress-label-padding: 0 10px 0 10px; /* Task progress label padding */ --jqx-gantt-chart-filter-row-height: 30px; /* Sets a box shadow to the Task Timeline header */ --jqx-gantt-chart-task-fill-border-radius: 0; /* Sets the default border radius for the Timeline task bars */ --jqx-gantt-chart-segment-link-color: var(--jqx-gantt-chart-task-color); /* Determines the color of the link between the task segments */ --jqx-gantt-chart-segment-link-size: var(--jqx-border-width); /* Determines the height of the link between the task segments */ --jqx-gantt-chart-date-marker-color: var(--jqx-primary); /* Determines the color of the date markers */ --jqx-gantt-chart-date-marker-height: 25px; /* Determines the background of the date markers */ --jqx-gantt-chart-date-marker-width: var(--jqx-border-width); /* Determines the width of the date markers */ --jqx-gantt-chart-date-marker-background: var(--jqx-primary); /* Determines the background of the date markers */ --jqx-gantt-chart-date-marker-color: var(--jqx-primary-color); /* Determines the background of the date markers */ --jqx-gantt-chart-date-marker-v-offset: 15%; /* Determines the vertical position of the date markers */ --jqx-gantt-chart-date-marker-h-offset: 10px; /* Determines the horizontal offset of the date markers */ --jqx-gantt-chart-indicator-icon: initial; /* Determines the task indicator icon */ --jqx-gantt-chart-deadline-icon: var(--jqx-icon-attention-circled); /* Determines the icon for the task deadline */ --jqx-gantt-chart-deadline-color: var(--jqx-error); /* Determines the color for the task deadline icon */ --jqx-gantt-chart-baseline-proportion: 2; /* Determines the proportion of the baseline compared to the task height */ --jqx-gantt-chart-baseline-background: rgba(166, 205, 87, .5); /* Determines the background color of the task baseline */ --jqx-gantt-chart-progress-label-width: 60px; /* Determines the task progress label width */ --jqx-gantt-chart-current-time-indicator-size: 1px; /* Determines the current time indicator width */ --jqx-gantt-chart-current-time-indicator-background: var(--jqx-primary); /* Determines the current time indicator background */ --jqx-gantt-chart-current-time-indicator-arrow-size: 7px; /* Determines the arrow size of the curernt time indicator */ --jqx-gantt-chart-current-time-indicator-header-size: 2px; /* Determines the current time indicator size inside the timeline header cell */ --jqx-gantt-chart-shader-background: rgba(var(--jqx-border-rgb), .5); /* Determines the current time shader background color */ /* Gauge default height*/ --jqx-gauge-default-width: var(--jqx-box-width); /* jqxgauge default height */ --jqx-gauge-default-height: var(--jqx-box-height); /* Gauge track border */ --jqx-gauge-track-border: var(--jqx-border); /* Track's background color */ --jqx-gauge-track-background: var(--jqx-background); /* Needle's background color */ --jqx-gauge-needle-background: var(--jqx-primary); /* Fill color of labels */ --jqx-gauge-label-fill-state: initial; /* Stroke color of labels */ --jqx-gauge-label-stroke: initial; /* Alternating Colors for Grid/Table/Scheduler/Pivot */ --jqx-alternation-index0-color: var(--jqx-surface-color); --jqx-alternation-index0-border: var(--jqx-surface); --jqx-alternation-index0-background: var(--jqx-surface); --jqx-alternation-index1-color: #111; --jqx-alternation-index1-border: #9BBB59; --jqx-alternation-index1-background: #9BBB59; --jqx-alternation-index2-color: #fff; --jqx-alternation-index2-border: #FC3752; --jqx-alternation-index2-background: #FC3752; /* ── Grid ─────────────────────────────────── */ --jqx-grid-default-width: 800px; /* default width */ --jqx-grid-default-height: 400px; /* default height */ --jqx-grid-footer-height: var(--jqx-bar-height); /* footer height. */ --jqx-grid-header-height: var(--jqx-bar-height); /* header height. */ --jqx-grid-group-header-height: var(--jqx-bar-height); /* group header height. */ --jqx-grid-row-height: 30px; /* rows height. */ --jqx-grid-column-header-height: var(--jqx-bar-height); /* columns height. */ --jqx-grid-filter-footer-height: var(--jqx-bar-height); /* filter row height. */ --jqx-grid-aggregate-footer-height: var(--jqx-bar-height); /* aggregates height. */ --jqx-grid-header-background-freeze: var(--jqx-surface); /* row/column header background, when row/column is frozen. */ --jqx-grid-header-color-freeze: var(--jqx-surface-color); /* row/column header text color, when row/column is frozen. */ --jqx-grid-column-menu-width: 200px; /* column menu's width. */ --jqx-grid-column-menu-height: auto; /* column menu's height. */ --jqx-grid-column-buttons-width: 23px; /* column buttons width. */ --jqx-grid-cell-color-freeze: var(--jqx-surface-color); /* text color of cells, when row/column is frozen. */ --jqx-grid-cell-background-freeze: var(--jqx-surface); /* frozen background when selected */ --jqx-grid-cell-background-freeze-selected: #DCE5EC; /* background color of cells, when row/column is frozen */ --jqx-grid-cell-color-delete: #333; /* text color of cells, when row is deleted. */ --jqx-grid-cell-background-delete: #FFDCDC; /* background color of cells, when row is deleted. */ --jqx-grid-cell-color-update: #333; /* text color of cells, when cell is updated.. */ --jqx-grid-cell-background-update: #D7F9C7; /* background for update state of cell*/ --jqx-grid-cell-background-color: #D7F9C7; /* background color of cells, when cell is updated.. */ --jqx-grid-cell-color-add: #333; /* text color of cells, when row is added.. */ --jqx-grid-cell-background-add: #FED59B; /* background color of cells, when row is deleted.. */ --jqx-grid-cell-color-unbound: var(--jqx-surface-color); /* text color of cells, when row is unbound. */ --jqx-grid-cell-background-unbound: var(--jqx-surface); /* background color of cells, when row is unbound. */ --jqx-grid-cell-color-sort: var(--jqx-surface-color); /* text color of cells, when column is sorted. */ --jqx-grid-cell-background-sort: #FEF3dd; /* background color of cells, when column is sorted. */ --jqx-grid-cell-color-filter: var(--jqx-surface-color); /* text color of cells, when column is filtered. */ --jqx-grid-cell-background-filter: #E8F2DB; /* the view bar background colors */ --jqx-grid-view-bar-background: #FCFCFC; /* background color of cells, when column is filtered. */ --jqx-grid-group-row-vertical-offset: 5; /* grouped rows vertical offset. */ --jqx-grid-group-row-horizontal-offset: 1; /* grouped rows horizontal offset. */ --jqx-grid-template-columns: none; /* Template columns. */ --jqx-grid-column-gap: 0px; /* the element's grid-column-gap (related to CSS Grid) */ --jqx-grid-row-gap: 0px; /* the element's grid-row-gap (related to CSS Grid) */ --jqx-grid-freeze-splitter-size: 1px; /* frozen split bar size. */ --jqx-grid-resize-line-size: 1px; /* resize line size. */ /* ── Grid Layout ─────────────────────────────────── */ --jqx-grid-layout-col-gap: 10px; --jqx-grid-layout-row-gap: 10px; --jqx-grid-layout-width: 100%; --jqx-grid-layout-rows: none; /* ── Group Panel, Sort Panel, Column Panel, Multi Column Filter Panel, Formatting Panel ─────────────────────────────────── */ --jqx-grid-panel-default-width: 450px; /* default width of the jqxGroupPanel/jqxSortPanel/jqxColumnPanel/jqxMultiColumnFilterPanel */ --jqx-grid-panel-default-height: auto; /* default height of the jqxGroupPanel/jqxSortPanel/jqxColumnPanel/jqxMultiColumnFilterPanel */ --jqx-grid-panel-padding: 10px; /* padding of the jqxGroupPanel/jqxSortPanel/jqxColumnPanel/jqxMultiColumnFilterPanel */ --jqx-grid-panel-vertical-offset: 10px; /* Vertical offset between jqxGroupPanel/jqxSortPanel/jqxColumnPanel/jqxMultiColumnFilterPanel items */ --jqx-grid-panel-item-height: 30px; /* height of jqxGroupPanel/jqxSortPanel/jqxColumnPanel/jqxMultiColumnFilterPanel items */ --jqx-column-panel-drop-down-height: 350px; /* height of drop-downs */ --jqx-multi-column-filter-panel-template-columns: 15px 60px 2fr 3fr 3fr; /* jqxMultiColumnFilterPanel grid-template-columns */ --jqx-formatting-panel-default-width: 600px; /* default width of the jqxFormattingPanel */ --jqx-formatting-panel-row-height: 30px; /* Height of rows in jqxFormattingPanel */ --jqx-formatting-panel-add-new-button-size: 40px; /* Size of "Add new" (+) button in jqxFormattingPanel */ --jqx-formatting-panel-popup-width: 300px; /* Width of jqxFormattingPanel's pop-up */ --jqx-formatting-panel-color-box-height: 20px; /* Height of color boxes in jqxFormattingPanel's pop-up */ /* ── Kanban ─────────────────────────────────── */ --jqx-kanban-default-width: 1200px; /* default width */ --jqx-kanban-default-height: 500px; /* default height */ --jqx-kanban-header-size: 35px; /* Header size (applies to header and column headers) */ --jqx-kanban-task-min-width: 150px; /* Min width for tasks in columns with horizontal orientation */ --jqx-kanban-task-min-height: 80px; /* task min height */ --jqx-kanban-text-max-height: 200px; /* task text part max height */ --jqx-kanban-user-icon-size: 30px; /* user icon size */ --jqx-kanban-user-list-width: 150px; /* user list width */ --jqx-kanban-user-list-max-height: 500px; /* user list max height */ --jqx-kanban-comments-list-width: 350px; /* comments list width */ --jqx-kanban-comments-list-height: auto; /* comments list height */ --jqx-kanban-new-comment-height: 50px; /* Height of new comment section */ --jqx-kanban-new-comment-height-expanded: 175px; /* Expanded height of new comment section */ --jqx-kanban-send-button-height: 30px; /* Height of Send button in new comment section */ --jqx-kanban-color-band-width: 3px; /* Kanban color band width (i.e. left border of tasks) */ --jqx-kanban-add-new-column-width: 1fr; /* Kanban "+ New status" column width */ /* ── ListBox ─────────────────────────────────── */ --jqx-list-box-default-width: var(--jqx-editor-width); /* default width */ --jqx-list-box-default-height: var(--jqx-editor-width); /* default height */ --jqx-list-item-group-header-text-transform: uppercase; /* item group header text transform */ --jqx-list-item-horizontal-offset: 3px; /* Defines list item's horizontal offset. */ --jqx-list-item-vertical-offset: 3px; /* Defines list item's vertical offset. */ --jqx-list-item-height: 36px; /* jqxListBox item height */ --jqx-list-item-label-padding: 0; /* jqxListBox item label padding */ --jqx-list-item-label-border-radius: 0; /* jqxListBox item label border radius */ --jqx-list-item-padding: 9px 12px; /* jqxListBox item padding */ --jqx-loader-size: var(--jqx-editor-height); /* jqxListBox loader size(width=height) */ /* ── LED ─────────────────────────────────── */ --jqx-led-default-width: var(--jqx-editor-height); /* default width */ --jqx-led-default-height: var(--jqx-editor-height); /* default height */ /* ── ListMenu ─────────────────────────────────── */ --jqx-list-menu-default-width: var(--jqx-box-width); /* default width */ --jqx-list-menu-default-height: var(--jqx-box-height); /* default height */ --jqx-list-menu-filter-input-vertical-offset: 5px; /* Defines vertical offset of the ListMenu's filter input. */ --jqx-list-menu-filter-input-horizontal-offset: 5px; /* Defines horizontal offset of the ListMenu's filter input. */ /* ── Masked Text Box ─────────────────────────────────── */ --jqx-masked-text-box-default-width: var(--jqx-editor-width); /* default width */ --jqx-masked-text-box-default-height: var(--jqx-editor-height); /* default height */ /* ── Menu ─────────────────────────────────── */ --jqx-menu-default-width: var(--jqx-bar-width); /* default width */ --jqx-menu-default-height: var(--jqx-bar-height); /* default height */ --jqx-menu-vertical-default-width: calc(var(--jqx-bar-width) / 2); /* vertical and context Menu default width */ --jqx-menu-vertical-default-height: var(--jqx-bar-width); /* vertical and context Menu default height */ --jqx-menu-scroll-button-size: calc(var(--jqx-bar-height) / 1.5); /* jqxMenu scroll buttons size. Horizontal Menu scroll buttons width = Vertical Menu scroll buttons height. */ /* ── MultiLine TextBox ─────────────────────────────────── */ --jqx-multiline-text-box-default-width: var(--jqx-editor-width); /* default width of the element. */ --jqx-multiline-text-box-default-height: calc(10 * var(--jqx-editor-height)); /* default height of the element. */ /* Multi Split Button*/ --jqx-multi-split-button-default-width: var(--jqx-editor-width); /* default width. */ --jqx-multi-split-button-default-height: var(--jqx-editor-height); /* default height. */ /* ── Numeric TextBox ─────────────────────────────────── */ --jqx-numeric-text-box-default-width: var(--jqx-editor-width); /* default width */ --jqx-numeric-text-box-default-height: var(--jqx-editor-height); /* default height */ --jqx-numeric-text-box-default-radix-display-width: 12%; /* default radix display button width*/ --jqx-numeric-text-box-default-unit-display-width: var(--jqx-editor-addon-width); /* default unit display width*/ --jqx-numeric-text-box-text-align: right; /* input text align */ /* ── Path ─────────────────────────────────── */ --jqx-path-default-width: var(--jqx-editor-width); /* jqxPath default width */ --jqx-path-default-height: var(--jqx-editor-height); /* jqxPath default height */ --jqx-path-drop-down-width: auto; /* jqxPath drop down width */ --jqx-path-drop-down-height: auto; /* jqxPath drop down height */ --jqx-path-button-gap: 5px; /* jqxPath button gap */ --jqx-path-text-align: start; /* jqxPath text align */ /* ── Power Button ─────────────────────────────────── */ --jqx-power-button-default-width: var(--jqx-editor-height); /* default width */ --jqx-power-button-default-height: var(--jqx-editor-height); /* default height */ /* ── Progress Bar ─────────────────────────────────── */ --jqx-progress-bar-default-width: var(--jqx-editor-width); /* default width */ --jqx-progress-bar-default-height: var(--jqx-editor-height); /* default height */ --jqx-circular-progress-bar-default-size: var(--jqx-editor-width); /* jqxCircularProgressBar default size (width = height) */ --jqx-circular-progress-bar-fill-size: 20%; /* jqxCircularProgressBar ui-state size. The width of the ui-state. The middle container's width is calculated defaultd on this value. */ /* ── Query Builder ─────────────────────────────────── */ --jqx-query-builder-default-width: auto; /* default width of QueryBuilder. */ --jqx-query-builder-default-height: auto; /* default height of QueryBuilder. */ --jqx-query-builder-min-width: 100px; /* Minimum width of QueryBuilder. */ --jqx-query-builder-content-padding: 5px; /* Padding of QueryBuilder. */ --jqx-query-builder-editor-width: 125px; /* Width of editors in QueryBuilder. */ /* ── Radio Button ─────────────────────────────────── */ --jqx-radio-button-default-size: calc(1px + 1/2 * var(--jqx-editor-height)); /* default size for the radio button. */ /* ── Ribbon ─────────────────────────────────── */ --jqx-ribbon-tab-height: 125px; /* jqxRibbon tab height */ --jqx-ribbon-collapsed-tab-height: 50px; /* jqxRibbon collapsed tab height */ --jqx-ribbon-border-color: var(--jqx-border); /* jqxRibbon border color */ --jqx-ribbon-tab-header-width: 100px; /* jqxRibbon tab header width */ --jqx-ribbon-tab-padding: 0px; /* jqxRibbon tab padding */ --jqx-ribbon-group-items-padding: 0 10px; /* jqxRibbon group items padding */ --jqx-ribbon-tab-header-height: 32px; /* jqxRibbon tab header height */ --jqx-ribbon-header-padding: 0px; /* jqxRibbon header padding */ /* ── Sortable ─────────────────────────────────── */ --jqx-sortable-handle-size: 25px; /* jqxSortable handle size */ /* ── Splitter ─────────────────────────────────── */ --jqx-splitter-default-width: var(--jqx-box-width); /* default width */ --jqx-splitter-default-height: var(--jqx-box-height); /* default height */ --jqx-splitter-bar-size: 10px; /* The width of the scrollbar when vertical and the height of the scrollbar when horizontal*/ --jqx-splitter-bar-fit-size: 100%; /* The size of the splitter according to the orientation of the Splitter. By 'default' a SplitterBar fits the size of the Splitter. */ --jqx-splitter-item-padding: 0; /* Splitter item padding */ --jqx-splitter-item-content-padding: 0; /* Splitter item content padding */ --jqx-splitter-item-size: auto; /* The default size of the Splitter Items */ /* ── Switch Button ─────────────────────────────────── */ --jqx-switch-button-default-width: calc(var(--jqx-editor-height) + 10px); /* default width of the SwitchButton. */ --jqx-switch-button-default-height: var(--jqx-editor-height); /* jqxSwitchButton default height */ --jqx-switch-button-thumb-size: calc(var(--jqx-switch-button-default-height) - 8px); /* jqxSwitchButton thumb size */ /* ── Slider ─────────────────────────────────── */ --jqx-slider-default-width: var(--jqx-editor-width); /* default width */ --jqx-slider-default-height: 35px; /* default height*/ --jqx-slider-track-size: 1px; /* track size. Horizontal track height = Vertical track width */ --jqx-slider-thumb-width: 20px; /* thumb width*/ --jqx-slider-thumb-height: 20px; /* thumb height*/ --jqx-slider-tooltip-width: 60px; /* tooltip width */ --jqx-slider-tooltip-height: 30px; /* tooltip height*/ --jqx-slider-spin-button-width: 30px; /* spin buttons width*/ --jqx-slider-spin-button-height: 30px; /* spin buttons height*/ --jqx-slider-tick-size: 10px; /* tick size. Horizontal Slider tick height = Vertical Slider tick width.*/ --jqx-slider-minor-tick-size: 5px; /* minor tick size. Horizontal Slider minor tick height = Vertical Slider minor tick width.*/ --jqx-slider-thumb-border-top-right-radius: 15px; /* Top-right border radius of jqxSlider thumb */ --jqx-slider-thumb-border-top-left-radius: 15px; /* Top-left border radius of jqxSlider thumb */ --jqx-slider-thumb-border-bottom-left-radius: 15px; /* Bottom-left border radius of jqxSlider thumb */ --jqx-slider-thumb-border-bottom-right-radius: 15px; /* Bottom-right border radius of jqxSlider thumb */ /* ── Scrollbar ─────────────────────────────────── */ --jqx-scroll-button-size: 16px; /* jqxScrollBar buttons size. Horizontal ScrollBar button width = Vertical ScrollBar button height. ScrollBar track is calculated defaultd on this value. */ --jqx-scroll-bar-size: 18px; /* default scrollbar size */ --jqx-scroll-bar-default-width: var(--jqx-editor-width); /* ScrollBar's default width. */ --jqx-scroll-bar-default-height: var(--jqx-scroll-bar-size); /* ScrollBar's default height. */ --jqx-scroll-bar-background: #f8fafb; /* default ScrollBar's background color. */ --jqx-scroll-bar-track-background: var(--jqx-scroll-bar-background); --jqx-scroll-bar-border: #f8fafb; /* The border color of the ScrollBar */ --jqx-scroll-bar-thumb-border-top-right-radius: 0px; /* default ScrollBar's top-right border radius. */ --jqx-scroll-bar-thumb-border-top-left-radius: 0px; /* default ScrollBar's top-left border radius. */ --jqx-scroll-bar-thumb-border-bottom-left-radius: 0px; /* default ScrollBar's bottom-left border radius. */ --jqx-scroll-bar-thumb-border-bottom-right-radius: 0px; /* default ScrollBar's bottom-right border radius. */ --jqx-scroll-bar-thumb-background: #D5D8DB; /* The color of the ScrollBar's thumb. */ --jqx-scroll-bar-thumb-border: transparent; /* The color of the ScrollBar's thumb border. */ --jqx-scroll-bar-thumb-size: 100%; /* The size of the ScrollBar's thumb. */ --jqx-scroll-bar-thumb-padding: 1px; /* The padding of the ScrollBar's thumb. */ --jqx-scroll-bar-thumb-background-hover: #d7dbe0; /* The background color of the ScrollBar's thumb in hover state. */ --jqx-scroll-bar-thumb-border-hover: transparent; /* The border color of the ScrollBar's thumb in hover state. */ --jqx-scroll-bar-thumb-background-active: #c6cbd2; /* The background color of the ScrollBar's thumb in active state. */ --jqx-scroll-bar-thumb-border-active: transparent; /* The border color of the ScrollBar's thumb in active state. */ --jqx-scroll-bar-button-background: #f8fafb; /* The background color of ScrollBar's navigation buttons. */ --jqx-scroll-bar-button-border: #f8fafb; /* The border color of ScrollBar's navigation buttons. */ --jqx-scroll-bar-button-color: #505050; /* The color of ScrollBar's navigation buttons. */ --jqx-scroll-bar-button-background-hover: #d7dbe0; /* The background color of the hovered ScrollBar's buttons. */ --jqx-scroll-bar-button-border-hover: #f8fafb; /* The border color of the hovered ScrollBar's buttons. */ --jqx-scroll-bar-button-color-hover: #505050; /* The color of the hovered ScrollBar's buttons. */ --jqx-scroll-bar-button-background-active: #c6cbd2; /* The background color of the ScrollBar's buttons in active state. */ --jqx-scroll-bar-button-border-active: #f8fafb; /* The border color of the ScrollBar's buttons in active state. */ --jqx-scroll-bar-button-color-active: #505050; /* The color of the ScrollBar's buttons in active state. */ /* ── Table & PivotTable ─────────────────────────────────── */ --jqx-table-default-width: 100%; /* default width */ --jqx-table-default-height: auto; /* default height */ --jqx-table-header-footer-height: 56px; /* height of header and footer */ --jqx-table-column-header-height: var(--jqx-table-header-footer-height); /* height of column header */ --jqx-table-row-height: 48px; /* height of rows */ --jqx-table-cell-padding: 12px; /* cell padding */ --jqx-table-row-detail-height: var(--jqx-table-row-height); /* row detail height */ --jqx-table-indent: 30px; /* hierarchical cell indent */ --jqx-table-arrow-size: 16px; /* arrow size */ --jqx-table-arrow-margin: 5px; /* arrow margin */ --jqx-table-group-name-display: unset; /* group header name display */ --jqx-table-group-count-display: unset; /* group header leaf count display */ --jqx-pivot-table-cell-width: 200px; /* cell width */ --jqx-pivot-table-secondary-group-width: calc(1.25 * var(--jqx-pivot-table-cell-width)); /* row group width */ --jqx-pivot-panel-width: 300px; /* designer (jqxPivotPanel) width */ --jqx-pivot-panel-default-height: 800px; /* Standalone jqxPivotPanel default height */ --jqx-pivot-panel-tab-item-height: 150px; /* designer (jqxPivotPanel) tab item height */ --jqx-pivot-panel-padding: 10px; /* designer (jqxPivotPanel) padding */ /* ── Tank ─────────────────────────────────── */ --jqx-tank-default-width: var(--jqx-editor-width); /* default width */ --jqx-tank-default-height: calc(10 * var(--jqx-editor-height)); /* default height*/ --jqx-tank-scale-size: 105px; /* scale size*/ --jqx-tank-thumb-width: 25px; /* thumb width*/ --jqx-tank-thumb-height: var(--jqx-tank-thumb-width); /* thumb height*/ --jqx-tank-tooltip-width: 80px; /* tooltip width*/ --jqx-tank-tooltip-height: 30px; /* thumb height*/ --jqx-tank-tick-size: 10px; /* tick size. Horizontal Tank tick height = Vertical Tank tick width. */ --jqx-tank-minor-tick-size: 5px; /* minor tick size. */ --jqx-tank-minimum-track-size: 6px; /* horizontal track min-height, vertical track min-width */ /* ── Tabs ─────────────────────────────────── */ --jqx-tabs-header-button-size: 20px; /* header buttons size. Horizontal Tabs header buttons width = Vertical Tab header buttons height. */ --jqx-tabs-animation-duration: 0.5s; /* animation duration */ --jqx-tabs-default-width: var(--jqx-box-width); /* default width */ --jqx-tabs-default-height: var(--jqx-box-height); /* default height */ --jqx-tabs-header-padding: 0px; /* Defines Tabs header padding. */ --jqx-tabs-header-offset: 0px; /* Defines Tabs header offset. */ --jqx-tab-item-padding: 12px 16px; /* Defines vertical and horizontal padding of tab items. */ --jqx-tab-item-offset: 5px; /* default tab item offset. */ --jqx-tab-item-initial-offset: 5px; /* Initial tab item offset. */ --jqx-tab-item-text-transform: uppercase; /* Tab item text capitalization. */ /* ── Time Picker ─────────────────────────────────── */ --jqx-time-picker-default-width: var(--jqx-editor-width); /* jqxTimePicker default width */ --jqx-time-picker-default-height: calc(12 * var(--jqx-editor-height)); /* jqxTimePicker default height */ /* ── Tooltip ─────────────────────────────────── */ --jqx-tooltip-arrow-width: 6px; /* default jqxTooltip arrow width */ --jqx-tooltip-arrow-color: var(--jqx-secondary); /* jqxTooltip arrow color */ --jqx-tooltip-arrow-translate: 0; /* jqxTooltip arrow translation (transformation) */ --jqx-tooltip-padding: 4px 8px; /* jqxTooltip padding */ --jqx-tooltip-content-shadow: none; /* jqxTooltip content box-shadow */ /* ── Toast ─────────────────────────────────── */ --jqx-toast-item-icon: ''; /* Code of toast item icon */ --jqx-toast-container-default-width: var(--jqx-bar-width); /* default width of the jqxToast's containers, positioned top-left, top-right, bottom-left, bottom-right */ --jqx-toast-header-height: 20px; /* jqxToast header height */ --jqx-toast-info-background: var(--jqx-info); /* Background color for type info */ --jqx-toast-info-color: var(--jqx-info-color); /* Text color for type info */ --jqx-toast-warning-background: var(--jqx-warning); /* Background color for type warning */ --jqx-toast-warning-color: var(--jqx-warning-color); /* Text color for type warning */ --jqx-toast-error-background: var(--jqx-error); /* Background color for type error */ --jqx-toast-error-color: var(--jqx-error-color); /* Text color for type error */ --jqx-toast-success-background: var(--jqx-success); /* Background color for type success */ --jqx-toast-success-color: var(--jqx-success-color); /* Text color for type success */ /* ── Tree ─────────────────────────────────── */ --jqx-tree-default-width: var(--jqx-box-width); /* default width */ --jqx-tree-default-height: var(--jqx-box-height); /* default height */ --jqx-tree-scroll-button-size: 20px; /* jqxTree scroll buttons size */ --jqx-tree-lines-style: dashed; /* default style of the connecting tree lines. */ --jqx-tree-indent: 16px; /* Defines the indent(hierarchy offset) size of the tree items. */ --jqx-tree-lines-color: var(--jqx-border); /* Defines the color of the connecting lines. */ --jqx-tree-lines-width: 1px; /* Defines the width of the connecting lines. */ --jqx-tree-item-label-height: 36px; /* Defines the height of tree item labels. */ --jqx-tree-item-padding: 7px 10px; /* Defines the padding of the tree items. */ --jqx-tree-item-vertical-offset: 3px; /* Defines the vertical offset of the tree items. */ --jqx-tree-item-horizontal-offset: 3px; /* Defines the horizontal offset of the tree items. */ /* ── TextBox ─────────────────────────────────── */ --jqx-text-box-default-width: var(--jqx-editor-width); /* Text Box default width. */ --jqx-text-box-default-height: var(--jqx-editor-height); /* Text Box default height. */ /* ── Validation Panel ─────────────────────────────────── */ --jqx-validation-panel-description-width: 20%; --jqx-validation-panel-content-width: 80%; /* Validation panel - appearance */ --jqx-validation-panel-appearance-vertical-offset: 10px; --jqx-validation-panel-appearance-reset-button-left-offset: 5px; --jqx-validation-panel-appearance-textbox-vertical-offset: 5px; --jqx-validation-panel-appearance-reset-button-color: var(--jqx-primary); /* Validation panel - Criteria container */ --jqx-validation-panel-criteria-row-margin-top: 10px; --jqx-validation-panel-criteria-container-vertical-offset: 10px; --jqx-validation-panel-criteria-container-input-width: 180px; --jqx-validation-panel-criteria-container-input-horizontal-offset: 2px; --jqx-validation-panel-criteria-container-textbox-width: 80px; --jqx-validation-panel-criteria-container-textbox-horizontal-offset: 2px; --jqx-validation-panel-criteria-container-text-between-inputs-offset: 5px; /* Validation panel - Invalid data */ --jqx-validation-panel-invalid-data-vertical-offset: 10px; /* Validation panel - Footer */ --jqx-validation-panel-footer-button-color: #188038; --jqx-validation-panel-footer-button-background: white; --jqx-validation-panel-footer-vertical-offset: 20px; --jqx-validation-panel-footer-button-horizontal-offset: 5px; --jqx-validation-panel-footer-remove-validation-button-color: var(--jqx-validation-panel-footer-button-color); --jqx-validation-panel-footer-cancel-button-color: var(--jqx-validation-panel-footer-button-color); --jqx-validation-panel-footer-save-button-color: var(--jqx-validation-panel-footer-button-background); --jqx-validation-panel-footer-save-button-background: var(--jqx-validation-panel-footer-button-color); /* ── PasswordTextBox ─────────────────────────────────── */ --jqx-password-text-box-default-width: var(--jqx-editor-width); /* default width */ --jqx-password-text-box-default-height: var(--jqx-editor-height); /* default height */ /* ── Pager ─────────────────────────────────── */ --jqx-pager-default-width: var(--jqx-bar-width); /* default pager width */ --jqx-pager-default-height: var(--jqx-bar-height); /* default pager height */ --jqx-pager-button-width: 'auto'; /* default pager button width */ --jqx-pager-button-height: 32px; /* default pager button height */ --jqx-pager-page-size-selector-width: 60px; /* default page size selector width. */ --jqx-pager-page-index-selector-width: 32px; /* default pager item width */ --jqx-pager-page-index-selector-height: 32px; /* default pager item height */ --jqx-pager-page-index-ellipsis-selector-width: 32px; /* default pager ellipsis width */ --jqx-pager-page-index-ellipsis-selector-height: 32px; /* default pager ellipsis width */ --jqx-pager-page-index-selector-horizontal-offset: 8px; /* default pager ellipsis width */ --jqx-pager-padding: 2px; /* default padding. */ --jqx-pager-input-width: 50px; /* default width of the pager input. */ /* ── ScrollViewer ─────────────────────────────────── */ --jqx-scroll-viewer-min-width: none; --jqx-scroll-viewer-max-width: none; --jqx-scroll-viewer-min-height: none; --jqx-scroll-viewer-max-height: none; /* ── Scheduler ─────────────────────────────────── */ --jqx-scheduler-default-height: auto; /* default height of the jqxScheduler */ --jqx-scheduler-default-width: auto; /* default width of the jqxScheduler */ --jqx-scheduler-item-size: auto; /* default size of the view selection items insinde the Timeline Header */ --jqx-scheduler-timeline-cell-width: auto; /* default width of the cells inside the Timeline */ --jqx-scheduler-timeline-cell-height: 50px; /* default height of the cells inside the Timeline */ --jqx-scheduler-timeline-cell-min-width: 70px; /* default min-width of the cells inside the Timeline */ --jqx-scheduler-timeline-cell-min-height: 35px; /* min-height of the cells inside the Timeline */ --jqx-scheduler-header-height: 50px; /* height of the header */ --jqx-scheduler-header-today-button-size: auto; /* header Today Button width */ --jqx-scheduler-header-date-button-max-size: auto; /* size of the Header Date Selection Button*/ --jqx-scheduler-header-navigation-button-size: 30px; /* size of the header buttons */ --jqx-scheduler-footer-height: var(--jqx-scheduler-header-height); /* The height of the footer */ --jqx-scheduler-header-box-shadow: initial; /* Sets a Box shadow to the Timeline header */ --jqx-scheduler-header-padding: 10px; /* Sets a the padding for the header/footer */ --jqx-scheduler-timeline-header-cell-padding: 5px; /* Sets a the padding for the header/footer cells */ --jqx-scheduler-header-menu-button-size: auto; /* Sets the size for the Header menu button */ --jqx-scheduler-timeline-weekend-color: var(--jqx-background); /* Sets the background color for the weekend cells */ --jqx-scheduler-timeline-nonworking-color: var(--jqx-gantt-chart-timeline-nonworking-color); /* Sets the background color for nonworking days/hours cells */ --jqx-scheduler-timeline-all-day-label-font-weight: 600; /* Sets a the font-weight of the All day label */ --jqx-scheduler-timeline-header-horizontal-cells-size: 40px; /* Sets a the horizontal header cells size */ --jqx-scheduler-timeline-header-horizontal-label-padding: initial; /* Sets a the horizontal header cells label padding */ --jqx-scheduler-timeline-header-horizontal-details-size: var(--jqx-scheduler-timeline-header-horizontal-cells-size); /* Sets the size of the Horizontal Details Header */ --jqx-scheduler-timeline-header-horizontal-group-size: var(--jqx-scheduler-timeline-header-horizontal-cells-size); /* Sets the size of the Horizontal Group Header */ --jqx-scheduler-timeline-header-vertical-cells-size: 100px; /* Sets the vertical header cell size */ --jqx-scheduler-timeline-header-vertical-label-padding: initial; /* Sets the vertical header cells padding */ --jqx-scheduler-timeline-header-vertical-details-size: var(--jqx-scheduler-timeline-header-vertical-cells-size); /* Sets the size of the Vertical Details Header */ --jqx-scheduler-timeline-header-vertical-group-size: var(--jqx-scheduler-timeline-header-vertical-cells-size); /* Sets the size of the Vertical Group Header */ --jqx-scheduler-timeline-header-all-day-cells-size: 75px; /* Sets the All Day View height */ --jqx-scheduler-timeline-group-separator-background: var(--jqx-outline); /* Sets the color for the group separator */ --jqx-scheduler-timeline-group-separator-size: var(--jqx-border-width); /* Sets the group cell separator size */ --jqx-scheduler-timeline-group-white-space: nowrap; /* Sets the white-space property for the Header Group cells */ --jqx-scheduler-timeline-group-header-offset: calc(-50% - var(--jqx-scheduler-timeline-header-cell-padding)); /* Sets the label offset for the header cells when groupByDate is enabled */ --jqx-scheduler-current-time-indicator-background: var(--jqx-primary); /* Current Time Indicator background-color*/ --jqx-scheduler-current-time-indicator-size: 1px; /* Current Time Indicator size(width/height depending on the view orientation) */ --jqx-scheduler-current-time-indicator-header-size: 2px; /* Current Time Indicator size(width/height) inside the Headers */ --jqx-scheduler-current-time-indicator-arrow-size: 7px; /* Current Time Indicator arrow size */ --jqx-scheduler-shader-background: rgba(var(--jqx-border-rgb), .5); /* Shade Until Current Time background */ --jqx-scheduler-view-background: transparent; --jqx-scheduler-view-line-size: var(--jqx-border-width); /* Timeline lines size */ --jqx-scheduler-view-horizontal-line-color: var(--jqx-border); /* Horizontal timeline line color */ --jqx-scheduler-view-vertical-line-color: var(--jqx-border); /* Vertical timeline line color */ --jqx-scheduler-day-week-view-vertical-line-size: var(--jqx-scheduler-view-line-size); /* Vertical line size in 'day' and 'week' views */ --jqx-scheduler-day-week-view-vertical-line-color: var(--jqx-border); /* Vertical timeline color in 'day' and 'week' views */ --jqx-scheduler-day-week-view-hour-size: var(--jqx-scheduler-view-line-size); /* Horizontal line size for 'day', 'week'. Only the hour lines (excluding minutes) */ --jqx-scheduler-day-week-view-hour-color: var(--jqx-border); /* Horizontal line color for 'day', 'week' views. Only the hour lines ( excluding the minutes) */ --jqx-scheduler-time-ruler-tick-size: 10px; /* Time ruler tick size. Applicable only to day/week views */ --jqx-scheduler-event-background-rgb: 52, 121, 186; /* Event background RGB */ --jqx-scheduler-event-background: rgba(var(--jqx-scheduler-event-background-rgb), 1); /* Event background color */ --jqx-scheduler-legend-item-background: var(--jqx-scheduler-event-background); /* The default background color for the legen items */ --jqx-scheduler-event-color: var(--jqx-primary-color); /* Event color */ --jqx-scheduler-event-focus: rgba(var(--jqx-scheduler-event-background-rgb), .9); /* Event focus background color */ --jqx-scheduler-event-color-focus: var(--jqx-scheduler-event-color); /* Event focus color */ --jqx-scheduler-event-hover: rgba(var(--jqx-scheduler-event-background-rgb), .8); /* Event hover background color */ --jqx-scheduler-event-color-hover: var(--jqx-scheduler-event-color); /* Event hover color */ --jqx-scheduler-event-padding-agenda: 5px; /* Event padding in 'agenda' view only */ --jqx-scheduler-event-padding-basic: 2px; /* Event padding in all basic views */ --jqx-scheduler-event-padding-timeline: 2px; /* Event padding in all timeline views */ --jqx-scheduler-event-padding-all-day: 2px; /* Event padding for events inside AllDay container */ --jqx-scheduler-event-content-padding: 5px; /* Event content padding */ --jqx-scheduler-event-label-font-size: var(--jqx-font-size); /* Event label font size */ --jqx-scheduler-event-time-font-size: calc(var(--jqx-font-size) - 3px); /* Event time label font size */ --jqx-scheduler-event-time-font-size-agenda: var(--jqx-font-size); /* Event time font size for 'agenda' view */ --jqx-scheduler-event-time-font-weight-agenda: 600; /* Event time label font weight for 'agenda' view */ --jqx-scheduler-event-time-opacity-agenda: 1; /* Event time label opacity for 'agenda' view */ --jqx-scheduler-event-time-opacity: 0.7; /* Event time label opacity */ --jqx-scheduler-event-icon-size: 30px; /* Event icon (repeating, exception icon) size */ --jqx-scheduler-event-size: 30px; /* Sets the size of the timeline events in all views. Main variable. Used this variable to change the size of the events. Used by the Scheduler internally !*/ --jqx-scheduler-event-size-basic: var(--jqx-scheduler-event-size); /* Sets the size of the events only in Basic views */ --jqx-scheduler-event-size-timeline: 60px; /* Sests the size of the events only in Timeline views. Should only be in pixels. Do not use calc()! */ --jqx-scheduler-event-collector-size: 24px; /* Event collector size */ --jqx-scheduler-event-collector-mobile-size: 28px; /* Event collector size on mobile */ --jqx-scheduler-event-collector-background: rgba(var(--jqx-primary-rgb), 1); /* Event collector background color */ --jqx-scheduler-event-collector-color: var(--jqx-primary-color); /* Event collector color */ --jqx-scheduler-event-collector-focus: rgba(var(--jqx-primary-rgb), .9); /* Event collector background color on focus */ --jqx-scheduler-event-collector-color-focus: var(--jqx-scheduler-event-collector-color); /* Event collector color on focus */ --jqx-scheduler-event-collector-hover: rgba(var(--jqx-primary-rgb), .8); /* Event collector background colot on hover */ --jqx-scheduler-event-collector-color-hover: var(--jqx-scheduler-event-collector-color); /* Event collector color on hover */ --jqx-scheduler-month-view-number-size: 24px; /* The size of the day number in month view */ --jqx-scheduler-status-size: 7px; /* The size of the day number in month view */ --jqx-scheduler-status-padding: 5px; /* The paddng between the content of the event and the satus strip */ --jqx-scheduler-status-background: transparent; /* The size of the day number in month view */ --jqx-scheduler-status-free-background: white; /* Event Status 'free' background color */ --jqx-scheduler-status-tentative-background: 0 -244rem / 5rem 5rem linear-gradient(45deg, #fd7e14 25%, rgba(0, 0, 0, .2) 25%, rgba(0, 0, 0, .2) 50%, #fd7e14 50%, #fd7e14 75%, rgba(0, 0, 0, .2) 75%, rgba(0, 0, 0, .2)); /* Event status 'tentative' background color */ --jqx-scheduler-status-busy-background: #dc3545; /* Event status 'busy' background color */ --jqx-scheduler-status-out-of-office-background: #00a9e6; /* Event status 'out-of-office' background color */ --jqx-scheduler-cell-feedback-background: transparent; /* Cell feedback background color on event drop */ --jqx-scheduler-event-resize-indicator-size: var(--jqx-gantt-chart-timeline-task-resize-indicator-width); /* Event resize indicator size */ --jqx-scheduler-event-resize-indicator-color: var(--jqx-gantt-chart-timeline-task-resize-indicator-color); /* Event resize indicator color */ --jqx-scheduler-event-resize-indicator-border-color: var(--jqx-gantt-chart-timeline-task-resize-indicator-border-color); /* Event resize indicator border color */ --jqx-scheduler-restricted-background: 0 -245rem / 12px 12px linear-gradient(135deg, rgba(255, 0, 0, .15) 25%, transparent 25%, transparent 50%, rgba(255, 0, 0, .15) 50%, rgba(255, 0, 0, .15) 75%, transparent 75%, transparent); /* Restricted cells background color */ --jqx-scheduler-event-item-size: 50px; /* Event menu item size(height) */ --jqx-scheduler-event-button-size: 30px; /* Event menu item button size(delete button) */ --jqx-scheduler-event-border-radius: initial; /* Event border radius */ --jqx-scheduler-event-collector-border-radius: 20px; /* Event collector border radius */ --jqx-scheduler-context-menu-max-height: calc(4 * var(--jqx-scheduler-event-item-size)); /* Context menu max-height */ --jqx-scheduler-context-menu-max-width: 300px; /* Context menu max-width */ --jqx-scheduler-window-header-height: var(--jqx-gantt-chart-popup-window-header-height); /* Window editor header height */ --jqx-scheduler-window-footer-height: var(--jqx-gantt-chart-popup-window-footer-height); /* Window editor footer height */ --jqx-scheduler-event-label-font-weight: 300; /* Event label font weight */ --jqx-scheduler-event-time-font-weight: 300; /* Event time label font weight */ --jqx-scheduler-event-item-label-font-weight: 600; /* Event menu item label font-weight */ --jqx-scheduler-toast-default-width: 400px; /* Toast(notifications) default width */ --jqx-scheduler-toast-default-height: 50px; /* Toast(notifications) default height */ --jqx-scheduler-shortcut-size: 28px; /* The width of the shortuct of the view items when placed inside a drop down */ /* ── Window ─────────────────────────────────── */ --jqx-window-default-height: var(--jqx-box-height); /* default height */ --jqx-window-default-width: var(--jqx-box-width); /* default width */ --jqx-window-header-height: 40px; /* header height */ --jqx-window-footer-height: var(--jqx-bar-height); /* footer height */ --jqx-window-min-width: 250px; /* header width */ --jqx-window-header-padding: 10px; /* header and footer padding */ --jqx-window-footer-padding: 6.5px; /* header and footer padding */ --jqx-window-header-button-size: 24px; /* Size of the header buttons */ --jqx-window-header-icon-size: var(--jqx-font-size); /* size of the header button icons */ --jqx-window-header-background: var(--jqx-surface); /* Sets the background of the header section */ --jqx-window-footer-background: var(--jqx-surface); /* Sets the size of the background of the footer section */ --jqx-window-footer-button-width: 100px; /* Sets the width of the footer buttons */ --jqx-window-content-padding: 10px; /* Sets the content section padding */ /* ── Elevations ─────────────────────────────────── */ /* Highest elevation – used for topmost surfaces (modals, dialogs) */ --jqx-elevation-24: 0 24px 38px 3px rgba(0, 0, 0, .14), 0 9px 46px 8px rgba(0, 0, 0, .12), 0 11px 15px 0 rgba(0, 0, 0, .2); /* High elevation – for prominent cards or menus */ --jqx-elevation-16: 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12), 0 8px 10px 0 rgba(0, 0, 0, .2); /* Medium-high elevation – for raised cards or floating elements */ --jqx-elevation-12: 0 12px 17px 2px rgba(0, 0, 0, .14), 0 5px 22px 4px rgba(0, 0, 0, .12), 0 7px 8px 0 rgba(0, 0, 0, .2); /* Medium elevation – default cards, panels */ --jqx-elevation-8: 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 3px rgba(0, 0, 0, .12), 0 4px 15px 0 rgba(0, 0, 0, .2); /* Slight elevation – small popovers, tooltips */ --jqx-elevation-6: 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12), 0 3px 5px 0 rgba(0, 0, 0, .2); /* Low elevation – subtle shadow for buttons, inputs */ --jqx-elevation-4: 0 2px 4px 0 rgba(0, 0, 0, .14), 0 4px 5px 0 rgba(0, 0, 0, .12), 0 1px 10px 0 rgba(0, 0, 0, .2); /* Minimal elevation – slight shadow, barely raised */ --jqx-elevation-2: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12); /* Very subtle elevation – almost flat */ --jqx-elevation-1: 0 0 2px 0 rgba(0, 0, 0, .14), 0 2px 2px 0 rgba(0, 0, 0, .12), 0 1px 3px 0 rgba(0, 0, 0, .2); /* No elevation – completely flat surface */ --jqx-elevation-0: none; /* Breakpoints */ --breakpoint-xs: 0; --breakpoint-sm: 576px; --breakpoint-md: 768px; --breakpoint-lg: 992px; --breakpoint-xl: 1200px; /*Misc*/ --pseudo-element-height: 0; } /* ── Dark Theme Variant ───────────────────────────────────────────── */ body[theme="dark"], .jqx-ui-component[theme="dark"] { --jqx-white: #ffffff; --jqx-black: #0a0a0a; --jqx-base: #3d3d3d; --jqx-base-50: #d6d6d6; --jqx-base-100: #adadad; --jqx-base-200: #5c5c5c; --jqx-base-300: #3d3d3d; --jqx-base-400: #383838; --jqx-base-500: #333333; --jqx-base-600: #2e2e2e; --jqx-base-700: #292929; --jqx-base-800: #1f1f1f; --jqx-base-900: #141414; --jqx-base-light: #adadad; --jqx-base-lighter: #ffffff; --jqx-base-dark: #292929; --jqx-base-darker: #141414; --jqx-primary: #0073E6; --jqx-primary-rgb: 0, 115, 230; --jqx-primary-light: #62abf5; --jqx-primary-lighter: #96c6fa; --jqx-primary-dark: #115fa3; --jqx-primary-darker: #0c3a5e; --jqx-secondary: #2e2e2e; --jqx-secondary-light: #3b3b3b; --jqx-secondary-lighter: #727272; --jqx-secondary-dark: #2a2a2a; --jqx-secondary-darker: #1e1e1e; --jqx-info: #2886de; --jqx-info-light: #3a93e6; --jqx-info-lighter: #99c5f5; --jqx-info-dark: #2477c5; --jqx-info-darker: #1b4f81; --jqx-success: #107c10; --jqx-success-light: #0f970f; --jqx-success-lighter: #9fd89f; --jqx-success-dark: #0f6e0f; --jqx-success-darker: #0d4a0d; --jqx-warning: #fde300; --jqx-warning-light: #ffe718; --jqx-warning-lighter: #fff786; --jqx-warning-dark: #e0c901; --jqx-warning-darker: #928404; --jqx-danger: #d13438; --jqx-danger-light: #db4448; --jqx-danger-lighter: #ef9f9e; --jqx-danger-dark: #b92f32; --jqx-danger-darker: #792224; --jqx-on-base: #ffffff; --jqx-on-base-light: #141414; --jqx-on-base-lighter: #141414; --jqx-on-base-dark: #ffffff; --jqx-on-base-darker: #ffffff; --jqx-on-primary: #0a0a0a; --jqx-on-primary-light: #0c3a5e; --jqx-on-primary-lighter: #0c3a5e; --jqx-on-primary-dark: #ffffff; --jqx-on-primary-darker: #ffffff; --jqx-on-secondary: #ffffff; --jqx-on-secondary-light: #ffffff; --jqx-on-secondary-lighter: #ffffff; --jqx-on-secondary-dark: #ffffff; --jqx-on-secondary-darker: #ffffff; --jqx-on-info: #ffffff; --jqx-on-info-light: #ffffff; --jqx-on-info-lighter: #1b4f81; --jqx-on-info-dark: #ffffff; --jqx-on-info-darker: #ffffff; --jqx-on-success: #ffffff; --jqx-on-success-light: #ffffff; --jqx-on-success-lighter: #0d4a0d; --jqx-on-success-dark: #ffffff; --jqx-on-success-darker: #ffffff; --jqx-on-warning: #141414; --jqx-on-warning-light: #141414; --jqx-on-warning-lighter: #928404; --jqx-on-warning-dark: #141414; --jqx-on-warning-darker: #ffffff; --jqx-on-danger: #ffffff; --jqx-on-danger-light: #ffffff; --jqx-on-danger-lighter: #792224; --jqx-on-danger-dark: #ffffff; --jqx-on-danger-darker: #ffffff; --jqx-secondary-background: var(--jqx-base-500); --jqx-secondary-background-alt: var(--jqx-base-500); --jqx-outline-color: var(--jqx-primary); --jqx-text-title-color: var(--jqx-base-50); --jqx-text-color: var(--jqx-base-50); --jqx-text-secondary-color: var(--jqx-base-100); --jqx-text-tertiary-color: var(--jqx-base-200); --jqx-text-disabled-color: var(--jqx-base-300); --jqx-text-contrast-color: var(--jqx-white); --jqx-card-border: var(--jqx-base-500); --jqx-grid-cell-background-freeze-selected: var(--jqx-base-800); --jqx-background: var(--jqx-base-800); /* The theme background color. The background color appears behind scrollable content.*/ --jqx-background-color: var(--jqx-white); /* Text color on top of a background background */ --jqx-surface: var(--jqx-base-800); /* The theme surface color. Surface colors affect surfaces of components, such as cards, sheets, and menus. */ --jqx-surface-color: var(--jqx-white); /* Text color on top of a surface surface */ --jqx-disabled: #535353; /* The theme primary color in disabled state. */ --jqx-disabled-color: #fff; /* Text color on top of a theme background in disabled state */ --jqx-border: var(--jqx-base-500); /* The theme background border color */ --jqx-editor-selection: var(--jqx-primary); --jqx-editor-selection-color: var(--jqx-on-primary-dark); --jqx-ui-state-hover: var(--jqx-base-500); --jqx-ui-state-color-hover: #fff; --jqx-ui-state-border-hover: var(--jqx-ui-state-hover); --jqx-ui-state-active: var(--jqx-primary); --jqx-ui-state-color-active: var(--jqx-on-primary-dark); --jqx-ui-state-border-active: var(--jqx-primary); --jqx-ui-state-focus: var(--jqx-base-500); --jqx-ui-state-color-focus: #fff; --jqx-ui-state-border-focus: var(--jqx-base-500); --jqx-ui-state-selected: var(--jqx-secondary-light); --jqx-ui-state-color-selected: var(--jqx-on-secondary-light); --jqx-ui-state-border-selected: var(--jqx-secondary-light); --jqx-alternation-index0-color: var(--jqx-surface-color); /* Alternation color for index0 */ --jqx-alternation-index0-border: var(--jqx-base-700); /* Alternation border color for index0 */ --jqx-alternation-index0-background: var(--jqx-base-700); /* Alternation background color for index0 */ --jqx-alternation-index1-color: #111; /*Alternation color for index1 */ --jqx-alternation-index1-border: #9BBB59; /* Alternation border color for index1 */ --jqx-alternation-index1-background: #9BBB59; /* Alternation background color for index1 */ --jqx-alternation-index2-color: #fff; /*Alternation color for index2 */ --jqx-alternation-index2-border: #FC3752; /* Alternation border color for index2 */ --jqx-alternation-index2-background: #FC3752; /* Alternation background color for index2 */ --jqx-grid-cell-background-freeze: #242424; --jqx-grid-cell-color-freeze: #fff; --jqx-scroll-bar-background: var(--jqx-surface); --jqx-scroll-bar-track-background: var(--jqx-scroll-bar-background); --jqx-scroll-bar-border: var(--jqx-surface); --jqx-scroll-bar-thumb-background: var(--jqx-base-200); --jqx-scroll-bar-thumb-border: transparent; --jqx-scroll-bar-thumb-background-hover: var(--jqx-base-100); --jqx-scroll-bar-thumb-border-hover: transparent; --jqx-scroll-bar-thumb-background-active: var(--jqx-base-100); --jqx-scroll-bar-thumb-border-active: transparent; --jqx-scroll-bar-button-background: var(--jqx-surface); --jqx-scroll-bar-button-border: var(--jqx-surface); --jqx-scroll-bar-button-color: var(--jqx-on-surface); ; --jqx-scroll-bar-button-background-hover: var(--jqx-surface); --jqx-scroll-bar-button-border-hover: var(--jqx-surface); --jqx-scroll-bar-button-color-hover: var(--jqx-on-surface); --jqx-scroll-bar-button-background-active: var(--jqx-surface); --jqx-scroll-bar-button-border-active: var(--jqx-surface); --jqx-scroll-bar-button-color-active: var(--jqx-on-surface); --jqx-gantt-chart-timeline-nonworking-color: #3E3E42; --jqx-scheduler-timeline-weekend-color: var(--jqx-background); /* Sets the background color for the weekend cells */ --jqx-scheduler-timeline-nonworking-color: var(--jqx-gantt-chart-timeline-nonworking-color); /* Sets the background color for nonworking days/hours cells */ --jqx-scheduler-day-week-view-hour-color: var(--jqx-base-500); --jqx-scheduler-view-horizontal-line-color: var(--jqx-base-500); --jqx-scheduler-view-vertical-line-color: var(--jqx-base-500); --jqx-scheduler-day-week-view-vertical-line-color: var(--jqx-base-600); --jqx-scheduler-event-background-rgb: 103, 176, 245; --jqx-scheduler-event-background: rgba(var(--jqx-scheduler-event-background-rgb), 1); --jqx-scheduler-event-color: var(--jqx-on-primary-dark); --jqx-scheduler-event-focus: rgba(var(--jqx-scheduler-event-background-rgb), .9); --jqx-scheduler-event-color-focus: var(--jqx-scheduler-event-color); --jqx-scheduler-event-hover: rgba(var(--jqx-scheduler-event-background-rgb), .8); --jqx-scheduler-event-color-hover: var(--jqx-scheduler-event-color); --jqx-scheduler-event-collector-background: rgba(var(--jqx-primary-rgb), 1); --jqx-scheduler-event-collector-color: var(--jqx-on-primary-dark); --jqx-scheduler-event-collector-focus: rgba(var(--jqx-primary-rgb), .9); --jqx-scheduler-event-collector-color-focus: var(--jqx-scheduler-event-collector-color); --jqx-scheduler-event-collector-hover: rgba(var(--jqx-primary-rgb), .8); --jqx-scheduler-event-collector-color-hover: var(--jqx-scheduler-event-collector-color); --jqx-scheduler-status-free-background: white; --jqx-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)); --jqx-scheduler-status-busy-background: #dc3545; --jqx-scheduler-status-out-of-office-background: #00a9e6; --jqx-scheduler-event-resize-indicator-color: var(--jqx-gantt-chart-timeline-task-resize-indicator-color); --jqx-scheduler-event-resize-indicator-border-color: var(--jqx-gantt-chart-timeline-task-resize-indicator-border-color); --jqx-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); --jqx-window-header-background: var(--jqx-surface); --jqx-window-footer-background: var(--jqx-surface); } /* all elements */ jqx-accordion, jqx-button, jqx-toggle-button, jqx-repeat-button, jqx-switch-button, jqx-slider, jqx-led, jqx-tank, jqx-check-box, jqx-calendar, jqx-carousel, jqx-card, jqx-radio-button, jqx-progress-bar, jqx-circular-progress-bar, jqx-scroll-bar, jqx-gauge, jqx-grid, jqx-numeric-text-box, jqx-list-box, jqx-combo-box, jqx-docking-layout, jqx-drop-down-list, jqx-drop-down-button, jqx-multi-split-button, jqx-power-button, jqx-text-box, jqx-multiline-text-box, jqx-password-text-box, jqx-masked-text-box, jqx-tabs, jqx-date-time-picker, jqx-array, jqx-time-picker, jqx-menu, jqx-list-menu, jqx-window, jqx-alert-window, jqx-prompt-window, jqx-multiline-prompt-window, jqx-progress-window, jqx-tabs-window, jqx-dialog-window, jqx-pager, jqx-progress-window, jqx-wait-window, jqx-splitter, jqx-tree, jqx-filter-panel, jqx-breadcrumb, jqx-color-panel, jqx-color-picker, jqx-sort-panel, jqx-group-panel, jqx-column-panel, jqx-multi-column-filter-panel, jqx-query-builder, jqx-card-view, jqx-tooltip, jqx-layout, jqx-path, jqx-kanban, jqx-gantt-chart, jqx-sheduler, jqx-pivot-panel { padding: 0px; margin: 0px; overflow: hidden; display: block; } .jqx-element { outline: none; box-sizing: border-box; font-family: var(--jqx-font-family); font-size: var(--jqx-font-size); font-weight: var(--jqx-font-weight); /* Apple iOS specific browser CSS variable used for area highlighting on click. Reference link for details: https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/AdjustingtheTextSize/AdjustingtheTextSize.html#//apple_ref/doc/uid/TP40006510-SW5 */ -webkit-tap-highlight-color: transparent; background: var(--jqx-background); color: var(--jqx-background-color); } .jqx-root { width: 100%; height: 100%; padding: 0; margin: 0; box-sizing: border-box; } jqx-button[disabled], jqx-calendar[disabled], jqx-combo-box[disabled], jqx-chip[disabled], jqx-toggle-button[disabled], jqx-repeat-button[disabled], jqx-switch-button[disabled], jqx-slider[disabled], jqx-led[disabled], jqx-tank[disabled], jqx-check-box[disabled], jqx-radio-button[disabled], jqx-progress-bar[disabled], jqx-circular-progress-bar[disabled], jqx-gauge[disabled], jqx-grid[disabled], jqx-numeric-text-box[disabled], jqx-list-item[disabled], jqx-list-box[disabled], jqx-drop-down-list[disabled], jqx-drop-down-button[disabled], jqx-multi-split-button[disabled], jqx-scroll-bar[disabled], jqx-power-button[disabled], jqx-text-box[disabled], jqx-multiline-text-box[disabled], jqx-password-text-box[disabled], jqx-tab[disabled], jqx-tabs[disabled], jqx-time-picker[disabled], jqx-menu-item[disabled], jqx-menu-items-group[disabled], jqx-menu[disabled], jqx-list-menu[disabled], jqx-window[disabled], jqx-dialog-window[disabled], jqx-progress-window[disabled], jqx-wait-window[disabled], jqx-alert-window[disabled], jqx-prompt-window[disabled], jqx-card[disabled], jqx-multiline-prompt-window[disabled], jqx-splitter[disabled], jqx-tree-item[disabled]>.jqx-tree-item-label-container, jqx-tree-items-group[disabled]>.jqx-tree-item-label-container, jqx-tree[disabled], jqx-docking-layout[disabled], jqx-filter-panel[disabled], jqx-breadcrumb[disabled], jqx-pager[disabled], jqx-pager .jqx-pager-button[disabled], jqx-color-panel[disabled], jqx-color-picker[disabled], jqx-input[disabled], jqx-check-input[disabled], jqx-number-input[disabled], jqx-multi-input[disabled], jqx-multi-combo-input[disabled], jqx-date-input[disabled], jqx-time-input[disabled], jqx-date-range-input[disabled], jqx-password-input[disabled], jqx-text-area[disabled], jqx-sort-panel[disabled], jqx-group-panel[disabled], jqx-column-panel[disabled], jqx-multi-column-filter-panel[disabled], jqx-card-view[disabled], jqx-query-builder[disabled], jqx-date-time-picker[disabled], jqx-layout[disabled], jqx-path[disabled], jqx-kanban[disabled], jqx-gantt[disabled], jqx-gantt-chart[disabled], jqx-scheduler[disabled], jqx-button-group[disabled], jqx-table[disabled], jqx-pivot-table[disabled], jqx-notification-panel[disabled], jqx-formatting-panel[disabled], jqx-color-input[disabled], jqx-editor[disabled] { opacity: 0.55; cursor: default; pointer-events: none; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } jqx-accordion, jqx-calendar, jqx-card-view, jqx-button, jqx-color-panel, jqx-docking-layout, jqx-date-time-picker, jqx-gantt-chart, jqx-scheduler, jqx-grid, jqx-menu, jqx-list-menu, jqx-list-box, jqx-scroll-viewer, jqx-progress-bar, jqx-pager, jqx-splitter, jqx-tank, jqx-time-picker, jqx-tree, jqx-text-box, jqx-multiline-text-box, jqx-layout, .jqx-window, jqx-kanban, jqx-sort-panel, jqx-button-group, jqx-group-panel, jqx-column-panel, jqx-multi-column-filter-panel, jqx-formatting-panel { border-color: var(--jqx-border); border-top-left-radius: var(--jqx-border-top-left-radius); border-top-right-radius: var(--jqx-border-top-right-radius); border-bottom-left-radius: var(--jqx-border-bottom-left-radius); border-bottom-right-radius: var(--jqx-border-bottom-right-radius); border-width: var(--jqx-border-width); border-style: solid; } jqx-numeric-text-box.jqx-element, jqx-masked-text-box.jqx-element, jqx-multiline-text-box.jqx-element, jqx-text-box.jqx-element, jqx-drop-down-button.jqx-element, jqx-drop-down-list.jqx-element, jqx-combo-box.jqx-element, jqx-password-text-box.jqx-element, jqx-multi-split-button.jqx-element, jqx-switch-button.jqx-element, jqx-multiline-text-box.jqx-element, jqx-date-time-picker.jqx-element, jqx-pager.jqx-element, jqx-menu.jqx-element, jqx-menu.jqx-element, jqx-numeric-text-box.jqx-element, jqx-tabs.jqx-element, jqx-tank.jqx-element, jqx-slider.jqx-element, jqx-filter-panel.jqx-element, jqx-color-panel.jqx-element, jqx-color-picker.jqx-element, jqx-query-builder.jqx-element, jqx-card-view.jqx-element, jqx-path.jqx-element, jqx-kanban.jqx-element { overflow: visible; } .jqx-disabled { opacity: 0.55; cursor: default; pointer-events: none; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } /* Common code for Box Components with Content and Action buttons. */ .jqx-element input::selection, .jqx-input::selection { background: var(--jqx-editor-selection); color: var(--jqx-editor-selection-color); } /* Style for standard HTML scrollbars when dark theme is applied (limited browser support) */ @media (hover: hover) { body[theme="dark"], .jqx-element[theme="dark"] { scrollbar-color: var(--jqx-scroll-bar-thumb-background) var(--jqx-scroll-bar-track-background); } body[theme="dark"]::-webkit-scrollbar, body[theme="dark"] ::-webkit-scrollbar { background-color: var(--jqx-background); } body[theme="dark"]::-webkit-scrollbar-track, body[theme="dark"] ::-webkit-scrollbar-track, body[theme="dark"]::-webkit-scrollbar-track-piece, body[theme="dark"] ::-webkit-scrollbar-track-piece { background-color: var(--jqx-scroll-bar-track-background); } body[theme="dark"]::-webkit-scrollbar-thumb, body[theme="dark"] ::-webkit-scrollbar-thumb { border: 1px solid var(--jqx-scroll-bar-thumb-border); background-color: var(--jqx-scroll-bar-thumb-background); } body[theme="dark"]::-webkit-scrollbar-thumb:hover, body[theme="dark"] ::-webkit-scrollbar-thumb:hover { border-color: var(--jqx-scroll-bar-thumb-border-hover); background-color: var(--jqx-scroll-bar-thumb-background-hover); } body[theme="dark"]::-webkit-scrollbar-button, body[theme="dark"] ::-webkit-scrollbar-button { background-color: var(--jqx-scroll-bar-button-background); } } /* jqx-job-panel */ jqx-job-panel { /* Colour marks the one row that needs attention: a job that failed. A job that ran is the ordinary case and says "ok" in words - on a table an operator glances at all shift, a column of green teaches them to stop looking. */ --jqx-job-panel-failed-color: var(--jqx-industrial-alarm-critical-text, var(--jqx-error)); --jqx-job-panel-ok-color: var(--jqx-text-tertiary-color, var(--jqx-text-color)); --jqx-job-panel-mono: var(--jqx-industrial-readout-font, ui-monospace, "Cascadia Mono", "Consolas", "DejaVu Sans Mono", monospace); display: block; width: 100%; } jqx-job-panel .jqx-job-panel-container { position: relative; display: flex; flex-direction: column; gap: 6px; width: 100%; height: 100%; box-sizing: border-box; } jqx-job-panel .jqx-job-panel-header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 12px; } jqx-job-panel .jqx-job-panel-title { font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--jqx-text-secondary-color, var(--jqx-text-color)); } jqx-job-panel .jqx-job-panel-count { font-variant-numeric: tabular-nums; color: var(--jqx-text-tertiary-color, var(--jqx-text-color)); } jqx-job-panel .jqx-job-panel-body { flex: 1; min-height: 0; overflow: auto; border: 1px solid var(--jqx-border, #ccd6e0); border-radius: var(--jqx-border-radius, 3px); background: var(--jqx-background, #fff); } jqx-job-panel .jqx-job-panel-table { width: 100%; border-collapse: collapse; font-size: 12px; } jqx-job-panel .jqx-job-panel-table th[scope=col] { position: sticky; top: 0; z-index: 1; text-align: left; font-weight: 500; padding: 6px 10px; background: var(--jqx-surface, #f4f6f8); border-bottom: 1px solid var(--jqx-border, #ccd6e0); color: var(--jqx-text-tertiary-color, var(--jqx-text-color)); } jqx-job-panel { /* Baseline, so a button's words sit on the same line as the job's name beside it and a wrapped schedule still starts level with the rest of its row. */ } jqx-job-panel .jqx-job-panel-table td, jqx-job-panel .jqx-job-panel-table th[scope=row] { padding: 7px 10px; vertical-align: baseline; border-bottom: 1px solid var(--jqx-border-light, var(--jqx-border, #ccd6e0)); } jqx-job-panel .jqx-job-panel-row:last-child td, jqx-job-panel .jqx-job-panel-row:last-child th { border-bottom: 0; } jqx-job-panel .jqx-job-panel-name { min-width: 10ch; text-align: left; font-weight: 600; } jqx-job-panel { /* A switched-off job keeps its place and recedes. An absent job and a disabled one are different things, and the difference matters at three in the morning. It recedes in colour, not opacity: faded to 0.55 its words fell to 2.6:1, below what can be read at three in the morning - the secondary text colour keeps 4.5:1, and the OFF word says it. */ } jqx-job-panel .jqx-job-panel-row.off > th, jqx-job-panel .jqx-job-panel-row.off > td:not(.jqx-job-panel-actions), jqx-job-panel .jqx-job-panel-row.off .jqx-job-panel-last { color: var(--jqx-text-secondary-color, var(--jqx-text-color)); } jqx-job-panel { /* but not its buttons: the station still runs a switched-off job by hand, and a faded button reads as one that cannot be pressed */ } jqx-job-panel .jqx-job-panel-off { font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--jqx-text-tertiary-color, var(--jqx-text-color)); } jqx-job-panel .jqx-job-panel-bad { display: block; font-size: 11px; font-weight: 400; color: var(--jqx-job-panel-failed-color); } jqx-job-panel { /* The schedule and the action wrap, so the table fits the panel it is given; the time of the last run and the buttons do not, because a broken time or a button on two lines reads worse than a wrapped sentence. A tag name breaks at its dots rather than off the edge. */ } jqx-job-panel .jqx-job-panel-when { min-width: 12ch; } jqx-job-panel .jqx-job-panel-does { min-width: 14ch; font-family: var(--jqx-job-panel-mono); } jqx-job-panel .jqx-job-panel-tag { white-space: nowrap; } jqx-job-panel .jqx-job-panel-last { white-space: nowrap; color: var(--jqx-job-panel-ok-color); } jqx-job-panel .jqx-job-panel-last.failed { color: var(--jqx-job-panel-failed-color); font-weight: 600; } jqx-job-panel .jqx-job-panel-why { display: block; max-width: 30ch; margin-top: 2px; font-size: 11px; font-weight: 400; line-height: 1.35; white-space: normal; overflow-wrap: anywhere; } jqx-job-panel { /* A table cell, not a flex box: display: flex takes a cell out of the table, and the row's rule then stops short of the buttons. */ } jqx-job-panel .jqx-job-panel-actions { text-align: right; white-space: nowrap; } jqx-job-panel .jqx-job-panel-actions > button + button { margin-left: 6px; } jqx-job-panel .jqx-job-panel-run, jqx-job-panel .jqx-job-panel-toggle { /* a target of at least 24 pixels (WCAG 2.2, 2.5.8) */ min-height: 26px; padding: 0 10px; border: 1px solid var(--jqx-border, #ccd6e0); border-radius: var(--jqx-border-radius, 3px); background: var(--jqx-surface, #f4f6f8); color: var(--jqx-text-color); font: inherit; font-size: 12px; cursor: pointer; } jqx-job-panel .jqx-job-panel-run { border-color: var(--jqx-primary); color: var(--jqx-primary); font-weight: 600; } jqx-job-panel .jqx-job-panel-run[disabled] { opacity: 0.5; cursor: default; } jqx-job-panel .jqx-job-panel-run:focus-visible, jqx-job-panel .jqx-job-panel-toggle:focus-visible { outline: 2px solid var(--jqx-primary); outline-offset: 1px; } jqx-job-panel .jqx-job-panel-empty { padding: 12px; color: var(--jqx-text-tertiary-color, var(--jqx-text-color)); } jqx-job-panel { /* named for the screen reader, off the screen for everybody else */ } jqx-job-panel .jqx-job-panel-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } jqx-job-panel .jqx-job-panel-ask { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 12px; background: rgba(0, 0, 0, 0.45); z-index: 2; } jqx-job-panel .jqx-job-panel-ask[hidden] { display: none; } jqx-job-panel .jqx-job-panel-ask-box { max-width: 380px; padding: 14px 16px; border: 1px solid var(--jqx-border, #ccd6e0); border-radius: var(--jqx-border-radius, 3px); background: var(--jqx-background, #fff); color: var(--jqx-text-color); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35); } jqx-job-panel .jqx-job-panel-ask-box p { margin: 6px 0 12px; font-size: 12px; color: var(--jqx-text-secondary-color, var(--jqx-text-color)); } jqx-job-panel .jqx-job-panel-ask-actions { display: flex; justify-content: flex-end; gap: 8px; } jqx-job-panel .jqx-job-panel-ask-cancel, jqx-job-panel .jqx-job-panel-ask-confirm { min-height: 30px; padding: 0 14px; border-radius: var(--jqx-border-radius, 3px); font: inherit; cursor: pointer; } jqx-job-panel .jqx-job-panel-ask-cancel { border: 1px solid var(--jqx-border, #ccd6e0); background: var(--jqx-surface, #f4f6f8); color: var(--jqx-text-color); } jqx-job-panel .jqx-job-panel-ask-confirm { border: 1px solid var(--jqx-primary); background: var(--jqx-primary); color: var(--jqx-primary-color, #fff); font-weight: 600; } jqx-job-panel .jqx-job-panel-ask-cancel:focus-visible, jqx-job-panel .jqx-job-panel-ask-confirm:focus-visible { outline: 2px solid var(--jqx-primary); outline-offset: 2px; } jqx-job-panel[disabled] { opacity: 0.6; pointer-events: none; } /* .jqx-element carries the framework's own background and color at higher specificity than a bare tag selector, so anything that sets those has to be restated here. */ jqx-job-panel.jqx-element { background: transparent; } /* jqx-recipe-panel */ jqx-recipe-panel { /* Colour is spent on the one thing that needs it: an entry the plant refused. A loaded recipe is the ordinary case and says so in words, not in green - on a screen an operator reads all shift, a panel that lights up every time it works teaches them to ignore it. */ --jqx-recipe-panel-refused-color: var(--jqx-industrial-alarm-critical-text, var(--jqx-error)); --jqx-recipe-panel-done-color: var(--jqx-text-secondary-color, var(--jqx-text-color)); --jqx-recipe-panel-value-font: var(--jqx-industrial-readout-font, ui-monospace, "Cascadia Mono", "Consolas", "DejaVu Sans Mono", monospace); --jqx-recipe-panel-list-width: 180px; display: block; width: 100%; } jqx-recipe-panel .jqx-recipe-panel-container { position: relative; display: flex; flex-direction: column; gap: 6px; width: 100%; height: 100%; box-sizing: border-box; } jqx-recipe-panel .jqx-recipe-panel-header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 12px; } jqx-recipe-panel .jqx-recipe-panel-title { font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--jqx-text-secondary-color, var(--jqx-text-color)); } jqx-recipe-panel { /* the choices on the left, what loading one would do on the right */ } jqx-recipe-panel .jqx-recipe-panel-body { display: grid; grid-template-columns: var(--jqx-recipe-panel-list-width) minmax(0, 1fr); gap: 12px; min-height: 0; flex: 1; } jqx-recipe-panel .jqx-recipe-panel-list { margin: 0; padding: 0; list-style: none; overflow-y: auto; min-height: 0; border: 1px solid var(--jqx-border, #ccd6e0); border-radius: var(--jqx-border-radius, 3px); background: var(--jqx-background, #fff); } jqx-recipe-panel .jqx-recipe-panel-item { display: flex; flex-direction: column; gap: 1px; /* a target of at least 24 pixels (WCAG 2.2, 2.5.8), and more on a plant screen */ min-height: 34px; justify-content: center; padding: 6px 10px; border-bottom: 1px solid var(--jqx-border-light, var(--jqx-border, #ccd6e0)); cursor: pointer; } jqx-recipe-panel .jqx-recipe-panel-item:last-child { border-bottom: 0; } jqx-recipe-panel .jqx-recipe-panel-item.selected { background: var(--jqx-ui-state-selected, var(--jqx-primary)); color: var(--jqx-ui-state-color-selected, var(--jqx-primary-color, #fff)); } jqx-recipe-panel .jqx-recipe-panel-item:focus-visible { outline: 2px solid var(--jqx-primary); outline-offset: -2px; } jqx-recipe-panel .jqx-recipe-panel-item-name { font-weight: 600; } jqx-recipe-panel .jqx-recipe-panel-item-note { font-size: 11px; opacity: 0.8; } jqx-recipe-panel .jqx-recipe-panel-detail { overflow-y: auto; min-height: 0; } jqx-recipe-panel .jqx-recipe-panel-values { width: 100%; border-collapse: collapse; } jqx-recipe-panel .jqx-recipe-panel-value th { text-align: start; font-weight: 400; padding-block: 4px; padding-inline: 0 8px; color: var(--jqx-text-secondary-color, var(--jqx-text-color)); } jqx-recipe-panel { /* Numbers line up on their right edge, as a column of setpoints is read: 42 under 180, not under its first digit. */ } jqx-recipe-panel .jqx-recipe-panel-value-number { font-family: var(--jqx-recipe-panel-value-font); font-weight: 600; white-space: nowrap; padding-block: 4px; padding-inline: 0 8px; text-align: end; font-variant-numeric: tabular-nums; } jqx-recipe-panel[right-to-left] { direction: rtl; } jqx-recipe-panel { /* what the plant would not take, kept in front of the operator rather than in a log */ } jqx-recipe-panel .jqx-recipe-panel-value.refused th, jqx-recipe-panel .jqx-recipe-panel-value.refused .jqx-recipe-panel-value-number { text-decoration: line-through; opacity: 0.7; } jqx-recipe-panel .jqx-recipe-panel-value-refused { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--jqx-recipe-panel-refused-color); } jqx-recipe-panel .jqx-recipe-panel-why { display: block; max-width: 28ch; margin-top: 2px; font-size: 11px; line-height: 1.35; text-transform: none; letter-spacing: 0; white-space: normal; overflow-wrap: anywhere; } jqx-recipe-panel .jqx-recipe-panel-empty { margin: 0; padding: 10px; font-size: 12px; color: var(--jqx-text-tertiary-color, var(--jqx-text-color)); } jqx-recipe-panel .jqx-recipe-panel-footer { display: flex; align-items: center; gap: 12px; } jqx-recipe-panel .jqx-recipe-panel-load { min-height: 32px; padding: 0 18px; border: 1px solid var(--jqx-primary); border-radius: var(--jqx-border-radius, 3px); background: var(--jqx-primary); color: var(--jqx-primary-color, #fff); font: inherit; font-weight: 600; cursor: pointer; } jqx-recipe-panel .jqx-recipe-panel-load[disabled] { opacity: 0.5; cursor: default; } jqx-recipe-panel .jqx-recipe-panel-load:focus-visible { outline: 2px solid var(--jqx-primary); outline-offset: 2px; } jqx-recipe-panel .jqx-recipe-panel-outcome { font-size: 12px; color: var(--jqx-recipe-panel-done-color); } jqx-recipe-panel .jqx-recipe-panel-outcome.refused { color: var(--jqx-recipe-panel-refused-color); font-weight: 600; } jqx-recipe-panel { /* the confirmation: it names what is about to be written, over the panel rather than somewhere else, so the list it is about is still on screen behind it */ } jqx-recipe-panel .jqx-recipe-panel-ask { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 12px; background: rgba(0, 0, 0, 0.45); z-index: 2; } jqx-recipe-panel .jqx-recipe-panel-ask[hidden] { display: none; } jqx-recipe-panel .jqx-recipe-panel-ask-box { max-width: 420px; max-height: 100%; overflow-y: auto; padding: 14px 16px; border: 1px solid var(--jqx-border, #ccd6e0); border-radius: var(--jqx-border-radius, 3px); background: var(--jqx-background, #fff); color: var(--jqx-text-color); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35); } jqx-recipe-panel .jqx-recipe-panel-ask-box p { margin: 6px 0 8px; font-size: 12px; color: var(--jqx-text-secondary-color, var(--jqx-text-color)); } jqx-recipe-panel .jqx-recipe-panel-ask-list { margin: 0 0 12px; padding: 0; padding-inline-start: 16px; font-size: 12px; max-height: 180px; overflow-y: auto; } jqx-recipe-panel .jqx-recipe-panel-ask-list b { font-family: var(--jqx-recipe-panel-value-font); } jqx-recipe-panel .jqx-recipe-panel-ask-actions { display: flex; justify-content: flex-end; gap: 8px; } jqx-recipe-panel .jqx-recipe-panel-ask-cancel, jqx-recipe-panel .jqx-recipe-panel-ask-confirm { min-height: 30px; padding: 0 14px; border-radius: var(--jqx-border-radius, 3px); font: inherit; cursor: pointer; } jqx-recipe-panel .jqx-recipe-panel-ask-cancel { border: 1px solid var(--jqx-border, #ccd6e0); background: var(--jqx-surface, #f4f6f8); color: var(--jqx-text-color); } jqx-recipe-panel .jqx-recipe-panel-ask-confirm { border: 1px solid var(--jqx-primary); background: var(--jqx-primary); color: var(--jqx-primary-color, #fff); font-weight: 600; } jqx-recipe-panel .jqx-recipe-panel-ask-cancel:focus-visible, jqx-recipe-panel .jqx-recipe-panel-ask-confirm:focus-visible { outline: 2px solid var(--jqx-primary); outline-offset: 2px; } jqx-recipe-panel[disabled] { opacity: 0.6; pointer-events: none; } /* jqx-accordion */ jqx-accordion { width: var(--jqx-accordion-default-width); height: var(--jqx-accordion-default-height); border: 0px; display: block; } jqx-accordion.jqx-element { background: transparent; } jqx-accordion:not(.jqx-element) { visibility: hidden; } jqx-accordion > .jqx-container { overflow: auto; touch-action: none; padding: 10px; } jqx-accordion.jqx-container { overflow: auto; touch-action: none; } jqx-accordion .jqx-reordering * { user-select: none; -webkit-user-select: none; cursor: move; } jqx-accordion .jqx-empty:after { content: "No accordion items."; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; } jqx-accordion .jqx-accordion.jqx-container { padding: 10px; } jqx-accordion jqx-accordion-item { font-size: inherit; font-family: inherit; display: block; overflow: hidden; box-sizing: border-box; box-shadow: var(--jqx-elevation-4); width: 100%; border: 0px; border-top-left-radius: var(--jqx-item-border-top-left-radius); border-top-right-radius: var(--jqx-item-border-top-right-radius); border-bottom-left-radius: var(--jqx-item-border-bottom-left-radius); border-bottom-right-radius: var(--jqx-item-border-bottom-right-radius); } jqx-accordion jqx-accordion-item:first-child { border-top-left-radius: var(--jqx-first-item-border-top-left-radius, --jqx-item-border-top-left-radius); border-top-right-radius: var(--jqx-first-item-border-top-right-radius, --jqx-item-border-top-right-radius); border-bottom-left-radius: var(--jqx-first-item-border-bottom-left-radius, --jqx-item-border-bottom-left-radius); border-bottom-right-radius: var(--jqx-first-item-border-bottom-right-radius, --jqx-item-border-bottom-right-radius); } jqx-accordion jqx-accordion-item:last-child { border-top-left-radius: var(--jqx-last-item-border-top-left-radius, --jqx-item-border-top-left-radius); border-top-right-radius: var(--jqx-last-item-border-top-right-radius, --jqx-item-border-top-right-radius); border-bottom-left-radius: var(--jqx-last-item-border-bottom-left-radius, --jqx-item-border-bottom-left-radius); border-bottom-right-radius: var(--jqx-last-item-border-bottom-right-radius, --jqx-item-border-bottom-right-radius); } jqx-accordion jqx-accordion-item > .jqx-container { border-bottom: var(--jqx-border-width) solid var(--jqx-border); } jqx-accordion jqx-accordion-item .jqx-ripple { background-color: var(--jqx-background-color); opacity: 0.5; } jqx-accordion jqx-accordion-item .jqx-accordion-item-header { width: 100%; cursor: pointer; color: var(--jqx-surface-color); background: var(--jqx-surface); border-color: var(--jqx-border); font-family: inherit; font-size: inherit; box-sizing: border-box; padding: 0px 24px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: flex; align-items: center; position: relative; height: var(--jqx-accordion-item-header-height); } jqx-accordion jqx-accordion-item .jqx-accordion-item-header > .jqx-arrow { width: var(--jqx-editor-addon-width); display: flex; justify-content: center; align-items: center; order: 2; } jqx-accordion jqx-accordion-item .jqx-accordion-item-header > .jqx-arrow:after { vertical-align: middle; content: var(--jqx-icon-arrow-up-alt); transform: rotate(180deg); width: var(--jqx-editor-addon-width); height: 100%; margin-left: 2px; font-family: var(--jqx-font-family-icon); font-style: normal; font-weight: normal; font-size: 12px; text-decoration: inherit; font-variant: normal; text-transform: none; display: flex; justify-content: center; align-items: center; color: var(--jqx-ui-state); transform-origin: center; } jqx-accordion jqx-accordion-item .jqx-accordion-item-header > .jqx-label { margin-left: 5px; width: calc(100% - var(--jqx-editor-addon-width)); display: block; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } jqx-accordion jqx-accordion-item .jqx-accordion-item-content { overflow-y: auto; height: var(--jqx-accordion-expanded-content-height); padding: 0px 24px; color: var(--jqx-background-color); background: var(--jqx-background); width: 100%; box-sizing: border-box; display: none; } jqx-accordion jqx-accordion-item .jqx-accordion-item-content .jqx-content-container { width: 100%; height: 100%; box-sizing: border-box; min-height: 5px; padding: 10px; } jqx-accordion jqx-accordion-item[expanded]:not(:last-child) { margin-bottom: var(--jqx-accordion-item-expanded-offset); } jqx-accordion jqx-accordion-item[expanded]:last-child:not(:first-child) { margin-top: var(--jqx-accordion-item-expanded-offset); } jqx-accordion jqx-accordion-item[expanded] .jqx-accordion-item-header { color: var(--jqx-ui-state-color-focus); background: var(--jqx-ui-state-focus); border-color: var(--jqx-ui-state-border-focus); border-bottom: var(--jqx-border-width) solid var(--jqx-border); } jqx-accordion jqx-accordion-item[expanded] .jqx-accordion-item-header > .jqx-arrow:after { transform: rotate(0deg); transform-origin: center; } jqx-accordion jqx-accordion-item[expanded] > .jqx-container > .jqx-accordion-item-content { display: block; } jqx-accordion jqx-accordion-item[hover] .jqx-accordion-item-header { color: var(--jqx-ui-state-color-hover); background: var(--jqx-ui-state-hover); border-color: vaR(--jqx-ui-state-border-hover); } jqx-accordion jqx-accordion-item[focused] .jqx-accordion-item-header { color: var(--jqx-ui-state-color-focus); background: var(--jqx-ui-state-focus); border-color: vaR(--jqx-ui-state-border-focus); } jqx-accordion jqx-accordion-item[focused] .jqx-accordion-item-header > .jqx-arrow { opacity: 0.6; } jqx-accordion jqx-accordion-item[dragged] { user-select: none; cursor: move; } jqx-accordion jqx-accordion-item[dragged] .jqx-accordion-item-header { cursor: move; } jqx-accordion jqx-accordion-item[disabled] { cursor: default; opacity: 1; } jqx-accordion jqx-accordion-item[disabled] .jqx-accordion-item-header { cursor: initial; } jqx-accordion[expand-mode=singleFitHeight] jqx-accordion-item .jqx-accordion-item-header { height: var(--jqx-accordion-item-header-height); } jqx-accordion[expand-mode=singleFitHeight] jqx-accordion-item .jqx-accordion-item-content { overflow-y: auto; height: var(--jqx-accordion-expanded-content-height); padding: 0px 24px; color: var(--jqx-background-color); background: var(--jqx-background); } jqx-accordion[expand-mode=single] jqx-accordion-item .jqx-accordion-item-content, jqx-accordion[expand-mode=toggle] jqx-accordion-item .jqx-accordion-item-content, jqx-accordion[expand-mode=multiple] jqx-accordion-item .jqx-accordion-item-content, jqx-accordion[expand-mode=none] jqx-accordion-item .jqx-accordion-item-content { overflow-y: hidden; height: auto; } jqx-accordion[expand-mode=multiple] > .jqx-container.jqx-toggling { padding: 10px; } jqx-accordion[expand-mode=multiple].jqx-container.jqx-toggling { padding: 10px; } jqx-accordion[disabled] { cursor: default; } jqx-accordion[disabled] jqx-accordion-item .jqx-accordion-item-header { cursor: default; } jqx-accordion:focus { outline: none; } jqx-accordion:focus jqx-accordion-item:focus { outline: none; } jqx-accordion.jqx-no-arrow .jqx-accordion-item-header > .jqx-arrow, jqx-accordion.jqx-no-arrow .jqx-accordion-item-header > .jqx-arrow:after { visibility: hidden; width: 0px; } jqx-accordion.jqx-arrow-right jqx-accordion-item .jqx-accordion-item-header > .jqx-arrow { float: right; } jqx-accordion.jqx-arrow-right jqx-accordion-item .jqx-accordion-item-header > .jqx-arrow:after { content: var(--jqx-icon-arrow-right); } jqx-accordion.jqx-arrow-right jqx-accordion-item[expanded] .jqx-accordion-item-header > .jqx-arrow:after { content: var(--jqx-icon-arrow-up-alt); } jqx-accordion .jqx-toggled-item .jqx-accordion-item-content { overflow: hidden; } jqx-accordion:not([animation=none]) { animation-duration: var(--jqx-accordion-animation-duration); } jqx-accordion:not([animation=none]) * { animation-duration: inherit; } jqx-accordion:not([animation=none])[expand-mode=singleFitHeight] jqx-accordion-item.jqx-toggled-item .jqx-accordion-item-content { animation: jqx-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; } jqx-accordion:not([animation=none])[expand-mode=singleFitHeight].jqx-toggled-item jqx-accordion-item[expanded] .jqx-accordion-item-content { animation: jqx-accordion-item-expand-animation-default-mode ease-in; animation-duration: inherit; animation-iteration-count: 1; } jqx-accordion:not([animation=none])[expand-mode=single] jqx-accordion-item.jqx-toggled-item .jqx-accordion-item-content, jqx-accordion:not([animation=none])[expand-mode=multiple] jqx-accordion-item.jqx-toggled-item .jqx-accordion-item-content, jqx-accordion:not([animation=none])[expand-mode=toggle] jqx-accordion-item.jqx-toggled-item .jqx-accordion-item-content, jqx-accordion:not([animation=none])[expand-mode=none] jqx-accordion-item.jqx-toggled-item .jqx-accordion-item-content { animation: jqx-accordion-item-expand-animation ease-out; animation-direction: reverse; display: block; animation-duration: inherit; animation-iteration-count: 1; } jqx-accordion:not([animation=none])[expand-mode=single] jqx-accordion-item[expanded].jqx-toggled-item .jqx-accordion-item-content, jqx-accordion:not([animation=none])[expand-mode=multiple] jqx-accordion-item[expanded].jqx-toggled-item .jqx-accordion-item-content, jqx-accordion:not([animation=none])[expand-mode=toggle] jqx-accordion-item[expanded].jqx-toggled-item .jqx-accordion-item-content, jqx-accordion:not([animation=none])[expand-mode=none] jqx-accordion-item[expanded].jqx-toggled-item .jqx-accordion-item-content { animation: jqx-accordion-item-expand-animation ease-in; animation-duration: inherit; animation-iteration-count: 1; } jqx-accordion:not([animation=none]) jqx-accordion-item .jqx-accordion-item-header > .jqx-arrow.jqx-animate-trigger:after { transition: transform 0.2s ease-out; } jqx-accordion:not([animation=none]) jqx-accordion-item.jqx-toggled-item .jqx-accordion-item-content { animation: jqx-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; } jqx-accordion:not([animation=none]) jqx-accordion-item[expanded].jqx-toggled-item .jqx-accordion-item-content { animation: jqx-accordion-item-expand-animation-default-mode ease-in; animation-duration: inherit; animation-iteration-count: 1; } /* jqx-accordion */ jqx-accordion[right-to-left] > .jqx-container { direction: rtl; } :host .jqx-ripple { background-color: var(--jqx-background-color); opacity: 0.5; } @keyframes jqx-accordion-item-expand-animation-default-mode { 0% { height: 0px; } 100% { height: var(--jqx-accordion-expanded-content-height); } } @keyframes jqx-accordion-item-expand-animation { 0% { height: 0px; } 100% { height: var(--jqx-accordion-expanded-content-local-height); } } /* jqx-array */ jqx-array { width: var(--jqx-array-default-width); height: var(--jqx-array-default-height); display: block; overflow: visible; } jqx-array > .jqx-container, jqx-array .jqx-big-container { display: flex; } jqx-array .jqx-array-indexer { display: block; margin-bottom: 2px; width: 100%; } jqx-array .jqx-big-container { background-color: var(--jqx-background); } jqx-array[show-index-display] .jqx-big-container { margin-left: 2px; } jqx-array .jqx-main-container, jqx-array .jqx-scrollbar-container-horizontal { width: 100%; } jqx-array .jqx-array-element-gap { border-spacing: 0; } jqx-array .jqx-array-table-data { border: 2px solid transparent; padding: 0; min-width: 0; background-color: transparent; white-space: nowrap; } jqx-array .jqx-array-table-data-gap { border-width: var(--jqx-array-element-gap); padding: var(--jqx-array-element-gap); } jqx-array .jqx-scrollbar-container-horizontal { height: 20px; } jqx-array .jqx-scrollbar-container-vertical { width: 20px; } jqx-array .jqx-scrollbar-container-horizontal > jqx-scroll-bar, jqx-array .jqx-scrollbar-container-vertical > jqx-scroll-bar { width: 100%; height: 100%; } jqx-array .jqx-array-element { position: relative; } jqx-array .jqx-array-element-selected { border-color: blue; } jqx-array .jqx-array-element-empty { border-color: #999; color: #999; opacity: 0.7; } jqx-array jqx-switch-button.jqx-array-element, jqx-array jqx-text-box.jqx-array-element { display: block; } jqx-array .jqx-array-element > jqx-toggle-button, jqx-array .jqx-array-element > jqx-switch-button, jqx-array .jqx-array-element > jqx-led, jqx-array .jqx-array-element > jqx-power-button, jqx-array .jqx-array-element > jqx-numeric-text-box, jqx-array .jqx-array-element > jqx-check-box, jqx-array .jqx-array-element > jqx-radio-button { display: block; } jqx-array .jqx-array-element > jqx-check-box { padding: 0; } /* .jqx-badge */ .jqx-badge { display: inline-block; padding: 0.25em 0.4em; font-weight: 700; line-height: 1; } .jqx-badge.jqx-badge-primary { color: var(--jqx-primary-color); background-color: var(--jqx-primary); } .jqx-badge.jqx-badge-secondary { color: var(--jqx-secondary-color); background-color: var(--jqx-secondary); } .jqx-badge.jqx-badge-success { color: var(--jqx-success-color); background-color: var(--jqx-success); } .jqx-badge.jqx-badge-error { color: var(--jqx-error-color); background-color: var(--jqx-error); } .jqx-badge.jqx-badge-info { color: var(--jqx-info-color); background-color: var(--jqx-info); } .jqx-badge.jqx-badge-warning { color: var(--jqx-warning-color); background-color: var(--jqx-warning); } .jqx-badge.jqx-badge-light { color: var(--jqx-light-color); background-color: var(--jqx-light); } .jqx-badge.jqx-badge-dark { color: var(--jqx-dark-color); background-color: var(--jqx-dark); } .jqx-badge.jqx-badge-danger { color: var(--jqx-error-color); background-color: var(--jqx-error); } .jqx-badge.jqx-badge-pill { border-radius: 10rem; } /* .jqx-badge */ .jqx-badge[right-to-left] { direction: rtl; } jqx-breadcrumb { display: block; box-sizing: border-box; width: var(--jqx-breadcrumb-default-width); min-width: calc(2 * var(--jqx-breadcrumb-padding) + 2 * var(--jqx-border-width) + 40px); height: var(--jqx-breadcrumb-default-height); border: var(--jqx-border-width) solid var(--jqx-border); padding: var(--jqx-breadcrumb-padding); padding-top: 0; border-top-right-radius: var(--jqx-border-top-right-radius); border-top-left-radius: var(--jqx-border-top-left-radius); border-bottom-left-radius: var(--jqx-border-bottom-left-radius); border-bottom-right-radius: var(--jqx-border-bottom-right-radius); } jqx-breadcrumb .jqx-template-container { height: auto; } jqx-breadcrumb .jqx-template-container .jqx-breadcrumb-items { width: 100%; height: auto; display: flex; flex-direction: row; flex-wrap: wrap; } jqx-breadcrumb .jqx-template-container .jqx-breadcrumb-items .jqx-breadcrumb-item { display: flex; flex-direction: row; align-items: center; position: relative; border: var(--jqx-border-width) solid var(--jqx-border); margin-right: var(--jqx-breadcrumb-horizontal-offset); margin-top: var(--jqx-breadcrumb-padding); width: auto; height: var(--jqx-breadcrumb-item-height); padding: 5px; background-color: var(--jqx-background); color: var(--jqx-background-color); } jqx-breadcrumb .jqx-template-container .jqx-breadcrumb-items .jqx-breadcrumb-item:not(:last-child):after { position: absolute; width: var(--jqx-breadcrumb-horizontal-offset); height: 2px; background-color: var(--jqx-border); left: calc(100% + var(--jqx-border-width)); top: 50%; content: ""; } jqx-breadcrumb .jqx-template-container .jqx-breadcrumb-items .jqx-breadcrumb-item > .jqx-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: "jqx-icons"; } jqx-breadcrumb .jqx-template-container .jqx-breadcrumb-items .jqx-breadcrumb-item > .jqx-close-button:after { content: var(--jqx-icon-close); } jqx-breadcrumb .jqx-template-container .jqx-breadcrumb-items .jqx-breadcrumb-item .jqx-breadcrumb-item-label { user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; } jqx-breadcrumb .jqx-template-container .jqx-breadcrumb-items > .target:before, jqx-breadcrumb .jqx-template-container .jqx-breadcrumb-items > .afterTarget:last-child:after { position: absolute; width: 2px; height: 100%; background-color: var(--jqx-primary); left: calc(-1 * var(--jqx-breadcrumb-horizontal-offset) / 2 - 1px); content: ""; } jqx-breadcrumb .jqx-template-container .jqx-breadcrumb-items > .afterTarget:last-child:after { left: calc(100% + var(--jqx-breadcrumb-horizontal-offset) / 2); } jqx-breadcrumb .jqx-breadcrumb-placeholder { width: 100%; height: 100%; display: flex; padding: 5px; } jqx-breadcrumb[allow-drag] .jqx-template-container .jqx-breadcrumb-items .jqx-breadcrumb-item { cursor: pointer; touch-action: none; } jqx-breadcrumb[allow-drag] .jqx-template-container .jqx-breadcrumb-items .jqx-breadcrumb-item.dragged { background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.1) 75%, transparent 75%, transparent); background-size: 3em 3em; } jqx-breadcrumb[add-new-item] .jqx-template-container .jqx-breadcrumb-items > jqx-button { --jqx-button-padding: 0; position: relative; margin-right: var(--jqx-breadcrumb-horizontal-offset); margin-top: var(--jqx-breadcrumb-padding); border: var(--jqx-border-width) solid var(--jqx-border); border-radius: initial; width: var(--jqx-breadcrumb-item-height); height: var(--jqx-breadcrumb-item-height); text-align: center; font-size: 25px; overflow: visible; } jqx-breadcrumb[add-new-item] .jqx-template-container .jqx-breadcrumb-items > jqx-button > button { overflow: hidden; user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; } jqx-breadcrumb[close-buttons] .jqx-template-container .jqx-breadcrumb-items .jqx-breadcrumb-item > .jqx-close-button { display: block; } jqx-breadcrumb[minimized] { padding: 0; overflow: visible; } jqx-breadcrumb[minimized] .jqx-container { display: flex; align-items: center; position: relative; padding: var(--jqx-breadcrumb-padding); } jqx-breadcrumb[minimized] .jqx-hamburger-icon { width: 40px; height: 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; float: none; cursor: pointer; } jqx-breadcrumb[minimized] .jqx-hamburger-icon.jqx-close-button > .jqx-hamburger-icon-line-top { width: 29px; transform: translateX(4px) rotate(45deg); } jqx-breadcrumb[minimized] .jqx-hamburger-icon.jqx-close-button > .jqx-hamburger-icon-line-center { visibility: hidden; } jqx-breadcrumb[minimized] .jqx-hamburger-icon.jqx-close-button > .jqx-hamburger-icon-line-bottom { width: 29px; transform: translateX(4px) rotate(-45deg); } jqx-breadcrumb[minimized] .jqx-hamburger-icon-line { margin-bottom: 5px; border-radius: 10px; width: 30px; height: 5px; background-color: var(--jqx-primary); transform-origin: left; } jqx-breadcrumb[minimized] .jqx-hamburger-icon-line-bottom { margin-bottom: 0; } jqx-breadcrumb[minimized] .jqx-template-container { position: absolute; left: calc(-1 * var(--jqx-border-width)); top: calc(100% + 2px + var(--jqx-border-width)); margin: calc(var(--jqx-drop-down-vertical-offset) + var(--jqx-drop-down-element-padding-size)) 0px; border-width: var(--jqx-border-width); border-style: solid; border-color: var(--jqx-border); padding: var(--jqx-drop-down-element-padding-size); width: var(--jqx-breadcrumb-drop-down-width); background-color: var(--jqx-background); box-shadow: var(--jqx-elevation-8); z-index: 1; } jqx-breadcrumb[minimized] .jqx-template-container .jqx-breadcrumb-items .jqx-breadcrumb-item { width: 100%; margin: 0; justify-content: space-between; } jqx-breadcrumb[minimized] .jqx-template-container .jqx-breadcrumb-items .jqx-breadcrumb-item:not(:last-child):after { content: none; } jqx-breadcrumb[minimized] .jqx-template-container .jqx-breadcrumb-items > jqx-button { width: 100%; margin: 0; } jqx-breadcrumb[minimized] .jqx-template-container .jqx-breadcrumb-items > jqx-button > button { padding: 0; justify-content: center; } jqx-breadcrumb[minimized] .jqx-template-container .jqx-breadcrumb-items > .target:before, jqx-breadcrumb[minimized] .jqx-template-container .jqx-breadcrumb-items > .afterTarget:last-child:after { width: 100%; height: 4px; left: 0; top: -3px; } jqx-breadcrumb[minimized] .jqx-template-container .jqx-breadcrumb-items > .afterTarget:last-child:after { top: 100%; } jqx-breadcrumb[minimized][animation=none] .jqx-template-container.jqx-visibility-hidden { display: none; } jqx-breadcrumb[minimized]:not([animation=none]) .jqx-template-container { opacity: 1; transform: scaleY(1); -webkit-transform-origin: top; transform-origin: top; transition: opacity 0.2s ease-in, visibility 0.2s ease-in, transform 0.2s ease-in; /* Microsoft Edge-specific fix */ } jqx-breadcrumb[minimized]:not([animation=none]) .jqx-template-container.jqx-visibility-hidden.not-in-view { left: -9999px; top: -9999px; transition: none; } jqx-breadcrumb[minimized]:not([animation=none]) .jqx-template-container.jqx-visibility-hidden { opacity: 0.2; transform: scaleY(0); } jqx-breadcrumb[minimized]:not([animation=none]) .jqx-hamburger-icon-line { transition: visibility 0.02s ease-in, transform 0.2s ease-in, width 0.2s ease-in; } .jqx-breadcrumb-feedback { display: flex; flex-direction: row; align-items: center; position: relative; border: var(--jqx-border-width) solid var(--jqx-border); margin-right: var(--jqx-breadcrumb-horizontal-offset); margin-top: var(--jqx-breadcrumb-padding); width: auto; height: var(--jqx-breadcrumb-item-height); padding: 5px; background-color: var(--jqx-background); color: var(--jqx-background-color); box-shadow: var(--jqx-elevation-12); white-space: nowrap; opacity: 0.8; position: absolute; box-sizing: border-box; display: inline-flex; font-family: var(--jqx-font-family); font-size: var(--jqx-font-size); z-index: 999; } .jqx-breadcrumb-feedback * { box-sizing: border-box; } .jqx-breadcrumb-feedback:after { margin-left: 10px; content: var(--jqx-icon-check); font-family: "jqx-icons"; font-size: 14px; width: 1.5em; border-radius: 100%; height: 1.5em; background-color: var(--jqx-success); color: var(--jqx-success-color); display: flex; align-items: center; justify-content: center; } .jqx-breadcrumb-feedback.freeze:after { background-color: inherit; color: var(--jqx-primary); content: var(--jqx-icon-lock); } .jqx-breadcrumb-feedback.unfreeze:after { background-color: inherit; color: var(--jqx-primary); content: var(--jqx-icon-lock-open); } .jqx-breadcrumb-feedback.error:after { background-color: var(--jqx-error); color: var(--jqx-error-color); content: var(--jqx-icon-attention-circled); } .jqx-breadcrumb-feedback.data:after { background-color: var(--jqx-primary); color: var(--jqx-primary-color); content: var(--jqx-icon-docs); } jqx-breadcrumb[right-to-left] > .jqx-container { direction: rtl; } jqx-breadcrumb[right-to-left] > .jqx-container .jqx-template-container .jqx-breadcrumb-items > .afterTarget:first-child:after { position: absolute; content: ""; width: 2px; height: 100%; top: 0; left: calc(100% + var(--jqx-breadcrumb-horizontal-offset) / 2); background-color: var(--jqx-success); } jqx-breadcrumb[right-to-left] > .jqx-container .jqx-template-container .jqx-breadcrumb-items .jqx-breadcrumb-item > .jqx-close-button { margin-left: 5px; margin-right: 10px; } jqx-breadcrumb[right-to-left] > .jqx-container .jqx-template-container .jqx-breadcrumb-items .jqx-breadcrumb-item:not(:last-child):after { left: calc(-1 * var(--jqx-breadcrumb-horizontal-offset)); } jqx-breadcrumb[right-to-left]:not([minimized]) .jqx-template-container .jqx-breadcrumb-items .jqx-breadcrumb-item { margin-left: var(--jqx-breadcrumb-horizontal-offset); margin-right: initial; } jqx-breadcrumb[right-to-left]:not([minimized])[add-new-item]:not([minimized]) .jqx-breadcrumb-items > jqx-button { margin-left: var(--jqx-breadcrumb-horizontal-offset); margin-right: initial; } jqx-breadcrumb[right-to-left][minimized] .jqx-container .jqx-template-container { right: calc(-1 * var(--jqx-border-width)); left: auto; } .jqx-breadcrumb-feedback[right-to-left] { direction: rtl; margin-left: var(--jqx-breadcrumb-horizontal-offset); margin-right: initial; } .jqx-breadcrumb-feedback[right-to-left]:after { margin-left: initial; margin-right: var(--jqx-breadcrumb-horizontal-offset); } /* jqx-button, jqx-repeat-button, jqx-toggle-button */ jqx-button, jqx-toggle-button, jqx-repeat-button, .jqx-button-element { --jqx-button-flat-color: var(--jqx-background-color); text-align: center; display: inline-flex; vertical-align: middle; cursor: pointer; text-transform: var(--jqx-button-text-transform); letter-spacing: 0.08929em; overflow: hidden; border-color: var(--jqx-border); border-top-left-radius: var(--jqx-border-top-left-radius); border-top-right-radius: var(--jqx-border-top-right-radius); border-bottom-left-radius: var(--jqx-border-bottom-left-radius); border-bottom-right-radius: var(--jqx-border-bottom-right-radius); border-width: var(--jqx-border-width); border-style: solid; visibility: hidden; font-weight: 500; } jqx-button.jqx-element, jqx-toggle-button.jqx-element, jqx-repeat-button.jqx-element, .jqx-button-element.jqx-element { display: inline-flex; visibility: inherit; } jqx-button button::-moz-focus-inner, jqx-toggle-button button::-moz-focus-inner, jqx-repeat-button button::-moz-focus-inner, .jqx-button-element button::-moz-focus-inner { border: 0; } jqx-button.primary, jqx-toggle-button.primary, jqx-repeat-button.primary, .jqx-button-element.primary { --jqx-button-opacity-hover: 0.75; --jqx-button-opacity-focus: 0.7; --jqx-button-opacity-active: 0.65; --jqx-background: var(--jqx-primary); --jqx-border: var(--jqx-primary); --jqx-border-rgb: var(--jqx-primary-rgb); --jqx-background-color: var(--jqx-primary-color); --jqx-ui-state-hover: var(--jqx-primary); --jqx-ui-state-border-hover: var(--jqx-primary); --jqx-ui-state-color-hover: var(--jqx-primary-color); --jqx-ui-state-active: var(--jqx-primary); --jqx-ui-state-border-active: var(--jqx-primary); --jqx-ui-state-color-active: var(--jqx-primary-color); --jqx-ui-state-focus: var(--jqx-primary); --jqx-ui-state-border-focus: var(--jqx-primary); --jqx-ui-state-color-focus: var(--jqx-primary-color); --jqx-button-flat-color: var(--jqx-primary); --jqx-button-outlined-color: var(--jqx-primary); --jqx-button-outlined-border: var(--jqx-primary); } jqx-button.secondary, jqx-toggle-button.secondary, jqx-repeat-button.secondary, .jqx-button-element.secondary { --jqx-button-opacity-hover: 0.75; --jqx-button-opacity-focus: 0.7; --jqx-button-opacity-active: 0.65; --jqx-background: var(--jqx-secondary); --jqx-border: var(--jqx-secondary); --jqx-border-rgb: var(--jqx-secondary-rgb); --jqx-background-color: var(--jqx-secondary-color); --jqx-ui-state-hover: var(--jqx-secondary); --jqx-ui-state-border-hover: var(--jqx-secondary); --jqx-ui-state-color-hover: var(--jqx-secondary-color); --jqx-ui-state-active: var(--jqx-secondary); --jqx-ui-state-border-active: var(--jqx-secondary); --jqx-ui-state-color-active: var(--jqx-secondary-color); --jqx-ui-state-focus: var(--jqx-secondary); --jqx-ui-state-border-focus: var(--jqx-secondary); --jqx-ui-state-color-focus: var(--jqx-secondary-color); --jqx-button-flat-color: var(--jqx-secondary); --jqx-button-outlined-color: var(--jqx-secondary); --jqx-button-outlined-border: var(--jqx-secondary); } jqx-button.success, jqx-toggle-button.success, jqx-repeat-button.success, .jqx-button-element.success { --jqx-button-opacity-hover: 0.75; --jqx-button-opacity-focus: 0.7; --jqx-button-opacity-active: 0.65; --jqx-background: var(--jqx-success); --jqx-border: var(--jqx-success); --jqx-border-rgb: var(--jqx-success-rgb); --jqx-background-color: var(--jqx-success-color); --jqx-ui-state-hover: var(--jqx-success); --jqx-ui-state-border-hover: var(--jqx-success); --jqx-ui-state-color-hover: var(--jqx-success-color); --jqx-ui-state-active: var(--jqx-success); --jqx-ui-state-border-active: var(--jqx-success); --jqx-ui-state-color-active: var(--jqx-success-color); --jqx-ui-state-focus: var(--jqx-success); --jqx-ui-state-border-focus: var(--jqx-success); --jqx-ui-state-color-focus: var(--jqx-success-color); --jqx-button-flat-color: var(--jqx-success); --jqx-button-outlined-color: var(--jqx-success); --jqx-button-outlined-border: var(--jqx-success); } jqx-button.error, jqx-toggle-button.error, jqx-repeat-button.error, .jqx-button-element.error { --jqx-button-opacity-hover: 0.75; --jqx-button-opacity-focus: 0.7; --jqx-button-opacity-active: 0.65; --jqx-background: var(--jqx-error); --jqx-border: var(--jqx-error); --jqx-border-rgb: var(--jqx-error-rgb); --jqx-background-color: var(--jqx-error-color); --jqx-ui-state-hover: var(--jqx-error); --jqx-ui-state-border-hover: var(--jqx-error); --jqx-ui-state-color-hover: var(--jqx-error-color); --jqx-ui-state-active: var(--jqx-error); --jqx-ui-state-border-active: var(--jqx-error); --jqx-ui-state-color-active: var(--jqx-error-color); --jqx-ui-state-focus: var(--jqx-error); --jqx-ui-state-border-focus: var(--jqx-error); --jqx-ui-state-color-focus: var(--jqx-error-color); --jqx-button-flat-color: var(--jqx-error); --jqx-button-outlined-color: var(--jqx-error); --jqx-button-outlined-border: var(--jqx-error); } jqx-button.info, jqx-toggle-button.info, jqx-repeat-button.info, .jqx-button-element.info { --jqx-button-opacity-hover: 0.75; --jqx-button-opacity-focus: 0.7; --jqx-button-opacity-active: 0.65; --jqx-background: var(--jqx-info); --jqx-border: var(--jqx-info); --jqx-border-rgb: var(--jqx-info-rgb); --jqx-background-color: var(--jqx-info-color); --jqx-ui-state-hover: var(--jqx-info); --jqx-ui-state-border-hover: var(--jqx-info); --jqx-ui-state-color-hover: var(--jqx-info-color); --jqx-ui-state-active: var(--jqx-info); --jqx-ui-state-border-active: var(--jqx-info); --jqx-ui-state-color-active: var(--jqx-info-color); --jqx-ui-state-focus: var(--jqx-info); --jqx-ui-state-border-focus: var(--jqx-info); --jqx-ui-state-color-focus: var(--jqx-info-color); --jqx-button-flat-color: var(--jqx-info); --jqx-button-outlined-color: var(--jqx-info); --jqx-button-outlined-border: var(--jqx-info); } jqx-button.warning, jqx-toggle-button.warning, jqx-repeat-button.warning, .jqx-button-element.warning { --jqx-button-opacity-hover: 0.75; --jqx-button-opacity-focus: 0.7; --jqx-button-opacity-active: 0.65; --jqx-background: var(--jqx-warning); --jqx-border: var(--jqx-warning); --jqx-border-rgb: var(--jqx-warning-rgb); --jqx-background-color: var(--jqx-warning-color); --jqx-ui-state-hover: var(--jqx-warning); --jqx-ui-state-border-hover: var(--jqx-warning); --jqx-ui-state-color-hover: var(--jqx-warning-color); --jqx-ui-state-active: var(--jqx-warning); --jqx-ui-state-border-active: var(--jqx-warning); --jqx-ui-state-color-active: var(--jqx-warning-color); --jqx-ui-state-focus: var(--jqx-warning); --jqx-ui-state-border-focus: var(--jqx-warning); --jqx-ui-state-color-focus: var(--jqx-warning-color); --jqx-button-flat-color: var(--jqx-warning); --jqx-button-outlined-color: var(--jqx-warning); --jqx-button-outlined-border: var(--jqx-warning); } jqx-button.light, jqx-toggle-button.light, jqx-repeat-button.light, .jqx-button-element.light { --jqx-button-opacity-hover: 0.75; --jqx-button-opacity-focus: 0.7; --jqx-button-opacity-active: 0.65; --jqx-background: var(--jqx-light); --jqx-border: var(--jqx-light); --jqx-border-rgb: var(--jqx-light-rgb); --jqx-background-color: var(--jqx-light-color); --jqx-ui-state-hover: var(--jqx-light); --jqx-ui-state-border-hover: var(--jqx-light); --jqx-ui-state-color-hover: var(--jqx-light-color); --jqx-ui-state-active: var(--jqx-light); --jqx-ui-state-border-active: var(--jqx-light); --jqx-ui-state-color-active: var(--jqx-light-color); --jqx-ui-state-focus: var(--jqx-light); --jqx-ui-state-border-focus: var(--jqx-light); --jqx-ui-state-color-focus: var(--jqx-light-color); --jqx-button-flat-color: var(--jqx-light); --jqx-button-outlined-color: var(--jqx-light); --jqx-button-outlined-border: var(--jqx-light); } jqx-button.dark, jqx-toggle-button.dark, jqx-repeat-button.dark, .jqx-button-element.dark { --jqx-button-opacity-hover: 0.75; --jqx-button-opacity-focus: 0.7; --jqx-button-opacity-active: 0.65; --jqx-background: var(--jqx-dark); --jqx-border: var(--jqx-dark); --jqx-border-rgb: var(--jqx-dark-rgb); --jqx-background-color: var(--jqx-dark-color); --jqx-ui-state-hover: var(--jqx-dark); --jqx-ui-state-border-hover: var(--jqx-dark); --jqx-ui-state-color-hover: var(--jqx-dark-color); --jqx-ui-state-active: var(--jqx-dark); --jqx-ui-state-border-active: var(--jqx-dark); --jqx-ui-state-color-active: var(--jqx-dark-color); --jqx-ui-state-focus: var(--jqx-dark); --jqx-ui-state-border-focus: var(--jqx-dark); --jqx-ui-state-color-focus: var(--jqx-dark-color); --jqx-button-flat-color: var(--jqx-dark); --jqx-button-outlined-color: var(--jqx-dark); --jqx-button-outlined-border: var(--jqx-dark); } jqx-button[hover], jqx-toggle-button[hover], jqx-repeat-button[hover], .jqx-button-element[hover] { color: var(--jqx-ui-state-color-hover); border-color: var(--jqx-ui-state-border-hover); background-color: var(--jqx-ui-state-hover); transition: background-color 100ms linear, box-shadow 280ms ease-in-out; opacity: var(--jqx-button-opacity-hover); } jqx-button[focus], jqx-toggle-button[focus], jqx-repeat-button[focus], .jqx-button-element[focus] { color: var(--jqx-ui-state-color-focus); border-color: var(--jqx-ui-state-border-focus); background-color: var(--jqx-ui-state-focus); opacity: var(--jqx-button-opacity-focus); } jqx-button[active], jqx-toggle-button[active], jqx-repeat-button[active], .jqx-button-element[active] { color: var(--jqx-ui-state-color-active); border-color: var(--jqx-ui-state-border-active); background-color: var(--jqx-ui-state-active); transition: background-color 100ms linear, box-shadow 280ms ease-in-out; opacity: var(--jqx-button-opacity-active); } jqx-button[disabled], jqx-toggle-button[disabled], jqx-repeat-button[disabled], .jqx-button-element[disabled] { color: var(--jqx-disabled-color); border-color: var(--jqx-disabled); background-color: var(--jqx-disabled); cursor: default; --jqx-background: var(--jqx-disabled); --jqx-border: var(--jqx-disabled); --jqx-background-color: var(--jqx-disabled-color); } jqx-button.large button, jqx-toggle-button.large button, jqx-repeat-button.large button, .jqx-button-element.large button { padding: var(--jqx-button-large-padding); font-size: var(--jqx-button-large-font-size); } jqx-button.small button, jqx-toggle-button.small button, jqx-repeat-button.small button, .jqx-button-element.small button { padding: var(--jqx-button-small-padding); font-size: var(--jqx-button-small-font-size); } jqx-button.very-small button, jqx-toggle-button.very-small button, jqx-repeat-button.very-small button, .jqx-button-element.very-small button { padding: var(--jqx-button-very-small-padding); font-size: var(--jqx-button-very-small-font-size); } jqx-button.rounded, jqx-toggle-button.rounded, jqx-repeat-button.rounded, .jqx-button-element.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; } jqx-button.squared, jqx-toggle-button.squared, jqx-repeat-button.squared, .jqx-button-element.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; } jqx-button.flat, jqx-toggle-button.flat, jqx-repeat-button.flat, .jqx-button-element.flat { color: var(--jqx-button-flat-color); background: transparent; border-color: transparent; } jqx-button.flat[hover], jqx-toggle-button.flat[hover], jqx-repeat-button.flat[hover], .jqx-button-element.flat[hover] { color: var(--jqx-button-flat-color); background: transparent; border-color: transparent; } jqx-button.flat[active], jqx-toggle-button.flat[active], jqx-repeat-button.flat[active], .jqx-button-element.flat[active] { color: var(--jqx-button-flat-color); background: transparent; border-color: transparent; } jqx-button.flat[focus], jqx-toggle-button.flat[focus], jqx-repeat-button.flat[focus], .jqx-button-element.flat[focus] { border-color: var(--jqx-ui-state-focus); } jqx-button.flat[checked], jqx-toggle-button.flat[checked], jqx-repeat-button.flat[checked], .jqx-button-element.flat[checked] { text-decoration: underline; background: var(--jqx-ui-state-active); } jqx-button.flat .jqx-ripple, jqx-toggle-button.flat .jqx-ripple, jqx-repeat-button.flat .jqx-ripple, .jqx-button-element.flat .jqx-ripple { background-color: var(--jqx-button-flat-color); } jqx-button.outlined, jqx-toggle-button.outlined, jqx-repeat-button.outlined, .jqx-button-element.outlined { color: var(--jqx-button-outlined-color); border-color: var(--jqx-button-outlined-border); background: transparent; border-width: calc(2 * var(--jqx-border-width)); } jqx-button.outlined[hover], jqx-toggle-button.outlined[hover], jqx-repeat-button.outlined[hover], .jqx-button-element.outlined[hover] { color: var(--jqx-button-outlined-color); border-color: var(--jqx-button-outlined-border); background: transparent; } jqx-button.outlined[active], jqx-toggle-button.outlined[active], jqx-repeat-button.outlined[active], .jqx-button-element.outlined[active] { color: var(--jqx-button-outlined-color); border-color: var(--jqx-button-outlined-border); background: transparent; } jqx-button.outlined[focus], jqx-toggle-button.outlined[focus], jqx-repeat-button.outlined[focus], .jqx-button-element.outlined[focus] { color: var(--jqx-button-outlined-color); border-color: var(--jqx-ui-state-focus); background: transparent; } jqx-button.outlined[checked], jqx-toggle-button.outlined[checked], jqx-repeat-button.outlined[checked], .jqx-button-element.outlined[checked] { color: var(--jqx-ui-state-color-active); border-color: var(--jqx-ui-state-active); background: var(--jqx-ui-state-active); } jqx-button.outlined .jqx-ripple, jqx-toggle-button.outlined .jqx-ripple, jqx-repeat-button.outlined .jqx-ripple, .jqx-button-element.outlined .jqx-ripple { background-color: var(--jqx-button-outlined-color); } jqx-button.outlined button.jqx-button, jqx-toggle-button.outlined button.jqx-button, jqx-repeat-button.outlined button.jqx-button, .jqx-button-element.outlined button.jqx-button { border-radius: initial; } jqx-button.raised, jqx-toggle-button.raised, jqx-repeat-button.raised, .jqx-button-element.raised { box-shadow: var(--jqx-elevation-2); transition: background-color 100ms linear, box-shadow 280ms ease-in-out; } jqx-button.raised[hover], jqx-toggle-button.raised[hover], jqx-repeat-button.raised[hover], .jqx-button-element.raised[hover] { box-shadow: var(--jqx-elevation-4); } jqx-button.raised[active], jqx-button.raised[checked], jqx-button.raised[active], jqx-button.raised button[active], jqx-toggle-button.raised[active], jqx-toggle-button.raised[checked], jqx-toggle-button.raised[active], jqx-toggle-button.raised button[active], jqx-repeat-button.raised[active], jqx-repeat-button.raised[checked], jqx-repeat-button.raised[active], jqx-repeat-button.raised button[active], .jqx-button-element.raised[active], .jqx-button-element.raised[checked], .jqx-button-element.raised[active], .jqx-button-element.raised button[active] { box-shadow: var(--jqx-elevation-8); } jqx-button.raised[focus], jqx-button.raised[focus]:not([checked]), jqx-toggle-button.raised[focus], jqx-toggle-button.raised[focus]:not([checked]), jqx-repeat-button.raised[focus], jqx-repeat-button.raised[focus]:not([checked]), .jqx-button-element.raised[focus], .jqx-button-element.raised[focus]:not([checked]) { box-shadow: var(--jqx-elevation-6); } jqx-button.floating, jqx-toggle-button.floating, jqx-repeat-button.floating, .jqx-button-element.floating { border-radius: 50%; width: 48px; height: 48px; box-shadow: var(--jqx-elevation-4); transition: background-color 100ms linear, box-shadow 280ms ease-in-out; } jqx-button.floating[hover], jqx-toggle-button.floating[hover], jqx-repeat-button.floating[hover], .jqx-button-element.floating[hover] { box-shadow: var(--jqx-elevation-6); } jqx-button.floating[active], jqx-button.floating[checked], jqx-toggle-button.floating[active], jqx-toggle-button.floating[checked], jqx-repeat-button.floating[active], jqx-repeat-button.floating[checked], .jqx-button-element.floating[active], .jqx-button-element.floating[checked] { box-shadow: var(--jqx-elevation-12); } jqx-button.floating[focus], jqx-button.floating[focus]:not([checked]), jqx-toggle-button.floating[focus], jqx-toggle-button.floating[focus]:not([checked]), jqx-repeat-button.floating[focus], jqx-repeat-button.floating[focus]:not([checked]), .jqx-button-element.floating[focus], .jqx-button-element.floating[focus]:not([checked]) { box-shadow: var(--jqx-elevation-6); } button.jqx-button { position: relative; padding: var(--jqx-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(--jqx-button-opacity); white-space: nowrap; border-radius: inherit; } .jqx-button .jqx-ripple { background: var(--jqx-background-color); } jqx-toggle-button .jqx-container, [jqx-toggle-button] .jqx-container { font-weight: inherit; font-style: inherit; } jqx-toggle-button[checked], [jqx-toggle-button][checked] { color: var(--jqx-ui-state-color-selected); border-color: var(--jqx-ui-state-border-selected); background-color: var(--jqx-ui-state-selected); } .jqx-scroll-button .jqx-button { padding: 0px; } :host(.jqx-button.flat) .jqx-ripple { background-color: var(--jqx-button-flat-color); } :host(.jqx-button.outlined) .jqx-ripple { background-color: var(--jqx-button-outlined-color); } button.jqx-button[type]:not(.jqx-container) { border-color: var(--jqx-border); border-top-left-radius: var(--jqx-border-top-left-radius); border-top-right-radius: var(--jqx-border-top-right-radius); border-bottom-left-radius: var(--jqx-border-bottom-left-radius); border-bottom-right-radius: var(--jqx-border-bottom-right-radius); border-width: var(--jqx-border-width); border-style: solid; text-align: center; vertical-align: middle; cursor: pointer; text-transform: var(--jqx-button-text-transform); font-weight: 500; letter-spacing: 0.08929em; overflow: hidden; font-style: var(--jqx-font-style); font-size: var(--jqx-font-size); background: var(--jqx-background); outline: none; } button.jqx-button[type]:hover { color: var(--jqx-ui-state-color-hover); border-color: var(--jqx-ui-state-border-hover); background-color: var(--jqx-ui-state-hover); } button.jqx-button[type]:not([disabled]):active { color: var(--jqx-ui-state-color-active); border-color: var(--jqx-ui-state-border-active); background-color: var(--jqx-ui-state-active); } /* jqx-button, jqx-repeat-button, jqx-toggle-button */ jqx-button[right-to-left], jqx-toggle-button[right-to-left], jqx-repeat-button[right-to-left] { direction: rtl; } .jqx-button-group { display: inline-flex; vertical-align: middle; width: var(--jqx-button-group-default-width); height: var(--jqx-button-group-default-height); cursor: pointer; text-transform: var(--jqx-button-text-transform); letter-spacing: .08929em; overflow: hidden; } .jqx-button-group .jqx-button-group-items { display: flex; align-items: center; height: 100%; width: 100%; } .jqx-button-group .jqx-button-group-items .jqx-button-group-item { display: flex; align-items: center; justify-content: center; position: relative; padding: var(--jqx-button-padding); cursor: inherit; font-weight: inherit; -webkit-font-smoothing: antialiased; opacity: var(--jqx-button-opacity); white-space: nowrap; border-radius: inherit; width: 100%; height: 100%; } .jqx-button-group .jqx-button-group-items .jqx-button-group-item > div { overflow: hidden; text-overflow: ellipsis; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } .jqx-button-group .jqx-button-group-items .jqx-button-group-item:hover { color: var(--jqx-ui-state-color-hover); border-color: var(--jqx-ui-state-border-hover); background-color: var(--jqx-ui-state-hover); opacity: var(--jqx-button-opacity-hover); } .jqx-button-group .jqx-button-group-items .jqx-button-group-item[active] { color: var(--jqx-ui-state-color-selected); border-color: var(--jqx-ui-state-border-selected); background-color: var(--jqx-ui-state-selected); } .jqx-button-group .jqx-button-group-items .jqx-button-group-item:active { color: var(--jqx-ui-state-color-active); border-color: var(--jqx-ui-state-border-active); background-color: var(--jqx-ui-state-active); opacity: var(--jqx-button-opacity-active); } .jqx-button-group.small .jqx-button-group-items .jqx-button-group-item { padding: var(--jqx-button-small-padding); font-size: var(--jqx-button-small-font-size); } .jqx-button-group.large .jqx-button-group-items .jqx-button-group-item { padding: var(--jqx-button-large-padding); font-size: var(--jqx-button-large-font-size); } .jqx-button-group:focus .jqx-button-group-item[focus]:not(:active) { color: var(--jqx-ui-state-color-focus); border-color: var(--jqx-ui-state-border-focus); background-color: var(--jqx-ui-state-focus); opacity: var(--jqx-button-opacity-focus); } .jqx-button-group.primary { border-color: var(--jqx-primary); } .jqx-button-group.primary .jqx-button-group-items .jqx-button-group-item { color: var(--jqx-primary-color); background-color: var(--jqx-primary); } .jqx-button-group.primary .jqx-button-group-items .jqx-button-group-item:hover { background-color: rgba(var(--jqx-primary-rgb), .8); } .jqx-button-group.primary .jqx-button-group-items .jqx-button-group-item:active, .jqx-button-group.primary .jqx-button-group-items .jqx-button-group-item[active] { color: var(--jqx-primary); border-color: var(--jqx-ui-state-border-selected); background-color: rgba(var(--jqx-primary-rgb), .2); } .jqx-button-group.secondary { border-color: var(--jqx-secondary); } .jqx-button-group.secondary .jqx-button-group-items .jqx-button-group-item { color: var(--jqx-secondary-color); background-color: var(--jqx-secondary); } .jqx-button-group.secondary .jqx-button-group-items .jqx-button-group-item:hover { background-color: rgba(var(--jqx-secondary-rgb), .8); } .jqx-button-group.secondary .jqx-button-group-items .jqx-button-group-item:active, .jqx-button-group.secondary .jqx-button-group-items .jqx-button-group-item[active] { color: var(--jqx-secondary); border-color: var(--jqx-ui-state-border-selected); background-color: rgba(var(--jqx-secondary-rgb), .2); } .jqx-button-group.success { border-color: var(--jqx-success); } .jqx-button-group.success .jqx-button-group-items .jqx-button-group-item { color: var(--jqx-success-color); background-color: var(--jqx-success); } .jqx-button-group.success .jqx-button-group-items .jqx-button-group-item:hover { background-color: rgba(var(--jqx-success-rgb), .8); } .jqx-button-group.success .jqx-button-group-items .jqx-button-group-item:active, .jqx-button-group.success .jqx-button-group-items .jqx-button-group-item[active] { color: var(--jqx-success); border-color: var(--jqx-ui-state-border-selected); background-color: rgba(var(--jqx-success-rgb), .2); } .jqx-button-group.error { border-color: var(--jqx-error); } .jqx-button-group.error .jqx-button-group-items .jqx-button-group-item { color: var(--jqx-error-color); background-color: var(--jqx-error); } .jqx-button-group.error .jqx-button-group-items .jqx-button-group-item:hover { background-color: rgba(var(--jqx-error-rgb), .8); } .jqx-button-group.error .jqx-button-group-items .jqx-button-group-item:active, .jqx-button-group.error .jqx-button-group-items .jqx-button-group-item[active] { color: var(--jqx-error); border-color: var(--jqx-ui-state-border-selected); background-color: rgba(var(--jqx-error-rgb), .2); } .jqx-button-group.info { border-color: var(--jqx-info); } .jqx-button-group.info .jqx-button-group-items .jqx-button-group-item { color: var(--jqx-info-color); background-color: var(--jqx-info); } .jqx-button-group.info .jqx-button-group-items .jqx-button-group-item:hover { background-color: rgba(var(--jqx-info-rgb), .8); } .jqx-button-group.info .jqx-button-group-items .jqx-button-group-item:active, .jqx-button-group.info .jqx-button-group-items .jqx-button-group-item[active] { color: var(--jqx-info); border-color: var(--jqx-ui-state-border-selected); background-color: rgba(var(--jqx-info-rgb), .2); } .jqx-button-group.warning { border-color: var(--jqx-warning); } .jqx-button-group.warning .jqx-button-group-items .jqx-button-group-item { color: var(--jqx-warning-color); background-color: var(--jqx-warning); } .jqx-button-group.warning .jqx-button-group-items .jqx-button-group-item:hover { background-color: rgba(var(--jqx-warning-rgb), .8); } .jqx-button-group.warning .jqx-button-group-items .jqx-button-group-item:active, .jqx-button-group.warning .jqx-button-group-items .jqx-button-group-item[active] { color: var(--jqx-warning); border-color: var(--jqx-ui-state-border-selected); background-color: rgba(var(--jqx-warning-rgb), .2); } .jqx-button-group.light { border-color: var(--jqx-light); } .jqx-button-group.light .jqx-button-group-items .jqx-button-group-item { color: var(--jqx-light-color); background-color: var(--jqx-light); } .jqx-button-group.light .jqx-button-group-items .jqx-button-group-item:hover { background-color: rgba(var(--jqx-light-rgb), .8); } .jqx-button-group.light .jqx-button-group-items .jqx-button-group-item:active, .jqx-button-group.light .jqx-button-group-items .jqx-button-group-item[active] { color: var(--jqx-light); border-color: var(--jqx-ui-state-border-selected); background-color: rgba(var(--jqx-light-rgb), .2); } .jqx-button-group.dark { border-color: var(--jqx-dark); } .jqx-button-group.dark .jqx-button-group-items .jqx-button-group-item { color: var(--jqx-dark-color); background-color: var(--jqx-dark); } .jqx-button-group.dark .jqx-button-group-items .jqx-button-group-item:hover { background-color: rgba(var(--jqx-dark-rgb), .8); } .jqx-button-group.dark .jqx-button-group-items .jqx-button-group-item:active, .jqx-button-group.dark .jqx-button-group-items .jqx-button-group-item[active] { color: var(--jqx-dark); border-color: var(--jqx-ui-state-border-selected); background-color: rgba(var(--jqx-dark-rgb), .2); } .jqx-button-group:not([animation="none"]) .jqx-button-group-item { transition: background-color 100ms linear, box-shadow 280ms ease-in-out; } .jqx-button-group[right-to-left] .jqx-button-group-items { direction: rtl; } /*# sourceMappingURL=jqx.buttongroup.css.map */ /* jqx-calendar */ .jqx-calendar { width: var(--jqx-calendar-default-width); height: var(--jqx-calendar-default-height); min-width: var(--jqx-calendar-default-width); min-height: var(--jqx-calendar-default-height); } .jqx-calendar:focus { border-color: var(--jqx-outline); } .jqx-calendar > .jqx-container { user-select: none; -moz-user-select: none; -webkit-user-select: none; } .jqx-calendar > .jqx-container, .jqx-calendar.jqx-container { display: flex; justify-content: center; flex-direction: column; } .jqx-calendar jqx-drop-down-list { --jqx-drop-down-list-default-min-height: initial; } .jqx-calendar jqx-tooltip { top: 0; } .jqx-calendar jqx-tooltip .jqx-tooltip-content { border-top-left-radius: var(--jqx-border-top-left-radius); border-top-right-radius: var(--jqx-border-top-right-radius); border-bottom-left-radius: var(--jqx-border-bottom-left-radius); border-bottom-right-radius: var(--jqx-border-bottom-right-radius); } .jqx-calendar input { background: inherit; color: inherit; } .jqx-calendar button:focus { border: 1px solid var(--jqx-outline); outline: none; } .jqx-calendar .jqx-calendar-container { width: 100%; height: 100%; border: initial; padding: 0px; } .jqx-calendar .jqx-calendar-container > .jqx-calendar-body { position: relative; width: 96%; height: calc(100% - var(--jqx-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; } .jqx-calendar .jqx-calendar-container > .jqx-calendar-body:focus .jqx-calendar-date-view-container .jqx-calendar-cell[focus], .jqx-calendar .jqx-calendar-container > .jqx-calendar-body:focus .jqx-calendar-date-view-container .jqx-calendar-cell:focus { background-color: var(--jqx-background); color: var(--jqx-primary); border-color: var(--jqx-primary); } .jqx-calendar .jqx-calendar-container > .jqx-calendar-body > div { display: flex; flex-shrink: 0; flex-wrap: wrap; font-size: inherit; } .jqx-calendar .jqx-calendar-container > .jqx-calendar-body .jqx-hidden { display: none; } .jqx-calendar .jqx-calendar-header { display: flex; align-items: center; justify-content: center; background: var(--jqx-surface); color: var(--jqx-surface-color); border: var(--jqx-border-width) solid var(--jqx-border); height: var(--jqx-calendar-header-height); border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; box-sizing: border-box; width: 100%; outline: initial; text-transform: var(--jqx-calendar-header-text-transform); } .jqx-calendar .jqx-calendar-header.jqx-hidden { display: none; } .jqx-calendar .jqx-calendar-footer { display: flex; align-items: center; justify-content: center; background: var(--jqx-surface); color: var(--jqx-surface-color); border: var(--jqx-border-width) solid var(--jqx-border); height: var(--jqx-calendar-footer-height); border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; box-sizing: border-box; width: 100%; outline: initial; text-transform: var(--jqx-calendar-footer-text-transform); } .jqx-calendar .jqx-calendar-footer.jqx-hidden { display: none; } .jqx-calendar .jqx-calendar-title { width: 100%; padding: var(--jqx-calendar-title-padding); font-size: inherit; font-family: inherit; background: var(--jqx-primary); border: none; color: var(--jqx-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(--jqx-calendar-title-text-transform); height: calc(var(--jqx-calendar-title-height)); } .jqx-calendar .jqx-calendar-title.jqx-hidden { display: none; } .jqx-calendar .jqx-calendar-title div:first-of-type { font-size: 70%; } .jqx-calendar .jqx-calendar-title .jqx-calendar-selected { opacity: 1; } .jqx-calendar .jqx-calendar-title div { position: relative; opacity: 0.5; font-size: 125%; cursor: pointer; display: table; border: 1px solid transparent; } .jqx-calendar .jqx-calendar-cell[other-month] { background: var(--jqx-background); color: var(--jqx-background-color); border-color: var(--jqx-border); opacity: 0.5; } .jqx-calendar .jqx-calendar-cell[focus] { border-color: var(--jqx-outline); } .jqx-calendar .jqx-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; } .jqx-calendar .jqx-calendar-date-element:focus { border-color: var(--jqx-outline); } .jqx-calendar .jqx-calendar-date-element > div { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; outline: initial; font-size: inherit; } .jqx-calendar .jqx-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; } .jqx-calendar .jqx-calendar-date-element div.jqx-hidden { display: none; } .jqx-calendar .jqx-calendar-date-element .jqx-ripple { background-color: var(--jqx-button-color); opacity: 0.2; } .jqx-calendar .jqx-calendar-button .jqx-button { font-family: var(--jqx-font-family-icon); padding: 0px; border-radius: 0px; border: none; background: transparent; min-height: initial; } .jqx-calendar .jqx-calendar-button[prev-month], .jqx-calendar .jqx-calendar-button[next-month] { width: var(--jqx-calendar-navigation-button-size); min-width: var(--jqx-calendar-navigation-button-size); height: var(--jqx-calendar-navigation-button-size); position: relative; font-size: initial; display: inline-block; font-weight: inherit; font-family: var(--jqx-font-family-icon); border-radius: 100%; background: transparent; border: none; color: inherit; } .jqx-calendar .jqx-calendar-button[prev-month][active] button, .jqx-calendar .jqx-calendar-button[next-month][active] button { border: 1px solid var(--jqx-ui-state-hover); background-color: var(--jqx-ui-state-hover); color: var(--jqx-primary); } .jqx-calendar .jqx-calendar-button[next-year], .jqx-calendar .jqx-calendar-button[prev-year] { position: relative; display: block; cursor: default; font-size: 10px; padding: 0px; margin: 0px; border-radius: 0px; border-color: var(--jqx-border); border-left: none; } .jqx-calendar .jqx-calendar-button[next-year] span:after { content: var(--jqx-icon-arrow-up); } .jqx-calendar .jqx-calendar-button[prev-year] { border-top-color: transparent; } .jqx-calendar .jqx-calendar-button[prev-year] span:after { content: var(--jqx-icon-arrow-down); } .jqx-calendar [next-month][focus] button, .jqx-calendar [prev-month][focus] button, .jqx-calendar [next-year][focus] button, .jqx-calendar [prev-year][focus] button { outline: none; } .jqx-calendar .jqx-calendar-list-view.jqx-scroll-viewer { --jqx-input-drop-down-menu-height: 100%; --jqx-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; } .jqx-calendar .jqx-calendar-list-view.jqx-scroll-viewer > .jqx-container { max-height: initial; } .jqx-calendar .jqx-calendar-list-view.jqx-scroll-viewer a { pointer-events: none; } .jqx-calendar .jqx-calendar-week { display: flex; overflow: hidden; text-align: center; justify-content: center; } .jqx-calendar .jqx-calendar-week .jqx-calendar-cell { text-overflow: ellipsis; overflow: hidden; border: 1px solid transparent; padding: 0px; border-top-left-radius: var(--jqx-calendar-cell-border-top-left-radius); border-top-right-radius: var(--jqx-calendar-cell-border-top-right-radius); border-bottom-left-radius: var(--jqx-calendar-cell-border-bottom-left-radius); border-bottom-right-radius: var(--jqx-calendar-cell-border-bottom-right-radius); width: var(--jqx-calendar-cell-size); height: var(--jqx-calendar-cell-size); line-height: calc(var(--jqx-calendar-cell-size) - 2px); margin-right: var(--jqx-calendar-cell-spacing); margin-bottom: var(--jqx-calendar-cell-spacing); position: relative; } .jqx-calendar .jqx-calendar-week .jqx-calendar-cell[selected] { background-color: var(--jqx-primary); color: var(--jqx-primary-color); border-color: var(--jqx-primary); } .jqx-calendar .jqx-calendar-week .jqx-calendar-cell[selected][hover] { background-color: var(--jqx-primary); color: var(--jqx-primary-color); border-color: var(--jqx-primary); } .jqx-calendar .jqx-calendar-week .jqx-calendar-cell[today] { background: var(--jqx-secondary); color: var(--jqx-secondary-color); border-color: var(--jqx-secondary); } .jqx-calendar .jqx-calendar-week .jqx-calendar-cell[today][hover] { background: var(--jqx-secondary); color: var(--jqx-secondary-color); border-color: var(--jqx-secondary); } .jqx-calendar .jqx-calendar-week .jqx-calendar-cell[selected][today] { background-color: var(--jqx-primary); color: var(--jqx-primary-color); border-color: var(--jqx-primary); } .jqx-calendar .jqx-calendar-week .jqx-calendar-cell[focus]:not([selected]), .jqx-calendar .jqx-calendar-week .jqx-calendar-cell:focus:not([selected]) { background-color: var(--jqx-background); color: var(--jqx-primary); border-color: var(--jqx-primary); } .jqx-calendar .jqx-calendar-week .jqx-calendar-cell .jqx-ripple { background-color: var(--jqx-primary-color); opacity: 0.5; } .jqx-calendar .jqx-calendar-week .jqx-calendar-week-number { text-overflow: ellipsis; overflow: hidden; border: 1px solid transparent; padding: 0px; border-top-left-radius: var(--jqx-calendar-cell-border-top-left-radius); border-top-right-radius: var(--jqx-calendar-cell-border-top-right-radius); border-bottom-left-radius: var(--jqx-calendar-cell-border-bottom-left-radius); border-bottom-right-radius: var(--jqx-calendar-cell-border-bottom-right-radius); width: var(--jqx-calendar-cell-size); height: var(--jqx-calendar-cell-size); line-height: calc(var(--jqx-calendar-cell-size) - 2px); margin-right: var(--jqx-calendar-cell-spacing); margin-bottom: var(--jqx-calendar-cell-spacing); position: relative; margin: 0; } .jqx-calendar .jqx-calendar-week.jqx-hidden { display: none; } .jqx-calendar .jqx-calendar-week div[restricted] { cursor: not-allowed; opacity: 0.55; text-decoration: line-through; } .jqx-calendar .jqx-calendar-week div[hover]:not([restricted]) { background-color: var(--jqx-ui-state-hover); color: var(--jqx-ui-state-color-hover); border-color: var(--jqx-ui-state-border-hover); } .jqx-calendar .jqx-calendar-week div[important] { background: var(--jqx-calendar-important-date-background); color: var(--jqx-calendar-important-date-color); border-color: var(--jqx-calendar-important-date-border-color); } @-moz-document url-prefix() { .jqx-calendar .jqx-calendar-week div { padding: initial; } } .jqx-calendar .jqx-calendar-week-number { display: none; margin: auto; } .jqx-calendar .jqx-calendar-week-titles { display: flex; overflow: hidden; text-align: center; justify-content: center; } .jqx-calendar .jqx-calendar-week-titles div:first-child { display: none; margin: auto; } .jqx-calendar .jqx-calendar-week-titles .jqx-calendar-week-title { text-overflow: ellipsis; overflow: hidden; border: 1px solid transparent; padding: 0px; border-top-left-radius: var(--jqx-calendar-cell-border-top-left-radius); border-top-right-radius: var(--jqx-calendar-cell-border-top-right-radius); border-bottom-left-radius: var(--jqx-calendar-cell-border-bottom-left-radius); border-bottom-right-radius: var(--jqx-calendar-cell-border-bottom-right-radius); width: var(--jqx-calendar-cell-size); height: var(--jqx-calendar-cell-size); line-height: calc(var(--jqx-calendar-cell-size) - 2px); margin-right: var(--jqx-calendar-cell-spacing); margin-bottom: var(--jqx-calendar-cell-spacing); position: relative; text-transform: var(--jqx-calendar-week-title-text-transform); } .jqx-calendar .jqx-calendar-months-container { order: 1; width: 100%; height: 100%; align-items: center; } @-moz-document url-prefix() { .jqx-calendar .jqx-calendar-months-container { line-height: initial; } } .jqx-calendar .jqx-calendar-month { display: flex; overflow: hidden; text-align: center; justify-content: center; flex-direction: column; max-width: var(--jqx-calendar-default-width); margin: auto; } .jqx-calendar .jqx-calendar-month-name { display: none; } .jqx-calendar .jqx-calendar-month-separator { display: flex; overflow: hidden; text-align: center; justify-content: center; width: 50%; order: 2; } .jqx-calendar .jqx-calendar-month-element { position: relative; width: 70%; height: 80%; margin: 5% 0; text-align: center; font-size: inherit; } .jqx-calendar .jqx-calendar-year-container:focus { border: 1px solid var(--jqx-outline); outline: none; } .jqx-calendar .jqx-calendar-year-element { outline: none; width: 25%; height: 80%; margin-left: 5%; padding: 2px; text-align: center; font-size: inherit; border-style: solid; border-width: 1px; border-color: var(--jqx-border); border-top-left-radius: var(--jqx-border-top-left-radius); border-top-right-radius: 0px; border-bottom-left-radius: var(--jqx-border-bottom-left-radius); border-bottom-right-radius: 0px; background: var(--jqx-background); } .jqx-calendar .jqx-calendar-year-element:focus { border-color: var(--jqx-outline); } .jqx-calendar .jqx-calendar-year-elements { display: flex; width: 10%; height: 80%; flex-direction: column; align-items: center; justify-content: space-around; } .jqx-calendar .jqx-calendar-year-elements > jqx-repeat-button { height: 50%; width: 100%; } .jqx-calendar .jqx-calendar-year-selector { display: inline-block; } .jqx-calendar .jqx-calendar-next-months-container { order: 3; width: 100%; height: 100%; align-items: center; } @-moz-document url-prefix() { .jqx-calendar .jqx-calendar-next-months-container { line-height: initial; } } .jqx-calendar .jqx-calendar-date-container:focus { border: 1px solid var(--jqx-outline); outline: none; } .jqx-calendar .jqx-calendar-date-view-container { width: 100%; height: 100%; text-align: center; flex-direction: row; align-items: center; } .jqx-calendar .jqx-calendar-date-view-container.jqx-list-display-mode-view { flex-direction: column; } .jqx-calendar .jqx-calendar-date-view-container .jqx-calendar-cell { display: flex; justify-content: center; align-items: center; position: relative; width: 23%; margin: 0 1%; height: 23%; /*height: 3vw;*/ border: 1px solid transparent; border-top-left-radius: var(--jqx-calendar-cell-border-top-left-radius); border-top-right-radius: var(--jqx-calendar-cell-border-top-right-radius); border-bottom-left-radius: var(--jqx-calendar-cell-border-bottom-left-radius); border-bottom-right-radius: var(--jqx-calendar-cell-border-bottom-right-radius); } .jqx-calendar .jqx-calendar-date-view-container .jqx-calendar-cell[focus] { border-color: var(--jqx-outline); } .jqx-calendar .jqx-calendar-date-view-container .jqx-calendar-cell[other-month] { background: var(--jqx-background); color: var(--jqx-background-color); border-color: var(--jqx-border); opacity: 0.5; } .jqx-calendar .jqx-calendar-date-view-container .jqx-visibility-hidden { visibility: visible; opacity: 0.55; } .jqx-calendar .jqx-calendar-animation-panel { position: absolute; background-color: var(--jqx-background); justify-content: center; align-items: center; pointer-events: none; } .jqx-calendar[months] .jqx-calendar-month { width: 50%; } .jqx-calendar[months] .jqx-calendar-month-name { display: initial; } .jqx-calendar[months]:not([months="1"]) { width: calc(2 * var(--jqx-calendar-default-width) + var(--jqx-calendar-cell-size)); height: calc(var(--jqx-calendar-title-height) + var(--jqx-calendar-cell-spacing) + 7 * (var(--jqx-calendar-cell-spacing) + var(--jqx-calendar-cell-size)) + var(--jqx-calendar-header-height) + var(--jqx-calendar-footer-height)); } .jqx-calendar[months="1"] { width: var(--jqx-calendar-default-width); height: var(--jqx-calendar-default-height); min-width: var(--jqx-calendar-default-width); min-height: var(--jqx-calendar-default-height); } .jqx-calendar[months="1"] .jqx-calendar-month { width: 100%; font-size: 100%; } .jqx-calendar[months="1"] .jqx-calendar-month-name { display: none; } .jqx-calendar[months="3"], .jqx-calendar[months="4"] { --jqx-calendar-default-height: calc(2 * calc(var(--jqx-calendar-title-height) + var(--jqx-calendar-cell-spacing) + 7 * (var(--jqx-calendar-cell-spacing) + var(--jqx-calendar-cell-size)) + var(--jqx-calendar-header-height))) !important; } .jqx-calendar[months="5"], .jqx-calendar[months="6"] { --jqx-calendar-default-height: calc(3 * calc(var(--jqx-calendar-title-height) + var(--jqx-calendar-cell-spacing) + 7 * (var(--jqx-calendar-cell-spacing) + var(--jqx-calendar-cell-size)) + var(--jqx-calendar-header-height))) !important; } .jqx-calendar[months="7"], .jqx-calendar[months="8"] { --jqx-calendar-default-height: calc(4 * calc(var(--jqx-calendar-title-height) + var(--jqx-calendar-cell-spacing) + 7 * (var(--jqx-calendar-cell-spacing) + var(--jqx-calendar-cell-size)) + var(--jqx-calendar-header-height))) !important; } .jqx-calendar[months="9"], .jqx-calendar[months="10"] { --jqx-calendar-default-height: calc(5 * calc(var(--jqx-calendar-title-height) + var(--jqx-calendar-cell-spacing) + 7 * (var(--jqx-calendar-cell-spacing) + var(--jqx-calendar-cell-size)) + var(--jqx-calendar-header-height))) !important; } .jqx-calendar[months="11"], .jqx-calendar[months="12"] { --jqx-calendar-default-height: calc(6 * calc(var(--jqx-calendar-title-height) + var(--jqx-calendar-cell-spacing) + 7 * (var(--jqx-calendar-cell-spacing) + var(--jqx-calendar-cell-size)) + var(--jqx-calendar-header-height))) !important; } @media only screen and (max-width: 768px) { .jqx-calendar[months] .jqx-calendar-month { width: 100%; } .jqx-calendar[months="2"] { height: calc(var(--jqx-calendar-title-height) + var(--jqx-calendar-cell-spacing) + 7 * (var(--jqx-calendar-cell-spacing) + var(--jqx-calendar-cell-size)) + var(--jqx-calendar-header-height) + var(--jqx-calendar-footer-height)); } .jqx-calendar[months="3"] { --jqx-calendar-default-height: calc(3 * calc(var(--jqx-calendar-title-height) + var(--jqx-calendar-cell-spacing) + 7 * (var(--jqx-calendar-cell-spacing) + var(--jqx-calendar-cell-size)) + var(--jqx-calendar-header-height))); } .jqx-calendar[months="4"] { --jqx-calendar-default-height: calc(4 * calc(var(--jqx-calendar-title-height) + var(--jqx-calendar-cell-spacing) + 7 * (var(--jqx-calendar-cell-spacing) + var(--jqx-calendar-cell-size)) + var(--jqx-calendar-header-height))); } .jqx-calendar[months="5"] { --jqx-calendar-default-height: calc(5 * calc(var(--jqx-calendar-title-height) + var(--jqx-calendar-cell-spacing) + 7 * (var(--jqx-calendar-cell-spacing) + var(--jqx-calendar-cell-size)) + var(--jqx-calendar-header-height))); } .jqx-calendar[months="6"] { --jqx-calendar-default-height: calc(6 * calc(var(--jqx-calendar-title-height) + var(--jqx-calendar-cell-spacing) + 7 * (var(--jqx-calendar-cell-spacing) + var(--jqx-calendar-cell-size)) + var(--jqx-calendar-header-height))); } .jqx-calendar[months="7"] { --jqx-calendar-default-height: calc(7 * calc(var(--jqx-calendar-title-height) + var(--jqx-calendar-cell-spacing) + 7 * (var(--jqx-calendar-cell-spacing) + var(--jqx-calendar-cell-size)) + var(--jqx-calendar-header-height))); } .jqx-calendar[months="8"] { --jqx-calendar-default-height: calc(8 * calc(var(--jqx-calendar-title-height) + var(--jqx-calendar-cell-spacing) + 7 * (var(--jqx-calendar-cell-spacing) + var(--jqx-calendar-cell-size)) + var(--jqx-calendar-header-height))); } .jqx-calendar[months="9"] { --jqx-calendar-default-height: calc(9 * calc(var(--jqx-calendar-title-height) + var(--jqx-calendar-cell-spacing) + 7 * (var(--jqx-calendar-cell-spacing) + var(--jqx-calendar-cell-size)) + var(--jqx-calendar-header-height))); } .jqx-calendar[months="10"] { --jqx-calendar-default-height: calc(10 * calc(var(--jqx-calendar-title-height) + var(--jqx-calendar-cell-spacing) + 7 * (var(--jqx-calendar-cell-spacing) + var(--jqx-calendar-cell-size)) + var(--jqx-calendar-header-height))); } .jqx-calendar[months="11"] { --jqx-calendar-default-height: calc(11 * calc(var(--jqx-calendar-title-height) + var(--jqx-calendar-cell-spacing) + 7 * (var(--jqx-calendar-cell-spacing) + var(--jqx-calendar-cell-size)) + var(--jqx-calendar-header-height))); } .jqx-calendar[months="12"] { --jqx-calendar-default-height: calc(12 * calc(var(--jqx-calendar-title-height) + var(--jqx-calendar-cell-spacing) + 7 * (var(--jqx-calendar-cell-spacing) + var(--jqx-calendar-cell-size)) + var(--jqx-calendar-header-height))); } } .jqx-calendar[view-sections*=footer] { --jqx-calendar-default-height: calc(var(--jqx-calendar-title-height) + var(--jqx-calendar-cell-spacing) + 7 * (var(--jqx-calendar-cell-spacing) + var(--jqx-calendar-cell-size)) + var(--jqx-calendar-header-height) + var(--jqx-calendar-footer-height)); } .jqx-calendar[view-sections*=footer][view-sections*=header] .jqx-calendar-container > .jqx-calendar-body { height: calc(100% - var(--jqx-calendar-header-height) - var(--jqx-calendar-footer-height)); } .jqx-calendar[view-sections*=title] { --jqx-calendar-default-height: calc(var(--jqx-calendar-title-height) + var(--jqx-calendar-cell-spacing) + 7 * (var(--jqx-calendar-cell-spacing) + var(--jqx-calendar-cell-size)) + var(--jqx-calendar-header-height)); } .jqx-calendar[view-sections*=title] .jqx-calendar-container { width: 100%; height: calc(100% - (var(--jqx-calendar-title-height))); } .jqx-calendar[view-sections*=title][view-sections*=footer] { --jqx-calendar-default-height: calc(var(--jqx-calendar-title-height) + var(--jqx-calendar-cell-spacing) + 7 * (var(--jqx-calendar-cell-spacing) + var(--jqx-calendar-cell-size)) + var(--jqx-calendar-header-height) + var(--jqx-calendar-footer-height)); } .jqx-calendar[scroll-buttons-position=near] .jqx-calendar-button[prev-month] { order: 1; } .jqx-calendar[scroll-buttons-position=near] .jqx-calendar-button[next-month] { order: 2; } .jqx-calendar[scroll-buttons-position=near] .jqx-calendar-date-element { order: 3; } .jqx-calendar[scroll-buttons-position=far] .jqx-calendar-date-element { order: 1; } .jqx-calendar[scroll-buttons-position=far] .jqx-calendar-button[prev-month] { order: 2; } .jqx-calendar[scroll-buttons-position=far] .jqx-calendar-button[next-month] { order: 3; } .jqx-calendar[scroll-buttons-navigation-mode=portrait] .jqx-calendar-month-separator { width: 100%; height: 50%; } .jqx-calendar[scroll-buttons-navigation-mode=portrait] .jqx-calendar-container > .jqx-calendar-body { flex-direction: column; } .jqx-calendar[calendar-mode=classic] .jqx-calendar-title div { cursor: initial; } .jqx-calendar[calendar-mode=classic] .jqx-calendar-date-element { align-items: initial; overflow: initial; } .jqx-calendar[display-mode-view=list][display-mode=year] .jqx-calendar-container > .jqx-calendar-body, .jqx-calendar[display-mode-view=list][display-mode=decade] .jqx-calendar-container > .jqx-calendar-body { touch-action: auto; } .jqx-calendar[hide-other-month-days] .jqx-calendar-cell[other-month] { visibility: hidden; } .jqx-calendar[hide-day-names] .jqx-calendar-week-titles { display: none; } .jqx-calendar[week-numbers] { --jqx-calendar-default-width: calc(var(--jqx-calendar-cell-spacing) + 8 * (var(--jqx-calendar-cell-spacing) + var(--jqx-calendar-cell-size))); } .jqx-calendar[week-numbers][view-sections*=title][view=landscape] { --jqx-calendar-default-width: calc(var(--jqx-calendar-title-height) + var(--jqx-calendar-cell-spacing) + 8 * (var(--jqx-calendar-cell-spacing) + var(--jqx-calendar-cell-size))); } .jqx-calendar[week-numbers] .jqx-calendar-week-number { display: initial; } .jqx-calendar[week-numbers] .jqx-calendar-week-titles div:first-child { display: initial; } .jqx-calendar[view=portrait] > .jqx-container, .jqx-calendar[view=portrait].jqx-container { display: flex; justify-content: center; flex-direction: column; } .jqx-calendar[view=landscape] { --jqx-calendar-default-width: calc(var(--jqx-calendar-title-height) + var(--jqx-calendar-cell-spacing) + 7 * (var(--jqx-calendar-cell-spacing) + var(--jqx-calendar-cell-size))); --jqx-calendar-default-height: calc(var(--jqx-calendar-cell-spacing) + 7 * (var(--jqx-calendar-cell-spacing) + var(--jqx-calendar-cell-size)) + var(--jqx-calendar-header-height)); } .jqx-calendar[view=landscape] > .jqx-container, .jqx-calendar[view=landscape].jqx-container { flex-direction: row; } .jqx-calendar[view=landscape] .jqx-calendar-container { width: calc(100% - (var(--jqx-calendar-title-height))); height: 100%; } .jqx-calendar[view=landscape] .jqx-calendar-title { width: calc(var(--jqx-calendar-title-height)); height: 100%; justify-content: flex-start; } .jqx-calendar[view=landscape][view-sections*=footer] { --jqx-calendar-default-height: calc(var(--jqx-calendar-cell-spacing) + 7 * (var(--jqx-calendar-cell-spacing) + var(--jqx-calendar-cell-size)) + var(--jqx-calendar-header-height) + var(--jqx-calendar-footer-height)); } .jqx-calendar[animation=none] .jqx-calendar-body .jqx-calendar-month-separator, .jqx-calendar[animation=none] .jqx-calendar-body .jqx-calendar-next-months-container { display: none; } /* jqx-calendar */ .jqx-calendar[right-to-left] .jqx-calendar-date-element > div, .jqx-calendar[right-to-left] .jqx-calendar-date-view-container, .jqx-calendar[right-to-left] .jqx-calendar-week-titles .jqx-calendar-week-title, .jqx-calendar[right-to-left] .jqx-calendar-date-view-container .jqx-calendar-cell, .jqx-calendar[right-to-left] .jqx-calendar-week .jqx-calendar-cell, .jqx-calendar[right-to-left] .jqx-calendar-week .jqx-calendar-week-number, .jqx-calendar[right-to-left] .jqx-calendar-title, .jqx-calendar[right-to-left] .jqx-calendar-footer { direction: rtl; } .jqx-calendar[right-to-left] .jqx-calendar-month-element { direction: initial; } .jqx-calendar[right-to-left] .jqx-calendar-year-element { margin-left: initial; margin-right: 5%; } .jqx-calendar[right-to-left][view=landscape] > .jqx-container { flex-direction: row-reverse; } /* .jqx-card */ .jqx-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(--jqx-surface); } @media only screen and (max-width: 768px) { .jqx-cards jqx-card { margin: 0px 10px 10px 10px; } } jqx-card { display: inline-block; width: 30.5%; min-height: 20px; margin: 1%; box-shadow: var(--jqx-elevation-2); box-sizing: border-box; font-size: inherit; } @media only screen and (max-width: 1024px) { jqx-card { display: inline-block; width: 47%; } } @media only screen and (max-width: 768px) { jqx-card { display: block; width: 100%; margin: 0px; max-height: 100vh; overflow-y: auto; } } jqx-card:hover { box-shadow: var(--jqx-elevation-4); } jqx-card.simple { box-shadow: unset; width: auto; margin: 0; } jqx-card[right-to-left] > .jqx-container, jqx-card[right-to-left].jqx-container, jqx-card[right-to-left] > .jqx-container, jqx-card[right-to-left].jqx-container { direction: rtl; } .jqx-card-view { width: var(--jqx-card-view-default-width); min-width: var(--jqx-card-view-column-min-width); height: var(--jqx-card-view-default-height); min-height: 100px; } .jqx-card-view.jqx-container { position: relative; contain: layout style; } .jqx-card-view.jqx-container > jqx-scroll-viewer .jqx-scroll-viewer-content-container { display: flex; padding: 0; } .jqx-card-view > .jqx-container > jqx-scroll-viewer, .jqx-card-view.jqx-container > jqx-scroll-viewer { position: relative; contain: layout style; border: none; width: 100%; height: 100%; background-color: transparent; } .jqx-card-view > .jqx-container > jqx-scroll-viewer .jqx-scroll-viewer-content-container, .jqx-card-view.jqx-container > jqx-scroll-viewer .jqx-scroll-viewer-content-container { display: flex; padding: 0; } .jqx-card-view > .jqx-container[modal], .jqx-card-view.jqx-container[modal] { position: relative; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .jqx-card-view > .jqx-container[modal]:after, .jqx-card-view.jqx-container[modal]:after { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: black; opacity: 0.3; pointer-events: none; cursor: default; -moz-user-select: none; -webkit-user-select: none; user-select: none; } .jqx-card-view > .jqx-container[modal] .jqx-indicator, .jqx-card-view.jqx-container[modal] .jqx-indicator { position: relative; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .jqx-card-view > .jqx-container[modal] .jqx-carousel-item.jqx-active, .jqx-card-view.jqx-container[modal] .jqx-carousel-item.jqx-active { pointer-events: none; } .jqx-card-view jqx-card, .jqx-card-view .jqx-card { display: flex; margin: 0; border: var(--jqx-border-width) solid var(--jqx-card-border, var(--jqx-border)); width: unset; padding: var(--jqx-data-view-padding); overflow: auto; font-family: inherit; font-size: inherit; background-color: var(--jqx-background); color: var(--jqx-background-color); border-top-left-radius: var(--jqx-border-top-left-radius); border-top-right-radius: var(--jqx-border-top-right-radius); border-bottom-left-radius: var(--jqx-border-bottom-left-radius); border-bottom-right-radius: var(--jqx-border-bottom-right-radius); } .jqx-card-view jqx-card > .jqx-container, .jqx-card-view .jqx-card > .jqx-container { display: grid; grid-template-rows: 1fr; grid-row-gap: var(--jqx-card-view-vertical-offset); overflow: auto; } .jqx-card-view jqx-card .jqx-arrow-up.collapsed, .jqx-card-view .jqx-card .jqx-arrow-up.collapsed { transform: rotate(-180deg); } .jqx-card-view jqx-card .jqx-card-view-content.jqx-visibility-hidden, .jqx-card-view .jqx-card .jqx-card-view-content.jqx-visibility-hidden { margin-top: 0; height: 0; transform: scaleY(0); opacity: 0; } .jqx-card-view jqx-card.collapsed, .jqx-card-view .jqx-card.collapsed { height: auto !important; align-self: start; } .jqx-card-view jqx-card[updating] .jqx-card-view-title .jqx-arrow-up, .jqx-card-view jqx-card[updating] .jqx-card-view-content, .jqx-card-view .jqx-card[updating] .jqx-card-view-title .jqx-arrow-up, .jqx-card-view .jqx-card[updating] .jqx-card-view-content { transition: none; } .jqx-card-view jqx-card.drop-target, .jqx-card-view .jqx-card.drop-target { position: relative; } .jqx-card-view jqx-card.drop-target:after, .jqx-card-view .jqx-card.drop-target:after { content: ""; position: absolute; width: 10%; height: 5000px; background-color: var(--jqx-primary); text-decoration: underline; top: 0; } .jqx-card-view jqx-card.drop-target.left:after, .jqx-card-view .jqx-card.drop-target.left:after { left: 0; } .jqx-card-view jqx-card.drop-target.right:after, .jqx-card-view .jqx-card.drop-target.right:after { right: 0; } .jqx-card-view jqx-card.dragged, .jqx-card-view .jqx-card.dragged { position: relative; } .jqx-card-view jqx-card.dragged:after, .jqx-card-view .jqx-card.dragged:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 5000px; background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.1) 75%, transparent 75%, transparent); background-size: 3em 3em; opacity: 0.8; } .jqx-card-view jqx-carousel { width: 100%; } .jqx-card-view jqx-carousel .jqx-carousel-item { border-bottom: 1px solid var(--jqx-border); background-size: cover; } .jqx-card-view jqx-carousel .jqx-carousel-item.jqx-active { pointer-events: none; } .jqx-card-view jqx-carousel .jqx-indicator { pointer-events: all; } .jqx-card-view jqx-carousel .jqx-indicator:only-child { display: none; } .jqx-card-view jqx-carousel * { pointer-events: none; } .jqx-card-view[header-position=top].jqx-container > jqx-scroll-viewer, .jqx-card-view[header-position=bottom].jqx-container > jqx-scroll-viewer { height: calc(100% - var(--jqx-card-view-header-height)); } .jqx-card-view .jqx-card-container { border: none; width: 100%; height: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--jqx-card-view-column-min-width), 1fr)); grid-column-gap: var(--jqx-card-view-column-gap, var(--jqx-card-view-gap)); grid-row-gap: var(--jqx-card-view-row-gap, var(--jqx-card-view-gap)); } .jqx-card-view .jqx-data-view-header { height: var(--jqx-card-view-header-height); } .jqx-card-view .jqx-data-view-header-drop-down .jqx-card-view-customize-top { padding: var(--jqx-data-view-padding); padding-bottom: 0; } .jqx-card-view .jqx-data-view-header-drop-down .jqx-card-view-customize-top > div { display: flex; align-items: center; justify-content: space-between; } .jqx-card-view .jqx-data-view-header-drop-down .jqx-card-view-customize-top jqx-switch-button { margin-left: 30px; margin-right: 30px; position: relative; z-index: 1; } .jqx-card-view .jqx-data-view-header-drop-down .jqx-card-view-customize-top jqx-switch-button:before { content: attr(crop); position: absolute; left: -30px; top: 50%; transform: translateY(-50%); font-size: 11px; } .jqx-card-view .jqx-data-view-header-drop-down .jqx-card-view-customize-top jqx-switch-button:after { position: absolute; top: 50%; transform: translateY(-50%); font-size: 11px; content: attr(fit); left: calc(100% + 5px); } .jqx-card-view .jqx-data-view-header-drop-down .jqx-card-view-customize-top jqx-input { width: 100%; } .jqx-card-view .jqx-scroll-viewer-container.vscroll .jqx-card-container { padding-right: 3px; } .jqx-card-view .jqx-card-data-container { display: grid; grid-template-rows: 1fr; padding: 0px 0.5rem; } .jqx-card-view .jqx-card-view-value { overflow: hidden; text-overflow: ellipsis; word-break: break-word; } .jqx-card-view .jqx-card-view-title { font-size: calc(var(--jqx-font-size) + 3px); font-weight: bold; display: grid; grid-template-columns: 1fr auto; width: 100%; align-items: center; overflow: hidden; text-overflow: ellipsis; } .jqx-card-view .jqx-card-view-title:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .jqx-card-view .jqx-card-view-title .jqx-arrow-up { display: none; border-radius: 50%; width: 16px; height: 16px; background-color: var(--jqx-background-color); opacity: 0.7; cursor: pointer; } .jqx-card-view .jqx-card-view-title .jqx-arrow-up:after { color: var(--jqx-background); } .jqx-card-view .jqx-card-view-title .jqx-arrow-up:hover { opacity: 1; } .jqx-card-view .jqx-card-view-label { margin-bottom: calc(var(--jqx-card-view-vertical-offset) / 3); text-transform: uppercase; font-size: calc(var(--jqx-font-size) - 2px); overflow: hidden; text-overflow: ellipsis; } .jqx-card-view .jqx-card-view-label.icon { position: relative; padding-left: 30px; } .jqx-card-view .jqx-card-view-label.icon:after { content: ""; position: absolute; left: 0; top: 0; width: 30px; height: 100%; background-repeat: no-repeat; background-position: center; } .jqx-card-view .jqx-card-view-content { margin-top: var(--jqx-card-view-vertical-offset); transform: scaleY(1); transform-origin: top; opacity: 1; } .jqx-card-view .jqx-card-view-cell { margin-bottom: var(--jqx-card-view-vertical-offset); } .jqx-card-view .jqx-card-view-cell:last-child { margin-bottom: 0; } .jqx-card-view .jqx-add-new-button { display: none; } .jqx-card-view[cell-orientation=horizontal] .jqx-card-view-cell { display: flex; align-items: center; justify-content: space-between; } .jqx-card-view[cell-orientation=horizontal] .jqx-card-view-label { margin-bottom: 0; } .jqx-card-view[cell-orientation=horizontal] .jqx-card-view-value { text-align: right; } .jqx-card-view[cover-mode=fit] .jqx-carousel-item { background-size: contain; } .jqx-card-view[editable] jqx-card, .jqx-card-view[editable] .jqx-card { cursor: pointer; } .jqx-card-view[add-new-button] .jqx-add-new-button { display: block; position: absolute; bottom: 20px; right: calc(23px + var(--jqx-scroll-bar-size)); width: var(--jqx-card-view-add-new-button-size); height: var(--jqx-card-view-add-new-button-size); border-radius: 50%; background-color: var(--jqx-primary); color: var(--jqx-primary-color); cursor: pointer; } .jqx-card-view[add-new-button] .jqx-add-new-button:after { content: var(--jqx-icon-plus); display: flex; align-items: center; justify-content: center; margin-top: 2px; width: 100%; height: 100%; font-family: var(--jqx-font-family-icon); font-size: 20px; } .jqx-card-view[add-new-button] .jqx-add-new-button:hover { transform: scale(1.2, 1.2); } .jqx-card-view[add-new-button]:not([animation=none]) .jqx-add-new-button { transition: transform cubic-bezier(0.81, 0.27, 0, 0.93) 0.5s; } .jqx-card-view[empty] .jqx-card-view-header { pointer-events: none; opacity: 0.55; } .jqx-card-view[empty] .jqx-card-container:after { content: attr(no-data); } .jqx-card-view[no-matches] .jqx-card-container:after { content: attr(no-matches); } .jqx-card-view[empty] .jqx-scroll-viewer-content-container, .jqx-card-view[no-matches] .jqx-scroll-viewer-content-container { height: 100%; } .jqx-card-view[empty] .jqx-card-container, .jqx-card-view[no-matches] .jqx-card-container { height: 100%; } .jqx-card-view[empty] .jqx-card-container:after, .jqx-card-view[no-matches] .jqx-card-container:after { display: flex; align-items: center; justify-content: center; font-style: italic; } .jqx-card-view[loading] jqx-card > .jqx-container { visibility: hidden; } .jqx-card-view[loading] jqx-card.jqx-hidden { display: flex !important; } .jqx-card-view[loading] .jqx-card-view-content { transition: none; } .jqx-card-view[cover-field]:not([cover-field=null]) jqx-card > .jqx-container { grid-template-rows: var(--jqx-card-view-cover-height) 1fr; } .jqx-card-view:not([collapsible]) .jqx-card-view-title.empty { display: none; } .jqx-card-view:not([collapsible]) .jqx-card-view-title.empty:first-child + .jqx-card-view-content { margin-top: 0; } .jqx-card-view:not([animation=none]) .jqx-card-view-title .jqx-arrow-up { transition: transform 0.2s ease-in; } .jqx-card-view:not([animation=none]) .jqx-card-view-content { transition-property: margin-top, height, transform, visibility, opacity; transition-duration: 0.2s; transition-timing-function: ease-in; } .jqx-card-view[collapsible] .jqx-card-data-container { grid-template-rows: auto 1fr; } .jqx-card-view[collapsible] .jqx-card-view-title .jqx-arrow-up { display: block; } .jqx-card-view[title-field] .jqx-card-data-container { grid-template-rows: auto 1fr; } .jqx-card-view[dragging] jqx-card { overflow: hidden; } .jqx-card-view[allow-drag] .jqx-card-data-container { -moz-user-select: none; -webkit-user-select: none; user-select: none; } .jqx-card-view[allow-drag] .jqx-card-view-content { pointer-events: none; } .jqx-window.jqx-card-view-window { --jqx-numeric-text-box-text-align: left; --jqx-window-default-height: 75%; cursor: initial; z-index: 999; } .jqx-window.jqx-card-view-window .jqx-header { font-size: calc(var(--jqx-font-size) * 1.5); } .jqx-window.jqx-card-view-window .jqx-prev-button:after, .jqx-window.jqx-card-view-window .jqx-next-button:after { font-size: calc(100% - 2px); } .jqx-window.jqx-card-view-window .jqx-prev-button:after { content: var(--jqx-icon-arrow-up); } .jqx-window.jqx-card-view-window .jqx-next-button:after { content: var(--jqx-icon-arrow-down); } .jqx-window.jqx-card-view-window .jqx-card-view-label { overflow: hidden; text-overflow: ellipsis; display: flex; justify-content: space-between; margin-bottom: calc(var(--jqx-card-view-vertical-offset) / 3); text-transform: uppercase; font-size: calc(var(--jqx-font-size) - 2px); opacity: 0.7; } .jqx-window.jqx-card-view-window .jqx-card-view-label .toggle-visibility { font-family: var(--jqx-font-family-icon); cursor: pointer; color: var(--jqx-color); } .jqx-window.jqx-card-view-window .jqx-card-view-label .toggle-visibility:after { content: var(--jqx-icon-visibility); } .jqx-window.jqx-card-view-window .jqx-card-view-label .toggle-visibility.hidden:after { content: var(--jqx-icon-visibility-off); } .jqx-window.jqx-card-view-window .jqx-card-view-label:not(:first-child) { margin-top: var(--jqx-card-view-vertical-offset); } .jqx-window.jqx-card-view-window .jqx-card-view-label.icon { position: relative; padding-left: 30px; } .jqx-window.jqx-card-view-window .jqx-card-view-label.icon:after { content: ""; position: absolute; left: 0; top: 0; width: 30px; height: 100%; background-repeat: no-repeat; background-position: center; } .jqx-window.jqx-card-view-window .jqx-content-container > .jqx-content { display: block; padding: 20px; } .jqx-window.jqx-card-view-window .jqx-content-container > .jqx-footer { display: flex; justify-content: space-evenly; align-items: center; } .jqx-window.jqx-card-view-window .jqx-footer jqx-button { --jqx-button-padding: 0; width: 25%; height: 100%; } .jqx-window.jqx-card-view-window .jqx-card-view-editor { width: 100%; } .jqx-window.jqx-card-view-window .jqx-card-view-editor.image .thumbnail { position: relative; display: inline-block; margin-right: 5px; border: var(--jqx-border-width) solid var(--jqx-border); width: 75px; height: 75px; background-position: center; background-repeat: no-repeat; background-size: cover; cursor: pointer; } .jqx-window.jqx-card-view-window .jqx-card-view-editor.image .thumbnail:hover:after { content: var(--jqx-icon-close); position: absolute; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; left: 0; top: 0; background-color: var(--jqx-ui-state-hover); color: var(--jqx-ui-state-color-hover); font-family: var(--jqx-font-family-icon); font-size: 50px; opacity: 0.4; } .jqx-window.jqx-card-view-window .jqx-card-view-editor.image .label { margin-top: 3px; font-size: calc(var(--jqx-font-size) - 3px); text-transform: uppercase; opacity: 0.7; } .jqx-window.jqx-card-view-window .jqx-card-view-editor.image .container { display: flex; flex-direction: row; justify-content: space-between; align-items: stretch; margin-top: 5px; height: 30px; } .jqx-window.jqx-card-view-window .jqx-card-view-editor.image jqx-input { width: calc(100% - 40px); height: 100%; } .jqx-window.jqx-card-view-window .jqx-card-view-editor.image jqx-button { --jqx-button-padding: 0; width: 30px; height: 100%; font-size: 20px; } .jqx-window.jqx-card-view-window textarea.jqx-card-view-editor { min-height: 150px; resize: vertical; border-color: var(--jqx-border); border-top-right-radius: var(--jqx-border-top-right-radius); border-top-left-radius: var(--jqx-border-top-left-radius); border-bottom-left-radius: var(--jqx-border-bottom-left-radius); border-bottom-right-radius: var(--jqx-border-bottom-right-radius); font-family: inherit; font-size: inherit; } .jqx-window.jqx-card-view-window textarea.jqx-card-view-editor:hover { border-color: var(--jqx-ui-state-border-hover); } .jqx-window.jqx-card-view-window textarea.jqx-card-view-editor:focus { outline: none; border-color: var(--jqx-outline); } .jqx-card-view-drag-feedback { position: absolute; display: flex; align-items: center; box-shadow: var(--jqx-elevation-8); border: var(--jqx-border-width) solid var(--jqx-border); border-radius: var(--jqx-border-radius); padding: 5px; white-space: nowrap; font-family: var(--jqx-font-family); font-size: 20px; background-color: var(--jqx-background); color: var(--jqx-background-color); z-index: 10000; opacity: 0.85; } .jqx-card-view-drag-feedback > .drag-feedback-thumbnail { width: 50px; height: 50px; background-size: cover; } .jqx-card-view-drag-feedback:nth-child(2) { margin-left: 10px; } .jqx-card-view[right-to-left] .jqx-card-view-label.icon { padding-left: 0; padding-right: 30px; } .jqx-card-view[right-to-left] .jqx-card-view-label.icon:after { left: initial; right: 0; } .jqx-card-view[right-to-left] .jqx-card-view-customize-top { direction: rtl; } .jqx-card-view[right-to-left] .jqx-scroll-viewer-container.vscroll .jqx-card-container { padding-left: 3px; padding-right: initial; } .jqx-window.jqx-card-view-window[right-to-left] .jqx-card-view-label.icon { padding-left: 0; padding-right: 30px; } .jqx-window.jqx-card-view-window[right-to-left] .jqx-card-view-label.icon:after { left: initial; right: 0; } .jqx-card-view-drag-feedback[right-to-left] { direction: rtl; } .jqx-card-view-drag-feedback[right-to-left]:nth-child(2) { margin-right: 10px; margin-left: initial; } .jqx-sort-panel[right-to-left] .jqx-grid-panel-container-footer, .jqx-group-panel[right-to-left] .jqx-grid-panel-container-footer, .jqx-column-panel[right-to-left] .jqx-grid-panel-container-footer, .jqx-multi-column-filter-panel[right-to-left] .jqx-grid-panel-container-footer { flex-direction: row-reverse; } .jqx-sort-panel[right-to-left] .jqx-grid-panel-buttons-container .jqx-grid-panel-apply-button, .jqx-group-panel[right-to-left] .jqx-grid-panel-buttons-container .jqx-grid-panel-apply-button, .jqx-column-panel[right-to-left] .jqx-grid-panel-buttons-container .jqx-grid-panel-apply-button, .jqx-multi-column-filter-panel[right-to-left] .jqx-grid-panel-buttons-container .jqx-grid-panel-apply-button { margin-right: 15px; margin-left: initial; } /* jqx-carousel */ jqx-carousel { width: var(--jqx-carousel-default-width); height: var(--jqx-carousel-default-height); } jqx-carousel > .jqx-container, jqx-carousel.jqx-container { display: block; position: relative; width: 100%; height: 100%; } jqx-carousel .jqx-items-container { position: relative; width: 100%; height: 100%; box-sizing: border-box; overflow: hidden; } jqx-carousel[disabled] { opacity: 0.55; cursor: default; pointer-events: none; } jqx-carousel[swipe] { user-select: none; } jqx-carousel .jqx-carousel-item { width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; opacity: 0; z-index: 0; box-sizing: border-box; pointer-events: none; user-select: none; background-position: center; background-repeat: no-repeat; } jqx-carousel .jqx-carousel-item .jqx-carousel-item-container { pointer-events: none; user-select: text; position: relative; width: 100%; height: 100%; background-repeat: no-repeat; padding-top: 50px; z-index: 1; box-sizing: border-box; background-position: center; background-size: cover; } jqx-carousel .jqx-carousel-item .jqx-carousel-item-label, jqx-carousel .jqx-carousel-item .jqx-carousel-item-content { text-align: center; box-sizing: border-box; position: absolute; top: 30%; left: 50%; transform: translate(-50%, -50%); } jqx-carousel .jqx-carousel-item .jqx-carousel-item-content { top: 40%; transform: translate(-50%, 0%); } jqx-carousel .jqx-carousel-item .jqx-carousel-html-content { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 0; box-sizing: border-box; } jqx-carousel .jqx-carousel-item.jqx-active { opacity: 1; pointer-events: all; user-select: text; } jqx-carousel .jqx-arrow { position: absolute; top: 0px; width: 30px; height: 100%; cursor: pointer; opacity: 0.6; display: block; } jqx-carousel .jqx-arrow:after { font-size: 20px; position: absolute; left: 0px; top: 0px; pointer-events: none; user-select: none; } jqx-carousel .jqx-arrow:focus, jqx-carousel .jqx-arrow:hover { opacity: 0.8; } jqx-carousel .jqx-arrow:active { opacity: 1; } jqx-carousel .jqx-arrow > .jqx-button { border-width: 0px; } jqx-carousel .jqx-arrow > .jqx-button:active { background-color: transparent; } jqx-carousel .jqx-arrow[disabled] { opacity: 0.4; pointer-events: none; } jqx-carousel .jqx-arrow.jqx-arrow-left { left: 0px; } jqx-carousel .jqx-arrow.jqx-arrow-right { right: 0px; } jqx-carousel[hide-arrows] .jqx-arrow { display: none; } jqx-carousel .jqx-indicators-container { position: absolute; bottom: 10px; left: 50%; transform: translate(-50%); display: flex; flex-direction: row; align-items: center; } jqx-carousel .jqx-indicators-container .jqx-indicator { width: 10px; height: 10px; border: 1px solid gray; background-color: white; margin: 2px; cursor: pointer; box-sizing: content-box; opacity: 0.5; } jqx-carousel .jqx-indicators-container .jqx-indicator.jqx-active { opacity: 0.9; border-width: 3px; } jqx-carousel .jqx-indicators-container .jqx-indicator:hover { opacity: 0.7; } jqx-carousel[hide-indicators] .jqx-indicators-container { display: none; } jqx-carousel:not([animation='none']) { /* displayMode:"default" animations */ /* fade */ /* slide right to left */ /* slide left to right */ /* slide bottom to top */ /* slide top to bottom */ } jqx-carousel:not([animation='none']) .jqx-carousel-item { animation-duration: 1s; } jqx-carousel:not([animation='none']) .jqx-carousel-item.jqx-active.jqx-animate-trigger, jqx-carousel:not([animation='none']).fade .jqx-carousel-item.jqx-active.jqx-animate-trigger { animation-name: carousel-active-fade; } jqx-carousel:not([animation='none']) .jqx-carousel-item.jqx-out.jqx-animate-trigger, jqx-carousel:not([animation='none']).fade .jqx-carousel-item.jqx-out.jqx-animate-trigger { animation-name: carousel-out-fade; } jqx-carousel:not([animation='none']).slide .jqx-carousel-item.jqx-active.jqx-animate-trigger, jqx-carousel:not([animation='none']).slide-left .jqx-carousel-item.jqx-active.jqx-animate-trigger { animation-name: carousel-active-slide; } jqx-carousel:not([animation='none']).slide .jqx-carousel-item.jqx-out.jqx-animate-trigger, jqx-carousel:not([animation='none']).slide-left .jqx-carousel-item.jqx-out.jqx-animate-trigger { animation-name: carousel-out-slide; } jqx-carousel:not([animation='none']).slide-right .jqx-carousel-item.jqx-active.jqx-animate-trigger { animation-name: carousel-active-slide-right; } jqx-carousel:not([animation='none']).slide-right .jqx-carousel-item.jqx-out.jqx-animate-trigger { animation-name: carousel-out-slide-right; } jqx-carousel:not([animation='none']).slide-top .jqx-carousel-item.jqx-active.jqx-animate-trigger { animation-name: carousel-active-slide-top; } jqx-carousel:not([animation='none']).slide-top .jqx-carousel-item.jqx-out.jqx-animate-trigger { animation-name: carousel-out-slide-top; } jqx-carousel:not([animation='none']).slide-bottom .jqx-carousel-item.jqx-active.jqx-animate-trigger { animation-name: carousel-active-slide-bottom; } jqx-carousel:not([animation='none']).slide-bottom .jqx-carousel-item.jqx-out.jqx-animate-trigger { animation-name: carousel-out-slide-bottom; } jqx-carousel[display-mode="3d"] .jqx-carousel-html-content { padding-left: 30px; padding-right: 20px; } jqx-carousel[display-mode="3d"] .jqx-carousel-item { width: var(--jqx-carousel-3d-mode-slide-width); height: var(--jqx-carousel-3d-mode-slide-height); border: white solid 20px; 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: 0ms; } jqx-carousel[display-mode="3d"] .jqx-carousel-item[position="-3"] { transform: perspective(800px) translateX(calc(-50% - 340px)) translateY(-50%) scale(0.4); opacity: .1; z-index: 1; } jqx-carousel[display-mode="3d"] .jqx-carousel-item[position="-2"] { transform: perspective(800px) translateX(calc(-50% - 300px)) translateY(-50%) scale(0.5); opacity: .2; z-index: 8; } jqx-carousel[display-mode="3d"] .jqx-carousel-item[position="-1"] { transform: perspective(800px) translateX(calc(-50% - 260px)) translateY(-50%) scale(0.6); opacity: .3; z-index: 9; } jqx-carousel[display-mode="3d"] .jqx-carousel-item[position="1"] { transform: perspective(800px) translateX(calc(-50% + 260px)) translateY(-50%) scale(0.6); opacity: .3; z-index: 9; } jqx-carousel[display-mode="3d"] .jqx-carousel-item[position="2"] { transform: perspective(800px) translateX(calc(-50% + 300px)) translateY(-50%) scale(0.5); opacity: .2; z-index: 8; } jqx-carousel[display-mode="3d"] .jqx-carousel-item[position="3"] { transform: perspective(800px) translateX(calc(-50% + 340px)) translateY(-50%) scale(0.4); opacity: .1; z-index: 1; } jqx-carousel[display-mode="3d"]:not([animation='none']) .jqx-carousel-item { transition-duration: 700ms; } jqx-carousel[display-mode="3d"]:not([animation='none']) .jqx-carousel-item, jqx-carousel[display-mode="3d"]:not([animation='none']) .jqx-carousel-item.jqx-active, jqx-carousel[display-mode="3d"]:not([animation='none']) .jqx-carousel-item.jqx-out { animation-name: unset; } jqx-carousel[display-mode="3d"].circle .jqx-carousel-item { border-radius: 50%; } jqx-carousel[display-mode="3d"].vertical .jqx-carousel-item[position="-3"] { transform: perspective(800px) translateX(-50%) translateY(calc(-50% - 210px)) scale(0.4); } jqx-carousel[display-mode="3d"].vertical .jqx-carousel-item[position="-2"] { transform: perspective(800px) translateX(-50%) translateY(calc(-50% - 180px)) scale(0.5); } jqx-carousel[display-mode="3d"].vertical .jqx-carousel-item[position="-1"] { transform: perspective(800px) translateX(-50%) translateY(calc(-50% - 150px)) scale(0.6); } jqx-carousel[display-mode="3d"].vertical .jqx-carousel-item[position="1"] { transform: perspective(800px) translateX(-50%) translateY(calc(-50% + 150px)) scale(0.6); } jqx-carousel[display-mode="3d"].vertical .jqx-carousel-item[position="2"] { transform: perspective(800px) translateX(-50%) translateY(calc(-50% + 180px)) scale(0.5); } jqx-carousel[display-mode="3d"].vertical .jqx-carousel-item[position="3"] { transform: perspective(800px) translateX(-50%) translateY(calc(-50% + 210px)) scale(0.4); } jqx-carousel[display-mode="3d"]:not([animation='none']).horizontal-stacked .jqx-carousel-item[position="-3"] { transform: perspective(800px) translateX(calc(-50% - 395px)) translateY(-50%) scale(0.4); } jqx-carousel[display-mode="3d"]:not([animation='none']).horizontal-stacked .jqx-carousel-item[position="-2"] { transform: perspective(800px) translateX(calc(-50% - 355px)) translateY(-50%) scale(0.5); } jqx-carousel[display-mode="3d"]:not([animation='none']).horizontal-stacked .jqx-carousel-item[position="-1"] { transform: perspective(800px) translateX(calc(-50% - 280px)) translateY(-50%) scale(0.6); } jqx-carousel[display-mode="3d"]:not([animation='none']).horizontal-stacked .jqx-carousel-item[position="1"] { transform: perspective(800px) translateX(calc(-50% + 280px)) translateY(-50%) scale(0.6); } jqx-carousel[display-mode="3d"]:not([animation='none']).horizontal-stacked .jqx-carousel-item[position="2"] { transform: perspective(800px) translateX(calc(-50% + 355px)) translateY(-50%) scale(0.5); } jqx-carousel[display-mode="3d"]:not([animation='none']).horizontal-stacked .jqx-carousel-item[position="3"] { transform: perspective(800px) translateX(calc(-50% + 395px)) translateY(-50%) scale(0.4); } jqx-carousel[display-mode="3d"]:not([animation='none']).bottom-top .jqx-carousel-item[position="-3"] { transform: perspective(800px) translateX(calc(-50% - 450px)) translateY(calc(-50% + 150px)) scale(0.2); } jqx-carousel[display-mode="3d"]:not([animation='none']).bottom-top .jqx-carousel-item[position="-2"] { transform: perspective(800px) translateX(calc(-50% - 380px)) translateY(calc(-50% + 100px)) scale(0.4); } jqx-carousel[display-mode="3d"]:not([animation='none']).bottom-top .jqx-carousel-item[position="-1"] { transform: perspective(800px) translateX(calc(-50% - 280px)) translateY(calc(-50% + 30px)) scale(0.6); } jqx-carousel[display-mode="3d"]:not([animation='none']).bottom-top .jqx-carousel-item[position="1"] { transform: perspective(800px) translateX(calc(-50% + 280px)) translateY(calc(-50% - 30px)) scale(0.6); } jqx-carousel[display-mode="3d"]:not([animation='none']).bottom-top .jqx-carousel-item[position="2"] { transform: perspective(800px) translateX(calc(-50% + 380px)) translateY(calc(-50% - 100px)) scale(0.4); } jqx-carousel[display-mode="3d"]:not([animation='none']).bottom-top .jqx-carousel-item[position="3"] { transform: perspective(800px) translateX(calc(-50% + 450px)) translateY(calc(-50% - 150px)) scale(0.2); } jqx-carousel[display-mode="3d"]:not([animation='none']).top-bottom .jqx-carousel-item[position="-3"] { transform: perspective(800px) translateX(calc(-50% - 450px)) translateY(calc(-50% - 150px)) scale(0.2); } jqx-carousel[display-mode="3d"]:not([animation='none']).top-bottom .jqx-carousel-item[position="-2"] { transform: perspective(800px) translateX(calc(-50% - 380px)) translateY(calc(-50% - 100px)) scale(0.4); } jqx-carousel[display-mode="3d"]:not([animation='none']).top-bottom .jqx-carousel-item[position="-1"] { transform: perspective(800px) translateX(calc(-50% - 280px)) translateY(calc(-50% - 30px)) scale(0.6); } jqx-carousel[display-mode="3d"]:not([animation='none']).top-bottom .jqx-carousel-item[position="1"] { transform: perspective(800px) translateX(calc(-50% + 280px)) translateY(calc(-50% + 30px)) scale(0.6); } jqx-carousel[display-mode="3d"]:not([animation='none']).top-bottom .jqx-carousel-item[position="2"] { transform: perspective(800px) translateX(calc(-50% + 380px)) translateY(calc(-50% + 100px)) scale(0.4); } jqx-carousel[display-mode="3d"]:not([animation='none']).top-bottom .jqx-carousel-item[position="3"] { transform: perspective(800px) translateX(calc(-50% + 450px)) translateY(calc(-50% + 150px)) scale(0.2); } jqx-carousel[display-mode="multiple"]:not([animation='none']).jqx-carousel-item.jqx-out, jqx-carousel[display-mode="multiple"]:not([animation='none']).jqx-carousel-item.jqx-active, jqx-carousel[display-mode="multiple"]:not([animation='none']).jqx-carousel-item.jqx-animate-trigger.jqx-out, jqx-carousel[display-mode="multiple"]:not([animation='none']).jqx-carousel-item.jqx-animate-trigger.jqx-active { animation-name: none; } jqx-carousel[display-mode="multiple"]:not([animation='none']) .jqx-items-container { transition-duration: 1s; } jqx-carousel[display-mode="multiple"] .jqx-items-container { overflow: hidden; width: max-content; transition: margin-left ease-in-out; } jqx-carousel[display-mode="multiple"] .jqx-carousel-item { opacity: 1; float: left; display: inline-block; position: relative; width: var(--jqx-carousel-multiple-mode-slide-width); } jqx-carousel[display-mode="multiple"] .jqx-carousel-item.jqx-active { background-color: lightgray; transition: background-color 1s ease-in-out; } jqx-carousel[display-mode="multiple"] .jqx-carousel-item.jqx-out { transition: background-color 1s ease-in-out; } jqx-carousel jqx-repeat-button[hover] button { background-color: transparent; } jqx-carousel[adaptive-height], jqx-carousel[adaptive-auto-height] { height: 100%; overflow: visible; transition: height 0.6s ease-out; margin: 0 auto 70px auto; } jqx-carousel[adaptive-height] > .jqx-container, jqx-carousel[adaptive-height].jqx-container, jqx-carousel[adaptive-auto-height] > .jqx-container, jqx-carousel[adaptive-auto-height].jqx-container { position: relative; } jqx-carousel[adaptive-height] .jqx-container, jqx-carousel[adaptive-auto-height] .jqx-container { overflow: visible; } jqx-carousel[adaptive-height] .jqx-carousel-item, jqx-carousel[adaptive-auto-height] .jqx-carousel-item { height: auto; } jqx-carousel[adaptive-height] .jqx-slide-wrapper, jqx-carousel[adaptive-auto-height] .jqx-slide-wrapper { height: 100%; position: relative; display: flex; align-items: center; padding: 0 65px; } jqx-carousel[adaptive-height] .jqx-indicators-container, jqx-carousel[adaptive-auto-height] .jqx-indicators-container { display: flex; align-items: center; justify-content: center; position: relative; bottom: 0; margin-top: 20px; } jqx-carousel[adaptive-height] .jqx-arrow, jqx-carousel[adaptive-auto-height] .jqx-arrow { width: 50px; height: 50px; background: var(--jqx-surface); display: flex; align-items: center; justify-content: center; border-color: var(--jqx-border); top: 50%; transform: translateY(-50%); } jqx-carousel[adaptive-height].jqx-calculated-height .jqx-carousel-item, jqx-carousel[adaptive-auto-height].jqx-calculated-height .jqx-carousel-item { height: 100%; display: flex; justify-content: center; align-items: center; } jqx-carousel[adaptive-height].jqx-calculated-height .jqx-slide-wrapper, jqx-carousel[adaptive-auto-height].jqx-calculated-height .jqx-slide-wrapper { height: auto; } [disabled] .jqx-carousel-item.jqx-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: 0px; } } @keyframes carousel-out-slide-bottom { from { opacity: 1; top: 0px; } to { opacity: 1; top: 100%; } } /* jqx-carousel */ jqx-carousel[right-to-left] .jqx-carousel-item, jqx-carousel[right-to-left] .jqx-indicators-container { direction: rtl; } /*# sourceMappingURL=jqx.carousel.css.map */ /* jqx-chart */ jqx-chart { display: block; width: var(--jqx-chart-default-width); height: var(--jqx-chart-default-height); } jqx-chart .jqx-chart-axis-text, jqx-chart .jqx-chart-label-text, jqx-chart .jqx-chart-legend-text, jqx-chart .jqx-chart-annotation-text, jqx-chart .jqx-chart-axis-description { box-sizing: content-box; fill: var(--jqx-background-color); color: var(--jqx-background-color); font-family: var(--jqx-font-family); font-size: calc(var(--jqx-font-size) - 1px); } jqx-chart .jqx-chart-title-text { fill: var(--jqx-background-color); color: var(--jqx-background-color); font-family: var(--jqx-font-family); font-weight: bold; font-size: calc(var(--jqx-font-size) + 2px); } jqx-chart .jqx-chart-title-description { fill: var(--jqx-background-color); color: var(--jqx-background-color); font-family: var(--jqx-font-family); font-size: var(--jqx-font-size); } jqx-chart[theme=dark] .jqx-chart-title-text, jqx-chart[theme=dark] .jqx-chart-title-description, jqx-chart[theme=dark] .jqx-chart-axis-text, jqx-chart[theme=dark] .jqx-chart-axis-description .jqx-chart-label-text, jqx-chart[theme=dark] .jqx-chart-legend-text, jqx-chart[theme=dark] .jqx-chart-annotation-text { fill: var(--jqx-background-color); color: var(--jqx-background-color); } .jqx-chart-range-selector > jqx-chart { width: 100%; height: 100%; touch-action: none; } .jqx-chart-range-selector .slider { box-sizing: content-box; pointer-events: none; } .jqx-chart-tooltip { position: absolute; cursor: default; z-index: 10000000; transition: 0.3s ease-in, transform 0.3s ease-in; opacity: 1; transform: scale(1); } .jqx-chart-tooltip .jqx-chart-tooltip-content { position: absolute; box-sizing: content-box; outline: none; border: 1px solid transparent; padding: 3px; text-align: center; vertical-align: middle; margin: 0 0 0 0; cursor: default; left: 0; top: 0; border-radius: var(--jqx-border-radius); } .jqx-chart-tooltip .jqx-chart-tooltip-text { box-sizing: content-box; fill: var(--jqx-background-color); color: var(--jqx-background-color); font-family: var(--jqx-font-family); font-size: calc(var(--jqx-font-size) - 1px); } .jqx-chart-tooltip .jqx-chart-tooltip-arrow-outer { box-sizing: content-box; width: 0; height: 0; position: absolute; z-index: 10000001; } .jqx-chart-tooltip .jqx-chart-tooltip-arrow-inner { box-sizing: content-box; width: 0; height: 0; position: absolute; z-index: 10000002; } .jqx-chart-tooltip[animation=none] { transition: none; } .jqx-chart-tooltip.jqx-visibility-hidden { transform: scale(0); } [theme=dark] .jqx-chart-tooltip:not([theme=dark]) .jqx-chart-tooltip-text { fill: var(--jqx-background); color: var(--jqx-background); } /* jqx-chart */ jqx-chart[right-to-left] .jqx-chart-axis-text, jqx-chart[right-to-left] .jqx-chart-axis-description, jqx-chart[right-to-left] .jqx-chart-title-text, jqx-chart[right-to-left] .jqx-chart-legend-text, jqx-chart[right-to-left] .jqx-chart-annotation-text, jqx-chart[right-to-left] .jqx-chart-label-text { direction: rtl; text-anchor: end; } .jqx-chart-tooltip[right-to-left] .jqx-chart-tooltip-text { direction: rtl; text-anchor: end; } /* jqx-combo-box */ jqx-combo-box { width: var(--jqx-combo-box-default-width); height: var(--jqx-combo-box-default-height); overflow: initial; visibility: hidden; cursor: pointer; } jqx-combo-box.jqx-element { overflow: visible; visibility: inherit; border-width: 0px; } .jqx-combo-box jqx-list-box { position: relative; width: 100%; height: 100%; border: initial; padding: initial; overflow: hidden; font-size: inherit; font-family: inherit; outline: none; } .jqx-combo-box .jqx-action-button input.jqx-input { flex-grow: 1; align-self: center; width: var(--jqx-editor-addon-width); min-width: var(--jqx-editor-addon-width); min-height: 100%; max-height: 1rem; vertical-align: middle; margin: 0; /* Safari */ } .jqx-combo-box .jqx-buttons-container .jqx-token { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; cursor: pointer; margin: 0 2px; user-select: none; } .jqx-combo-box .jqx-buttons-container .jqx-combo-box-auto-complete-string { position: absolute; display: flex; pointer-events: none; align-items: center; padding: var(--jqx-editor-label-padding); opacity: 0.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; z-index: 1; } .jqx-combo-box .jqx-buttons-container .jqx-combo-box-auto-complete-string:empty { display: none; } .jqx-combo-box.jqx-element .jqx-drop-down.jqx-visibility-hidden { transform: scale(0); transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0ms; transform-origin: left top 0px; } /* jqx-color-panel */ jqx-color-panel { width: var(--jqx-color-panel-default-width); height: var(--jqx-color-panel-default-height); user-select: none; } jqx-color-panel .no-touch { touch-action: none; } jqx-color-panel.jqx-element { display: inline-block; overflow: initial; border: none; background: var(--jqx-background); color: var(--jqx-background-color); } jqx-color-panel[disabled] { opacity: 0.55; pointer-events: none; user-select: none; } .jqx-color-panel .jqx-content { position: relative; cursor: pointer; display: flex; width: 100%; height: 100%; } .jqx-color-panel label { /*min-width: 16px;*/ display: inline-block; user-select: none; } .jqx-color-panel jqx-tooltip .jqx-tooltip-content { box-shadow: 0px 0px 20px 0px #8b8b8b; } .jqx-color-panel input[type=number]::-webkit-inner-spin-button, .jqx-color-panel input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .jqx-color-panel input[type=number] { -moz-appearance: textfield; -webkit-appearance: textfied; } .jqx-color-panel .color-input { width: 70px; height: var(--jqx-editor-height); margin: 5px; padding: 5px; border: var(--jqx-border-width) solid var(--jqx-border); border-radius: var(--jqx-border-radius); background: var(--jqx-background); color: var(--jqx-color); outline: none; } .jqx-color-panel .color-input:focus { border-color: var(--jqx-outline); } .jqx-color-panel .color-input::selection { background: var(--jqx-editor-selection); color: var(--jqx-editor-selection-color); } .jqx-color-panel .grid-mode-container, .jqx-color-panel .palette-mode-container { width: 100%; max-height: 100%; position: relative; } .jqx-color-panel .custom-color-selection .buttons-container { display: flex; align-items: center; justify-content: flex-end; } .jqx-color-panel .gray-shades-box, .jqx-color-panel .spectrum-box, .jqx-color-panel .custom-colors-box, .jqx-color-panel .grid-samples-container { display: grid; grid-template-columns: repeat(var(--jqx-color-panel-grid-mode-column-count), auto); } .jqx-color-panel .hue-scale { display: block; max-width: 100px; height: var(--jqx-color-panel-palette-size); background-image: linear-gradient(#ff0000, #ff00ff, #0000ff, #00ffff, #00ff00, #ffff00, #ff0000); /* reversed (#ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000) */ width: 20px; margin-left: 15px; margin-right: 15px; position: relative; padding: 1px; border: var(--jqx-border-width) solid var(--jqx-border); background-clip: content-box; -webkit-background-clip: content-box; } .jqx-color-panel .hue-scale-thumb { width: 100%; height: 10px; box-sizing: content-box; border: 3px solid white; border-left-width: 10px; border-right-width: 10px; position: absolute; left: -10px; top: -3px; box-shadow: 0px 0px 5px #666, inset 0px 0px 2px 0px #999, inset 0px 0px 2px 0px #999; opacity: 0.8; cursor: pointer; } .jqx-color-panel .color-palette-thumb { width: 0px; height: 0px; top: 0px; position: absolute; z-index: 10; pointer-events: none; } .jqx-color-panel .color-palette-thumb:after { content: " "; position: absolute; left: -14px; top: -14px; width: 16px; height: 16px; border: 5px solid white; border-radius: 50%; box-shadow: var(--jqx-elevation-2); } .jqx-color-panel .color-palette { width: var(--jqx-color-panel-palette-size); height: var(--jqx-color-panel-palette-size); background-color: red; display: block; position: relative; overflow: hidden; cursor: crosshair; padding: 1px; border: 1px solid lightgray; background-clip: content-box; -webkit-background-clip: content-box; } .jqx-color-panel .color-palette:before, .jqx-color-panel .color-palette:after { width: 100%; height: 100%; content: " "; display: block; position: absolute; left: 0; top: 0; z-index: 0; } .jqx-color-panel .color-palette:before { background-image: linear-gradient(90deg, white, transparent); } .jqx-color-panel .color-palette:after { background-image: linear-gradient(transparent, black); } .jqx-color-panel .color-controls-container { display: block; max-width: 100px; overflow: hidden; } .jqx-color-panel .color-palette-container { width: 100%; height: var(--jqx-color-panel-palette-size); display: flex; flex-direction: row; } .jqx-color-panel .preview-container { width: 100%; min-width: 100px; /* or use variable thet defines the default width of the column*/ height: 100px; background-color: white; margin-bottom: 20px; position: relative; padding: 1px; border: var(--jqx-border-width) solid var(--jqx-border); background-clip: content-box; -webkit-background-clip: content-box; } .jqx-color-panel .preview-container-top, .jqx-color-panel .preview-container-bottom { width: 100%; height: 50%; display: block; background-color: white; } .jqx-color-panel .alpha-channel-container { flex-direction: row; width: 100%; align-items: center; align-content: space-around; margin-top: 5px; display: none; } .jqx-color-panel .alpha-channel-container label { width: 48px; } .jqx-color-panel .alpha-channel-scale { width: var(--jqx-color-panel-palette-size); height: 20px; margin-top: 15px; margin-bottom: 15px; position: relative; border: var(--jqx-border-width) solid var(--jqx-border); margin-right: 20px; } .jqx-color-panel .alpha-channel-scale:before, .jqx-color-panel .alpha-channel-scale:after { position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; content: " "; } .jqx-color-panel .alpha-channel-scale:before { background-image: linear-gradient(45deg, #cccccc 25%, transparent 25%, transparent 74%, #cccccc 75%, #cccccc), linear-gradient(45deg, #cccccc 25%, transparent 25%, transparent 74%, #cccccc 75%, #cccccc); background-position: 0px 6px, 8px 14px; background-size: 16px 16px; } .jqx-color-panel .alpha-channel-scale:after { background-image: linear-gradient(90deg, var(--jqx-color-panel-alpha-channel-color), transparent); box-shadow: inset 1px -1px 0px 0px #ffffff, inset -1px 1px 0px 0px #ffffff; } .jqx-color-panel .alpha-channel-thumb { width: 10px; height: 100%; box-sizing: content-box; border: 3px solid white; border-top-width: 10px; border-bottom-width: 10px; position: absolute; left: -3px; top: -10px; opacity: 0.8; box-shadow: 0px 0px 5px #666, inset 0px 0px 2px 0px #999, inset 0px 0px 2px 0px #999; cursor: pointer; z-index: 1; } .jqx-color-panel .buttons-container { display: none; flex-direction: row; justify-content: flex-end; padding: 10px 0 0 0; } .jqx-color-panel .buttons-container jqx-button { width: 100px; } .jqx-color-panel .buttons-container jqx-button:last-of-type { margin-left: 20px; } .jqx-color-panel .gradient-background { background-image: linear-gradient(45deg, #cccccc 25%, transparent 25%, transparent 74%, #cccccc 75%, #cccccc), linear-gradient(45deg, #cccccc 25%, transparent 25%, transparent 74%, #cccccc 75%, #cccccc); background-position: 0px 6px, 8px 14px; background-size: 16px 16px; } .jqx-color-panel .user-color-container { width: var(--jqx-color-panel-grid-mode-item-size); height: var(--jqx-color-panel-grid-mode-item-size); background-image: linear-gradient(45deg, #cccccc 25%, transparent 25%, transparent 74%, #cccccc 75%, #cccccc), linear-gradient(45deg, #cccccc 25%, transparent 25%, transparent 74%, #cccccc 75%, #cccccc); background-position: 0px 5px, 5px 10px; background-size: 10px 10px; } .jqx-color-panel .material-grid-samples-container { display: grid; grid-template-columns: 80px repeat(14, auto); } .jqx-color-panel .button-custom-color { margin: 5px 0px 5px 0px; } .jqx-color-panel .color-sample { width: var(--jqx-color-panel-grid-mode-item-size); height: var(--jqx-color-panel-grid-mode-item-size); margin: var(--jqx-color-panel-grid-mode-columns-gap); box-sizing: border-box; cursor: pointer; border: var(--jqx-border-width) solid rgba(0, 0, 0, 0.1); background-clip: content-box; -webkit-background-clip: content-box; text-overflow: ellipsis; } .jqx-color-panel .color-sample.user-color { position: relative; background-clip: padding-box; -webkit-background-clip: padding-box; } .jqx-color-panel .color-sample.user-color:before { position: absolute; content: ""; width: 100%; height: 100%; background-image: linear-gradient(45deg, #cccccc 25%, transparent 25%, transparent 74%, #cccccc 75%, #cccccc), linear-gradient(45deg, #cccccc 25%, transparent 25%, transparent 74%, #cccccc 75%, #cccccc); background-position: 0px 5px, 5px 10px; background-size: 10px 10px; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: -1; } .jqx-color-panel .color-sample.selected { border: 2px solid var(--jqx-ui-state-color-selected); padding: 1px; } .jqx-color-panel .color-sample.empty { visibility: hidden; } .jqx-color-panel .color-sample.header, .jqx-color-panel .color-sample.label-column { display: flex; align-items: center; justify-content: center; font-size: 11px; border-width: 0px; pointer-events: none; user-select: none; } .jqx-color-panel .color-sample.label-column { width: 100%; justify-content: flex-start; } .jqx-color-panel .color-sample.color-sample-column, .jqx-color-panel .color-sample.color-sample-row { width: 16px; /*to be calculated dinamically*/ height: 16px; /*to be calculated dinamically*/ border: 2px solid rgba(0, 0, 0, 0.2); padding: 1px; background: repeating-linear-gradient(-55deg, #fff, #fff 10px, #eee 10px, #eee 20px); } .jqx-color-panel .color-sample[transparent] { position: relative; } .jqx-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; } .jqx-color-panel .user-color.empty { background: repeating-linear-gradient(-55deg, #fff, #fff 10px, #eee 10px, #eee 20px); background-origin: content-box; border-color: lightgray; } .jqx-color-panel .default-samples-container div { display: grid; grid-template-columns: repeat(10, auto); justify-items: center; } .jqx-color-panel .default-samples-container .theme-shades-box { margin-top: var(--jqx-color-panel-default-mode-sections-gap); margin-bottom: var(--jqx-color-panel-default-mode-sections-gap); } .jqx-color-panel .default-samples-container .theme-colors-label, .jqx-color-panel .default-samples-container .standard-colors-label { display: block; font-weight: 600; margin-left: 2px; margin-top: var(--jqx-color-panel-default-mode-sections-gap); margin-bottom: var(--jqx-color-panel-default-mode-sections-gap); margin-bottom: calc(var(--jqx-color-panel-default-mode-sections-gap) / 2); } .jqx-color-panel .hex-mode-resize-trigger { visibility: hidden; position: absolute; left: 0; top: 0; } .jqx-color-panel[edit-alpha-channel] .alpha-channel-container { display: flex; } .jqx-color-panel[enable-custom-colors] .button-custom-color, .jqx-color-panel[enable-custom-colors] .user-samples-container { width: 100%; display: flex; align-items: center; } .jqx-color-panel[enable-custom-colors]:not([display-mode=palette]):not([display-mdoe=radial]) .custom-color-selection .palette-mode-container { display: block; } .jqx-color-panel:not([display-mode=radial]) .canvas-radial { display: none; } .jqx-color-panel[display-mode=hexagonal] .brightness-scale, .jqx-color-panel[display-mode=radial] .brightness-scale { display: block; max-width: 100px; height: var(--jqx-color-panel-palette-size); background-image: linear-gradient(#ff0000, #ff00ff, #0000ff, #00ffff, #00ff00, #ffff00, #ff0000); /* reversed (#ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000) */ width: 20px; margin-left: 15px; margin-right: 15px; position: relative; padding: 1px; border: var(--jqx-border-width) solid var(--jqx-border); background-clip: content-box; -webkit-background-clip: content-box; } .jqx-color-panel[display-mode=hexagonal] .brightness-scale-thumb, .jqx-color-panel[display-mode=radial] .brightness-scale-thumb { width: 100%; height: 10px; box-sizing: content-box; border: 3px solid white; border-left-width: 10px; border-right-width: 10px; position: absolute; left: -10px; top: -3px; box-shadow: 0px 0px 5px #666, inset 0px 0px 2px 0px #999, inset 0px 0px 2px 0px #999; opacity: 0.8; cursor: pointer; } .jqx-color-panel[display-mode=hexagonal] .alpha-channel-scale { width: var(--jqx-color-panel-palette-width); } .jqx-color-panel[display-mode=hexagonal] .brightness-scale { display: block; height: var(--jqx-color-panel-palette-height); background-image: linear-gradient(white, black); } .jqx-color-panel[display-mode=hexagonal] .selected { stroke: white; stroke-width: 4px; } .jqx-color-panel[display-mode=hexagonal] .color-palette-container { height: var(--jqx-color-panel-palette-height); } .jqx-color-panel[display-mode=hexagonal] .palette-mode-container { display: block; } .jqx-color-panel[display-mode=hexagonal] .color-palette-hexagonal { display: block; } .jqx-color-panel[display-mode=radial] .hue-scale { display: none; } .jqx-color-panel[display-mode=radial] .brightness-scale { background-image: linear-gradient(white, black); } .jqx-color-panel[display-mode=radial] .color-palette-radial { width: var(--jqx-color-panel-palette-size); height: var(--jqx-color-panel-palette-size); display: block; position: relative; overflow: hidden; cursor: crosshair; padding: 1px; border: 1px solid lightgray; background-clip: content-box; -webkit-background-clip: content-box; background: conic-gradient(from 90deg, red, yellow, lime, aqua, blue, magenta, red) rgb(255, 0, 90); border-radius: 50%; } .jqx-color-panel[display-mode=radial] .color-palette-radial:after { width: 100%; height: 100%; content: " "; display: block; position: absolute; left: 0px; top: 0px; z-index: 0; background: black; opacity: var(--jqx-color-panel-brightness); border-radius: 50%; } .jqx-color-panel[display-mode=radial] .color-palette-radial-thumb { width: 0px; height: 0px; position: absolute; z-index: 10; pointer-events: none; left: 50%; top: 50%; } .jqx-color-panel[display-mode=radial] .color-palette-radial-thumb:after { content: " "; position: absolute; left: -14px; top: -14px; width: 16px; height: 16px; border: 5px solid white; border-radius: 50%; box-shadow: var(--jqx-elevation-2); } .jqx-color-panel[display-mode=radial] .white-radial-gradient { z-index: 2; width: var(--jqx-color-panel-palette-size); height: var(--jqx-color-panel-palette-size); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; background-image: radial-gradient(circle, white, transparent); } .jqx-color-panel[display-mode=radial] .palette-mode-container { display: block; } .jqx-color-panel[display-mode=radial] canvas { transform: rotate(-180deg); transform-origin: center; } .jqx-color-panel[display-mode=radial][inverted] .color-palette-radial:after { background: white; } .jqx-color-panel[display-mode=radial][inverted] .white-radial-gradient { background: radial-gradient(black, transparent); } .jqx-color-panel[display-mode=spectrumGrid] .spectrum-grid-samples-container { display: block; } .jqx-color-panel[display-mode=default] .default-samples-container { display: block; } .jqx-color-panel[display-mode=palette] .palette-mode-container { display: block; } .jqx-color-panel[display-mode=palette] .color-palette { display: block; } .jqx-color-panel[display-mode=materialGrid] .color-palette { display: block; } .jqx-color-panel[apply-value-mode=useButtons] .buttons-container { display: flex; align-items: center; justify-content: flex-end; } .jqx-color-panel .palette-mode-container, .jqx-color-panel .spectrum-grid-samples-container, .jqx-color-panel .color-palette-hexagonal, .jqx-color-panel .custom-color-selection .grid-mode-container, .jqx-color-panel .button-custom-color, .jqx-color-panel .user-samples-container { display: none; } .jqx-color-panel[display-mode=default] .grid-samples-container, .jqx-color-panel[display-mode=default] .palette-mode-container, .jqx-color-panel[display-mode=default] .material-grid-samples-container { display: none; } .jqx-color-panel[display-mode=grid] .palette-mode-container, .jqx-color-panel[display-mode=grid] .material-grid-samples-container, .jqx-color-panel[display-mode=grid] .default-samples-container { display: none; } .jqx-color-panel[display-mode=spectrumGrid] .palette-mode-container, .jqx-color-panel[display-mode=spectrumGrid] .grid-samples-container, .jqx-color-panel[display-mode=spectrumGrid] .material-grid-samples-container, .jqx-color-panel[display-mode=spectrumGrid] .default-samples-container { display: none; } .jqx-color-panel[display-mode=materialGrid] .palette-mode-container, .jqx-color-panel[display-mode=materialGrid] .grid-samples-container, .jqx-color-panel[display-mode=materialGrid] .default-samples-container { display: none; } .jqx-color-panel[display-mode=hexagonal] .grid-samples-container, .jqx-color-panel[display-mode=hexagonal] .spectrum-grid-samples-container, .jqx-color-panel[display-mode=hexagonal] .color-palette, .jqx-color-panel[display-mode=hexagonal] .hue-scale, .jqx-color-panel[display-mode=hexagonal] .default-samples-container { display: none; } .jqx-color-panel[display-mode=palette] .color-palette-radial, .jqx-color-panel[display-mode=palette] .grid-mode-container { display: none; } .jqx-color-panel[display-mode=radial] .color-palette, .jqx-color-panel[display-mode=radial] .grid-mode-container { display: none; } .jqx-color-panel[enable-custom-colors][display-mode=hexagonal] .button-custom-color, .jqx-color-panel[enable-custom-colors][display-mode=hexagonal] .user-samples-container { display: none; } .jqx-color-panel[hide-preview-container] .preview-container { display: none; } .jqx-color-panel[hide-alpha-editor] .a-channel { display: none; } .jqx-color-panel[hide-r-g-b-editor] .r-channel, .jqx-color-panel[hide-r-g-b-editor] .g-channel, .jqx-color-panel[hide-r-g-b-editor] .b-channel { display: none; } .jqx-color-panel[hide-h-e-x-editor] .hex { display: none; } /* jqx-color-panel */ jqx-color-panel[right-to-left] .grid-mode-container, jqx-color-panel[right-to-left] .color-palette-container, jqx-color-panel[right-to-left] .alpha-channel-container { direction: rtl; } jqx-color-panel[right-to-left] .alpha-channel-scale { margin: 0 0 0 20px; } jqx-color-panel[right-to-left] .alpha-channel-scale:after { background-image: linear-gradient(90deg, transparent, var(--jqx-color-panel-alpha-channel-color)); } jqx-color-panel[right-to-left] .buttons-container { flex-direction: row-reverse; } jqx-color-panel[right-to-left] .buttons-container jqx-button:last-of-type { margin: 0 0 0 20px; } /* jqx-color-picker */ jqx-color-picker { width: var(--jqx-color-picker-default-width); height: var(--jqx-color-picker-default-height); } jqx-color-picker.jqx-element { overflow: initial; border: none; } .jqx-color-picker jqx-color-panel { position: relative; display: flex; width: 100%; height: 100%; padding: 5px; border: none; } .jqx-color-picker .jqx-color-box { position: relative; width: 20px; height: 20px; border-radius: var(--jqx-border-radius); border: var(--jqx-border-width) solid var(--jqx-border); background-color: var(--jqx-background); margin-right: 5px; overflow: hidden; background-image: linear-gradient(45deg, #cccccc 25%, transparent 25%, transparent 74%, #cccccc 75%, #cccccc), linear-gradient(45deg, #cccccc 25%, transparent 25%, transparent 74%, #cccccc 75%, #cccccc); background-position: 0px 5px, 5px 10px; background-size: 10px 10px; } .jqx-color-picker .jqx-color-box.no-color { background-image: linear-gradient(45deg, transparent 47.5%, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 52.5%, transparent 52.5%), linear-gradient(-45deg, transparent 47.5%, rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0.2) 52.5%, transparent 52.5%); background-position: initial; background-size: initial; } .jqx-color-picker .jqx-color-box > div { width: 100%; height: 100%; } .jqx-color-picker .jqx-color-input { border: 0; background-color: transparent; outline: none; color: inherit; } .jqx-color-picker .jqx-ripple { background: var(--jqx-primary-color); } .jqx-color-picker .jqx-drop-down.jqx-drop-down-color-picker.jqx-drop-down-container { width: var(--jqx-color-picker-drop-down-width); max-width: none; height: var(--jqx-color-picker-drop-down-height); max-height: none; box-sizing: content-box; overflow: hidden; } .jqx-color-picker:not([opened]) .jqx-color-input { color: inherit; } .jqx-color-picker:not([editable]) .jqx-color-input { cursor: pointer; user-select: none; } .jqx-color-picker[value-display-mode=none] .jqx-color-box { display: none; } .jqx-color-picker[value-display-mode=none] .jqx-color-input { display: none; } .jqx-color-picker[value-display-mode=none] .jqx-color-input.jqx-input { width: 0; opacity: 0; padding: initial; } .jqx-color-picker[value-display-mode=none] .jqx-action-button { padding: initial; border: none; } .jqx-color-picker[value-display-mode=none] .jqx-drop-down-button { border-top-left-radius: var(--jqx-border-top-left-radius); border-bottom-left-radius: var(--jqx-border-bottom-left-radius); border-left-width: var(--jqx-border-width); border-left-style: solid; } .jqx-color-picker[value-display-mode=none]:not([opened]):not([drop-down-open-mode=dropDownButton]) .jqx-drop-down-button { border-left-color: var(--jqx-border); } .jqx-color-picker[value-display-mode=colorCode] .jqx-color-box { display: none; } .jqx-color-picker[value-display-mode=colorCode] .jqx-color-input { display: block; } .jqx-color-picker[value-display-mode=colorBox] .jqx-color-box { display: block; } .jqx-color-picker[value-display-mode=colorBox] .jqx-input { display: none; } .jqx-color-picker[editable] .jqx-action-button { cursor: initial; } .jqx-color-picker[editable]:not([opened]):not([drop-down-open-mode=dropDownButton])[hover] .jqx-action-button { background: var(--jqx-background); color: var(--jqx-background-color); } .jqx-color-picker[opened][editable] .jqx-action-button { background-color: var(--jqx-backgroud); color: var(--jqx-background-color); } .jqx-color-panel .color-sample.no-color { background-image: linear-gradient(45deg, transparent 47.5%, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 52.5%, transparent 52.5%), linear-gradient(-45deg, transparent 47.5%, rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0.2) 52.5%, transparent 52.5%); background-position: initial; background-size: initial; } .jqx-drop-down-repositioned jqx-color-panel { width: 100%; height: 100%; padding: 5px; border: none; } .jqx-drop-down.jqx-drop-down-color-picker.jqx-drop-down-container, .jqx-drop-down.jqx-drop-down-color-picker.jqx-drop-down-container.jqx-drop-down-repositioned { width: var(--jqx-color-picker-drop-down-width); max-width: none; height: var(--jqx-color-picker-drop-down-height); max-height: none; box-sizing: content-box; overflow: hidden; } /* jqx-date-time-picker */ jqx-date-time-picker { width: var(--jqx-date-time-picker-default-width); min-width: var(--jqx-editor-addon-width); height: var(--jqx-date-time-picker-default-height); min-height: var(--jqx-editor-height); } jqx-date-time-picker.jqx-element { overflow: visible; } jqx-date-time-picker[hover] { border-color: var(--jqx-ui-state-border-hover); } jqx-date-time-picker > .jqx-container, .jqx-date-time-picker.jqx-container { display: flex; position: relative; align-items: center; } jqx-date-time-picker > .jqx-container > .jqx-content, .jqx-date-time-picker.jqx-container > .jqx-content { display: flex; align-items: center; height: 100%; width: 100%; } jqx-date-time-picker > .jqx-container > input, .jqx-date-time-picker.jqx-container > input { height: 100%; } .jqx-date-time-picker .jqx-input.jqx-date-time-input { width: 100%; border: none; background: inherit; padding: var(--jqx-editor-label-padding); outline: none; color: inherit; font-family: inherit; font-size: inherit; text-align: inherit; } .jqx-date-time-picker > .jqx-container > .jqx-label, .jqx-date-time-picker > .jqx-container > .jqx-hint { display: none; position: absolute; } .jqx-date-time-picker .jqx-spin-buttons-container { height: 100%; display: none; width: var(--jqx-editor-addon-width); border-radius: 0; } .jqx-date-time-picker .jqx-spin-button { --jqx-button-padding: 0; display: block; width: 100%; height: 50%; min-height: 0; color: var(--jqx-surface-color); background-color: var(--jqx-surface); border: none; border-width: 0px; border-color: var(--jqx-border); border-left-width: var(--jqx-border-width); border-style: solid; font-weight: 500; border-radius: 0; } .jqx-date-time-picker .jqx-spin-button:first-child { border-bottom-width: 1px; } .jqx-date-time-picker .jqx-spin-button[hover] { background-color: var(--jqx-ui-state-hover); color: var(--jqx-ui-state-color-hover); border-color: var(--jqx-ui-state-border-hover); } .jqx-date-time-picker .jqx-spin-button[active] { background-color: var(--jqx-ui-state-active); color: var(--jqx-ui-state-color-active); border-color: var(--jqx-ui-state-border-active); } .jqx-date-time-picker .jqx-drop-down-button.jqx-calendar-button { height: 100%; display: none; width: var(--jqx-editor-addon-width); cursor: pointer; background-color: var(--jqx-surface); color: var(--jqx-surface-color); border-color: var(--jqx-border); border-width: 0px; border-left-width: var(--jqx-border-width); border-style: solid; border-top-right-radius: var(--jqx-border-top-right-radius); border-bottom-right-radius: var(--jqx-border-bottom-right-radius); overflow: hidden; } .jqx-date-time-picker .jqx-drop-down-button.jqx-calendar-button:after { width: 100%; height: 100%; font-family: var(--jqx-font-family-icon); font-style: normal; font-weight: normal; color: inherit; font-size: var(--jqx-arrow-size); text-decoration: inherit; font-variant: normal; text-transform: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; content: var(--jqx-icon-calendar); } .jqx-date-time-picker .jqx-drop-down-button.jqx-calendar-button[hover] { background-color: var(--jqx-ui-state-hover); color: var(--jqx-ui-state-color-hover); border-color: var(--jqx-ui-state-border-hover); } .jqx-date-time-picker .jqx-drop-down-button.jqx-calendar-button[active] { background-color: var(--jqx-ui-state-active); color: var(--jqx-ui-state-color-active); border-color: var(--jqx-ui-state-border-active); } .jqx-date-time-picker .jqx-drop-down-button.jqx-calendar-button.time:after { content: var(--jqx-icon-clock); } .jqx-date-time-picker .jqx-drop-down-button.jqx-calendar-button.jqx-drop-down-button-pressed { color: var(--jqx-ui-state-color); } .jqx-date-time-picker .jqx-drop-down-button.jqx-calendar-button.jqx-drop-down-button-pressed[hover]:after { color: var(--jqx-ui-state-color-hover); } .jqx-date-time-picker .jqx-drop-down.jqx-date-time-drop-down { padding: 0px !important; } .jqx-date-time-picker .jqx-ripple { background: var(--jqx-background); } .jqx-date-time-picker[focus] { border-color: var(--jqx-outline); } .jqx-date-time-picker[focus] .jqx-drop-down-button.jqx-calendar-button { border-color: var(--jqx-outline); } .jqx-date-time-picker[disabled] .jqx-input.jqx-date-time-input { background-color: transparent; user-select: none; } .jqx-date-time-picker[readonly] .jqx-drop-down-button.jqx-calendar-button, .jqx-date-time-picker[disabled] .jqx-drop-down-button.jqx-calendar-button { cursor: default; } .jqx-date-time-picker[label] > .jqx-container > .jqx-label { position: absolute; left: 0; bottom: 100%; font-size: 12px; width: 100%; display: block; padding: var(--jqx-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; } .jqx-date-time-picker[spin-buttons-position=left] .jqx-spin-button { border-right-width: var(--jqx-border-width); border-left-width: 0px; } .jqx-date-time-picker[spin-buttons-position=left] .jqx-spin-button:first-child { border-top-left-radius: var(--jqx-border-top-left-radius); } .jqx-date-time-picker[spin-buttons-position=left] .jqx-spin-button:last-child { border-bottom-left-radius: var(--jqx-border-bottom-left-radius); } .jqx-date-time-picker[spin-buttons] { min-width: calc(var(--jqx-editor-addon-width)); } .jqx-date-time-picker[spin-buttons] .jqx-input.jqx-date-time-input { width: calc(100% - var(--jqx-editor-addon-width)); } .jqx-date-time-picker[spin-buttons] .jqx-spin-buttons-container { display: block; } .jqx-date-time-picker[spin-buttons]:not([spin-buttons-position=left]) .jqx-input.jqx-date-time-input { border-top-left-radius: var(--jqx-border-top-left-radius); border-bottom-left-radius: var(--jqx-border-bottom-left-radius); } .jqx-date-time-picker[calendar-button] { min-width: var(--jqx-editor-addon-width); } .jqx-date-time-picker[calendar-button] .jqx-input.jqx-date-time-input { width: calc(100% - var(--jqx-editor-addon-width)); } .jqx-date-time-picker[calendar-button] .jqx-drop-down-button.jqx-calendar-button { display: block; position: relative; } .jqx-date-time-picker[spin-buttons][calendar-button] { min-width: calc(var(--jqx-editor-addon-width) + var(--jqx-editor-addon-width)); } .jqx-date-time-picker[spin-buttons][calendar-button] .jqx-input.jqx-date-time-input { width: calc(100% - var(--jqx-editor-addon-width) - var(--jqx-editor-addon-width)); } .jqx-date-time-picker[spin-buttons][calendar-button][calendar-button-position=left][spin-buttons-position=left] .jqx-spin-button:first-child { border-top-left-radius: 0; } .jqx-date-time-picker[spin-buttons][calendar-button][calendar-button-position=left][spin-buttons-position=left] .jqx-spin-button:last-child { border-bottom-left-radius: 0; } .jqx-date-time-picker[calendar-button-position=left] .jqx-drop-down-button { border-left: none; border-right-width: var(--jqx-border-width); border-top-left-radius: var(--jqx-border-top-left-radius); border-bottom-left-radius: var(--jqx-border-bottom-left-radius); border-top-right-radius: 0; border-bottom-right-radius: 0; } .jqx-date-time-picker[calendar-button-position=left][spin-buttons]:not([spin-buttons-position=left]) .jqx-spin-button:first-child { border-top-right-radius: var(--jqx-border-top-right-radius); } .jqx-date-time-picker[calendar-button-position=left][spin-buttons]:not([spin-buttons-position=left]) .jqx-spin-button:last-child { border-bottom-right-radius: var(--jqx-border-bottom-right-radius); } .jqx-date-time-picker[calendar-button-position=left][spin-buttons-position=left] .jqx-input.jqx-date-time-input { border-top-right-radius: var(--jqx-border-top-right-radius); border-bottom-right-radius: var(--jqx-border-bottom-right-radius); } .jqx-date-time-picker:not([calendar-button])[spin-buttons-position=left] .jqx-input.jqx-date-time-input { border-top-right-radius: var(--jqx-border-top-right-radius); border-bottom-right-radius: var(--jqx-border-bottom-right-radius); } .jqx-date-time-picker:not([calendar-button])[spin-buttons]:not([spin-buttons-position=left]) .jqx-spin-button:first-child { border-top-right-radius: var(--jqx-border-top-right-radius); } .jqx-date-time-picker:not([calendar-button])[spin-buttons]:not([spin-buttons-position=left]) .jqx-spin-button:last-child { border-bottom-right-radius: var(--jqx-border-bottom-right-radius); } .jqx-date-time-picker:not([spin-buttons]) .jqx-input.jqx-date-time-input { border-top-left-radius: var(--jqx-border-top-left-radius); border-bottom-left-radius: var(--jqx-border-bottom-left-radius); } .jqx-date-time-picker:not([spin-buttons]):not([calendar-button]) .jqx-input.jqx-date-time-input, .jqx-date-time-picker:not([spin-buttons])[calendar-button-position=left] .jqx-input.jqx-date-time-input { border-top-right-radius: var(--jqx-border-top-right-radius); border-bottom-right-radius: var(--jqx-border-bottom-right-radius); } .jqx-date-time-picker.underlined { border-width: 0px; border-bottom-width: 1px; background: var(--jqx-background); } .jqx-date-time-picker.underlined .jqx-spin-button { background: var(--jqx-background); border-width: 0px; } .jqx-date-time-picker.underlined .jqx-spin-button[hover] { background: var(--jqx-background); color: var(--jqx-ui-state-active); } .jqx-date-time-picker.underlined .jqx-spin-button[active] { background: var(--jqx-background); color: var(--jqx-ui-state-active); } .jqx-date-time-picker.underlined .jqx-drop-down-button { background: var(--jqx-background); border-width: 0px; } .jqx-date-time-picker.underlined .jqx-drop-down-button.jqx-calendar-button[hover] { background: var(--jqx-background); color: var(--jqx-ui-state-active); } .jqx-date-time-picker.underlined .jqx-drop-down-button.jqx-calendar-button[active] { background: var(--jqx-background); color: var(--jqx-ui-state-active); } .jqx-date-time-picker.underlined .jqx-hint { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: block !important; box-sizing: border-box; padding: var(--jqx-editor-label-padding); color: var(--jqx-background-color); pointer-events: none; font-size: 75%; opacity: 0; transition: color 0.2s, font-size 0.2s, line-height 0.2s, margin-top 0.2s, opacity 0.1s, top 0.2s; margin-top: calc(0px - var(--jqx-font-size)); } .jqx-date-time-picker.underlined .jqx-hint:after { content: ""; position: absolute; left: 0; bottom: -2px; display: block; width: 100%; height: 2px; background-color: var(--jqx-primary); transform-origin: bottom center; transform: scaleX(0); transition: transform 0.2s; } .jqx-date-time-picker.underlined:not([focus]) .jqx-hint { margin-top: 0px; } .jqx-date-time-picker.underlined[focus] .jqx-drop-down-button.jqx-calendar-button { color: var(--jqx-primary); opacity: 1; } .jqx-date-time-picker.underlined[focus] .jqx-hint { color: var(--jqx-primary); opacity: 1; } .jqx-date-time-picker.underlined[focus] .jqx-hint:after { transform: scale(1); } .jqx-date-time-picker.outlined { padding-top: 6px; height: auto; min-height: 0; border: none; background: inherit; } .jqx-date-time-picker.outlined input { padding: 0; border: none !important; z-index: initial; } .jqx-date-time-picker.outlined .jqx-content { padding: 4px 3px 4px; border: 1px solid var(--jqx-border); height: auto; border-radius: var(--jqx-border-radius); background: var(--jqx-background); z-index: 5; } .jqx-date-time-picker.outlined .jqx-spin-button { background: var(--jqx-background); border-width: 0px; } .jqx-date-time-picker.outlined .jqx-spin-button[hover] { background: var(--jqx-background); color: var(--jqx-ui-state-active); } .jqx-date-time-picker.outlined .jqx-spin-button[active] { background: var(--jqx-background); color: var(--jqx-ui-state-active); } .jqx-date-time-picker.outlined .jqx-drop-down-button { padding: 8px 0px; background: var(--jqx-background); border-width: 0px; } .jqx-date-time-picker.outlined .jqx-drop-down-button.jqx-calendar-button[hover] { background: var(--jqx-background); color: var(--jqx-ui-state-active); } .jqx-date-time-picker.outlined .jqx-drop-down-button.jqx-calendar-button[active] { background: var(--jqx-background); color: var(--jqx-ui-state-active); } .jqx-date-time-picker.outlined .jqx-hint { position: absolute; top: 0; left: 0; display: flex !important; border-color: var(--jqx-border) !important; width: 100%; max-height: 100%; color: var(--jqx-background-color); z-index: 5; pointer-events: none; font-size: 75%; line-height: 15px; cursor: text; margin-top: -6px; transition: color 0.2s, font-size 0.2s, opacity 0.1s, font-size 0.2s, line-height 0.2s; } .jqx-date-time-picker.outlined .jqx-hint:before, .jqx-date-time-picker.outlined .jqx-hint:after { content: ""; display: block; box-sizing: border-box; margin-top: 6px; border-top: solid 1px; border-top-color: var(--jqx-border) !important; min-width: 10px; height: 8px; pointer-events: none; box-shadow: inset 0 1px transparent; transition: border-color 0.2s, box-shadow 0.2s; } .jqx-date-time-picker.outlined .jqx-hint:before { margin-right: 4px; border-left: solid 1px transparent; border-radius: 4px 0; } .jqx-date-time-picker.outlined .jqx-hint:after { flex-grow: 1; margin-left: 4px; border-right: solid 1px transparent; border-radius: 0 4px; } .jqx-date-time-picker.outlined:not([focus]) .jqx-hint { font-size: var(--jqx-font-size); line-height: 48px; opacity: 0; } .jqx-date-time-picker.outlined[focus] .jqx-content { border-color: var(--jqx-primary); border-top-color: transparent !important; } .jqx-date-time-picker.outlined[focus] .jqx-drop-down-button { color: var(--jqx-primary); } .jqx-date-time-picker.outlined[focus] .jqx-hint { color: var(--jqx-primary); opacity: 1; } .jqx-date-time-picker.outlined[focus] .jqx-hint:before, .jqx-date-time-picker.outlined[focus] .jqx-hint:after { border-top-color: var(--jqx-primary) !important; } .jqx-date-time-picker.outlined.jqx-element-init .jqx-hint { visibility: hidden; display: none !important; } .jqx-drop-down.jqx-date-time-drop-down { padding: 0px !important; } .jqx-drop-down.jqx-date-time-drop-down[footer] { height: calc(30px + var(--jqx-editor-drop-down-height)); max-height: calc(30px + var(--jqx-editor-drop-down-height)); } .jqx-drop-down.jqx-date-time-drop-down jqx-calendar { border: none; width: 100%; height: 100%; min-width: 0; min-height: 0; border-radius: 0px; } .jqx-drop-down.jqx-date-time-drop-down jqx-time-picker { border: none; width: 100%; height: 100%; min-height: 0; border-radius: 0px; min-width: initial; } .jqx-drop-down.jqx-date-time-drop-down jqx-time-picker .jqx-hour-minute-container { font-size: 40px; } .jqx-drop-down.jqx-date-time-drop-down .jqx-header, .jqx-drop-down.jqx-date-time-drop-down .jqx-footer { cursor: initial; } .jqx-drop-down.jqx-date-time-drop-down .jqx-date-time-picker-footer { height: 100%; width: 100%; display: flex; padding: 1px; } .jqx-drop-down.jqx-date-time-drop-down .jqx-am-pm-element { width: 100%; } .jqx-drop-down.jqx-date-time-drop-down .jqx-footer-component { display: flex; padding: 1px; } .jqx-drop-down.jqx-date-time-drop-down .jqx-footer-component:focus { border-color: var(--jqx-outline); } .jqx-drop-down.jqx-date-time-drop-down .jqx-footer-component > input { outline: none; border: var(--jqx-border-width) solid var(--jqx-border); text-align: center; color: inherit; font-family: inherit; font-size: inherit; height: 100%; } .jqx-drop-down.jqx-date-time-drop-down .jqx-footer-component > input:focus { border-color: var(--jqx-outline); } .jqx-drop-down.jqx-date-time-drop-down .jqx-footer-component > span { width: 30%; overflow: hidden; display: flex; flex-direction: column; } .jqx-drop-down.jqx-date-time-drop-down .jqx-footer-component-today { padding: 1px; font-family: var(--jqx-font-family-icon); border: var(--jqx-border-width) solid transparent; display: flex; width: 30%; overflow: hidden; flex-direction: column; align-items: center; justify-content: center; } .jqx-drop-down.jqx-date-time-drop-down .jqx-footer-component-today:focus { outline: none; } .jqx-drop-down.jqx-date-time-drop-down .jqx-footer-component-hour, .jqx-drop-down.jqx-date-time-drop-down .jqx-footer-component-minute { width: 30%; } .jqx-drop-down.jqx-date-time-drop-down .jqx-footer-component-hour jqx-repeat-button, .jqx-drop-down.jqx-date-time-drop-down .jqx-footer-component-minute jqx-repeat-button { border-radius: 0px; margin: 0px; margin-left: -1px; width: 100%; height: 50%; } .jqx-drop-down.jqx-date-time-drop-down .jqx-footer-component-hour jqx-repeat-button:last-child, .jqx-drop-down.jqx-date-time-drop-down .jqx-footer-component-minute jqx-repeat-button:last-child { border-top-color: transparent; } .jqx-drop-down.jqx-date-time-drop-down .jqx-footer-component-hour button, .jqx-drop-down.jqx-date-time-drop-down .jqx-footer-component-minute button { border-radius: 0px; padding: 0px; } .jqx-drop-down.jqx-date-time-drop-down .jqx-footer-component-ampm { width: 30%; overflow: hidden; display: flex; flex-direction: column; } .jqx-drop-down.jqx-date-time-drop-down .jqx-hour-element, .jqx-drop-down.jqx-date-time-drop-down .jqx-minute-element { width: 60%; } .jqx-drop-down.jqx-date-time-drop-down .jqx-today-element { cursor: pointer; outline: none; } .jqx-drop-down.jqx-date-time-drop-down .jqx-today-element:after { content: var(--jqx-icon-calendar); } .jqx-drop-down.jqx-date-time-drop-down .jqx-today-element:focus { border-color: var(--jqx-outline); } .jqx-drop-down.jqx-date-time-drop-down .jqx-drop-down-header { height: var(--jqx-bar-height); width: 100%; display: flex; align-items: center; } .jqx-drop-down.jqx-date-time-drop-down .jqx-drop-down-header:focus { outline: none; } .jqx-drop-down.jqx-date-time-drop-down .jqx-drop-down-header > div { width: 50%; height: 100%; display: flex; align-items: center; justify-content: center; cursor: pointer; background-color: var(--jqx-primary); color: var(--jqx-primary-color); opacity: var(--jqx-date-time-picker-header-opacity); outline: unset; } .jqx-drop-down.jqx-date-time-drop-down .jqx-drop-down-header > div:focus { text-decoration: underline; } .jqx-drop-down.jqx-date-time-drop-down .jqx-drop-down-header > .jqx-selected { background-color: var(--jqx-primary); border-color: var(--jqx-primary); color: var(--jqx-primary-color); opacity: var(--jqx-date-time-picker-header-opacity-active); } .jqx-drop-down.jqx-date-time-drop-down .jqx-drop-down-content { width: 100%; height: calc(100% - var(--jqx-bar-height)); } .jqx-drop-down.jqx-date-time-drop-down .jqx-drop-down-content.partial { height: 100%; } .jqx-drop-down.jqx-date-time-drop-down .jqx-date-time-picker .jqx-hidden { display: none; } .jqx-drop-down.jqx-date-time-drop-down[drop-down-display-mode=classic] .jqx-calendar-container, .jqx-drop-down.jqx-date-time-drop-down[drop-down-display-mode=timePicker] .jqx-calendar-container { height: 100%; } .jqx-drop-down.jqx-date-time-drop-down.jqx-visibility-hidden.not-in-view { left: -9999px; top: -9999px; transition: none; } /* jqx-date-time-picker */ .jqx-date-time-picker[right-to-left] > .jqx-container { direction: initial; } .jqx-date-time-picker[right-to-left] > .jqx-container > .jqx-label { direction: rtl; } .jqx-date-time-picker[right-to-left] .jqx-input.jqx-date-time-input, .jqx-date-time-picker[right-to-left] .jqx-hint { direction: rtl; } jqx-docking-layout { width: var(--jqx-docking-layout-default-width); height: var(--jqx-docking-layout-default-height); } jqx-docking-layout.jqx-element { overflow: initial; } jqx-docking-layout:not([animation=none]) .jqx-window .jqx-dock-button:after { transition: transform 0.2s ease; } jqx-docking-layout .jqx-items-container, jqx-docking-layout .jqx-horizontal-hidden-items-container, jqx-docking-layout .jqx-vertical-hidden-items-container { width: 100%; height: 100%; background-color: transparent; } /* Non-class selectors are Necessary for the Splitter item calculation on initialization */ .jqx-docking-layout > .jqx-container { overflow: hidden; } .jqx-docking-layout .jqx-items-container { width: 100%; height: 100%; background-color: transparent; } .jqx-docking-layout .jqx-tabs-window-feedback.jqx-window { position: absolute; opacity: 0; max-width: 400px; max-height: 400px; pointer-events: none; } .jqx-docking-layout .jqx-tabs-window-feedback.jqx-window:not([animation=none]) { transition: transform 0.2s ease-out, opacity 0.2s ease-out, visibility 0.2s ease-out; } .jqx-docking-layout .jqx-tabs-window-feedback[tabs-window-dragged] { z-index: 10001; opacity: 0.9; transform: scale(0.2); min-width: 400px; min-height: 400px; } .jqx-docking-layout .jqx-window .jqx-content-container > .jqx-content { align-items: stretch; } .jqx-docking-layout .jqx-window .jqx-dock-button:after { content: var(--jqx-icon-arrow-up); font-size: 0.8rem; } .jqx-docking-layout .jqx-window .jqx-buttons-container .jqx-dock-button:after { content: var(--jqx-icon-window-pin-alt); font-size: 0.8rem; } .jqx-docking-layout .jqx-window .jqx-buttons-container .jqx-menu-button:after { content: var(--jqx-icon-menu); transform: rotate(180deg); font-size: 0.8rem; } .jqx-docking-layout .jqx-window .jqx-buttons-container .jqx-auto-hide-button:after { content: var(--jqx-icon-window-pin); font-size: 0.8rem; } .jqx-docking-layout .jqx-window.jqx-docking-layout-auto-hide-window[pinned] .jqx-auto-hide-button:after { content: ""; } .jqx-docking-layout .jqx-window[focused] { box-shadow: none; } .jqx-docking-layout .jqx-placeholder .jqx-window .jqx-content-container > .jqx-header-section { min-height: 0; height: 0; padding: 0; } .jqx-docking-layout .jqx-docking-layout-item-holder { width: 100%; height: 100%; } .jqx-docking-layout .jqx-horizontal-hidden-items-container, .jqx-docking-layout .jqx-vertical-hidden-items-container { width: 100%; height: 100%; background-color: transparent; } .jqx-docking-layout .jqx-horizontal-hidden-items-container > .jqx-container > jqx-splitter-item, .jqx-docking-layout .jqx-vertical-hidden-items-container > .jqx-container > jqx-splitter-item { background-color: transparent; } .jqx-docking-layout .jqx-docking-layout-auto-hide-window:focus, .jqx-docking-layout .jqx-docking-layout-auto-hide-window[focused] { box-shadow: none; } .jqx-docking-layout .jqx-docking-layout-auto-hide-window[resize-mode=right] { transition: animation, visibility 0.2s ease-in; transform-origin: left; animation: leftToRightOut 0.2s cubic-bezier(0.4, 0, 1, 1); } .jqx-docking-layout .jqx-docking-layout-auto-hide-window[resize-mode=right][opened] { transition: animation, visibility 0.2s ease-in; transform-origin: left; animation: leftToRightIn 0.2s cubic-bezier(0, 0, 0.2, 1); } .jqx-docking-layout .jqx-docking-layout-auto-hide-window[resize-mode=right]:not([animation=none]) { transform: scaleX(1); } .jqx-docking-layout .jqx-docking-layout-auto-hide-window[resize-mode=right]:not([animation=none]).jqx-visibility-hidden { transform: scaleX(0); } .jqx-docking-layout .jqx-docking-layout-auto-hide-window[resize-mode=left] { transition: animation, visibility 0.2s ease-in; transform-origin: right; animation: rightToLeftOut 0.2s cubic-bezier(0.4, 0, 1, 1); } .jqx-docking-layout .jqx-docking-layout-auto-hide-window[resize-mode=left][opened] { transition: animation, visibility 0.2s ease-in; transform-origin: right; animation: rightToLeftIn 0.2s cubic-bezier(0, 0, 0.2, 1); } .jqx-docking-layout .jqx-docking-layout-auto-hide-window[resize-mode=left]:not([animation=none]) { transform: scaleX(1); } .jqx-docking-layout .jqx-docking-layout-auto-hide-window[resize-mode=left]:not([animation=none]).jqx-visibility-hidden { transform: scaleX(0); } .jqx-docking-layout .jqx-docking-layout-auto-hide-window[resize-mode=top] { transition: animation, visibility 0.2s ease-in; transform-origin: bottom; animation: bottomToTopOut 0.2s cubic-bezier(0.4, 0, 1, 1); } .jqx-docking-layout .jqx-docking-layout-auto-hide-window[resize-mode=top][opened] { transition: animation, visibility 0.2s ease-in; transform-origin: bottom; animation: bottomToTopIn 0.2s cubic-bezier(0, 0, 0.2, 1); } .jqx-docking-layout .jqx-docking-layout-auto-hide-window[resize-mode=top]:not([animation=none]) { transform: scaleY(1); } .jqx-docking-layout .jqx-docking-layout-auto-hide-window[resize-mode=top]:not([animation=none]).jqx-visibility-hidden { transform: scaleY(0); } .jqx-docking-layout .jqx-docking-layout-auto-hide-window[resize-mode=bottom] { transition: animation, visibility 0.2s ease-in; transform-origin: top; animation: topToBottomOut 0.2s cubic-bezier(0.4, 0, 1, 1); } .jqx-docking-layout .jqx-docking-layout-auto-hide-window[resize-mode=bottom][opened] { transition: animation, visibility 0.2s ease-in; transform-origin: top; animation: topToBottomIn 0.2s cubic-bezier(0, 0, 0.2, 1); } .jqx-docking-layout .jqx-docking-layout-auto-hide-window[resize-mode=bottom]:not([animation=none]) { transform: scaleY(1); } .jqx-docking-layout .jqx-docking-layout-auto-hide-window[resize-mode=bottom]:not([animation=none]).jqx-visibility-hidden { transform: scaleY(0); } .jqx-docking-layout .jqx-docking-layout-auto-hide-window.jqx-window { position: absolute; box-shadow: none; border: 1px solid #A9A9A9; border-radius: 0; width: 200px; height: 200px; min-width: 100px; min-height: 100px; } .jqx-docking-layout .jqx-docking-layout-auto-hide-window.jqx-window .jqx-content-container:not([class*=jqx-window-resizing]) > .jqx-header-section { cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .jqx-docking-layout .jqx-window-resize-feedback { border: 2.5px solid lightgray; } .jqx-docking-layout jqx-tabs-window.jqx-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(--jqx-border-width) solid var(--jqx-border); } .jqx-docking-layout jqx-tabs-window.jqx-window jqx-tabs { min-width: 0; min-height: 0; height: 100%; } .jqx-docking-layout jqx-tabs-window.jqx-window .jqx-pin-button, .jqx-docking-layout jqx-tabs-window.jqx-window .jqx-maximize-button, .jqx-docking-layout jqx-tabs-window.jqx-window .jqx-minimize-button { display: none; } .jqx-docking-layout jqx-tabs-window.jqx-window:not(.jqx-docking-layout-auto-hide-window) .jqx-content-container, .jqx-docking-layout jqx-tabs-window.jqx-window[pinned]:not(.jqx-docking-layout-auto-hide-window) .jqx-content-container { cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .jqx-docking-layout jqx-tabs-window.jqx-window:not([animation=none]):not(.jqx-docking-layout-auto-hide-window) { transition: transform 0.2s ease-out; } .jqx-docking-layout jqx-tabs-window.jqx-window[collapsed] { height: 100%; } .jqx-docking-layout jqx-tabs-window.jqx-window[tabs-window-dragged]:not(.jqx-tabs-window-feedback) { transform: scale(0.75); } .jqx-docking-layout jqx-tabs-window.jqx-window[ontop]:not([tabs-window-dragged]) { z-index: initial; } .jqx-docking-layout jqx-tabs-window.jqx-window[auto-hide] { height: 100%; width: 100%; border: none; } .jqx-docking-layout jqx-tabs-window.jqx-window[auto-hide] jqx-tabs { height: 100%; width: 100%; } .jqx-docking-layout jqx-tabs-window.jqx-window[auto-hide] .jqx-content-container > .jqx-content { padding: 0; overflow: hidden; } .jqx-docking-layout jqx-placeholder .jqx-window .jqx-content { height: 100%; } .jqx-docking-layout jqx-splitter { border: none; } .jqx-docking-layout jqx-splitter jqx-splitter-bar .jqx-splitter-resize-button { display: none; } .jqx-docking-layout jqx-splitter[show-locked-items] jqx-splitter-item[locked].auto-hide-left > .jqx-container::after, .jqx-docking-layout jqx-splitter[show-locked-items] jqx-splitter-item[locked].auto-hide-right > .jqx-container::after, .jqx-docking-layout jqx-splitter[show-locked-items] jqx-splitter-item[locked].auto-hide-top > .jqx-container::after, .jqx-docking-layout jqx-splitter[show-locked-items] jqx-splitter-item[locked].auto-hide-bottom > .jqx-container::after { content: ""; } .jqx-docking-layout jqx-splitter-item jqx-tabs-window.jqx-window[auto-hide] .jqx-content-container > .jqx-content { height: 100%; } .jqx-docking-layout jqx-splitter-item jqx-tabs-window.jqx-window:not([animation=none]) { transition: none; animation: none; border: none; } .jqx-docking-layout jqx-splitter-item.jqx-placeholder jqx-tab-item .jqx-container:after { content: "Drop Items Here"; font-family: var(--jqx-font-family-icon); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 20px; padding: 15px; color: gray; opacity: 0.75; } @-moz-document url-prefix() { .jqx-docking-layout jqx-splitter-item[locked].auto-hide-top { line-height: 100%; } } @supports (-ms-ime-align: auto) { .jqx-docking-layout jqx-tabs[vertical] > .jqx-container { display: table-cell; } } .jqx-docking-layout[dragged] { cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .jqx-docking-layout[dragged] > .jqx-container { overflow: visible; } .jqx-docking-layout[snap-mode=advanced] jqx-splitter-item .jqx-content { overflow: hidden; } jqx-tabs-window[tabs-window-dragged]:not(.jqx-tabs-window-feedback) { transform: scale(0.2); } jqx-tabs-window.jqx-window .jqx-buttons-container .jqx-auto-hide-button:after { content: var(--jqx-icon-window-pin); font-size: 0.8rem; } jqx-tabs-window.jqx-window[auto-hide] .jqx-content-container > .jqx-content { padding: 5px; } jqx-tabs-window.jqx-window[tabs-window-dragged] { animation: none; position: absolute; opacity: 0.5; transform: scale(0.2); transform-origin: top left; z-index: 10001; pointer-events: none; min-width: 400px; min-height: 400px; } jqx-tabs-window.jqx-window[tabs-window-dragged]:not([animation=none]) { transition: transform 0.2s ease-in; animation: scaleInNo 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .jqx-docking-snap-left-feedback, .jqx-docking-snap-right-feedback, .jqx-docking-snap-top-feedback, .jqx-docking-snap-bottom-feedback { transition: all 0.05s cubic-bezier(0.4, 0, 0.6, 1); z-index: 10001; position: absolute; opacity: 0.65; border-radius: 2px; box-shadow: 0 0 1px 1px var(--jqx-background-color); border-top-left-radius: var(--jqx-border-top-left-radius); border-top-right-radius: var(--jqx-border-top-right-radius); border-bottom-left-radius: var(--jqx-border-bottom-right-radius); border-bottom-right-radius: var(--jqx-border-bottom-right-radius); animation: scaleIn 0.2s cubic-bezier(0.4, 0, 0.2, 1); transform: scale(1); pointer-events: none; } .jqx-docking-snap-left-feedback[disabled]:after, .jqx-docking-snap-right-feedback[disabled]:after, .jqx-docking-snap-top-feedback[disabled]:after, .jqx-docking-snap-bottom-feedback[disabled]:after { position: absolute; content: var(--jqx-icon-block); font-family: var(--jqx-font-family-icon); opacity: 0.25; color: red; font-size: 35px; top: 50%; left: 50%; transform: translate(-50%, -50%); } .jqx-docking-snap-right-feedback { width: 50%; left: calc(50% - 5px); } .jqx-docking-snap-header-feedback, .jqx-docking-snap-layout-left-feedback, .jqx-docking-snap-layout-right-feedback, .jqx-docking-snap-layout-top-feedback, .jqx-docking-snap-layout-bottom-feedback { position: absolute; opacity: 0.65; box-shadow: 0 0 1px 1px var(--jqx-background-color); border-radius: var(--jqx-border-radius); animation: scaleIn 0.2s cubic-bezier(0.4, 0, 0.2, 1); transform: scale(1); pointer-events: none; cursor: pointer; z-index: 10001; transition: width 0.05s cubic-bezier(0.4, 0, 0.2, 1), height 0.05s cubic-bezier(0.4, 0, 0.2, 1), top 0.05s cubic-bezier(0.4, 0, 0.6, 1), animation 0.2s cubic-bezier(0.4, 0, 0.6, 1), left 0.05s cubic-bezier(0.4, 0, 0.2, 1); } .jqx-docking-snap-header-feedback.jqx-visibility-hidden, .jqx-docking-snap-layout-left-feedback.jqx-visibility-hidden, .jqx-docking-snap-layout-right-feedback.jqx-visibility-hidden, .jqx-docking-snap-layout-top-feedback.jqx-visibility-hidden, .jqx-docking-snap-layout-bottom-feedback.jqx-visibility-hidden { transition: animation 0.2s cubic-bezier(0.4, 0, 0.6, 1), visibility 0.2s cubic-bezier(0.4, 0, 0.6, 1), top 0.2s cubic-bezier(0.4, 0, 0.2, 1), left 0.1s cubic-bezier(0.4, 0, 0.2, 1); animation: scaleOut 0.2s cubic-bezier(0.4, 0, 0.6, 1); transform: scale(0); } .jqx-docking-snap-header-feedback[disabled]:after, .jqx-docking-snap-layout-left-feedback[disabled]:after, .jqx-docking-snap-layout-right-feedback[disabled]:after, .jqx-docking-snap-layout-top-feedback[disabled]:after, .jqx-docking-snap-layout-bottom-feedback[disabled]:after { position: absolute; content: var(--jqx-icon-block); font-family: var(--jqx-font-family-icon); opacity: 0.25; color: red; font-size: 35px; top: 50%; left: 50%; transform: translate(-50%, -50%); } .jqx-docking-snap-layout-left-feedback, .jqx-docking-snap-layout-right-feedback { max-width: 50px; transform-origin: left; } .jqx-docking-snap-layout-top-feedback, .jqx-docking-snap-layout-bottom-feedback { max-height: 50px; transform-origin: left; } .jqx-docking-layout-auto-hide-window { z-index: 9999 !important; } .jqx-docking-layout-auto-hide-window[ontop] { z-index: 9999 !important; } .jqx-docking-layout-snap { width: 110px; height: 110px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .jqx-docking-layout-snap > div { width: 100%; height: 33.3333333333%; display: flex; justify-content: center; align-items: center; } .jqx-docking-layout-snap .header { background-color: var(--jqx-primary); position: absolute; } .jqx-docking-layout-snap .top, .jqx-docking-layout-snap .bottom, .jqx-docking-layout-snap .left, .jqx-docking-layout-snap .right, .jqx-docking-layout-snap .center { width: 35px; height: 35px; float: left; padding: 2px; overflow: hidden; opacity: 0.25; } .jqx-docking-layout-snap .top > div, .jqx-docking-layout-snap .bottom > div, .jqx-docking-layout-snap .left > div, .jqx-docking-layout-snap .right > div, .jqx-docking-layout-snap .center > div { width: 100%; height: 100%; border: 1px solid var(--jqx-border); background: var(--jqx-background); border-top-width: 6px; box-sizing: border-box; display: flex; pointer-events: none; } .jqx-docking-layout-snap .top > div div, .jqx-docking-layout-snap .bottom > div div, .jqx-docking-layout-snap .left > div div, .jqx-docking-layout-snap .right > div div, .jqx-docking-layout-snap .center > div div { width: 100%; height: 50%; background-color: var(--jqx-primary); } .jqx-docking-layout-snap .top[show], .jqx-docking-layout-snap .bottom[show], .jqx-docking-layout-snap .left[show], .jqx-docking-layout-snap .right[show], .jqx-docking-layout-snap .center[show] { opacity: 1; } .jqx-docking-layout-snap .left > div div, .jqx-docking-layout-snap .right > div div { width: 50%; height: 100%; } .jqx-docking-layout-snap .right > div { flex-direction: column; align-items: flex-end; } .jqx-docking-layout-snap .bottom > div { align-items: flex-end; } .jqx-docking-layout-snap .center > div div { height: 100%; } .jqx-docking-layout-snap.layout-top, .jqx-docking-layout-snap.layout-bottom, .jqx-docking-layout-snap.layout-left, .jqx-docking-layout-snap.layout-right { position: absolute; width: 30px; height: 30px; overflow: hidden; opacity: 0.25; } .jqx-docking-layout-snap.layout-top > div, .jqx-docking-layout-snap.layout-bottom > div, .jqx-docking-layout-snap.layout-left > div, .jqx-docking-layout-snap.layout-right > div { width: 100%; height: 100%; border: 1px solid var(--jqx-border); background: var(--jqx-background); border-top-width: 6px; box-sizing: border-box; display: flex; pointer-events: none; } .jqx-docking-layout-snap.layout-top > div div, .jqx-docking-layout-snap.layout-bottom > div div, .jqx-docking-layout-snap.layout-left > div div, .jqx-docking-layout-snap.layout-right > div div { width: 100%; height: 100%; background-color: var(--jqx-primary); } .jqx-docking-layout-snap.layout-top.jqx-hidden, .jqx-docking-layout-snap.layout-bottom.jqx-hidden, .jqx-docking-layout-snap.layout-left.jqx-hidden, .jqx-docking-layout-snap.layout-right.jqx-hidden { display: none; } .jqx-docking-layout-snap.layout-top[show], .jqx-docking-layout-snap.layout-bottom[show], .jqx-docking-layout-snap.layout-left[show], .jqx-docking-layout-snap.layout-right[show] { opacity: 1; } .jqx-docking-layout-snap.layout-top { left: 50%; transform: translateX(-50%); top: 5px; } .jqx-docking-layout-snap.layout-top > div { height: 50%; position: relative; } .jqx-docking-layout-snap.layout-top > div:after { content: ""; position: absolute; width: 0; height: 0; border-left: var(--jqx-docking-layout-feedback-background-secondary-size) solid transparent; border-right: var(--jqx-docking-layout-feedback-background-secondary-size) solid transparent; border-top: none; border-bottom: var(--jqx-docking-layout-feedback-background-secondary-size) solid var(--jqx-border); left: 50%; top: 180%; transform: translateX(-50%); } .jqx-docking-layout-snap.layout-bottom { display: flex; align-items: flex-end; left: 50%; transform: translateX(-50%); top: auto; bottom: 5px; } .jqx-docking-layout-snap.layout-bottom > div { height: 50%; position: relative; } .jqx-docking-layout-snap.layout-bottom > div:after { content: ""; position: absolute; width: 0; height: 0; border-right: var(--jqx-docking-layout-feedback-background-secondary-size) solid transparent; border-left: var(--jqx-docking-layout-feedback-background-secondary-size) solid transparent; border-top: var(--jqx-docking-layout-feedback-background-secondary-size) solid var(--jqx-border); border-bottom: none; left: 50%; top: -100%; transform: translate(-50%, -150%); } .jqx-docking-layout-snap.layout-left { top: 50%; transform: translateY(-50%); left: 5px; } .jqx-docking-layout-snap.layout-left > div { width: 50%; position: relative; } .jqx-docking-layout-snap.layout-left > div:after { content: ""; position: absolute; width: 0; height: 0; border-left: none; border-right: var(--jqx-docking-layout-feedback-background-secondary-size) solid var(--jqx-border); border-top: var(--jqx-docking-layout-feedback-background-secondary-size) solid transparent; border-bottom: var(--jqx-docking-layout-feedback-background-secondary-size) solid transparent; left: 155%; top: 50%; transform: translateY(-50%); } .jqx-docking-layout-snap.layout-right { display: flex; align-items: flex-end; flex-direction: column; left: auto; top: 50%; transform: translateY(-50%); right: 5px; } .jqx-docking-layout-snap.layout-right > div { width: 50%; position: relative; } .jqx-docking-layout-snap.layout-right > div:after { content: ""; position: absolute; width: 0; height: 0; top: 50%; transform: translateY(-50%); border-right: none; border-left: var(--jqx-docking-layout-feedback-background-secondary-size) solid var(--jqx-border); border-top: var(--jqx-docking-layout-feedback-background-secondary-size) solid transparent; border-bottom: var(--jqx-docking-layout-feedback-background-secondary-size) solid transparent; left: calc(-100% - 1px); } .jqx-docking-layout-snap-highlighter { background-color: var(--jqx-primary); opacity: 0.5; position: absolute; pointer-events: none; z-index: 10001; } .jqx-docking-layout-snap-highlighter[position=header] { width: 100%; height: 100%; } .jqx-docking-layout-snap-highlighter[position=center] { top: 0; left: 0; width: 100%; height: 100%; } .jqx-docking-layout-snap-highlighter[position=top] { width: 100%; height: 50%; max-height: 50%; top: 0; } .jqx-docking-layout-snap-highlighter[position=bottom] { width: 100%; height: 50%; max-height: 50%; bottom: 0; } .jqx-docking-layout-snap-highlighter[position=left] { width: 50%; max-width: 50%; height: 100%; left: 0; top: 0; } .jqx-docking-layout-snap-highlighter[position=right] { width: 50%; max-width: 50%; height: 100%; right: 0; top: 0; } .jqx-docking-layout-snap-highlighter[position=layout-top] { width: 100%; height: 10%; max-height: 50%; top: 0; } .jqx-docking-layout-snap-highlighter[position=layout-bottom] { width: 100%; height: 10%; max-height: 50%; bottom: 0; } .jqx-docking-layout-snap-highlighter[position=layout-left] { width: 10%; max-width: 50%; height: 100%; left: 0; bottom: 0; } .jqx-docking-layout-snap-highlighter[position=layout-right] { width: 10%; max-width: 50%; height: 100%; right: 0; bottom: 0; } .jqx-docking-layout-snap-highlighter-header { background-color: var(--jqx-primary); opacity: 0.5; position: absolute; pointer-events: none; z-index: 10001; transform: none; } @keyframes scaleInNo { 0% { transform: scale(1); } 100% { transform: scale(0.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); } } /* jqx-drop-down-list */ jqx-drop-down-list { width: var(--jqx-drop-down-list-default-width); height: var(--jqx-drop-down-list-default-height); overflow: initial; visibility: hidden; cursor: pointer; } jqx-drop-down-list.jqx-element { overflow: visible; visibility: inherit; border-width: 0px; } jqx-drop-down-list.jqx-element .jqx-drop-down.jqx-visibility-hidden { transform: scale(0); transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0ms; transform-origin: left top 0px; } .jqx-drop-down-list jqx-list-box { position: relative; width: 100%; height: 100%; border: initial; padding: initial; overflow: hidden; font-size: inherit; font-family: inherit; outline: none; } .jqx-drop-down-list .jqx-buttons-container .jqx-action-button .jqx-token { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; cursor: pointer; margin: 2px; user-select: none; margin-top: 0; margin-bottom: 0; } .jqx-drop-down-list .jqx-drop-down-list-unselect-button { /*visibility: hidden;*/ pointer-events: none; } .jqx-drop-down-list .jqx-drop-down-list-unselect-button:not(:empty) { margin-right: 2px; } .jqx-drop-down-list[selection-display-mode=tokens] .jqx-drop-down-list-unselect-button { /*visibility: visible;*/ pointer-events: initial; } /* jqx-drop-down-button */ jqx-drop-down-button { width: var(--jqx-drop-down-button-default-width); height: var(--jqx-drop-down-button-default-height); visibility: hidden; } jqx-drop-down-button.jqx-element { display: inline-block; -webkit-backface-visibility: hidden; backface-visibility: hidden; overflow: visible; border: none; visibility: inherit; } jqx-drop-down-button .jqx-ripple { background: var(--jqx-primary-color); } jqx-drop-down-button > .jqx-buttons-container > .jqx-action-button:empty { padding: 0; width: 0; } jqx-drop-down-button .jqx-drop-down-container > jqx-scroll-viewer { --jqx-scroll-viewer-min-width: calc(var(--jqx-editor-drop-down-min-width) - 2 * var(--jqx-border-width) - 2 * var(--jqx-editor-drop-down-padding-size)); --jqx-scroll-viewer-max-width: calc(var(--jqx-editor-drop-down-max-width) - 2 * var(--jqx-border-width) - 2 * var(--jqx-editor-drop-down-padding-size)); --jqx-scroll-viewer-min-height: calc(var(--jqx-editor-drop-down-min-height) - 2 * var(--jqx-border-width) - 2 * var(--jqx-editor-drop-down-padding-size)); --jqx-scroll-viewer-max-height: calc(var(--jqx-editor-drop-down-max-height) - 2 * var(--jqx-border-width) - 2 * var(--jqx-editor-drop-down-padding-size)); width: 100%; height: 100%; border: none; padding: 0; overflow: hidden; } jqx-drop-down-button .jqx-drop-down-container > jqx-scroll-viewer > .jqx-container > .jqx-scroll-viewer-container > .jqx-scroll-viewer-content-container { vertical-align: top; /* Fixes the height issue of display: inline-block */ padding: 0; } jqx-drop-down-button .jqx-drop-down-container:not([resize-mode=none]) > jqx-scroll-viewer { --jqx-scroll-viewer-min-height: calc(var(--jqx-editor-drop-down-min-height) - 2 * var(--jqx-border-width) - 2 * var(--jqx-editor-drop-down-padding-size) - var(--jqx-editor-drop-down-resize-bar-height)); --jqx-scroll-viewer-max-height: calc(var(--jqx-editor-drop-down-max-height) - 2 * var(--jqx-border-width) - 2 * var(--jqx-editor-drop-down-padding-size) - var(--jqx-editor-drop-down-resize-bar-height)); height: calc(100% - var(--jqx-editor-drop-down-resize-bar-height)); } jqx-drop-down-button .jqx-drop-down-container[empty] > jqx-scroll-viewer > .jqx-container > .jqx-scroll-viewer-container { display: flex; align-items: center; justify-content: center; font-style: italic; } jqx-drop-down-button .jqx-drop-down-container jqx-tree { border: 0; } jqx-drop-down-button.primary { --jqx-editor-selection: var(--jqx-primary); --jqx-editor-selection-color: var(--jqx-primary-color); --jqx-ui-state-active: var(--jqx-primary); --jqx-ui-state-color-active: var(--jqx-primary-color); --jqx-ui-state-border-active: var(--jqx-primary); --jqx-ui-state-selected: rgba(var(--jqx-primary-rgb), .1); --jqx-ui-state-color-selected: var(--jqx-primary); --jqx-ui-state-border-selected: rgba(var(--jqx-primary-rgb), .1); --jqx-border: rgba(var(--jqx-primary-rgb), .9); } jqx-drop-down-button.primary:not([drop-down-open-mode=dropDownButton]) .jqx-action-button { --jqx-border: rgba(var(--jqx-primary-rgb), .9); background-color: var(--jqx-primary); color: var(--jqx-primary-color); } jqx-drop-down-button.primary .jqx-action-button, jqx-drop-down-button.primary .jqx-drop-down-button { --jqx-ui-state-border-hover: rgba(var(--jqx-primary-rgb), .9); --jqx-ui-state-hover: rgba(var(--jqx-primary-rgb), .9); --jqx-ui-state-color-hover: var(--jqx-primary-color); background-color: var(--jqx-primary); color: var(--jqx-primary-color); } jqx-drop-down-button.secondary { --jqx-editor-selection: var(--jqx-secondary); --jqx-editor-selection-color: var(--jqx-secondary-color); --jqx-ui-state-active: var(--jqx-secondary); --jqx-ui-state-color-active: var(--jqx-secondary-color); --jqx-ui-state-border-active: var(--jqx-secondary); --jqx-ui-state-selected: rgba(var(--jqx-secondary-rgb), .1); --jqx-ui-state-color-selected: var(--jqx-secondary); --jqx-ui-state-border-selected: rgba(var(--jqx-secondary-rgb), .1); --jqx-border: rgba(var(--jqx-secondary-rgb), .9); } jqx-drop-down-button.secondary:not([drop-down-open-mode=dropDownButton]) .jqx-action-button { --jqx-border: rgba(var(--jqx-secondary-rgb), .9); background-color: var(--jqx-secondary); color: var(--jqx-secondary-color); } jqx-drop-down-button.secondary .jqx-action-button, jqx-drop-down-button.secondary .jqx-drop-down-button { --jqx-ui-state-border-hover: rgba(var(--jqx-secondary-rgb), .9); --jqx-ui-state-hover: rgba(var(--jqx-secondary-rgb), .9); --jqx-ui-state-color-hover: var(--jqx-secondary-color); background-color: var(--jqx-secondary); color: var(--jqx-secondary-color); } jqx-drop-down-button.success { --jqx-editor-selection: var(--jqx-success); --jqx-editor-selection-color: var(--jqx-success-color); --jqx-ui-state-active: var(--jqx-success); --jqx-ui-state-color-active: var(--jqx-success-color); --jqx-ui-state-border-active: var(--jqx-success); --jqx-ui-state-selected: rgba(var(--jqx-success-rgb), .1); --jqx-ui-state-color-selected: var(--jqx-success); --jqx-ui-state-border-selected: rgba(var(--jqx-success-rgb), .1); --jqx-border: rgba(var(--jqx-success-rgb), .9); } jqx-drop-down-button.success:not([drop-down-open-mode=dropDownButton]) .jqx-action-button { --jqx-border: rgba(var(--jqx-success-rgb), .9); background-color: var(--jqx-success); color: var(--jqx-success-color); } jqx-drop-down-button.success .jqx-action-button, jqx-drop-down-button.success .jqx-drop-down-button { --jqx-ui-state-border-hover: rgba(var(--jqx-success-rgb), .9); --jqx-ui-state-hover: rgba(var(--jqx-success-rgb), .9); --jqx-ui-state-color-hover: var(--jqx-success-color); background-color: var(--jqx-success); color: var(--jqx-success-color); } jqx-drop-down-button.info { --jqx-editor-selection: var(--jqx-info); --jqx-editor-selection-color: var(--jqx-info-color); --jqx-ui-state-active: var(--jqx-info); --jqx-ui-state-color-active: var(--jqx-info-color); --jqx-ui-state-border-active: var(--jqx-info); --jqx-ui-state-selected: rgba(var(--jqx-info-rgb), .1); --jqx-ui-state-color-selected: var(--jqx-info); --jqx-ui-state-border-selected: rgba(var(--jqx-info-rgb), .1); --jqx-border: rgba(var(--jqx-info-rgb), .9); } jqx-drop-down-button.info:not([drop-down-open-mode=dropDownButton]) .jqx-action-button { --jqx-border: rgba(var(--jqx-info-rgb), .9); background-color: var(--jqx-info); color: var(--jqx-info-color); } jqx-drop-down-button.info .jqx-action-button, jqx-drop-down-button.info .jqx-drop-down-button { --jqx-ui-state-border-hover: rgba(var(--jqx-info-rgb), .9); --jqx-ui-state-hover: rgba(var(--jqx-info-rgb), .9); --jqx-ui-state-color-hover: var(--jqx-info-color); background-color: var(--jqx-info); color: var(--jqx-info-color); } jqx-drop-down-button.warning { --jqx-editor-selection: var(--jqx-warning); --jqx-editor-selection-color: var(--jqx-warning-color); --jqx-ui-state-active: var(--jqx-warning); --jqx-ui-state-color-active: var(--jqx-warning-color); --jqx-ui-state-border-active: var(--jqx-warning); --jqx-ui-state-selected: rgba(var(--jqx-warning-rgb), .1); --jqx-ui-state-color-selected: var(--jqx-warning); --jqx-ui-state-border-selected: rgba(var(--jqx-warning-rgb), .1); --jqx-border: rgba(var(--jqx-warning-rgb), .9); } jqx-drop-down-button.warning:not([drop-down-open-mode=dropDownButton]) .jqx-action-button { --jqx-border: rgba(var(--jqx-warning-rgb), .9); background-color: var(--jqx-warning); color: var(--jqx-warning-color); } jqx-drop-down-button.warning .jqx-action-button, jqx-drop-down-button.warning .jqx-drop-down-button { --jqx-ui-state-border-hover: rgba(var(--jqx-warning-rgb), .9); --jqx-ui-state-hover: rgba(var(--jqx-warning-rgb), .9); --jqx-ui-state-color-hover: var(--jqx-warning-color); background-color: var(--jqx-warning); color: var(--jqx-warning-color); } jqx-drop-down-button.error { --jqx-editor-selection: var(--jqx-error); --jqx-editor-selection-color: var(--jqx-error-color); --jqx-ui-state-active: var(--jqx-error); --jqx-ui-state-color-active: var(--jqx-error-color); --jqx-ui-state-border-active: var(--jqx-error); --jqx-ui-state-selected: rgba(var(--jqx-error-rgb), .1); --jqx-ui-state-color-selected: var(--jqx-error); --jqx-ui-state-border-selected: rgba(var(--jqx-error-rgb), .1); --jqx-border: rgba(var(--jqx-error-rgb), .9); } jqx-drop-down-button.error:not([drop-down-open-mode=dropDownButton]) .jqx-action-button { --jqx-border: rgba(var(--jqx-error-rgb), .9); background-color: var(--jqx-error); color: var(--jqx-error-color); } jqx-drop-down-button.error .jqx-action-button, jqx-drop-down-button.error .jqx-drop-down-button { --jqx-ui-state-border-hover: rgba(var(--jqx-error-rgb), .9); --jqx-ui-state-hover: rgba(var(--jqx-error-rgb), .9); --jqx-ui-state-color-hover: var(--jqx-error-color); background-color: var(--jqx-error); color: var(--jqx-error-color); } jqx-drop-down-button.light { --jqx-editor-selection: var(--jqx-light); --jqx-editor-selection-color: var(--jqx-light-color); --jqx-ui-state-active: var(--jqx-light); --jqx-ui-state-color-active: var(--jqx-light-color); --jqx-ui-state-border-active: var(--jqx-light); --jqx-ui-state-selected: rgba(var(--jqx-light-rgb), .1); --jqx-ui-state-color-selected: var(--jqx-light); --jqx-ui-state-border-selected: rgba(var(--jqx-light-rgb), .1); --jqx-border: rgba(var(--jqx-light-rgb), .9); } jqx-drop-down-button.light:not([drop-down-open-mode=dropDownButton]) .jqx-action-button { --jqx-border: rgba(var(--jqx-light-rgb), .9); background-color: var(--jqx-light); color: var(--jqx-light-color); } jqx-drop-down-button.light .jqx-action-button, jqx-drop-down-button.light .jqx-drop-down-button { --jqx-ui-state-border-hover: rgba(var(--jqx-light-rgb), .9); --jqx-ui-state-hover: rgba(var(--jqx-light-rgb), .9); --jqx-ui-state-color-hover: var(--jqx-light-color); background-color: var(--jqx-light); color: var(--jqx-light-color); } jqx-drop-down-button.dark { --jqx-editor-selection: var(--jqx-dark); --jqx-editor-selection-color: var(--jqx-dark-color); --jqx-ui-state-active: var(--jqx-dark); --jqx-ui-state-color-active: var(--jqx-dark-color); --jqx-ui-state-border-active: var(--jqx-dark); --jqx-ui-state-selected: rgba(var(--jqx-dark-rgb), .1); --jqx-ui-state-color-selected: var(--jqx-dark); --jqx-ui-state-border-selected: rgba(var(--jqx-dark-rgb), .1); --jqx-border: rgba(var(--jqx-dark-rgb), .9); } jqx-drop-down-button.dark:not([drop-down-open-mode=dropDownButton]) .jqx-action-button { --jqx-border: rgba(var(--jqx-dark-rgb), .9); background-color: var(--jqx-dark); color: var(--jqx-dark-color); } jqx-drop-down-button.dark .jqx-action-button, jqx-drop-down-button.dark .jqx-drop-down-button { --jqx-ui-state-border-hover: rgba(var(--jqx-dark-rgb), .9); --jqx-ui-state-hover: rgba(var(--jqx-dark-rgb), .9); --jqx-ui-state-color-hover: var(--jqx-dark-color); background-color: var(--jqx-dark); color: var(--jqx-dark-color); } .jqx-drop-down-button.jqx-drop-down-container jqx-scroll-viewer { --jqx-scroll-viewer-min-width: calc(var(--jqx-editor-drop-down-min-width) - 2 * var(--jqx-border-width) - 2 * var(--jqx-editor-drop-down-padding-size)); --jqx-scroll-viewer-max-width: calc(var(--jqx-editor-drop-down-max-width) - 2 * var(--jqx-border-width) - 2 * var(--jqx-editor-drop-down-padding-size)); --jqx-scroll-viewer-min-height: calc(var(--jqx-editor-drop-down-min-height) - 2 * var(--jqx-border-width) - 2 * var(--jqx-editor-drop-down-padding-size)); --jqx-scroll-viewer-max-height: calc(var(--jqx-editor-drop-down-max-height) - 2 * var(--jqx-border-width) - 2 * var(--jqx-editor-drop-down-padding-size)); width: 100%; height: 100%; border: none; padding: 0; overflow: hidden; } .jqx-drop-down-button.jqx-drop-down-container jqx-scroll-viewer > .jqx-container > .jqx-scroll-viewer-container > .jqx-scroll-viewer-content-container { vertical-align: top; /* Fixes the height issue of display: inline-block */ padding: 0; } .jqx-drop-down-box { background: var(--jqx-surface); border-color: var(--jqx-border); border-top-left-radius: var(--jqx-border-top-left-radius); border-bottom-left-radius: var(--jqx-border-bottom-left-radius); border-top-right-radius: var(--jqx-border-top-right-radius); border-bottom-right-radius: var(--jqx-border-bottom-right-radius); overflow: initial; font-family: var(--jqx-font-family); font-size: var(--jqx-font-size); outline: none; height: var(--jqx-editor-height); } .jqx-drop-down-box:not([selection-clear]) .jqx-drop-down-button-clear-icon { display: none !important; } .jqx-drop-down-box > .jqx-container, .jqx-drop-down-box.jqx-container { display: flex; position: relative; align-items: center; } .jqx-drop-down-box > .jqx-container > .jqx-content, .jqx-drop-down-box.jqx-container > .jqx-content { position: relative; display: flex; width: 100%; height: 100%; } .jqx-drop-down-box .jqx-buttons-container { width: inherit; height: inherit; display: inherit; flex-direction: inherit; cursor: inherit; position: inherit; overflow: hidden; min-height: inherit; } .jqx-drop-down-box[selection-clear] { --jqx-editor-addon-width: 52px; } .jqx-drop-down-box[selection-clear] .jqx-drop-down-button { display: grid; grid-template-columns: 1fr 1fr; } .jqx-drop-down-box .jqx-action-button { display: flex; padding-left: var(--jqx-editor-label-padding); align-content: center; outline: 1px solid transparent; height: 100%; width: calc(100% - var(--jqx-editor-addon-width)); flex-wrap: wrap; overflow: hidden; position: relative; border-style: solid; border-color: var(--jqx-border); border-width: var(--jqx-border-width); align-items: center; border-right: none; border-top-left-radius: var(--jqx-border-top-left-radius); border-bottom-left-radius: var(--jqx-border-bottom-left-radius); user-select: none; white-space: nowrap; } .jqx-drop-down-box .jqx-action-button .jqx-input { color: inherit; background: inherit; border: none; width: calc(100% - var(--jqx-editor-addon-width)); height: 100%; outline: none; text-overflow: ellipsis; } .jqx-drop-down-box .jqx-action-button .jqx-input::placeholder { color: inherit; } .jqx-drop-down-box .jqx-drop-down-button { display: flex; align-items: center; justify-content: center; width: var(--jqx-editor-addon-width); min-width: var(--jqx-editor-addon-width); color: inherit; outline: 1px solid transparent; overflow: hidden; position: relative; background-color: var(--jqx-surface); border-width: var(--jqx-border-width); border-style: solid; border-color: var(--jqx-border); border-left: none; color: var(--jqx-surface-color); border-top-right-radius: var(--jqx-border-top-right-radius); border-bottom-right-radius: var(--jqx-border-bottom-right-radius); cursor: pointer; } .jqx-drop-down-box .jqx-drop-down-button .jqx-drop-down-button-clear-icon { pointer-events: none; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; transform-origin: center; font-family: var(--jqx-font-family-icon); overflow: visible; margin-left: 5px; } .jqx-drop-down-box .jqx-drop-down-button .jqx-drop-down-button-clear-icon:after { content: var(--jqx-icon-cancel-alt); font-size: var(--jqx-arrow-size); } .jqx-drop-down-box .jqx-drop-down-button .jqx-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(--jqx-font-family-icon); } .jqx-drop-down-box .jqx-drop-down-button .jqx-drop-down-button-icon:after { content: var(--jqx-icon-arrow-down); font-size: var(--jqx-arrow-size); } .jqx-drop-down-box .jqx-drop-down-button[active] { border-color: var(--jqx-ui-state-border-active); background-color: var(--jqx-ui-state-active); color: var(--jqx-ui-state-color-active); } .jqx-drop-down-box .jqx-drop-down-button[top] .jqx-drop-down-button-icon:after, .jqx-drop-down-box .jqx-drop-down-button[center-top] .jqx-drop-down-button-icon:after { transform: rotate(180deg); } .jqx-drop-down-box .jqx-drop-down { font-family: var(--jqx-font-family); font-size: var(--jqx-font-size); } .jqx-drop-down-box .jqx-drop-down.jqx-visibility-hidden { transform: scale(0); transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0ms; transform-origin: left top 0px; } .jqx-drop-down-box[drop-down-button-position=top] .jqx-action-button, .jqx-drop-down-box[drop-down-button-position=bottom] .jqx-action-button { min-height: var(--jqx-editor-height); padding-left: initial; } .jqx-drop-down-box[drop-down-button-position=top] .jqx-drop-down-button, .jqx-drop-down-box[drop-down-button-position=top] .jqx-action-button, .jqx-drop-down-box[drop-down-button-position=bottom] .jqx-drop-down-button, .jqx-drop-down-box[drop-down-button-position=bottom] .jqx-action-button { width: 100%; border: var(--jqx-border-width) solid var(--jqx-border); height: 50%; justify-content: center; } .jqx-drop-down-box[drop-down-button-position=top] { min-height: calc(2 * var(--jqx-editor-height)); } .jqx-drop-down-box[drop-down-button-position=top] .jqx-content { flex-direction: column-reverse; } .jqx-drop-down-box[drop-down-button-position=top] .jqx-drop-down-button { border-bottom: initial; border-top-left-radius: var(--jqx-border-top-left-radius); border-bottom-left-radius: 0; border-top-right-radius: var(--jqx-border-top-right-radius); border-bottom-right-radius: 0; } .jqx-drop-down-box[drop-down-button-position=top] .jqx-action-button { border-top-left-radius: 0; border-bottom-left-radius: var(--jqx-border-bottom-left-radius); border-top-right-radius: 0; border-bottom-right-radius: var(--jqx-border-bottom-right-radius); } .jqx-drop-down-box[drop-down-button-position=top]:not([drop-down-open-mode=dropDownButton]) .jqx-action-button { border-top: initial; } .jqx-drop-down-box[drop-down-button-position=bottom] { min-height: calc(2 * var(--jqx-editor-height)); } .jqx-drop-down-box[drop-down-button-position=bottom] .jqx-content { flex-direction: column; } .jqx-drop-down-box[drop-down-button-position=bottom] .jqx-action-button { border-bottom: initial; border-top-left-radius: var(--jqx-border-top-left-radius); border-bottom-left-radius: 0; border-top-right-radius: var(--jqx-border-top-right-radius); border-bottom-right-radius: 0; } .jqx-drop-down-box[drop-down-button-position=bottom] .jqx-drop-down-button { border-top-left-radius: 0; border-bottom-left-radius: var(--jqx-border-bottom-left-radius); border-top-right-radius: 0; border-bottom-right-radius: var(--jqx-border-bottom-right-radius); } .jqx-drop-down-box[drop-down-button-position=bottom]:not([drop-down-open-mode=dropDownButton]) .jqx-drop-down-button { border-top: initial; } .jqx-drop-down-box[drop-down-button-position=left] > .jqx-container > .jqx-content, .jqx-drop-down-box[drop-down-button-position=left].jqx-container > .jqx-content { flex-direction: row-reverse; } .jqx-drop-down-box[drop-down-button-position=left] .jqx-action-button { padding-right: var(--jqx-editor-label-padding); border-right: var(--jqx-border-width) solid var(--jqx-border); border-color: var(--jqx-border); border-top-left-radius: 0px; border-bottom-left-radius: 0px; border-top-right-radius: var(--jqx-border-top-right-radius); border-bottom-right-radius: var(--jqx-border-bottom-right-radius); padding-left: initial; flex-direction: row-reverse; } .jqx-drop-down-box[drop-down-button-position=left] .jqx-drop-down-button { border-left: var(--jqx-border-width) solid var(--jqx-border); border-color: var(--jqx-border); border-top-left-radius: var(--jqx-border-top-left-radius); border-bottom-left-radius: var(--jqx-border-bottom-left-radius); border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-right: initial; } .jqx-drop-down-box[drop-down-button-position=left] .jqx-drop-down-button[selected] { border-right: initial; } .jqx-drop-down-box[drop-down-button-position=left]:not([drop-down-open-mode=dropDownButton]) .jqx-action-button { border-left: initial; } .jqx-drop-down-box[drop-down-button-position=right] .jqx-action-button { padding-left: var(--jqx-editor-label-padding); } .jqx-drop-down-box[drop-down-button-position=none] .jqx-action-button { border-right: var(--jqx-border-width) solid var(--jqx-border); border-top-right-radius: var(--jqx-border-top-right-radius); border-bottom-right-radius: var(--jqx-border-bottom-right-radius); width: 100%; padding-right: var(--jqx-editor-label-padding); } .jqx-drop-down-box[drop-down-button-position=none] .jqx-drop-down-button { display: none; } .jqx-drop-down-box:not([drop-down-open-mode=dropDownButton]) .jqx-action-button { border-color: var(--jqx-border); background-color: var(--jqx-surface); color: var(--jqx-surface-color); } .jqx-drop-down-box[drop-down-open-mode=dropDownButton] .jqx-action-button { border-color: var(--jqx-border); background-color: var(--jqx-background); color: var(--jqx-background-color); } .jqx-drop-down-box[drop-down-open-mode=dropDownButton] .jqx-action-button[active] { border-color: var(--jqx-ui-state-border-active); background-color: var(--jqx-ui-state-active); color: var(--jqx-ui-state-color-active); } .jqx-drop-down-box[drop-down-open-mode=dropDownButton] .jqx-drop-down-button { border-color: var(--jqx-border); background-color: var(--jqx-surface); color: var(--jqx-surface-color); border-left-style: solid; border-left-width: var(--jqx-border-width); } .jqx-drop-down-box[drop-down-open-mode=dropDownButton][drop-down-button-position=left]:not([hover]) .jqx-drop-down-button:focus { border-color: var(--jqx-outline); box-shadow: var(--jqx-border-width) 0 0 0 var(--jqx-outline); } .jqx-drop-down-box[drop-down-open-mode=dropDownButton][drop-down-button-position=left]:not([hover]) .jqx-action-button:focus { border-color: var(--jqx-outline); box-shadow: calc(-1 * var(--jqx-border-width)) 0 0 0 var(--jqx-outline); } .jqx-drop-down-box[drop-down-open-mode=dropDownButton][drop-down-button-position=right]:not([hover]) .jqx-action-button:focus { box-shadow: var(--jqx-border-width) 0 0 0 var(--jqx-outline); border-color: var(--jqx-outline); z-index: 1; } .jqx-drop-down-box[drop-down-open-mode=dropDownButton]:not([drop-down-button-position]):not([hover]) .jqx-drop-down-button:focus { border-color: var(--jqx-outline); } .jqx-drop-down-box[drop-down-open-mode=dropDownButton]:not([drop-down-button-position]):not([hover]) .jqx-action-button:focus { box-shadow: var(--jqx-border-width) 0 0 0 var(--jqx-outline); border-color: var(--jqx-outline); z-index: 1; } .jqx-drop-down-box[resizing] { user-select: none; touch-action: none; } .jqx-drop-down-box[readonly] input { user-select: none; -moz-user-select: none; -webkit-user-select: none; } .jqx-drop-down-box[hover] .jqx-drop-down-button { border-color: var(--jqx-ui-state-border-hover); background-color: var(--jqx-ui-state-hover); color: var(--jqx-ui-state-color-hover); } .jqx-drop-down-box[hover]:not([drop-down-open-mode=dropDownButton]) .jqx-action-button { border-color: var(--jqx-ui-state-border-hover); background-color: var(--jqx-ui-state-hover); color: var(--jqx-ui-state-color-hover); } .jqx-drop-down-box[focus]:not([opened]) .jqx-action-button[focus], .jqx-drop-down-box[focus]:not([opened]) .jqx-drop-down-button[focus], .jqx-drop-down-box[focus]:not([opened]) .jqx-action-button, .jqx-drop-down-box[focus]:not([opened]) .jqx-drop-down-button { outline: initial; border-color: var(--jqx-outline); } .jqx-drop-down-box[active] .jqx-action-button, .jqx-drop-down-box[active][focus][drop-down-open-mode=dropDownButton] .jqx-action-button, .jqx-drop-down-box[active][focus][drop-down-open-mode=dropDownButton] .jqx-drop-down-button, .jqx-drop-down-box[active][drop-down-open-mode=dropDownButton] .jqx-drop-down-button:focus { border-color: var(--jqx-ui-state-border-active); background-color: var(--jqx-ui-state-active); color: var(--jqx-ui-state-color-active); } .jqx-drop-down-box[opened] > .jqx-container > .jqx-content > .jqx-buttons-container .jqx-drop-down-button .jqx-drop-down-button-icon:after { transform: rotate(180deg); } .jqx-drop-down-box[opened] > .jqx-container > .jqx-content > .jqx-buttons-container .jqx-drop-down-button[bottom] .jqx-drop-down-button-icon:after, .jqx-drop-down-box[opened] > .jqx-container > .jqx-content > .jqx-buttons-container .jqx-drop-down-button[center-bottom] .jqx-drop-down-button-icon:after { transform: rotate(180deg); } .jqx-drop-down-box[opened] > .jqx-container > .jqx-content > .jqx-buttons-container .jqx-drop-down-button[top] .jqx-drop-down-button-icon:after, .jqx-drop-down-box[opened] > .jqx-container > .jqx-content > .jqx-buttons-container .jqx-drop-down-button[center-top] .jqx-drop-down-button-icon:after { transform: rotate(0deg); } .jqx-drop-down-box[opened] > .jqx-container > .jqx-content > .jqx-buttons-container:not([drop-down-open-mode=dropDownButton]):not(.outlined):not(.underlined) .jqx-action-button, .jqx-drop-down-box[opened] > .jqx-container > .jqx-content > .jqx-buttons-container:not(.outlined):not(.underlined) .jqx-drop-down-button { border-color: var(--jqx-ui-state-border-active); background-color: var(--jqx-ui-state-active); color: var(--jqx-ui-state-color-active); } .jqx-drop-down-box.auto-height { height: auto; min-height: var(--jqx-editor-height); } .jqx-drop-down-box.auto-height > .jqx-container, .jqx-drop-down-box.auto-height.jqx-container { min-height: inherit; } .jqx-drop-down-box.auto-height .jqx-action-button, .jqx-drop-down-box.auto-height .jqx-content { min-height: inherit; } .jqx-drop-down-box.auto-height .jqx-action-button { padding: 3px; } .jqx-drop-down-box.auto-height[label], .jqx-drop-down-box.auto-height[hint] { height: auto; } .jqx-drop-down-box[label][hint] > .jqx-container { display: flex; position: relative; align-items: center; } .jqx-drop-down-box[label] > .jqx-container { align-items: flex-end; } .jqx-drop-down-box[hint] > .jqx-container { align-items: flex-start; } .jqx-drop-down-box[hint] .jqx-hint { opacity: 0; transition: opacity 0.2s cubic-bezier(0.4, 0, 0.6, 1); top: 100%; bottom: initial; } .jqx-drop-down-box[hint][focus] .jqx-hint { opacity: 1; transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .jqx-drop-down-box[label] .jqx-label, .jqx-drop-down-box[hint] .jqx-hint { position: absolute; left: 0; bottom: 100%; font-size: 12px; width: 100%; display: block; padding: var(--jqx-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; } .jqx-drop-down-box[disabled] > .jqx-container { cursor: default; background-color: initial; } .jqx-drop-down-box[disabled] .jqx-drop-down-button { cursor: default; background-color: initial; } .jqx-drop-down-box[disabled][selection-display-mode=tokens] .jqx-action-button > span { cursor: default; } .jqx-drop-down-box.underlined { background-color: transparent; border-width: 0px; border-bottom-width: 1px; background: var(--jqx-background); border-bottom-color: var(--jqx-border); } .jqx-drop-down-box.underlined .jqx-action-button { border-top-color: transparent; border-left-color: transparent; border-right-color: transparent; border-bottom-left-radius: 0; background-color: transparent; color: var(--jqx-background-color); } .jqx-drop-down-box.underlined .jqx-action-button input { border-color: transparent !important; } .jqx-drop-down-box.underlined .jqx-action-button[active] { background-color: var(--jqx-ui-state-active); color: var(--jqx-ui-state-color-active); } .jqx-drop-down-box.underlined .jqx-spin-button { background: var(--jqx-background); border-width: 0px; } .jqx-drop-down-box.underlined .jqx-spin-button[hover] { background: var(--jqx-background); color: var(--jqx-ui-state-active); } .jqx-drop-down-box.underlined .jqx-spin-button[active] { background: var(--jqx-background); color: var(--jqx-ui-state-active); } .jqx-drop-down-box.underlined .jqx-drop-down-button { background: var(--jqx-background); border-width: 0px; border-bottom: 1px solid var(--jqx-border) !important; border-top-color: transparent; border-left-color: transparent; border-right-color: transparent; } .jqx-drop-down-box.underlined .jqx-drop-down-button[hover] { background: var(--jqx-background); color: var(--jqx-ui-state-active); } .jqx-drop-down-box.underlined .jqx-drop-down-button[active] { background-color: var(--jqx-ui-state-active); color: var(--jqx-ui-state-color-active); } .jqx-drop-down-box.underlined .jqx-hint { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: block !important; box-sizing: border-box; padding: var(--jqx-editor-label-padding); color: var(--jqx-background-color); pointer-events: none; font-size: 75%; opacity: 0; transition: color 0.2s, opacity 0.1s, font-size 0.2s, line-height 0.2s, margin-top 0.2s, top 0.2s; margin-top: calc(0px - var(--jqx-font-size)); } .jqx-drop-down-box.underlined .jqx-hint:after { content: ""; position: absolute; left: 0; bottom: -2px; display: block; width: 100%; height: 2px; background-color: var(--jqx-primary); transform-origin: bottom center; transform: scaleX(0); transition: transform 0.2s; } .jqx-drop-down-box.underlined:not([focus]) .jqx-hint { margin-top: 0px; } .jqx-drop-down-box.underlined[focus] input { border-color: transparent !important; } .jqx-drop-down-box.underlined[focus] .jqx-action-button { border-color: transparent !important; } .jqx-drop-down-box.underlined[focus] .jqx-drop-down-button, .jqx-drop-down-box.underlined[focus] .jqx-hint { color: var(--jqx-primary) !important; opacity: 1; border-color: transparent !important; } .jqx-drop-down-box.underlined[focus] .jqx-hint:after { transform: scale(1); } .jqx-drop-down-box.underlined[opened] .jqx-action-button { border-top-color: transparent; border-left-color: transparent; border-right-color: transparent; border-bottom-left-radius: 0; background-color: transparent; color: var(--jqx-background-color); } .jqx-drop-down-box.underlined:not([opened]):not([hover]) .jqx-drop-down-button { background-color: transparent; color: var(--jqx-background-color); } .jqx-drop-down-box.underlined:not([opened]):not([hover]) .jqx-drop-down-button:not([hover]) { border-bottom-left-radius: 0; } .jqx-drop-down-box.underlined:not([opened]):not([hover]) .jqx-drop-down-button:not([active]):not([hover]) { border-radius: initial; } .jqx-drop-down-box.underlined:not([opened]) .jqx-action-button:not([active]):not([hover]) { border-radius: initial; } .jqx-drop-down-box.underlined[hover]:not([drop-down-open-mode=dropDownButton]):not([opened]) .jqx-action-button { border-bottom-left-radius: 0; } .jqx-drop-down-box.underlined[hover]:not([drop-down-open-mode=dropDownButton]):not([opened]) .jqx-action-button:not([active]) { background-color: transparent; } .jqx-drop-down-box.underlined[hover]:not([opened]) .jqx-action-button, .jqx-drop-down-box.underlined[hover]:not([opened]):not([drop-down-open-mode=dropDownButton]) .jqx-action-button:not([active]) { border-top-color: transparent; border-left-color: transparent; border-right-color: transparent; } .jqx-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]) .jqx-action-button:focus { box-shadow: none; z-index: initial; } .jqx-drop-down-box.underlined[drop-down-open-mode=dropDownButton][drop-down-button-position=left]:not([hover]) .jqx-drop-down-button:focus { box-shadow: none; } .jqx-drop-down-box.underlined[drop-down-open-mode=dropDownButton][hover]:not([opened]) .jqx-action-button[hover] { border-top-color: transparent; border-left-color: transparent; border-right-color: transparent; } .jqx-drop-down-box.underlined.jqx-invalid .jqx-drop-down-button { border-bottom-color: rgba(var(--jqx-error-rgb), 0.5) !important; } .jqx-drop-down-box.outlined { background-color: transparent; padding-top: 6px; height: auto; min-height: 0; border: none; background: transparent; } .jqx-drop-down-box.outlined > .jqx-container > .jqx-content { padding: 4px 3px 4px; border: 1px solid var(--jqx-border); height: auto; background: var(--jqx-background); border-radius: var(--jqx-border-radius); z-index: 5; } .jqx-drop-down-box.outlined .jqx-action-button { border: none; background: var(--jqx-background) !important; border-color: var(--jqx-border) !important; color: var(--jqx-background-color) !important; } .jqx-drop-down-box.outlined .jqx-action-button input { padding: 0; border: none !important; z-index: initial; } .jqx-drop-down-box.outlined .jqx-spin-button { background: var(--jqx-background); border-width: 0px; } .jqx-drop-down-box.outlined .jqx-spin-button[hover] { background: var(--jqx-background); color: var(--jqx-ui-state-active); } .jqx-drop-down-box.outlined .jqx-spin-button[active] { background: var(--jqx-background); color: var(--jqx-ui-state-active); } .jqx-drop-down-box.outlined .jqx-drop-down-button { background: var(--jqx-background); border-width: 0px; padding: 8px 0px; background: var(--jqx-background) !important; border-color: var(--jqx-border) !important; color: var(--jqx-background-color) !important; } .jqx-drop-down-box.outlined .jqx-drop-down-button.jqx-calendar-button[hover] { background: var(--jqx-background); color: var(--jqx-ui-state-active); } .jqx-drop-down-box.outlined .jqx-drop-down-button.jqx-calendar-button[active] { background: var(--jqx-background); color: var(--jqx-ui-state-active); } .jqx-drop-down-box.outlined.jqx-element-init .jqx-hint { visibility: hidden; display: none !important; } .jqx-drop-down-box.outlined:not([focus])[hint] .jqx-hint { font-size: var(--jqx-font-size); line-height: 48px; opacity: 0; } .jqx-drop-down-box.outlined[hint] .jqx-hint { position: absolute; top: 0; left: 0; display: flex !important; border-color: var(--jqx-border) !important; width: 100%; max-height: 100%; color: var(--jqx-background-color); font-size: 75%; line-height: 15px; cursor: text; margin-top: -6px; z-index: 10; padding: 0; transition: color 0.2s, font-size 0.2s, opacity 0.1s, font-size 0.2s, line-height 0.2s; } .jqx-drop-down-box.outlined[hint] .jqx-hint:before, .jqx-drop-down-box.outlined[hint] .jqx-hint:after { content: ""; display: block; box-sizing: border-box; margin-top: 6px; border-top: solid 1px; border-top-color: var(--jqx-border) !important; min-width: 10px; height: 8px; pointer-events: none; box-shadow: inset 0 1px transparent; transition: border-color 0.2s, box-shadow 0.2s; } .jqx-drop-down-box.outlined[hint] .jqx-hint:before { margin-right: 4px; border-left: solid 1px transparent; border-radius: 4px 0; } .jqx-drop-down-box.outlined[hint] .jqx-hint:after { flex-grow: 1; margin-left: 4px; border-right: solid 1px transparent; border-radius: 0 4px; } .jqx-drop-down-box.outlined[focus] { background-color: transparent; } .jqx-drop-down-box.outlined[focus] > .jqx-container > .jqx-content { border-color: var(--jqx-primary); } .jqx-drop-down-box.outlined[focus] .jqx-drop-down-button { color: var(--jqx-ui-state-active) !important; } .jqx-drop-down-box.outlined[focus][hint] > .jqx-container > .jqx-content { border-top-color: transparent !important; } .jqx-drop-down-box.outlined[focus][hint] .jqx-hint { color: var(--jqx-primary); opacity: 1; } .jqx-drop-down-box.outlined[focus][hint] .jqx-hint:before, .jqx-drop-down-box.outlined[focus][hint] .jqx-hint:after { border-top-color: var(--jqx-primary) !important; } .jqx-drop-down-box.outlined[hover]:not([opened]):not([drop-down-open-mode=dropDownButton]) .jqx-action-button:not([active]) { background-color: transparent; } .jqx-drop-down-box.outlined:not([opened]) .jqx-action-button:not([active]), .jqx-drop-down-box.outlined:not([opened]) .jqx-drop-down-button { background-color: transparent; } .jqx-drop-down-box.outlined[drop-down-open-mode=dropDownButton]:not([hover]) .jqx-action-button:not([active]) { background-color: transparent; } .jqx-drop-down-box.outlined.jqx-invalid > .jqx-container > .jqx-content { border-color: rgba(var(--jqx-error-rgb), 0.5); } .jqx-drop-down-box[placeholder=""][dropDownButtonPosition=none] .jqx-drop-down-button, .jqx-drop-down-box:not([placeholder])[dropDownButtonPosition=none] .jqx-drop-down-button { border-left-width: var(--jqx-border-width); border-left-style: solid; border-top-left-radius: 0px; border-bottom-left-radius: 0px; border-top-right-radius: var(--jqx-border-top-right-radius); border-bottom-right-radius: var(--jqx-border-bottom-right-radius); } .jqx-drop-down-box[placeholder=""]:not([opened])[dropDownButtonPosition=none] .jqx-drop-down-button:not([focus]), .jqx-drop-down-box:not([placeholder]):not([opened])[dropDownButtonPosition=none] .jqx-drop-down-button:not([focus]) { border-color: var(--jqx-border); } .jqx-drop-down-box:not([animation=none]) .jqx-drop-down-button .jqx-drop-down-button-icon:after { transition: transform 0.2s; } .jqx-drop-down-box[drop-down-position=overlay-center] .jqx-drop-down-button .jqx-drop-down-button-icon:after { content: var(--jqx-icon-minus); } .jqx-drop-down-box.jqx-invalid:not([drop-down-open-mode=dropDownButton]) .jqx-action-button { border-bottom-color: rgba(var(--jqx-error-rgb), 0.5) !important; } .jqx-drop-down-box[right-to-left] { direction: rtl; } .jqx-drop-down-box[right-to-left] .jqx-label, .jqx-drop-down-box[right-to-left] .jqx-hint { direction: rtl; } .jqx-drop-down-box[right-to-left] .jqx-drop-down-button:focus { border-color: var(--jqx-outline); } .jqx-drop-down-box[right-to-left]:not([hover]) .jqx-action-button[focus], .jqx-drop-down-box[right-to-left]:not([hover]) .jqx-drop-down-button[focus] { border-color: var(--jqx-outline); } .jqx-drop-down-box[right-to-left][drop-down-button-position=left] .jqx-action-button { flex-direction: row; } .jqx-drop-down-box[right-to-left][drop-down-button-position=right] > .jqx-container > .jqx-content { flex-direction: row-reverse; } .jqx-drop-down-box[right-to-left][drop-down-button-position=left] .jqx-action-button, .jqx-drop-down-box[right-to-left]:not([drop-down-button-position]) .jqx-action-button { padding: 0 var(--jqx-editor-label-padding) 0 0; border-right: var(--jqx-border-width) solid var(--jqx-border); border-top-left-radius: initial; border-top-right-radius: var(--jqx-border-top-right-radius); border-bottom-left-radius: initial; border-bottom-right-radius: var(--jqx-border-bottom-right-radius); } .jqx-drop-down-box[right-to-left][drop-down-button-position=left] .jqx-drop-down-button, .jqx-drop-down-box[right-to-left]:not([drop-down-button-position]) .jqx-drop-down-button { border-left: var(--jqx-border-width) solid var(--jqx-border); border-top-right-radius: initial; border-bottom-right-radius: initial; border-top-left-radius: var(--jqx-border-top-left-radius); border-bottom-left-radius: var(--jqx-border-bottom-left-radius); } .jqx-drop-down-box[right-to-left][drop-down-button-position=left] > .jqx-container > .jqx-content, .jqx-drop-down-box[right-to-left]:not([drop-down-button-position]) > .jqx-container > .jqx-content { flex-direction: row; } .jqx-drop-down-box[right-to-left]:not([drop-down-open-mode=dropDownButton])[drop-down-button-position=left] .jqx-action-button, .jqx-drop-down-box[right-to-left]:not([drop-down-button-position]) .jqx-action-button { border-left: initial; } .jqx-drop-down-box[right-to-left]:not([drop-down-open-mode=dropDownButton]):not([drop-down-button-position]) .jqx-drop-down-button, .jqx-drop-down-box[right-to-left][drop-down-button-position=left] .jqx-drop-down-button { border-right: initial; } .jqx-drop-down-box[right-to-left][opened] .jqx-drop-down-button, .jqx-drop-down-box[right-to-left][opened] .jqx-action-button { border-color: var(--jqx-border-active); } .jqx-drop-down-box[right-to-left][drop-down-open-mode=dropDownButton][drop-down-button-position=right]:not([hover]) .jqx-action-button:focus, .jqx-drop-down-box[right-to-left][drop-down-open-mode=dropDownButton]:not([drop-down-button-position]):not([hover]) .jqx-action-button:focus { box-shadow: calc(-1 * var(--jqx-border-width)) 0 0 0 var(--jqx-outline); } .jqx-drop-down.jqx-drop-down-container { box-shadow: var(--jqx-elevation-8); border-color: var(--jqx-border); font-size: var(--jqx-font-size); font-family: var(--jqx-font-family); } .jqx-drop-down.jqx-drop-down-container jqx-list-box:focus { border-color: var(--jqx-outline); } .jqx-drop-down.jqx-drop-down-container .jqx-drop-down-resize-bar { position: relative; width: 100%; margin-top: 2.5px; height: calc(var(--jqx-editor-drop-down-resize-bar-height) - 2.5px); touch-action: none; } .jqx-drop-down.jqx-drop-down-container.jqx-visibility-hidden { transform: scale(0); } .jqx-drop-down.jqx-drop-down-container.jqx-drop-down-repositioned.jqx-visibility-hidden { top: 0; left: 0; } .jqx-drop-down.jqx-drop-down-container { background-color: var(--jqx-background); box-sizing: border-box; outline: none; border-width: var(--jqx-border-width); border-style: solid; border-color: var(--jqx-border); display: flex; flex-direction: column; height: var(--jqx-editor-drop-down-height); max-height: var(--jqx-editor-drop-down-max-height); min-height: var(--jqx-editor-drop-down-min-height); width: var(--jqx-editor-drop-down-width); max-width: var(--jqx-editor-drop-down-max-width); min-width: var(--jqx-editor-drop-down-min-width); font-size: var(--jqx-font-size); font-family: var(--jqx-font-family); margin: calc(var(--jqx-editor-drop-down-vertical-offset) + var(--jqx-editor-drop-down-padding-size)) 0px; padding: var(--jqx-editor-drop-down-padding-size) 0 var(--jqx-editor-drop-down-padding-size) 0 !important; } .jqx-drop-down.jqx-drop-down-container.jqx-visibility-hidden.not-in-view { left: -9999px; top: -9999px; transition: none; } .jqx-drop-down.jqx-drop-down-container.jqx-drop-down-repositioned { background-color: var(--jqx-background); box-sizing: border-box; outline: none; border-width: var(--jqx-border-width); border-style: solid; border-color: var(--jqx-border); display: flex; flex-direction: column; height: var(--jqx-editor-drop-down-height); max-height: var(--jqx-editor-drop-down-max-height); min-height: var(--jqx-editor-drop-down-min-height); width: var(--jqx-editor-drop-down-width); max-width: var(--jqx-editor-drop-down-max-width); min-width: var(--jqx-editor-drop-down-min-width); font-size: var(--jqx-font-size); font-family: var(--jqx-font-family); margin: calc(var(--jqx-editor-drop-down-vertical-offset) + var(--jqx-editor-drop-down-padding-size)) 0px; padding: var(--jqx-editor-drop-down-padding-size) 0 var(--jqx-editor-drop-down-padding-size) 0 !important; } .jqx-drop-down.jqx-drop-down-container.jqx-drop-down-repositioned.jqx-visibility-hidden.not-in-view { left: -9999px; top: -9999px; transition: none; } .jqx-drop-down.jqx-drop-down-container.jqx-drop-down-repositioned[top], .jqx-drop-down.jqx-drop-down-container.jqx-drop-down-repositioned[center-top] { margin: calc(-1 * (var(--jqx-editor-drop-down-vertical-offset) + 3px)) 0px; } .jqx-drop-down.jqx-date-time-drop-down { width: var(--jqx-editor-drop-down-width); height: var(--jqx-editor-drop-down-height); --jqx-editor-drop-down-padding-size: 0px; } .jqx-drop-down.jqx-date-time-drop-down.jqx-drop-down-repositioned { width: var(--jqx-editor-drop-down-width); height: var(--jqx-editor-drop-down-height); padding: initial !important; background-color: var(--jqx-background); box-sizing: border-box; outline: none; border-width: var(--jqx-border-width); border-style: solid; border-color: var(--jqx-border); display: flex; flex-direction: column; height: var(--jqx-editor-drop-down-height); max-height: var(--jqx-editor-drop-down-max-height); min-height: var(--jqx-editor-drop-down-min-height); width: var(--jqx-editor-drop-down-width); max-width: var(--jqx-editor-drop-down-max-width); min-width: var(--jqx-editor-drop-down-min-width); font-size: var(--jqx-font-size); font-family: var(--jqx-font-family); margin: calc(var(--jqx-editor-drop-down-vertical-offset) + var(--jqx-editor-drop-down-padding-size)) 0px; padding: var(--jqx-editor-drop-down-padding-size) 0 var(--jqx-editor-drop-down-padding-size) 0 !important; } .jqx-drop-down.jqx-date-time-drop-down[drop-down-display-mode=calendar] { height: calc(var(--jqx-editor-drop-down-height) - var(--jqx-calendar-title-height)) !important; } .jqx-drop-down.jqx-drop-down-color-picker.jqx-drop-down-repositioned { max-height: calc(var(--jqx-editor-drop-down-max-height) + 50px); } .jqx-drop-down[top] .jqx-drop-down-resize-bar { margin-top: 0; margin-bottom: 2.5px; } .jqx-drop-down[top].jqx-drop-down-container.jqx-drop-down-repositioned, .jqx-drop-down[top].jqx-drop-down-container.jqx-drop-down-repositioned.jqx-visibility-hidden { top: initial; bottom: calc(100% - var(--jqx-border-width)); flex-direction: column-reverse; } .jqx-drop-down[overlay-bottom], .jqx-drop-down[overlay-center], .jqx-drop-down[overlay-top] { margin: unset; } .jqx-drop-down:not([resize-mode=none]) jqx-list-box { position: relative; width: 100%; height: calc(100% - var(--jqx-editor-drop-down-resize-bar-height)); border: none; } .jqx-drop-down:not([resize-mode=none]) .jqx-drop-down-resize-bar { border-top: 1px solid var(--jqx-border); } .jqx-drop-down:not([resize-mode=none])[top] .jqx-drop-down-resize-bar { border-top: initial; border-bottom: 1px solid var(--jqx-border); } .jqx-drop-down[resize-mode][top] .jqx-drop-down-resize-bar > div { top: calc(50% - 1px); /* Including the BorderBottom */ } .jqx-drop-down[resize-mode=none] jqx-list-box { width: 100%; height: 100%; position: relative; border: none; } .jqx-drop-down[resize-mode=none] .jqx-drop-down-resize-bar { display: none; cursor: default; } .jqx-drop-down[resize-mode=none] .jqx-drop-down-resize-bar > div { display: none; } .jqx-drop-down[resize-mode=vertical] .jqx-drop-down-resize-bar > div, .jqx-drop-down[resize-mode=both] .jqx-drop-down-resize-bar > div { display: initial; position: absolute; width: 5px; height: 5px; left: 50%; /*top: 50%;*/ top: calc(50% + 1px); /* Including the BorderTop */ transform: translate(-50%, -50%); border: 1px solid var(--jqx-border); border-radius: 50%; pointer-events: none; } .jqx-drop-down[resize-mode=vertical] .jqx-drop-down-resize-bar > div:after, .jqx-drop-down[resize-mode=vertical] .jqx-drop-down-resize-bar > div:before, .jqx-drop-down[resize-mode=both] .jqx-drop-down-resize-bar > div:after, .jqx-drop-down[resize-mode=both] .jqx-drop-down-resize-bar > div:before { position: absolute; top: 50%; transform: translate(-50%, -50%); content: ""; width: 100%; height: 100%; border: 1px solid var(--jqx-border); border-radius: 50%; pointer-events: none; } .jqx-drop-down[resize-mode=vertical] .jqx-drop-down-resize-bar > div:after, .jqx-drop-down[resize-mode=both] .jqx-drop-down-resize-bar > div:after { left: 500%; } .jqx-drop-down[resize-mode=vertical] .jqx-drop-down-resize-bar > div:before, .jqx-drop-down[resize-mode=both] .jqx-drop-down-resize-bar > div:before { left: -400%; } .jqx-drop-down[resize-mode=vertical].jqx-drop-down-container.jqx-drop-down-repositioned .jqx-drop-down-resize-bar > div, .jqx-drop-down[resize-mode=both].jqx-drop-down-container.jqx-drop-down-repositioned .jqx-drop-down-resize-bar > div { width: 3px; height: 3px; } .jqx-drop-down[resize-mode=horizontal][resize-indicator] .jqx-drop-down-resize-bar:before, .jqx-drop-down[resize-mode=both][resize-indicator] .jqx-drop-down-resize-bar:before { width: 8px; height: 5px; font-family: var(--jqx-font-family-icon); content: var(--jqx-icon-resize-horizontal); position: absolute; top: calc(100% - 8px); left: calc(100% - 8px); transform: rotate(-45deg); font-size: 10px; cursor: se-resize; } .jqx-drop-down[resize-mode=horizontal][resize-indicator] .jqx-drop-down-resize-bar:after, .jqx-drop-down[resize-mode=both][resize-indicator] .jqx-drop-down-resize-bar:after { width: 8px; height: 12px; font-family: var(--jqx-font-family-icon); content: var(--jqx-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; } .jqx-drop-down[resize-mode=horizontal][top] .jqx-drop-down-resize-bar:before, .jqx-drop-down[resize-mode=both][top] .jqx-drop-down-resize-bar:before { transform: rotate(45deg); top: calc(100% - 13px); left: calc(100% - 4px); } .jqx-drop-down[resize-mode=vertical] .jqx-drop-down-resize-bar { cursor: n-resize; } .jqx-drop-down[resize-mode=horizontal] .jqx-drop-down-resize-bar { cursor: e-resize; } .jqx-drop-down[resize-mode=horizontal] .jqx-drop-down-resize-bar > div { display: none; } .jqx-drop-down[resize-mode=both] .jqx-drop-down-resize-bar { cursor: nwse-resize; } .jqx-drop-down[resize-mode=both][top] .jqx-drop-down-resize-bar { cursor: sw-resize; } .jqx-drop-down-container.jqx-drop-down-repositioned { background-color: var(--jqx-background); box-sizing: border-box; outline: none; border-width: var(--jqx-border-width); border-style: solid; border-color: var(--jqx-border); display: flex; flex-direction: column; height: var(--jqx-editor-drop-down-height); max-height: var(--jqx-editor-drop-down-max-height); min-height: var(--jqx-editor-drop-down-min-height); width: var(--jqx-editor-drop-down-width); max-width: var(--jqx-editor-drop-down-max-width); min-width: var(--jqx-editor-drop-down-min-width); font-size: var(--jqx-font-size); font-family: var(--jqx-font-family); margin: calc(var(--jqx-editor-drop-down-vertical-offset) + var(--jqx-editor-drop-down-padding-size)) 0px; padding: var(--jqx-editor-drop-down-padding-size) 0 var(--jqx-editor-drop-down-padding-size) 0 !important; } .jqx-drop-down-container.jqx-drop-down-repositioned.jqx-visibility-hidden.not-in-view { left: -9999px; top: -9999px; transition: none; } .jqx-drop-down-container.jqx-drop-down-repositioned:focus { border-color: var(--jqx-border); } .jqx-drop-down-container.jqx-drop-down-repositioned[overlay-bottom], .jqx-drop-down-container.jqx-drop-down-repositioned[overlay-center], .jqx-drop-down-container.jqx-drop-down-repositioned[overlay-top] { margin: unset; } .jqx-drop-down-container.jqx-drop-down-repositioned[overlay-bottom]:not([animation=none]), .jqx-drop-down-container.jqx-drop-down-repositioned[overlay-center]:not([animation=none]), .jqx-drop-down-container.jqx-drop-down-repositioned[overlay-top]:not([animation=none]) { animation: jqx-drop-down-list-jqx-animate-opening 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0ms; -webkit-transform-origin: center; transform-origin: center; } .jqx-drop-down-container.jqx-drop-down-repositioned[overlay-bottom]:not([animation=none]).jqx-visibility-hidden, .jqx-drop-down-container.jqx-drop-down-repositioned[overlay-center]:not([animation=none]).jqx-visibility-hidden, .jqx-drop-down-container.jqx-drop-down-repositioned[overlay-top]:not([animation=none]).jqx-visibility-hidden { animation: jqx-drop-down-list-jqx-animate-closing 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0ms; -webkit-transform-origin: center; transform-origin: center; } .jqx-drop-down-container.jqx-drop-down-repositioned[top], .jqx-drop-down-container.jqx-drop-down-repositioned[center-top] { margin: calc(-1 * (var(--jqx-editor-drop-down-vertical-offset) + 3px)) 0px; } .jqx-drop-down-container.jqx-drop-down-repositioned[top]:not([animation=none]), .jqx-drop-down-container.jqx-drop-down-repositioned[center-top]:not([animation=none]) { animation: jqx-drop-down-list-jqx-animate-opening 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0ms; -webkit-transform-origin: bottom; transform-origin: bottom; } .jqx-drop-down-container.jqx-drop-down-repositioned[top]:not([animation=none]).jqx-visibility-hidden, .jqx-drop-down-container.jqx-drop-down-repositioned[center-top]:not([animation=none]).jqx-visibility-hidden { animation: jqx-drop-down-list-jqx-animate-closing 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0ms; -webkit-transform-origin: bottom; transform-origin: bottom; } .jqx-drop-down-container.jqx-drop-down-repositioned[bottom]:not([animation=none]), .jqx-drop-down-container.jqx-drop-down-repositioned[center-bottom]:not([animation=none]) { animation: jqx-drop-down-list-jqx-animate-opening 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0ms; -webkit-transform-origin: top; transform-origin: top; } .jqx-drop-down-container.jqx-drop-down-repositioned[bottom]:not([animation=none]).jqx-visibility-hidden, .jqx-drop-down-container.jqx-drop-down-repositioned[center-bottom]:not([animation=none]).jqx-visibility-hidden { animation: jqx-drop-down-list-jqx-animate-closing 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0ms; -webkit-transform-origin: top; transform-origin: top; } .jqx-drop-down-container.jqx-drop-down-repositioned:not([animation=none]).jqx-visibility-hidden { transition: animation, visibility 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0ms; } .jqx-drop-down-container[top].jqx-drop-down-container.jqx-drop-down-repositioned { bottom: initial; } .jqx-drop-down-container[top].jqx-drop-down-container.jqx-drop-down-repositioned.jqx-visibility-hidden { bottom: calc(100% - var(--jqx-border-width)); } .jqx-path .jqx-drop-down, .jqx-color-picker .jqx-drop-down, .jqx-multi-split-button .jqx-drop-down, .jqx-drop-down-list .jqx-drop-down, .jqx-combo-box .jqx-drop-down, .jqx-text-box .jqx-drop-down, .jqx-drop-down-button .jqx-drop-down, .jqx-date-time-picker .jqx-drop-down { background-color: var(--jqx-background); box-sizing: border-box; outline: none; border-width: var(--jqx-border-width); border-style: solid; border-color: var(--jqx-border); display: flex; flex-direction: column; height: var(--jqx-editor-drop-down-height); max-height: var(--jqx-editor-drop-down-max-height); min-height: var(--jqx-editor-drop-down-min-height); width: var(--jqx-editor-drop-down-width); max-width: var(--jqx-editor-drop-down-max-width); min-width: var(--jqx-editor-drop-down-min-width); font-size: var(--jqx-font-size); font-family: var(--jqx-font-family); margin: calc(var(--jqx-editor-drop-down-vertical-offset) + var(--jqx-editor-drop-down-padding-size)) 0px; padding: var(--jqx-editor-drop-down-padding-size) 0 var(--jqx-editor-drop-down-padding-size) 0 !important; top: calc(100% - var(--jqx-border-width)); } .jqx-path .jqx-drop-down.jqx-visibility-hidden, .jqx-color-picker .jqx-drop-down.jqx-visibility-hidden, .jqx-multi-split-button .jqx-drop-down.jqx-visibility-hidden, .jqx-drop-down-list .jqx-drop-down.jqx-visibility-hidden, .jqx-combo-box .jqx-drop-down.jqx-visibility-hidden, .jqx-text-box .jqx-drop-down.jqx-visibility-hidden, .jqx-drop-down-button .jqx-drop-down.jqx-visibility-hidden, .jqx-date-time-picker .jqx-drop-down.jqx-visibility-hidden { top: calc(100% - var(--jqx-border-width)); } .jqx-path .jqx-drop-down.jqx-visibility-hidden.not-in-view, .jqx-color-picker .jqx-drop-down.jqx-visibility-hidden.not-in-view, .jqx-multi-split-button .jqx-drop-down.jqx-visibility-hidden.not-in-view, .jqx-drop-down-list .jqx-drop-down.jqx-visibility-hidden.not-in-view, .jqx-combo-box .jqx-drop-down.jqx-visibility-hidden.not-in-view, .jqx-text-box .jqx-drop-down.jqx-visibility-hidden.not-in-view, .jqx-drop-down-button .jqx-drop-down.jqx-visibility-hidden.not-in-view, .jqx-date-time-picker .jqx-drop-down.jqx-visibility-hidden.not-in-view { left: -9999px; top: -9999px; transition: none; } .jqx-path .jqx-drop-down[overlay-bottom], .jqx-path .jqx-drop-down[overlay-bottom].jqx-visibility-hidden, .jqx-color-picker .jqx-drop-down[overlay-bottom], .jqx-color-picker .jqx-drop-down[overlay-bottom].jqx-visibility-hidden, .jqx-multi-split-button .jqx-drop-down[overlay-bottom], .jqx-multi-split-button .jqx-drop-down[overlay-bottom].jqx-visibility-hidden, .jqx-drop-down-list .jqx-drop-down[overlay-bottom], .jqx-drop-down-list .jqx-drop-down[overlay-bottom].jqx-visibility-hidden, .jqx-combo-box .jqx-drop-down[overlay-bottom], .jqx-combo-box .jqx-drop-down[overlay-bottom].jqx-visibility-hidden, .jqx-text-box .jqx-drop-down[overlay-bottom], .jqx-text-box .jqx-drop-down[overlay-bottom].jqx-visibility-hidden, .jqx-drop-down-button .jqx-drop-down[overlay-bottom], .jqx-drop-down-button .jqx-drop-down[overlay-bottom].jqx-visibility-hidden, .jqx-date-time-picker .jqx-drop-down[overlay-bottom], .jqx-date-time-picker .jqx-drop-down[overlay-bottom].jqx-visibility-hidden { border-color: var(--jqx-border); border-width: var(--jqx-border-width); border-style: solid; top: 0; } .jqx-path .jqx-drop-down[overlay-center], .jqx-path .jqx-drop-down[overlay-center].jqx-visibility-hidden, .jqx-color-picker .jqx-drop-down[overlay-center], .jqx-color-picker .jqx-drop-down[overlay-center].jqx-visibility-hidden, .jqx-multi-split-button .jqx-drop-down[overlay-center], .jqx-multi-split-button .jqx-drop-down[overlay-center].jqx-visibility-hidden, .jqx-drop-down-list .jqx-drop-down[overlay-center], .jqx-drop-down-list .jqx-drop-down[overlay-center].jqx-visibility-hidden, .jqx-combo-box .jqx-drop-down[overlay-center], .jqx-combo-box .jqx-drop-down[overlay-center].jqx-visibility-hidden, .jqx-text-box .jqx-drop-down[overlay-center], .jqx-text-box .jqx-drop-down[overlay-center].jqx-visibility-hidden, .jqx-drop-down-button .jqx-drop-down[overlay-center], .jqx-drop-down-button .jqx-drop-down[overlay-center].jqx-visibility-hidden, .jqx-date-time-picker .jqx-drop-down[overlay-center], .jqx-date-time-picker .jqx-drop-down[overlay-center].jqx-visibility-hidden { border-color: var(--jqx-border); border-width: var(--jqx-border-width); border-style: solid; top: 50%; transform: translateY(-50%); } .jqx-path .jqx-drop-down[overlay-top], .jqx-path .jqx-drop-down[overlay-top].jqx-visibility-hidden, .jqx-color-picker .jqx-drop-down[overlay-top], .jqx-color-picker .jqx-drop-down[overlay-top].jqx-visibility-hidden, .jqx-multi-split-button .jqx-drop-down[overlay-top], .jqx-multi-split-button .jqx-drop-down[overlay-top].jqx-visibility-hidden, .jqx-drop-down-list .jqx-drop-down[overlay-top], .jqx-drop-down-list .jqx-drop-down[overlay-top].jqx-visibility-hidden, .jqx-combo-box .jqx-drop-down[overlay-top], .jqx-combo-box .jqx-drop-down[overlay-top].jqx-visibility-hidden, .jqx-text-box .jqx-drop-down[overlay-top], .jqx-text-box .jqx-drop-down[overlay-top].jqx-visibility-hidden, .jqx-drop-down-button .jqx-drop-down[overlay-top], .jqx-drop-down-button .jqx-drop-down[overlay-top].jqx-visibility-hidden, .jqx-date-time-picker .jqx-drop-down[overlay-top], .jqx-date-time-picker .jqx-drop-down[overlay-top].jqx-visibility-hidden { border-color: var(--jqx-border); border-width: var(--jqx-border-width); border-style: solid; top: initial; bottom: 0; } .jqx-path .jqx-drop-down[top], .jqx-color-picker .jqx-drop-down[top], .jqx-multi-split-button .jqx-drop-down[top], .jqx-drop-down-list .jqx-drop-down[top], .jqx-combo-box .jqx-drop-down[top], .jqx-text-box .jqx-drop-down[top], .jqx-drop-down-button .jqx-drop-down[top], .jqx-date-time-picker .jqx-drop-down[top] { top: initial; bottom: calc(100% - var(--jqx-border-width)); flex-direction: column-reverse; } .jqx-path .jqx-drop-down[top].jqx-visibility-hidden, .jqx-color-picker .jqx-drop-down[top].jqx-visibility-hidden, .jqx-multi-split-button .jqx-drop-down[top].jqx-visibility-hidden, .jqx-drop-down-list .jqx-drop-down[top].jqx-visibility-hidden, .jqx-combo-box .jqx-drop-down[top].jqx-visibility-hidden, .jqx-text-box .jqx-drop-down[top].jqx-visibility-hidden, .jqx-drop-down-button .jqx-drop-down[top].jqx-visibility-hidden, .jqx-date-time-picker .jqx-drop-down[top].jqx-visibility-hidden { top: initial; bottom: calc(100% - var(--jqx-border-width)); flex-direction: column-reverse; } .jqx-path .jqx-drop-down[bottom], .jqx-color-picker .jqx-drop-down[bottom], .jqx-multi-split-button .jqx-drop-down[bottom], .jqx-drop-down-list .jqx-drop-down[bottom], .jqx-combo-box .jqx-drop-down[bottom], .jqx-text-box .jqx-drop-down[bottom], .jqx-drop-down-button .jqx-drop-down[bottom], .jqx-date-time-picker .jqx-drop-down[bottom] { cursor: default; left: 0; box-sizing: border-box; font-size: inherit; padding: var(--jqx-editor-drop-down-padding-size); margin: calc(var(--jqx-editor-drop-down-vertical-offset) + var(--jqx-editor-drop-down-padding-size)) 0px; background-color: var(--jqx-background); border-width: var(--jqx-border-width); border-style: solid; border-color: var(--jqx-border); box-shadow: var(--jqx-elevation-8); /*border-top: initial;*/ display: flex; flex-direction: column; padding-left: 0px; top: calc(100% - var(--jqx-border-width)); } .jqx-path .jqx-drop-down[bottom].jqx-visibility-hidden, .jqx-color-picker .jqx-drop-down[bottom].jqx-visibility-hidden, .jqx-multi-split-button .jqx-drop-down[bottom].jqx-visibility-hidden, .jqx-drop-down-list .jqx-drop-down[bottom].jqx-visibility-hidden, .jqx-combo-box .jqx-drop-down[bottom].jqx-visibility-hidden, .jqx-text-box .jqx-drop-down[bottom].jqx-visibility-hidden, .jqx-drop-down-button .jqx-drop-down[bottom].jqx-visibility-hidden, .jqx-date-time-picker .jqx-drop-down[bottom].jqx-visibility-hidden { top: calc(100% - var(--jqx-border-width)); } .jqx-path .jqx-drop-down[center-bottom], .jqx-path .jqx-drop-down[center-bottom].jqx-visibility-hidden, .jqx-color-picker .jqx-drop-down[center-bottom], .jqx-color-picker .jqx-drop-down[center-bottom].jqx-visibility-hidden, .jqx-multi-split-button .jqx-drop-down[center-bottom], .jqx-multi-split-button .jqx-drop-down[center-bottom].jqx-visibility-hidden, .jqx-drop-down-list .jqx-drop-down[center-bottom], .jqx-drop-down-list .jqx-drop-down[center-bottom].jqx-visibility-hidden, .jqx-combo-box .jqx-drop-down[center-bottom], .jqx-combo-box .jqx-drop-down[center-bottom].jqx-visibility-hidden, .jqx-text-box .jqx-drop-down[center-bottom], .jqx-text-box .jqx-drop-down[center-bottom].jqx-visibility-hidden, .jqx-drop-down-button .jqx-drop-down[center-bottom], .jqx-drop-down-button .jqx-drop-down[center-bottom].jqx-visibility-hidden, .jqx-date-time-picker .jqx-drop-down[center-bottom], .jqx-date-time-picker .jqx-drop-down[center-bottom].jqx-visibility-hidden { left: 50%; border: var(--jqx-border-width) solid var(--jqx-border); top: calc(100% - var(--jqx-border-width)); } .jqx-path .jqx-drop-down[center-top], .jqx-path .jqx-drop-down[center-top].jqx-visibility-hidden, .jqx-color-picker .jqx-drop-down[center-top], .jqx-color-picker .jqx-drop-down[center-top].jqx-visibility-hidden, .jqx-multi-split-button .jqx-drop-down[center-top], .jqx-multi-split-button .jqx-drop-down[center-top].jqx-visibility-hidden, .jqx-drop-down-list .jqx-drop-down[center-top], .jqx-drop-down-list .jqx-drop-down[center-top].jqx-visibility-hidden, .jqx-combo-box .jqx-drop-down[center-top], .jqx-combo-box .jqx-drop-down[center-top].jqx-visibility-hidden, .jqx-text-box .jqx-drop-down[center-top], .jqx-text-box .jqx-drop-down[center-top].jqx-visibility-hidden, .jqx-drop-down-button .jqx-drop-down[center-top], .jqx-drop-down-button .jqx-drop-down[center-top].jqx-visibility-hidden, .jqx-date-time-picker .jqx-drop-down[center-top], .jqx-date-time-picker .jqx-drop-down[center-top].jqx-visibility-hidden { left: 50%; border: var(--jqx-border-width) solid var(--jqx-border); top: initial; bottom: calc(100% - var(--jqx-border-width)); } .jqx-path:not([animation=none]) .jqx-drop-down, .jqx-color-picker:not([animation=none]) .jqx-drop-down, .jqx-multi-split-button:not([animation=none]) .jqx-drop-down, .jqx-drop-down-list:not([animation=none]) .jqx-drop-down, .jqx-combo-box:not([animation=none]) .jqx-drop-down, .jqx-text-box:not([animation=none]) .jqx-drop-down, .jqx-drop-down-button:not([animation=none]) .jqx-drop-down, .jqx-date-time-picker:not([animation=none]) .jqx-drop-down { animation: jqx-drop-down-list-jqx-animate-opening 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0ms; -webkit-transform-origin: top; transform-origin: top; } .jqx-path:not([animation=none]) .jqx-drop-down.jqx-visibility-hidden, .jqx-color-picker:not([animation=none]) .jqx-drop-down.jqx-visibility-hidden, .jqx-multi-split-button:not([animation=none]) .jqx-drop-down.jqx-visibility-hidden, .jqx-drop-down-list:not([animation=none]) .jqx-drop-down.jqx-visibility-hidden, .jqx-combo-box:not([animation=none]) .jqx-drop-down.jqx-visibility-hidden, .jqx-text-box:not([animation=none]) .jqx-drop-down.jqx-visibility-hidden, .jqx-drop-down-button:not([animation=none]) .jqx-drop-down.jqx-visibility-hidden, .jqx-date-time-picker:not([animation=none]) .jqx-drop-down.jqx-visibility-hidden { transition: animation, visibility 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0ms; animation: jqx-drop-down-list-jqx-animate-closing 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0ms; -webkit-transform-origin: top; transform-origin: top; } .jqx-path:not([animation=none]) .jqx-drop-down[bottom], .jqx-path:not([animation=none]) .jqx-drop-down[center-bottom], .jqx-color-picker:not([animation=none]) .jqx-drop-down[bottom], .jqx-color-picker:not([animation=none]) .jqx-drop-down[center-bottom], .jqx-multi-split-button:not([animation=none]) .jqx-drop-down[bottom], .jqx-multi-split-button:not([animation=none]) .jqx-drop-down[center-bottom], .jqx-drop-down-list:not([animation=none]) .jqx-drop-down[bottom], .jqx-drop-down-list:not([animation=none]) .jqx-drop-down[center-bottom], .jqx-combo-box:not([animation=none]) .jqx-drop-down[bottom], .jqx-combo-box:not([animation=none]) .jqx-drop-down[center-bottom], .jqx-text-box:not([animation=none]) .jqx-drop-down[bottom], .jqx-text-box:not([animation=none]) .jqx-drop-down[center-bottom], .jqx-drop-down-button:not([animation=none]) .jqx-drop-down[bottom], .jqx-drop-down-button:not([animation=none]) .jqx-drop-down[center-bottom], .jqx-date-time-picker:not([animation=none]) .jqx-drop-down[bottom], .jqx-date-time-picker:not([animation=none]) .jqx-drop-down[center-bottom] { animation: jqx-drop-down-list-jqx-animate-opening 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0ms; -webkit-transform-origin: top; transform-origin: top; } .jqx-path:not([animation=none]) .jqx-drop-down[bottom].jqx-visibility-hidden, .jqx-path:not([animation=none]) .jqx-drop-down[center-bottom].jqx-visibility-hidden, .jqx-color-picker:not([animation=none]) .jqx-drop-down[bottom].jqx-visibility-hidden, .jqx-color-picker:not([animation=none]) .jqx-drop-down[center-bottom].jqx-visibility-hidden, .jqx-multi-split-button:not([animation=none]) .jqx-drop-down[bottom].jqx-visibility-hidden, .jqx-multi-split-button:not([animation=none]) .jqx-drop-down[center-bottom].jqx-visibility-hidden, .jqx-drop-down-list:not([animation=none]) .jqx-drop-down[bottom].jqx-visibility-hidden, .jqx-drop-down-list:not([animation=none]) .jqx-drop-down[center-bottom].jqx-visibility-hidden, .jqx-combo-box:not([animation=none]) .jqx-drop-down[bottom].jqx-visibility-hidden, .jqx-combo-box:not([animation=none]) .jqx-drop-down[center-bottom].jqx-visibility-hidden, .jqx-text-box:not([animation=none]) .jqx-drop-down[bottom].jqx-visibility-hidden, .jqx-text-box:not([animation=none]) .jqx-drop-down[center-bottom].jqx-visibility-hidden, .jqx-drop-down-button:not([animation=none]) .jqx-drop-down[bottom].jqx-visibility-hidden, .jqx-drop-down-button:not([animation=none]) .jqx-drop-down[center-bottom].jqx-visibility-hidden, .jqx-date-time-picker:not([animation=none]) .jqx-drop-down[bottom].jqx-visibility-hidden, .jqx-date-time-picker:not([animation=none]) .jqx-drop-down[center-bottom].jqx-visibility-hidden { animation: jqx-drop-down-list-jqx-animate-closing 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0ms; -webkit-transform-origin: top; transform-origin: top; } .jqx-path:not([animation=none]) .jqx-drop-down[top], .jqx-path:not([animation=none]) .jqx-drop-down[center-top], .jqx-color-picker:not([animation=none]) .jqx-drop-down[top], .jqx-color-picker:not([animation=none]) .jqx-drop-down[center-top], .jqx-multi-split-button:not([animation=none]) .jqx-drop-down[top], .jqx-multi-split-button:not([animation=none]) .jqx-drop-down[center-top], .jqx-drop-down-list:not([animation=none]) .jqx-drop-down[top], .jqx-drop-down-list:not([animation=none]) .jqx-drop-down[center-top], .jqx-combo-box:not([animation=none]) .jqx-drop-down[top], .jqx-combo-box:not([animation=none]) .jqx-drop-down[center-top], .jqx-text-box:not([animation=none]) .jqx-drop-down[top], .jqx-text-box:not([animation=none]) .jqx-drop-down[center-top], .jqx-drop-down-button:not([animation=none]) .jqx-drop-down[top], .jqx-drop-down-button:not([animation=none]) .jqx-drop-down[center-top], .jqx-date-time-picker:not([animation=none]) .jqx-drop-down[top], .jqx-date-time-picker:not([animation=none]) .jqx-drop-down[center-top] { animation: jqx-drop-down-list-jqx-animate-opening 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0ms; -webkit-transform-origin: bottom; transform-origin: bottom; } .jqx-path:not([animation=none]) .jqx-drop-down[top].jqx-visibility-hidden, .jqx-path:not([animation=none]) .jqx-drop-down[center-top].jqx-visibility-hidden, .jqx-color-picker:not([animation=none]) .jqx-drop-down[top].jqx-visibility-hidden, .jqx-color-picker:not([animation=none]) .jqx-drop-down[center-top].jqx-visibility-hidden, .jqx-multi-split-button:not([animation=none]) .jqx-drop-down[top].jqx-visibility-hidden, .jqx-multi-split-button:not([animation=none]) .jqx-drop-down[center-top].jqx-visibility-hidden, .jqx-drop-down-list:not([animation=none]) .jqx-drop-down[top].jqx-visibility-hidden, .jqx-drop-down-list:not([animation=none]) .jqx-drop-down[center-top].jqx-visibility-hidden, .jqx-combo-box:not([animation=none]) .jqx-drop-down[top].jqx-visibility-hidden, .jqx-combo-box:not([animation=none]) .jqx-drop-down[center-top].jqx-visibility-hidden, .jqx-text-box:not([animation=none]) .jqx-drop-down[top].jqx-visibility-hidden, .jqx-text-box:not([animation=none]) .jqx-drop-down[center-top].jqx-visibility-hidden, .jqx-drop-down-button:not([animation=none]) .jqx-drop-down[top].jqx-visibility-hidden, .jqx-drop-down-button:not([animation=none]) .jqx-drop-down[center-top].jqx-visibility-hidden, .jqx-date-time-picker:not([animation=none]) .jqx-drop-down[top].jqx-visibility-hidden, .jqx-date-time-picker:not([animation=none]) .jqx-drop-down[center-top].jqx-visibility-hidden { animation: jqx-drop-down-list-jqx-animate-closing 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0ms; -webkit-transform-origin: bottom; transform-origin: bottom; } .jqx-path:not([animation=none]) .jqx-drop-down[overlay-bottom], .jqx-path:not([animation=none]) .jqx-drop-down[overlay-top], .jqx-color-picker:not([animation=none]) .jqx-drop-down[overlay-bottom], .jqx-color-picker:not([animation=none]) .jqx-drop-down[overlay-top], .jqx-multi-split-button:not([animation=none]) .jqx-drop-down[overlay-bottom], .jqx-multi-split-button:not([animation=none]) .jqx-drop-down[overlay-top], .jqx-drop-down-list:not([animation=none]) .jqx-drop-down[overlay-bottom], .jqx-drop-down-list:not([animation=none]) .jqx-drop-down[overlay-top], .jqx-combo-box:not([animation=none]) .jqx-drop-down[overlay-bottom], .jqx-combo-box:not([animation=none]) .jqx-drop-down[overlay-top], .jqx-text-box:not([animation=none]) .jqx-drop-down[overlay-bottom], .jqx-text-box:not([animation=none]) .jqx-drop-down[overlay-top], .jqx-drop-down-button:not([animation=none]) .jqx-drop-down[overlay-bottom], .jqx-drop-down-button:not([animation=none]) .jqx-drop-down[overlay-top], .jqx-date-time-picker:not([animation=none]) .jqx-drop-down[overlay-bottom], .jqx-date-time-picker:not([animation=none]) .jqx-drop-down[overlay-top] { animation: jqx-drop-down-list-jqx-animate-opening 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0ms; -webkit-transform-origin: center; transform-origin: center; } .jqx-path:not([animation=none]) .jqx-drop-down[overlay-bottom].jqx-visibility-hidden, .jqx-path:not([animation=none]) .jqx-drop-down[overlay-top].jqx-visibility-hidden, .jqx-color-picker:not([animation=none]) .jqx-drop-down[overlay-bottom].jqx-visibility-hidden, .jqx-color-picker:not([animation=none]) .jqx-drop-down[overlay-top].jqx-visibility-hidden, .jqx-multi-split-button:not([animation=none]) .jqx-drop-down[overlay-bottom].jqx-visibility-hidden, .jqx-multi-split-button:not([animation=none]) .jqx-drop-down[overlay-top].jqx-visibility-hidden, .jqx-drop-down-list:not([animation=none]) .jqx-drop-down[overlay-bottom].jqx-visibility-hidden, .jqx-drop-down-list:not([animation=none]) .jqx-drop-down[overlay-top].jqx-visibility-hidden, .jqx-combo-box:not([animation=none]) .jqx-drop-down[overlay-bottom].jqx-visibility-hidden, .jqx-combo-box:not([animation=none]) .jqx-drop-down[overlay-top].jqx-visibility-hidden, .jqx-text-box:not([animation=none]) .jqx-drop-down[overlay-bottom].jqx-visibility-hidden, .jqx-text-box:not([animation=none]) .jqx-drop-down[overlay-top].jqx-visibility-hidden, .jqx-drop-down-button:not([animation=none]) .jqx-drop-down[overlay-bottom].jqx-visibility-hidden, .jqx-drop-down-button:not([animation=none]) .jqx-drop-down[overlay-top].jqx-visibility-hidden, .jqx-date-time-picker:not([animation=none]) .jqx-drop-down[overlay-bottom].jqx-visibility-hidden, .jqx-date-time-picker:not([animation=none]) .jqx-drop-down[overlay-top].jqx-visibility-hidden { animation: jqx-drop-down-list-jqx-animate-closing 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0ms; -webkit-transform-origin: center; transform-origin: center; } .jqx-path:not([animation=none]) .jqx-drop-down[overlay-center], .jqx-color-picker:not([animation=none]) .jqx-drop-down[overlay-center], .jqx-multi-split-button:not([animation=none]) .jqx-drop-down[overlay-center], .jqx-drop-down-list:not([animation=none]) .jqx-drop-down[overlay-center], .jqx-combo-box:not([animation=none]) .jqx-drop-down[overlay-center], .jqx-text-box:not([animation=none]) .jqx-drop-down[overlay-center], .jqx-drop-down-button:not([animation=none]) .jqx-drop-down[overlay-center], .jqx-date-time-picker:not([animation=none]) .jqx-drop-down[overlay-center] { animation: jqx-drop-down-list-jqx-animate-overlay-center-opening 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0ms; -webkit-transform-origin: top; transform-origin: top; } .jqx-path:not([animation=none]) .jqx-drop-down[overlay-center].jqx-visibility-hidden, .jqx-color-picker:not([animation=none]) .jqx-drop-down[overlay-center].jqx-visibility-hidden, .jqx-multi-split-button:not([animation=none]) .jqx-drop-down[overlay-center].jqx-visibility-hidden, .jqx-drop-down-list:not([animation=none]) .jqx-drop-down[overlay-center].jqx-visibility-hidden, .jqx-combo-box:not([animation=none]) .jqx-drop-down[overlay-center].jqx-visibility-hidden, .jqx-text-box:not([animation=none]) .jqx-drop-down[overlay-center].jqx-visibility-hidden, .jqx-drop-down-button:not([animation=none]) .jqx-drop-down[overlay-center].jqx-visibility-hidden, .jqx-date-time-picker:not([animation=none]) .jqx-drop-down[overlay-center].jqx-visibility-hidden { animation: jqx-drop-down-list-jqx-animate-overlay-center-closing 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0ms; -webkit-transform-origin: top; transform-origin: top; } .jqx-multi-split-button .jqx-drop-down, .jqx-drop-down-list .jqx-drop-down, .jqx-text-box .jqx-drop-down, .jqx-drop-down-button .jqx-drop-down { height: calc(var(--jqx-scroll-bar-size)); } .jqx-multi-split-button .jqx-drop-down jqx-scroll-bar:before, .jqx-drop-down-list .jqx-drop-down jqx-scroll-bar:before, .jqx-text-box .jqx-drop-down jqx-scroll-bar:before, .jqx-drop-down-button .jqx-drop-down jqx-scroll-bar:before { display: none; background-color: var(--jqx-border); } .jqx-multi-split-button .jqx-drop-down jqx-scroll-bar[orientation=vertical].bottom-corner, .jqx-drop-down-list .jqx-drop-down jqx-scroll-bar[orientation=vertical].bottom-corner, .jqx-text-box .jqx-drop-down jqx-scroll-bar[orientation=vertical].bottom-corner, .jqx-drop-down-button .jqx-drop-down jqx-scroll-bar[orientation=vertical].bottom-corner { width: calc(var(--jqx-scroll-bar-size)); height: calc(100% - var(--jqx-scroll-bar-size)); } .jqx-multi-split-button .jqx-drop-down jqx-scroll-bar.bottom-corner, .jqx-drop-down-list .jqx-drop-down jqx-scroll-bar.bottom-corner, .jqx-text-box .jqx-drop-down jqx-scroll-bar.bottom-corner, .jqx-drop-down-button .jqx-drop-down jqx-scroll-bar.bottom-corner { width: calc(100% - var(--jqx-scroll-bar-size)); } .jqx-multi-split-button .jqx-drop-down .jqx-list-items-container.vscroll, .jqx-drop-down-list .jqx-drop-down .jqx-list-items-container.vscroll, .jqx-text-box .jqx-drop-down .jqx-list-items-container.vscroll, .jqx-drop-down-button .jqx-drop-down .jqx-list-items-container.vscroll { width: calc(100% - var(--jqx-scroll-bar-size)); } .jqx-multi-split-button .jqx-drop-down .jqx-list-items-container.vscroll[orientation=vertical], .jqx-drop-down-list .jqx-drop-down .jqx-list-items-container.vscroll[orientation=vertical], .jqx-text-box .jqx-drop-down .jqx-list-items-container.vscroll[orientation=vertical], .jqx-drop-down-button .jqx-drop-down .jqx-list-items-container.vscroll[orientation=vertical] { padding-top: initial; } .jqx-multi-split-button .jqx-drop-down input:focus, .jqx-drop-down-list .jqx-drop-down input:focus, .jqx-text-box .jqx-drop-down input:focus, .jqx-drop-down-button .jqx-drop-down input:focus { outline: none; } .jqx-multi-split-button.auto-height .jqx-action-button, .jqx-drop-down-list.auto-height .jqx-action-button, .jqx-drop-down-button.auto-height .jqx-action-button { white-space: initial; text-overflow: initial; line-height: 1rem; flex-wrap: wrap; } .jqx-multi-split-button.auto-height[selection-display-mode=tokens] jqx-action-button > span, .jqx-multi-split-button.auto-height[selection-display-mode=tokens] .jqx-action-button > span:first-of-type, .jqx-drop-down-list.auto-height[selection-display-mode=tokens] jqx-action-button > span, .jqx-drop-down-list.auto-height[selection-display-mode=tokens] .jqx-action-button > span:first-of-type, .jqx-drop-down-button.auto-height[selection-display-mode=tokens] jqx-action-button > span, .jqx-drop-down-button.auto-height[selection-display-mode=tokens] .jqx-action-button > span:first-of-type { display: inline-block; margin: 0.2em; } .jqx-color-picker .jqx-drop-down { width: var(--jqx-drop-down-button-drop-down-width); height: var(--jqx-drop-down-button-drop-down-height); } .jqx-color-picker .jqx-drop-down.jqx-drop-down-color-picker { max-height: calc(var(--jqx-editor-drop-down-max-height) + 50px); } .jqx-color-picker .jqx-drop-down jqx-scroll-bar:before { display: none; background-color: var(--jqx-border); } .jqx-color-picker .jqx-drop-down jqx-scroll-bar[orientation=vertical].bottom-corner { width: calc(var(--jqx-scroll-bar-size)); height: calc(100% - var(--jqx-scroll-bar-size)); } .jqx-color-picker .jqx-drop-down .jqx-list-items-container.vscroll { width: calc(100% - var(--jqx-scroll-bar-size)); } .jqx-color-picker .jqx-drop-down .jqx-list-items-container.vscroll[orientation=vertical] { padding-top: initial; } .jqx-drop-down-list .jqx-drop-down { width: var(--jqx-drop-down-list-drop-down-width); height: var(--jqx-drop-down-list-drop-down-height); } .jqx-combo-box .jqx-drop-down { width: var(--jqx-combo-box-drop-down-width); height: var(--jqx-combo-box-drop-down-height); } .jqx-combo-box .jqx-drop-down jqx-scroll-bar:before { display: none; background-color: var(--jqx-border); } .jqx-combo-box .jqx-drop-down jqx-scroll-bar[orientation=vertical].bottom-corner { width: calc(var(--jqx-scroll-bar-size)); height: calc(100% - var(--jqx-scroll-bar-size)); } .jqx-combo-box .jqx-drop-down jqx-scroll-bar.bottom-corner { width: calc(100% - var(--jqx-scroll-bar-size)); } .jqx-combo-box .jqx-drop-down .jqx-list-items-container.vscroll { width: calc(100% - var(--jqx-scroll-bar-size)); } .jqx-combo-box .jqx-drop-down .jqx-list-items-container.vscroll[orientation=vertical] { padding-top: initial; } .jqx-combo-box .jqx-selection-field input { outline: none; } .jqx-drop-down-button .jqx-drop-down { width: var(--jqx-drop-down-button-drop-down-width); height: var(--jqx-drop-down-button-drop-down-height); } .jqx-date-time-picker .jqx-drop-down { border: none; } .jqx-drop-down-overlay { position: absolute; top: 0; left: 0; z-index: 9000; } .jqx-list-box input.vscroll { outline: none; } .jqx-list-box jqx-scroll-bar:before { display: none; background-color: var(--jqx-border); } .jqx-list-box jqx-scroll-bar[orientation=vertical].bottom-corner { width: calc(var(--jqx-scroll-bar-size)); height: calc(100% - var(--jqx-scroll-bar-size)); } .jqx-list-box jqx-scroll-bar.bottom-corner { width: calc(100% - var(--jqx-scroll-bar-size)); } .jqx-list-box .jqx-list-items-container.vscroll { width: calc(100% - var(--jqx-scroll-bar-size)); } .jqx-scroll-viewer { max-width: 100%; border: 0; } .jqx-scroll-viewer jqx-scroll-bar:before { display: none; background-color: var(--jqx-border); } .jqx-scroll-viewer jqx-scroll-bar[orientation=vertical].bottom-corner { width: calc(var(--jqx-scroll-bar-size)); height: calc(100% - var(--jqx-scroll-bar-size)); } .jqx-scroll-viewer jqx-scroll-bar.bottom-corner { width: calc(100% - var(--jqx-scroll-bar-size)); } .jqx-scroll-viewer .jqx-list-items-container.vscroll { width: calc(100% - var(--jqx-scroll-bar-size)); } @keyframes jqx-drop-down-list-jqx-animate-overlay-center-opening { 0% { opacity: 0.2; transform: scaleY(0) translateY(-50%); } 50% { opacity: 0.4; } 100% { opacity: 1; transform: scaleY(1) translateY(-50%); } } @keyframes jqx-drop-down-list-jqx-animate-overlay-center-closing { 0% { opacity: 1; transform: scaleY(1) translateY(-50%); } 50% { opacity: 0.4; } 100% { opacity: 0.2; transform: scaleY(0) translateY(-50%); } } @keyframes jqx-drop-down-list-jqx-animate-opening { 0% { opacity: 0.2; transform: scaleY(0); } 50% { opacity: 0.4; } 100% { opacity: 1; transform: scaleY(1); } } @keyframes jqx-drop-down-list-jqx-animate-closing { 0% { opacity: 1; transform: scaleY(1); pointer-events: none; } 50% { opacity: 0.4; pointer-events: none; } 100% { opacity: 0.2; transform: scaleY(0); pointer-events: none; } } .jqx-drop-down-box[right-to-left]:not([hover]) .jqx-action-button[focus] { border-top-color: transparent; border-left-color: transparent; border-right-color: transparent; border-bottom-left-radius: 0; } .jqx-drop-down-box[right-to-left]:not([drop-down-button-position]) .jqx-drop-down-button, .jqx-drop-down-box[right-to-left]:not([drop-down-button-position]) .jqx-drop-down-button[focus] { border-top-color: transparent; border-left-color: transparent; border-right-color: transparent; } .jqx-drop-down-box[right-to-left]:not([drop-down-button-position]) .jqx-action-button { border-top-color: transparent; border-left-color: transparent; border-right-color: transparent; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .jqx-drop-down-box[right-to-left]:not([drop-down-button-position]):not([opened]):not([hover]) .jqx-drop-down-button:not([hover]), .jqx-drop-down-box[right-to-left]:not([drop-down-button-position]):not([opened]):not([hover]) .jqx-drop-down-button[focus]:not([hover]) { border-bottom-left-radius: 0; } @charset "UTF-8"; /* .jqx-editor */ /* --- Scheduler Style Color Input --- */ .jqx-editor .jqx-editor-content-container .jqx-editor-editable, .jqx-editor .jqx-editor-content-container textarea { width: 100%; height: 100%; outline: none; padding: var(--jqx-editor-padding); background: transparent; } .jqx-editor-toolbar-item[item-type=delimiter], .jqx-editor-toolbar-item[item-type=drop-down], .jqx-editor-toolbar-item[item-type=color-input], .jqx-editor-toolbar-item[item-type=button], .jqx-editor-toolbar-item[item-type=toggle] { position: relative; height: var(--jqx-editor-toolbar-item-height); outline: none; } .jqx-editor-toolbar-item[item-type=delimiter]::before, .jqx-editor-toolbar-item[item-name=alignment]::before, .jqx-editor-toolbar-item[item-name=clearformat]::after, .jqx-editor-toolbar-item:not([item-type=drop-down])::before, .jqx-editor-toolbar-item[item-type=color-input] .jqx-editor-item-drop-down-button::before, .jqx-editor-toolbar-item[item-type=drop-down]:after { font-size: var(--jqx-font-size); font-family: var(--jqx-font-family-icon); display: flex; align-items: center; justify-content: center; width: 100%; min-width: var(--jqx-editor-addon-width); height: 100%; box-sizing: border-box; pointer-events: none; } .jqx-editor-toolbar-item[item-type=color-input] .jqx-editor-item-drop-down-button::before, .jqx-editor-toolbar-item[item-type=drop-down]:after { content: var(--jqx-icon-arrow-down); width: var(--jqx-editor-addon-width); min-width: var(--jqx-editor-addon-width); } .jqx-editor-toolbar-item[item-type=drop-down]:before { font-size: var(--jqx-font-size); font-family: var(--jqx-font-family-icon); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; content: attr(item-value); width: calc(100% - 30px); padding: var(--jqx-editor-label-padding); padding-top: initial; padding-right: initial; padding-bottom: initial; text-align: center; } [disabled].jqx-editor-toolbar-item { -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; user-select: none; opacity: 0.55; cursor: default; pointer-events: none; } .jqx-editor { display: block; width: var(--jqx-editor-default-width); height: var(--jqx-editor-default-height); min-height: var(--jqx-editor-input-min-height); border: var(--jqx-border-width) solid var(--jqx-border); border-radius: var(--jqx-border-radius); contain: content; } .jqx-editor.jqx-editor-iframe-body { margin: initial; border: initial; min-height: initial; border-radius: initial; width: 100%; height: 100%; } .jqx-editor.jqx-editor-iframe-body table { font-size: var(--jqx-font-size); font-weight: var(--jqx-font-weight); } .jqx-editor.jqx-editor-iframe-body * { box-sizing: border-box; } .jqx-editor > .jqx-container { display: grid; grid-template-columns: 100%; grid-template-rows: auto minmax(0, 1fr); position: relative; min-height: inherit; } .jqx-editor .jqx-toast-container.jqx-toast-container-custom { position: absolute; top: 0; right: 0; height: auto; max-height: 100%; } .jqx-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(--jqx-editor-drop-down-z-index) - 1); } .jqx-editor[readonly] .jqx-editor-toolbar-items-primary, .jqx-editor[readonly] .jqx-editor-toolbar-items-secondary { pointer-events: none; } .jqx-editor[toolbar-mode=singleLineRibbon] .jqx-editor-toolbar[toolbar-tab-selected]:not([expanded]) .jqx-editor-toolbar-toggle-button::before { content: var(--jqx-icon-window-pin); } .jqx-editor[toolbar-mode=singleLineRibbon] .jqx-editor-toolbar-tab-selection-bar { position: absolute; bottom: 0; height: calc(2 * var(--jqx-border-width)); background-color: var(--jqx-primary); transform: scaleX(1); } .jqx-editor[toolbar-mode=singleLineRibbon] .jqx-editor-toolbar-tab-selection-bar.jqx-visibility-hidden { transform: scaleX(0); } .jqx-editor[toolbar-mode=singleLineRibbon] .jqx-editor-toolbar-items-primary { position: relative; } .jqx-editor[toolbar-mode=singleLineRibbon] .jqx-editor-toolbar[expanded] .jqx-editor-toolbar-items-primary, .jqx-editor[toolbar-mode=singleLineRibbon] .jqx-editor-toolbar[expanded] .jqx-editor-toolbar-toggle-button { border-bottom: var(--jqx-border-width) solid var(--jqx-border); } .jqx-editor[toolbar-mode=singleLineRibbon] .jqx-editor-toolbar:not(.jqx-tooltip) .jqx-editor-toolbar-items-secondary .jqx-editor-toolbar-item { margin-left: initial; } .jqx-editor[toolbar-mode=singleLineRibbon] .jqx-editor-toolbar-items-secondary { background-color: var(--jqx-background); padding-bottom: initial; flex-wrap: initial; } .jqx-editor[toolbar-mode=singleLineRibbon] .jqx-editor-toolbar-items-secondary.jqx-drop-down { border-bottom: var(--jqx-border-width) solid var(--jqx-border); box-shadow: var(--jqx-elevation-4); overflow: hidden; } .jqx-editor[toolbar-mode=singleLineRibbon] .jqx-editor-toolbar-items-secondary .jqx-editor-toolbar-item { margin-bottom: var(--jqx-editor-toolbar-item-margin); } .jqx-editor[toolbar-mode=singleLineRibbon] .jqx-editor-toolbar-items-secondary .jqx-editor-toolbar-item:not(:last-of-type) { margin-right: var(--jqx-editor-toolbar-item-margin); } .jqx-editor[toolbar-mode=singleLineRibbon] .jqx-editor-toolbar-tab { -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; user-select: none; padding: var(--jqx-tab-item-padding); } .jqx-editor[toolbar-mode=singleLineRibbon] .jqx-editor-toolbar-tab:not([disabled]) { cursor: pointer; } .jqx-editor[toolbar-mode=singleLineRibbon] .jqx-editor-toolbar .jqx-editor-toolbar-tab-group { padding-top: initial; } .jqx-editor[toolbar-mode=singleLineRibbon] .jqx-editor-toolbar-tab-group { position: relative; display: flex; align-items: center; flex-wrap: wrap; height: 100%; padding: var(--jqx-editor-toolbar-item-margin); padding-bottom: initial; } .jqx-editor[toolbar-mode=singleLineRibbon] .jqx-editor-toolbar-tab-group:not(:first-of-type) { border-left: var(--jqx-border-width) solid var(--jqx-border); } .jqx-editor[toolbar-view-mode=multiRow] .jqx-editor-toolbar, .jqx-editor[toolbar-view-mode=scroll] .jqx-editor-toolbar { grid-template-areas: "primary primary" "secondary secondary "; } .jqx-editor[toolbar-view-mode=multiRow] .jqx-editor-toolbar .jqx-editor-toolbar-toggle-button, .jqx-editor[toolbar-view-mode=scroll] .jqx-editor-toolbar .jqx-editor-toolbar-toggle-button { display: none; } .jqx-editor[toolbar-view-mode=multiRow] .jqx-editor-toolbar-items-primary, .jqx-editor[toolbar-view-mode=scroll] .jqx-editor-toolbar-items-primary { padding: 0 5px 5px 0; } .jqx-editor[toolbar-view-mode=multiRow] .jqx-editor-toolbar-items-primary .jqx-editor-toolbar-item, .jqx-editor[toolbar-view-mode=scroll] .jqx-editor-toolbar-items-primary .jqx-editor-toolbar-item { margin-bottom: initial; } .jqx-editor[toolbar-view-mode=multiRow] > .jqx-container { grid-template-rows: auto minmax(0, 1fr); } .jqx-editor[toolbar-view-mode=multiRow] .jqx-editor-toolbar .jqx-editor-toolbar-items-primary { height: auto; } .jqx-editor[toolbar-view-mode=scroll] > .jqx-container { grid-template-rows: auto minmax(0, 1fr); } .jqx-editor[toolbar-view-mode=scroll] .jqx-editor-toolbar-items-primary { overflow-y: auto; } .jqx-editor:not([animation=none]) .jqx-editor-toolbar-tab-selection-bar { transition: width 0.2s cubic-bezier(0.35, 0, 0.25, 1), left 0.2s cubic-bezier(0.35, 0, 0.25, 1), visibility 0.2s cubic-bezier(0.35, 0, 0.25, 1), transform 0.2s cubic-bezier(0.35, 0, 0.25, 1); } .jqx-editor:not([animation=none]) .jqx-editor-search-bar, .jqx-editor:not([animation=none])[toolbar-mode=singleLineRibbon] .jqx-editor-toolbar-items-secondary { animation: jqx-drop-down-list-jqx-animate-opening 0.2s ease-out; transition: animation 0.2s ease-out, opacity 0.2s ease-out, visibility 0.2s ease-out; -webkit-transform-origin: top; transform-origin: top; } .jqx-editor:not([animation=none]) .jqx-editor-search-bar.jqx-visibility-hidden, .jqx-editor:not([animation=none])[toolbar-mode=singleLineRibbon] .jqx-editor-toolbar-items-secondary.jqx-visibility-hidden { animation: jqx-drop-down-list-jqx-animate-closing 0.2s ease-in; transition: animation 0.2s ease-in, opacity 0.2s ease-in, visibility 0.2s ease-in; } .jqx-editor:not([animation=none]) .jqx-editor-toolbar:not(.jqx-tooltip), .jqx-editor:not([animation=none]) .jqx-editor-content-container { transition: height 0.2s ease-in-out; } .jqx-editor:not([animation=none]) .jqx-editor-toolbar-item, .jqx-editor:not([animation=none]) .jqx-editor-toolbar-toggle-button { transition: background-color 0.2ms linear, border-color 0.2ms ease-in-out, color 0.2ms linear, box-shadow 0.2s ease-in-out; } .jqx-editor:not([animation=none]) .jqx-editor-toolbar-toggle-button::before { transition: transform 0.2s ease-in-out; } .jqx-editor[edit-mode=markdown] .jqx-editor-toolbar-item[item-name=alignment], .jqx-editor[edit-mode=markdown] .jqx-editor-toolbar-item[item-name=indent], .jqx-editor[edit-mode=markdown] .jqx-editor-toolbar-item[item-name=outdent], .jqx-editor[edit-mode=markdown] .jqx-editor-toolbar-item[item-name=lowercase], .jqx-editor[edit-mode=markdown] .jqx-editor-toolbar-item[item-name=uppercase], .jqx-editor[edit-mode=markdown] .jqx-editor-toolbar-item[item-name=removelink] { -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; user-select: none; opacity: 0.55; cursor: default; pointer-events: none; } .jqx-editor.preview-mode .jqx-editor-toolbar-item:not([item-name=print]):not([item-name=sourcecode]):not([item-name=fullscreen]):not([item-name=splitmode]) { -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; user-select: none; opacity: 0.55; cursor: default; pointer-events: none; } .jqx-editor[hide-toolbar] > .jqx-container { grid-template-rows: minmax(auto, 1fr); } .jqx-editor[hide-toolbar] .jqx-editor-toolbar:not(.jqx-tooltip) { display: none; } .jqx-editor .jqx-editor-toolbar:not(.jqx-tooltip) { width: 100%; height: 100%; border-bottom: var(--jqx-border-width) solid var(--jqx-border); background: var(--jqx-surface); display: grid; grid-template-areas: "primary toggleButton" "secondary secondary "; grid-template-columns: minmax(0, 1fr) auto; overflow: hidden; position: relative; } .jqx-editor .jqx-editor-toolbar:not(.jqx-tooltip)[expanded] .jqx-editor-toolbar-toggle-button::before { transform: rotate(180deg); } .jqx-editor .jqx-editor-toolbar:not(.jqx-tooltip) .jqx-editor-toolbar-item { margin-left: var(--jqx-editor-toolbar-item-margin); margin-top: var(--jqx-editor-toolbar-item-margin); } .jqx-editor[toolbar-sticky] .jqx-editor-toolbar { position: sticky; top: 0; z-index: calc(var(--jqx-editor-drop-down-z-index) - 1); } .jqx-editor[edit-mode=markdown] .jqx-editor-toolbar-item[item-name=sourcecode]::before { content: var(--jqx-icon-visibility); } .jqx-editor .jqx-editor-toolbar-toggle-button { grid-area: toggleButton; width: var(--jqx-editor-toolbar-button-width); height: var(--jqx-editor-toolbar-height); position: relative; cursor: pointer; } .jqx-editor .jqx-editor-toolbar-toggle-button::before { font-size: var(--jqx-font-size); font-family: var(--jqx-font-family-icon); display: flex; align-items: center; justify-content: center; height: 100%; box-sizing: border-box; pointer-events: none; content: var(--jqx-icon-arrow-down); width: var(--jqx-editor-addon-width); min-width: var(--jqx-editor-addon-width); } .jqx-editor .jqx-editor-toolbar-items-primary { grid-area: primary; height: var(--jqx-editor-toolbar-height); overflow: hidden; } .jqx-editor .jqx-editor-toolbar-items-primary .jqx-editor-toolbar-item { margin-bottom: var(--jqx-editor-toolbar-item-margin); } .jqx-editor .jqx-editor-toolbar-items-secondary { grid-area: secondary; padding-bottom: var(--jqx-editor-toolbar-item-margin); } .jqx-editor .jqx-editor-toolbar-items-secondary:empty { display: none; } .jqx-editor .jqx-editor-toolbar-items-primary, .jqx-editor .jqx-editor-toolbar-items-secondary { width: 100%; display: flex; align-items: center; flex-wrap: wrap; } .jqx-editor iframe { width: 100%; height: 100%; min-height: var(--jqx-editor-input-min-height); border: initial; } .jqx-editor .jqx-editor-content-container { display: grid; grid-template-rows: 1fr auto; width: 100%; height: 100%; position: relative; overflow: hidden; outline: none; background: transparent; } .jqx-editor .jqx-editor-content-container[split-mode] { display: grid; grid-template-columns: minmax(0, 1fr) var(--jqx-border-width) minmax(0, 1fr); grid-template-rows: 100%; grid-column-gap: 2px; } .jqx-editor .jqx-editor-content-container[split-mode] .jqx-editor-editable { order: 1; } .jqx-editor .jqx-editor-content-container[split-mode]::before { content: ""; width: 100%; height: 100%; background-color: var(--jqx-border); order: 2; } .jqx-editor .jqx-editor-content-container[split-mode] textarea { order: 3; } .jqx-editor .jqx-editor-content-container textarea { resize: none; outline: none; border: initial; min-height: var(--jqx-editor-input-min-height); font-size: inherit; font-family: inherit; color: inherit; } .jqx-editor .jqx-editor-content-container .jqx-editor-editable { min-height: var(--jqx-editor-input-min-height); overflow: auto; } .jqx-editor .jqx-editor-content-container .jqx-editor-editable[show-placeholder]::before { content: attr(placeholder); width: 100%; height: 100%; position: absolute; pointer-events: none; color: var(--jqx-disabled-color); opacity: 0.9; font-family: inherit; font-size: inherit; } .jqx-editor .jqx-editor-content-container .jqx-editor-editable p:first-child { margin-top: 0; } .jqx-editor .jqx-editor-content-container .jqx-editor-editable p:last-child { margin-bottom: 0; } .jqx-editor .jqx-editor-content-container .jqx-editor-editable ul[checklist] li { list-style: none; } .jqx-editor .jqx-editor-content-container .jqx-editor-editable ul[checklist] li::before { border-radius: 3px; top: 3.5px; width: 16px; height: 16px; box-sizing: border-box; display: inline-block; content: ""; margin-right: 5px; position: relative; border: 2px solid rgba(0, 0, 0, 0.25); cursor: pointer; } .jqx-editor .jqx-editor-content-container .jqx-editor-editable ul[checklist] li[checked]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' style='shape-rendering: geometricprecision;'%3E%3Cpath fill-rule='evenodd' fill='white' d='M5.944 12.305a1.031 1.031 0 0 0 1.433-.009l5.272-5.181A1.483 1.483 0 0 0 12.661 5a1.468 1.468 0 0 0-2.109.025L7.008 8.701a.465.465 0 0 1-.685-.01l-.587-.641A1.42 1.42 0 0 0 3.661 8a1.473 1.473 0 0 0 .017 2.106l2.266 2.199z'%3E%3C/path%3E%3C/svg%3E"); background-color: var(--jqx-primary); border: 2px solid transparent; } .jqx-editor .jqx-editor-content-container .jqx-editor-editable ul[checklist] li[checked] { text-decoration: line-through; color: var(--jqx-disabled-color); } .jqx-editor .jqx-editor-content-container .jqx-editor-editable a { display: inline-block; } .jqx-editor .jqx-editor-content-container .jqx-editor-editable [alignment=left] { text-align: left; } .jqx-editor .jqx-editor-content-container .jqx-editor-editable [alignment=center] { text-align: center; } .jqx-editor .jqx-editor-content-container .jqx-editor-editable [alignment=right] { text-align: right; } .jqx-editor .jqx-editor-content-container .jqx-editor-editable [alignment=justify] { text-align: justify; } .jqx-editor .jqx-editor-content-container .jqx-editor-editable[table-cell-resize=horizontal] { cursor: col-resize; } .jqx-editor .jqx-editor-content-container .jqx-editor-editable[table-cell-resize=horizontal] table { overflow: hidden; } .jqx-editor .jqx-editor-content-container .jqx-editor-editable[table-cell-resize=horizontal] th[resizing], .jqx-editor .jqx-editor-content-container .jqx-editor-editable[table-cell-resize=horizontal] td[resizing] { position: relative; } .jqx-editor .jqx-editor-content-container .jqx-editor-editable[table-cell-resize=horizontal] th[resizing]::after, .jqx-editor .jqx-editor-content-container .jqx-editor-editable[table-cell-resize=horizontal] td[resizing]::after { content: ""; position: absolute; right: 0; display: flex; width: var(--jqx-border-width); height: 100%; transform: scaleY(100); background-color: var(--jqx-primary); } .jqx-editor .jqx-editor-content-container .jqx-editor-editable[table-cell-resize=vertical] { cursor: row-resize; } .jqx-editor .jqx-editor-content-container .jqx-editor-editable[table-cell-resize=vertical] tr[resizing] > th, .jqx-editor .jqx-editor-content-container .jqx-editor-editable[table-cell-resize=vertical] tr[resizing] > td { border-bottom-color: var(--jqx-primary); } .jqx-editor .jqx-editor-content-container .jqx-editor-editable[contenteditable=true] img { cursor: pointer; } .jqx-editor .jqx-editor-content-container .jqx-editor-editable font:empty { min-width: 1px; min-height: 1px; display: inline-block; } .jqx-editor .jqx-editor-content-container .jqx-editor-editable font:empty::before { content: "a"; opacity: 0; } .jqx-editor .jqx-editor-content-container .jqx-editor-editable pre { padding: 10px; background: var(--jqx-surface); } .jqx-editor .jqx-editor-content-container .jqx-editor-editable blockquote { border-left: calc(2 * var(--jqx-border-width)) solid var(--jqx-border); padding: 20px 10px; } .jqx-editor .jqx-editor-content-container .jqx-editor-editable .find-and-replace-match { background-color: var(--jqx-editor-highlight); opacity: 0.75; color: var(--jqx-editor-highlight-color); } .jqx-editor .jqx-editor-content-container .jqx-editor-editable .find-and-replace-match.selected { background-color: var(--jqx-editor-highlight); opacity: 1; } .jqx-editor .jqx-editor-content-container img, .jqx-editor .jqx-editor-content-container .jqx-editor-video-container video, .jqx-editor .jqx-editor-content-container .jqx-editor-video-container iframe { float: initial; vertical-align: initial; margin: auto; min-width: 10px; min-height: 10px; } .jqx-editor .jqx-editor-content-container img[display=block], .jqx-editor .jqx-editor-content-container .jqx-editor-video-container video[display=block], .jqx-editor .jqx-editor-content-container .jqx-editor-video-container iframe[display=block] { display: block; } .jqx-editor .jqx-editor-content-container img[display=block][alignment=left], .jqx-editor .jqx-editor-content-container .jqx-editor-video-container video[display=block][alignment=left], .jqx-editor .jqx-editor-content-container .jqx-editor-video-container iframe[display=block][alignment=left] { margin-left: 0; } .jqx-editor .jqx-editor-content-container img[display=block][alignment=right], .jqx-editor .jqx-editor-content-container .jqx-editor-video-container video[display=block][alignment=right], .jqx-editor .jqx-editor-content-container .jqx-editor-video-container iframe[display=block][alignment=right] { margin-right: 0; } .jqx-editor .jqx-editor-content-container img[show-resize-frame], .jqx-editor .jqx-editor-content-container .jqx-editor-video-container video[show-resize-frame], .jqx-editor .jqx-editor-content-container .jqx-editor-video-container iframe[show-resize-frame] { box-shadow: 0 0 0 var(--jqx-border-width) var(--jqx-primary); } .jqx-editor .jqx-editor-content-container img:not([display=block])[alignment=left], .jqx-editor .jqx-editor-content-container .jqx-editor-video-container video:not([display=block])[alignment=left], .jqx-editor .jqx-editor-content-container .jqx-editor-video-container iframe:not([display=block])[alignment=left] { float: left; } .jqx-editor .jqx-editor-content-container img:not([display=block])[alignment=right], .jqx-editor .jqx-editor-content-container .jqx-editor-video-container video:not([display=block])[alignment=right], .jqx-editor .jqx-editor-content-container .jqx-editor-video-container iframe:not([display=block])[alignment=right] { float: right; } .jqx-editor .jqx-editor-content-container .jqx-editor-search-bar { position: absolute; top: var(--jqx-editor-search-bar-offset); right: var(--jqx-editor-search-bar-offset); padding: var(--jqx-editor-search-bar-padding); display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, auto); grid-column-gap: 5px; border: var(--jqx-border-width) solid var(--jqx-border); box-shadow: var(--jqx-elevation-4); background: var(--jqx-background); border-top-left-radius: var(--jqx-border-top-left-radius); border-top-right-radius: var(--jqx-border-top-right-radius); border-bottom-left-radius: var(--jqx-border-bottom-left-radius); border-bottom-right-radius: var(--jqx-border-bottom-right-radius); } .jqx-editor .jqx-editor-content-container .jqx-editor-search-bar .jqx-search-input-container { width: var(--jqx-text-box-default-width); display: flex; align-items: center; } .jqx-editor .jqx-editor-content-container .jqx-editor-search-bar .jqx-search-input-container::after { content: attr(selected) "/" attr(matches); margin: 0 var(--jqx-editor-search-bar-offset); } .jqx-editor .jqx-editor-content-container .jqx-editor-search-bar .jqx-search-input { height: 100%; outline: none; border: initial; padding: var(--jqx-editor-label-padding); } .jqx-editor .jqx-editor-content-container .jqx-editor-search-bar .jqx-search-input:focus { border-color: var(--jqx-outline); } .jqx-editor .jqx-editor-content-container .jqx-editor-search-bar .jqx-search-button { --jqx-button-padding: 0; border: initial; height: var(--jqx-editor-toolbar-button-width); width: var(--jqx-editor-toolbar-button-width); } .jqx-editor .jqx-editor-content-container .jqx-editor-search-bar .jqx-search-button button::after { font-size: var(--jqx-font-size); font-family: var(--jqx-font-family-icon); display: flex; align-items: center; justify-content: center; box-sizing: border-box; pointer-events: none; } .jqx-editor .jqx-editor-content-container .jqx-editor-search-bar .jqx-search-button.prev button::after { content: var(--jqx-icon-arrow-up); } .jqx-editor .jqx-editor-content-container .jqx-editor-search-bar .jqx-search-button.next button::after { content: var(--jqx-icon-arrow-down); } .jqx-editor .jqx-editor-content-container .jqx-editor-search-bar .jqx-search-button.close button::after { content: var(--jqx-icon-close); } .jqx-editor[show-char-count] .jqx-editor-content-container::after { content: attr(char-count); position: absolute; display: flex; justify-content: flex-end; bottom: var(--jqx-editor-char-counter-offset); right: var(--jqx-editor-char-counter-offset); box-sizing: border-box; background: var(--jqx-background); border-radius: var(--jqx-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; } .jqx-editor[show-char-count] .jqx-editor-content-container.char-count-error::after { color: var(--jqx-error); } .jqx-editor[show-char-count] .jqx-editor-content-container.char-count-warning::after { color: var(--jqx-warning); } .jqx-editor[edit-mode=markdown] .jqx-editor-content-container[split-mode] .jqx-editor-editable { order: 3; } .jqx-editor[edit-mode=markdown] .jqx-editor-content-container[split-mode] textarea { order: 1; } .jqx-editor .jqx-editor-resize-frame { -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; user-select: none; position: absolute; } .jqx-editor .jqx-editor-resize-frame span { cursor: pointer; position: absolute; width: 10px; height: 10px; background: var(--jqx-primary); transform: translate(-50%, -50%); } .jqx-editor .jqx-editor-resize-frame span[position=top-left], .jqx-editor .jqx-editor-resize-frame span[position=bottom-right] { cursor: se-resize; } .jqx-editor .jqx-editor-resize-frame span[position=top-right], .jqx-editor .jqx-editor-resize-frame span[position=bottom-left] { cursor: sw-resize; } .jqx-editor .jqx-editor-resize-frame span[position=top-center], .jqx-editor .jqx-editor-resize-frame span[position=bottom-center] { cursor: ns-resize; } .jqx-editor .jqx-editor-resize-frame span[position=left-center], .jqx-editor .jqx-editor-resize-frame span[position=right-center] { cursor: ew-resize; } .jqx-editor .jqx-editor-image-container { display: inline-block; } .jqx-editor .jqx-editor-image-container.jqx-editor-video-container { position: relative; } .jqx-editor .jqx-editor-image-container.jqx-editor-video-container .jqx-editor-video-white-space { position: absolute; opacity: 0; } .jqx-editor .jqx-editor-image-container.jqx-editor-video-container[dragged]::before { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .jqx-editor .jqx-editor-image-container.jqx-editor-video-container video, .jqx-editor .jqx-editor-image-container.jqx-editor-video-container iframe { width: 100%; height: 100%; } .jqx-editor .jqx-editor-image-container.jqx-editor-video-container > br[class] { display: none; } .jqx-editor .jqx-editor-image-container.jqx-editor-video-container::after { content: var(--jqx-icon-menu); position: absolute; font-family: var(--jqx-font-family-icon); font-size: var(--jqx-font-size); width: var(--jqx-editor-toolbar-item-height); height: var(--jqx-editor-toolbar-item-height); top: 0; left: calc(50% - var(--jqx-editor-toolbar-item-height) / 2); background: var(--jqx-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 0.2s ease-in-out, visibility 0.2s ease-in-out; } .jqx-editor .jqx-editor-image-container.jqx-editor-video-container:hover::after { visibility: visible; transform: scale(1) translateY(25%); } .jqx-editor .jqx-editor-image-container[display=block] { display: block; } .jqx-editor .jqx-editor-image-container[display=block][alignment=left] img { margin-left: 0; } .jqx-editor .jqx-editor-image-container[display=block][alignment=left] .jqx-editor-image-caption { text-align: left; } .jqx-editor .jqx-editor-image-container[display=block][alignment=right] img { margin-right: 0; } .jqx-editor .jqx-editor-image-container[display=block][alignment=right] .jqx-editor-image-caption { text-align: right; } .jqx-editor .jqx-editor-image-container:not([display=block])[alignment=left] { float: left; } .jqx-editor .jqx-editor-image-container:not([display=block])[alignment=right] { float: right; } .jqx-editor .jqx-editor-image-container .jqx-editor-image-caption { display: block; text-align: center; outline: none; } .jqx-editor table { width: 100%; border-collapse: collapse; empty-cells: show; border-spacing: 0; table-layout: fixed; } .jqx-editor table td, .jqx-editor table th { border: var(--jqx-border-width) solid var(--jqx-border); width: var(--jqx-editor-table-column-width); min-height: var(--jqx-editor-table-cell-min-height); min-width: var(--jqx-editor-table-cell-min-width); padding: 2px 5px; vertical-align: middle; } .jqx-editor table img { max-width: 100%; } .jqx-editor table table { width: 100%; } .jqx-editor table th { background: var(--jqx-surface); } .jqx-editor table th:empty::before, .jqx-editor table td:empty::before { content: "A"; visibility: hidden; } .jqx-editor table[dashed-borders] th, .jqx-editor table[dashed-borders] td { border-style: dashed; } .jqx-editor table[alternation] tr:nth-child(2n) { background-color: var(--jqx-alternation-index0-background); } .jqx-editor table [selected] { box-shadow: 0 0 0 var(--jqx-border-width) var(--jqx-primary) inset; } .jqx-editor[focus] .jqx-editor-toolbar-item[item-type=button][checked] { color: var(--jqx-ui-state-color-active); border-color: var(--jqx-ui-state-border-active); background-color: var(--jqx-ui-state-active); } .jqx-editor-toolbar-item { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; position: relative; border-radius: var(--jqx-editor-toolbar-item-border-radius); cursor: pointer; } .jqx-editor-toolbar-item[item-type=button][checked] { color: var(--jqx-ui-state-color-active); border-color: var(--jqx-ui-state-border-active); background-color: var(--jqx-ui-state-active); } .jqx-editor-toolbar-item:not([item-type=custom]):hover { color: var(--jqx-ui-state-color-hover); border-color: var(--jqx-ui-state-border-hover); background-color: var(--jqx-ui-state-hover); box-shadow: var(--jqx-elevation-1); } .jqx-editor-toolbar-item:not([item-type=custom]):not([item-type=color-input]):not([disabled]):active { color: var(--jqx-ui-state-color-active); border-color: var(--jqx-ui-state-border-active); background-color: var(--jqx-ui-state-active); } .jqx-editor-toolbar-item[item-name=bold]::before { content: var(--jqx-icon-bold); } .jqx-editor-toolbar-item[item-name=italic]::before { content: var(--jqx-icon-italic); } .jqx-editor-toolbar-item[item-name=underline]::before { content: var(--jqx-icon-underline); } .jqx-editor-toolbar-item[item-name=strikethrough]::before { content: var(--jqx-icon-strike-through); } .jqx-editor-toolbar-item[item-name=caption]::before { content: var(--jqx-icon-format-clear); } .jqx-editor-toolbar-item[item-name=orderedlist]::before { content: var(--jqx-icon-list-ordered); } .jqx-editor-toolbar-item[item-name=unorderedlist]::before { content: var(--jqx-icon-list-unordered); } .jqx-editor-toolbar-item[item-name=checklist]::before { content: var(--jqx-icon-list-check); } .jqx-editor-toolbar-item[item-name=subscript]::before { content: var(--jqx-icon-subscript); } .jqx-editor-toolbar-item[item-name=superscript]::before { content: var(--jqx-icon-superscript); } .jqx-editor-toolbar-item .jqx-editor-item-action-button[item-name=backgroundcolor]::before { content: var(--jqx-icon-color-background); } .jqx-editor-toolbar-item .jqx-editor-item-action-button[item-name=fontcolor]::before { content: var(--jqx-icon-font); } .jqx-editor-toolbar-item[item-name=delete]::before { content: var(--jqx-icon-delete); } .jqx-editor-toolbar-item[item-name=redo]::before { content: var(--jqx-icon-reload); } .jqx-editor-toolbar-item[item-name=undo]::before { content: var(--jqx-icon-reload); } .jqx-editor-toolbar-item[item-name=indent]::before { content: var(--jqx-icon-indent-left); } .jqx-editor-toolbar-item[item-name=outdent]::before { content: var(--jqx-icon-indent-right); } .jqx-editor-toolbar-item[item-name=createlink]::before { content: var(--jqx-icon-link); } .jqx-editor-toolbar-item[item-name=removelink]::before { content: var(--jqx-icon-unlink); } .jqx-editor-toolbar-item[item-name=hyperlink]::before { content: var(--jqx-icon-link); } .jqx-editor-toolbar-item[item-name=openlink]::before { content: var(--jqx-icon-link-ext); } .jqx-editor-toolbar-item[item-name=editlink]::before { content: var(--jqx-icon-mode-edit); } .jqx-editor-toolbar-item[item-name=image]::before { content: var(--jqx-icon-image); } .jqx-editor-toolbar-item[item-name=table]::before { content: var(--jqx-icon-table); } .jqx-editor-toolbar-item[item-name=lowercase]::before { content: var(--jqx-icon-case-lower); } .jqx-editor-toolbar-item[item-name=uppercase]::before { content: var(--jqx-icon-case-upper); } .jqx-editor-toolbar-item[item-name=print]::before { content: var(--jqx-icon-print); } .jqx-editor-toolbar-item[item-name=copy]::before { content: var(--jqx-icon-copy-record); } .jqx-editor-toolbar-item[item-name=paste]::before { content: var(--jqx-icon-paste); } .jqx-editor-toolbar-item[item-name=cut]::before { content: var(--jqx-icon-cut); transform: rotate(-90deg); } .jqx-editor-toolbar-item[item-name=clearformat]::before { content: var(--jqx-icon-format-clear); } .jqx-editor-toolbar-item[item-name=fullscreen]::before { content: var(--jqx-icon-resize-full); } .jqx-editor-toolbar-item[item-name=sourcecode]::before { content: var(--jqx-icon-source-code); } .jqx-editor-toolbar-item[item-name=preview]::before { content: var(--jqx-icon-visibility); } .jqx-editor-toolbar-item[item-name=splitmode]::before { content: var(--jqx-icon-split-mode); } .jqx-editor-toolbar-item[item-name=tableheader]::before { content: var(--jqx-icon-header); } .jqx-editor-toolbar-item[item-name=tablerows]::before { content: var(--jqx-icon-row); } .jqx-editor-toolbar-item[item-name=tablecolumns]::before { content: var(--jqx-icon-column); } .jqx-editor-toolbar-item[item-name=tablevalign]::before { content: var(--jqx-icon-vertical-align); } .jqx-editor-toolbar-item[item-name=tablestyle]::before { content: var(--jqx-icon-styles); } .jqx-editor-toolbar-item[item-name=findandreplace]::before { content: var(--jqx-icon-search); } .jqx-editor-toolbar-item[item-name=file]::before { content: var(--jqx-icon-up); } .jqx-editor-toolbar-item[item-name=ai]::before { content: var(--jqx-icon-ai); content: url("data:image/svg+xml,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M16.3333%207.33333C16.3333%207.33333%2016.1328%205.44793%2015.3411%204.65887C14.5469%203.8724%2012.6667%203.66667%2012.6667%203.66667C12.6667%203.66667%2014.5521%203.46615%2015.3411%202.67447C16.1276%201.8802%2016.3333%200%2016.3333%200C16.3333%200%2016.5339%201.8854%2017.3255%202.67447C18.112%203.46093%2020%203.66667%2020%203.66667C20%203.66667%2018.1146%203.86719%2017.3255%204.65887C16.5391%205.44533%2016.3333%207.33333%2016.3333%207.33333ZM7.5%205C7.5%205%207.08594%208.8594%205.47393%2010.4739C3.85933%2012.0885%200%2012.5%200%2012.5C0%2012.5%203.8594%2012.9141%205.47393%2014.5261C7.08853%2016.1407%207.5%2020%207.5%2020C7.5%2020%207.91406%2016.1406%209.52607%2014.5261C11.1407%2012.9115%2015%2012.5%2015%2012.5C15%2012.5%2011.1406%2012.0859%209.52607%2010.4739C7.91147%208.85933%207.5%205%207.5%205ZM17.1667%2016.6667C16.7057%2016.6667%2016.3333%2017.0391%2016.3333%2017.5C16.3333%2017.9609%2016.7057%2018.3333%2017.1667%2018.3333C17.6276%2018.3333%2018%2017.9609%2018%2017.5C18%2017.0391%2017.6276%2016.6667%2017.1667%2016.6667ZM2.5%204C2.96094%204%203.33333%203.62761%203.33333%203.16667C3.33333%202.70573%202.96094%202.33333%202.5%202.33333C2.03906%202.33333%201.66667%202.70573%201.66667%203.16667C1.66667%203.62761%202.03906%204%202.5%204Z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E"); } .jqx-editor-toolbar-item[item-name=video]::before { content: var(--jqx-icon-video); } .jqx-editor-toolbar-item[item-name=ai]:active::before { content: url("data:image/svg+xml,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M16.3333%207.33333C16.3333%207.33333%2016.1328%205.44793%2015.3411%204.65887C14.5469%203.8724%2012.6667%203.66667%2012.6667%203.66667C12.6667%203.66667%2014.5521%203.46615%2015.3411%202.67447C16.1276%201.8802%2016.3333%200%2016.3333%200C16.3333%200%2016.5339%201.8854%2017.3255%202.67447C18.112%203.46093%2020%203.66667%2020%203.66667C20%203.66667%2018.1146%203.86719%2017.3255%204.65887C16.5391%205.44533%2016.3333%207.33333%2016.3333%207.33333ZM7.5%205C7.5%205%207.08594%208.8594%205.47393%2010.4739C3.85933%2012.0885%200%2012.5%200%2012.5C0%2012.5%203.8594%2012.9141%205.47393%2014.5261C7.08853%2016.1407%207.5%2020%207.5%2020C7.5%2020%207.91406%2016.1406%209.52607%2014.5261C11.1407%2012.9115%2015%2012.5%2015%2012.5C15%2012.5%2011.1406%2012.0859%209.52607%2010.4739C7.91147%208.85933%207.5%205%207.5%205ZM17.1667%2016.6667C16.7057%2016.6667%2016.3333%2017.0391%2016.3333%2017.5C16.3333%2017.9609%2016.7057%2018.3333%2017.1667%2018.3333C17.6276%2018.3333%2018%2017.9609%2018%2017.5C18%2017.0391%2017.6276%2016.6667%2017.1667%2016.6667ZM2.5%204C2.96094%204%203.33333%203.62761%203.33333%203.16667C3.33333%202.70573%202.96094%202.33333%202.5%202.33333C2.03906%202.33333%201.66667%202.70573%201.66667%203.16667C1.66667%203.62761%202.03906%204%202.5%204Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E"); } .jqx-editor-toolbar-item[item-name=redo]::before { transform: scaleX(-1); } .jqx-editor-toolbar-item[item-name=caption]::before { font-weight: 600; } .jqx-editor-toolbar-item[item-name=clearformat]::before { font-style: italic; font-weight: 600; } .jqx-editor-toolbar-item[item-name=clearformat]::after { content: "-"; position: absolute; top: 0; font-weight: 600; transform: scaleX(1.5); } .jqx-editor-toolbar-item[item-name=alignment][item-value=left]::before { content: var(--jqx-icon-align-left); } .jqx-editor-toolbar-item[item-name=alignment][item-value=center]::before { content: var(--jqx-icon-align-center); } .jqx-editor-toolbar-item[item-name=alignment][item-value=right]::before { content: var(--jqx-icon-align-right); } .jqx-editor-toolbar-item[item-name=alignment][item-value=justify]::before { content: var(--jqx-icon-align-justify); } .jqx-editor-toolbar-item[item-type=toggle][checked] { color: var(--jqx-ui-state-color-active); border-color: var(--jqx-ui-state-border-active); background-color: var(--jqx-ui-state-active); } .jqx-editor-toolbar-item[item-type=button], .jqx-editor-toolbar-item[item-type=toggle] { width: var(--jqx-editor-toolbar-button-width); } .jqx-editor-toolbar-item[item-type=drop-down], .jqx-editor-toolbar-item[item-type=color-input] { display: flex; align-items: center; justify-content: space-between; width: var(--jqx-editor-toolbar-drop-down-width-small); } .jqx-editor-toolbar-item[item-type=drop-down][item-name=fontname], .jqx-editor-toolbar-item[item-type=drop-down][item-name=formats] { width: var(--jqx-editor-toolbar-drop-down-width-large); } .jqx-editor-toolbar-item[item-type=drop-down][item-name=tablerows]:before { transform: rotate(90deg); padding: var(--jqx-editor-label-padding); padding-left: initial; padding-right: initial; padding-top: initial; } .jqx-editor-toolbar-item[item-type=color-input] .jqx-editor-item-action-button { display: flex; align-items: center; justify-content: center; position: relative; width: calc(100% - var(--jqx-editor-addon-width)); height: 100%; min-width: var(--jqx-editor-addon-width); padding: var(--jqx-editor-label-padding); padding-top: initial; padding-bottom: initial; } .jqx-editor-toolbar-item[item-type=color-input] .jqx-editor-item-action-button::before { font-size: var(--jqx-font-size); font-family: var(--jqx-font-family-icon); border-bottom: calc(3 * var(--jqx-border-width)) solid var(--item-value); } .jqx-editor-toolbar-item[item-type=color-input] .jqx-editor-item-drop-down-button { position: relative; height: 100%; } .jqx-editor-toolbar-item[item-type=custom] > :first-child { width: 100%; height: var(--jqx-editor-toolbar-item-height); } .jqx-editor-toolbar-item .jqx-editor-item-action-button:hover, .jqx-editor-toolbar-item .jqx-editor-item-drop-down-button:hover { color: var(--jqx-ui-state-color-hover); border-color: var(--jqx-ui-state-border-hover); background-color: var(--jqx-ui-state-hover); border-color: var(--jqx-ui-state-focus); background-color: var(--jqx-ui-state-focus); } .jqx-editor-toolbar-item .jqx-editor-item-action-button:not([disabled]):active, .jqx-editor-toolbar-item .jqx-editor-item-drop-down-button:not([disabled]):active { color: var(--jqx-ui-state-color-active); border-color: var(--jqx-ui-state-border-active); background-color: var(--jqx-ui-state-active); } .jqx-editor-toolbar-item[item-type=delimiter] { width: var(--jqx-editor-toolbar-delimiter-width); pointer-events: none; } .jqx-editor-toolbar-item[item-type=delimiter]::before { content: attr(item-name); transform: scaleY(1.5); min-width: initial; } .jqx-editor-toolbar-item .jqx-ripple { background-color: var(--jqx-background-color); } .jqx-editor-toolbar-item .jqx-editor-item-drop-down { position: absolute; top: 0; left: 0; visibility: hidden; } /* --- Editor Color Input --- */ .jqx-color-input-drop-down-menu.jqx-editor-color-input .grid-samples-container { grid-template-columns: repeat(2, minmax(0, 1fr)); } .jqx-color-input-drop-down-menu.jqx-editor-color-input:not([animation=none]) .default-samples-container div { transition: transform 0.2s ease-in-out; } .jqx-color-input-drop-down-menu.jqx-editor-color-input .default-samples-container div { position: relative; border-radius: 50%; border: initial; transform: scale(0.95); } .jqx-color-input-drop-down-menu.jqx-editor-color-input .default-samples-container div.selected { transform: scale(1); } .jqx-color-input-drop-down-menu.jqx-editor-color-input .default-samples-container div.selected:not(.no-color):after { content: var(--jqx-icon-check); width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: flex; justify-content: center; align-items: center; font-family: var(--jqx-font-family-icon); color: var(--jqx-secondary-color); border-radius: inherit; } .jqx-editor-color-input { --jqx-input-drop-down-menu-width: auto; } .jqx-editor-color-input.jqx-color-input-drop-down-menu .default-samples-container div.selected[value="#FFFFFF"]::after { border: var(--jqx-border-width) solid var(--jqx-border); color: var(--jqx-ui-state-color-hover); box-sizing: border-box; } .jqx-editor-color-input --jqx-input-drop-down-menu-width { width: 98px; } .jqx-editor-color-input .default-samples-container { display: flex; } /* --- Editor Input Drop Down --- */ .jqx-editor-input li .editor-icon::before { font-size: var(--jqx-font-size); font-family: var(--jqx-font-family-icon); display: flex; align-items: center; justify-content: center; position: absolute; left: 0; width: var(--jqx-column-icon-size); line-height: 1rem; } .jqx-editor-input li[value=left] .editor-icon::before { content: var(--jqx-icon-align-left); } .jqx-editor-input li[value=center] .editor-icon::before { content: var(--jqx-icon-align-center); } .jqx-editor-input li[value=right] .editor-icon::before { content: var(--jqx-icon-align-right); } .jqx-editor-input li[value=justify] .editor-icon::before { content: var(--jqx-icon-align-justify); } .jqx-editor-input li[value=insertRowBefore] .editor-icon::before { content: var(--jqx-icon-row-before); } .jqx-editor-input li[value=insertRowAfter] .editor-icon::before { content: var(--jqx-icon-row-after); transform: rotate(180deg); } .jqx-editor-input li[value=deleteRow] .editor-icon::before { content: var(--jqx-icon-row-delete); } .jqx-editor-input li[value=insertColumnLeft] .editor-icon::before { content: var(--jqx-icon-column-left); transform: rotate(-90deg); } .jqx-editor-input li[value=insertColumnRight] .editor-icon::before { content: var(--jqx-icon-column-right); transform: rotate(90deg); } .jqx-editor-input li[value=deleteColumn] .editor-icon::before { content: var(--jqx-icon-column-delete); } .jqx-editor-input li[value=h1] a { font-size: 1.5rem; font-weight: bold; } .jqx-editor-input li[value=h2] a { font-size: 1.3rem; font-weight: bold; } .jqx-editor-input li[value=h3] a { font-size: 1.1rem; font-weight: bold; } .jqx-editor-input li[value=h4] a { font-size: 0.9rem; font-weight: bold; } .jqx-editor-input li[value=h5] a { font-size: 0.8rem; font-weight: bold; } .jqx-editor-input li[value=h6] a { font-size: 0.7rem; font-weight: bold; } .jqx-editor-input li[value=segueUi] a { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .jqx-editor-input li[value=arial] a { font-family: Arial, Helvetica, sans-serif; } .jqx-editor-input li[value=georgia] a { font-family: Georgia, "Times New Roman", Times, serif; } .jqx-editor-input li[value=impact] a { font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; } .jqx-editor-input li[value=tahoma] a { font-family: Tahoma, Geneva, Verdana, sans-serif; } .jqx-editor-input li[value=timesnewRoman] a { font-family: "Times New Roman", Times, serif; } .jqx-editor-input li[value=verdana] a { font-family: Verdana, Geneva, Tahoma, sans-serif; } /* --- Editor Window --- */ .jqx-editor-page-label { cursor: pointer; text-decoration: underline; color: var(--jqx-primary); } .jqx-editor .jqx-editor-page { display: none; } .jqx-editor-page-window { padding: 0px; box-shadow: none !important; border-color: transparent; } .jqx-editor-page-window .jqx-editor { border-color: transparent; } .jqx-editor-page-window .jqx-content { padding: 0px !important; } .jqx-editor-page-window .jqx-header-section { cursor: default !important; } .jqx-editor-page-window[active] { border: none; cursor: default; } .jqx-editor-window { --jqx-window-default-width: auto; --jqx-window-default-height: auto; --jqx-window-header-height: var(--jqx-editor-window-header-height); --jqx-window-footer-height: var(--jqx-editor-window-footer-height); --jqx-window-header-footer-padding: 10px; --jqx-window-header-background: transparent; --jqx-window-footer-padding: 10px; --jqx-window-content-padding: 20px; max-width: 95vw; max-height: 95vh; } .jqx-editor-window.jqx-window .jqx-content-container > .jqx-content { padding: initial; align-items: flex-start; } .jqx-editor-window .jqx-editor-window-button { width: 100%; height: 100%; --jqx-button-padding: 0.2rem 16px; } .jqx-editor-window .jqx-editor-window-button:not(:last-of-type) { margin-right: 2.5%; } .jqx-editor-window .jqx-editor-window-content-wrapper { grid-template-rows: auto minmax(auto, 1fr); padding: var(--jqx-window-content-padding); width: 100%; } .jqx-editor-window .jqx-editor-window-content-wrapper > div { display: grid; width: var(--jqx-box-width); grid-row-gap: 10px; justify-content: center; grid-template-columns: 100%; } .jqx-editor-window .jqx-editor-window-editor { display: grid; grid-row-gap: 5px; grid-column-gap: 10px; } .jqx-editor-window .jqx-editor-window-editor > .jqx-input, .jqx-editor-window .jqx-editor-window-editor > .jqx-list-box { width: 100%; } .jqx-editor-window .jqx-editor-window-editor > .jqx-check-box { width: max-content; } .jqx-editor-window .jqx-editor-window-editor[multiple] .jqx-editor-window-editor { grid-template-columns: repeat(2, minmax(0, 1fr)); } .jqx-editor-window .jqx-editor-window-editor[type=results] label { display: flex; justify-content: space-between; } .jqx-editor-window .jqx-editor-window-editor[type=results] label[matches]::after { content: attr(selected) " of " attr(matches); } .jqx-editor-window .jqx-editor-window-editor[type=file] .jqx-drop-zone { width: 100%; height: 100px; border: calc(2 * var(--jqx-border-width)) dashed var(--jqx-border); border-radius: var(--jqx-border-radius); } .jqx-editor-window .jqx-editor-window-editor[type=file] .jqx-file-upload { --jqx-file-upload-drop-zone-height: 100px; width: 100%; order: 1; min-height: initial; } .jqx-editor-window .jqx-editor-window-editor[type=file] .jqx-file-upload .jqx-browse-button { margin: initial; } .jqx-editor-window .jqx-editor-window-editor[type=file] .jqx-file-upload .jqx-item-upload-button { display: none; } .jqx-editor-window .jqx-editor-window-editor[type=file] .jqx-file-upload .jqx-file-upload-header { margin-bottom: 5px; padding: initial; } .jqx-editor-window .jqx-editor-window-editor[type=file] .jqx-file-upload .jqx-file-upload-container { padding: initial; } .jqx-editor-window .jqx-editor-window-editor[type=file] .jqx-file-upload .jqx-selected-files { padding: initial; } .jqx-editor-window .jqx-editor-window-editor[type=file] .jqx-file-upload .jqx-selected-files .jqx-file { display: flex; margin: initial; border: var(--jqx-border-width) solid var(--jqx-border); border-radius: var(--jqx-border-radius); } .jqx-editor-window .jqx-editor-window-editor[type=file] .jqx-file-upload .jqx-selected-files .jqx-item-upload-button:after, .jqx-editor-window .jqx-editor-window-editor[type=file] .jqx-file-upload .jqx-selected-files .jqx-item-pause-button:after, .jqx-editor-window .jqx-editor-window-editor[type=file] .jqx-file-upload .jqx-selected-files .jqx-item-cancel-button:after { position: initial; left: initial; top: initial; display: flex; align-items: center; justify-content: center; } .jqx-editor-window .jqx-editor-window-editor[type=file] .jqx-file-upload .jqx-selected-files .jqx-item-name { width: 100%; } .jqx-element .jqx-editor-task-box { padding: 6px; display: grid; grid-template-columns: 20px 1fr 20px auto 20px 20px auto 0px; max-width: 700px; border-bottom: 1px solid var(--jqx-border); position: relative; align-items: baseline; margin-top: 3px; margin-right: 20px; } .jqx-editor .jqx-editor-task-box .task-icon, .jqx-editor .jqx-editor-task-box .plus-icon, .jqx-editor .jqx-editor-task-box .user-icon, .jqx-editor .jqx-editor-task-box .delete-icon, .jqx-editor .jqx-editor-task-box .due-date-icon, .jqx-editor .jqx-editor-task-box .priority-icon { cursor: pointer; } .jqx-editor .jqx-editor-task-box input { outline: none; min-width: 150px; } .jqx-editor .jqx-editor-task-box:hover .plus-icon { font-family: var(--jqx-font-family-icon); width: 16px; height: 16px; position: absolute; left: 50%; bottom: -10px; } .jqx-editor .jqx-editor-task-box:hover .plus-icon:after { content: var(--jqx-icon-plus-circled); } .jqx-editor .jqx-editor-task-box:hover .plus-icon:hover { color: var(--jqx-primary); } .jqx-editor .jqx-editor-task-box:hover .delete-icon { font-family: var(--jqx-font-family-icon); width: 16px; height: 16px; position: absolute; left: calc(100% - 8px); top: calc(50% - 8px); } .jqx-editor .jqx-editor-task-box:hover .delete-icon:after { content: var(--jqx-icon-delete); } .jqx-editor .jqx-editor-task-box:hover .delete-icon:hover { color: var(--jqx-primary); } .jqx-editor .jqx-editor-task-box .text { min-height: 16px; } .jqx-editor .jqx-editor-task-box .text, .jqx-editor .jqx-editor-task-box .label { border: 1px solid transparent; } .jqx-editor .jqx-editor-task-box .text:focus, .jqx-editor .jqx-editor-task-box .text:hover, .jqx-editor .jqx-editor-task-box .label:focus, .jqx-editor .jqx-editor-task-box .label:hover { cursor: pointer; border: 1px solid var(--jqx-border); } /* --- Editor Tooltip --- */ .jqx-tooltip .jqx-tooltip-content { display: flex; background-color: var(--jqx-background); color: var(--jqx-background-color); border-color: var(--jqx-background); opacity: initial; } .jqx-tooltip.jqx-editor-context-menu:not([animation=none]) { transition: opacity 0.2s ease-in, visibility 0.2s ease-in, transform 0.2s ease-in; } .jqx-tooltip.jqx-editor-toolbar { --jqx-tooltip-padding: 5px; --jqx-tooltip-arrow-color: var(--jqx-surface); } .jqx-tooltip.jqx-editor-toolbar .jqx-tooltip-content { background-color: var(--jqx-surface); color: var(--jqx-surface-color); border-color: var(--jqx-surface); } .jqx-tooltip.jqx-editor-toolbar.jqx-editor-inline-toolbar { height: auto !important; } .jqx-tooltip.jqx-editor-toolbar.jqx-editor-inline-toolbar .jqx-tooltip-content { max-width: var(--jqx-editor-inline-toolbar-max-width); flex-wrap: wrap; } .jqx-tooltip.jqx-editor-toolbar:not([animation=none]) .jqx-editor-toolbar-item { transition: background-color 0.2ms linear, border-color 0.2ms ease-in-out, color 0.2ms linear, box-shadow 0.2s ease-in-out; } .jqx-tooltip.jqx-editor-toolbar:not(.jqx-editor-drop-down-toolbar) .jqx-editor-toolbar-item:not(:first-of-type) { margin-left: var(--jqx-editor-toolbar-item-margin); } .jqx-tooltip.jqx-editor-context-menu { opacity: 0.2; z-index: 999999; } .jqx-tooltip.jqx-editor-context-menu.jqx-editor-task-menu { transition: transform 0.2s cubic-bezier(0.075, 0.82, 0.165, 1); transform: scaleX(1) scaleY(0) !important; } .jqx-tooltip.jqx-editor-context-menu.jqx-editor-task-menu[visible] { transform: scaleX(1) scaleY(1) !important; } .jqx-tooltip.jqx-editor-context-menu.jqx-editor-task-menu .jqx-tooltip-content { padding: 0px; border: none; } .jqx-tooltip.jqx-editor-context-menu.jqx-editor-task-menu .jqx-editor-context-menu-item { padding: 5px 10px; } .jqx-tooltip.jqx-editor-context-menu:not(.jqx-editor-ai-menu) { transform: scale(0); } .jqx-tooltip.jqx-editor-context-menu { -webkit-transform-origin: 0 0; transform-origin: 0 0; } .jqx-tooltip.jqx-editor-context-menu[visible] { opacity: 1; transform: scale(1); } .jqx-tooltip .jqx-editor-context-menu-item-container { width: 100%; height: 100%; display: grid; align-items: center; justify-content: flex-start; } .jqx-tooltip .jqx-editor-context-menu-item-container .jqx-editor-context-menu-item { -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; user-select: none; height: var(--jqx-list-item-height); padding: var(--jqx-list-item-padding); border-top-left-radius: var(--jqx-item-border-top-left-radius); border-top-right-radius: var(--jqx-item-border-top-right-radius); border-bottom-left-radius: var(--jqx-item-border-bottom-left-radius); border-bottom-right-radius: var(--jqx-item-border-bottom-right-radius); white-space: nowrap; text-overflow: ellipsis; background: var(--jqx-background); color: var(--jqx-background-color); display: flex; align-items: center; position: relative; padding-left: var(--jqx-column-icon-size); outline: none; } .jqx-tooltip .jqx-editor-context-menu-item-container .jqx-editor-context-menu-item[value=category] { pointer-events: none; color: var(--jqx-disabled); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; font-size: 12px; color: rgb(127, 127, 127); height: 24px; border-radius: 0px; margin-left: -16px; font-weight: 500; } .jqx-tooltip .jqx-editor-context-menu-item-container .jqx-editor-context-menu-item::before { font-size: var(--jqx-font-size); font-family: var(--jqx-font-family-icon); display: flex; align-items: center; justify-content: center; position: absolute; left: 0; width: var(--jqx-column-icon-size); line-height: 1rem; } .jqx-tooltip .jqx-editor-context-menu-item-container .jqx-editor-context-menu-item[description] { height: auto; display: flex; flex-direction: column; align-items: flex-start; } .jqx-tooltip .jqx-editor-context-menu-item-container .jqx-editor-context-menu-item[description] .jqx-editor-context-menu-item-description { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; font-size: 12px; color: rgb(127, 127, 127); } .jqx-tooltip .jqx-editor-context-menu-item-container .jqx-editor-context-menu-item[description][selected] .jqx-editor-context-menu-item-description { color: var(--jqx-primary); } .jqx-tooltip .jqx-editor-context-menu-item-container .jqx-editor-context-menu-item[description]:before { margin-top: 10px; } .jqx-tooltip .jqx-editor-context-menu-item-container .jqx-editor-context-menu-item[value=insertRowBefore]::before { content: var(--jqx-icon-row-before); } .jqx-tooltip .jqx-editor-context-menu-item-container .jqx-editor-context-menu-item[value=insertRowAfter]::before { content: var(--jqx-icon-row-after); transform: rotate(180deg); } .jqx-tooltip .jqx-editor-context-menu-item-container .jqx-editor-context-menu-item[value=deleteRow]::before { content: var(--jqx-icon-row-delete); } .jqx-tooltip .jqx-editor-context-menu-item-container .jqx-editor-context-menu-item[value=insertColumnLeft]::before { content: var(--jqx-icon-column-left); transform: rotate(-90deg); } .jqx-tooltip .jqx-editor-context-menu-item-container .jqx-editor-context-menu-item[value=insertColumnRight]::before { content: var(--jqx-icon-column-right); transform: rotate(90deg); } .jqx-tooltip .jqx-editor-context-menu-item-container .jqx-editor-context-menu-item[value=deleteColumn]::before { content: var(--jqx-icon-column-delete); } .jqx-tooltip .jqx-editor-context-menu-item-container .jqx-editor-context-menu-item[value=tableProperties]::before { content: var(--jqx-icon-table); } .jqx-tooltip .jqx-editor-context-menu-item-container .jqx-editor-context-menu-item[value=imageProperties]::before { content: var(--jqx-icon-image); } .jqx-tooltip .jqx-editor-context-menu-item-container .jqx-editor-context-menu-item[value=linkProperties]::before { content: var(--jqx-icon-link); } .jqx-tooltip .jqx-editor-context-menu-item-container .jqx-editor-context-menu-item[value=videoProperties]::before { content: var(--jqx-icon-link); } .jqx-tooltip .jqx-editor-context-menu-item-container .jqx-editor-context-menu-item[value=deleteTable]::before { content: var(--jqx-icon-delete); } .jqx-tooltip .jqx-editor-context-menu-item-container .jqx-editor-context-menu-item[value=copyImage]::before { content: var(--jqx-icon-copy-record); } .jqx-tooltip .jqx-editor-context-menu-item-container .jqx-editor-context-menu-item[value=copyVideo]::before { content: var(--jqx-icon-copy-record); } .jqx-tooltip .jqx-editor-context-menu-item-container .jqx-editor-context-menu-item[value=cutImage]::before { content: var(--jqx-icon-cut); transform: rotate(-90deg); } .jqx-tooltip .jqx-editor-context-menu-item-container .jqx-editor-context-menu-item[value=cutVideo]::before { content: var(--jqx-icon-cut); transform: rotate(-90deg); } .jqx-tooltip .jqx-editor-context-menu-item-container .jqx-editor-context-menu-item[value=deleteImage]::before { content: var(--jqx-icon-delete); } .jqx-tooltip .jqx-editor-context-menu-item-container .jqx-editor-context-menu-item[value=deleteVideo]::before { content: var(--jqx-icon-delete); } .jqx-tooltip .jqx-editor-context-menu-item-container .jqx-editor-context-menu-item[value=deleteLink]::before { content: var(--jqx-icon-delete); } .jqx-tooltip .jqx-editor-context-menu-item-container .jqx-editor-context-menu-item[value=createLink]::before { content: var(--jqx-icon-link); } .jqx-tooltip .jqx-editor-context-menu-item-container .jqx-editor-context-menu-item[value=deleteLink]::before { content: var(--jqx-icon-unlink); } .jqx-tooltip .jqx-editor-context-menu-item-container .jqx-editor-context-menu-item[value=caption]::before { content: var(--jqx-icon-format-clear); } .jqx-tooltip .jqx-editor-context-menu-item-container .jqx-editor-context-menu-item[value=selectAll]::before { content: var(--jqx-icon-group); } .jqx-tooltip .jqx-editor-context-menu-item-container .jqx-editor-context-menu-item[value=date]::before { content: var(--jqx-icon-calendar); } .jqx-tooltip .jqx-editor-context-menu-item-container .jqx-editor-context-menu-item[value=rewrite]::before { content: var(--jqx-icon-edit); } .jqx-tooltip .jqx-editor-context-menu-item-container .jqx-editor-context-menu-item[value=continue_writing]::before { content: var(--jqx-icon-arrow-right); } .jqx-tooltip .jqx-editor-context-menu-item-container .jqx-editor-context-menu-item[value=fix_spelling_grammar]::before { content: var(--jqx-icon-mode-edit); } .jqx-tooltip .jqx-editor-context-menu-item-container .jqx-editor-context-menu-item[value=summarize]::before { content: var(--jqx-icon-file); } .jqx-tooltip .jqx-editor-context-menu-item-container .jqx-editor-context-menu-item[value=make_shorter]::before { content: var(--jqx-icon-resize-small); } .jqx-tooltip .jqx-editor-context-menu-item-container .jqx-editor-context-menu-item[value=make_longer]::before { content: var(--jqx-icon-resize-full); } .jqx-tooltip .jqx-editor-context-menu-item-container .jqx-editor-context-menu-item[value=explain]::before { content: var(--jqx-icon-help-circled); } .jqx-tooltip .jqx-editor-context-menu-item-container .jqx-editor-context-menu-item[value=concise]::before { content: var(--jqx-icon-ai); content: url("data:image/svg+xml,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M16.3333%207.33333C16.3333%207.33333%2016.1328%205.44793%2015.3411%204.65887C14.5469%203.8724%2012.6667%203.66667%2012.6667%203.66667C12.6667%203.66667%2014.5521%203.46615%2015.3411%202.67447C16.1276%201.8802%2016.3333%200%2016.3333%200C16.3333%200%2016.5339%201.8854%2017.3255%202.67447C18.112%203.46093%2020%203.66667%2020%203.66667C20%203.66667%2018.1146%203.86719%2017.3255%204.65887C16.5391%205.44533%2016.3333%207.33333%2016.3333%207.33333ZM7.5%205C7.5%205%207.08594%208.8594%205.47393%2010.4739C3.85933%2012.0885%200%2012.5%200%2012.5C0%2012.5%203.8594%2012.9141%205.47393%2014.5261C7.08853%2016.1407%207.5%2020%207.5%2020C7.5%2020%207.91406%2016.1406%209.52607%2014.5261C11.1407%2012.9115%2015%2012.5%2015%2012.5C15%2012.5%2011.1406%2012.0859%209.52607%2010.4739C7.91147%208.85933%207.5%205%207.5%205ZM17.1667%2016.6667C16.7057%2016.6667%2016.3333%2017.0391%2016.3333%2017.5C16.3333%2017.9609%2016.7057%2018.3333%2017.1667%2018.3333C17.6276%2018.3333%2018%2017.9609%2018%2017.5C18%2017.0391%2017.6276%2016.6667%2017.1667%2016.6667ZM2.5%204C2.96094%204%203.33333%203.62761%203.33333%203.16667C3.33333%202.70573%202.96094%202.33333%202.5%202.33333C2.03906%202.33333%201.66667%202.70573%201.66667%203.16667C1.66667%203.62761%202.03906%204%202.5%204Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E"); opacity: 0.9; } .jqx-tooltip .jqx-editor-context-menu-item-container .jqx-editor-context-menu-item[value=professional]::before { content: var(--jqx-icon-ai); content: url("data:image/svg+xml,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M16.3333%207.33333C16.3333%207.33333%2016.1328%205.44793%2015.3411%204.65887C14.5469%203.8724%2012.6667%203.66667%2012.6667%203.66667C12.6667%203.66667%2014.5521%203.46615%2015.3411%202.67447C16.1276%201.8802%2016.3333%200%2016.3333%200C16.3333%200%2016.5339%201.8854%2017.3255%202.67447C18.112%203.46093%2020%203.66667%2020%203.66667C20%203.66667%2018.1146%203.86719%2017.3255%204.65887C16.5391%205.44533%2016.3333%207.33333%2016.3333%207.33333ZM7.5%205C7.5%205%207.08594%208.8594%205.47393%2010.4739C3.85933%2012.0885%200%2012.5%200%2012.5C0%2012.5%203.8594%2012.9141%205.47393%2014.5261C7.08853%2016.1407%207.5%2020%207.5%2020C7.5%2020%207.91406%2016.1406%209.52607%2014.5261C11.1407%2012.9115%2015%2012.5%2015%2012.5C15%2012.5%2011.1406%2012.0859%209.52607%2010.4739C7.91147%208.85933%207.5%205%207.5%205ZM17.1667%2016.6667C16.7057%2016.6667%2016.3333%2017.0391%2016.3333%2017.5C16.3333%2017.9609%2016.7057%2018.3333%2017.1667%2018.3333C17.6276%2018.3333%2018%2017.9609%2018%2017.5C18%2017.0391%2017.6276%2016.6667%2017.1667%2016.6667ZM2.5%204C2.96094%204%203.33333%203.62761%203.33333%203.16667C3.33333%202.70573%202.96094%202.33333%202.5%202.33333C2.03906%202.33333%201.66667%202.70573%201.66667%203.16667C1.66667%203.62761%202.03906%204%202.5%204Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E"); opacity: 0.9; } .jqx-tooltip .jqx-editor-context-menu-item-container .jqx-editor-context-menu-item[value=casual]::before { content: var(--jqx-icon-ai); content: url("data:image/svg+xml,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M16.3333%207.33333C16.3333%207.33333%2016.1328%205.44793%2015.3411%204.65887C14.5469%203.8724%2012.6667%203.66667%2012.6667%203.66667C12.6667%203.66667%2014.5521%203.46615%2015.3411%202.67447C16.1276%201.8802%2016.3333%200%2016.3333%200C16.3333%200%2016.5339%201.8854%2017.3255%202.67447C18.112%203.46093%2020%203.66667%2020%203.66667C20%203.66667%2018.1146%203.86719%2017.3255%204.65887C16.5391%205.44533%2016.3333%207.33333%2016.3333%207.33333ZM7.5%205C7.5%205%207.08594%208.8594%205.47393%2010.4739C3.85933%2012.0885%200%2012.5%200%2012.5C0%2012.5%203.8594%2012.9141%205.47393%2014.5261C7.08853%2016.1407%207.5%2020%207.5%2020C7.5%2020%207.91406%2016.1406%209.52607%2014.5261C11.1407%2012.9115%2015%2012.5%2015%2012.5C15%2012.5%2011.1406%2012.0859%209.52607%2010.4739C7.91147%208.85933%207.5%205%207.5%205ZM17.1667%2016.6667C16.7057%2016.6667%2016.3333%2017.0391%2016.3333%2017.5C16.3333%2017.9609%2016.7057%2018.3333%2017.1667%2018.3333C17.6276%2018.3333%2018%2017.9609%2018%2017.5C18%2017.0391%2017.6276%2016.6667%2017.1667%2016.6667ZM2.5%204C2.96094%204%203.33333%203.62761%203.33333%203.16667C3.33333%202.70573%202.96094%202.33333%202.5%202.33333C2.03906%202.33333%201.66667%202.70573%201.66667%203.16667C1.66667%203.62761%202.03906%204%202.5%204Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E"); opacity: 0.9; } .jqx-tooltip .jqx-editor-context-menu-item-container .jqx-editor-context-menu-item[value=funny]::before { content: var(--jqx-icon-ai); content: url("data:image/svg+xml,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M16.3333%207.33333C16.3333%207.33333%2016.1328%205.44793%2015.3411%204.65887C14.5469%203.8724%2012.6667%203.66667%2012.6667%203.66667C12.6667%203.66667%2014.5521%203.46615%2015.3411%202.67447C16.1276%201.8802%2016.3333%200%2016.3333%200C16.3333%200%2016.5339%201.8854%2017.3255%202.67447C18.112%203.46093%2020%203.66667%2020%203.66667C20%203.66667%2018.1146%203.86719%2017.3255%204.65887C16.5391%205.44533%2016.3333%207.33333%2016.3333%207.33333ZM7.5%205C7.5%205%207.08594%208.8594%205.47393%2010.4739C3.85933%2012.0885%200%2012.5%200%2012.5C0%2012.5%203.8594%2012.9141%205.47393%2014.5261C7.08853%2016.1407%207.5%2020%207.5%2020C7.5%2020%207.91406%2016.1406%209.52607%2014.5261C11.1407%2012.9115%2015%2012.5%2015%2012.5C15%2012.5%2011.1406%2012.0859%209.52607%2010.4739C7.91147%208.85933%207.5%205%207.5%205ZM17.1667%2016.6667C16.7057%2016.6667%2016.3333%2017.0391%2016.3333%2017.5C16.3333%2017.9609%2016.7057%2018.3333%2017.1667%2018.3333C17.6276%2018.3333%2018%2017.9609%2018%2017.5C18%2017.0391%2017.6276%2016.6667%2017.1667%2016.6667ZM2.5%204C2.96094%204%203.33333%203.62761%203.33333%203.16667C3.33333%202.70573%202.96094%202.33333%202.5%202.33333C2.03906%202.33333%201.66667%202.70573%201.66667%203.16667C1.66667%203.62761%202.03906%204%202.5%204Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E"); opacity: 0.9; } .jqx-tooltip .jqx-editor-context-menu-item-container .jqx-editor-context-menu-item[value=translate_english]::before { content: var(--jqx-icon-docs); } .jqx-tooltip .jqx-editor-context-menu-item-container .jqx-editor-context-menu-item[value=translate_spanish]::before { content: var(--jqx-icon-docs); } .jqx-tooltip .jqx-editor-context-menu-item-container .jqx-editor-context-menu-item[value=translate_portuguese]::before { content: var(--jqx-icon-docs); } .jqx-tooltip .jqx-editor-context-menu-item-container .jqx-editor-context-menu-item[value=translate_italian]::before { content: var(--jqx-icon-docs); } .jqx-tooltip .jqx-editor-context-menu-item-container .jqx-editor-context-menu-item[value=translate_dutch]::before { content: var(--jqx-icon-docs); } .jqx-tooltip .jqx-editor-context-menu-item-container .jqx-editor-context-menu-item[value=translate_chinese]::before { content: var(--jqx-icon-docs); } .jqx-tooltip .jqx-editor-context-menu-item-container .jqx-editor-context-menu-item[value=translate_korean]::before { content: var(--jqx-icon-docs); } .jqx-tooltip .jqx-editor-context-menu-item-container .jqx-editor-context-menu-item[value=translate_japanese]::before { content: var(--jqx-icon-docs); } .jqx-tooltip .jqx-editor-context-menu-item-container .jqx-editor-context-menu-item[value=translate_russian]::before { content: var(--jqx-icon-docs); } .jqx-tooltip .jqx-editor-context-menu-item-container .jqx-editor-context-menu-item[value=h1]::before { content: var(--jqx-icon-header); content: var(--jqx-icon-header) "¹"; } .jqx-tooltip .jqx-editor-context-menu-item-container .jqx-editor-context-menu-item[value=h2]::before { content: var(--jqx-icon-header); content: var(--jqx-icon-header) "²"; } .jqx-tooltip .jqx-editor-context-menu-item-container .jqx-editor-context-menu-item[value=h3]::before { content: var(--jqx-icon-header); content: var(--jqx-icon-header) "³"; } .jqx-tooltip .jqx-editor-context-menu-item-container .jqx-editor-context-menu-item[value=h4]::before { content: var(--jqx-icon-header); content: var(--jqx-icon-header) "⁴"; } .jqx-tooltip .jqx-editor-context-menu-item-container .jqx-editor-context-menu-item[value=h5]::before { content: var(--jqx-icon-header); content: var(--jqx-icon-header) "⁵"; } .jqx-tooltip .jqx-editor-context-menu-item-container .jqx-editor-context-menu-item[value=h6]::before { content: var(--jqx-icon-header); content: var(--jqx-icon-header) "⁶"; } .jqx-tooltip .jqx-editor-context-menu-item-container .jqx-editor-context-menu-item[value=cut]::before { content: var(--jqx-icon-cut); transform: rotate(-90deg); } .jqx-tooltip .jqx-editor-context-menu-item-container .jqx-editor-context-menu-item[value=copy]::before { content: var(--jqx-icon-copy-record); } .jqx-tooltip .jqx-editor-context-menu-item-container .jqx-editor-context-menu-item[value=table]::before { content: var(--jqx-icon-table); } .jqx-tooltip .jqx-editor-context-menu-item-container .jqx-editor-context-menu-item[value=text]::before { content: var(--jqx-icon-font); } .jqx-tooltip .jqx-editor-context-menu-item-container .jqx-editor-context-menu-item[value=togglelist]::before { content: var(--jqx-icon-arrow-right); } .jqx-tooltip .jqx-editor-context-menu-item-container .jqx-editor-context-menu-item[value=image]::before { content: var(--jqx-icon-image); } .jqx-tooltip .jqx-editor-context-menu-item-container .jqx-editor-context-menu-item[value=video]::before { content: var(--jqx-icon-video); } .jqx-tooltip .jqx-editor-context-menu-item-container .jqx-editor-context-menu-item[value=file]::before { content: var(--jqx-icon-file); } .jqx-tooltip .jqx-editor-context-menu-item-container .jqx-editor-context-menu-item[value=hyperlink]::before { content: var(--jqx-icon-link); } .jqx-tooltip .jqx-editor-context-menu-item-container .jqx-editor-context-menu-item[value=strikethrough]::before { content: var(--jqx-icon-strike-through); } .jqx-tooltip .jqx-editor-context-menu-item-container .jqx-editor-context-menu-item[value=caption]::before { content: var(--jqx-icon-format-clear); } .jqx-tooltip .jqx-editor-context-menu-item-container .jqx-editor-context-menu-item[value=orderedlist]::before { content: var(--jqx-icon-list-ordered); } .jqx-tooltip .jqx-editor-context-menu-item-container .jqx-editor-context-menu-item[value=unorderedlist]::before { content: var(--jqx-icon-list-unordered); } .jqx-tooltip .jqx-editor-context-menu-item-container .jqx-editor-context-menu-item[value=checklist]::before { content: var(--jqx-icon-list-check); } .jqx-tooltip .jqx-editor-context-menu-item-container .jqx-editor-context-menu-item[value=callout]::before { content: var(--jqx-icon-attention-circled); } .jqx-tooltip .jqx-editor-context-menu-item-container .jqx-editor-context-menu-item[value=blockquote]::before { content: var(--jqx-icon-blockquote); content: "“"; font-size: 24px; font-weight: bold; } .jqx-tooltip .jqx-editor-context-menu-item-container .jqx-editor-context-menu-item[value=divider]::before { content: var(--jqx-icon-divider); content: "—"; font-size: 24px; font-weight: bold; } .jqx-tooltip .jqx-editor-context-menu-item-container .jqx-editor-context-menu-item[value=ai]::before { content: var(--jqx-icon-ai); content: url("data:image/svg+xml,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M16.3333%207.33333C16.3333%207.33333%2016.1328%205.44793%2015.3411%204.65887C14.5469%203.8724%2012.6667%203.66667%2012.6667%203.66667C12.6667%203.66667%2014.5521%203.46615%2015.3411%202.67447C16.1276%201.8802%2016.3333%200%2016.3333%200C16.3333%200%2016.5339%201.8854%2017.3255%202.67447C18.112%203.46093%2020%203.66667%2020%203.66667C20%203.66667%2018.1146%203.86719%2017.3255%204.65887C16.5391%205.44533%2016.3333%207.33333%2016.3333%207.33333ZM7.5%205C7.5%205%207.08594%208.8594%205.47393%2010.4739C3.85933%2012.0885%200%2012.5%200%2012.5C0%2012.5%203.8594%2012.9141%205.47393%2014.5261C7.08853%2016.1407%207.5%2020%207.5%2020C7.5%2020%207.91406%2016.1406%209.52607%2014.5261C11.1407%2012.9115%2015%2012.5%2015%2012.5C15%2012.5%2011.1406%2012.0859%209.52607%2010.4739C7.91147%208.85933%207.5%205%207.5%205ZM17.1667%2016.6667C16.7057%2016.6667%2016.3333%2017.0391%2016.3333%2017.5C16.3333%2017.9609%2016.7057%2018.3333%2017.1667%2018.3333C17.6276%2018.3333%2018%2017.9609%2018%2017.5C18%2017.0391%2017.6276%2016.6667%2017.1667%2016.6667ZM2.5%204C2.96094%204%203.33333%203.62761%203.33333%203.16667C3.33333%202.70573%202.96094%202.33333%202.5%202.33333C2.03906%202.33333%201.66667%202.70573%201.66667%203.16667C1.66667%203.62761%202.03906%204%202.5%204Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E"); opacity: 0.9; } .jqx-tooltip .jqx-editor-context-menu-item-container .jqx-editor-context-menu-item[value=twoColumns]::before { content: var(--jqx-icon-column); } .jqx-tooltip .jqx-editor-context-menu-item-container .jqx-editor-context-menu-item[value=threeColumns]::before { content: var(--jqx-icon-column); content: var(--jqx-icon-column); } .jqx-tooltip .jqx-editor-context-menu-item-container .jqx-editor-context-menu-item[value=fourColumns]::before { content: var(--jqx-icon-column); content: var(--jqx-icon-column); } .jqx-tooltip .jqx-editor-context-menu-item-container .jqx-editor-context-menu-item[value=emoji]::before { content: var(--jqx-icon-emoji); content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik03IDBDMy4xNDAxMiAwIDAgMy4xNDAwNyAwIDYuOTk5NzhDMCAxMC44NTk3IDMuMTQwMTIgMTQgNyAxNEMxMC44NTk3IDE0IDE0IDEwLjg1OTcgMTQgNi45OTk3OEMxNCAzLjE0MDA3IDEwLjg1OTcgMCA3IDBaTTcgMC42NjQ2MjdDMTAuNDkzMSAwLjY2NDYyNyAxMy4zMzUyIDMuNTA2NTEgMTMuMzM1MiA2Ljk5OTc4QzEzLjMzNTIgMTAuNDkzMyAxMC40OTMxIDEzLjMzNTQgNyAxMy4zMzU0QzMuNTA2NjMgMTMuMzM1NCAwLjY2NDc3MSAxMC40OTMzIDAuNjY0NzcxIDYuOTk5NzhDMC42NjQ3NzEgMy41MDY1MSAzLjUwNjYzIDAuNjY0NjI3IDcgMC42NjQ2MjdaTTQuNjcwNzEgNC4zNTc3MkM0LjIyNTMxIDQuMzU3NzIgMy44NjM5OCA0LjcxODMyIDMuODYzOTggNS4xNjM4NEMzLjg2Mzk4IDUuNjA5MzYgNC4yMjUzMSA1Ljk3MDgyIDQuNjcwNzEgNS45NzA4MkM1LjExNjEgNS45NzA4MiA1LjQ3NzQzIDUuNjA5MzYgNS40Nzc0MyA1LjE2Mzg0QzUuNDc3NDMgNC43MTgzMiA1LjExNjEgNC4zNTc3MiA0LjY3MDcxIDQuMzU3NzJaTTkuMzA4NTIgNC4zNTc3MkM4Ljg2MzEyIDQuMzU3NzIgOC41MDE3OSA0LjcxODMyIDguNTAxNzkgNS4xNjM4NEM4LjUwMTc5IDUuNjA5MzYgOC44NjMxMiA1Ljk3MDgyIDkuMzA4NTIgNS45NzA4MkM5Ljc1NDE0IDUuOTcwODIgMTAuMTE0OCA1LjYwOTM2IDEwLjExNDggNS4xNjM4NEMxMC4xMTQ4IDQuNzE4MzIgOS43NTQxNCA0LjM1NzcyIDkuMzA4NTIgNC4zNTc3MlpNNC4yNTYwOSA4LjI2NUM0LjA3MjYxIDguMjY1IDMuOTIzNyA4LjQxMzY1IDMuOTIzNyA4LjU5NzMxQzMuOTIzNyA5Ljk5OTAxIDUuMDc4MDQgMTEuMTM5NCA2LjQ5NjY2IDExLjEzOTRINy42MTY3M0M5LjA1OTUgMTEuMTM5NCAxMC4xODk3IDEwLjAzNjQgMTAuMTg5NyA4LjYyODQ3QzEwLjE4OTcgOC40NDQ4MSAxMC4wNDEgOC4yOTYxNSA5Ljg1NzMgOC4yOTYxNUM5LjY3MzgzIDguMjk2MTUgOS41MjQ5MiA4LjQ0NDgxIDkuNTI0OTIgOC42Mjg0N0M5LjUyNDkyIDkuNjYzNzMgOC42ODY3OSAxMC40NzQ4IDcuNjE2NzMgMTAuNDc0OEg2LjQ5NjY2QzUuNDI2NiAxMC40NzQ4IDQuNTg4NDggOS42NDk4NiA0LjU4ODQ4IDguNTk3MzFDNC41ODg0OCA4LjQxMzY1IDQuNDM5NTcgOC4yNjUgNC4yNTYwOSA4LjI2NVoiIGZpbGw9ImJsYWNrIi8+Cjwvc3ZnPgo="); opacity: 0.9; margin-top: 2px; } .jqx-tooltip .jqx-editor-context-menu-item-container .jqx-editor-context-menu-item[value=user]::before { content: var(--jqx-icon-user); } .jqx-tooltip .jqx-editor-context-menu-item-container .jqx-editor-context-menu-item[value=page]::before { content: var(--jqx-icon-link); } .jqx-tooltip .jqx-editor-context-menu-item-container .jqx-editor-context-menu-item[value=pageLink]::before { content: var(--jqx-icon-link); } .jqx-tooltip .jqx-editor-context-menu-item-container .jqx-editor-context-menu-item[value=task]::before { content: var(--jqx-icon-check); } .jqx-tooltip .jqx-editor-context-menu-item-container .jqx-editor-context-menu-item[value=deleteTab]::before { content: var(--jqx-icon-delete); } .jqx-tooltip .jqx-editor-context-menu-item-container .jqx-editor-context-menu-item[value=paste]::before { content: var(--jqx-icon-paste); } .jqx-tooltip .jqx-editor-context-menu-item-container .jqx-editor-context-menu-item:hover { background: var(--jqx-ui-state-hover); color: var(--jqx-ui-state-color-hover); } .jqx-tooltip .jqx-editor-context-menu-item-container .jqx-editor-context-menu-item[selected] { background-color: var(--jqx-ui-state-selected); border-color: var(--jqx-ui-state-border-selected); color: var(--jqx-ui-state-color-selected); } .jqx-tooltip .jqx-editor-context-menu-item-container .jqx-editor-context-menu-item[disabled] { opacity: 0.55; cursor: default; pointer-events: none; } .jqx-editor-drop-down-toolbar:not([animation=none]) { animation: jqx-drop-down-list-jqx-animate-closing 0.2s ease-in; transition: animation 0.2s ease-in, opacity 0.2s ease-in, visibility 0.2s ease-in; } .jqx-editor-drop-down-toolbar:not([animation=none])[visible] { animation: jqx-drop-down-list-jqx-animate-opening 0.2s ease-out; transition: animation 0.2s ease-out, opacity 0.2s ease-out, visibility 0.2s ease-out; } .jqx-editor-drop-down-toolbar:not([arrow-direction]), .jqx-editor-drop-down-toolbar[arrow-direction=bottom] { -webkit-transform-origin: bottom; transform-origin: bottom; } .jqx-editor-drop-down-toolbar:not([arrow]), .jqx-editor-drop-down-toolbar[arrow-direction=top] { -webkit-transform-origin: top; transform-origin: top; } .jqx-editor-drop-down-toolbar .jqx-table-picker { overflow: hidden; display: block; background: transparent; } .jqx-editor-drop-down-toolbar .jqx-table-picker .jqx-table-picker-grid { width: 100%; display: flex; flex-direction: column; align-items: center; } .jqx-editor-drop-down-toolbar .jqx-table-picker .jqx-table-picker-grid::before { content: attr(value); display: flex; width: 100%; justify-content: center; align-items: center; padding: 0.2rem 16px; box-sizing: border-box; } .jqx-editor-drop-down-toolbar .jqx-table-picker .jqx-table-picker-grid > div { display: flex; } .jqx-editor-drop-down-toolbar .jqx-table-picker .jqx-table-picker-cell { width: 15px; height: 15px; border: var(--jqx-border-width) solid var(--jqx-border); margin: 2px; cursor: pointer; } .jqx-editor-drop-down-toolbar .jqx-table-picker .jqx-table-picker-cell[selected] { border-color: var(--jqx-primary); background: var(--jqx-primary); } .jqx-editor-drop-down-toolbar .jqx-table-picker .jqx-table-picker-separator { width: 100%; height: var(--jqx-border-width); background: var(--jqx-border); margin: 10px 0; } .jqx-editor-drop-down-toolbar .jqx-table-picker .jqx-table-picker-button { width: 100%; background: transparent; border: initial; } .jqx-editor-drop-down-toolbar .jqx-table-picker .jqx-table-picker-button button::before { font-size: var(--jqx-font-size); font-family: var(--jqx-font-family-icon); content: var(--jqx-icon-table); margin-right: 10px; box-sizing: border-box; } .jqx-editor-format-block[empty]:after { content: attr(data-placeholder); color: #aaa; /* Placeholder color */ pointer-events: none; /* Prevent placeholder from interfering with typing */ } .jqx-editor-block.jqx-editor-block { font-size: inherit; } .jqx-editor-block { min-height: 16px; } .jqx-editor-block jqx-input { line-height: inherit; position: relative; height: auto; --jqx-font-size: ''; --jqx-font-family: inherit; } .jqx-editor-block:empty { min-height: 16px; } .jqx-editor-block[empty]:before { content: attr(data-placeholder); color: #aaa; /* Placeholder color */ pointer-events: none; /* Prevent placeholder from interfering with typing */ } .jqx-editor-block ul, .jqx-editor-block ol { padding-left: 20px; margin: 0px; } .jqx-editor-drag-line { position: absolute; z-index: 199; opacity: 0.8; height: 3px; background: var(--jqx-primary); font-family: var(--jqx-font-family-icon); transition: opacity cubic-bezier(0.6, 0.2, 0, 0.8) 0.25s; left: 10px; width: calc(100% - 20px); } .jqx-editor-ai-menu { transform: scaleX(1) scaleY(0) !important; } .jqx-editor-ai-menu[bottom] { transform-origin: bottom; } .jqx-editor-ai-menu[hide] { transition: transform 0.2s cubic-bezier(0.075, 0.82, 0.165, 1) !important; transform: scaleX(1) scaleY(0) !important; } .jqx-editor-ai-menu[visible] { transform: scaleX(1) scaleY(1) !important; } .jqx-editor-ai-menu, .jqx-editor-add-menu { transition: transform 0.2s cubic-bezier(0.075, 0.82, 0.165, 1) !important; z-index: 999999; } .jqx-editor-ai-menu .jqx-tooltip-content, .jqx-editor-add-menu .jqx-tooltip-content { padding-left: 3px; padding-right: 0px; } .jqx-editor-ai-menu .jqx-tooltip-content .jqx-editor-context-menu-item-container, .jqx-editor-add-menu .jqx-tooltip-content .jqx-editor-context-menu-item-container { max-height: 380px; display: block; overflow: auto; } .jqx-editor-insert-line { left: 3px; top: 15px; position: absolute; height: 30px; visibility: hidden; opacity: 0; display: none; } .jqx-editor-insert-line.show { visibility: visible; opacity: 0.8; display: none; } .jqx-editor-insert-line:after { content: var(--jqx-icon-plus); display: flex; align-items: flex-end; justify-content: center; font-family: var(--jqx-font-family-icon); font-size: var(--jqx-font-size); cursor: pointer; position: absolute; color: var(--jqx-background-color); } .jqx-editor-sortable { transform: translate(0, 0); position: absolute; height: 30px; left: -3px; top: 10px; visibility: hidden; opacity: 0; --jqx-font-size:12px; } .jqx-editor-sortable.show { visibility: visible; opacity: 0.8; } .jqx-editor-sortable:before, .jqx-editor-sortable:after { content: var(--jqx-icon-ellipsis); width: var(--jqx-sortable-handle-size); height: var(--jqx-sortable-handle-size); display: flex; align-items: flex-end; justify-content: center; font-family: var(--jqx-font-family-icon); font-size: var(--jqx-font-size); line-height: calc(var(--jqx-sortable-handle-size) - var(--jqx-font-size) / 2); cursor: grab; position: absolute; color: var(--jqx-background-color); } .jqx-editor-sortable:before { transform: rotate(-90deg); } .jqx-editor-sortable:after { transform: rotate(90deg); } .jqx-editor .action-icon, .jqx-editor .date-icon { cursor: pointer; } .jqx-editor .callout .callout-icon { margin-right: 3px; cursor: pointer; } .jqx-editor .callout .callout-icon:after { content: attr(data-placeholder); width: 16px; } .jqx-editor .editable-list .toggle-icon { cursor: pointer; transition: transform 0.3s; margin-right: 5px; user-select: none; } .jqx-editor .editable-list .toggle-icon:after { content: "▶"; width: 16px; } .jqx-editor .editable-list .nested { display: none; list-style: none; margin-left: 20px; padding-left: 0; } .jqx-editor .editable-list.expanded { margin-top: 2px; } .jqx-editor .editable-list.expanded .toggle-icon { margin-right: 3px; } .jqx-editor .editable-list.expanded .toggle-icon:after { content: "▼"; width: 16px; } .jqx-editor .editable-list.expanded .nested { display: block; } .jqx-editor-callout-box { position: relative; display: inline-flex; align-items: center; gap: 5px; width: auto; margin-top: 10px; padding: 5px; border: 1px solid var(--jqx-border); border-radius: var(--jqx-border-radius); background: var(--jqx-surface); cursor: pointer; transition: background 0.2s; } .jqx-editor-callout-box:hover { background: var(--jqx-ui-state-hover); color: var; } .jqx-editor-ai-popup { position: absolute; display: none; z-index: 999999; font-family: var(--jqx-font-family); width: 320px; } .jqx-editor-ai-popup .button-close { font-family: var(--jqx-font-family-icon); position: absolute; right: 10px; top: 10px; cursor: pointer; font-size: 12px; } .jqx-editor-ai-popup .button-close:after { content: var(--jqx-icon-close); } .jqx-editor-ai-popup button[disabled] { opacity: 0.7; background: var(--jqx-disabled); color: var(--jqx-disabled-color); pointer-events: none; } .jqx-editor-ai-popup .jqx-editor-container { background-color: var(--jqx-background); border-radius: var(--jqx-border-radius); box-shadow: var(--jqx-elevation-4); width: 100%; padding: 16px; text-align: center; box-sizing: border-box; } .jqx-editor-ai-popup .jqx-editor-header { font-size: 16px; font-weight: 500; color: var(--jqx-background-color); margin-bottom: 16px; } .jqx-editor-ai-popup .jqx-editor-predefined-container { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; margin-bottom: 16px; } .jqx-editor-ai-popup .jqx-editor-predefined-btn { padding: 4px 8px; background-color: var(--jqx-primary); color: var(--jqx-primary-color); border-radius: 20px; font-size: var(--jqx-font-size); cursor: pointer; border: none; transition: background-color 0.3s ease; } .jqx-editor-ai-popup .jqx-editor-predefined-btn:hover { background-color: var(--jqx-ui-state-selected); color: var(--jqx-ui-state-color-selected); } .jqx-editor-ai-popup .jqx-editor-input-container { display: flex; flex-direction: column; margin-bottom: 20px; } .jqx-editor-ai-popup .jqx-editor-input-container input { padding: 8px; border-radius: 12px; border: 1px solid var(--jqx-border); font-size: var(--jqx-font-size); outline: none; margin-bottom: 16px; transition: border 0.3s ease, box-shadow 0.3s ease; background-color: var(--jqx-background); } .jqx-editor-ai-popup .jqx-editor-input-container input:focus { border-color: var(--jqx-primary); box-shadow: 0 0 8px var(--jqx-ui-state-primary); } .jqx-editor-ai-popup .jqx-editor-submit-btn { padding: 6px 12px; border-radius: 24px; background-color: var(--jqx-primary); color: var(--jqx-primary-color); border: none; font-size: 16px; cursor: pointer; transition: transform 0.2s ease, background-color 0.3s ease; } .jqx-editor-ai-popup .jqx-editor-submit-btn:hover { background-color: var(--jqx-ui-state-selected); color: var(--jqx-ui-state-color-selected); transform: scale(1.01); } .jqx-editor-ai-popup .jqx-editor-result-box { background-color: var(--jqx-surface); padding: 8px; margin-top: 20px; border-radius: 12px; font-size: var(--jqx-font-size); color: var(--jqx-surface-color); height: 150px; overflow-y: auto; box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.1); text-align: left; } .jqx-editor-ai-popup .jqx-editor-icon-arrow-up { font-size: 20px; margin-left: 8px; } .jqx-editor-ai-popup { /* Progress indicator styles */ } .jqx-editor-ai-popup .jqx-editor-loading { display: flex; justify-content: center; align-items: center; } .jqx-editor-ai-popup .jqx-editor-spinner { border: 4px solid rgba(255, 255, 255, 0.3); border-top: 4px solid var(--jqx-primary); border-radius: 50%; width: 24px; height: 24px; animation: jqx-editor-spin 1s linear infinite; } @keyframes jqx-editor-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .jqx-editor-ai-popup .jqx-editor-timeout-message { color: var(--jqx-error); font-size: 16px; margin-top: 10px; } .jqx-editor-ai-popup .jqx-editor-keep-btn, .jqx-editor-ai-popup .jqx-editor-replace-btn { padding: 6px 12px; border-radius: 24px; background-color: var(--jqx-primary); color: var(--jqx-primary-color); border: none; font-size: 16px; cursor: pointer; margin-top: 16px; transition: background-color 0.3s ease; } .jqx-editor-ai-popup .jqx-editor-keep-btn.jqx-editor-replace-btn, .jqx-editor-ai-popup .jqx-editor-replace-btn.jqx-editor-replace-btn { background-color: var(--jqx-secondary); color: var(--jqx-secondary-color); } .jqx-editor-ai-popup .jqx-editor-keep-btn:hover { background-color: var(--jqx-ui-state-selected); color: var(--jqx-ui-state-color-selected); } .jqx-editor-ai-popup { /* Mobile Friendly */ } @media (max-width: 600px) { .jqx-editor-ai-popup .jqx-editor-container { padding: 20px; } .jqx-editor-ai-popup .jqx-editor-header { font-size: 24px; } .jqx-editor-ai-popup .jqx-editor-predefined-btn { padding: 6px 12px; font-size: 12px; } .jqx-editor-ai-popup .jqx-editor-input-container input { padding: 12px; } .jqx-editor-ai-popup .jqx-editor-submit-btn { padding: 10px 20px; font-size: 14px; } .jqx-editor-ai-popup .jqx-editor-result-box { height: 150px; } } .jqx-editor-date-popup { position: absolute; display: none; z-index: 999999; border-radius: 4px; box-shadow: var(--jqx-elevation-4); } .jqx-editor-callout .callout-box:hover { background: #ececec; } .jqx-editor-callout .emoji { font-size: 24px; } .jqx-editor-callout.dropdown { position: absolute; background: var(--jqx-background); border: 1px solid var(--jqx-border); display: none; z-index: 999999; width: 320px; border-radius: 4px; box-shadow: var(--jqx-elevation-4); } .jqx-editor-callout.dropdown .tabs { display: flex; justify-content: space-around; margin-top: 10px; background: var(--jqx-surface); border-top: 1px solid var(--jqx-border); } .jqx-editor-callout.dropdown .tab { padding: 6px; cursor: pointer; font-size: 16px; width: 40px; text-align: center; position: relative; } .jqx-editor-callout.dropdown .tab:hover { background: var(--jqx-ui-state-hover); } .jqx-editor-callout.dropdown .tab.active { border-bottom: 2px solid var(--jqx-primary); } .jqx-editor-callout.dropdown .categories { display: grid; grid-template-columns: repeat(auto-fill, minmax(30px, 1fr)); gap: 5px; overflow-y: auto; margin-top: 10px; height: 200px; } .jqx-editor-callout.dropdown .option { padding: 4px 5px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 16px; } .jqx-editor-callout.dropdown .option:hover { background: var(--jqx-ui-state-hover); } .jqx-editor-callout.dropdown .option span { font-size: 18px; } .jqx-editor-ai-icon { text-decoration: none; cursor: pointer; padding: 5px; } .jqx-editor-ai-icon:before { content: url("data:image/svg+xml,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M16.3333%207.33333C16.3333%207.33333%2016.1328%205.44793%2015.3411%204.65887C14.5469%203.8724%2012.6667%203.66667%2012.6667%203.66667C12.6667%203.66667%2014.5521%203.46615%2015.3411%202.67447C16.1276%201.8802%2016.3333%200%2016.3333%200C16.3333%200%2016.5339%201.8854%2017.3255%202.67447C18.112%203.46093%2020%203.66667%2020%203.66667C20%203.66667%2018.1146%203.86719%2017.3255%204.65887C16.5391%205.44533%2016.3333%207.33333%2016.3333%207.33333ZM7.5%205C7.5%205%207.08594%208.8594%205.47393%2010.4739C3.85933%2012.0885%200%2012.5%200%2012.5C0%2012.5%203.8594%2012.9141%205.47393%2014.5261C7.08853%2016.1407%207.5%2020%207.5%2020C7.5%2020%207.91406%2016.1406%209.52607%2014.5261C11.1407%2012.9115%2015%2012.5%2015%2012.5C15%2012.5%2011.1406%2012.0859%209.52607%2010.4739C7.91147%208.85933%207.5%205%207.5%205ZM17.1667%2016.6667C16.7057%2016.6667%2016.3333%2017.0391%2016.3333%2017.5C16.3333%2017.9609%2016.7057%2018.3333%2017.1667%2018.3333C17.6276%2018.3333%2018%2017.9609%2018%2017.5C18%2017.0391%2017.6276%2016.6667%2017.1667%2016.6667ZM2.5%204C2.96094%204%203.33333%203.62761%203.33333%203.16667C3.33333%202.70573%202.96094%202.33333%202.5%202.33333C2.03906%202.33333%201.66667%202.70573%201.66667%203.16667C1.66667%203.62761%202.03906%204%202.5%204Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E"); opacity: 0.9; margin-right: 5px; } .jqx-editor-file { color: var(--jqx-background-color); text-decoration: none; background: var(--jqx-surface); padding: 5px; border: 1px solid var(--jqx-border); border-radius: var(--jqx-border-radius); cursor: pointer; display: inline-block; } .jqx-editor-file:before { content: var(--jqx-icon-file); color: var(--jqx-primary); margin-right: 5px; font-family: var(--jqx-font-family-icon); } .jqx-editor-file.jqx-icon-word:before { content: var(--jqx-icon-word); color: #185ABD; } .jqx-editor-file.jqx-icon-pdf:before { content: var(--jqx-icon-pdf); color: #E50012; } .jqx-editor-file.jqx-icon-image:before { content: var(--jqx-icon-image); } .jqx-editor-file.jqx-icon-excel:before { content: var(--jqx-icon-excel); color: #217346; } .jqx-editor-file.jqx-icon-video:before { content: var(--jqx-icon-video); color: #C43E1C; } .jqx-editor-file.jqx-icon-music:before { content: var(--jqx-icon-music); color: #C5C33C; } .jqx-editor-file.jqx-icon-archive:before { content: var(--jqx-icon-archive); } .jqx-editor-file.jqx-icon-text:before { content: var(--jqx-icon-text); } .jqx-editor-file.jqx-icon-powerpoint:before { content: var(--jqx-icon-powerpoint); color: #C43E1C; } .jqx-editor .jqx-editor-tab-label { display: none; } .jqx-editor-tabs { display: flex; align-items: center; padding-left: 30px; gap: 5px; position: relative; background: var(--jqx-surface); } .jqx-editor-tabs .jqx-editor-tabs-divider { border-top: 1px solid var(--jqx-border); position: absolute; top: 0px; left: 0px; width: 100%; height: 1px; z-index: 1; } .jqx-editor-tabs .jqx-editor-tab { padding: 10px 20px; background: var(--jqx-surface); color: var(--jqx-surface-color); cursor: pointer; transition: all 0.3s ease; position: relative; border-bottom: 2px solid transparent; outline: none; } .jqx-editor-tabs .jqx-editor-tab input { outline: none; border: none; } .jqx-editor-tabs .jqx-editor-tab.active { background: var(--jqx-background); color: var(--jqx-primary); border-bottom: 2px solid var(--jqx-primary); font-weight: bold; z-index: 2; } .jqx-editor-tabs .jqx-editor-tab:hover { background: var(--jqx-ui-state-hover); color: var(--jqx-ui-state-color-hover); } .jqx-editor-tabs .jqx-editor-tab-plus { background: var(--jqx-primary); color: var(--jqx-primary-color); border: none; cursor: pointer; font-size: 18px; border-radius: 50%; transition: background 0.2s cubic-bezier(0.165, 0.84, 0.44, 1); outline: none; } .jqx-editor-tabs .jqx-editor-tab-plus:hover { background: var(--jqx-ui-state-selected); color: var(--jqx-ui-state-color-selected); } jqx-editor[popup] > .jqx-container { grid-template-rows: none; } jqx-editor[popup] .jqx-editor-content-container { grid-template-columns: 1fr auto; } jqx-editor[popup] .jqx-editor-content-container .jqx-editor-tabs { padding-left: 0px; flex-direction: column; } .jqx-editor-toolbar[popup] { flex-wrap: wrap; position: absolute; top: 800px; left: 0px; background: var(--jqx-surface); display: flex; width: 800px; box-shadow: var(--jqx-elevation-8); padding: 4px; z-index: 99; overflow: hidden; } .jqx-editor-toolbar[popup] .jqx-editor-toolbar-items-primary { display: flex; flex-wrap: wrap; } .jqx-element div[data-block-2], .jqx-element .jqx-editor-two-columns { display: grid; grid-template-columns: 45% 45%; gap: 10px; } .jqx-element .jqx-editor-three-columns { display: grid; grid-template-columns: 33% 33% 33%; gap: 10px; } .jqx-element .jqx-editor-four-columns { display: grid; grid-template-columns: 25% 25% 25% 25%; gap: 10px; } .jqx-element div[data-block-n], .jqx-element .jqx-editor-n-columns-block { padding: 5px; border: 1px solid transparent; } .jqx-element div[data-block-n]:hover, .jqx-element .jqx-editor-n-columns-block:hover { border: 1px solid var(--jqx-border); } /* .jqx-editor */ .jqx-editor[right-to-left] .jqx-editor-toolbar:not(.jqx-tooltip) { grid-template-areas: "toggleButton primary" "secondary secondary"; grid-template-columns: auto minmax(0, 1fr); } .jqx-editor[right-to-left] .jqx-editor-toolbar:not(.jqx-tooltip) .jqx-editor-toolbar-item { margin-left: initial; margin-right: var(--jqx-editor-toolbar-item-margin); } .jqx-editor[right-to-left] .jqx-editor-content-container, .jqx-editor[right-to-left] .jqx-editor-toolbar-items-primary, .jqx-editor[right-to-left] .jqx-editor-toolbar-items-secondary, .jqx-editor[right-to-left] .jqx-editor-toolbar-item[item-type=drop-down], .jqx-editor[right-to-left] .jqx-editor-toolbar-item[item-type=color-input] { direction: rtl; } .jqx-editor[right-to-left] .jqx-editor-resize-frame span { transform: translate(50%, -50%); } .jqx-editor[right-to-left] .jqx-editor-resize-frame span[position=top-left], .jqx-editor[right-to-left] .jqx-editor-resize-frame span[position=bottom-right] { cursor: sw-resize; } .jqx-editor[right-to-left] .jqx-editor-resize-frame span[position=top-right], .jqx-editor[right-to-left] .jqx-editor-resize-frame span[position=bottom-left] { cursor: se-resize; } /* --- Editor Input Drop Down --- */ .jqx-editor-input[right-to-left] li .editor-icon::before { right: 0; left: initial; } /* --- Editor Tooltip --- */ .jqx-tooltip.jqx-editor-toolbar[right-to-left]:not(.jqx-editor-drop-down-toolbar) .jqx-editor-toolbar-item:not(:first-of-type) { margin-left: initial; margin-right: var(--jqx-editor-toolbar-item-margin); } .jqx-editor-drop-down-toolbar .jqx-table-picker[right-to-left] .jqx-table-picker-grid { direction: rtl; } .jqx-editor-drop-down-toolbar .jqx-table-picker[right-to-left] .jqx-table-picker-button > button.jqx-button { display: flex; align-items: center; justify-content: center; } .jqx-editor-drop-down-toolbar .jqx-table-picker[right-to-left] .jqx-table-picker-button > button.jqx-button::before { margin-right: initial; margin-left: 10px; } jqx-file-upload { display: inline-block; width: var(--jqx-file-upload-default-width); font-size: var(--jqx-file-upload-font-size); font-family: var(--jqx-file-upload-font-family); color: var(--jqx-file-upload-color); overflow: hidden; box-sizing: border-box; border: var(--jqx-file-upload-border-width) dashed var(--jqx-file-upload-border); background-color: var(--jqx-file-upload-background); min-width: 200px; min-height: 100px; } jqx-file-upload .jqx-total-files.jqx-hidden, jqx-file-upload .jqx-selected-files .jqx-file.jqx-hidden { display: none; } jqx-file-upload[disabled] { opacity: 0.55; cursor: default; } jqx-file-upload[show-progress] .jqx-file jqx-progress-bar { display: none; } jqx-file-upload[show-progress] .jqx-file jqx-progress-bar[value] { display: block; } .jqx-file.jqx-uploading-start:before { width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; font-family: "arial"; content: var(--jqx-file-upload-text-content-uploading-start); background-color: rgba(193, 193, 193, 0.4117647059); opacity: 1; display: flex; justify-content: flex-end; flex-direction: column; box-sizing: border-box; font-size: 11px; color: #737373; padding: 0px 0px 2px 5px; pointer-events: none; z-index: 1; animation: connecting 1s linear infinite; } .jqx-file.jqx-uploading:before { font-family: "arial"; position: absolute; left: 0px; top: 0px; content: var(--jqx-file-upload-text-content-uploading); width: 100%; height: 100%; background-color: rgba(193, 193, 193, 0.4117647059); opacity: 1; display: flex; justify-content: flex-end; flex-direction: column; box-sizing: border-box; font-size: 11px; color: var(--jqx-ui-state); padding: 0px 0px 2px 5px; pointer-events: none; z-index: 1; } .jqx-file.jqx-uploading .jqx-item-upload-button { pointer-events: none; } .jqx-file.jqx-uploading .jqx-item-name { opacity: 0.2; user-select: none; } .jqx-file.jqx-pause:before { font-family: "arial"; position: absolute; left: 0px; top: 0px; content: var(--jqx-file-upload-text-content-pause); width: 100%; height: 100%; background-color: rgba(255, 0, 0, 0.1882352941); border-radius: 3px; opacity: 0.8; display: flex; justify-content: flex-end; flex-direction: column; box-sizing: border-box; font-size: 11px; color: #8a0000; padding: 0px 0px 2px 5px; pointer-events: none; z-index: 1; } .jqx-file.jqx-error:before { font-family: "arial"; position: absolute; left: 0px; top: 0px; content: var(--jqx-file-upload-text-content-error); width: 100%; height: 100%; background-color: var(--jqx-error); border-radius: var(--jqx-error-border-radius); opacity: 0; display: flex; justify-content: flex-end; flex-direction: column; box-sizing: border-box; font-size: 11px; color: var(--jqx-on-error); padding: 0px 0px 2px 5px; pointer-events: none; z-index: 1; animation: error 6s linear 1; } .jqx-file.jqx-error jqx-progress-bar { opacity: 0.3; } .jqx-file jqx-progress-bar { display: none; width: 100%; height: 4px; position: absolute; bottom: 0px; left: 0px; } .jqx-file jqx-progress-bar .jqx-container { border-style: none; } .jqx-file jqx-progress-bar .jqx-value { background-color: orange; } .jqx-file-upload .jqx-file-upload-header, .jqx-file-upload .jqx-file-upload-container, .jqx-file-upload .jqx-file-upload-footer { padding: 5px; width: 100%; box-sizing: border-box; } .jqx-file-upload .jqx-browse-button { display: block; margin: 4px; width: var(--jqx-file-upload-browse-button-width); height: var(--jqx-file-upload-browse-button-height); } .jqx-file-upload .jqx-upload-all-button, .jqx-file-upload .jqx-cancel-all-button, .jqx-file-upload .jqx-pause-all-button { width: var(--jqx-file-upload-footer-button-width); height: var(--jqx-file-upload-footer-button-height); margin: 4px; } .jqx-file-upload .jqx-browse-input { display: none; } .jqx-file-upload .jqx-drop-zone { display: none; width: 100%; height: 100px; } .jqx-file-upload .jqx-total-files { font-family: "arial"; font-size: 12px; color: gray; display: block; box-sizing: border-box; padding: 0px 0px 2px 5px; } .jqx-file-upload .jqx-total-files:empty { display: none; } .jqx-file-upload[disabled] .jqx-file-upload-container { pointer-events: none; user-select: none; } .jqx-file-upload[hide-footer] .jqx-file-upload-footer { display: none; } .jqx-file-upload[drop-zone] .jqx-drop-zone { display: block; } .jqx-file-upload[drop-zone] .jqx-overflow .jqx-drop-zone { display: none; } .jqx-drop-zone { width: 100%; height: 100%; background-color: var(--jqx-background); position: relative; box-sizing: border-box; border: lightgray dotted 1px; } .jqx-drop-zone:after { font-family: var(--jqx-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(--jqx-file-upload-text-content-drop-zone); color: var(--jqx-ui-state); box-sizing: border-box; border: dashed 5px transparent; transition: border 0.5s ease-out; } .jqx-drop-zone.jqx-drag-over:after { content: var(--jqx-file-upload-text-content-drop-zone-over); font-size: 50px; border: dashed 3px var(--jqx-background-border); transition: border 0.5s ease-out; animation: drop-zone 1s ease-in infinite; } [data-theme=modern] { --jqx-file-upload-text-content-drop-zone-over: "Drop here"; } [data-theme=modern] .jqx-drop-zone { border: 2px dashed var(--jqx-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] .jqx-drop-zone:after { font-family: "Verdana"; font-size: 0.875rem; font-weight: 400; line-height: 1.5; } [data-theme=modern] .jqx-drop-zone:hover { border-color: var(--jqx-primary); background-color: rgba(var(--jqx-primary-rgb), .1); } [data-theme=modern] .jqx-drop-zone.jqx-drag-over:after { border-color: transparent; content: var(--jqx-file-upload-text-content-drop-zone-over); font-size: 2.5rem; transition: border 0.5s ease-out; animation: drop-zone 1s ease-in infinite; } .jqx-selected-files { width: 100%; height: 100%; display: block; box-sizing: border-box; padding: 2px; } .jqx-selected-files .jqx-file { height: auto; position: relative; display: block; box-sizing: border-box; border: lightgray solid 1px; padding: 10px; border-radius: 3px; margin-bottom: 1px; background-color: #fafafa; transition: border-color 0.5s ease; } .jqx-selected-files .jqx-file:hover { transition: border-color 0.5s ease; border-color: gray; } .jqx-selected-files .jqx-item-pause-button { pointer-events: none; box-sizing: border-box; height: 16px; position: relative; width: 16px; color: #999; transition: color 0.5s ease; display: none; } .jqx-selected-files .jqx-item-pause-button:after { font-family: var(--jqx-font-family-icon); position: absolute; left: 0px; top: 0px; font-size: 16px; text-shadow: 2px 2px 2px lightgray; content: var(--jqx-icon-close); } .jqx-selected-files .jqx-item-cancel-button { display: inline-block; box-sizing: border-box; height: 16px; position: relative; width: 16px; color: #999; transition: color 0.5s ease; } .jqx-selected-files .jqx-item-cancel-button:after { font-family: var(--jqx-font-family-icon); position: absolute; left: 0px; top: 0px; font-size: 16px; text-shadow: 2px 2px 2px lightgray; content: var(--jqx-icon-close); } .jqx-selected-files .jqx-item-cancel-button:hover { cursor: pointer; transition: color 0.5s ease; color: orange; } .jqx-selected-files .jqx-item-upload-button { display: inline-block; box-sizing: border-box; height: 16px; position: relative; width: 16px; color: #999; transition: color 0.5s ease; } .jqx-selected-files .jqx-item-upload-button:after { font-family: var(--jqx-font-family-icon); content: var(--jqx-icon-up); position: absolute; left: 0px; top: 0px; font-size: 16px; text-shadow: 2px 2px 2px lightgray; } .jqx-selected-files .jqx-item-upload-button:hover { cursor: pointer; color: var(--jqx-success); transition: color 0.5s ease; } .jqx-selected-files .jqx-item-name { display: inline-block; box-sizing: border-box; position: relative; width: calc(100% - 40px); overflow: hidden; text-overflow: ellipsis; height: auto; } .jqx-selected-files .jqx-uploading .jqx-item-name { width: calc(100% - 60px); overflow: hidden; text-overflow: ellipsis; height: auto; } .jqx-selected-files .jqx-uploading .jqx-item-upload-button { opacity: 0.3; } .jqx-selected-files .jqx-uploading .jqx-item-pause-button { display: inline-block; cursor: pointer; pointer-events: all; transition: color 0.5s, opacity 0.5s ease; color: #dc1919; opacity: 0.5; } .jqx-selected-files .jqx-uploading .jqx-item-pause-button:hover { transition: color 0.5s, opacity 0.5s ease; color: red; opacity: 1; } .jqx-selected-files .jqx-uploading .jqx-item-cancel-button { display: inline-block; cursor: pointer; pointer-events: all; transition: color 0.5s, opacity 0.5s ease; opacity: 0.5; color: darkorange; } .jqx-selected-files .jqx-uploading .jqx-item-cancel-button:hover { transition: color 0.5s, opacity 0.5s ease; color: orange; opacity: 1; } .jqx-drop-zone-square { position: relative; } .jqx-drop-zone-square:before { content: ""; display: block; padding-bottom: 100%; } .jqx-drop-zone-square .jqx-drop-zone { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .jqx-drop-zone-square.jqx-drop-zone-small { min-width: 115px; } .jqx-drop-zone-small { position: relative; width: auto; display: inline-block; } .jqx-drop-zone-small .jqx-drop-zone.jqx-drag-over:after { font-size: 1.25rem; } .jqx-drop-zone-images-only .jqx-drop-zone { display: flex; align-items: center; flex-flow: column; justify-content: space-evenly; } .jqx-drop-zone-images-only .jqx-drop-zone:after { height: auto; } .jqx-drop-zone-images-only .jqx-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% { color: rgba(115, 115, 115, 0.3137254902); } 50% { color: rgba(115, 115, 115, 0.6); } 100% { color: rgba(115, 115, 115, 0.3137254902); } } @-webkit-keyframes drop-zone { 0% { color: rgba(177, 177, 177, 0); } 50% { color: rgba(177, 177, 177, 0.6); } 100% { color: rgba(177, 177, 177, 0); } } @-webkit-keyframes rotating { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @-webkit-keyframes error { 0% { opacity: 0.8; background-color: rgba(255, 0, 0, 0.0823529412); } 3% { background-color: rgba(255, 0, 0, 0.2509803922); } 6% { background-color: rgba(255, 0, 0, 0.0823529412); } 9% { background-color: rgba(255, 0, 0, 0.2509803922); } 12% { background-color: rgba(255, 0, 0, 0.0823529412); } 80% { opacity: 0.8; } 100% { opacity: 0; } } jqx-file-upload[right-to-left] > .jqx-container { direction: rtl; } .jqx-file[right-to-left] { direction: rtl; } .jqx-drop-zone[right-to-left] { direction: rtl; } jqx-filter-panel { width: var(--jqx-filter-panel-default-width); height: var(--jqx-filter-panel-default-height); } jqx-filter-panel.jqx-element { padding: var(--jqx-filter-panel-padding); border: none; } .jqx-filter-panel .jqx-filter-panel-input:focus, .jqx-filter-panel .jqx-filter-panel-input:active { border-color: var(--jqx-primary); } .jqx-filter-panel jqx-numeric-text-box.jqx-filter-panel-input input { text-align: right; } .jqx-filter-panel jqx-tree { width: 100%; height: var(--jqx-filter-panel-main-element-height); margin-bottom: var(--jqx-filter-panel-vertical-offset); } .jqx-filter-panel jqx-tree.date-excel jqx-tree-items-group[level="1"] > .jqx-tree-item-label-container > .jqx-tree-items-group-arrow { visibility: hidden; } .jqx-filter-panel jqx-tree.standard-excel .jqx-tree-items-group-arrow { visibility: hidden; } .jqx-filter-panel jqx-tree.standard-excel jqx-tree-item:not([level="1"]) > .jqx-tree-item-label-container { margin-left: -30px; } .jqx-filter-panel jqx-menu-item[value=notand], .jqx-filter-panel jqx-menu-item[value=notor] { display: none; } .jqx-filter-panel .jqx-filter-panel-label { margin-bottom: var(--jqx-filter-panel-vertical-offset); } .jqx-filter-panel .jqx-filter-panel-list { width: 100%; margin-bottom: var(--jqx-filter-panel-vertical-offset); } .jqx-filter-panel .jqx-filter-panel-operator-list { width: 80px; margin-bottom: var(--jqx-filter-panel-vertical-offset); } .jqx-filter-panel .jqx-filter-panel-button-container { width: 100%; min-height: 33px; height: var(--jqx-editor-height); display: flex; justify-content: space-around; } .jqx-filter-panel .jqx-filter-panel-button-container > jqx-button { min-width: 80px; } .jqx-filter-panel .jqx-filter-panel-button-container > jqx-button button { padding: 8px; } .jqx-filter-panel .jqx-filter-panel-input { height: var(--jqx-editor-height); width: 100%; display: block; margin-bottom: var(--jqx-filter-panel-vertical-offset); } .jqx-filter-panel .jqx-filter-panel-input.case-sensitive { width: calc(100% - 32px); display: inline-block; } .jqx-filter-panel[filter-type=string] .case-sensitive { display: block; margin-top: 5px; margin-bottom: calc(var(--jqx-filter-panel-vertical-offset) - 5px); } .jqx-filter-panel span.case-sensitive.jqx-icon { font-family: var(--jqx-font-family-icon); font-size: 16px; position: relative; margin-left: 5px; padding: 5px; border: 1px solid transparent; border-radius: var(--jqx-border-radius); } .jqx-filter-panel span.case-sensitive.jqx-icon.jqx-icon-font-size:after { content: var(--jqx-icon-fontsize); } .jqx-filter-panel span.case-sensitive.jqx-icon:hover { background: var(--jqx-ui-state-hover); color: var(--jqx-ui-state-color-hover); border: 1px solid var(--jqx-ui-state-border-hover); } .jqx-filter-panel span.case-sensitive.jqx-icon:active, .jqx-filter-panel span.case-sensitive.jqx-icon.active { background: var(--jqx-ui-state-active); color: var(--jqx-ui-state-color-active); border: 1px solid var(--jqx-ui-state-border-active); } .jqx-filter-panel-list-drop-down-menu.jqx-input-drop-down-menu ul li span.jqx-icon { font-family: var(--jqx-font-family-icon); margin-right: 5px; font-size: 16px; position: relative; left: -3px; } .jqx-filter-panel-list-drop-down-menu.jqx-input-drop-down-menu ul li span.jqx-icon.jqx-icon-contains:after { content: var(--jqx-icon-contains); } .jqx-filter-panel-list-drop-down-menu.jqx-input-drop-down-menu ul li span.jqx-icon.jqx-icon-starts-with:after { content: var(--jqx-icon-starts_with); } .jqx-filter-panel-list-drop-down-menu.jqx-input-drop-down-menu ul li span.jqx-icon.jqx-icon-ends-with:after { content: var(--jqx-icon-ends_with); } .jqx-filter-panel-list-drop-down-menu.jqx-input-drop-down-menu ul li span.jqx-icon.jqx-icon-does-not-contain:after { content: var(--jqx-icon-does_not_contain); } .jqx-filter-panel-list-drop-down-menu.jqx-input-drop-down-menu ul li span.jqx-icon.jqx-icon-equal:after { content: var(--jqx-icon-equals); } .jqx-filter-panel-list-drop-down-menu.jqx-input-drop-down-menu ul li span.jqx-icon.jqx-icon-greater-than:after { content: var(--jqx-icon-greater-than); } .jqx-filter-panel-list-drop-down-menu.jqx-input-drop-down-menu ul li span.jqx-icon.jqx-icon-calendar:after { content: var(--jqx-icon-calendar); } .jqx-filter-panel-list-drop-down-menu.jqx-input-drop-down-menu ul li span.jqx-icon.jqx-icon-greater-than-equal:after { content: var(--jqx-icon-greater-than-equal); } .jqx-filter-panel-list-drop-down-menu.jqx-input-drop-down-menu ul li span.jqx-icon.jqx-icon-less-than:after { content: var(--jqx-icon-less-than); } .jqx-filter-panel-list-drop-down-menu.jqx-input-drop-down-menu ul li span.jqx-icon.jqx-icon-less-than-equal:after { content: var(--jqx-icon-less-than-equal); } .jqx-filter-panel-list-drop-down-menu.jqx-input-drop-down-menu ul li span.jqx-icon.jqx-icon-not-equal:after { content: var(--jqx-icon-not-equal); } .jqx-filter-panel-list-drop-down-menu.jqx-input-drop-down-menu ul li span.jqx-icon.jqx-icon-between:after { content: var(--jqx-icon-between); } .jqx-filter-panel-list-drop-down-menu.jqx-input-drop-down-menu ul li span.jqx-icon.jqx-icon-empty:after { content: var(--jqx-icon-check-empty); position: relative; top: 1px; } .jqx-filter-panel-list-drop-down-menu.jqx-input-drop-down-menu ul li span.jqx-icon.jqx-icon-not-empty:after { content: var(--jqx-icon-check-empty); position: relative; top: 1px; } .jqx-filter-panel-list-drop-down-menu.jqx-input-drop-down-menu ul li span.jqx-icon.jqx-icon-not-empty:before { content: var(--jqx-icon-close); font-size: 10px; left: calc(50% - 4px); top: calc(50% - 5px); position: absolute; } .jqx-filter-panel-list-drop-down-menu.jqx-input-drop-down-menu ul li span.jqx-icon.jqx-icon-null:after { content: var(--jqx-icon-circle-empty); } .jqx-filter-panel-list-drop-down-menu.jqx-input-drop-down-menu ul li span.jqx-icon.jqx-icon-not-null:after { content: var(--jqx-icon-circle); } .jqx-filter-panel[right-to-left] { direction: rtl; } .jqx-filter-panel[right-to-left] jqx-tree.standard-excel jqx-tree-item:not([level="1"]) > .jqx-tree-item-label-container { margin-right: -30px; margin-left: unset; } jqx-gantt-chart { display: block; width: var(--jqx-gantt-chart-default-width); height: var(--jqx-gantt-chart-default-height); contain: content; } jqx-gantt-chart .jqx-splitter, .jqx-gantt-chart .jqx-splitter { width: 100%; height: 100%; border: none; border-radius: initial; } jqx-gantt-chart jqx-table, .jqx-gantt-chart jqx-table { width: 100%; height: 100%; --jqx-table-row-height: var(--jqx-gantt-chart-task-default-height); --jqx-table-header-footer-height: var(--jqx-gantt-chart-filter-row-height); } jqx-gantt-chart > .jqx-container, .jqx-gantt-chart.jqx-container { overflow: hidden; --jqx-scroll-bar-default-height: 100%; --jqx-scroll-bar-default-width: 100%; --jqx-gantt-chart-task-timeline-content-height: calc(2 * var(--jqx-gantt-chart-task-default-height)); /* Default task Timeline content height. Needed as a FireFox bug fix*/ --jqx-gantt-chart-task-splitter-bar-fit-size: var(--jqx-gantt-chart-task-timeline-content-height); --jqx-gantt-chart-resource-splitter-bar-fit-size: calc(var(--jqx-gantt-chart-resource-timeline-content-height) + var(--jqx-gantt-chart-task-default-height)); --jqx-gantt-chart-baseline-size: calc(var(--jqx-gantt-chart-task-default-height) / var(--jqx-gantt-chart-baseline-proportion)); } jqx-gantt-chart > .jqx-container:not(.hscroll), .jqx-gantt-chart.jqx-container:not(.hscroll) { margin-bottom: -1px; } jqx-gantt-chart > .jqx-container:not(.hscroll)[show-resource-panel], .jqx-gantt-chart.jqx-container:not(.hscroll)[show-resource-panel] { margin-bottom: -4px; } jqx-gantt-chart > .jqx-container .jqx-splitter > .jqx-resize-trigger-container, .jqx-gantt-chart.jqx-container .jqx-splitter > .jqx-resize-trigger-container { margin-bottom: -2px; } .jqx-gantt-chart jqx-splitter { --jqx-splitter-bar-size: 5px; } .jqx-gantt-chart .jqx-task-splitter jqx-splitter-item > .jqx-container, .jqx-gantt-chart .jqx-task-splitter jqx-splitter-item > .jqx-container > .jqx-content { overflow: hidden; } .jqx-gantt-chart jqx-splitter-bar .jqx-splitter-resize-button { display: none; } .jqx-gantt-chart jqx-scroll-viewer { width: 100%; height: 100%; border: none; padding: initial; } .jqx-gantt-chart .jqx-table { --jqx-table-cell-padding: var(--jqx-gantt-chart-task-bar-fill-padding); } .jqx-gantt-chart .jqx-table.jqx-task-table { --jqx-table-column-header-height: calc(2 * var(--jqx-gantt-chart-task-default-height) - calc(var(--jqx-border-width) / 2)); } .jqx-gantt-chart .jqx-table.jqx-resource-table { --jqx-table-column-header-height: calc(var(--jqx-gantt-chart-task-default-height) - calc(var(--jqx-border-width) / 2)); } @-moz-document url-prefix() { .jqx-gantt-chart .jqx-table.jqx-task-table { --jqx-table-column-header-height: calc(2 * var(--jqx-gantt-chart-task-default-height)); } .jqx-gantt-chart .jqx-table.jqx-resource-table { --jqx-table-column-header-height: var(--jqx-gantt-chart-task-default-height); } } .jqx-gantt-chart .jqx-table > .jqx-container { border: initial; } .jqx-gantt-chart .jqx-table[hide-selection-column] tr td { background: inherit; } .jqx-gantt-chart .jqx-table[hide-selection-column] tr[aria-selected=true] td { background: initial; } .jqx-gantt-chart .jqx-table .jqx-table-virtualization-container .jqx-scroll-viewer-content-container { display: block; } .jqx-gantt-chart .jqx-table td.tree-cell > div .hierarchy-arrow::after { display: initial; } .jqx-gantt-chart .jqx-table td div, .jqx-gantt-chart .jqx-table td span { line-height: inherit; } .jqx-gantt-chart .jqx-table td.tree-cell > div div:nth-child(2) { line-height: 1rem; } .jqx-gantt-chart .jqx-table thead tr th { background-color: var(--jqx-surface); color: var(--jqx-surface-color); border-bottom: var(--jqx-border-width) solid var(--jqx-border); font-size: var(--jqx-font-size); } .jqx-gantt-chart .jqx-table thead tr th.jqx-table-select-all.freeze-near { background-color: var(--jqx-surface); color: var(--jqx-surface-color); } .jqx-gantt-chart .jqx-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; } .jqx-gantt-chart .jqx-table tbody tr td { line-height: 100%; } .jqx-gantt-chart .jqx-table tbody tr[unused] td { border: initial; } .jqx-gantt-chart .jqx-table tbody tr[focus] { border-color: var(--jqx-ui-state-border-focus); background-color: var(--jqx-ui-state-focus); color: var(--jqx-ui-state-color-focus); } .jqx-gantt-chart .jqx-table tbody tr[hover] { border-color: var(--jqx-ui-state-border-hover); background-color: var(--jqx-ui-state-hover); color: var(--jqx-ui-state-color-hover); } .jqx-gantt-chart .jqx-table tbody tr[aria-selected=true] { border-color: var(--jqx-ui-state-border-selected); background-color: var(--jqx-ui-state-selected); color: var(--jqx-ui-state-color-selected); } .jqx-gantt-chart .jqx-table td { border-bottom: var(--jqx-border-width) solid var(--jqx-border); border-top: none; } .jqx-gantt-chart .jqx-table td[data-field=overdue]::after { font-family: var(--jqx-font-family-icon); font-size: 1.25em; color: var(--jqx-gantt-chart-deadline-color); position: absolute; left: 0; top: 0; height: 100%; display: flex; align-items: center; pointer-events: none; padding-left: var(--jqx-table-cell-padding); padding-right: var(--jqx-table-cell-padding); } .jqx-gantt-chart .jqx-table td[data-field=overdue][overdue]::after { content: var(--jqx-gantt-chart-deadline-icon); } .jqx-gantt-chart .jqx-table[freeze-footer] .jqx-table-container:focus td[focus]:after { height: 100%; } @-moz-document url-prefix() { .jqx-gantt-chart .jqx-table[freeze-footer] .jqx-table-container:focus td[focus]:after { top: 0; } } .jqx-gantt-chart[group-by-resources] .jqx-table tbody tr[role=group] { background: var(--jqx-background); color: var(--jqx-background-color); cursor: initial; } .jqx-gantt-chart[group-by-resources] .jqx-table tbody tr[role=group] .selection-checkbox { background: var(--jqx-background); color: var(--jqx-background-color); cursor: initial; border-color: var(--jqx-border); } .jqx-gantt-chart[group-by-resources] .jqx-table tbody tr[role=group] .selection-checkbox::before, .jqx-gantt-chart[group-by-resources] .jqx-table tbody tr[role=group] .selection-checkbox::after { content: initial; } .jqx-gantt-chart > .jqx-container, .jqx-gantt-chart.jqx-container { position: relative; } .jqx-gantt-chart > .jqx-container.hscroll > jqx-splitter, .jqx-gantt-chart.jqx-container.hscroll > jqx-splitter { height: calc(100% - var(--jqx-scroll-bar-size)); } .jqx-gantt-chart > .jqx-container > .jqx-popup-window-modal, .jqx-gantt-chart.jqx-container > .jqx-popup-window-modal { position: absolute; opacity: 0.5; background-color: var(--jqx-disabled); top: 0; left: 0; width: 100%; min-height: 100%; z-index: calc(var(--jqx-editor-drop-down-z-index) - 1); } .jqx-gantt-chart[paging] > .jqx-container > jqx-splitter, .jqx-gantt-chart[paging].jqx-container > jqx-splitter { height: calc(100% - 48px); } .jqx-gantt-chart[paging] > .jqx-container jqx-pager, .jqx-gantt-chart[paging].jqx-container jqx-pager { border-bottom: 0px; } .jqx-gantt-chart[paging] > .jqx-container.hscroll > jqx-splitter, .jqx-gantt-chart[paging].jqx-container.hscroll > jqx-splitter { height: calc(100% - var(--jqx-scroll-bar-size) - 48px); } .jqx-gantt-chart .jqx-splitter > .jqx-container > jqx-splitter-bar > .jqx-container { transform: scaleX(5); transform-origin: left; } .jqx-gantt-chart .jqx-splitter:not([dragged]) jqx-splitter-bar.jqx-element { background-color: var(--jqx-border); } .jqx-gantt-chart .jqx-splitter[orientation=horizontal] > .jqx-container > jqx-splitter-bar > .jqx-container { transform: scaleY(2.5); transform-origin: center; } .jqx-gantt-chart .jqx-timeline { user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; text-align: center; overflow: hidden; height: 100%; } .jqx-gantt-chart .jqx-timeline[task-bar-hovered] { cursor: e-resize; } .jqx-gantt-chart .jqx-timeline[task-bar-hovered] .jqx-timeline-task.project .jqx-timeline-task-fill, .jqx-gantt-chart .jqx-timeline[task-bar-hovered] .jqx-timeline-task.task .jqx-timeline-task-fill { cursor: e-resize; } .jqx-gantt-chart[task-filtering][hide-timeline-header-details] .jqx-task-splitter .jqx-timeline-view-cells .jqx-timeline-view-cell { border-top: initial; } .jqx-gantt-chart[task-filtering][hide-timeline-header-details] .jqx-task-splitter .jqx-timeline-content-container { height: calc(100% - var(--jqx-gantt-chart-task-default-height) - var(--jqx-gantt-chart-filter-row-height)); } .jqx-gantt-chart[task-filtering] .jqx-task-splitter .jqx-timeline-content-container { height: calc(100% - 2 * var(--jqx-gantt-chart-task-default-height) - var(--jqx-gantt-chart-filter-row-height)); } .jqx-gantt-chart[task-filtering] .jqx-task-splitter .jqx-timeline-header::before { content: ""; } .jqx-gantt-chart[resource-filtering] .jqx-resource-splitter { --jqx-splitter-bar-fit-size: calc(var(--jqx-gantt-chart-resource-splitter-bar-fit-size) + var(--jqx-gantt-chart-filter-row-height)); } .jqx-gantt-chart[resource-filtering] .jqx-resource-splitter .jqx-timeline-header::before { content: ""; } .jqx-gantt-chart[task-filtering][filter-row] .jqx-task-splitter .jqx-timeline-header::after { content: ""; } .jqx-gantt-chart[task-filtering][filter-row] .jqx-task-splitter .jqx-timeline-header::before { content: none; } .jqx-gantt-chart .jqx-timeline-header { position: relative; overflow: hidden; width: 100%; } .jqx-gantt-chart .jqx-timeline-header::after, .jqx-gantt-chart .jqx-timeline-header::before { width: 100%; height: var(--jqx-gantt-chart-filter-row-height); display: block; background: var(--jqx-surface); border-bottom: var(--jqx-border) solid var(--jqx-border-width); box-sizing: border-box; position: sticky; left: 0; } .jqx-gantt-chart .jqx-timeline-header .jqx-timeline-header-content { width: 100%; } .jqx-gantt-chart .jqx-timeline-content-container { width: 100%; height: calc(100% - 2 * var(--jqx-gantt-chart-task-default-height)); position: relative; overflow: hidden; } .jqx-gantt-chart .jqx-timeline-content { width: 100%; height: 100%; position: relative; } .jqx-gantt-chart .jqx-timeline-content:empty:after { content: "No Items"; height: var(--jqx-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; } .jqx-gantt-chart .jqx-timeline-content .jqx-timeline-task:not(.milestone)[disable-resize]:after, .jqx-gantt-chart .jqx-timeline-content .jqx-timeline-task:not(.milestone)[disable-resize] .jqx-task-container:after { content: none; } .jqx-gantt-chart .jqx-timeline-container { display: inline-block; position: relative; width: 100%; height: 100%; } .jqx-gantt-chart .jqx-timeline-scroll-bar { overflow: visible; position: relative; /*bottom: 0;*/ height: calc(var(--jqx-scroll-bar-size)); width: 100%; } .jqx-gantt-chart .jqx-timeline-scroll-bar:after { position: absolute; content: ""; width: 100%; height: var(--jqx-scroll-bar-size); background: var(--jqx-scroll-bar-background); left: 100%; top: 0; /*left:0;*/ } .jqx-gantt-chart .jqx-timeline-scroll-bar.bottom-corner { width: calc(100% - var(--jqx-scroll-bar-size)); } .jqx-gantt-chart .jqx-timeline-scroll-bar.jqx-resource-scroll-bar[orientation=vertical] { height: calc(100% - var(--jqx-gantt-chart-task-default-height)); top: var(--jqx-gantt-chart-task-default-height); z-index: 1; } .jqx-gantt-chart .jqx-timeline-scroll-bar.jqx-resource-scroll-bar[orientation=vertical]:before { top: calc(-1 * var(--jqx-gantt-chart-task-default-height)); height: var(--jqx-gantt-chart-task-default-height); } .jqx-gantt-chart .jqx-timeline-scroll-bar[orientation=vertical] { position: absolute; right: 0; top: calc(2 * var(--jqx-gantt-chart-task-default-height)); height: calc(100% - 2 * var(--jqx-gantt-chart-task-default-height)); width: calc(var(--jqx-scroll-bar-size)); } .jqx-gantt-chart .jqx-timeline-scroll-bar[orientation=vertical]:before { position: absolute; width: 100%; background: var(--jqx-scroll-bar-background); content: ""; left: 0; top: calc(-2 * var(--jqx-gantt-chart-task-default-height)); height: calc(2 * var(--jqx-gantt-chart-task-default-height)); border: 1px solid var(--jqx-border); border-top: none; box-sizing: border-box; } .jqx-gantt-chart .jqx-timeline-scroll-bar[orientation=vertical][disabled]:after { left: 0; height: 100%; } .jqx-gantt-chart[show-baseline] .jqx-timeline-task { height: calc(var(--jqx-gantt-chart-task-default-height) - var(--jqx-gantt-chart-baseline-size)); } .jqx-gantt-chart[show-baseline] .jqx-timeline-task .jqx-task-container { padding-bottom: calc(var(--jqx-gantt-chart-task-bar-fill-padding) / 2); } .jqx-gantt-chart[show-baseline] .jqx-timeline-task.milestone .jqx-task-container::after { border-left: calc((var(--jqx-gantt-chart-task-default-height) - var(--jqx-gantt-chart-baseline-size)) / 2) solid var(--jqx-gantt-chart-milestone-color); border-top: calc((var(--jqx-gantt-chart-task-default-height) - var(--jqx-gantt-chart-baseline-size)) / 2) solid transparent; border-bottom: calc((var(--jqx-gantt-chart-task-default-height) - var(--jqx-gantt-chart-baseline-size)) / 2) solid transparent; } .jqx-gantt-chart[show-baseline] .jqx-timeline-task.milestone .jqx-task-container::before { left: calc(-1 * (var(--jqx-gantt-chart-task-default-height) - var(--jqx-gantt-chart-baseline-size)) / 2); border-right: calc((var(--jqx-gantt-chart-task-default-height) - var(--jqx-gantt-chart-baseline-size)) / 2) solid var(--jqx-gantt-chart-milestone-color); border-top: calc((var(--jqx-gantt-chart-task-default-height) - var(--jqx-gantt-chart-baseline-size)) / 2) solid transparent; border-bottom: calc((var(--jqx-gantt-chart-task-default-height) - var(--jqx-gantt-chart-baseline-size)) / 2) solid transparent; } .jqx-gantt-chart[show-baseline] .jqx-task-connection-point { top: calc((var(--jqx-gantt-chart-task-default-height) - var(--jqx-gantt-chart-baseline-size)) / 2); } .jqx-gantt-chart[show-baseline] .jqx-task-connection-point.end, .jqx-gantt-chart[show-baseline] .jqx-task-connection-point.start { width: calc(var(--jqx-gantt-chart-task-default-height) / 3); height: calc(var(--jqx-gantt-chart-task-default-height) / 3); } .jqx-gantt-chart[show-baseline] .jqx-task-connection-point.end { right: calc(-1 * var(--jqx-gantt-chart-task-default-height) / 2); } .jqx-gantt-chart[show-baseline] .jqx-task-connection-point.start { left: calc(-1 * var(--jqx-gantt-chart-task-default-height) / 2); } .jqx-gantt-chart .jqx-timeline-task { position: absolute; height: var(--jqx-gantt-chart-task-default-height); } .jqx-gantt-chart .jqx-timeline-task:empty { height: 0; } .jqx-gantt-chart .jqx-timeline-task .jqx-timeline-task-progress-thumb:after { content: ""; border-right: var(--jqx-gantt-chart-timeline-task-progress-thumb-size) solid transparent; border-left: var(--jqx-gantt-chart-timeline-task-progress-thumb-size) solid transparent; border-bottom: var(--jqx-gantt-chart-timeline-task-progress-thumb-size) solid var(--jqx-gantt-chart-task-thumb-color); box-shadow: 0 1px 0 0 var(--jqx-gantt-chart-task-thumb-color); position: absolute; bottom: calc(-1 * var(--jqx-gantt-chart-task-bar-fill-padding) / 2); left: calc(-1 * var(--jqx-gantt-chart-timeline-task-progress-thumb-size)); z-index: 1; } .jqx-gantt-chart .jqx-timeline-task.task .jqx-timeline-task-label { color: var(--jqx-gantt-chart-task-label-color); } .jqx-gantt-chart .jqx-timeline-task.task[selected] .jqx-timeline-task-label { color: var(--jqx-gantt-chart-task-label-color-selected); } .jqx-gantt-chart .jqx-timeline-task.project .jqx-timeline-task-label { color: var(--jqx-gantt-chart-project-label-color); } .jqx-gantt-chart .jqx-timeline-task.project[selected] .jqx-timeline-task-label { color: var(--jqx-gantt-chart-project-label-color-selected); } .jqx-gantt-chart .jqx-timeline-task.project .jqx-task-segments::before { content: initial; } .jqx-gantt-chart .jqx-timeline-task:not(.milestone) { min-width: var(--jqx-gantt-chart-timeline-task-min-width); } .jqx-gantt-chart .jqx-timeline-task:not(.milestone):after { content: ""; width: var(--jqx-gantt-chart-timeline-task-resize-indicator-width); height: var(--jqx-gantt-chart-timeline-task-resize-indicator-width); position: absolute; top: calc(50% - var(--jqx-gantt-chart-timeline-task-resize-indicator-width) / 2); left: calc(100% - var(--jqx-gantt-chart-timeline-task-resize-indicator-width) / 2); background-color: var(--jqx-gantt-chart-timeline-task-resize-indicator-color); box-shadow: 0 0 0 1px var(--jqx-gantt-chart-timeline-task-resize-indicator-border-color); transform: scale(0); pointer-events: none; } .jqx-gantt-chart .jqx-timeline-task:not(.milestone) .jqx-task-container:after { content: ""; width: var(--jqx-gantt-chart-timeline-task-resize-indicator-width); height: var(--jqx-gantt-chart-timeline-task-resize-indicator-width); position: absolute; top: calc(50% - var(--jqx-gantt-chart-timeline-task-resize-indicator-width) / 2); left: calc(-1 * var(--jqx-gantt-chart-timeline-task-resize-indicator-width) / 2); background-color: var(--jqx-gantt-chart-timeline-task-resize-indicator-color); box-shadow: 0 0 0 1px var(--jqx-gantt-chart-timeline-task-resize-indicator-border-color); transform: scale(0); pointer-events: none; } .jqx-gantt-chart .jqx-timeline-task[selected]:not([resource-group]) .jqx-timeline-task-progress-thumb { transform: scale(1); } .jqx-gantt-chart .jqx-timeline-task[selected]:not([disable-resize]):after { transform: scale(1); } .jqx-gantt-chart .jqx-timeline-task[selected]:not([disable-resize]) .jqx-task-container::after { transform: scale(1); } .jqx-gantt-chart .jqx-timeline-task[selected]:not(.milestone) .jqx-timeline-task-fill { box-shadow: var(--jqx-elevation-2); } .jqx-gantt-chart .jqx-timeline-task[connection-point=end] .jqx-task-connection-feedback { left: 100%; } .jqx-gantt-chart .jqx-timeline-task[disable-drag] { cursor: pointer; } .jqx-gantt-chart .jqx-timeline-task[resource-group] { cursor: initial; } .jqx-gantt-chart .jqx-timeline-task .jqx-task-segments, .jqx-gantt-chart .jqx-timeline-task .jqx-task-segment { width: 100%; height: 100%; } .jqx-gantt-chart .jqx-timeline-task .jqx-task-segments { position: relative; } .jqx-gantt-chart .jqx-timeline-task .jqx-task-segments::before { pointer-events: none; content: ""; width: 100%; border-bottom: var(--jqx-gantt-chart-segment-link-size) dashed var(--jqx-gantt-chart-segment-link-color); box-sizing: border-box; position: absolute; top: calc(50% - var(--jqx-gantt-chart-segment-link-size) / 2); left: 0; } .jqx-gantt-chart .jqx-timeline-task .jqx-task-segment { position: absolute; min-width: var(--jqx-gantt-chart-timeline-task-min-width); } .jqx-gantt-chart .jqx-timeline-task .jqx-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: 0.8em; font-weight: 600; pointer-events: none; } .jqx-gantt-chart .jqx-timeline-task-progress { width: 100%; height: 100%; transform-origin: left; position: relative; pointer-events: none; } .jqx-gantt-chart .jqx-timeline-task-progress-thumb { position: absolute; right: 0; cursor: e-resize; transform: scale(0); transform-origin: left bottom; } .jqx-gantt-chart .jqx-timeline-task-fill { width: 100%; height: 100%; border-radius: var(--jqx-gantt-chart-task-fill-border-radius); overflow: hidden; } .jqx-gantt-chart .jqx-timeline-task-label { position: absolute; width: 100%; height: 100%; left: 0; top: 0; display: flex; align-items: center; justify-content: center; padding: var(--jqx-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; } .jqx-gantt-chart .jqx-timeline-task-label > div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .jqx-gantt-chart .jqx-timeline-task-cells { position: relative; } .jqx-gantt-chart .jqx-timeline-view-details { display: flex; width: 100%; height: var(--jqx-gantt-chart-task-default-height); } .jqx-gantt-chart .jqx-timeline-view-details:empty { user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; background-color: var(--jqx-surface); color: var(--jqx-surface-color); border-bottom: var(--jqx-border-width) solid var(--jqx-border); display: flex; justify-content: center; align-items: center; } .jqx-gantt-chart .jqx-timeline-view-details:empty:after { content: var(--jqx-gantt-chart-header-placeholder); } .jqx-gantt-chart .jqx-timeline-view-details .jqx-timeline-view-cell { min-width: initial; border-top: none; } .jqx-gantt-chart .jqx-timeline-view-details .jqx-timeline-view-cell.middle { border-top: 1px solid var(--jqx-border); border-bottom-color: var(--jqx-border); } .jqx-gantt-chart .jqx-timeline-view-details .jqx-timeline-view-cell:not(:first-of-type) { border-left-color: transparent; } .jqx-gantt-chart .jqx-timeline-view-cells { display: flex; width: 100%; height: var(--jqx-gantt-chart-task-default-height); } .jqx-gantt-chart .jqx-timeline-view-cells:empty { user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; background-color: var(--jqx-surface); color: var(--jqx-surface-color); border-bottom: var(--jqx-border-width) solid var(--jqx-border); display: flex; justify-content: center; align-items: center; } .jqx-gantt-chart .jqx-timeline-view-cells:empty:after { content: var(--jqx-gantt-chart-header-placeholder); } .jqx-gantt-chart .jqx-timeline-view-cells .jqx-timeline-view-cell:last-of-type:after { border-right-color: transparent; } .jqx-gantt-chart .jqx-timeline-view-cells .jqx-timeline-view-cell:not(:first-of-type) { border-left-color: transparent; } .jqx-gantt-chart .jqx-timeline-view-cells .jqx-timeline-view-cell[weekend] { background: var(--jqx-gantt-chart-timeline-weekend-color); } .jqx-gantt-chart .jqx-timeline-view-cells .jqx-timeline-view-cell[nonworking] { background: var(--jqx-gantt-chart-timeline-nonworking-color); } .jqx-gantt-chart .jqx-timeline-view-cells div { border-bottom-color: var(--jqx-border); } .jqx-gantt-chart .jqx-timeline-view-cell { position: absolute; display: flex; justify-content: center; align-items: center; background-color: var(--jqx-surface); color: var(--jqx-surface-color); border-top: var(--jqx-border-width) solid var(--jqx-border); border-bottom: var(--jqx-border-width) solid var(--jqx-border); border-left: var(--jqx-border-width) solid var(--jqx-border); border-right: var(--jqx-border-width) solid var(--jqx-border); text-overflow: ellipsis; white-space: nowrap; padding: var(--jqx-gantt-chart-task-bar-fill-padding); height: 100%; border-bottom-color: transparent; height: var(--jqx-gantt-chart-task-default-height); min-width: var(--jqx-gantt-chart-timeline-cell-min-size); width: var(--jqx-gantt-chart-timeline-cell-size); } .jqx-gantt-chart .jqx-timeline-view-cell:first-of-type { border-left: none; } .jqx-gantt-chart .jqx-timeline-view-cell:last-of-type { border-right: none; } .jqx-gantt-chart .jqx-timeline-view-cell > div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; } .jqx-gantt-chart .jqx-timeline-cells-container { width: 100%; } .jqx-gantt-chart .jqx-timeline-markers-container:empty, .jqx-gantt-chart .jqx-timeline-deadlines-container:empty, .jqx-gantt-chart .jqx-timeline-indicators-container:empty { display: none; } .jqx-gantt-chart .jqx-gantt-chart-date-marker { height: 100%; top: 0; position: absolute; border-left: var(--jqx-gantt-chart-date-marker-width) dashed var(--jqx-gantt-chart-date-marker-color); width: 0; pointer-events: none; background: var(--jqx-gantt-chart-date-marker-background); color: var(--jqx-gantt-chart-date-marker-color); } .jqx-gantt-chart .jqx-gantt-chart-date-marker .jqx-gantt-chart-marker-label { position: sticky; background: inherit; top: var(--jqx-gantt-chart-date-marker-v-offset); height: var(--jqx-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(--jqx-gantt-chart-task-fill-border-radius); padding: 5px; margin-inline-start: var(--jqx-gantt-chart-date-marker-h-offset); } .jqx-gantt-chart .jqx-gantt-chart-date-marker .jqx-gantt-chart-marker-label::before { content: ""; position: absolute; border-top: calc(var(--jqx-gantt-chart-date-marker-height) / 2) solid transparent; border-bottom: calc(var(--jqx-gantt-chart-date-marker-height) / 2) solid transparent; border-right: calc(var(--jqx-gantt-chart-date-marker-height) / 2) solid var(--jqx-gantt-chart-date-marker-background); box-sizing: inherit; right: 100%; } .jqx-gantt-chart .jqx-gantt-chart-task-indicator { position: absolute; height: var(--jqx-gantt-chart-task-default-height); display: flex; align-items: center; white-space: nowrap; } .jqx-gantt-chart .jqx-gantt-chart-task-indicator.icon::before { content: var(--jqx-gantt-chart-indicator-icon); font-family: var(--jqx-font-family-icon); font-size: var(--jqx-font-size); margin-inline-end: 2.5px; } .jqx-gantt-chart .jqx-gantt-chart-task-deadline { position: absolute; height: var(--jqx-gantt-chart-task-default-height); display: inline-flex; align-items: center; justify-content: center; width: 1px; pointer-events: none; } .jqx-gantt-chart .jqx-gantt-chart-task-deadline::before { content: var(--jqx-gantt-chart-deadline-icon); font-family: var(--jqx-font-family-icon); font-size: 1.25em; color: var(--jqx-gantt-chart-deadline-color); } .jqx-gantt-chart .jqx-gantt-chart-task-baseline { position: absolute; background: var(--jqx-gantt-chart-baseline-background); background-clip: content-box; border-top: calc(var(--jqx-gantt-chart-task-bar-fill-padding) / 2) solid transparent; border-bottom: var(--jqx-gantt-chart-task-bar-fill-padding) solid transparent; height: var(--jqx-gantt-chart-baseline-size); max-height: var(--jqx-gantt-chart-task-default-height); transform: translateY(calc(var(--jqx-gantt-chart-task-default-height) - var(--jqx-gantt-chart-baseline-size))); pointer-events: none; } .jqx-gantt-chart .jqx-gantt-chart-time-indicators-container { pointer-events: none; } .jqx-gantt-chart .jqx-gantt-chart-time-indicators-container .jqx-gantt-chart-current-time-indicator { position: absolute; height: 100%; width: var(--jqx-gantt-chart-current-time-indicator-size); background: var(--jqx-gantt-chart-current-time-indicator-background); } .jqx-gantt-chart .jqx-gantt-chart-time-indicators-container .jqx-gantt-chart-current-time-indicator:before { position: absolute; left: calc(-1 * var(--jqx-gantt-chart-current-time-indicator-arrow-size) + var(--jqx-gantt-chart-current-time-indicator-size) / 2); border-right: var(--jqx-gantt-chart-current-time-indicator-arrow-size) solid transparent; border-left: var(--jqx-gantt-chart-current-time-indicator-arrow-size) solid transparent; border-top: var(--jqx-gantt-chart-current-time-indicator-arrow-size) solid var(--jqx-gantt-chart-current-time-indicator-background); } .jqx-gantt-chart .jqx-gantt-chart-time-indicators-container .jqx-gantt-chart-current-time-shader { position: absolute; height: 100%; background: var(--jqx-gantt-chart-shader-background); } .jqx-gantt-chart[current-time-indicator] .jqx-gantt-chart-current-time-indicator::before { content: ""; } .jqx-gantt-chart[current-time-indicator] .jqx-timeline-view-cell[current] { border-bottom: var(--jqx-gantt-chart-current-time-indicator-header-size) solid var(--jqx-gantt-chart-current-time-indicator-background); } .jqx-gantt-chart .jqx-timeline-row { display: flex; border-width: var(--jqx-border-width); border-style: solid; border-top: initial; border-bottom-color: var(--jqx-border); background: var(--jqx-gantt-chart-timeline-task-background-color); border-left: none; border-right: none; position: absolute; left: 0; width: inherit; height: var(--jqx-gantt-chart-task-default-height); } .jqx-gantt-chart .jqx-timeline-row:first-of-type { border-left-color: var(--jqx-border); } .jqx-gantt-chart .jqx-timeline-row:last-of-type { border-right-color: var(--jqx-border); } .jqx-gantt-chart .jqx-timeline-row[hover] { background: var(--jqx-ui-state-hover); } .jqx-gantt-chart .jqx-timeline-row[selected] { background: var(--jqx-ui-state-selected); } .jqx-gantt-chart .jqx-timeline-row .jqx-timeline-cell { position: absolute; padding: var(--jqx-gantt-chart-task-bar-fill-padding); height: 100%; min-width: var(--jqx-gantt-chart-timeline-cell-min-size); width: var(--jqx-gantt-chart-timeline-cell-size); } .jqx-gantt-chart .jqx-timeline-row .jqx-timeline-cell:not(:last-of-type) { border-right: var(--jqx-border-width) solid var(--jqx-border); } .jqx-gantt-chart .jqx-timeline-row:not([hover]):not([selected]) .jqx-timeline-cell[weekend] { background: var(--jqx-gantt-chart-timeline-weekend-color); } .jqx-gantt-chart .jqx-timeline-row:not([hover]):not([selected]) .jqx-timeline-cell[nonworking] { background: var(--jqx-gantt-chart-timeline-nonworking-color); } .jqx-gantt-chart .jqx-resource-splitter { --jqx-splitter-bar-fit-size: var(--jqx-gantt-chart-resource-splitter-bar-fit-size); } .jqx-gantt-chart .jqx-resource-splitter .jqx-timeline-content { overflow: hidden; position: relative; } .jqx-gantt-chart .jqx-resource-splitter .jqx-timeline-view-cells .jqx-timeline-view-cell { border-top: none; } .jqx-gantt-chart .jqx-resource-splitter .jqx-timeline-content { height: calc(100% - var(--jqx-gantt-chart-task-default-height)); } .jqx-gantt-chart .jqx-resource-splitter .jqx-timeline-row .jqx-timeline-cell { padding: initial; } .jqx-gantt-chart .jqx-resource-splitter-item > .jqx-container > .jqx-content { overflow: hidden; } .jqx-gantt-chart .jqx-resource-splitter-item .jqx-timeline-view-cells .jqx-timeline-view-cell:after { height: var(--jqx-gantt-chart-resource-timeline-content-height); } .jqx-gantt-chart .jqx-resource-splitter-item[show-header] .jqx-resource-splitter { height: calc(100% - var(--jqx-gantt-chart-header-height)); } .jqx-gantt-chart .jqx-resource-splitter-item .jqx-timeline-cell:first-of-type .jqx-resource-timeline-view-cell { width: 100%; left: 0; } .jqx-gantt-chart .jqx-resource-panel-header { width: 100%; justify-content: center; align-items: center; height: var(--jqx-gantt-chart-header-height); background: var(--jqx-surface); border-bottom: var(--jqx-border) solid var(--jqx-border-width); } .jqx-gantt-chart .jqx-resource-panel-header:empty { display: none; } .jqx-gantt-chart .jqx-resource-timeline-view-cell { position: absolute; background: var(--jqx-gantt-chart-timeline-task-background-color); bottom: 0; border: none; width: calc(100% + var(--jqx-border-width)); left: calc(-1 * var(--jqx-border-width)); height: 100%; display: flex; justify-content: center; align-items: center; } .jqx-gantt-chart .jqx-resource-timeline-view-cell:after { content: ""; display: flex; justify-content: center; align-items: center; overflow: hidden; font-size: var(--jqx-font-size); font-family: var(--jqx-font-family-icon); box-sizing: border-box; } .jqx-gantt-chart .jqx-resource-timeline-view-cell[load]:after { content: attr(load); transform: scale(1) rotate(0deg); } .jqx-gantt-chart .jqx-resource-timeline-view-cell.warning[load]:after { background: var(--jqx-error); color: var(--jqx-error-color); border-radius: 5px; } .jqx-gantt-chart .jqx-task-container { position: relative; width: 100%; height: 100%; box-sizing: border-box; padding-top: var(--jqx-gantt-chart-task-bar-fill-padding); padding-bottom: var(--jqx-gantt-chart-task-bar-fill-padding); } .jqx-gantt-chart .jqx-task-panel-header { width: 100%; justify-content: center; align-items: center; height: var(--jqx-gantt-chart-header-height); background: var(--jqx-surface); } .jqx-gantt-chart .jqx-task-panel-header:empty { display: none; } .jqx-gantt-chart .jqx-task-splitter { --jqx-splitter-bar-fit-size: var(--jqx-gantt-chart-task-splitter-bar-fit-size); } .jqx-gantt-chart .jqx-task-splitter > .jqx-resize-trigger-container { margin-bottom: -2px; } .jqx-gantt-chart .jqx-task-splitter-item > .jqx-container > .jqx-content { overflow: hidden; } .jqx-gantt-chart .jqx-task-splitter-item[show-header] .jqx-task-panel-header { border-bottom: var(--jqx-border-width) solid var(--jqx-border); } .jqx-gantt-chart .jqx-task-splitter-item[show-header] .jqx-task-splitter { height: calc(100% - var(--jqx-gantt-chart-header-height)); } .jqx-gantt-chart .jqx-task-splitter-item[show-header] .jqx-timeline-view-details .jqx-timeline-view-cell { border-top: initial; } .jqx-gantt-chart .jqx-task-connection { cursor: pointer; position: absolute; border: var(--jqx-gantt-chart-timeline-task-connection-width) var(--jqx-gantt-chart-timeline-task-connection-style) var(--jqx-gantt-chart-timeline-task-connection-color); top: 50%; } .jqx-gantt-chart .jqx-task-connection:after { content: ""; width: 100%; height: 100%; border: inherit; position: absolute; border-color: transparent; border-width: 10px; top: 50%; left: 50%; transform: translate(-50%, -50%); } .jqx-gantt-chart .jqx-task-connection[arrow-direction]:before { content: ""; position: absolute; left: calc(100% - var(--jqx-gantt-chart-timeline-task-connection-arrow-width) + 1px); top: calc(-1 * var(--jqx-gantt-chart-timeline-task-connection-arrow-width)); border-top: var(--jqx-gantt-chart-timeline-task-connection-arrow-width) var(--jqx-gantt-chart-timeline-task-connection-arrow-type) transparent; border-bottom: var(--jqx-gantt-chart-timeline-task-connection-arrow-width) var(--jqx-gantt-chart-timeline-task-connection-arrow-type) transparent; border-left: var(--jqx-gantt-chart-timeline-task-connection-arrow-width) var(--jqx-gantt-chart-timeline-task-connection-arrow-type) var(--jqx-gantt-chart-timeline-task-connection-feedback-color); } .jqx-gantt-chart .jqx-task-connection[arrow-direction=left]:before { left: calc(-1 * var(--jqx-gantt-chart-timeline-task-connection-arrow-width) / 2 + 1px); border-right: var(--jqx-gantt-chart-timeline-task-connection-arrow-width) var(--jqx-gantt-chart-timeline-task-connection-arrow-type) var(--jqx-gantt-chart-timeline-task-connection-feedback-color); border-left: none; } .jqx-gantt-chart .jqx-task-connection[hover] { border-color: var(--jqx-gantt-chart-timeline-task-connection-color-hover); box-shadow: 0 0 2.5px 0 var(--jqx-gantt-chart-timeline-task-connection-color); } .jqx-gantt-chart .jqx-task-connection[hover]:before { border-left-color: var(--jqx-gantt-chart-timeline-task-connection-color-hover); border-right-color: var(--jqx-gantt-chart-timeline-task-connection-color-hover); } .jqx-gantt-chart .jqx-task-connection-point { cursor: pointer; position: absolute; border: 1px solid #A9A9A9; border-radius: 50%; width: calc(var(--jqx-gantt-chart-task-default-height) / 2); height: calc(var(--jqx-gantt-chart-task-default-height) / 2); top: calc(var(--jqx-gantt-chart-task-default-height) / 2); transform: scale(0); background-color: #DEDEDE; } .jqx-gantt-chart .jqx-task-connection-point.start { left: calc(-1 * var(--jqx-gantt-chart-task-default-height) / 1.5); } .jqx-gantt-chart .jqx-task-connection-point.end { right: calc(-1 * var(--jqx-gantt-chart-task-default-height) / 1.5); } .jqx-gantt-chart .jqx-task-connection-feedback { position: absolute; top: 50%; transform-origin: left; border: var(--jqx-gantt-chart-timeline-task-connection-feedback-width) var(--jqx-gantt-chart-timeline-task-connection-feedback-style) var(--jqx-gantt-chart-timeline-task-connection-feedback-color); z-index: 1; pointer-events: none; } .jqx-gantt-chart .jqx-task-connection-feedback:before { content: ""; position: absolute; left: calc(100% - var(--jqx-gantt-chart-timeline-task-connection-arrow-width) + 1px); top: calc(-1 * var(--jqx-gantt-chart-timeline-task-connection-arrow-width)); border-top: var(--jqx-gantt-chart-timeline-task-connection-arrow-width) var(--jqx-gantt-chart-timeline-task-connection-arrow-type) transparent; border-bottom: var(--jqx-gantt-chart-timeline-task-connection-arrow-width) var(--jqx-gantt-chart-timeline-task-connection-arrow-type) transparent; border-left: var(--jqx-gantt-chart-timeline-task-connection-arrow-width) var(--jqx-gantt-chart-timeline-task-connection-arrow-type) var(--jqx-gantt-chart-timeline-task-connection-feedback-color); } .jqx-gantt-chart .jqx-task-bar-limiter { position: absolute; top: 0; height: 100%; width: 1px; } .jqx-gantt-chart .jqx-task-bar-limiter.min { border: var(--jqx-border-width) dashed lightgreen; } .jqx-gantt-chart .jqx-task-bar-limiter.max { border: var(--jqx-border-width) dashed red; } .jqx-gantt-chart .jqx-task-bar-limiter.min-date, .jqx-gantt-chart .jqx-task-bar-limiter.max-date { background-image: linear-gradient(135deg, rgba(255, 0, 0, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 0, 0, 0.2) 50%, rgba(255, 0, 0, 0.2) 75%, transparent 75%, transparent); background-size: 1rem 1rem; border: 1px solid white; } .jqx-gantt-chart .jqx-task-bar-limiter.max-date { right: 0; } .jqx-gantt-chart .milestone { height: var(--jqx-gantt-chart-task-default-height); padding: initial; } .jqx-gantt-chart .milestone .jqx-task-container { padding: 0; } .jqx-gantt-chart .milestone .jqx-task-container:before, .jqx-gantt-chart .milestone .jqx-task-container:after { content: ""; position: absolute; box-sizing: border-box; top: 0; } .jqx-gantt-chart .milestone .jqx-task-container:before { left: calc(-1 * var(--jqx-gantt-chart-task-default-height) / 2); border-right: calc(var(--jqx-gantt-chart-task-default-height) / 2) solid var(--jqx-gantt-chart-milestone-color); border-top: calc(var(--jqx-gantt-chart-task-default-height) / 2) solid transparent; border-bottom: calc(var(--jqx-gantt-chart-task-default-height) / 2) solid transparent; } .jqx-gantt-chart .milestone .jqx-task-container:after { border-left: calc(var(--jqx-gantt-chart-task-default-height) / 2) solid var(--jqx-gantt-chart-milestone-color); border-top: calc(var(--jqx-gantt-chart-task-default-height) / 2) solid transparent; border-bottom: calc(var(--jqx-gantt-chart-task-default-height) / 2) solid transparent; } .jqx-gantt-chart .milestone .jqx-task-connection-point.start { transform: translateX(calc(-1 * var(--jqx-gantt-chart-task-default-height) / 2)) scale(0); } .jqx-gantt-chart .milestone .jqx-task-connection-point.end { transform: translateX(calc(var(--jqx-gantt-chart-task-default-height) / 2)) scale(0); } .jqx-gantt-chart .milestone .jqx-task-connection-feedback { left: calc(-1 * var(--jqx-gantt-chart-task-default-height) / 2); } .jqx-gantt-chart .milestone[connection-point=end] .jqx-task-connection-feedback { left: calc(100% + var(--jqx-gantt-chart-task-default-height) / 2); } .jqx-gantt-chart .milestone .jqx-task-segment { min-width: initial; } .jqx-gantt-chart .project .jqx-timeline-task-fill { background: var(--jqx-gantt-chart-project-color); } .jqx-gantt-chart .project .jqx-timeline-task-progress { background: var(--jqx-gantt-chart-project-progress-color); } .jqx-gantt-chart .task .jqx-timeline-task-fill { background: var(--jqx-gantt-chart-task-color); } .jqx-gantt-chart .task .jqx-timeline-task-progress { background: var(--jqx-gantt-chart-task-progress-color); } .jqx-gantt-chart:not([disable-task-drag]) .jqx-timeline-task.milestone .jqx-task-container::after, .jqx-gantt-chart:not([disable-task-drag]) .jqx-timeline-task.milestone .jqx-task-container::before, .jqx-gantt-chart:not([disable-task-drag]) .jqx-timeline-task:not([disable-drag]) .jqx-task-segment:not([disable-drag]) { cursor: move; } .jqx-gantt-chart:not([dragged]):not([resized]) .jqx-timeline-task[selected]:not([resource-group]) .jqx-task-connection-point, .jqx-gantt-chart:not([dragged]):not([resized]) .jqx-timeline-task[hover]:not([resource-group]) .jqx-task-connection-point { transform: translateY(-50%) scale(1); } .jqx-gantt-chart:not([dragged]):not([resized]):not([right-to-left])[show-baseline] .jqx-timeline-task.milestone[selected] .jqx-task-connection-point.start, .jqx-gantt-chart:not([dragged]):not([resized]):not([right-to-left])[show-baseline] .jqx-timeline-task.milestone[hover] .jqx-task-connection-point.start { transform: translate(calc(-1 * var(--jqx-gantt-chart-task-default-height) / 4), -50%) scale(1); } .jqx-gantt-chart:not([dragged]):not([resized]):not([right-to-left])[show-baseline] .jqx-timeline-task.milestone[selected] .jqx-task-connection-point.end, .jqx-gantt-chart:not([dragged]):not([resized]):not([right-to-left])[show-baseline] .jqx-timeline-task.milestone[hover] .jqx-task-connection-point.end { transform: translate(calc(1 * var(--jqx-gantt-chart-task-default-height) / 4), -50%) scale(1); } .jqx-gantt-chart:not([dragged]):not([resized]):not([right-to-left]) .jqx-timeline-task.milestone[selected] .jqx-task-connection-point.start, .jqx-gantt-chart:not([dragged]):not([resized]):not([right-to-left]) .jqx-timeline-task.milestone[hover] .jqx-task-connection-point.start { transform: translate(calc(-1 * var(--jqx-gantt-chart-task-default-height) / 2), -50%) scale(1); } .jqx-gantt-chart:not([dragged]):not([resized]):not([right-to-left]) .jqx-timeline-task.milestone[selected] .jqx-task-connection-point.end, .jqx-gantt-chart:not([dragged]):not([resized]):not([right-to-left]) .jqx-timeline-task.milestone[hover] .jqx-task-connection-point.end { transform: translate(calc(1 * var(--jqx-gantt-chart-task-default-height) / 2), -50%) scale(1); } .jqx-gantt-chart:not([disable-task-progress-change]) .jqx-timeline-task .jqx-timeline-task-progress-thumb:after { cursor: pointer; } .jqx-gantt-chart:not([inverted]) .jqx-timeline-scroll-bar[orientation=vertical]::before { border-right: none; } .jqx-gantt-chart:not([resource-timeline-mode=histogram]) .jqx-resource-timeline-view-cell:not([load])::after { transform: scale(0) rotate(360deg); } .jqx-gantt-chart:not([resource-timeline-mode=histogram]) .jqx-resource-timeline-view-cell::after { height: calc(var(--jqx-gantt-chart-task-default-height) - var(--jqx-gantt-chart-task-bar-fill-padding)); width: calc(var(--jqx-gantt-chart-task-default-height) - var(--jqx-gantt-chart-task-bar-fill-padding)); border-radius: 50%; background: var(--jqx-success); color: var(--jqx-success-color); line-height: 100%; } .jqx-gantt-chart:not([resource-timeline-mode=histogram]) .jqx-timeline-row:first-of-type .jqx-resource-timeline-view-cell { border-top: none; } .jqx-gantt-chart[resource-timeline-mode=histogram] .jqx-resource-timeline-view-cell { /*border-color: var(--jqx-primary);*/ border: var(--jqx-border-width) solid var(--jqx-primary); border-bottom: none; height: 0; padding: 0; background: rgba(var(--jqx-primary-rgb), 0.15); } .jqx-gantt-chart[resource-timeline-mode=histogram] .jqx-resource-timeline-view-cell:after { width: 100%; height: calc(var(--jqx-gantt-chart-task-default-height) - 2px); bottom: 0; } .jqx-gantt-chart[resource-timeline-mode=histogram] .jqx-resource-timeline-view-cell:not([load]):after { content: "-"; } .jqx-gantt-chart[resource-timeline-mode=histogram] .jqx-resource-timeline-view-cell.hide-left-border:before, .jqx-gantt-chart[resource-timeline-mode=histogram] .jqx-resource-timeline-view-cell.hide-right-border:before { width: 100%; content: ""; position: absolute; height: 100%; bottom: 0; z-index: 1; } .jqx-gantt-chart[resource-timeline-mode=histogram] .jqx-resource-timeline-view-cell.hide-left-border.warning:before, .jqx-gantt-chart[resource-timeline-mode=histogram] .jqx-resource-timeline-view-cell.hide-right-border.warning:before { z-index: initial; left: initial; } .jqx-gantt-chart[resource-timeline-mode=histogram] .jqx-resource-timeline-view-cell.hide-right-border { border-right: none; } .jqx-gantt-chart[resource-timeline-mode=histogram] .jqx-resource-timeline-view-cell.hide-right-border:before { border-right: 1px solid var(--jqx-border); left: 0; } .jqx-gantt-chart[resource-timeline-mode=histogram] .jqx-resource-timeline-view-cell.hide-left-border { border-left: none; } .jqx-gantt-chart[resource-timeline-mode=histogram] .jqx-resource-timeline-view-cell.hide-left-border:before { border-left: 1px solid var(--jqx-border); left: -1px; } .jqx-gantt-chart[resource-timeline-mode=histogram] .jqx-resource-timeline-view-cell[load] { border-bottom: none; /*border-left: none; border-right: none;*/ border-top: var(--jqx-border-width) solid var(--jqx-primary); } .jqx-gantt-chart[resource-timeline-mode=histogram] .jqx-resource-timeline-view-cell.warning[load]::after { border-radius: initial; } .jqx-gantt-chart:not([animation=none]) .jqx-resource-timeline-view-cell[load]:after { transition: transform 0.2s cubic-bezier(0.4, 0, 0.6, 1), border-radius 0.2s cubic-bezier(0.4, 0, 0.6, 1); } .jqx-gantt-chart:not([animation=none])[resource-timeline-mode=histogram] .jqx-resource-timeline-view-cell { transition: height 0.2s cubic-bezier(0.4, 0, 0.6, 1); } .jqx-gantt-chart:not([animation=none])[show-progress-label] .jqx-timeline-task-progress::after { transition: color 0.2s ease-in-out; } .jqx-gantt-chart > .jqx-container.vscroll .jqx-timeline, .jqx-gantt-chart.jqx-container.vscroll .jqx-timeline { width: calc(100% - var(--jqx-scroll-bar-size)); } .jqx-gantt-chart[inverted] .jqx-timeline-scroll-bar[orientation=vertical] { right: initial; } .jqx-gantt-chart[inverted] .jqx-timeline-scroll-bar[orientation=vertical]:before { border-left: none; } .jqx-gantt-chart[inverted] > .jqx-container.vscroll .jqx-timeline, .jqx-gantt-chart[inverted].jqx-container.vscroll .jqx-timeline { margin-left: var(--jqx-scroll-bar-size); } .jqx-gantt-chart[inverted] > .jqx-container.vscroll .jqx-timeline-scroll-bar:not([orientation=vertical]), .jqx-gantt-chart[inverted].jqx-container.vscroll .jqx-timeline-scroll-bar:not([orientation=vertical]) { left: calc(var(--jqx-scroll-bar-size)); } .jqx-gantt-chart[inverted] .jqx-timeline-scroll-bar:after { width: calc(var(--jqx-scroll-bar-size)); left: calc(-1 * var(--jqx-scroll-bar-size)); } .jqx-gantt-chart[hide-timeline-header-details] > .jqx-container, .jqx-gantt-chart[hide-timeline-header-details].jqx-container { --jqx-gantt-chart-task-timeline-content-height: var(--jqx-gantt-chart-task-default-height); } .jqx-gantt-chart[hide-timeline-header-details] .jqx-timeline-view-details { display: none; } .jqx-gantt-chart[hide-timeline-header-details] .jqx-task-splitter-item[show-header] .jqx-timeline-view-cell { border-top: none; } .jqx-gantt-chart[hide-timeline-header-details] .jqx-timeline-view-cells { height: var(--jqx-gantt-chart-task-default-height); } .jqx-gantt-chart[hide-timeline-header-details] .jqx-timeline-view-cells .jqx-timeline-view-cell { border-top: initial; } .jqx-gantt-chart[hide-timeline-header-details] .jqx-table { --jqx-table-column-header-height: calc(var(--jqx-gantt-chart-task-default-height) - var(--jqx-border-width)); } .jqx-gantt-chart[hide-timeline-header-details] .jqx-timeline-content-container { height: calc(100% - var(--jqx-gantt-chart-task-default-height)); } .jqx-gantt-chart[hide-timeline-header-details] .jqx-timeline-scroll-bar[orientation=vertical] { top: var(--jqx-gantt-chart-task-default-height); height: calc(100% - var(--jqx-gantt-chart-task-default-height)); } .jqx-gantt-chart[hide-timeline-header-details] .jqx-timeline-scroll-bar[orientation=vertical]:before { top: calc(-1 * var(--jqx-gantt-chart-task-default-height)); height: var(--jqx-gantt-chart-task-default-height); } .jqx-gantt-chart[show-progress-label] .jqx-timeline-task-progress[value]:after { display: flex; height: 100%; content: attr(value); align-items: center; padding: var(--jqx-gantt-chart-progress-label-padding); color: var(--jqx-gantt-chart-task-label-color); font-weight: var(--jqx-font-weight); font-size: var(--jqx-font-size); } .jqx-gantt-chart[show-progress-label] .task .jqx-task-segment[show-progress-label] .jqx-timeline-task-label, .jqx-gantt-chart[show-progress-label] .project .jqx-task-segment[show-progress-label] .jqx-timeline-task-label { padding-left: var(--jqx-gantt-chart-progress-label-width); } .jqx-gantt-chart[show-progress-label] [selected] .jqx-timeline-task-progress::after { color: var(--jqx-gantt-chart-task-label-color-selected); } .jqx-gantt-chart[show-progress-label] .project .jqx-timeline-task-progress::after { color: var(--jqx-gantt-chart-project-label-color); } .jqx-gantt-chart[show-progress-label] .project[selected] .jqx-timeline-task-progress::after { color: var(--jqx-gantt-chart-project-label-color-selected); } .jqx-gantt-chart[connecting-task] .jqx-task-connection { pointer-events: none; } .jqx-gantt-chart[auto-schedule][auto-schedule-strict-mode] .jqx-timeline-task.milestone[connected] .jqx-task-container::after, .jqx-gantt-chart[auto-schedule][auto-schedule-strict-mode] .jqx-timeline-task.milestone[connected] .jqx-task-container::before, .jqx-gantt-chart[auto-schedule][auto-schedule-strict-mode] .jqx-timeline:not([task-bar-hovered]) .jqx-timeline-task[connected] .jqx-timeline-task-fill { cursor: initial; } .jqx-gantt-chart[dragged], .jqx-gantt-chart[resized] { touch-action: none; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } .jqx-gantt-chart[modal] { pointer-events: none; } /* Popup Windows */ .jqx-window.jqx-gantt-chart-popup-window { --jqx-window-header-height: var(--jqx-gantt-chart-popup-window-header-height); --jqx-window-footer-height: var(--jqx-gantt-chart-popup-window-footer-height); --jqx-window-header-footer-padding: 10px; --jqx-window-default-height: auto; --jqx-window-header-background: transparent; --jqx-window-content-padding: 10px; min-height: 50px; max-width: 97vw; max-height: 97vh; } .jqx-window.jqx-gantt-chart-popup-window .jqx-content-container > .jqx-content { align-items: initial; } .jqx-window.jqx-gantt-chart-popup-window .jqx-content-container > .jqx-footer jqx-button { width: 100%; height: 100%; --jqx-button-padding: 0.2rem; } .jqx-window.jqx-gantt-chart-popup-window .jqx-popup-window-button.ok { grid-area: buttonOk; } .jqx-window.jqx-gantt-chart-popup-window .jqx-popup-window-button.cancel { grid-area: buttonCancel; } .jqx-window.jqx-gantt-chart-popup-window .jqx-popup-window-button.cancel .jqx-icon::after { content: var(--jqx-icon-cancel); } .jqx-window.jqx-gantt-chart-popup-window .jqx-popup-window-button.delete { grid-area: buttonDelete; } .jqx-window.jqx-gantt-chart-popup-window .jqx-popup-window-button.delete .jqx-icon::after { content: var(--jqx-icon-delete); } .jqx-window.jqx-gantt-chart-popup-window .jqx-tabs { min-height: initial; height: 100%; width: 100%; } .jqx-window.jqx-gantt-chart-popup-window .jqx-tabs .jqx-tabs-header-section, .jqx-window.jqx-gantt-chart-popup-window .jqx-tabs .jqx-tabs-content-section { border: initial; } .jqx-window.jqx-gantt-chart-popup-window .jqx-tabs .jqx-tabs-header-section { background: inherit; } .jqx-window.jqx-gantt-chart-popup-window .jqx-tabs .jqx-tab-item > .jqx-container { padding: 10px; } .jqx-window.jqx-gantt-chart-popup-window .jqx-gantt-chart-popup-window-editor { display: grid; grid-column-gap: 10px; grid-row-gap: 10px; flex: calc(50% - 10px); } .jqx-window.jqx-gantt-chart-popup-window .jqx-gantt-chart-popup-window-editor .jqx-gantt-chart-label-container { display: flex; justify-content: space-between; align-items: center; } .jqx-window.jqx-gantt-chart-popup-window .jqx-gantt-chart-popup-window-editor .jqx-popup-window-editor-toggle { text-align: center; display: inline-flex; vertical-align: middle; cursor: pointer; letter-spacing: 0.08929em; overflow: hidden; border-color: var(--jqx-border); border-top-left-radius: var(--jqx-border-top-left-radius); border-top-right-radius: var(--jqx-border-top-right-radius); border-bottom-left-radius: var(--jqx-border-bottom-left-radius); border-bottom-right-radius: var(--jqx-border-bottom-right-radius); border-width: var(--jqx-border-width); border-style: solid; font-weight: 500; padding: 5px 20px; -webkit-font-smoothing: antialiased; opacity: var(--jqx-button-opacity); white-space: nowrap; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } .jqx-window.jqx-gantt-chart-popup-window .jqx-gantt-chart-popup-window-editor .jqx-popup-window-editor-toggle:hover { color: var(--jqx-ui-state-color-hover); border-color: var(--jqx-ui-state-border-hover); background-color: var(--jqx-ui-state-hover); } .jqx-window.jqx-gantt-chart-popup-window .jqx-gantt-chart-popup-window-editor .jqx-popup-window-editor-toggle:active { color: var(--jqx-ui-state-color-active); border-color: var(--jqx-ui-state-border-active); background-color: var(--jqx-ui-state-active); } .jqx-window.jqx-gantt-chart-popup-window .jqx-gantt-chart-popup-window-editor .jqx-drop-down-list, .jqx-window.jqx-gantt-chart-popup-window .jqx-gantt-chart-popup-window-editor .jqx-date-time-picker { width: 100%; } .jqx-window.jqx-gantt-chart-popup-window .jqx-gantt-chart-popup-window-editor > b { text-align: center; } .jqx-window.jqx-gantt-chart-popup-window .jqx-gantt-chart-popup-window-editor input { height: var(--jqx-editor-height); } .jqx-window.jqx-task-popup-window { --jqx-window-default-width: var(--jqx-gantt-chart-task-popup-window-default-width); } .jqx-window.jqx-task-popup-window .jqx-content-container > .jqx-footer { display: grid; grid-template-columns: 23% 23% 23% 23%; grid-column-gap: 2%; grid-template-areas: "buttonOk buttonCancel . buttonDelete"; } .jqx-window.jqx-task-popup-window .jqx-content-container > .jqx-footer .jqx-icon { position: relative; height: 100%; font-family: var(--jqx-font-family-icon); font-size: 18px; margin-right: 2.5px; } .jqx-window.jqx-task-popup-window .jqx-popup-window-button.ok .jqx-icon::after { content: var(--jqx-icon-check); } .jqx-window.jqx-task-popup-window .jqx-tab-item[value=general] > .jqx-container { display: flex; grid-row-gap: 10px; grid-column-gap: 10px; flex-wrap: wrap; } .jqx-window.jqx-task-popup-window .jqx-tab-item .jqx-table { --jqx-table-column-header-height: 40px; --jqx-table-row-height: 35px; width: 100%; height: 100%; } .jqx-window.jqx-task-popup-window .jqx-tab-item .jqx-table th { font-weight: 600; } .jqx-window.jqx-task-popup-window .jqx-tab-item .jqx-gantt-window-table-buttons { display: grid; justify-content: flex-end; grid-template-columns: repeat(2, auto); grid-column-gap: 5px; margin-bottom: 5px; } .jqx-window.jqx-task-popup-window .jqx-tab-item .jqx-gantt-window-table-buttons jqx-button { --jqx-button-padding: 8px 16px 8px 8px; border: initial; } .jqx-window.jqx-task-popup-window .jqx-tab-item .jqx-gantt-window-table-buttons jqx-button button::before { display: inline-flex; justify-content: center; align-items: center; box-sizing: border-box; font-family: var(--jqx-font-family-icon); font-size: var(--jqx-font-size); padding-right: 5px; } .jqx-window.jqx-task-popup-window .jqx-tab-item .jqx-gantt-window-table-buttons jqx-button[action=add] button::before { content: var(--jqx-icon-plus); } .jqx-window.jqx-task-popup-window .jqx-tab-item .jqx-gantt-window-table-buttons jqx-button[action=delete] button::before { content: var(--jqx-icon-delete); } .jqx-window.jqx-task-popup-window .jqx-tab-item .jqx-gantt-window-validation-message { color: var(--jqx-error); font-style: italic; margin-top: 5px; display: inline-flex; white-space: pre-wrap; } .jqx-window.jqx-task-popup-window .jqx-tab-item .jqx-gantt-window-validation-message:empty { display: none; } .jqx-confirm-popup-window { --jqx-window-default-width: var(--jqx-gantt-chart-confirm-popup-window-default-width); } .jqx-connection-popup-window { --jqx-window-default-width: var(--jqx-gantt-chart-connection-popup-window-default-width); } .jqx-confirm-popup-window .jqx-content-container > .jqx-content, .jqx-connection-popup-window .jqx-content-container > .jqx-content { justify-content: center; } .jqx-confirm-popup-window .jqx-content-container > .jqx-footer, .jqx-connection-popup-window .jqx-content-container > .jqx-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) { .jqx-confirm-popup-window .jqx-content-container > .jqx-footer, .jqx-connection-popup-window .jqx-content-container > .jqx-footer { align-content: start; } } .jqx-confirm-popup-window .jqx-gantt-chart-popup-window-editor, .jqx-connection-popup-window .jqx-gantt-chart-popup-window-editor { justify-items: center; } .jqx-gantt-chart-popup-window-editor .jqx-input[disabled] { opacity: 0.55; cursor: default; pointer-events: none; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } .jqx-gantt-chart-tooltip { --jqx-tooltip-padding: 10px; } .jqx-gantt-chart-tooltip[visible] { pointer-events: none; } .jqx-gantt-chart-tooltip .jqx-tooltip-content { flex-direction: column; text-align: left; white-space: nowrap; } .jqx-gantt-chart-tooltip .jqx-tooltip-content label:not(:first-of-type) { margin-top: 5px; } .jqx-gantt-chart-critical-task .jqx-timeline-task-fill { background: var(--jqx-error) !important; } .jqx-gantt-chart-critical-task .jqx-timeline-task-label { color: var(--jqx-error-color) !important; } .jqx-gantt-chart[right-to-left] .jqx-timeline-task-label { direction: rtl; } .jqx-gantt-chart[right-to-left] .milestone .jqx-task-container { direction: initial; } .jqx-gantt-chart[right-to-left] > .jqx-container.vscroll .jqx-timeline-scroll-bar:not([orientation=vertical]) { left: calc(var(--jqx-scroll-bar-size)); } .jqx-gantt-chart[right-to-left] > .jqx-container.vscroll .jqx-timeline { margin-left: var(--jqx-scroll-bar-size); } .jqx-gantt-chart[right-to-left] .jqx-timeline-view-cell { direction: rtl; } .jqx-gantt-chart[right-to-left] .jqx-timeline-view-cell:last-of-type { border-right: var(--jqx-border-width) solid var(--jqx-border); } .jqx-gantt-chart[right-to-left] .jqx-timeline-view-cell:first-of-type { border-right: none; border-left: var(--jqx-border-width) solid transparent; } .jqx-gantt-chart[right-to-left] .jqx-timeline-row { left: initial; right: 0; } .jqx-gantt-chart[right-to-left] .jqx-timeline-row .jqx-timeline-cell:first-of-type { border-right: initial; } .jqx-gantt-chart[right-to-left] .jqx-timeline-row .jqx-timeline-cell:not(:first-of-type) { border-right: var(--jqx-border-width) solid var(--jqx-border); } .jqx-gantt-chart[right-to-left] .jqx-timeline-task[connection-point=end] .jqx-task-connection-feedback { left: initial; right: 100%; } .jqx-gantt-chart[right-to-left] .jqx-timeline-scroll-bar:after { right: 100%; left: initial; } .jqx-gantt-chart[right-to-left] .jqx-timeline-scroll-bar[orientation=vertical]:after { left: calc(-1 * var(--jqx-scroll-bar-size)); } .jqx-gantt-chart[right-to-left] .jqx-task-connection-point.end { left: calc(-1 * var(--jqx-gantt-chart-task-default-height) / 1.5); right: initial; } .jqx-gantt-chart[right-to-left] .jqx-task-connection-point.start { right: calc(-1 * var(--jqx-gantt-chart-task-default-height) / 1.5); left: initial; } .jqx-gantt-chart[right-to-left] .jqx-task-connection-feedback { transform-origin: right; } .jqx-gantt-chart[right-to-left] .jqx-task-connection-feedback:before { left: initial; right: calc(100% - var(--jqx-gantt-chart-timeline-task-connection-arrow-width) + 1px); border-right: var(--jqx-gantt-chart-timeline-task-connection-arrow-width) var(--jqx-gantt-chart-timeline-task-connection-arrow-type) var(--jqx-gantt-chart-timeline-task-connection-feedback-color); border-left: initial; } .jqx-gantt-chart[right-to-left] .jqx-task-bar-limiter.min-date, .jqx-gantt-chart[right-to-left] .jqx-task-bar-limiter.max-date { right: var(--jqx-gantt-chart-timeline-column-border-width); left: initial; } .jqx-gantt-chart[right-to-left] .jqx-task-bar-limiter.max-date { left: 0; } .jqx-gantt-chart[right-to-left] .milestone .jqx-task-connection-point.end { left: calc(-1 * var(--jqx-gantt-chart-task-default-height) * 1.15); right: initial; } .jqx-gantt-chart[right-to-left] .milestone .jqx-task-connection-point.start { right: calc(-1 * var(--jqx-gantt-chart-task-default-height) * 1.15); left: initial; } .jqx-gantt-chart[right-to-left] .milestone .jqx-task-connection-feedback { right: calc(-1 * var(--jqx-gantt-chart-task-default-height) / 2); left: initial; } .jqx-gantt-chart[right-to-left] .milestone[connection-point=end] .jqx-task-connection-feedback { right: calc(100% + var(--jqx-gantt-chart-task-default-height) / 2); } .jqx-gantt-chart[right-to-left][show-baseline] .jqx-task-connection-point.end { left: calc(-1 * var(--jqx-gantt-chart-task-default-height) / 2); } .jqx-gantt-chart[right-to-left][show-baseline] .jqx-task-connection-point.start { right: calc(-1 * var(--jqx-gantt-chart-task-default-height) / 2); } .jqx-gantt-chart[right-to-left][show-baseline] .milestone .jqx-task-connection-point.end { left: calc(-1 * var(--jqx-gantt-chart-task-default-height) * 0.75); } .jqx-gantt-chart[right-to-left][show-baseline] .milestone .jqx-task-connection-point.start { right: calc(-1 * var(--jqx-gantt-chart-task-default-height) * 0.75); } .jqx-gantt-chart[right-to-left]:not([inverted]) .jqx-timeline-scroll-bar[orientation=vertical] { right: initial; left: 0; } .jqx-gantt-chart[right-to-left]:not([inverted]) .jqx-timeline-scroll-bar[orientation=vertical]:before { border-left: none; border-right: 1px solid var(--jqx-border); } .jqx-gantt-chart[right-to-left][inverted] > .jqx-container.vscroll .jqx-timeline { margin-right: var(--jqx-scroll-bar-size); } .jqx-gantt-chart[right-to-left][inverted] > .jqx-container.vscroll .jqx-timeline-scroll-bar:not([orientation=vertical]) { left: initial; } .jqx-gantt-chart[right-to-left][inverted] .jqx-timeline-scroll-bar:after { right: calc(-1 * var(--jqx-scroll-bar-size)); } .jqx-gantt-chart[right-to-left][inverted] .jqx-timeline-scroll-bar[orientation=vertical] { right: 0; } .jqx-gantt-chart[right-to-left][inverted] .jqx-timeline-scroll-bar[orientation=vertical]:before { border-right: none; border-left: 1px solid var(--jqx-border); } .jqx-window.jqx-task-popup-window .jqx-tab-item[right-to-left] > .jqx-container > .jqx-footer .jqx-icon { margin-left: 2.5px; } @charset "UTF-8"; /* jqx-gauge */ jqx-gauge { display: block; width: var(--jqx-gauge-default-width); height: var(--jqx-gauge-default-height); min-width: 125px; min-height: 125px; fill: var(--jqx-background-color); } jqx-gauge:focus { outline: none; } jqx-gauge.jqx-element { border: none; } jqx-gauge[disabled] { user-select: none; } jqx-gauge[size-mode=auto] { min-height: initial; } .jqx-gauge:focus .jqx-needle, .jqx-gauge:focus .jqx-needle-central-circle { fill: var(--jqx-primary); } .jqx-gauge .jqx-container, .jqx-gauge.jqx-container { position: relative; border-radius: 50%; } .jqx-gauge .drawContainer > svg { fill: var(--jqx-gauge-label-fill-state); stroke: var(--jqx-gauge-label-stroke); } .jqx-gauge .jqx-svg-container { width: 100%; height: 100%; touch-action: none; } .jqx-gauge .jqx-tick { stroke: var(--jqx-border); stroke-width: 1px; width: 15px; pointer-events: none; } .jqx-gauge .jqx-tick-minor { width: 5px; } .jqx-gauge .jqx-needle { width: 20px; height: 110px; fill: var(--jqx-background-color); } .jqx-gauge .jqx-needle-central-circle { fill: var(--jqx-background-color); } .jqx-gauge .jqx-track { width: 15px; stroke: var(--jqx-border); stroke-width: 2px; fill: var(--jqx-background); } .jqx-gauge .jqx-value { stroke: var(--jqx-ui-state-border-active); stroke-width: 2px; fill: var(--jqx-ui-state-active); } .jqx-gauge .jqx-line { stroke: var(--jqx-background-color); stroke-width: 5px; } .jqx-gauge .jqx-range { width: 75px; fill: #D8D8D8; } .jqx-gauge .jqx-digital-display-container { width: 100%; height: 100%; position: absolute; left: 0; top: 0; pointer-events: none; } .jqx-gauge .jqx-digital-display { --jqx-numeric-text-box-background: transparent; --jqx-numeric-text-box-text-align: center; position: absolute; display: none; width: 80px; height: auto; top: 75%; left: 50%; transform: translate(-50%, -50%); color: black; font-size: inherit; pointer-events: initial; } .jqx-gauge[dragged] { cursor: pointer; } .jqx-gauge[dragged] .jqx-label { cursor: pointer; } .jqx-gauge[analog-display-type=fill][ticks-position=track] .jqx-tick, .jqx-gauge[analog-display-type=line][ticks-position=track] .jqx-tick { stroke: #F2F2F2; } .jqx-gauge[ticks-visibility=major] .jqx-tick-minor, .jqx-gauge[labels-visibility=endPoints] .jqx-label-middle { visibility: hidden; } .jqx-gauge[show-ranges][ranges] .jqx-track { opacity: 0; } .jqx-gauge[show-unit] .jqx-digital-display { --jqx-numeric-text-box-text-align: right; } .jqx-gauge[show-unit] .jqx-digital-display input.jqx-input { border-right: none; } .jqx-gauge[digital-display] .jqx-digital-display { display: inline-block; } .jqx-gauge[digital-display-position=top] .jqx-digital-display { top: 25%; transform: translate(-50%, -50%); } .jqx-gauge[digital-display-position=right] .jqx-digital-display { top: 50%; left: 70%; transform: translate(-50%, -50%); } .jqx-gauge[digital-display-position=left] .jqx-digital-display { top: 50%; left: 30%; transform: translate(-50%, -50%); } .jqx-gauge[digital-display-position=center] .jqx-digital-display { top: 50%; transform: translate(-50%, -50%); } /* ── Quality ──────────────────────────────────────────────────────────────── A reading whose quality is not good must not look like one that is. The value is dimmed for uncertain, hatched for bad and faded for stale, and a word says which - the word first, the treatment second, so it is legible without colour. Scoped to the attribute, so an instrument that never sets quality is untouched. */ jqx-gauge[quality]:not([quality=good]) { position: relative; } jqx-gauge[quality]:not([quality=good])::after { content: attr(quality); position: absolute; top: 2px; right: 2px; z-index: 2; padding: 0 4px; font-size: 10px; font-weight: 600; line-height: 1.4; letter-spacing: 0.04em; text-transform: uppercase; color: var(--jqx-industrial-alarm-warning-text, var(--jqx-warning)); background: var(--jqx-background); border: 1px solid currentColor; border-radius: 2px; pointer-events: none; } jqx-gauge[quality=bad]::after { color: var(--jqx-industrial-alarm-critical-text, var(--jqx-error)); } jqx-gauge[quality=uncertain] .jqx-needle, jqx-gauge[quality=uncertain] .jqx-value { opacity: 0.6; } jqx-gauge[quality=stale] .jqx-needle, jqx-gauge[quality=stale] .jqx-value { opacity: 0.4; } jqx-gauge[quality=bad] .jqx-needle, jqx-gauge[quality=bad] .jqx-value { opacity: 0.5; } jqx-gauge[quality=stale] .jqx-digital-display, jqx-gauge[quality=uncertain] .jqx-digital-display { opacity: 0.65; font-style: italic; } jqx-gauge[quality=bad] .jqx-digital-display input.jqx-input { text-decoration: line-through; } /* jqx-gauge */ jqx-gauge[right-to-left] .jqx-label, jqx-gauge[right-to-left] .jqx-label-middle { direction: rtl; text-anchor: end; } input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .jqx-grid-footer { background: var(--jqx-surface); color: var(--jqx-surface-color); border-color: var(--jqx-border); height: var(--jqx-grid-footer-height); border-top-width: 1px; border-top-style: solid; } .jqx-grid-column-header .jqx-arrow-down.jqx-animate { transform: rotate(90deg); transition: transform 0.2s ease-out; } .jqx-grid-column-header .jqx-arrow-down.jqx-animate:after { content: var(--jqx-icon-arrow-down); } .jqx-grid-column-header .top-right-corner { overflow: hidden; right: 0px; top: 0px; width: calc(1px + var(--jqx-scroll-bar-size)); position: absolute; border-left: 1px solid inherit; z-index: 1; } .jqx-grid-column-header .top-right-corner:first-child { left: -1px; z-index: 2; } .jqx-grid-column-header-cell-container { position: relative; z-index: 1; height: 100%; } .jqx-grid-column-header-cell-container:hover jqx-grid-column[freeze][checkbox][auto-show] .jqx-input { opacity: 1; border-color: var(--jqx-border); } .jqx-grid-column-header-cell-container.near, .jqx-grid-column-header-cell-container.far { position: absolute; z-index: 6; box-sizing: content-box; } .jqx-grid-column-header-cell-container.near { border-right: var(--jqx-grid-freeze-splitter-size) solid var(--jqx-border); } .jqx-grid-column-header-cell-container.far { right: 0px; top: 0px; border-left-width: 1px; border-left-style: solid; border-left-color: inherit; border-left: var(--jqx-grid-freeze-splitter-size) solid var(--jqx-border); } .jqx-grid-column-header-cell-container.far.vscroll { right: var(--jqx-scroll-bar-size); } .jqx-grid-column-group { color: var(--jqx-surface-color); background: var(--jqx-surface); white-space: nowrap; border-width: 0px; border-style: solid; overflow: hidden; height: 100%; position: absolute; text-overflow: ellipsis; font-size: var(--jqx-grid-column-font-size, inherit); font-weight: var(--jqx-grid-column-font-weight, inherit); } .jqx-grid-column-group.jqx-grid-column-border { border-width: var(--jqx-border-width); border-top-color: var(--jqx-border); border-top-width: 0px; border-bottom-color: var(--jqx-border); border-left-color: var(--jqx-border); border-right-color: var(--jqx-border); } .jqx-grid-column-group:not(.jqx-grid-column-border) { position: relative; } .jqx-grid-column-group:not(.jqx-grid-column-border)::after { content: ""; position: absolute; bottom: 0; width: 100%; height: var(--jqx-border-width); background: var(--jqx-grid-column-horizontal-border, var(--jqx-border)); } .jqx-grid-column-group:not(.jqx-grid-column-border):not(.jqx-grid-column-border-collapse)::before { content: ""; position: absolute; top: 0; left: 0; width: var(--jqx-border-width); height: 100%; background: var(--jqx-grid-column-vertical-border, var(--jqx-border)); } .jqx-grid-icon { height: 100%; font-family: var(--jqx-font-family-icon); font-style: normal; font-weight: normal; 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(--jqx-grid-column-buttons-width); min-width: 0px; display: none; } .jqx-grid-icon.visible { display: inline-block !important; width: 20px; } .jqx-grid-icon.show { display: flex !important; } .jqx-grid-icon.jqx-icon-link:before { content: var(--jqx-icon-link); } .jqx-grid-icon.jqx-icon-ai:before { content: "AI"; font-family: var(--jqx-font-family); font-weight: 700; font-size: 12px; } .jqx-grid-icon.jqx-icon-cloud:before { content: var(--jqx-icon-cloud); } .jqx-grid-icon.jqx-icon-mail:before { content: var(--jqx-icon-mail); } .jqx-grid-icon.jqx-icon-math:before { content: var(--jqx-icon-math); } .jqx-grid-icon.jqx-icon-user:before { content: var(--jqx-icon-user); } .jqx-grid-icon.jqx-icon-list-ordered:before { content: var(--jqx-icon-list-ordered); } .jqx-grid-icon.jqx-icon-list-unordered:before { content: var(--jqx-icon-list-unordered); } .jqx-grid-icon.jqx-icon-plus:before { content: var(--jqx-icon-plus); } .jqx-grid-icon.jqx-icon-image:before { content: var(--jqx-icon-image); } .jqx-grid-icon.jqx-icon-plus-circled:before { content: var(--jqx-icon-plus-circled); } .jqx-grid-icon.jqx-icon-docs:before { content: var(--jqx-icon-docs); } .jqx-grid-icon.jqx-icon-pdf:before { content: var(--jqx-icon-pdf); color: #E50012; } .jqx-grid-icon.jqx-icon-word::before { content: var(--jqx-icon-word); color: #185ABD; } .jqx-grid-icon.jqx-icon-music::before { content: var(--jqx-icon-music); color: #C5C33C; } .jqx-grid-icon.jqx-icon-video::before { content: var(--jqx-icon-video); color: #D94775; } .jqx-grid-icon.jqx-icon-excel:before { content: var(--jqx-icon-excel); color: #107C41; } .jqx-grid-icon.jqx-icon-archive:before { content: var(--jqx-icon-archive); color: #EDC949; } .jqx-grid-icon.jqx-icon-file:before { content: var(--jqx-icon-file); color: var(--jqx-primary); } .jqx-grid-icon.jqx-icon-powerpoint:before { content: var(--jqx-icon-powerpoint); color: #C43E1C; } .jqx-grid-icon.jqx-icon-text:before { content: var(--jqx-icon-text); } .jqx-grid-icon.jqx-icon-minus:before { content: var(--jqx-icon-minus); } .jqx-grid-icon.jqx-icon-resize-full:before { content: var(--jqx-icon-resize-full); } .jqx-grid-icon.jqx-icon-resize-small:before { content: var(--jqx-icon-resize-small); } .jqx-grid-icon.jqx-icon-window-restore:before { content: var(--jqx-icon-window-restore); } .jqx-grid-icon.jqx-icon-window-maximize:before { content: var(--jqx-icon-window-maximize); } .jqx-grid-icon.jqx-icon-align-left:before { content: var(--jqx-icon-align-left); } .jqx-grid-icon.jqx-icon-align-right:before { content: var(--jqx-icon-align-right); } .jqx-grid-icon.jqx-icon-align-center:before { content: var(--jqx-icon-align-center); } .jqx-grid-icon.jqx-icon-cancel:before { content: var(--jqx-icon-cancel); } .jqx-grid-icon.jqx-icon-cancel-circled:before { content: var(--jqx-icon-cancel-circled); } .jqx-grid-icon.jqx-icon-edit:before { content: var(--jqx-icon-edit); } .jqx-grid-icon.jqx-icon-mode-edit:before { content: var(--jqx-icon-mode-edit); } .jqx-grid-icon.jqx-icon-sort:before { content: var(--jqx-icon-sort); } .jqx-grid-icon.jqx-icon-delete:before { content: var(--jqx-icon-delete); } .jqx-grid-icon.jqx-icon-close:before { content: var(--jqx-icon-close); } .jqx-grid-icon.jqx-icon-download:before { content: var(--jqx-icon-download-alt); } .jqx-grid-icon.jqx-icon-search:before { content: var(--jqx-icon-search); } .jqx-grid-icon.jqx-icon-history:before { content: var(--jqx-icon-history); } .jqx-grid-icon.jqx-icon-settings:before { content: var(--jqx-icon-settings); } .jqx-grid-icon.jqx-icon-visibility-off:before { content: var(--jqx-icon-visibility-off); } .jqx-grid-icon.jqx-icon-visibility-on:before { content: var(--jqx-icon-visibility); } .jqx-grid-icon.jqx-icon-add-filter:before { content: var(--jqx-icon-add-filter); } .jqx-grid-icon.jqx-icon-duplicate:before { content: var(--jqx-icon-duplicate); } .jqx-grid-icon.jqx-icon-check-empty:before { content: var(--jqx-icon-check-empty); } .jqx-grid-icon.jqx-icon-check-squared:before { content: var(--jqx-icon-check-squared); } .jqx-grid-icon.jqx-icon-check:before { content: var(--jqx-icon-check); } .jqx-grid-icon.jqx-icon-number:before { content: "#"; font-weight: bold; font-style: normal; font-variant: normal; text-rendering: auto; font-family: var(--jqx-font-family); -webkit-font-smoothing: antialiased; padding-left: 2px; } .jqx-grid-icon.jqx-icon-filter:before { content: var(--jqx-icon-filter); } .jqx-grid-icon.jqx-icon-phone:before { content: var(--jqx-icon-phone); } .jqx-grid-icon.jqx-icon-lock:before { content: var(--jqx-icon-lock); } .jqx-grid-icon.jqx-icon-lock-open:before { content: var(--jqx-icon-lock-open); } .jqx-grid-icon.jqx-icon-tasks:before { content: var(--jqx-icon-tasks); } .jqx-grid-icon.jqx-icon-table-alt:before { content: var(--jqx-icon-table-alt); } .jqx-grid-icon.jqx-icon-grid-alt:before { content: var(--jqx-icon-grid-alt); } .jqx-grid-icon.jqx-icon-kanban:before { content: var(--jqx-icon-kanban); } .jqx-grid-icon.jqx-icon-timeline:before { content: var(--jqx-icon-timeline); } .jqx-grid-icon.jqx-icon-scheduler:before { content: var(--jqx-icon-scheduler); } .jqx-grid-icon.jqx-icon-like:before { content: var(--jqx-icon-like); } .jqx-grid-icon.jqx-icon-heart:before { content: var(--jqx-icon-heart); } .jqx-grid-icon.jqx-icon-flag:before { content: var(--jqx-icon-flag); } .jqx-grid-icon.jqx-icon-card:before { content: var(--jqx-icon-card); } .jqx-grid-icon.jqx-icon-kanban-alt:before { content: var(--jqx-icon-kanban-alt); } .jqx-grid-icon.jqx-icon-card-alt:before { content: var(--jqx-icon-card-alt); } .jqx-grid-icon.jqx-icon-clock:before { content: var(--jqx-icon-clock); } .jqx-grid-icon.jqx-icon-font:before { content: var(--jqx-icon-font); } .jqx-grid-icon.jqx-icon-fontsize:before { content: var(--jqx-icon-fontsize); } .jqx-grid-icon.jqx-icon-menu:before { content: var(--jqx-icon-menu); } .jqx-grid-icon.jqx-icon-sort-down:before { content: var(--jqx-icon-arrow-down); } .jqx-grid-icon.jqx-icon-sort-up:before { content: var(--jqx-icon-arrow-up); } .jqx-grid-icon.jqx-icon-ellipsis:before { content: var(--jqx-icon-ellipsis); } .jqx-grid-icon.jqx-icon-ellipsis-vert:before { content: var(--jqx-icon-ellipsis); transform: rotate(90deg); } .jqx-grid-icon.jqx-icon-minus-squared:before { content: var(--jqx-icon-minus-squared); } .jqx-grid-icon.jqx-icon-ok-squared:before { content: var(--jqx-icon-ok-squared); } .jqx-grid-icon.jqx-icon-sort-name-up:before { content: var(--jqx-icon-sort-name-up); } .jqx-grid-icon.jqx-icon-sort-name-down:before { content: var(--jqx-icon-sort-name-down); } .jqx-grid-icon.jqx-icon-sort-alt-up:before { content: var(--jqx-icon-sort-alt-up); } .jqx-grid-icon.jqx-icon-sort-alt-down:before { content: var(--jqx-icon-sort-alt-down); } .jqx-grid-icon.jqx-icon-sort-number-up:before { content: var(--jqx-icon-sort-number-up); } .jqx-grid-icon.jqx-icon-sort-number-down:before { content: var(--jqx-icon-sort-number-down); } .jqx-grid-icon.jqx-icon-group:before { content: var(--jqx-icon-group); } .jqx-grid-icon.jqx-icon-ungroup:before { content: var(--jqx-icon-ungroup); } .jqx-grid-icon.jqx-icon-reload:before { content: var(--jqx-icon-reload); } .jqx-grid-icon.jqx-icon-contains:before { content: var(--jqx-icon-contains); } .jqx-grid-icon.jqx-icon-copy-record:before { content: var(--jqx-icon-copy-record); } .jqx-grid-icon.jqx-icon-cut:before { content: var(--jqx-icon-cut); } .jqx-grid-icon.jqx-icon-paste:before { content: var(--jqx-icon-paste); } .jqx-grid-icon.jqx-icon-starts-with:before { content: var(--jqx-icon-starts_with); } .jqx-grid-icon.jqx-icon-ends-with:before { content: var(--jqx-icon-ends_with); } .jqx-grid-icon.jqx-icon-does-not-contain:before { content: var(--jqx-icon-does_not_contain); } .jqx-grid-icon.jqx-icon-equals:before { content: var(--jqx-icon-equals); } .jqx-grid-icon.jqx-icon-greater-than:before { content: var(--jqx-icon-greater-than); } .jqx-grid-icon.jqx-icon-greater-than-equal:before { content: var(--jqx-icon-greater-than-equal); } .jqx-grid-icon.jqx-icon-less-than:before { content: var(--jqx-icon-less-than); } .jqx-grid-icon.jqx-icon-less-than-equal:before { content: var(--jqx-icon-less-than-equal); } .jqx-grid-icon.jqx-icon-not-equal:before { content: var(--jqx-icon-not-equal); } .jqx-grid-icon.jqx-icon-percentage:before { content: var(--jqx-icon-percentage); } .jqx-grid-icon.jqx-icon-grip-vertical:before { content: var(--jqx-icon-grip-vertical); } .jqx-grid-icon.jqx-icon-between:before { content: var(--jqx-icon-between); } .jqx-grid-icon.jqx-icon-bold:before { content: var(--jqx-icon-bold); } .jqx-grid-icon.jqx-icon-italic:before { content: var(--jqx-icon-italic); } .jqx-grid-icon.jqx-icon-underline:before { content: var(--jqx-icon-underline); } .jqx-grid-icon.jqx-icon-color-background:before { content: var(--jqx-icon-color-background); } .jqx-grid-icon.jqx-icon-calendar:before { content: var(--jqx-icon-calendar); } .jqx-grid-icon.jqx-icon-comment:before { content: var(--jqx-icon-comment); } .jqx-grid-icon.jqx-icon-attention:before { content: var(--jqx-icon-attention); } .jqx-grid-icon.jqx-icon-help-circled:before { content: var(--jqx-icon-help-circled); } .jqx-grid-icon.jqx-icon-star:before { content: var(--jqx-icon-star); } .jqx-grid-icon.jqx-icon-attention-circled:before { content: var(--jqx-icon-attention-circled); } .jqx-grid-icon.jqx-icon-chart:before { content: var(--jqx-icon-chart); } .jqx-grid-icon.jqx-icon-bell:before { content: var(--jqx-icon-bell); } .jqx-grid-icon.jqx-icon-circle:before { content: var(--jqx-icon-circle); } .jqx-grid-icon.jqx-icon-circle-empty:before { content: var(--jqx-icon-circle-empty); } .jqx-grid-icon.jqx-icon-toggle-on:before { content: var(--jqx-icon-toggle-on); } .jqx-grid-icon.jqx-icon-toggle-off:before { content: var(--jqx-icon-toggle-off); } .jqx-grid-icon.jqx-icon-up:before { content: var(--jqx-icon-up); } .jqx-grid-icon.jqx-icon-down:before { content: var(--jqx-icon-up); transform: rotate(180deg); } .jqx-grid-icon.jqx-icon-right:before { content: var(--jqx-icon-arrow-right); } .jqx-grid-icon.jqx-icon-left:before { content: var(--jqx-icon-arrow-left); } .jqx-grid-loader { margin: inherit; display: block; position: absolute; top: 50%; left: 50%; z-index: 99; transform: translate(-50%, -50%); opacity: 0.85; text-align: left; border: 6px solid rgba(43, 51, 63, 0.1); box-sizing: border-box; background-clip: padding-box; -webkit-background-clip: padding-box; border-radius: 50%; width: calc(var(--jqx-loader-size) + 10px); height: calc(var(--jqx-loader-size) + 10px); } .jqx-grid-loader:after, .jqx-grid-loader:before { content: ""; position: absolute; margin: -6px; box-sizing: inherit; width: inherit; height: inherit; border-radius: inherit; opacity: 1; border-style: inherit; border-color: inherit; border-top-color: inherit; border-width: 6px; animation-delay: 0.44s; animation: jqx-loader-spin 1.1s cubic-bezier(0.6, 0.2, 0, 0.8) infinite, jqx-loader-spin-fade 1.1s linear infinite; } .jqx-grid-loader[loading-indicator-position=top] { width: var(--jqx-loader-size); height: var(--jqx-loader-size); } .jqx-grid-loader[loading-indicator-position=top] .jqx-loader-container { top: 0; position: absolute; animation: jqx-loader-container-pop-up-top 0.3s linear; } .jqx-grid-loader[loading-indicator-position=bottom] .jqx-loader-container { top: -10%; } .jqx-grid-loader[loading-indicator-position=top] .jqx-loader-container, .jqx-grid-loader[loading-indicator-position=bottom] .jqx-loader-container { display: block; position: relative; width: 100%; height: 10%; background-color: var(--jqx-background); overflow: hidden; animation: jqx-loader-container-pop-up-down 0.3s linear; left: 20%; } .jqx-grid-loader[loading-indicator-position=top] .jqx-loader-label, .jqx-grid-loader[loading-indicator-position=bottom] .jqx-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; } .jqx-grid-placeholder { user-select: none; text-align: center; display: flex; height: 100%; min-height: 50px; justify-content: center; align-items: center; background: var(--jqx-background); } .jqx-grid-content.auto-height .jqx-grid-placeholder { height: initial; } .jqx-grid-content.auto-height jqx-grid-cell[addNewRow] { border-right: none; } .jqx-grid-special-cells-container { overflow: hidden; position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; } .jqx-grid-cell-container { height: 100%; position: relative; } .jqx-grid-cell-container.near, .jqx-grid-cell-container.far { position: absolute; z-index: 6; box-sizing: content-box; } .jqx-grid-cell-container.near { /* border-right: var(--jqx-grid-freeze-splitter-size) solid var(--jqx-border);*/ } .jqx-grid-cell-container.far { right: 0px; top: 0px; border-left-width: 1px; border-left-style: solid; border-left-color: var(--jqx-border); border-left: var(--jqx-grid-freeze-splitter-size) solid var(--jqx-border); } .jqx-grid-cell-container.far.vscroll { right: var(--jqx-scroll-bar-size); } .jqx-grid-column-header-cell-container.border-collapse.near, .jqx-grid-cell-container.border-collapse.near { box-sizing: border-box; border-right: none; } .jqx-grid-column-header-cell-container.border-collapse.far, .jqx-grid-cell-container.border-collapse.far { box-sizing: border-box; border-left: none; } /*jqx-grid*/ jqx-grid { width: var(--jqx-grid-default-width); height: var(--jqx-grid-default-height); grid-template-columns: var(--jqx-grid-template-columns); grid-column-gap: var(--jqx-grid-column-gap); grid-row-gap: var(--jqx-grid-row-gap); contain: content; visibility: hidden; } jqx-grid .jqx-grid-cell-loading { height: 10px; position: absolute; top: calc(50% - 5px); background: var(--jqx-surface); width: 80%; left: 10%; border: 1px solid var(--jqx-surface); border-radius: var(--jqx-border-radius); } jqx-grid .jqx-grid-add-column-button, jqx-grid .jqx-grid-add-row-button { position: absolute; bottom: 0px; left: 0px; z-index: 12; width: 30px; background: var(--jqx-surface); transform: scale(0); opacity: 0; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); height: 28px; } jqx-grid .jqx-grid-add-column-button.insert, jqx-grid .jqx-grid-add-row-button.insert { transition: background 0.2s cubic-bezier(0.4, 0, 0.2, 1); } jqx-grid .jqx-grid-add-column-button.float, jqx-grid .jqx-grid-add-row-button.float { height: 24px; width: 24px; border-radius: 50%; font-size: 14px; border: 1px solid var(--jqx-primary); left: 5px; bottom: 5px; background: var(--jqx-primary); color: var(--jqx-primary-color); } jqx-grid .jqx-grid-add-column-button.jqx-grid-add-column-button, jqx-grid .jqx-grid-add-row-button.jqx-grid-add-column-button { right: 5px; left: initial; top: 55px; } jqx-grid .jqx-grid-add-column-button.show, jqx-grid .jqx-grid-add-row-button.show { transform: scale(1); opacity: 1; } jqx-grid .jqx-grid-add-column-button.show:active, jqx-grid .jqx-grid-add-column-button.show:hover, jqx-grid .jqx-grid-add-row-button.show:active, jqx-grid .jqx-grid-add-row-button.show:hover { color: var(--jqx-primary-color); background: var(--jqx-primary); } jqx-grid .jqx-grid-add-column-button.show:active.float, jqx-grid .jqx-grid-add-column-button.show:hover.float, jqx-grid .jqx-grid-add-row-button.show:active.float, jqx-grid .jqx-grid-add-row-button.show:hover.float { transform: scale(1.2); box-shadow: var(--jqx-elevation-6); } jqx-grid.jqx-kanban-view { background: #fafafa; } jqx-grid.jqx-kanban-view .jqx-grid-add-row-button { display: none !important; } jqx-grid[appearance_hide-column-group-lines] jqx-grid-column:not([column-group-first-child])[column-group]:before { background: transparent !important; } jqx-grid.jqx-element { visibility: inherit; } .jqx-grid.jqx-container { width: var(--jqx-grid-default-width); height: var(--jqx-grid-default-height); grid-template-columns: var(--jqx-grid-template-columns); grid-column-gap: var(--jqx-grid-column-gap); grid-row-gap: var(--jqx-grid-row-gap); contain: content; visibility: hidden; } .jqx-grid > .jqx-container .jqx-grid-header, .jqx-grid.jqx-container .jqx-grid-header { background: var(--jqx-surface); color: var(--jqx-surface-color); border-color: var(--jqx-border); height: var(--jqx-grid-header-height); border-bottom-width: 1px; border-bottom-style: solid; width: 100%; } .jqx-grid > .jqx-container .jqx-grid-column-header, .jqx-grid.jqx-container .jqx-grid-column-header { height: var(--jqx-grid-column-header-height); min-height: 30px; color: var(--jqx-surface-color); overflow: hidden; position: relative; z-index: 99; } .jqx-grid > .jqx-container .jqx-grid-content, .jqx-grid.jqx-container .jqx-grid-content { width: 100%; height: 100%; padding: 0; overflow: hidden; border: none; background: var(--jqx-surface); } .jqx-grid > .jqx-container.jqx-grid-resize-mode, .jqx-grid.jqx-container.jqx-grid-resize-mode { overflow: visible; } .jqx-grid.jqx-element { visibility: inherit; } .jqx-grid jqx-grid-row[data-id="9999999"] { box-shadow: rgba(140, 149, 159, 0.15) 0px 3px 6px 0px; } .jqx-grid jqx-grid-row .jqx-justify-flex-start { justify-content: flex-start important; } .jqx-grid jqx-grid-row .jqx-grid-row-detail { overflow: hidden; width: 100%; z-index: 3; position: absolute; background: var(--jqx-background); color: var(--jqx-background-color); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: var(--jqx-border); transform-origin: top; transform: scaleY(0); display: flex; justify-content: flex-start; } .jqx-grid jqx-grid-row .jqx-grid-row-detail > div { width: 100%; height: 100%; line-height: initial; overflow: hidden; position: relative; } .jqx-grid jqx-grid-row[has-detail] { transition: height 0.25s ease-in-out; } .jqx-grid jqx-grid-row[has-detail] .jqx-grid-row-detail.jqx-animate { transition: transform 0.25s ease-in-out, height 0.25s ease-in-out; } .jqx-grid jqx-grid-row[show-detail] .jqx-grid-row-detail { transform: scaleY(1); } .jqx-grid jqx-grid-row[unbound] jqx-grid-cell { background: var(--jqx-grid-cell-background-unbound); color: var(--jqx-grid-cell-color-unbound); } .jqx-grid jqx-grid-row jqx-grid-cell:not(.jqx-grid-column-border).jqx-grid-horizontal-border-collapse:after { height: 0px; } .jqx-grid jqx-grid-row jqx-grid-cell:not(.jqx-grid-column-border).jqx-grid-vertical-border-collapse:before { width: 0px; } .jqx-grid jqx-grid-column .jqx-grid-command-item { padding: 0px; align-items: center; justify-content: center; border-radius: 0px; } .jqx-grid jqx-grid-column .jqx-add-new-column { border-right: 1px solid var(--jqx-border); } .jqx-grid jqx-grid-column .jqx-add-new-column:hover { background: var(--jqx-ui-state-hover); color: var(--jqx-ui-state-color-hover); } .jqx-grid jqx-grid-column:not(.jqx-grid-column-border).jqx-grid-horizontal-border-collapse:after { height: 0px; } .jqx-grid jqx-grid-column:not(.jqx-grid-column-border).jqx-grid-vertical-border-collapse:before { width: 0px; } .jqx-grid jqx-grid-column.afterTarget:last-child:after { right: 0px; } .jqx-grid jqx-grid-column.dragged { background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.1) 75%, transparent 75%, transparent); background-size: 3em 3em; } .jqx-grid jqx-grid-cell .jqx-grid-command-item { padding: 0px 3px; overflow: hidden; } .jqx-grid jqx-grid-cell.dragged { background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.1) 75%, transparent 75%, transparent); background-size: 3em 3em; } .jqx-grid .jqx-grid-scroll-view { width: 100%; height: 100%; position: relative; overflow: hidden; } .jqx-grid .jqx-grid-scroll-view .jqx-grid-row-container.far { bottom: -2px; } .jqx-grid .jqx-grid-scroll-view.has-vscroll jqx-grid-row[data-id="9999999"] { box-shadow: none !important; --jqx-grid-cell-header-horizontal-border: transparent; --jqx-grid-cell-horizontal-border: transparent; } .jqx-grid .jqx-grid-scroll-view.vscroll { width: calc(100% - var(--jqx-scroll-bar-size)); } .jqx-grid .jqx-grid-scroll-view.vscroll .jqx-grid-row-container.near, .jqx-grid .jqx-grid-scroll-view.vscroll .jqx-grid-row-container.far { width: calc(100% - var(--jqx-scroll-bar-size)); } .jqx-grid .jqx-grid-scroll-view.hscroll .jqx-grid-row-container.far { bottom: calc(-2px + var(--jqx-scroll-bar-size)); } .jqx-grid .jqx-grid-resize-mode { overflow: visible; } .jqx-grid jqx-scroll-bar { overflow: visible; position: absolute; bottom: 0; height: calc(var(--jqx-scroll-bar-size)); width: 100%; z-index: 11; touch-action: none; } .jqx-grid jqx-scroll-bar:after { position: absolute; content: ""; width: var(--jqx-scroll-bar-size); height: var(--jqx-scroll-bar-size); min-width: var(--jqx-scroll-bar-far-size); background: var(--jqx-scroll-bar-background); left: 100%; top: 0px; } .jqx-grid jqx-scroll-bar:before { position: absolute; content: ""; width: var(--jqx-scroll-bar-near-size); height: var(--jqx-scroll-bar-size); background: var(--jqx-scroll-bar-background); left: calc(0px - var(--jqx-scroll-bar-near-size)); top: 0px; } .jqx-grid jqx-scroll-bar.jqx-element { border: none; border-radius: 0; } .jqx-grid jqx-scroll-bar.bottom-corner-visible { width: calc(100% - var(--jqx-scroll-bar-size)); } .jqx-grid jqx-scroll-bar[orientation=vertical] { right: 0; top: 0; height: 100%; width: calc(var(--jqx-scroll-bar-size)); border-left: 1px solid var(--jqx-border); } .jqx-grid jqx-scroll-bar[orientation=vertical]:before { position: absolute; content: ""; height: var(--jqx-scroll-bar-near-size); width: var(--jqx-scroll-bar-size); background: var(--jqx-scroll-bar-background); left: -1px; top: calc(0px - var(--jqx-scroll-bar-near-size)); border-left: 1px solid var(--jqx-border); } .jqx-grid jqx-scroll-bar[orientation=vertical]:after { position: absolute; content: ""; width: var(--jqx-scroll-bar-size); height: var(--jqx-scroll-bar-size); min-height: var(--jqx-scroll-bar-far-size); background: var(--jqx-scroll-bar-background); left: 0px; bottom: calc(0px - var(--jqx-scroll-bar-far-size)); top: auto; min-width: 0; z-index: -1; } .jqx-grid jqx-scroll-bar[orientation=vertical].bottom-corner-visible { height: calc(100% - var(--jqx-scroll-bar-size)); } .jqx-grid .jqx-data-view-header-drop-down { transition: transform cubic-bezier(0.4, 0, 0.2, 1) 0.2s; transform: scaleY(0); } .jqx-grid .jqx-data-view-header-drop-down.open { transform: scaleY(1); } .jqx-grid .jqx-breadcrumb-items > .target:before, .jqx-grid .jqx-breadcrumb-items > .afterTarget:last-child:after { content: ""; display: none; } .jqx-grid .jqx-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(--jqx-item-border-top-left-radius); border-top-right-radius: var(--jqx-item-border-top-right-radius); border-bottom-right-radius: var(--jqx-item-border-bottom-right-radius); border-bottom-left-radius: var(--jqx-item-border-bottom-left-radius); } .jqx-grid .jqx-grid-command-item:hover { background: var(--jqx-ui-state-hover); color: var(--jqx-ui-state-color-hover); border: 1px solid var(--jqx-ui-state-border-hover); } .jqx-grid .jqx-grid-command-item:active { background: var(--jqx-ui-state-active); color: var(--jqx-ui-state-color-active); border: 1px solid var(--jqx-ui-state-border-active); } .jqx-grid .jqx-grid-command-item .jqx-grid-icon { display: flex; min-width: 16px; width: auto; } .jqx-grid .jqx-grid-command-item span:last-child:not(:first-child) { margin-left: 4px; } .jqx-grid .jqx-grid-command-bar { display: flex; align-items: center; padding: 5px; } .jqx-grid .jqx-grid-command-bar .jqx-grid-icon { display: flex; } .jqx-grid .jqx-grid-resize-line { position: absolute; z-index: 99; opacity: 0.8; width: var(--jqx-grid-resize-line-size); background: var(--jqx-primary); } .jqx-grid .jqx-grid-resize-line.row { height: var(--jqx-grid-resize-line-size); } .jqx-grid .jqx-grid-resize-tooltip { position: absolute; bottom: 0px; z-index: 99; background: var(--jqx-primary); color: var(--jqx-primary-color); padding: 5px; transition: width 0.2s ease-out; } .jqx-grid .jqx-grid-drag-line { position: absolute; z-index: 199; opacity: 1; width: calc(2 * var(--jqx-grid-resize-line-size)); background: var(--jqx-primary); font-family: var(--jqx-font-family-icon); transition: opacity cubic-bezier(0.6, 0.2, 0, 0.8) 0.25s; } .jqx-grid .jqx-grid-drag-line:after { content: var(--jqx-icon-arrow-up); color: var(--jqx-primary); font-size: 16px; position: absolute; left: 0px; bottom: 0px; margin-left: -7px; font-weight: bold; margin-bottom: -11px; } .jqx-grid .jqx-grid-drag-line:before { content: var(--jqx-icon-arrow-down); color: var(--jqx-primary); font-size: 16px; position: absolute; left: 0px; top: 0px; margin-left: -7px; font-weight: bold; margin-top: -7px; } .jqx-grid .jqx-grid-drag-line.row { height: calc(2 * var(--jqx-grid-resize-line-size)); } .jqx-grid .jqx-grid-drag-line.row:after { content: var(--jqx-icon-arrow-left); right: 0px; left: initial; bottom: 0px; margin-right: -7px; font-weight: bold; margin-bottom: -7px; } .jqx-grid .jqx-grid-drag-line.row:before { content: var(--jqx-icon-arrow-right); left: 0px; } .jqx-grid[appearance_allow-header-hover] jqx-grid-column:not(.top-far-corner):not(.top-near-corner)[header]:hover jqx-grid-cell[header], .jqx-grid[appearance_allow-header-hover] jqx-grid-row:hover jqx-grid-cell[header] { background: var(--jqx-ui-state-hover); color: var(--jqx-ui-state-color-hover); cursor: default; } .jqx-grid[appearance_show-column-header-drag-icon][behavior_allow-column-reorder] jqx-grid-column:not([auto-generated]) .jqx-drag-handle { transition: opacity ease-in-out 0.2s; overflow: hidden; opacity: 0; width: 5px; height: 100%; position: absolute; left: 1px; z-index: 9; font-family: var(--jqx-font-family-icon); cursor: move; } .jqx-grid[appearance_show-column-header-drag-icon][behavior_allow-column-reorder] jqx-grid-column:not([auto-generated]) .jqx-drag-handle:before { position: relative; font-family: var(--jqx-font-family-icon); content: var(--jqx-icon-ellipsis); transform: rotate(90deg); display: flex; justify-content: center; } .jqx-grid[appearance_show-column-header-drag-icon][behavior_allow-column-reorder] jqx-grid-column:not([auto-generated]) .jqx-drag-handle:hover { opacity: 1; } .jqx-grid[appearance_show-row-header-drag-icon] jqx-grid-row jqx-grid-cell[header]:not([detail]) > .jqx-label { height: 100%; font-family: var(--jqx-font-family-icon); font-style: normal; font-weight: normal; 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: 0px; } .jqx-grid[appearance_show-row-header-drag-icon] jqx-grid-row jqx-grid-cell[header]:not([detail]) > .jqx-label:before { background: var(--jqx-ui-state-hover); color: var(--jqx-ui-state-color-hover); position: absolute; left: 0px; width: 100%; content: var(--jqx-icon-ellipsis); cursor: move; transform: rotate(90deg); display: flex; align-items: flex-end; justify-content: center; opacity: 0.25; } .jqx-grid[appearance_show-row-comments] jqx-grid-row jqx-grid-cell[header]:not([detail]), .jqx-grid[appearance_show-row-status] jqx-grid-row jqx-grid-cell[header]:not([detail]) { z-index: 9; } .jqx-grid[appearance_show-row-comments] jqx-grid-row[focus][selected=indeterminate] jqx-grid-cell[header]:not([detail]):not([group]):not(.jqx-add-new-row), .jqx-grid[appearance_show-row-comments] jqx-grid-row:hover jqx-grid-cell[header]:not([detail]):not([group]):not(.jqx-add-new-row), .jqx-grid[appearance_show-row-status] jqx-grid-row[focus][selected=indeterminate] jqx-grid-cell[header]:not([detail]):not([group]):not(.jqx-add-new-row), .jqx-grid[appearance_show-row-status] jqx-grid-row:hover jqx-grid-cell[header]:not([detail]):not([group]):not(.jqx-add-new-row) { width: 25px !important; } .jqx-grid[appearance_show-row-comments] jqx-grid-row[focus][selected=indeterminate] jqx-grid-cell[detail][has-toggle-button][selected], .jqx-grid[appearance_show-row-comments] jqx-grid-row:hover jqx-grid-cell[detail][has-toggle-button][selected], .jqx-grid[appearance_show-row-status] jqx-grid-row[focus][selected=indeterminate] jqx-grid-cell[detail][has-toggle-button][selected], .jqx-grid[appearance_show-row-status] jqx-grid-row:hover jqx-grid-cell[detail][has-toggle-button][selected] { background: var(--jqx-ui-state-hover) !important; } .jqx-grid[appearance_show-row-comments] jqx-grid-row[focus][selected=indeterminate] jqx-grid-cell[detail][has-toggle-button] button.row-detail, .jqx-grid[appearance_show-row-comments] jqx-grid-row:hover jqx-grid-cell[detail][has-toggle-button] button.row-detail, .jqx-grid[appearance_show-row-status] jqx-grid-row[focus][selected=indeterminate] jqx-grid-cell[detail][has-toggle-button] button.row-detail, .jqx-grid[appearance_show-row-status] jqx-grid-row:hover jqx-grid-cell[detail][has-toggle-button] button.row-detail { visibility: inherit !important; } .jqx-grid[appearance_show-row-comments] jqx-grid-row[focus][selected=indeterminate] jqx-grid-cell[detail][has-toggle-button] button.row-detail:after, .jqx-grid[appearance_show-row-comments] jqx-grid-row:hover jqx-grid-cell[detail][has-toggle-button] button.row-detail:after, .jqx-grid[appearance_show-row-status] jqx-grid-row[focus][selected=indeterminate] jqx-grid-cell[detail][has-toggle-button] button.row-detail:after, .jqx-grid[appearance_show-row-status] jqx-grid-row:hover jqx-grid-cell[detail][has-toggle-button] button.row-detail:after { content: var(--jqx-icon-resize-full); font-size: 13px; color: var(--jqx-primary); } .jqx-grid[appearance_show-row-header-focus-icon] jqx-grid-row[focus]:not([edit]) jqx-grid-cell[header]:not([detail]):not(:hover) > .jqx-label:before { content: var(--jqx-icon-arrow-right); } .jqx-grid[appearance_show-row-header-focus-icon] jqx-grid-row[focus]:not([edit]) jqx-grid-cell[header]:not([detail]) > .jqx-label, .jqx-grid[appearance_show-row-header-focus-icon] jqx-grid-row[focus]:not([edit]) jqx-grid-cell[header]:not([detail]):last-child > .jqx-label { height: 100%; font-family: var(--jqx-font-family-icon); font-style: normal; font-weight: normal; 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: 0px; } .jqx-grid[appearance_show-row-header-focus-icon] jqx-grid-row[focus]:not([edit]) jqx-grid-cell[header]:not([detail]) > .jqx-label:before { content: var(--jqx-icon-check-empty); background: var(--jqx-ui-state-hover); color: var(--jqx-ui-state-color-hover); position: absolute; left: 0px; width: 100%; } jqx-grid > .jqx-container, .jqx-grid.jqx-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: 0px; } jqx-grid-row { display: block; overflow: visible; position: relative; padding: 0px; height: var(--jqx-grid-row-height); cursor: default; } jqx-grid-row:hover jqx-grid-cell[checkbox][header][auto-show] .jqx-input { opacity: 1; border-color: var(--jqx-border); } jqx-grid-row[aria-rowindex="1"] .jqx-grid-row-card-container .jqx-card-layout-view { padding-top: 10px; } jqx-grid-row .jqx-grid-row-card-container { width: 100%; height: 100%; } jqx-grid-row .jqx-grid-row-card-container .jqx-card-layout-view { min-width: unset; min-height: unset; width: calc(100% - 20px); height: 100%; padding: 10px; padding-top: 0px; background: var(--jqx-surface); } jqx-grid-row .jqx-grid-row-card-container .jqx-card-layout-view .jqx-card-container { display: flex; justify-content: space-evenly; order: none; width: 100%; height: 100%; grid-column-gap: var(--jqx-card-view-column-gap, var(--jqx-card-view-gap)); grid-row-gap: var(--jqx-card-view-row-gap, var(--jqx-card-view-gap)); } jqx-grid-row .jqx-grid-row-card-container .jqx-card-layout-view .jqx-card-container .jqx-card { width: 100% !important; display: flex; margin: 0; border: var(--jqx-border-width) solid var(--jqx-border); width: unset; padding: var(--jqx-data-view-padding); overflow: auto; font-family: inherit; font-size: inherit; background-color: var(--jqx-background); color: var(--jqx-background-color); border-top-left-radius: var(--jqx-border-top-left-radius); border-top-right-radius: var(--jqx-border-top-right-radius); border-bottom-left-radius: var(--jqx-border-bottom-left-radius); border-bottom-right-radius: var(--jqx-border-bottom-right-radius); box-shadow: var(--jqx-elevation-2); transition: box-shadow ease-in-out 0.2s; position: relative; } jqx-grid-row .jqx-grid-row-card-container .jqx-card-layout-view .jqx-card-container .jqx-card.jqx-card-tree-header { cursor: pointer; } jqx-grid-row .jqx-grid-row-card-container .jqx-card-layout-view .jqx-card-container .jqx-card.jqx-card-header { cursor: pointer; } jqx-grid-row .jqx-grid-row-card-container .jqx-card-layout-view .jqx-card-container .jqx-card.jqx-card-header .jqx-card-view-cell { justify-content: center; } jqx-grid-row .jqx-grid-row-card-container .jqx-card-layout-view .jqx-card-container .jqx-card.jqx-card-header .jqx-card-view-value:after { font-family: var(--jqx-font-family-icon); content: var(--jqx-icon-arrow-right); } jqx-grid-row .jqx-grid-row-card-container .jqx-card-layout-view .jqx-card-container .jqx-card[editable]:not(.jqx-card-header) { cursor: pointer; } jqx-grid-row .jqx-grid-row-card-container .jqx-card-layout-view .jqx-card-container .jqx-card[editable]:not(.jqx-card-header)[edit] { border: 1px solid var(--jqx-primary); } jqx-grid-row .jqx-grid-row-card-container .jqx-card-layout-view .jqx-card-container .jqx-card[editable]:not(.jqx-card-header)[edit]:after, jqx-grid-row .jqx-grid-row-card-container .jqx-card-layout-view .jqx-card-container .jqx-card[editable]:not(.jqx-card-header):hover:after { content: var(--jqx-icon-mode-edit); font-family: var(--jqx-font-family-icon); width: 16px; height: 16px; right: 3px; bottom: 6px; position: absolute; } jqx-grid-row .jqx-grid-row-card-container .jqx-card-layout-view .jqx-card-container .jqx-card .jqx-card-data-container { width: 100%; } jqx-grid-row .jqx-grid-row-card-container .jqx-card-layout-view .jqx-card-container .jqx-card .jqx-card-data-container.col-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } jqx-grid-row .jqx-grid-row-card-container .jqx-card-layout-view .jqx-card-container .jqx-card .jqx-card-data-container.col-2 .jqx-card-view-cell { justify-content: flex-start; column-gap: 5px; flex-direction: column; align-items: flex-start; } jqx-grid-row .jqx-grid-row-card-container .jqx-card-layout-view .jqx-card-container .jqx-card .jqx-card-data-container.col-2 .jqx-card-view-cell .jqx-card-view-value { width: 100%; } jqx-grid-row .jqx-grid-row-card-container .jqx-card-layout-view .jqx-card-container .jqx-card .jqx-card-data-container.col-2 .jqx-card-view-cell.center { align-items: center; } jqx-grid-row .jqx-grid-row-card-container .jqx-card-layout-view .jqx-card-container .jqx-card .jqx-card-data-container.col-2 .jqx-card-view-cell.right { align-items: flex-end; } jqx-grid-row .jqx-grid-row-card-container .jqx-card-layout-view .jqx-card-container .jqx-card:hover { box-shadow: var(--jqx-elevation-4); } jqx-grid-row .jqx-grid-row-card-container .jqx-card-layout-view .jqx-card-container .jqx-card .jqx-card-view-cell { display: grid; grid-template-columns: auto auto; align-items: center; justify-content: space-between; min-height: 30px; margin-bottom: 0px; padding-left: 10px; overflow: hidden; } jqx-grid-row .jqx-grid-row-card-container .jqx-card-layout-view .jqx-card-container .jqx-card .jqx-card-view-cell.span { grid-column: 1/span 2; } jqx-grid-row .jqx-grid-row-card-container .jqx-card-layout-view .jqx-card-container .jqx-card .jqx-card-view-cell .jqx-arrow-down { visibility: hidden; } jqx-grid-row .jqx-grid-row-card-container .jqx-card-layout-view .jqx-card-container .jqx-card .jqx-card-view-cell.row-span .jqx-card-view-value jqx-grid-cell { height: 100%; white-space: normal; } jqx-grid-row .jqx-grid-row-card-container .jqx-card-layout-view .jqx-card-container .jqx-card .jqx-card-view-cell.row-span .jqx-card-view-value jqx-grid-cell .jqx-label { white-space: normal; } jqx-grid-row .jqx-grid-row-card-container .jqx-card-layout-view .jqx-card-container .jqx-card .jqx-card-view-cell.jqx-card-view-title { font-size: 1rem; font-weight: bold; display: flex !important; align-items: center !important; } jqx-grid-row .jqx-grid-row-card-container .jqx-card-layout-view .jqx-card-container .jqx-card .jqx-card-view-cell.vertical { display: grid; grid-template-columns: unset; grid-template-rows: 16px 1fr; align-items: flex-start; grid-row-gap: 0.25rem; justify-content: stretch; } jqx-grid-row .jqx-grid-row-card-container .jqx-card-layout-view .jqx-card-container .jqx-card .jqx-card-view-cell.vertical .jqx-card-view-label, jqx-grid-row .jqx-grid-row-card-container .jqx-card-layout-view .jqx-card-container .jqx-card .jqx-card-view-cell.vertical .jqx-card-view-value { width: 100%; height: 100%; } jqx-grid-row .jqx-grid-row-card-container .jqx-card-layout-view .jqx-card-container .jqx-card .jqx-card-view-cell .jqx-card-view-label { font-size: 12px; opacity: 0.7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 50%; position: relative; } jqx-grid-row .jqx-grid-row-card-container .jqx-card-layout-view .jqx-card-container .jqx-card .jqx-card-view-cell .jqx-card-view-label.icon:after { content: ""; position: absolute; left: -5px; top: 0; width: 30px; height: 100%; background-repeat: no-repeat; background-position: center; } jqx-grid-row .jqx-grid-row-card-container .jqx-card-layout-view .jqx-card-container .jqx-card .jqx-card-view-cell .jqx-card-view-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } jqx-grid-row .jqx-grid-row-card-container .jqx-card-layout-view .jqx-card-container .jqx-card .jqx-card-view-cell .jqx-card-view-value jqx-grid-cell { width: 100%; height: auto; position: static; display: block; } jqx-grid-row .jqx-grid-row-card-container .jqx-card-layout-view .jqx-card-container .jqx-card .jqx-card-view-cell .jqx-card-view-value jqx-grid-cell .attachments { display: block; } jqx-grid-row .jqx-grid-row-card-container .jqx-card-layout-view .jqx-card-container .jqx-card .jqx-card-view-cell .jqx-card-view-value jqx-grid-cell[template=image] .file-container { justify-content: center; } jqx-grid-row .jqx-grid-row-card-container .jqx-card-layout-view .jqx-card-container .jqx-card .jqx-card-view-cell .jqx-card-view-value jqx-grid-cell[template=image] img { max-width: 100%; max-height: 100%; width: 100%; height: 100%; display: block; } jqx-grid-row .jqx-grid-row-card-container .jqx-card-layout-view .jqx-card-container .jqx-card .jqx-card-view-cell .jqx-card-view-value jqx-grid-cell[template=image] .images { display: flex; flex-direction: column; position: relative; top: 3px; } jqx-grid-row .jqx-grid-row-card-container .jqx-card-layout-view .jqx-card-container .jqx-card .jqx-card-view-cell .jqx-card-view-value jqx-grid-cell[template=image] .jqx-navigation { width: 100%; display: flex; width: 100%; height: 26px; align-items: center; justify-content: center; grid-column-gap: 3px; margin-top: -3px; } jqx-grid-row .jqx-grid-row-card-container .jqx-card-layout-view .jqx-card-container .jqx-card .jqx-card-view-cell .jqx-card-view-value jqx-grid-cell[template=image] .jqx-navigation .jqx-navigation-item { width: 12px; height: 12px; border: 2px solid var(--jqx-border); } jqx-grid-row .jqx-grid-row-card-container .jqx-card-layout-view .jqx-card-container .jqx-card .jqx-card-view-cell .jqx-card-view-value jqx-grid-cell[template=image] .jqx-navigation .jqx-navigation-item.active, jqx-grid-row .jqx-grid-row-card-container .jqx-card-layout-view .jqx-card-container .jqx-card .jqx-card-view-cell .jqx-card-view-value jqx-grid-cell[template=image] .jqx-navigation .jqx-navigation-item:hover { width: 14px; height: 14px; border-color: var(--jqx-primary); } jqx-grid-row .jqx-grid-row-card-container .jqx-card-layout-view .jqx-card-container .jqx-card .jqx-card-view-cell .jqx-card-view-value jqx-grid-cell .textwrap { display: block; } jqx-grid-row .jqx-grid-row-card-container .jqx-card-layout-view .jqx-card-container .jqx-card .jqx-card-view-cell .jqx-card-view-value jqx-grid-cell::before, jqx-grid-row .jqx-grid-row-card-container .jqx-card-layout-view .jqx-card-container .jqx-card .jqx-card-view-cell .jqx-card-view-value jqx-grid-cell::after { content: ""; border: none; width: 0px; height: 0px; } jqx-grid-row .jqx-grid-row-card-container .jqx-card-layout-view .jqx-card-container .jqx-card .jqx-card-view-cell .jqx-card-view-value jqx-grid-cell .jqx-label { white-space: nowrap; text-align: unset; padding-left: 0px; padding-right: 0px; } jqx-grid-row jqx-grid-cell[header].jqx-decorate > .jqx-label { padding-right: 5px; } jqx-grid-row jqx-grid-cell[header].jqx-decorate.row-number:not(.jqx-add-new-row)::before { border-radius: 5px; width: 5px; position: absolute; height: 70%; right: 4px; content: ""; top: 15%; background: var(--jqx-decorate-color); } jqx-grid-row jqx-grid-cell[header][freeze] { background: var(--jqx-surface); color: var(--jqx-surface-color); } jqx-grid-row jqx-grid-cell[header] .jqx-grid-cell-editor.jqx-grid-input-cell-editor { background: var(--jqx-background); color: var(--jqx-background-color); position: absolute; z-index: 10; left: 1px; top: 0px; padding-top: 0px; padding-bottom: 0px; height: calc(100% - 1px); box-sizing: border-box; } jqx-grid-row .jqx-grid-row-sub-container { overflow: visible; width: 100%; z-index: 3; position: relative; transform-origin: top; } jqx-grid-row .jqx-grid-row-sub-container.jqx-animate { transition: transform 0.25s ease-in-out, height 0.25s ease-in-out; } jqx-grid-row .jqx-grid-command-bar { z-index: 7; height: calc(100% - 1px); position: absolute; right: 0px; top: 0px; box-sizing: border-box; overflow: hidden; transform: scaleX(0); transform-origin: right; transition: transform 0.25s ease; background: var(--jqx-surface); color: var(--jqx-surface-color); border-left: 1px solid var(--jqx-border); } jqx-grid-row .jqx-grid-command-bar.show { transform: scaleX(1); } jqx-grid-row[edit] jqx-grid-cell:not(rowspan):not(colspan)[editor] { z-index: 7; } jqx-grid-row[edit][error] { z-index: 101; } jqx-grid-row[edit][error] jqx-grid-cell[editor] { border-color: var(--jqx-error); } jqx-grid-row.jqx-animate { transition: margin-bottom 0.25s ease-in-out, height 0.25s ease-in-out; } jqx-grid-row:not([selected]) jqx-grid-cell[selected]:not([selected=indeterminate]):not([header]):not(.jqx-grid-column-border):after { background: var(--jqx-ui-state-color-selected); opacity: var(--jqx-grid-cell-horizontal-border-opacity-selected, 0.3); } jqx-grid-row[selected] jqx-grid-cell[selected]:not([selected=indeterminate]):not([header]):not(.jqx-grid-column-border):not(.jqx-grid-column-border-collapse):before { background: var(--jqx-ui-state-color-selected); opacity: var(--jqx-grid-cell-vertical-border-opacity-selected, 0.3); } jqx-grid-row[selected] jqx-grid-cell[selected]:not([selected=indeterminate]):not([header]):not(.jqx-grid-column-border):after { background: var(--jqx-ui-state-color-selected); opacity: var(--jqx-grid-cell-horizontal-border-opacity-selected, 0.3); } jqx-grid-row[selected] jqx-grid-cell[header] { background: var(--jqx-ui-state-hover); color: var(--jqx-ui-state-color-hover); } jqx-grid-row[selected] jqx-grid-cell[checkbox][header][auto-show] .jqx-input { opacity: 1; border-color: var(--jqx-border); } jqx-grid-row[selected]:not([selected=indeterminate]):not([selected] + jqx-grid-row[selected]:not([selected=indeterminate]):not([selected=none])) jqx-grid-cell[selected]:not([editor]):not([header]):not(.jqx-add-new-column) { background: var(--jqx-ui-state-selected); color: var(--jqx-ui-state-color-selected); } jqx-grid-row[selected]:not([selected=indeterminate]):not([selected] + jqx-grid-row[selected]:not([selected=indeterminate]):not([selected=none])) jqx-grid-cell[selected]:not([editor]):not([header]):not(.jqx-add-new-column) .jqx-label:not([data-field=_addNewColumn]):not([data-field=_rowDetailColumn]) { border-top: 1px solid var(--jqx-ui-state-selected); } jqx-grid-row[selected]:not([selected=indeterminate]):not([selected=none]) { /* &:before { height: var(--jqx-border-width); width: 100%; background: var(--jqx-ui-state-color-selected); content: ''; position: absolute; top: -1px; opacity: var(--jqx-grid-cell-horizontal-border-opacity-selected, 0.3); } &:after { height: var(--jqx-border-width); width: 100%; background: var(--jqx-ui-state-color-selected); content: ''; position: absolute; bottom: 0px; opacity: var(--jqx-grid-cell-horizontal-border-opacity-selected, 0.3); } */ } jqx-grid-row[selected]:not([selected=indeterminate]) jqx-grid-cell[selected]:not([selected=indeterminate]):not([header]):not(.jqx-grid-column-border):before { background: var(--jqx-ui-state-color-selected); opacity: var(--jqx-grid-cell-vertical-border-opacity-selected, 0.3); } jqx-grid-row[selected=none] jqx-grid-cell { color: var(--jqx-disabled); } jqx-grid-row[selected=indeterminate] jqx-grid-cell[selected]:not([editor]) { background: var(--jqx-ui-state-selected); color: var(--jqx-ui-state-color-selected); } jqx-grid-row[selected=indeterminate] jqx-grid-cell[selected]:not([editor])[freeze] { background: var(--jqx-grid-cell-background-freeze); } jqx-grid-row[selected=indeterminate] jqx-grid-cell[selected][focus]:not([editor]):not([rowspan]):not([colspan]) { background: rgba(var(--jqx-primary-rgb), 0.05); color: var(--jqx-ui-state-color-selected); opacity: 1; } jqx-grid-row[alternation-index="0"] jqx-grid-cell[editor]:not([selected]):not([header]):not([highlight]):not([freeze]) > .jqx-label, jqx-grid-row[alternation-index="1"] jqx-grid-cell[editor]:not([selected]):not([header]):not([highlight]):not([freeze]) > .jqx-label, jqx-grid-row[alternation-index="3"] jqx-grid-cell[editor]:not([selected]):not([header]):not([highlight]):not([freeze]) > .jqx-label, jqx-grid-row[alternation-index="4"] jqx-grid-cell[editor]:not([selected]):not([header]):not([highlight]):not([freeze]) > .jqx-label { padding: 0; margin: 0; border: 1px solid var(--jqx-primary); background: var(--jqx-background); box-sizing: border-box; outline: none; width: calc(100% - 1px); height: calc(100% - 1px); position: relative; left: 1px; user-select: none; } jqx-grid-row[alternation-index="0"] jqx-grid-cell:not([selected]):not([header]):not([update]):not([delete]):not([add]):not([freeze]):not([focus]):not([sort]):not([filter]) .jqx-label { background-color: var(--jqx-background); color: var(--jqx-background-color); border-color: var(--jqx-border); } jqx-grid-row[alternation-index="1"] jqx-grid-cell:not([selected]):not([header]):not([update]):not([delete]):not([add]):not([freeze]):not([focus]):not([sort]):not([filter]) .jqx-label { background-color: var(--jqx-alternation-index0-background); color: var(--jqx-alternation-index0-color); border-color: var(--jqx-alternation-index0-border); } jqx-grid-row[alternation-index="2"] jqx-grid-cell:not([selected]):not([header]):not([update]):not([delete]):not([add]):not([freeze]):not([focus]):not([sort]):not([filter]) .jqx-label { background-color: var(--jqx-alternation-index1-background); color: var(--jqx-alternation-index1-color); border-color: var(--jqx-alternation-index1-border); } jqx-grid-row[alternation-index="3"] jqx-grid-cell:not([selected]):not([header]):not([update]):not([delete]):not([add]):not([freeze]):not([focus]):not([sort]):not([filter]) .jqx-label { background-color: var(--jqx-alternation-index2-background); color: var(--jqx-alternation-index2-color); border-color: var(--jqx-alternation-index2-border); } jqx-grid-row[alternation-index="4"] jqx-grid-cell:not([selected]):not([header]):not([update]):not([delete]):not([add]):not([freeze]):not([focus]):not([sort]):not([filter]) .jqx-label { background-color: var(--jqx-alternation-index3-background); color: var(--jqx-alternation-index3-color); border-color: var(--jqx-alternation-index3-border); } jqx-grid-column { color: var(--jqx-surface-color); background: var(--jqx-surface); white-space: nowrap; border-width: 0px; border-style: solid; overflow: hidden; height: 100%; position: absolute; text-overflow: ellipsis; font-size: var(--jqx-grid-column-font-size, inherit); font-weight: var(--jqx-grid-column-font-weight, inherit); display: flex; cursor: default; min-height: 30px; } jqx-grid-column[selected], jqx-grid-column[aria-controls], jqx-grid-column[focus] { background: var(--jqx-ui-state-hover); color: var(--jqx-ui-state-color-hover); } jqx-grid-column[highlight], jqx-grid-column[highlight][freeze] { background: var(--jqx-primary); color: var(--jqx-primary-color); } jqx-grid-column:hover .jqx-action-button { border-color: var(--jqx-ui-state-border-hover); background: var(--jqx-ui-state-hover); color: var(--jqx-ui-state-color-hover); cursor: pointer; } jqx-grid-column:hover .jqx-action-button div:before, jqx-grid-column:hover .jqx-action-button div:after { background: var(--jqx-ui-state-color-hover); } jqx-grid-column .jqx-icon { display: none; } jqx-grid-column .jqx-icon.show { display: flex !important; width: var(--jqx-grid-column-buttons-width); height: 100%; left: 4px; position: relative; } jqx-grid-column .jqx-icon.show.jqx-add-new-column { left: 0px; width: 100%; justify-content: center; } jqx-grid-column .jqx-icon .jqx-grid-icon { display: flex; } jqx-grid-column .jqx-label:not(.jqx-input) { position: relative; left: 0px; } jqx-grid-column .jqx-label:not(.jqx-input).jqx-animate { transition: width 0.25s ease; } jqx-grid-column .jqx-label:not(.jqx-input).one { width: calc(100% - var(--jqx-grid-column-buttons-width)); min-width: 30px; } jqx-grid-column .jqx-label:not(.jqx-input).two { width: calc(100% - 2 * var(--jqx-grid-column-buttons-width)); min-width: 30px; } jqx-grid-column .jqx-label:not(.jqx-input).three { width: calc(100% - 3 * var(--jqx-grid-column-buttons-width)); min-width: 30px; } jqx-grid-column .jqx-label:not(.jqx-input).four { width: calc(100% - 4 * var(--jqx-grid-column-buttons-width)); min-width: 30px; } jqx-grid-column .jqx-label:not(.jqx-input).five { width: calc(100% - 5 * var(--jqx-grid-column-buttons-width)); min-width: 30px; } jqx-grid-column .jqx-label:not(.jqx-input).six { width: calc(100% - 6 * var(--jqx-grid-column-buttons-width)); min-width: 30px; } jqx-grid-column .jqx-buttons-group { height: 100%; right: 0px; top: 0px; display: flex; position: absolute; transform: translateX(var(--jqx-grid-column-buttons-width)); } jqx-grid-column .jqx-buttons-group.jqx-animate { transition: transform 0.25s ease; } jqx-grid-column .jqx-buttons-group.action { transform: translateX(0px); } jqx-grid-column .jqx-description-button { margin-right: 3px; } jqx-grid-column .jqx-action-button { display: flex; border-left: 1px solid var(--jqx-border); background: var(--jqx-surface); color: var(--jqx-surface-color); } jqx-grid-column .jqx-action-button div { width: 14px; position: relative; display: flex !important; background: transparent; color: inherit; font-size: 0; transition: all 0.25s ease-in-out; height: 12px; align-items: center; justify-content: center; font-family: var(--jqx-font-family-icon); } jqx-grid-column .jqx-action-button div:after { content: var(--jqx-icon-menu); color: var(--jqx-surface-color); background: transparent !important; font-size: var(--jqx-font-size); } jqx-grid-column .jqx-action-button.jqx-animate { transition: width 0.25s ease; } jqx-grid-column .jqx-action-button.active:before { -webkit-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg); } jqx-grid-column .jqx-action-button.active:after { -webkit-transform: translate(-50%, -50%) rotate(-45deg); transform: translate(-50%, -50%) rotate(-45deg); } jqx-grid-column .jqx-grid-cell-editor.jqx-grid-input-cell-editor { background: var(--jqx-background); color: var(--jqx-background-color); position: absolute; z-index: 10; left: 1px; top: 0px; padding-top: 0px; padding-bottom: 0px; height: calc(100% - 1px); box-sizing: border-box; } jqx-grid-column[freeze] { background: var(--jqx-surface); color: var(--jqx-surface-color); } jqx-grid-column[aria-controls] .jqx-action-button { border-color: var(--jqx-ui-state-border-focus); background: var(--jqx-ui-state-focus); color: var(--jqx-ui-state-color-focus); } jqx-grid-column[aria-controls] .jqx-action-button div:before, jqx-grid-column[aria-controls] .jqx-action-button div:after { background: var(--jqx-ui-state-color-focus); } jqx-grid-column.jqx-grid-column-border { border-width: var(--jqx-border-width); } jqx-grid-column.top-far-corner { width: var(--jqx-scroll-bar-size); position: absolute; right: 0px; top: 0px; z-index: 1; } jqx-grid-column:not(.jqx-grid-column-border):after { background: var(--jqx-grid-column-horizontal-border, var(--jqx-border)); } jqx-grid-column:not(.jqx-grid-column-border):not(.jqx-grid-column-border-collapse):before { background: var(--jqx-border); } jqx-grid-column:not(.jqx-grid-column-border-collapse):before { background: var(--jqx-grid-column-vertical-border, var(--jqx-border)); } jqx-grid-row[error] jqx-grid-cell.jqx-add-new-column.jqx-add-new-column .jqx-label { background: #E2E2E2 !important; } jqx-grid-cell { display: block; color: var(--jqx-background-color); background: var(--jqx-background); white-space: nowrap; border-width: 0px; border-style: solid; overflow: hidden; height: 100%; position: absolute; text-overflow: ellipsis; font-size: var(--jqx-grid-cell-font-size, inherit); font-weight: var(--jqx-grid-cell-font-weight, inherit); } jqx-grid-cell div[load] { width: 16px; height: 16px; border: 2px solid var(--jqx-border); border-bottom-color: var(--jqx-primary) !important; border-radius: 50%; display: inline-block; box-sizing: border-box; animation: rotation 1s linear infinite; margin-left: 5px; position: absolute; top: 50%; margin-top: -8px; } @keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } jqx-grid-cell[role=rowheader] .jqx-label { padding-left: 0px; padding-right: 0px; } jqx-grid-cell.row-comments .jqx-label::after { content: var(--jqx-icon-comment); font-family: var(--jqx-font-family-icon); position: absolute; right: 5px; } jqx-grid-cell jqx-color-input .jqx-color-box { border-radius: 50% !important; } jqx-grid-cell button[toggle-button]:after { justify-content: flex-start; } jqx-grid-cell line[highlight] { stroke: var(--jqx-secondary); } jqx-grid-cell path[highlight], jqx-grid-cell rect[highlight] { fill: var(--jqx-secondary); } jqx-grid-cell[focus] line { stroke: var(--jqx-primary-color); } jqx-grid-cell[focus] path, jqx-grid-cell[focus] rect { fill: var(--jqx-primary-color); } jqx-grid-cell .wrap { white-space: normal; display: flex; flex-direction: column; justify-content: center; line-height: 1.5; } jqx-grid-cell .textwrap { display: -webkit-box; -webkit-box-orient: vertical; text-overflow: ellipsis; white-space: normal; word-break: break-word; line-height: 1.5; } jqx-grid-cell .textwrap p, jqx-grid-cell .textwrap h1, jqx-grid-cell .textwrap h2, jqx-grid-cell .textwrap h3, jqx-grid-cell .textwrap h4, jqx-grid-cell .textwrap h5, jqx-grid-cell .textwrap h6 { margin-top: 3px; margin-bottom: 3px; } jqx-grid-cell .textwrap p:first-child, jqx-grid-cell .textwrap h1:first-child, jqx-grid-cell .textwrap h2:first-child, jqx-grid-cell .textwrap h3:first-child, jqx-grid-cell .textwrap h4:first-child, jqx-grid-cell .textwrap h5:first-child, jqx-grid-cell .textwrap h6:first-child { margin-top: 0px; } jqx-grid-cell { scrollbar-width: auto; scrollbar-color: #8b8b8b #ffffff; } jqx-grid-cell ul, jqx-grid-cell ol { padding-left: 16px; margin: 0px; } jqx-grid-cell ul[checklist] { padding-left: 0px; } jqx-grid-cell ul[checklist] li { list-style: none; padding-left: 0px; } jqx-grid-cell ul[checklist] li::before { border-radius: 3px; width: 12px; height: 12px; display: inline-block; content: ""; margin-right: 5px; top: 3px; position: relative; border: 2px solid rgba(0, 0, 0, 0.25); } jqx-grid-cell ul[checklist] li[checked]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' style='shape-rendering: geometricprecision;'%3E%3Cpath fill-rule='evenodd' fill='white' d='M5.944 12.305a1.031 1.031 0 0 0 1.433-.009l5.272-5.181A1.483 1.483 0 0 0 12.661 5a1.468 1.468 0 0 0-2.109.025L7.008 8.701a.465.465 0 0 1-.685-.01l-.587-.641A1.42 1.42 0 0 0 3.661 8a1.473 1.473 0 0 0 .017 2.106l2.266 2.199z'%3E%3C/path%3E%3C/svg%3E"); background-color: var(--jqx-primary); border: 2px solid transparent; background-repeat: no-repeat; background-position: center; } jqx-grid-cell .nowrap { white-space: nowrap; display: flex; flex-direction: column; justify-content: center; line-height: 1.5; } jqx-grid-cell.jqx-add-new-row { background-color: var(--jqx-surface); font-style: italic; --jqx-ui-state-hover: var(--jqx-surface); --jqx-ui-state-color-hover: var(--jqx-surface-color); cursor: pointer; } jqx-grid-cell.jqx-add-new-row > div { display: block !important; background-color: var(--jqx-surface); } jqx-grid-cell.jqx-add-new-row[selected] { background: var(--jqx-background) !important; color: var(--jqx-background-color) !important; } jqx-grid-cell.jqx-add-new-row[selected]::before, jqx-grid-cell.jqx-add-new-row[selected]::after { color: var(--jqx-background-color) !important; background: var(--jqx-border) !important; } jqx-grid-cell.jqx-add-new-row:not([header]) { z-index: 7; background: var(--jqx-surface) !important; } jqx-grid-cell.jqx-add-new-row:not([header]) .jqx-label { background: var(--jqx-surface) !important; } jqx-grid-cell.jqx-add-new-row:not([header]):before { opacity: 0; } jqx-grid-cell.jqx-add-new-row[has-toggle-button] .row-status, jqx-grid-cell.jqx-add-new-row[has-toggle-button] button { display: none !important; } jqx-grid-cell.jqx-add-new-row code { border: 1px solid var(--jqx-border); background-color: var(--jqx-background); padding: 1px 6px; border-radius: 6px; font-size: 12px; font-family: var(--jqx-font-family); } jqx-grid-cell .dropdownlist, jqx-grid-cell .list, jqx-grid-cell .tokens { padding-left: 6px; align-items: center; height: 100%; } jqx-grid-cell .dropdownlist .jqx-multi-combo-input, jqx-grid-cell .list .jqx-multi-combo-input, jqx-grid-cell .tokens .jqx-multi-combo-input { width: calc(100% - var(--jqx-editor-addon-width)); } jqx-grid-cell .dropdownlist .jqx-multi-combo-input .jqx-flex, jqx-grid-cell .list .jqx-multi-combo-input .jqx-flex, jqx-grid-cell .tokens .jqx-multi-combo-input .jqx-flex { align-items: center; row-gap: 5px; column-gap: 5px; } jqx-grid-cell .dropdownlist .jqx-flex-wrap, jqx-grid-cell .list .jqx-flex-wrap, jqx-grid-cell .tokens .jqx-flex-wrap { flex-wrap: wrap; padding-right: 5px; } jqx-grid-cell .dropdownlist .jqx-flex-auto, jqx-grid-cell .list .jqx-flex-auto, jqx-grid-cell .tokens .jqx-flex-auto { height: auto; display: flex; } jqx-grid-cell .dropdownlist .jqx-token, jqx-grid-cell .list .jqx-token, jqx-grid-cell .tokens .jqx-token { line-height: 1.5; display: inline-flex; } jqx-grid-cell .dropdownlist .jqx-tokens-layout, jqx-grid-cell .list .jqx-tokens-layout, jqx-grid-cell .tokens .jqx-tokens-layout { width: 100%; } jqx-grid-cell .dropdownlist .jqx-arrow-down, jqx-grid-cell .list .jqx-arrow-down, jqx-grid-cell .tokens .jqx-arrow-down { width: 0px; opacity: 0; cursor: pointer; } jqx-grid-cell .dropdownlist.dropdownlist .jqx-arrow-down, jqx-grid-cell .list.dropdownlist .jqx-arrow-down, jqx-grid-cell .tokens.dropdownlist .jqx-arrow-down { background: inherit; } jqx-grid-cell .dropdownlist.dropdownlist .jqx-arrow-down, jqx-grid-cell .dropdownlist:hover .jqx-arrow-down, jqx-grid-cell .list.dropdownlist .jqx-arrow-down, jqx-grid-cell .list:hover .jqx-arrow-down, jqx-grid-cell .tokens.dropdownlist .jqx-arrow-down, jqx-grid-cell .tokens:hover .jqx-arrow-down { width: var(--jqx-editor-addon-width); min-width: var(--jqx-editor-addon-width); opacity: 1; } jqx-grid-cell[focus] .list .jqx-arrow-down, jqx-grid-cell[focus] .tokens .jqx-arrow-down { width: var(--jqx-editor-addon-width); min-width: var(--jqx-editor-addon-width); opacity: 1; } jqx-grid-cell[focus] .attachments .jqx-icon-plus, jqx-grid-cell[focus] .images .jqx-icon-plus { opacity: 1; width: 26px; } jqx-grid-cell .attachments, jqx-grid-cell .images { display: grid; grid-template-columns: auto 1fr auto auto; height: 100%; } jqx-grid-cell .attachments .jqx-icon-plus, jqx-grid-cell .images .jqx-icon-plus { opacity: 0; width: 0px; } jqx-grid-cell .attachments:hover .jqx-icon-plus, jqx-grid-cell .images:hover .jqx-icon-plus { opacity: 1; width: 26px; } jqx-grid-cell .attachments .file-container, jqx-grid-cell .attachments .container, jqx-grid-cell .images .file-container, jqx-grid-cell .images .container { display: flex; height: calc(100% - 3px); align-items: center; overflow: hidden; padding-left: 5px; } jqx-grid-cell .attachments .jqx-drop-image, jqx-grid-cell .images .jqx-drop-image { margin-left: -5px; } jqx-grid-cell .attachments .jqx-drop-image::after, jqx-grid-cell .images .jqx-drop-image::after { font-family: var(--jqx-font-family-icon); content: var(--jqx-icon-download-alt); margin-left: 5px; } jqx-grid-cell .attachments .arrowbtn, jqx-grid-cell .images .arrowbtn { width: 15px; background: var(--jqx-surface); } jqx-grid-cell .attachments .arrowbtn:hover, jqx-grid-cell .images .arrowbtn:hover { cursor: pointer; background: var(--jqx-primary); color: var(--jqx-primary-color); } jqx-grid-cell .attachments .attachment, jqx-grid-cell .attachments img, jqx-grid-cell .images .attachment, jqx-grid-cell .images img { height: 23px; width: 23px; border: 1px solid var(--jqx-border); margin-right: 3px; border-radius: var(--jqx-border-radius); align-content: center; } jqx-grid-cell .attachments .attachment:hover, jqx-grid-cell .attachments img:hover, jqx-grid-cell .images .attachment:hover, jqx-grid-cell .images img:hover { cursor: pointer; border-color: var(--jqx-primary); } jqx-grid-cell .jqx-grid-cell-editor { width: 100%; height: 100%; margin: 0; border-radius: 0; border: none; font-size: inherit; font-weight: inherit; background: inherit; color: inherit; } jqx-grid-cell.jqx-grid-row-border { border-top-width: var(--jqx-border-width); } jqx-grid-cell.jqx-grid-column-border { border-bottom-width: var(--jqx-border-width); border-left-width: var(--jqx-border-width); border-right-width: var(--jqx-border-width); } jqx-grid-cell.jqx-add-new-column { background: var(--jqx-surface); border-left: 1px solid var(--jqx-border); } jqx-grid-cell.jqx-add-new-column.jqx-add-new-column .jqx-label { background: var(--jqx-surface) !important; } jqx-grid-cell.jqx-add-new-column:before, jqx-grid-cell.jqx-add-new-column:after { display: none; } jqx-grid-cell:not(.jqx-grid-column-border):after { background: var(--jqx-grid-cell-horizontal-border, var(--jqx-border)); } jqx-grid-cell:not(.jqx-grid-column-border):not(.jqx-grid-column-border-collapse):before { background: var(--jqx-grid-cell-vertical-border, var(--jqx-border)); } jqx-grid-cell[has-toggle-button] .jqx-label { padding: 0px; flex-direction: unset; } jqx-grid-cell[has-toggle-button] .row-status { font-size: 16px; font-family: var(--jqx-font-family-icon); width: 20px; min-width: 20px; } jqx-grid-cell[has-toggle-button] .row-status:before { color: var(--jqx-surface-color); content: var(--jqx-icon-star-empty); transition: opacity 0.2s ease-in-out; opacity: 0.3; } jqx-grid-cell[has-toggle-button] .row-status:hover::before { color: var(--jqx-primary); opacity: 1; } jqx-grid-cell[has-toggle-button] .row-status.starred::before { color: var(--jqx-primary); content: var(--jqx-icon-star); opacity: 1; } jqx-grid-cell[has-toggle-button] .row-status.custom:hover { color: inherit; } jqx-grid-cell[has-toggle-button] .row-status.custom:hover::before { color: inherit; } jqx-grid-cell[has-toggle-button] .row-status.custom.starred::before { color: inherit; } jqx-grid-cell[has-toggle-button] .row-status.comments::after { content: ""; width: 10px; height: 10px; background: var(--jqx-error); position: absolute; right: 0; transform: rotate(45deg); top: -5px; right: -5px; } jqx-grid-cell[has-toggle-button] button[toggle-button] { font-family: var(--jqx-font-family-icon); font-style: normal; font-weight: normal; color: inherit; text-decoration: inherit; font-variant: normal; text-transform: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; width: 20px; padding: 0px; min-width: 20px; cursor: pointer; background: transparent; border: none; outline: none; font-size: 16px; flex-direction: column; } jqx-grid-cell[has-toggle-button] button[toggle-button]:after { content: var(--jqx-icon-arrow-down); } jqx-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; } jqx-grid-cell[has-toggle-button] button[toggle-button].row-detail.row-comments > div { font-size: 11px; color: var(--jqx-primary); font-family: var(--jqx-font-family); display: flex; justify-content: center; font-weight: bold; color: var(--jqx-primary); } jqx-grid-cell[has-toggle-button] button[toggle-button].row-detail.row-comments:before { content: ""; width: 10px; height: 10px; background: var(--jqx-error); position: absolute; right: 0; transform: rotate(45deg); top: -5px; right: -5px; } jqx-grid-cell[has-toggle-button] button[toggle-button].row-detail:hover:after { color: var(--jqx-surface-color); padding: 3px; } jqx-grid-cell[has-toggle-button] button[toggle-button][toggled]:after { transform: rotate(180deg); } jqx-grid-cell[has-toggle-button] button[toggle-button].jqx-animate:after { transition: transform 0.25s ease-out; } jqx-grid-cell[has-toggle-button] .jqx-indent { width: 14px; left: 7px; height: 100%; position: relative; } jqx-grid-cell[has-toggle-button] .jqx-indent:after { height: 50%; content: "-"; color: var(--jqx-background-color); visibility: hidden; } jqx-grid-cell[has-toggle-button] .jqx-indent:first-child { visibility: hidden; border-left: 1px solid var(--jqx-border); } jqx-grid-cell[has-toggle-button] .jqx-label, jqx-grid-cell[has-toggle-button] div[indent] { display: flex; } jqx-grid-cell[command] .jqx-label { display: flex; flex-direction: row; cursor: pointer; justify-content: center; } jqx-grid-cell[command] .align-center { padding: 0px; } jqx-grid-cell[header] { background: var(--jqx-surface); color: var(--jqx-surface-color); border-color: var(--jqx-border); } jqx-grid-cell[header]:last-child { background: var(--jqx-surface); color: var(--jqx-surface-color); border-color: var(--jqx-border); } jqx-grid-cell[header]:not(.jqx-grid-column-border):after { background: var(--jqx-grid-cell-header-horizontal-border, var(--jqx-grid-cell-horizontal-border, var(--jqx-border))); } jqx-grid-cell[header]:not(.jqx-grid-column-border):not(.jqx-grid-column-border-collapse):before { background: var(--jqx-grid-cell-header-vertical-border, var(--jqx-grid-cell-vertical-border, var(--jqx-border))); } jqx-grid-cell[editor] > .jqx-label:not(.jqx-input) { padding: 0; margin: 0; border: 1px solid var(--jqx-primary); background: var(--jqx-background); box-sizing: border-box; outline: none; width: calc(100% - 1px); height: calc(100% - 1px); position: relative; margin-left: 1px; user-select: none; } jqx-grid-cell[editor][row-editor] { border: 0px solid var(--jqx-primary); border-top: 1px solid var(--jqx-primary); border-bottom: 1px solid var(--jqx-primary); border-left: 1px solid var(--jqx-primary); } jqx-grid-cell[editor][row-editor] .jqx-label:not(.jqx-input) { border: 0px solid var(--jqx-primary) !important; } jqx-grid-cell[editor][row-editor]:first-child { border-left: 1px solid var(--jqx-primary) !important; } jqx-grid-cell[editor][row-editor]:last-child { border-right: 1px solid var(--jqx-primary); } jqx-grid-cell[editor][row-editor] ~ jqx-grid-cell[editor][row-editor] { border-left: 0px solid var(--jqx-primary); } jqx-grid-cell[editor=dateTimePicker] { --jqx-border-radius: 0px; --jqx-border-top-left-radius: 0px; --jqx-border-top-right-radius: 0px; --jqx-border-bottom-left-radius: 0px; --jqx-border-bottom-right-radius: 0px; } jqx-grid-cell[editor=checkBox] .jqx-label { padding-bottom: 0px; justify-content: center; align-items: center; cursor: pointer; } jqx-grid-cell[placeholder]:not([detail]):not([group]):not([editor]):not(.jqx-add-new-row) .jqx-label { font-style: italic; } jqx-grid-cell[placeholder]:not([detail]):not([group]):not([editor]):not(.jqx-add-new-row):not([focus]):not([selected]) .jqx-label { color: #9E9E9E !important; } jqx-grid-cell[template] .jqx-label { padding-left: 0px; padding-right: 0px; } jqx-grid-cell[template][template=dropdownGrid] .jqx-label:hover { background: var(--jqx-ui-state-hover); color: var(--jqx-ui-state-color-hover); cursor: pointer; } jqx-grid-cell[template][template=richText][focus] .jqx-label:after, jqx-grid-cell[template][template=richText] .jqx-label:hover:after { color: var(--jqx-background-color) !important; font-family: var(--jqx-font-family-icon); content: var(--jqx-icon-resize-full); background: inherit; color: var(--jqx-primary); position: absolute; font-size: 12px; right: 5px; line-height: 1; top: calc(50% - 6px); cursor: pointer; } jqx-grid-cell[template][template=richText][focus] .jqx-label:after { color: var(--jqx-primary) !important; } jqx-grid-cell[template][template=url] a, jqx-grid-cell[template][template=email] a { color: var(--jqx-primary); font-size: var(--jqx-font-size); } jqx-grid-cell[template][template=url][selected] a, jqx-grid-cell[template][template=email][selected] a { color: inherit; } jqx-grid-cell[template][template=rating][selected] .rating div { visibility: inherit; } jqx-grid-cell[template][template=rating] .rating { display: flex; } jqx-grid-cell[template][template=rating] .rating div { color: #DFDFDF; } jqx-grid-cell[template][template=rating] .rating div.hover { color: #FFBA05; opacity: 0.5; } jqx-grid-cell[template][template=rating] .rating div.value { visibility: inherit; color: #FFBA05; opacity: 1; } jqx-grid-cell[template][template=rating] .rating div.down { animation: starJump 1s ease-in-out; } jqx-grid-cell[template][template=rating] .rating:hover div { visibility: inherit; } @keyframes starJump { from { transform: translateY(0) scale(0.67, 0.67); } 20% { transform: translateY(0) scale(0.75, 0.5); } 40% { transform: translateY(0) scale(1.15, 1.15); } 60% { transform: translateY(0) scale(1.1, 0.6); } 80% { transform: translateY(0) scale(0.95, 1.1); } to { transform: translateY(0) scale(1, 1); } } jqx-grid-cell[template][template=ai] .jqx-icon-reload { visibility: hidden !important; } jqx-grid-cell[template][template=ai]:hover .jqx-icon-reload { visibility: visible !important; } jqx-grid-cell[template][template=url] .jqx-label, jqx-grid-cell[template][template=email] .jqx-label, jqx-grid-cell[template][template=modifiedTime] .jqx-label, jqx-grid-cell[template][template=createdTime] .jqx-label, jqx-grid-cell[template][template=autoNumber] .jqx-label, jqx-grid-cell[template][template=phone] .jqx-label, jqx-grid-cell[template][template=password] .jqx-label { padding-left: 4px; padding-right: 2px; } jqx-grid-cell[template=checkBox]:hover .jqx-input[icon], jqx-grid-cell[template=checkBox]:hover .jqx-input[color] { background: var(--jqx-background) !important; border: 1px solid var(--jqx-border) !important; color: transparent; } jqx-grid-cell[template=checkBox] .jqx-input[color] { color: transparent; } jqx-grid-cell[template=checkBox] .jqx-input[color][checked] { color: var(--jqx-check-template-color); } jqx-grid-cell[template=checkBox] .jqx-input[color]:not([icon])[checked] { background: var(--jqx-check-template-color) !important; border-color: var(--jqx-check-template-color) !important; color: var(--jqx-check-template-forecolor) !important; } jqx-grid-cell[template=checkBox] .jqx-input[icon] { background: transparent !important; border: none !important; font-size: 16px; } jqx-grid-cell[template=checkBox] .jqx-input[icon][icon=heart]:after { content: var(--jqx-icon-heart); } jqx-grid-cell[template=checkBox] .jqx-input[icon][icon=cancel]:after { content: var(--jqx-icon-cancel); } jqx-grid-cell[template=checkBox] .jqx-input[icon][icon=flag]:after { content: var(--jqx-icon-flag); } jqx-grid-cell[template=checkBox] .jqx-input[icon][icon=star]:after { content: var(--jqx-icon-star); } jqx-grid-cell[template=checkBox] .jqx-input[icon][icon=circle]:after { content: var(--jqx-icon-circle); } jqx-grid-cell[template=checkBox] .jqx-input[icon][icon=bell]:after { content: var(--jqx-icon-bell); } jqx-grid-cell[template=checkBox] .jqx-input[icon][icon=like]:after { content: var(--jqx-icon-like); } jqx-grid-cell[template=checkBox] .jqx-input[icon][icon=check]:after { content: var(--jqx-icon-check); } jqx-grid-cell[template=checkBox] .jqx-label { padding-bottom: 0px; justify-content: center; align-items: center; cursor: default; } jqx-grid-cell[template=checkBox] .jqx-label .jqx-input { cursor: pointer; } jqx-grid-cell[template=checkBox][readonly] .jqx-label { cursor: default !important; } jqx-grid-cell[template=checkBox][readonly] .jqx-label:hover .jqx-input { --jqx-ui-state-hover: var(--jqx-background); } jqx-grid-cell[template=checkBox][readonly] .jqx-label:after, jqx-grid-cell[template=checkBox][readonly] .jqx-label .jqx-input:after { cursor: default !important; } jqx-grid-cell[selected]:not([editor]) { background: var(--jqx-ui-state-selected); color: var(--jqx-ui-state-color-selected); } jqx-grid-cell[selected]:not([editor])[focus]:not([rowspan]):not([colspan]) { background: var(--jqx-ui-state-selected); color: var(--jqx-ui-state-color-selected); opacity: 0.8; } jqx-grid-cell[selected]:not([editor])[freeze]:not([rowspan]):not([colspan]) { opacity: 1; } jqx-grid-cell[selected]:not([editor])[freeze]:not([rowspan]):not([colspan])[header] { background: var(--jqx-ui-state-hover); color: var(--jqx-ui-state-color-hover); } jqx-grid-cell[addNewRow] { border-right: 1px solid var(--jqx-border); } jqx-grid-cell[addNewRow]:after { visibility: hidden; } jqx-grid-cell[colspan], jqx-grid-cell[rowspan] { background: var(--jqx-background); color: var(--jqx-background-color); z-index: 5; padding: 0px; } jqx-grid-cell[colspan][selected]:not([editor]), jqx-grid-cell[rowspan][selected]:not([editor]) { background: var(--jqx-primary) !important; color: var(--jqx-primary-color) !important; } jqx-grid-cell[error] { overflow: visible; z-index: 9999; } jqx-grid-cell[error]:not([row-editor]) > .jqx-label { padding: 0; margin: 0; border: 1px solid var(--jqx-error) !important; box-sizing: border-box; outline: none; width: calc(100% - 1px); height: calc(100% - 1px); position: relative; left: 1px; user-select: none; } jqx-grid-cell[update] { background: var(--jqx-grid-cell-background-update); color: var(--jqx-grid-cell-color-update); } jqx-grid-cell[add] { background: var(--jqx-grid-cell-background-add); color: var(--jqx-grid-cell-color-add); } jqx-grid-cell[delete] { background: var(--jqx-grid-cell-background-delete); color: var(--jqx-grid-cell-color-delete); } jqx-grid-cell[editor] { background: var(--jqx-background); color: var(--jqx-background-color); } jqx-grid-cell[freeze] { background: var(--jqx-grid-cell-background-freeze); color: var(--jqx-grid-cell-color-freeze); } jqx-grid-cell[freeze][selected] { background: var(--jqx-grid-cell-background-freeze-selected) !important; } jqx-grid-cell[highlight] .jqx-label { background: #FFF1C8 !important; color: #333 !important; } jqx-grid-cell[highlight][highlight-data-field] { border-left: 1px solid var(--jqx-primary); border-right: 1px solid var(--jqx-primary); } jqx-grid-cell[highlight][highlight-data-field]:first-child { border-left: 2px solid var(--jqx-primary); } jqx-grid-cell[group] { font-size: var(--jqx-font-size); } jqx-grid-cell[group] span[value], jqx-grid-cell[group] span[summary] { font-weight: 600; } jqx-grid-cell[group] span[value][chip], jqx-grid-cell[group] span[summary][chip] { display: inline-flex; min-width: 2em; width: 2em; height: 2em; border-radius: 50%; font-size: 0.7em; background: var(--jqx-primary); color: var(--jqx-primary-color); justify-content: center; align-items: center; margin-left: 10px; } jqx-grid-column > .jqx-label:not(.jqx-input), jqx-grid-cell > .jqx-label:not(.jqx-input) { width: 100%; height: 100%; } jqx-grid-column > .jqx-label:not(.jqx-input).comments::after, jqx-grid-cell > .jqx-label:not(.jqx-input).comments::after { content: ""; width: 10px; height: 10px; background: var(--jqx-error); position: absolute; right: 0; transform: rotate(45deg); top: -5px; right: -5px; } jqx-grid-column.rotate, jqx-grid-cell.rotate { line-height: initial; display: inline-block; left: 0px; top: 0px; position: absolute; transform-origin: 50% 50% 0; transform: rotate(0deg); } jqx-grid-column .align-left, jqx-grid-cell .align-left { overflow: hidden; text-overflow: ellipsis; text-align: left; padding-left: 7px; padding-right: 2px; } jqx-grid-column .align-top, jqx-grid-cell .align-top { align-items: flex-start; display: flex; line-height: initial; } jqx-grid-column .align-bottom, jqx-grid-cell .align-bottom { align-items: flex-end; display: flex; line-height: initial; } jqx-grid-column .align-right, jqx-grid-cell .align-right { overflow: hidden; text-overflow: ellipsis; text-align: right; padding-right: 7px; padding-left: 2px; } jqx-grid-column .align-right.align-bottom, jqx-grid-cell .align-right.align-bottom { flex-direction: column-reverse; } jqx-grid-column .align-right.align-top, jqx-grid-cell .align-right.align-top { flex-direction: column; align-items: flex-end; } jqx-grid-column .align-center, jqx-grid-cell .align-center { text-overflow: ellipsis; overflow: hidden; text-align: center; padding-right: 7px; padding-left: 7px; } jqx-grid-column .align-center.align-bottom, jqx-grid-cell .align-center.align-bottom { margin-left: 50%; margin-right: 50%; padding-left: 0; padding-right: 0; } jqx-grid-column .align-center.align-top, jqx-grid-cell .align-center.align-top { margin-left: 50%; margin-right: 50%; padding-left: 0; padding-right: 0; } jqx-grid-column .align-middle, jqx-grid-cell .align-middle { display: flex; align-items: center; } jqx-grid-column .align-center.align-middle, jqx-grid-cell .align-center.align-middle { justify-content: center; } jqx-grid-column.jqx-grid-column-border, jqx-grid-cell.jqx-grid-column-border { border-top-color: var(--jqx-border); border-bottom-color: var(--jqx-border); border-left-color: var(--jqx-border); border-right-color: var(--jqx-border); border-top-width: 0px; } jqx-grid-column:not(.jqx-grid-column-border):after, jqx-grid-cell:not(.jqx-grid-column-border):after { height: var(--jqx-border-width); width: 100%; content: ""; position: absolute; bottom: 0px; left: 0px; } jqx-grid-column:not(.jqx-grid-column-border):not(.jqx-grid-column-border-collapse):before, jqx-grid-cell:not(.jqx-grid-column-border):not(.jqx-grid-column-border-collapse):before { width: var(--jqx-border-width); height: 100%; content: ""; position: absolute; top: 0px; left: 0px; } .jqx-grid[view=card] .jqx-grid-column-header { display: none; } .jqx-grid-loading::before { background-image: url("images/load.gif") !important; background-repeat: no-repeat !important; content: ""; width: 16px; height: 16px; position: absolute; left: 6px; } .jqx-grid-column-group-collapse-button span { font-size: 16px; } .jqx-grid-mobile-scroll-content { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; } .jqx-token-max-width { max-width: attr(data-max-width px); } .jqx-drop-down-list-selection-image[data-image] { background-image: attr(data-image url) !important; } .jqx-align-center { align-items: center; } .jqx-justify-content-start { justify-content: flex-start; } .jqx-grid-group-header { min-height: var(--jqx-grid-group-header-height); height: var(--jqx-grid-group-header-height); overflow: hidden; position: relative; z-index: 99; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: var(--jqx-border); background: var(--jqx-surface); display: flex; align-items: center; } .jqx-grid-group-header .jqx-breadcrumb { background: transparent; border: none; width: 100%; --jqx-breadcrumb-item-height: 35px; margin-top: 1px; padding: 0px; padding-left: 5px; } .jqx-grid-group-header .jqx-breadcrumb .jqx-template-container .jqx-breadcrumb-items .jqx-breadcrumb-item { border-radius: var(--jqx-border-radius); margin-top: 0px; } .jqx-grid-group-header .jqx-breadcrumb-item-label { display: flex; justify-content: center; align-content: center; } .jqx-grid-group-header .jqx-breadcrumb-item-label .jqx-grid-icon { font-weight: bold; font-size: 16px; margin-right: -10px; } .jqx-grid .jqx-grid-row:not([leaf]) jqx-grid-cell[group]:not([header]) div:not([content]) { visibility: hidden; } .jqx-grid[grouped] jqx-grid-row[level] > .jqx-grid-cell-container > jqx-grid-cell div[content] { line-height: initial; width: 100%; height: 100%; display: flex; align-items: center; } .jqx-grid[grouped] jqx-grid-row[level] > .jqx-grid-cell-container > jqx-grid-cell div[content] > div[checkbox]:not(.jqx-hidden) { margin-right: 7px; } .jqx-grid[grouped] jqx-grid-row[level] jqx-grid-cell[group] { border-right: 1px solid var(--jqx-border); padding-right: 1px; } .jqx-grid[grouped] jqx-grid-row[level] jqx-grid-cell[group] div[group-advanced] { font-size: 12px; grid-template-columns: auto auto auto; display: grid; grid-column-gap: 5px; align-items: center; } .jqx-grid[grouped] jqx-grid-row[level] jqx-grid-cell[group] div[group-advanced]:hover span[group] span { transform: scale(1.1); opacity: 1; color: var(--jqx-primary); } .jqx-grid[grouped] jqx-grid-row[level] jqx-grid-cell[group] div[group-advanced] span[group] span { opacity: 0.7; font-weight: normal; margin-left: -8px; transform: scale(0.9); } .jqx-grid[grouped] jqx-grid-row[level] jqx-grid-cell[group] div[group-advanced] span[group] { display: flex; font-weight: bold; } .jqx-grid[grouped] jqx-grid-row[level] jqx-grid-cell[group] div[group-advanced] span[value] { font-size: var(--jqx-font-size); position: relative; white-space: nowrap; text-overflow: ellipsis; user-select: none; display: flex; align-items: center; padding: 2px 6px 2px 6px; font-weight: 400; border-radius: 20px; background-color: var(--jqx-primary); color: var(--jqx-primary-color); border: 1px solid var(--jqx-primary); } .jqx-grid[grouped] jqx-grid-row[level] jqx-grid-cell[group] div[group-advanced] span[summary] { font-weight: 400; font-size: 10px; opacity: 0.7; } .jqx-grid[grouped] jqx-grid-row[level] jqx-grid-cell[group] div[group-advanced]:hover span[summary] { opacity: 1; } .jqx-grid-column-menu { position: absolute; background: var(--jqx-surface); width: var(--jqx-grid-column-menu-width); height: var(--jqx-grid-column-menu-height); z-index: 9999; box-shadow: var(--jqx-elevation-8); min-height: 40px; overflow: hidden; } .jqx-grid-column-menu jqx-menu { border: none; } .jqx-grid-column-menu.jqx-animate { transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); transform: scale(0); opacity: 0; transform-origin: top left; } .jqx-grid-column-menu.jqx-animate.jqx-open-right { transform-origin: top right; } .jqx-grid-column-menu.jqx-animate.jqx-grid-download-menu { width: auto; transform: scaleY(0); } .jqx-grid-column-menu jqx-menu[mode=vertical] { height: 100%; } .jqx-grid-column-menu.open.jqx-animate { transform: scale(1); opacity: 1; } .jqx-grid-column-menu .jqx-grid-icon { display: inline-block; } .jqx-grid-column-menu .jqx-filter-container { width: 100%; height: auto; background: var(--jqx-background); } .jqx-grid-column-menu .jqx-filter-container jqx-filter-panel { width: 100%; border: none; background: transparent; } .jqx-grid-column-menu .jqx-filter-container .jqx-filter-panel jqx-tree, .jqx-grid-column-menu .jqx-filter-panel jqx-filter-builder { height: 250px; } .jqx-grid-filter-footer { height: var(--jqx-grid-filter-footer-height); } jqx-grid-row[filter-row], jqx-grid-row[summary-row] { background: var(--jqx-surface); } jqx-grid-row[filter=indeterminate] { opacity: 0.75; } jqx-grid-column .jqx-filter-button.jqx-animate:before { transition: transform 0.2s ease-out, opacity 0.3s ease-out; } jqx-grid-cell.jqx-grid-filter-row-cell { background: var(--jqx-surface); color: var(--jqx-surface-color); border-color: var(--jqx-surface); --jqx-grid-cell-horizontal-border: transparent; } jqx-grid-cell.jqx-grid-filter-row-cell .jqx-filter-input-type { outline: none; background: inherit; color: inherit; border: none; border-radius: 0px; width: var(--jqx-editor-addon-width); font-family: var(--jqx-font-family-icon); font-style: normal; font-weight: normal; 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; } jqx-grid-cell.jqx-grid-filter-row-cell .jqx-filter-input-value { border-radius: 0px; width: calc(100% - var(--jqx-editor-addon-width)); border: none; resize: none; border-radius: 0px; background: inherit; color: inherit; outline: none; overflow: hidden; } jqx-grid-cell.jqx-grid-filter-row-cell .jqx-filter-input-value.jqx-grid-number-input-cell-editor .nav { border: 1px solid var(--jqx-border); } jqx-grid-cell.jqx-grid-filter-row-cell .jqx-filter-input-container { display: flex; margin-left: 1px; width: calc(100% - 1px) !important; height: 100%; border: 1px solid transparent; } jqx-grid-cell.jqx-grid-filter-row-cell .jqx-filter-input-container[disabled] .nav { pointer-events: none; visibility: hidden; } jqx-grid-cell.jqx-grid-filter-row-cell .jqx-filter-input-container[disabled] .jqx-filter-input-type { pointer-events: none; visibility: hidden; } jqx-grid-cell.jqx-grid-filter-row-cell .jqx-filter-input-container[disabled] .jqx-grid-icon { visibility: hidden; pointer-events: none; } jqx-grid-cell.jqx-grid-filter-row-cell .jqx-filter-input-container[focus] { border-color: var(--jqx-ui-state-border-active); border-style: solid; border-width: 1px; background: var(--jqx-background); } jqx-grid-cell.jqx-grid-filter-row-cell .jqx-filter-input-container[focus] .jqx-filter-input-value.jqx-grid-number-input-cell-editor .nav { background: var(--jqx-background); } jqx-grid-cell.jqx-grid-filter-row-cell[template=checkBox] .jqx-filter-input-value.jqx-grid-check-box-cell-editor { width: 14px; height: 14px; } jqx-grid-cell[filter] { background: var(--jqx-grid-cell-background-filter); color: var(--jqx-grid-cell-color-filter); } jqx-grid-cell[filter]:not([selected]) .jqx-label { background: var(--jqx-grid-cell-background-filter); color: var(--jqx-grid-cell-color-filter); } jqx-menu.jqx-grid-column-filter-menu.filter-excel jqx-menu-item[level="1"] .jqx-menu-item-label-container { padding: 0px !important; margin: 0px !important; } .jqx-grid-pager jqx-pager { width: calc(100% - 10px); height: calc(100% - 10px); margin-left: 2px; margin-top: 5px; border: none; } .jqx-grid > .jqx-container .jqx-grid-pager, .jqx-grid.jqx-container .jqx-grid-pager { height: var(--jqx-pager-default-height); overflow: hidden; z-index: 99; border-top-width: 1px; border-top-style: solid; border-top-color: var(--jqx-border); width: 100%; background: var(--jqx-surface); color: var(--jqx-surface-color); } .jqx-grid > .jqx-container .jqx-grid-pager[top], .jqx-grid.jqx-container .jqx-grid-pager[top] { border-top-color: transparent; border-bottom: 1px solid var(--jqx-border); } .jqx-grid-sort-animation { transition-timing-function: ease-in-out; transition-delay: 0; } .jqx-grid-add-column-dialog-color-panel { width: 100%; } .jqx-grid-add-column-dialog-color-panel .jqx-sortable { width: 100%; margin-bottom: 10px; overflow: auto; } .jqx-grid-add-column-dialog-color-panel .jqx-sortable .jqx-sortable-container { overflow: hidden; } .jqx-grid-add-column-dialog-color-panel .jqx-sortable .jqx-grid-add-column-dialog-color-item { display: flex; align-items: center; width: calc(100% - 25px); margin-left: 5%; margin-top: 5px; margin-bottom: 2px; } .jqx-grid-add-column-dialog-color-panel .jqx-sortable .jqx-grid-add-column-dialog-color-item jqx-color-input .jqx-color-box { border-radius: 50%; } .jqx-grid[sorting_mode=many] jqx-grid-column[sort-index] .jqx-label.align-right { margin-left: -10px; } .jqx-grid[sorting_mode=many] jqx-grid-column[sort-index] .jqx-sort-button[order] { width: 40px; } .jqx-grid[sorting_mode=many] jqx-grid-column[sort-index] .jqx-sort-button:after { content: attr(order); font-family: var(--jqx-font-family); font-size: 11px; display: flex; justify-content: center; align-items: center; border-radius: 50%; background: var(--jqx-primary); color: var(--jqx-primary-color); padding: 5px; margin-left: 5px; height: 8px; box-sizing: content-box; } jqx-grid-column .jqx-sort-button.asc, jqx-grid-column .jqx-sort-button.desc { display: flex; } jqx-grid-column .jqx-sort-button.asc:before, jqx-grid-column .jqx-sort-button.desc:before { content: var(--jqx-icon-arrow-down); position: relative; } jqx-grid-column .jqx-sort-button.asc:before { transform: rotate(180deg); } jqx-grid-column .jqx-sort-button.desc:before { transform: rotate(0deg); } jqx-grid-column .jqx-sort-button.jqx-animate:before { transition: transform 0.2s ease-out, opacity 0.3s ease-out; } jqx-grid-cell[sort] { background: var(--jqx-grid-cell-background-sort); color: var(--jqx-grid-cell-color-sort); } jqx-grid-cell[sort]:not([selected]) .jqx-label { background: var(--jqx-grid-cell-background-sort); color: var(--jqx-grid-cell-color-sort); } jqx-grid[tree] jqx-grid-cell[has-toggle-button]:not([detail]) button[toggle-button] { padding-right: 7px; padding-right: 14px; margin-left: 7px; cursor: pointer; } .jqx-grid[tree] jqx-grid-row[level] > .jqx-grid-cell-container > jqx-grid-cell div[content] { line-height: initial; width: 100%; height: 100%; display: flex; align-items: center; } .jqx-grid[tree] jqx-grid-row[level] > .jqx-grid-cell-container > jqx-grid-cell div[content] > div[checkbox]:not(.jqx-hidden) { margin-right: 7px; } .jqx-votes-bar-container { position: relative; flex: 1 1 auto; margin-left: 8px; margin-right: 8px; height: 30px; cursor: pointer; } .jqx-votes-bar-container .jqx-votes-bar, .jqx-votes-bar-container .jqx-votes-bar-frame { background: var(--jqx-check-template-color) !important; border-color: var(--jqx-check-template-color) !important; color: var(--jqx-check-template-forecolor) !important; position: absolute; top: 5px; bottom: 5px; } .jqx-votes-cell-component { height: 100%; cursor: pointer; } .jqx-votes-cell-component .jqx-voters-info { height: 30px; margin-right: 8px; display: flex; align-items: center; } .jqx-votes-cell-component .jqx-vote-button { margin-left: 8px; flex: 0 0 20px; height: 20px; width: 20px; line-height: 20px; border-radius: 50%; color: var(--jqx-check-template-forecolor) !important; border: 1px solid var(--jqx-check-template-color) !important; } .jqx-votes-cell-component .jqx-vote-button.voted { background: var(--jqx-check-template-color) !important; } .jqx-votes-bar-animate .jqx-votes-bar, .jqx-votes-bar-animate .jqx-votes-bar-frame { transition: all 0.2s ease-in-out; } .jqx-reaction-tooltip { display: flex; gap: 4px; position: absolute; visibility: hidden; opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease; background: var(--jqx-surface); color: var(--jqx-surface-color); z-index: 10; padding: 5px; pointer-events: none; } .jqx-reaction-tooltip.show { visibility: visible; opacity: 1; pointer-events: auto; /* Allows interaction when visible */ transform: translateY(0); /* Smoother appearance */ } .jqx-reaction-tooltip span { font-size: 16px; cursor: pointer; user-select: none; transition: transform 0.2s; } /* Pulsing effect on hover */ .jqx-reaction-tooltip span:hover { animation: pulse 0.7s infinite ease-in-out; /* Pulsing effect on hover */ } /* Pulsing keyframes */ @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } } .jqx-reaction-bubble { padding: 3px 5px; font-size: 14px; display: flex; font-size: var(--jqx-font-size); align-items: center; gap: 5px; margin-top: 5px; transition: opacity 0.3s ease; } .jqx-reactions-display { display: flex; flex-wrap: wrap; gap: 4px; } /* Hover effect to display reactions */ .jqx-message { position: relative; } @keyframes fadeAnimation { 0% { background-color: inherit; color: #333; } 20% { background-color: #0A85D9; color: #fff; } 50% { background-color: #0A85D9; color: #fff; } 100% { background-color: inherit; color: inherit; } } .jqx-flash-cell .jqx-label { background-image: none !important; animation: fadeAnimation 1s ease-in-out; } .jqx-switch { position: relative; display: inline-block; width: 30px; height: 16px; } .jqx-switch input { opacity: 0; width: 0; height: 0; } .jqx-switch .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(var(--jqx-secondary-rgb), 0.5); transition: 0.4s; } .jqx-switch .slider:before { position: absolute; content: ""; height: 12px; width: 12px; left: 2px; bottom: 2px; background-color: var(--jqx-background); transition: 0.4s; } .jqx-switch input:checked + .slider { background-color: var(--jqx-primary); } .jqx-switch input:focus + .slider { box-shadow: 0 0 1px var(--jqx-primary); } .jqx-switch input:checked + .slider:before { transform: translateX(14px); } /* Rounded sliders */ .jqx-switch .slider.round, .jqx-switch .slider.round:before { border-radius: 30px; } .jqx-grid-color-input --jqx-input-drop-down-menu-width { width: 98px; } .jqx-grid-color-input .default-samples-container { display: flex; } .jqx-grid-drop-down-button { display: inline-block; cursor: pointer; } .jqx-grid-summary-row-cell { background: var(--jqx-surface) !important; color: var(--jqx-surface-color) !important; border-color: var(--jqx-border) !important; opacity: 1 !important; } .jqx-grid-summary-row-cell button { display: none; } .jqx-grid-summary-row-cell .summary-value { font-size: 11px; opacity: 0.75; height: calc(100% - 2px); display: flex; justify-content: flex-end; align-items: center; width: 100%; } .jqx-grid-summary-row-cell .summary-value .summary-value-part { transition: transform cubic-bezier(0.4, 0, 0.2, 1) 0.2s; } .jqx-grid-summary-row-cell .summary-value .summary-value-part:hover { transform: scale(1.2); } .jqx-grid-summary-row-cell .summary-value .jqx-arrow-down, .jqx-grid-summary-row-cell .summary-value .jqx-summary-placeholder { opacity: 0; transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .jqx-grid-summary-row-cell .summary-value[has-summary] .jqx-arrow-down, .jqx-grid-summary-row-cell .summary-value[has-summary] .jqx-summary-placeholder { display: inherit; opacity: 0.7; } .jqx-grid-summary-row-cell .summary-value.summary-chooser .jqx-arrow-down, .jqx-grid-summary-row-cell .summary-value.summary-chooser .jqx-summary-placeholder, .jqx-grid-summary-row-cell .summary-value:hover .jqx-arrow-down, .jqx-grid-summary-row-cell .summary-value:hover .jqx-summary-placeholder { opacity: 1; } .jqx-grid-summary-row-cell .summary-value .label { margin-top: -3px; } .jqx-grid-summary-row-cell::before { display: none; } jqx-grid-cell.jqx-warning { background: rgba(250, 77, 50, 0.2); } jqx-grid-cell .jqx-label[data-comment]::after { border-inline-end: none; border-inline-start: 6px solid transparent; border-top: 6px solid var(--jqx-primary); content: ""; display: block; inset-inline-end: 0; inset-inline-start: unset; position: absolute; top: 0; } jqx-grid-row[edit] .jqx-grid-cell-container.near, jqx-grid-row[edit] .jqx-grid-cell-container.far { z-index: 99; } .jqx-grid-cell-editor > * { display: block; width: 100%; height: 100%; border: none; overflow: hidden; margin: 0; outline: none; background: inherit; color: inherit; border-radius: 0px; --jqx-border-top-left-radius: 0px; --jqx-border-top-right-radius: 0px; --jqx-border-bottom-left-radius: 0px; --jqx-border-bottom-right-radius: 0px; } .jqx-grid-cell-editor.jqx-grid-passowrd-input-cell-editor, .jqx-grid-cell-editor.jqx-grid-phone-input-cell-editor, .jqx-grid-cell-editor.jqx-grid-date-time-picker-cell-editor { border-radius: 0; border: none; font-size: inherit; font-weight: inherit; background: inherit; color: inherit; } .jqx-grid-cell-editor.jqx-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; } .jqx-grid-cell-editor.jqx-grid-number-input-cell-editor[focus]:not(.outlined) .nav { border-left-width: 1px !important; } .jqx-grid-cell-editor.jqx-grid-number-input-cell-editor .nav { padding: 0px; display: flex; width: var(--jqx-editor-addon-width); height: 100%; flex-direction: column; color: var(--jqx-surface-color); border-left: 1px solid var(--jqx-border); background: var(--jqx-surface); } .jqx-grid-cell-editor.jqx-grid-number-input-cell-editor .nav .up, .jqx-grid-cell-editor.jqx-grid-number-input-cell-editor .nav .down { display: flex; height: 50%; overflow: hidden; cursor: pointer; font-family: var(--jqx-font-family-icon); justify-content: center; align-items: center; outline: none; } .jqx-grid-cell-editor.jqx-grid-number-input-cell-editor .nav .up:hover, .jqx-grid-cell-editor.jqx-grid-number-input-cell-editor .nav .down:hover { background: var(--jqx-ui-state-hover); color: var(--jqx-ui-state-color-hover); } .jqx-grid-cell-editor.jqx-grid-number-input-cell-editor .nav .up:active, .jqx-grid-cell-editor.jqx-grid-number-input-cell-editor .nav .up[active], .jqx-grid-cell-editor.jqx-grid-number-input-cell-editor .nav .down:active, .jqx-grid-cell-editor.jqx-grid-number-input-cell-editor .nav .down[active] { background: var(--jqx-ui-state-active); color: var(--jqx-ui-state-color-active); } .jqx-grid-cell-editor.jqx-grid-number-input-cell-editor .nav .up { border-bottom: 1px solid var(--jqx-border); } .jqx-grid-cell-editor.jqx-grid-number-input-cell-editor .nav .up:after { content: var(--jqx-icon-arrow-up); } .jqx-grid-cell-editor.jqx-grid-number-input-cell-editor .nav .down:after { content: var(--jqx-icon-arrow-down); } .jqx-grid-cell-editor.jqx-grid-text-area-cell-editor { display: flex; width: 100%; height: 100%; margin: 0; border-radius: 0; border: none; font-size: inherit; font-weight: inherit; background: inherit; color: inherit; font-family: inherit; } .jqx-grid-cell-editor.jqx-grid-input-cell-editor { width: 100%; height: 100%; margin: 0; border-radius: 0; border: none; font-size: inherit; font-weight: inherit; background: inherit; color: inherit; } .jqx-grid-cell-editor.jqx-grid-auto-complete-cell-editor { width: 100%; height: 100% !important; margin: 0; border-radius: 0; border: none; font-size: inherit; font-weight: inherit; background: inherit; color: inherit; } .jqx-grid-cell-editor.jqx-grid-auto-complete-cell-editor div, .jqx-grid-cell-editor.jqx-grid-auto-complete-cell-editor input { border-radius: 0; } .jqx-grid-cell-editor > input[type=checkbox] { border: none; min-width: 16px; height: 16px; top: 6px; position: relative; } .jqx-grid-cell-content-popup { background: var(--jqx-primary) !important; color: var(--jqx-primary-color) !important; border: 1px solid var(--jqx-primary) !important; z-index: 19 !important; } .jqx-grid-cell-content-popup-content { padding-left: 6px; padding-right: 2px; padding-top: 6px; padding-bottom: 6px; box-shadow: none !important; } .jqx-grid-row-container { position: relative; } .jqx-grid-row-container.near, .jqx-grid-row-container.far { z-index: 7; position: absolute; width: 100%; } .jqx-grid-row-container.near { border-bottom: var(--jqx-grid-freeze-splitter-size) solid var(--jqx-border); box-sizing: content-box; } .jqx-grid-row-container.far { border-top: var(--jqx-grid-freeze-splitter-size) solid var(--jqx-border); box-sizing: content-box; z-index: 11; } .jqx-grid-row-drag-feedback { height: auto !important; flex-direction: column; } .jqx-grid-row-drag-feedback div { padding-top: 3px; } .jqx-grid-row-drag-feedback > div { display: flex; align-items: flex-start; padding: 3px; white-space: nowrap; font-family: var(--jqx-font-family); font-size: 8px; background-color: var(--jqx-background); color: var(--jqx-background-color); flex-direction: column; max-height: 200px; overflow: hidden; } .jqx-grid-dialog-editor.add-column { display: flex; height: 30px; align-items: center; margin-bottom: 10px; } .jqx-grid-dialog-editor.radio-group { height: auto; } .jqx-grid-dialog-add-column { max-height: 700px; } .jqx-grid-dialog-add-column .jqx-footer { background: var(--jqx-background) !important; } .jqx-grid-dialog-add-column .jqx-grid-dialog-radio-field { width: 100%; } .jqx-grid-dialog-add-column .jqx-grid-dialog-radio-field:focus { outline: none; } .jqx-grid-dialog-add-column .jqx-grid-dialog-radio-field:focus .jqx-input { background: var(--jqx-ui-state-hover); color: var(--jqx-ui-state-color-hover); } .jqx-grid-dialog-add-column .jqx-grid-dialog-radio-field .jqx-input { border-radius: 50% !important; margin-right: 10px; } .jqx-grid-dialog-add-column .jqx-grid-dialog-radio-field .jqx-input:after { content: "" !important; } .jqx-grid-dialog-add-column .jqx-grid-dialog-radio-field .jqx-input[checked]:after { content: var(--jqx-icon-radio) !important; } .jqx-grid-dialog-add-column .jqx-grid-dialog-boolean-field { display: flex; align-items: center; margin-bottom: 5px; } .jqx-grid-dialog-add-column .jqx-grid-dialog-boolean-field .jqx-grid-dialog-editor { margin-bottom: initial; margin-right: 10px; } .jqx-grid-dialog-editor[template=colorInput] { border: none !important; } .jqx-grid-dialog-editor[template=colorInput] jqx-color-input { border: 1px solid var(--jqx-border); } .jqx-grid-dialog-editor[template=rating] { border: none !important; } .jqx-grid-dialog-editor[template=rating] .rating { display: flex; } .jqx-grid-dialog-editor[template=rating] .rating div { color: #DFDFDF; } .jqx-grid-dialog-editor[template=rating] .rating div.hover, .jqx-grid-dialog-editor[template=rating] .rating div:hover { color: #FFBA05; opacity: 0.5; } .jqx-grid-dialog-editor[template=rating] .rating div.value { visibility: inherit; color: #FFBA05 !important; opacity: 1 !important; } .jqx-grid-dialog-editor[template=rating] .rating:hover div { visibility: inherit; } .jqx-grid-dialog-editor .attachments, .jqx-grid-dialog-editor .images { display: grid; grid-template-columns: 1fr auto auto; height: 100%; } .jqx-grid-dialog-editor .attachments .file-container, .jqx-grid-dialog-editor .attachments .container, .jqx-grid-dialog-editor .images .file-container, .jqx-grid-dialog-editor .images .container { display: flex; height: calc(100% - 3px); align-items: center; padding-left: 5px; } .jqx-grid-dialog-editor .attachments .jqx-drop-image, .jqx-grid-dialog-editor .images .jqx-drop-image { margin-left: -5px; } .jqx-grid-dialog-editor .attachments .jqx-drop-image::after, .jqx-grid-dialog-editor .images .jqx-drop-image::after { font-family: var(--jqx-font-family-icon); content: var(--jqx-icon-download-alt); margin-left: 5px; } .jqx-grid-dialog-editor .attachments .arrowbtn, .jqx-grid-dialog-editor .images .arrowbtn { width: 15px; background: var(--jqx-surface); } .jqx-grid-dialog-editor .attachments .arrowbtn:hover, .jqx-grid-dialog-editor .images .arrowbtn:hover { cursor: pointer; background: var(--jqx-primary); color: var(--jqx-primary-color); } .jqx-grid-dialog-editor .attachments .attachment, .jqx-grid-dialog-editor .attachments img, .jqx-grid-dialog-editor .images .attachment, .jqx-grid-dialog-editor .images img { height: 23px; width: 23px; border: 1px solid var(--jqx-border); margin-right: 3px; border-radius: var(--jqx-border-radius); } .jqx-grid-dialog-editor .attachments .attachment:hover, .jqx-grid-dialog-editor .attachments img:hover, .jqx-grid-dialog-editor .images .attachment:hover, .jqx-grid-dialog-editor .images img:hover { cursor: pointer; border-color: var(--jqx-primary); } .jqx-grid-image-dialog { width: 500px !important; min-height: 400px !important; background: var(--jqx-background); } .jqx-grid-image-dialog .jqx-header { display: flex; justify-content: center; align-items: center; } .jqx-grid-image-dialog .tabs { width: 100%; height: 30px; overflow: hidden; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); display: flex; margin-bottom: 5px; } .jqx-grid-image-dialog .tabs .tab { width: 50%; width: 50%; display: flex; align-items: center; justify-content: center; text-transform: uppercase; color: var(--jqx-background-color); cursor: pointer; } .jqx-grid-image-dialog .tabs .tab label { cursor: pointer; } .jqx-grid-image-dialog .tabs .tab.active { color: var(--jqx-primary); border-bottom: 2px solid var(--jqx-primary); font-weight: bold; } .jqx-grid-image-dialog .preview { margin-top: 10px; } .jqx-grid-image-dialog .preview p { font-size: 10px; text-align: center; } .jqx-grid-image-dialog .preview .jqx-icon-delete { margin: 5px; } .jqx-grid-image-dialog .preview .jqx-icon-delete:hover { color: var(--jqx-primary); } .jqx-grid-image-dialog .preview .list .item { display: flex; align-items: center; flex-direction: column; font-size: 10px; color: var(--jqx-background-color); max-width: 100px; margin-right: 10px; overflow: hidden; min-width: 60px; } .jqx-grid-image-dialog .preview .list .item:after { font-family: var(--jqx-font-family-icon); width: 16px; height: 16px; content: var(--jqx-icon-close); cursor: pointer; } .jqx-grid-image-dialog .preview .list .item .attachment, .jqx-grid-image-dialog .preview .list .item img { width: 50px; height: 50px; min-height: 50px; border: 2px solid transparent; } .jqx-grid-image-dialog .preview .list .item .attachment:hover, .jqx-grid-image-dialog .preview .list .item img:hover { border: 2px solid var(--jqx-primary); border-radius: var(--jqx-border-radius); cursor: pointer; } .jqx-grid-image-dialog .preview .list .item div { text-overflow: ellipsis; text-align: center; } .jqx-grid-image-dialog .preview .list { max-height: 100px; max-width: 500px; overflow: auto; display: flex; flex-direction: row; } .jqx-grid-image-dialog .url-zone { display: flex; justify-content: center; align-items: center; flex-direction: column; height: 220px; } .jqx-grid-image-dialog .url-zone .upload { display: flex; flex-direction: column; } .jqx-grid-image-dialog .url-zone .url-title { margin-top: 10px; font-size: 10px; color: var(--jqx-background-color); } .jqx-grid-image-dialog .url-zone .jqx-input { text-align: center; } .jqx-grid-image-dialog .jqx-grid-drop-zone, .jqx-grid-image-dialog .jqx-grid-file-zone { border: 2px dashed rgba(0, 0, 0, 0.1); border-radius: 6px; background: var(--jqx-surface); height: 220px; background: var(--jqx-background); display: flex; align-items: center; justify-content: center; text-align: center; transition: all 0.2s ease-out; flex-direction: column; outline: none; } .jqx-grid-image-dialog .jqx-grid-drop-zone .title, .jqx-grid-image-dialog .jqx-grid-file-zone .title { cursor: pointer; font-size: 20px; font-weight: 500; height: 50px; display: flex; align-items: center; flex-direction: column; margin-top: 20px; } .jqx-grid-image-dialog .jqx-grid-drop-zone .title .jqx-grid-icon, .jqx-grid-image-dialog .jqx-grid-file-zone .title .jqx-grid-icon { font-size: 24px; margin-bottom: 5px; color: var(--jqx-primary); } .jqx-grid-image-dialog .jqx-grid-drop-zone .subtitle, .jqx-grid-image-dialog .jqx-grid-file-zone .subtitle { margin-top: 20px; margin-bottom: 20px; display: flex; align-items: center; color: var(--jqx-background-color); } .jqx-grid-image-dialog .jqx-grid-drop-zone.jqx-grid-file-zone, .jqx-grid-image-dialog .jqx-grid-file-zone.jqx-grid-file-zone { justify-content: space-between; } .jqx-grid-image-dialog .jqx-grid-drop-zone .files, .jqx-grid-image-dialog .jqx-grid-file-zone .files { overflow: auto; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; width: 100%; padding: 10px; font-family: var(--jqx-font-family); font-size: var(--jqx-font-size); } .jqx-grid-image-dialog .jqx-grid-drop-zone .files .item, .jqx-grid-image-dialog .jqx-grid-file-zone .files .item { display: flex; flex-direction: column; align-items: center; } .jqx-grid-image-dialog .jqx-grid-drop-zone .files .item img, .jqx-grid-image-dialog .jqx-grid-file-zone .files .item img { width: 24px; height: 24px; } .jqx-grid-image-dialog .jqx-grid-drop-zone .files .item, .jqx-grid-image-dialog .jqx-grid-file-zone .files .item { cursor: pointer; padding: 2px; } .jqx-grid-image-dialog .jqx-grid-drop-zone .files .item.active, .jqx-grid-image-dialog .jqx-grid-file-zone .files .item.active { background: var(--jqx-ui-state-selected); border: 1px solid var(--jqx-ui-state-border-selected); } .jqx-grid-dialog-overlay { z-index: 100; background: #333; opacity: 0.1; width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; } .jqx-grid-overlay { z-index: 100; background: transparent; opacity: 0.1; width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; } .jqx-grid-text-area-dialog, .jqx-grid-slider-dialog { z-index: 9999; position: absolute; min-width: 160px; min-height: 140px; font-size: var(--jqx-font-size); font-family: var(--jqx-font-family); background: var(--jqx-background); border: none; box-shadow: 0 0 0 3px var(--jqx-primary) !important; color: var(--jqx-background-color); box-sizing: border-box; border-radius: 1px; overflow: visible; color: var(--jqx-background-color); box-sizing: border-box; overflow: visible; } .jqx-grid-text-area-dialog.open, .jqx-grid-slider-dialog.open { box-shadow: var(--jqx-elevation-8) !important; } .jqx-grid-text-area-dialog.jqx-grid-slider-dialog, .jqx-grid-slider-dialog.jqx-grid-slider-dialog { min-height: 60px; max-width: 200px; transform: rotate(-90deg); } .jqx-grid-text-area-dialog .jqx-grid-text-area-resizer, .jqx-grid-slider-dialog .jqx-grid-text-area-resizer { position: absolute; background: var(--jqx-primary); color: var(--jqx-primary-color); height: 20px; width: 20px; font-size: 12px; right: -10px; top: -15px; border-radius: 50%; z-index: 9; } .jqx-grid-text-area-dialog .jqx-grid-text-area-container, .jqx-grid-text-area-dialog .jqx-grid-slider-container, .jqx-grid-slider-dialog .jqx-grid-text-area-container, .jqx-grid-slider-dialog .jqx-grid-slider-container { width: 100%; height: 100%; overflow: hidden; } .jqx-grid-text-area-dialog .jqx-grid-slider-container, .jqx-grid-slider-dialog .jqx-grid-slider-container { height: 100%; position: absolute; display: flex; padding: 6px; box-sizing: border-box; } .jqx-grid-text-area-dialog jqx-text-area, .jqx-grid-text-area-dialog textarea, .jqx-grid-slider-dialog jqx-text-area, .jqx-grid-slider-dialog textarea { min-height: 180px; width: 100%; height: 180px; box-sizing: border-box; border: none; background: inherit; outline: none; resize: none; color: inherit; } .jqx-grid-cell-notification { position: absolute; background: var(--jqx-primary); color: var(--jqx-primary-color); border-radius: var(--jqx-border-radius); padding: 7px; width: auto; height: auto; z-index: 99; } .jqx-grid-validation-error { position: absolute; background: var(--jqx-error); color: var(--jqx-error-color); border-radius: var(--jqx-border-radius); padding: 7px; width: auto; height: auto; z-index: 99; } .jqx-selection-overlay { position: absolute; border: 2px solid var(--jqx-primary); z-index: 10; } .jqx-selection-overlay-content { background: var(--jqx-ui-state-selected); opacity: 0.2; width: 100%; height: 100%; } .jqx-selection-overlay-content:after { cursor: move; content: ""; height: 4px; width: calc(100% - 10px); position: absolute; bottom: 0px; } .jqx-selection-overlay-border-content { border: 0px solid var(--jqx-background); width: 100%; height: 100%; } .jqx-selection-overlay-border-content.handle:after { border: 1px solid var(--jqx-background); content: ""; background: var(--jqx-primary); width: 4px; height: 4px; position: absolute; right: -4px; bottom: -4px; cursor: crosshair; } .jqx-input-overlay { background: var(--jqx-ui-state-active); position: absolute; border-radius: 100%; opacity: 0; transform: scale(0); z-index: 9; cursor: pointer; } .jqx-input-overlay.jqx-animate { transition: transform 0.25s ease-in-out, opacity 0.25s ease-in-out; } .jqx-input-overlay-on { opacity: 0.3; transform: scale(1); } .jqx-window.jqx-grid-popup { transition: opacity 0.2s, transform 0.2s ease-out; opacity: 0; font-family: var(--jqx-font-family); font-size: var(--jqx-font-size); transform: scaleY(0) !important; transform-origin: top !important; --jqx-window-content-padding: 0px; --jqx-window-header-height: 0px; box-shadow: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-right-radius: 0px; border-top-left-radius: 0px; } .jqx-window.jqx-grid-popup.open { transform: scale(1) !important; opacity: 1; } .jqx-window.jqx-grid-dialog { transition: opacity 0.2s, transform 0.2s ease-out; transform: scale(0); opacity: 0; font-family: var(--jqx-font-family); font-size: var(--jqx-font-size); } .jqx-window.jqx-grid-dialog.maximized { box-shadow: none !important; cursor: default !important; } .jqx-window.jqx-grid-dialog.maximized .jqx-header-section { cursor: default !important; } .jqx-window.jqx-grid-dialog .jqx-grid-edit-dialog-columns-separator { display: grid; margin-top: 10px; margin-bottom: 10px; align-items: center; grid-template-columns: 1fr auto 1fr; } .jqx-window.jqx-grid-dialog .jqx-grid-edit-dialog-columns-separator .toggle-button { margin-left: 10px; margin-right: 10px; cursor: pointer; } .jqx-window.jqx-grid-dialog .jqx-grid-edit-dialog-columns-separator .toggle-button:hover { color: var(--jqx-primary); } .jqx-window.jqx-grid-dialog .jqx-grid-edit-dialog-columns-separator span:first-child { border-bottom: 1px solid var(--jqx-border); } .jqx-window.jqx-grid-dialog .jqx-grid-edit-dialog-columns-separator span:last-child { border-top: 1px solid var(--jqx-border); } .jqx-window.jqx-grid-dialog[mobile] { left: 0px !important; top: 0px !important; width: 100% !important; height: 100% !important; } .jqx-window.jqx-grid-dialog.jqx-grid-dialog-description, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-add-column { transform: scaleY(0) !important; transform-origin: top !important; } .jqx-window.jqx-grid-dialog.jqx-grid-dialog-description.view, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-add-column.view { transform-origin: unset !important; transform: scale(0) !important; } .jqx-window.jqx-grid-dialog.jqx-grid-dialog-description .jqx-header-notes, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-add-column .jqx-header-notes { margin-bottom: 10px; display: block; } .jqx-window.jqx-grid-dialog.jqx-grid-dialog-description.center, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-add-column.center { transform: scale(0); transform-origin: unset; } .jqx-window.jqx-grid-dialog.jqx-grid-dialog-summary { transform: scaleY(0); transform-origin: bottom; --jqx-window-content-padding: 0px; box-shadow: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-right-radius: 0px; border-top-left-radius: 0px; } .jqx-window.jqx-grid-dialog.jqx-grid-dialog.disable-animation { transition: none; } .jqx-window.jqx-grid-dialog.jqx-grid-side-panel { transform-origin: top right !important; transform: scaleX(0) !important; height: 100% !important; } .jqx-window.jqx-grid-dialog.jqx-grid-side-panel.open { transform: scaleX(1) !important; } .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row { width: 750px !important; height: 500px !important; } @media screen and (min-width: 1128px) { .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row { width: 1100px !important; height: 750px !important; } } .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row.jqx-grid-side-panel { transform-origin: top right !important; transform: scaleX(0) !important; height: calc(100% - 2px) !important; } .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row.jqx-grid-side-panel.collapsed { width: 450px !important; } .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row.jqx-grid-side-panel.open { transform: scaleX(1) !important; } .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row { --jqx-window-content-padding: 0px; } .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-header-section { border-bottom: 1px solid var(--jqx-border); } .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-header-section span { margin-left: 10px; } .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-header-section, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-footer { background: var(--jqx-background); } .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row[mobile] { width: 100% !important; height: 100% !important; } .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-column-info { display: grid; grid-template-columns: 25px 1fr 25px; padding: 5px 0px; line-height: normal; } .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-column-info.header { display: flex; flex-direction: row; justify-content: space-between; font-weight: bold; font-size: calc(var(--jqx-font-size) + 1px); } .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .tabs { width: 100%; height: 30px; overflow: hidden; background: var(--jqx-background); transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); display: flex; margin-bottom: 10px; } .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .tabs .tab { padding: 4px 10px; display: flex; align-items: center; justify-content: center; color: var(--jqx-surface-color); cursor: pointer; white-space: nowrap; position: relative; } .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .tabs .tab:hover { color: var(--jqx-primary); border-bottom-color: var(--jqx-primary) !important; } .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .tabs .tab.active { border-bottom: 2px solid var(--jqx-surface-color); } .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-content-container { width: 100%; } .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-prev-button:after { content: var(--jqx-icon-arrow-up); } .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-next-button:after { content: var(--jqx-icon-arrow-down); } .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-next-button { margin-right: 5px; } .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row [editor]:not([template=checkBox]) { width: auto; max-width: initial; } .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row.disable-edit .jqx-grid-edit-dialog-layout { display: block; height: 100%; } .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row.disable-edit .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row.disable-edit .jqx-grid-edit-dialog-layout .jqx-drop-down-button { pointer-events: none; cursor: default; background: var(--jqx-background); border: none; } .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row.disable-edit .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .jqx-drop-down-button-icon, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row.disable-edit .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .up, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row.disable-edit .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .down, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row.disable-edit .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .arrow, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row.disable-edit .jqx-grid-edit-dialog-layout .jqx-drop-down-button .jqx-drop-down-button-icon, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row.disable-edit .jqx-grid-edit-dialog-layout .jqx-drop-down-button .up, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row.disable-edit .jqx-grid-edit-dialog-layout .jqx-drop-down-button .down, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row.disable-edit .jqx-grid-edit-dialog-layout .jqx-drop-down-button .arrow { opacity: 0; } .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row.disable-edit .jqx-grid-edit-dialog-layout .jqx-grid-dialog-editor { background: var(--jqx-background); --jqx-surface: var(--jqx-background); pointer-events: none; border: none; border-bottom: 1px solid var(--jqx-border); } .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row.disable-edit .jqx-grid-edit-dialog-layout .jqx-grid-dialog-editor[template=image] { pointer-events: initial; height: 100px; border: none; background: initial; } .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row.disable-edit .jqx-grid-edit-dialog-layout .jqx-grid-dialog-editor[template=image] .jqx-grid-cell-editor > div { display: block !important; } .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row.disable-edit .jqx-grid-edit-dialog-layout .jqx-grid-dialog-editor[template=image] .attachment, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row.disable-edit .jqx-grid-edit-dialog-layout .jqx-grid-dialog-editor[template=image] img { width: 95px; height: 95px; } .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row.disable-edit .jqx-grid-edit-dialog-layout .jqx-grid-dialog-editor[template=image] .jqx-drop-image, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row.disable-edit .jqx-grid-edit-dialog-layout .jqx-grid-dialog-editor[template=image] .jqx-grid-icon.jqx-icon-plus { display: none !important; } .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout { display: grid; grid-template-columns: 1fr 340px; grid-template-areas: "content sidebar" "footer sidebar"; height: 100%; grid-template-rows: 1fr 45px; } .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout[mobile] { display: flex; flex-direction: column; } .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout[mobile] .jqx-grid-edit-dialog-activity-container { position: absolute; top: 45px; width: 90%; height: calc(100% - 45px); right: 0px; box-shadow: var(--jqx-elevation-8); } .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout[mobile] .jqx-grid-edit-dialog-editors-container { height: calc(100% - 45px); } .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout.hide-activity { grid-template-columns: 1fr; } .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout.hide-activity .jqx-grid-edit-dialog-activity-container { display: none; } .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-footer { grid-area: footer; display: flex; padding-inline-start: 20px; padding-inline-end: 10px; justify-content: space-between; align-items: center; flex-direction: row-reverse; } .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-footer .jqx-button { display: flex; align-items: center; height: 30px; } .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-footer .jqx-button.primary { margin-right: 10px; } .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-editors-container { padding: 20px; overflow: auto; grid-area: content; display: grid; gap: 10px; } .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-editors-container.many { display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 1rem; } .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container { background: var(--jqx-surface); border-left: 1px solid var(--jqx-border); overflow: hidden; grid-area: sidebar; } .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container > div { height: 100%; } .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .jqx-grid-edit-dialog-row { height: 100%; display: grid; grid-template-rows: 40px 40px 40px 40px 40px 1fr; } .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .jqx-user { position: relative; top: 10px; left: -3px; } .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .user-icon { height: 30px; width: 30px; border-radius: 50%; background-size: cover; background-position: center; } .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .user-icon.image:after { content: ""; } .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .user-icon:after { content: var(--jqx-icon-user); font-family: var(--jqx-font-family-icon); width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; font-size: 24px; } .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .history-header, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .comments-header { white-space: nowrap; } .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .comments-tab { height: calc(100% - 35px); } .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .history-layout, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .comments-layout { display: grid; grid-template-rows: 1fr auto; flex-direction: column; padding: 3px; height: calc(100% - 10px); overflow-x: hidden; overflow-y: auto; } .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .history-layout .no-comments, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .comments-layout .no-comments { display: flex; position: absolute; width: 100%; height: 100%; align-items: center; justify-content: center; } .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .history-layout .no-comments span, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .comments-layout .no-comments span { text-align: center; padding: 20px; } .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .history-layout .history-row, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .history-layout .comment, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .comments-layout .history-row, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .comments-layout .comment { display: grid; grid-template-columns: 30px 1fr; grid-column-gap: var(--jqx-data-view-padding); margin: var(--jqx-data-view-padding); } .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .history-layout .history-row .history-header, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .history-layout .history-row .comment-header, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .history-layout .comment .history-header, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .history-layout .comment .comment-header, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .comments-layout .history-row .history-header, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .comments-layout .history-row .comment-header, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .comments-layout .comment .history-header, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .comments-layout .comment .comment-header { display: grid; opacity: 0.75; grid-template-columns: 1fr auto auto auto; grid-column-gap: calc(var(--jqx-data-view-padding) / 2); margin-bottom: var(--jqx-data-view-padding); } .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .history-layout .history-row .history-body, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .history-layout .history-row .comment-body, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .history-layout .comment .history-body, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .history-layout .comment .comment-body, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .comments-layout .history-row .history-body, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .comments-layout .history-row .comment-body, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .comments-layout .comment .history-body, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .comments-layout .comment .comment-body { padding: 0.625rem 0.75rem; border-radius: var(--jqx-border-radius); background: var(--jqx-background); box-shadow: var(--jqx-elevation-1); overflow: hidden; overflow-wrap: break-word; display: inline-block; margin: 2px; max-width: 220px; } .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .history-layout .history-row .history-body .detail, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .history-layout .history-row .comment-body .detail, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .history-layout .comment .history-body .detail, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .history-layout .comment .comment-body .detail, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .comments-layout .history-row .history-body .detail, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .comments-layout .history-row .comment-body .detail, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .comments-layout .comment .history-body .detail, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .comments-layout .comment .comment-body .detail { margin-top: 10px; } .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .history-layout .history-row .history-body.edit, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .history-layout .history-row .comment-body.edit, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .history-layout .comment .history-body.edit, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .history-layout .comment .comment-body.edit, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .comments-layout .history-row .history-body.edit, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .comments-layout .history-row .comment-body.edit, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .comments-layout .comment .history-body.edit, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .comments-layout .comment .comment-body.edit { min-width: 200px; min-height: 50px; } .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .history-layout .history-row .history-body.edit .jqx-text-area, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .history-layout .history-row .comment-body.edit .jqx-text-area, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .history-layout .comment .history-body.edit .jqx-text-area, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .history-layout .comment .comment-body.edit .jqx-text-area, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .comments-layout .history-row .history-body.edit .jqx-text-area, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .comments-layout .history-row .comment-body.edit .jqx-text-area, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .comments-layout .comment .history-body.edit .jqx-text-area, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .comments-layout .comment .comment-body.edit .jqx-text-area { width: 100%; height: 100%; border-radius: 0px; background: var(--jqx-background); color: var(--jqx-background-color); border: none; } .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .history-layout .history-row .history-body.edit, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .history-layout .history-row .comment-body.edit, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .history-layout .comment .history-body.edit, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .history-layout .comment .comment-body.edit, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .comments-layout .history-row .history-body.edit, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .comments-layout .history-row .comment-body.edit, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .comments-layout .comment .history-body.edit, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .comments-layout .comment .comment-body.edit { box-shadow: none; } .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .history-layout .history-row .remove-button, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .history-layout .history-row .edit-button, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .history-layout .comment .remove-button, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .history-layout .comment .edit-button, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .comments-layout .history-row .remove-button, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .comments-layout .history-row .edit-button, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .comments-layout .comment .remove-button, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .comments-layout .comment .edit-button { cursor: pointer; opacity: 0; } .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .history-layout .history-row .remove-button:after, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .history-layout .history-row .edit-button:after, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .history-layout .comment .remove-button:after, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .history-layout .comment .edit-button:after, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .comments-layout .history-row .remove-button:after, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .comments-layout .history-row .edit-button:after, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .comments-layout .comment .remove-button:after, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .comments-layout .comment .edit-button:after { content: var(--jqx-icon-delete); display: flex; align-items: center; justify-content: center; height: 100%; font-family: var(--jqx-font-family-icon); cursor: pointer; } .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .history-layout .history-row .remove-button.edit-button:after, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .history-layout .history-row .edit-button.edit-button:after, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .history-layout .comment .remove-button.edit-button:after, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .history-layout .comment .edit-button.edit-button:after, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .comments-layout .history-row .remove-button.edit-button:after, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .comments-layout .history-row .edit-button.edit-button:after, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .comments-layout .comment .remove-button.edit-button:after, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .comments-layout .comment .edit-button.edit-button:after { content: var(--jqx-icon-mode-edit); } .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .history-layout .history-row .remove-button.enabled, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .history-layout .history-row .edit-button.enabled, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .history-layout .comment .remove-button.enabled, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .history-layout .comment .edit-button.enabled, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .comments-layout .history-row .remove-button.enabled, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .comments-layout .history-row .edit-button.enabled, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .comments-layout .comment .remove-button.enabled, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .comments-layout .comment .edit-button.enabled { visibility: visible; } .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .history-layout .history-row:hover .remove-button, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .history-layout .history-row:hover .edit-button, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .history-layout .comment:hover .remove-button, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .history-layout .comment:hover .edit-button, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .comments-layout .history-row:hover .remove-button, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .comments-layout .history-row:hover .edit-button, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .comments-layout .comment:hover .remove-button, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .comments-layout .comment:hover .edit-button { opacity: 1; } .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .history-layout .history, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .history-layout .comments, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .comments-layout .history, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .comments-layout .comments { overflow-y: auto; overflow-x: hidden; min-height: 180px; max-height: 600px; position: relative; } .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .history-layout .footer, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .comments-layout .footer { height: 45px; display: flex; padding: 5px; box-sizing: border-box; transition: height cubic-bezier(0.4, 0, 0.2, 1) 0.2s; } .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .history-layout .footer.focus, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .comments-layout .footer.focus { height: 70px; } .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .history-layout .footer jqx-text-area, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .comments-layout .footer jqx-text-area { width: 100%; height: 100%; border-radius: 0px; } .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .history-layout .footer jqx-button, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .comments-layout .footer jqx-button { border-top-left-radius: 0px; border-bottom-left-radius: 0px; width: 100px; display: none; border-left-color: transparent; } .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .format-layout { display: grid; grid-template-columns: 1fr 1fr 1fr; padding: 5px; width: 300px; } .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .format-layout .font-family jqx-input { height: 35px; width: 150px !important; } .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .format-layout.font-group { grid-column-gap: 10px; } .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .format-layout.font-group .format:first-child { grid-column: 1/2 span; } .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .format-layout.font-group .format:last-child { width: 100px; } .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .format-layout.button-group { background: var(--jqx-background); border: 1px solid var(--jqx-border); border-radius: var(--jqx-border-radius); height: calc(7px + var(--jqx-editor-height)); width: 175px; padding: 0px; display: flex; justify-content: space-between; } .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .format-layout.button-group .bold, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .format-layout.button-group .italic, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .format-layout.button-group .linethrough, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .format-layout.button-group .underline { font-weight: normal; display: block; height: 100%; padding: 10px; width: 100%; border-bottom: 2px solid transparent; transition: border ease-in-out 0.2s; } .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .format-layout.button-group .bold:hover, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .format-layout.button-group .italic:hover, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .format-layout.button-group .linethrough:hover, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .format-layout.button-group .underline:hover { border-bottom: 2px solid var(--jqx-primary); } .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .format-layout.button-group .bold.checked, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .format-layout.button-group .italic.checked, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .format-layout.button-group .linethrough.checked, .jqx-window.jqx-grid-dialog.jqx-grid-dialog-expand-row .jqx-grid-edit-dialog-layout .jqx-grid-edit-dialog-activity-container .format-layout.button-group .underline.checked { background: var(--jqx-primary); color: var(--jqx-primary-color); } .jqx-window.jqx-grid-dialog .col-sm-6 { padding: 0px; } .jqx-window.jqx-grid-dialog > .jqx-container .jqx-header-section .jqx-buttons-container button { border-radius: var(--jqx-border-radius); } .jqx-window.jqx-grid-dialog > .jqx-container .jqx-header-section .jqx-buttons-container button:hover { background: var(--jqx-ui-state-hover); color: var(--jqx-ui-state-color-hover); } .jqx-window.jqx-grid-dialog > .jqx-container .jqx-header-section .jqx-buttons-container button.checked { background: var(--jqx-ui-state-selected); color: var(--jqx-ui-state-color-selected); } .jqx-window.jqx-grid-dialog.open, .jqx-window.jqx-grid-dialog.view.open { transform: scale(1) !important; opacity: 1; } .jqx-window.jqx-grid-dialog .jqx-field-editor-error-label { font-size: 10px; color: var(--jqx-error); } .jqx-window.jqx-grid-dialog [editor]:not([template=checkBox]) { max-width: 150px; height: 30px; overflow: hidden; border: 1px solid var(--jqx-border); border-radius: var(--jqx-border-radius); } .jqx-window.jqx-grid-dialog [editor]:not([template=checkBox])[template=vote] { border: none; width: 200px; } .jqx-window.jqx-grid-dialog [editor]:not([template=checkBox])[template=textarea] { height: 180px; min-height: 120px; } .jqx-window.jqx-grid-dialog [editor]:not([template=checkBox])[template=textarea] jqx-text-area { width: 100% !important; height: 100%; } .jqx-window.jqx-grid-dialog [editor]:not([template=checkBox])[template=textarea] { resize: vertical; } .jqx-window.jqx-grid-dialog [editor][focus] { border-color: var(--jqx-primary); } .jqx-window.jqx-grid-dialog [editor][focus] .jqx-grid-cell-editor { border-color: var(--jqx-primary); } .jqx-window.jqx-grid-dialog [editor][template=checkBox] { height: 30px; display: flex; align-items: center; } .jqx-window.jqx-grid-dialog [editor][template=checkBox]:focus { outline: none; } .jqx-window.jqx-grid-dialog [editor][template=checkBox]:focus .jqx-grid-check-box-cell-editor { background: var(--jqx-ui-state-hover); color: var(--jqx-ui-state-color-hover); } .jqx-window.jqx-grid-dialog [editor]:not([template=checkBox]) .jqx-grid-cell-editor { width: 100%; height: 100%; } .jqx-window.jqx-grid-dialog > .jqx-container > .jqx-footer { height: auto; } .jqx-window.jqx-grid-dialog .column { display: flex; justify-content: space-between; padding: 5px; flex-direction: column; } .jqx-window.jqx-grid-dialog .column label { justify-content: flex-end; padding: 5px 0px; } .jqx-window.jqx-grid-dialog .jqx-footer .jqx-stack-layout { padding: 0px 10px; } .jqx-grid[appearance_show-row-header-edit-icon] jqx-grid-row[edit] jqx-grid-cell[header]:not([detail]) > .jqx-label, .jqx-grid[appearance_show-row-header-edit-icon] jqx-grid-row[edit] jqx-grid-cell[header]:not([detail]):last-child > .jqx-label, .jqx-grid[appearance_show-row-header-edit-icon] jqx-grid-row[edit][focus] jqx-grid-cell[header]:not([detail]) > .jqx-label, .jqx-grid[appearance_show-row-header-edit-icon] jqx-grid-row[edit][focus] jqx-grid-cell[header]:not([detail]):last-child > .jqx-label { height: 100%; font-family: var(--jqx-font-family-icon); font-style: normal; font-weight: normal; 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: 0px; } .jqx-grid[appearance_show-row-header-edit-icon] jqx-grid-row[edit] jqx-grid-cell[header]:not([detail]) > .jqx-label:before, .jqx-grid[appearance_show-row-header-edit-icon] jqx-grid-row[edit][focus] jqx-grid-cell[header]:not([detail]) > .jqx-label:before { content: var(--jqx-icon-mode-edit); background: var(--jqx-ui-state-hover); color: var(--jqx-ui-state-color-hover); position: absolute; left: 0px; width: 100%; } .jqx-grid-date-time-picker-cell-editor-drop-down-menu { padding: 0px !important; } jqx-grid[editing_enabled][selection_allow-cell-selection][selection_enabled] jqx-grid-cell[data-type=string][template=tags]:not([editor]):not(.jqx-grid-summary-row-cell):not(.jqx-add-new-row):not([readonly]):not(.jqx-readonly):hover .jqx-label, jqx-grid[editing_enabled][selection_allow-cell-selection][selection_enabled] jqx-grid-cell[data-type=string][template=tags]:not([editor]):not(.jqx-grid-summary-row-cell):not(.jqx-add-new-row):not([readonly]):not(.jqx-readonly)[focus] .jqx-label, jqx-grid[editing_enabled][selection_allow-cell-selection][selection_enabled] jqx-grid-cell[data-type=string][template=collaborator]:not([editor]):not(.jqx-grid-summary-row-cell):not(.jqx-add-new-row):not([readonly]):not(.jqx-readonly):hover .jqx-label, jqx-grid[editing_enabled][selection_allow-cell-selection][selection_enabled] jqx-grid-cell[data-type=string][template=collaborator]:not([editor]):not(.jqx-grid-summary-row-cell):not(.jqx-add-new-row):not([readonly]):not(.jqx-readonly)[focus] .jqx-label { padding-right: 30px; } jqx-grid[editing_enabled][selection_allow-cell-selection][selection_enabled] jqx-grid-cell[data-type=string][template=tags]:not([editor]):not(.jqx-grid-summary-row-cell):not(.jqx-add-new-row):not([readonly]):not(.jqx-readonly):hover .jqx-label:after, jqx-grid[editing_enabled][selection_allow-cell-selection][selection_enabled] jqx-grid-cell[data-type=string][template=tags]:not([editor]):not(.jqx-grid-summary-row-cell):not(.jqx-add-new-row):not([readonly]):not(.jqx-readonly)[focus] .jqx-label:after, jqx-grid[editing_enabled][selection_allow-cell-selection][selection_enabled] jqx-grid-cell[data-type=string][template=collaborator]:not([editor]):not(.jqx-grid-summary-row-cell):not(.jqx-add-new-row):not([readonly]):not(.jqx-readonly):hover .jqx-label:after, jqx-grid[editing_enabled][selection_allow-cell-selection][selection_enabled] jqx-grid-cell[data-type=string][template=collaborator]:not([editor]):not(.jqx-grid-summary-row-cell):not(.jqx-add-new-row):not([readonly]):not(.jqx-readonly)[focus] .jqx-label:after { content: var(--jqx-icon-arrow-down); position: absolute; right: 7px; top: calc(50% - 8px); line-height: 1; font-style: normal; font-family: var(--jqx-font-family-icon); cursor: pointer; } jqx-grid[editing_enabled][editing_allow-dynamic-buttons][selection_allow-cell-selection][selection_enabled] jqx-grid-cell[data-type=date]:not([editor]):not(.jqx-grid-summary-row-cell):not(.jqx-add-new-row):not([readonly]):not(.jqx-readonly):hover .jqx-label.align-right, jqx-grid[editing_enabled][editing_allow-dynamic-buttons][selection_allow-cell-selection][selection_enabled] jqx-grid-cell[data-type=date]:not([editor]):not(.jqx-grid-summary-row-cell):not(.jqx-add-new-row):not([readonly]):not(.jqx-readonly)[focus] .jqx-label.align-right { padding-right: 30px; } jqx-grid[editing_enabled][editing_allow-dynamic-buttons][selection_allow-cell-selection][selection_enabled] jqx-grid-cell[data-type=date]:not([editor]):not(.jqx-grid-summary-row-cell):not(.jqx-add-new-row):not([readonly]):not(.jqx-readonly):hover .jqx-label:after, jqx-grid[editing_enabled][editing_allow-dynamic-buttons][selection_allow-cell-selection][selection_enabled] jqx-grid-cell[data-type=date]:not([editor]):not(.jqx-grid-summary-row-cell):not(.jqx-add-new-row):not([readonly]):not(.jqx-readonly)[focus] .jqx-label:after { content: var(--jqx-icon-calendar); position: absolute; right: 7px; top: calc(50% - 8px); line-height: 1; font-style: normal; font-family: var(--jqx-font-family-icon); cursor: pointer; } jqx-grid[editing_enabled][selection_allow-cell-selection][selection_enabled][editing_allow-dynamic-buttons] jqx-grid-cell[data-type=number]:not([editor]):not([template]):not(.jqx-grid-summary-row-cell):not(.jqx-add-new-row):not([readonly]):not(.jqx-readonly):hover .jqx-label.align-right, jqx-grid[editing_enabled][selection_allow-cell-selection][selection_enabled][editing_allow-dynamic-buttons] jqx-grid-cell[data-type=number]:not([editor]):not([template]):not(.jqx-grid-summary-row-cell):not(.jqx-add-new-row):not([readonly]):not(.jqx-readonly)[focus] .jqx-label.align-right { padding-right: 30px; } jqx-grid[editing_enabled][selection_allow-cell-selection][selection_enabled][editing_allow-dynamic-buttons] jqx-grid-cell[data-type=number]:not([editor]):not([template]):not(.jqx-grid-summary-row-cell):not(.jqx-add-new-row):not([readonly]):not(.jqx-readonly):hover .jqx-label:after, jqx-grid[editing_enabled][selection_allow-cell-selection][selection_enabled][editing_allow-dynamic-buttons] jqx-grid-cell[data-type=number]:not([editor]):not([template]):not(.jqx-grid-summary-row-cell):not(.jqx-add-new-row):not([readonly]):not(.jqx-readonly)[focus] .jqx-label:after { content: var(--jqx-icon-arrow-down); position: absolute; right: 7px; top: calc(75% - 8px); line-height: 1; font-style: normal; font-family: var(--jqx-font-family-icon); font-size: 14px; cursor: pointer; } jqx-grid[editing_enabled][selection_allow-cell-selection][selection_enabled][editing_allow-dynamic-buttons] jqx-grid-cell[data-type=number]:not([editor]):not([template]):not(.jqx-grid-summary-row-cell):not(.jqx-add-new-row):not([readonly]):not(.jqx-readonly):hover .jqx-label:before, jqx-grid[editing_enabled][selection_allow-cell-selection][selection_enabled][editing_allow-dynamic-buttons] jqx-grid-cell[data-type=number]:not([editor]):not([template]):not(.jqx-grid-summary-row-cell):not(.jqx-add-new-row):not([readonly]):not(.jqx-readonly)[focus] .jqx-label:before { content: var(--jqx-icon-arrow-up); position: absolute; right: 7px; top: calc(25% - 8px); line-height: 1; font-style: normal; font-size: 14px; font-family: var(--jqx-font-family-icon); cursor: pointer; } [editor=checkBox] .jqx-label, [template=checkBox] .jqx-label, [checkbox] .jqx-label, [check-boxes_visible] [has-toggle-button] .jqx-label { display: flex; padding-bottom: 0px; justify-content: center; align-items: center; cursor: pointer; } [editor=checkBox] .jqx-label [checkbox], [template=checkBox] .jqx-label [checkbox], [checkbox] .jqx-label [checkbox], [check-boxes_visible] [has-toggle-button] .jqx-label [checkbox] { display: flex; padding-bottom: 0px; justify-content: center; align-items: center; cursor: pointer; } [editor=checkBox] .jqx-input:not(.jqx-grid-cell-editor), [template=checkBox] .jqx-input:not(.jqx-grid-cell-editor), [checkbox] .jqx-input:not(.jqx-grid-cell-editor), [check-boxes_visible] [has-toggle-button] .jqx-input:not(.jqx-grid-cell-editor) { width: calc(-2px + var(--jqx-check-box-default-size)); height: calc(-2px + var(--jqx-check-box-default-size)); line-height: var(--jqx-check-box-default-size); box-sizing: initial; position: relative; border-style: solid; padding: 2px; border-width: var(--jqx-border-width); border-radius: var(--jqx-border-radius); font-family: inherit; font-size: 12px; background-repeat: no-repeat; border-color: var(--jqx-border); background-color: transparent; color: var(--jqx-background-color); display: block; outline: none; } [editor=checkBox] .jqx-input:not(.jqx-grid-cell-editor):after, [template=checkBox] .jqx-input:not(.jqx-grid-cell-editor):after, [checkbox] .jqx-input:not(.jqx-grid-cell-editor):after, [check-boxes_visible] [has-toggle-button] .jqx-input:not(.jqx-grid-cell-editor):after { cursor: pointer; content: inherit; text-align: center; width: 100%; height: 100%; font-family: var(--jqx-font-family-icon); font-weight: normal; text-decoration: inherit; font-variant: normal; text-transform: none; display: inline-block; position: absolute; left: 0; top: 2px; outline: none; } [editor=checkBox] .jqx-input:not(.jqx-grid-cell-editor):hover, [template=checkBox] .jqx-input:not(.jqx-grid-cell-editor):hover, [checkbox] .jqx-input:not(.jqx-grid-cell-editor):hover, [check-boxes_visible] [has-toggle-button] .jqx-input:not(.jqx-grid-cell-editor):hover { border-color: var(--jqx-ui-state-border-hover); background-color: var(--jqx-ui-state-hover); color: var(--jqx-ui-state-color-hover); } [editor=checkBox] .jqx-input:not(.jqx-grid-cell-editor)[checked], [template=checkBox] .jqx-input:not(.jqx-grid-cell-editor)[checked], [checkbox] .jqx-input:not(.jqx-grid-cell-editor)[checked], [check-boxes_visible] [has-toggle-button] .jqx-input:not(.jqx-grid-cell-editor)[checked] { border-color: var(--jqx-ui-state-border-active); background-color: var(--jqx-ui-state-active); color: var(--jqx-ui-state-color-active); } [editor=checkBox] .jqx-input:not(.jqx-grid-cell-editor)[checked]:after, [template=checkBox] .jqx-input:not(.jqx-grid-cell-editor)[checked]:after, [checkbox] .jqx-input:not(.jqx-grid-cell-editor)[checked]:after, [check-boxes_visible] [has-toggle-button] .jqx-input:not(.jqx-grid-cell-editor)[checked]:after { content: var(--jqx-icon-check); } [editor=checkBox] .jqx-input.jqx-grid-check-box-cell-editor, [template=checkBox] .jqx-input.jqx-grid-check-box-cell-editor, [checkbox] .jqx-input.jqx-grid-check-box-cell-editor, [check-boxes_visible] [has-toggle-button] .jqx-input.jqx-grid-check-box-cell-editor { width: calc(-2px + var(--jqx-check-box-default-size)); height: calc(-2px + var(--jqx-check-box-default-size)); line-height: var(--jqx-check-box-default-size); box-sizing: initial; position: relative; border-style: solid; padding: 2px; border-width: var(--jqx-border-width); border-radius: var(--jqx-border-radius); font-family: inherit; font-size: 12px; background-repeat: no-repeat; border-color: var(--jqx-border); background-color: transparent; color: var(--jqx-background-color); display: block; outline: none; } [editor=checkBox] .jqx-input.jqx-grid-check-box-cell-editor:after, [template=checkBox] .jqx-input.jqx-grid-check-box-cell-editor:after, [checkbox] .jqx-input.jqx-grid-check-box-cell-editor:after, [check-boxes_visible] [has-toggle-button] .jqx-input.jqx-grid-check-box-cell-editor:after { cursor: pointer; content: inherit; text-align: center; width: 100%; height: 100%; font-family: var(--jqx-font-family-icon); font-weight: normal; text-decoration: inherit; font-variant: normal; text-transform: none; display: inline-block; position: absolute; left: 0; top: 2px; outline: none; } [editor=checkBox] .jqx-input.jqx-grid-check-box-cell-editor:hover, [template=checkBox] .jqx-input.jqx-grid-check-box-cell-editor:hover, [checkbox] .jqx-input.jqx-grid-check-box-cell-editor:hover, [check-boxes_visible] [has-toggle-button] .jqx-input.jqx-grid-check-box-cell-editor:hover { border-color: var(--jqx-ui-state-border-hover); background-color: var(--jqx-ui-state-hover); color: var(--jqx-ui-state-color-hover); } [editor=checkBox] .jqx-input.jqx-grid-check-box-cell-editor[checked], [template=checkBox] .jqx-input.jqx-grid-check-box-cell-editor[checked], [checkbox] .jqx-input.jqx-grid-check-box-cell-editor[checked], [check-boxes_visible] [has-toggle-button] .jqx-input.jqx-grid-check-box-cell-editor[checked] { border-color: var(--jqx-ui-state-border-active); background-color: var(--jqx-ui-state-active); color: var(--jqx-ui-state-color-active); } [editor=checkBox] .jqx-input.jqx-grid-check-box-cell-editor[checked]:after, [template=checkBox] .jqx-input.jqx-grid-check-box-cell-editor[checked]:after, [checkbox] .jqx-input.jqx-grid-check-box-cell-editor[checked]:after, [check-boxes_visible] [has-toggle-button] .jqx-input.jqx-grid-check-box-cell-editor[checked]:after { content: var(--jqx-icon-check); } jqx-grid-column[checkbox], jqx-grid-cell[checkbox] { display: flex; padding-bottom: 0px; justify-content: center; align-items: center; cursor: pointer; } jqx-grid-column[checkbox][selected] .jqx-input:not(.jqx-grid-cell-editor), jqx-grid-cell[checkbox][selected] .jqx-input:not(.jqx-grid-cell-editor) { border-color: var(--jqx-ui-state-border-active); background-color: var(--jqx-ui-state-active); color: var(--jqx-ui-state-color-active); } jqx-grid-column[checkbox][selected] .jqx-input:not(.jqx-grid-cell-editor):after, jqx-grid-cell[checkbox][selected] .jqx-input:not(.jqx-grid-cell-editor):after { content: var(--jqx-icon-check); } jqx-grid-column[checkbox][selected=indeterminate] .jqx-input:not(.jqx-grid-cell-editor):after, jqx-grid-column[checkbox][checked=indeterminate]:after, jqx-grid-cell[checkbox][selected=indeterminate] .jqx-input:not(.jqx-grid-cell-editor):after, jqx-grid-cell[checkbox][checked=indeterminate]:after { top: 0; background-color: var(--jqx-ui-state-color-active); } [has-toggle-button][selected] [checkbox] .jqx-input[checked] { border-color: var(--jqx-ui-state-border-hover); background-color: var(--jqx-ui-state-hover); color: var(--jqx-ui-state-color-hover); } [freeze][checkbox][auto-show] .jqx-input { opacity: 0; transition: opacity ease-in-out 0.2s; } [freeze][checkbox][auto-show][selected] .jqx-input { opacity: 1; border-color: var(--jqx-border); } [radioButton][selected] .jqx-input:after { content: var(--jqx-icon-radio); } [editor=checkBox] .jqx-input { left: -1px; } [editor=checkBox] .jqx-input:focus { border-color: var(--jqx-ui-state-border-active); } [editor=checkBox]:not([readonly]) .jqx-input:focus, [editor=checkBox]:not([readonly]) .jqx-input:hover { border-color: var(--jqx-ui-state-border-hover); background-color: var(--jqx-ui-state-hover); color: var(--jqx-ui-state-color-hover); } jqx-grid-row:not([selected]):not(:hover) [header][checkbox][auto-show]:not(:hover) .jqx-input { opacity: 0; transition: opacity ease-in-out 0.2s; } .jqx-grid-check-box-cell-editor.jqx-filter-input-value[checked=indeterminate]:after { margin: 14%; width: 70%; height: 70%; content: ""; background-color: var(--jqx-ui-state-color-active); box-sizing: border-box; top: 0px; border-radius: 0px; } .jqx-grid-dialog-editor[checkbox][selected=indeterminate] .jqx-input:after, .jqx-grid-dialog-editor[checkbox][checked=indeterminate] .jqx-input:after, jqx-grid-cell[checkbox][selected=indeterminate] .jqx-input:after, jqx-grid-cell[checkbox][checked=indeterminate] .jqx-input:after, jqx-grid-column[checkbox][selected=indeterminate] .jqx-input:after, jqx-grid-column[checkbox][checked=indeterminate] .jqx-input:after { margin: 14%; width: 70%; height: 70%; content: ""; background-color: var(--jqx-ui-state-color-active); box-sizing: border-box; top: 0px; border-radius: 0px; } .jqx-grid-dialog-editor div[checkbox] .jqx-input[checked=indeterminate]:after, jqx-grid-cell div[checkbox] .jqx-input[checked=indeterminate]:after, jqx-grid-column div[checkbox] .jqx-input[checked=indeterminate]:after { margin: 14%; width: 70% !important; height: 70% !important; content: ""; background-color: var(--jqx-ui-state-color-active); box-sizing: border-box; top: 0px !important; border-radius: 0px; } .jqx-grid-cell-editor.jqx-grid-number-input-cell-editor .jqx-input { width: calc(100% - var(--jqx-editor-addon-width)); border: none; padding: var(--jqx-editor-label-padding); resize: none; border-radius: 0px; background: inherit; color: inherit; } .jqx-grid-cell-editor.jqx-grid-number-input-cell-editor .jqx-input { text-align: right; height: 100%; } .jqx-grid-cell-editor.jqx-grid-number-input-cell-editor .jqx-input[type=number] { -moz-appearance: textfield; -webkit-appearance: textfield; } .jqx-grid-cell-editor.jqx-grid-number-input-cell-editor .jqx-input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .jqx-slider-editor input[type=range] { -webkit-appearance: none; width: 100%; outline: none; background: transparent; } .jqx-slider-editor input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; } .jqx-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(--jqx-primary); background-size: 18px 12px; box-shadow: 0 0 1px rgba(0, 0, 0, 0.06), 0 2px 2px rgba(0, 0, 20, 0.1); transition: box-shadow 0.2s; } .jqx-slider-editor input[type=range]:focus::-webkit-slider-thumb { box-shadow: 0 0 1px rgba(0, 0, 0, 0.06), 0 4px 2px rgba(0, 0, 20, 0.06), 0 4px 12px rgba(0, 0, 20, 0.25); } .jqx-slider-editor input[type=range]::-moz-range-thumb { width: 32px; height: 32px; border: 0; border-radius: 32px; background: var(--jqx-primary); background-size: 18px 12px; box-shadow: 0 0 1px rgba(0, 0, 0, 0.06), 0 2px 2px rgba(0, 0, 20, 0.1); transition: box-shadow 0.2s; } .jqx-slider-editor input[type=range]:focus::-moz-range-thumb { box-shadow: 0 0 1px rgba(0, 0, 0, 0.06), 0 4px 2px rgba(0, 0, 20, 0.06), 0 4px 12px rgba(0, 0, 20, 0.25); } .jqx-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, 0.25); } .jqx-slider-editor input[type=range]:focus::-webkit-slider-runnable-track { box-shadow: 0 0 0 1px rgba(204, 204, 204, 0.75); } .jqx-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, 0.25); } .jqx-slider-editor input[type=range]:focus::-moz-range-track { box-shadow: 0 0 0 1px rgba(204, 204, 204, 0.75); } .jqx-grid-column-menu[right-to-left].jqx-animate { transform-origin: top right; } .jqx-grid-column-menu[right-to-left] .jqx-filter-panel .jqx-filter-panel-button-container { flex-direction: row-reverse; } .jqx-grid-column-menu[right-to-left] .jqx-filter-panel .jqx-filter-panel-operator-list { position: relative; } .jqx-grid[grouped][right-to-left] jqx-grid-row[group] > .jqx-grid-cell-container > jqx-grid-cell div[content] { flex-direction: row-reverse; } .jqx-grid[tree][right-to-left] jqx-grid-row[level] > .jqx-grid-cell-container > jqx-grid-cell div[content] { flex-direction: row-reverse; } .jqx-grid[tree][right-to-left] jqx-grid-row[level] > .jqx-grid-cell-container > jqx-grid-cell div[content] > div[checkbox]:not(.jqx-hidden) { margin-left: 5px; margin-right: initial; } .jqx-grid[right-to-left] .jqx-grid-toolbar .jqx-data-view-header { display: flex; flex-direction: row-reverse; } .jqx-grid[right-to-left] .jqx-grid-toolbar .jqx-data-view-header .jqx-data-view-search-button { left: 6px; width: 24px; right: initial; } .jqx-grid[right-to-left] jqx-grid-column .jqx-add-new-column { border-left: 1px solid var(--jqx-border); border-right: none; } .jqx-grid[right-to-left] jqx-grid-cell.jqx-add-new-column { border-left: 1px solid transparent !important; border-right: 1px solid var(--jqx-border); } .jqx-grid[right-to-left] jqx-scroll-bar:after { left: initial; right: 100%; } .jqx-grid[right-to-left] jqx-scroll-bar:before { left: 0px; } .jqx-grid[right-to-left] jqx-scroll-bar[orientation=vertical] { right: initial; left: 0px; border-right: 1px solid var(--jqx-border); border-left: initial; } .jqx-grid[right-to-left] jqx-grid-cell.jqx-add-new-row:not([header]) { z-index: 5; } .jqx-grid[right-to-left] jqx-grid-column { direction: ltr; } .jqx-grid[right-to-left] jqx-grid-column .jqx-label.jqx-animate { transition: left 0.25s ease, width 0.25s ease; } .jqx-grid[right-to-left] jqx-grid-column .jqx-label.one { left: var(--jqx-grid-column-buttons-width); } .jqx-grid[right-to-left] jqx-grid-column .jqx-label.two { left: calc(2 * var(--jqx-grid-column-buttons-width)); } .jqx-grid[right-to-left] jqx-grid-column .jqx-label.three { left: calc(3 * var(--jqx-grid-column-buttons-width)); } .jqx-grid[right-to-left] jqx-grid-column .jqx-label.four { left: calc(4 * var(--jqx-grid-column-buttons-width)); } .jqx-grid[right-to-left] jqx-grid-column .jqx-label.five { left: calc(5 * var(--jqx-grid-column-buttons-width)); } .jqx-grid[right-to-left] jqx-grid-column .jqx-label.six { left: calc(6 * var(--jqx-grid-column-buttons-width)); } .jqx-grid[right-to-left] jqx-grid-column[has-icon] .jqx-label.one { width: calc(100% - 2 * var(--jqx-grid-column-buttons-width)); left: calc(1 * var(--jqx-grid-column-buttons-width)); } .jqx-grid[right-to-left] jqx-grid-column[has-icon] .jqx-label.two { width: calc(100% - 3 * var(--jqx-grid-column-buttons-width)); left: calc(2 * var(--jqx-grid-column-buttons-width)); } .jqx-grid[right-to-left] jqx-grid-column[has-icon] .jqx-label.three { width: calc(100% - 4 * var(--jqx-grid-column-buttons-width)); left: calc(3 * var(--jqx-grid-column-buttons-width)); } .jqx-grid[right-to-left] jqx-grid-column[has-icon] .jqx-label.four { width: calc(100% - 5 * var(--jqx-grid-column-buttons-width)); left: calc(4 * var(--jqx-grid-column-buttons-width)); } .jqx-grid[right-to-left] jqx-grid-column[has-icon] .jqx-label.five { width: calc(100% - 6 * var(--jqx-grid-column-buttons-width)); left: calc(5 * var(--jqx-grid-column-buttons-width)); } .jqx-grid[right-to-left] jqx-grid-column[has-icon] .jqx-label.six { width: calc(100% - 7 * var(--jqx-grid-column-buttons-width)); left: calc(6 * var(--jqx-grid-column-buttons-width)); } .jqx-grid[right-to-left] jqx-grid-column[has-icon] .jqx-grid-icon.column-icon.show { right: 0px; position: absolute; } .jqx-grid[right-to-left] jqx-grid-column .jqx-buttons-group { right: initial; left: 0px; flex-direction: row-reverse; transform: translateX(calc(0.1px - var(--jqx-grid-column-buttons-width))); } .jqx-grid[right-to-left] jqx-grid-column .jqx-buttons-group.action { transform: translateX(0px); } .jqx-grid[right-to-left] jqx-grid-column .jqx-action-button { border-right: 1px solid var(--jqx-border); border-left: initial; } .jqx-grid[right-to-left] jqx-grid-column.top-far-corner { left: 0px; right: initial; } .jqx-grid[right-to-left] jqx-grid-cell[has-toggle-button] .jqx-label, .jqx-grid[right-to-left] jqx-grid-cell[has-toggle-button] div[indent] { flex-direction: row-reverse; } .jqx-grid[right-to-left] jqx-grid-cell:not(.jqx-grid-column-border):not(.jqx-grid-column-border-collapse):before, .jqx-grid[right-to-left] jqx-grid-column:not(.jqx-grid-column-border):not(.jqx-grid-column-border-collapse):before, .jqx-grid[right-to-left] .jqx-grid-column-group:not(.jqx-grid-column-border):not(.jqx-grid-column-border-collapse):before { right: 0px; left: initial; } /* --- Scheduler Style Color Input --- */ .jqx-color-input-drop-down-menu.jqx-grid-color-input .grid-samples-container { grid-template-columns: repeat(2, minmax(0, 1fr)); } .jqx-color-input-drop-down-menu.jqx-grid-color-input:not([animation=none]) .default-samples-container div { transition: transform 0.2s ease-in-out; } .jqx-color-input-drop-down-menu.jqx-grid-color-input .default-samples-container div { position: relative; border-radius: 50%; border: initial; transform: scale(0.95); } .jqx-color-input-drop-down-menu.jqx-grid-color-input .default-samples-container div.selected { transform: scale(1); } .jqx-color-input-drop-down-menu.jqx-grid-color-input .default-samples-container div.selected:not(.no-color):after { content: var(--jqx-icon-check); width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: flex; justify-content: center; align-items: center; font-family: var(--jqx-font-family-icon); color: var(--jqx-secondary-color); border-radius: inherit; } .jqx-grid-color-input { --jqx-input-drop-down-menu-width: auto; } .jqx-grid-column-header.jqx-columns-sticky { border-top: 1px solid var(--jqx-border); border-bottom: 1px solid var(--jqx-border); margin-top: -2px; } jqx-grid[appearance_allow-hover] jqx-grid-cell:not([focus]):hover:not(.jqx-add-new-column) { background: var(--jqx-ui-state-hover); color: var(--jqx-ui-state-color-hover); } jqx-grid[appearance_allow-hover] jqx-grid-cell:not([focus]):hover:not(.jqx-add-new-column) .jqx-label { background: var(--jqx-ui-state-hover) !important; color: var(--jqx-ui-state-color-hover) !important; } jqx-grid[appearance_allow-hover]:not([selection_allow-cell-selection]) jqx-grid-row:hover jqx-grid-cell:not([focus]) { background: var(--jqx-ui-state-hover); color: var(--jqx-ui-state-color-hover); } jqx-grid[appearance_allow-hover]:not([selection_allow-cell-selection]) jqx-grid-row:hover jqx-grid-cell:not([focus]) .jqx-label { background: var(--jqx-ui-state-hover) !important; color: var(--jqx-ui-state-color-hover) !important; } jqx-grid:not([selection_allow-cell-selection])[focus][appearance_show-selection-on-top] jqx-grid-row[focus] jqx-grid-cell:not([editor]):not([header]), jqx-grid:not([selection_allow-cell-selection])[focus][appearance_show-selection-on-top] jqx-grid-row[focus] jqx-grid-cell:not([editor]):not([header]) .jqx-label { background: rgba(var(--jqx-primary-rgb), 0.7) !important; color: var(--jqx-primary-color) !important; border-color: var(--jqx-primary) !important; } jqx-grid:not([selection_allow-cell-selection])[focus] jqx-grid-row[focus] > .jqx-grid-cell-container jqx-grid-cell:not([editor]):not([header]), jqx-grid:not([selection_allow-cell-selection])[focus] jqx-grid-row[focus] > .jqx-grid-cell-container jqx-grid-cell:not([editor]):not([header]) .jqx-label:not([style]) { background: rgba(var(--jqx-primary-rgb), 0.7) !important; color: var(--jqx-primary-color) !important; border-color: var(--jqx-primary) !important; } jqx-grid:not([selection_allow-cell-selection])[focus] jqx-grid-row[focus] > .jqx-grid-cell-container jqx-grid-cell:not([editor]):not([header]):before { background: var(--jqx-primary); } jqx-grid[selection_allow-cell-selection] jqx-grid-row[focus] jqx-grid-cell[focus]:not([editor]):not([header]) { background: var(--jqx-primary); color: var(--jqx-primary-color); border-color: var(--jqx-primary); } .jqx-grid[appearance_allow-hover]:not([selection_allow-cell-selection]) jqx-grid-row:hover jqx-grid-cell:not(.jqx-add-new-column) { background: var(--jqx-ui-state-hover); color: var(--jqx-ui-state-color-hover); cursor: default; } .jqx-grid[appearance_show-row-header-select-icon][selection_enabled][selection_allow-row-header-selection] jqx-grid-row:hover jqx-grid-cell[header]:not([group]):not([detail]) > .jqx-label, .jqx-grid[appearance_show-row-header-select-icon][selection_enabled][selection_allow-row-header-selection] jqx-grid-row:hover jqx-grid-cell[header]:not([group]):not([detail])[selected] > .jqx-label { height: 100%; font-family: var(--jqx-font-family-icon); font-style: normal; font-weight: normal; 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: 0px; } .jqx-grid[appearance_show-row-header-select-icon][selection_enabled][selection_allow-row-header-selection] jqx-grid-row:hover jqx-grid-cell[header]:not([group]):not([detail]) > .jqx-label:before, .jqx-grid[appearance_show-row-header-select-icon][selection_enabled][selection_allow-row-header-selection] jqx-grid-row:hover jqx-grid-cell[header]:not([group]):not([detail])[selected] > .jqx-label:before { content: var(--jqx-icon-check-empty); background: var(--jqx-surface); color: var(--jqx-surface-color); position: absolute; left: 0px; width: 100%; } .jqx-grid[appearance_show-row-header-select-icon][selection_enabled][selection_allow-row-header-selection] jqx-grid-row:hover jqx-grid-cell[header]:not([group]):not([detail]):last-child > .jqx-label, .jqx-grid[appearance_show-row-header-select-icon][selection_enabled][selection_allow-row-header-selection] jqx-grid-row:hover jqx-grid-cell[header]:not([group]):not([detail])[selected]:last-child > .jqx-label { height: 100%; font-family: var(--jqx-font-family-icon); font-style: normal; font-weight: normal; 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: 0px; } .jqx-grid[appearance_show-row-header-select-icon][selection_enabled][selection_allow-row-header-selection] jqx-grid-row:hover jqx-grid-cell[header]:not([group]):not([detail])[selected] > .jqx-label:before, .jqx-grid[appearance_show-row-header-select-icon][selection_enabled][selection_allow-row-header-selection] jqx-grid-row:hover jqx-grid-cell[header]:not([group]):not([detail])[selected][selected] > .jqx-label:before { content: var(--jqx-icon-check-squared); transform: rotate(0deg); } .jqx-grid[appearance_show-row-header-select-icon][selection_enabled][selection_allow-row-header-selection] jqx-grid-row:hover jqx-grid-cell[header]:not([group]):not([detail])[selected] > .jqx-label:before { font-family: var(--jqx-font-family-icon); font-style: normal; font-weight: normal; content: var(--jqx-icon-check-squared); transform: rotate(0deg); } .jqx-grid[appearance_show-row-header-select-icon][selection_enabled][selection_allow-row-header-selection] jqx-grid-row jqx-grid-cell[header]:not([group]):not([detail]):hover > .jqx-label, .jqx-grid[appearance_show-row-header-select-icon][selection_enabled][selection_allow-row-header-selection] jqx-grid-row jqx-grid-cell[header]:not([group]):not([detail])[selected] > .jqx-label { height: 100%; font-family: var(--jqx-font-family-icon); font-style: normal; font-weight: normal; 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: 0px; } .jqx-grid[appearance_show-row-header-select-icon][selection_enabled][selection_allow-row-header-selection] jqx-grid-row jqx-grid-cell[header]:not([group]):not([detail]):hover > .jqx-label:before, .jqx-grid[appearance_show-row-header-select-icon][selection_enabled][selection_allow-row-header-selection] jqx-grid-row jqx-grid-cell[header]:not([group]):not([detail])[selected] > .jqx-label:before { content: var(--jqx-icon-check-empty); background: var(--jqx-ui-state-hover); color: var(--jqx-ui-state-color-hover); position: absolute; left: 0px; width: 100%; } .jqx-grid[appearance_show-row-header-select-icon][selection_enabled][selection_allow-row-header-selection] jqx-grid-row jqx-grid-cell[header]:not([group]):not([detail]):hover:last-child > .jqx-label, .jqx-grid[appearance_show-row-header-select-icon][selection_enabled][selection_allow-row-header-selection] jqx-grid-row jqx-grid-cell[header]:not([group]):not([detail])[selected]:last-child > .jqx-label { height: 100%; font-family: var(--jqx-font-family-icon); font-style: normal; font-weight: normal; 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: 0px; } .jqx-grid[appearance_show-row-header-select-icon][selection_enabled][selection_allow-row-header-selection] jqx-grid-row jqx-grid-cell[header]:not([group]):not([detail]):hover[selected] > .jqx-label:before, .jqx-grid[appearance_show-row-header-select-icon][selection_enabled][selection_allow-row-header-selection] jqx-grid-row jqx-grid-cell[header]:not([group]):not([detail])[selected][selected] > .jqx-label:before { content: var(--jqx-icon-check-squared); transform: rotate(0deg); } .jqx-grid[appearance_show-row-header-select-icon][selection_enabled][selection_allow-row-header-selection] jqx-grid-row jqx-grid-cell[header]:not([group]):not([detail])[selected] > .jqx-label:before { font-family: var(--jqx-font-family-icon); font-style: normal; font-weight: normal; content: var(--jqx-icon-check-squared); transform: rotate(0deg); } .marching-ants::after { content: ""; position: absolute; top: -3px; left: -3px; right: -3px; bottom: -3px; pointer-events: none; background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 50%), linear-gradient(175deg, rgba(255, 255, 255, 0.6) 50%, rgba(var(--jqx-primary-rgb), 0.6) 50%), linear-gradient(175deg, rgba(255, 255, 255, 0.6) 50%, rgba(var(--jqx-primary-rgb), 0.6) 50%), linear-gradient(90deg, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 50%); background-position: top, left, right, bottom; background-repeat: repeat-x, repeat-y, repeat-y, repeat-x; background-size: 10px 2px, 2px 10px, 2px 10px, 10px 2px; animation: marqueeAnimate var(--duration, 12s) linear infinite; mask-composite: exclude; -webkit-mask-composite: destination-out; box-sizing: border-box; border: 2px solid transparent; } .marching-ants::before { content: ""; position: absolute; top: -3px; left: -3px; right: -3px; bottom: -3px; pointer-events: none; background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.6) 50%, rgba(var(--jqx-primary-rgb), 0.6) 50%), linear-gradient(175deg, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 50%), linear-gradient(175deg, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 50%), linear-gradient(90deg, rgba(255, 255, 255, 0.6) 50%, rgba(var(--jqx-primary-rgb), 0.6) 50%); background-position: top, left, right, bottom; background-repeat: repeat-x, repeat-y, repeat-y, repeat-x; background-size: 10px 2px, 2px 10px, 2px 10px, 10px 2px; animation: marqueeAnimate var(--alt-duration, 12s) linear infinite; mask-composite: exclude; -webkit-mask-composite: destination-out; box-sizing: border-box; border: 2px solid transparent; } @keyframes marqueeAnimate { 0% { background-position: 0 0, 0 0, 100% 0, 0 100%; } 100% { background-position: 100% 0, 0 -100%, 100% 100%, -100% 100%; } } @charset "UTF-8"; jqx-sort-panel, jqx-column-panel, jqx-multi-column-filter-panel, jqx-colors-panel, jqx-grid-ai-panel, jqx-formatting-panel { display: block; min-width: 345px; width: var(--jqx-grid-panel-default-width); height: var(--jqx-grid-panel-default-height); padding: var(--jqx-grid-panel-padding); overflow: auto; background: var(--jqx-background); color: var(--jqx-background-color); font-family: var(--jqx-font-family); font-size: var(--jqx-font-size); } jqx-colors-panel .tabs { width: 100%; height: 30px; overflow: hidden; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); display: flex; margin-bottom: 5px; } jqx-colors-panel .tabs .tab { width: 50%; width: 50%; display: flex; align-items: center; justify-content: center; text-transform: uppercase; color: var(--jqx-background-color); cursor: pointer; } jqx-colors-panel .tabs .tab label { cursor: pointer; } jqx-colors-panel .tabs .tab.active { color: var(--jqx-primary); border-bottom: 2px solid var(--jqx-primary); font-weight: bold; } jqx-group-panel { display: block; min-width: 345px; height: var(--jqx-grid-panel-default-height); padding: var(--jqx-grid-panel-padding); overflow: auto; background: var(--jqx-background); color: var(--jqx-background-color); font-family: var(--jqx-font-family); font-size: var(--jqx-font-size); width: var(--jqx-grid-panel-default-width); } jqx-group-panel.jqx-mobile { width: 345px; } .jqx-view-panel { display: block; background: var(--jqx-background); color: var(--jqx-background-color); font-family: var(--jqx-font-family); font-size: var(--jqx-font-size); min-height: 400px; height: 400px; max-height: 450px; width: 250px; padding: 0; overflow: hidden; } .jqx-view-panel jqx-list-box input { border: none; border-radius: 0px; border-bottom: 2px solid var(--jqx-border); } .jqx-sort-panel .jqx-grid-panel-item.dragged, .jqx-group-panel .jqx-grid-panel-item.dragged { opacity: 0.7; } .jqx-sort-panel .jqx-grid-panel-label-by, .jqx-group-panel .jqx-grid-panel-label-by { padding: 5px; width: 60px; flex-grow: 1; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .jqx-sort-panel .jqx-grid-panel-field-container, .jqx-group-panel .jqx-grid-panel-field-container { height: 100%; width: 100px; flex-grow: 3; } .jqx-sort-panel .jqx-grid-panel-field-selection, .jqx-group-panel .jqx-grid-panel-field-selection { height: 100%; width: 100%; } .jqx-sort-panel .jqx-grid-panel-from, .jqx-group-panel .jqx-grid-panel-from { display: flex; justify-content: center; padding: 5px; width: 40px; flex-grow: 1; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .jqx-sort-panel .jqx-grid-panel-direction, .jqx-group-panel .jqx-grid-panel-direction { display: flex; width: 115px; flex-grow: 2; height: 100%; background-color: var(--jqx-surface); border-top-right-radius: var(--jqx-border-top-right-radius); border-top-left-radius: var(--jqx-border-top-left-radius); border-bottom-left-radius: var(--jqx-border-bottom-left-radius); border-bottom-right-radius: var(--jqx-border-bottom-right-radius); } .jqx-sort-panel .jqx-grid-panel-direction:focus, .jqx-group-panel .jqx-grid-panel-direction:focus { outline: none; box-shadow: 0 0 0 1px var(--jqx-primary); } .jqx-sort-panel .jqx-grid-panel-direction > div, .jqx-group-panel .jqx-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(--jqx-border-top-right-radius); border-top-left-radius: var(--jqx-border-top-left-radius); border-bottom-left-radius: var(--jqx-border-bottom-left-radius); border-bottom-right-radius: var(--jqx-border-bottom-right-radius); } .jqx-sort-panel .jqx-grid-panel-direction > div.selected, .jqx-group-panel .jqx-grid-panel-direction > div.selected { background-color: var(--jqx-primary); color: var(--jqx-primary-color); } .jqx-sort-panel.jqx-mobile jqx-input { max-width: 150px; } .jqx-sort-panel .jqx-grid-panel-maintain-sort { justify-content: flex-end; margin-top: 5px; } .jqx-sort-panel .jqx-grid-panel-buttons-container { align-items: flex-start !important; } .jqx-sort-panel .jqx-grid-panel-maintain-sort-button { font-family: var(--jqx-font-family); font-size: var(--jqx-font-size); } .jqx-sort-panel .jqx-grid-panel-maintain-sort-button::before { font-family: var(--jqx-font-family-icon); content: var(--jqx-icon-check-empty); margin-right: 5px; } .jqx-sort-panel .jqx-grid-panel-maintain-sort-button[active] { color: var(--jqx-primary); } .jqx-sort-panel .jqx-grid-panel-maintain-sort-button[active]::before { font-family: var(--jqx-font-family-icon); content: var(--jqx-icon-check-squared); } .jqx-view-panel .jqx-grid-panel-item-close-button, .jqx-sort-panel .jqx-grid-panel-item-close-button, .jqx-group-panel .jqx-grid-panel-item-close-button, .jqx-colors-panel .jqx-grid-panel-item-close-button, .jqx-grid-ai-panel .jqx-grid-panel-item-close-button, .jqx-multi-column-filter-panel .jqx-grid-panel-item-close-button { display: flex; justify-content: center; width: 20px; } .jqx-view-panel .jqx-grid-panel-item-close-button:after, .jqx-sort-panel .jqx-grid-panel-item-close-button:after, .jqx-group-panel .jqx-grid-panel-item-close-button:after, .jqx-colors-panel .jqx-grid-panel-item-close-button:after, .jqx-grid-ai-panel .jqx-grid-panel-item-close-button:after, .jqx-multi-column-filter-panel .jqx-grid-panel-item-close-button:after { content: var(--jqx-icon-close); font-family: var(--jqx-font-family-icon); } @media (pointer: coarse) { .jqx-view-panel .jqx-grid-panel-item-close-button:after, .jqx-sort-panel .jqx-grid-panel-item-close-button:after, .jqx-group-panel .jqx-grid-panel-item-close-button:after, .jqx-colors-panel .jqx-grid-panel-item-close-button:after, .jqx-grid-ai-panel .jqx-grid-panel-item-close-button:after, .jqx-multi-column-filter-panel .jqx-grid-panel-item-close-button:after { font-size: 16px; } } .jqx-view-panel .jqx-grid-panel-item-close-button:hover, .jqx-sort-panel .jqx-grid-panel-item-close-button:hover, .jqx-group-panel .jqx-grid-panel-item-close-button:hover, .jqx-colors-panel .jqx-grid-panel-item-close-button:hover, .jqx-grid-ai-panel .jqx-grid-panel-item-close-button:hover, .jqx-multi-column-filter-panel .jqx-grid-panel-item-close-button:hover { color: var(--jqx-ui-state-color-selected); background: var(--jqx-ui-state-selected); border-color: var(--jqx-ui-state-selected); cursor: pointer; } .jqx-view-panel .jqx-grid-panel-item-close-button:active, .jqx-view-panel .jqx-grid-panel-item-close-button:focus, .jqx-sort-panel .jqx-grid-panel-item-close-button:active, .jqx-sort-panel .jqx-grid-panel-item-close-button:focus, .jqx-group-panel .jqx-grid-panel-item-close-button:active, .jqx-group-panel .jqx-grid-panel-item-close-button:focus, .jqx-colors-panel .jqx-grid-panel-item-close-button:active, .jqx-colors-panel .jqx-grid-panel-item-close-button:focus, .jqx-grid-ai-panel .jqx-grid-panel-item-close-button:active, .jqx-grid-ai-panel .jqx-grid-panel-item-close-button:focus, .jqx-multi-column-filter-panel .jqx-grid-panel-item-close-button:active, .jqx-multi-column-filter-panel .jqx-grid-panel-item-close-button:focus { color: var(--jqx-primary); } .jqx-view-panel .jqx-grid-panel-item-close-button:focus, .jqx-sort-panel .jqx-grid-panel-item-close-button:focus, .jqx-group-panel .jqx-grid-panel-item-close-button:focus, .jqx-colors-panel .jqx-grid-panel-item-close-button:focus, .jqx-grid-ai-panel .jqx-grid-panel-item-close-button:focus, .jqx-multi-column-filter-panel .jqx-grid-panel-item-close-button:focus { outline: none; } .jqx-view-panel .jqx-grid-panel-item, .jqx-sort-panel .jqx-grid-panel-item, .jqx-group-panel .jqx-grid-panel-item, .jqx-colors-panel .jqx-grid-panel-item, .jqx-grid-ai-panel .jqx-grid-panel-item, .jqx-multi-column-filter-panel .jqx-grid-panel-item { display: flex; align-items: center; margin-top: calc(var(--jqx-grid-panel-vertical-offset) / 2); margin-bottom: calc(var(--jqx-grid-panel-vertical-offset) / 2); width: calc(100% - var(--jqx-sortable-handle-size)); height: var(--jqx-grid-panel-item-height); min-height: var(--jqx-grid-panel-item-height); background-color: var(--jqx-background); } .jqx-view-panel[close-button-position=right] .jqx-grid-panel-item-close-button, .jqx-sort-panel[close-button-position=right] .jqx-grid-panel-item-close-button, .jqx-group-panel[close-button-position=right] .jqx-grid-panel-item-close-button, .jqx-colors-panel[close-button-position=right] .jqx-grid-panel-item-close-button, .jqx-grid-ai-panel[close-button-position=right] .jqx-grid-panel-item-close-button, .jqx-multi-column-filter-panel[close-button-position=right] .jqx-grid-panel-item-close-button { order: 1; } .jqx-view-panel[close-button-position=right] .jqx-sortable-container, .jqx-sort-panel[close-button-position=right] .jqx-sortable-container, .jqx-group-panel[close-button-position=right] .jqx-sortable-container, .jqx-colors-panel[close-button-position=right] .jqx-sortable-container, .jqx-grid-ai-panel[close-button-position=right] .jqx-sortable-container, .jqx-multi-column-filter-panel[close-button-position=right] .jqx-sortable-container { align-items: flex-end; } .jqx-sort-panel .jqx-grid-panel-container-footer, .jqx-group-panel .jqx-grid-panel-container-footer, .jqx-column-panel .jqx-grid-panel-container-footer, .jqx-colors-panel .jqx-grid-panel-container-footer, .jqx-grid-ai-panel .jqx-grid-panel-container-footer, .jqx-multi-column-filter-panel .jqx-grid-panel-container-footer { display: flex; flex-direction: row; justify-content: space-between; } .jqx-sort-panel .jqx-grid-panel-buttons-container, .jqx-group-panel .jqx-grid-panel-buttons-container, .jqx-column-panel .jqx-grid-panel-buttons-container, .jqx-colors-panel .jqx-grid-panel-buttons-container, .jqx-grid-ai-panel .jqx-grid-panel-buttons-container, .jqx-multi-column-filter-panel .jqx-grid-panel-buttons-container { width: auto; display: flex; flex-direction: row; align-items: center; justify-content: space-between; } .jqx-sort-panel .jqx-grid-panel-buttons-container span, .jqx-group-panel .jqx-grid-panel-buttons-container span, .jqx-column-panel .jqx-grid-panel-buttons-container span, .jqx-colors-panel .jqx-grid-panel-buttons-container span, .jqx-grid-ai-panel .jqx-grid-panel-buttons-container span, .jqx-multi-column-filter-panel .jqx-grid-panel-buttons-container span { display: flex; align-items: center; padding: 5px; } .jqx-sort-panel .jqx-grid-panel-buttons-container span:hover, .jqx-group-panel .jqx-grid-panel-buttons-container span:hover, .jqx-column-panel .jqx-grid-panel-buttons-container span:hover, .jqx-colors-panel .jqx-grid-panel-buttons-container span:hover, .jqx-grid-ai-panel .jqx-grid-panel-buttons-container span:hover, .jqx-multi-column-filter-panel .jqx-grid-panel-buttons-container span:hover { color: var(--jqx-ui-state-color-selected); background: var(--jqx-ui-state-selected); border-color: var(--jqx-ui-state-selected); cursor: pointer; } .jqx-sort-panel .jqx-grid-panel-buttons-container span:focus, .jqx-group-panel .jqx-grid-panel-buttons-container span:focus, .jqx-column-panel .jqx-grid-panel-buttons-container span:focus, .jqx-colors-panel .jqx-grid-panel-buttons-container span:focus, .jqx-grid-ai-panel .jqx-grid-panel-buttons-container span:focus, .jqx-multi-column-filter-panel .jqx-grid-panel-buttons-container span:focus { outline: none; } .jqx-sort-panel .jqx-sortable-container { margin-bottom: var(--jqx-grid-panel-padding); } .jqx-sort-panel .jqx-sortable-container:empty:after { content: attr(no-sorting); margin-top: calc(var(--jqx-grid-panel-vertical-offset) / 2); margin-bottom: calc(var(--jqx-grid-panel-vertical-offset) / 2); opacity: 0.7; } .jqx-sort-panel .jqx-grid-panel-container-footer > jqx-input { min-width: 215px; width: 40%; } .jqx-sort-panel .jqx-grid-panel-container-footer > jqx-input.jqx-mobile { min-width: 100px; width: 120px; } .jqx-sort-panel .jqx-grid-panel-item-close-button { display: flex; align-items: center; padding: 5px; } .jqx-sort-panel .jqx-grid-panel-buttons-container .jqx-grid-panel-apply-button { margin-left: 5px; } .jqx-colors-panel > .jqx-container, .jqx-grid-ai-panel > .jqx-container, .jqx-multi-column-filter-panel > .jqx-container { display: grid; grid-auto-rows: 1fr max-content; grid-row-gap: var(--jqx-grid-panel-padding); } .jqx-colors-panel.jqx-colors-panel > .jqx-container, .jqx-grid-ai-panel.jqx-colors-panel > .jqx-container, .jqx-multi-column-filter-panel.jqx-colors-panel > .jqx-container { grid-auto-rows: auto; } .jqx-colors-panel .jqx-filter-panel-items-container, .jqx-grid-ai-panel .jqx-filter-panel-items-container, .jqx-multi-column-filter-panel .jqx-filter-panel-items-container { overflow: auto; padding-top: 10px; } .jqx-colors-panel .jqx-filter-panel-items-container:empty:after, .jqx-grid-ai-panel .jqx-filter-panel-items-container:empty:after, .jqx-multi-column-filter-panel .jqx-filter-panel-items-container:empty:after { margin-top: calc(var(--jqx-grid-panel-vertical-offset) / 2); margin-bottom: calc(var(--jqx-grid-panel-vertical-offset) / 2); opacity: 0.7; content: attr(no-filters); } .jqx-colors-panel .jqx-filter-panel-add-filter-button, .jqx-grid-ai-panel .jqx-filter-panel-add-filter-button, .jqx-multi-column-filter-panel .jqx-filter-panel-add-filter-button { display: flex; align-items: center; padding: 5px; } .jqx-colors-panel .jqx-filter-panel-add-filter-button:hover, .jqx-grid-ai-panel .jqx-filter-panel-add-filter-button:hover, .jqx-multi-column-filter-panel .jqx-filter-panel-add-filter-button:hover { color: var(--jqx-ui-state-color-selected); background: var(--jqx-ui-state-selected); border-color: var(--jqx-ui-state-selected); cursor: pointer; } .jqx-colors-panel .jqx-filter-panel-add-filter-button:focus, .jqx-grid-ai-panel .jqx-filter-panel-add-filter-button:focus, .jqx-multi-column-filter-panel .jqx-filter-panel-add-filter-button:focus { outline: none; } .jqx-colors-panel .jqx-grid-panel-item, .jqx-grid-ai-panel .jqx-grid-panel-item, .jqx-multi-column-filter-panel .jqx-grid-panel-item { width: 100%; display: grid; columns: 5; grid-template-columns: var(--jqx-multi-column-filter-panel-template-columns); grid-gap: var(--jqx-grid-panel-padding); } .jqx-colors-panel .jqx-grid-panel-item > *, .jqx-grid-ai-panel .jqx-grid-panel-item > *, .jqx-multi-column-filter-panel .jqx-grid-panel-item > * { width: 100%; } .jqx-colors-panel .jqx-grid-panel-item-close-button, .jqx-grid-ai-panel .jqx-grid-panel-item-close-button, .jqx-multi-column-filter-panel .jqx-grid-panel-item-close-button { display: flex; align-items: center; padding: 5px; } .jqx-colors-panel .jqx-grid-panel-buttons-container .jqx-grid-panel-apply-button, .jqx-grid-ai-panel .jqx-grid-panel-buttons-container .jqx-grid-panel-apply-button, .jqx-multi-column-filter-panel .jqx-grid-panel-buttons-container .jqx-grid-panel-apply-button { margin-left: 5px; } .jqx-colors-panel[close-button-position=right], .jqx-grid-ai-panel[close-button-position=right], .jqx-multi-column-filter-panel[close-button-position=right] { --jqx-multi-column-filter-panel-template-columns: 60px 2fr 3fr 3fr 15px; } .jqx-kanban-column-panel .jqx-grid-panel-item::after, .jqx-kanban-column-panel .jqx-grid-panel-item::before { display: none !important; } .jqx-group-panel .jqx-sortable-container jqx-column-panel jqx-sortable { margin-bottom: var(--jqx-grid-panel-padding); } .jqx-group-panel .jqx-sortable-container:empty:after { margin-top: calc(var(--jqx-grid-panel-vertical-offset) / 2); margin-bottom: calc(var(--jqx-grid-panel-vertical-offset) / 2); opacity: 0.7; content: attr(no-grouping); } .jqx-group-panel .jqx-grid-panel-container-footer > jqx-input { min-width: 215px; width: 40%; } .jqx-group-panel .jqx-grid-panel-container-footer > jqx-input.jqx-mobile { min-width: 100px; width: 120px; } .jqx-group-panel .jqx-grid-panel-item-close-button { display: flex; align-items: center; padding: 5px; } .jqx-group-panel .jqx-grid-panel-buttons-container .jqx-grid-panel-apply-button { margin-left: 5px; } .jqx-group-panel .jqx-grid-panel-from, .jqx-group-panel .jqx-grid-panel-direction { display: none; } .jqx-group-panel .jqx-grid-panel-expand-collapse { justify-content: flex-end; margin-top: 10px; margin-bottom: 10px; } .jqx-group-panel .jqx-group-panel-expand-button { margin-left: 15px; } .jqx-group-panel .jqx-group-panel-expand-button[active], .jqx-group-panel .jqx-group-panel-collapse-button[active] { color: var(--jqx-primary); } .jqx-format-panel .jqx-grid-panel-buttons-container { width: auto; display: flex; flex-direction: row; align-items: center; justify-content: space-between; } .jqx-format-panel .jqx-grid-panel-buttons-container span { display: flex; align-items: center; padding: 5px; } .jqx-format-panel .jqx-grid-panel-buttons-container span:hover { color: var(--jqx-ui-state-color-selected); background: var(--jqx-ui-state-selected); border-color: var(--jqx-ui-state-selected); cursor: pointer; } .jqx-format-panel .jqx-grid-panel-buttons-container .jqx-grid-panel-apply-button { margin-left: 5px; } .jqx-format-panel.jqx-grid-panel-container-footer { display: flex; flex-direction: row; height: 50px; justify-content: center; padding: 15px; } .jqx-column-panel { --jqx-grid-panel-item-height: 20px; min-width: 100px; } .jqx-column-panel > .jqx-container, .jqx-column-panel.jqx-container { display: flex; flex-direction: column; } .jqx-column-panel jqx-sortable { flex: 5; min-height: 50px; overflow: auto; max-height: var(--jqx-column-panel-drop-down-height); } .jqx-column-panel .jqx-column-panel-find-container { display: flex; align-items: center; border-bottom: 2px solid var(--jqx-border); height: var(--jqx-editor-height); position: relative; } .jqx-column-panel .jqx-column-panel-find-container input { outline: none; border: none; width: calc(100% - 16px); height: 100%; font-family: var(--jqx-font-family); font-size: var(--jqx-font-size); background: var(--jqx-grid-panel-background); color: var(--jqx-grid-panel-color); } .jqx-column-panel .jqx-column-panel-find-container .clear-button { width: 16px; cursor: pointer; } .jqx-column-panel .jqx-column-panel-find-container .clear-button:after { content: var(--jqx-icon-cancel); font-family: var(--jqx-font-family-icon); display: flex; align-items: center; justify-content: center; } .jqx-column-panel .jqx-column-panel-find-container.no-results:after { content: attr(no-results); position: absolute; top: calc(100% + 10px); } .jqx-column-panel .jqx-column-panel-label { margin-left: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .jqx-column-panel .jqx-column-panel-label.icon { position: relative; padding-left: var(--jqx-column-icon-size); } .jqx-column-panel .jqx-column-panel-label.icon:after { content: ""; position: absolute; left: 0; top: 0; width: var(--jqx-column-icon-size); height: 100%; background-repeat: no-repeat; background-position: center; } .jqx-column-panel .jqx-grid-panel-buttons-container { width: 100%; justify-content: center; margin-top: 3px; } .jqx-column-panel .jqx-grid-panel-buttons-container .jqx-grid-panel-apply-button { margin-left: 5px; } .jqx-column-panel .jqx-grid-panel-container-footer { display: grid; grid-template-columns: auto auto; } .jqx-column-panel .toggle-visibility { width: 16px; height: 16px; font-family: var(--jqx-font-family-icon); cursor: pointer; display: flex; align-items: center; justify-content: center; } .jqx-column-panel .toggle-visibility:after { content: var(--jqx-icon-visibility); } .jqx-column-panel .toggle-visibility:focus { outline: none; color: var(--jqx-primary); } .jqx-column-panel .toggle-visibility.disable-toggle { pointer-events: none; opacity: 0.5; } .jqx-column-panel .toggle-visibility.hidden:after { content: var(--jqx-icon-visibility-off); } .jqx-column-panel .clear-button:focus { outline: none; color: var(--jqx-primary); } .jqx-column-panel .jqx-grid-panel-item { display: flex; align-items: center; margin-top: calc(var(--jqx-grid-panel-vertical-offset) / 2); margin-bottom: calc(var(--jqx-grid-panel-vertical-offset) / 2); width: calc(100% - var(--jqx-sortable-handle-size)); height: var(--jqx-grid-panel-item-height); min-height: var(--jqx-grid-panel-item-height); background-color: var(--jqx-background); } .jqx-column-panel .jqx-grid-panel-item.group:before, .jqx-column-panel .jqx-grid-panel-item.group:after { opacity: 0 !important; pointer-events: none; } .jqx-column-panel .jqx-grid-panel-item.indent { padding-left: 12px; } .jqx-grid-panel-reset-button { text-decoration: underline; display: flex; align-items: center; cursor: pointer; text-transform: uppercase; } .jqx-grid-panel-cancel-button { background: var(--jqx-surface); color: var(--jqx-surface-color); border: 1px solid var(--jqx-border); border-radius: var(--jqx-border-radius); padding: 5px 8px; min-width: 80px; text-transform: uppercase; display: flex; justify-content: center; } .jqx-grid-panel-apply-button { border-radius: var(--jqx-border-radius); padding: 5px 8px; min-width: 80px; text-transform: uppercase; display: flex; justify-content: center; background: var(--jqx-primary); color: var(--jqx-primary-color); border: 1px solid var(--jqx-primary); } /* --- Right-To-Left --- */ /* DataView */ .jqx-data-view-header { padding: 3px; position: relative; display: grid; grid-template-areas: "states views customize filter sort format details delete . search"; grid-template-columns: minmax(0px, max-content) minmax(0px, 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: 5px; grid-template-rows: 100%; background: var(--jqx-surface); color: var(--jqx-surface-color); } .jqx-data-view-header-button { display: flex; align-items: center; justify-content: center; padding: 5px; padding-left: 25px; height: 30px; margin-top: 5px; position: relative; cursor: pointer; border-top-right-radius: var(--jqx-border-top-right-radius); border-top-left-radius: var(--jqx-border-top-left-radius); border-bottom-left-radius: var(--jqx-border-bottom-left-radius); border-bottom-right-radius: var(--jqx-border-bottom-right-radius); } .jqx-data-view-header-button:after { position: absolute; font-family: var(--jqx-font-family-icon); left: 8px; } .jqx-data-view-header-button:active { color: var(--jqx-ui-state-color-active); background-color: var(--jqx-ui-state-active); } .jqx-data-view-header-button:focus { outline: 1px solid var(--jqx-primary); } .jqx-data-view-header-button:hover { color: var(--jqx-ui-state-color-hover); background-color: var(--jqx-ui-state-hover); } .jqx-data-view-header-button[aria-expanded=true] { color: var(--jqx-ui-state-color-selected); background-color: var(--jqx-ui-state-selected); border-color: var(--jqx-ui-state-border-selected); } .jqx-data-view-header-button.jqx-data-view-search-button:active { color: var(--jqx-ui-state-active); } .jqx-data-view-header-button > div { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .jqx-data-view-header-drop-down { position: absolute; background-color: var(--jqx-background); box-shadow: var(--jqx-elevation-8); z-index: 9999; height: auto; transform: scaleY(1); transform-origin: top; opacity: 1; } .jqx-data-view-header-drop-down.jqx-mobile { --jqx-font-size: 12px; } .jqx-data-view-header-drop-down jqx-colors-panel, .jqx-data-view-header-drop-down jqx-column-panel, .jqx-data-view-header-drop-down jqx-grid-ai-panel, .jqx-data-view-header-drop-down jqx-multi-column-filter-panel, .jqx-data-view-header-drop-down jqx-sort-panel { width: 100%; border: none; } .jqx-data-view-header-drop-down.jqx-visibility-hidden { transform: scaleY(0); opacity: 0; } .jqx-data-view-header-drop-down.customize-panel { width: var(--jqx-data-view-customize-panel-width); } .jqx-data-view-header-drop-down.colors-panel, .jqx-data-view-header-drop-down.filter-panel { width: var(--jqx-data-view-filter-panel-width); } .jqx-data-view-header-drop-down.format-panel { max-height: 320px; overflow: auto; } .jqx-data-view-header-drop-down.sort-panel { width: var(--jqx-data-view-sort-panel-width); } .jqx-data-view-header-drop-down.search-panel { width: var(--jqx-data-view-search-panel-width); padding: var(--jqx-data-view-padding); } .jqx-data-view-header-drop-down.search-panel .jqx-data-view-search-box { display: grid; grid-template-columns: 1fr 16px; grid-template-rows: 100%; grid-gap: 2px; align-items: center; } .jqx-data-view-header-drop-down.search-panel .jqx-data-view-search-box.matches { grid-template-columns: 1fr max-content 16px 16px 16px; } .jqx-data-view-header-drop-down.search-panel .jqx-data-view-search-box.matches .jqx-data-view-search-next, .jqx-data-view-header-drop-down.search-panel .jqx-data-view-search-box.matches .jqx-data-view-search-prev { display: flex; } .jqx-data-view-header-drop-down.search-panel .jqx-data-view-search-box.matches .jqx-data-view-search-label { display: block; } .jqx-data-view-header-drop-down.search-panel .jqx-data-view-search-box.no-matches { grid-template-columns: 1fr max-content 16px; } .jqx-data-view-header-drop-down.search-panel .jqx-data-view-search-box.no-matches .jqx-data-view-search-label { display: block; } .jqx-data-view-header-drop-down.search-panel input { outline: none; border: none; min-width: 0; padding: 0; font-family: var(--jqx-font-family); font-size: var(--jqx-font-size); background: var(--jqx-background); color: var(--jqx-background-color); } .jqx-data-view-search-box div:focus { outline: 1px solid var(--jqx-primary); } .jqx-data-view-search-button { grid-area: search; margin-right: 0; padding: 0; } .jqx-data-view-search-button:after { content: var(--jqx-icon-search); } .jqx-data-view-customize-button { grid-area: customize; } .jqx-data-view-customize-button:after { content: var(--jqx-icon-visibility-off); } .jqx-data-view-customize-button.hidden { background-color: #D0F0FD; color: #039BE5; } .jqx-data-view-ai-button.mobile { min-width: 30px; } .jqx-data-view-ai-button.mobile:after { content: "✨︎"; display: block; } .jqx-data-view-ai-button.hidden { background-color: #D0F0FD; color: #039BE5; } .jqx-data-view-delete-button { grid-area: delete; } .jqx-data-view-delete-button:after { content: var(--jqx-icon-delete); } .jqx-data-view-details-button { grid-area: details; } .jqx-data-view-details-button:after { content: var(--jqx-icon-resize-full); } .jqx-data-view-filter-button { grid-area: filter; } .jqx-data-view-filter-button:after { content: var(--jqx-icon-add-filter); } .jqx-data-view-filter-button.filtered { background-color: #D1F7C4; color: #0B8043; } .jqx-data-view-bold-button { grid-area: details; } .jqx-data-view-bold-button:before { content: " "; position: absolute; left: -2px; height: 80%; background: var(--jqx-background-color); opacity: 0.7; width: 1px; } .jqx-data-view-bold-button:after { content: var(--jqx-icon-bold); } .jqx-data-view-italic-button { grid-area: details; } .jqx-data-view-italic-button:after { content: var(--jqx-icon-italic); } .jqx-data-view-underline-button { grid-area: details; } .jqx-data-view-underline-button:after { content: var(--jqx-icon-underline); } .jqx-data-view-strikethrough-button { grid-area: details; } .jqx-data-view-strikethrough-button:after { content: var(--jqx-icon-font); text-decoration: line-through; } .jqx-data-view-fontsize-button { grid-area: details; } .jqx-data-view-fontsize-button:before { font-family: var(--jqx-font-family-icon); content: var(--jqx-icon-arrow-down); position: initial; } .jqx-data-view-fontsize-button:after { content: var(--jqx-icon-fontsize); } .jqx-data-view-fontfamily-button { grid-area: details; } .jqx-data-view-fontfamily-button:before { font-family: var(--jqx-font-family-icon); content: var(--jqx-icon-arrow-down); position: initial; } .jqx-data-view-fontfamily-button:after { content: var(--jqx-icon-font); } .jqx-data-view-background-button { grid-area: details; } .jqx-data-view-background-button:after { content: var(--jqx-icon-color-background); border-bottom: 2px solid var(--jqx-surface-color); } .jqx-data-view-textcolor-button { grid-area: details; } .jqx-data-view-textcolor-button:after { content: var(--jqx-icon-font); border-bottom: 2px solid var(--jqx-surface-color); } .jqx-data-view-sort-button { grid-area: sort; } .jqx-data-view-sort-button:after { content: var(--jqx-icon-sort); } .jqx-data-view-sort-button.sorted { background-color: #FFEBB6; color: #B88707; } .jqx-data-view-label-button { grid-area: group; } .jqx-data-view-label-button:after { content: var(--jqx-icon-font); } .jqx-data-view-label-button.grouped { background-color: #FFDAF6; color: #FF36C2; } .jqx-data-view-resource-button, .jqx-data-view-group-button { grid-area: group; } .jqx-data-view-resource-button:after, .jqx-data-view-group-button:after { content: var(--jqx-icon-group); } .jqx-data-view-resource-button.grouped, .jqx-data-view-group-button.grouped { background-color: #D0F0FD; color: #039BE5; } .jqx-data-view-resource-button.scheduler.grouped, .jqx-data-view-group-button.scheduler.grouped { background-color: #FFCFC9; color: #D50000; } .jqx-data-view-resource-button.scheduler:after, .jqx-data-view-group-button.scheduler:after { content: var(--jqx-icon-scheduler); } .jqx-data-view-format-button { grid-area: format; } .jqx-data-view-format-button:after { content: var(--jqx-icon-table); } .jqx-data-view-format-button.formatted { background-color: var(--jqx-primary); color: var(--jqx-primary-color); } .jqx-data-view-colors-button { grid-area: format; } .jqx-data-view-colors-button:after { content: var(--jqx-icon-table); } .jqx-data-view-colors-button.formatted { background-color: #ECE1FD; color: #8C47FF; } .jqx-data-view-download-button { grid-area: download; } .jqx-data-view-download-button:after { content: var(--jqx-icon-arrow-down); position: initial; margin-left: 8px; } .jqx-data-view-download-button:before { font-family: var(--jqx-font-family-icon); left: 8px; content: var(--jqx-icon-download-alt); position: absolute; } .jqx-data-view-download-button.formatted { background-color: var(--jqx-primary); color: var(--jqx-primary-color); } .jqx-data-view-views-button { grid-area: views; } .jqx-data-view-views-button:after { content: var(--jqx-icon-arrow-down); content: var(--jqx-icon-arrow-down); position: initial; margin-left: 8px; } .jqx-data-view-views-button:before { font-family: var(--jqx-font-family-icon); left: 8px; content: var(--jqx-icon-grid-alt); position: absolute; } .jqx-data-view-views-button.kanban:before { content: var(--jqx-icon-kanban-alt); } .jqx-data-view-views-button.card:before { content: var(--jqx-icon-card-alt); } .jqx-data-view-views-button.formatted { background-color: var(--jqx-primary); color: var(--jqx-primary-color); } .jqx-data-view-states-button { grid-area: states; border-right: 1px solid var(--jqx-border); padding-right: 5px; } .jqx-data-view-states-button:before { font-family: var(--jqx-font-family-icon); left: 8px; content: var(--jqx-icon-menu); position: absolute; } .jqx-data-view-states-button.formatted { background-color: var(--jqx-primary); color: var(--jqx-primary-color); } .jqx-grid-toolbar .jqx-data-view-header { height: 100%; display: flex; } .jqx-grid-toolbar .jqx-data-view-header-button { margin-right: 0px; } .jqx-grid-toolbar .jqx-data-view-header-button.jqx-disabled { pointer-events: none; opacity: 0.5; } .jqx-grid-toolbar .jqx-data-view-search-button { position: absolute; right: 30px; top: 0px; } .jqx-card-view .jqx-data-view-header-button, .jqx-kanban .jqx-data-view-header-button { margin-top: 0; height: 100%; } .jqx-card-view .jqx-data-view-header-button.jqx-data-view-search-button, .jqx-kanban .jqx-data-view-header-button.jqx-data-view-search-button { min-width: 30px; } .jqx-card-view:not([animation=none]) .jqx-data-view-header-drop-down, .jqx-kanban:not([animation=none]) .jqx-data-view-header-drop-down { transition: height 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .jqx-data-view-header-drop-down[owner] { transition: height 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .jqx-data-view-search-label { display: none; font-size: calc(var(--jqx-font-size) - 3px); opacity: 0.7; } .jqx-data-view-search-prev, .jqx-data-view-search-next { align-items: center; justify-content: center; cursor: pointer; font-family: var(--jqx-font-family-icon); font-size: 10px; display: none; background-color: var(--jqx-surface); color: var(--jqx-surface-color); height: 100%; } .jqx-data-view-search-prev:hover, .jqx-data-view-search-next:hover { color: var(--jqx-ui-state-color-hover); background-color: var(--jqx-ui-state-hover); } .jqx-data-view-search-prev:active, .jqx-data-view-search-next:active { color: var(--jqx-ui-state-color-active); background-color: var(--jqx-ui-state-active); } .jqx-data-view-search-prev:after { content: var(--jqx-icon-arrow-up); } .jqx-data-view-search-next:after { content: var(--jqx-icon-arrow-down); } .jqx-data-view-search-close { display: flex; align-items: center; justify-content: center; cursor: pointer; font-family: var(--jqx-font-family-icon); font-size: 10px; color: var(--jqx-background-color); } .jqx-data-view-search-close:after { content: var(--jqx-icon-close); } .jqx-data-view-search-close:hover { color: var(--jqx-ui-state-color-hover); background-color: var(--jqx-ui-state-hover); } .jqx-data-view-search-close:active { color: var(--jqx-ui-state-color-active); background-color: var(--jqx-ui-state-active); } .jqx-data-view-found { outline: 4px solid var(--jqx-outline); outline-offset: -4px; } .jqx-data-view-highlighted { box-shadow: 0px 0px 23px 1px var(--jqx-primary); outline: 4px solid var(--jqx-primary); outline-offset: -4px; } [header-position=bottom] .jqx-data-view-header-drop-down { transform-origin: bottom; } /* jqx-formatting-panel */ .jqx-formatting-panel { width: var(--jqx-formatting-panel-default-width); min-height: 150px; padding: 0; overflow: visible; z-index: 999; } .jqx-formatting-panel > .jqx-container { position: relative; min-height: inherit; } .jqx-formatting-panel .jqx-formatting-panel-items-container { width: 100%; height: 100%; padding: 0 calc(2 * var(--jqx-grid-panel-padding)); overflow: auto; } .jqx-formatting-panel .jqx-formatting-panel-item > .format-label { grid-area: format-label; justify-self: end; } .jqx-formatting-panel .jqx-formatting-panel-item > .font-family-input { grid-area: font-family-input; } .jqx-formatting-panel .jqx-formatting-panel-item > .font-size-input { grid-area: font-size-input; } .jqx-formatting-panel .jqx-formatting-panel-item > .popup-button { display: flex; align-items: center; border: var(--jqx-border-width) solid var(--jqx-border); width: 100%; height: 100%; grid-area: popup-button; justify-content: center; cursor: pointer; font-size: 20px; font-weight: bold; } .jqx-formatting-panel .jqx-formatting-panel-item > .preview { display: flex; align-items: center; border: var(--jqx-border-width) solid var(--jqx-border); width: 100%; height: 100%; grid-area: preview; padding: 0 var(--jqx-grid-panel-padding); } .jqx-formatting-panel .jqx-add-new-button { display: block; position: absolute; bottom: calc(var(--jqx-grid-panel-padding) - 5px); right: calc(var(--jqx-grid-panel-padding) - 5px); width: var(--jqx-formatting-panel-add-new-button-size); height: var(--jqx-formatting-panel-add-new-button-size); border-radius: 50%; background-color: var(--jqx-primary); color: var(--jqx-primary-color); cursor: pointer; opacity: 0.3; } .jqx-formatting-panel .jqx-add-new-button:after { content: "+"; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 35px; } .jqx-formatting-panel .jqx-add-new-button:hover, .jqx-formatting-panel .jqx-add-new-button:focus { opacity: 1; transform: scale(1.2, 1.2); } .jqx-formatting-panel .jqx-add-new-button:focus { outline: none; } .jqx-formatting-panel .close-button:focus, .jqx-formatting-panel .popup-button:focus { outline: var(--jqx-border-width) solid var(--jqx-ui-state-border-active); } .jqx-formatting-panel.scroll .jqx-add-new-button { right: calc(12px + var(--jqx-grid-panel-padding)); border-radius: 50%; } .jqx-formatting-panel:not([animation=none]) .jqx-add-new-button { transition: transform cubic-bezier(0.81, 0.27, 0, 0.93) 0.5s, opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .jqx-formatting-panel-item { display: grid; grid-template-columns: auto 3fr 2fr var(--jqx-formatting-panel-row-height) 1fr 0.5fr 1fr 1fr; grid-template-rows: var(--jqx-formatting-panel-row-height) var(--jqx-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(--jqx-grid-panel-padding); border-bottom: var(--jqx-border-width) solid var(--jqx-border); width: 100%; padding: calc(2 * var(--jqx-grid-panel-padding)) 0; } .jqx-formatting-panel-item:last-child { border-bottom: none; } .jqx-formatting-panel-item > * { min-width: 0; max-width: none; min-height: 0; max-height: none; width: auto; align-self: center; justify-self: center; } .jqx-formatting-panel-item > .value-label { grid-area: value-label; justify-self: end; } .jqx-formatting-panel-item > .columns-input { grid-area: columns-input; } .jqx-formatting-panel-item > .condition-input { grid-area: condition-input; } .jqx-formatting-panel-item > .first-value { grid-area: first-value; } .jqx-formatting-panel-item > .ampersand { grid-area: ampersand; display: none; } .jqx-formatting-panel-item > .second-value { grid-area: second-value; display: none; } .jqx-formatting-panel-item > .close-button { grid-area: close-button; position: relative; width: 16px; height: 16px; } .jqx-formatting-panel-item > .close-button:after { content: var(--jqx-icon-close); display: flex; align-items: center; justify-content: center; position: absolute; width: 100%; height: 100%; font-size: 20px; font-family: "jqx-icons"; opacity: 0.5; cursor: pointer; } .jqx-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"; } .jqx-formatting-panel-item.between > .ampersand, .jqx-formatting-panel-item.between > .second-value { display: block; } .jqx-formatting-panel-popup { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: var(--jqx-formatting-panel-row-height) var(--jqx-formatting-panel-row-height) auto var(--jqx-formatting-panel-row-height); grid-template-areas: "header header" "code input" "colors colors" "apply cancel"; gap: var(--jqx-grid-panel-padding); position: absolute; border: var(--jqx-border-width) solid var(--jqx-border); border-top-right-radius: var(--jqx-border-top-right-radius); border-top-left-radius: var(--jqx-border-top-left-radius); border-bottom-left-radius: var(--border-bottom-left-radius); border-bottom-right-radius: var(--jqx-border-bottom-right-radius); width: var(--jqx-formatting-panel-popup-width); padding: var(--jqx-grid-panel-padding); background-color: var(--jqx-background); box-shadow: var(--jqx-elevation-8); z-index: 9999; opacity: 1; transform: scale(1); transform-origin: top; font-family: var(--jqx-font-family); font-size: var(--jqx-font-size); } .jqx-formatting-panel-popup > .color-code { border: var(--jqx-border-width) solid var(--jqx-border); width: 100%; height: 100%; grid-area: code; display: flex; align-items: center; box-sizing: border-box; padding: var(--jqx-grid-panel-padding); color: var(--jqx-background-color); } .jqx-formatting-panel-popup .header { grid-area: header; display: flex; border: var(--jqx-border-width) solid var(--jqx-border); } .jqx-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: bold; cursor: pointer; color: var(--jqx-background-color); } .jqx-formatting-panel-popup .header > div:focus { outline: var(--jqx-border-width) solid var(--jqx-ui-state-border-active); } .jqx-formatting-panel-popup .header > div:first-child { border-right: var(--jqx-border-width) solid var(--jqx-border); } .jqx-formatting-panel-popup .header > .selected { background-color: var(--jqx-ui-state-selected); color: var(--jqx-ui-state-color-selected); } .jqx-formatting-panel-popup input { border: var(--jqx-border-width) solid var(--jqx-border); width: 100%; height: 100%; grid-area: input; background-color: var(--jqx-background); cursor: pointer; } .jqx-formatting-panel-popup input:focus { border-color: var(--jqx-ui-state-border-focus); outline: var(--jqx-border-width) solid var(--jqx-ui-state-border-active); } .jqx-formatting-panel-popup .colors-container { grid-area: colors; display: grid; grid-template-columns: repeat(8, 1fr); grid-auto-rows: var(--jqx-formatting-panel-color-box-height); gap: 3px; width: 100%; } .jqx-formatting-panel-popup .colors-container:focus { outline: var(--jqx-border-width) solid var(--jqx-ui-state-border-active); } .jqx-formatting-panel-popup .colors-container > div { border: var(--jqx-border-width) solid var(--jqx-border); cursor: pointer; } .jqx-formatting-panel-popup .colors-container > div.selected { position: relative; display: flex; align-items: center; justify-content: center; } .jqx-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: "jqx-icons"; cursor: pointer; border-radius: 50%; content: var(--jqx-icon-check); background-color: var(--jqx-background-color); color: var(--jqx-background); width: var(--jqx-formatting-panel-color-box-height); opacity: 1; } .jqx-formatting-panel-popup > jqx-button { --jqx-button-padding: 0; } .jqx-formatting-panel-popup > .apply { grid-area: apply; } .jqx-formatting-panel-popup > .cancel { grid-area: cancel; } .jqx-formatting-panel-popup:not([animation=none]) { transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) -out, opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) -out, visibility 0.2s cubic-bezier(0.4, 0, 0.2, 1) -out; } .jqx-formatting-panel-popup.jqx-visibility-hidden { transform: scale(0); opacity: 0; } /* --- Right-To-Left --- */ .jqx-column-panel[right-to-left] .jqx-column-panel-find-container { direction: rtl; } .jqx-column-panel[right-to-left] .jqx-grid-panel-buttons-container { flex-direction: row-reverse; } .jqx-column-panel[right-to-left] .jqx-grid-panel-item { right: var(--jqx-sortable-handle-size); justify-content: space-between; } .jqx-column-panel[right-to-left] .toggle-visibility { order: 1; } .jqx-group-panel[right-to-left] .jqx-group-panel-expand-button, .jqx-group-panel[right-to-left] .jqx-group-panel-collapse-button, .jqx-group-panel[right-to-left] .jqx-group-panel-cancel-button, .jqx-group-panel[right-to-left] .jqx-group-panel-apply-button, .jqx-group-panel[right-to-left] .jqx-grid-panel-label-by, .jqx-group-panel[right-to-left] .jqx-grid-panel-from { direction: rtl; } .jqx-group-panel[right-to-left] .jqx-group-panel-expand-button { margin-left: initial; margin-right: 5px; } .jqx-group-panel[right-to-left] .jqx-grid-panel-label-by { order: 3; } .jqx-group-panel[right-to-left] .jqx-grid-panel-field-container { order: 2; } .jqx-group-panel[right-to-left] .jqx-grid-panel-from { order: 1; } .jqx-group-panel[right-to-left] .jqx-grid-panel-direction { flex-direction: row-reverse; } .jqx-group-panel[right-to-left] .jqx-grid-panel-buttons-container { flex-direction: row-reverse; } .jqx-group-panel[right-to-left] .jqx-sortable .jqx-sortable-items-parent { direction: unset; } .jqx-group-panel[right-to-left][close-button-position=right] .jqx-grid-panel-item-close-button { order: 4; } .jqx-sort-panel[right-to-left] .jqx-grid-panel-apply-button, .jqx-sort-panel[right-to-left] .jqx-grid-panel-cancel-button { direction: rtl; } .jqx-sort-panel[right-to-left] .jqx-grid-panel-label-by { order: 3; } .jqx-sort-panel[right-to-left] .jqx-grid-panel-field-container { order: 2; } .jqx-sort-panel[right-to-left] .jqx-grid-panel-from { order: 1; } .jqx-sort-panel[right-to-left] .jqx-grid-panel-direction { flex-direction: row-reverse; } .jqx-sort-panel[right-to-left] .jqx-grid-panel-buttons-container { flex-direction: row-reverse; } .jqx-sort-panel[right-to-left] .jqx-sortable .jqx-sortable-items-parent { direction: unset; } .jqx-sort-panel[right-to-left][close-button-position=right] .jqx-grid-panel-item-close-button { order: 4; } .jqx-multi-column-filter-panel[right-to-left] .jqx-grid-panel-apply-button, .jqx-multi-column-filter-panel[right-to-left] .jqx-grid-panel-cancel-button, .jqx-multi-column-filter-panel[right-to-left] .jqx-filter-panel-add-filter-button, .jqx-multi-column-filter-panel[right-to-left] .jqx-grid-panel-item-close-button + div, .jqx-multi-column-filter-panel[right-to-left] .jqx-filter-panel-items-container:empty { direction: rtl; } .jqx-multi-column-filter-panel[right-to-left] .jqx-grid-panel-item > .jqx-grid-panel-item-close-button + div { order: 3; } .jqx-multi-column-filter-panel[right-to-left] .jqx-grid-panel-item > .jqx-input:nth-of-type(1) { order: 2; } .jqx-multi-column-filter-panel[right-to-left] .jqx-grid-panel-item > .jqx-input:nth-of-type(2) { order: 1; } .jqx-multi-column-filter-panel[right-to-left] .jqx-grid-panel-buttons-container { flex-direction: row-reverse; } .jqx-multi-column-filter-panel[right-to-left][close-button-position=right] .jqx-grid-panel-item-close-button { order: 4; } [right-to-left] .jqx-data-view-header-drop-down.search-panel .jqx-data-view-search-box { direction: rtl; } [right-to-left] .jqx-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] .jqx-data-view-header-button:not(.jqx-data-view-search-button) { direction: rtl; padding-left: 5px; padding-right: 25px; } [right-to-left] .jqx-data-view-header-button:after { right: 5px; left: initial; } /* jqx-formatting-panel */ .jqx-formatting-panel[right-to-left] { direction: rtl; } .jqx-formatting-panel[right-to-left] .jqx-add-new-button { left: calc(var(--jqx-grid-panel-padding) - 5px); right: unset; } .jqx-formatting-panel[right-to-left].scroll .jqx-add-new-button { left: calc(12px + var(--jqx-grid-panel-padding)); } .jqx-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(--jqx-font-family); } .jqx-input-group jqx-input .jqx-drop-down-button { border-left: none; } .jqx-input-group jqx-button[focus] { z-index: 3; } .jqx-input-group > .jqx-input-group-prepend > jqx-button, .jqx-input-group > .jqx-input-group-prepend > .jqx-input-group-text { border-top-right-radius: 0; border-bottom-right-radius: 0; } .jqx-input-group > .jqx-input-group-prepend:first-child > jqx-button:not(:first-child), .jqx-input-group > .jqx-input-group-prepend:first-child > .jqx-input-group-text:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; } .jqx-input-group > .jqx-input-group-prepend:not(:first-child) > jqx-button, .jqx-input-group > .jqx-input-group-prepend:not(:first-child) > .jqx-input-group-text { border-top-left-radius: 0; border-bottom-left-radius: 0; } .jqx-input-group > .jqx-input-group-append > jqx-button, .jqx-input-group > .jqx-input-group-append > .jqx-input-group-text { border-top-left-radius: 0; border-bottom-left-radius: 0; } .jqx-input-group > .jqx-input-group-append:last-child > jqx-button:not(:last-child):not(.dropdown-toggle), .jqx-input-group > .jqx-input-group-append:last-child > .jqx-input-group-text:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; } .jqx-input-group > .jqx-input-group-append:not(:last-child) > jqx-button, .jqx-input-group > .jqx-input-group-append:not(:last-child) > .jqx-input-group-text { border-top-right-radius: 0; border-bottom-right-radius: 0; } .jqx-input-group > .custom-file, .jqx-input-group > .custom-select, .jqx-input-group > .form-control { position: relative; flex: 1 1 auto; width: 1%; margin-bottom: 0; } .jqx-input-group > .custom-file:focus, .jqx-input-group > .custom-select:focus, .jqx-input-group > .form-control:focus { z-index: 3; } .jqx-input-group > .custom-select:not(:first-child), .jqx-input-group > .form-control:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; } .jqx-input-group > .custom-select:not(:last-child), .jqx-input-group > .form-control:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; } .jqx-input-group > .form-control[focus] { z-index: 3; } .jqx-input-group > .custom-file + .custom-file, .jqx-input-group > .custom-file + .custom-select, .jqx-input-group > .custom-file + .form-control, .jqx-input-group > .custom-select + .custom-file, .jqx-input-group > .custom-select + .custom-select, .jqx-input-group > .custom-select + .form-control, .jqx-input-group > .form-control + .custom-file, .jqx-input-group > .form-control + .custom-select, .jqx-input-group > .form-control + .form-control { margin-left: -1px; } .jqx-input-group-append, .jqx-input-group-prepend { display: -webkit-box; display: -ms-flexbox; display: flex; box-sizing: border-box; height: auto; } .jqx-input-group-append > jqx-button, .jqx-input-group-prepend > jqx-button { height: 100%; } .jqx-input-group-append jqx-button + jqx-button, .jqx-input-group-append jqx-button + .jqx-input-group-text, .jqx-input-group-append .jqx-input-group-text + jqx-button, .jqx-input-group-append .jqx-input-group-text + .jqx-input-group-text, .jqx-input-group-prepend jqx-button + jqx-button, .jqx-input-group-prepend jqx-button + .jqx-input-group-text, .jqx-input-group-prepend .jqx-input-group-text + jqx-button, .jqx-input-group-prepend .jqx-input-group-text + .jqx-input-group-text { margin-left: -1px; } .jqx-input-group-prepend { margin-right: -1px; } .jqx-input-group-append { margin-left: -1px; } .jqx-input-group-text { border-radius: var(--jqx-border-radius); display: flex; align-items: center; padding: 0.375rem 0.75rem; margin-bottom: 0; font-size: 1rem; font-weight: 400; line-height: 1.5; color: var(--jqx-surface-color); text-align: center; white-space: nowrap; background-color: var(--jqx-surface); border: 1px solid var(--jqx-border); } .form-control { border-radius: var(--jqx-border-radius); height: auto; display: block; width: 100%; padding: 0.375rem 0.75rem; font-size: var(--jqx-font-size); line-height: 1.5; color: #495057; background-color: var(--jqx-background); background-clip: padding-box; -webkit-background-clip: padding-box; border: 1px solid var(--jqx-border); transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } .form-control:focus, .form-control[focus] { color: var(--jqx-color); background-color: var(--jqx-background); border-color: var(--jqx-primary); outline: 0; } .jqx-form { background: var(--jqx-background); color: var(--jqx-background-color); border: 0px solid var(--jqx-border); border-radius: var(--jqx-border-radius); box-sizing: border-box; overflow: visible; width: 600px; font-family: var(--jqx-font-family); font-size: var(--jqx-font-size); display: block; } @media only screen and (max-width: 600px) { .jqx-form { width: 350px; } } .jqx-form-row { padding: 5px 0px; box-sizing: border-box; } .jqx-form-row .jqx-form-control-label { display: flex; align-items: center; white-space: nowrap; text-overflow: ellipsis; font-family: var(--jqx-font-family); font-size: calc(0.9 * var(--jqx-font-size)); } .jqx-form-row .jqx-form-control-label[required]:after { content: "*"; color: #a94442; font-size: 14px; margin-left: 2px; margin-right: 2px; } .jqx-form-row .jqx-form-control { display: flex; box-sizing: border-box; } .jqx-form-row .jqx-form-control + .jqx-form-label[required]:before { content: "*"; color: #a94442; font-size: 14px; margin-left: 2px; margin-right: 2px; } .jqx-form-row .jqx-form-control + .jqx-form-control-label[required]:after { content: ""; } .jqx-form-row-flex { display: flex; } .jqx-form-control .jqx-form-control-addon { display: flex; align-items: center; } .jqx-form-control.left { justify-content: flex-start; } .jqx-form-control.center { justify-content: center; } .jqx-form-control.right { justify-content: flex-end; } .jqx-form-control[readonly] .jqx-form-editor { pointer-events: none; } .jqx-form-control[readonly] .jqx-form-editor .jqx-drop-down-button, .jqx-form-control[readonly] .jqx-form-editor .jqx-calendar-button { visibility: hidden; } .jqx-form-control[readonly] .jqx-form-editor textarea, .jqx-form-control[readonly] .jqx-form-editor input, .jqx-form-control[readonly] .jqx-form-editor div, .jqx-form-control[readonly] .jqx-form-editor span { border: none !important; } .jqx-form-control[readonly] .jqx-form-editor + div, .jqx-form-control[readonly] .jqx-form-editor + .jqx-form-control-addon, .jqx-form-control[readonly] .jqx-form-editor + .jqx-form-control-icon { visibility: hidden; } .jqx-form-control-icon:after { content: attr(tooltip); visibility: hidden; white-space: nowrap; margin-top: 25px; position: absolute; border-top-left-radius: var(--jqx-border-top-left-radius); border-top-right-radius: var(--jqx-border-top-right-radius); border-bottom-left-radius: var(--jqx-border-bottom-left-radius); border-bottom-right-radius: var(--jqx-border-bottom-right-radius); padding: 7px; background-color: var(--jqx-secondary); color: var(--jqx-secondary-color); font-size: calc(var(--jqx-font-size) - 2px); opacity: 0; transform: scale(0); transition: opacity 0.2s ease-out, transform 0.1s ease-out; z-index: 9; } .jqx-form-control-icon:hover:after { visibility: visible; opacity: 0.9; transform: scale(1); color: var(--jqx-secondary-color); background: var(--jqx-secondary); } .jqx-form-control-label[readonly]:after { visibility: hidden; } .jqx-form-group .jqx-form-group-content { display: grid; grid-template-columns: none; } .jqx-form-group[columns="2"] > .jqx-form-group-content { grid-template-columns: 50% 50%; } .jqx-form-group[columns="3"] > .jqx-form-group-content { grid-template-columns: 33% 33% 33%; } .jqx-form-group[columns="4"] > .jqx-form-group-content { grid-template-columns: 25% 25% 25% 25%; } .jqx-form-group[columns="5"] > .jqx-form-group-content { grid-template-columns: 20% 20% 20% 20% 20%; } .jqx-form-group[columns="6"] > .jqx-form-group-content { grid-template-columns: 16.66% 16.66% 16.66% 16.66% 16.66% 16.66%; } .jqx-form-group-label { font-size: 20px; font-family: var(--jqx-font-family); padding-top: 10px; padding-bottom: 10px; margin-bottom: 20px; border-bottom: 1px solid var(--jqx-border); } .jqx-form-group-label.center { display: flex; justify-content: center; } .jqx-form-group-label.right { display: flex; justify-content: flex-end; } .jqx-form-group-buttons { display: flex; justify-content: flex-end; padding-right: 30px; } .jqx-form-group-buttons jqx-button { margin-left: 20px; } .jqx-form-editor { width: 100%; } .jqx-form-editor.jqx-validation-success:not(jqx-check-box):not([focus]) > div.jqx-container::after { display: none; } .jqx-form-editor.jqx-validation-success:not(jqx-check-box)[focus] > div.jqx-container::after { left: initial; right: 0px; z-index: 9; } .jqx-form-editor.jqx-validation-error:not(jqx-check-box) > div.jqx-container::after { left: initial; right: 0px; z-index: 9; } .jqx-form-editor.jqx-numeric-text-box.jqx-validation-success:not(jqx-check-box)[focus] > div.jqx-container input, .jqx-form-editor.jqx-numeric-text-box.jqx-validation-error:not(jqx-check-box) > div.jqx-container input { padding-right: 30px; } .jqx-form-editor.jqx-numeric-text-box[focus][spin-buttons].jqx-validation-success[focus] input, .jqx-form-editor.jqx-numeric-text-box[focus][spin-buttons].jqx-validation-error[focus] input, .jqx-form-editor.jqx-number-input[focus]:not([drop-down-button-position=none]).jqx-validation-success[focus] input, .jqx-form-editor.jqx-number-input[focus]:not([drop-down-button-position=none]).jqx-validation-error[focus] input { padding-right: 30px; } .jqx-form-editor.jqx-numeric-text-box.jqx-validation-success:not(jqx-check-box)[focus] > div.jqx-container::after, .jqx-form-editor.jqx-numeric-text-box.jqx-validation-error:not(jqx-check-box) > div.jqx-container::after, .jqx-form-editor.jqx-number-input.jqx-validation-success:not(jqx-check-box)[focus] > div.jqx-container::after, .jqx-form-editor.jqx-number-input.jqx-validation-error:not(jqx-check-box) > div.jqx-container::after, .jqx-form-editor.jqx-combo-box.jqx-validation-success:not(jqx-check-box)[focus] > div.jqx-container::after, .jqx-form-editor.jqx-combo-box.jqx-validation-error:not(jqx-check-box) > div.jqx-container::after, .jqx-form-editor.jqx-date-time-picker.jqx-validation-success:not(jqx-check-box)[focus] > div.jqx-container::after, .jqx-form-editor.jqx-date-time-picker.jqx-validation-error:not(jqx-check-box) > div.jqx-container::after, .jqx-form-editor.jqx-drop-down-list.jqx-validation-success:not(jqx-check-box)[focus] > div.jqx-container::after, .jqx-form-editor.jqx-drop-down-list.jqx-validation-error:not(jqx-check-box) > div.jqx-container::after { right: 20px; } .jqx-form-editor.jqx-invalid + .jqx-error-label-like-after-element, .jqx-form-editor.jqx-valid + .jqx-success-label-like-after-element { left: initial; right: 0px; z-index: 9; } input.jqx-form-editor.jqx-valid:not(:focus) + .jqx-success-label-like-after-element { display: none; } input.jqx-form-editor.jqx-invalid + .jqx-error-label-like-after-element, input.jqx-form-editor.jqx-valid + .jqx-success-label-like-after-element { right: 35px; } .jqx-form-tab { grid-row: 1; display: flex; align-items: center; justify-content: center; min-width: 0; cursor: pointer; font-family: var(--jqx-font-family); box-sizing: border-box; transition: background-color 0.2s ease-in-out; } .jqx-form-tab.selected { border-bottom: 2px solid var(--jqx-primary); color: var(--jqx-primary); } .jqx-form-tab.jqx-invalid { border-bottom: 2px solid var(--jqx-error); color: var(--jqx-error); } .jqx-form-tab-strip { display: grid; grid-auto-columns: 1fr; overflow: hidden; border-bottom: var(--jqx-border-width) solid var(--jqx-border); height: 30px; margin-bottom: 10px; } .jqx-form-tab-strip .jqx-form-tab .jqx-form-tab-label { font-size: calc(var(--jqx-font-size) + 1px); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 5px; } .jqx-form-tab-strip .jqx-form-tab:hover { background: var(--jqx-ui-state-hover); color: var(--jqx-ui-state-color-hover); } .jqx-form-tab-strip[vertical] { display: flex; height: auto; flex-direction: column; background: var(--jqx-background); border: none; border-radius: initial; padding-bottom: 1px; } .jqx-form-tab-strip[vertical] .jqx-form-tab { background-color: var(--jqx-surface); color: var(--jqx-surface-color); overflow: hidden; border: var(--jqx-border-width) solid var(--jqx-border); border-radius: 0px; padding: 10px; margin-bottom: -1px; justify-content: left; } .jqx-form-tab-strip[vertical] .jqx-form-tab .jqx-form-tab-label { width: 100%; } .jqx-form-tab-strip[vertical] .jqx-form-tab .jqx-form-tab-button { float: right; transition: transform 0.3s ease-in-out; transform: rotate(-180deg); font-size: 17px; } .jqx-form-tab-strip[vertical] .jqx-form-tab.selected { background: var(--jqx-ui-state-focus); } .jqx-form-tab-strip[vertical] .jqx-form-tab.selected .jqx-form-tab-button { transform: rotate(0deg); } .jqx-form-tab-strip[vertical] .jqx-form-tab.jqx-invalid { color: var(--jqx-error); background-color: var(--jqx-surface); } .jqx-form-tab-strip[breadcrumb] { border: none; } .jqx-form-tab-strip[breadcrumb] .jqx-form-tab { border-bottom: none; } .jqx-form-tab-strip[breadcrumb] .jqx-form-tab .jqx-form-tab-label { display: flex; align-items: center; } .jqx-form-tab-strip[breadcrumb] .jqx-form-tab .jqx-form-tab-label .circle { border-radius: 100%; font-family: var(--jqx-font-family); width: 12px; height: 12px; padding: 5px; margin-right: 10px; background: var(--jqx-secondary); color: var(--jqx-secondary-color); align-items: center; justify-content: center; display: flex; } .jqx-form-tab-strip[breadcrumb] .jqx-form-tab.jqx-invalid { color: var(--jqx-color); } .jqx-form-tab-strip[breadcrumb] .jqx-form-tab.selected .jqx-form-tab-label .circle { background: var(--jqx-primary); color: var(--jqx-primary-color); } .jqx-form-tab-control { padding: 0; display: none !important; } .jqx-form-tab-control.selected { margin-bottom: -1px; display: grid !important; } .jqx-form-tab-control.selected[vertical] { padding: 10px; border: 1px solid var(--jqx-border); } .jqx-form-options-horizontal { display: flex; } .jqx-form-control[data-loading] { position: relative; overflow: hidden; } .jqx-form-control[data-loading]::after { position: absolute; right: 0px; top: calc(50% - 10px); content: ""; width: 16px; height: 16px; border: 2px solid var(--jqx-primary); border-top-color: transparent; border-radius: 50%; animation: jqx-form-spin 1s cubic-bezier(0.075, 0.82, 0.165, 1) infinite; opacity: 1; visibility: visible; transition: opacity 0.3s ease, visibility 0.3s ease; } @keyframes jqx-form-spin { to { transform: rotate(360deg); } } .jqx-kanban { width: var(--jqx-kanban-default-width); height: var(--jqx-kanban-default-height); border: none; padding: 0; } .jqx-kanban .jqx-kanban-scroll-viewer { width: 100%; height: 100%; } .jqx-kanban .jqx-kanban-scroll-viewer .jqx-scroll-viewer-content-container[disable-vertical] { padding: var(--jqx-data-view-padding); height: 100%; min-width: 100%; } .jqx-kanban.jqx-kanban-column-color .jqx-kanban-column:not(.jqx-kanban-add-new-column) { background: var(--jqx-surface); padding: 5px; box-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 0 2px rgba(0, 0, 0, 0.08), 0 3px 4px rgba(0, 0, 0, 0.03), 0 3px 16px rgba(0, 0, 0, 0.06); border-radius: 5px; box-sizing: border-box; } .jqx-kanban.jqx-kanban-column-color .jqx-kanban-column:not(.jqx-kanban-add-new-column) .jqx-kanban-column-header { background: transparent; border: none; } .jqx-kanban .jqx-kanban-column .jqx-kanban-column-footer { display: flex; font-family: var(--jqx-font-family); font-size: 11px; color: var(--jqx-surface-color); opacity: 0.5; align-items: center; text-align: center; padding: 8px; } .jqx-kanban .jqx-kanban-column.collapsed .jqx-kanban-column-footer { padding: 0px; } .jqx-kanban > .jqx-container, .jqx-kanban.jqx-container { position: relative; } .jqx-kanban > .jqx-container[modal], .jqx-kanban.jqx-container[modal] { pointer-events: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .jqx-kanban > .jqx-container[modal]:after, .jqx-kanban.jqx-container[modal]:after { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: black; opacity: 0.3; pointer-events: none; cursor: default; -moz-user-select: none; -webkit-user-select: none; user-select: none; } .jqx-kanban .jqx-kanban-body { position: relative; width: 100%; height: 100%; display: grid; grid-column-gap: var(--jqx-data-view-padding); grid-template-rows: 100%; } .jqx-kanban .jqx-kanban-body > .jqx-kanban-column { height: 100%; overflow: hidden; } .jqx-kanban .jqx-kanban-column { display: grid; grid-template-rows: var(--jqx-kanban-header-size) 1fr; grid-row-gap: var(--jqx-data-view-padding); min-height: 0; } .jqx-kanban .jqx-kanban-column:not(.collapsed) > .jqx-kanban-column-header { grid-template-columns: 1fr auto auto; } .jqx-kanban .jqx-kanban-column.collapsed > .jqx-kanban-column-header > .jqx-kanban-column-header-label.pill .heading { padding: 8px 2px; } .jqx-kanban .jqx-kanban-column[wip-max-error] > .jqx-kanban-column-header { background: #ffcdd2 !important; } .jqx-kanban .jqx-kanban-column[wip-min-error] > .jqx-kanban-column-header { background: #ffe082 !important; } .jqx-kanban .jqx-kanban-column > .jqx-kanban-column-header { border: var(--jqx-border-width) solid var(--jqx-border); border-top-left-radius: var(--jqx-border-top-left-radius); border-top-right-radius: var(--jqx-border-top-right-radius); border-bottom-left-radius: var(--jqx-border-bottom-left-radius); border-bottom-right-radius: var(--jqx-border-bottom-right-radius); min-width: 0; display: grid; grid-template-columns: 1fr auto; align-content: center; align-items: center; padding: 0 var(--jqx-data-view-padding); background-color: var(--jqx-surface); color: var(--jqx-surface-color); } .jqx-kanban .jqx-kanban-column > .jqx-kanban-column-header > .jqx-kanban-column-header-label { font-size: calc(var(--jqx-font-size) + 1px); font-weight: bold; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .jqx-kanban .jqx-kanban-column > .jqx-kanban-column-header > .jqx-kanban-column-header-label.pill { overflow: visible; display: inline-flex; align-content: center; } .jqx-kanban .jqx-kanban-column > .jqx-kanban-column-header > .jqx-kanban-column-header-label.pill .heading { border-radius: 12px; font-size: var(--jqx-font-size); padding: 2px 8px; min-width: 22px; font-weight: 500; display: flex; align-items: center; } .jqx-kanban .jqx-kanban-column > .jqx-kanban-column-header > .jqx-kanban-column-header-label.pill .heading .summary { font-size: 10px; margin-left: 3px; opacity: 0.8; } .jqx-kanban .jqx-kanban-column > .jqx-kanban-column-header > .jqx-kanban-column-header-label .jqx-kanban-title { text-overflow: ellipsis; overflow: hidden; } .jqx-kanban .jqx-kanban-column > .jqx-kanban-column-header > .jqx-kanban-column-header-label.pending { position: relative; overflow: visible; visibility: hidden; } .jqx-kanban .jqx-kanban-column > .jqx-kanban-column-header > .jqx-arrow { display: none; } .jqx-kanban .jqx-kanban-column > .jqx-kanban-column-header > .jqx-kanban-column-header-add { display: none; } .jqx-kanban .jqx-kanban-column > .jqx-kanban-column-content { display: grid; grid-row-gap: var(--jqx-data-view-padding); min-height: 0; grid-template-rows: 1fr 3fr; } .jqx-kanban .jqx-kanban-column > .jqx-kanban-column-content.no-sub-columns { grid-template-rows: 1fr; } .jqx-kanban .jqx-kanban-column > .jqx-kanban-column-content.has-swimlane { grid-row-gap: calc(var(--jqx-kanban-header-size) + 2 * var(--jqx-data-view-padding)); } .jqx-kanban .jqx-kanban-column .jqx-kanban-column-content-tasks { position: relative; border: none; width: unset; min-width: unset; max-height: 0; height: unset; min-height: 0; max-height: unset; padding: 0; background-color: transparent; } .jqx-kanban .jqx-kanban-column .jqx-kanban-column-content-tasks:empty { display: none; } .jqx-kanban .jqx-kanban-column.collapsed { width: var(--jqx-kanban-header-size); grid-template-rows: 1fr; } .jqx-kanban .jqx-kanban-column.collapsed > .jqx-kanban-column-header { width: 100%; padding: var(--jqx-data-view-padding) 0; writing-mode: vertical-lr; color: var(--jqx-primary); direction: ltr; } .jqx-kanban .jqx-kanban-column.collapsed > .jqx-kanban-column-content { display: none; } .jqx-kanban .jqx-kanban-column.collapsed.has-swimlane > .jqx-kanban-column-header > .jqx-kanban-column-header-label { margin-top: calc(2 * var(--jqx-kanban-header-size) + var(--jqx-data-view-padding)); } .jqx-kanban .jqx-kanban-column.dragged .jqx-kanban-column-header { background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.1) 75%, transparent 75%, transparent); background-size: 3em 3em; } .jqx-kanban .jqx-kanban-column.drop-target { position: relative; overflow: visible; } .jqx-kanban .jqx-kanban-column.drop-target.before:after { border-left: var(--jqx-kanban-color-band-width) dashed var(--jqx-primary); left: calc(-1 * var(--jqx-kanban-color-band-width)); margin-left: -3px; } .jqx-kanban .jqx-kanban-column.drop-target.after:after { border-right: var(--jqx-kanban-color-band-width) dashed var(--jqx-primary); margin-left: 3px; } .jqx-kanban .jqx-kanban-column[orientation=horizontal] > .jqx-kanban-column-content > .jqx-kanban-column-content-tasks > .jqx-container > .jqx-scroll-viewer-container > .jqx-scroll-viewer-content-container { grid-template-columns: repeat(auto-fit, minmax(var(--jqx-kanban-task-min-width), 1fr)); grid-column-gap: var(--jqx-data-view-padding); } .jqx-kanban .jqx-kanban-column[orientation=horizontal] > .jqx-kanban-column-content > .jqx-kanban-column-content-tasks .drop-target.before:after { border-left: var(--jqx-kanban-color-band-width) dashed var(--jqx-primary-color); left: calc(-1 * var(--jqx-kanban-color-band-width)); } .jqx-kanban .jqx-kanban-column[orientation=horizontal] > .jqx-kanban-column-content > .jqx-kanban-column-content-tasks .drop-target.after:after { border-right: 2px dashed var(--jqx-primary); } .jqx-kanban .jqx-kanban-column[orientation=vertical] > .jqx-kanban-column-content > .jqx-kanban-column-content-tasks .drop-target.before:after { border-top: 2px dashed var(--jqx-primary); } .jqx-kanban .jqx-kanban-column[orientation=vertical] > .jqx-kanban-column-content > .jqx-kanban-column-content-tasks .drop-target.after:after { border-bottom: 2px dashed var(--jqx-primary); } .jqx-kanban .jqx-kanban-column.has-swimlane { grid-row-gap: calc(var(--jqx-kanban-header-size) + 2 * var(--jqx-data-view-padding)); } .jqx-kanban .jqx-kanban-column-header:focus { outline: none; border-color: var(--jqx-ui-state-border-active); } .jqx-kanban .jqx-kanban-column-header-label.pending .jqx-kanban-column-header-input { position: absolute; top: -10%; left: 0; width: 100%; height: 120%; outline: none; font-size: calc(var(--jqx-font-size) - 1px); visibility: visible; border: var(--jqx-border-width) solid var(--jqx-border); border-top-right-radius: var(--jqx-border-top-right-radius); border-top-left-radius: var(--jqx-border-top-left-radius); border-bottom-left-radius: var(--jqx-border-bottom-left-radius); border-bottom-right-radius: var(--jqx-border-bottom-right-radius); background-color: var(--jqx-background); color: var(--jqx-background-color); font-family: inherit; padding: 4px; } .jqx-kanban .jqx-kanban-column-header-label.pending .jqx-kanban-column-header-input:hover { border-color: var(--jqx-ui-state-border-hover); } .jqx-kanban .jqx-kanban-column-header-label.pending .jqx-kanban-column-header-input:focus { border-color: var(--jqx-primary); } .jqx-kanban .jqx-kanban-column-header-label.pending.colors .jqx-kanban-column-header-input { width: calc(100% - 30px); } .jqx-kanban .jqx-kanban-column-header-label.pending.colors jqx-color-input { position: absolute; right: 2px; visibility: visible; } .jqx-kanban .jqx-kanban-column-header-add:focus { outline: none; color: var(--jqx-primary); } .jqx-kanban .jqx-kanban-column-content-tasks:focus { outline: none; } .jqx-kanban .jqx-kanban-column-content-tasks.empty { position: relative; } .jqx-kanban .jqx-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: 0.5; font-size: 11px; } .jqx-kanban .jqx-kanban-column-content-tasks .jqx-kanban-task[focus] { box-shadow: inset 0px 0px 1px 1px var(--jqx-primary); } .jqx-kanban .jqx-kanban-column-content-tasks > .jqx-container > .jqx-scroll-viewer-container > .jqx-scroll-viewer-content-container { display: grid; grid-row-gap: var(--jqx-data-view-padding); padding: 0; } .jqx-kanban .jqx-kanban-column-content-columns { display: grid; grid-column-gap: var(--jqx-data-view-padding); min-height: 0; } .jqx-kanban .jqx-kanban-column-content-columns.has-tabs { display: grid; grid-row-gap: var(--jqx-data-view-padding); min-height: 0; grid-template-rows: var(--jqx-kanban-header-size) 1fr; } .jqx-kanban .jqx-kanban-column-content-columns.has-tabs .jqx-kanban-column { grid-template-rows: 1fr; } .jqx-kanban .jqx-kanban-task:hover .jqx-kanban-task-edit { width: 16px; } .jqx-kanban .jqx-kanban-task:hover .jqx-kanban-task-edit:after { content: var(--jqx-icon-mode-edit); font-family: var(--jqx-font-family-icon); } .jqx-kanban .jqx-kanban-task.dragged { background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.1) 75%, transparent 75%, transparent); background-size: 3em 3em; } .jqx-kanban .jqx-kanban-task[selected] { background-color: var(--jqx-ui-state-selected); } .jqx-kanban .jqx-kanban-task-user:focus { outline: none; border: 1px solid var(--jqx-primary); } .jqx-kanban .jqx-kanban-task-description:hover, .jqx-kanban .jqx-kanban-task-edit:hover, .jqx-kanban .jqx-kanban-task-actions:hover, .jqx-kanban .jqx-kanban-task-comments:hover { color: var(--jqx-primary); } .jqx-kanban .jqx-kanban-task-description:focus, .jqx-kanban .jqx-kanban-task-edit:focus, .jqx-kanban .jqx-kanban-task-actions:focus, .jqx-kanban .jqx-kanban-task-comments:focus { outline: 1px solid var(--jqx-primary); } .jqx-kanban .jqx-data-view-header { border: var(--jqx-border-width) solid var(--jqx-border); border-top-left-radius: var(--jqx-border-top-left-radius); border-top-right-radius: var(--jqx-border-top-right-radius); border-bottom-left-radius: var(--jqx-border-bottom-left-radius); border-bottom-right-radius: var(--jqx-border-bottom-right-radius); min-width: 0; height: var(--jqx-kanban-header-size); } .jqx-kanban .jqx-kanban-add-new-column { cursor: pointer; } .jqx-kanban .jqx-kanban-add-new-column .jqx-kanban-column-content { display: none; } .jqx-kanban .jqx-kanban-add-new-column-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(var(--jqx-font-size) + 1px); font-weight: bold; display: flex; align-items: center; } .jqx-kanban .swimlane { position: absolute; display: flex; align-items: center; justify-content: center; height: var(--jqx-kanban-header-size); background-color: var(--jqx-primary); color: var(--jqx-primary-color); font-size: calc(var(--jqx-font-size) + 2px); padding: var(--jqx-data-view-padding); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: var(--jqx-border-width) solid var(--jqx-border); border-top-left-radius: var(--jqx-border-top-left-radius); border-top-right-radius: var(--jqx-border-top-right-radius); border-bottom-left-radius: var(--jqx-border-bottom-left-radius); border-bottom-right-radius: var(--jqx-border-bottom-right-radius); min-width: 0; } .jqx-kanban .jqx-kanban-task-placeholder { transition: margin 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .jqx-kanban .drop-target:after { content: ""; position: absolute; box-sizing: border-box; border: 2px dashed var(--jqx-primary); width: 100%; height: 100%; left: 0; top: 0; pointer-events: none; opacity: 0.75; } .jqx-kanban .drop-target.before:after, .jqx-kanban .drop-target.after:after { border: none; } .jqx-kanban .remove-button:focus { outline: 1px solid var(--jqx-primary); } .jqx-kanban:not([right-to-left]) .jqx-kanban-column.collapsed > .jqx-kanban-column-header > .jqx-arrow { transform: rotate(180deg); } .jqx-kanban[add-new-button] .jqx-kanban-column[add-new-button] > .jqx-kanban-column-header > .jqx-kanban-column-header-add:after { content: var(--jqx-icon-plus-circled); font-family: var(--jqx-font-family-icon); padding: 0 10px 10px 0; } .jqx-kanban[add-new-button] .jqx-kanban-column[add-new-button] > .jqx-kanban-column-header > .jqx-kanban-column-header-add:hover { cursor: pointer; color: var(--jqx-primary); } .jqx-kanban[add-new-button] .jqx-kanban-column[add-new-button]:not(.collapsed) > .jqx-kanban-column-header[add-new-button] { grid-template-columns: auto 1fr auto auto; } .jqx-kanban[add-new-button] .jqx-kanban-column[add-new-button]:not(.collapsed) > .jqx-kanban-column-header[add-new-button] > .jqx-kanban-column-header-add { display: block; } .jqx-kanban[add-new-button] .jqx-kanban-add-new-button { width: 26px; height: 26px; border-radius: 50%; background: var(--jqx-primary); color: var(--jqx-primary-color); position: absolute; display: flex; justify-content: center; align-content: center; align-items: center; font-size: 14px; cursor: pointer; transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1); transform: scale(1); transition-delay: 0s; } .jqx-kanban[add-new-button] .jqx-kanban-add-new-button:hover { box-shadow: var(--jqx-elevation-4); transform: scale(1.2); } .jqx-kanban[add-new-button] .jqx-kanban-add-new-button:after { content: var(--jqx-icon-plus); font-family: var(--jqx-font-family-icon); font-size: 14px; } .jqx-kanban[add-new-button] .jqx-kanban-add-new-button.show { opacity: 1; } .jqx-kanban[column-actions] .jqx-kanban-column:not(.collapsed) > .jqx-kanban-column-header[settings] > .jqx-kanban-column-header-settings-button { display: block; transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); margin-top: -1px; } .jqx-kanban[column-actions] .jqx-kanban-column:not(.collapsed) > .jqx-kanban-column-header[settings] > .jqx-kanban-column-header-settings-button:hover, .jqx-kanban[column-actions] .jqx-kanban-column:not(.collapsed) > .jqx-kanban-column-header[settings] > .jqx-kanban-column-header-settings-button[aria-expanded] { color: var(--jqx-primary); } .jqx-kanban[column-actions] .jqx-kanban-column:not(.collapsed) > .jqx-kanban-column-header[settings] > .jqx-kanban-column-header-settings-button:after { margin-left: 5px; content: var(--jqx-icon-menu); font-family: var(--jqx-font-family-icon); } .jqx-kanban[column-actions] .jqx-kanban-column:not(.collapsed):not([add-new-button]) > .jqx-kanban-column-header[settings] { grid-template-columns: 1fr auto auto auto; } .jqx-kanban[collapsible] .jqx-kanban-column[collapsible] > .jqx-kanban-column-header { cursor: pointer; } .jqx-kanban[collapsible] .jqx-kanban-column[collapsible] > .jqx-kanban-column-header:hover { background-color: var(--jqx-ui-state-hover); color: var(--jqx-ui-state-color-hover); } .jqx-kanban[collapsible] .jqx-kanban-column[collapsible] > .jqx-kanban-column-header > .jqx-arrow { display: block; transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .jqx-kanban[collapsible] .jqx-kanban-column[collapsible] > .jqx-kanban-column-header > .jqx-arrow:hover { color: var(--jqx-primary); transform: scale(1.2); } .jqx-kanban[task-position=leaf] .jqx-kanban-column > .jqx-kanban-column-content:not(.no-sub-columns) { grid-template-rows: 0 1fr; grid-row-gap: 0; } .jqx-kanban[user-list] .jqx-kanban-task-user:hover { border: none; box-shadow: 0px 0px 4px 1px var(--jqx-primary); } .jqx-kanban[header-position=top] .jqx-data-view-header { margin-bottom: var(--jqx-data-view-padding); } .jqx-kanban[header-position=top] .jqx-kanban-body { height: calc(100% - var(--jqx-kanban-header-size) - var(--jqx-data-view-padding)); } .jqx-kanban[header-position=bottom] .jqx-data-view-header { margin-top: var(--jqx-data-view-padding); } .jqx-kanban[header-position=bottom] .jqx-kanban-body { height: calc(100% - var(--jqx-kanban-header-size) - var(--jqx-data-view-padding)); } .jqx-data-view-header { height: var(--jqx-kanban-header-size); } .jqx-kanban-task { border: var(--jqx-border-width) solid var(--jqx-border); border-left: var(--jqx-kanban-color-band-width) solid var(--jqx-primary); border-top-right-radius: var(--jqx-border-top-right-radius); border-bottom-right-radius: var(--jqx-border-bottom-right-radius); width: 100%; min-width: 0; height: auto; min-height: var(--jqx-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(--jqx-background); position: relative; margin-top: 0px; margin-bottom: 0px; } .jqx-kanban-task .jqx-kanban-task-cover-content { height: 100px; display: flex; overflow: hidden; } .jqx-kanban-task .jqx-kanban-task-cover-content img { max-width: 100%; max-height: 100%; } .jqx-kanban-task .jqx-kanban-task-custom-fields { display: grid; grid-template-columns: 1fr 1fr; } .jqx-kanban-task .jqx-kanban-task-custom-fields .jqx-kanban-task-field { display: flex; flex-direction: column; padding: 5px; } .jqx-kanban-task .jqx-kanban-task-custom-fields .jqx-kanban-task-field .jqx-kanban-task-field-label { margin-bottom: calc(var(--jqx-card-view-vertical-offset) / 3); text-transform: uppercase; font-size: calc(var(--jqx-font-size) - 2px); opacity: 0.7; overflow: hidden; text-overflow: ellipsis; } .jqx-kanban-task .jqx-kanban-task-custom-fields .jqx-kanban-task-field .jqx-kanban-task-field-value { overflow: hidden; text-overflow: ellipsis; word-break: break-word; } .jqx-kanban-task .jqx-kanban-task-custom-fields .jqx-kanban-task-field .jqx-kanban-task-field-value .attachments { display: flex; } .jqx-kanban-task .jqx-kanban-task-custom-fields .jqx-kanban-task-field .jqx-kanban-task-field-value .attachments .item { margin-right: 5px; } .jqx-kanban-task .jqx-kanban-task-custom-fields .jqx-kanban-task-field .jqx-kanban-task-field-value .item, .jqx-kanban-task .jqx-kanban-task-custom-fields .jqx-kanban-task-field .jqx-kanban-task-field-value img { border: 1px solid var(--jqx-border); width: 25px; height: 25px; } .jqx-kanban-task .jqx-kanban-task-custom-fields .jqx-kanban-task-field .jqx-kanban-task-field-value .item:hover, .jqx-kanban-task .jqx-kanban-task-custom-fields .jqx-kanban-task-field .jqx-kanban-task-field-value img:hover { border: 2px solid var(--jqx-primary); } .jqx-kanban-task-input { height: 20px; opacity: 0.8; border: none !important; width: 100%; text-decoration: underline; background: transparent; cursor: pointer; font-size: calc(var(--jqx-font-size) - 1px) !important; } .jqx-kanban-task-input:active, .jqx-kanban-task-input:focus { text-decoration: initial; cursor: initial; opacity: 1; } .jqx-kanban-task-subtasks .jqx-kanban-sub-task { display: grid; grid-column-gap: 5px; grid-template-columns: 16px 1fr 16px 16px; font-size: calc(var(--jqx-font-size) - 1px) !important; padding: 2px; } .jqx-kanban-task-subtasks .jqx-kanban-sub-task:before { content: var(--jqx-icon-check-empty); font-family: var(--jqx-font-family-icon); cursor: pointer; font-size: var(--jqx-font-size) !important; } .jqx-kanban-task-subtasks .jqx-kanban-sub-task:hover .edit-subtask:after { content: var(--jqx-icon-mode-edit); font-family: var(--jqx-font-family-icon); cursor: pointer; } .jqx-kanban-task-subtasks .jqx-kanban-sub-task:hover .remove-subtask:after { content: var(--jqx-icon-close); font-family: var(--jqx-font-family-icon); cursor: pointer; } .jqx-kanban-task-subtasks .jqx-kanban-sub-task.selected { background: var(--jqx-ui-state-selected); color: var(--jqx-ui-state-color-selected); } .jqx-kanban-task-subtasks .jqx-kanban-sub-task.selected .label { text-decoration: line-through; } .jqx-kanban-task-subtasks .jqx-kanban-sub-task.selected:before { content: var(--jqx-icon-check-squared); } .jqx-kanban-task-subtasks .jqx-kanban-sub-task[selected] .label { text-decoration: line-through; } .jqx-kanban-task-content { display: grid; grid-template-columns: 1fr auto; grid-column-gap: 5px; } .jqx-kanban-task-text { padding: 5px; word-break: break-word; max-height: var(--jqx-kanban-text-max-height); overflow: auto; } .jqx-kanban-task-text:before, .jqx-kanban-task-text:after { font-family: var(--jqx-font-family-icon); } .jqx-kanban-task-text:before { margin-right: 10px; } .jqx-kanban-task-text:after { margin-left: 10px; } .jqx-kanban-task-footer { display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; grid-column-gap: 5px; } .jqx-kanban-task-due { display: none; letter-spacing: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .jqx-kanban-task-due:not(:empty) { margin-top: calc(var(--jqx-data-view-padding) / 2); } .jqx-kanban-task-due.overdue { color: var(--jqx-error); } .jqx-kanban-task-due.overdue:after { font-family: var(--jqx-font-family-icon); content: var(--jqx-icon-attention-circled); } .jqx-kanban-task-info { display: grid; grid-template-rows: auto auto; } .jqx-kanban-task-checked { letter-spacing: 1px; } .jqx-kanban-task-progress { background-color: var(--jqx-primary); position: absolute; height: 20%; left: 0; } .jqx-kanban-task-progress.bottom { bottom: 0; } .jqx-kanban-task-progress-container { display: none; height: 20px; background-color: var(--jqx-ui-state-selected); position: relative; align-items: center; justify-content: center; } .jqx-kanban-task-user { display: none; } .jqx-kanban-task-user.empty:after { content: var(--jqx-icon-user); font-family: var(--jqx-font-family-icon); width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; font-size: var(--jqx-kanban-user-icon-size); } .jqx-kanban-task-tags { display: none; } .jqx-kanban-task-tag { display: inline-block; background-color: rgba(var(--jqx-primary-rgb), 0.15); color: var(--jqx-background-color); margin-right: 4px; border-radius: 20px; font-size: 12px; font-weight: 500; padding: 2px 7px; } .jqx-kanban-task-description:after { content: var(--jqx-icon-align-left); font-family: var(--jqx-font-family-icon); } .jqx-kanban-task-actions { display: none; } .jqx-kanban-task-actions:after { content: var(--jqx-icon-settings); font-family: var(--jqx-font-family-icon); } .jqx-kanban-task-comments { display: none; } .jqx-kanban-task-comments:after { content: var(--jqx-icon-comment) " " attr(num); font-family: var(--jqx-font-family-icon); white-space: nowrap; } .jqx-kanban-feedback { position: absolute; color: var(--jqx-background-color); font-family: var(--jqx-font-family); font-size: var(--jqx-font-size); cursor: move; opacity: 0.9; } .jqx-kanban-feedback * { box-sizing: border-box; } .jqx-kanban-feedback .jqx-kanban-task { position: absolute; box-shadow: var(--jqx-elevation-4); pointer-events: none; } .jqx-kanban-feedback[column-drag] { box-shadow: var(--jqx-elevation-4); border: none; } .jqx-kanban-feedback[column-drag] .jqx-kanban { border: none; overflow: visible; } .jqx-kanban-feedback[column-drag] .jqx-kanban-task { position: static; box-shadow: none; } .jqx-kanban-feedback[column-drag] { height: auto; transform: scale(0.8); transform-origin: top left; } .jqx-kanban-feedback .jqx-kanban-feedback-additional { position: absolute; box-shadow: var(--jqx-elevation-4); pointer-events: none; top: -8px; left: 8px; border: var(--jqx-border-width) solid var(--jqx-border); background-color: var(--jqx-background); } .jqx-kanban-feedback .jqx-kanban-feedback-additional.multiple { top: -16px; left: 16px; } .jqx-kanban-feedback .jqx-kanban-feedback-additional.multiple:before { position: absolute; box-shadow: var(--jqx-elevation-4); pointer-events: none; content: ""; width: 100%; height: 100%; border: var(--jqx-border-width) solid var(--jqx-border); background-color: var(--jqx-background); bottom: -9px; left: -9px; } .jqx-kanban-feedback .jqx-kanban-feedback-additional + .jqx-kanban-task::after { display: flex; justify-content: center; align-items: center; content: attr(num); position: absolute; width: 20px; height: 20px; background-color: var(--jqx-primary); color: var(--jqx-primary-color); right: -10px; top: -10px; border-radius: 50%; } [task-progress] .jqx-kanban-task-progress-container { display: flex; } [task-user-icon] .jqx-kanban-task-user { display: block; width: var(--jqx-kanban-user-icon-size); height: var(--jqx-kanban-user-icon-size); border: var(--jqx-border-width) solid var(--jqx-border); border-radius: 50%; background-color: var(--jqx-surface); color: var(--jqx-background-color); background-position: center; background-repeat: no-repeat; background-size: cover; } [task-tags] .jqx-kanban-task-tags { display: flex; flex-direction: row; overflow: hidden; } [task-actions] .jqx-kanban-task-actions, [task-comments] .jqx-kanban-task-comments, [task-due] .jqx-kanban-task-due { display: block; } [task-priority][editable] .jqx-kanban-task-text:hover .priority { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAQElEQVR4nGNgGAVUBEcZGBj+Q/FhBhqA/2h46FlwGMnwQ7SwYBQQBEdHkykhcHg0mQ44ODqaTAmBw6PJlIEWAACAfy0E9A956gAAAABJRU5ErkJggg=="); } [task-priority] .jqx-kanban-task-text { display: flex; align-items: baseline; } [task-priority] .jqx-kanban-task-text .priority { font-family: var(--jqx-font-family-icon); margin-left: 5px; display: inline-block; width: 16px; min-width: 16px; height: 16px; background-repeat: no-repeat; background-size: cover; } [task-priority] .jqx-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] .jqx-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] .jqx-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] .jqx-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"); } .jqx-kanban-tab-strip { height: 35px; background: inherit; margin-bottom: 10px; display: flex; border-bottom: 1px solid var(--jqx-border); } .jqx-kanban-tab-strip .jqx-kanban-tab { padding: 8px 22px; cursor: pointer; text-transform: uppercase; } .jqx-kanban-tab-strip .jqx-kanban-tab.selected { color: var(--jqx-primary); border-bottom: 2px solid var(--jqx-primary); } .jqx-kanban-tab-strip .jqx-kanban-tab[focus] { color: var(--jqx-primary); outline: none; } .jqx-window.jqx-kanban-window { max-height: 800px; width: auto !important; max-width: 700px; min-width: 700px !important; } .jqx-window.jqx-kanban-window[readonly] .remove-subtask { display: none; } .jqx-window.jqx-kanban-window[readonly] .new-subtask { display: none; } .jqx-window.jqx-kanban-window[readonly] .jqx-footer, .jqx-window.jqx-kanban-window[readonly] .jqx-button.add, .jqx-window.jqx-kanban-window[readonly] .jqx-button.delete { display: none !important; } .jqx-window.jqx-kanban-window[readonly] .jqx-date-time-picker[calendar-button] .jqx-drop-down-button.jqx-calendar-button { border: none; } .jqx-window.jqx-kanban-window[readonly] .jqx-multi-combo-input .jqx-drop-down-button, .jqx-window.jqx-kanban-window[readonly] .jqx-multi-combo-input .jqx-drop-down-list-unselect-button { display: none; } .jqx-window.jqx-kanban-window[readonly] jqx-numeric-text-box input { border: none; } .jqx-window.jqx-kanban-window[readonly] .jqx-numeric-text-box .jqx-numeric-text-box-unit-display { border: none; } .jqx-window.jqx-kanban-window[readonly] jqx-color-input { pointer-events: none; opacity: 0.7; } .jqx-window.jqx-kanban-window[readonly] .jqx-kanban-tab-content.details textarea, .jqx-window.jqx-kanban-window[readonly] input, .jqx-window.jqx-kanban-window[readonly] jqx-input, .jqx-window.jqx-kanban-window[readonly] jqx-multi-combo-input, .jqx-window.jqx-kanban-window[readonly] jqx-numeric-text-box, .jqx-window.jqx-kanban-window[readonly] jqx-date-time-picker { opacity: 0.7; --jqx-surface: var(--jqx-background); --jqx-surface-color: var(--jqx-background); border: none !important; border-bottom: 1px solid var(--jqx-border) !important; pointer-events: none; } .jqx-window.jqx-kanban-window .details .layout { display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 30px; } .jqx-window.jqx-kanban-window .details .layout.single-column { grid-template-columns: 1fr; } .jqx-window.jqx-kanban-window .details .layout .description-editor { height: 91px; } .jqx-window.jqx-kanban-window .details .layout .tags-editor { margin-top: 2px; } .jqx-window.jqx-kanban-window .details .layout .text-editor { height: 32px; } .jqx-window.jqx-kanban-window .jqx-kanban-task-user { display: block; width: var(--jqx-kanban-user-icon-size); height: var(--jqx-kanban-user-icon-size); border: var(--jqx-border-width) solid var(--jqx-border); border-radius: 50%; background-color: var(--jqx-surface); color: var(--jqx-background-color); background-position: center; background-repeat: no-repeat; background-size: cover; } .jqx-window.jqx-kanban-window .fields .jqx-kanban-task-field-editor { width: 100%; } .jqx-window.jqx-kanban-window .fields .editor-label { display: flex; justify-content: space-between; } .jqx-window.jqx-kanban-window .fields .editor-label .icon { width: 16px; height: 16px; display: inline-block; } .jqx-window.jqx-kanban-window .fields .editor-label .icon::before { content: var(--jqx-icon-visibility); font-family: var(--jqx-font-family-icon); cursor: pointer; } .jqx-window.jqx-kanban-window .fields .editor-label .icon.hide::before { content: var(--jqx-icon-visibility-off); } .jqx-window.jqx-kanban-window .history-table { display: block !important; max-height: 400px; overflow: auto; } .jqx-window.jqx-kanban-window .history-table table { border-collapse: collapse; width: 100%; } .jqx-window.jqx-kanban-window .history-table table .jqx-kanban-task-user-history { display: flex; align-items: center; } .jqx-window.jqx-kanban-window .history-table table .jqx-kanban-task-user-history .name { margin-left: 5px; } .jqx-window.jqx-kanban-window .history-table table td, .jqx-window.jqx-kanban-window .history-table table th { border: 1px solid var(--jqx-border); padding: 8px; } .jqx-window.jqx-kanban-window .history-table table tr:nth-child(even) { background-color: var(--jqx-surface); color: var(--jqx-surface-color); } .jqx-window.jqx-kanban-window .history-table table tr:hover { background-color: var(--jqx-ui-state-hover); color: var(--jqx-ui-state-color-hover); } .jqx-window.jqx-kanban-window .history-table table th { padding-top: 12px; padding-bottom: 12px; text-align: left; background-color: var(--jqx-info); color: var(--jqx-info-color); } .jqx-window.jqx-kanban-window .comments { margin: 0 auto; } .jqx-window.jqx-kanban-window .comments .jqx-comment { display: grid; grid-template-columns: var(--jqx-kanban-user-icon-size) 1fr; grid-column-gap: var(--jqx-data-view-padding); margin: var(--jqx-data-view-padding); } .jqx-window.jqx-kanban-window .comments .jqx-comment .comment-header { display: grid; grid-template-columns: 1fr auto auto; grid-column-gap: calc(var(--jqx-data-view-padding) / 2); margin-bottom: var(--jqx-data-view-padding); } .jqx-window.jqx-kanban-window .comments .jqx-comment .user-icon { width: 100%; height: var(--jqx-kanban-user-icon-size); border-radius: 50%; background-size: cover; background-position: center; } .jqx-window.jqx-kanban-window .comments .jqx-comment .user-icon.empty { background: var(--jqx-surface); display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--jqx-border); } .jqx-window.jqx-kanban-window .comments .jqx-comment .user-icon.empty:after { content: var(--jqx-icon-user); font-family: var(--jqx-font-family-icon); font-size: 20px; } .jqx-window.jqx-kanban-window .comments .jqx-comment .user-name { font-weight: bold; } .jqx-window.jqx-kanban-window .comments .jqx-comment .time { opacity: 0.8; } .jqx-window.jqx-kanban-window .comments .jqx-comment .remove-button { visibility: hidden; transform: rotate(90deg); width: 16px; cursor: pointer; } .jqx-window.jqx-kanban-window .comments .jqx-comment .remove-button:after { content: var(--jqx-icon-close); display: flex; align-items: center; justify-content: center; height: 100%; font-family: var(--jqx-font-family-icon); cursor: pointer; } .jqx-window.jqx-kanban-window .comments .jqx-comment .remove-button.enabled { visibility: visible; } .jqx-window.jqx-kanban-window .comments .jqx-kanban-list.comments { width: var(--jqx-kanban-comments-list-width); height: var(--jqx-kanban-comments-list-height); max-height: 100%; } .jqx-window.jqx-kanban-window .comments .jqx-kanban-list.comments .jqx-kanban-comments { height: calc(100% - var(--jqx-kanban-new-comment-height)); overflow: auto; } .jqx-window.jqx-kanban-window .comments .jqx-kanban-list.comments .jqx-kanban-new-comment { border-top: var(--jqx-border-width) solid var(--jqx-border); height: var(--jqx-kanban-new-comment-height); padding: var(--jqx-data-view-padding); overflow: hidden; } .jqx-window.jqx-kanban-window .comments .jqx-kanban-list.comments .jqx-kanban-new-comment textarea { resize: none; width: 100%; height: 100%; border: var(--jqx-border-width) solid var(--jqx-border); border-top-right-radius: var(--jqx-border-top-right-radius); border-top-left-radius: var(--jqx-border-top-left-radius); border-bottom-left-radius: var(--jqx-border-bottom-left-radius); border-bottom-right-radius: var(--jqx-border-bottom-right-radius); background-color: var(--jqx-background); color: var(--jqx-background-color); font-family: inherit; font-size: inherit; } .jqx-window.jqx-kanban-window .comments .jqx-kanban-list.comments .jqx-kanban-new-comment textarea:focus { outline: none; border-color: var(--jqx-outline); } .jqx-window.jqx-kanban-window .comments .jqx-kanban-list.comments .jqx-kanban-new-comment textarea:hover { border-color: var(--jqx-ui-state-border-hover); } .jqx-window.jqx-kanban-window .comments .jqx-kanban-list.comments .jqx-kanban-new-comment textarea[disabled] { opacity: 0.5; } .jqx-window.jqx-kanban-window .comments .jqx-kanban-list.comments .jqx-kanban-new-comment jqx-button { --jqx-button-padding: 0; display: none; margin-left: auto; height: var(--jqx-kanban-send-button-height); } .jqx-window.jqx-kanban-window .comments .jqx-kanban-list.comments .jqx-kanban-new-comment jqx-button[disabled] { pointer-events: unset; cursor: not-allowed; } .jqx-window.jqx-kanban-window .comments .jqx-kanban-list.comments .jqx-kanban-comments { height: calc(100% - var(--jqx-kanban-new-comment-height-expanded)); } .jqx-window.jqx-kanban-window .comments .jqx-kanban-list.comments .jqx-kanban-new-comment { height: var(--jqx-kanban-new-comment-height-expanded); } .jqx-window.jqx-kanban-window .comments .jqx-kanban-list.comments .jqx-kanban-new-comment textarea { margin-bottom: var(--jqx-data-view-padding); height: calc(100% - var(--jqx-data-view-padding) - var(--jqx-kanban-send-button-height)); display: block; } .jqx-window.jqx-kanban-window .comments .jqx-kanban-list.comments .jqx-kanban-new-comment jqx-button { display: block; } .jqx-window.jqx-kanban-window .prompt, .jqx-window.jqx-kanban-window .edit { display: none; } .jqx-window.jqx-kanban-window.prompt { --jqx-window-default-width: 250px; --jqx-window-default-height: 150px; min-width: 100px; min-height: 100px; } .jqx-window.jqx-kanban-window.prompt .prompt { display: block; width: 100%; height: 100%; padding: 20px; } .jqx-window.jqx-kanban-window.prompt .task-text { display: inline-block; max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: bold; } .jqx-window.jqx-kanban-window.edit { --jqx-numeric-text-box-default-unit-display-width: 20px; } .jqx-window.jqx-kanban-window.edit .edit { display: block; width: 100%; height: 100%; } .jqx-window.jqx-kanban-window .editor-label { margin-bottom: calc(var(--jqx-data-view-padding) / 2); text-transform: uppercase; } .jqx-window.jqx-kanban-window .editor-container { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; grid-column-gap: var(--jqx-data-view-padding); } .jqx-window.jqx-kanban-window .editor-container.single-column { grid-template-columns: 1fr; } .jqx-window.jqx-kanban-window .editor { width: 100%; margin-bottom: var(--jqx-data-view-padding); } .jqx-window.jqx-kanban-window .description-editor { min-height: 75px; resize: none; border: var(--jqx-border-width) solid var(--jqx-border); border-top-right-radius: var(--jqx-border-top-right-radius); border-top-left-radius: var(--jqx-border-top-left-radius); border-bottom-left-radius: var(--jqx-border-bottom-left-radius); border-bottom-right-radius: var(--jqx-border-bottom-right-radius); background-color: var(--jqx-background); color: var(--jqx-background-color); font-family: inherit; font-size: inherit; } .jqx-window.jqx-kanban-window .description-editor:hover { border-color: var(--jqx-ui-state-border-hover); } .jqx-window.jqx-kanban-window .description-editor:focus { outline: none; border-color: var(--jqx-primary); } .jqx-window.jqx-kanban-window .new-container { display: grid; grid-template-columns: 1fr var(--jqx-text-box-default-height); grid-column-gap: var(--jqx-data-view-padding); height: var(--jqx-text-box-default-height); } .jqx-window.jqx-kanban-window .new-container > jqx-button { width: unset; height: unset; --jqx-button-padding: 0; } .jqx-window.jqx-kanban-window .color-editor { width: 60px; } .jqx-window.jqx-kanban-window .checklist-editor { border: none; height: auto; } .jqx-window.jqx-kanban-window .checklist-editor jqx-list-item .jqx-overlay, .jqx-window.jqx-kanban-window .checklist-editor jqx-list-item[focus][selected] .jqx-overlay { background-color: transparent; } .jqx-window.jqx-kanban-window .checklist-editor jqx-list-item .jqx-list-item-container, .jqx-window.jqx-kanban-window .checklist-editor jqx-list-item[focus][selected] .jqx-list-item-container { border-color: transparent; } .jqx-window.jqx-kanban-window .checklist-editor .jqx-kanban-sub-task { display: grid; grid-column-gap: 5px; grid-template-columns: auto auto; } .jqx-window.jqx-kanban-window .checklist-editor jqx-list-item[selected] .label { text-decoration: line-through; } .jqx-window.jqx-kanban-window .checklist-editor .remove-subtask:after { content: var(--jqx-icon-close); font-family: var(--jqx-font-family-icon); cursor: pointer; } .jqx-window.jqx-kanban-window .new-subtask { border: var(--jqx-border-width) solid var(--jqx-border); border-top-right-radius: var(--jqx-border-top-right-radius); border-top-left-radius: var(--jqx-border-top-left-radius); border-bottom-left-radius: var(--jqx-border-bottom-left-radius); border-bottom-right-radius: var(--jqx-border-bottom-right-radius); background-color: var(--jqx-background); color: var(--jqx-background-color); font-family: inherit; font-size: inherit; } .jqx-window.jqx-kanban-window .new-subtask:hover { border-color: var(--jqx-ui-state-border-hover); } .jqx-window.jqx-kanban-window .new-subtask:focus { outline: none; border-color: var(--jqx-outline); } .jqx-window.jqx-kanban-window .jqx-content-container > .jqx-footer { display: flex; align-items: center; } .jqx-window.jqx-kanban-window .jqx-footer jqx-button { width: auto; min-width: 150px; margin-right: 10px; height: 100%; } @media only screen and (max-width: 600px) { .jqx-window.jqx-kanban-window { min-width: 300px !important; } .jqx-window.jqx-kanban-window .details .layout { grid-template-columns: 1fr; } } /* --- Scheduler Style Color Input --- */ .jqx-color-input-drop-down-menu.jqx-kanban-color-input .grid-samples-container { grid-template-columns: repeat(2, minmax(0, 1fr)); } .jqx-color-input-drop-down-menu.jqx-kanban-color-input:not([animation=none]) .default-samples-container div { transition: transform 0.2s ease-in-out; } .jqx-color-input-drop-down-menu.jqx-kanban-color-input .default-samples-container div { position: relative; border-radius: 50%; border: initial; transform: scale(0.95); } .jqx-color-input-drop-down-menu.jqx-kanban-color-input .default-samples-container div.selected { transform: scale(1); } .jqx-color-input-drop-down-menu.jqx-kanban-color-input .default-samples-container div.selected:not(.no-color):after { content: var(--jqx-icon-check); width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: flex; justify-content: center; align-items: center; font-family: var(--jqx-font-family-icon); color: var(--jqx-secondary-color); border-radius: inherit; } .jqx-kanban-color-input { --jqx-input-drop-down-menu-width: auto; } .jqx-kanban-color-input --jqx-input-drop-down-menu-width { width: 98px; } .jqx-kanban-color-input .default-samples-container { display: flex; } .jqx-kanban-color-input.jqx-color-picker { background: transparent !important; } .jqx-kanban-color-input .jqx-action-button { width: 100%; background: transparent !important; border: none !important; } .jqx-kanban-color-input .jqx-action-button .jqx-color-box { border-radius: 50%; } .jqx-kanban-color-input .jqx-drop-down-button { display: none; } .jqx-kanban-list.dialog { position: absolute; border: var(--jqx-border-width) solid var(--jqx-border); border-top-left-radius: var(--jqx-border-top-left-radius); border-top-right-radius: var(--jqx-border-top-right-radius); border-bottom-left-radius: var(--jqx-border-bottom-left-radius); border-bottom-right-radius: var(--jqx-border-bottom-right-radius); width: var(--jqx-kanban-user-list-width); max-height: var(--jqx-kanban-user-list-max-height); background-color: var(--jqx-background); box-shadow: var(--jqx-elevation-8); overflow: auto; transform: scaleY(1); transform-origin: top; opacity: 1; z-index: 15; } .jqx-kanban-list.dialog.comments .jqx-kanban-comments, .jqx-kanban-list.dialog.comments .jqx-kanban-new-comment, .jqx-kanban-list.dialog.comments .jqx-kanban-new-comment textarea { transition: height 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .jqx-kanban-list.dialog:focus { outline: 1px solid var(--jqx-primary); } .jqx-kanban-list.dialog .item { display: flex; align-items: center; min-height: calc(var(--jqx-kanban-user-icon-size) + 10px); padding: 5px 10px; cursor: pointer; } .jqx-kanban-list.dialog .item:hover { background-color: var(--jqx-ui-state-hover); color: var(--jqx-ui-state-color-hover); } .jqx-kanban-list.dialog .item.selected { border-left: var(--jqx-kanban-color-band-width) solid var(--jqx-primary); padding-left: 7px; background-color: var(--jqx-ui-state-selected); color: var(--jqx-ui-state-color-selected); } .jqx-kanban-list.dialog .item[disabled] { opacity: 0.55; pointer-events: none; } .jqx-kanban-list.dialog .icon { margin-right: 10px; border-radius: 50%; width: var(--jqx-kanban-user-icon-size); min-width: var(--jqx-kanban-user-icon-size); height: var(--jqx-kanban-user-icon-size); background-size: cover; background-position: center; } .jqx-kanban-list.dialog .name { overflow: hidden; text-overflow: ellipsis; } .jqx-kanban-list.dialog.jqx-visibility-hidden { transform: scaleY(0); opacity: 0; } .jqx-kanban-list.dialog.actions.edit-comment .item[data-id="1"] { display: none; } .jqx-kanban-list.dialog.comments { width: var(--jqx-kanban-comments-list-width); height: var(--jqx-kanban-comments-list-height); max-height: 100%; } .jqx-kanban-list.dialog.comments .jqx-kanban-comments { height: calc(100% - var(--jqx-kanban-new-comment-height)); overflow: auto; } .jqx-kanban-list.dialog.comments .jqx-kanban-new-comment { border-top: var(--jqx-border-width) solid var(--jqx-border); height: var(--jqx-kanban-new-comment-height); padding: var(--jqx-data-view-padding); overflow: hidden; } .jqx-kanban-list.dialog.comments .jqx-kanban-new-comment textarea { resize: none; width: 100%; height: 100%; border: var(--jqx-border-width) solid var(--jqx-border); border-top-right-radius: var(--jqx-border-top-right-radius); border-top-left-radius: var(--jqx-border-top-left-radius); border-bottom-left-radius: var(--jqx-border-bottom-left-radius); border-bottom-right-radius: var(--jqx-border-bottom-right-radius); background-color: var(--jqx-background); color: var(--jqx-background-color); font-family: inherit; font-size: inherit; } .jqx-kanban-list.dialog.comments .jqx-kanban-new-comment textarea:focus { outline: none; border-color: var(--jqx-outline); } .jqx-kanban-list.dialog.comments .jqx-kanban-new-comment textarea:hover { border-color: var(--jqx-ui-state-border-hover); } .jqx-kanban-list.dialog.comments .jqx-kanban-new-comment textarea[disabled] { opacity: 0.5; } .jqx-kanban-list.dialog.comments .jqx-kanban-new-comment jqx-button { --jqx-button-padding: 0; display: none; margin-left: auto; height: var(--jqx-kanban-send-button-height); } .jqx-kanban-list.dialog.comments .jqx-kanban-new-comment jqx-button[disabled] { pointer-events: unset; cursor: not-allowed; } .jqx-kanban-list.dialog.comments.expanded .jqx-kanban-comments { height: calc(100% - var(--jqx-kanban-new-comment-height-expanded)); } .jqx-kanban-list.dialog.comments.expanded .jqx-kanban-new-comment { height: var(--jqx-kanban-new-comment-height-expanded); } .jqx-kanban-list.dialog.comments.expanded .jqx-kanban-new-comment textarea { margin-bottom: var(--jqx-data-view-padding); height: calc(100% - var(--jqx-data-view-padding) - var(--jqx-kanban-send-button-height)); display: block; } .jqx-kanban-list.dialog.comments.expanded .jqx-kanban-new-comment jqx-button { display: block; } .jqx-comment { display: grid; grid-template-columns: var(--jqx-kanban-user-icon-size) 1fr; grid-column-gap: var(--jqx-data-view-padding); margin: var(--jqx-data-view-padding); } .jqx-comment .comment-header { display: grid; grid-template-columns: 1fr auto auto; grid-column-gap: calc(var(--jqx-data-view-padding) / 2); margin-bottom: var(--jqx-data-view-padding); } .jqx-comment .user-icon { width: 100%; height: var(--jqx-kanban-user-icon-size); border-radius: 50%; background-size: cover; background-position: center; } .jqx-comment .user-icon.empty { background: var(--jqx-surface); display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--jqx-border); } .jqx-comment .user-icon.empty:after { content: var(--jqx-icon-user); font-family: var(--jqx-font-family-icon); font-size: 20px; } .jqx-comment .user-name { font-weight: bold; } .jqx-comment .time { opacity: 0.8; } .jqx-comment .remove-button { visibility: hidden; transform: rotate(90deg); width: 16px; cursor: pointer; } .jqx-comment .remove-button:after { content: var(--jqx-icon-ellipsis); display: flex; align-items: center; justify-content: center; height: 100%; font-family: var(--jqx-font-family-icon); cursor: pointer; } .jqx-comment .remove-button.enabled { visibility: visible; } .jqx-kanban-task-text { display: flex; align-items: center; } .jqx-kanban-task-text .priority { font-family: var(--jqx-font-family-icon); margin-left: 5px; display: inline-block; width: 16px; height: 16px; } .jqx-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"); } .jqx-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"); } .jqx-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"); } .jqx-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"); } .jqx-kanban[right-to-left] .jqx-kanban-body, .jqx-kanban[right-to-left] .jqx-kanban-column-header-label, .jqx-kanban[right-to-left] .swimlane { direction: rtl; } .jqx-kanban[right-to-left] .jqx-kanban-column.collapsed > .jqx-kanban-column-header > .jqx-kanban-column-header-label { margin-bottom: auto; } .jqx-kanban[right-to-left] .jqx-kanban-column:not(.collapsed) .jqx-kanban-column-header .jqx-arrow { transform: rotate(180deg); } .jqx-kanban[right-to-left] .jqx-kanban-list { direction: rtl; } .jqx-kanban[right-to-left] .jqx-kanban-list .icon { margin-left: 10px; margin-right: unset; } .jqx-kanban[right-to-left] .jqx-kanban-list .item.selected { border-left: unset; border-right: var(--jqx-kanban-color-band-width) solid var(--jqx-primary); padding-left: 10px; padding-right: 7px; } .jqx-kanban[right-to-left][add-new-button] .jqx-kanban-column[add-new-button] > .jqx-kanban-column-header > .jqx-kanban-column-header-add::after { padding: 0 0 10px 10px; } .jqx-kanban-feedback[right-to-left] .jqx-kanban-task { direction: rtl; } [right-to-left] .jqx-kanban-task { border-left: var(--jqx-border-width) solid var(--jqx-border); border-right: var(--jqx-kanban-color-band-width) solid var(--jqx-primary); border-top-left-radius: var(--jqx-border-top-right-radius); border-bottom-left-radius: var(--jqx-border-bottom-right-radius); border-top-right-radius: 0; border-bottom-right-radius: 0; } [right-to-left] .jqx-kanban-task-progress { left: unset; right: 0; } /* jqx-list-item */ jqx-list-item, jqx-list-items-group { visibility: hidden; } jqx-list-item.jqx-element, jqx-list-items-group.jqx-element { border: none; visibility: inherit; } jqx-list-item .jqx-input, jqx-list-items-group .jqx-input { width: calc(-4px + var(--jqx-check-box-default-size)); height: calc(-4px + var(--jqx-check-box-default-size)); line-height: var(--jqx-check-box-default-size); box-sizing: initial; position: absolute; top: var(--jqx-list-item-vertical-offset); margin-top: calc(var(--jqx-list-item-height) / 2 - 10px); border-style: solid; padding: 3px; border-width: var(--jqx-border-width); border-radius: var(--jqx-border-radius); font-family: inherit; background-repeat: no-repeat; border-color: var(--jqx-border); background-color: var(--jqx-background); color: var(--jqx-background-color); display: block; } jqx-list-item .jqx-input:after, jqx-list-items-group .jqx-input:after { content: ""; font-family: var(--jqx-font-family-icon); display: flex; justify-content: center; align-content: center; margin-top: -2px; } jqx-list-item .jqx-input.jqx-hidden, jqx-list-items-group .jqx-input.jqx-hidden { display: none; } jqx-list-item[selected] .jqx-input, jqx-list-items-group[selected] .jqx-input { border-color: var(--jqx-primary); background-color: var(--jqx-primary); color: var(--jqx-primary-color); } jqx-list-item[indeterminate] .jqx-input, jqx-list-items-group[indeterminate] .jqx-input { border-color: var(--jqx-border); background-color: var(--jqx-background); color: var(--jqx-background); } jqx-list-item[indeterminate] .jqx-input::after, jqx-list-items-group[indeterminate] .jqx-input::after { content: " " !important; padding: 6px; margin-top: 0px; border-color: var(--jqx-ui-state-selected); background-color: var(--jqx-ui-state-selected); color: var(--jqx-primary-color); } jqx-list-item[hover] .jqx-input:hover, jqx-list-items-group[hover] .jqx-input:hover { border-color: var(--jqx-ui-state-border-hover); background-color: var(--jqx-ui-state-hover); color: var(--jqx-ui-state-color-hover); } jqx-list-item[display-mode=checkBox][selected] .jqx-input:after, jqx-list-items-group[display-mode=checkBox][selected] .jqx-input:after { content: var(--jqx-icon-check); } jqx-list-item { background-color: inherit; -webkit-font-smoothing: antialiased; letter-spacing: 0.00937em; width: 100%; outline: 0 none; display: flex; align-items: center; padding: 0 5px; height: calc(var(--jqx-list-item-height) + var(--jqx-list-item-vertical-offset)); position: relative; user-select: none; } jqx-list-item .jqx-container { display: flex; align-items: center; } jqx-list-item .jqx-overlay { transition: opacity 280ms ease-in-out; display: inline-block; position: absolute; overflow: hidden; width: 100%; height: calc(100% - var(--jqx-list-item-vertical-offset)); left: 0px; top: var(--jqx-list-item-vertical-offset); background: var(--jqx-background); border-top-left-radius: var(--jqx-item-border-top-left-radius); border-top-right-radius: var(--jqx-item-border-top-right-radius); border-bottom-left-radius: var(--jqx-item-border-bottom-left-radius); border-bottom-right-radius: var(--jqx-item-border-bottom-right-radius); } jqx-list-item .jqx-content { transition: opacity 280ms ease-in-out; position: absolute; overflow: hidden; white-space: nowrap; display: flex; align-items: flex-start; flex-direction: column; justify-content: center; padding: var(--jqx-list-item-padding); width: 100%; height: calc(100% - var(--jqx-list-item-vertical-offset)); left: 0px; top: var(--jqx-list-item-vertical-offset); color: var(--jqx-background-color); border-width: var(--jqx-item-border-width); border-style: solid; border-color: transparent; border-top-left-radius: var(--jqx-item-border-top-left-radius); border-top-right-radius: var(--jqx-item-border-top-right-radius); border-bottom-left-radius: var(--jqx-item-border-bottom-left-radius); border-bottom-right-radius: var(--jqx-item-border-bottom-right-radius); } jqx-list-item .jqx-content-details { opacity: 0.5; margin-top: 2px; font-size: 10px; } jqx-list-item .jqx-input { cursor: pointer; } jqx-list-item .jqx-input:before { content: ""; width: 100%; height: 100%; display: inline-block; position: absolute; left: 0; top: 2px; text-align: center; background: var(--jqx-primary) !important; transition: opacity 0.2s ease-in-out; opacity: 0; border-radius: 100%; transform: scale(1); } jqx-list-item .jqx-ripple { background: var(--jqx-list-item-color-active); } jqx-list-item.jqx-list-item-line-feedback { border-top-color: var(--jqx-secondary); border-top-width: 1px; border-top-style: dashed; } jqx-list-item.jqx-list-item-bottom-line-feedback { border-bottom-color: var(--jqx-secondary); border-bottom-width: 1px; border-bottom-style: dashed; } jqx-list-item.jqx-header-item { color: var(--jqx-surface-color); text-transform: var(--jqx-list-item-group-header-text-transform); top: var(--jqx-list-item-vertical-offset); margin-bottom: var(--jqx-list-item-vertical-offset); background: var(--jqx-surface); border-width: 1px; border-style: solid; border-color: var(--jqx-surface); display: flex; align-items: center; } jqx-list-item[grouped] { color: var(--jqx-surface-color); text-transform: var(--jqx-list-item-group-header-text-transform); top: var(--jqx-list-item-vertical-offset); margin-bottom: var(--jqx-list-item-vertical-offset); background: var(--jqx-surface); border-width: 1px; border-style: solid; border-color: var(--jqx-surface); display: flex; align-items: center; } jqx-list-item:focus { outline: none; } jqx-list-item:focus .jqx-input { outline: none; } jqx-list-item[hover] .jqx-overlay { background-color: var(--jqx-ui-state-hover); } jqx-list-item[hover] .jqx-content { color: var(--jqx-ui-state-color-hover); border-color: var(--jqx-ui-state-border-hover); } jqx-list-item[selected] .jqx-overlay { background-color: var(--jqx-ui-state-selected); } jqx-list-item[selected] .jqx-content { color: var(--jqx-ui-state-color-selected); border-color: var(--jqx-ui-state-border-selected); } jqx-list-item[selected].jqx-list-item-line-feedback { border-top-color: var(--jqx-secondary); border-top-width: 1px; border-top-style: dashed; } jqx-list-item[selected].jqx-list-item-bottom-line-feedback { border-bottom-color: var(--jqx-secondary); border-bottom-width: 1px; border-bottom-style: dashed; } jqx-list-item[display-mode=radioButton] .jqx-overlay, jqx-list-item[display-mode=radioButton] .jqx-content, jqx-list-item[display-mode=checkBox] .jqx-overlay, jqx-list-item[display-mode=checkBox] .jqx-content { padding: 5px; left: calc(16px + var(--jqx-check-box-default-size)); width: calc(100% - 16px - var(--jqx-check-box-default-size)); } jqx-list-item[display-mode=radioButton][selected][alternation-index="0"] .jqx-overlay, jqx-list-item[display-mode=checkBox][selected][alternation-index="0"] .jqx-overlay { background-color: var(--jqx-alternation-index0-background); color: var(--jqx-alternation-index0-color); border-color: var(--jqx-alternation-index0-border); } jqx-list-item[display-mode=radioButton][selected][alternation-index="1"] .jqx-overlay, jqx-list-item[display-mode=checkBox][selected][alternation-index="1"] .jqx-overlay { background-color: var(--jqx-alternation-index1-background); color: var(--jqx-alternation-index1-color); border-color: var(--jqx-alternation-index1-border); } jqx-list-item[display-mode=radioButton][selected][alternation-index="2"] .jqx-overlay, jqx-list-item[display-mode=checkBox][selected][alternation-index="2"] .jqx-overlay { background-color: var(--jqx-alternation-index2-background); color: var(--jqx-alternation-index2-color); border-color: var(--jqx-alternation-index2-border); } jqx-list-item[display-mode=radioButton] .jqx-input { border-radius: 100%; } jqx-list-item[display-mode=radioButton][selected] .jqx-input:after { content: var(--jqx-icon-radio); } jqx-list-items-group > .jqx-container { height: auto; } jqx-list-items-group .jqx-list-items-group-label { background-color: inherit; -webkit-font-smoothing: antialiased; letter-spacing: 0.00937em; width: 100%; outline: 0 none; padding: 0 5px; height: calc(var(--jqx-list-item-height) + var(--jqx-list-item-vertical-offset)); position: relative; user-select: none; color: var(--jqx-surface-color); top: var(--jqx-list-item-vertical-offset); margin-bottom: var(--jqx-list-item-vertical-offset); background: var(--jqx-surface); border-width: 1px; border-style: solid; border-color: var(--jqx-surface); display: flex; align-items: center; text-transform: capitalize; border-radius: initial; } jqx-list-items-group .jqx-list-items-group-label .jqx-container { display: flex; align-items: center; } jqx-list-items-group:focus .jqx-input { outline: none; } jqx-list-box { /*min-width: 100px;*/ display: block; width: var(--jqx-list-box-default-width); height: var(--jqx-list-box-default-height); visibility: hidden; } jqx-list-box.jqx-element { visibility: inherit; } jqx-list-box:focus { outline: none; border-color: var(--jqx-outline); } jqx-list-box:focus jqx-list-item[focus] .jqx-overlay { background-color: var(--jqx-ui-state-focus); } jqx-list-box:focus jqx-list-item[focus] .jqx-content { color: var(--jqx-ui-state-color-focus); border-color: var(--jqx-ui-state-border-focus); } jqx-list-box:focus jqx-list-item[focus][selected] .jqx-overlay { background-color: var(--jqx-ui-state-selected); } jqx-list-box:focus jqx-list-item[focus][selected] .jqx-content { color: var(--jqx-ui-state-color-selected); border-color: var(--jqx-ui-state-border-selected); } jqx-list-box jqx-scroll-bar[orientation=vertical].bottom-corner { height: calc(100% - var(--jqx-scroll-bar-size)); } .jqx-list-box > .jqx-container, .jqx-list-box.jqx-container { height: 100%; width: 100%; border-style: solid; border-width: 0; border-color: gray; position: relative; overflow: hidden; } .jqx-list-box jqx-list-item.jqx-header-item[hover] { color: inherit; } .jqx-list-box jqx-list-item[alternation-index="0"] .jqx-overlay { background-color: var(--jqx-alternation-index0-background); color: var(--jqx-alternation-index0-color); border-color: var(--jqx-alternation-index0-border); } .jqx-list-box jqx-list-item[alternation-index="1"] .jqx-overlay { background-color: var(--jqx-alternation-index1-background); color: var(--jqx-alternation-index1-color); border-color: var(--jqx-alternation-index1-border); } .jqx-list-box jqx-list-item[alternation-index="2"] .jqx-overlay { background-color: var(--jqx-alternation-index2-background); color: var(--jqx-alternation-index2-color); border-color: var(--jqx-alternation-index2-border); } .jqx-list-box jqx-scroll-bar { overflow: visible; position: absolute; bottom: 0; height: calc(var(--jqx-scroll-bar-size)); width: 100%; } .jqx-list-box jqx-scroll-bar:after { position: absolute; content: ""; width: 100%; height: var(--jqx-scroll-bar-size); background: var(--jqx-scroll-bar-background); left: 100%; top: 0px; } .jqx-list-box jqx-scroll-bar.bottom-corner { width: calc(100% - var(--jqx-scroll-bar-size)); } .jqx-list-box jqx-scroll-bar[orientation=vertical] { right: 0; top: 0; height: 100%; width: calc(var(--jqx-scroll-bar-size)); } .jqx-list-box input { border: var(--jqx-border-width) solid var(--jqx-border); width: 100%; height: 100%; padding: var(--jqx-editor-label-padding); outline: initial; padding-right: 25px; background: inherit; color: inherit; } .jqx-list-box input:focus { border-color: var(--jqx-outline); } .jqx-list-box .jqx-list-box-filter-input-container { position: relative; width: calc(100% - 10px); height: 36px; margin-left: 5px; margin-top: 5px; } .jqx-list-box .jqx-list-box-filter-input-container input { border-radius: var(--jqx-border-radius); height: calc(100% - 2 * var(--jqx-border-width)); } .jqx-list-box .jqx-list-box-filter-input-container input:hover { border-color: var(--jqx-ui-state-border-hover); } .jqx-list-box .jqx-list-box-filter-input-container input:focus { border-color: var(--jqx-primary); outline: 1px solid var(--jqx-primary); } .jqx-list-box .jqx-list-box-filter-input-container:after { content: var(--jqx-icon-search); font-family: var(--jqx-font-family-icon); position: absolute; top: calc(50% - var(--jqx-font-size) / 2); height: var(--jqx-font-size); display: flex; align-items: center; justify-content: center; left: calc(100% - 25px); } .jqx-list-box .jqx-list-box-filter-input-container.vscroll { width: calc(100% - 10px - var(--jqx-scroll-bar-size)); } .jqx-list-box .jqx-list-items-container { width: 100%; height: calc(100% - var(--jqx-list-item-vertical-offset)); /* right: var(--jqx-list-item-horizontal-offset); */ overflow: hidden; position: relative; background-color: transparent; } .jqx-list-box .jqx-list-items-container input { position: absolute; background: initial; background-color: var(--jqx-background); background-size: initial; border: 1px solid var(--jqx-border); padding: 9px 12px; margin: 0; left: 5px; width: calc(100% - 5px); font-family: inherit; font-size: inherit; border-top-left-radius: var(--jqx-item-border-top-left-radius); border-top-right-radius: var(--jqx-item-border-top-right-radius); border-bottom-left-radius: var(--jqx-item-border-bottom-left-radius); border-bottom-right-radius: var(--jqx-item-border-bottom-right-radius); } .jqx-list-box .jqx-list-items-container.hscroll { height: calc(100% - var(--jqx-scroll-bar-size) - var(--jqx-list-item-vertical-offset)); } .jqx-list-box .jqx-list-items-container.filter { height: calc(100% - var(--jqx-text-box-default-height) - 10px); } .jqx-list-box .jqx-list-items-container.hscroll.filter { height: calc(100% - var(--jqx-text-box-default-height) - var(--jqx-scroll-bar-size) - 10px - var(--jqx-list-item-vertical-offset)); } .jqx-list-box .jqx-list-items-inner-container { width: calc(100% - 2 * var(--jqx-list-item-horizontal-offset)); height: 100%; display: block; position: relative; background-color: transparent; } .jqx-list-box .jqx-placeholder { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); user-select: none; text-align: center; } .jqx-list-box .jqx-content-label { padding: var(--jqx-list-item-label-padding); border-radius: var(--jqx-list-item-label-border-radius); } .jqx-list-box[disabled] jqx-list-item { color: inherit; } .jqx-list-box[horizontal-scroll-bar-visibility=hidden] jqx-list-item .jqx-content { white-space: initial; } .jqx-list-box[selection-mode=checkBox]:focus jqx-list-item[focus][selected] .jqx-input:before, .jqx-list-box[selection-mode=checkBox][focus] jqx-list-item[focus][selected] .jqx-input:before, .jqx-list-box[selection-mode=radioButton]:focus jqx-list-item[focus][selected] .jqx-input:before, .jqx-list-box[selection-mode=radioButton][focus] jqx-list-item[focus][selected] .jqx-input:before { position: absolute; content: ""; border-radius: 50%; width: calc(var(--jqx-check-box-default-size) + 14px); height: calc(var(--jqx-check-box-default-size) + 14px); background: var(--jqx-primary); opacity: 0.3; z-index: 1; top: 50%; left: 50%; transform: translate(-50%, -50%); } .jqx-list-box:not([right-to-left]) .jqx-list-items-inner-container { margin-left: var(--jqx-list-item-horizontal-offset); } [type=list][opened][focus] jqx-list-item[focus] .jqx-overlay { background-color: var(--jqx-ui-state-selected); } [type=list][opened][focus] jqx-list-item[focus] .jqx-content { color: var(--jqx-ui-state-color-selected); border-color: var(--jqx-ui-state-border-selected); } [type=list][opened][focus] jqx-list-item[focus]:not([selected]) .jqx-overlay { background-color: var(--jqx-ui-state-focus); } [type=list][opened][focus] jqx-list-item[focus]:not([selected]) .jqx-content { color: var(--jqx-ui-state-color-focus); border-color: var(--jqx-ui-state-border-focus); } [type=list][opened][focus] jqx-list-item[focus][selected] .jqx-overlay { background-color: var(--jqx-ui-state-selected); } [type=list][opened][focus] jqx-list-item[focus][selected] .jqx-content { color: var(--jqx-ui-state-color-selected); border-color: var(--jqx-ui-state-border-selected); } .jqx-list-item-feedback { background-color: var(--jqx-surface); color: var(--jqx-surface-color); border-color: var(--jqx-border); border-width: 1px; border-style: solid; box-shadow: var(--jqx-elevation-8); cursor: move; padding: 0px; z-index: var(--jqx-drop-down-z-index); width: 200px; } .jqx-list-item-feedback jqx-list-item { padding: 0px; border: none; } .jqx-list-item-feedback jqx-list-item .jqx-overlay { background-color: inherit; border-color: transparent; border: none; } .jqx-list-item-feedback jqx-list-item .jqx-content { border-color: transparent; color: inherit; } .jqx-drop-down jqx-list-box jqx-scroll-bar[orientation=vertical] { right: 0; top: 0; height: 100%; width: calc(var(--jqx-scroll-bar-size)); } .jqx-list-box[right-to-left] { direction: initial; } .jqx-list-box[right-to-left] jqx-scroll-bar { left: initial; right: 0; } .jqx-list-box[right-to-left] jqx-scroll-bar:after { left: -100%; } .jqx-list-box[right-to-left] jqx-scroll-bar[orientation=vertical] { left: 0; right: initial; } .jqx-list-box[right-to-left] jqx-scroll-bar[orientation=vertical]:after { content: none; } .jqx-list-box[right-to-left] jqx-list-item .jqx-list-item-container { direction: rtl; left: 0; } .jqx-list-box[right-to-left] jqx-list-item[display-mode=radioButton] .jqx-overlay, .jqx-list-box[right-to-left] jqx-list-item[display-mode=checkBox] .jqx-overlay { left: 0; } .jqx-list-box[right-to-left] jqx-list-items-group .jqx-list-items-group-label { direction: rtl; } .jqx-list-box[right-to-left] .jqx-list-items-inner-container { margin-right: var(--jqx-list-item-horizontal-offset); } .jqx-list-box[right-to-left] .jqx-list-box-filter-input-container.vscroll { left: initial; right: 0; } .jqx-list-box[right-to-left] .jqx-list-items-container { direction: rtl; } .jqx-list-box[right-to-left] .jqx-list-items-container input { direction: rtl; } .jqx-list-box[right-to-left] .jqx-list-items-container.vscroll { left: var(--jqx-scroll-bar-size); right: initial; } .jqx-list-box[right-to-left] .jqx-list-items-container.vscroll .jqx-list-items-inner-container { margin-right: var(--jqx-list-item-horizontal-offset); } .jqx-popup.jqx-list-item.jqx-list-item-feedback[right-to-left] jqx-list-item .jqx-list-item-container { direction: rtl; left: 0; } /* jqx-list-menu */ jqx-list-menu { width: var(--jqx-list-menu-default-width); height: var(--jqx-list-menu-default-height); display: block; background: var(--jqx-background); border: var(--jqx-border-width) solid var(--jqx-border); border-top-left-radius: var(--jqx-border-top-left-radius); border-top-right-radius: var(--jqx-border-top-right-radius); border-bottom-left-radius: var(--jqx-border-bottom-left-radius); border-bottom-right-radius: var(--jqx-border-bottom-right-radius); outline: none; color: var(--jqx-background-color); visibility: hidden; } jqx-list-menu:focus { border-color: var(--jqx-outline); } jqx-list-menu > .jqx-container { position: relative; display: flex; } jqx-list-menu.jqx-element { visibility: inherit; } jqx-list-menu .jqx-ripple { background: var(--jqx-ui-state-focus); } jqx-list-menu[minimized] { height: auto; overflow: visible; border: var(--jqx-border-width) solid var(--jqx-border); background: var(--jqx-surface); } jqx-list-menu[drop-down-position|=top] .jqx-list-menu-view-minimized { top: calc(-1 * var(--jqx-border-width)); transform: translateY(-100%); box-shadow: var(--jqx-elevation-8); } jqx-list-menu[drop-down-position$=left] .jqx-list-menu-view-minimized { left: initial; right: calc(-1 * var(--jqx-border-width)); } jqx-list-menu:not([animation=none]) .jqx-hamburger-icon-line { transition: visibility 0.02s ease-in, transform 0.2s ease-in, width 0.2s ease-in; } jqx-tree .jqx-filter-input:focus { outline: none; } .jqx-list-menu.jqx-container { position: relative; display: flex; } .jqx-list-menu jqx-menu-items-group[hover], .jqx-list-menu jqx-menu-item[hover] { background: var(--jqx-ui-state-hover); border-color: var(--jqx-ui-state-border-hover); color: var(--jqx-ui-state-color-hover); } .jqx-list-menu .jqx-hamburger-icon { width: 40px; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; float: none; cursor: pointer; margin-top: 2px; } .jqx-list-menu .jqx-hamburger-icon .jqx-hamburger-icon-custom-container { height: 100%; display: flex; align-items: center; } .jqx-list-menu .jqx-hamburger-icon.jqx-close-button > .jqx-hamburger-icon-line-top { width: 29px; transform: translateX(4px) rotate(45deg); } .jqx-list-menu .jqx-hamburger-icon.jqx-close-button > .jqx-hamburger-icon-line-center { visibility: hidden; } .jqx-list-menu .jqx-hamburger-icon.jqx-close-button > .jqx-hamburger-icon-line-bottom { width: 29px; transform: translateX(4px) rotate(-45deg); } .jqx-list-menu .jqx-hamburger-icon-line { margin-bottom: 5px; border-radius: 10px; width: 30px; height: 5px; background-color: var(--jqx-surface-color); transform-origin: left; } .jqx-list-menu .jqx-hamburger-icon-line-bottom { margin-bottom: 0; } .jqx-list-menu .jqx-list-menu-view-minimized { left: calc(-1 * var(--jqx-border-width)); top: calc(100% + var(--jqx-border-width)); } .jqx-list-menu .jqx-list-menu-view-minimized.jqx-visibility-hidden.not-in-view { left: -9999px; top: -9999px; transition: none; } .jqx-list-menu[minimized] .jqx-minimized-header { background: var(--jqx-surface); justify-content: flex-end; } .jqx-list-menu[disabled] jqx-menu-item, .jqx-list-menu[disabled] jqx-menu-items-group, .jqx-list-menu[disabled] .jqx-hamburger-icon { cursor: default; } .jqx-list-menu[disabled] .jqx-hamburger-icon { cursor: default; } .jqx-list-menu[minimize-icon-template] .jqx-hamburger-icon { width: auto; float: left; } .jqx-list-menu:not([animation=none]) .jqx-hamburger-icon-line { transition: visibility 0.02s ease-in, transform 0.2s ease-in, width 0.2s ease-in; } .jqx-list-menu:not([animation=none]) .jqx-list-menu-view-minimized { opacity: 1; transform: scaleY(1); margin: 8px 0px; -webkit-transform-origin: top; transform-origin: top; transition: opacity 0.2s ease-in, visibility 0.2s ease-in, transform 0.2s ease-in; } .jqx-list-menu:not([animation=none]) .jqx-list-menu-view-minimized.jqx-visibility-hidden { opacity: 0.2; transform: scaleY(0); } .jqx-list-menu[minimize-icon-template=null] .jqx-hamburger-icon { width: 40px; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; float: none; cursor: pointer; margin-top: 2px; } .jqx-list-menu[drop-down-position*=top] .jqx-list-menu-view-minimized { margin: -8px 0px; } .jqx-list-menu[drop-down-position|=top]:not([animation=none]) .jqx-list-menu-view-minimized { transform: translateY(-100%) scaleY(1); -webkit-transform-origin: bottom; transform-origin: bottom; } .jqx-list-menu[drop-down-position|=top]:not([animation=none]) .jqx-list-menu-view-minimized.jqx-visibility-hidden { transform: translateY(-100%) scaleY(0); } .jqx-list-menu jqx-menu-item, .jqx-list-menu jqx-menu-items-group, .jqx-list-menu-view.jqx-drop-down-repositioned jqx-menu-item, .jqx-list-menu-view.jqx-drop-down-repositioned jqx-menu-items-group { padding: 10px 0; } .jqx-list-menu jqx-menu-item.jqx-element, .jqx-list-menu jqx-menu-items-group.jqx-element, .jqx-list-menu-view.jqx-drop-down-repositioned jqx-menu-item.jqx-element, .jqx-list-menu-view.jqx-drop-down-repositioned jqx-menu-items-group.jqx-element { display: block; width: 100%; height: auto; overflow: hidden; } .jqx-list-menu jqx-menu-item[separator]:last-child, .jqx-list-menu jqx-menu-items-group[separator]:last-child, .jqx-list-menu-view.jqx-drop-down-repositioned jqx-menu-item[separator]:last-child, .jqx-list-menu-view.jqx-drop-down-repositioned jqx-menu-items-group[separator]:last-child { border-bottom: none; } .jqx-list-menu jqx-menu-items-group.jqx-menu-items-group-opened[separator], .jqx-list-menu-view.jqx-drop-down-repositioned jqx-menu-items-group.jqx-menu-items-group-opened[separator] { border-bottom: none; } .jqx-list-menu .jqx-header, .jqx-list-menu-view.jqx-drop-down-repositioned .jqx-header { background: var(--jqx-primary); color: var(--jqx-primary-color); border-color: var(--jqx-primary); box-shadow: var(--jqx-elevation-4); z-index: 3; padding: 0px 16px; display: flex; align-items: center; justify-content: center; position: relative; width: 100%; height: var(--jqx-bar-height); border-bottom: var(--jqx-border-width) solid var(--jqx-primary); overflow: hidden; } .jqx-list-menu .jqx-header > jqx-button, .jqx-list-menu-view.jqx-drop-down-repositioned .jqx-header > jqx-button { position: absolute; width: 50px; height: 100%; left: 0; top: 0; background: inherit; border: inherit; color: inherit; } .jqx-list-menu .jqx-header > jqx-button > .jqx-button, .jqx-list-menu-view.jqx-drop-down-repositioned .jqx-header > jqx-button > .jqx-button { border: none; } .jqx-list-menu .jqx-header > jqx-button .jqx-arrow:after, .jqx-list-menu-view.jqx-drop-down-repositioned .jqx-header > jqx-button .jqx-arrow:after { font-size: calc(var(--jqx-font-size) - 3px); color: inherit; } .jqx-list-menu .jqx-menu-scroll-button, .jqx-list-menu-view.jqx-drop-down-repositioned .jqx-menu-scroll-button { display: block; background-color: var(--jqx-scroll-bar-background); color: var(--jqx-scroll-bar-color); border-radius: 0px; border-left: none; border-right: none; width: 100%; height: var(--jqx-menu-scroll-button-size); } .jqx-list-menu .jqx-menu-scroll-button > button, .jqx-list-menu-view.jqx-drop-down-repositioned .jqx-menu-scroll-button > button { border: none; min-height: 0; } .jqx-list-menu .jqx-menu-scroll-button:last-of-type, .jqx-list-menu-view.jqx-drop-down-repositioned .jqx-menu-scroll-button:last-of-type { border-bottom: none; } .jqx-list-menu .jqx-hidden, .jqx-list-menu-view.jqx-drop-down-repositioned .jqx-hidden { display: none !important; } .jqx-list-menu .jqx-title, .jqx-list-menu-view.jqx-drop-down-repositioned .jqx-title { display: flex; align-items: center; font-size: calc(var(--jqx-font-size) + 2px); } .jqx-list-menu .jqx-menu-item-label-container, .jqx-list-menu-view.jqx-drop-down-repositioned .jqx-menu-item-label-container { display: flex; position: relative; justify-content: space-between; padding: 10px; width: 100%; } .jqx-list-menu .jqx-menu-main-container, .jqx-list-menu-view.jqx-drop-down-repositioned .jqx-menu-main-container { width: 100%; height: 100%; overflow: hidden; position: relative; } .jqx-list-menu .jqx-menu-main-container .jqx-scroll-viewer-content-container, .jqx-list-menu-view.jqx-drop-down-repositioned .jqx-menu-main-container .jqx-scroll-viewer-content-container { width: 100%; } .jqx-list-menu .jqx-menu-main-container.header-shown, .jqx-list-menu-view.jqx-drop-down-repositioned .jqx-menu-main-container.header-shown { height: calc(100% - var(--jqx-bar-height)); } .jqx-list-menu .jqx-menu-main-container.header-shown.scroll-buttons-shown, .jqx-list-menu-view.jqx-drop-down-repositioned .jqx-menu-main-container.header-shown.scroll-buttons-shown { height: calc(100% - var(--jqx-bar-height) - 2 * var(--jqx-menu-scroll-button-size)); } .jqx-list-menu .jqx-menu-main-container.header-shown.scroll-buttons-shown.one-button-shown, .jqx-list-menu-view.jqx-drop-down-repositioned .jqx-menu-main-container.header-shown.scroll-buttons-shown.one-button-shown { height: calc(100% - var(--jqx-bar-height) - var(--jqx-menu-scroll-button-size)); } .jqx-list-menu .jqx-menu-main-container.header-shown.scroll-buttons-shown.one-button-shown.filter-input-shown, .jqx-list-menu-view.jqx-drop-down-repositioned .jqx-menu-main-container.header-shown.scroll-buttons-shown.one-button-shown.filter-input-shown { height: calc(100% - var(--jqx-bar-height) - var(--jqx-menu-scroll-button-size) - var(--jqx-text-box-default-height) - 2 * var(--jqx-list-menu-filter-input-vertical-offset)); } .jqx-list-menu .jqx-menu-main-container.header-shown.scroll-buttons-shown.filter-input-shown, .jqx-list-menu-view.jqx-drop-down-repositioned .jqx-menu-main-container.header-shown.scroll-buttons-shown.filter-input-shown { height: calc(100% - var(--jqx-bar-height) - 2 * var(--jqx-menu-scroll-button-size) - var(--jqx-text-box-default-height) - 2 * var(--jqx-list-menu-filter-input-vertical-offset)); } .jqx-list-menu .jqx-menu-main-container.header-shown.filter-input-shown, .jqx-list-menu-view.jqx-drop-down-repositioned .jqx-menu-main-container.header-shown.filter-input-shown { height: calc(100% - var(--jqx-bar-height) - var(--jqx-text-box-default-height) - 2 * var(--jqx-list-menu-filter-input-vertical-offset)); } .jqx-list-menu .jqx-menu-main-container.scroll-buttons-shown, .jqx-list-menu-view.jqx-drop-down-repositioned .jqx-menu-main-container.scroll-buttons-shown { height: calc(100% - 2 * var(--jqx-menu-scroll-button-size)); } .jqx-list-menu .jqx-menu-main-container.scroll-buttons-shown.one-button-shown, .jqx-list-menu-view.jqx-drop-down-repositioned .jqx-menu-main-container.scroll-buttons-shown.one-button-shown { height: calc(100% - var(--jqx-menu-scroll-button-size)); } .jqx-list-menu .jqx-menu-main-container.scroll-buttons-shown.one-button-shown.filter-input-shown, .jqx-list-menu-view.jqx-drop-down-repositioned .jqx-menu-main-container.scroll-buttons-shown.one-button-shown.filter-input-shown { height: calc(100% - var(--jqx-menu-scroll-button-size) - var(--jqx-text-box-default-height) - 2 * var(--jqx-list-menu-filter-input-vertical-offset)); } .jqx-list-menu .jqx-menu-main-container.scroll-buttons-shown.filter-input-shown, .jqx-list-menu-view.jqx-drop-down-repositioned .jqx-menu-main-container.scroll-buttons-shown.filter-input-shown { height: calc(100% - 2 * var(--jqx-menu-scroll-button-size) - var(--jqx-text-box-default-height) - 2 * var(--jqx-list-menu-filter-input-vertical-offset)); } .jqx-list-menu .jqx-menu-main-container.filter-input-shown, .jqx-list-menu-view.jqx-drop-down-repositioned .jqx-menu-main-container.filter-input-shown { height: calc(100% - var(--jqx-text-box-default-height)); } .jqx-list-menu .jqx-menu-main-container.bounce-top, .jqx-list-menu-view.jqx-drop-down-repositioned .jqx-menu-main-container.bounce-top { padding-top: 50px; } .jqx-list-menu .jqx-menu-main-container.bounce-bottom, .jqx-list-menu-view.jqx-drop-down-repositioned .jqx-menu-main-container.bounce-bottom { padding-bottom: 50px; } .jqx-list-menu .jqx-menu-item-label-element, .jqx-list-menu-view.jqx-drop-down-repositioned .jqx-menu-item-label-element { display: flex; align-items: center; } .jqx-list-menu .jqx-menu-item-shortcut, .jqx-list-menu-view.jqx-drop-down-repositioned .jqx-menu-item-shortcut { margin-left: 0; } .jqx-list-menu .jqx-menu-items-group-arrow, .jqx-list-menu-view.jqx-drop-down-repositioned .jqx-menu-items-group-arrow { display: flex; align-items: center; } .jqx-list-menu .jqx-menu-drop-down, .jqx-list-menu-view.jqx-drop-down-repositioned .jqx-menu-drop-down { width: 100%; } .jqx-list-menu .jqx-menu-drop-down[level="2"]:not(.jqx-menu-minimized-items-container), .jqx-list-menu-view.jqx-drop-down-repositioned .jqx-menu-drop-down[level="2"]:not(.jqx-menu-minimized-items-container) { margin: 0; } .jqx-list-menu .jqx-tree-main-container, .jqx-list-menu-view.jqx-drop-down-repositioned .jqx-tree-main-container { position: relative; width: 100%; height: 100%; padding: var(--jqx-tree-item-horizontal-offset); overflow: hidden; } .jqx-list-menu .jqx-list-menu-filter-input-container, .jqx-list-menu-view.jqx-drop-down-repositioned .jqx-list-menu-filter-input-container { position: relative; width: calc(100% - 10px); height: calc(var(--jqx-text-box-default-height)); margin: 5px; font-size: inherit; } .jqx-list-menu .jqx-list-menu-filter-input-container:after, .jqx-list-menu-view.jqx-drop-down-repositioned .jqx-list-menu-filter-input-container:after { content: var(--jqx-icon-filter); font-family: var(--jqx-font-family-icon); height: var(--jqx-text-box-default-height); position: absolute; top: 0; width: 25px; display: flex; align-items: center; justify-content: center; left: calc(100% - 25px); } .jqx-list-menu .jqx-filter-input, .jqx-list-menu-view.jqx-drop-down-repositioned .jqx-filter-input { border: 1px solid var(--jqx-border); width: 100%; height: 100%; padding-left: var(--jqx-editor-label-padding); padding-right: calc(var(--jqx-editor-label-padding) + 25px); font-size: inherit; } .jqx-list-menu .jqx-filter-input::selection, .jqx-list-menu-view.jqx-drop-down-repositioned .jqx-filter-input::selection { background: var(--jqx-editor-selection); color: var(--jqx-editor-selection-color); } .jqx-list-menu .jqx-filter-input:focus, .jqx-list-menu-view.jqx-drop-down-repositioned .jqx-filter-input:focus { outline: none; } .jqx-list-menu .jqx-list-menu-group-label, .jqx-list-menu-view.jqx-drop-down-repositioned .jqx-list-menu-group-label { margin-bottom: 1px; padding: 10px; background-color: var(--jqx-disabled); color: var(--jqx-disabled-color); font-size: calc(var(--jqx-font-size) + 1px); font-weight: bold; cursor: default; user-select: none; } .jqx-list-menu .jqx-scroll-viewer, .jqx-list-menu-view.jqx-drop-down-repositioned .jqx-scroll-viewer { border: none; } .jqx-list-menu[checkboxes][checkable] jqx-menu-item[level="1"] > .jqx-menu-item-label-container, .jqx-list-menu[checkboxes][checkable] jqx-menu-items-group[level="1"] > .jqx-menu-item-label-container, .jqx-list-menu[checkboxes] .jqx-menu-item-container[checkable] > jqx-menu-item > .jqx-menu-item-label-container, .jqx-list-menu[checkboxes] .jqx-menu-item-container[checkable] > jqx-menu-items-group > .jqx-menu-item-label-container, .jqx-list-menu-view.jqx-drop-down-repositioned[checkboxes][checkable] jqx-menu-item[level="1"] > .jqx-menu-item-label-container, .jqx-list-menu-view.jqx-drop-down-repositioned[checkboxes][checkable] jqx-menu-items-group[level="1"] > .jqx-menu-item-label-container, .jqx-list-menu-view.jqx-drop-down-repositioned[checkboxes] .jqx-menu-item-container[checkable] > jqx-menu-item > .jqx-menu-item-label-container, .jqx-list-menu-view.jqx-drop-down-repositioned[checkboxes] .jqx-menu-item-container[checkable] > jqx-menu-items-group > .jqx-menu-item-label-container { padding-left: 35px; } .jqx-list-menu[checkboxes][checkable] jqx-menu-item[level="1"][checked] > .jqx-menu-item-label-container:after, .jqx-list-menu[checkboxes][checkable] jqx-menu-items-group[level="1"][checked] > .jqx-menu-item-label-container:after, .jqx-list-menu[checkboxes] .jqx-menu-item-container[checkable] > jqx-menu-item[checked] > .jqx-menu-item-label-container:after, .jqx-list-menu[checkboxes] .jqx-menu-item-container[checkable] > jqx-menu-items-group[checked] > .jqx-menu-item-label-container:after, .jqx-list-menu-view.jqx-drop-down-repositioned[checkboxes][checkable] jqx-menu-item[level="1"][checked] > .jqx-menu-item-label-container:after, .jqx-list-menu-view.jqx-drop-down-repositioned[checkboxes][checkable] jqx-menu-items-group[level="1"][checked] > .jqx-menu-item-label-container:after, .jqx-list-menu-view.jqx-drop-down-repositioned[checkboxes] .jqx-menu-item-container[checkable] > jqx-menu-item[checked] > .jqx-menu-item-label-container:after, .jqx-list-menu-view.jqx-drop-down-repositioned[checkboxes] .jqx-menu-item-container[checkable] > jqx-menu-items-group[checked] > .jqx-menu-item-label-container:after { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); content: var(--jqx-icon-check); font-family: var(--jqx-font-family-icon); } .jqx-list-menu[checkboxes][checkable][check-mode=radioButton] jqx-menu-item[level="1"][checked] > .jqx-menu-item-label-container:after, .jqx-list-menu[checkboxes][checkable][check-mode=radioButton] jqx-menu-items-group[level="1"][checked] > .jqx-menu-item-label-container:after, .jqx-list-menu[checkboxes] .jqx-menu-item-container[checkable][check-mode=radioButton] > jqx-menu-item[checked] > .jqx-menu-item-label-container:after, .jqx-list-menu[checkboxes] .jqx-menu-item-container[checkable][check-mode=radioButton] > jqx-menu-items-group[checked] > .jqx-menu-item-label-container:after, .jqx-list-menu-view.jqx-drop-down-repositioned[checkboxes][checkable][check-mode=radioButton] jqx-menu-item[level="1"][checked] > .jqx-menu-item-label-container:after, .jqx-list-menu-view.jqx-drop-down-repositioned[checkboxes][checkable][check-mode=radioButton] jqx-menu-items-group[level="1"][checked] > .jqx-menu-item-label-container:after, .jqx-list-menu-view.jqx-drop-down-repositioned[checkboxes] .jqx-menu-item-container[checkable][check-mode=radioButton] > jqx-menu-item[checked] > .jqx-menu-item-label-container:after, .jqx-list-menu-view.jqx-drop-down-repositioned[checkboxes] .jqx-menu-item-container[checkable][check-mode=radioButton] > jqx-menu-items-group[checked] > .jqx-menu-item-label-container:after { content: var(--jqx-icon-radio); } .jqx-list-menu[animation=none].jqx-visibility-hidden, .jqx-list-menu-view.jqx-drop-down-repositioned[animation=none].jqx-visibility-hidden { transform: scale(0); } .jqx-list-menu:not([animation=none]) jqx-menu-item, .jqx-list-menu-view-minimized:not([animation=none]) jqx-menu-item { position: relative; } .jqx-list-menu:not([animation=none]) jqx-menu-item, .jqx-list-menu:not([animation=none]) jqx-menu-items-group, .jqx-list-menu:not([animation=none]) .jqx-menu-item-label-container, .jqx-list-menu:not([animation=none]) .jqx-list-menu-group-label, .jqx-list-menu-view-minimized:not([animation=none]) jqx-menu-item, .jqx-list-menu-view-minimized:not([animation=none]) jqx-menu-items-group, .jqx-list-menu-view-minimized:not([animation=none]) .jqx-menu-item-label-container, .jqx-list-menu-view-minimized:not([animation=none]) .jqx-list-menu-group-label { left: 0; transition: left 0.3s ease-in; } .jqx-list-menu:not([animation=none]) jqx-menu-item.animate, .jqx-list-menu:not([animation=none]) jqx-menu-items-group.animate, .jqx-list-menu:not([animation=none]) .jqx-menu-item-label-container.animate, .jqx-list-menu:not([animation=none]) .jqx-list-menu-group-label.animate, .jqx-list-menu-view-minimized:not([animation=none]) jqx-menu-item.animate, .jqx-list-menu-view-minimized:not([animation=none]) jqx-menu-items-group.animate, .jqx-list-menu-view-minimized:not([animation=none]) .jqx-menu-item-label-container.animate, .jqx-list-menu-view-minimized:not([animation=none]) .jqx-list-menu-group-label.animate { left: -100%; } .jqx-list-menu:not([animation=none]) jqx-menu-item.right, .jqx-list-menu:not([animation=none]) jqx-menu-items-group.right, .jqx-list-menu:not([animation=none]) .jqx-menu-item-label-container.right, .jqx-list-menu:not([animation=none]) .jqx-list-menu-group-label.right, .jqx-list-menu-view-minimized:not([animation=none]) jqx-menu-item.right, .jqx-list-menu-view-minimized:not([animation=none]) jqx-menu-items-group.right, .jqx-list-menu-view-minimized:not([animation=none]) .jqx-menu-item-label-container.right, .jqx-list-menu-view-minimized:not([animation=none]) .jqx-list-menu-group-label.right { left: -100%; transition: none; } .jqx-list-menu:not([animation=none]) .jqx-list-menu-group-label, .jqx-list-menu-view-minimized:not([animation=none]) .jqx-list-menu-group-label { position: relative; } .jqx-list-menu:not([animation=none]) .jqx-menu-items-group-opened, .jqx-list-menu-view-minimized:not([animation=none]) .jqx-menu-items-group-opened { overflow: visible; } .jqx-list-menu:not([animation=none]) .jqx-menu-drop-down, .jqx-list-menu-view-minimized:not([animation=none]) .jqx-menu-drop-down { position: absolute; top: 0; left: 0; transition: left 0.3s ease-in; } .jqx-list-menu:not([animation=none]) .jqx-menu-drop-down.jqx-hidden, .jqx-list-menu-view-minimized:not([animation=none]) .jqx-menu-drop-down.jqx-hidden { display: block !important; left: 100%; } .jqx-list-menu:not([animation=none]) .jqx-menu-drop-down.no-transition, .jqx-list-menu-view-minimized:not([animation=none]) .jqx-menu-drop-down.no-transition { transition: none; } .jqx-list-menu-view { width: 100%; height: 100%; overflow: hidden; } .jqx-list-menu-view.jqx-list-menu-view-minimized { position: absolute; width: var(--jqx-editor-drop-down-width); height: var(--jqx-editor-drop-down-height); left: calc(-1 * var(--jqx-border-width)); top: calc(100% + var(--jqx-border-width)); background-color: white; box-shadow: var(--jqx-elevation-8); } .jqx-list-menu-view-minimized.jqx-menu-drop-down.jqx-drop-down-repositioned[drop-down-position*=top] { margin: -8px 0px; } .jqx-list-menu-view-minimized:not([animation=none]) { opacity: 1; transform: scaleY(1); margin: 8px 0px; -webkit-transform-origin: top; transform-origin: top; transition: opacity 0.2s ease-in, visibility 0.2s ease-in, transform 0.2s ease-in; } .jqx-list-menu-view-minimized:not([animation=none]).jqx-visibility-hidden { opacity: 0.2; transform: scaleY(0); } .jqx-list-menu-view-minimized:not([animation=none]) jqx-menu-items-group.jqx-element.jqx-menu-items-group-opened { overflow: visible; } .jqx-list-menu-view-minimized.jqx-drop-down-repositioned.jqx-visibility-hidden.not-in-view { left: -9999px; top: -9999px; transition: none; } .jqx-list-menu-view-minimized[drop-down-position|=top]:not([animation=none]) { transform: translateY(-100%) scaleY(1); -webkit-transform-origin: bottom; transform-origin: bottom; } .jqx-list-menu-view-minimized[drop-down-position|=top]:not([animation=none]).jqx-visibility-hidden { transform: translateY(-100%) scaleY(0); } .jqx-list-menu:not([animation=none])[right-to-left] .jqx-menu-drop-down.jqx-hidden, .jqx-list-menu-view-minimized:not([animation=none])[right-to-left] .jqx-menu-drop-down.jqx-hidden { left: -100%; } .jqx-list-menu:not([animation=none])[right-to-left] jqx-menu-item.animate, .jqx-list-menu:not([animation=none])[right-to-left] jqx-menu-items-group.animate, .jqx-list-menu:not([animation=none])[right-to-left] jqx-menu-item.right, .jqx-list-menu:not([animation=none])[right-to-left] jqx-menu-items-group.right, .jqx-list-menu:not([animation=none])[right-to-left] .jqx-menu-item-label-container.animate, .jqx-list-menu:not([animation=none])[right-to-left] .jqx-list-menu-group-label.animate, .jqx-list-menu:not([animation=none])[right-to-left] .jqx-menu-item-label-container.right, .jqx-list-menu:not([animation=none])[right-to-left] .jqx-list-menu-group-label.right, .jqx-list-menu-view-minimized:not([animation=none])[right-to-left] jqx-menu-item.animate, .jqx-list-menu-view-minimized:not([animation=none])[right-to-left] jqx-menu-items-group.animate, .jqx-list-menu-view-minimized:not([animation=none])[right-to-left] jqx-menu-item.right, .jqx-list-menu-view-minimized:not([animation=none])[right-to-left] jqx-menu-items-group.right, .jqx-list-menu-view-minimized:not([animation=none])[right-to-left] .jqx-menu-item-label-container.animate, .jqx-list-menu-view-minimized:not([animation=none])[right-to-left] .jqx-list-menu-group-label.animate, .jqx-list-menu-view-minimized:not([animation=none])[right-to-left] .jqx-menu-item-label-container.right, .jqx-list-menu-view-minimized:not([animation=none])[right-to-left] .jqx-list-menu-group-label.right { left: 100%; } .jqx-list-menu[right-to-left] .jqx-filter-input, .jqx-list-menu-view.jqx-drop-down-repositioned[right-to-left] .jqx-filter-input { direction: rtl; padding-right: var(--jqx-editor-label-padding); padding-left: calc(var(--jqx-editor-label-padding) + 25px); } .jqx-list-menu[right-to-left] .jqx-list-menu-filter-input-container:after, .jqx-list-menu-view.jqx-drop-down-repositioned[right-to-left] .jqx-list-menu-filter-input-container:after { left: 0; } .jqx-list-menu[right-to-left] .jqx-header > jqx-button, .jqx-list-menu-view.jqx-drop-down-repositioned[right-to-left] .jqx-header > jqx-button { left: initial; right: 0; } .jqx-list-menu[right-to-left] jqx-menu-items-group .jqx-menu-items-group-arrow, .jqx-list-menu-view.jqx-drop-down-repositioned[right-to-left] jqx-menu-items-group .jqx-menu-items-group-arrow { margin-left: initial; } .jqx-list-menu[checkboxes][checkable][right-to-left] jqx-menu-item[level="1"] > .jqx-menu-item-label-container, .jqx-list-menu[checkboxes][checkable][right-to-left] jqx-menu-items-group[level="1"] > .jqx-menu-item-label-container, .jqx-list-menu[checkboxes][right-to-left] .jqx-menu-item-container[checkable] > jqx-menu-item > .jqx-menu-item-label-container, .jqx-list-menu[checkboxes][right-to-left] .jqx-menu-item-container[checkable] > jqx-menu-items-group > .jqx-menu-item-label-container, .jqx-list-menu-view.jqx-drop-down-repositioned[checkboxes][checkable][right-to-left] jqx-menu-item[level="1"] > .jqx-menu-item-label-container, .jqx-list-menu-view.jqx-drop-down-repositioned[checkboxes][checkable][right-to-left] jqx-menu-items-group[level="1"] > .jqx-menu-item-label-container, .jqx-list-menu-view.jqx-drop-down-repositioned[checkboxes][right-to-left] .jqx-menu-item-container[checkable] > jqx-menu-item > .jqx-menu-item-label-container, .jqx-list-menu-view.jqx-drop-down-repositioned[checkboxes][right-to-left] .jqx-menu-item-container[checkable] > jqx-menu-items-group > .jqx-menu-item-label-container { padding-left: initial; padding-right: 35px; } .jqx-list-menu[checkboxes][checkable][right-to-left] jqx-menu-item[level="1"][checked] > .jqx-menu-item-label-container:after, .jqx-list-menu[checkboxes][checkable][right-to-left] jqx-menu-items-group[level="1"][checked] > .jqx-menu-item-label-container:after, .jqx-list-menu[checkboxes][right-to-left] .jqx-menu-item-container[checkable] > jqx-menu-item[checked] > .jqx-menu-item-label-container:after, .jqx-list-menu[checkboxes][right-to-left] .jqx-menu-item-container[checkable] > jqx-menu-items-group[checked] > .jqx-menu-item-label-container:after, .jqx-list-menu-view.jqx-drop-down-repositioned[checkboxes][checkable][right-to-left] jqx-menu-item[level="1"][checked] > .jqx-menu-item-label-container:after, .jqx-list-menu-view.jqx-drop-down-repositioned[checkboxes][checkable][right-to-left] jqx-menu-items-group[level="1"][checked] > .jqx-menu-item-label-container:after, .jqx-list-menu-view.jqx-drop-down-repositioned[checkboxes][right-to-left] .jqx-menu-item-container[checkable] > jqx-menu-item[checked] > .jqx-menu-item-label-container:after, .jqx-list-menu-view.jqx-drop-down-repositioned[checkboxes][right-to-left] .jqx-menu-item-container[checkable] > jqx-menu-items-group[checked] > .jqx-menu-item-label-container:after { left: initial; right: 10px; } .jqx-list-menu[right-to-left] jqx-menu-items-group[level="1"] > .jqx-menu-item-label-container > .jqx-menu-items-group-arrow { margin-right: initial; } .jqx-list-menu[right-to-left] jqx-menu-item .jqx-menu-item-shortcut { margin-left: initial; margin-right: 100px; } .jqx-list-menu[right-to-left] .jqx-menu-main-container { direction: rtl; } .jqx-list-menu[right-to-left] .jqx-menu-items-group-arrow.right.jqx-arrow-right { margin-left: initial; margin-right: 50px; } .jqx-list-menu[right-to-left] > .jqx-container { flex-direction: row-reverse; } .jqx-list-menu[right-to-left] .jqx-list-menu-view.jqx-list-menu-view-minimized { left: initial; right: calc(-1 * var(--jqx-border-width)); } .jqx-list-menu[right-to-left][minimized] .jqx-list-menu-view-minimized, .jqx-list-menu[right-to-left][mode=tree] .jqx-list-menu-view-minimized { direction: rtl; } .jqx-list-menu[right-to-left][mode=dropDown] jqx-menu-item[level="1"] .jqx-menu-item-shortcut, .jqx-list-menu[right-to-left] jqx-menu-items-group .jqx-menu-items-group-arrow, .jqx-list-menu[right-to-left] .jqx-list-menu-view-minimized .jqx-menu-item-shortcut { margin-right: initial; } .jqx-list-menu-view-minimized[right-to-left] .jqx-menu-item-shortcut, .jqx-list-menu-view-minimized[right-to-left] jqx-menu-items-group .jqx-menu-items-group-arrow { margin-right: initial; } .jqx-menu-drop-down.jqx-drop-down-repositioned.jqx-list-menu-view-minimized[right-to-left] { direction: rtl; } .jqx-menu-drop-down.jqx-drop-down-repositioned[right-to-left] .jqx-menu-items-group-arrow.right.jqx-arrow-right { margin-left: initial; margin-right: 50px; } .jqx-menu-drop-down.jqx-drop-down-repositioned[right-to-left] .jqx-menu-item-container { direction: rtl; } .jqx-menu-drop-down.jqx-drop-down-repositioned[right-to-left] jqx-menu-item .jqx-menu-item-shortcut { margin-left: initial; margin-right: 100px; } /* jqx-masked-text-box */ jqx-masked-text-box { width: var(--jqx-text-box-default-width); height: var(--jqx-text-box-default-height); } jqx-masked-text-box.jqx-element { border: 1px solid var(--jqx-border); background: var(--jqx-background); overflow: visible; border-radius: var(--jqx-border-radius); } .jqx-masked-text-box > .jqx-container { position: relative; } .jqx-masked-text-box .jqx-input { width: 100%; height: 100%; color: inherit; font-family: inherit; position: relative; overflow: hidden; outline: none; } .jqx-masked-text-box[right-to-left] .jqx-container { direction: rtl; } /* jqx-menu */ jqx-menu { width: var(--jqx-menu-default-width); height: var(--jqx-menu-default-height); visibility: hidden; } jqx-menu:focus { outline: none; border-color: var(--jqx-outline); } jqx-menu > .jqx-container { display: flex; position: relative; } jqx-menu jqx-menu-item[level="1"][separator], jqx-menu jqx-menu-item[separator][level]:last-child, jqx-menu jqx-menu-items-group[level="1"][separator], jqx-menu jqx-menu-items-group[separator][level]:last-child { border-bottom: none; } jqx-menu.jqx-element { visibility: inherit; overflow: visible; } jqx-menu .jqx-ripple { background: var(--jqx-primary); } jqx-menu[aria-orientation=horizontal] { background: var(--jqx-surface); color: var(--jqx-surface-color); border-color: var(--jqx-border); } jqx-menu[mode=vertical], jqx-menu[mode=dropDown], jqx-menu[mode=tree] { width: var(--jqx-menu-vertical-default-width); height: var(--jqx-menu-vertical-default-height); } jqx-menu[mode=dropDown] { height: auto; } jqx-menu[mode=tree]:focus { outline: none; border-color: var(--jqx-outline); } jqx-menu[mode=vertical] jqx-menu-item[level="1"][separator], jqx-menu[mode=vertical] jqx-menu-items-group[level="1"][separator], jqx-menu[mode=dropDown] jqx-menu-item[level="1"][separator], jqx-menu[mode=dropDown] jqx-menu-items-group[level="1"][separator], jqx-menu[mode=tree] jqx-menu-item[level="1"][separator], jqx-menu[mode=tree] jqx-menu-items-group[level="1"][separator], jqx-menu[minimized] jqx-menu-item[level="1"][separator], jqx-menu[minimized] jqx-menu-items-group[level="1"][separator] { border-bottom: 1px solid var(--jqx-border); } jqx-menu[minimized][drop-down-position$=left] .jqx-menu-minimized-items-container .jqx-menu-item-label-container { flex-direction: row; } jqx-menu[mode=tree] { background: var(--jqx-background); border-color: var(--jqx-border); color: var(--jqx-background-color); } jqx-menu[mode=dropDown] { position: absolute; background: var(--jqx-background); color: var(--jqx-background-color); box-shadow: var(--jqx-elevation-8); border-radius: var(--jqx-border-radius); left: 0; top: 0; z-index: var(--jqx-editor-drop-down-z-index); } jqx-menu-item, jqx-menu-items-group { visibility: hidden; cursor: pointer; height: auto; display: flex; justify-content: space-between; align-items: center; white-space: nowrap; } jqx-menu-item.jqx-element, jqx-menu-items-group.jqx-element { visibility: inherit; overflow: visible; background: inherit; color: inherit; border-color: inherit; } jqx-menu-item[hover], jqx-menu-items-group[hover] { background-color: var(--jqx-ui-state-hover); border-color: var(--jqx-ui-state-border-hover); color: var(--jqx-ui-state-color-hover); } jqx-menu-item[focus], jqx-menu-items-group[focus] { background-color: var(--jqx-ui-state-focus); border-color: var(--jqx-ui-state-border-focus); color: var(--jqx-ui-state-color-focus); } jqx-menu-item[separator], jqx-menu-items-group[separator] { border-bottom: 1px solid var(--jqx-border); } jqx-menu-item .jqx-menu-item-shortcut { margin-left: 100px; opacity: 0.5; } jqx-menu-item[template-applied] { cursor: default; } jqx-menu-item[disabled] { opacity: 0.5; } jqx-menu-items-group { position: relative; } .jqx-menu a { color: inherit; } .jqx-menu jqx-menu-item[level="1"], .jqx-menu jqx-menu-items-group[level="1"] { height: 100%; } .jqx-menu jqx-menu-item[level="1"] > .jqx-menu-item-label-container, .jqx-menu jqx-menu-items-group[level="1"] > .jqx-menu-item-label-container { height: 100%; } .jqx-menu .jqx-menu-drop-down { position: absolute; background: var(--jqx-background); color: var(--jqx-background-color); box-shadow: var(--jqx-elevation-8); border-radius: var(--jqx-border-radius); left: 100%; top: 0; z-index: var(--jqx-editor-drop-down-z-index); } .jqx-menu .jqx-menu-drop-down .jqx-menu-drop-down { border: none; } .jqx-menu .jqx-menu-drop-down .jqx-menu-drop-down.jqx-visibility-hidden { border: none; } .jqx-menu .jqx-menu-drop-down.jqx-visibility-hidden.not-in-view { left: -9999px; top: -9999px; transition: none; } .jqx-menu .jqx-menu-drop-down[level="2"] { top: 100%; left: 0; } .jqx-menu .jqx-menu-main-container { display: flex; position: relative; align-items: center; width: 100%; height: 100%; cursor: default; } .jqx-menu .jqx-menu-main-container > jqx-menu-item[level="1"] .jqx-menu-item-shortcut { display: none; } .jqx-menu .jqx-menu-main-container.scroll-buttons-shown { width: calc(100% - 2 * var(--jqx-menu-scroll-button-size)); overflow: hidden; } .jqx-menu .jqx-menu-main-container.scroll-buttons-shown.one-button-shown { width: calc(100% - var(--jqx-menu-scroll-button-size)); } .jqx-menu .jqx-menu-item-label-element { display: flex; align-items: center; overflow: hidden; } .jqx-menu .jqx-menu-item-label-element > span { display: flex; align-items: center; } .jqx-menu .jqx-element[level="2"]:first-child { margin-top: var(--jqx-border-radius); } .jqx-menu .jqx-element[level="2"]:last-child { margin-bottom: var(--jqx-border-radius); } .jqx-menu .jqx-element[level="3"]:first-child { margin-top: var(--jqx-border-radius); } .jqx-menu .jqx-element[level="3"]:last-child { margin-bottom: var(--jqx-border-radius); } .jqx-menu .jqx-header { background: var(--jqx-surface); color: var(--jqx-surface-color); box-shadow: var(--jqx-elevation-4); border: var(--jqx-border-width) solid var(--jqx-border); border-top-left-radius: var(--jqx-border-top-left-radius); border-top-right-radius: var(--jqx-border-top-right-radius); border-bottom-left-radius: var(--jqx-border-bottom-left-radius); border-bottom-right-radius: var(--jqx-border-bottom-right-radius); z-index: 3; padding: 0px 16px; display: flex; align-items: center; justify-content: center; position: relative; width: 100%; } .jqx-menu .jqx-hamburger-icon { width: 40px; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; float: none; cursor: pointer; } .jqx-menu .jqx-hamburger-icon .jqx-hamburger-icon-custom-container { height: 100%; display: flex; align-items: center; } .jqx-menu .jqx-hamburger-icon.jqx-close-button > .jqx-hamburger-icon-line-top { width: 29px; transform: translateX(4px) rotate(45deg); } .jqx-menu .jqx-hamburger-icon.jqx-close-button > .jqx-hamburger-icon-line-center { visibility: hidden; } .jqx-menu .jqx-hamburger-icon.jqx-close-button > .jqx-hamburger-icon-line-bottom { width: 29px; transform: translateX(4px) rotate(-45deg); } .jqx-menu .jqx-hamburger-icon .jqx-hamburger-icon-custom-container { height: 100%; display: flex; align-items: center; } .jqx-menu .jqx-hamburger-icon-line { margin-bottom: 5px; border-radius: 10px; width: 30px; height: 5px; transform-origin: left; background-color: #757575; } .jqx-menu .jqx-hamburger-icon-line-bottom { margin-bottom: 0; } .jqx-menu .jqx-menu-minimized-items-container .jqx-menu-items-group-opened > .jqx-menu-item-label-container { padding-bottom: 0; } .jqx-menu .jqx-menu-minimized-items-container .jqx-menu-drop-down.jqx-visibility-hidden { margin-top: 0; height: 0; transform: scaleY(0); } .jqx-menu .jqx-menu-minimized-items-container.jqx-visibility-hidden.not-in-view { left: -9999px; top: -9999px; transition: none; } .jqx-menu .jqx-menu-item-label-container { position: relative; width: 100%; padding: 10px; display: flex; flex-direction: row; align-items: center; justify-content: space-between; overflow: hidden; } .jqx-menu .jqx-menu-scroll-button { display: block; background-color: var(--jqx-scroll-bar-button-background); color: var(--jqx-scroll-bar-button-color); border-color: var(--jqx-scroll-bar-button-border); min-height: 0; width: var(--jqx-menu-scroll-button-size); height: 100%; } .jqx-menu .jqx-menu-scroll-button[hover] { background-color: var(--jqx-scroll-bar-button-background-hover); color: var(--jqx-scroll-bar-button-color-hover); border-color: var(--jqx-scroll-bar-button-border-hover); } .jqx-menu .jqx-menu-scroll-button[active] { background-color: var(--jqx-scroll-bar-button-background-active); color: var(--jqx-scroll-bar-button-color-active); border-color: var(--jqx-scroll-bar-button-border-active); } .jqx-menu .jqx-menu-scroll-button > button { border: none; } .jqx-menu .jqx-hidden { display: none !important; } .jqx-menu.jqx-container { display: flex; position: relative; } .jqx-menu:not([animation=none]) .jqx-menu-drop-down, .jqx-menu:not([animation=none]) .jqx-menu-minimized-items-container { opacity: 1; transform: scaleY(1); -webkit-transform-origin: top; transform-origin: top; transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0ms, visibility 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0ms; } .jqx-menu:not([animation=none]) .jqx-menu-drop-down.jqx-visibility-hidden, .jqx-menu:not([animation=none]) .jqx-menu-minimized-items-container.jqx-visibility-hidden { opacity: 0.2; transform: scaleY(0); } .jqx-menu:not([animation=none]) .jqx-menu-minimized-items-container .jqx-menu-drop-down { -webkit-transform-origin: top; transform-origin: top; transition: height 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0ms; } .jqx-menu:not([animation=none]) .jqx-menu-minimized-items-container .jqx-menu-item-label-container > .jqx-menu-items-group-arrow { transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0ms; } .jqx-menu:not([animation=none]) .jqx-hamburger-icon-line { transition: visibility 0.02s cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0ms, width 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0ms; } .jqx-menu[animation=none] .jqx-menu-drop-down.jqx-visibility-hidden, .jqx-menu[animation=none] .jqx-menu-minimized-items-container.jqx-visibility-hidden { transform: scale(0); } .jqx-menu[drop-down-append-to]:not([drop-down-append-to=null]) .jqx-menu-main-container { overflow: hidden; } .jqx-menu[overflow=hidden] .jqx-menu-main-container { width: 100%; } .jqx-menu[overflow=hidden][mode]:not([mode=horizontal]) .jqx-menu-main-container { height: 100%; } .jqx-menu[aria-orientation=horizontal] .jqx-element[level="1"]:first-child { margin-left: var(--jqx-border-radius); } .jqx-menu[aria-orientation=horizontal] .jqx-element[level="1"]:last-child { margin-right: var(--jqx-border-radius); } .jqx-menu:not([aria-orientation=horizontal]) .jqx-element[level="1"]:first-child { margin-top: var(--jqx-border-radius); } .jqx-menu:not([aria-orientation=horizontal]) .jqx-element[level="1"]:last-child { margin-bottom: var(--jqx-border-radius); } .jqx-menu[disabled] jqx-menu-item, .jqx-menu[disabled] jqx-menu-items-group, .jqx-menu[disabled] .jqx-hamburger-icon { cursor: default; } .jqx-menu[disabled] .jqx-hamburger-icon { cursor: default; } .jqx-menu[disabled][mode=dropDown]:not([animation=none]) { opacity: 0.55; } .jqx-menu[minimized] .jqx-minimized-header { border: var(--jqx-border-width) solid var(--jqx-border); background: var(--jqx-surface); justify-content: flex-end; } .jqx-menu[minimized][drop-down-position$=left] > .jqx-container { flex-direction: row-reverse; } .jqx-menu[minimized][drop-down-position$=left] .jqx-menu-minimized-items-container .jqx-menu-item-label-container { flex-direction: row-reverse; } .jqx-menu[minimized][drop-down-position$=left] .jqx-menu-minimized-items-container .jqx-menu-items-group-arrow { margin: 0; } .jqx-menu[minimized][drop-down-position$=left] .jqx-menu-minimized-items-container .jqx-menu-drop-down { padding-left: 0; padding-right: 20px; } .jqx-menu[minimized][checkboxes][checkable][drop-down-position$=left] .jqx-menu-minimized-items-container > jqx-menu-item > .jqx-menu-item-label-container, .jqx-menu[minimized][checkboxes][checkable][drop-down-position$=left] .jqx-menu-minimized-items-container > jqx-menu-items-group > .jqx-menu-item-label-container { padding-left: 10px; padding-right: 35px; } .jqx-menu[minimized][checkboxes][checkable][drop-down-position$=left] .jqx-menu-minimized-items-container > jqx-menu-item > .jqx-menu-item-label-container:after, .jqx-menu[minimized][checkboxes][checkable][drop-down-position$=left] .jqx-menu-minimized-items-container > jqx-menu-items-group > .jqx-menu-item-label-container:after { left: initial; right: 10px; } .jqx-menu[minimize-icon-template] .jqx-hamburger-icon { width: auto; float: left; } .jqx-menu[minimize-icon-template=null] .jqx-hamburger-icon { width: 40px; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; float: none; cursor: pointer; } .jqx-menu:not([mode=tree])[drop-down-position$=left] jqx-menu-item:not([level="1"]) > .jqx-menu-item-label-container { flex-direction: row-reverse; } .jqx-menu:not([mode=tree])[checkboxes][drop-down-position$=left] .jqx-menu-item-container[checkable] > jqx-menu-item > .jqx-menu-item-label-container, .jqx-menu:not([mode=tree])[checkboxes][drop-down-position$=left] .jqx-menu-item-container[checkable] > jqx-menu-items-group > .jqx-menu-item-label-container { padding-left: 10px; padding-right: 35px; } .jqx-menu:not([mode=tree])[checkboxes][drop-down-position$=left] .jqx-menu-item-container[checkable] > jqx-menu-item > .jqx-menu-item-label-container:after, .jqx-menu:not([mode=tree])[checkboxes][drop-down-position$=left] .jqx-menu-item-container[checkable] > jqx-menu-items-group > .jqx-menu-item-label-container:after { left: initial; right: 10px; } .jqx-menu[mode]:not([mode=horizontal]) jqx-menu-item[level="1"] > .jqx-menu-item-label-container, .jqx-menu[mode]:not([mode=horizontal]) jqx-menu-items-group[level="1"] > .jqx-menu-item-label-container { height: initial; } .jqx-menu[mode]:not([mode=horizontal]):not([mode=tree])[drop-down-position$=left] jqx-menu-item > .jqx-menu-item-label-container { flex-direction: row-reverse; } .jqx-menu[mode]:not([mode=horizontal])[drop-down-position$=left] .jqx-menu-main-container jqx-menu-items-group > .jqx-menu-item-label-container { flex-direction: row-reverse; } .jqx-menu[mode]:not([mode=horizontal])[drop-down-position$=left] .jqx-menu-main-container jqx-menu-items-group > .jqx-menu-item-label-container > .jqx-menu-items-group-arrow { margin-left: 0; margin-right: 50px; transform: rotate(180deg); } .jqx-menu[mode]:not([mode=horizontal])[drop-down-position$=left] .jqx-menu-main-container jqx-menu-item > .jqx-menu-item-label-container > .jqx-menu-item-shortcut { margin-left: 0; margin-right: 100px; } .jqx-menu[mode]:not([mode=horizontal]):not([minimized]) > .jqx-container, .jqx-menu[mode]:not([mode=horizontal]):not([minimized]).jqx-container { display: block; } .jqx-menu[mode=vertical] .jqx-menu-main-container, .jqx-menu[mode=dropDown] .jqx-menu-main-container { flex-direction: column; } .jqx-menu[mode=vertical] .jqx-menu-main-container.scroll-buttons-shown, .jqx-menu[mode=dropDown] .jqx-menu-main-container.scroll-buttons-shown { width: 100%; height: calc(100% - 2 * var(--jqx-menu-scroll-button-size)); } .jqx-menu[mode=vertical] .jqx-menu-main-container.scroll-buttons-shown.one-button-shown, .jqx-menu[mode=dropDown] .jqx-menu-main-container.scroll-buttons-shown.one-button-shown { width: 100%; height: calc(100% - var(--jqx-menu-scroll-button-size)); } .jqx-menu[mode=vertical] .jqx-menu-drop-down[level="2"], .jqx-menu[mode=dropDown] .jqx-menu-drop-down[level="2"] { top: 0; left: 100%; } .jqx-menu[mode=vertical] jqx-menu-item[level="1"], .jqx-menu[mode=vertical] jqx-menu-items-group[level="1"], .jqx-menu[mode=dropDown] jqx-menu-item[level="1"], .jqx-menu[mode=dropDown] jqx-menu-items-group[level="1"] { width: 100%; height: auto; } .jqx-menu[mode=vertical] jqx-menu-item[level="1"] > .jqx-menu-item-label-element, .jqx-menu[mode=vertical] jqx-menu-items-group[level="1"] > .jqx-menu-item-label-element, .jqx-menu[mode=dropDown] jqx-menu-item[level="1"] > .jqx-menu-item-label-element, .jqx-menu[mode=dropDown] jqx-menu-items-group[level="1"] > .jqx-menu-item-label-element { max-width: calc(100% - 10px); } .jqx-menu[mode=vertical] .jqx-menu-scroll-button, .jqx-menu[mode=dropDown] .jqx-menu-scroll-button { width: 100%; height: var(--jqx-menu-scroll-button-size); } .jqx-menu[mode=vertical][drop-down-position$=left] .jqx-menu-drop-down[level="2"], .jqx-menu[mode=dropDown][drop-down-position$=left] .jqx-menu-drop-down[level="2"] { left: initial; right: 100%; } .jqx-menu[mode=vertical][drop-down-position|=top] .jqx-menu-drop-down, .jqx-menu[mode=dropDown][drop-down-position|=top] .jqx-menu-drop-down { box-shadow: var(--jqx-elevation-8); } .jqx-menu[mode=vertical][drop-down-position|=top] .jqx-menu-drop-down[level="2"], .jqx-menu[mode=dropDown][drop-down-position|=top] .jqx-menu-drop-down[level="2"] { top: 100%; } .jqx-menu[mode=vertical][drop-down-position=overlay-right] .jqx-menu-drop-down[level="2"], .jqx-menu[mode=dropDown][drop-down-position=overlay-right] .jqx-menu-drop-down[level="2"] { left: 0; } .jqx-menu[mode=vertical][drop-down-position=overlay-left] .jqx-menu-drop-down[level="2"], .jqx-menu[mode=dropDown][drop-down-position=overlay-left] .jqx-menu-drop-down[level="2"] { right: 0; } .jqx-menu[mode=vertical][checkboxes][checkable][drop-down-position$=left] jqx-menu-item[level="1"] > .jqx-menu-item-label-container, .jqx-menu[mode=vertical][checkboxes][checkable][drop-down-position$=left] jqx-menu-items-group[level="1"] > .jqx-menu-item-label-container, .jqx-menu[mode=dropDown][checkboxes][checkable][drop-down-position$=left] jqx-menu-item[level="1"] > .jqx-menu-item-label-container, .jqx-menu[mode=dropDown][checkboxes][checkable][drop-down-position$=left] jqx-menu-items-group[level="1"] > .jqx-menu-item-label-container { padding-left: 10px; padding-right: 35px; } .jqx-menu[mode=vertical][checkboxes][checkable][drop-down-position$=left] jqx-menu-item[level="1"] > .jqx-menu-item-label-container:after, .jqx-menu[mode=vertical][checkboxes][checkable][drop-down-position$=left] jqx-menu-items-group[level="1"] > .jqx-menu-item-label-container:after, .jqx-menu[mode=dropDown][checkboxes][checkable][drop-down-position$=left] jqx-menu-item[level="1"] > .jqx-menu-item-label-container:after, .jqx-menu[mode=dropDown][checkboxes][checkable][drop-down-position$=left] jqx-menu-items-group[level="1"] > .jqx-menu-item-label-container:after { left: initial; right: 10px; } .jqx-menu[mode=vertical] .jqx-menu-drop-down:not(.jqx-menu-minimized-items-container) { margin: 0 calc(var(--jqx-editor-drop-down-vertical-offset) + 3px); } .jqx-menu[mode=vertical] .jqx-menu-drop-down:not(.jqx-menu-minimized-items-container) .jqx-menu-drop-down { margin: 0; } .jqx-menu[mode=vertical] .jqx-menu-main-container > jqx-menu-item[level="1"] .jqx-menu-item-shortcut { display: none; } .jqx-menu[mode=dropDown][drop-down-position$=left] .jqx-menu-main-container jqx-menu-item[level="1"] > .jqx-menu-item-label-container > .jqx-menu-item-shortcut { margin-right: initial; } .jqx-menu[mode=dropDown] jqx-menu-item[level="1"] .jqx-menu-item-shortcut { display: block; margin-left: 0; } .jqx-menu[mode=dropDown]:not([animation=none]) { transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0ms, visibility 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0ms; opacity: 1; transform: scale(1); -webkit-transform-origin: 0 0; transform-origin: 0 0; } .jqx-menu[mode=dropDown]:not([animation=none]).jqx-visibility-hidden { opacity: 0.2; transform: scale(0); } .jqx-menu[mode=tree] jqx-menu-item[level="1"] .jqx-menu-item-shortcut { display: block; } .jqx-menu[mode=tree] .jqx-menu-scroll-button { width: 100%; height: var(--jqx-menu-scroll-button-size); } .jqx-menu[mode=tree] .jqx-menu-minimized-items-container.scroll-buttons-shown { width: 100%; height: calc(100% - 2 * var(--jqx-menu-scroll-button-size)); } .jqx-menu[mode=tree] .jqx-menu-minimized-items-container.scroll-buttons-shown.one-button-shown { width: 100%; height: calc(100% - var(--jqx-menu-scroll-button-size)); } .jqx-menu[mode=tree]:not([minimized]) .jqx-menu-minimized-items-container { position: relative; width: 100%; height: 100%; box-shadow: none; overflow: hidden; transform: none; left: 0; top: 0; } .jqx-menu[mode=tree]:not([minimized])[drop-down-position$=left] jqx-menu-items-group:not([level="1"]) > .jqx-menu-item-label-container { flex-direction: row; } .jqx-menu[mode=tree][minimized][checkboxes][drop-down-position$=left] .jqx-menu-item-container[checkable] > jqx-menu-item > .jqx-menu-item-label-container, .jqx-menu[mode=tree][minimized][checkboxes][drop-down-position$=left] .jqx-menu-item-container[checkable] > jqx-menu-items-group > .jqx-menu-item-label-container { padding-left: 10px; padding-right: 35px; } .jqx-menu[mode=tree][minimized][checkboxes][drop-down-position$=left] .jqx-menu-item-container[checkable] > jqx-menu-item > .jqx-menu-item-label-container:after, .jqx-menu[mode=tree][minimized][checkboxes][drop-down-position$=left] .jqx-menu-item-container[checkable] > jqx-menu-items-group > .jqx-menu-item-label-container:after { left: initial; right: 10px; } .jqx-menu[drop-down-position] .jqx-menu-minimized-items-container .jqx-menu-drop-down { position: static; width: 100%; height: auto; padding-left: 20px; box-shadow: none; transform: none; } .jqx-menu[drop-down-position*=overlay] .jqx-menu-drop-down, .jqx-menu[drop-down-position*=overlay] .jqx-menu-drop-down[level="2"] { margin: unset; } .jqx-menu[drop-down-position|=overlay] .jqx-menu-drop-down { top: 50%; left: 0; transform: translateY(-50%); box-shadow: var(--jqx-elevation-8); } .jqx-menu[drop-down-position|=overlay] .jqx-menu-drop-down[level="2"] { top: initial; transform: initial; } .jqx-menu[drop-down-position|=overlay]:not([animation=none]) .jqx-menu-drop-down { transform: translateY(-50%) scaleY(1); -webkit-transform-origin: center; transform-origin: center; } .jqx-menu[drop-down-position|=overlay]:not([animation=none]) .jqx-menu-drop-down.jqx-visibility-hidden { transform: translateY(-50%) scaleY(0); } .jqx-menu[drop-down-position|=overlay]:not([animation=none]) .jqx-menu-drop-down[level="2"] { transform: scaleY(1); } .jqx-menu[drop-down-position|=overlay]:not([animation=none]) .jqx-menu-drop-down[level="2"].jqx-visibility-hidden { transform: scaleY(0); } .jqx-menu[drop-down-position*=top] .jqx-menu-drop-down, .jqx-menu[drop-down-position*=top] .jqx-menu-drop-down[level="2"] { margin: calc(-1 * (var(--jqx-editor-drop-down-vertical-offset) + 3px)) 0px; } .jqx-menu[drop-down-position|=top] .jqx-menu-drop-down { top: 100%; transform: translateY(-100%); box-shadow: var(--jqx-elevation-8); } .jqx-menu[drop-down-position|=top] .jqx-menu-drop-down[level="2"] { top: 0; } .jqx-menu[drop-down-position|=top] .jqx-menu-minimized-items-container { top: calc(-1 * var(--jqx-border-width)); transform: translateY(-100%); box-shadow: var(--jqx-elevation-4); } .jqx-menu[drop-down-position|=top]:not([animation=none]) .jqx-menu-drop-down { transform: translateY(-100%) scaleY(1); -webkit-transform-origin: bottom; transform-origin: bottom; } .jqx-menu[drop-down-position|=top]:not([animation=none]) .jqx-menu-drop-down.jqx-visibility-hidden, .jqx-menu[drop-down-position|=top]:not([animation=none]) .jqx-menu-minimized-items-container.jqx-visibility-hidden { transform: translateY(-100%) scaleY(0); } .jqx-menu[drop-down-position|=top]:not([animation=none]):not([mode=tree]) .jqx-menu-minimized-items-container { transform: translateY(-100%) scaleY(1); -webkit-transform-origin: bottom; transform-origin: bottom; } .jqx-menu[drop-down-position|=top][mode=vertical]:not([animation=none]) .jqx-menu-minimized-items-container .jqx-menu-drop-down, .jqx-menu[drop-down-position|=top][mode=dropDown]:not([animation=none]) .jqx-menu-minimized-items-container .jqx-menu-drop-down { -webkit-transform-origin: top; transform-origin: top; } .jqx-menu[drop-down-position$=left] .jqx-menu-drop-down { left: initial; right: 100%; } .jqx-menu[drop-down-position$=left] .jqx-menu-drop-down[level="2"] { left: initial; right: 0; } .jqx-menu[drop-down-position$=left] .jqx-menu-main-container jqx-menu-items-group:not([level="1"]) > .jqx-menu-item-label-container > .jqx-menu-items-group-arrow { margin-left: 0; margin-right: 50px; transform: rotate(180deg); } .jqx-menu[drop-down-position$=left] .jqx-menu-main-container jqx-menu-item:not([level="1"]) > .jqx-menu-item-label-container > .jqx-menu-item-shortcut { margin-left: 0; margin-right: 100px; } .jqx-menu[drop-down-position$=left] jqx-menu-items-group:not([level="1"]) > .jqx-menu-item-label-container { flex-direction: row-reverse; } .jqx-menu[drop-down-position$=left] .jqx-menu-minimized-items-container { left: initial; right: calc(-1 * var(--jqx-border-width)); } .jqx-menu[drop-down-position=overlay-left] .jqx-menu-main-container .jqx-menu-drop-down:not([level="2"]) { left: initial; right: 0; } .jqx-menu[checkboxes] .jqx-menu-item-container[checkable] > jqx-menu-item > .jqx-menu-item-label-container, .jqx-menu[checkboxes] .jqx-menu-item-container[checkable] > jqx-menu-items-group > .jqx-menu-item-label-container { padding-left: 35px; } .jqx-menu[checkboxes] .jqx-menu-item-container[checkable] > jqx-menu-item[checked] > .jqx-menu-item-label-container:after, .jqx-menu[checkboxes] .jqx-menu-item-container[checkable] > jqx-menu-items-group[checked] > .jqx-menu-item-label-container:after { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); content: var(--jqx-icon-check); font-family: "jqx-icons"; } .jqx-menu[checkboxes] .jqx-menu-item-container[checkable][check-mode=radioButton] > jqx-menu-item[checked] > .jqx-menu-item-label-container:after, .jqx-menu[checkboxes] .jqx-menu-item-container[checkable][check-mode=radioButton] > jqx-menu-items-group[checked] > .jqx-menu-item-label-container:after, .jqx-menu[checkboxes] .jqx-menu-item-container[checkable] > jqx-menu-item[checked][check-type=radioButton] > .jqx-menu-item-label-container:after, .jqx-menu[checkboxes] .jqx-menu-item-container[checkable] > jqx-menu-items-group[checked][check-type=radioButton] > .jqx-menu-item-label-container:after { content: var(--jqx-icon-radio); } .jqx-menu[checkboxes][checkable] jqx-menu-item[level="1"] > .jqx-menu-item-label-container, .jqx-menu[checkboxes][checkable] jqx-menu-items-group[level="1"] > .jqx-menu-item-label-container { padding-left: 35px; } .jqx-menu[checkboxes][checkable] jqx-menu-item[level="1"][checked] > .jqx-menu-item-label-container:after, .jqx-menu[checkboxes][checkable] jqx-menu-items-group[level="1"][checked] > .jqx-menu-item-label-container:after { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); content: var(--jqx-icon-check); font-family: "jqx-icons"; } .jqx-menu[checkboxes][checkable] jqx-menu-item[level="1"][checked][check-type=radioButton] > .jqx-menu-item-label-container:after, .jqx-menu[checkboxes][checkable] jqx-menu-items-group[level="1"][checked][check-type=radioButton] > .jqx-menu-item-label-container:after { content: var(--jqx-icon-radio); } .jqx-menu[checkboxes][checkable][check-mode=radioButton] jqx-menu-item[level="1"][checked] > .jqx-menu-item-label-container:after, .jqx-menu[checkboxes][checkable][check-mode=radioButton] jqx-menu-items-group[level="1"][checked] > .jqx-menu-item-label-container:after { content: var(--jqx-icon-radio); } .jqx-menu[checkboxes][mode=tree] .jqx-menu-minimized-items-container jqx-menu-items-group.jqx-menu-items-group-opened > .jqx-menu-item-label-container:after { top: calc(50% + 5px); } .jqx-menu-items-group .jqx-menu-items-group-arrow { margin-left: 50px; font-size: calc(var(--jqx-font-size) - 3px); font-family: var(--jqx-family-icon); transform: rotate(0deg); } .jqx-menu-items-group[level="1"] > .jqx-menu-item-label-container > .jqx-menu-items-group-arrow { margin-left: 10px; } .jqx-menu-item[template-applied] { cursor: default; } .jqx-menu-item[template-applied] .jqx-menu-item-label-container { overflow: visible; } .jqx-menu-item[template-applied] .jqx-menu-item-label-element { width: 100%; overflow: visible; display: block; white-space: normal; } .jqx-menu-drop-down { cursor: default; background: var(--jqx-background); color: var(--jqx-background-color); } .jqx-menu-drop-down .jqx-menu-drop-down { margin: 0; } .jqx-menu-drop-down[level="2"]:not(.jqx-menu-minimized-items-container) { margin: calc(var(--jqx-editor-drop-down-vertical-offset) + 3px) 0px; } .jqx-menu-drop-down[level="2"][mode=vertical]:not(.jqx-menu-minimized-items-container), .jqx-menu-drop-down[level="2"][mode=dropDown]:not(.jqx-menu-minimized-items-container) { margin: 0; } .jqx-menu-drop-down[drop-down-position*=overlay] { margin: unset; } .jqx-menu-drop-down.drop-down-height-set .jqx-menu-scroll-button { display: block; background-color: var(--jqx-scroll-bar-button-background); color: var(--jqx-scroll-bar-button-color); border-color: var(--jqx-scroll-bar-button-border); min-height: 0; width: 100%; height: var(--jqx-menu-scroll-button-size); } .jqx-menu-drop-down.drop-down-height-set .jqx-menu-scroll-button[hover] { background-color: var(--jqx-scroll-bar-button-background-hover); color: var(--jqx-scroll-bar-button-color-hover); border-color: var(--jqx-scroll-bar-button-border-hover); } .jqx-menu-drop-down.drop-down-height-set .jqx-menu-scroll-button[active] { background-color: var(--jqx-scroll-bar-button-background-active); color: var(--jqx-scroll-bar-button-color-active); border-color: var(--jqx-scroll-bar-button-border-active); } .jqx-menu-drop-down.drop-down-height-set .jqx-menu-scroll-button > button { border: none; } .jqx-menu-drop-down.drop-down-height-set .jqx-menu-main-container.scroll-buttons-shown { width: calc(100% - 2 * var(--jqx-menu-scroll-button-size)); overflow: hidden; } .jqx-menu-drop-down.drop-down-height-set[mode=vertical] .jqx-menu-scroll-button, .jqx-menu-drop-down.drop-down-height-set[mode=dropDown] .jqx-menu-scroll-button, .jqx-menu-drop-down.drop-down-height-set[mode=tree] .jqx-menu-scroll-button { width: 100%; height: var(--jqx-menu-scroll-button-size); } .jqx-menu-drop-down.drop-down-height-set > .jqx-menu-item-container { height: 100%; overflow: hidden; } .jqx-menu-drop-down.drop-down-height-set > .jqx-menu-item-container.scroll-buttons-shown { height: calc(100% - 2 * var(--jqx-menu-scroll-button-size)); } .jqx-menu-drop-down.drop-down-height-set > .jqx-menu-item-container.scroll-buttons-shown.one-button-shown { width: 100%; height: calc(100% - var(--jqx-menu-scroll-button-size)); } .jqx-menu-drop-down.drop-down-height-set > .jqx-menu-item-container > jqx-menu-items-group { position: static; } .jqx-menu-drop-down.jqx-drop-down-repositioned { position: absolute; background: var(--jqx-background); color: var(--jqx-background-color); box-shadow: var(--jqx-elevation-8); border-radius: var(--jqx-border-radius); left: 100%; top: 0; z-index: var(--jqx-editor-drop-down-z-index); box-sizing: border-box; font-size: var(--jqx-font-size); font-family: var(--jqx-font-family); } .jqx-menu-drop-down.jqx-drop-down-repositioned a { color: inherit; } .jqx-menu-drop-down.jqx-drop-down-repositioned * { box-sizing: border-box; } .jqx-menu-drop-down.jqx-drop-down-repositioned .jqx-ripple { background: var(--jqx-primary); } .jqx-menu-drop-down.jqx-drop-down-repositioned .jqx-menu-drop-down { border: none; } .jqx-menu-drop-down.jqx-drop-down-repositioned .jqx-menu-item-label-container { position: relative; width: 100%; padding: 10px; display: flex; flex-direction: row; align-items: center; justify-content: space-between; overflow: hidden; } .jqx-menu-drop-down.jqx-drop-down-repositioned jqx-menu-item[separator][level]:last-child, .jqx-menu-drop-down.jqx-drop-down-repositioned jqx-menu-items-group[separator][level]:last-child { border-bottom: none; } .jqx-menu-drop-down.jqx-drop-down-repositioned.jqx-drop-down-container[drop-down-position*=top] { margin: calc(-1 * (var(--jqx-editor-drop-down-vertical-offset) + 3px)) 0px; } .jqx-menu-drop-down.jqx-drop-down-repositioned[checkboxes] .jqx-menu-item-container[checkable] > jqx-menu-item > .jqx-menu-item-label-container, .jqx-menu-drop-down.jqx-drop-down-repositioned[checkboxes] .jqx-menu-item-container[checkable] > jqx-menu-items-group > .jqx-menu-item-label-container { padding-left: 35px; } .jqx-menu-drop-down.jqx-drop-down-repositioned[checkboxes] .jqx-menu-item-container[checkable] > jqx-menu-item[checked] > .jqx-menu-item-label-container:after, .jqx-menu-drop-down.jqx-drop-down-repositioned[checkboxes] .jqx-menu-item-container[checkable] > jqx-menu-items-group[checked] > .jqx-menu-item-label-container:after { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); content: var(--jqx-icon-check); font-family: "jqx-icons"; } .jqx-menu-drop-down.jqx-drop-down-repositioned[checkboxes] .jqx-menu-item-container[checkable][check-mode=radioButton] > jqx-menu-item[checked] > .jqx-menu-item-label-container:after, .jqx-menu-drop-down.jqx-drop-down-repositioned[checkboxes] .jqx-menu-item-container[checkable][check-mode=radioButton] > jqx-menu-items-group[checked] > .jqx-menu-item-label-container:after, .jqx-menu-drop-down.jqx-drop-down-repositioned[checkboxes] .jqx-menu-item-container[checkable] > jqx-menu-item[checked][check-type=radioButton] > .jqx-menu-item-label-container:after, .jqx-menu-drop-down.jqx-drop-down-repositioned[checkboxes] .jqx-menu-item-container[checkable] > jqx-menu-items-group[checked][check-type=radioButton] > .jqx-menu-item-label-container:after { content: var(--jqx-icon-radio); } .jqx-menu-drop-down.jqx-drop-down-repositioned[level="2"] { top: 100%; left: 0; } .jqx-menu-drop-down.jqx-drop-down-repositioned[mode=vertical][level="2"], .jqx-menu-drop-down.jqx-drop-down-repositioned[mode=dropDown][level="2"] { top: 0; left: 100%; } .jqx-menu-drop-down.jqx-drop-down-repositioned[mode=vertical][drop-down-position|=top], .jqx-menu-drop-down.jqx-drop-down-repositioned[mode=dropDown][drop-down-position|=top] { box-shadow: var(--jqx-elevation-8); transform: translateY(-100%); } .jqx-menu-drop-down.jqx-drop-down-repositioned[mode=vertical][drop-down-position|=top][level="2"], .jqx-menu-drop-down.jqx-drop-down-repositioned[mode=dropDown][drop-down-position|=top][level="2"] { top: 100%; transform: none; } .jqx-menu-drop-down.jqx-drop-down-repositioned[mode=vertical][drop-down-position=overlay-right][level="2"], .jqx-menu-drop-down.jqx-drop-down-repositioned[mode=dropDown][drop-down-position=overlay-right][level="2"] { left: 0; } .jqx-menu-drop-down.jqx-drop-down-repositioned[mode=vertical][drop-down-position=overlay-left][level="2"], .jqx-menu-drop-down.jqx-drop-down-repositioned[mode=dropDown][drop-down-position=overlay-left][level="2"] { right: 0; } .jqx-menu-drop-down.jqx-drop-down-repositioned[mode=dropDown][drop-down-position$=left][level="2"] { left: initial; right: 100%; } .jqx-menu-drop-down.jqx-drop-down-repositioned[drop-down-position$=left] { left: initial; right: 100%; } .jqx-menu-drop-down.jqx-drop-down-repositioned[drop-down-position$=left][level="2"] { left: initial; right: 0; } .jqx-menu-drop-down.jqx-drop-down-repositioned[drop-down-position=overlay-left]:not([level="2"]) { left: initial; right: 0; } .jqx-menu-drop-down.jqx-drop-down-repositioned[drop-down-position*=overlay] { margin: unset; } .jqx-menu-drop-down.jqx-drop-down-repositioned[drop-down-position|=overlay] { top: 50%; left: 0; transform: translateY(-50%); box-shadow: var(--jqx-elevation-8); } .jqx-menu-drop-down.jqx-drop-down-repositioned[drop-down-position*=top] { margin: calc(-1 * (var(--jqx-editor-drop-down-vertical-offset) + 3px)) 0px; } .jqx-menu-drop-down.jqx-drop-down-repositioned[drop-down-position|=top] { top: 100%; transform: translateY(-100%); box-shadow: var(--jqx-elevation-8); } .jqx-menu-drop-down.jqx-drop-down-repositioned[drop-down-position|=top][level="2"] { top: 0; transform: none; } .jqx-menu-drop-down.jqx-drop-down-repositioned[animation=none].jqx-visibility-hidden { transform: scale(0); } .jqx-menu-drop-down.jqx-drop-down-repositioned.jqx-visibility-hidden.not-in-view { left: -9999px; top: -9999px; transition: none; } .jqx-menu-drop-down.jqx-drop-down-repositioned .jqx-hidden { display: none !important; } .jqx-menu-drop-down:not([animation=none]).jqx-drop-down-repositioned { opacity: 1; transform: scaleY(1); -webkit-transform-origin: top; transform-origin: top; transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0ms, visibility 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0ms; } .jqx-menu-drop-down:not([animation=none]).jqx-drop-down-repositioned.jqx-visibility-hidden { opacity: 0.2; transform: scaleY(0); } .jqx-menu-drop-down:not([animation=none]).jqx-drop-down-repositioned[drop-down-position|=top] { transform: translateY(-100%) scaleY(1); -webkit-transform-origin: bottom; transform-origin: bottom; } .jqx-menu-drop-down:not([animation=none]).jqx-drop-down-repositioned[drop-down-position|=top].jqx-visibility-hidden { transform: translateY(-100%) scaleY(0); } .jqx-menu-drop-down:not([animation=none]).jqx-drop-down-repositioned[drop-down-position|=top][level="2"] { transform: scaleY(1); } .jqx-menu-drop-down:not([animation=none]).jqx-drop-down-repositioned[drop-down-position|=top][level="2"].jqx-visibility-hidden { transform: scaleY(0); } .jqx-menu-drop-down:not([animation=none]).jqx-drop-down-repositioned[drop-down-position|=overlay] { transform: translateY(-50%) scaleY(1); -webkit-transform-origin: center; transform-origin: center; } .jqx-menu-drop-down:not([animation=none]).jqx-drop-down-repositioned[drop-down-position|=overlay].jqx-visibility-hidden { transform: translateY(-50%) scaleY(0); } .jqx-menu-drop-down:not(.jqx-list-menu-view-minimized).jqx-drop-down-repositioned[checkboxes][drop-down-position$=left] .jqx-menu-item-container[checkable] > jqx-menu-item > .jqx-menu-item-label-container, .jqx-menu-drop-down:not(.jqx-list-menu-view-minimized).jqx-drop-down-repositioned[checkboxes][drop-down-position$=left] .jqx-menu-item-container[checkable] > jqx-menu-items-group > .jqx-menu-item-label-container { padding-left: 10px; padding-right: 35px; } .jqx-menu-drop-down:not(.jqx-list-menu-view-minimized).jqx-drop-down-repositioned[checkboxes][drop-down-position$=left] .jqx-menu-item-container[checkable] > jqx-menu-item > .jqx-menu-item-label-container:after, .jqx-menu-drop-down:not(.jqx-list-menu-view-minimized).jqx-drop-down-repositioned[checkboxes][drop-down-position$=left] .jqx-menu-item-container[checkable] > jqx-menu-items-group > .jqx-menu-item-label-container:after { left: initial; right: 10px; } .jqx-menu-minimized-items-container { position: absolute; background: var(--jqx-background); color: var(--jqx-background-color); box-shadow: var(--jqx-elevation-8); border-radius: var(--jqx-border-radius); z-index: var(--jqx-editor-drop-down-z-index); left: calc(-1 * var(--jqx-border-width)); top: calc(100% + var(--jqx-border-width)); } .jqx-menu-minimized-items-container jqx-menu-items-group { display: flex; flex-direction: column; overflow: hidden; } .jqx-menu-minimized-items-container jqx-menu-items-group .jqx-menu-items-group-arrow { margin-left: 0; } .jqx-menu-minimized-items-container jqx-menu-item[level], .jqx-menu-minimized-items-container jqx-menu-items-group[level] { margin: 0; height: auto; } .jqx-menu-minimized-items-container .jqx-menu-drop-down { margin: 0; border: none; position: static; width: 100%; height: auto; padding-left: 20px; box-shadow: none; transform: none; } .jqx-menu-minimized-items-container .jqx-menu-drop-down.jqx-visibility-hidden { border: none; } .jqx-menu-minimized-items-container .jqx-menu-drop-down:not(.jqx-menu-minimized-items-container) { margin: 0; } .jqx-menu-minimized-items-container .jqx-menu-drop-down.drop-down-height-set > .jqx-menu-item-container { overflow: initial; } .jqx-menu-minimized-items-container.jqx-menu-drop-down.jqx-drop-down-repositioned[drop-down-position$=left] .jqx-menu-drop-down .jqx-menu-item-label-container > .jqx-menu-item-shortcut { margin-right: 0; } .jqx-menu-minimized-items-container.jqx-menu-drop-down.jqx-drop-down-repositioned[drop-down-position|=overlay] { transform: none; } .jqx-menu-minimized-items-container.jqx-menu-drop-down:not([animation=none]).jqx-drop-down-repositioned[drop-down-position|=overlay] { transform: scaleY(1); -webkit-transform-origin: top; transform-origin: top; } .jqx-menu-minimized-items-container.jqx-menu-drop-down:not([animation=none]).jqx-visibility-hidden.jqx-drop-down-repositioned[drop-down-position|=overlay] { transform: scaleY(0); } .jqx-menu-minimized-items-container .jqx-menu-item-shortcut { margin-left: 0; } .jqx-menu-minimized-items-container .jqx-menu-item-label-container { position: relative; width: 100%; padding: 10px; display: flex; flex-direction: row; align-items: center; justify-content: space-between; overflow: hidden; } .jqx-menu-minimized-items-container .jqx-menu-items-group-opened > .jqx-menu-drop-down { margin-top: 10px; } .jqx-menu-minimized-items-container .jqx-menu-items-group-opened > .jqx-menu-item-label-container > .jqx-menu-items-group-arrow { transform: rotate(180deg); } .jqx-menu-minimized-items-container .jqx-menu-item-label-element { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .jqx-menu-minimized-items-container.jqx-drop-down-repositioned { z-index: var(--jqx-editor-drop-down-z-index); } .jqx-menu-minimized-items-container.jqx-drop-down-repositioned .jqx-menu-drop-down { position: absolute; background: var(--jqx-background); color: var(--jqx-background-color); box-shadow: var(--jqx-elevation-8); border-radius: var(--jqx-border-radius); left: 100%; top: 0; z-index: var(--jqx-editor-drop-down-z-index); } .jqx-menu-minimized-items-container.jqx-drop-down-repositioned .jqx-menu-drop-down.jqx-visibility-hidden { border: none; margin-top: 0; height: 0; transform: scaleY(0); } .jqx-menu-minimized-items-container.jqx-drop-down-repositioned .jqx-menu-items-group-opened > .jqx-menu-item-label-container { padding-bottom: 0; } .jqx-menu-minimized-items-container.jqx-drop-down-repositioned[drop-down-position$=left] { left: initial; right: calc(-1 * var(--jqx-border-width)); } .jqx-menu-minimized-items-container.jqx-drop-down-repositioned[drop-down-position$=left] .jqx-menu-items-group-arrow { margin: 0; } .jqx-menu-minimized-items-container.jqx-drop-down-repositioned[checkboxes] jqx-menu-items-group.jqx-menu-items-group-opened > .jqx-menu-item-label-container:after { top: calc(50% + 5px); } .jqx-menu-minimized-items-container:not([animation=none]) { opacity: 1; transform: scaleY(1); -webkit-transform-origin: top; transform-origin: top; transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0ms, visibility 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0ms; } .jqx-menu-minimized-items-container:not([animation=none]) .jqx-menu-drop-down { -webkit-transform-origin: top; transform-origin: top; transition: height 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0ms; } .jqx-menu-minimized-items-container:not([animation=none]) .jqx-menu-item-label-container > .jqx-menu-items-group-arrow { transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0ms; } .jqx-menu-minimized-items-container:not([animation=none]).jqx-visibility-hidden { opacity: 0.2; transform: scaleY(0); } .jqx-menu-minimized-items-container[drop-down] { margin: calc(var(--jqx-editor-drop-down-vertical-offset) + 3px) 0px; } .jqx-menu-minimized-items-container[drop-down-position] .jqx-menu-drop-down { position: static; width: 100%; height: auto; padding-left: 20px; box-shadow: none; transform: none; } .jqx-menu-minimized-items-container[drop-down-position|=top] { top: calc(-1 * var(--jqx-border-width)); transform: translateY(-100%); box-shadow: var(--jqx-elevation-4); } .jqx-menu-minimized-items-container[drop-down-position|=top]:not([animation=none]) { transform: translateY(-100%) scaleY(1); -webkit-transform-origin: bottom; transform-origin: bottom; } .jqx-menu-minimized-items-container[drop-down-position|=top]:not([animation=none]).jqx-visibility-hidden { transform: translateY(-100%) scaleY(0); } .jqx-menu-minimized-items-container[drop-down-position|=top][mode=vertical]:not([animation=none]) .jqx-menu-drop-down, .jqx-menu-minimized-items-container[drop-down-position|=top][mode=dropDown]:not([animation=none]) .jqx-menu-drop-down { -webkit-transform-origin: top; transform-origin: top; } .jqx-menu-minimized-items-container[drop-down-position$=left] .jqx-menu-drop-down { padding-left: 0; padding-right: 20px; } .jqx-menu-minimized-items-container[checkboxes][checkable] > jqx-menu-item > .jqx-menu-item-label-container, .jqx-menu-minimized-items-container[checkboxes][checkable] > jqx-menu-items-group > .jqx-menu-item-label-container { padding-left: 35px; } .jqx-menu-minimized-items-container[checkboxes][checkable] > jqx-menu-item[checked] > .jqx-menu-item-label-container:after, .jqx-menu-minimized-items-container[checkboxes][checkable] > jqx-menu-items-group[checked] > .jqx-menu-item-label-container:after { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); content: var(--jqx-icon-check); font-family: "jqx-icons"; } .jqx-menu-minimized-items-container[checkboxes][checkable] > jqx-menu-item[checked][check-type=radioButton] > .jqx-menu-item-label-container:after, .jqx-menu-minimized-items-container[checkboxes][checkable] > jqx-menu-item[checked][check-type=radioButton] > .jqx-menu-item-label-container:after, .jqx-menu-minimized-items-container[checkboxes][checkable] > jqx-menu-items-group[checked][check-type=radioButton] > .jqx-menu-item-label-container:after, .jqx-menu-minimized-items-container[checkboxes][checkable] > jqx-menu-items-group[checked][check-type=radioButton] > .jqx-menu-item-label-container:after { content: var(--jqx-icon-radio); } .jqx-menu-minimized-items-container[checkboxes][checkable][drop-down-position$=left] > jqx-menu-item > .jqx-menu-item-label-container, .jqx-menu-minimized-items-container[checkboxes][checkable][drop-down-position$=left] > jqx-menu-items-group > .jqx-menu-item-label-container { padding-left: 10px; padding-right: 35px; } .jqx-menu-minimized-items-container[checkboxes][checkable][drop-down-position$=left] > jqx-menu-item > .jqx-menu-item-label-container:after, .jqx-menu-minimized-items-container[checkboxes][checkable][drop-down-position$=left] > jqx-menu-items-group > .jqx-menu-item-label-container:after { left: initial; right: 10px; } .jqx-menu-minimized-items-container[checkboxes][checkable][check-mode=radioButton] > jqx-menu-item[checked] > .jqx-menu-item-label-container:after, .jqx-menu-minimized-items-container[checkboxes][checkable][check-mode=radioButton] > jqx-menu-items-group[checked] > .jqx-menu-item-label-container:after { content: var(--jqx-icon-radio); } .jqx-drop-down.jqx-menu-minimized-items-container { margin: calc(var(--jqx-editor-drop-down-vertical-offset) + 3px) 0px; } .jqx-date-time-picker .jqx-date-time-drop-down.jqx-visibility-hidden.not-in-view { left: -9999px; top: -9999px; transition: none; } .minus:after { content: var(--jqx-icon-minus); font-family: var(--jqx-font-family-icon); } /* --- Right-To-Left --- */ .jqx-menu[right-to-left] .jqx-menu-main-container { direction: rtl; } .jqx-menu[right-to-left] .jqx-menu-minimized-items-container { left: initial; right: calc(-1 * var(--jqx-border-width)); } .jqx-menu[right-to-left] .jqx-menu-minimized-items-container .jqx-menu-item-shortcut { margin-right: initial; margin-left: initial; } .jqx-menu[right-to-left] .jqx-menu-items-group-arrow.right.jqx-arrow-right { margin-left: initial; margin-right: 50px; } .jqx-menu[right-to-left] .jqx-menu-drop-down { left: initial; right: 100%; } .jqx-menu[right-to-left] .jqx-menu-drop-down[level="2"] { right: 0; } .jqx-menu[right-to-left] jqx-menu-item { direction: rtl; } .jqx-menu[right-to-left] jqx-menu-item .jqx-menu-item-shortcut { margin-left: initial; margin-right: 100px; } .jqx-menu[right-to-left] jqx-menu-items-group { direction: rtl; } .jqx-menu[right-to-left] jqx-menu-items-group .jqx-menu-items-group-arrow { margin-right: initial; margin-left: initial; } .jqx-menu[right-to-left] jqx-menu-items-group[level="1"] > .jqx-menu-item-label-container > .jqx-menu-items-group-arrow { /*margin-right: initial;*/ margin-right: 10px; margin-left: initial; } .jqx-menu[right-to-left]:not([mode=tree])[drop-down-position$=left] jqx-menu-item:not([level="1"]) > .jqx-menu-item-label-container { flex-direction: row; } .jqx-menu[right-to-left][mode]:not([mode=horizontal])[drop-down-position$=left] .jqx-menu-main-container jqx-menu-items-group > .jqx-menu-item-label-container { flex-direction: row; } .jqx-menu[right-to-left][mode]:not([mode=horizontal]):not([mode=tree])[drop-down-position$=left] jqx-menu-item > .jqx-menu-item-label-container { flex-direction: row; } .jqx-menu[right-to-left][mode=tree] .jqx-menu-minimized-items-container { direction: rtl; } .jqx-menu[right-to-left][mode=dropDown] { left: initial; right: 100%; } .jqx-menu[right-to-left][mode=dropDown] jqx-menu-item[level="1"] .jqx-menu-item-shortcut { margin-right: initial; margin-left: initial; } .jqx-menu[right-to-left][mode=vertical] .jqx-menu-drop-down[level="2"] { left: initial; right: 100%; } .jqx-menu[right-to-left][drop-down-position$=left] jqx-menu-items-group:not([level="1"]) > .jqx-menu-item-label-container { flex-direction: row; } .jqx-menu[right-to-left][drop-down-position$=right] .jqx-menu-drop-down[level="2"] { right: initial; left: 0; } .jqx-menu[right-to-left][drop-down-position=overlay-right] .jqx-menu-main-container .jqx-menu-drop-down:not([level="2"]) { right: initial; left: 0; } .jqx-menu[right-to-left][minimized] .jqx-menu-minimized-items-container { direction: rtl; } .jqx-menu[right-to-left][minimized][drop-down-position$=left] > .jqx-container { flex-direction: row; } .jqx-menu[right-to-left][checkboxes] .jqx-menu-item-container[checkable] > jqx-menu-item > .jqx-menu-item-label-container, .jqx-menu[right-to-left][checkboxes] .jqx-menu-item-container[checkable] > jqx-menu-items-group > .jqx-menu-item-label-container { padding-left: 10px; padding-right: 35px; } .jqx-menu[right-to-left][checkboxes] .jqx-menu-item-container[checkable] > jqx-menu-item[checked] > .jqx-menu-item-label-container:after, .jqx-menu[right-to-left][checkboxes] .jqx-menu-item-container[checkable] > jqx-menu-items-group[checked] > .jqx-menu-item-label-container:after { left: initial; right: 10px; } .jqx-menu[right-to-left][checkboxes][checkable] jqx-menu-item[level="1"] > .jqx-menu-item-label-container, .jqx-menu[right-to-left][checkboxes][checkable] jqx-menu-items-group[level="1"] > .jqx-menu-item-label-container { padding-left: 10px; padding-right: 35px; } .jqx-menu[right-to-left][checkboxes][checkable] jqx-menu-item[level="1"][checked] > .jqx-menu-item-label-container:after, .jqx-menu[right-to-left][checkboxes][checkable] jqx-menu-items-group[level="1"][checked] > .jqx-menu-item-label-container:after { left: initial; right: 10px; } .jqx-menu-drop-down.jqx-drop-down-repositioned[right-to-left] { left: initial; right: 100%; } .jqx-menu-drop-down.jqx-drop-down-repositioned[right-to-left].jqx-menu-minimized-items-container { direction: rtl; } .jqx-menu-drop-down.jqx-drop-down-repositioned[right-to-left] .jqx-menu-item-container { direction: rtl; } .jqx-menu-drop-down.jqx-drop-down-repositioned[right-to-left] .jqx-menu-items-group-arrow.right.jqx-arrow-right { margin-left: initial; margin-right: 50px; } .jqx-menu-drop-down.jqx-drop-down-repositioned[right-to-left] jqx-menu-item .jqx-menu-item-shortcut { margin-left: initial; margin-right: 100px; } .jqx-menu-drop-down.jqx-drop-down-repositioned[right-to-left][drop-down-position$=left][level="2"], .jqx-menu-drop-down.jqx-drop-down-repositioned[right-to-left][drop-down-position=overlay-right]:not([level="2"]) { right: initial; left: 0; } .jqx-menu-drop-down.jqx-drop-down-repositioned[right-to-left][level="2"] { right: 0; } .jqx-menu-drop-down.jqx-drop-down-repositioned[right-to-left][checkboxes] .jqx-menu-item-container[checkable] > jqx-menu-item > .jqx-menu-item-label-container, .jqx-menu-drop-down.jqx-drop-down-repositioned[right-to-left][checkboxes] .jqx-menu-item-container[checkable] > jqx-menu-items-group > .jqx-menu-item-label-container { padding-left: 10px; padding-right: 35px; } .jqx-menu-drop-down.jqx-drop-down-repositioned[right-to-left][checkboxes] .jqx-menu-item-container[checkable] > jqx-menu-item[checked] > .jqx-menu-item-label-container:after, .jqx-menu-drop-down.jqx-drop-down-repositioned[right-to-left][checkboxes] .jqx-menu-item-container[checkable] > jqx-menu-items-group[checked] > .jqx-menu-item-label-container:after { left: initial; right: 10px; } .jqx-menu-minimized-items-container[right-to-left] { left: initial; right: 100%; } .jqx-menu-minimized-items-container[right-to-left] .jqx-menu-item-shortcut, .jqx-menu-minimized-items-container[right-to-left] jqx-menu-items-group .jqx-menu-items-group-arrow { margin-right: initial; margin-left: initial; } .jqx-menu-minimized-items-container[right-to-left].jqx-drop-down-repositioned { left: initial; right: calc(-1 * var(--jqx-border-width)); } .jqx-menu-minimized-items-container[right-to-left].jqx-drop-down-repositioned .jqx-menu-drop-down { left: initial; right: 100%; } .jqx-menu-minimized-items-container[right-to-left][checkboxes][checkable] > jqx-menu-item > .jqx-menu-item-label-container, .jqx-menu-minimized-items-container[right-to-left][checkboxes][checkable] > jqx-menu-items-group > .jqx-menu-item-label-container { padding-left: 10px; padding-right: 35px; } .jqx-menu-minimized-items-container[right-to-left][checkboxes][checkable] > jqx-menu-item[checked] > .jqx-menu-item-label-container:after, .jqx-menu-minimized-items-container[right-to-left][checkboxes][checkable] > jqx-menu-items-group[checked] > .jqx-menu-item-label-container:after { left: initial; right: 10px; } /* jqx-multi-split-button */ jqx-multi-split-button { width: var(--jqx-multi-split-button-default-width); height: var(--jqx-multi-split-button-default-height); overflow: initial; visibility: hidden; cursor: pointer; } jqx-multi-split-button.jqx-element { overflow: visible; visibility: inherit; border-width: 0px; } jqx-multi-split-button[right-to-left] .jqx-content, jqx-multi-split-button[right-to-left] .jqx-label, jqx-multi-split-button[right-to-left] .jqx-hint { direction: rtl; } jqx-multi-split-button[right-to-left] .jqx-drop-down { direction: initial; } .jqx-multi-split-button jqx-list-box { position: relative; width: 100%; height: 100%; border: initial; padding: initial; overflow: hidden; font-size: inherit; font-family: inherit; outline: none; } .jqx-multi-split-button .jqx-buttons-container .jqx-input .jqx-token { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; cursor: pointer; margin: 2px; user-select: none; margin-top: 0; margin-bottom: 0; } .jqx-multi-split-button .jqx-drop-down.jqx-visibility-hidden { transform: scale(0); transition: transform 0.2s ease-in; transform-origin: left top 0px; } .jqx-multi-split-button .jqx-template-container { width: 100%; height: 100%; } .jqx-multi-split-button .jqx-multi-split-button-buttons { display: flex; width: 100%; height: 100%; align-items: stretch; justify-content: space-around; } .jqx-multi-split-button .jqx-multi-split-button-buttons .jqx-action-split-button { display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; } .jqx-multi-split-button .jqx-multi-split-button-buttons .jqx-action-split-button[hover] { background: var(--jqx-ui-state-hover); border: var(--jqx-ui-state-border-hover); color: var(--jqx-ui-state-color-hover); } .jqx-multi-split-button .jqx-multi-split-button-buttons .jqx-action-split-button[active] { background: var(--jqx-ui-state-active); border: var(--jqx-ui-state-border-active); color: var(--jqx-ui-state-color-active); } .jqx-multi-split-button.primary { --jqx-border: var(--jqx-primary); --jqx-outline: var(--jqx-primary); --jqx-surface: var(--jqx-primary); --jqx-surface-color: var(--jqx-primary-color); --jqx-ui-state-selected: rgba(var(--jqx-primary-rgb), .8); --jqx-ui-state-color-selected: var(--jqx-primary-color); --jqx-ui-state-active: rgba(var(--jqx-primary-rgb), .8); --jqx-ui-state-color-active: var(--jqx-primary-color); --jqx-ui-state-hover: var(--jqx-primary); --jqx-ui-state-color-hover: var(--jqx-primary-color); --jqx-ui-state-border-selected: var(--jqx-primary); --jqx-ui-state-border-active: var(--jqx-primary); --jqx-ui-state-border-hover: var(--jqx-primary); } .jqx-multi-split-button.primary[hover] { --jqx-surface: var(--jqx-primary-color); } .jqx-multi-split-button.secondary { --jqx-border: var(--jqx-secondary); --jqx-outline: var(--jqx-secondary); --jqx-surface: var(--jqx-secondary); --jqx-surface-color: var(--jqx-secondary-color); --jqx-ui-state-selected: rgba(var(--jqx-secondary-rgb), .8); --jqx-ui-state-color-selected: var(--jqx-secondary-color); --jqx-ui-state-active: rgba(var(--jqx-secondary-rgb), .8); --jqx-ui-state-color-active: var(--jqx-secondary-color); --jqx-ui-state-hover: var(--jqx-secondary); --jqx-ui-state-color-hover: var(--jqx-secondary-color); --jqx-ui-state-border-selected: var(--jqx-secondary); --jqx-ui-state-border-active: var(--jqx-secondary); --jqx-ui-state-border-hover: var(--jqx-secondary); } .jqx-multi-split-button.secondary[hover] { --jqx-surface: var(--jqx-secondary-color); } .jqx-multi-split-button.success { --jqx-border: var(--jqx-success); --jqx-outline: var(--jqx-success); --jqx-surface: var(--jqx-success); --jqx-surface-color: var(--jqx-success-color); --jqx-ui-state-selected: rgba(var(--jqx-success-rgb), .8); --jqx-ui-state-color-selected: var(--jqx-success-color); --jqx-ui-state-active: rgba(var(--jqx-success-rgb), .8); --jqx-ui-state-color-active: var(--jqx-success-color); --jqx-ui-state-hover: var(--jqx-success); --jqx-ui-state-color-hover: var(--jqx-success-color); --jqx-ui-state-border-selected: var(--jqx-success); --jqx-ui-state-border-active: var(--jqx-success); --jqx-ui-state-border-hover: var(--jqx-success); } .jqx-multi-split-button.success[hover] { --jqx-surface: var(--jqx-success-color); } .jqx-multi-split-button.error { --jqx-border: var(--jqx-error); --jqx-outline: var(--jqx-error); --jqx-surface: var(--jqx-error); --jqx-surface-color: var(--jqx-error-color); --jqx-ui-state-selected: rgba(var(--jqx-error-rgb), .8); --jqx-ui-state-color-selected: var(--jqx-error-color); --jqx-ui-state-active: rgba(var(--jqx-error-rgb), .8); --jqx-ui-state-color-active: var(--jqx-error-color); --jqx-ui-state-hover: var(--jqx-error); --jqx-ui-state-color-hover: var(--jqx-error-color); --jqx-ui-state-border-selected: var(--jqx-error); --jqx-ui-state-border-active: var(--jqx-error); --jqx-ui-state-border-hover: var(--jqx-error); } .jqx-multi-split-button.error[hover] { --jqx-surface: var(--jqx-error-color); } .jqx-multi-split-button.info { --jqx-border: var(--jqx-info); --jqx-outline: var(--jqx-info); --jqx-surface: var(--jqx-info); --jqx-surface-color: var(--jqx-info-color); --jqx-ui-state-selected: rgba(var(--jqx-info-rgb), .8); --jqx-ui-state-color-selected: var(--jqx-info-color); --jqx-ui-state-active: rgba(var(--jqx-info-rgb), .8); --jqx-ui-state-color-active: var(--jqx-info-color); --jqx-ui-state-hover: var(--jqx-info); --jqx-ui-state-color-hover: var(--jqx-info-color); --jqx-ui-state-border-selected: var(--jqx-info); --jqx-ui-state-border-active: var(--jqx-info); --jqx-ui-state-border-hover: var(--jqx-info); } .jqx-multi-split-button.info[hover] { --jqx-surface: var(--jqx-info-color); } .jqx-multi-split-button.warning { --jqx-border: var(--jqx-warning); --jqx-outline: var(--jqx-warning); --jqx-surface: var(--jqx-warning); --jqx-surface-color: var(--jqx-warning-color); --jqx-ui-state-selected: rgba(var(--jqx-warning-rgb), .8); --jqx-ui-state-color-selected: var(--jqx-warning-color); --jqx-ui-state-active: rgba(var(--jqx-warning-rgb), .8); --jqx-ui-state-color-active: var(--jqx-warning-color); --jqx-ui-state-hover: var(--jqx-warning); --jqx-ui-state-color-hover: var(--jqx-warning-color); --jqx-ui-state-border-selected: var(--jqx-warning); --jqx-ui-state-border-active: var(--jqx-warning); --jqx-ui-state-border-hover: var(--jqx-warning); } .jqx-multi-split-button.warning[hover] { --jqx-surface: var(--jqx-warning-color); } .jqx-multi-split-button.light { --jqx-border: var(--jqx-light); --jqx-outline: var(--jqx-light); --jqx-surface: var(--jqx-light); --jqx-surface-color: var(--jqx-light-color); --jqx-ui-state-selected: rgba(var(--jqx-light-rgb), .8); --jqx-ui-state-color-selected: var(--jqx-light-color); --jqx-ui-state-active: rgba(var(--jqx-light-rgb), .8); --jqx-ui-state-color-active: var(--jqx-light-color); --jqx-ui-state-hover: var(--jqx-light); --jqx-ui-state-color-hover: var(--jqx-light-color); --jqx-ui-state-border-selected: var(--jqx-light); --jqx-ui-state-border-active: var(--jqx-light); --jqx-ui-state-border-hover: var(--jqx-light); } .jqx-multi-split-button.light[hover] { --jqx-surface: var(--jqx-light-color); } .jqx-multi-split-button.dark { --jqx-border: var(--jqx-dark); --jqx-outline: var(--jqx-dark); --jqx-surface: var(--jqx-dark); --jqx-surface-color: var(--jqx-dark-color); --jqx-ui-state-selected: rgba(var(--jqx-dark-rgb), .8); --jqx-ui-state-color-selected: var(--jqx-dark-color); --jqx-ui-state-active: rgba(var(--jqx-dark-rgb), .8); --jqx-ui-state-color-active: var(--jqx-dark-color); --jqx-ui-state-hover: var(--jqx-dark); --jqx-ui-state-color-hover: var(--jqx-dark-color); --jqx-ui-state-border-selected: var(--jqx-dark); --jqx-ui-state-border-active: var(--jqx-dark); --jqx-ui-state-border-hover: var(--jqx-dark); } .jqx-multi-split-button.dark[hover] { --jqx-surface: var(--jqx-dark-color); } .jqx-multi-split-button[selection-display-mode=tokens] .jqx-multi-split-button-unselect-button { pointer-events: initial; } .jqx-multi-split-button[selection-display-mode=plain] .jqx-multi-split-button-unselect-button { pointer-events: none; } /* jqx-multiline-text-box */ jqx-multiline-text-box.jqx-element { width: var(--jqx-multiline-text-box-default-width); height: var(--jqx-multiline-text-box-default-height); background: transparent; overflow: initial; } jqx-multiline-text-box[cols] { width: auto; } jqx-multiline-text-box[rows] { height: auto; } .jqx-multiline-text-box[hover] { border-color: var(--jqx-ui-state-border-hover); } .jqx-multiline-text-box[focus] { border-color: var(--jqx-outline); } .jqx-multiline-text-box > .jqx-resize-trigger-container { margin-bottom: -1px; } .jqx-multiline-text-box .jqx-container > .jqx-resize-trigger-container, .jqx-multiline-text-box .jqx-inner-container > .jqx-resize-trigger-container { margin-bottom: -1px; } .jqx-multiline-text-box.jqx-drop-down-box > .jqx-container, .jqx-multiline-text-box.jqx-drop-down-box[label][hint] > .jqx-container, .jqx-multiline-text-box.jqx-drop-down-box.jqx-container { overflow: visible; display: block; max-height: inherit; } .jqx-multiline-text-box jqx-scroll-bar { display: none; } .jqx-multiline-text-box textarea { width: 100%; height: 100%; outline: none; color: inherit; border: none; padding: var(--jqx-editor-label-padding); border: none; font-family: inherit; font-size: inherit; font-weight: inherit; font-style: inherit; background-color: inherit; overflow: hidden; resize: none; float: left; border-top-left-radius: var(--jqx-border-top-left-radius); border-bottom-left-radius: var(--jqx-border-bottom-left-radius); border-top-right-radius: var(--jqx-border-top-right-radius); border-bottom-right-radius: var(--jqx-border-bottom-right-radius); } .jqx-multiline-text-box textarea:not(.jqx-text-box-hidden) { max-height: inherit; } .jqx-multiline-text-box textarea.jqx-text-box-hidden { visibility: hidden; width: 100%; height: 0px; position: absolute; left: 0px; top: 0px; } .jqx-multiline-text-box .jqx-inner-container { font-family: inherit; font-size: inherit; font-weight: inherit; font-style: inherit; overflow: hidden; color: inherit; width: 100%; height: 100%; position: relative; max-height: inherit; } .jqx-multiline-text-box .jqx-initialization-value { display: none; } .jqx-multiline-text-box .jqx-resize-element { box-sizing: border-box; height: calc(var(--jqx-scroll-bar-size)); width: calc(var(--jqx-scroll-bar-size)); position: absolute; bottom: 0px; right: 0px; background-color: lightgray; background-clip: content-box; border: var(--jqx-border) solid var(--jqx-border-width); display: none; padding: 2px 0px 0px 2px; cursor: nw-resize; touch-action: none; } .jqx-multiline-text-box .jqx-required-message { display: none; } .jqx-multiline-text-box .jqx-container textarea, .jqx-multiline-text-box.jqx-container textarea { height: 100%; } .jqx-multiline-text-box .jqx-container.hscroll textarea, .jqx-multiline-text-box.jqx-container.hscroll textarea { height: calc(100% - var(--jqx-scroll-bar-size)); } .jqx-multiline-text-box .jqx-container.hscroll jqx-scroll-bar, .jqx-multiline-text-box.jqx-container.hscroll jqx-scroll-bar { width: 100%; height: calc(var(--jqx-scroll-bar-size)); display: block; } .jqx-multiline-text-box .jqx-container.hscroll jqx-scroll-bar[orientation=vertical], .jqx-multiline-text-box.jqx-container.hscroll jqx-scroll-bar[orientation=vertical] { display: none; } .jqx-multiline-text-box .jqx-container.vscroll textarea, .jqx-multiline-text-box.jqx-container.vscroll textarea { width: calc(100% - var(--jqx-scroll-bar-size)); } .jqx-multiline-text-box .jqx-container.vscroll jqx-scroll-bar[orientation=vertical], .jqx-multiline-text-box.jqx-container.vscroll jqx-scroll-bar[orientation=vertical] { float: right; width: calc(var(--jqx-scroll-bar-size)); height: 100%; display: block; border-top-right-radius: var(--jqx-border-top-right-radius); border-bottom-right-radius: var(--jqx-border-bottom-right-radius); } .jqx-multiline-text-box .jqx-container.vscroll.hscroll jqx-scroll-bar, .jqx-multiline-text-box.jqx-container.vscroll.hscroll jqx-scroll-bar { width: calc(100% - var(--jqx-scroll-bar-size)); } .jqx-multiline-text-box .jqx-container.vscroll.hscroll jqx-scroll-bar[orientation=vertical], .jqx-multiline-text-box.jqx-container.vscroll.hscroll jqx-scroll-bar[orientation=vertical] { height: calc(100% - var(--jqx-scroll-bar-size)); width: calc(var(--jqx-scroll-bar-size)); } .jqx-multiline-text-box[auto-expand] { height: auto; min-height: var(--jqx-editor-height); } .jqx-multiline-text-box[auto-expand] textarea.jqx-text-box-hidden { height: 0; } .jqx-multiline-text-box[auto-capitalize=words] textarea { text-transform: capitalize; } .jqx-multiline-text-box[auto-capitalize=characters] textarea { text-transform: uppercase; } .jqx-multiline-text-box[display-mode=escaped] textarea { white-space: nowrap; } .jqx-multiline-text-box[cols] textarea, .jqx-multiline-text-box[rows] textarea { width: inherit; height: inherit; } .jqx-multiline-text-box[resizable] .jqx-container.hscroll jqx-scroll-bar, .jqx-multiline-text-box[resizable].jqx-container.hscroll jqx-scroll-bar { width: calc(100% - var(--jqx-scroll-bar-size)); } .jqx-multiline-text-box[resizable] .jqx-container.hscroll jqx-scroll-bar jqx-multiline-text-box .jqx-container.vscroll.hscroll jqx-scroll-bar, .jqx-multiline-text-box[resizable].jqx-container.hscroll jqx-scroll-bar jqx-multiline-text-box .jqx-container.vscroll.hscroll jqx-scroll-bar { height: calc(var(--jqx-scroll-bar-size)); width: calc(100% - var(--jqx-scroll-bar-size)); } .jqx-multiline-text-box[resizable] .jqx-container.vscroll jqx-scroll-bar[orientation=vertical], .jqx-multiline-text-box[resizable].jqx-container.vscroll jqx-scroll-bar[orientation=vertical] { height: calc(100% - var(--jqx-scroll-bar-size)); width: calc(var(--jqx-scroll-bar-size)); } .jqx-multiline-text-box[resizable] .jqx-resize-element { display: block; } .jqx-multiline-text-box[resizable] .jqx-resize, .jqx-multiline-text-box[resizable] .jqx-resize textarea { user-select: none; } .jqx-multiline-text-box.outlined textarea { border: 1px solid var(--jqx-border) !important; padding: 10px; } .jqx-multiline-text-box.outlined[focus] textarea { border: 1px solid var(--jqx-primary) !important; border-top-color: transparent !important; } .jqx-multiline-text-box.outlined.jqx-element { height: var(--jqx-multiline-text-box-default-height); } .jqx-multiline-text-box[right-to-left] textarea { float: right; } .jqx-multiline-text-box[right-to-left] .jqx-container.vscroll jqx-scroll-bar[orientation=vertical], .jqx-multiline-text-box[right-to-left].jqx-container.vscroll jqx-scroll-bar[orientation=vertical] { border-top-left-radius: var(--jqx-border-top-right-radius); border-bottom-left-radius: var(--jqx-border-bottom-right-radius); border-top-right-radius: initial; border-bottom-right-radius: initial; } /* jqx-numeric-text-box */ jqx-numeric-text-box { width: var(--jqx-numeric-text-box-default-width); height: var(--jqx-numeric-text-box-default-height); } jqx-numeric-text-box .jqx-container { display: flex; border: none; } jqx-numeric-text-box .jqx-container { width: 100%; } jqx-numeric-text-box.jqx-element { overflow: visible; border: none; background: transparent; } jqx-numeric-text-box[spin-buttons][spin-buttons-position=left] .jqx-spin-button.jqx-element:first-child { border-right: none; } jqx-numeric-text-box[spin-buttons][spin-buttons-position=left] .jqx-spin-button.jqx-element:last-child { border-right: none; } jqx-numeric-text-box[label] .jqx-label, jqx-numeric-text-box[hint] .jqx-hint { position: absolute; left: 0; bottom: 100%; font-size: 12px; width: 100%; display: block; padding: var(--jqx-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; } .jqx-numeric-text-box { border-color: var(--jqx-border); border-width: 1px; border-style: solid; } .jqx-numeric-text-box:focus { border-color: var(--jqx-outline); } .jqx-numeric-text-box * { box-sizing: border-box; } .jqx-numeric-text-box.jqx-container { display: flex; border: none; width: 100%; height: 100%; position: relative; } .jqx-numeric-text-box .jqx-container { height: 100%; position: relative; } .jqx-numeric-text-box input.jqx-input { width: 100%; height: 100%; border-color: var(--jqx-border); border-width: 1px; border-style: solid; border-right-width: var(--jqx-border-width); padding: var(--jqx-editor-label-padding); background-color: var(--jqx-background); color: inherit; font: inherit; text-align: var(--jqx-numeric-text-box-text-align); outline: none; -webkit-appearance: none; } .jqx-numeric-text-box .jqx-spin-button { width: 100%; height: 50%; background-color: var(--jqx-surface); color: var(--jqx-surface-color); border-color: var(--jqx-border); border-width: 1px; border-style: solid; } .jqx-numeric-text-box .jqx-spin-button:first-child { border-bottom: none; } .jqx-numeric-text-box .jqx-spin-button.jqx-element { display: block; min-height: 0; border-radius: 0px; background: var(--jqx-surface); color: var(--jqx-surface-color); } .jqx-numeric-text-box .jqx-spin-button[hover] { background-color: var(--jqx-ui-state-hover); color: var(--jqx-ui-state-color-hover); border-color: var(--jqx-ui-state-border-hover); } .jqx-numeric-text-box .jqx-spin-button[active] { background-color: var(--jqx-ui-state-active); color: var(--jqx-ui-state-color-active); border-color: var(--jqx-ui-state-border-active); } .jqx-numeric-text-box .jqx-spin-button .jqx-button { border: none; padding: 0px; } .jqx-numeric-text-box .jqx-numeric-text-box-component { border-width: var(--jqx-border-width); border-style: solid; border-color: var(--jqx-border); border-left-width: var(--jqx-border-width); border-right-width: 0; } .jqx-numeric-text-box .jqx-input-addon { border-color: var(--jqx-border); border-width: 1px; border-style: solid; } .jqx-numeric-text-box .jqx-spin-buttons-container { width: var(--jqx-editor-addon-width); border: none; } .jqx-numeric-text-box .jqx-numeric-text-box-drop-down { width: 100%; } .jqx-numeric-text-box .jqx-numeric-text-box-radix-display.jqx-numeric-text-box-pressed-component, .jqx-numeric-text-box .jqx-numeric-text-box-radix-display.jqx-numeric-text-box-pressed-component[hover] { background-color: var(--jqx-ui-state-active); color: var(--jqx-ui-state-color-active); border-color: var(--jqx-ui-state-border-active); } .jqx-numeric-text-box .jqx-numeric-text-box-unit-display { width: var(--jqx-numeric-text-box-default-unit-display-width); border-width: var(--jqx-border-width) 0 var(--jqx-border-width) 0; overflow: hidden; background-color: var(--jqx-background); } .jqx-numeric-text-box .jqx-numeric-text-box-unit-display[hover] { background-color: var(--jqx-ui-state-hover); color: var(--jqx-ui-state-color-hover); border-color: var(--jqx-ui-state-border-hover); } .jqx-numeric-text-box .jqx-arrow { position: relative; } .jqx-numeric-text-box .jqx-label, .jqx-numeric-text-box .jqx-hint { display: none; position: absolute; } .jqx-numeric-text-box .jqx-numeric-text-box-component:not(.jqx-hidden) { border-top-left-radius: 0px; border-bottom-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; } .jqx-numeric-text-box .jqx-numeric-text-box-component:not(.jqx-hidden).jqx-numeric-text-box-component-border-left, .jqx-numeric-text-box .jqx-numeric-text-box-component:not(.jqx-hidden).jqx-numeric-text-box-component-border-left .jqx-spin-button.jqx-repeat-button-element { border-top-left-radius: var(--jqx-border-top-left-radius); border-bottom-left-radius: var(--jqx-border-bottom-left-radius); overflow: hidden; } .jqx-numeric-text-box .jqx-numeric-text-box-component:not(.jqx-hidden).jqx-numeric-text-box-component-border-left .jqx-spin-button.jqx-element:first-child { border-bottom-left-radius: 0px; } .jqx-numeric-text-box .jqx-numeric-text-box-component:not(.jqx-hidden).jqx-numeric-text-box-component-border-left .jqx-spin-button.jqx-element:last-child { border-top-left-radius: 0px; } .jqx-numeric-text-box .jqx-numeric-text-box-component:not(.jqx-hidden).jqx-numeric-text-box-component-border-right, .jqx-numeric-text-box .jqx-numeric-text-box-component:not(.jqx-hidden).jqx-numeric-text-box-component-border-right .jqx-spin-button.jqx-element { border-top-right-radius: var(--jqx-border-top-right-radius); border-bottom-right-radius: var(--jqx-border-bottom-right-radius); overflow: hidden; } .jqx-numeric-text-box .jqx-numeric-text-box-component:not(.jqx-hidden).jqx-numeric-text-box-component-border-right .jqx-spin-button.jqx-element:first-child { border-bottom-right-radius: 0px; } .jqx-numeric-text-box .jqx-numeric-text-box-component:not(.jqx-hidden).jqx-numeric-text-box-component-border-right .jqx-spin-button.jqx-element:last-child { border-top-right-radius: 0px; } .jqx-numeric-text-box[drop-down-enabled] .jqx-numeric-text-box-radix-display { cursor: pointer; } .jqx-numeric-text-box[drop-down-enabled] .jqx-numeric-text-box-radix-display[hover]:not([aria-expanded=true]) { background-color: var(--jqx-ui-state-hover); color: var(--jqx-ui-state-color-hover); } .jqx-numeric-text-box:not([animation=none])[hint] .jqx-hint { transition: opacity 0.2s cubic-bezier(0.4, 0, 0.6, 1); } .jqx-numeric-text-box:not([animation=none])[hint][focus] .jqx-hint { transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .jqx-numeric-text-box:not([animation=none]) .jqx-numeric-text-box-drop-down { transform-origin: top; transition: opacity 0.2s ease-in, visibility 0.2s ease-in, transform 0.2s ease-in; } .jqx-numeric-text-box[focus] input.jqx-input { border-color: var(--jqx-outline); } .jqx-numeric-text-box[focus] .jqx-input-addon { border-color: var(--jqx-outline); } .jqx-numeric-text-box[focus] .jqx-spin-button { border-color: var(--jqx-outline); } .jqx-numeric-text-box[hint] .jqx-hint { opacity: 0; top: 100%; bottom: initial; } .jqx-numeric-text-box[hint][focus] .jqx-hint { opacity: 1; } .jqx-numeric-text-box[radix-display-position=right]:not([spin-buttons]) .jqx-numeric-text-box-radix-display, .jqx-numeric-text-box[radix-display-position=right][spin-buttons][spin-buttons-position=left] .jqx-numeric-text-box-radix-display { border-left-width: 0; border-right-width: var(--jqx-border-width); } .jqx-numeric-text-box[disabled], .jqx-numeric-text-box[value=null] .jqx-numeric-text-box-radix-display, .jqx-numeric-text-box[value=NaN] .jqx-spin-buttons-container, .jqx-numeric-text-box[value=Infinity] .jqx-spin-buttons-container, .jqx-numeric-text-box[value=-Infinity] .jqx-spin-buttons-container { opacity: 0.55; cursor: default; } .jqx-numeric-text-box[spin-buttons] input.jqx-input { width: calc(100% - var(--jqx-editor-addon-width)); } .jqx-numeric-text-box[radix-display] input.jqx-input { width: calc(100% - var(--jqx-numeric-text-box-default-radix-display-width)); } .jqx-numeric-text-box[show-unit] input.jqx-input { width: calc(100% - var(--jqx-numeric-text-box-default-unit-display-width)); } .jqx-numeric-text-box[spin-buttons][radix-display] input.jqx-input { width: calc(100% - var(--jqx-editor-addon-width) - var(--jqx-numeric-text-box-default-radix-display-width)); } .jqx-numeric-text-box[spin-buttons][show-unit] input.jqx-input { width: calc(100% - var(--jqx-editor-addon-width) - var(--jqx-numeric-text-box-default-unit-display-width)); } .jqx-numeric-text-box[radix-display][show-unit] input.jqx-input { width: calc(100% - var(--jqx-numeric-text-box-default-radix-display-width) - var(--jqx-numeric-text-box-default-unit-display-width)); } .jqx-numeric-text-box[spin-buttons][radix-display][show-unit] input.jqx-input { width: calc(100% - var(--jqx-numeric-text-box-default-unit-display-width) - var(--jqx-editor-addon-width) - var(--jqx-numeric-text-box-default-radix-display-width)); } .jqx-numeric-text-box[spin-buttons] input.jqx-input { border-right-width: 0; } .jqx-numeric-text-box[spin-buttons] .jqx-spin-buttons-container { border-right-width: var(--jqx-border-width); } .jqx-numeric-text-box[spin-buttons][spin-buttons-position=left] .jqx-spin-buttons-container { border-right-width: 0; } .jqx-numeric-text-box[spin-buttons][spin-buttons-position=left] input.jqx-input { border-right-width: var(--jqx-border-width); } .jqx-numeric-text-box[spin-buttons][spin-buttons-position=left][show-unit] input.jqx-input { border-right-width: 0; } .jqx-numeric-text-box[spin-buttons][spin-buttons-position=left][show-unit] .jqx-numeric-text-box-unit-display { border-right-width: var(--jqx-border-width); } .jqx-numeric-text-box[spin-buttons][show-unit] .jqx-numeric-text-box-unit-display { border-right-width: 0; } .jqx-numeric-text-box[show-unit] input.jqx-input { border-right-width: 0; } .jqx-numeric-text-box[show-unit] .jqx-numeric-text-box-unit-display { border-right-width: var(--jqx-border-width); } .jqx-numeric-text-box.underlined { border-width: 0px; border-bottom-width: 1px; background: var(--jqx-background); } .jqx-numeric-text-box.underlined input { border-width: 0px; border-bottom-width: 1px; } .jqx-numeric-text-box.underlined input:focus { border: none; } .jqx-numeric-text-box.underlined .jqx-spin-button, .jqx-numeric-text-box.underlined .jqx-drop-down-button { background: var(--jqx-background); border-width: 0px; border-bottom-width: 1px; border-radius: 0; } .jqx-numeric-text-box.underlined .jqx-spin-button[hover], .jqx-numeric-text-box.underlined .jqx-drop-down-button[hover] { background: var(--jqx-background); color: var(--jqx-ui-state-active); } .jqx-numeric-text-box.underlined .jqx-spin-button[active], .jqx-numeric-text-box.underlined .jqx-drop-down-button[active] { background: var(--jqx-background); color: var(--jqx-ui-state-active); } .jqx-numeric-text-box.underlined .jqx-hint { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: block !important; box-sizing: border-box; padding: var(--jqx-editor-label-padding); color: var(--jqx-background-color); pointer-events: none; font-size: 75%; opacity: 0; transition: color 0.2s, font-size 0.2s, line-height 0.2s, margin-top 0.2s, opacity 0.1s, top 0.2s; margin-top: calc(0px - var(--jqx-font-size)); } .jqx-numeric-text-box.underlined .jqx-hint:after { content: ""; position: absolute; left: 0; bottom: -2px; display: block; width: 100%; height: 2px; background-color: var(--jqx-primary); transform-origin: bottom center; transform: scaleX(0); transition: transform 0.2s; } .jqx-numeric-text-box.underlined:not([focus]) .jqx-hint { margin-top: 0px; } .jqx-numeric-text-box.underlined[focus] .jqx-drop-down-button { color: var(--jqx-primary); opacity: 1; border-bottom-color: transparent; } .jqx-numeric-text-box.underlined[focus] .jqx-hint { color: var(--jqx-primary); opacity: 1; } .jqx-numeric-text-box.underlined[focus] .jqx-hint:after { transform: scale(1); } .jqx-numeric-text-box.underlined[focus] .jqx-spin-button { border-bottom-color: transparent; } .jqx-numeric-text-box.outlined { height: auto; min-height: 0; border-radius: var(--jqx-border-radius); background: var(--jqx-background); } .jqx-numeric-text-box.outlined input { transition: border-color 0.2s; border: 1px solid var(--jqx-border); display: block; outline: unset; display: block; padding: 13px 13px; } .jqx-numeric-text-box.outlined .jqx-spin-button, .jqx-numeric-text-box.outlined .jqx-drop-down-button { background: var(--jqx-background); border-width: 0px; } .jqx-numeric-text-box.outlined .jqx-spin-button[hover], .jqx-numeric-text-box.outlined .jqx-drop-down-button[hover] { background: var(--jqx-background); color: var(--jqx-ui-state-active); } .jqx-numeric-text-box.outlined .jqx-spin-button[active], .jqx-numeric-text-box.outlined .jqx-drop-down-button[active] { background: var(--jqx-background); color: var(--jqx-ui-state-active); } .jqx-numeric-text-box.outlined .jqx-drop-down-button { padding: 8px 0px; } .jqx-numeric-text-box.outlined .jqx-hint { position: absolute; top: 0; left: 0; display: flex !important; border-color: var(--jqx-border) !important; width: 100%; max-height: 100%; color: var(--jqx-background-color); font-size: 75%; line-height: 15px; cursor: text; padding: 0; margin-top: -6px; transition: color 0.2s, z-index 0.2s, font-size 0.2s, opacity 0.3s, font-size 0.2s, line-height 0.2s; } .jqx-numeric-text-box.outlined .jqx-hint:before, .jqx-numeric-text-box.outlined .jqx-hint:after { content: ""; display: block; box-sizing: border-box; margin-top: 6px; border-top: solid 1px; border-top-color: var(--jqx-border) !important; min-width: 10px; height: 8px; pointer-events: none; box-shadow: inset 0 1px transparent; transition: border-color 0.2s, box-shadow 0.2s; } .jqx-numeric-text-box.outlined .jqx-hint:before { margin-right: 4px; border-left: solid 1px transparent; border-radius: var(--jqx-border-radius) 0; } .jqx-numeric-text-box.outlined .jqx-hint:after { flex-grow: 1; margin-left: 4px; border-right: solid 1px transparent; border-radius: 0 var(--jqx-border-radius); } .jqx-numeric-text-box.outlined:not([focus]) .jqx-hint { font-size: var(--jqx-font-size); line-height: 48px; opacity: 0; } .jqx-numeric-text-box.outlined[focus] { --jqx-border: var(--jqx-primary); } .jqx-numeric-text-box.outlined[focus] .jqx-input { border: 1px solid var(--jqx-border); border-top-color: transparent !important; } .jqx-numeric-text-box.outlined[focus] .jqx-drop-down-button { color: var(--jqx-primary); } .jqx-numeric-text-box.outlined[focus] .jqx-hint { color: var(--jqx-primary); opacity: 1; } .jqx-numeric-text-box.outlined[focus] .jqx-hint:before, .jqx-numeric-text-box.outlined[focus] .jqx-hint:after { border-top-color: var(--jqx-primary) !important; } .jqx-numeric-text-box-radix-display { display: flex; align-items: center; cursor: default; background-color: var(--jqx-surface); color: var(--jqx-surface-color); width: var(--jqx-numeric-text-box-default-radix-display-width); justify-content: center; } .jqx-numeric-text-box-unit-display { display: flex; align-items: center; cursor: default; } .jqx-numeric-text-box-drop-down { background-color: var(--jqx-surface); position: absolute; box-sizing: border-box; height: auto; border-width: var(--jqx-border-width); border-style: solid; border-color: var(--jqx-border); box-shadow: var(--jqx-elevation-8); padding: 2px; top: 100%; z-index: 9999; list-style-type: none; transform: scaleY(1); opacity: 1; background: var(--jqx-background); color: var(--jqx-background-color); font-family: var(--jqx-font-family); font-size: var(--jqx-font-size); } .jqx-numeric-text-box-drop-down .jqx-list-item { cursor: pointer; margin: 1px; border: 1px solid transparent; padding: 4px 8px 4px 8px; word-break: break-all; } .jqx-numeric-text-box-drop-down .jqx-list-item[hover], .jqx-numeric-text-box-drop-down .jqx-list-item:hover { background-color: var(--jqx-ui-state-hover); color: var(--jqx-ui-state-color-hover); } .jqx-numeric-text-box-drop-down.jqx-visibility-hidden { transform: scaleY(0); opacity: 0; } .jqx-numeric-text-box-drop-down.jqx-drop-down-repositioned:not([animation=none]) { transform-origin: top; transition: opacity 0.2s ease-in, visibility 0.2s ease-in, transform 0.2s ease-in; } .jqx-numeric-text-box-pressed-component { background-color: var(--jqx-ui-state-active); color: var(--jqx-ui-state-color-active); border-color: var(--jqx-ui-state-border-active); } jqx-numeric-text-box[right-to-left] > .jqx-container { direction: initial; } jqx-numeric-text-box[right-to-left] input.jqx-input, jqx-numeric-text-box[right-to-left] .jqx-numeric-text-box-drop-down, jqx-numeric-text-box[right-to-left] .jqx-numeric-text-box-radix-display, jqx-numeric-text-box[right-to-left] .jqx-label, jqx-numeric-text-box[right-to-left] .jqx-hint { direction: rtl; } jqx-numeric-text-box[right-to-left] .jqx-numeric-text-box-unit-display { direction: rtl; flex-direction: row-reverse; } .jqx-numeric-text-box-drop-down.jqx-drop-down-repositioned[right-to-left] { direction: rtl; } /*jqx-pager*/ .jqx-pager-middle-buttons-container { order: 1; height: 100%; } .jqx-pager-far-buttons-container { order: 2; height: 100%; } .jqx-pager-far-buttons-container.near { order: 0; } .jqx-pager-far-buttons-container.far { order: 2; } .jqx-pager-input-and-label-container { order: 3; } .jqx-pager-input-and-label-container.near { order: -2; } .jqx-pager-size-selector-and-label-container { order: 4; } .jqx-pager-size-selector-and-label-container.near { order: -1; } .jqx-pager-summary-container { order: 5; } .jqx-pager-summary-container.near { order: -2; } .jqx-pager-near-buttons-container { order: 0; height: 100%; } .jqx-pager-near-buttons-container.near { order: 0; } .jqx-pager-near-buttons-container.far { order: 2; } jqx-pager { min-width: 300px; height: var(--jqx-pager-default-height); justify-content: center; padding: var(--jqx-pager-padding); --jqx-item-border-radius: 100%; --jqx-item-border-top-left-radius: 100%; --jqx-item-border-top-right-radius: 100%; --jqx-item-border-bottom-left-radius: 100%; --jqx-item-border-bottom-right-radius: 100%; } jqx-pager.jqx-element { overflow: visible; border-radius: 0px; background: var(--jqx-surface); color: var(--jqx-surface-color); } jqx-pager:focus { border-color: var(--jqx-outline); } jqx-pager > .jqx-container, jqx-pager.jqx-container { flex-direction: row; display: flex; align-items: center; } jqx-pager .jqx-pager-near-buttons-container, jqx-pager .jqx-pager-far-buttons-container, jqx-pager .jqx-pager-middle-buttons-container, jqx-pager .jqx-pager-input-and-label-container, jqx-pager .jqx-pager-size-selector-and-label-container, jqx-pager .jqx-pager-summary-container { display: flex; flex-direction: row; align-items: center; justify-content: center; margin: 0px 4px; } jqx-pager .jqx-pager-page-index-selectors-container { display: flex; color: var(--jqx-pager-color); width: auto; height: 100%; outline: none; align-items: center; } jqx-pager .jqx-pager-page-index-selectors-container:focus .jqx-pager-page-index-selector[selected] { text-decoration: underline; } jqx-pager .jqx-pager-label { display: flex; border: none; align-items: center; justify-content: center; overflow: hidden; text-overflow: ellipsis; height: 100%; margin: 0px 8px; } jqx-pager .jqx-pager-label span { padding: 2px; } jqx-pager .jqx-pager-button { display: flex; font-size: inherit; font-family: inherit; align-items: center; justify-content: center; border-top-left-radius: var(--jqx-item-border-top-left-radius); border-top-right-radius: var(--jqx-item-border-top-right-radius); border-bottom-left-radius: var(--jqx-item-border-bottom-left-radius); border-bottom-right-radius: var(--jqx-item-border-bottom-right-radius); width: var(--jqx-pager-button-width); height: var(--jqx-pager-button-height); position: relative; overflow: hidden; /*margin-left: -1px;*/ } jqx-pager .jqx-pager-button:hover { background: var(--jqx-ui-state-hover); border-color: var(--jqx-ui-state-border-hover); color: var(--jqx-ui-state-color-hover); } jqx-pager .jqx-pager-button:active { background: var(--jqx-ui-state-active); border-color: var(--jqx-ui-state-border-active); color: var(--jqx-ui-state-color-active); } jqx-pager .jqx-pager-button:active .jqx-ripple { background-color: var(--jqx-ui-state-color-active); } jqx-pager .jqx-pager-button[disabled] { opacity: 0.55; } jqx-pager .jqx-pager-button .jqx-ripple { background-color: var(--jqx-ui-state-active); } jqx-pager .jqx-pager-page-index-selector { font-size: inherit; font-family: inherit; display: flex; flex-grow: 1; align-items: center; justify-content: center; user-select: none; cursor: pointer; overflow: hidden; text-overflow: ellipsis; width: var(--jqx-pager-page-index-selector-width); height: var(--jqx-pager-page-index-selector-height); position: relative; margin-left: var(--jqx-pager-page-index-selector-horizontal-offset); border-top-left-radius: var(--jqx-item-border-top-left-radius); border-top-right-radius: var(--jqx-item-border-top-right-radius); border-bottom-left-radius: var(--jqx-item-border-bottom-left-radius); border-bottom-right-radius: var(--jqx-item-border-bottom-right-radius); } jqx-pager .jqx-pager-page-index-selector:first-child { margin-left: -1px; } jqx-pager .jqx-pager-page-index-selector:hover { background-color: var(--jqx-ui-state-hover); color: var(--jqx-ui-state-color-hover); border-color: var(--jqx-ui-state-border-hover); } jqx-pager .jqx-pager-page-index-selector .jqx-ripple { background-color: var(--jqx-ui-state-active); } jqx-pager .jqx-pager-page-index-selector[selected] { background-color: var(--jqx-ui-state-active); color: var(--jqx-ui-state-color-active); border-color: var(--jqx-ui-state-border-active); box-shadow: var(--jqx-elevation-2); } jqx-pager .jqx-pager-page-index-selector[selected] .jqx-ripple { background-color: var(--jqx-ui-state-color-active); } jqx-pager .jqx-previous-ellipsis-button, jqx-pager .jqx-next-ellipsis-button { width: var(--jqx-pager-page-index-ellipsis-selector-width); height: var(--jqx-pager-page-index-ellipsis-selector-height); } jqx-pager .jqx-page-size-selector { width: var(--jqx-pager-page-size-selector-width); background: var(--jqx-background); color: var(--jqx-background-color); --jqx-item-border-top-left-radius: var(--jqx-border-radius); --jqx-item-border-top-right-radius: var(--jqx-border-radius); --jqx-item-border-bottom-left-radius: var(--jqx-border-radius); --jqx-item-border-bottom-right-radius: var(--jqx-border-radius); } jqx-pager .jqx-pager-input { width: var(--jqx-pager-input-width); box-sizing: border-box; padding: 0px var(--jqx-editor-label-padding); margin: 0px 5px; background: var(--jqx-background); color: var(--jqx-background-color); border-top-left-radius: var(--jqx-border-top-left-radius); border-top-right-radius: var(--jqx-border-top-right-radius); border-bottom-left-radius: var(--jqx-border-bottom-left-radius); border-bottom-right-radius: var(--jqx-border-bottom-right-radius); border-color: var(--jqx-border); border-style: solid; border-width: var(--jqx-border-width); height: var(--jqx-text-box-default-height); } jqx-pager:not([show-navigation-button-labels]) .jqx-pager-button { border-top-left-radius: var(--jqx-item-border-top-left-radius); border-top-right-radius: var(--jqx-item-border-top-right-radius); border-bottom-left-radius: var(--jqx-item-border-bottom-left-radius); border-bottom-right-radius: var(--jqx-item-border-bottom-right-radius); width: var(--jqx-pager-page-index-selector-width); } jqx-pager[disabled] .jqx-pager-page-index-selector { user-select: none; cursor: default; } jqx-pager[right-to-left] > .jqx-container, jqx-pager[right-to-left] .jqx-pager-middle-buttons-container, jqx-pager[right-to-left] .jqx-pager-near-buttons-container, jqx-pager[right-to-left] .jqx-pager-far-buttons-container, jqx-pager[right-to-left] .jqx-pager-page-index-selectors-container, jqx-pager[right-to-left] .jqx-pager-size-selector-and-label-container, jqx-pager[right-to-left] .jqx-pager-input-and-label-container, jqx-pager[right-to-left] .jqx-pager-label { flex-direction: row-reverse; } jqx-pager[right-to-left] .jqx-arrow-left:after, jqx-pager[right-to-left] .jqx-arrow-right:after, jqx-pager[right-to-left] .jqx-arrow-left-first:after, jqx-pager[right-to-left] .jqx-arrow-right-last:after { transform: rotate(180deg); transform-origin: center; } jqx-pager[right-to-left] .jqx-pager-label > span, jqx-pager[right-to-left] .jqx-first-button, jqx-pager[right-to-left] .jqx-last-button, jqx-pager[right-to-left] .jqx-next-page-button, jqx-pager[right-to-left] .jqx-previous-page-button, jqx-pager[right-to-left] .jqx-pager-page-index-selector, jqx-pager[right-to-left] .jqx-pager-input, jqx-pager[right-to-left] .jqx-pager-label { direction: rtl; } /* jqx-password-text-box */ jqx-password-text-box { display: block; width: var(--jqx-text-box-default-width); height: var(--jqx-text-box-default-height); } jqx-password-text-box.jqx-element { border: 1px solid var(--jqx-border); background: var(--jqx-background); overflow: visible; border-radius: var(--jqx-border-radius); } .jqx-password-text-box > .jqx-container { position: relative; } .jqx-password-text-box .jqx-content { width: 100%; height: 100%; color: inherit; font-family: inherit; position: relative; overflow: hidden; } .jqx-password-text-box .jqx-content .jqx-input { width: 100%; height: 100%; color: inherit; font-family: inherit; position: relative; overflow: hidden; } .jqx-password-text-box .jqx-content .jqx-input::-ms-reveal { display: none; } .jqx-password-text-box .jqx-password-icon { position: absolute; right: 0px; top: 0px; height: 100%; width: 30px; display: flex; justify-content: center; font-size: inherit; align-items: center; cursor: pointer; user-select: none; color: var(--jqx-background-color); font-family: var(--jqx-font-family-icon); } .jqx-password-text-box .jqx-password-icon:after { content: var(--jqx-icon-visibility); } .jqx-password-text-box .jqx-password-icon.jqx-hidden { display: none; } .jqx-password-text-box jqx-tooltip { font-size: inherit; font-family: inherit; font-weight: inherit; } .jqx-password-text-box .jqx-label, .jqx-password-text-box .jqx-hint { display: none; position: absolute; } .jqx-password-text-box[label] .jqx-label, .jqx-password-text-box[hint] .jqx-hint { position: absolute; left: 0; bottom: 100%; font-size: 12px; width: 100%; display: block; padding: var(--jqx-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; } .jqx-password-text-box[hint] .jqx-hint { opacity: 0; transition: opacity 0.2s cubic-bezier(0.4, 0, 0.6, 1); top: 100%; bottom: initial; } .jqx-password-text-box[hint][focus] .jqx-hint { opacity: 1; transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1); } @media not all and (min-resolution: 0.001dpcm) { @supports (-webkit-appearance: none) { .jqx-password-text-box .jqx-hint, .jqx-password-text-box .jqx-hint::after { transition-duration: 0.1s; } } } .jqx-password-text-box[show-password-strength]:focus .jqx-password-short input, .jqx-password-text-box[show-password-strength] .jqx-password-short input:focus { border-color: var(--jqx-error); } .jqx-password-text-box[show-password-strength]:focus .jqx-password-weak input, .jqx-password-text-box[show-password-strength] .jqx-password-weak input:focus { border-color: orange; } .jqx-password-text-box[show-password-strength]:focus .jqx-password-far input, .jqx-password-text-box[show-password-strength] .jqx-password-far input:focus { border-color: yellow; } .jqx-password-text-box[show-password-strength]:focus .jqx-password-good input, .jqx-password-text-box[show-password-strength] .jqx-password-good input:focus { border-color: deepskyblue; } .jqx-password-text-box[show-password-strength]:focus .jqx-password-strong input, .jqx-password-text-box[show-password-strength] .jqx-password-strong input:focus { border-color: var(--jqx-success); } /* jqx-password-text-box */ jqx-password-text-box[right-to-left] .jqx-label, jqx-password-text-box[right-to-left] .jqx-hint, jqx-password-text-box[right-to-left] > .jqx-container { direction: rtl; } jqx-password-text-box[right-to-left] jqx-tooltip { direction: initial; } jqx-password-text-box[right-to-left] .jqx-password-icon { left: 0; right: initial; } /* PivotTable */ .jqx-pivot-table thead th { font-weight: bold; } .jqx-pivot-table thead th:not(:last-child):not(.last-visible) { border-right: var(--jqx-border-width) solid var(--jqx-border); } .jqx-pivot-table tbody tr td { transform: scaleY(1); } .jqx-pivot-table tbody tr.collapsed { height: 0; } .jqx-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); } .jqx-pivot-table tbody tr.no-height td { line-height: 0; } .jqx-pivot-table th.align-left > .wrapper { justify-content: flex-start; } .jqx-pivot-table th.align-center > .wrapper { justify-content: center; } .jqx-pivot-table th.align-right > .wrapper { justify-content: flex-end; } .jqx-pivot-table tr td { line-height: calc(var(--jqx-table-row-height) - 2 * var(--jqx-table-cell-padding) - var(--jqx-border-width)); white-space: nowrap; } .jqx-pivot-table tr:last-child:not(:first-child) .jqx-pivot-table-grouping-header, .jqx-pivot-table tr:last-child:not(:first-child) .jqx-pivot-table-total-header { border-top: var(--jqx-border-width) solid var(--jqx-border); } .jqx-pivot-table tr:not(:last-child) .jqx-pivot-table-grouping-header, .jqx-pivot-table tr:not(:last-child) .jqx-pivot-table-selection-header, .jqx-pivot-table tr:not(:last-child) .jqx-pivot-table-total-header { border-bottom: none; } .jqx-pivot-table td.align-left { text-align: left; } .jqx-pivot-table td.align-center { text-align: center; } .jqx-pivot-table td.align-right { text-align: right; } .jqx-pivot-table td.sort-by { position: relative; } .jqx-pivot-table td.sort-by:before { content: var(--jqx-icon-up); display: flex; align-items: center; justify-content: flex-end; visibility: hidden; position: absolute; top: 0; right: var(--jqx-table-cell-padding); height: 100%; font-family: var(--jqx-font-family-icon); opacity: 0; transform: rotate(90deg); } .jqx-pivot-table td.sort-by.asc:before, .jqx-pivot-table td.sort-by.desc:before { opacity: 1; visibility: visible; } .jqx-pivot-table td[selection-detail]:before { content: attr(selection-detail); position: absolute; top: 100%; left: 0; padding: 3px; background-color: var(--jqx-secondary); color: var(--jqx-secondary-color); font-size: var(--jqx-font-size); font-variant: small-caps; opacity: 0.8; pointer-events: none; } .jqx-pivot-table td[selection-detail][detail-position-x=right]:before { left: unset; right: 0; } .jqx-pivot-table td[selection-detail][detail-position-y=top]:before { top: 0; transform: translateY(-100%); } .jqx-pivot-table tfoot td { font-weight: bold; } .jqx-pivot-table .jqx-pivot-table-main-container { width: 100%; height: 100%; overflow: auto; } .jqx-pivot-table .jqx-pivot-table-main-container.prevent-scroll { overflow: hidden; } .jqx-pivot-table .jqx-pivot-table-selection-header { border-top: none; } .jqx-pivot-table .jqx-pivot-table-total-header { border-top: none; width: var(--jqx-pivot-table-cell-width); } .jqx-pivot-table .jqx-pivot-table-grouping-header { border-top: none; width: var(--jqx-pivot-table-secondary-group-width); } .jqx-pivot-table .jqx-pivot-table-toolbar { display: none; border: none; border-bottom: var(--jqx-border-width) solid var(--jqx-border); height: var(--jqx-table-row-height); } .jqx-pivot-table .jqx-pivot-table-toolbar jqx-breadcrumb .jqx-breadcrumb-items .jqx-breadcrumb-item { height: calc(100% - var(--smart-breadcrumb-padding)); } .jqx-pivot-table .jqx-pivot-table-row-group-breadcrumb:before { content: var(--jqx-icon-align-left); transform: scale(-1); } .jqx-pivot-table .jqx-pivot-table-pivot-breadcrumb { border-left: var(--jqx-border-width) solid var(--jqx-border); border-radius: 0; } .jqx-pivot-table .jqx-pivot-table-pivot-breadcrumb:before { content: var(--jqx-icon-refresh); } .jqx-pivot-table .empty { border-top: none; } .jqx-pivot-table .total-arrow { display: inline-flex; margin-left: var(--jqx-table-arrow-margin); width: var(--jqx-table-arrow-size); height: var(--jqx-table-arrow-size); cursor: pointer; } .jqx-pivot-table .total-arrow:focus { outline: none; border: 1px solid var(--jqx-ui-state-color-focus); border-radius: 50%; color: var(--jqx-ui-state-color-focus); } .jqx-pivot-table .jqx-pivot-panel { border-top: none; border-right: none; border-bottom: none; width: 100%; height: 100%; } .jqx-pivot-table jqx-breadcrumb { position: relative; border: none; width: unset; height: 100%; padding-left: calc(3 * var(--jqx-breadcrumb-padding)); } .jqx-pivot-table jqx-breadcrumb:before { position: absolute; left: 0; display: flex; align-items: center; justify-content: center; width: calc(3 * var(--jqx-breadcrumb-padding)); height: 100%; font-family: var(--jqx-font-family-icon); } .jqx-pivot-table jqx-breadcrumb > .jqx-container { position: relative; } .jqx-pivot-table jqx-breadcrumb > .jqx-container.drop-target:after { content: ""; position: absolute; top: 0; left: calc(-3 * var(--jqx-breadcrumb-padding)); box-sizing: border-box; border: 2px dashed var(--jqx-primary); width: calc(100% + 4 * var(--jqx-breadcrumb-padding)); height: calc(100% + var(--jqx-breadcrumb-padding)); } .jqx-pivot-table jqx-breadcrumb .jqx-template-container { height: 100%; } .jqx-pivot-table jqx-breadcrumb .jqx-breadcrumb-items { height: 100%; } .jqx-pivot-table jqx-breadcrumb .jqx-breadcrumb-item { height: calc(100% - var(--jqx-breadcrumb-padding)); } .jqx-pivot-table jqx-breadcrumb .jqx-breadcrumb-placeholder { position: absolute; top: var(--jqx-breadcrumb-padding); left: 0; font-style: italic; } .jqx-pivot-table [selection-detail] { position: relative; overflow: visible; z-index: 1; } .jqx-pivot-table:not([right-to-left]) td.sort-by.desc::before { transform: rotate(270deg); } .jqx-pivot-table:not([animation=none]) tbody tr { transition: height 0.2s ease-in-out; } .jqx-pivot-table:not([animation=none]) tr td { transition: padding-top 0.2s ease-in-out, padding-bottom 0.2s ease-in-out, transform 0.2s ease-in-out, border-top-color 0.2s ease-in-out; } .jqx-pivot-table:not([designer]) .jqx-pivot-table-designer-container { display: none; } .jqx-pivot-table[group-layout=classic] .jqx-pivot-table-grouping-header { width: calc(0.75 * var(--jqx-pivot-table-cell-width)); } .jqx-pivot-table[group-layout=classic] tbody td:not(.expanded) + td[data-field^=group]:not(.main), .jqx-pivot-table[group-layout=classic] tbody td.expanded:not(.main) + td[data-field^=group]:not(.main) { font-size: 0; } .jqx-pivot-table[group-layout=classic] .hierarchy-arrow::after { content: var(--jqx-icon-plus); } .jqx-pivot-table[group-layout=classic] td.expanded .hierarchy-arrow::after { content: var(--jqx-icon-minus); } .jqx-pivot-table[designer] > .jqx-container { display: grid; grid-template-columns: 1fr var(--jqx-pivot-panel-width); grid-template-rows: 100%; } .jqx-pivot-table[designer] .jqx-pivot-table-designer-container { display: block; height: 100%; } .jqx-pivot-table[designer-position=near] > .jqx-container { grid-template-columns: var(--jqx-pivot-panel-width) 1fr; } .jqx-pivot-table[designer-position=near] .jqx-pivot-table-main-container { order: 1; } .jqx-pivot-table[designer-position=near]:not([right-to-left]) .jqx-pivot-panel { border-left: none; border-right: var(--jqx-border-width) solid var(--jqx-border); } .jqx-pivot-table[toolbar] > .jqx-container { display: flex; flex-direction: column; } .jqx-pivot-table[toolbar] .jqx-pivot-table-main-container { height: calc(100% - var(--jqx-table-row-height)); grid-area: main; } .jqx-pivot-table[toolbar] .jqx-pivot-table-toolbar { display: grid; grid-template-columns: 1fr 1fr var(--jqx-table-row-height) var(--jqx-table-row-height); grid-area: toolbar; gap: var(--jqx-pivot-panel-padding); } .jqx-pivot-table[toolbar] .jqx-pivot-table-designer-container { grid-area: designer; min-height: 0; max-height: unset; } .jqx-pivot-table[toolbar][designer] > .jqx-container { display: grid; grid-template-columns: 1fr var(--jqx-pivot-panel-width); grid-template-rows: var(--jqx-table-row-height) 1fr; grid-template-areas: "toolbar toolbar" "main designer"; } .jqx-pivot-table[toolbar][designer] .jqx-pivot-table-toolbar { grid-template-columns: 1fr 1fr var(--jqx-table-row-height); } .jqx-pivot-table[toolbar][designer] .jqx-table-toolbar-button.fields { display: none; } .jqx-pivot-table[toolbar][designer] .jqx-pivot-table-main-container { width: 100%; height: 100%; } .jqx-pivot-table[toolbar][designer][designer-position=near] > .jqx-container { grid-template-columns: var(--jqx-pivot-panel-width) 1fr; grid-template-areas: "toolbar toolbar" "designer main"; } .jqx-pivot-table[selection][selection-mode=cell] tbody td { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .jqx-pivot-table[selection][selection-mode=cell] tbody td.selected { background-color: rgba(var(--jqx-primary-rgb), 0.8); color: var(--jqx-primary-color); } .jqx-table[column-reorder] th[data-field].jqx-pivot-table-total-header { cursor: unset; } .jqx-table[column-reorder][column-totals] th[data-field] { cursor: unset; } .jqx-table[freeze-header] thead tr:nth-child(4) > th { top: calc(3 * var(--jqx-table-column-header-height)); } .jqx-table[freeze-header] thead tr:nth-child(5) > th { top: calc(4 * var(--jqx-table-column-header-height)); } .jqx-table[freeze-header] thead tr:nth-child(6) > th { top: calc(5 * var(--jqx-table-column-header-height)); } .jqx-table[freeze-header] thead tr:nth-child(7) > th { top: calc(6 * var(--jqx-table-column-header-height)); } .jqx-table[freeze-header] thead tr:nth-child(8) > th { top: calc(7 * var(--jqx-table-column-header-height)); } .jqx-table[freeze-header] thead tr:nth-child(9) > th { top: calc(8 * var(--jqx-table-column-header-height)); } .jqx-table[freeze-header] thead tr:nth-child(10) > th { top: calc(9 * var(--jqx-table-column-header-height)); } .jqx-table[freeze-header] thead tr:nth-child(11) > th { top: calc(10 * var(--jqx-table-column-header-height)); } .jqx-table[freeze-header] thead tr:nth-child(12) > th { top: calc(11 * var(--jqx-table-column-header-height)); } .jqx-table[freeze-header] thead tr:nth-child(13) > th { top: calc(12 * var(--jqx-table-column-header-height)); } .jqx-table[freeze-header] thead tr:nth-child(14) > th { top: calc(13 * var(--jqx-table-column-header-height)); } .jqx-table[freeze-header] thead tr:nth-child(15) > th { top: calc(14 * var(--jqx-table-column-header-height)); } .jqx-table[freeze-header] thead tr:nth-child(16) > th { top: calc(15 * var(--jqx-table-column-header-height)); } .jqx-table[freeze-header] thead tr:nth-child(17) > th { top: calc(16 * var(--jqx-table-column-header-height)); } .jqx-table[freeze-header] thead tr:nth-child(18) > th { top: calc(17 * var(--jqx-table-column-header-height)); } .jqx-table[freeze-header] thead tr:nth-child(19) > th { top: calc(18 * var(--jqx-table-column-header-height)); } .jqx-table[freeze-header] thead tr:nth-child(20) > th { top: calc(19 * var(--jqx-table-column-header-height)); } .jqx-table[freeze-header] thead tr:nth-child(21) > th { top: calc(20 * var(--jqx-table-column-header-height)); } .jqx-table[freeze-header] thead tr:nth-child(22) > th { top: calc(21 * var(--jqx-table-column-header-height)); } .jqx-table[freeze-header] thead tr:nth-child(23) > th { top: calc(22 * var(--jqx-table-column-header-height)); } .jqx-table[freeze-header] thead tr:nth-child(24) > th { top: calc(23 * var(--jqx-table-column-header-height)); } .jqx-table[freeze-row-headers] tbody td.jqx-table-select-row, .jqx-table[freeze-row-headers] tbody td[data-field^="pivotgroup"] { position: sticky; z-index: 1; background-color: var(--jqx-background); } .jqx-table[freeze-row-headers] thead th.jqx-pivot-table-selection-header, .jqx-table[freeze-row-headers] thead th.jqx-pivot-table-grouping-header { position: sticky; z-index: 3; background-color: var(--jqx-background); } .jqx-table[freeze-row-headers] tbody td[data-field^="pivotgroup"]:last-of-type, .jqx-table[freeze-row-headers] tbody tr > td.jqx-table-select-row:only-of-type, .jqx-table[freeze-row-headers] thead th.jqx-pivot-table-grouping-header:last-of-type { box-shadow: 1px 0 0 0 var(--jqx-border); } .jqx-table-window.drill-down { --jqx-window-default-width: 750px; --jqx-window-footer-padding: 0; --jqx-window-footer-height: 0px; } .jqx-table-window.drill-down .jqx-content-container > .jqx-content > div { display: grid; grid-template-rows: auto 1fr; grid-template-columns: 100%; gap: var(--jqx-pivot-panel-padding); width: 100%; height: 100%; } .jqx-table-window.drill-down .drill-down-details { display: flex; } .jqx-table-window.drill-down .jqx-content strong { margin-right: var(--jqx-pivot-panel-padding); margin-left: calc(var(--jqx-pivot-panel-padding) / 3); } .jqx-table-window.drill-down jqx-table { min-height: 0; } .jqx-table-window.fields { --jqx-window-footer-padding: 0; --jqx-window-footer-height: 0px; --jqx-window-default-width: 600px; --jqx-window-default-height: 800px; } .jqx-table-window.fields jqx-pivot-panel { width: 100%; height: 100%; } .jqx-table-window.fields jqx-pivot-panel > .jqx-container { grid-template-rows: auto 1fr; grid-template-columns: unset; } .jqx-table-window.fields jqx-pivot-panel > .jqx-container > div:first-child { order: 1; } .jqx-table-window.fields jqx-pivot-panel > .jqx-container > div:nth-child(2) { order: 0; } .jqx-table-window.fields jqx-pivot-panel .jqx-filter-panel .jqx-filter-panel-button-container > jqx-button { width: 40%; } .jqx-table-window.fields jqx-pivot-panel .jqx-pivot-panel-columns-view { grid-template-rows: 2fr 1fr 1fr 1fr; } .jqx-table-window.fields jqx-pivot-panel .jqx-pivot-panel-tabs { border-left: none; writing-mode: unset; } .jqx-table-window.fields jqx-pivot-panel .jqx-pivot-panel-tab-item { height: auto; border-bottom-width: calc(2 * var(--jqx-border-width)); border-left-width: var(--jqx-border-width); border-left-color: transparent; } .jqx-table-window.fields jqx-pivot-panel .jqx-pivot-panel-tab-item:first-child { margin-top: 0; margin-right: var(--jqx-pivot-panel-padding); } .jqx-table-window.fields jqx-pivot-panel .jqx-pivot-panel-tab-item:focus { border-color: var(--jqx-ui-state-color-focus); } .jqx-table-window.fields jqx-pivot-panel .jqx-pivot-panel-tab-item.selected { border-bottom-color: var(--jqx-primary); } .jqx-table-window.fields jqx-pivot-panel .jqx-pivot-panel-tab-item.selected:focus { border-color: var(--jqx-ui-state-color-focus) var(--jqx-ui-state-color-focus) var(--jqx-primary) var(--jqx-ui-state-color-focus); } .jqx-table-window.fields jqx-pivot-panel .jqx-pivot-panel-tab-item .icon { margin-bottom: 0; margin-right: 3px; } .jqx-table-window.fields:not([animation=none]) jqx-pivot-panel .jqx-pivot-panel-tab-item { transition: border-bottom-color 0.3s ease-out; } .jqx-window.jqx-table-window.drill-down .jqx-content-container > .jqx-footer, .jqx-window.jqx-table-window.fields .jqx-content-container > .jqx-footer { display: none; } /* PivotPanel */ .jqx-pivot-panel { border: var(--jqx-border-width) solid var(--jqx-border); width: var(--jqx-pivot-panel-width); height: var(--jqx-pivot-panel-default-height); } .jqx-pivot-panel > .jqx-container { display: grid; grid-template-columns: 1fr auto; min-width: 0; min-height: 0; } .jqx-pivot-panel > .jqx-container > div:first-child { min-height: 0; } .jqx-pivot-panel > .jqx-container .check-box { position: relative; left: unset; transform: none; } .jqx-pivot-panel jqx-accordion-item .jqx-content-container { padding: 0; } .jqx-pivot-panel jqx-accordion-item.filtered .jqx-label { position: relative; color: var(--jqx-primary); } .jqx-pivot-panel jqx-accordion-item.filtered .jqx-label:before { height: 100%; font-family: var(--jqx-font-family-icon); font-style: normal; font-weight: normal; font-size: var(--jqx-arrow-size); color: inherit; text-decoration: inherit; font-variant: normal; text-transform: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; content: var(--jqx-icon-filter); position: absolute; right: calc(100% + var(--jqx-pivot-panel-padding) / 2); width: 16px; } .jqx-pivot-panel jqx-tree-item .settings-icon { margin-right: calc(var(--jqx-pivot-panel-padding) / 2); } .jqx-pivot-panel jqx-tree-item .settings-icon:before { width: 100%; height: 100%; font-family: var(--jqx-font-family-icon); font-style: normal; font-weight: normal; font-size: var(--jqx-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(--jqx-icon-settings); } .jqx-pivot-panel jqx-accordion { width: 100%; height: 100%; } .jqx-pivot-panel jqx-filter-panel { width: 100%; height: 100%; } .jqx-pivot-panel jqx-filter-panel > .jqx-container { display: grid; grid-template-rows: auto 1fr auto; row-gap: var(--jqx-pivot-panel-padding); } .jqx-pivot-panel jqx-filter-panel > .jqx-container > div:nth-child(2) { min-height: 0; } .jqx-pivot-panel jqx-filter-panel > .jqx-container jqx-tree { height: 100%; } .jqx-pivot-panel jqx-tree.jqx-element { visibility: inherit; } .jqx-pivot-panel jqx-tree:focus { border-color: var(--jqx-ui-state-color-focus); } .jqx-pivot-panel .icon:before { width: 100%; height: 100%; font-family: var(--jqx-font-family-icon); font-style: normal; font-weight: normal; font-size: var(--jqx-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; } .jqx-pivot-panel .jqx-accordion jqx-accordion-item .jqx-accordion-item-content { padding: 0; } .jqx-pivot-panel .jqx-pivot-panel-tabs { display: flex; border-left: var(--jqx-border-width) solid var(--jqx-border); writing-mode: vertical-lr; } .jqx-pivot-panel .jqx-pivot-panel-tab-item { display: flex; align-items: center; justify-content: center; border: 1px solid transparent; border-left-width: calc(2 * var(--jqx-border-width)); height: var(--jqx-pivot-panel-tab-item-height); padding: var(--jqx-pivot-panel-padding); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; cursor: pointer; } .jqx-pivot-panel .jqx-pivot-panel-tab-item:first-child { margin-top: var(--jqx-pivot-panel-padding); } .jqx-pivot-panel .jqx-pivot-panel-tab-item:first-child .icon:before { content: var(--jqx-icon-table); } .jqx-pivot-panel .jqx-pivot-panel-tab-item:nth-child(2) .icon:before { content: var(--jqx-icon-filter); } .jqx-pivot-panel .jqx-pivot-panel-tab-item:hover { color: var(--jqx-primary); } .jqx-pivot-panel .jqx-pivot-panel-tab-item:focus { border-color: var(--jqx-ui-state-color-focus); outline: none; } .jqx-pivot-panel .jqx-pivot-panel-tab-item.selected { border-left-color: var(--jqx-primary); } .jqx-pivot-panel .jqx-pivot-panel-tab-item.selected:focus { border-color: var(--jqx-ui-state-color-focus) var(--jqx-ui-state-color-focus) var(--jqx-ui-state-color-focus) var(--jqx-primary); } .jqx-pivot-panel .jqx-pivot-panel-tab-item .icon { margin-bottom: 3px; } .jqx-pivot-panel .jqx-pivot-panel-columns-view { display: grid; grid-template-rows: 3fr 1fr 1fr 1fr; width: 100%; min-width: 0; height: 100%; min-height: 0; } .jqx-pivot-panel .jqx-pivot-panel-columns-view jqx-tree { border-color: transparent; width: 100%; height: 100%; } .jqx-pivot-panel .jqx-pivot-panel-active-columns { display: grid; grid-template-rows: auto 1fr; min-width: 0; min-height: 0; border-top: var(--jqx-border-width) solid var(--jqx-border); } .jqx-pivot-panel .jqx-pivot-panel-active-columns jqx-tree-item .jqx-tree-item-label-element > span { display: flex; } .jqx-pivot-panel .jqx-pivot-panel-label { display: flex; padding: var(--jqx-pivot-panel-padding); background: var(--jqx-primary); color: var(--jqx-primary-color); } .jqx-pivot-panel .jqx-pivot-panel-label .icon { margin-right: calc(var(--jqx-pivot-panel-padding) / 2); } .jqx-pivot-panel .jqx-pivot-panel-row-groups-label .icon:before { content: var(--jqx-icon-align-left); transform: scale(-1); } .jqx-pivot-panel .jqx-pivot-panel-summaries-label .icon:before { content: var(--jqx-icon-math); } .jqx-pivot-panel .jqx-pivot-panel-pivots-label .icon:before { content: var(--jqx-icon-refresh); } .jqx-pivot-panel .jqx-pivot-panel-columns-container { min-height: 0; overflow: auto; } .jqx-pivot-panel .jqx-pivot-panel-filters-view { height: 100%; } .jqx-pivot-panel:not([animation=none]) .jqx-pivot-panel-tab-item { transition: border-left-color 0.3s ease-out; } .jqx-pivot-panel[inverted] > .jqx-container { grid-template-columns: auto 1fr; } .jqx-pivot-panel[inverted] > .jqx-container > div:first-child { order: 1; } .jqx-pivot-panel[inverted] .jqx-pivot-panel-tabs { border-left: none; border-right: var(--jqx-border-width) solid var(--jqx-border); } .jqx-pivot-panel[inverted] .jqx-pivot-panel-tab-item { border-left: 1px solid transparent; border-right-width: calc(2 * var(--jqx-border-width)); } .jqx-pivot-panel[inverted] .jqx-pivot-panel-tab-item span:nth-child(2) { transform: rotate(180deg); } .jqx-pivot-panel[inverted] .jqx-pivot-panel-tab-item.selected { border-right-color: var(--jqx-primary); } .jqx-pivot-panel[inverted] .jqx-pivot-panel-tab-item.selected:focus { border-color: var(--jqx-ui-state-color-focus) var(--jqx-primary) var(--jqx-ui-state-color-focus) var(--jqx-ui-state-color-focus); } .jqx-pivot-panel[inverted]:not([animation=none]) .jqx-pivot-panel-tab-item { transition: border-right-color 0.3s ease-out; } .jqx-window.jqx-pivot-window { --jqx-window-default-height: 190px; } .jqx-window.jqx-pivot-window .jqx-content-container > .jqx-content { display: grid; grid-template-columns: minmax(175px, auto) 1fr; grid-auto-rows: max-content; gap: var(--jqx-pivot-panel-padding); min-width: 0; } .jqx-window.jqx-pivot-window .jqx-content-container > .jqx-footer { display: flex; justify-content: space-evenly; align-items: center; } .jqx-window.jqx-pivot-window .jqx-content-container > .jqx-footer jqx-button { --jqx-button-padding: 0; width: 40%; height: 100%; } .jqx-window.jqx-pivot-window .jqx-content .category.label { grid-column-start: 1; grid-column-end: 3; font-weight: bold; text-decoration: underline; } .jqx-window.jqx-pivot-window jqx-input { width: 100%; } .jqx-window.jqx-pivot-window.summary { --jqx-window-default-height: 500px; } .jqx-window.jqx-pivot-window:not(.summary) .summary { display: none; } /* Pivot Feedbacks */ .jqx-breadcrumb-feedback.cancel:after { content: var(--jqx-icon-block); background-color: var(--jqx-error); color: var(--jqx-error-color); } .jqx-breadcrumb-feedback.delete:after { content: var(--jqx-icon-delete); background-color: var(--jqx-primary); color: var(--jqx-primary-color); } .jqx-breadcrumb-feedback.pivot:after { content: var(--jqx-icon-refresh); } .jqx-breadcrumb-feedback.row-group:after { content: var(--jqx-icon-align-left); transform: scale(-1); } .jqx-breadcrumb-feedback.summary:after { content: var(--jqx-icon-math); } .jqx-tree-item-feedback.forbidden { border-color: var(--jqx-error); color: var(--jqx-error); } .jqx-tree-item-feedback.forbidden:before { width: 100%; height: 100%; font-family: var(--jqx-font-family-icon); font-style: normal; font-weight: normal; font-size: var(--jqx-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(--jqx-icon-block); margin-right: calc(var(--jqx-pivot-panel-padding) / 2); } /* PivotTable */ .jqx-pivot-table[right-to-left] thead th:not(:last-child) { border-left: var(--jqx-border-width) solid var(--jqx-border); border-right: none; } .jqx-pivot-table[right-to-left] td.sort-by.asc:before { transform: rotate(270deg); } .jqx-pivot-table[right-to-left] th.expanded .total-arrow { transform: none; } .jqx-pivot-table[right-to-left] jqx-breadcrumb { padding-left: var(--jqx-breadcrumb-padding); padding-right: calc(3 * var(--jqx-breadcrumb-padding)); } .jqx-pivot-table[right-to-left] jqx-breadcrumb:before { left: unset; right: 0; } .jqx-pivot-table[right-to-left] .total-arrow { transform: rotate(180deg); } .jqx-pivot-table[right-to-left] .jqx-pivot-table-pivot-breadcrumb { border-left: none; border-right: var(--jqx-border-width) solid var(--jqx-border); } .jqx-pivot-table[right-to-left][selection]:not([selection-mode=cell]) thead th:first-child { border-left: none; } .jqx-pivot-table[right-to-left]:not([designer-position=near]) .jqx-pivot-panel { border-left: none; border-right: var(--jqx-border-width) solid var(--jqx-border); } .jqx-table-window[right-to-left].drill-down .jqx-content strong { margin-right: calc(var(--jqx-pivot-panel-padding) / 3); margin-left: var(--jqx-pivot-panel-padding); } .jqx-table-window[right-to-left].fields jqx-pivot-panel .jqx-pivot-panel-tabs, .jqx-table-window[right-to-left].fields jqx-pivot-panel .jqx-pivot-panel-tab-item { flex-direction: row-reverse; } .jqx-table-window[right-to-left].fields jqx-pivot-panel .jqx-pivot-panel-tab-item { display: flex; } .jqx-table-window[right-to-left].fields jqx-pivot-panel .jqx-pivot-panel-tab-item:first-child { margin-left: var(--jqx-pivot-panel-padding); margin-right: 0; } .jqx-table-window[right-to-left].fields jqx-pivot-panel .jqx-pivot-panel-tab-item .icon { margin-left: 3px; margin-right: 0; } /* PivotPanel */ .jqx-pivot-panel[right-to-left] { direction: ltr; } .jqx-pivot-panel[right-to-left] > .jqx-container > div:first-child, .jqx-pivot-panel[right-to-left] .jqx-pivot-panel-tab-item > span:nth-child(2) { direction: rtl; } .jqx-pivot-panel[right-to-left] .jqx-pivot-panel-label .icon, .jqx-pivot-panel[right-to-left] jqx-tree-item .settings-icon { margin-left: calc(var(--jqx-pivot-panel-padding) / 2); margin-right: 0; } /* .jqx-power-button */ .jqx-power-button { padding: 0px; border-radius: 100%; display: inline-block; width: var(--jqx-power-button-default-width); height: var(--jqx-power-button-default-width); } .jqx-power-button .jqx-input { border-radius: 100%; outline: none; width: 100%; height: 100%; min-width: var(--jqx-power-button-default-width); min-height: var(--jqx-power-button-default-width); background-color: var(--jqx-background); border-style: solid; box-sizing: border-box; border-width: var(--jqx-border-width); border-color: var(--jqx-border); display: block; position: relative; overflow: hidden; } .jqx-power-button .jqx-input:after { content: var(--jqx-icon-power); width: 100%; height: 100%; font-family: "jqx-icons"; font-style: normal; font-weight: normal; font-size: 20px; text-decoration: inherit; font-variant: normal; text-transform: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; } .jqx-power-button .jqx-container { cursor: pointer; height: 100%; position: relative; display: flex; } .jqx-power-button .jqx-animation { pointer-events: none; } .jqx-power-button[focus] { outline: none; } .jqx-power-button[focus] .jqx-input { outline: none; border: var(--jqx-border-width) solid var(--jqx-ui-state-border-focus); background: var(--jqx-ui-state-focus); color: var(--jqx-ui-state-color-focus); } .jqx-power-button:hover .jqx-input { border: var(--jqx-border-width) solid var(--jqx-ui-state-border-hover); background: var(--jqx-ui-state-hover); color: var(--jqx-ui-state-color-hover); transition: background-color 100ms linear; } .jqx-power-button:active .jqx-input { border: var(--jqx-border-width) solid var(--jqx-ui-state-border-active); background: var(--jqx-ui-state-active); color: var(--jqx-ui-state-color-active); transition: background-color 100ms linear; } .jqx-power-button[disabled] .jqx-container { cursor: initial; } .jqx-power-button[checked] .jqx-input { background-color: var(--jqx-primary); color: var(--jqx-primary); } .jqx-power-button[checked] .jqx-input:after { color: white; } .jqx-power-button[readonly]:active .jqx-input, .jqx-power-button[readonly].active .jqx-input, .jqx-power-button[readonly]:hover .jqx-input { color: initial; border: var(--jqx-border-width) solid var(--jqx-button-border); background: var(--jqx-button-background); transition: none; } jqx-power-button.active .jqx-input { border: var(--jqx-border-width) solid var(--jqx-ui-state-border-active); background: var(--jqx-ui-state-active); color: var(--jqx-ui-state-color-active); transition: background-color 100ms linear; } jqx-power-button.raised { box-shadow: var(--jqx-elevation-2); } /* .jqx-power-button */ jqx-power-button[right-to-left] > .jqx-container > .jqx-input { direction: rtl; } /* jqx-progress-bar */ jqx-progress-bar.jqx-element, jqx-circular-progress-bar.jqx-element, .jqx-circular-progress-bar.jqx-element { border: none; } jqx-progress-bar.jqx-element:focus > .jqx-container, jqx-circular-progress-bar.jqx-element:focus > .jqx-container, .jqx-circular-progress-bar.jqx-element:focus > .jqx-container { border-color: var(--jqx-outline); } jqx-progress-bar > .jqx-container, jqx-progress-bar.jqx-container, jqx-circular-progress-bar > .jqx-container, jqx-circular-progress-bar.jqx-container, .jqx-circular-progress-bar > .jqx-container, .jqx-circular-progress-bar.jqx-container { border-top-left-radius: var(--jqx-border-top-left-radius); border-top-right-radius: var(--jqx-border-top-right-radius); border-bottom-left-radius: var(--jqx-border-bottom-left-radius); border-bottom-right-radius: var(--jqx-border-bottom-right-radius); overflow: hidden; position: relative; border-width: var(--jqx-border-width); border-style: solid; border-color: var(--jqx-border); color: var(--jqx-background-color); } jqx-progress-bar .jqx-label, jqx-circular-progress-bar .jqx-label, .jqx-circular-progress-bar .jqx-label { top: 50%; left: 50%; transform: translate(-50%, -50%); position: absolute; text-align: center; color: var(--jqx-background-color); } jqx-progress-bar { width: var(--jqx-progress-bar-default-width); height: var(--jqx-progress-bar-default-height); } jqx-progress-bar .jqx-label { width: auto; color: var(--jqx-outline); } jqx-progress-bar .jqx-value { outline: none; height: 100%; width: 100%; box-sizing: border-box; position: absolute; border: 1px solid var(--jqx-ui-state-border-active); background-color: var(--jqx-ui-state-active); transform-origin: left; } jqx-progress-bar .jqx-value.jqx-value-animation { animation: indeterminate 3s infinite linear; } jqx-progress-bar.primary .jqx-value { border: 1px solid var(--jqx-primary); background-color: var(--jqx-primary); } jqx-progress-bar.secondary .jqx-value { border: 1px solid var(--jqx-secondary); background-color: var(--jqx-secondary); } jqx-progress-bar.success .jqx-value { border: 1px solid var(--jqx-success); background-color: var(--jqx-success); } jqx-progress-bar.info .jqx-value { border: 1px solid var(--jqx-info); background-color: var(--jqx-info); } jqx-progress-bar.warning .jqx-value { border: 1px solid var(--jqx-warning); background-color: var(--jqx-warning); } jqx-progress-bar.error .jqx-value { border: 1px solid var(--jqx-error); background-color: var(--jqx-error); } jqx-progress-bar.light .jqx-value { border: 1px solid var(--jqx-light); background-color: var(--jqx-light); } jqx-progress-bar.dark .jqx-value { border: 1px solid var(--jqx-dark); background-color: var(--jqx-dark); } jqx-progress-bar:not([animation=none]) .jqx-value { transition: 0.2s ease-in-out; } jqx-progress-bar[orientation][inverted] .jqx-value { transform-origin: right; } jqx-progress-bar[inverted] .jqx-value { transform-origin: right; } jqx-progress-bar[inverted] .jqx-value.jqx-value-animation { animation: indeterminate-inverted 3s infinite linear; } jqx-progress-bar[orientation] .jqx-value { transform-origin: left; } jqx-progress-bar[orientation=vertical] { width: var(--jqx-progress-bar-default-height); height: var(--jqx-progress-bar-default-width); } jqx-progress-bar[orientation=vertical][inverted] .jqx-value { transform-origin: left bottom; } jqx-progress-bar[orientation=vertical] .jqx-value { transform-origin: left top; } jqx-progress-bar[orientation=vertical] .jqx-value.jqx-value-animation { animation: indeterminate-vertical 3s infinite linear; } jqx-progress-bar[orientation=vertical] .jqx-label { width: 100%; } jqx-progress-bar[inverted][orientation=vertical] .jqx-value.jqx-value-animation { animation: indeterminate-vertical-inverted 3s infinite linear; } jqx-circular-progress-bar, .jqx-circular-progress-bar { width: var(--jqx-circular-progress-bar-default-size); height: var(--jqx-circular-progress-bar-default-size); } jqx-circular-progress-bar > .jqx-container, jqx-circular-progress-bar.jqx-container, .jqx-circular-progress-bar > .jqx-container, .jqx-circular-progress-bar.jqx-container { border-radius: 50%; } jqx-circular-progress-bar .jqx-value-animation-ms, .jqx-circular-progress-bar .jqx-value-animation-ms { stroke-dashoffset: 114; } jqx-circular-progress-bar svg:first-of-type, .jqx-circular-progress-bar svg:first-of-type { position: absolute; border-radius: 50%; pointer-events: none; } jqx-circular-progress-bar svg:first-of-type .jqx-value.jqx-value-animation, .jqx-circular-progress-bar svg:first-of-type .jqx-value.jqx-value-animation { animation: circle 2s infinite linear; } jqx-circular-progress-bar .jqx-label-container, .jqx-circular-progress-bar .jqx-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(--jqx-border-width); border-color: var(--jqx-border); width: calc(100% - var(--jqx-circular-progress-bar-fill-size)); height: calc(100% - var(--jqx-circular-progress-bar-fill-size)); } jqx-circular-progress-bar .jqx-value, jqx-circular-progress-bar .jqx-value-path, .jqx-circular-progress-bar .jqx-value, .jqx-circular-progress-bar .jqx-value-path { stroke-width: var(--jqx-circular-progress-bar-fill-size); fill: transparent; stroke-dasharray: 314.159; } jqx-circular-progress-bar .jqx-value, .jqx-circular-progress-bar .jqx-value { stroke: var(--jqx-ui-state-active); } jqx-circular-progress-bar .jqx-value-path, .jqx-circular-progress-bar .jqx-value-path { stroke-dashoffset: 0; stroke: transparent; } jqx-circular-progress-bar.primary .jqx-value, .jqx-circular-progress-bar.primary .jqx-value { stroke: var(--jqx-primary); } jqx-circular-progress-bar.secondary .jqx-value, .jqx-circular-progress-bar.secondary .jqx-value { stroke: var(--jqx-secondary); } jqx-circular-progress-bar.success .jqx-value, .jqx-circular-progress-bar.success .jqx-value { stroke: var(--jqx-success); } jqx-circular-progress-bar.info .jqx-value, .jqx-circular-progress-bar.info .jqx-value { stroke: var(--jqx-info); } jqx-circular-progress-bar.warning .jqx-value, .jqx-circular-progress-bar.warning .jqx-value { stroke: var(--jqx-warning); } jqx-circular-progress-bar.error .jqx-value, .jqx-circular-progress-bar.error .jqx-value { stroke: var(--jqx-error); } jqx-circular-progress-bar.light .jqx-value, .jqx-circular-progress-bar.light .jqx-value { stroke: var(--jqx-light); } jqx-circular-progress-bar.dark .jqx-value, .jqx-circular-progress-bar.dark .jqx-value { stroke: var(--jqx-dark); } jqx-circular-progress-bar:not([animation=none]) .jqx-value, .jqx-circular-progress-bar:not([animation=none]) .jqx-value { transition: stroke-dashoffset 1s linear; } jqx-circular-progress-bar[inverted] svg:first-of-type .jqx-value.jqx-value-animation, .jqx-circular-progress-bar[inverted] svg:first-of-type .jqx-value.jqx-value-animation { animation: circle-inverted 2s infinite linear; } jqx-circular-progress-bar[indeterminate][inverted] svg:first-of-type, jqx-circular-progress-bar[value=null][inverted] svg:first-of-type, .jqx-circular-progress-bar[indeterminate][inverted] svg:first-of-type, .jqx-circular-progress-bar[value=null][inverted] svg:first-of-type { animation: rotate-circle-inverted 1s infinite linear; } jqx-circular-progress-bar[indeterminate] svg:first-of-type, jqx-circular-progress-bar[value=null] svg:first-of-type, .jqx-circular-progress-bar[indeterminate] svg:first-of-type, .jqx-circular-progress-bar[value=null] svg:first-of-type { animation: rotate-circle 1s infinite linear; } /* Barber Shop */ .barber-shop-effect .jqx-value { background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.2) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 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] .jqx-value, .barber-shop-effect[orientation=vertical] .jqx-value { animation-direction: reverse; } /* ANIMATION - BarberShop style */ @keyframes stripes { 0% { background-position: 0 0; } 100% { background-position: 60rem 0; } } @keyframes indeterminate { 0% { left: -100%; transform: scaleX(0.4); transform-origin: left; } 20% { left: -40%; transform: scaleX(0.3); transform-origin: left; } 35% { left: 35%; transform: scaleX(0.4); transform-origin: left; } 50% { left: 75%; transform: scaleX(0.6); transform-origin: left; } 55% { left: 100%; transform: scaleX(0.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(0.6); transform-origin: left; } 75% { left: -5%; transform: scaleX(0.6); transform-origin: left; } 80% { left: 30%; transform: scaleX(0.5); transform-origin: left; } 85% { left: 50%; transform: scaleX(0.4); transform-origin: left; } 90% { left: 75%; transform: scaleX(0.3); transform-origin: left; } 95% { left: 95%; transform: scaleX(0.2); transform-origin: left; } 98% { left: 100%; transform: scaleX(0.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(0.4); transform-origin: bottom; } 20% { bottom: -40%; transform: scaleY(0.3); transform-origin: bottom; } 35% { bottom: 35%; transform: scaleY(0.4); transform-origin: bottom; } 50% { bottom: 75%; transform: scaleY(0.6); transform-origin: bottom; } 55% { bottom: 100%; transform: scaleY(0.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(0.6); transform-origin: bottom; } 75% { bottom: -5%; transform: scaleY(0.6); transform-origin: bottom; } 80% { bottom: 30%; transform: scaleY(0.5); transform-origin: bottom; } 85% { bottom: 50%; transform: scaleY(0.4); transform-origin: bottom; } 90% { bottom: 75%; transform: scaleY(0.3); transform-origin: bottom; } 95% { bottom: 95%; transform: scaleY(0.2); transform-origin: bottom; } 98% { bottom: 100%; transform: scaleY(0.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); } } /* jqx-progress-bar */ jqx-progress-bar[right-to-left] .jqx-label, jqx-circular-progress-bar[right-to-left] .jqx-label { direction: rtl; } jqx-progress-bar[right-to-left]:not([orientation=vertical]) .jqx-value, jqx-progress-bar[right-to-left][orientation=horizontal] .jqx-value { transform-origin: right; } jqx-progress-bar[right-to-left]:not([orientation=vertical])[inverted] .jqx-value, jqx-progress-bar[right-to-left][orientation=horizontal][inverted] .jqx-value { transform-origin: left; } jqx-progress-bar[right-to-left][orientation=horizontal] .jqx-value.jqx-value-animation, jqx-progress-bar[right-to-left]:not([orientation=vertical]) .jqx-value.jqx-value-animation { animation: indeterminate-inverted 3s infinite linear; } jqx-progress-bar[right-to-left][inverted][orientation=horizontal] .jqx-value.jqx-value-animation, jqx-progress-bar[right-to-left][inverted]:not([orientation=vertical]) .jqx-value.jqx-value-animation { animation: indeterminate 3s infinite linear; } jqx-circular-progress-bar[right-to-left][inverted] svg:first-of-type .jqx-value.jqx-value-animation { animation: circle 2s infinite linear; } jqx-circular-progress-bar[right-to-left] svg:first-of-type .jqx-value.jqx-value-animation { animation: circle-inverted 2s infinite linear; } jqx-circular-progress-bar[right-to-left][indeterminate] svg:first-of-type, jqx-circular-progress-bar[right-to-left][value=null] svg:first-of-type { animation: rotate-circle-inverted 1s infinite linear; } jqx-circular-progress-bar[right-to-left][indeterminate][inverted] svg:first-of-type, jqx-circular-progress-bar[right-to-left][value=null][inverted] svg:first-of-type { animation: rotate-circle 1s infinite linear; } /* Barber Shop */ .barber-shop-effect[right-to-left] .jqx-value { animation-direction: reverse; } .barber-shop-effect[right-to-left][inverted] .jqx-value { animation-direction: normal; } @charset "UTF-8"; jqx-query-builder { display: block; border: var(--jqx-border-width) solid var(--jqx-border); width: var(--jqx-query-builder-default-width); min-width: var(--jqx-query-builder-min-width); height: var(--jqx-query-builder-default-height); } jqx-query-builder.jqx-element { overflow: visible; } jqx-query-builder[allow-drag] .jqx-filter-group-condition:before, jqx-query-builder[allow-drag] .jqx-filter-group-condition:after { content: var(--jqx-icon-ellipsis); font-weight: normal; } jqx-query-builder[dragging] .jqx-filter-group-condition:before, jqx-query-builder[dragging] .jqx-filter-group-condition:after { content: none; } .jqx-query-builder { border-top-right-radius: var(--jqx-border-top-right-radius); border-top-left-radius: var(--jqx-border-top-left-radius); border-bottom-left-radius: var(--jqx-border-bottom-left-radius); border-bottom-right-radius: var(--jqx-border-bottom-right-radius); } .jqx-query-builder > .jqx-container, .jqx-query-builder.jqx-container { position: relative; overflow: visible; } .jqx-query-builder > .jqx-container > .jqx-inner-container, .jqx-query-builder.jqx-container > .jqx-inner-container { overflow: hidden; width: 100%; height: 100%; position: relative; } .jqx-query-builder jqx-menu.jqx-conditions-menu:not([animation=none]) { width: auto; height: auto; padding: 2px; transform-origin: top; transform: scaleY(1); } .jqx-query-builder jqx-menu.jqx-conditions-menu.jqx-visibility-hidden:not([animation=none]) { transform: scaleY(0); } .jqx-query-builder jqx-menu[mode=dropDown] { --jqx-menu-vertical-default-width: auto; --jqx-menu-vertical-default-height: auto; } .jqx-query-builder jqx-scroll-viewer { border: none; width: 100%; height: 100%; position: relative; padding: var(--jqx-query-builder-content-padding); } .jqx-query-builder .jqx-content-container > .jqx-filter-group:first-child > .jqx-filter-group-operator { display: none; } .jqx-query-builder .jqx-query-builder-label { margin: var(--jqx-query-builder-content-padding) 0 calc(2 * var(--jqx-query-builder-content-padding)) var(--jqx-query-builder-content-padding); font-weight: bold; } .jqx-query-builder .filter-builder-item { min-height: var(--jqx-filter-builder-row-height); margin-left: calc(var(--jqx-filter-builder-item-margin) / 2); margin-right: calc(var(--jqx-filter-builder-item-margin) / 2); border: none; border-bottom: var(--jqx-border-width) solid var(--jqx-border); display: flex; align-items: center; cursor: pointer; } .jqx-query-builder .filter-builder-item .jqx-value-container { padding-left: var(--jqx-editor-label-padding); } .jqx-query-builder .filter-builder-item[edited] { border: none; } .jqx-query-builder .filter-builder-item[edited] .jqx-value-container { display: none; } .jqx-query-builder .filter-builder-item[placeholder] { opacity: 0.75; font-style: italic; } .jqx-query-builder .filter-builder-item[placeholder] .jqx-value-container { padding-right: 2px; } .jqx-query-builder .jqx-conditions-menu { border-top-right-radius: var(--jqx-border-top-right-radius); border-top-left-radius: var(--jqx-border-top-left-radius); border-bottom-left-radius: var(--jqx-border-bottom-left-radius); border-bottom-right-radius: var(--jqx-border-bottom-right-radius); } .jqx-query-builder .jqx-conditions-menu:focus { border: var(--jqx-menu-border-width) solid var(--jqx-menu-border); } .jqx-query-builder .jqx-conditions-menu jqx-menu-item { border-top-right-radius: var(--jqx-border-top-right-radius); border-top-left-radius: var(--jqx-border-top-left-radius); border-bottom-left-radius: var(--jqx-border-bottom-left-radius); border-bottom-right-radius: var(--jqx-border-bottom-right-radius); } .jqx-query-builder .jqx-conditions-menu jqx-menu-item:first-child { margin-bottom: 1px; } .jqx-query-builder .jqx-conditions-menu jqx-menu-item.hover { background-color: var(--jqx-menu-item-background-focus); border-color: var(--jqx-menu-item-border-focus); color: var(--jqx-menu-item-color-focus); } .jqx-query-builder .jqx-editors-container > * { width: var(--jqx-query-builder-editor-width); min-width: 100px; } .jqx-query-builder .jqx-editors-container jqx-numeric-text-box input.jqx-input { text-align: left; } .jqx-query-builder .jqx-editors-container jqx-input .arrow { transition: none; } .jqx-query-builder .jqx-editors-container .jqx-custom-editor > * { pointer-events: all; width: 100%; } .jqx-query-builder .jqx-editors-container[open] .jqx-check-box-editor { margin-left: auto; margin-right: auto; display: flex; align-self: center; justify-self: center; width: 30px; height: 30px; } .jqx-query-builder .jqx-editors-container[open] .jqx-check-box-editor.jqx-hidden { display: none; } .jqx-query-builder .jqx-editors-container[open] jqx-check-box { display: block; } .jqx-query-builder .jqx-filter-group { display: flex; width: 100%; box-sizing: border-box; white-space: nowrap; flex-direction: column; align-items: flex-start; } .jqx-query-builder .jqx-filter-group:last-of-type .jqx-filter-add-btn { display: initial; } .jqx-query-builder .jqx-filter-group:not(:first-of-type) { margin-top: var(--jqx-filter-builder-group-margin); } .jqx-query-builder .jqx-filter-group .jqx-filter-add-btn { display: none; } .jqx-query-builder .jqx-filter-group[node-id="0"] .jqx-filter-group-operator { display: none; } .jqx-query-builder .jqx-filter-group[max-level] .jqx-filter-add-btn { display: none; } .jqx-query-builder .jqx-filter-group-condition { margin-bottom: var(--jqx-filter-builder-group-condition-margin); position: relative; display: flex; width: 100%; box-sizing: border-box; white-space: nowrap; } .jqx-query-builder .jqx-filter-group-condition:before, .jqx-query-builder .jqx-filter-group-condition:after { font-weight: 800; font-family: var(--jqx-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: 0.25; margin-right: 6px; cursor: move; line-height: 1rem; } .jqx-query-builder .jqx-filter-group-condition:after { transform: rotate(-90deg); } .jqx-query-builder .jqx-filter-group-condition.dragged { background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.1) 75%, transparent 75%, transparent); background-size: 3em 3em; } .jqx-query-builder .jqx-filter-group-condition[limit-selection]:before, .jqx-query-builder .jqx-filter-group-condition[limit-selection]:after { content: none; } .jqx-query-builder .jqx-filter-group-condition[limit-selection] .filter-builder-item:not(.jqx-filter-field-name) { pointer-events: none; } .jqx-query-builder .jqx-filter-group-condition-container { display: flex; box-sizing: border-box; white-space: nowrap; flex-direction: column; padding-left: calc(var(--jqx-filter-builder-group-condition-margin) * 6); border-left: var(--jqx-filter-builder-group-container-border) solid var(--jqx-border); margin-left: calc(var(--jqx-filter-builder-group-condition-margin) * 3 - var(--jqx-filter-builder-group-container-border) / 2); width: calc(100% - var(--jqx-filter-builder-group-condition-margin) * 3 - var(--jqx-filter-builder-group-container-border) / 3); } .jqx-query-builder .jqx-filter-group-operator { cursor: pointer; min-width: 50px; border-radius: 50px; text-transform: uppercase; background: var(--jqx-primary); color: var(--jqx-primary-color); border: none; margin-right: 0; -webkit-user-select: none; -ms-user-select: none; -moz-user-select: none; user-select: none; } .jqx-query-builder .jqx-filter-group-operator:not(:empty) { margin-bottom: calc(var(--jqx-filter-builder-group-condition-margin) * 2); padding: 4px; display: flex; justify-content: center; } .jqx-query-builder .jqx-filter-nested-operator { cursor: pointer; margin-top: calc(var(--jqx-filter-builder-group-condition-margin) * 3); margin-bottom: calc(var(--jqx-filter-builder-group-condition-margin) * 3); margin-left: calc(-1 * var(--jqx-filter-builder-item-margin)); text-transform: uppercase; align-self: flex-start; -webkit-user-select: none; -ms-user-select: none; -moz-user-select: none; user-select: none; } .jqx-query-builder .jqx-filter-group-operation { min-width: 50px; border-radius: 50px; text-transform: uppercase; background: var(--jqx-primary); color: var(--jqx-primary-color); border: none; margin-right: 0; -webkit-user-select: none; -ms-user-select: none; -moz-user-select: none; user-select: none; } .jqx-query-builder .jqx-filter-delete-btn { min-width: var(--jqx-filter-builder-row-height); min-height: var(--jqx-filter-builder-row-height); box-sizing: border-box; display: flex; align-items: center; justify-content: center; opacity: 0.25; font-size: 16px; cursor: pointer; } .jqx-query-builder .jqx-filter-delete-btn:after { display: flex; justify-content: center; align-items: center; width: 100%; height: 0; cursor: pointer; font-weight: 800; font-family: var(--jqx-font-family-icon); content: var(--jqx-icon-close); font-size: var(--jqx-font-size); } .jqx-query-builder .jqx-filter-delete-btn:hover { opacity: 0.6; } .jqx-query-builder .jqx-filter-delete-btn:active { opacity: 1; } .jqx-query-builder .jqx-filter-add-btn { min-width: var(--jqx-filter-builder-row-height); min-height: var(--jqx-filter-builder-row-height); box-sizing: border-box; display: flex; align-items: center; justify-content: center; font-size: 16px; width: var(--jqx-filter-builder-row-height); height: var(--jqx-filter-builder-row-height); border-radius: 50%; background: var(--jqx-primary); color: var(--jqx-primary-color); margin-top: calc(var(--jqx-filter-builder-group-condition-margin) * 2); margin-bottom: calc(var(--jqx-filter-builder-group-condition-margin) * 2); line-height: 1rem; opacity: 1; } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { .jqx-query-builder .jqx-filter-add-btn { padding-bottom: 7px; } } .jqx-query-builder .jqx-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(--jqx-font-family-icon); height: 100%; } .jqx-query-builder .jqx-filter-add-condition-btn { min-height: var(--jqx-filter-builder-row-height); box-sizing: border-box; display: flex; font-size: 16px; width: var(--jqx-filter-builder-row-height); padding-left: calc(var(--jqx-filter-builder-group-condition-margin) * 6); border-left: calc(var(--jqx-filter-builder-group-container-border) / 2.5) dashed var(--jqx-border); margin-left: calc(var(--jqx-filter-builder-group-condition-margin) * 3 - var(--jqx-filter-builder-group-container-border) / 5); opacity: initial; min-width: 50px; justify-content: flex-start; color: var(--jqx-background-color); cursor: pointer; align-items: flex-end; -webkit-user-select: none; -ms-user-select: none; -moz-user-select: none; user-select: none; } .jqx-query-builder .jqx-filter-add-condition-btn > div { position: relative; padding-left: calc(var(--jqx-filter-builder-item-margin) / 2); } .jqx-query-builder .jqx-filter-add-condition-btn > div:before { content: "+"; display: flex; justify-content: center; align-items: center; cursor: pointer; font-weight: 800; font-family: var(--jqx-font-family-icon); position: absolute; right: 100%; top: 0; width: auto; height: 100%; font-size: 20px; margin-right: 5px; } .jqx-query-builder .jqx-filter-add-condition-btn[limit-selection] { pointer-events: none; opacity: 0.75; } .jqx-query-builder .jqx-filter-value { padding: 0; min-width: 100px; width: var(--jqx-query-builder-editor-width); text-overflow: ellipsis; } .jqx-query-builder .jqx-filter-value[edited] { padding: 0; background-color: transparent; } .jqx-query-builder .jqx-filter-value .jqx-value-container { width: 100%; height: 100%; display: flex; /*justify-content: center;*/ align-items: center; /*padding: 5px;*/ margin: 0; /*width: 100%;*/ overflow: hidden; -webkit-user-select: none; -ms-user-select: none; -moz-user-select: none; user-select: none; } .jqx-query-builder .jqx-filter-value .jqx-value-container > span { text-overflow: ellipsis; overflow: hidden; min-width: 0; } .jqx-query-builder .jqx-filter-operation { position: relative; min-width: 100px; width: var(--jqx-query-builder-editor-width); text-overflow: ellipsis; overflow: hidden; -webkit-user-select: none; -ms-user-select: none; -moz-user-select: none; user-select: none; } .jqx-query-builder .jqx-filter-operation .jqx-value-container { text-overflow: ellipsis; width: calc(100% - var(--jqx-editor-addon-width)); overflow: hidden; } .jqx-query-builder .jqx-filter-operation:not([edited]):after { content: var(--jqx-icon-arrow-down); display: flex; overflow: hidden; cursor: pointer; font-family: var(--jqx-font-family-icon); justify-content: center; align-items: center; font-size: var(--jqx-arrow-size); outline: none; width: var(--jqx-editor-addon-width); position: absolute; right: -1px; } .jqx-query-builder .jqx-filter-field-name { position: relative; min-width: 100px; width: var(--jqx-query-builder-editor-width); text-overflow: ellipsis; overflow: hidden; -webkit-user-select: none; -ms-user-select: none; -moz-user-select: none; user-select: none; } .jqx-query-builder .jqx-filter-field-name .jqx-value-container { text-overflow: ellipsis; overflow: hidden; } .jqx-query-builder .jqx-filter-builder-icon { width: 40px; height: 100%; font-weight: bold; border-right: 1px solid gray; margin-right: 5px; display: flex; justify-content: center; align-items: center; } .jqx-query-builder .jqx-filter-builder-menu-item { height: 100%; } .jqx-query-builder .jqx-hidden { display: none; } .jqx-query-builder .jqx-scrollable-outer-container { width: 100%; height: 100%; } .jqx-query-builder .jqx-scroll-viewer-content-container { vertical-align: top; padding: initial; } .jqx-query-builder .drop-target.bottom:after, .jqx-query-builder .drop-target.top:after { content: ""; position: absolute; box-sizing: border-box; width: 100%; height: var(--jqx-filter-builder-group-condition-margin); left: 0; pointer-events: none; transform: none; background-color: var(--jqx-primary); opacity: 0.75; } .jqx-query-builder .drop-target.bottom:after { top: calc(100% + 3px); } .jqx-query-builder .drop-target.top:after { top: calc(-1 * var(--jqx-filter-builder-group-condition-margin)); } .jqx-query-builder .mac .jqx-filter-add-btn:after { align-items: stretch; line-height: 80%; } .jqx-query-builder .mac .jqx-filter-add-condition-btn > div:before { align-items: stretch; line-height: 80%; } .jqx-query-builder[show-field-name-arrow] .jqx-filter-field-name:not([edited]):after { content: var(--jqx-icon-arrow-down); display: flex; outline: none; width: var(--jqx-editor-addon-width); position: absolute; top: 1px; right: -1px; height: 100%; } .jqx-query-builder-drag-feedback { position: absolute; display: flex; align-items: center; box-shadow: var(--jqx-elevation-8); border: var(--jqx-border-width) solid var(--jqx-border); border-radius: var(--jqx-border-radius); padding: 5px; white-space: nowrap; font-family: var(--jqx-font-family-icon); font-size: 26px; background-color: var(--jqx-background); color: var(--jqx-background-color); z-index: 10000; opacity: 0.75; } .jqx-query-builder-drag-feedback:after { content: var(--jqx-icon-docs); width: 100%; height: 100%; position: relative; top: 0; left: 0; } /* icons */ .jqx-input-drop-down-menu .icon:after { display: flex; align-items: center; justify-content: center; font-size: calc(var(--jqx-font-size) - 2px); font-weight: bold; } .jqx-input-drop-down-menu .icon.equals:after { content: "="; } .jqx-input-drop-down-menu .icon.notequals:after { content: "≠"; } .jqx-input-drop-down-menu .icon.greaterthan:after { content: ">"; } .jqx-input-drop-down-menu .icon.greaterthanorequal:after { content: "≥"; } .jqx-input-drop-down-menu .icon.lessthan:after { content: "<"; } .jqx-input-drop-down-menu .icon.lessthanorequal:after { content: "≤"; } .jqx-input-drop-down-menu .icon.startswith:after { content: "a|bc"; } .jqx-input-drop-down-menu .icon.endswith:after { content: "ab|c"; } .jqx-input-drop-down-menu .icon.contains:after { content: "abc"; } .jqx-input-drop-down-menu .icon.notcontains:after { content: "!abc"; } .jqx-input-drop-down-menu .icon.isblank:after { content: "□"; } .jqx-input-drop-down-menu .icon.isnotblank:after { content: "■"; } .jqx-query-builder-drag-feedback[right-to-left] { direction: rtl; } jqx-query-builder[right-to-left] .jqx-filter-group { direction: rtl; } jqx-query-builder[right-to-left] .jqx-filter-group-condition-container { padding-left: initial; padding-right: calc(var(--jqx-filter-builder-group-condition-margin) * 6); border-left: initial; border-right: var(--jqx-border-width) solid var(--jqx-border); margin-left: initial; margin-right: calc(var(--jqx-filter-builder-group-condition-margin) * 3 - var(--jqx-filter-builder-group-container-border) / 2); } jqx-query-builder[right-to-left] .jqx-filter-nested-operator { margin-left: initial; margin-right: calc(-1 * var(--jqx-filter-builder-item-margin)); } jqx-query-builder[right-to-left] .jqx-filter-group-condition:before, jqx-query-builder[right-to-left] .jqx-filter-group-condition:after { right: initial; left: 100%; margin: 0 0 0 6px; } jqx-query-builder[right-to-left] .jqx-filter-add-condition-btn { padding-left: initial; padding-right: calc(var(--jqx-filter-builder-group-condition-margin) * 6); border-left: initial; border-right: calc(var(--jqx-border-width) / 2.5) dashed var(--jqx-border); margin-left: initial; margin-right: calc(var(--jqx-filter-builder-group-condition-margin) * 3 - var(--jqx-border-width) / 5); } jqx-query-builder[right-to-left] .jqx-filter-add-condition-btn > div { padding-left: initial; padding-right: calc(var(--jqx-filter-builder-item-margin) / 2); } jqx-query-builder[right-to-left] .jqx-filter-add-condition-btn > div:before { right: initial; left: 100%; } jqx-query-builder[right-to-left] .jqx-filter-operation:not([edited])::after { left: -1px; right: initial; } jqx-query-builder[right-to-left] .drop-target.bottom:after, jqx-query-builder[right-to-left] .drop-target.top:after { left: initial; right: 0; } .jqx-rating .rating-star:after { width: 100%; height: 100%; top: 0; font-size: var(--jqx-font-size); content: var(--jqx-icon-star); color: var(--jqx-primary); font-family: var(--jqx-font-family-icon); } .jqx-rating .rating-star.hover:after { color: var(--jqx-secondary); } .jqx-rating .rating-star.active:after { color: var(--jqx-secondary); } .jqx-rating .rating-star.active.hover:after { color: var(--jqx-secondary); } jqx-scheduler { --jqx-scheduler-event-size: var(--jqx-scheduler-event-size-basic); display: block; width: var(--jqx-scheduler-default-width); height: var(--jqx-scheduler-default-height); contain: content; } jqx-scheduler > .jqx-container, jqx-scheduler.jqx-container { overflow: hidden; display: grid; grid-template-rows: var(--jqx-scheduler-header-height) minmax(0, 1fr); grid-template-columns: 100%; margin-bottom: -2px; } jqx-scheduler > .jqx-container[show-footer], jqx-scheduler.jqx-container[show-footer] { grid-template-rows: var(--jqx-scheduler-header-height) minmax(0, 1fr) var(--jqx-scheduler-footer-height); } jqx-scheduler > .jqx-container.hscroll .jqx-scheduler-view, jqx-scheduler.jqx-container.hscroll .jqx-scheduler-view { height: calc(100% - var(--jqx-scroll-bar-size)); } jqx-scheduler > .jqx-container.vscroll .jqx-scheduler-view, jqx-scheduler.jqx-container.vscroll .jqx-scheduler-view { width: calc(100% - var(--jqx-scroll-bar-size)); } jqx-scheduler .jqx-scheduler-nav[today], jqx-scheduler .jqx-scheduler-nav[prev], jqx-scheduler .jqx-scheduler-nav[current], jqx-scheduler .jqx-scheduler-nav[next] { width: var(--jqx-scheduler-header-navigation-button-size); min-width: var(--jqx-scheduler-header-navigation-button-size); height: 100%; position: relative; font-size: initial; display: inline-block; font-weight: inherit; font-family: var(--jqx-font-family-icon); border: var(--jqx-border-width) solid var(--jqx-border); text-transform: initial; } jqx-scheduler .jqx-scheduler-nav[current]:after, jqx-scheduler .jqx-scheduler-nav[prev]:after, jqx-scheduler .jqx-scheduler-nav[next]:after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; font-family: var(--jqx-font-family-icon); font-size: var(--jqx-arrow-size); color: inherit; display: flex; align-items: center; justify-content: center; pointer-events: none; } jqx-scheduler .jqx-scheduler-nav[current]:after { width: var(--jqx-editor-addon-width); min-width: var(--jqx-editor-addon-width); left: initial; right: 0; content: var(--jqx-icon-arrow-down); background: transparent; color: inherit; } jqx-scheduler .jqx-scheduler-nav[today] { width: var(--jqx-scheduler-header-today-button-size); --jqx-button-padding: 0 10px 0 10px; border-top-left-radius: var(--jqx-item-border-top-left-radius); border-bottom-left-radius: var(--jqx-item-border-bottom-left-radius); border-top-right-radius: var(--jqx-item-border-top-right-radius); border-bottom-right-radius: var(--jqx-item-border-bottom-right-radius); margin-right: 10px; } jqx-scheduler .jqx-scheduler-nav[today] button { text-overflow: ellipsis; overflow: hidden; } jqx-scheduler .jqx-scheduler-nav[prev][focus] button, jqx-scheduler .jqx-scheduler-nav[prev][focus] button, jqx-scheduler .jqx-scheduler-nav[next][focus] button, jqx-scheduler .jqx-scheduler-nav[next][focus] button { background-color: var(--jqx-background-focus); outline: none; } jqx-scheduler .jqx-scheduler-nav[prev] .jqx-button, jqx-scheduler .jqx-scheduler-nav[next] .jqx-button { font-family: var(--jqx-font-family-icon); padding: 0px; border-radius: 0px; border: none; min-height: initial; } jqx-scheduler .jqx-scheduler-nav[prev]:after { content: var(--jqx-icon-arrow-left); } jqx-scheduler .jqx-scheduler-nav[next]:after { content: var(--jqx-icon-arrow-right); } jqx-scheduler .jqx-scheduler-header { width: 100%; height: var(--jqx-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(--jqx-surface); border-bottom: var(--jqx-border-width) solid var(--jqx-border); } jqx-scheduler .jqx-scheduler-header:empty { display: none; } jqx-scheduler .jqx-scheduler-header[responsive-mode] { grid-template-columns: repeat(2, auto); } jqx-scheduler .jqx-scheduler-footer { width: 100%; height: var(--jqx-scheduler-footer-height); border-top: var(--jqx-border-width) solid var(--jqx-border); justify-content: center; align-items: center; background: var(--jqx-surface); z-index: 9; } jqx-scheduler .jqx-scheduler-footer:empty { display: none; } jqx-scheduler .jqx-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: none; position: relative; } jqx-scheduler .jqx-scheduler-view[show-group-header=vertical] .jqx-scheduler-cell[group-separator]:not(:last-of-type) { border-bottom: var(--jqx-border-width) solid var(--jqx-border); } jqx-scheduler .jqx-scheduler-view[show-group-header=vertical] .jqx-scheduler-view-header-vertical { display: grid; grid-template-columns: repeat(2, auto); } jqx-scheduler .jqx-scheduler-view[show-group-header=vertical] .jqx-scheduler-view-header-groups-container { flex-direction: row; } jqx-scheduler .jqx-scheduler-view[show-group-header=vertical] .jqx-scheduler-cell[group-separator]:not(:last-of-type), jqx-scheduler .jqx-scheduler-view[show-group-header=vertical] .jqx-scheduler-cell:not(.scale)[group-separator]:not(:last-of-type), jqx-scheduler .jqx-scheduler-view[show-group-header=vertical] .jqx-scheduler-cell-container[group-separator]:not(:last-of-type), jqx-scheduler .jqx-scheduler-view[show-group-header=vertical] .jqx-scheduler-cell[group-separator]:not(:last-of-type) { border-bottom-color: var(--jqx-scheduler-timeline-group-separator-background); border-bottom-width: var(--jqx-scheduler-timeline-group-separator-size); } jqx-scheduler .jqx-scheduler-view[show-group-header=horizontal] .jqx-scheduler-view-header-groups-container { flex-direction: column; } jqx-scheduler .jqx-scheduler-view[show-group-header=horizontal] .jqx-scheduler-view-header-groups-container .jqx-scheduler-cell-container:not(:last-of-type) > .jqx-scheduler-cell { border-bottom: var(--jqx-scheduler-view-line-size) solid var(--jqx-scheduler-view-horizontal-line-color); } jqx-scheduler .jqx-scheduler-view[show-group-header=horizontal] .jqx-scheduler-cell[group-separator]:not(:last-of-type), jqx-scheduler .jqx-scheduler-view[show-group-header=horizontal] .jqx-scheduler-cell:not(.scale)[group-separator]:not(:last-of-type), jqx-scheduler .jqx-scheduler-view[show-group-header=horizontal] .jqx-scheduler-cell-container[group-separator]:not(:last-of-type) { border-right-color: var(--jqx-scheduler-timeline-group-separator-background); border-right-width: var(--jqx-scheduler-timeline-group-separator-size); border-right-style: solid; } jqx-scheduler .jqx-scheduler-view[focus] .jqx-scheduler-cell:not(.scale)[selected], jqx-scheduler .jqx-scheduler-view:focus .jqx-scheduler-cell:not(.scale)[selected] { background: var(--jqx-ui-state-selected); color: var(--jqx-ui-state-color-selected); } jqx-scheduler .jqx-scheduler-view[focus] .jqx-scheduler-cell:not(.scale)[selected=start], jqx-scheduler .jqx-scheduler-view:focus .jqx-scheduler-cell:not(.scale)[selected=start] { background: var(--jqx-ui-state-active); color: var(--jqx-ui-state-color-active); } jqx-scheduler .jqx-scheduler-view[event-hovered=left], jqx-scheduler .jqx-scheduler-view[event-hovered=right], jqx-scheduler .jqx-scheduler-view[event-hovered=left] .jqx-scheduler-event-content, jqx-scheduler .jqx-scheduler-view[event-hovered=right] .jqx-scheduler-event-content { cursor: e-resize; } jqx-scheduler .jqx-scheduler-view[event-hovered=top], jqx-scheduler .jqx-scheduler-view[event-hovered=bottom], jqx-scheduler .jqx-scheduler-view[event-hovered=top] .jqx-scheduler-event-content, jqx-scheduler .jqx-scheduler-view[event-hovered=bottom] .jqx-scheduler-event-content { cursor: n-resize; } jqx-scheduler .jqx-scheduler-view[mobile] .jqx-scheduler-content:not(.hide-overlay):after { position: fixed; content: ""; width: 100%; height: 100%; display: block; } jqx-scheduler .jqx-scheduler-view[mobile] .jqx-scheduler-event[collector] { display: flex; justify-content: center; align-items: center; border-radius: 50%; overflow: hidden; } jqx-scheduler .jqx-scheduler-view[mobile] .jqx-scheduler-event[collector] .jqx-scheduler-event-content { width: var(--jqx-scheduler-event-collector-mobile-size); height: var(--jqx-scheduler-event-collector-mobile-size); } jqx-scheduler .jqx-scheduler-view-nav { grid-area: view; display: flex; align-items: center; justify-content: flex-end; height: 100%; overflow: hidden; } jqx-scheduler .jqx-scheduler-view-nav .jqx-scheduler-nav[prev], jqx-scheduler .jqx-scheduler-view-nav .jqx-scheduler-nav[next] { border: initial; border-radius: initial; --jqx-background: transparent; --jqx-disabled: transparent; } jqx-scheduler .jqx-scheduler-view-nav[show-menu] { padding: var(--jqx-scheduler-header-padding); } jqx-scheduler .jqx-scheduler-view-nav.no-overflowing .jqx-scheduler-items-container { overflow: hidden; } jqx-scheduler .jqx-scheduler-view-header { box-shadow: var(--jqx-scheduler-header-box-shadow); position: relative; } jqx-scheduler .jqx-scheduler-view-header-vertical { height: 100%; grid-area: vHeader; display: grid; grid-template-columns: repeat(2, auto); } jqx-scheduler .jqx-scheduler-view-header-vertical .jqx-scheduler-view-details { width: var(--jqx-scheduler-timeline-header-vertical-details-size); } jqx-scheduler .jqx-scheduler-view-header-vertical .jqx-scheduler-groups-container { width: var(--jqx-scheduler-timeline-header-vertical-group-size); } jqx-scheduler .jqx-scheduler-view-header-vertical .jqx-scheduler-cells { width: var(--jqx-scheduler-timeline-header-vertical-cells-size); border: none; background: var(--jqx-background); position: relative; } jqx-scheduler .jqx-scheduler-view-header-vertical .jqx-scheduler-cell { width: 100%; min-width: initial; align-items: flex-start; } jqx-scheduler .jqx-scheduler-view-header-vertical .jqx-scheduler-cell > div { overflow: hidden; text-overflow: ellipsis; background: inherit; padding: var(--jqx-scheduler-timeline-header-vertical-label-padding); } jqx-scheduler .jqx-scheduler-view-header-vertical-content { width: 100%; height: 100%; position: relative; overflow: hidden; display: flex; } jqx-scheduler .jqx-scheduler-view-header-horizontal { width: 100%; display: grid; grid-area: hHeader; } jqx-scheduler .jqx-scheduler-view-header-horizontal .jqx-scheduler-view-details { height: var(--jqx-scheduler-timeline-header-horizontal-details-size); } jqx-scheduler .jqx-scheduler-view-header-horizontal .jqx-scheduler-groups-container { height: var(--jqx-scheduler-timeline-header-horizontal-group-size); } jqx-scheduler .jqx-scheduler-view-header-horizontal .jqx-scheduler-view-time-container { display: grid; width: 100%; overflow: hidden; border-bottom: var(--jqx-scheduler-view-line-size) solid var(--jqx-scheduler-view-horizontal-line-color); grid-template-columns: auto minmax(0, 1fr); } jqx-scheduler .jqx-scheduler-view-header-horizontal .jqx-scheduler-cells { height: var(--jqx-scheduler-timeline-header-horizontal-cells-size); position: relative; display: flex; width: 100%; min-height: inherit; } jqx-scheduler .jqx-scheduler-view-header-horizontal .jqx-scheduler-cells .jqx-scheduler-cell { width: 100%; min-height: inherit; display: flex; height: 100%; border-left: var(--jqx-scheduler-view-line-size) solid var(--jqx-scheduler-view-vertical-line-color); border-right: var(--jqx-scheduler-view-line-size) solid var(--jqx-scheduler-view-vertical-line-color); } jqx-scheduler .jqx-scheduler-view-header-horizontal .jqx-scheduler-cells .jqx-scheduler-cell > div { overflow: hidden; text-overflow: ellipsis; padding: var(--jqx-scheduler-timeline-header-horizontal-label-padding); } jqx-scheduler .jqx-scheduler-view-header-horizontal .jqx-scheduler-cells .jqx-scheduler-cell:first-of-type { border-left: none; } jqx-scheduler .jqx-scheduler-view-header-horizontal .jqx-scheduler-view-groups-content { border-bottom: var(--jqx-border-width) solid var(--jqx-border); } jqx-scheduler .jqx-scheduler-view-header-horizontal-content { width: 100%; height: 100%; position: relative; overflow: hidden; display: flex; flex-direction: column; } jqx-scheduler .jqx-scheduler-view-header-groups-container { width: 100%; display: flex; position: relative; } jqx-scheduler .jqx-scheduler-view-header-groups-container .jqx-scheduler-cell-container { position: relative; width: 100%; height: 100%; min-height: initial; min-width: initial; } jqx-scheduler .jqx-scheduler-view-header-groups-container .jqx-scheduler-cell { height: 100%; border-right: var(--jqx-scheduler-view-line-size) solid var(--jqx-scheduler-view-vertical-line-color); } jqx-scheduler .jqx-scheduler-view-time { display: flex; position: relative; } jqx-scheduler .jqx-scheduler-view-all-day { grid-template-columns: auto minmax(0, 1fr); border-bottom: var(--jqx-scheduler-day-week-view-hour-size) solid var(--jqx-scheduler-day-week-view-hour-color); height: var(--jqx-scheduler-timeline-header-all-day-cells-size); display: grid; } jqx-scheduler .jqx-scheduler-view-all-day .jqx-scheduler-cell[all-day] { height: 100%; border-left: initial; } jqx-scheduler .jqx-scheduler-view-all-day .jqx-scheduler-event { padding: var(--jqx-scheduler-event-padding-all-day); height: var(--jqx-scheduler-event-size); } jqx-scheduler .jqx-scheduler-view-all-day .jqx-scheduler-event:after { top: calc(50% - var(--jqx-scheduler-event-resize-indicator-size) / 4); left: calc(100% - var(--jqx-scheduler-event-resize-indicator-size)); } jqx-scheduler .jqx-scheduler-view-all-day .jqx-scheduler-event:before { top: calc(50% - var(--jqx-scheduler-event-resize-indicator-size) / 4); left: 0; } jqx-scheduler .jqx-scheduler-view-all-day .jqx-scheduler-event .jqx-scheduler-event-button { display: none; } jqx-scheduler .jqx-scheduler-view-all-day .jqx-scheduler-event[repeating] .jqx-scheduler-event-content[single-line] { grid-template-columns: repeat(2, auto) var(--jqx-scheduler-event-icon-size); } jqx-scheduler .jqx-scheduler-view-all-day .jqx-scheduler-event-content { grid-template-columns: minmax(auto, 1fr); } jqx-scheduler .jqx-scheduler-view-all-day .jqx-scheduler-event-content[single-line] { grid-template-columns: repeat(2, auto); grid-template-rows: 100%; grid-column-gap: 5px; justify-content: space-between; } jqx-scheduler .jqx-scheduler-view-all-day[exception] .jqx-scheduler-event-content, jqx-scheduler .jqx-scheduler-view-all-day[repeating] .jqx-scheduler-event-content { grid-template-columns: minmax(auto, 1fr) var(--jqx-scheduler-event-icon-size); } jqx-scheduler .jqx-scheduler-view-all-day-content { width: 100%; height: 100%; position: relative; overflow: hidden; display: flex; flex-direction: column; } jqx-scheduler .jqx-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(--jqx-scheduler-timeline-header-vertical-cells-size); font-weight: var(--jqx-scheduler-timeline-all-day-label-font-weight); padding: var(--jqx-scheduler-timeline-header-cell-padding); } jqx-scheduler .jqx-scheduler-view-all-day-label > div { overflow: hidden; text-overflow: ellipsis; } jqx-scheduler .jqx-scheduler-view-all-day-label-container { display: flex; flex-direction: column; overflow: hidden; } jqx-scheduler .jqx-scheduler-view-details { display: flex; position: relative; } jqx-scheduler .jqx-scheduler-view-details .jqx-scheduler-cell { border-bottom: var(--jqx-border-width) solid var(--jqx-border); height: 100%; min-height: inherit; min-width: inherit; } jqx-scheduler .jqx-scheduler-view-details .jqx-scheduler-cell:not(:first-of-type) { border-left: none; } jqx-scheduler .jqx-scheduler-view-container { position: relative; transition: width cubic-bezier(0.075, 0.82, 0.165, 1) 0.3s; } jqx-scheduler .jqx-scheduler-view-label-container { display: flex; height: 100%; } jqx-scheduler .jqx-scheduler-view-groups-label-container { display: flex; height: 100%; } jqx-scheduler .jqx-scheduler-view-groups-content { width: 100%; height: 100%; position: relative; overflow: hidden; display: flex; } jqx-scheduler .jqx-scheduler-view-list-button, jqx-scheduler .jqx-scheduler-view-items-button { --jqx-button-text-transform: initial; transform: scale(1); height: 100%; width: var(--jqx-scheduler-header-menu-button-size); border-top-left-radius: var(--jqx-item-border-top-left-radius); border-bottom-left-radius: var(--jqx-item-border-bottom-left-radius); border-top-right-radius: var(--jqx-item-border-top-right-radius); border-bottom-right-radius: var(--jqx-item-border-bottom-right-radius); overflow: hidden; } jqx-scheduler .jqx-scheduler-view-list-button:after, jqx-scheduler .jqx-scheduler-view-items-button:after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; font-family: var(--jqx-font-family-icon); font-size: var(--jqx-arrow-size); color: inherit; display: flex; align-items: center; justify-content: center; pointer-events: none; width: var(--jqx-editor-addon-width); min-width: var(--jqx-editor-addon-width); left: initial; right: 0; content: var(--jqx-icon-arrow-down); background: transparent; } jqx-scheduler .jqx-scheduler-view-list-button button, jqx-scheduler .jqx-scheduler-view-items-button button { display: flex; align-items: center; justify-content: center; border-radius: initial; } jqx-scheduler .jqx-scheduler-view-list-button button > span, jqx-scheduler .jqx-scheduler-view-items-button button > span { text-overflow: ellipsis; overflow: hidden; } jqx-scheduler .jqx-scheduler-view-list-button:not([active]) button:active, jqx-scheduler .jqx-scheduler-view-items-button:not([active]) button:active { color: inherit; border-color: inherit; background-color: inherit; } jqx-scheduler .jqx-scheduler-view-list-button.jqx-visibility-hidden, jqx-scheduler .jqx-scheduler-view-items-button.jqx-visibility-hidden { transform: scale(0); } jqx-scheduler .jqx-scheduler-view-list-button:not(.jqx-hidden) { display: block !important; } jqx-scheduler .jqx-scheduler-view-list-button { background: transparent; margin-left: 10px; } jqx-scheduler .jqx-scheduler-view-list-button.active:not(:hover) { background-color: var(--jqx-primary); color: var(--jqx-primary-color); } jqx-scheduler .jqx-scheduler-view-list-button:after { right: 2px; content: var(--jqx-icon-menu); } jqx-scheduler[hide-other-month-days] .jqx-scheduler-cell[other-month] { background: var(--jqx-surface) !important; } jqx-scheduler[hide-other-month-days] .jqx-scheduler-cell[other-month] > div { visibility: hidden; } jqx-scheduler .jqx-scheduler-list-container { position: absolute; top: 0px; right: 0px; background: var(--jqx-surface); color: var(--jqx-surface-color); height: 100%; width: 0px; transform: scaleX(0); opacity: 0; transition: transform cubic-bezier(0.075, 0.82, 0.165, 1) 0.3s, opacity cubic-bezier(0.075, 0.82, 0.165, 1) 0.3s; display: flex; flex-direction: column; border-left: 1px solid var(--jqx-border); transform-origin: right; } jqx-scheduler .jqx-scheduler-list-container.open { transform: scaleX(1); opacity: 1; } jqx-scheduler .jqx-scheduler-cells .jqx-scheduler-cell:empty { display: none; } jqx-scheduler .jqx-scheduler-cells .jqx-scheduler-cell:not(:first-of-type) { border-left: none; } jqx-scheduler .jqx-scheduler-cells div { border-bottom-color: var(--jqx-border); white-space: nowrap; pointer-events: none; } jqx-scheduler .jqx-scheduler-cells-container .jqx-scheduler-cell.scale { position: relative; width: 100%; height: 100%; min-height: initial; min-width: initial; } jqx-scheduler .jqx-scheduler-cells-container .jqx-scheduler-cell:not(.scale)[restricted] { background: var(--jqx-scheduler-restricted-background); } jqx-scheduler .jqx-scheduler-cells-container .jqx-scheduler-cell[nonworking] { background: var(--jqx-scheduler-timeline-nonworking-color); } jqx-scheduler .jqx-scheduler-cells-container .jqx-scheduler-cell[nonworking] .jqx-scheduler-cell { background: var(--jqx-scheduler-timeline-nonworking-color); } jqx-scheduler .jqx-scheduler-cells-container .jqx-scheduler-cell[weekend] { background: var(--jqx-scheduler-timeline-weekend-color); } jqx-scheduler .jqx-scheduler-cells-container .jqx-scheduler-cell-container { width: 100%; height: 100%; overflow: hidden; padding: initial; display: flex; flex-direction: column; } jqx-scheduler .jqx-scheduler-cells-container .jqx-scheduler-cell:not(.scale) { width: 100%; height: 100%; min-height: initial; min-width: initial; } jqx-scheduler .jqx-scheduler-cell { position: absolute; display: flex; justify-content: center; align-items: center; background: var(--jqx-background); color: var(--jqx-surface-color); text-overflow: ellipsis; white-space: nowrap; padding: var(--jqx-scheduler-timeline-header-cell-padding); border-bottom-color: transparent; height: var(--jqx-scheduler-timeline-cell-height); min-height: var(--jqx-scheduler-timeline-cell-min-height); width: var(--jqx-scheduler-timeline-cell-width); min-width: var(--jqx-scheduler-timeline-cell-min-size); } jqx-scheduler .jqx-scheduler-cell.jqx-scheduler-feedback:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; box-sizing: border-box; border: 2px dashed var(--jqx-primary); pointer-events: none; background: var(--jqx-scheduler-cell-feedback-background); } jqx-scheduler .jqx-scheduler-cell[other-month] { background: var(--jqx-background); color: var(--jqx-background-color); border-color: var(--jqx-border); } jqx-scheduler .jqx-scheduler-cell[other-month] > div { opacity: 0.5; } jqx-scheduler .jqx-scheduler-cell.jqx-scheduler-view-header-cell-feedback { width: initial; height: initial; visibility: hidden; } jqx-scheduler .jqx-scheduler-cell-container { position: absolute; display: flex; justify-content: center; align-items: center; background: var(--jqx-background); color: var(--jqx-surface-color); text-overflow: ellipsis; white-space: nowrap; padding: var(--jqx-scheduler-timeline-header-cell-padding); border-bottom-color: transparent; height: var(--jqx-scheduler-timeline-cell-height); min-height: var(--jqx-scheduler-timeline-cell-min-height); width: var(--jqx-scheduler-timeline-cell-width); min-width: var(--jqx-scheduler-timeline-cell-min-size); } jqx-scheduler .jqx-scheduler-events-container .jqx-scheduler-event .jqx-scheduler-event-button { display: none; } jqx-scheduler .jqx-scheduler-event { position: absolute; padding: var(--jqx-scheduler-event-padding-basic); outline: none; -webkit-tap-highlight-color: transparent; border-radius: var(--jqx-scheduler-event-border-radius); -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; user-select: none; } jqx-scheduler .jqx-scheduler-event:after { left: calc(50% - var(--jqx-scheduler-event-resize-indicator-size) / 4); top: calc(100% - var(--jqx-scheduler-event-resize-indicator-size)); } jqx-scheduler .jqx-scheduler-event:before { left: calc(50% - var(--jqx-scheduler-event-resize-indicator-size) / 4); top: 0; } jqx-scheduler .jqx-scheduler-event[hover]:not([collector]):before, jqx-scheduler .jqx-scheduler-event[hover]:not([collector]):after, jqx-scheduler .jqx-scheduler-event[focus]:not([collector]):before, jqx-scheduler .jqx-scheduler-event[focus]:not([collector]):after { transform: scale(1); } jqx-scheduler .jqx-scheduler-event:not([resized])[focus] .jqx-scheduler-event-content { background: var(--jqx-scheduler-event-focus); color: var(--jqx-scheduler-event-color-focus); } jqx-scheduler .jqx-scheduler-event:not([resized])[hover] .jqx-scheduler-event-content { background: var(--jqx-scheduler-event-hover); color: var(--jqx-scheduler-event-color-hover); } jqx-scheduler .jqx-scheduler-event:not([collector]):after, jqx-scheduler .jqx-scheduler-event:not([collector]):before { content: ""; width: var(--jqx-scheduler-event-resize-indicator-size); height: var(--jqx-scheduler-event-resize-indicator-size); position: absolute; background-color: var(--jqx-scheduler-event-resize-indicator-color); box-shadow: 0 0 0 1px var(--jqx-scheduler-event-resize-indicator-border-color); transform: scale(0); pointer-events: none; z-index: 1; } jqx-scheduler .jqx-scheduler-event .jqx-scheduler-event-button { display: none; } jqx-scheduler .jqx-scheduler-event .jqx-scheduler-event-label { font-weight: var(--jqx-scheduler-event-label-font-weight); font-size: var(--jqx-scheduler-event-label-font-size); pointer-events: none; white-space: nowrap; } jqx-scheduler .jqx-scheduler-event .jqx-scheduler-event-time { font-weight: var(--jqx-scheduler-event-time-font-weight); font-size: var(--jqx-scheduler-event-time-font-size); opacity: var(--jqx-scheduler-event-time-opacity); pointer-events: none; white-space: pre-wrap; } jqx-scheduler .jqx-scheduler-event .jqx-scheduler-event-content > div { max-width: 100%; max-height: 100%; overflow: hidden; text-overflow: ellipsis; align-self: flex-start; } jqx-scheduler .jqx-scheduler-event .jqx-scheduler-event-content > div:first-of-type { align-self: center; } jqx-scheduler .jqx-scheduler-event .jqx-scheduler-event-content:not([single-line]) > div:not(:first-of-type) { grid-column: 1/span 2; } jqx-scheduler .jqx-scheduler-event .jqx-scheduler-event-content[single-line] > div { align-self: initial; } jqx-scheduler .jqx-scheduler-event[resized] { opacity: 0.75; z-index: 10000; } jqx-scheduler .jqx-scheduler-event[cut] .jqx-scheduler-event-content { opacity: 0.75; } jqx-scheduler .jqx-scheduler-event[collector] { width: var(--jqx-scheduler-event-collector-size); height: var(--jqx-scheduler-event-collector-size); border-radius: var(--jqx-scheduler-event-collector-border-radius); } jqx-scheduler .jqx-scheduler-event[collector] .jqx-scheduler-event-content { padding: 1px 5px; justify-items: center; background: var(--jqx-scheduler-event-collector-background); color: var(--jqx-scheduler-event-collector-color); grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); grid-column-gap: 5px; } jqx-scheduler .jqx-scheduler-event[collector] .jqx-scheduler-event-content > div { align-self: initial; white-space: nowrap; } jqx-scheduler .jqx-scheduler-event[collector][focus] .jqx-scheduler-event-content { background: var(--jqx-scheduler-event-collector-focus); color: var(--jqx-scheduler-event-collector-color-focus); } jqx-scheduler .jqx-scheduler-event[collector][hover] .jqx-scheduler-event-content { background: var(--jqx-scheduler-event-collector-hover); color: var(--jqx-scheduler-event-collector-color-hover); } jqx-scheduler .jqx-scheduler-event[repeating] .jqx-scheduler-event-content:after { content: var(--jqx-icon-spin); width: var(--jqx-scheduler-event-icon-size); position: absolute; display: flex; justify-content: center; align-items: center; top: 0; right: 0; font-family: var(--jqx-font-family-icon); font-size: var(--jqx-font-size); padding: var(--jqx-scheduler-event-content-padding); box-sizing: border-box; line-height: 1rem; } jqx-scheduler .jqx-scheduler-event[repeating] .jqx-scheduler-event-content[single-line] { grid-template-columns: repeat(2, auto) var(--jqx-scheduler-event-icon-size); } jqx-scheduler .jqx-scheduler-event[repeating][exception] .jqx-scheduler-event-content:after { content: var(--jqx-icon-attention-circled); } jqx-scheduler .jqx-scheduler-event[status] .jqx-scheduler-event-content::before { content: ""; position: absolute; display: block; width: var(--jqx-scheduler-status-size); height: 100%; background: var(--jqx-scheduler-status-background); box-shadow: 0 0 0 0.5px var(--jqx-background); border: 1px solid var(--jqx-border); border-radius: 20px; overflow: hidden; box-sizing: border-box; } jqx-scheduler .jqx-scheduler-event[status=free] .jqx-scheduler-event-content::before { background: var(--jqx-scheduler-status-free-background); } jqx-scheduler .jqx-scheduler-event[status=busy] .jqx-scheduler-event-content::before { background: var(--jqx-scheduler-status-busy-background); } jqx-scheduler .jqx-scheduler-event[status=outOfOffice] .jqx-scheduler-event-content::before { background: var(--jqx-scheduler-status-out-of-office-background); } jqx-scheduler .jqx-scheduler-event[status=tentative] .jqx-scheduler-event-content::before { background: var(--jqx-scheduler-status-tentative-background); } jqx-scheduler .jqx-scheduler-event[exception] .jqx-scheduler-event-button, jqx-scheduler .jqx-scheduler-event[repeating] .jqx-scheduler-event-button { display: none; } jqx-scheduler .jqx-scheduler-event[exception] .jqx-scheduler-event-content, jqx-scheduler .jqx-scheduler-event[repeating] .jqx-scheduler-event-content { grid-template-columns: minmax(auto, 1fr) var(--jqx-scheduler-event-icon-size); } jqx-scheduler .jqx-scheduler-event:not([repeating]) .jqx-scheduler-event-content:not([single-line]) > div { grid-column: 1/span 2; } jqx-scheduler .jqx-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(--jqx-scheduler-event-content-padding); color: var(--jqx-scheduler-event-color); background: var(--jqx-scheduler-event-background); cursor: pointer; position: relative; border-radius: inherit; grid-row-gap: 2px; grid-template-columns: minmax(auto, 1fr); } jqx-scheduler .jqx-scheduler-event-content[single-line] { grid-template-columns: repeat(2, auto); grid-template-rows: 100%; grid-column-gap: 5px; justify-content: space-between; } jqx-scheduler .jqx-scheduler-date-nav { grid-area: date; display: flex; align-items: center; height: 100%; padding: var(--jqx-scheduler-header-padding); background: var(--jqx-surface); background-clip: content-box; overflow: hidden; } jqx-scheduler .jqx-scheduler-date-nav .jqx-scheduler-nav[current] { --jqx-button-padding: 0 10px 0 10px; width: auto; max-width: var(--jqx-scheduler-header-date-button-max-size); border-top-right-radius: var(--jqx-item-border-top-right-radius); border-bottom-right-radius: var(--jqx-item-border-bottom-right-radius); border-top-left-radius: var(--jqx-item-border-top-left-radius); border-bottom-left-radius: var(--jqx-item-border-bottom-left-radius); } jqx-scheduler .jqx-scheduler-date-nav .jqx-scheduler-nav[current] .jqx-button { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } jqx-scheduler .jqx-scheduler-time-zone { width: var(--jqx-scheduler-timeline-header-vertical-cells-size); overflow: hidden; display: flex; align-items: center; justify-content: center; padding: var(--jqx-scheduler-timeline-header-cell-padding); } jqx-scheduler .jqx-scheduler-time-zone > div { overflow: hidden; text-overflow: ellipsis; } jqx-scheduler .jqx-scheduler-time-zone-container { display: flex; height: 100%; align-items: center; } jqx-scheduler .jqx-scheduler-time-zone-container:empty { display: none; } jqx-scheduler .jqx-scheduler-current-time-indicator { position: absolute; pointer-events: none; width: var(--jqx-scheduler-current-time-indicator-size); height: var(--jqx-scheduler-current-time-indicator-size); background: var(--jqx-scheduler-current-time-indicator-background); } jqx-scheduler .jqx-scheduler-items-container { display: flex; align-items: center; height: 100%; position: relative; outline: none; } jqx-scheduler .jqx-scheduler-items-container .jqx-scheduler-item[selected] { background: var(--jqx-background); border-left: var(--jqx-border-width) solid var(--jqx-border); border-right: var(--jqx-border-width) solid var(--jqx-border); border-top: var(--jqx-border-width) solid var(--jqx-border); } jqx-scheduler .jqx-scheduler-items-container[focus] .jqx-scheduler-item[selected], jqx-scheduler .jqx-scheduler-items-container:focus .jqx-scheduler-item[selected] { background-color: var(--jqx-ui-state-focus); border-color: var(--jqx-ui-state-border-focus); color: var(--jqx-ui-state-color-focus); } jqx-scheduler .jqx-scheduler-items-container .jqx-scheduler-item { position: relative; display: flex; align-items: center; justify-content: center; cursor: pointer; height: 100%; width: var(--jqx-scheduler-item-size); padding: var(--jqx-scheduler-header-padding); border: var(--jqx-border-width) solid transparent; } jqx-scheduler .jqx-scheduler-items-container .jqx-scheduler-item:last-of-type { border-right: none; } jqx-scheduler .jqx-scheduler-item > div { position: relative; align-items: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } jqx-scheduler .jqx-scheduler-groups-container { display: flex; width: 100%; height: 100%; overflow: hidden; } jqx-scheduler .jqx-scheduler-groups-container .jqx-scheduler-cell { font-weight: var(--jqx-scheduler-timeline-all-day-label-font-weight); white-space: var(--jqx-scheduler-timeline-group-white-space); min-height: inherit; min-width: inherit; } jqx-scheduler .jqx-scheduler-groups-container .jqx-scheduler-cell > div { overflow: hidden; text-overflow: ellipsis; } jqx-scheduler .jqx-scheduler-groups-container .jqx-scheduler-cell:not(:first-of-type) { border-left: none; } jqx-scheduler .jqx-scheduler-scrollable-container { width: 100%; position: relative; overflow: hidden; display: grid; grid-area: content; height: 100%; background: var(--jqx-scheduler-view-background); } jqx-scheduler .jqx-scheduler-content { position: relative; overflow: hidden; width: 100%; height: 100%; } jqx-scheduler .jqx-scheduler-content .jqx-scheduler-cell[nonworking] { background: var(--jqx-scheduler-timeline-nonworking-color); } jqx-scheduler .jqx-scheduler-content .jqx-scheduler-cell[weekend] { background: var(--jqx-scheduler-timeline-weekend-color); } jqx-scheduler .jqx-scheduler-view-scroll-bar { overflow: visible; position: relative; height: var(--jqx-scroll-bar-size); width: 100%; } jqx-scheduler .jqx-scheduler-view-scroll-bar:after { position: absolute; content: ""; width: 100%; height: var(--jqx-scroll-bar-size); background: var(--jqx-scroll-bar-background); left: 100%; top: 0; } jqx-scheduler .jqx-scheduler-view-scroll-bar.bottom-corner { width: calc(100% - var(--jqx-scroll-bar-size)); } jqx-scheduler .jqx-scheduler-view-scroll-bar[orientation=vertical] { position: absolute; right: 0; top: 0; height: 100%; width: var(--jqx-scroll-bar-size); } jqx-scheduler .jqx-scheduler-view-scroll-bar[orientation=vertical].bottom-corner { height: calc(100% - var(--jqx-scroll-bar-size)); } jqx-scheduler .jqx-scheduler-tooltip { pointer-events: none; transform: scale(0); } jqx-scheduler .jqx-toast-container-custom.jqx-toast-container { width: var(--jqx-scheduler-toast-default-width); top: 0; right: 0; max-width: 100%; max-height: 100%; height: auto; } jqx-scheduler .jqx-toast-container-custom.jqx-toast-container .jqx-toast-item { border-radius: 5px; height: var(--jqx-scheduler-toast-default-height); } jqx-scheduler .jqx-toast-container-custom.jqx-toast-container .jqx-toast-item > .jqx-container { display: flex; flex-direction: row-reverse; } jqx-scheduler .jqx-toast-container-custom.jqx-toast-container .jqx-toast-item .jqx-toast-item-container { padding: initial; top: initial; width: 100%; } jqx-scheduler .jqx-scheduler-legend { width: 100%; height: 100%; display: flex; grid-row-gap: 10px; grid-column-gap: 10px; grid-area: legend; } jqx-scheduler .jqx-scheduler-legend .jqx-scheduler-legend-list { width: 30px; background: transparent; border: none; font-family: var(--jqx-font-family-icon); } jqx-scheduler .jqx-scheduler-legend .jqx-scheduler-legend-list input { display: none; } jqx-scheduler .jqx-scheduler-legend .jqx-scheduler-legend-list .jqx-container::before { content: var(--jqx-icon-menu); background: var(--jqx-surface); position: absolute; width: 100%; height: 100%; left: calc(50% - 8px); top: calc(50% - 8px); } jqx-scheduler .jqx-scheduler-legend .jqx-scheduler-legend-item { display: flex; flex-direction: column; justify-content: center; max-width: 100%; padding: var(--jqx-scheduler-header-padding); overflow: hidden; grid-row-gap: 2px; } jqx-scheduler .jqx-scheduler-legend .jqx-scheduler-legend-res-items { display: flex; /* grid-column-gap: 20px; */ /* Safari does not support column-gap with Flexbox */ } jqx-scheduler .jqx-scheduler-legend .jqx-scheduler-legend-res-item { position: relative; display: flex; align-items: center; grid-column-gap: 5px; white-space: nowrap; outline: initial; overflow: hidden; } jqx-scheduler .jqx-scheduler-legend .jqx-scheduler-legend-res-item:hover { color: var(--jqx-ui-state-color-hover); } jqx-scheduler .jqx-scheduler-legend .jqx-scheduler-legend-res-item:before { content: ""; width: var(--jqx-check-box-default-size); min-width: var(--jqx-check-box-default-size); height: var(--jqx-check-box-default-size); min-height: var(--jqx-check-box-default-size); display: flex; border: var(--jqx-border-width) solid var(--jqx-border); box-sizing: border-box; background-color: var(--jqx-scheduler-legend-item-background); border-radius: var(--jqx-border-radius); } jqx-scheduler .jqx-scheduler-legend .jqx-scheduler-legend-res-item:not(:first-of-type) { margin-left: 20px; } jqx-scheduler .jqx-scheduler-legend .jqx-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) { jqx-scheduler .jqx-scheduler-legend .jqx-scheduler-legend-res-item > span { width: 0; } } jqx-scheduler .jqx-scheduler-event-list-event:hover .jqx-event-actions { opacity: 1; } jqx-scheduler .jqx-scheduler-event-list-event .jqx-event-actions { display: inline-flex; position: absolute; right: 10px; column-gap: 5px; opacity: 0; transition: opacity ease-in-out 0.2s; } jqx-scheduler .jqx-scheduler-event-list-event .jqx-event-actions .jqx-icon-edit { font-family: var(--jqx-font-family-icon); font-style: normal; font-weight: normal; font-size: var(--jqx-arrow-size); } jqx-scheduler .jqx-scheduler-event-list-event .jqx-event-actions .jqx-icon-edit:after { content: var(--jqx-icon-mode-edit); } jqx-scheduler .jqx-scheduler-event-list-event .jqx-event-actions .jqx-icon-navigate { font-family: var(--jqx-font-family-icon); font-style: normal; font-weight: normal; font-size: var(--jqx-arrow-size); } jqx-scheduler .jqx-scheduler-event-list-event .jqx-event-actions .jqx-icon-navigate::after { content: var(--jqx-icon-link-ext); } jqx-scheduler .jqx-scheduler-window-modal { position: absolute; opacity: 0.5; background-color: var(--jqx-disabled); top: 0; left: 0; width: 100%; min-height: 100%; z-index: calc(var(--jqx-editor-drop-down-z-index) - 1); } jqx-scheduler .jqx-scheduler-shade-section { position: absolute; pointer-events: none; background: var(--jqx-scheduler-shader-background); } jqx-scheduler .jqx-scheduler-item > div, jqx-scheduler .jqx-scheduler-view-header-horizontal .jqx-scheduler-cell, jqx-scheduler .jqx-scheduler-view-header-vertical .jqx-scheduler-cell, jqx-scheduler .jqx-scheduler-cells-container .jqx-scheduler-cell:not(.scale) > div, jqx-scheduler .jqx-scheduler-view-all-day-label { -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; user-select: none; } jqx-scheduler:not([animation=none]) .jqx-scheduler-legend .jqx-scheduler-legend-res-item:before { transition: background linear 0.2s, border linear 0.2s; } jqx-scheduler:not([animation=none]) .jqx-scheduler-event:after, jqx-scheduler:not([animation=none]) .jqx-scheduler-event:before, jqx-scheduler:not([animation=none]) .jqx-scheduler-event:after, jqx-scheduler:not([animation=none]) .jqx-scheduler-event:before { transition: transform 0.2s cubic-bezier(0.4, 0, 0.6, 1); } jqx-scheduler:not([animation=none]) .jqx-scheduler-view-items-button { transition: transform 0.2s ease-in-out; } jqx-scheduler:not([animation=none]) .jqx-scheduler-items-container .jqx-scheduler-item { transition: border-top 0.2s ease-in-out; } jqx-scheduler:not([event-render-mode=classic]) .jqx-scheduler-event { padding-right: initial; } jqx-scheduler:not([disable-date-menu]):not([right-to-left]) .jqx-scheduler-nav[current] button { padding-right: var(--jqx-editor-addon-width); } jqx-scheduler:not([disable-view-menu]):not([right-to-left]) .jqx-scheduler-view-items-button button { padding-right: var(--jqx-editor-addon-width); } jqx-scheduler:not([view-type^=timeline]) .jqx-scheduler-cells-container .jqx-scheduler-cell:not(.scale):not(:last-of-type) { border-right: var(--jqx-scheduler-view-line-size) solid var(--jqx-scheduler-view-vertical-line-color); } jqx-scheduler:not([view-type^=timeline]) .jqx-scheduler-cells-container .jqx-scheduler-cell.scale:not(:last-of-type) { border-bottom: var(--jqx-border-width) solid rgba(var(--jqx-border-rgb), .5); } jqx-scheduler:not([view-type^=timeline]) .jqx-scheduler-cells-container .jqx-scheduler-cell-container:not(:last-of-type) { border-bottom: var(--jqx-scheduler-view-line-size) solid var(--jqx-scheduler-view-horizontal-line-color); } jqx-scheduler:not([view-type^=timeline]) .jqx-scheduler-view-header-horizontal .jqx-scheduler-time-zone { width: var(--jqx-scheduler-timeline-header-vertical-cells-size); height: 100%; } jqx-scheduler:not([view-type^=timeline]) .jqx-scheduler-current-time-indicator:before { left: 0; top: calc(-1 * var(--jqx-scheduler-current-time-indicator-arrow-size) + var(--jqx-scheduler-current-time-indicator-size) / 2); border-top: var(--jqx-scheduler-current-time-indicator-arrow-size) solid transparent; border-bottom: var(--jqx-scheduler-current-time-indicator-arrow-size) solid transparent; border-left: var(--jqx-scheduler-current-time-indicator-arrow-size) solid var(--jqx-scheduler-current-time-indicator-background); } jqx-scheduler:not([view-type^=timeline]) .jqx-scheduler-event { width: var(--jqx-scheduler-event-size); } jqx-scheduler:not([view-type=timelineDay]) .jqx-scheduler-view-header-horizontal .jqx-scheduler-cells:not(:last-of-type) .jqx-scheduler-cell { border-bottom: var(--jqx-border-width) solid var(--jqx-border); } jqx-scheduler:not([view-type=timelineWeek]) .jqx-scheduler-view-details { display: none; } jqx-scheduler:not([view-type=timelineWeek]) .jqx-scheduler-view-details-label:empty { display: none; } jqx-scheduler:not([view-type=day]) .jqx-scheduler-view[show-group-header=vertical] .jqx-scheduler-view-header-groups-container .jqx-scheduler-cell-container:not(:last-of-type) > .jqx-scheduler-cell { border-right: var(--jqx-scheduler-view-line-size) solid var(--jqx-scheduler-view-vertical-line-color); } jqx-scheduler:not([view-type=day]):not([view-type^=timeline]) .jqx-scheduler-view-label-container:empty, jqx-scheduler:not([view-type=day]):not([view-type=agenda]) .jqx-scheduler-view-header-vertical .jqx-scheduler-cell, jqx-scheduler:not([view-type=day]) .jqx-scheduler-view-header-cell-feedback { border-right: var(--jqx-border-width) solid var(--jqx-border); } jqx-scheduler:not([view-type=month]) .jqx-scheduler-view[show-group-header=vertical] .jqx-scheduler-view-label-container:before { content: ""; width: var(--jqx-scheduler-timeline-header-vertical-group-size); height: 100%; display: flex; } jqx-scheduler:not([view-type=month]) .jqx-scheduler-view[show-group-header=vertical] .jqx-scheduler-view-all-day-label-container { margin-left: var(--jqx-scheduler-timeline-header-vertical-group-size); } jqx-scheduler:not([view-type=agenda]) .jqx-scheduler-view-header-vertical-content .jqx-scheduler-cell:not(:first-of-type) > div { transform: translateY(calc(-50% - var(--jqx-scheduler-timeline-header-cell-padding))); } jqx-scheduler:not([view-type=agenda]) .jqx-scheduler-event[status] .jqx-scheduler-event-content { padding-left: calc(var(--jqx-scheduler-status-size) + var(--jqx-scheduler-status-padding)); border-top-left-radius: 5px; border-bottom-left-radius: 5px; } jqx-scheduler:not([view-type=agenda]) .jqx-scheduler-cells-container .jqx-scheduler-cell:not(.scale):hover, jqx-scheduler:not([view-type=agenda]) .jqx-scheduler-view-all-day .jqx-scheduler-cell:hover { background: var(--jqx-ui-state-hover); color: var(--jqx-ui-state-color-hover); } jqx-scheduler:not([view-type=agenda])[group-by-date] .jqx-scheduler-view[show-group-header=vertical] .jqx-scheduler-view-header-vertical .jqx-scheduler-view-time .jqx-scheduler-cell:not([group-separator]) > div { display: none; } jqx-scheduler[view-type]:not([view-type=day]) .jqx-scheduler-view-all-day-label, jqx-scheduler[view-type]:not([view-type=day]):not([view-type=agenda]) .jqx-scheduler-time-zone:last-of-type { border-right: var(--jqx-scheduler-view-line-size) solid var(--jqx-scheduler-view-vertical-line-color); } jqx-scheduler[view-type^=timeline] { --jqx-scheduler-event-size: var(--jqx-scheduler-event-size-timeline); } jqx-scheduler[view-type^=timeline] .jqx-scheduler-view-label-container { flex-direction: column; } jqx-scheduler[view-type^=timeline] .jqx-scheduler-cells .jqx-scheduler-cell > div { text-overflow: ellipsis; overflow: hidden; } jqx-scheduler[view-type^=timeline][group-by-date] .jqx-scheduler-view-header-horizontal-content .jqx-scheduler-cell { overflow: initial; } jqx-scheduler[view-type^=timeline] .jqx-scheduler-time-zone { height: var(--jqx-scheduler-timeline-header-horizontal-cells-size); border-right: var(--jqx-scheduler-view-line-size) solid var(--jqx-scheduler-view-vertical-line-color); } jqx-scheduler[view-type^=timeline] .jqx-scheduler-view:not([show-vertical-header]) { --jqx-scheduler-timeline-header-vertical-cells-size: 0; } jqx-scheduler[view-type^=timeline] .jqx-scheduler-view[show-vertical-header][show-group-header=horizontal] .jqx-scheduler-view-details-label { border-right: var(--jqx-scheduler-view-line-size) solid var(--jqx-scheduler-view-vertical-line-color); } jqx-scheduler[view-type^=timeline] .jqx-scheduler-view[show-group-header=vertical] .jqx-scheduler-view-label-container { border-right: var(--jqx-border-width) solid var(--jqx-border); } jqx-scheduler[view-type^=timeline] .jqx-scheduler-view[show-group-header=vertical] .jqx-scheduler-view-header-vertical { grid-template-columns: auto 0; } jqx-scheduler[view-type^=timeline] .jqx-scheduler-view[show-group-header=vertical] .jqx-scheduler-view-header-horizontal .jqx-scheduler-view-time-container { grid-template-columns: var(--jqx-scheduler-timeline-header-vertical-group-size) minmax(0, 1fr); } jqx-scheduler[view-type^=timeline] .jqx-scheduler-view[show-group-header=vertical] .jqx-scheduler-current-time-indicator:not(:first-of-type)::before { content: none; } jqx-scheduler[view-type^=timeline] .jqx-scheduler-time-zone-container { height: auto; flex-direction: column; } jqx-scheduler[view-type^=timeline] .jqx-scheduler-view-time { flex-direction: column; } jqx-scheduler[view-type^=timeline] .jqx-scheduler-event { padding: var(--jqx-scheduler-event-padding-timeline); height: var(--jqx-scheduler-event-size); } jqx-scheduler[view-type^=timeline] .jqx-scheduler-event:after { top: calc(50% - var(--jqx-scheduler-event-resize-indicator-size) / 4); left: calc(100% - var(--jqx-scheduler-event-resize-indicator-size)); } jqx-scheduler[view-type^=timeline] .jqx-scheduler-event:before { top: calc(50% - var(--jqx-scheduler-event-resize-indicator-size) / 4); left: 0; } jqx-scheduler[view-type^=timeline] .jqx-scheduler-cells-container .jqx-scheduler-cell.scale:not(:last-of-type) { border-right: var(--jqx-border-width) solid rgba(var(--jqx-border-rgb), .5); } jqx-scheduler[view-type^=timeline] .jqx-scheduler-cells-container .jqx-scheduler-cell-container { flex-direction: row; } jqx-scheduler[view-type^=timeline] .jqx-scheduler-cells-container .jqx-scheduler-cell-container:not(:last-of-type) { border-right: var(--jqx-scheduler-view-line-size) solid var(--jqx-scheduler-view-vertical-line-color); } jqx-scheduler[view-type^=timeline] .jqx-scheduler-cells-container .jqx-scheduler-cell:not(.scale):not(:last-of-type) { border-bottom: var(--jqx-border-width) solid var(--jqx-border); } jqx-scheduler[view-type^=timeline] .jqx-scheduler-current-time-indicator:before { left: calc(-1 * var(--jqx-scheduler-current-time-indicator-arrow-size) + var(--jqx-scheduler-current-time-indicator-size) / 2); border-right: var(--jqx-scheduler-current-time-indicator-arrow-size) solid transparent; border-left: var(--jqx-scheduler-current-time-indicator-arrow-size) solid transparent; border-top: var(--jqx-scheduler-current-time-indicator-arrow-size) solid var(--jqx-scheduler-current-time-indicator-background); } jqx-scheduler[view-type^=timeline]:not([event-render-mode=classic]) .jqx-scheduler-event { padding-bottom: 0; } jqx-scheduler[view-type^=timeline] .jqx-scheduler-view-all-day { display: none; } jqx-scheduler[view-type=timelineWeek] .jqx-scheduler-view[show-group-header=vertical] .jqx-scheduler-view-details-label { display: none; } jqx-scheduler[view-type=timelineWeek] .jqx-scheduler-view[show-vertical-header] .jqx-scheduler-view-details-label { border-right: var(--jqx-border-width) solid var(--jqx-border); } jqx-scheduler[view-type=timelineWeek] .jqx-scheduler-view-label-container { display: flex; flex-direction: column; } jqx-scheduler[view-type=timelineWeek] .jqx-scheduler-view-details-label { height: var(--jqx-scheduler-timeline-header-horizontal-details-size); width: 100%; } jqx-scheduler[view-type=timelineWeek] .jqx-scheduler-view-details:empty { display: none; } jqx-scheduler[view-type=day] .jqx-scheduler-view { grid-template-rows: auto minmax(0, 1fr); } jqx-scheduler[view-type=day] .jqx-scheduler-view[show-group-header=horizontal] .jqx-scheduler-current-time-indicator:not(:first-of-type)::before { content: none; } jqx-scheduler[view-type=day] .jqx-scheduler-cells-container .jqx-scheduler-cell:not(.scale):not(:last-of-type) { border-right: var(--jqx-scheduler-day-week-view-vertical-line-size) solid var(--jqx-scheduler-day-week-view-vertical-line-color); } jqx-scheduler[view-type=day] .jqx-scheduler-cells-container .jqx-scheduler-cell-container:not(:last-of-type) { border-bottom: var(--jqx-scheduler-day-week-view-hour-size) solid var(--jqx-scheduler-day-week-view-hour-color); } jqx-scheduler[view-type=day] .jqx-scheduler-view-header-horizontal .jqx-scheduler-view-time-container { display: none; } jqx-scheduler[view-type=day] .jqx-scheduler-view-header-horizontal .jqx-scheduler-cell { border-right: var(--jqx-scheduler-day-week-view-vertical-line-size) solid var(--jqx-scheduler-day-week-view-vertical-line-color); } jqx-scheduler[view-type=day] .jqx-scheduler-view-header-horizontal .jqx-scheduler-view-groups-label-container { border-bottom: var(--jqx-border-width) solid var(--jqx-border); } jqx-scheduler[view-type=week] .jqx-scheduler-cells-container .jqx-scheduler-cell:not(.scale):not(:last-of-type) { border-right: var(--jqx-scheduler-day-week-view-vertical-line-size) solid var(--jqx-scheduler-day-week-view-vertical-line-color); } jqx-scheduler[view-type=week] .jqx-scheduler-cells-container .jqx-scheduler-cell-container:not(:last-of-type) { border-bottom: var(--jqx-scheduler-day-week-view-hour-size) solid var(--jqx-scheduler-day-week-view-hour-color); } jqx-scheduler[view-type=week] .jqx-scheduler-view-header-horizontal .jqx-scheduler-cell { border-right: var(--jqx-scheduler-day-week-view-vertical-line-size) solid var(--jqx-scheduler-day-week-view-vertical-line-color); } jqx-scheduler[view-type=month] .jqx-scheduler-event { height: var(--jqx-scheduler-event-size); } jqx-scheduler[view-type=month] .jqx-scheduler-event:after { top: calc(50% - var(--jqx-scheduler-event-resize-indicator-size) / 4); left: calc(100% - var(--jqx-scheduler-event-resize-indicator-size)); } jqx-scheduler[view-type=month] .jqx-scheduler-event:before { top: calc(50% - var(--jqx-scheduler-event-resize-indicator-size) / 4); left: 0; } jqx-scheduler[view-type=month] .jqx-scheduler-view-header-horizontal .jqx-scheduler-view-all-day, jqx-scheduler[view-type=month] .jqx-scheduler-view:not([show-group-header=vertical]) .jqx-scheduler-view-header-vertical, jqx-scheduler[view-type=month] .jqx-scheduler-view:not([show-group-header=vertical]) .jqx-scheduler-view-label-container { display: none; } jqx-scheduler[view-type=month]:not([event-render-mode=classic]) .jqx-scheduler-event { padding-bottom: 0; } jqx-scheduler[view-type=month] .jqx-scheduler-view-header-vertical-content { display: none; } jqx-scheduler[view-type=month] .jqx-scheduler-content { grid-template-columns: 100%; } jqx-scheduler[view-type=month] .jqx-scheduler-content .jqx-scheduler-cell[nonworking][other-month]:not([selected]) { background: var(--jqx-scheduler-timeline-nonworking-color); } jqx-scheduler[view-type=month] .jqx-scheduler-cells-container .jqx-scheduler-cell:not(.scale) { justify-content: flex-end; align-items: flex-start; } jqx-scheduler[view-type=month] .jqx-scheduler-cells-container .jqx-scheduler-cell:not(.scale)[today] > div:not([class]) { border-radius: 50%; background: var(--jqx-primary); color: var(--jqx-primary-color); box-shadow: 0 0 0 2px var(--jqx-primary); width: calc(var(--jqx-scheduler-month-view-number-size) / 1.5); height: calc(var(--jqx-scheduler-month-view-number-size) / 1.5); } jqx-scheduler[view-type=month] .jqx-scheduler-scrollable-container { grid-template-columns: 100%; } jqx-scheduler[view-type=month] .jqx-scheduler-view[show-group-header=vertical] .jqx-scheduler-view-header-vertical { grid-template-columns: auto 0; } jqx-scheduler[view-type=month] .jqx-scheduler-view[show-group-header=vertical] .jqx-scheduler-view-header-horizontal .jqx-scheduler-view-time-container { grid-template-columns: var(--jqx-scheduler-timeline-header-vertical-group-size) minmax(0, 1fr); } jqx-scheduler[view-type=month] .jqx-scheduler-view:not([mobile]) .jqx-scheduler-event[collector] { padding-right: calc(var(--jqx-scheduler-month-view-number-size) + 5px); } jqx-scheduler[view-type=month] .jqx-scheduler-view:not([mobile]) .jqx-scheduler-event[collector][first-month-day] { padding-right: calc(var(--jqx-scheduler-month-view-number-size) + 25px); } jqx-scheduler[view-type=month] .jqx-scheduler-view-header-horizontal .jqx-scheduler-view-time-container, jqx-scheduler[view-type=month] .jqx-scheduler-view-all-day { grid-template-columns: minmax(0, 1fr); } jqx-scheduler[view-type=agenda] { --jqx-scheduler-timeline-header-vertical-label-padding: 0 0 0 25%; --jqx-scheduler-event-time-font-weight: 600; } jqx-scheduler[view-type=agenda] .jqx-scheduler-cells-container .jqx-scheduler-cell-container { overflow: initial; } jqx-scheduler[view-type=agenda] .jqx-scheduler-cells-container .jqx-scheduler-cell-container:not([separator]) { border: none; } jqx-scheduler[view-type=agenda] .jqx-scheduler-view-header-vertical .jqx-scheduler-cell { justify-content: flex-start; } jqx-scheduler[view-type=agenda] .jqx-scheduler-view-header-vertical .jqx-scheduler-cell > div { text-align: left; } jqx-scheduler[view-type=agenda] .jqx-scheduler-view-header-horizontal { grid-template-rows: auto minmax(0, 1fr); } jqx-scheduler[view-type=agenda] .jqx-scheduler-view-header-horizontal .jqx-scheduler-view-time-container { height: 0; border: none; } jqx-scheduler[view-type=agenda] .jqx-scheduler-view-header-horizontal .jqx-scheduler-view-groups-label-container { border-bottom: var(--jqx-border-width) solid var(--jqx-border); } jqx-scheduler[view-type=agenda] .jqx-scheduler-view-header-horizontal .jqx-scheduler-view-all-day { display: none; } jqx-scheduler[view-type=agenda] .jqx-scheduler-view-header-vertical .jqx-scheduler-cell[separator]:last-of-type > .jqx-scheduler-cell:after, jqx-scheduler[view-type=agenda] .jqx-scheduler-cells-container .jqx-scheduler-cell-container[separator]:last-of-type > .jqx-scheduler-cell:after { border-bottom: var(--jqx-border-width) solid var(--jqx-border); content: ""; height: 100%; width: 100%; position: absolute; top: var(--jqx-border-width); left: 0; box-sizing: border-box; pointer-events: none; } jqx-scheduler[view-type=agenda] .jqx-scheduler-view-header-vertical .jqx-scheduler-cell[separator]:not(:last-of-type), jqx-scheduler[view-type=agenda] .jqx-scheduler-cells-container .jqx-scheduler-cell-container[separator]:not(:last-of-type) { border-bottom: var(--jqx-border-width) solid var(--jqx-border); } jqx-scheduler[view-type=agenda] .jqx-scheduler-cell.jqx-scheduler-view-header-cell-feedback { padding: calc(2 * var(--jqx-scheduler-timeline-header-cell-padding)); } jqx-scheduler[view-type=agenda] .jqx-scheduler-view.no-agenda:after { /* content: var(--jqx-scheduler-no-agenda-placeholder); */ 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; } jqx-scheduler[view-type=agenda] .jqx-scheduler-event { padding: var(--jqx-scheduler-event-padding-agenda); } jqx-scheduler[view-type=agenda] .jqx-scheduler-event:not([collector]):not([disable-resize]):after, jqx-scheduler[view-type=agenda] .jqx-scheduler-event:not([collector]):not([disable-resize]):before, jqx-scheduler[view-type=agenda] .jqx-scheduler-event:not([collector]):not([disable-resize]):after, jqx-scheduler[view-type=agenda] .jqx-scheduler-event:not([collector]):not([disable-resize]):before { content: initial; } jqx-scheduler[view-type=agenda] .jqx-scheduler-event .jqx-scheduler-event-time { opacity: var(--jqx-scheduler-event-time-opacity-agenda); font-size: var(--jqx-scheduler-event-time-font-size-agenda); font-weight: var(--jqx-scheduler-event-time-font-weight-agenda); } jqx-scheduler[view-type=agenda] .jqx-scheduler-event[status] .jqx-scheduler-event-content::before { content: initial; } jqx-scheduler[view-type=agenda]:not([event-render-mode=classic]) .jqx-scheduler-event { padding-bottom: 0; } jqx-scheduler:not([filterable]) .jqx-scheduler-legend { opacity: 0.55; cursor: default; pointer-events: none; } jqx-scheduler[filterable] .jqx-scheduler-legend .jqx-scheduler-legend-res-item { cursor: pointer; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; user-select: none; } jqx-scheduler[filterable] .jqx-scheduler-legend .jqx-scheduler-legend-res-item:hover:before { border-color: var(--jqx-ui-state-border-hover); } jqx-scheduler[filterable] .jqx-scheduler-legend .jqx-scheduler-legend-res-item:focus:before { border-color: var(--jqx-primary); } jqx-scheduler[filterable] .jqx-scheduler-legend .jqx-scheduler-legend-res-item[unselected]:before { background: transparent; } jqx-scheduler[filterable] .jqx-scheduler-legend .jqx-scheduler-legend-res-item[disabled] { opacity: 0.55; cursor: default; pointer-events: none; } jqx-scheduler[group-by-date] .jqx-scheduler-view[show-group-header=horizontal] .jqx-scheduler-view-header-horizontal .jqx-scheduler-view-time-container { border-bottom: initial; } jqx-scheduler[group-by-date] .jqx-scheduler-view[show-group-header=horizontal] .jqx-scheduler-view-header-horizontal .jqx-scheduler-view-time .jqx-scheduler-cell:not([show-label]) > div { display: none; } jqx-scheduler[group-by-date] .jqx-scheduler-view[show-group-header=horizontal] .jqx-scheduler-view-header-horizontal .jqx-scheduler-view-time .jqx-scheduler-cell:not([group-separator]) { border-right: initial; } jqx-scheduler[group-by-date] .jqx-scheduler-view[show-group-header=horizontal] .jqx-scheduler-cell[show-label] { justify-content: flex-start; } jqx-scheduler[group-by-date] .jqx-scheduler-view[show-group-header=horizontal] .jqx-scheduler-cell[show-label] > div { transform: translateX(calc(-50% - var(--jqx-scheduler-timeline-header-cell-padding))); } jqx-scheduler[group-by-date] .jqx-scheduler-view[show-group-header=horizontal] .jqx-scheduler-cell[show-label=offset] > div { margin-left: var(--jqx-scheduler-timeline-group-header-offset); } jqx-scheduler[group-by-date] .jqx-scheduler-view[show-group-header=vertical] .jqx-scheduler-view-header-vertical .jqx-scheduler-view-time .jqx-scheduler-cell { border-right: initial; } jqx-scheduler[group-by-date] .jqx-scheduler-view[show-group-header=vertical] .jqx-scheduler-cell[show-label] > div { transform: translateY(calc(-50% - var(--jqx-scheduler-timeline-header-cell-padding))); } jqx-scheduler[group-by-date] .jqx-scheduler-view[show-group-header=vertical] .jqx-scheduler-cell[show-label=offset] > div { margin-top: var(--jqx-scheduler-timeline-group-header-offset); } jqx-scheduler[group-by-date] .jqx-scheduler-view[show-group-header=vertical] .jqx-scheduler-groups-container .jqx-scheduler-cell { align-items: center; } jqx-scheduler[group-by-date] .jqx-scheduler-view-header-horizontal .jqx-scheduler-groups-container, jqx-scheduler[group-by-date]:not([view-type^=timeline]) .jqx-scheduler-view-header-vertical .jqx-scheduler-groups-container { order: 1; } jqx-scheduler[group-by-date] .jqx-scheduler-view-all-day { order: 2; } jqx-scheduler[group-by-date] .jqx-scheduler-view-header-horizontal .jqx-scheduler-view-groups-label-container { border-bottom: var(--jqx-border-width) solid var(--jqx-border); } jqx-scheduler[group-by-date]:not([view-type=agenda]) .jqx-scheduler-view[show-group-header=vertical] .jqx-scheduler-groups-container .jqx-scheduler-cell:not([group-separator]) { border-bottom: var(--jqx-border-width) solid var(--jqx-border); } jqx-scheduler[disable-resize] .jqx-scheduler-event:not([collector]):after, jqx-scheduler[disable-resize] .jqx-scheduler-event:not([collector]):before { content: initial; } jqx-scheduler[hide-today-button] .jqx-scheduler-nav[today] { display: none; } jqx-scheduler[current-time-indicator] .jqx-scheduler-view-header-horizontal .jqx-scheduler-cell[current] { color: var(--jqx-scheduler-current-time-indicator-background); border-bottom: var(--jqx-scheduler-current-time-indicator-header-size) solid var(--jqx-scheduler-current-time-indicator-background); } jqx-scheduler[current-time-indicator] .jqx-scheduler-view-header-vertical .jqx-scheduler-cell[current] { color: var(--jqx-scheduler-current-time-indicator-background); border-right: var(--jqx-scheduler-current-time-indicator-header-size) solid var(--jqx-scheduler-current-time-indicator-background); } jqx-scheduler[current-time-indicator] .jqx-scheduler-current-time-indicator:before { content: ""; position: absolute; } jqx-scheduler[resized] { touch-action: none; } jqx-scheduler[resized] .jqx-scheduler-cell[restricted]:hover { cursor: no-drop; } jqx-scheduler[resized] .jqx-scheduler-event { pointer-events: none; } jqx-scheduler[dragged] { touch-action: none; } jqx-scheduler[dragged] .jqx-scheduler-events-container { pointer-events: none; } jqx-scheduler[modal] .jqx-scheduler-header, jqx-scheduler[modal] .jqx-scheduler-view-container, jqx-scheduler[modal] .jqx-scheduler-footer { pointer-events: none; } jqx-scheduler[hide-all-day] .jqx-scheduler-view-all-day { display: none; } jqx-scheduler[disable-date-menu] .jqx-scheduler-nav[current] { cursor: initial; } jqx-scheduler[disable-date-menu] .jqx-scheduler-nav[current]::after { content: initial; } jqx-scheduler[disable-date-menu] .jqx-scheduler-nav[current] .jqx-ripple { visibility: hidden; } jqx-scheduler[disable-date-menu] .jqx-scheduler-nav[current][hover], jqx-scheduler[disable-date-menu] .jqx-scheduler-nav[current][focus], jqx-scheduler[disable-date-menu] .jqx-scheduler-view-items-button[hover], jqx-scheduler[disable-date-menu] .jqx-scheduler-view-items-button[focus] { background: transparent; color: var(--jqx-background-color); } jqx-scheduler[disable-view-menu] .jqx-scheduler-view-items-button { border: initial; cursor: initial; } jqx-scheduler[disable-view-menu] .jqx-scheduler-view-items-button::after { content: initial; } jqx-scheduler[disable-view-menu] .jqx-scheduler-view-items-button .jqx-ripple { visibility: hidden; } jqx-scheduler[time-ruler-ticks][view-type=day] .jqx-scheduler-view-header-vertical .jqx-scheduler-cells:last-of-type .jqx-scheduler-cell:not(:last-of-type):after, jqx-scheduler[time-ruler-ticks][view-type=week] .jqx-scheduler-view-header-vertical .jqx-scheduler-cells:last-of-type .jqx-scheduler-cell:not(:last-of-type):after { content: ""; position: absolute; bottom: 0; right: 0; width: var(--jqx-scheduler-time-ruler-tick-size); height: var(--jqx-scheduler-day-week-view-hour-size); background: var(--jqx-scheduler-day-week-view-hour-color); } jqx-scheduler[legend-location=header] { --jqx-scheduler-header-height: auto; } jqx-scheduler[legend-location=header] .jqx-scheduler-header { grid-template-areas: "date view" "legend legend"; grid-template-rows: auto minmax(0, 1fr); } jqx-scheduler[legend-position=far] .jqx-scheduler-legend { justify-content: flex-end; } jqx-scheduler[scroll-buttons-position=both] .jqx-scheduler-date-nav .jqx-scheduler-nav[prev] { order: 1; } jqx-scheduler[scroll-buttons-position=both] .jqx-scheduler-date-nav .jqx-scheduler-nav[current] { order: 2; } jqx-scheduler[scroll-buttons-position=both] .jqx-scheduler-date-nav .jqx-scheduler-nav[next] { order: 3; } jqx-scheduler[scroll-buttons-position=both][header-navigation-style=raised] .jqx-scheduler-date-nav .jqx-scheduler-nav[current] { border-radius: initial; } jqx-scheduler[scroll-buttons-position=both][header-navigation-style=raised] .jqx-scheduler-date-nav .jqx-scheduler-nav[next] { border-top-right-radius: var(--jqx-item-border-top-right-radius); border-bottom-right-radius: var(--jqx-item-border-bottom-right-radius); } jqx-scheduler[scroll-buttons-position=both][header-navigation-style=raised] .jqx-scheduler-date-nav .jqx-scheduler-nav[next] { border-top-left-radius: initial; border-bottom-left-radius: initial; border-left: initial; border-right: var(--jqx-border-width) solid var(--jqx-border); } jqx-scheduler[scroll-buttons-position=far] .jqx-scheduler-date-nav .jqx-scheduler-nav[current] { order: 1; } jqx-scheduler[scroll-buttons-position=far] .jqx-scheduler-date-nav .jqx-scheduler-nav[next] { order: 3; } jqx-scheduler[scroll-buttons-position=far] .jqx-scheduler-date-nav .jqx-scheduler-nav[prev] { order: 2; } jqx-scheduler[scroll-buttons-position=far][header-navigation-style=raised] .jqx-scheduler-date-nav .jqx-scheduler-nav[current] { border-top-left-radius: var(--jqx-item-border-top-left-radius); border-bottom-left-radius: var(--jqx-item-border-bottom-left-radius); border-top-right-radius: initial; border-bottom-right-radius: initial; } jqx-scheduler[scroll-buttons-position=far][header-navigation-style=raised] .jqx-scheduler-date-nav .jqx-scheduler-nav[prev], jqx-scheduler[scroll-buttons-position=far][header-navigation-style=raised] .jqx-scheduler-date-nav .jqx-scheduler-nav[next] { border-top-left-radius: initial; border-bottom-left-radius: initial; border-left: initial; border-right: var(--jqx-border-width) solid var(--jqx-border); } jqx-scheduler[scroll-buttons-position=far][header-navigation-style=raised] .jqx-scheduler-date-nav .jqx-scheduler-nav[next] { border-top-right-radius: var(--jqx-item-border-top-right-radius); border-bottom-right-radius: var(--jqx-item-border-bottom-right-radius); } jqx-scheduler[scroll-buttons-position=near] .jqx-scheduler-date-nav .jqx-scheduler-nav[prev] { order: 1; } jqx-scheduler[scroll-buttons-position=near] .jqx-scheduler-date-nav .jqx-scheduler-nav[next] { order: 2; } jqx-scheduler[scroll-buttons-position=near][header-navigation-style=raised] .jqx-scheduler-date-nav .jqx-scheduler-nav[current] { order: 3; } jqx-scheduler[scroll-buttons-position=near][header-navigation-style=raised] .jqx-scheduler-date-nav .jqx-scheduler-nav[next] { border-top-right-radius: initial; border-bottom-right-radius: initial; border-right: initial; border-left: var(--jqx-border-width) solid var(--jqx-border); } jqx-scheduler:not([header-navigation-style=raised]) .jqx-scheduler-date-nav .jqx-scheduler-nav[prev], jqx-scheduler:not([header-navigation-style=raised]) .jqx-scheduler-date-nav .jqx-scheduler-nav[next] { border-radius: 50%; } jqx-scheduler:not([header-navigation-style=raised]) .jqx-scheduler-date-nav .jqx-scheduler-nav[current], jqx-scheduler:not([header-navigation-style=raised]) .jqx-scheduler-date-nav .jqx-scheduler-nav[prev], jqx-scheduler:not([header-navigation-style=raised]) .jqx-scheduler-date-nav .jqx-scheduler-nav[next] { border: initial; } jqx-scheduler:not([header-navigation-style=raised]) .jqx-scheduler-date-nav .jqx-scheduler-nav[current] { margin-left: 10px; } jqx-scheduler:not([header-navigation-style=raised]) .jqx-scheduler-date-nav .jqx-scheduler-nav[prev]:not([active]):not([focus]), jqx-scheduler:not([header-navigation-style=raised]) .jqx-scheduler-date-nav .jqx-scheduler-nav[next]:not([active]):not([focus]), jqx-scheduler:not([header-navigation-style=raised]) .jqx-scheduler-date-nav .jqx-scheduler-nav[current]:not([focus]), jqx-scheduler:not([header-navigation-style=raised]) .jqx-scheduler-nav[today]:not([focus]), jqx-scheduler:not([header-navigation-style=raised]) .jqx-scheduler-view-items-button:not([focus]) { background: transparent; } jqx-scheduler[header-date-position=far] .jqx-scheduler-header { grid-template-columns: 1fr auto; grid-template-areas: "view date"; } jqx-scheduler[header-view-position=near] .jqx-scheduler-view-nav { justify-content: flex-start; } jqx-scheduler[header-view-position=near] .jqx-scheduler-view-items-button { order: 2; } jqx-scheduler[header-view-position=near] .jqx-scheduler-items-container .jqx-scheduler-item:first-of-type, jqx-scheduler[header-view-position=near] .jqx-scheduler-items-container .jqx-scheduler-item:first-of-type[selected] { border-left: none; } jqx-scheduler[header-view-position=near] .jqx-scheduler-items-container .jqx-scheduler-item[selected] { border-left: var(--jqx-border-width) solid var(--jqx-border); border-right: var(--jqx-border-width) solid var(--jqx-border); } jqx-scheduler[header-navigation-style=raised] .jqx-scheduler-date-nav .jqx-scheduler-nav[prev] { border-top-left-radius: var(--jqx-item-border-top-left-radius); border-bottom-left-radius: var(--jqx-item-border-bottom-left-radius); border-top-right-radius: initial; border-bottom-right-radius: initial; border-right: initial; } jqx-scheduler[header-navigation-style=raised] .jqx-scheduler-date-nav .jqx-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(--jqx-border-width) solid var(--jqx-border); } jqx-scheduler[header-navigation-style=raised] .jqx-scheduler-date-nav .jqx-scheduler-nav[current] { border-radius: initial; border-top-right-radius: var(--jqx-item-border-top-right-radius); border-bottom-right-radius: var(--jqx-item-border-bottom-right-radius); } jqx-scheduler[header-navigation-style=raised] .jqx-scheduler-nav[today], jqx-scheduler[header-navigation-style=raised] .jqx-scheduler-view-items-button { background: var(--jqx-background); } jqx-scheduler[view-selector-type=tabs] .jqx-scheduler-view-items-button { position: absolute; } jqx-scheduler[view-selector-type=tabs] .jqx-scheduler-header { grid-template-areas: "date . view"; } jqx-scheduler[view-selector-type=auto] .jqx-scheduler-header { grid-template-areas: "date . view"; } jqx-scheduler:not([right-to-left]) .jqx-scheduler-view-header-horizontal .jqx-scheduler-cell:last-of-type { border-right: none; } jqx-scheduler[right-to-left][current-time-indicator] .jqx-scheduler-view-header-horizontal .jqx-scheduler-cell[current] { color: var(--jqx-scheduler-current-time-indicator-background); border-bottom: var(--jqx-scheduler-current-time-indicator-header-size) solid var(--jqx-scheduler-current-time-indicator-background); } jqx-scheduler[right-to-left][current-time-indicator] .jqx-scheduler-view-header-vertical .jqx-scheduler-cell[current] { color: var(--jqx-scheduler-current-time-indicator-background); border-left: var(--jqx-scheduler-current-time-indicator-header-size) solid var(--jqx-scheduler-current-time-indicator-background); border-right: none; } jqx-scheduler[right-to-left][current-time-indicator] .jqx-scheduler-current-time-indicator:before { left: calc(100% - 6px); transform: rotate(-180deg); } jqx-scheduler[right-to-left] .jqx-scheduler-header, jqx-scheduler[right-to-left] .jqx-scheduler-view { direction: rtl; } jqx-scheduler[right-to-left] .jqx-scheduler-date-nav .jqx-scheduler-nav[today] { order: 1; } jqx-scheduler[right-to-left] .jqx-scheduler-date-nav .jqx-scheduler-nav[prev] { order: 2; } jqx-scheduler[right-to-left] .jqx-scheduler-date-nav .jqx-scheduler-nav[prev]:after { content: var(--jqx-icon-arrow-right); } jqx-scheduler[right-to-left] .jqx-scheduler-date-nav .jqx-scheduler-nav[next] { order: 3; } jqx-scheduler[right-to-left] .jqx-scheduler-date-nav .jqx-scheduler-nav[next]:after { content: var(--jqx-icon-arrow-left); } jqx-scheduler[right-to-left] .jqx-scheduler-date-nav .jqx-scheduler-nav[current] { order: 4; } jqx-scheduler[right-to-left] > .jqx-container.vscroll .jqx-scheduler-view, jqx-scheduler[right-to-left].jqx-container.vscroll .jqx-scheduler-view { margin-left: var(--jqx-scroll-bar-size); } jqx-scheduler[right-to-left] > .jqx-container.vscroll .jqx-scheduler-view-scroll-bar:not([orientation=vertical]), jqx-scheduler[right-to-left].jqx-container.vscroll .jqx-scheduler-view-scroll-bar:not([orientation=vertical]) { left: var(--jqx-scroll-bar-size); } jqx-scheduler[right-to-left] .jqx-scheduler-view-scroll-bar[orientation=vertical] { right: initial; left: 0; } jqx-scheduler[right-to-left] .jqx-scheduler-view-scroll-bar[orientation=vertical]:before { border-left: none; border-right: var(--jqx-border-width) solid var(--jqx-border); } jqx-scheduler[right-to-left] .jqx-scheduler-view-scroll-bar[orientation=vertical]:after { right: 100%; left: initial; left: calc(-1 * var(--jqx-scroll-bar-size)); } jqx-scheduler[right-to-left][view-type=day] .jqx-scheduler-cells-container .jqx-scheduler-cell:not(.scale):not(:last-of-type), jqx-scheduler[right-to-left][view-type=week] .jqx-scheduler-cells-container .jqx-scheduler-cell:not(.scale):not(:last-of-type) { border-right: initial; border-left: var(--jqx-scheduler-day-week-view-vertical-line-size) solid var(--jqx-scheduler-day-week-view-vertical-line-color); } jqx-scheduler[right-to-left]:not([view-type^=timeline]) .jqx-scheduler-cells-container .jqx-scheduler-cell:not(.scale):not(:last-of-type) { border-right: initial; border-left: var(--jqx-scheduler-view-line-size) solid var(--jqx-scheduler-view-vertical-line-color); } jqx-scheduler[right-to-left][view-type]:not([view-type=day]) .jqx-scheduler-view-all-day-label, jqx-scheduler[right-to-left][view-type^=timeline] .jqx-scheduler-view[show-vertical-header][show-group-header=horizontal] .jqx-scheduler-view-details-label, jqx-scheduler[right-to-left][view-type^=timeline] .jqx-scheduler-time-zone, jqx-scheduler[right-to-left][view-type]:not([view-type=day]):not([view-type=agenda]) .jqx-scheduler-time-zone:last-of-type { border-right: initial; border-left: var(--jqx-scheduler-view-line-size) solid var(--jqx-scheduler-view-vertical-line-color); } jqx-scheduler[right-to-left]:not([view-type=day]):not([view-type^=timeline]) .jqx-scheduler-view-label-container:empty, jqx-scheduler[right-to-left]:not([view-type=day]):not([view-type=agenda]) .jqx-scheduler-view-header-vertical .jqx-scheduler-cell, jqx-scheduler[right-to-left]:not([view-type=day]) .jqx-scheduler-view-header-cell-feedback, jqx-scheduler[right-to-left][view-type^=timeline] .jqx-scheduler-view[show-group-header=vertical] .jqx-scheduler-view-label-container { border-right: initial; border-left: var(--jqx-border-width) solid var(--jqx-border); } jqx-scheduler[right-to-left] .jqx-scheduler-view-all-day .jqx-scheduler-cell[all-day]:not(:last-of-type), jqx-scheduler[right-to-left] .jqx-scheduler-view-header-horizontal .jqx-scheduler-cell:not(:last-of-type), jqx-scheduler[right-to-left] .jqx-scheduler-view-details .jqx-scheduler-cell:not(:last-of-type) { border-right: initial; border-left: var(--jqx-scheduler-day-week-view-vertical-line-size) solid var(--jqx-scheduler-day-week-view-vertical-line-color); } jqx-scheduler[right-to-left] .jqx-scheduler-view-all-day .jqx-scheduler-cell[all-day]:last-of-type, jqx-scheduler[right-to-left] .jqx-scheduler-view-header-horizontal .jqx-scheduler-cell:last-of-type { border-right: initial; } jqx-scheduler[right-to-left][view-type^=timeline] .jqx-scheduler-cells-container .jqx-scheduler-cell-container:not(:last-of-type), jqx-scheduler[right-to-left]:not([view-type=day]) .jqx-scheduler-view[show-group-header=vertical] .jqx-scheduler-view-header-groups-container .jqx-scheduler-cell-container:not(:last-of-type) > .jqx-scheduler-cell { border-right: initial; border-left: var(--jqx-scheduler-view-line-size) solid var(--jqx-scheduler-view-vertical-line-color); } jqx-scheduler[right-to-left] .jqx-scheduler-view[show-group-header=horizontal] .jqx-scheduler-cell[group-separator]:not(:last-of-type), jqx-scheduler[right-to-left] .jqx-scheduler-view[show-group-header=horizontal] .jqx-scheduler-cell:not(.scale)[group-separator]:not(:last-of-type), jqx-scheduler[right-to-left] .jqx-scheduler-view[show-group-header=horizontal] .jqx-scheduler-cell-container[group-separator]:not(:last-of-type) { border-right-color: initial; border-right-width: initial; border-left-color: var(--jqx-scheduler-timeline-group-separator-background); border-left-width: var(--jqx-scheduler-timeline-group-separator-size); } jqx-scheduler[right-to-left][group-by-date] .jqx-scheduler-view[show-group-header=horizontal] .jqx-scheduler-view-header-horizontal .jqx-scheduler-view-time .jqx-scheduler-cell:not([group-separator]) { border-left: initial; } jqx-scheduler[right-to-left][group-by-date] .jqx-scheduler-view[show-group-header=horizontal] .jqx-scheduler-view-header-horizontal .jqx-scheduler-view-time .jqx-scheduler-cell[show-label=offset] > div { margin-left: initial; margin-right: var(--jqx-scheduler-timeline-group-header-offset); } jqx-scheduler[right-to-left][group-by-date] .jqx-scheduler-view[show-group-header=horizontal] .jqx-scheduler-view-header-horizontal .jqx-scheduler-view-time .jqx-scheduler-cell[show-label] > div { transform: translateX(calc(50% + var(--jqx-scheduler-timeline-header-cell-padding))); } jqx-scheduler[right-to-left] .jqx-scheduler-nav[current]:after, jqx-scheduler[right-to-left] .jqx-scheduler-view-items-button:after { left: 0; right: initial; } jqx-scheduler[right-to-left]:not([disable-date-menu]) .jqx-scheduler-nav[current] button, jqx-scheduler[right-to-left]:not([disable-view-menu]) .jqx-scheduler-view-items-button button { padding-left: var(--jqx-editor-addon-width); } jqx-scheduler[right-to-left][view-type=agenda] { --jqx-scheduler-timeline-header-vertical-label-padding: 0 25% 0 0; } jqx-scheduler[right-to-left][view-type=agenda] .jqx-scheduler-view-header-vertical .jqx-scheduler-cell > div { text-align: right; } jqx-scheduler[right-to-left][view-type=month] .jqx-scheduler-view:not([mobile]) .jqx-scheduler-event[collector] { padding-right: initial; padding-left: calc(var(--jqx-scheduler-month-view-number-size) + 5px); } jqx-scheduler[right-to-left][view-type=month] .jqx-scheduler-view:not([mobile]) .jqx-scheduler-event[collector][first-month-day] { padding-left: calc(var(--jqx-scheduler-month-view-number-size) + 25px); } jqx-scheduler[right-to-left] .jqx-toast-container-custom { right: initial; left: 0; } jqx-scheduler[right-to-left]:not([view-type=agenda]) .jqx-scheduler-event[status] .jqx-scheduler-event-content { padding-left: initial; padding-right: calc(var(--jqx-scheduler-status-size) + var(--jqx-scheduler-status-padding)); border-top-left-radius: initial; border-bottom-left-radius: initial; border-top-right-radius: 5px; border-bottom-right-radius: 5px; } jqx-scheduler[right-to-left]:not([view-type=month]) .jqx-scheduler-view[show-group-header=vertical] .jqx-scheduler-view-all-day-label-container { margin-left: initial; margin-right: var(--jqx-scheduler-timeline-header-vertical-group-size); } jqx-scheduler[right-to-left][header-navigation-style=raised] .jqx-scheduler-date-nav .jqx-scheduler-nav[current] { border-top-right-radius: initial; border-bottom-right-radius: initial; border-top-left-radius: var(--jqx-item-border-top-right-radius); border-bottom-left-radius: var(--jqx-item-border-bottom-right-radius); } jqx-scheduler[right-to-left][header-navigation-style=raised] .jqx-scheduler-date-nav .jqx-scheduler-nav[prev] { border-top-left-radius: initial; border-bottom-left-radius: initial; border-left: initial; } jqx-scheduler[right-to-left][header-navigation-style=raised] .jqx-scheduler-date-nav .jqx-scheduler-nav[next] { border-top-right-radius: var(--jqx-item-border-top-left-radius); border-bottom-right-radius: var(--jqx-item-border-bottom-left-radius); border-right: var(--jqx-border-width) solid var(--jqx-border); } jqx-scheduler[right-to-left] .jqx-scheduler-nav[today] { margin-right: initial; margin-left: 10px; } jqx-scheduler[right-to-left] .jqx-scheduler-event[repeating] .jqx-scheduler-event-content:after { right: initial; left: 0; } jqx-scheduler[right-to-left][view-type=timelineWeek] .jqx-scheduler-view[show-vertical-header] .jqx-scheduler-view-details-label { border-right: initial; border-left: var(--jqx-border-width) solid var(--jqx-border); } jqx-scheduler[right-to-left] .jqx-scheduler-items-container .jqx-scheduler-item:last-of-type { border-right: var(--jqx-border-width) solid var(--jqx-border); border-left: none; } jqx-scheduler[right-to-left] .jqx-scheduler-legend { direction: rtl; } /* No need for view overlay on Mobile Firefox. */ @-moz-document url-prefix() { .jqx-scheduler .jqx-scheduler-view[mobile] .jqx-scheduler-content:not(.hide-overlay):after { display: none; } } /* --- Scheduler Window --- */ .jqx-scheduler-window { --jqx-window-default-width: auto; --jqx-window-default-height: auto; --jqx-window-header-height: var(--jqx-scheduler-window-header-height); --jqx-window-footer-height: var(--jqx-scheduler-window-footer-height); --jqx-window-header-footer-padding: 10px; --jqx-window-header-background: transparent; --jqx-window-footer-padding: 10px; --jqx-window-content-padding: 20px; max-width: 100vw; max-height: 100vh; } .jqx-scheduler-window[mobile] { border-radius: initial; } .jqx-scheduler-window.jqx-window.confirm .jqx-scheduler-confirm-label { width: var(--jqx-box-width); } .jqx-scheduler-window.jqx-window.confirm .jqx-content-container > .jqx-content { width: 100%; padding: var(--jqx-window-content-padding); justify-items: center; /* Fallback if 'safe' is not recognized by the browser */ justify-items: safe center; grid-template-rows: auto minmax(auto, 1fr); display: grid; grid-row-gap: 10px; justify-content: center; grid-template-columns: 100%; grid-row-gap: initial; } .jqx-scheduler-window.jqx-window .jqx-scheduler-window-content-wrapper { width: 100%; padding: var(--jqx-window-content-padding); justify-items: center; /* Fallback if 'safe' is not recognized by the browser */ justify-items: safe center; grid-template-rows: auto minmax(auto, 1fr); } .jqx-scheduler-window.jqx-window .jqx-scheduler-window-content-wrapper, .jqx-scheduler-window.jqx-window .jqx-scheduler-window-main, .jqx-scheduler-window.jqx-window .jqx-scheduler-window-repeat { display: grid; grid-row-gap: 10px; justify-content: center; grid-template-columns: 100%; } .jqx-scheduler-window.jqx-window .jqx-content-container > .jqx-content { padding: initial; align-items: flex-start; } .jqx-scheduler-window.jqx-window .jqx-scheduler-window-main, .jqx-scheduler-window.jqx-window .jqx-scheduler-window-repeat { width: var(--jqx-box-width); } .jqx-scheduler-window.jqx-window[horizontal] .jqx-scheduler-window-content-wrapper { grid-template-columns: repeat(2, auto); grid-column-gap: 20px; } .jqx-scheduler-window.jqx-window .jqx-scheduler-window-repeat [multiple] { grid-template-columns: minmax(0, 1fr); } .jqx-scheduler-window.jqx-window .jqx-scheduler-window-repeat [multiple] .jqx-scheduler-window-editor { grid-template-columns: auto auto minmax(0, 1fr); } .jqx-scheduler-window > .jqx-container, .jqx-scheduler-window .jqx-content-container { max-height: inherit; } .jqx-scheduler-window [multiple] .jqx-scheduler-window-editor { align-items: center; justify-content: flex-start; } .jqx-scheduler-window [multiple] .jqx-scheduler-window-editor[type=repeat], .jqx-scheduler-window [multiple] .jqx-scheduler-window-editor:nth-child(even), .jqx-scheduler-window [multiple] .jqx-scheduler-window-editor:nth-child(odd):not(:first-of-type):not(:last-of-type) { justify-content: flex-end; } .jqx-scheduler-window .jqx-content-container > .jqx-footer { display: flex; } @media not all and (min-resolution: 0.001dpcm) { .jqx-scheduler-window .jqx-content-container > .jqx-footer { align-content: start; } } .jqx-scheduler-window .jqx-content-container > .jqx-footer jqx-button { width: 100%; height: 100%; --jqx-button-padding: 0.2rem 16px; } .jqx-scheduler-window .jqx-content-container > .jqx-footer jqx-button:not(:first-of-type) { margin-inline-start: 2%; } .jqx-scheduler-window .jqx-content-container > .jqx-footer .jqx-icon { position: relative; height: 100%; font-family: var(--jqx-font-family-icon); font-size: 18px; margin-right: 2.5px; } .jqx-scheduler-window .jqx-scheduler-window-button.ok .jqx-icon::after { content: var(--jqx-icon-check); } .jqx-scheduler-window .jqx-scheduler-window-button.cancel { grid-area: buttonCancel; } .jqx-scheduler-window .jqx-scheduler-window-button.cancel .jqx-icon::after { content: var(--jqx-icon-cancel); } .jqx-scheduler-window .jqx-scheduler-window-button.delete .jqx-icon::after { content: var(--jqx-icon-delete); } .jqx-scheduler-window .jqx-scheduler-window-editor { display: grid; grid-row-gap: 5px; grid-column-gap: 10px; } .jqx-scheduler-window .jqx-scheduler-window-editor[type=allDay], .jqx-scheduler-window .jqx-scheduler-window-editor[type=repeat] { grid-column-gap: initial; } .jqx-scheduler-window .jqx-scheduler-window-editor[type=conference] label::before { content: var(--jqx-icon-video-camera); font-family: var(--jqx-font-family-icon); font-size: 14px; margin-right: 5px; position: relative; top: -3px; } .jqx-scheduler-window .jqx-scheduler-window-editor[type=notifications] label::before { content: var(--jqx-icon-bell); font-family: var(--jqx-font-family-icon); font-size: 14px; margin-right: 5px; } .jqx-scheduler-window .jqx-scheduler-window-editor[multiple] { grid-template-columns: repeat(2, minmax(0, 1fr)); } .jqx-scheduler-window .jqx-scheduler-window-editor[multiple] .jqx-color-input[event-editor] { width: auto; --jqx-border-radius: 50%; } .jqx-scheduler-window .jqx-scheduler-window-editor .jqx-drop-down-list, .jqx-scheduler-window .jqx-scheduler-window-editor .jqx-date-time-picker { width: 100%; } .jqx-scheduler-window .jqx-scheduler-window-editor .jqx-switch-button { margin: auto 10px; } .jqx-scheduler-window .jqx-scheduler-window-editor > b { text-align: center; } .jqx-scheduler-window .jqx-scheduler-window-editor > .jqx-input { width: 100%; } .jqx-scheduler-window .jqx-scheduler-window-editor > .jqx-number-input { width: 100px; } .jqx-scheduler-window .jqx-scheduler-window-editor input:not(.jqx-input) { height: var(--jqx-editor-height); } .jqx-scheduler-window .jqx-scheduler-window-editor .jqx-input[disabled] { opacity: 0.55; cursor: default; pointer-events: none; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; user-select: none; } .jqx-scheduler-window .jqx-scheduler-window-main [multiple] .jqx-scheduler-window-editor:not([type^=date]):not([resource-type]) { grid-template-columns: repeat(2, auto); } .jqx-scheduler-window .jqx-scheduler-window-repeat [multiple] .jqx-scheduler-window-editor[type=repeatEnd] { grid-template-columns: initial; } /* --- Scheduler Tooltip --- */ .jqx-scheduler-tooltip { --jqx-tooltip-arrow-color: var(--jqx-background); --jqx-tooltip-padding: 4px; } .jqx-scheduler-tooltip.jqx-tooltip .jqx-tooltip-content { opacity: initial; background-color: var(--jqx-background); color: var(--jqx-color); border: none; } .jqx-scheduler-tooltip .jqx-calendar { border: initial; border-radius: initial; direction: initial; } .jqx-scheduler-tooltip .jqx-calendar .jqx-calendar-header { border: var(--jqx-border-width) solid var(--jqx-border); } .jqx-scheduler-tooltip .jqx-scheduler-items-container { flex-direction: column; outline: none; } .jqx-scheduler-tooltip .jqx-scheduler-items-container:focus .jqx-scheduler-item[selected] { background-color: var(--jqx-ui-state-focus); border-color: var(--jqx-ui-state-border-focus); color: var(--jqx-ui-state-color-focus); } .jqx-scheduler-tooltip .jqx-scheduler-item { width: 100%; cursor: pointer; height: auto; position: relative; padding-right: calc(var(--jqx-scheduler-shortcut-size) - 4px); } .jqx-scheduler-tooltip .jqx-scheduler-item:after { content: attr(shortcut-key); position: absolute; height: 100%; width: var(--jqx-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: 0.5; margin: 0 6px 0 10px; } .jqx-scheduler-tooltip .jqx-scheduler-item:hover { color: var(--jqx-ui-state-color-hover); background-color: var(--jqx-ui-state-hover); } .jqx-scheduler-tooltip .jqx-scheduler-item[checkable]:after { content: ""; opacity: initial; left: 0; right: initial; margin: initial; } .jqx-scheduler-tooltip .jqx-scheduler-item[checkable] > div { padding-left: var(--jqx-scheduler-shortcut-size); padding-right: initial; } .jqx-scheduler-tooltip .jqx-scheduler-item[checkable][checked]:after { content: var(--jqx-icon-check); font-family: var(--jqx-font-family-icon); font-size: var(--jqx-font-size); } .jqx-scheduler-tooltip .jqx-scheduler-item[separator] { position: relative; margin-top: 15px; } .jqx-scheduler-tooltip .jqx-scheduler-item[separator]:before { content: ""; display: flex; width: 100%; border-bottom: var(--jqx-border-width) solid var(--jqx-border); margin: 7px 0; position: absolute; left: 0; bottom: 100%; } .jqx-scheduler-tooltip .jqx-scheduler-item > div { position: relative; align-items: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; padding: 10px var(--jqx-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; } .jqx-scheduler-tooltip .jqx-scheduler-event { display: grid; position: relative; /* !important is nedded to keep the inline style of the event intact */ width: 100% !important; height: var(--jqx-scheduler-event-item-size) !important; top: initial !important; left: initial !important; right: initial !important; grid-template-columns: 20px minmax(0, 1fr) var(--jqx-scheduler-event-button-size); grid-column-gap: 10px; justify-content: center; padding: var(--jqx-scheduler-event-content-padding); cursor: pointer; background: var(--jqx-background); color: var(--jqx-background-color); outline: none; /* !important is nedded to keep the inline style of the event intact */ --jqx-scheduler-event-focus: var(--jqx-ui-state-focus); --jqx-scheduler-event-color-focus: var(--jqx-ui-state-color-focus); --jqx-scheduler-event-hover: var(--jqx-ui-state-hover); --jqx-scheduler-event-color-hover: var(--jqx-ui-state-color-hover); -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; user-select: none; } .jqx-scheduler-tooltip .jqx-scheduler-event:before { content: ""; width: 20px; height: 20px; display: flex; background: var(--jqx-scheduler-event-background); justify-content: center; align-items: center; pointer-events: none; box-sizing: border-box; border-radius: 50%; padding: var(--jqx-scheduler-event-content-padding); } .jqx-scheduler-tooltip .jqx-scheduler-event:hover { background: var(--jqx-ui-state-hover); color: var(--jqx-ui-state-color-hover); } .jqx-scheduler-tooltip .jqx-scheduler-event[hover] .jqx-scheduler-event-button:hover { color: var(--jqx-ui-state-color-focus); background-color: var(--jqx-ui-state-focus); } .jqx-scheduler-tooltip .jqx-scheduler-event .jqx-scheduler-event-content { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; overflow: hidden; } .jqx-scheduler-tooltip .jqx-scheduler-event .jqx-scheduler-event-content .meeting { font-size: 12px; color: var(--jqx-primary); } .jqx-scheduler-tooltip .jqx-scheduler-event .jqx-scheduler-event-content .meeting a { color: var(--jqx-primary); } .jqx-scheduler-tooltip .jqx-scheduler-event .jqx-scheduler-event-content .meeting::before { content: var(--jqx-icon-video-camera); font-family: var(--jqx-font-family-icon); font-size: 12px; margin-right: 5px; } .jqx-scheduler-tooltip .jqx-scheduler-event .jqx-scheduler-event-content > div { max-width: 100%; max-height: 100%; overflow: hidden; text-overflow: ellipsis; align-self: flex-start; } .jqx-scheduler-tooltip .jqx-scheduler-context-menu { width: 100%; height: 100%; display: grid; align-items: center; justify-content: flex-start; } .jqx-scheduler-tooltip .jqx-scheduler-context-menu .jqx-scheduler-context-menu-item { height: var(--jqx-list-item-height); padding: var(--jqx-list-item-padding); border-top-left-radius: var(--jqx-item-border-top-left-radius); border-top-right-radius: var(--jqx-item-border-top-right-radius); border-bottom-left-radius: var(--jqx-item-border-bottom-left-radius); border-bottom-right-radius: var(--jqx-item-border-bottom-right-radius); white-space: nowrap; text-overflow: ellipsis; background: var(--jqx-background); color: var(--jqx-background-color); display: flex; align-items: center; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; user-select: none; } .jqx-scheduler-tooltip .jqx-scheduler-context-menu .jqx-scheduler-context-menu-item:hover { background: var(--jqx-ui-state-hover); color: var(--jqx-ui-state-color-hover); } .jqx-scheduler-tooltip .jqx-scheduler-item[selected], .jqx-scheduler-tooltip .jqx-scheduler-event[selected], .jqx-scheduler-tooltip .jqx-scheduler-context-menu .jqx-scheduler-context-menu-item[selected] { background-color: var(--jqx-ui-state-selected); border-color: var(--jqx-ui-state-border-selected); color: var(--jqx-ui-state-color-selected); } .jqx-scheduler-tooltip .jqx-scheduler-item[disabled], .jqx-scheduler-tooltip .jqx-scheduler-event[disabled], .jqx-scheduler-tooltip .jqx-scheduler-context-menu .jqx-scheduler-context-menu-item[disabled] { opacity: 0.55; cursor: default; pointer-events: none; } .jqx-scheduler-tooltip .jqx-scheduler-collector-event-list { width: 100%; height: 100%; } .jqx-scheduler-tooltip .jqx-scroll-viewer { --jqx-scroll-viewer-max-height: var(--jqx-scheduler-context-menu-max-height); --jqx-scroll-viewer-max-width: var(--jqx-scheduler-context-menu-max-width); --jqx-list-box-default-height: auto; width: auto; border: initial; padding: initial; /* Since the ScrollViewer has width: auto; We need to add the vScroll width to the menu container */ } .jqx-scheduler-tooltip .jqx-scroll-viewer .jqx-scroll-viewer-container.vscroll .jqx-scheduler-context-menu { padding-right: var(--jqx-scroll-bar-size); } .jqx-scheduler-tooltip .jqx-scroll-viewer .jqx-scroll-viewer-container .jqx-scroll-viewer-content-container { padding: initial; } .jqx-scheduler-tooltip .jqx-scheduler-event-button { position: relative; width: var(--jqx-scheduler-collector-item-button-size); height: var(--jqx-scheduler-collector-item-button-size); display: flex; justify-content: center; align-items: center; overflow: hidden; border-color: var(--jqx-border); border-top-left-radius: var(--jqx-border-top-left-radius); border-top-right-radius: var(--jqx-border-top-right-radius); border-bottom-left-radius: var(--jqx-border-bottom-left-radius); border-bottom-right-radius: var(--jqx-border-bottom-right-radius); outline: none; } .jqx-scheduler-tooltip .jqx-scheduler-event-button:hover { color: var(--jqx-ui-state-color-hover); background-color: var(--jqx-ui-state-hover); } .jqx-scheduler-tooltip .jqx-scheduler-event-button:active { color: var(--jqx-ui-state-color-active); background-color: var(--jqx-ui-state-active); } .jqx-scheduler-tooltip .jqx-scheduler-event-button:focus { color: var(--jqx-ui-state-color-focus); background-color: var(--jqx-ui-state-focus); } .jqx-scheduler-tooltip .jqx-scheduler-event-button:before { content: var(--jqx-icon-delete); font-family: var(--jqx-font-family-icon); position: absolute; pointer-events: none; box-sizing: border-box; font-size: var(--jqx-button-large-font-size); } .jqx-scheduler-tooltip .jqx-scheduler-event-label { font-weight: var(--jqx-scheduler-event-label-font-weight); font-size: var(--jqx-scheduler-event-label-font-size); pointer-events: none; white-space: nowrap; } .jqx-scheduler-tooltip .jqx-scheduler-event-time { font-weight: var(--jqx-scheduler-event-time-font-weight); font-size: var(--jqx-scheduler-event-time-font-size); opacity: var(--jqx-scheduler-event-time-opacity); pointer-events: none; white-space: nowrap; } .jqx-scheduler-tooltip:not([animation=none]) { animation: jqx-drop-down-list-jqx-animate-closing 0.2s ease-in; transition: animation 0.2s ease-in, opacity 0.2s ease-in, visibility 0.2s ease-in; } .jqx-scheduler-tooltip:not([animation=none])[visible] { animation: jqx-drop-down-list-jqx-animate-opening 0.2s ease-out; transition: animation 0.2s ease-out, opacity 0.2s ease-out, visibility 0.2s ease-out; } .jqx-scheduler-tooltip:not([arrow-direction]), .jqx-scheduler-tooltip[arrow-direction=bottom] { -webkit-transform-origin: bottom; transform-origin: bottom; } .jqx-scheduler-tooltip:not([arrow]), .jqx-scheduler-tooltip[arrow-direction=top] { -webkit-transform-origin: top; transform-origin: top; } .jqx-scheduler-tooltip[right-to-left] .jqx-scheduler-item { padding-right: initial; padding-left: calc(var(--jqx-scheduler-shortcut-size) - 4px); } .jqx-scheduler-tooltip[right-to-left] .jqx-scheduler-item:after { left: 0; right: initial; margin: 0 10px 0 6px; } .jqx-scheduler-tooltip[right-to-left] .jqx-scheduler-item > div { padding: 10px 12px 10px var(--jqx-scheduler-shortcut-size); } /* --- Scheduler Style Color Input --- */ /* --- Scheduler Drag Feedback --- */ .jqx-scheduler-drag-feedback { position: absolute; outline: none; -webkit-tap-highlight-color: transparent; border-radius: var(--jqx-scheduler-event-border-radius); pointer-events: none; padding: initial; text-align: center; box-sizing: border-box; background: transparent; box-shadow: var(--jqx-elevation-8); font-family: var(--jqx-font-family); font-size: var(--jqx-font-size); cursor: move; opacity: 0.75; z-index: 10000; } .jqx-scheduler-drag-feedback .jqx-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(--jqx-scheduler-event-content-padding); color: var(--jqx-scheduler-event-color); background: var(--jqx-scheduler-event-background); cursor: pointer; position: relative; border-radius: inherit; grid-row-gap: 2px; } .jqx-scheduler-drag-feedback .jqx-scheduler-event-content[single-line] { grid-template-columns: repeat(2, auto); grid-template-rows: 100%; grid-column-gap: 5px; justify-content: space-between; } .jqx-scheduler-drag-feedback .jqx-scheduler-event-content[single-line] > div { align-self: initial; } .jqx-scheduler-drag-feedback .jqx-scheduler-event-content:not([single-line]) > div:not(:first-of-type) { grid-column: 1/span 2; } .jqx-scheduler-drag-feedback .jqx-scheduler-event-label { font-weight: var(--jqx-scheduler-event-label-font-weight); font-size: var(--jqx-scheduler-event-label-font-size); pointer-events: none; white-space: nowrap; } .jqx-scheduler-drag-feedback .jqx-scheduler-event-time { font-weight: var(--jqx-scheduler-event-time-font-weight); font-size: var(--jqx-scheduler-event-time-font-size); opacity: var(--jqx-scheduler-event-time-opacity); pointer-events: none; white-space: pre-wrap; } .jqx-scheduler-drag-feedback .jqx-scheduler-event-content { grid-template-columns: minmax(auto, 1fr); } .jqx-scheduler-drag-feedback .jqx-scheduler-event-content > div { max-width: 100%; max-height: 100%; overflow: hidden; text-overflow: ellipsis; align-self: flex-start; } .jqx-scheduler-drag-feedback .jqx-scheduler-event-content > div:first-of-type { align-self: center; } .jqx-scheduler-drag-feedback[status] .jqx-scheduler-event-content:before { content: ""; position: absolute; display: block; width: var(--jqx-scheduler-status-size); height: 100%; background: var(--jqx-scheduler-status-background); box-shadow: 0 0 0 0.5px var(--jqx-background); border: 1px solid var(--jqx-border); border-radius: 20px; overflow: hidden; box-sizing: border-box; } .jqx-scheduler-drag-feedback[status]:not([view-type=agenda]) .jqx-scheduler-event-content { padding-left: calc(var(--jqx-scheduler-status-size) + var(--jqx-scheduler-status-padding)); } .jqx-scheduler-drag-feedback[status=free] .jqx-scheduler-event-content:before { background: var(--jqx-scheduler-status-free-background); } .jqx-scheduler-drag-feedback[status=busy] .jqx-scheduler-event-content:before { background: var(--jqx-scheduler-status-busy-background); } .jqx-scheduler-drag-feedback[status=outOfOffice] .jqx-scheduler-event-content:before { background: var(--jqx-scheduler-status-out-of-office-background); } .jqx-scheduler-drag-feedback[status=tentative] .jqx-scheduler-event-content:before { background: var(--jqx-scheduler-status-tentative-background); } .jqx-scheduler-drag-feedback[view-type=agenda] .jqx-scheduler-event-time { opacity: var(--jqx-scheduler-event-time-opacity-agenda); font-size: var(--jqx-scheduler-event-time-font-size-agenda); font-weight: var(--jqx-scheduler-event-time-font-weight-agenda); } .jqx-scheduler-drag-feedback[view-type=agenda] .jqx-scheduler-event { padding: var(--jqx-scheduler-event-padding-agenda); } .jqx-scheduler-drag-feedback[view-type=agenda] .jqx-scheduler-event-content > div { padding: var(--jqx-scheduler-event-padding-agenda); } .jqx-scheduler-drag-feedback[view-type=agenda][status] .jqx-scheduler-event-content:before { content: initial; } .jqx-scheduler-drag-feedback:not([view-type^=timeline]) { width: var(--jqx-scheduler-event-size); } .jqx-scheduler-drag-feedback:not([view-type^=timeline]) .jqx-scheduler-event-content > div { padding: var(--jqx-scheduler-event-padding-basic); } .jqx-scheduler-drag-feedback[view-type^=timeline] .jqx-scheduler-event-content > div { padding: var(--jqx-scheduler-event-padding-timeline); } .jqx-scheduler-drag-feedback[mobile]:not([view-type^=timeline]) { min-width: var(--jqx-scheduler-event-size-timeline); } .jqx-scheduler-drag-feedback[exception] .jqx-scheduler-event-content, .jqx-scheduler-drag-feedback[repeating] .jqx-scheduler-event-content { grid-template-columns: minmax(auto, 1fr) var(--jqx-scheduler-event-icon-size); } .jqx-scheduler-drag-feedback:not([repeating]) .jqx-scheduler-event-content:not([single-line]) > div { grid-column: 1/span 2; } .jqx-scheduler-drag-feedback[repeating] .jqx-scheduler-event-content:after { content: var(--jqx-icon-spin); width: var(--jqx-scheduler-event-icon-size); position: absolute; display: flex; justify-content: center; align-items: center; top: 0; right: 0; font-family: var(--jqx-font-family-icon); font-size: var(--jqx-font-size); padding: var(--jqx-scheduler-event-content-padding); box-sizing: border-box; line-height: 1rem; } .jqx-scheduler-drag-feedback[repeating] .jqx-scheduler-event-content[single-line] { grid-template-columns: repeat(2, auto) var(--jqx-scheduler-event-icon-size); } .jqx-scheduler-drag-feedback[repeating][exception] .jqx-scheduler-event-content:after { content: var(--jqx-icon-attention-circled); } .jqx-scheduler-drag-feedback[right-to-left] { direction: rtl; } .jqx-scheduler-drag-feedback[right-to-left]:not([view-type=agenda])[status] .jqx-scheduler-event-content { padding-left: initial; padding-right: calc(var(--jqx-scheduler-status-size) + var(--jqx-scheduler-status-padding)); } .jqx-scheduler-drag-feedback[right-to-left][repeating] .jqx-scheduler-event-content:after { right: initial; left: 0; } .jqx-dragging-disabled { cursor: no-drop; } /* jqx-notificaiton-panel */ .jqx-notification-panel { width: auto; height: auto; display: inline-block; contain: content; max-height: 100px; } .jqx-notification-panel:focus { border-color: var(--jqx-outline); } .jqx-notification-panel > .jqx-container, .jqx-notification-panel.jqx-container { padding: var(--jqx-editor-label-padding); overflow: auto; max-height: inherit; } .jqx-notification-panel .jqx-notification-container { display: flex; width: 100%; flex-direction: column; } .jqx-notification-panel .jqx-notification-container:empty { display: none; } .jqx-notification-panel .jqx-notification-placeholder, .jqx-notification-panel .jqx-notification-item { -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; user-select: none; } .jqx-notification-panel .jqx-notification-item { display: inline-grid; grid-template-columns: repeat(4, minmax(0, 1fr)) var(--jqx-editor-height); grid-column-gap: 10px; align-items: center; padding: 0 0 var(--jqx-editor-label-padding) 0; justify-items: center; } .jqx-notification-panel .jqx-notification-item .jqx-input { width: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; background: var(--jqx-surface); color: var(--jqx-surface-color); position: relative; outline: none; padding: var(--jqx-editor-label-padding); height: var(--jqx-editor-height); border-top-left-radius: var(--jqx-border-top-left-radius); border-top-right-radius: var(--jqx-border-top-right-radius); border-bottom-left-radius: var(--jqx-border-bottom-left-radius); border-bottom-right-radius: var(--jqx-border-bottom-right-radius); display: inline-flex; align-items: center; cursor: pointer; font-family: var(--jqx-font-family); font-size: var(--jqx-font-size); border: var(--jqx-border-width) solid transparent; } .jqx-notification-panel .jqx-notification-item .jqx-input[interval]::before, .jqx-notification-panel .jqx-notification-item .jqx-input[interval]::after, .jqx-notification-panel .jqx-notification-item .jqx-input[type]::after { content: var(--jqx-icon-arrow-down); display: flex; overflow: hidden; cursor: pointer; font-family: var(--jqx-font-family-icon); justify-content: center; align-items: center; font-size: var(--jqx-arrow-size); outline: none; width: var(--jqx-editor-addon-width); position: absolute; top: 1px; right: -1px; height: 100%; box-sizing: border-box; } .jqx-notification-panel .jqx-notification-item .jqx-input[interval]::before { content: var(--jqx-icon-arrow-up); top: 0; height: 50%; border-bottom: var(--jqx-border-width) solid transparent; } .jqx-notification-panel .jqx-notification-item .jqx-input[interval]::after { content: var(--jqx-icon-arrow-down); bottom: 0; top: initial; height: 50%; } .jqx-notification-panel .jqx-notification-item .jqx-button[delete] { width: var(--jqx-editor-height); height: var(--jqx-editor-height); box-sizing: border-box; display: flex; align-items: center; justify-content: center; opacity: 0.25; font-size: 16px; cursor: pointer; position: relative; border-radius: 50%; outline: none; } .jqx-notification-panel .jqx-notification-item .jqx-button[delete]:after { content: var(--jqx-icon-close); display: flex; justify-content: center; align-items: center; width: 100%; height: 0; cursor: pointer; font-size: var(--jqx-font-size); font-family: var(--jqx-font-family-icon); } .jqx-notification-panel .jqx-notification-item .jqx-button[delete]:hover { opacity: 0.6; color: var(--jqx-ui-state-color-hover); background-color: var(--jqx-ui-state-hover); } .jqx-notification-panel .jqx-notification-item .jqx-button[delete]:active { color: var(--jqx-ui-state-color-hover); background-color: var(--jqx-ui-state-hover); opacity: 1; } .jqx-notification-panel .jqx-notification-item .jqx-input:focus, .jqx-notification-panel .jqx-notification-item .jqx-button[delete]:focus { box-shadow: 0 0 0 1px var(--jqx-outline); } .jqx-notification-panel .jqx-notification-placeholder { border-bottom: var(--jqx-border-width) solid var(--jqx-primary); color: var(--jqx-primary); outline: none; display: inline-flex; align-items: center; cursor: pointer; font-family: var(--jqx-font-family); font-size: var(--jqx-font-size); } .jqx-notification-panel .jqx-notification-placeholder .jqx-input { outline: none; display: inline-flex; align-items: center; cursor: pointer; font-family: var(--jqx-font-family); font-size: var(--jqx-font-size); border: var(--jqx-border-width) solid transparent; } .jqx-notification-panel .jqx-notification-placeholder:hover { color: var(--jqx-ui-state-color-hover); } .jqx-notification-panel .jqx-notification-editor { position: absolute; background: var(--jqx-background); color: var(--jqx-background-color); } .jqx-notification-panel label { display: inline-flex; align-items: center; justify-content: center; } .jqx-notification-panel { /* Notification panel RTL */ } .jqx-notification-panel[right-to-left] .jqx-notification-item .jqx-input[interval], .jqx-notification-panel[right-to-left] .jqx-notification-item .jqx-input[type] { padding-left: var(--jqx-editor-addon-width); } .jqx-notification-panel[right-to-left] .jqx-notification-item .jqx-input[interval] { padding-left: calc(var(--jqx-editor-addon-width) + var(--jqx-editor-label-padding)); } .jqx-notification-panel[right-to-left] .jqx-notification-item .jqx-input[interval]::before, .jqx-notification-panel[right-to-left] .jqx-notification-item .jqx-input[interval]::after, .jqx-notification-panel[right-to-left] .jqx-notification-item .jqx-input[type]::after { right: initial; left: -1px; } /* Loading Placeholder */ .jqx-scheduler-loading-container .jqx-loader-label { position: absolute; top: 50%; left: 50%; z-index: 99; transform: translate(-50%, -50%); margin-top: calc(5px + var(--jqx-loader-size)); margin-left: 5px; } .jqx-scheduler-loader { margin: inherit; display: block; position: absolute; top: 50%; left: 50%; z-index: 99; transform: translate(-50%, -50%); opacity: 0.85; text-align: left; border: 6px solid rgba(43, 51, 63, 0.1); box-sizing: border-box; background-clip: padding-box; border-radius: 50%; width: calc(var(--jqx-loader-size) + 10px); height: calc(var(--jqx-loader-size) + 10px); } .jqx-scheduler-loader:after, .jqx-scheduler-loader:before { content: ""; position: absolute; margin: -6px; box-sizing: inherit; width: inherit; height: inherit; border-radius: inherit; opacity: 1; border: inherit; border-color: transparent; border-top-color: transparent; border-width: 6px; animation-delay: 0.44s; animation: jqx-loader-spin 1.1s cubic-bezier(0.6, 0.2, 0, 0.8) infinite, jqx-loader-spin-fade 1.1s linear infinite; } /* --- Editor Color Input --- */ .jqx-color-input-drop-down-menu.jqx-scheduler-color-input .grid-samples-container { grid-template-columns: repeat(2, minmax(0, 1fr)); } .jqx-color-input-drop-down-menu.jqx-scheduler-color-input:not([animation=none]) .default-samples-container div { transition: transform 0.2s ease-in-out; } .jqx-color-input-drop-down-menu.jqx-scheduler-color-input .default-samples-container div { position: relative; border-radius: 50%; border: initial; transform: scale(0.95); } .jqx-color-input-drop-down-menu.jqx-scheduler-color-input .default-samples-container div.selected { transform: scale(1); } .jqx-color-input-drop-down-menu.jqx-scheduler-color-input .default-samples-container div.selected:not(.no-color):after { content: var(--jqx-icon-check); width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: flex; justify-content: center; align-items: center; font-family: var(--jqx-font-family-icon); color: var(--jqx-secondary-color); border-radius: inherit; } .jqx-scheduler-color-input { --jqx-input-drop-down-menu-width: auto; } /* jqx-scroll-bar */ jqx-scroll-bar { display: block; touch-action: none; width: var(--jqx-scroll-bar-default-width); height: var(--jqx-scroll-bar-default-height); } jqx-scroll-bar .jqx-thumb { position: absolute; width: 40px; background-clip: content-box; padding: var(--jqx-scroll-bar-thumb-padding) 0 var(--jqx-scroll-bar-thumb-padding) 0; height: var(--jqx-scroll-bar-thumb-size); cursor: default; box-sizing: border-box; border-width: 1px; border-style: solid; border-color: var(--jqx-scroll-bar-thumb-border); background-color: var(--jqx-scroll-bar-thumb-background); border-top-left-radius: var(--jqx-scroll-bar-thumb-border-top-left-radius); border-top-right-radius: var(--jqx-scroll-bar-thumb-border-top-right-radius); border-bottom-left-radius: var(--jqx-scroll-bar-thumb-border-bottom-left-radius); border-bottom-right-radius: var(--jqx-scroll-bar-thumb-border-bottom-right-radius); } jqx-scroll-bar .jqx-thumb:hover { border-color: var(--jqx-scroll-bar-thumb-border-hover); background-color: var(--jqx-scroll-bar-thumb-background-hover); } jqx-scroll-bar .jqx-thumb:active { border-color: var(--jqx-scroll-bar-thumb-border-active); background-color: var(--jqx-scroll-bar-thumb-background-active); } jqx-scroll-bar .jqx-track { position: relative; float: left; height: 100%; background-color: var(--jqx-scroll-bar-track-background); width: 100%; } jqx-scroll-bar .jqx-scroll-button { display: none; float: left; width: var(--jqx-scroll-button-size); height: 100%; cursor: default; background-color: var(--jqx-scroll-bar-button-background); color: var(--jqx-scroll-bar-button-color); border: 1px solid var(--jqx-scroll-bar-button-border); min-height: 0; padding: 0; border-radius: 0px; } jqx-scroll-bar .jqx-scroll-button:hover { background-color: var(--jqx-scroll-bar-button-background-hover); color: var(--jqx-scroll-bar-button-color-hover); border-color: var(--jqx-scroll-bar-button-border-hover); } jqx-scroll-bar .jqx-scroll-button:active { background-color: var(--jqx-scroll-bar-button-background-active); color: var(--jqx-scroll-bar-button-color-active); border-color: var(--jqx-scroll-bar-button-border-active); } jqx-scroll-bar[show-buttons] .jqx-track { width: calc(100% - var(--jqx-scroll-button-size) * 2); } jqx-scroll-bar[show-buttons] .jqx-scroll-button { display: block; } jqx-scroll-bar[spinner][show-buttons] .jqx-track { display: none; } jqx-scroll-bar[spinner][show-buttons] .jqx-scroll-button { width: 50%; } jqx-scroll-bar[discrete] { --jqx-scroll-button-size: 0px; --jqx-scroll-bar-size: 15px; --jqx-scroll-bar-thumb-border-top-right-radius: 6px; --jqx-scroll-bar-thumb-border-top-left-radius: 6px; --jqx-scroll-bar-thumb-border-bottom-left-radius: 6px; --jqx-scroll-bar-thumb-border-bottom-right-radius: 6px; --jqx-scroll-bar-thumb-size: 100%; --jqx-scroll-bar-thumb-padding: 3px; --jqx-scroll-bar-default-width: var(--jqx-editor-width); --jqx-scroll-bar-default-height: var(--jqx-scroll-bar-size); --jqx-scroll-bar-background: #fafafa; --jqx-scroll-bar-track-background: var(--jqx-scroll-bar-background); --jqx-scroll-bar-border: #F1F1F1; --jqx-scroll-bar-thumb-background: #C1C1C1; --jqx-scroll-bar-thumb-border: transparent; } jqx-scroll-bar[orientation=vertical] { height: var(--jqx-scroll-bar-default-width); width: var(--jqx-scroll-bar-default-height); } jqx-scroll-bar[orientation=vertical] .jqx-thumb { width: var(--jqx-scroll-bar-thumb-size); padding: 0 var(--jqx-scroll-bar-thumb-padding) 0 var(--jqx-scroll-bar-thumb-padding); height: 40px; top: 0; } jqx-scroll-bar[orientation=vertical] .jqx-track { float: none; width: 100%; height: 100%; } jqx-scroll-bar[orientation=vertical] .jqx-scroll-button { float: none; height: var(--jqx-scroll-button-size); width: 100%; } jqx-scroll-bar[orientation=vertical][show-buttons] .jqx-track { height: calc(100% - var(--jqx-scroll-button-size) * 2); } jqx-scroll-bar[orientation=vertical][spinner] .jqx-scroll-button { height: 50%; width: 100%; float: none; } /* jqx-scroll-viewer */ jqx-scroll-viewer { /*min-width: 100px;*/ display: block; width: var(--jqx-editor-width); min-width: var(--jqx-scroll-viewer-min-width); max-width: var(--jqx-scroll-viewer-max-width); height: var(--jqx-list-box-default-height); min-height: var(--jqx-scroll-viewer-min-height); max-height: var(--jqx-scroll-viewer-max-height); padding: 3px; } jqx-scroll-viewer > .jqx-container { height: 100%; width: 100%; border: none; position: relative; overflow: hidden; } .jqx-scroll-viewer.jqx-container { height: 100%; width: 100%; border: none; position: relative; overflow: hidden; } .jqx-scroll-viewer > .jqx-container { max-height: inherit; min-height: inherit; max-width: inherit; min-width: inherit; } .jqx-scroll-viewer > .jqx-container > .jqx-scroll-viewer-container { max-height: inherit; min-height: inherit; max-width: inherit; min-width: inherit; } .jqx-scroll-viewer jqx-scroll-bar { overflow: visible; position: absolute; bottom: 0; height: calc(var(--jqx-scroll-bar-size)); width: 100%; } .jqx-scroll-viewer jqx-scroll-bar:before { position: absolute; content: ""; width: 100%; height: var(--jqx-scroll-bar-size); background-color: var(--jqx-surface); left: 100%; } .jqx-scroll-viewer jqx-scroll-bar.bottom-corner { width: calc(100% - var(--jqx-scroll-bar-size)); } .jqx-scroll-viewer jqx-scroll-bar[orientation=vertical] { right: 0; top: 0; height: 100%; width: calc(var(--jqx-scroll-bar-size)); } .jqx-scroll-viewer jqx-scroll-bar[orientation=vertical].bottom-corner { height: calc(100% - var(--jqx-scroll-bar-size)); } .jqx-scroll-viewer .jqx-scroll-viewer-container { width: 100%; height: 100%; overflow: hidden; position: relative; background-color: transparent; } .jqx-scroll-viewer .jqx-scroll-viewer-container.hscroll { height: calc(100% - var(--jqx-scroll-bar-size)); } .jqx-scroll-viewer .jqx-scroll-viewer-container.vscroll { width: calc(100% - var(--jqx-scroll-bar-size)); } .jqx-scroll-viewer .jqx-scroll-viewer-content-container { width: auto; height: auto; display: inline-block; padding: 5px; position: relative; background-color: transparent; } .jqx-scroll-viewer[right-to-left] .jqx-scroll-viewer-container { direction: rtl; text-align: initial; } .jqx-scroll-viewer[right-to-left] .jqx-scroll-viewer-container.vscroll { left: var(--jqx-scroll-bar-size); right: 0; } .jqx-scroll-viewer[right-to-left] jqx-scroll-bar { left: var(--jqx-scroll-bar-size); right: 0; } .jqx-scroll-viewer[right-to-left] jqx-scroll-bar:after { left: -100%; } .jqx-scroll-viewer[right-to-left] jqx-scroll-bar[orientation=vertical] { left: 0; right: initial; } .jqx-scroll-viewer[right-to-left] jqx-scroll-bar[orientation=vertical]:after { content: none; } @charset "UTF-8"; /* .jqx-slider */ jqx-slider { display: block; width: var(--jqx-slider-default-width); height: var(--jqx-slider-default-height); --jqx-border-top-left-radius: 100%; --jqx-border-top-right-radius: 100%; --jqx-border-bottom-left-radius: 100%; --jqx-border-bottom-right-radius: 100%; } jqx-slider[orientation=vertical] { width: var(--jqx-slider-default-height); height: var(--jqx-slider-default-width); } jqx-slider.jqx-element { overflow: visible; } .jqx-slider .jqx-track-container { width: 100%; height: var(--jqx-slider-track-size); margin-top: calc((var(--jqx-slider-thumb-height) - var(--jqx-slider-track-size)) / 2 + 2px); margin-bottom: calc((var(--jqx-slider-thumb-height) - var(--jqx-slider-track-size)) / 2 + 2px); } .jqx-slider .jqx-track { user-select: none; -webkit-user-select: none; position: relative; float: left; /* border-width: var(--jqx-border-width); border-style: solid; border-color: transparent; */ width: 100%; height: var(--jqx-slider-track-size); background-color: var(--jqx-disabled); cursor: pointer; } .jqx-slider .jqx-thumb { position: absolute; margin-left: calc(-1 * var(--jqx-slider-thumb-width) / 2); margin-top: calc(var(--jqx-slider-track-size) / 2 - var(--jqx-slider-thumb-height) / 2); border-top-left-radius: var(--jqx-slider-thumb-border-top-left-radius); border-top-right-radius: var(--jqx-slider-thumb-border-top-right-radius); border-bottom-left-radius: var(--jqx-slider-thumb-border-bottom-left-radius); border-bottom-right-radius: var(--jqx-slider-thumb-border-bottom-right-radius); border: var(--jqx-border-width) solid var(--jqx-primary); width: var(--jqx-slider-thumb-width); min-width: var(--jqx-slider-track-size); height: var(--jqx-slider-thumb-height); min-height: var(--jqx-slider-track-size); background-color: var(--jqx-primary); cursor: pointer; user-select: none; -webkit-user-select: none; } .jqx-slider .jqx-thumb:before { width: 100%; height: 100%; transition: 0.2s; display: block; border-radius: 50%; content: ""; z-index: -1; opacity: 0.2; background: var(--jqx-primary); } .jqx-slider .jqx-thumb[hover]:before { transform: scale(3); animation: slider-thumb-effect 1s infinite; animation-delay: 0.1s; } .jqx-slider .jqx-thumb.accessible { z-index: 1; } .jqx-slider .jqx-thumb-label { display: none; } .jqx-slider .jqx-thumb ~ .jqx-thumb { display: none; } .jqx-slider .jqx-value { position: absolute; width: 0; height: var(--jqx-slider-track-size); /* height: calc(var(--jqx-slider-track-size) + 1px); */ /* top: calc(-1 * var(--jqx-slider-track-size)); */ background-color: var(--jqx-ui-state-active); } .jqx-slider .jqx-tooltip { position: absolute; display: flex; align-items: center; justify-content: center; border: 1px solid var(--jqx-primary); width: var(--jqx-slider-tooltip-width); height: var(--jqx-slider-tooltip-height); padding: 4px 12px; font-family: var(--jqx-font-family); font-size: 75%; opacity: 0.5; border-radius: 0px; background-color: var(--jqx-primary); color: var(--jqx-primary-color); left: calc(-1 * var(--jqx-slider-tooltip-width) / 2 + var(--jqx-slider-thumb-width) / 2 - 1px); top: calc(-1 * var(--jqx-slider-tooltip-height) - 22px); } .jqx-slider .jqx-tooltip .jqx-tooltip-content { background: inherit; color: inherit; border-color: inherit; background-color: inherit; } .jqx-slider .jqx-tooltip.jqx-hidden { display: none; } .jqx-slider .jqx-tick { position: absolute; width: 1px; height: var(--jqx-slider-tick-size); background-color: var(--jqx-border); } .jqx-slider .jqx-tick-minor { height: var(--jqx-slider-minor-tick-size); } .jqx-slider .jqx-scale { margin-left: var(--jqx-border-width); height: calc(100% - var(--jqx-slider-thumb-height) - 4px); } .jqx-slider .jqx-scale.jqx-hidden { display: none; } .jqx-slider .jqx-scale-near .jqx-tick { bottom: 0; } .jqx-slider .jqx-scale-near .jqx-label { bottom: calc(var(--jqx-slider-tick-size) + 2px); } .jqx-slider .jqx-scale-far .jqx-tick { top: 0; } .jqx-slider .jqx-scale-far .jqx-label { top: calc(var(--jqx-slider-tick-size) + 2px); } .jqx-slider .jqx-spin-button { display: block; float: left; margin-top: calc(var(--jqx-slider-track-size) / 2 - var(--jqx-slider-spin-button-height) / 2); border: var(--jqx-border-width) solid var(--jqx-border); border-top-left-radius: var(--jqx-border-top-left-radius); border-top-right-radius: var(--jqx-border-top-right-radius); border-bottom-left-radius: var(--jqx-border-bottom-left-radius); border-bottom-right-radius: var(--jqx-border-bottom-right-radius); width: var(--jqx-slider-spin-button-width); height: var(--jqx-slider-spin-button-height); background-color: var(--jqx-surface); color: var(--jqx-surface-color); cursor: pointer; padding: 0px; min-height: 0; top: 0px; position: relative; } .jqx-slider .jqx-spin-button .jqx-button { padding: 0px; min-height: 0; } .jqx-slider .jqx-spin-button .jqx-arrow { left: 1px; top: 1px; } .jqx-slider .jqx-spin-button.jqx-hidden { display: none; } .jqx-slider .jqx-spin-button[hover] { background-color: var(--jqx-ui-state-hover); color: var(--jqx-ui-state-color-hover); border-color: var(--jqx-ui-state-border-hover); } .jqx-slider .jqx-spin-button[active] { background-color: var(--jqx-ui-state-active); color: var(--jqx-ui-state-color-active); border-color: var(--jqx-ui-state-border-active); } .jqx-slider:focus { border-color: var(--jqx-outline); } .jqx-slider:focus .jqx-thumb:before { transform: scale(3); animation: slider-thumb-effect 1s infinite; animation-delay: 0.1s; } .jqx-slider:not([animation=none]) .jqx-thumb.enable-animation { transition: margin-left 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); } .jqx-slider:not([animation=none]) .jqx-value.enable-animation { transition: width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); } .jqx-slider:not([animation=none])[range-slider] .jqx-value.enable-animation { transition: width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), margin-left 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); } .jqx-slider:not([animation=none])[inverted] .jqx-value.enable-animation { transition: width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), margin-left 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); } .jqx-slider:not([animation=none])[orientation=vertical] .jqx-thumb.enable-animation { transition: margin-top 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); } .jqx-slider:not([animation=none])[orientation=vertical] .jqx-value.enable-animation { transition: height 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), margin-top 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); } .jqx-slider:not([animation=none])[orientation=vertical][inverted] .jqx-value.enable-animation { transition: height 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); } .jqx-slider:not([animation=none])[orientation=vertical][range-slider] .jqx-value.enable-animation { transition: height 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), margin-top 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); } .jqx-slider[disabled] .jqx-thumb, .jqx-slider[disabled] .jqx-spin-button, .jqx-slider[disabled] .jqx-track, .jqx-slider[disabled] .jqx-value, .jqx-slider[readonly] .jqx-thumb, .jqx-slider[readonly] .jqx-spin-button, .jqx-slider[readonly] .jqx-track, .jqx-slider[readonly] .jqx-value { cursor: default; } .jqx-slider:not([hint]) .jqx-hint { display: none; } .jqx-slider[hint] .jqx-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; } .jqx-slider[hint] .jqx-hint:empty { display: none; } .jqx-slider[hint][scale-position=both]:not([orientation=vertical]) .jqx-hint { bottom: 150%; } .jqx-slider[hint]:not([animation=none]) .jqx-hint { transition: opacity 0.2s cubic-bezier(0.4, 0, 0.6, 1); } .jqx-slider[value="0"] .jqx-thumb { background-color: var(--jqx-border); border-color: var(--jqx-border); } .jqx-slider[value="0"] .jqx-thumb:before { background: var(--jqx-border); } .jqx-slider[show-buttons] .jqx-track-container { margin-top: calc((var(--jqx-slider-spin-button-height) - var(--jqx-slider-track-size)) / 2 + 2px); margin-bottom: calc((var(--jqx-slider-spin-button-height) - var(--jqx-slider-track-size)) / 2 + 2px); } .jqx-slider[show-buttons] .jqx-track { margin-left: calc(var(--jqx-slider-thumb-width) / 2); margin-right: calc(var(--jqx-slider-thumb-width) / 2); width: calc(100% - 2 * var(--jqx-slider-spin-button-width) - var(--jqx-slider-thumb-width)); } .jqx-slider[show-buttons] .jqx-scale { height: calc(100% - var(--jqx-slider-spin-button-height) - 4px); margin-left: calc(var(--jqx-slider-spin-button-width) + var(--jqx-slider-thumb-width) / 2 + var(--jqx-border-width)); margin-right: calc(var(--jqx-slider-spin-button-width) + var(--jqx-slider-thumb-width) / 2); } .jqx-slider[range-slider] .jqx-thumb ~ .jqx-thumb { display: block; } .jqx-slider[tooltip-position=far] .jqx-tooltip { top: calc(var(--jqx-slider-thumb-height) + 1px); } .jqx-slider[scale-position=both] .jqx-scale { height: calc((100% - var(--jqx-slider-thumb-height)) / 2 - 2px); } .jqx-slider[scale-position=both][show-buttons] .jqx-scale { height: calc((100% - var(--jqx-slider-spin-button-height)) / 2 - 2px); } .jqx-slider[ticks-visibility=none] .jqx-scale-near .jqx-label { bottom: 2px; } .jqx-slider[ticks-visibility=none] .jqx-scale-far .jqx-label { top: 2px; } .jqx-slider[ticks-position=track] .jqx-tick { height: 100%; } .jqx-slider[ticks-position=track] .jqx-tick-minor { height: 60%; top: 50%; transform: translateY(-50%); } .jqx-slider[ticks-position=track] .jqx-scale-near .jqx-label { bottom: 2px; } .jqx-slider[ticks-position=track] .jqx-scale-far .jqx-label { top: 2px; } .jqx-slider[show-thumb-label] .jqx-thumb { overflow: hidden; text-overflow: ellipsis; z-index: 9999; } .jqx-slider[show-thumb-label] .jqx-thumb-label { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 7px; font-family: var(--jqx-font-family); user-select: none; } .jqx-slider[show-thumb-label]:focus .jqx-thumb-label { display: block; } .jqx-slider[thumb-label-position=far] .jqx-thumb { top: 0; } .jqx-slider[thumb-label-position=far]:focus .jqx-thumb { top: calc(var(--jqx-slider-default-height) + var(--jqx-slider-thumb-width) * 2); } .jqx-slider[orientation=vertical] > .jqx-container, .jqx-slider[orientation=vertical].jqx-container { display: flex; flex-flow: row; justify-content: space-between; } .jqx-slider[orientation=vertical] .jqx-thumb { margin-left: calc(var(--jqx-slider-track-size) / 2 - var(--jqx-slider-thumb-width) / 2); margin-top: calc(-1 * var(--jqx-slider-thumb-height) / 2); } .jqx-slider[orientation=vertical] .jqx-track-container { float: left; width: var(--jqx-slider-track-size); height: 100%; margin-top: 0; margin-right: calc((var(--jqx-slider-thumb-width) - var(--jqx-slider-track-size)) / 2 + 2px); margin-bottom: 0; margin-left: calc((var(--jqx-slider-thumb-width) - var(--jqx-slider-track-size)) / 2 + 2px); z-index: 1; } .jqx-slider[orientation=vertical] .jqx-track { float: none; width: var(--jqx-slider-track-size); height: 100%; } .jqx-slider[orientation=vertical] .jqx-value { width: var(--jqx-slider-track-size); /* width: calc(var(--jqx-slider-track-size) + 1px); left: calc(-1 * var(--jqx-slider-track-size)); */ height: 0; } .jqx-slider[orientation=vertical] .jqx-scale { float: left; margin-top: var(--jqx-border-width); width: calc(100% - var(--jqx-slider-thumb-width) - 2px); height: 100%; } .jqx-slider[orientation=vertical] .jqx-tooltip { left: calc(-1 * var(--jqx-slider-tooltip-width) - 8px); top: calc(-1 * var(--jqx-slider-tooltip-height) / 2 + var(--jqx-slider-thumb-height) / 2 - 1px); } .jqx-slider[orientation=vertical] .jqx-tick { width: var(--jqx-slider-tick-size); height: 1px; } .jqx-slider[orientation=vertical] .jqx-tick-minor { width: var(--jqx-slider-minor-tick-size); } .jqx-slider[orientation=vertical] .jqx-scale-near .jqx-tick { right: 0; } .jqx-slider[orientation=vertical] .jqx-scale-near .jqx-label { right: calc(var(--jqx-slider-tick-size) + 2px); bottom: initial; } .jqx-slider[orientation=vertical] .jqx-scale-far .jqx-label { left: calc(var(--jqx-slider-tick-size) + 2px); } .jqx-slider[orientation=vertical] .jqx-spin-button { float: none; margin-left: calc(var(--jqx-slider-track-size) / 2 - var(--jqx-slider-spin-button-width) / 2); margin-top: 0; } .jqx-slider[orientation=vertical][inverted] .jqx-thumb { margin-top: 0; } .jqx-slider[orientation=vertical][scale-position=both] .jqx-scale { width: calc((100% - var(--jqx-slider-thumb-width)) / 2 - 2px); } .jqx-slider[orientation=vertical][scale-position=both][show-buttons] .jqx-scale { width: calc((100% - var(--jqx-slider-spin-button-width)) / 2); } .jqx-slider[orientation=vertical][show-buttons] .jqx-track-container { margin-right: calc((var(--jqx-slider-spin-button-width) - var(--jqx-slider-track-size)) / 2 + 2px); margin-left: calc((var(--jqx-slider-spin-button-width) - var(--jqx-slider-track-size)) / 2 + 2px); } .jqx-slider[orientation=vertical][show-buttons] .jqx-track { margin-left: 0; margin-right: 0; margin-top: calc(var(--jqx-slider-thumb-height) / 2); margin-bottom: calc(var(--jqx-slider-thumb-height) / 2); width: 100%; height: calc(100% - 2 * var(--jqx-slider-spin-button-height) - var(--jqx-slider-thumb-height)); } .jqx-slider[orientation=vertical][show-buttons] .jqx-scale { margin-top: calc(var(--jqx-slider-spin-button-height) + var(--jqx-slider-thumb-height) / 2 + var(--jqx-border-width)); margin-right: 0; margin-left: 0; height: calc(100% - var(--jqx-slider-spin-button-height) * 2 - var(--jqx-slider-thumb-height)); } .jqx-slider[orientation=vertical][tooltip-position=far] .jqx-tooltip { left: calc(var(--jqx-slider-thumb-width) + 1px); } .jqx-slider[orientation=vertical][ticks-position=track] .jqx-tick { width: 100%; height: 1px; } .jqx-slider[orientation=vertical][ticks-position=track] .jqx-tick-minor { width: 60%; left: 50%; transform: translateX(-50%); } .jqx-slider[orientation=vertical][ticks-position=track] .jqx-scale-near .jqx-label { right: 2px; } .jqx-slider[orientation=vertical][ticks-position=track] .jqx-scale-far .jqx-label { left: 2px; } .jqx-slider[orientation=vertical][ticks-visibility=none] .jqx-scale-near .jqx-label { right: 2px; } .jqx-slider[orientation=vertical][ticks-visibility=none] .jqx-scale-far .jqx-label { left: 2px; } .jqx-slider[orientation=vertical][thumb-label-position=far] .jqx-thumb { left: 100%; top: calc(100% + var(--jqx-slider-thumb-height) / 2); } @keyframes slider-thumb-effect { 0%, 100% { transform: scale(3); } 50% { transform: scale(2.75); } } /* ── Quality ──────────────────────────────────────────────────────────────── A reading whose quality is not good must not look like one that is. The value is dimmed for uncertain, hatched for bad and faded for stale, and a word says which - the word first, the treatment second, so it is legible without colour. Scoped to the attribute, so an instrument that never sets quality is untouched. */ jqx-slider[quality]:not([quality=good]) { position: relative; } jqx-slider[quality]:not([quality=good])::after { content: attr(quality); position: absolute; top: 2px; right: 2px; z-index: 2; padding: 0 4px; font-size: 10px; font-weight: 600; line-height: 1.4; letter-spacing: 0.04em; text-transform: uppercase; color: var(--jqx-industrial-alarm-warning-text, var(--jqx-warning)); background: var(--jqx-background); border: 1px solid currentColor; border-radius: 2px; pointer-events: none; } jqx-slider[quality=bad]::after { color: var(--jqx-industrial-alarm-critical-text, var(--jqx-error)); } jqx-slider[quality=uncertain] .jqx-value, jqx-slider[quality=uncertain] .jqx-thumb { opacity: 0.6; } jqx-slider[quality=stale] .jqx-value, jqx-slider[quality=stale] .jqx-thumb { opacity: 0.4; } jqx-slider[quality=bad] .jqx-value { opacity: 0.55; background-image: repeating-linear-gradient(45deg, transparent 0 5px, rgba(0, 0, 0, 0.35) 5px 10px); } jqx-slider[quality=bad] .jqx-thumb-label { text-decoration: line-through; } /* .jqx-slider */ jqx-slider[right-to-left] .jqx-tooltip-content { direction: rtl; } .jqx-slider[right-to-left] .jqx-label { direction: rtl; } .jqx-slider[right-to-left] .jqx-hint { direction: rtl; } .jqx-slider[right-to-left]:not([animation=none]) .jqx-value.enable-animation { transition: width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), margin-left 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); } /* .jqx-sortable */ .jqx-sortable { display: block; } .jqx-sortable .jqx-sortable-items-parent { display: flex; flex-direction: column; } .jqx-sortable .jqx-sortable-item { transform: translate(0, 0); position: relative; } .jqx-sortable .jqx-sortable-item.dragged { position: absolute; box-shadow: var(--jqx-elevation-4); z-index: 9999999; } .jqx-sortable .jqx-sortable-item.placeholder:before, .jqx-sortable .jqx-sortable-item.placeholder:after { content: none; } .jqx-sortable:not([disabled]) .jqx-sortable-item { touch-action: none; } .jqx-sortable[disabled] { pointer-events: none; opacity: 0.7; } .jqx-sortable:not([items]).jqx-container, .jqx-sortable:not([items]) > .jqx-container { display: flex; flex-direction: column; } .jqx-sortable:not([items])[mode=horizontal] > .jqx-container { flex-direction: row; } .jqx-sortable[dragged] > .jqx-container { user-select: none; } .jqx-sortable[mode=horizontal] .jqx-sortable-items-parent { flex-direction: row; } .jqx-sortable[handle-position=left] .jqx-sortable-item:before, .jqx-sortable[handle-position=left] .jqx-sortable-item:after { left: calc(-1 * var(--jqx-sortable-handle-size)) !important; } .jqx-sortable:not([animation=none]) .jqx-sortable-item { transition: transform 0.15s ease-in; } .jqx-sortable:not([animation=none]) .jqx-sortable-item.returning { transition: left 0.15s ease-in, top 0.15s ease-in; } .jqx-sortable:not([drag-mode=handle]):not([disabled]) .jqx-sortable-item { cursor: grab; } .jqx-sortable[drag-mode=handle] .jqx-sortable-item:before, .jqx-sortable[drag-mode=handle] .jqx-sortable-item:after { content: var(--jqx-icon-ellipsis); position: absolute; left: 100%; top: calc(50% - var(--jqx-sortable-handle-size) / 2); width: var(--jqx-sortable-handle-size); height: var(--jqx-sortable-handle-size); display: flex; align-items: flex-end; justify-content: center; font-family: var(--jqx-font-family-icon); font-size: var(--jqx-font-size); line-height: calc(var(--jqx-sortable-handle-size) - var(--jqx-font-size) / 2); cursor: grab; visibility: hidden; opacity: 0; transition: visibility 0.2s ease-in, opacity 0.2s ease-in; color: var(--jqx-background-color); } .jqx-sortable[drag-mode=handle] .jqx-sortable-item:before { transform: rotate(-90deg); } .jqx-sortable[drag-mode=handle] .jqx-sortable-item:after { transform: rotate(90deg); } .jqx-sortable[drag-mode=handle] .jqx-sortable-item.dragged:before, .jqx-sortable[drag-mode=handle] .jqx-sortable-item.dragged:after { visibility: visible; opacity: 0.5; } .jqx-sortable[drag-mode=handle]:not([disabled]) .jqx-sortable-item:hover:before, .jqx-sortable[drag-mode=handle]:not([disabled]) .jqx-sortable-item:hover:after { z-index: 9999999; visibility: visible; opacity: 0.5; } .jqx-sortable[drag-mode=handle][handle-visibility=visible]:not([disabled]) .jqx-sortable-item:before, .jqx-sortable[drag-mode=handle][handle-visibility=visible]:not([disabled]) .jqx-sortable-item:after { visibility: visible; opacity: 0.5; } .jqx-sortable[drag-mode=handle][handle-position=bottom] .jqx-sortable-item:before, .jqx-sortable[drag-mode=handle][handle-position=bottom] .jqx-sortable-item:after, .jqx-sortable[drag-mode=handle][handle-position=top] .jqx-sortable-item:before, .jqx-sortable[drag-mode=handle][handle-position=top] .jqx-sortable-item:after { left: calc(50% - var(--jqx-sortable-handle-size) / 2); top: 100%; align-items: center; transform: none; } .jqx-sortable[drag-mode=handle][handle-position=bottom] .jqx-sortable-item:after { align-items: flex-start; } .jqx-sortable[drag-mode=handle][handle-position=top] .jqx-sortable-item:before { top: calc(-1 * var(--jqx-sortable-handle-size)); } .jqx-sortable[drag-mode=handle][handle-position=top] .jqx-sortable-item:after { top: calc(-1 * var(--jqx-sortable-handle-size)); align-items: flex-end; } /* .jqx-sortable */ .jqx-sortable[right-to-left] .jqx-sortable-items-parent, .jqx-sortable[right-to-left] .jqx-column-panel-label { direction: rtl; } /* .jqx-splitter */ jqx-splitter { width: var(--jqx-splitter-default-width); height: var(--jqx-splitter-default-height); position: relative; /* Fixes the issue with the overflow and resize-container */ } jqx-splitter[dragged] { cursor: w-resize; } jqx-splitter[orientation=horizontal][dragged] { cursor: s-resize; } jqx-splitter-item > .jqx-container { overflow: hidden; position: relative; padding: var(--jqx-splitter-item-padding); } .jqx-splitter jqx-splitter-bar { min-width: 5px; width: var(--jqx-splitter-bar-size); position: relative; user-select: none; overflow: hidden; touch-action: none; } .jqx-splitter jqx-splitter-bar > .jqx-container { display: flex; align-items: center; justify-content: center; flex-direction: column-reverse; } .jqx-splitter jqx-splitter-bar.jqx-element { background: var(--jqx-surface); border-color: var(--jqx-surface-color); color: var(--jqx-surface-color); border-radius: initial; } .jqx-splitter jqx-splitter-bar[focus] .jqx-splitter-resize-button > span, .jqx-splitter jqx-splitter-bar[focus] .jqx-splitter-resize-button > span::before, .jqx-splitter jqx-splitter-bar[focus] .jqx-splitter-resize-button > span::after { background-color: var(--jqx-ui-state-color-active); border-color: var(--jqx-ui-state-color-active); color: var(--jqx-ui-state-color-active); } .jqx-splitter jqx-splitter-bar[focus].jqx-element { outline: none; background: var(--jqx-ui-state-active); color: var(--jqx-ui-state-color-active); } .jqx-splitter jqx-splitter-bar[locked] .jqx-splitter-resize-button > span { visibility: hidden; } .jqx-splitter jqx-splitter-bar[locked] .jqx-splitter-resize-button > span:before, .jqx-splitter jqx-splitter-bar[locked] .jqx-splitter-resize-button > span:after { content: none; } .jqx-splitter jqx-splitter-bar[locked][hover] { background-color: var(--jqx-ui-state-hover); color: var(--jqx-ui-state-color-hover); } .jqx-splitter jqx-splitter-bar[locked][focus] { background-color: var(--jqx-ui-state-active); color: var(--jqx-ui-state-color-active); } .jqx-splitter jqx-splitter-bar[show-near-button] .jqx-splitter-near-collapse-button { visibility: inherit; width: 100%; } .jqx-splitter jqx-splitter-bar[show-far-button] .jqx-splitter-far-collapse-button { visibility: inherit; width: 100%; } .jqx-splitter jqx-splitter-bar[item-collapsed] { cursor: initial; } .jqx-splitter jqx-splitter-bar[item-collapsed] > .jqx-container { flex-direction: initial; } .jqx-splitter jqx-splitter-bar[item-collapsed] .jqx-splitter-resize-button { display: none; } .jqx-splitter jqx-splitter-bar[item-collapsed] .jqx-splitter-resize-button > span:before, .jqx-splitter jqx-splitter-bar[item-collapsed] .jqx-splitter-resize-button > span:after { content: initial; } .jqx-splitter jqx-splitter-bar[item-collapsed] .jqx-splitter-near-collapse-button > span, .jqx-splitter jqx-splitter-bar[item-collapsed] .jqx-splitter-far-collapse-button > span { transform: rotate(270deg); } .jqx-splitter jqx-splitter-bar[item-collapsed] .jqx-splitter-near-collapse-button.jqx-visibility-hidden, .jqx-splitter jqx-splitter-bar[item-collapsed] .jqx-splitter-far-collapse-button.jqx-visibility-hidden { width: initial; } .jqx-splitter jqx-splitter-bar[item-collapsed] .jqx-splitter-near-collapse-button > span { transform: translate(-50%, -50%) rotate(270deg); } .jqx-splitter jqx-splitter-bar[item-collapsed] .jqx-splitter-far-collapse-button > span { transform: translate(-50%, -50%) rotate(90deg); } .jqx-splitter jqx-splitter-item { overflow: hidden; } .jqx-splitter jqx-splitter-item > .jqx-container > .jqx-content { width: 100%; height: 100%; overflow: auto; padding: var(--jqx-splitter-item-content-padding); } .jqx-splitter jqx-splitter-item.jqx-element { background-color: inherit; color: inherit; border-radius: initial; } .jqx-splitter jqx-splitter-item[collapsed] { overflow: hidden; padding: initial; } .jqx-splitter .jqx-splitter { margin: 0; width: 100%; height: 100%; border: none; } .jqx-splitter .jqx-splitter jqx-splitter-bar { background-color: var(--jqx-primary); color: var(--jqx-primary-color); } .jqx-splitter > .jqx-container { display: flex; position: relative; overflow: inherit; } .jqx-splitter > .jqx-container > jqx-splitter-item { height: 100%; flex-shrink: 0; width: var(--jqx-splitter-item-size); } .jqx-splitter > .jqx-container > jqx-splitter-bar { flex-shrink: 0; height: var(--jqx-splitter-bar-fit-size); } .jqx-splitter > .jqx-container > jqx-splitter-bar[locked] { cursor: default; } .jqx-splitter > .jqx-container > .jqx-splitter-bar-feedback { height: 100%; flex-shrink: 0; } .jqx-splitter .jqx-splitter-bar-feedback { min-width: 5px; width: var(--jqx-splitter-bar-size); user-select: none; overflow: hidden; touch-action: none; position: absolute; background-color: var(--jqx-ui-state-hover); color: var(--jqx-ui-state-color-hover); opacity: 0.5; } .jqx-splitter .jqx-splitter-bar-feedback.limit-reached { background-color: var(--jqx-error); } .jqx-splitter .jqx-splitter-resize-button { width: 100%; position: relative; font-family: var(--jqx-font-family-icon); height: 40px; display: flex; justify-content: center; align-items: center; cursor: inherit; } .jqx-splitter .jqx-splitter-resize-button > span { width: 6px; height: 6px; border: 1px solid var(--jqx-surface-color); background-color: var(--jqx-surface-color); color: var(--jqx-surface-color); border-radius: 50%; cursor: inherit; } .jqx-splitter .jqx-splitter-resize-button > span:before, .jqx-splitter .jqx-splitter-resize-button > span:after { position: absolute; transform: translate(-50%, -50%); content: ""; width: 4px; height: 4px; border-radius: 50%; border: 1px solid var(--jqx-surface-color); background-color: var(--jqx-surface-color); color: var(--jqx-surface-color); pointer-events: none; font-family: var(--jqx-font-family-icon); } .jqx-splitter .jqx-splitter-resize-button > span:before { left: 50%; top: calc(50% - var(--jqx-splitter-bar-size)); } .jqx-splitter .jqx-splitter-resize-button > span:after { top: calc(50% + var(--jqx-splitter-bar-size)); left: 50%; } .jqx-splitter .jqx-splitter-near-collapse-button, .jqx-splitter .jqx-splitter-far-collapse-button { height: 20px; position: relative; font-family: var(--jqx-font-family-icon); cursor: pointer; visibility: hidden; width: 0; } .jqx-splitter .jqx-splitter-near-collapse-button .jqx-arrow, .jqx-splitter .jqx-splitter-far-collapse-button .jqx-arrow { position: absolute; top: 50%; left: 50%; width: auto; height: auto; } .jqx-splitter .jqx-splitter-near-collapse-button .jqx-arrow:after, .jqx-splitter .jqx-splitter-far-collapse-button .jqx-arrow:after { content: var(--jqx-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; } .jqx-splitter .jqx-splitter-far-collapse-button > span { transform: translate(-50%, -50%) rotate(270deg); } .jqx-splitter .jqx-splitter-near-collapse-button .jqx-arrow { transform: translate(-55%, -50%) rotate(90deg); } .jqx-splitter:not([readonly]) > .jqx-container > jqx-splitter-bar[hover] { cursor: w-resize; } .jqx-splitter:not([dragged]) > .jqx-container > jqx-splitter-bar:not([focus]) .jqx-splitter-near-collapse-button, .jqx-splitter:not([dragged]) > .jqx-container > jqx-splitter-bar:not([focus]) .jqx-splitter-far-collapse-button { color: inherit; } .jqx-splitter:not([dragged]) > .jqx-container > jqx-splitter-bar[hover]:not([item-collapsed]):not([focus]) .jqx-splitter-near-collapse-button, .jqx-splitter:not([dragged]) > .jqx-container > jqx-splitter-bar[hover]:not([item-collapsed]):not([focus]) .jqx-splitter-far-collapse-button { color: var(--jqx-ui-state-color-hover); } .jqx-splitter:not([dragged]) jqx-splitter-bar.jqx-element, .jqx-splitter:not([dragged]) jqx-splitter-bar[hover] { background-color: var(--jqx-ui-state-hover); border-color: var(--jqx-ui-state-border-hover); color: var(--jqx-ui-state-color-hover); } .jqx-splitter:not([dragged]) jqx-splitter-bar[hover]:not([item-collapsed]):not([focus]) .jqx-splitter-resize-button span, .jqx-splitter:not([dragged]) jqx-splitter-bar[hover]:not([item-collapsed]):not([focus]) .jqx-splitter-resize-button span:after, .jqx-splitter:not([dragged]) jqx-splitter-bar[hover]:not([item-collapsed]):not([focus]) .jqx-splitter-resize-button span:before { background-color: var(--jqx-ui-state-color-hover); border-color: var(--jqx-ui-state-color-hover); color: var(--jqx-ui-state-color-hover); } .jqx-splitter:not([dragged]) jqx-splitter-bar[focus] { background-color: var(--jqx-ui-state-active); border-color: var(--jqx-ui-state-border-active); color: var(--jqx-ui-state-color-active); } .jqx-splitter:not([dragged]) jqx-splitter-bar[focus]:not([item-collapsed]) .jqx-splitter-resize-button span, .jqx-splitter:not([dragged]) jqx-splitter-bar[focus]:not([item-collapsed]) .jqx-splitter-resize-button span:after, .jqx-splitter:not([dragged]) jqx-splitter-bar[focus]:not([item-collapsed]) .jqx-splitter-resize-button span:before { background-color: var(--jqx-ui-state-color-active); border-color: var(--jqx-ui-state-color-active); color: var(--jqx-ui-state-color-active); } .jqx-splitter:not([dragged]) jqx-splitter-bar:not([item-collapsed]):not([focus]) .jqx-splitter-near-collapse-button[hover], .jqx-splitter:not([dragged]) jqx-splitter-bar:not([item-collapsed]):not([focus]) .jqx-splitter-far-collapse-button[hover] { color: var(--jqx-ui-state-color-hover); } .jqx-splitter[dragged] { cursor: w-resize; pointer-events: none; user-select: none; touch-action: none; } .jqx-splitter[dragged]:not([animation=none]) > .jqx-container > jqx-splitter-item { transition: none; } .jqx-splitter[auto-fit-mode=overflow] > .jqx-container { overflow: auto; } .jqx-splitter[orientation=horizontal] > .jqx-container { flex-direction: column; } .jqx-splitter[orientation=horizontal] > .jqx-container > jqx-splitter-item { width: 100%; height: var(--jqx-splitter-item-size); } .jqx-splitter[orientation=horizontal] > .jqx-container > jqx-splitter-bar { width: var(--jqx-splitter-bar-fit-size); min-height: 5px; height: var(--jqx-splitter-bar-size); } .jqx-splitter[orientation=horizontal] > .jqx-container > jqx-splitter-bar > .jqx-container { flex-direction: row; } .jqx-splitter[orientation=horizontal] > .jqx-container > jqx-splitter-bar .jqx-splitter-near-collapse-button, .jqx-splitter[orientation=horizontal] > .jqx-container > jqx-splitter-bar .jqx-splitter-far-collapse-button { width: 0; height: 100%; } .jqx-splitter[orientation=horizontal] > .jqx-container > jqx-splitter-bar .jqx-splitter-far-collapse-button > span { transform: translate(-50%, -45%) rotate(0deg); } .jqx-splitter[orientation=horizontal] > .jqx-container > jqx-splitter-bar .jqx-splitter-near-collapse-button > span { transform: translate(-50%, -50%) rotate(180deg); } .jqx-splitter[orientation=horizontal] > .jqx-container > jqx-splitter-bar .jqx-splitter-resize-button { width: 20px; height: 100%; } .jqx-splitter[orientation=horizontal] > .jqx-container > jqx-splitter-bar .jqx-splitter-resize-button > span:before { left: calc(50% - var(--jqx-splitter-bar-size)); top: 50%; } .jqx-splitter[orientation=horizontal] > .jqx-container > jqx-splitter-bar .jqx-splitter-resize-button > span:after { top: 50%; left: calc(50% + var(--jqx-splitter-bar-size)); } .jqx-splitter[orientation=horizontal] > .jqx-container > jqx-splitter-bar[item-collapsed] .jqx-splitter-far-collapse-button > span { transform: translate(-50%, -50%) rotate(180deg); } .jqx-splitter[orientation=horizontal] > .jqx-container > jqx-splitter-bar[item-collapsed] .jqx-splitter-near-collapse-button > span { transform: translate(-50%, -50%) rotate(0deg); } .jqx-splitter[orientation=horizontal] > .jqx-container > jqx-splitter-bar[show-near-button] .jqx-splitter-near-collapse-button, .jqx-splitter[orientation=horizontal] > .jqx-container > jqx-splitter-bar[show-far-button] .jqx-splitter-far-collapse-button { width: 20px; height: 100%; } .jqx-splitter[orientation=horizontal] > .jqx-container > .jqx-splitter-bar-feedback { width: 100%; min-height: 5px; height: var(--jqx-splitter-bar-size); } .jqx-splitter[orientation=horizontal] jqx-splitter-item[collapsed] { min-width: 0; min-height: 0; } .jqx-splitter[orientation=horizontal]:not([resize-mode=none]):not([readonly]) > .jqx-container > jqx-splitter-bar[hover]:not([locked]) { cursor: s-resize; } .jqx-splitter[orientation=horizontal][dragged] { cursor: s-resize; } .jqx-splitter[resize-mode=none] > .jqx-container > jqx-splitter-bar { cursor: default; } .jqx-splitter[disabled] > .jqx-container > jqx-splitter-bar { cursor: default; outline: none; border: none; box-shadow: none; } .jqx-splitter[orientation][disabled] > .jqx-container > jqx-splitter-bar { cursor: default; } .jqx-splitter[dragging-not-allowed] > .jqx-container > jqx-splitter-bar, .jqx-splitter[dragging-not-allowed] > .jqx-container > .jqx-splitter-bar-feedback { cursor: default; } .jqx-splitter:not([animation=none]) .jqx-splitter-near-collapse-button .jqx-arrow, .jqx-splitter:not([animation=none]) .jqx-splitter-far-collapse-button .jqx-arrow { transition: transform 0.2s ease-out; } .jqx-splitter:not([animation=none]) > .jqx-container > jqx-splitter-item.animate { transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); } .jqx-splitter[orientation-change]:not([animation=none]) > .jqx-container > jqx-splitter-item { transition: none; } .jqx-splitter[show-locked-items] > .jqx-container > jqx-splitter-item[locked] > .jqx-container:after { position: absolute; content: var(--jqx-icon-lock); font-family: var(--jqx-font-family-icon); opacity: 0.25; font-size: calc(2.5 * var(--jqx-splitter-font-size)); top: 50%; left: 50%; transform: translate(-50%, -50%); } .jqx-splitter[right-to-left] .jqx-splitter > .jqx-container { direction: initial; } .jqx-splitter[right-to-left] jqx-splitter-item > .jqx-container > .jqx-content { direction: rtl; } /* jqx-switch-button */ jqx-switch-button { width: var(--jqx-switch-button-default-width); height: var(--jqx-switch-button-default-height); } jqx-switch-button[orientation=vertical] { height: var(--jqx-switch-button-default-width); width: var(--jqx-switch-button-default-height); } jqx-switch-button.jqx-element { display: inline-block; border: none; background: none; overflow: visible; } .jqx-switch-button .jqx-thumb { border: var(--jqx-border-width) solid var(--jqx-border); border-radius: 100%; width: var(--jqx-switch-button-thumb-size); height: var(--jqx-switch-button-thumb-size); background-color: var(--jqx-surface); box-shadow: var(--jqx-elevation-2); align-self: center; position: relative; cursor: pointer; order: 2; pointer-events: all; } .jqx-switch-button .jqx-thumb:before { background-color: var(--jqx-primary); position: absolute; width: 200%; height: 200%; left: 50%; top: 50%; transition: 0.2s; display: block; border-radius: 100%; content: ""; transform: scale(0) translate(-50%, -50%); transform-origin: left top; opacity: 0.2; } .jqx-switch-button .jqx-thumb:active:before { animation: button-wave-effect 0.1s ease-in; transform: scale(1) translate(-50%, -50%); } .jqx-switch-button .jqx-container { font-size: inherit; position: relative; user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; touch-action: none; } .jqx-switch-button .jqx-container:before { content: ""; position: absolute; width: 90%; height: 50%; left: 5%; top: 25%; border-radius: 10px; background-color: var(--jqx-surface); } .jqx-switch-button .jqx-inner-container { width: calc(200% - var(--jqx-switch-button-thumb-size)); height: 100%; position: absolute; color: inherit; display: flex; flex-direction: row; justify-content: flex-start; pointer-events: none; left: 0; } .jqx-switch-button .jqx-true-content, .jqx-switch-button .jqx-false-content { font-size: inherit; font-weight: inherit; display: inline-block; text-align: center; box-sizing: border-box; color: inherit; } .jqx-switch-button .jqx-true-content-container, .jqx-switch-button .jqx-false-content-container { height: 100%; display: flex; justify-content: center; align-items: center; background-clip: content-box; padding: 2px 0px 2px 0px; color: inherit; overflow: hidden; order: 1; width: calc((100% - var(--jqx-switch-button-thumb-size)) / 2); } .jqx-switch-button .jqx-true-content-container { order: 1; } .jqx-switch-button .jqx-false-content-container { order: 3; } .jqx-switch-button:not([animation=none]) .jqx-container:before { transition: opacity 0.2s ease-in-out, background 0.2s ease-in-out; } .jqx-switch-button:not([animation=none]):not([dragged]):not([checked=null]) .jqx-inner-container { transition: left 0.2s ease-in-out; } .jqx-switch-button:not([animation=none])[orientation=vertical]:not([dragged]):not([checked=null]) .jqx-inner-container { transition: top 0.2s ease-in-out; } .jqx-switch-button[hover] { border-color: var(--jqx-ui-state-hover); } .jqx-switch-button:focus .jqx-thumb { background-color: var(--jqx-primary); border-color: var(--jqx-primary); } .jqx-switch-button:focus .jqx-thumb:before { transform: scale(1) translate(-50%, -50%); background-color: var(--jqx-primary); animation: button-wave-effect 0.1s ease-in; } .jqx-switch-button[readonly] { pointer-events: none; } .jqx-switch-button[disabled] .jqx-thumb:before { content: none; } .jqx-switch-button[checked] .jqx-thumb { background-color: var(--jqx-primary); border-color: var(--jqx-primary); } .jqx-switch-button[checked] .jqx-thumb:active:before { transform: scale(1) translate(-50%, -50%); background-color: var(--jqx-primary); } .jqx-switch-button[checked] .jqx-container:before { background-color: var(--jqx-primary); opacity: 0.4; } .jqx-switch-button[checked] .jqx-inner-container { left: calc(-1 * (100% - var(--jqx-switch-button-thumb-size))); } .jqx-switch-button[checked]:focus .jqx-thumb:before { transform: scale(1) translate(-50%, -50%); background-color: var(--jqx-primary); } .jqx-switch-button[checked][inverted] .jqx-inner-container { left: 0; } .jqx-switch-button[checked]:not([animation=none]) .jqx-thumb:active:before { animation: button-wave-effect 0.1s ease-in; } .jqx-switch-button[checked]:not([animation=none]):focus .jqx-thumb:before { animation: button-wave-effect 0.1s ease-in; } .jqx-switch-button[checked][orientation=vertical] .jqx-thumb { background-color: var(--jqx-primary); } .jqx-switch-button[checked][orientation=vertical] .jqx-thumb:active:before { transform: scale(1) translate(-50%, -50%); background-color: var(--jqx-primary); } .jqx-switch-button[checked][orientation=vertical] .jqx-container:before { background-color: var(--jqx-primary); opacity: 0.4; } .jqx-switch-button[checked][orientation=vertical]:focus .jqx-thumb:before { transform: scale(1) translate(-50%, -50%); background-color: var(--jqx-primary); } .jqx-switch-button[checked][orientation=vertical]:not([animation=none]) .jqx-thumb:active:before { animation: button-wave-effect 0.1s ease-in; } .jqx-switch-button[checked][orientation=vertical]:not([animation=none]):focus .jqx-thumb:before { animation: button-wave-effect 0.1s ease-in; } .jqx-switch-button[checked=null] .jqx-thumb { background-color: var(--jqx-surface); border-color: var(--jqx-border); } .jqx-switch-button[checked=null] .jqx-inner-container { left: calc(-50% + var(--jqx-switch-button-thumb-size) / 2); } .jqx-switch-button[checked=null] .jqx-true-content, .jqx-switch-button[checked=null] .jqx-false-content { visibility: hidden; } .jqx-switch-button[checked=null] .jqx-true-content-container, .jqx-switch-button[checked=null] .jqx-false-content-container { color: transparent; } .jqx-switch-button[checked=null][inverted] .jqx-inner-container { left: calc(-50% + var(--jqx-switch-button-thumb-size) / 2); } .jqx-switch-button[inverted] .jqx-inner-container { left: calc(-1 * (100% - var(--jqx-switch-button-thumb-size))); } .jqx-switch-button[inverted] .jqx-true-content-container { order: 3; } .jqx-switch-button[inverted] .jqx-false-content-container { order: 1; } .jqx-switch-button[orientation=vertical] .jqx-thumb { width: var(--jqx-switch-button-thumb-size); height: var(--jqx-switch-button-thumb-size); box-shadow: var(--jqx-elevation-2); } .jqx-switch-button[orientation=vertical] .jqx-thumb:before { border: var(--jqx-border-width) solid var(--jqx-border); } .jqx-switch-button[orientation=vertical] .jqx-thumb:active:before { animation: button-wave-effect 0.1s ease-in; transform: scale(1) translate(-50%, -50%); } .jqx-switch-button[orientation=vertical] .jqx-thumb:focus .jqx-thumb:before { transform: scale(1) translate(-50%, -50%); } .jqx-switch-button[orientation=vertical] .jqx-container:before { content: ""; position: absolute; width: 50%; height: 90%; left: 25%; top: 5%; border-radius: 10px; } .jqx-switch-button[orientation=vertical] .jqx-inner-container { height: calc(200% - var(--jqx-switch-button-thumb-size)); width: 100%; flex-direction: column; left: 0; top: 0; } .jqx-switch-button[orientation=vertical] .jqx-true-content-container, .jqx-switch-button[orientation=vertical] .jqx-false-content-container { width: 100%; padding: 0px 2px 0px 2px; height: calc((100% - var(--jqx-switch-button-thumb-size)) / 2); } .jqx-switch-button[orientation=vertical]:focus .jqx-thumb:before { animation: button-wave-effect 0.1s ease-in; } .jqx-switch-button[orientation=vertical][checked] .jqx-inner-container { left: 0; top: calc(-1 * (100% - var(--jqx-switch-button-thumb-size))); } .jqx-switch-button[orientation=vertical][checked][inverted] .jqx-inner-container { top: 0; } .jqx-switch-button[orientation=vertical][checked=null] .jqx-inner-container { top: calc(-50% + var(--jqx-switch-button-thumb-size) / 2); } .jqx-switch-button[orientation=vertical][checked=null][inverted] .jqx-inner-container { left: 0; top: calc(-50% + var(--jqx-switch-button-thumb-size) / 2); } .jqx-switch-button[orientation=vertical][inverted] .jqx-inner-container { left: 0; top: calc(-1 * (100% - var(--jqx-switch-button-thumb-size))); } @keyframes button-wave-effect { 0% { transform: scale(0.2) translate(-50%, -50%); } 50% { transform: scale(0.5) translate(-50%, -50%); } 100% { transform: scale(1) translate(-50%, -50%); } } .jqx-switch-button[right-to-left][checked]:not([orientation=vertical]) .jqx-inner-container { left: 0; } .jqx-switch-button[right-to-left][inverted]:not([orientation=vertical]) .jqx-inner-container { left: 0; } .jqx-switch-button[right-to-left][checked][inverted]:not([orientation=vertical]) .jqx-inner-container { left: calc(-1 * (100% - var(--jqx-switch-button-thumb-size))); } .jqx-switch-button[right-to-left]:not([orientation=vertical]) .jqx-inner-container { left: calc(-1 * (100% - var(--jqx-switch-button-thumb-size))); } .jqx-switch-button[right-to-left][checked=null]:not([orientation=vertical]) .jqx-inner-container { left: calc(-50% + var(--jqx-switch-button-thumb-size) / 2); } jqx-table table:not(.jqx-table-container) { display: none; } jqx-table tr.expanded .hierarchy-arrow { transform: rotate(180deg); } .jqx-table { display: block; border-radius: var(--jqx-border-top-left-radius) var(--jqx-border-top-right-radius) var(--jqx-border-bottom-right-radius) var(--jqx-border-bottom-left-radius); width: var(--jqx-table-default-width); height: var(--jqx-table-default-height); font-family: var(--jqx-font-family); font-size: var(--jqx-font-size); } .jqx-table > .jqx-container { border: var(--jqx-border-width) solid var(--jqx-border); position: relative; overflow: auto; border-radius: inherit; max-height: inherit; } .jqx-table .jqx-table { background-color: #fff; } .jqx-table table { table-layout: fixed; border-collapse: collapse; border-radius: inherit; } .jqx-table thead th { background-color: var(--jqx-background); color: var(--jqx-background-color); font-size: calc(var(--jqx-font-size) - 2px); border-bottom: var(--jqx-border-width) solid var(--jqx-border); text-align: left; font-weight: 500; } .jqx-table thead th[filter] { position: relative; } .jqx-table thead th[filter]::before { content: var(--jqx-icon-filter); font-family: var(--jqx-font-family-icon); font-style: normal; font-weight: normal; font-size: var(--jqx-arrow-size); color: inherit; text-decoration: inherit; font-variant: normal; text-transform: none; display: flex; flex-wrap: wrap; margin-top: 2px; align-items: center; justify-content: center; position: absolute; right: 10px; } .jqx-table thead th .sort-by { display: none; position: relative; visibility: hidden; width: 16px; height: 16px; user-select: none; opacity: 0; } .jqx-table thead th .sort-by:before { content: var(--jqx-icon-up); width: 100%; height: 100%; font-family: var(--jqx-font-family-icon); font-style: normal; font-weight: normal; font-size: var(--jqx-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; } .jqx-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(--jqx-primary); color: var(--jqx-primary-color); font-size: 8px; } .jqx-table thead th .sort-by.asc, .jqx-table thead th .sort-by.desc { display: inline-block; visibility: inherit; opacity: 1; } .jqx-table thead th .sort-by.desc:before { transform: rotateX(180deg); } .jqx-table thead th:not(.jqx-table-select-all) { opacity: 0.9; } .jqx-table thead th.freeze-near, .jqx-table thead th.freeze-far { opacity: 1; } .jqx-table thead tr { height: var(--jqx-table-column-header-height); } .jqx-table thead tr:first-child th { border-top: none; } .jqx-table tbody tr { height: var(--jqx-table-row-height); } .jqx-table tbody tr.last-visible { height: unset; } .jqx-table tbody tr.last-visible.sized { box-shadow: inset 0px var(--jqx-border-width) 0px 0px var(--jqx-border); } .jqx-table tbody + tbody { border-top: 2px solid var(--jqx-border); } .jqx-table tfoot tr { height: var(--jqx-table-row-height); } .jqx-table tfoot td { --jqx-surface: var(--jqx-background); --jqx-surface-color: var(--jqx-background-color); font-size: calc(var(--jqx-font-size) - 2px); background-color: var(--jqx-surface); color: var(--jqx-surface-color); } .jqx-table tr[row-id] td { white-space: nowrap; } .jqx-table th { padding-top: var(--jqx-table-cell-padding); padding-right: var(--jqx-table-cell-padding); padding-bottom: var(--jqx-table-cell-padding); padding-left: var(--jqx-table-cell-padding); vertical-align: middle; border-top-width: var(--jqx-border-width); border-top-style: solid; border-top-color: var(--jqx-border); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .jqx-table th:hover .column-menu, .jqx-table th[column-menu-button] .column-menu { overflow: hidden; text-overflow: ellipsis; position: absolute; right: 3px; width: 25px; height: 100%; } .jqx-table th:hover .column-menu:after, .jqx-table th[column-menu-button] .column-menu:after { content: var(--jqx-icon-arrow-down); font-family: var(--jqx-font-family-icon); width: 100%; cursor: pointer; color: var(--jqx-surface-color); font-size: 16px; font-weight: bold; } .jqx-table th > .wrapper { display: flex; align-items: center; overflow: hidden; position: relative; } .jqx-table th > .wrapper > .label { overflow: hidden; text-overflow: ellipsis; } .jqx-table th.jqx-table-select-all { width: calc(var(--jqx-check-box-default-size) * 3); } .jqx-table th.jqx-table-select-all.indeterminate > div { background-color: var(--jqx-primary); } .jqx-table th.jqx-table-select-all.indeterminate > div:after { content: ""; position: absolute; width: calc(0.5 * var(--jqx-check-box-default-size)); height: calc(0.5 * var(--jqx-check-box-default-size)); background-color: var(--jqx-primary-color); } .jqx-table th.column-header { text-align: center; border-bottom: none; } .jqx-table th.column-header:empty { border-top: none; } .jqx-table td { padding-top: var(--jqx-table-cell-padding); padding-right: var(--jqx-table-cell-padding); padding-bottom: var(--jqx-table-cell-padding); padding-left: var(--jqx-table-cell-padding); vertical-align: middle; border-top-width: var(--jqx-border-width); border-top-style: solid; border-top-color: var(--jqx-border); overflow: hidden; text-overflow: ellipsis; } .jqx-table td div { font-size: var(--jqx-font-size); padding: 0; margin: 0; line-height: initial; } .jqx-table td span { line-height: initial; } .jqx-table td.no-edit { background-color: rgba(0, 0, 0, 0.02); } .jqx-table td.indeterminate > div { background-color: var(--jqx-primary); } .jqx-table td.indeterminate > div:after { content: ""; position: absolute; width: calc(0.5 * var(--jqx-check-box-default-size)); height: calc(0.5 * var(--jqx-check-box-default-size)); background-color: var(--jqx-primary-color); } .jqx-table td.editing { padding: 0; } .jqx-table td.editing .jqx-table-editor { width: 100%; height: 100%; } .jqx-table td.editing .jqx-table-editor.standard { border: var(--jqx-border-width) solid var(--jqx-border); padding: var(--jqx-table-cell-padding); font-family: inherit; font-size: inherit; box-shadow: none; } .jqx-table td.editing .jqx-table-editor.standard:focus { border: var(--jqx-border-width) solid var(--jqx-border); outline: none; } .jqx-table td.group-header > div { display: flex; flex-direction: row; align-items: center; } .jqx-table td.tree-cell > div { display: flex; flex-direction: row; align-items: center; } .jqx-table td.tree-cell > div div:nth-child(2) { width: calc(100% - var(--jqx-table-arrow-margin) - var(--jqx-table-arrow-size)); overflow: hidden; text-overflow: ellipsis; line-height: 1.2; } .jqx-table td.editing.invalid { position: relative; overflow: visible; } .jqx-table td.editing.invalid:before { content: attr(validation-message); visibility: hidden; position: absolute; top: -100%; border-top-left-radius: var(--jqx-border-top-left-radius); border-top-right-radius: var(--jqx-border-top-right-radius); border-bottom-left-radius: var(--jqx-border-bottom-left-radius); border-bottom-right-radius: var(--jqx-border-bottom-right-radius); padding: 7px; background-color: var(--jqx-error); color: var(--jqx-secondary-color); font-size: calc(var(--jqx-font-size) - 4px); opacity: 0; transform: scale(0); } .jqx-table td.editing.invalid:hover:before { visibility: visible; opacity: 0.7; transform: scale(1); } .jqx-table td.editing.invalid .jqx-table-editor { border-color: var(--jqx-error); } .jqx-table th.jqx-table-select-all:hover, .jqx-table td.jqx-table-select-row:hover { z-index: 99; overflow: visible; } .jqx-table th.jqx-table-select-all > div, .jqx-table td.jqx-table-select-row > div { display: flex; align-items: center; justify-content: center; position: absolute; left: 50%; transform: translate(-50%, -50%); border: var(--jqx-border-width) solid var(--jqx-border); width: var(--jqx-check-box-default-size); height: var(--jqx-check-box-default-size); padding: 8px; color: var(--jqx-primary-color); font-family: var(--jqx-font-family-icon); cursor: pointer; border-radius: var(--jqx-border-radius); } .jqx-table th.jqx-table-select-all > div:before, .jqx-table td.jqx-table-select-row > div:before { content: ""; position: absolute; border-radius: 50%; width: 100%; height: 100%; background-color: var(--jqx-secondary); opacity: 0.1; transform: scale(0); transform-origin: center; } .jqx-table th.jqx-table-select-all > div:hover:before, .jqx-table td.jqx-table-select-row > div:hover:before { transform: scale(2.5); } .jqx-table th.jqx-table-select-all > div:hover:active:before, .jqx-table td.jqx-table-select-row > div:hover:active:before { background-color: var(--jqx-primary); animation-name: active; animation-duration: 0.2s; animation-timing-function: ease-out; animation-iteration-count: 1; } .jqx-table th.jqx-table-select-all.selected > div, .jqx-table td.jqx-table-select-row.selected > div { border-color: var(--jqx-primary); background-color: var(--jqx-primary); } .jqx-table th.jqx-table-select-all.selected > div:after, .jqx-table td.jqx-table-select-row.selected > div:after { content: var(--jqx-icon-check); } .jqx-table th.jqx-table-select-all.selected > div:before, .jqx-table td.jqx-table-select-row.selected > div:before { background-color: var(--jqx-primary); } .jqx-table .jqx-table-select-all.freeze-near { background-color: var(--jqx-background); color: var(--jqx-background-color); } .jqx-table jqx-pager.jqx-element { display: none; min-width: 0; height: var(--jqx-table-header-footer-height); background-color: var(--jqx-background); border-left: none; border-right: none; border-bottom: none; position: sticky; left: 0; bottom: 0; } .jqx-table jqx-pager > .jqx-container { justify-content: flex-end; } .jqx-table jqx-pager .jqx-pager-near-buttons-container { font-size: calc(var(--jqx-font-size) * 2); } .jqx-table jqx-pager .jqx-pager-near-buttons-container.near { order: 2; } .jqx-table jqx-pager .jqx-pager-near-buttons-container.far { order: 3; } .jqx-table jqx-pager .jqx-pager-far-buttons-container { font-size: calc(var(--jqx-font-size) * 2); } .jqx-table jqx-pager .jqx-pager-size-selector-and-label-container { order: 0; } .jqx-table jqx-pager .jqx-pager-label { font-size: calc(var(--jqx-font-size) - 2px); opacity: 0.7; } .jqx-table jqx-pager .jqx-pager-summary-container.jqx-pager-label { order: 1; margin: 0 32px 0 24px; } .jqx-table jqx-pager .jqx-pager-button:before { content: attr(tooltip); visibility: hidden; position: absolute; top: -125%; border-top-left-radius: var(--jqx-border-top-left-radius); border-top-right-radius: var(--jqx-border-top-right-radius); border-bottom-left-radius: var(--jqx-border-bottom-left-radius); border-bottom-right-radius: var(--jqx-border-bottom-right-radius); padding: 7px; background-color: var(--jqx-secondary); color: var(--jqx-secondary-color); font-size: calc(var(--jqx-font-size) - 4px); opacity: 0; transform: scale(0); } .jqx-table jqx-pager .jqx-pager-button:hover:before { visibility: visible; opacity: 0.7; transform: scale(1); } .jqx-table .jqx-pager .jqx-pager-button { overflow: visible; } .jqx-table .jqx-table-container:focus { outline: none; } .jqx-table .jqx-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(--jqx-ui-state-color-focus); } .jqx-table .jqx-table-container:focus td[focus]:not(.freeze-near):not(.freeze-far) { position: relative; } .jqx-table .jqx-table-header { height: var(--jqx-table-header-footer-height); display: none; position: sticky; left: 0; top: 0; background-color: var(--jqx-background); z-index: 2; } .jqx-table .jqx-table-header .jqx-input { display: none; width: 100%; height: 100%; } .jqx-table .jqx-table-header .jqx-table-filter-template-container { display: none; width: 100%; height: 100%; } .jqx-table .jqx-table-header .jqx-table-toolbar-button.conditional-formatting { display: none; border: var(--jqx-border-width) solid var(--jqx-border); border-top: none; border-right: none; width: var(--jqx-table-header-footer-height); height: 100%; } .jqx-table .jqx-table-header .jqx-table-toolbar-button.conditional-formatting:before { left: unset; right: 0; } .jqx-table .jqx-table-toolbar-button { --jqx-border-top-left-radius: 0; --jqx-border-top-right-radius: 0; --jqx-border-bottom-left-radius: 0; --jqx-border-bottom-right-radius: 0; --jqx-button-padding: 0; position: relative; border-top: none; border-bottom: none; overflow: visible; min-height: 0; } .jqx-table .jqx-table-toolbar-button:before { content: attr(tooltip); visibility: hidden; position: absolute; border-top-left-radius: var(--jqx-border-top-left-radius); border-top-right-radius: var(--jqx-border-top-right-radius); border-bottom-left-radius: var(--jqx-border-bottom-left-radius); border-bottom-right-radius: var(--jqx-border-bottom-right-radius); padding: 7px; background-color: var(--jqx-secondary); color: var(--jqx-secondary-color); font-size: calc(var(--jqx-font-size) - 4px); opacity: 0; transform: scale(0); box-sizing: border-box; top: 125%; left: calc(-1 * var(--jqx-table-row-height) / 2); width: calc(2 * var(--jqx-table-row-height)); white-space: normal; word-wrap: break-word; text-transform: none; z-index: 1000; } .jqx-table .jqx-table-toolbar-button:after { content: var(--jqx-icon-table); display: flex; align-items: center; justify-content: center; position: absolute; width: 100%; height: 100%; font-size: 20px; font-family: "jqx-icons"; pointer-events: none; opacity: 0.4; } .jqx-table .jqx-table-toolbar-button:hover:before { visibility: visible; opacity: 0.7; transform: scale(1); } .jqx-table .jqx-table-toolbar-button > button { overflow: hidden; } .jqx-table .jqx-table-toolbar-button.conditional-formatting > button:after { display: flex; align-items: center; justify-content: center; position: absolute; width: 100%; height: 100%; font-family: "jqx-icons"; pointer-events: none; content: var(--jqx-icon-less-than-equal); font-size: 16px; top: 8px; left: 8px; opacity: 1; } .jqx-table .jqx-table-toolbar-button.fields { border-right: none; } .jqx-table .jqx-table-toolbar-button.fields:before { left: unset; right: 0; width: calc(2 * var(--jqx-table-row-height)); } .jqx-table .jqx-table-toolbar-button.fields > button:after { display: flex; align-items: center; justify-content: center; position: absolute; width: 100%; height: 100%; font-family: "jqx-icons"; pointer-events: none; font-size: 16px; top: 8px; left: 8px; opacity: 1; content: var(--jqx-icon-settings); } .jqx-table .jqx-table-filter-row jqx-button { --jqx-button-padding: 0; } .jqx-table .jqx-table-filter-row jqx-button button:after { content: var(--jqx-icon-filter); font-family: var(--jqx-font-family-icon); width: 100%; height: 100%; text-decoration: line-through; } .jqx-table .jqx-table-filter-row > td > div { --jqx-filter-row-content-height: calc(var(--jqx-table-row-height) - 2 * var(--jqx-table-cell-padding) - var(--jqx-border-width)); display: grid; grid-template-columns: 1fr var(--jqx-filter-row-content-height) var(--jqx-filter-row-content-height); grid-template-rows: 100%; column-gap: 2px; height: var(--jqx-filter-row-content-height); } .jqx-table .jqx-table-filter-row > td.no-filter { opacity: 0.6; pointer-events: none; } .jqx-table .jqx-table-filter-row .filter-value { min-width: 0; border: var(--jqx-border-width) solid var(--jqx-border); border-top-right-radius: var(--jqx-border-top-right-radius); border-top-left-radius: var(--jqx-border-top-left-radius); border-bottom-left-radius: var(--jqx-border-bottom-left-radius); border-bottom-right-radius: var(--jqx-border-bottom-right-radius); padding: var(--jqx-editor-label-padding); background-color: var(--jqx-background); color: var(--jqx-background-color); font-family: inherit; font-size: inherit; } .jqx-table .jqx-table-filter-row .filter-value:hover { border-color: var(--jqx-ui-state-border-hover); } .jqx-table .jqx-table-filter-row .filter-value:focus { outline: none; border-color: var(--jqx-outline); } .jqx-table .jqx-table-filter-row .filter-value[type=number] { -webkit-appearance: none; -moz-appearance: textfield; } .jqx-table .jqx-table-filter-row .filter-value::-webkit-outer-spin-button, .jqx-table .jqx-table-filter-row .filter-value::-webkit-inner-spin-button { -webkit-appearance: none; -moz-appearance: textfield; } .jqx-table .jqx-table-filter-row .jqx-input { --jqx-editor-addon-width: 100%; --jqx-editor-label-padding: 0; width: unset; height: 100%; } .jqx-table .jqx-table-filter-row .jqx-input .jqx-drop-down-button { border-top-left-radius: var(--jqx-border-top-left-radius); border-bottom-left-radius: var(--jqx-border-bottom-left-radius); } .jqx-table .jqx-table-filter-row .jqx-input .jqx-drop-down-button .arrow:after { content: var(--jqx-icon-filter); transform: none !important; } .jqx-table .jqx-table-row-detail { height: var(--jqx-table-row-detail-height); } .jqx-table .jqx-table-row-detail > td { border: none; padding: 0; } .jqx-table .jqx-table-row-detail .jqx-table-detail-container { height: calc(var(--jqx-table-row-detail-height) - 2 * var(--jqx-table-cell-padding)); padding: 0 var(--jqx-table-cell-padding); overflow: hidden; } .jqx-table .jqx-table-row-detail.collapsed { height: 0; } .jqx-table .jqx-table-row-detail.collapsed .jqx-table-detail-container { height: 0; padding-top: 0; padding-bottom: 0; } .jqx-table .jqx-table-cell-template { overflow: hidden; text-overflow: ellipsis; display: contents; } .jqx-table .disable-select td.jqx-table-select-row > div { pointer-events: none; opacity: 0.2; } .jqx-table .dragged { position: relative; } .jqx-table .drop-column { position: relative; } .jqx-table .drop-column:after { content: ""; position: absolute; width: 2px; height: 100%; background-color: var(--jqx-primary); top: 0; } .jqx-table .drop-column.left:after { left: 0; } .jqx-table .drop-column.right:after { right: 0; } .jqx-table .freeze-near { position: sticky; opacity: 1; z-index: 1; background-color: var(--jqx-background); color: var(--jqx-background-color); left: 0; box-shadow: 1px 0px 0px 0px var(--jqx-border); } .jqx-table .freeze-far { position: sticky; opacity: 1; z-index: 1; background-color: var(--jqx-background); color: var(--jqx-background-color); right: 0; box-shadow: -1px 0px 0px 0px var(--jqx-border); } .jqx-table .jqx-table-virtualization-container { width: 100%; height: 100%; border: none; padding: 0; } .jqx-table .jqx-table-virtualization-container .jqx-scroll-viewer-content-container { padding: 0; } .jqx-table .hierarchy-arrow { margin-right: var(--jqx-table-arrow-margin); width: var(--jqx-table-arrow-size); cursor: pointer; } .jqx-table .group-label-name { display: var(--jqx-table-group-name-display); } .jqx-table .group-label-value { font-weight: bold; } .jqx-table .group-label-count { display: var(--jqx-table-group-count-display); } .jqx-table .outline-level-1 { padding-left: var(--jqx-table-indent); } .jqx-table .outline-level-1.tree-leaf { padding-left: calc(var(--jqx-table-indent) + var(--jqx-table-arrow-size) + var(--jqx-table-arrow-margin)); } .jqx-table .outline-level-2 { padding-left: calc(2 * var(--jqx-table-indent)); } .jqx-table .outline-level-2.tree-leaf { padding-left: calc(2 * var(--jqx-table-indent) + var(--jqx-table-arrow-size) + var(--jqx-table-arrow-margin)); } .jqx-table .outline-level-3 { padding-left: calc(3 * var(--jqx-table-indent)); } .jqx-table .outline-level-3.tree-leaf { padding-left: calc(3 * var(--jqx-table-indent) + var(--jqx-table-arrow-size) + var(--jqx-table-arrow-margin)); } .jqx-table .outline-level-4 { padding-left: calc(4 * var(--jqx-table-indent)); } .jqx-table .outline-level-4.tree-leaf { padding-left: calc(4 * var(--jqx-table-indent) + var(--jqx-table-arrow-size) + var(--jqx-table-arrow-margin)); } .jqx-table .outline-level-5 { padding-left: calc(5 * var(--jqx-table-indent)); } .jqx-table .outline-level-5.tree-leaf { padding-left: calc(5 * var(--jqx-table-indent) + var(--jqx-table-arrow-size) + var(--jqx-table-arrow-margin)); } .jqx-table .outline-level-6 { padding-left: calc(6 * var(--jqx-table-indent)); } .jqx-table .outline-level-6.tree-leaf { padding-left: calc(6 * var(--jqx-table-indent) + var(--jqx-table-arrow-size) + var(--jqx-table-arrow-margin)); } .jqx-table .outline-level-7 { padding-left: calc(7 * var(--jqx-table-indent)); } .jqx-table .outline-level-7.tree-leaf { padding-left: calc(7 * var(--jqx-table-indent) + var(--jqx-table-arrow-size) + var(--jqx-table-arrow-margin)); } .jqx-table .outline-level-8 { padding-left: calc(8 * var(--jqx-table-indent)); } .jqx-table .outline-level-8.tree-leaf { padding-left: calc(8 * var(--jqx-table-indent) + var(--jqx-table-arrow-size) + var(--jqx-table-arrow-margin)); } .jqx-table .outline-level-9 { padding-left: calc(9 * var(--jqx-table-indent)); } .jqx-table .outline-level-9.tree-leaf { padding-left: calc(9 * var(--jqx-table-indent) + var(--jqx-table-arrow-size) + var(--jqx-table-arrow-margin)); } .jqx-table .outline-level-10 { padding-left: calc(10 * var(--jqx-table-indent)); } .jqx-table .outline-level-10.tree-leaf { padding-left: calc(10 * var(--jqx-table-indent) + var(--jqx-table-arrow-size) + var(--jqx-table-arrow-margin)); } .jqx-table.thead-dark table th { color: #fff; background-color: #212529; border-color: #32383e; } .jqx-table.thead-dark thead th .sort-by::before { color: #fff; } .jqx-table.thead-primary table th { color: var(--jqx-primary-color); background-color: var(--jqx-primary); border-color: var(--jqx-primary); } .jqx-table.thead-primary th.jqx-table-select-all > div { border-color: var(--jqx-primary-color); } .jqx-table.thead-primary th.jqx-table-select-all.selected > div { border-color: var(--jqx-primary-color); } .jqx-table.thead-primary th.jqx-table-select-all.indeterminate > div { background-color: var(--jqx-primary-color); } .jqx-table.thead-secondary table th { color: var(--jqx-secondary-color); background-color: var(--jqx-secondary); border-color: var(--jqx-secondary); } .jqx-table.thead-surface table th { color: var(--jqx-surface-color); background-color: var(--jqx-surface); border-color: var(--jqx-surface); } .jqx-table.thead-light table th { color: #495057; background-color: #e9ecef; border-color: #dee2e6; } .jqx-table.table-dark table { color: #fff; background-color: #212529; } .jqx-table.table-dark table th, .jqx-table.table-dark table td, .jqx-table.table-dark table thead th { border-color: #32383e; } .jqx-table.table-dark thead th .sort-by::before { color: #fff; } .jqx-table.table-dark.table-bordered table { border: 0; } .jqx-table.table-dark.table-striped table tbody tr:nth-of-type(odd) { background-color: rgba(255, 255, 255, 0.05); } .jqx-table.table-dark.table-hover table tbody tr:hover { background-color: rgba(255, 255, 255, 0.075); } .jqx-table.table-bordered table { border: var(--jqx-border-width) solid var(--jqx-border); } .jqx-table.table-bordered table thead th, .jqx-table.table-bordered table thead td { border-bottom-width: 2px; } .jqx-table.table-bordered table th, .jqx-table.table-bordered table td { border: var(--jqx-border-width) solid var(--jqx-border); } .jqx-table.table-striped table tbody tr:nth-of-type(odd) { background-color: rgba(0, 0, 0, 0.05); } .jqx-table.table-hover table tbody tr:hover { background-color: rgba(0, 0, 0, 0.075); } .jqx-table.table-hover table .jqx-table-primary:hover { background-color: #9fcdff; } .jqx-table.table-hover table .jqx-table-primary:hover > td, .jqx-table.table-hover table .jqx-table-primary:hover > th { background-color: #9fcdff; } .jqx-table.table-hover table .jqx-table-secondary:hover { background-color: #c8cbcf; } .jqx-table.table-hover table .jqx-table-secondary:hover > td, .jqx-table.table-hover table .jqx-table-secondary:hover > th { background-color: #c8cbcf; } .jqx-table.table-hover table .jqx-table-success:hover { background-color: #b1dfbb; } .jqx-table.table-hover table .jqx-table-success:hover > td, .jqx-table.table-hover table .jqx-table-success:hover > th { background-color: #b1dfbb; } .jqx-table.table-hover table .jqx-table-info:hover { background-color: #abdde5; } .jqx-table.table-hover table .jqx-table-info:hover > td, .jqx-table.table-hover table .jqx-table-info:hover > th { background-color: #abdde5; } .jqx-table.table-hover table .jqx-table-warning:hover { background-color: #ffe8a1; } .jqx-table.table-hover table .jqx-table-warning:hover > td, .jqx-table.table-hover table .jqx-table-warning:hover > th { background-color: #ffe8a1; } .jqx-table.table-hover table .jqx-table-danger:hover { background-color: #f1b0b7; } .jqx-table.table-hover table .jqx-table-danger:hover > td, .jqx-table.table-hover table .jqx-table-danger:hover > th { background-color: #f1b0b7; } .jqx-table.table-hover table .jqx-table.table-light table:hover { background-color: #ececf6; } .jqx-table.table-hover table .jqx-table.table-light table:hover > td, .jqx-table.table-hover table .jqx-table.table-light table:hover > th { background-color: #ececf6; } .jqx-table.table-hover table .jqx-table.table-dark table:hover { background-color: #b9bbbe; } .jqx-table.table-hover table .jqx-table.table-dark table:hover > td, .jqx-table.table-hover table .jqx-table.table-dark table:hover > th { background-color: #b9bbbe; } .jqx-table.table-hover table .jqx-table-active:hover { background-color: rgba(0, 0, 0, 0.075); } .jqx-table.table-hover table .jqx-table-active:hover > td, .jqx-table.table-hover table .jqx-table-active:hover > th { background-color: rgba(0, 0, 0, 0.075); } .jqx-table.no-border > .jqx-container { border: none; } .jqx-table.table-elevation { border: none; border-radius: unset; box-shadow: var(--jqx-elevation-8); } .jqx-table:not([animation=none]) thead th .sort-by { transition: visibility 0.5s ease-out, opacity 0.5s ease-out; } .jqx-table:not([animation=none]) thead th .sort-by:before { transition: transform 0.5s ease-out; } .jqx-table:not([animation=none]) tr[row-id] td:not(.editing) { transition: padding-top 0.2s ease-in-out, padding-bottom 0.2s ease-in-out, transform 0.2s ease-in-out, border-top-color 0.2s ease-in-out; } .jqx-table:not([animation=none]) td.editing.invalid:before { transition: visibility 0.2s ease-in-out, opacity 0.2s ease-out, transform 0.1s ease-out; } .jqx-table:not([animation=none]) jqx-pager .jqx-pager-button:before { transition: visibility 0.2s ease-out, opacity 0.2s ease-out, transform 0.1s ease-out; } .jqx-table:not([animation=none]) .jqx-table-toolbar-button:before { transition: visibility 0.2s ease-out, opacity 0.2s ease-out, transform 0.1s ease-out; } .jqx-table:not([animation=none]) .hierarchy-arrow { transition: transform 0.2s ease-in-out; } .jqx-table:not([animation=none]):not([ignore-detail-animation]) .jqx-table-row-detail { transition: height 0.2s ease-in-out; } .jqx-table:not([animation=none]):not([ignore-detail-animation]) .jqx-table-row-detail .jqx-table-detail-container { transition: height 0.2s ease-in-out, padding-top 0.2s ease-in-out, padding-bottom 0.2s ease-in-out; } .jqx-table[virtualization] { --jqx-table-default-height: var(--jqx-grid-default-height); } .jqx-table[filtering] .jqx-table-header { display: grid; grid-template-columns: 1fr; } .jqx-table[filtering] .jqx-table-header .jqx-input { display: block; } .jqx-table[filtering] .jqx-table-header .jqx-table-filter-template-container { display: block; } .jqx-table[filtering]:not([filter-row]):not([column-menu]) .jqx-table-container { height: calc(100% - var(--jqx-table-header-footer-height)); } .jqx-table[filtering]:not([filter-row]):not([column-menu]) .jqx-table-virtualization-container { height: calc(100% - var(--jqx-table-header-footer-height)); } .jqx-table[filtering][filter-row][conditional-formatting-button] .jqx-table-header .jqx-input { display: none; } .jqx-table[filtering][filter-row][conditional-formatting-button] .jqx-table-header .jqx-table-filter-template-container { display: none; } .jqx-table[filtering][conditional-formatting-button] .jqx-table-header { grid-template-columns: 1fr auto; } .jqx-table[conditional-formatting-button] .jqx-table-container { height: calc(100% - var(--jqx-table-header-footer-height)); } .jqx-table[conditional-formatting-button] .jqx-table-virtualization-container { height: calc(100% - var(--jqx-table-header-footer-height)); } .jqx-table[conditional-formatting-button] .jqx-table-header { display: grid; } .jqx-table[conditional-formatting-button] .jqx-table-header .jqx-table-toolbar-button.conditional-formatting { display: flex; } .jqx-table[conditional-formatting-button]:not([filtering]) .jqx-table-header { grid-template-columns: 1fr auto; grid-template-areas: ". button"; } .jqx-table[conditional-formatting-button]:not([filtering]) .jqx-table-header .jqx-table-toolbar-button.conditional-formatting { grid-area: button; } .jqx-table[conditional-formatting-button][filtering][filter-row] .jqx-table-header { grid-template-columns: 1fr auto; grid-template-areas: ". button"; } .jqx-table[conditional-formatting-button][filtering][filter-row] .jqx-table-header .jqx-table-toolbar-button.conditional-formatting { grid-area: button; } .jqx-table[paging]:not(.jqx-pivot-table) jqx-pager { display: block; z-index: 1; } .jqx-table[paging]:not(.jqx-pivot-table) .jqx-table-container { height: calc(100% - var(--jqx-table-header-footer-height)); } .jqx-table[paging]:not(.jqx-pivot-table) .jqx-table-virtualization-container { height: calc(100% - var(--jqx-table-header-footer-height)); } .jqx-table[paging]:not(.jqx-pivot-table)[filtering]:not([filter-row]) .jqx-table-container { height: calc(100% - 2 * var(--jqx-table-header-footer-height)); } .jqx-table[paging]:not(.jqx-pivot-table)[filtering]:not([filter-row]) .jqx-table-virtualization-container { height: calc(100% - 2 * var(--jqx-table-header-footer-height)); } .jqx-table[paging]:not(.jqx-pivot-table)[conditional-formatting-button] .jqx-table-container { height: calc(100% - 2 * var(--jqx-table-header-footer-height)); } .jqx-table[paging]:not(.jqx-pivot-table)[conditional-formatting-button] .jqx-table-virtualization-container { height: calc(100% - 2 * var(--jqx-table-header-footer-height)); } .jqx-table[paging].jqx-pivot-table jqx-pager { display: block; z-index: 999; } .jqx-table[paging].jqx-pivot-table [designer] jqx-pager { border-right: 1px solid var(--jqx-border); } .jqx-table[column-reorder] thead th { touch-action: none; } .jqx-table[column-reorder] th[data-field] { cursor: move; } .jqx-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, 0.1) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.1) 75%, transparent 75%, transparent); background-size: 3em 3em; opacity: 0.8; } .jqx-table[column-resize] thead th { touch-action: none; } .jqx-table[column-resize] th[data-field]:before, .jqx-table[column-resize] th[data-field]:after { content: ""; position: absolute; top: 0; width: 5px; height: 100%; cursor: col-resize; } .jqx-table[column-resize] th[data-field]:before { left: 0; } .jqx-table[column-resize] th[data-field]:after { right: 0; width: 4px; } .jqx-table[column-resize]:not([freeze-header]) th[data-field]:not(.freeze-near):not(.freeze-far) { position: relative; } .jqx-table[column-resize]:not([selection]) th[data-field]:first-child:before { content: none; } .jqx-table[column-resize]:not([right-to-left]) th[locked]:after { content: none; } .jqx-table[column-resize]:not([right-to-left]) th[locked] + th[data-field]:before { content: none; } @media (hover: none) { .jqx-table[column-resize]:not(.resizing) th[data-field]:before { border-left: 1px solid rgba(var(--jqx-primary-rgb), 0.3); } .jqx-table[column-resize]:not(.resizing) th[data-field]:after { border-right: 1px solid rgba(var(--jqx-primary-rgb), 0.3); } } @media (hover: hover) { .jqx-table[column-resize]:not(.resizing) th[data-field]:hover:before { border-left: 1px solid rgba(var(--jqx-primary-rgb), 0.3); } .jqx-table[column-resize]:not(.resizing) th[data-field]:hover:after { border-right: 1px solid rgba(var(--jqx-primary-rgb), 0.3); } } .jqx-table[column-resize][selection] th[data-field]:nth-child(2):before { content: none; } .jqx-table[column-resize][resize-max-reached] th[data-field]:before { content: none; } .jqx-table[column-resize][resize-max-reached] th[data-field]:after { content: none; } .jqx-table[sort-mode=many] thead th .sort-by:after { content: attr(order); } .jqx-table[loading] tbody td { opacity: 0; } .jqx-table[loading] jqx-pager { pointer-events: none; } .jqx-table[freeze-header]:not([virtualization]) thead th { position: sticky; opacity: 1; border-bottom: none; top: 0; box-shadow: 0px 1px 0px 0px var(--jqx-border); z-index: 100; } .jqx-table[freeze-header]:not([virtualization]) thead th.freeze-near { box-shadow: 1px 1px 0px 0px var(--jqx-border); z-index: 200; } .jqx-table[freeze-header]:not([virtualization]) thead th.freeze-far { box-shadow: -1px 1px 0px 0px var(--jqx-border); z-index: 200; } .jqx-table[freeze-header]:not([virtualization]) thead tr:nth-child(2) > th { top: var(--jqx-table-column-header-height); } .jqx-table[freeze-header]:not([virtualization]) thead tr:nth-child(3) > th { top: calc(2 * var(--jqx-table-column-header-height)); } .jqx-table[freeze-header]:not([virtualization]) thead tr:nth-child(4) > th { top: calc(3 * var(--jqx-table-column-header-height)); } .jqx-table[freeze-header]:not([virtualization]) thead tr:nth-child(5) > th { top: calc(4 * var(--jqx-table-column-header-height)); } .jqx-table[freeze-header]:not([virtualization])[filtering]:not([filter-row]):not([column-menu]) thead th, .jqx-table[freeze-header]:not([virtualization])[conditional-formatting-button] thead th { top: var(--jqx-table-header-footer-height); } .jqx-table[freeze-header]:not([virtualization])[filtering]:not([filter-row]):not([column-menu]) thead tr:nth-child(2) > th, .jqx-table[freeze-header]:not([virtualization])[conditional-formatting-button] thead tr:nth-child(2) > th { top: calc(var(--jqx-table-header-footer-height) + var(--jqx-table-column-header-height)); } .jqx-table[freeze-header]:not([virtualization])[filtering]:not([filter-row]):not([column-menu]) thead tr:nth-child(3) > th, .jqx-table[freeze-header]:not([virtualization])[conditional-formatting-button] thead tr:nth-child(3) > th { top: calc(var(--jqx-table-header-footer-height) + 2 * var(--jqx-table-column-header-height)); } .jqx-table[freeze-header]:not([virtualization])[filtering]:not([filter-row]):not([column-menu]) thead tr:nth-child(4) > th, .jqx-table[freeze-header]:not([virtualization])[conditional-formatting-button] thead tr:nth-child(4) > th { top: calc(var(--jqx-table-header-footer-height) + 3 * var(--jqx-table-column-header-height)); } .jqx-table[freeze-header]:not([virtualization])[filtering]:not([filter-row]):not([column-menu]) thead tr:nth-child(5) > th, .jqx-table[freeze-header]:not([virtualization])[conditional-formatting-button] thead tr:nth-child(5) > th { top: calc(var(--jqx-table-header-footer-height) + 4 * var(--jqx-table-column-header-height)); } .jqx-table[freeze-header][virtualization] thead { box-shadow: 0px 1px 0px 0px var(--jqx-border); top: 0; position: relative; z-index: 200; } .jqx-table[freeze-header][virtualization] thead th { opacity: 1; border-bottom: none; top: 0; box-shadow: 0px 1px 0px 0px var(--jqx-border); z-index: 100; position: relative; } .jqx-table[freeze-header][virtualization] thead th.sticky { position: sticky; } .jqx-table[freeze-header][virtualization] thead th.freeze-near { box-shadow: 1px 1px 0px 0px var(--jqx-border); z-index: 200; } .jqx-table[freeze-header][virtualization] thead th.freeze-far { box-shadow: -1px 1px 0px 0px var(--jqx-border); z-index: 200; } .jqx-table[freeze-header][virtualization] thead tr:nth-child(2) > th { top: var(--jqx-table-column-header-height); } .jqx-table[freeze-header][virtualization] thead tr:nth-child(3) > th { top: calc(2 * var(--jqx-table-column-header-height)); } .jqx-table[freeze-header][virtualization] thead tr:nth-child(4) > th { top: calc(3 * var(--jqx-table-column-header-height)); } .jqx-table[freeze-header][virtualization] thead tr:nth-child(5) > th { top: calc(4 * var(--jqx-table-column-header-height)); } .jqx-table[freeze-header][virtualization][filtering]:not([filter-row]):not([column-menu]) thead th, .jqx-table[freeze-header][virtualization][conditional-formatting-button] thead th { top: var(--jqx-table-header-footer-height); } .jqx-table[freeze-header][virtualization][filtering]:not([filter-row]):not([column-menu]) thead tr:nth-child(2) > th, .jqx-table[freeze-header][virtualization][conditional-formatting-button] thead tr:nth-child(2) > th { top: calc(var(--jqx-table-header-footer-height) + var(--jqx-table-column-header-height)); } .jqx-table[freeze-header][virtualization][filtering]:not([filter-row]):not([column-menu]) thead tr:nth-child(3) > th, .jqx-table[freeze-header][virtualization][conditional-formatting-button] thead tr:nth-child(3) > th { top: calc(var(--jqx-table-header-footer-height) + 2 * var(--jqx-table-column-header-height)); } .jqx-table[freeze-header][virtualization][filtering]:not([filter-row]):not([column-menu]) thead tr:nth-child(4) > th, .jqx-table[freeze-header][virtualization][conditional-formatting-button] thead tr:nth-child(4) > th { top: calc(var(--jqx-table-header-footer-height) + 3 * var(--jqx-table-column-header-height)); } .jqx-table[freeze-header][virtualization][filtering]:not([filter-row]):not([column-menu]) thead tr:nth-child(5) > th, .jqx-table[freeze-header][virtualization][conditional-formatting-button] thead tr:nth-child(5) > th { top: calc(var(--jqx-table-header-footer-height) + 4 * var(--jqx-table-column-header-height)); } .jqx-table[freeze-footer] tfoot td { position: sticky; opacity: 1; border-top: none; bottom: 0; box-shadow: 0px -1px 0px 0px var(--jqx-border); z-index: 100; } .jqx-table[freeze-footer] tfoot td.freeze-near { box-shadow: 1px -1px 0px 0px var(--jqx-border); z-index: 200; } .jqx-table[freeze-footer] tfoot td.freeze-far { box-shadow: -1px -1px 0px 0px var(--jqx-border); z-index: 200; } .jqx-table[freeze-footer] tfoot tr:nth-last-child(2) td { bottom: var(--jqx-table-row-height); } .jqx-table[freeze-footer] tfoot tr:nth-last-child(3) td { bottom: calc(2 * var(--jqx-table-row-height)); } .jqx-table[freeze-footer] .jqx-table-container:focus td[focus]:after { height: calc(100% - 1px); } .jqx-table[freeze-footer][paging]:not(.jqx-pivot-table) tfoot td { bottom: var(--jqx-table-header-footer-height); } .jqx-table[freeze-footer][paging]:not(.jqx-pivot-table) tfoot tr:nth-last-child(2) td { bottom: calc(var(--jqx-table-row-height) + var(--jqx-table-header-footer-height)); } .jqx-table[freeze-footer][paging]:not(.jqx-pivot-table) tfoot tr:nth-last-child(3) td { bottom: calc(2 * var(--jqx-table-row-height) + var(--jqx-table-header-footer-height)); } .jqx-table[row-detail-template] tr[row-id] { cursor: pointer; } .jqx-table[hierarchy] tr[row-id] td { transform: scaleY(1); } .jqx-table[hierarchy] tr[row-id].no-height td { line-height: 0; } .jqx-table[hierarchy] tr.collapsed[row-id] { height: 0; } .jqx-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); } .jqx-table[hierarchy]:not([animation=none]) tr[row-id] { transition: height 0.2s ease-in-out; } .jqx-table[modal] { position: relative; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .jqx-table[modal]:after { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: black; opacity: 0.3; pointer-events: none; cursor: default; -moz-user-select: none; -webkit-user-select: none; user-select: none; z-index: 100; } .jqx-table[toolbar][designer] .jqx-table-toolbar-button.conditional-formatting { border-right: none; } .jqx-table[toolbar][designer] .jqx-table-toolbar-button.conditional-formatting:before { left: unset; right: 0; width: calc(2 * var(--jqx-table-row-height)); } .jqx-table[auto-size] table { table-layout: auto; } .jqx-table[column-groups]:not([right-to-left]) th:not(:last-child) { border-right: var(--jqx-border-width) solid var(--jqx-border); } .jqx-table[column-groups][selection] th.jqx-table-select-all, .jqx-table[column-groups][selection] th.empty { border-top: none; } .jqx-table[virtualization] tr.last-row td { border-bottom: var(--jqx-border-width) solid var(--jqx-border); } .jqx-table[virtualization] tr[unused] { visibility: hidden; } .jqx-table[virtualization] tr[unused] td { border-top: none; } .jqx-table[virtualization] tr.jqx-table-filter-row td { position: sticky; top: var(--jqx-table-column-header-height); background-color: var(--jqx-background); box-shadow: 0px 1px 0px 0px var(--jqx-border); } .jqx-table[virtualization][filtering]:not([filter-row]) .jqx-table-container { height: 100%; } .jqx-table[virtualization][conditional-formatting-button] .jqx-table-container { height: 100%; } .jqx-table[virtualization][paging]:not(.jqx-pivot-table) .jqx-table-container { height: 100%; } .jqx-table[virtualization][paging]:not(.jqx-pivot-table)[filtering]:not([filter-row]):not([column-menu]) .jqx-table-container, .jqx-table[virtualization][paging]:not(.jqx-pivot-table)[conditional-formatting-button] .jqx-table-container { height: 100%; } .jqx-table[virtualization][freeze-header][filtering]:not([filter-row]):not([column-menu]) thead th, .jqx-table[virtualization][freeze-header][conditional-formatting-button] thead th { top: 0; } @media (max-width: 575.98px) { .jqx-table.table-responsive-sm { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; } .jqx-table.table-responsive-sm > .jqx-table.table-bordered table { border: 0; } } @media (max-width: 767.98px) { .jqx-table.table-responsive-md { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; } .jqx-table.table-responsive-md > .jqx-table.table-bordered table { border: 0; } } @media (max-width: 991.98px) { .jqx-table.table-responsive-lg { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; } .jqx-table.table-responsive-lg > .jqx-table.table-bordered table { border: 0; } } @media (max-width: 1199.98px) { .jqx-table.table-responsive-xl { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; } .jqx-table.table-responsive-xl > .jqx-table.table-bordered table { border: 0; } } .jqx-table.table-responsive { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; } .jqx-table.table-responsive > .jqx-table.table-bordered table { border: 0; } @media only screen and (max-width: 1280px) { .jqx-table .priority-5 { display: none; } } @media only screen and (max-width: 1024px) { .jqx-table .priority-4 { display: none; } } @media only screen and (max-width: 800px) { .jqx-table .priority-3 { display: none; } } @media only screen and (max-width: 640px) { .jqx-table .priority-2 { display: none; } } @-moz-document url-prefix() { .jqx-table thead th:not(.jqx-table-select-all) { opacity: 1; } .jqx-table .freeze-near, .jqx-table .freeze-far { box-shadow: 0px 0px 0px 1px var(--jqx-border); } .jqx-table .jqx-table-container:focus td[focus]:after { height: calc(100% - 1px); top: 1px; } .jqx-table[freeze-header] thead th.empty, .jqx-table[freeze-header] thead th:empty { box-shadow: -1px 0px 0px 0px var(--jqx-border); } .jqx-table[freeze-footer] .jqx-table-container:focus td[focus]::after { height: calc(100% - 2px); } .jqx-table[column-groups][freeze-header] thead th { box-shadow: 0px 0px 0px 1px var(--jqx-border); } } .jqx-table[hide-selection-column] th.jqx-table-select-all { width: 0px; padding-left: 0px; padding-right: 0px; } .jqx-table[hide-selection-column] th.jqx-table-select-all > div { visibility: hidden; } .jqx-table[hide-selection-column] td.jqx-table-select-row { visibility: hidden; } .jqx-table[hide-selection-column] td.jqx-table-select-row .selection-checkbox { visibility: hidden; } .jqx-table[hide-selection-column] tr[aria-selected=true] td { background: var(--jqx-ui-state-selected); color: var(--jqx-ui-state-color-selected); } .jqx-pivot-table th.expanded .total-arrow { transform: rotate(180deg); } .jqx-pivot-table:not([animation=none]) .total-arrow { transition: transform 0.2s ease-in-out; } .jqx-pivot-table:not([group-layout=classic]) tr.expanded .hierarchy-arrow { transform: rotate(180deg); } @-moz-document url-prefix() { .jqx-pivot-table thead th:not(:last-child), .jqx-pivot-table thead th:last-child { border: none; box-shadow: 0px 0px 0px 1px var(--jqx-border); } .jqx-pivot-table tbody tr[row-id]:first-child td { border-top: none; } .jqx-pivot-table[freeze-header] thead th { box-shadow: 0px 0px 0px 1px var(--jqx-border); } .jqx-pivot-table[freeze-header] .jqx-pivot-table-grouping-header:empty { box-shadow: -1px 0px 0px 0px var(--jqx-border); } } .jqx-pivot-panel > .jqx-container[modal] { position: relative; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .jqx-pivot-panel > .jqx-container[modal]:after { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: black; opacity: 0.3; pointer-events: none; cursor: default; -moz-user-select: none; -webkit-user-select: none; user-select: none; z-index: 100; } .jqx-table-primary { background-color: #b8daff; } .jqx-table-primary > th, .jqx-table-primary > td { background-color: #b8daff; } .jqx-table-secondary { background-color: #d6d8db; } .jqx-table-secondary > th, .jqx-table-secondary > td { background-color: #d6d8db; } .jqx-table-success { background-color: #c3e6cb; } .jqx-table-success > th, .jqx-table-success > td { background-color: #c3e6cb; } .jqx-table-info { background-color: #bee5eb; } .jqx-table-info > th, .jqx-table-info > td { background-color: #bee5eb; } .jqx-table-warning { background-color: #ffeeba; } .jqx-table-warning > th, .jqx-table-warning > td { background-color: #ffeeba; } .jqx-table-danger { background-color: #f5c6cb; } .jqx-table-danger > th, .jqx-table-danger > td { background-color: #f5c6cb; } .jqx-table.table-light table { background-color: #fdfdfe; } .jqx-table.table-light table > th, .jqx-table.table-light table > td { background-color: #fdfdfe; } .jqx-table.table-dark table { background-color: #212529; } .jqx-table.table-dark table th, .jqx-table.table-dark table td, .jqx-table.table-dark table thead th { border-color: #32383e; } .jqx-table.table-dark table > th, .jqx-table.table-dark table > td { background-color: #212529; } .jqx-table-active { background-color: rgba(0, 0, 0, 0.075); } .jqx-table-active > th, .jqx-table-active > td { background-color: rgba(0, 0, 0, 0.075); } .jqx-table-container { width: 100%; height: 100%; } .jqx-table-sm th, .jqx-table-sm td { padding: 0.3rem; } .jqx-table-feedback { position: absolute; display: flex; align-items: center; box-shadow: var(--jqx-elevation-8); border: var(--jqx-border-width) solid var(--jqx-border); border-radius: var(--jqx-border-radius); padding: 5px; white-space: nowrap; font-family: var(--jqx-font-family); font-size: var(--jqx-font-size); background-color: var(--jqx-background); color: var(--jqx-background-color); z-index: 10000; opacity: 0.85; } .jqx-table-resize-feedback { box-sizing: border-box; position: absolute; border-left: 1px dashed var(--jqx-primary); padding: 5px; font-family: var(--jqx-font-family); font-size: 12px; font-weight: bold; z-index: 100; } .jqx-table-resize-feedback.static { border-left-style: solid; } .jqx-table-resize-feedback.min, .jqx-table-resize-feedback.max { border-left-color: var(--jqx-error); } .jqx-table-window.conditional-formatting { --jqx-window-default-width: 650px; } .jqx-table-window.conditional-formatting > .jqx-container { overflow: visible; } .jqx-table-window.conditional-formatting .jqx-content-container > .jqx-content { overflow: visible; } .jqx-table-window.conditional-formatting jqx-formatting-panel { border: none; width: 100%; height: 100%; } .jqx-table-window.jqx-window.conditional-formatting { overflow: visible; } .jqx-table-window.jqx-window .jqx-content-container > .jqx-footer { display: flex; justify-content: space-evenly; align-items: center; } .jqx-table-window.jqx-window .jqx-content-container > .jqx-footer jqx-button { --jqx-button-padding: 0; width: 40%; height: 100%; } .jqx-table-column-menu { border: 1px solid var(--jqx-border); box-shadow: var(--jqx-elevation-8); z-index: 9999; width: 200px; height: auto; padding: 10px; border-radius: var(--jqx-border-radius); position: absolute; background: var(--jqx-background); top: 0px; left: 0px; } .jqx-table-column-menu jqx-button { --jqx-button-padding: 0; } .jqx-table-column-menu jqx-button button:after { content: var(--jqx-icon-filter); font-family: var(--jqx-font-family-icon); width: 100%; height: 100%; text-decoration: line-through; } .jqx-table-column-menu.wrapper > div { --jqx-filter-row-content-height: calc(var(--jqx-table-row-height) - 2 * var(--jqx-table-cell-padding) - var(--jqx-border-width)); display: grid; grid-template-columns: 1fr var(--jqx-filter-row-content-height) var(--jqx-filter-row-content-height); grid-template-rows: 100%; column-gap: 2px; height: var(--jqx-filter-row-content-height); position: relative; } .jqx-table-column-menu.wrapper .jqx-table-menu-item { display: flex; cursor: pointer; font-family: var(--jqx-font-family); font-size: var(--jqx-font-size); height: 30px; align-items: center; padding: 5px; box-sizing: border-box; margin-bottom: 5px; } .jqx-table-column-menu.wrapper .jqx-table-menu-item.jqx-disabled { user-select: none; pointer-events: none; opacity: 0.5; } .jqx-table-column-menu.wrapper .jqx-table-menu-item .label { padding: 5px; } .jqx-table-column-menu.wrapper .jqx-table-menu-item:not(.filter-item):hover { background: var(--jqx-ui-state-hover); color: var(--jqx-ui-state-color-hover); } .jqx-table-column-menu.wrapper .jqx-table-menu-item .menu-icon::after { font-family: var(--jqx-font-family-icon); width: 100%; height: 100%; color: var(--jqx-surface-color); } .jqx-table-column-menu.wrapper .jqx-table-menu-item .sort-asc::after { content: var(--jqx-icon-sort-name-up); } .jqx-table-column-menu.wrapper .jqx-table-menu-item .sort-desc::after { content: var(--jqx-icon-sort-name-down); } .jqx-table-column-menu.wrapper .jqx-table-menu-item .sort-remove::after { content: var(--jqx-icon-sort-name-up); text-decoration: line-through; } .jqx-table-column-menu.wrapper .jqx-table-menu-item .reset::after { content: var(--jqx-icon-refresh); } .jqx-table-column-menu.wrapper .jqx-table-menu-item .columns::after { content: var(--jqx-icon-table); } .jqx-table-column-menu.wrapper .jqx-table-menu-item .filter-by::after { content: var(--jqx-icon-add-filter); } .jqx-table-column-menu.wrapper .jqx-table-menu-item .filter-by-remove::after { content: var(--jqx-icon-filter); text-decoration: line-through; } .jqx-table-column-menu.wrapper .jqx-table-menu-item .column-item::after { content: var(--jqx-icon-check-squared); } .jqx-table-column-menu.wrapper .jqx-table-menu-item .column-item.off::after { content: var(--jqx-icon-check-empty); } .jqx-table-column-menu.wrapper .jqx-table-menu-item.columns-item::after { content: var(--jqx-icon-arrow-right); font-family: var(--jqx-font-family-icon); width: 100%; height: 100%; color: var(--jqx-surface-color); display: flex; justify-content: flex-end; align-items: center; } .jqx-table-column-menu.wrapper .jqx-table-menu-item.filter-item { cursor: default; border-top: 1px solid var(--jqx-border); padding-top: 20px; margin-bottom: 10px; } .jqx-table-column-menu.wrapper.no-filter { opacity: 0.6; pointer-events: none; } .jqx-table-column-menu .filter-value { min-width: 0; border: var(--jqx-border-width) solid var(--jqx-border); border-top-right-radius: var(--jqx-border-top-right-radius); border-top-left-radius: var(--jqx-border-top-left-radius); border-bottom-left-radius: var(--jqx-border-bottom-left-radius); border-bottom-right-radius: var(--jqx-border-bottom-right-radius); padding: var(--jqx-editor-label-padding); background-color: var(--jqx-background); color: var(--jqx-background-color); font-family: inherit; font-size: inherit; } .jqx-table-column-menu .filter-value:hover { border-color: var(--jqx-ui-state-border-hover); } .jqx-table-column-menu .filter-value:focus { outline: none; border-color: var(--jqx-outline); } .jqx-table-column-menu .filter-value[type=number] { -webkit-appearance: none; -moz-appearance: textfield; } .jqx-table-column-menu .filter-value::-webkit-outer-spin-button, .jqx-table-column-menu .filter-value::-webkit-inner-spin-button { -webkit-appearance: none; -moz-appearance: textfield; } .jqx-table-column-menu .jqx-input { --jqx-editor-addon-width: 100%; --jqx-editor-label-padding: 0; width: unset; height: 100%; } .jqx-table-column-menu .jqx-input .jqx-drop-down-button { border-top-left-radius: var(--jqx-border-top-left-radius); border-bottom-left-radius: var(--jqx-border-bottom-left-radius); } .jqx-table-column-menu .jqx-input .jqx-drop-down-button .arrow:after { content: var(--jqx-icon-filter); transform: none !important; } @keyframes active { from { transform: scale(0); } to { transform: scale(2.5); } } @-moz-document url-prefix() { .jqx-table[right-to-left] .freeze-near, .jqx-table[right-to-left] .freeze-far { box-shadow: 0px 0px 0px 1px var(--jqx-border); } } .jqx-table[right-to-left] > .jqx-container { direction: rtl; } .jqx-table[right-to-left] thead th { text-align: right; } .jqx-table[right-to-left] thead th .sort-by:after { left: unset; right: 100%; } .jqx-table[right-to-left] th.column-header { text-align: center; } .jqx-table[right-to-left] td { text-align: initial; } .jqx-table[right-to-left] .jqx-table-container:focus td[focus]:after { left: unset; right: 1px; } .jqx-table[right-to-left] .jqx-table-header { left: unset; right: 0; } .jqx-table[right-to-left] .jqx-table-header .jqx-table-toolbar-button.conditional-formatting { border-left: none; border-right: var(--jqx-border-width) solid var(--jqx-border); } .jqx-table[right-to-left] .jqx-table-header .jqx-table-toolbar-button.conditional-formatting:before { left: 0; right: unset; } .jqx-table[right-to-left] .freeze-far { left: 0; box-shadow: 1px 0px 0px 0px var(--jqx-border); right: unset; } .jqx-table[right-to-left] .freeze-near { right: 0; box-shadow: -1px 0px 0px 0px var(--jqx-border); left: unset; } .jqx-table[right-to-left] jqx-pager .jqx-container { justify-content: flex-start; } .jqx-table[right-to-left] jqx-pager .jqx-pager-far-buttons-container { order: 0; } .jqx-table[right-to-left] jqx-pager .jqx-pager-near-buttons-container { order: 1; } .jqx-table[right-to-left] jqx-pager .jqx-pager-summary-container.jqx-pager-label { order: 2; } .jqx-table[right-to-left] jqx-pager .jqx-pager-size-selector-and-label-container { order: 3; flex-direction: row; } .jqx-table[right-to-left] .tree-cell, .jqx-table[right-to-left] .tree-leaf, .jqx-table[right-to-left] .group-header { padding-left: var(--jqx-table-cell-padding); } .jqx-table[right-to-left] .hierarchy-arrow { margin-left: var(--jqx-table-arrow-margin); margin-right: unset; } .jqx-table[right-to-left][freeze-header] thead th.freeze-far { box-shadow: 1px 1px 0px 0px var(--jqx-border); } .jqx-table[right-to-left][freeze-header] thead th.freeze-near { box-shadow: -1px 1px 0px 0px var(--jqx-border); } .jqx-table[right-to-left][freeze-footer] tfoot td.freeze-far { box-shadow: 1px -1px 0px 0px var(--jqx-border); } .jqx-table[right-to-left][freeze-footer] tfoot td.freeze-near { box-shadow: -1px -1px 0px 0px var(--jqx-border); } .jqx-table[right-to-left][conditional-formatting-button]:not([filtering]) .jqx-table-header { grid-template-columns: 1fr auto; grid-template-areas: ". button"; } .jqx-table[right-to-left][filtering] .jqx-table-header { grid-template-columns: 1fr; } .jqx-table[right-to-left][filtering][conditional-formatting-button] .jqx-table-header { grid-template-columns: 1fr auto; } .jqx-table[right-to-left][column-resize] th[locked]:before { content: none; } .jqx-table[right-to-left][column-resize] th[locked] + th[data-field]:after { content: none; } .jqx-table[right-to-left][column-resize]:not([selection]) th[data-field]:first-child:after { content: none; } .jqx-table[right-to-left][column-resize]:not([selection]) th[data-field]:not([locked]):first-child:before { content: ""; } .jqx-table[right-to-left][column-resize][selection] th[data-field]:nth-child(2):after { content: none; } .jqx-table[right-to-left][column-resize][selection] th[data-field]:not([locked]):nth-child(2):before { content: ""; } .jqx-table[right-to-left][column-groups] th:not(:last-child) { border-left: var(--jqx-border-width) solid var(--jqx-border); } @-moz-document url-prefix() { .jqx-pivot-table[right-to-left] thead th:not(:last-child), .jqx-pivot-table[right-to-left] thead th:last-child { border: none; box-shadow: 0px 0px 0px 1px var(--jqx-border); } } .jqx-pivot-table[right-to-left] .jqx-table-toolbar-button.fields { border-left: none; border-right: var(--jqx-border-width) solid var(--jqx-border); } .jqx-pivot-table[right-to-left] .jqx-table-toolbar-button.fields:before { left: 0; right: unset; } .jqx-pivot-table[right-to-left][toolbar][designer] .jqx-table-toolbar-button.conditional-formatting { border-left: none; border-right: var(--jqx-border-width) solid var(--jqx-border); } .jqx-pivot-table[right-to-left][toolbar][designer] .jqx-table-toolbar-button.conditional-formatting:before { left: 0; right: unset; } .jqx-table[right-to-left] .outline-level-1 { padding-right: var(--jqx-table-indent); } .jqx-table[right-to-left] .outline-level-1.tree-leaf { padding-right: calc(var(--jqx-table-indent) + var(--jqx-table-arrow-size) + var(--jqx-table-arrow-margin)); } .jqx-table[right-to-left] .outline-level-2 { padding-right: calc(2 * var(--jqx-table-indent)); } .jqx-table[right-to-left] .outline-level-2.tree-leaf { padding-right: calc(2 * var(--jqx-table-indent) + var(--jqx-table-arrow-size) + var(--jqx-table-arrow-margin)); } .jqx-table[right-to-left] .outline-level-3 { padding-right: calc(3 * var(--jqx-table-indent)); } .jqx-table[right-to-left] .outline-level-3.tree-leaf { padding-right: calc(3 * var(--jqx-table-indent) + var(--jqx-table-arrow-size) + var(--jqx-table-arrow-margin)); } .jqx-table[right-to-left] .outline-level-4 { padding-right: calc(4 * var(--jqx-table-indent)); } .jqx-table[right-to-left] .outline-level-4.tree-leaf { padding-right: calc(4 * var(--jqx-table-indent) + var(--jqx-table-arrow-size) + var(--jqx-table-arrow-margin)); } .jqx-table[right-to-left] .outline-level-5 { padding-right: calc(5 * var(--jqx-table-indent)); } .jqx-table[right-to-left] .outline-level-5.tree-leaf { padding-right: calc(5 * var(--jqx-table-indent) + var(--jqx-table-arrow-size) + var(--jqx-table-arrow-margin)); } .jqx-table[right-to-left] .outline-level-6 { padding-right: calc(6 * var(--jqx-table-indent)); } .jqx-table[right-to-left] .outline-level-6.tree-leaf { padding-right: calc(6 * var(--jqx-table-indent) + var(--jqx-table-arrow-size) + var(--jqx-table-arrow-margin)); } .jqx-table[right-to-left] .outline-level-7 { padding-right: calc(7 * var(--jqx-table-indent)); } .jqx-table[right-to-left] .outline-level-7.tree-leaf { padding-right: calc(7 * var(--jqx-table-indent) + var(--jqx-table-arrow-size) + var(--jqx-table-arrow-margin)); } .jqx-table[right-to-left] .outline-level-8 { padding-right: calc(8 * var(--jqx-table-indent)); } .jqx-table[right-to-left] .outline-level-8.tree-leaf { padding-right: calc(8 * var(--jqx-table-indent) + var(--jqx-table-arrow-size) + var(--jqx-table-arrow-margin)); } .jqx-table[right-to-left] .outline-level-9 { padding-right: calc(9 * var(--jqx-table-indent)); } .jqx-table[right-to-left] .outline-level-9.tree-leaf { padding-right: calc(9 * var(--jqx-table-indent) + var(--jqx-table-arrow-size) + var(--jqx-table-arrow-margin)); } .jqx-table[right-to-left] .outline-level-10 { padding-right: calc(10 * var(--jqx-table-indent)); } .jqx-table[right-to-left] .outline-level-10.tree-leaf { padding-right: calc(10 * var(--jqx-table-indent) + var(--jqx-table-arrow-size) + var(--jqx-table-arrow-margin)); } /* jqx-tab-item and .jqx-tabs */ jqx-tabs { border: none; min-width: 125px; width: var(--jqx-tabs-default-width); min-height: 125px; height: var(--jqx-tabs-default-height); padding: 2px; overflow: visible; line-height: initial; } jqx-tabs.jqx-element { background: transparent; border: none; } jqx-tab-item { position: relative; top: 0; left: 0; width: 100%; height: 100%; font-size: inherit; overflow: auto; outline: none; } jqx-tab-item > .jqx-container { padding: 5px; } jqx-tab-item > .jqx-container .jqx-widget * { box-sizing: initial; } jqx-tab-item.jqx-element { background: transparent; border: none; } jqx-tab-item.animate { transition: left var(--jqx-tabs-animation-duration) cubic-bezier(0.35, 0, 0.25, 1), top var(--jqx-tabs-animation-duration) cubic-bezier(0.35, 0, 0.25, 1), visibility 2s cubic-bezier(0.35, 0, 0.25, 1), opacity 2s cubic-bezier(0.35, 0, 0.25, 1); } jqx-tab-item.jqx-visibility-hidden { position: absolute; } jqx-tab-item.jqx-visibility-hidden > .jqx-container .jqx-widget * { visibility: hidden; } jqx-tab-item.jqx-visibility-hidden .jqx-container { visibility: hidden; } jqx-tab-item.jqx-visibility-hidden.animate .jqx-container { visibility: initial; } jqx-tab-items-group.jqx-element { background: transparent; border: none; } .jqx-tabs { outline: none; } .jqx-tabs > .jqx-container { display: flex; -webkit-flex-direction: column; flex-direction: column; position: relative; min-height: inherit; } .jqx-tabs .jqx-tabs-header-section { border: var(--jqx-border-width) solid var(--jqx-surface); background: var(--jqx-surface); color: var(--jqx-surface-color); padding: var(--jqx-tabs-header-padding); } .jqx-tabs .jqx-tabs-header-items { width: 100%; position: relative; min-height: 0; overflow: hidden; } .jqx-tabs .jqx-tabs-header-items > .jqx-drop-down-button { font-family: var(--jqx-font-family-icon); position: relative; display: none; cursor: pointer; } .jqx-tabs .jqx-tabs-content-section { position: relative; min-height: 0; width: 100%; flex: 1; margin: 0px; overflow: hidden; color: var(--jqx-tabs-color); background: var(--jqx-background); border: var(--jqx-border-width) solid var(--jqx-border); border-bottom-left-radius: var(--jqx-border-bottom-left-radius); border-bottom-right-radius: var(--jqx-border-bottom-right-radius); margin-top: var(--jqx-tabs-header-offset); } .jqx-tabs .jqx-tabs-resize-token { position: absolute; background-color: black; opacity: 0.5; } .jqx-tabs .jqx-tab-header-controls:empty { display: none; } .jqx-tabs .jqx-tab-group-container { position: relative; display: inline-block; cursor: pointer; color: inherit; text-transform: var(--jqx-tab-item-text-transform); } .jqx-tabs .jqx-tab-group-container .jqx-tab-label-text-container { margin-right: 18px; } .jqx-tabs .jqx-tab-group-container[hover] { color: var(--jqx-ui-state-color-hover); border-color: var(--jqx-ui-state-border-hover); background-color: var(--jqx-ui-state-hover); } .jqx-tabs .jqx-tab-group-container[hover][focus] { color: var(--jqx-ui-state-color-hover); border-color: var(--jqx-ui-state-border-hover); background-color: var(--jqx-ui-state-hover); } .jqx-tabs .jqx-tab-group-drop-down { position: absolute; border-width: var(--jqx-border-width); border-style: solid; border-color: var(--jqx-border); border-top: none; padding: 2px; width: auto; height: auto; white-space: nowrap; border-radius: var(--jqx-border-radius); z-index: var(--jqx-editor-drop-down-z-index); background-color: var(--jqx-background); color: var(--jqx-background-color); box-shadow: var(--jqx-elevation-8); } .jqx-tabs .jqx-tab-group-drop-down .jqx-tab-label-container { display: block; width: 100%; overflow: hidden; } .jqx-tabs .jqx-tab-group-arrow { font-family: var(--jqx-font-family-icon); position: absolute; right: 2px; top: 50%; transform: translateY(-50%); width: var(--jqx-editor-addon-width); height: var(--jqx-editor-addon-width); text-align: center; line-height: var(--jqx-editor-addon-width); } .jqx-tabs .jqx-tab-group-arrow:after { content: var(--jqx-icon-arrow-down); } .jqx-tabs .jqx-tab-label-container { position: relative; display: inline-block; cursor: pointer; color: inherit; text-transform: var(--jqx-tab-item-text-transform); background-color: inherit; border-color: transparent; margin-right: var(--jqx-tab-item-offset); border-top-left-radius: var(--jqx-item-border-top-left-radius); border-top-right-radius: var(--jqx-item-border-top-right-radius); border-bottom-left-radius: var(--jqx-item-border-bottom-left-radius); border-bottom-right-radius: var(--jqx-item-border-bottom-right-radius); } .jqx-tabs .jqx-tab-label-container[disabled] { opacity: 0.55; cursor: default; pointer-events: none; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } .jqx-tabs .jqx-tab-label-container[selected] { color: var(--jqx-ui-state-color-selected); background-color: var(--jqx-ui-state-selected); border-color: var(--jqx-item-border-selected); } .jqx-tabs .jqx-tab-label-container[selected][focus] { background-color: var(--jqx-ui-state-selected); border-color: var(--jqx-item-border-selected); color: var(--jqx-ui-state-color-selected); } .jqx-tabs .jqx-tab-label-container[hover] { color: var(--jqx-ui-state-color-hover); border-color: var(--jqx-ui-state-border-hover); background-color: var(--jqx-ui-state-hover); } .jqx-tabs .jqx-tab-label-container[hover][focus] { color: var(--jqx-ui-state-color-hover); border-color: var(--jqx-ui-state-border-hover); background-color: var(--jqx-ui-state-hover); } .jqx-tabs .jqx-tab-label-text-wrapper { width: 100%; height: 100%; position: relative; padding: var(--jqx-tab-item-padding); } .jqx-tabs .jqx-tab-label-text-container { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .jqx-tabs .jqx-tab-label-text-container.jqx-close-button-enabled { margin-right: 18px; } .jqx-tabs .jqx-tab-close-button { font-family: var(--jqx-font-family-icon); font-size: 10px; position: absolute; right: 2px; top: 50%; transform: translateY(-50%); width: var(--jqx-editor-addon-width); height: var(--jqx-editor-addon-width); text-align: center; line-height: var(--jqx-editor-addon-width); } .jqx-tabs .jqx-tab-close-button:after { content: var(--jqx-icon-close); display: flex; justify-content: center; width: 100%; height: 100%; align-items: center; } .jqx-tabs .jqx-tab-close-button[hover] { border-radius: 50%; border: 1px solid var(--jqx-ui-state-border-hover); background-color: var(--jqx-ui-state-hover); color: var(--jqx-ui-state-color-hover); } .jqx-tabs .jqx-drop-down-button-arrow { position: absolute; width: 10px; height: 10px; top: 50%; left: 50%; transform: translate(-50%, -50%); color: inherit; } .jqx-tabs .jqx-drop-down-button-arrow:after { content: var(--jqx-icon-arrow-down); } .jqx-tabs .jqx-drop-down-button-drop-down { position: absolute; border-width: var(--jqx-border-width); border-style: solid; border-color: var(--jqx-border); border-top: none; padding: 2px; width: auto; height: auto; white-space: nowrap; border-radius: var(--jqx-border-radius); z-index: var(--jqx-editor-drop-down-z-index); background-color: var(--jqx-background); color: var(--jqx-background-color); box-shadow: var(--jqx-elevation-8); top: 100%; } .jqx-tabs .jqx-drop-down-button-drop-down .jqx-tab-label-container { display: block; width: 100%; overflow: hidden; padding: var(--jqx-tab-item-padding); } .jqx-tabs .jqx-add-new-tab[hover] { color: var(--jqx-ui-state-color-hover); } .jqx-tabs .jqx-nav-button { position: relative; border-radius: 0px; z-index: 100; } .jqx-tabs .jqx-nav-button > .jqx-button { border: none; height: initial; padding: 0px; } .jqx-tabs .ripple-agent { position: absolute; width: 100%; height: 100%; top: 0; left: 0; overflow: hidden; pointer-events: none; } .jqx-tabs .jqx-ripple { background-color: var(--jqx-primary); opacity: 0.5; } .jqx-tabs:focus .jqx-tabs-content-section { border-color: var(--jqx-outline); } .jqx-tabs:focus .jqx-tabs-header-section { border-color: var(--jqx-outline); } .jqx-tabs:focus .jqx-tab-label-container[selected] { color: var(--jqx-ui-state-color-focus); } .jqx-tabs:focus .jqx-tab-label-container[focus] { color: var(--jqx-ui-state-color-selected); } .jqx-tabs:focus .jqx-tab-group-container[focus] { color: var(--jqx-ui-state-color-selected); } .jqx-tabs:focus .jqx-add-new-tab[focus] { color: var(--jqx-ui-state-color-selected); } .jqx-tabs:not([animation=none]) jqx-tab-item.right { left: 100%; } .jqx-tabs:not([animation=none]) jqx-tab-item.left { left: -100%; } .jqx-tabs:not([animation=none]) jqx-tab-item.top { top: -100%; } .jqx-tabs:not([animation=none]) jqx-tab-item.bottom { top: 100%; } .jqx-tabs:not([animation=none]) .jqx-tabs-selection-bar { transition: width var(--jqx-tabs-animation-duration) cubic-bezier(0.35, 0, 0.25, 1), height var(--jqx-tabs-animation-duration) cubic-bezier(0.35, 0, 0.25, 1), top var(--jqx-tabs-animation-duration) cubic-bezier(0.35, 0, 0.25, 1), left var(--jqx-tabs-animation-duration) cubic-bezier(0.35, 0, 0.25, 1); } .jqx-tabs:not([animation=none]) .jqx-tabs-content-section:after { transition: opacity 0.2s ease-in; } .jqx-tabs[keyboard-navigate] { color: var(--jqx-ui-state-color-focus); } .jqx-tabs[collapsed] .jqx-tabs-content-section { margin: 0; display: none; } .jqx-tabs[collapsed][horizontal] { min-height: initial; height: auto; } .jqx-tabs[collapsed][vertical] { display: table-caption; min-width: initial; width: auto; } .jqx-tabs[dragged] { cursor: move; } .jqx-tabs[dragged] .jqx-tab-label-container { cursor: move; } .jqx-tabs[resizing][horizontal] { cursor: e-resize; } .jqx-tabs[resizing][horizontal] .jqx-tab-label-container, .jqx-tabs[resizing][horizontal] .jqx-tab-group-container { cursor: e-resize; } .jqx-tabs[resizing][vertical] { cursor: n-resize; } .jqx-tabs[resizing][vertical] .jqx-tab-label-container, .jqx-tabs[resizing][vertical] .jqx-tab-group-container { cursor: n-resize; } .jqx-tabs[disabled] .jqx-tab-label-container, .jqx-tabs[disabled] .jqx-tab-group-container, .jqx-tabs[disabled] .jqx-tabs-header-items > .jqx-drop-down-button, .jqx-tabs[disabled] .jqx-nav-button, .jqx-tabs[readonly] .jqx-tab-label-container, .jqx-tabs[readonly] .jqx-tab-group-container, .jqx-tabs[readonly] .jqx-tabs-header-items > .jqx-drop-down-button, .jqx-tabs[readonly] .jqx-nav-button { cursor: default; } .jqx-tabs[allow-toggle] .jqx-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; } .jqx-tabs[vertical] > .jqx-container { -webkit-flex-direction: row; flex-direction: row; } .jqx-tabs[vertical] .jqx-tabs-header-section { width: auto; min-height: initial; height: 100%; } .jqx-tabs[vertical] .jqx-tabs-header-section.scroll-buttons-shown .jqx-tab-strip { height: calc(100% - 2 * var(--jqx-tabs-header-button-size)); } .jqx-tabs[vertical] .jqx-tabs-header-section.scroll-buttons-shown.one-button-shown .jqx-tab-strip { height: calc(100% - var(--jqx-tabs-header-button-size)); } .jqx-tabs[vertical] .jqx-tabs-content-section { width: auto; min-height: initial; height: 100%; } .jqx-tabs[vertical] .jqx-tabs-header-items { width: auto; min-height: initial; height: 100%; } .jqx-tabs[vertical] .jqx-tabs-header-items > .jqx-drop-down-button { height: var(--jqx-tabs-header-button-size); width: 100%; border: none; background: transparent; } .jqx-tabs[vertical] .jqx-tab-strip { height: 100%; } .jqx-tabs[vertical] .jqx-tab-strip > .jqx-tab-label-container { border: none; border-right: var(--jqx-item-border-width) solid transparent; min-height: 20px; } .jqx-tabs[vertical] .jqx-tab-strip > .jqx-add-new-tab { min-height: initial; min-width: initial; } .jqx-tabs[vertical] .jqx-tab-group-container { display: block; border: none; border-right: var(--jqx-item-border-width) solid transparent; min-height: 20px; } .jqx-tabs[vertical] .jqx-tab-label-container { display: block; } .jqx-tabs[vertical] .jqx-tab-label-container:last-child { margin-right: 0; margin-bottom: 0; } .jqx-tabs[vertical] .jqx-tab-group-drop-down { border-top: var(--jqx-border-width) solid var(--jqx-border); } .jqx-tabs[vertical] .jqx-add-new-tab { text-align: center; } .jqx-tabs[vertical] .jqx-add-new-tab > .jqx-tab-label-text-wrapper { padding-left: 10px; padding-right: 10px; } .jqx-tabs[vertical] .jqx-nav-button { height: var(--jqx-tabs-header-button-size); width: 100%; border: none; background: transparent; } .jqx-tabs[vertical] .jqx-drop-down-button-drop-down { border-top: var(--jqx-border-width) solid var(--jqx-border); top: initial; } .jqx-tabs[vertical] .jqx-tabs-resize-token { width: 100%; height: 3px; transform: translateY(-50%); } .jqx-tabs[horizontal] .jqx-tab-strip { width: 100%; min-height: 0; } .jqx-tabs[horizontal] .jqx-tab-strip > .jqx-tab-label-container { min-width: 10px; border: none; border-bottom: var(--jqx-item-border-width) solid transparent; } .jqx-tabs[horizontal] .jqx-tab-strip > .jqx-tab-label-container:first-child { margin-left: var(--jqx-tab-item-initial-offset); } .jqx-tabs[horizontal] .jqx-tab-group-container { min-width: 40px; } .jqx-tabs[horizontal] .jqx-tabs-header-section.scroll-buttons-shown .jqx-tab-strip { width: calc(100% - 2 * var(--jqx-tabs-header-button-size)); } .jqx-tabs[horizontal] .jqx-tabs-header-section.scroll-buttons-shown.one-button-shown .jqx-tab-strip { width: calc(100% - var(--jqx-tabs-header-button-size)); } .jqx-tabs[horizontal] .jqx-tabs-header-items > .jqx-drop-down-button { width: var(--jqx-tabs-header-button-size); border: none; background: transparent; } .jqx-tabs[horizontal] .jqx-nav-button { width: var(--jqx-tabs-header-button-size); border: none; background: transparent; } .jqx-tabs[horizontal] .jqx-tabs-resize-token { width: 3px; height: 100%; transform: translateX(-50%); } .jqx-tabs[tab-text-orientation=vertical] .jqx-tab-strip > .jqx-tab-label-container .jqx-tab-label-text-container.jqx-close-button-enabled { margin-bottom: 18px; margin-right: 0; } .jqx-tabs[tab-text-orientation=vertical] .jqx-tab-strip > .jqx-tab-label-container > .jqx-tab-close-button { top: initial; right: initial; bottom: 2px; left: 50%; transform: translateX(-50%); } .jqx-tabs[tab-text-orientation=vertical] .jqx-tab-group-container .jqx-tab-label-text-container { margin-bottom: 18px; margin-right: 0; } .jqx-tabs[tab-text-orientation=vertical] .jqx-tab-group-arrow { top: initial; right: initial; bottom: 2px; left: 50%; transform: translateX(-50%); } .jqx-tabs[tab-text-orientation=vertical] .jqx-tab-group-drop-down { writing-mode: horizontal-tb; } .jqx-tabs[tab-text-orientation=vertical][horizontal] .jqx-tab-strip { writing-mode: vertical-lr; } .jqx-tabs[tab-text-orientation=vertical][horizontal] .jqx-tab-strip > .jqx-tab-label-container { min-width: 20px; display: block; } .jqx-tabs[tab-text-orientation=vertical][horizontal] .jqx-tab-group-container { min-width: 20px; display: block; } .jqx-tabs[tab-text-orientation=vertical][horizontal] .jqx-tab-close-button { padding-left: 2px; } .jqx-tabs[tab-text-orientation=vertical][vertical] .jqx-tab-strip { writing-mode: vertical-rl; } .jqx-tabs[tab-text-orientation=vertical][vertical] .jqx-tab-strip > .jqx-tab-label-container { min-height: 10px; display: inline-block; } .jqx-tabs[tab-text-orientation=vertical][vertical] .jqx-tab-group-container { min-height: 40px; display: inline-block; } .jqx-tabs[tab-text-orientation=vertical][vertical] .jqx-tab-close-button, .jqx-tabs[tab-text-orientation=vertical][vertical] .jqx-tab-group-arrow { padding-right: 1px; } .jqx-tabs[tab-text-orientation=vertical][tab-position=bottom] .jqx-tab-group-container .jqx-tab-label-text-container { margin-top: 18px; margin-bottom: 0; } .jqx-tabs[tab-text-orientation=vertical][tab-position=bottom] .jqx-tab-group-arrow { bottom: initial; top: 2px; } .jqx-tabs[tab-text-orientation=vertical][tab-position=right] .jqx-tab-group-container .jqx-tab-label-text-container { margin-left: 0; } .jqx-tabs:not([tab-position=bottom]):not([tab-position=left]):not([tab-position=right]) .jqx-tabs-header-section { border-bottom-width: 0px; } .jqx-tabs[tab-position=hidden] .jqx-tabs-header-section { display: none; } .jqx-tabs[tab-position=hidden] .jqx-tabs-content-section { margin: 0; } .jqx-tabs[tab-position=right] .jqx-tabs-selection-bar { width: 2px; left: 0px; } .jqx-tabs[tab-position=right] .jqx-tabs-header-section { border-left-width: 0px; } .jqx-tabs[tab-position=right] .jqx-tab-label-container { margin-right: 0px; margin-left: 0px; margin-top: var(--jqx-tab-item-initial-offset); margin-bottom: var(--jqx-tab-item-offset); } .jqx-tabs[tab-position=right] .jqx-tabs-content-section { margin: 0 var(--jqx-tabs-header-offset) 0 0; border-bottom-left-radius: var(--jqx-border-bottom-left-radius); border-top-left-radius: var(--jqx-border-top-left-radius); } .jqx-tabs[tab-position=right] .jqx-tab-group-drop-down, .jqx-tabs[tab-position=right] .jqx-drop-down-button-drop-down { transform: translateX(-100%); border-right: none; box-shadow: var(--jqx-elevation-8); } .jqx-tabs[tab-position=right] .jqx-tab-group-container .jqx-tab-label-text-container { margin-left: 12px; margin-right: 0; } .jqx-tabs[tab-position=right] .jqx-tab-group-arrow { left: 0; right: initial; } .jqx-tabs[tab-position=bottom] .jqx-tabs-selection-bar { height: 2px; top: 0px; } .jqx-tabs[tab-position=bottom] .jqx-tabs-header-section { border-top-width: 0px; } .jqx-tabs[tab-position=bottom] .jqx-tab-label-container { margin-right: var(--jqx-tab-item-offset); } .jqx-tabs[tab-position=bottom] .jqx-tabs-content-section { margin: 0 0 var(--jqx-tabs-header-offset) 0; border-top-left-radius: var(--jqx-border-top-left-radius); border-top-right-radius: var(--jqx-border-top-right-radius); } .jqx-tabs[tab-position=bottom] .jqx-tab-group-drop-down { border-top: var(--jqx-border-width) solid var(--jqx-border); transform: translateY(-100%); border-bottom: none; box-shadow: var(--jqx-elevation-8); } .jqx-tabs[tab-position=bottom] .jqx-drop-down-button-drop-down { border-top: var(--jqx-border-width) solid var(--jqx-border); transform: translateY(-100%); border-bottom: none; box-shadow: var(--jqx-elevation-8); top: initial; } .jqx-tabs[tab-position=left] .jqx-tabs-selection-bar { width: 2px; right: 0px; } .jqx-tabs[tab-position=left] .jqx-tabs-header-section { border-right-width: 0px; } .jqx-tabs[tab-position=left] .jqx-tab-label-container { margin-right: 0px; margin-left: 0px; margin-top: var(--jqx-tab-item-initial-offset); margin-bottom: var(--jqx-tab-item-offset); } .jqx-tabs[tab-position=left] .jqx-tabs-content-section { margin: 0 0 0 var(--jqx-tabs-header-offset); border-bottom-right-radius: var(--jqx-border-bottom-right-radius); border-top-right-radius: var(--jqx-border-top-right-radius); } .jqx-tabs[tab-position=left] .jqx-tab-group-drop-down { border-left: none; } .jqx-tabs[tab-position=left] .jqx-drop-down-button-drop-down { border-left: none; left: 100%; } .jqx-tabs[tab-layout=wrap][vertical] .jqx-tab-strip { display: flex; flex-direction: column; flex-wrap: wrap; } .jqx-tabs[tab-layout=wrap][tab-text-orientation=vertical][horizontal] .jqx-tab-strip { display: flex; flex-direction: column; flex-wrap: wrap; } .jqx-tabs[tab-layout=wrap][tab-text-orientation=vertical][vertical] .jqx-tab-strip { display: block; } .jqx-tabs[tab-layout=scroll] .jqx-tab-strip { overflow: hidden; white-space: nowrap; } .jqx-tabs[tab-layout=scroll] .jqx-tabs-header-section .jqx-nav-button.jqx-hidden { display: none; } .jqx-tabs[tab-layout=scroll] .jqx-tabs-header-section.scroll-buttons-shown .jqx-nav-button { display: flex; } .jqx-tabs[tab-layout=scroll][horizontal] .jqx-tabs-header-section { display: flex; } .jqx-tabs[tab-layout=scroll][horizontal] .jqx-tabs-header-items { display: flex; } .jqx-tabs[tab-layout=shrink] .jqx-tab-strip { overflow: hidden; white-space: nowrap; } .jqx-tabs[tab-layout=shrink] .jqx-tab-strip > .jqx-tab-label-container .jqx-tab-label-text-container, .jqx-tabs[tab-layout=shrink] .jqx-tab-strip > .jqx-tab-group-container .jqx-tab-label-text-container { overflow: hidden; } .jqx-tabs[tab-layout=shrink] .jqx-tab-strip.shrink-tabs { display: table; table-layout: fixed; } .jqx-tabs[tab-layout=shrink] .jqx-tab-strip.shrink-tabs > .jqx-tab-label-container, .jqx-tabs[tab-layout=shrink] .jqx-tab-strip.shrink-tabs > .jqx-tab-group-container { display: table-cell; vertical-align: top; } .jqx-tabs[tab-layout=shrink] .jqx-tab-strip.shrink-tabs > .jqx-tab-label-container .jqx-tab-label-text-container, .jqx-tabs[tab-layout=shrink] .jqx-tab-strip.shrink-tabs > .jqx-tab-group-container .jqx-tab-label-text-container { white-space: nowrap; text-overflow: ellipsis; } .jqx-tabs[tab-layout=shrink][horizontal] .jqx-tab-strip > .jqx-tab-label-container { min-width: initial; } .jqx-tabs[tab-layout=shrink][horizontal] .jqx-tab-group-container { min-width: initial; } .jqx-tabs[tab-layout=shrink][vertical] .jqx-tab-strip { display: flex; flex-direction: column; } .jqx-tabs[tab-layout=shrink][vertical] .jqx-tab-strip > .jqx-tab-group-container { display: flex; } .jqx-tabs[tab-layout=shrink][vertical] .jqx-tab-strip > .jqx-tab-label-container { display: flex; min-height: initial; overflow: hidden; } .jqx-tabs[tab-layout=shrink][vertical] .jqx-tab-strip.shrink-tabs-vertical > .jqx-tab-label-container, .jqx-tabs[tab-layout=shrink][vertical] .jqx-tab-strip.shrink-tabs-vertical > .jqx-tab-group-container { margin-top: 0; margin-bottom: 0; } .jqx-tabs[tab-layout=shrink][vertical] .jqx-tab-group-container { min-height: initial; overflow: hidden; } .jqx-tabs[tab-layout=shrink][tab-text-orientation=vertical] .jqx-tab-strip > .jqx-tab-label-container .jqx-tab-label-text-container, .jqx-tabs[tab-layout=shrink][tab-text-orientation=vertical] .jqx-tab-strip > .jqx-tab-group-container .jqx-tab-label-text-container { writing-mode: vertical-lr; } .jqx-tabs[tab-layout=shrink][tab-text-orientation=vertical] .jqx-tab-strip.shrink-tabs { writing-mode: initial; } .jqx-tabs[tab-layout=shrink][tab-text-orientation=vertical] .jqx-tab-strip.shrink-tabs > .jqx-tab-label-container .jqx-tab-label-text-container, .jqx-tabs[tab-layout=shrink][tab-text-orientation=vertical] .jqx-tab-strip.shrink-tabs > .jqx-tab-group-container .jqx-tab-label-text-container { width: 100%; } .jqx-tabs[tab-layout=shrink][tab-text-orientation=vertical][vertical] .jqx-tab-strip { writing-mode: initial; white-space: nowrap; } @media screen and (-webkit-min-device-pixel-ratio: 0) { .jqx-tabs[tab-layout=shrink][tab-text-orientation=vertical][vertical] .jqx-tab-label-text-wrapper { display: flex; height: auto; } } @media not all and (min-resolution: 0.001dpcm) { .jqx-tabs[tab-layout=shrink][tab-text-orientation=vertical][vertical] .jqx-tab-label-text-wrapper { overflow: hidden; } } .jqx-tabs[tab-layout=shrink][tab-text-orientation=vertical][horizontal] .jqx-tab-strip.shrink-tabs > div > .jqx-tab-label-text-wrapper { padding-left: 5px; padding-right: 5px; } .jqx-tabs[tab-layout=dropDown] .jqx-tab-strip { overflow: hidden; white-space: nowrap; } .jqx-tabs[tab-layout=dropDown] .jqx-tabs-header-items > .jqx-drop-down-button { display: block; background-color: var(--jqx-surface); color: var(--jqx-surface-color); border-color: var(--jqx-border); } .jqx-tabs[tab-layout=dropDown][horizontal] .jqx-tabs-header-section { display: flex; } .jqx-tabs[tab-layout=dropDown][horizontal] .jqx-tab-strip { width: calc(100% - var(--jqx-tabs-header-button-size)); } .jqx-tabs[tab-layout=dropDown][horizontal] .jqx-tabs-header-items { display: flex; } .jqx-tabs[tab-layout=dropDown][vertical] .jqx-tab-strip { height: calc(100% - var(--jqx-tabs-header-button-size)); } .jqx-tabs[selected-index] .jqx-tabs-content-section:after { opacity: 0; } .jqx-tabs[selected-index=null] .jqx-tabs-selection-bar { visibility: hidden; } .jqx-tabs[selected-index=null] .jqx-tabs-content-section:after { opacity: 1; } .jqx-tabs[close-buttons][horizontal] .jqx-tab-strip > .jqx-tab-label-container { min-width: 40px; } .jqx-tabs[close-buttons][horizontal] .jqx-tab-strip > .jqx-add-new-tab { min-width: initial; } .jqx-tabs[close-buttons][vertical] .jqx-tab-strip > .jqx-add-new-tab { min-height: initial; } .jqx-tabs[close-buttons][tab-text-orientation=vertical][vertical] .jqx-tab-strip > .jqx-tab-label-container { min-height: 40px; } @-moz-document url-prefix() { .jqx-tabs { /* fix for flexbox-related issues in Firefox */ } .jqx-tabs .jqx-tab-label-container .jqx-tab-label-text-container-full-height { height: 100%; } .jqx-tabs .jqx-tab-group-container .jqx-tab-label-text-container-full-height { height: calc(100% - 10px); } .jqx-tabs[tab-layout=wrap][tab-text-orientation=vertical][horizontal] .jqx-tab-strip { height: 100%; display: block; writing-mode: initial; } .jqx-tabs[tab-layout=wrap][tab-text-orientation=vertical][horizontal] .jqx-tab-strip > div { float: left; writing-mode: vertical-lr; } .jqx-tabs[tab-layout=shrink][vertical] .jqx-tab-strip { display: block; } .jqx-tabs[tab-layout=shrink][vertical] .jqx-tab-strip > .jqx-tab-label-container, .jqx-tabs[tab-layout=shrink][vertical] .jqx-tab-strip > .jqx-tab-group-container, .jqx-tabs[tab-layout=shrink][vertical] .jqx-tab-strip .jqx-tab-label-text-wrapper { display: block; } } @supports (-ms-ime-align: auto) { .jqx-tabs[tab-layout=wrap][tab-text-orientation=vertical][horizontal] .jqx-tab-strip { height: 100%; display: block; writing-mode: initial; } .jqx-tabs[tab-layout=wrap][tab-text-orientation=vertical][horizontal] .jqx-tab-strip > div { writing-mode: vertical-lr; float: left; } .jqx-tabs[tab-layout=shrink][tab-text-orientation=vertical][horizontal] .jqx-tab-strip { height: 100%; writing-mode: initial; display: flex; } .jqx-tabs[tab-layout=shrink][tab-text-orientation=vertical][horizontal] .jqx-tab-strip > div { writing-mode: vertical-lr; } } .jqx-tabs-selection-bar { position: absolute; bottom: 0; background: var(--jqx-primary); height: 2px; z-index: 10; } .jqx-tabs[right-to-left] jqx-tab-item > .jqx-container { direction: rtl; } .jqx-tabs[right-to-left] .jqx-tab-label-container, .jqx-tabs[right-to-left] .jqx-tab-group-container { direction: rtl; } .jqx-tabs[right-to-left][tab-text-orientation=vertical] .jqx-tab-strip { writing-mode: vertical-rl; } .jqx-tabs[right-to-left]:not([vertical]) .jqx-tab-strip { direction: rtl; text-align: right; } .jqx-tabs[right-to-left]:not([vertical]) .jqx-tab-strip > .jqx-tab-label-container:last-child { margin-left: initial; margin-right: var(--jqx-tab-item-offset); } .jqx-tabs[right-to-left]:not([vertical]) .jqx-tab-strip > .jqx-tab-label-container:first-child { margin-left: initial; margin-right: initial; } .jqx-tabs[right-to-left][tab-position=right]:not([tab-text-orientation=vertical]):not([vertical]) .jqx-tab-group-container .jqx-tab-label-text-container { margin-right: 18px; margin-left: 0; } .jqx-tabs[right-to-left][tab-position=right]:not([tab-text-orientation=vertical]):not([vertical]) .jqx-tab-group-arrow { right: 2px; left: initial; } .jqx-tabs[right-to-left]:not([tab-text-orientation=vertical]):not([vertical]) .jqx-tab-label-text-container.jqx-close-button-enabled, .jqx-tabs[right-to-left]:not([tab-text-orientation=vertical]):not([vertical]) .jqx-tab-group-container .jqx-tab-label-text-container { margin-left: 18px; margin-right: initial; } .jqx-tabs[right-to-left]:not([tab-text-orientation=vertical]):not([vertical]) .jqx-tab-close-button, .jqx-tabs[right-to-left]:not([tab-text-orientation=vertical]):not([vertical]) .jqx-tab-group-arrow { left: 2px; right: initial; } @charset "UTF-8"; /* .jqx-tank */ jqx-tank { padding-left: 5px; padding-right: 5px; width: var(--jqx-tank-default-width); height: var(--jqx-tank-default-height); } jqx-tank.jqx-element { overflow: visible; border: none; background: none; } jqx-tank.jqx-scale-far .jqx-tick { top: initial; } jqx-slider * { box-sizing: border-box; } jqx-slider:focus { outline: none; } jqx-slider.jqx-element { overflow: visible; border: none; background: none; } jqx-slider .jqx-container { overflow: visible; } jqx-slider .jqx-scale { position: relative; user-select: none; pointer-events: none; } jqx-slider .jqx-label { position: absolute; float: left; white-space: nowrap; font-family: inherit; font-size: inherit; color: var(--jqx-background-color); } jqx-slider .jqx-tooltip { z-index: 1; } jqx-slider .jqx-tooltip-content { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } jqx-slider .jqx-track-container { touch-action: none; } jqx-slider .jqx-track-ticks-container { position: absolute; width: 100%; height: 100%; pointer-events: none; } jqx-slider { /* Value ranges: the coloured bands marking the normal and abnormal parts of the scale. They sit behind the fill, so a filled tank still shows which band its level is in. */ } jqx-slider .jqx-ranges { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } jqx-slider .jqx-ranges .jqx-range { position: absolute; background: var(--jqx-base-500); } jqx-slider[orientation=vertical] .jqx-ranges .jqx-range { left: 0; width: 100%; } jqx-slider[orientation=horizontal] .jqx-ranges .jqx-range { top: 0; height: 100%; } jqx-slider[ticks-visibility=major] .jqx-tick-minor, jqx-slider[ticks-visibility=major] .jqx-tick, jqx-slider[ticks-visibility=none] .jqx-tick-minor, jqx-slider[ticks-visibility=none] .jqx-tick { display: none; } jqx-slider[labels-visibility=endPoints] .jqx-label-middle { visibility: hidden; } jqx-slider[labels-visibility=none] .jqx-label { visibility: hidden; } .jqx-tank * { box-sizing: border-box; } .jqx-tank .jqx-container { overflow: visible; } .jqx-tank .jqx-track { height: 100%; width: calc(100% - var(--jqx-tank-scale-size) - 4px); min-width: var(--jqx-tank-minimum-track-size); position: relative; border: solid var(--jqx-border); border-width: var(--jqx-border-width); background-color: var(--jqx-background); float: left; margin-top: 0; margin-bottom: 0; margin-left: 2px; margin-right: 2px; border-top-left-radius: var(--jqx-border-top-left-radius); border-bottom-left-radius: var(--jqx-border-bottom-left-radius); border-top-right-radius: var(--jqx-border-top-right-radius); border-bottom-right-radius: var(--jqx-border-bottom-right-radius); touch-action: none; } .jqx-tank .jqx-track.track-hovered { cursor: pointer; } .jqx-tank .jqx-track-ticks-container { position: absolute; width: 100%; height: 100%; pointer-events: none; } .jqx-tank { /* Value ranges: the coloured bands marking the normal and abnormal parts of the scale. They sit behind the fill, so a filled tank still shows which band its level is in. */ } .jqx-tank .jqx-ranges { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .jqx-tank .jqx-ranges .jqx-range { position: absolute; background: var(--jqx-base-500); } .jqx-tank[orientation=vertical] .jqx-ranges .jqx-range { left: 0; width: 100%; } .jqx-tank[orientation=horizontal] .jqx-ranges .jqx-range { top: 0; height: 100%; } .jqx-tank .jqx-value { width: 100%; height: 0; background-color: var(--jqx-primary); border-color: var(--jqx-primary); position: absolute; } .jqx-tank .jqx-label { position: absolute; float: left; white-space: nowrap; font-family: inherit; font-size: inherit; color: var(--jqx-background-color); } .jqx-tank .jqx-thumb { display: none; position: absolute; width: var(--jqx-tank-thumb-width); height: var(--jqx-tank-thumb-height); transform: scale(0); transition: transform 0.2s ease-out; left: calc(-1 * var(--jqx-tank-thumb-width) * 2); top: calc(-1 * var(--jqx-tank-thumb-height) / 2); border-radius: 50%; background-color: var(--jqx-primary); } .jqx-tank .jqx-thumb:before { transform: scale(1.1) rotate(45deg); border: 1px solid var(--jqx-primary); border-radius: 50% 0 50% 50%; background-color: var(--jqx-primary); width: 100%; height: 100%; display: block; content: ""; } .jqx-tank .jqx-thumb-label-container { overflow: hidden; text-overflow: ellipsis; width: var(--jqx-tank-thumb-width); height: var(--jqx-tank-thumb-height); position: absolute; top: 0; left: 0; } .jqx-tank .jqx-scale { position: relative; user-select: none; pointer-events: none; float: left; margin-top: var(--jqx-border-width); margin-left: initial; height: calc(100% - var(--jqx-border-width)); width: var(--jqx-tank-scale-size); max-width: calc(100% - var(--jqx-tank-minimum-track-size) - 4px); /* 4px is the margin left/right of the track */ } .jqx-tank .jqx-scale-near .jqx-tick { bottom: initial; right: 0; } .jqx-tank .jqx-scale-near .jqx-label { bottom: initial; right: calc(var(--jqx-tank-tick-size) + 2px); } .jqx-tank .jqx-scale-far .jqx-label { left: calc(var(--jqx-tank-tick-size) + 2px); top: initial; } .jqx-tank .jqx-tooltip { position: absolute; display: flex; align-items: center; justify-content: center; border: 1px solid var(--jqx-border); width: var(--jqx-tank-tooltip-width); height: var(--jqx-tank-tooltip-height); padding: 5px; background-color: var(--jqx-background); color: var(--jqx-background-color); opacity: 0.7; left: calc(-1 * var(--jqx-tank-tooltip-width) - 10.5px); top: calc(-1 * var(--jqx-tank-tooltip-height) / 2); z-index: 1; } .jqx-tank .jqx-tooltip:before { content: ""; width: 0; height: 0; border-right: none; border-left: 6px solid var(--jqx-border); border-top: 6px solid transparent; border-bottom: 6px solid transparent; position: absolute; top: calc(50% - 6px); right: -7px; left: auto; } .jqx-tank .jqx-tooltip.jqx-hidden { display: none; } .jqx-tank .jqx-tooltip-content { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .jqx-tank .jqx-tick { position: absolute; background-color: var(--jqx-background-color); float: initial; width: var(--jqx-tank-tick-size); height: 1px; } .jqx-tank .jqx-tick-minor { width: var(--jqx-tank-minor-tick-size); height: 1px; } .jqx-tank:focus { outline: none; } .jqx-tank:focus .jqx-track { border-style: solid; border-color: var(--jqx-outline); border-width: var(--jqx-border-width); } .jqx-tank:active .jqx-track { cursor: n-resize; } .jqx-tank:not([animation=none]) .jqx-value { transition: height 0.15s ease-out, margin-top 0.15s ease-out; } .jqx-tank:not([animation=none]) .jqx-value.disable-animation { transition: none; } .jqx-tank:not([animation=none]) .jqx-bubble-container { position: relative; overflow: hidden; touch-action: none; width: 100%; height: 100%; user-select: none; } .jqx-tank:not([animation=none]) .bubble { user-select: none; pointer-events: none; border-radius: 50%; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2), inset 0px 10px 25px 5px rgb(255, 255, 255); width: 50px; height: 50px; } .jqx-tank:not([animation=none]) .bubble1 { left: 10%; top: 40%; animation: animateBubble 12.5s linear infinite, sideWays 5s ease-in-out infinite alternate; transform: scale(0.25); } .jqx-tank:not([animation=none]) .bubble2 { left: 5%; top: 35%; animation: animateBubble 15s linear infinite, sideWays 4.5s ease-in-out infinite alternate; transform: scale(0.2); } .jqx-tank:not([animation=none]) .bubble3 { left: 0; top: 50%; animation: animateBubble 10s linear infinite, sideWays 7s ease-in-out infinite alternate; transform: scale(0.3); } .jqx-tank:not([animation=none]) .bubble4 { left: 10%; top: 60%; animation: animateBubble 7s linear infinite, sideWays 11s ease-in-out infinite alternate; transform: scale(0.275); } .jqx-tank:not([animation=none]) .bubble5 { left: 8%; top: 70%; animation: animateBubble 14.5s linear infinite, sideWays 8s ease-in-out infinite alternate; transform: scale(0.35); } .jqx-tank:not([animation=none])[disabled] .bubble, .jqx-tank:not([animation=none])[inverted] .bubble, .jqx-tank:not([animation=none])[orientation=horizontal] .bubble { display: none; } .jqx-tank[readonly] .jqx-track.track-hovered, .jqx-tank[disabled] .jqx-track.track-hovered { cursor: default; } .jqx-tank[readonly]:active .jqx-track, .jqx-tank[disabled]:active .jqx-track { cursor: default; } .jqx-tank[inverted] .jqx-thumb { top: calc(100% - var(--jqx-tank-thumb-height) / 2); margin-left: initial; margin-top: initial; } .jqx-tank[inverted] .jqx-tooltip { left: calc(-1 * var(--jqx-tank-tooltip-width) - 10.5px); top: calc(100% - 1 * var(--jqx-tank-tooltip-height) / 2); } .jqx-tank[inverted]:focus .jqx-thumb { top: calc(100% - var(--jqx-tank-thumb-height) / 2); } .jqx-tank[inverted][tooltip-position=far] .jqx-tooltip { top: calc(100% - var(--jqx-tank-tooltip-height) / 2); } .jqx-tank[inverted][tooltip-position=far][scale-position=none] .jqx-tooltip { left: calc(-100% - 7px); } .jqx-tank[inverted][tooltip-position=near] .jqx-tooltip { left: calc(-1 * var(--jqx-tank-tooltip-width) - 10.5px); top: calc(100% - var(--jqx-tank-tooltip-height) / 2); } .jqx-tank[inverted][orientation=vertical] .jqx-thumb { top: calc(100% - var(--jqx-tank-thumb-height) / 2); } .jqx-tank[ticks-visibility=none] .jqx-tick-minor, .jqx-tank[ticks-visibility=none] .jqx-tick { display: none; } .jqx-tank[ticks-visibility=none] .jqx-scale-near .jqx-label { right: 2px; } .jqx-tank[ticks-visibility=none] .jqx-scale-far .jqx-label { left: 2px; top: initial; } .jqx-tank[ticks-visibility=major] .jqx-tick-minor, .jqx-tank[ticks-visibility=major] .jqx-tick { display: none; } .jqx-tank[ticks-position=track] .jqx-tick { width: 100%; } .jqx-tank[ticks-position=track] .jqx-tick-minor { width: 80%; left: 50%; transform: translateX(-50%); } .jqx-tank[ticks-position=track] .jqx-scale-near .jqx-label { right: 2px; } .jqx-tank[ticks-position=track] .jqx-scale-far .jqx-label { left: 2px; top: initial; } .jqx-tank[tooltip-position=far] .jqx-tooltip { left: calc(100% + 10.5px); top: calc(-1 * var(--jqx-tank-tooltip-height) / 2); } .jqx-tank[tooltip-position=far] .jqx-tooltip:before { border-left: none; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-right: 6px solid var(--jqx-border); top: calc(50% - 6px); left: -7px; } .jqx-tank[show-thumb-label] .jqx-thumb { left: calc(-1 * var(--jqx-tank-thumb-width) / 2); overflow: visible; display: initial; } .jqx-tank[show-thumb-label] .jqx-thumb-label { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 0.65rem; font-family: var(--jqx-font-family); user-select: none; color: var(--jqx-background-color); } .jqx-tank[show-thumb-label]:focus .jqx-thumb { left: calc(-1 * var(--jqx-tank-thumb-width) - var(--jqx-tank-thumb-width) / 2 - 2px); /* 2px comes from the border */ transform: scale(1); } .jqx-tank[show-thumb-label]:not([animation=none]) .jqx-thumb { transition: transform 0.2s ease-out, left 0.2s ease-in-out, top 0.2s ease-in-out; } .jqx-tank[show-thumb-label][thumb-label-position=far] .jqx-thumb { left: calc(100% - var(--jqx-tank-thumb-width) / 2); } .jqx-tank[show-thumb-label][orientation=horizontal] .jqx-thumb { left: 100%; top: calc(-1 * var(--jqx-tank-thumb-width) / 2); } .jqx-tank[show-thumb-label][orientation=horizontal][inverted] .jqx-thumb { left: calc(-1 * var(--jqx-tank-thumb-width) / 2); } .jqx-tank[show-thumb-label][orientation=horizontal][thumb-label-position=far] .jqx-thumb { left: 100%; top: calc(100% - var(--jqx-tank-thumb-width) / 2); } .jqx-tank[show-thumb-label][orientation=horizontal][thumb-label-position=far][inverted] .jqx-thumb { left: calc(-1 * var(--jqx-tank-thumb-width) / 2); } .jqx-tank[show-thumb-label][orientation=horizontal][thumb-label-position=near] .jqx-thumb { left: 100%; top: calc(-1 * var(--jqx-tank-thumb-width) / 2); } .jqx-tank[thumb-label-position=far] .jqx-thumb:before { border: 1px solid var(--jqx-primary); border-radius: 50% 50% 50% 0; } .jqx-tank[thumb-label-position=far]:focus .jqx-thumb { left: calc(100% + var(--jqx-tank-thumb-width) / 2 + 2px); /* 2px comes from the border */ } .jqx-tank[scale-position=none] .jqx-track { height: 100%; width: 100%; position: relative; border: solid var(--jqx-border); border-width: var(--jqx-border-width); margin-top: 0; margin-bottom: 0; margin-left: 0; margin-right: 0; } .jqx-tank[scale-position=none]:focus .jqx-track { border-style: solid; border-color: var(--jqx-outline); border-width: var(--jqx-border-width); } .jqx-tank[scale-position=none][tooltip-position=near] .jqx-tooltip { top: calc(-1 * var(--jqx-tank-tooltip-height) / 2); } .jqx-tank[scale-position=both] .jqx-track { width: calc(100% - 2 * var(--jqx-tank-scale-size) - 4px); } .jqx-tank[scale-position=both] .jqx-scale { width: var(--jqx-tank-scale-size); height: 100%; max-width: 47%; } .jqx-tank[labels-visibility=endPoints] .jqx-label-middle { visibility: hidden; } .jqx-tank[labels-visibility=none] .jqx-label { visibility: hidden; } .jqx-tank[orientation=vertical][thumb-label-position=far] .jqx-thumb:before { border: 1px solid var(--jqx-primary); border-radius: 50% 50% 50% 0; } .jqx-tank[orientation=vertical]:not([animation=none]) .jqx-value { transition: height 0.15s ease-out, margin-top 0.15s ease-out; } .jqx-tank[orientation=vertical]:not([animation=none]) .jqx-value.disable-animation { transition: none; } .jqx-tank[orientation=horizontal] { padding-top: 5px; padding-bottom: 5px; padding-left: initial; padding-right: initial; } .jqx-tank[orientation=horizontal]:active .jqx-track { cursor: w-resize; } .jqx-tank[orientation=horizontal] .jqx-track { height: calc(100% - var(--jqx-tank-scale-size) - 4px); min-height: var(--jqx-tank-minimum-track-size); width: 100%; background-color: transparent; margin-top: 2px; margin-bottom: 2px; } .jqx-tank[orientation=horizontal] .jqx-value { height: 100%; width: 0; } .jqx-tank[orientation=horizontal] .jqx-thumb { margin-left: calc(-1 * var(--jqx-tank-thumb-width) / 2); } .jqx-tank[orientation=horizontal] .jqx-thumb:before { border-radius: 50% 50% 0 50%; } .jqx-tank[orientation=horizontal] .jqx-scale { width: 100%; float: left; height: calc(var(--jqx-tank-scale-size)); margin-left: var(--jqx-border-width); } .jqx-tank[orientation=horizontal] .jqx-scale-near .jqx-tick { bottom: 0; right: initial; } .jqx-tank[orientation=horizontal] .jqx-scale-near .jqx-label { bottom: calc(var(--jqx-tank-tick-size) + 2px); right: initial; } .jqx-tank[orientation=horizontal] .jqx-scale-far .jqx-tick { top: 0; } .jqx-tank[orientation=horizontal] .jqx-scale-far .jqx-label { top: calc(var(--jqx-tank-tick-size) + 2px); left: initial; } .jqx-tank[orientation=horizontal] .jqx-tooltip { top: calc(-1 * var(--jqx-tank-tooltip-height) - 12px); left: calc(100% - var(--jqx-tank-tooltip-width) / 2); } .jqx-tank[orientation=horizontal] .jqx-tooltip:before { content: ""; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid var(--jqx-border); position: absolute; top: 100%; left: calc(var(--jqx-tank-tooltip-width) / 2 - 6px); } .jqx-tank[orientation=horizontal] .jqx-tick { float: left; width: 1px; height: var(--jqx-tank-tick-size); } .jqx-tank[orientation=horizontal] .jqx-tick-minor { height: var(--jqx-tank-minor-tick-size); width: 1px; } .jqx-tank[orientation=horizontal]:not([animation=none]) .jqx-value { transition: width 0.15s ease-out, margin-left 0.15s ease-out; } .jqx-tank[orientation=horizontal]:not([animation=none]) .jqx-value.disable-animation { transition: none; } .jqx-tank[orientation=horizontal][inverted] .jqx-tooltip { top: calc(-1 * var(--jqx-tank-tooltip-height) - 12px); left: calc(-1 * var(--jqx-tank-tooltip-width) / 2); } .jqx-tank[orientation=horizontal][inverted]:focus .jqx-thumb { left: calc(-1 * var(--jqx-tank-thumb-width) / 2); } .jqx-tank[orientation=horizontal][inverted][tooltip-position=far] .jqx-tooltip { left: calc(-1 * var(--jqx-tank-tooltip-width) / 2); top: calc(100% + 12px); } .jqx-tank[orientation=horizontal][ticks-visibility=none] .jqx-scale-near .jqx-label { bottom: 2px; } .jqx-tank[orientation=horizontal][ticks-visibility=none] .jqx-scale-far .jqx-label { top: 2px; left: initial; } .jqx-tank[orientation=horizontal][ticks-position=track] .jqx-tick { height: 100%; width: 1px; } .jqx-tank[orientation=horizontal][ticks-position=track] .jqx-tick-minor { height: 80%; top: 50%; transform: translateY(-50%); } .jqx-tank[orientation=horizontal][ticks-position=track] .jqx-scale-near .jqx-label { bottom: 2px; } .jqx-tank[orientation=horizontal][ticks-position=track] .jqx-scale-far .jqx-label { top: 2px; left: initial; } .jqx-tank[orientation=horizontal][tooltip-position=near][inverted] .jqx-tooltip { top: calc(-1 * var(--jqx-tank-tooltip-height) - 12px); left: calc(-1 * var(--jqx-tank-tooltip-width) / 2); } .jqx-tank[orientation=horizontal][tooltip-position=far] .jqx-tooltip { top: calc(100% + 12px); left: calc(100% - var(--jqx-tank-tooltip-width) / 2); } .jqx-tank[orientation=horizontal][tooltip-position=far] .jqx-tooltip:before { border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid var(--jqx-border); border-top: 0; position: absolute; left: calc(var(--jqx-tank-tooltip-width) / 2 - 6px); top: -7px; } .jqx-tank[orientation=horizontal][show-thumb-label]:focus .jqx-thumb { left: 100%; top: calc(-1 * var(--jqx-tank-thumb-height) - var(--jqx-tank-thumb-height) / 2 - 2px); /* 2px comes from the border */ } .jqx-tank[orientation=horizontal][show-thumb-label][thumb-label-position=far]:focus .jqx-thumb { top: calc(100% + var(--jqx-tank-thumb-height) / 2); } .jqx-tank[orientation=horizontal][thumb-label-position=far] .jqx-thumb:before { border-radius: 0 50% 50% 50%; } .jqx-tank[orientation=horizontal][thumb-label-position=far]:focus .jqx-thumb { left: 100%; } .jqx-tank[orientation=horizontal][scale-position=none] .jqx-track { height: 100%; width: 100%; position: relative; border: solid var(--jqx-border); border-width: var(--jqx-border-width); background-color: transparent; margin-top: 0; margin-bottom: 0; } .jqx-tank[orientation=horizontal][scale-position=both] .jqx-track { height: calc(100% - 2 * var(--jqx-tank-scale-size) - 4px); } .jqx-tank[orientation=horizontal][scale-position=both] .jqx-scale { width: 100%; height: var(--jqx-tank-scale-size); } @keyframes sideWays { 0% { margin-left: -10%; } 100% { margin-left: 55%; } } @keyframes animateBubble { 0% { margin-top: 100%; } 100% { margin-top: -100%; } } /* ── Quality ──────────────────────────────────────────────────────────────── A reading whose quality is not good must not look like one that is. The value is dimmed for uncertain, hatched for bad and faded for stale, and a word says which - the word first, the treatment second, so it is legible without colour. Scoped to the attribute, so an instrument that never sets quality is untouched. */ jqx-tank[quality]:not([quality=good]) { position: relative; } jqx-tank[quality]:not([quality=good])::after { content: attr(quality); position: absolute; top: 2px; right: 2px; z-index: 2; padding: 0 4px; font-size: 10px; font-weight: 600; line-height: 1.4; letter-spacing: 0.04em; text-transform: uppercase; color: var(--jqx-industrial-alarm-warning-text, var(--jqx-warning)); background: var(--jqx-background); border: 1px solid currentColor; border-radius: 2px; pointer-events: none; } jqx-tank[quality=bad]::after { color: var(--jqx-industrial-alarm-critical-text, var(--jqx-error)); } jqx-tank[quality=uncertain] .jqx-value { opacity: 0.6; } jqx-tank[quality=stale] .jqx-value { opacity: 0.4; } jqx-tank[quality=bad] .jqx-value { opacity: 0.55; background-image: repeating-linear-gradient(45deg, transparent 0 5px, rgba(0, 0, 0, 0.35) 5px 10px); } jqx-tank[quality=bad] .jqx-thumb-label { text-decoration: line-through; } jqx-tank[right-to-left] .jqx-label, jqx-tank[right-to-left] .jqx-tooltip-content { direction: rtl; } jqx-tank[right-to-left][show-thumb-label][orientation=horizontal] .jqx-thumb { left: calc(-1 * var(--jqx-tank-thumb-width) / 2); margin-left: initial; } jqx-tank[right-to-left][show-thumb-label][orientation=horizontal][inverted] .jqx-thumb { left: 100%; margin-left: calc(-1 * var(--jqx-tank-thumb-width) / 2); } jqx-tank[right-to-left][show-thumb-label][orientation=horizontal][thumb-label-position=far] .jqx-thumb { left: calc(-1 * var(--jqx-tank-thumb-width) / 2); } jqx-tank[right-to-left][show-thumb-label][orientation=horizontal][thumb-label-position=far][inverted] .jqx-thumb { top: calc(100% - var(--jqx-tank-thumb-width) / 2); } jqx-tank[right-to-left][show-thumb-label][orientation=horizontal][thumb-label-position=far][inverted]:focus .jqx-thumb { top: calc(100% + var(--jqx-tank-thumb-height) / 2); } jqx-tank[right-to-left][show-thumb-label][orientation=horizontal][thumb-label-position=near][inverted] .jqx-thumb { top: calc(-1 * var(--jqx-tank-thumb-width) / 2); } jqx-tank[right-to-left][show-thumb-label][orientation=horizontal][thumb-label-position=near][inverted]:focus .jqx-thumb { top: calc(-1 * var(--jqx-tank-thumb-height) - var(--jqx-tank-thumb-height) / 2 - 2px); } /* jqx-text-box */ input.jqx-input, .jqx-prompt-textarea.jqx-input { border-width: var(--jqx-border-width); font-family: var(--jqx-font-family); font-size: var(--jqx-font-size); background: var(--jqx-background); border-style: solid; border-color: var(--jqx-border); color: var(--jqx-background-color); border-top-left-radius: var(--jqx-border-top-left-radius); border-top-right-radius: var(--jqx-border-top-right-radius); border-bottom-left-radius: var(--jqx-border-bottom-left-radius); border-bottom-right-radius: var(--jqx-border-bottom-right-radius); padding-left: var(--jqx-editor-label-padding); padding-right: var(--jqx-editor-label-padding); padding-top: 0px; padding-bottom: 0px; height: var(--jqx-editor-height); outline: none; text-align: var(--jqx-text-box-text-align); box-sizing: border-box; } input.jqx-input:focus, .jqx-prompt-textarea.jqx-input:focus { border-color: var(--jqx-outline); } input.jqx-input:hover, .jqx-prompt-textarea.jqx-input:hover { border-color: var(--jqx-ui-state-border-hover); } input.jqx-input:disabled, .jqx-prompt-textarea.jqx-input:disabled { border-color: var(--jqx-disabled); outline: none; } input.jqx-input::selection, .jqx-prompt-textarea.jqx-input::selection { background: var(--jqx-editor-selection); color: var(--jqx-editor-selection-color); } textarea.jqx-prompt-textarea { padding: 10px !important; } textarea.jqx-prompt-textarea:focus { border-color: var(--jqx-primary) !important; } textarea.jqx-input::selection { background: var(--jqx-editor-selection); color: var(--jqx-editor-selection-color); } .jqx-input-drop-down-menu { display: block; transform: scaleY(0); transform-origin: top left; opacity: 0; position: absolute; top: 100%; left: 0; z-index: var(--jqx-editor-drop-down-z-index); float: left; padding: 2px; margin: var(--jqx-list-item-vertical-offset) var(--jqx-list-item-horizontal-offset); color: var(--jqx-background-color); background-color: var(--jqx-background); border: 1px solid var(--jqx-border); border-top-left-radius: var(--jqx-border-top-left-radius); border-top-right-radius: var(--jqx-border-top-right-radius); border-bottom-left-radius: var(--jqx-border-bottom-left-radius); border-bottom-right-radius: var(--jqx-border-bottom-right-radius); box-shadow: var(--jqx-elevation-8); font-size: var(--jqx-font-size); font-family: var(--jqx-font-family); overflow: hidden; width: auto; height: auto; --jqx-input-drop-down-menu-width: auto; --jqx-input-drop-down-menu-height: 200px; /*min-width: 150px;*/ min-height: 0; } .jqx-input-drop-down-menu[top] { transform-origin: bottom; } .jqx-input-drop-down-menu:not([animation=none]) { transition: opacity 0.2s, transform 0.2s ease-out; } .jqx-input-drop-down-menu.jqx-container { box-shadow: none; padding: 0; margin: 0; } .jqx-input-drop-down-menu .jqx-scroll-viewer-content-container, .jqx-input-drop-down-menu .jqx-scroll-viewer-container, .jqx-input-drop-down-menu > .jqx-container { /*min-width: 150px;*/ width: var(--jqx-input-drop-down-menu-width); max-height: calc(var(--jqx-input-drop-down-menu-height) - 6px); } .jqx-input-drop-down-menu .jqx-scroll-viewer-content-container { padding: 0px; max-height: initial; } .jqx-input-drop-down-menu ul { list-style: none; padding: 0; margin: 0; width: 100%; height: auto; } .jqx-input-drop-down-menu ul[allow-add-new] .add-new-item { display: flex; justify-content: space-between; } .jqx-input-drop-down-menu ul[allow-add-new] input { border: none; border-bottom: 1px solid var(--jqx-border); border-radius: 0px; width: 100%; } .jqx-input-drop-down-menu ul[allow-add-new] input:focus, .jqx-input-drop-down-menu ul[allow-add-new] input:hover { border-bottom-color: var(--jqx-primary); } .jqx-input-drop-down-menu ul[allow-add-new] jqx-button { border-radius: 50px; min-width: 30px; width: 30px; } .jqx-input-drop-down-menu ul[allow-add-new] li { padding-right: 10px; } .jqx-input-drop-down-menu ul[allow-add-new] li.selected a span[data-content] { text-decoration: line-through; } .jqx-input-drop-down-menu ul[allow-add-new] li.selected a span.close-button { text-decoration: none !important; } .jqx-input-drop-down-menu ul[allow-add-new] li a { white-space: pre-wrap; display: flex; justify-content: space-between; } .jqx-input-drop-down-menu ul.scroll { width: calc(100% - var(--jqx-scroll-bar-size) - 2px); } .jqx-input-drop-down-menu ul li { padding-bottom: 1px; } .jqx-input-drop-down-menu ul li:last-child { padding-bottom: 0; } .jqx-input-drop-down-menu ul li a { display: block; padding: 8px 12px; border-top-left-radius: var(--jqx-item-border-top-left-radius); border-top-right-radius: var(--jqx-item-border-top-right-radius); border-bottom-left-radius: var(--jqx-item-border-bottom-left-radius); border-bottom-right-radius: var(--jqx-item-border-bottom-right-radius); clear: both; font-weight: normal; white-space: nowrap; color: var(--jqx-background-color); text-decoration: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .jqx-input-drop-down-menu ul li a:hover { color: var(--jqx-ui-state-color-hover); background: var(--jqx-ui-state-hover); } .jqx-input-drop-down-menu ul li a.icon { position: relative; padding-left: var(--jqx-column-icon-size); } .jqx-input-drop-down-menu ul li a.icon:after { content: ""; position: absolute; left: 0; top: 0; width: var(--jqx-column-icon-size); height: 100%; background-repeat: no-repeat; background-position: center; } .jqx-input-drop-down-menu:not(.jqx-check-input-drop-down-menu) li.active a { color: var(--jqx-ui-state-color-focus); background: var(--jqx-ui-state-focus); text-decoration: none; outline: 0; } .jqx-input-drop-down-menu[open] { transform: scale(1); opacity: 1; } .jqx-multi-combo-input-scroll-viewer .jqx-scroll-viewer-content-container { width: var(--jqx-input-drop-down-menu-width); max-height: initial; } .jqx-multi-combo-input-scroll-viewer .jqx-scroll-viewer-container, .jqx-multi-combo-input-scroll-viewer > .jqx-container { /*min-width: 150px;*/ width: var(--jqx-input-drop-down-menu-width); max-height: calc(var(--jqx-input-drop-down-menu-height) - 6px); } .jqx-drop-down jqx-list-item[focus] .jqx-overlay { background-color: var(--jqx-ui-state-focus); } .jqx-drop-down jqx-list-item[focus] .jqx-content { color: var(--jqx-ui-state-color-focus); border-color: var(--jqx-ui-state-border-focus); } .jqx-drop-down jqx-list-item[focus][selected] .jqx-overlay { background-color: var(--jqx-ui-state-selected); } .jqx-drop-down jqx-list-item[focus][selected] .jqx-content { color: var(--jqx-ui-state-color-selected); border-color: var(--jqx-ui-state-border-selected); } jqx-text-box { --jqx-outline: var(--jqx-primary); display: inline-block; border: none; width: var(--jqx-text-box-default-width); height: var(--jqx-text-box-default-height); overflow: visible; background: var(--jqx-background); } jqx-text-box input::selection { background: var(--jqx-editor-selection); color: var(--jqx-editor-selection-color); } jqx-text-box.jqx-element { background: var(--jqx-background); } jqx-text-box[disabled] { border-color: var(--jqx-disabled); outline: none; } jqx-text-box[hover] input, jqx-text-box:focus input.hovered { border-color: var(--jqx-ui-state-border-hover); } jqx-text-box input:focus { border-color: var(--jqx-outline); } jqx-text-box input:hover { border-color: var(--jqx-ui-state-border-hover); } .jqx-text-box input, .jqx-text-box.jqx-container { width: 100%; height: 100%; color: inherit; font-family: inherit; position: relative; overflow: visible; } .jqx-text-box .jqx-container { width: 100%; height: 100%; color: inherit; font-family: inherit; position: relative; overflow: visible; } .jqx-text-box > .jqx-container > .jqx-content { height: 100%; } .jqx-text-box > .jqx-container > .jqx-content > div { width: 100%; height: 100%; outline: none; border-width: var(--jqx-border-width); border-style: solid; border-color: var(--jqx-border); border-top-left-radius: var(--jqx-border-top-left-radius); border-top-right-radius: var(--jqx-border-top-right-radius); border-bottom-left-radius: var(--jqx-border-bottom-left-radius); border-bottom-right-radius: var(--jqx-border-bottom-right-radius); padding: var(--jqx-editor-label-padding); color: inherit; font-family: inherit; font-size: inherit; background-color: transparent; font-weight: inherit; font-style: inherit; overflow: hidden; } .jqx-text-box > .jqx-container > .jqx-content > div > label { color: transparent; } .jqx-text-box > .jqx-container > .jqx-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: 0.5; text-overflow: ellipsis; white-space: nowrap; border: var(--jqx-border-width); border-style: solid; border-color: transparent; } .jqx-text-box[disabled] input, .jqx-text-box[readonly] input { user-select: none; -webkit-user-select: none; -ms-user-select: none; -moz-user-select: none; } .jqx-text-box .jqx-label, .jqx-text-box .jqx-hint { display: none; position: absolute; } .jqx-text-box[label] .jqx-label { position: absolute; left: 0; bottom: 100%; font-size: 12px; width: 100%; display: block; padding: var(--jqx-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; } .jqx-text-box[hint] .jqx-hint { position: absolute; left: 0; bottom: 100%; font-size: 12px; width: 100%; display: block; padding: var(--jqx-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; opacity: 0; transition: opacity 0.2s cubic-bezier(0.4, 0, 0.6, 1); top: 100%; bottom: initial; } .jqx-text-box[hint][focus] .jqx-hint { opacity: 1; transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .jqx-text-box .jqx-drop-down { font-family: inherit; } .jqx-text-box:focus.hovered input { border-color: var(--jqx-ui-state-border-hover); } .jqx-text-box[right-to-left] > .jqx-container > .jqx-content { direction: rtl; } .jqx-text-box[right-to-left] .jqx-label, .jqx-text-box[right-to-left] .jqx-hint { direction: rtl; } jqx-text-area { --jqx-outline: var(--jqx-primary); display: inline-block; width: var(--jqx-text-box-default-width); overflow: visible; background: var(--jqx-background); border: 1px solid var(--jqx-border); border-top-left-radius: var(--jqx-border-top-left-radius); border-top-right-radius: var(--jqx-border-top-right-radius); border-bottom-left-radius: var(--jqx-border-bottom-left-radius); border-bottom-right-radius: var(--jqx-border-bottom-right-radius); height: calc(1.5 * var(--jqx-text-box-default-height)); } jqx-text-area textarea { margin: 0; resize: none; } jqx-text-area textarea.jqx-input { border: none; text-overflow: ellipsis; } .jqx-text-area .jqx-container { width: 100%; height: 100%; color: inherit; font-family: inherit; position: relative; overflow: visible; } .jqx-text-area textarea.jqx-input { border-width: var(--jqx-border-width); font-family: var(--jqx-font-family); font-size: var(--jqx-font-size); background: var(--jqx-background); border-color: var(--jqx-border); color: var(--jqx-background-color); border-top-left-radius: var(--jqx-border-top-left-radius); border-top-right-radius: var(--jqx-border-top-right-radius); border-bottom-left-radius: var(--jqx-border-bottom-left-radius); border-bottom-right-radius: var(--jqx-border-bottom-right-radius); padding-left: var(--jqx-editor-label-padding); padding-right: var(--jqx-editor-label-padding); padding-top: 0px; padding-bottom: 0px; padding: var(--jqx-editor-label-padding); outline: none; text-align: var(--jqx-text-box-text-align); box-sizing: border-box; border: none; height: 100%; width: 100%; } .jqx-text-area-mention-menu { padding: 2px; margin: var(--jqx-list-item-vertical-offset) var(--jqx-list-item-horizontal-offset); color: var(--jqx-background-color); background-color: var(--jqx-background); border: 1px solid var(--jqx-border); border-top-left-radius: var(--jqx-border-top-left-radius); border-top-right-radius: var(--jqx-border-top-right-radius); border-bottom-left-radius: var(--jqx-border-bottom-left-radius); border-bottom-right-radius: var(--jqx-border-bottom-right-radius); box-shadow: var(--jqx-elevation-8); font-size: var(--jqx-font-size); font-family: var(--jqx-font-family); position: absolute; z-index: 999999; } .jqx-text-area-mention-menu .jqx-text-area-mention-menu-item { padding: 5px; } .jqx-text-area-mention-menu .jqx-text-area-mention-menu-item:hover, .jqx-text-area-mention-menu .jqx-text-area-mention-menu-item.selected { cursor: pointer; color: var(--jqx-ui-state-color-hover); background: var(--jqx-ui-state-hover); } .jqx-mention-trigger { font-size: 12px; opacity: 0.8; } .jqx-rich-textarea { position: absolute; top: 0px; height: 100%; width: 100%; background: var(--jqx-background); } .jqx-rich-textarea .jqx-container[toolbar-on-focus] { display: block; } .jqx-editor-toolbar-float.show { opacity: 1; } .jqx-editor-toolbar-float { display: flex; background: var(--jqx-surface); width: auto; position: absolute; border: 1px solid var(--jqx-border); border-radius: var(--jqx-border-radius); height: auto; min-height: 0px; padding: 0; box-shadow: var(--jqx-elevation-4); z-index: 999; margin-top: 3px; opacity: 0; transition: opacity ease-in-out 0.2s; } .jqx-rich-textarea ul, .jqx-rich-textarea ol { padding-inline-start: 1em; margin-top: 0px; } .jqx-rich-textarea ul[checklist] { position: relative; left: -10px; } .jqx-rich-textarea a.ctrl { cursor: pointer; } .jqx-rich-textarea .jqx-editor-editable { padding: 10px 5px !important; } .jqx-editor-toolbar-item-center { display: flex; align-items: center; justify-content: center; width: auto !important; min-width: 24px; } .jqx-editor-tooltip { font-family: var(--jqx-font-family); position: absolute; cursor: default; opacity: 0; visibility: hidden; transition: opacity 0.2s ease-in-out; z-index: 999999; } .jqx-editor-tooltip.open { visibility: visible; opacity: 0.9; } .jqx-editor-tooltip::before { content: attr(hover-tooltip); font-size: 13px; text-align: center; position: absolute; display: block; left: 50%; min-width: 50px; max-width: 150px; bottom: calc(100% + 10px); transform: translate(-50%); animation: fade-in 300ms ease; background: rgb(39, 39, 39); border-radius: 4px; padding: 6px; color: #ffffff; z-index: 1; } .jqx-editor-tooltip[tooltip-position=bottom]::before { bottom: auto; top: calc(100% + 10px); } jqx-input { --jqx-outline: var(--jqx-primary); display: inline-block; width: var(--jqx-text-box-default-width); height: var(--jqx-text-box-default-height); overflow: visible; background: var(--jqx-background); border: 1px solid var(--jqx-border); border-top-left-radius: var(--jqx-border-top-left-radius); border-top-right-radius: var(--jqx-border-top-right-radius); border-bottom-left-radius: var(--jqx-border-bottom-left-radius); border-bottom-right-radius: var(--jqx-border-bottom-right-radius); } jqx-input > option { display: none; } jqx-input > .jqx-container { display: flex; } jqx-input.jqx-element { background: var(--jqx-background); } jqx-input input::selection { background: var(--jqx-editor-selection); color: var(--jqx-editor-selection-color); } jqx-input input.jqx-input { border: none; text-overflow: ellipsis; } jqx-input:focus { border-color: var(--jqx-outline); } jqx-input:hover { border-color: var(--jqx-ui-state-border-hover); } jqx-input[disabled] { border-color: var(--jqx-disabled); outline: none; } jqx-input[drop-down-button-position=right] .jqx-input { width: calc(100% - var(--jqx-editor-addon-width)); } .jqx-input.jqx-container { display: flex; } .jqx-input.jqx-container, .jqx-input .jqx-container { width: 100%; height: 100%; color: inherit; font-family: inherit; position: relative; overflow: visible; } .jqx-input .jqx-drop-down-button { display: none; width: var(--jqx-editor-addon-width); height: 100%; flex-direction: column; color: var(--jqx-surface-color); border-left: 1px solid var(--jqx-border); background: var(--jqx-surface); border-top-right-radius: var(--jqx-border-top-right-radius); border-bottom-right-radius: var(--jqx-border-bottom-right-radius); outline: none; } .jqx-input .jqx-drop-down-button .arrow { display: flex; height: 100%; overflow: hidden; cursor: pointer; font-family: var(--jqx-font-family-icon); justify-content: center; align-items: center; font-size: var(--jqx-arrow-size); outline: none; } .jqx-input .jqx-drop-down-button .arrow:after { content: var(--jqx-icon-arrow-down); transition: opacity 0.2s, transform 0.2s ease-out; } .jqx-input .jqx-drop-down-button[open] .arrow:after { transform: rotate(-180deg); } .jqx-input .jqx-input { border: none; padding: var(--jqx-editor-label-padding); height: 100%; width: 100%; } .jqx-input[drop-down-button-position=left] .jqx-drop-down-button, .jqx-input[drop-down-button-position=right] .jqx-drop-down-button { display: flex; } .jqx-input[drop-down-button-position=left] .jqx-input, .jqx-input[drop-down-button-position=right] .jqx-input { width: calc(100% - var(--jqx-editor-addon-width)); } .jqx-input[drop-down-button-position=left][disabled] .jqx-drop-down-button, .jqx-input[drop-down-button-position=right][disabled] .jqx-drop-down-button { opacity: 0.5; } .jqx-input[drop-down-button-position=left] .jqx-drop-down-button { order: -1; border-right: 1px solid var(--jqx-border); border-left: none; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: var(--jqx-border-top-left-radius); border-bottom-left-radius: var(--jqx-border-bottom-left-radius); } .jqx-input[drop-down-button-position=left] .jqx-input { border-top-left-radius: 0px; border-bottom-left-radius: 0px; } .jqx-input[drop-down-button-position=left][readonly] .jqx-drop-down-button { border-right: none; } .jqx-input[drop-down-button-position=right] .jqx-input { border-top-right-radius: 0px; border-bottom-right-radius: 0px; } .jqx-input[focus] { border-color: var(--jqx-outline); } .jqx-input[focus]:not([disabled]) .jqx-drop-down-button { border-color: var(--jqx-outline); } .jqx-input[readonly] .jqx-drop-down-button { border-left: none; } .jqx-input[readonly]:not(.underlined):not(.outlined) input.jqx-input, .jqx-input[readonly]:not(.underlined):not(.outlined) textarea.jqx-input { padding: 0; cursor: pointer; padding-left: var(--jqx-editor-label-padding); outline: none; } .jqx-input[readonly]:not(.underlined):not(.outlined):not([opened]):not(:active) input.jqx-input, .jqx-input[readonly]:not(.underlined):not(.outlined):not([opened]):not(:active) textarea.jqx-input { background: var(--jqx-surface); color: var(--jqx-surface-color); } .jqx-input:not([disabled])[readonly]:hover .jqx-input, .jqx-input:not([disabled])[readonly]:hover .jqx-drop-down-button { background: var(--jqx-ui-state-hover); color: var(--jqx-ui-state-color-hover); } .jqx-input:not([disabled]) .jqx-drop-down-button:hover { background: var(--jqx-ui-state-hover); color: var(--jqx-ui-state-color-hover); } .jqx-input:not([disabled]) .jqx-drop-down-button[open], .jqx-input:not([disabled]) .jqx-drop-down-button:active { background: var(--jqx-ui-state-active); color: var(--jqx-ui-state-color-active); } .jqx-input:not([disabled])[readonly][open] .jqx-input, .jqx-input:not([disabled])[readonly][open] .jqx-drop-down-button, .jqx-input:not([disabled])[readonly]:active .jqx-input, .jqx-input:not([disabled])[readonly]:active .jqx-drop-down-button { background: var(--jqx-ui-state-active); color: var(--jqx-ui-state-color-active); } .jqx-input:not([disabled])[readonly][open] .jqx-input::-webkit-input-placeholder, .jqx-input:not([disabled])[readonly]:active .jqx-input::-webkit-input-placeholder { color: var(--jqx-ui-state-color-active); } .jqx-input:not([disabled])[readonly][open] .jqx-input::-moz-placeholder, .jqx-input:not([disabled])[readonly]:active .jqx-input::-moz-placeholder { color: var(--jqx-ui-state-color-active); } .jqx-input[disabled] .jqx-drop-down-button .arrow { cursor: initial; } .jqx-input[right-to-left] .jqx-input { direction: rtl; } .jqx-input[right-to-left][readonly] .jqx-drop-down-button { border-right: none; } .jqx-input[right-to-left][readonly] .jqx-input, .jqx-input[right-to-left][readonly]:not(.underlined):not(.outlined) .jqx-input { padding-left: initial; padding-right: var(--jqx-editor-label-padding); } .jqx-input[right-to-left][readonly] .jqx-drop-down-button { border-top-right-radius: 0px; border-bottom-right-radius: 0px; } .jqx-input[right-to-left][drop-down-button-position=right] .jqx-input { border-top-left-radius: 0px; border-bottom-left-radius: 0px; } .jqx-input-drop-down-menu[right-to-left] ul.scroll { width: 100%; } .jqx-input-drop-down-menu[right-to-left] li a.icon { padding-left: initial; padding-right: var(--jqx-column-icon-size); } .jqx-input-drop-down-menu[right-to-left] li a.icon:after { left: initial; right: 0; } jqx-number-input { --jqx-outline: var(--jqx-primary); display: inline-block; width: var(--jqx-text-box-default-width); height: var(--jqx-text-box-default-height); overflow: visible; background: var(--jqx-background); border: 1px solid var(--jqx-border); border-top-left-radius: var(--jqx-border-top-left-radius); border-top-right-radius: var(--jqx-border-top-right-radius); border-bottom-left-radius: var(--jqx-border-bottom-left-radius); border-bottom-right-radius: var(--jqx-border-bottom-right-radius); text-align: right; } jqx-number-input > .jqx-container { display: flex; } jqx-number-input.jqx-element { background: var(--jqx-background); } jqx-number-input input.jqx-input { border: none; text-overflow: ellipsis; } jqx-number-input[drop-down-button-position=right] .jqx-input { width: calc(100% - var(--jqx-editor-addon-width)); } .jqx-number-input[hide-spin-buttons] .nav { display: none; } .jqx-number-input[hide-spin-buttons] .jqx-input { width: 100%; border-top-right-radius: var(--jqx-border-top-right-radius); border-bottom-right-radius: var(--jqx-border-bottom-right-radius); } .jqx-number-input .nav { display: flex; width: var(--jqx-editor-addon-width); height: 100%; flex-direction: column; color: var(--jqx-surface-color); border-left: 1px solid var(--jqx-border); background: var(--jqx-surface); border-top-right-radius: var(--jqx-border-radius) !important; border-bottom-right-radius: var(--jqx-border-radius) !important; } .jqx-number-input .nav:hover, .jqx-number-input .nav:active { background: var(--jqx-surface); color: var(--jqx-surface-color); } .jqx-number-input .nav.jqx-drop-down-button:hover, .jqx-number-input .nav.jqx-drop-down-button:active { background: var(--jqx-surface); color: var(--jqx-surface-color); } .jqx-number-input .nav .up, .jqx-number-input .nav .down { display: flex; height: 50%; overflow: hidden; cursor: pointer; font-family: var(--jqx-font-family-icon); justify-content: center; align-items: center; outline: none; } .jqx-number-input .nav .up:hover, .jqx-number-input .nav .down:hover { background: var(--jqx-ui-state-hover); color: var(--jqx-ui-state-color-hover); } .jqx-number-input .nav .up:active, .jqx-number-input .nav .up[active], .jqx-number-input .nav .down:active, .jqx-number-input .nav .down[active] { background: var(--jqx-ui-state-active) !important; color: var(--jqx-ui-state-color-active) !important; } .jqx-number-input .nav .up { border-bottom: var(--jqx-border-width) solid var(--jqx-border); } .jqx-number-input .nav .up:after { content: var(--jqx-icon-arrow-up); } .jqx-number-input .nav .down:after { content: var(--jqx-icon-arrow-down); } .jqx-number-input[disabled] .nav .up, .jqx-number-input[disabled] .nav .down { pointer-events: none; } .jqx-number-input[right-to-left] > .jqx-container { direction: rtl; } .jqx-number-input[right-to-left] .nav { border-left: initial; border-right: var(--jqx-border-width) solid var(--jqx-border); border-top-left-radius: var(--jqx-border-top-right-radius); border-bottom-left-radius: var(--jqx-border-bottom-right-radius); border-top-right-radius: initial; border-bottom-right-radius: initial; order: initial; } .jqx-number-input[right-to-left] .jqx-input { border-top-left-radius: initial; border-bottom-left-radius: initial; border-top-right-radius: var(--jqx-border-top-right-radius); border-bottom-right-radius: var(--jqx-border-bottom-right-radius); } .jqx-number-input[right-to-left][focus] .nav { border-color: var(--jqx-outline); } jqx-number-pad { display: block; max-width: 320px; font-family: var(--jqx-font-family); overflow: hidden; } .jqx-numberpad-container { box-sizing: border-box; overflow: hidden; display: flex !important; width: 100%; flex-direction: column; } .jqx-numberpad-display { font-size: 32px; text-align: right; display: block; padding: 15px; margin-bottom: 15px; border: 2px solid var(--jqx-border); border-radius: 8px; background: var(--jqx-background); } .jqx-numberpad-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; } .jqx-numberpad-grid button { padding: 10px; font-size: 20px; border: none; border-radius: 8px; cursor: pointer; transition: background 0.2s; } .jqx-numberpad-grid button:hover { background: var(--jqx-ui-state-hover); } .jqx-numberpad-action { background: var(--jqx-primary); color: var(--jqx-primary-color); font-weight: bold; width: 100%; margin-top: 10px; height: 40px; border-radius: 8px; border: none; } .jqx-numberpad-backspace { background: var(--jqx-error); color: var(--jqx-error-color); font-weight: bold; } jqx-password-input { --jqx-outline: var(--jqx-primary); display: inline-block; width: var(--jqx-text-box-default-width); height: var(--jqx-text-box-default-height); overflow: visible; background: var(--jqx-background); border: 1px solid var(--jqx-border); border-top-left-radius: var(--jqx-border-top-left-radius); border-top-right-radius: var(--jqx-border-top-right-radius); border-bottom-left-radius: var(--jqx-border-bottom-left-radius); border-bottom-right-radius: var(--jqx-border-bottom-right-radius); } jqx-password-input > .jqx-container { display: flex; } jqx-password-input.jqx-element { background: var(--jqx-background); } jqx-password-input input.jqx-input { border: none; text-overflow: ellipsis; } .jqx-password-input input::-ms-reveal, .jqx-password-input input::-ms-clear { display: none; } .jqx-password-input .jqx-container { width: 100%; height: 100%; color: inherit; font-family: inherit; position: relative; overflow: visible; } .jqx-password-input .jqx-drop-down-button { background: transparent; border-color: transparent; display: block; border-left: none; } .jqx-password-input .jqx-drop-down-button:hover, .jqx-password-input .jqx-drop-down-button:active, .jqx-password-input .jqx-drop-down-button[active] { color: var(--jqx-primary) !important; background: transparent !important; border-color: transparent !important; } .jqx-password-input .jqx-drop-down-button .arrow:after { color: var(--jqx-background-color); content: var(--jqx-icon-visibility); } .jqx-password-input .jqx-drop-down-button .arrow.off:after { color: var(--jqx-background-color); content: var(--jqx-icon-visibility-off); } jqx-multi-input { --jqx-outline: var(--jqx-primary); display: inline-block; width: var(--jqx-text-box-default-width); height: var(--jqx-text-box-default-height); overflow: visible; background: var(--jqx-background); border: 1px solid var(--jqx-border); border-top-left-radius: var(--jqx-border-top-left-radius); border-top-right-radius: var(--jqx-border-top-right-radius); border-bottom-left-radius: var(--jqx-border-bottom-left-radius); border-bottom-right-radius: var(--jqx-border-bottom-right-radius); } jqx-multi-input > option { display: none; } jqx-multi-input > .jqx-container { display: flex; } jqx-multi-input.jqx-element { background: var(--jqx-background); } jqx-multi-input input::selection { background: var(--jqx-editor-selection); color: var(--jqx-editor-selection-color); } jqx-multi-input input.jqx-input { border: none; text-overflow: ellipsis; } jqx-multi-input[focus], jqx-multi-input:focus { border-color: var(--jqx-outline); } jqx-multi-input:hover { border-color: var(--jqx-ui-state-border-hover); } jqx-multi-input[disabled] { border-color: var(--jqx-disabled); outline: none; } jqx-multi-input[drop-down-button-position=left] .jqx-input, jqx-multi-input[drop-down-button-position=right] .jqx-input { width: calc(100% - var(--jqx-editor-addon-width)); } .jqx-multi-input .jqx-container { width: 100%; height: 100%; color: inherit; font-family: inherit; position: relative; overflow: visible; } .jqx-multi-input-drop-down-menu li a { border-left: var(--jqx-border-width) solid transparent; } .jqx-multi-input-drop-down-menu:not(.jqx-check-input-drop-down-menu) li.active a { border-left: var(--jqx-border-width) solid var(--jqx-primary); border-top-left-radius: 0; border-bottom-left-radius: 0; color: var(--jqx-ui-state-color-selected); background: var(--jqx-ui-state-selected); } .jqx-multi-input-drop-down-menu[right-to-left] li a { border-left: none; border-right: var(--jqx-border-width) solid transparent; } .jqx-multi-input-drop-down-menu[right-to-left]:not(.jqx-check-input-drop-down-menu) li.active a { border-left: var(--jqx-border-width) solid transparent; border-right: var(--jqx-border-width) solid var(--jqx-primary); border-top-left-radius: var(--jqx-border-top-left-radius); border-bottom-left-radius: var(--jqx-border-bottom-left-radius); border-top-right-radius: 0; border-bottom-right-radius: 0; } jqx-multi-combo-input { --jqx-outline: var(--jqx-primary); display: inline-block; width: var(--jqx-text-box-default-width); height: var(--jqx-text-box-default-height); overflow: visible; background: var(--jqx-background); border: 1px solid var(--jqx-border); border-top-left-radius: var(--jqx-border-top-left-radius); border-top-right-radius: var(--jqx-border-top-right-radius); border-bottom-left-radius: var(--jqx-border-bottom-left-radius); border-bottom-right-radius: var(--jqx-border-bottom-right-radius); } jqx-multi-combo-input > option { display: none; } jqx-multi-combo-input > .jqx-container { display: flex; } jqx-multi-combo-input.jqx-element { background: var(--jqx-background); } jqx-multi-combo-input input::selection { background: var(--jqx-editor-selection); color: var(--jqx-editor-selection-color); } jqx-multi-combo-input input.jqx-input { border: none; text-overflow: ellipsis; } jqx-multi-combo-input:hover { border-color: var(--jqx-ui-state-border-hover); } jqx-multi-combo-input[focus] { border-color: var(--jqx-outline); } .jqx-multi-combo-input { height: var(--jqx-editor-height); min-height: var(--jqx-editor-height); } .jqx-multi-combo-input:not([input-tags-mode=one]):not(.jqx-grid-cell-editor) { height: auto !important; } .jqx-multi-combo-input .jqx-container { width: 100%; height: 100%; color: inherit; font-family: inherit; position: relative; overflow: visible; } .jqx-multi-combo-input > .jqx-container { min-height: var(--jqx-editor-height); } .jqx-multi-combo-input .jqx-drop-down-button { min-height: var(--jqx-editor-height); } .jqx-multi-combo-input .jqx-drop-down-button .arrow { min-height: var(--jqx-editor-height); } .jqx-multi-combo-input .jqx-tokens-container { grid-row-gap: 3px; padding: 3px; } .jqx-multi-combo-input .jqx-token { position: relative; white-space: nowrap; text-overflow: ellipsis; cursor: pointer; user-select: none; display: flex; align-items: center; padding: 1px 6px 1px 6px; border-radius: 20px; background-color: var(--jqx-primary); color: var(--jqx-primary-color); margin: 0; height: 22px; } .jqx-multi-combo-input .jqx-token .jqx-drop-down-list-selection-label { text-overflow: ellipsis; overflow: hidden; } .jqx-multi-combo-input .jqx-token .jqx-drop-down-list-selection-label.dots::before { content: "\a"; width: 8px; height: 8px; border-radius: 50%; background: var(--jqx-primary-color); display: inline-block; margin-right: 4px; } .jqx-multi-combo-input .jqx-token .jqx-drop-down-list-selection-image { display: flex; justify-content: center; align-items: center; border-radius: 50%; width: 20px; height: 20px; min-width: 20px; background-position: center; background-repeat: no-repeat; background-size: cover; margin-right: 4px; transform: scale(1.3); left: -3px; position: relative; } .jqx-multi-combo-input .jqx-token .jqx-drop-down-list-selection-image:hover { transform: scale(1.5); } .jqx-multi-combo-input .jqx-action-button { display: flex; outline: 1px solid transparent; height: 100%; width: 100%; flex-wrap: wrap; overflow: hidden; position: relative; user-select: none; border-top-left-radius: var(--jqx-border-top-left-radius); border-bottom-left-radius: var(--jqx-border-bottom-left-radius); min-height: var(--jqx-editor-height); align-items: center; } .jqx-multi-combo-input .jqx-drop-down-list-unselect-button { position: relative; margin-left: 2px; margin-right: -2px; } .jqx-multi-combo-input .jqx-drop-down-list-unselect-button:after { content: var(--jqx-icon-close); display: flex; justify-content: center; align-items: center; transform-origin: center; font-family: var(--jqx-font-family-icon); background: rgba(var(--jqx-primary-rgb), 0.2); border-radius: 50%; width: 20px; height: 20px; } .jqx-multi-combo-input.jqx-input .jqx-input { flex-grow: 1; align-self: center; width: var(--jqx-editor-addon-width); min-width: var(--jqx-editor-addon-width); min-height: 100%; max-height: 1rem; vertical-align: middle; margin: 0; } .jqx-multi-combo-input.jqx-input .jqx-drop-down-button { height: initial; } .jqx-multi-combo-input[drop-down-button-position=left] .jqx-action-button, .jqx-multi-combo-input[drop-down-button-position=right] .jqx-action-button { width: calc(100% - var(--jqx-editor-addon-width)); } .jqx-multi-combo-input[input-tags-mode=one] .jqx-action-button { align-items: center; } .jqx-multi-combo-input[readonly] .jqx-input { visibility: hidden; } .jqx-multi-combo-input[readonly] .jqx-action-button { background: var(--jqx-surface); color: var(--jqx-surface-color); } .jqx-multi-combo-input[readonly][open] .jqx-action-button, .jqx-multi-combo-input[readonly][open] .jqx-drop-down-button { background: var(--jqx-ui-state-hover) !important; color: var(--jqx-ui-state-color-hover) !important; } .jqx-multi-combo-input[readonly]:hover .jqx-action-button { background: var(--jqx-ui-state-hover); color: var(--jqx-ui-state-color-hover); } .jqx-multi-combo-input[hide-input-tags-close-button] .jqx-drop-down-list-unselect-button:after { display: none; } .jqx-multi-combo-input[right-to-left] .jqx-token { margin: var(--jqx-editor-label-padding) var(--jqx-editor-label-padding) 0 0; padding: 1px 6px 1px 2px; } .jqx-multi-combo-input[right-to-left] .jqx-token:last-of-type { margin: var(--jqx-editor-label-padding) var(--jqx-editor-label-padding) var(--jqx-editor-label-padding) 0; } .jqx-multi-combo-input[right-to-left] .jqx-action-button { direction: rtl; } .jqx-multi-combo-input[right-to-left] .jqx-drop-down-list-unselect-button { margin: 0 5px 0 0; } .jqx-multi-combo-input-drop-down-menu .jqx-scroll-viewer { width: inherit; height: inherit; padding: initial; min-height: inherit; border: initial; } .jqx-multi-combo-input-drop-down-menu .close-button:after { font-family: var(--jqx-font-family-icon); content: var(--jqx-icon-close); margin-left: 5px; } .jqx-multi-combo-input-drop-down-menu .add-new-item { display: grid; grid-template-columns: 1fr var(--jqx-text-box-default-height); grid-column-gap: 5px; margin-left: 7px; margin-right: 7px; height: 36px; } .jqx-multi-combo-input-drop-down-menu .add-new-item input { height: 30px; } .jqx-multi-combo-input-drop-down-menu .add-new-item jqx-button { justify-content: center; align-content: center; height: 30px; } .jqx-multi-combo-input-drop-down-menu .add-new-item button { padding: 0; display: flex; align-items: center; justify-content: center; } .jqx-multi-combo-input-drop-down-menu .add-new-item button:after { font-family: var(--jqx-font-family-icon); content: var(--jqx-icon-plus); } .jqx-multi-combo-input-drop-down-menu .jqx-select-all { height: auto; border-bottom: var(--jqx-border-width) solid var(--jqx-border); } .jqx-multi-combo-input-drop-down-menu[right-to-left] > ul { direction: rtl; } .jqx-multi-combo-input-drop-down-menu ul li a { display: flex; align-items: center; } .jqx-multi-combo-input-drop-down-menu ul li a .jqx-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(--jqx-border); } .jqx-multi-combo-input-drop-down-menu[single-select] ul li { height: 36px; margin-top: 1px; cursor: pointer; } .jqx-multi-combo-input-drop-down-menu[single-select] ul li a { padding: 0px; padding-left: 6px; height: 100%; } .jqx-multi-combo-input-drop-down-menu[single-select] ul li::after { display: none; } .jqx-multi-combo-input-drop-down-menu[single-select] ul li:hover, .jqx-multi-combo-input-drop-down-menu[single-select] ul li.selected { background: var(--jqx-ui-state-hover); border-color: var(--jqx-ui-state-hover); color: var(--jqx-ui-state-color-hover); } .jqx-multi-combo-input-drop-down-menu[single-select] ul li:hover:after, .jqx-multi-combo-input-drop-down-menu[single-select] ul li.selected:after { display: none; } .jqx-multi-combo-input-drop-down-menu[pills] .jqx-custom-item { white-space: nowrap !important; } .jqx-multi-combo-input-drop-down-menu[pills] .jqx-custom-item a { white-space: nowrap !important; } .jqx-multi-combo-input-drop-down-menu[pills] .jqx-custom-item a::before { border-radius: 50%; background: var(--jqx-primary-color); margin-right: 4px; content: "+" !important; width: 12px !important; height: 12px !important; color: var(--jqx-primary); margin-right: 4px; align-items: center; align-content: center; justify-content: center; justify-items: center; align-items: center; display: flex !important; } .jqx-multi-combo-input-drop-down-menu[pills][dots] ul li a::before { content: "\a"; width: 8px; height: 8px; border-radius: 50%; background: var(--jqx-primary-color); display: inline-block; margin-right: 4px; } .jqx-multi-combo-input-drop-down-menu[pills] ul li { height: 30px; margin-top: 1px; } .jqx-multi-combo-input-drop-down-menu[pills] ul li:before { display: none; } .jqx-multi-combo-input-drop-down-menu[pills] ul li:after { display: none; } .jqx-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(--jqx-primary); border-color: var(--jqx-primary); color: var(--jqx-primary-color); white-space: nowrap; } .jqx-multi-combo-input-drop-down-menu[pills] ul li a .jqx-drop-down-list-selection-image { height: 20px; width: 20px; } .jqx-multi-combo-input-drop-down-menu[pills] ul li.focused a { background: var(--jqx-primary) !important; border-color: var(--jqx-primary) !important; color: var(--jqx-primary-color) !important; } .jqx-multi-combo-input-drop-down-menu[pills] ul li.focused, .jqx-multi-combo-input-drop-down-menu[pills] ul li:hover, .jqx-multi-combo-input-drop-down-menu[pills] ul li.selected { background: var(--jqx-ui-state-hover); border-color: var(--jqx-ui-state-hover); color: var(--jqx-ui-state-color-hover); } .jqx-multi-combo-input-drop-down-menu[pills] ul li.focused:after, .jqx-multi-combo-input-drop-down-menu[pills] ul li:hover:after, .jqx-multi-combo-input-drop-down-menu[pills] ul li.selected:after { display: none; } .jqx-multi-combo-input-drop-down-menu[pills] ul li.active.selected:before { display: none; } jqx-check-input { --jqx-outline: var(--jqx-primary); display: inline-block; width: var(--jqx-text-box-default-width); height: var(--jqx-text-box-default-height); overflow: visible; background: var(--jqx-background); border: 1px solid var(--jqx-border); border-top-left-radius: var(--jqx-border-top-left-radius); border-top-right-radius: var(--jqx-border-top-right-radius); border-bottom-left-radius: var(--jqx-border-bottom-left-radius); border-bottom-right-radius: var(--jqx-border-bottom-right-radius); } jqx-check-input > option { display: none; } jqx-check-input > .jqx-container { display: flex; } jqx-check-input.jqx-element { background: var(--jqx-background); } jqx-check-input input::selection { background: var(--jqx-editor-selection); color: var(--jqx-editor-selection-color); } jqx-check-input input.jqx-input { border: none; text-overflow: ellipsis; } jqx-check-input:hover { border-color: var(--jqx-ui-state-border-hover); } jqx-check-input[disabled] { border-color: var(--jqx-disabled); outline: none; } jqx-check-input[focus], jqx-check-input:focus { border-color: var(--jqx-outline); } jqx-check-input[drop-down-button-position=left] .jqx-input, jqx-check-input[drop-down-button-position=right] .jqx-input { width: calc(100% - var(--jqx-editor-addon-width)); } .jqx-check-input .jqx-container { width: 100%; height: 100%; color: inherit; font-family: inherit; position: relative; overflow: visible; } .jqx-check-input-drop-down-menu ul li { position: relative; } .jqx-check-input-drop-down-menu ul li:before { content: ""; transform: scale(0); background-color: white; } .jqx-check-input-drop-down-menu ul li:after { content: ""; position: absolute; border: var(--jqx-border-width) solid var(--jqx-border); border-top-left-radius: var(--jqx-border-top-left-radius); border-top-right-radius: var(--jqx-border-top-right-radius); border-bottom-left-radius: var(--jqx-border-bottom-left-radius); border-bottom-right-radius: var(--jqx-border-bottom-right-radius); width: var(--jqx-check-box-default-size); height: var(--jqx-check-box-default-size); padding: 1px; margin-left: 10px; font-family: var(--jqx-font-family-icon); justify-content: center; align-items: center; display: flex; top: 50%; transform: translateY(-50%); pointer-events: none; box-sizing: content-box; } .jqx-check-input-drop-down-menu ul li a { padding-left: calc(var(--jqx-tree-indent) + 25px); } .jqx-check-input-drop-down-menu ul li.selected:after { content: var(--jqx-icon-check); background: var(--jqx-primary); border-color: var(--jqx-primary); color: var(--jqx-primary-color); } .jqx-check-input-drop-down-menu ul li.selected.color:after { content: ""; } .jqx-check-input-drop-down-menu ul li.active.selected:before { position: absolute; content: ""; border-radius: 50%; width: calc(var(--jqx-check-box-default-size) + 16px); height: calc(var(--jqx-check-box-default-size) + 16px); background: var(--jqx-primary); opacity: 0.3; margin-left: 4px; top: 50%; transform: scale(1) translateY(-50%); transform-origin: top; } .jqx-check-input-drop-down-menu ul li.active.focused a { border-left: var(--jqx-border-width) solid var(--jqx-primary); border-top-left-radius: 0; border-bottom-left-radius: 0; color: var(--jqx-ui-state-color-selected); background: var(--jqx-ui-state-selected); } .jqx-check-input-drop-down-menu ul li[indeterminate]:after { background-color: var(--jqx-ui-state-selected); padding: 2px; background-clip: content-box; } .jqx-check-input-drop-down-menu[inverted] ul li:after { margin-left: initial; margin-right: 10px; right: 0; } .jqx-check-input-drop-down-menu[inverted] ul li.selected:before { right: 0; } .jqx-check-input-drop-down-menu[inverted] ul li a { padding-left: 10px; padding-right: calc(var(--jqx-tree-indent) + 25px); } .jqx-check-input-drop-down-menu[inverted] ul li.active.selected:before { margin-left: initial; margin-right: 4px; } .jqx-check-input-drop-down-menu:not([animation=none]) ul li:before { transition: transform 0.25s ease-in-out; } .jqx-check-input-drop-down-menu[right-to-left] ul li:after { margin-left: initial; margin-right: 10px; } .jqx-check-input-drop-down-menu[right-to-left] ul li a { padding-left: 10px; padding-right: calc(var(--jqx-tree-indent) + 25px); } .jqx-check-input-drop-down-menu[right-to-left] ul li.active.focused a { border-left: var(--jqx-border-width) solid transparent; border-right: var(--jqx-border-width) solid var(--jqx-primary); border-top-left-radius: var(--jqx-border-top-left-radius); border-bottom-left-radius: var(--jqx-border-bottom-left-radius); border-top-right-radius: 0; border-bottom-right-radius: 0; } .jqx-check-input-drop-down-menu[right-to-left] ul li.active.selected:before { margin-left: initial; margin-right: 4px; } .jqx-check-input-drop-down-menu[right-to-left][pills] ul li a { padding-right: initial; } jqx-color-input { --jqx-outline: var(--jqx-primary); display: inline-block; border: none; width: var(--jqx-text-box-default-width); height: var(--jqx-text-box-default-height); overflow: visible; background: var(--jqx-background); } jqx-color-input[value-display-mode=colorBox] .jqx-action-button { cursor: pointer; } jqx-time-input, jqx-date-input, jqx-date-range-input { --jqx-outline: var(--jqx-primary); display: inline-block; width: var(--jqx-text-box-default-width); height: var(--jqx-text-box-default-height); background: var(--jqx-background); border: 1px solid var(--jqx-border); border-top-left-radius: var(--jqx-border-top-left-radius); border-top-right-radius: var(--jqx-border-top-right-radius); border-bottom-left-radius: var(--jqx-border-bottom-left-radius); border-bottom-right-radius: var(--jqx-border-bottom-right-radius); overflow: hidden; } jqx-time-input > .jqx-container, jqx-date-input > .jqx-container, jqx-date-range-input > .jqx-container { display: flex; } jqx-time-input.jqx-element, jqx-date-input.jqx-element, jqx-date-range-input.jqx-element { background: var(--jqx-background); } jqx-time-input[drop-down-button-position=left] .jqx-input, jqx-time-input[drop-down-button-position=right] .jqx-input, jqx-date-input[drop-down-button-position=left] .jqx-input, jqx-date-input[drop-down-button-position=right] .jqx-input, jqx-date-range-input[drop-down-button-position=left] .jqx-input, jqx-date-range-input[drop-down-button-position=right] .jqx-input { width: calc(100% - var(--jqx-editor-addon-width)); } jqx-date-range-input input::selection { background: var(--jqx-editor-selection); color: var(--jqx-editor-selection-color); } jqx-date-range-input input.jqx-input { border: none; text-overflow: ellipsis; } jqx-date-range-input[focus], jqx-date-range-input:focus { border-color: var(--jqx-outline); } .jqx-time-box { display: block; height: auto; width: 300px; overflow: hidden; } .jqx-time-box .jqx-timepicker { display: grid; grid-template-columns: 60% 35%; grid-column-gap: 5%; background: var(--jqx-background); padding: 10px; border-color: var(--jqx-border); } .jqx-time-box[right-to-left] .jqx-timepicker { direction: rtl; } .jqx-time-input.jqx-input .jqx-drop-down-button .arrow:after, .jqx-time-input.jqx-input .jqx-drop-down-button[open] .arrow:after { content: var(--jqx-icon-clock); transform: rotate(0deg); } .jqx-timepicker .minute-selection, .jqx-timepicker .hour-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; } .jqx-timepicker .minute-selection .jqx-calendar-cell, .jqx-timepicker .hour-selection .jqx-calendar-cell { margin: initial; line-height: var(--jqx-calendar-cell-size); display: flex; justify-content: center; align-items: center; width: 32px; height: 32px; box-sizing: border-box; border-radius: 100%; } .jqx-timepicker .minute-selection .header, .jqx-timepicker .hour-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(--jqx-calendar-cell-size); line-height: calc(var(--jqx-calendar-cell-size) - 2px); } .jqx-timepicker .minute-selection { border-left: initial; border-right: var(--jqx-border-width) solid var(--jqx-border); grid-template-columns: repeat(2, 50%); border-left: var(--jqx-border-width) solid var(--jqx-border); } .jqx-timepicker .minute-selection .header { grid-column: span 2; } .jqx-timepicker .hour-selection:before, .jqx-timepicker .hour-selection:after { content: attr(am-label); width: 100%; display: flex; justify-content: center; grid-column: 1; font-weight: 600; height: var(--jqx-calendar-cell-size); line-height: calc(var(--jqx-calendar-cell-size) - 2px); } .jqx-timepicker .hour-selection:after { content: attr(pm-label); grid-row: 4/9; } .jqx-date-input.jqx-input .jqx-drop-down-button .arrow:after, .jqx-date-input.jqx-input .jqx-drop-down-button[open] .arrow:after { content: var(--jqx-icon-calendar); transform: rotate(0deg); } .jqx-date-range-input.jqx-input .jqx-drop-down-button .arrow:after, .jqx-date-range-input.jqx-input .jqx-drop-down-button[open] .arrow:after { content: var(--jqx-icon-calendar); transform: rotate(0deg); } .jqx-date-range-input .jqx-container { width: 100%; height: 100%; color: inherit; font-family: inherit; position: relative; overflow: visible; } .jqx-date-input-drop-down-menu, .jqx-date-range-input-drop-down-menu { padding: 0px; } .jqx-date-input-drop-down-menu jqx-button:first-of-type, .jqx-date-range-input-drop-down-menu jqx-button:first-of-type { margin-left: 5px; } .jqx-date-input-drop-down-menu jqx-button:last-of-type, .jqx-date-range-input-drop-down-menu jqx-button:last-of-type { margin-right: 5px; } .jqx-date-input-drop-down-menu .jqx-calendar, .jqx-date-range-input-drop-down-menu .jqx-calendar { height: 100%; min-width: 100%; --jqx-calendar-default-height: auto; --jqx-calendar-footer-height: 0px; } .jqx-date-input-drop-down-menu .jqx-done-button, .jqx-date-input-drop-down-menu .jqx-today-button, .jqx-date-input-drop-down-menu .jqx-clear-button, .jqx-date-range-input-drop-down-menu .jqx-done-button, .jqx-date-range-input-drop-down-menu .jqx-today-button, .jqx-date-range-input-drop-down-menu .jqx-clear-button { height: auto; --jqx-button-padding: 5px; } .jqx-date-input-drop-down-menu .jqx-done-button, .jqx-date-input-drop-down-menu .jqx-today-button, .jqx-date-range-input-drop-down-menu .jqx-done-button, .jqx-date-range-input-drop-down-menu .jqx-today-button { margin-right: 5px; } .jqx-date-input-drop-down-menu .jqx-calendar-footer, .jqx-date-range-input-drop-down-menu .jqx-calendar-footer { flex-direction: column; } .jqx-date-input-drop-down-menu .jqx-timepicker-buttons, .jqx-date-input-drop-down-menu .jqx-button-controls, .jqx-date-range-input-drop-down-menu .jqx-timepicker-buttons, .jqx-date-range-input-drop-down-menu .jqx-button-controls { display: none; } .jqx-date-input-drop-down-menu .jqx-date-range-input-footer-controls, .jqx-date-range-input-drop-down-menu .jqx-date-range-input-footer-controls { width: 100%; height: 100%; } .jqx-date-input-drop-down-menu .jqx-timepicker-button, .jqx-date-range-input-drop-down-menu .jqx-timepicker-button { position: relative; white-space: nowrap; } .jqx-date-input-drop-down-menu .jqx-timepicker-button:empty, .jqx-date-range-input-drop-down-menu .jqx-timepicker-button:empty { display: none; } .jqx-date-input-drop-down-menu .jqx-timepicker-button:before, .jqx-date-range-input-drop-down-menu .jqx-timepicker-button:before { content: var(--jqx-icon-clock); height: 100%; font-family: var(--jqx-font-family-icon); font-weight: var(--jqx-font-weight); font-size: var(--jqx-arrow-size); margin: 0 var(--jqx-editor-label-padding) 0 var(--jqx-editor-label-padding); } .jqx-date-input-drop-down-menu .jqx-timepicker-button:hover, .jqx-date-range-input-drop-down-menu .jqx-timepicker-button:hover { color: var(--jqx-ui-state-color-hover); border-color: var(--jqx-ui-state-hover); background-color: var(--jqx-ui-state-hover); transition: background-color 100ms linear, color 100ms ease-in-out; opacity: var(--jqx-button-opacity-hover); cursor: pointer; } .jqx-date-input-drop-down-menu .jqx-timepicker-button[selected], .jqx-date-range-input-drop-down-menu .jqx-timepicker-button[selected] { color: var(--jqx-ui-state-color-selected); } .jqx-date-input-drop-down-menu .jqx-icon-today:before, .jqx-date-range-input-drop-down-menu .jqx-icon-today:before { content: var(--jqx-icon-calendar); } .jqx-date-input-drop-down-menu .jqx-icon-clear:before, .jqx-date-range-input-drop-down-menu .jqx-icon-clear:before { content: var(--jqx-icon-cancel); } .jqx-date-input-drop-down-menu .jqx-timepicker, .jqx-date-range-input-drop-down-menu .jqx-timepicker { position: absolute; top: 0; display: grid; grid-template-columns: 60% 35%; height: calc(100% - var(--jqx-calendar-footer-height)); width: 100%; grid-column-gap: 5%; background: var(--jqx-background); box-sizing: border-box; padding: 10px; border-color: var(--jqx-border); border-top-left-radius: var(--jqx-border-top-left-radius); border-top-right-radius: var(--jqx-border-top-right-radius); border-bottom-left-radius: var(--jqx-border-bottom-left-radius); border-bottom-right-radius: var(--jqx-border-bottom-right-radius); border-width: var(--jqx-border-width); border-style: solid; border-bottom: none; } .jqx-date-input-drop-down-menu[icons] jqx-calendar, .jqx-date-input-drop-down-menu[timepicker] jqx-calendar, .jqx-date-range-input-drop-down-menu[icons] jqx-calendar, .jqx-date-range-input-drop-down-menu[timepicker] jqx-calendar { --jqx-calendar-footer-height: 30px; } .jqx-date-input-drop-down-menu[icons] .jqx-timepicker-buttons, .jqx-date-input-drop-down-menu[timepicker] .jqx-timepicker-buttons, .jqx-date-range-input-drop-down-menu[icons] .jqx-timepicker-buttons, .jqx-date-range-input-drop-down-menu[timepicker] .jqx-timepicker-buttons { display: flex; justify-content: space-around; width: 100%; height: 100%; align-items: center; } .jqx-date-input-drop-down-menu[timepicker][icons] .jqx-date-range-input-footer-controls, .jqx-date-range-input-drop-down-menu[timepicker][icons] .jqx-date-range-input-footer-controls { display: grid; grid-template-columns: 60% 38%; grid-column-gap: 2%; justify-items: center; } .jqx-date-input-drop-down-menu.jqx-input-drop-down-menu, .jqx-date-range-input-drop-down-menu.jqx-input-drop-down-menu { height: auto; width: var(--jqx-input-drop-down-menu-width); } .jqx-date-input-drop-down-menu.jqx-input-drop-down-menu.jqx-date-input-drop-down-menu, .jqx-date-range-input-drop-down-menu.jqx-input-drop-down-menu.jqx-date-input-drop-down-menu { height: 250px; } .jqx-date-input-drop-down-menu.jqx-input-drop-down-menu.jqx-date-range-input-drop-down-menu, .jqx-date-range-input-drop-down-menu.jqx-input-drop-down-menu.jqx-date-range-input-drop-down-menu { min-height: 250px; height: auto !important; } .jqx-date-input-drop-down-menu.jqx-input-drop-down-menu.jqx-date-range-input-drop-down-menu .jqx-calendar-date-view-container, .jqx-date-range-input-drop-down-menu.jqx-input-drop-down-menu.jqx-date-range-input-drop-down-menu .jqx-calendar-date-view-container { min-height: 250px; } .jqx-date-input-drop-down-menu:not([timepicker]) .jqx-timepicker-buttons, .jqx-date-range-input-drop-down-menu:not([timepicker]) .jqx-timepicker-buttons { display: none; } .jqx-date-input-drop-down-menu:not([animation=none]) .jqx-timepicker, .jqx-date-range-input-drop-down-menu:not([animation=none]) .jqx-timepicker { transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.2s cubic-bezier(0.4, 0, 0.2, 1); transform: scale(1); } .jqx-date-input-drop-down-menu:not([animation=none]) .jqx-timepicker.jqx-visibility-hidden, .jqx-date-range-input-drop-down-menu:not([animation=none]) .jqx-timepicker.jqx-visibility-hidden { transition: visibility 0.2s cubic-bezier(0.4, 0, 0.6, 1), transform 0.2s cubic-bezier(0.4, 0, 0.6, 1); transform: scale(0); } .jqx-date-input-drop-down-menu[right-to-left] .jqx-timepicker, .jqx-date-range-input-drop-down-menu[right-to-left] .jqx-timepicker { direction: rtl; } jqx-phone-input, jqx-country-input { --jqx-outline: var(--jqx-primary); display: inline-block; width: var(--jqx-text-box-default-width); height: var(--jqx-text-box-default-height); overflow: visible; background: var(--jqx-background); border: 1px solid var(--jqx-border); border-top-left-radius: var(--jqx-border-top-left-radius); border-top-right-radius: var(--jqx-border-top-right-radius); border-bottom-left-radius: var(--jqx-border-bottom-left-radius); border-bottom-right-radius: var(--jqx-border-bottom-right-radius); } jqx-phone-input > .jqx-container, jqx-country-input > .jqx-container { display: flex; } jqx-phone-input.jqx-element, jqx-country-input.jqx-element { background: var(--jqx-background); } jqx-phone-input input::selection, jqx-country-input input::selection { background: var(--jqx-editor-selection); color: var(--jqx-editor-selection-color); } jqx-phone-input input.jqx-input, jqx-country-input input.jqx-input { border: none; text-overflow: ellipsis; } jqx-phone-input[focus], jqx-phone-input:focus, jqx-country-input[focus], jqx-country-input:focus { border-color: var(--jqx-outline); } jqx-phone-input:hover, jqx-country-input:hover { border-color: var(--jqx-ui-state-border-hover); } jqx-phone-input[disabled], jqx-country-input[disabled] { border-color: var(--jqx-disabled); outline: none; } jqx-phone-input[drop-down-button-position=left] .jqx-input, jqx-phone-input[drop-down-button-position=right] .jqx-input, jqx-country-input[drop-down-button-position=left] .jqx-input, jqx-country-input[drop-down-button-position=right] .jqx-input { width: calc(100% - var(--jqx-editor-addon-width)); } .jqx-country-input .jqx-container, .jqx-phone-input .jqx-container { width: 100%; height: 100%; color: inherit; font-family: inherit; position: relative; overflow: visible; align-items: center; } .jqx-phone-input { --jqx-editor-addon-width: 45px; } .jqx-phone-input.invalid-number .jqx-container::after { color: var(--jqx-error); } .jqx-phone-input .jqx-container::after { font-family: var(--jqx-font-family-icon); content: var(--jqx-icon-phone); color: var(--jqx-success); padding-right: 5px; } .jqx-phone-input .jqx-drop-down-button { display: flex; justify-content: center; align-items: center; flex-direction: row; background: transparent; border-right: none; padding-left: 2px; } .jqx-phone-input .jqx-drop-down-button::after { font-family: var(--jqx-font-family-icon); content: var(--jqx-icon-arrow-down); } .jqx-flag-box { margin-right: 6px; } .jqx-flag-box .flag { width: 20px; } .jqx-flag-box .flag.be { width: 18px; } .jqx-flag-box .flag.ch { width: 15px; } .jqx-flag-box .flag.mc { width: 19px; } .jqx-flag-box .flag.ne { width: 18px; } .jqx-flag-box .flag.np { width: 13px; } .jqx-flag-box .flag.va { width: 15px; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .jqx-flag-box .flag { background-size: 5652px 15px; } } .jqx-flag-box .flag.ac { height: 10px; background-position: 0px 0px; } .jqx-flag-box .flag.ad { height: 14px; background-position: -22px 0px; } .jqx-flag-box .flag.ae { height: 10px; background-position: -44px 0px; } .jqx-flag-box .flag.af { height: 14px; background-position: -66px 0px; } .jqx-flag-box .flag.ag { height: 14px; background-position: -88px 0px; } .jqx-flag-box .flag.ai { height: 10px; background-position: -110px 0px; } .jqx-flag-box .flag.al { height: 15px; background-position: -132px 0px; } .jqx-flag-box .flag.am { height: 10px; background-position: -154px 0px; } .jqx-flag-box .flag.ao { height: 14px; background-position: -176px 0px; } .jqx-flag-box .flag.aq { height: 14px; background-position: -198px 0px; } .jqx-flag-box .flag.ar { height: 13px; background-position: -220px 0px; } .jqx-flag-box .flag.as { height: 10px; background-position: -242px 0px; } .jqx-flag-box .flag.at { height: 14px; background-position: -264px 0px; } .jqx-flag-box .flag.au { height: 10px; background-position: -286px 0px; } .jqx-flag-box .flag.aw { height: 14px; background-position: -308px 0px; } .jqx-flag-box .flag.ax { height: 13px; background-position: -330px 0px; } .jqx-flag-box .flag.az { height: 10px; background-position: -352px 0px; } .jqx-flag-box .flag.ba { height: 10px; background-position: -374px 0px; } .jqx-flag-box .flag.bb { height: 14px; background-position: -396px 0px; } .jqx-flag-box .flag.bd { height: 12px; background-position: -418px 0px; } .jqx-flag-box .flag.be { height: 15px; background-position: -440px 0px; } .jqx-flag-box .flag.bf { height: 14px; background-position: -460px 0px; } .jqx-flag-box .flag.bg { height: 12px; background-position: -482px 0px; } .jqx-flag-box .flag.bh { height: 12px; background-position: -504px 0px; } .jqx-flag-box .flag.bi { height: 12px; background-position: -526px 0px; } .jqx-flag-box .flag.bj { height: 14px; background-position: -548px 0px; } .jqx-flag-box .flag.bl { height: 14px; background-position: -570px 0px; } .jqx-flag-box .flag.bm { height: 10px; background-position: -592px 0px; } .jqx-flag-box .flag.bn { height: 10px; background-position: -614px 0px; } .jqx-flag-box .flag.bo { height: 14px; background-position: -636px 0px; } .jqx-flag-box .flag.bq { height: 14px; background-position: -658px 0px; } .jqx-flag-box .flag.br { height: 14px; background-position: -680px 0px; } .jqx-flag-box .flag.bs { height: 10px; background-position: -702px 0px; } .jqx-flag-box .flag.bt { height: 14px; background-position: -724px 0px; } .jqx-flag-box .flag.bv { height: 15px; background-position: -746px 0px; } .jqx-flag-box .flag.bw { height: 14px; background-position: -768px 0px; } .jqx-flag-box .flag.by { height: 10px; background-position: -790px 0px; } .jqx-flag-box .flag.bz { height: 14px; background-position: -812px 0px; } .jqx-flag-box .flag.ca { height: 10px; background-position: -834px 0px; } .jqx-flag-box .flag.cc { height: 10px; background-position: -856px 0px; } .jqx-flag-box .flag.cd { height: 15px; background-position: -878px 0px; } .jqx-flag-box .flag.cf { height: 14px; background-position: -900px 0px; } .jqx-flag-box .flag.cg { height: 14px; background-position: -922px 0px; } .jqx-flag-box .flag.ch { height: 15px; background-position: -944px 0px; } .jqx-flag-box .flag.ci { height: 14px; background-position: -961px 0px; } .jqx-flag-box .flag.ck { height: 10px; background-position: -983px 0px; } .jqx-flag-box .flag.cl { height: 14px; background-position: -1005px 0px; } .jqx-flag-box .flag.cm { height: 14px; background-position: -1027px 0px; } .jqx-flag-box .flag.cn { height: 14px; background-position: -1049px 0px; } .jqx-flag-box .flag.co { height: 14px; background-position: -1071px 0px; } .jqx-flag-box .flag.cp { height: 14px; background-position: -1093px 0px; } .jqx-flag-box .flag.cr { height: 12px; background-position: -1115px 0px; } .jqx-flag-box .flag.cu { height: 10px; background-position: -1137px 0px; } .jqx-flag-box .flag.cv { height: 12px; background-position: -1159px 0px; } .jqx-flag-box .flag.cw { height: 14px; background-position: -1181px 0px; } .jqx-flag-box .flag.cx { height: 10px; background-position: -1203px 0px; } .jqx-flag-box .flag.cy { height: 14px; background-position: -1225px 0px; } .jqx-flag-box .flag.cz { height: 14px; background-position: -1247px 0px; } .jqx-flag-box .flag.de { height: 12px; background-position: -1269px 0px; } .jqx-flag-box .flag.dg { height: 10px; background-position: -1291px 0px; } .jqx-flag-box .flag.dj { height: 14px; background-position: -1313px 0px; } .jqx-flag-box .flag.dk { height: 15px; background-position: -1335px 0px; } .jqx-flag-box .flag.dm { height: 10px; background-position: -1357px 0px; } .jqx-flag-box .flag.do { height: 14px; background-position: -1379px 0px; } .jqx-flag-box .flag.dz { height: 14px; background-position: -1401px 0px; } .jqx-flag-box .flag.ea { height: 14px; background-position: -1423px 0px; } .jqx-flag-box .flag.ec { height: 14px; background-position: -1445px 0px; } .jqx-flag-box .flag.ee { height: 13px; background-position: -1467px 0px; } .jqx-flag-box .flag.eg { height: 14px; background-position: -1489px 0px; } .jqx-flag-box .flag.eh { height: 10px; background-position: -1511px 0px; } .jqx-flag-box .flag.er { height: 10px; background-position: -1533px 0px; } .jqx-flag-box .flag.es { height: 14px; background-position: -1555px 0px; } .jqx-flag-box .flag.et { height: 10px; background-position: -1577px 0px; } .jqx-flag-box .flag.eu { height: 14px; background-position: -1599px 0px; } .jqx-flag-box .flag.fi { height: 12px; background-position: -1621px 0px; } .jqx-flag-box .flag.fj { height: 10px; background-position: -1643px 0px; } .jqx-flag-box .flag.fk { height: 10px; background-position: -1665px 0px; } .jqx-flag-box .flag.fm { height: 11px; background-position: -1687px 0px; } .jqx-flag-box .flag.fo { height: 15px; background-position: -1709px 0px; } .jqx-flag-box .flag.fr { height: 14px; background-position: -1731px 0px; } .jqx-flag-box .flag.ga { height: 15px; background-position: -1753px 0px; } .jqx-flag-box .flag.gb { height: 10px; background-position: -1775px 0px; } .jqx-flag-box .flag.gd { height: 12px; background-position: -1797px 0px; } .jqx-flag-box .flag.ge { height: 14px; background-position: -1819px 0px; } .jqx-flag-box .flag.gf { height: 14px; background-position: -1841px 0px; } .jqx-flag-box .flag.gg { height: 14px; background-position: -1863px 0px; } .jqx-flag-box .flag.gh { height: 14px; background-position: -1885px 0px; } .jqx-flag-box .flag.gi { height: 10px; background-position: -1907px 0px; } .jqx-flag-box .flag.gl { height: 14px; background-position: -1929px 0px; } .jqx-flag-box .flag.gm { height: 14px; background-position: -1951px 0px; } .jqx-flag-box .flag.gn { height: 14px; background-position: -1973px 0px; } .jqx-flag-box .flag.gp { height: 14px; background-position: -1995px 0px; } .jqx-flag-box .flag.gq { height: 14px; background-position: -2017px 0px; } .jqx-flag-box .flag.gr { height: 14px; background-position: -2039px 0px; } .jqx-flag-box .flag.gs { height: 10px; background-position: -2061px 0px; } .jqx-flag-box .flag.gt { height: 13px; background-position: -2083px 0px; } .jqx-flag-box .flag.gu { height: 11px; background-position: -2105px 0px; } .jqx-flag-box .flag.gw { height: 10px; background-position: -2127px 0px; } .jqx-flag-box .flag.gy { height: 12px; background-position: -2149px 0px; } .jqx-flag-box .flag.hk { height: 14px; background-position: -2171px 0px; } .jqx-flag-box .flag.hm { height: 10px; background-position: -2193px 0px; } .jqx-flag-box .flag.hn { height: 10px; background-position: -2215px 0px; } .jqx-flag-box .flag.hr { height: 10px; background-position: -2237px 0px; } .jqx-flag-box .flag.ht { height: 12px; background-position: -2259px 0px; } .jqx-flag-box .flag.hu { height: 10px; background-position: -2281px 0px; } .jqx-flag-box .flag.ic { height: 14px; background-position: -2303px 0px; } .jqx-flag-box .flag.id { height: 14px; background-position: -2325px 0px; } .jqx-flag-box .flag.ie { height: 10px; background-position: -2347px 0px; } .jqx-flag-box .flag.il { height: 15px; background-position: -2369px 0px; } .jqx-flag-box .flag.im { height: 10px; background-position: -2391px 0px; } .jqx-flag-box .flag.in { height: 14px; background-position: -2413px 0px; } .jqx-flag-box .flag.io { height: 10px; background-position: -2435px 0px; } .jqx-flag-box .flag.iq { height: 14px; background-position: -2457px 0px; } .jqx-flag-box .flag.ir { height: 12px; background-position: -2479px 0px; } .jqx-flag-box .flag.is { height: 15px; background-position: -2501px 0px; } .jqx-flag-box .flag.it { height: 14px; background-position: -2523px 0px; } .jqx-flag-box .flag.je { height: 12px; background-position: -2545px 0px; } .jqx-flag-box .flag.jm { height: 10px; background-position: -2567px 0px; } .jqx-flag-box .flag.jo { height: 10px; background-position: -2589px 0px; } .jqx-flag-box .flag.jp { height: 14px; background-position: -2611px 0px; } .jqx-flag-box .flag.ke { height: 14px; background-position: -2633px 0px; } .jqx-flag-box .flag.kg { height: 12px; background-position: -2655px 0px; } .jqx-flag-box .flag.kh { height: 13px; background-position: -2677px 0px; } .jqx-flag-box .flag.ki { height: 10px; background-position: -2699px 0px; } .jqx-flag-box .flag.km { height: 12px; background-position: -2721px 0px; } .jqx-flag-box .flag.kn { height: 14px; background-position: -2743px 0px; } .jqx-flag-box .flag.kp { height: 10px; background-position: -2765px 0px; } .jqx-flag-box .flag.kr { height: 14px; background-position: -2787px 0px; } .jqx-flag-box .flag.kw { height: 10px; background-position: -2809px 0px; } .jqx-flag-box .flag.ky { height: 10px; background-position: -2831px 0px; } .jqx-flag-box .flag.kz { height: 10px; background-position: -2853px 0px; } .jqx-flag-box .flag.la { height: 14px; background-position: -2875px 0px; } .jqx-flag-box .flag.lb { height: 14px; background-position: -2897px 0px; } .jqx-flag-box .flag.lc { height: 10px; background-position: -2919px 0px; } .jqx-flag-box .flag.li { height: 12px; background-position: -2941px 0px; } .jqx-flag-box .flag.lk { height: 10px; background-position: -2963px 0px; } .jqx-flag-box .flag.lr { height: 11px; background-position: -2985px 0px; } .jqx-flag-box .flag.ls { height: 14px; background-position: -3007px 0px; } .jqx-flag-box .flag.lt { height: 12px; background-position: -3029px 0px; } .jqx-flag-box .flag.lu { height: 12px; background-position: -3051px 0px; } .jqx-flag-box .flag.lv { height: 10px; background-position: -3073px 0px; } .jqx-flag-box .flag.ly { height: 10px; background-position: -3095px 0px; } .jqx-flag-box .flag.ma { height: 14px; background-position: -3117px 0px; } .jqx-flag-box .flag.mc { height: 15px; background-position: -3139px 0px; } .jqx-flag-box .flag.md { height: 10px; background-position: -3160px 0px; } .jqx-flag-box .flag.me { height: 10px; background-position: -3182px 0px; } .jqx-flag-box .flag.mf { height: 14px; background-position: -3204px 0px; } .jqx-flag-box .flag.mg { height: 14px; background-position: -3226px 0px; } .jqx-flag-box .flag.mh { height: 11px; background-position: -3248px 0px; } .jqx-flag-box .flag.mk { height: 10px; background-position: -3270px 0px; } .jqx-flag-box .flag.ml { height: 14px; background-position: -3292px 0px; } .jqx-flag-box .flag.mm { height: 14px; background-position: -3314px 0px; } .jqx-flag-box .flag.mn { height: 10px; background-position: -3336px 0px; } .jqx-flag-box .flag.mo { height: 14px; background-position: -3358px 0px; } .jqx-flag-box .flag.mp { height: 10px; background-position: -3380px 0px; } .jqx-flag-box .flag.mq { height: 14px; background-position: -3402px 0px; } .jqx-flag-box .flag.mr { height: 14px; background-position: -3424px 0px; } .jqx-flag-box .flag.ms { height: 10px; background-position: -3446px 0px; } .jqx-flag-box .flag.mt { height: 14px; background-position: -3468px 0px; } .jqx-flag-box .flag.mu { height: 14px; background-position: -3490px 0px; } .jqx-flag-box .flag.mv { height: 14px; background-position: -3512px 0px; } .jqx-flag-box .flag.mw { height: 14px; background-position: -3534px 0px; } .jqx-flag-box .flag.mx { height: 12px; background-position: -3556px 0px; } .jqx-flag-box .flag.my { height: 10px; background-position: -3578px 0px; } .jqx-flag-box .flag.mz { height: 14px; background-position: -3600px 0px; } .jqx-flag-box .flag.na { height: 14px; background-position: -3622px 0px; } .jqx-flag-box .flag.nc { height: 10px; background-position: -3644px 0px; } .jqx-flag-box .flag.ne { height: 15px; background-position: -3666px 0px; } .jqx-flag-box .flag.nf { height: 10px; background-position: -3686px 0px; } .jqx-flag-box .flag.ng { height: 10px; background-position: -3708px 0px; } .jqx-flag-box .flag.ni { height: 12px; background-position: -3730px 0px; } .jqx-flag-box .flag.nl { height: 14px; background-position: -3752px 0px; } .jqx-flag-box .flag.no { height: 15px; background-position: -3774px 0px; } .jqx-flag-box .flag.np { height: 15px; background-position: -3796px 0px; } .jqx-flag-box .flag.nr { height: 10px; background-position: -3811px 0px; } .jqx-flag-box .flag.nu { height: 10px; background-position: -3833px 0px; } .jqx-flag-box .flag.nz { height: 10px; background-position: -3855px 0px; } .jqx-flag-box .flag.om { height: 10px; background-position: -3877px 0px; } .jqx-flag-box .flag.pa { height: 14px; background-position: -3899px 0px; } .jqx-flag-box .flag.pe { height: 14px; background-position: -3921px 0px; } .jqx-flag-box .flag.pf { height: 14px; background-position: -3943px 0px; } .jqx-flag-box .flag.pg { height: 15px; background-position: -3965px 0px; } .jqx-flag-box .flag.ph { height: 10px; background-position: -3987px 0px; } .jqx-flag-box .flag.pk { height: 14px; background-position: -4009px 0px; } .jqx-flag-box .flag.pl { height: 13px; background-position: -4031px 0px; } .jqx-flag-box .flag.pm { height: 14px; background-position: -4053px 0px; } .jqx-flag-box .flag.pn { height: 10px; background-position: -4075px 0px; } .jqx-flag-box .flag.pr { height: 14px; background-position: -4097px 0px; } .jqx-flag-box .flag.ps { height: 10px; background-position: -4119px 0px; } .jqx-flag-box .flag.pt { height: 14px; background-position: -4141px 0px; } .jqx-flag-box .flag.pw { height: 13px; background-position: -4163px 0px; } .jqx-flag-box .flag.py { height: 11px; background-position: -4185px 0px; } .jqx-flag-box .flag.qa { height: 8px; background-position: -4207px 0px; } .jqx-flag-box .flag.re { height: 14px; background-position: -4229px 0px; } .jqx-flag-box .flag.ro { height: 14px; background-position: -4251px 0px; } .jqx-flag-box .flag.rs { height: 14px; background-position: -4273px 0px; } .jqx-flag-box .flag.ru { height: 14px; background-position: -4295px 0px; } .jqx-flag-box .flag.rw { height: 14px; background-position: -4317px 0px; } .jqx-flag-box .flag.sa { height: 14px; background-position: -4339px 0px; } .jqx-flag-box .flag.sb { height: 10px; background-position: -4361px 0px; } .jqx-flag-box .flag.sc { height: 10px; background-position: -4383px 0px; } .jqx-flag-box .flag.sd { height: 10px; background-position: -4405px 0px; } .jqx-flag-box .flag.se { height: 13px; background-position: -4427px 0px; } .jqx-flag-box .flag.sg { height: 14px; background-position: -4449px 0px; } .jqx-flag-box .flag.sh { height: 10px; background-position: -4471px 0px; } .jqx-flag-box .flag.si { height: 10px; background-position: -4493px 0px; } .jqx-flag-box .flag.sj { height: 15px; background-position: -4515px 0px; } .jqx-flag-box .flag.sk { height: 14px; background-position: -4537px 0px; } .jqx-flag-box .flag.sl { height: 14px; background-position: -4559px 0px; } .jqx-flag-box .flag.sm { height: 15px; background-position: -4581px 0px; } .jqx-flag-box .flag.sn { height: 14px; background-position: -4603px 0px; } .jqx-flag-box .flag.so { height: 14px; background-position: -4625px 0px; } .jqx-flag-box .flag.sr { height: 14px; background-position: -4647px 0px; } .jqx-flag-box .flag.ss { height: 10px; background-position: -4669px 0px; } .jqx-flag-box .flag.st { height: 10px; background-position: -4691px 0px; } .jqx-flag-box .flag.sv { height: 12px; background-position: -4713px 0px; } .jqx-flag-box .flag.sx { height: 14px; background-position: -4735px 0px; } .jqx-flag-box .flag.sy { height: 14px; background-position: -4757px 0px; } .jqx-flag-box .flag.sz { height: 14px; background-position: -4779px 0px; } .jqx-flag-box .flag.ta { height: 10px; background-position: -4801px 0px; } .jqx-flag-box .flag.tc { height: 10px; background-position: -4823px 0px; } .jqx-flag-box .flag.td { height: 14px; background-position: -4845px 0px; } .jqx-flag-box .flag.tf { height: 14px; background-position: -4867px 0px; } .jqx-flag-box .flag.tg { height: 13px; background-position: -4889px 0px; } .jqx-flag-box .flag.th { height: 14px; background-position: -4911px 0px; } .jqx-flag-box .flag.tj { height: 10px; background-position: -4933px 0px; } .jqx-flag-box .flag.tk { height: 10px; background-position: -4955px 0px; } .jqx-flag-box .flag.tl { height: 10px; background-position: -4977px 0px; } .jqx-flag-box .flag.tm { height: 14px; background-position: -4999px 0px; } .jqx-flag-box .flag.tn { height: 14px; background-position: -5021px 0px; } .jqx-flag-box .flag.to { height: 10px; background-position: -5043px 0px; } .jqx-flag-box .flag.tr { height: 14px; background-position: -5065px 0px; } .jqx-flag-box .flag.tt { height: 12px; background-position: -5087px 0px; } .jqx-flag-box .flag.tv { height: 10px; background-position: -5109px 0px; } .jqx-flag-box .flag.tw { height: 14px; background-position: -5131px 0px; } .jqx-flag-box .flag.tz { height: 14px; background-position: -5153px 0px; } .jqx-flag-box .flag.ua { height: 14px; background-position: -5175px 0px; } .jqx-flag-box .flag.ug { height: 14px; background-position: -5197px 0px; } .jqx-flag-box .flag.um { height: 11px; background-position: -5219px 0px; } .jqx-flag-box .flag.un { height: 14px; background-position: -5241px 0px; } .jqx-flag-box .flag.us { height: 11px; background-position: -5263px 0px; } .jqx-flag-box .flag.uy { height: 14px; background-position: -5285px 0px; } .jqx-flag-box .flag.uz { height: 10px; background-position: -5307px 0px; } .jqx-flag-box .flag.va { height: 15px; background-position: -5329px 0px; } .jqx-flag-box .flag.vc { height: 14px; background-position: -5346px 0px; } .jqx-flag-box .flag.ve { height: 14px; background-position: -5368px 0px; } .jqx-flag-box .flag.vg { height: 10px; background-position: -5390px 0px; } .jqx-flag-box .flag.vi { height: 14px; background-position: -5412px 0px; } .jqx-flag-box .flag.vn { height: 14px; background-position: -5434px 0px; } .jqx-flag-box .flag.vu { height: 12px; background-position: -5456px 0px; } .jqx-flag-box .flag.wf { height: 14px; background-position: -5478px 0px; } .jqx-flag-box .flag.ws { height: 10px; background-position: -5500px 0px; } .jqx-flag-box .flag.xk { height: 15px; background-position: -5522px 0px; } .jqx-flag-box .flag.ye { height: 14px; background-position: -5544px 0px; } .jqx-flag-box .flag.yt { height: 14px; background-position: -5566px 0px; } .jqx-flag-box .flag.za { height: 14px; background-position: -5588px 0px; } .jqx-flag-box .flag.zm { height: 14px; background-position: -5610px 0px; } .jqx-flag-box .flag.zw { height: 10px; background-position: -5632px 0px; } .jqx-flag-box .flag { height: 15px; box-shadow: 0px 0px 1px 0px #888; background-image: url("images/flags.png"); background-repeat: no-repeat; background-color: #DBDBDB; background-position: 20px 0; } .jqx-flag-box .flag.np { background-color: transparent; } .jqx-country-input-drop-down-menu ul li a, .jqx-phone-input-drop-down-menu ul li a { border-left: var(--jqx-border-width) solid transparent; display: flex; align-items: center; } .jqx-country-input-drop-down-menu ul li .dial-code, .jqx-phone-input-drop-down-menu ul li .dial-code { margin-left: 6px; opacity: 0.5; } .jqx-country-input-drop-down-menu:not(.jqx-check-input-drop-down-menu) li.active a, .jqx-phone-input-drop-down-menu:not(.jqx-check-input-drop-down-menu) li.active a { border-left: var(--jqx-border-width) solid var(--jqx-primary); border-top-left-radius: 0; border-bottom-left-radius: 0; color: var(--jqx-ui-state-color-selected); background: var(--jqx-ui-state-selected); } .jqx-country-input-drop-down-menu[right-to-left] li a, .jqx-phone-input-drop-down-menu[right-to-left] li a { border-left: none; border-right: var(--jqx-border-width) solid transparent; } .jqx-country-input-drop-down-menu[right-to-left]:not(.jqx-check-input-drop-down-menu) li.active a, .jqx-phone-input-drop-down-menu[right-to-left]:not(.jqx-check-input-drop-down-menu) li.active a { border-left: var(--jqx-border-width) solid transparent; border-right: var(--jqx-border-width) solid var(--jqx-primary); border-top-left-radius: var(--jqx-border-top-left-radius); border-bottom-left-radius: var(--jqx-border-bottom-left-radius); border-top-right-radius: 0; border-bottom-right-radius: 0; } jqx-date-range-input.underlined, jqx-date-input.underlined, jqx-time-input.underlined { overflow: visible; } .underlined.jqx-input { transition: border-bottom 0.2s, background-color 0.2s; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top: none; border-left: none; border-right: none; } .underlined.jqx-input .jqx-hint { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: block !important; box-sizing: border-box; padding: var(--jqx-editor-label-padding); color: var(--jqx-background-color); pointer-events: none; font-size: 75%; opacity: 0; transition: color 0.2s, font-size 0.2s, line-height 0.2s, margin-top 0.2s, opacity 0.3s, top 0.2s; margin-top: calc(0px - var(--jqx-font-size)); } .underlined.jqx-input .jqx-hint:after { content: ""; position: absolute; left: 0; bottom: -2px; display: block; width: 100%; height: 2px; background-color: var(--jqx-primary); transform-origin: bottom center; transform: scaleX(0); transition: transform 0.2s; } .underlined.jqx-input[drop-down-button-position=left] .jqx-drop-down-button { border-bottom-left-radius: initial; } .underlined.jqx-input[drop-down-button-position=right] .jqx-drop-down-button { border-bottom-right-radius: initial; } .underlined.jqx-input .jqx-drop-down-button { border-top: none; border-left: none; border-right: none; } .underlined.jqx-input[hover] { border-bottom-color: var(--jqx-background-color); border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; } .underlined.jqx-input[focus] .jqx-hint { color: var(--jqx-primary); opacity: 1; } .underlined.jqx-input[focus] .jqx-hint:before { opacity: 0.12; } .underlined.jqx-input[focus] .jqx-hint:after { transform: scale(1); } .underlined.jqx-input .jqx-input:not(:focus):placeholder-shown + .jqx-hint { font-size: inherit; margin-top: 0px; } .underlined.jqx-input:not([readonly]) .jqx-drop-down-button { border-bottom-left-radius: initial; border-bottom-right-radius: initial; } .underlined.jqx-input:not([opened]) .jqx-drop-down-button { background-color: transparent; } .underlined.jqx-input.jqx-multi-combo-input:not([focus]) .jqx-hint { margin-top: 0px; } .underlined.jqx-input.jqx-date-range-input[opened][drop-down-button-position=right]:not([readonly]) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .underlined.jqx-input[readonly] .jqx-input { cursor: pointer; background: var(--jqx-background) !important; color: var(--jqx-background-color) !important; opacity: 0.75; } .underlined.jqx-input[drop-down-button-position=left] .jqx-drop-down-button { background: inherit; color: inherit; border-bottom-left-radius: initial; } .underlined.jqx-input[drop-down-button-position=left] .jqx-hint { margin-left: var(--jqx-editor-addon-width); } .underlined.jqx-input[drop-down-button-position=left][focus] .jqx-hint:after { margin-left: calc(0px - var(--jqx-editor-addon-width)); width: calc(100% + var(--jqx-editor-addon-width)); } .underlined.jqx-input[drop-down-button-position=left][opened]:not([readonly]), .underlined.jqx-input[drop-down-button-position=left][opened]:not([readonly]) input { border-bottom-right-radius: 0; } .underlined.jqx-input[drop-down-button-position=right] .jqx-drop-down-button { background: var(--jqx-background); color: var(--jqx-background-color); border-bottom-right-radius: initial; } .underlined.jqx-input[drop-down-button-position=right][opened]:not([readonly]), .underlined.jqx-input[drop-down-button-position=right][opened]:not([readonly]) input { border-bottom-left-radius: 0; } .underlined.jqx-input.jqx-invalid { border-bottom-color: rgba(var(--jqx-error-rgb), 0.5); } .underlined.jqx-input.jqx-invalid .jqx-hint:after { background-color: var(--jqx-error); } .underlined.jqx-text-box input.jqx-input { border-top: none; border-left: none; border-right: none; border-bottom-left-radius: initial; border-bottom-right-radius: initial; } .underlined.jqx-number-input .nav { background: var(--jqx-background); color: var(--jqx-background-color); } .underlined.jqx-number-input .nav .up { border-bottom: none; } .underlined.jqx-element.jqx-material { --jqx-border-top-left-radius: 0; --jqx-border-top-right-radius: 0; --jqx-border-bottom-left-radius: 0; --jqx-border-bottom-right-radius: 0; } .underlined.jqx-element.jqx-material.jqx-valid { --jqx-border: #28a745; } .underlined.jqx-element.jqx-material.jqx-invalid { --jqx-border: #dc3545; } .underlined.jqx-element.jqx-material .jqx-hint { opacity: 1; transition: color 0.2s, opacity 0.1s, font-size 0.2s, line-height 0.2s, margin-top 0.2s, top 0.2s !important; margin-top: 0; font-size: 100%; } .underlined.jqx-element.jqx-material[focus][hover] .jqx-hint, .underlined.jqx-element.jqx-material[focus] .jqx-hint, .underlined.jqx-element.jqx-material[value]:not([value=""]) .jqx-hint, .underlined.jqx-element.jqx-material.has-value .jqx-hint { margin-top: -20px; font-size: 80% !important; } jqx-text-box.outlined, jqx-input.outlined, jqx-password-input.outlined, jqx-date-range-input.outlined, jqx-multi-input.outlined, jqx-multi-combo-input.outlined, jqx-check-input.outlined, jqx-masked-text-box.outlined, jqx-phone-input.outlined, jqx-password-text-box.outlined { background-color: transparent; } jqx-date-range-input.outlined, jqx-date-input.outlined, jqx-phone-input.outlined, jqx-time-input.outlined { overflow: visible; } jqx-phone-input.outlined .jqx-drop-down-button { margin-right: 0px; } jqx-phone-input.outlined .jqx-container::after { margin-left: -18px; z-index: 9; } .outlined.jqx-input { position: relative; display: inline-block; font-family: var(--jqx-font-family); font-size: var(--jqx-font-size); line-height: 1.5; height: 50px; margin: 0px; border: none; border-radius: 0px; padding-top: 6px; overflow: hidden; } .outlined.jqx-input .jqx-input { padding: 12px 13px 12px; z-index: 5; background: var(--jqx-background); border: 1px solid var(--jqx-border); transition: border-color 0.2s; } .outlined.jqx-input.jqx-valid[focus] .jqx-input, .outlined.jqx-input.jqx-valid[focus] .jqx-drop-down-button { border-color: var(--jqx-primary); } .outlined.jqx-input.jqx-valid[focus] .jqx-drop-down-button { color: var(--jqx-primary); } .outlined.jqx-input.jqx-invalid .jqx-input, .outlined.jqx-input.jqx-invalid .jqx-drop-down-button { border-color: rgba(var(--jqx-error-rgb), 0.5); } .outlined.jqx-input.jqx-invalid[focus] .jqx-input, .outlined.jqx-input.jqx-invalid[focus] .jqx-drop-down-button { border-color: var(--jqx-error); } .outlined.jqx-input.jqx-invalid[focus] .jqx-drop-down-button { color: var(--jqx-error); } .outlined.jqx-input.jqx-multi-combo-input .jqx-input { padding: 0; border: none !important; z-index: initial; } .outlined.jqx-input.jqx-multi-combo-input .jqx-drop-down-button { padding: 0 !important; } .outlined.jqx-input.jqx-multi-combo-input .jqx-action-button { border-right: none; border-top: 1px solid var(--jqx-border); padding: 12px 13px 12px; z-index: 5; background: var(--jqx-background); border: 1px solid var(--jqx-border); transition: border-color 0.2s; } .outlined.jqx-input.jqx-multi-combo-input[hint] .jqx-action-button { border-top: 1px solid var(--jqx-background); } .outlined.jqx-input.jqx-multi-combo-input[focus] .jqx-action-button { border-color: var(--jqx-primary); color: var(--jqx-primary); } .outlined.jqx-input.jqx-multi-combo-input[focus][hint] .jqx-action-button { border-top-color: var(--jqx-background); } .outlined.jqx-input.jqx-multi-combo-input.jqx-valid[focus] .jqx-action-button { border-color: var(--jqx-primary); } .outlined.jqx-input.jqx-multi-combo-input.jqx-valid[focus] .jqx-action-button.jqx-valid { color: var(--jqx-primary); } .outlined.jqx-input.jqx-multi-combo-input.jqx-invalid[focus] .jqx-action-button.jqx-invalid { color: var(--jqx-error); } .outlined.jqx-input[drop-down-button-position=right] input { border-right: none; } .outlined.jqx-input[drop-down-button-position=right] .jqx-drop-down-button { padding: 10px 0px 9px 0px; border-left: none; border-bottom: 1px solid var(--jqx-border); border-right: 1px solid var(--jqx-border); border-top: 1px solid var(--jqx-border); background: inherit; color: inherit; z-index: 6; cursor: pointer; } .outlined.jqx-input[drop-down-button-position=left] input { border-left: none; } .outlined.jqx-input[drop-down-button-position=left] .jqx-drop-down-button { padding: 10px 0px; border-right: none; border-bottom: 1px solid var(--jqx-border); border-left: 1px solid var(--jqx-border); background: inherit; color: inherit; z-index: 6; cursor: pointer; } .outlined.jqx-input[hint] .jqx-hint { position: absolute; top: 0; left: 0; display: flex !important; border-color: var(--jqx-border) !important; width: 100%; max-height: 100%; color: var(--jqx-background-color); font-size: 75%; line-height: 15px; cursor: text; margin-top: -6px; z-index: 7; white-space: nowrap; transition: color 0.2s, z-index 0.2s, font-size 0.2s, opacity 0.3s, font-size 0.2s, line-height 0.2s; } .outlined.jqx-input[hint] .jqx-hint:before, .outlined.jqx-input[hint] .jqx-hint:after { content: ""; display: block; box-sizing: border-box; margin-top: 6px; border-top: solid 1px; border-top-color: var(--jqx-border) !important; min-width: 10px; height: 8px; pointer-events: none; box-shadow: inset 0 1px transparent; transition: border-color 0.2s, box-shadow 0.2s; z-index: 7; } .outlined.jqx-input[hint] .jqx-hint:before { margin-right: 4px; border-left: solid 1px transparent; border-radius: 4px 0; } .outlined.jqx-input[hint] .jqx-hint:after { flex-grow: 1; margin-left: 4px; border-right: solid 1px transparent; border-radius: 0 4px; } .outlined.jqx-input[hint][drop-down-button-position=left] .jqx-hint:before { width: var(--jqx-editor-addon-width); margin-right: 13px; } .outlined.jqx-input[focus] { border-color: var(--jqx-primary); border-top-color: transparent !important; box-shadow: inset 1px 0 var(--jqx-material-safari-helper1), inset -1px 0 var(--jqx-material-safari-helper1), inset 0 -1px var(--jqx-material-safari-helper1); outline: none; } .outlined.jqx-input[focus] .jqx-input { border-color: var(--jqx-primary); } .outlined.jqx-input[focus] .jqx-drop-down-button { color: var(--jqx-primary); border-color: var(--jqx-primary); } .outlined.jqx-input[focus][hint] .jqx-input { border-top-color: var(--jqx-background); } .outlined.jqx-input[focus][hint] .jqx-hint { color: var(--jqx-primary); opacity: 1; } .outlined.jqx-input[focus][hint] .jqx-hint:before, .outlined.jqx-input[focus][hint] .jqx-hint:after { border-top-color: var(--jqx-primary) !important; box-shadow: none !important; } .outlined.jqx-input[hover] { border-color: var(--jqx-border); border-top-color: transparent; } .outlined.jqx-input[hover][hint] .jqx-hint:before { border-top-color: var(--jqx-border); } .outlined.jqx-input[hover][hint] > input:not(:focus):placeholder-shown, .outlined.jqx-input[hover][hint] > textarea:not(:focus):placeholder-shown { border-color: var(--jqx-border); } .outlined.jqx-input[readonly] .jqx-input { background: var(--jqx-background) !important; color: var(--jqx-background-color) !important; opacity: 0.75; } .outlined.jqx-input:not([focus]) .jqx-input:not(:focus):placeholder-shown, .outlined.jqx-input:not([focus]) .jqx-input { border-top: 1px solid var(--jqx-border); z-index: 5; } .outlined.jqx-input:not([focus]).jqx-invalid .jqx-input:not(:focus):placeholder-shown, .outlined.jqx-input:not([focus]).jqx-invalid .jqx-input { border-top: 1px solid rgba(var(--jqx-error-rgb), 0.5); z-index: 5; } .outlined.jqx-input:not([focus]):not([value]).jqx-multi-combo-input[hint] .jqx-hint, .outlined.jqx-input[hint] .jqx-input:not(:focus):placeholder-shown + .jqx-hint, .outlined.jqx-input[hint]:not([focus]) .jqx-hint { font-size: var(--jqx-font-size); line-height: 60px; z-index: 2; user-select: none; pointer-events: none; } .outlined.jqx-input.jqx-invalid[focus] { border-color: var(--jqx-error); } .outlined.jqx-input.jqx-invalid[focus][hint] .jqx-hint { color: var(--jqx-error); } .outlined.jqx-input.jqx-invalid[focus][hint] .jqx-hint:before, .outlined.jqx-input.jqx-invalid[focus][hint] .jqx-hint:after { border-top-color: var(--jqx-error) !important; } .outlined.jqx-input.jqx-valid[focus] { border-color: var(--jqx-primary); } .outlined.jqx-input.jqx-valid[focus][hint] .jqx-hint { color: var(--jqx-primary); } .outlined.jqx-input.jqx-valid[focus][hint] .jqx-hint:before, .outlined.jqx-input.jqx-valid[focus][hint] .jqx-hint:after { border-top-color: var(--jqx-primary) !important; } .outlined.jqx-text-area[hint] .jqx-input:not(:focus):placeholder-shown + .jqx-hint, .outlined.jqx-text-area[hint]:not([focus]) .jqx-hint { font-size: var(--jqx-font-size); line-height: var(--jqx-editor-height); opacity: 0; z-index: 2; } .outlined.jqx-text-box input { border: none; padding: 7px; } .outlined.jqx-number-input .nav { background: var(--jqx-background); color: var(--jqx-background-color); } .outlined.jqx-number-input .nav .up { border-bottom: none; } .outlined.jqx-number-input[drop-down-button-position=right] .jqx-drop-down-button, .outlined.jqx-number-input[drop-down-button-position=left] .jqx-drop-down-button { padding: 0; } .outlined.jqx-element.jqx-material.jqx-valid { --jqx-border: #28a745; } .outlined.jqx-element.jqx-material.jqx-invalid { --jqx-border: #dc3545; } .outlined.jqx-element.jqx-material .jqx-hint { opacity: 1 !important; transition: color 0.2s, opacity 0.1s, font-size 0.2s, line-height 0.2s, margin-top 0.2s, top 0.2s !important; z-index: 7 !important; } .outlined.jqx-element.jqx-material[focus][hover], .outlined.jqx-element.jqx-material[focus], .outlined.jqx-element.jqx-material[value]:not([value=""]), .outlined.jqx-element.jqx-material.has-value { border-color: var(--jqx-primary); border-top-color: transparent !important; outline: none; } .outlined.jqx-element.jqx-material[focus][hover] .jqx-input, .outlined.jqx-element.jqx-material[focus] .jqx-input, .outlined.jqx-element.jqx-material[value]:not([value=""]) .jqx-input, .outlined.jqx-element.jqx-material.has-value .jqx-input { border-top-color: var(--jqx-background) !important; } .outlined.jqx-element.jqx-material[focus][hover] .jqx-hint, .outlined.jqx-element.jqx-material[focus] .jqx-hint, .outlined.jqx-element.jqx-material[value]:not([value=""]) .jqx-hint, .outlined.jqx-element.jqx-material.has-value .jqx-hint { color: var(--jqx-primary) !important; opacity: 1 !important; font-size: 75% !important; line-height: 15px; z-index: 7; transition: color 0.2s, z-index 0.2s, font-size 0.2s, opacity 0.3s, font-size 0.2s, line-height 0.2s; } .outlined.jqx-element.jqx-material[focus][hover] .jqx-container .jqx-content, .outlined.jqx-element.jqx-material[focus] .jqx-container .jqx-content, .outlined.jqx-element.jqx-material[value]:not([value=""]) .jqx-container .jqx-content, .outlined.jqx-element.jqx-material.has-value .jqx-container .jqx-content { border-top-color: transparent !important; } .outlined.jqx-drop-down-box > .jqx-container > .jqx-content { z-index: 7 !important; } .jqx-invalid .outlined.jqx-input.jqx-multi-combo-input .jqx-action-button { border-color: rgba(var(--jqx-error-rgb), 0.5); } .jqx-invalid .outlined.jqx-input.jqx-multi-combo-input[focus] .jqx-action-button { border-color: var(--jqx-error); } /* Faster transition in Safari for less noticable fractional font-size issue */ @media not all and (min-resolution: 0.001dpcm) { @supports (-webkit-appearance: none) { .jqx-input .jqx-input, .jqx-input .jqx-hint, .jqx-input .jqx-hint::after { transition-duration: 0.1s; } } } /* .jqx-time-picker */ .jqx-time-picker { display: block; width: var(--jqx-time-picker-default-width); height: var(--jqx-time-picker-default-height); line-height: initial; min-width: 250px; } .jqx-time-picker > .jqx-container { width: 100%; height: 100%; } .jqx-time-picker .jqx-main-container { width: 100%; height: calc(100% - var(--jqx-calendar-title-height)); padding: 2%; background-color: var(--jqx-background); } .jqx-time-picker .jqx-header { display: flex; width: 100%; height: var(--jqx-calendar-title-height); background-color: var(--jqx-primary); color: var(--jqx-primary-color); justify-content: center; align-items: center; } .jqx-time-picker .jqx-header:focus { outline: 1px solid var(--jqx-background); } .jqx-time-picker .jqx-footer { display: none; } .jqx-time-picker .jqx-svg-container { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; } .jqx-time-picker .jqx-hour-container, .jqx-time-picker .jqx-minute-container, .jqx-time-picker .jqx-am-container, .jqx-time-picker .jqx-pm-container { opacity: 0.5; cursor: pointer; } .jqx-time-picker .jqx-hour-minute-container { display: flex; font-size: 50px; } .jqx-time-picker .jqx-hour-minute-container div:nth-child(2) { opacity: 0.5; } .jqx-time-picker .jqx-am-pm-container { margin-left: 10px; } .jqx-time-picker .jqx-selected { opacity: 1; } .jqx-time-picker .jqx-svg-picker { border-radius: 50%; background-color: var(--jqx-background); position: relative; box-sizing: content-box; touch-action: none; } .jqx-time-picker .jqx-svg-picker:focus { border: 1px solid var(--jqx-outline); outline: none; } .jqx-time-picker .jqx-svg-picker.animate { animation: jqx-time-picker-animation 0.5s linear; } .jqx-time-picker .jqx-label { fill: var(--jqx-background-color); } .jqx-time-picker .jqx-label.jqx-selected { fill: var(--jqx-primary-color); stroke: var(--jqx-primary-color); stroke-width: 0px; } .jqx-time-picker .jqx-needle, .jqx-time-picker .jqx-needle-central-circle { fill: var(--jqx-primary); } .jqx-time-picker[readonly] .jqx-hour-container, .jqx-time-picker[readonly] .jqx-minute-container, .jqx-time-picker[readonly] .jqx-am-container, .jqx-time-picker[readonly] .jqx-pm-container, .jqx-time-picker[disabled] .jqx-hour-container, .jqx-time-picker[disabled] .jqx-minute-container, .jqx-time-picker[disabled] .jqx-am-container, .jqx-time-picker[disabled] .jqx-pm-container { cursor: default; } .jqx-time-picker[footer] .jqx-footer { display: block; width: 100%; height: 30px; } .jqx-time-picker[footer] .jqx-svg-container { height: calc(100% - 30px); } .jqx-time-picker[view=landscape] { width: var(--jqx-time-picker-default-height); height: var(--jqx-time-picker-default-width); min-width: 400px; } .jqx-time-picker[view=landscape] > .jqx-container { display: flex; } .jqx-time-picker[view=landscape] .jqx-header { flex-direction: column; width: 33%; height: 100%; } .jqx-time-picker[view=landscape] .jqx-main-container { width: 67%; height: 100%; } .jqx-time-picker[view=landscape] .jqx-am-pm-container { margin-left: 0; } @keyframes jqx-time-picker-animation { 0% { opacity: 1; } 25% { opacity: 0.5; } 50% { opacity: 0; } 75% { opacity: 0.5; } 100% { opacity: 1; } } .jqx-time-picker[right-to-left] .jqx-header, .jqx-time-picker[right-to-left] .jqx-footer { direction: rtl; } .jqx-time-picker[right-to-left] .jqx-am-pm-container { margin: 0 10px 0 0; } .jqx-time-picker[right-to-left][view=landscape] > .jqx-container { flex-direction: row-reverse; } jqx-timeline { overflow: hidden; padding: 10px; font-family: var(--jqx-font-family); display: block; } jqx-timeline .jqx-container { position: relative; overflow: hidden; display: flex; } jqx-timeline .jqx-timeline-near-items { padding-right: 20px; position: relative; } jqx-timeline .jqx-timeline-far-items { padding-left: 20px; position: relative; } jqx-timeline.jqx-timeline[horizontal] .jqx-container { flex-direction: column; } jqx-timeline.jqx-timeline[horizontal] .jqx-timeline-near-items { padding-right: 0px; padding-bottom: 20px; display: flex; align-items: flex-end; } jqx-timeline.jqx-timeline[horizontal] .jqx-timeline-far-items { padding-left: 0px; padding-top: 20px; display: flex; } jqx-timeline .jqx-timeline-item { display: flex; align-items: center; justify-content: flex-end; padding-block: 20px; padding-inline: 0; position: relative; } jqx-timeline.jqx-timeline[horizontal] .jqx-timeline-item { display: block; padding-block: 0px; } jqx-timeline .jqx-timeline-item[collapsible] { cursor: pointer; } jqx-timeline .jqx-timeline-item-icon { width: 20px; height: 20px; margin-right: 10px; } jqx-timeline .jqx-timeline-item-content { background: var(--jqx-background); border: 1px solid var(--jqx-border); padding: 20px; border-radius: var(--jqx-border-radius); position: relative; } jqx-timeline .jqx-timeline-item-pointer { top: 50%; right: 0px; content: ""; transform: translate(-50%, -50%) rotate(45deg); width: 16px; height: 16px; background: var(--jqx-background); border: 1px solid var(--jqx-border); display: block; right: 0px; position: absolute; margin-right: -16px; z-index: 9; } jqx-timeline .jqx-timeline-item-pointer::after { width: 16px; content: ""; background: var(--jqx-background); height: 16px; position: absolute; z-index: 9; right: 14px; } jqx-timeline .jqx-timeline-item-pointer::before { content: ""; background: var(--jqx-background); width: 16px; height: 16px; position: absolute; z-index: 9; top: 14px; right: inherit; } jqx-timeline .jqx-timeline-far-items .jqx-timeline-item-pointer { right: inherit; left: 0px; } jqx-timeline .jqx-timeline-far-items .jqx-timeline-item-pointer::before { right: unset; left: 14px; top: -2px; } jqx-timeline .jqx-timeline-far-items .jqx-timeline-item-pointer::after { top: -16px; right: -2px; } jqx-timeline.jqx-timeline[horizontal] .jqx-timeline-item-pointer { left: 50%; top: 0px; } jqx-timeline.jqx-timeline[horizontal] .jqx-timeline-near-items .jqx-timeline-item-pointer { left: 50%; bottom: -16px; top: unset; } jqx-timeline .jqx-timeline-far-items .jqx-timeline-item { justify-content: flex-start; } jqx-timeline .jqx-timeline-far-items .jqx-timeline-item-content { padding-left: 20px; padding-right: 20px; } jqx-timeline.jqx-timeline[horizontal] .jqx-timeline-far-items .jqx-timeline-item-pointer::after { top: unset; } jqx-timeline.jqx-timeline[horizontal] .jqx-timeline-far-items .jqx-timeline-item-pointer::before { top: 0px; } jqx-timeline.jqx-timeline[horizontal] .jqx-timeline-near-items .jqx-timeline-item-pointer::before { top: -16px; } jqx-timeline.jqx-timeline[horizontal] .jqx-timeline-near-items .jqx-timeline-item-pointer::after { left: -16px; top: -2px; } jqx-timeline .jqx-timeline-item-title { font-size: 16px; font-weight: 400; } jqx-timeline .jqx-timeline-item .jqx-timeline-item-description { display: none; margin-top: 20px; } jqx-timeline .jqx-timeline-item.expanded .jqx-timeline-item-description { display: block; } jqx-timeline .jqx-timeline-item[collapsible].expanded .jqx-timeline-item-title::after { content: var(--jqx-icon-arrow-down); } jqx-timeline .jqx-timeline-item[collapsible] .jqx-timeline-item-title::after { content: var(--jqx-icon-arrow-right); display: inline; width: 100%; height: 1px; font-family: var(--jqx-font-family-icon); margin-top: 10px; cursor: pointer; } jqx-timeline .jqx-timeline-item-subtitle { font-size: 12px; font-weight: 400; } jqx-timeline .jqx-timeline-track { border-width: 1px; border-style: solid; width: 6px; border-radius: 6px; background: var(--jqx-surface); border: 1px solid var(--jqx-border); display: flex; align-items: center; flex-direction: column; } jqx-timeline.jqx-timeline[horizontal] .jqx-timeline-track { width: 100%; height: 6px; } jqx-timeline .jqx-timeline-near-items .jqx-timeline-item-date { right: 20px; } jqx-timeline .jqx-timeline-far-items .jqx-timeline-item-date { left: 20px; } jqx-timeline.jqx-timeline[horizontal] .jqx-timeline-near-items .jqx-timeline-item-date { right: unset; bottom: 20px; } jqx-timeline.jqx-timeline[horizontal] .jqx-timeline-far-items .jqx-timeline-item-date { left: unset; top: 20px; } jqx-timeline .jqx-timeline-item-date { position: absolute; margin-top: 3px; } jqx-timeline .jqx-timeline-dot { width: 16px; height: 16px; margin-top: 4px; border-radius: 50%; position: absolute; z-index: 1; background: var(--jqx-primary); } jqx-timeline.jqx-timeline[horizontal] .jqx-timeline-dot { margin-top: -6px; } /* jqx-toast */ jqx-toast { font-family: var(--jqx-font-family-icon); display: none; } jqx-toast .jqx-toast-container { font-family: var(--jqx-font-family-icon); display: none; } .jqx-toast-container.jqx-toast-container-top-left, .jqx-toast-container.jqx-toast-container-top-right, .jqx-toast-container.jqx-toast-container-bottom-left, .jqx-toast-container.jqx-toast-container-bottom-right, .jqx-toast-container.jqx-toast-container-custom { width: var(--jqx-toast-container-default-width); padding: 5px; position: fixed; overflow-y: hidden; box-sizing: border-box; z-index: var(--jqx-editor-drop-down-z-index); } .jqx-toast-container.jqx-toast-container-top-left { top: 0px; left: 0px; } .jqx-toast-container.jqx-toast-container-top-right { top: 0px; right: 0px; } .jqx-toast-container.jqx-toast-container-bottom-left { bottom: 0px; left: 0px; } .jqx-toast-container.jqx-toast-container-bottom-right { bottom: 0px; right: 0px; } .jqx-toast-container.jqx-toast-container-modal { width: 100%; height: 100%; } .jqx-toast-container.jqx-toast-container-modal:not(:empty) { background-color: rgba(0, 0, 0, 0.5); display: flex; flex-direction: column; align-items: center; justify-content: center; position: fixed; left: 0px; top: 0px; z-index: var(--jqx-editor-drop-down-z-index); } .jqx-toast-container.jqx-toast-container-modal .jqx-toast-item { width: 200px; } .jqx-toast-item { display: block; width: 100%; margin-bottom: 2px; opacity: 0.8; user-select: none; background-color: var(--jqx-surface); border-color: var(--jqx-border); color: var(--jqx-surface-color); } .jqx-toast-item:hover { opacity: 1; } .jqx-toast-item .jqx-toast-item-header { display: flex; justify-content: flex-end; height: var(--jqx-toast-header-height); } .jqx-toast-item .jqx-toast-item-header .jqx-toast-item-close-button { font-family: var(--jqx-font-family-icon); user-select: none; position: relative; cursor: pointer; color: black; margin: 5px; opacity: 1; display: none; width: var(--jqx-font-size); height: var(--jqx-font-size); color: inherit; } .jqx-toast-item .jqx-toast-item-container { padding: 0px 0px 10px 0px; display: flex; align-items: center; position: relative; top: -4px; } .jqx-toast-item .jqx-toast-item-container .jqx-toast-item-icon { width: 25px; height: 25px; margin: 0px 15px 0px 15px; display: inline-block; background-repeat: no-repeat; } .jqx-toast-item .jqx-toast-item-container .jqx-toast-item-icon:after { content: var(--jqx-toast-item-icon); width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; font-family: var(--jqx-font-family-icon); font-size: 1.75em; } .jqx-toast-item .jqx-toast-item-container .jqx-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: 0px 15px 0px 15px; } .jqx-toast-item[show-close-button] .jqx-toast-item-header .jqx-toast-item-close-button { display: block; } .jqx-toast-item[show-close-button] .jqx-toast-item-header .jqx-toast-item-close-button:after { font-family: var(--jqx-font-family-icon); content: var(--jqx-icon-close); font-size: inherit; user-select: none; cursor: pointer; color: inherit; position: absolute; left: 0px; top: 0px; display: block; } .jqx-toast-item[opened] { opacity: 0.8; } .jqx-toast-item[opened]:hover { opacity: 1; } .jqx-toast-item.blink { animation: blink normal 1s infinite ease-in; } .jqx-toast-item.primary { background-color: var(--jqx-primary); border-color: var(--jqx-primary); color: var(--jqx-primary-color); } .jqx-toast-item.primary .jqx-toast-item-header .jqx-toast-item-close-button { color: var(--jqx-primary-color); } .jqx-toast-item.secondary { background-color: var(--jqx-secondary); border-color: var(--jqx-secondary); color: var(--jqx-secondary-color); } .jqx-toast-item.secondary .jqx-toast-item-header .jqx-toast-item-close-button { color: var(--jqx-primary-color); } .jqx-toast-item.success { background-color: var(--jqx-success); border-color: var(--jqx-success); color: var(--jqx-success-color); } .jqx-toast-item.success .jqx-toast-item-header .jqx-toast-item-close-button { color: var(--jqx-primary-color); } .jqx-toast-item.error { background-color: var(--jqx-error); border-color: var(--jqx-error); color: var(--jqx-error-color); } .jqx-toast-item.error .jqx-toast-item-header .jqx-toast-item-close-button { color: var(--jqx-primary-color); } .jqx-toast-item.info { background-color: var(--jqx-info); border-color: var(--jqx-info); color: var(--jqx-info-color); } .jqx-toast-item.info .jqx-toast-item-header .jqx-toast-item-close-button { color: var(--jqx-primary-color); } .jqx-toast-item.warning { background-color: var(--jqx-warning); border-color: var(--jqx-warning); color: var(--jqx-warning-color); } .jqx-toast-item.warning .jqx-toast-item-header .jqx-toast-item-close-button { color: var(--jqx-primary-color); } .jqx-toast-item.light { background-color: var(--jqx-light); border-color: var(--jqx-light); color: var(--jqx-light-color); } .jqx-toast-item.light .jqx-toast-item-header .jqx-toast-item-close-button { color: var(--jqx-primary-color); } .jqx-toast-item.dark { background-color: var(--jqx-dark); border-color: var(--jqx-dark); color: var(--jqx-dark-color); } .jqx-toast-item.dark .jqx-toast-item-header .jqx-toast-item-close-button { color: var(--jqx-primary-color); } .jqx-toast-item.mail { background-color: #337ab7; border-color: #337ab7; color: white; } .jqx-toast-item.mail .jqx-toast-item-header .jqx-toast-item-close-button { color: white; } .jqx-toast-item.time { background-color: #363636; border-color: #363636; color: white; } .jqx-toast-item.time .jqx-toast-item-header .jqx-toast-item-close-button { color: white; } .jqx-toast-item.info .jqx-toast-item-icon:after { --jqx-toast-item-icon: var(--jqx-icon-help-circled); } .jqx-toast-item.warning .jqx-toast-item-icon:after { --jqx-toast-item-icon: var(--jqx-icon-attention); } .jqx-toast-item.success .jqx-toast-item-icon:after { --jqx-toast-item-icon: var(--jqx-icon-check); } .jqx-toast-item.error .jqx-toast-item-icon:after { --jqx-toast-item-icon: var(--jqx-icon-block); } .jqx-toast-item.mail .jqx-toast-item-icon:after { --jqx-toast-item-icon: var(--jqx-icon-mail); } .jqx-toast-item.time .jqx-toast-item-icon:after { --jqx-toast-item-icon: var(--jqx-icon-clock); } .jqx-toast-item[right-to-left] > .jqx-container { direction: rtl; } @keyframes blink { 50% { opacity: 0.5; } } /* jqx-check-box and jqx-radio-button*/ .jqx-toggle-box { display: inline-block; outline: none; height: var(--jqx-editor-height); cursor: pointer; } .jqx-toggle-box.jqx-element { border: none; background: transparent; } .jqx-toggle-box .jqx-container, .jqx-toggle-box.jqx-container { position: relative; display: flex; align-items: center; } .jqx-toggle-box .jqx-ripple { background: var(--jqx-primary); } .jqx-toggle-box .jqx-overlay { top: 0; height: 100%; background: var(--jqx-primary); width: var(--jqx-editor-height); position: absolute; left: 2px; border-radius: 100%; padding: 0px; opacity: 0; box-sizing: content-box; transition: opacity 280ms ease-in-out; margin: 0px; } .jqx-toggle-box .jqx-label { color: var(--jqx-background-color); background: inherit; font-size: inherit; font-family: inherit; margin: 0 8px 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: auto; } .jqx-toggle-box.jqx-check-box .jqx-input { width: var(--jqx-check-box-default-size); min-width: var(--jqx-check-box-default-size); height: var(--jqx-check-box-default-size); min-height: var(--jqx-check-box-default-size); background-color: var(--jqx-background); box-sizing: initial; border: var(--jqx-border-width) solid var(--jqx-border); display: inline-block; color: var(--jqx-background-color); border-top-left-radius: var(--jqx-border-top-left-radius); border-top-right-radius: var(--jqx-border-top-right-radius); border-bottom-left-radius: var(--jqx-border-bottom-left-radius); border-bottom-right-radius: var(--jqx-border-bottom-right-radius); margin: 0 0 0 8px; transition: background linear 0.2s; position: relative; } .jqx-toggle-box.jqx-check-box .jqx-input:after { font-family: var(--jqx-font-family-icon); display: flex; justify-content: center; align-content: center; height: 100%; align-items: center; } .jqx-toggle-box.jqx-check-box[checked] .jqx-input:after { font-weight: 100; content: var(--jqx-icon-check); pointer-events: none; } .jqx-toggle-box.jqx-check-box[checked=null] .jqx-input:after { content: "-"; margin-top: -1px; } .jqx-toggle-box.jqx-radio-button .jqx-input { width: var(--jqx-radio-button-default-size); min-width: var(--jqx-radio-button-default-size); height: var(--jqx-radio-button-default-size); min-height: var(--jqx-radio-button-default-size); background-color: var(--jqx-background); box-sizing: initial; border-style: solid; border-width: var(--jqx-border-width); border-color: var(--jqx-border); display: inline-block; border-radius: 100%; color: var(--jqx-background-color); margin: 0 0 0 8px; position: relative; } .jqx-toggle-box.jqx-radio-button .jqx-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%; } .jqx-toggle-box.jqx-radio-button[checked] .jqx-input:after { font-size: 15px; font-weight: 100; background: var(--jqx-primary-color); } .jqx-toggle-box.jqx-radio-button[checked][hover]:not([focus]) .jqx-input::after { background: var(--jqx-ui-state-color-hover); } .jqx-toggle-box[active] .jqx-input { border-color: var(--jqx-ui-state-border-active); background-color: var(--jqx-ui-state-active); color: var(--jqx-ui-state-color-active); } .jqx-toggle-box[active]:focus .jqx-overlay, .jqx-toggle-box[active][focus] .jqx-overlay { opacity: 0.4; } .jqx-toggle-box[checked] .jqx-input { border-color: var(--jqx-ui-state-border-active); background-color: var(--jqx-ui-state-active); color: var(--jqx-ui-state-color-active); } .jqx-toggle-box[hover] .jqx-input { border-color: var(--jqx-ui-state-border-hover); background-color: var(--jqx-ui-state-hover); color: var(--jqx-ui-state-color-hover); } .jqx-toggle-box:focus .jqx-input, .jqx-toggle-box[focus] .jqx-input { outline: none; overflow: visible; border-color: var(--jqx-primary); background-color: var(--jqx-primary); color: var(--jqx-primary-color); } .jqx-toggle-box:focus .jqx-overlay, .jqx-toggle-box[focus] .jqx-overlay { opacity: 0.3; } .jqx-toggle-box[readonly] { cursor: initial; } .jqx-toggle-box[readonly] .jqx-input, .jqx-toggle-box[readonly] .jqx-label { cursor: initial; } .jqx-toggle-box[check-mode=input] { cursor: default; } .jqx-toggle-box[check-mode=input] .jqx-input { cursor: pointer; } .jqx-toggle-box[check-mode=label] .jqx-label { cursor: pointer; } /* jqx-check-box and jqx-radio-button*/ .jqx-toggle-box[right-to-left] .jqx-container, .jqx-toggle-box[right-to-left] .jqx-hidden-input { direction: rtl; } .jqx-toggle-box[right-to-left] .jqx-overlay { left: initial; right: 2px; } .jqx-toggle-box[right-to-left] .jqx-input { margin: 0 8px 0 0; } /* .jqx-tooltip */ jqx-tooltip { position: absolute; text-align: center; z-index: var(--jqx-editor-drop-down-z-index); font-family: var(--jqx-font-family); font-size: var(--jqx-font-size); visibility: hidden; pointer-events: none; } jqx-tooltip.jqx-element { background: transparent; overflow: visible; } jqx-tooltip .jqx-tooltip-content { overflow: hidden; text-overflow: ellipsis; padding: var(--jqx-tooltip-padding); background-color: var(--jqx-secondary); color: var(--jqx-secondary-color); border: var(--jqx-border-width) solid var(--jqx-secondary); width: 100%; height: 100%; opacity: 0.9; box-shadow: var(--jqx-elevation-6); font-family: var(--jqx-font-family); border-top-left-radius: var(--jqx-border-top-left-radius); border-bottom-left-radius: var(--jqx-border-bottom-left-radius); border-top-right-radius: var(--jqx-border-top-right-radius); border-bottom-right-radius: var(--jqx-border-bottom-right-radius); } jqx-tooltip.auto { height: auto; } jqx-tooltip.auto .jqx-container { height: auto; } jqx-tooltip.auto .jqx-tooltip-content { height: auto; } jqx-tooltip[visible] { visibility: visible; pointer-events: auto; } jqx-tooltip[arrow] { padding-bottom: var(--jqx-tooltip-arrow-width); } jqx-tooltip[arrow] .jqx-tooltip-content:after { content: ""; width: 0; height: 0; border-left: var(--jqx-tooltip-arrow-width) solid transparent; border-right: var(--jqx-tooltip-arrow-width) solid transparent; border-top: var(--jqx-tooltip-arrow-width) solid var(--jqx-tooltip-arrow-color); position: absolute; bottom: 0; left: calc(50% - var(--jqx-tooltip-arrow-width)); transform: translateX(var(--jqx-tooltip-arrow-translate)); } jqx-tooltip[arrow][arrow-direction=bottom] { padding-bottom: var(--jqx-tooltip-arrow-width); } jqx-tooltip[arrow][arrow-direction=bottom] .jqx-tooltip-content:after { content: ""; width: 0; height: 0; border-left: var(--jqx-tooltip-arrow-width) solid transparent; border-right: var(--jqx-tooltip-arrow-width) solid transparent; border-top: var(--jqx-tooltip-arrow-width) solid var(--jqx-tooltip-arrow-color); position: absolute; bottom: 0; left: calc(50% - var(--jqx-tooltip-arrow-width)); transform: translateX(var(--jqx-tooltip-arrow-translate)); } jqx-tooltip[arrow][arrow-direction=top] { padding-bottom: initial; padding-top: var(--jqx-tooltip-arrow-width); } jqx-tooltip[arrow][arrow-direction=top] .jqx-tooltip-content:after { border-left: var(--jqx-tooltip-arrow-width) solid transparent; border-right: var(--jqx-tooltip-arrow-width) solid transparent; border-bottom: var(--jqx-tooltip-arrow-width) solid var(--jqx-tooltip-arrow-color); border-top: initial; top: 0; bottom: calc(100% + var(--jqx-tooltip-arrow-width)); transform: translateX(var(--jqx-tooltip-arrow-translate)); } jqx-tooltip[arrow][arrow-direction=left] { padding-bottom: initial; padding-left: var(--jqx-tooltip-arrow-width); } jqx-tooltip[arrow][arrow-direction=left] .jqx-tooltip-content:after { border-bottom: var(--jqx-tooltip-arrow-width) solid transparent; border-top: var(--jqx-tooltip-arrow-width) solid transparent; border-right: var(--jqx-tooltip-arrow-width) solid var(--jqx-tooltip-arrow-color); border-left: initial; left: 0; top: calc(50% - var(--jqx-tooltip-arrow-width)); transform: translateY(var(--jqx-tooltip-arrow-translate)); } jqx-tooltip[arrow][arrow-direction=right] { padding-bottom: initial; padding-right: var(--jqx-tooltip-arrow-width); } jqx-tooltip[arrow][arrow-direction=right] .jqx-tooltip-content:after { border-bottom: var(--jqx-tooltip-arrow-width) solid transparent; border-top: var(--jqx-tooltip-arrow-width) solid transparent; border-left: var(--jqx-tooltip-arrow-width) solid var(--jqx-tooltip-arrow-color); border-right: initial; left: calc(100% - var(--jqx-tooltip-arrow-width)); top: calc(50% - var(--jqx-tooltip-arrow-width)); transform: translateY(var(--jqx-tooltip-arrow-translate)); } jqx-tooltip:not([animation=none]) { opacity: 0; transition: opacity 0.5s ease-in-out; } jqx-tooltip:not([animation=none])[visible] { opacity: 1; } /* .jqx-tooltip */ jqx-tooltip[right-to-left] .jqx-tooltip-content { direction: rtl; } /* jqx-tree */ jqx-tree { display: block; width: var(--jqx-tree-default-width); height: var(--jqx-tree-default-height); overflow: hidden; visibility: hidden; } .jqx-tree > .jqx-container, .jqx-tree.jqx-container { display: flex; flex-direction: column; position: relative; } .jqx-tree.jqx-element { visibility: inherit; } .jqx-tree jqx-scroll-bar { overflow: hidden; } .jqx-tree jqx-scroll-viewer { position: relative; border: none; width: 100%; height: 100%; padding: 0; } .jqx-tree jqx-scroll-viewer.jqx-scroll-viewer-element { border: none; } .jqx-tree jqx-scroll-viewer.scroll-buttons-shown { width: 100%; height: calc(100% - 2 * var(--jqx-tree-scroll-button-size)); } .jqx-tree jqx-scroll-viewer.scroll-buttons-shown.one-button-shown { width: 100%; height: calc(100% - var(--jqx-tree-scroll-button-size)); } .jqx-tree jqx-tree-item, .jqx-tree jqx-tree-items-group { position: relative; height: auto; display: flex; justify-content: space-between; align-items: center; white-space: nowrap; cursor: pointer; } .jqx-tree jqx-tree-item.jqx-element, .jqx-tree jqx-tree-items-group.jqx-element { border: none; } .jqx-tree jqx-tree-item[separator]:after, .jqx-tree jqx-tree-items-group[separator]:after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background-color: rgba(0, 0, 0, 0.1); pointer-events: none; } .jqx-tree jqx-tree-item { overflow: hidden; display: block; padding-left: 0px; } .jqx-tree jqx-tree-item[template-applied] { cursor: default; } .jqx-tree jqx-tree-item[disabled] { cursor: default; } .jqx-tree jqx-tree-item .jqx-tree-item-shortcut { opacity: 0.5; } .jqx-tree jqx-tree-items-group { display: flex; flex-direction: column; overflow: hidden; } .jqx-tree jqx-tree-items-group > .jqx-tree-item-label-container { justify-content: flex-start; overflow: hidden; } .jqx-tree jqx-tree-items-group > .jqx-tree-item-label-container > .jqx-tree-item-label-element { order: 1; } .jqx-tree jqx-tree-items-group[disabled] { cursor: default; } .jqx-tree jqx-tree-items-group .jqx-tree-items-group-arrow { order: 0; position: relative; display: flex; justify-content: center; width: var(--jqx-tree-indent); left: calc(1px - var(--jqx-tree-indent) / 2); height: 13px; font-family: var(--jqx-font-family-icon); transform: rotate(0deg); line-height: 1; } .jqx-tree jqx-tree-items-group .jqx-tree-items-group-arrow:after { position: relative; height: 100%; left: 0; top: 0; } .jqx-tree jqx-tree-items-group.filtered-child > .jqx-tree-item-label-container > .jqx-tree-item-label-element { font-weight: unset; } .jqx-tree .jqx-tree-main-container { position: relative; width: 100%; height: 100%; overflow: hidden; } .jqx-tree .jqx-tree-items-group-opened > .jqx-tree-item-label-container > .jqx-tree-items-group-arrow { transform: rotate(180deg); } .jqx-tree .jqx-tree-item-label-element { width: 100%; display: flex; align-items: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .jqx-tree .jqx-tree-item-label-element > span { position: relative; padding: var(--jqx-tree-item-padding); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .jqx-tree .jqx-tree-item-label-element > span > jqx-button button { padding: initial; } .jqx-tree .jqx-tree-item-label-element > span > i { vertical-align: middle; } .jqx-tree .jqx-tree-item-label-container { height: var(--jqx-tree-item-label-height); position: relative; width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: space-between; overflow: hidden; } .jqx-tree .jqx-tree-edit-input { position: absolute; outline: none; margin: 0 var(--jqx-tree-item-horizontal-offset); border: 1px solid var(--jqx-border); width: calc(100% - 2 * var(--jqx-tree-item-horizontal-offset)); font-family: var(--jqx-font-family); font-size: var(--jqx-font-size); z-index: 1; } .jqx-tree .jqx-tree-edit-input::selection { background-color: var(--jqx-ui-state-selected); color: var(--jqx-ui-state-color-selected); } .jqx-tree .jqx-tree-filter-input-container { display: none; position: relative; width: calc(100% - 2 * var(--jqx-tree-item-horizontal-offset)); height: calc(var(--jqx-text-box-default-height)); margin: var(--jqx-tree-item-vertical-offset) var(--jqx-tree-item-horizontal-offset); font-size: inherit; } .jqx-tree .jqx-tree-filter-input-container:after { content: var(--jqx-icon-filter); font-family: var(--jqx-font-family-icon); height: var(--jqx-text-box-default-height); position: absolute; top: 0; width: 25px; display: flex; align-items: center; justify-content: center; left: calc(100% - 25px); } .jqx-tree .jqx-filter-input { border: 1px solid var(--jqx-border); color: inherit; background: inherit; width: 100%; height: 100%; padding-left: var(--jqx-editor-label-padding); padding-right: calc(var(--jqx-editor-label-padding) + 25px); font-size: inherit; } .jqx-tree .jqx-filter-input:focus { outline: none; } .jqx-tree .jqx-filter-input::selection { background-color: var(--jqx-ui-state-selected); color: var(--jqx-ui-state-color-selected); } .jqx-tree .jqx-tree-scroll-button { width: 100%; height: var(--jqx-tree-scroll-button-size); background-color: var(--jqx-scroll-bar-button-background); --jqx-button-padding: 0; } .jqx-tree .jqx-tree-scroll-button > button { border: none; } .jqx-tree .jqx-scroll-viewer-container .jqx-tree-main-container { padding-left: var(--jqx-tree-item-horizontal-offset); padding-right: var(--jqx-tree-item-horizontal-offset); padding-top: var(--jqx-tree-item-vertical-offset); } .jqx-tree .jqx-scroll-viewer-container.vscroll .jqx-tree-main-container { padding-right: var(--jqx-tree-item-horizontal-offset); } .jqx-tree .jqx-scroll-viewer-content-container { display: block; padding: 0; } .jqx-tree .jqx-tree-drop-down { width: 100%; height: auto; transform: none; cursor: default; transform: scaleY(1); } .jqx-tree .jqx-tree-drop-down.jqx-visibility-hidden { margin-top: 0; height: 0; transform: scaleY(0); } .jqx-tree .drop-target:after { content: ""; position: absolute; box-sizing: border-box; border: 2px dashed var(--jqx-primary); width: 100%; height: 100%; left: 0; top: 0; pointer-events: none; opacity: 0.75; } .jqx-tree .drop-target.top:after { border: none; border-top: 2px dashed var(--jqx-primary); } .jqx-tree .drop-target.bottom:after { border: none; border-bottom: 2px dashed var(--jqx-primary); } .jqx-tree .jqx-ripple { background: var(--jqx-primary); } .jqx-tree .jqx-hidden { display: none !important; } .jqx-tree[overflow=hidden], .jqx-tree[scroll-mode=scrollButtons] { --jqx-scroll-bar-size: 0px; } .jqx-tree[selection-mode=radioButton] jqx-tree-item > .jqx-tree-item-label-container:before, .jqx-tree[selection-mode=radioButton] jqx-tree-items-group > .jqx-tree-item-label-container:before, .jqx-tree[selection-mode=checkBox] jqx-tree-item > .jqx-tree-item-label-container:before, .jqx-tree[selection-mode=checkBox] jqx-tree-items-group > .jqx-tree-item-label-container:before { content: ""; transform: scale(0); } .jqx-tree[selection-mode=radioButton] jqx-tree-item > .jqx-tree-item-label-container:after, .jqx-tree[selection-mode=radioButton] jqx-tree-items-group > .jqx-tree-item-label-container:after, .jqx-tree[selection-mode=checkBox] jqx-tree-item > .jqx-tree-item-label-container:after, .jqx-tree[selection-mode=checkBox] jqx-tree-items-group > .jqx-tree-item-label-container:after { content: ""; position: absolute; border: var(--jqx-border-width) solid var(--jqx-border); border-top-left-radius: var(--jqx-border-top-left-radius); border-top-right-radius: var(--jqx-border-top-right-radius); border-bottom-left-radius: var(--jqx-border-bottom-left-radius); border-bottom-right-radius: var(--jqx-border-bottom-right-radius); width: var(--jqx-check-box-default-size); height: var(--jqx-check-box-default-size); padding: 1px; margin-left: 5px; font-family: var(--jqx-font-family-icon); justify-content: center; align-items: center; display: flex; } .jqx-tree[selection-mode=radioButton] jqx-tree-item[selected][focus] > .jqx-tree-item-label-container:before, .jqx-tree[selection-mode=radioButton] jqx-tree-items-group[selected][focus] > .jqx-tree-item-label-container:before, .jqx-tree[selection-mode=checkBox] jqx-tree-item[selected][focus] > .jqx-tree-item-label-container:before, .jqx-tree[selection-mode=checkBox] jqx-tree-items-group[selected][focus] > .jqx-tree-item-label-container:before { position: absolute; content: ""; margin-left: 5px; border-radius: 50%; width: calc(var(--jqx-check-box-default-size) + 16px); height: calc(var(--jqx-check-box-default-size) + 16px); background: var(--jqx-primary); opacity: 0.3; z-index: 1; transform: scale(1); } .jqx-tree[selection-mode=radioButton][show-lines] jqx-tree-items-group > .jqx-tree-item-label-container:after, .jqx-tree[selection-mode=checkBox][show-lines] jqx-tree-items-group > .jqx-tree-item-label-container:after { margin-left: calc(var(--jqx-tree-indent) + 5px); } .jqx-tree[selection-mode=radioButton][show-lines] jqx-tree-items-group[selected][focus] > .jqx-tree-item-label-container:before, .jqx-tree[selection-mode=checkBox][show-lines] jqx-tree-items-group[selected][focus] > .jqx-tree-item-label-container:before { margin-left: calc(var(--jqx-tree-indent)); } .jqx-tree[selection-mode=radioButton][show-lines] jqx-tree-item[selected][focus] > .jqx-tree-item-label-container:before, .jqx-tree[selection-mode=checkBox][show-lines] jqx-tree-item[selected][focus] > .jqx-tree-item-label-container:before { margin-left: 0px; } .jqx-tree[selection-mode=radioButton] jqx-tree-item .jqx-tree-item-label-element, .jqx-tree[selection-mode=checkBox] jqx-tree-item .jqx-tree-item-label-element { padding-left: calc(var(--jqx-tree-indent) + 10px); } .jqx-tree[selection-mode=radioButton] jqx-tree-items-group > .jqx-tree-item-label-container > .jqx-tree-item-label-element, .jqx-tree[selection-mode=checkBox] jqx-tree-items-group > .jqx-tree-item-label-container > .jqx-tree-item-label-element { padding-left: calc(var(--jqx-tree-indent) + 10px); } .jqx-tree[selection-mode=radioButton] .jqx-tree-item-label-element > span, .jqx-tree[selection-mode=checkBox] .jqx-tree-item-label-element > span { padding-left: 5px; } .jqx-tree[selection-mode=radioButton]:not([animation=none]) jqx-tree-item > .jqx-tree-item-label-container:before, .jqx-tree[selection-mode=radioButton]:not([animation=none]) jqx-tree-items-group > .jqx-tree-item-label-container:before, .jqx-tree[selection-mode=checkBox]:not([animation=none]) jqx-tree-item > .jqx-tree-item-label-container:before, .jqx-tree[selection-mode=checkBox]:not([animation=none]) jqx-tree-items-group > .jqx-tree-item-label-container:before { transition: transform 0.25s ease-in-out; } .jqx-tree[selection-mode=radioButton][toggle-element-position=far] jqx-tree-item[focus] > .jqx-tree-item-label-container:before, .jqx-tree[selection-mode=radioButton][toggle-element-position=far] jqx-tree-items-group[focus] > .jqx-tree-item-label-container:before, .jqx-tree[selection-mode=checkBox][toggle-element-position=far] jqx-tree-item[focus] > .jqx-tree-item-label-container:before, .jqx-tree[selection-mode=checkBox][toggle-element-position=far] jqx-tree-items-group[focus] > .jqx-tree-item-label-container:before { margin-left: -1px; } .jqx-tree[selection-mode=radioButton]:not([show-lines]) jqx-tree-items-group > .jqx-tree-item-label-container:after, .jqx-tree[selection-mode=checkBox]:not([show-lines]) jqx-tree-items-group > .jqx-tree-item-label-container:after { margin-left: calc(var(--jqx-check-box-default-size) + 5px); } .jqx-tree[selection-mode=radioButton]:not([show-lines]):not([toggle-element-position=far]) jqx-tree-items-group > .jqx-tree-item-label-container:after, .jqx-tree[selection-mode=radioButton]:not([show-lines]):not([toggle-element-position=far]) jqx-tree-item > .jqx-tree-item-label-container:after, .jqx-tree[selection-mode=checkBox]:not([show-lines]):not([toggle-element-position=far]) jqx-tree-items-group > .jqx-tree-item-label-container:after, .jqx-tree[selection-mode=checkBox]:not([show-lines]):not([toggle-element-position=far]) jqx-tree-item > .jqx-tree-item-label-container:after { margin-left: calc(var(--jqx-check-box-default-size) - 5px); } .jqx-tree[selection-mode=radioButton]:not([show-lines]):not([toggle-element-position=far]):not([right-to-left]) jqx-tree-item .jqx-tree-item-label-element > span, .jqx-tree[selection-mode=checkBox]:not([show-lines]):not([toggle-element-position=far]):not([right-to-left]) jqx-tree-item .jqx-tree-item-label-element > span { padding: var(--jqx-tree-item-padding); } .jqx-tree[selection-mode=radioButton] jqx-tree-item > .jqx-tree-item-label-container:after, .jqx-tree[selection-mode=radioButton] jqx-tree-items-group > .jqx-tree-item-label-container:after { border-radius: 100%; } .jqx-tree[selection-mode=radioButton] jqx-tree-item[selected] > .jqx-tree-item-label-container:after, .jqx-tree[selection-mode=radioButton] jqx-tree-items-group[selected] > .jqx-tree-item-label-container:after { content: var(--jqx-icon-radio); background: var(--jqx-primary); border-color: var(--jqx-primary); color: var(--jqx-primary-color); } .jqx-tree[selection-mode=checkBox] jqx-tree-item[selected] > .jqx-tree-item-label-container:after, .jqx-tree[selection-mode=checkBox] jqx-tree-items-group[selected] > .jqx-tree-item-label-container:after { background: var(--jqx-primary); border-color: var(--jqx-primary); color: var(--jqx-primary-color); content: var(--jqx-icon-check); } .jqx-tree[selection-mode=checkBox] jqx-tree-item[indeterminate] > .jqx-tree-item-label-container:after, .jqx-tree[selection-mode=checkBox] jqx-tree-items-group[indeterminate] > .jqx-tree-item-label-container:after { padding: 2px; background-clip: content-box; width: calc(var(--jqx-check-box-default-size) - 1px); height: calc(var(--jqx-check-box-default-size) - 1px); } .jqx-tree[disabled] jqx-tree-item, .jqx-tree[disabled] jqx-tree-items-group, .jqx-tree[display-loading-indicator] jqx-tree-item, .jqx-tree[display-loading-indicator] jqx-tree-items-group { cursor: default; } .jqx-tree[filterable] jqx-scroll-viewer { height: calc(100% - var(--jqx-text-box-default-height) - 2 * var(--jqx-tree-item-vertical-offset)); } .jqx-tree[filterable] jqx-scroll-viewer.scroll-buttons-shown { height: calc(100% - 2 * var(--jqx-tree-scroll-button-size) - var(--jqx-text-box-default-height) - 2 * var(--jqx-tree-item-vertical-offset)); } .jqx-tree[filterable] jqx-scroll-viewer.scroll-buttons-shown.one-button-shown { height: calc(100% - var(--jqx-tree-scroll-button-size) - var(--jqx-text-box-default-height) - 2 * var(--jqx-tree-item-vertical-offset)); } .jqx-tree[filterable] .jqx-tree-filter-input-container { display: block; } .jqx-tree[filter-applied] .jqx-tree-item-label-element { font-weight: bolder; } .jqx-tree[filter-applied] jqx-tree-items-group.hidden-children { cursor: not-allowed; } .jqx-tree[scroll-mode=scrollButtons] .jqx-tree-scroll-button { display: block; } .jqx-tree:not([toggle-element-position=far]) jqx-tree-items-group .jqx-tree-items-group-arrow { opacity: 1; z-index: 1; } .jqx-tree[toggle-element-position=far] jqx-tree-items-group > .jqx-tree-item-label-container { justify-content: space-between; } .jqx-tree[toggle-element-position=far] jqx-tree-items-group > .jqx-tree-item-label-container > .jqx-tree-item-label-element { order: 0; margin-left: var(--jqx-tree-indent); } .jqx-tree[toggle-element-position=far] jqx-tree-items-group > .jqx-tree-item-label-container > .jqx-tree-items-group-arrow { order: 1; } .jqx-tree:not([show-lines])[selection-mode=checkBox][toggle-element-position=far]:not([right-to-left]) jqx-tree-items-group > .jqx-tree-item-label-container > .jqx-tree-item-label-element, .jqx-tree:not([show-lines])[selection-mode=radioButton][toggle-element-position=far]:not([right-to-left]) jqx-tree-items-group > .jqx-tree-item-label-container > .jqx-tree-item-label-element { margin-left: calc(var(--jqx-tree-indent) - 11px); } .jqx-tree:not([show-lines]):not([toggle-element-position=far]):not([right-to-left]) jqx-tree-items-group > .jqx-tree-item-label-container > .jqx-tree-item-label-element { margin-left: -4px; } .jqx-tree:not([show-lines])[toggle-element-position=far]:not([right-to-left]) jqx-tree-items-group > .jqx-tree-item-label-container > .jqx-tree-item-label-element { margin-left: calc(var(--jqx-tree-indent) - 4px); } .jqx-tree:not([show-lines]):not([selection-display-mode=label]):not([right-to-left]) jqx-tree-items-group > .jqx-tree-item-label-container > .jqx-tree-item-label-element > span { padding-left: 0; } .jqx-tree[show-lines] jqx-tree-item > .jqx-tree-item-label-container, .jqx-tree[show-lines] jqx-tree-items-group > .jqx-tree-item-label-container { position: relative; overflow: visible; } .jqx-tree[show-lines] jqx-tree-item > .jqx-tree-item-label-container > .jqx-tree-item-label-element, .jqx-tree[show-lines] jqx-tree-items-group > .jqx-tree-item-label-container > .jqx-tree-item-label-element { position: relative; overflow: visible; } .jqx-tree[show-lines] jqx-tree-item > .jqx-tree-item-label-container > .jqx-tree-item-label-element:before, .jqx-tree[show-lines] jqx-tree-items-group > .jqx-tree-item-label-container > .jqx-tree-item-label-element:before { content: ""; position: absolute; border-left: var(--jqx-tree-lines-width) var(--jqx-tree-lines-style) var(--jqx-tree-lines-color); height: 300%; left: calc(0px - var(--jqx-tree-indent)); pointer-events: none; } .jqx-tree[show-lines] jqx-tree-item > .jqx-tree-item-label-container > .jqx-tree-item-label-element:after, .jqx-tree[show-lines] jqx-tree-items-group > .jqx-tree-item-label-container > .jqx-tree-item-label-element:after { content: ""; position: absolute; border-top: var(--jqx-tree-lines-width) var(--jqx-tree-lines-style) var(--jqx-tree-lines-color); pointer-events: none; width: var(--jqx-tree-indent); left: calc(0px - var(--jqx-tree-indent)); } .jqx-tree[show-lines] jqx-tree-item:last-child > .jqx-tree-item-label-container > .jqx-tree-item-label-element:before, .jqx-tree[show-lines] jqx-tree-item.last-filtered-child > .jqx-tree-item-label-container > .jqx-tree-item-label-element:before, .jqx-tree[show-lines] jqx-tree-items-group:last-child > .jqx-tree-item-label-container > .jqx-tree-item-label-element:before, .jqx-tree[show-lines] jqx-tree-items-group.last-filtered-child > .jqx-tree-item-label-container > .jqx-tree-item-label-element:before { height: 150%; top: -100%; } .jqx-tree[show-lines] jqx-tree-item { padding-left: var(--jqx-tree-indent); } .jqx-tree[show-lines] jqx-tree-items-group > .jqx-tree-item-label-container > .jqx-tree-item-label-element { width: calc(100% - var(--jqx-tree-indent)); } .jqx-tree[show-lines]:not([show-root-lines]) jqx-tree-item[level="1"] .jqx-tree-item-label-element:before, .jqx-tree[show-lines]:not([show-root-lines]) jqx-tree-item[level="1"] .jqx-tree-item-label-element:after { content: none; } .jqx-tree[show-lines]:not([show-root-lines]) jqx-tree-items-group[level="1"] > .jqx-tree-item-label-container > .jqx-tree-item-label-element:before, .jqx-tree[show-lines]:not([show-root-lines]) jqx-tree-items-group[level="1"] > .jqx-tree-item-label-container > .jqx-tree-item-label-element:after { content: none; } .jqx-tree[show-lines][show-root-lines] jqx-tree-item[level="1"] .jqx-tree-item-label-element:before, .jqx-tree[show-lines][show-root-lines] jqx-tree-item[level="1"] .jqx-tree-item-label-element:after { pointer-events: none; } .jqx-tree[show-lines][show-root-lines] jqx-tree-items-group[level="1"] > .jqx-tree-item-label-container > .jqx-tree-item-label-element:before, .jqx-tree[show-lines][show-root-lines] jqx-tree-items-group[level="1"] > .jqx-tree-item-label-container > .jqx-tree-item-label-element:after { pointer-events: none; } .jqx-tree[show-lines] .jqx-tree-items-group-expanded:not(:last-child):not(.last-filtered-child) > .jqx-tree-item-label-container > .jqx-tree-item-label-element:before { height: 3000px; z-index: 1; } .jqx-tree:not([selection-display-mode=label]) jqx-tree-item { border-top-left-radius: var(--jqx-item-border-top-left-radius); border-top-right-radius: var(--jqx-item-border-top-right-radius); border-bottom-left-radius: var(--jqx-item-border-bottom-left-radius); border-bottom-right-radius: var(--jqx-item-border-bottom-right-radius); border-width: var(--jqx-item-border-width); border-style: solid; border-color: transparent; margin-bottom: var(--jqx-tree-item-vertical-offset); } .jqx-tree:not([selection-display-mode=label]) jqx-tree-item[focus] { color: var(--jqx-ui-state-color-focus); background-color: var(--jqx-ui-state-focus); border-color: var(--jqx-ui-state-border-focus); } .jqx-tree:not([selection-display-mode=label]) jqx-tree-item[selected] { border-color: var(--jqx-ui-state-border-selected); background-color: var(--jqx-ui-state-selected); color: var(--jqx-ui-state-color-selected); } .jqx-tree:not([selection-display-mode=label]) jqx-tree-items-group > .jqx-tree-item-label-container { border-top-left-radius: var(--jqx-item-border-top-left-radius); border-top-right-radius: var(--jqx-item-border-top-right-radius); border-bottom-left-radius: var(--jqx-item-border-bottom-left-radius); border-bottom-right-radius: var(--jqx-item-border-bottom-right-radius); border-width: var(--jqx-item-border-width); border-style: solid; border-color: transparent; margin-bottom: var(--jqx-tree-item-vertical-offset); } .jqx-tree:not([selection-display-mode=label]) jqx-tree-items-group[focus] > .jqx-tree-item-label-container { color: var(--jqx-ui-state-color-focus); background-color: var(--jqx-ui-state-focus); border-color: var(--jqx-ui-state-border-focus); } .jqx-tree:not([selection-display-mode=label]) jqx-tree-items-group[selected] > .jqx-tree-item-label-container { border-color: var(--jqx-ui-state-border-selected); background-color: var(--jqx-ui-state-selected); color: var(--jqx-ui-state-color-selected); } .jqx-tree:not([selection-display-mode=label]):not([animation=none]) jqx-tree-item { transition: color ease-in-out 0.28s, border-color ease-in-out 0.28s, background ease-in-out 0.28s; } .jqx-tree:not([selection-display-mode=label]):not([animation=none]) jqx-tree-items-group > .jqx-tree-item-label-container { transition: color ease-in-out 0.28s, border-color ease-in-out 0.28s, background ease-in-out 0.28s; } .jqx-tree[selection-display-mode=label] jqx-tree-item > .jqx-tree-item-label-container > .jqx-tree-item-label-element > span, .jqx-tree[selection-display-mode=label] jqx-tree-items-group > .jqx-tree-item-label-container > .jqx-tree-item-label-element > span { border-top-left-radius: var(--jqx-item-border-top-left-radius); border-top-right-radius: var(--jqx-item-border-top-right-radius); border-bottom-left-radius: var(--jqx-item-border-bottom-left-radius); border-bottom-right-radius: var(--jqx-item-border-bottom-right-radius); border-width: var(--jqx-item-border-width); border-style: solid; border-color: transparent; margin-top: var(--jqx-tree-item-vertical-offset); margin-bottom: var(--jqx-tree-item-vertical-offset); } .jqx-tree[selection-display-mode=label] jqx-tree-item[focus] > .jqx-tree-item-label-container > .jqx-tree-item-label-element > span:not(.jqx-ripple), .jqx-tree[selection-display-mode=label] jqx-tree-items-group[focus] > .jqx-tree-item-label-container > .jqx-tree-item-label-element > span:not(.jqx-ripple) { color: var(--jqx-ui-state-color-focus); background-color: var(--jqx-ui-state-focus); border-color: var(--jqx-ui-state-border-focus); } .jqx-tree[selection-display-mode=label] jqx-tree-items-group .jqx-tree-items-group-arrow { top: calc(-0.5px - var(--jqx-tree-item-border-width) / 2); } .jqx-tree[selection-display-mode=label][selection-mode=checkBox]:not([right-to-left]) jqx-tree-item > .jqx-tree-item-label-container > .jqx-tree-item-label-element > span, .jqx-tree[selection-display-mode=label][selection-mode=checkBox]:not([right-to-left]) jqx-tree-items-group > .jqx-tree-item-label-container > .jqx-tree-item-label-element > span, .jqx-tree[selection-display-mode=label][selection-mode=radioButton]:not([right-to-left]) jqx-tree-item > .jqx-tree-item-label-container > .jqx-tree-item-label-element > span, .jqx-tree[selection-display-mode=label][selection-mode=radioButton]:not([right-to-left]) jqx-tree-items-group > .jqx-tree-item-label-container > .jqx-tree-item-label-element > span { margin-left: 5px; padding: var(--jqx-tree-item-padding); } .jqx-tree[selection-display-mode=label][selection-mode=checkBox]:not([show-lines]):not([right-to-left]):not([toggle-element-position=far]) jqx-tree-item > .jqx-tree-item-label-container > .jqx-tree-item-label-element, .jqx-tree[selection-display-mode=label][selection-mode=radioButton]:not([show-lines]):not([right-to-left]):not([toggle-element-position=far]) jqx-tree-item > .jqx-tree-item-label-container > .jqx-tree-item-label-element { padding-left: calc(var(--jqx-tree-indent) + 15px); } .jqx-tree[selection-display-mode=label][selection-mode=checkBox]:not([show-lines]):not([right-to-left]):not([toggle-element-position=far]) jqx-tree-items-group > .jqx-tree-item-label-container > .jqx-tree-item-label-element, .jqx-tree[selection-display-mode=label][selection-mode=radioButton]:not([show-lines]):not([right-to-left]):not([toggle-element-position=far]) jqx-tree-items-group > .jqx-tree-item-label-container > .jqx-tree-item-label-element { padding-left: calc(var(--jqx-tree-indent) + 3px); } .jqx-tree[selection-display-mode=label][selection-mode=checkBox]:not([show-lines]):not([right-to-left])[toggle-element-position=far] jqx-tree-items-group > .jqx-tree-item-label-container > .jqx-tree-item-label-element, .jqx-tree[selection-display-mode=label][selection-mode=radioButton]:not([show-lines]):not([right-to-left])[toggle-element-position=far] jqx-tree-items-group > .jqx-tree-item-label-container > .jqx-tree-item-label-element { margin-left: 0; } .jqx-tree[selection-display-mode=label]:not([selection-mode=checkBox]):not([selection-mode=radioButton]) jqx-tree-item[selected] > .jqx-tree-item-label-container > .jqx-tree-item-label-element > span:not(.jqx-ripple), .jqx-tree[selection-display-mode=label]:not([selection-mode=checkBox]):not([selection-mode=radioButton]) jqx-tree-items-group[selected] > .jqx-tree-item-label-container > .jqx-tree-item-label-element > span:not(.jqx-ripple) { background-color: var(--jqx-ui-state-selected); color: var(--jqx-ui-state-color-selected); border-color: var(--jqx-ui-state-border-selected); } .jqx-tree[selection-display-mode=label]:not([show-lines]):not([right-to-left]) jqx-tree-item > .jqx-tree-item-label-container > .jqx-tree-item-label-element > span { margin: var(--jqx-tree-item-padding); margin-right: 0; margin-top: 0; margin-top: var(--jqx-tree-item-vertical-offset); margin-bottom: var(--jqx-tree-item-vertical-offset); } .jqx-tree[selection-display-mode=label]:not([animation=none]) jqx-tree-item > .jqx-tree-item-label-container > .jqx-tree-item-label-element > span, .jqx-tree[selection-display-mode=label]:not([animation=none]) jqx-tree-items-group > .jqx-tree-item-label-container > .jqx-tree-item-label-element > span { transition: color ease-in-out 0.28s, background ease-in-out 0.28s, border-color ease-in-out 0.28s; } .jqx-tree[selection-display-mode=label]:not([animation=none]) jqx-tree-item[focus]:not([selected]) > .jqx-tree-item-label-container > .jqx-tree-item-label-element > span:not(.jqx-ripple), .jqx-tree[selection-display-mode=label]:not([animation=none]) jqx-tree-items-group[focus]:not([selected]) > .jqx-tree-item-label-container > .jqx-tree-item-label-element > span:not(.jqx-ripple) { transition: color ease-in-out 0.28s, border-color ease-in-out 0.28s, background ease-in-out 0.28s; } .jqx-tree[auto-hide-toggle-element] .hidden-arrows jqx-tree-items-group .jqx-tree-items-group-arrow { opacity: 0; } .jqx-tree:not([animation=none]) .jqx-tree-drop-down { -webkit-transform-origin: top; transform-origin: top; transition: height 0.2s ease-in, transform 0.2s ease-in, visibility 0.2s ease-in; } .jqx-tree:not([animation=none]) .jqx-tree-item-label-container > .jqx-tree-items-group-arrow { transition: transform 0.2s ease-in; } .jqx-tree:not([animation=none])[auto-hide-toggle-element] .jqx-tree-item-label-container > .jqx-tree-items-group-arrow { transition: transform 0.2s ease-in, opacity 0.2s ease-in; } @media (hover: hover) { .jqx-tree[selection-mode=checkBox] jqx-tree-item:hover > .jqx-tree-item-label-container > .jqx-tree-item-label-element span.jqx-ripple, .jqx-tree[selection-mode=radioButton] jqx-tree-item:hover > .jqx-tree-item-label-container > .jqx-tree-item-label-element span.jqx-ripple { background-color: var(--jqx-ui-state-selected); } .jqx-tree[selection-mode=checkBox] jqx-tree-items-group > .jqx-tree-item-label-container:hover > .jqx-tree-item-label-element span.jqx-ripple, .jqx-tree[selection-mode=radioButton] jqx-tree-items-group > .jqx-tree-item-label-container:hover > .jqx-tree-item-label-element span.jqx-ripple { background-color: var(--jqx-ui-state-selected); } .jqx-tree[selection-mode=checkBox] jqx-tree-item:hover > .jqx-tree-item-label-container:after, .jqx-tree[selection-mode=checkBox] jqx-tree-items-group > .jqx-tree-item-label-container:hover:after { color: var(--jqx-background-color); background-color: var(--jqx-background); border-color: var(--jqx-border); } .jqx-tree[selection-mode=checkBox] jqx-tree-item[indeterminate]:not(:hover) > .jqx-tree-item-label-container:after, .jqx-tree[selection-mode=checkBox] jqx-tree-items-group[indeterminate] > .jqx-tree-item-label-container:not(:hover):after { background-color: var(--jqx-ui-state-selected); } .jqx-tree[selection-mode=radioButton] jqx-tree-item:not([selected]):hover > .jqx-tree-item-label-container:after, .jqx-tree[selection-mode=radioButton] jqx-tree-items-group:not([selected]) > .jqx-tree-item-label-container:hover:after { color: var(--jqx-background-color); background-color: var(--jqx-background); border-color: var(--jqx-border); } .jqx-tree:not([selection-display-mode=label]):not([disable-hover]) jqx-tree-item:not([selected]):hover { color: var(--jqx-ui-state-color-hover); background-color: var(--jqx-ui-state-hover); border-color: var(--jqx-ui-state-border-hover); } .jqx-tree:not([selection-display-mode=label]):not([disable-hover]) jqx-tree-items-group:not([selected]) > .jqx-tree-item-label-container:hover { color: var(--jqx-ui-state-color-hover); background-color: var(--jqx-ui-state-hover); border-color: var(--jqx-ui-state-border-hover); } .jqx-tree:not([selection-display-mode=label]) jqx-tree-item:not([selected])[hover] { color: var(--jqx-ui-state-color-hover); background-color: var(--jqx-ui-state-hover); border-color: var(--jqx-ui-state-border-hover); } .jqx-tree:not([selection-display-mode=label]) jqx-tree-items-group:not([selected])[hover] > .jqx-tree-item-label-container { color: var(--jqx-ui-state-color-hover); background-color: var(--jqx-ui-state-hover); border-color: var(--jqx-ui-state-border-hover); } .jqx-tree[selection-display-mode=label]:not([disable-hover]) jqx-tree-item:not([selected]):hover > .jqx-tree-item-label-container > .jqx-tree-item-label-element > span { color: var(--jqx-ui-state-color-hover); background-color: var(--jqx-ui-state-hover); border-color: var(--jqx-ui-state-border-hover); } .jqx-tree[selection-display-mode=label] jqx-tree-item:not([selected])[hover] > .jqx-tree-item-label-container > .jqx-tree-item-label-element > span { color: var(--jqx-ui-state-color-hover); background-color: var(--jqx-ui-state-hover); border-color: var(--jqx-ui-state-border-hover); } .jqx-tree[selection-display-mode=label] jqx-tree-items-group:not([selected]) > .jqx-tree-item-label-container:hover span { color: var(--jqx-ui-state-color-hover); background-color: var(--jqx-ui-state-hover); border-color: var(--jqx-ui-state-border-hover); } } .jqx-tree-item-feedback { position: absolute; display: flex; align-items: center; box-shadow: var(--jqx-elevation-8); border: 1px solid var(--jqx-border); padding: 5px; color: var(--jqx-background-color); background-color: var(--jqx-background); font-family: var(--jqx-font-family); font-size: var(--jqx-font-size); white-space: nowrap; cursor: move; z-index: 10000; } .jqx-tree-item-feedback.multiple { font-family: var(--jqx-font-family-icon); font-size: 26px; } .jqx-hidden { display: none !important; } .jqx-tree-drop-down-button { display: inline-block; cursor: pointer; } .jqx-window.jqx-tree-popup { transition: opacity 0.2s, transform 0.2s ease-out; opacity: 0; font-family: var(--jqx-font-family); font-size: var(--jqx-font-size); transform: scaleY(0) !important; transform-origin: top !important; --jqx-window-content-padding: 0px; --jqx-window-header-height: 0px; box-shadow: none; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-right-radius: 0px; border-top-left-radius: 0px; position: absolute; border: none; } .jqx-window.jqx-tree-popup.open { transform: scale(1) !important; opacity: 1; } /* jqx-tree */ .jqx-tree jqx-tree-items-group[right-to-left] jqx-tree-item .jqx-tree-item-label-element, .jqx-tree jqx-tree-items-group[right-to-left] jqx-tree-items-group > .jqx-tree-item-label-container > .jqx-tree-item-label-element { padding-left: initial; padding-right: calc(var(--jqx-tree-indent) + 10px); } .jqx-tree jqx-tree-items-group[right-to-left] jqx-tree-item > .jqx-tree-item-label-container:after { margin-left: -5px; } .jqx-tree jqx-tree-items-group[right-to-left] jqx-tree-items-group > .jqx-tree-item-label-container:after { margin-left: calc(0px - var(--jqx-check-box-default-size) - 5px); } .jqx-tree jqx-tree-items-group[right-to-left] jqx-tree-item[focus] > .jqx-tree-item-label-container:before, .jqx-tree jqx-tree-items-group[right-to-left] jqx-tree-items-group[focus] > .jqx-tree-item-label-container:before { margin-left: -3px; } .jqx-tree jqx-tree-items-group[right-to-left][toggle-element-position=far] jqx-tree-item[focus] > .jqx-tree-item-label-container:before, .jqx-tree jqx-tree-items-group[right-to-left][toggle-element-position=far] jqx-tree-items-group[focus] > .jqx-tree-item-label-container:before { margin-left: 1px; } .jqx-tree jqx-tree-items-group[right-to-left][show-lines] jqx-tree-item[focus] > .jqx-tree-item-label-container:before { margin-left: 1px; } .jqx-tree jqx-tree-items-group[right-to-left][show-lines] jqx-tree-items-group[focus] > .jqx-tree-item-label-container:before { margin-left: calc(1px - var(--jqx-check-box-default-size)); } .jqx-tree[toggle-element-position=far][right-to-left] jqx-tree-items-group > .jqx-tree-item-label-container > .jqx-tree-item-label-element { margin-left: initial; margin-right: var(--jqx-tree-indent); } .jqx-tree:not([show-lines])[selection-mode=checkBox][toggle-element-position=far][right-to-left] jqx-tree-item .jqx-tree-item-label-element, .jqx-tree:not([show-lines])[selection-mode=checkBox][toggle-element-position=far][right-to-left] jqx-tree-items-group > .jqx-tree-item-label-container > .jqx-tree-item-label-element, .jqx-tree:not([show-lines])[selection-mode=radioButton][toggle-element-position=far][right-to-left] jqx-tree-item .jqx-tree-item-label-element, .jqx-tree:not([show-lines])[selection-mode=radioButton][toggle-element-position=far][right-to-left] jqx-tree-items-group > .jqx-tree-item-label-container > .jqx-tree-item-label-element { padding-right: calc(var(--jqx-tree-indent) + 4px); } .jqx-tree:not([show-lines]):not([toggle-element-position=far])[right-to-left] jqx-tree-items-group > .jqx-tree-item-label-container > .jqx-tree-item-label-element { margin-right: -4px; } .jqx-tree:not([show-lines])[toggle-element-position=far][right-to-left] jqx-tree-items-group > .jqx-tree-item-label-container > .jqx-tree-item-label-element { margin-right: calc(var(--jqx-tree-indent) - 4px); } .jqx-tree:not([show-lines]):not([selection-display-mode=label])[right-to-left] jqx-tree-items-group > .jqx-tree-item-label-container > .jqx-tree-item-label-element > span { padding-right: 0; } .jqx-tree[show-lines][right-to-left] jqx-tree-item { padding-left: 0px; padding-right: var(--jqx-tree-indent); } .jqx-tree[show-lines][right-to-left] jqx-tree-item .jqx-tree-item-label-element:before { right: calc(0px - var(--jqx-tree-indent)); left: initial; } .jqx-tree[show-lines][right-to-left] jqx-tree-item .jqx-tree-item-label-element:after { right: calc(0px - var(--jqx-tree-indent)); left: initial; } .jqx-tree[show-lines][right-to-left] jqx-tree-items-group > .jqx-tree-item-label-container > .jqx-tree-item-label-element:before { right: calc(0px - var(--jqx-tree-indent)); left: initial; } .jqx-tree[show-lines][right-to-left] jqx-tree-items-group > .jqx-tree-item-label-container > .jqx-tree-item-label-element:after { right: calc(0px - var(--jqx-tree-indent)); left: initial; } .jqx-tree[selection-display-mode=label][selection-mode=checkBox]:not([show-lines])[right-to-left]:not([toggle-element-position=far]) jqx-tree-item > .jqx-tree-item-label-container > .jqx-tree-item-label-element, .jqx-tree[selection-display-mode=label][selection-mode=radioButton]:not([show-lines])[right-to-left]:not([toggle-element-position=far]) jqx-tree-item > .jqx-tree-item-label-container > .jqx-tree-item-label-element { padding-right: calc(var(--jqx-tree-indent) + 15px); } .jqx-tree[selection-display-mode=label][selection-mode=checkBox]:not([show-lines])[right-to-left]:not([toggle-element-position=far]) jqx-tree-items-group > .jqx-tree-item-label-container > .jqx-tree-item-label-element, .jqx-tree[selection-display-mode=label][selection-mode=radioButton]:not([show-lines])[right-to-left]:not([toggle-element-position=far]) jqx-tree-items-group > .jqx-tree-item-label-container > .jqx-tree-item-label-element { padding-right: calc(var(--jqx-tree-indent) + 3px); } .jqx-tree[selection-display-mode=label][selection-mode=checkBox]:not([show-lines])[right-to-left][toggle-element-position=far] jqx-tree-item > .jqx-tree-item-label-container > .jqx-tree-item-label-element, .jqx-tree[selection-display-mode=label][selection-mode=checkBox]:not([show-lines])[right-to-left][toggle-element-position=far] jqx-tree-items-group > .jqx-tree-item-label-container > .jqx-tree-item-label-element, .jqx-tree[selection-display-mode=label][selection-mode=radioButton]:not([show-lines])[right-to-left][toggle-element-position=far] jqx-tree-item > .jqx-tree-item-label-container > .jqx-tree-item-label-element, .jqx-tree[selection-display-mode=label][selection-mode=radioButton]:not([show-lines])[right-to-left][toggle-element-position=far] jqx-tree-items-group > .jqx-tree-item-label-container > .jqx-tree-item-label-element { margin-right: 5px; } .jqx-tree[selection-display-mode=label]:not([show-lines])[right-to-left] jqx-tree-item > .jqx-tree-item-label-container > .jqx-tree-item-label-element > span { margin: var(--jqx-tree-item-padding); margin-left: 0; margin-top: var(--jqx-tree-item-vertical-offset); margin-bottom: var(--jqx-tree-item-vertical-offset); } .jqx-tree[right-to-left] jqx-tree-items-group .jqx-tree-items-group-arrow { right: calc(1px - var(--jqx-tree-indent) / 2); left: initial; } .jqx-tree[right-to-left] .jqx-tree-filter-input-container:after { left: 0; } .jqx-tree[right-to-left] .jqx-tree-item-label-container { flex-direction: row-reverse; position: relative; overflow: visible; } .jqx-tree[right-to-left] .jqx-filter-input { direction: rtl; padding-right: 1px; padding-left: 25px; } .jqx-tree[right-to-left] .jqx-tree-edit-input { direction: rtl; } .jqx-tree[right-to-left] .jqx-tree-item-label-element { direction: rtl; position: relative; overflow: visible; } jqx-ribbon .jqx-ribbon-header { display: flex; border: var(--jqx-border-width) solid var(--jqx-surface); background: var(--jqx-surface); color: var(--jqx-surface-color); padding: var(--jqx-ribbon-header-padding); height: var(--jqx-ribbon-tab-header-height); } jqx-ribbon { display: block; } jqx-ribbon:focus > div.jqx-ribbon{ outline: 1px solid var(--jqx-outline); } jqx-ribbon[right-to-left] .jqx-ribbon-header{ flex-direction: row-reverse; } .jqx-ribbon-file-container jqx-drop-down-button .jqx-action-button{ cursor: pointer; width: 100%; } .jqx-ribbon-file-container jqx-drop-down-button { border-radius: 0; --jqx-border: var(--jqx-surface); } .jqx-ribbon-file-container jqx-drop-down-button, .jqx-ribbon-file-container jqx-button{ text-align: center; --jqx-editor-addon-width: 0; --jqx-border-radius: 0; --jqx-border-top-right-radius: var(--jqx-border-radius); --jqx-border-bottom-right-radius: var(--jqx-border-radius); --jqx-border-top-left-radius: var(--jqx-border-radius); --jqx-border-bottom-left-radius: var(--jqx-border-radius); border-radius: 0px; min-width: 70px; } .jqx-ribbon-file-container jqx-menu { --jqx-menu-vertical-default-height: auto; border: 0; } .jqx-ribbon-header .jqx-ribbon-header-tabs { display: flex; flex: 1; overflow: hidden; } jqx-ribbon[right-to-left] .jqx-ribbon-header-tabs{ flex-direction: row-reverse; } .jqx-ribbon-header-tabs .jqx-ribbon-header-tab{ display: flex; flex: 1; align-items: center; justify-content: center; border: var(--jqx-border-width) solid var(--jqx-surface); border-bottom: none; background: var(--jqx-surface); color: var(--jqx-surface-color); padding: var(--jqx-ribbon-header-tab-padding); cursor: pointer; max-width: var(--jqx-ribbon-tab-header-width); } .jqx-ribbon-header-tabs .jqx-ribbon-header-tab:hover, .jqx-ribbon-header-tabs .jqx-ribbon-header-tab:focus{ background: var(--jqx-ui-state-hover); color: var(--jqx-ui-state-color-hover); border-color: var(--jqx-ui-state-border-hover); } .jqx-ribbon-header-tabs .jqx-ribbon-header-tab[selected] { background-color: var(--jqx-ui-state-selected); border-color: var(--jqx-ui-state-border-active); border-bottom-width: var(--jqx-border-width); border-top: 0; border-left: 0; border-right: 0; border-style: solid; color: var(--jqx-ui-state-color-selected); } .jqx-ribbon-tabs{ position: relative; } .jqx-ribbon-tabs jqx-ribbon-tab { position: relative; height: var(--jqx-ribbon-tab-height); display: none; border: var(--jqx-border-width) solid var(--jqx-surface); border-top: none; color: var(--jqx-surface-color); padding: var(--jqx-ribbon-tab-padding); overflow-y: hidden; overflow-x: hidden; background: var(--jqx-background); } jqx-ribbon[right-to-left] jqx-ribbon-tab{ flex-direction: row-reverse; } jqx-ribbon-tab[collapsed]{ height: var(--jqx-ribbon-collapsed-tab-height); } jqx-ribbon-tab[selected]{ display: flex; } jqx-ribbon-tab .jqx-ribbon-tab-groups{ display: inline-flex; width: min-content; } jqx-ribbon[right-to-left] jqx-ribbon-tab .jqx-ribbon-tab-groups{ flex-direction: row-reverse; } jqx-ribbon-tab .jqx-ribbon-tab-side-container{ width: 40px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; margin-left: auto; margin-right: 0; position: relative; } jqx-ribbon[right-to-left] jqx-ribbon-tab .jqx-ribbon-tab-side-container{ margin-left: 0; margin-right: auto; } jqx-ribbon-tab[collapsed] .jqx-ribbon-tab-side-container{ width: 100%; margin-left: 5px; flex-direction: row; justify-content: right; } jqx-ribbon[right-to-left] jqx-ribbon-tab[collapsed] .jqx-ribbon-tab-side-container{ flex-direction: row-reverse; } jqx-ribbon-tab[collapsed] .jqx-ribbon-tab-side-container.jqx-ribbon-tab-side-container-flex-between{ justify-content: space-between; } .jqx-ribbon-tab-side-container .jqx-ribbon-tab-collapse-icon{ font-family: var(--jqx-font-family-icon); font-size: calc(var(--jqx-font-size) * 1.5); cursor: pointer; } .jqx-ribbon-tabs .jqx-ribbon-tab-collapse-icon:after{ content: var(--jqx-icon-arrow-up); } jqx-ribbon-tab[collapsed] .jqx-ribbon-tab-collapse-icon:after{ content: var(--jqx-icon-arrow-down); } .jqx-ribbon-more-button.jqx-drop-down-button.jqx-drop-down-container jqx-scroll-viewer{ --jqx-editor-drop-down-min-height: var(--jqx-ribbon-collapsed-tab-height); --jqx-editor-drop-down-max-height: var(--jqx-ribbon-collapsed-tab-height); } jqx-ribbon-tab[collapsed] jqx-drop-down-button.jqx-ribbon-more-button.flat{ color: var(--jqx-button-flat-color); background: transparent; border-color: transparent; } jqx-ribbon-tab[collapsed] jqx-drop-down-button.jqx-ribbon-more-button.flat[hover]{ color: var(--jqx-button-flat-color); background: transparent; border-color: transparent; } jqx-ribbon-tab[collapsed] jqx-drop-down-button.jqx-ribbon-more-button.flat[active]{ color: var(--jqx-button-flat-color); background: transparent; border-color: transparent; } jqx-ribbon-tab[collapsed] .jqx-ribbon-more-button.flat.jqx-drop-down-box .jqx-drop-down-button{ border: transparent; border-radius: 0; } jqx-ribbon-tab[collapsed] jqx-drop-down-button.jqx-ribbon-more-button .jqx-action-button{ display: none; } jqx-ribbon-tab[collapsed] jqx-drop-down-button.jqx-ribbon-more-button .jqx-drop-down-button-icon:after{ transform: none; --jqx-icon-arrow-down: var(--jqx-icon-ellipsis); } .jqx-ribbon-more-items{ display: flex; flex-direction: row; height: 100%; } .jqx-ribbon-more-items .jqx-ribbon-sub-menu-group{ display: flex; border-color: var(--jqx-ribbon-border-color); border-width: 0 var(--jqx-border-width) 0 0; border-style: solid; } jqx-ribbon-tab jqx-ribbon-group[root], .jqx-ribbon-group-drop-down[role="dialog"] jqx-ribbon-group[root]{ display: flex; flex-wrap: nowrap; flex-direction: column; flex: 1; color: var(--jqx-surface-color); padding-top: 10px; } jqx-ribbon-tab jqx-ribbon-group[root] { border-color: var(--jqx-ribbon-border-color); border-width: 0 var(--jqx-border-width) 0 0; border-style: solid; } jqx-ribbon[right-to-left] jqx-ribbon-group[root] { border-width: 0 0 0 var(--jqx-border-width); } jqx-ribbon-tab[collapsed] jqx-ribbon-group[root], .jqx-ribbon-more-button .jqx-ribbon-group[root]{ padding: 2px; } .jqx-ribbon-group-items .jqx-ribbon-group-item-separator{ width: 1px; background: var(--jqx-ribbon-border-color); margin: 0 5px; height: 100%; } jqx-ribbon-group[root] > .jqx-ribbon-group-items{ width: 100%; display: flex; flex: 1; height: 100%; padding: var(--jqx-ribbon-group-items-padding); } jqx-ribon[right-to-left] jqx-ribbon-group[root] > .jqx-ribbon-group-items { flex-direction: row-reverse; } jqx-ribbon-group[inner] > .jqx-ribbon-group-items{ display: flex; justify-content: space-around; height: 100%; } jqx-ribbon-group[direction="vertical"] > .jqx-ribbon-group-items{ flex-direction: column; } jqx-ribbon-tab[collapsed] jqx-ribbon-group[direction="vertical"] > .jqx-ribbon-group-items, .jqx-ribbon-more-button jqx-ribbon-group[direction="vertical"] > .jqx-ribbon-group-items{ flex-direction: row; } jqx-ribbon-group[direction="horizontal"] > .jqx-ribbon-group-items{ flex-direction: row; } jqx-ribbon-group[size="small"] > .jqx-ribbon-group-items{ flex-wrap: wrap; justify-content: left; } jqx-ribbon-tab[collapsed] jqx-ribbon-group[size="small"] > .jqx-ribbon-group-items{ flex-wrap: nowrap; justify-content: space-around; } .jqx-ribbon-more-button jqx-ribbon-group[size="small"] > .jqx-ribbon-group-items { flex-wrap: nowrap; justify-content: space-around; } jqx-ribbon-group[size="small"] jqx-ribbon-item{ flex: 100%; } jqx-ribbon-item{ display: flex; align-items: center; } jqx-ribbon-item > jqx-button { height: 100%; } .jqx-ribbon-group-item-label{ vertical-align: super; } jqx-ribbon-item[size="iconOnly"] .jqx-ribbon-group-item-label{ display: none; } .jqx-ribbon-group-item-flex-break { display: none; } jqx-ribbon-item[size="normal"] .jqx-ribbon-group-item-flex-break, jqx-ribbon-item[size="large"] .jqx-ribbon-group-item-flex-break, .jqx-ribbon-group-drop-down .jqx-ribbon-group-item-flex-break{ display: block; flex-basis: 100%; height: 0; } jqx-ribbon-item[size="small"] .jqx-drop-down-box .jqx-action-button, jqx-ribbon-item[size="verySmall"] .jqx-drop-down-box .jqx-action-button{ flex-wrap: nowrap; } jqx-ribbon-group .jqx-ribbon-group-header{ position: relative; display: flex; } jqx-ribbon-group .jqx-ribbon-group-header-label{ margin: auto; display: flex; flex-direction: row; align-items: center; justify-content: center; font-size: calc(var(--jqx-font-size) * 0.75); padding: 5px 0 5px 0; } jqx-ribbon-group .jqx-ribbon-group-header .jqx-ribbon-group-dialog-launcher{ position: absolute; height:100%; right: 0; } jqx-ribbon[right-to-left] .jqx-ribbon-group-header .jqx-ribbon-group-dialog-launcher{ left: 0; right: auto; } jqx-ribbon-group[grouped][root]{ padding-top: 0px; align-content: center; padding-left: 10px; padding-right: 10px; } jqx-ribbon-group[hidden]{ display: none; } jqx-ribbon-group[grouped] .jqx-ribbon-group-header-label, jqx-ribbon-tab[collapsed] .jqx-ribbon-group-header-label{ display: none; } jqx-ribbon-tab[clone] jqx-button button > button{ padding: 0; } jqx-ribbon-group[grouped] jqx-drop-down-button { min-width: 75px; } .jqx-ribbon-group-drop-down-container{ display: none; justify-content: center; align-items: center; height: 100%; } jqx-ribbon-group[grouped] .jqx-ribbon-group-drop-down-container{ display: flex; } .jqx-ribbon-group-drop-down[role="dialog"], .jqx-ribbon-more-button[role="dialog"]{ --jqx-editor-drop-down-z-index: 9998; } .jqx-ribbon-more-button[role="dialog"]{ display: flex; justify-content: center; } .jqx-ribbon-more-button[role="dialog"] .jqx-scroll-viewer-content-container {} jqx-drop-down-button.jqx-ribbon-group-drop-down[drop-down-button-position="bottom"] { min-height: 80px; } jqx-drop-down-button.jqx-ribbon-group-drop-down .jqx-buttons-container > .jqx-action-button{ height: 70%; } jqx-drop-down-button.jqx-ribbon-group-drop-down .jqx-buttons-container > .jqx-drop-down-button{ height: 30%; } .jqx-ribbon-group-drop-down[role="dialog"] jqx-ribbon-group[root] { padding: 0px; height: 100%; } .jqx-ribbon-group-drop-down[role="dialog"] .jqx-scroll-viewer-content-container { height: 100%; } .jqx-ribbon-group-drop-down[role="dialog"] .jqx-ribbon-group-drop-down-element { height: 100%; padding: 0 5px; } jqx-button.jqx-element.jqx-ribbon-navigation-button { position: absolute; top: 50%; transform: translateY(-50%); height: 75%; width: 30px; --jqx-font-weight: 800; --jqx-button-very-small-font-size: 18px; opacity: 80%; font-family: var(--jqx-font-family-icon); display: none; /* initially hidden */ } .jqx-ribbon-navigation-button.left { left: 0; } .jqx-ribbon-navigation-button.left .left-navigation::after{ content: var(--jqx-icon-arrow-left); } .jqx-ribbon-navigation-button.right { right: 0; } .jqx-ribbon-navigation-button.right .right-navigation::after{ content: var(--jqx-icon-arrow-right); } .jqx-ribbon-group-dialog-launcher-icon:after{ font-family: var(--jqx-font-family-icon); content: var(--jqx-icon-arrow-down); } jqx-button.jqx-element.jqx-ribbon-navigation-button.active { display: block; } jqx-window:not([opened]) { opacity: 0; } /* jqx-window */ .jqx-window:not(.jqx-container) { position: absolute; top: calc(50% - var(--jqx-window-default-height) / 2); left: calc(50% - var(--jqx-window-default-width) / 2); width: var(--jqx-window-default-width); height: var(--jqx-window-default-height); min-width: var(--jqx-window-min-width); min-height: var(--jqx-window-header-height); box-shadow: var(--jqx-elevation-24); z-index: calc(var(--jqx-editor-drop-down-z-index) - 1); display: block; overflow: hidden; } .jqx-window > .jqx-container:not(.jqx-window) { max-height: inherit; } .jqx-window .jqx-content-container { display: flex; flex-direction: column; font-family: inherit; font-size: inherit; width: 100%; height: 100%; outline: none; max-height: inherit; } .jqx-window .jqx-content-container > .jqx-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(--jqx-border); color: var(--jqx-surface-color); line-height: initial; height: var(--jqx-window-header-height); min-height: var(--jqx-window-header-height); background: var(--jqx-window-header-background); padding: var(--jqx-window-header-padding); } .jqx-window .jqx-content-container > .jqx-header-section .jqx-buttons-container { height: 100%; display: flex; justify-content: center; align-items: center; } .jqx-window .jqx-content-container > .jqx-header-section .jqx-buttons-container button { position: relative; margin-left: 1px; margin-right: 1px; cursor: pointer; height: var(--jqx-window-header-button-size); width: var(--jqx-window-header-button-size); padding: 0; min-height: 0; background: transparent; color: inherit; border: none; outline: none; } .jqx-window .jqx-content-container > .jqx-header-section .jqx-buttons-container button:active { outline: none; background-color: initial; } .jqx-window .jqx-content-container > .jqx-content { width: 100%; height: calc(100% - var(--jqx-window-header-height)); display: flex; align-items: center; overflow-y: auto; padding: var(--jqx-window-content-padding); background: var(--jqx-background); color: var(--jqx-background-color); flex-direction: column; /* There's an issue with display:flex/grid and align-items: center */ } @media not all and (min-resolution: 0.001dpcm) { .jqx-window .jqx-content-container > .jqx-content { align-content: start; } } .jqx-window .jqx-content-container > .jqx-footer { width: 100%; min-height: var(--jqx-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(--jqx-border); color: var(--jqx-surface-color); line-height: initial; position: relative; background-color: initial; display: flex; justify-content: center; height: var(--jqx-window-footer-height); background: var(--jqx-window-footer-background); padding: var(--jqx-window-footer-padding); } .jqx-window .jqx-content-container > .jqx-footer:empty { display: none; } .jqx-window .jqx-content-container.jqx-window-resizing-left, .jqx-window .jqx-content-container.jqx-window-resizing-right, .jqx-window .jqx-content-container.jqx-window-resizing-left > .jqx-header-section, .jqx-window .jqx-content-container.jqx-window-resizing-right > .jqx-header-section { cursor: e-resize; } .jqx-window .jqx-content-container.jqx-window-resizing-top, .jqx-window .jqx-content-container.jqx-window-resizing-bottom, .jqx-window .jqx-content-container.jqx-window-resizing-top > .jqx-header-section, .jqx-window .jqx-content-container.jqx-window-resizing-bottom > .jqx-header-section { cursor: ns-resize; } .jqx-window .jqx-content-container.jqx-window-resizing-top-left, .jqx-window .jqx-content-container.jqx-window-resizing-bottom-right, .jqx-window .jqx-content-container.jqx-window-resizing-top-left > .jqx-header-section, .jqx-window .jqx-content-container.jqx-window-resizing-bottom-right > .jqx-header-section { cursor: se-resize; } .jqx-window .jqx-content-container.jqx-window-resizing-top-right, .jqx-window .jqx-content-container.jqx-window-resizing-bottom-left, .jqx-window .jqx-content-container.jqx-window-resizing-top-right > .jqx-header-section, .jqx-window .jqx-content-container.jqx-window-resizing-bottom-left > .jqx-header-section { cursor: sw-resize; } .jqx-window .jqx-header-section .jqx-buttons-container button:after { position: absolute; top: 0; font-family: var(--jqx-font-family-icon); font-size: var(--jqx-window-header-icon-size); width: 100%; height: 100%; text-align: center; display: flex; align-items: center; justify-content: center; pointer-events: none; } .jqx-window .jqx-header-section .jqx-buttons-container button:first-of-type { margin-left: initial; } .jqx-window .jqx-header-section .jqx-buttons-container button:last-of-type { margin-right: initial; } .jqx-window .jqx-header-section .jqx-buttons-container button.hover { color: initial; background-color: initial; } .jqx-window .jqx-header-section .jqx-close-button:after { content: var(--jqx-icon-close); } .jqx-window .jqx-header-section .jqx-collapse-button:after { content: var(--jqx-icon-arrow-down); } .jqx-window .jqx-header-section .jqx-maximize-button:after { content: var(--jqx-icon-window-maximize); } .jqx-window .jqx-header-section .jqx-pin-button:after { content: var(--jqx-icon-window-pin); } .jqx-window .jqx-header-section .jqx-minimize-button:after { content: var(--jqx-icon-window-minimize); } .jqx-window:focus, .jqx-window[focus] { outline: none; border-color: var(--jqx-primary); box-shadow: var(--jqx-elevation-24); } .jqx-window:focus .jqx-content-container > .jqx-header-section, .jqx-window[focus] .jqx-content-container > .jqx-header-section { background-color: var(--jqx-primary); color: var(--jqx-primary-color); } .jqx-window[ontop] { z-index: var(--jqx-editor-drop-down-z-index); } .jqx-window:not([animation=none]) { transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1), height 0.25s cubic-bezier(0.4, 0, 0.2, 1), top 0.2s cubic-bezier(0.4, 0, 0.6, 1), left 0.2s cubic-bezier(0.4, 0, 0.6, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.2s cubic-bezier(0.4, 0, 0.2, 1), min-height 0.25s cubic-bezier(0.4, 0, 0.2, 1), min-width 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1); transform: scale(1); } .jqx-window:not([animation=none]) .jqx-header-section .jqx-collapse-button:after { transition: transform 0.15s linear; } .jqx-window:not([animation=none]) .jqx-header-section .jqx-pin-button:after { transition: transform 0.15s linear; } .jqx-window:not([animation=none]).no-transition, .jqx-window:not([animation=none]).no-transition.jqx-visibility-hidden { transition: none; } .jqx-window:not([animation=none]).jqx-visibility-hidden, .jqx-window:not([animation=none]).jqx-visibility-hidden[maximized] { transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1), height 0.2s cubic-bezier(0.4, 0, 0.2, 1), top 0.2s cubic-bezier(0.4, 0, 0.2, 1), left 0.2s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.2s cubic-bezier(0.4, 0, 0.6, 1), transform 0.2s cubic-bezier(0.4, 0, 0.6, 1), min-height 0.25s cubic-bezier(0.4, 0, 0.2, 1), min-width 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1); transform: scale(0); } .jqx-window:not([animation=none])[dragged] { opacity: 0.5; z-index: calc(1 + var(--jqx-editor-drop-down-z-index)); transition: none; } .jqx-window:not([animation=none])[minimized] { transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1), height 0.2s cubic-bezier(0.4, 0, 0.2, 1), top 0.2s cubic-bezier(0.4, 0, 0.2, 1), left 0.2s cubic-bezier(0.4, 0, 0.2, 1), animation 0.2s cubic-bezier(0.4, 0, 0.6); } .jqx-window.jqx-visibility-hidden { transform: scale(0); } .jqx-window.jqx-tabs-window[collapsed][header-position=left], .jqx-window.jqx-tabs-window[collapsed][header-position=right], .jqx-window.jqx-tabs-window[maximized][collapsed][header-position=right], .jqx-window.jqx-tabs-window[maximized][collapsed][header-position=left] { width: var(--jqx-window-header-height); min-width: initial; height: var(--jqx-window-default-height); } .jqx-window.jqx-tabs-window[dragged] { pointer-events: none; /* Need a way to detect what's under the header while dragging. That's why pointer-events is used ! */ } .jqx-window.jqx-tabs-window[dragged] .jqx-tabs-header-section, .jqx-window.jqx-tabs-window[dragged] .jqx-tab-label-container { cursor: move; } .jqx-window.jqx-tabs-window .jqx-content-container > .jqx-content { width: 100%; height: calc(100% - var(--jqx-window-header-height)); overflow: hidden; padding: 0; background-color: var(--jqx-background); } .jqx-window.jqx-tabs-window .jqx-content-container > .jqx-header-section.jqx-hidden, .jqx-window.jqx-tabs-window .jqx-content-container > .jqx-footer.jqx-hidden { display: none; } .jqx-window.jqx-tabs-window[dragged] .jqx-content-container > .jqx-header-section, .jqx-window.jqx-tabs-window[focus] .jqx-content-container > .jqx-header-section, .jqx-window.jqx-tabs-window[active] .jqx-content-container > .jqx-header-section { background-color: var(--jqx-primary); color: var(--jqx-primary-color); } .jqx-window.jqx-tabs-window jqx-tabs { width: 100%; height: 250px; min-height: 100%; border: initial; outline: none; padding: 0; } .jqx-window.jqx-tabs-window jqx-tabs .jqx-tabs-header-items { /*width: calc(100% - var(--jqx-tabs-header-controls-size));*/ width: 100%; } .jqx-window.jqx-tabs-window jqx-tabs .jqx-tabs-header-items { width: 100%; } .jqx-window.jqx-tabs-window jqx-tabs[vertical] .jqx-tabs-header-items { width: auto; height: 100%; } .jqx-window.jqx-tabs-window .jqx-tabs .jqx-header { border: none; } .jqx-window.jqx-tabs-window .jqx-tabs-content-section { margin: initial; border: none; } .jqx-window.jqx-tabs-window[auto-hide] { overflow: visible; height: auto; min-height: 0; } .jqx-window.jqx-tabs-window[auto-hide] .jqx-tabs-content-section, .jqx-window.jqx-tabs-window[auto-hide] .jqx-content-container > .jqx-header-section { display: none; } .jqx-window.jqx-tabs-window[auto-hide] .jqx-tabs { min-width: 0; height: auto; min-height: 0; } .jqx-window.jqx-tabs-window[auto-hide] .jqx-content-container > .jqx-content { overflow: visible; } .jqx-window.jqx-tabs-window[auto-hide] .jqx-window { width: auto; height: auto; } .jqx-window.jqx-tabs-window[auto-hide][tab-position=left], .jqx-window.jqx-tabs-window[auto-hide][tab-position=right], .jqx-window.jqx-tabs-window[auto-hide][tab-text-orientation=horizontal][tab-position=left], .jqx-window.jqx-tabs-window[auto-hide][tab-text-orientation=horizontal][tab-position=right], .jqx-window.jqx-tabs-window[auto-hide][tab-position=left] jqx-tabs, .jqx-window.jqx-tabs-window[auto-hide][tab-position=right] jqx-tabs, .jqx-window.jqx-tabs-window[auto-hide][tab-text-orientation=horizontal][tab-position=left] jqx-tabs, .jqx-window.jqx-tabs-window[auto-hide][tab-text-orientation=horizontal][tab-position=right] jqx-tab, .jqx-window.jqx-tabs-window[auto-hide][tab-text-orientation=vertical][tab-position=left], .jqx-window.jqx-tabs-window[auto-hide][tab-text-orientation=vertical][tab-position=right], .jqx-window.jqx-tabs-window[auto-hide][tab-text-orientation=vertical][tab-position=left] jqx-tabs, .jqx-window.jqx-tabs-window[auto-hide][tab-text-orientation=vertical][tab-position=right] jqx-tabs { width: auto; min-width: 0; } .jqx-window.jqx-tabs-window[tab-position=hidden] .jqx-content-container > .jqx-content { height: 100%; } .jqx-window.jqx-tabs-window jqx-tab-item { user-select: text; -webkit-user-select: text; } .jqx-window[minimized] { max-width: var(--jqx-window-min-width); min-height: var(--jqx-window-header-height); cursor: default; } .jqx-window[minimized] .jqx-content-container > .jqx-header-section { cursor: default; } .jqx-window[minimized] .jqx-content-container > .jqx-content { padding: initial; } .jqx-window[minimized] .jqx-minimize-button:after { content: var(--jqx-icon-arrow-up-alt); transform: rotate(-45deg); margin-top: -1px; } .jqx-window[maximized] .jqx-content-container > .jqx-header-section { cursor: initial; } .jqx-window[maximized] .jqx-header-section .jqx-maximize-button:after { content: var(--jqx-icon-window-restore); font-size: 100%; } .jqx-window[maximized].jqx-visibility-hidden { transform: scale(0); } .jqx-window[pinned] .jqx-content-container > .jqx-header-section { cursor: default; } .jqx-window[pinned] .jqx-header-section .jqx-pin-button:after { content: var(--jqx-icon-window-pin); transform: rotate(-45deg); } .jqx-window[disabled] .jqx-header-section > .jqx-buttons-container button { cursor: initial; } .jqx-window[collapsed] { height: var(--jqx-window-header-height); } .jqx-window[collapsed] .jqx-header-section .jqx-collapse-button:after { transform: rotate(180deg) translateY(1px); } .jqx-window[collapsed] .jqx-content-container.jqx-window-resizing-top-left, .jqx-window[collapsed] .jqx-content-container.jqx-window-resizing-top-right, .jqx-window[collapsed] .jqx-content-container.jqx-window-resizing-bottom-left, .jqx-window[collapsed] .jqx-content-container.jqx-window-resizing-bottom-right, .jqx-window[collapsed] .jqx-content-container.jqx-window-resizing-top-left > .jqx-header-section, .jqx-window[collapsed] .jqx-content-container.jqx-window-resizing-top-right > .jqx-header-section, .jqx-window[collapsed] .jqx-content-container.jqx-window-resizing-bottom-left > .jqx-header-section, .jqx-window[collapsed] .jqx-content-container.jqx-window-resizing-bottom-right > .jqx-header-section { cursor: initial; } .jqx-window[collapsed].jqx-window-snapped-left, .jqx-window[collapsed].jqx-window-snapped-right, .jqx-window[collapsed].jqx-window-snapped-top { height: var(--jqx-window-header-height); } .jqx-window[collapsed][header-position=top].jqx-window-snapped-left, .jqx-window[collapsed][header-position=top].jqx-window-snapped-right, .jqx-window[collapsed][header-position=top].jqx-window-snapped-top, .jqx-window[collapsed][header-position=bottom].jqx-window-snapped-left, .jqx-window[collapsed][header-position=bottom].jqx-window-snapped-right, .jqx-window[collapsed][header-position=bottom].jqx-window-snapped-top { height: var(--jqx-window-header-height); } .jqx-window[collapsed][header-position=left] .jqx-content-container > .jqx-header-section, .jqx-window[collapsed][header-position=left] .jqx-content-container > .jqx-footer, .jqx-window[collapsed][header-position=right] .jqx-content-container > .jqx-header-section, .jqx-window[collapsed][header-position=right] .jqx-content-container > .jqx-footer { min-width: var(--jqx-window-header-height); } .jqx-window[collapsed][header-position=left].jqx-window-snapped-left, .jqx-window[collapsed][header-position=left].jqx-window-snapped-right, .jqx-window[collapsed][header-position=left].jqx-window-snapped-top, .jqx-window[collapsed][header-position=right].jqx-window-snapped-left, .jqx-window[collapsed][header-position=right].jqx-window-snapped-right, .jqx-window[collapsed][header-position=right].jqx-window-snapped-top { height: 100%; width: var(--jqx-window-header-height); min-width: initial; } .jqx-window[collapsed][maximized] { height: var(--jqx-window-header-height); } .jqx-window[collapsed][maximized][header-position=left] .jqx-content-container > .jqx-header-section, .jqx-window[collapsed][maximized][header-position=left] .jqx-content-container > .jqx-footer, .jqx-window[collapsed][maximized][header-position=right] .jqx-content-container > .jqx-header-section, .jqx-window[collapsed][maximized][header-position=right] .jqx-content-container > .jqx-footer { min-width: var(--jqx-window-header-height); } .jqx-window[active] .jqx-content-container > .jqx-header-section { background-color: var(--jqx-primary); color: var(--jqx-primary-color); } .jqx-window[dragged] { opacity: 0.5; z-index: calc(1 + var(--jqx-editor-drop-down-z-index)); transition: none; } .jqx-window[dragged] .jqx-content-container { user-select: none; -webkit-user-select: none; -ms-user-select: none; -moz-user-select: none; } .jqx-window[dragged] .jqx-content-container > .jqx-header-section { background-color: var(--jqx-primary); color: var(--jqx-primary-color); } .jqx-window[resized] .jqx-content-container { user-select: none; -webkit-user-select: none; -ms-user-select: none; -moz-user-select: none; } .jqx-window[resize-indicator] .jqx-content-container:before { width: 10px; height: 10px; font-family: var(--jqx-font-family-icon); content: var(--jqx-icon-minus); position: absolute; top: calc(100% - 13px); left: calc(100% - 10px); transform: rotate(-45deg) scaleX(2); font-size: 10px; } .jqx-window[resize-indicator] .jqx-content-container:after { width: 10px; height: 10px; font-family: var(--jqx-font-family-icon); content: var(--jqx-icon-minus); position: absolute; top: calc(100% - 9px); left: calc(100% - 8px); transform: rotate(-45deg); font-size: 10px; } .jqx-window[resize-indicator][resize-mode=top] .jqx-content-container:before, .jqx-window[resize-indicator][resize-mode=left] .jqx-content-container:before { top: 0; left: 5px; } .jqx-window[resize-indicator][resize-mode=top] .jqx-content-container:after, .jqx-window[resize-indicator][resize-mode=left] .jqx-content-container:after { top: 4px; left: 5px; } .jqx-window[resize-indicator][collapsed] .jqx-content-container:before, .jqx-window[resize-indicator][collapsed] .jqx-content-container:after { content: ""; } .jqx-window[header-position=none] .jqx-content-container > .jqx-header-section { display: none; } .jqx-window[header-position=none] .jqx-content-container > .jqx-content { height: 100%; } .jqx-window[header-position=bottom] .jqx-content-container { flex-direction: column-reverse; } .jqx-window[header-position=left] .jqx-content-container { flex-direction: row; } .jqx-window[header-position=left] .jqx-content-container .jqx-header-section { flex-direction: column; } .jqx-window[header-position=left] .jqx-content-container .jqx-header-section .jqx-collapse-button:after { transform: rotate(275deg) translateY(1px); } .jqx-window[header-position=left] .jqx-content-container .jqx-header-section > .jqx-header { writing-mode: vertical-lr; } .jqx-window[header-position=left] .jqx-content-container > .jqx-header-section, .jqx-window[header-position=left] .jqx-content-container > .jqx-footer { width: var(--jqx-window-header-height); min-width: var(--jqx-window-header-height); height: 100%; } .jqx-window[header-position=left][collapsed] .jqx-content-container .jqx-header-section .jqx-collapse-button:after { transform: rotate(90deg) translateY(1px); } .jqx-window[header-position=right] .jqx-content-container { flex-direction: row-reverse; } .jqx-window[header-position=right] .jqx-content-container .jqx-header-section { flex-direction: column; } .jqx-window[header-position=right] .jqx-content-container .jqx-header-section .jqx-collapse-button:after { transform: rotate(90deg) translateY(1px); } .jqx-window[header-position=right] .jqx-content-container .jqx-header-section > .jqx-header { writing-mode: vertical-lr; } .jqx-window[header-position=right] .jqx-content-container > .jqx-header-section, .jqx-window[header-position=right] .jqx-content-container > .jqx-footer { width: var(--jqx-window-header-height); min-width: var(--jqx-window-header-height); height: 100%; } .jqx-window[header-position=right][collapsed] .jqx-content-container .jqx-header-section .jqx-collapse-button:after { transform: rotate(275deg) translateY(1px); } .jqx-window[header-position=left], .jqx-window[header-position=right] { min-width: var(--jqx-window-header-height); min-height: var(--jqx-window-min-width); } .jqx-window[header-position=left].jqx-window-snapped-left, .jqx-window[header-position=left].jqx-window-snapped-right, .jqx-window[header-position=right].jqx-window-snapped-left, .jqx-window[header-position=right].jqx-window-snapped-right { height: 100%; width: 50%; } .jqx-window[header-position=left].jqx-window-snapped-top, .jqx-window[header-position=right].jqx-window-snapped-top { height: 100%; width: 100%; } .jqx-window[header-position=left][minimized], .jqx-window[header-position=left][minimized], .jqx-window[header-position=right][minimized], .jqx-window[header-position=right][minimized] { max-width: var(--jqx-window-header-height); } .jqx-window[header-position=left] .jqx-content-container > .jqx-content, .jqx-window[header-position=right] .jqx-content-container > .jqx-content { height: 100%; } .jqx-window[header-position=left] .jqx-content-container > .jqx-header-section .jqx-buttons-container, .jqx-window[header-position=right] .jqx-content-container > .jqx-header-section .jqx-buttons-container { display: flex; justify-content: center; flex-direction: column; height: initial; } .jqx-window[header-position=left] .jqx-content-container > .jqx-header-section .jqx-buttons-container button, .jqx-window[header-position=right] .jqx-content-container > .jqx-header-section .jqx-buttons-container button { margin-left: initial; margin-top: 1px; } .jqx-window[header-position=left] .jqx-content-container > .jqx-header-section .jqx-buttons-container button:first-of-type, .jqx-window[header-position=right] .jqx-content-container > .jqx-header-section .jqx-buttons-container button:first-of-type { margin-top: initial; } .jqx-window[footer-position=none] .jqx-content-container > .jqx-footer { display: none; } .jqx-window[footer-template] .jqx-content-container > .jqx-content { height: calc(100% - var(--jqx-window-header-height) - var(--jqx-window-footer-height)); } .jqx-window[footer-template=null] .jqx-content-container > .jqx-content { height: calc(100% - var(--jqx-window-header-height)); } .jqx-window.jqx-window-snapped-top, .jqx-window.jqx-window-snapped-left, .jqx-window.jqx-window-snapped-right { height: 100%; z-index: 9999; box-shadow: none; border: var(--jqx-border-width) solid var(--jqx-border); } .jqx-window.jqx-window-snapped-top[ontop], .jqx-window.jqx-window-snapped-left[ontop], .jqx-window.jqx-window-snapped-right[ontop] { z-index: 10000; box-shadow: none; } .jqx-window.jqx-window-snapped-left, .jqx-window.jqx-window-snapped-right { width: 50%; } .jqx-window.jqx-window-snapped-top { width: 100%; } .jqx-window.jqx-dialog-window .jqx-content-container > .jqx-footer .jqx-button, .jqx-window.jqx-alert-window .jqx-content-container > .jqx-footer .jqx-button, .jqx-window.jqx-prompt-window .jqx-content-container > .jqx-footer .jqx-button, .jqx-window.jqx-multiline-prompt-window .jqx-content-container > .jqx-footer .jqx-button, .jqx-window.jqx-progress-window .jqx-content-container > .jqx-footer .jqx-button { width: var(--jqx-window-footer-button-width); height: 100%; text-align: center; vertical-align: middle; cursor: pointer; text-transform: var(--jqx-button-text-transform); font-weight: 500; letter-spacing: 0.08929em; overflow: hidden; border-color: var(--jqx-border); border-top-left-radius: var(--jqx-border-top-left-radius); border-top-right-radius: var(--jqx-border-top-right-radius); border-bottom-left-radius: var(--jqx-border-bottom-left-radius); border-bottom-right-radius: var(--jqx-border-bottom-right-radius); border-width: var(--jqx-border-width); border-style: solid; } .jqx-window.jqx-dialog-window .jqx-content-container > .jqx-footer .jqx-button.primary, .jqx-window.jqx-alert-window .jqx-content-container > .jqx-footer .jqx-button.primary, .jqx-window.jqx-prompt-window .jqx-content-container > .jqx-footer .jqx-button.primary, .jqx-window.jqx-multiline-prompt-window .jqx-content-container > .jqx-footer .jqx-button.primary, .jqx-window.jqx-progress-window .jqx-content-container > .jqx-footer .jqx-button.primary { color: var(--jqx-primary-color); border-color: var(--jqx-primary); background-color: var(--jqx-primary); } .jqx-window.jqx-dialog-window .jqx-content-container > .jqx-footer .jqx-button:focus, .jqx-window.jqx-alert-window .jqx-content-container > .jqx-footer .jqx-button:focus, .jqx-window.jqx-prompt-window .jqx-content-container > .jqx-footer .jqx-button:focus, .jqx-window.jqx-multiline-prompt-window .jqx-content-container > .jqx-footer .jqx-button:focus, .jqx-window.jqx-progress-window .jqx-content-container > .jqx-footer .jqx-button:focus { color: var(--jqx-ui-state-color-focus); border-color: var(--jqx-ui-state-focus); background-color: var(--jqx-ui-state-focus); opacity: var(--jqx-button-opacity-focus); } .jqx-window.jqx-dialog-window { width: var(--jqx-window-default-width); height: var(--jqx-window-default-height); top: calc(50% - var(--jqx-window-default-height) / 2); left: calc(50% - var(--jqx-window-default-width) / 2); } .jqx-window.jqx-dialog-window .jqx-content-container > .jqx-footer button:first-child { margin-right: 10px; } .jqx-window.jqx-dialog-window[collapsed][header-position=left], .jqx-window.jqx-dialog-window[collapsed][header-position=right], .jqx-window.jqx-dialog-window[collapsed][maximized][header-position=left], .jqx-window.jqx-dialog-window[collapsed][maximized][header-position=right] { height: var(--jqx-window-default-height); } .jqx-window.jqx-alert-window { width: var(--jqx-window-default-width); height: var(--jqx-window-default-height); top: calc(50% - var(--jqx-window-default-height) / 2); left: calc(50% - var(--jqx-window-default-width) / 2); } .jqx-window.jqx-alert-window .jqx-content-container > .jqx-footer button:first-child { margin-right: 10px; } .jqx-window.jqx-alert-window .jqx-cancel-button { display: none; } .jqx-window.jqx-alert-window[collapsed][header-position=left], .jqx-window.jqx-alert-window[collapsed][header-position=right], .jqx-window.jqx-alert-window[collapsed][maximized][header-position=left], .jqx-window.jqx-alert-window[collapsed][maximized][header-position=right] { height: var(--jqx-window-default-height); } .jqx-window.jqx-prompt-window { width: var(--jqx-window-default-width); height: var(--jqx-window-default-height); top: calc(50% - var(--jqx-window-default-height) / 2); left: calc(50% - var(--jqx-window-default-width) / 2); } .jqx-window.jqx-prompt-window .jqx-content-container > .jqx-content { flex-direction: column-reverse; align-items: flex-start; } .jqx-window.jqx-prompt-window .jqx-content-container > .jqx-footer button:first-child { margin-right: 10px; } .jqx-window.jqx-prompt-window jqx-text-box { width: 100%; margin-top: 5px; } .jqx-window.jqx-prompt-window[collapsed][header-position=left], .jqx-window.jqx-prompt-window[collapsed][header-position=right], .jqx-window.jqx-prompt-window[collapsed][maximized][header-position=left], .jqx-window.jqx-prompt-window[collapsed][maximized][header-position=right] { height: var(--jqx-window-default-height); } .jqx-window.jqx-multiline-prompt-window { width: var(--jqx-window-default-width); height: var(--jqx-window-default-height); top: calc(50% - var(--jqx-window-default-height) / 2); left: calc(50% - var(--jqx-window-default-width) / 2); } .jqx-window.jqx-multiline-prompt-window jqx-multiline-text-box { width: 100%; margin-top: 5px; } .jqx-window.jqx-multiline-prompt-window .jqx-content-container > .jqx-content { flex-direction: column-reverse; align-items: flex-start; } .jqx-window.jqx-multiline-prompt-window .jqx-content-container > .jqx-footer button:first-child { margin-right: 10px; } .jqx-window.jqx-multiline-prompt-window[collapsed][header-position=left], .jqx-window.jqx-multiline-prompt-window[collapsed][header-position=right], .jqx-window.jqx-multiline-prompt-window[collapsed][maximized][header-position=left], .jqx-window.jqx-multiline-prompt-window[collapsed][maximized][header-position=right] { height: var(--jqx-window-default-height); } .jqx-window.jqx-progress-window { width: var(--jqx-window-default-width); height: var(--jqx-window-default-height); top: calc(50% - var(--jqx-window-default-height) / 2); left: calc(50% - var(--jqx-window-default-width) / 2); } .jqx-window.jqx-progress-window jqx-progress-bar .jqx-value { border: initial; } .jqx-window.jqx-progress-window jqx-progress-bar.jqx-visibility-hidden { transition: none; } .jqx-window.jqx-progress-window .jqx-content-container > .jqx-content { user-select: none; -webkit-user-select: none; -ms-user-select: none; -moz-user-select: none; } .jqx-window.jqx-progress-window .jqx-content-container > .jqx-footer jqx-progress-bar { width: 100%; height: 100%; box-shadow: initial; background-color: var(--jqx-surface); transition: opacity 0.25s ease-in, visibility 0.25s cubic-bezier(0, 0, 0.2, 1); } .jqx-window.jqx-progress-window .jqx-content-container > .jqx-footer jqx-progress-bar > .jqx-container { border: initial; } .jqx-window.jqx-progress-window .jqx-content-container > .jqx-footer jqx-progress-bar.jqx-visibility-hidden { opacity: 0.5; transition: opacity 0.25s ease-out, visibility 0.25s cubic-bezier(0, 0, 0.2, 1); } .jqx-window.jqx-progress-window .jqx-content-container > .jqx-footer button.jqx-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, 0.5); } .jqx-window.jqx-progress-window .jqx-content-container > .jqx-footer button.jqx-button.jqx-visibility-hidden { top: 100%; } .jqx-window.jqx-progress-window.jqx-visibility-hidden jqx-progress-bar { transform: scale(0); } .jqx-window.jqx-progress-window:not([animation=none]) .jqx-content-container > .jqx-footer button { transition: top 0.25s cubic-bezier(0, 0, 0.2, 1), visibility 0.25s cubic-bezier(0, 0, 0.2, 1); } .jqx-window.jqx-progress-window:not([animation=none]) .jqx-content-container > .jqx-footer button.jqx-visibility-hidden { transition: top 0.25s cubic-bezier(0, 0, 0.2, 1), visibility 0.25s cubic-bezier(0, 0, 0.2, 1); } .jqx-window.jqx-progress-window[collapsed][header-position=left], .jqx-window.jqx-progress-window[collapsed][header-position=right], .jqx-window.jqx-progress-window[collapsed][maximized][header-position=left], .jqx-window.jqx-progress-window[collapsed][maximized][header-position=right] { height: var(--jqx-window-default-height); } .jqx-window { /* .jqx-wait-window */ } .jqx-window.jqx-wait-window { width: var(--jqx-window-default-width); height: var(--jqx-window-default-height); top: calc(50% - var(--jqx-window-default-height) / 2); left: calc(50% - var(--jqx-window-default-width) / 2); } .jqx-window.jqx-wait-window .jqx-content-container > .jqx-header-section { cursor: default; } .jqx-window.jqx-wait-window .jqx-content-container > .jqx-content jqx-progress-bar { width: 100%; height: 75%; } .jqx-window.jqx-wait-window[collapsed][header-position=left], .jqx-window.jqx-wait-window[collapsed][header-position=right], .jqx-window.jqx-wait-window[collapsed][maximized][header-position=left], .jqx-window.jqx-wait-window[collapsed][maximized][header-position=right] { height: var(--jqx-window-default-height); } jqx-window.jqx-window[collapsed][header-position=left], jqx-window.jqx-window[collapsed][header-position=right], jqx-window.jqx-window[collapsed][maximized][header-position=left], jqx-window.jqx-window[collapsed][maximized][header-position=right] { width: var(--jqx-window-header-height); min-width: initial; height: var(--jqx-window-default-height); } .jqx-modal { position: absolute; opacity: 0.5; background-color: var(--jqx-disabled); top: 0; left: 0; width: 100%; min-height: 100%; } .jqx-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 black; box-sizing: border-box; } jqx-docking-layout .jqx-window-resize-feedback { border: 2.5px solid lightgray; } .jqx-window-snap-right-feedback, .jqx-window-snap-left-feedback, .jqx-window-snap-top-feedback, .jqx-window-snap-bottom-feedback { position: absolute; height: calc(100% - 10px); top: 5px; bottom: 5px; opacity: 0.65; box-shadow: 0 0 1px 1px #8a8a8a; border-radius: 2px; transition: all 0.05s cubic-bezier(0.4, 0, 0.6, 1); animation: scaleIn 0.2s cubic-bezier(0.4, 0, 0.2, 1); transform: scale(1); pointer-events: none; } .jqx-window-snap-right-feedback.jqx-visibility-hidden, .jqx-window-snap-left-feedback.jqx-visibility-hidden, .jqx-window-snap-top-feedback.jqx-visibility-hidden, .jqx-window-snap-bottom-feedback.jqx-visibility-hidden { transition: animation 0.2s cubic-bezier(0.4, 0, 0.6, 1), visibility 0.2s cubic-bezier(0.4, 0, 0.6, 1), top 0.2s cubic-bezier(0.4, 0, 0.2, 1), left 0.2s cubic-bezier(0.4, 0, 0.2, 1); animation: scaleOut 0.2s cubic-bezier(0.4, 0, 0.6, 1); transform: scale(0); } .jqx-window-snap-right-feedback { width: 50%; left: calc(50% - 5px); transform-origin: right; } .jqx-window-snap-left-feedback { width: 50%; left: 5px; transform-origin: left; } .jqx-window-snap-top-feedback { width: calc(100% - 10px); left: 5px; transform-origin: top; } .jqx-window-snap-bottom-feedback { width: calc(100% - 10px); left: 5px; transform-origin: top; } @keyframes scaleIn { 0% { transform: scale(0); } 50% { transform: scale(0.5); opacity: 0.5; } 100% { transform: scale(1); opacity: 1; } } @keyframes scaleOut { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.5); opacity: 0.5; } 100% { transform: scale(0); } } @keyframes scaleInRight { 0% { transform: scale(0); } 50% { transform: scale(0.5); opacity: 0.5; } 100% { transform: scale(1); opacity: 1; } } .jqx-window[right-to-left] .jqx-content-container > .jqx-header-section, .jqx-window[right-to-left] .jqx-content-container > .jqx-content, .jqx-window[right-to-left] .jqx-content-container > .jqx-footer { direction: rtl; } .jqx-window[right-to-left][header-position=left] .jqx-header-section > .jqx-header, .jqx-window[right-to-left][header-position=right] .jqx-header-section > .jqx-header { writing-mode: vertical-rl; } .jqx-window[right-to-left].jqx-dialog-window .jqx-content-container > .jqx-footer button:first-child, .jqx-window[right-to-left].jqx-alert-window .jqx-content-container > .jqx-footer button:first-child, .jqx-window[right-to-left].jqx-prompt-window .jqx-content-container > .jqx-footer button:first-child, .jqx-window[right-to-left].jqx-multiline-prompt-window .jqx-content-container > .jqx-footer button:first-child { margin-left: 10px; margin-right: initial; } .jqx-tabs-window[right-to-left] .jqx-content-container > .jqx-content { direction: initial; } jqx-layout { display: block; --jqx-layout-buttons-border-radius: 50%; --jqx-layout-context-menu-default-width: var(--jqx-menu-vertical-default-width); --jqx-layout-context-menu-default-height: auto; overflow: initial; width: 600px; height: 600px; } jqx-layout > .jqx-container { position: relative; } jqx-tab-layout-group[position=right] .jqx-layout-tab, jqx-tab-layout-group[position=left] .jqx-layout-tab { padding: 24px 12px; } jqx-tab-layout-group[position=right] .jqx-layout-tab:after, jqx-tab-layout-group[position=left] .jqx-layout-tab:after { position: absolute; left: 0; bottom: 0; top: 0; width: 100%; height: 100%; border-top-left-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 8px; border-top-right-radius: 8px; content: ""; transition: all 0.2s ease; transform: perspective(5px) rotateY(2deg); transform-origin: left; left: 0; right: -1px; } jqx-tab-layout-group[position=right] .jqx-layout-tab label, jqx-tab-layout-group[position=right] .jqx-layout-tab.selected .jqx-close-button { margin-right: 5px; } jqx-tab-layout-group[position=left] .jqx-layout-tab:after { right: 0px; border-top-right-radius: 8px; border-bottom-right-radius: 8px; border-bottom-left-radius: 0px; border-top-left-radius: 0px; } jqx-tab-layout-group[position=left] .jqx-layout-tab label, jqx-tab-layout-group[position=left] .jqx-layout-tab.selected .jqx-close-button { transform: rotateY(0deg); margin-left: -5px; } jqx-tab-layout-group[position=top] .jqx-layout-tab, jqx-tab-layout-group[position=bottom] .jqx-layout-tab { padding: 12px 24px; } jqx-tab-layout-group[position=bottom] .jqx-layout-tab:after { transform-origin: top; transform: perspective(5px) rotateX(-2deg); border-top-left-radius: 0px; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; border-top-right-radius: 0px; top: 0; } jqx-tab-layout-group[position=bottom] .jqx-layout-tab label, jqx-tab-layout-group[position=bottom] .jqx-layout-tab.selected .jqx-close-button { margin-top: -5px; } .jqx-layout jqx-layout-group { display: grid; overflow: hidden; } .jqx-layout jqx-layout-group[data-id=root] { width: 100%; height: 100%; overflow: hidden; grid-template-columns: 1fr; } .jqx-layout jqx-tab-layout-group { display: grid; overflow: hidden; grid-template-rows: 35px 1fr; border-right: 1px solid var(--jqx-border); border-bottom: 1px solid var(--jqx-border); } .jqx-layout jqx-tab-layout-group .jqx-layout-tab-strip { background: var(--jqx-surface); display: flex; overflow: hidden; border-bottom: 2px solid var(--jqx-primary); } .jqx-layout jqx-tab-layout-group[position=bottom] { grid-template-rows: 1fr 35px; } .jqx-layout jqx-tab-layout-group[position=bottom] > .jqx-layout-tab-strip { border: none; border-top: 2px solid var(--jqx-primary); } .jqx-layout jqx-tab-layout-group[position=left] .jqx-layout-tab-strip .jqx-layout-tab .jqx-close-button:after, .jqx-layout jqx-tab-layout-group[position=right] .jqx-layout-tab-strip .jqx-layout-tab .jqx-close-button:after { margin-left: initial; margin-top: 5px; } .jqx-layout jqx-tab-layout-group[position=left] { grid-template-columns: 35px 1fr; grid-template-rows: initial; } .jqx-layout jqx-tab-layout-group[position=left] > .jqx-layout-tab-strip { writing-mode: vertical-rl; transform: rotate(180deg); justify-content: flex-end; align-items: center; border: none; border-left: 2px solid var(--jqx-primary); } .jqx-layout jqx-tab-layout-group[position=right] { grid-template-columns: 1fr 35px; grid-template-rows: initial; } .jqx-layout jqx-tab-layout-group[position=right] > .jqx-layout-tab-strip { writing-mode: vertical-rl; align-items: center; border: none; border-left: 2px solid var(--jqx-primary); } .jqx-layout jqx-tab-layout-group[orientation=vertical] { height: 100%; } .jqx-layout jqx-tab-layout-group[orientation=horizontal] { width: 100%; } .jqx-layout jqx-tab-layout-item { overflow: hidden; } .jqx-layout jqx-tab-layout-item > jqx-layout-group { width: 100%; height: 100%; } .jqx-layout .jqx-layout-context-menu { opacity: 1; transform: scale(1); transform-origin: 0; -webkit-transform-origin: 0; position: absolute; background: var(--jqx-background); color: var(--jqx-background-color); box-shadow: var(--jqx-elevation-8); border-radius: var(--jqx-border-radius); width: var(--jqx-layout-context-menu-default-width); height: var(--jqx-layout-context-menu-default-height); z-index: var(--jqx-editor-drop-down-z-index); } .jqx-layout .jqx-layout-context-menu.jqx-visibility-hidden { opacity: 0.2; transform: scale(0); } .jqx-layout .jqx-layout-context-menu > div { width: 100%; padding: 10px; display: flex; align-items: center; justify-content: space-between; overflow: hidden; } .jqx-layout .jqx-layout-context-menu > div:not([disabled]) { cursor: pointer; } .jqx-layout .jqx-layout-context-menu > div[hover] { background-color: var(--jqx-ui-state-hover); border-color: var(--jqx-ui-state-border-hover); color: var(--jqx-ui-state-color-hover); } .jqx-layout .jqx-layout-context-menu > div[disabled] { pointer-events: none; cursor: default; opacity: 0.5; } .jqx-layout .jqx-layout-buttons-container { position: absolute; width: 100px; height: 100px; left: calc(50% - 50px); top: calc(50% - 50px); z-index: 9999; } .jqx-layout .jqx-layout-buttons-container div { position: absolute; display: flex; align-items: center; justify-content: center; color: var(--jqx-primary-color); background: var(--jqx-primary); font-family: var(--jqx-font-family-icon); font-size: var(--jqx-font-size); padding: 5px; left: calc(50% - var(--jqx-editor-addon-width) / 2); width: var(--jqx-editor-addon-width); height: var(--jqx-editor-addon-width); cursor: pointer; border-top-left-radius: var(--jqx-layout-buttons-border-radius); border-top-right-radius: var(--jqx-layout-buttons-border-radius); border-bottom-left-radius: var(--jqx-layout-buttons-border-radius); border-bottom-right-radius: var(--jqx-layout-buttons-border-radius); z-index: 1; touch-action: none; } .jqx-layout .jqx-layout-buttons-container div:after { content: var(--jqx-icon-plus); } .jqx-layout .jqx-layout-buttons-container div:active { color: var(--jqx-ui-state-color-active); border-color: var(--jqx-ui-state-active); background-color: var(--jqx-ui-state-active); opacity: var(--jqx-button-opacity-active); } .jqx-layout .jqx-layout-buttons-container div:hover { color: var(--jqx-ui-state-color-hover); border-color: var(--jqx-ui-state-hover); background-color: var(--jqx-ui-state-hover); opacity: var(--jqx-button-opacity-active); } .jqx-layout .jqx-layout-buttons-container div[position=rotate]:after { content: var(--jqx-icon-reload); } .jqx-layout .jqx-layout-buttons-container div[position=center] { top: calc(50% - var(--jqx-editor-addon-width) / 2); } .jqx-layout .jqx-layout-buttons-container div[position=left] { top: calc(50% - var(--jqx-editor-addon-width) / 2); left: 0; } .jqx-layout .jqx-layout-buttons-container div[position=right] { left: initial; top: calc(50% - var(--jqx-editor-addon-width) / 2); right: 0; } .jqx-layout .jqx-layout-buttons-container div[position=top] { top: 0; } .jqx-layout .jqx-layout-buttons-container div[position=bottom] { bottom: 0; } .jqx-layout .jqx-layout-drop-area { position: absolute; width: 100%; height: 100%; z-index: 99; pointer-events: none; left: 0px; top: 0px; opacity: 0; background: rgba(var(--jqx-primary-rgb), 0.2); transition: opacity 0.2s ease-in-out; } .jqx-layout .jqx-layout-item { height: auto; overflow: hidden; background: var(--jqx-background); border-right: 1px solid var(--jqx-border); border-bottom: 1px solid var(--jqx-border); } .jqx-layout .jqx-layout-item[hover] { overflow: hidden; } .jqx-layout [data-id] { position: relative; } .jqx-layout:not([animation=none]) .jqx-layout-context-menu { transition: opacity 0.2s ease-in, visibility 0.2s ease-in, transform 0.2s ease-in; } .jqx-layout:not([animation=none]) .jqx-layout-buttons-container div:hover, .jqx-layout:not([animation=none]) .jqx-layout-buttons-container div:active { transition: background-color 100ms linear, box-shadow 280ms ease-in-out; } .jqx-layout:not([animation=none]) .jqx-layout-buttons-container div[position=left] { animation: leftRight 0.2s ease-in; } .jqx-layout:not([animation=none]) .jqx-layout-buttons-container div[position=right] { animation: rightLeft 0.2s ease-in; } .jqx-layout:not([animation=none]) .jqx-layout-buttons-container div[position=top] { animation: topBottom 0.2s ease-in; } .jqx-layout *:not([animation=none]) .jqx-layout-buttons-container div[position=bottom] { animation: bottomTop 0.2s ease-in; } .jqx-layout.outline .jqx-layout-splitter { opacity: 1; } .jqx-layout .jqx-layout-splitter { z-index: 999; position: absolute; background: var(--jqx-border); border: 1px solid var(--jqx-border); top: 0px; left: 0px; opacity: 0; transition: opacity 0.2s ease-in-out; } .jqx-layout .jqx-layout-splitter:hover { border-color: var(--jqx-primary); border-style: dashed; } .jqx-layout .jqx-layout-splitter:not([root-splitter]) { transition: opacity 0.2s ease-in-out, width 0.2s ease-in-out, height 0.2s ease-in-out; } .jqx-layout .jqx-layout-splitter.active { background: var(--jqx-primary); border-color: var(--jqx-primary); } .jqx-layout .jqx-layout-splitter.error { background: var(--jqx-error); border-color: var(--jqx-error); } .jqx-layout .jqx-layout-splitter.horizontal { height: 1px; width: 100%; bottom: 0px; top: initial; cursor: s-resize; } .jqx-layout .jqx-layout-splitter.horizontal.last { top: 0px; bottom: initial; display: none; } .jqx-layout .jqx-layout-splitter.vertical { width: 1px; height: 100%; right: 0px; left: initial; cursor: e-resize; } .jqx-layout .jqx-layout-splitter.vertical.last { left: 0px; right: initial; display: none; } .jqx-layout .jqx-layout-splitter[drag].horizontal, .jqx-layout .jqx-layout-splitter[drag].vertical, .jqx-layout .jqx-layout-item[hover] > .jqx-layout-splitter.horizontal, .jqx-layout .jqx-layout-item[hover] > .jqx-layout-splitter.vertical, .jqx-layout .jqx-layout-group[hover] > .jqx-layout-splitter.horizontal, .jqx-layout .jqx-layout-group[hover] > .jqx-layout-splitter.vertical { opacity: 1; z-index: 99; } .jqx-layout-tab { grid-row: 1; display: flex; align-items: center; justify-content: center; min-width: 0; position: relative; overflow: hidden; cursor: pointer; padding: 12px 24px; font-family: var(--jqx-font-family); box-sizing: border-box; transition: background-color 0.2s ease-in-out; } .jqx-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 0.2s ease; transform: perspective(5px) rotateX(2deg); transform-origin: bottom; } .jqx-layout-tab:hover { color: var(--jqx-primary); } .jqx-layout-tab.selected { color: var(--jqx-primary-color); } .jqx-layout-tab.selected:after { background: var(--jqx-primary); } .jqx-layout-tab.selected .jqx-close-button { z-index: 10; color: inherit; } .jqx-layout-tab.selected .jqx-close-button:after { content: var(--jqx-icon-close); width: 16px; height: 16px; cursor: pointer; font-family: var(--jqx-font-family-icon); margin-left: 5px; text-align: center; display: flex; align-items: center; justify-content: center; pointer-events: none; } .jqx-layout-tab label { cursor: pointer; text-overflow: ellipsis; overflow: hidden; z-index: 9; margin-top: 2px; color: inherit; } .jqx-layout-feedback { box-shadow: var(--jqx-elevation-24); background: var(--jqx-background); position: absolute; width: 300px; height: 150px; max-height: 150px; overflow: hidden; left: 0px; top: 0px; pointer-events: none; transform-origin: top left; transform: scale(1); transition: transform 0.25s ease-in-out; } .jqx-layout-feedback.dragging { transform: scale(0.5); } .jqx-layout-overlay { position: absolute; z-index: 999; left: 0; top: 0; width: 100%; height: 100%; opacity: 0.01; background: black; } @keyframes topBottom { 0% { top: calc(-1 * var(--jqx-editor-addon-width)); } 100% { top: 0; } } @keyframes bottomTop { 0% { bottom: calc(-1 * var(--jqx-editor-addon-width)); } 100% { bottom: 0; } } @keyframes leftRight { 0% { left: calc(-1 * var(--jqx-editor-addon-width)); } 100% { left: 0; } } @keyframes rightLeft { 0% { right: calc(-1 * var(--jqx-editor-addon-width)); } 100% { right: 0; } } @charset "UTF-8"; /* Error and Success styles */ .jqx-validation-error:not(jqx-check-box) > div.jqx-container:after, .jqx-validation-success:not(jqx-check-box) > div.jqx-container:after { pointer-events: none; font-weight: bold; font-family: var(--jqx-font-family); font-size: var(--jqx-font-size); width: 20px; height: 20px; border-radius: 50%; display: flex; text-align: center; justify-content: center; align-items: center; } .jqx-validation-error:not(.underlined):not(.outlined) { border-color: var(--jqx-error) !important; outline: none; } .jqx-validation-error:not(.underlined):not(.outlined) input, .jqx-validation-error:not(.underlined):not(.outlined) span { border-color: var(--jqx-error) !important; outline: none; } .jqx-validation-error:not(jqx-check-box) > div.jqx-container:after { background-color: var(--jqx-error); color: var(--jqx-error-color); content: "!"; position: absolute; top: 50%; left: calc(100% + 20px); transform: translate(-50%, -50%); } .jqx-validation-error.jqx-element:not(.outlined):not(.underlined) .jqx-hint::after { background-color: var(--jqx-error); } .jqx-validation-success:not(jqx-check-box) > div.jqx-container:after { background-color: var(--jqx-success); color: var(--jqx-success-color); content: "✓"; position: absolute; top: 50%; left: calc(100% + 20px); transform: translate(-50%, -50%); } .jqx-validation-success.jqx-element:not(.outlined):not(.underlined) .jqx-hint::after { background-color: var(--jqx-success); } input[type=checkbox].jqx-validation-error, input[type=radio].jqx-validation-error { outline: auto; outline-color: var(--jqx-error); } input.jqx-validation-error { border-style: solid; border-width: 1px; } .jqx-success-label-like-after-element:after, .jqx-error-label-like-after-element:after { pointer-events: none; font-weight: bold; font-family: var(--jqx-font-family); font-size: var(--jqx-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%); } .jqx-success-label-like-after-element { position: relative; } .jqx-success-label-like-after-element:after { background-color: var(--jqx-success); color: var(--jqx-success-color); content: "✓"; } .jqx-error-label-like-after-element { position: relative; } .jqx-error-label-like-after-element:after { background-color: var(--jqx-error); color: var(--jqx-error-color); content: "!"; } .jqx-validation-summary { font-family: var(--jqx-font-family); font-size: var(--jqx-font-size); color: var(--jqx-error); } .jqx-validation-summary span { display: block; margin-top: 5px; } .jqx-error-holder { position: absolute; font-family: var(--jqx-font-family); font-size: var(--jqx-font-size); background-color: var(--jqx-error); color: var(--jqx-error-color); padding: 10px; pointer-events: none; z-index: var(--jqx-editor-drop-down-z-index); margin-top: 10px; } .jqx-error-holder.jqx-error-hint-position-right { white-space: nowrap; } /* Pending state - an asynchronous or remote rule has not resolved yet */ @keyframes jqx-validation-pending-spin { to { transform: rotate(360deg); } } .jqx-validation-pending:not(jqx-check-box) > div.jqx-container:after { pointer-events: none; content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--jqx-border); border-top-color: var(--jqx-primary); animation: jqx-validation-pending-spin 0.7s linear infinite; box-sizing: border-box; } .jqx-3d-chart-legend-item-color { width: 13px; height: 13px; margin-right: 5px; cursor: pointer; border: 3px solid; } .jqx-3d-chart-legend-item-hidden > .jqx-3d-chart-legend-item-color { background-color: #fff !important; } .jqx-3d-chart-legend-item-label { font-size: 12px; font-weight: bold; } .jqx-3d-chart-legend { position: absolute; display: flex; justify-content: center; flex-wrap: wrap; z-index: 2; } .jqx-3d-chart-footer{ border: 1px solid var(--jqx-border); } .jqx-3d-chart-range-selector-container{ position: relative; width: 95%; height: 100px; border: 1px solid var(--jqx-border); } .jqx-3d-chart-range-selector{ position: relative; width: 100%; height: 80%; } .jqx-3d-chart-range-selector-rect{ position: absolute; background: blue; opacity: 0.1; top: 0; width: 95%; height: 100%; cursor: move; } .jqx-3d-chart-range-selector-slider{ position: absolute; top: 0; width: 6px; height: 100%; cursor: e-resize; } .jqx-3d-chart-range-selector-slider:before{ content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 1px; background: var(--jqx-border) } .jqx-3d-chart-range-selector-slider:after{ content: ""; position: absolute; top: 50%; transform: translateY(-50%); left: -3px; height: 30%; width: 100%; border: 1px solid var(--jqx-border); border-radius: 4px; background: white; } .jqx-3d-chart-legend-table{ table-layout: fixed } .jqx-3d-chart-legend-table-header-cell{ height: 55px; border-bottom: 1px solid var(--jqx-border); text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } td.jqx-3d-chart-legend-table-body-cell:first-child{ text-align: left; border-right: 1px solid var(--jqx-border); text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } td.jqx-3d-chart-legend-table-body-cell{ text-align: center; padding: 0 5px; } td.jqx-3d-chart-legend-table-body-cell:last-child{ min-width: 40px; } .jqx-3d-chart-legend-table-body-cell-flex{ display: flex; justify-content: center; } .jqx-3d-chart-legend-table .jqx-3d-chart-legend-item{ width: 100%; justify-content: center; margin: 8px 2px; } .jqx-3d-chart-legend-table .jqx-3d-chart-legend-item-color{ max-width: 20px; width: 100%; height: 20px; } .jqx-3d-chart-legend-table thead th:not(:first-child) div.wrapper { justify-content: center; } .jqx-3d-chart-legend-column { display: flex; } .jqx-3d-chart-legend-item { display: flex; margin: 8px; -webkit-user-select: none; user-select: none; } .jqx-3d-chart-tooltip { position: fixed; display: none; background-color: var(--jqx-background); color: var(--jqx-background-color); opacity: 0.8; border-radius: 5px; border: 2px solid black; padding: 3px; z-index: 2; max-width: 165px; } .jqx-3d-chart-caption { width: 100%; padding: 10px; position: absolute; text-align: center; z-index: 2; margin: auto; } .jqx-3d-chart-label { font-size: 15px; color: var(--jqx-background-color); background-color: none; } .jqx-3d-chart-value-axis-label, .jqx-3d-chart-x-axis-label, .jqx-3d-chart-z-axis-label{ color: var(--jqx-background-color); font-weight: 550; padding: 0; } .jqx-3d-chart-container { position: relative; } .jqx-3d-chart-hover { cursor: pointer; } .jqx-3d-chart-tooltip-heading{ font-weight: bold; } .jqx-3d-chart { display: block; position: relative; width: 800px; height: 400px; border: 1px solid var(--jqx-border); } jqx-3d-chart .jqx-3d-chart-controls{ height: fit-content; width: 100%; display: flex; justify-content: right; align-items: center; position: absolute; z-index: 3; opacity: 0; transition: opacity .25s ease-in-out; padding: 5px 20px; } .jqx-3d-chart-controls > .jqx-3d-chart-control{ margin-left: 20px; } jqx-3d-chart:hover .jqx-3d-chart-controls{ opacity: 1; } .jqx-3d-chart-control-button{ cursor: pointer; font-size: 17px; } .jqx-3d-chart-control-button:after{ opacity: 0.7; position: relative; top: 20%; } .jqx-3d-chart-control-button:hover:after{ opacity: 1; } .jqx-3d-chart-control-button[selected]:after{ opacity: 1; } .jqx-3d-chart-control-zoom-in:after{ content: var(--jqx-icon-zoom-in); font-family: var(--jqx-font-family-icon); } .jqx-3d-chart-control-zoom-out:after{ content: var(--jqx-icon-zoom-out); font-family: var(--jqx-font-family-icon); } .jqx-3d-chart-control-camera-mode:after{ content: var(--jqx-icon-video-camera); font-family: var(--jqx-font-family-icon); } .jqx-3d-chart-control-pan-mode:after{ content: var(--jqx-icon-move); font-family: var(--jqx-font-family-icon); } .jqx-3d-chart-control-zoom-mode:after{ content: var(--jqx-icon-zoom-in); font-family: var(--jqx-font-family-icon); } .jqx-3d-chart-control-reset-camera:after{ content: var(--jqx-icon-home); font-family: var(--jqx-font-family-icon); } .jqx-3d-chart-control-save-image:after{ content: var(--jqx-icon-download-alt); font-family: var(--jqx-font-family-icon); } .jqx-3d-chart-control-drop-down-list{ width: 150px; } .jqx-3d-chart-control-drop-down-list .jqx-3d-chart-control-list-item{ margin-right: 5px; } /* jqx-element */ .jqx-container { box-sizing: border-box; font-family: inherit; font-size: inherit; display: block; width: 100%; height: 100%; outline: none; margin: 0; padding: 0; } .jqx-container * { box-sizing: border-box; } .jqx-popup, .jqx-drop-down { position: absolute; box-sizing: border-box; margin: var(--jqx-editor-drop-down-vertical-offset) 0px; z-index: var(--jqx-editor-drop-down-z-index); list-style-type: none; } @font-face { font-family: jqx-icons; src: local("../font/jqx-icons"), url("font/jqx-icons.woff2") format("woff2"), url("font/jqx-icons.woff") format("woff"), url("font/jqx-icons.ttf") format("truetype"), url("font/jqx-icons.eot") format("embedded-opentype"); font-weight: normal; font-style: normal; } .jqx-arrow { width: 100%; height: 100%; background-position: center; background-repeat: no-repeat; background-size: 1em 1em; } .jqx-arrow-up:after, .jqx-arrow-down:after, .jqx-arrow-left:after, .jqx-arrow-right:after, .jqx-arrow-left-first:after, .jqx-arrow-right-last:after { width: 100%; height: 100%; font-family: var(--jqx-font-family-icon); font-style: normal; font-weight: normal; font-size: var(--jqx-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; } .jqx-arrow-up:after { content: var(--jqx-icon-arrow-up); top: -1px; } .jqx-arrow-down:after { content: var(--jqx-icon-arrow-down); } .jqx-arrow-left:after { content: var(--jqx-icon-arrow-left); } .jqx-arrow-left-first:after { content: var(--jqx-icon-first-page); } .jqx-arrow-right-last:after { content: var(--jqx-icon-last-page); } .jqx-arrow-right:after { content: var(--jqx-icon-arrow-right); } .drawContainer { width: 100%; height: 100%; position: relative; } .jqx-ripple { display: block; position: absolute; border-radius: 50%; transform: scale(0); pointer-events: none; animation: ripple 0.35s linear; border: none; opacity: 0.5; } .jqx-ripple.jqx-animate { animation: ripple 0.65s linear; position: absolute; } @keyframes ripple { 100% { opacity: 0; transform: scale(2.5); /*scale the element to 250% to safely cover the entire link and fade it out*/ } } .jqx-overlay { pointer-events: none; } .jqx-unselectable { -webkit-user-select: none; -ms-user-select: none; -moz-user-select: none; } .jqx-hidden, .jqx-collapse { display: none !important; } .jqx-visibility-hidden { visibility: hidden !important; } .jqx-element-init { visibility: hidden; } .jqx-element-ready { overflow: hidden; } .jqx-shown { display: block; } .jqx-resize-trigger { position: absolute; left: 0; top: 0; transition: 0s; } .jqx-resize-trigger-shrink { position: absolute; left: 0; top: 0; transition: 0s; width: 200%; height: 200%; } .jqx-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; } jqx-grid .jqx-loader, jqx-list-box .jqx-loader, jqx-list-menu .jqx-loader, .jqx-list-menu-view.jqx-drop-down-repositioned .jqx-loader, jqx-tree .jqx-loader, jqx-card-view .jqx-loader, jqx-table .jqx-loader { margin: inherit; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0.85; text-align: left; border: 6px solid rgba(43, 51, 63, 0.1); box-sizing: border-box; background-clip: padding-box; border-radius: 50%; z-index: 10; width: calc(var(--jqx-loader-size) + 10px); height: calc(var(--jqx-loader-size) + 10px); } jqx-grid .jqx-loader:before, jqx-grid .jqx-loader:after, jqx-list-box .jqx-loader:before, jqx-list-box .jqx-loader:after, jqx-list-menu .jqx-loader:before, jqx-list-menu .jqx-loader:after, .jqx-list-menu-view.jqx-drop-down-repositioned .jqx-loader:before, .jqx-list-menu-view.jqx-drop-down-repositioned .jqx-loader:after, jqx-tree .jqx-loader:before, jqx-tree .jqx-loader:after, jqx-card-view .jqx-loader:before, jqx-card-view .jqx-loader:after, jqx-table .jqx-loader:before, jqx-table .jqx-loader:after { content: ""; position: absolute; margin: -6px; box-sizing: inherit; width: inherit; height: inherit; border-radius: inherit; opacity: 1; border: 6px solid transparent; animation-delay: 0.44s; animation: jqx-loader-spin 1.1s cubic-bezier(0.6, 0.2, 0, 0.8) infinite, jqx-loader-spin-fade 1.1s linear infinite; } jqx-grid .jqx-loader.jqx-hidden, jqx-list-box .jqx-loader.jqx-hidden, jqx-list-menu .jqx-loader.jqx-hidden, .jqx-list-menu-view.jqx-drop-down-repositioned .jqx-loader.jqx-hidden, jqx-tree .jqx-loader.jqx-hidden, jqx-card-view .jqx-loader.jqx-hidden, jqx-table .jqx-loader.jqx-hidden { display: none; } jqx-grid[loading-indicator-position=top] .jqx-loader, jqx-grid[loading-indicator-position=bottom] .jqx-loader, jqx-list-box[loading-indicator-position=top] .jqx-loader, jqx-list-box[loading-indicator-position=bottom] .jqx-loader, jqx-list-menu[loading-indicator-position=top] .jqx-loader, jqx-list-menu[loading-indicator-position=bottom] .jqx-loader, .jqx-list-menu-view.jqx-drop-down-repositioned[loading-indicator-position=top] .jqx-loader, .jqx-list-menu-view.jqx-drop-down-repositioned[loading-indicator-position=bottom] .jqx-loader, jqx-tree[loading-indicator-position=top] .jqx-loader, jqx-tree[loading-indicator-position=bottom] .jqx-loader { width: var(--jqx-loader-size); height: var(--jqx-loader-size); left: 20%; } jqx-grid[loading-indicator-position=top] .jqx-loader-container, jqx-grid[loading-indicator-position=bottom] .jqx-loader-container, jqx-list-box[loading-indicator-position=top] .jqx-loader-container, jqx-list-box[loading-indicator-position=bottom] .jqx-loader-container, jqx-list-menu[loading-indicator-position=top] .jqx-loader-container, jqx-list-menu[loading-indicator-position=bottom] .jqx-loader-container, .jqx-list-menu-view.jqx-drop-down-repositioned[loading-indicator-position=top] .jqx-loader-container, .jqx-list-menu-view.jqx-drop-down-repositioned[loading-indicator-position=bottom] .jqx-loader-container, jqx-tree[loading-indicator-position=top] .jqx-loader-container, jqx-tree[loading-indicator-position=bottom] .jqx-loader-container { display: block; position: relative; width: 100%; height: 10%; background-color: #F2F2F2; overflow: hidden; animation: jqx-loader-container-pop-up-down 0.3s linear; } jqx-grid[loading-indicator-position=top] .jqx-loader-container.jqx-hidden, jqx-grid[loading-indicator-position=bottom] .jqx-loader-container.jqx-hidden, jqx-list-box[loading-indicator-position=top] .jqx-loader-container.jqx-hidden, jqx-list-box[loading-indicator-position=bottom] .jqx-loader-container.jqx-hidden, jqx-list-menu[loading-indicator-position=top] .jqx-loader-container.jqx-hidden, jqx-list-menu[loading-indicator-position=bottom] .jqx-loader-container.jqx-hidden, .jqx-list-menu-view.jqx-drop-down-repositioned[loading-indicator-position=top] .jqx-loader-container.jqx-hidden, .jqx-list-menu-view.jqx-drop-down-repositioned[loading-indicator-position=bottom] .jqx-loader-container.jqx-hidden, jqx-tree[loading-indicator-position=top] .jqx-loader-container.jqx-hidden, jqx-tree[loading-indicator-position=bottom] .jqx-loader-container.jqx-hidden { display: none; } jqx-grid[loading-indicator-position=top] .jqx-loader-label, jqx-grid[loading-indicator-position=bottom] .jqx-loader-label, jqx-list-box[loading-indicator-position=top] .jqx-loader-label, jqx-list-box[loading-indicator-position=bottom] .jqx-loader-label, jqx-list-menu[loading-indicator-position=top] .jqx-loader-label, jqx-list-menu[loading-indicator-position=bottom] .jqx-loader-label, .jqx-list-menu-view.jqx-drop-down-repositioned[loading-indicator-position=top] .jqx-loader-label, .jqx-list-menu-view.jqx-drop-down-repositioned[loading-indicator-position=bottom] .jqx-loader-label, jqx-tree[loading-indicator-position=top] .jqx-loader-label, jqx-tree[loading-indicator-position=bottom] .jqx-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; } jqx-grid[loading-indicator-position=top] .jqx-loader-container, jqx-list-box[loading-indicator-position=top] .jqx-loader-container, jqx-list-menu[loading-indicator-position=top] .jqx-loader-container, .jqx-list-menu-view.jqx-drop-down-repositioned[loading-indicator-position=top] .jqx-loader-container, jqx-tree[loading-indicator-position=top] .jqx-loader-container { top: 0; position: absolute; animation: jqx-loader-container-pop-up-top 0.3s linear; } jqx-grid[loading-indicator-position=bottom] .jqx-loader-container, jqx-list-box[loading-indicator-position=bottom] .jqx-loader-container, jqx-list-menu[loading-indicator-position=bottom] .jqx-loader-container, .jqx-list-menu-view.jqx-drop-down-repositioned[loading-indicator-position=bottom] .jqx-loader-container, jqx-tree[loading-indicator-position=bottom] .jqx-loader-container { top: -10%; } jqx-grid[loading-indicator-position=center] .jqx-loader, jqx-list-box[loading-indicator-position=center] .jqx-loader, jqx-list-menu[loading-indicator-position=center] .jqx-loader, .jqx-list-menu-view.jqx-drop-down-repositioned[loading-indicator-position=center] .jqx-loader, jqx-tree[loading-indicator-position=center] .jqx-loader { width: calc(var(--jqx-loader-size) + 10px); height: calc(var(--jqx-loader-size) + 10px); } jqx-grid[disabled] .jqx-loader:before, jqx-grid[disabled] .jqx-loader:after, jqx-list-box[disabled] .jqx-loader:before, jqx-list-box[disabled] .jqx-loader:after, jqx-list-menu[disabled] .jqx-loader:before, jqx-list-menu[disabled] .jqx-loader:after, jqx-tree[disabled] .jqx-loader:before, jqx-tree[disabled] .jqx-loader:after { animation: none; } @keyframes jqx-loader-container-pop-up-down { 0% { top: 0; } 20% { top: -2%; } 35% { top: -6%; } 60% { top: -8%; } 100% { top: -10%; } } @keyframes jqx-loader-container-pop-up-top { 0% { top: -10%; } 20% { top: -8%; } 35% { top: -6%; } 60% { top: -2%; } 100% { top: 0; } } @keyframes jqx-loader-spin { 100% { transform: rotate(360deg); } } @keyframes jqx-loader-spin-fade { 0% { border-top-color: #7A7A7A; } 20% { border-top-color: #7A7A7A; } 35% { border-top-color: transparent; } 60% { border-top-color: #7A7A7A; } 100% { border-top-color: #7A7A7A; } } .jqx-right-to-left { direction: rtl; } .jqx-micro { font-size: 9px; } .jqx-small { font-size: 12px; } .jqx-caps { text-transform: uppercase; letter-spacing: 0.1em; } .jqx-strong { font-weight: 500; } .jqx-truncate { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .jqx-quiet { opacity: 0.75; } .jqx-flex { display: flex; } .jqx-flex.middle { align-content: center; justify-content: center; } .jqx-flex.center { align-items: center; justify-items: center; } .jqx-flex-wrap { display: flex; flex-wrap: wrap; } .jqx-dragging, .jqx-dragging * { cursor: move !important; } .jqx-element { direction: ltr; } .jqx-element ::-webkit-scrollbar { width: 18px; } .jqx-element ::-webkit-scrollbar-track { background-color: transparent; } .jqx-element ::-webkit-scrollbar-thumb { background-color: var(--jqx-scroll-bar-thumb-background); border-radius: 20px; border: 6px solid transparent; background-clip: content-box; } .jqx-element ::-webkit-scrollbar-thumb:hover { background-color: var(--jqx-scroll-bar-thumb-background-hover); }