@coreui/data-grid 0.2.0-rc.0 → 0.3.0-rc.0

package/dist/css/data-grid.standalone.css

@@ -0,0 +1,1066 @@
+/*!
+ * CoreUI PRO data-grid.standalone.scss v0.1.0
+ * License (https://coreui.io/pro/license/)
+ */
+@layer data-grid-base {
+  :root {
+    color-scheme: light;
+    --cui-white: #fff;
+    --cui-primary: #5856d6;
+    --cui-primary-rgb: 88, 86, 214;
+    --cui-danger: #e55353;
+    --cui-body-font-family: system-ui, -apple-system, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif;
+    --cui-body-font-size: 1rem;
+    --cui-body-line-height: 1.5;
+    --cui-body-color: rgba(37, 42.92, 54.02, 0.95);
+    --cui-body-bg: #fff;
+    --cui-body-bg-rgb: 255, 255, 255;
+    --cui-emphasis-color: #080a0c;
+    --cui-emphasis-color-rgb: 8, 10, 12;
+    --cui-secondary-color: rgba(37, 42.92, 54.02, 0.681);
+    --cui-secondary-bg: #e7eaee;
+    --cui-tertiary-bg: #f3f4f7;
+    --cui-border-width: 1px;
+    --cui-border-color: #dbdfe6;
+    --cui-border-radius: .375rem;
+    --cui-border-radius-sm: .25rem;
+    --cui-box-shadow: 0 .5rem 1rem rgba(8, 10, 12, .15);
+    --cui-focus-ring-color: rgba(88, 86, 214, .25);
+    --cui-link-color: #5856d6;
+    --cui-link-hover-color: #4645ab;
+  }
+  [data-coreui-theme=dark] {
+    color-scheme: dark;
+    --cui-body-color: rgba(255, 255, 255, 0.87);
+    --cui-body-bg: #212631;
+    --cui-body-bg-rgb: 33, 38, 49;
+    --cui-emphasis-color: #fff;
+    --cui-emphasis-color-rgb: 255, 255, 255;
+    --cui-secondary-color: rgba(255, 255, 255, 0.6);
+    --cui-secondary-bg: #323a49;
+    --cui-tertiary-bg: rgb(41.5, 48, 61);
+    --cui-border-color: #4a566d;
+    --cui-primary: rgb(94.2, 92.4, 207.6);
+    --cui-link-color: rgb(151.2, 150, 226.8);
+    --cui-link-hover-color: rgb(171.36, 170.4, 233.04);
+  }
+}
+@layer data-grid-base {
+  .data-grid {
+    box-sizing: border-box;
+    font-family: var(--cui-body-font-family);
+    font-size: var(--cui-body-font-size);
+    font-weight: 400;
+    line-height: var(--cui-body-line-height);
+    color: var(--cui-body-color);
+    text-align: start;
+    background-color: var(--cui-body-bg);
+    -webkit-text-size-adjust: 100%;
+  }
+  .data-grid *,
+  .data-grid *::before,
+  .data-grid *::after {
+    box-sizing: border-box;
+  }
+  .data-grid table {
+    caption-side: bottom;
+    border-collapse: collapse;
+  }
+  .data-grid th {
+    text-align: inherit;
+    text-align: -webkit-match-parent;
+  }
+  .data-grid thead,
+  .data-grid tbody,
+  .data-grid tr,
+  .data-grid td,
+  .data-grid th {
+    border-color: inherit;
+    border-style: solid;
+    border-width: 0;
+  }
+  .data-grid label {
+    display: inline-block;
+  }
+  .data-grid button,
+  .data-grid input,
+  .data-grid optgroup,
+  .data-grid select,
+  .data-grid textarea {
+    margin: 0;
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit;
+  }
+  .data-grid button,
+  .data-grid select {
+    text-transform: none;
+  }
+  .data-grid button,
+  .data-grid [type=button],
+  .data-grid [type=reset],
+  .data-grid [type=submit] {
+    -webkit-appearance: button;
+  }
+  .data-grid button:not(:disabled),
+  .data-grid [type=button]:not(:disabled),
+  .data-grid [type=reset]:not(:disabled),
+  .data-grid [type=submit]:not(:disabled) {
+    cursor: pointer;
+  }
+  .data-grid ::-moz-focus-inner {
+    padding: 0;
+    border-style: none;
+  }
+  .data-grid svg {
+    vertical-align: middle;
+  }
+  .data-grid ul {
+    padding-left: 0;
+    margin-bottom: 0;
+    list-style: none;
+  }
+}
+@layer data-grid-base {
+  .data-grid .table {
+    --cui-table-color-type: initial;
+    --cui-table-bg-type: initial;
+    --cui-table-color-state: initial;
+    --cui-table-bg-state: initial;
+    --cui-table-color: var(--cui-emphasis-color);
+    --cui-table-bg: var(--cui-body-bg);
+    --cui-table-border-color: var(--cui-border-color);
+    --cui-table-accent-bg: transparent;
+    --cui-table-striped-color: var(--cui-emphasis-color);
+    --cui-table-striped-bg: rgba(var(--cui-emphasis-color-rgb), 0.05);
+    --cui-table-active-color: var(--cui-emphasis-color);
+    --cui-table-active-bg: rgba(var(--cui-emphasis-color-rgb), 0.1);
+    --cui-table-hover-color: var(--cui-emphasis-color);
+    --cui-table-hover-bg: rgba(var(--cui-emphasis-color-rgb), 0.075);
+    width: 100%;
+    margin-bottom: 1rem;
+    vertical-align: top;
+    border-color: var(--cui-table-border-color);
+  }
+  .data-grid .table > :not(caption) > * > * {
+    padding: 0.5rem 0.5rem;
+    color: var(--cui-table-color-state, var(--cui-table-color-type, var(--cui-table-color)));
+    background-color: var(--cui-table-bg);
+    border-bottom-width: var(--cui-border-width);
+    box-shadow: inset 0 0 0 9999px var(--cui-table-bg-state, var(--cui-table-bg-type, var(--cui-table-accent-bg)));
+  }
+  .data-grid .table > tbody {
+    vertical-align: inherit;
+  }
+  .data-grid .table > thead {
+    vertical-align: bottom;
+  }
+  .data-grid .table-sm > :not(caption) > * > * {
+    padding: 0.25rem 0.25rem;
+  }
+  .data-grid .table-bordered > :not(caption) > * > * {
+    border-width: var(--cui-border-width) 0;
+  }
+  .data-grid .table-borderless > :not(caption) > * > * {
+    border-bottom-width: 0;
+  }
+  .data-grid .table-striped > tbody > tr:nth-of-type(odd) > * {
+    --cui-table-color-type: var(--cui-table-striped-color);
+    --cui-table-bg-type: var(--cui-table-striped-bg);
+  }
+  .data-grid .table-hover > tbody > tr:hover > * {
+    --cui-table-color-state: var(--cui-table-hover-color);
+    --cui-table-bg-state: var(--cui-table-hover-bg);
+  }
+  .data-grid .table-active {
+    --cui-table-color-state: var(--cui-table-active-color);
+    --cui-table-bg-state: var(--cui-table-active-bg);
+  }
+}
+@layer data-grid-base {
+  .data-grid .btn {
+    --cui-btn-padding-x: 0.75rem;
+    --cui-btn-padding-y: 0.375rem;
+    --cui-btn-font-size: 1rem;
+    --cui-btn-font-weight: 400;
+    --cui-btn-line-height: 1.5;
+    --cui-btn-color: var(--cui-body-color);
+    --cui-btn-bg: transparent;
+    --cui-btn-border-width: var(--cui-border-width);
+    --cui-btn-border-color: transparent;
+    --cui-btn-border-radius: var(--cui-border-radius);
+    --cui-btn-hover-color: var(--cui-btn-color);
+    --cui-btn-hover-bg: transparent;
+    --cui-btn-hover-border-color: transparent;
+    --cui-btn-active-color: var(--cui-btn-hover-color);
+    --cui-btn-active-bg: var(--cui-btn-hover-bg);
+    --cui-btn-active-border-color: var(--cui-btn-hover-border-color);
+    --cui-btn-disabled-color: var(--cui-btn-color);
+    --cui-btn-disabled-opacity: .65;
+    display: inline-block;
+    padding: var(--cui-btn-padding-y) var(--cui-btn-padding-x);
+    font-size: var(--cui-btn-font-size);
+    font-weight: var(--cui-btn-font-weight);
+    line-height: var(--cui-btn-line-height);
+    color: var(--cui-btn-color);
+    text-align: center;
+    text-decoration: none;
+    vertical-align: middle;
+    cursor: pointer;
+    -webkit-user-select: none;
+    user-select: none;
+    background-color: var(--cui-btn-bg);
+    border: var(--cui-btn-border-width) solid var(--cui-btn-border-color);
+    border-radius: var(--cui-btn-border-radius);
+    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  }
+  .data-grid .btn:hover {
+    color: var(--cui-btn-hover-color);
+    background-color: var(--cui-btn-hover-bg);
+    border-color: var(--cui-btn-hover-border-color);
+  }
+  .data-grid .btn:focus-visible {
+    outline: 0;
+    box-shadow: 0 0 0 0.25rem var(--cui-focus-ring-color);
+  }
+  .data-grid .btn:active {
+    color: var(--cui-btn-active-color);
+    background-color: var(--cui-btn-active-bg);
+    border-color: var(--cui-btn-active-border-color);
+  }
+  .data-grid .btn:disabled {
+    color: var(--cui-btn-disabled-color);
+    pointer-events: none;
+    opacity: var(--cui-btn-disabled-opacity);
+  }
+  .data-grid .btn-sm {
+    --cui-btn-padding-y: 0.25rem;
+    --cui-btn-padding-x: 0.5rem;
+    --cui-btn-font-size: 0.875rem;
+    --cui-btn-border-radius: var(--cui-border-radius-sm);
+  }
+  .data-grid .btn-primary {
+    --cui-btn-color: #fff;
+    --cui-btn-bg: var(--cui-primary);
+    --cui-btn-border-color: var(--cui-primary);
+    --cui-btn-hover-color: #fff;
+    --cui-btn-hover-bg: color-mix(in srgb, var(--cui-primary) 85%, #000);
+    --cui-btn-hover-border-color: color-mix(in srgb, var(--cui-primary) 80%, #000);
+  }
+  .data-grid .btn-outline-secondary {
+    --cui-btn-color: var(--cui-secondary-color);
+    --cui-btn-border-color: var(--cui-border-color);
+    --cui-btn-hover-color: var(--cui-body-color);
+    --cui-btn-hover-bg: var(--cui-tertiary-bg);
+    --cui-btn-hover-border-color: var(--cui-border-color);
+  }
+  .data-grid .btn-ghost {
+    --cui-btn-color: var(--cui-body-color);
+    --cui-btn-hover-color: var(--cui-body-color);
+    --cui-btn-hover-bg: var(--cui-tertiary-bg);
+    --cui-btn-active-bg: var(--cui-secondary-bg);
+  }
+  .data-grid .btn-link {
+    --cui-btn-color: var(--cui-link-color);
+    --cui-btn-hover-color: var(--cui-link-hover-color);
+    text-decoration: underline;
+  }
+}
+@layer data-grid-base {
+  .data-grid .form-control,
+  .data-grid .form-select {
+    display: block;
+    width: 100%;
+    padding: 0.375rem 0.75rem;
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.5;
+    color: var(--cui-body-color);
+    appearance: none;
+    background-color: var(--cui-body-bg);
+    background-clip: padding-box;
+    border: var(--cui-border-width) solid var(--cui-border-color);
+    border-radius: var(--cui-border-radius);
+    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  }
+  .data-grid .form-control:focus,
+  .data-grid .form-select:focus {
+    outline: 0;
+    box-shadow: 0 0 0 0.25rem var(--cui-focus-ring-color);
+  }
+  .data-grid .form-control:disabled,
+  .data-grid .form-select:disabled {
+    background-color: var(--cui-secondary-bg);
+    opacity: 1;
+  }
+  .data-grid .form-control::placeholder,
+  .data-grid .form-select::placeholder {
+    color: var(--cui-secondary-color);
+    opacity: 1;
+  }
+  .data-grid .form-select {
+    padding-inline-end: 2.25rem;
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23323a49' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
+    background-repeat: no-repeat;
+    background-position: right 0.75rem center;
+    background-size: 16px 12px;
+  }
+  .data-grid .form-control-sm,
+  .data-grid .form-select-sm {
+    padding: 0.25rem 0.5rem;
+    font-size: 0.875rem;
+    border-radius: var(--cui-border-radius-sm);
+  }
+  .data-grid .form-select-sm {
+    padding-inline-end: 2.25rem;
+  }
+  .data-grid .form-control.is-invalid {
+    border-color: var(--cui-danger);
+  }
+  .data-grid .form-check {
+    display: block;
+    min-height: 1.5rem;
+    padding-inline-start: 1.5em;
+    margin-bottom: 0.125rem;
+  }
+  .data-grid .form-check .form-check-input {
+    float: left;
+    margin-inline-start: -1.5em;
+  }
+  .data-grid .form-check-input {
+    --cui-form-check-bg: var(--cui-body-bg);
+    flex-shrink: 0;
+    width: 1em;
+    height: 1em;
+    margin-top: 0.25em;
+    vertical-align: top;
+    appearance: none;
+    background-color: var(--cui-form-check-bg);
+    background-image: var(--cui-form-check-bg-image);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: contain;
+    border: var(--cui-border-width) solid var(--cui-border-color);
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+  }
+  .data-grid .form-check-input[type=checkbox] {
+    border-radius: 0.25em;
+  }
+  .data-grid .form-check-input[type=radio] {
+    border-radius: 50%;
+  }
+  .data-grid .form-check-input:focus {
+    outline: 0;
+    box-shadow: 0 0 0 0.25rem var(--cui-focus-ring-color);
+  }
+  .data-grid .form-check-input:checked {
+    background-color: var(--cui-primary);
+    border-color: var(--cui-primary);
+  }
+  .data-grid .form-check-input:checked[type=checkbox] {
+    --cui-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='rgba%28255, 255, 255, 0.87%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
+  }
+  .data-grid .form-check-input:checked[type=radio] {
+    --cui-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='rgba%28255, 255, 255, 0.87%29'/%3e%3c/svg%3e");
+  }
+  .data-grid .form-check-input[type=checkbox]:indeterminate {
+    --cui-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='rgba%28255, 255, 255, 0.87%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
+    background-color: var(--cui-primary);
+    border-color: var(--cui-primary);
+  }
+  .data-grid .form-check-input:disabled {
+    pointer-events: none;
+    filter: none;
+    opacity: 0.5;
+  }
+  .data-grid .form-check-label {
+    cursor: pointer;
+  }
+  .data-grid .form-check-input:disabled ~ .form-check-label {
+    cursor: default;
+    opacity: 0.5;
+  }
+  [data-coreui-theme=dark] .data-grid .form-select {
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
+  }
+}
+@layer data-grid-base {
+  .data-grid .pagination {
+    --cui-pagination-padding-x: 0.75rem;
+    --cui-pagination-padding-y: 0.375rem;
+    --cui-pagination-font-size: 1rem;
+    --cui-pagination-color: var(--cui-link-color);
+    --cui-pagination-bg: var(--cui-body-bg);
+    --cui-pagination-border-width: var(--cui-border-width);
+    --cui-pagination-border-color: var(--cui-border-color);
+    --cui-pagination-border-radius: var(--cui-border-radius);
+    --cui-pagination-hover-color: var(--cui-link-hover-color);
+    --cui-pagination-hover-bg: var(--cui-tertiary-bg);
+    --cui-pagination-hover-border-color: var(--cui-border-color);
+    --cui-pagination-active-color: #fff;
+    --cui-pagination-active-bg: var(--cui-primary);
+    --cui-pagination-active-border-color: var(--cui-primary);
+    --cui-pagination-disabled-color: var(--cui-secondary-color);
+    --cui-pagination-disabled-bg: var(--cui-secondary-bg);
+    --cui-pagination-disabled-border-color: var(--cui-border-color);
+    display: flex;
+    padding-left: 0;
+    margin-bottom: 1rem;
+    list-style: none;
+  }
+  .data-grid .page-link {
+    position: relative;
+    display: block;
+    padding: var(--cui-pagination-padding-y) var(--cui-pagination-padding-x);
+    font-size: var(--cui-pagination-font-size);
+    color: var(--cui-pagination-color);
+    text-decoration: none;
+    cursor: pointer;
+    background-color: var(--cui-pagination-bg);
+    border: var(--cui-pagination-border-width) solid var(--cui-pagination-border-color);
+    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  }
+  .data-grid .page-link:hover {
+    z-index: 2;
+    color: var(--cui-pagination-hover-color);
+    background-color: var(--cui-pagination-hover-bg);
+    border-color: var(--cui-pagination-hover-border-color);
+  }
+  .data-grid .page-link:focus-visible {
+    z-index: 3;
+    outline: 0;
+    box-shadow: 0 0 0 0.25rem var(--cui-focus-ring-color);
+  }
+  .data-grid .page-item:not(:first-child) .page-link {
+    margin-left: calc(-1 * var(--cui-border-width));
+  }
+  .data-grid .page-item:first-child .page-link {
+    border-top-left-radius: var(--cui-pagination-border-radius);
+    border-bottom-left-radius: var(--cui-pagination-border-radius);
+  }
+  .data-grid .page-item:last-child .page-link {
+    border-top-right-radius: var(--cui-pagination-border-radius);
+    border-bottom-right-radius: var(--cui-pagination-border-radius);
+  }
+  .data-grid .page-item.active .page-link {
+    z-index: 3;
+    color: var(--cui-pagination-active-color);
+    background-color: var(--cui-pagination-active-bg);
+    border-color: var(--cui-pagination-active-border-color);
+  }
+  .data-grid .page-item.disabled .page-link {
+    color: var(--cui-pagination-disabled-color);
+    pointer-events: none;
+    background-color: var(--cui-pagination-disabled-bg);
+    border-color: var(--cui-pagination-disabled-border-color);
+  }
+  .data-grid .pagination-sm {
+    --cui-pagination-padding-x: 0.5rem;
+    --cui-pagination-padding-y: 0.25rem;
+    --cui-pagination-font-size: 0.875rem;
+    --cui-pagination-border-radius: var(--cui-border-radius-sm);
+  }
+}
+@layer data-grid-base {
+  .data-grid .spinner-border {
+    --cui-spinner-width: 2rem;
+    --cui-spinner-height: 2rem;
+    --cui-spinner-vertical-align: -.125em;
+    --cui-spinner-border-width: 0.25em;
+    --cui-spinner-animation-speed: 0.75s;
+    --cui-spinner-animation-name: data-grid-spinner-border;
+    display: inline-block;
+    flex-shrink: 0;
+    width: var(--cui-spinner-width);
+    height: var(--cui-spinner-height);
+    vertical-align: var(--cui-spinner-vertical-align);
+    border: var(--cui-spinner-border-width) solid currentcolor;
+    border-right-color: transparent;
+    border-radius: 50%;
+    animation: var(--cui-spinner-animation-speed) linear infinite var(--cui-spinner-animation-name);
+  }
+  .data-grid .spinner-border-sm {
+    --cui-spinner-width: 1rem;
+    --cui-spinner-height: 1rem;
+    --cui-spinner-border-width: .2em;
+  }
+}
+@keyframes data-grid-spinner-border {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@layer data-grid-base {
+  .data-grid .visually-hidden:not(caption) {
+    position: absolute !important;
+  }
+  .data-grid .visually-hidden {
+    width: 1px !important;
+    height: 1px !important;
+    padding: 0 !important;
+    margin: -1px !important;
+    overflow: hidden !important;
+    clip: rect(0, 0, 0, 0) !important;
+    white-space: nowrap !important;
+    border: 0 !important;
+  }
+}
+.data-grid {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  --cui-data-grid-viewport-max-height: 30rem;
+  --cui-data-grid-header-bg: var(--cui-body-bg, #fff);
+  --cui-data-grid-header-shadow: inset 0 calc(-1 * var(--cui-border-width, 1px)) 0 var(--cui-border-color, #dee2e6);
+  --cui-data-grid-cell-selected-bg: rgba(var(--cui-primary-rgb, 50, 31, 219), 0.12);
+  --cui-data-grid-cell-selected-border-color: var(--cui-primary, #321fdb);
+  --cui-data-grid-cell-selected-border-width: 1px;
+  --cui-data-grid-row-handle-width: 2rem;
+  --cui-data-grid-select-cell-width: 2.5rem;
+  --cui-data-grid-sorter-margin: 0.25rem;
+  --cui-data-grid-sorter-opacity: 0.3;
+  --cui-data-grid-spacing: 0.5rem;
+  --cui-data-grid-resizer-width: 0.625rem;
+  --cui-data-grid-resizer-grip-height: 60%;
+  --cui-data-grid-resizer-grip-color: var(--cui-border-color, #dee2e6);
+  --cui-data-grid-resizer-grip-color-hover: var(--cui-secondary-color, #6c757d);
+  --cui-data-grid-pinned-border-width: var(--cui-border-width);
+  --cui-data-grid-pinned-border-color: var(--cui-border-color, #dee2e6);
+  --cui-data-grid-drop-indicator: var(--cui-primary, #321fdb);
+  --cui-data-grid-drag-transition: 0.15s ease;
+  --cui-data-grid-menu-bg: var(--cui-body-bg, #fff);
+  --cui-data-grid-menu-border-color: var(--cui-border-color, #dee2e6);
+  --cui-data-grid-menu-shadow: var(--cui-box-shadow, 0 0.5rem 1rem rgba(0, 0, 0, 0.15));
+  --cui-data-grid-menu-min-width: 10rem;
+  --cui-data-grid-menu-item-hover-bg: var(--cui-tertiary-bg, #f8f9fa);
+  --cui-data-grid-loading-bg: rgba(var(--cui-body-bg-rgb, 255, 255, 255), 0.6);
+  --cui-data-grid-pinned-bg: var(--cui-body-bg, #fff);
+  --cui-data-grid-focus-ring-width: 2px;
+  --cui-data-grid-focus-ring-color: var(--cui-primary, #321fdb);
+}
+.data-grid .data-grid-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--cui-data-grid-spacing);
+  align-items: center;
+  min-height: 48px;
+  padding: var(--cui-data-grid-spacing);
+  border-bottom: var(--cui-border-width, 1px) solid var(--cui-border-color, #dee2e6);
+}
+.data-grid .data-grid-toolbar-actions {
+  display: flex;
+  gap: 0.25rem;
+  align-items: center;
+}
+.data-grid .data-grid-toolbar-search {
+  margin-inline-start: auto;
+}
+.data-grid .data-grid-viewport {
+  position: relative;
+  flex: 1 1 auto;
+  min-height: 0;
+  max-height: var(--cui-data-grid-viewport-max-height);
+  overflow-y: auto;
+  overflow-anchor: none;
+}
+.data-grid .data-grid-cell-editor {
+  width: 100%;
+  min-width: 4rem;
+}
+.data-grid .data-grid-editor-popup {
+  position: absolute;
+  z-index: 4;
+  padding: 0.25rem;
+  background-color: var(--cui-data-grid-menu-bg);
+  border: var(--cui-border-width, 1px) solid var(--cui-data-grid-menu-border-color);
+  border-radius: var(--cui-border-radius, 0.375rem);
+  box-shadow: var(--cui-data-grid-menu-shadow);
+}
+.data-grid [role=grid] :is(td, th):focus-visible {
+  outline: var(--cui-data-grid-focus-ring-width) solid var(--cui-data-grid-focus-ring-color);
+  outline-offset: calc(-1 * var(--cui-data-grid-focus-ring-width));
+}
+.data-grid .data-grid-viewport:focus-visible {
+  outline: 0;
+}
+.data-grid .data-grid-header {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  background-color: var(--cui-data-grid-header-bg);
+  box-shadow: var(--cui-data-grid-header-shadow);
+}
+.data-grid .data-grid-header tr:not(.data-grid-filter-row) > th {
+  height: 48px;
+  vertical-align: middle;
+}
+.data-grid .data-grid-filter-row > th {
+  padding-top: 0;
+  font-weight: normal;
+}
+.data-grid .data-grid-header th[data-coreui-draggable] {
+  cursor: grab;
+}
+.data-grid .data-grid-header-cell {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+.data-grid .data-grid-header-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.data-grid .btn-ghost {
+  --cui-btn-padding-x: var(--cui-btn-padding-y);
+  --cui-btn-line-height: 1;
+}
+.data-grid .data-grid-menu-button {
+  margin-inline-start: auto;
+}
+.data-grid .data-grid-menu {
+  position: absolute;
+  z-index: 4;
+  min-width: var(--cui-data-grid-menu-min-width);
+  padding: 0.25rem 0;
+  background-color: var(--cui-data-grid-menu-bg);
+  border: var(--cui-border-width, 1px) solid var(--cui-data-grid-menu-border-color);
+  border-radius: var(--cui-border-radius, 0.375rem);
+  box-shadow: var(--cui-data-grid-menu-shadow);
+}
+.data-grid .data-grid-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+  padding: 0.25rem 0.75rem;
+  font: inherit;
+  color: inherit;
+  text-align: start;
+  cursor: pointer;
+  background: none;
+  border: 0;
+}
+.data-grid .data-grid-menu-item:hover, .data-grid .data-grid-menu-item:focus-visible {
+  background-color: var(--cui-data-grid-menu-item-hover-bg);
+}
+.data-grid .data-grid-menu-item[aria-disabled=true] {
+  color: var(--cui-secondary-color, #6c757d);
+  cursor: default;
+  background: none;
+}
+.data-grid .data-grid-filter-menu {
+  position: absolute;
+  z-index: 4;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  min-width: var(--cui-data-grid-menu-min-width);
+  max-width: 18rem;
+  padding: 0.75rem;
+  background-color: var(--cui-data-grid-menu-bg);
+  border: var(--cui-border-width, 1px) solid var(--cui-data-grid-menu-border-color);
+  border-radius: var(--cui-border-radius, 0.375rem);
+  box-shadow: var(--cui-data-grid-menu-shadow);
+}
+.data-grid .data-grid-filter-menu > div {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.data-grid .data-grid-filter-menu-condition {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+.data-grid .data-grid-filter-menu-join {
+  display: flex;
+  gap: 1rem;
+}
+.data-grid .data-grid-filter-menu-join label {
+  display: flex;
+  gap: 0.375rem;
+  align-items: center;
+}
+.data-grid .data-grid-filter-menu-values {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  max-height: 14rem;
+  overflow-y: auto;
+}
+.data-grid .data-grid-filter-menu-footer {
+  display: flex;
+  gap: 0.5rem;
+  justify-content: flex-end;
+}
+.data-grid .data-grid-column-chooser {
+  position: absolute;
+  z-index: 4;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  min-width: var(--cui-data-grid-menu-min-width);
+  max-width: 18rem;
+  max-height: 20rem;
+  padding: 0.75rem;
+  overflow-y: auto;
+  background-color: var(--cui-data-grid-menu-bg);
+  border: var(--cui-border-width, 1px) solid var(--cui-data-grid-menu-border-color);
+  border-radius: var(--cui-border-radius, 0.375rem);
+  box-shadow: var(--cui-data-grid-menu-shadow);
+}
+.data-grid .data-grid-column-chooser-option {
+  display: flex;
+  gap: 0.375rem;
+  align-items: center;
+  margin-bottom: 0;
+}
+.data-grid .data-grid-column-chooser-footer {
+  display: flex;
+  gap: 0.5rem;
+  justify-content: flex-end;
+  padding-top: 0.25rem;
+  margin-top: 0.25rem;
+  border-top: var(--cui-border-width, 1px) solid var(--cui-data-grid-menu-border-color);
+}
+.data-grid .data-grid-filter-button {
+  position: relative;
+  margin-inline-start: auto;
+}
+.data-grid .data-grid-filter-button ~ .data-grid-menu-button {
+  margin-inline-start: 0;
+}
+.data-grid .data-grid-filter-button-filtered::after {
+  position: absolute;
+  inset-block-start: 0.125rem;
+  inset-inline-end: 0.125rem;
+  width: 0.375rem;
+  height: 0.375rem;
+  content: "";
+  background-color: var(--cui-primary, #321fdb);
+  border-radius: 50%;
+}
+.data-grid .data-grid-menu-item-icon {
+  display: inline-flex;
+  opacity: 0.75;
+}
+.data-grid .data-grid-menu-item-icon svg {
+  width: 1em;
+  height: 1em;
+}
+.data-grid .data-grid-menu-divider {
+  height: var(--cui-border-width, 1px);
+  margin: 0.25rem 0;
+  background-color: var(--cui-data-grid-menu-border-color);
+}
+.data-grid .data-grid-dragging {
+  opacity: 0.5;
+}
+.data-grid.data-grid-drag-active {
+  cursor: grabbing;
+  -webkit-user-select: none;
+  user-select: none;
+}
+.data-grid .data-grid-drag-ghost {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1080;
+  display: flex;
+  align-items: center;
+  max-width: 16rem;
+  padding: 0 var(--cui-data-grid-cell-padding-x, 0.5rem);
+  overflow: hidden;
+  font-weight: 600;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  pointer-events: none;
+  background-color: var(--cui-data-grid-pinned-bg);
+  border: var(--cui-border-width, 1px) solid var(--cui-data-grid-drop-indicator);
+  border-radius: var(--cui-border-radius, 0.375rem);
+  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+  transform: translate(-9999px, -9999px);
+  opacity: 0.9;
+}
+.data-grid .data-grid-drag-ghost-settle {
+  transition: transform var(--cui-data-grid-drag-transition), opacity var(--cui-data-grid-drag-transition);
+}
+.data-grid .data-grid-drop-indicator {
+  position: fixed;
+  z-index: 1080;
+  pointer-events: none;
+  background-color: var(--cui-data-grid-drop-indicator);
+  transition: top var(--cui-data-grid-drag-transition), left var(--cui-data-grid-drag-transition);
+}
+.data-grid .data-grid-drag-preview {
+  transition: transform var(--cui-data-grid-drag-transition);
+}
+@media (prefers-reduced-motion: reduce) {
+  .data-grid :is(.data-grid-drop-indicator, .data-grid-drag-preview, .data-grid-drag-ghost-settle) {
+    transition: none;
+  }
+}
+.data-grid .data-grid-drop-indicator-x {
+  width: 0.125rem;
+}
+.data-grid .data-grid-drop-indicator-y {
+  height: 0.125rem;
+}
+.data-grid .data-grid-cell-selected {
+  position: relative;
+  background-color: var(--cui-data-grid-cell-selected-bg);
+}
+.data-grid .data-grid-cell-selected::after {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  content: "";
+  border: 0 solid var(--cui-data-grid-cell-selected-border-color);
+}
+.data-grid .data-grid-cell-selected-top::after {
+  border-top-width: var(--cui-data-grid-cell-selected-border-width);
+}
+.data-grid .data-grid-cell-selected-right::after {
+  border-right-width: var(--cui-data-grid-cell-selected-border-width);
+}
+.data-grid .data-grid-cell-selected-bottom::after {
+  border-bottom-width: var(--cui-data-grid-cell-selected-border-width);
+}
+.data-grid .data-grid-cell-selected-left::after {
+  border-left-width: var(--cui-data-grid-cell-selected-border-width);
+}
+.data-grid .data-grid-row-handle-cell {
+  width: var(--cui-data-grid-row-handle-width);
+  padding-inline: 0;
+  text-align: center;
+}
+.data-grid .data-grid-row-handle {
+  display: inline-flex;
+  color: var(--cui-secondary-color, #6c757d);
+  cursor: grab;
+  touch-action: none;
+}
+.data-grid .data-grid-select-cell {
+  width: var(--cui-data-grid-select-cell-width);
+  text-align: center;
+}
+.data-grid .data-grid-sort-button {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--cui-data-grid-sorter-margin);
+  padding: 0;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+  -webkit-user-select: none;
+  user-select: none;
+  background: none;
+  border: 0;
+}
+.data-grid .data-grid-sort-icon {
+  display: inline-flex;
+  font-size: 0.875em;
+  opacity: 0;
+}
+.data-grid .data-grid-sort-icon svg {
+  width: 1em;
+  height: 1em;
+}
+.data-grid .data-grid-sortable[aria-sort] .data-grid-sort-icon {
+  opacity: 1;
+}
+.data-grid[data-coreui-sorter-visibility=always] .data-grid-sortable:not([aria-sort]) .data-grid-sort-icon {
+  opacity: var(--cui-data-grid-sorter-opacity);
+}
+.data-grid[data-coreui-sorter-visibility=hover] .data-grid-sortable:not([aria-sort]):hover .data-grid-sort-icon, .data-grid[data-coreui-sorter-visibility=hover] .data-grid-sortable:not([aria-sort]):focus-within .data-grid-sort-icon {
+  opacity: var(--cui-data-grid-sorter-opacity);
+}
+.data-grid .data-grid-viewport > .table {
+  margin-bottom: 0;
+  table-layout: fixed;
+}
+.data-grid:not(.data-grid-auto-row-height) .data-grid-viewport > .table > tbody > tr:not(.data-grid-empty) > td:not(.data-grid-select-cell):not(.data-grid-cell-pinned-start):not(.data-grid-cell-pinned-end) {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.data-grid.data-grid-resizable .data-grid-viewport, .data-grid.data-grid-pinned .data-grid-viewport {
+  overflow-x: auto;
+}
+.data-grid.data-grid-resizable .table, .data-grid.data-grid-pinned .table {
+  width: max-content;
+  min-width: 100%;
+}
+.data-grid.data-grid-resizable .data-grid-header th:not(.data-grid-cell-pinned-start):not(.data-grid-cell-pinned-end) {
+  position: relative;
+}
+.data-grid.data-grid-pinned .table {
+  border-collapse: separate;
+  border-spacing: 0;
+}
+.data-grid .data-grid-cell-pinned-start,
+.data-grid .data-grid-cell-pinned-end {
+  position: sticky;
+  z-index: 1;
+  background-color: var(--cui-data-grid-pinned-bg);
+}
+.data-grid .data-grid-header .data-grid-cell-pinned-start,
+.data-grid .data-grid-header .data-grid-cell-pinned-end {
+  z-index: 3;
+}
+.data-grid .data-grid-cell-pinned-start-last,
+.data-grid .data-grid-cell-pinned-end-first {
+  position: sticky;
+}
+.data-grid .data-grid-cell-pinned-start-last::after,
+.data-grid .data-grid-cell-pinned-end-first::after {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: var(--cui-data-grid-pinned-border-width);
+  pointer-events: none;
+  content: "";
+}
+.data-grid .data-grid-cell-pinned-start-last::after {
+  inset-inline-end: 0;
+  background: var(--cui-data-grid-pinned-border-color);
+}
+.data-grid .data-grid-cell-pinned-end-first::after {
+  inset-inline-start: 0;
+  background: var(--cui-data-grid-pinned-border-color);
+}
+.data-grid .data-grid-resizer {
+  position: absolute;
+  top: 0;
+  inset-inline-end: calc(-0.5 * var(--cui-data-grid-resizer-width));
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--cui-data-grid-resizer-width);
+  height: 100%;
+  cursor: col-resize;
+  touch-action: none;
+  -webkit-user-select: none;
+  user-select: none;
+}
+.data-grid .data-grid-resizer::after {
+  width: 2px;
+  height: var(--cui-data-grid-resizer-grip-height);
+  content: "";
+  background-color: var(--cui-data-grid-resizer-grip-color);
+  transition: background-color 0.15s ease;
+}
+.data-grid .data-grid-resizer:hover::after, .data-grid .data-grid-resizer.data-grid-resizer-active::after {
+  background-color: var(--cui-data-grid-resizer-grip-color-hover);
+}
+.data-grid .data-grid-spacer > td {
+  padding: 0;
+  border: 0;
+}
+.data-grid .data-grid-viewport > .table-striped > tbody > tr:nth-of-type(odd) > * {
+  --cui-table-color-type: initial;
+  --cui-table-bg-type: initial;
+}
+.data-grid .data-grid-viewport > .table-striped > tbody > tr.data-grid-row-odd > * {
+  --cui-table-color-type: var(--cui-table-striped-color);
+  --cui-table-bg-type: var(--cui-table-striped-bg);
+}
+.data-grid .data-grid-viewport > .table > tbody > tr:last-child > * {
+  border-bottom-width: 0;
+}
+.data-grid .data-grid-loading {
+  position: absolute;
+  inset: 0;
+  z-index: 3;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--cui-data-grid-loading-bg);
+}
+.data-grid .data-grid-loading-more {
+  position: sticky;
+  inset-inline: 0;
+  bottom: 0;
+  z-index: 3;
+  display: flex;
+  justify-content: center;
+  padding: var(--cui-data-grid-spacing);
+  background-color: var(--cui-data-grid-loading-bg);
+}
+.data-grid .data-grid-tooltip {
+  position: fixed;
+  z-index: 1080;
+  max-width: 12rem;
+  padding: 0.25rem 0.5rem;
+  font-size: 0.875rem;
+  line-height: 1.4;
+  color: var(--cui-body-bg, #fff);
+  text-align: center;
+  pointer-events: none;
+  background-color: var(--cui-emphasis-color, #000);
+  border-radius: var(--cui-border-radius, 0.375rem);
+}
+.data-grid .data-grid-empty > td {
+  padding: 2rem 1rem;
+  color: var(--cui-secondary-color, #6c757d);
+  text-align: center;
+}
+.data-grid .data-grid-pagination {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--cui-data-grid-spacing);
+  align-items: center;
+  min-height: 48px;
+  padding: var(--cui-data-grid-spacing);
+  border-top: var(--cui-border-width, 1px) solid var(--cui-border-color, #dee2e6);
+}
+.data-grid .data-grid-pagination.data-grid-pagination-top {
+  border-top: 0;
+  border-bottom: var(--cui-border-width, 1px) solid var(--cui-border-color, #dee2e6);
+}
+.data-grid .data-grid-pagination .pagination {
+  margin-bottom: 0;
+}
+.data-grid .data-grid-pagination .data-grid-pagination-info {
+  margin-inline-start: auto;
+  color: var(--cui-secondary-color, #6c757d);
+}
+.data-grid .data-grid-pagination .form-select {
+  width: auto;
+}
+
+@media print {
+  .data-grid-print-root {
+    position: absolute;
+    inset: 0 0 auto;
+    z-index: 2000;
+    background-color: #fff;
+  }
+  .data-grid-print-root h1 {
+    margin-bottom: 1rem;
+    font-size: 1.25rem;
+  }
+  .data-grid-print-root table {
+    width: 100%;
+    border-collapse: collapse;
+  }
+  .data-grid-print-root :is(th, td) {
+    padding: 0.25rem 0.5rem;
+    text-align: start;
+    border: 1px solid #000;
+  }
+  .data-grid-print-root thead {
+    display: table-header-group;
+  }
+  .data-grid-print-root tr {
+    break-inside: avoid;
+  }
+  body:has(.data-grid-print-root) > :not(.data-grid-print-root) {
+    display: none !important;
+  }
+}
+
+/*# sourceMappingURL=data-grid.standalone.css.map */