react-autoql 6.2.1 → 6.3.1

package/dist/autoql.esm.css

@@ -63,7 +63,7 @@ span.react-autoql-icon {
   flex-grow: 0; }
 
 .chat-voice-record-button:hover {
-  box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.15); }
+  box-shadow: 0px 0px 4px 1px var(--react-autoql-box-shadow-color, rgba(0, 0, 0, 0.15)); }
 
 .chat-voice-record-button.listening {
   background: #ff471a; }
@@ -161,7 +161,7 @@ span.react-autoql-icon {
   background: rgba(0, 0, 0, 0.03); }
 
 .react-autoql-chatbar-input:not(:disabled):hover {
-  box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1); }
+  box-shadow: 0px 0px 5px 1px var(--react-autoql-box-shadow-color, rgba(0, 0, 0, 0.15)); }
 
 .react-autoql-chatbar-input::-moz-placeholder {
   /* Default color outside of data messenger */
@@ -202,18 +202,16 @@ span.react-autoql-icon {
   font-weight: normal;
   z-index: 2;
   overflow: hidden;
-  box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1);
+  box-shadow: 0px 0px 5px 1px var(--react-autoql-box-shadow-color, rgba(0, 0, 0, 0.15));
   /* Default styles outside of data messenger */
   background-color: var(--react-autoql-background-color-secondary);
   color: var(--react-autoql-text-color-primary); }
 
-.react-autoql-bar-container.autosuggest-top
-.react-autosuggest__suggestions-container--open {
+.react-autoql-bar-container.autosuggest-top .react-autosuggest__suggestions-container--open {
   top: unset;
   bottom: 45px; }
 
-.react-autoql-bar-container.autosuggest-bottom
-.react-autosuggest__suggestions-container--open {
+.react-autoql-bar-container.autosuggest-bottom .react-autosuggest__suggestions-container--open {
   top: 45px;
   bottom: unset; }
 
@@ -273,6 +271,106 @@ span.react-autoql-icon {
   font-size: 20px;
   color: #28a8e0; }
 
+.spinner-loader {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  margin-right: 6px; }
+
+.spinner-loader:after {
+  content: ' ';
+  display: block;
+  width: 16px;
+  height: 16px;
+  margin: 0px;
+  border-radius: 50%;
+  border: 1px solid currentColor;
+  border-color: currentColor transparent currentColor transparent;
+  animation: spinner-loader 1.2s linear infinite; }
+
+@keyframes spinner-loader {
+  0% {
+    transform: rotate(0deg); }
+  100% {
+    transform: rotate(360deg); } }
+
+.react-autoql-date-picker .rdrCalendarWrapper,
+.react-autoql-date-picker .rdrDateRangeWrapper {
+  background: var(--react-autoql-background-color-secondary);
+  color: var(--react-autoql-text-color-primary); }
+  .react-autoql-date-picker .rdrCalendarWrapper .rdrDateDisplayWrapper,
+  .react-autoql-date-picker .rdrDateRangeWrapper .rdrDateDisplayWrapper {
+    background: var(--react-autoql-background-color-primary); }
+    .react-autoql-date-picker .rdrCalendarWrapper .rdrDateDisplayWrapper .rdrDateDisplay,
+    .react-autoql-date-picker .rdrDateRangeWrapper .rdrDateDisplayWrapper .rdrDateDisplay {
+      color: var(--react-autoql-accent-color) !important; }
+      .react-autoql-date-picker .rdrCalendarWrapper .rdrDateDisplayWrapper .rdrDateDisplay .rdrDateDisplayItem,
+      .react-autoql-date-picker .rdrDateRangeWrapper .rdrDateDisplayWrapper .rdrDateDisplay .rdrDateDisplayItem {
+        background: var(--react-autoql-background-color-secondary); }
+        .react-autoql-date-picker .rdrCalendarWrapper .rdrDateDisplayWrapper .rdrDateDisplay .rdrDateDisplayItem input,
+        .react-autoql-date-picker .rdrDateRangeWrapper .rdrDateDisplayWrapper .rdrDateDisplay .rdrDateDisplayItem input {
+          color: var(--react-autoql-text-color-primary); }
+  .react-autoql-date-picker .rdrCalendarWrapper .rdrMonthAndYearWrapper .rdrNextPrevButton,
+  .react-autoql-date-picker .rdrDateRangeWrapper .rdrMonthAndYearWrapper .rdrNextPrevButton {
+    background-color: var(--react-autoql-border-color);
+    color: var(--react-autoql-text-color-primary);
+    opacity: 0.8; }
+    .react-autoql-date-picker .rdrCalendarWrapper .rdrMonthAndYearWrapper .rdrNextPrevButton:hover,
+    .react-autoql-date-picker .rdrDateRangeWrapper .rdrMonthAndYearWrapper .rdrNextPrevButton:hover {
+      opacity: 0.5; }
+    .react-autoql-date-picker .rdrCalendarWrapper .rdrMonthAndYearWrapper .rdrNextPrevButton.rdrPprevButton i,
+    .react-autoql-date-picker .rdrDateRangeWrapper .rdrMonthAndYearWrapper .rdrNextPrevButton.rdrPprevButton i {
+      border-color: transparent var(--react-autoql-text-color-primary) transparent transparent; }
+    .react-autoql-date-picker .rdrCalendarWrapper .rdrMonthAndYearWrapper .rdrNextPrevButton.rdrNextButton i,
+    .react-autoql-date-picker .rdrDateRangeWrapper .rdrMonthAndYearWrapper .rdrNextPrevButton.rdrNextButton i {
+      border-color: transparent transparent transparent var(--react-autoql-text-color-primary); }
+  .react-autoql-date-picker .rdrCalendarWrapper .rdrMonthAndYearWrapper select,
+  .react-autoql-date-picker .rdrDateRangeWrapper .rdrMonthAndYearWrapper select {
+    color: var(--react-autoql-text-color-primary); }
+    .react-autoql-date-picker .rdrCalendarWrapper .rdrMonthAndYearWrapper select:hover,
+    .react-autoql-date-picker .rdrDateRangeWrapper .rdrMonthAndYearWrapper select:hover {
+      background-color: var(--react-autoql-border-color); }
+  .react-autoql-date-picker .rdrCalendarWrapper .rdrMonths .rdrWeekDay,
+  .react-autoql-date-picker .rdrDateRangeWrapper .rdrMonths .rdrWeekDay {
+    color: var(--react-autoql-text-color-placeholder); }
+  .react-autoql-date-picker .rdrCalendarWrapper .rdrMonths .rdrDay:not(.rdrDayPassive) .rdrInRange ~ .rdrDayNumber span,
+  .react-autoql-date-picker .rdrCalendarWrapper .rdrMonths .rdrDay:not(.rdrDayPassive) .rdrStartEdge ~ .rdrDayNumber span,
+  .react-autoql-date-picker .rdrCalendarWrapper .rdrMonths .rdrDay:not(.rdrDayPassive) .rdrEndEdge ~ .rdrDayNumber span,
+  .react-autoql-date-picker .rdrCalendarWrapper .rdrMonths .rdrDay:not(.rdrDayPassive) .rdrSelected ~ .rdrDayNumber span,
+  .react-autoql-date-picker .rdrDateRangeWrapper .rdrMonths .rdrDay:not(.rdrDayPassive) .rdrInRange ~ .rdrDayNumber span,
+  .react-autoql-date-picker .rdrDateRangeWrapper .rdrMonths .rdrDay:not(.rdrDayPassive) .rdrStartEdge ~ .rdrDayNumber span,
+  .react-autoql-date-picker .rdrDateRangeWrapper .rdrMonths .rdrDay:not(.rdrDayPassive) .rdrEndEdge ~ .rdrDayNumber span,
+  .react-autoql-date-picker .rdrDateRangeWrapper .rdrMonths .rdrDay:not(.rdrDayPassive) .rdrSelected ~ .rdrDayNumber span {
+    color: var(--react-autoql-text-color-accent); }
+  .react-autoql-date-picker .rdrCalendarWrapper .rdrMonths .rdrDayPassive .rdrDayNumber span,
+  .react-autoql-date-picker .rdrDateRangeWrapper .rdrMonths .rdrDayPassive .rdrDayNumber span {
+    color: var(--react-autoql-text-color-placeholder);
+    opacity: 0.6; }
+  .react-autoql-date-picker .rdrCalendarWrapper .rdrMonths .rdrDayNumber span,
+  .react-autoql-date-picker .rdrDateRangeWrapper .rdrMonths .rdrDayNumber span {
+    color: var(--react-autoql-text-color-primary); }
+  .react-autoql-date-picker .rdrCalendarWrapper .rdrMonths .rdrDayToday .rdrDayNumber span:after,
+  .react-autoql-date-picker .rdrDateRangeWrapper .rdrMonths .rdrDayToday .rdrDayNumber span:after {
+    background: var(--react-autoql-accent-color); }
+  .react-autoql-date-picker .rdrCalendarWrapper .rdrMonths .rdrDayToday:not(.rdrDayPassive) .rdrInRange ~ .rdrDayNumber span:after,
+  .react-autoql-date-picker .rdrCalendarWrapper .rdrMonths .rdrDayToday:not(.rdrDayPassive) .rdrStartEdge ~ .rdrDayNumber span:after,
+  .react-autoql-date-picker .rdrCalendarWrapper .rdrMonths .rdrDayToday:not(.rdrDayPassive) .rdrEndEdge ~ .rdrDayNumber span:after,
+  .react-autoql-date-picker .rdrCalendarWrapper .rdrMonths .rdrDayToday:not(.rdrDayPassive) .rdrSelected ~ .rdrDayNumber span:after,
+  .react-autoql-date-picker .rdrDateRangeWrapper .rdrMonths .rdrDayToday:not(.rdrDayPassive) .rdrInRange ~ .rdrDayNumber span:after,
+  .react-autoql-date-picker .rdrDateRangeWrapper .rdrMonths .rdrDayToday:not(.rdrDayPassive) .rdrStartEdge ~ .rdrDayNumber span:after,
+  .react-autoql-date-picker .rdrDateRangeWrapper .rdrMonths .rdrDayToday:not(.rdrDayPassive) .rdrEndEdge ~ .rdrDayNumber span:after,
+  .react-autoql-date-picker .rdrDateRangeWrapper .rdrMonths .rdrDayToday:not(.rdrDayPassive) .rdrSelected ~ .rdrDayNumber span:after {
+    background: var(--react-autoql-text-color-accent); }
+  .react-autoql-date-picker .rdrCalendarWrapper .rdrMonths .rdrSelected,
+  .react-autoql-date-picker .rdrCalendarWrapper .rdrMonths .rdrInRange,
+  .react-autoql-date-picker .rdrCalendarWrapper .rdrMonths .rdrStartEdge,
+  .react-autoql-date-picker .rdrCalendarWrapper .rdrMonths .rdrEndEdge,
+  .react-autoql-date-picker .rdrDateRangeWrapper .rdrMonths .rdrSelected,
+  .react-autoql-date-picker .rdrDateRangeWrapper .rdrMonths .rdrInRange,
+  .react-autoql-date-picker .rdrDateRangeWrapper .rdrMonths .rdrStartEdge,
+  .react-autoql-date-picker .rdrDateRangeWrapper .rdrMonths .rdrEndEdge {
+    background: var(--react-autoql-accent-color); }
+
 .react-autoql-table-container {
   flex: 1;
   width: 100% !important;
@@ -299,6 +397,15 @@ span.react-autoql-icon {
       width: 100%;
       z-index: 0; }
 
+.react-autoql-table-date-picker {
+  background: var(--react-autoql-background-color-secondary);
+  color: var(--react-autoql-text-color-primary);
+  padding: 15px;
+  padding-bottom: 5px; }
+  .react-autoql-table-date-picker h3 {
+    margin-top: 0;
+    margin-left: 5px; }
+
 .react-autoql-table {
   margin-bottom: 0 !important; }
 
@@ -311,10 +418,7 @@ span.react-autoql-icon {
 .react-autoql-table.tabulator .tabulator-tableHolder .tabulator-table {
   background-color: inherit; }
 
-.react-autoql-table-container:not(.supports-drilldown)
-.react-autoql-table.tabulator
-.tabulator-row
-.tabulator-cell {
+.react-autoql-table-container:not(.supports-drilldown) .react-autoql-table.tabulator .tabulator-row .tabulator-cell {
   cursor: text; }
 
 .react-autoql-table-container.supports-drilldown
@@ -330,17 +434,11 @@ span.react-autoql-icon {
   transition: color 0.1s ease;
   cursor: pointer; }
 
-.react-autoql-table-container.supports-drilldown.pivot .react-autoql-table.tabulator
-.tabulator-row
-.tabulator-cell:not(.pivot-category):hover,
-.react-autoql-table-container.supports-drilldown:not(.pivot) .react-autoql-table.tabulator
-.tabulator-row:hover
-.tabulator-cell {
+.react-autoql-table-container.supports-drilldown.pivot .react-autoql-table.tabulator .tabulator-row .tabulator-cell:not(.pivot-category):hover,
+.react-autoql-table-container.supports-drilldown:not(.pivot) .react-autoql-table.tabulator .tabulator-row:hover .tabulator-cell {
   color: var(--react-autoql-accent-color); }
 
-.react-autoql-table.tabulator
-.tabulator-header
-.tabulator-col.tabulator-sortable:hover {
+.react-autoql-table.tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover {
   background-color: var(--react-autoql-hover-color) !important; }
 
 .react-autoql-table.tabulator .tabulator-header .tabulator-col,
@@ -385,8 +483,7 @@ span.react-autoql-icon {
   .react-autoql-table-container.filtering.infinite .tabulator-col.DATE .tabulator-header-filter {
     display: none; }
   .react-autoql-table-container.filtering.limited .tabulator-col .tabulator-header-filter,
-  .react-autoql-table-container.filtering.infinite .tabulator-col:not(.DATE_STRING):not(.DATE)
-.tabulator-header-filter {
+  .react-autoql-table-container.filtering.infinite .tabulator-col:not(.DATE_STRING):not(.DATE) .tabulator-header-filter {
     display: inline; }
   .react-autoql-table-container.filtering .react-autoql-table .tabulator-tableHolder {
     min-height: calc(100% - 74px) !important;
@@ -404,28 +501,17 @@ span.react-autoql-icon {
     height: calc(100% - 40px) !important;
     max-height: calc(100% - 40px) !important; }
 
-.react-autoql-table.tabulator
-.tabulator-header
-.tabulator-col
-.tabulator-col-content {
+.react-autoql-table.tabulator .tabulator-header .tabulator-col .tabulator-col-content {
   padding: 8px 5px; }
 
-.react-autoql-table.tabulator
-.tabulator-header
-.tabulator-col
-.tabulator-col-content
-.tabulator-arrow {
+.react-autoql-table.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-arrow {
   opacity: 0;
   border-left: 4px solid transparent !important;
   border-right: 4px solid transparent !important;
   right: 4px;
   top: calc(50% - 3px); }
 
-.react-autoql-table.tabulator
-.tabulator-header
-.tabulator-col:hover
-.tabulator-col-content
-.tabulator-arrow {
+.react-autoql-table.tabulator .tabulator-header .tabulator-col:hover .tabulator-col-content .tabulator-arrow {
   opacity: 1 !important; }
 
 .react-autoql-table.tabulator
@@ -507,29 +593,6 @@ span.react-autoql-icon {
 .comparison-value-negative {
   color: #e80000; }
 
-.spinner-loader {
-  display: inline-block;
-  width: 14px;
-  height: 14px;
-  margin-right: 6px; }
-
-.spinner-loader:after {
-  content: ' ';
-  display: block;
-  width: 16px;
-  height: 16px;
-  margin: 0px;
-  border-radius: 50%;
-  border: 1px solid currentColor;
-  border-color: currentColor transparent currentColor transparent;
-  animation: spinner-loader 1.2s linear infinite; }
-
-@keyframes spinner-loader {
-  0% {
-    transform: rotate(0deg); }
-  100% {
-    transform: rotate(360deg); } }
-
 ::-webkit-scrollbar {
   visibility: hidden;
   width: 6px;
@@ -1109,7 +1172,7 @@ g.legendOrdinal .legendTitle tspan {
   cursor: pointer;
   outline: none !important;
   transition: all 0.2s ease;
-  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 0px; }
+  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; }
@@ -1246,14 +1309,14 @@ g.legendOrdinal .legendTitle tspan {
 
 
 .viz-toolbar {
+  display: inline-block;
   background: inherit;
   padding: 5px;
   border-radius: 6px;
   line-height: 28px;
-  border: 1px solid #d3d3d352;
-  text-align: left;
-  display: inline-block;
-  background: var(--react-autoql-background-color-secondary); }
+  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; }
 
@@ -1341,7 +1404,7 @@ g.legendOrdinal .legendTitle tspan {
   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 rgba(0, 0, 0, 0.15);
+  box-shadow: 0 0 14px 1px var(--react-autoql-box-shadow-color, rgba(0, 0, 0, 0.15));
   padding: 0 !important;
   margin: auto auto;
   max-width: 90vw;
@@ -1991,7 +2054,7 @@ g.legendOrdinal .legendTitle tspan {
   display: 'inline-block'; }
 
 .react-autoql-data-alert-query-name-tooltip-icon {
-  color: var(--react-autoql-info-color); }
+  color: var(--react-autoql-info-color) !important; }
 
 .notification-list-loading-container {
   text-align: center;
@@ -2083,7 +2146,7 @@ g.legendOrdinal .legendTitle tspan {
     margin: 20px;
     margin-top: 10px;
     border-radius: 4px;
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
+    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 {
@@ -2324,7 +2387,8 @@ g.legendOrdinal .legendTitle tspan {
   border-radius: 6px;
   line-height: 28px;
   background: var(--react-autoql-background-color-secondary);
-  border: 1px solid var(--react-autoql-border-color); }
+  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; }
   .options-toolbar .react-autoql-toolbar-btn {
@@ -2405,7 +2469,7 @@ g.legendOrdinal .legendTitle tspan {
     .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 rgba(0, 0, 0, 0.13); }
+      box-shadow: 0 1px 3px 0 var(--react-autoql-box-shadow-color, rgba(0, 0, 0, 0.15)); }
     .chat-single-message-container.response .chat-message-bubble:not(.text) {
       min-width: 125px;
       padding-bottom: 15px; }
@@ -2417,7 +2481,7 @@ g.legendOrdinal .legendTitle tspan {
     .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 rgba(0, 0, 0, 0.13); }
+      box-shadow: 0 1px 3px 0 var(--react-autoql-box-shadow-color, rgba(0, 0, 0, 0.15)); }
   .chat-single-message-container .chat-message-bubble {
     position: relative;
     padding: 13px;
@@ -2683,9 +2747,7 @@ g.legendOrdinal .legendTitle tspan {
   padding: 10px;
   margin: 10px;
   margin-bottom: 0; }
-  .react-autoql-chatbar-input-container.data-explorer.no-suggestions .react-autosuggest__suggestions-container--open
-.react-autosuggest__section-container:last-child
-ul {
+  .react-autoql-chatbar-input-container.data-explorer.no-suggestions .react-autosuggest__suggestions-container--open .react-autosuggest__section-container:last-child ul {
     pointer-events: none;
     visibility: hidden;
     background: transparent !important;
@@ -2718,7 +2780,7 @@ ul {
     overflow: hidden;
     margin-top: 3px;
     border: 1px solid var(--react-autoql-border-color);
-    box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1);
+    box-shadow: 0px 0px 5px 1px var(--react-autoql-box-shadow-color, rgba(0, 0, 0, 0.15));
     background-color: var(--react-autoql-background-color-secondary);
     color: var(--react-autoql-text-color-primary);
     box-sizing: content-box; }
@@ -2747,7 +2809,7 @@ ul {
 .react-autoql-card {
   background: var(--react-autoql-background-color-secondary);
   border-radius: 6px;
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
+  box-shadow: 0 1px 3px 0 var(--react-autoql-box-shadow-color, rgba(0, 0, 0, 0.15));
   padding: 15px;
   margin: 10px;
   overflow: hidden;
@@ -2882,7 +2944,7 @@ ul {
   background: var(--bg-color);
   border: 2px solid var(--border-color);
   color: var(--react-autoql-text-color);
-  box-shadow: rgba(102, 105, 109, 0.2) 0px 8px 24px; }
+  box-shadow: var(--react-autoql-box-shadow-color, rgba(0, 0, 0, 0.15)) 0px 8px 24px; }
   .data-explorer-page-container .data-preview-tooltip.place-bottom::before {
     border-bottom-color: var(--border-color) !important; }
   .data-explorer-page-container .data-preview-tooltip.place-bottom::after {
@@ -3052,7 +3114,7 @@ ul {
   .filter-lock-menu .filter-lock-menu-content-container {
     background: var(--react-autoql-background-color-secondary);
     color: var(--react-autoql-text-color-primary);
-    box-shadow: 0px 0 8px rgba(0, 0, 0, 0.15);
+    box-shadow: 0px 0 8px var(--react-autoql-box-shadow-color, rgba(0, 0, 0, 0.15));
     transition: opacity 0.1s ease 0s !important;
     border: 1px solid #ababab52;
     padding: 0 !important;
@@ -3241,7 +3303,7 @@ ul {
     background: var(--react-autoql-background-color-secondary);
     color: var(--react-autoql-text-color-primary); }
     .filter-lock-menu-content .react-autoql-filter-locking-input:hover {
-      box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1); }
+      box-shadow: 0px 0px 5px 1px var(--react-autoql-box-shadow-color, rgba(0, 0, 0, 0.15)); }
     .filter-lock-menu-content .react-autoql-filter-locking-input::-moz-placeholder {
       color: rgba(var(--react-autoql-text-color-placeholder), 2) !important;
       opacity: 0.5; }
@@ -3263,7 +3325,7 @@ ul {
       font-size: 15px;
       font-weight: normal;
       z-index: 2;
-      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
+      box-shadow: 0 1px 3px 0 var(--react-autoql-box-shadow-color, rgba(0, 0, 0, 0.15));
       text-align: left;
       border-radius: 4px;
       width: 100%;
@@ -3340,7 +3402,7 @@ ul {
   height: 60px;
   background: var(--react-autoql-accent-color);
   color: var(--react-autoql-text-color-accent);
-  box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 0 12px 1px var(--react-autoql-box-shadow-color, rgba(0, 0, 0, 0.15));
   flex: 0 0 auto;
   z-index: 1; }
 
@@ -3580,7 +3642,7 @@ ul {
   z-index: 99999;
   border: 1px solid #ababab52;
   border-radius: 4px;
-  box-shadow: 0px 0 8px rgba(0, 0, 0, 0.15);
+  box-shadow: 0px 0 8px var(--react-autoql-box-shadow-color, rgba(0, 0, 0, 0.15));
   transition: opacity 0.2s ease 0s !important;
   opacity: 1 !important;
   overflow: hidden !important;
@@ -3652,7 +3714,7 @@ ul {
 
 /* Container holding the tabs */
 .page-switcher-container {
-  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.2);
+  box-shadow: -2px 0 8px var(--react-autoql-box-shadow-color, rgba(0, 0, 0, 0.15));
   overflow: hidden;
   box-sizing: border-box;
   display: flex;
@@ -3683,7 +3745,7 @@ ul {
     margin-bottom: 20px;
     flex-direction: column; }
     .page-switcher-container.right .tab {
-      box-shadow: inset -18px 0px 8px -10px rgba(0, 0, 0, 0.2); }
+      box-shadow: inset -18px 0px 8px -10px var(--react-autoql-box-shadow-color, rgba(0, 0, 0, 0.15)); }
   .page-switcher-container.left {
     border-top-right-radius: 5px;
     border-bottom-right-radius: 5px;
@@ -3693,7 +3755,7 @@ ul {
     margin-left: -5px;
     flex-direction: column; }
     .page-switcher-container.left .tab {
-      box-shadow: inset 18px 0px 8px -10px rgba(0, 0, 0, 0.2); }
+      box-shadow: inset 18px 0px 8px -10px var(--react-autoql-box-shadow-color, rgba(0, 0, 0, 0.15)); }
   .page-switcher-container.top {
     border-bottom-right-radius: 5px;
     border-bottom-left-radius: 5px;
@@ -3703,7 +3765,7 @@ ul {
     flex-direction: row;
     height: 40px; }
     .page-switcher-container.top .tab {
-      box-shadow: inset 0px 12px 8px -10px rgba(0, 0, 0, 0.2); }
+      box-shadow: inset 0px 12px 8px -10px var(--react-autoql-box-shadow-color, rgba(0, 0, 0, 0.15)); }
   .page-switcher-container.bottom {
     border-top-left-radius: 5px;
     border-top-right-radius: 5px;
@@ -3713,7 +3775,7 @@ ul {
     flex-direction: row;
     height: 40px; }
     .page-switcher-container.bottom .tab {
-      box-shadow: inset 0px -17px 8px -10px rgba(0, 0, 0, 0.2); }
+      box-shadow: inset 0px -17px 8px -10px var(--react-autoql-box-shadow-color, rgba(0, 0, 0, 0.15)); }
 
 /* Individual Tabs */
 .page-switcher-container .tab {
@@ -3745,7 +3807,7 @@ ul {
 .page-switcher-container .tab.active {
   background: var(--react-autoql-background-color-primary);
   color: var(--react-autoql-accent-color);
-  box-shadow: -2px 0px 8px 2px rgba(0, 0, 0, 0.2);
+  box-shadow: -2px 0px 8px 2px var(--react-autoql-box-shadow-color, rgba(0, 0, 0, 0.15));
   font-weight: bold;
   position: relative;
   z-index: 2; }
@@ -3813,7 +3875,7 @@ ul {
   height: 100%;
   overflow: hidden;
   border-radius: 4px;
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13); }
+  box-shadow: 0 1px 3px 0 var(--react-autoql-box-shadow-color, rgba(0, 0, 0, 0.15)); }
 
 .react-autoql-dashboard-tile-inner-div {
   height: 100%;
@@ -3922,25 +3984,21 @@ ul {
 .react-autoql-dashboard-tile-inner-div.split .dashboard-tile-response-wrapper {
   padding: 0; }
 
-.react-autoql-dashboard-tile-inner-div
-.dashboard-tile-response-wrapper.editing .dashboard-tile-toolbars-container {
+.react-autoql-dashboard-tile-inner-div .dashboard-tile-response-wrapper.editing .dashboard-tile-toolbars-container {
   padding: 13px; }
 
-.react-autoql-dashboard-tile-inner-div
-.dashboard-tile-response-wrapper.editing .layout-splitter {
+.react-autoql-dashboard-tile-inner-div .dashboard-tile-response-wrapper.editing .layout-splitter {
   display: block;
   pointer-events: unset;
   height: 4px !important;
   color: var(--react-autoql-text-color-primary);
   opacity: 0.8; }
 
-.react-autoql-dashboard-tile-inner-div
-.dashboard-tile-response-wrapper.editing .react-autoql-toolbar-btn.active {
+.react-autoql-dashboard-tile-inner-div .dashboard-tile-response-wrapper.editing .react-autoql-toolbar-btn.active {
   color: var(--react-autoql-accent-color); }
 
 /* Safetynet styles specific to dashboard tiles */
-.react-autoql-dashboard-tile-inner-div
-.dashboard-tile-response-wrapper.editing {
+.react-autoql-dashboard-tile-inner-div .dashboard-tile-response-wrapper.editing {
   height: 100%;
   width: 100%;
   overflow-x: auto;
@@ -3949,10 +4007,8 @@ ul {
 .react-autoql-dashboard-tile-inner-div .react-autoql-query-validation-query {
   white-space: nowrap; }
 
-.dashboard-tile-response-wrapper.small
-.react-autoql-query-validation-description,
-.dashboard-tile-response-wrapper.small
-.react-autoql-query-validation-execute-btn {
+.dashboard-tile-response-wrapper.small .react-autoql-query-validation-description,
+.dashboard-tile-response-wrapper.small .react-autoql-query-validation-execute-btn {
   display: none; }
 
 .dashboard-tile-response-wrapper .dashboard-tile-response-container {
@@ -3964,7 +4020,7 @@ ul {
   .dashboard-tile-response-wrapper .dashboard-tile-response-container .react-autoql-table-container {
     padding: 15px 20px 0px 20px; }
   .dashboard-tile-response-wrapper .dashboard-tile-response-container .react-autoql-response-content-container {
-    padding: 7px;
+    padding: 7px 12px 20px 18px;
     align-items: center; }
 
 .dashboard-tile-title-container {
@@ -4141,8 +4197,7 @@ ul {
   padding: 0;
   margin: 0; }
 
-.dashboard-tile-input-container
-.react-autosuggest__suggestions-container--open {
+.dashboard-tile-input-container .react-autosuggest__suggestions-container--open {
   background-color: var(--react-autoql-background-color-secondary);
   border: 1px solid var(--react-autoql-border-color);
   color: var(--react-autoql-text-color-primary); }
@@ -4162,8 +4217,7 @@ ul {
   vertical-align: middle;
   height: 23px; }
 
-.dashboard-tile-input-container
-.react-autosuggest__suggestions-container--open {
+.dashboard-tile-input-container .react-autosuggest__suggestions-container--open {
   position: absolute;
   bottom: unset;
   padding-top: 5px;
@@ -4176,7 +4230,7 @@ ul {
   font-weight: normal;
   z-index: 2;
   overflow: hidden;
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
+  box-shadow: 0 1px 3px 0 var(--react-autoql-box-shadow-color, rgba(0, 0, 0, 0.15));
   text-align: left;
   width: 100%;
   top: 35px;