react-autoql 3.4.6 → 3.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/.autoql.esm.css.icloud +0 -0
  2. package/dist/autoql.esm 2.css +4247 -0
  3. package/dist/autoql.esm.css +2346 -2198
  4. package/dist/autoql.esm.js +1040 -549
  5. package/package.json +7 -1
package/dist/autoql.esm.css CHANGED
@@ -1,358 +1,99 @@
1
- .react-autoql-response-content-container:not(.html-content) {
1
+ .react-autoql-bar-container {
2
2
  position: relative;
3
3
  display: flex;
4
- flex-direction: column;
5
- justify-content: center;
6
- align-items: center;
7
- background-color: inherit;
8
- font-size: 14px;
9
- height: 100%;
10
- width: 100%;
11
- overflow: hidden;
12
- color: var(--react-autoql-text-color-primary); }
13
-
14
- .react-autoql-response-content-container.html-content {
15
- position: relative;
16
- background-color: inherit;
17
- text-align: left;
18
- font-size: 14px;
19
- height: 100%;
20
- width: 100%;
21
- overflow: hidden;
22
- color: var(--react-autoql-text-color-primary); }
23
- .react-autoql-response-content-container.html-content table th {
24
- border-bottom: 2px solid var(--react-autoql-border-color); }
25
- .react-autoql-response-content-container.html-content table tr:not(:last-child) {
26
- border-bottom: 1px solid var(--react-autoql-border-color); }
27
- .react-autoql-response-content-container.html-content table td:not(:last-child) {
28
- border-right: 1px solid var(--react-autoql-border-color); }
29
- .react-autoql-response-content-container.html-content table th,
30
- .react-autoql-response-content-container.html-content table td {
31
- padding: 5px 10px; }
32
- .react-autoql-response-content-container.html-content * {
33
- font-size: inherit; }
34
- .react-autoql-response-content-container.html-content sup,
35
- .react-autoql-response-content-container.html-content sub {
36
- font-size: 10px; }
37
- .react-autoql-response-content-container.html-content > *:first-child {
38
- margin-top: 0 !important; }
39
- .react-autoql-response-content-container.html-content > *:last-child {
40
- margin-bottom: 0 !important; }
41
- .react-autoql-response-content-container.html-content caption {
42
- display: table-caption;
43
- text-align: -webkit-center;
44
- padding-top: unset;
45
- padding-bottom: unset;
46
- color: unset;
47
- text-align: unset;
48
- caption-side: unset; }
49
-
50
- .react-autoql-response-content-container.table {
51
- max-height: 100vh !important;
52
- overflow-y: scroll;
53
- scrollbar-width: none; }
54
-
55
- .react-autoql-response-content-container.table::-webkit-scrollbar {
56
- width: 0;
57
- height: 0; }
4
+ flex-direction: row; }
58
5
 
59
- .react-autoql-suggestion-btn {
60
- padding: 6px 14px;
61
- background: transparent;
6
+ .react-autoql-chatbar-input {
7
+ padding: 10px;
8
+ padding-left: 20px;
9
+ margin: 10px;
10
+ height: 42px;
11
+ width: calc(100% - 20px);
12
+ white-space: nowrap;
13
+ box-sizing: border-box;
14
+ border-radius: 24px;
15
+ font-size: 16px;
62
16
  font-family: inherit;
63
- font-size: 12px;
64
- margin-bottom: 5px;
17
+ letter-spacing: 0.04em;
65
18
  outline: none !important;
66
- cursor: pointer;
67
- letter-spacing: 0.05em;
68
- transition: all 0.1s ease;
69
- border: 1px solid rgba(0, 0, 0, 0.15);
70
- border-radius: 5px;
71
- color: inherit; }
19
+ width: calc(100% - 20px);
20
+ font-family: inherit;
21
+ /* Default styles outside of data messenger */
22
+ border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
23
+ background: var(--react-autoql-background-color-primary);
24
+ color: #5d5d5d; }
72
25
 
73
- .react-autoql-suggestion-btn:hover {
74
- border-color: transparent;
75
- color: white;
76
- background: var(--react-autoql-accent-color); }
26
+ .react-autoql-chatbar-input.left-padding {
27
+ padding-left: 54px; }
77
28
 
78
- .react-autoql-help-link-btn {
79
- padding: 6px 14px;
80
- background: transparent;
81
- border-radius: 5px;
82
- font-family: inherit;
83
- font-size: 12px;
84
- margin-top: 5px;
85
- outline: none !important;
86
- cursor: pointer;
87
- letter-spacing: 0.05em;
88
- transition: all 0.1s ease;
89
- border-color: #e2e2e26e;
90
- color: inherit; }
29
+ .react-autoql-chatbar-input:disabled {
30
+ background: rgba(0, 0, 0, 0.03); }
91
31
 
92
- .react-autoql-help-link-btn:hover {
93
- opacity: 0.7; }
32
+ .react-autoql-chatbar-input:not(:disabled):hover {
33
+ box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1); }
94
34
 
95
- .react-autoql-help-link-icon {
96
- width: 15px;
97
- height: 15px;
98
- margin-bottom: -3px;
99
- margin-right: 3px; }
35
+ .react-autoql-chatbar-input::-moz-placeholder {
36
+ /* Default color outside of data messenger */
37
+ color: #999 !important; }
100
38
 
101
- .qanda-positive-feedback-checkmark.react-autoql-icon svg {
102
- color: var(--react-autoql-success-color); }
39
+ .react-autoql-chatbar-input:-ms-input-placeholder {
40
+ /* Default color outside of data messenger */
41
+ color: #999 !important; }
103
42
 
104
- .react-autoql-suggestion-message {
105
- height: 100%;
106
- width: 100%;
107
- word-break: break-word; }
43
+ .react-autoql-chatbar-input::placeholder {
44
+ /* Default color outside of data messenger */
45
+ color: #999 !important; }
108
46
 
109
- .react-autoql-suggestions-select {
47
+ /* autosuggest */
48
+ .react-autoql-bar-container .react-autosuggest__container,
49
+ .react-autoql-chatbar-input-container {
110
50
  position: relative;
111
- display: inline-block;
112
- height: 30px;
113
- background: none;
114
- outline: none !important;
115
- border: 1px solid;
116
- font-family: inherit;
117
- letter-spacing: 0.05em;
118
- color: #28a8e0;
119
- cursor: pointer;
120
- font-size: inherit; }
121
-
122
- .no-columns-error-message {
123
- position: absolute;
124
- height: 100%;
125
- width: 100%;
126
- display: flex;
127
- justify-content: center;
128
- flex-direction: column;
129
- text-align: center;
130
- padding: 20px;
131
- font-size: 13px; }
132
- .no-columns-error-message .warning-icon {
133
- font-size: 22px;
134
- display: block;
135
- margin-bottom: -13px;
136
- text-align: center; }
137
- .no-columns-error-message .eye-icon {
138
- vertical-align: bottom;
139
- line-height: 18px; }
51
+ flex: 1; }
140
52
 
141
- /* query validation */
142
- .react-autoql-query-validation-selector-container {
143
- display: inline-block;
144
- position: relative; }
53
+ .react-autoql-bar-container .react-autosuggest__input--focused {
54
+ outline: none; }
145
55
 
146
- .react-autoql-select-popup-container.query-validation-select {
147
- padding: 5px 0;
148
- letter-spacing: 0.03em;
149
- font-family: var(--react-autoql-font-family), sans-serif; }
150
- .react-autoql-select-popup-container.query-validation-select .react-autoql-select-option {
151
- height: unset;
152
- font-size: 14px;
153
- line-height: 24px;
154
- padding: 0 15px; }
155
- .react-autoql-select-popup-container.query-validation-select .react-autoql-select-option:last-of-type {
156
- color: #d84830; }
56
+ .react-autoql-bar-container .react-autosuggest__input::-ms-clear {
57
+ display: none; }
157
58
 
158
- .react-autoql-query-validation-query {
159
- text-align: center; }
59
+ .react-autoql-bar-container .react-autosuggest__suggestions-container {
60
+ display: none; }
160
61
 
161
- .react-autoql-query-validation-execute-btn {
162
- height: 38px;
163
- background: none;
164
- border-radius: 4px;
165
- margin-top: 24px;
166
- width: 100%;
167
- color: inherit;
168
- cursor: pointer;
169
- outline: none !important;
170
- border-color: #e2e2e26e;
171
- transition: all 0.2s ease; }
62
+ .react-autoql-bar-container .react-autosuggest__suggestions-container--open {
63
+ position: absolute;
64
+ top: 45px;
65
+ bottom: unset;
66
+ margin: 10px;
67
+ padding-top: 5px;
68
+ padding-bottom: 5px;
69
+ display: block;
70
+ width: calc(100% - 20px);
71
+ height: unset;
72
+ border-radius: 24px;
73
+ font-family: inherit;
74
+ font-size: 15px;
75
+ font-weight: normal;
76
+ z-index: 2;
77
+ overflow: hidden;
78
+ box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1);
79
+ /* Default styles outside of data messenger */
80
+ background-color: white;
81
+ color: #5d5d5d; }
172
82
 
173
- .react-autoql-query-validation-execute-btn:hover {
174
- border-color: #28a8e0; }
83
+ .react-autoql-bar-container.autosuggest-top
84
+ .react-autosuggest__suggestions-container--open {
85
+ top: unset;
86
+ bottom: 45px; }
175
87
 
176
- .react-autoql-execute-query-icon {
177
- font-size: 16px;
178
- vertical-align: middle !important;
179
- padding-right: 3px !important; }
180
- .react-autoql-execute-query-icon span.react-autoql-icon svg {
181
- height: 19px;
182
- width: 19px;
183
- margin-top: 3px;
184
- margin-right: 4px;
185
- vertical-align: top;
186
- fill: var(--react-autoql-accent-color); }
88
+ .react-autoql-bar-container.autosuggest-bottom
89
+ .react-autosuggest__suggestions-container--open {
90
+ top: 45px;
91
+ bottom: unset; }
187
92
 
188
- .react-autoql-query-validation-select {
189
- position: relative;
190
- display: inline-block;
191
- height: 2em;
192
- background: none;
193
- outline: none !important;
194
- border: none;
195
- letter-spacing: 0.05em;
196
- font-family: inherit;
197
- font-size: inherit;
93
+ .react-autoql-bar-container .react-autosuggest__suggestions-list {
198
94
  margin: 0;
199
95
  padding: 0;
200
- border-radius: 0;
201
- border-bottom: 1px dashed;
202
- color: var(--react-autoql-accent-color); }
203
-
204
- .react-autoql-query-validation-delete-button {
205
- position: relative;
206
- cursor: pointer;
207
- margin-bottom: -2px; }
208
-
209
- .react-autoql-chart-tooltip {
210
- font-family: var(--react-autoql-font-family), sans-serif;
211
- letter-spacing: 0.04em;
212
- line-height: 22px;
213
- font-size: 13px;
214
- padding: 7px 15px;
215
- transition: all 0.2s ease !important;
216
- text-align: left !important;
217
- opacity: 1 !important;
218
- z-index: 99999 !important;
219
- /* necessary to show up on top of rc drawer */ }
220
-
221
- .single-value-response {
222
- color: inherit;
223
- cursor: unset; }
224
- .single-value-response:hover {
225
- color: inherit; }
226
-
227
- .single-value-response.with-drilldown:hover {
228
- color: inherit;
229
- text-decoration: underline;
230
- font-weight: 600;
231
- cursor: pointer; }
232
-
233
- .react-autoql-query-validation-container {
234
- width: 100%; }
235
-
236
- .react-autoql-query-validation-description {
237
- margin-bottom: 14px; }
238
-
239
- .context-menu {
240
- background: var(--react-autoql-background-color-primary);
241
- /* height: 100px; */
242
- width: 150px;
243
- padding: 10px 0; }
244
-
245
- .context-menu-list {
246
- list-style-type: none;
247
- width: 100%;
248
- margin: 0;
249
- padding: 0; }
250
-
251
- .context-menu-list li {
252
- color: var(--react-autoql-text-color-primary);
253
- width: 100%;
254
- height: 35px;
255
- line-height: 35px;
256
- padding: 0 20px;
257
- cursor: pointer; }
258
-
259
- .context-menu-list li:hover {
260
- background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.05)); }
261
-
262
- .react-autoql-bar-container {
263
- position: relative;
264
- display: flex;
265
- flex-direction: row; }
266
-
267
- .react-autoql-chatbar-input {
268
- padding: 10px;
269
- padding-left: 20px;
270
- margin: 10px;
271
- height: 42px;
272
- box-sizing: border-box;
273
- border-radius: 24px;
274
- font-size: 16px;
275
- font-family: inherit;
276
- letter-spacing: 0.04em;
277
- outline: none !important;
278
- width: calc(100% - 20px);
279
- font-family: inherit;
280
- /* Default styles outside of data messenger */
281
- border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
282
- background: var(--react-autoql-background-color-primary);
283
- color: #5d5d5d; }
284
-
285
- .react-autoql-chatbar-input.left-padding {
286
- padding-left: 54px; }
287
-
288
- .react-autoql-chatbar-input:disabled {
289
- background: rgba(0, 0, 0, 0.03); }
290
-
291
- .react-autoql-chatbar-input:not(:disabled):hover {
292
- box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1); }
293
-
294
- .react-autoql-chatbar-input::-moz-placeholder {
295
- /* Default color outside of data messenger */
296
- color: #999 !important; }
297
-
298
- .react-autoql-chatbar-input:-ms-input-placeholder {
299
- /* Default color outside of data messenger */
300
- color: #999 !important; }
301
-
302
- .react-autoql-chatbar-input::placeholder {
303
- /* Default color outside of data messenger */
304
- color: #999 !important; }
305
-
306
- /* autosuggest */
307
- .react-autoql-bar-container .react-autosuggest__container,
308
- .react-autoql-chatbar-input-container {
309
- position: relative;
310
- flex: 1; }
311
-
312
- .react-autoql-bar-container .react-autosuggest__input--focused {
313
- outline: none; }
314
-
315
- .react-autoql-bar-container .react-autosuggest__input::-ms-clear {
316
- display: none; }
317
-
318
- .react-autoql-bar-container .react-autosuggest__suggestions-container {
319
- display: none; }
320
-
321
- .react-autoql-bar-container .react-autosuggest__suggestions-container--open {
322
- position: absolute;
323
- top: 45px;
324
- bottom: unset;
325
- margin: 10px;
326
- padding-top: 5px;
327
- padding-bottom: 5px;
328
- display: block;
329
- width: calc(100% - 20px);
330
- height: unset;
331
- border-radius: 24px;
332
- font-family: inherit;
333
- font-size: 15px;
334
- font-weight: normal;
335
- z-index: 2;
336
- overflow: hidden;
337
- box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1);
338
- /* Default styles outside of data messenger */
339
- background-color: white;
340
- color: #5d5d5d; }
341
-
342
- .react-autoql-bar-container.autosuggest-top
343
- .react-autosuggest__suggestions-container--open {
344
- top: unset;
345
- bottom: 45px; }
346
-
347
- .react-autoql-bar-container.autosuggest-bottom
348
- .react-autosuggest__suggestions-container--open {
349
- top: 45px;
350
- bottom: unset; }
351
-
352
- .react-autoql-bar-container .react-autosuggest__suggestions-list {
353
- margin: 0;
354
- padding: 0;
355
- list-style-type: none; }
96
+ list-style-type: none; }
356
97
 
357
98
  /* Autocomplete styles */
358
99
  .react-autoql-bar-container .react-autosuggest__suggestions-container--open {
@@ -403,305 +144,56 @@
403
144
  left: 30px;
404
145
  top: 15px; }
405
146
 
406
- .react-autoql-icon {
407
- position: relative;
408
- opacity: 1; }
409
- .react-autoql-icon.warning {
410
- color: var(--react-autoql-warning-color) !important; }
411
- .react-autoql-icon.danger {
412
- color: var(--react-autoql-danger-color) !important; }
147
+ .react-autoql-drawer {
148
+ font-family: var(--react-autoql-font-family), sans-serif;
149
+ line-height: 22px; }
413
150
 
414
- span.react-autoql-icon {
415
- vertical-align: unset;
416
- text-align: left;
417
- margin: 0;
418
- padding: 0;
419
- float: none !important;
420
- color: inherit; }
421
- span.react-autoql-icon svg {
422
- float: none !important;
423
- color: inherit;
424
- vertical-align: unset;
425
- text-align: left;
426
- margin: 0;
427
- padding: 0;
428
- opacity: 1;
429
- height: 1em;
430
- margin-bottom: -0.1em; }
151
+ .react-autoql-drawer.disable-selection {
152
+ -webkit-user-select: none;
153
+ -moz-user-select: none;
154
+ -ms-user-select: none;
155
+ user-select: none; }
431
156
 
432
- .slack-logo {
433
- display: inline-block;
157
+ .react-autoql-drawer .react-autoql-drawer-content-container {
158
+ width: 100%;
434
159
  height: 100%;
435
- margin-bottom: 3px; }
436
- .slack-logo img {
437
- vertical-align: middle;
438
- height: 1em;
439
- width: 1em; }
440
-
441
- .react-autoql-badge {
442
- position: absolute;
443
- background: var(--react-autoql-warning-color);
444
- border: 1px solid var(--react-autoql-background-color-primary);
445
- width: 0.5em;
446
- height: 0.5em;
447
- top: -0.1em;
448
- right: -0.25em;
449
- border-radius: 50%;
450
- box-sizing: content-box; }
160
+ display: flex;
161
+ background: var(--react-autoql-background-color-secondary);
162
+ overflow: hidden;
163
+ border-radius: 4px;
164
+ flex-direction: column;
165
+ justify-content: stretch; }
451
166
 
452
- .loading-container-centered {
453
- height: 100%;
167
+ .react-autoql-drawer .chat-header-container {
168
+ display: flex;
169
+ justify-content: space-between;
454
170
  width: 100%;
171
+ height: 60px;
172
+ background: var(--react-autoql-accent-color);
173
+ box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.1);
174
+ flex-grow: 0;
175
+ flex-shrink: 0;
176
+ z-index: 1; }
177
+
178
+ .react-autoql-drawer .react-autoql-header-right-container {
455
179
  display: flex;
456
- flex-direction: column;
457
- justify-content: center;
458
- align-items: center; }
180
+ justify-content: right;
181
+ width: 100px; }
459
182
 
460
- .response-loading {
461
- display: inline-block;
183
+ .react-autoql-drawer .react-autoql-header-center-container {
462
184
  position: relative;
463
- width: 64px;
464
- height: 64px; }
465
-
466
- .response-loading div {
467
- position: absolute;
468
- top: 27px;
469
- width: 11px;
470
- height: 11px;
471
- border-radius: 50%;
472
- background: #e2e2e2;
473
- -webkit-animation-timing-function: cubic-bezier(0, 1, 1, 0);
474
- animation-timing-function: cubic-bezier(0, 1, 1, 0); }
185
+ color: #fff;
186
+ line-height: 60px;
187
+ font-size: 18px;
188
+ letter-spacing: 0.05em;
189
+ font-weight: 600;
190
+ overflow: hidden;
191
+ text-overflow: ellipsis;
192
+ white-space: nowrap; }
475
193
 
476
- .response-loading div:nth-child(1) {
477
- left: 6px;
478
- -webkit-animation: response-loading1 0.6s infinite;
479
- animation: response-loading1 0.6s infinite; }
480
-
481
- .response-loading div:nth-child(2) {
482
- left: 6px;
483
- -webkit-animation: response-loading2 0.6s infinite;
484
- animation: response-loading2 0.6s infinite; }
485
-
486
- .response-loading div:nth-child(3) {
487
- left: 26px;
488
- -webkit-animation: response-loading2 0.6s infinite;
489
- animation: response-loading2 0.6s infinite; }
490
-
491
- .response-loading div:nth-child(4) {
492
- left: 45px;
493
- -webkit-animation: response-loading3 0.6s infinite;
494
- animation: response-loading3 0.6s infinite; }
495
-
496
- .chat-voice-record-button {
497
- width: 40px;
498
- height: 40px;
499
- border-radius: 24px;
500
- margin: 10px;
501
- margin-left: 0;
502
- font-size: 18px;
503
- line-height: 24px;
504
- outline: none !important;
505
- position: relative;
506
- cursor: pointer;
507
- overflow: hidden;
508
- background: var(--react-autoql-accent-color);
509
- color: white;
510
- border: none;
511
- flex-shrink: 0;
512
- flex-grow: 0; }
513
-
514
- .chat-voice-record-button:hover {
515
- box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.15); }
516
-
517
- .chat-voice-record-button.listening {
518
- background: #ff471a; }
519
-
520
- .chat-voice-record-icon {
521
- vertical-align: top; }
522
-
523
- .react-autoql-tooltip {
524
- font-family: inherit;
525
- letter-spacing: 0.04em;
526
- padding: 7px 15px;
527
- opacity: 1 !important;
528
- z-index: 99999 !important; }
529
-
530
- @-webkit-keyframes slide {
531
- 0% {
532
- transform: translateX(-100%); }
533
- 100% {
534
- transform: translateX(100%); } }
535
-
536
- @keyframes slide {
537
- 0% {
538
- transform: translateX(-100%); }
539
- 100% {
540
- transform: translateX(100%); } }
541
-
542
- @-webkit-keyframes move {
543
- 0% {
544
- left: 0;
545
- opacity: 0; }
546
- 5% {
547
- opacity: 0; }
548
- 48% {
549
- opacity: 0.2; }
550
- 80% {
551
- opacity: 0; }
552
- 100% {
553
- left: 82%; } }
554
-
555
- @keyframes move {
556
- 0% {
557
- left: 0;
558
- opacity: 0; }
559
- 5% {
560
- opacity: 0; }
561
- 48% {
562
- opacity: 0.2; }
563
- 80% {
564
- opacity: 0; }
565
- 100% {
566
- left: 82%; } }
567
-
568
- .react-autoql-dashboard-container {
569
- background: var(--react-autoql-background-color-secondary);
570
- height: 100%;
571
- width: 100%;
572
- overflow: hidden; }
573
-
574
- .react-autoql-dashboard-container.edit-mode {
575
- padding-bottom: 200px; }
576
-
577
- .dashboard-drilldown-modal .ReactModal__Content {
578
- top: unset !important;
579
- margin-top: 20px !important;
580
- max-height: 93vh !important; }
581
-
582
- .dashboard-drilldown-modal .react-autoql-modal-body {
583
- padding: 0; }
584
-
585
- .dashboard-drilldown-modal .react-autoql-table {
586
- opacity: 0.9;
587
- font-size: 11px; }
588
-
589
- .dashboard-drilldown-modal .splitter-layout {
590
- height: calc(100% - 55px); }
591
-
592
- .dashboard-drilldown-modal .react-autoql-dashboard-drilldown-original {
593
- padding: 20px;
594
- padding-bottom: 10px; }
595
-
596
- .dashboard-drilldown-modal .drilldown-hide-chart-btn {
597
- text-align: right;
598
- width: 100%;
599
- padding-right: 20px; }
600
- .dashboard-drilldown-modal .drilldown-hide-chart-btn.bottom {
601
- position: absolute;
602
- bottom: 5px;
603
- width: 100px;
604
- right: 0; }
605
- .dashboard-drilldown-modal .drilldown-hide-chart-btn.top {
606
- padding-top: 10px;
607
- margin-bottom: -8px; }
608
-
609
- .dashboard-drilldown-modal .react-autoql-dashboard-drilldown-table {
610
- padding: 20px;
611
- padding-top: 10px;
612
- overflow: hidden;
613
- height: 100%; }
614
-
615
- .empty-dashboard-message-container {
616
- font-family: var(--react-autoql-font-family);
617
- color: var(--react-autoql-text-color-primary);
618
- letter-spacing: 0.02em;
619
- text-align: center;
620
- padding: 100px;
621
- height: 100%;
622
- width: 100%; }
623
-
624
- .empty-dashboard-new-tile-btn {
625
- color: var(--react-autoql-accent-color);
626
- font-weight: bold;
627
- cursor: pointer; }
628
-
629
- #condition-lock-snackbar-success {
630
- visibility: hidden;
631
- min-width: 200px;
632
- line-height: 1 !important;
633
- font-size: 14px !important;
634
- background-color: var(--react-autoql-background-color-secondary);
635
- color: var(--react-autoql-success-color);
636
- text-align: center;
637
- border-radius: 4px;
638
- padding: 6px;
639
- position: fixed;
640
- display: block;
641
- z-index: 999999999;
642
- transform: translateX(-10%);
643
- box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.4); }
644
-
645
- .autoql-condition-locking-menu-container
646
- .react-autosuggest__suggestions-container--open {
647
- transform: translateX(8%);
648
- width: 90% !important; }
649
-
650
- #condition-lock-snackbar-success.show {
651
- visibility: visible;
652
- -webkit-animation: snackbarFadein 0.5s, snackbarFadeout 0.5s 2.5s;
653
- animation: snackbarFadein 0.5s, snackbarFadeout 0.5s 2.5s; }
654
-
655
- .react-autoql-drawer {
656
- font-family: var(--react-autoql-font-family), sans-serif;
657
- line-height: 22px; }
658
-
659
- .react-autoql-drawer.disable-selection {
660
- -webkit-user-select: none;
661
- -moz-user-select: none;
662
- -ms-user-select: none;
663
- user-select: none; }
664
-
665
- .react-autoql-drawer .react-autoql-drawer-content-container {
666
- width: 100%;
667
- height: 100%;
668
- display: flex;
669
- background: var(--react-autoql-background-color-secondary);
670
- overflow: hidden;
671
- border-radius: 4px;
672
- flex-direction: column;
673
- justify-content: stretch; }
674
-
675
- .react-autoql-drawer .chat-header-container {
676
- display: flex;
677
- justify-content: space-between;
678
- width: 100%;
679
- height: 60px;
680
- background: var(--react-autoql-accent-color);
681
- box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.1);
682
- flex-grow: 0;
683
- flex-shrink: 0;
684
- z-index: 1; }
685
-
686
- .react-autoql-drawer .react-autoql-header-right-container {
687
- display: flex;
688
- justify-content: right;
689
- width: 100px; }
690
-
691
- .react-autoql-drawer .react-autoql-header-center-container {
692
- position: relative;
693
- color: #fff;
694
- line-height: 60px;
695
- font-size: 18px;
696
- letter-spacing: 0.05em;
697
- font-weight: 600;
698
- overflow: hidden;
699
- text-overflow: ellipsis;
700
- white-space: nowrap; }
701
-
702
- .react-autoql-drawer .header-title {
703
- -webkit-animation: fadeIn 0.3s;
704
- animation: fadeIn 0.3s; }
194
+ .react-autoql-drawer .header-title {
195
+ -webkit-animation: fadeIn 0.3s;
196
+ animation: fadeIn 0.3s; }
705
197
 
706
198
  .react-autoql-drawer .react-autoql-header-left-container {
707
199
  width: 100px; }
@@ -738,8 +230,7 @@ span.react-autoql-icon {
738
230
 
739
231
  .react-autoql-drawer .chat-bar-container {
740
232
  position: relative;
741
- padding: 10px;
742
- padding-top: 30px; }
233
+ padding: 10px; }
743
234
 
744
235
  .react-autoql-drawer .chat-drawer-chat-bar {
745
236
  flex-shrink: 0;
@@ -927,6 +418,7 @@ span.react-autoql-icon {
927
418
  .react-autoql-drawer-tooltip {
928
419
  font-family: var(--react-autoql-font-family), sans-serif;
929
420
  letter-spacing: 0.04em;
421
+ line-height: 0.9em;
930
422
  padding: 7px 15px;
931
423
  transition: none;
932
424
  opacity: 1 !important;
@@ -947,7 +439,8 @@ span.react-autoql-icon {
947
439
 
948
440
  .react-autoql-condition-lock-menu {
949
441
  color: var(--react-autoql-text-color-primary);
950
- background: var(--react-autoql-background-color-primary); }
442
+ background: var(--react-autoql-background-color-primary);
443
+ min-height: 300px; }
951
444
 
952
445
  .react-tiny-popover-container {
953
446
  z-index: 9999;
@@ -1187,22 +680,6 @@ span.react-autoql-icon {
1187
680
  100% {
1188
681
  transform: translateY(0%); } }
1189
682
 
1190
- @-webkit-keyframes snackbarFadein {
1191
- from {
1192
- top: 30px;
1193
- opacity: 0; }
1194
- to {
1195
- top: 60px;
1196
- opacity: 1; } }
1197
-
1198
- @keyframes snackbarFadein {
1199
- from {
1200
- top: 30px;
1201
- opacity: 0; }
1202
- to {
1203
- top: 60px;
1204
- opacity: 1; } }
1205
-
1206
683
  @-webkit-keyframes snackbarFadeout {
1207
684
  from {
1208
685
  top: 60px;
@@ -1219,820 +696,586 @@ span.react-autoql-icon {
1219
696
  top: 30px;
1220
697
  opacity: 0; } }
1221
698
 
1222
- .react-autoql-step-container a {
1223
- color: var(--react-autoql-accent-color, #26a7df); }
699
+ .chat-voice-record-button {
700
+ width: 40px;
701
+ height: 40px;
702
+ border-radius: 24px;
703
+ margin: 10px;
704
+ margin-left: 0;
705
+ font-size: 18px;
706
+ line-height: 24px;
707
+ outline: none !important;
708
+ position: relative;
709
+ cursor: pointer;
710
+ overflow: hidden;
711
+ background: var(--react-autoql-accent-color);
712
+ color: white;
713
+ border: none;
714
+ flex-shrink: 0;
715
+ flex-grow: 0; }
1224
716
 
1225
- .frequency-date-select-container {
1226
- margin-top: 10px; }
717
+ .chat-voice-record-button:hover {
718
+ box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.15); }
1227
719
 
1228
- .notification-frequency-step {
1229
- display: flex; }
1230
- .notification-frequency-step .frequency-category-select {
1231
- position: relative;
1232
- padding-top: 9px; }
1233
- .notification-frequency-step .notification-frequency-select {
1234
- margin-left: 8px; }
1235
- .notification-frequency-step .frequency-repeat-checkbox .react-autoql-checkbox-label {
1236
- line-height: 33px; }
1237
- .notification-frequency-step .frequency-repeat-follow-text {
1238
- line-height: 32px;
1239
- vertical-align: top; }
1240
- .notification-frequency-step .frequency-settings-container {
1241
- flex: 0 1 400px; }
720
+ .chat-voice-record-button.listening {
721
+ background: #ff471a; }
1242
722
 
1243
- .schedule-builder-timezone-section {
1244
- margin: 10px 5px; }
1245
- .schedule-builder-timezone-section .react-autoql-timezone-select {
1246
- display: inline-block;
1247
- width: 300px; }
723
+ .chat-voice-record-icon {
724
+ vertical-align: top; }
1248
725
 
1249
- .notification-modal-content .react-autoql-step-content p {
1250
- margin-bottom: 0.5em;
1251
- margin-top: 0.5em;
1252
- padding-left: 8px; }
726
+ .react-autoql-tooltip {
727
+ font-family: inherit;
728
+ letter-spacing: 0.04em;
729
+ padding: 7px 15px;
730
+ opacity: 1 !important;
731
+ z-index: 99999 !important; }
1253
732
 
1254
- .notification-modal-content .step-btn-container {
1255
- text-align: right;
1256
- display: flex;
1257
- min-height: 50px; }
733
+ @-webkit-keyframes slide {
734
+ 0% {
735
+ transform: translateX(-100%); }
736
+ 100% {
737
+ transform: translateX(100%); } }
1258
738
 
1259
- .expression-valid-checkmark.react-autoql-icon svg {
1260
- color: var(--react-autoql-success-color); }
739
+ @keyframes slide {
740
+ 0% {
741
+ transform: translateX(-100%); }
742
+ 100% {
743
+ transform: translateX(100%); } }
1261
744
 
1262
- .expression-invalid-message-container {
1263
- max-width: 75%;
1264
- float: left;
1265
- text-align: left !important;
1266
- display: flex;
1267
- flex-direction: row;
1268
- align-items: left;
1269
- justify-content: left; }
745
+ @-webkit-keyframes move {
746
+ 0% {
747
+ left: 0;
748
+ opacity: 0; }
749
+ 5% {
750
+ opacity: 0; }
751
+ 48% {
752
+ opacity: 0.2; }
753
+ 80% {
754
+ opacity: 0; }
755
+ 100% {
756
+ left: 82%; } }
1270
757
 
1271
- .expression-invalid-message {
1272
- color: var(--react-autoql-danger-color);
1273
- display: 'inline-block'; }
758
+ @keyframes move {
759
+ 0% {
760
+ left: 0;
761
+ opacity: 0; }
762
+ 5% {
763
+ opacity: 0; }
764
+ 48% {
765
+ opacity: 0.2; }
766
+ 80% {
767
+ opacity: 0; }
768
+ 100% {
769
+ left: 82%; } }
1274
770
 
1275
- .notification-list-loading-container {
1276
- text-align: center;
1277
- padding-top: 100px;
1278
- color: var(--react-autoql-text-color-primary);
771
+ .react-autoql-dashboard-container {
772
+ background: var(--react-autoql-background-color-secondary);
1279
773
  height: 100%;
1280
- overflow: hidden;
1281
- background: var(--react-autoql-background-color-secondary); }
774
+ width: 100%;
775
+ overflow: hidden; }
1282
776
 
1283
- .empty-notifications-message {
1284
- color: var(--react-autoql-text-color-primary);
1285
- text-align: center;
1286
- margin-top: 75px; }
1287
- .empty-notifications-message div {
1288
- opacity: 0.6; }
1289
- .empty-notifications-message .empty-notifications-title {
1290
- font-size: 16px;
1291
- font-weight: bold;
1292
- margin-bottom: 5px; }
1293
- .empty-notifications-message .empty-notifications-img {
1294
- width: 250px;
1295
- height: 250px; }
777
+ .react-autoql-dashboard-container.edit-mode {
778
+ padding-bottom: 200px; }
1296
779
 
1297
- .react-autoql-notification-list-container {
1298
- height: 100%;
1299
- padding: 20px;
1300
- overflow-y: auto;
1301
- background: var(--react-autoql-background-color-secondary); }
780
+ .dashboard-drilldown-modal .ReactModal__Content {
781
+ top: unset !important;
782
+ margin-top: 20px !important;
783
+ max-height: 93vh !important; }
1302
784
 
1303
- .react-autoql-notification-dismiss-all {
1304
- text-align: right;
1305
- margin-bottom: 12px;
1306
- padding-right: 10px;
1307
- color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.4));
1308
- transition: color 0.1s ease; }
1309
- .react-autoql-notification-dismiss-all span {
1310
- opacity: 0.8;
1311
- cursor: pointer; }
1312
- .react-autoql-notification-dismiss-all span:hover {
1313
- opacity: 1; }
785
+ .dashboard-drilldown-modal .react-autoql-modal-body {
786
+ padding: 0; }
1314
787
 
1315
- .react-autoql-notification-display-name-input {
1316
- width: 100%; }
788
+ .dashboard-drilldown-modal .react-autoql-table {
789
+ opacity: 0.9;
790
+ font-size: 11px; }
1317
791
 
1318
- .react-autoql-notification-message-input {
1319
- width: 100%; }
792
+ .dashboard-drilldown-modal .splitter-layout {
793
+ height: calc(100% - 55px); }
1320
794
 
1321
- .react-autoql-notification-list-item:nth-of-type(0) {
1322
- -webkit-animation-delay: 0s;
1323
- animation-delay: 0s; }
795
+ .dashboard-drilldown-modal .react-autoql-dashboard-drilldown-original {
796
+ padding: 20px;
797
+ padding-bottom: 10px; }
1324
798
 
1325
- .react-autoql-notification-list-item:nth-of-type(1) {
1326
- -webkit-animation-delay: 0.1s;
1327
- animation-delay: 0.1s; }
799
+ .dashboard-drilldown-modal .drilldown-hide-chart-btn {
800
+ text-align: right;
801
+ width: 100%;
802
+ padding-right: 20px; }
803
+ .dashboard-drilldown-modal .drilldown-hide-chart-btn.bottom {
804
+ position: absolute;
805
+ bottom: 5px;
806
+ width: 100px;
807
+ right: 0; }
808
+ .dashboard-drilldown-modal .drilldown-hide-chart-btn.top {
809
+ padding-top: 10px;
810
+ margin-bottom: -8px; }
1328
811
 
1329
- .react-autoql-notification-list-item:nth-of-type(2) {
1330
- -webkit-animation-delay: 0.2s;
1331
- animation-delay: 0.2s; }
812
+ .dashboard-drilldown-modal .react-autoql-dashboard-drilldown-table {
813
+ padding: 20px;
814
+ padding-top: 10px;
815
+ overflow: hidden;
816
+ height: 100%; }
1332
817
 
1333
- .react-autoql-notification-list-item:nth-of-type(3) {
1334
- -webkit-animation-delay: 0.3s;
1335
- animation-delay: 0.3s; }
818
+ .empty-dashboard-message-container {
819
+ font-family: var(--react-autoql-font-family);
820
+ color: var(--react-autoql-text-color-primary);
821
+ letter-spacing: 0.02em;
822
+ text-align: center;
823
+ padding: 100px;
824
+ height: 100%;
825
+ width: 100%; }
1336
826
 
1337
- .react-autoql-notification-list-item:nth-of-type(4) {
1338
- -webkit-animation-delay: 0.4s;
1339
- animation-delay: 0.4s; }
827
+ .empty-dashboard-new-tile-btn {
828
+ color: var(--react-autoql-accent-color);
829
+ font-weight: bold;
830
+ cursor: pointer; }
1340
831
 
1341
- .react-autoql-notification-list-item:nth-of-type(5) {
1342
- -webkit-animation-delay: 0.5s;
1343
- animation-delay: 0.5s; }
832
+ .loading-container-centered {
833
+ height: 100%;
834
+ width: 100%;
835
+ display: flex;
836
+ flex-direction: column;
837
+ justify-content: center;
838
+ align-items: center; }
1344
839
 
1345
- .react-autoql-notification-list-item:nth-of-type(6) {
1346
- -webkit-animation-delay: 0.6s;
1347
- animation-delay: 0.6s; }
840
+ .response-loading {
841
+ display: inline-block;
842
+ position: relative;
843
+ width: 64px;
844
+ height: 64px; }
1348
845
 
1349
- .react-autoql-notification-list-item:nth-of-type(7) {
1350
- -webkit-animation-delay: 0.7s;
1351
- animation-delay: 0.7s; }
846
+ .response-loading div {
847
+ position: absolute;
848
+ top: 27px;
849
+ width: 11px;
850
+ height: 11px;
851
+ border-radius: 50%;
852
+ background: #e2e2e2;
853
+ -webkit-animation-timing-function: cubic-bezier(0, 1, 1, 0);
854
+ animation-timing-function: cubic-bezier(0, 1, 1, 0); }
1352
855
 
1353
- .react-autoql-notification-list-item:nth-of-type(8) {
1354
- -webkit-animation-delay: 0.8s;
1355
- animation-delay: 0.8s; }
856
+ .response-loading div:nth-child(1) {
857
+ left: 6px;
858
+ -webkit-animation: response-loading1 0.6s infinite;
859
+ animation: response-loading1 0.6s infinite; }
1356
860
 
1357
- .react-autoql-notification-list-item:nth-of-type(9) {
1358
- -webkit-animation-delay: 0.9s;
1359
- animation-delay: 0.9s; }
861
+ .response-loading div:nth-child(2) {
862
+ left: 6px;
863
+ -webkit-animation: response-loading2 0.6s infinite;
864
+ animation: response-loading2 0.6s infinite; }
1360
865
 
1361
- .react-autoql-notification-list-item:nth-of-type(10) {
1362
- -webkit-animation-delay: 1s;
1363
- animation-delay: 1s; }
866
+ .response-loading div:nth-child(3) {
867
+ left: 26px;
868
+ -webkit-animation: response-loading2 0.6s infinite;
869
+ animation: response-loading2 0.6s infinite; }
1364
870
 
1365
- @-webkit-keyframes slideIn {
1366
- 0% {
1367
- opacity: 0;
1368
- top: 500px; }
1369
- 100% {
1370
- opacity: 1;
1371
- top: 0; } }
871
+ .response-loading div:nth-child(4) {
872
+ left: 45px;
873
+ -webkit-animation: response-loading3 0.6s infinite;
874
+ animation: response-loading3 0.6s infinite; }
1372
875
 
1373
- .react-autoql-notifications-button-container {
876
+ .react-autoql-icon {
1374
877
  position: relative;
1375
- display: inline-block;
1376
- font-size: inherit;
1377
- line-height: 1em;
1378
- width: 1em; }
1379
- .react-autoql-notifications-button-container .react-autoql-notifications-button {
1380
- font-size: 1em;
1381
- line-height: 0;
1382
- vertical-align: bottom; }
1383
- .react-autoql-notifications-button-container .react-autoql-notifications-badge {
1384
- position: absolute;
1385
- border: 2px solid #fff;
1386
- background: #f5222d;
1387
- border-radius: 6.3em;
1388
- line-height: 1.3em;
1389
- left: 0.6em;
1390
- top: -0.8em;
1391
- padding: 0.15em 0.5em;
1392
- text-align: center;
1393
- color: white;
1394
- font-size: 0.5em; }
1395
- .react-autoql-notifications-button-container .react-autoql-notifications-badge-dot {
1396
- position: absolute;
1397
- display: inline-block;
1398
- border: 2px solid #fff;
1399
- background: #f5222d;
1400
- border-radius: 50%;
1401
- height: 0.6em;
1402
- width: 0.6em;
1403
- left: 0.5em;
1404
- top: -2px; }
1405
-
1406
- .react-autoql-notification-settings {
1407
- background-color: var(--react-autoql-background-color-secondary);
1408
- color: var(--react-autoql-text-color-primary);
1409
- padding-top: 20px;
1410
- height: 100%; }
1411
- .react-autoql-notification-settings .react-autoql-notification-settings-container {
1412
- margin: 20px;
1413
- margin-top: 10px;
1414
- border-radius: 4px;
1415
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
1416
- background-color: var(--react-autoql-background-color-primary);
1417
- overflow: hidden; }
1418
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item {
1419
- height: 55px;
1420
- line-height: 55px;
1421
- transition: height 0.3s cubic-bezier(0.26, 0.26, 0, 1); }
1422
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-error-status-icon {
1423
- margin-right: 10px;
1424
- cursor: pointer; }
1425
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .reset-period-info-icon {
1426
- padding-right: 20px;
1427
- font-size: 17px;
1428
- opacity: 1;
1429
- cursor: pointer;
1430
- color: var(--react-autoql-accent-color); }
1431
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item.CUSTOM:hover {
1432
- background: rgba(0, 0, 0, 0.01); }
1433
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-action-btn {
1434
- opacity: 0;
1435
- margin-right: 20px;
1436
- font-size: 16px;
1437
- transition: all 0.2s ease;
1438
- color: var(--react-autoql-text-color-primary);
1439
- cursor: pointer; }
1440
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-action-btn:hover {
1441
- color: var(--react-autoql-accent-color);
1442
- opacity: 1 !important; }
1443
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item:hover .react-autoql-notification-action-btn {
1444
- opacity: 0.5; }
1445
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item-header {
1446
- display: flex;
1447
- justify-content: space-between;
1448
- height: 56px;
1449
- padding-left: 25px;
1450
- padding-right: 8px;
1451
- border-bottom: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05)); }
1452
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-enable-checkbox {
1453
- margin-bottom: 4px;
1454
- margin-right: 8px; }
1455
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-disable-checkbox {
1456
- margin-bottom: 4px;
1457
- margin-right: 8px;
1458
- opacity: 0.5;
1459
- pointer-events: none; }
1460
- .react-autoql-notification-settings .react-autoql-notification-title-container {
1461
- display: flex;
1462
- justify-content: space-between;
1463
- align-items: center;
1464
- padding: 5px 20px;
1465
- padding-bottom: 0;
1466
- color: var(--react-autoql-text-color-primary); }
1467
- .react-autoql-notification-settings .react-autoql-notification-title-container .react-autoql-notification-add-btn {
1468
- display: inline-block;
1469
- height: 35px;
1470
- width: 35px;
1471
- border-radius: 20px;
1472
- background: var(--react-autoql-accent-color, #26a7df);
1473
- color: white;
1474
- line-height: 38px;
1475
- text-align: center;
1476
- font-size: 20px;
1477
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
1478
- transition: all 0.2s ease;
1479
- margin-right: 5px;
1480
- cursor: pointer; }
1481
- .react-autoql-notification-settings .react-autoql-notification-title-container .react-autoql-notification-add-btn:hover {
1482
- box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.32); }
1483
- .react-autoql-notification-settings .react-autoql-notification-setting-display-name {
1484
- white-space: nowrap;
1485
- overflow: hidden;
1486
- text-overflow: ellipsis;
1487
- padding-right: 10px; }
1488
- .react-autoql-notification-settings .react-autoql-notification-setting-display-name .react-autoql-notification-setting-display-name-message {
1489
- opacity: 0.5; }
1490
- .react-autoql-notification-settings .react-autoql-re-initialize-btn {
1491
- vertical-align: middle;
1492
- margin-bottom: 4px;
1493
- height: 18px; }
1494
- .react-autoql-notification-settings .react-autoql-re-initialize-btn-text {
1495
- display: flex;
1496
- align-items: center;
1497
- margin-top: -25px; }
1498
-
1499
- .react-autoql-dashboard .react-grid-item {
1500
- background: var(--react-autoql-background-color-primary, #fff);
1501
- color: var(--react-autoql-text-color-primary, #404040);
1502
- font-family: var(--react-autoql-font-family), sans-serif;
1503
- overflow: hidden;
1504
- border-radius: 4px;
1505
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13); }
1506
-
1507
- .react-autoql-dashboard-tile-inner-div {
1508
- height: 100%;
1509
- width: 100%;
1510
- background: inherit;
1511
- position: relative;
1512
- text-align: center;
1513
- display: flex;
1514
- justify-content: flex-start;
1515
- flex-direction: column;
1516
- align-items: center; }
1517
-
1518
- .dashboard-data-limit-warning-icon {
1519
- color: var(--react-autoql-warning-color) !important;
1520
- position: absolute !important;
1521
- bottom: 40px;
1522
- right: 16px;
1523
- font-size: 20px; }
1524
-
1525
- .react-autoql-dashboard-tile-drag-handle {
1526
- transition: opacity 0.3s ease;
1527
- position: absolute;
1528
- background-color: var(--react-autoql-border-color, #f7f7f7);
1529
- cursor: move;
1530
- opacity: 0; }
1531
- .react-autoql-dashboard-tile-drag-handle.top {
1532
- top: 0;
1533
- left: 0;
1534
- width: 100%;
1535
- height: 15px; }
1536
- .react-autoql-dashboard-tile-drag-handle.bottom {
1537
- bottom: 0;
1538
- left: 0;
1539
- width: 100%;
1540
- height: 15px; }
1541
- .react-autoql-dashboard-tile-drag-handle.left {
1542
- top: 0;
1543
- left: 0;
1544
- width: 15px;
1545
- height: 100%; }
1546
- .react-autoql-dashboard-tile-drag-handle.right {
1547
- top: 0;
1548
- right: 0;
1549
- width: 15px;
1550
- height: 100%; }
1551
-
1552
- .react-autoql-dashboard-tile:hover .react-autoql-dashboard-tile-drag-handle {
1553
878
  opacity: 1; }
879
+ .react-autoql-icon.warning {
880
+ color: var(--react-autoql-warning-color) !important; }
881
+ .react-autoql-icon.danger {
882
+ color: var(--react-autoql-danger-color) !important; }
1554
883
 
1555
- .react-autoql-dashboard-tile .autoql-options-toolbar {
1556
- transition: opacity 0.3s ease, color 0.3s ease;
1557
- visibility: hidden;
1558
- opacity: 0;
1559
- bottom: 8px;
1560
- right: 8px;
1561
- z-index: 1; }
1562
-
1563
- .dashboard-tile-viz-toolbar-container {
1564
- transition: opacity 0.3s ease, color 0.3s ease;
1565
- color: var(--react-autoql-accent-color);
1566
- position: absolute;
1567
- bottom: 0;
1568
- left: 0;
1569
- padding: 7px;
1570
- z-index: 1;
1571
- opacity: 0;
1572
- visibility: hidden; }
1573
- .dashboard-tile-viz-toolbar-container .viz-toolbar,
1574
- .dashboard-tile-viz-toolbar-container .split-view-btn {
1575
- position: relative;
1576
- display: inline-block;
1577
- background: var(--react-autoql-background-color-primary); }
1578
- .dashboard-tile-viz-toolbar-container .split-view-btn {
1579
- margin-right: 7px; }
1580
- .dashboard-tile-viz-toolbar-container .split-view-btn .react-autoql-icon {
1581
- font-size: 14px; }
1582
-
1583
- .split-view-btn {
1584
- z-index: 1; }
1585
-
1586
- .split-view-query-btn {
1587
- transition: opacity 0.3s ease, color 0.3s ease;
1588
- color: var(--react-autoql-accent-color);
1589
- position: absolute;
1590
- top: 7px;
1591
- left: 7px;
1592
- bottom: unset;
1593
- z-index: 1;
1594
- visibility: hidden;
1595
- opacity: 0; }
1596
-
1597
- .react-autoql-dashboard-tile:hover .dashboard-tile-viz-toolbar-container,
1598
- .react-autoql-dashboard-tile:hover .split-view-query-btn,
1599
- .react-autoql-dashboard-tile:hover .autoql-options-toolbar {
1600
- visibility: visible;
1601
- opacity: 1; }
1602
-
1603
- .react-autoql-dashboard-tile-inner-div .single-value-response {
1604
- font-size: 32px;
1605
- margin-top: -6px;
1606
- opacity: 0.9; }
1607
-
1608
- .react-autoql-dashboard-tile-inner-div .dashboard-tile-response-wrapper {
1609
- height: calc(100% - 47px);
1610
- width: 100%;
1611
- padding-top: 0;
1612
- background: inherit; }
1613
- .react-autoql-dashboard-tile-inner-div .dashboard-tile-response-wrapper .query-output-error-message {
1614
- opacity: 0.8; }
1615
- .react-autoql-dashboard-tile-inner-div .dashboard-tile-response-wrapper .layout-splitter {
1616
- height: 1px !important;
1617
- color: var(--react-autoql-border-color);
1618
- opacity: 0.3;
1619
- pointer-events: none; }
1620
- .react-autoql-dashboard-tile-inner-div .dashboard-tile-response-wrapper .react-autoql-table {
1621
- opacity: 0.9;
1622
- color: var(--react-autoql-text-color-primary);
1623
- font-size: 11px; }
1624
-
1625
- .react-autoql-dashboard-tile-inner-div.split .dashboard-tile-response-wrapper {
1626
- padding: 0; }
1627
-
1628
- .react-autoql-dashboard-tile-inner-div
1629
- .dashboard-tile-response-wrapper.editing .layout-splitter {
1630
- display: block;
1631
- pointer-events: unset;
1632
- height: 4px !important;
1633
- color: var(--react-autoql-text-color-primary);
1634
- opacity: 0.8; }
1635
-
1636
- /* Safetynet styles specific to dashboard tiles */
1637
- .react-autoql-dashboard-tile-inner-div
1638
- .dashboard-tile-response-wrapper.editing {
1639
- height: 100%;
1640
- width: 100%;
1641
- overflow-x: auto;
1642
- overflow-y: hidden; }
1643
-
1644
- .react-autoql-dashboard-tile-inner-div .react-autoql-query-validation-query {
1645
- white-space: nowrap; }
1646
-
1647
- .dashboard-tile-response-wrapper.small
1648
- .react-autoql-query-validation-description,
1649
- .dashboard-tile-response-wrapper.small
1650
- .react-autoql-suggestion-message-description,
1651
- .dashboard-tile-response-wrapper.small
1652
- .react-autoql-query-validation-execute-btn {
1653
- display: none; }
1654
-
1655
- .dashboard-tile-response-wrapper .dashboard-tile-response-container {
1656
- position: relative;
1657
- height: 100%;
1658
- width: 100%;
1659
- background: inherit;
1660
- cursor: default; }
1661
- .dashboard-tile-response-wrapper .dashboard-tile-response-container .react-autoql-table-container {
1662
- padding: 20px;
1663
- padding-top: 15px;
1664
- width: 100%; }
1665
- .dashboard-tile-response-wrapper .dashboard-tile-response-container .react-autoql-response-content-container {
1666
- padding: 7px; }
1667
-
1668
- .dashboard-tile-title-container {
1669
- width: 100%;
1670
- text-align: left;
1671
- padding: 19px 25px 0 25px;
1672
- height: 47px;
1673
- white-space: nowrap;
1674
- overflow: hidden;
1675
- text-overflow: ellipsis;
1676
- flex-shrink: 0;
1677
- flex-grow: 0; }
1678
- .dashboard-tile-title-container .dashboard-tile-title {
1679
- color: var(--react-autoql-accent-color, #26a7df); }
1680
-
1681
- .dashboard-tile-title-container .dashboard-tile-title {
1682
- font-weight: bold;
1683
- font-size: 14px; }
1684
-
1685
- .dashboard-tile-edit-wrapper {
1686
- display: flex;
1687
- width: 100%;
1688
- height: 55px;
1689
- padding: 20px 20px 0 25px;
1690
- flex-shrink: 0;
1691
- flex-grow: 0; }
1692
-
1693
- .dashboard-tile-play-button {
1694
- cursor: default;
1695
- flex-grow: 0;
1696
- flex-shrink: 0; }
1697
-
1698
- .dashboard-tile-play-button span.react-autoql-icon svg {
1699
- cursor: pointer;
1700
- width: 25px;
1701
- height: 33px;
1702
- margin-left: 10px;
1703
- color: var(--react-autoql-accent-color); }
1704
-
1705
- .dashboard-tile-play-button.disabled svg {
1706
- opacity: 0.5;
1707
- cursor: not-allowed; }
1708
-
1709
- .dashboard-tile-play-button:not(.disabled) svg:hover {
1710
- opacity: 0.8; }
1711
-
1712
- .dashboard-tile-delete-button {
1713
- opacity: 0;
1714
- font-size: 17px;
1715
- color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.4));
1716
- position: absolute;
1717
- top: 0px;
1718
- right: 2px;
1719
- cursor: pointer;
1720
- transition: opacity 0.3s ease;
1721
- z-index: 1; }
1722
-
1723
- .react-grid-item:hover .dashboard-tile-delete-button {
1724
- opacity: 1; }
884
+ span.react-autoql-icon {
885
+ vertical-align: unset;
886
+ text-align: left;
887
+ margin: 0;
888
+ padding: 0;
889
+ float: none !important;
890
+ color: inherit; }
891
+ span.react-autoql-icon svg {
892
+ float: none !important;
893
+ color: inherit;
894
+ vertical-align: unset;
895
+ text-align: left;
896
+ margin: 0;
897
+ padding: 0;
898
+ opacity: 1;
899
+ height: 1em;
900
+ margin-bottom: -0.1em; }
1725
901
 
1726
- .dashboard-tile-loading-container {
1727
- display: flex;
902
+ .slack-logo {
903
+ display: inline-block;
1728
904
  height: 100%;
1729
- width: 100%;
1730
- padding: 20px;
1731
- align-items: center;
1732
- justify-content: center; }
905
+ margin-bottom: 3px; }
906
+ .slack-logo img {
907
+ vertical-align: middle;
908
+ height: 1em;
909
+ width: 1em; }
1733
910
 
1734
- .dashboard-tile-title-divider {
1735
- height: 2px;
1736
- background: currentColor;
1737
- width: 75px;
1738
- margin-top: 4px;
1739
- opacity: 0.07; }
911
+ .react-autoql-badge {
912
+ position: absolute;
913
+ background: var(--react-autoql-warning-color);
914
+ border: 1px solid var(--react-autoql-background-color-primary);
915
+ width: 0.5em;
916
+ height: 0.5em;
917
+ top: -0.1em;
918
+ right: -0.25em;
919
+ border-radius: 50%;
920
+ box-sizing: content-box; }
1740
921
 
1741
- /* Input box styling for edit mode */
1742
- .dashboard-tile-input-container {
922
+ @import url("https://fonts.googleapis.com/icon?family=Material+Icons");
923
+ .react-autoql-response-content-container:not(.html-content) {
924
+ position: relative;
1743
925
  display: flex;
1744
- width: 100%;
926
+ flex-direction: column;
927
+ justify-content: center;
928
+ align-items: center;
929
+ background-color: inherit;
930
+ font-size: 14px;
1745
931
  height: 100%;
1746
- font-size: 15px; }
1747
- .dashboard-tile-input-container .dashboard-tile-input,
1748
- .dashboard-tile-input-container .dashboard-tile-autocomplete-input {
1749
- width: 100%;
1750
- height: 100%;
1751
- padding: 12px;
1752
- padding-left: 33px;
1753
- border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
1754
- outline: none !important;
1755
- color: var(--react-autoql-text-color-primary, #356f90);
1756
- background: var(--react-autoql-background-color-primary, #fff); }
1757
-
1758
- .query-focused .dashboard-tile-left-input-container,
1759
- .title-focused .dashboard-tile-right-input-container {
1760
- width: 70%; }
1761
-
1762
- .dashboard-tile-right-input-container {
1763
- z-index: 2; }
1764
-
1765
- .dashboard-tile-right-input-container,
1766
- .dashboard-tile-left-input-container {
1767
- position: relative;
1768
- width: 0;
1769
- flex-grow: 1;
1770
- transition: width 0.3s ease; }
1771
- .dashboard-tile-right-input-container .query-input-icon,
1772
- .dashboard-tile-right-input-container .title-input-icon,
1773
- .dashboard-tile-left-input-container .query-input-icon,
1774
- .dashboard-tile-left-input-container .title-input-icon {
1775
- color: var(--react-autoql-accent-color);
1776
- position: absolute;
1777
- pointer-events: none;
1778
- z-index: 1; }
1779
- .dashboard-tile-right-input-container .query-input-icon,
1780
- .dashboard-tile-left-input-container .query-input-icon {
1781
- font-size: 18px;
1782
- top: 4px;
1783
- left: 10px; }
1784
- .dashboard-tile-right-input-container .title-input-icon,
1785
- .dashboard-tile-left-input-container .title-input-icon {
1786
- font-size: 16px;
1787
- top: 7px;
1788
- left: 11px; }
1789
-
1790
- .dashboard-tile-input.second.query {
1791
- transition: all 0.3s ease;
1792
- border: 1px solid transparent;
1793
- outline: none !important;
1794
- color: var(--react-autoql-text-color-primary, #356f90);
1795
- background: var(--react-autoql-background-color-primary);
1796
- margin: 0px;
1797
- padding: 0px;
1798
- width: 0px;
1799
- height: 28px;
1800
- pointer-events: none; }
1801
- .dashboard-tile-input.second.query.open {
1802
- width: 200px;
1803
- padding: 12px;
1804
- margin-left: 5px;
1805
- border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
1806
- pointer-events: unset; }
1807
-
1808
- .dashboard-tile-input:hover,
1809
- .dashboard-tile-input:focus,
1810
- .dashboard-tile-input-container .dashboard-tile-autocomplete-input:hover,
1811
- .dashboard-tile-input-container .dashboard-tile-autocomplete-input:focus {
1812
- border: 1px solid #26a7e9 !important;
1813
- border-color: var(--react-autoql-accent-color) !important; }
1814
-
1815
- .dashboard-tile-input-container .dashboard-tile-input.query,
1816
- .dashboard-tile-input-container .dashboard-tile-autocomplete-input {
1817
- padding-left: 36px;
1818
- border-top-left-radius: 4px;
1819
- border-bottom-left-radius: 4px; }
1820
-
1821
- .dashboard-tile-input-container .dashboard-tile-input.title {
1822
- border-left: none;
1823
- border-top-right-radius: 4px;
1824
- border-bottom-right-radius: 4px;
1825
- z-index: 2; }
1826
-
1827
- .dashboard-tile-input-container .dashboard-tile-input.title:hover,
1828
- .dashboard-tile-input-container .dashboard-tile-input.title:focus,
1829
- .title-focused .dashboard-tile-right-input-container .dashboard-tile-input,
1830
- .dashboard-tile-right-input-container:hover .dashboard-tile-input {
1831
- /* This is done to balance it because we add a 1px left border when the input is focused or hovered */
1832
- margin-left: -2px; }
1833
-
1834
- /* Autocomplete styles */
1835
- .dashboard-tile-input-container .react-autosuggest__container {
1836
- position: relative;
1837
932
  width: 100%;
1838
- height: 100%;
1839
- padding: 0;
1840
- margin: 0; }
1841
-
1842
- .dashboard-tile-input-container
1843
- .react-autosuggest__suggestions-container--open {
1844
- background-color: var(--react-autoql-background-color-primary);
1845
- border: 1px solid var(--react-autoql-border-color);
933
+ overflow: hidden;
1846
934
  color: var(--react-autoql-text-color-primary); }
1847
935
 
1848
- .dashboard-tile-input-container .react-autosuggest__suggestion {
936
+ .react-autoql-response-content-container.html-content {
937
+ position: relative;
938
+ background-color: inherit;
939
+ text-align: left;
940
+ font-size: 14px;
941
+ height: 95%;
942
+ width: 100%;
943
+ overflow: hidden;
1849
944
  color: var(--react-autoql-text-color-primary); }
945
+ .react-autoql-response-content-container.html-content table th {
946
+ border-bottom: 2px solid var(--react-autoql-border-color); }
947
+ .react-autoql-response-content-container.html-content table tr:not(:last-child) {
948
+ border-bottom: 1px solid var(--react-autoql-border-color); }
949
+ .react-autoql-response-content-container.html-content table td:not(:last-child) {
950
+ border-right: 1px solid var(--react-autoql-border-color); }
951
+ .react-autoql-response-content-container.html-content table th,
952
+ .react-autoql-response-content-container.html-content table td {
953
+ padding: 5px 10px; }
954
+ .react-autoql-response-content-container.html-content * {
955
+ font-size: inherit; }
956
+ .react-autoql-response-content-container.html-content sup,
957
+ .react-autoql-response-content-container.html-content sub {
958
+ font-size: 10px; }
959
+ .react-autoql-response-content-container.html-content > *:first-child {
960
+ margin-top: 0 !important; }
961
+ .react-autoql-response-content-container.html-content > *:last-child {
962
+ margin-bottom: 0 !important; }
963
+ .react-autoql-response-content-container.html-content caption {
964
+ display: table-caption;
965
+ text-align: -webkit-center;
966
+ padding-top: unset;
967
+ padding-bottom: unset;
968
+ color: unset;
969
+ text-align: unset;
970
+ caption-side: unset; }
1850
971
 
1851
- .dashboard-tile-input-container input::-moz-placeholder {
1852
- opacity: 0.5; }
1853
-
1854
- .dashboard-tile-input-container input:-ms-input-placeholder {
1855
- opacity: 0.5; }
1856
-
1857
- .dashboard-tile-input-container input::placeholder {
1858
- opacity: 0.5; }
972
+ .react-autoql-response-content-container.table {
973
+ max-height: 100vh !important;
974
+ overflow-y: scroll;
975
+ scrollbar-width: none; }
1859
976
 
1860
- .react-autoql-dashboard .edit-mode-placeholder-icon {
1861
- display: inline-block;
1862
- line-height: 22px;
1863
- vertical-align: middle;
1864
- height: 23px; }
977
+ .react-autoql-response-content-container.table::-webkit-scrollbar {
978
+ width: 0;
979
+ height: 0; }
1865
980
 
1866
- .dashboard-tile-input-container
1867
- .react-autosuggest__suggestions-container--open {
1868
- position: absolute;
1869
- bottom: unset;
1870
- padding-top: 5px;
1871
- padding-bottom: 5px;
1872
- display: block;
1873
- height: unset;
1874
- border-radius: 24px;
981
+ .react-autoql-suggestion-btn {
982
+ padding: 6px 14px;
983
+ background: transparent;
1875
984
  font-family: inherit;
1876
- font-size: 15px;
1877
- font-weight: normal;
1878
- z-index: 2;
1879
- overflow: hidden;
1880
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
1881
- text-align: left;
1882
- width: 100%;
1883
- top: 35px;
1884
- border-radius: 4px;
1885
- margin: 0; }
985
+ font-size: 12px;
986
+ margin-bottom: 5px;
987
+ outline: none !important;
988
+ cursor: pointer;
989
+ letter-spacing: 0.05em;
990
+ transition: all 0.1s ease;
991
+ border: 1px solid rgba(0, 0, 0, 0.15);
992
+ border-radius: 5px;
993
+ color: inherit; }
1886
994
 
1887
- .dashboard-tile-input-container .react-autosuggest__suggestions-list {
1888
- margin: 0;
1889
- padding: 0;
1890
- list-style-type: none; }
995
+ .react-autoql-suggestion-btn:hover {
996
+ border-color: transparent;
997
+ color: white;
998
+ background: var(--react-autoql-accent-color); }
1891
999
 
1892
- .dashboard-tile-input-container .react-autosuggest__suggestion {
1000
+ .react-autoql-help-link-btn {
1001
+ padding: 6px 14px;
1002
+ background: transparent;
1003
+ border-radius: 5px;
1004
+ font-family: inherit;
1005
+ font-size: 12px;
1006
+ margin-top: 5px;
1007
+ outline: none !important;
1893
1008
  cursor: pointer;
1894
- padding: 2px;
1895
- padding-left: 18px;
1896
1009
  letter-spacing: 0.05em;
1897
- line-height: 22.5px; }
1010
+ transition: all 0.1s ease;
1011
+ border-color: #e2e2e26e;
1012
+ color: inherit; }
1898
1013
 
1899
- .dashboard-tile-input-container .react-autosuggest__suggestion--highlighted {
1900
- background-color: rgba(0, 0, 0, 0.1) !important; }
1014
+ .react-autoql-help-link-btn:hover {
1015
+ opacity: 0.7; }
1901
1016
 
1902
- .dashboard-tile-input-container .react-autosuggest__section-title {
1903
- padding: 10px 0 0 10px;
1904
- font-size: 12px;
1905
- color: #777; }
1017
+ .react-autoql-help-link-icon {
1018
+ width: 15px;
1019
+ height: 15px;
1020
+ margin-bottom: -3px;
1021
+ margin-right: 3px; }
1906
1022
 
1907
- /* Dragging placeholder styles */
1908
- .react-autoql-db-dragging-placeholder-container {
1023
+ .qanda-positive-feedback-checkmark.react-autoql-icon svg {
1024
+ color: var(--react-autoql-success-color); }
1025
+
1026
+ .react-autoql-suggestion-message {
1909
1027
  height: 100%;
1910
1028
  width: 100%;
1911
- padding: 20px 30px;
1912
- display: flex;
1913
- flex-direction: column; }
1029
+ word-break: break-word; }
1914
1030
 
1915
- .react-autoql-db-dragging-placeholder-title {
1031
+ .react-autoql-suggestions-select {
1032
+ position: relative;
1033
+ display: inline-block;
1034
+ height: 30px;
1035
+ background: none;
1036
+ outline: none !important;
1037
+ border: 1px solid;
1038
+ font-family: inherit;
1039
+ letter-spacing: 0.05em;
1040
+ color: #28a8e0;
1041
+ cursor: pointer;
1042
+ font-size: inherit; }
1043
+
1044
+ .no-columns-error-message {
1045
+ position: absolute;
1046
+ height: 100%;
1916
1047
  width: 100%;
1917
- height: 35px;
1918
- background: #f3f3f3;
1919
- border-top-right-radius: 4px;
1920
- border-top-left-radius: 4px;
1921
- flex-shrink: 0;
1922
- flex-grow: 0; }
1048
+ display: flex;
1049
+ justify-content: center;
1050
+ flex-direction: column;
1051
+ text-align: center;
1052
+ padding: 20px;
1053
+ font-size: 13px; }
1054
+ .no-columns-error-message .warning-icon {
1055
+ font-size: 22px;
1056
+ display: block;
1057
+ margin-bottom: -13px;
1058
+ text-align: center; }
1059
+ .no-columns-error-message .eye-icon {
1060
+ vertical-align: bottom;
1061
+ line-height: 18px; }
1923
1062
 
1924
- .react-autoql-db-dragging-placeholder-content {
1063
+ /* query validation */
1064
+ .react-autoql-query-validation-selector-container {
1065
+ display: inline-block;
1066
+ position: relative; }
1067
+
1068
+ .react-autoql-select-popup-container.query-validation-select {
1069
+ padding: 5px 0;
1070
+ letter-spacing: 0.03em;
1071
+ font-family: var(--react-autoql-font-family), sans-serif; }
1072
+ .react-autoql-select-popup-container.query-validation-select .react-autoql-select-option {
1073
+ height: unset;
1074
+ font-size: 14px;
1075
+ line-height: 24px;
1076
+ padding: 0 15px; }
1077
+ .react-autoql-select-popup-container.query-validation-select .react-autoql-select-option:last-of-type {
1078
+ color: #d84830; }
1079
+
1080
+ .react-autoql-query-validation-query {
1081
+ text-align: center; }
1082
+
1083
+ .react-autoql-query-validation-execute-btn {
1084
+ height: 38px;
1085
+ background: none;
1086
+ border-radius: 4px;
1087
+ margin-top: 24px;
1925
1088
  width: 100%;
1926
- height: 100%;
1927
- background: #f9f9f9;
1928
- border-bottom-right-radius: 4px;
1929
- border-bottom-left-radius: 4px; }
1089
+ color: inherit;
1090
+ cursor: pointer;
1091
+ outline: none !important;
1092
+ border-color: #e2e2e26e;
1093
+ transition: all 0.2s ease; }
1930
1094
 
1931
- .dashboard-tile-placeholder-text {
1932
- font-size: 15px;
1933
- color: var(--react-autoql-text-color-placeholder, rgba(0, 0, 0, 0.3)); }
1934
- .dashboard-tile-placeholder-text .play-icon {
1935
- vertical-align: bottom;
1936
- line-height: 20px; }
1095
+ .react-autoql-query-validation-execute-btn:hover {
1096
+ border-color: #28a8e0; }
1937
1097
 
1938
- /* React Grid Layout overrides */
1939
- .react-grid-item > .react-resizable-handle {
1940
- z-index: 1;
1941
- position: absolute;
1942
- width: 25px;
1943
- height: 25px;
1944
- bottom: 0;
1945
- right: 0; }
1098
+ .react-autoql-execute-query-icon {
1099
+ font-size: 16px;
1100
+ vertical-align: middle !important;
1101
+ padding-right: 3px !important; }
1102
+ .react-autoql-execute-query-icon span.react-autoql-icon svg {
1103
+ height: 19px;
1104
+ width: 19px;
1105
+ margin-top: 3px;
1106
+ margin-right: 4px;
1107
+ vertical-align: top;
1108
+ fill: var(--react-autoql-accent-color); }
1946
1109
 
1947
- .react-grid-item > .react-resizable-handle::after {
1948
- width: 11px !important;
1949
- height: 11px !important;
1950
- bottom: 4px;
1951
- right: 4px;
1952
- opacity: 0;
1953
- border-right: 1px solid var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.4)) !important;
1954
- border-bottom: 1px solid var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.4)) !important;
1955
- transition: opacity 0.3s ease; }
1110
+ .react-autoql-query-validation-select {
1111
+ position: relative;
1112
+ display: inline-block;
1113
+ height: 2em;
1114
+ background: none;
1115
+ outline: none !important;
1116
+ border: none;
1117
+ letter-spacing: 0.05em;
1118
+ font-family: inherit;
1119
+ font-size: inherit;
1120
+ margin: 0;
1121
+ padding: 0;
1122
+ border-radius: 0;
1123
+ border-bottom: 1px dashed;
1124
+ color: var(--react-autoql-accent-color); }
1956
1125
 
1957
- .react-grid-item:hover > .react-resizable-handle::after {
1958
- opacity: 1; }
1126
+ .react-autoql-query-validation-delete-button {
1127
+ position: relative;
1128
+ cursor: pointer;
1129
+ margin-bottom: -2px; }
1959
1130
 
1960
- .react-grid-placeholder {
1961
- background: rgba(0, 0, 0, 0.13) !important; }
1131
+ .react-autoql-chart-tooltip {
1132
+ font-family: var(--react-autoql-font-family), sans-serif;
1133
+ letter-spacing: 0.04em;
1134
+ line-height: 22px;
1135
+ font-size: 13px;
1136
+ padding: 7px 15px;
1137
+ transition: all 0.2s ease !important;
1138
+ text-align: left !important;
1139
+ opacity: 1 !important;
1140
+ z-index: 99999 !important;
1141
+ /* necessary to show up on top of rc drawer */ }
1962
1142
 
1963
- /* This fixes the flickering bug in RGL when resizing elements */
1964
- .react-draggable-transparent-selection span::-moz-selection, .react-draggable-transparent-selection div::-moz-selection, .react-draggable-transparent-selection a::-moz-selection, .react-draggable-transparent-selection input::-moz-selection, .react-draggable-transparent-selection text::-moz-selection {
1965
- color: inherit; }
1966
- .react-draggable-transparent-selection input::-moz-placeholder {
1967
- color: inherit; }
1968
- .react-draggable-transparent-selection input:-ms-input-placeholder {
1969
- color: inherit; }
1970
- .react-draggable-transparent-selection span::selection,
1971
- .react-draggable-transparent-selection div::selection,
1972
- .react-draggable-transparent-selection a::selection,
1973
- .react-draggable-transparent-selection input::selection,
1974
- .react-draggable-transparent-selection text::selection,
1975
- .react-draggable-transparent-selection input::placeholder {
1976
- color: inherit; }
1143
+ .single-value-response {
1144
+ color: inherit;
1145
+ cursor: unset;
1146
+ font-size: 20px; }
1147
+ .single-value-response:hover {
1148
+ color: inherit; }
1977
1149
 
1978
- .dashboard-tile-response-container .layout-pane-primary {
1979
- overflow: hidden; }
1150
+ .single-value-response.with-drilldown:hover {
1151
+ color: inherit;
1152
+ text-decoration: underline;
1153
+ font-weight: 600;
1154
+ cursor: pointer; }
1980
1155
 
1981
- .splitter-layout,
1982
- .layout-pane,
1983
- .dashboard-tile-split-pane-container,
1984
- .react-autoql-dashboard-drilldown-original {
1985
- display: flex;
1986
- align-items: stretch;
1987
- justify-content: center;
1156
+ .react-autoql-query-validation-container {
1988
1157
  width: 100%; }
1989
1158
 
1990
- .dashboard-tile-response-container .splitter-layout,
1991
- .dashboard-tile-response-container .layout-pane,
1992
- .dashboard-tile-response-container .dashboard-tile-split-pane-container {
1993
- background: inherit; }
1159
+ .react-autoql-query-validation-description {
1160
+ margin-bottom: 14px; }
1994
1161
 
1995
- .notification-rule-add-btn-outer,
1996
- .notification-rule-validate-btn-outer {
1997
- text-align: center;
1998
- border-style: dashed !important;
1999
- height: 38px;
2000
- line-height: 25px;
2001
- margin: 0 !important;
2002
- overflow: hidden; }
1162
+ .context-menu {
1163
+ background: var(--react-autoql-background-color-primary);
1164
+ /* height: 100px; */
1165
+ width: 150px;
1166
+ padding: 10px 0; }
2003
1167
 
2004
- .notification-rule-outer-container {
2005
- position: relative;
2006
- border: 1px solid transparent;
2007
- border-radius: 4px; }
2008
- .notification-rule-outer-container.outlined {
2009
- border-color: rgba(0, 0, 0, 0.15);
2010
- padding: 0 20px;
2011
- padding-bottom: 12px; }
1168
+ .context-menu-list {
1169
+ list-style-type: none;
1170
+ width: 100%;
1171
+ margin: 0;
1172
+ padding: 0; }
1173
+
1174
+ .context-menu-list li {
1175
+ color: var(--react-autoql-text-color-primary);
1176
+ width: 100%;
1177
+ height: 35px;
1178
+ line-height: 35px;
1179
+ padding: 0 20px;
1180
+ cursor: pointer; }
1181
+
1182
+ .context-menu-list li:hover {
1183
+ background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.05)); }
1184
+
1185
+ .react-autoql-condition-link {
1186
+ background: none !important;
1187
+ border: none;
1188
+ padding: 0 !important;
1189
+ text-decoration: none;
1190
+ white-space: nowrap;
1191
+ cursor: pointer;
1192
+ color: var(--react-autoql-accent-color); }
1193
+ .react-autoql-condition-link:hover {
1194
+ opacity: 0.9; }
2012
1195
 
2013
- .notification-outer-all-any {
2014
- position: absolute;
2015
- left: 0;
2016
- top: 50%; }
1196
+ .react-autoql-condition-link-filtered {
1197
+ text-decoration: none;
1198
+ white-space: nowrap;
1199
+ cursor: pointer;
1200
+ color: var(--react-autoql-accent-color); }
1201
+ .react-autoql-condition-link-filtered .react-autoql-custom-icon {
1202
+ font-size: 14px;
1203
+ vertical-align: middle;
1204
+ margin-top: -4px; }
1205
+ .react-autoql-condition-link-filtered:hover {
1206
+ opacity: 0.9;
1207
+ border: none !important; }
1208
+ .react-autoql-condition-link-filtered:hover .react-autoql-custom-icon {
1209
+ opacity: 0.9; }
2017
1210
 
2018
- .notification-first-group-btn-container {
2019
- display: flex;
2020
- justify-content: space-between; }
1211
+ .condition-lock-reverse-translation {
1212
+ color: var(--react-autoql-text-color-primary);
1213
+ background-color: var(--react-autoql-background-color-secondary);
1214
+ border-radius: 5px;
1215
+ padding: 4px 6px 4px 6px;
1216
+ margin: 2px;
1217
+ min-height: 26px;
1218
+ min-width: 300px; }
2021
1219
 
2022
- .data-alerts-container.read-only .react-autoql-notification-group-container {
2023
- border: none; }
1220
+ .react-autoql-step-container a {
1221
+ color: var(--react-autoql-accent-color, #26a7df); }
2024
1222
 
2025
- .notification-rule-outer-container {
2026
- position: relative;
2027
- border: 1px solid transparent;
2028
- border-radius: 4px;
2029
- padding-bottom: 5px; }
1223
+ .frequency-date-select-container {
1224
+ margin-top: 10px; }
2030
1225
 
2031
- .expression-error-message {
2032
- padding-left: 5px; }
1226
+ .notification-frequency-step {
1227
+ display: flex; }
1228
+ .notification-frequency-step .frequency-category-select {
1229
+ position: relative;
1230
+ padding-top: 9px; }
1231
+ .notification-frequency-step .notification-frequency-select {
1232
+ margin-left: 8px; }
1233
+ .notification-frequency-step .frequency-repeat-checkbox .react-autoql-checkbox-label {
1234
+ line-height: 33px; }
1235
+ .notification-frequency-step .frequency-repeat-follow-text {
1236
+ line-height: 32px;
1237
+ vertical-align: top; }
1238
+ .notification-frequency-step .frequency-settings-container {
1239
+ flex: 0 1 400px; }
2033
1240
 
2034
- .data-alerts-container.read-only .react-autoql-notification-group-container {
2035
- border: none; }
1241
+ .schedule-builder-timezone-section {
1242
+ margin: 10px 5px; }
1243
+ .schedule-builder-timezone-section .react-autoql-timezone-select {
1244
+ display: inline-block;
1245
+ width: 300px; }
1246
+
1247
+ .react-autoql-notifications-button-container {
1248
+ position: relative;
1249
+ display: inline-block;
1250
+ font-size: inherit;
1251
+ line-height: 1em;
1252
+ width: 1em; }
1253
+ .react-autoql-notifications-button-container .react-autoql-notifications-button {
1254
+ font-size: 1em;
1255
+ line-height: 0;
1256
+ vertical-align: bottom; }
1257
+ .react-autoql-notifications-button-container .react-autoql-notifications-badge {
1258
+ position: absolute;
1259
+ border: 2px solid #fff;
1260
+ background: #f5222d;
1261
+ border-radius: 6.3em;
1262
+ line-height: 1.3em;
1263
+ left: 0.6em;
1264
+ top: -0.8em;
1265
+ padding: 0.15em 0.5em;
1266
+ text-align: center;
1267
+ color: white;
1268
+ font-size: 0.5em; }
1269
+ .react-autoql-notifications-button-container .react-autoql-notifications-badge-dot {
1270
+ position: absolute;
1271
+ display: inline-block;
1272
+ border: 2px solid #fff;
1273
+ background: #f5222d;
1274
+ border-radius: 50%;
1275
+ height: 0.6em;
1276
+ width: 0.6em;
1277
+ left: 0.5em;
1278
+ top: -2px; }
2036
1279
 
2037
1280
  .react-autoql-notification-list-item {
2038
1281
  display: flex;
@@ -2233,592 +1476,821 @@ span.react-autoql-icon {
2233
1476
  line-height: 45px;
2234
1477
  font-size: 22px;
2235
1478
  color: white;
2236
- background-color: var(--react-autoql-accent-color, #26a7df);
1479
+ background-color: var(--react-autoql-accent-color, #26a7df);
1480
+ text-align: center;
1481
+ margin-top: 13px;
1482
+ margin-right: 17px; }
1483
+ .react-autoql-notification-list-item .react-autoql-notification-display-name-container {
1484
+ flex: 1;
1485
+ line-height: 23px;
1486
+ padding: 13px 0px;
1487
+ transition: color 0.2s ease; }
1488
+ .react-autoql-notification-list-item .react-autoql-notification-display-name-container .react-autoql-notification-display-name {
1489
+ font-size: 18px;
1490
+ color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.7)); }
1491
+ .react-autoql-notification-list-item .react-autoql-notification-display-name-container .react-autoql-notification-timestamp {
1492
+ font-size: 12px;
1493
+ opacity: 0.5; }
1494
+ .react-autoql-notification-list-item .react-autoql-notification-display-name-container .react-autoql-notification-timestamp span.react-autoql-icon svg {
1495
+ margin-bottom: -1px; }
1496
+
1497
+ .notification-list-loading-container {
1498
+ text-align: center;
1499
+ padding-top: 100px;
1500
+ color: var(--react-autoql-text-color-primary);
1501
+ height: 100%;
1502
+ overflow: hidden;
1503
+ background: var(--react-autoql-background-color-secondary); }
1504
+
1505
+ .empty-notifications-message {
1506
+ color: var(--react-autoql-text-color-primary);
1507
+ text-align: center;
1508
+ margin-top: 75px; }
1509
+ .empty-notifications-message div {
1510
+ opacity: 0.6; }
1511
+ .empty-notifications-message .empty-notifications-title {
1512
+ font-size: 16px;
1513
+ font-weight: bold;
1514
+ margin-bottom: 5px; }
1515
+ .empty-notifications-message .empty-notifications-img {
1516
+ width: 250px;
1517
+ height: 250px; }
1518
+
1519
+ .react-autoql-notification-list-container {
1520
+ height: 100%;
1521
+ padding: 20px;
1522
+ overflow-y: auto;
1523
+ background: var(--react-autoql-background-color-secondary); }
1524
+
1525
+ .react-autoql-notification-dismiss-all {
1526
+ text-align: right;
1527
+ margin-bottom: 12px;
1528
+ padding-right: 10px;
1529
+ color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.4));
1530
+ transition: color 0.1s ease; }
1531
+ .react-autoql-notification-dismiss-all span {
1532
+ opacity: 0.8;
1533
+ cursor: pointer; }
1534
+ .react-autoql-notification-dismiss-all span:hover {
1535
+ opacity: 1; }
1536
+
1537
+ .react-autoql-notification-display-name-input {
1538
+ width: 100%; }
1539
+
1540
+ .react-autoql-notification-message-input {
1541
+ width: 100%; }
1542
+
1543
+ .react-autoql-notification-list-item:nth-of-type(0) {
1544
+ -webkit-animation-delay: 0s;
1545
+ animation-delay: 0s; }
1546
+
1547
+ .react-autoql-notification-list-item:nth-of-type(1) {
1548
+ -webkit-animation-delay: 0.1s;
1549
+ animation-delay: 0.1s; }
1550
+
1551
+ .react-autoql-notification-list-item:nth-of-type(2) {
1552
+ -webkit-animation-delay: 0.2s;
1553
+ animation-delay: 0.2s; }
1554
+
1555
+ .react-autoql-notification-list-item:nth-of-type(3) {
1556
+ -webkit-animation-delay: 0.3s;
1557
+ animation-delay: 0.3s; }
1558
+
1559
+ .react-autoql-notification-list-item:nth-of-type(4) {
1560
+ -webkit-animation-delay: 0.4s;
1561
+ animation-delay: 0.4s; }
1562
+
1563
+ .react-autoql-notification-list-item:nth-of-type(5) {
1564
+ -webkit-animation-delay: 0.5s;
1565
+ animation-delay: 0.5s; }
1566
+
1567
+ .react-autoql-notification-list-item:nth-of-type(6) {
1568
+ -webkit-animation-delay: 0.6s;
1569
+ animation-delay: 0.6s; }
1570
+
1571
+ .react-autoql-notification-list-item:nth-of-type(7) {
1572
+ -webkit-animation-delay: 0.7s;
1573
+ animation-delay: 0.7s; }
1574
+
1575
+ .react-autoql-notification-list-item:nth-of-type(8) {
1576
+ -webkit-animation-delay: 0.8s;
1577
+ animation-delay: 0.8s; }
1578
+
1579
+ .react-autoql-notification-list-item:nth-of-type(9) {
1580
+ -webkit-animation-delay: 0.9s;
1581
+ animation-delay: 0.9s; }
1582
+
1583
+ .react-autoql-notification-list-item:nth-of-type(10) {
1584
+ -webkit-animation-delay: 1s;
1585
+ animation-delay: 1s; }
1586
+
1587
+ @-webkit-keyframes slideIn {
1588
+ 0% {
1589
+ opacity: 0;
1590
+ top: 500px; }
1591
+ 100% {
1592
+ opacity: 1;
1593
+ top: 0; } }
1594
+
1595
+ .react-autoql-notification-settings {
1596
+ background-color: var(--react-autoql-background-color-secondary);
1597
+ color: var(--react-autoql-text-color-primary);
1598
+ padding-top: 20px;
1599
+ height: 100%; }
1600
+ .react-autoql-notification-settings .react-autoql-notification-settings-container {
1601
+ margin: 20px;
1602
+ margin-top: 10px;
1603
+ border-radius: 4px;
1604
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
1605
+ background-color: var(--react-autoql-background-color-primary);
1606
+ overflow: hidden; }
1607
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item {
1608
+ height: 55px;
1609
+ line-height: 55px;
1610
+ transition: height 0.3s cubic-bezier(0.26, 0.26, 0, 1); }
1611
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-error-status-icon {
1612
+ margin-right: 10px;
1613
+ cursor: pointer; }
1614
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .reset-period-info-icon {
1615
+ padding-right: 20px;
1616
+ font-size: 17px;
1617
+ opacity: 1;
1618
+ cursor: pointer;
1619
+ color: var(--react-autoql-accent-color); }
1620
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item.CUSTOM:hover {
1621
+ background: rgba(0, 0, 0, 0.01); }
1622
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-action-btn {
1623
+ opacity: 0;
1624
+ margin-right: 20px;
1625
+ font-size: 16px;
1626
+ transition: all 0.2s ease;
1627
+ color: var(--react-autoql-text-color-primary);
1628
+ cursor: pointer; }
1629
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-action-btn:hover {
1630
+ color: var(--react-autoql-accent-color);
1631
+ opacity: 1 !important; }
1632
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item:hover .react-autoql-notification-action-btn {
1633
+ opacity: 0.5; }
1634
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item-header {
1635
+ display: flex;
1636
+ justify-content: space-between;
1637
+ height: 56px;
1638
+ padding-left: 25px;
1639
+ padding-right: 8px;
1640
+ border-bottom: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05)); }
1641
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-enable-checkbox {
1642
+ margin-bottom: 4px;
1643
+ margin-right: 8px; }
1644
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-disable-checkbox {
1645
+ margin-bottom: 4px;
1646
+ margin-right: 8px;
1647
+ opacity: 0.5;
1648
+ pointer-events: none; }
1649
+ .react-autoql-notification-settings .react-autoql-notification-title-container {
1650
+ display: flex;
1651
+ justify-content: space-between;
1652
+ align-items: center;
1653
+ padding: 5px 20px;
1654
+ padding-bottom: 0;
1655
+ color: var(--react-autoql-text-color-primary); }
1656
+ .react-autoql-notification-settings .react-autoql-notification-title-container .react-autoql-notification-add-btn {
1657
+ display: inline-block;
1658
+ height: 35px;
1659
+ width: 35px;
1660
+ border-radius: 20px;
1661
+ background: var(--react-autoql-accent-color, #26a7df);
1662
+ color: white;
1663
+ line-height: 38px;
2237
1664
  text-align: center;
2238
- margin-top: 13px;
2239
- margin-right: 17px; }
2240
- .react-autoql-notification-list-item .react-autoql-notification-display-name-container {
2241
- flex: 1;
2242
- line-height: 23px;
2243
- padding: 13px 0px;
2244
- transition: color 0.2s ease; }
2245
- .react-autoql-notification-list-item .react-autoql-notification-display-name-container .react-autoql-notification-display-name {
2246
- font-size: 18px;
2247
- color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.7)); }
2248
- .react-autoql-notification-list-item .react-autoql-notification-display-name-container .react-autoql-notification-timestamp {
2249
- font-size: 12px;
1665
+ font-size: 20px;
1666
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
1667
+ transition: all 0.2s ease;
1668
+ margin-right: 5px;
1669
+ cursor: pointer; }
1670
+ .react-autoql-notification-settings .react-autoql-notification-title-container .react-autoql-notification-add-btn:hover {
1671
+ box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.32); }
1672
+ .react-autoql-notification-settings .react-autoql-notification-setting-display-name {
1673
+ white-space: nowrap;
1674
+ overflow: hidden;
1675
+ text-overflow: ellipsis;
1676
+ padding-right: 10px; }
1677
+ .react-autoql-notification-settings .react-autoql-notification-setting-display-name .react-autoql-notification-setting-display-name-message {
2250
1678
  opacity: 0.5; }
2251
- .react-autoql-notification-list-item .react-autoql-notification-display-name-container .react-autoql-notification-timestamp span.react-autoql-icon svg {
2252
- margin-bottom: -1px; }
1679
+ .react-autoql-notification-settings .react-autoql-re-initialize-btn {
1680
+ vertical-align: middle;
1681
+ height: 18px; }
1682
+ .react-autoql-notification-settings .react-autoql-re-initialize-btn-text {
1683
+ display: flex;
1684
+ align-items: center;
1685
+ margin-top: -25px; }
2253
1686
 
2254
- .react-autoql-btn {
1687
+ .react-autoql-dashboard .react-grid-item {
1688
+ background: var(--react-autoql-background-color-primary, #fff);
1689
+ color: var(--react-autoql-text-color-primary, #404040);
1690
+ font-family: var(--react-autoql-font-family), sans-serif;
1691
+ overflow: hidden;
2255
1692
  border-radius: 4px;
2256
- cursor: pointer;
2257
- outline: none !important;
2258
- transition: all 0.2s ease;
2259
- width: auto;
2260
- display: inline-block; }
2261
-
2262
- .react-autoql-btn.disabled {
2263
- opacity: 0.4;
2264
- cursor: not-allowed;
2265
- pointer-events: none; }
2266
-
2267
- .react-autoql-btn.small {
2268
- padding: 2px 8px;
2269
- margin: 2px 3px; }
2270
-
2271
- .react-autoql-btn.large {
2272
- padding: 5px 16px;
2273
- margin: 2px 5px; }
1693
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13); }
2274
1694
 
2275
- .react-autoql-btn.default {
2276
- color: inherit;
2277
- border: 1px solid var(--react-autoql-border-color);
2278
- background: inherit; }
2279
- .react-autoql-btn.default:hover {
2280
- border-color: var(--react-autoql-accent-color);
2281
- color: var(--react-autoql-accent-color); }
1695
+ .react-autoql-dashboard-tile-inner-div {
1696
+ height: 100%;
1697
+ width: 100%;
1698
+ background: inherit;
1699
+ position: relative;
1700
+ text-align: center;
1701
+ display: flex;
1702
+ justify-content: flex-start;
1703
+ flex-direction: column;
1704
+ align-items: center; }
2282
1705
 
2283
- .react-autoql-btn.primary {
2284
- background: var(--react-autoql-accent-color);
2285
- border: 1px solid var(--react-autoql-accent-color);
2286
- color: white; }
2287
- .react-autoql-btn.primary:hover {
2288
- opacity: 0.8; }
1706
+ .dashboard-data-limit-warning-icon {
1707
+ color: var(--react-autoql-warning-color) !important;
1708
+ position: absolute !important;
1709
+ bottom: 40px;
1710
+ right: 16px;
1711
+ font-size: 20px; }
2289
1712
 
2290
- .react-autoql-btn.danger {
2291
- color: var(--react-autoql-danger-color, #ca0b00);
2292
- border: 1px solid var(--react-autoql-danger-color, #ca0b00);
2293
- background: inherit; }
2294
- .react-autoql-btn.danger:hover {
2295
- background-color: var(--react-autoql-danger-color, #ca0b00);
2296
- color: #fff; }
1713
+ .react-autoql-dashboard-tile-drag-handle {
1714
+ transition: opacity 0.3s ease;
1715
+ position: absolute;
1716
+ background-color: var(--react-autoql-border-color, #f7f7f7);
1717
+ cursor: move;
1718
+ opacity: 0; }
1719
+ .react-autoql-dashboard-tile-drag-handle.top {
1720
+ top: 0;
1721
+ left: 0;
1722
+ width: 100%;
1723
+ height: 15px; }
1724
+ .react-autoql-dashboard-tile-drag-handle.bottom {
1725
+ bottom: 0;
1726
+ left: 0;
1727
+ width: 100%;
1728
+ height: 15px; }
1729
+ .react-autoql-dashboard-tile-drag-handle.left {
1730
+ top: 0;
1731
+ left: 0;
1732
+ width: 15px;
1733
+ height: 100%; }
1734
+ .react-autoql-dashboard-tile-drag-handle.right {
1735
+ top: 0;
1736
+ right: 0;
1737
+ width: 15px;
1738
+ height: 100%; }
2297
1739
 
2298
- .chat-single-message-container {
2299
- transition: background-color 0.2s ease;
2300
- padding-top: 6px; }
2301
- .chat-single-message-container:first-of-type {
2302
- margin-top: 10px; }
2303
- .chat-single-message-container .query-more-btn {
2304
- transition: all 0.3s ease;
2305
- font-size: 22px;
2306
- padding: 13px;
2307
- margin-bottom: 6px;
2308
- height: 42px;
2309
- opacity: 0;
2310
- visibility: hidden;
2311
- cursor: pointer; }
2312
- .chat-single-message-container .query-more-btn:hover {
2313
- opacity: 1; }
1740
+ .react-autoql-dashboard-tile:hover .react-autoql-dashboard-tile-drag-handle {
1741
+ opacity: 1; }
2314
1742
 
2315
- .chat-condition-item-container {
2316
- position: absolute;
2317
- background: inherit;
2318
- bottom: 0px;
2319
- padding: 5px;
2320
- border-radius: 6px; }
1743
+ .react-autoql-dashboard-tile .autoql-options-toolbar {
1744
+ transition: opacity 0.3s ease, color 0.3s ease;
1745
+ visibility: hidden;
1746
+ opacity: 0;
1747
+ bottom: 8px;
1748
+ right: 8px;
1749
+ z-index: 1; }
2321
1750
 
2322
- .chat-condition-item {
2323
- background: none !important;
2324
- border: none;
2325
- margin-top: -20px !important;
2326
- padding: 0 !important;
2327
- font-family: var(--react-autoql-font-family);
1751
+ .dashboard-tile-viz-toolbar-container {
1752
+ transition: opacity 0.3s ease, color 0.3s ease;
2328
1753
  color: var(--react-autoql-accent-color);
2329
- text-decoration: underline;
2330
- cursor: pointer; }
1754
+ position: absolute;
1755
+ bottom: 0;
1756
+ left: 0;
1757
+ padding: 7px;
1758
+ z-index: 1;
1759
+ opacity: 0;
1760
+ visibility: hidden; }
1761
+ .dashboard-tile-viz-toolbar-container .viz-toolbar,
1762
+ .dashboard-tile-viz-toolbar-container .split-view-btn {
1763
+ position: relative;
1764
+ display: inline-block;
1765
+ background: var(--react-autoql-background-color-primary); }
1766
+ .dashboard-tile-viz-toolbar-container .split-view-btn {
1767
+ margin-right: 7px; }
1768
+ .dashboard-tile-viz-toolbar-container .split-view-btn .react-autoql-icon {
1769
+ font-size: 14px; }
2331
1770
 
2332
- .chat-single-message-container.response {
2333
- display: flex;
2334
- justify-content: flex-start;
2335
- padding-left: 20px;
2336
- -webkit-animation: scale-up-bl 0.6s ease;
2337
- animation: scale-up-bl 0.6s ease; }
1771
+ .split-view-btn {
1772
+ z-index: 1; }
2338
1773
 
2339
- .chat-single-message-container.request {
2340
- display: flex;
2341
- justify-content: flex-end;
2342
- padding-right: 20px;
2343
- -webkit-animation: scale-up-br 0.6s ease;
2344
- animation: scale-up-br 0.6s ease; }
1774
+ .split-view-query-btn {
1775
+ transition: opacity 0.3s ease, color 0.3s ease;
1776
+ color: var(--react-autoql-accent-color);
1777
+ position: absolute;
1778
+ top: 7px;
1779
+ left: 7px;
1780
+ bottom: unset;
1781
+ z-index: 1;
1782
+ visibility: hidden;
1783
+ opacity: 0; }
2345
1784
 
2346
- .chat-single-message-container .chat-message-bubble {
2347
- position: relative;
2348
- padding: 13px;
2349
- border-radius: 10px;
2350
- max-width: calc(100% - 20px);
2351
- word-wrap: break-word;
2352
- font-family: inherit;
2353
- font-size: 14px;
2354
- letter-spacing: 0.04em;
2355
- box-sizing: border-box;
2356
- /* make small margin on bottom because sometimes react
2357
- custom scrollbar cuts off a pixel or 2 at the bottom */
2358
- margin-bottom: 6px; }
1785
+ .react-autoql-dashboard-tile:hover .dashboard-tile-viz-toolbar-container,
1786
+ .react-autoql-dashboard-tile:hover .split-view-query-btn,
1787
+ .react-autoql-dashboard-tile:hover .autoql-options-toolbar {
1788
+ visibility: visible;
1789
+ opacity: 1; }
2359
1790
 
2360
- .chat-single-message-container .chat-message-bubble.text {
2361
- max-width: 85%; }
1791
+ .react-autoql-dashboard-tile-inner-div .single-value-response {
1792
+ font-size: 32px;
1793
+ margin-top: -6px;
1794
+ opacity: 0.9; }
2362
1795
 
2363
- .chat-single-message-container .chat-message-bubble.full-width {
2364
- width: calc(100% - 20px) !important;
2365
- min-width: calc(100% - 20px) !important;
2366
- max-width: calc(100% - 20px) !important; }
1796
+ .react-autoql-dashboard-tile-inner-div .dashboard-tile-response-wrapper {
1797
+ height: calc(100% - 47px);
1798
+ width: 100%;
1799
+ padding-top: 0;
1800
+ background: inherit; }
1801
+ .react-autoql-dashboard-tile-inner-div .dashboard-tile-response-wrapper .query-output-error-message {
1802
+ opacity: 0.8; }
1803
+ .react-autoql-dashboard-tile-inner-div .dashboard-tile-response-wrapper .layout-splitter {
1804
+ height: 1px !important;
1805
+ color: var(--react-autoql-border-color);
1806
+ opacity: 0.3;
1807
+ pointer-events: none; }
1808
+ .react-autoql-dashboard-tile-inner-div .dashboard-tile-response-wrapper .react-autoql-table {
1809
+ opacity: 0.9;
1810
+ color: var(--react-autoql-text-color-primary);
1811
+ font-size: 11px; }
2367
1812
 
2368
- .chat-single-message-container.response .chat-message-bubble.active {
2369
- border: 1px solid #c3c3c3; }
1813
+ .react-autoql-dashboard-tile-inner-div.split .dashboard-tile-response-wrapper {
1814
+ padding: 0; }
2370
1815
 
2371
- .chat-single-message-container.response .chat-message-bubble {
2372
- background: var(--react-autoql-background-color-primary);
1816
+ .react-autoql-dashboard-tile-inner-div
1817
+ .dashboard-tile-response-wrapper.editing .layout-splitter {
1818
+ display: block;
1819
+ pointer-events: unset;
1820
+ height: 4px !important;
2373
1821
  color: var(--react-autoql-text-color-primary);
2374
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13); }
1822
+ opacity: 0.8; }
2375
1823
 
2376
- .chat-single-message-container.response .chat-message-bubble:not(.text) {
2377
- min-width: 125px; }
1824
+ /* Safetynet styles specific to dashboard tiles */
1825
+ .react-autoql-dashboard-tile-inner-div
1826
+ .dashboard-tile-response-wrapper.editing {
1827
+ height: 100%;
1828
+ width: 100%;
1829
+ overflow-x: auto;
1830
+ overflow-y: hidden; }
2378
1831
 
2379
- .chat-single-message-container.request .chat-message-bubble {
2380
- background: var(--react-autoql-accent-color);
2381
- color: white;
2382
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13); }
1832
+ .react-autoql-dashboard-tile-inner-div .react-autoql-query-validation-query {
1833
+ white-space: nowrap; }
2383
1834
 
2384
- /* Increase height of message to include table filters,
2385
- so we dont have to redraw the whole table */
2386
- .chat-single-message-container.response.filtering-table {
2387
- max-height: calc(85% + 35px) !important; }
1835
+ .dashboard-tile-response-wrapper.small
1836
+ .react-autoql-query-validation-description,
1837
+ .dashboard-tile-response-wrapper.small
1838
+ .react-autoql-suggestion-message-description,
1839
+ .dashboard-tile-response-wrapper.small
1840
+ .react-autoql-query-validation-execute-btn {
1841
+ display: none; }
2388
1842
 
2389
- .chat-message-toolbar,
2390
- .chat-message-toolbar.autoql-options-toolbar {
2391
- display: none;
2392
- position: absolute;
1843
+ .dashboard-tile-response-wrapper .dashboard-tile-response-container {
1844
+ position: relative;
1845
+ height: 100%;
1846
+ width: 100%;
2393
1847
  background: inherit;
2394
- top: -31px;
2395
- padding: 5px;
2396
- border-radius: 6px;
2397
- line-height: 28px;
2398
- background: var(--react-autoql-background-color-primary);
2399
- border: 1px solid var(--react-autoql-border-color);
2400
- color: var(--react-autoql-accent-color); }
1848
+ cursor: default; }
1849
+ .dashboard-tile-response-wrapper .dashboard-tile-response-container .react-autoql-table-container {
1850
+ padding: 20px;
1851
+ padding-top: 15px;
1852
+ width: 100%; }
1853
+ .dashboard-tile-response-wrapper .dashboard-tile-response-container .react-autoql-response-content-container {
1854
+ padding: 7px; }
2401
1855
 
2402
- .chat-message-toolbar.right {
2403
- right: -9px; }
1856
+ .dashboard-tile-title-container {
1857
+ width: 100%;
1858
+ text-align: left;
1859
+ padding: 19px 25px 0 25px;
1860
+ height: 47px;
1861
+ white-space: nowrap;
1862
+ overflow: hidden;
1863
+ text-overflow: ellipsis;
1864
+ flex-shrink: 0;
1865
+ flex-grow: 0; }
1866
+ .dashboard-tile-title-container .dashboard-tile-title {
1867
+ color: var(--react-autoql-accent-color, #26a7df); }
2404
1868
 
2405
- .chat-message-toolbar.left {
2406
- left: -9px; }
1869
+ .dashboard-tile-title-container .dashboard-tile-title {
1870
+ font-weight: bold;
1871
+ font-size: 14px; }
2407
1872
 
2408
- .chat-message-bubble:hover .chat-message-toolbar,
2409
- .chat-message-bubble .chat-message-toolbar.active {
2410
- display: block; }
1873
+ .dashboard-tile-edit-wrapper {
1874
+ display: flex;
1875
+ width: 100%;
1876
+ height: 55px;
1877
+ padding: 20px 20px 0 25px;
1878
+ flex-shrink: 0;
1879
+ flex-grow: 0; }
2411
1880
 
2412
- .report-problem-text-area {
2413
- border-radius: 4px;
2414
- border: 1px solid rgba(0, 0, 0, 0.15);
2415
- margin-top: 10px;
2416
- padding: 5px 10px;
2417
- outline: none !important; }
1881
+ .dashboard-tile-play-button {
1882
+ cursor: default;
1883
+ flex-grow: 0;
1884
+ flex-shrink: 0; }
2418
1885
 
2419
- .data-limit-warning-icon {
2420
- color: var(--react-autoql-warning-color) !important;
2421
- position: absolute !important;
2422
- bottom: 2px;
2423
- right: 4px;
2424
- font-size: 20px; }
1886
+ .dashboard-tile-play-button span.react-autoql-icon svg {
1887
+ cursor: pointer;
1888
+ width: 25px;
1889
+ height: 33px;
1890
+ margin-left: 10px;
1891
+ color: var(--react-autoql-accent-color); }
2425
1892
 
2426
- .condition-info-icon-left-align {
2427
- color: var(--react-autoql-accent-color) !important;
2428
- position: absolute !important;
2429
- bottom: 2px;
2430
- right: 10px;
2431
- font-size: 20px; }
1893
+ .dashboard-tile-play-button.disabled svg {
1894
+ opacity: 0.5;
1895
+ cursor: not-allowed; }
2432
1896
 
2433
- .condition-info-icon {
2434
- color: var(--react-autoql-accent-color) !important;
2435
- position: absolute !important;
2436
- bottom: 2px;
2437
- right: 4px;
2438
- font-size: 20px; }
1897
+ .dashboard-tile-play-button:not(.disabled) svg:hover {
1898
+ opacity: 0.8; }
2439
1899
 
2440
- .more-options-menu,
2441
- .report-problem-menu {
2442
- background: var(--react-autoql-background-color-primary);
2443
- padding: 10px 0; }
2444
- .more-options-menu span.react-autoql-icon svg,
2445
- .report-problem-menu span.react-autoql-icon svg {
2446
- margin-right: 3px; }
1900
+ .dashboard-tile-delete-button {
1901
+ opacity: 0;
1902
+ font-size: 17px;
1903
+ color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.4));
1904
+ position: absolute;
1905
+ top: 0px;
1906
+ right: 2px;
1907
+ cursor: pointer;
1908
+ transition: opacity 0.3s ease;
1909
+ z-index: 1; }
2447
1910
 
2448
- .interpretation-icon {
2449
- vertical-align: top;
2450
- height: 26px;
2451
- margin: 0 3px;
2452
- font-size: 18px; }
1911
+ .react-grid-item:hover .dashboard-tile-delete-button {
1912
+ opacity: 1; }
2453
1913
 
2454
- /* Chart icon styles */
2455
- .chart-icon-svg-0,
2456
- .react-autoql-icon-svg-0 {
2457
- fill: currentColor; }
1914
+ .dashboard-tile-loading-container {
1915
+ display: flex;
1916
+ height: 100%;
1917
+ width: 100%;
1918
+ padding: 20px;
1919
+ align-items: center;
1920
+ justify-content: center; }
2458
1921
 
2459
- .hm0 {
2460
- opacity: 0.5;
2461
- fill: currentColor;
2462
- enable-background: new; }
1922
+ .dashboard-tile-title-divider {
1923
+ height: 2px;
1924
+ background: currentColor;
1925
+ width: 75px;
1926
+ margin-top: 4px;
1927
+ opacity: 0.07; }
2463
1928
 
2464
- .hm1 {
2465
- fill: currentColor; }
1929
+ /* Input box styling for edit mode */
1930
+ .dashboard-tile-input-container {
1931
+ display: flex;
1932
+ width: 100%;
1933
+ height: 100%;
1934
+ font-size: 15px; }
1935
+ .dashboard-tile-input-container .dashboard-tile-input,
1936
+ .dashboard-tile-input-container .dashboard-tile-autocomplete-input {
1937
+ width: 100%;
1938
+ height: 100%;
1939
+ padding: 12px;
1940
+ padding-left: 33px;
1941
+ border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
1942
+ outline: none !important;
1943
+ color: var(--react-autoql-text-color-primary, #356f90);
1944
+ background: var(--react-autoql-background-color-primary, #fff); }
2466
1945
 
2467
- .hm2 {
2468
- opacity: 0.15;
2469
- fill: currentColor;
2470
- enable-background: new; }
1946
+ .query-focused .dashboard-tile-left-input-container,
1947
+ .title-focused .dashboard-tile-right-input-container {
1948
+ width: 70%; }
2471
1949
 
2472
- .hm3 {
2473
- opacity: 0.6;
2474
- fill: currentColor;
2475
- enable-background: new; }
1950
+ .dashboard-tile-right-input-container {
1951
+ z-index: 2; }
1952
+
1953
+ .dashboard-tile-right-input-container,
1954
+ .dashboard-tile-left-input-container {
1955
+ position: relative;
1956
+ width: 0;
1957
+ flex-grow: 1;
1958
+ transition: width 0.3s ease; }
1959
+ .dashboard-tile-right-input-container .query-input-icon,
1960
+ .dashboard-tile-right-input-container .title-input-icon,
1961
+ .dashboard-tile-left-input-container .query-input-icon,
1962
+ .dashboard-tile-left-input-container .title-input-icon {
1963
+ color: var(--react-autoql-accent-color);
1964
+ position: absolute;
1965
+ pointer-events: none;
1966
+ z-index: 1; }
1967
+ .dashboard-tile-right-input-container .query-input-icon,
1968
+ .dashboard-tile-left-input-container .query-input-icon {
1969
+ font-size: 18px;
1970
+ top: 4px;
1971
+ left: 10px; }
1972
+ .dashboard-tile-right-input-container .title-input-icon,
1973
+ .dashboard-tile-left-input-container .title-input-icon {
1974
+ font-size: 16px;
1975
+ top: 7px;
1976
+ left: 11px; }
1977
+
1978
+ .dashboard-tile-input.second.query {
1979
+ transition: all 0.3s ease;
1980
+ border: 1px solid transparent;
1981
+ outline: none !important;
1982
+ color: var(--react-autoql-text-color-primary, #356f90);
1983
+ background: var(--react-autoql-background-color-primary);
1984
+ margin: 0px;
1985
+ padding: 0px;
1986
+ width: 0px;
1987
+ height: 28px;
1988
+ pointer-events: none; }
1989
+ .dashboard-tile-input.second.query.open {
1990
+ width: 200px;
1991
+ padding: 12px;
1992
+ margin-left: 5px;
1993
+ border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
1994
+ pointer-events: unset; }
2476
1995
 
2477
- .hm4 {
2478
- opacity: 0.65;
2479
- fill: currentColor;
2480
- enable-background: new; }
1996
+ .dashboard-tile-input:hover,
1997
+ .dashboard-tile-input:focus,
1998
+ .dashboard-tile-input-container .dashboard-tile-autocomplete-input:hover,
1999
+ .dashboard-tile-input-container .dashboard-tile-autocomplete-input:focus {
2000
+ border: 1px solid #26a7e9 !important;
2001
+ border-color: var(--react-autoql-accent-color) !important; }
2481
2002
 
2482
- .hm5 {
2483
- fill: currentColor; }
2003
+ .dashboard-tile-input-container .dashboard-tile-input.query,
2004
+ .dashboard-tile-input-container .dashboard-tile-autocomplete-input {
2005
+ padding-left: 36px;
2006
+ border-top-left-radius: 4px;
2007
+ border-bottom-left-radius: 4px; }
2484
2008
 
2485
- .hm6 {
2486
- fill: currentColor; }
2009
+ .dashboard-tile-input-container .dashboard-tile-input.title {
2010
+ border-left: none;
2011
+ border-top-right-radius: 4px;
2012
+ border-bottom-right-radius: 4px;
2013
+ z-index: 2; }
2487
2014
 
2488
- /* animations */
2489
- @-webkit-keyframes scale-up-br {
2490
- 0% {
2491
- transform: scale(0.5);
2492
- transform-origin: 100% 100%; }
2493
- 100% {
2494
- transform: scale(1);
2495
- transform-origin: 100% 100%; } }
2496
- @keyframes scale-up-br {
2497
- 0% {
2498
- transform: scale(0.5);
2499
- transform-origin: 100% 100%; }
2500
- 100% {
2501
- transform: scale(1);
2502
- transform-origin: 100% 100%; } }
2015
+ .dashboard-tile-input-container .dashboard-tile-input.title:hover,
2016
+ .dashboard-tile-input-container .dashboard-tile-input.title:focus,
2017
+ .title-focused .dashboard-tile-right-input-container .dashboard-tile-input,
2018
+ .dashboard-tile-right-input-container:hover .dashboard-tile-input {
2019
+ /* This is done to balance it because we add a 1px left border when the input is focused or hovered */
2020
+ margin-left: -2px; }
2503
2021
 
2504
- @-webkit-keyframes scale-up-bl {
2505
- 0% {
2506
- transform: scale(0.5);
2507
- transform-origin: 0% 100%; }
2508
- 100% {
2509
- transform: scale(1);
2510
- transform-origin: 0% 100%; } }
2022
+ /* Autocomplete styles */
2023
+ .dashboard-tile-input-container .react-autosuggest__container {
2024
+ position: relative;
2025
+ width: 100%;
2026
+ height: 100%;
2027
+ padding: 0;
2028
+ margin: 0; }
2511
2029
 
2512
- @keyframes scale-up-bl {
2513
- 0% {
2514
- transform: scale(0.5);
2515
- transform-origin: 0% 100%; }
2516
- 100% {
2517
- transform: scale(1);
2518
- transform-origin: 0% 100%; } }
2030
+ .dashboard-tile-input-container
2031
+ .react-autosuggest__suggestions-container--open {
2032
+ background-color: var(--react-autoql-background-color-primary);
2033
+ border: 1px solid var(--react-autoql-border-color);
2034
+ color: var(--react-autoql-text-color-primary); }
2519
2035
 
2520
- .react-autoql-cascader {
2521
- position: relative;
2522
- white-space: nowrap;
2523
- overflow: hidden;
2524
- min-width: 300px; }
2525
- .react-autoql-cascader .options-container {
2526
- transition: max-width 0.3s ease;
2527
- display: inline-block;
2528
- vertical-align: top;
2529
- padding: 0 10px;
2530
- margin: 10px 0;
2531
- width: 100%;
2532
- max-width: calc(100% - 20px);
2533
- white-space: pre-wrap; }
2534
- .react-autoql-cascader .options-container.hidden {
2535
- max-width: 0; }
2536
- .react-autoql-cascader .options-container.hidden span {
2537
- white-space: nowrap; }
2538
- .react-autoql-cascader .options-container.hidden .option {
2539
- opacity: 0;
2540
- pointer-events: none; }
2541
- .react-autoql-cascader .options-container .options-title {
2542
- padding: 4px;
2543
- padding-left: 10px;
2544
- font-weight: 600; }
2545
- .react-autoql-cascader .options-container .cascader-back-arrow {
2546
- position: absolute;
2547
- cursor: pointer;
2548
- top: 15px;
2549
- left: 0; }
2550
- .react-autoql-cascader .options-container .cascader-back-arrow:hover {
2551
- opacity: 0.8; }
2552
- .react-autoql-cascader .options-container .option {
2553
- cursor: pointer;
2554
- padding: 4px;
2555
- display: flex;
2556
- justify-content: space-between;
2557
- border-radius: 2px;
2558
- padding-left: 10px; }
2559
- .react-autoql-cascader .options-container .option .option-arrow {
2560
- opacity: 0.7; }
2561
- .react-autoql-cascader .options-container .option .option-execute-icon {
2562
- opacity: 0;
2563
- color: #fff;
2564
- font-size: 16px;
2565
- vertical-align: middle; }
2566
- .react-autoql-cascader .options-container .option:hover, .react-autoql-cascader .options-container .option.active {
2567
- background-color: var(--react-autoql-accent-color, #26a7df);
2568
- color: #fff; }
2569
- .react-autoql-cascader .options-container .option:hover .option-execute-icon, .react-autoql-cascader .options-container .option.active .option-execute-icon {
2570
- opacity: 1; }
2571
- .react-autoql-cascader .options-container:not(:last-child) {
2572
- border-right: 1px solid #d3d3d352; }
2036
+ .dashboard-tile-input-container .react-autosuggest__suggestion {
2037
+ color: var(--react-autoql-text-color-primary); }
2573
2038
 
2574
- .ReactModal__Overlay {
2575
- background-color: transparent !important;
2576
- transition: background-color 0.2s ease-in-out;
2577
- z-index: 9999; }
2039
+ .dashboard-tile-input-container input::-moz-placeholder {
2040
+ opacity: 0.5; }
2578
2041
 
2579
- .ReactModal__Overlay--after-open {
2580
- background-color: rgba(0, 0, 0, 0.25) !important; }
2042
+ .dashboard-tile-input-container input:-ms-input-placeholder {
2043
+ opacity: 0.5; }
2581
2044
 
2582
- .ReactModal__Overlay--before-close {
2583
- background-color: transparent !important; }
2045
+ .dashboard-tile-input-container input::placeholder {
2046
+ opacity: 0.5; }
2584
2047
 
2585
- .ReactModal__Content {
2586
- display: flex;
2587
- flex-direction: column;
2588
- transform: scale(0);
2589
- transition: all 0.2s ease-in-out;
2590
- color: var(--react-autoql-text-color-primary);
2591
- border: 1px solid var(--react-autoql-border-color) !important;
2592
- background: var(--react-autoql-background-color-primary) !important;
2593
- box-shadow: 0 0 14px 1px rgba(0, 0, 0, 0.15);
2594
- padding: 0 !important;
2595
- margin: auto auto;
2596
- max-width: 90vw;
2597
- max-height: calc(100vh - 90px); }
2598
- .ReactModal__Content input.react-autoql-input,
2599
- .ReactModal__Content textarea.react-autoql-input,
2600
- .ReactModal__Content textarea {
2601
- border-color: var(--react-autoql-border-color);
2602
- color: var(--react-autoql-text-color-primary);
2603
- background: var(--react-autoql-background-color-primary, white); }
2604
- .ReactModal__Content input.react-autoql-input::-moz-placeholder, .ReactModal__Content textarea.react-autoql-input::-moz-placeholder, .ReactModal__Content textarea::-moz-placeholder {
2605
- color: var(--react-autoql-text-color-placeholder); }
2606
- .ReactModal__Content input.react-autoql-input:-ms-input-placeholder, .ReactModal__Content textarea.react-autoql-input:-ms-input-placeholder, .ReactModal__Content textarea:-ms-input-placeholder {
2607
- color: var(--react-autoql-text-color-placeholder); }
2608
- .ReactModal__Content input.react-autoql-input::placeholder,
2609
- .ReactModal__Content textarea.react-autoql-input::placeholder,
2610
- .ReactModal__Content textarea::placeholder {
2611
- color: var(--react-autoql-text-color-placeholder); }
2048
+ .react-autoql-dashboard .edit-mode-placeholder-icon {
2049
+ display: inline-block;
2050
+ line-height: 22px;
2051
+ vertical-align: middle;
2052
+ height: 23px; }
2612
2053
 
2613
- .ReactModal__Overlay--after-open .ReactModal__Content {
2614
- transform: scale(1); }
2054
+ .dashboard-tile-input-container
2055
+ .react-autosuggest__suggestions-container--open {
2056
+ position: absolute;
2057
+ bottom: unset;
2058
+ padding-top: 5px;
2059
+ padding-bottom: 5px;
2060
+ display: block;
2061
+ height: unset;
2062
+ border-radius: 24px;
2063
+ font-family: inherit;
2064
+ font-size: 15px;
2065
+ font-weight: normal;
2066
+ z-index: 2;
2067
+ overflow: hidden;
2068
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
2069
+ text-align: left;
2070
+ width: 100%;
2071
+ top: 35px;
2072
+ border-radius: 4px;
2073
+ margin: 0; }
2615
2074
 
2616
- .ReactModal__Overlay--before-close .ReactModal__Content {
2617
- transform: scale(0); }
2075
+ .dashboard-tile-input-container .react-autosuggest__suggestions-list {
2076
+ margin: 0;
2077
+ padding: 0;
2078
+ list-style-type: none; }
2618
2079
 
2619
- .react-autoql-modal-header {
2620
- position: relative;
2621
- text-align: center;
2622
- flex: 0 0 52px;
2623
- border-bottom: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05));
2624
- padding: 14px 60px;
2625
- font-size: 16px; }
2080
+ .dashboard-tile-input-container .react-autosuggest__suggestion {
2081
+ cursor: pointer;
2082
+ padding: 2px;
2083
+ padding-left: 18px;
2084
+ letter-spacing: 0.05em;
2085
+ line-height: 22.5px; }
2626
2086
 
2627
- .react-autoql-modal-footer {
2628
- position: relative;
2629
- flex: 0 0 52px;
2630
- border-top: 1px solid rgba(0, 0, 0, 0.05);
2631
- text-align: right;
2632
- padding: 8px 10px; }
2087
+ .dashboard-tile-input-container .react-autosuggest__suggestion--highlighted {
2088
+ background-color: rgba(0, 0, 0, 0.1) !important; }
2633
2089
 
2634
- .react-autoql-modal-body {
2635
- display: flex;
2636
- flex-direction: column;
2637
- padding: 25px;
2638
- flex: 1;
2639
- overflow: hidden; }
2640
- .react-autoql-modal-body h3 {
2641
- color: var(--react-autoql-text-color-primary); }
2090
+ .dashboard-tile-input-container .react-autosuggest__section-title {
2091
+ padding: 10px 0 0 10px;
2092
+ font-size: 12px;
2093
+ color: #777; }
2642
2094
 
2643
- .react-autoql-modal-close-btn {
2644
- position: absolute !important;
2645
- top: 10px;
2646
- right: 18px;
2647
- font-size: 22px;
2648
- opacity: 0.6 !important;
2649
- cursor: pointer; }
2095
+ /* Dragging placeholder styles */
2096
+ .react-autoql-db-dragging-placeholder-container {
2097
+ height: 100%;
2098
+ width: 100%;
2099
+ padding: 20px 30px;
2100
+ display: flex;
2101
+ flex-direction: column; }
2650
2102
 
2651
- .react-autoql-modal-close-btn:hover {
2652
- opacity: 1 !important; }
2103
+ .react-autoql-db-dragging-placeholder-title {
2104
+ width: 100%;
2105
+ height: 35px;
2106
+ background: #f3f3f3;
2107
+ border-top-right-radius: 4px;
2108
+ border-top-left-radius: 4px;
2109
+ flex-shrink: 0;
2110
+ flex-grow: 0; }
2653
2111
 
2654
- .react-autoql-table-container {
2112
+ .react-autoql-db-dragging-placeholder-content {
2113
+ width: 100%;
2655
2114
  height: 100%;
2656
- max-width: 100%;
2657
- background-color: inherit; }
2115
+ background: #f9f9f9;
2116
+ border-bottom-right-radius: 4px;
2117
+ border-bottom-left-radius: 4px; }
2658
2118
 
2659
- .react-autoql-table {
2660
- margin-bottom: 0; }
2119
+ .dashboard-tile-placeholder-text {
2120
+ font-size: 15px;
2121
+ color: var(--react-autoql-text-color-placeholder, rgba(0, 0, 0, 0.3)); }
2122
+ .dashboard-tile-placeholder-text .play-icon {
2123
+ vertical-align: bottom;
2124
+ line-height: 20px; }
2661
2125
 
2662
- /* tabulator */
2663
- .react-autoql-table.tabulator,
2664
- .react-autoql-table.tabulator .tabulator-row,
2665
- .react-autoql-table.tabulator .tabulator-header,
2666
- .react-autoql-table.tabulator .tabulator-headers,
2667
- .react-autoql-table.tabulator .tabulator-header .tabulator-col,
2668
- .react-autoql-table.tabulator .tabulator-tableHolder .tabulator-table {
2669
- background-color: inherit; }
2126
+ /* React Grid Layout overrides */
2127
+ .react-grid-item > .react-resizable-handle {
2128
+ z-index: 1;
2129
+ position: absolute;
2130
+ width: 25px;
2131
+ height: 25px;
2132
+ bottom: 0;
2133
+ right: 0; }
2670
2134
 
2671
- .react-autoql-table-container.supports-drilldown
2672
- .react-autoql-table.tabulator
2673
- .tabulator-row.tabulator-unselectable:hover {
2674
- cursor: pointer !important;
2675
- background-color: var(--react-autoql-hover-color) !important; }
2135
+ .react-grid-item > .react-resizable-handle::after {
2136
+ width: 11px !important;
2137
+ height: 11px !important;
2138
+ bottom: 4px;
2139
+ right: 4px;
2140
+ opacity: 0;
2141
+ border-right: 1px solid var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.4)) !important;
2142
+ border-bottom: 1px solid var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.4)) !important;
2143
+ transition: opacity 0.3s ease; }
2676
2144
 
2677
- .react-autoql-table.tabulator
2678
- .tabulator-header
2679
- .tabulator-col.tabulator-sortable:hover {
2680
- background-color: var(--react-autoql-hover-color) !important; }
2145
+ .react-grid-item:hover > .react-resizable-handle::after {
2146
+ opacity: 1; }
2681
2147
 
2682
- .react-autoql-table.tabulator .tabulator-header .tabulator-col,
2683
- .react-autoql-table.tabulator .tabulator-cell {
2684
- border-color: var(--react-autoql-border-color); }
2148
+ .react-grid-placeholder {
2149
+ background: rgba(0, 0, 0, 0.13) !important; }
2685
2150
 
2686
- .react-autoql-table.tabulator .tabulator-header {
2687
- border-bottom: 2px solid var(--react-autoql-border-color); }
2151
+ /* This fixes the flickering bug in RGL when resizing elements */
2152
+ .react-draggable-transparent-selection span::-moz-selection, .react-draggable-transparent-selection div::-moz-selection, .react-draggable-transparent-selection a::-moz-selection, .react-draggable-transparent-selection input::-moz-selection, .react-draggable-transparent-selection text::-moz-selection {
2153
+ color: inherit; }
2154
+ .react-draggable-transparent-selection input::-moz-placeholder {
2155
+ color: inherit; }
2156
+ .react-draggable-transparent-selection input:-ms-input-placeholder {
2157
+ color: inherit; }
2158
+ .react-draggable-transparent-selection span::selection,
2159
+ .react-draggable-transparent-selection div::selection,
2160
+ .react-draggable-transparent-selection a::selection,
2161
+ .react-draggable-transparent-selection input::selection,
2162
+ .react-draggable-transparent-selection text::selection,
2163
+ .react-draggable-transparent-selection input::placeholder {
2164
+ color: inherit; }
2688
2165
 
2689
- .react-autoql-table.tabulator {
2690
- background-color: inherit;
2691
- height: 100%; }
2166
+ .dashboard-tile-response-container .layout-pane-primary {
2167
+ overflow: hidden; }
2692
2168
 
2693
- .react-autoql-table .tabulator-row {
2694
- /* user-select: none; This breaks copy/paste */
2695
- border-bottom: 1px solid var(--react-autoql-border-color); }
2169
+ .splitter-layout,
2170
+ .layout-pane,
2171
+ .dashboard-tile-split-pane-container,
2172
+ .react-autoql-dashboard-drilldown-original {
2173
+ display: flex;
2174
+ align-items: stretch;
2175
+ justify-content: center;
2176
+ width: 100%; }
2696
2177
 
2697
- .tabulator-cell:not(:first-child) {
2698
- border-left: 1px solid !important;
2699
- border-color: rgba(0, 0, 0, 0.06) !important; }
2178
+ .dashboard-tile-response-container .splitter-layout,
2179
+ .dashboard-tile-response-container .layout-pane,
2180
+ .dashboard-tile-response-container .dashboard-tile-split-pane-container {
2181
+ background: inherit; }
2700
2182
 
2701
- .react-autoql-table .tabulator-tableHolder {
2702
- max-height: calc(100% - 38px) !important;
2703
- background-color: inherit; }
2183
+ .notification-rule-outer-container {
2184
+ position: relative;
2185
+ border: 1px solid transparent;
2186
+ border-radius: 4px;
2187
+ padding-bottom: 5px; }
2704
2188
 
2705
- .react-autoql-table.tabulator
2706
- .tabulator-header
2707
- .tabulator-col
2708
- .tabulator-col-content {
2709
- padding: 8px 5px; }
2189
+ .expression-error-message {
2190
+ padding-left: 5px; }
2710
2191
 
2711
- .react-autoql-table.tabulator
2712
- .tabulator-header
2713
- .tabulator-col
2714
- .tabulator-col-content
2715
- .tabulator-arrow {
2716
- opacity: 0;
2717
- border-left: 4px solid transparent !important;
2718
- border-right: 4px solid transparent !important;
2719
- right: 4px;
2720
- top: calc(50% - 3px); }
2192
+ .data-alerts-container.read-only .react-autoql-notification-group-container {
2193
+ border: none; }
2721
2194
 
2722
- .react-autoql-table.tabulator
2723
- .tabulator-header
2724
- .tabulator-col:hover
2725
- .tabulator-col-content
2726
- .tabulator-arrow {
2727
- opacity: 1 !important; }
2195
+ .notification-rule-add-btn-outer,
2196
+ .notification-rule-validate-btn-outer {
2197
+ text-align: center;
2198
+ border-style: dashed !important;
2199
+ height: 38px;
2200
+ line-height: 25px;
2201
+ margin: 0 !important;
2202
+ overflow: hidden; }
2728
2203
 
2729
- .react-autoql-table.tabulator
2730
- .tabulator-header
2731
- .tabulator-col.tabulator-sortable[aria-sort='desc']
2732
- .tabulator-col-content
2733
- .tabulator-arrow {
2734
- border-top: 4px solid rgba(0, 0, 0, 0.2) !important; }
2204
+ .notification-rule-outer-container {
2205
+ position: relative;
2206
+ border: 1px solid transparent;
2207
+ border-radius: 4px; }
2208
+ .notification-rule-outer-container.outlined {
2209
+ border-color: rgba(0, 0, 0, 0.15);
2210
+ padding: 0 20px;
2211
+ padding-bottom: 12px; }
2735
2212
 
2736
- .react-autoql-table.tabulator
2737
- .tabulator-header
2738
- .tabulator-col.tabulator-sortable[aria-sort='asc']
2739
- .tabulator-col-content
2740
- .tabulator-arrow,
2741
- .react-autoql-table.tabulator
2742
- .tabulator-header
2743
- .tabulator-col.tabulator-sortable[aria-sort='none']
2744
- .tabulator-col-content
2745
- .tabulator-arrow {
2746
- border-bottom: 4px solid rgba(0, 0, 0, 0.2) !important; }
2213
+ .notification-outer-all-any {
2214
+ position: absolute;
2215
+ left: 0;
2216
+ top: 50%; }
2747
2217
 
2748
- .react-autoql-table .tabulator-tableHolder::-webkit-scrollbar {
2749
- display: unset;
2750
- opacity: 0;
2751
- background-color: transparent;
2752
- width: 7px;
2753
- height: 7px;
2754
- -webkit-transition: all 0.3s ease;
2755
- transition: all 0.3s ease; }
2218
+ .notification-first-group-btn-container {
2219
+ display: flex;
2220
+ justify-content: space-between; }
2756
2221
 
2757
- .react-autoql-table.tabulator .tabulator-tableHolder {
2758
- min-height: calc(100% - 40px) !important;
2759
- height: calc(100% - 40px) !important;
2760
- max-height: calc(100% - 40px) !important; }
2222
+ .data-alerts-container.read-only .react-autoql-notification-group-container {
2223
+ border: none; }
2761
2224
 
2762
- .react-autoql-table .tabulator-tableHolder:hover::-webkit-scrollbar-track,
2763
- .react-autoql-table .tabulator-tableHolder:hover::-webkit-scrollbar-track-piece,
2764
- .react-autoql-table .tabulator-tableHolder:hover::-webkit-scrollbar-corner {
2765
- background-color: transparent; }
2225
+ .notification-modal-content .react-autoql-step-content p {
2226
+ margin-bottom: 0.5em;
2227
+ margin-top: 0.5em;
2228
+ padding-left: 8px; }
2766
2229
 
2767
- .react-autoql-table .tabulator-tableHolder:hover::-webkit-scrollbar-thumb {
2768
- background-color: rgba(0, 0, 0, 0.2);
2769
- border-radius: 7px;
2770
- border: 0px; }
2230
+ .notification-modal-content .step-btn-container {
2231
+ text-align: right;
2232
+ display: flex;
2233
+ min-height: 50px; }
2771
2234
 
2772
- .react-autoql-table .tabulator-header-filter input {
2773
- border: 1px solid var(--react-autoql-border-color);
2774
- border-radius: 4px;
2775
- background: transparent;
2776
- padding: 4px 9px !important;
2777
- outline: none !important; }
2235
+ .expression-valid-checkmark.react-autoql-icon svg {
2236
+ color: var(--react-autoql-success-color); }
2778
2237
 
2779
- .react-autoql-table .tabulator-header-filter input:focus {
2780
- border: 1px solid #28a8e0; }
2238
+ .expression-invalid-message-container {
2239
+ max-width: 75%;
2240
+ float: left;
2241
+ text-align: left !important;
2242
+ display: flex;
2243
+ flex-direction: row;
2244
+ align-items: left;
2245
+ justify-content: left; }
2781
2246
 
2782
- /* These are necessary because we are always rendering the
2783
- filter (just display: none when not used) instead of re-rendering
2784
- the whole table when the filter button is clicked */
2785
- .react-autoql-table-container:not(.filtering)
2786
- .react-autoql-table
2787
- .tabulator-header-filter {
2788
- display: none; }
2247
+ .expression-invalid-message {
2248
+ color: var(--react-autoql-danger-color);
2249
+ display: 'inline-block'; }
2789
2250
 
2790
- .react-autoql-table-container:not(.filtering)
2791
- .react-autoql-table
2792
- .tabulator-col {
2793
- height: auto !important; }
2251
+ .react-autoql-btn {
2252
+ border-radius: 4px;
2253
+ cursor: pointer;
2254
+ outline: none !important;
2255
+ transition: all 0.2s ease;
2256
+ width: auto;
2257
+ display: inline-block; }
2794
2258
 
2795
- .tabulator-table .tabulator-row .tabulator-cell {
2796
- min-height: 38px; }
2259
+ .react-autoql-btn.disabled {
2260
+ opacity: 0.4;
2261
+ cursor: not-allowed;
2262
+ pointer-events: none; }
2797
2263
 
2798
- /* Center header titles */
2799
- .react-autoql-table .tabulator-header .tabulator-col {
2800
- text-align: center !important; }
2264
+ .react-autoql-btn.small {
2265
+ padding: 2px 8px;
2266
+ margin: 2px 3px; }
2801
2267
 
2802
- .react-autoql-table .tabulator-header .tabulator-col-title {
2803
- padding-left: 10px !important;
2804
- padding-right: 10px !important; }
2268
+ .react-autoql-btn.large {
2269
+ padding: 5px 16px;
2270
+ margin: 2px 5px; }
2805
2271
 
2806
- .filter-tag {
2807
- color: #2ecc40;
2808
- border: 1px solid;
2809
- padding: 2px 4px;
2810
- border-radius: 4px;
2811
- font-weight: 400;
2812
- font-size: 10px;
2813
- margin-right: 5px;
2814
- vertical-align: top;
2815
- line-height: 21px; }
2272
+ .react-autoql-btn.default {
2273
+ color: inherit;
2274
+ border: 1px solid var(--react-autoql-border-color);
2275
+ background: inherit; }
2276
+ .react-autoql-btn.default:hover {
2277
+ border-color: var(--react-autoql-accent-color);
2278
+ color: var(--react-autoql-accent-color); }
2816
2279
 
2817
- .comparison-value-positive {
2818
- color: #2ecc40; }
2280
+ .react-autoql-btn.primary {
2281
+ background: var(--react-autoql-accent-color);
2282
+ border: 1px solid var(--react-autoql-accent-color);
2283
+ color: white; }
2284
+ .react-autoql-btn.primary:hover {
2285
+ opacity: 0.8; }
2819
2286
 
2820
- .comparison-value-negative {
2821
- color: #e80000; }
2287
+ .react-autoql-btn.danger {
2288
+ color: var(--react-autoql-danger-color, #ca0b00);
2289
+ border: 1px solid var(--react-autoql-danger-color, #ca0b00);
2290
+ background: inherit; }
2291
+ .react-autoql-btn.danger:hover {
2292
+ background-color: var(--react-autoql-danger-color, #ca0b00);
2293
+ color: #fff; }
2822
2294
 
2823
2295
  .query-tips-page-container {
2824
2296
  height: 100%;
@@ -2922,80 +2394,474 @@ the whole table when the filter button is clicked */
2922
2394
  #react-paginate .pagination-next {
2923
2395
  right: 20px; }
2924
2396
 
2925
- .animated-item:nth-child(1) {
2926
- -webkit-animation-delay: 0.08s;
2927
- animation-delay: 0.08s; }
2397
+ .animated-item:nth-child(1) {
2398
+ -webkit-animation-delay: 0.08s;
2399
+ animation-delay: 0.08s; }
2400
+
2401
+ .animated-item:nth-child(2) {
2402
+ -webkit-animation-delay: 0.16s;
2403
+ animation-delay: 0.16s; }
2404
+
2405
+ .animated-item:nth-child(3) {
2406
+ -webkit-animation-delay: 0.24s;
2407
+ animation-delay: 0.24s; }
2408
+
2409
+ .animated-item:nth-child(4) {
2410
+ -webkit-animation-delay: 0.32s;
2411
+ animation-delay: 0.32s; }
2412
+
2413
+ .animated-item:nth-child(5) {
2414
+ -webkit-animation-delay: 0.4s;
2415
+ animation-delay: 0.4s; }
2416
+
2417
+ .animated-item:nth-child(6) {
2418
+ -webkit-animation-delay: 0.48s;
2419
+ animation-delay: 0.48s; }
2420
+
2421
+ .animated-item:nth-child(7) {
2422
+ -webkit-animation-delay: 0.56s;
2423
+ animation-delay: 0.56s; }
2424
+
2425
+ .animated-item:nth-child(8) {
2426
+ -webkit-animation-delay: 0.64s;
2427
+ animation-delay: 0.64s; }
2428
+
2429
+ .animated-item:nth-child(9) {
2430
+ -webkit-animation-delay: 0.72s;
2431
+ animation-delay: 0.72s; }
2432
+
2433
+ .animated-item:nth-child(10) {
2434
+ -webkit-animation-delay: 0.8s;
2435
+ animation-delay: 0.8s; }
2436
+
2437
+ .animated-item:nth-child(11) {
2438
+ -webkit-animation-delay: 0.88s;
2439
+ animation-delay: 0.88s; }
2440
+
2441
+ .animated-item:nth-child(12) {
2442
+ -webkit-animation-delay: 0.96s;
2443
+ animation-delay: 0.96s; }
2444
+
2445
+ .animated-item:nth-child(13) {
2446
+ -webkit-animation-delay: 1.04s;
2447
+ animation-delay: 1.04s; }
2448
+
2449
+ .animated-item:nth-child(14) {
2450
+ -webkit-animation-delay: 1.12s;
2451
+ animation-delay: 1.12s; }
2452
+
2453
+ .animated-item:nth-child(15) {
2454
+ -webkit-animation-delay: 1.2s;
2455
+ animation-delay: 1.2s; }
2456
+
2457
+ @-webkit-keyframes fadeIn {
2458
+ 0% {
2459
+ opacity: 0;
2460
+ top: 100px; }
2461
+ 75% {
2462
+ opacity: 0.5;
2463
+ top: 0px; }
2464
+ 100% {
2465
+ opacity: 1; } }
2466
+
2467
+ .chat-single-message-container {
2468
+ transition: background-color 0.2s ease;
2469
+ padding-top: 6px; }
2470
+ .chat-single-message-container:first-of-type {
2471
+ margin-top: 10px; }
2472
+ .chat-single-message-container .query-more-btn {
2473
+ transition: all 0.3s ease;
2474
+ font-size: 22px;
2475
+ padding: 13px;
2476
+ margin-bottom: 6px;
2477
+ height: 42px;
2478
+ opacity: 0;
2479
+ visibility: hidden;
2480
+ cursor: pointer; }
2481
+ .chat-single-message-container .query-more-btn:hover {
2482
+ opacity: 1; }
2483
+
2484
+ .chat-condition-item-container {
2485
+ position: absolute;
2486
+ background: inherit;
2487
+ bottom: 0px;
2488
+ padding: 5px;
2489
+ border-radius: 6px; }
2490
+
2491
+ .chat-condition-item {
2492
+ background: none !important;
2493
+ border: none;
2494
+ margin-top: -20px !important;
2495
+ padding: 0 !important;
2496
+ font-family: var(--react-autoql-font-family);
2497
+ color: var(--react-autoql-accent-color);
2498
+ text-decoration: underline;
2499
+ cursor: pointer; }
2500
+
2501
+ .chat-single-message-container.response {
2502
+ display: flex;
2503
+ justify-content: flex-start;
2504
+ padding-left: 20px;
2505
+ -webkit-animation: scale-up-bl 0.6s ease;
2506
+ animation: scale-up-bl 0.6s ease; }
2507
+
2508
+ .chat-single-message-container.request {
2509
+ display: flex;
2510
+ justify-content: flex-end;
2511
+ padding-right: 20px;
2512
+ -webkit-animation: scale-up-br 0.6s ease;
2513
+ animation: scale-up-br 0.6s ease; }
2514
+
2515
+ .chat-single-message-container .chat-message-bubble {
2516
+ position: relative;
2517
+ padding: 13px;
2518
+ border-radius: 10px;
2519
+ max-width: calc(100% - 20px);
2520
+ word-wrap: break-word;
2521
+ font-family: inherit;
2522
+ font-size: 14px;
2523
+ letter-spacing: 0.04em;
2524
+ box-sizing: border-box;
2525
+ /* make small margin on bottom because sometimes react
2526
+ custom scrollbar cuts off a pixel or 2 at the bottom */
2527
+ margin-bottom: 6px; }
2528
+
2529
+ .chat-single-message-container .chat-message-bubble.text {
2530
+ max-width: 85%; }
2531
+
2532
+ .chat-single-message-container .chat-message-bubble.full-width {
2533
+ width: calc(100% - 20px) !important;
2534
+ min-width: calc(100% - 20px) !important;
2535
+ max-width: calc(100% - 20px) !important; }
2536
+
2537
+ .chat-single-message-container.response .chat-message-bubble.active {
2538
+ border: 1px solid #c3c3c3; }
2539
+
2540
+ .chat-single-message-container.response .chat-message-bubble {
2541
+ background: var(--react-autoql-background-color-primary);
2542
+ color: var(--react-autoql-text-color-primary);
2543
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13); }
2544
+
2545
+ .chat-single-message-container.response .chat-message-bubble:not(.text) {
2546
+ min-width: 125px;
2547
+ padding-bottom: 15px; }
2548
+
2549
+ .chat-single-message-container.request .chat-message-bubble {
2550
+ background: var(--react-autoql-accent-color);
2551
+ color: white;
2552
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13); }
2553
+
2554
+ /* Increase height of message to include table filters,
2555
+ so we dont have to redraw the whole table */
2556
+ .chat-single-message-container.response.filtering-table {
2557
+ max-height: calc(85% + 35px) !important; }
2558
+
2559
+ .chat-message-toolbar,
2560
+ .chat-message-toolbar.autoql-options-toolbar {
2561
+ display: none;
2562
+ position: absolute;
2563
+ background: inherit;
2564
+ top: -31px;
2565
+ padding: 5px;
2566
+ border-radius: 6px;
2567
+ line-height: 28px;
2568
+ background: var(--react-autoql-background-color-primary);
2569
+ border: 1px solid var(--react-autoql-border-color);
2570
+ color: var(--react-autoql-accent-color); }
2571
+
2572
+ .chat-message-toolbar.right {
2573
+ right: -9px; }
2574
+
2575
+ .chat-message-toolbar.left {
2576
+ left: -9px; }
2577
+
2578
+ .chat-message-bubble:hover .chat-message-toolbar,
2579
+ .chat-message-bubble .chat-message-toolbar.active {
2580
+ display: block; }
2581
+
2582
+ .report-problem-text-area {
2583
+ border-radius: 4px;
2584
+ border: 1px solid rgba(0, 0, 0, 0.15);
2585
+ margin-top: 10px;
2586
+ padding: 5px 10px;
2587
+ outline: none !important; }
2588
+
2589
+ .data-limit-warning-icon {
2590
+ color: var(--react-autoql-warning-color) !important;
2591
+ position: absolute !important;
2592
+ bottom: 2px;
2593
+ right: 4px;
2594
+ font-size: 20px; }
2595
+
2596
+ .condition-info-icon-left-align {
2597
+ color: var(--react-autoql-accent-color) !important;
2598
+ position: absolute !important;
2599
+ bottom: 2px;
2600
+ right: 10px;
2601
+ font-size: 20px; }
2602
+
2603
+ .condition-info-icon {
2604
+ color: var(--react-autoql-accent-color) !important;
2605
+ position: absolute !important;
2606
+ bottom: 2px;
2607
+ right: 4px;
2608
+ font-size: 20px; }
2609
+
2610
+ .more-options-menu,
2611
+ .report-problem-menu {
2612
+ background: var(--react-autoql-background-color-primary);
2613
+ padding: 10px 0; }
2614
+ .more-options-menu span.react-autoql-icon svg,
2615
+ .report-problem-menu span.react-autoql-icon svg {
2616
+ margin-right: 3px; }
2617
+
2618
+ .interpretation-icon {
2619
+ vertical-align: top;
2620
+ height: 26px;
2621
+ margin: 0 3px;
2622
+ font-size: 18px; }
2623
+
2624
+ /* Chart icon styles */
2625
+ .chart-icon-svg-0,
2626
+ .react-autoql-icon-svg-0 {
2627
+ fill: currentColor; }
2928
2628
 
2929
- .animated-item:nth-child(2) {
2930
- -webkit-animation-delay: 0.16s;
2931
- animation-delay: 0.16s; }
2629
+ .hm0 {
2630
+ opacity: 0.5;
2631
+ fill: currentColor;
2632
+ enable-background: new; }
2932
2633
 
2933
- .animated-item:nth-child(3) {
2934
- -webkit-animation-delay: 0.24s;
2935
- animation-delay: 0.24s; }
2634
+ .hm1 {
2635
+ fill: currentColor; }
2936
2636
 
2937
- .animated-item:nth-child(4) {
2938
- -webkit-animation-delay: 0.32s;
2939
- animation-delay: 0.32s; }
2637
+ .hm2 {
2638
+ opacity: 0.15;
2639
+ fill: currentColor;
2640
+ enable-background: new; }
2940
2641
 
2941
- .animated-item:nth-child(5) {
2942
- -webkit-animation-delay: 0.4s;
2943
- animation-delay: 0.4s; }
2642
+ .hm3 {
2643
+ opacity: 0.6;
2644
+ fill: currentColor;
2645
+ enable-background: new; }
2944
2646
 
2945
- .animated-item:nth-child(6) {
2946
- -webkit-animation-delay: 0.48s;
2947
- animation-delay: 0.48s; }
2647
+ .hm4 {
2648
+ opacity: 0.65;
2649
+ fill: currentColor;
2650
+ enable-background: new; }
2948
2651
 
2949
- .animated-item:nth-child(7) {
2950
- -webkit-animation-delay: 0.56s;
2951
- animation-delay: 0.56s; }
2652
+ .hm5 {
2653
+ fill: currentColor; }
2952
2654
 
2953
- .animated-item:nth-child(8) {
2954
- -webkit-animation-delay: 0.64s;
2955
- animation-delay: 0.64s; }
2655
+ .hm6 {
2656
+ fill: currentColor; }
2956
2657
 
2957
- .animated-item:nth-child(9) {
2958
- -webkit-animation-delay: 0.72s;
2959
- animation-delay: 0.72s; }
2658
+ /* animations */
2659
+ @-webkit-keyframes scale-up-br {
2660
+ 0% {
2661
+ transform: scale(0.5);
2662
+ transform-origin: 100% 100%; }
2663
+ 100% {
2664
+ transform: scale(1);
2665
+ transform-origin: 100% 100%; } }
2666
+ @keyframes scale-up-br {
2667
+ 0% {
2668
+ transform: scale(0.5);
2669
+ transform-origin: 100% 100%; }
2670
+ 100% {
2671
+ transform: scale(1);
2672
+ transform-origin: 100% 100%; } }
2960
2673
 
2961
- .animated-item:nth-child(10) {
2962
- -webkit-animation-delay: 0.8s;
2963
- animation-delay: 0.8s; }
2674
+ @-webkit-keyframes scale-up-bl {
2675
+ 0% {
2676
+ transform: scale(0.5);
2677
+ transform-origin: 0% 100%; }
2678
+ 100% {
2679
+ transform: scale(1);
2680
+ transform-origin: 0% 100%; } }
2964
2681
 
2965
- .animated-item:nth-child(11) {
2966
- -webkit-animation-delay: 0.88s;
2967
- animation-delay: 0.88s; }
2682
+ @keyframes scale-up-bl {
2683
+ 0% {
2684
+ transform: scale(0.5);
2685
+ transform-origin: 0% 100%; }
2686
+ 100% {
2687
+ transform: scale(1);
2688
+ transform-origin: 0% 100%; } }
2968
2689
 
2969
- .animated-item:nth-child(12) {
2970
- -webkit-animation-delay: 0.96s;
2971
- animation-delay: 0.96s; }
2690
+ .ReactModal__Overlay {
2691
+ background-color: transparent !important;
2692
+ transition: background-color 0.2s ease-in-out;
2693
+ z-index: 9999; }
2972
2694
 
2973
- .animated-item:nth-child(13) {
2974
- -webkit-animation-delay: 1.04s;
2975
- animation-delay: 1.04s; }
2695
+ .ReactModal__Overlay--after-open {
2696
+ background-color: rgba(0, 0, 0, 0.25) !important; }
2976
2697
 
2977
- .animated-item:nth-child(14) {
2978
- -webkit-animation-delay: 1.12s;
2979
- animation-delay: 1.12s; }
2698
+ .ReactModal__Overlay--before-close {
2699
+ background-color: transparent !important; }
2980
2700
 
2981
- .animated-item:nth-child(15) {
2982
- -webkit-animation-delay: 1.2s;
2983
- animation-delay: 1.2s; }
2701
+ .ReactModal__Content {
2702
+ display: flex;
2703
+ flex-direction: column;
2704
+ transform: scale(0);
2705
+ transition: all 0.2s ease-in-out;
2706
+ color: var(--react-autoql-text-color-primary);
2707
+ border: 1px solid var(--react-autoql-border-color) !important;
2708
+ background: var(--react-autoql-background-color-primary) !important;
2709
+ box-shadow: 0 0 14px 1px rgba(0, 0, 0, 0.15);
2710
+ padding: 0 !important;
2711
+ margin: auto auto;
2712
+ max-width: 90vw;
2713
+ max-height: calc(100vh - 90px); }
2714
+ .ReactModal__Content input.react-autoql-input,
2715
+ .ReactModal__Content textarea.react-autoql-input,
2716
+ .ReactModal__Content textarea {
2717
+ border-color: var(--react-autoql-border-color);
2718
+ color: var(--react-autoql-text-color-primary);
2719
+ background: var(--react-autoql-background-color-primary, white); }
2720
+ .ReactModal__Content input.react-autoql-input::-moz-placeholder, .ReactModal__Content textarea.react-autoql-input::-moz-placeholder, .ReactModal__Content textarea::-moz-placeholder {
2721
+ color: var(--react-autoql-text-color-placeholder); }
2722
+ .ReactModal__Content input.react-autoql-input:-ms-input-placeholder, .ReactModal__Content textarea.react-autoql-input:-ms-input-placeholder, .ReactModal__Content textarea:-ms-input-placeholder {
2723
+ color: var(--react-autoql-text-color-placeholder); }
2724
+ .ReactModal__Content input.react-autoql-input::placeholder,
2725
+ .ReactModal__Content textarea.react-autoql-input::placeholder,
2726
+ .ReactModal__Content textarea::placeholder {
2727
+ color: var(--react-autoql-text-color-placeholder); }
2984
2728
 
2985
- @-webkit-keyframes fadeIn {
2986
- 0% {
2987
- opacity: 0;
2988
- top: 100px; }
2989
- 75% {
2990
- opacity: 0.5;
2991
- top: 0px; }
2992
- 100% {
2993
- opacity: 1; } }
2729
+ .ReactModal__Overlay--after-open .ReactModal__Content {
2730
+ transform: scale(1); }
2731
+
2732
+ .ReactModal__Overlay--before-close .ReactModal__Content {
2733
+ transform: scale(0); }
2734
+
2735
+ .react-autoql-modal-header {
2736
+ position: relative;
2737
+ text-align: center;
2738
+ flex: 0 0 52px;
2739
+ border-bottom: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05));
2740
+ padding: 14px 60px;
2741
+ font-size: 16px; }
2742
+
2743
+ .react-autoql-modal-footer {
2744
+ position: relative;
2745
+ flex: 0 0 52px;
2746
+ border-top: 1px solid rgba(0, 0, 0, 0.05);
2747
+ text-align: right;
2748
+ padding: 8px 10px; }
2749
+
2750
+ .react-autoql-modal-body {
2751
+ display: flex;
2752
+ flex-direction: column;
2753
+ padding: 25px;
2754
+ flex: 1;
2755
+ overflow: hidden; }
2756
+ .react-autoql-modal-body h3 {
2757
+ color: var(--react-autoql-text-color-primary); }
2758
+
2759
+ .react-autoql-modal-close-btn {
2760
+ position: absolute !important;
2761
+ top: 10px;
2762
+ right: 18px;
2763
+ font-size: 22px;
2764
+ opacity: 0.6 !important;
2765
+ cursor: pointer; }
2766
+
2767
+ .react-autoql-modal-close-btn:hover {
2768
+ opacity: 1 !important; }
2769
+
2770
+ .react-autoql-cascader {
2771
+ position: relative;
2772
+ white-space: nowrap;
2773
+ overflow: hidden;
2774
+ min-width: 300px; }
2775
+ .react-autoql-cascader .options-container {
2776
+ transition: max-width 0.3s ease;
2777
+ display: inline-block;
2778
+ vertical-align: top;
2779
+ padding: 0 10px;
2780
+ margin: 10px 0;
2781
+ width: 100%;
2782
+ max-width: calc(100% - 20px);
2783
+ white-space: pre-wrap; }
2784
+ .react-autoql-cascader .options-container.hidden {
2785
+ max-width: 0; }
2786
+ .react-autoql-cascader .options-container.hidden span {
2787
+ white-space: nowrap; }
2788
+ .react-autoql-cascader .options-container.hidden .option {
2789
+ opacity: 0;
2790
+ pointer-events: none; }
2791
+ .react-autoql-cascader .options-container .options-title {
2792
+ padding: 4px;
2793
+ padding-left: 10px;
2794
+ font-weight: 600; }
2795
+ .react-autoql-cascader .options-container .cascader-back-arrow {
2796
+ position: absolute;
2797
+ cursor: pointer;
2798
+ top: 15px;
2799
+ left: 0; }
2800
+ .react-autoql-cascader .options-container .cascader-back-arrow:hover {
2801
+ opacity: 0.8; }
2802
+ .react-autoql-cascader .options-container .option {
2803
+ cursor: pointer;
2804
+ padding: 4px;
2805
+ display: flex;
2806
+ justify-content: space-between;
2807
+ border-radius: 2px;
2808
+ padding-left: 10px; }
2809
+ .react-autoql-cascader .options-container .option .option-arrow {
2810
+ opacity: 0.7; }
2811
+ .react-autoql-cascader .options-container .option .option-execute-icon {
2812
+ opacity: 0;
2813
+ color: #fff;
2814
+ font-size: 16px;
2815
+ vertical-align: middle; }
2816
+ .react-autoql-cascader .options-container .option:hover, .react-autoql-cascader .options-container .option.active {
2817
+ background-color: var(--react-autoql-accent-color, #26a7df);
2818
+ color: #fff; }
2819
+ .react-autoql-cascader .options-container .option:hover .option-execute-icon, .react-autoql-cascader .options-container .option.active .option-execute-icon {
2820
+ opacity: 1; }
2821
+ .react-autoql-cascader .options-container:not(:last-child) {
2822
+ border-right: 1px solid #d3d3d352; }
2823
+
2824
+ .react-autoql-filter-locking-title-container {
2825
+ display: inline-block;
2826
+ width: 100%;
2827
+ padding-top: 4px;
2828
+ padding-left: 6px; }
2829
+ .react-autoql-filter-locking-title-container h3 {
2830
+ width: 95%;
2831
+ float: left;
2832
+ color: var(--react-autoql-text-color-primary);
2833
+ margin-bottom: 0; }
2834
+ .react-autoql-filter-locking-title-container h3 span {
2835
+ color: var(--react-autoql-accent-color); }
2836
+ .react-autoql-filter-locking-title-container button {
2837
+ width: 5%;
2838
+ float: right; }
2839
+ .react-autoql-filter-locking-title-container button :hover {
2840
+ cursor: pointer;
2841
+ color: var(--react-autoql-hover-color); }
2842
+
2843
+ .react-autoql-filter-locking-empty-list {
2844
+ color: var(--react-autoql-text-color-primary);
2845
+ background-color: var(--react-autoql-background-color-secondary);
2846
+ border-radius: 5px;
2847
+ padding: 2px 6px 2px 6px;
2848
+ margin: 4px 10px 4px 10px;
2849
+ display: inline-block;
2850
+ position: absolute;
2851
+ top: 20px;
2852
+ box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.4);
2853
+ z-index: 999999; }
2854
+ .react-autoql-filter-locking-empty-list span {
2855
+ color: var(--react-autoql-accent-color); }
2856
+ .react-autoql-filter-locking-empty-list p {
2857
+ width: 96%;
2858
+ float: right;
2859
+ margin-bottom: 0; }
2994
2860
 
2995
2861
  .react-autoql-condition-locking-input {
2996
2862
  padding: 5px;
2997
2863
  padding-left: 20px;
2998
- margin: 10px;
2864
+ margin: 8px;
2999
2865
  height: 32px;
3000
2866
  box-sizing: border-box;
3001
2867
  border-radius: 24px;
@@ -3003,13 +2869,16 @@ the whole table when the filter button is clicked */
3003
2869
  font-family: inherit;
3004
2870
  letter-spacing: 0.04em;
3005
2871
  outline: none !important;
3006
- width: calc(100% - 60px);
2872
+ width: calc(100% - 20px);
3007
2873
  font-family: inherit;
3008
2874
  /* Default styles outside of data messenger */
3009
2875
  border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
3010
2876
  background: var(--react-autoql-background-color-primary);
3011
2877
  color: #5d5d5d; }
3012
2878
 
2879
+ .react-autoql-condition-locking-input:hover {
2880
+ box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1); }
2881
+
3013
2882
  .condition-table {
3014
2883
  min-width: 95%;
3015
2884
  margin: 10px auto; }
@@ -3022,6 +2891,27 @@ the whole table when the filter button is clicked */
3022
2891
  padding: 4px;
3023
2892
  margin: 0 10px 0 10px;
3024
2893
  font-weight: 800; }
2894
+ .condition-table th span {
2895
+ color: var(--react-autoql-accent-color); }
2896
+
2897
+ .condition-table .condition-table-list-item {
2898
+ text-overflow: ellipsis;
2899
+ white-space: nowrap;
2900
+ overflow: hidden; }
2901
+
2902
+ .react-autoql-condition-lock-menu-footer {
2903
+ bottom: 0;
2904
+ right: 0; }
2905
+ .react-autoql-condition-lock-menu-footer button {
2906
+ float: right;
2907
+ margin: 6px !important; }
2908
+
2909
+ .react-autoql-condition-lock-menu-footer {
2910
+ bottom: 0;
2911
+ right: 0; }
2912
+ .react-autoql-condition-lock-menu-footer button {
2913
+ float: right;
2914
+ margin: 6px !important; }
3025
2915
 
3026
2916
  .react-autoql-accept-conditions-button {
3027
2917
  text-align: right;
@@ -3049,7 +2939,17 @@ the whole table when the filter button is clicked */
3049
2939
 
3050
2940
  .condition-list {
3051
2941
  padding: 0;
3052
- margin: 0 auto; }
2942
+ margin: 0 auto;
2943
+ overflow-y: scroll;
2944
+ min-height: 182px; }
2945
+
2946
+ .condition-list-loading-container {
2947
+ display: flex;
2948
+ height: 180px;
2949
+ width: 100%;
2950
+ padding: 20px;
2951
+ align-items: center;
2952
+ justify-content: center; }
3053
2953
 
3054
2954
  .condition-list-item {
3055
2955
  cursor: pointer;
@@ -3065,8 +2965,11 @@ the whole table when the filter button is clicked */
3065
2965
 
3066
2966
  .empty-condition-list {
3067
2967
  text-align: center;
3068
- padding: 4px;
3069
- margin: 0 20px 0 20px; }
2968
+ padding: 20px;
2969
+ height: 140px; }
2970
+ .empty-condition-list p {
2971
+ margin-top: 20px !important;
2972
+ vertical-align: middle; }
3070
2973
 
3071
2974
  .autoql-close-button {
3072
2975
  background-color: inherit;
@@ -3080,71 +2983,316 @@ the whole table when the filter button is clicked */
3080
2983
  .react-tiny-popover-container {
3081
2984
  background: var(--react-autoql-background-color-primary); }
3082
2985
 
3083
- .autoql-condition-locking-menu-container .react-autosuggest__container {
3084
- flex-grow: 1;
3085
- display: inline;
3086
- width: 90%;
3087
- height: 100%; }
2986
+ .autoql-condition-locking-menu-container .react-autosuggest__container {
2987
+ flex-grow: 1;
2988
+ display: inline;
2989
+ width: 90%;
2990
+ height: 100%; }
2991
+
2992
+ .autoql-condition-locking-menu-container
2993
+ .react-autosuggest__suggestions-container--open {
2994
+ background-color: var(--react-autoql-background-color-primary);
2995
+ border: 1px solid var(--react-autoql-border-color);
2996
+ color: var(--react-autoql-text-color-primary);
2997
+ position: absolute;
2998
+ top: unset;
2999
+ bottom: unset;
3000
+ overflow-y: scroll !important;
3001
+ padding-top: 5px;
3002
+ padding-bottom: 5px;
3003
+ display: block;
3004
+ font-family: inherit;
3005
+ font-size: 15px;
3006
+ font-weight: normal;
3007
+ z-index: 2;
3008
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
3009
+ text-align: left;
3010
+ border-radius: 4px;
3011
+ margin: -8px auto;
3012
+ height: auto;
3013
+ max-height: 80vh;
3014
+ overflow-y: scroll !important;
3015
+ transform: translateX(4%);
3016
+ width: 92% !important; }
3017
+
3018
+ .autoql-condition-locking-menu-list {
3019
+ table-layout: fixed;
3020
+ width: 100%; }
3021
+
3022
+ .autoql-condition-locking-menu-container .react-autosuggest__suggestion {
3023
+ color: var(--react-autoql-text-color-primary); }
3024
+
3025
+ .autoql-condition-locking-menu-container input::-moz-placeholder {
3026
+ opacity: 0.5; }
3027
+
3028
+ .autoql-condition-locking-menu-container input:-ms-input-placeholder {
3029
+ opacity: 0.5; }
3030
+
3031
+ .autoql-condition-locking-menu-container input::placeholder {
3032
+ opacity: 0.5; }
3033
+
3034
+ .autoql-condition-locking-menu-container .react-autosuggest__suggestions-list {
3035
+ margin: 0;
3036
+ padding: 0;
3037
+ list-style-type: none; }
3038
+
3039
+ .autoql-condition-locking-menu-container .react-autosuggest__suggestion {
3040
+ cursor: pointer;
3041
+ padding: 2px;
3042
+ padding-left: 18px;
3043
+ letter-spacing: 0.05em;
3044
+ line-height: 22.5px; }
3045
+
3046
+ .autoql-condition-locking-menu-container
3047
+ .react-autosuggest__suggestion--highlighted {
3048
+ background-color: rgba(0, 0, 0, 0.1) !important; }
3049
+
3050
+ .autoql-condition-locking-menu-container .react-autosuggest__section-title {
3051
+ padding: 10px 0 0 10px;
3052
+ font-size: 12px;
3053
+ color: #777; }
3054
+
3055
+ .react-autoql-filter-setting-info-card {
3056
+ color: var(--react-autoql-text-color-primary);
3057
+ background-color: var(--react-autoql-background-color-secondary);
3058
+ border-radius: 5px;
3059
+ padding: 2px 6px 2px 6px;
3060
+ margin: 4px 10px 4px 10px;
3061
+ display: inline-block;
3062
+ position: absolute;
3063
+ top: 40px;
3064
+ box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.4);
3065
+ z-index: 9999; }
3066
+ .react-autoql-filter-setting-info-card span {
3067
+ color: var(--react-autoql-accent-color); }
3068
+ .react-autoql-filter-setting-info-card p {
3069
+ margin-bottom: 0 !important; }
3070
+ .react-autoql-filter-setting-info-card p span {
3071
+ color: var(--react-autoql-accent-color); }
3072
+
3073
+ #react-autoql-condition-show-message {
3074
+ visibility: hidden;
3075
+ min-width: 200px;
3076
+ line-height: 1 !important;
3077
+ font-size: 14px !important;
3078
+ background-color: var(--react-autoql-background-color-secondary);
3079
+ text-align: center;
3080
+ border-radius: 4px;
3081
+ padding: 6px;
3082
+ position: fixed;
3083
+ top: 20px;
3084
+ display: block;
3085
+ z-index: 999999999;
3086
+ transform: translateX(85%);
3087
+ box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.4); }
3088
+ #react-autoql-condition-show-message span {
3089
+ color: var(--react-autoql-accent-color); }
3090
+
3091
+ #react-autoql-condition-show-message.show {
3092
+ visibility: visible;
3093
+ -webkit-animation: snackbarFadein 1s, snackbarFadeout 1s 2s;
3094
+ animation: snackbarFadein 1s, snackbarFadeout 1s 2s; }
3095
+
3096
+ @-webkit-keyframes snackbarFadein {
3097
+ from {
3098
+ top: 0;
3099
+ opacity: 0; }
3100
+ to {
3101
+ top: 20px;
3102
+ opacity: 1; } }
3103
+
3104
+ @keyframes snackbarFadein {
3105
+ from {
3106
+ top: 0;
3107
+ opacity: 0; }
3108
+ to {
3109
+ top: 20px;
3110
+ opacity: 1; } }
3111
+
3112
+ @-webkit-keyframes snackbarFadeout {
3113
+ from {
3114
+ top: 20px;
3115
+ opacity: 1; }
3116
+ to {
3117
+ top: 0;
3118
+ opacity: 0; } }
3119
+
3120
+ @keyframes snackbarFadeout {
3121
+ from {
3122
+ top: 20px;
3123
+ opacity: 1; }
3124
+ to {
3125
+ top: 0;
3126
+ opacity: 0; } }
3127
+
3128
+ .react-autoql-table-container {
3129
+ height: 100%;
3130
+ max-width: 100%;
3131
+ background-color: inherit; }
3132
+
3133
+ .react-autoql-table {
3134
+ margin-bottom: 0; }
3135
+
3136
+ /* tabulator */
3137
+ .react-autoql-table.tabulator,
3138
+ .react-autoql-table.tabulator .tabulator-row,
3139
+ .react-autoql-table.tabulator .tabulator-header,
3140
+ .react-autoql-table.tabulator .tabulator-headers,
3141
+ .react-autoql-table.tabulator .tabulator-header .tabulator-col,
3142
+ .react-autoql-table.tabulator .tabulator-tableHolder .tabulator-table {
3143
+ background-color: inherit; }
3144
+
3145
+ .react-autoql-table-container.supports-drilldown
3146
+ .react-autoql-table.tabulator
3147
+ .tabulator-row.tabulator-unselectable:hover {
3148
+ cursor: pointer !important;
3149
+ background-color: var(--react-autoql-hover-color) !important; }
3150
+
3151
+ .react-autoql-table.tabulator
3152
+ .tabulator-header
3153
+ .tabulator-col.tabulator-sortable:hover {
3154
+ background-color: var(--react-autoql-hover-color) !important; }
3155
+
3156
+ .react-autoql-table.tabulator .tabulator-header .tabulator-col,
3157
+ .react-autoql-table.tabulator .tabulator-cell {
3158
+ border-color: var(--react-autoql-border-color); }
3159
+
3160
+ .react-autoql-table.tabulator .tabulator-header {
3161
+ border-bottom: 2px solid var(--react-autoql-border-color); }
3162
+
3163
+ .react-autoql-table.tabulator {
3164
+ background-color: inherit;
3165
+ height: 100%; }
3166
+
3167
+ .react-autoql-table .tabulator-row {
3168
+ /* user-select: none; This breaks copy/paste */
3169
+ border-bottom: 1px solid var(--react-autoql-border-color); }
3170
+
3171
+ .tabulator-cell:not(:first-child) {
3172
+ border-left: 1px solid !important;
3173
+ border-color: rgba(0, 0, 0, 0.06) !important; }
3174
+
3175
+ .react-autoql-table .tabulator-tableHolder {
3176
+ max-height: calc(100% - 38px) !important;
3177
+ background-color: inherit; }
3178
+
3179
+ .react-autoql-table.tabulator
3180
+ .tabulator-header
3181
+ .tabulator-col
3182
+ .tabulator-col-content {
3183
+ padding: 8px 5px; }
3184
+
3185
+ .react-autoql-table.tabulator
3186
+ .tabulator-header
3187
+ .tabulator-col
3188
+ .tabulator-col-content
3189
+ .tabulator-arrow {
3190
+ opacity: 0;
3191
+ border-left: 4px solid transparent !important;
3192
+ border-right: 4px solid transparent !important;
3193
+ right: 4px;
3194
+ top: calc(50% - 3px); }
3195
+
3196
+ .react-autoql-table.tabulator
3197
+ .tabulator-header
3198
+ .tabulator-col:hover
3199
+ .tabulator-col-content
3200
+ .tabulator-arrow {
3201
+ opacity: 1 !important; }
3202
+
3203
+ .react-autoql-table.tabulator
3204
+ .tabulator-header
3205
+ .tabulator-col.tabulator-sortable[aria-sort='desc']
3206
+ .tabulator-col-content
3207
+ .tabulator-arrow {
3208
+ border-top: 4px solid rgba(0, 0, 0, 0.2) !important; }
3209
+
3210
+ .react-autoql-table.tabulator
3211
+ .tabulator-header
3212
+ .tabulator-col.tabulator-sortable[aria-sort='asc']
3213
+ .tabulator-col-content
3214
+ .tabulator-arrow,
3215
+ .react-autoql-table.tabulator
3216
+ .tabulator-header
3217
+ .tabulator-col.tabulator-sortable[aria-sort='none']
3218
+ .tabulator-col-content
3219
+ .tabulator-arrow {
3220
+ border-bottom: 4px solid rgba(0, 0, 0, 0.2) !important; }
3221
+
3222
+ .react-autoql-table .tabulator-tableHolder::-webkit-scrollbar {
3223
+ display: unset;
3224
+ opacity: 0;
3225
+ background-color: transparent;
3226
+ width: 7px;
3227
+ height: 7px;
3228
+ -webkit-transition: all 0.3s ease;
3229
+ transition: all 0.3s ease; }
3230
+
3231
+ .react-autoql-table.tabulator .tabulator-tableHolder {
3232
+ min-height: calc(100% - 40px) !important;
3233
+ height: calc(100% - 40px) !important;
3234
+ max-height: calc(100% - 40px) !important; }
3235
+
3236
+ .react-autoql-table .tabulator-tableHolder:hover::-webkit-scrollbar-track,
3237
+ .react-autoql-table .tabulator-tableHolder:hover::-webkit-scrollbar-track-piece,
3238
+ .react-autoql-table .tabulator-tableHolder:hover::-webkit-scrollbar-corner {
3239
+ background-color: transparent; }
3088
3240
 
3089
- .autoql-condition-locking-menu-container
3090
- .react-autosuggest__suggestions-container--open {
3091
- position: absolute;
3092
- overflow-y: scroll !important;
3093
- padding-top: 5px;
3094
- padding-bottom: 5px;
3095
- display: block;
3096
- font-family: inherit;
3097
- font-size: 15px;
3098
- font-weight: normal;
3099
- z-index: 2;
3100
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
3101
- text-align: left;
3102
- width: 95%;
3103
- top: 35px;
3104
- border-radius: 4px;
3105
- margin: 10px auto;
3106
- height: auto;
3107
- max-height: 50vh;
3108
- overflow-y: auto; }
3241
+ .react-autoql-table .tabulator-tableHolder:hover::-webkit-scrollbar-thumb {
3242
+ background-color: rgba(0, 0, 0, 0.2);
3243
+ border-radius: 7px;
3244
+ border: 0px; }
3109
3245
 
3110
- .autoql-condition-locking-menu-container
3111
- .react-autosuggest__suggestions-container--open {
3112
- background-color: var(--react-autoql-background-color-primary);
3246
+ .react-autoql-table .tabulator-header-filter input {
3113
3247
  border: 1px solid var(--react-autoql-border-color);
3114
- color: var(--react-autoql-text-color-primary); }
3248
+ border-radius: 4px;
3249
+ background: transparent;
3250
+ padding: 4px 9px !important;
3251
+ outline: none !important; }
3115
3252
 
3116
- .autoql-condition-locking-menu-container .react-autosuggest__suggestion {
3117
- color: var(--react-autoql-text-color-primary); }
3253
+ .react-autoql-table .tabulator-header-filter input:focus {
3254
+ border: 1px solid #28a8e0; }
3118
3255
 
3119
- .autoql-condition-locking-menu-container input::-moz-placeholder {
3120
- opacity: 0.5; }
3256
+ /* These are necessary because we are always rendering the
3257
+ filter (just display: none when not used) instead of re-rendering
3258
+ the whole table when the filter button is clicked */
3259
+ .react-autoql-table-container:not(.filtering)
3260
+ .react-autoql-table
3261
+ .tabulator-header-filter {
3262
+ display: none; }
3121
3263
 
3122
- .autoql-condition-locking-menu-container input:-ms-input-placeholder {
3123
- opacity: 0.5; }
3264
+ .react-autoql-table-container:not(.filtering)
3265
+ .react-autoql-table
3266
+ .tabulator-col {
3267
+ height: auto !important; }
3124
3268
 
3125
- .autoql-condition-locking-menu-container input::placeholder {
3126
- opacity: 0.5; }
3269
+ .tabulator-table .tabulator-row .tabulator-cell {
3270
+ min-height: 38px; }
3127
3271
 
3128
- .autoql-condition-locking-menu-container .react-autosuggest__suggestions-list {
3129
- margin: 0;
3130
- padding: 0;
3131
- list-style-type: none; }
3272
+ /* Center header titles */
3273
+ .react-autoql-table .tabulator-header .tabulator-col {
3274
+ text-align: center !important; }
3132
3275
 
3133
- .autoql-condition-locking-menu-container .react-autosuggest__suggestion {
3134
- cursor: pointer;
3135
- padding: 2px;
3136
- padding-left: 18px;
3137
- letter-spacing: 0.05em;
3138
- line-height: 22.5px; }
3276
+ .react-autoql-table .tabulator-header .tabulator-col-title {
3277
+ padding-left: 10px !important;
3278
+ padding-right: 10px !important; }
3139
3279
 
3140
- .autoql-condition-locking-menu-container
3141
- .react-autosuggest__suggestion--highlighted {
3142
- background-color: rgba(0, 0, 0, 0.1) !important; }
3280
+ .filter-tag {
3281
+ color: #2ecc40;
3282
+ border: 1px solid;
3283
+ padding: 2px 4px;
3284
+ border-radius: 4px;
3285
+ font-weight: 400;
3286
+ font-size: 10px;
3287
+ margin-right: 5px;
3288
+ vertical-align: top;
3289
+ line-height: 21px; }
3143
3290
 
3144
- .autoql-condition-locking-menu-container .react-autosuggest__section-title {
3145
- padding: 10px 0 0 10px;
3146
- font-size: 12px;
3147
- color: #777; }
3291
+ .comparison-value-positive {
3292
+ color: #2ecc40; }
3293
+
3294
+ .comparison-value-negative {
3295
+ color: #e80000; }
3148
3296
 
3149
3297
  .autoql-options-toolbar {
3150
3298
  position: absolute;
@@ -3280,57 +3428,36 @@ the whole table when the filter button is clicked */
3280
3428
  background: var(--react-autoql-background-color-primary);
3281
3429
  padding: 5px; }
3282
3430
 
3431
+ .viz-toolbar {
3432
+ position: absolute;
3433
+ background: inherit;
3434
+ padding: 5px;
3435
+ border-radius: 6px;
3436
+ line-height: 28px;
3437
+ border: 1px solid #d3d3d352; }
3438
+ .viz-toolbar.vertical .react-autoql-toolbar-btn {
3439
+ display: block; }
3283
3440
 
3284
- .react-autoql-input-container {
3285
- position: relative;
3286
- margin: 2px 5px;
3287
- display: inline-block; }
3288
- .react-autoql-input-container .react-autoql-input {
3289
- border: 1px solid rgba(0, 0, 0, 0.1);
3290
- border-radius: 4px;
3291
- line-height: 32px;
3292
- min-height: 34px;
3293
- padding: 0 10px;
3294
- width: 100%;
3295
- outline: none !important;
3296
- transition: all 0.2s ease;
3297
- transition-property: border-color, color, opacity; }
3298
- .react-autoql-input-container .react-autoql-input.with-icon {
3299
- padding-left: 38px; }
3300
- .react-autoql-input-container .react-autoql-input::-moz-placeholder {
3301
- /* Chrome, Firefox, Opera, Safari 10.1+ */
3302
- color: rgba(0, 0, 0, 0.2);
3303
- opacity: 1;
3304
- /* Firefox */
3305
- font-style: italic; }
3306
- .react-autoql-input-container .react-autoql-input:-ms-input-placeholder {
3307
- /* Chrome, Firefox, Opera, Safari 10.1+ */
3308
- color: rgba(0, 0, 0, 0.2);
3309
- opacity: 1;
3310
- /* Firefox */
3311
- font-style: italic; }
3312
- .react-autoql-input-container .react-autoql-input::placeholder {
3313
- /* Chrome, Firefox, Opera, Safari 10.1+ */
3314
- color: rgba(0, 0, 0, 0.2);
3315
- opacity: 1;
3316
- /* Firefox */
3317
- font-style: italic; }
3318
- .react-autoql-input-container .react-autoql-input-icon {
3319
- position: absolute;
3320
- left: 12px;
3321
- top: 8px;
3322
- opacity: 0.4;
3323
- transition: all 0.2s ease; }
3324
- .react-autoql-input-container .react-autoql-input-icon span.react-autoql-icon svg {
3325
- height: 17px;
3326
- width: 17px; }
3327
- .react-autoql-input-container:hover .react-autoql-input,
3328
- .react-autoql-input-container .react-autoql-input:focus {
3329
- border-color: var(--react-autoql-accent-color, #26a7df); }
3330
- .react-autoql-input-container:hover .react-autoql-input-icon,
3331
- .react-autoql-input-container .react-autoql-input-icon.focus {
3332
- opacity: 1;
3333
- color: var(--react-autoql-accent-color, #26a7df); }
3441
+ .react-autoql-toolbar-btn {
3442
+ height: 28px;
3443
+ width: 28px;
3444
+ background: none;
3445
+ border: none;
3446
+ font-size: 16px;
3447
+ line-height: 28px;
3448
+ vertical-align: top;
3449
+ color: var(--react-autoql-accent-color);
3450
+ cursor: pointer;
3451
+ outline: none !important; }
3452
+
3453
+ .react-autoql-toolbar-btn.green {
3454
+ color: #2ecc40; }
3455
+
3456
+ .react-autoql-toolbar-btn.red {
3457
+ color: #e80000; }
3458
+
3459
+ .react-autoql-toolbar-btn:hover {
3460
+ opacity: 0.7; }
3334
3461
 
3335
3462
  .react-autoql-radio-btn-container {
3336
3463
  display: inline-block;
@@ -3394,83 +3521,14 @@ the whole table when the filter button is clicked */
3394
3521
  .react-autoql-radio-btn-container .react-autoql-radio-btn:hover:not(.active) {
3395
3522
  border-color: var(--react-autoql-accent-color, #26a7df);
3396
3523
  color: var(--react-autoql-accent-color, #26a7df);
3397
- z-index: 2; }
3398
- .react-autoql-radio-btn-container .react-autoql-radio-btn:first-child {
3399
- border-top-left-radius: 4px;
3400
- border-bottom-left-radius: 4px;
3401
- margin-left: 0; }
3402
- .react-autoql-radio-btn-container .react-autoql-radio-btn:last-child {
3403
- border-top-right-radius: 4px;
3404
- border-bottom-right-radius: 4px; }
3405
-
3406
- .react-autoql-steps-container {
3407
- margin: 10px; }
3408
-
3409
- .react-autoql-step-container {
3410
- position: relative;
3411
- border-left: 1px solid var(--react-autoql-text-color-placeholder, lightgray);
3412
- margin-left: 12px;
3413
- padding-left: 20px;
3414
- padding-bottom: 5px;
3415
- transition: all 0.5s ease; }
3416
- .react-autoql-step-container.complete {
3417
- border-color: var(--react-autoql-accent-color, #26a7df); }
3418
- .react-autoql-step-container.complete .react-autoql-step-dot {
3419
- border-color: var(--react-autoql-accent-color, #26a7df);
3420
- background: var(--react-autoql-accent-color, #26a7df);
3421
- color: #fff; }
3422
- .react-autoql-step-container.error {
3423
- border-color: var(--react-autoql-warning-color); }
3424
- .react-autoql-step-container.error .react-autoql-step-dot {
3425
- border-color: var(--react-autoql-warning-color);
3426
- background: var(--react-autoql-warning-color);
3427
- color: white; }
3428
- .react-autoql-step-container:not(.active) .react-autoql-step-content-container {
3429
- pointer-events: none;
3430
- height: 10px;
3431
- opacity: 0;
3432
- margin: 0; }
3433
-
3434
- .react-autoql-step-dot {
3435
- position: absolute;
3436
- top: 0;
3437
- left: -10px;
3438
- height: 20px;
3439
- width: 20px;
3440
- border-radius: 15px;
3441
- background: var(--react-autoql-background-color-primary, #fff);
3442
- border: 1px solid var(--react-autoql-text-color-placeholder, lightgray);
3443
- transition: all 0.5s ease;
3444
- font-size: 10.5px;
3445
- color: var(--react-autoql-text-color-placeholder, lightgray);
3446
- text-align: center; }
3447
-
3448
- .react-autoql-step-title-container:hover {
3449
- cursor: pointer;
3450
- transition: color 0.2s ease;
3451
- color: var(--react-autoql-accent-color, #26a7df); }
3452
-
3453
- .react-autoql-step-title {
3454
- font-weight: 500;
3455
- font-size: 15px;
3456
- line-height: 15px;
3457
- padding-top: 2px; }
3458
-
3459
- .react-autoql-step-subtitle {
3460
- font-size: 13px;
3461
- padding-top: 6px;
3462
- padding-bottom: 6px;
3463
- color: var(--react-autoql-text-color-placeholder, rgba(0, 0, 0, 0.4)); }
3464
-
3465
- .react-autoql-step-content {
3466
- margin: 15px;
3467
- margin-top: 0; }
3468
-
3469
- .react-autoql-step-content-container {
3470
- transition-timing-function: ease;
3471
- transition-property: height, opacity, margin;
3472
- transition-duration: 0.5s;
3473
- opacity: 1; }
3524
+ z-index: 2; }
3525
+ .react-autoql-radio-btn-container .react-autoql-radio-btn:first-child {
3526
+ border-top-left-radius: 4px;
3527
+ border-bottom-left-radius: 4px;
3528
+ margin-left: 0; }
3529
+ .react-autoql-radio-btn-container .react-autoql-radio-btn:last-child {
3530
+ border-top-right-radius: 4px;
3531
+ border-bottom-right-radius: 4px; }
3474
3532
 
3475
3533
  .content {
3476
3534
  margin: 2rem; }
@@ -3604,36 +3662,179 @@ the whole table when the filter button is clicked */
3604
3662
  .react-autoql-checkbox__input::before:not(.react-autoql-checkbox--switch__input) {
3605
3663
  background: var(--react-autoql-accent-color); }
3606
3664
 
3607
- .viz-toolbar {
3665
+
3666
+ .react-autoql-steps-container {
3667
+ margin: 10px; }
3668
+
3669
+ .react-autoql-step-container {
3670
+ position: relative;
3671
+ border-left: 1px solid var(--react-autoql-text-color-placeholder, lightgray);
3672
+ margin-left: 12px;
3673
+ padding-left: 20px;
3674
+ padding-bottom: 5px;
3675
+ transition: all 0.5s ease; }
3676
+ .react-autoql-step-container.complete {
3677
+ border-color: var(--react-autoql-accent-color, #26a7df); }
3678
+ .react-autoql-step-container.complete .react-autoql-step-dot {
3679
+ border-color: var(--react-autoql-accent-color, #26a7df);
3680
+ background: var(--react-autoql-accent-color, #26a7df);
3681
+ color: #fff; }
3682
+ .react-autoql-step-container.error {
3683
+ border-color: var(--react-autoql-warning-color); }
3684
+ .react-autoql-step-container.error .react-autoql-step-dot {
3685
+ border-color: var(--react-autoql-warning-color);
3686
+ background: var(--react-autoql-warning-color);
3687
+ color: white; }
3688
+ .react-autoql-step-container:not(.active) .react-autoql-step-content-container {
3689
+ pointer-events: none;
3690
+ height: 10px;
3691
+ opacity: 0;
3692
+ margin: 0; }
3693
+
3694
+ .react-autoql-step-dot {
3608
3695
  position: absolute;
3609
- background: inherit;
3610
- padding: 5px;
3611
- border-radius: 6px;
3612
- line-height: 28px;
3613
- border: 1px solid #d3d3d352; }
3614
- .viz-toolbar.vertical .react-autoql-toolbar-btn {
3615
- display: block; }
3696
+ top: 0;
3697
+ left: -10px;
3698
+ height: 20px;
3699
+ width: 20px;
3700
+ border-radius: 15px;
3701
+ background: var(--react-autoql-background-color-primary, #fff);
3702
+ border: 1px solid var(--react-autoql-text-color-placeholder, lightgray);
3703
+ transition: all 0.5s ease;
3704
+ font-size: 10.5px;
3705
+ color: var(--react-autoql-text-color-placeholder, lightgray);
3706
+ text-align: center; }
3616
3707
 
3617
- .react-autoql-toolbar-btn {
3618
- height: 28px;
3619
- width: 28px;
3620
- background: none;
3621
- border: none;
3622
- font-size: 16px;
3623
- line-height: 28px;
3624
- vertical-align: top;
3625
- color: var(--react-autoql-accent-color);
3708
+ .react-autoql-step-title-container:hover {
3626
3709
  cursor: pointer;
3627
- outline: none !important; }
3710
+ transition: color 0.2s ease;
3711
+ color: var(--react-autoql-accent-color, #26a7df); }
3628
3712
 
3629
- .react-autoql-toolbar-btn.green {
3630
- color: #2ecc40; }
3713
+ .react-autoql-step-title {
3714
+ font-weight: 500;
3715
+ font-size: 15px;
3716
+ line-height: 15px;
3717
+ padding-top: 2px; }
3631
3718
 
3632
- .react-autoql-toolbar-btn.red {
3633
- color: #e80000; }
3719
+ .react-autoql-step-subtitle {
3720
+ font-size: 13px;
3721
+ padding-top: 6px;
3722
+ padding-bottom: 6px;
3723
+ color: var(--react-autoql-text-color-placeholder, rgba(0, 0, 0, 0.4)); }
3634
3724
 
3635
- .react-autoql-toolbar-btn:hover {
3636
- opacity: 0.7; }
3725
+ .react-autoql-step-content {
3726
+ margin: 15px;
3727
+ margin-top: 0; }
3728
+
3729
+ .react-autoql-step-content-container {
3730
+ transition-timing-function: ease;
3731
+ transition-property: height, opacity, margin;
3732
+ transition-duration: 0.5s;
3733
+ opacity: 1; }
3734
+
3735
+ .react-autoql-input-container {
3736
+ position: relative;
3737
+ margin: 2px 5px;
3738
+ display: inline-block; }
3739
+ .react-autoql-input-container .react-autoql-input {
3740
+ border: 1px solid rgba(0, 0, 0, 0.1);
3741
+ border-radius: 4px;
3742
+ line-height: 32px;
3743
+ min-height: 34px;
3744
+ padding: 0 10px;
3745
+ width: 100%;
3746
+ outline: none !important;
3747
+ transition: all 0.2s ease;
3748
+ transition-property: border-color, color, opacity; }
3749
+ .react-autoql-input-container .react-autoql-input.with-icon {
3750
+ padding-left: 38px; }
3751
+ .react-autoql-input-container .react-autoql-input::-moz-placeholder {
3752
+ /* Chrome, Firefox, Opera, Safari 10.1+ */
3753
+ color: rgba(0, 0, 0, 0.2);
3754
+ opacity: 1;
3755
+ /* Firefox */
3756
+ font-style: italic; }
3757
+ .react-autoql-input-container .react-autoql-input:-ms-input-placeholder {
3758
+ /* Chrome, Firefox, Opera, Safari 10.1+ */
3759
+ color: rgba(0, 0, 0, 0.2);
3760
+ opacity: 1;
3761
+ /* Firefox */
3762
+ font-style: italic; }
3763
+ .react-autoql-input-container .react-autoql-input::placeholder {
3764
+ /* Chrome, Firefox, Opera, Safari 10.1+ */
3765
+ color: rgba(0, 0, 0, 0.2);
3766
+ opacity: 1;
3767
+ /* Firefox */
3768
+ font-style: italic; }
3769
+ .react-autoql-input-container .react-autoql-input-icon {
3770
+ position: absolute;
3771
+ left: 12px;
3772
+ top: 8px;
3773
+ opacity: 0.4;
3774
+ transition: all 0.2s ease; }
3775
+ .react-autoql-input-container .react-autoql-input-icon span.react-autoql-icon svg {
3776
+ height: 17px;
3777
+ width: 17px; }
3778
+ .react-autoql-input-container:hover .react-autoql-input,
3779
+ .react-autoql-input-container .react-autoql-input:focus {
3780
+ border-color: var(--react-autoql-accent-color, #26a7df); }
3781
+ .react-autoql-input-container:hover .react-autoql-input-icon,
3782
+ .react-autoql-input-container .react-autoql-input-icon.focus {
3783
+ opacity: 1;
3784
+ color: var(--react-autoql-accent-color, #26a7df); }
3785
+
3786
+ .react-autoql-notification-rule-container {
3787
+ display: flex; }
3788
+ .react-autoql-notification-rule-container .react-autoql-rule-input {
3789
+ display: flex;
3790
+ flex-direction: column;
3791
+ flex: 1;
3792
+ width: 100%; }
3793
+ .react-autoql-notification-rule-container .react-autoql-rule-first-input-container {
3794
+ display: flex;
3795
+ flex: 1; }
3796
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container {
3797
+ display: flex;
3798
+ padding: 2px 0;
3799
+ border-radius: 4px;
3800
+ transition: all 0.3s ease;
3801
+ flex: 1; }
3802
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-rule-condition-select {
3803
+ flex: 0;
3804
+ flex-basis: 33px; }
3805
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-rule-input {
3806
+ flex: 1;
3807
+ margin-left: 4px; }
3808
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-delete-compare-btn {
3809
+ cursor: pointer;
3810
+ opacity: 0.6;
3811
+ padding: 6px; }
3812
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-delete-compare-btn:hover {
3813
+ opacity: 1; }
3814
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container.hidden {
3815
+ display: none; }
3816
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-input-container {
3817
+ margin: 0; }
3818
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-input-container:hover + .react-autoql-rule-term-type-selector,
3819
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-input-container.focus
3820
+ + .react-autoql-rule-term-type-selector {
3821
+ color: var(--react-autoql-accent-color, #26a7df);
3822
+ border-color: var(--react-autoql-accent-color, #26a7df); }
3823
+
3824
+ .read-only-rule-term {
3825
+ display: inline-block;
3826
+ border: 1px solid rgba(0, 0, 0, 0.06);
3827
+ background: rgba(0, 0, 0, 0.02);
3828
+ padding: 3px 7px;
3829
+ line-height: 1.5em;
3830
+ margin-right: 5px;
3831
+ margin-bottom: 2px;
3832
+ margin-top: 2px;
3833
+ border-radius: 4px; }
3834
+
3835
+ .expression-term-validation-error {
3836
+ padding: 0 10px;
3837
+ color: var(--react-autoql-warning-color); }
3637
3838
 
3638
3839
  .notification-read-only-group {
3639
3840
  border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
@@ -3753,59 +3954,6 @@ the whole table when the filter button is clicked */
3753
3954
  opacity: 1;
3754
3955
  color: var(--react-autoql-accent-color); }
3755
3956
 
3756
- .react-autoql-notification-rule-container {
3757
- display: flex; }
3758
- .react-autoql-notification-rule-container .react-autoql-rule-input {
3759
- display: flex;
3760
- flex-direction: column;
3761
- flex: 1;
3762
- width: 100%; }
3763
- .react-autoql-notification-rule-container .react-autoql-rule-first-input-container {
3764
- display: flex;
3765
- flex: 1; }
3766
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container {
3767
- display: flex;
3768
- padding: 2px 0;
3769
- border-radius: 4px;
3770
- transition: all 0.3s ease;
3771
- flex: 1; }
3772
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-rule-condition-select {
3773
- flex: 0;
3774
- flex-basis: 33px; }
3775
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-rule-input {
3776
- flex: 1;
3777
- margin-left: 4px; }
3778
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-delete-compare-btn {
3779
- cursor: pointer;
3780
- opacity: 0.6;
3781
- padding: 6px; }
3782
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-delete-compare-btn:hover {
3783
- opacity: 1; }
3784
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container.hidden {
3785
- display: none; }
3786
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-input-container {
3787
- margin: 0; }
3788
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-input-container:hover + .react-autoql-rule-term-type-selector,
3789
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-input-container.focus
3790
- + .react-autoql-rule-term-type-selector {
3791
- color: var(--react-autoql-accent-color, #26a7df);
3792
- border-color: var(--react-autoql-accent-color, #26a7df); }
3793
-
3794
- .read-only-rule-term {
3795
- display: inline-block;
3796
- border: 1px solid rgba(0, 0, 0, 0.06);
3797
- background: rgba(0, 0, 0, 0.02);
3798
- padding: 3px 7px;
3799
- line-height: 1.5em;
3800
- margin-right: 5px;
3801
- margin-bottom: 2px;
3802
- margin-top: 2px;
3803
- border-radius: 4px; }
3804
-
3805
- .expression-term-validation-error {
3806
- padding: 0 10px;
3807
- color: var(--react-autoql-warning-color); }
3808
-
3809
3957
  .spinner-loader {
3810
3958
  display: inline-block;
3811
3959
  width: 14px;
@@ -3836,6 +3984,8 @@ the whole table when the filter button is clicked */
3836
3984
  100% {
3837
3985
  transform: rotate(360deg); } }
3838
3986
 
3987
+
3988
+
3839
3989
  .react-autoql-select {
3840
3990
  border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
3841
3991
  border-radius: 4px;
@@ -3874,7 +4024,6 @@ the whole table when the filter button is clicked */
3874
4024
  .react-autoql-select-popup-container .react-autoql-select-popup li:hover {
3875
4025
  background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.04)); }
3876
4026
 
3877
-
3878
4027
  .slack-modal-error-container,
3879
4028
  .slack-modal-empty-list-message {
3880
4029
  display: flex;
@@ -4020,7 +4169,6 @@ the whole table when the filter button is clicked */
4020
4169
  .slack-channel-list-container .connect-channel-btn button {
4021
4170
  width: 200px; }
4022
4171
 
4023
-
4024
4172
  .react-autoql-list-item {
4025
4173
  padding: 0 20px;
4026
4174
  display: flex;