@iress-oss/ids-mcp-server 6.0.0-alpha.0 → 6.0.0-alpha.1-canary-20251204014525-3f0dce4

package/generated/docs/components-table-ag-grid-docs.md

@@ -1,1444 +0,0 @@
-[](#ag-grid)AG Grid
-===================
-
-Overview
---------
-
-AG Grid is the preferred solution for complex tables.
-
-* * *
-
-Updated
-
-**Recently updated**
-
-This component has been recently updated with new props. The props have been marked as beta. Please tell us if there are any issues.
-
-.ag-cell.iress--positive, .ag-cell .iress--positive, .iress--positive .ag-cell { color: var(--iress-colour-system-success-text, #015537); }
-
-:where(.ag-theme-params-2) { --ag-accent-color: var(--ag-inherited-accent-color, var(--iress-colour-primary-fill, #13213F)); --ag-advanced-filter-builder-button-bar-border: var(--ag-inherited-advanced-filter-builder-button-bar-border, solid 1px var(--ag-border-color)); --ag-advanced-filter-builder-column-pill-color: var(--ag-inherited-advanced-filter-builder-column-pill-color, #a6e194); --ag-advanced-filter-builder-indent-size: var(--ag-inherited-advanced-filter-builder-indent-size, calc( var(--ag-spacing) \* 2 + var(--ag-icon-size) )); --ag-advanced-filter-builder-join-pill-color: var(--ag-inherited-advanced-filter-builder-join-pill-color, #f08e8d); --ag-advanced-filter-builder-option-pill-color: var(--ag-inherited-advanced-filter-builder-option-pill-color, #f3c08b); --ag-advanced-filter-builder-value-pill-color: var(--ag-inherited-advanced-filter-builder-value-pill-color, #85c0e4); --ag-background-color: var(--ag-inherited-background-color, var(--iress-colour-neutral-10, #FFFFFF)); --ag-border-color: var(--ag-inherited-border-color, var(--iress-colour-neutral-30, #E4E5E7)); --ag-border-radius: var(--ag-inherited-border-radius, var(--iress-radius-system-layout, var(--iress-radius-100, 1rem) var(--iress-radius-100, 1rem) var(--iress-radius-100, 1rem) var(--iress-radius-100, 1rem))); --ag-browser-color-scheme: var(--ag-inherited-browser-color-scheme, light); --ag-button-active-background-color: var(--ag-inherited-button-active-background-color, var(--ag-accent-color)); --ag-button-active-border: var(--ag-inherited-button-active-border, var(--ag-button-hover-border)); --ag-button-active-text-color: var(--ag-inherited-button-active-text-color, var(--ag-background-color)); --ag-button-background-color: var(--ag-inherited-button-background-color, var(--iress-colour-primary-surface, #D9E5FF)); --ag-button-border: var(--ag-inherited-button-border, solid 1px var(--iress-colour-primary-surface, #D9E5FF)); --ag-button-border-radius: var(--ag-inherited-button-border-radius, var(--iress-radius-system-button, var(--iress-radius-075, calc(0.75 \* 1rem)) var(--iress-radius-075, calc(0.75 \* 1rem)) var(--iress-radius-075, calc(0.75 \* 1rem)) var(--iress-radius-075, calc(0.75 \* 1rem)))); --ag-button-disabled-background-color: var(--ag-inherited-button-disabled-background-color, var(--ag-input-disabled-background-color)); --ag-button-disabled-border: var(--ag-inherited-button-disabled-border, var(--ag-input-disabled-border)); --ag-button-disabled-text-color: var(--ag-inherited-button-disabled-text-color, var(--ag-input-disabled-text-color)); --ag-button-font-weight: var(--ag-inherited-button-font-weight, 600); --ag-button-horizontal-padding: var(--ag-inherited-button-horizontal-padding, calc( var(--ag-spacing) \* 2)); --ag-button-hover-background-color: var(--ag-inherited-button-hover-background-color, var(--ag-row-hover-color)); --ag-button-hover-border: var(--ag-inherited-button-hover-border, var(--ag-button-border)); --ag-button-hover-text-color: var(--ag-inherited-button-hover-text-color, var(--ag-button-text-color)); --ag-button-text-color: var(--ag-inherited-button-text-color, var(--iress-colour-primary-text, #13213F)); --ag-button-vertical-padding: var(--ag-inherited-button-vertical-padding, var(--ag-spacing)); --ag-card-shadow: var(--ag-inherited-card-shadow, var(--iress-elevation-raised-shadow, 0px 3px 5px #091E4220)); --ag-cell-editing-border: var(--ag-inherited-cell-editing-border, solid 1px var(--ag-accent-color)); --ag-cell-editing-shadow: var(--ag-inherited-cell-editing-shadow, var(--ag-card-shadow)); --ag-cell-font-family: var(--ag-inherited-cell-font-family, var(--iress-typography-base-body-font, Inter, Helvetica, sans-serif)); --ag-cell-horizontal-padding: var(--ag-inherited-cell-horizontal-padding, calc( var(--ag-spacing) \* 2 \* var(--ag-cell-horizontal-padding-scale) )); --ag-cell-horizontal-padding-scale: var(--ag-inherited-cell-horizontal-padding-scale, 1); --ag-cell-text-color: var(--ag-inherited-cell-text-color, var(--ag-text-color)); --ag-cell-widget-spacing: var(--ag-inherited-cell-widget-spacing, calc( var(--ag-spacing) \* 1.5)); --ag-chart-menu-label-color: var(--ag-inherited-chart-menu-label-color, color-mix(in srgb, transparent, var(--ag-foreground-color) 80%)); --ag-chart-menu-panel-width: var(--ag-inherited-chart-menu-panel-width, 260px); --ag-checkbox-border-radius: var(--ag-inherited-checkbox-border-radius, var(--iress-radius-system-badge, var(--iress-radius-025, calc(0.25 \* 1rem)) var(--iress-radius-025, calc(0.25 \* 1rem)) var(--iress-radius-025, calc(0.25 \* 1rem)) var(--iress-radius-025, calc(0.25 \* 1rem)))); --ag-checkbox-border-width: var(--ag-inherited-checkbox-border-width, 1px); --ag-checkbox-checked-background-color: var(--ag-inherited-checkbox-checked-background-color, var(--iress-colour-primary-fill, #13213F)); --ag-checkbox-checked-border-color: var(--ag-inherited-checkbox-checked-border-color, var(--iress-colour-primary-fill, #13213F)); --ag-checkbox-checked-shape-color: var(--ag-inherited-checkbox-checked-shape-color, var(--iress-colour-primary-on-fill, #ECF2FF)); --ag-checkbox-checked-shape-image: var(--ag-inherited-checkbox-checked-shape-image, url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%227%22%20fill%3D%22none%22%3E%3Cpath%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.75%22%20d%3D%22M1%203.5%203.5%206l5-5%22%2F%3E%3C%2Fsvg%3E")); --ag-checkbox-indeterminate-background-color: var(--ag-inherited-checkbox-indeterminate-background-color, var(--iress-colour-primary-fill, #13213F)); --ag-checkbox-indeterminate-border-color: var(--ag-inherited-checkbox-indeterminate-border-color, var(--iress-colour-primary-fill, #13213F)); --ag-checkbox-indeterminate-shape-color: var(--ag-inherited-checkbox-indeterminate-shape-color, var(--iress-colour-primary-on-fill, #ECF2FF)); --ag-checkbox-indeterminate-shape-image: var(--ag-inherited-checkbox-indeterminate-shape-image, url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%222%22%20fill%3D%22none%22%3E%3Crect%20width%3D%2210%22%20height%3D%222%22%20fill%3D%22%23000%22%20rx%3D%221%22%2F%3E%3C%2Fsvg%3E")); --ag-checkbox-unchecked-background-color: var(--ag-inherited-checkbox-unchecked-background-color, var(--iress-colour-neutral-10, #FFFFFF)); --ag-checkbox-unchecked-border-color: var(--ag-inherited-checkbox-unchecked-border-color, var(--iress-colour-neutral-70, #6D7278)); --ag-chrome-background-color: var(--ag-inherited-chrome-background-color, color-mix(in srgb, var(--ag-background-color), var(--ag-foreground-color) 2%)); --ag-column-border: var(--ag-inherited-column-border, solid 1px transparent); --ag-column-drop-cell-background-color: var(--ag-inherited-column-drop-cell-background-color, color-mix(in srgb, transparent, var(--ag-foreground-color) 7.000000000000001%)); --ag-column-drop-cell-border: var(--ag-inherited-column-drop-cell-border, solid 1px color-mix(in srgb, transparent, var(--ag-foreground-color) 13%)); --ag-column-drop-cell-drag-handle-color: var(--ag-inherited-column-drop-cell-drag-handle-color, var(--ag-text-color)); --ag-column-drop-cell-text-color: var(--ag-inherited-column-drop-cell-text-color, var(--ag-text-color)); --ag-column-hover-color: var(--ag-inherited-column-hover-color, var(--iress-colour-neutral-20, #F9F9F9)); --ag-column-select-indent-size: var(--ag-inherited-column-select-indent-size, var(--ag-icon-size)); --ag-data-font-size: var(--ag-inherited-data-font-size, var(--iress-typography-base-size, .875rem)); --ag-dialog-border: var(--ag-inherited-dialog-border, solid 1px color-mix(in srgb, transparent, var(--ag-foreground-color) 20%)); --ag-dialog-shadow: var(--ag-inherited-dialog-shadow, var(--iress-elevation-floating-shadow, 0px 10px 18px #091E4215)); --ag-drag-and-drop-image-background-color: var(--ag-inherited-drag-and-drop-image-background-color, var(--ag-background-color)); --ag-drag-and-drop-image-border: var(--ag-inherited-drag-and-drop-image-border, solid 1px var(--ag-border-color)); --ag-drag-and-drop-image-shadow: var(--ag-inherited-drag-and-drop-image-shadow, var(--iress-elevation-focus-shadow, 0px 0px 0px 1.5px var(--iress-colour-neutral-10, #FFFFFF), 0px 0px 0px 3.5px #0066FF)); --ag-drag-handle-color: var(--ag-inherited-drag-handle-color, color-mix(in srgb, transparent, var(--ag-foreground-color) 70%)); --ag-dropdown-shadow: var(--ag-inherited-dropdown-shadow, var(--iress-elevation-floating-shadow, 0px 10px 18px #091E4215)); --ag-filter-tool-panel-group-indent: var(--ag-inherited-filter-tool-panel-group-indent, var(--ag-spacing)); --ag-find-active-match-background-color: var(--ag-inherited-find-active-match-background-color, #ffa500); --ag-find-active-match-color: var(--ag-inherited-find-active-match-color, var(--ag-foreground-color)); --ag-find-match-background-color: var(--ag-inherited-find-match-background-color, #ffff00); --ag-find-match-color: var(--ag-inherited-find-match-color, var(--ag-foreground-color)); --ag-focus-shadow: var(--ag-inherited-focus-shadow, var(--iress-elevation-focus-shadow, 0px 0px 0px 1.5px var(--iress-colour-neutral-10, #FFFFFF), 0px 0px 0px 3.5px #0066FF)); --ag-font-family: var(--ag-inherited-font-family, var(--iress-typography-base-body-font, Inter, Helvetica, sans-serif)); --ag-font-size: var(--ag-inherited-font-size, var(--iress-typography-base-size, .875rem)); --ag-footer-row-border: var(--ag-inherited-footer-row-border, var(--ag-row-border)); --ag-foreground-color: var(--ag-inherited-foreground-color, var(--iress-colour-neutral-80, #393F46)); --ag-header-background-color: var(--ag-inherited-header-background-color, var(--iress-colour-neutral-10, #FFFFFF)); --ag-header-cell-background-transition-duration: var(--ag-inherited-header-cell-background-transition-duration, 0.2s); --ag-header-cell-hover-background-color: var(--ag-inherited-header-cell-hover-background-color, transparent); --ag-header-cell-moving-background-color: var(--ag-inherited-header-cell-moving-background-color, var(--ag-header-cell-hover-background-color)); --ag-header-column-border: var(--ag-inherited-header-column-border, none); --ag-header-column-border-height: var(--ag-inherited-header-column-border-height, 100%); --ag-header-column-resize-handle-color: var(--ag-inherited-header-column-resize-handle-color, var(--ag-border-color)); --ag-header-column-resize-handle-height: var(--ag-inherited-header-column-resize-handle-height, 30%); --ag-header-column-resize-handle-width: var(--ag-inherited-header-column-resize-handle-width, 2px); --ag-header-font-family: var(--ag-inherited-header-font-family, var(--iress-typography-base-body-font, Inter, Helvetica, sans-serif)); --ag-header-font-size: var(--ag-inherited-header-font-size, var(--ag-font-size)); --ag-header-font-weight: var(--ag-inherited-header-font-weight, 700); --ag-header-height: var(--ag-inherited-header-height, calc(max( var(--ag-icon-size) , var(--ag-data-font-size) ) + var(--ag-spacing) \* 4 \* var(--ag-header-vertical-padding-scale) )); --ag-header-row-border: var(--ag-inherited-header-row-border, solid 1px var(--iress-colour-neutral-40, #D7D8DA)); --ag-header-text-color: var(--ag-inherited-header-text-color, var(--ag-text-color)); --ag-header-vertical-padding-scale: var(--ag-inherited-header-vertical-padding-scale, 1); --ag-icon-button-active-background-color: var(--ag-inherited-icon-button-active-background-color, transparent); --ag-icon-button-active-color: var(--ag-inherited-icon-button-active-color, var(--ag-accent-color)); --ag-icon-button-active-indicator-color: var(--ag-inherited-icon-button-active-indicator-color, var(--ag-accent-color)); --ag-icon-button-background-color: var(--ag-inherited-icon-button-background-color, transparent); --ag-icon-button-background-spread: var(--ag-inherited-icon-button-background-spread, 4px); --ag-icon-button-border-radius: var(--ag-inherited-icon-button-border-radius, 1px); --ag-icon-button-color: var(--ag-inherited-icon-button-color, var(--ag-icon-color)); --ag-icon-button-hover-background-color: var(--ag-inherited-icon-button-hover-background-color, transparent); --ag-icon-button-hover-color: var(--ag-inherited-icon-button-hover-color, var(--ag-accent-color)); --ag-icon-color: var(--ag-inherited-icon-color, inherit); --ag-icon-size: var(--ag-inherited-icon-size, 16px); --ag-input-background-color: var(--ag-inherited-input-background-color, var(--ag-background-color)); --ag-input-border: var(--ag-inherited-input-border, solid 1px var(--iress-colour-neutral-70, #6D7278)); --ag-input-border-radius: var(--ag-inherited-input-border-radius, var(--iress-radius-system-form, var(--iress-radius-050, calc(0.5 \* 1rem)) var(--iress-radius-050, calc(0.5 \* 1rem)) var(--iress-radius-050, calc(0.5 \* 1rem)) var(--iress-radius-050, calc(0.5 \* 1rem)))); --ag-input-disabled-background-color: var(--ag-inherited-input-disabled-background-color, var(--iress-colour-neutral-20, #F9F9F9)); --ag-input-disabled-border: var(--ag-inherited-input-disabled-border, solid 1px var(--iress-colour-neutral-40, #D7D8DA)); --ag-input-disabled-text-color: var(--ag-inherited-input-disabled-text-color, var(--iress-colour-neutral-60, #878B92)); --ag-input-focus-background-color: var(--ag-inherited-input-focus-background-color, var(--ag-input-background-color)); --ag-input-focus-border: var(--ag-inherited-input-focus-border, solid 1px color-mix(in srgb, transparent, var(--ag-accent-color) 40%)); --ag-input-focus-shadow: var(--ag-inherited-input-focus-shadow, var(--iress-elevation-focus-shadow, 0px 0px 0px 1.5px var(--iress-colour-neutral-10, #FFFFFF), 0px 0px 0px 3.5px #0066FF)); --ag-input-focus-text-color: var(--ag-inherited-input-focus-text-color, var(--ag-input-text-color)); --ag-input-height: var(--ag-inherited-input-height, calc(max( var(--ag-icon-size) , var(--ag-font-size) ) + var(--ag-spacing) \* 2)); --ag-input-icon-color: var(--ag-inherited-input-icon-color, var(--iress-colour-neutral-70, #6D7278)); --ag-input-invalid-background-color: var(--ag-inherited-input-invalid-background-color, var(--iress-colour-system-danger-surface, #FEE8E7)); --ag-input-invalid-border: var(--ag-inherited-input-invalid-border, var(--iress-colour-system-danger-fill, #C20A0A)); --ag-input-invalid-text-color: var(--ag-inherited-input-invalid-text-color, var(--iress-colour-system-danger-text, #970202)); --ag-input-padding-start: var(--ag-inherited-input-padding-start, var(--ag-spacing)); --ag-input-placeholder-text-color: var(--ag-inherited-input-placeholder-text-color, color-mix(in srgb, transparent, var(--ag-input-text-color) 50%)); --ag-input-text-color: var(--ag-inherited-input-text-color, var(--iress-colour-neutral-80, #393F46)); --ag-invalid-color: var(--ag-inherited-invalid-color, var(--iress-colour-system-danger-fill, #C20A0A)); --ag-list-item-height: var(--ag-inherited-list-item-height, calc(max( var(--ag-icon-size) , var(--ag-data-font-size) ) + var(--ag-widget-vertical-spacing) )); --ag-menu-background-color: var(--ag-inherited-menu-background-color, color-mix(in srgb, var(--ag-background-color), var(--ag-foreground-color) 3%)); --ag-menu-border: var(--ag-inherited-menu-border, solid 1px color-mix(in srgb, transparent, var(--ag-foreground-color) 20%)); --ag-menu-separator-color: var(--ag-inherited-menu-separator-color, var(--ag-border-color)); --ag-menu-shadow: var(--ag-inherited-menu-shadow, var(--iress-elevation-floating-shadow, 0px 10px 18px #091E4215)); --ag-menu-text-color: var(--ag-inherited-menu-text-color, color-mix(in srgb, var(--ag-background-color), var(--ag-foreground-color) 95%)); --ag-modal-overlay-background-color: var(--ag-inherited-modal-overlay-background-color, var(--iress-colour-system-backdrop-fill, #393F46CC)); --ag-odd-row-background-color: var(--ag-inherited-odd-row-background-color, var(--iress-colour-neutral-10, #FFFFFF)); --ag-panel-background-color: var(--ag-inherited-panel-background-color, var(--ag-background-color)); --ag-panel-title-bar-background-color: var(--ag-inherited-panel-title-bar-background-color, var(--ag-header-background-color)); --ag-panel-title-bar-border: var(--ag-inherited-panel-title-bar-border, solid 1px var(--ag-border-color)); --ag-panel-title-bar-font-weight: var(--ag-inherited-panel-title-bar-font-weight, var(--ag-header-font-weight)); --ag-panel-title-bar-icon-color: var(--ag-inherited-panel-title-bar-icon-color, var(--ag-header-text-color)); --ag-panel-title-bar-text-color: var(--ag-inherited-panel-title-bar-text-color, var(--ag-header-text-color)); --ag-picker-button-background-color: var(--ag-inherited-picker-button-background-color, var(--ag-background-color)); --ag-picker-button-border: var(--ag-inherited-picker-button-border, solid 1px var(--ag-border-color)); --ag-picker-button-focus-background-color: var(--ag-inherited-picker-button-focus-background-color, var(--ag-background-color)); --ag-picker-button-focus-border: var(--ag-inherited-picker-button-focus-border, var(--ag-input-focus-border)); --ag-picker-list-background-color: var(--ag-inherited-picker-list-background-color, var(--ag-background-color)); --ag-picker-list-border: var(--ag-inherited-picker-list-border, solid 1px var(--ag-border-color)); --ag-pinned-column-border: var(--ag-inherited-pinned-column-border, solid 1px var(--ag-border-color)); --ag-pinned-row-background-color: var(--ag-inherited-pinned-row-background-color, var(--ag-background-color)); --ag-pinned-row-border: var(--ag-inherited-pinned-row-border, solid 1px var(--ag-border-color)); --ag-pinned-row-font-weight: var(--ag-inherited-pinned-row-font-weight, 600); --ag-pinned-row-text-color: var(--ag-inherited-pinned-row-text-color, var(--ag-text-color)); --ag-pinned-source-row-background-color: var(--ag-inherited-pinned-source-row-background-color, var(--ag-background-color)); --ag-pinned-source-row-font-weight: var(--ag-inherited-pinned-source-row-font-weight, 600); --ag-pinned-source-row-text-color: var(--ag-inherited-pinned-source-row-text-color, var(--ag-text-color)); --ag-popup-shadow: var(--ag-inherited-popup-shadow, var(--iress-elevation-floating-shadow, 0px 10px 18px #091E4215)); --ag-radio-checked-shape-image: var(--ag-inherited-radio-checked-shape-image, url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%226%22%20height%3D%226%22%20fill%3D%22none%22%3E%3Ccircle%20cx%3D%223%22%20cy%3D%223%22%20r%3D%223%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E")); --ag-range-header-highlight-color: var(--ag-inherited-range-header-highlight-color, color-mix(in srgb, var(--ag-header-background-color), var(--ag-foreground-color) 8%)); --ag-range-selection-background-color: var(--ag-inherited-range-selection-background-color, color-mix(in srgb, transparent, var(--ag-accent-color) 10%)); --ag-range-selection-border-color: var(--ag-inherited-range-selection-border-color, var(--iress-colour-primary-fill, #13213F)); --ag-range-selection-border-style: var(--ag-inherited-range-selection-border-style, solid); --ag-range-selection-chart-background-color: var(--ag-inherited-range-selection-chart-background-color, #0058FF1A); --ag-range-selection-chart-category-background-color: var(--ag-inherited-range-selection-chart-category-background-color, #00FF841A); --ag-range-selection-highlight-color: var(--ag-inherited-range-selection-highlight-color, color-mix(in srgb, transparent, var(--ag-accent-color) 50%)); --ag-row-border: var(--ag-inherited-row-border, solid 1px var(--iress-colour-neutral-40, #D7D8DA)); --ag-row-group-indent-size: var(--ag-inherited-row-group-indent-size, calc( var(--ag-cell-widget-spacing) + var(--ag-icon-size) )); --ag-row-height: var(--ag-inherited-row-height, calc(max( var(--ag-icon-size) , var(--ag-data-font-size) ) + var(--ag-spacing) \* 3.25 \* var(--ag-row-vertical-padding-scale) )); --ag-row-hover-color: var(--ag-inherited-row-hover-color, var(--iress-colour-primary-surface, #D9E5FF)); --ag-row-loading-skeleton-effect-color: var(--ag-inherited-row-loading-skeleton-effect-color, color-mix(in srgb, transparent, var(--ag-foreground-color) 15%)); --ag-row-numbers-selected-color: var(--ag-inherited-row-numbers-selected-color, color-mix(in srgb, transparent, var(--ag-accent-color) 50%)); --ag-row-vertical-padding-scale: var(--ag-inherited-row-vertical-padding-scale, 1); --ag-select-cell-background-color: var(--ag-inherited-select-cell-background-color, color-mix(in srgb, transparent, var(--ag-foreground-color) 7.000000000000001%)); --ag-select-cell-border: var(--ag-inherited-select-cell-border, solid 1px color-mix(in srgb, transparent, var(--ag-foreground-color) 13%)); --ag-selected-row-background-color: var(--ag-inherited-selected-row-background-color, var(--iress-colour-neutral-20, #F9F9F9)); --ag-set-filter-indent-size: var(--ag-inherited-set-filter-indent-size, var(--ag-icon-size)); --ag-side-bar-background-color: var(--ag-inherited-side-bar-background-color, transparent); --ag-side-bar-panel-width: var(--ag-inherited-side-bar-panel-width, 250px); --ag-side-button-background-color: var(--ag-inherited-side-button-background-color, transparent); --ag-side-button-bar-background-color: var(--ag-inherited-side-button-bar-background-color, var(--ag-side-bar-background-color)); --ag-side-button-bar-top-padding: var(--ag-inherited-side-button-bar-top-padding, calc( var(--ag-spacing) \* 3)); --ag-side-button-border: var(--ag-inherited-side-button-border, none); --ag-side-button-hover-background-color: var(--ag-inherited-side-button-hover-background-color, var(--ag-side-button-background-color)); --ag-side-button-hover-text-color: var(--ag-inherited-side-button-hover-text-color, var(--ag-accent-color)); --ag-side-button-left-padding: var(--ag-inherited-side-button-left-padding, var(--ag-spacing)); --ag-side-button-right-padding: var(--ag-inherited-side-button-right-padding, var(--ag-spacing)); --ag-side-button-selected-background-color: var(--ag-inherited-side-button-selected-background-color, transparent); --ag-side-button-selected-border: var(--ag-inherited-side-button-selected-border, none); --ag-side-button-selected-text-color: var(--ag-inherited-side-button-selected-text-color, var(--ag-side-button-text-color)); --ag-side-button-selected-underline-color: var(--ag-inherited-side-button-selected-underline-color, var(--ag-accent-color)); --ag-side-button-selected-underline-transition-duration: var(--ag-inherited-side-button-selected-underline-transition-duration, 0.3s); --ag-side-button-selected-underline-width: var(--ag-inherited-side-button-selected-underline-width, 2px); --ag-side-button-text-color: var(--ag-inherited-side-button-text-color, var(--ag-text-color)); --ag-side-button-vertical-padding: var(--ag-inherited-side-button-vertical-padding, calc( var(--ag-spacing) \* 3)); --ag-side-panel-border: var(--ag-inherited-side-panel-border, solid 1px var(--ag-border-color)); --ag-spacing: var(--ag-inherited-spacing, 8px); --ag-status-bar-label-color: var(--ag-inherited-status-bar-label-color, var(--ag-foreground-color)); --ag-status-bar-label-font-weight: var(--ag-inherited-status-bar-label-font-weight, 500); --ag-status-bar-value-color: var(--ag-inherited-status-bar-value-color, var(--ag-foreground-color)); --ag-status-bar-value-font-weight: var(--ag-inherited-status-bar-value-font-weight, 500); --ag-subtle-text-color: var(--ag-inherited-subtle-text-color, var(--iress-colour-neutral-70, #6D7278)); --ag-tab-background-color: var(--ag-inherited-tab-background-color, transparent); --ag-tab-bar-background-color: var(--ag-inherited-tab-bar-background-color, var(--ag-chrome-background-color)); --ag-tab-bar-border: var(--ag-inherited-tab-bar-border, solid 1px var(--iress-colour-primary-fill, #13213F)); --ag-tab-bar-horizontal-padding: var(--ag-inherited-tab-bar-horizontal-padding, 0px); --ag-tab-bar-top-padding: var(--ag-inherited-tab-bar-top-padding, 0px); --ag-tab-bottom-padding: var(--ag-inherited-tab-bottom-padding, var(--ag-spacing)); --ag-tab-horizontal-padding: var(--ag-inherited-tab-horizontal-padding, var(--ag-spacing)); --ag-tab-hover-background-color: var(--ag-inherited-tab-hover-background-color, var(--ag-tab-background-color)); --ag-tab-hover-text-color: var(--ag-inherited-tab-hover-text-color, var(--ag-accent-color)); --ag-tab-selected-background-color: var(--ag-inherited-tab-selected-background-color, var(--ag-tab-background-color)); --ag-tab-selected-border-color: var(--ag-inherited-tab-selected-border-color, transparent); --ag-tab-selected-border-width: var(--ag-inherited-tab-selected-border-width, 0px); --ag-tab-selected-text-color: var(--ag-inherited-tab-selected-text-color, var(--ag-accent-color)); --ag-tab-selected-underline-color: var(--ag-inherited-tab-selected-underline-color, var(--ag-accent-color)); --ag-tab-selected-underline-transition-duration: var(--ag-inherited-tab-selected-underline-transition-duration, 0.3s); --ag-tab-selected-underline-width: var(--ag-inherited-tab-selected-underline-width, 2px); --ag-tab-spacing: var(--ag-inherited-tab-spacing, 0); --ag-tab-text-color: var(--ag-inherited-tab-text-color, var(--ag-text-color)); --ag-tab-top-padding: var(--ag-inherited-tab-top-padding, var(--ag-spacing)); --ag-text-color: var(--ag-inherited-text-color, var(--ag-foreground-color)); --ag-toggle-button-height: var(--ag-inherited-toggle-button-height, 18px); --ag-toggle-button-off-background-color: var(--ag-inherited-toggle-button-off-background-color, color-mix(in srgb, var(--ag-background-color), var(--ag-foreground-color) 45%)); --ag-toggle-button-on-background-color: var(--ag-inherited-toggle-button-on-background-color, var(--ag-accent-color)); --ag-toggle-button-switch-background-color: var(--ag-inherited-toggle-button-switch-background-color, var(--ag-background-color)); --ag-toggle-button-switch-inset: var(--ag-inherited-toggle-button-switch-inset, 1px); --ag-toggle-button-width: var(--ag-inherited-toggle-button-width, 28px); --ag-tool-panel-separator-border: var(--ag-inherited-tool-panel-separator-border, solid 1px var(--ag-border-color)); --ag-tooltip-background-color: var(--ag-inherited-tooltip-background-color, var(--iress-colour-neutral-80, #393F46)); --ag-tooltip-border: var(--ag-inherited-tooltip-border, solid 1px var(--ag-border-color)); --ag-tooltip-text-color: var(--ag-inherited-tooltip-text-color, var(--iress-colour-neutral-10, #FFFFFF)); --ag-value-change-delta-down-color: var(--ag-inherited-value-change-delta-down-color, var(--iress-colour-system-danger-fill, #C20A0A)); --ag-value-change-delta-up-color: var(--ag-inherited-value-change-delta-up-color, var(--iress-colour-system-success-fill, #02794D)); --ag-value-change-value-highlight-background-color: var(--ag-inherited-value-change-value-highlight-background-color, color-mix(in srgb, transparent, var(--ag-accent-color) 20%)); --ag-widget-container-horizontal-padding: var(--ag-inherited-widget-container-horizontal-padding, calc( var(--ag-spacing) \* 1.5)); --ag-widget-container-vertical-padding: var(--ag-inherited-widget-container-vertical-padding, calc( var(--ag-spacing) \* 1.5)); --ag-widget-horizontal-spacing: var(--ag-inherited-widget-horizontal-spacing, calc( var(--ag-spacing) \* 1.5)); --ag-widget-vertical-spacing: var(--ag-inherited-widget-vertical-spacing, var(--ag-spacing)); --ag-wrapper-border: var(--ag-inherited-wrapper-border, none); --ag-wrapper-border-radius: var(--ag-inherited-wrapper-border-radius, var(--iress-radius-system-layout, var(--iress-radius-100, 1rem) var(--iress-radius-100, 1rem) var(--iress-radius-100, 1rem) var(--iress-radius-100, 1rem))); :where(\[data-ag-theme-mode="light"\]) & { --ag-browser-color-scheme: var(--ag-inherited-browser-color-scheme, light); --ag-chrome-background-color: var(--ag-inherited-chrome-background-color, color-mix(in srgb, var(--ag-background-color), var(--ag-foreground-color) 2%)); } :where(\[data-ag-theme-mode="dark"\]) & { --ag-advanced-filter-builder-column-pill-color: var(--ag-inherited-advanced-filter-builder-column-pill-color, #355f2d); --ag-advanced-filter-builder-join-pill-color: var(--ag-inherited-advanced-filter-builder-join-pill-color, #7a3a37); --ag-advanced-filter-builder-option-pill-color: var(--ag-inherited-advanced-filter-builder-option-pill-color, #5a3168); --ag-advanced-filter-builder-value-pill-color: var(--ag-inherited-advanced-filter-builder-value-pill-color, #374c86); --ag-browser-color-scheme: var(--ag-inherited-browser-color-scheme, dark); --ag-chrome-background-color: var(--ag-inherited-chrome-background-color, color-mix(in srgb, var(--ag-background-color), var(--ag-foreground-color) 5%)); --ag-find-active-match-color: var(--ag-inherited-find-active-match-color, var(--ag-background-color)); --ag-find-match-color: var(--ag-inherited-find-match-color, var(--ag-background-color)); --ag-menu-background-color: var(--ag-inherited-menu-background-color, color-mix(in srgb, var(--ag-background-color), var(--ag-foreground-color) 10%)); } :where(\[data-ag-theme-mode="dark-blue"\]) & { --ag-advanced-filter-builder-column-pill-color: var(--ag-inherited-advanced-filter-builder-column-pill-color, #355f2d); --ag-advanced-filter-builder-join-pill-color: var(--ag-inherited-advanced-filter-builder-join-pill-color, #7a3a37); --ag-advanced-filter-builder-option-pill-color: var(--ag-inherited-advanced-filter-builder-option-pill-color, #5a3168); --ag-advanced-filter-builder-value-pill-color: var(--ag-inherited-advanced-filter-builder-value-pill-color, #374c86); --ag-browser-color-scheme: var(--ag-inherited-browser-color-scheme, dark); --ag-chrome-background-color: var(--ag-inherited-chrome-background-color, color-mix(in srgb, var(--ag-background-color), var(--ag-foreground-color) 5%)); --ag-find-active-match-color: var(--ag-inherited-find-active-match-color, var(--ag-background-color)); --ag-find-match-color: var(--ag-inherited-find-match-color, var(--ag-background-color)); --ag-menu-background-color: var(--ag-inherited-menu-background-color, color-mix(in srgb, var(--ag-background-color), var(--ag-foreground-color) 10%)); } } :has(> :where(.ag-theme-params-2)):not(:where(.ag-theme-params-2)) { --ag-inherited-accent-color: var(--ag-accent-color); --ag-inherited-advanced-filter-builder-button-bar-border: var(--ag-advanced-filter-builder-button-bar-border); --ag-inherited-advanced-filter-builder-column-pill-color: var(--ag-advanced-filter-builder-column-pill-color); --ag-inherited-advanced-filter-builder-indent-size: var(--ag-advanced-filter-builder-indent-size); --ag-inherited-advanced-filter-builder-join-pill-color: var(--ag-advanced-filter-builder-join-pill-color); --ag-inherited-advanced-filter-builder-option-pill-color: var(--ag-advanced-filter-builder-option-pill-color); --ag-inherited-advanced-filter-builder-value-pill-color: var(--ag-advanced-filter-builder-value-pill-color); --ag-inherited-background-color: var(--ag-background-color); --ag-inherited-border-color: var(--ag-border-color); --ag-inherited-border-radius: var(--ag-border-radius); --ag-inherited-browser-color-scheme: var(--ag-browser-color-scheme); --ag-inherited-button-active-background-color: var(--ag-button-active-background-color); --ag-inherited-button-active-border: var(--ag-button-active-border); --ag-inherited-button-active-text-color: var(--ag-button-active-text-color); --ag-inherited-button-background-color: var(--ag-button-background-color); --ag-inherited-button-border: var(--ag-button-border); --ag-inherited-button-border-radius: var(--ag-button-border-radius); --ag-inherited-button-disabled-background-color: var(--ag-button-disabled-background-color); --ag-inherited-button-disabled-border: var(--ag-button-disabled-border); --ag-inherited-button-disabled-text-color: var(--ag-button-disabled-text-color); --ag-inherited-button-font-weight: var(--ag-button-font-weight); --ag-inherited-button-horizontal-padding: var(--ag-button-horizontal-padding); --ag-inherited-button-hover-background-color: var(--ag-button-hover-background-color); --ag-inherited-button-hover-border: var(--ag-button-hover-border); --ag-inherited-button-hover-text-color: var(--ag-button-hover-text-color); --ag-inherited-button-text-color: var(--ag-button-text-color); --ag-inherited-button-vertical-padding: var(--ag-button-vertical-padding); --ag-inherited-card-shadow: var(--ag-card-shadow); --ag-inherited-cell-editing-border: var(--ag-cell-editing-border); --ag-inherited-cell-editing-shadow: var(--ag-cell-editing-shadow); --ag-inherited-cell-font-family: var(--ag-cell-font-family); --ag-inherited-cell-horizontal-padding: var(--ag-cell-horizontal-padding); --ag-inherited-cell-horizontal-padding-scale: var(--ag-cell-horizontal-padding-scale); --ag-inherited-cell-text-color: var(--ag-cell-text-color); --ag-inherited-cell-widget-spacing: var(--ag-cell-widget-spacing); --ag-inherited-chart-menu-label-color: var(--ag-chart-menu-label-color); --ag-inherited-chart-menu-panel-width: var(--ag-chart-menu-panel-width); --ag-inherited-checkbox-border-radius: var(--ag-checkbox-border-radius); --ag-inherited-checkbox-border-width: var(--ag-checkbox-border-width); --ag-inherited-checkbox-checked-background-color: var(--ag-checkbox-checked-background-color); --ag-inherited-checkbox-checked-border-color: var(--ag-checkbox-checked-border-color); --ag-inherited-checkbox-checked-shape-color: var(--ag-checkbox-checked-shape-color); --ag-inherited-checkbox-checked-shape-image: var(--ag-checkbox-checked-shape-image); --ag-inherited-checkbox-indeterminate-background-color: var(--ag-checkbox-indeterminate-background-color); --ag-inherited-checkbox-indeterminate-border-color: var(--ag-checkbox-indeterminate-border-color); --ag-inherited-checkbox-indeterminate-shape-color: var(--ag-checkbox-indeterminate-shape-color); --ag-inherited-checkbox-indeterminate-shape-image: var(--ag-checkbox-indeterminate-shape-image); --ag-inherited-checkbox-unchecked-background-color: var(--ag-checkbox-unchecked-background-color); --ag-inherited-checkbox-unchecked-border-color: var(--ag-checkbox-unchecked-border-color); --ag-inherited-chrome-background-color: var(--ag-chrome-background-color); --ag-inherited-column-border: var(--ag-column-border); --ag-inherited-column-drop-cell-background-color: var(--ag-column-drop-cell-background-color); --ag-inherited-column-drop-cell-border: var(--ag-column-drop-cell-border); --ag-inherited-column-drop-cell-drag-handle-color: var(--ag-column-drop-cell-drag-handle-color); --ag-inherited-column-drop-cell-text-color: var(--ag-column-drop-cell-text-color); --ag-inherited-column-hover-color: var(--ag-column-hover-color); --ag-inherited-column-select-indent-size: var(--ag-column-select-indent-size); --ag-inherited-data-font-size: var(--ag-data-font-size); --ag-inherited-dialog-border: var(--ag-dialog-border); --ag-inherited-dialog-shadow: var(--ag-dialog-shadow); --ag-inherited-drag-and-drop-image-background-color: var(--ag-drag-and-drop-image-background-color); --ag-inherited-drag-and-drop-image-border: var(--ag-drag-and-drop-image-border); --ag-inherited-drag-and-drop-image-shadow: var(--ag-drag-and-drop-image-shadow); --ag-inherited-drag-handle-color: var(--ag-drag-handle-color); --ag-inherited-dropdown-shadow: var(--ag-dropdown-shadow); --ag-inherited-filter-tool-panel-group-indent: var(--ag-filter-tool-panel-group-indent); --ag-inherited-find-active-match-background-color: var(--ag-find-active-match-background-color); --ag-inherited-find-active-match-color: var(--ag-find-active-match-color); --ag-inherited-find-match-background-color: var(--ag-find-match-background-color); --ag-inherited-find-match-color: var(--ag-find-match-color); --ag-inherited-focus-shadow: var(--ag-focus-shadow); --ag-inherited-font-family: var(--ag-font-family); --ag-inherited-font-size: var(--ag-font-size); --ag-inherited-footer-row-border: var(--ag-footer-row-border); --ag-inherited-foreground-color: var(--ag-foreground-color); --ag-inherited-header-background-color: var(--ag-header-background-color); --ag-inherited-header-cell-background-transition-duration: var(--ag-header-cell-background-transition-duration); --ag-inherited-header-cell-hover-background-color: var(--ag-header-cell-hover-background-color); --ag-inherited-header-cell-moving-background-color: var(--ag-header-cell-moving-background-color); --ag-inherited-header-column-border: var(--ag-header-column-border); --ag-inherited-header-column-border-height: var(--ag-header-column-border-height); --ag-inherited-header-column-resize-handle-color: var(--ag-header-column-resize-handle-color); --ag-inherited-header-column-resize-handle-height: var(--ag-header-column-resize-handle-height); --ag-inherited-header-column-resize-handle-width: var(--ag-header-column-resize-handle-width); --ag-inherited-header-font-family: var(--ag-header-font-family); --ag-inherited-header-font-size: var(--ag-header-font-size); --ag-inherited-header-font-weight: var(--ag-header-font-weight); --ag-inherited-header-height: var(--ag-header-height); --ag-inherited-header-row-border: var(--ag-header-row-border); --ag-inherited-header-text-color: var(--ag-header-text-color); --ag-inherited-header-vertical-padding-scale: var(--ag-header-vertical-padding-scale); --ag-inherited-icon-button-active-background-color: var(--ag-icon-button-active-background-color); --ag-inherited-icon-button-active-color: var(--ag-icon-button-active-color); --ag-inherited-icon-button-active-indicator-color: var(--ag-icon-button-active-indicator-color); --ag-inherited-icon-button-background-color: var(--ag-icon-button-background-color); --ag-inherited-icon-button-background-spread: var(--ag-icon-button-background-spread); --ag-inherited-icon-button-border-radius: var(--ag-icon-button-border-radius); --ag-inherited-icon-button-color: var(--ag-icon-button-color); --ag-inherited-icon-button-hover-background-color: var(--ag-icon-button-hover-background-color); --ag-inherited-icon-button-hover-color: var(--ag-icon-button-hover-color); --ag-inherited-icon-color: var(--ag-icon-color); --ag-inherited-icon-size: var(--ag-icon-size); --ag-inherited-input-background-color: var(--ag-input-background-color); --ag-inherited-input-border: var(--ag-input-border); --ag-inherited-input-border-radius: var(--ag-input-border-radius); --ag-inherited-input-disabled-background-color: var(--ag-input-disabled-background-color); --ag-inherited-input-disabled-border: var(--ag-input-disabled-border); --ag-inherited-input-disabled-text-color: var(--ag-input-disabled-text-color); --ag-inherited-input-focus-background-color: var(--ag-input-focus-background-color); --ag-inherited-input-focus-border: var(--ag-input-focus-border); --ag-inherited-input-focus-shadow: var(--ag-input-focus-shadow); --ag-inherited-input-focus-text-color: var(--ag-input-focus-text-color); --ag-inherited-input-height: var(--ag-input-height); --ag-inherited-input-icon-color: var(--ag-input-icon-color); --ag-inherited-input-invalid-background-color: var(--ag-input-invalid-background-color); --ag-inherited-input-invalid-border: var(--ag-input-invalid-border); --ag-inherited-input-invalid-text-color: var(--ag-input-invalid-text-color); --ag-inherited-input-padding-start: var(--ag-input-padding-start); --ag-inherited-input-placeholder-text-color: var(--ag-input-placeholder-text-color); --ag-inherited-input-text-color: var(--ag-input-text-color); --ag-inherited-invalid-color: var(--ag-invalid-color); --ag-inherited-list-item-height: var(--ag-list-item-height); --ag-inherited-menu-background-color: var(--ag-menu-background-color); --ag-inherited-menu-border: var(--ag-menu-border); --ag-inherited-menu-separator-color: var(--ag-menu-separator-color); --ag-inherited-menu-shadow: var(--ag-menu-shadow); --ag-inherited-menu-text-color: var(--ag-menu-text-color); --ag-inherited-modal-overlay-background-color: var(--ag-modal-overlay-background-color); --ag-inherited-odd-row-background-color: var(--ag-odd-row-background-color); --ag-inherited-panel-background-color: var(--ag-panel-background-color); --ag-inherited-panel-title-bar-background-color: var(--ag-panel-title-bar-background-color); --ag-inherited-panel-title-bar-border: var(--ag-panel-title-bar-border); --ag-inherited-panel-title-bar-font-weight: var(--ag-panel-title-bar-font-weight); --ag-inherited-panel-title-bar-icon-color: var(--ag-panel-title-bar-icon-color); --ag-inherited-panel-title-bar-text-color: var(--ag-panel-title-bar-text-color); --ag-inherited-picker-button-background-color: var(--ag-picker-button-background-color); --ag-inherited-picker-button-border: var(--ag-picker-button-border); --ag-inherited-picker-button-focus-background-color: var(--ag-picker-button-focus-background-color); --ag-inherited-picker-button-focus-border: var(--ag-picker-button-focus-border); --ag-inherited-picker-list-background-color: var(--ag-picker-list-background-color); --ag-inherited-picker-list-border: var(--ag-picker-list-border); --ag-inherited-pinned-column-border: var(--ag-pinned-column-border); --ag-inherited-pinned-row-background-color: var(--ag-pinned-row-background-color); --ag-inherited-pinned-row-border: var(--ag-pinned-row-border); --ag-inherited-pinned-row-font-weight: var(--ag-pinned-row-font-weight); --ag-inherited-pinned-row-text-color: var(--ag-pinned-row-text-color); --ag-inherited-pinned-source-row-background-color: var(--ag-pinned-source-row-background-color); --ag-inherited-pinned-source-row-font-weight: var(--ag-pinned-source-row-font-weight); --ag-inherited-pinned-source-row-text-color: var(--ag-pinned-source-row-text-color); --ag-inherited-popup-shadow: var(--ag-popup-shadow); --ag-inherited-radio-checked-shape-image: var(--ag-radio-checked-shape-image); --ag-inherited-range-header-highlight-color: var(--ag-range-header-highlight-color); --ag-inherited-range-selection-background-color: var(--ag-range-selection-background-color); --ag-inherited-range-selection-border-color: var(--ag-range-selection-border-color); --ag-inherited-range-selection-border-style: var(--ag-range-selection-border-style); --ag-inherited-range-selection-chart-background-color: var(--ag-range-selection-chart-background-color); --ag-inherited-range-selection-chart-category-background-color: var(--ag-range-selection-chart-category-background-color); --ag-inherited-range-selection-highlight-color: var(--ag-range-selection-highlight-color); --ag-inherited-row-border: var(--ag-row-border); --ag-inherited-row-group-indent-size: var(--ag-row-group-indent-size); --ag-inherited-row-height: var(--ag-row-height); --ag-inherited-row-hover-color: var(--ag-row-hover-color); --ag-inherited-row-loading-skeleton-effect-color: var(--ag-row-loading-skeleton-effect-color); --ag-inherited-row-numbers-selected-color: var(--ag-row-numbers-selected-color); --ag-inherited-row-vertical-padding-scale: var(--ag-row-vertical-padding-scale); --ag-inherited-select-cell-background-color: var(--ag-select-cell-background-color); --ag-inherited-select-cell-border: var(--ag-select-cell-border); --ag-inherited-selected-row-background-color: var(--ag-selected-row-background-color); --ag-inherited-set-filter-indent-size: var(--ag-set-filter-indent-size); --ag-inherited-side-bar-background-color: var(--ag-side-bar-background-color); --ag-inherited-side-bar-panel-width: var(--ag-side-bar-panel-width); --ag-inherited-side-button-background-color: var(--ag-side-button-background-color); --ag-inherited-side-button-bar-background-color: var(--ag-side-button-bar-background-color); --ag-inherited-side-button-bar-top-padding: var(--ag-side-button-bar-top-padding); --ag-inherited-side-button-border: var(--ag-side-button-border); --ag-inherited-side-button-hover-background-color: var(--ag-side-button-hover-background-color); --ag-inherited-side-button-hover-text-color: var(--ag-side-button-hover-text-color); --ag-inherited-side-button-left-padding: var(--ag-side-button-left-padding); --ag-inherited-side-button-right-padding: var(--ag-side-button-right-padding); --ag-inherited-side-button-selected-background-color: var(--ag-side-button-selected-background-color); --ag-inherited-side-button-selected-border: var(--ag-side-button-selected-border); --ag-inherited-side-button-selected-text-color: var(--ag-side-button-selected-text-color); --ag-inherited-side-button-selected-underline-color: var(--ag-side-button-selected-underline-color); --ag-inherited-side-button-selected-underline-transition-duration: var(--ag-side-button-selected-underline-transition-duration); --ag-inherited-side-button-selected-underline-width: var(--ag-side-button-selected-underline-width); --ag-inherited-side-button-text-color: var(--ag-side-button-text-color); --ag-inherited-side-button-vertical-padding: var(--ag-side-button-vertical-padding); --ag-inherited-side-panel-border: var(--ag-side-panel-border); --ag-inherited-spacing: var(--ag-spacing); --ag-inherited-status-bar-label-color: var(--ag-status-bar-label-color); --ag-inherited-status-bar-label-font-weight: var(--ag-status-bar-label-font-weight); --ag-inherited-status-bar-value-color: var(--ag-status-bar-value-color); --ag-inherited-status-bar-value-font-weight: var(--ag-status-bar-value-font-weight); --ag-inherited-subtle-text-color: var(--ag-subtle-text-color); --ag-inherited-tab-background-color: var(--ag-tab-background-color); --ag-inherited-tab-bar-background-color: var(--ag-tab-bar-background-color); --ag-inherited-tab-bar-border: var(--ag-tab-bar-border); --ag-inherited-tab-bar-horizontal-padding: var(--ag-tab-bar-horizontal-padding); --ag-inherited-tab-bar-top-padding: var(--ag-tab-bar-top-padding); --ag-inherited-tab-bottom-padding: var(--ag-tab-bottom-padding); --ag-inherited-tab-horizontal-padding: var(--ag-tab-horizontal-padding); --ag-inherited-tab-hover-background-color: var(--ag-tab-hover-background-color); --ag-inherited-tab-hover-text-color: var(--ag-tab-hover-text-color); --ag-inherited-tab-selected-background-color: var(--ag-tab-selected-background-color); --ag-inherited-tab-selected-border-color: var(--ag-tab-selected-border-color); --ag-inherited-tab-selected-border-width: var(--ag-tab-selected-border-width); --ag-inherited-tab-selected-text-color: var(--ag-tab-selected-text-color); --ag-inherited-tab-selected-underline-color: var(--ag-tab-selected-underline-color); --ag-inherited-tab-selected-underline-transition-duration: var(--ag-tab-selected-underline-transition-duration); --ag-inherited-tab-selected-underline-width: var(--ag-tab-selected-underline-width); --ag-inherited-tab-spacing: var(--ag-tab-spacing); --ag-inherited-tab-text-color: var(--ag-tab-text-color); --ag-inherited-tab-top-padding: var(--ag-tab-top-padding); --ag-inherited-text-color: var(--ag-text-color); --ag-inherited-toggle-button-height: var(--ag-toggle-button-height); --ag-inherited-toggle-button-off-background-color: var(--ag-toggle-button-off-background-color); --ag-inherited-toggle-button-on-background-color: var(--ag-toggle-button-on-background-color); --ag-inherited-toggle-button-switch-background-color: var(--ag-toggle-button-switch-background-color); --ag-inherited-toggle-button-switch-inset: var(--ag-toggle-button-switch-inset); --ag-inherited-toggle-button-width: var(--ag-toggle-button-width); --ag-inherited-tool-panel-separator-border: var(--ag-tool-panel-separator-border); --ag-inherited-tooltip-background-color: var(--ag-tooltip-background-color); --ag-inherited-tooltip-border: var(--ag-tooltip-border); --ag-inherited-tooltip-text-color: var(--ag-tooltip-text-color); --ag-inherited-value-change-delta-down-color: var(--ag-value-change-delta-down-color); --ag-inherited-value-change-delta-up-color: var(--ag-value-change-delta-up-color); --ag-inherited-value-change-value-highlight-background-color: var(--ag-value-change-value-highlight-background-color); --ag-inherited-widget-container-horizontal-padding: var(--ag-widget-container-horizontal-padding); --ag-inherited-widget-container-vertical-padding: var(--ag-widget-container-vertical-padding); --ag-inherited-widget-horizontal-spacing: var(--ag-widget-horizontal-spacing); --ag-inherited-widget-vertical-spacing: var(--ag-widget-vertical-spacing); --ag-inherited-wrapper-border: var(--ag-wrapper-border); --ag-inherited-wrapper-border-radius: var(--ag-wrapper-border-radius); :where(\[data-ag-theme-mode="light"\]) & { --ag-inherited-browser-color-scheme: var(--ag-browser-color-scheme); --ag-inherited-chrome-background-color: var(--ag-chrome-background-color); } :where(\[data-ag-theme-mode="dark"\]) & { --ag-inherited-advanced-filter-builder-column-pill-color: var(--ag-advanced-filter-builder-column-pill-color); --ag-inherited-advanced-filter-builder-join-pill-color: var(--ag-advanced-filter-builder-join-pill-color); --ag-inherited-advanced-filter-builder-option-pill-color: var(--ag-advanced-filter-builder-option-pill-color); --ag-inherited-advanced-filter-builder-value-pill-color: var(--ag-advanced-filter-builder-value-pill-color); --ag-inherited-browser-color-scheme: var(--ag-browser-color-scheme); --ag-inherited-chrome-background-color: var(--ag-chrome-background-color); --ag-inherited-find-active-match-color: var(--ag-find-active-match-color); --ag-inherited-find-match-color: var(--ag-find-match-color); --ag-inherited-menu-background-color: var(--ag-menu-background-color); } :where(\[data-ag-theme-mode="dark-blue"\]) & { --ag-inherited-advanced-filter-builder-column-pill-color: var(--ag-advanced-filter-builder-column-pill-color); --ag-inherited-advanced-filter-builder-join-pill-color: var(--ag-advanced-filter-builder-join-pill-color); --ag-inherited-advanced-filter-builder-option-pill-color: var(--ag-advanced-filter-builder-option-pill-color); --ag-inherited-advanced-filter-builder-value-pill-color: var(--ag-advanced-filter-builder-value-pill-color); --ag-inherited-browser-color-scheme: var(--ag-browser-color-scheme); --ag-inherited-chrome-background-color: var(--ag-chrome-background-color); --ag-inherited-find-active-match-color: var(--ag-find-active-match-color); --ag-inherited-find-match-color: var(--ag-find-match-color); --ag-inherited-menu-background-color: var(--ag-menu-background-color); } }
-
-Drag here to set row groups
-
-Drag here to set column labels
-
-Make
-
-Model
-
-Price
-
-Electric
-
-Order
-
-Tesla
-
-Model Y
-
-$64,950
-
-Order
-
-Ford
-
-F-Series
-
-$33,850
-
-Order
-
-Toyota
-
-Corolla
-
-$29,600
-
-Order
-
-Page Size:
-
-500
-
-1 to 3 of 3
-
-Page 1 of 1
-
-Show code
-
-[](#props)Props
----------------
-
-AG Grid is a third-party library and has its own API. To use AG Grid, you will need to refer to the [AG Grid documentation](https://www.ag-grid.com/react-data-grid).
-
-[](#usage)Usage
----------------
-
-The `@iress/ids-themes` package provides an Iress theme for AG Grid. It works by mapping the AG grid CSS variables to the IDS design tokens, hence it should work with all IDS/Styler themes.
-
-### [](#installation)Installation
-
-1.  Ensure you have [AG grid installed](https://www.ag-grid.com/react-data-grid/getting-started/) in your project.
-2.  Add the `@iress/ids-themes` package to your project with `yarn add @iress/ids-themes`.
-3.  Import the `getAgGridThemeProps()` function from the package and spread it onto your `<AgGridReact />` component.
-
-\[data-radix-scroll-area-viewport\] {
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-  -webkit-overflow-scrolling: touch;
-}
-\[data-radix-scroll-area-viewport\]::-webkit-scrollbar {
-  display: none;
-}
-:where(\[data-radix-scroll-area-viewport\]) {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-}
-:where(\[data-radix-scroll-area-content\]) {
-  flex-grow: 1;
-}
-
-import { getAgGridThemeProps } from '@iress/ids-themes';
-<AgGridReact {...getAgGridThemeProps()} />;
-
-Copy
-
-### [](#version)Version
-
-The version of AG Grid that the theme is supporting is: `ag-grid-react@^33.0.0`
-
-Only compatible with AG Grid v33+
----------------------------------
-
-As of AG Grid v33, the library has moved to use CSS-in-JS rather than CSS for its mapping, as per the new AG Grid theming API. This means that the Iress theme for AG Grid is only compatible with AG Grid v33 and above.
-
-[](#examples)Examples
----------------------
-
-### [](#simple)Simple
-
-This is a simple example, based on the [Quick Start](https://www.ag-grid.com/react-data-grid/getting-started/) example from the AG Grid documentation.
-
-.ag-cell.iress--positive, .ag-cell .iress--positive, .iress--positive .ag-cell { color: var(--iress-colour-system-success-text, #015537); }
-
-:where(.ag-theme-params-1) { --ag-accent-color: var(--ag-inherited-accent-color, var(--iress-colour-primary-fill, #13213F)); --ag-advanced-filter-builder-button-bar-border: var(--ag-inherited-advanced-filter-builder-button-bar-border, solid 1px var(--ag-border-color)); --ag-advanced-filter-builder-column-pill-color: var(--ag-inherited-advanced-filter-builder-column-pill-color, #a6e194); --ag-advanced-filter-builder-indent-size: var(--ag-inherited-advanced-filter-builder-indent-size, calc( var(--ag-spacing) \* 2 + var(--ag-icon-size) )); --ag-advanced-filter-builder-join-pill-color: var(--ag-inherited-advanced-filter-builder-join-pill-color, #f08e8d); --ag-advanced-filter-builder-option-pill-color: var(--ag-inherited-advanced-filter-builder-option-pill-color, #f3c08b); --ag-advanced-filter-builder-value-pill-color: var(--ag-inherited-advanced-filter-builder-value-pill-color, #85c0e4); --ag-background-color: var(--ag-inherited-background-color, var(--iress-colour-neutral-10, #FFFFFF)); --ag-border-color: var(--ag-inherited-border-color, var(--iress-colour-neutral-30, #E4E5E7)); --ag-border-radius: var(--ag-inherited-border-radius, var(--iress-radius-system-layout, var(--iress-radius-100, 1rem) var(--iress-radius-100, 1rem) var(--iress-radius-100, 1rem) var(--iress-radius-100, 1rem))); --ag-browser-color-scheme: var(--ag-inherited-browser-color-scheme, light); --ag-button-active-background-color: var(--ag-inherited-button-active-background-color, var(--ag-accent-color)); --ag-button-active-border: var(--ag-inherited-button-active-border, var(--ag-button-hover-border)); --ag-button-active-text-color: var(--ag-inherited-button-active-text-color, var(--ag-background-color)); --ag-button-background-color: var(--ag-inherited-button-background-color, var(--iress-colour-primary-surface, #D9E5FF)); --ag-button-border: var(--ag-inherited-button-border, solid 1px var(--iress-colour-primary-surface, #D9E5FF)); --ag-button-border-radius: var(--ag-inherited-button-border-radius, var(--iress-radius-system-button, var(--iress-radius-075, calc(0.75 \* 1rem)) var(--iress-radius-075, calc(0.75 \* 1rem)) var(--iress-radius-075, calc(0.75 \* 1rem)) var(--iress-radius-075, calc(0.75 \* 1rem)))); --ag-button-disabled-background-color: var(--ag-inherited-button-disabled-background-color, var(--ag-input-disabled-background-color)); --ag-button-disabled-border: var(--ag-inherited-button-disabled-border, var(--ag-input-disabled-border)); --ag-button-disabled-text-color: var(--ag-inherited-button-disabled-text-color, var(--ag-input-disabled-text-color)); --ag-button-font-weight: var(--ag-inherited-button-font-weight, 600); --ag-button-horizontal-padding: var(--ag-inherited-button-horizontal-padding, calc( var(--ag-spacing) \* 2)); --ag-button-hover-background-color: var(--ag-inherited-button-hover-background-color, var(--ag-row-hover-color)); --ag-button-hover-border: var(--ag-inherited-button-hover-border, var(--ag-button-border)); --ag-button-hover-text-color: var(--ag-inherited-button-hover-text-color, var(--ag-button-text-color)); --ag-button-text-color: var(--ag-inherited-button-text-color, var(--iress-colour-primary-text, #13213F)); --ag-button-vertical-padding: var(--ag-inherited-button-vertical-padding, var(--ag-spacing)); --ag-card-shadow: var(--ag-inherited-card-shadow, var(--iress-elevation-raised-shadow, 0px 3px 5px #091E4220)); --ag-cell-editing-border: var(--ag-inherited-cell-editing-border, solid 1px var(--ag-accent-color)); --ag-cell-editing-shadow: var(--ag-inherited-cell-editing-shadow, var(--ag-card-shadow)); --ag-cell-font-family: var(--ag-inherited-cell-font-family, var(--iress-typography-base-body-font, Inter, Helvetica, sans-serif)); --ag-cell-horizontal-padding: var(--ag-inherited-cell-horizontal-padding, calc( var(--ag-spacing) \* 2 \* var(--ag-cell-horizontal-padding-scale) )); --ag-cell-horizontal-padding-scale: var(--ag-inherited-cell-horizontal-padding-scale, 1); --ag-cell-text-color: var(--ag-inherited-cell-text-color, var(--ag-text-color)); --ag-cell-widget-spacing: var(--ag-inherited-cell-widget-spacing, calc( var(--ag-spacing) \* 1.5)); --ag-chart-menu-label-color: var(--ag-inherited-chart-menu-label-color, color-mix(in srgb, transparent, var(--ag-foreground-color) 80%)); --ag-chart-menu-panel-width: var(--ag-inherited-chart-menu-panel-width, 260px); --ag-checkbox-border-radius: var(--ag-inherited-checkbox-border-radius, var(--iress-radius-system-badge, var(--iress-radius-025, calc(0.25 \* 1rem)) var(--iress-radius-025, calc(0.25 \* 1rem)) var(--iress-radius-025, calc(0.25 \* 1rem)) var(--iress-radius-025, calc(0.25 \* 1rem)))); --ag-checkbox-border-width: var(--ag-inherited-checkbox-border-width, 1px); --ag-checkbox-checked-background-color: var(--ag-inherited-checkbox-checked-background-color, var(--iress-colour-primary-fill, #13213F)); --ag-checkbox-checked-border-color: var(--ag-inherited-checkbox-checked-border-color, var(--iress-colour-primary-fill, #13213F)); --ag-checkbox-checked-shape-color: var(--ag-inherited-checkbox-checked-shape-color, var(--iress-colour-primary-on-fill, #ECF2FF)); --ag-checkbox-checked-shape-image: var(--ag-inherited-checkbox-checked-shape-image, url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%227%22%20fill%3D%22none%22%3E%3Cpath%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.75%22%20d%3D%22M1%203.5%203.5%206l5-5%22%2F%3E%3C%2Fsvg%3E")); --ag-checkbox-indeterminate-background-color: var(--ag-inherited-checkbox-indeterminate-background-color, var(--iress-colour-primary-fill, #13213F)); --ag-checkbox-indeterminate-border-color: var(--ag-inherited-checkbox-indeterminate-border-color, var(--iress-colour-primary-fill, #13213F)); --ag-checkbox-indeterminate-shape-color: var(--ag-inherited-checkbox-indeterminate-shape-color, var(--iress-colour-primary-on-fill, #ECF2FF)); --ag-checkbox-indeterminate-shape-image: var(--ag-inherited-checkbox-indeterminate-shape-image, url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%222%22%20fill%3D%22none%22%3E%3Crect%20width%3D%2210%22%20height%3D%222%22%20fill%3D%22%23000%22%20rx%3D%221%22%2F%3E%3C%2Fsvg%3E")); --ag-checkbox-unchecked-background-color: var(--ag-inherited-checkbox-unchecked-background-color, var(--iress-colour-neutral-10, #FFFFFF)); --ag-checkbox-unchecked-border-color: var(--ag-inherited-checkbox-unchecked-border-color, var(--iress-colour-neutral-70, #6D7278)); --ag-chrome-background-color: var(--ag-inherited-chrome-background-color, color-mix(in srgb, var(--ag-background-color), var(--ag-foreground-color) 2%)); --ag-column-border: var(--ag-inherited-column-border, solid 1px transparent); --ag-column-drop-cell-background-color: var(--ag-inherited-column-drop-cell-background-color, color-mix(in srgb, transparent, var(--ag-foreground-color) 7.000000000000001%)); --ag-column-drop-cell-border: var(--ag-inherited-column-drop-cell-border, solid 1px color-mix(in srgb, transparent, var(--ag-foreground-color) 13%)); --ag-column-drop-cell-drag-handle-color: var(--ag-inherited-column-drop-cell-drag-handle-color, var(--ag-text-color)); --ag-column-drop-cell-text-color: var(--ag-inherited-column-drop-cell-text-color, var(--ag-text-color)); --ag-column-hover-color: var(--ag-inherited-column-hover-color, var(--iress-colour-neutral-20, #F9F9F9)); --ag-column-select-indent-size: var(--ag-inherited-column-select-indent-size, var(--ag-icon-size)); --ag-data-font-size: var(--ag-inherited-data-font-size, var(--iress-typography-base-size, .875rem)); --ag-dialog-border: var(--ag-inherited-dialog-border, solid 1px color-mix(in srgb, transparent, var(--ag-foreground-color) 20%)); --ag-dialog-shadow: var(--ag-inherited-dialog-shadow, var(--iress-elevation-floating-shadow, 0px 10px 18px #091E4215)); --ag-drag-and-drop-image-background-color: var(--ag-inherited-drag-and-drop-image-background-color, var(--ag-background-color)); --ag-drag-and-drop-image-border: var(--ag-inherited-drag-and-drop-image-border, solid 1px var(--ag-border-color)); --ag-drag-and-drop-image-shadow: var(--ag-inherited-drag-and-drop-image-shadow, var(--iress-elevation-focus-shadow, 0px 0px 0px 1.5px var(--iress-colour-neutral-10, #FFFFFF), 0px 0px 0px 3.5px #0066FF)); --ag-drag-handle-color: var(--ag-inherited-drag-handle-color, color-mix(in srgb, transparent, var(--ag-foreground-color) 70%)); --ag-dropdown-shadow: var(--ag-inherited-dropdown-shadow, var(--iress-elevation-floating-shadow, 0px 10px 18px #091E4215)); --ag-filter-tool-panel-group-indent: var(--ag-inherited-filter-tool-panel-group-indent, var(--ag-spacing)); --ag-find-active-match-background-color: var(--ag-inherited-find-active-match-background-color, #ffa500); --ag-find-active-match-color: var(--ag-inherited-find-active-match-color, var(--ag-foreground-color)); --ag-find-match-background-color: var(--ag-inherited-find-match-background-color, #ffff00); --ag-find-match-color: var(--ag-inherited-find-match-color, var(--ag-foreground-color)); --ag-focus-shadow: var(--ag-inherited-focus-shadow, var(--iress-elevation-focus-shadow, 0px 0px 0px 1.5px var(--iress-colour-neutral-10, #FFFFFF), 0px 0px 0px 3.5px #0066FF)); --ag-font-family: var(--ag-inherited-font-family, var(--iress-typography-base-body-font, Inter, Helvetica, sans-serif)); --ag-font-size: var(--ag-inherited-font-size, var(--iress-typography-base-size, .875rem)); --ag-footer-row-border: var(--ag-inherited-footer-row-border, var(--ag-row-border)); --ag-foreground-color: var(--ag-inherited-foreground-color, var(--iress-colour-neutral-80, #393F46)); --ag-header-background-color: var(--ag-inherited-header-background-color, var(--iress-colour-neutral-10, #FFFFFF)); --ag-header-cell-background-transition-duration: var(--ag-inherited-header-cell-background-transition-duration, 0.2s); --ag-header-cell-hover-background-color: var(--ag-inherited-header-cell-hover-background-color, transparent); --ag-header-cell-moving-background-color: var(--ag-inherited-header-cell-moving-background-color, var(--ag-header-cell-hover-background-color)); --ag-header-column-border: var(--ag-inherited-header-column-border, none); --ag-header-column-border-height: var(--ag-inherited-header-column-border-height, 100%); --ag-header-column-resize-handle-color: var(--ag-inherited-header-column-resize-handle-color, var(--ag-border-color)); --ag-header-column-resize-handle-height: var(--ag-inherited-header-column-resize-handle-height, 30%); --ag-header-column-resize-handle-width: var(--ag-inherited-header-column-resize-handle-width, 2px); --ag-header-font-family: var(--ag-inherited-header-font-family, var(--iress-typography-base-body-font, Inter, Helvetica, sans-serif)); --ag-header-font-size: var(--ag-inherited-header-font-size, var(--ag-font-size)); --ag-header-font-weight: var(--ag-inherited-header-font-weight, 700); --ag-header-height: var(--ag-inherited-header-height, calc(max( var(--ag-icon-size) , var(--ag-data-font-size) ) + var(--ag-spacing) \* 4 \* var(--ag-header-vertical-padding-scale) )); --ag-header-row-border: var(--ag-inherited-header-row-border, solid 1px var(--iress-colour-neutral-40, #D7D8DA)); --ag-header-text-color: var(--ag-inherited-header-text-color, var(--ag-text-color)); --ag-header-vertical-padding-scale: var(--ag-inherited-header-vertical-padding-scale, 1); --ag-icon-button-active-background-color: var(--ag-inherited-icon-button-active-background-color, transparent); --ag-icon-button-active-color: var(--ag-inherited-icon-button-active-color, var(--ag-accent-color)); --ag-icon-button-active-indicator-color: var(--ag-inherited-icon-button-active-indicator-color, var(--ag-accent-color)); --ag-icon-button-background-color: var(--ag-inherited-icon-button-background-color, transparent); --ag-icon-button-background-spread: var(--ag-inherited-icon-button-background-spread, 4px); --ag-icon-button-border-radius: var(--ag-inherited-icon-button-border-radius, 1px); --ag-icon-button-color: var(--ag-inherited-icon-button-color, var(--ag-icon-color)); --ag-icon-button-hover-background-color: var(--ag-inherited-icon-button-hover-background-color, transparent); --ag-icon-button-hover-color: var(--ag-inherited-icon-button-hover-color, var(--ag-accent-color)); --ag-icon-color: var(--ag-inherited-icon-color, inherit); --ag-icon-size: var(--ag-inherited-icon-size, 16px); --ag-input-background-color: var(--ag-inherited-input-background-color, var(--ag-background-color)); --ag-input-border: var(--ag-inherited-input-border, solid 1px var(--iress-colour-neutral-70, #6D7278)); --ag-input-border-radius: var(--ag-inherited-input-border-radius, var(--iress-radius-system-form, var(--iress-radius-050, calc(0.5 \* 1rem)) var(--iress-radius-050, calc(0.5 \* 1rem)) var(--iress-radius-050, calc(0.5 \* 1rem)) var(--iress-radius-050, calc(0.5 \* 1rem)))); --ag-input-disabled-background-color: var(--ag-inherited-input-disabled-background-color, var(--iress-colour-neutral-20, #F9F9F9)); --ag-input-disabled-border: var(--ag-inherited-input-disabled-border, solid 1px var(--iress-colour-neutral-40, #D7D8DA)); --ag-input-disabled-text-color: var(--ag-inherited-input-disabled-text-color, var(--iress-colour-neutral-60, #878B92)); --ag-input-focus-background-color: var(--ag-inherited-input-focus-background-color, var(--ag-input-background-color)); --ag-input-focus-border: var(--ag-inherited-input-focus-border, solid 1px color-mix(in srgb, transparent, var(--ag-accent-color) 40%)); --ag-input-focus-shadow: var(--ag-inherited-input-focus-shadow, var(--iress-elevation-focus-shadow, 0px 0px 0px 1.5px var(--iress-colour-neutral-10, #FFFFFF), 0px 0px 0px 3.5px #0066FF)); --ag-input-focus-text-color: var(--ag-inherited-input-focus-text-color, var(--ag-input-text-color)); --ag-input-height: var(--ag-inherited-input-height, calc(max( var(--ag-icon-size) , var(--ag-font-size) ) + var(--ag-spacing) \* 2)); --ag-input-icon-color: var(--ag-inherited-input-icon-color, var(--iress-colour-neutral-70, #6D7278)); --ag-input-invalid-background-color: var(--ag-inherited-input-invalid-background-color, var(--iress-colour-system-danger-surface, #FEE8E7)); --ag-input-invalid-border: var(--ag-inherited-input-invalid-border, var(--iress-colour-system-danger-fill, #C20A0A)); --ag-input-invalid-text-color: var(--ag-inherited-input-invalid-text-color, var(--iress-colour-system-danger-text, #970202)); --ag-input-padding-start: var(--ag-inherited-input-padding-start, var(--ag-spacing)); --ag-input-placeholder-text-color: var(--ag-inherited-input-placeholder-text-color, color-mix(in srgb, transparent, var(--ag-input-text-color) 50%)); --ag-input-text-color: var(--ag-inherited-input-text-color, var(--iress-colour-neutral-80, #393F46)); --ag-invalid-color: var(--ag-inherited-invalid-color, var(--iress-colour-system-danger-fill, #C20A0A)); --ag-list-item-height: var(--ag-inherited-list-item-height, calc(max( var(--ag-icon-size) , var(--ag-data-font-size) ) + var(--ag-widget-vertical-spacing) )); --ag-menu-background-color: var(--ag-inherited-menu-background-color, color-mix(in srgb, var(--ag-background-color), var(--ag-foreground-color) 3%)); --ag-menu-border: var(--ag-inherited-menu-border, solid 1px color-mix(in srgb, transparent, var(--ag-foreground-color) 20%)); --ag-menu-separator-color: var(--ag-inherited-menu-separator-color, var(--ag-border-color)); --ag-menu-shadow: var(--ag-inherited-menu-shadow, var(--iress-elevation-floating-shadow, 0px 10px 18px #091E4215)); --ag-menu-text-color: var(--ag-inherited-menu-text-color, color-mix(in srgb, var(--ag-background-color), var(--ag-foreground-color) 95%)); --ag-modal-overlay-background-color: var(--ag-inherited-modal-overlay-background-color, var(--iress-colour-system-backdrop-fill, #393F46CC)); --ag-odd-row-background-color: var(--ag-inherited-odd-row-background-color, var(--iress-colour-neutral-10, #FFFFFF)); --ag-panel-background-color: var(--ag-inherited-panel-background-color, var(--ag-background-color)); --ag-panel-title-bar-background-color: var(--ag-inherited-panel-title-bar-background-color, var(--ag-header-background-color)); --ag-panel-title-bar-border: var(--ag-inherited-panel-title-bar-border, solid 1px var(--ag-border-color)); --ag-panel-title-bar-font-weight: var(--ag-inherited-panel-title-bar-font-weight, var(--ag-header-font-weight)); --ag-panel-title-bar-icon-color: var(--ag-inherited-panel-title-bar-icon-color, var(--ag-header-text-color)); --ag-panel-title-bar-text-color: var(--ag-inherited-panel-title-bar-text-color, var(--ag-header-text-color)); --ag-picker-button-background-color: var(--ag-inherited-picker-button-background-color, var(--ag-background-color)); --ag-picker-button-border: var(--ag-inherited-picker-button-border, solid 1px var(--ag-border-color)); --ag-picker-button-focus-background-color: var(--ag-inherited-picker-button-focus-background-color, var(--ag-background-color)); --ag-picker-button-focus-border: var(--ag-inherited-picker-button-focus-border, var(--ag-input-focus-border)); --ag-picker-list-background-color: var(--ag-inherited-picker-list-background-color, var(--ag-background-color)); --ag-picker-list-border: var(--ag-inherited-picker-list-border, solid 1px var(--ag-border-color)); --ag-pinned-column-border: var(--ag-inherited-pinned-column-border, solid 1px var(--ag-border-color)); --ag-pinned-row-background-color: var(--ag-inherited-pinned-row-background-color, var(--ag-background-color)); --ag-pinned-row-border: var(--ag-inherited-pinned-row-border, solid 1px var(--ag-border-color)); --ag-pinned-row-font-weight: var(--ag-inherited-pinned-row-font-weight, 600); --ag-pinned-row-text-color: var(--ag-inherited-pinned-row-text-color, var(--ag-text-color)); --ag-pinned-source-row-background-color: var(--ag-inherited-pinned-source-row-background-color, var(--ag-background-color)); --ag-pinned-source-row-font-weight: var(--ag-inherited-pinned-source-row-font-weight, 600); --ag-pinned-source-row-text-color: var(--ag-inherited-pinned-source-row-text-color, var(--ag-text-color)); --ag-popup-shadow: var(--ag-inherited-popup-shadow, var(--iress-elevation-floating-shadow, 0px 10px 18px #091E4215)); --ag-radio-checked-shape-image: var(--ag-inherited-radio-checked-shape-image, url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%226%22%20height%3D%226%22%20fill%3D%22none%22%3E%3Ccircle%20cx%3D%223%22%20cy%3D%223%22%20r%3D%223%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E")); --ag-range-header-highlight-color: var(--ag-inherited-range-header-highlight-color, color-mix(in srgb, var(--ag-header-background-color), var(--ag-foreground-color) 8%)); --ag-range-selection-background-color: var(--ag-inherited-range-selection-background-color, color-mix(in srgb, transparent, var(--ag-accent-color) 10%)); --ag-range-selection-border-color: var(--ag-inherited-range-selection-border-color, var(--iress-colour-primary-fill, #13213F)); --ag-range-selection-border-style: var(--ag-inherited-range-selection-border-style, solid); --ag-range-selection-chart-background-color: var(--ag-inherited-range-selection-chart-background-color, #0058FF1A); --ag-range-selection-chart-category-background-color: var(--ag-inherited-range-selection-chart-category-background-color, #00FF841A); --ag-range-selection-highlight-color: var(--ag-inherited-range-selection-highlight-color, color-mix(in srgb, transparent, var(--ag-accent-color) 50%)); --ag-row-border: var(--ag-inherited-row-border, solid 1px var(--iress-colour-neutral-40, #D7D8DA)); --ag-row-group-indent-size: var(--ag-inherited-row-group-indent-size, calc( var(--ag-cell-widget-spacing) + var(--ag-icon-size) )); --ag-row-height: var(--ag-inherited-row-height, calc(max( var(--ag-icon-size) , var(--ag-data-font-size) ) + var(--ag-spacing) \* 3.25 \* var(--ag-row-vertical-padding-scale) )); --ag-row-hover-color: var(--ag-inherited-row-hover-color, var(--iress-colour-primary-surface, #D9E5FF)); --ag-row-loading-skeleton-effect-color: var(--ag-inherited-row-loading-skeleton-effect-color, color-mix(in srgb, transparent, var(--ag-foreground-color) 15%)); --ag-row-numbers-selected-color: var(--ag-inherited-row-numbers-selected-color, color-mix(in srgb, transparent, var(--ag-accent-color) 50%)); --ag-row-vertical-padding-scale: var(--ag-inherited-row-vertical-padding-scale, 1); --ag-select-cell-background-color: var(--ag-inherited-select-cell-background-color, color-mix(in srgb, transparent, var(--ag-foreground-color) 7.000000000000001%)); --ag-select-cell-border: var(--ag-inherited-select-cell-border, solid 1px color-mix(in srgb, transparent, var(--ag-foreground-color) 13%)); --ag-selected-row-background-color: var(--ag-inherited-selected-row-background-color, var(--iress-colour-neutral-20, #F9F9F9)); --ag-set-filter-indent-size: var(--ag-inherited-set-filter-indent-size, var(--ag-icon-size)); --ag-side-bar-background-color: var(--ag-inherited-side-bar-background-color, transparent); --ag-side-bar-panel-width: var(--ag-inherited-side-bar-panel-width, 250px); --ag-side-button-background-color: var(--ag-inherited-side-button-background-color, transparent); --ag-side-button-bar-background-color: var(--ag-inherited-side-button-bar-background-color, var(--ag-side-bar-background-color)); --ag-side-button-bar-top-padding: var(--ag-inherited-side-button-bar-top-padding, calc( var(--ag-spacing) \* 3)); --ag-side-button-border: var(--ag-inherited-side-button-border, none); --ag-side-button-hover-background-color: var(--ag-inherited-side-button-hover-background-color, var(--ag-side-button-background-color)); --ag-side-button-hover-text-color: var(--ag-inherited-side-button-hover-text-color, var(--ag-accent-color)); --ag-side-button-left-padding: var(--ag-inherited-side-button-left-padding, var(--ag-spacing)); --ag-side-button-right-padding: var(--ag-inherited-side-button-right-padding, var(--ag-spacing)); --ag-side-button-selected-background-color: var(--ag-inherited-side-button-selected-background-color, transparent); --ag-side-button-selected-border: var(--ag-inherited-side-button-selected-border, none); --ag-side-button-selected-text-color: var(--ag-inherited-side-button-selected-text-color, var(--ag-side-button-text-color)); --ag-side-button-selected-underline-color: var(--ag-inherited-side-button-selected-underline-color, var(--ag-accent-color)); --ag-side-button-selected-underline-transition-duration: var(--ag-inherited-side-button-selected-underline-transition-duration, 0.3s); --ag-side-button-selected-underline-width: var(--ag-inherited-side-button-selected-underline-width, 2px); --ag-side-button-text-color: var(--ag-inherited-side-button-text-color, var(--ag-text-color)); --ag-side-button-vertical-padding: var(--ag-inherited-side-button-vertical-padding, calc( var(--ag-spacing) \* 3)); --ag-side-panel-border: var(--ag-inherited-side-panel-border, solid 1px var(--ag-border-color)); --ag-spacing: var(--ag-inherited-spacing, 8px); --ag-status-bar-label-color: var(--ag-inherited-status-bar-label-color, var(--ag-foreground-color)); --ag-status-bar-label-font-weight: var(--ag-inherited-status-bar-label-font-weight, 500); --ag-status-bar-value-color: var(--ag-inherited-status-bar-value-color, var(--ag-foreground-color)); --ag-status-bar-value-font-weight: var(--ag-inherited-status-bar-value-font-weight, 500); --ag-subtle-text-color: var(--ag-inherited-subtle-text-color, var(--iress-colour-neutral-70, #6D7278)); --ag-tab-background-color: var(--ag-inherited-tab-background-color, transparent); --ag-tab-bar-background-color: var(--ag-inherited-tab-bar-background-color, var(--ag-chrome-background-color)); --ag-tab-bar-border: var(--ag-inherited-tab-bar-border, solid 1px var(--iress-colour-primary-fill, #13213F)); --ag-tab-bar-horizontal-padding: var(--ag-inherited-tab-bar-horizontal-padding, 0px); --ag-tab-bar-top-padding: var(--ag-inherited-tab-bar-top-padding, 0px); --ag-tab-bottom-padding: var(--ag-inherited-tab-bottom-padding, var(--ag-spacing)); --ag-tab-horizontal-padding: var(--ag-inherited-tab-horizontal-padding, var(--ag-spacing)); --ag-tab-hover-background-color: var(--ag-inherited-tab-hover-background-color, var(--ag-tab-background-color)); --ag-tab-hover-text-color: var(--ag-inherited-tab-hover-text-color, var(--ag-accent-color)); --ag-tab-selected-background-color: var(--ag-inherited-tab-selected-background-color, var(--ag-tab-background-color)); --ag-tab-selected-border-color: var(--ag-inherited-tab-selected-border-color, transparent); --ag-tab-selected-border-width: var(--ag-inherited-tab-selected-border-width, 0px); --ag-tab-selected-text-color: var(--ag-inherited-tab-selected-text-color, var(--ag-accent-color)); --ag-tab-selected-underline-color: var(--ag-inherited-tab-selected-underline-color, var(--ag-accent-color)); --ag-tab-selected-underline-transition-duration: var(--ag-inherited-tab-selected-underline-transition-duration, 0.3s); --ag-tab-selected-underline-width: var(--ag-inherited-tab-selected-underline-width, 2px); --ag-tab-spacing: var(--ag-inherited-tab-spacing, 0); --ag-tab-text-color: var(--ag-inherited-tab-text-color, var(--ag-text-color)); --ag-tab-top-padding: var(--ag-inherited-tab-top-padding, var(--ag-spacing)); --ag-text-color: var(--ag-inherited-text-color, var(--ag-foreground-color)); --ag-toggle-button-height: var(--ag-inherited-toggle-button-height, 18px); --ag-toggle-button-off-background-color: var(--ag-inherited-toggle-button-off-background-color, color-mix(in srgb, var(--ag-background-color), var(--ag-foreground-color) 45%)); --ag-toggle-button-on-background-color: var(--ag-inherited-toggle-button-on-background-color, var(--ag-accent-color)); --ag-toggle-button-switch-background-color: var(--ag-inherited-toggle-button-switch-background-color, var(--ag-background-color)); --ag-toggle-button-switch-inset: var(--ag-inherited-toggle-button-switch-inset, 1px); --ag-toggle-button-width: var(--ag-inherited-toggle-button-width, 28px); --ag-tool-panel-separator-border: var(--ag-inherited-tool-panel-separator-border, solid 1px var(--ag-border-color)); --ag-tooltip-background-color: var(--ag-inherited-tooltip-background-color, var(--iress-colour-neutral-80, #393F46)); --ag-tooltip-border: var(--ag-inherited-tooltip-border, solid 1px var(--ag-border-color)); --ag-tooltip-text-color: var(--ag-inherited-tooltip-text-color, var(--iress-colour-neutral-10, #FFFFFF)); --ag-value-change-delta-down-color: var(--ag-inherited-value-change-delta-down-color, var(--iress-colour-system-danger-fill, #C20A0A)); --ag-value-change-delta-up-color: var(--ag-inherited-value-change-delta-up-color, var(--iress-colour-system-success-fill, #02794D)); --ag-value-change-value-highlight-background-color: var(--ag-inherited-value-change-value-highlight-background-color, color-mix(in srgb, transparent, var(--ag-accent-color) 20%)); --ag-widget-container-horizontal-padding: var(--ag-inherited-widget-container-horizontal-padding, calc( var(--ag-spacing) \* 1.5)); --ag-widget-container-vertical-padding: var(--ag-inherited-widget-container-vertical-padding, calc( var(--ag-spacing) \* 1.5)); --ag-widget-horizontal-spacing: var(--ag-inherited-widget-horizontal-spacing, calc( var(--ag-spacing) \* 1.5)); --ag-widget-vertical-spacing: var(--ag-inherited-widget-vertical-spacing, var(--ag-spacing)); --ag-wrapper-border: var(--ag-inherited-wrapper-border, none); --ag-wrapper-border-radius: var(--ag-inherited-wrapper-border-radius, var(--iress-radius-system-layout, var(--iress-radius-100, 1rem) var(--iress-radius-100, 1rem) var(--iress-radius-100, 1rem) var(--iress-radius-100, 1rem))); :where(\[data-ag-theme-mode="light"\]) & { --ag-browser-color-scheme: var(--ag-inherited-browser-color-scheme, light); --ag-chrome-background-color: var(--ag-inherited-chrome-background-color, color-mix(in srgb, var(--ag-background-color), var(--ag-foreground-color) 2%)); } :where(\[data-ag-theme-mode="dark"\]) & { --ag-advanced-filter-builder-column-pill-color: var(--ag-inherited-advanced-filter-builder-column-pill-color, #355f2d); --ag-advanced-filter-builder-join-pill-color: var(--ag-inherited-advanced-filter-builder-join-pill-color, #7a3a37); --ag-advanced-filter-builder-option-pill-color: var(--ag-inherited-advanced-filter-builder-option-pill-color, #5a3168); --ag-advanced-filter-builder-value-pill-color: var(--ag-inherited-advanced-filter-builder-value-pill-color, #374c86); --ag-browser-color-scheme: var(--ag-inherited-browser-color-scheme, dark); --ag-chrome-background-color: var(--ag-inherited-chrome-background-color, color-mix(in srgb, var(--ag-background-color), var(--ag-foreground-color) 5%)); --ag-find-active-match-color: var(--ag-inherited-find-active-match-color, var(--ag-background-color)); --ag-find-match-color: var(--ag-inherited-find-match-color, var(--ag-background-color)); --ag-menu-background-color: var(--ag-inherited-menu-background-color, color-mix(in srgb, var(--ag-background-color), var(--ag-foreground-color) 10%)); } :where(\[data-ag-theme-mode="dark-blue"\]) & { --ag-advanced-filter-builder-column-pill-color: var(--ag-inherited-advanced-filter-builder-column-pill-color, #355f2d); --ag-advanced-filter-builder-join-pill-color: var(--ag-inherited-advanced-filter-builder-join-pill-color, #7a3a37); --ag-advanced-filter-builder-option-pill-color: var(--ag-inherited-advanced-filter-builder-option-pill-color, #5a3168); --ag-advanced-filter-builder-value-pill-color: var(--ag-inherited-advanced-filter-builder-value-pill-color, #374c86); --ag-browser-color-scheme: var(--ag-inherited-browser-color-scheme, dark); --ag-chrome-background-color: var(--ag-inherited-chrome-background-color, color-mix(in srgb, var(--ag-background-color), var(--ag-foreground-color) 5%)); --ag-find-active-match-color: var(--ag-inherited-find-active-match-color, var(--ag-background-color)); --ag-find-match-color: var(--ag-inherited-find-match-color, var(--ag-background-color)); --ag-menu-background-color: var(--ag-inherited-menu-background-color, color-mix(in srgb, var(--ag-background-color), var(--ag-foreground-color) 10%)); } } :has(> :where(.ag-theme-params-1)):not(:where(.ag-theme-params-1)) { --ag-inherited-accent-color: var(--ag-accent-color); --ag-inherited-advanced-filter-builder-button-bar-border: var(--ag-advanced-filter-builder-button-bar-border); --ag-inherited-advanced-filter-builder-column-pill-color: var(--ag-advanced-filter-builder-column-pill-color); --ag-inherited-advanced-filter-builder-indent-size: var(--ag-advanced-filter-builder-indent-size); --ag-inherited-advanced-filter-builder-join-pill-color: var(--ag-advanced-filter-builder-join-pill-color); --ag-inherited-advanced-filter-builder-option-pill-color: var(--ag-advanced-filter-builder-option-pill-color); --ag-inherited-advanced-filter-builder-value-pill-color: var(--ag-advanced-filter-builder-value-pill-color); --ag-inherited-background-color: var(--ag-background-color); --ag-inherited-border-color: var(--ag-border-color); --ag-inherited-border-radius: var(--ag-border-radius); --ag-inherited-browser-color-scheme: var(--ag-browser-color-scheme); --ag-inherited-button-active-background-color: var(--ag-button-active-background-color); --ag-inherited-button-active-border: var(--ag-button-active-border); --ag-inherited-button-active-text-color: var(--ag-button-active-text-color); --ag-inherited-button-background-color: var(--ag-button-background-color); --ag-inherited-button-border: var(--ag-button-border); --ag-inherited-button-border-radius: var(--ag-button-border-radius); --ag-inherited-button-disabled-background-color: var(--ag-button-disabled-background-color); --ag-inherited-button-disabled-border: var(--ag-button-disabled-border); --ag-inherited-button-disabled-text-color: var(--ag-button-disabled-text-color); --ag-inherited-button-font-weight: var(--ag-button-font-weight); --ag-inherited-button-horizontal-padding: var(--ag-button-horizontal-padding); --ag-inherited-button-hover-background-color: var(--ag-button-hover-background-color); --ag-inherited-button-hover-border: var(--ag-button-hover-border); --ag-inherited-button-hover-text-color: var(--ag-button-hover-text-color); --ag-inherited-button-text-color: var(--ag-button-text-color); --ag-inherited-button-vertical-padding: var(--ag-button-vertical-padding); --ag-inherited-card-shadow: var(--ag-card-shadow); --ag-inherited-cell-editing-border: var(--ag-cell-editing-border); --ag-inherited-cell-editing-shadow: var(--ag-cell-editing-shadow); --ag-inherited-cell-font-family: var(--ag-cell-font-family); --ag-inherited-cell-horizontal-padding: var(--ag-cell-horizontal-padding); --ag-inherited-cell-horizontal-padding-scale: var(--ag-cell-horizontal-padding-scale); --ag-inherited-cell-text-color: var(--ag-cell-text-color); --ag-inherited-cell-widget-spacing: var(--ag-cell-widget-spacing); --ag-inherited-chart-menu-label-color: var(--ag-chart-menu-label-color); --ag-inherited-chart-menu-panel-width: var(--ag-chart-menu-panel-width); --ag-inherited-checkbox-border-radius: var(--ag-checkbox-border-radius); --ag-inherited-checkbox-border-width: var(--ag-checkbox-border-width); --ag-inherited-checkbox-checked-background-color: var(--ag-checkbox-checked-background-color); --ag-inherited-checkbox-checked-border-color: var(--ag-checkbox-checked-border-color); --ag-inherited-checkbox-checked-shape-color: var(--ag-checkbox-checked-shape-color); --ag-inherited-checkbox-checked-shape-image: var(--ag-checkbox-checked-shape-image); --ag-inherited-checkbox-indeterminate-background-color: var(--ag-checkbox-indeterminate-background-color); --ag-inherited-checkbox-indeterminate-border-color: var(--ag-checkbox-indeterminate-border-color); --ag-inherited-checkbox-indeterminate-shape-color: var(--ag-checkbox-indeterminate-shape-color); --ag-inherited-checkbox-indeterminate-shape-image: var(--ag-checkbox-indeterminate-shape-image); --ag-inherited-checkbox-unchecked-background-color: var(--ag-checkbox-unchecked-background-color); --ag-inherited-checkbox-unchecked-border-color: var(--ag-checkbox-unchecked-border-color); --ag-inherited-chrome-background-color: var(--ag-chrome-background-color); --ag-inherited-column-border: var(--ag-column-border); --ag-inherited-column-drop-cell-background-color: var(--ag-column-drop-cell-background-color); --ag-inherited-column-drop-cell-border: var(--ag-column-drop-cell-border); --ag-inherited-column-drop-cell-drag-handle-color: var(--ag-column-drop-cell-drag-handle-color); --ag-inherited-column-drop-cell-text-color: var(--ag-column-drop-cell-text-color); --ag-inherited-column-hover-color: var(--ag-column-hover-color); --ag-inherited-column-select-indent-size: var(--ag-column-select-indent-size); --ag-inherited-data-font-size: var(--ag-data-font-size); --ag-inherited-dialog-border: var(--ag-dialog-border); --ag-inherited-dialog-shadow: var(--ag-dialog-shadow); --ag-inherited-drag-and-drop-image-background-color: var(--ag-drag-and-drop-image-background-color); --ag-inherited-drag-and-drop-image-border: var(--ag-drag-and-drop-image-border); --ag-inherited-drag-and-drop-image-shadow: var(--ag-drag-and-drop-image-shadow); --ag-inherited-drag-handle-color: var(--ag-drag-handle-color); --ag-inherited-dropdown-shadow: var(--ag-dropdown-shadow); --ag-inherited-filter-tool-panel-group-indent: var(--ag-filter-tool-panel-group-indent); --ag-inherited-find-active-match-background-color: var(--ag-find-active-match-background-color); --ag-inherited-find-active-match-color: var(--ag-find-active-match-color); --ag-inherited-find-match-background-color: var(--ag-find-match-background-color); --ag-inherited-find-match-color: var(--ag-find-match-color); --ag-inherited-focus-shadow: var(--ag-focus-shadow); --ag-inherited-font-family: var(--ag-font-family); --ag-inherited-font-size: var(--ag-font-size); --ag-inherited-footer-row-border: var(--ag-footer-row-border); --ag-inherited-foreground-color: var(--ag-foreground-color); --ag-inherited-header-background-color: var(--ag-header-background-color); --ag-inherited-header-cell-background-transition-duration: var(--ag-header-cell-background-transition-duration); --ag-inherited-header-cell-hover-background-color: var(--ag-header-cell-hover-background-color); --ag-inherited-header-cell-moving-background-color: var(--ag-header-cell-moving-background-color); --ag-inherited-header-column-border: var(--ag-header-column-border); --ag-inherited-header-column-border-height: var(--ag-header-column-border-height); --ag-inherited-header-column-resize-handle-color: var(--ag-header-column-resize-handle-color); --ag-inherited-header-column-resize-handle-height: var(--ag-header-column-resize-handle-height); --ag-inherited-header-column-resize-handle-width: var(--ag-header-column-resize-handle-width); --ag-inherited-header-font-family: var(--ag-header-font-family); --ag-inherited-header-font-size: var(--ag-header-font-size); --ag-inherited-header-font-weight: var(--ag-header-font-weight); --ag-inherited-header-height: var(--ag-header-height); --ag-inherited-header-row-border: var(--ag-header-row-border); --ag-inherited-header-text-color: var(--ag-header-text-color); --ag-inherited-header-vertical-padding-scale: var(--ag-header-vertical-padding-scale); --ag-inherited-icon-button-active-background-color: var(--ag-icon-button-active-background-color); --ag-inherited-icon-button-active-color: var(--ag-icon-button-active-color); --ag-inherited-icon-button-active-indicator-color: var(--ag-icon-button-active-indicator-color); --ag-inherited-icon-button-background-color: var(--ag-icon-button-background-color); --ag-inherited-icon-button-background-spread: var(--ag-icon-button-background-spread); --ag-inherited-icon-button-border-radius: var(--ag-icon-button-border-radius); --ag-inherited-icon-button-color: var(--ag-icon-button-color); --ag-inherited-icon-button-hover-background-color: var(--ag-icon-button-hover-background-color); --ag-inherited-icon-button-hover-color: var(--ag-icon-button-hover-color); --ag-inherited-icon-color: var(--ag-icon-color); --ag-inherited-icon-size: var(--ag-icon-size); --ag-inherited-input-background-color: var(--ag-input-background-color); --ag-inherited-input-border: var(--ag-input-border); --ag-inherited-input-border-radius: var(--ag-input-border-radius); --ag-inherited-input-disabled-background-color: var(--ag-input-disabled-background-color); --ag-inherited-input-disabled-border: var(--ag-input-disabled-border); --ag-inherited-input-disabled-text-color: var(--ag-input-disabled-text-color); --ag-inherited-input-focus-background-color: var(--ag-input-focus-background-color); --ag-inherited-input-focus-border: var(--ag-input-focus-border); --ag-inherited-input-focus-shadow: var(--ag-input-focus-shadow); --ag-inherited-input-focus-text-color: var(--ag-input-focus-text-color); --ag-inherited-input-height: var(--ag-input-height); --ag-inherited-input-icon-color: var(--ag-input-icon-color); --ag-inherited-input-invalid-background-color: var(--ag-input-invalid-background-color); --ag-inherited-input-invalid-border: var(--ag-input-invalid-border); --ag-inherited-input-invalid-text-color: var(--ag-input-invalid-text-color); --ag-inherited-input-padding-start: var(--ag-input-padding-start); --ag-inherited-input-placeholder-text-color: var(--ag-input-placeholder-text-color); --ag-inherited-input-text-color: var(--ag-input-text-color); --ag-inherited-invalid-color: var(--ag-invalid-color); --ag-inherited-list-item-height: var(--ag-list-item-height); --ag-inherited-menu-background-color: var(--ag-menu-background-color); --ag-inherited-menu-border: var(--ag-menu-border); --ag-inherited-menu-separator-color: var(--ag-menu-separator-color); --ag-inherited-menu-shadow: var(--ag-menu-shadow); --ag-inherited-menu-text-color: var(--ag-menu-text-color); --ag-inherited-modal-overlay-background-color: var(--ag-modal-overlay-background-color); --ag-inherited-odd-row-background-color: var(--ag-odd-row-background-color); --ag-inherited-panel-background-color: var(--ag-panel-background-color); --ag-inherited-panel-title-bar-background-color: var(--ag-panel-title-bar-background-color); --ag-inherited-panel-title-bar-border: var(--ag-panel-title-bar-border); --ag-inherited-panel-title-bar-font-weight: var(--ag-panel-title-bar-font-weight); --ag-inherited-panel-title-bar-icon-color: var(--ag-panel-title-bar-icon-color); --ag-inherited-panel-title-bar-text-color: var(--ag-panel-title-bar-text-color); --ag-inherited-picker-button-background-color: var(--ag-picker-button-background-color); --ag-inherited-picker-button-border: var(--ag-picker-button-border); --ag-inherited-picker-button-focus-background-color: var(--ag-picker-button-focus-background-color); --ag-inherited-picker-button-focus-border: var(--ag-picker-button-focus-border); --ag-inherited-picker-list-background-color: var(--ag-picker-list-background-color); --ag-inherited-picker-list-border: var(--ag-picker-list-border); --ag-inherited-pinned-column-border: var(--ag-pinned-column-border); --ag-inherited-pinned-row-background-color: var(--ag-pinned-row-background-color); --ag-inherited-pinned-row-border: var(--ag-pinned-row-border); --ag-inherited-pinned-row-font-weight: var(--ag-pinned-row-font-weight); --ag-inherited-pinned-row-text-color: var(--ag-pinned-row-text-color); --ag-inherited-pinned-source-row-background-color: var(--ag-pinned-source-row-background-color); --ag-inherited-pinned-source-row-font-weight: var(--ag-pinned-source-row-font-weight); --ag-inherited-pinned-source-row-text-color: var(--ag-pinned-source-row-text-color); --ag-inherited-popup-shadow: var(--ag-popup-shadow); --ag-inherited-radio-checked-shape-image: var(--ag-radio-checked-shape-image); --ag-inherited-range-header-highlight-color: var(--ag-range-header-highlight-color); --ag-inherited-range-selection-background-color: var(--ag-range-selection-background-color); --ag-inherited-range-selection-border-color: var(--ag-range-selection-border-color); --ag-inherited-range-selection-border-style: var(--ag-range-selection-border-style); --ag-inherited-range-selection-chart-background-color: var(--ag-range-selection-chart-background-color); --ag-inherited-range-selection-chart-category-background-color: var(--ag-range-selection-chart-category-background-color); --ag-inherited-range-selection-highlight-color: var(--ag-range-selection-highlight-color); --ag-inherited-row-border: var(--ag-row-border); --ag-inherited-row-group-indent-size: var(--ag-row-group-indent-size); --ag-inherited-row-height: var(--ag-row-height); --ag-inherited-row-hover-color: var(--ag-row-hover-color); --ag-inherited-row-loading-skeleton-effect-color: var(--ag-row-loading-skeleton-effect-color); --ag-inherited-row-numbers-selected-color: var(--ag-row-numbers-selected-color); --ag-inherited-row-vertical-padding-scale: var(--ag-row-vertical-padding-scale); --ag-inherited-select-cell-background-color: var(--ag-select-cell-background-color); --ag-inherited-select-cell-border: var(--ag-select-cell-border); --ag-inherited-selected-row-background-color: var(--ag-selected-row-background-color); --ag-inherited-set-filter-indent-size: var(--ag-set-filter-indent-size); --ag-inherited-side-bar-background-color: var(--ag-side-bar-background-color); --ag-inherited-side-bar-panel-width: var(--ag-side-bar-panel-width); --ag-inherited-side-button-background-color: var(--ag-side-button-background-color); --ag-inherited-side-button-bar-background-color: var(--ag-side-button-bar-background-color); --ag-inherited-side-button-bar-top-padding: var(--ag-side-button-bar-top-padding); --ag-inherited-side-button-border: var(--ag-side-button-border); --ag-inherited-side-button-hover-background-color: var(--ag-side-button-hover-background-color); --ag-inherited-side-button-hover-text-color: var(--ag-side-button-hover-text-color); --ag-inherited-side-button-left-padding: var(--ag-side-button-left-padding); --ag-inherited-side-button-right-padding: var(--ag-side-button-right-padding); --ag-inherited-side-button-selected-background-color: var(--ag-side-button-selected-background-color); --ag-inherited-side-button-selected-border: var(--ag-side-button-selected-border); --ag-inherited-side-button-selected-text-color: var(--ag-side-button-selected-text-color); --ag-inherited-side-button-selected-underline-color: var(--ag-side-button-selected-underline-color); --ag-inherited-side-button-selected-underline-transition-duration: var(--ag-side-button-selected-underline-transition-duration); --ag-inherited-side-button-selected-underline-width: var(--ag-side-button-selected-underline-width); --ag-inherited-side-button-text-color: var(--ag-side-button-text-color); --ag-inherited-side-button-vertical-padding: var(--ag-side-button-vertical-padding); --ag-inherited-side-panel-border: var(--ag-side-panel-border); --ag-inherited-spacing: var(--ag-spacing); --ag-inherited-status-bar-label-color: var(--ag-status-bar-label-color); --ag-inherited-status-bar-label-font-weight: var(--ag-status-bar-label-font-weight); --ag-inherited-status-bar-value-color: var(--ag-status-bar-value-color); --ag-inherited-status-bar-value-font-weight: var(--ag-status-bar-value-font-weight); --ag-inherited-subtle-text-color: var(--ag-subtle-text-color); --ag-inherited-tab-background-color: var(--ag-tab-background-color); --ag-inherited-tab-bar-background-color: var(--ag-tab-bar-background-color); --ag-inherited-tab-bar-border: var(--ag-tab-bar-border); --ag-inherited-tab-bar-horizontal-padding: var(--ag-tab-bar-horizontal-padding); --ag-inherited-tab-bar-top-padding: var(--ag-tab-bar-top-padding); --ag-inherited-tab-bottom-padding: var(--ag-tab-bottom-padding); --ag-inherited-tab-horizontal-padding: var(--ag-tab-horizontal-padding); --ag-inherited-tab-hover-background-color: var(--ag-tab-hover-background-color); --ag-inherited-tab-hover-text-color: var(--ag-tab-hover-text-color); --ag-inherited-tab-selected-background-color: var(--ag-tab-selected-background-color); --ag-inherited-tab-selected-border-color: var(--ag-tab-selected-border-color); --ag-inherited-tab-selected-border-width: var(--ag-tab-selected-border-width); --ag-inherited-tab-selected-text-color: var(--ag-tab-selected-text-color); --ag-inherited-tab-selected-underline-color: var(--ag-tab-selected-underline-color); --ag-inherited-tab-selected-underline-transition-duration: var(--ag-tab-selected-underline-transition-duration); --ag-inherited-tab-selected-underline-width: var(--ag-tab-selected-underline-width); --ag-inherited-tab-spacing: var(--ag-tab-spacing); --ag-inherited-tab-text-color: var(--ag-tab-text-color); --ag-inherited-tab-top-padding: var(--ag-tab-top-padding); --ag-inherited-text-color: var(--ag-text-color); --ag-inherited-toggle-button-height: var(--ag-toggle-button-height); --ag-inherited-toggle-button-off-background-color: var(--ag-toggle-button-off-background-color); --ag-inherited-toggle-button-on-background-color: var(--ag-toggle-button-on-background-color); --ag-inherited-toggle-button-switch-background-color: var(--ag-toggle-button-switch-background-color); --ag-inherited-toggle-button-switch-inset: var(--ag-toggle-button-switch-inset); --ag-inherited-toggle-button-width: var(--ag-toggle-button-width); --ag-inherited-tool-panel-separator-border: var(--ag-tool-panel-separator-border); --ag-inherited-tooltip-background-color: var(--ag-tooltip-background-color); --ag-inherited-tooltip-border: var(--ag-tooltip-border); --ag-inherited-tooltip-text-color: var(--ag-tooltip-text-color); --ag-inherited-value-change-delta-down-color: var(--ag-value-change-delta-down-color); --ag-inherited-value-change-delta-up-color: var(--ag-value-change-delta-up-color); --ag-inherited-value-change-value-highlight-background-color: var(--ag-value-change-value-highlight-background-color); --ag-inherited-widget-container-horizontal-padding: var(--ag-widget-container-horizontal-padding); --ag-inherited-widget-container-vertical-padding: var(--ag-widget-container-vertical-padding); --ag-inherited-widget-horizontal-spacing: var(--ag-widget-horizontal-spacing); --ag-inherited-widget-vertical-spacing: var(--ag-widget-vertical-spacing); --ag-inherited-wrapper-border: var(--ag-wrapper-border); --ag-inherited-wrapper-border-radius: var(--ag-wrapper-border-radius); :where(\[data-ag-theme-mode="light"\]) & { --ag-inherited-browser-color-scheme: var(--ag-browser-color-scheme); --ag-inherited-chrome-background-color: var(--ag-chrome-background-color); } :where(\[data-ag-theme-mode="dark"\]) & { --ag-inherited-advanced-filter-builder-column-pill-color: var(--ag-advanced-filter-builder-column-pill-color); --ag-inherited-advanced-filter-builder-join-pill-color: var(--ag-advanced-filter-builder-join-pill-color); --ag-inherited-advanced-filter-builder-option-pill-color: var(--ag-advanced-filter-builder-option-pill-color); --ag-inherited-advanced-filter-builder-value-pill-color: var(--ag-advanced-filter-builder-value-pill-color); --ag-inherited-browser-color-scheme: var(--ag-browser-color-scheme); --ag-inherited-chrome-background-color: var(--ag-chrome-background-color); --ag-inherited-find-active-match-color: var(--ag-find-active-match-color); --ag-inherited-find-match-color: var(--ag-find-match-color); --ag-inherited-menu-background-color: var(--ag-menu-background-color); } :where(\[data-ag-theme-mode="dark-blue"\]) & { --ag-inherited-advanced-filter-builder-column-pill-color: var(--ag-advanced-filter-builder-column-pill-color); --ag-inherited-advanced-filter-builder-join-pill-color: var(--ag-advanced-filter-builder-join-pill-color); --ag-inherited-advanced-filter-builder-option-pill-color: var(--ag-advanced-filter-builder-option-pill-color); --ag-inherited-advanced-filter-builder-value-pill-color: var(--ag-advanced-filter-builder-value-pill-color); --ag-inherited-browser-color-scheme: var(--ag-browser-color-scheme); --ag-inherited-chrome-background-color: var(--ag-chrome-background-color); --ag-inherited-find-active-match-color: var(--ag-find-active-match-color); --ag-inherited-find-match-color: var(--ag-find-match-color); --ag-inherited-menu-background-color: var(--ag-menu-background-color); } }
-
-Drag here to set row groups
-
-Drag here to set column labels
-
-Make
-
-Model
-
-Price
-
-Electric
-
-Order
-
-Tesla
-
-Model Y
-
-$64,950
-
-Order
-
-Ford
-
-F-Series
-
-$33,850
-
-Order
-
-Toyota
-
-Corolla
-
-$29,600
-
-Order
-
-Page Size:
-
-500
-
-1 to 3 of 3
-
-Page 1 of 1
-
-Show code
-
-### [](#complex)Complex
-
-This is a complex example showcasing some of the more advanced features of AG Grid.
-
-/\* Ellipsis text \*/ .iress-cell--ellipsis .ag-cell-wrapper { overflow: hidden; } .iress-cell--ellipsis .ag-cell-wrapper .ag-cell-value { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /\* Column divider \*/ .ag-header-cell.iress-cell--divider, .ag-cell.iress-cell--divider { border-inline-end: 1px solid var(--iress-colour-neutral-40, #D7D8DA); } /\* Positive and negative values \*/ .ag-cell.iress--positive, .ag-cell .iress--positive { color: var(--iress-colour-system-success-text, #015537); } .ag-cell.iress--negative, .ag-cell .iress--negative { color: var(--iress-colour-system-danger-text, #970202); } .ag-cell.iress--zero, .ag-cell .iress--zero { color: var(--iress-colour-neutral-70, #6D7278); }
-
-:where(.ag-theme-params-4) { --ag-accent-color: var(--ag-inherited-accent-color, var(--iress-colour-primary-fill, #13213F)); --ag-advanced-filter-builder-button-bar-border: var(--ag-inherited-advanced-filter-builder-button-bar-border, solid 1px var(--ag-border-color)); --ag-advanced-filter-builder-column-pill-color: var(--ag-inherited-advanced-filter-builder-column-pill-color, #a6e194); --ag-advanced-filter-builder-indent-size: var(--ag-inherited-advanced-filter-builder-indent-size, calc( var(--ag-spacing) \* 2 + var(--ag-icon-size) )); --ag-advanced-filter-builder-join-pill-color: var(--ag-inherited-advanced-filter-builder-join-pill-color, #f08e8d); --ag-advanced-filter-builder-option-pill-color: var(--ag-inherited-advanced-filter-builder-option-pill-color, #f3c08b); --ag-advanced-filter-builder-value-pill-color: var(--ag-inherited-advanced-filter-builder-value-pill-color, #85c0e4); --ag-background-color: var(--ag-inherited-background-color, var(--iress-colour-neutral-10, #FFFFFF)); --ag-border-color: var(--ag-inherited-border-color, var(--iress-colour-neutral-30, #E4E5E7)); --ag-border-radius: var(--ag-inherited-border-radius, var(--iress-radius-system-layout, var(--iress-radius-100, 1rem) var(--iress-radius-100, 1rem) var(--iress-radius-100, 1rem) var(--iress-radius-100, 1rem))); --ag-browser-color-scheme: var(--ag-inherited-browser-color-scheme, light); --ag-button-active-background-color: var(--ag-inherited-button-active-background-color, var(--ag-accent-color)); --ag-button-active-border: var(--ag-inherited-button-active-border, var(--ag-button-hover-border)); --ag-button-active-text-color: var(--ag-inherited-button-active-text-color, var(--ag-background-color)); --ag-button-background-color: var(--ag-inherited-button-background-color, var(--iress-colour-primary-surface, #D9E5FF)); --ag-button-border: var(--ag-inherited-button-border, solid 1px var(--iress-colour-primary-surface, #D9E5FF)); --ag-button-border-radius: var(--ag-inherited-button-border-radius, var(--iress-radius-system-button, var(--iress-radius-075, calc(0.75 \* 1rem)) var(--iress-radius-075, calc(0.75 \* 1rem)) var(--iress-radius-075, calc(0.75 \* 1rem)) var(--iress-radius-075, calc(0.75 \* 1rem)))); --ag-button-disabled-background-color: var(--ag-inherited-button-disabled-background-color, var(--ag-input-disabled-background-color)); --ag-button-disabled-border: var(--ag-inherited-button-disabled-border, var(--ag-input-disabled-border)); --ag-button-disabled-text-color: var(--ag-inherited-button-disabled-text-color, var(--ag-input-disabled-text-color)); --ag-button-font-weight: var(--ag-inherited-button-font-weight, 600); --ag-button-horizontal-padding: var(--ag-inherited-button-horizontal-padding, calc( var(--ag-spacing) \* 2)); --ag-button-hover-background-color: var(--ag-inherited-button-hover-background-color, var(--ag-row-hover-color)); --ag-button-hover-border: var(--ag-inherited-button-hover-border, var(--ag-button-border)); --ag-button-hover-text-color: var(--ag-inherited-button-hover-text-color, var(--ag-button-text-color)); --ag-button-text-color: var(--ag-inherited-button-text-color, var(--iress-colour-primary-text, #13213F)); --ag-button-vertical-padding: var(--ag-inherited-button-vertical-padding, var(--ag-spacing)); --ag-card-shadow: var(--ag-inherited-card-shadow, var(--iress-elevation-raised-shadow, 0px 3px 5px #091E4220)); --ag-cell-editing-border: var(--ag-inherited-cell-editing-border, solid 1px var(--ag-accent-color)); --ag-cell-editing-shadow: var(--ag-inherited-cell-editing-shadow, var(--ag-card-shadow)); --ag-cell-font-family: var(--ag-inherited-cell-font-family, var(--iress-typography-base-body-font, Inter, Helvetica, sans-serif)); --ag-cell-horizontal-padding: var(--ag-inherited-cell-horizontal-padding, calc( var(--ag-spacing) \* 2 \* var(--ag-cell-horizontal-padding-scale) )); --ag-cell-horizontal-padding-scale: var(--ag-inherited-cell-horizontal-padding-scale, 1); --ag-cell-text-color: var(--ag-inherited-cell-text-color, var(--ag-text-color)); --ag-cell-widget-spacing: var(--ag-inherited-cell-widget-spacing, calc( var(--ag-spacing) \* 1.5)); --ag-chart-menu-label-color: var(--ag-inherited-chart-menu-label-color, color-mix(in srgb, transparent, var(--ag-foreground-color) 80%)); --ag-chart-menu-panel-width: var(--ag-inherited-chart-menu-panel-width, 260px); --ag-checkbox-border-radius: var(--ag-inherited-checkbox-border-radius, var(--iress-radius-system-badge, var(--iress-radius-025, calc(0.25 \* 1rem)) var(--iress-radius-025, calc(0.25 \* 1rem)) var(--iress-radius-025, calc(0.25 \* 1rem)) var(--iress-radius-025, calc(0.25 \* 1rem)))); --ag-checkbox-border-width: var(--ag-inherited-checkbox-border-width, 1px); --ag-checkbox-checked-background-color: var(--ag-inherited-checkbox-checked-background-color, var(--iress-colour-primary-fill, #13213F)); --ag-checkbox-checked-border-color: var(--ag-inherited-checkbox-checked-border-color, var(--iress-colour-primary-fill, #13213F)); --ag-checkbox-checked-shape-color: var(--ag-inherited-checkbox-checked-shape-color, var(--iress-colour-primary-on-fill, #ECF2FF)); --ag-checkbox-checked-shape-image: var(--ag-inherited-checkbox-checked-shape-image, url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%227%22%20fill%3D%22none%22%3E%3Cpath%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.75%22%20d%3D%22M1%203.5%203.5%206l5-5%22%2F%3E%3C%2Fsvg%3E")); --ag-checkbox-indeterminate-background-color: var(--ag-inherited-checkbox-indeterminate-background-color, var(--iress-colour-primary-fill, #13213F)); --ag-checkbox-indeterminate-border-color: var(--ag-inherited-checkbox-indeterminate-border-color, var(--iress-colour-primary-fill, #13213F)); --ag-checkbox-indeterminate-shape-color: var(--ag-inherited-checkbox-indeterminate-shape-color, var(--iress-colour-primary-on-fill, #ECF2FF)); --ag-checkbox-indeterminate-shape-image: var(--ag-inherited-checkbox-indeterminate-shape-image, url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%222%22%20fill%3D%22none%22%3E%3Crect%20width%3D%2210%22%20height%3D%222%22%20fill%3D%22%23000%22%20rx%3D%221%22%2F%3E%3C%2Fsvg%3E")); --ag-checkbox-unchecked-background-color: var(--ag-inherited-checkbox-unchecked-background-color, var(--iress-colour-neutral-10, #FFFFFF)); --ag-checkbox-unchecked-border-color: var(--ag-inherited-checkbox-unchecked-border-color, var(--iress-colour-neutral-70, #6D7278)); --ag-chrome-background-color: var(--ag-inherited-chrome-background-color, color-mix(in srgb, var(--ag-background-color), var(--ag-foreground-color) 2%)); --ag-column-border: var(--ag-inherited-column-border, solid 1px transparent); --ag-column-drop-cell-background-color: var(--ag-inherited-column-drop-cell-background-color, color-mix(in srgb, transparent, var(--ag-foreground-color) 7.000000000000001%)); --ag-column-drop-cell-border: var(--ag-inherited-column-drop-cell-border, solid 1px color-mix(in srgb, transparent, var(--ag-foreground-color) 13%)); --ag-column-drop-cell-drag-handle-color: var(--ag-inherited-column-drop-cell-drag-handle-color, var(--ag-text-color)); --ag-column-drop-cell-text-color: var(--ag-inherited-column-drop-cell-text-color, var(--ag-text-color)); --ag-column-hover-color: var(--ag-inherited-column-hover-color, var(--iress-colour-neutral-20, #F9F9F9)); --ag-column-select-indent-size: var(--ag-inherited-column-select-indent-size, var(--ag-icon-size)); --ag-data-font-size: var(--ag-inherited-data-font-size, var(--iress-typography-base-size, .875rem)); --ag-dialog-border: var(--ag-inherited-dialog-border, solid 1px color-mix(in srgb, transparent, var(--ag-foreground-color) 20%)); --ag-dialog-shadow: var(--ag-inherited-dialog-shadow, var(--iress-elevation-floating-shadow, 0px 10px 18px #091E4215)); --ag-drag-and-drop-image-background-color: var(--ag-inherited-drag-and-drop-image-background-color, var(--ag-background-color)); --ag-drag-and-drop-image-border: var(--ag-inherited-drag-and-drop-image-border, solid 1px var(--ag-border-color)); --ag-drag-and-drop-image-shadow: var(--ag-inherited-drag-and-drop-image-shadow, var(--iress-elevation-focus-shadow, 0px 0px 0px 1.5px var(--iress-colour-neutral-10, #FFFFFF), 0px 0px 0px 3.5px #0066FF)); --ag-drag-handle-color: var(--ag-inherited-drag-handle-color, color-mix(in srgb, transparent, var(--ag-foreground-color) 70%)); --ag-dropdown-shadow: var(--ag-inherited-dropdown-shadow, var(--iress-elevation-floating-shadow, 0px 10px 18px #091E4215)); --ag-filter-tool-panel-group-indent: var(--ag-inherited-filter-tool-panel-group-indent, var(--ag-spacing)); --ag-find-active-match-background-color: var(--ag-inherited-find-active-match-background-color, #ffa500); --ag-find-active-match-color: var(--ag-inherited-find-active-match-color, var(--ag-foreground-color)); --ag-find-match-background-color: var(--ag-inherited-find-match-background-color, #ffff00); --ag-find-match-color: var(--ag-inherited-find-match-color, var(--ag-foreground-color)); --ag-focus-shadow: var(--ag-inherited-focus-shadow, var(--iress-elevation-focus-shadow, 0px 0px 0px 1.5px var(--iress-colour-neutral-10, #FFFFFF), 0px 0px 0px 3.5px #0066FF)); --ag-font-family: var(--ag-inherited-font-family, var(--iress-typography-base-body-font, Inter, Helvetica, sans-serif)); --ag-font-size: var(--ag-inherited-font-size, var(--iress-typography-base-size, .875rem)); --ag-footer-row-border: var(--ag-inherited-footer-row-border, var(--ag-row-border)); --ag-foreground-color: var(--ag-inherited-foreground-color, var(--iress-colour-neutral-80, #393F46)); --ag-header-background-color: var(--ag-inherited-header-background-color, var(--iress-colour-neutral-10, #FFFFFF)); --ag-header-cell-background-transition-duration: var(--ag-inherited-header-cell-background-transition-duration, 0.2s); --ag-header-cell-hover-background-color: var(--ag-inherited-header-cell-hover-background-color, transparent); --ag-header-cell-moving-background-color: var(--ag-inherited-header-cell-moving-background-color, var(--ag-header-cell-hover-background-color)); --ag-header-column-border: var(--ag-inherited-header-column-border, none); --ag-header-column-border-height: var(--ag-inherited-header-column-border-height, 100%); --ag-header-column-resize-handle-color: var(--ag-inherited-header-column-resize-handle-color, var(--ag-border-color)); --ag-header-column-resize-handle-height: var(--ag-inherited-header-column-resize-handle-height, 30%); --ag-header-column-resize-handle-width: var(--ag-inherited-header-column-resize-handle-width, 2px); --ag-header-font-family: var(--ag-inherited-header-font-family, var(--iress-typography-base-body-font, Inter, Helvetica, sans-serif)); --ag-header-font-size: var(--ag-inherited-header-font-size, var(--ag-font-size)); --ag-header-font-weight: var(--ag-inherited-header-font-weight, 700); --ag-header-height: var(--ag-inherited-header-height, calc(max( var(--ag-icon-size) , var(--ag-data-font-size) ) + var(--ag-spacing) \* 4 \* var(--ag-header-vertical-padding-scale) )); --ag-header-row-border: var(--ag-inherited-header-row-border, solid 1px var(--iress-colour-neutral-40, #D7D8DA)); --ag-header-text-color: var(--ag-inherited-header-text-color, var(--ag-text-color)); --ag-header-vertical-padding-scale: var(--ag-inherited-header-vertical-padding-scale, 1); --ag-icon-button-active-background-color: var(--ag-inherited-icon-button-active-background-color, transparent); --ag-icon-button-active-color: var(--ag-inherited-icon-button-active-color, var(--ag-accent-color)); --ag-icon-button-active-indicator-color: var(--ag-inherited-icon-button-active-indicator-color, var(--ag-accent-color)); --ag-icon-button-background-color: var(--ag-inherited-icon-button-background-color, transparent); --ag-icon-button-background-spread: var(--ag-inherited-icon-button-background-spread, 4px); --ag-icon-button-border-radius: var(--ag-inherited-icon-button-border-radius, 1px); --ag-icon-button-color: var(--ag-inherited-icon-button-color, var(--ag-icon-color)); --ag-icon-button-hover-background-color: var(--ag-inherited-icon-button-hover-background-color, transparent); --ag-icon-button-hover-color: var(--ag-inherited-icon-button-hover-color, var(--ag-accent-color)); --ag-icon-color: var(--ag-inherited-icon-color, inherit); --ag-icon-size: var(--ag-inherited-icon-size, 16px); --ag-input-background-color: var(--ag-inherited-input-background-color, var(--ag-background-color)); --ag-input-border: var(--ag-inherited-input-border, solid 1px var(--iress-colour-neutral-70, #6D7278)); --ag-input-border-radius: var(--ag-inherited-input-border-radius, var(--iress-radius-system-form, var(--iress-radius-050, calc(0.5 \* 1rem)) var(--iress-radius-050, calc(0.5 \* 1rem)) var(--iress-radius-050, calc(0.5 \* 1rem)) var(--iress-radius-050, calc(0.5 \* 1rem)))); --ag-input-disabled-background-color: var(--ag-inherited-input-disabled-background-color, var(--iress-colour-neutral-20, #F9F9F9)); --ag-input-disabled-border: var(--ag-inherited-input-disabled-border, solid 1px var(--iress-colour-neutral-40, #D7D8DA)); --ag-input-disabled-text-color: var(--ag-inherited-input-disabled-text-color, var(--iress-colour-neutral-60, #878B92)); --ag-input-focus-background-color: var(--ag-inherited-input-focus-background-color, var(--ag-input-background-color)); --ag-input-focus-border: var(--ag-inherited-input-focus-border, solid 1px color-mix(in srgb, transparent, var(--ag-accent-color) 40%)); --ag-input-focus-shadow: var(--ag-inherited-input-focus-shadow, var(--iress-elevation-focus-shadow, 0px 0px 0px 1.5px var(--iress-colour-neutral-10, #FFFFFF), 0px 0px 0px 3.5px #0066FF)); --ag-input-focus-text-color: var(--ag-inherited-input-focus-text-color, var(--ag-input-text-color)); --ag-input-height: var(--ag-inherited-input-height, calc(max( var(--ag-icon-size) , var(--ag-font-size) ) + var(--ag-spacing) \* 2)); --ag-input-icon-color: var(--ag-inherited-input-icon-color, var(--iress-colour-neutral-70, #6D7278)); --ag-input-invalid-background-color: var(--ag-inherited-input-invalid-background-color, var(--iress-colour-system-danger-surface, #FEE8E7)); --ag-input-invalid-border: var(--ag-inherited-input-invalid-border, var(--iress-colour-system-danger-fill, #C20A0A)); --ag-input-invalid-text-color: var(--ag-inherited-input-invalid-text-color, var(--iress-colour-system-danger-text, #970202)); --ag-input-padding-start: var(--ag-inherited-input-padding-start, var(--ag-spacing)); --ag-input-placeholder-text-color: var(--ag-inherited-input-placeholder-text-color, color-mix(in srgb, transparent, var(--ag-input-text-color) 50%)); --ag-input-text-color: var(--ag-inherited-input-text-color, var(--iress-colour-neutral-80, #393F46)); --ag-invalid-color: var(--ag-inherited-invalid-color, var(--iress-colour-system-danger-fill, #C20A0A)); --ag-list-item-height: var(--ag-inherited-list-item-height, calc(max( var(--ag-icon-size) , var(--ag-data-font-size) ) + var(--ag-widget-vertical-spacing) )); --ag-menu-background-color: var(--ag-inherited-menu-background-color, color-mix(in srgb, var(--ag-background-color), var(--ag-foreground-color) 3%)); --ag-menu-border: var(--ag-inherited-menu-border, solid 1px color-mix(in srgb, transparent, var(--ag-foreground-color) 20%)); --ag-menu-separator-color: var(--ag-inherited-menu-separator-color, var(--ag-border-color)); --ag-menu-shadow: var(--ag-inherited-menu-shadow, var(--iress-elevation-floating-shadow, 0px 10px 18px #091E4215)); --ag-menu-text-color: var(--ag-inherited-menu-text-color, color-mix(in srgb, var(--ag-background-color), var(--ag-foreground-color) 95%)); --ag-modal-overlay-background-color: var(--ag-inherited-modal-overlay-background-color, var(--iress-colour-system-backdrop-fill, #393F46CC)); --ag-odd-row-background-color: var(--ag-inherited-odd-row-background-color, var(--iress-colour-neutral-10, #FFFFFF)); --ag-panel-background-color: var(--ag-inherited-panel-background-color, var(--ag-background-color)); --ag-panel-title-bar-background-color: var(--ag-inherited-panel-title-bar-background-color, var(--ag-header-background-color)); --ag-panel-title-bar-border: var(--ag-inherited-panel-title-bar-border, solid 1px var(--ag-border-color)); --ag-panel-title-bar-font-weight: var(--ag-inherited-panel-title-bar-font-weight, var(--ag-header-font-weight)); --ag-panel-title-bar-icon-color: var(--ag-inherited-panel-title-bar-icon-color, var(--ag-header-text-color)); --ag-panel-title-bar-text-color: var(--ag-inherited-panel-title-bar-text-color, var(--ag-header-text-color)); --ag-picker-button-background-color: var(--ag-inherited-picker-button-background-color, var(--ag-background-color)); --ag-picker-button-border: var(--ag-inherited-picker-button-border, solid 1px var(--ag-border-color)); --ag-picker-button-focus-background-color: var(--ag-inherited-picker-button-focus-background-color, var(--ag-background-color)); --ag-picker-button-focus-border: var(--ag-inherited-picker-button-focus-border, var(--ag-input-focus-border)); --ag-picker-list-background-color: var(--ag-inherited-picker-list-background-color, var(--ag-background-color)); --ag-picker-list-border: var(--ag-inherited-picker-list-border, solid 1px var(--ag-border-color)); --ag-pinned-column-border: var(--ag-inherited-pinned-column-border, solid 1px var(--ag-border-color)); --ag-pinned-row-background-color: var(--ag-inherited-pinned-row-background-color, var(--ag-background-color)); --ag-pinned-row-border: var(--ag-inherited-pinned-row-border, solid 1px var(--ag-border-color)); --ag-pinned-row-font-weight: var(--ag-inherited-pinned-row-font-weight, 600); --ag-pinned-row-text-color: var(--ag-inherited-pinned-row-text-color, var(--ag-text-color)); --ag-pinned-source-row-background-color: var(--ag-inherited-pinned-source-row-background-color, var(--ag-background-color)); --ag-pinned-source-row-font-weight: var(--ag-inherited-pinned-source-row-font-weight, 600); --ag-pinned-source-row-text-color: var(--ag-inherited-pinned-source-row-text-color, var(--ag-text-color)); --ag-popup-shadow: var(--ag-inherited-popup-shadow, var(--iress-elevation-floating-shadow, 0px 10px 18px #091E4215)); --ag-radio-checked-shape-image: var(--ag-inherited-radio-checked-shape-image, url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%226%22%20height%3D%226%22%20fill%3D%22none%22%3E%3Ccircle%20cx%3D%223%22%20cy%3D%223%22%20r%3D%223%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E")); --ag-range-header-highlight-color: var(--ag-inherited-range-header-highlight-color, color-mix(in srgb, var(--ag-header-background-color), var(--ag-foreground-color) 8%)); --ag-range-selection-background-color: var(--ag-inherited-range-selection-background-color, color-mix(in srgb, transparent, var(--ag-accent-color) 10%)); --ag-range-selection-border-color: var(--ag-inherited-range-selection-border-color, var(--iress-colour-primary-fill, #13213F)); --ag-range-selection-border-style: var(--ag-inherited-range-selection-border-style, solid); --ag-range-selection-chart-background-color: var(--ag-inherited-range-selection-chart-background-color, #0058FF1A); --ag-range-selection-chart-category-background-color: var(--ag-inherited-range-selection-chart-category-background-color, #00FF841A); --ag-range-selection-highlight-color: var(--ag-inherited-range-selection-highlight-color, color-mix(in srgb, transparent, var(--ag-accent-color) 50%)); --ag-row-border: var(--ag-inherited-row-border, solid 1px var(--iress-colour-neutral-40, #D7D8DA)); --ag-row-group-indent-size: var(--ag-inherited-row-group-indent-size, calc( var(--ag-cell-widget-spacing) + var(--ag-icon-size) )); --ag-row-height: var(--ag-inherited-row-height, calc(max( var(--ag-icon-size) , var(--ag-data-font-size) ) + var(--ag-spacing) \* 3.25 \* var(--ag-row-vertical-padding-scale) )); --ag-row-hover-color: var(--ag-inherited-row-hover-color, var(--iress-colour-primary-surface, #D9E5FF)); --ag-row-loading-skeleton-effect-color: var(--ag-inherited-row-loading-skeleton-effect-color, color-mix(in srgb, transparent, var(--ag-foreground-color) 15%)); --ag-row-numbers-selected-color: var(--ag-inherited-row-numbers-selected-color, color-mix(in srgb, transparent, var(--ag-accent-color) 50%)); --ag-row-vertical-padding-scale: var(--ag-inherited-row-vertical-padding-scale, 1); --ag-select-cell-background-color: var(--ag-inherited-select-cell-background-color, color-mix(in srgb, transparent, var(--ag-foreground-color) 7.000000000000001%)); --ag-select-cell-border: var(--ag-inherited-select-cell-border, solid 1px color-mix(in srgb, transparent, var(--ag-foreground-color) 13%)); --ag-selected-row-background-color: var(--ag-inherited-selected-row-background-color, var(--iress-colour-neutral-20, #F9F9F9)); --ag-set-filter-indent-size: var(--ag-inherited-set-filter-indent-size, var(--ag-icon-size)); --ag-side-bar-background-color: var(--ag-inherited-side-bar-background-color, transparent); --ag-side-bar-panel-width: var(--ag-inherited-side-bar-panel-width, 250px); --ag-side-button-background-color: var(--ag-inherited-side-button-background-color, transparent); --ag-side-button-bar-background-color: var(--ag-inherited-side-button-bar-background-color, var(--ag-side-bar-background-color)); --ag-side-button-bar-top-padding: var(--ag-inherited-side-button-bar-top-padding, calc( var(--ag-spacing) \* 3)); --ag-side-button-border: var(--ag-inherited-side-button-border, none); --ag-side-button-hover-background-color: var(--ag-inherited-side-button-hover-background-color, var(--ag-side-button-background-color)); --ag-side-button-hover-text-color: var(--ag-inherited-side-button-hover-text-color, var(--ag-accent-color)); --ag-side-button-left-padding: var(--ag-inherited-side-button-left-padding, var(--ag-spacing)); --ag-side-button-right-padding: var(--ag-inherited-side-button-right-padding, var(--ag-spacing)); --ag-side-button-selected-background-color: var(--ag-inherited-side-button-selected-background-color, transparent); --ag-side-button-selected-border: var(--ag-inherited-side-button-selected-border, none); --ag-side-button-selected-text-color: var(--ag-inherited-side-button-selected-text-color, var(--ag-side-button-text-color)); --ag-side-button-selected-underline-color: var(--ag-inherited-side-button-selected-underline-color, var(--ag-accent-color)); --ag-side-button-selected-underline-transition-duration: var(--ag-inherited-side-button-selected-underline-transition-duration, 0.3s); --ag-side-button-selected-underline-width: var(--ag-inherited-side-button-selected-underline-width, 2px); --ag-side-button-text-color: var(--ag-inherited-side-button-text-color, var(--ag-text-color)); --ag-side-button-vertical-padding: var(--ag-inherited-side-button-vertical-padding, calc( var(--ag-spacing) \* 3)); --ag-side-panel-border: var(--ag-inherited-side-panel-border, solid 1px var(--ag-border-color)); --ag-spacing: var(--ag-inherited-spacing, 8px); --ag-status-bar-label-color: var(--ag-inherited-status-bar-label-color, var(--ag-foreground-color)); --ag-status-bar-label-font-weight: var(--ag-inherited-status-bar-label-font-weight, 500); --ag-status-bar-value-color: var(--ag-inherited-status-bar-value-color, var(--ag-foreground-color)); --ag-status-bar-value-font-weight: var(--ag-inherited-status-bar-value-font-weight, 500); --ag-subtle-text-color: var(--ag-inherited-subtle-text-color, var(--iress-colour-neutral-70, #6D7278)); --ag-tab-background-color: var(--ag-inherited-tab-background-color, transparent); --ag-tab-bar-background-color: var(--ag-inherited-tab-bar-background-color, var(--ag-chrome-background-color)); --ag-tab-bar-border: var(--ag-inherited-tab-bar-border, solid 1px var(--iress-colour-primary-fill, #13213F)); --ag-tab-bar-horizontal-padding: var(--ag-inherited-tab-bar-horizontal-padding, 0px); --ag-tab-bar-top-padding: var(--ag-inherited-tab-bar-top-padding, 0px); --ag-tab-bottom-padding: var(--ag-inherited-tab-bottom-padding, var(--ag-spacing)); --ag-tab-horizontal-padding: var(--ag-inherited-tab-horizontal-padding, var(--ag-spacing)); --ag-tab-hover-background-color: var(--ag-inherited-tab-hover-background-color, var(--ag-tab-background-color)); --ag-tab-hover-text-color: var(--ag-inherited-tab-hover-text-color, var(--ag-accent-color)); --ag-tab-selected-background-color: var(--ag-inherited-tab-selected-background-color, var(--ag-tab-background-color)); --ag-tab-selected-border-color: var(--ag-inherited-tab-selected-border-color, transparent); --ag-tab-selected-border-width: var(--ag-inherited-tab-selected-border-width, 0px); --ag-tab-selected-text-color: var(--ag-inherited-tab-selected-text-color, var(--ag-accent-color)); --ag-tab-selected-underline-color: var(--ag-inherited-tab-selected-underline-color, var(--ag-accent-color)); --ag-tab-selected-underline-transition-duration: var(--ag-inherited-tab-selected-underline-transition-duration, 0.3s); --ag-tab-selected-underline-width: var(--ag-inherited-tab-selected-underline-width, 2px); --ag-tab-spacing: var(--ag-inherited-tab-spacing, 0); --ag-tab-text-color: var(--ag-inherited-tab-text-color, var(--ag-text-color)); --ag-tab-top-padding: var(--ag-inherited-tab-top-padding, var(--ag-spacing)); --ag-text-color: var(--ag-inherited-text-color, var(--ag-foreground-color)); --ag-toggle-button-height: var(--ag-inherited-toggle-button-height, 18px); --ag-toggle-button-off-background-color: var(--ag-inherited-toggle-button-off-background-color, color-mix(in srgb, var(--ag-background-color), var(--ag-foreground-color) 45%)); --ag-toggle-button-on-background-color: var(--ag-inherited-toggle-button-on-background-color, var(--ag-accent-color)); --ag-toggle-button-switch-background-color: var(--ag-inherited-toggle-button-switch-background-color, var(--ag-background-color)); --ag-toggle-button-switch-inset: var(--ag-inherited-toggle-button-switch-inset, 1px); --ag-toggle-button-width: var(--ag-inherited-toggle-button-width, 28px); --ag-tool-panel-separator-border: var(--ag-inherited-tool-panel-separator-border, solid 1px var(--ag-border-color)); --ag-tooltip-background-color: var(--ag-inherited-tooltip-background-color, var(--iress-colour-neutral-80, #393F46)); --ag-tooltip-border: var(--ag-inherited-tooltip-border, solid 1px var(--ag-border-color)); --ag-tooltip-text-color: var(--ag-inherited-tooltip-text-color, var(--iress-colour-neutral-10, #FFFFFF)); --ag-value-change-delta-down-color: var(--ag-inherited-value-change-delta-down-color, var(--iress-colour-system-danger-fill, #C20A0A)); --ag-value-change-delta-up-color: var(--ag-inherited-value-change-delta-up-color, var(--iress-colour-system-success-fill, #02794D)); --ag-value-change-value-highlight-background-color: var(--ag-inherited-value-change-value-highlight-background-color, color-mix(in srgb, transparent, var(--ag-accent-color) 20%)); --ag-widget-container-horizontal-padding: var(--ag-inherited-widget-container-horizontal-padding, calc( var(--ag-spacing) \* 1.5)); --ag-widget-container-vertical-padding: var(--ag-inherited-widget-container-vertical-padding, calc( var(--ag-spacing) \* 1.5)); --ag-widget-horizontal-spacing: var(--ag-inherited-widget-horizontal-spacing, calc( var(--ag-spacing) \* 1.5)); --ag-widget-vertical-spacing: var(--ag-inherited-widget-vertical-spacing, var(--ag-spacing)); --ag-wrapper-border: var(--ag-inherited-wrapper-border, none); --ag-wrapper-border-radius: var(--ag-inherited-wrapper-border-radius, var(--iress-radius-system-layout, var(--iress-radius-100, 1rem) var(--iress-radius-100, 1rem) var(--iress-radius-100, 1rem) var(--iress-radius-100, 1rem))); :where(\[data-ag-theme-mode="light"\]) & { --ag-browser-color-scheme: var(--ag-inherited-browser-color-scheme, light); --ag-chrome-background-color: var(--ag-inherited-chrome-background-color, color-mix(in srgb, var(--ag-background-color), var(--ag-foreground-color) 2%)); } :where(\[data-ag-theme-mode="dark"\]) & { --ag-advanced-filter-builder-column-pill-color: var(--ag-inherited-advanced-filter-builder-column-pill-color, #355f2d); --ag-advanced-filter-builder-join-pill-color: var(--ag-inherited-advanced-filter-builder-join-pill-color, #7a3a37); --ag-advanced-filter-builder-option-pill-color: var(--ag-inherited-advanced-filter-builder-option-pill-color, #5a3168); --ag-advanced-filter-builder-value-pill-color: var(--ag-inherited-advanced-filter-builder-value-pill-color, #374c86); --ag-browser-color-scheme: var(--ag-inherited-browser-color-scheme, dark); --ag-chrome-background-color: var(--ag-inherited-chrome-background-color, color-mix(in srgb, var(--ag-background-color), var(--ag-foreground-color) 5%)); --ag-find-active-match-color: var(--ag-inherited-find-active-match-color, var(--ag-background-color)); --ag-find-match-color: var(--ag-inherited-find-match-color, var(--ag-background-color)); --ag-menu-background-color: var(--ag-inherited-menu-background-color, color-mix(in srgb, var(--ag-background-color), var(--ag-foreground-color) 10%)); } :where(\[data-ag-theme-mode="dark-blue"\]) & { --ag-advanced-filter-builder-column-pill-color: var(--ag-inherited-advanced-filter-builder-column-pill-color, #355f2d); --ag-advanced-filter-builder-join-pill-color: var(--ag-inherited-advanced-filter-builder-join-pill-color, #7a3a37); --ag-advanced-filter-builder-option-pill-color: var(--ag-inherited-advanced-filter-builder-option-pill-color, #5a3168); --ag-advanced-filter-builder-value-pill-color: var(--ag-inherited-advanced-filter-builder-value-pill-color, #374c86); --ag-browser-color-scheme: var(--ag-inherited-browser-color-scheme, dark); --ag-chrome-background-color: var(--ag-inherited-chrome-background-color, color-mix(in srgb, var(--ag-background-color), var(--ag-foreground-color) 5%)); --ag-find-active-match-color: var(--ag-inherited-find-active-match-color, var(--ag-background-color)); --ag-find-match-color: var(--ag-inherited-find-match-color, var(--ag-background-color)); --ag-menu-background-color: var(--ag-inherited-menu-background-color, color-mix(in srgb, var(--ag-background-color), var(--ag-foreground-color) 10%)); } } :has(> :where(.ag-theme-params-4)):not(:where(.ag-theme-params-4)) { --ag-inherited-accent-color: var(--ag-accent-color); --ag-inherited-advanced-filter-builder-button-bar-border: var(--ag-advanced-filter-builder-button-bar-border); --ag-inherited-advanced-filter-builder-column-pill-color: var(--ag-advanced-filter-builder-column-pill-color); --ag-inherited-advanced-filter-builder-indent-size: var(--ag-advanced-filter-builder-indent-size); --ag-inherited-advanced-filter-builder-join-pill-color: var(--ag-advanced-filter-builder-join-pill-color); --ag-inherited-advanced-filter-builder-option-pill-color: var(--ag-advanced-filter-builder-option-pill-color); --ag-inherited-advanced-filter-builder-value-pill-color: var(--ag-advanced-filter-builder-value-pill-color); --ag-inherited-background-color: var(--ag-background-color); --ag-inherited-border-color: var(--ag-border-color); --ag-inherited-border-radius: var(--ag-border-radius); --ag-inherited-browser-color-scheme: var(--ag-browser-color-scheme); --ag-inherited-button-active-background-color: var(--ag-button-active-background-color); --ag-inherited-button-active-border: var(--ag-button-active-border); --ag-inherited-button-active-text-color: var(--ag-button-active-text-color); --ag-inherited-button-background-color: var(--ag-button-background-color); --ag-inherited-button-border: var(--ag-button-border); --ag-inherited-button-border-radius: var(--ag-button-border-radius); --ag-inherited-button-disabled-background-color: var(--ag-button-disabled-background-color); --ag-inherited-button-disabled-border: var(--ag-button-disabled-border); --ag-inherited-button-disabled-text-color: var(--ag-button-disabled-text-color); --ag-inherited-button-font-weight: var(--ag-button-font-weight); --ag-inherited-button-horizontal-padding: var(--ag-button-horizontal-padding); --ag-inherited-button-hover-background-color: var(--ag-button-hover-background-color); --ag-inherited-button-hover-border: var(--ag-button-hover-border); --ag-inherited-button-hover-text-color: var(--ag-button-hover-text-color); --ag-inherited-button-text-color: var(--ag-button-text-color); --ag-inherited-button-vertical-padding: var(--ag-button-vertical-padding); --ag-inherited-card-shadow: var(--ag-card-shadow); --ag-inherited-cell-editing-border: var(--ag-cell-editing-border); --ag-inherited-cell-editing-shadow: var(--ag-cell-editing-shadow); --ag-inherited-cell-font-family: var(--ag-cell-font-family); --ag-inherited-cell-horizontal-padding: var(--ag-cell-horizontal-padding); --ag-inherited-cell-horizontal-padding-scale: var(--ag-cell-horizontal-padding-scale); --ag-inherited-cell-text-color: var(--ag-cell-text-color); --ag-inherited-cell-widget-spacing: var(--ag-cell-widget-spacing); --ag-inherited-chart-menu-label-color: var(--ag-chart-menu-label-color); --ag-inherited-chart-menu-panel-width: var(--ag-chart-menu-panel-width); --ag-inherited-checkbox-border-radius: var(--ag-checkbox-border-radius); --ag-inherited-checkbox-border-width: var(--ag-checkbox-border-width); --ag-inherited-checkbox-checked-background-color: var(--ag-checkbox-checked-background-color); --ag-inherited-checkbox-checked-border-color: var(--ag-checkbox-checked-border-color); --ag-inherited-checkbox-checked-shape-color: var(--ag-checkbox-checked-shape-color); --ag-inherited-checkbox-checked-shape-image: var(--ag-checkbox-checked-shape-image); --ag-inherited-checkbox-indeterminate-background-color: var(--ag-checkbox-indeterminate-background-color); --ag-inherited-checkbox-indeterminate-border-color: var(--ag-checkbox-indeterminate-border-color); --ag-inherited-checkbox-indeterminate-shape-color: var(--ag-checkbox-indeterminate-shape-color); --ag-inherited-checkbox-indeterminate-shape-image: var(--ag-checkbox-indeterminate-shape-image); --ag-inherited-checkbox-unchecked-background-color: var(--ag-checkbox-unchecked-background-color); --ag-inherited-checkbox-unchecked-border-color: var(--ag-checkbox-unchecked-border-color); --ag-inherited-chrome-background-color: var(--ag-chrome-background-color); --ag-inherited-column-border: var(--ag-column-border); --ag-inherited-column-drop-cell-background-color: var(--ag-column-drop-cell-background-color); --ag-inherited-column-drop-cell-border: var(--ag-column-drop-cell-border); --ag-inherited-column-drop-cell-drag-handle-color: var(--ag-column-drop-cell-drag-handle-color); --ag-inherited-column-drop-cell-text-color: var(--ag-column-drop-cell-text-color); --ag-inherited-column-hover-color: var(--ag-column-hover-color); --ag-inherited-column-select-indent-size: var(--ag-column-select-indent-size); --ag-inherited-data-font-size: var(--ag-data-font-size); --ag-inherited-dialog-border: var(--ag-dialog-border); --ag-inherited-dialog-shadow: var(--ag-dialog-shadow); --ag-inherited-drag-and-drop-image-background-color: var(--ag-drag-and-drop-image-background-color); --ag-inherited-drag-and-drop-image-border: var(--ag-drag-and-drop-image-border); --ag-inherited-drag-and-drop-image-shadow: var(--ag-drag-and-drop-image-shadow); --ag-inherited-drag-handle-color: var(--ag-drag-handle-color); --ag-inherited-dropdown-shadow: var(--ag-dropdown-shadow); --ag-inherited-filter-tool-panel-group-indent: var(--ag-filter-tool-panel-group-indent); --ag-inherited-find-active-match-background-color: var(--ag-find-active-match-background-color); --ag-inherited-find-active-match-color: var(--ag-find-active-match-color); --ag-inherited-find-match-background-color: var(--ag-find-match-background-color); --ag-inherited-find-match-color: var(--ag-find-match-color); --ag-inherited-focus-shadow: var(--ag-focus-shadow); --ag-inherited-font-family: var(--ag-font-family); --ag-inherited-font-size: var(--ag-font-size); --ag-inherited-footer-row-border: var(--ag-footer-row-border); --ag-inherited-foreground-color: var(--ag-foreground-color); --ag-inherited-header-background-color: var(--ag-header-background-color); --ag-inherited-header-cell-background-transition-duration: var(--ag-header-cell-background-transition-duration); --ag-inherited-header-cell-hover-background-color: var(--ag-header-cell-hover-background-color); --ag-inherited-header-cell-moving-background-color: var(--ag-header-cell-moving-background-color); --ag-inherited-header-column-border: var(--ag-header-column-border); --ag-inherited-header-column-border-height: var(--ag-header-column-border-height); --ag-inherited-header-column-resize-handle-color: var(--ag-header-column-resize-handle-color); --ag-inherited-header-column-resize-handle-height: var(--ag-header-column-resize-handle-height); --ag-inherited-header-column-resize-handle-width: var(--ag-header-column-resize-handle-width); --ag-inherited-header-font-family: var(--ag-header-font-family); --ag-inherited-header-font-size: var(--ag-header-font-size); --ag-inherited-header-font-weight: var(--ag-header-font-weight); --ag-inherited-header-height: var(--ag-header-height); --ag-inherited-header-row-border: var(--ag-header-row-border); --ag-inherited-header-text-color: var(--ag-header-text-color); --ag-inherited-header-vertical-padding-scale: var(--ag-header-vertical-padding-scale); --ag-inherited-icon-button-active-background-color: var(--ag-icon-button-active-background-color); --ag-inherited-icon-button-active-color: var(--ag-icon-button-active-color); --ag-inherited-icon-button-active-indicator-color: var(--ag-icon-button-active-indicator-color); --ag-inherited-icon-button-background-color: var(--ag-icon-button-background-color); --ag-inherited-icon-button-background-spread: var(--ag-icon-button-background-spread); --ag-inherited-icon-button-border-radius: var(--ag-icon-button-border-radius); --ag-inherited-icon-button-color: var(--ag-icon-button-color); --ag-inherited-icon-button-hover-background-color: var(--ag-icon-button-hover-background-color); --ag-inherited-icon-button-hover-color: var(--ag-icon-button-hover-color); --ag-inherited-icon-color: var(--ag-icon-color); --ag-inherited-icon-size: var(--ag-icon-size); --ag-inherited-input-background-color: var(--ag-input-background-color); --ag-inherited-input-border: var(--ag-input-border); --ag-inherited-input-border-radius: var(--ag-input-border-radius); --ag-inherited-input-disabled-background-color: var(--ag-input-disabled-background-color); --ag-inherited-input-disabled-border: var(--ag-input-disabled-border); --ag-inherited-input-disabled-text-color: var(--ag-input-disabled-text-color); --ag-inherited-input-focus-background-color: var(--ag-input-focus-background-color); --ag-inherited-input-focus-border: var(--ag-input-focus-border); --ag-inherited-input-focus-shadow: var(--ag-input-focus-shadow); --ag-inherited-input-focus-text-color: var(--ag-input-focus-text-color); --ag-inherited-input-height: var(--ag-input-height); --ag-inherited-input-icon-color: var(--ag-input-icon-color); --ag-inherited-input-invalid-background-color: var(--ag-input-invalid-background-color); --ag-inherited-input-invalid-border: var(--ag-input-invalid-border); --ag-inherited-input-invalid-text-color: var(--ag-input-invalid-text-color); --ag-inherited-input-padding-start: var(--ag-input-padding-start); --ag-inherited-input-placeholder-text-color: var(--ag-input-placeholder-text-color); --ag-inherited-input-text-color: var(--ag-input-text-color); --ag-inherited-invalid-color: var(--ag-invalid-color); --ag-inherited-list-item-height: var(--ag-list-item-height); --ag-inherited-menu-background-color: var(--ag-menu-background-color); --ag-inherited-menu-border: var(--ag-menu-border); --ag-inherited-menu-separator-color: var(--ag-menu-separator-color); --ag-inherited-menu-shadow: var(--ag-menu-shadow); --ag-inherited-menu-text-color: var(--ag-menu-text-color); --ag-inherited-modal-overlay-background-color: var(--ag-modal-overlay-background-color); --ag-inherited-odd-row-background-color: var(--ag-odd-row-background-color); --ag-inherited-panel-background-color: var(--ag-panel-background-color); --ag-inherited-panel-title-bar-background-color: var(--ag-panel-title-bar-background-color); --ag-inherited-panel-title-bar-border: var(--ag-panel-title-bar-border); --ag-inherited-panel-title-bar-font-weight: var(--ag-panel-title-bar-font-weight); --ag-inherited-panel-title-bar-icon-color: var(--ag-panel-title-bar-icon-color); --ag-inherited-panel-title-bar-text-color: var(--ag-panel-title-bar-text-color); --ag-inherited-picker-button-background-color: var(--ag-picker-button-background-color); --ag-inherited-picker-button-border: var(--ag-picker-button-border); --ag-inherited-picker-button-focus-background-color: var(--ag-picker-button-focus-background-color); --ag-inherited-picker-button-focus-border: var(--ag-picker-button-focus-border); --ag-inherited-picker-list-background-color: var(--ag-picker-list-background-color); --ag-inherited-picker-list-border: var(--ag-picker-list-border); --ag-inherited-pinned-column-border: var(--ag-pinned-column-border); --ag-inherited-pinned-row-background-color: var(--ag-pinned-row-background-color); --ag-inherited-pinned-row-border: var(--ag-pinned-row-border); --ag-inherited-pinned-row-font-weight: var(--ag-pinned-row-font-weight); --ag-inherited-pinned-row-text-color: var(--ag-pinned-row-text-color); --ag-inherited-pinned-source-row-background-color: var(--ag-pinned-source-row-background-color); --ag-inherited-pinned-source-row-font-weight: var(--ag-pinned-source-row-font-weight); --ag-inherited-pinned-source-row-text-color: var(--ag-pinned-source-row-text-color); --ag-inherited-popup-shadow: var(--ag-popup-shadow); --ag-inherited-radio-checked-shape-image: var(--ag-radio-checked-shape-image); --ag-inherited-range-header-highlight-color: var(--ag-range-header-highlight-color); --ag-inherited-range-selection-background-color: var(--ag-range-selection-background-color); --ag-inherited-range-selection-border-color: var(--ag-range-selection-border-color); --ag-inherited-range-selection-border-style: var(--ag-range-selection-border-style); --ag-inherited-range-selection-chart-background-color: var(--ag-range-selection-chart-background-color); --ag-inherited-range-selection-chart-category-background-color: var(--ag-range-selection-chart-category-background-color); --ag-inherited-range-selection-highlight-color: var(--ag-range-selection-highlight-color); --ag-inherited-row-border: var(--ag-row-border); --ag-inherited-row-group-indent-size: var(--ag-row-group-indent-size); --ag-inherited-row-height: var(--ag-row-height); --ag-inherited-row-hover-color: var(--ag-row-hover-color); --ag-inherited-row-loading-skeleton-effect-color: var(--ag-row-loading-skeleton-effect-color); --ag-inherited-row-numbers-selected-color: var(--ag-row-numbers-selected-color); --ag-inherited-row-vertical-padding-scale: var(--ag-row-vertical-padding-scale); --ag-inherited-select-cell-background-color: var(--ag-select-cell-background-color); --ag-inherited-select-cell-border: var(--ag-select-cell-border); --ag-inherited-selected-row-background-color: var(--ag-selected-row-background-color); --ag-inherited-set-filter-indent-size: var(--ag-set-filter-indent-size); --ag-inherited-side-bar-background-color: var(--ag-side-bar-background-color); --ag-inherited-side-bar-panel-width: var(--ag-side-bar-panel-width); --ag-inherited-side-button-background-color: var(--ag-side-button-background-color); --ag-inherited-side-button-bar-background-color: var(--ag-side-button-bar-background-color); --ag-inherited-side-button-bar-top-padding: var(--ag-side-button-bar-top-padding); --ag-inherited-side-button-border: var(--ag-side-button-border); --ag-inherited-side-button-hover-background-color: var(--ag-side-button-hover-background-color); --ag-inherited-side-button-hover-text-color: var(--ag-side-button-hover-text-color); --ag-inherited-side-button-left-padding: var(--ag-side-button-left-padding); --ag-inherited-side-button-right-padding: var(--ag-side-button-right-padding); --ag-inherited-side-button-selected-background-color: var(--ag-side-button-selected-background-color); --ag-inherited-side-button-selected-border: var(--ag-side-button-selected-border); --ag-inherited-side-button-selected-text-color: var(--ag-side-button-selected-text-color); --ag-inherited-side-button-selected-underline-color: var(--ag-side-button-selected-underline-color); --ag-inherited-side-button-selected-underline-transition-duration: var(--ag-side-button-selected-underline-transition-duration); --ag-inherited-side-button-selected-underline-width: var(--ag-side-button-selected-underline-width); --ag-inherited-side-button-text-color: var(--ag-side-button-text-color); --ag-inherited-side-button-vertical-padding: var(--ag-side-button-vertical-padding); --ag-inherited-side-panel-border: var(--ag-side-panel-border); --ag-inherited-spacing: var(--ag-spacing); --ag-inherited-status-bar-label-color: var(--ag-status-bar-label-color); --ag-inherited-status-bar-label-font-weight: var(--ag-status-bar-label-font-weight); --ag-inherited-status-bar-value-color: var(--ag-status-bar-value-color); --ag-inherited-status-bar-value-font-weight: var(--ag-status-bar-value-font-weight); --ag-inherited-subtle-text-color: var(--ag-subtle-text-color); --ag-inherited-tab-background-color: var(--ag-tab-background-color); --ag-inherited-tab-bar-background-color: var(--ag-tab-bar-background-color); --ag-inherited-tab-bar-border: var(--ag-tab-bar-border); --ag-inherited-tab-bar-horizontal-padding: var(--ag-tab-bar-horizontal-padding); --ag-inherited-tab-bar-top-padding: var(--ag-tab-bar-top-padding); --ag-inherited-tab-bottom-padding: var(--ag-tab-bottom-padding); --ag-inherited-tab-horizontal-padding: var(--ag-tab-horizontal-padding); --ag-inherited-tab-hover-background-color: var(--ag-tab-hover-background-color); --ag-inherited-tab-hover-text-color: var(--ag-tab-hover-text-color); --ag-inherited-tab-selected-background-color: var(--ag-tab-selected-background-color); --ag-inherited-tab-selected-border-color: var(--ag-tab-selected-border-color); --ag-inherited-tab-selected-border-width: var(--ag-tab-selected-border-width); --ag-inherited-tab-selected-text-color: var(--ag-tab-selected-text-color); --ag-inherited-tab-selected-underline-color: var(--ag-tab-selected-underline-color); --ag-inherited-tab-selected-underline-transition-duration: var(--ag-tab-selected-underline-transition-duration); --ag-inherited-tab-selected-underline-width: var(--ag-tab-selected-underline-width); --ag-inherited-tab-spacing: var(--ag-tab-spacing); --ag-inherited-tab-text-color: var(--ag-tab-text-color); --ag-inherited-tab-top-padding: var(--ag-tab-top-padding); --ag-inherited-text-color: var(--ag-text-color); --ag-inherited-toggle-button-height: var(--ag-toggle-button-height); --ag-inherited-toggle-button-off-background-color: var(--ag-toggle-button-off-background-color); --ag-inherited-toggle-button-on-background-color: var(--ag-toggle-button-on-background-color); --ag-inherited-toggle-button-switch-background-color: var(--ag-toggle-button-switch-background-color); --ag-inherited-toggle-button-switch-inset: var(--ag-toggle-button-switch-inset); --ag-inherited-toggle-button-width: var(--ag-toggle-button-width); --ag-inherited-tool-panel-separator-border: var(--ag-tool-panel-separator-border); --ag-inherited-tooltip-background-color: var(--ag-tooltip-background-color); --ag-inherited-tooltip-border: var(--ag-tooltip-border); --ag-inherited-tooltip-text-color: var(--ag-tooltip-text-color); --ag-inherited-value-change-delta-down-color: var(--ag-value-change-delta-down-color); --ag-inherited-value-change-delta-up-color: var(--ag-value-change-delta-up-color); --ag-inherited-value-change-value-highlight-background-color: var(--ag-value-change-value-highlight-background-color); --ag-inherited-widget-container-horizontal-padding: var(--ag-widget-container-horizontal-padding); --ag-inherited-widget-container-vertical-padding: var(--ag-widget-container-vertical-padding); --ag-inherited-widget-horizontal-spacing: var(--ag-widget-horizontal-spacing); --ag-inherited-widget-vertical-spacing: var(--ag-widget-vertical-spacing); --ag-inherited-wrapper-border: var(--ag-wrapper-border); --ag-inherited-wrapper-border-radius: var(--ag-wrapper-border-radius); :where(\[data-ag-theme-mode="light"\]) & { --ag-inherited-browser-color-scheme: var(--ag-browser-color-scheme); --ag-inherited-chrome-background-color: var(--ag-chrome-background-color); } :where(\[data-ag-theme-mode="dark"\]) & { --ag-inherited-advanced-filter-builder-column-pill-color: var(--ag-advanced-filter-builder-column-pill-color); --ag-inherited-advanced-filter-builder-join-pill-color: var(--ag-advanced-filter-builder-join-pill-color); --ag-inherited-advanced-filter-builder-option-pill-color: var(--ag-advanced-filter-builder-option-pill-color); --ag-inherited-advanced-filter-builder-value-pill-color: var(--ag-advanced-filter-builder-value-pill-color); --ag-inherited-browser-color-scheme: var(--ag-browser-color-scheme); --ag-inherited-chrome-background-color: var(--ag-chrome-background-color); --ag-inherited-find-active-match-color: var(--ag-find-active-match-color); --ag-inherited-find-match-color: var(--ag-find-match-color); --ag-inherited-menu-background-color: var(--ag-menu-background-color); } :where(\[data-ag-theme-mode="dark-blue"\]) & { --ag-inherited-advanced-filter-builder-column-pill-color: var(--ag-advanced-filter-builder-column-pill-color); --ag-inherited-advanced-filter-builder-join-pill-color: var(--ag-advanced-filter-builder-join-pill-color); --ag-inherited-advanced-filter-builder-option-pill-color: var(--ag-advanced-filter-builder-option-pill-color); --ag-inherited-advanced-filter-builder-value-pill-color: var(--ag-advanced-filter-builder-value-pill-color); --ag-inherited-browser-color-scheme: var(--ag-browser-color-scheme); --ag-inherited-chrome-background-color: var(--ag-chrome-background-color); --ag-inherited-find-active-match-color: var(--ag-find-active-match-color); --ag-inherited-find-match-color: var(--ag-find-match-color); --ag-inherited-menu-background-color: var(--ag-menu-background-color); } }
-
-Drag here to set row groups
-
-Drag here to set column labels
-
-Employee
-
-Sales performance
-
-Contact details
-
-Address
-
-First Name
-
-Rating
-
-Sales
-
-Profit
-
-Email
-
-Phone No
-
-Country
-
-Shellie
-
-53,977
-
-\-£642.26
-
-aliquet@purus.com
-
-0828 746 6831
-
-French Polynesia
-
-Jade
-
-55,947
-
-£246.35
-
-mi.pede.nonummy@senectus.org
-
-0800 360062
-
-Tonga
-
-Wyoming
-
-5,397
-
-\-£749.57
-
-Nulla.tempor.augue@aliquamiaculis.org
-
-0800 377 7753
-
-Rwanda
-
-Christine
-
-69,624
-
-\-£825.10
-
-neque.sed.dictum@ultricesVivamus.ca
-
-07578 190673
-
-Bahamas
-
-Jameson
-
-38,473
-
-£31.72
-
-sem.semper@liberoProin.com
-
-07489 442639
-
-Nauru
-
-Driscoll
-
-63,389
-
-\-£522.15
-
-libero.dui@estacfacilisis.edu
-
-0843 298 8205
-
-Tajikistan
-
-Morgan
-
-51,154
-
-\-£663.83
-
-mauris.eu@ipsum.ca
-
-070 6292 4498
-
-Colombia
-
-Kylee
-
-81,208
-
-£265.05
-
-libero.Proin@malesuadafamesac.com
-
-(017177) 84788
-
-Papua New Guinea
-
-Cathleen
-
-18,043
-
-\-£586.82
-
-risus.Donec@augue.edu
-
-(0115) 224 4142
-
-Guinea-Bissau
-
-Sierra
-
-59,735
-
-£453.83
-
-dictum.eleifend.nunc@tellus.net
-
-(01266) 957950
-
-Isle of Man
-
-Levi
-
-27,295
-
-\-£898.52
-
-Nulla.tempor.augue@nibhdolor.ca
-
-0855 608 0347
-
-Tuvalu
-
-Kyle
-
-94,492
-
-£31.27
-
-lacinia@senectus.org
-
-0845 46 40
-
-Qatar
-
-Emery
-
-81,067
-
-\-£841.66
-
-Nulla.facilisis@nonummyultriciesornare.co.uk
-
-(01553) 502913
-
-Belize
-
-Nadine
-
-88,554
-
-\-£981.43
-
-Duis@Sed.ca
-
-055 2785 0228
-
-Uruguay
-
-Dalton
-
-47,196
-
-£108.59
-
-nibh.dolor.nonummy@laoreetlibero.org
-
-0395 486 9374
-
-Cayman Islands
-
-Zeph
-
-66,367
-
-\-£676.31
-
-non.dui@felisorci.com
-
-0845 46 41
-
-Niger
-
-Shannon
-
-68,372
-
-\-£619.72
-
-leo@lobortis.co.uk
-
-0800 135593
-
-Somalia
-
-Erich
-
-30,032
-
-\-£620.27
-
-cursus.non.egestas@aliquet.org
-
-0845 46 44
-
-Sao Tome and Principe
-
-Rhiannon
-
-21,210
-
-£65.16
-
-arcu.Morbi.sit@cursus.edu
-
-0361 311 4051
-
-Croatia
-
-Elijah
-
-35,019
-
-\-£828.30
-
-ipsum.Donec.sollicitudin@leo.co.uk
-
-0800 365 8250
-
-San Marino
-
-Grady
-
-90,152
-
-\-£700.61
-
-mollis.nec.cursus@malesuadamalesuadaInteger.edu
-
-070 2824 3427
-
-Cuba
-
-Quentin
-
-22,001
-
-\-£521.47
-
-erat.vel@auctor.net
-
-(029) 5052 0365
-
-Mayotte
-
-Samuel
-
-31,692
-
-£61.05
-
-tellus@magnaSed.edu
-
-07064 102166
-
-Lebanon
-
-Merritt
-
-86,351
-
-\-£607.26
-
-interdum.Nunc.sollicitudin@elitpellentesque.edu
-
-0800 825458
-
-French Southern Territories
-
-Harlan
-
-60,892
-
-£235.20
-
-nascetur.ridiculus@feugiatmetussit.net
-
-(012812) 59410
-
-Saint Pierre and Miquelon
-
-Stuart
-
-81,917
-
-\-£717.78
-
-sed.pede.nec@maurisMorbinon.com
-
-0807 013 3815
-
-Jersey
-
-Clarke
-
-20,281
-
-£98.50
-
-in@estacfacilisis.org
-
-(028) 5013 9648
-
-Seychelles
-
-Roanna
-
-19,958
-
-\-£670.22
-
-dui@nascetur.net
-
-(024) 3023 2962
-
-Lesotho
-
-Delilah
-
-70,736
-
-\-£561.14
-
-laoreet.lectus.quis@utaliquam.edu
-
-07160 224163
-
-Indonesia
-
-Georgia
-
-76,321
-
-£434.92
-
-dui@enimnisl.net
-
-(0113) 542 3955
-
-Niue
-
-Aiko
-
-63,238
-
-£87.03
-
-cubilia.Curae.Phasellus@augueid.com
-
-055 9506 2116
-
-Belize
-
-Winter
-
-70,173
-
-\-£878.20
-
-aliquet@Duisac.ca
-
-0800 693847
-
-Equatorial Guinea
-
-Jolene
-
-31,148
-
-£343.50
-
-odio.Aliquam.vulputate@ac.ca
-
-(023) 4876 2215
-
-Morocco
-
-Kaden
-
-54,228
-
-\-£625.99
-
-rutrum@eleifendnec.ca
-
-07305 685548
-
-Peru
-
-Kaseem
-
-52,585
-
-\-£925.65
-
-mauris.erat.eget@nequeMorbi.com
-
-07275 403152
-
-Sudan
-
-Vladimir
-
-53,249
-
-\-£815.85
-
-id@nonarcuVivamus.edu
-
-0500 950469
-
-Mexico
-
-Jocelyn
-
-98,471
-
-\-£833.90
-
-dolor@nec.ca
-
-07302 403156
-
-Canada
-
-Howard
-
-41,419
-
-£445.19
-
-Donec.felis@insodales.com
-
-07624 830239
-
-Seychelles
-
-Adam
-
-51,772
-
-£388.56
-
-amet.dapibus@faucibus.edu
-
-0845 46 49
-
-Jordan
-
-Aiko
-
-55,131
-
-\-£980.25
-
-sodales@mauris.edu
-
-0800 1111
-
-Faroe Islands
-
-Columns
-
-Filters
-
-Pivot Mode
-
-Employee
-
-First Name
-
-Last Name
-
-Personal ID
-
-Date
-
-Sales performance
-
-Rating
-
-Sales
-
-Profit
-
-Contact details
-
-Email
-
-Phone No
-
-Address
-
-Street
-
-City
-
-Postcode
-
-Country
-
-Row Groups
-
-Drag here to set row groups
-
-Values
-
-Drag here to aggregate
-
-Column Labels
-
-Drag here to set column labels
-
-Employee
-
-Enabled
-
-First Name
-
-Last Name
-
-Personal ID
-
-Date
-
-Sales performance
-
-Enabled
-
-Sales
-
-Profit
-
-Contact details
-
-Enabled
-
-Email
-
-Phone No
-
-Address
-
-Enabled
-
-Street
-
-City
-
-Postcode
-
-Country
-
-to of
-
-Page of
-
-Show code
-
-### [](#compact)Compact
-
-This is a complex example showcasing some of the more advanced features of AG Grid using the `compact` variant.
-
-/\* Ellipsis text \*/ .iress-cell--ellipsis .ag-cell-wrapper { overflow: hidden; } .iress-cell--ellipsis .ag-cell-wrapper .ag-cell-value { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /\* Column divider \*/ .ag-header-cell.iress-cell--divider, .ag-cell.iress-cell--divider { border-inline-end: 1px solid var(--iress-colour-neutral-40, #D7D8DA); } /\* Positive and negative values \*/ .ag-cell.iress--positive, .ag-cell .iress--positive { color: var(--iress-colour-system-success-text, #015537); } .ag-cell.iress--negative, .ag-cell .iress--negative { color: var(--iress-colour-system-danger-text, #970202); } .ag-cell.iress--zero, .ag-cell .iress--zero { color: var(--iress-colour-neutral-70, #6D7278); }
-
-:where(.ag-theme-params-3) { --ag-accent-color: var(--ag-inherited-accent-color, var(--iress-colour-primary-fill, #13213F)); --ag-advanced-filter-builder-button-bar-border: var(--ag-inherited-advanced-filter-builder-button-bar-border, solid 1px var(--ag-border-color)); --ag-advanced-filter-builder-column-pill-color: var(--ag-inherited-advanced-filter-builder-column-pill-color, #a6e194); --ag-advanced-filter-builder-indent-size: var(--ag-inherited-advanced-filter-builder-indent-size, calc( var(--ag-spacing) \* 2 + var(--ag-icon-size) )); --ag-advanced-filter-builder-join-pill-color: var(--ag-inherited-advanced-filter-builder-join-pill-color, #f08e8d); --ag-advanced-filter-builder-option-pill-color: var(--ag-inherited-advanced-filter-builder-option-pill-color, #f3c08b); --ag-advanced-filter-builder-value-pill-color: var(--ag-inherited-advanced-filter-builder-value-pill-color, #85c0e4); --ag-background-color: var(--ag-inherited-background-color, var(--iress-colour-neutral-10, #FFFFFF)); --ag-border-color: var(--ag-inherited-border-color, var(--iress-colour-neutral-30, #E4E5E7)); --ag-border-radius: var(--ag-inherited-border-radius, var(--iress-radius-system-layout, var(--iress-radius-100, 1rem) var(--iress-radius-100, 1rem) var(--iress-radius-100, 1rem) var(--iress-radius-100, 1rem))); --ag-browser-color-scheme: var(--ag-inherited-browser-color-scheme, light); --ag-button-active-background-color: var(--ag-inherited-button-active-background-color, var(--ag-accent-color)); --ag-button-active-border: var(--ag-inherited-button-active-border, var(--ag-button-hover-border)); --ag-button-active-text-color: var(--ag-inherited-button-active-text-color, var(--ag-background-color)); --ag-button-background-color: var(--ag-inherited-button-background-color, var(--iress-colour-primary-surface, #D9E5FF)); --ag-button-border: var(--ag-inherited-button-border, solid 1px var(--iress-colour-primary-surface, #D9E5FF)); --ag-button-border-radius: var(--ag-inherited-button-border-radius, var(--iress-radius-system-button, var(--iress-radius-075, calc(0.75 \* 1rem)) var(--iress-radius-075, calc(0.75 \* 1rem)) var(--iress-radius-075, calc(0.75 \* 1rem)) var(--iress-radius-075, calc(0.75 \* 1rem)))); --ag-button-disabled-background-color: var(--ag-inherited-button-disabled-background-color, var(--ag-input-disabled-background-color)); --ag-button-disabled-border: var(--ag-inherited-button-disabled-border, var(--ag-input-disabled-border)); --ag-button-disabled-text-color: var(--ag-inherited-button-disabled-text-color, var(--ag-input-disabled-text-color)); --ag-button-font-weight: var(--ag-inherited-button-font-weight, 600); --ag-button-horizontal-padding: var(--ag-inherited-button-horizontal-padding, calc( var(--ag-spacing) \* 2)); --ag-button-hover-background-color: var(--ag-inherited-button-hover-background-color, var(--ag-row-hover-color)); --ag-button-hover-border: var(--ag-inherited-button-hover-border, var(--ag-button-border)); --ag-button-hover-text-color: var(--ag-inherited-button-hover-text-color, var(--ag-button-text-color)); --ag-button-text-color: var(--ag-inherited-button-text-color, var(--iress-colour-primary-text, #13213F)); --ag-button-vertical-padding: var(--ag-inherited-button-vertical-padding, var(--ag-spacing)); --ag-card-shadow: var(--ag-inherited-card-shadow, var(--iress-elevation-raised-shadow, 0px 3px 5px #091E4220)); --ag-cell-editing-border: var(--ag-inherited-cell-editing-border, solid 1px var(--ag-accent-color)); --ag-cell-editing-shadow: var(--ag-inherited-cell-editing-shadow, var(--ag-card-shadow)); --ag-cell-font-family: var(--ag-inherited-cell-font-family, var(--iress-typography-base-body-font, Inter, Helvetica, sans-serif)); --ag-cell-horizontal-padding: var(--ag-inherited-cell-horizontal-padding, calc( var(--ag-spacing) \* 2 \* var(--ag-cell-horizontal-padding-scale) )); --ag-cell-horizontal-padding-scale: var(--ag-inherited-cell-horizontal-padding-scale, 1); --ag-cell-text-color: var(--ag-inherited-cell-text-color, var(--ag-text-color)); --ag-cell-widget-spacing: var(--ag-inherited-cell-widget-spacing, calc( var(--ag-spacing) \* 1.5)); --ag-chart-menu-label-color: var(--ag-inherited-chart-menu-label-color, color-mix(in srgb, transparent, var(--ag-foreground-color) 80%)); --ag-chart-menu-panel-width: var(--ag-inherited-chart-menu-panel-width, 260px); --ag-checkbox-border-radius: var(--ag-inherited-checkbox-border-radius, var(--iress-radius-system-badge, var(--iress-radius-025, calc(0.25 \* 1rem)) var(--iress-radius-025, calc(0.25 \* 1rem)) var(--iress-radius-025, calc(0.25 \* 1rem)) var(--iress-radius-025, calc(0.25 \* 1rem)))); --ag-checkbox-border-width: var(--ag-inherited-checkbox-border-width, 1px); --ag-checkbox-checked-background-color: var(--ag-inherited-checkbox-checked-background-color, var(--iress-colour-primary-fill, #13213F)); --ag-checkbox-checked-border-color: var(--ag-inherited-checkbox-checked-border-color, var(--iress-colour-primary-fill, #13213F)); --ag-checkbox-checked-shape-color: var(--ag-inherited-checkbox-checked-shape-color, var(--iress-colour-primary-on-fill, #ECF2FF)); --ag-checkbox-checked-shape-image: var(--ag-inherited-checkbox-checked-shape-image, url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%227%22%20fill%3D%22none%22%3E%3Cpath%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.75%22%20d%3D%22M1%203.5%203.5%206l5-5%22%2F%3E%3C%2Fsvg%3E")); --ag-checkbox-indeterminate-background-color: var(--ag-inherited-checkbox-indeterminate-background-color, var(--iress-colour-primary-fill, #13213F)); --ag-checkbox-indeterminate-border-color: var(--ag-inherited-checkbox-indeterminate-border-color, var(--iress-colour-primary-fill, #13213F)); --ag-checkbox-indeterminate-shape-color: var(--ag-inherited-checkbox-indeterminate-shape-color, var(--iress-colour-primary-on-fill, #ECF2FF)); --ag-checkbox-indeterminate-shape-image: var(--ag-inherited-checkbox-indeterminate-shape-image, url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%222%22%20fill%3D%22none%22%3E%3Crect%20width%3D%2210%22%20height%3D%222%22%20fill%3D%22%23000%22%20rx%3D%221%22%2F%3E%3C%2Fsvg%3E")); --ag-checkbox-unchecked-background-color: var(--ag-inherited-checkbox-unchecked-background-color, var(--iress-colour-neutral-10, #FFFFFF)); --ag-checkbox-unchecked-border-color: var(--ag-inherited-checkbox-unchecked-border-color, var(--iress-colour-neutral-70, #6D7278)); --ag-chrome-background-color: var(--ag-inherited-chrome-background-color, color-mix(in srgb, var(--ag-background-color), var(--ag-foreground-color) 2%)); --ag-column-border: var(--ag-inherited-column-border, solid 1px transparent); --ag-column-drop-cell-background-color: var(--ag-inherited-column-drop-cell-background-color, color-mix(in srgb, transparent, var(--ag-foreground-color) 7.000000000000001%)); --ag-column-drop-cell-border: var(--ag-inherited-column-drop-cell-border, solid 1px color-mix(in srgb, transparent, var(--ag-foreground-color) 13%)); --ag-column-drop-cell-drag-handle-color: var(--ag-inherited-column-drop-cell-drag-handle-color, var(--ag-text-color)); --ag-column-drop-cell-text-color: var(--ag-inherited-column-drop-cell-text-color, var(--ag-text-color)); --ag-column-hover-color: var(--ag-inherited-column-hover-color, var(--iress-colour-neutral-20, #F9F9F9)); --ag-column-select-indent-size: var(--ag-inherited-column-select-indent-size, var(--ag-icon-size)); --ag-data-font-size: var(--ag-inherited-data-font-size, calc(var(--iress-typography-base-size, .875rem) \* (12 / 14))); --ag-dialog-border: var(--ag-inherited-dialog-border, solid 1px color-mix(in srgb, transparent, var(--ag-foreground-color) 20%)); --ag-dialog-shadow: var(--ag-inherited-dialog-shadow, var(--iress-elevation-floating-shadow, 0px 10px 18px #091E4215)); --ag-drag-and-drop-image-background-color: var(--ag-inherited-drag-and-drop-image-background-color, var(--ag-background-color)); --ag-drag-and-drop-image-border: var(--ag-inherited-drag-and-drop-image-border, solid 1px var(--ag-border-color)); --ag-drag-and-drop-image-shadow: var(--ag-inherited-drag-and-drop-image-shadow, var(--iress-elevation-focus-shadow, 0px 0px 0px 1.5px var(--iress-colour-neutral-10, #FFFFFF), 0px 0px 0px 3.5px #0066FF)); --ag-drag-handle-color: var(--ag-inherited-drag-handle-color, color-mix(in srgb, transparent, var(--ag-foreground-color) 70%)); --ag-dropdown-shadow: var(--ag-inherited-dropdown-shadow, var(--iress-elevation-floating-shadow, 0px 10px 18px #091E4215)); --ag-filter-tool-panel-group-indent: var(--ag-inherited-filter-tool-panel-group-indent, var(--ag-spacing)); --ag-find-active-match-background-color: var(--ag-inherited-find-active-match-background-color, #ffa500); --ag-find-active-match-color: var(--ag-inherited-find-active-match-color, var(--ag-foreground-color)); --ag-find-match-background-color: var(--ag-inherited-find-match-background-color, #ffff00); --ag-find-match-color: var(--ag-inherited-find-match-color, var(--ag-foreground-color)); --ag-focus-shadow: var(--ag-inherited-focus-shadow, var(--iress-elevation-focus-shadow, 0px 0px 0px 1.5px var(--iress-colour-neutral-10, #FFFFFF), 0px 0px 0px 3.5px #0066FF)); --ag-font-family: var(--ag-inherited-font-family, var(--iress-typography-base-body-font, Inter, Helvetica, sans-serif)); --ag-font-size: var(--ag-inherited-font-size, calc(var(--iress-typography-base-size, .875rem) \* (12 / 14))); --ag-footer-row-border: var(--ag-inherited-footer-row-border, var(--ag-row-border)); --ag-foreground-color: var(--ag-inherited-foreground-color, var(--iress-colour-neutral-80, #393F46)); --ag-header-background-color: var(--ag-inherited-header-background-color, var(--iress-colour-neutral-10, #FFFFFF)); --ag-header-cell-background-transition-duration: var(--ag-inherited-header-cell-background-transition-duration, 0.2s); --ag-header-cell-hover-background-color: var(--ag-inherited-header-cell-hover-background-color, transparent); --ag-header-cell-moving-background-color: var(--ag-inherited-header-cell-moving-background-color, var(--ag-header-cell-hover-background-color)); --ag-header-column-border: var(--ag-inherited-header-column-border, none); --ag-header-column-border-height: var(--ag-inherited-header-column-border-height, 100%); --ag-header-column-resize-handle-color: var(--ag-inherited-header-column-resize-handle-color, var(--ag-border-color)); --ag-header-column-resize-handle-height: var(--ag-inherited-header-column-resize-handle-height, 30%); --ag-header-column-resize-handle-width: var(--ag-inherited-header-column-resize-handle-width, 2px); --ag-header-font-family: var(--ag-inherited-header-font-family, var(--iress-typography-base-body-font, Inter, Helvetica, sans-serif)); --ag-header-font-size: var(--ag-inherited-header-font-size, var(--ag-font-size)); --ag-header-font-weight: var(--ag-inherited-header-font-weight, 700); --ag-header-height: var(--ag-inherited-header-height, calc(max( var(--ag-icon-size) , var(--ag-data-font-size) ) + var(--ag-spacing) \* 4 \* var(--ag-header-vertical-padding-scale) )); --ag-header-row-border: var(--ag-inherited-header-row-border, solid 1px var(--iress-colour-neutral-40, #D7D8DA)); --ag-header-text-color: var(--ag-inherited-header-text-color, var(--ag-text-color)); --ag-header-vertical-padding-scale: var(--ag-inherited-header-vertical-padding-scale, 1); --ag-icon-button-active-background-color: var(--ag-inherited-icon-button-active-background-color, transparent); --ag-icon-button-active-color: var(--ag-inherited-icon-button-active-color, var(--ag-accent-color)); --ag-icon-button-active-indicator-color: var(--ag-inherited-icon-button-active-indicator-color, var(--ag-accent-color)); --ag-icon-button-background-color: var(--ag-inherited-icon-button-background-color, transparent); --ag-icon-button-background-spread: var(--ag-inherited-icon-button-background-spread, 4px); --ag-icon-button-border-radius: var(--ag-inherited-icon-button-border-radius, 1px); --ag-icon-button-color: var(--ag-inherited-icon-button-color, var(--ag-icon-color)); --ag-icon-button-hover-background-color: var(--ag-inherited-icon-button-hover-background-color, transparent); --ag-icon-button-hover-color: var(--ag-inherited-icon-button-hover-color, var(--ag-accent-color)); --ag-icon-color: var(--ag-inherited-icon-color, inherit); --ag-icon-size: var(--ag-inherited-icon-size, 16px); --ag-input-background-color: var(--ag-inherited-input-background-color, var(--ag-background-color)); --ag-input-border: var(--ag-inherited-input-border, solid 1px var(--iress-colour-neutral-70, #6D7278)); --ag-input-border-radius: var(--ag-inherited-input-border-radius, var(--iress-radius-system-form, var(--iress-radius-050, calc(0.5 \* 1rem)) var(--iress-radius-050, calc(0.5 \* 1rem)) var(--iress-radius-050, calc(0.5 \* 1rem)) var(--iress-radius-050, calc(0.5 \* 1rem)))); --ag-input-disabled-background-color: var(--ag-inherited-input-disabled-background-color, var(--iress-colour-neutral-20, #F9F9F9)); --ag-input-disabled-border: var(--ag-inherited-input-disabled-border, solid 1px var(--iress-colour-neutral-40, #D7D8DA)); --ag-input-disabled-text-color: var(--ag-inherited-input-disabled-text-color, var(--iress-colour-neutral-60, #878B92)); --ag-input-focus-background-color: var(--ag-inherited-input-focus-background-color, var(--ag-input-background-color)); --ag-input-focus-border: var(--ag-inherited-input-focus-border, solid 1px color-mix(in srgb, transparent, var(--ag-accent-color) 40%)); --ag-input-focus-shadow: var(--ag-inherited-input-focus-shadow, var(--iress-elevation-focus-shadow, 0px 0px 0px 1.5px var(--iress-colour-neutral-10, #FFFFFF), 0px 0px 0px 3.5px #0066FF)); --ag-input-focus-text-color: var(--ag-inherited-input-focus-text-color, var(--ag-input-text-color)); --ag-input-height: var(--ag-inherited-input-height, calc(max( var(--ag-icon-size) , var(--ag-font-size) ) + var(--ag-spacing) \* 2)); --ag-input-icon-color: var(--ag-inherited-input-icon-color, var(--iress-colour-neutral-70, #6D7278)); --ag-input-invalid-background-color: var(--ag-inherited-input-invalid-background-color, var(--iress-colour-system-danger-surface, #FEE8E7)); --ag-input-invalid-border: var(--ag-inherited-input-invalid-border, var(--iress-colour-system-danger-fill, #C20A0A)); --ag-input-invalid-text-color: var(--ag-inherited-input-invalid-text-color, var(--iress-colour-system-danger-text, #970202)); --ag-input-padding-start: var(--ag-inherited-input-padding-start, var(--ag-spacing)); --ag-input-placeholder-text-color: var(--ag-inherited-input-placeholder-text-color, color-mix(in srgb, transparent, var(--ag-input-text-color) 50%)); --ag-input-text-color: var(--ag-inherited-input-text-color, var(--iress-colour-neutral-80, #393F46)); --ag-invalid-color: var(--ag-inherited-invalid-color, var(--iress-colour-system-danger-fill, #C20A0A)); --ag-list-item-height: var(--ag-inherited-list-item-height, calc(max( var(--ag-icon-size) , var(--ag-data-font-size) ) + var(--ag-widget-vertical-spacing) )); --ag-menu-background-color: var(--ag-inherited-menu-background-color, color-mix(in srgb, var(--ag-background-color), var(--ag-foreground-color) 3%)); --ag-menu-border: var(--ag-inherited-menu-border, solid 1px color-mix(in srgb, transparent, var(--ag-foreground-color) 20%)); --ag-menu-separator-color: var(--ag-inherited-menu-separator-color, var(--ag-border-color)); --ag-menu-shadow: var(--ag-inherited-menu-shadow, var(--iress-elevation-floating-shadow, 0px 10px 18px #091E4215)); --ag-menu-text-color: var(--ag-inherited-menu-text-color, color-mix(in srgb, var(--ag-background-color), var(--ag-foreground-color) 95%)); --ag-modal-overlay-background-color: var(--ag-inherited-modal-overlay-background-color, var(--iress-colour-system-backdrop-fill, #393F46CC)); --ag-odd-row-background-color: var(--ag-inherited-odd-row-background-color, var(--iress-colour-neutral-10, #FFFFFF)); --ag-panel-background-color: var(--ag-inherited-panel-background-color, var(--ag-background-color)); --ag-panel-title-bar-background-color: var(--ag-inherited-panel-title-bar-background-color, var(--ag-header-background-color)); --ag-panel-title-bar-border: var(--ag-inherited-panel-title-bar-border, solid 1px var(--ag-border-color)); --ag-panel-title-bar-font-weight: var(--ag-inherited-panel-title-bar-font-weight, var(--ag-header-font-weight)); --ag-panel-title-bar-icon-color: var(--ag-inherited-panel-title-bar-icon-color, var(--ag-header-text-color)); --ag-panel-title-bar-text-color: var(--ag-inherited-panel-title-bar-text-color, var(--ag-header-text-color)); --ag-picker-button-background-color: var(--ag-inherited-picker-button-background-color, var(--ag-background-color)); --ag-picker-button-border: var(--ag-inherited-picker-button-border, solid 1px var(--ag-border-color)); --ag-picker-button-focus-background-color: var(--ag-inherited-picker-button-focus-background-color, var(--ag-background-color)); --ag-picker-button-focus-border: var(--ag-inherited-picker-button-focus-border, var(--ag-input-focus-border)); --ag-picker-list-background-color: var(--ag-inherited-picker-list-background-color, var(--ag-background-color)); --ag-picker-list-border: var(--ag-inherited-picker-list-border, solid 1px var(--ag-border-color)); --ag-pinned-column-border: var(--ag-inherited-pinned-column-border, solid 1px var(--ag-border-color)); --ag-pinned-row-background-color: var(--ag-inherited-pinned-row-background-color, var(--ag-background-color)); --ag-pinned-row-border: var(--ag-inherited-pinned-row-border, solid 1px var(--ag-border-color)); --ag-pinned-row-font-weight: var(--ag-inherited-pinned-row-font-weight, 600); --ag-pinned-row-text-color: var(--ag-inherited-pinned-row-text-color, var(--ag-text-color)); --ag-pinned-source-row-background-color: var(--ag-inherited-pinned-source-row-background-color, var(--ag-background-color)); --ag-pinned-source-row-font-weight: var(--ag-inherited-pinned-source-row-font-weight, 600); --ag-pinned-source-row-text-color: var(--ag-inherited-pinned-source-row-text-color, var(--ag-text-color)); --ag-popup-shadow: var(--ag-inherited-popup-shadow, var(--iress-elevation-floating-shadow, 0px 10px 18px #091E4215)); --ag-radio-checked-shape-image: var(--ag-inherited-radio-checked-shape-image, url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%226%22%20height%3D%226%22%20fill%3D%22none%22%3E%3Ccircle%20cx%3D%223%22%20cy%3D%223%22%20r%3D%223%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E")); --ag-range-header-highlight-color: var(--ag-inherited-range-header-highlight-color, color-mix(in srgb, var(--ag-header-background-color), var(--ag-foreground-color) 8%)); --ag-range-selection-background-color: var(--ag-inherited-range-selection-background-color, color-mix(in srgb, transparent, var(--ag-accent-color) 10%)); --ag-range-selection-border-color: var(--ag-inherited-range-selection-border-color, var(--iress-colour-primary-fill, #13213F)); --ag-range-selection-border-style: var(--ag-inherited-range-selection-border-style, solid); --ag-range-selection-chart-background-color: var(--ag-inherited-range-selection-chart-background-color, #0058FF1A); --ag-range-selection-chart-category-background-color: var(--ag-inherited-range-selection-chart-category-background-color, #00FF841A); --ag-range-selection-highlight-color: var(--ag-inherited-range-selection-highlight-color, color-mix(in srgb, transparent, var(--ag-accent-color) 50%)); --ag-row-border: var(--ag-inherited-row-border, solid 1px var(--iress-colour-neutral-40, #D7D8DA)); --ag-row-group-indent-size: var(--ag-inherited-row-group-indent-size, calc( var(--ag-cell-widget-spacing) + var(--ag-icon-size) )); --ag-row-height: var(--ag-inherited-row-height, calc(max( var(--ag-icon-size) , var(--ag-data-font-size) ) + var(--ag-spacing) \* 3.25 \* var(--ag-row-vertical-padding-scale) )); --ag-row-hover-color: var(--ag-inherited-row-hover-color, var(--iress-colour-primary-surface, #D9E5FF)); --ag-row-loading-skeleton-effect-color: var(--ag-inherited-row-loading-skeleton-effect-color, color-mix(in srgb, transparent, var(--ag-foreground-color) 15%)); --ag-row-numbers-selected-color: var(--ag-inherited-row-numbers-selected-color, color-mix(in srgb, transparent, var(--ag-accent-color) 50%)); --ag-row-vertical-padding-scale: var(--ag-inherited-row-vertical-padding-scale, 1); --ag-select-cell-background-color: var(--ag-inherited-select-cell-background-color, color-mix(in srgb, transparent, var(--ag-foreground-color) 7.000000000000001%)); --ag-select-cell-border: var(--ag-inherited-select-cell-border, solid 1px color-mix(in srgb, transparent, var(--ag-foreground-color) 13%)); --ag-selected-row-background-color: var(--ag-inherited-selected-row-background-color, var(--iress-colour-neutral-20, #F9F9F9)); --ag-set-filter-indent-size: var(--ag-inherited-set-filter-indent-size, var(--ag-icon-size)); --ag-side-bar-background-color: var(--ag-inherited-side-bar-background-color, transparent); --ag-side-bar-panel-width: var(--ag-inherited-side-bar-panel-width, 250px); --ag-side-button-background-color: var(--ag-inherited-side-button-background-color, transparent); --ag-side-button-bar-background-color: var(--ag-inherited-side-button-bar-background-color, var(--ag-side-bar-background-color)); --ag-side-button-bar-top-padding: var(--ag-inherited-side-button-bar-top-padding, calc( var(--ag-spacing) \* 3)); --ag-side-button-border: var(--ag-inherited-side-button-border, none); --ag-side-button-hover-background-color: var(--ag-inherited-side-button-hover-background-color, var(--ag-side-button-background-color)); --ag-side-button-hover-text-color: var(--ag-inherited-side-button-hover-text-color, var(--ag-accent-color)); --ag-side-button-left-padding: var(--ag-inherited-side-button-left-padding, var(--ag-spacing)); --ag-side-button-right-padding: var(--ag-inherited-side-button-right-padding, var(--ag-spacing)); --ag-side-button-selected-background-color: var(--ag-inherited-side-button-selected-background-color, transparent); --ag-side-button-selected-border: var(--ag-inherited-side-button-selected-border, none); --ag-side-button-selected-text-color: var(--ag-inherited-side-button-selected-text-color, var(--ag-side-button-text-color)); --ag-side-button-selected-underline-color: var(--ag-inherited-side-button-selected-underline-color, var(--ag-accent-color)); --ag-side-button-selected-underline-transition-duration: var(--ag-inherited-side-button-selected-underline-transition-duration, 0.3s); --ag-side-button-selected-underline-width: var(--ag-inherited-side-button-selected-underline-width, 2px); --ag-side-button-text-color: var(--ag-inherited-side-button-text-color, var(--ag-text-color)); --ag-side-button-vertical-padding: var(--ag-inherited-side-button-vertical-padding, calc( var(--ag-spacing) \* 3)); --ag-side-panel-border: var(--ag-inherited-side-panel-border, solid 1px var(--ag-border-color)); --ag-spacing: var(--ag-inherited-spacing, 3px); --ag-status-bar-label-color: var(--ag-inherited-status-bar-label-color, var(--ag-foreground-color)); --ag-status-bar-label-font-weight: var(--ag-inherited-status-bar-label-font-weight, 500); --ag-status-bar-value-color: var(--ag-inherited-status-bar-value-color, var(--ag-foreground-color)); --ag-status-bar-value-font-weight: var(--ag-inherited-status-bar-value-font-weight, 500); --ag-subtle-text-color: var(--ag-inherited-subtle-text-color, var(--iress-colour-neutral-70, #6D7278)); --ag-tab-background-color: var(--ag-inherited-tab-background-color, transparent); --ag-tab-bar-background-color: var(--ag-inherited-tab-bar-background-color, var(--ag-chrome-background-color)); --ag-tab-bar-border: var(--ag-inherited-tab-bar-border, solid 1px var(--iress-colour-primary-fill, #13213F)); --ag-tab-bar-horizontal-padding: var(--ag-inherited-tab-bar-horizontal-padding, 0px); --ag-tab-bar-top-padding: var(--ag-inherited-tab-bar-top-padding, 0px); --ag-tab-bottom-padding: var(--ag-inherited-tab-bottom-padding, var(--ag-spacing)); --ag-tab-horizontal-padding: var(--ag-inherited-tab-horizontal-padding, var(--ag-spacing)); --ag-tab-hover-background-color: var(--ag-inherited-tab-hover-background-color, var(--ag-tab-background-color)); --ag-tab-hover-text-color: var(--ag-inherited-tab-hover-text-color, var(--ag-accent-color)); --ag-tab-selected-background-color: var(--ag-inherited-tab-selected-background-color, var(--ag-tab-background-color)); --ag-tab-selected-border-color: var(--ag-inherited-tab-selected-border-color, transparent); --ag-tab-selected-border-width: var(--ag-inherited-tab-selected-border-width, 0px); --ag-tab-selected-text-color: var(--ag-inherited-tab-selected-text-color, var(--ag-accent-color)); --ag-tab-selected-underline-color: var(--ag-inherited-tab-selected-underline-color, var(--ag-accent-color)); --ag-tab-selected-underline-transition-duration: var(--ag-inherited-tab-selected-underline-transition-duration, 0.3s); --ag-tab-selected-underline-width: var(--ag-inherited-tab-selected-underline-width, 2px); --ag-tab-spacing: var(--ag-inherited-tab-spacing, 0); --ag-tab-text-color: var(--ag-inherited-tab-text-color, var(--ag-text-color)); --ag-tab-top-padding: var(--ag-inherited-tab-top-padding, var(--ag-spacing)); --ag-text-color: var(--ag-inherited-text-color, var(--ag-foreground-color)); --ag-toggle-button-height: var(--ag-inherited-toggle-button-height, 18px); --ag-toggle-button-off-background-color: var(--ag-inherited-toggle-button-off-background-color, color-mix(in srgb, var(--ag-background-color), var(--ag-foreground-color) 45%)); --ag-toggle-button-on-background-color: var(--ag-inherited-toggle-button-on-background-color, var(--ag-accent-color)); --ag-toggle-button-switch-background-color: var(--ag-inherited-toggle-button-switch-background-color, var(--ag-background-color)); --ag-toggle-button-switch-inset: var(--ag-inherited-toggle-button-switch-inset, 1px); --ag-toggle-button-width: var(--ag-inherited-toggle-button-width, 28px); --ag-tool-panel-separator-border: var(--ag-inherited-tool-panel-separator-border, solid 1px var(--ag-border-color)); --ag-tooltip-background-color: var(--ag-inherited-tooltip-background-color, var(--iress-colour-neutral-80, #393F46)); --ag-tooltip-border: var(--ag-inherited-tooltip-border, solid 1px var(--ag-border-color)); --ag-tooltip-text-color: var(--ag-inherited-tooltip-text-color, var(--iress-colour-neutral-10, #FFFFFF)); --ag-value-change-delta-down-color: var(--ag-inherited-value-change-delta-down-color, var(--iress-colour-system-danger-fill, #C20A0A)); --ag-value-change-delta-up-color: var(--ag-inherited-value-change-delta-up-color, var(--iress-colour-system-success-fill, #02794D)); --ag-value-change-value-highlight-background-color: var(--ag-inherited-value-change-value-highlight-background-color, color-mix(in srgb, transparent, var(--ag-accent-color) 20%)); --ag-widget-container-horizontal-padding: var(--ag-inherited-widget-container-horizontal-padding, calc( var(--ag-spacing) \* 1.5)); --ag-widget-container-vertical-padding: var(--ag-inherited-widget-container-vertical-padding, calc( var(--ag-spacing) \* 1.5)); --ag-widget-horizontal-spacing: var(--ag-inherited-widget-horizontal-spacing, calc( var(--ag-spacing) \* 1.5)); --ag-widget-vertical-spacing: var(--ag-inherited-widget-vertical-spacing, var(--ag-spacing)); --ag-wrapper-border: var(--ag-inherited-wrapper-border, none); --ag-wrapper-border-radius: var(--ag-inherited-wrapper-border-radius, var(--iress-radius-system-layout, var(--iress-radius-100, 1rem) var(--iress-radius-100, 1rem) var(--iress-radius-100, 1rem) var(--iress-radius-100, 1rem))); :where(\[data-ag-theme-mode="light"\]) & { --ag-browser-color-scheme: var(--ag-inherited-browser-color-scheme, light); --ag-chrome-background-color: var(--ag-inherited-chrome-background-color, color-mix(in srgb, var(--ag-background-color), var(--ag-foreground-color) 2%)); } :where(\[data-ag-theme-mode="dark"\]) & { --ag-advanced-filter-builder-column-pill-color: var(--ag-inherited-advanced-filter-builder-column-pill-color, #355f2d); --ag-advanced-filter-builder-join-pill-color: var(--ag-inherited-advanced-filter-builder-join-pill-color, #7a3a37); --ag-advanced-filter-builder-option-pill-color: var(--ag-inherited-advanced-filter-builder-option-pill-color, #5a3168); --ag-advanced-filter-builder-value-pill-color: var(--ag-inherited-advanced-filter-builder-value-pill-color, #374c86); --ag-browser-color-scheme: var(--ag-inherited-browser-color-scheme, dark); --ag-chrome-background-color: var(--ag-inherited-chrome-background-color, color-mix(in srgb, var(--ag-background-color), var(--ag-foreground-color) 5%)); --ag-find-active-match-color: var(--ag-inherited-find-active-match-color, var(--ag-background-color)); --ag-find-match-color: var(--ag-inherited-find-match-color, var(--ag-background-color)); --ag-menu-background-color: var(--ag-inherited-menu-background-color, color-mix(in srgb, var(--ag-background-color), var(--ag-foreground-color) 10%)); } :where(\[data-ag-theme-mode="dark-blue"\]) & { --ag-advanced-filter-builder-column-pill-color: var(--ag-inherited-advanced-filter-builder-column-pill-color, #355f2d); --ag-advanced-filter-builder-join-pill-color: var(--ag-inherited-advanced-filter-builder-join-pill-color, #7a3a37); --ag-advanced-filter-builder-option-pill-color: var(--ag-inherited-advanced-filter-builder-option-pill-color, #5a3168); --ag-advanced-filter-builder-value-pill-color: var(--ag-inherited-advanced-filter-builder-value-pill-color, #374c86); --ag-browser-color-scheme: var(--ag-inherited-browser-color-scheme, dark); --ag-chrome-background-color: var(--ag-inherited-chrome-background-color, color-mix(in srgb, var(--ag-background-color), var(--ag-foreground-color) 5%)); --ag-find-active-match-color: var(--ag-inherited-find-active-match-color, var(--ag-background-color)); --ag-find-match-color: var(--ag-inherited-find-match-color, var(--ag-background-color)); --ag-menu-background-color: var(--ag-inherited-menu-background-color, color-mix(in srgb, var(--ag-background-color), var(--ag-foreground-color) 10%)); } } :has(> :where(.ag-theme-params-3)):not(:where(.ag-theme-params-3)) { --ag-inherited-accent-color: var(--ag-accent-color); --ag-inherited-advanced-filter-builder-button-bar-border: var(--ag-advanced-filter-builder-button-bar-border); --ag-inherited-advanced-filter-builder-column-pill-color: var(--ag-advanced-filter-builder-column-pill-color); --ag-inherited-advanced-filter-builder-indent-size: var(--ag-advanced-filter-builder-indent-size); --ag-inherited-advanced-filter-builder-join-pill-color: var(--ag-advanced-filter-builder-join-pill-color); --ag-inherited-advanced-filter-builder-option-pill-color: var(--ag-advanced-filter-builder-option-pill-color); --ag-inherited-advanced-filter-builder-value-pill-color: var(--ag-advanced-filter-builder-value-pill-color); --ag-inherited-background-color: var(--ag-background-color); --ag-inherited-border-color: var(--ag-border-color); --ag-inherited-border-radius: var(--ag-border-radius); --ag-inherited-browser-color-scheme: var(--ag-browser-color-scheme); --ag-inherited-button-active-background-color: var(--ag-button-active-background-color); --ag-inherited-button-active-border: var(--ag-button-active-border); --ag-inherited-button-active-text-color: var(--ag-button-active-text-color); --ag-inherited-button-background-color: var(--ag-button-background-color); --ag-inherited-button-border: var(--ag-button-border); --ag-inherited-button-border-radius: var(--ag-button-border-radius); --ag-inherited-button-disabled-background-color: var(--ag-button-disabled-background-color); --ag-inherited-button-disabled-border: var(--ag-button-disabled-border); --ag-inherited-button-disabled-text-color: var(--ag-button-disabled-text-color); --ag-inherited-button-font-weight: var(--ag-button-font-weight); --ag-inherited-button-horizontal-padding: var(--ag-button-horizontal-padding); --ag-inherited-button-hover-background-color: var(--ag-button-hover-background-color); --ag-inherited-button-hover-border: var(--ag-button-hover-border); --ag-inherited-button-hover-text-color: var(--ag-button-hover-text-color); --ag-inherited-button-text-color: var(--ag-button-text-color); --ag-inherited-button-vertical-padding: var(--ag-button-vertical-padding); --ag-inherited-card-shadow: var(--ag-card-shadow); --ag-inherited-cell-editing-border: var(--ag-cell-editing-border); --ag-inherited-cell-editing-shadow: var(--ag-cell-editing-shadow); --ag-inherited-cell-font-family: var(--ag-cell-font-family); --ag-inherited-cell-horizontal-padding: var(--ag-cell-horizontal-padding); --ag-inherited-cell-horizontal-padding-scale: var(--ag-cell-horizontal-padding-scale); --ag-inherited-cell-text-color: var(--ag-cell-text-color); --ag-inherited-cell-widget-spacing: var(--ag-cell-widget-spacing); --ag-inherited-chart-menu-label-color: var(--ag-chart-menu-label-color); --ag-inherited-chart-menu-panel-width: var(--ag-chart-menu-panel-width); --ag-inherited-checkbox-border-radius: var(--ag-checkbox-border-radius); --ag-inherited-checkbox-border-width: var(--ag-checkbox-border-width); --ag-inherited-checkbox-checked-background-color: var(--ag-checkbox-checked-background-color); --ag-inherited-checkbox-checked-border-color: var(--ag-checkbox-checked-border-color); --ag-inherited-checkbox-checked-shape-color: var(--ag-checkbox-checked-shape-color); --ag-inherited-checkbox-checked-shape-image: var(--ag-checkbox-checked-shape-image); --ag-inherited-checkbox-indeterminate-background-color: var(--ag-checkbox-indeterminate-background-color); --ag-inherited-checkbox-indeterminate-border-color: var(--ag-checkbox-indeterminate-border-color); --ag-inherited-checkbox-indeterminate-shape-color: var(--ag-checkbox-indeterminate-shape-color); --ag-inherited-checkbox-indeterminate-shape-image: var(--ag-checkbox-indeterminate-shape-image); --ag-inherited-checkbox-unchecked-background-color: var(--ag-checkbox-unchecked-background-color); --ag-inherited-checkbox-unchecked-border-color: var(--ag-checkbox-unchecked-border-color); --ag-inherited-chrome-background-color: var(--ag-chrome-background-color); --ag-inherited-column-border: var(--ag-column-border); --ag-inherited-column-drop-cell-background-color: var(--ag-column-drop-cell-background-color); --ag-inherited-column-drop-cell-border: var(--ag-column-drop-cell-border); --ag-inherited-column-drop-cell-drag-handle-color: var(--ag-column-drop-cell-drag-handle-color); --ag-inherited-column-drop-cell-text-color: var(--ag-column-drop-cell-text-color); --ag-inherited-column-hover-color: var(--ag-column-hover-color); --ag-inherited-column-select-indent-size: var(--ag-column-select-indent-size); --ag-inherited-data-font-size: var(--ag-data-font-size); --ag-inherited-dialog-border: var(--ag-dialog-border); --ag-inherited-dialog-shadow: var(--ag-dialog-shadow); --ag-inherited-drag-and-drop-image-background-color: var(--ag-drag-and-drop-image-background-color); --ag-inherited-drag-and-drop-image-border: var(--ag-drag-and-drop-image-border); --ag-inherited-drag-and-drop-image-shadow: var(--ag-drag-and-drop-image-shadow); --ag-inherited-drag-handle-color: var(--ag-drag-handle-color); --ag-inherited-dropdown-shadow: var(--ag-dropdown-shadow); --ag-inherited-filter-tool-panel-group-indent: var(--ag-filter-tool-panel-group-indent); --ag-inherited-find-active-match-background-color: var(--ag-find-active-match-background-color); --ag-inherited-find-active-match-color: var(--ag-find-active-match-color); --ag-inherited-find-match-background-color: var(--ag-find-match-background-color); --ag-inherited-find-match-color: var(--ag-find-match-color); --ag-inherited-focus-shadow: var(--ag-focus-shadow); --ag-inherited-font-family: var(--ag-font-family); --ag-inherited-font-size: var(--ag-font-size); --ag-inherited-footer-row-border: var(--ag-footer-row-border); --ag-inherited-foreground-color: var(--ag-foreground-color); --ag-inherited-header-background-color: var(--ag-header-background-color); --ag-inherited-header-cell-background-transition-duration: var(--ag-header-cell-background-transition-duration); --ag-inherited-header-cell-hover-background-color: var(--ag-header-cell-hover-background-color); --ag-inherited-header-cell-moving-background-color: var(--ag-header-cell-moving-background-color); --ag-inherited-header-column-border: var(--ag-header-column-border); --ag-inherited-header-column-border-height: var(--ag-header-column-border-height); --ag-inherited-header-column-resize-handle-color: var(--ag-header-column-resize-handle-color); --ag-inherited-header-column-resize-handle-height: var(--ag-header-column-resize-handle-height); --ag-inherited-header-column-resize-handle-width: var(--ag-header-column-resize-handle-width); --ag-inherited-header-font-family: var(--ag-header-font-family); --ag-inherited-header-font-size: var(--ag-header-font-size); --ag-inherited-header-font-weight: var(--ag-header-font-weight); --ag-inherited-header-height: var(--ag-header-height); --ag-inherited-header-row-border: var(--ag-header-row-border); --ag-inherited-header-text-color: var(--ag-header-text-color); --ag-inherited-header-vertical-padding-scale: var(--ag-header-vertical-padding-scale); --ag-inherited-icon-button-active-background-color: var(--ag-icon-button-active-background-color); --ag-inherited-icon-button-active-color: var(--ag-icon-button-active-color); --ag-inherited-icon-button-active-indicator-color: var(--ag-icon-button-active-indicator-color); --ag-inherited-icon-button-background-color: var(--ag-icon-button-background-color); --ag-inherited-icon-button-background-spread: var(--ag-icon-button-background-spread); --ag-inherited-icon-button-border-radius: var(--ag-icon-button-border-radius); --ag-inherited-icon-button-color: var(--ag-icon-button-color); --ag-inherited-icon-button-hover-background-color: var(--ag-icon-button-hover-background-color); --ag-inherited-icon-button-hover-color: var(--ag-icon-button-hover-color); --ag-inherited-icon-color: var(--ag-icon-color); --ag-inherited-icon-size: var(--ag-icon-size); --ag-inherited-input-background-color: var(--ag-input-background-color); --ag-inherited-input-border: var(--ag-input-border); --ag-inherited-input-border-radius: var(--ag-input-border-radius); --ag-inherited-input-disabled-background-color: var(--ag-input-disabled-background-color); --ag-inherited-input-disabled-border: var(--ag-input-disabled-border); --ag-inherited-input-disabled-text-color: var(--ag-input-disabled-text-color); --ag-inherited-input-focus-background-color: var(--ag-input-focus-background-color); --ag-inherited-input-focus-border: var(--ag-input-focus-border); --ag-inherited-input-focus-shadow: var(--ag-input-focus-shadow); --ag-inherited-input-focus-text-color: var(--ag-input-focus-text-color); --ag-inherited-input-height: var(--ag-input-height); --ag-inherited-input-icon-color: var(--ag-input-icon-color); --ag-inherited-input-invalid-background-color: var(--ag-input-invalid-background-color); --ag-inherited-input-invalid-border: var(--ag-input-invalid-border); --ag-inherited-input-invalid-text-color: var(--ag-input-invalid-text-color); --ag-inherited-input-padding-start: var(--ag-input-padding-start); --ag-inherited-input-placeholder-text-color: var(--ag-input-placeholder-text-color); --ag-inherited-input-text-color: var(--ag-input-text-color); --ag-inherited-invalid-color: var(--ag-invalid-color); --ag-inherited-list-item-height: var(--ag-list-item-height); --ag-inherited-menu-background-color: var(--ag-menu-background-color); --ag-inherited-menu-border: var(--ag-menu-border); --ag-inherited-menu-separator-color: var(--ag-menu-separator-color); --ag-inherited-menu-shadow: var(--ag-menu-shadow); --ag-inherited-menu-text-color: var(--ag-menu-text-color); --ag-inherited-modal-overlay-background-color: var(--ag-modal-overlay-background-color); --ag-inherited-odd-row-background-color: var(--ag-odd-row-background-color); --ag-inherited-panel-background-color: var(--ag-panel-background-color); --ag-inherited-panel-title-bar-background-color: var(--ag-panel-title-bar-background-color); --ag-inherited-panel-title-bar-border: var(--ag-panel-title-bar-border); --ag-inherited-panel-title-bar-font-weight: var(--ag-panel-title-bar-font-weight); --ag-inherited-panel-title-bar-icon-color: var(--ag-panel-title-bar-icon-color); --ag-inherited-panel-title-bar-text-color: var(--ag-panel-title-bar-text-color); --ag-inherited-picker-button-background-color: var(--ag-picker-button-background-color); --ag-inherited-picker-button-border: var(--ag-picker-button-border); --ag-inherited-picker-button-focus-background-color: var(--ag-picker-button-focus-background-color); --ag-inherited-picker-button-focus-border: var(--ag-picker-button-focus-border); --ag-inherited-picker-list-background-color: var(--ag-picker-list-background-color); --ag-inherited-picker-list-border: var(--ag-picker-list-border); --ag-inherited-pinned-column-border: var(--ag-pinned-column-border); --ag-inherited-pinned-row-background-color: var(--ag-pinned-row-background-color); --ag-inherited-pinned-row-border: var(--ag-pinned-row-border); --ag-inherited-pinned-row-font-weight: var(--ag-pinned-row-font-weight); --ag-inherited-pinned-row-text-color: var(--ag-pinned-row-text-color); --ag-inherited-pinned-source-row-background-color: var(--ag-pinned-source-row-background-color); --ag-inherited-pinned-source-row-font-weight: var(--ag-pinned-source-row-font-weight); --ag-inherited-pinned-source-row-text-color: var(--ag-pinned-source-row-text-color); --ag-inherited-popup-shadow: var(--ag-popup-shadow); --ag-inherited-radio-checked-shape-image: var(--ag-radio-checked-shape-image); --ag-inherited-range-header-highlight-color: var(--ag-range-header-highlight-color); --ag-inherited-range-selection-background-color: var(--ag-range-selection-background-color); --ag-inherited-range-selection-border-color: var(--ag-range-selection-border-color); --ag-inherited-range-selection-border-style: var(--ag-range-selection-border-style); --ag-inherited-range-selection-chart-background-color: var(--ag-range-selection-chart-background-color); --ag-inherited-range-selection-chart-category-background-color: var(--ag-range-selection-chart-category-background-color); --ag-inherited-range-selection-highlight-color: var(--ag-range-selection-highlight-color); --ag-inherited-row-border: var(--ag-row-border); --ag-inherited-row-group-indent-size: var(--ag-row-group-indent-size); --ag-inherited-row-height: var(--ag-row-height); --ag-inherited-row-hover-color: var(--ag-row-hover-color); --ag-inherited-row-loading-skeleton-effect-color: var(--ag-row-loading-skeleton-effect-color); --ag-inherited-row-numbers-selected-color: var(--ag-row-numbers-selected-color); --ag-inherited-row-vertical-padding-scale: var(--ag-row-vertical-padding-scale); --ag-inherited-select-cell-background-color: var(--ag-select-cell-background-color); --ag-inherited-select-cell-border: var(--ag-select-cell-border); --ag-inherited-selected-row-background-color: var(--ag-selected-row-background-color); --ag-inherited-set-filter-indent-size: var(--ag-set-filter-indent-size); --ag-inherited-side-bar-background-color: var(--ag-side-bar-background-color); --ag-inherited-side-bar-panel-width: var(--ag-side-bar-panel-width); --ag-inherited-side-button-background-color: var(--ag-side-button-background-color); --ag-inherited-side-button-bar-background-color: var(--ag-side-button-bar-background-color); --ag-inherited-side-button-bar-top-padding: var(--ag-side-button-bar-top-padding); --ag-inherited-side-button-border: var(--ag-side-button-border); --ag-inherited-side-button-hover-background-color: var(--ag-side-button-hover-background-color); --ag-inherited-side-button-hover-text-color: var(--ag-side-button-hover-text-color); --ag-inherited-side-button-left-padding: var(--ag-side-button-left-padding); --ag-inherited-side-button-right-padding: var(--ag-side-button-right-padding); --ag-inherited-side-button-selected-background-color: var(--ag-side-button-selected-background-color); --ag-inherited-side-button-selected-border: var(--ag-side-button-selected-border); --ag-inherited-side-button-selected-text-color: var(--ag-side-button-selected-text-color); --ag-inherited-side-button-selected-underline-color: var(--ag-side-button-selected-underline-color); --ag-inherited-side-button-selected-underline-transition-duration: var(--ag-side-button-selected-underline-transition-duration); --ag-inherited-side-button-selected-underline-width: var(--ag-side-button-selected-underline-width); --ag-inherited-side-button-text-color: var(--ag-side-button-text-color); --ag-inherited-side-button-vertical-padding: var(--ag-side-button-vertical-padding); --ag-inherited-side-panel-border: var(--ag-side-panel-border); --ag-inherited-spacing: var(--ag-spacing); --ag-inherited-status-bar-label-color: var(--ag-status-bar-label-color); --ag-inherited-status-bar-label-font-weight: var(--ag-status-bar-label-font-weight); --ag-inherited-status-bar-value-color: var(--ag-status-bar-value-color); --ag-inherited-status-bar-value-font-weight: var(--ag-status-bar-value-font-weight); --ag-inherited-subtle-text-color: var(--ag-subtle-text-color); --ag-inherited-tab-background-color: var(--ag-tab-background-color); --ag-inherited-tab-bar-background-color: var(--ag-tab-bar-background-color); --ag-inherited-tab-bar-border: var(--ag-tab-bar-border); --ag-inherited-tab-bar-horizontal-padding: var(--ag-tab-bar-horizontal-padding); --ag-inherited-tab-bar-top-padding: var(--ag-tab-bar-top-padding); --ag-inherited-tab-bottom-padding: var(--ag-tab-bottom-padding); --ag-inherited-tab-horizontal-padding: var(--ag-tab-horizontal-padding); --ag-inherited-tab-hover-background-color: var(--ag-tab-hover-background-color); --ag-inherited-tab-hover-text-color: var(--ag-tab-hover-text-color); --ag-inherited-tab-selected-background-color: var(--ag-tab-selected-background-color); --ag-inherited-tab-selected-border-color: var(--ag-tab-selected-border-color); --ag-inherited-tab-selected-border-width: var(--ag-tab-selected-border-width); --ag-inherited-tab-selected-text-color: var(--ag-tab-selected-text-color); --ag-inherited-tab-selected-underline-color: var(--ag-tab-selected-underline-color); --ag-inherited-tab-selected-underline-transition-duration: var(--ag-tab-selected-underline-transition-duration); --ag-inherited-tab-selected-underline-width: var(--ag-tab-selected-underline-width); --ag-inherited-tab-spacing: var(--ag-tab-spacing); --ag-inherited-tab-text-color: var(--ag-tab-text-color); --ag-inherited-tab-top-padding: var(--ag-tab-top-padding); --ag-inherited-text-color: var(--ag-text-color); --ag-inherited-toggle-button-height: var(--ag-toggle-button-height); --ag-inherited-toggle-button-off-background-color: var(--ag-toggle-button-off-background-color); --ag-inherited-toggle-button-on-background-color: var(--ag-toggle-button-on-background-color); --ag-inherited-toggle-button-switch-background-color: var(--ag-toggle-button-switch-background-color); --ag-inherited-toggle-button-switch-inset: var(--ag-toggle-button-switch-inset); --ag-inherited-toggle-button-width: var(--ag-toggle-button-width); --ag-inherited-tool-panel-separator-border: var(--ag-tool-panel-separator-border); --ag-inherited-tooltip-background-color: var(--ag-tooltip-background-color); --ag-inherited-tooltip-border: var(--ag-tooltip-border); --ag-inherited-tooltip-text-color: var(--ag-tooltip-text-color); --ag-inherited-value-change-delta-down-color: var(--ag-value-change-delta-down-color); --ag-inherited-value-change-delta-up-color: var(--ag-value-change-delta-up-color); --ag-inherited-value-change-value-highlight-background-color: var(--ag-value-change-value-highlight-background-color); --ag-inherited-widget-container-horizontal-padding: var(--ag-widget-container-horizontal-padding); --ag-inherited-widget-container-vertical-padding: var(--ag-widget-container-vertical-padding); --ag-inherited-widget-horizontal-spacing: var(--ag-widget-horizontal-spacing); --ag-inherited-widget-vertical-spacing: var(--ag-widget-vertical-spacing); --ag-inherited-wrapper-border: var(--ag-wrapper-border); --ag-inherited-wrapper-border-radius: var(--ag-wrapper-border-radius); :where(\[data-ag-theme-mode="light"\]) & { --ag-inherited-browser-color-scheme: var(--ag-browser-color-scheme); --ag-inherited-chrome-background-color: var(--ag-chrome-background-color); } :where(\[data-ag-theme-mode="dark"\]) & { --ag-inherited-advanced-filter-builder-column-pill-color: var(--ag-advanced-filter-builder-column-pill-color); --ag-inherited-advanced-filter-builder-join-pill-color: var(--ag-advanced-filter-builder-join-pill-color); --ag-inherited-advanced-filter-builder-option-pill-color: var(--ag-advanced-filter-builder-option-pill-color); --ag-inherited-advanced-filter-builder-value-pill-color: var(--ag-advanced-filter-builder-value-pill-color); --ag-inherited-browser-color-scheme: var(--ag-browser-color-scheme); --ag-inherited-chrome-background-color: var(--ag-chrome-background-color); --ag-inherited-find-active-match-color: var(--ag-find-active-match-color); --ag-inherited-find-match-color: var(--ag-find-match-color); --ag-inherited-menu-background-color: var(--ag-menu-background-color); } :where(\[data-ag-theme-mode="dark-blue"\]) & { --ag-inherited-advanced-filter-builder-column-pill-color: var(--ag-advanced-filter-builder-column-pill-color); --ag-inherited-advanced-filter-builder-join-pill-color: var(--ag-advanced-filter-builder-join-pill-color); --ag-inherited-advanced-filter-builder-option-pill-color: var(--ag-advanced-filter-builder-option-pill-color); --ag-inherited-advanced-filter-builder-value-pill-color: var(--ag-advanced-filter-builder-value-pill-color); --ag-inherited-browser-color-scheme: var(--ag-browser-color-scheme); --ag-inherited-chrome-background-color: var(--ag-chrome-background-color); --ag-inherited-find-active-match-color: var(--ag-find-active-match-color); --ag-inherited-find-match-color: var(--ag-find-match-color); --ag-inherited-menu-background-color: var(--ag-menu-background-color); } }
-
-Drag here to set row groups
-
-Drag here to set column labels
-
-Employee
-
-Sales performance
-
-Contact details
-
-Address
-
-First Name
-
-Rating
-
-Sales
-
-Profit
-
-Email
-
-Phone No
-
-Country
-
-Shellie
-
-11,734
-
-£415.46
-
-aliquet@purus.com
-
-0828 746 6831
-
-French Polynesia
-
-Jade
-
-20,314
-
-\-£980.94
-
-mi.pede.nonummy@senectus.org
-
-0800 360062
-
-Tonga
-
-Wyoming
-
-36,617
-
-£386.23
-
-Nulla.tempor.augue@aliquamiaculis.org
-
-0800 377 7753
-
-Rwanda
-
-Christine
-
-79,543
-
-\-£739.55
-
-neque.sed.dictum@ultricesVivamus.ca
-
-07578 190673
-
-Bahamas
-
-Jameson
-
-67,934
-
-\-£890.94
-
-sem.semper@liberoProin.com
-
-07489 442639
-
-Nauru
-
-Driscoll
-
-2,259
-
-\-£790.28
-
-libero.dui@estacfacilisis.edu
-
-0843 298 8205
-
-Tajikistan
-
-Morgan
-
-80,896
-
-\-£576.41
-
-mauris.eu@ipsum.ca
-
-070 6292 4498
-
-Colombia
-
-Kylee
-
-54,389
-
-£142.62
-
-libero.Proin@malesuadafamesac.com
-
-(017177) 84788
-
-Papua New Guinea
-
-Cathleen
-
-63,976
-
-\-£621.27
-
-risus.Donec@augue.edu
-
-(0115) 224 4142
-
-Guinea-Bissau
-
-Sierra
-
-73,601
-
-£389.20
-
-dictum.eleifend.nunc@tellus.net
-
-(01266) 957950
-
-Isle of Man
-
-Levi
-
-39,718
-
-\-£781.06
-
-Nulla.tempor.augue@nibhdolor.ca
-
-0855 608 0347
-
-Tuvalu
-
-Kyle
-
-34,320
-
-£102.92
-
-lacinia@senectus.org
-
-0845 46 40
-
-Qatar
-
-Emery
-
-61,910
-
-£29.51
-
-Nulla.facilisis@nonummyultriciesornare.co.uk
-
-(01553) 502913
-
-Belize
-
-Nadine
-
-86,838
-
-£169.68
-
-Duis@Sed.ca
-
-055 2785 0228
-
-Uruguay
-
-Dalton
-
-90,767
-
-\-£531.59
-
-nibh.dolor.nonummy@laoreetlibero.org
-
-0395 486 9374
-
-Cayman Islands
-
-Zeph
-
-91,164
-
-\-£726.59
-
-non.dui@felisorci.com
-
-0845 46 41
-
-Niger
-
-Shannon
-
-33,870
-
-£191.23
-
-leo@lobortis.co.uk
-
-0800 135593
-
-Somalia
-
-Erich
-
-75,518
-
-£367.72
-
-cursus.non.egestas@aliquet.org
-
-0845 46 44
-
-Sao Tome and Principe
-
-Rhiannon
-
-11,119
-
-£155.60
-
-arcu.Morbi.sit@cursus.edu
-
-0361 311 4051
-
-Croatia
-
-Elijah
-
-90,007
-
-£4.40
-
-ipsum.Donec.sollicitudin@leo.co.uk
-
-0800 365 8250
-
-San Marino
-
-Grady
-
-98,900
-
-\-£991.66
-
-mollis.nec.cursus@malesuadamalesuadaInteger.edu
-
-070 2824 3427
-
-Cuba
-
-Quentin
-
-43,461
-
-\-£567.98
-
-erat.vel@auctor.net
-
-(029) 5052 0365
-
-Mayotte
-
-Samuel
-
-64,692
-
-\-£543.81
-
-tellus@magnaSed.edu
-
-07064 102166
-
-Lebanon
-
-Merritt
-
-78,983
-
-£64.07
-
-interdum.Nunc.sollicitudin@elitpellentesque.edu
-
-0800 825458
-
-French Southern Territories
-
-Harlan
-
-7,259
-
-£98.81
-
-nascetur.ridiculus@feugiatmetussit.net
-
-(012812) 59410
-
-Saint Pierre and Miquelon
-
-Stuart
-
-80,609
-
-\-£999.28
-
-sed.pede.nec@maurisMorbinon.com
-
-0807 013 3815
-
-Jersey
-
-Clarke
-
-50,475
-
-\-£966.15
-
-in@estacfacilisis.org
-
-(028) 5013 9648
-
-Seychelles
-
-Roanna
-
-15,498
-
-£284.91
-
-dui@nascetur.net
-
-(024) 3023 2962
-
-Lesotho
-
-Delilah
-
-163
-
-£495.89
-
-laoreet.lectus.quis@utaliquam.edu
-
-07160 224163
-
-Indonesia
-
-Georgia
-
-59,862
-
-\-£935.02
-
-dui@enimnisl.net
-
-(0113) 542 3955
-
-Niue
-
-Aiko
-
-63,682
-
-\-£921.56
-
-cubilia.Curae.Phasellus@augueid.com
-
-055 9506 2116
-
-Belize
-
-Winter
-
-65,173
-
-£51.68
-
-aliquet@Duisac.ca
-
-0800 693847
-
-Equatorial Guinea
-
-Jolene
-
-10,150
-
-£130.03
-
-odio.Aliquam.vulputate@ac.ca
-
-(023) 4876 2215
-
-Morocco
-
-Kaden
-
-51,234
-
-\-£991.27
-
-rutrum@eleifendnec.ca
-
-07305 685548
-
-Peru
-
-Kaseem
-
-59,781
-
-\-£500.61
-
-mauris.erat.eget@nequeMorbi.com
-
-07275 403152
-
-Sudan
-
-Vladimir
-
-55,588
-
-£451.33
-
-id@nonarcuVivamus.edu
-
-0500 950469
-
-Mexico
-
-Jocelyn
-
-61,246
-
-£323.18
-
-dolor@nec.ca
-
-07302 403156
-
-Canada
-
-Howard
-
-79,196
-
-£287.43
-
-Donec.felis@insodales.com
-
-07624 830239
-
-Seychelles
-
-Adam
-
-25,919
-
-£26.12
-
-amet.dapibus@faucibus.edu
-
-0845 46 49
-
-Jordan
-
-Aiko
-
-57,754
-
-\-£793.26
-
-sodales@mauris.edu
-
-0800 1111
-
-Faroe Islands
-
-Columns
-
-Filters
-
-Pivot Mode
-
-Employee
-
-First Name
-
-Last Name
-
-Personal ID
-
-Date
-
-Sales performance
-
-Rating
-
-Sales
-
-Profit
-
-Contact details
-
-Email
-
-Phone No
-
-Address
-
-Street
-
-City
-
-Postcode
-
-Country
-
-Row Groups
-
-Drag here to set row groups
-
-Values
-
-Drag here to aggregate
-
-Column Labels
-
-Drag here to set column labels
-
-Employee
-
-Enabled
-
-First Name
-
-Last Name
-
-Personal ID
-
-Date
-
-Sales performance
-
-Enabled
-
-Sales
-
-Profit
-
-Contact details
-
-Enabled
-
-Email
-
-Phone No
-
-Address
-
-Enabled
-
-Street
-
-City
-
-Postcode
-
-Country
-
-to of
-
-Page of
-
-Show code
-
-[](#common-issues)Common issues
--------------------------------
-
-### [](#wrong-row-heights)Wrong row heights
-
-If you are seeing grid rows not automatically adjusting to their content, you may have to set `autoHeight=true` on the column definition that will define the height (usually the one with the most content, or the first column).
-
-\[data-radix-scroll-area-viewport\] {
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-  -webkit-overflow-scrolling: touch;
-}
-\[data-radix-scroll-area-viewport\]::-webkit-scrollbar {
-  display: none;
-}
-:where(\[data-radix-scroll-area-viewport\]) {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-}
-:where(\[data-radix-scroll-area-content\]) {
-  flex-grow: 1;
-}
-
-<AgGridReact columnDefs\={\[{ field: 'name', autoHeight: true }\]} />
-
-Copy
-
-Performance concerns
---------------------
-
-As `autoHeight` adds additional render calculations to the AG grid, you may notice reduced performance, particularly in larger tables. If this happens, you should set the `getRowHeight` property on AG Grid to a fixed row height.
-
-On this page
-
-*   [Overview](#overview)
-*   [Props](#props)
-*   [Usage](#usage)
-    *   [Installation](#installation)
-    *   [Version](#version)
-*   [Examples](#examples)
-    *   [Simple](#simple)
-    *   [Complex](#complex)
-    *   [Compact](#compact)
-*   [Common issues](#common-issues)
-    *   [Wrong row heights](#wrong-row-heights)