survey-analytics 2.5.14 → 3.0.0-beta.0

package/survey.analytics.tabulator.css

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - SurveyJS Dashboard library v2.5.14
+ * surveyjs - SurveyJS Dashboard library v3.0.0-beta.0
  * Copyright (c) 2015-2026 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: SEE LICENSE IN LICENSE
  */
@@ -57,9 +57,407 @@
   }
 }
 
+.sa-dropdown,
+.sa-action-dropdown {
+  position: relative;
+  cursor: pointer;
+  user-select: none;
+  color: var(--sjs2-color-fg-basic-primary, #1C1B20);
+  font-family: var(--sjs2-typography-font-family-text);
+  font-weight: var(--sjs2-typography-font-weight-strong);
+  font-size: var(--sjs2-typography-font-size-default);
+  line-height: var(--sjs2-typography-line-height-default);
+}
+
+.sa-dropdown {
+  display: flex;
+  flex-grow: 1;
+  flex-direction: row;
+}
+
+.sa-action-dropdown:hover,
+.sa-action-dropdown.sa-action-dropdown--opened {
+  border-radius: var(--sjs2-radius-control-action, 8px);
+  background: var(--sjs2-color-bg-positive-tertiary-dim, rgba(25, 179, 148, 0.1));
+}
+
+.sa-dropdown-header {
+  display: flex;
+  padding: var(--sjs2-layout-control-formbox-medium-vertical, 4px) var(--sjs2-layout-control-formbox-medium-horizontal, 4px);
+  flex-grow: 1;
+  align-items: flex-start;
+  gap: var(--sjs2-layout-control-formbox-medium-gap, 4px);
+  align-self: stretch;
+  border-radius: var(--sjs2-radius-semantic-form, 8px);
+  margin: var(--sjs2-border-width-x100, 1px);
+  outline: var(--sjs2-border-width-x100, 1px) solid var(--sjs2-color-control-formbox-default-border, #D4D4D4);
+  background: var(--sjs2-color-control-formbox-default-bg, rgba(28, 27, 32, 0.05));
+}
+.sa-dropdown-header:focus {
+  border-radius: var(--sjs2-radius-semantic-form, 8px);
+  background: var(--sjs2-color-control-formbox-focused-bg, #F5F5F5);
+  box-shadow: var(--sjs2-border-offset-x-form-focused, 0) var(--sjs2-border-offset-y-form-focused, 0) var(--sjs2-border-blur-form-focused, 0) var(--sjs2-border-spread-form-focused, 2px) var(--sjs2-color-control-formbox-focused-border, #19B394) inset;
+  outline: none;
+}
+
+.sa-dropdown-action {
+  display: flex;
+  padding: var(--sjs2-layout-control-action-small-box-vertical, 8px) var(--sjs2-layout-control-action-small-box-horizontal, 8px);
+  justify-content: center;
+  align-items: center;
+  align-self: stretch;
+  border-radius: var(--sjs2-radius-semantic-form-item, 4px);
+  background: var(--sjs2-color-bg-neutral-tertiary, rgba(28, 27, 32, 0));
+}
+
+.sa-dropdown-action:hover {
+  background: var(--sjs2-color-bg-neutral-tertiary-dim, rgba(28, 27, 32, 0.05));
+}
+
+.sa-dropdown--opened .sa-dropdown-arrow {
+  background: var(--sjs2-color-bg-neutral-tertiary-dim, rgba(28, 27, 32, 0.05));
+}
+
+.sa-dropdown-action svg {
+  display: flex;
+  width: var(--sjs2-size-icon-medium, 24px);
+  height: var(--sjs2-size-icon-medium, 24px);
+  justify-content: center;
+  align-items: center;
+}
+.sa-dropdown-action svg use {
+  fill: var(--sjs2-color-fg-basic-primary-alt, rgb(66, 65, 70));
+}
+
+.sa-dropdown-container {
+  display: inline-flex;
+  flex-grow: 1;
+}
+
+.sa-action-dropdown-container {
+  display: inline-flex;
+}
+
+.sa-dropdown__title {
+  padding: var(--sjs2-spacing-x150, 12px) var(--sjs2-size-x000, 0.001px) var(--sjs2-spacing-x150, 12px) var(--sjs2-size-x150, 12px);
+  display: flex;
+  flex-shrink: 0;
+  margin-inline-end: var(--sjs2-spacing-static-x100, 8px);
+  overflow: hidden;
+  color: var(--sjs2-color-fg-basic-secondary, rgba(28, 27, 32, 0.6));
+  text-overflow: ellipsis;
+  font-family: var(--sjs2-typography-font-family-text);
+  font-weight: var(--sjs2-typography-font-weight-basic);
+  font-size: var(--sjs2-typography-font-size-default);
+  line-height: var(--sjs2-typography-line-height-default);
+}
+
+.sa-dropdown-list,
+.sa-action-dropdown-list {
+  position: absolute;
+  min-width: 150px;
+  max-height: 50vh;
+  max-width: 80vw;
+  overflow-x: hidden;
+  overflow-y: auto;
+  border: var(--sjs2-border-width-x100, 1px) solid var(--sjs2-color-border-basic-secondary, #D4D4D4);
+  border-top: none;
+  border-radius: var(--sjs2-radius-container-drop, 16px);
+  background: var(--sjs2-color-utility-sheet, #FFF);
+  display: none;
+  z-index: 1000;
+  margin: 0;
+  list-style: none;
+  transition: all 0.3s;
+  margin-top: 8px;
+  padding: var(--sjs2-layout-container-drop-vertical, 8px) var(--sjs2-layout-container-drop-horizontal, 8px);
+  box-sizing: border-box;
+  /* sjs2/shadow/large */
+  box-shadow: var(--sjs2-shadow-size-large-offset-x, 0) var(--sjs2-shadow-size-large-offset-y, 6px) var(--sjs2-shadow-size-large-blur, 12px) var(--sjs2-shadow-size-large-spread, 4px) var(--sjs2-shadow-color-large, rgba(0, 76, 68, 0.1));
+  -webkit-font-smoothing: antialiased;
+  -webkit-tap-highlight-color: transparent;
+}
+@-moz-document url-prefix() {
+  .sa-dropdown-list,
+  .sa-action-dropdown-list {
+    scrollbar-width: thin;
+    scrollbar-color: rgba(0, 0, 0, 0.1490196078) transparent;
+  }
+}
+.sa-dropdown-list::-webkit-scrollbar,
+.sa-action-dropdown-list::-webkit-scrollbar {
+  width: 12px;
+  height: 12px;
+  background-color: transparent;
+}
+.sa-dropdown-list::-webkit-scrollbar-thumb,
+.sa-action-dropdown-list::-webkit-scrollbar-thumb {
+  border: 4px solid rgba(0, 0, 0, 0);
+  background-clip: padding-box;
+  border-radius: 1024px;
+  background-color: rgba(0, 0, 0, 0.1490196078);
+}
+.sa-dropdown-list::-webkit-scrollbar-track,
+.sa-action-dropdown-list::-webkit-scrollbar-track {
+  background: transparent;
+}
+.sa-dropdown-list::-webkit-scrollbar-thumb:hover,
+.sa-action-dropdown-list::-webkit-scrollbar-thumb:hover {
+  border: 2px solid rgba(0, 0, 0, 0);
+  background-color: rgba(0, 0, 0, 0.1490196078);
+}
+
+.sa-dropdown-list.sa-dropdown--opened {
+  display: block;
+  top: 100%;
+}
+
+.sa-action-dropdown-list.sa-action-dropdown--opened {
+  display: block;
+  top: 100%;
+  border-radius: var(--sjs2-radius-container-drop, 16px);
+  border: var(--sjs2-border-width-x100, 1px) solid var(--sjs2-color-border-basic-secondary, #D4D4D4);
+  background: var(--sjs2-color-utility-sheet, #FFF);
+  /* sjs2/border-effect/floating/default */
+  box-shadow: var(--sjs2-border-offset-x-floating-default, 0) var(--sjs2-border-offset-y-floating-default, 6px) var(--sjs2-border-blur-floating-default, 12px) var(--sjs2-border-spread-floating-default, 4px) var(--sjs2-color-utility-shadow-floating-default, rgba(0, 76, 68, 0.2));
+}
+
+.sa-action-dropdown-list.sa-action-dropdown--up.sa-action-dropdown--opened {
+  top: auto;
+  bottom: 100%;
+  margin-top: 0;
+  margin-bottom: 8px;
+  border-top: var(--sjs2-border-width-x100, 1px) solid var(--sjs2-color-border-basic-secondary, #d4d4d4);
+  border-bottom: none;
+}
+
+.sa-dropdown-item,
+.sa-action-dropdown-item {
+  width: max-content;
+  min-width: calc(100% - 2 * var(--sjs2-size-x200, 16px));
+  max-width: calc(100% - 2 * var(--sjs2-size-x200, 16px));
+  padding: var(--sjs2-spacing-x150, 12px) var(--sjs2-size-x200, 16px);
+  cursor: pointer;
+  transition: all 0.3s;
+  display: flex;
+  align-items: center;
+  gap: var(--sjs2-spacing-x150, 12px);
+  border-radius: var(--sjs2-radius-control-drop-item, 8px);
+  color: var(--sjs2-color-fg-basic-primary, #1C1B20);
+  background: var(--sjs2-color-bg-brand-tertiary, rgba(25, 179, 148, 0));
+  font-family: var(--sjs2-typography-font-family-text);
+  font-weight: var(--sjs2-typography-font-weight-basic);
+  font-size: var(--sjs2-typography-font-size-default);
+  line-height: var(--sjs2-typography-line-height-default);
+}
+.sa-dropdown-item:hover,
+.sa-action-dropdown-item:hover {
+  background-color: var(--sjs2-color-bg-brand-tertiary-dim, rgba(25, 179, 148, 0.1));
+}
+.sa-dropdown-item:hover .sa-action-dropdown-icon,
+.sa-action-dropdown-item:hover .sa-action-dropdown-icon {
+  border-radius: var(--sjs2-radius-control-checkbox, 4px);
+  background: var(--sjs2-color-control-check-false-hovered-bg, rgba(28, 27, 32, 0.1));
+  box-shadow: var(--sjs2-border-offset-x-form-hovered, 0) var(--sjs2-border-offset-y-form-hovered, 0) var(--sjs2-border-blur-form-hovered, 0) var(--sjs2-border-spread-form-hovered, 1px) var(--sjs2-color-control-check-false-hovered-border, #D4D4D4) inset;
+}
+.sa-dropdown-item:hover.sa-action-dropdown-item--selected .sa-action-dropdown-icon,
+.sa-action-dropdown-item:hover.sa-action-dropdown-item--selected .sa-action-dropdown-icon {
+  border-radius: var(--sjs2-radius-control-checkbox, 4px);
+  background: var(--sjs2-color-control-check-true-hovered-bg, #15987E);
+  box-shadow: var(--sjs2-border-offset-x-form-hovered, 0) var(--sjs2-border-offset-y-form-hovered, 0) var(--sjs2-border-blur-form-hovered, 0) var(--sjs2-border-spread-form-hovered, 1px) var(--sjs2-color-control-check-true-hovered-border, #15987E) inset;
+}
+
+.sa-action-dropdown-item:focus,
+.sa-action-dropdown-item--focused,
+.sa-dropdown-item:focus,
+.sa-dropdown-item--focused {
+  border-radius: var(--sjs2-radius-control-drop-item, 8px);
+  background: var(--sjs2-color-bg-brand-tertiary-dim, rgba(25, 179, 148, 0.1));
+}
+
+.sa-action-dropdown-item--selected .sa-action-dropdown-icon {
+  border-radius: var(--sjs2-radius-control-checkbox, 4px);
+  background: var(--sjs2-color-control-check-true-default-bg, #19B394);
+  box-shadow: var(--sjs2-border-offset-x-form-default, 0) var(--sjs2-border-offset-y-form-default, 0) var(--sjs2-border-blur-form-default, 0) var(--sjs2-border-spread-form-default, 1px) var(--sjs2-color-control-check-true-default-border, #19B394) inset;
+}
+.sa-action-dropdown-item--selected .sa-action-dropdown-icon svg {
+  display: block;
+}
+
+.sa-action-dropdown-icon {
+  width: var(--sjs2-size-icon-medium, 24px);
+  height: var(--sjs2-size-icon-medium, 24px);
+  min-width: var(--sjs2-size-icon-medium, 24px);
+  border-radius: var(--sjs2-radius-control-checkbox, 4px);
+  background: var(--sjs2-color-control-check-false-default-bg, #F5F5F5);
+  box-shadow: var(--sjs2-border-offset-x-form-default, 0) var(--sjs2-border-offset-y-form-default, 0) var(--sjs2-border-blur-form-default, 0) var(--sjs2-border-spread-form-default, 1px) var(--sjs2-color-control-check-false-default-border, #D4D4D4) inset;
+}
+.sa-action-dropdown-icon svg {
+  display: none;
+  width: var(--sjs2-size-icon-medium, 24px);
+  height: var(--sjs2-size-icon-medium, 24px);
+}
+.sa-action-dropdown-icon use {
+  fill: var(--sjs2-color-control-check-true-default-icon, #FFF);
+}
+
+.sa-dropdown-item.sa-dropdown-item--selected {
+  background-color: var(--sjs2-color-bg-brand-primary, #19B394);
+  color: var(--sjs2-color-fg-static-main-primary, #FFF);
+  font-family: var(--sjs2-typography-font-family-text);
+  font-weight: var(--sjs2-typography-font-weight-strong);
+  font-size: var(--sjs2-typography-font-size-default);
+  line-height: var(--sjs2-typography-line-height-default);
+}
+
+.sa-dropdown-placeholder {
+  overflow: hidden;
+  color: var(--sjs2-color-control-input-default-placeholder, rgba(28, 27, 32, 0.6));
+  text-overflow: ellipsis;
+  font-family: var(--sjs2-typography-font-family-text);
+  font-weight: var(--sjs2-typography-font-weight-basic);
+  font-size: var(--sjs2-typography-font-size-default);
+  line-height: var(--sjs2-typography-line-height-default);
+}
+
+.sa-dropdown-icon {
+  width: var(--sa-icon-size);
+  height: var(--sa-icon-size);
+  flex-shrink: 0;
+}
+
+.sa-dropdown-header-icon {
+  width: var(--sa-icon-size);
+  height: var(--sa-icon-size);
+  margin-right: 8px;
+}
+
+.sa-dropdown-header-content {
+  display: flex;
+  padding: var(--sjs2-layout-control-input-medium-content-vertical, 8px) var(--sjs2-layout-control-input-medium-content-horizontal, 12px);
+  align-items: flex-start;
+  flex: 1 0 0;
+}
+
+.sa-dropdown-header-text {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--sjs2-color-control-input-default-value, #1C1B20);
+  font-family: var(--sjs2-typography-font-family-text);
+  font-weight: var(--sjs2-typography-font-weight-basic);
+  font-size: var(--sjs2-typography-font-size-default);
+  line-height: var(--sjs2-typography-line-height-default);
+}
+
+.sa-action-dropdown-header {
+  display: flex;
+  padding: var(--sjs2-layout-control-action-small-box-vertical, 8px) var(--sjs2-layout-control-action-small-box-horizontal, 8px);
+  justify-content: center;
+  align-items: center;
+  gap: var(--sjs2-layout-control-action-small-box-gap, 0);
+  border-radius: var(--sjs2-radius-control-action, 8px);
+  background: var(--sjs2-color-bg-positive-tertiary, rgba(25, 179, 148, 0));
+}
+.sa-action-dropdown-header:focus-visible {
+  border-radius: var(--sjs2-radius-control-action, 8px);
+  outline: var(--sjs2-border-width-a11y, 4px) solid var(--sjs2-color-utility-a11y, rgba(102, 180, 252, 0.6));
+  background: var(--sjs2-color-bg-positive-tertiary, rgba(25, 179, 148, 0));
+}
+
+.sa-action-dropdown-title {
+  padding: var(--sjs2-layout-control-action-small-label-vertical, 0) var(--sjs2-layout-control-action-small-label-horizontal, 6px);
+}
+
+.sa-action-dropdown-arrow {
+  display: flex;
+  padding: var(--sjs2-layout-control-action-small-addon-vertical, 4px) var(--sjs2-layout-control-action-small-addon-horizontal, 4px);
+  justify-content: center;
+  align-items: center;
+}
+
+.sa-action-dropdown-arrow svg {
+  display: flex;
+  width: 16px;
+  height: 16px;
+  justify-content: center;
+  align-items: center;
+}
+.sa-action-dropdown-arrow svg use {
+  fill: var(--sjs2-color-project-accent-600, rgb(25, 179, 148));
+}
+
+.sa-action-dropdown-header {
+  display: flex;
+  min-width: var(--sjs2-size-semantic-small, 40px);
+  padding: var(--sjs2-layout-control-action-small-box-vertical, 8px) var(--sjs2-layout-control-action-small-box-horizontal, 8px);
+  justify-content: center;
+  align-items: center;
+  gap: var(--sjs2-layout-control-action-small-box-gap, 0);
+}
+
+.sa-button {
+  outline: none;
+  user-select: none;
+  cursor: pointer;
+  display: flex;
+  flex-shrink: 0;
+  min-width: var(--sjs2-size-semantic-small, 40px);
+  padding: var(--sjs2-layout-control-action-small-box-vertical, 8px) var(--sjs2-layout-control-action-small-box-horizontal, 8px);
+  justify-content: center;
+  align-items: center;
+  gap: var(--sjs2-layout-control-action-small-box-gap, 0);
+}
+
+.sa-button-text {
+  display: flex;
+  flex: 1 0 auto;
+  padding: var(--sjs2-layout-control-action-small-label-vertical, 0) var(--sjs2-layout-control-action-small-label-horizontal, 6px);
+  justify-content: center;
+  align-items: center;
+}
+
+.sa-button-brand-secondary {
+  border-radius: var(--sjs2-radius-control-button, 8px);
+  background: var(--sjs2-color-bg-brand-secondary, rgba(25, 179, 148, 0.1));
+  color: var(--sjs2-color-fg-brand-primary, #19B394);
+}
+.sa-button-brand-secondary:hover {
+  background: var(--sjs2-color-bg-brand-secondary-dim, rgba(25, 179, 148, 0.15));
+}
+
+.sa-button-brand-tertiary {
+  border-radius: 8px;
+  background: var(--sjs2-color-bg-brand-tertiary, rgba(25, 179, 148, 0));
+  color: var(--sjs2-color-fg-brand-primary, #19B394);
+  text-align: center;
+  font-family: var(--sjs2-typography-font-family-text);
+  font-weight: var(--sjs2-typography-font-weight-strong);
+  font-size: var(--sjs2-typography-font-size-default);
+  line-height: var(--sjs2-typography-line-height-default);
+}
+.sa-button-brand-tertiary:hover {
+  background: var(--sjs2-color-bg-brand-tertiary-dim, rgba(25, 179, 148, 0.1));
+}
+
+@media screen and (max-width: 600px) {
+  .sa-dropdown {
+    width: 100%;
+    flex-direction: column;
+  }
+  .sa-dropdown-container {
+    width: 100%;
+  }
+  .sa-dropdown-list.sa-dropdown--opened {
+    min-width: calc(100% - var(--sjs2-layout-container-drop-horizontal, 8px) * 2);
+    max-width: calc(100% - var(--sjs2-layout-container-drop-horizontal, 8px) * 2);
+  }
+}
 .sa-table {
-  font-size: var(--root-font-size, 14px);
-  font-family: var(--font-family, "Segoe UI", SegoeUI, Arial, sans-serif);
+  font-family: var(--sjs2-typography-font-family-text);
+  font-weight: var(--sjs2-typography-font-weight-basic);
+  font-size: var(--sjs2-typography-font-size-default);
+  line-height: var(--sjs2-typography-line-height-default);
 }
 .sa-table button {
   cursor: pointer;
@@ -108,7 +506,7 @@
 }
 
 .sa-table__detail-row.sa-table__detail-row.sa-table__detail-row.sa-table__detail-row {
-  background-color: #f7f7f7;
+  background: var(--sjs2-color-bg-basic-secondary, rgba(28, 27, 32, 0.05));
 }
 
 .sa-table__detail-table.sa-table__detail-table {
@@ -119,29 +517,34 @@
 }
 
 .sa-table__detail {
-  border-top: 1px solid #d4d4d4;
+  border-top: var(--sjs2-border-width-default, 1px) dashed var(--sjs2-color-border-basic-secondary, #D4D4D4);
 }
 .sa-table__detail td {
   box-sizing: border-box;
-  padding: 20px;
   border-left: none;
   border-right: none;
   white-space: initial;
+  padding: var(--sjs2-spacing-x200, 16px) var(--sjs2-spacing-x300, 24px);
+  color: var(--sjs2-color-fg-basic-primary, #1C1B20);
+  font-family: var(--sjs2-typography-font-family-text);
+  font-weight: var(--sjs2-typography-font-weight-strong);
+  font-size: var(--sjs2-typography-font-size-default);
+  line-height: var(--sjs2-typography-line-height-default);
 }
 .sa-table__detail td:first-child {
-  width: 267px;
-  border-left: none;
-  font-weight: bold;
-}
-.sa-table__detail td:nth-child(2) {
-  width: 208px;
+  display: flex;
+  padding: var(--sjs2-spacing-x100, 8px);
+  align-items: flex-start;
+  align-self: stretch;
 }
 
 .sa-table__btn {
+  font-family: var(--sjs2-typography-font-family-text);
+  font-weight: var(--sjs2-typography-font-weight-strong);
+  font-size: var(--sjs2-typography-font-size-default);
+  line-height: var(--sjs2-typography-line-height-default);
   height: 34px;
   width: 154px;
-  font-size: var(--root-font-size, 14px);
-  font-weight: bold;
   background-color: transparent;
   box-sizing: border-box;
   border: solid 2px;
@@ -179,29 +582,115 @@ a.sa-table__btn {
 }
 
 .sa-table__svg-button {
-  width: 15px;
-  height: 15px;
-  padding: 0;
+  display: flex;
+  padding: var(--sjs2-layout-control-action-small-box-vertical, 8px) var(--sjs2-layout-control-action-small-box-horizontal, 8px);
+  justify-content: center;
+  align-items: center;
+  gap: var(--sjs2-layout-control-action-small-box-gap, 0);
   border: none;
+  box-sizing: content-box;
 }
-.sa-table__svg-button use {
-  fill: var(--svg-color, rgba(159, 159, 159, 0.4));
+.sa-table__svg-button:hover {
+  border-radius: var(--sjs2-radius-control-action-icon, 8px);
+  background: var(--sjs2-color-bg-brand-tertiary-dim, rgba(25, 179, 148, 0.1));
 }
-.sa-table__svg-button:hover use {
-  fill: var(--svg-hover-color, #9f9f9f);
+.sa-table__svg-button:focus-visible {
+  border-radius: var(--sjs2-radius-control-action-icon, 8px);
+  outline: var(--sjs2-border-width-a11y, 4px) solid var(--sjs2-color-utility-a11y, rgba(102, 180, 252, 0.6));
+  background: var(--sjs2-color-bg-brand-tertiary, rgba(25, 179, 148, 0));
 }
 .sa-table__svg-button svg {
-  width: 15px;
-  height: 15px;
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+}
+.sa-table__svg-button use {
+  fill: var(--sjs2-color-fg-brand-primary, #19B394);
+}
+
+.sa-tabulator-column-header {
+  display: flex;
+  padding: var(--sjs2-spacing-x200, 16px) var(--sjs2-spacing-x300, 24px) var(--sjs2-spacing-x150, 12px) var(--sjs2-spacing-x300, 24px);
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--sjs2-spacing-x100, 8px);
+  flex: 1 0 0;
+  background: var(--sjs2-color-bg-basic-primary, #FFF);
+}
+
+.sa-tabulator-column-title-text {
+  color: var(--sjs2-color-fg-basic-primary, #1C1B20);
+  flex: 1 0 0;
+  font-family: var(--sjs2-typography-font-family-text);
+  font-weight: var(--sjs2-typography-font-weight-strong);
+  font-size: var(--sjs2-typography-font-size-default);
+  line-height: var(--sjs2-typography-line-height-default);
+}
+
+.sa-table-filter {
+  display: flex;
+  padding: var(--sjs2-layout-control-formbox-small-vertical, 4px) var(--sjs2-layout-control-formbox-small-horizontal, 4px);
+  align-items: flex-start;
+  gap: var(--sjs2-layout-control-formbox-small-gap, 4px);
+  align-self: stretch;
+  border-radius: var(--sjs2-radius-semantic-form, 8px);
+  background: var(--sjs2-color-control-formbox-default-bg, #F5F5F5);
+  box-shadow: var(--sjs2-border-offset-x-form-default, 0) var(--sjs2-border-offset-y-form-default, 0) var(--sjs2-border-blur-form-default, 0) var(--sjs2-border-spread-form-default, 1px) var(--sjs2-color-control-formbox-default-border, #D4D4D4) inset;
+}
+.sa-table-filter:focus-within {
+  background: var(--sjs2-color-control-formbox-focused-bg, #F5F5F5);
+  box-shadow: var(--sjs2-border-offset-x-form-focused, 0) var(--sjs2-border-offset-y-form-focused, 0) var(--sjs2-border-blur-form-focused, 0) var(--sjs2-border-spread-form-focused, 2px) var(--sjs2-color-control-formbox-focused-border, #19B394) inset;
+}
+
+.sa-table-filter_icon {
+  display: flex;
+  padding: var(--sjs2-layout-control-input-small-icon-vertical, 4px) var(--sjs2-layout-control-input-small-icon-right, 0) var(--sjs2-layout-control-input-small-icon-vertical, 4px) var(--sjs2-layout-control-input-small-icon-left, 4px);
+  justify-content: center;
+  align-items: center;
+}
+.sa-table-filter_icon svg {
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+}
+.sa-table-filter_icon use {
+  fill: var(--sjs2-color-control-input-default-icon, rgba(28, 27, 32, 0.4));
+}
+
+.sa-table-filter_input.sa-table-filter_input {
+  display: flex;
+  padding: var(--sjs2-layout-control-input-small-content-vertical, 4px) var(--sjs2-layout-control-input-small-content-horizontal, 8px);
+  align-items: flex-start;
+  flex: 1 0 0;
+  border: none;
+  overflow: hidden;
+  color: var(--sjs2-color-control-input-default-value, #1C1B20);
+  text-overflow: ellipsis;
+  font-family: var(--sjs2-typography-font-family-text);
+  font-weight: var(--sjs2-typography-font-weight-basic);
+  font-size: var(--sjs2-typography-font-size-default);
+  line-height: var(--sjs2-typography-line-height-default);
+}
+.sa-table-filter_input.sa-table-filter_input::placeholder {
+  overflow: hidden;
+  color: var(--sjs2-color-control-input-default-placeholder, rgba(28, 27, 32, 0.6));
+  text-overflow: ellipsis;
+}
+
+.sa-table__filter-container {
+  display: flex;
+  padding: var(--sjs2-spacing-x100, 8px) 0;
+  flex-direction: column;
+  align-items: flex-start;
+  align-self: stretch;
 }
 
 .sa-table__action-container {
-  margin-bottom: 10px;
-  white-space: normal;
+  display: flex;
+  align-items: center;
+  align-self: stretch;
 }
 .sa-table__action-container .sa-table__svg-button {
-  float: right;
-  margin: 0 0 13px 13px;
   pointer-events: all;
 }
 .sa-table__action-container:after {
@@ -212,12 +701,7 @@ a.sa-table__btn {
 .sa-table__action-container .sa-table__drag-button {
   float: left;
   cursor: move;
-}
-.sa-table__action-container .sa-table__drag-button use {
-  fill: var(--main-color, #1ab394);
-}
-.sa-table__action-container .sa-table__drag-button:hover use {
-  fill: var(--main-color, #1ab394);
+  margin-inline-end: auto;
 }
 
 .sa-table__global-filter.sa-table__global-filter,
@@ -234,46 +718,47 @@ a.sa-table__btn {
 
 .sa-table__filter.sa-table__filter {
   width: 100%;
+  min-width: 195px;
+  border: none;
+  border-radius: var(--dsb-table-view-column-search-corner-radius, 6px);
+  outline: var(--dsb-table-view-column-search-border-width, 0px) solid var(--dsb-table-view-column-search-border-color, #DCDCDC);
+  background: var(--dsb-table-view-column-search-background-color, #F4F4F4);
+  padding: var(--dsb-table-view-column-search-padding-top, 8px) var(--dsb-table-view-column-search-padding-right, 16px) var(--dsb-table-view-column-search-padding-bottom, 8px) var(--dsb-table-view-column-search-padding-left, 16px);
+  margin-inline-end: var(--dsb-table-view-header-toolbar-gap, 16px);
+  overflow: hidden;
+  color: var(--dsb-table-view-column-search-text-color, rgba(0, 0, 0, 0.5));
+  text-overflow: ellipsis;
+  font-family: var(--sjs2-typography-font-family-text);
+  font-weight: var(--sjs2-typography-font-weight-basic);
+  font-size: var(--sjs2-typography-font-size-default);
+  line-height: var(--sjs2-typography-line-height-default);
 }
 
-.sa-table__show-column.sa-table__show-column {
-  background: transparent;
-  background-image: url("data:image/svg+xml,%3C%3Fxml version=%271.0%27 encoding=%27utf-8%27%3F%3E%3C%21-- Generator: Adobe Illustrator 24.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0%29 --%3E%3Csvg version=%271.1%27 id=%27Layer_1%27 xmlns=%27http://www.w3.org/2000/svg%27 xmlns:xlink=%27http://www.w3.org/1999/xlink%27 x=%270px%27 y=%270px%27 viewBox=%270 0 16 16%27 style=%27enable-background:new 0 0 16 16;%27 xml:space=%27preserve%27%3E%3Cstyle type=%27text/css%27%3E .st0%7Bfill:rgba%28159, 159, 159, 0.5%29;%7D .st1%7Bfill:rgba%28159, 159, 159, 0.5%29;%7D%0A%3C/style%3E%3Cg%3E%3Cpath class=%27st1%27 d=%27M8,2.03C3.63,2.03,0,8,0,8s3.63,6.03,8,6.03s8-6,8-6S12.37,2.03,8,2.03z M8,12c-2.58,0-5.13-2.81-6-4 c1.07-1.47,3.61-4,6-4c2.58,0,5.13,2.81,6,4C12.93,9.47,10.39,12,8,12z%27/%3E%3Ccircle class=%27st1%27 cx=%278%27 cy=%278%27 r=%273%27/%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3C%3Fxml version=%271.0%27 encoding=%27utf-8%27%3F%3E%3C%21-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0%29 --%3E%3Csvg version=%271.1%27 id=%27Layer_1%27 xmlns=%27http://www.w3.org/2000/svg%27 xmlns:xlink=%27http://www.w3.org/1999/xlink%27 x=%270px%27 y=%270px%27 viewBox=%270 0 10 10%27 style=%27enable-background:new 0 0 10 10;%27 xml:space=%27preserve%27%3E%3Cstyle type=%27text/css%27%3E .st0%7Bfill:%23404040;%7D%0A%3C/style%3E%3Cpolygon class=%27st0%27 points=%272,2 0,4 5,9 10,4 8,2 5,5 %27/%3E%3C/svg%3E%0A");
-  background-repeat: no-repeat, no-repeat;
-  background-position: left 0.7em top 50%, right 0.7em top 50%;
-  background-size: 1em 100%, 0.57em 100%;
-  padding-left: 35px;
-  border: solid 1px #d4d4d4;
-  pointer-events: all;
-  margin-left: 20px;
-}
-.sa-table__show-column.sa-table__show-column:focus {
-  background-image: url("data:image/svg+xml,%3C%3Fxml version=%271.0%27 encoding=%27utf-8%27%3F%3E%3C%21-- Generator: Adobe Illustrator 24.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0%29 --%3E%3Csvg version=%271.1%27 id=%27Layer_1%27 xmlns=%27http://www.w3.org/2000/svg%27 xmlns:xlink=%27http://www.w3.org/1999/xlink%27 x=%270px%27 y=%270px%27 viewBox=%270 0 16 16%27 style=%27enable-background:new 0 0 16 16;%27 xml:space=%27preserve%27%3E%3Cstyle type=%27text/css%27%3E .st0%7Bfill:rgba%28159, 159, 159, 0.5%29;%7D .st1%7Bfill:rgba%28159, 159, 159, 0.5%29;%7D%0A%3C/style%3E%3Cg%3E%3Cpath class=%27st1%27 d=%27M8,2.03C3.63,2.03,0,8,0,8s3.63,6.03,8,6.03s8-6,8-6S12.37,2.03,8,2.03z M8,12c-2.58,0-5.13-2.81-6-4 c1.07-1.47,3.61-4,6-4c2.58,0,5.13,2.81,6,4C12.93,9.47,10.39,12,8,12z%27/%3E%3Ccircle class=%27st1%27 cx=%278%27 cy=%278%27 r=%273%27/%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3C%3Fxml version=%271.0%27 encoding=%27utf-8%27%3F%3E%3C%21-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0%29 --%3E%3Csvg version=%271.1%27 id=%27Layer_1%27 xmlns=%27http://www.w3.org/2000/svg%27 xmlns:xlink=%27http://www.w3.org/1999/xlink%27 x=%270px%27 y=%270px%27 viewBox=%270 0 10 10%27 style=%27enable-background:new 0 0 10 10;%27 xml:space=%27preserve%27%3E%3Cstyle type=%27text/css%27%3E .st0%7Bfill:%231AB394;%7D%0A%3C/style%3E%3Cpolygon class=%27st0%27 points=%272,2 0,4 5,9 10,4 8,2 5,5 %27/%3E%3C/svg%3E") !important;
+.sa-table__filter.sa-table__filter:focus {
+  outline: var(--dsb-table-view-column-search-border-width-focused, 2px) solid var(--dsb-table-view-column-search-border-color-focused, #19B394);
 }
 
 .sa-table__entries {
-  float: right;
-  white-space: nowrap;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: var(--sjs2-spacing-x100, 8px);
 }
 
 .sa-table__entries-label {
-  font-weight: bold;
-}
-
-.sa-table__entries-label--right {
-  margin-right: 5px;
+  color: var(--sjs2-color-fg-basic-primary, #1C1B20);
+  font-family: var(--sjs2-typography-font-family-text);
+  font-weight: var(--sjs2-typography-font-weight-basic);
+  font-size: var(--sjs2-typography-font-size-default);
+  line-height: var(--sjs2-typography-line-height-default);
 }
 
-.sa-table__entries-label--left {
-  margin-left: 5px;
+.sa-table__entries-value .sa-action-dropdown-list {
+  bottom: 48px;
 }
 
 .sa-table__detail-row {
-  background-color: #f7f7f7;
-}
-
-.sa-table__detail-table {
-  background-color: #f7f7f7;
+  background: var(--sjs2-color-bg-basic-secondary, rgba(28, 27, 32, 0.05));
 }
 
 .sa-table input.sa-table__row-extension {
@@ -281,37 +766,96 @@ a.sa-table__btn {
 }
 
 .sa-table__row-extension + .sa-table__row-extension {
-  margin-left: 10px;
   vertical-align: middle;
 }
 
+.sa-table__row-extension {
+  margin: auto;
+}
+
 .sa-table__header-extensions {
-  float: left;
-  margin-left: 10px;
-  width: calc(100% - 540px);
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex: 1 0 0;
+  flex-wrap: wrap;
 }
 
-.sa-table__header-extension + .sa-table__header-extension {
-  margin-left: 10px;
+.sa-checkbox.sa-checkbox {
+  display: flex;
+  width: var(--sjs2-size-x300, 24px);
+  height: var(--sjs2-size-x300, 24px);
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  border: none;
+  outline: none;
+  padding: 0;
+  border-radius: var(--sjs2-radius-control-checkbox, 4px);
+  background: var(--sjs2-color-control-check-false-default-bg, #F5F5F5);
+  box-shadow: var(--sjs2-border-offset-x-form-default, 0) var(--sjs2-border-offset-y-form-default, 0) var(--sjs2-border-blur-form-default, 0) var(--sjs2-border-spread-form-default, 1px) var(--sjs2-color-control-check-false-default-border, #D4D4D4) inset;
+}
+.sa-checkbox.sa-checkbox:hover {
+  background: var(--sjs2-color-control-check-false-hovered-bg, rgba(28, 27, 32, 0.1));
+  box-shadow: var(--sjs2-border-offset-x-form-hovered, 0) var(--sjs2-border-offset-y-form-hovered, 0) var(--sjs2-border-blur-form-hovered, 0) var(--sjs2-border-spread-form-hovered, 1px) var(--sjs2-color-control-check-false-hovered-border, #D4D4D4) inset;
+}
+.sa-checkbox.sa-checkbox svg {
+  display: none;
+  width: var(--sjs2-size-x200, 16px);
+  height: var(--sjs2-size-x200, 16px);
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+}
+.sa-checkbox.sa-checkbox use {
+  fill: var(--sjs2-color-control-check-true-default-icon, #FFF);
 }
 
-.sa-tabulator__header {
-  padding: 20px 13px;
-  background-color: #f7f7f7;
-  overflow: auto;
+.sa-checkbox--checked.sa-checkbox--checked {
+  background: var(--sjs2-color-control-check-true-default-bg, #19B394);
+  box-shadow: var(--sjs2-border-offset-x-form-default, 0) var(--sjs2-border-offset-y-form-default, 0) var(--sjs2-border-blur-form-default, 0) var(--sjs2-border-spread-form-default, 1px) var(--sjs2-color-control-check-true-default-border, #19B394) inset;
+}
+.sa-checkbox--checked.sa-checkbox--checked:hover {
+  background: var(--sjs2-color-control-check-true-hovered-bg, #15987E);
+  box-shadow: var(--sjs2-border-offset-x-form-hovered, 0) var(--sjs2-border-offset-y-form-hovered, 0) var(--sjs2-border-blur-form-hovered, 0) var(--sjs2-border-spread-form-hovered, 1px) var(--sjs2-color-control-check-true-hovered-border, #15987E) inset;
+}
+.sa-checkbox--checked.sa-checkbox--checked svg {
   display: flex;
-  flex-direction: row;
-  gap: 10px;
-  flex-wrap: wrap;
 }
-.sa-tabulator__header:after {
-  content: "";
-  clear: both;
-  display: block;
+
+.sa-tabulator__wrapper {
+  display: flex;
+  padding: var(--sjs2-spacing-x300, 24px);
+  flex-direction: column;
+  align-items: center;
+  gap: var(--sjs2-spacing-x300, 24px);
+  align-self: stretch;
+  background: var(--sjs2-color-utility-surface-dashboard, rgba(28, 27, 32, 0.05));
 }
-.sa-tabulator__header .sa-table__header-space {
+
+.sa-tabulator__table-container {
+  width: 100%;
+}
+
+.sa-tabulator__container {
+  max-width: 100%;
   display: flex;
-  flex-grow: 1;
+  flex-direction: column;
+  align-items: flex-start;
+  flex: 1 0 0;
+  border-radius: var(--sjs2-radius-container-panel, 16px);
+  background: var(--sjs2-color-bg-basic-primary, #FFF);
+  /* sjs2/border-effect/surface/default */
+  box-shadow: var(--sjs2-border-offset-x-surface-default, 0) var(--sjs2-border-offset-y-surface-default, 0) var(--sjs2-border-blur-surface-default, 0) var(--sjs2-border-spread-surface-default, 1px) var(--sjs2-color-utility-shadow-surface-default, rgba(17, 16, 20, 0.1));
+}
+
+.sa-tabulator__header {
+  display: flex;
+  padding: var(--sjs2-spacing-x300, 24px);
+  align-items: flex-start;
+  flex: 1 0 0;
+  align-self: stretch;
+  border-bottom: var(--sjs2-border-width-default, 1px) solid var(--sjs2-color-border-basic-secondary, #D4D4D4);
 }
 .sa-tabulator__header .sa-table__entries {
   float: none;
@@ -320,18 +864,36 @@ a.sa-table__btn {
   flex-grow: 1;
 }
 
-.sa-tabulator__downloads-bar {
-  float: left;
+.sa-tabulator__footer {
+  display: flex;
+  padding: var(--sjs2-spacing-x200, 16px) var(--sjs2-spacing-x300, 24px);
+  justify-content: space-between;
+  align-items: center;
+  flex: 1 0 0;
+  align-self: stretch;
+  border-top: var(--sjs2-border-width-default, 1px) solid var(--sjs2-color-border-basic-secondary, #D4D4D4);
 }
-.sa-tabulator__downloads-bar .sa-table__btn {
-  margin-left: 10px;
+
+.sa-tabulator__header .sa-table__btn {
+  display: flex;
+  min-width: var(--sjs2-size-semantic-small, 40px);
+  justify-content: center;
+  align-items: center;
+  color: var(--sjs2-color-fg-brand-primary, #19B394);
+  text-align: center;
+  font-family: var(--sjs2-typography-font-family-text);
+  font-weight: var(--sjs2-typography-font-weight-strong);
+  font-size: var(--sjs2-typography-font-size-default);
+  line-height: var(--sjs2-typography-line-height-default);
+}
+
+.tabulator-headers {
+  border-bottom: var(--sjs2-border-width-default, 1px) dashed var(--sjs2-color-border-basic-secondary, #D4D4D4);
 }
 
 .sa-tabulator__pagination-container {
-  float: right;
-  margin-top: 8px;
-  min-width: 200px;
-  text-align: right;
+  display: flex;
+  align-items: center;
 }
 
 .sa-tabulator__filter-container {
@@ -346,95 +908,160 @@ a.sa-table__btn {
 }
 
 .sa-tabulator .tabulator-page {
-  margin-right: 15px;
-  padding: 1px;
-  vertical-align: middle;
-  color: #a0a0a0;
   cursor: pointer;
   outline: none;
   border: none;
+  display: flex;
+  padding: var(--sjs2-layout-control-action-small-box-vertical, 8px) var(--sjs2-layout-control-action-small-box-horizontal, 8px);
+  justify-content: center;
+  align-items: center;
+  gap: var(--sjs2-layout-control-action-small-box-gap, 0);
+  background: transparent;
 }
-.sa-tabulator .tabulator-page:last-child {
-  margin-right: 0;
+.sa-tabulator .tabulator-page:hover {
+  border-radius: var(--sjs2-radius-control-action-icon, 8px);
+  background: var(--sjs2-color-bg-brand-tertiary-dim, rgba(25, 179, 148, 0.1));
+}
+.sa-tabulator .tabulator-page:focus-visible {
+  border-radius: var(--sjs2-radius-control-action, 8px);
+  border: unset;
+  outline: var(--sjs2-border-width-a11y, 4px) solid var(--sjs2-color-utility-a11y, rgba(102, 180, 252, 0.6));
+  background: var(--sjs2-color-bg-brand-tertiary, rgba(25, 179, 148, 0));
 }
 .sa-tabulator .tabulator-page:disabled {
   cursor: default;
+  opacity: var(--sjs2-opacity-disabled, 0.25);
+}
+.sa-tabulator .tabulator-pages {
+  display: flex;
+  align-items: center;
+}
+.sa-tabulator .tabulator-pages .tabulator-page {
+  display: flex;
+  min-width: var(--sjs2-size-semantic-small, 40px);
+  padding: var(--sjs2-layout-control-action-small-box-vertical, 8px) var(--sjs2-layout-control-action-small-box-horizontal, 8px);
+  justify-content: center;
+  align-items: center;
+  gap: var(--sjs2-layout-control-action-small-box-gap, 0);
+  border-radius: var(--_ctr-survey-action-button-corner-radius, 8px);
+  background: var(--sjs2-color-bg-brand-tertiary, rgba(25, 179, 148, 0));
+  color: var(--sjs2-color-fg-basic-tertiary, rgba(28, 27, 32, 0.4));
+  text-align: center;
+  font-family: var(--sjs2-typography-font-family-text);
+  font-weight: var(--sjs2-typography-font-weight-strong);
+  font-size: var(--sjs2-typography-font-size-default);
+  line-height: var(--sjs2-typography-line-height-default);
+}
+.sa-tabulator .tabulator-pages .tabulator-page:hover {
+  border-radius: var(--_ctr-survey-action-button-corner-radius, 8px);
+  background: var(--sjs2-color-bg-brand-tertiary-dim, rgba(25, 179, 148, 0.1));
 }
 .sa-tabulator .tabulator-page[aria-label~=Prev] {
   display: inline-block;
-  background: transparent;
   background-image: url("data:image/svg+xml,%3C%3Fxml version=%271.0%27 encoding=%27utf-8%27%3F%3E%3C%21-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0%29 --%3E%3Csvg version=%271.1%27 id=%27Layer_1%27 xmlns=%27http://www.w3.org/2000/svg%27 xmlns:xlink=%27http://www.w3.org/1999/xlink%27 x=%270px%27 y=%270px%27 viewBox=%270 0 10 10%27 style=%27enable-background:new 0 0 10 10;%27 xml:space=%27preserve%27%3E%3Cstyle type=%27text/css%27%3E .st0%7Bfill:%23a0a0a0;%7D%0A%3C/style%3E%3Cpolygon class=%27st0%27 points=%272,2 0,4 5,9 10,4 8,2 5,5 %27/%3E%3C/svg%3E%0A");
   background-repeat: no-repeat, repeat;
   background-size: 9px 100%;
-  height: 10px;
-  width: 10px;
   white-space: nowrap;
   overflow: hidden;
   text-indent: -9999px;
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+  box-sizing: content-box;
+  background-position: center 0, center 5px;
   transform: rotate(90deg);
-  margin-right: 20px;
 }
 .sa-tabulator .tabulator-page[aria-label~=Next] {
   display: inline-block;
-  background: transparent;
   background-image: url("data:image/svg+xml,%3C%3Fxml version=%271.0%27 encoding=%27utf-8%27%3F%3E%3C%21-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0%29 --%3E%3Csvg version=%271.1%27 id=%27Layer_1%27 xmlns=%27http://www.w3.org/2000/svg%27 xmlns:xlink=%27http://www.w3.org/1999/xlink%27 x=%270px%27 y=%270px%27 viewBox=%270 0 10 10%27 style=%27enable-background:new 0 0 10 10;%27 xml:space=%27preserve%27%3E%3Cstyle type=%27text/css%27%3E .st0%7Bfill:%23a0a0a0;%7D%0A%3C/style%3E%3Cpolygon class=%27st0%27 points=%272,2 0,4 5,9 10,4 8,2 5,5 %27/%3E%3C/svg%3E%0A");
   background-repeat: no-repeat, repeat;
   background-size: 9px 100%;
-  height: 10px;
-  width: 10px;
   white-space: nowrap;
   overflow: hidden;
   text-indent: -9999px;
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+  box-sizing: content-box;
+  background-position: center 0, center 5px;
   transform: rotate(270deg);
-  margin-left: 20px;
-  margin-right: 0;
 }
 .sa-tabulator .tabulator-page[aria-label~=First] {
   display: inline-block;
-  background: transparent;
   background-image: url("data:image/svg+xml,%3C%3Fxml version=%271.0%27 encoding=%27utf-8%27%3F%3E%3C%21-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0%29 --%3E%3Csvg version=%271.1%27 id=%27Layer_1%27 xmlns=%27http://www.w3.org/2000/svg%27 xmlns:xlink=%27http://www.w3.org/1999/xlink%27 x=%270px%27 y=%270px%27 viewBox=%270 0 10 10%27 style=%27enable-background:new 0 0 10 10;%27 xml:space=%27preserve%27%3E%3Cstyle type=%27text/css%27%3E .st0%7Bfill:%23a0a0a0;%7D%0A%3C/style%3E%3Cpolygon class=%27st0%27 points=%272,2 0,4 5,9 10,4 8,2 5,5 %27/%3E%3C/svg%3E%0A"), url("data:image/svg+xml,%3C%3Fxml version=%271.0%27 encoding=%27utf-8%27%3F%3E%3C%21-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0%29 --%3E%3Csvg version=%271.1%27 id=%27Layer_1%27 xmlns=%27http://www.w3.org/2000/svg%27 xmlns:xlink=%27http://www.w3.org/1999/xlink%27 x=%270px%27 y=%270px%27 viewBox=%270 0 10 10%27 style=%27enable-background:new 0 0 10 10;%27 xml:space=%27preserve%27%3E%3Cstyle type=%27text/css%27%3E .st0%7Bfill:%23a0a0a0;%7D%0A%3C/style%3E%3Cpolygon class=%27st0%27 points=%272,2 0,4 5,9 10,4 8,2 5,5 %27/%3E%3C/svg%3E%0A");
   background-repeat: no-repeat, no-repeat;
   background-size: 9px 100%;
-  background-position: left 0, left 5px;
-  height: 20px;
-  width: 10px;
   white-space: nowrap;
   overflow: hidden;
   text-indent: -9999px;
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+  box-sizing: content-box;
+  background-position: center -3px, center 3px;
   transform: rotate(90deg);
-  margin-right: 10px;
 }
 .sa-tabulator .tabulator-page[aria-label~=Last] {
   display: inline-block;
-  background: transparent;
   background-image: url("data:image/svg+xml,%3C%3Fxml version=%271.0%27 encoding=%27utf-8%27%3F%3E%3C%21-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0%29 --%3E%3Csvg version=%271.1%27 id=%27Layer_1%27 xmlns=%27http://www.w3.org/2000/svg%27 xmlns:xlink=%27http://www.w3.org/1999/xlink%27 x=%270px%27 y=%270px%27 viewBox=%270 0 10 10%27 style=%27enable-background:new 0 0 10 10;%27 xml:space=%27preserve%27%3E%3Cstyle type=%27text/css%27%3E .st0%7Bfill:%23a0a0a0;%7D%0A%3C/style%3E%3Cpolygon class=%27st0%27 points=%272,2 0,4 5,9 10,4 8,2 5,5 %27/%3E%3C/svg%3E%0A"), url("data:image/svg+xml,%3C%3Fxml version=%271.0%27 encoding=%27utf-8%27%3F%3E%3C%21-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0%29 --%3E%3Csvg version=%271.1%27 id=%27Layer_1%27 xmlns=%27http://www.w3.org/2000/svg%27 xmlns:xlink=%27http://www.w3.org/1999/xlink%27 x=%270px%27 y=%270px%27 viewBox=%270 0 10 10%27 style=%27enable-background:new 0 0 10 10;%27 xml:space=%27preserve%27%3E%3Cstyle type=%27text/css%27%3E .st0%7Bfill:%23a0a0a0;%7D%0A%3C/style%3E%3Cpolygon class=%27st0%27 points=%272,2 0,4 5,9 10,4 8,2 5,5 %27/%3E%3C/svg%3E%0A");
   background-repeat: no-repeat, no-repeat;
   background-size: 9px 100%;
-  background-position: left 0, left 5px;
-  height: 20px;
-  width: 10px;
   white-space: nowrap;
   overflow: hidden;
   text-indent: -9999px;
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+  box-sizing: content-box;
+  background-position: center -3px, center 3px;
   transform: rotate(270deg);
-  margin-left: 10px;
 }
 .sa-tabulator .tabulator-page.active {
-  font-weight: bold;
-  border-bottom: 1px solid #a0a0a0;
+  display: flex;
+  min-width: var(--sjs2-size-semantic-small, 40px);
+  padding: var(--sjs2-layout-control-action-small-box-vertical, 8px) var(--sjs2-layout-control-action-small-box-horizontal, 8px);
+  justify-content: center;
+  align-items: center;
+  gap: var(--sjs2-layout-control-action-small-box-gap, 0);
+  border-radius: var(--_ctr-survey-action-button-corner-radius, 8px);
+  border: var(--sjs2-border-width-default, 1px) solid var(--sjs2-color-border-basic-secondary, #D4D4D4);
+  background: var(--sjs2-color-bg-positive-tertiary, rgba(25, 179, 148, 0));
+  color: var(--sjs2-color-fg-basic-primary, #1C1B20);
+  text-align: center;
+  font-family: var(--sjs2-typography-font-family-text);
+  font-weight: var(--sjs2-typography-font-weight-strong);
+  font-size: var(--sjs2-typography-font-size-default);
+  line-height: var(--sjs2-typography-line-height-default);
+}
+.sa-tabulator .tabulator-page.active:hover {
+  cursor: default;
+  background-color: transparent;
 }
 .sa-tabulator .tabulator {
-  border: 1px solid #ddd;
-  background-color: #ffffff;
+  border: none;
+  background-color: transparent;
+}
+.sa-tabulator .tabulator .tabulator-table {
+  background-color: transparent;
 }
 .sa-tabulator .tabulator .tabulator-row .tabulator-cell {
-  padding: 20px;
-  border-top: 1px solid #ddd;
-  border-right: 1px solid #ddd;
+  padding: var(--sjs2-spacing-x200, 16px) var(--sjs2-spacing-x300, 24px);
+  border-top: var(--sjs2-border-width-default, 1px) dashed var(--sjs2-color-border-basic-secondary, #D4D4D4);
+  border-right: var(--sjs2-border-width-default, 1px) dashed var(--sjs2-color-border-basic-secondary, #D4D4D4);
+  color: var(--sjs2-color-fg-basic-primary, #1C1B20);
+  font-family: var(--sjs2-typography-font-family-text);
+  font-weight: var(--sjs2-typography-font-weight-basic);
+  font-size: var(--sjs2-typography-font-size-default);
+  line-height: var(--sjs2-typography-line-height-default);
+}
+.sa-tabulator .tabulator .tabulator-row .tabulator-cell.sa-tabulator-cell__action-details {
+  padding: var(--sjs2-spacing-x100, 8px);
+}
+.sa-tabulator .tabulator .tabulator-row .tabulator-cell.sa-tabulator-cell__action-select {
+  padding: var(--sjs2-spacing-x200, 16px);
 }
 .sa-tabulator .tabulator .tabulator-header .tabulator-col {
-  padding: 13px 20px;
-  border-right: 1px solid #ddd;
+  border-right: var(--sjs2-border-width-default, 1px) dashed var(--sjs2-color-border-basic-secondary, #D4D4D4);
 }
 .sa-tabulator .tabulator .tabulator-header .tabulator-col .tabulator-col-content {
   padding: 0;
@@ -443,11 +1070,14 @@ a.sa-table__btn {
   border-bottom: none;
 }
 .sa-tabulator .tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover {
-  background-color: white;
+  background-color: transparent;
 }
 .sa-tabulator .tabulator .tabulator-header,
 .sa-tabulator .tabulator .tabulator-header .tabulator-col {
-  background-color: white;
+  background-color: transparent;
+}
+.sa-tabulator .tabulator .tabulator-col.tabulator-moving {
+  border: var(--sjs2-border-width-default, 1px) dashed var(--sjs2-color-border-basic-secondary, #D4D4D4);
 }
 .sa-tabulator .tabulator .tabulator-header .tabulator-col:first-child {
   pointer-events: none;
@@ -455,15 +1085,15 @@ a.sa-table__btn {
 .sa-tabulator .tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-arrow {
   display: none;
 }
+.sa-tabulator .tabulator .tabulator-row {
+  background: var(--sjs2-color-bg-basic-primary, #FFF);
+}
 .sa-tabulator .tabulator .tabulator-row.tabulator-selectable:hover {
   cursor: default;
-  background-color: #ffffff;
+  background: var(--sjs2-color-bg-basic-primary-dim, rgba(28, 27, 32, 0.05));
 }
 .sa-tabulator .tabulator .tabulator-row.tabulator-selectable.sa-table__detail-row:hover {
-  background-color: #f7f7f7;
-}
-.sa-tabulator .tabulator .tabulator-row.tabulator-row-even {
-  background-color: #ffffff;
+  background: var(--sjs2-color-bg-basic-secondary, rgba(28, 27, 32, 0.05));
 }
 .sa-tabulator .tabulator .tabulator-header .tabulator-col .tabulator-col-content {
   border-top: none;
@@ -472,12 +1102,242 @@ a.sa-table__btn {
   padding-right: 0;
 }
 .sa-tabulator .tabulator .tabulator-tableholder::-webkit-scrollbar {
-  height: 10px;
-  width: 10px;
-  background-color: #e2e2e2;
+  width: 8px;
+  height: 8px;
+  background-color: transparent;
 }
 .sa-tabulator .tabulator .tabulator-tableholder::-webkit-scrollbar-thumb {
-  background: var(--main-color, #1ab394);
+  background-clip: padding-box;
+  border-radius: var(--ctr-scrollbar-corner-radius, 1024px);
+  background: var(--sjs2-color-utility-scrollbar, rgba(17, 16, 20, 0.15));
+}
+.sa-tabulator .tabulator .tabulator-tableholder::-webkit-scrollbar-track {
+  background: transparent;
+}
+.sa-tabulator .tabulator .tabulator-tableholder::-webkit-scrollbar-corner {
+  background: transparent;
+}
+/*!*************************************************************************************************************************************************************************!*\
+  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./src/entries/fonts.scss ***!
+  \*************************************************************************************************************************************************************************/
+/* cyrillic-ext */
+@font-face {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-stretch: 100%;
+  src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSKmu1aB.woff2) format("woff2");
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-stretch: 100%;
+  src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSumu1aB.woff2) format("woff2");
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek-ext */
+@font-face {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-stretch: 100%;
+  src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSOmu1aB.woff2) format("woff2");
+  unicode-range: U+1F00-1FFF;
+}
+/* greek */
+@font-face {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-stretch: 100%;
+  src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSymu1aB.woff2) format("woff2");
+  unicode-range: U+0370-03FF;
+}
+/* hebrew */
+@font-face {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-stretch: 100%;
+  src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS2mu1aB.woff2) format("woff2");
+  unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
+}
+/* vietnamese */
+@font-face {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-stretch: 100%;
+  src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSCmu1aB.woff2) format("woff2");
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-stretch: 100%;
+  src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSGmu1aB.woff2) format("woff2");
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-stretch: 100%;
+  src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS-muw.woff2) format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* cyrillic-ext */
+@font-face {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 600;
+  font-stretch: 100%;
+  src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSKmu1aB.woff2) format("woff2");
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 600;
+  font-stretch: 100%;
+  src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSumu1aB.woff2) format("woff2");
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek-ext */
+@font-face {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 600;
+  font-stretch: 100%;
+  src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSOmu1aB.woff2) format("woff2");
+  unicode-range: U+1F00-1FFF;
+}
+/* greek */
+@font-face {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 600;
+  font-stretch: 100%;
+  src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSymu1aB.woff2) format("woff2");
+  unicode-range: U+0370-03FF;
+}
+/* hebrew */
+@font-face {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 600;
+  font-stretch: 100%;
+  src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS2mu1aB.woff2) format("woff2");
+  unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
+}
+/* vietnamese */
+@font-face {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 600;
+  font-stretch: 100%;
+  src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSCmu1aB.woff2) format("woff2");
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 600;
+  font-stretch: 100%;
+  src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSGmu1aB.woff2) format("woff2");
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 600;
+  font-stretch: 100%;
+  src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS-muw.woff2) format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* cyrillic-ext */
+@font-face {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 700;
+  font-stretch: 100%;
+  src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSKmu1aB.woff2) format("woff2");
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 700;
+  font-stretch: 100%;
+  src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSumu1aB.woff2) format("woff2");
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek-ext */
+@font-face {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 700;
+  font-stretch: 100%;
+  src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSOmu1aB.woff2) format("woff2");
+  unicode-range: U+1F00-1FFF;
+}
+/* greek */
+@font-face {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 700;
+  font-stretch: 100%;
+  src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSymu1aB.woff2) format("woff2");
+  unicode-range: U+0370-03FF;
+}
+/* hebrew */
+@font-face {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 700;
+  font-stretch: 100%;
+  src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS2mu1aB.woff2) format("woff2");
+  unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
+}
+/* vietnamese */
+@font-face {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 700;
+  font-stretch: 100%;
+  src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSCmu1aB.woff2) format("woff2");
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 700;
+  font-stretch: 100%;
+  src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSGmu1aB.woff2) format("woff2");
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 700;
+  font-stretch: 100%;
+  src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS-muw.woff2) format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+:root {
+  --sjs-font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
 
 /*# sourceMappingURL=survey.analytics.tabulator.css.map*/