@unshape/grid 1.0.577

package/dist/unshape.css

@@ -0,0 +1,1520 @@
+.ush-root {
+  width: 100%;
+  height: 100%;
+  font-family: system-ui, sans-serif;
+  font-size: 12px;
+  position: relative;
+}
+
+.ush-root,
+.ush-root * {
+  box-sizing: border-box;
+}
+
+.ush-root:focus-visible {
+  outline: none;
+}
+
+.ush-header-viewport {
+  overflow: hidden;
+  flex: 0 0 auto;
+  background: #f0f0f0;
+  display: flex;
+}
+
+.ush-header {
+  height: 40px;
+  background: #f0f0f0;
+  display: flex;
+  align-items: center;
+}
+
+.ush-header-cell {
+  display: flex;
+  position: relative;
+  flex: 0 0 auto;
+  min-width: 0;
+  padding: 0 8px;
+  height: 40px;
+  background: #e8e8e8;
+  border-right: 1px solid #ccc;
+  overflow: hidden;
+  align-items: center;
+}
+
+.ush-header-cell-content {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.ush-header-cell.last-cell {
+  border-right: none;
+}
+
+.ush-header-resize-handle {
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 5px;
+  height: 100%;
+  cursor: col-resize;
+  z-index: 10;
+}
+
+.ush-header-cell.sortable {
+  cursor: pointer;
+}
+
+.ush-header.ush-pinned-left {
+  position: sticky;
+  left: 0;
+  z-index: 3;
+  box-shadow: 1px 0 1px rgba(0, 0, 0, 0.15);
+}
+
+.ush-header.ush-pinned-right {
+  position: sticky;
+  right: 0;
+  z-index: 3;
+  box-shadow: -2px 0 1px rgba(0, 0, 0, 0.15);
+}
+
+.ush-header-cell .ush-col-menu-icon {
+  cursor: pointer;
+}
+
+.ush-header-cell .ush-col-menu-icon.ush-disabled {
+  pointer-events: none;
+}
+
+.ush-header-cell .ush-col-menu-icon.ush-disabled svg {
+  stroke: gray;
+}
+
+.ush-col-menu-icon.ush-active-filter {
+  color: dodgerblue;
+}
+
+.ush-col-menu {
+  background-color: white;
+  border: 1px solid gainsboro;
+  padding: 4px;
+  overflow-y: auto;
+  max-height: 450px;
+  width: 200px;
+  box-shadow:
+    rgba(0, 0, 0, 0.16) 0px 3px 6px,
+    rgba(0, 0, 0, 0.23) 0px 3px 6px;
+  margin: 0;
+  z-index: 1001;
+}
+
+.ush-col-menu ul {
+  list-style-type: none;
+  font-weight: normal;
+  padding: 0;
+  margin: 0;
+  font-size: 12px;
+}
+
+.ush-col-menu li {
+  padding: 2px;
+  cursor: pointer;
+  display: flex;
+  gap: 5px;
+  align-items: center;
+}
+
+.ush-col-menu li.ush-disabled,
+.ush-col-menu .left-pin.ush-disabled {
+  color: #aaa;
+  cursor: not-allowed;
+  pointer-events: none;
+  opacity: 0.6;
+}
+
+.ush-col-menu li:hover:not(.pin) {
+  background-color: gainsboro;
+}
+
+.ush-col-menu .ush-separator {
+  margin: 5px 0px;
+  border-bottom: 1px solid gainsboro;
+}
+
+.ush-col-menu .chevron-down {
+  margin-left: auto;
+}
+
+.ush-col-menu .chevron-down.open {
+  transform: rotate(180deg);
+}
+
+.ush-col-menu .columns {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-height: 0;
+  overflow: hidden;
+  opacity: 0;
+  transition:
+    max-height 0.5s ease,
+    opacity 0.5s ease;
+}
+
+.ush-col-menu .columns input {
+  margin-top: 5px;
+}
+
+.ush-col-menu .columns.open {
+  max-height: 500px; /* must be larger than content height */
+  opacity: 1;
+}
+
+.ush-col-menu .ush-checkbox-items {
+  overflow-y: auto;
+  max-height: 150px;
+  display: flex;
+  flex-direction: column;
+}
+
+.ush-col-menu .checkbox-label {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+  font-weight: normal;
+}
+
+.ush-col-menu .selected-columns {
+  font-weight: bold;
+  padding-left: 6px;
+}
+
+.ush-col-menu .pin {
+  cursor: default;
+}
+
+.ush-col-menu .left-pin,
+.ush-col-menu .right-pin {
+  width: 50px;
+  text-align: center;
+}
+
+.ush-col-menu .left-pin:hover,
+.ush-col-menu .right-pin:hover {
+  background-color: gainsboro;
+  cursor: pointer;
+}
+
+.ush-col-menu .left-pin.pinned,
+.ush-col-menu .right-pin.pinned {
+  background: #d0d0d0;
+  border: 1px solid #aaa;
+}
+
+.ush-col-menu .no-data {
+  font-weight: normal;
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 150px;
+}
+
+.ush-drop-indicator-left,
+.ush-drop-indicator-right {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 2px;
+  background: #0078d4;
+  opacity: 0;
+  transition: opacity 80ms ease;
+  pointer-events: none;
+  z-index: 10;
+}
+
+.ush-drop-indicator-left {
+  left: 0;
+}
+
+.ush-drop-indicator-right {
+  right: 0;
+}
+
+.ush-body-viewport {
+  flex: 1 1 auto;
+  overflow: hidden;
+  position: relative;
+  border-top: 1px solid #d0d0d0;
+  display: flex;
+}
+
+.ush-body-viewport:focus-visible {
+  outline: none;
+}
+
+.ush-body {
+  background: #ffffff;
+  overflow: hidden;
+  position: relative;
+  height: 100%;
+  flex: 0 0 auto;
+}
+
+.ush-body.ush-pinned-left,
+.ush-new-row.ush-pinned-left {
+  position: sticky;
+  left: 0;
+  z-index: 3;
+  box-shadow: 1px 0 1px rgba(0, 0, 0, 0.15);
+}
+
+.ush-body.ush-pinned-right {
+  position: sticky;
+  right: 0;
+  z-index: 3;
+  box-shadow:
+    -2px 0 1px rgba(0, 0, 0, 0.15),
+    inset -1px 0 #d0d0d0;
+}
+
+.ush-footer-viewport {
+  overflow: hidden;
+  flex: 0 0 auto;
+  background: #f7f7f7;
+  border-top: 1px solid #d0d0d0;
+  display: flex;
+}
+
+.ush-footer {
+  height: 24px;
+  background: #f7f7f7;
+  display: flex;
+  align-items: center;
+  font-size: 11px;
+  color: #666;
+}
+
+.ush-footer-cell {
+  flex: 0 0 auto;
+  min-width: 0;
+  padding: 0 8px;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  border-right: 1px solid #d0d0d0;
+}
+
+.ush-footer-cell-content {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.ush-footer-cell.last-cell {
+  border-right: none;
+}
+
+.ush-footer.ush-pinned-left {
+  position: sticky;
+  left: 0;
+  z-index: 3;
+  box-shadow: 1px 0 1px rgba(0, 0, 0, 0.15);
+}
+
+.ush-footer.ush-pinned-right {
+  position: sticky;
+  right: 0;
+  z-index: 3;
+  box-shadow: -2px 0 1px rgba(0, 0, 0, 0.15);
+}
+
+.ush-viewport {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.ush-overlay-active .ush-body.ush-pinned-left,
+.ush-overlay-active .ush-header.ush-pinned-left,
+.ush-overlay-active .ush-filter-row.ush-pinned-left,
+.ush-overlay-active .ush-footer.ush-pinned-left,
+.ush-overlay-active .ush-body.ush-pinned-right,
+.ush-overlay-active .ush-header.ush-pinned-right,
+.ush-overlay-active .ush-filter-row.ush-pinned-right,
+.ush-overlay-active .ush-footer.ush-pinned-right {
+  position: relative;
+  box-shadow: none;
+}
+
+.ush-h-scroll {
+  flex: 0 0 auto;
+  height: 16px; /* typical scrollbar height */
+}
+
+.ush-h-scroll-inner {
+  height: 16px; /* typical scrollbar height */
+  width: 100%;
+  overflow-x: auto;
+}
+
+.ush-v-scroll {
+  width: 16px; /* typical scrollbar width */
+  display: flex;
+  flex-direction: column;
+}
+
+.ush-v-scroll-inner {
+  width: 16px; /* typical scrollbar width */
+  height: 100%;
+  flex: 1 1 auto;
+  overflow-y: auto;
+}
+
+.ush-v-scroll-spacer-top {
+  width: 16px; /* typical scrollbar width */
+  height: 40px; /* header height */
+  box-sizing: content-box !important;
+  background: #e8e8e8; /* same as header cell */
+  border-bottom: 1px solid #d0d0d0;
+  flex: 0 0 auto;
+  position: relative;
+}
+
+.ush-v-scroll-spacer-top-line::before {
+  content: "";
+  width: 16px; /* typical scrollbar width */
+  height: 1px;
+  border-top: 1px solid #d0d0d0;
+  position: absolute;
+  top: 40px; /* header height */
+  left: 0;
+}
+
+.ush-v-scroll-spacer-top-line-new-row::after {
+  content: "";
+  width: 16px; /* typical scrollbar width */
+  height: 1px;
+  border-top: 1px solid #d0d0d0;
+  position: absolute;
+  top: 70px; /* header height + filter row height */
+  left: 0;
+}
+
+.ush-v-scroll-spacer-bottom {
+  width: 16px; /* typical scrollbar width */
+  height: 25px; /* footer height */
+  background: #f7f7f7; /* same as footer */
+  border-top: 1px solid #d0d0d0;
+  flex: 0 0 auto;
+}
+
+.ush-v-scroll-bottom-corner {
+  width: 16px; /* typical scrollbar width */
+  height: 16px; /* typical scrollbar height */
+  flex: 0 0 auto;
+}
+
+.ush-v-scroll-track {
+  height: 0; /* will be set from JS */
+}
+
+.ush-h-scroll-left,
+.ush-h-scroll-right {
+  flex: 0 0 auto;
+}
+
+.ush-grid {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.ush-resizing * {
+  cursor: col-resize !important;
+  user-select: none;
+}
+
+.ush-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.3);
+  z-index: 1000;
+  pointer-events: auto;
+}
+
+.ush-grid-container {
+  display: flex;
+  flex: 1;
+  overflow-y: hidden;
+}
+
+.ush-cell {
+  flex: 0 0 auto;
+  min-width: 0;
+  line-height: 20px;
+  padding: 0 8px;
+  overflow: hidden;
+  white-space: nowrap;
+  align-items: center;
+  border-right: 1px solid #d0d0d0;
+  border-bottom: 1px solid #d0d0d0;
+}
+
+.ush-cell.last-cell {
+  border-right: none;
+}
+
+.ush-cell.ush-readonly {
+  background-color: rgba(0, 0, 0, 0.03);
+  color: #666;
+  cursor: default;
+}
+
+.ush-cell.ush-readonly:hover {
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
+.ush-align-left {
+  text-align: left;
+}
+
+.ush-align-center {
+  text-align: center;
+}
+
+.ush-align-right {
+  text-align: right;
+}
+
+.ush-row {
+  display: flex;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.ush-row.last-row .ush-cell {
+  border-bottom: none;
+}
+
+.ush-no-data {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  height: 100%;
+  width: 100%;
+
+  color: #666;
+  font-family: sans-serif;
+  text-align: center;
+
+  opacity: 0.8;
+  pointer-events: none; /* ensures no interference with scrolling */
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  z-index: 4;
+}
+
+.ush-no-data__icon {
+  width: 48px;
+  height: 48px;
+  margin-bottom: 12px;
+
+  background: #ddd;
+  border-radius: 50%;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  /* simple placeholder icon */
+  position: relative;
+}
+
+.ush-no-data__icon::before {
+  content: "";
+  width: 24px;
+  height: 24px;
+  border: 3px solid #bbb;
+  border-radius: 50%;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  transform: rotate(45deg);
+  display: block;
+}
+
+.ush-no-data__title {
+  font-size: 16px;
+  font-weight: 600;
+  margin-bottom: 4px;
+}
+
+.ush-no-data__subtitle {
+  font-size: 13px;
+  color: #999;
+}
+
+.ush-loading {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  padding: 2rem;
+  background-color: #fff;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  z-index: 4;
+}
+
+.ush-loader {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  position: relative;
+  animation: rotate 1s linear infinite;
+}
+
+.ush-loader::before,
+.ush-loader::after {
+  content: "";
+  box-sizing: border-box;
+  position: absolute;
+  inset: 0px;
+  border-radius: 50%;
+  border: 5px solid gainsboro;
+  animation: prixClipFix 2s linear infinite;
+}
+
+.ush-loader::after {
+  transform: rotate3d(90, 90, 0, 180deg);
+  border-color: #ff3d00;
+}
+
+@keyframes rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes prixClipFix {
+  0% {
+    clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
+  }
+  50% {
+    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
+  }
+  75%,
+  100% {
+    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
+  }
+}
+
+.ush-error {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  padding: 2rem;
+  background-color: #fff;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.ush-error__title {
+  font-size: 24px;
+  color: #dc3545;
+  margin-bottom: 1rem;
+}
+
+.ush-error__message {
+  font-size: 16px;
+  color: #6c757d;
+  text-align: center;
+}
+
+.ush-error__icon {
+  width: 48px;
+  height: 48px;
+  margin-bottom: 12px;
+
+  background: #f8d7da;
+  border-radius: 50%;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  position: relative;
+}
+
+/* vertical bar of the exclamation mark */
+
+.ush-error__icon::before {
+  content: "";
+  width: 4px;
+  height: 18px;
+  background: #dc3545;
+  border-radius: 2px;
+  position: absolute;
+  top: 10px;
+}
+
+/* dot of the exclamation mark */
+
+.ush-error__icon::after {
+  content: "";
+  width: 4px;
+  height: 4px;
+  background: #dc3545;
+  border-radius: 50%;
+  position: absolute;
+  bottom: 10px;
+}
+
+.ush-filter-row-viewport {
+  overflow: hidden;
+  flex: 0 0 auto;
+  background: #f0f0f0;
+  display: flex;
+}
+
+.ush-filter-row {
+  height: 30px;
+  display: flex;
+  align-items: center;
+  border-top: 1px solid #d0d0d0;
+}
+
+.ush-filter-row.ush-pinned-left {
+  position: sticky;
+  left: 0;
+  z-index: 3;
+  box-shadow: 1px 0 1px rgba(0, 0, 0, 0.15);
+}
+
+.ush-filter-row.ush-pinned-right {
+  position: sticky;
+  right: 0;
+  z-index: 3;
+  box-shadow: -2px 0 1px rgba(0, 0, 0, 0.15);
+}
+
+.ush-filter-cell {
+  display: flex;
+  position: relative;
+  flex: 0 0 auto;
+  min-width: 0;
+  padding: 0 2px;
+  height: 30px;
+  background: #e8e8e8;
+  border-right: 1px solid #ccc;
+  overflow: hidden;
+  align-items: center;
+}
+
+.ush-filter-cell-content {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.ush-filter-editor {
+  width: 0;
+  min-width: 100%;
+  padding: 4px;
+  font-size: inherit;
+  height: 25px;
+}
+
+.ush-filter-cell .ush-filter-icon {
+  cursor: pointer;
+}
+
+.ush-filter-cell .ush-filter-icon.ush-disabled,
+.ush-header-cell .ush-filter-icon.ush-disabled {
+  pointer-events: none;
+}
+
+.ush-filter-cell .ush-filter-icon.ush-disabled svg,
+.ush-header-cell .ush-filter-icon.ush-disabled svg {
+  stroke: gray;
+}
+
+.ush-filter-operators {
+  background-color: white;
+  border: 1px solid gainsboro;
+  list-style-type: none;
+  padding: 4px;
+  overflow-y: auto;
+  max-height: 150px;
+  height: auto;
+  width: 150px;
+  box-shadow:
+    rgba(0, 0, 0, 0.16) 0px 3px 6px,
+    rgba(0, 0, 0, 0.23) 0px 3px 6px;
+  margin: 0;
+  font-size: 12px;
+  position: absolute;
+}
+
+.ush-filter-operators li {
+  cursor: pointer;
+  padding: 2px;
+}
+
+.ush-filter-operators li:hover {
+  background-color: gainsboro;
+}
+
+.ush-filter-operators li.active {
+  background-color: gray;
+  color: white;
+}
+
+.ush-menu-filter {
+  background-color: white;
+  border: 1px solid gainsboro;
+  padding: 4px;
+  overflow-y: auto;
+  height: auto;
+  max-width: 600px;
+  box-shadow:
+    rgba(0, 0, 0, 0.16) 0px 3px 6px,
+    rgba(0, 0, 0, 0.23) 0px 3px 6px;
+  margin: 0;
+}
+
+.ush-menu-filter-row {
+  display: flex;
+  gap: 5px;
+  margin-top: 5px;
+}
+
+.ush-header-cell .ush-filter-icon {
+  cursor: pointer;
+}
+
+.ush-filter-btn-container {
+  display: flex;
+  justify-content: end;
+  gap: 5px;
+  margin-top: 10px;
+  font-size: inherit;
+}
+
+.ush-filter-icon.ush-active-filter,
+.ush-excel-filter .ush-active-filter {
+  color: dodgerblue;
+}
+
+.ush-excel-filter {
+  background-color: white;
+  border: 1px solid gainsboro;
+  padding: 4px;
+  overflow-y: auto;
+  max-height: 400px;
+  width: 200px;
+  box-shadow:
+    rgba(0, 0, 0, 0.16) 0px 3px 6px,
+    rgba(0, 0, 0, 0.23) 0px 3px 6px;
+  margin: 0;
+  z-index: 1001;
+}
+
+.ush-excel-filter ul {
+  list-style-type: none;
+  font-weight: normal;
+  padding: 0;
+  margin: 0;
+  font-size: 12px;
+}
+
+.ush-excel-filter li {
+  padding: 2px;
+  cursor: pointer;
+  display: flex;
+  gap: 5px;
+  align-items: center;
+}
+
+.ush-excel-filter li.ush-disabled {
+  color: #aaa;
+  cursor: not-allowed;
+  pointer-events: none;
+  opacity: 0.6;
+}
+
+.ush-excel-filter li:not(.input):hover {
+  background-color: gainsboro;
+}
+
+.ush-excel-filter .ush-separator {
+  margin: 5px 0px;
+  border-bottom: 1px solid gainsboro;
+}
+
+.ush-excel-filter .chevron-right {
+  margin-left: auto;
+}
+
+.ush-excel-filter input[type="text"] {
+  flex: 1;
+  font-size: 12px;
+}
+
+.ush-excel-filter .ush-checkbox-items {
+  overflow-y: auto;
+  max-height: 220px;
+  display: flex;
+  flex-direction: column;
+}
+
+.ush-excel-filter .checkbox-label {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+  font-weight: normal;
+}
+
+.ush-excel-filter .toggle-btn {
+  background-color: transparent;
+  border: none;
+  font-size: 16px;
+  width: 22px;
+}
+
+.ush-excel-filter .node-header {
+  display: flex;
+  align-items: center;
+}
+
+.ush-excel-filter .level-0 {
+  padding-left: 0px;
+}
+
+.ush-excel-filter .level-1 {
+  padding-left: 20px;
+}
+
+.ush-excel-filter .level-2 {
+  padding-left: 62px;
+}
+
+.date {
+  padding-left: 22px;
+}
+
+.ush-excel-filter .no-data {
+  font-weight: normal;
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 220px;
+}
+
+.ush-checkbox-items .hidden {
+  display: none;
+}
+
+.ush-excel-filter-operators {
+  font-size: 12px;
+  font-weight: normal;
+  background-color: white;
+  border: 1px solid gainsboro;
+  padding: 4px;
+  overflow-y: auto;
+  max-height: 250px;
+  width: 200px;
+  box-shadow:
+    rgba(0, 0, 0, 0.16) 0px 3px 6px,
+    rgba(0, 0, 0, 0.23) 0px 3px 6px;
+  margin: 0;
+}
+
+.ush-excel-filter-operators li {
+  padding: 4px;
+  cursor: pointer;
+  display: flex;
+  gap: 5px;
+}
+
+.ush-excel-filter-operators li:hover {
+  background-color: gainsboro;
+}
+
+.ush-excel-filter-operators .hidden,
+.ush-excel-filter .filters .hidden {
+  visibility: hidden;
+}
+
+.ush-excel-filter-popup {
+  background-color: white;
+  border: 1px solid gainsboro;
+  padding: 4px;
+  overflow-y: auto;
+  height: auto;
+  width: auto;
+  box-shadow:
+    rgba(0, 0, 0, 0.16) 0px 3px 6px,
+    rgba(0, 0, 0, 0.23) 0px 3px 6px;
+  margin: 0;
+  z-index: 1001;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 12px;
+}
+
+.ush-excel-filter-popup .title-bar {
+  display: flex;
+  padding: 4px;
+  font-weight: bold;
+}
+
+.ush-excel-filter-popup .title-bar .icon {
+  margin-left: auto;
+  cursor: pointer;
+}
+
+.ush-excel-filter-popup > * {
+  padding: 4px;
+}
+
+.ush-excel-filter-popup select {
+  border: 1px solid black;
+  width: 180px;
+  font-size: inherit;
+}
+
+.ush-excel-filter-popup input:not([type="radio"]) {
+  width: 180px;
+  font-size: inherit;
+}
+
+.ush-excel-filter-popup .filter-crit,
+.ush-excel-filter-popup .radio-btn {
+  display: flex;
+  gap: 10px;
+  font-size: inherit;
+}
+
+.ush-excel-filter-popup .radio-btn {
+  padding-left: 0;
+  font-size: inherit;
+}
+
+.ush-icon svg {
+  vertical-align: middle;
+}
+
+.ush-grouping-panel {
+  display: flex !important;
+  height: 40px;
+  background-color: #f0f0f0;
+  cursor: default !important;
+  font-size: 12px;
+  padding: 10px;
+  border-bottom: 1px solid #d0d0d0;
+}
+
+.ush-grouping-drag-preview {
+  background: white;
+  border: 1px solid #ccc;
+  padding: 4px 8px;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+  border-radius: 4px;
+  font-size: 12px;
+  display: flex;
+  gap: 2px;
+  align-items: center;
+  justify-content: center;
+}
+
+.ush-grouping-panel .grouped-col-container {
+  display: flex;
+  gap: 5px;
+}
+
+.ush-grouping-panel .grouped-col {
+  padding: 5px;
+  border: 1px solid gray;
+  /* background-color: lightgray; */
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  transition:
+    transform 200ms ease,
+    opacity 150ms ease;
+  will-change: transform;
+  transform: translateZ(0);
+  backface-visibility: hidden;
+}
+
+.ush-grouping-panel .grouped-col:hover {
+  background-color: silver;
+  cursor: pointer;
+}
+
+.ush-grouping-panel .grouped-col:focus {
+  outline: 1px solid black;
+  transition: outline 0.2s ease-in-out;
+}
+
+.ush-grouping-panel .grouped-col.drag-active {
+  pointer-events: none;
+}
+
+.grouped-col.drag-placeholder {
+  opacity: 0.4;
+  border: 1px dashed black;
+}
+
+.ush-group-row {
+  background: #f5f5f5;
+  font-weight: bold;
+}
+
+.ush-group-content {
+  display: flex;
+  align-items: center;
+  height: 100%;
+}
+
+.ush-group-toggle {
+  margin-right: 6px;
+  cursor: pointer;
+  transition: transform 200ms ease;
+}
+
+.ush-group-toggle:hover {
+  background-color: gainsboro;
+}
+
+.ush-group-toggle svg,
+.grouped-col svg {
+  width: 18px;
+  height: 18px;
+}
+
+.ush-group-label {
+  font-size: 12px;
+}
+
+.ush-group-row:not(.collapsed) .ush-group-toggle {
+  transform: rotate(90deg);
+}
+
+.ush-sticky-group-header {
+  position: absolute;
+  top: 0; /* will be set to the height of the header */
+  left: 0;
+  right: 0;
+  z-index: 10;
+  background: #f5f5f5;
+  font-weight: bold;
+  cursor: pointer;
+  border-top: 1px solid #d0d0d0;
+  overflow-x: clip;
+}
+
+.ush-sticky-inner-scroll {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+}
+
+.ush-sticky-inner-scroll .ush-row {
+  position: relative;
+}
+
+.ush-sticky-group-header .ush-pinned-left {
+  position: sticky;
+  left: 0;
+  z-index: 3;
+  box-shadow: 1px 0 1px rgba(0, 0, 0, 0.15);
+  display: flex;
+  flex-direction: column;
+  flex: 0 0 auto;
+}
+
+.ush-sticky-group-header .ush-pinned-right {
+  position: sticky;
+  right: 0;
+  z-index: 3;
+  box-shadow: -2px 0 1px rgba(0, 0, 0, 0.15);
+  display: flex;
+  flex-direction: column;
+  flex: 0 0 auto;
+}
+
+.ush-group-row-standalone {
+  width: calc(100% - 1px);
+}
+
+.ush-group-row-standalone .ush-cell:first-child {
+  overflow: visible;
+}
+
+.ush-group-row-standalone .ush-cell:not(:last-child) {
+  border-right: none;
+}
+
+.ush-group-row-standalone .ush-cell.checkbox-col {
+  border-right: 1px solid #d0d0d0;
+}
+
+.ush-group-footer {
+  background: #fafafa;
+  color: #555;
+  font-size: 0.9em;
+  font-weight: normal;
+}
+
+.ush-pager {
+  background-color: #e8e8e8;
+  padding: 4px;
+  display: flex !important;
+  height: 28px;
+  border-top: 1px solid #d0d0d0;
+}
+
+.ush-pager .container {
+  display: flex;
+  width: 100%;
+}
+
+.ush-pager .pages {
+  display: flex;
+  align-items: center;
+}
+
+.ush-pager .ush-icon {
+  cursor: pointer;
+  display: block;
+}
+
+.ush-pager .ush-icon:hover {
+  background-color: lightgray;
+}
+
+.ush-pager .pages span {
+  cursor: pointer;
+  font-size: 12px;
+  padding-inline: 5px;
+  padding-block: 3px;
+  border-radius: 4px;
+}
+
+.ush-pager .pages span:hover {
+  background-color: lightgray;
+}
+
+.ush-pager span.active {
+  color: dodgerblue;
+  background-color: lightblue;
+}
+
+.ush-pager .ush-icon.ush-disabled {
+  color: #aaa;
+  cursor: not-allowed;
+  pointer-events: none;
+  opacity: 0.6;
+}
+
+.ush-pager .record-numbers {
+  margin-left: auto;
+  font-size: 12px;
+}
+
+.ush-pager .page-sizes {
+  padding-left: 5px;
+  font-size: 12px;
+}
+
+.ush-pager .page-sizes select {
+  font-size: 12px;
+}
+
+.ush-pager .page-sizes span {
+  padding-left: 5px;
+}
+
+.ush-pager .active-frame {
+  position: absolute;
+  border: 1px solid dodgerblue;
+  border-radius: 4px;
+  pointer-events: none;
+}
+
+.ush-row.selected {
+  background-color: #e6f2ff;
+  border-color: #99caff;
+}
+
+.ush-row.selected:hover {
+  background-color: #d9ecff;
+}
+
+.ush-selection-overlay,
+.ush-selection-overlay-left,
+.ush-selection-overlay-right,
+.ush-selection-overlay-new-row,
+.ush-selection-overlay-left-new-row,
+.ush-selection-overlay-right-new-row {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  overflow: hidden;
+  z-index: 2;
+}
+
+.ush-selection-rect,
+.ush-active-cell {
+  position: absolute;
+  pointer-events: none;
+  box-sizing: border-box;
+}
+
+.ush-selection-hidden {
+  border: none !important;
+  background: none !important;
+}
+
+.ush-selection-rect-visible {
+  border: 2px solid #1a73e8;
+  background: rgba(26, 115, 232, 0.12);
+}
+
+.ush-active-cell-visible {
+  border: 2px solid #1a73e8;
+  background: transparent;
+}
+
+.ush-selection-overlay-new-row,
+.ush-selection-overlay-left-new-row,
+.ush-selection-overlay-right-new-row {
+  border-top: 1px solid #d0d0d0;
+}
+
+.ush-selection-rect-ants {
+  position: absolute;
+  box-sizing: border-box;
+  pointer-events: none;
+  background: rgba(26, 115, 232, 0.12);
+}
+
+.ush-selection-rect-ants,
+.ush-active-cell-ants {
+  border: none !important;
+  position: absolute;
+  box-sizing: border-box;
+  pointer-events: none;
+  background: rgba(26, 115, 232, 0.12);
+
+  background-image:
+    repeating-linear-gradient(
+      to right,
+      #1a73e8 0,
+      #1a73e8 4px,
+      transparent 4px,
+      transparent 8px
+    ),
+    repeating-linear-gradient(
+      to bottom,
+      #1a73e8 0,
+      #1a73e8 4px,
+      transparent 4px,
+      transparent 8px
+    ),
+    repeating-linear-gradient(
+      to right,
+      #1a73e8 0,
+      #1a73e8 4px,
+      transparent 4px,
+      transparent 8px
+    ),
+    repeating-linear-gradient(
+      to bottom,
+      #1a73e8 0,
+      #1a73e8 4px,
+      transparent 4px,
+      transparent 8px
+    );
+
+  background-size:
+    100% 2px,
+    2px 100%,
+    100% 2px,
+    2px 100%;
+
+  background-position:
+    0 0,
+    100% 0,
+    0 100%,
+    0 0;
+
+  background-repeat: no-repeat;
+
+  animation: ush-ants 0.3s linear infinite;
+}
+
+@keyframes ush-ants {
+  from {
+    background-position:
+      0 0,
+      100% 0,
+      0 100%,
+      0 0;
+  }
+  to {
+    background-position:
+      8px 0,
+      100% 8px,
+      -8px 100%,
+      0 -8px;
+  }
+}
+
+.ush-cell.ush-checkbox,
+.ush-header-cell-content.ush-checkbox {
+  display: flex;
+  justify-content: center;
+}
+
+.ush-statusbar {
+  display: flex;
+  height: 40px;
+  background-color: #f0f0f0;
+  font-size: 12px;
+  padding: 5px;
+  border-top: 1px solid #d0d0d0;
+}
+
+.ush-status-item {
+  padding: 4px;
+}
+
+.ush-toolbar {
+  display: flex;
+  height: 40px;
+  background-color: #f0f0f0;
+  cursor: default !important;
+  font-size: 12px;
+  padding: 5px 10px 5px 10px;
+  border-bottom: 1px solid #d0d0d0;
+}
+
+.ush-toolbar .container {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  gap: 5px;
+}
+
+.ush-toolbar .container > :not(ush-spacer) {
+  flex: 0 0 auto; /* never grow, never shrink */
+  display: inline-flex;
+  align-items: center;
+  vertical-align: middle;
+}
+
+.ush-spacer {
+  flex: 1 1 auto; /* grow to fill space */
+  min-width: 0; /* allow shrinking if needed */
+}
+
+.ush-spacer-sized {
+  flex: 0 0 auto; /* fixed-size spacer */
+}
+
+.ush-cell-editor {
+  width: 0;
+  min-width: 100%;
+  padding: 0;
+  font-size: inherit;
+  font-family: inherit;
+  line-height: inherit;
+  position: relative;
+}
+
+input[type="text"].ush-cell-editor,
+input[type="date"].ush-cell-editor,
+input[type="checkbox"].ush-cell-editor {
+  border: none;
+  background-color: #e8f0fe;
+}
+
+input[type="text"].ush-cell-editor:focus-visible,
+input[type="date"].ush-cell-editor:focus-visible,
+input[type="checkbox"].ush-cell-editor:focus-visible {
+  outline: none;
+}
+
+.ush-cell:has(.ush-cell-editor) {
+  background-color: #e8f0fe;
+}
+
+.ush-cell:has(.ush-cell-editor-invalid) {
+  background-color: #fdecea;
+}
+
+input.ush-cell-editor.ush-cell-editor-invalid {
+  background-color: #fdecea !important;
+}
+
+.ush-active-cell.ush-cell-editor-invalid {
+  border: 2px solid #d93025;
+}
+
+.ush-new-row {
+  height: 20px;
+  display: flex;
+  align-items: center;
+  position: relative;
+  flex: 0 0 auto;
+}
+
+.ush-new-row-viewport {
+  overflow: hidden;
+  flex: 0 0 auto;
+  background: #f0f0f0;
+  display: flex;
+  position: relative;
+}
+
+.ush-new-row .ush-cell {
+  height: inherit;
+}