react-autoql 7.3.3-alpha.2 → 7.4.0-alpha.0

package/dist/autoql.esm.css

@@ -1,3 +1,4 @@
+@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap");
 .react-autoql-spinner-centered {
   width: 100%;
   text-align: center;
@@ -6,32 +7,35 @@
 .react-autosuggest__suggestions-container--open::-webkit-scrollbar {
   visibility: visible !important; }
 
+span .react-autoql-icon {
+  vertical-align: middle;
+  padding-bottom: 3px; }
+
+a {
+  font-weight: 600;
+  color: var(--react-autoql-accent-color);
+  cursor: pointer; }
+
 .react-autoql-icon {
   position: relative;
-  opacity: 1; }
-  .react-autoql-icon.warning {
+  opacity: 1;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  vertical-align: baseline;
+  line-height: 1em;
+  box-sizing: content-box;
+  height: 1em;
+  width: 1em; }
+  .react-autoql-icon.react-autoql-icon-warning {
     color: var(--react-autoql-warning-color) !important; }
-  .react-autoql-icon.danger {
+  .react-autoql-icon.react-autoql-icon-danger {
     color: var(--react-autoql-danger-color) !important; }
-
-span.react-autoql-icon {
-  vertical-align: unset;
-  text-align: left;
-  margin: 0;
-  padding: 0;
-  float: none !important;
-  color: inherit; }
-  span.react-autoql-icon svg {
-    float: none !important;
-    color: inherit;
-    vertical-align: unset;
-    text-align: left;
-    margin: 0;
-    padding: 0;
-    opacity: 1;
-    height: 1em;
-    width: 1em;
-    margin-bottom: -0.15em; }
+  .react-autoql-icon.react-autoql-icon-spinning {
+    animation: spin 1.2s linear infinite; }
+  .react-autoql-icon.react-autoql-icon-disabled {
+    pointer-events: none;
+    opacity: 0.5; }
 
 .react-autoql-badge {
   position: absolute;
@@ -41,17 +45,24 @@ span.react-autoql-icon {
   height: 0.5em;
   top: -0.1em;
   right: -0.25em;
-  border-radius: 50%;
-  box-sizing: content-box; }
+  border-radius: 50%; }
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg); }
+  100% {
+    transform: rotate(360deg); } }
 
 .chat-voice-record-button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
   width: 40px;
   height: 40px;
   border-radius: 24px;
   margin: 10px;
   margin-left: 0;
   font-size: 18px;
-  line-height: 24px;
   outline: none !important;
   position: relative;
   cursor: pointer;
@@ -274,15 +285,15 @@ span.react-autoql-icon {
 
 .spinner-loader {
   display: inline-block;
-  width: 14px;
-  height: 14px;
+  width: 1em;
+  height: 1em;
   margin-right: 6px; }
 
 .spinner-loader:after {
   content: ' ';
   display: block;
-  width: 16px;
-  height: 16px;
+  width: 1em;
+  height: 1em;
   margin: 0px;
   border-radius: 50%;
   border: 1px solid currentColor;
@@ -502,48 +513,78 @@ span.react-autoql-icon {
     border-color: transparent transparent transparent var(--react-autoql-text-color-primary); }
 
 .react-autoql-btn {
+  display: flex;
+  flex-wrap: nowrap;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  width: auto;
+  height: auto;
   border-radius: 4px;
-  cursor: pointer;
   outline: none !important;
   transition: all 0.2s ease;
-  width: auto;
-  display: inline-block; }
+  cursor: pointer; }
+  .react-autoql-btn.btn-no-border {
+    border: none !important; }
+    .react-autoql-btn.btn-no-border:hover {
+      opacity: 0.8; }
+  .react-autoql-btn .react-autoql-icon {
+    display: flex; }
+  .react-autoql-btn .react-autoql-btn-icon {
+    margin-right: 6px;
+    margin-left: -3px;
+    font-size: 1.1em; }
 
 .react-autoql-btn.disabled {
   opacity: 0.4;
   cursor: not-allowed;
   pointer-events: none; }
 
-.react-autoql-btn.small {
+.react-autoql-btn.react-autoql-btn-small {
   padding: 2px 8px;
   margin: 2px 3px; }
 
-.react-autoql-btn.large {
+.react-autoql-btn.react-autoql-btn-medium {
+  padding: 6px 12px;
+  margin: 3px 3px; }
+
+.react-autoql-btn.react-autoql-btn-large {
   padding: 10px 16px;
   margin: 2px 5px; }
 
-.react-autoql-btn.default {
-  color: inherit;
-  border: 1px solid var(--react-autoql-border-color);
+.react-autoql-btn.btn-no-border {
+  color: var(--react-autoql-accent-color);
   background: inherit; }
-  .react-autoql-btn.default:hover {
-    border-color: var(--react-autoql-accent-color);
-    color: var(--react-autoql-accent-color); }
+  .react-autoql-btn.btn-no-border:hover {
+    background: var(--react-autoql-mask-color); }
 
-.react-autoql-btn.primary {
+.react-autoql-btn.react-autoql-btn-default {
+  border: 1px solid var(--react-autoql-accent-color);
+  color: var(--react-autoql-accent-color);
+  background: inherit; }
+  .react-autoql-btn.react-autoql-btn-default:not(.btn-no-border):hover {
+    background: var(--react-autoql-mask-color); }
+
+.react-autoql-btn.react-autoql-btn-primary {
   background: var(--react-autoql-accent-color);
   border: 1px solid var(--react-autoql-accent-color);
   color: var(--react-autoql-text-color-accent); }
-  .react-autoql-btn.primary:hover {
+  .react-autoql-btn.react-autoql-btn-primary:hover {
     opacity: 0.8; }
 
-.react-autoql-btn.danger {
+.react-autoql-btn.react-autoql-btn-danger:not(.btn-filled) {
   color: var(--react-autoql-danger-color, #ca0b00);
   border: 1px solid var(--react-autoql-danger-color, #ca0b00);
   background: inherit; }
-  .react-autoql-btn.danger:hover {
-    background-color: var(--react-autoql-danger-color, #ca0b00);
-    color: var(--react-autoql-text-color-accent); }
+  .react-autoql-btn.react-autoql-btn-danger:not(.btn-filled):hover {
+    background: var(--react-autoql-mask-color); }
+
+.react-autoql-btn.react-autoql-btn-danger.btn-filled {
+  color: var(--react-autoql-text-color-accent);
+  background: var(--react-autoql-danger-color, #ca0b00);
+  border: 1px solid var(--react-autoql-danger-color, #ca0b00); }
+  .react-autoql-btn.react-autoql-btn-danger.btn-filled:hover {
+    opacity: 0.8; }
 
 .react-autoql-table-container {
   -webkit-transform: translate3d(0, 0, 0);
@@ -584,6 +625,7 @@ span.react-autoql-icon {
     pointer-events: none;
     opacity: 0; }
   .react-autoql-table-container.empty:not(.filtering) .tabulator-headers {
+    overflow: hidden;
     height: 37px !important; }
   .react-autoql-table-container.empty .react-autoql-table.tabulator {
     overflow: auto; }
@@ -694,7 +736,7 @@ span.react-autoql-icon {
       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);
+      border-bottom: 1px solid var(--react-autoql-table-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 {
@@ -702,7 +744,7 @@ span.react-autoql-icon {
         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; }
+        border-color: var(--react-autoql-table-border-color) !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 {
@@ -734,12 +776,12 @@ span.react-autoql-icon {
       .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);
+      border-color: var(--react-autoql-table-border-color);
       background-color: var(--react-autoql-background-color-secondary); }
     .react-autoql-table-container .react-autoql-table.tabulator .tabulator-tableholder {
       background-color: inherit; }
 
-.react-autoql-table-date-picker {
+.react-autoql-popover-date-picker {
   background: var(--react-autoql-background-color-secondary);
   color: var(--react-autoql-text-color-primary);
   padding: 15px;
@@ -748,7 +790,7 @@ span.react-autoql-icon {
   justify-content: center;
   align-items: stretch;
   flex-direction: column; }
-  .react-autoql-table-date-picker h3 {
+  .react-autoql-popover-date-picker h3 {
     margin-top: 0;
     margin-left: 5px; }
 
@@ -782,7 +824,7 @@ span.react-autoql-icon {
       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;
+      box-shadow: var(--react-autoql-box-shadow-1);
       border-radius: 4px; }
       .table-loader.table-page-loader .page-loader-spinner .spinner-loader {
         margin: 0;
@@ -849,9 +891,14 @@ span.react-autoql-icon {
 .react-autoql-checkbox-tick {
   position: absolute;
   color: var(--react-autoql-text-color-accent);
-  left: 3px;
-  line-height: 20px;
-  pointer-events: none; }
+  pointer-events: none;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center; }
 
 .react-autoql-checkbox--switch__input::before {
   box-shadow: 0 0 2px 1px #00000030; }
@@ -894,8 +941,8 @@ span.react-autoql-icon {
   width: 36px;
   height: 20px;
   border-radius: 16px;
-  background: var(--react-autoql-background-color-tertiary);
-  border: 1px solid var(--react-autoql-background-color-tertiary); }
+  background: var(--react-autoql-background-color-switch-input);
+  border: 1px solid var(--react-autoql-background-color-switch-input); }
 
 .react-autoql-checkbox--switch__input::before {
   top: 2px;
@@ -967,72 +1014,94 @@ span.react-autoql-icon {
   background-color: var(--react-autoql-highlight-color);
   opacity: 0.2; }
 
-.react-autoql-select {
+.react-autoql-menu {
+  list-style-type: none;
+  width: 100%;
+  padding: 10px 0;
+  margin: 0;
+  max-height: 250px; }
+  .react-autoql-menu.has-subtitles .react-autoql-menu-item-title {
+    font-weight: 500;
+    opacity: 0.9; }
+  .react-autoql-menu .react-autoql-menu-item {
+    color: var(--react-autoql-text-color-primary);
+    padding: 10px 20px;
+    cursor: pointer; }
+    .react-autoql-menu .react-autoql-menu-item:hover, .react-autoql-menu .react-autoql-menu-item.active {
+      background: var(--react-autoql-hover-color); }
+    .react-autoql-menu .react-autoql-menu-item .react-autoql-menu-item-title {
+      display: flex;
+      align-items: center; }
+    .react-autoql-menu .react-autoql-menu-item .select-option-span {
+      display: flex;
+      align-items: center; }
+      .react-autoql-menu .react-autoql-menu-item .select-option-span .react-autoql-menu-icon {
+        font-size: 1.1em; }
+      .react-autoql-menu .react-autoql-menu-item .select-option-span .select-option-value-container {
+        display: flex;
+        flex-direction: column; }
+        .react-autoql-menu .react-autoql-menu-item .select-option-span .select-option-value-container .select-option-value-subtitle {
+          font-size: 0.875em;
+          opacity: 0.8; }
+
+.react-autoql-select-popover-container {
+  margin: 0 6px; }
+
+.react-autoql-select-and-label {
   display: inline-flex;
-  justify-content: space-between;
-  line-height: 36px;
-  height: 38px;
-  transition: color 0.2s ease, border-color 0.2s ease;
-  white-space: nowrap;
-  font-size: inherit;
-  cursor: pointer; }
-  .react-autoql-select:hover {
-    color: var(--react-autoql-accent-color, #26a7df); }
-    .react-autoql-select:hover .react-autoql-select-arrow {
+  flex-direction: column;
+  padding: 2px 5px; }
+  .react-autoql-select-and-label.react-autoql-select-full-width {
+    display: flex; }
+  .react-autoql-select-and-label .react-autoql-select {
+    display: inline-flex;
+    justify-content: space-between;
+    transition: color 0.2s ease, border-color 0.2s ease;
+    white-space: nowrap;
+    font-size: inherit;
+    cursor: pointer; }
+    .react-autoql-select-and-label .react-autoql-select.react-autoql-select-large {
+      line-height: 36px;
+      height: 38px; }
+    .react-autoql-select-and-label .react-autoql-select.react-autoql-select-small {
+      line-height: 32px;
+      height: 34px; }
+    .react-autoql-select-and-label .react-autoql-select:hover {
       color: var(--react-autoql-accent-color, #26a7df); }
-  .react-autoql-select:not(.outlined) {
-    font-weight: 600;
-    padding: 0;
-    margin: 0; }
-  .react-autoql-select.outlined {
-    margin: 0 3px;
-    padding: 0px 16px;
-    color: var(--react-autoql-text-color-primary);
-    border: 1px solid var(--react-autoql-border-color);
-    border-radius: 4px;
-    background: var(--react-autoql-background-color-secondary, white); }
-    .react-autoql-select.outlined:hover {
-      color: var(--react-autoql-accent-color);
-      border-color: var(--react-autoql-accent-color); }
-  .react-autoql-select .react-autoql-select-text {
-    display: block;
-    height: 100%; }
-    .react-autoql-select .react-autoql-select-text .react-autoql-select-text-placeholder {
-      color: var(--react-autoql-text-color-placeholder);
-      font-style: italic; }
-  .react-autoql-select .react-autoql-select-arrow {
-    display: flex;
-    align-items: center;
-    padding-left: 8px;
-    font-size: 0.875em;
-    color: var(--react-autoql-text-color-placeholder); }
+      .react-autoql-select-and-label .react-autoql-select:hover .react-autoql-select-arrow {
+        color: var(--react-autoql-accent-color, #26a7df); }
+    .react-autoql-select-and-label .react-autoql-select:not(.outlined) {
+      font-weight: 600;
+      padding: 0;
+      margin: 0; }
+    .react-autoql-select-and-label .react-autoql-select.outlined {
+      padding: 0px 16px;
+      color: var(--react-autoql-text-color-primary);
+      border: 1px solid var(--react-autoql-border-color);
+      border-radius: 4px;
+      background: var(--react-autoql-background-color-secondary, white); }
+      .react-autoql-select-and-label .react-autoql-select.outlined.react-autoql-select-small {
+        padding: 0px 14px; }
+      .react-autoql-select-and-label .react-autoql-select.outlined:hover {
+        color: var(--react-autoql-accent-color);
+        border-color: var(--react-autoql-accent-color); }
+    .react-autoql-select-and-label .react-autoql-select .react-autoql-select-text {
+      display: block;
+      height: 100%; }
+      .react-autoql-select-and-label .react-autoql-select .react-autoql-select-text .react-autoql-select-text-placeholder {
+        color: var(--react-autoql-text-color-placeholder);
+        font-style: italic; }
+    .react-autoql-select-and-label .react-autoql-select .react-autoql-select-arrow {
+      display: flex;
+      align-items: center;
+      padding-left: 8px;
+      font-size: 0.875em;
+      color: var(--react-autoql-text-color-placeholder); }
 
 .react-autoql-select-popup-container {
   background: var(--react-autoql-background-color-secondary);
-  padding: 10px 0;
   max-height: 300px;
   overflow-y: auto; }
-  .react-autoql-select-popup-container .react-autoql-select-option > span {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: flex-start; }
-  .react-autoql-select-popup-container .react-autoql-select-option.active {
-    background: var(--react-autoql-hover-color); }
-  .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); }
 
 g.legendOrdinal,
 g.legendOrdinal tspan {
@@ -1123,8 +1192,6 @@ g.legendOrdinal tspan {
     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; }
@@ -1152,7 +1219,7 @@ g.legendOrdinal tspan {
         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 {
+  .number-axis-selector-popover .number-axis-selector-popover-content .agg-type-symbol .react-autoql-select {
     font-weight: 600;
     font-size: 12px;
     height: 26px;
@@ -1499,37 +1566,25 @@ g.legendOrdinal .legendTitle tspan {
   display: inline-block;
   position: relative; }
 
-.react-autoql-select-popup-container.query-validation-select {
-  padding: 5px 0;
+.react-autoql-select-popover-container.query-validation-select {
   letter-spacing: 0.03em;
-  font-family: var(--react-autoql-font-family), sans-serif; }
-  .react-autoql-select-popup-container.query-validation-select .react-autoql-select-option {
-    height: unset;
-    font-size: 14px;
-    line-height: 24px;
-    padding: 0 15px; }
-  .react-autoql-select-popup-container.query-validation-select .react-autoql-select-option:last-of-type {
-    color: #d84830; }
+  margin: 0; }
+
+.query-validation-select .react-autoql-select-popup-container .react-autoql-menu-item {
+  padding: 5px 15px; }
+
+.query-validation-select .react-autoql-select-popup-container .react-autoql-menu-item:last-of-type {
+  color: #d84830; }
 
 .react-autoql-query-validation-query {
   text-align: center; }
 
-.react-autoql-query-validation-execute-btn {
-  background: var(--react-autoql-background-color-secondary);
-  border: 1px solid var(--react-autoql-border-color);
-  border-radius: 4px;
-  height: 38px;
-  width: calc(100% - 15px);
-  margin: 5px;
-  margin-top: 24px;
-  color: inherit;
-  cursor: pointer;
-  outline: none !important;
-  transition: all 0.2s ease;
-  box-shadow: var(--react-autoql-box-shadow-color, rgba(0, 0, 0, 0.15)) 0px 1px 0px; }
-
-.react-autoql-query-validation-execute-btn:hover {
-  border-color: #28a8e0; }
+.react-autoql-query-validation-execute-btn-container {
+  display: flex;
+  width: 100%; }
+  .react-autoql-query-validation-execute-btn-container .react-autoql-btn.react-autoql-query-validation-execute-btn {
+    margin-top: 24px;
+    flex: 1; }
 
 .react-autoql-execute-query-icon {
   font-size: 16px;
@@ -1543,21 +1598,22 @@ g.legendOrdinal .legendTitle tspan {
     vertical-align: top;
     fill: var(--react-autoql-accent-color); }
 
-.react-autoql-query-validation-select {
-  position: relative;
-  display: inline-block;
-  height: 2em;
-  background: none;
-  outline: none !important;
-  border: none;
-  letter-spacing: 0.05em;
-  font-family: inherit;
-  font-size: inherit;
-  margin: 0;
-  padding: 0;
-  border-radius: 0;
-  border-bottom: 1px dashed;
-  color: var(--react-autoql-accent-color); }
+.react-autoql-query-validation-select.react-autoql-select-and-label {
+  padding: 0 !important; }
+  .react-autoql-query-validation-select.react-autoql-select-and-label .react-autoql-select {
+    position: relative;
+    height: 2em !important;
+    background: none;
+    outline: none !important;
+    border: none;
+    letter-spacing: 0.05em;
+    font-family: inherit;
+    font-size: inherit;
+    margin: 0;
+    padding: 0 !important;
+    border-radius: 0;
+    border-bottom: 1px dashed;
+    color: var(--react-autoql-accent-color); }
 
 .react-autoql-query-validation-delete-button {
   position: relative;
@@ -1578,14 +1634,18 @@ g.legendOrdinal .legendTitle tspan {
   max-width: 300px; }
 
 .single-value-response-flex-container {
-  flex: 1; }
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center; }
   .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; }
+      font-size: 20px;
+      font-weight: 400; }
       .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 {
@@ -1665,7 +1725,8 @@ g.legendOrdinal .legendTitle tspan {
   cursor: pointer; }
 
 .viz-toolbar {
-  display: inline-block;
+  display: flex;
+  flex-direction: row;
   background: inherit;
   padding: 5px;
   border-radius: 6px;
@@ -1673,20 +1734,21 @@ g.legendOrdinal .legendTitle tspan {
   background: var(--react-autoql-background-color-secondary);
   border: 1px solid var(--react-autoql-border-color);
   box-shadow: 0px 2px 3px -2px var(--react-autoql-box-shadow-color); }
-  .viz-toolbar.vertical .react-autoql-toolbar-btn {
-    display: block; }
+  .viz-toolbar.vertical {
+    flex-direction: column; }
 
 .react-autoql-toolbar-btn {
   height: 28px;
   width: 28px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   background: none;
   border: none;
+  outline: none !important;
   font-size: 16px;
-  line-height: 28px;
-  vertical-align: top;
   color: var(--react-autoql-text-color-primary);
-  cursor: pointer;
-  outline: none !important; }
+  cursor: pointer; }
   .react-autoql-toolbar-btn.filter-btn {
     line-height: 24px; }
   .react-autoql-toolbar-btn.selected {
@@ -1744,6 +1806,9 @@ g.legendOrdinal .legendTitle tspan {
 
 
 .ReactModal__Overlay {
+  display: flex;
+  justify-content: center;
+  align-items: center;
   background-color: transparent !important;
   transition: background-color 0.2s ease-in-out;
   z-index: 9999; }
@@ -1755,18 +1820,21 @@ g.legendOrdinal .legendTitle tspan {
   background-color: transparent !important; }
 
 .ReactModal__Content {
+  position: initial !important;
   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);
-  border: 1px solid var(--react-autoql-border-color) !important;
   background: var(--react-autoql-background-color-secondary) !important;
   box-shadow: 0 0 14px 1px var(--react-autoql-box-shadow-color, rgba(0, 0, 0, 0.15));
+  border: 1px solid var(--react-autoql-border-color) !important;
+  border-radius: 4px !important;
+  outline: none !important;
   padding: 0 !important;
-  margin: auto auto;
-  margin-top: 5vh;
+  margin-top: 20px;
+  margin-bottom: 30px;
   max-width: 90vw;
   max-height: calc(100vh - 90px); }
   .ReactModal__Content input.react-autoql-input,
@@ -1796,12 +1864,24 @@ g.legendOrdinal .legendTitle tspan {
   overflow: hidden; }
 
 .react-autoql-modal-header {
+  display: flex;
+  align-items: flex-start;
   position: relative;
-  text-align: center;
-  flex: 0 0 52px;
-  border-bottom: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05));
-  padding: 14px 60px;
-  font-size: 16px; }
+  border-bottom: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05)); }
+  .react-autoql-modal-header .react-autoql-modal-header-title-container {
+    flex: 1;
+    text-align: center;
+    padding: 14px 0px 14px 60px; }
+  .react-autoql-modal-header .react-autoql-modal-header-title {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 17px;
+    margin: 3px; }
+    .react-autoql-modal-header .react-autoql-modal-header-title .react-autoql-icon {
+      margin-right: 5px; }
+  .react-autoql-modal-header .react-autoql-modal-header-subtitle {
+    font-size: 14px; }
 
 .react-autoql-modal-footer {
   position: relative;
@@ -1813,34 +1893,39 @@ g.legendOrdinal .legendTitle tspan {
 .react-autoql-modal-body {
   display: flex;
   flex-direction: column;
-  padding: 10px 20px;
+  padding: 20px 30px;
   flex: 1; }
   .react-autoql-modal-body h3 {
     color: var(--react-autoql-text-color-primary); }
 
 .react-autoql-modal-close-btn {
-  position: absolute !important;
-  top: 10px;
-  right: 18px;
+  flex: 0;
   font-size: 22px;
+  margin: 16px;
+  padding-left: 15px;
   opacity: 0.6 !important;
-  cursor: pointer; }
+  cursor: pointer;
+  box-sizing: content-box; }
 
 .react-autoql-modal-close-btn:hover {
   opacity: 1 !important; }
 
 
 .react-autoql-notifications-button-container {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   position: relative;
-  display: inline-block;
   font-size: inherit;
   line-height: 1em;
   width: 1em;
   height: 1em; }
   .react-autoql-notifications-button-container .react-autoql-notifications-button {
     font-size: 1em;
-    line-height: 0;
-    vertical-align: bottom; }
+    height: 1em;
+    width: 1em;
+    padding: 0;
+    margin: 0; }
   .react-autoql-notifications-button-container .react-autoql-notifications-badge {
     position: absolute;
     border: 2px solid #fff;
@@ -1857,97 +1942,259 @@ g.legendOrdinal .legendTitle tspan {
     position: absolute;
     display: inline-block;
     border: 1px solid currentColor;
-    background: #f5222d;
+    background: var(--react-autoql-badge-color);
     border-radius: 50%;
     height: 0.6em;
     width: 0.6em;
     top: -0.2em;
     right: -0.2em; }
 
-.react-autoql-input-container {
+.react-autoql-input-and-label-container {
   position: relative;
-  margin: 2px 5px;
-  display: inline-block; }
-  .react-autoql-input-container .react-autoql-input {
-    border: 1px solid rgba(0, 0, 0, 0.1);
-    border-radius: 4px;
-    line-height: 32px;
-    min-height: 34px;
-    padding: 0 10px;
-    width: 100%;
-    outline: none !important;
-    transition: all 0.2s ease;
-    transition-property: border-color, color, opacity; }
-    .react-autoql-input-container .react-autoql-input.with-icon {
-      padding-left: 38px; }
-    .react-autoql-input-container .react-autoql-input::-moz-placeholder {
-      /* Chrome, Firefox, Opera, Safari 10.1+ */
-      color: rgba(0, 0, 0, 0.2);
-      opacity: 1;
-      /* Firefox */
-      font-style: italic; }
-    .react-autoql-input-container .react-autoql-input::placeholder {
-      /* Chrome, Firefox, Opera, Safari 10.1+ */
-      color: rgba(0, 0, 0, 0.2);
-      opacity: 1;
-      /* Firefox */
-      font-style: italic; }
-  .react-autoql-input-container .react-autoql-input-icon {
-    position: absolute;
-    left: 12px;
-    top: 8px;
-    opacity: 0.4;
-    transition: all 0.2s ease; }
-    .react-autoql-input-container .react-autoql-input-icon span.react-autoql-icon svg {
-      height: 17px;
-      width: 17px; }
-  .react-autoql-input-container:hover .react-autoql-input,
-  .react-autoql-input-container .react-autoql-input:focus {
-    border-color: var(--react-autoql-accent-color, #26a7df); }
-  .react-autoql-input-container:hover .react-autoql-input-icon,
-  .react-autoql-input-container .react-autoql-input-icon.focus {
-    opacity: 1;
-    color: var(--react-autoql-accent-color, #26a7df); }
-
-.react-autoql-notification-rule-container {
-  display: flex; }
-  .react-autoql-notification-rule-container .react-autoql-rule-input {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    width: 100%; }
-    .react-autoql-notification-rule-container .react-autoql-rule-input input {
-      line-height: 37px; }
-  .react-autoql-notification-rule-container .react-autoql-rule-first-input-container {
-    display: flex;
-    flex: 1; }
-  .react-autoql-notification-rule-container .react-autoql-rule-second-input-container {
-    display: flex;
-    padding: 2px 0;
-    border-radius: 4px;
-    transition: all 0.3s ease;
-    flex: 1; }
-    .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-rule-condition-select {
-      flex: 0;
-      flex-basis: 33px;
+  padding: 2px 5px;
+  display: inline-flex;
+  flex-direction: column; }
+  .react-autoql-input-and-label-container.react-autoql-input-full-width {
+    display: flex; }
+  .react-autoql-input-and-label-container .react-autoql-input-container {
+    position: relative;
+    display: inline-flex;
+    flex-direction: row; }
+    .react-autoql-input-and-label-container .react-autoql-input-container.react-autoql-input-small .react-autoql-input {
+      min-height: 34px; }
+    .react-autoql-input-and-label-container .react-autoql-input-container input::-webkit-outer-spin-button,
+    .react-autoql-input-and-label-container .react-autoql-input-container input::-webkit-inner-spin-button {
+      /* display: none; <- Crashes Chrome on hover */
+      -webkit-appearance: none;
+      margin: 0;
+      /* <-- Apparently some margin are still there even though it's hidden */ }
+    .react-autoql-input-and-label-container .react-autoql-input-container input[type='number'] {
+      -moz-appearance: textfield;
+      /* Firefox */ }
+    .react-autoql-input-and-label-container .react-autoql-input-container .react-autoql-input-and-icon {
+      flex: 1; }
+    .react-autoql-input-and-label-container .react-autoql-input-container.with-select .react-autoql-input {
+      border-radius: 0px 4px 4px 0px; }
+    .react-autoql-input-and-label-container .react-autoql-input-container .react-autoql-text-input-selector {
+      flex: 0;
+      margin: 0;
+      padding: 0; }
+      .react-autoql-input-and-label-container .react-autoql-input-container .react-autoql-text-input-selector .react-autoql-select {
+        border-radius: 4px 0px 0px 4px;
+        border-right: none;
+        margin: 0; }
+    .react-autoql-input-and-label-container .react-autoql-input-container .react-autoql-input {
+      border: 1px solid var(--react-autoql-border-color);
+      border-radius: 4px;
+      min-height: 38px;
+      width: 100%;
+      font-size: inherit;
+      font-family: inherit;
+      outline: none !important;
+      transition: all 0.2s ease;
+      transition-property: border-color, color, opacity;
+      padding: 10px;
+      line-height: 1em; }
+      .react-autoql-input-and-label-container .react-autoql-input-container .react-autoql-input:disabled {
+        background: var(--react-autoql-hover-color);
+        border-color: var(--react-autoql-border-color) !important;
+        cursor: default; }
+      .react-autoql-input-and-label-container .react-autoql-input-container .react-autoql-input:hover, .react-autoql-input-and-label-container .react-autoql-input-container .react-autoql-input:focus {
+        border-color: var(--react-autoql-accent-color); }
+      .react-autoql-input-and-label-container .react-autoql-input-container .react-autoql-input.area {
+        line-height: inherit; }
+      .react-autoql-input-and-label-container .react-autoql-input-container .react-autoql-input:not(textarea) {
+        padding: 0 10px; }
+      .react-autoql-input-and-label-container .react-autoql-input-container .react-autoql-input.with-select {
+        padding-left: 14px; }
+      .react-autoql-input-and-label-container .react-autoql-input-container .react-autoql-input.with-icon {
+        padding-left: 35px; }
+      .react-autoql-input-and-label-container .react-autoql-input-container .react-autoql-input::-moz-placeholder {
+        /* Chrome, Firefox, Opera, Safari 10.1+ */
+        color: var(--react-autoql-text-color-placeholder);
+        opacity: 1;
+        /* Firefox */
+        font-style: italic; }
+      .react-autoql-input-and-label-container .react-autoql-input-container .react-autoql-input::placeholder {
+        /* Chrome, Firefox, Opera, Safari 10.1+ */
+        color: var(--react-autoql-text-color-placeholder);
+        opacity: 1;
+        /* Firefox */
+        font-style: italic; }
+    .react-autoql-input-and-label-container .react-autoql-input-container .react-autoql-input-icon {
+      position: absolute;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      transition: color 0.2s ease, opacity 0.2s ease;
+      color: var(--react-autoql-text-color-placeholder);
+      height: 100%;
+      line-height: 100%;
+      left: 12px;
+      top: 0; }
+      .react-autoql-input-and-label-container .react-autoql-input-container .react-autoql-input-icon span.react-autoql-icon svg {
+        height: 17px;
+        width: 17px; }
+    .react-autoql-input-and-label-container .react-autoql-input-container .react-autoql-text-input-selector .react-autoql-select:hover {
+      border-color: var(--react-autoql-accent-color); }
+    .react-autoql-input-and-label-container .react-autoql-input-container:hover .react-autoql-input {
+      border-left-color: var(--react-autoql-accent-color); }
+    .react-autoql-input-and-label-container .react-autoql-input-container:hover .react-autoql-input-icon {
+      color: var(--react-autoql-accent-color); }
+
+.react-autoql-input-label {
+  display: flex;
+  align-items: center;
+  padding-bottom: 3px;
+  margin: 0;
+  font-size: 0.9em;
+  color: var(--react-autoql-text-color-primary);
+  opacity: 0.8;
+  white-space: nowrap; }
+  .react-autoql-input-label .react-autoql-icon {
+    margin: 0 3px;
+    opacity: 0.6; }
+
+.react-autoql-chip {
+  position: relative;
+  display: inline-flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  border: 1px solid transparent;
+  background-color: var(--react-autoql-background-color-secondary);
+  color: var(--react-autoql-text-color-primary);
+  transition: all 0.2s ease;
+  margin-right: 5px;
+  font-size: 0.875em;
+  border-radius: 50px;
+  padding: 5px 12px;
+  overflow: hidden; }
+  .react-autoql-chip .react-autoql-chip-content {
+    display: flex;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+    align-items: center; }
+  .react-autoql-chip .react-autoql-chip-background {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    opacity: 0.3;
+    background: var(--react-autoql-accent-color); }
+  .react-autoql-chip.selected {
+    background-color: var(--react-autoql-accent-color);
+    color: var(--react-autoql-text-color-accent); }
+  .react-autoql-chip .react-autoql-chip-delete-btn {
+    margin-left: 8px;
+    transition: opacity 0.2s ease;
+    opacity: 0.7;
+    cursor: pointer; }
+    .react-autoql-chip .react-autoql-chip-delete-btn:hover {
+      opacity: 1;
+      color: var(--react-autoql-accent-color); }
+
+.react-autoql-confirm-popover-click-wrapper {
+  display: flex; }
+
+.react-autoql-confirm-popover-content {
+  padding: 10px; }
+  .react-autoql-confirm-popover-content .react-autoql-confirm-popover-title {
+    display: flex;
+    align-items: center;
+    padding: 10px;
+    margin-bottom: 8px;
+    font-size: 15px;
+    min-width: 200px; }
+    .react-autoql-confirm-popover-content .react-autoql-confirm-popover-title .react-autoql-icon {
+      margin-right: 6px; }
+  .react-autoql-confirm-popover-content .react-autoql-confirm-popover-button-container {
+    display: flex;
+    flex-wrap: nowrap;
+    justify-content: flex-end;
+    align-items: center; }
+
+.react-autoql-rule-simple .react-autoql-data-alert-filters-container {
+  padding: 5px;
+  margin-bottom: 20px; }
+
+.react-autoql-rule-simple.with-query-validation .react-autoql-rule-condition-select-input-container {
+  margin-bottom: 30px; }
+
+.react-autoql-rule-simple .react-autoql-notification-rule-container {
+  display: flex;
+  align-items: flex-end;
+  margin-top: 5px; }
+  .react-autoql-rule-simple .react-autoql-notification-rule-container .react-autoql-rule-input .react-autoql-input-icon.react-autoql-bubbles-outlined {
+    font-size: 18px !important; }
+  .react-autoql-rule-simple .react-autoql-notification-rule-container .rule-second-input-type-select {
+    text-decoration: underline;
+    cursor: pointer; }
+  .react-autoql-rule-simple .react-autoql-notification-rule-container .react-autoql-input-container,
+  .react-autoql-rule-simple .react-autoql-notification-rule-container .react-autoql-rule-condition-select {
+    margin: 0 !important; }
+  .react-autoql-rule-simple .react-autoql-notification-rule-container .react-autoql-input-container:hover + .react-autoql-rule-term-type-selector,
+  .react-autoql-rule-simple .react-autoql-notification-rule-container .react-autoql-input-container.focus + .react-autoql-rule-term-type-selector {
+    color: var(--react-autoql-accent-color);
+    border-color: var(--react-autoql-accent-color); }
+  .react-autoql-rule-simple .react-autoql-notification-rule-container .react-autoql-rule-input {
+    display: flex;
+    flex-direction: column;
+    flex: 1; }
+    .react-autoql-rule-simple .react-autoql-notification-rule-container .react-autoql-rule-input .react-autoql-input-icon.react-autoql-bubbles-outlined {
+      padding-bottom: 2px; }
+  .react-autoql-rule-simple .react-autoql-notification-rule-container .react-autoql-rule-first-input-container {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    margin-bottom: 28px; }
+  .react-autoql-rule-simple .react-autoql-notification-rule-container .react-autoql-rule-condition-select-input-container {
+    display: flex;
+    flex-direction: column;
+    padding: 2px 0;
+    border-radius: 4px;
+    transition: all 0.3s ease;
+    flex: 0 0 auto;
+    margin-right: 12px; }
+  .react-autoql-rule-simple .react-autoql-notification-rule-container .react-autoql-rule-second-input-container {
+    display: flex;
+    flex-direction: column;
+    padding: 2px 0;
+    border-radius: 4px;
+    transition: all 0.3s ease;
+    flex: 1; }
+    .react-autoql-rule-simple .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-rule-condition-select {
+      flex: 0;
+      flex-basis: 33px;
       height: 39px; }
-    .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-rule-input {
-      flex: 1;
-      margin-left: 4px; }
-    .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-delete-compare-btn {
+    .react-autoql-rule-simple .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-rule-input {
+      flex: 1; }
+    .react-autoql-rule-simple .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-delete-compare-btn {
       cursor: pointer;
       opacity: 0.6;
       padding: 6px; }
-      .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-delete-compare-btn:hover {
+      .react-autoql-rule-simple .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-delete-compare-btn:hover {
         opacity: 1; }
-    .react-autoql-notification-rule-container .react-autoql-rule-second-input-container.hidden {
+    .react-autoql-rule-simple .react-autoql-notification-rule-container .react-autoql-rule-second-input-container.hidden {
       display: none; }
-    .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-input-container {
-      margin: 0; }
-    .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-input-container:hover + .react-autoql-rule-term-type-selector,
-    .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-input-container.focus + .react-autoql-rule-term-type-selector {
-      color: var(--react-autoql-accent-color, #26a7df);
-      border-color: var(--react-autoql-accent-color, #26a7df); }
+
+.data-alert-rule-formatted-query {
+  display: flex;
+  align-items: center;
+  margin-top: 3px;
+  font-weight: 600;
+  padding: 3px 5px;
+  margin-bottom: 20px;
+  margin-top: 10px; }
+  .data-alert-rule-formatted-query .data-alert-rule-tooltip-icon {
+    margin: 0;
+    padding: 0;
+    margin-left: 10px;
+    color: var(--react-autoql-text-color-placeholder);
+    opacity: 0.6; }
+  .data-alert-rule-formatted-query .react-autoql-icon.react-autoql-bubbles-outlined {
+    margin-right: 5px; }
 
 .read-only-rule-term {
   display: inline-block;
@@ -1960,22 +2207,31 @@ g.legendOrdinal .legendTitle tspan {
   margin-top: 2px;
   border-radius: 4px; }
 
-.expression-term-validation-error {
-  padding: 0 10px;
-  color: var(--react-autoql-warning-color); }
+.rule-simple-validation-container {
+  display: flex;
+  justify-content: flex-end;
+  padding-top: 5px;
+  height: 30px; }
+  .rule-simple-validation-container .expression-term-validation {
+    display: inline-flex;
+    justify-content: flex-end;
+    align-items: center;
+    height: 20px; }
+    .rule-simple-validation-container .expression-term-validation .react-autoql-icon {
+      margin-right: 5px;
+      vertical-align: text-bottom;
+      margin-bottom: 1px; }
+  .rule-simple-validation-container .expression-term-validation-loading {
+    color: var(--react-autoql-text-color-placeholder); }
+  .rule-simple-validation-container .expression-term-validation-error {
+    color: var(--react-autoql-warning-color); }
+  .rule-simple-validation-container .expression-term-validation-valid {
+    color: var(--react-autoql-success-color); }
 
 .notification-rule-outer-container {
   position: relative;
-  border: 1px solid transparent;
-  border-radius: 4px;
   padding-bottom: 5px; }
 
-.expression-error-message {
-  padding-left: 5px; }
-
-.data-alerts-container.read-only .react-autoql-notification-group-container {
-  border: none; }
-
 .react-autoql-notification-list-item {
   display: flex;
   flex-direction: column;
@@ -1984,54 +2240,117 @@ g.legendOrdinal .legendTitle tspan {
   overflow: hidden;
   background: var(--react-autoql-background-color-secondary, #fff);
   border-radius: 4px;
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
+  box-shadow: var(--react-autoql-box-shadow-1);
   margin-bottom: 8px;
   color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.6));
   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);
   animation: slideIn 0.5s cubic-bezier(0.26, 0.26, 0, 1);
-  animation-fill-mode: both;
-  animation-delay: 0s; }
+  animation-fill-mode: both; }
+  .react-autoql-notification-list-item.is-error .react-autoql-notification-alert-strip {
+    background: var(--react-autoql-warning-color); }
+  .react-autoql-notification-list-item.is-error.unread .react-autoql-notification-display-name-container .react-autoql-notification-display-name {
+    color: var(--react-autoql-warning-color); }
+  .react-autoql-notification-list-item .react-autoql-notification-item-expand-arrow {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    width: 100%;
+    bottom: 10px;
+    opacity: 0;
+    transition: opacity 0.2s ease;
+    color: var(--react-autoql-text-color-primary);
+    pointer-events: none; }
+    .react-autoql-notification-list-item .react-autoql-notification-item-expand-arrow .react-autoql-icon {
+      transform: scalex(1.75); }
+  .react-autoql-notification-list-item .react-autoql-notification-item-hover-overlay {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    background-color: var(--react-autoql-accent-color);
+    opacity: 0;
+    pointer-events: none; }
   .react-autoql-notification-list-item .single-value-response {
     font-size: 32px;
     margin-top: -6px;
     opacity: 0.9; }
-  .react-autoql-notification-list-item .viz-toolbar {
-    border: none; }
-    .react-autoql-notification-list-item .viz-toolbar .react-autoql-toolbar-btn {
-      height: 33px; }
-  .react-autoql-notification-list-item .react-autoql-notification-details-title {
+  .react-autoql-notification-list-item .notification-error-message-container {
+    text-align: center;
+    padding: 30px;
+    border-top: 1px solid var(--react-autoql-background-color-primary); }
+  .react-autoql-notification-list-item .notification-error-reinitialize-btn {
+    margin: 20px; }
+    .react-autoql-notification-list-item .notification-error-reinitialize-btn.restart-success {
+      background-color: var(--react-autoql-success-color);
+      border-color: var(--react-autoql-success-color);
+      color: #ffffff;
+      pointer-events: none;
+      cursor: default; }
+  .react-autoql-notification-list-item .notification-error-reinitialize-btn,
+  .react-autoql-notification-list-item .notification-delete-confirm-popover {
+    display: inline-flex; }
+  .react-autoql-notification-list-item .react-autoql-notification-query-title {
     font-weight: 600;
     padding-top: 20px;
     padding-bottom: 5px; }
-  .react-autoql-notification-list-item.expanded .react-autoql-notification-list-item-header {
-    border-bottom: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.04)); }
-  .react-autoql-notification-list-item .react-autoql-notification-details {
-    overflow: hidden; }
-  .react-autoql-notification-list-item.animation-complete .react-autoql-notification-details {
-    overflow: auto; }
-  .react-autoql-notification-list-item:hover:not(.expanded) {
-    background-color: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.01)); }
-  .react-autoql-notification-list-item:hover .react-autoql-notification-delete-icon {
-    opacity: 1; }
-  .react-autoql-notification-list-item.triggered .react-autoql-notification-display-name {
-    color: var(--react-autoql-accent-color, #26a7df) !important; }
-  .react-autoql-notification-list-item.triggered .react-autoql-notification-dismiss-btn {
-    margin-top: 3px;
-    color: var(--react-autoql-accent-color, #26a7df); }
-  .react-autoql-notification-list-item.triggered .react-autoql-notification-alert-strip {
+  .react-autoql-notification-list-item .react-autoql-notification-condition-statement {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    padding: 10px 20px;
+    font-weight: 500;
+    color: var(--react-autoql-accent-color); }
+    .react-autoql-notification-list-item .react-autoql-notification-condition-statement .data-alert-condition-statement-query1,
+    .react-autoql-notification-list-item .react-autoql-notification-condition-statement .data-alert-condition-statement-query2 {
+      font-style: italic; }
+    .react-autoql-notification-list-item .react-autoql-notification-condition-statement .data-alert-condition-statement-operator {
+      text-decoration: underline; }
+    .react-autoql-notification-list-item .react-autoql-notification-condition-statement .data-alerts-container,
+    .react-autoql-notification-list-item .react-autoql-notification-condition-statement .notification-rule-outer-container {
+      display: inline; }
+  .react-autoql-notification-list-item:hover:not(.expanded) .react-autoql-notification-item-expand-arrow {
+    opacity: 0.5; }
+  .react-autoql-notification-list-item:hover:not(.expanded) .react-autoql-notification-item-hover-overlay, .react-autoql-notification-list-item.menu-open:not(.expanded) .react-autoql-notification-item-hover-overlay {
+    opacity: 0.05; }
+  .react-autoql-notification-list-item.unread .react-autoql-notification-display-name-container .react-autoql-notification-display-name {
+    font-weight: 500;
+    color: var(--react-autoql-accent-color); }
+    .react-autoql-notification-list-item.unread .react-autoql-notification-display-name-container .react-autoql-notification-display-name .react-autoql-icon svg {
+      stroke-width: 2.5px; }
+  .react-autoql-notification-list-item.unread .react-autoql-notification-alert-strip {
     opacity: 1; }
   .react-autoql-notification-list-item .react-autoql-notification-expanded-content {
     display: flex;
     flex-direction: column;
     justify-content: stretch;
-    transition: height 0.2s ease;
-    height: 0;
-    opacity: 0; }
-    .react-autoql-notification-list-item .react-autoql-notification-expanded-content.visible {
-      height: 400px;
-      opacity: 1; }
+    flex-wrap: nowrap;
+    flex: 0 1 auto;
+    transition: max-height 0.3s ease, opacity 0.3s ease;
+    opacity: 1;
+    min-height: 0px;
+    max-height: 0px;
+    overflow: hidden; }
+    .react-autoql-notification-list-item .react-autoql-notification-expanded-content.loading .react-autoql-notification-content-container,
+    .react-autoql-notification-list-item .react-autoql-notification-expanded-content.loading .react-autoql-notification-extra-content {
+      opacity: 0; }
+    .react-autoql-notification-list-item .react-autoql-notification-expanded-content.expanded {
+      position: relative;
+      min-height: 70px;
+      max-height: 500px; }
+      .react-autoql-notification-list-item .react-autoql-notification-expanded-content.expanded .react-autoql-notification-query-data-container {
+        flex: 1;
+        visibility: visible;
+        position: relative;
+        opacity: 1; }
+        .react-autoql-notification-list-item .react-autoql-notification-expanded-content.expanded .react-autoql-notification-query-data-container .react-autoql-response-content-container {
+          max-height: 300px !important; }
+    .react-autoql-notification-list-item .react-autoql-notification-expanded-content.collapsed {
+      visibility: hidden;
+      pointer-events: none;
+      opacity: 0; }
   .react-autoql-notification-list-item .react-autoql-notification-extra-content {
     flex: 0;
     flex-basis: 55px;
@@ -2064,37 +2383,33 @@ g.legendOrdinal .legendTitle tspan {
     margin: 0 10px;
     padding-top: 20px;
     padding-bottom: 7px; }
-  .react-autoql-notification-list-item .react-autoql-notification-details-container {
-    flex: 1;
+  .react-autoql-notification-list-item .react-autoql-notification-content-container {
     display: flex;
-    flex-direction: row;
-    align-items: stretch;
-    justify-content: stretch;
-    overflow: hidden; }
-    .react-autoql-notification-list-item .react-autoql-notification-details-container .react-autoql-notification-details {
-      flex: 1 1;
-      padding: 20px;
-      padding-top: 0;
-      opacity: 0.9;
-      border-left: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05)); }
+    flex-direction: column;
+    overflow: hidden;
+    width: 100%; }
   .react-autoql-notification-list-item .react-autoql-notification-data-container {
     display: flex;
-    flex-direction: row;
-    justify-content: stretch;
+    flex-direction: column;
     flex: 3 3 0px;
-    overflow: hidden; }
-    .react-autoql-notification-list-item .react-autoql-notification-data-container .react-autoql-notificaton-chart-container {
+    overflow: hidden;
+    border-top: 1px solid var(--react-autoql-background-color-primary); }
+    .react-autoql-notification-list-item .react-autoql-notification-data-container .single-value-response-flex-container {
+      padding: 10px;
+      padding-bottom: 20px; }
+      .react-autoql-notification-list-item .react-autoql-notification-data-container .single-value-response-flex-container .single-value-response {
+        font-size: 17px; }
+    .react-autoql-notification-list-item .react-autoql-notification-data-container .react-autoql-notification-chart-container {
       flex: 1;
-      height: 100%;
-      width: 0;
       display: flex;
       flex-direction: column;
-      padding: 0px 20px 10px 20px; }
+      padding: 10px 10px 0px 10px;
+      overflow: hidden; }
     .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 {
       color: currentColor;
-      font-size: 11px; }
+      font-size: 12px; }
   .react-autoql-notification-list-item .react-autoql-notification-data-title {
     line-height: 22px;
     font-size: 12px;
@@ -2102,39 +2417,26 @@ g.legendOrdinal .legendTitle tspan {
     color: var(--react-autoql-text-color-primary);
     opacity: 0.5;
     padding: 8px 20px; }
-    .react-autoql-notification-list-item .react-autoql-notification-data-title span.react-autoql-icon svg {
-      margin-top: -3px;
-      vertical-align: middle; }
-  .react-autoql-notification-list-item .react-autoql-notification-dismiss-icon {
-    font-size: 21px;
-    margin: 11px;
-    width: 40px;
-    height: 40px;
-    padding: 10px;
-    border-radius: 26px;
-    display: inline-block;
-    line-height: 20px;
-    background-color: transparent;
-    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-primary, #ececec); }
-  .react-autoql-notification-list-item .react-autoql-notification-delete-icon {
-    font-size: 18px;
-    margin-top: 3px;
-    margin-right: 3px;
-    opacity: 0;
-    width: 36px;
-    height: 36px;
-    padding: 9px;
-    border-radius: 20px;
-    display: inline-block;
-    line-height: 20px;
-    background-color: transparent;
-    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-primary, #ececec); }
+  .react-autoql-notification-list-item .react-autoql-notification-options-btn-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    padding: 13px 8px; }
+    .react-autoql-notification-list-item .react-autoql-notification-options-btn-container .react-autoql-notification-options-btn {
+      display: flex;
+      opacity: 0.8;
+      width: 40px;
+      height: 40px;
+      font-size: 24px;
+      line-height: 20px;
+      border-radius: 20px;
+      background-color: transparent;
+      transition: background-color 0.2s ease;
+      cursor: pointer; }
+      .react-autoql-notification-list-item .react-autoql-notification-options-btn-container .react-autoql-notification-options-btn:hover {
+        opacity: 1;
+        background-color: var(--react-autoql-background-color-primary, #ececec); }
   .react-autoql-notification-list-item .react-autoql-notification-alert-icon {
     position: absolute;
     top: -7px;
@@ -2156,10 +2458,31 @@ g.legendOrdinal .legendTitle tspan {
     transition-property: opacity;
     transition-duration: 0.2s;
     transition-timing-function: ease; }
-  .react-autoql-notification-list-item .react-autoql-notification-viz-switcher {
-    flex: 0 0 50px;
-    padding: 10px;
-    border-left: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05)); }
+  .react-autoql-notification-list-item .react-autoql-notification-toolbar-container {
+    flex: 0 0 auto;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center; }
+    .react-autoql-notification-list-item .react-autoql-notification-toolbar-container .react-autoql-toolbar.viz-toolbar {
+      padding-left: 14px; }
+    .react-autoql-notification-list-item .react-autoql-notification-toolbar-container .react-autoql-toolbar {
+      padding: 8px;
+      padding-top: 5px;
+      box-shadow: none;
+      border: none; }
+      .react-autoql-notification-list-item .react-autoql-notification-toolbar-container .react-autoql-toolbar .react-autoql-toolbar-btn {
+        height: 33px; }
+    .react-autoql-notification-list-item .react-autoql-notification-toolbar-container .react-autoql-notification-toolbar-more-options {
+      padding: 15px 10px;
+      font-size: 18px;
+      width: 48px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer; }
+      .react-autoql-notification-list-item .react-autoql-notification-toolbar-container .react-autoql-notification-toolbar-more-options:hover {
+        opacity: 0.7; }
   .react-autoql-notification-list-item .react-autoql-notification-img-container {
     flex: 0 0 60px; }
     .react-autoql-notification-list-item .react-autoql-notification-img-container .react-autoql-notification-img {
@@ -2181,259 +2504,592 @@ g.legendOrdinal .legendTitle tspan {
     .react-autoql-notification-list-item .react-autoql-notification-display-name-container .react-autoql-notification-display-name {
       font-size: 18px;
       color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.7)); }
-    .react-autoql-notification-list-item .react-autoql-notification-display-name-container .react-autoql-notification-timestamp {
+      .react-autoql-notification-list-item .react-autoql-notification-display-name-container .react-autoql-notification-display-name .react-autoql-icon {
+        font-size: 0.875em; }
+    .react-autoql-notification-list-item .react-autoql-notification-display-name-container .react-autoql-notification-timestamp-container {
       font-size: 12px;
       opacity: 0.5; }
-      .react-autoql-notification-list-item .react-autoql-notification-display-name-container .react-autoql-notification-timestamp span.react-autoql-icon svg {
-        margin-bottom: -1px; }
+      .react-autoql-notification-list-item .react-autoql-notification-display-name-container .react-autoql-notification-timestamp-container .react-autoql-notification-timestamp {
+        display: flex;
+        flex-direction: row;
+        align-items: center; }
+        .react-autoql-notification-list-item .react-autoql-notification-display-name-container .react-autoql-notification-timestamp-container .react-autoql-notification-timestamp .react-autoql-icon {
+          margin-right: 3px; }
 
-.react-autoql-steps-container {
-  margin: 10px; }
+.react-autoql-notification-list-item:nth-of-type(1) {
+  animation-delay: 0s; }
 
-.react-autoql-step-container {
-  position: relative;
-  border-left: 1px solid var(--react-autoql-text-color-placeholder, lightgray);
-  margin-left: 12px;
-  padding-left: 20px;
-  padding-bottom: 5px;
-  transition: all 0.5s ease; }
-  .react-autoql-step-container.complete {
-    border-color: var(--react-autoql-accent-color, #26a7df); }
-    .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-text-color-accent); }
-  .react-autoql-step-container.error {
-    border-color: var(--react-autoql-warning-color); }
-    .react-autoql-step-container.error .react-autoql-step-dot {
-      border-color: var(--react-autoql-warning-color);
-      background: var(--react-autoql-warning-color);
-      color: #fff; }
-  .react-autoql-step-container:not(.active) .react-autoql-step-content-container {
-    pointer-events: none;
-    height: 10px;
-    opacity: 0;
-    margin: 0; }
+.react-autoql-notification-list-item:nth-of-type(2) {
+  animation-delay: 0.1s; }
 
-.react-autoql-step-dot {
-  position: absolute;
-  top: 0;
-  left: -10px;
-  height: 20px;
-  width: 20px;
-  border-radius: 15px;
-  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;
-  color: var(--react-autoql-text-color-placeholder, lightgray);
-  text-align: center; }
+.react-autoql-notification-list-item:nth-of-type(3) {
+  animation-delay: 0.2s; }
 
-.react-autoql-step-title-container:hover {
-  cursor: pointer;
-  transition: color 0.2s ease;
-  color: var(--react-autoql-accent-color, #26a7df); }
+.react-autoql-notification-list-item:nth-of-type(4) {
+  animation-delay: 0.3s; }
 
-.react-autoql-step-title {
-  font-weight: 500;
-  font-size: 15px;
-  line-height: 15px;
-  padding-top: 2px; }
-  .react-autoql-step-title.disabled {
-    cursor: default;
-    color: var(--react-autoql-text-color-placeholder, lightgray); }
+.react-autoql-notification-list-item:nth-of-type(5) {
+  animation-delay: 0.4s; }
 
-.react-autoql-step-subtitle {
-  font-size: 13px;
-  padding-top: 6px;
-  padding-bottom: 6px;
-  color: var(--react-autoql-text-color-placeholder, rgba(0, 0, 0, 0.4)); }
-
-.react-autoql-step-content {
-  margin: 15px;
-  margin-top: 0; }
-
-.react-autoql-step-content-container {
-  transition-timing-function: ease;
-  transition-property: height, opacity, margin;
-  transition-duration: 0.5s;
-  opacity: 1; }
+.react-autoql-notification-list-item:nth-of-type(6) {
+  animation-delay: 0.5s; }
 
-.react-autoql-radio-btn-container.react-autoql-radio-btn-container-list {
-  display: inline-block; }
+.react-autoql-notification-list-item:nth-of-type(7) {
+  animation-delay: 0.6s; }
 
-.react-autoql-radio-btn-container.react-autoql-radio-btn-container-buttons {
-  display: inline-flex;
-  justify-content: stretch;
-  align-items: stretch;
-  border-radius: 4px; }
-  .react-autoql-radio-btn-container.react-autoql-radio-btn-container-buttons .react-autoql-radio-btn {
-    display: inline-flex;
-    justify-content: center;
-    align-items: center; }
+.react-autoql-notification-list-item:nth-of-type(8) {
+  animation-delay: 0.7s; }
 
-.react-autoql-radio-btn-container [type='radio']:checked,
-.react-autoql-radio-btn-container [type='radio']:not(:checked) {
-  position: absolute;
-  left: -9999px; }
+.react-autoql-notification-list-item:nth-of-type(9) {
+  animation-delay: 0.8s; }
 
-.react-autoql-radio-btn-container [type='radio']:checked + label,
-.react-autoql-radio-btn-container [type='radio']:not(:checked) + label {
-  position: relative;
-  padding-left: 28px;
-  cursor: pointer;
-  line-height: 20px;
-  display: inline-block; }
+.react-autoql-notification-list-item:nth-of-type(10) {
+  animation-delay: 0.9s; }
 
-.react-autoql-radio-btn-container [type='radio']:checked + label:before,
-.react-autoql-radio-btn-container [type='radio']:not(:checked) + label:before {
-  content: '';
-  position: absolute;
-  left: 1px;
-  top: 1px;
-  width: 18px;
-  height: 18px;
-  border: 1px solid #ddd;
-  border-radius: 100%;
-  background: var(--react-autoql-text-color-accent); }
+@keyframes slideIn {
+  0% {
+    opacity: 0;
+    top: 500px; }
+  100% {
+    opacity: 1;
+    top: 0; } }
 
-.react-autoql-radio-btn-container [type='radio']:checked + label:after,
-.react-autoql-radio-btn-container [type='radio']:not(:checked) + label:after {
-  content: '';
-  width: 12px;
-  height: 12px;
-  background: var(--react-autoql-accent-color, #26a7df);
-  position: absolute;
-  top: 4px;
-  left: 4px;
-  border-radius: 100%;
-  transition: all 0.2s ease; }
 
-.react-autoql-radio-btn-container [type='radio']:not(:checked) + label:after {
-  opacity: 0;
-  transform: scale(0); }
+.data-alert-schedule-builder-step .schedule-builder-day-of-year-selector {
+  display: inline-flex;
+  align-items: flex-end; }
 
-.react-autoql-radio-btn-container [type='radio']:checked + label:after {
-  opacity: 1;
-  transform: scale(1); }
+.data-alert-schedule-builder-step .data-alert-condition-statement {
+  font-style: italic; }
 
-.react-autoql-radio-btn-container .react-autoql-radio-btn {
+.data-alert-schedule-builder-step .schedule-builder-at-connector {
+  padding-bottom: 8px; }
+
+.data-alert-schedule-builder-step .frequency-category-select {
   position: relative;
-  display: inline-block;
-  padding: 3px 12px;
-  border: 1px solid var(--react-autoql-border-color, #dcdcdc);
-  margin-left: -1px;
-  transition: all 0.2s ease;
-  cursor: pointer; }
-  .react-autoql-radio-btn-container .react-autoql-radio-btn:not(:first-child) {
-    border-left: 1px solid transparent; }
-  .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-text-color-accent); }
-  .react-autoql-radio-btn-container .react-autoql-radio-btn.active.outlined {
-    background-color: inherit;
-    color: var(--react-autoql-accent-color, #26a7df); }
-  .react-autoql-radio-btn-container .react-autoql-radio-btn:hover:not(.active) {
-    border-color: var(--react-autoql-accent-color, #26a7df);
-    color: var(--react-autoql-accent-color, #26a7df); }
-  .react-autoql-radio-btn-container .react-autoql-radio-btn:first-child {
-    border-top-left-radius: 4px;
-    border-bottom-left-radius: 4px;
-    margin-left: 0; }
-  .react-autoql-radio-btn-container .react-autoql-radio-btn:last-child {
-    border-top-right-radius: 4px;
-    border-bottom-right-radius: 4px; }
+  padding-top: 9px; }
 
-.react-autoql-select-with-arrow div {
-  color: inherit; }
+.data-alert-schedule-builder-step .notification-frequency-select {
+  margin-left: 8px; }
 
-.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-secondary, white);
-  transition: all 0.2s ease;
-  cursor: pointer !important; }
-  .react-autoql-select-with-arrow > div:hover {
-    border-color: var(--react-autoql-accent-color, #26a7df); }
-  .react-autoql-select-with-arrow > div .react-autoql-select-with-arrow__option {
-    cursor: pointer; }
-    .react-autoql-select-with-arrow > div .react-autoql-select-with-arrow__option:hover {
-      background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.15)); }
-    .react-autoql-select-with-arrow > div .react-autoql-select-with-arrow__option.react-autoql-select-with-arrow__option--is-focused, .react-autoql-select-with-arrow > div .react-autoql-select-with-arrow__option.react-autoql-select-with-arrow__option--is-selected {
-      background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.1)); }
+.data-alert-schedule-builder-step .frequency-repeat-checkbox .react-autoql-checkbox-label {
+  line-height: 33px; }
 
-.react-autoql-select-with-arrow:focus {
-  outline: none !important; }
+.data-alert-schedule-builder-step .frequency-repeat-follow-text {
+  line-height: 32px;
+  vertical-align: top; }
+
+.data-alert-schedule-builder-step .frequency-type-container {
+  padding: 3px 5px;
+  margin-bottom: 20px; }
+  .data-alert-schedule-builder-step .frequency-type-container .react-autoql-select {
+    padding-left: 2px; }
 
-.react-autoql-select-with-arrow__control--is-focused {
-  border: 1px solid var(--react-autoql-accent-color, #26a7df) !important;
-  box-shadow: none !important; }
+.data-alert-schedule-builder-step .frequency-settings-container {
+  font-size: inherit; }
+  .data-alert-schedule-builder-step .frequency-settings-container.continuous-alert .react-autoql-data-alert-frequency-option {
+    margin-bottom: 20px;
+    margin-right: 20px; }
+  .data-alert-schedule-builder-step .frequency-settings-container .react-autoql-select {
+    width: 100%;
+    min-width: -moz-fit-content;
+    min-width: fit-content; }
+  .data-alert-schedule-builder-step .frequency-settings-container .react-autoql-data-alert-frequency-option.check-frequency {
+    display: flex;
+    width: 300px;
+    max-width: 100%; }
+    .data-alert-schedule-builder-step .frequency-settings-container .react-autoql-data-alert-frequency-option.check-frequency .react-autoql-select-and-label {
+      flex: 1; }
+  .data-alert-schedule-builder-step .frequency-settings-container .react-autoql-data-alert-frequency-option.flex-1 {
+    flex: 1; }
+  .data-alert-schedule-builder-step .frequency-settings-container .react-autoql-data-alert-frequency-option.flex-2 {
+    flex: 2; }
 
-.react-autoql-step-container a {
-  color: var(--react-autoql-accent-color, #26a7df); }
+.data-alert-schedule-builder-step .react-autoql-select {
+  margin: 0;
+  margin-right: 5px; }
 
-.frequency-date-select-container {
+.data-alert-schedule-builder-step .frequency-date-select-container {
   margin-top: 10px; }
 
-.notification-frequency-step {
-  display: flex; }
-  .notification-frequency-step .frequency-category-select {
+.data-alert-schedule-builder-step .react-autoql-data-alert-frequency-options-container {
+  display: flex;
+  align-items: flex-end;
+  flex-wrap: wrap; }
+
+.react-autoql-steps-hoz-container {
+  display: flex;
+  padding: 20px;
+  align-items: flex-start;
+  font-family: inherit;
+  flex-direction: row; }
+  .react-autoql-steps-hoz-container .react-autoql-step-hoz-container {
+    flex: 1;
     position: relative;
-    padding-top: 9px; }
-  .notification-frequency-step .notification-frequency-select {
-    margin-left: 8px; }
-  .notification-frequency-step .frequency-repeat-checkbox .react-autoql-checkbox-label {
-    line-height: 33px; }
-  .notification-frequency-step .frequency-repeat-follow-text {
-    line-height: 32px;
-    vertical-align: top; }
-  .notification-frequency-step .frequency-settings-container {
-    flex: 0 1 400px; }
-
-.schedule-builder-timezone-section {
-  margin: 10px 5px; }
-  .schedule-builder-timezone-section .react-autoql-timezone-select {
-    display: inline-block;
-    width: 300px; }
+    padding-left: 8px;
+    padding-right: 8px; }
+    .react-autoql-steps-hoz-container .react-autoql-step-hoz-container .react-autoql-step-hoz {
+      display: flex;
+      align-items: center;
+      flex-direction: column; }
+      .react-autoql-steps-hoz-container .react-autoql-step-hoz-container .react-autoql-step-hoz .react-autoql-step-hoz-title-container {
+        width: 100%;
+        font-size: 0.875rem;
+        font-weight: 400;
+        line-height: 1.4; }
+        .react-autoql-steps-hoz-container .react-autoql-step-hoz-container .react-autoql-step-hoz .react-autoql-step-hoz-title-container .react-autoql-step-hoz-title {
+          display: block;
+          margin-top: 16px;
+          text-align: center;
+          font-weight: 500;
+          cursor: pointer; }
+    .react-autoql-steps-hoz-container .react-autoql-step-hoz-container .react-autoql-step-hoz-dot {
+      width: 2em;
+      border: none;
+      cursor: pointer;
+      height: 2em;
+      margin: 0px;
+      display: flex;
+      padding: 0px;
+      font-size: 1em;
+      align-items: center;
+      border-radius: 50%;
+      justify-content: center;
+      background: var(--react-autoql-background-color-secondary);
+      border: 1px solid var(--react-autoql-text-color-primary);
+      color: var(--react-autoql-text-color-primary);
+      transition: opacity 0.2s ease; }
+      .react-autoql-steps-hoz-container .react-autoql-step-hoz-container .react-autoql-step-hoz-dot span {
+        font-size: 1rem;
+        font-variant-numeric: tabular-nums; }
+    .react-autoql-steps-hoz-container .react-autoql-step-hoz-container.complete, .react-autoql-steps-hoz-container .react-autoql-step-hoz-container.active {
+      color: var(--react-autoql-accent-color); }
+      .react-autoql-steps-hoz-container .react-autoql-step-hoz-container.complete .react-autoql-step-hoz-dot,
+      .react-autoql-steps-hoz-container .react-autoql-step-hoz-container.complete .react-autoql-step-connector, .react-autoql-steps-hoz-container .react-autoql-step-hoz-container.active .react-autoql-step-hoz-dot,
+      .react-autoql-steps-hoz-container .react-autoql-step-hoz-container.active .react-autoql-step-connector {
+        border-color: var(--react-autoql-accent-color);
+        background: var(--react-autoql-accent-color);
+        color: var(--react-autoql-text-color-accent); }
+    .react-autoql-steps-hoz-container .react-autoql-step-hoz-container.error .react-autoql-step-hoz-dot {
+      border-color: var(--react-autoql-warning-color);
+      background: var(--react-autoql-warning-color);
+      color: var(--react-autoql-text-color-accent); }
+    .react-autoql-steps-hoz-container .react-autoql-step-hoz-container.disabled .react-autoql-step-hoz-dot,
+    .react-autoql-steps-hoz-container .react-autoql-step-hoz-container.disabled .react-autoql-step-hoz-title,
+    .react-autoql-steps-hoz-container .react-autoql-step-hoz-container.disabled .react-autoql-step-connector {
+      cursor: default !important;
+      color: var(--react-autoql-text-color-placeholder);
+      border-color: var(--react-autoql-text-color-placeholder); }
+  .react-autoql-steps-hoz-container .react-autoql-step-connector-container {
+    top: calc((2em - 1px) / 2);
+    left: calc((-50% + 2em) - 8px);
+    right: calc((50% + 2em) - 8px);
+    position: absolute; }
+    .react-autoql-steps-hoz-container .react-autoql-step-connector-container .react-autoql-step-connector {
+      display: block;
+      border-color: var(--react-autoql-text-color-primary);
+      border-top-style: solid;
+      border-top-width: 1px; }
 
-.notification-modal-content .react-autoql-step-content p {
-  margin-bottom: 0.5em;
-  margin-top: 0.5em;
-  padding-left: 8px; }
+.react-autoql-data-alert-setting-group {
+  display: flex;
+  flex-direction: row; }
 
-.notification-modal-content .step-btn-container {
-  text-align: right;
+.react-autoql-settings-vertical-divider {
+  flex: 0 0 0;
+  opacity: 0.3; }
+  .react-autoql-settings-vertical-divider.react-autoql-settings-vertical-divider-horizontal {
+    margin: 5px;
+    margin-top: 0;
+    padding: 0 10px;
+    border-top: 1px solid var(--react-autoql-border-color); }
+  .react-autoql-settings-vertical-divider.react-autoql-settings-vertical-divider-vertical {
+    margin: 5px;
+    margin-left: 0;
+    padding: 10px 0;
+    border-left: 1px solid var(--react-autoql-border-color); }
+
+.react-autoql-flex-table-container {
+  display: block;
+  width: 100%; }
+  .react-autoql-flex-table-container div {
+    box-sizing: border-box; }
+  .react-autoql-flex-table-container .react-autoql-data-alert-setting {
+    margin-bottom: 10px; }
+  .react-autoql-flex-table-container .react-autoql-data-alert-setting-section {
+    padding: 10px 0; }
+    .react-autoql-flex-table-container .react-autoql-data-alert-setting-section .react-autoql-data-alert-setting-section-title {
+      margin: 5px;
+      margin-bottom: 10px;
+      font-size: 16px;
+      font-weight: 600; }
+    .react-autoql-flex-table-container .react-autoql-data-alert-setting-section .react-autoql-data-alert-setting-input-group {
+      display: flex; }
+      .react-autoql-flex-table-container .react-autoql-data-alert-setting-section .react-autoql-data-alert-setting-input-group .react-autoql-data-alert-setting-input {
+        flex: 1; }
+  .react-autoql-flex-table-container .react-autoql-flex-table {
+    display: grid;
+    grid-template-columns: minmax(0, 150px) 1fr;
+    grid-template-rows: 100% auto;
+    transition: 0.5s; }
+    .react-autoql-flex-table-container .react-autoql-flex-table .react-autoql-cell {
+      display: block;
+      width: 100%;
+      text-align: left;
+      padding: 0.1em 0.5em; }
+      .react-autoql-flex-table-container .react-autoql-flex-table .react-autoql-cell:first-of-type {
+        text-align: right;
+        line-height: 34px;
+        white-space: nowrap; }
+
+.react-autoql-data-alert-modal-body {
+  padding: 20px; }
+
+.react-autoql-data-alert-modal-content {
+  height: 400px;
+  max-height: 90vh;
+  padding: 0px 80px;
   display: flex;
-  min-height: 30px; }
+  flex-direction: column; }
+  .react-autoql-data-alert-modal-content .react-autoql-data-alert-modal-step {
+    font-weight: 400;
+    font-size: 15px;
+    padding-top: 15px; }
+    .react-autoql-data-alert-modal-content .react-autoql-data-alert-modal-step .react-autoql-data-alert-frequency-option {
+      margin-right: 10px; }
+    .react-autoql-data-alert-modal-content .react-autoql-data-alert-modal-step .data-alert-modal-condition-title {
+      margin-top: 20px;
+      margin-bottom: 5px; }
+    .react-autoql-data-alert-modal-content .react-autoql-data-alert-modal-step.hidden {
+      position: absolute;
+      display: none; }
+  .react-autoql-data-alert-modal-content .data-alert-name-input-section {
+    margin-bottom: 20px; }
+    .react-autoql-data-alert-modal-content .data-alert-name-input-section .react-autoql-data-alert-modal-tooltip-icon {
+      flex: 0 0 auto;
+      font-size: 1.1em;
+      vertical-align: text-top; }
+    .react-autoql-data-alert-modal-content .data-alert-name-input-section .react-autoql-notification-display-name-input {
+      width: 100%; }
+  .react-autoql-data-alert-modal-content .react-autoql-input-container {
+    flex: 1; }
+    .react-autoql-data-alert-modal-content .react-autoql-input-container textarea {
+      resize: none;
+      flex: 1; }
+  .react-autoql-data-alert-modal-content .compose-message-section-condition-statement {
+    padding: 3px 5px;
+    margin-bottom: 20px; }
+  .react-autoql-data-alert-modal-content .compose-message-section {
+    display: flex;
+    flex-wrap: wrap; }
+    .react-autoql-data-alert-modal-content .compose-message-section .form-section,
+    .react-autoql-data-alert-modal-content .compose-message-section .preview-section {
+      display: flex;
+      flex-direction: column;
+      flex: 1; }
+    .react-autoql-data-alert-modal-content .compose-message-section .react-autoql-notification-message-input {
+      flex: 1;
+      margin-top: 10px; }
+      .react-autoql-data-alert-modal-content .compose-message-section .react-autoql-notification-message-input .react-autoql-input {
+        flex: 1 0 70px; }
+    .react-autoql-data-alert-modal-content .compose-message-section .preview-section {
+      display: flex;
+      flex-direction: column;
+      margin-left: 14px; }
+      .react-autoql-data-alert-modal-content .compose-message-section .preview-section .data-alert-preview {
+        flex: 1;
+        padding: 20px;
+        border: 1px solid var(--react-autoql-border-color);
+        border-radius: 2px;
+        background: var(--react-autoql-background-color-primary);
+        overflow: auto;
+        pointer-events: none !important; }
+        .react-autoql-data-alert-modal-content .compose-message-section .preview-section .data-alert-preview .react-autoql-notification-list-item {
+          transition: none;
+          animation: none; }
+        .react-autoql-data-alert-modal-content .compose-message-section .preview-section .data-alert-preview .react-autoql-notification-extra-content {
+          display: none !important; }
+  .react-autoql-data-alert-modal-content .react-autoql-step-content p {
+    margin-bottom: 0.5em;
+    margin-top: 0.5em;
+    padding-left: 8px; }
+  .react-autoql-data-alert-modal-content .step-btn-container {
+    text-align: right;
+    display: flex;
+    min-height: 30px; }
+  .react-autoql-data-alert-modal-content .data-alert-chunked-rt {
+    color: var(--react-autoql-text-color-primary); }
 
-.expression-valid-checkmark.react-autoql-icon svg {
-  color: var(--react-autoql-success-color); }
+.react-autoql-data-alert-modal-footer {
+  width: 100%;
+  display: flex;
+  justify-content: space-between; }
 
-.expression-invalid-message-container {
-  max-width: 75%;
-  float: left;
-  text-align: left !important;
+.modal-footer-button-container {
   display: flex;
-  flex-direction: row;
-  align-items: left;
-  justify-content: left; }
+  flex-direction: row; }
+  .modal-footer-button-container.left {
+    justify-content: flex-start; }
+  .modal-footer-button-container.right {
+    justify-content: flex-end; }
 
-.expression-invalid-message {
-  color: var(--react-autoql-danger-color);
-  display: 'inline-block'; }
+.react-autoql-switch-container {
+  position: relative;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center; }
+  .react-autoql-switch-container .toggle-switch-text-ruler {
+    opacity: 0;
+    display: block;
+    visibility: hidden;
+    padding: 0px 22px;
+    height: 26px;
+    line-height: 26px;
+    min-width: 42px;
+    font-size: 12px; }
+  .react-autoql-switch-container .react-autoql-toggle-switch {
+    position: absolute;
+    height: 26px;
+    width: 100%;
+    cursor: pointer; }
+    .react-autoql-switch-container .react-autoql-toggle-switch input {
+      display: none; }
+    .react-autoql-switch-container .react-autoql-toggle-switch .toggle-switch-slider {
+      background-color: var(--react-autoql-background-color-switch-input);
+      border-radius: 34px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      transition: 0.4s; }
+      .react-autoql-switch-container .react-autoql-toggle-switch .toggle-switch-slider .toggle-switch-text {
+        position: absolute;
+        display: flex;
+        align-items: center;
+        height: 100%;
+        font-size: 12px;
+        font-weight: bold;
+        color: #ffffff;
+        right: 15px; }
+      .react-autoql-switch-container .react-autoql-toggle-switch .toggle-switch-slider:before {
+        position: absolute;
+        content: '';
+        height: 18px;
+        width: 18px;
+        bottom: 4px;
+        background-color: #ffffff;
+        border-radius: 50%;
+        transition: 0.4s;
+        left: 4px; }
+    .react-autoql-switch-container .react-autoql-toggle-switch input:checked + .toggle-switch-slider {
+      background-color: var(--react-autoql-accent-color); }
+      .react-autoql-switch-container .react-autoql-toggle-switch input:checked + .toggle-switch-slider:before {
+        left: calc(100% - 22px); }
+      .react-autoql-switch-container .react-autoql-toggle-switch input:checked + .toggle-switch-slider .toggle-switch-text {
+        left: 15px;
+        color: var(--react-autoql-text-color-accent); }
+    .react-autoql-switch-container .react-autoql-toggle-switch input:focus + .toggle-switch-slider {
+      box-shadow: 0 0 1px var(--react-autoql-accent-color); }
 
-.react-autoql-data-alert-query-name-tooltip-icon {
-  color: var(--react-autoql-info-color) !important; }
+.react-autoql-notification-settings {
+  background-color: transparent;
+  color: var(--react-autoql-text-color-primary);
+  padding-top: 20px;
+  padding-bottom: 100px;
+  height: 100%; }
+  .react-autoql-notification-settings .data-alerts-list-container {
+    padding-bottom: 20px; }
+  .react-autoql-notification-settings .react-autoql-notification-setting-item.data-alert-disabled .data-alert-section-cycle,
+  .react-autoql-notification-settings .react-autoql-notification-setting-item.data-alert-disabled .data-alert-state,
+  .react-autoql-notification-settings .react-autoql-notification-setting-item.data-alert-disabled .data-alert-section-cycle-start {
+    opacity: 0.7; }
+  .react-autoql-notification-settings .react-autoql-data-alert-list-item-section {
+    flex: 1 0 50px;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: nowrap;
+    text-align: center;
+    overflow: hidden; }
+    .react-autoql-notification-settings .react-autoql-data-alert-list-item-section .react-autoql-notification-setting-display-name-title {
+      width: 100%;
+      text-overflow: ellipsis;
+      overflow: hidden; }
+    .react-autoql-notification-settings .react-autoql-data-alert-list-item-section .data-alert-section-content,
+    .react-autoql-notification-settings .react-autoql-data-alert-list-item-section .data-alert-header-item {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: 13px; }
+    .react-autoql-notification-settings .react-autoql-data-alert-list-item-section .data-alert-section-content {
+      padding: 8px 12px; }
+    .react-autoql-notification-settings .react-autoql-data-alert-list-item-section .data-alert-header-item {
+      padding: 0 12px; }
+    .react-autoql-notification-settings .react-autoql-data-alert-list-item-section:first-child {
+      flex: 3 0 50px;
+      padding-left: 12px;
+      justify-content: flex-start; }
+    .react-autoql-notification-settings .react-autoql-data-alert-list-item-section:last-child {
+      flex: 0 0 auto;
+      padding-right: 12px;
+      justify-content: flex-end; }
+  .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; }
+    .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item {
+      display: block;
+      min-height: 55px;
+      transition: height 0.3s cubic-bezier(0.26, 0.26, 0, 1);
+      background-color: var(--react-autoql-background-color-secondary);
+      box-shadow: var(--react-autoql-box-shadow-1);
+      position: relative; }
+      .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item.react-autoql-dataalert-show-header {
+        margin-top: 38px; }
+      .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item:not(.react-autoql-dataalert-show-header) .data-alert-header-item {
+        display: none; }
+      .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item:not(:last-child) {
+        border-bottom: 1px solid var(--react-autoql-box-shadow-color); }
+      .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item:first-child, .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item.react-autoql-dataalert-show-header {
+        border-top-left-radius: 4px;
+        border-top-right-radius: 4px; }
+      .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item:last-child {
+        border-bottom-left-radius: 4px;
+        border-bottom-right-radius: 4px; }
+      .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .data-alert-header-item {
+        position: absolute;
+        line-height: 33px;
+        white-space: nowrap;
+        bottom: 100%;
+        font-size: 0.875em;
+        color: var(--react-autoql-text-color-primary);
+        opacity: 0.7; }
+      .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-action-hidden {
+        pointer-events: none;
+        visibility: hidden;
+        opacity: 0; }
+      .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .data-alert-state {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 13px;
+        padding: 2px 5px;
+        border-radius: 6px;
+        white-space: nowrap;
+        cursor: default; }
+        .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .data-alert-state .react-autoql-icon {
+          margin-right: 5px; }
+        .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .data-alert-state.data-alert-off.data-alert-ready {
+          color: var(--react-autoql-text-color-primary); }
+        .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .data-alert-state.data-alert-off.data-alert-paused {
+          color: var(--react-autoql-text-color-primary); }
+        .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .data-alert-state.data-alert-off.data-alert-triggered {
+          color: var(--react-autoql-text-color-primary); }
+        .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .data-alert-state.data-alert-off.data-alert-error {
+          color: var(--react-autoql-warning-color);
+          opacity: 1; }
+        .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .data-alert-state.data-alert-on.data-alert-active {
+          color: var(--react-autoql-success-color); }
+          .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .data-alert-state.data-alert-on.data-alert-active .react-autoql-icon {
+            background-color: var(--react-autoql-success-color); }
+        .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .data-alert-state.data-alert-on.data-alert-scheduled {
+          color: var(--react-autoql-success-color); }
+        .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .data-alert-state.data-alert-on.data-alert-triggered {
+          color: var(--react-autoql-info-color); }
+          .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .data-alert-state.data-alert-on.data-alert-triggered .react-autoql-icon-filled {
+            background-color: var(--react-autoql-info-color); }
+        .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .data-alert-state.data-alert-on.data-alert-error {
+          cursor: pointer;
+          color: var(--react-autoql-warning-color); }
+        .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .data-alert-state .react-autoql-icon-filled {
+          border-radius: 20px;
+          color: #fff;
+          padding: 3px;
+          font-size: 1.1em;
+          box-sizing: content-box; }
+      .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-state-action-btn {
+        display: flex;
+        transition: background-color 0.2s ease;
+        padding: 4px;
+        margin-left: 7px;
+        margin-right: 0;
+        box-sizing: content-box;
+        font-size: 11px;
+        border-radius: 20px;
+        color: var(--react-autoql-info-color);
+        border: 1px solid var(--react-autoql-info-color);
+        cursor: pointer; }
+        .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-state-action-btn:hover {
+          background-color: var(--react-autoql-hover-color); }
+      .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-action-btn {
+        display: flex;
+        font-size: 18px;
+        transition: all 0.2s ease;
+        padding: 0 10px;
+        color: var(--react-autoql-text-color-primary);
+        cursor: pointer; }
+        .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-action-btn:first-child {
+          padding-left: 0px; }
+        .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-action-btn:last-child {
+          padding-right: 0px; }
+        .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-action-btn:hover {
+          color: var(--react-autoql-accent-color); }
+          .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-action-btn:hover.react-autoql-notification-action-btn-delete {
+            color: var(--react-autoql-danger-color); }
+    .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item-header {
+      min-height: 55px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between; }
+  .react-autoql-notification-settings .react-autoql-data-alert-section-title-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px 20px;
+    padding-bottom: 0;
+    color: var(--react-autoql-text-color-primary); }
+    .react-autoql-notification-settings .react-autoql-data-alert-section-title-container .react-autoql-data-alert-section-title {
+      font-size: 19px;
+      font-weight: 500; }
+    .react-autoql-notification-settings .react-autoql-data-alert-section-title-container .react-autoql-data-alert-section-subtitle {
+      padding-top: 3px;
+      padding-bottom: 5px;
+      font-size: 13px; }
+  .react-autoql-notification-settings .react-autoql-notification-setting-display-name {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis; }
+    .react-autoql-notification-settings .react-autoql-notification-setting-display-name .data-alert-section-content {
+      font-size: 14px;
+      overflow: hidden;
+      cursor: default; }
+  .react-autoql-notification-settings .react-autoql-re-initialize-btn {
+    margin-left: 6px; }
 
 .notification-list-loading-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
   text-align: center;
   padding-top: 100px;
-  color: var(--react-autoql-text-color-primary);
+  color: inherit;
   height: 100%;
   background: var(--react-autoql-background-color-primary); }
 
 .empty-notifications-message {
-  color: var(--react-autoql-text-color-primary);
+  color: inherit;
   text-align: center;
   margin-top: 75px; }
   .empty-notifications-message div {
@@ -2449,163 +3105,125 @@ g.legendOrdinal .legendTitle tspan {
 .react-autoql-notification-list-container {
   display: flex;
   flex-direction: column;
+  height: 100%;
   background: var(--react-autoql-background-color-primary);
-  height: 100%; }
+  font-family: var(--react-autoql-font-family), sans-serif;
+  color: var(--react-autoql-text-color-primary); }
   .react-autoql-notification-list-container .notification-feed-list {
     padding: 0 20px;
-    padding-top: 0; }
+    padding-bottom: 10px; }
 
-.react-autoql-notification-dismiss-all {
-  flex: 0;
-  text-align: right;
-  margin: 12px;
-  color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.4));
-  transition: color 0.1s ease; }
-  .react-autoql-notification-dismiss-all span {
+.notification-feed-top-options-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: flex-end;
+  padding: 15px 22px 8px 22px;
+  flex: 0; }
+  .notification-feed-top-options-container .react-autoql-notification-delete-all,
+  .notification-feed-top-options-container .react-autoql-notification-mark-all {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    color: inherit;
+    transition: color 0.1s ease;
     opacity: 0.8;
     cursor: pointer; }
-    .react-autoql-notification-dismiss-all span:hover {
+    .notification-feed-top-options-container .react-autoql-notification-delete-all .react-autoql-icon,
+    .notification-feed-top-options-container .react-autoql-notification-mark-all .react-autoql-icon {
+      margin-right: 6px;
+      margin-bottom: 3px; }
+    .notification-feed-top-options-container .react-autoql-notification-delete-all:hover,
+    .notification-feed-top-options-container .react-autoql-notification-mark-all:hover {
       opacity: 1; }
 
-.react-autoql-notification-display-name-input {
-  width: 100%; }
-
-.react-autoql-notification-message-input {
-  width: 100%; }
-  .react-autoql-notification-message-input textarea {
-    width: 100% !important; }
-
-.react-autoql-notification-list-item:nth-of-type(1) {
-  animation-delay: 0s; }
-
-.react-autoql-notification-list-item:nth-of-type(2) {
-  animation-delay: 0.1s; }
-
-.react-autoql-notification-list-item:nth-of-type(3) {
-  animation-delay: 0.2s; }
+.react-autoql-radio-btn-container.react-autoql-radio-btn-container-list {
+  display: inline-block; }
 
-.react-autoql-notification-list-item:nth-of-type(4) {
-  animation-delay: 0.3s; }
+.react-autoql-radio-btn-container.react-autoql-radio-btn-container-buttons {
+  display: inline-flex;
+  justify-content: stretch;
+  align-items: stretch;
+  border-radius: 4px; }
+  .react-autoql-radio-btn-container.react-autoql-radio-btn-container-buttons .react-autoql-radio-btn {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center; }
+    .react-autoql-radio-btn-container.react-autoql-radio-btn-container-buttons .react-autoql-radio-btn.active {
+      font-weight: 500; }
 
-.react-autoql-notification-list-item:nth-of-type(5) {
-  animation-delay: 0.4s; }
+.react-autoql-radio-btn-container [type='radio']:checked,
+.react-autoql-radio-btn-container [type='radio']:not(:checked) {
+  position: absolute;
+  left: -9999px; }
 
-.react-autoql-notification-list-item:nth-of-type(6) {
-  animation-delay: 0.5s; }
+.react-autoql-radio-btn-container [type='radio']:checked + label,
+.react-autoql-radio-btn-container [type='radio']:not(:checked) + label {
+  position: relative;
+  padding-left: 28px;
+  cursor: pointer;
+  line-height: 20px;
+  display: inline-block; }
 
-.react-autoql-notification-list-item:nth-of-type(7) {
-  animation-delay: 0.6s; }
+.react-autoql-radio-btn-container [type='radio']:checked + label:before,
+.react-autoql-radio-btn-container [type='radio']:not(:checked) + label:before {
+  content: '';
+  position: absolute;
+  left: 1px;
+  top: 1px;
+  width: 18px;
+  height: 18px;
+  border: 1px solid #ddd;
+  border-radius: 100%;
+  background: var(--react-autoql-text-color-accent); }
 
-.react-autoql-notification-list-item:nth-of-type(8) {
-  animation-delay: 0.7s; }
+.react-autoql-radio-btn-container [type='radio']:checked + label:after,
+.react-autoql-radio-btn-container [type='radio']:not(:checked) + label:after {
+  content: '';
+  width: 12px;
+  height: 12px;
+  background: var(--react-autoql-accent-color, #26a7df);
+  position: absolute;
+  top: 4px;
+  left: 4px;
+  border-radius: 100%;
+  transition: all 0.2s ease; }
 
-.react-autoql-notification-list-item:nth-of-type(9) {
-  animation-delay: 0.8s; }
+.react-autoql-radio-btn-container [type='radio']:not(:checked) + label:after {
+  opacity: 0;
+  transform: scale(0); }
 
-.react-autoql-notification-list-item:nth-of-type(10) {
-  animation-delay: 0.9s; }
+.react-autoql-radio-btn-container [type='radio']:checked + label:after {
+  opacity: 1;
+  transform: scale(1); }
 
-.react-autoql-notification-settings {
-  background-color: var(--react-autoql-background-color-primary);
-  color: var(--react-autoql-text-color-primary);
-  padding-top: 20px;
-  padding-bottom: 100px;
-  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;
-    border-radius: 4px;
-    box-shadow: 0 1px 3px 0 var(--react-autoql-box-shadow-color, rgba(0, 0, 0, 0.15));
-    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;
-      line-height: 55px;
-      transition: height 0.3s cubic-bezier(0.26, 0.26, 0, 1); }
-      .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-error-status-icon {
-        margin-right: 10px;
-        cursor: pointer; }
-      .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item #react-autoql-notification-error-status-icon-PROJECT {
-        margin-right: 10px; }
-      .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .reset-period-info-icon {
-        padding-right: 20px;
-        font-size: 17px;
-        opacity: 1;
-        cursor: pointer;
-        color: var(--react-autoql-accent-color); }
-      .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item.CUSTOM:hover {
-        background: rgba(0, 0, 0, 0.01); }
-      .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-action-btn {
-        opacity: 0;
-        margin-right: 20px;
-        font-size: 16px;
-        transition: all 0.2s ease;
-        color: var(--react-autoql-text-color-primary);
-        cursor: pointer; }
-        .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-action-btn:hover {
-          color: var(--react-autoql-accent-color);
-          opacity: 1 !important; }
-      .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item:hover .react-autoql-notification-action-btn {
-        opacity: 0.5; }
-    .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item-header {
-      display: flex;
-      justify-content: space-between;
-      height: 56px;
-      padding-left: 25px;
-      padding-right: 8px;
-      border-bottom: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05)); }
-    .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-enable-checkbox {
-      margin-bottom: 4px;
-      margin-right: 8px; }
-    .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-disable-checkbox {
-      margin-bottom: 4px;
-      margin-right: 8px;
-      opacity: 0.5;
-      pointer-events: none; }
-  .react-autoql-notification-settings .react-autoql-notification-title-container {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 5px 20px;
-    padding-bottom: 0;
-    color: var(--react-autoql-text-color-primary); }
-    .react-autoql-notification-settings .react-autoql-notification-title-container .react-autoql-notification-add-btn {
-      display: inline-block;
-      height: 35px;
-      width: 35px;
-      border-radius: 20px;
-      background: var(--react-autoql-accent-color, #26a7df);
-      color: var(--react-autoql-text-color-accent);
-      line-height: 38px;
-      text-align: center;
-      font-size: 20px;
-      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
-      transition: all 0.2s ease;
-      margin-right: 5px;
-      cursor: pointer; }
-      .react-autoql-notification-settings .react-autoql-notification-title-container .react-autoql-notification-add-btn:hover {
-        box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.32); }
-  .react-autoql-notification-settings .react-autoql-notification-setting-display-name {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    padding-right: 10px; }
-    .react-autoql-notification-settings .react-autoql-notification-setting-display-name .react-autoql-notification-setting-display-name-message {
-      opacity: 0.5; }
-  .react-autoql-notification-settings .react-autoql-re-initialize-btn {
-    vertical-align: middle;
-    height: 18px; }
-  .react-autoql-notification-settings .react-autoql-re-initialize-btn-text {
-    display: flex;
-    align-items: center;
-    margin-top: -25px; }
+.react-autoql-radio-btn-container .react-autoql-radio-btn {
+  position: relative;
+  display: inline-block;
+  padding: 3px 12px;
+  border: 1px solid var(--react-autoql-border-color, #dcdcdc);
+  margin-left: -1px;
+  transition: all 0.2s ease;
+  cursor: pointer; }
+  .react-autoql-radio-btn-container .react-autoql-radio-btn:not(:first-child) {
+    border-left: 1px solid transparent; }
+  .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-text-color-accent); }
+  .react-autoql-radio-btn-container .react-autoql-radio-btn.active.outlined {
+    background-color: inherit;
+    color: var(--react-autoql-accent-color, #26a7df); }
+  .react-autoql-radio-btn-container .react-autoql-radio-btn:hover:not(.active) {
+    border-color: var(--react-autoql-accent-color, #26a7df);
+    color: var(--react-autoql-accent-color, #26a7df); }
+  .react-autoql-radio-btn-container .react-autoql-radio-btn:first-child {
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
+    margin-left: 0; }
+  .react-autoql-radio-btn-container .react-autoql-radio-btn:last-child {
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px; }
 
 
 .notification-read-only-group {
@@ -2674,10 +3292,6 @@ g.legendOrdinal .legendTitle tspan {
       color: var(--react-autoql-text-color-placeholder, rgba(0, 0, 0, 0.2));
       transition: all 0.3s ease;
       cursor: pointer; }
-      .notification-group-wrapper .react-autoql-notification-group-container .react-autoql-notification-group-add-btn span.react-autoql-icon svg,
-      .notification-group-wrapper .react-autoql-notification-group-container .react-autoql-notification-group-delete-btn span.react-autoql-icon svg {
-        width: 15px;
-        height: 15px; }
       .notification-group-wrapper .react-autoql-notification-group-container .react-autoql-notification-group-add-btn:hover,
       .notification-group-wrapper .react-autoql-notification-group-container .react-autoql-notification-group-delete-btn:hover {
         color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.6)); }
@@ -2757,7 +3371,9 @@ g.legendOrdinal .legendTitle tspan {
   border: none; }
 
 .options-toolbar {
-  display: inline-block;
+  display: flex;
+  flex-wrap: nowrap;
+  flex-direction: row;
   background: inherit;
   padding: 5px;
   border-radius: 6px;
@@ -2766,17 +3382,23 @@ g.legendOrdinal .legendTitle tspan {
   border: 1px solid var(--react-autoql-border-color);
   box-shadow: 0px 2px 3px -2px var(--react-autoql-box-shadow-color); }
   .options-toolbar.vertical .react-autoql-toolbar-btn {
-    display: block; }
+    flex-direction: column; }
   .options-toolbar .react-autoql-toolbar-btn {
     color: var(--react-autoql-text-color-primary); }
 
-.more-options-menu,
-.report-problem-menu {
+.more-options-menu {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis; }
+  .more-options-menu li {
+    display: flex;
+    align-items: center; }
+
+.more-options-menu {
   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 {
-    margin-right: 3px; }
+  .more-options-menu span.react-autoql-icon {
+    margin-right: 10px; }
 
 .report-problem-modal-body h3 {
   margin-top: 0;
@@ -2787,8 +3409,10 @@ g.legendOrdinal .legendTitle tspan {
   margin-bottom: 30px; }
 
 .report-problem-modal-body .report-problem-text-area {
-  width: 100%;
+  width: 100% !important;
+  max-width: 100% !important;
   min-height: 80px;
+  max-height: 35vh;
   border-radius: 4px;
   border: 1px solid var(--react-autoql-border-color);
   margin-top: 15px;
@@ -2849,6 +3473,8 @@ g.legendOrdinal .legendTitle tspan {
   .chat-single-message-container .spinner-loader:after {
     border: 1px solid var(--react-autoql-accent-color);
     border-color: var(--react-autoql-accent-color) transparent var(--react-autoql-accent-color) transparent; }
+  .chat-single-message-container .chat-message-bubble {
+    box-shadow: var(--react-autoql-box-shadow-1); }
   .chat-single-message-container.response {
     display: flex;
     min-height: 0;
@@ -2857,8 +3483,7 @@ g.legendOrdinal .legendTitle tspan {
     animation: scale-up-bl 0.5s ease; }
     .chat-single-message-container.response .chat-message-bubble {
       background: var(--react-autoql-background-color-secondary);
-      color: var(--react-autoql-text-color-primary);
-      box-shadow: 0 1px 3px 0 var(--react-autoql-box-shadow-color, rgba(0, 0, 0, 0.15)); }
+      color: var(--react-autoql-text-color-primary); }
     .chat-single-message-container.response .chat-message-bubble:not(.text) {
       min-width: 125px; }
   .chat-single-message-container.request {
@@ -2868,12 +3493,11 @@ g.legendOrdinal .legendTitle tspan {
     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-text-color-accent);
-      box-shadow: 0 1px 3px 0 var(--react-autoql-box-shadow-color, rgba(0, 0, 0, 0.15)); }
+      color: var(--react-autoql-text-color-accent); }
   .chat-single-message-container .chat-message-bubble {
     position: relative;
     padding: 13px;
-    border-radius: 10px;
+    border-radius: 6px;
     max-width: calc(100% - 20px);
     word-wrap: break-word;
     font-family: inherit;
@@ -2902,7 +3526,9 @@ g.legendOrdinal .legendTitle tspan {
       .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 .react-autoql-toolbar {
-      white-space: nowrap; }
+      display: flex;
+      flex-wrap: nowrap;
+      flex-direction: row; }
       .chat-single-message-container .chat-message-bubble .react-autoql-toolbar:not(.active) {
         pointer-events: none;
         visibility: hidden;
@@ -2921,7 +3547,8 @@ g.legendOrdinal .legendTitle tspan {
   padding: 0 20px 15px 20px;
   animation: scale-up-bl 0.5s ease; }
   .chat-message-rt-container .react-autoql-reverse-translation {
-    padding-top: 0; }
+    padding-top: 0;
+    background: transparent; }
 
 /* animations */
 @keyframes scale-up-br {
@@ -2944,7 +3571,9 @@ g.legendOrdinal .legendTitle tspan {
   position: absolute;
   height: 100%;
   width: 100%;
-  padding-bottom: 158px; }
+  padding-bottom: 158px;
+  background-color: var(--react-autoql-background-color-primary);
+  background-image: linear-gradient(0deg, var(--react-autoql-background-color-tertiary) 0%, var(--react-autoql-background-color-primary) 100%); }
 
 .react-autoql-drawer .response-loading-container {
   position: absolute;
@@ -2959,18 +3588,20 @@ g.legendOrdinal .legendTitle tspan {
   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); }
+  background: transparent; }
 
 .react-autoql-drawer .watermark {
-  color: var(--react-autoql-text-color-placeholder);
+  display: flex;
+  justify-content: center;
+  align-items: center;
   text-align: center;
+  color: var(--react-autoql-text-color-placeholder);
   opacity: 0.7;
   top: 6px;
   width: calc(100% - 10px);
   font-size: 13px; }
+  .react-autoql-drawer .watermark .react-autoql-icon {
+    margin-right: 5px; }
 
 .react-autoql-drawer .chat-drawer-chat-bar {
   flex-shrink: 0;
@@ -3000,6 +3631,9 @@ g.legendOrdinal .legendTitle tspan {
             margin-inline-start: 0px;
     -webkit-margin-end: 0px;
             margin-inline-end: 0px; }
+    .query-tips-page-container h2 .react-autoql-icon {
+      margin-left: 7px;
+      margin-right: 2px; }
   .query-tips-page-container .react-autoql-chatbar-input-container {
     flex: 0;
     padding: 10px; }
@@ -3151,6 +3785,12 @@ g.legendOrdinal .legendTitle tspan {
     padding-left: 18px;
     letter-spacing: 0.05em;
     line-height: 22.5px; }
+    .react-autoql-chatbar-input-container.data-explorer .react-autosuggest__suggestion > span {
+      display: flex;
+      flex-wrap: nowrap;
+      align-items: center; }
+      .react-autoql-chatbar-input-container.data-explorer .react-autosuggest__suggestion > span .react-autoql-icon {
+        margin-right: 5px; }
   .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 {
@@ -3161,7 +3801,7 @@ g.legendOrdinal .legendTitle tspan {
 .react-autoql-card {
   background: var(--react-autoql-background-color-secondary);
   border-radius: 6px;
-  box-shadow: 0 1px 3px 0 var(--react-autoql-box-shadow-color, rgba(0, 0, 0, 0.15));
+  box-shadow: var(--react-autoql-box-shadow-1);
   padding: 15px;
   margin: 10px;
   overflow: hidden;
@@ -3292,7 +3932,7 @@ g.legendOrdinal .legendTitle tspan {
   background: var(--bg-color);
   border: 2px solid var(--border-color);
   color: var(--react-autoql-text-color);
-  box-shadow: var(--react-autoql-box-shadow-color, rgba(0, 0, 0, 0.15)) 0px 8px 24px; }
+  box-shadow: var(--react-autoql-box-shadow-1); }
   .data-explorer-page-container .data-preview-tooltip.place-bottom::after, .data-explorer-page-container .data-preview-tooltip.place-top::after, .data-explorer-page-container .data-preview-tooltip.place-left::after, .data-explorer-page-container .data-preview-tooltip.place-right::after {
     border-right: 2px solid var(--react-autoql-border-color);
     border-top: 2px solid var(--react-autoql-border-color);
@@ -3342,7 +3982,10 @@ g.legendOrdinal .legendTitle tspan {
     font-size: 15px;
     flex: 1; }
     .data-explorer-page-container .data-explorer-intro-message h2 {
-      display: block;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: center;
       font-size: 1.5em;
       -webkit-margin-before: 0.83em;
               margin-block-start: 0.83em;
@@ -3353,11 +3996,20 @@ g.legendOrdinal .legendTitle tspan {
       -webkit-margin-end: 0px;
               margin-inline-end: 0px;
       color: var(--react-autoql-text-color-primary); }
+      .data-explorer-page-container .data-explorer-intro-message h2 .react-autoql-icon {
+        margin-left: 7px;
+        margin-right: 2px; }
     .data-explorer-page-container .data-explorer-intro-message .intro-message-list-container {
       display: flex;
       justify-content: center;
       align-items: center;
       text-align: left; }
+      .data-explorer-page-container .data-explorer-intro-message .intro-message-list-container p {
+        display: flex;
+        flex-wrap: nowrap;
+        align-items: center; }
+        .data-explorer-page-container .data-explorer-intro-message .intro-message-list-container p .react-autoql-icon {
+          margin-right: 5px; }
   .data-explorer-page-container .data-explorer-topic-icon {
     margin-right: 5px; }
   .data-explorer-page-container .data-explorer-result-container {
@@ -3389,6 +4041,12 @@ g.legendOrdinal .legendTitle tspan {
       padding-left: 8px; }
   .data-explorer-page-container .data-preview-scroll-component {
     flex: 1; }
+  .data-explorer-page-container .react-autoql-card-title-text {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center; }
+    .data-explorer-page-container .react-autoql-card-title-text .react-autoql-icon {
+      margin-right: 5px; }
   .data-explorer-page-container .data-explorer-card-placeholder {
     min-height: 90px;
     width: 100%;
@@ -3414,9 +4072,15 @@ g.legendOrdinal .legendTitle tspan {
       font-weight: 600; }
       .data-explorer-page-container .query-suggestion-list-scroll-component .query-tip-item:hover {
         text-decoration: underline; }
-      .data-explorer-page-container .query-suggestion-list-scroll-component .query-tip-item .query-suggestion-text svg {
-        stroke-width: 1px;
-        stroke: currentColor; }
+      .data-explorer-page-container .query-suggestion-list-scroll-component .query-tip-item .query-suggestion-text {
+        display: flex;
+        align-items: center;
+        flex-wrap: nowrap; }
+        .data-explorer-page-container .query-suggestion-list-scroll-component .query-tip-item .query-suggestion-text .react-autoql-icon {
+          margin-right: 5px; }
+          .data-explorer-page-container .query-suggestion-list-scroll-component .query-tip-item .query-suggestion-text .react-autoql-icon svg {
+            stroke-width: 1px;
+            stroke: currentColor; }
       .data-explorer-page-container .query-suggestion-list-scroll-component .query-tip-item .animated-item {
         animation: fadeIn 0.3s linear;
         animation-fill-mode: both; }
@@ -3499,7 +4163,7 @@ g.legendOrdinal .legendTitle tspan {
   .filter-lock-menu .include-exclude-toggle-group {
     height: 23px;
     font-size: 12px;
-    font-weight: 200; }
+    font-weight: 400; }
     .filter-lock-menu .include-exclude-toggle-group .react-autoql-radio-btn.active {
       background-color: var(--react-autoql-border-color); }
     .filter-lock-menu .include-exclude-toggle-group :first-child.react-autoql-radio-btn:hover, .filter-lock-menu .include-exclude-toggle-group :first-child.react-autoql-radio-btn.active {
@@ -3576,14 +4240,12 @@ g.legendOrdinal .legendTitle tspan {
   box-sizing: border-box; }
   .filter-lock-menu-content.closed {
     opacity: 0; }
-  .filter-lock-menu-content h3 {
-    margin-top: 0px;
-    margin-bottom: 0px;
-    color: var(--react-autoql-text-color-primary); }
+  .filter-lock-menu-content h3,
   .filter-lock-menu-content h4 {
-    margin-top: 3px;
-    margin-bottom: 5px;
+    margin: 0px;
     color: var(--react-autoql-text-color-primary); }
+  .filter-lock-menu-content h4 {
+    font-weight: 500; }
   .filter-lock-menu-content .react-autoql-filter-lock-list-loading-container,
   .filter-lock-menu-content .react-autoql-empty-filter-list {
     display: flex;
@@ -3596,6 +4258,17 @@ g.legendOrdinal .legendTitle tspan {
   .filter-lock-menu-content .react-autoql-empty-filter-list,
   .filter-lock-menu-content .react-autoql-filter-list-container {
     flex: 1; }
+  .filter-lock-menu-content .react-autoql-filter-locking-title h3,
+  .filter-lock-menu-content .persist-toggle-column,
+  .filter-lock-menu-content .filter-name-column {
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    justify-content: flex-start; }
+    .filter-lock-menu-content .react-autoql-filter-locking-title h3 .react-autoql-icon,
+    .filter-lock-menu-content .persist-toggle-column .react-autoql-icon,
+    .filter-lock-menu-content .filter-name-column .react-autoql-icon {
+      margin: 0 5px; }
   .filter-lock-menu-content .filter-lock-menu-header {
     flex: 0;
     width: 100%;
@@ -3606,17 +4279,25 @@ g.legendOrdinal .legendTitle tspan {
     padding-bottom: 15px;
     box-sizing: border-box;
     padding-right: 15px; }
-    .filter-lock-menu-content .filter-lock-menu-header .filter-locking-close-btn {
-      border: none;
-      margin: 0;
-      padding: 0;
-      font-size: 20px; }
-    .filter-lock-menu-content .filter-lock-menu-header .filter-locking-saving-indicator {
-      display: inline-block;
-      font-weight: 400;
-      font-size: 14px;
-      padding-right: 20px;
-      color: var(--react-autoql-accent-color); }
+    .filter-lock-menu-content .filter-lock-menu-header .filter-locking-close-and-saving-container {
+      display: flex;
+      justify-content: flex-end; }
+      .filter-lock-menu-content .filter-lock-menu-header .filter-locking-close-and-saving-container .filter-locking-close-btn {
+        border-radius: 20px;
+        margin: 0;
+        padding: 3px;
+        font-size: 20px;
+        color: var(--react-autoql-text-color-primary); }
+      .filter-lock-menu-content .filter-lock-menu-header .filter-locking-close-and-saving-container .filter-locking-saving-indicator {
+        display: inline-block;
+        font-weight: 400;
+        font-size: 14px;
+        padding-right: 20px;
+        color: var(--react-autoql-accent-color);
+        transition: opacity 0.2s ease; }
+        .filter-lock-menu-content .filter-lock-menu-header .filter-locking-close-and-saving-container .filter-locking-saving-indicator.hidden {
+          opacity: 0;
+          visibility: hidden; }
   .filter-lock-menu-content .filter-lock-menu-footer {
     width: 100%;
     display: flex;
@@ -3628,9 +4309,8 @@ g.legendOrdinal .legendTitle tspan {
     .filter-lock-menu-content .react-autoql-filter-list-container .react-autoql-filter-list-title {
       width: 100%;
       display: flex;
-      flex-wrap: nowrap;
       flex-direction: row;
-      align-items: flex-start;
+      flex-wrap: nowrap;
       justify-content: space-between;
       margin-bottom: 4px; }
       .filter-lock-menu-content .react-autoql-filter-list-container .react-autoql-filter-list-title .filter-lock-category-title {
@@ -3639,11 +4319,7 @@ g.legendOrdinal .legendTitle tspan {
         overflow: hidden;
         text-overflow: ellipsis; }
       .filter-lock-menu-content .react-autoql-filter-list-container .react-autoql-filter-list-title .filter-name-column {
-        display: flex;
         flex-wrap: wrap;
-        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 {
@@ -3654,8 +4330,6 @@ g.legendOrdinal .legendTitle tspan {
         justify-content: flex-end;
         flex: 0 0 auto;
         margin-right: 40px; }
-        .filter-lock-menu-content .react-autoql-filter-list-container .react-autoql-filter-list-title .persist-toggle-column .react-autoql-icon {
-          margin-left: 3px; }
     .filter-lock-menu-content .react-autoql-filter-list-container .react-autoql-filter-list-item-container {
       margin-bottom: 10px;
       margin-right: 0px; }
@@ -3732,7 +4406,7 @@ g.legendOrdinal .legendTitle tspan {
       font-size: 15px;
       font-weight: normal;
       z-index: 2;
-      box-shadow: 0 1px 3px 0 var(--react-autoql-box-shadow-color, rgba(0, 0, 0, 0.15));
+      box-shadow: var(--react-autoql-box-shadow-1);
       text-align: left;
       border-radius: 4px;
       width: 100%;
@@ -3911,66 +4585,64 @@ g.legendOrdinal .legendTitle tspan {
   animation: fadeIn 0.3s;
   text-align: center; }
 
-.react-autoql-drawer .react-autoql-drawer-header-btn {
-  line-height: 1em;
-  font-weight: normal;
-  float: none;
-  opacity: 1; }
-  .react-autoql-drawer .react-autoql-drawer-header-btn.hidden {
-    display: none; }
-  .react-autoql-drawer .react-autoql-drawer-header-btn.close span.react-autoql-icon svg {
-    width: 27px;
-    height: 27px; }
-  .react-autoql-drawer .react-autoql-drawer-header-btn.screen-mode span.react-autoql-icon svg {
-    width: 22px;
-    height: 22px; }
-  .react-autoql-drawer .react-autoql-drawer-header-btn.clear-all span.react-autoql-icon svg {
-    width: 22px;
-    height: 22px; }
-  .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 {
+.react-autoql-drawer .react-autoql-drawer-header-btn.hidden {
+  display: none; }
+
+.react-autoql-drawer .react-autoql-drawer-header-btn .react-autoql-filter-lock-icon-container {
+  display: inline-flex;
+  position: relative;
+  margin-right: 4px;
+  margin-top: 3px; }
+  .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;
-    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; }
+    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 .react-autoql-drawer-header-btn {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  margin: 10px 0px 10px 0px;
+  margin-right: 0; }
+  .react-autoql-drawer .chat-header-container .react-autoql-drawer-header-btn .react-autoql-icon-close {
+    font-size: 1.2em; }
+
 .react-autoql-drawer .chat-header-container button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
   position: relative;
   background: transparent;
   border: none;
   color: var(--react-autoql-text-color-accent);
-  margin: 10px 0px 10px 0px;
-  margin-right: 0;
-  font-size: 20px;
+  margin: 0;
+  font-size: 24px;
   cursor: pointer;
   outline: none !important; }
 
 .react-autoql-drawer .chat-header-container button:hover {
   opacity: 0.7; }
 
-.react-autoql-drawer .chat-header-container button svg {
-  width: 35px;
-  height: 35px; }
-
 .topics-container {
   margin: 5px 0; }
 
 .intro-qi-link {
   cursor: pointer;
   color: var(--react-autoql-accent-color); }
+  .intro-qi-link .react-autoql-icon {
+    margin-right: -3px;
+    vertical-align: middle;
+    padding-bottom: 2px; }
 
 /* rc-drawer */
 .react-autoql-drawer .drawer-content {
@@ -4359,8 +5031,8 @@ g.legendOrdinal .legendTitle tspan {
   font-family: var(--react-autoql-font-family), sans-serif;
   height: 100%;
   overflow: hidden;
-  border-radius: 4px;
-  box-shadow: 0 1px 3px 0 var(--react-autoql-box-shadow-color, rgba(0, 0, 0, 0.15)); }
+  border-radius: 6px;
+  box-shadow: var(--react-autoql-box-shadow-1); }
 
 .react-autoql-dashboard-tile-inner-div {
   height: 100%;
@@ -4419,6 +5091,7 @@ g.legendOrdinal .legendTitle tspan {
   opacity: 0; }
   .dashboard-tile-toolbars-container .dashboard-tile-toolbars-right-container,
   .dashboard-tile-toolbars-container .dashboard-tile-toolbars-left-container {
+    display: flex;
     pointer-events: auto; }
   .dashboard-tile-toolbars-container.left-padding {
     width: calc(100% - 40px); }
@@ -4538,8 +5211,8 @@ g.legendOrdinal .legendTitle tspan {
     color: var(--react-autoql-dashboard-title-color); }
 
 .dashboard-tile-title-container .dashboard-tile-title {
-  font-weight: bold;
-  font-size: 14px; }
+  font-weight: 600;
+  font-size: 15px; }
 
 .dashboard-tile-edit-wrapper {
   display: flex;
@@ -4551,14 +5224,15 @@ g.legendOrdinal .legendTitle tspan {
 
 .dashboard-tile-play-button {
   cursor: default;
-  flex-grow: 0;
-  flex-shrink: 0; }
+  flex: 0 0 auto;
+  font-size: 25px;
+  margin-left: 6px;
+  margin-bottom: 3px;
+  display: flex;
+  align-items: center; }
 
 .dashboard-tile-play-button span.react-autoql-icon svg {
   cursor: pointer;
-  width: 25px;
-  height: 33px;
-  margin-left: 10px;
   color: var(--react-autoql-accent-color); }
 
 .dashboard-tile-play-button.disabled svg {
@@ -4635,16 +5309,12 @@ g.legendOrdinal .legendTitle tspan {
     position: absolute;
     pointer-events: none;
     z-index: 1; }
-  .dashboard-tile-right-input-container .query-input-icon,
-  .dashboard-tile-left-input-container .query-input-icon {
-    font-size: 18px;
-    top: 4px;
-    left: 10px; }
-  .dashboard-tile-right-input-container .title-input-icon,
-  .dashboard-tile-left-input-container .title-input-icon {
-    font-size: 16px;
-    top: 6px;
-    left: 11px; }
+  .dashboard-tile-right-input-container .react-autoql-icon,
+  .dashboard-tile-left-input-container .react-autoql-icon {
+    display: flex;
+    height: 100%;
+    font-size: 17px;
+    margin-left: 10px; }
 
 .dashboard-tile-input.second.query {
   transition: all 0.3s ease;
@@ -4712,12 +5382,6 @@ g.legendOrdinal .legendTitle tspan {
 .dashboard-tile-input-container input::placeholder {
   opacity: 0.5; }
 
-.react-autoql-dashboard .edit-mode-placeholder-icon {
-  display: inline-block;
-  line-height: 22px;
-  vertical-align: middle;
-  height: 23px; }
-
 .dashboard-tile-input-container .react-autosuggest__suggestions-container--open {
   position: absolute;
   bottom: unset;
@@ -4725,13 +5389,12 @@ g.legendOrdinal .legendTitle tspan {
   padding-bottom: 5px;
   display: block;
   height: unset;
-  border-radius: 15px;
   font-family: inherit;
   font-size: 15px;
   font-weight: normal;
   z-index: 2;
   overflow: hidden;
-  box-shadow: 0 1px 3px 0 var(--react-autoql-box-shadow-color, rgba(0, 0, 0, 0.15));
+  box-shadow: var(--react-autoql-box-shadow-1);
   text-align: left;
   width: 100%;
   top: 35px;
@@ -4759,14 +5422,17 @@ g.legendOrdinal .legendTitle tspan {
   color: var(--react-autoql-text-color-placeholder); }
 
 .dashboard-tile-placeholder-text {
+  display: flex;
+  justify-content: center;
+  align-items: center;
   font-size: 15px;
+  font-style: italic;
   color: var(--react-autoql-text-color-placeholder, rgba(0, 0, 0, 0.3));
   padding: 0 20px;
   margin-bottom: 30px;
   font-style: italic; }
-  .dashboard-tile-placeholder-text .play-icon {
-    vertical-align: bottom;
-    line-height: 20px; }
+  .dashboard-tile-placeholder-text .react-autoql-icon {
+    margin: 0px 5px; }
 
 /* React Grid Layout overrides */
 .react-grid-item .react-resizable-handle {