react-autoql 4.0.0 → 4.2.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.
@@ -1,74 +1,3 @@
1
- .chat-voice-record-button {
2
- width: 40px;
3
- height: 40px;
4
- border-radius: 24px;
5
- margin: 10px;
6
- margin-left: 0;
7
- font-size: 18px;
8
- line-height: 24px;
9
- outline: none !important;
10
- position: relative;
11
- cursor: pointer;
12
- overflow: hidden;
13
- background: var(--react-autoql-accent-color);
14
- color: var(--react-autoql-accent-text-color);
15
- border: none;
16
- flex-shrink: 0;
17
- flex-grow: 0; }
18
-
19
- .chat-voice-record-button:hover {
20
- box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.15); }
21
-
22
- .chat-voice-record-button.listening {
23
- background: #ff471a; }
24
-
25
- .chat-voice-record-icon {
26
- vertical-align: top; }
27
-
28
- .react-autoql-tooltip {
29
- font-family: inherit;
30
- letter-spacing: 0.04em;
31
- padding: 7px 15px;
32
- opacity: 1 !important;
33
- z-index: 99999 !important; }
34
-
35
- @-webkit-keyframes slide {
36
- 0% {
37
- transform: translateX(-100%); }
38
- 100% {
39
- transform: translateX(100%); } }
40
-
41
- @keyframes slide {
42
- 0% {
43
- transform: translateX(-100%); }
44
- 100% {
45
- transform: translateX(100%); } }
46
-
47
- @-webkit-keyframes move {
48
- 0% {
49
- left: 0;
50
- opacity: 0; }
51
- 5% {
52
- opacity: 0; }
53
- 48% {
54
- opacity: 0.2; }
55
- 80% {
56
- opacity: 0; }
57
- 100% {
58
- left: 82%; } }
59
-
60
- @keyframes move {
61
- 0% {
62
- left: 0;
63
- opacity: 0; }
64
- 5% {
65
- opacity: 0; }
66
- 48% {
67
- opacity: 0.2; }
68
- 80% {
69
- opacity: 0; }
70
- 100% {
71
- left: 82%; } }
72
1
 
73
2
  .react-autoql-bar-container {
74
3
  position: relative;
@@ -216,6 +145,169 @@
216
145
  left: 30px;
217
146
  top: 15px; }
218
147
 
148
+ .chat-voice-record-button {
149
+ width: 40px;
150
+ height: 40px;
151
+ border-radius: 24px;
152
+ margin: 10px;
153
+ margin-left: 0;
154
+ font-size: 18px;
155
+ line-height: 24px;
156
+ outline: none !important;
157
+ position: relative;
158
+ cursor: pointer;
159
+ overflow: hidden;
160
+ background: var(--react-autoql-accent-color);
161
+ color: var(--react-autoql-accent-text-color);
162
+ border: none;
163
+ flex-shrink: 0;
164
+ flex-grow: 0; }
165
+
166
+ .chat-voice-record-button:hover {
167
+ box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.15); }
168
+
169
+ .chat-voice-record-button.listening {
170
+ background: #ff471a; }
171
+
172
+ .chat-voice-record-icon {
173
+ vertical-align: top; }
174
+
175
+ .react-autoql-tooltip {
176
+ font-family: inherit;
177
+ letter-spacing: 0.04em;
178
+ text-align: left;
179
+ padding: 7px 15px;
180
+ opacity: 1 !important;
181
+ z-index: 99999 !important; }
182
+
183
+ @-webkit-keyframes slide {
184
+ 0% {
185
+ transform: translateX(-100%); }
186
+ 100% {
187
+ transform: translateX(100%); } }
188
+
189
+ @keyframes slide {
190
+ 0% {
191
+ transform: translateX(-100%); }
192
+ 100% {
193
+ transform: translateX(100%); } }
194
+
195
+ @-webkit-keyframes move {
196
+ 0% {
197
+ left: 0;
198
+ opacity: 0; }
199
+ 5% {
200
+ opacity: 0; }
201
+ 48% {
202
+ opacity: 0.2; }
203
+ 80% {
204
+ opacity: 0; }
205
+ 100% {
206
+ left: 82%; } }
207
+
208
+ @keyframes move {
209
+ 0% {
210
+ left: 0;
211
+ opacity: 0; }
212
+ 5% {
213
+ opacity: 0; }
214
+ 48% {
215
+ opacity: 0.2; }
216
+ 80% {
217
+ opacity: 0; }
218
+ 100% {
219
+ left: 82%; } }
220
+
221
+ .react-autoql-icon {
222
+ position: relative;
223
+ opacity: 1; }
224
+ .react-autoql-icon.warning {
225
+ color: var(--react-autoql-warning-color) !important; }
226
+ .react-autoql-icon.danger {
227
+ color: var(--react-autoql-danger-color) !important; }
228
+
229
+ span.react-autoql-icon {
230
+ vertical-align: unset;
231
+ text-align: left;
232
+ margin: 0;
233
+ padding: 0;
234
+ float: none !important;
235
+ color: inherit; }
236
+ span.react-autoql-icon svg {
237
+ float: none !important;
238
+ color: inherit;
239
+ vertical-align: unset;
240
+ text-align: left;
241
+ margin: 0;
242
+ padding: 0;
243
+ opacity: 1;
244
+ height: 1em;
245
+ margin-bottom: -0.15em; }
246
+
247
+ .slack-logo {
248
+ display: inline-block;
249
+ height: 100%;
250
+ margin-bottom: 3px; }
251
+ .slack-logo img {
252
+ vertical-align: middle;
253
+ height: 1em;
254
+ width: 1em; }
255
+
256
+ .react-autoql-badge {
257
+ position: absolute;
258
+ background: var(--react-autoql-warning-color);
259
+ border: 1px solid var(--react-autoql-background-color-primary);
260
+ width: 0.5em;
261
+ height: 0.5em;
262
+ top: -0.1em;
263
+ right: -0.25em;
264
+ border-radius: 50%;
265
+ box-sizing: content-box; }
266
+
267
+ .loading-container-centered {
268
+ height: 100%;
269
+ width: 100%;
270
+ display: flex;
271
+ flex-direction: column;
272
+ justify-content: center;
273
+ align-items: center; }
274
+
275
+ .response-loading {
276
+ display: inline-block;
277
+ position: relative;
278
+ width: 64px;
279
+ height: 64px; }
280
+
281
+ .response-loading div {
282
+ position: absolute;
283
+ top: 27px;
284
+ width: 11px;
285
+ height: 11px;
286
+ border-radius: 50%;
287
+ background: #e2e2e2;
288
+ -webkit-animation-timing-function: cubic-bezier(0, 1, 1, 0);
289
+ animation-timing-function: cubic-bezier(0, 1, 1, 0); }
290
+
291
+ .response-loading div:nth-child(1) {
292
+ left: 6px;
293
+ -webkit-animation: response-loading1 0.6s infinite;
294
+ animation: response-loading1 0.6s infinite; }
295
+
296
+ .response-loading div:nth-child(2) {
297
+ left: 6px;
298
+ -webkit-animation: response-loading2 0.6s infinite;
299
+ animation: response-loading2 0.6s infinite; }
300
+
301
+ .response-loading div:nth-child(3) {
302
+ left: 26px;
303
+ -webkit-animation: response-loading2 0.6s infinite;
304
+ animation: response-loading2 0.6s infinite; }
305
+
306
+ .response-loading div:nth-child(4) {
307
+ left: 45px;
308
+ -webkit-animation: response-loading3 0.6s infinite;
309
+ animation: response-loading3 0.6s infinite; }
310
+
219
311
  .react-autoql-dashboard-container {
220
312
  background: var(--react-autoql-background-color-secondary);
221
313
  height: 100%;
@@ -278,532 +370,519 @@
278
370
  font-weight: bold;
279
371
  cursor: pointer; }
280
372
 
281
- .loading-container-centered {
282
- height: 100%;
283
- width: 100%;
373
+ .filter-lock-menu {
374
+ z-index: 99999 !important;
375
+ transition: opacity 0.1s ease 0s !important;
376
+ border: 1px solid #ababab52;
377
+ border-radius: 4px;
378
+ box-shadow: 0px 0 8px rgba(0, 0, 0, 0.15);
379
+ opacity: 1;
380
+ min-width: 500px;
381
+ max-width: 70vw;
382
+ min-height: 350px;
383
+ max-height: 90vh;
384
+ background: var(--react-autoql-background-color-primary);
385
+ color: var(--react-autoql-text-color-primary);
386
+ overflow-y: auto !important; }
387
+ .filter-lock-menu .filter-lock-toast-container {
388
+ top: 0;
389
+ position: absolute; }
390
+ .filter-lock-menu .filter-lock-toast-container .Toastify__toast {
391
+ min-height: 48px; }
392
+ .filter-lock-menu .filter-lock-toast-container .Toastify__toast-body {
393
+ justify-content: center; }
394
+ .filter-lock-menu .filter-lock-toast-container .Toastify__toast-body > div:last-child {
395
+ flex: unset; }
396
+ .filter-lock-menu .include-exclude-toggle-group {
397
+ height: 23px;
398
+ font-size: 12px;
399
+ font-weight: 200; }
400
+ .filter-lock-menu .include-exclude-toggle-group .react-autoql-radio-btn.active {
401
+ background-color: var(--react-autoql-border-color); }
402
+ .filter-lock-menu .include-exclude-toggle-group :first-child.react-autoql-radio-btn:hover, .filter-lock-menu .include-exclude-toggle-group :first-child.react-autoql-radio-btn.active {
403
+ color: var(--react-autoql-accent-color);
404
+ border-color: var(--react-autoql-accent-color); }
405
+ .filter-lock-menu .include-exclude-toggle-group :nth-child(2).react-autoql-radio-btn:hover, .filter-lock-menu .include-exclude-toggle-group :nth-child(2).react-autoql-radio-btn.active {
406
+ color: var(--react-autoql-danger-color);
407
+ border-color: var(--react-autoql-danger-color); }
408
+
409
+ .filter-lock-menu-content {
410
+ padding: 15px 20px;
284
411
  display: flex;
285
412
  flex-direction: column;
286
- justify-content: center;
287
- align-items: center; }
288
-
289
- .response-loading {
290
- display: inline-block;
291
- position: relative;
292
- width: 64px;
293
- height: 64px; }
294
-
295
- .response-loading div {
296
- position: absolute;
297
- top: 27px;
298
- width: 11px;
299
- height: 11px;
300
- border-radius: 50%;
301
- background: #e2e2e2;
302
- -webkit-animation-timing-function: cubic-bezier(0, 1, 1, 0);
303
- animation-timing-function: cubic-bezier(0, 1, 1, 0); }
304
-
305
- .response-loading div:nth-child(1) {
306
- left: 6px;
307
- -webkit-animation: response-loading1 0.6s infinite;
308
- animation: response-loading1 0.6s infinite; }
413
+ justify-content: stretch;
414
+ height: 100%; }
415
+ .filter-lock-menu-content.closed {
416
+ opacity: 0; }
417
+ .filter-lock-menu-content h3 {
418
+ margin-top: 3px;
419
+ margin-bottom: 15px;
420
+ color: var(--react-autoql-text-color-primary); }
421
+ .filter-lock-menu-content h4 {
422
+ margin-top: 3px;
423
+ margin-bottom: 5px;
424
+ color: var(--react-autoql-text-color-primary);
425
+ display: inline-flex; }
426
+ .filter-lock-menu-content .react-autoql-condition-list-loading-container,
427
+ .filter-lock-menu-content .react-autoql-empty-condition-list,
428
+ .filter-lock-menu-content .react-autoql-filter-list-container {
429
+ flex: 1 1 245px; }
430
+ .filter-lock-menu-content .filter-lock-menu-header {
431
+ flex: 0;
432
+ width: 100%;
433
+ display: flex;
434
+ align-items: flex-start;
435
+ justify-content: space-between; }
436
+ .filter-lock-menu-content .filter-lock-menu-header .filter-locking-close-btn {
437
+ border: none;
438
+ margin: 0;
439
+ padding: 0;
440
+ font-size: 20px; }
441
+ .filter-lock-menu-content .filter-lock-menu-footer {
442
+ width: 100%;
443
+ display: flex;
444
+ justify-content: flex-end; }
445
+ .filter-lock-menu-content .react-autoql-empty-condition-list {
446
+ opacity: 0.8;
447
+ width: 100%;
448
+ text-align: center;
449
+ padding-top: 70px; }
450
+ .filter-lock-menu-content .react-autoql-filter-list-container {
451
+ margin: 10px 0; }
452
+ .filter-lock-menu-content .react-autoql-filter-list-container .flex {
453
+ width: 100%;
454
+ display: flex;
455
+ flex-direction: row;
456
+ justify-content: space-between;
457
+ flex-wrap: nowrap;
458
+ margin-bottom: 4px; }
459
+ .filter-lock-menu-content .react-autoql-filter-list-container .flex .persist-toggle-column,
460
+ .filter-lock-menu-content .react-autoql-filter-list-container .flex .react-autoql-condition-table-list-item {
461
+ margin-right: 25px;
462
+ max-width: 350px; }
463
+ .filter-lock-menu-content .react-autoql-filter-list-container .flex .react-autoql-remove-filter-icon {
464
+ cursor: pointer; }
465
+ .filter-lock-menu-content .react-autoql-filter-list-container .flex .react-autoql-remove-filter-icon:hover {
466
+ color: var(--react-autoql-danger-color); }
467
+ .filter-lock-menu-content .react-autoql-filter-list-container .filter-lock-category-title {
468
+ padding-right: 10px;
469
+ padding-top: 1px;
470
+ max-width: 195px;
471
+ overflow: hidden; }
472
+ .filter-lock-menu-content .react-autoql-filter-list-container .persist-toggle-column .react-autoql-icon {
473
+ margin-left: 3px; }
474
+ .filter-lock-menu-content .react-autoql-filter-list-container .react-autoql-highlight-row {
475
+ background-color: var(--react-autoql-accent-color);
476
+ color: white;
477
+ -webkit-animation-name: highlightIn, highlightOut;
478
+ animation-name: highlightIn, highlightOut;
479
+ -webkit-animation-duration: 300ms, 300ms;
480
+ animation-duration: 300ms, 300ms;
481
+ -webkit-animation-delay: 0ms, 1000ms;
482
+ animation-delay: 0ms, 1000ms;
483
+ -webkit-animation-timing-function: ease-in, ease-out;
484
+ animation-timing-function: ease-in, ease-out;
485
+ -webkit-animation-iteration-count: 1, 1;
486
+ animation-iteration-count: 1, 1; }
487
+ .filter-lock-menu-content .react-autoql-condition-locking-input {
488
+ padding: 5px;
489
+ padding-left: 20px;
490
+ height: 32px;
491
+ box-sizing: border-box;
492
+ border-radius: 24px;
493
+ font-size: 12px;
494
+ font-family: inherit;
495
+ letter-spacing: 0.04em;
496
+ outline: none !important;
497
+ width: 100%;
498
+ font-family: inherit;
499
+ border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
500
+ background: var(--react-autoql-background-color-primary);
501
+ color: var(--react-autoql-text-color-primary); }
502
+ .filter-lock-menu-content .react-autoql-condition-locking-input:hover {
503
+ box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1); }
504
+ .filter-lock-menu-content .react-autoql-condition-locking-input::-moz-placeholder {
505
+ color: rgba(var(--react-autoql-text-color-placeholder), 2) !important;
506
+ opacity: 0.5; }
507
+ .filter-lock-menu-content .react-autoql-condition-locking-input:-ms-input-placeholder {
508
+ color: rgba(var(--react-autoql-text-color-placeholder), 2) !important;
509
+ opacity: 0.5; }
510
+ .filter-lock-menu-content .react-autoql-condition-locking-input::placeholder {
511
+ color: rgba(var(--react-autoql-text-color-placeholder), 2) !important;
512
+ opacity: 0.5; }
513
+ .filter-lock-menu-content .react-autosuggest__container--open {
514
+ position: relative; }
515
+ .filter-lock-menu-content .react-autosuggest__container--open .react-autosuggest__suggestions-container--open {
516
+ background-color: var(--react-autoql-background-color-primary);
517
+ border: 1px solid var(--react-autoql-border-color);
518
+ color: var(--react-autoql-text-color-primary);
519
+ position: absolute;
520
+ padding: 10px 0;
521
+ display: block;
522
+ font-family: inherit;
523
+ font-size: 15px;
524
+ font-weight: normal;
525
+ z-index: 2;
526
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
527
+ text-align: left;
528
+ border-radius: 4px;
529
+ height: auto;
530
+ width: 100%;
531
+ max-height: 200px;
532
+ overflow-y: scroll !important; }
533
+ .filter-lock-menu-content .react-autosuggest__container--open .react-autosuggest__suggestions-container--open ul.filter-lock-suggestion-item {
534
+ cursor: pointer;
535
+ width: 100%;
536
+ columns: 2;
537
+ -webkit-columns: 2;
538
+ list-style: none;
539
+ -moz-columns: 2;
540
+ letter-spacing: 0.05em;
541
+ line-height: 22.5px;
542
+ padding: 0px 20px 3px 20px; }
543
+ .filter-lock-menu-content .react-autosuggest__container--open .react-autosuggest__suggestions-container--open .react-autosuggest__suggestion {
544
+ color: var(--react-autoql-text-color-primary); }
545
+ .filter-lock-menu-content .react-autosuggest__container--open .react-autosuggest__suggestions-container--open .react-autosuggest__suggestions-list {
546
+ margin: 0;
547
+ padding: 0;
548
+ list-style-type: none; }
549
+ .filter-lock-menu-content .react-autosuggest__container--open .react-autosuggest__suggestions-container--open .react-autosuggest__suggestion--highlighted {
550
+ background-color: rgba(0, 0, 0, 0.1) !important; }
551
+ .filter-lock-menu-content .react-autosuggest__container--open .react-autosuggest__suggestions-container--open .react-autosuggest__section-title {
552
+ padding: 10px 0 0 10px;
553
+ font-size: 12px;
554
+ color: #777; }
309
555
 
310
- .response-loading div:nth-child(2) {
311
- left: 6px;
312
- -webkit-animation: response-loading2 0.6s infinite;
313
- animation: response-loading2 0.6s infinite; }
556
+ @-webkit-keyframes highlightOut {
557
+ 100% {
558
+ background-color: var(--react-autoql-background-color-primary);
559
+ color: var(--react-autoql-text-color-primary); }
560
+ 0% {
561
+ background-color: var(--react-autoql-accent-color);
562
+ color: white; } }
314
563
 
315
- .response-loading div:nth-child(3) {
316
- left: 26px;
317
- -webkit-animation: response-loading2 0.6s infinite;
318
- animation: response-loading2 0.6s infinite; }
564
+ @keyframes highlightOut {
565
+ 100% {
566
+ background-color: var(--react-autoql-background-color-primary);
567
+ color: var(--react-autoql-text-color-primary); }
568
+ 0% {
569
+ background-color: var(--react-autoql-accent-color);
570
+ color: white; } }
319
571
 
320
- .response-loading div:nth-child(4) {
321
- left: 45px;
322
- -webkit-animation: response-loading3 0.6s infinite;
323
- animation: response-loading3 0.6s infinite; }
572
+ @-webkit-keyframes highlightIn {
573
+ 100% {
574
+ background-color: var(--react-autoql-accent-color);
575
+ color: white; }
576
+ 0% {
577
+ background-color: var(--react-autoql-background-color-primary);
578
+ color: var(--react-autoql-text-color-primary); } }
324
579
 
580
+ @keyframes highlightIn {
581
+ 100% {
582
+ background-color: var(--react-autoql-accent-color);
583
+ color: white; }
584
+ 0% {
585
+ background-color: var(--react-autoql-background-color-primary);
586
+ color: var(--react-autoql-text-color-primary); } }
325
587
 
326
- .react-autoql-icon {
588
+ @import url("https://fonts.googleapis.com/icon?family=Material+Icons");
589
+ .react-autoql-response-content-container {
327
590
  position: relative;
328
- opacity: 1; }
329
- .react-autoql-icon.warning {
330
- color: var(--react-autoql-warning-color) !important; }
331
- .react-autoql-icon.danger {
332
- color: var(--react-autoql-danger-color) !important; }
333
-
334
- span.react-autoql-icon {
335
- vertical-align: unset;
336
- text-align: left;
337
- margin: 0;
338
- padding: 0;
339
- float: none !important;
340
- color: inherit; }
341
- span.react-autoql-icon svg {
342
- float: none !important;
343
- color: inherit;
344
- vertical-align: unset;
345
- text-align: left;
346
- margin: 0;
347
- padding: 0;
348
- opacity: 1;
349
- height: 1em;
350
- margin-bottom: -0.1em; }
351
-
352
- .slack-logo {
353
- display: inline-block;
591
+ display: flex;
592
+ flex-direction: column;
593
+ justify-content: center;
594
+ align-items: flex-start;
595
+ background-color: inherit;
596
+ font-size: 14px;
597
+ overflow: hidden;
598
+ max-height: 100%;
599
+ max-width: 100%;
600
+ width: 100%;
354
601
  height: 100%;
355
- margin-bottom: 3px; }
356
- .slack-logo img {
357
- vertical-align: middle;
358
- height: 1em;
359
- width: 1em; }
360
-
361
- .react-autoql-badge {
362
- position: absolute;
363
- background: var(--react-autoql-warning-color);
364
- border: 1px solid var(--react-autoql-background-color-primary);
365
- width: 0.5em;
366
- height: 0.5em;
367
- top: -0.1em;
368
- right: -0.25em;
369
- border-radius: 50%;
370
- box-sizing: content-box; }
371
-
372
- .condition-menu-dropdown {
373
- display: block; }
602
+ color: var(--react-autoql-text-color-primary); }
374
603
 
375
- .react-autoql-condition-lock-menu {
376
- min-width: 400px !important; }
604
+ .react-autoql-response-content-container.table {
605
+ max-height: 100vh !important;
606
+ overflow-y: scroll;
607
+ scrollbar-width: none;
608
+ margin-bottom: 0 !important;
609
+ height: 100%;
610
+ width: 100%; }
377
611
 
378
- .react-autoql-filter-locking-title-container {
379
- display: inline-block;
380
- width: 100%;
381
- padding-top: 4px;
382
- padding-left: 6px; }
383
- .react-autoql-filter-locking-title-container h3 {
384
- width: 95%;
385
- float: left;
386
- color: var(--react-autoql-text-color-primary);
387
- margin-bottom: 0;
388
- margin-top: 0;
389
- display: block;
390
- font-size: 1.17em !important;
391
- font-weight: bold; }
392
- .react-autoql-filter-locking-title-container h3 span {
393
- color: var(--react-autoql-accent-color); }
394
- .react-autoql-filter-locking-title-container button {
395
- width: 5%;
396
- float: right; }
397
- .react-autoql-filter-locking-title-container button :hover {
398
- cursor: pointer;
399
- color: var(--react-autoql-hover-color); }
612
+ .react-autoql-response-content-container.table::-webkit-scrollbar {
613
+ width: 0;
614
+ height: 0; }
400
615
 
401
- #react-autoql-filter-description-id {
402
- visibility: hidden;
403
- color: var(--react-autoql-text-color-primary);
404
- background-color: var(--react-autoql-background-color-secondary);
616
+ .react-autoql-suggestion-btn {
617
+ padding: 6px 14px;
618
+ background: transparent;
619
+ font-family: inherit;
620
+ font-size: 12px;
621
+ margin-bottom: 5px;
622
+ outline: none !important;
623
+ cursor: pointer;
624
+ letter-spacing: 0.05em;
625
+ transition: all 0.1s ease;
626
+ border: 1px solid rgba(0, 0, 0, 0.15);
405
627
  border-radius: 5px;
406
- padding: 2px 6px 2px 6px;
407
- margin: 4px 10px 4px 10px;
408
- display: inline-block;
409
- position: absolute;
410
- top: 20px;
411
- box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.4);
412
- z-index: 999999; }
413
- #react-autoql-filter-description-id span {
414
- color: var(--react-autoql-accent-color); }
415
- #react-autoql-filter-description-id p {
416
- width: 96%;
417
- float: right;
418
- margin-bottom: 0; }
628
+ color: inherit; }
419
629
 
420
- #react-autoql-filter-description-id.show {
421
- visibility: visible;
422
- -webkit-animation: fadeIn 1s;
423
- animation: fadeIn 1s; }
630
+ .react-autoql-suggestion-btn:hover {
631
+ border-color: transparent;
632
+ color: white;
633
+ background: var(--react-autoql-accent-color); }
424
634
 
425
- .react-autoql-condition-locking-input {
426
- padding: 5px;
427
- padding-left: 20px;
428
- margin: 8px;
429
- height: 32px;
430
- box-sizing: border-box;
431
- border-radius: 24px;
432
- font-size: 12px;
635
+ .react-autoql-help-link-btn {
636
+ padding: 6px 14px;
637
+ background: transparent;
638
+ border-radius: 5px;
433
639
  font-family: inherit;
434
- letter-spacing: 0.04em;
640
+ font-size: 12px;
641
+ margin-top: 5px;
435
642
  outline: none !important;
436
- width: calc(100% - 20px);
437
- font-family: inherit;
438
- /* Default styles outside of data messenger */
439
- border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
440
- background: var(--react-autoql-background-color-primary);
441
- color: var(--react-autoql-text-color-primary); }
442
- .react-autoql-condition-locking-input::-moz-placeholder {
443
- color: rgba(var(--react-autoql-text-color-placeholder), 2) !important; }
444
- .react-autoql-condition-locking-input:-ms-input-placeholder {
445
- color: rgba(var(--react-autoql-text-color-placeholder), 2) !important; }
446
- .react-autoql-condition-locking-input::placeholder {
447
- color: rgba(var(--react-autoql-text-color-placeholder), 2) !important; }
448
-
449
- .react-autoql-condition-locking-input:hover {
450
- box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1); }
643
+ cursor: pointer;
644
+ letter-spacing: 0.05em;
645
+ transition: all 0.1s ease;
646
+ border-color: #e2e2e26e;
647
+ color: inherit; }
451
648
 
452
- .react-autoql-condition-table {
453
- min-width: 95%;
454
- margin: 10px auto;
455
- table-layout: fixed; }
649
+ .react-autoql-help-link-btn:hover {
650
+ opacity: 0.7; }
651
+
652
+ .react-autoql-help-link-icon {
653
+ width: 15px;
654
+ height: 15px;
655
+ margin-bottom: -3px;
656
+ margin-right: 3px; }
456
657
 
457
- .react-autoql-condition-table thead {
458
- padding-left: 10px;
459
- display: table-header-group;
658
+ .react-autoql-suggestion-message {
659
+ height: 100%;
460
660
  width: 100%;
461
- flex: 1 1 auto; }
661
+ word-break: break-word; }
462
662
 
463
- .react-autoql-condition-table .react-autoql-condition-table-list-item {
464
- text-overflow: ellipsis;
465
- white-space: nowrap;
466
- overflow: hidden;
467
- width: 60%; }
663
+ .react-autoql-suggestions-select {
664
+ position: relative;
665
+ display: inline-block;
666
+ height: 30px;
667
+ background: none;
668
+ outline: none !important;
669
+ border: 1px solid;
670
+ font-family: inherit;
671
+ letter-spacing: 0.05em;
672
+ color: #28a8e0;
673
+ cursor: pointer;
674
+ font-size: inherit; }
468
675
 
469
- .react-autoql-condition-lock-menu-footer {
470
- bottom: 0;
471
- right: 0; }
472
- .react-autoql-condition-lock-menu-footer button {
473
- float: right;
474
- margin: 6px !important; }
676
+ .no-columns-error-message {
677
+ text-align: center;
678
+ padding: 20px;
679
+ font-size: 13px; }
680
+ .no-columns-error-message .warning-icon {
681
+ font-size: 22px;
682
+ display: block;
683
+ margin-bottom: -13px;
684
+ text-align: center; }
685
+ .no-columns-error-message .eye-icon {
686
+ vertical-align: bottom;
687
+ line-height: 18px; }
475
688
 
476
- .react-autoql-condition-lock-menu-footer {
477
- bottom: 0;
478
- right: 0; }
479
- .react-autoql-condition-lock-menu-footer button {
480
- float: right;
481
- margin: 6px !important; }
689
+ .query-output-footer {
690
+ display: flex;
691
+ justify-content: space-between;
692
+ align-items: flex-end;
693
+ padding-top: 5px;
694
+ max-height: 150px;
695
+ width: 100%; }
482
696
 
483
- .react-autoql-accept-conditions-button {
484
- text-align: right;
485
- margin-bottom: 12px;
486
- padding-right: 10px;
487
- color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.4));
488
- transition: color 0.1s ease; }
489
- .react-autoql-accept-conditions-button span {
490
- opacity: 0.8;
491
- cursor: pointer; }
492
- .react-autoql-accept-conditions-button span:hover {
493
- opacity: 1; }
494
-
495
- .react-autoql-condition-list {
496
- padding: 0;
497
- margin: 0 auto;
498
- min-height: 182px; }
697
+ .dashboard-data-limit-warning-icon {
698
+ color: var(--react-autoql-warning-color) !important;
699
+ margin-left: 10px;
700
+ font-size: 20px; }
499
701
 
500
- tbody::-webkit-scrollbar {
501
- -webkit-appearance: none;
502
- width: 7px; }
702
+ /* query validation */
703
+ .react-autoql-query-validation-selector-container {
704
+ display: inline-block;
705
+ position: relative; }
503
706
 
504
- tbody::-webkit-scrollbar-thumb {
505
- border-radius: 5px;
506
- background-color: rgba(0, 0, 0, 0.5);
507
- box-shadow: 0 0 1px rgba(255, 255, 255, 0.5); }
707
+ .react-autoql-select-popup-container.query-validation-select {
708
+ padding: 5px 0;
709
+ letter-spacing: 0.03em;
710
+ font-family: var(--react-autoql-font-family), sans-serif; }
711
+ .react-autoql-select-popup-container.query-validation-select .react-autoql-select-option {
712
+ height: unset;
713
+ font-size: 14px;
714
+ line-height: 24px;
715
+ padding: 0 15px; }
716
+ .react-autoql-select-popup-container.query-validation-select .react-autoql-select-option:last-of-type {
717
+ color: #d84830; }
508
718
 
509
- .react-autoql-condition-list .react-autoql-condition-table thead {
510
- text-align: left;
511
- width: 100%;
512
- margin: 0 10px 0 10px;
513
- font-weight: 800; }
514
- .react-autoql-condition-list .react-autoql-condition-table thead span {
515
- color: var(--react-autoql-accent-color);
516
- padding: 5px; }
719
+ .react-autoql-query-validation-query {
720
+ text-align: center; }
517
721
 
518
- .react-autoql-condition-list .react-autoql-condition-table tbody {
519
- display: block;
520
- overflow-y: scroll;
521
- max-height: 260px;
722
+ .react-autoql-query-validation-execute-btn {
723
+ height: 38px;
724
+ background: none;
725
+ border-radius: 4px;
726
+ margin-top: 24px;
522
727
  width: 100%;
523
- flex: 1 1 auto;
524
- padding-left: 10px; }
728
+ color: inherit;
729
+ cursor: pointer;
730
+ outline: none !important;
731
+ border-color: #e2e2e26e;
732
+ transition: all 0.2s ease; }
525
733
 
526
- .react-autoql-condition-list .react-autoql-condition-table tr {
527
- display: table;
528
- table-layout: fixed;
529
- width: 100%; }
734
+ .react-autoql-query-validation-execute-btn:hover {
735
+ border-color: #28a8e0; }
530
736
 
531
- .react-autoql-condition-list .react-autoql-condition-table th {
532
- display: table-cell;
533
- padding-left: 10px; }
737
+ .react-autoql-execute-query-icon {
738
+ font-size: 16px;
739
+ vertical-align: middle !important;
740
+ padding-right: 3px !important; }
741
+ .react-autoql-execute-query-icon span.react-autoql-icon svg {
742
+ height: 19px;
743
+ width: 19px;
744
+ margin-top: 3px;
745
+ margin-right: 4px;
746
+ vertical-align: top;
747
+ fill: var(--react-autoql-accent-color); }
534
748
 
535
- .react-autoql-condition-list td {
536
- display: table-cell;
537
- padding: 2px;
538
- padding-left: 10px;
539
- vertical-align: middle; }
749
+ .react-autoql-query-validation-select {
750
+ position: relative;
751
+ display: inline-block;
752
+ height: 2em;
753
+ background: none;
754
+ outline: none !important;
755
+ border: none;
756
+ letter-spacing: 0.05em;
757
+ font-family: inherit;
758
+ font-size: inherit;
759
+ margin: 0;
760
+ padding: 0;
761
+ border-radius: 0;
762
+ border-bottom: 1px dashed;
763
+ color: var(--react-autoql-accent-color); }
540
764
 
541
- #react-autoql-remove-filter-container {
542
- width: 35px; }
765
+ .react-autoql-query-validation-delete-button {
766
+ position: relative;
767
+ cursor: pointer;
768
+ margin-bottom: -2px; }
543
769
 
544
- #react-autoql-condition-table-settings {
545
- width: 110px; }
770
+ .react-autoql-chart-tooltip {
771
+ font-family: var(--react-autoql-font-family), sans-serif;
772
+ letter-spacing: 0.04em;
773
+ line-height: 22px;
774
+ font-size: 13px;
775
+ padding: 7px 15px;
776
+ transition: all 0.2s ease !important;
777
+ text-align: left !important;
778
+ opacity: 1 !important;
779
+ z-index: 99999 !important;
780
+ /* necessary to show up on top of rc drawer */ }
546
781
 
547
- .react-autoql-condition-list-loading-container {
548
- display: flex;
549
- height: 180px;
782
+ .single-value-response-container {
550
783
  width: 100%;
551
- padding: 20px;
552
- align-items: center;
553
- justify-content: center; }
554
-
555
- .react-autoql-empty-condition-list {
556
- text-align: center;
557
- padding: 20px;
558
- height: 140px; }
559
- .react-autoql-empty-condition-list p {
560
- margin-top: 20px !important;
561
- vertical-align: middle; }
562
-
563
- .autoql-close-button {
564
- background-color: inherit;
565
- border: none;
566
- text-align: left;
567
- font-size: 20px;
568
- margin-top: -20px;
569
- float: none !important;
570
- color: inherit; }
571
-
572
- .react-tiny-popover-container {
573
- background: var(--react-autoql-background-color-primary); }
574
-
575
- .autoql-condition-locking-menu-container .react-autosuggest__container {
576
- flex-grow: 1;
577
- display: inline;
578
- width: 90%;
579
- height: 100%; }
784
+ text-align: center; }
785
+ .single-value-response-container .single-value-response {
786
+ color: inherit;
787
+ cursor: unset;
788
+ font-size: 20px; }
789
+ .single-value-response-container .single-value-response:hover {
790
+ color: inherit; }
791
+ .single-value-response-container .single-value-response.with-drilldown:hover {
792
+ color: inherit;
793
+ text-decoration: underline;
794
+ font-weight: 600;
795
+ cursor: pointer; }
580
796
 
581
- .autoql-condition-locking-menu-container
582
- .react-autosuggest__suggestions-container--open {
583
- background-color: var(--react-autoql-background-color-primary);
584
- border: 1px solid var(--react-autoql-border-color);
585
- color: var(--react-autoql-text-color-primary);
586
- position: absolute;
587
- top: unset;
588
- bottom: unset;
589
- overflow-y: scroll !important;
590
- padding-top: 5px;
591
- padding-bottom: 5px;
592
- display: block;
593
- font-family: inherit;
594
- font-size: 15px;
595
- font-weight: normal;
596
- z-index: 2;
597
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
598
- text-align: left;
599
- border-radius: 4px;
600
- margin: -8px auto;
601
- height: auto;
602
- max-height: 80vh;
603
- overflow-y: scroll !important;
604
- transform: translateX(4%);
605
- width: 92% !important; }
606
-
607
- .autoql-condition-locking-menu-list {
608
- table-layout: fixed;
797
+ .react-autoql-query-validation-container {
609
798
  width: 100%; }
610
799
 
611
- .autoql-condition-locking-menu-container .react-autosuggest__suggestion {
612
- color: var(--react-autoql-text-color-primary); }
800
+ .react-autoql-query-validation-description {
801
+ margin-bottom: 14px; }
613
802
 
614
- .autoql-condition-locking-menu-container input::-moz-placeholder {
615
- opacity: 0.5; }
803
+ .context-menu {
804
+ background: var(--react-autoql-background-color-primary);
805
+ /* height: 100px; */
806
+ width: 150px;
807
+ padding: 10px 0; }
616
808
 
617
- .autoql-condition-locking-menu-container input:-ms-input-placeholder {
618
- opacity: 0.5; }
809
+ .context-menu-list {
810
+ list-style-type: none;
811
+ width: 100%;
812
+ margin: 0;
813
+ padding: 0; }
619
814
 
620
- .autoql-condition-locking-menu-container input::placeholder {
621
- opacity: 0.5; }
815
+ .context-menu-list li {
816
+ color: var(--react-autoql-text-color-primary);
817
+ width: 100%;
818
+ height: 35px;
819
+ line-height: 35px;
820
+ padding: 0 20px;
821
+ cursor: pointer; }
622
822
 
623
- .autoql-condition-locking-menu-container .react-autosuggest__suggestions-list {
624
- margin: 0;
625
- padding: 0;
626
- list-style-type: none;
627
- max-height: 200px;
628
- overflow-y: auto; }
823
+ .context-menu-list li:hover {
824
+ background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.05)); }
629
825
 
630
- .autoql-condition-locking-menu-container .react-autosuggest__suggestion {
826
+ .react-autoql-condition-link {
827
+ background: none !important;
828
+ border: none;
829
+ padding: 0 !important;
830
+ text-decoration: none;
831
+ white-space: nowrap;
631
832
  cursor: pointer;
632
- padding: 2px;
633
- padding-left: 18px;
634
- letter-spacing: 0.05em;
635
- line-height: 22.5px; }
636
-
637
- .autoql-condition-locking-menu-container
638
- .react-autosuggest__suggestion--highlighted {
639
- background-color: rgba(0, 0, 0, 0.1) !important; }
833
+ color: var(--react-autoql-accent-color) !important; }
834
+ .react-autoql-condition-link:hover {
835
+ opacity: 0.9; }
640
836
 
641
- .autoql-condition-locking-menu-container .react-autosuggest__section-title {
642
- padding: 10px 0 0 10px;
643
- font-size: 12px;
644
- color: #777; }
837
+ .react-autoql-condition-link-filtered {
838
+ text-decoration: none;
839
+ white-space: nowrap;
840
+ cursor: pointer;
841
+ color: var(--react-autoql-accent-color) !important; }
842
+ .react-autoql-condition-link-filtered .react-autoql-custom-icon {
843
+ font-size: 14px;
844
+ vertical-align: middle;
845
+ margin-top: -4px; }
846
+ .react-autoql-condition-link-filtered:hover {
847
+ opacity: 0.9;
848
+ border: none !important; }
849
+ .react-autoql-condition-link-filtered:hover .react-autoql-custom-icon {
850
+ opacity: 0.9; }
645
851
 
646
- #react-autoql-filter-setting-info-card {
647
- visibility: hidden;
852
+ .react-autoql-reverse-translation-container .react-autoql-reverse-translation {
648
853
  color: var(--react-autoql-text-color-primary);
649
854
  background-color: var(--react-autoql-background-color-secondary);
650
855
  border-radius: 5px;
651
- padding: 2px 6px 2px 6px;
652
- margin: 4px 10px 4px 10px;
653
- display: inline-block;
654
- position: absolute;
655
- top: 40px;
656
- box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.4);
657
- z-index: 9999; }
658
- #react-autoql-filter-setting-info-card span {
659
- color: var(--react-autoql-accent-color); }
660
- #react-autoql-filter-setting-info-card p {
661
- margin-bottom: 0 !important; }
662
- #react-autoql-filter-setting-info-card p span {
663
- color: var(--react-autoql-accent-color); }
664
-
665
- .react-autoql-highlight-row {
666
- background-color: var(--react-autoql-accent-color);
667
- color: white;
668
- -webkit-animation-name: highlightIn, highlightOut;
669
- animation-name: highlightIn, highlightOut;
670
- -webkit-animation-duration: 400ms, 400ms;
671
- animation-duration: 400ms, 400ms;
672
- -webkit-animation-delay: 0ms, 1500ms;
673
- animation-delay: 0ms, 1500ms;
674
- -webkit-animation-timing-function: ease-in, ease-out;
675
- animation-timing-function: ease-in, ease-out;
676
- -webkit-animation-iteration-count: 1, 1;
677
- animation-iteration-count: 1, 1; }
678
-
679
- #react-autoql-filter-setting-info-card.show {
680
- visibility: visible;
681
- -webkit-animation: fadeIn 1s;
682
- animation: fadeIn 1s; }
856
+ padding: 5px 13px 5px 13px;
857
+ height: 100%; }
683
858
 
684
- #react-autoql-condition-show-message {
685
- visibility: hidden;
686
- min-width: 200px;
687
- line-height: 1 !important;
688
- font-size: 14px !important;
689
- background-color: var(--react-autoql-background-color-secondary);
690
- text-align: center;
691
- border-radius: 4px;
692
- padding: 6px;
693
- position: fixed;
694
- top: 20px;
695
- display: block;
696
- z-index: 999999999;
697
- left: 50%;
698
- transform: translate(-50%, -50%);
699
- box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.4); }
700
- #react-autoql-condition-show-message span {
701
- color: var(--react-autoql-accent-color); }
859
+ .report-like-text-button {
860
+ background: none !important;
861
+ border: none;
862
+ padding: 0 !important;
863
+ color: #26a7df;
864
+ text-decoration: underline;
865
+ cursor: pointer; }
702
866
 
703
- #react-autoql-condition-show-message.show {
704
- visibility: visible;
705
- -webkit-animation: snackbarFadein 1s, snackbarFadeout 1s 2s;
706
- animation: snackbarFadein 1s, snackbarFadeout 1s 2s; }
867
+ .react-autoql-drawer {
868
+ font-family: var(--react-autoql-font-family), sans-serif;
869
+ line-height: 22px; }
707
870
 
708
- @-webkit-keyframes snackbarFadein {
709
- from {
710
- top: 0;
711
- opacity: 0; }
712
- to {
713
- top: 20px;
714
- opacity: 1; } }
871
+ .react-autoql-drawer.disable-selection {
872
+ -webkit-user-select: none;
873
+ -moz-user-select: none;
874
+ -ms-user-select: none;
875
+ user-select: none; }
715
876
 
716
- @keyframes snackbarFadein {
717
- from {
718
- top: 0;
719
- opacity: 0; }
720
- to {
721
- top: 20px;
722
- opacity: 1; } }
723
-
724
- @-webkit-keyframes snackbarFadeout {
725
- from {
726
- top: 20px;
727
- opacity: 1; }
728
- to {
729
- top: 0;
730
- opacity: 0; } }
731
-
732
- @keyframes snackbarFadeout {
733
- from {
734
- top: 20px;
735
- opacity: 1; }
736
- to {
737
- top: 0;
738
- opacity: 0; } }
739
-
740
- @-webkit-keyframes fadeIn {
741
- from {
742
- opacity: 0;
743
- transform: translate3d(0, -20%, 0); }
744
- to {
745
- opacity: 1;
746
- transform: translate3d(0, 0, 0); } }
747
-
748
- @keyframes fadeIn {
749
- from {
750
- opacity: 0;
751
- transform: translate3d(0, -20%, 0); }
752
- to {
753
- opacity: 1;
754
- transform: translate3d(0, 0, 0); } }
755
-
756
- @-webkit-keyframes highlightOut {
757
- 100% {
758
- background-color: var(--react-autoql-background-color-primary);
759
- color: var(--react-autoql-text-color-primary); }
760
- 0% {
761
- background-color: var(--react-autoql-accent-color);
762
- color: white; } }
763
-
764
- @keyframes highlightOut {
765
- 100% {
766
- background-color: var(--react-autoql-background-color-primary);
767
- color: var(--react-autoql-text-color-primary); }
768
- 0% {
769
- background-color: var(--react-autoql-accent-color);
770
- color: white; } }
771
-
772
- @-webkit-keyframes highlightIn {
773
- 100% {
774
- background-color: var(--react-autoql-accent-color);
775
- color: white; }
776
- 0% {
777
- background-color: var(--react-autoql-background-color-primary);
778
- color: var(--react-autoql-text-color-primary); } }
779
-
780
- @keyframes highlightIn {
781
- 100% {
782
- background-color: var(--react-autoql-accent-color);
783
- color: white; }
784
- 0% {
785
- background-color: var(--react-autoql-background-color-primary);
786
- color: var(--react-autoql-text-color-primary); } }
787
-
788
- .react-autoql-drawer {
789
- font-family: var(--react-autoql-font-family), sans-serif;
790
- line-height: 22px; }
791
-
792
- .react-autoql-drawer.disable-selection {
793
- -webkit-user-select: none;
794
- -moz-user-select: none;
795
- -ms-user-select: none;
796
- user-select: none; }
797
-
798
- .react-autoql-drawer .react-autoql-drawer-content-container {
799
- width: 100%;
800
- height: 100%;
801
- display: flex;
802
- background: var(--react-autoql-background-color-secondary);
803
- overflow: hidden;
804
- border-radius: 4px;
805
- flex-direction: column;
806
- justify-content: stretch; }
877
+ .react-autoql-drawer .react-autoql-drawer-content-container {
878
+ width: 100%;
879
+ height: 100%;
880
+ display: flex;
881
+ background: var(--react-autoql-background-color-secondary);
882
+ overflow: hidden;
883
+ border-radius: 4px;
884
+ flex-direction: column;
885
+ justify-content: stretch; }
807
886
 
808
887
  .react-autoql-drawer .chat-header-container {
809
888
  display: flex;
@@ -848,6 +927,8 @@ tbody::-webkit-scrollbar-thumb {
848
927
  font-weight: normal;
849
928
  float: none;
850
929
  opacity: 1; }
930
+ .react-autoql-drawer .react-autoql-drawer-header-btn.hidden {
931
+ display: none; }
851
932
  .react-autoql-drawer .react-autoql-drawer-header-btn.close span.react-autoql-icon svg {
852
933
  width: 27px;
853
934
  height: 27px; }
@@ -890,36 +971,6 @@ tbody::-webkit-scrollbar-thumb {
890
971
  width: calc(100% - 10px);
891
972
  font-size: 13px; }
892
973
 
893
- .react-autoql-drawer .condition-list-container {
894
- position: absolute;
895
- border: 1px solid var(--react-autoql-text-color-primary);
896
- border-radius: 100rem;
897
- background-color: transparent;
898
- color: var(--react-autoql-text-color-primary);
899
- padding: 0 5px 0 5px;
900
- transition: background-color 250ms ease, box-shadow 250ms ease;
901
- z-index: 9999999;
902
- width: -webkit-fit-content;
903
- width: -moz-fit-content;
904
- width: fit-content;
905
- height: -webkit-fit-content;
906
- height: -moz-fit-content;
907
- height: fit-content; }
908
-
909
- .condition-list-display {
910
- display: none;
911
- background-color: var(--react-autoql-background-color-primary);
912
- border-radius: 4px;
913
- padding: 5px;
914
- width: -webkit-fit-content;
915
- width: -moz-fit-content;
916
- width: fit-content;
917
- height: -webkit-fit-content;
918
- height: -moz-fit-content;
919
- height: fit-content;
920
- padding: 10px;
921
- box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.4); }
922
-
923
974
  .react-autoql-drawer .react-autoql-drawer:focus {
924
975
  outline: none; }
925
976
 
@@ -1061,9 +1112,10 @@ tbody::-webkit-scrollbar-thumb {
1061
1112
  .react-autoql-drawer-tooltip {
1062
1113
  font-family: var(--react-autoql-font-family), sans-serif;
1063
1114
  letter-spacing: 0.04em;
1064
- line-height: 0.9em;
1115
+ line-height: 1.5em;
1065
1116
  padding: 7px 15px;
1066
1117
  transition: none;
1118
+ text-align: left;
1067
1119
  opacity: 1 !important;
1068
1120
  z-index: 99999 !important;
1069
1121
  /* necessary to show up on top of rc drawer */ }
@@ -1080,13 +1132,8 @@ tbody::-webkit-scrollbar-thumb {
1080
1132
  z-index: 99999 !important;
1081
1133
  /* necessary to show up on top of rc drawer */ }
1082
1134
 
1083
- .react-autoql-condition-lock-menu {
1084
- color: var(--react-autoql-text-color-primary);
1085
- background: var(--react-autoql-background-color-primary);
1086
- min-height: 300px; }
1087
-
1088
1135
  .react-tiny-popover-container {
1089
- z-index: 9999;
1136
+ z-index: 99999;
1090
1137
  border: 1px solid #ababab52;
1091
1138
  border-radius: 4px;
1092
1139
  box-shadow: 0px 0 8px rgba(0, 0, 0, 0.15);
@@ -1175,792 +1222,233 @@ tbody::-webkit-scrollbar-thumb {
1175
1222
  .page-switcher-container .tab.react-autoql-explore-queries span.react-autoql-icon svg {
1176
1223
  height: 22px;
1177
1224
  width: 23px; }
1178
- .page-switcher-container.right {
1179
- border-top-left-radius: 5px;
1180
- border-bottom-left-radius: 5px;
1181
- margin-top: 20px;
1182
- margin-left: 20px;
1183
- margin-bottom: 20px;
1184
- flex-direction: column; }
1185
- .page-switcher-container.right .tab {
1186
- box-shadow: inset -18px 0px 8px -10px rgba(0, 0, 0, 0.2); }
1187
- .page-switcher-container.left {
1188
- border-top-right-radius: 5px;
1189
- border-bottom-right-radius: 5px;
1190
- margin-top: 20px;
1191
- margin-right: 20px;
1192
- margin-bottom: 20px;
1193
- margin-left: -5px;
1194
- flex-direction: column; }
1195
- .page-switcher-container.left .tab {
1196
- box-shadow: inset 18px 0px 8px -10px rgba(0, 0, 0, 0.2); }
1197
- .page-switcher-container.top {
1198
- border-bottom-right-radius: 5px;
1199
- border-bottom-left-radius: 5px;
1200
- margin-right: 20px;
1201
- margin-left: 20px;
1202
- margin-bottom: 20px;
1203
- flex-direction: row;
1204
- height: 40px; }
1205
- .page-switcher-container.top .tab {
1206
- box-shadow: inset 0px 12px 8px -10px rgba(0, 0, 0, 0.2); }
1207
- .page-switcher-container.bottom {
1208
- border-top-left-radius: 5px;
1209
- border-top-right-radius: 5px;
1210
- margin-top: 20px;
1211
- margin-left: 20px;
1212
- margin-right: 20px;
1213
- flex-direction: row;
1214
- height: 40px; }
1215
- .page-switcher-container.bottom .tab {
1216
- box-shadow: inset 0px -17px 8px -10px rgba(0, 0, 0, 0.2); }
1217
-
1218
- /* Individual Tabs */
1219
- .page-switcher-container .tab {
1220
- display: flex;
1221
- justify-content: center;
1222
- align-items: center; }
1223
-
1224
- .data-messenger-notification-btn {
1225
- display: flex;
1226
- flex-direction: column;
1227
- justify-content: flex-start;
1228
- line-height: inherit; }
1229
-
1230
- .page-switcher-container.right .tab,
1231
- .page-switcher-container.left .tab {
1232
- height: 65px; }
1233
-
1234
- .page-switcher-container.top .tab,
1235
- .page-switcher-container.bottom .tab {
1236
- width: 65px; }
1237
-
1238
- .page-switcher-container.bottom .tab {
1239
- background: var(--react-autoql-background-color-secondary);
1240
- color: var(--react-autoql-text-color-primary); }
1241
-
1242
- .page-switcher-container .tab.active {
1243
- background: var(--react-autoql-background-color-secondary);
1244
- color: var(--react-autoql-text-color-primary);
1245
- box-shadow: -2px 0px 8px 2px rgba(0, 0, 0, 0.2);
1246
- font-weight: bold;
1247
- position: relative;
1248
- z-index: 2; }
1249
-
1250
- .page-switcher-container.bottom .tab.active {
1251
- background: var(--react-autoql-accent-color);
1252
- color: #fff;
1253
- font-weight: bold; }
1254
-
1255
- /* animations */
1256
- @-webkit-keyframes response-loading1 {
1257
- 0% {
1258
- transform: scale(0); }
1259
- 100% {
1260
- transform: scale(1); } }
1261
- @keyframes response-loading1 {
1262
- 0% {
1263
- transform: scale(0); }
1264
- 100% {
1265
- transform: scale(1); } }
1266
-
1267
- @-webkit-keyframes response-loading3 {
1268
- 0% {
1269
- transform: scale(1); }
1270
- 100% {
1271
- transform: scale(0); } }
1272
-
1273
- @keyframes response-loading3 {
1274
- 0% {
1275
- transform: scale(1); }
1276
- 100% {
1277
- transform: scale(0); } }
1278
-
1279
- @-webkit-keyframes response-loading2 {
1280
- 0% {
1281
- transform: translate(0, 0); }
1282
- 100% {
1283
- transform: translate(19px, 0); } }
1284
-
1285
- @keyframes response-loading2 {
1286
- 0% {
1287
- transform: translate(0, 0); }
1288
- 100% {
1289
- transform: translate(19px, 0); } }
1290
-
1291
- @-webkit-keyframes scale-up-center {
1292
- 0% {
1293
- transform: scale(0); }
1294
- 100% {
1295
- transform: scale(1); } }
1296
-
1297
- @keyframes scale-up-center {
1298
- 0% {
1299
- transform: scale(0); }
1300
- 100% {
1301
- transform: scale(1); } }
1302
-
1303
- @-webkit-keyframes fadeIn {
1304
- 0% {
1305
- opacity: 0; }
1306
- 100% {
1307
- opacity: 1; } }
1308
-
1309
- @keyframes fadeIn {
1310
- 0% {
1311
- opacity: 0; }
1312
- 100% {
1313
- opacity: 1; } }
1314
-
1315
- @-webkit-keyframes slideDown {
1316
- 0% {
1317
- transform: translateY(-100%); }
1318
- 100% {
1319
- transform: translateY(0%); } }
1320
-
1321
- @keyframes slideDown {
1322
- 0% {
1323
- transform: translateY(-100%); }
1324
- 100% {
1325
- transform: translateY(0%); } }
1326
-
1327
- @-webkit-keyframes snackbarFadeout {
1328
- from {
1329
- top: 60px;
1330
- opacity: 1; }
1331
- to {
1332
- top: 30px;
1333
- opacity: 0; } }
1334
-
1335
- @keyframes snackbarFadeout {
1336
- from {
1337
- top: 60px;
1338
- opacity: 1; }
1339
- to {
1340
- top: 30px;
1341
- opacity: 0; } }
1342
-
1343
- @import url("https://fonts.googleapis.com/icon?family=Material+Icons");
1344
- .react-autoql-response-content-container {
1345
- position: relative;
1346
- display: flex;
1347
- flex-direction: column;
1348
- justify-content: center;
1349
- align-items: center;
1350
- background-color: inherit;
1351
- font-size: 14px;
1352
- overflow: hidden;
1353
- max-height: 100%;
1354
- max-width: 100%;
1355
- width: 100%;
1356
- height: 100%;
1357
- color: var(--react-autoql-text-color-primary); }
1358
-
1359
- .react-autoql-response-content-container.table {
1360
- max-height: 100vh !important;
1361
- overflow-y: scroll;
1362
- scrollbar-width: none;
1363
- margin-bottom: 0 !important;
1364
- height: 100%;
1365
- width: 100%; }
1366
-
1367
- .react-autoql-response-content-container.table::-webkit-scrollbar {
1368
- width: 0;
1369
- height: 0; }
1370
-
1371
- .react-autoql-suggestion-btn {
1372
- padding: 6px 14px;
1373
- background: transparent;
1374
- font-family: inherit;
1375
- font-size: 12px;
1376
- margin-bottom: 5px;
1377
- outline: none !important;
1378
- cursor: pointer;
1379
- letter-spacing: 0.05em;
1380
- transition: all 0.1s ease;
1381
- border: 1px solid rgba(0, 0, 0, 0.15);
1382
- border-radius: 5px;
1383
- color: inherit; }
1384
-
1385
- .react-autoql-suggestion-btn:hover {
1386
- border-color: transparent;
1387
- color: white;
1388
- background: var(--react-autoql-accent-color); }
1389
-
1390
- .react-autoql-help-link-btn {
1391
- padding: 6px 14px;
1392
- background: transparent;
1393
- border-radius: 5px;
1394
- font-family: inherit;
1395
- font-size: 12px;
1396
- margin-top: 5px;
1397
- outline: none !important;
1398
- cursor: pointer;
1399
- letter-spacing: 0.05em;
1400
- transition: all 0.1s ease;
1401
- border-color: #e2e2e26e;
1402
- color: inherit; }
1403
-
1404
- .react-autoql-help-link-btn:hover {
1405
- opacity: 0.7; }
1406
-
1407
- .react-autoql-help-link-icon {
1408
- width: 15px;
1409
- height: 15px;
1410
- margin-bottom: -3px;
1411
- margin-right: 3px; }
1412
-
1413
- .react-autoql-suggestion-message {
1414
- height: 100%;
1415
- width: 100%;
1416
- word-break: break-word; }
1417
-
1418
- .react-autoql-suggestions-select {
1419
- position: relative;
1420
- display: inline-block;
1421
- height: 30px;
1422
- background: none;
1423
- outline: none !important;
1424
- border: 1px solid;
1425
- font-family: inherit;
1426
- letter-spacing: 0.05em;
1427
- color: #28a8e0;
1428
- cursor: pointer;
1429
- font-size: inherit; }
1430
-
1431
- .no-columns-error-message {
1432
- text-align: center;
1433
- padding: 20px;
1434
- font-size: 13px; }
1435
- .no-columns-error-message .warning-icon {
1436
- font-size: 22px;
1437
- display: block;
1438
- margin-bottom: -13px;
1439
- text-align: center; }
1440
- .no-columns-error-message .eye-icon {
1441
- vertical-align: bottom;
1442
- line-height: 18px; }
1443
-
1444
- /* query validation */
1445
- .react-autoql-query-validation-selector-container {
1446
- display: inline-block;
1447
- position: relative; }
1448
-
1449
- .react-autoql-select-popup-container.query-validation-select {
1450
- padding: 5px 0;
1451
- letter-spacing: 0.03em;
1452
- font-family: var(--react-autoql-font-family), sans-serif; }
1453
- .react-autoql-select-popup-container.query-validation-select .react-autoql-select-option {
1454
- height: unset;
1455
- font-size: 14px;
1456
- line-height: 24px;
1457
- padding: 0 15px; }
1458
- .react-autoql-select-popup-container.query-validation-select .react-autoql-select-option:last-of-type {
1459
- color: #d84830; }
1460
-
1461
- .react-autoql-query-validation-query {
1462
- text-align: center; }
1463
-
1464
- .react-autoql-query-validation-execute-btn {
1465
- height: 38px;
1466
- background: none;
1467
- border-radius: 4px;
1468
- margin-top: 24px;
1469
- width: 100%;
1470
- color: inherit;
1471
- cursor: pointer;
1472
- outline: none !important;
1473
- border-color: #e2e2e26e;
1474
- transition: all 0.2s ease; }
1475
-
1476
- .react-autoql-query-validation-execute-btn:hover {
1477
- border-color: #28a8e0; }
1478
-
1479
- .react-autoql-execute-query-icon {
1480
- font-size: 16px;
1481
- vertical-align: middle !important;
1482
- padding-right: 3px !important; }
1483
- .react-autoql-execute-query-icon span.react-autoql-icon svg {
1484
- height: 19px;
1485
- width: 19px;
1486
- margin-top: 3px;
1487
- margin-right: 4px;
1488
- vertical-align: top;
1489
- fill: var(--react-autoql-accent-color); }
1490
-
1491
- .react-autoql-query-validation-select {
1492
- position: relative;
1493
- display: inline-block;
1494
- height: 2em;
1495
- background: none;
1496
- outline: none !important;
1497
- border: none;
1498
- letter-spacing: 0.05em;
1499
- font-family: inherit;
1500
- font-size: inherit;
1501
- margin: 0;
1502
- padding: 0;
1503
- border-radius: 0;
1504
- border-bottom: 1px dashed;
1505
- color: var(--react-autoql-accent-color); }
1506
-
1507
- .react-autoql-query-validation-delete-button {
1508
- position: relative;
1509
- cursor: pointer;
1510
- margin-bottom: -2px; }
1511
-
1512
- .react-autoql-chart-tooltip {
1513
- font-family: var(--react-autoql-font-family), sans-serif;
1514
- letter-spacing: 0.04em;
1515
- line-height: 22px;
1516
- font-size: 13px;
1517
- padding: 7px 15px;
1518
- transition: all 0.2s ease !important;
1519
- text-align: left !important;
1520
- opacity: 1 !important;
1521
- z-index: 99999 !important;
1522
- /* necessary to show up on top of rc drawer */ }
1523
-
1524
- .single-value-response {
1525
- color: inherit;
1526
- cursor: unset;
1527
- font-size: 20px; }
1528
- .single-value-response:hover {
1529
- color: inherit; }
1530
-
1531
- .single-value-response.with-drilldown:hover {
1532
- color: inherit;
1533
- text-decoration: underline;
1534
- font-weight: 600;
1535
- cursor: pointer; }
1536
-
1537
- .react-autoql-query-validation-container {
1538
- width: 100%; }
1539
-
1540
- .react-autoql-query-validation-description {
1541
- margin-bottom: 14px; }
1542
-
1543
- .context-menu {
1544
- background: var(--react-autoql-background-color-primary);
1545
- /* height: 100px; */
1546
- width: 150px;
1547
- padding: 10px 0; }
1548
-
1549
- .context-menu-list {
1550
- list-style-type: none;
1551
- width: 100%;
1552
- margin: 0;
1553
- padding: 0; }
1554
-
1555
- .context-menu-list li {
1556
- color: var(--react-autoql-text-color-primary);
1557
- width: 100%;
1558
- height: 35px;
1559
- line-height: 35px;
1560
- padding: 0 20px;
1561
- cursor: pointer; }
1562
-
1563
- .context-menu-list li:hover {
1564
- background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.05)); }
1565
-
1566
- .react-autoql-condition-link {
1567
- background: none !important;
1568
- border: none;
1569
- padding: 0 !important;
1570
- text-decoration: none;
1571
- white-space: nowrap;
1572
- cursor: pointer;
1573
- color: var(--react-autoql-accent-color) !important; }
1574
- .react-autoql-condition-link:hover {
1575
- opacity: 0.9; }
1576
-
1577
- .react-autoql-condition-link-filtered {
1578
- text-decoration: none;
1579
- white-space: nowrap;
1580
- cursor: pointer;
1581
- color: var(--react-autoql-accent-color) !important; }
1582
- .react-autoql-condition-link-filtered .react-autoql-custom-icon {
1583
- font-size: 14px;
1584
- vertical-align: middle;
1585
- margin-top: -4px; }
1586
- .react-autoql-condition-link-filtered:hover {
1587
- opacity: 0.9;
1588
- border: none !important; }
1589
- .react-autoql-condition-link-filtered:hover .react-autoql-custom-icon {
1590
- opacity: 0.9; }
1591
-
1592
- .react-autoql-reverse-translation-container {
1593
- margin-right: auto;
1594
- padding-top: 10px;
1595
- max-height: 150px; }
1596
- .react-autoql-reverse-translation-container .react-autoql-reverse-translation {
1597
- color: var(--react-autoql-text-color-primary);
1598
- background-color: var(--react-autoql-background-color-secondary);
1599
- border-radius: 5px;
1600
- padding: 5px 13px 5px 13px;
1601
- height: 100%; }
1602
-
1603
- .report-like-text-button {
1604
- background: none !important;
1605
- border: none;
1606
- padding: 0 !important;
1607
- color: #26a7df;
1608
- text-decoration: underline;
1609
- cursor: pointer; }
1610
-
1611
- .month-select .react-autoql-radio-btn {
1612
- width: 40px; }
1613
-
1614
- .year-select .react-autoql-radio-btn {
1615
- width: 67px;
1616
- height: 38px;
1617
- line-height: 32px; }
1618
-
1619
- .month-select .react-autoql-radio-btn,
1620
- .year-select .react-autoql-radio-btn {
1621
- margin-top: -1px;
1622
- text-align: center; }
1623
- .month-select .react-autoql-radio-btn:first-child,
1624
- .year-select .react-autoql-radio-btn:first-child {
1625
- border-top-left-radius: 4px !important;
1626
- border-bottom-left-radius: 0px !important;
1627
- margin-left: -1px !important; }
1628
- .month-select .react-autoql-radio-btn:last-child,
1629
- .year-select .react-autoql-radio-btn:last-child {
1630
- border-top-right-radius: 0px !important;
1631
- border-bottom-right-radius: 4px !important; }
1632
- .month-select .react-autoql-radio-btn.bottom-left,
1633
- .year-select .react-autoql-radio-btn.bottom-left {
1634
- border-bottom-left-radius: 4px; }
1635
- .month-select .react-autoql-radio-btn.bottom-right,
1636
- .year-select .react-autoql-radio-btn.bottom-right {
1637
- border-bottom-right-radius: 4px; }
1638
- .month-select .react-autoql-radio-btn.top-right,
1639
- .year-select .react-autoql-radio-btn.top-right {
1640
- border-top-right-radius: 4px; }
1641
- .month-select .react-autoql-radio-btn.last-day,
1642
- .year-select .react-autoql-radio-btn.last-day {
1643
- width: 157px; }
1644
-
1645
- .react-autoql-notifications-button-container {
1646
- position: relative;
1647
- display: inline-block;
1648
- font-size: inherit;
1649
- line-height: 1em;
1650
- width: 1em; }
1651
- .react-autoql-notifications-button-container .react-autoql-notifications-button {
1652
- font-size: 1em;
1653
- line-height: 0;
1654
- vertical-align: bottom; }
1655
- .react-autoql-notifications-button-container .react-autoql-notifications-badge {
1656
- position: absolute;
1657
- border: 2px solid #fff;
1658
- background: #f5222d;
1659
- border-radius: 6.3em;
1660
- line-height: 1.3em;
1661
- left: 0.6em;
1662
- top: -0.8em;
1663
- padding: 0.15em 0.5em;
1664
- text-align: center;
1665
- color: white;
1666
- font-size: 0.5em; }
1667
- .react-autoql-notifications-button-container .react-autoql-notifications-badge-dot {
1668
- position: absolute;
1669
- display: inline-block;
1670
- border: 2px solid #fff;
1671
- background: #f5222d;
1672
- border-radius: 50%;
1673
- height: 0.6em;
1674
- width: 0.6em;
1675
- left: 0.5em;
1676
- top: -2px; }
1677
-
1678
- .notification-rule-add-btn-outer,
1679
- .notification-rule-validate-btn-outer {
1680
- text-align: center;
1681
- border-style: dashed !important;
1682
- height: 38px;
1683
- line-height: 25px;
1684
- margin: 0 !important;
1685
- overflow: hidden; }
1686
-
1687
- .notification-rule-outer-container {
1688
- position: relative;
1689
- border: 1px solid transparent;
1690
- border-radius: 4px; }
1691
- .notification-rule-outer-container.outlined {
1692
- border-color: rgba(0, 0, 0, 0.15);
1693
- padding: 0 20px;
1694
- padding-bottom: 12px; }
1695
-
1696
- .notification-outer-all-any {
1697
- position: absolute;
1698
- left: 0;
1699
- top: 50%; }
1700
-
1701
- .notification-first-group-btn-container {
1702
- display: flex;
1703
- justify-content: space-between; }
1704
-
1705
- .data-alerts-container.read-only .react-autoql-notification-group-container {
1706
- border: none; }
1707
-
1708
- .react-autoql-notification-settings {
1709
- background-color: var(--react-autoql-background-color-secondary);
1710
- color: var(--react-autoql-text-color-primary);
1711
- padding-top: 20px;
1712
- height: 100%; }
1713
- .react-autoql-notification-settings .react-autoql-notification-settings-container {
1714
- margin: 20px;
1715
- margin-top: 10px;
1716
- border-radius: 4px;
1717
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
1718
- background-color: var(--react-autoql-background-color-primary);
1719
- overflow: hidden; }
1720
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item {
1721
- height: 55px;
1722
- line-height: 55px;
1723
- transition: height 0.3s cubic-bezier(0.26, 0.26, 0, 1); }
1724
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-error-status-icon {
1725
- margin-right: 10px;
1726
- cursor: pointer; }
1727
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item #react-autoql-notification-error-status-icon-PROJECT {
1728
- margin-right: 10px; }
1729
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .reset-period-info-icon {
1730
- padding-right: 20px;
1731
- font-size: 17px;
1732
- opacity: 1;
1733
- cursor: pointer;
1734
- color: var(--react-autoql-accent-color); }
1735
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item.CUSTOM:hover {
1736
- background: rgba(0, 0, 0, 0.01); }
1737
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-action-btn {
1738
- opacity: 0;
1739
- margin-right: 20px;
1740
- font-size: 16px;
1741
- transition: all 0.2s ease;
1742
- color: var(--react-autoql-text-color-primary);
1743
- cursor: pointer; }
1744
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-action-btn:hover {
1745
- color: var(--react-autoql-accent-color);
1746
- opacity: 1 !important; }
1747
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item:hover .react-autoql-notification-action-btn {
1748
- opacity: 0.5; }
1749
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item-header {
1750
- display: flex;
1751
- justify-content: space-between;
1752
- height: 56px;
1753
- padding-left: 25px;
1754
- padding-right: 8px;
1755
- border-bottom: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05)); }
1756
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-enable-checkbox {
1757
- margin-bottom: 4px;
1758
- margin-right: 8px; }
1759
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-disable-checkbox {
1760
- margin-bottom: 4px;
1761
- margin-right: 8px;
1762
- opacity: 0.5;
1763
- pointer-events: none; }
1764
- .react-autoql-notification-settings .react-autoql-notification-title-container {
1765
- display: flex;
1766
- justify-content: space-between;
1767
- align-items: center;
1768
- padding: 5px 20px;
1769
- padding-bottom: 0;
1770
- color: var(--react-autoql-text-color-primary); }
1771
- .react-autoql-notification-settings .react-autoql-notification-title-container .react-autoql-notification-add-btn {
1772
- display: inline-block;
1773
- height: 35px;
1774
- width: 35px;
1775
- border-radius: 20px;
1776
- background: var(--react-autoql-accent-color, #26a7df);
1777
- color: var(--react-autoql-accent-text-color);
1778
- line-height: 38px;
1779
- text-align: center;
1780
- font-size: 20px;
1781
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
1782
- transition: all 0.2s ease;
1783
- margin-right: 5px;
1784
- cursor: pointer; }
1785
- .react-autoql-notification-settings .react-autoql-notification-title-container .react-autoql-notification-add-btn:hover {
1786
- box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.32); }
1787
- .react-autoql-notification-settings .react-autoql-notification-setting-display-name {
1788
- white-space: nowrap;
1789
- overflow: hidden;
1790
- text-overflow: ellipsis;
1791
- padding-right: 10px; }
1792
- .react-autoql-notification-settings .react-autoql-notification-setting-display-name .react-autoql-notification-setting-display-name-message {
1793
- opacity: 0.5; }
1794
- .react-autoql-notification-settings .react-autoql-re-initialize-btn {
1795
- vertical-align: middle;
1796
- height: 18px; }
1797
- .react-autoql-notification-settings .react-autoql-re-initialize-btn-text {
1798
- display: flex;
1799
- align-items: center;
1800
- margin-top: -25px; }
1801
-
1802
- .notification-rule-outer-container {
1803
- position: relative;
1804
- border: 1px solid transparent;
1805
- border-radius: 4px;
1806
- padding-bottom: 5px; }
1807
-
1808
- .expression-error-message {
1809
- padding-left: 5px; }
1810
-
1811
- .data-alerts-container.read-only .react-autoql-notification-group-container {
1812
- border: none; }
1225
+ .page-switcher-container.right {
1226
+ border-top-left-radius: 5px;
1227
+ border-bottom-left-radius: 5px;
1228
+ margin-top: 20px;
1229
+ margin-left: 20px;
1230
+ margin-bottom: 20px;
1231
+ flex-direction: column; }
1232
+ .page-switcher-container.right .tab {
1233
+ box-shadow: inset -18px 0px 8px -10px rgba(0, 0, 0, 0.2); }
1234
+ .page-switcher-container.left {
1235
+ border-top-right-radius: 5px;
1236
+ border-bottom-right-radius: 5px;
1237
+ margin-top: 20px;
1238
+ margin-right: 20px;
1239
+ margin-bottom: 20px;
1240
+ margin-left: -5px;
1241
+ flex-direction: column; }
1242
+ .page-switcher-container.left .tab {
1243
+ box-shadow: inset 18px 0px 8px -10px rgba(0, 0, 0, 0.2); }
1244
+ .page-switcher-container.top {
1245
+ border-bottom-right-radius: 5px;
1246
+ border-bottom-left-radius: 5px;
1247
+ margin-right: 20px;
1248
+ margin-left: 20px;
1249
+ margin-bottom: 20px;
1250
+ flex-direction: row;
1251
+ height: 40px; }
1252
+ .page-switcher-container.top .tab {
1253
+ box-shadow: inset 0px 12px 8px -10px rgba(0, 0, 0, 0.2); }
1254
+ .page-switcher-container.bottom {
1255
+ border-top-left-radius: 5px;
1256
+ border-top-right-radius: 5px;
1257
+ margin-top: 20px;
1258
+ margin-left: 20px;
1259
+ margin-right: 20px;
1260
+ flex-direction: row;
1261
+ height: 40px; }
1262
+ .page-switcher-container.bottom .tab {
1263
+ box-shadow: inset 0px -17px 8px -10px rgba(0, 0, 0, 0.2); }
1813
1264
 
1814
- .react-autoql-step-container a {
1815
- color: var(--react-autoql-accent-color, #26a7df); }
1265
+ /* Individual Tabs */
1266
+ .page-switcher-container .tab {
1267
+ display: flex;
1268
+ justify-content: center;
1269
+ align-items: center; }
1816
1270
 
1817
- .frequency-date-select-container {
1818
- margin-top: 10px; }
1271
+ .data-messenger-notification-btn {
1272
+ display: flex;
1273
+ flex-direction: column;
1274
+ justify-content: flex-start;
1275
+ line-height: inherit; }
1819
1276
 
1820
- .notification-frequency-step {
1821
- display: flex; }
1822
- .notification-frequency-step .frequency-category-select {
1823
- position: relative;
1824
- padding-top: 9px; }
1825
- .notification-frequency-step .notification-frequency-select {
1826
- margin-left: 8px; }
1827
- .notification-frequency-step .frequency-repeat-checkbox .react-autoql-checkbox-label {
1828
- line-height: 33px; }
1829
- .notification-frequency-step .frequency-repeat-follow-text {
1830
- line-height: 32px;
1831
- vertical-align: top; }
1832
- .notification-frequency-step .frequency-settings-container {
1833
- flex: 0 1 400px; }
1277
+ .page-switcher-container.right .tab,
1278
+ .page-switcher-container.left .tab {
1279
+ height: 65px; }
1834
1280
 
1835
- .schedule-builder-timezone-section {
1836
- margin: 10px 5px; }
1837
- .schedule-builder-timezone-section .react-autoql-timezone-select {
1838
- display: inline-block;
1839
- width: 300px; }
1281
+ .page-switcher-container.top .tab,
1282
+ .page-switcher-container.bottom .tab {
1283
+ width: 65px; }
1840
1284
 
1841
- .notification-list-loading-container {
1842
- text-align: center;
1843
- padding-top: 100px;
1844
- color: var(--react-autoql-text-color-primary);
1845
- height: 100%;
1846
- overflow: hidden;
1847
- background: var(--react-autoql-background-color-secondary); }
1285
+ .page-switcher-container.bottom .tab {
1286
+ background: var(--react-autoql-background-color-secondary);
1287
+ color: var(--react-autoql-text-color-primary); }
1848
1288
 
1849
- .empty-notifications-message {
1289
+ .page-switcher-container .tab.active {
1290
+ background: var(--react-autoql-background-color-secondary);
1850
1291
  color: var(--react-autoql-text-color-primary);
1851
- text-align: center;
1852
- margin-top: 75px; }
1853
- .empty-notifications-message div {
1854
- opacity: 0.6; }
1855
- .empty-notifications-message .empty-notifications-title {
1856
- font-size: 16px;
1857
- font-weight: bold;
1858
- margin-bottom: 5px; }
1859
- .empty-notifications-message .empty-notifications-img {
1860
- width: 250px;
1861
- height: 250px; }
1862
-
1863
- .react-autoql-notification-list-container {
1864
- height: 100%;
1865
- padding: 20px;
1866
- overflow-y: auto;
1867
- background: var(--react-autoql-background-color-secondary); }
1292
+ box-shadow: -2px 0px 8px 2px rgba(0, 0, 0, 0.2);
1293
+ font-weight: bold;
1294
+ position: relative;
1295
+ z-index: 2; }
1868
1296
 
1869
- .react-autoql-notification-dismiss-all {
1870
- text-align: right;
1871
- margin-bottom: 12px;
1872
- padding-right: 10px;
1873
- color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.4));
1874
- transition: color 0.1s ease; }
1875
- .react-autoql-notification-dismiss-all span {
1876
- opacity: 0.8;
1877
- cursor: pointer; }
1878
- .react-autoql-notification-dismiss-all span:hover {
1879
- opacity: 1; }
1297
+ .page-switcher-container.bottom .tab.active {
1298
+ background: var(--react-autoql-accent-color);
1299
+ color: #fff;
1300
+ font-weight: bold; }
1880
1301
 
1881
- .react-autoql-notification-display-name-input {
1882
- width: 100%; }
1302
+ /* animations */
1303
+ @-webkit-keyframes response-loading1 {
1304
+ 0% {
1305
+ transform: scale(0); }
1306
+ 100% {
1307
+ transform: scale(1); } }
1308
+ @keyframes response-loading1 {
1309
+ 0% {
1310
+ transform: scale(0); }
1311
+ 100% {
1312
+ transform: scale(1); } }
1883
1313
 
1884
- .react-autoql-notification-message-input {
1885
- width: 100%; }
1314
+ @-webkit-keyframes response-loading3 {
1315
+ 0% {
1316
+ transform: scale(1); }
1317
+ 100% {
1318
+ transform: scale(0); } }
1886
1319
 
1887
- .react-autoql-notification-list-item:nth-of-type(0) {
1888
- -webkit-animation-delay: 0s;
1889
- animation-delay: 0s; }
1320
+ @keyframes response-loading3 {
1321
+ 0% {
1322
+ transform: scale(1); }
1323
+ 100% {
1324
+ transform: scale(0); } }
1890
1325
 
1891
- .react-autoql-notification-list-item:nth-of-type(1) {
1892
- -webkit-animation-delay: 0.1s;
1893
- animation-delay: 0.1s; }
1326
+ @-webkit-keyframes response-loading2 {
1327
+ 0% {
1328
+ transform: translate(0, 0); }
1329
+ 100% {
1330
+ transform: translate(19px, 0); } }
1894
1331
 
1895
- .react-autoql-notification-list-item:nth-of-type(2) {
1896
- -webkit-animation-delay: 0.2s;
1897
- animation-delay: 0.2s; }
1332
+ @keyframes response-loading2 {
1333
+ 0% {
1334
+ transform: translate(0, 0); }
1335
+ 100% {
1336
+ transform: translate(19px, 0); } }
1898
1337
 
1899
- .react-autoql-notification-list-item:nth-of-type(3) {
1900
- -webkit-animation-delay: 0.3s;
1901
- animation-delay: 0.3s; }
1338
+ @-webkit-keyframes scale-up-center {
1339
+ 0% {
1340
+ transform: scale(0); }
1341
+ 100% {
1342
+ transform: scale(1); } }
1902
1343
 
1903
- .react-autoql-notification-list-item:nth-of-type(4) {
1904
- -webkit-animation-delay: 0.4s;
1905
- animation-delay: 0.4s; }
1344
+ @keyframes scale-up-center {
1345
+ 0% {
1346
+ transform: scale(0); }
1347
+ 100% {
1348
+ transform: scale(1); } }
1906
1349
 
1907
- .react-autoql-notification-list-item:nth-of-type(5) {
1908
- -webkit-animation-delay: 0.5s;
1909
- animation-delay: 0.5s; }
1350
+ @-webkit-keyframes fadeIn {
1351
+ 0% {
1352
+ opacity: 0; }
1353
+ 100% {
1354
+ opacity: 1; } }
1910
1355
 
1911
- .react-autoql-notification-list-item:nth-of-type(6) {
1912
- -webkit-animation-delay: 0.6s;
1913
- animation-delay: 0.6s; }
1356
+ @keyframes fadeIn {
1357
+ 0% {
1358
+ opacity: 0; }
1359
+ 100% {
1360
+ opacity: 1; } }
1914
1361
 
1915
- .react-autoql-notification-list-item:nth-of-type(7) {
1916
- -webkit-animation-delay: 0.7s;
1917
- animation-delay: 0.7s; }
1362
+ @-webkit-keyframes slideDown {
1363
+ 0% {
1364
+ transform: translateY(-100%); }
1365
+ 100% {
1366
+ transform: translateY(0%); } }
1918
1367
 
1919
- .react-autoql-notification-list-item:nth-of-type(8) {
1920
- -webkit-animation-delay: 0.8s;
1921
- animation-delay: 0.8s; }
1368
+ @keyframes slideDown {
1369
+ 0% {
1370
+ transform: translateY(-100%); }
1371
+ 100% {
1372
+ transform: translateY(0%); } }
1922
1373
 
1923
- .react-autoql-notification-list-item:nth-of-type(9) {
1924
- -webkit-animation-delay: 0.9s;
1925
- animation-delay: 0.9s; }
1374
+ @-webkit-keyframes snackbarFadeout {
1375
+ from {
1376
+ top: 60px;
1377
+ opacity: 1; }
1378
+ to {
1379
+ top: 30px;
1380
+ opacity: 0; } }
1926
1381
 
1927
- .react-autoql-notification-list-item:nth-of-type(10) {
1928
- -webkit-animation-delay: 1s;
1929
- animation-delay: 1s; }
1382
+ @keyframes snackbarFadeout {
1383
+ from {
1384
+ top: 60px;
1385
+ opacity: 1; }
1386
+ to {
1387
+ top: 30px;
1388
+ opacity: 0; } }
1930
1389
 
1931
- @-webkit-keyframes slideIn {
1932
- 0% {
1933
- opacity: 0;
1934
- top: 500px; }
1935
- 100% {
1936
- opacity: 1;
1937
- top: 0; } }
1390
+ .react-autoql-notifications-button-container {
1391
+ position: relative;
1392
+ display: inline-block;
1393
+ font-size: inherit;
1394
+ line-height: 1em;
1395
+ width: 1em; }
1396
+ .react-autoql-notifications-button-container .react-autoql-notifications-button {
1397
+ font-size: 1em;
1398
+ line-height: 0;
1399
+ vertical-align: bottom; }
1400
+ .react-autoql-notifications-button-container .react-autoql-notifications-badge {
1401
+ position: absolute;
1402
+ border: 2px solid #fff;
1403
+ background: #f5222d;
1404
+ border-radius: 6.3em;
1405
+ line-height: 1.3em;
1406
+ left: 0.6em;
1407
+ top: -0.8em;
1408
+ padding: 0.15em 0.5em;
1409
+ text-align: center;
1410
+ color: white;
1411
+ font-size: 0.5em; }
1412
+ .react-autoql-notifications-button-container .react-autoql-notifications-badge-dot {
1413
+ position: absolute;
1414
+ display: inline-block;
1415
+ border: 2px solid #fff;
1416
+ background: #f5222d;
1417
+ border-radius: 50%;
1418
+ height: 0.6em;
1419
+ width: 0.6em;
1420
+ left: 0.5em;
1421
+ top: -2px; }
1938
1422
 
1939
- .notification-modal-content .react-autoql-step-content p {
1940
- margin-bottom: 0.5em;
1941
- margin-top: 0.5em;
1942
- padding-left: 8px; }
1423
+ .notification-rule-add-btn-outer,
1424
+ .notification-rule-validate-btn-outer {
1425
+ text-align: center;
1426
+ border-style: dashed !important;
1427
+ height: 38px;
1428
+ line-height: 25px;
1429
+ margin: 0 !important;
1430
+ overflow: hidden; }
1943
1431
 
1944
- .notification-modal-content .step-btn-container {
1945
- text-align: right;
1946
- display: flex;
1947
- min-height: 50px; }
1432
+ .notification-rule-outer-container {
1433
+ position: relative;
1434
+ border: 1px solid transparent;
1435
+ border-radius: 4px; }
1436
+ .notification-rule-outer-container.outlined {
1437
+ border-color: rgba(0, 0, 0, 0.15);
1438
+ padding: 0 20px;
1439
+ padding-bottom: 12px; }
1948
1440
 
1949
- .expression-valid-checkmark.react-autoql-icon svg {
1950
- color: var(--react-autoql-success-color); }
1441
+ .notification-outer-all-any {
1442
+ position: absolute;
1443
+ left: 0;
1444
+ top: 50%; }
1951
1445
 
1952
- .expression-invalid-message-container {
1953
- max-width: 75%;
1954
- float: left;
1955
- text-align: left !important;
1446
+ .notification-first-group-btn-container {
1956
1447
  display: flex;
1957
- flex-direction: row;
1958
- align-items: left;
1959
- justify-content: left; }
1448
+ justify-content: space-between; }
1960
1449
 
1961
- .expression-invalid-message {
1962
- color: var(--react-autoql-danger-color);
1963
- display: 'inline-block'; }
1450
+ .data-alerts-container.read-only .react-autoql-notification-group-container {
1451
+ border: none; }
1964
1452
 
1965
1453
  .react-autoql-notification-list-item {
1966
1454
  display: flex;
@@ -2162,21 +1650,278 @@ tbody::-webkit-scrollbar-thumb {
2162
1650
  color: white;
2163
1651
  background-color: var(--react-autoql-accent-color, #26a7df);
2164
1652
  text-align: center;
2165
- margin-top: 13px;
2166
- margin-right: 17px; }
2167
- .react-autoql-notification-list-item .react-autoql-notification-display-name-container {
2168
- flex: 1;
2169
- line-height: 23px;
2170
- padding: 13px 0px;
2171
- transition: color 0.2s ease; }
2172
- .react-autoql-notification-list-item .react-autoql-notification-display-name-container .react-autoql-notification-display-name {
2173
- font-size: 18px;
2174
- color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.7)); }
2175
- .react-autoql-notification-list-item .react-autoql-notification-display-name-container .react-autoql-notification-timestamp {
2176
- font-size: 12px;
1653
+ margin-top: 13px;
1654
+ margin-right: 17px; }
1655
+ .react-autoql-notification-list-item .react-autoql-notification-display-name-container {
1656
+ flex: 1;
1657
+ line-height: 23px;
1658
+ padding: 13px 0px;
1659
+ transition: color 0.2s ease; }
1660
+ .react-autoql-notification-list-item .react-autoql-notification-display-name-container .react-autoql-notification-display-name {
1661
+ font-size: 18px;
1662
+ color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.7)); }
1663
+ .react-autoql-notification-list-item .react-autoql-notification-display-name-container .react-autoql-notification-timestamp {
1664
+ font-size: 12px;
1665
+ opacity: 0.5; }
1666
+ .react-autoql-notification-list-item .react-autoql-notification-display-name-container .react-autoql-notification-timestamp span.react-autoql-icon svg {
1667
+ margin-bottom: -1px; }
1668
+
1669
+ .notification-rule-outer-container {
1670
+ position: relative;
1671
+ border: 1px solid transparent;
1672
+ border-radius: 4px;
1673
+ padding-bottom: 5px; }
1674
+
1675
+ .expression-error-message {
1676
+ padding-left: 5px; }
1677
+
1678
+ .data-alerts-container.read-only .react-autoql-notification-group-container {
1679
+ border: none; }
1680
+
1681
+ .notification-list-loading-container {
1682
+ text-align: center;
1683
+ padding-top: 100px;
1684
+ color: var(--react-autoql-text-color-primary);
1685
+ height: 100%;
1686
+ overflow: hidden;
1687
+ background: var(--react-autoql-background-color-secondary); }
1688
+
1689
+ .empty-notifications-message {
1690
+ color: var(--react-autoql-text-color-primary);
1691
+ text-align: center;
1692
+ margin-top: 75px; }
1693
+ .empty-notifications-message div {
1694
+ opacity: 0.6; }
1695
+ .empty-notifications-message .empty-notifications-title {
1696
+ font-size: 16px;
1697
+ font-weight: bold;
1698
+ margin-bottom: 5px; }
1699
+ .empty-notifications-message .empty-notifications-img {
1700
+ width: 250px;
1701
+ height: 250px; }
1702
+
1703
+ .react-autoql-notification-list-container {
1704
+ height: 100%;
1705
+ padding: 20px;
1706
+ overflow-y: auto;
1707
+ background: var(--react-autoql-background-color-secondary); }
1708
+
1709
+ .react-autoql-notification-dismiss-all {
1710
+ text-align: right;
1711
+ margin-bottom: 12px;
1712
+ padding-right: 10px;
1713
+ color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.4));
1714
+ transition: color 0.1s ease; }
1715
+ .react-autoql-notification-dismiss-all span {
1716
+ opacity: 0.8;
1717
+ cursor: pointer; }
1718
+ .react-autoql-notification-dismiss-all span:hover {
1719
+ opacity: 1; }
1720
+
1721
+ .react-autoql-notification-display-name-input {
1722
+ width: 100%; }
1723
+
1724
+ .react-autoql-notification-message-input {
1725
+ width: 100%; }
1726
+
1727
+ .react-autoql-notification-list-item:nth-of-type(0) {
1728
+ -webkit-animation-delay: 0s;
1729
+ animation-delay: 0s; }
1730
+
1731
+ .react-autoql-notification-list-item:nth-of-type(1) {
1732
+ -webkit-animation-delay: 0.1s;
1733
+ animation-delay: 0.1s; }
1734
+
1735
+ .react-autoql-notification-list-item:nth-of-type(2) {
1736
+ -webkit-animation-delay: 0.2s;
1737
+ animation-delay: 0.2s; }
1738
+
1739
+ .react-autoql-notification-list-item:nth-of-type(3) {
1740
+ -webkit-animation-delay: 0.3s;
1741
+ animation-delay: 0.3s; }
1742
+
1743
+ .react-autoql-notification-list-item:nth-of-type(4) {
1744
+ -webkit-animation-delay: 0.4s;
1745
+ animation-delay: 0.4s; }
1746
+
1747
+ .react-autoql-notification-list-item:nth-of-type(5) {
1748
+ -webkit-animation-delay: 0.5s;
1749
+ animation-delay: 0.5s; }
1750
+
1751
+ .react-autoql-notification-list-item:nth-of-type(6) {
1752
+ -webkit-animation-delay: 0.6s;
1753
+ animation-delay: 0.6s; }
1754
+
1755
+ .react-autoql-notification-list-item:nth-of-type(7) {
1756
+ -webkit-animation-delay: 0.7s;
1757
+ animation-delay: 0.7s; }
1758
+
1759
+ .react-autoql-notification-list-item:nth-of-type(8) {
1760
+ -webkit-animation-delay: 0.8s;
1761
+ animation-delay: 0.8s; }
1762
+
1763
+ .react-autoql-notification-list-item:nth-of-type(9) {
1764
+ -webkit-animation-delay: 0.9s;
1765
+ animation-delay: 0.9s; }
1766
+
1767
+ .react-autoql-notification-list-item:nth-of-type(10) {
1768
+ -webkit-animation-delay: 1s;
1769
+ animation-delay: 1s; }
1770
+
1771
+ @-webkit-keyframes slideIn {
1772
+ 0% {
1773
+ opacity: 0;
1774
+ top: 500px; }
1775
+ 100% {
1776
+ opacity: 1;
1777
+ top: 0; } }
1778
+
1779
+ .react-autoql-notification-settings {
1780
+ background-color: var(--react-autoql-background-color-secondary);
1781
+ color: var(--react-autoql-text-color-primary);
1782
+ padding-top: 20px;
1783
+ height: 100%; }
1784
+ .react-autoql-notification-settings .react-autoql-notification-settings-container {
1785
+ margin: 20px;
1786
+ margin-top: 10px;
1787
+ border-radius: 4px;
1788
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
1789
+ background-color: var(--react-autoql-background-color-primary);
1790
+ overflow: hidden; }
1791
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item {
1792
+ height: 55px;
1793
+ line-height: 55px;
1794
+ transition: height 0.3s cubic-bezier(0.26, 0.26, 0, 1); }
1795
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-error-status-icon {
1796
+ margin-right: 10px;
1797
+ cursor: pointer; }
1798
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item #react-autoql-notification-error-status-icon-PROJECT {
1799
+ margin-right: 10px; }
1800
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .reset-period-info-icon {
1801
+ padding-right: 20px;
1802
+ font-size: 17px;
1803
+ opacity: 1;
1804
+ cursor: pointer;
1805
+ color: var(--react-autoql-accent-color); }
1806
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item.CUSTOM:hover {
1807
+ background: rgba(0, 0, 0, 0.01); }
1808
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-action-btn {
1809
+ opacity: 0;
1810
+ margin-right: 20px;
1811
+ font-size: 16px;
1812
+ transition: all 0.2s ease;
1813
+ color: var(--react-autoql-text-color-primary);
1814
+ cursor: pointer; }
1815
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-action-btn:hover {
1816
+ color: var(--react-autoql-accent-color);
1817
+ opacity: 1 !important; }
1818
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item:hover .react-autoql-notification-action-btn {
1819
+ opacity: 0.5; }
1820
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item-header {
1821
+ display: flex;
1822
+ justify-content: space-between;
1823
+ height: 56px;
1824
+ padding-left: 25px;
1825
+ padding-right: 8px;
1826
+ border-bottom: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05)); }
1827
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-enable-checkbox {
1828
+ margin-bottom: 4px;
1829
+ margin-right: 8px; }
1830
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-disable-checkbox {
1831
+ margin-bottom: 4px;
1832
+ margin-right: 8px;
1833
+ opacity: 0.5;
1834
+ pointer-events: none; }
1835
+ .react-autoql-notification-settings .react-autoql-notification-title-container {
1836
+ display: flex;
1837
+ justify-content: space-between;
1838
+ align-items: center;
1839
+ padding: 5px 20px;
1840
+ padding-bottom: 0;
1841
+ color: var(--react-autoql-text-color-primary); }
1842
+ .react-autoql-notification-settings .react-autoql-notification-title-container .react-autoql-notification-add-btn {
1843
+ display: inline-block;
1844
+ height: 35px;
1845
+ width: 35px;
1846
+ border-radius: 20px;
1847
+ background: var(--react-autoql-accent-color, #26a7df);
1848
+ color: var(--react-autoql-accent-text-color);
1849
+ line-height: 38px;
1850
+ text-align: center;
1851
+ font-size: 20px;
1852
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
1853
+ transition: all 0.2s ease;
1854
+ margin-right: 5px;
1855
+ cursor: pointer; }
1856
+ .react-autoql-notification-settings .react-autoql-notification-title-container .react-autoql-notification-add-btn:hover {
1857
+ box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.32); }
1858
+ .react-autoql-notification-settings .react-autoql-notification-setting-display-name {
1859
+ white-space: nowrap;
1860
+ overflow: hidden;
1861
+ text-overflow: ellipsis;
1862
+ padding-right: 10px; }
1863
+ .react-autoql-notification-settings .react-autoql-notification-setting-display-name .react-autoql-notification-setting-display-name-message {
2177
1864
  opacity: 0.5; }
2178
- .react-autoql-notification-list-item .react-autoql-notification-display-name-container .react-autoql-notification-timestamp span.react-autoql-icon svg {
2179
- margin-bottom: -1px; }
1865
+ .react-autoql-notification-settings .react-autoql-re-initialize-btn {
1866
+ vertical-align: middle;
1867
+ height: 18px; }
1868
+ .react-autoql-notification-settings .react-autoql-re-initialize-btn-text {
1869
+ display: flex;
1870
+ align-items: center;
1871
+ margin-top: -25px; }
1872
+
1873
+ .react-autoql-step-container a {
1874
+ color: var(--react-autoql-accent-color, #26a7df); }
1875
+
1876
+ .frequency-date-select-container {
1877
+ margin-top: 10px; }
1878
+
1879
+ .notification-frequency-step {
1880
+ display: flex; }
1881
+ .notification-frequency-step .frequency-category-select {
1882
+ position: relative;
1883
+ padding-top: 9px; }
1884
+ .notification-frequency-step .notification-frequency-select {
1885
+ margin-left: 8px; }
1886
+ .notification-frequency-step .frequency-repeat-checkbox .react-autoql-checkbox-label {
1887
+ line-height: 33px; }
1888
+ .notification-frequency-step .frequency-repeat-follow-text {
1889
+ line-height: 32px;
1890
+ vertical-align: top; }
1891
+ .notification-frequency-step .frequency-settings-container {
1892
+ flex: 0 1 400px; }
1893
+
1894
+ .schedule-builder-timezone-section {
1895
+ margin: 10px 5px; }
1896
+ .schedule-builder-timezone-section .react-autoql-timezone-select {
1897
+ display: inline-block;
1898
+ width: 300px; }
1899
+
1900
+ .notification-modal-content .react-autoql-step-content p {
1901
+ margin-bottom: 0.5em;
1902
+ margin-top: 0.5em;
1903
+ padding-left: 8px; }
1904
+
1905
+ .notification-modal-content .step-btn-container {
1906
+ text-align: right;
1907
+ display: flex;
1908
+ min-height: 20px; }
1909
+
1910
+ .expression-valid-checkmark.react-autoql-icon svg {
1911
+ color: var(--react-autoql-success-color); }
1912
+
1913
+ .expression-invalid-message-container {
1914
+ max-width: 75%;
1915
+ float: left;
1916
+ text-align: left !important;
1917
+ display: flex;
1918
+ flex-direction: row;
1919
+ align-items: left;
1920
+ justify-content: left; }
1921
+
1922
+ .expression-invalid-message {
1923
+ color: var(--react-autoql-danger-color);
1924
+ display: 'inline-block'; }
2180
1925
 
2181
1926
  .react-autoql-dashboard .react-autoql-dashboard-tile {
2182
1927
  background: var(--react-autoql-background-color-primary, #fff);
@@ -2198,13 +1943,6 @@ tbody::-webkit-scrollbar-thumb {
2198
1943
  flex-direction: column;
2199
1944
  align-items: center; }
2200
1945
 
2201
- .dashboard-data-limit-warning-icon {
2202
- color: var(--react-autoql-warning-color) !important;
2203
- position: absolute !important;
2204
- bottom: 40px;
2205
- right: 16px;
2206
- font-size: 20px; }
2207
-
2208
1946
  .react-autoql-dashboard-tile-drag-handle {
2209
1947
  transition: opacity 0.3s ease;
2210
1948
  position: absolute;
@@ -2668,6 +2406,7 @@ tbody::-webkit-scrollbar-thumb {
2668
2406
  .dashboard-tile-response-container .dashboard-tile-split-pane-container {
2669
2407
  background: inherit; }
2670
2408
 
2409
+
2671
2410
  .react-autoql-btn {
2672
2411
  border-radius: 4px;
2673
2412
  cursor: pointer;
@@ -2686,7 +2425,7 @@ tbody::-webkit-scrollbar-thumb {
2686
2425
  margin: 2px 3px; }
2687
2426
 
2688
2427
  .react-autoql-btn.large {
2689
- padding: 5px 16px;
2428
+ padding: 10px 16px;
2690
2429
  margin: 2px 5px; }
2691
2430
 
2692
2431
  .react-autoql-btn.default {
@@ -2792,41 +2531,223 @@ tbody::-webkit-scrollbar-thumb {
2792
2531
  .react-autoql-modal-close-btn:hover {
2793
2532
  opacity: 1 !important; }
2794
2533
 
2795
- .autoql-options-toolbar {
2534
+ .react-autoql-radio-btn-container.react-autoql-radio-btn-container-list {
2535
+ display: inline-block; }
2536
+
2537
+ .react-autoql-radio-btn-container.react-autoql-radio-btn-container-buttons {
2538
+ display: inline-flex;
2539
+ justify-content: stretch;
2540
+ align-items: stretch;
2541
+ border-radius: 4px; }
2542
+ .react-autoql-radio-btn-container.react-autoql-radio-btn-container-buttons .react-autoql-radio-btn {
2543
+ display: inline-flex;
2544
+ justify-content: center;
2545
+ align-items: center; }
2546
+
2547
+ .react-autoql-radio-btn-container [type='radio']:checked,
2548
+ .react-autoql-radio-btn-container [type='radio']:not(:checked) {
2796
2549
  position: absolute;
2797
- background: inherit;
2798
- padding: 5px;
2799
- border-radius: 6px;
2800
- line-height: 28px;
2801
- background: var(--react-autoql-background-color-primary);
2802
- border: 1px solid var(--react-autoql-border-color); }
2803
- .autoql-options-toolbar.vertical .react-autoql-toolbar-btn {
2804
- display: block; }
2805
- .autoql-options-toolbar .react-autoql-toolbar-btn {
2806
- color: var(--react-autoql-text-color-primary); }
2550
+ left: -9999px; }
2551
+
2552
+ .react-autoql-radio-btn-container [type='radio']:checked + label,
2553
+ .react-autoql-radio-btn-container [type='radio']:not(:checked) + label {
2554
+ position: relative;
2555
+ padding-left: 28px;
2556
+ cursor: pointer;
2557
+ line-height: 20px;
2558
+ display: inline-block; }
2559
+
2560
+ .react-autoql-radio-btn-container [type='radio']:checked + label:before,
2561
+ .react-autoql-radio-btn-container [type='radio']:not(:checked) + label:before {
2562
+ content: '';
2563
+ position: absolute;
2564
+ left: 1px;
2565
+ top: 1px;
2566
+ width: 18px;
2567
+ height: 18px;
2568
+ border: 1px solid #ddd;
2569
+ border-radius: 100%;
2570
+ background: #fff; }
2571
+
2572
+ .react-autoql-radio-btn-container [type='radio']:checked + label:after,
2573
+ .react-autoql-radio-btn-container [type='radio']:not(:checked) + label:after {
2574
+ content: '';
2575
+ width: 12px;
2576
+ height: 12px;
2577
+ background: var(--react-autoql-accent-color, #26a7df);
2578
+ position: absolute;
2579
+ top: 4px;
2580
+ left: 4px;
2581
+ border-radius: 100%;
2582
+ transition: all 0.2s ease; }
2583
+
2584
+ .react-autoql-radio-btn-container [type='radio']:not(:checked) + label:after {
2585
+ opacity: 0;
2586
+ transform: scale(0); }
2587
+
2588
+ .react-autoql-radio-btn-container [type='radio']:checked + label:after {
2589
+ opacity: 1;
2590
+ transform: scale(1); }
2591
+
2592
+ .react-autoql-radio-btn-container .react-autoql-radio-btn {
2593
+ position: relative;
2594
+ display: inline-block;
2595
+ padding: 3px 12px;
2596
+ border: 1px solid var(--react-autoql-border-color, #dcdcdc);
2597
+ margin-left: -1px;
2598
+ transition: all 0.2s ease;
2599
+ cursor: pointer; }
2600
+ .react-autoql-radio-btn-container .react-autoql-radio-btn:not(:first-child) {
2601
+ border-left: 1px solid transparent; }
2602
+ .react-autoql-radio-btn-container .react-autoql-radio-btn.active {
2603
+ background-color: var(--react-autoql-accent-color, #26a7df);
2604
+ border-color: var(--react-autoql-accent-color, #26a7df);
2605
+ color: #fff; }
2606
+ .react-autoql-radio-btn-container .react-autoql-radio-btn.active.outlined {
2607
+ background-color: inherit;
2608
+ color: var(--react-autoql-accent-color, #26a7df); }
2609
+ .react-autoql-radio-btn-container .react-autoql-radio-btn:hover:not(.active) {
2610
+ border-color: var(--react-autoql-accent-color, #26a7df);
2611
+ color: var(--react-autoql-accent-color, #26a7df); }
2612
+ .react-autoql-radio-btn-container .react-autoql-radio-btn:first-child {
2613
+ border-top-left-radius: 4px;
2614
+ border-bottom-left-radius: 4px;
2615
+ margin-left: 0; }
2616
+ .react-autoql-radio-btn-container .react-autoql-radio-btn:last-child {
2617
+ border-top-right-radius: 4px;
2618
+ border-bottom-right-radius: 4px; }
2619
+
2620
+ .content {
2621
+ margin: 2rem; }
2622
+
2623
+ .react-autoql-checkbox-container {
2624
+ display: inline-block;
2625
+ vertical-align: middle; }
2626
+
2627
+ .react-autoql-checkbox {
2628
+ display: flex;
2629
+ align-items: center;
2630
+ position: relative;
2631
+ cursor: pointer; }
2632
+ .react-autoql-checkbox .react-autoql-checkbox--switch__input:checked,
2633
+ .react-autoql-checkbox .react-autoql-checkbox__input:checked {
2634
+ border-color: var(--react-autoql-accent-color, #26a7df);
2635
+ background: var(--react-autoql-accent-color, #26a7df); }
2636
+
2637
+ .react-autoql-checkbox__label {
2638
+ flex-shrink: 0;
2639
+ padding: 0.5rem 1rem;
2640
+ color: #fff;
2641
+ cursor: pointer; }
2642
+
2643
+ .react-autoql-checkbox__input {
2644
+ position: relative;
2645
+ flex-shrink: 0;
2646
+ width: 20px;
2647
+ height: 20px;
2648
+ appearance: none;
2649
+ -webkit-appearance: none;
2650
+ -moz-appearance: none;
2651
+ outline: none;
2652
+ background: transparent;
2653
+ border: 1px solid;
2654
+ border-color: var(--react-autoql-accent-color, #26a7df);
2655
+ border-radius: 2px;
2656
+ cursor: pointer; }
2657
+
2658
+ .react-autoql-checkbox__input::before {
2659
+ content: ' ';
2660
+ position: absolute;
2661
+ top: 50%;
2662
+ right: 50%;
2663
+ bottom: 50%;
2664
+ left: 50%;
2665
+ transition: all 0.2s;
2666
+ background: var(--react-autoql-accent-color, #26a7df); }
2667
+
2668
+ .react-autoql-checkbox-tick {
2669
+ position: absolute;
2670
+ color: white;
2671
+ left: 3px;
2672
+ line-height: 20px;
2673
+ pointer-events: none; }
2674
+
2675
+ .react-autoql-checkbox--switch__input::before {
2676
+ box-shadow: 0 0 2px 1px #00000030; }
2677
+
2678
+ .react-autoql-checkbox__input:checked::before,
2679
+ .react-autoql-checkbox__input:indeterminate::before {
2680
+ top: 0;
2681
+ right: 0;
2682
+ bottom: 0;
2683
+ left: 0; }
2684
+
2685
+ .react-autoql-checkbox__input:indeterminate::before {
2686
+ top: 7px;
2687
+ bottom: 7px; }
2688
+
2689
+ .react-autoql-checkbox__input:disabled {
2690
+ border-color: #5a5358;
2691
+ cursor: default; }
2692
+
2693
+ .react-autoql-checkbox__input:disabled::before {
2694
+ background-color: #5a5358; }
2695
+
2696
+ .react-autoql-checkbox__input:disabled + .react-autoql-checkbox__label {
2697
+ color: gray;
2698
+ cursor: default; }
2699
+
2700
+ .react-autoql-checkbox--has-error__input {
2701
+ border-color: red;
2702
+ background-color: rgba(255, 0, 0, 0.2); }
2703
+
2704
+ .react-autoql-checkbox--has-error__input::before {
2705
+ background-color: red; }
2706
+
2707
+ .react-autoql-checkbox--switch__label::after {
2708
+ content: 'off';
2709
+ margin-left: 0.25rem; }
2710
+
2711
+ .react-autoql-checkbox--switch__input {
2712
+ width: 36px;
2713
+ height: 20px;
2714
+ border-radius: 16px;
2715
+ background: var(--react-autoql-background-color-tertiary);
2716
+ border: 1px solid var(--react-autoql-background-color-tertiary); }
2717
+
2718
+ .react-autoql-checkbox--switch__input::before {
2719
+ top: 2px;
2720
+ right: 18px;
2721
+ bottom: 2px;
2722
+ left: 2px;
2723
+ border-radius: 50%;
2724
+ background: #fff; }
2725
+
2726
+ .react-autoql-checkbox--switch__input:checked
2727
+ + .react-autoql-checkbox--switch__label::after {
2728
+ content: 'on'; }
2729
+
2730
+ .react-autoql-checkbox--switch__input:checked::before {
2731
+ right: 2px;
2732
+ left: 18px;
2733
+ top: 2px;
2734
+ bottom: 2px; }
2807
2735
 
2808
- .copy-sql-modal-content {
2809
- position: relative;
2810
- height: 60vh; }
2811
- .copy-sql-modal-content .copy-sql-formatted-text {
2812
- height: 100%;
2813
- width: 100%;
2814
- padding: 10px;
2815
- resize: none;
2816
- background: var(--react-autoql-background-color-secondary); }
2817
- .copy-sql-modal-content .copy-sql-btn {
2818
- color: var(--react-autoql-text-color);
2819
- background-color: var(--react-autoql-background-color-primary);
2820
- position: absolute;
2821
- top: 3px;
2822
- right: 0;
2823
- opacity: 0;
2824
- transition: opacity 0.3s ease; }
2825
- .copy-sql-modal-content .sql-copied {
2826
- color: var(--react-autoql-success-color) !important; }
2827
- .copy-sql-modal-content:hover .copy-sql-btn {
2828
- opacity: 1; }
2736
+ .react-autoql-checkbox-label {
2737
+ padding-left: 6px;
2738
+ line-height: 100%; }
2739
+
2740
+ .react-autoql-modal-container
2741
+ .react-autoql-checkbox__input:not(.react-autoql-checkbox--switch__input),
2742
+ .react-autoql-drawer
2743
+ .react-autoql-checkbox__input:not(.react-autoql-checkbox--switch__input) {
2744
+ border-color: var(--react-autoql-accent-color); }
2829
2745
 
2746
+ .react-autoql-modal-container
2747
+ .react-autoql-checkbox__input::before:not(.react-autoql-checkbox--switch__input),
2748
+ .react-autoql-drawer
2749
+ .react-autoql-checkbox__input::before:not(.react-autoql-checkbox--switch__input) {
2750
+ background: var(--react-autoql-accent-color); }
2830
2751
 
2831
2752
  .query-tips-page-container {
2832
2753
  height: 100%;
@@ -3054,6 +2975,41 @@ tbody::-webkit-scrollbar-thumb {
3054
2975
  .react-autoql-cascader .options-container:not(:last-child) {
3055
2976
  border-right: 1px solid #d3d3d352; }
3056
2977
 
2978
+ .autoql-options-toolbar {
2979
+ position: absolute;
2980
+ background: inherit;
2981
+ padding: 5px;
2982
+ border-radius: 6px;
2983
+ line-height: 28px;
2984
+ background: var(--react-autoql-background-color-primary);
2985
+ border: 1px solid var(--react-autoql-border-color); }
2986
+ .autoql-options-toolbar.vertical .react-autoql-toolbar-btn {
2987
+ display: block; }
2988
+ .autoql-options-toolbar .react-autoql-toolbar-btn {
2989
+ color: var(--react-autoql-text-color-primary); }
2990
+
2991
+ .copy-sql-modal-content {
2992
+ position: relative;
2993
+ height: 60vh; }
2994
+ .copy-sql-modal-content .copy-sql-formatted-text {
2995
+ height: 100%;
2996
+ width: 100%;
2997
+ padding: 10px;
2998
+ resize: none;
2999
+ background: var(--react-autoql-background-color-secondary); }
3000
+ .copy-sql-modal-content .copy-sql-btn {
3001
+ color: var(--react-autoql-text-color);
3002
+ background-color: var(--react-autoql-background-color-primary);
3003
+ position: absolute;
3004
+ top: 3px;
3005
+ right: 0;
3006
+ opacity: 0;
3007
+ transition: opacity 0.3s ease; }
3008
+ .copy-sql-modal-content .sql-copied {
3009
+ color: var(--react-autoql-success-color) !important; }
3010
+ .copy-sql-modal-content:hover .copy-sql-btn {
3011
+ opacity: 1; }
3012
+
3057
3013
  .chat-single-message-container {
3058
3014
  transition: background-color 0.2s ease;
3059
3015
  padding-top: 6px;
@@ -3071,6 +3027,9 @@ tbody::-webkit-scrollbar-thumb {
3071
3027
  cursor: pointer; }
3072
3028
  .chat-single-message-container .query-more-btn:hover {
3073
3029
  opacity: 1; }
3030
+ .chat-single-message-container .spinner-loader:after {
3031
+ border: 1px solid var(--react-autoql-accent-color);
3032
+ border-color: var(--react-autoql-accent-color) transparent var(--react-autoql-accent-color) transparent; }
3074
3033
 
3075
3034
  .chat-condition-item-container {
3076
3035
  position: absolute;
@@ -3172,13 +3131,6 @@ tbody::-webkit-scrollbar-thumb {
3172
3131
  padding: 5px 10px;
3173
3132
  outline: none !important; }
3174
3133
 
3175
- .data-limit-warning-icon {
3176
- color: var(--react-autoql-warning-color) !important;
3177
- position: absolute !important;
3178
- bottom: 2px;
3179
- right: 4px;
3180
- font-size: 20px; }
3181
-
3182
3134
  .condition-info-icon-left-align {
3183
3135
  color: var(--react-autoql-accent-color) !important;
3184
3136
  position: absolute !important;
@@ -3274,8 +3226,7 @@ tbody::-webkit-scrollbar-thumb {
3274
3226
  transform-origin: 0% 100%; } }
3275
3227
 
3276
3228
  .react-autoql-table-container {
3277
- flex-grow: 1;
3278
- flex-shrink: 1;
3229
+ flex: 1;
3279
3230
  max-width: 100%;
3280
3231
  width: 100%;
3281
3232
  background-color: inherit; }
@@ -3295,8 +3246,7 @@ tbody::-webkit-scrollbar-thumb {
3295
3246
  .react-autoql-table-container.supports-drilldown
3296
3247
  .react-autoql-table.tabulator
3297
3248
  .tabulator-row.tabulator-unselectable:hover {
3298
- cursor: pointer !important;
3299
- background-color: var(--react-autoql-hover-color) !important; }
3249
+ cursor: pointer !important; }
3300
3250
 
3301
3251
  .react-autoql-table.tabulator
3302
3252
  .tabulator-header
@@ -3533,234 +3483,31 @@ tbody::-webkit-scrollbar-thumb {
3533
3483
  .axis-selector-container .string-select-list-item.active {
3534
3484
  background: rgba(0, 0, 0, 0.04); }
3535
3485
  .axis-selector-container .number-selector-header {
3536
- margin-top: 10px;
3537
- padding: 0px 18px;
3538
- font-size: 12px;
3539
- padding-bottom: 7px;
3540
- font-weight: 500;
3541
- opacity: 0.6; }
3542
- .axis-selector-container .axis-selector-content {
3543
- list-style-type: none;
3544
- width: 100%;
3545
- margin: 0;
3546
- padding: 0; }
3547
- .axis-selector-container .axis-selector-content li {
3548
- color: var(--react-autoql-text-color-primary);
3549
- width: 100%;
3550
- height: 30px;
3551
- line-height: 30px;
3552
- padding: 0 15px;
3553
- cursor: pointer; }
3554
- .axis-selector-container .axis-selector-content li:hover {
3555
- background: rgba(0, 0, 0, 0.05); }
3556
-
3557
- .axis-selector-apply-btn {
3558
- background: var(--react-autoql-background-color-primary);
3559
- padding: 5px; }
3560
-
3561
-
3562
- .react-autoql-radio-btn-container {
3563
- display: inline-block;
3564
- border-radius: 4px; }
3565
- .react-autoql-radio-btn-container [type='radio']:checked,
3566
- .react-autoql-radio-btn-container [type='radio']:not(:checked) {
3567
- position: absolute;
3568
- left: -9999px; }
3569
- .react-autoql-radio-btn-container [type='radio']:checked + label,
3570
- .react-autoql-radio-btn-container [type='radio']:not(:checked) + label {
3571
- position: relative;
3572
- padding-left: 28px;
3573
- cursor: pointer;
3574
- line-height: 20px;
3575
- display: inline-block; }
3576
- .react-autoql-radio-btn-container [type='radio']:checked + label:before,
3577
- .react-autoql-radio-btn-container [type='radio']:not(:checked) + label:before {
3578
- content: '';
3579
- position: absolute;
3580
- left: 1px;
3581
- top: 1px;
3582
- width: 18px;
3583
- height: 18px;
3584
- border: 1px solid #ddd;
3585
- border-radius: 100%;
3586
- background: #fff; }
3587
- .react-autoql-radio-btn-container [type='radio']:checked + label:after,
3588
- .react-autoql-radio-btn-container [type='radio']:not(:checked) + label:after {
3589
- content: '';
3590
- width: 12px;
3591
- height: 12px;
3592
- background: var(--react-autoql-accent-color, #26a7df);
3593
- position: absolute;
3594
- top: 4px;
3595
- left: 4px;
3596
- border-radius: 100%;
3597
- transition: all 0.2s ease; }
3598
- .react-autoql-radio-btn-container [type='radio']:not(:checked) + label:after {
3599
- opacity: 0;
3600
- transform: scale(0); }
3601
- .react-autoql-radio-btn-container [type='radio']:checked + label:after {
3602
- opacity: 1;
3603
- transform: scale(1); }
3604
- .react-autoql-radio-btn-container .react-autoql-radio-btn {
3605
- position: relative;
3606
- display: inline-block;
3607
- padding: 3px 12px;
3608
- border: 1px solid var(--react-autoql-border-color, #dcdcdc);
3609
- margin-left: -1px;
3610
- transition: all 0.2s ease;
3611
- cursor: pointer; }
3612
- .react-autoql-radio-btn-container .react-autoql-radio-btn.active {
3613
- background-color: var(--react-autoql-accent-color, #26a7df);
3614
- border-color: var(--react-autoql-accent-color, #26a7df);
3615
- color: #fff;
3616
- z-index: 3; }
3617
- .react-autoql-radio-btn-container .react-autoql-radio-btn.active.outlined {
3618
- background-color: inherit;
3619
- color: var(--react-autoql-accent-color, #26a7df);
3620
- z-index: 3; }
3621
- .react-autoql-radio-btn-container .react-autoql-radio-btn:hover:not(.active) {
3622
- border-color: var(--react-autoql-accent-color, #26a7df);
3623
- color: var(--react-autoql-accent-color, #26a7df);
3624
- z-index: 2; }
3625
- .react-autoql-radio-btn-container .react-autoql-radio-btn:first-child {
3626
- border-top-left-radius: 4px;
3627
- border-bottom-left-radius: 4px;
3628
- margin-left: 0; }
3629
- .react-autoql-radio-btn-container .react-autoql-radio-btn:last-child {
3630
- border-top-right-radius: 4px;
3631
- border-bottom-right-radius: 4px; }
3632
-
3633
- .content {
3634
- margin: 2rem; }
3635
-
3636
- .react-autoql-checkbox-container {
3637
- display: inline-block;
3638
- vertical-align: middle; }
3639
-
3640
- .react-autoql-checkbox {
3641
- display: flex;
3642
- align-items: center;
3643
- position: relative;
3644
- cursor: pointer; }
3645
- .react-autoql-checkbox .react-autoql-checkbox--switch__input:checked,
3646
- .react-autoql-checkbox .react-autoql-checkbox__input:checked {
3647
- border-color: var(--react-autoql-accent-color, #26a7df);
3648
- background: var(--react-autoql-accent-color, #26a7df); }
3649
-
3650
- .react-autoql-checkbox__label {
3651
- flex-shrink: 0;
3652
- padding: 0.5rem 1rem;
3653
- color: #fff;
3654
- cursor: pointer; }
3655
-
3656
- .react-autoql-checkbox__input {
3657
- position: relative;
3658
- flex-shrink: 0;
3659
- width: 20px;
3660
- height: 20px;
3661
- appearance: none;
3662
- -webkit-appearance: none;
3663
- -moz-appearance: none;
3664
- outline: none;
3665
- background: transparent;
3666
- border: 1px solid;
3667
- border-color: var(--react-autoql-accent-color, #26a7df);
3668
- border-radius: 2px;
3669
- cursor: pointer; }
3670
-
3671
- .react-autoql-checkbox__input::before {
3672
- content: ' ';
3673
- position: absolute;
3674
- top: 50%;
3675
- right: 50%;
3676
- bottom: 50%;
3677
- left: 50%;
3678
- transition: all 0.2s;
3679
- background: var(--react-autoql-accent-color, #26a7df); }
3680
-
3681
- .react-autoql-checkbox-tick {
3682
- position: absolute;
3683
- color: white;
3684
- left: 3px;
3685
- line-height: 20px;
3686
- pointer-events: none; }
3687
-
3688
- .react-autoql-checkbox--switch__input::before {
3689
- box-shadow: 0 0 2px 1px #00000030; }
3690
-
3691
- .react-autoql-checkbox__input:checked::before,
3692
- .react-autoql-checkbox__input:indeterminate::before {
3693
- top: 0;
3694
- right: 0;
3695
- bottom: 0;
3696
- left: 0; }
3697
-
3698
- .react-autoql-checkbox__input:indeterminate::before {
3699
- top: 7px;
3700
- bottom: 7px; }
3701
-
3702
- .react-autoql-checkbox__input:disabled {
3703
- border-color: #5a5358;
3704
- cursor: default; }
3705
-
3706
- .react-autoql-checkbox__input:disabled::before {
3707
- background-color: #5a5358; }
3708
-
3709
- .react-autoql-checkbox__input:disabled + .react-autoql-checkbox__label {
3710
- color: gray;
3711
- cursor: default; }
3712
-
3713
- .react-autoql-checkbox--has-error__input {
3714
- border-color: red;
3715
- background-color: rgba(255, 0, 0, 0.2); }
3716
-
3717
- .react-autoql-checkbox--has-error__input::before {
3718
- background-color: red; }
3719
-
3720
- .react-autoql-checkbox--switch__label::after {
3721
- content: 'off';
3722
- margin-left: 0.25rem; }
3723
-
3724
- .react-autoql-checkbox--switch__input {
3725
- width: 36px;
3726
- height: 20px;
3727
- border-radius: 16px;
3728
- background: var(--react-autoql-background-color-tertiary);
3729
- border: 1px solid var(--react-autoql-background-color-tertiary); }
3730
-
3731
- .react-autoql-checkbox--switch__input::before {
3732
- top: 2px;
3733
- right: 18px;
3734
- bottom: 2px;
3735
- left: 2px;
3736
- border-radius: 50%;
3737
- background: #fff; }
3738
-
3739
- .react-autoql-checkbox--switch__input:checked
3740
- + .react-autoql-checkbox--switch__label::after {
3741
- content: 'on'; }
3742
-
3743
- .react-autoql-checkbox--switch__input:checked::before {
3744
- right: 2px;
3745
- left: 18px;
3746
- top: 2px;
3747
- bottom: 2px; }
3748
-
3749
- .react-autoql-checkbox-label {
3750
- padding-left: 6px;
3751
- line-height: 100%; }
3486
+ margin-top: 10px;
3487
+ padding: 0px 18px;
3488
+ font-size: 12px;
3489
+ padding-bottom: 7px;
3490
+ font-weight: 500;
3491
+ opacity: 0.6; }
3492
+ .axis-selector-container .axis-selector-content {
3493
+ list-style-type: none;
3494
+ width: 100%;
3495
+ margin: 0;
3496
+ padding: 0; }
3497
+ .axis-selector-container .axis-selector-content li {
3498
+ color: var(--react-autoql-text-color-primary);
3499
+ width: 100%;
3500
+ height: 30px;
3501
+ line-height: 30px;
3502
+ padding: 0 15px;
3503
+ cursor: pointer; }
3504
+ .axis-selector-container .axis-selector-content li:hover {
3505
+ background: rgba(0, 0, 0, 0.05); }
3752
3506
 
3753
- .react-autoql-modal-container
3754
- .react-autoql-checkbox__input:not(.react-autoql-checkbox--switch__input),
3755
- .react-autoql-drawer
3756
- .react-autoql-checkbox__input:not(.react-autoql-checkbox--switch__input) {
3757
- border-color: var(--react-autoql-accent-color); }
3507
+ .axis-selector-apply-btn {
3508
+ background: var(--react-autoql-background-color-primary);
3509
+ padding: 5px; }
3758
3510
 
3759
- .react-autoql-modal-container
3760
- .react-autoql-checkbox__input::before:not(.react-autoql-checkbox--switch__input),
3761
- .react-autoql-drawer
3762
- .react-autoql-checkbox__input::before:not(.react-autoql-checkbox--switch__input) {
3763
- background: var(--react-autoql-accent-color); }
3764
3511
 
3765
3512
  .viz-toolbar {
3766
3513
  position: absolute;
@@ -3913,6 +3660,59 @@ tbody::-webkit-scrollbar-thumb {
3913
3660
  transition-duration: 0.5s;
3914
3661
  opacity: 1; }
3915
3662
 
3663
+ .react-autoql-notification-rule-container {
3664
+ display: flex; }
3665
+ .react-autoql-notification-rule-container .react-autoql-rule-input {
3666
+ display: flex;
3667
+ flex-direction: column;
3668
+ flex: 1;
3669
+ width: 100%; }
3670
+ .react-autoql-notification-rule-container .react-autoql-rule-first-input-container {
3671
+ display: flex;
3672
+ flex: 1; }
3673
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container {
3674
+ display: flex;
3675
+ padding: 2px 0;
3676
+ border-radius: 4px;
3677
+ transition: all 0.3s ease;
3678
+ flex: 1; }
3679
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-rule-condition-select {
3680
+ flex: 0;
3681
+ flex-basis: 33px; }
3682
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-rule-input {
3683
+ flex: 1;
3684
+ margin-left: 4px; }
3685
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-delete-compare-btn {
3686
+ cursor: pointer;
3687
+ opacity: 0.6;
3688
+ padding: 6px; }
3689
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-delete-compare-btn:hover {
3690
+ opacity: 1; }
3691
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container.hidden {
3692
+ display: none; }
3693
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-input-container {
3694
+ margin: 0; }
3695
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-input-container:hover + .react-autoql-rule-term-type-selector,
3696
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-input-container.focus
3697
+ + .react-autoql-rule-term-type-selector {
3698
+ color: var(--react-autoql-accent-color, #26a7df);
3699
+ border-color: var(--react-autoql-accent-color, #26a7df); }
3700
+
3701
+ .read-only-rule-term {
3702
+ display: inline-block;
3703
+ border: 1px solid rgba(0, 0, 0, 0.06);
3704
+ background: rgba(0, 0, 0, 0.02);
3705
+ padding: 3px 7px;
3706
+ line-height: 1.5em;
3707
+ margin-right: 5px;
3708
+ margin-bottom: 2px;
3709
+ margin-top: 2px;
3710
+ border-radius: 4px; }
3711
+
3712
+ .expression-term-validation-error {
3713
+ padding: 0 10px;
3714
+ color: var(--react-autoql-warning-color); }
3715
+
3916
3716
  .notification-read-only-group {
3917
3717
  border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
3918
3718
  border-radius: 4px;
@@ -4031,60 +3831,6 @@ tbody::-webkit-scrollbar-thumb {
4031
3831
  opacity: 1;
4032
3832
  color: var(--react-autoql-accent-color); }
4033
3833
 
4034
- .react-autoql-notification-rule-container {
4035
- display: flex; }
4036
- .react-autoql-notification-rule-container .react-autoql-rule-input {
4037
- display: flex;
4038
- flex-direction: column;
4039
- flex: 1;
4040
- width: 100%; }
4041
- .react-autoql-notification-rule-container .react-autoql-rule-first-input-container {
4042
- display: flex;
4043
- flex: 1; }
4044
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container {
4045
- display: flex;
4046
- padding: 2px 0;
4047
- border-radius: 4px;
4048
- transition: all 0.3s ease;
4049
- flex: 1; }
4050
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-rule-condition-select {
4051
- flex: 0;
4052
- flex-basis: 33px; }
4053
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-rule-input {
4054
- flex: 1;
4055
- margin-left: 4px; }
4056
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-delete-compare-btn {
4057
- cursor: pointer;
4058
- opacity: 0.6;
4059
- padding: 6px; }
4060
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-delete-compare-btn:hover {
4061
- opacity: 1; }
4062
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container.hidden {
4063
- display: none; }
4064
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-input-container {
4065
- margin: 0; }
4066
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-input-container:hover + .react-autoql-rule-term-type-selector,
4067
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-input-container.focus
4068
- + .react-autoql-rule-term-type-selector {
4069
- color: var(--react-autoql-accent-color, #26a7df);
4070
- border-color: var(--react-autoql-accent-color, #26a7df); }
4071
-
4072
- .read-only-rule-term {
4073
- display: inline-block;
4074
- border: 1px solid rgba(0, 0, 0, 0.06);
4075
- background: rgba(0, 0, 0, 0.02);
4076
- padding: 3px 7px;
4077
- line-height: 1.5em;
4078
- margin-right: 5px;
4079
- margin-bottom: 2px;
4080
- margin-top: 2px;
4081
- border-radius: 4px; }
4082
-
4083
- .expression-term-validation-error {
4084
- padding: 0 10px;
4085
- color: var(--react-autoql-warning-color); }
4086
-
4087
-
4088
3834
  .spinner-loader {
4089
3835
  display: inline-block;
4090
3836
  width: 14px;
@@ -4092,7 +3838,7 @@ tbody::-webkit-scrollbar-thumb {
4092
3838
  margin-right: 6px; }
4093
3839
 
4094
3840
  .spinner-loader:after {
4095
- content: " ";
3841
+ content: ' ';
4096
3842
  display: block;
4097
3843
  width: 16px;
4098
3844
  height: 16px;
@@ -4116,6 +3862,45 @@ tbody::-webkit-scrollbar-thumb {
4116
3862
  transform: rotate(360deg); } }
4117
3863
 
4118
3864
 
3865
+
3866
+ .react-autoql-select {
3867
+ border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
3868
+ border-radius: 4px;
3869
+ background: var(--react-autoql-background-color-primary, white);
3870
+ display: inline-block;
3871
+ font-size: 13px;
3872
+ line-height: 32px;
3873
+ height: 34px;
3874
+ margin: 0 3px;
3875
+ padding: 0 11px;
3876
+ color: var(--react-autoql-accent-color, #26a7df);
3877
+ transition: all 0.2s ease;
3878
+ cursor: pointer; }
3879
+ .react-autoql-select:hover {
3880
+ border-color: var(--react-autoql-accent-color, #26a7df); }
3881
+
3882
+ .react-autoql-select-popup-container {
3883
+ background: var(--react-autoql-background-color-primary, white);
3884
+ padding: 10px 0;
3885
+ max-height: 300px;
3886
+ overflow-y: auto; }
3887
+ .react-autoql-select-popup-container .react-autoql-select-option.active {
3888
+ background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.04)); }
3889
+ .react-autoql-select-popup-container .react-autoql-select-popup {
3890
+ list-style-type: none;
3891
+ width: 100%;
3892
+ margin: 0;
3893
+ padding: 0; }
3894
+ .react-autoql-select-popup-container .react-autoql-select-popup li {
3895
+ color: var(--react-autoql-text-color-primary);
3896
+ width: 100%;
3897
+ height: 35px;
3898
+ line-height: 35px;
3899
+ padding: 0 20px;
3900
+ cursor: pointer; }
3901
+ .react-autoql-select-popup-container .react-autoql-select-popup li:hover {
3902
+ background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.04)); }
3903
+
4119
3904
  .slack-modal-error-container,
4120
3905
  .slack-modal-empty-list-message {
4121
3906
  display: flex;
@@ -4261,43 +4046,29 @@ tbody::-webkit-scrollbar-thumb {
4261
4046
  .slack-channel-list-container .connect-channel-btn button {
4262
4047
  width: 200px; }
4263
4048
 
4264
- .react-autoql-select {
4265
- border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
4266
- border-radius: 4px;
4049
+ .react-autoql-select-with-arrow div {
4050
+ color: inherit; }
4051
+
4052
+ .react-autoql-select-with-arrow > div {
4053
+ border-color: var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
4267
4054
  background: var(--react-autoql-background-color-primary, white);
4268
- display: inline-block;
4269
- font-size: 13px;
4270
- line-height: 32px;
4271
- height: 34px;
4272
- margin: 0 3px;
4273
- padding: 0 11px;
4274
- color: var(--react-autoql-accent-color, #26a7df);
4275
4055
  transition: all 0.2s ease;
4276
- cursor: pointer; }
4277
- .react-autoql-select:hover {
4056
+ cursor: pointer !important; }
4057
+ .react-autoql-select-with-arrow > div:hover {
4278
4058
  border-color: var(--react-autoql-accent-color, #26a7df); }
4059
+ .react-autoql-select-with-arrow > div .react-autoql-select-with-arrow__option {
4060
+ cursor: pointer; }
4061
+ .react-autoql-select-with-arrow > div .react-autoql-select-with-arrow__option:hover {
4062
+ background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.15)); }
4063
+ .react-autoql-select-with-arrow > div .react-autoql-select-with-arrow__option.react-autoql-select-with-arrow__option--is-focused, .react-autoql-select-with-arrow > div .react-autoql-select-with-arrow__option.react-autoql-select-with-arrow__option--is-selected {
4064
+ background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.1)); }
4279
4065
 
4280
- .react-autoql-select-popup-container {
4281
- background: var(--react-autoql-background-color-primary, white);
4282
- padding: 10px 0;
4283
- max-height: 300px;
4284
- overflow-y: auto; }
4285
- .react-autoql-select-popup-container .react-autoql-select-option.active {
4286
- background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.04)); }
4287
- .react-autoql-select-popup-container .react-autoql-select-popup {
4288
- list-style-type: none;
4289
- width: 100%;
4290
- margin: 0;
4291
- padding: 0; }
4292
- .react-autoql-select-popup-container .react-autoql-select-popup li {
4293
- color: var(--react-autoql-text-color-primary);
4294
- width: 100%;
4295
- height: 35px;
4296
- line-height: 35px;
4297
- padding: 0 20px;
4298
- cursor: pointer; }
4299
- .react-autoql-select-popup-container .react-autoql-select-popup li:hover {
4300
- background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.04)); }
4066
+ .react-autoql-select-with-arrow:focus {
4067
+ outline: none !important; }
4068
+
4069
+ .react-autoql-select-with-arrow__control--is-focused {
4070
+ border: 1px solid var(--react-autoql-accent-color, #26a7df) !important;
4071
+ box-shadow: none !important; }
4301
4072
 
4302
4073
  .react-autoql-list-item {
4303
4074
  padding: 0 20px;
@@ -4324,30 +4095,6 @@ tbody::-webkit-scrollbar-thumb {
4324
4095
  .react-autoql-list-item:not(:last-child) {
4325
4096
  border-bottom: 1px solid #d3d3d34a; }
4326
4097
 
4327
- .react-autoql-select-with-arrow div {
4328
- color: inherit; }
4329
-
4330
- .react-autoql-select-with-arrow > div {
4331
- border-color: var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
4332
- background: var(--react-autoql-background-color-primary, white);
4333
- transition: all 0.2s ease;
4334
- cursor: pointer !important; }
4335
- .react-autoql-select-with-arrow > div:hover {
4336
- border-color: var(--react-autoql-accent-color, #26a7df); }
4337
- .react-autoql-select-with-arrow > div .react-autoql-select-with-arrow__option {
4338
- cursor: pointer; }
4339
- .react-autoql-select-with-arrow > div .react-autoql-select-with-arrow__option:hover {
4340
- background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.15)); }
4341
- .react-autoql-select-with-arrow > div .react-autoql-select-with-arrow__option.react-autoql-select-with-arrow__option--is-focused, .react-autoql-select-with-arrow > div .react-autoql-select-with-arrow__option.react-autoql-select-with-arrow__option--is-selected {
4342
- background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.1)); }
4343
-
4344
- .react-autoql-select-with-arrow:focus {
4345
- outline: none !important; }
4346
-
4347
- .react-autoql-select-with-arrow__control--is-focused {
4348
- border: 1px solid var(--react-autoql-accent-color, #26a7df) !important;
4349
- box-shadow: none !important; }
4350
-
4351
4098
 
4352
4099
  g.legendOrdinal,
4353
4100
  g.legendOrdinal tspan {
@@ -4356,14 +4103,12 @@ g.legendOrdinal tspan {
4356
4103
  letter-spacing: 0;
4357
4104
  cursor: pointer; }
4358
4105
 
4359
- .x-axis-label-border,
4360
- .y-axis-label-border,
4106
+ .axis-label-border,
4361
4107
  .legend-title-border {
4362
4108
  cursor: pointer;
4363
4109
  stroke: transparent;
4364
4110
  opacity: 0.5; }
4365
- .x-axis-label-border:hover,
4366
- .y-axis-label-border:hover,
4111
+ .axis-label-border:hover,
4367
4112
  .legend-title-border:hover {
4368
4113
  stroke: var(--react-autoql-accent-color) !important; }
4369
4114