react-autoql 7.1.1 → 7.2.0

package/dist/autoql.esm.css

@@ -91,6 +91,7 @@ span.react-autoql-icon {
     left: 82%; } }
 
 .loading-container-centered {
+  -webkit-transform: translate3d(0, 0, 0);
   height: 100%;
   width: 100%;
   display: flex;
@@ -500,238 +501,6 @@ span.react-autoql-icon {
   .react-autoql-date-picker .rdrNextPrevButton.rdrNextButton i {
     border-color: transparent transparent transparent var(--react-autoql-text-color-primary); }
 
-.react-autoql-table-container {
-  flex: 1;
-  width: 100% !important;
-  background-color: inherit;
-  position: relative;
-  display: flex; }
-  .react-autoql-table-container.infinite:not(.last-page) .tabulator-row:last-child {
-    margin-bottom: 40px; }
-  .react-autoql-table-container .table-loader {
-    position: absolute;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    pointer-events: none;
-    background-color: transparent;
-    color: var(--react-autoql-accent-color); }
-    .react-autoql-table-container .table-loader.table-page-loader {
-      top: 50px;
-      bottom: 0;
-      right: 0;
-      left: 0; }
-    .react-autoql-table-container .table-loader.table-scroll-loader {
-      bottom: 20px;
-      width: 100%;
-      z-index: 0; }
-
-.react-autoql-table-date-picker {
-  background: var(--react-autoql-background-color-secondary);
-  color: var(--react-autoql-text-color-primary);
-  padding: 15px;
-  padding-bottom: 5px;
-  display: flex;
-  justify-content: center;
-  align-items: stretch;
-  flex-direction: column; }
-  .react-autoql-table-date-picker h3 {
-    margin-top: 0;
-    margin-left: 5px; }
-
-.react-autoql-table {
-  margin-bottom: 0 !important; }
-
-/* tabulator */
-.react-autoql-table.tabulator,
-.react-autoql-table.tabulator .tabulator-row,
-.react-autoql-table.tabulator .tabulator-header,
-.react-autoql-table.tabulator .tabulator-headers,
-.react-autoql-table.tabulator .tabulator-header .tabulator-col,
-.react-autoql-table.tabulator .tabulator-tableHolder .tabulator-table {
-  background-color: inherit; }
-
-.react-autoql-table-container:not(.supports-drilldown) .react-autoql-table.tabulator .tabulator-row .tabulator-cell {
-  cursor: text; }
-
-.react-autoql-table-container.supports-drilldown
-.react-autoql-table.tabulator
-.tabulator-row
-.tabulator-cell.pivot-category {
-  font-weight: 600; }
-
-.react-autoql-table-container.supports-drilldown
-.react-autoql-table.tabulator
-.tabulator-row
-.tabulator-cell:not(.pivot-category) {
-  transition: color 0.1s ease;
-  cursor: pointer; }
-
-.react-autoql-table-container.supports-drilldown.pivot .react-autoql-table.tabulator .tabulator-row .tabulator-cell:not(.pivot-category):hover,
-.react-autoql-table-container.supports-drilldown:not(.pivot) .react-autoql-table.tabulator .tabulator-row:hover .tabulator-cell {
-  color: var(--react-autoql-accent-color); }
-
-.react-autoql-table.tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover {
-  background-color: var(--react-autoql-hover-color) !important; }
-
-.react-autoql-table.tabulator .tabulator-header .tabulator-col,
-.react-autoql-table.tabulator .tabulator-cell {
-  border-color: var(--react-autoql-border-color);
-  background-color: var(--react-autoql-background-color-secondary); }
-
-.react-autoql-table.tabulator .tabulator-header {
-  border-bottom: 2px solid var(--react-autoql-border-color); }
-
-.react-autoql-table.tabulator {
-  background-color: inherit;
-  font-size: 12px;
-  flex: 1; }
-  .react-autoql-table.tabulator.table-condensed .tabulator-tableHolder .tabulator-table .tabulator-row {
-    min-height: 24px; }
-
-.react-autoql-table .tabulator-row {
-  /* user-select: none; This breaks copy/paste */
-  border-bottom: 1px solid var(--react-autoql-border-color);
-  background-color: var(--react-autoql-background-color-secondary);
-  z-index: 1; }
-  .react-autoql-table .tabulator-row:last-child {
-    border-bottom: none; }
-
-.tabulator-cell:not(:first-child) {
-  border-left: 1px solid !important;
-  border-color: rgba(0, 0, 0, 0.06) !important; }
-
-.react-autoql-table .tabulator-tableHolder {
-  background-color: inherit; }
-
-.react-autoql-table-container.resizing {
-  width: 100vw; }
-  .react-autoql-table-container.resizing .react-autoql-table {
-    visibility: hidden; }
-
-.react-autoql-table-container.filtering {
-  min-height: 125px; }
-  .react-autoql-table-container.filtering .filter-tag {
-    display: none; }
-  .react-autoql-table-container.filtering .react-autoql-table .tabulator-col {
-    height: 72px !important; }
-  .react-autoql-table-container.filtering.infinite .tabulator-col.DATE_STRING .tabulator-header-filter,
-  .react-autoql-table-container.filtering .tabulator-col.DRILLDOWN .tabulator-header-filter {
-    display: none; }
-  .react-autoql-table-container.filtering.limited .tabulator-col .tabulator-header-filter,
-  .react-autoql-table-container.filtering.infinite .tabulator-col:not(.DATE_STRING) .tabulator-header-filter {
-    display: inline; }
-  .react-autoql-table-container.filtering .react-autoql-table .tabulator-tableHolder {
-    min-height: calc(100% - 74px) !important;
-    height: calc(100% - 74px) !important;
-    max-height: calc(100% - 74px) !important; }
-
-.react-autoql-table-container:not(.filtering) {
-  min-height: 90px; }
-  .react-autoql-table-container:not(.filtering) .react-autoql-table .tabulator-col {
-    height: auto !important; }
-  .react-autoql-table-container:not(.filtering) .react-autoql-table .tabulator-header-filter {
-    display: none; }
-  .react-autoql-table-container:not(.filtering) .react-autoql-table .tabulator-tableHolder {
-    min-height: calc(100% - 40px) !important;
-    height: calc(100% - 40px) !important;
-    max-height: calc(100% - 40px) !important; }
-
-.react-autoql-table.tabulator .tabulator-header .tabulator-col .tabulator-col-content {
-  padding: 8px 5px; }
-
-.react-autoql-table.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-arrow {
-  opacity: 0;
-  border-left: 4px solid transparent !important;
-  border-right: 4px solid transparent !important;
-  right: 4px;
-  top: calc(50% - 3px); }
-
-.react-autoql-table.tabulator .tabulator-header .tabulator-col:hover .tabulator-col-content .tabulator-arrow {
-  opacity: 1 !important; }
-
-.react-autoql-table.tabulator
-.tabulator-header
-.tabulator-col.tabulator-sortable[aria-sort='desc']
-.tabulator-col-content
-.tabulator-arrow {
-  border-top: 4px solid rgba(0, 0, 0, 0.2) !important; }
-
-.react-autoql-table.tabulator
-.tabulator-header
-.tabulator-col.tabulator-sortable[aria-sort='asc']
-.tabulator-col-content
-.tabulator-arrow,
-.react-autoql-table.tabulator
-.tabulator-header
-.tabulator-col.tabulator-sortable[aria-sort='none']
-.tabulator-col-content
-.tabulator-arrow {
-  border-bottom: 4px solid rgba(0, 0, 0, 0.2) !important; }
-
-.react-autoql-table .tabulator-tableHolder::-webkit-scrollbar {
-  display: unset;
-  opacity: 0;
-  background-color: transparent;
-  width: 7px;
-  height: 7px;
-  -webkit-transition: all 0.3s ease;
-  transition: all 0.3s ease; }
-
-.react-autoql-table .tabulator-tableHolder:hover::-webkit-scrollbar-corner {
-  background-color: transparent; }
-
-.react-autoql-table .tabulator-tableHolder:hover::-webkit-scrollbar-track,
-.react-autoql-table .tabulator-tableHolder:hover::-webkit-scrollbar-track-piece,
-.react-autoql-table .tabulator-tableHolder::-webkit-scrollbar-corner {
-  background-color: transparent; }
-
-.react-autoql-table .tabulator-tableHolder:hover::-webkit-scrollbar-thumb {
-  background-color: rgba(0, 0, 0, 0.2);
-  border-radius: 7px;
-  border: 0px; }
-
-.react-autoql-table .tabulator-header-filter input {
-  border: 1px solid var(--react-autoql-border-color);
-  border-radius: 4px;
-  background: transparent;
-  padding: 4px 9px !important;
-  outline: none !important;
-  text-overflow: ellipsis; }
-
-.react-autoql-table .tabulator-header-filter input:focus {
-  border: 1px solid #28a8e0; }
-
-.tabulator-table .tabulator-row .tabulator-cell {
-  min-height: 20px;
-  height: 28px;
-  line-height: 20px; }
-
-/* Center header titles */
-.react-autoql-table .tabulator-header .tabulator-col {
-  text-align: center !important; }
-
-.react-autoql-table .tabulator-header .tabulator-col-title {
-  padding-left: 10px !important;
-  padding-right: 10px !important; }
-
-.filter-tag {
-  color: #2ecc40;
-  border: 1px solid;
-  padding: 2px 4px;
-  border-radius: 4px;
-  font-weight: 400;
-  font-size: 10px;
-  margin-right: 5px;
-  vertical-align: top;
-  line-height: 21px; }
-
-.comparison-value-positive {
-  color: #2ecc40; }
-
-.comparison-value-negative {
-  color: #e80000; }
-
 .react-autoql-btn {
   border-radius: 4px;
   cursor: pointer;
@@ -776,52 +545,253 @@ span.react-autoql-icon {
     background-color: var(--react-autoql-danger-color, #ca0b00);
     color: var(--react-autoql-text-color-accent); }
 
-::-webkit-scrollbar {
-  visibility: hidden;
-  width: 6px;
-  height: 6px; }
-
-.scrollbar-content-container {
-  position: absolute;
-  height: 100%;
-  width: 100%; }
-
-.thumb-vertical,
-.thumb-horizontal {
-  border-radius: 3px;
-  background-color: var(--react-autoql-highlight-color);
-  opacity: 0.2; }
-
-g.legendOrdinal,
-g.legendOrdinal tspan {
-  stroke-width: 10px;
-  stroke: transparent;
-  letter-spacing: 0;
-  cursor: pointer; }
-
-.axis-label-border,
-.legend-title-border {
-  cursor: pointer;
-  stroke: transparent;
-  opacity: 0.5; }
-  .axis-label-border:hover,
-  .legend-title-border:hover {
-    stroke: var(--react-autoql-accent-color) !important; }
+.react-autoql-table-container {
+  -webkit-transform: translate3d(0, 0, 0);
+  display: flex;
+  flex-direction: column;
+  width: 100% !important;
+  max-width: 100%;
+  max-height: 100%;
+  overflow: hidden;
+  background-color: inherit;
+  position: relative;
+  box-sizing: border-box;
+  flex: 1; }
+  .react-autoql-table-container .table-row-count {
+    flex: 0;
+    width: 100%;
+    font-size: 13px;
+    opacity: 0.6;
+    text-align: center;
+    padding-top: 3px; }
+  .react-autoql-table-container .react-autoql-tabulator-container {
+    position: relative;
+    flex: 1;
+    width: 100%;
+    max-height: 100%;
+    min-height: 100px;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden; }
+    .react-autoql-table-container .react-autoql-tabulator-container .tabulator-cell,
+    .react-autoql-table-container .react-autoql-tabulator-container .tabulator-col {
+      color: var(--react-autoql-text-color-primary); }
+  .react-autoql-table-container.loading {
+    pointer-events: none; }
+  .react-autoql-table-container.hidden {
+    visibility: hidden;
+    position: absolute;
+    pointer-events: none;
+    opacity: 0; }
+  .react-autoql-table-container.empty:not(.filtering) .tabulator-headers {
+    height: 37px !important; }
+  .react-autoql-table-container.empty .react-autoql-table.tabulator {
+    overflow: auto; }
+    .react-autoql-table-container.empty .react-autoql-table.tabulator .tabulator-tableholder {
+      overflow: hidden; }
+    .react-autoql-table-container.empty .react-autoql-table.tabulator .tabulator-header {
+      border: none !important;
+      overflow: visible; }
+      .react-autoql-table-container.empty .react-autoql-table.tabulator .tabulator-header .tabulator-header-contents {
+        overflow: visible; }
+        .react-autoql-table-container.empty .react-autoql-table.tabulator .tabulator-header .tabulator-header-contents .tabulator-headers {
+          border-bottom: 2px solid var(--react-autoql-border-color); }
+          .react-autoql-table-container.empty .react-autoql-table.tabulator .tabulator-header .tabulator-header-contents .tabulator-headers .tabulator-col {
+            background: transparent; }
+  .react-autoql-table-container.resizing {
+    width: 100vw; }
+    .react-autoql-table-container.resizing .react-autoql-table {
+      visibility: hidden;
+      opacity: 0;
+      pointer-events: none; }
+  .react-autoql-table-container.infinite .tabulator-col.DATE_STRING .tabulator-header-filter,
+  .react-autoql-table-container .tabulator-col.DRILLDOWN .tabulator-header-filter {
+    visibility: hidden;
+    opacity: 0;
+    pointer-events: none; }
+  .react-autoql-table-container.limited .tabulator-col .tabulator-header-filter,
+  .react-autoql-table-container.infinite .tabulator-col:not(.DATE_STRING) .tabulator-header-filter {
+    visibility: visible;
+    opacity: 1; }
+  .react-autoql-table-container.filtering {
+    min-height: 125px; }
+    .react-autoql-table-container.filtering .tabulator-header-contents {
+      height: 60px; }
+      .react-autoql-table-container.filtering .tabulator-header-contents .tabulator-col,
+      .react-autoql-table-container.filtering .tabulator-header-contents .tabulator-headers,
+      .react-autoql-table-container.filtering .tabulator-header-contents .tabulator-col-resize-handle {
+        height: 100% !important; }
+    .react-autoql-table-container.filtering .react-autoql-tabulator-container .tabulator-tableholder {
+      min-height: calc(100% - 60px) !important;
+      height: calc(100% - 60px) !important;
+      max-height: calc(100% - 60px) !important; }
+    .react-autoql-table-container.filtering .filter-tag {
+      display: none; }
+    .react-autoql-table-container.filtering.empty .react-autoql-table.tabulator .tabulator-header {
+      border: none; }
+      .react-autoql-table-container.filtering.empty .react-autoql-table.tabulator .tabulator-header .tabulator-headers {
+        border-bottom: 2px solid var(--react-autoql-border-color); }
+  .react-autoql-table-container:not(.filtering) .tabulator-header-contents {
+    height: 35px; }
+  .react-autoql-table-container:not(.filtering) .tabulator-header-filter input {
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none; }
+  .react-autoql-table-container:not(.filtering) .react-autoql-tabulator-container .tabulator-tableholder {
+    min-height: calc(100% - 37px) !important;
+    height: calc(100% - 37px) !important;
+    max-height: calc(100% - 37px) !important; }
+  .react-autoql-table-container .tabulator-header-filter input {
+    border: 1px solid var(--react-autoql-border-color);
+    border-radius: 4px;
+    background: transparent;
+    padding: 4px 9px !important;
+    outline: none !important;
+    text-overflow: ellipsis;
+    visibility: visible;
+    opacity: 1; }
+    .react-autoql-table-container .tabulator-header-filter input:focus {
+      border: 1px solid var(--react-autoql-accent-color); }
+  .react-autoql-table-container.supports-drilldown .tabulator-row .tabulator-cell:not(.pivot-category) {
+    transition: color 0.1s ease;
+    cursor: pointer; }
+  .react-autoql-table-container.supports-drilldown.pivot .react-autoql-table.tabulator .tabulator-row .tabulator-cell:not(.pivot-category):hover,
+  .react-autoql-table-container.supports-drilldown:not(.pivot) .react-autoql-table.tabulator .tabulator-row:hover .tabulator-cell {
+    color: var(--react-autoql-accent-color); }
+  .react-autoql-table-container:not(.supports-drilldown) .react-autoql-table.tabulator .tabulator-row .tabulator-cell {
+    cursor: text; }
+  .react-autoql-table-container.animating .react-autoql-table {
+    visibility: hidden;
+    pointer-events: none;
+    opacity: 0; }
+  .react-autoql-table-container .react-autoql-table.tabulator {
+    background-color: inherit;
+    border-color: transparent;
+    margin-bottom: 0 !important;
+    font-size: 11px; }
+    .react-autoql-table-container .react-autoql-table.tabulator .comparison-value-positive {
+      color: #2ecc40; }
+    .react-autoql-table-container .react-autoql-table.tabulator .comparison-value-negative {
+      color: #e80000; }
+    .react-autoql-table-container .react-autoql-table.tabulator .tabulator-header {
+      border-bottom: 2px solid var(--react-autoql-border-color); }
+      .react-autoql-table-container .react-autoql-table.tabulator .tabulator-header .filter-tag {
+        color: #2ecc40;
+        border: 1px solid;
+        padding: 2px 4px;
+        border-radius: 4px;
+        font-weight: 400;
+        font-size: 10px;
+        margin-right: 5px;
+        vertical-align: top;
+        line-height: 21px;
+        margin-left: -11px; }
+    .react-autoql-table-container .react-autoql-table.tabulator .tabulator-row,
+    .react-autoql-table-container .react-autoql-table.tabulator .tabulator-header,
+    .react-autoql-table-container .react-autoql-table.tabulator .tabulator-headers,
+    .react-autoql-table-container .react-autoql-table.tabulator .tabulator-header .tabulator-col,
+    .react-autoql-table-container .react-autoql-table.tabulator .tabulator-tableholder .tabulator-table {
+      background-color: inherit; }
+    .react-autoql-table-container .react-autoql-table.tabulator .tabulator-row {
+      /* user-select: none; This breaks copy/paste */
+      border-bottom: 1px solid var(--react-autoql-border-color);
+      background-color: var(--react-autoql-background-color-secondary);
+      z-index: 1; }
+      .react-autoql-table-container .react-autoql-table.tabulator .tabulator-row:last-child {
+        border-bottom: none;
+        margin-bottom: 15px; }
+      .react-autoql-table-container .react-autoql-table.tabulator .tabulator-row .tabulator-cell:not(:first-child) {
+        border-left: 1px solid !important;
+        border-color: rgba(0, 0, 0, 0.06) !important; }
+      .react-autoql-table-container .react-autoql-table.tabulator .tabulator-row .tabulator-cell.pivot-category {
+        font-weight: 600; }
+    .react-autoql-table-container .react-autoql-table.tabulator .tabulator-header .tabulator-col {
+      text-align: center !important;
+      border-color: transparent;
+      background-color: var(--react-autoql-background-color-secondary);
+      min-height: 35px; }
+      .react-autoql-table-container .react-autoql-table.tabulator .tabulator-header .tabulator-col .tabulator-col-title {
+        padding-left: 12px !important;
+        padding-right: 15px !important; }
+      .react-autoql-table-container .react-autoql-table.tabulator .tabulator-header .tabulator-col .tabulator-col-content {
+        padding: 8px 5px; }
+        .react-autoql-table-container .react-autoql-table.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-arrow {
+          border-left: 4px solid transparent !important;
+          border-right: 4px solid transparent !important;
+          right: 4px;
+          top: calc(50% - 3px); }
+      .react-autoql-table-container .react-autoql-table.tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover {
+        background-color: var(--react-autoql-hover-color) !important; }
+      .react-autoql-table-container .react-autoql-table.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort='descending'] .tabulator-col-content .tabulator-arrow {
+        border-top: 4px solid var(--react-autoql-text-color-primary) !important;
+        opacity: 0.5; }
+      .react-autoql-table-container .react-autoql-table.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort='ascending'] .tabulator-col-content .tabulator-arrow {
+        border-bottom: 4px solid var(--react-autoql-text-color-primary) !important;
+        opacity: 0.5; }
+      .react-autoql-table-container .react-autoql-table.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort='none'] .tabulator-col-content .tabulator-arrow {
+        border-bottom: 4px solid var(--react-autoql-text-color-primary) !important;
+        opacity: 0; }
+      .react-autoql-table-container .react-autoql-table.tabulator .tabulator-header .tabulator-col:hover .tabulator-col-content .tabulator-arrow {
+        opacity: 1 !important; }
+    .react-autoql-table-container .react-autoql-table.tabulator .tabulator-cell {
+      border-color: var(--react-autoql-border-color);
+      background-color: var(--react-autoql-background-color-secondary); }
+    .react-autoql-table-container .react-autoql-table.tabulator .tabulator-tableholder {
+      background-color: inherit; }
 
-.axis-scaler-border {
-  cursor: pointer;
-  stroke: transparent;
-  opacity: 0.5; }
-  .axis-scaler-border:hover {
-    stroke: transparent !important; }
+.react-autoql-table-date-picker {
+  background: var(--react-autoql-background-color-secondary);
+  color: var(--react-autoql-text-color-primary);
+  padding: 15px;
+  padding-bottom: 5px;
+  display: flex;
+  justify-content: center;
+  align-items: stretch;
+  flex-direction: column; }
+  .react-autoql-table-date-picker h3 {
+    margin-top: 0;
+    margin-left: 5px; }
 
-.react-autoql-axis-selector-arrow {
-  opacity: 1 !important; }
+.tabulator-alert {
+  display: none !important; }
 
-g.legendOrdinal .legendTitle tspan {
-  letter-spacing: 0.04em !important;
-  font-size: 12px;
-  cursor: default; }
+.table-loader {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  pointer-events: none;
+  background-color: transparent;
+  color: var(--react-autoql-accent-color); }
+  .table-loader.table-placeholder {
+    color: var(--react-autoql-text-color-primary);
+    font-size: 12px;
+    opacity: 0.5;
+    top: 20px; }
+  .table-loader.table-page-loader {
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    pointer-events: none; }
+    .table-loader.table-page-loader .page-loader-spinner {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 40px;
+      height: 40px;
+      background-color: var(--react-autoql-background-color-secondary);
+      border: 1px solid var(--react-autoql-border-color);
+      box-shadow: var(--react-autoql-box-shadow-color, rgba(0, 0, 0, 0.15)) 0px 8px 24px;
+      border-radius: 4px; }
+      .table-loader.table-page-loader .page-loader-spinner .spinner-loader {
+        margin: 0;
+        height: 17px;
+        width: 17px; }
+  .table-loader.table-scroll-loader {
+    bottom: 20px;
+    width: 100%;
+    z-index: 0; }
 
 .content {
   margin: 2rem; }
@@ -835,10 +805,14 @@ g.legendOrdinal .legendTitle tspan {
   align-items: center;
   position: relative;
   cursor: pointer; }
-  .react-autoql-checkbox .react-autoql-checkbox--switch__input:checked,
-  .react-autoql-checkbox .react-autoql-checkbox__input:checked {
-    border-color: var(--react-autoql-accent-color, #26a7df);
+  .react-autoql-checkbox .react-autoql-checkbox--switch__input:checked:not(:disabled),
+  .react-autoql-checkbox .react-autoql-checkbox__input:checked:not(:disabled) {
+    border-color: var(--react-autoql-accent-color, #26a7df) !important;
     background: var(--react-autoql-accent-color, #26a7df); }
+  .react-autoql-checkbox .react-autoql-checkbox--switch__input:checked:disabled,
+  .react-autoql-checkbox .react-autoql-checkbox__input:checked:disabled {
+    border-color: var(--react-autoql-background-color-disabled-dark) !important;
+    background: var(--react-autoql-background-color-disabled-dark); }
 
 .react-autoql-checkbox__label {
   flex-shrink: 0;
@@ -855,11 +829,12 @@ g.legendOrdinal .legendTitle tspan {
   -webkit-appearance: none;
   -moz-appearance: none;
   outline: none;
-  background: transparent;
+  background: var(--react-autoql-background-color-checkbox);
   border: 1px solid;
-  border-color: var(--react-autoql-accent-color, #26a7df);
   border-radius: 2px;
   cursor: pointer; }
+  .react-autoql-checkbox__input:not(.react-autoql-checkbox--switch__input) {
+    border-color: var(--react-autoql-accent-color, #26a7df); }
 
 .react-autoql-checkbox__input::before {
   content: ' ';
@@ -893,14 +868,15 @@ g.legendOrdinal .legendTitle tspan {
   bottom: 7px; }
 
 .react-autoql-checkbox__input:disabled {
-  border-color: #5a5358;
+  border-color: var(--react-autoql-background-color-disabled-dark) !important;
+  background: var(--react-autoql-background-color-disabled) !important;
   cursor: default; }
 
 .react-autoql-checkbox__input:disabled::before {
-  background-color: #5a5358; }
+  background-color: var(--react-autoql-background-color-disabled-dark); }
 
 .react-autoql-checkbox__input:disabled + .react-autoql-checkbox__label {
-  color: gray;
+  color: var(--react-autoql-background-color-disabled-dark);
   cursor: default; }
 
 .react-autoql-checkbox--has-error__input {
@@ -927,81 +903,335 @@ g.legendOrdinal .legendTitle tspan {
   bottom: 2px;
   left: 2px;
   border-radius: 50%;
-  background: var(--react-autoql-text-color-accent); }
+  background: #fff; }
 
-.react-autoql-checkbox--switch__input:checked
-+ .react-autoql-checkbox--switch__label::after {
+.react-autoql-checkbox--switch__input:checked + .react-autoql-checkbox--switch__label::after {
   content: 'on'; }
 
-.react-autoql-checkbox--switch__input:checked::before {
-  right: 2px;
-  left: 18px;
-  top: 2px;
-  bottom: 2px; }
+.react-autoql-checkbox--switch__input:checked::before {
+  right: 2px;
+  left: 18px;
+  top: 2px;
+  bottom: 2px; }
+
+.react-autoql-checkbox-label {
+  padding-left: 6px;
+  line-height: 100%; }
+
+.react-autoql-modal-container .react-autoql-checkbox__input:not(.react-autoql-checkbox--switch__input),
+.react-autoql-drawer .react-autoql-checkbox__input:not(.react-autoql-checkbox--switch__input) {
+  border-color: var(--react-autoql-accent-color);
+  background: var(--react-autoql-background-color-secondary); }
+
+.react-autoql-modal-container .react-autoql-checkbox__input::before:not(.react-autoql-checkbox--switch__input),
+.react-autoql-drawer .react-autoql-checkbox__input::before:not(.react-autoql-checkbox--switch__input) {
+  background: var(--react-autoql-accent-color); }
+
+.react-autoql-list-item {
+  padding: 0 20px;
+  display: flex;
+  justify-content: space-between;
+  line-height: 36px;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  cursor: default; }
+  .react-autoql-list-item:hover {
+    background: var(--react-autoql-hover-color); }
+  .react-autoql-list-item.selected {
+    background: var(--react-autoql-hover-color); }
+  .react-autoql-list-item.disabled {
+    opacity: 0.4;
+    pointer-events: none; }
+
+.col-visibility-header {
+  padding-left: 20px;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 10px;
+  font-weight: 600;
+  font-size: 15px; }
+
+.react-autoql-list-item:not(:last-child) {
+  border-bottom: 1px solid #d3d3d34a; }
+
+.scrollbar-content-container {
+  position: absolute;
+  height: 100%;
+  width: 100%; }
+
+.thumb-vertical,
+.thumb-horizontal {
+  border-radius: 3px;
+  background-color: var(--react-autoql-highlight-color);
+  opacity: 0.2; }
+
+.react-autoql-select {
+  border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
+  border-radius: 4px;
+  background: var(--react-autoql-background-color-secondary, white);
+  display: inline-block;
+  font-size: 13px;
+  line-height: 32px;
+  height: 34px;
+  margin: 0 3px;
+  padding: 0 11px;
+  color: var(--react-autoql-accent-color, #26a7df);
+  transition: all 0.2s ease;
+  cursor: pointer; }
+  .react-autoql-select:hover {
+    border-color: var(--react-autoql-accent-color, #26a7df); }
+
+.react-autoql-select-popup-container {
+  background: var(--react-autoql-background-color-secondary, white);
+  padding: 10px 0;
+  max-height: 300px;
+  overflow-y: auto; }
+  .react-autoql-select-popup-container .react-autoql-select-option.active {
+    background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.04)); }
+  .react-autoql-select-popup-container .react-autoql-select-popup {
+    list-style-type: none;
+    width: 100%;
+    margin: 0;
+    padding: 0; }
+    .react-autoql-select-popup-container .react-autoql-select-popup li {
+      color: var(--react-autoql-text-color-primary);
+      width: 100%;
+      height: 35px;
+      line-height: 35px;
+      padding: 0 20px;
+      cursor: pointer; }
+      .react-autoql-select-popup-container .react-autoql-select-popup li:hover {
+        background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.04)); }
+
+g.legendOrdinal,
+g.legendOrdinal tspan {
+  stroke: transparent;
+  letter-spacing: 0;
+  cursor: pointer; }
+
+.axis-label-border.hidden,
+.legend-title-border.hidden {
+  stroke: transparent;
+  opacity: 0; }
+
+.axis-label-border:not(.hidden),
+.legend-title-border:not(.hidden) {
+  cursor: pointer;
+  stroke: transparent;
+  opacity: 0.5; }
+  .axis-label-border:not(.hidden):hover,
+  .legend-title-border:not(.hidden):hover {
+    stroke: var(--react-autoql-accent-color) !important; }
+
+.axis-scaler-border {
+  cursor: pointer;
+  stroke: transparent;
+  opacity: 0.5; }
+  .axis-scaler-border:hover {
+    stroke: transparent !important; }
+
+.react-autoql-axis-selector-arrow {
+  opacity: 1 !important; }
 
-.react-autoql-checkbox-label {
-  padding-left: 6px;
-  line-height: 100%; }
+.number-axis-selector-popover .number-axis-selector-popover-content {
+  display: flex;
+  flex-direction: column;
+  background: var(--react-autoql-background-color-secondary);
+  color: var(--react-autoql-text-color-primary);
+  padding: 10px;
+  z-index: 9999;
+  flex: 1; }
+  .number-axis-selector-popover .number-axis-selector-popover-content h4 {
+    margin: 0;
+    margin-top: 5px;
+    margin-bottom: 15px; }
+  .number-axis-selector-popover .number-axis-selector-popover-content .number-selector-list-checkbox {
+    margin-left: 10px; }
+  .number-axis-selector-popover .number-axis-selector-popover-content .number-selector-field-group-container {
+    white-space: nowrap; }
+    .number-axis-selector-popover .number-axis-selector-popover-content .number-selector-field-group-container .number-selector-field-group {
+      display: inline-block;
+      vertical-align: top; }
+      .number-axis-selector-popover .number-axis-selector-popover-content .number-selector-field-group-container .number-selector-field-group:not(:last-of-type) {
+        padding-right: 8px; }
+  .number-axis-selector-popover .number-axis-selector-popover-content .axis-agg-type-selector {
+    width: 175px;
+    border-left: 1px solid var(--react-autoql-border-color);
+    padding: 10px 20px; }
+    .number-axis-selector-popover .number-axis-selector-popover-content .axis-agg-type-selector .agg-type-selector-fields {
+      font-size: 12px;
+      font-style: italic; }
+    .number-axis-selector-popover .number-axis-selector-popover-content .axis-agg-type-selector .react-autoql-radio-btn-container-list p {
+      font-size: 12px;
+      margin: 4px 0px; }
+      .number-axis-selector-popover .number-axis-selector-popover-content .axis-agg-type-selector .react-autoql-radio-btn-container-list p [type='radio']:checked + label,
+      .number-axis-selector-popover .number-axis-selector-popover-content .axis-agg-type-selector .react-autoql-radio-btn-container-list p [type='radio']:not(:checked) + label {
+        padding-left: 22px;
+        line-height: 17px; }
+        .number-axis-selector-popover .number-axis-selector-popover-content .axis-agg-type-selector .react-autoql-radio-btn-container-list p [type='radio']:checked + label:before,
+        .number-axis-selector-popover .number-axis-selector-popover-content .axis-agg-type-selector .react-autoql-radio-btn-container-list p [type='radio']:not(:checked) + label:before {
+          width: 15px;
+          height: 15px; }
+        .number-axis-selector-popover .number-axis-selector-popover-content .axis-agg-type-selector .react-autoql-radio-btn-container-list p [type='radio']:checked + label:after,
+        .number-axis-selector-popover .number-axis-selector-popover-content .axis-agg-type-selector .react-autoql-radio-btn-container-list p [type='radio']:not(:checked) + label:after {
+          width: 9px;
+          height: 9px; }
+  .number-axis-selector-popover .number-axis-selector-popover-content .axis-select-option.active {
+    background: var(--react-autoql-hover-color);
+    outline: none !important; }
+  .number-axis-selector-popover .number-axis-selector-popover-content .react-autoql-list-item .react-autoql-checkbox {
+    margin-left: 20px; }
+  .number-axis-selector-popover .number-axis-selector-popover-content .react-autoql-checkbox-tick {
+    left: 2px; }
+  .number-axis-selector-popover .number-axis-selector-popover-content .react-autoql-checkbox__input {
+    width: 16px;
+    height: 16px; }
+  .number-axis-selector-popover .number-axis-selector-popover-content .react-autoql-list-item {
+    padding: 0;
+    padding-right: 10px;
+    font-size: 12px;
+    line-height: 25px;
+    cursor: default; }
+    .number-axis-selector-popover .number-axis-selector-popover-content .react-autoql-list-item.checked .agg-type-symbol {
+      color: var(--react-autoql-accent-color); }
+  .number-axis-selector-popover .number-axis-selector-popover-content .number-selector-header {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 5px;
+    padding: 10px;
+    font-size: 12px;
+    border-bottom: 1px solid var(--react-autoql-border-color);
+    background: var(--react-autoql-background-color-primary); }
+    .number-axis-selector-popover .number-axis-selector-popover-content .number-selector-header .number-selector-header-title {
+      font-weight: 600; }
+      .number-axis-selector-popover .number-axis-selector-popover-content .number-selector-header .number-selector-header-title svg {
+        stroke-width: 0.5px; }
+  .number-axis-selector-popover .number-axis-selector-popover-content .axis-series-selector .react-autoql-selectable-list {
+    margin-bottom: 10px; }
+  .number-axis-selector-popover .number-axis-selector-popover-content .react-autoql-select.agg-type-symbol {
+    display: inline-block;
+    font-weight: 600;
+    font-size: 12px;
+    line-height: 22px;
+    height: 22px;
+    margin: 3px 10px;
+    padding: 0 8px; }
 
-.react-autoql-modal-container
-.react-autoql-checkbox__input:not(.react-autoql-checkbox--switch__input),
-.react-autoql-drawer
-.react-autoql-checkbox__input:not(.react-autoql-checkbox--switch__input) {
-  border-color: var(--react-autoql-accent-color); }
+.number-axis-selector-popover .axis-selector-apply-btn-container .axis-selector-apply-btn {
+  margin: 0;
+  width: 100%; }
 
-.react-autoql-modal-container
-.react-autoql-checkbox__input::before:not(.react-autoql-checkbox--switch__input),
-.react-autoql-drawer
-.react-autoql-checkbox__input::before:not(.react-autoql-checkbox--switch__input) {
-  background: var(--react-autoql-accent-color); }
+.agg-type-symbol-select .react-autoql-select-popup li {
+  font-size: 12px;
+  line-height: 28px;
+  height: 28px; }
+  .agg-type-symbol-select .react-autoql-select-popup li .agg-select-list-symbol {
+    font-weight: 600;
+    margin-right: 10px; }
 
-.react-autoql-list-item {
-  padding: 0 20px;
-  display: flex;
-  justify-content: space-between;
-  line-height: 36px;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none; }
-  .react-autoql-list-item:hover {
-    background: var(--react-autoql-hover-color); }
-  .react-autoql-list-item.selected {
-    background: var(--react-autoql-hover-color); }
+.axis-selector-content {
+  list-style-type: none;
+  width: 100%;
+  margin: 0;
+  padding: 0; }
+  .axis-selector-content li {
+    color: var(--react-autoql-text-color-primary);
+    width: 100%;
+    height: 30px;
+    line-height: 30px;
+    padding: 0 15px;
+    cursor: pointer; }
+    .axis-selector-content li:hover {
+      background: rgba(0, 0, 0, 0.05); }
 
-.col-visibility-header {
-  padding-left: 20px;
+.string-axis-selector-popover-content {
   display: flex;
-  justify-content: space-between;
-  margin-bottom: 10px;
-  font-weight: 600;
-  font-size: 15px; }
+  flex-direction: column;
+  background: var(--react-autoql-background-color-secondary);
+  color: var(--react-autoql-text-color-primary);
+  padding: 5px;
+  z-index: 9999; }
+  .string-axis-selector-popover-content .string-select-list-item {
+    font-size: 12px;
+    line-height: 28px; }
+    .string-axis-selector-popover-content .string-select-list-item.active {
+      background: var(--react-autoql-accent-color);
+      color: var(--react-autoql-text-color-accent); }
 
-.react-autoql-list-item:not(:last-child) {
-  border-bottom: 1px solid #d3d3d34a; }
+g.legendOrdinal .legendTitle tspan {
+  letter-spacing: 0.04em !important;
+  font-size: 12px;
+  cursor: default; }
 
 .react-autoql-chart-container {
   position: relative;
   width: 100%;
+  height: 100%;
+  max-height: 100%;
   flex-grow: 1;
   flex-shrink: 1;
+  flex-basis: 100vh;
   overflow: hidden;
   color: var(--react-autoql-text-color-primary);
   background: var(--react-autoql-background-color-secondary);
   transition: opacity 0.2s ease;
   /* These are not inline styles since they do not apply to saved PNG charts */ }
+  .react-autoql-chart-container.hidden {
+    position: absolute;
+    visibility: hidden;
+    flex: 0 0 0;
+    opacity: 0;
+    flex-basis: 0 !important;
+    pointer-events: none; }
   .react-autoql-chart-container svg {
-    background: transparent !important; }
+    background: transparent !important;
+    color: var(--react-autoql-text-color-primary) !important; }
   .react-autoql-chart-container.loading {
     opacity: 0;
     transition: none; }
+  .react-autoql-chart-container.loading-rows {
+    pointer-events: none; }
+  .react-autoql-chart-container .legend-hidden-field-arrow {
+    outline: none !important; }
+  .react-autoql-chart-container .legendCells .cell.hidden text {
+    color: var(--react-autoql-background-disabled);
+    opacity: 0.4 !important; }
+  .react-autoql-chart-container .legendCells .cell.hidden line.swatch,
+  .react-autoql-chart-container .legendCells .cell.hidden path.swatch {
+    fill: var(--react-autoql-background-color-disabled) !important;
+    stroke: var(--react-autoql-background-color-disabled) !important; }
+  .react-autoql-chart-container .legendCells .cell:hover path.swatch {
+    stroke-width: 2px; }
+  .react-autoql-chart-container .legendCells .cell:hover line.swatch {
+    stroke-width: 3px; }
+  .react-autoql-chart-container .legendCells .cell text:hover {
+    font-weight: 600; }
+  .react-autoql-chart-container path.swatch {
+    outline: none !important;
+    fill-opacity: 1; }
+    .react-autoql-chart-container path.swatch:hover, .react-autoql-chart-container path.swatch.active {
+      fill-opacity: 0.7; }
+  .react-autoql-chart-container line.swatch {
+    stroke-width: 2px;
+    outline: none !important; }
+    .react-autoql-chart-container line.swatch:hover, .react-autoql-chart-container line.swatch.active {
+      stroke-width: 3px; }
+  .react-autoql-chart-container .bar,
+  .react-autoql-chart-container .column,
+  .react-autoql-chart-container .slice,
+  .react-autoql-chart-container .stacked-bar,
+  .react-autoql-chart-container .stacked-column {
+    cursor: pointer;
+    stroke: transparent;
+    stroke-width: 10px; }
   .react-autoql-chart-container .bar,
   .react-autoql-chart-container .column,
   .react-autoql-chart-container .line,
   .react-autoql-chart-container .slice,
   .react-autoql-chart-container .stacked-area,
   .react-autoql-chart-container .stacked-bar,
-  .react-autoql-chart-container .stacked-column,
-  .react-autoql-chart-container .swatch {
+  .react-autoql-chart-container .stacked-column {
     transition: fill-opacity 0.3s ease;
     fill-opacity: 1 !important;
     outline: none !important; }
@@ -1017,18 +1247,29 @@ g.legendOrdinal .legendTitle tspan {
     .react-autoql-chart-container .stacked-bar:hover,
     .react-autoql-chart-container .stacked-bar.active,
     .react-autoql-chart-container .stacked-column:hover,
-    .react-autoql-chart-container .stacked-column.active,
-    .react-autoql-chart-container .swatch:hover,
-    .react-autoql-chart-container .swatch.active {
+    .react-autoql-chart-container .stacked-column.active {
       fill-opacity: 0.7 !important; }
-  .react-autoql-chart-container .line-dot,
+  .react-autoql-chart-container .line-dot {
+    outline: none !important;
+    stroke-linecap: round;
+    stroke-linejoin: round; }
+    .react-autoql-chart-container .line-dot.hidden-dot .line-dot-inner-circle {
+      transition: opacity 0.2s ease;
+      fill: currentColor !important; }
+    .react-autoql-chart-container .line-dot:not(.hidden-dot) .line-dot-inner-circle {
+      fill: var(--react-autoql-background-color-secondary) !important; }
+    .react-autoql-chart-container .line-dot:not(.hidden-dot) .line-dot-outer-circle,
+    .react-autoql-chart-container .line-dot:not(.hidden-dot) .line-dot-inner-circle {
+      transition: fill 0.3s ease, stroke 0.3s ease; }
+    .react-autoql-chart-container .line-dot:hover .line-dot-inner-circle,
+    .react-autoql-chart-container .line-dot.active .line-dot-inner-circle {
+      fill: currentColor !important;
+      opacity: 1 !important; }
   .react-autoql-chart-container .vertex-dot {
     transition: opacity 0.3s ease;
     opacity: 0 !important;
     outline: none !important; }
-    .react-autoql-chart-container .line-dot:hover, .react-autoql-chart-container .line-dot.active,
-    .react-autoql-chart-container .vertex-dot:hover,
-    .react-autoql-chart-container .vertex-dot.active {
+    .react-autoql-chart-container .vertex-dot:hover, .react-autoql-chart-container .vertex-dot.active {
       opacity: 1 !important; }
   .react-autoql-chart-container .square {
     transition: fill 0.2s ease;
@@ -1044,10 +1285,16 @@ g.legendOrdinal .legendTitle tspan {
     outline: none !important; }
     .react-autoql-chart-container .circle:hover, .react-autoql-chart-container .circle.active {
       fill-opacity: 1 !important; }
-  .react-autoql-chart-container g.tick {
-    transition: opacity 0.3s ease; }
+  .react-autoql-chart-container g.tick text {
+    cursor: default; }
+  .react-autoql-chart-container g.tick line {
+    pointer-events: none; }
+  .react-autoql-chart-container .line,
+  .react-autoql-chart-container .line-outer {
+    pointer-events: none; }
   .react-autoql-chart-container .react-autoql-heatmap-chart g.tick line,
   .react-autoql-chart-container .react-autoql-bubble-chart g.tick line {
+    pointer-events: none;
     opacity: 0 !important; }
   .react-autoql-chart-container .axis {
     font-family: inherit; }
@@ -1055,56 +1302,6 @@ g.legendOrdinal .legendTitle tspan {
     font-size: 12px;
     font-weight: 600; }
 
-.axis-selector-container {
-  background: var(--react-autoql-background-color-secondary);
-  color: var(--react-autoql-text-color-primary);
-  z-index: 9999;
-  padding: 5px 0;
-  min-width: 150px; }
-  .axis-selector-container .axis-select-option.active {
-    background: var(--react-autoql-hover-color);
-    outline: none !important; }
-  .axis-selector-container .react-autoql-checkbox {
-    margin-left: 20px; }
-    .axis-selector-container .react-autoql-checkbox .react-autoql-checkbox__input {
-      width: 18px;
-      height: 18px; }
-  .axis-selector-container .react-autoql-list-item {
-    padding-left: 25px;
-    padding-right: 15px;
-    font-size: 12px;
-    line-height: 28px; }
-  .axis-selector-container .string-select-list-item {
-    font-size: 12px;
-    line-height: 28px; }
-    .axis-selector-container .string-select-list-item.active {
-      background: rgba(0, 0, 0, 0.04); }
-  .axis-selector-container .number-selector-header {
-    margin-top: 10px;
-    padding: 0px 18px;
-    font-size: 12px;
-    padding-bottom: 7px;
-    font-weight: 500;
-    opacity: 0.6; }
-  .axis-selector-container .axis-selector-content {
-    list-style-type: none;
-    width: 100%;
-    margin: 0;
-    padding: 0; }
-    .axis-selector-container .axis-selector-content li {
-      color: var(--react-autoql-text-color-primary);
-      width: 100%;
-      height: 30px;
-      line-height: 30px;
-      padding: 0 15px;
-      cursor: pointer; }
-      .axis-selector-container .axis-selector-content li:hover {
-        background: rgba(0, 0, 0, 0.05); }
-
-.axis-selector-apply-btn {
-  background: var(--react-autoql-background-color-secondary);
-  padding: 5px; }
-
 .chart-loader {
   position: absolute;
   display: flex;
@@ -1114,7 +1311,8 @@ g.legendOrdinal .legendTitle tspan {
   opacity: 0.6;
   background-color: var(--react-autoql-background-color-primary);
   color: var(--react-autoql-accent-color);
-  border-radius: 10%; }
+  border-radius: 10%;
+  pointer-events: none; }
   .chart-loader.chart-page-loader {
     top: 25%;
     bottom: 0;
@@ -1123,44 +1321,6 @@ g.legendOrdinal .legendTitle tspan {
     width: 40px;
     height: 40px; }
 
-.react-autoql-select {
-  border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
-  border-radius: 4px;
-  background: var(--react-autoql-background-color-secondary, white);
-  display: inline-block;
-  font-size: 13px;
-  line-height: 32px;
-  height: 34px;
-  margin: 0 3px;
-  padding: 0 11px;
-  color: var(--react-autoql-accent-color, #26a7df);
-  transition: all 0.2s ease;
-  cursor: pointer; }
-  .react-autoql-select:hover {
-    border-color: var(--react-autoql-accent-color, #26a7df); }
-
-.react-autoql-select-popup-container {
-  background: var(--react-autoql-background-color-secondary, white);
-  padding: 10px 0;
-  max-height: 300px;
-  overflow-y: auto; }
-  .react-autoql-select-popup-container .react-autoql-select-option.active {
-    background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.04)); }
-  .react-autoql-select-popup-container .react-autoql-select-popup {
-    list-style-type: none;
-    width: 100%;
-    margin: 0;
-    padding: 0; }
-    .react-autoql-select-popup-container .react-autoql-select-popup li {
-      color: var(--react-autoql-text-color-primary);
-      width: 100%;
-      height: 35px;
-      line-height: 35px;
-      padding: 0 20px;
-      cursor: pointer; }
-      .react-autoql-select-popup-container .react-autoql-select-popup li:hover {
-        background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.04)); }
-
 
 @import url("https://fonts.googleapis.com/icon?family=Material+Icons");
 .react-autoql-response-content-container {
@@ -1193,9 +1353,11 @@ g.legendOrdinal .legendTitle tspan {
   height: 100%;
   width: 100%; }
 
-.react-autoql-response-content-container.table::-webkit-scrollbar {
-  width: 0;
-  height: 0; }
+.react-autoql-response-content-container.chart {
+  width: 100vw;
+  max-width: 100%;
+  flex: 1 1 100vh;
+  overflow: hidden; }
 
 .react-autoql-suggestion-btn {
   padding: 6px 14px;
@@ -1285,13 +1447,6 @@ g.legendOrdinal .legendTitle tspan {
   .query-output-footer.bottom {
     justify-content: space-between; }
 
-.query-output-table-row-count {
-  width: 100%;
-  padding-top: 3px;
-  font-size: 13px;
-  opacity: 0.6;
-  text-align: center; }
-
 .dashboard-data-limit-warning-icon {
   color: var(--react-autoql-warning-color) !important;
   margin-left: 10px;
@@ -1373,26 +1528,29 @@ g.legendOrdinal .legendTitle tspan {
   line-height: 22px;
   font-size: 13px;
   padding: 7px 15px;
-  transition: all 0.2s ease !important;
+  transition: left 0.2s ease, top 0.2s ease !important;
   text-align: left !important;
   opacity: 1 !important;
-  z-index: 99999 !important;
-  /* necessary to show up on top of rc drawer */ }
+  z-index: 999999 !important;
+  /* necessary to show up on top of rc drawer */
+  max-width: 300px; }
 
-.single-value-response-container {
-  width: 100%;
-  text-align: center; }
-  .single-value-response-container .single-value-response {
-    color: inherit;
-    cursor: unset;
-    font-size: 20px; }
-    .single-value-response-container .single-value-response:hover {
-      color: inherit; }
-  .single-value-response-container .single-value-response.with-drilldown:hover {
-    color: inherit;
-    text-decoration: underline;
-    font-weight: 600;
-    cursor: pointer; }
+.single-value-response-flex-container {
+  flex: 1; }
+  .single-value-response-flex-container .single-value-response-container {
+    width: 100%;
+    text-align: center; }
+    .single-value-response-flex-container .single-value-response-container .single-value-response {
+      color: inherit;
+      cursor: unset;
+      font-size: 20px; }
+      .single-value-response-flex-container .single-value-response-container .single-value-response:hover {
+        color: inherit; }
+    .single-value-response-flex-container .single-value-response-container .single-value-response.with-drilldown:hover {
+      color: inherit;
+      text-decoration: underline;
+      font-weight: 600;
+      cursor: pointer; }
 
 .react-autoql-query-validation-container {
   width: 100%; }
@@ -1487,6 +1645,8 @@ g.legendOrdinal .legendTitle tspan {
   color: var(--react-autoql-text-color-primary);
   cursor: pointer;
   outline: none !important; }
+  .react-autoql-toolbar-btn.filter-btn {
+    line-height: 24px; }
   .react-autoql-toolbar-btn.selected {
     color: var(--react-autoql-accent-color); }
 
@@ -1555,6 +1715,7 @@ g.legendOrdinal .legendTitle tspan {
 .ReactModal__Content {
   display: flex;
   flex-direction: column;
+  overflow: hidden !important;
   transform: scale(0);
   transition: all 0.2s ease-in-out;
   color: var(--react-autoql-text-color-primary);
@@ -1584,6 +1745,13 @@ g.legendOrdinal .legendTitle tspan {
 .ReactModal__Overlay--before-close .ReactModal__Content {
   transform: scale(0); }
 
+.react-autoql-modal-content {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  overflow: hidden; }
+
 .react-autoql-modal-header {
   position: relative;
   text-align: center;
@@ -1602,9 +1770,8 @@ g.legendOrdinal .legendTitle tspan {
 .react-autoql-modal-body {
   display: flex;
   flex-direction: column;
-  padding: 25px;
-  flex: 1;
-  overflow: hidden; }
+  padding: 20px 10px;
+  flex: 1; }
   .react-autoql-modal-body h3 {
     color: var(--react-autoql-text-color-primary); }
 
@@ -2236,8 +2403,8 @@ g.legendOrdinal .legendTitle tspan {
 .react-autoql-notification-list-container {
   display: flex;
   flex-direction: column;
-  height: 100%;
-  background: var(--react-autoql-background-color-primary); }
+  background: var(--react-autoql-background-color-primary);
+  height: 100%; }
   .react-autoql-notification-list-container .notification-feed-list {
     padding: 0 20px;
     padding-top: 0; }
@@ -2295,6 +2462,13 @@ g.legendOrdinal .legendTitle tspan {
   color: var(--react-autoql-text-color-primary);
   padding-top: 20px;
   height: 100%; }
+  .react-autoql-notification-settings .empty-list-message {
+    color: var(--react-autoql-text-color-primary);
+    text-align: center;
+    margin-top: 75px; }
+    .react-autoql-notification-settings .empty-list-message .empty-list-img {
+      width: 250px;
+      height: 250px; }
   .react-autoql-notification-settings .react-autoql-notification-settings-container {
     margin: 20px;
     margin-top: 10px;
@@ -2662,10 +2836,6 @@ g.legendOrdinal .legendTitle tspan {
     margin-bottom: 6px; }
     .chat-single-message-container .chat-message-bubble.text {
       max-width: 85%; }
-    .chat-single-message-container .chat-message-bubble.full-width {
-      width: calc(100% - 20px) !important;
-      min-width: calc(100% - 20px) !important;
-      max-width: calc(100% - 20px) !important; }
     .chat-single-message-container .chat-message-bubble.active {
       border: 1px solid #c3c3c3; }
     .chat-single-message-container .chat-message-bubble .chat-message-toolbars-container {
@@ -2718,17 +2888,28 @@ g.legendOrdinal .legendTitle tspan {
     transform-origin: 0% 100%; } }
 
 .chat-content-scroll-container {
-  flex: 1 0 0px; }
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  padding-bottom: 158px; }
 
 .react-autoql-drawer .response-loading-container {
   position: absolute;
-  bottom: 45px;
-  left: 20px; }
+  bottom: 102px;
+  left: 20px;
+  z-index: 1; }
 
 .react-autoql-drawer .chat-bar-container {
-  flex: 0 0 auto;
-  position: relative;
-  padding: 10px; }
+  position: absolute;
+  bottom: 0;
+  padding: 10px;
+  padding-top: 0;
+  height: 92px;
+  width: 100%;
+  background: var(--react-autoql-background-color-primary);
+  -webkit-clip-path: inset(-200px 0px 0px 0px);
+          clip-path: inset(-200px 0px 0px 0px);
+  box-shadow: 0 0px 3px 10px var(--react-autoql-background-color-primary); }
 
 .react-autoql-drawer .watermark {
   color: var(--react-autoql-text-color-placeholder);
@@ -2997,12 +3178,6 @@ g.legendOrdinal .legendTitle tspan {
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: auto; }
-  .data-explorer-section .custom-scrollbar-view:hover::-webkit-scrollbar-corner {
-    background-color: transparent; }
-  .data-explorer-section .custom-scrollbar-view:hover::-webkit-scrollbar-track,
-  .data-explorer-section .custom-scrollbar-view:hover::-webkit-scrollbar-track-piece,
-  .data-explorer-section .custom-scrollbar-view::-webkit-scrollbar-corner {
-    background-color: transparent; }
   .data-explorer-section .data-explorer-data-preview {
     flex: 0 0 auto;
     overflow: hidden;
@@ -3086,14 +3261,14 @@ g.legendOrdinal .legendTitle tspan {
       stroke: currentColor; }
 
 .data-explorer-page-container {
+  position: absolute;
   height: 100%;
+  width: 100%;
   padding: 0;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   flex-wrap: nowrap;
-  flex: 1 1;
-  min-height: 0;
   color: var(--react-autoql-text-color-primary); }
   .data-explorer-page-container .data-explorer-section,
   .data-explorer-page-container .data-explorer-intro-message {
@@ -3134,11 +3309,11 @@ g.legendOrdinal .legendTitle tspan {
     margin-right: 5px; }
   .data-explorer-page-container .data-explorer-result-container {
     color: var(--react-autoql-text-color-primary);
-    flex: 1;
     width: 100%;
     overflow: auto;
     padding-left: 5px;
-    min-height: 0; }
+    min-height: 0;
+    height: calc(100% - 130px); }
     .data-explorer-page-container .data-explorer-result-container .data-explorer-sections-container {
       position: relative;
       height: 100%;
@@ -3501,7 +3676,10 @@ g.legendOrdinal .legendTitle tspan {
 
 .react-autoql-drawer {
   font-family: var(--react-autoql-font-family), sans-serif;
-  line-height: 22px; }
+  line-height: 22px;
+  outline: none !important; }
+  .react-autoql-drawer .react-autoql-notification-list-container {
+    height: calc(100% - 60px); }
 
 .react-autoql-drawer.disable-selection {
   -webkit-user-select: none;
@@ -3511,11 +3689,9 @@ g.legendOrdinal .legendTitle tspan {
 .react-autoql-drawer .react-autoql-drawer-content-container {
   width: 100%;
   height: 100%;
-  display: flex;
   background: var(--react-autoql-background-color-primary);
   overflow: hidden;
-  border-radius: 4px;
-  flex-direction: column; }
+  border-radius: 4px; }
 
 .react-autoql-drawer .chat-header-container {
   display: flex;
@@ -3743,7 +3919,7 @@ g.legendOrdinal .legendTitle tspan {
   transition: none;
   text-align: left;
   opacity: 1 !important;
-  z-index: 99999 !important;
+  z-index: 999999 !important;
   /* necessary to show up on top of rc drawer */
   max-width: 300px;
   word-break: break-word; }
@@ -3765,7 +3941,6 @@ g.legendOrdinal .legendTitle tspan {
   border: 1px solid #ababab52;
   border-radius: 4px;
   box-shadow: 0px 0 8px var(--react-autoql-box-shadow-color, rgba(0, 0, 0, 0.15));
-  transition: opacity 0.2s ease 0s !important;
   opacity: 1 !important;
   overflow: hidden !important;
   background-color: var(--react-autoql-background-color-secondary); }
@@ -3984,6 +4159,16 @@ g.legendOrdinal .legendTitle tspan {
     top: 30px;
     opacity: 0; } }
 
+.react-autoql-dashboard,
+.react-autoql-dashboard-container,
+.react-autoql-dashboard-tile,
+.dashboard-tile-title-container,
+.react-autoql-dashboard-tile-inner-div,
+.dashboard-tile-toolbars-container,
+.dashboard-tile-response-wrapper,
+.dashboard-tile-response-container {
+  transform: translateZ(0) !important; }
+
 .react-autoql-dashboard .react-autoql-dashboard-tile {
   background: var(--react-autoql-background-color-secondary, #fff);
   color: var(--react-autoql-text-color-primary, #404040);
@@ -4081,18 +4266,22 @@ g.legendOrdinal .legendTitle tspan {
   margin-top: -6px;
   opacity: 0.9; }
 
+.react-autoql-dashboard-tile-inner-div .tabulator-header-contents {
+  height: 32px !important; }
+
+.react-autoql-dashboard-tile-inner-div .react-autoql-table-container.filtering .tabulator-header-contents {
+  height: 55px !important; }
+
 .react-autoql-dashboard-tile-inner-div .react-autoql-table,
-.react-autoql-dashboard-tile-inner-div .query-output-table-row-count {
+.react-autoql-dashboard-tile-inner-div .table-row-count {
   color: var(--react-autoql-text-color-primary);
   font-size: 11px; }
 
-.react-autoql-dashboard-tile-inner-div .query-output-table-row-count {
-  padding: 0; }
-
 .react-autoql-dashboard-tile-inner-div .dashboard-tile-response-wrapper {
-  height: calc(100% - 47px);
+  flex: 1;
   width: 100%;
   padding-top: 0;
+  overflow: hidden;
   background: inherit; }
   .react-autoql-dashboard-tile-inner-div .dashboard-tile-response-wrapper .layout-splitter {
     height: 1px !important;
@@ -4141,11 +4330,13 @@ g.legendOrdinal .legendTitle tspan {
   background: inherit;
   cursor: default; }
   .dashboard-tile-response-wrapper .dashboard-tile-response-container .react-autoql-response-content-container {
+    position: relative;
     padding: 8px 15px 20px 15px;
     align-items: center; }
 
 .dashboard-tile-response-wrapper.editing .dashboard-tile-response-container .react-autoql-response-content-container {
-  padding: 7px 12px 32px 18px;
+  box-sizing: content-box;
+  width: calc(100% - 40px);
   align-items: center; }
 
 .dashboard-tile-title-container {
@@ -4392,6 +4583,7 @@ g.legendOrdinal .legendTitle tspan {
 
 /* React Grid Layout overrides */
 .react-grid-item .react-resizable-handle {
+  -webkit-transform: translate3d(0, 0, 0);
   z-index: 1;
   position: absolute;
   width: 11px;
@@ -4444,7 +4636,8 @@ g.legendOrdinal .legendTitle tspan {
   background: var(--react-autoql-background-color-primary);
   height: 100%;
   width: 100%;
-  overflow: hidden; }
+  overflow: hidden;
+  padding-top: 3px; }
 
 .react-autoql-dashboard-container.edit-mode {
   padding-bottom: 200px; }
@@ -4457,7 +4650,11 @@ g.legendOrdinal .legendTitle tspan {
 .dashboard-drilldown-modal .dashboard-drilldown-modal-content.chart-hidden .react-autoql-dashboard-drilldown-original,
 .dashboard-drilldown-modal .dashboard-drilldown-modal-content.chart-hidden .layout-splitter, .dashboard-drilldown-modal .dashboard-drilldown-modal-content.top-hidden .react-autoql-dashboard-drilldown-original,
 .dashboard-drilldown-modal .dashboard-drilldown-modal-content.top-hidden .layout-splitter {
-  display: none; }
+  transition: opacity 0.3s ease, height 0.3s ease;
+  visibility: hidden;
+  pointer-events: none;
+  opacity: 0;
+  height: 0; }
 
 .dashboard-drilldown-modal .dashboard-drilldown-modal-content.chart-hidden .layout-pane:not(.layout-pane-primary) {
   height: calc(100% - 50px) !important; }