react-autoql 5.0.1 → 6.0.0

package/dist/autoql.esm.css

@@ -33,19 +33,10 @@ span.react-autoql-icon {
     width: 1em;
     margin-bottom: -0.15em; }
 
-.slack-logo {
-  display: inline-block;
-  height: 100%;
-  margin-bottom: 3px; }
-  .slack-logo img {
-    vertical-align: middle;
-    height: 1em;
-    width: 1em; }
-
 .react-autoql-badge {
   position: absolute;
   background: var(--react-autoql-warning-color);
-  border: 1px solid var(--react-autoql-background-color-primary);
+  border: 1px solid var(--react-autoql-background-color-secondary);
   width: 0.5em;
   height: 0.5em;
   top: -0.1em;
@@ -66,7 +57,7 @@ span.react-autoql-icon {
   cursor: pointer;
   overflow: hidden;
   background: var(--react-autoql-accent-color);
-  color: var(--react-autoql-accent-text-color);
+  color: var(--react-autoql-text-color-accent);
   border: none;
   flex-shrink: 0;
   flex-grow: 0; }
@@ -80,31 +71,12 @@ span.react-autoql-icon {
 .chat-voice-record-icon {
   vertical-align: top; }
 
-@-webkit-keyframes slide {
-  0% {
-    transform: translateX(-100%); }
-  100% {
-    transform: translateX(100%); } }
-
 @keyframes slide {
   0% {
     transform: translateX(-100%); }
   100% {
     transform: translateX(100%); } }
 
-@-webkit-keyframes move {
-  0% {
-    left: 0;
-    opacity: 0; }
-  5% {
-    opacity: 0; }
-  48% {
-    opacity: 0.2; }
-  80% {
-    opacity: 0; }
-  100% {
-    left: 82%; } }
-
 @keyframes move {
   0% {
     left: 0;
@@ -139,28 +111,23 @@ span.react-autoql-icon {
   height: 11px;
   border-radius: 50%;
   background: #e2e2e2;
-  -webkit-animation-timing-function: cubic-bezier(0, 1, 1, 0);
-          animation-timing-function: cubic-bezier(0, 1, 1, 0); }
+  animation-timing-function: cubic-bezier(0, 1, 1, 0); }
 
 .response-loading div:nth-child(1) {
   left: 6px;
-  -webkit-animation: response-loading1 0.6s infinite;
-          animation: response-loading1 0.6s infinite; }
+  animation: response-loading1 0.6s infinite; }
 
 .response-loading div:nth-child(2) {
   left: 6px;
-  -webkit-animation: response-loading2 0.6s infinite;
-          animation: response-loading2 0.6s infinite; }
+  animation: response-loading2 0.6s infinite; }
 
 .response-loading div:nth-child(3) {
   left: 26px;
-  -webkit-animation: response-loading2 0.6s infinite;
-          animation: response-loading2 0.6s infinite; }
+  animation: response-loading2 0.6s infinite; }
 
 .response-loading div:nth-child(4) {
   left: 45px;
-  -webkit-animation: response-loading3 0.6s infinite;
-          animation: response-loading3 0.6s infinite; }
+  animation: response-loading3 0.6s infinite; }
 
 .react-autoql-bar-container {
   position: relative;
@@ -184,7 +151,7 @@ span.react-autoql-icon {
   font-family: inherit;
   /* Default styles outside of data messenger */
   border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
-  background: var(--react-autoql-background-color-primary);
+  background: var(--react-autoql-background-color-secondary);
   color: #5d5d5d; }
 
 .react-autoql-chatbar-input.left-padding {
@@ -237,7 +204,7 @@ span.react-autoql-icon {
   overflow: hidden;
   box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1);
   /* Default styles outside of data messenger */
-  background-color: var(--react-autoql-background-color-primary);
+  background-color: var(--react-autoql-background-color-secondary);
   color: var(--react-autoql-text-color-primary); }
 
 .react-autoql-bar-container.autosuggest-top
@@ -257,7 +224,7 @@ span.react-autoql-icon {
 
 /* Autocomplete styles */
 .react-autoql-bar-container .react-autosuggest__suggestions-container--open {
-  background-color: var(--react-autoql-background-color-primary);
+  background-color: var(--react-autoql-background-color-secondary);
   border: 1px solid var(--react-autoql-border-color);
   color: var(--react-autoql-text-color-primary); }
 
@@ -308,8 +275,7 @@ span.react-autoql-icon {
 
 .react-autoql-table-container {
   flex: 1;
-  max-width: 100%;
-  width: 100%;
+  width: 100% !important;
   background-color: inherit;
   position: relative;
   display: flex; }
@@ -380,7 +346,7 @@ span.react-autoql-icon {
 .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-primary); }
+  background-color: var(--react-autoql-background-color-secondary); }
 
 .react-autoql-table.tabulator .tabulator-header {
   border-bottom: 2px solid var(--react-autoql-border-color); }
@@ -392,7 +358,7 @@ span.react-autoql-icon {
 .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-primary);
+  background-color: var(--react-autoql-background-color-secondary);
   z-index: 1; }
   .react-autoql-table .tabulator-row:last-child {
     border-bottom: none; }
@@ -434,9 +400,9 @@ span.react-autoql-icon {
   .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% - 34px) !important;
-    height: calc(100% - 34px) !important;
-    max-height: calc(100% - 34px) !important; }
+    min-height: calc(100% - 40px) !important;
+    height: calc(100% - 40px) !important;
+    max-height: calc(100% - 40px) !important; }
 
 .react-autoql-table.tabulator
 .tabulator-header
@@ -556,14 +522,7 @@ span.react-autoql-icon {
   border-radius: 50%;
   border: 1px solid currentColor;
   border-color: currentColor transparent currentColor transparent;
-  -webkit-animation: spinner-loader 1.2s linear infinite;
-          animation: spinner-loader 1.2s linear infinite; }
-
-@-webkit-keyframes spinner-loader {
-  0% {
-    transform: rotate(0deg); }
-  100% {
-    transform: rotate(360deg); } }
+  animation: spinner-loader 1.2s linear infinite; }
 
 @keyframes spinner-loader {
   0% {
@@ -571,6 +530,22 @@ span.react-autoql-icon {
   100% {
     transform: rotate(360deg); } }
 
+::-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;
@@ -615,7 +590,7 @@ g.legendOrdinal .legendTitle tspan {
 .react-autoql-checkbox__label {
   flex-shrink: 0;
   padding: 0.5rem 1rem;
-  color: var(--react-autoql-accent-text-color);
+  color: var(--react-autoql-text-color-accent);
   cursor: pointer; }
 
 .react-autoql-checkbox__input {
@@ -645,7 +620,7 @@ g.legendOrdinal .legendTitle tspan {
 
 .react-autoql-checkbox-tick {
   position: absolute;
-  color: var(--react-autoql-accent-text-color);
+  color: var(--react-autoql-text-color-accent);
   left: 3px;
   line-height: 20px;
   pointer-events: none; }
@@ -699,7 +674,7 @@ g.legendOrdinal .legendTitle tspan {
   bottom: 2px;
   left: 2px;
   border-radius: 50%;
-  background: var(--react-autoql-accent-text-color); }
+  background: var(--react-autoql-text-color-accent); }
 
 .react-autoql-checkbox--switch__input:checked
 + .react-autoql-checkbox--switch__label::after {
@@ -783,7 +758,7 @@ g.legendOrdinal .legendTitle tspan {
 .react-autoql-btn.primary {
   background: var(--react-autoql-accent-color);
   border: 1px solid var(--react-autoql-accent-color);
-  color: var(--react-autoql-accent-text-color); }
+  color: var(--react-autoql-text-color-accent); }
   .react-autoql-btn.primary:hover {
     opacity: 0.8; }
 
@@ -793,7 +768,7 @@ g.legendOrdinal .legendTitle tspan {
   background: inherit; }
   .react-autoql-btn.danger:hover {
     background-color: var(--react-autoql-danger-color, #ca0b00);
-    color: #fff; }
+    color: var(--react-autoql-text-color-accent); }
 
 .react-autoql-chart-container {
   position: relative;
@@ -801,6 +776,8 @@ g.legendOrdinal .legendTitle tspan {
   flex-grow: 1;
   flex-shrink: 1;
   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 svg {
@@ -810,7 +787,6 @@ g.legendOrdinal .legendTitle tspan {
     transition: none; }
   .react-autoql-chart-container .bar,
   .react-autoql-chart-container .column,
-  .react-autoql-chart-container .circle,
   .react-autoql-chart-container .line,
   .react-autoql-chart-container .slice,
   .react-autoql-chart-container .stacked-area,
@@ -823,8 +799,6 @@ g.legendOrdinal .legendTitle tspan {
     .react-autoql-chart-container .bar:hover, .react-autoql-chart-container .bar.active,
     .react-autoql-chart-container .column:hover,
     .react-autoql-chart-container .column.active,
-    .react-autoql-chart-container .circle:hover,
-    .react-autoql-chart-container .circle.active,
     .react-autoql-chart-container .line:hover,
     .react-autoql-chart-container .line.active,
     .react-autoql-chart-container .slice:hover,
@@ -855,6 +829,12 @@ g.legendOrdinal .legendTitle tspan {
       stroke: currentColor;
       stroke-width: 1px;
       fill: currentColor; }
+  .react-autoql-chart-container .circle {
+    transition: fill-opacity 0.2s ease;
+    fill-opacity: 0.7;
+    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 .react-autoql-heatmap-chart g.tick line,
@@ -867,13 +847,11 @@ g.legendOrdinal .legendTitle tspan {
     font-weight: 600; }
 
 .axis-selector-container {
-  background: var(--react-autoql-background-color-primary);
+  background: var(--react-autoql-background-color-secondary);
   color: var(--react-autoql-text-color-primary);
   z-index: 9999;
   padding: 5px 0;
-  max-height: 300px;
-  min-width: 150px;
-  overflow-y: auto; }
+  min-width: 150px; }
   .axis-selector-container .axis-select-option.active {
     background: var(--react-autoql-hover-color);
     outline: none !important; }
@@ -915,13 +893,13 @@ g.legendOrdinal .legendTitle tspan {
         background: rgba(0, 0, 0, 0.05); }
 
 .axis-selector-apply-btn {
-  background: var(--react-autoql-background-color-primary);
+  background: var(--react-autoql-background-color-secondary);
   padding: 5px; }
 
 .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-primary, white);
+  background: var(--react-autoql-background-color-secondary, white);
   display: inline-block;
   font-size: 13px;
   line-height: 32px;
@@ -935,7 +913,7 @@ g.legendOrdinal .legendTitle tspan {
     border-color: var(--react-autoql-accent-color, #26a7df); }
 
 .react-autoql-select-popup-container {
-  background: var(--react-autoql-background-color-primary, white);
+  background: var(--react-autoql-background-color-secondary, white);
   padding: 10px 0;
   max-height: 300px;
   overflow-y: auto; }
@@ -1007,7 +985,7 @@ g.legendOrdinal .legendTitle tspan {
 
 .react-autoql-suggestion-btn:hover {
   border-color: transparent;
-  color: var(--react-autoql-accent-text-color);
+  color: var(--react-autoql-text-color-accent);
   background: var(--react-autoql-accent-color); }
 
 .react-autoql-help-link-btn {
@@ -1037,6 +1015,8 @@ g.legendOrdinal .legendTitle tspan {
   height: 100%;
   width: 100%;
   word-break: break-word; }
+  .react-autoql-suggestion-message .react-autoql-suggestion-message-prefix {
+    margin-bottom: 10px; }
 
 .react-autoql-suggestions-select {
   position: relative;
@@ -1100,7 +1080,7 @@ g.legendOrdinal .legendTitle tspan {
   text-align: center; }
 
 .react-autoql-query-validation-execute-btn {
-  background: var(--react-autoql-background-color-primary);
+  background: var(--react-autoql-background-color-secondary);
   border: 1px solid var(--react-autoql-border-color);
   border-radius: 4px;
   height: 38px;
@@ -1183,7 +1163,7 @@ g.legendOrdinal .legendTitle tspan {
   margin-bottom: 14px; }
 
 .context-menu {
-  background: var(--react-autoql-background-color-primary);
+  background: var(--react-autoql-background-color-secondary);
   /* height: 100px; */
   width: 150px;
   padding: 10px 0; }
@@ -1233,7 +1213,7 @@ g.legendOrdinal .legendTitle tspan {
 
 .react-autoql-reverse-translation-container .react-autoql-reverse-translation {
   color: var(--react-autoql-text-color-primary);
-  background-color: var(--react-autoql-background-color-secondary);
+  background-color: var(--react-autoql-background-color-primary);
   border-radius: 5px;
   padding: 5px 13px 5px 13px;
   height: 100%; }
@@ -1255,7 +1235,7 @@ g.legendOrdinal .legendTitle tspan {
   border: 1px solid #d3d3d352;
   text-align: left;
   display: inline-block;
-  background: var(--react-autoql-background-color-primary); }
+  background: var(--react-autoql-background-color-secondary); }
   .viz-toolbar.vertical .react-autoql-toolbar-btn {
     display: block; }
 
@@ -1270,6 +1250,8 @@ g.legendOrdinal .legendTitle tspan {
   color: var(--react-autoql-text-color-primary);
   cursor: pointer;
   outline: none !important; }
+  .react-autoql-toolbar-btn.selected {
+    color: var(--react-autoql-accent-color); }
 
 .react-autoql-toolbar-btn.green {
   color: #2ecc40; }
@@ -1340,7 +1322,7 @@ g.legendOrdinal .legendTitle tspan {
   transition: all 0.2s ease-in-out;
   color: var(--react-autoql-text-color-primary);
   border: 1px solid var(--react-autoql-border-color) !important;
-  background: var(--react-autoql-background-color-primary) !important;
+  background: var(--react-autoql-background-color-secondary) !important;
   box-shadow: 0 0 14px 1px rgba(0, 0, 0, 0.15);
   padding: 0 !important;
   margin: auto auto;
@@ -1351,7 +1333,7 @@ g.legendOrdinal .legendTitle tspan {
   .ReactModal__Content textarea {
     border-color: var(--react-autoql-border-color);
     color: var(--react-autoql-text-color-primary);
-    background: var(--react-autoql-background-color-primary, white); }
+    background: var(--react-autoql-background-color-secondary, white); }
     .ReactModal__Content input.react-autoql-input::-moz-placeholder, .ReactModal__Content textarea.react-autoql-input::-moz-placeholder, .ReactModal__Content textarea::-moz-placeholder {
       color: var(--react-autoql-text-color-placeholder); }
     .ReactModal__Content input.react-autoql-input::placeholder,
@@ -1550,7 +1532,7 @@ g.legendOrdinal .legendTitle tspan {
   flex-basis: auto;
   position: relative;
   overflow: hidden;
-  background: var(--react-autoql-background-color-primary, #fff);
+  background: var(--react-autoql-background-color-secondary, #fff);
   border-radius: 4px;
   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
   margin-bottom: 8px;
@@ -1558,12 +1540,9 @@ g.legendOrdinal .legendTitle tspan {
   font-family: var(--react-autoql-font-family), sans-serif;
   transition: all 1s ease;
   transition: height 0.3s cubic-bezier(0.26, 0.26, 0, 1);
-  -webkit-animation: slideIn 0.5s cubic-bezier(0.26, 0.26, 0, 1);
-          animation: slideIn 0.5s cubic-bezier(0.26, 0.26, 0, 1);
-  -webkit-animation-fill-mode: both;
-          animation-fill-mode: both;
-  -webkit-animation-delay: 0s;
-          animation-delay: 0s; }
+  animation: slideIn 0.5s cubic-bezier(0.26, 0.26, 0, 1);
+  animation-fill-mode: both;
+  animation-delay: 0s; }
   .react-autoql-notification-list-item .single-value-response {
     font-size: 32px;
     margin-top: -6px;
@@ -1664,7 +1643,6 @@ g.legendOrdinal .legendTitle tspan {
     .react-autoql-notification-list-item .react-autoql-notification-data-container .react-autoql-table-container {
       padding: 0 10px; }
     .react-autoql-notification-list-item .react-autoql-notification-data-container .react-autoql-table {
-      opacity: 0.9;
       color: currentColor;
       font-size: 11px; }
   .react-autoql-notification-list-item .react-autoql-notification-data-title {
@@ -1690,7 +1668,7 @@ g.legendOrdinal .legendTitle tspan {
     transition: background-color 0.2s ease;
     cursor: pointer; }
     .react-autoql-notification-list-item .react-autoql-notification-dismiss-icon:hover {
-      background-color: var(--react-autoql-background-color-secondary, #ececec); }
+      background-color: var(--react-autoql-background-color-primary, #ececec); }
   .react-autoql-notification-list-item .react-autoql-notification-delete-icon {
     font-size: 18px;
     margin-top: 3px;
@@ -1706,14 +1684,14 @@ g.legendOrdinal .legendTitle tspan {
     transition: all 0.2s ease;
     cursor: pointer; }
     .react-autoql-notification-list-item .react-autoql-notification-delete-icon:hover {
-      background-color: var(--react-autoql-background-color-secondary, #ececec); }
+      background-color: var(--react-autoql-background-color-primary, #ececec); }
   .react-autoql-notification-list-item .react-autoql-notification-alert-icon {
     position: absolute;
     top: -7px;
     left: -7px;
     color: var(--react-autoql-accent-color, #26a7df);
     line-height: 10px;
-    background: var(--react-autoql-background-color-primary, #fff);
+    background: var(--react-autoql-background-color-secondary, #fff);
     border-radius: 10px;
     font-size: 17px; }
   .react-autoql-notification-list-item .react-autoql-notification-alert-strip {
@@ -1724,7 +1702,7 @@ g.legendOrdinal .legendTitle tspan {
     top: 0;
     width: 4px;
     background: var(--react-autoql-accent-color, #26a7df);
-    color: var(--react-autoql-accent-text-color);
+    color: var(--react-autoql-text-color-accent);
     transition-property: opacity;
     transition-duration: 0.2s;
     transition-timing-function: ease; }
@@ -1740,7 +1718,7 @@ g.legendOrdinal .legendTitle tspan {
       width: 45px;
       line-height: 45px;
       font-size: 22px;
-      color: var(--react-autoql-accent-text-color);
+      color: var(--react-autoql-text-color-accent);
       background-color: var(--react-autoql-accent-color, #26a7df);
       text-align: center;
       margin-top: 13px;
@@ -1774,7 +1752,7 @@ g.legendOrdinal .legendTitle tspan {
     .react-autoql-step-container.complete .react-autoql-step-dot {
       border-color: var(--react-autoql-accent-color, #26a7df);
       background: var(--react-autoql-accent-color, #26a7df);
-      color: var(--react-autoql-accent-text-color); }
+      color: var(--react-autoql-text-color-accent); }
   .react-autoql-step-container.error {
     border-color: var(--react-autoql-warning-color); }
     .react-autoql-step-container.error .react-autoql-step-dot {
@@ -1794,7 +1772,7 @@ g.legendOrdinal .legendTitle tspan {
   height: 20px;
   width: 20px;
   border-radius: 15px;
-  background: var(--react-autoql-background-color-primary, #fff);
+  background: var(--react-autoql-background-color-secondary, #fff);
   border: 1px solid var(--react-autoql-text-color-placeholder, lightgray);
   transition: all 0.5s ease;
   font-size: 10.5px;
@@ -1864,7 +1842,7 @@ g.legendOrdinal .legendTitle tspan {
   height: 18px;
   border: 1px solid #ddd;
   border-radius: 100%;
-  background: var(--react-autoql-accent-text-color); }
+  background: var(--react-autoql-text-color-accent); }
 
 .react-autoql-radio-btn-container [type='radio']:checked + label:after,
 .react-autoql-radio-btn-container [type='radio']:not(:checked) + label:after {
@@ -1899,7 +1877,7 @@ g.legendOrdinal .legendTitle tspan {
   .react-autoql-radio-btn-container .react-autoql-radio-btn.active {
     background-color: var(--react-autoql-accent-color, #26a7df);
     border-color: var(--react-autoql-accent-color, #26a7df);
-    color: var(--react-autoql-accent-text-color); }
+    color: var(--react-autoql-text-color-accent); }
   .react-autoql-radio-btn-container .react-autoql-radio-btn.active.outlined {
     background-color: inherit;
     color: var(--react-autoql-accent-color, #26a7df); }
@@ -1919,7 +1897,7 @@ g.legendOrdinal .legendTitle tspan {
 
 .react-autoql-select-with-arrow > div {
   border-color: var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
-  background: var(--react-autoql-background-color-primary, white);
+  background: var(--react-autoql-background-color-secondary, white);
   transition: all 0.2s ease;
   cursor: pointer !important; }
   .react-autoql-select-with-arrow > div:hover {
@@ -1991,28 +1969,15 @@ g.legendOrdinal .legendTitle tspan {
   color: var(--react-autoql-danger-color);
   display: 'inline-block'; }
 
-::-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; }
+.react-autoql-data-alert-query-name-tooltip-icon {
+  color: var(--react-autoql-info-color); }
 
 .notification-list-loading-container {
   text-align: center;
   padding-top: 100px;
   color: var(--react-autoql-text-color-primary);
   height: 100%;
-  background: var(--react-autoql-background-color-secondary); }
+  background: var(--react-autoql-background-color-primary); }
 
 .empty-notifications-message {
   color: var(--react-autoql-text-color-primary);
@@ -2032,7 +1997,7 @@ g.legendOrdinal .legendTitle tspan {
   display: flex;
   flex-direction: column;
   height: 100%;
-  background: var(--react-autoql-background-color-secondary); }
+  background: var(--react-autoql-background-color-primary); }
   .react-autoql-notification-list-container .notification-feed-list {
     padding: 0 20px;
     padding-top: 0; }
@@ -2056,59 +2021,40 @@ g.legendOrdinal .legendTitle tspan {
   width: 100%; }
 
 .react-autoql-notification-list-item:nth-of-type(0) {
-  -webkit-animation-delay: 0s;
-          animation-delay: 0s; }
+  animation-delay: 0s; }
 
 .react-autoql-notification-list-item:nth-of-type(1) {
-  -webkit-animation-delay: 0.1s;
-          animation-delay: 0.1s; }
+  animation-delay: 0.1s; }
 
 .react-autoql-notification-list-item:nth-of-type(2) {
-  -webkit-animation-delay: 0.2s;
-          animation-delay: 0.2s; }
+  animation-delay: 0.2s; }
 
 .react-autoql-notification-list-item:nth-of-type(3) {
-  -webkit-animation-delay: 0.3s;
-          animation-delay: 0.3s; }
+  animation-delay: 0.3s; }
 
 .react-autoql-notification-list-item:nth-of-type(4) {
-  -webkit-animation-delay: 0.4s;
-          animation-delay: 0.4s; }
+  animation-delay: 0.4s; }
 
 .react-autoql-notification-list-item:nth-of-type(5) {
-  -webkit-animation-delay: 0.5s;
-          animation-delay: 0.5s; }
+  animation-delay: 0.5s; }
 
 .react-autoql-notification-list-item:nth-of-type(6) {
-  -webkit-animation-delay: 0.6s;
-          animation-delay: 0.6s; }
+  animation-delay: 0.6s; }
 
 .react-autoql-notification-list-item:nth-of-type(7) {
-  -webkit-animation-delay: 0.7s;
-          animation-delay: 0.7s; }
+  animation-delay: 0.7s; }
 
 .react-autoql-notification-list-item:nth-of-type(8) {
-  -webkit-animation-delay: 0.8s;
-          animation-delay: 0.8s; }
+  animation-delay: 0.8s; }
 
 .react-autoql-notification-list-item:nth-of-type(9) {
-  -webkit-animation-delay: 0.9s;
-          animation-delay: 0.9s; }
+  animation-delay: 0.9s; }
 
 .react-autoql-notification-list-item:nth-of-type(10) {
-  -webkit-animation-delay: 1s;
-          animation-delay: 1s; }
-
-@-webkit-keyframes slideIn {
-  0% {
-    opacity: 0;
-    top: 500px; }
-  100% {
-    opacity: 1;
-    top: 0; } }
+  animation-delay: 1s; }
 
 .react-autoql-notification-settings {
-  background-color: var(--react-autoql-background-color-secondary);
+  background-color: var(--react-autoql-background-color-primary);
   color: var(--react-autoql-text-color-primary);
   padding-top: 20px;
   height: 100%; }
@@ -2117,7 +2063,7 @@ g.legendOrdinal .legendTitle tspan {
     margin-top: 10px;
     border-radius: 4px;
     box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
-    background-color: var(--react-autoql-background-color-primary);
+    background-color: var(--react-autoql-background-color-secondary);
     overflow: hidden; }
     .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item {
       height: 55px;
@@ -2176,7 +2122,7 @@ g.legendOrdinal .legendTitle tspan {
       width: 35px;
       border-radius: 20px;
       background: var(--react-autoql-accent-color, #26a7df);
-      color: var(--react-autoql-accent-text-color);
+      color: var(--react-autoql-text-color-accent);
       line-height: 38px;
       text-align: center;
       font-size: 20px;
@@ -2213,7 +2159,7 @@ g.legendOrdinal .legendTitle tspan {
   width: 35px;
   border-radius: 20px;
   background: var(--react-autoql-accent-color, #26a7df);
-  color: var(--react-autoql-accent-text-color);
+  color: var(--react-autoql-text-color-accent);
   line-height: 38px;
   text-align: center;
   font-size: 20px;
@@ -2264,7 +2210,7 @@ g.legendOrdinal .legendTitle tspan {
       border: 1px solid;
       line-height: 22px;
       text-align: center;
-      background: var(--react-autoql-background-color-primary, white);
+      background: var(--react-autoql-background-color-secondary, white);
       color: var(--react-autoql-text-color-placeholder, rgba(0, 0, 0, 0.2));
       transition: all 0.3s ease;
       cursor: pointer; }
@@ -2350,168 +2296,22 @@ g.legendOrdinal .legendTitle tspan {
 .data-alerts-container.read-only .react-autoql-notification-group-container {
   border: none; }
 
-.slack-modal-error-container,
-.slack-modal-empty-list-message {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-  height: 100%;
-  margin-bottom: 50px; }
-  .slack-modal-error-container .react-autoql-btn,
-  .slack-modal-empty-list-message .react-autoql-btn {
-    margin-top: 10px; }
-
-.slack-email-instructions-button {
-  cursor: pointer;
-  opacity: 0.6;
-  font-size: 13px;
-  font-style: italic;
-  text-decoration: underline; }
-
-.slack-email-instructions-popover {
-  color: var(--react-autoql-text-color-primary);
-  background: var(--react-autoql-background-color-primary);
-  padding: 18px;
-  max-width: 500px; }
-
-.slack-channel-list {
-  width: 390px; }
-
-.remove-channel-popover {
-  color: var(--react-autoql-text-color-primary);
-  background: var(--react-autoql-background-color-primary);
-  text-align: right;
-  padding: 18px;
-  width: 226px; }
-
-.remove-channel-btn {
-  cursor: pointer;
-  margin-left: 8px; }
-  .remove-channel-btn:hover {
-    color: #ca0b00; }
-
-.connect-channel-form-container,
-.slack-channel-list-container {
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
-  align-items: center; }
-  .connect-channel-form-container .channel-list-btn-container,
-  .slack-channel-list-container .channel-list-btn-container {
-    position: absolute;
-    bottom: 0;
-    display: flex;
-    flex-direction: row;
-    justify-content: stretch;
-    width: 100%; }
-    .connect-channel-form-container .channel-list-btn-container button,
-    .slack-channel-list-container .channel-list-btn-container button {
-      flex: 1; }
-  .connect-channel-form-container .connect-channel-back-btn,
-  .slack-channel-list-container .connect-channel-back-btn {
-    position: absolute;
-    border-radius: 100px;
-    border: 1px solid rgba(0, 0, 0, 0.1);
-    padding: 4px 7px;
-    top: 3px;
-    left: -50px;
-    width: 30px;
-    height: 30px;
-    cursor: pointer; }
-  .connect-channel-form-container .channel-list,
-  .slack-channel-list-container .channel-list {
-    position: relative;
-    max-height: 200px;
-    min-height: 100px;
-    margin-top: 10px;
-    overflow-y: auto;
-    margin-bottom: 5px;
-    width: 355px;
-    border: 1px solid rgba(0, 0, 0, 0.15);
-    border-radius: 4px; }
-  .connect-channel-form-container .channel-item,
-  .slack-channel-list-container .channel-item {
-    position: relative;
-    text-align: center;
-    padding: 10px 20px;
-    transition: all 0.3s ease;
-    font-weight: bold;
-    cursor: pointer; }
-    .connect-channel-form-container .channel-item.selected,
-    .slack-channel-list-container .channel-item.selected {
-      background-color: var(--react-autoql-accent-color);
-      color: var(--react-autoql-accent-text-color); }
-    .connect-channel-form-container .channel-item:hover:not(.selected),
-    .slack-channel-list-container .channel-item:hover:not(.selected) {
-      background-color: rgba(0, 0, 0, 0.05); }
-    .connect-channel-form-container .channel-item:hover .delete-channel-btn,
-    .slack-channel-list-container .channel-item:hover .delete-channel-btn {
-      opacity: 1; }
-  .connect-channel-form-container .delete-channel-btn,
-  .slack-channel-list-container .delete-channel-btn {
-    transition: all 0.3s ease;
-    opacity: 0;
-    position: absolute;
-    right: 10px;
-    font-size: 18px;
-    top: 7px;
-    margin-left: 10px; }
-    .connect-channel-form-container .delete-channel-btn:hover,
-    .slack-channel-list-container .delete-channel-btn:hover {
-      color: #ca0b00; }
-  .connect-channel-form-container .send-to-slack-btn,
-  .slack-channel-list-container .send-to-slack-btn {
-    margin-top: 15px;
-    width: 200px; }
-  .connect-channel-form-container .react-autoql-checkbox-container,
-  .slack-channel-list-container .react-autoql-checkbox-container {
-    margin-left: 10px; }
-  .connect-channel-form-container .connect-channel-form,
-  .slack-channel-list-container .connect-channel-form {
-    position: relative;
-    width: 350px; }
-  .connect-channel-form-container .form-subtitle,
-  .slack-channel-list-container .form-subtitle {
-    font-size: 12px;
-    opacity: 0.8; }
-  .connect-channel-form-container .react-autoql-input-container,
-  .slack-channel-list-container .react-autoql-input-container {
-    width: 100%;
-    margin-left: 0;
-    margin-bottom: 5px; }
-  .connect-channel-form-container .connect-channel-title,
-  .connect-channel-form-container .select-channel-title,
-  .slack-channel-list-container .connect-channel-title,
-  .slack-channel-list-container .select-channel-title {
-    margin-bottom: 15px;
-    font-size: 20px; }
-  .connect-channel-form-container .connect-channel-btn,
-  .slack-channel-list-container .connect-channel-btn {
-    margin-top: 10px;
-    text-align: center; }
-    .connect-channel-form-container .connect-channel-btn button,
-    .slack-channel-list-container .connect-channel-btn button {
-      width: 200px; }
-
-
-.autoql-options-toolbar {
+.options-toolbar {
   display: inline-block;
   background: inherit;
   padding: 5px;
   border-radius: 6px;
   line-height: 28px;
-  background: var(--react-autoql-background-color-primary);
+  background: var(--react-autoql-background-color-secondary);
   border: 1px solid var(--react-autoql-border-color); }
-  .autoql-options-toolbar.vertical .react-autoql-toolbar-btn {
+  .options-toolbar.vertical .react-autoql-toolbar-btn {
     display: block; }
-  .autoql-options-toolbar .react-autoql-toolbar-btn {
+  .options-toolbar .react-autoql-toolbar-btn {
     color: var(--react-autoql-text-color-primary); }
 
 .more-options-menu,
 .report-problem-menu {
-  background: var(--react-autoql-background-color-primary);
+  background: var(--react-autoql-background-color-secondary);
   padding: 10px 0; }
   .more-options-menu span.react-autoql-icon svg,
   .report-problem-menu span.react-autoql-icon svg {
@@ -2532,10 +2332,10 @@ g.legendOrdinal .legendTitle tspan {
     width: 100%;
     padding: 10px;
     resize: none;
-    background: var(--react-autoql-background-color-secondary); }
+    background: var(--react-autoql-background-color-primary); }
   .copy-sql-modal-content .copy-sql-btn {
     color: var(--react-autoql-text-color);
-    background-color: var(--react-autoql-background-color-primary);
+    background-color: var(--react-autoql-background-color-secondary);
     position: absolute;
     top: 3px;
     right: 0;
@@ -2580,10 +2380,9 @@ g.legendOrdinal .legendTitle tspan {
     display: flex;
     justify-content: flex-start;
     padding-left: 20px;
-    -webkit-animation: scale-up-bl 0.5s ease;
-            animation: scale-up-bl 0.5s ease; }
+    animation: scale-up-bl 0.5s ease; }
     .chat-single-message-container.response .chat-message-bubble {
-      background: var(--react-autoql-background-color-primary);
+      background: var(--react-autoql-background-color-secondary);
       color: var(--react-autoql-text-color-primary);
       box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13); }
     .chat-single-message-container.response .chat-message-bubble:not(.text) {
@@ -2593,11 +2392,10 @@ g.legendOrdinal .legendTitle tspan {
     display: flex;
     justify-content: flex-end;
     padding-right: 20px;
-    -webkit-animation: scale-up-br 0.5s ease;
-            animation: scale-up-br 0.5s ease; }
+    animation: scale-up-br 0.5s ease; }
     .chat-single-message-container.request .chat-message-bubble {
       background: var(--react-autoql-accent-color);
-      color: var(--react-autoql-accent-text-color);
+      color: var(--react-autoql-text-color-accent);
       box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13); }
   .chat-single-message-container .chat-message-bubble {
     position: relative;
@@ -2629,29 +2427,22 @@ g.legendOrdinal .legendTitle tspan {
       width: 100%;
       top: -31px;
       right: 0;
-      z-index: 3;
-      pointer-events: none;
-      visibility: hidden;
-      opacity: 0; }
+      z-index: 3; }
       .chat-single-message-container .chat-message-bubble .chat-message-toolbars-container .chat-message-toolbar.left {
         margin-left: -5px; }
       .chat-single-message-container .chat-message-bubble .chat-message-toolbars-container .chat-message-toolbar.right {
         margin-right: -5px; }
-      .chat-single-message-container .chat-message-bubble .chat-message-toolbars-container .chat-message-toolbar.right,
-      .chat-single-message-container .chat-message-bubble .chat-message-toolbars-container .chat-message-toolbar.left {
-        pointer-events: auto; }
-    .chat-single-message-container .chat-message-bubble:hover .chat-message-toolbars-container {
+    .chat-single-message-container .chat-message-bubble .react-autoql-toolbar:not(.active) {
+      pointer-events: none;
+      visibility: hidden;
+      opacity: 0; }
+    .chat-single-message-container .chat-message-bubble:hover .react-autoql-toolbar,
+    .chat-single-message-container .chat-message-bubble .react-autoql-toolbar.active {
+      pointer-events: auto;
       visibility: visible;
       opacity: 1; }
 
 /* animations */
-@-webkit-keyframes scale-up-br {
-  0% {
-    transform: scale(0.5);
-    transform-origin: 100% 100%; }
-  100% {
-    transform: scale(1);
-    transform-origin: 100% 100%; } }
 @keyframes scale-up-br {
   0% {
     transform: scale(0.5);
@@ -2660,14 +2451,6 @@ g.legendOrdinal .legendTitle tspan {
     transform: scale(1);
     transform-origin: 100% 100%; } }
 
-@-webkit-keyframes scale-up-bl {
-  0% {
-    transform: scale(0.5);
-    transform-origin: 0% 100%; }
-  100% {
-    transform: scale(1);
-    transform-origin: 0% 100%; } }
-
 @keyframes scale-up-bl {
   0% {
     transform: scale(0.5);
@@ -2690,9 +2473,9 @@ g.legendOrdinal .legendTitle tspan {
   padding: 10px; }
 
 .react-autoql-drawer .watermark {
-  color: var(--react-autoql-text-color-primary);
+  color: var(--react-autoql-text-color-placeholder);
   text-align: center;
-  opacity: 0.2;
+  opacity: 0.7;
   top: 6px;
   width: calc(100% - 10px);
   font-size: 13px; }
@@ -2701,8 +2484,7 @@ g.legendOrdinal .legendTitle tspan {
   flex-shrink: 0;
   flex-grow: 0;
   height: 60px;
-  -webkit-animation: fadeIn 0.3s;
-          animation: fadeIn 0.3s; }
+  animation: fadeIn 0.3s; }
 
 .react-autoql-cascader {
   position: relative;
@@ -2748,12 +2530,12 @@ g.legendOrdinal .legendTitle tspan {
         opacity: 0.7; }
       .react-autoql-cascader .options-container .option .option-execute-icon {
         opacity: 0;
-        color: var(--react-autoql-accent-text-color);
+        color: var(--react-autoql-text-color-accent);
         font-size: 16px;
         vertical-align: middle; }
       .react-autoql-cascader .options-container .option:hover, .react-autoql-cascader .options-container .option.active {
         background-color: var(--react-autoql-accent-color, #26a7df);
-        color: var(--react-autoql-accent-text-color); }
+        color: var(--react-autoql-text-color-accent); }
         .react-autoql-cascader .options-container .option:hover .option-execute-icon, .react-autoql-cascader .options-container .option.active .option-execute-icon {
           opacity: 1; }
     .react-autoql-cascader .options-container:not(:last-child) {
@@ -2782,10 +2564,8 @@ g.legendOrdinal .legendTitle tspan {
     text-align: center;
     flex: 1; }
     .query-tips-page-container .query-tips-result-container .animated-item {
-      -webkit-animation: fadeIn 0.3s linear;
-              animation: fadeIn 0.3s linear;
-      -webkit-animation-fill-mode: both;
-              animation-fill-mode: both; }
+      animation: fadeIn 0.3s linear;
+      animation-fill-mode: both; }
     .query-tips-page-container .query-tips-result-container .query-tip-item {
       position: relative;
       padding: 13px;
@@ -2820,74 +2600,49 @@ g.legendOrdinal .legendTitle tspan {
     padding-right: 46px; }
 
 .animated-item:nth-child(1) {
-  -webkit-animation-delay: 0.08s;
-          animation-delay: 0.08s; }
+  animation-delay: 0.08s; }
 
 .animated-item:nth-child(2) {
-  -webkit-animation-delay: 0.16s;
-          animation-delay: 0.16s; }
+  animation-delay: 0.16s; }
 
 .animated-item:nth-child(3) {
-  -webkit-animation-delay: 0.24s;
-          animation-delay: 0.24s; }
+  animation-delay: 0.24s; }
 
 .animated-item:nth-child(4) {
-  -webkit-animation-delay: 0.32s;
-          animation-delay: 0.32s; }
+  animation-delay: 0.32s; }
 
 .animated-item:nth-child(5) {
-  -webkit-animation-delay: 0.4s;
-          animation-delay: 0.4s; }
+  animation-delay: 0.4s; }
 
 .animated-item:nth-child(6) {
-  -webkit-animation-delay: 0.48s;
-          animation-delay: 0.48s; }
+  animation-delay: 0.48s; }
 
 .animated-item:nth-child(7) {
-  -webkit-animation-delay: 0.56s;
-          animation-delay: 0.56s; }
+  animation-delay: 0.56s; }
 
 .animated-item:nth-child(8) {
-  -webkit-animation-delay: 0.64s;
-          animation-delay: 0.64s; }
+  animation-delay: 0.64s; }
 
 .animated-item:nth-child(9) {
-  -webkit-animation-delay: 0.72s;
-          animation-delay: 0.72s; }
+  animation-delay: 0.72s; }
 
 .animated-item:nth-child(10) {
-  -webkit-animation-delay: 0.8s;
-          animation-delay: 0.8s; }
+  animation-delay: 0.8s; }
 
 .animated-item:nth-child(11) {
-  -webkit-animation-delay: 0.88s;
-          animation-delay: 0.88s; }
+  animation-delay: 0.88s; }
 
 .animated-item:nth-child(12) {
-  -webkit-animation-delay: 0.96s;
-          animation-delay: 0.96s; }
+  animation-delay: 0.96s; }
 
 .animated-item:nth-child(13) {
-  -webkit-animation-delay: 1.04s;
-          animation-delay: 1.04s; }
+  animation-delay: 1.04s; }
 
 .animated-item:nth-child(14) {
-  -webkit-animation-delay: 1.12s;
-          animation-delay: 1.12s; }
+  animation-delay: 1.12s; }
 
 .animated-item:nth-child(15) {
-  -webkit-animation-delay: 1.2s;
-          animation-delay: 1.2s; }
-
-@-webkit-keyframes fadeIn {
-  0% {
-    opacity: 0;
-    top: 100px; }
-  75% {
-    opacity: 0.5;
-    top: 0px; }
-  100% {
-    opacity: 1; } }
+  animation-delay: 1.2s; }
 
 .react-autoql-chatbar-input-container.data-explorer {
   flex: 0;
@@ -2902,8 +2657,7 @@ ul {
     background: transparent !important;
     opacity: 0; }
   .react-autoql-chatbar-input-container.data-explorer.data-explorer {
-    -webkit-animation: slideDown 0.5s ease;
-            animation: slideDown 0.5s ease; }
+    animation: slideDown 0.5s ease; }
   .react-autoql-chatbar-input-container.data-explorer .react-autoql-chatbar-input {
     margin: 0;
     width: 100%;
@@ -2916,24 +2670,24 @@ ul {
     position: relative; }
   .react-autoql-chatbar-input-container.data-explorer .react-autosuggest__suggestions-container--open {
     position: absolute;
+    display: block;
     margin: 0;
     padding-top: 5px;
     padding-bottom: 5px;
-    display: block;
     width: 100%;
     height: unset;
-    max-height: 250px;
     border-radius: 15px;
     font-family: inherit;
     font-size: 15px;
     font-weight: normal;
     z-index: 2;
-    overflow: auto;
+    overflow: hidden;
     margin-top: 3px;
     border: 1px solid var(--react-autoql-border-color);
     box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1);
-    background-color: var(--react-autoql-background-color-primary);
-    color: var(--react-autoql-text-color-primary); }
+    background-color: var(--react-autoql-background-color-secondary);
+    color: var(--react-autoql-text-color-primary);
+    box-sizing: content-box; }
   .react-autoql-chatbar-input-container.data-explorer .react-autosuggest__suggestions-list {
     margin: 0;
     padding: 0;
@@ -2952,10 +2706,56 @@ ul {
   .react-autoql-chatbar-input-container.data-explorer .react-autosuggest__suggestion--highlighted {
     background-color: rgba(0, 0, 0, 0.1) !important; }
   .react-autoql-chatbar-input-container.data-explorer .react-autosuggest__section-title {
-    padding: 10px 0 0 10px;
+    padding: 5px 0 0 10px;
     font-size: 12px;
     color: var(--react-autoql-text-color-placeholder); }
 
+.react-autoql-card {
+  background: var(--react-autoql-background-color-secondary);
+  border-radius: 6px;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
+  padding: 15px;
+  margin: 10px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap; }
+  .react-autoql-card .react-autoql-card-content {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    transition: max-height 0.3s ease, opacity 0.3s ease;
+    opacity: 1;
+    flex: 0 1 auto;
+    min-height: 0;
+    overflow: hidden; }
+    .react-autoql-card .react-autoql-card-content .react-autoql-card-user-content {
+      flex: 0 1 auto;
+      min-height: 100px;
+      max-height: 100%;
+      position: relative;
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+      flex-wrap: nowrap; }
+  .react-autoql-card.collapsed .react-autoql-card-content {
+    pointer-events: none;
+    opacity: 0; }
+  .react-autoql-card .react-autoql-card-title {
+    cursor: pointer;
+    padding: 0 10px;
+    flex: 0 0 auto;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: nowrap;
+    font-size: 18px;
+    margin: 4px 0px;
+    font-weight: 600; }
+  .react-autoql-card .react-autoql-card-subtitle {
+    padding: 0px 10px 5px 10px;
+    flex: 0 0 auto; }
+
 .data-explorer-section {
   flex: 0 1 auto;
   max-height: 100%;
@@ -2970,7 +2770,6 @@ ul {
     flex: 0 0 auto !important; }
   .data-explorer-section .data-preview-scroll-container,
   .data-explorer-section .custom-scrollbar-view {
-    scroll-behavior: smooth !important;
     width: 100%;
     height: 100%;
     white-space: nowrap;
@@ -3000,15 +2799,15 @@ ul {
       max-height: 100%;
       padding: 0 5px; }
     .data-explorer-section .data-explorer-data-preview table {
+      min-width: 100%;
       table-layout: fixed;
       border-collapse: collapse; }
     .data-explorer-section .data-explorer-data-preview thead th {
       top: 0;
       padding: 0 6px;
       height: 35px;
-      position: -webkit-sticky;
       position: sticky;
-      background: var(--react-autoql-background-color-primary);
+      background: var(--react-autoql-background-color-secondary);
       box-shadow: inset 0 -2px 0 var(--react-autoql-border-color);
       transition: color 0.2s ease;
       cursor: pointer;
@@ -3030,7 +2829,7 @@ ul {
 
 .data-explorer-page-container .data-preview-tooltip {
   --border-color: var(--react-autoql-border-color);
-  --bg-color: var(--react-autoql-background-color-primary);
+  --bg-color: var(--react-autoql-background-color-secondary);
   opacity: 1 !important;
   padding: 15px 25px !important;
   font-size: 0.875rem !important;
@@ -3070,81 +2869,6 @@ ul {
       stroke-width: 1px;
       stroke: currentColor; }
 
-.react-autoql-card {
-  background: var(--react-autoql-background-color-primary);
-  border-radius: 6px;
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
-  padding: 15px;
-  margin: 10px;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  flex-wrap: nowrap; }
-  .react-autoql-card .react-autoql-card-content {
-    display: flex;
-    flex-direction: column;
-    flex-wrap: nowrap;
-    transition: max-height 0.3s ease, opacity 0.3s ease;
-    opacity: 1;
-    flex: 0 1 auto;
-    min-height: 0;
-    overflow: hidden; }
-    .react-autoql-card .react-autoql-card-content .react-autoql-card-user-content {
-      flex: 0 1 auto;
-      min-height: 100px;
-      max-height: 100%;
-      position: relative;
-      overflow: hidden;
-      display: flex;
-      flex-direction: column;
-      flex-wrap: nowrap; }
-  .react-autoql-card.collapsed .react-autoql-card-content {
-    pointer-events: none;
-    opacity: 0; }
-  .react-autoql-card .react-autoql-card-title {
-    cursor: pointer;
-    padding: 0 10px;
-    flex: 0 0 auto;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    flex-wrap: nowrap;
-    font-size: 18px;
-    margin: 4px 0px;
-    font-weight: 600; }
-  .react-autoql-card .react-autoql-card-subtitle {
-    padding: 0px 10px 5px 10px;
-    flex: 0 0 auto; }
-
-.react-autoql-chip {
-  display: inline-flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  justify-content: space-between;
-  border-radius: 5px;
-  padding: 5px 8px;
-  border: 1px solid transparent;
-  background-color: var(--react-autoql-background-color-primary);
-  color: var(--react-autoql-text-color-primary);
-  transition: all 0.2s ease;
-  margin-right: 10px;
-  margin-top: 5px;
-  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
-  cursor: pointer; }
-  .react-autoql-chip:hover {
-    border: 1px solid var(--react-autoql-accent-color); }
-  .react-autoql-chip.selected {
-    background-color: var(--react-autoql-accent-color);
-    color: var(--react-autoql-accent-text-color); }
-  .react-autoql-chip .react-autoql-chip-content {
-    font-weight: 600; }
-  .react-autoql-chip .react-autoql-chip-delete-btn {
-    margin-left: 8px;
-    transition: opacity 0.2s ease;
-    opacity: 0.7; }
-    .react-autoql-chip .react-autoql-chip-delete-btn:hover {
-      opacity: 1; }
-
 .data-explorer-page-container {
   height: 100%;
   padding: 0;
@@ -3160,7 +2884,8 @@ ul {
     text-align: center;
     margin: 50px auto;
     padding: 0 40px;
-    font-size: 15px; }
+    font-size: 15px;
+    flex: 1; }
     .data-explorer-page-container .data-explorer-intro-message .intro-message-list-container {
       display: flex;
       justify-content: center;
@@ -3237,10 +2962,8 @@ ul {
         stroke-width: 1px;
         stroke: currentColor; }
       .data-explorer-page-container .query-suggestion-list-scroll-component .query-tip-item .animated-item {
-        -webkit-animation: fadeIn 0.3s linear;
-                animation: fadeIn 0.3s linear;
-        -webkit-animation-fill-mode: both;
-                animation-fill-mode: both; }
+        animation: fadeIn 0.3s linear;
+        animation-fill-mode: both; }
       .data-explorer-page-container .query-suggestion-list-scroll-component .query-tip-item .query-tips-result-placeholder {
         margin-top: 50px; }
   .data-explorer-page-container .chat-bar-clear-btn {
@@ -3263,18 +2986,36 @@ ul {
 
 .filter-lock-menu {
   z-index: 99999 !important;
-  transition: opacity 0.1s ease 0s !important;
-  border: 1px solid #ababab52;
-  border-radius: 4px;
-  box-shadow: 0px 0 8px rgba(0, 0, 0, 0.15);
-  opacity: 1;
+  top: -4px !important;
   min-width: 450px;
   max-width: 95vw;
   min-height: 0px;
   max-height: 95vh;
   height: 350px;
-  background: var(--react-autoql-background-color-primary);
-  color: var(--react-autoql-text-color-primary); }
+  padding: 10px; }
+  .filter-lock-menu .filter-lock-menu-content-container {
+    background: var(--react-autoql-background-color-secondary);
+    color: var(--react-autoql-text-color-primary);
+    box-shadow: 0px 0 8px rgba(0, 0, 0, 0.15);
+    transition: opacity 0.1s ease 0s !important;
+    border: 1px solid #ababab52;
+    padding: 0 !important;
+    border-radius: 4px;
+    height: 100%;
+    width: 100%;
+    opacity: 1; }
+  .filter-lock-menu .filter-lock-menu-popover-arrow {
+    border-bottom: 10px solid var(--react-autoql-border-color) !important;
+    top: 1px !important;
+    opacity: 1; }
+    .filter-lock-menu .filter-lock-menu-popover-arrow::after {
+      content: '';
+      position: absolute;
+      border-left: 9px solid transparent;
+      border-right: 9px solid transparent;
+      border-bottom: 9px solid var(--react-autoql-background-color-secondary);
+      top: 1px;
+      left: -9px; }
   .filter-lock-menu .filter-lock-toast-container {
     top: 0;
     position: absolute;
@@ -3370,7 +3111,6 @@ ul {
       .filter-lock-menu-content .react-autoql-filter-list-container .react-autoql-filter-list-title .filter-lock-category-title {
         padding-right: 10px;
         padding-top: 1px;
-        max-width: 195px;
         overflow: hidden;
         text-overflow: ellipsis; }
       .filter-lock-menu-content .react-autoql-filter-list-container .react-autoql-filter-list-title .filter-name-column {
@@ -3379,6 +3119,7 @@ ul {
         flex-direction: row;
         align-items: center;
         justify-content: flex-start;
+        max-width: calc(100% - 100px);
         flex: 1; }
       .filter-lock-menu-content .react-autoql-filter-list-container .react-autoql-filter-list-title .persist-toggle-column {
         display: flex;
@@ -3422,17 +3163,12 @@ ul {
             color: var(--react-autoql-danger-color); }
         .filter-lock-menu-content .react-autoql-filter-list-container .react-autoql-filter-list-item-container .react-autoql-filter-list-item.react-autoql-highlight-row {
           background-color: var(--react-autoql-accent-color);
-          color: var(--react-autoql-accent-text-color);
-          -webkit-animation-name: highlightIn, highlightOut;
-                  animation-name: highlightIn, highlightOut;
-          -webkit-animation-duration: 300ms, 300ms;
-                  animation-duration: 300ms, 300ms;
-          -webkit-animation-delay: 0ms, 1000ms;
-                  animation-delay: 0ms, 1000ms;
-          -webkit-animation-timing-function: ease-in, ease-out;
-                  animation-timing-function: ease-in, ease-out;
-          -webkit-animation-iteration-count: 1, 1;
-                  animation-iteration-count: 1, 1; }
+          color: var(--react-autoql-text-color-accent);
+          animation-name: highlightIn, highlightOut;
+          animation-duration: 300ms, 300ms;
+          animation-delay: 0ms, 1000ms;
+          animation-timing-function: ease-in, ease-out;
+          animation-iteration-count: 1, 1; }
   .filter-lock-menu-content .react-autoql-filter-locking-input {
     padding: 5px;
     padding-left: 20px;
@@ -3446,7 +3182,7 @@ ul {
     width: 100%;
     font-family: inherit;
     border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
-    background: var(--react-autoql-background-color-primary);
+    background: var(--react-autoql-background-color-secondary);
     color: var(--react-autoql-text-color-primary); }
     .filter-lock-menu-content .react-autoql-filter-locking-input:hover {
       box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1); }
@@ -3461,7 +3197,7 @@ ul {
   .filter-lock-menu-content .react-autosuggest__container--open {
     position: relative; }
     .filter-lock-menu-content .react-autosuggest__container--open .react-autosuggest__suggestions-container--open {
-      background-color: var(--react-autoql-background-color-primary);
+      background-color: var(--react-autoql-background-color-secondary);
       border: 1px solid var(--react-autoql-border-color);
       color: var(--react-autoql-text-color-primary);
       position: absolute;
@@ -3499,43 +3235,27 @@ ul {
       .filter-lock-menu-content .react-autosuggest__container--open .react-autosuggest__suggestions-container--open .react-autosuggest__suggestion--highlighted {
         background-color: rgba(0, 0, 0, 0.1) !important; }
       .filter-lock-menu-content .react-autosuggest__container--open .react-autosuggest__suggestions-container--open .react-autosuggest__section-title {
-        padding: 10px 0 0 10px;
+        padding-left: 15px;
         font-size: 12px;
         color: var(--react-autoql-text-color-placeholder); }
-
-@-webkit-keyframes highlightOut {
-  100% {
-    background-color: var(--react-autoql-background-color-primary);
-    color: var(--react-autoql-text-color-primary); }
-  0% {
-    background-color: var(--react-autoql-accent-color);
-    color: var(--react-autoql-accent-text-color); } }
+      .filter-lock-menu-content .react-autosuggest__container--open .react-autosuggest__suggestions-container--open .filter-locking-no-suggestions-text {
+        padding-left: 8px;
+        font-size: 14px; }
 
 @keyframes highlightOut {
   100% {
-    background-color: var(--react-autoql-background-color-primary);
+    background-color: var(--react-autoql-background-color-secondary);
     color: var(--react-autoql-text-color-primary); }
   0% {
     background-color: var(--react-autoql-accent-color);
-    color: var(--react-autoql-accent-text-color); } }
-
-@-webkit-keyframes highlightIn {
-  100% {
-    background-color: var(--react-autoql-accent-color);
-    color: var(--react-autoql-accent-text-color);
-    opacity: 0.8; }
-  0% {
-    background-color: var(--react-autoql-background-color-primary);
-    color: var(--react-autoql-text-color-primary);
-    opacity: 1; } }
+    color: var(--react-autoql-text-color-accent); } }
 
 @keyframes highlightIn {
   100% {
     background-color: var(--react-autoql-accent-color);
-    color: var(--react-autoql-accent-text-color);
-    opacity: 0.8; }
+    color: var(--react-autoql-text-color-accent); }
   0% {
-    background-color: var(--react-autoql-background-color-primary);
+    background-color: var(--react-autoql-background-color-secondary);
     color: var(--react-autoql-text-color-primary);
     opacity: 1; } }
 
@@ -3552,7 +3272,7 @@ ul {
   width: 100%;
   height: 100%;
   display: flex;
-  background: var(--react-autoql-background-color-secondary);
+  background: var(--react-autoql-background-color-primary);
   overflow: hidden;
   border-radius: 4px;
   flex-direction: column; }
@@ -3563,7 +3283,7 @@ ul {
   width: 100%;
   height: 60px;
   background: var(--react-autoql-accent-color);
-  color: var(--react-autoql-accent-text-color);
+  color: var(--react-autoql-text-color-accent);
   box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.1);
   flex: 0 0 auto;
   z-index: 1; }
@@ -3582,7 +3302,7 @@ ul {
 
 .react-autoql-drawer .react-autoql-header-center-container {
   position: relative;
-  color: var(--react-autoql-accent-text-color);
+  color: var(--react-autoql-text-color-accent);
   line-height: 60px;
   font-size: 18px;
   letter-spacing: 0.05em;
@@ -3592,8 +3312,7 @@ ul {
   white-space: nowrap; }
 
 .react-autoql-drawer .header-title {
-  -webkit-animation: fadeIn 0.3s;
-          animation: fadeIn 0.3s; }
+  animation: fadeIn 0.3s; }
 
 .react-autoql-drawer .react-autoql-drawer-header-btn {
   line-height: 1em;
@@ -3614,14 +3333,28 @@ ul {
   .react-autoql-drawer .react-autoql-drawer-header-btn.filter-locking span.react-autoql-icon svg {
     width: 22px;
     height: 22px; }
+  .react-autoql-drawer .react-autoql-drawer-header-btn .react-autoql-filter-lock-icon-container {
+    display: inline-block;
+    position: relative; }
+    .react-autoql-drawer .react-autoql-drawer-header-btn .react-autoql-filter-lock-icon-container .react-autoql-filter-lock-icon-badge {
+      position: absolute;
+      display: inline-block;
+      border: 2px solid var(--react-autoql-accent-color);
+      background: var(--react-autoql-warning-color);
+      border-radius: 50%;
+      height: 14px;
+      width: 14px;
+      right: -5px;
+      top: -4px; }
 
 .react-autoql-drawer .react-autoql-drawer:focus {
   outline: none; }
 
 .react-autoql-drawer .chat-header-container button {
+  position: relative;
   background: transparent;
   border: none;
-  color: var(--react-autoql-accent-text-color);
+  color: var(--react-autoql-text-color-accent);
   margin: 10px 0px 10px 0px;
   margin-right: 0;
   font-size: 20px;
@@ -3662,7 +3395,7 @@ ul {
   font-size: 22px; }
   .react-autoql-drawer .drawer-handle.default-logo {
     background-color: var(--react-autoql-accent-color, #26a7df);
-    color: var(--react-autoql-accent-text-color); }
+    color: var(--react-autoql-text-color-accent); }
     .react-autoql-drawer .drawer-handle.default-logo .react-autoql-bubbles-outlined {
       position: absolute;
       vertical-align: top;
@@ -3713,31 +3446,53 @@ ul {
 
 .react-autoql-drawer-resize-handle {
   position: absolute;
-  background: transparent; }
+  background: transparent;
+  z-index: 2; }
   .react-autoql-drawer-resize-handle.right {
     top: 0;
-    left: -5px;
+    left: -2px;
     width: 5px;
     height: 100vh;
+    border-right-color: transparent;
+    border-right-width: 3px;
+    border-right-style: solid;
+    transition: border-right-color 0.2s ease;
     cursor: ew-resize; }
+    .react-autoql-drawer-resize-handle.right:hover {
+      border-right-color: var(--react-autoql-accent-color); }
   .react-autoql-drawer-resize-handle.left {
     top: 0;
-    right: -5px;
+    right: -2px;
     width: 5px;
     height: 100vh;
+    border-left-color: transparent;
+    border-left-width: 3px;
+    border-left-style: solid;
     cursor: ew-resize; }
+    .react-autoql-drawer-resize-handle.left:hover {
+      border-left-color: var(--react-autoql-accent-color); }
   .react-autoql-drawer-resize-handle.top {
-    bottom: -5px;
+    bottom: -2px;
     left: 0;
     height: 5px;
     width: 100vw;
+    border-top-color: transparent;
+    border-top-width: 3px;
+    border-top-style: solid;
     cursor: ns-resize; }
+    .react-autoql-drawer-resize-handle.top:hover {
+      border-top-color: var(--react-autoql-accent-color); }
   .react-autoql-drawer-resize-handle.bottom {
-    top: -5px;
+    top: -2px;
     left: 0;
     height: 5px;
     width: 100vw;
+    border-bottom-color: transparent;
+    border-bottom-width: 3px;
+    border-bottom-style: solid;
     cursor: ns-resize; }
+    .react-autoql-drawer-resize-handle.bottom:hover {
+      border-bottom-color: var(--react-autoql-accent-color); }
 
 /* Tooltips */
 .react-autoql-tooltip {
@@ -3771,11 +3526,12 @@ ul {
   border-radius: 4px;
   box-shadow: 0px 0 8px rgba(0, 0, 0, 0.15);
   transition: opacity 0.2s ease 0s !important;
-  opacity: 1 !important; }
+  opacity: 1 !important;
+  overflow: hidden !important; }
 
 .clear-messages-confirm-popover {
   color: var(--react-autoql-text-color-primary);
-  background: var(--react-autoql-background-color-primary);
+  background: var(--react-autoql-background-color-secondary);
   text-align: right;
   padding: 18px;
   width: 266px; }
@@ -3848,7 +3604,7 @@ ul {
     position: relative;
     z-index: 1;
     background: var(--react-autoql-accent-color);
-    color: var(--react-autoql-accent-text-color);
+    color: var(--react-autoql-text-color-accent);
     opacity: 1;
     font-size: 22px;
     text-align: center;
@@ -3923,111 +3679,68 @@ ul {
   width: 65px; }
 
 .page-switcher-container.bottom .tab {
-  background: var(--react-autoql-background-color-secondary);
+  background: var(--react-autoql-background-color-primary);
   color: var(--react-autoql-text-color-primary); }
   .page-switcher-container.bottom .tab .react-autoql-icon.data-search svg {
-    stroke: var(--react-autoql-background-color-secondary);
+    stroke: var(--react-autoql-background-color-primary);
     stroke-width: 0.3px; }
 
 .page-switcher-container .tab.active {
-  background: var(--react-autoql-background-color-secondary);
+  background: var(--react-autoql-background-color-primary);
   color: var(--react-autoql-accent-color);
   box-shadow: -2px 0px 8px 2px rgba(0, 0, 0, 0.2);
   font-weight: bold;
   position: relative;
   z-index: 2; }
   .page-switcher-container .tab.active .react-autoql-icon.data-search svg {
-    stroke: var(--react-autoql-background-color-secondary);
+    stroke: var(--react-autoql-background-color-primary);
     stroke-width: 0.3px; }
 
 .page-switcher-container.bottom .tab.active {
   background: var(--react-autoql-accent-color);
-  color: var(--react-autoql-accent-text-color);
+  color: var(--react-autoql-text-color-accent);
   font-weight: bold; }
   .page-switcher-container.bottom .tab.active .react-autoql-icon.data-search svg {
     stroke: var(--react-autoql-accent-color);
     stroke-width: 0.3px; }
 
 /* animations */
-@-webkit-keyframes response-loading1 {
-  0% {
-    transform: scale(0); }
-  100% {
-    transform: scale(1); } }
 @keyframes response-loading1 {
   0% {
     transform: scale(0); }
   100% {
     transform: scale(1); } }
 
-@-webkit-keyframes response-loading3 {
-  0% {
-    transform: scale(1); }
-  100% {
-    transform: scale(0); } }
-
 @keyframes response-loading3 {
   0% {
     transform: scale(1); }
   100% {
     transform: scale(0); } }
 
-@-webkit-keyframes response-loading2 {
-  0% {
-    transform: translate(0, 0); }
-  100% {
-    transform: translate(19px, 0); } }
-
 @keyframes response-loading2 {
   0% {
     transform: translate(0, 0); }
   100% {
     transform: translate(19px, 0); } }
 
-@-webkit-keyframes scale-up-center {
-  0% {
-    transform: scale(0); }
-  100% {
-    transform: scale(1); } }
-
 @keyframes scale-up-center {
   0% {
     transform: scale(0); }
   100% {
     transform: scale(1); } }
 
-@-webkit-keyframes fadeIn {
-  0% {
-    opacity: 0; }
-  100% {
-    opacity: 1; } }
-
 @keyframes fadeIn {
   0% {
     opacity: 0; }
   100% {
     opacity: 1; } }
 
-@-webkit-keyframes slideDown {
-  0% {
-    transform: translateY(-100%); }
-  100% {
-    transform: translateY(0%); } }
-
 @keyframes slideDown {
   0% {
     transform: translateY(-100%); }
   100% {
     transform: translateY(0%); } }
 
-@-webkit-keyframes snackbarFadeout {
-  from {
-    top: 60px;
-    opacity: 1; }
-  to {
-    top: 30px;
-    opacity: 0; } }
-
 @keyframes snackbarFadeout {
   from {
     top: 60px;
@@ -4037,7 +3750,7 @@ ul {
     opacity: 0; } }
 
 .react-autoql-dashboard .react-autoql-dashboard-tile {
-  background: var(--react-autoql-background-color-primary, #fff);
+  background: var(--react-autoql-background-color-secondary, #fff);
   color: var(--react-autoql-text-color-primary, #404040);
   font-family: var(--react-autoql-font-family), sans-serif;
   height: 100%;
@@ -4106,7 +3819,7 @@ ul {
   .dashboard-tile-toolbars-container.left-padding {
     width: calc(100% - 40px); }
   .dashboard-tile-toolbars-container .split-view-btn {
-    background: var(--react-autoql-background-color-primary);
+    background: var(--react-autoql-background-color-secondary);
     display: inline-block;
     margin-right: 7px; }
     .dashboard-tile-toolbars-container .split-view-btn .react-autoql-icon {
@@ -4144,7 +3857,6 @@ ul {
     opacity: 0.3;
     pointer-events: none; }
   .react-autoql-dashboard-tile-inner-div .dashboard-tile-response-wrapper .react-autoql-table {
-    opacity: 0.9;
     color: var(--react-autoql-text-color-primary);
     font-size: 11px; }
   .react-autoql-dashboard-tile-inner-div .dashboard-tile-response-wrapper .react-autoql-response-content-container.table .query-output-footer {
@@ -4165,6 +3877,10 @@ ul {
   color: var(--react-autoql-text-color-primary);
   opacity: 0.8; }
 
+.react-autoql-dashboard-tile-inner-div
+.dashboard-tile-response-wrapper.editing .react-autoql-toolbar-btn.active {
+  color: var(--react-autoql-accent-color); }
+
 /* Safetynet styles specific to dashboard tiles */
 .react-autoql-dashboard-tile-inner-div
 .dashboard-tile-response-wrapper.editing {
@@ -4179,8 +3895,6 @@ ul {
 .dashboard-tile-response-wrapper.small
 .react-autoql-query-validation-description,
 .dashboard-tile-response-wrapper.small
-.react-autoql-suggestion-message-description,
-.dashboard-tile-response-wrapper.small
 .react-autoql-query-validation-execute-btn {
   display: none; }
 
@@ -4207,7 +3921,7 @@ ul {
   flex-shrink: 0;
   flex-grow: 0; }
   .dashboard-tile-title-container .dashboard-tile-title {
-    color: var(--react-autoql-accent-color, #26a7df); }
+    color: var(--react-autoql-dashboard-title-color); }
 
 .dashboard-tile-title-container .dashboard-tile-title {
   font-weight: bold;
@@ -4284,7 +3998,7 @@ ul {
     border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
     outline: none !important;
     color: var(--react-autoql-text-color-primary, #356f90);
-    background: var(--react-autoql-background-color-primary, #fff); }
+    background: var(--react-autoql-background-color-secondary, #fff); }
 
 .query-focused .dashboard-tile-left-input-container,
 .title-focused .dashboard-tile-right-input-container {
@@ -4323,7 +4037,7 @@ ul {
   border: 1px solid transparent;
   outline: none !important;
   color: var(--react-autoql-text-color-primary, #356f90);
-  background: var(--react-autoql-background-color-primary);
+  background: var(--react-autoql-background-color-secondary);
   margin: 0px;
   padding: 0px;
   width: 0px;
@@ -4372,7 +4086,7 @@ ul {
 
 .dashboard-tile-input-container
 .react-autosuggest__suggestions-container--open {
-  background-color: var(--react-autoql-background-color-primary);
+  background-color: var(--react-autoql-background-color-secondary);
   border: 1px solid var(--react-autoql-border-color);
   color: var(--react-autoql-text-color-primary); }
 
@@ -4432,33 +4146,10 @@ ul {
   font-size: 12px;
   color: var(--react-autoql-text-color-placeholder); }
 
-/* Dragging placeholder styles */
-.react-autoql-db-dragging-placeholder-container {
-  height: 100%;
-  width: 100%;
-  padding: 20px 30px;
-  display: flex;
-  flex-direction: column; }
-
-.react-autoql-db-dragging-placeholder-title {
-  width: 100%;
-  height: 35px;
-  background: #f3f3f3;
-  border-top-right-radius: 4px;
-  border-top-left-radius: 4px;
-  flex-shrink: 0;
-  flex-grow: 0; }
-
-.react-autoql-db-dragging-placeholder-content {
-  width: 100%;
-  height: 100%;
-  background: #f9f9f9;
-  border-bottom-right-radius: 4px;
-  border-bottom-left-radius: 4px; }
-
 .dashboard-tile-placeholder-text {
   font-size: 15px;
-  color: var(--react-autoql-text-color-placeholder, rgba(0, 0, 0, 0.3)); }
+  color: var(--react-autoql-text-color-placeholder, rgba(0, 0, 0, 0.3));
+  padding: 0 10px; }
   .dashboard-tile-placeholder-text .play-icon {
     vertical-align: bottom;
     line-height: 20px; }
@@ -4514,7 +4205,7 @@ ul {
   background: inherit; }
 
 .react-autoql-dashboard-container {
-  background: var(--react-autoql-background-color-secondary);
+  background: var(--react-autoql-background-color-primary);
   height: 100%;
   width: 100%;
   overflow: hidden; }
@@ -4542,7 +4233,6 @@ ul {
   padding: 0; }
 
 .dashboard-drilldown-modal .dashboard-drilldown-modal-content .react-autoql-table {
-  opacity: 0.9;
   font-size: 11px; }
 
 .dashboard-drilldown-modal .dashboard-drilldown-modal-content .splitter-layout {