react-autoql 4.0.1 → 4.2.1

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.
@@ -29,6 +29,7 @@
29
29
  .react-autoql-tooltip {
30
30
  font-family: inherit;
31
31
  letter-spacing: 0.04em;
32
+ text-align: left;
32
33
  padding: 7px 15px;
33
34
  opacity: 1 !important;
34
35
  z-index: 99999 !important; }
@@ -71,52 +72,6 @@
71
72
  100% {
72
73
  left: 82%; } }
73
74
 
74
- .react-autoql-icon {
75
- position: relative;
76
- opacity: 1; }
77
- .react-autoql-icon.warning {
78
- color: var(--react-autoql-warning-color) !important; }
79
- .react-autoql-icon.danger {
80
- color: var(--react-autoql-danger-color) !important; }
81
-
82
- span.react-autoql-icon {
83
- vertical-align: unset;
84
- text-align: left;
85
- margin: 0;
86
- padding: 0;
87
- float: none !important;
88
- color: inherit; }
89
- span.react-autoql-icon svg {
90
- float: none !important;
91
- color: inherit;
92
- vertical-align: unset;
93
- text-align: left;
94
- margin: 0;
95
- padding: 0;
96
- opacity: 1;
97
- height: 1em;
98
- margin-bottom: -0.1em; }
99
-
100
- .slack-logo {
101
- display: inline-block;
102
- height: 100%;
103
- margin-bottom: 3px; }
104
- .slack-logo img {
105
- vertical-align: middle;
106
- height: 1em;
107
- width: 1em; }
108
-
109
- .react-autoql-badge {
110
- position: absolute;
111
- background: var(--react-autoql-warning-color);
112
- border: 1px solid var(--react-autoql-background-color-primary);
113
- width: 0.5em;
114
- height: 0.5em;
115
- top: -0.1em;
116
- right: -0.25em;
117
- border-radius: 50%;
118
- box-sizing: content-box; }
119
-
120
75
  .react-autoql-bar-container {
121
76
  position: relative;
122
77
  display: flex;
@@ -263,49 +218,51 @@ span.react-autoql-icon {
263
218
  left: 30px;
264
219
  top: 15px; }
265
220
 
266
- .loading-container-centered {
267
- height: 100%;
268
- width: 100%;
269
- display: flex;
270
- flex-direction: column;
271
- justify-content: center;
272
- align-items: center; }
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; }
273
228
 
274
- .response-loading {
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 {
275
248
  display: inline-block;
276
- position: relative;
277
- width: 64px;
278
- height: 64px; }
249
+ height: 100%;
250
+ margin-bottom: 3px; }
251
+ .slack-logo img {
252
+ vertical-align: middle;
253
+ height: 1em;
254
+ width: 1em; }
279
255
 
280
- .response-loading div {
256
+ .react-autoql-badge {
281
257
  position: absolute;
282
- top: 27px;
283
- width: 11px;
284
- height: 11px;
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;
285
264
  border-radius: 50%;
286
- background: #e2e2e2;
287
- -webkit-animation-timing-function: cubic-bezier(0, 1, 1, 0);
288
- animation-timing-function: cubic-bezier(0, 1, 1, 0); }
289
-
290
- .response-loading div:nth-child(1) {
291
- left: 6px;
292
- -webkit-animation: response-loading1 0.6s infinite;
293
- animation: response-loading1 0.6s infinite; }
294
-
295
- .response-loading div:nth-child(2) {
296
- left: 6px;
297
- -webkit-animation: response-loading2 0.6s infinite;
298
- animation: response-loading2 0.6s infinite; }
299
-
300
- .response-loading div:nth-child(3) {
301
- left: 26px;
302
- -webkit-animation: response-loading2 0.6s infinite;
303
- animation: response-loading2 0.6s infinite; }
304
-
305
- .response-loading div:nth-child(4) {
306
- left: 45px;
307
- -webkit-animation: response-loading3 0.6s infinite;
308
- animation: response-loading3 0.6s infinite; }
265
+ box-sizing: content-box; }
309
266
 
310
267
  .react-autoql-dashboard-container {
311
268
  background: var(--react-autoql-background-color-secondary);
@@ -369,389 +326,232 @@ span.react-autoql-icon {
369
326
  font-weight: bold;
370
327
  cursor: pointer; }
371
328
 
372
- .condition-menu-dropdown {
373
- display: block; }
374
-
375
- .react-autoql-condition-lock-menu {
376
- min-width: 400px !important; }
377
-
378
- .react-autoql-filter-locking-title-container {
379
- display: inline-block;
329
+ .loading-container-centered {
330
+ height: 100%;
380
331
  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); }
332
+ display: flex;
333
+ flex-direction: column;
334
+ justify-content: center;
335
+ align-items: center; }
400
336
 
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);
405
- border-radius: 5px;
406
- padding: 2px 6px 2px 6px;
407
- margin: 4px 10px 4px 10px;
337
+ .response-loading {
408
338
  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; }
419
-
420
- #react-autoql-filter-description-id.show {
421
- visibility: visible;
422
- -webkit-animation: fadeIn 1s;
423
- animation: fadeIn 1s; }
424
-
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;
433
- font-family: inherit;
434
- letter-spacing: 0.04em;
435
- 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); }
339
+ position: relative;
340
+ width: 64px;
341
+ height: 64px; }
451
342
 
452
- .react-autoql-condition-table {
453
- min-width: 95%;
454
- margin: 10px auto;
455
- table-layout: fixed; }
343
+ .response-loading div {
344
+ position: absolute;
345
+ top: 27px;
346
+ width: 11px;
347
+ height: 11px;
348
+ border-radius: 50%;
349
+ background: #e2e2e2;
350
+ -webkit-animation-timing-function: cubic-bezier(0, 1, 1, 0);
351
+ animation-timing-function: cubic-bezier(0, 1, 1, 0); }
456
352
 
457
- .react-autoql-condition-table thead {
458
- padding-left: 10px;
459
- display: table-header-group;
460
- width: 100%;
461
- flex: 1 1 auto; }
353
+ .response-loading div:nth-child(1) {
354
+ left: 6px;
355
+ -webkit-animation: response-loading1 0.6s infinite;
356
+ animation: response-loading1 0.6s infinite; }
462
357
 
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%; }
358
+ .response-loading div:nth-child(2) {
359
+ left: 6px;
360
+ -webkit-animation: response-loading2 0.6s infinite;
361
+ animation: response-loading2 0.6s infinite; }
468
362
 
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; }
363
+ .response-loading div:nth-child(3) {
364
+ left: 26px;
365
+ -webkit-animation: response-loading2 0.6s infinite;
366
+ animation: response-loading2 0.6s infinite; }
475
367
 
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; }
368
+ .response-loading div:nth-child(4) {
369
+ left: 45px;
370
+ -webkit-animation: response-loading3 0.6s infinite;
371
+ animation: response-loading3 0.6s infinite; }
482
372
 
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 {
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;
411
+ display: flex;
412
+ flex-direction: column;
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 {
490
446
  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; }
499
-
500
- tbody::-webkit-scrollbar {
501
- -webkit-appearance: none;
502
- width: 7px; }
503
-
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); }
508
-
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; }
517
-
518
- .react-autoql-condition-list .react-autoql-condition-table tbody {
519
- display: block;
520
- overflow-y: scroll;
521
- max-height: 260px;
522
- width: 100%;
523
- flex: 1 1 auto;
524
- padding-left: 10px; }
525
-
526
- .react-autoql-condition-list .react-autoql-condition-table tr {
527
- display: table;
528
- table-layout: fixed;
529
- width: 100%; }
530
-
531
- .react-autoql-condition-list .react-autoql-condition-table th {
532
- display: table-cell;
533
- padding-left: 10px; }
534
-
535
- .react-autoql-condition-list td {
536
- display: table-cell;
537
- padding: 2px;
538
- padding-left: 10px;
539
- vertical-align: middle; }
540
-
541
- #react-autoql-remove-filter-container {
542
- width: 35px; }
543
-
544
- #react-autoql-condition-table-settings {
545
- width: 110px; }
546
-
547
- .react-autoql-condition-list-loading-container {
548
- display: flex;
549
- height: 180px;
550
- 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%; }
580
-
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;
609
- width: 100%; }
610
-
611
- .autoql-condition-locking-menu-container .react-autosuggest__suggestion {
612
- color: var(--react-autoql-text-color-primary); }
613
-
614
- .autoql-condition-locking-menu-container input::-moz-placeholder {
615
- opacity: 0.5; }
616
-
617
- .autoql-condition-locking-menu-container input:-ms-input-placeholder {
618
- opacity: 0.5; }
619
-
620
- .autoql-condition-locking-menu-container input::placeholder {
621
- opacity: 0.5; }
622
-
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; }
629
-
630
- .autoql-condition-locking-menu-container .react-autosuggest__suggestion {
631
- 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; }
640
-
641
- .autoql-condition-locking-menu-container .react-autosuggest__section-title {
642
- padding: 10px 0 0 10px;
643
- font-size: 12px;
644
- color: #777; }
645
-
646
- #react-autoql-filter-setting-info-card {
647
- visibility: hidden;
648
- color: var(--react-autoql-text-color-primary);
649
- background-color: var(--react-autoql-background-color-secondary);
650
- 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; }
683
-
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); }
702
-
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; }
707
-
708
- @-webkit-keyframes snackbarFadein {
709
- from {
710
- top: 0;
711
- opacity: 0; }
712
- to {
713
- top: 20px;
714
- opacity: 1; } }
715
-
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); } }
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; }
755
555
 
756
556
  @-webkit-keyframes highlightOut {
757
557
  100% {
@@ -785,862 +585,807 @@ tbody::-webkit-scrollbar-thumb {
785
585
  background-color: var(--react-autoql-background-color-primary);
786
586
  color: var(--react-autoql-text-color-primary); } }
787
587
 
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%;
588
+ @import url("https://fonts.googleapis.com/icon?family=Material+Icons");
589
+ .react-autoql-response-content-container {
590
+ position: relative;
801
591
  display: flex;
802
- background: var(--react-autoql-background-color-secondary);
803
- overflow: hidden;
804
- border-radius: 4px;
805
592
  flex-direction: column;
806
- justify-content: stretch; }
807
-
808
- .react-autoql-drawer .chat-header-container {
809
- display: flex;
810
- justify-content: space-between;
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%;
811
600
  width: 100%;
812
- height: 60px;
813
- background: var(--react-autoql-accent-color);
814
- box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.1);
815
- flex-grow: 0;
816
- flex-shrink: 0;
817
- z-index: 1; }
601
+ height: 100%;
602
+ color: var(--react-autoql-text-color-primary); }
818
603
 
819
- .react-autoql-drawer .react-autoql-header-left-container {
820
- display: flex;
821
- justify-content: left;
822
- width: 100px;
823
- margin-left: 10px; }
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%; }
824
611
 
825
- .react-autoql-drawer .react-autoql-header-right-container {
826
- display: flex;
827
- justify-content: right;
828
- width: 100px;
829
- margin-right: 10px; }
612
+ .react-autoql-response-content-container.table::-webkit-scrollbar {
613
+ width: 0;
614
+ height: 0; }
830
615
 
831
- .react-autoql-drawer .react-autoql-header-center-container {
832
- position: relative;
833
- color: var(--react-autoql-accent-text-color);
834
- line-height: 60px;
835
- font-size: 18px;
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;
836
624
  letter-spacing: 0.05em;
837
- font-weight: 600;
838
- overflow: hidden;
839
- text-overflow: ellipsis;
840
- white-space: nowrap; }
841
-
842
- .react-autoql-drawer .header-title {
843
- -webkit-animation: fadeIn 0.3s;
844
- animation: fadeIn 0.3s; }
625
+ transition: all 0.1s ease;
626
+ border: 1px solid rgba(0, 0, 0, 0.15);
627
+ border-radius: 5px;
628
+ color: inherit; }
845
629
 
846
- .react-autoql-drawer .react-autoql-drawer-header-btn {
847
- line-height: 1em;
848
- font-weight: normal;
849
- float: none;
850
- opacity: 1; }
851
- .react-autoql-drawer .react-autoql-drawer-header-btn.close span.react-autoql-icon svg {
852
- width: 27px;
853
- height: 27px; }
854
- .react-autoql-drawer .react-autoql-drawer-header-btn.screen-mode span.react-autoql-icon svg {
855
- width: 22px;
856
- height: 22px; }
857
- .react-autoql-drawer .react-autoql-drawer-header-btn.clear-all span.react-autoql-icon svg {
858
- width: 22px;
859
- height: 22px; }
860
- .react-autoql-drawer .react-autoql-drawer-header-btn.filter-locking span.react-autoql-icon svg {
861
- width: 22px;
862
- height: 22px; }
630
+ .react-autoql-suggestion-btn:hover {
631
+ border-color: transparent;
632
+ color: white;
633
+ background: var(--react-autoql-accent-color); }
863
634
 
864
- .react-autoql-drawer .chat-message-container {
865
- scroll-behavior: smooth !important;
866
- max-height: calc(100% - 140px);
867
- overflow-y: auto;
868
- overflow-x: hidden;
869
- flex: 1; }
870
- .react-autoql-drawer .chat-message-container .custom-scrollbar-container {
871
- overflow-x: hidden !important;
872
- margin-bottom: 0 !important; }
873
-
874
- .react-autoql-drawer .chat-bar-container {
875
- position: relative;
876
- padding: 10px; }
877
-
878
- .react-autoql-drawer .chat-drawer-chat-bar {
879
- flex-shrink: 0;
880
- flex-grow: 0;
881
- height: 60px;
882
- -webkit-animation: fadeIn 0.3s;
883
- animation: fadeIn 0.3s; }
884
-
885
- .react-autoql-drawer .watermark {
886
- color: var(--react-autoql-text-color-primary);
887
- text-align: center;
888
- opacity: 0.2;
889
- top: 6px;
890
- width: calc(100% - 10px);
891
- font-size: 13px; }
892
-
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
- .react-autoql-drawer .react-autoql-drawer:focus {
924
- outline: none; }
925
-
926
- .react-autoql-drawer .chat-header-container button {
635
+ .react-autoql-help-link-btn {
636
+ padding: 6px 14px;
927
637
  background: transparent;
928
- border: none;
929
- color: var(--react-autoql-accent-text-color);
930
- margin: 10px 0px 10px 0px;
931
- margin-right: 0;
932
- font-size: 20px;
638
+ border-radius: 5px;
639
+ font-family: inherit;
640
+ font-size: 12px;
641
+ margin-top: 5px;
642
+ outline: none !important;
933
643
  cursor: pointer;
934
- outline: none !important; }
644
+ letter-spacing: 0.05em;
645
+ transition: all 0.1s ease;
646
+ border-color: #e2e2e26e;
647
+ color: inherit; }
935
648
 
936
- .react-autoql-drawer .chat-header-container button:hover {
649
+ .react-autoql-help-link-btn:hover {
937
650
  opacity: 0.7; }
938
651
 
939
- .react-autoql-drawer .chat-header-container button svg {
940
- width: 35px;
941
- height: 35px; }
652
+ .react-autoql-help-link-icon {
653
+ width: 15px;
654
+ height: 15px;
655
+ margin-bottom: -3px;
656
+ margin-right: 3px; }
942
657
 
943
- .topics-container {
944
- margin: 5px 0; }
658
+ .react-autoql-suggestion-message {
659
+ height: 100%;
660
+ width: 100%;
661
+ word-break: break-word; }
945
662
 
946
- .intro-qi-link {
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;
947
673
  cursor: pointer;
948
- color: var(--react-autoql-accent-color); }
674
+ font-size: inherit; }
949
675
 
950
- /* custom scrollbar */
951
- .react-autoql-drawer .chat-message-container > div:last-child {
952
- opacity: 0;
953
- transition: opacity 200ms ease; }
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; }
954
688
 
955
- .react-autoql-drawer .chat-message-container:hover > div:last-child {
956
- opacity: 1; }
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%; }
957
696
 
958
- /* rc-drawer */
959
- .react-autoql-drawer .drawer-content {
960
- background: white;
961
- border-radius: 4px;
962
- overflow: visible;
963
- opacity: 1;
964
- transition: opacity 0.3s ease; }
697
+ .dashboard-data-limit-warning-icon {
698
+ color: var(--react-autoql-warning-color) !important;
699
+ margin-left: 10px;
700
+ font-size: 20px; }
965
701
 
966
- .react-autoql-drawer.closed .drawer-content {
967
- opacity: 0; }
702
+ /* query validation */
703
+ .react-autoql-query-validation-selector-container {
704
+ display: inline-block;
705
+ position: relative; }
968
706
 
969
- .react-autoql-drawer .drawer-handle {
970
- transition: opacity 0.5s ease;
971
- overflow: hidden;
972
- width: 50px;
973
- height: 50px;
974
- border-radius: 50px !important;
975
- font-size: 22px; }
976
- .react-autoql-drawer .drawer-handle.default-logo {
977
- background-color: var(--react-autoql-accent-color, #26a7df);
978
- color: var(--react-autoql-accent-text-color); }
979
- .react-autoql-drawer .drawer-handle.default-logo .react-autoql-bubbles-outlined {
980
- position: absolute;
981
- vertical-align: top;
982
- top: 11px;
983
- left: 12px; }
984
- .react-autoql-drawer .drawer-handle.default-logo .react-autoql-bubbles-outlined svg {
985
- position: absolute;
986
- width: 26px;
987
- height: 26px; }
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; }
988
718
 
989
- .react-autoql-drawer.drawer-right .drawer-handle {
990
- left: -70px !important; }
719
+ .react-autoql-query-validation-query {
720
+ text-align: center; }
991
721
 
992
- .react-autoql-drawer.drawer-left .drawer-handle {
993
- right: -60px !important; }
722
+ .react-autoql-query-validation-execute-btn {
723
+ height: 38px;
724
+ background: none;
725
+ border-radius: 4px;
726
+ margin-top: 24px;
727
+ width: 100%;
728
+ color: inherit;
729
+ cursor: pointer;
730
+ outline: none !important;
731
+ border-color: #e2e2e26e;
732
+ transition: all 0.2s ease; }
994
733
 
995
- .react-autoql-drawer.drawer-top .drawer-handle {
996
- bottom: -60px !important; }
734
+ .react-autoql-query-validation-execute-btn:hover {
735
+ border-color: #28a8e0; }
997
736
 
998
- .react-autoql-drawer.drawer-bottom .drawer-handle {
999
- top: -60px !important; }
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); }
1000
748
 
1001
- .react-autoql-drawer .drawer-handle.hide {
1002
- opacity: 0;
1003
- visibility: hidden; }
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); }
1004
764
 
1005
- .react-autoql-drawer .drawer-handle-icon,
1006
- .react-autoql-drawer .drawer-handle-icon::before,
1007
- .react-autoql-drawer .drawer-handle-icon::after {
1008
- background: var(--react-autoql-text-color-primary); }
765
+ .react-autoql-query-validation-delete-button {
766
+ position: relative;
767
+ cursor: pointer;
768
+ margin-bottom: -2px; }
1009
769
 
1010
- .react-autoql-drawer .drawer-bottom .drawer-content-wrapper,
1011
- .react-autoql-drawer .drawer-top .drawer-content-wrapper {
1012
- left: 0; }
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 */ }
1013
781
 
1014
- .react-autoql-drawer .drawer-content-wrapper {
1015
- background: transparent; }
782
+ .single-value-response-container {
783
+ width: 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; }
1016
796
 
1017
- .react-autoql-drawer.drawer-right .drawer-content-wrapper,
1018
- .react-autoql-drawer.drawer-left .drawer-content-wrapper {
1019
- max-width: calc(100vw - 45px) !important;
1020
- min-width: 400px !important; }
797
+ .react-autoql-query-validation-container {
798
+ width: 100%; }
1021
799
 
1022
- .react-autoql-drawer.drawer-top .drawer-content-wrapper,
1023
- .react-autoql-drawer.drawer-bottom .drawer-content-wrapper {
1024
- max-height: calc(100vh - 45px) !important;
1025
- min-height: 400px !important; }
800
+ .react-autoql-query-validation-description {
801
+ margin-bottom: 14px; }
1026
802
 
1027
- .react-autoql-drawer-resize-handle {
1028
- position: absolute;
1029
- background: transparent; }
1030
- .react-autoql-drawer-resize-handle.right {
1031
- top: 0;
1032
- left: -5px;
1033
- width: 5px;
1034
- height: 100vh;
1035
- cursor: ew-resize; }
1036
- .react-autoql-drawer-resize-handle.left {
1037
- top: 0;
1038
- right: -5px;
1039
- width: 5px;
1040
- height: 100vh;
1041
- cursor: ew-resize; }
1042
- .react-autoql-drawer-resize-handle.top {
1043
- bottom: -5px;
1044
- left: 0;
1045
- height: 5px;
1046
- width: 100vw;
1047
- cursor: ns-resize; }
1048
- .react-autoql-drawer-resize-handle.bottom {
1049
- top: -5px;
1050
- left: 0;
1051
- height: 5px;
1052
- width: 100vw;
1053
- cursor: ns-resize; }
1054
-
1055
- .react-autoql-drawer .response-loading-container {
1056
- position: absolute;
1057
- bottom: 45px;
1058
- left: 20px; }
1059
-
1060
- /* Tooltips */
1061
- .react-autoql-drawer-tooltip {
1062
- font-family: var(--react-autoql-font-family), sans-serif;
1063
- letter-spacing: 0.04em;
1064
- line-height: 0.9em;
1065
- padding: 7px 15px;
1066
- transition: none;
1067
- opacity: 1 !important;
1068
- z-index: 99999 !important;
1069
- /* necessary to show up on top of rc drawer */ }
1070
-
1071
- .interpretation-tooltip {
1072
- font-family: var(--react-autoql-font-family), sans-serif;
1073
- font-size: 12px;
1074
- text-align: left;
1075
- letter-spacing: 0.04em;
1076
- padding: 7px 15px;
1077
- max-width: 400px;
1078
- opacity: 1 !important;
1079
- transition: none;
1080
- z-index: 99999 !important;
1081
- /* necessary to show up on top of rc drawer */ }
1082
-
1083
- .react-autoql-condition-lock-menu {
1084
- color: var(--react-autoql-text-color-primary);
803
+ .context-menu {
1085
804
  background: var(--react-autoql-background-color-primary);
1086
- min-height: 300px; }
805
+ /* height: 100px; */
806
+ width: 150px;
807
+ padding: 10px 0; }
1087
808
 
1088
- .react-tiny-popover-container {
1089
- z-index: 9999;
1090
- border: 1px solid #ababab52;
1091
- border-radius: 4px;
1092
- box-shadow: 0px 0 8px rgba(0, 0, 0, 0.15);
1093
- transition: opacity 0.2s ease 0s !important;
1094
- opacity: 1 !important; }
809
+ .context-menu-list {
810
+ list-style-type: none;
811
+ width: 100%;
812
+ margin: 0;
813
+ padding: 0; }
1095
814
 
1096
- .clear-messages-confirm-popover {
815
+ .context-menu-list li {
1097
816
  color: var(--react-autoql-text-color-primary);
1098
- background: var(--react-autoql-background-color-primary);
1099
- text-align: right;
1100
- padding: 18px;
1101
- width: 266px; }
817
+ width: 100%;
818
+ height: 35px;
819
+ line-height: 35px;
820
+ padding: 0 20px;
821
+ cursor: pointer; }
1102
822
 
1103
- .react-autoql-confirm-text {
1104
- text-align: center; }
823
+ .context-menu-list li:hover {
824
+ background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.05)); }
1105
825
 
1106
- .react-autoql-menu-text {
1107
- text-align: center; }
1108
- .react-autoql-menu-text:hover {
1109
- color: var(--react-autoql-accent-color);
1110
- cursor: pointer; }
826
+ .react-autoql-condition-link {
827
+ background: none !important;
828
+ border: none;
829
+ padding: 0 !important;
830
+ text-decoration: none;
831
+ white-space: nowrap;
832
+ cursor: pointer;
833
+ color: var(--react-autoql-accent-color) !important; }
834
+ .react-autoql-condition-link:hover {
835
+ opacity: 0.9; }
1111
836
 
1112
- .react-autoql-confirm-icon {
1113
- color: #faad14 !important;
1114
- vertical-align: middle;
1115
- margin-right: 5px !important;
1116
- margin-bottom: 3px; }
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; }
1117
851
 
1118
- .data-messenger-tab-container {
1119
- position: absolute;
1120
- background: transparent;
1121
- display: flex;
1122
- justify-content: center;
1123
- align-items: center;
1124
- pointer-events: none; }
1125
- .data-messenger-tab-container.right {
1126
- height: 100vh;
1127
- width: 60px;
1128
- left: -60px; }
1129
- .data-messenger-tab-container.left {
1130
- height: 100vh;
1131
- width: 60px;
1132
- right: -60px; }
1133
- .data-messenger-tab-container.top {
1134
- width: 100vw;
1135
- height: 60px;
1136
- bottom: -60px; }
1137
- .data-messenger-tab-container.bottom {
1138
- width: 100vw;
1139
- height: 60px;
1140
- top: -60px; }
852
+ .react-autoql-reverse-translation-container .react-autoql-reverse-translation {
853
+ color: var(--react-autoql-text-color-primary);
854
+ background-color: var(--react-autoql-background-color-secondary);
855
+ border-radius: 5px;
856
+ padding: 5px 13px 5px 13px;
857
+ height: 100%; }
1141
858
 
1142
- /* Shadow container (this is used to cut off the shadow so it doesnt show in the drawer) */
1143
- .page-switcher-shadow-container {
1144
- position: absolute;
1145
- background: transparent;
1146
- overflow: hidden; }
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; }
1147
866
 
1148
- .page-switcher-shadow-container.right {
1149
- top: 80px;
1150
- width: 60px; }
867
+ .react-autoql-drawer {
868
+ font-family: var(--react-autoql-font-family), sans-serif;
869
+ line-height: 22px; }
1151
870
 
1152
- .page-switcher-shadow-container.left {
1153
- top: 80px;
1154
- width: 60px; }
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; }
1155
876
 
1156
- /* Container holding the tabs */
1157
- .page-switcher-container {
1158
- box-shadow: -2px 0 8px rgba(0, 0, 0, 0.2);
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);
1159
882
  overflow: hidden;
1160
- box-sizing: border-box;
883
+ border-radius: 4px;
884
+ flex-direction: column;
885
+ justify-content: stretch; }
886
+
887
+ .react-autoql-drawer .chat-header-container {
1161
888
  display: flex;
1162
- pointer-events: all; }
1163
- .page-switcher-container .tab {
1164
- position: relative;
1165
- z-index: 1;
1166
- background: var(--react-autoql-accent-color);
1167
- color: var(--react-autoql-accent-text-color);
1168
- opacity: 1;
1169
- font-size: 22px;
1170
- text-align: center;
1171
- transform: translate(0, 0);
1172
- cursor: pointer;
1173
- transition-property: background, color, transform, line-height, height, width, margin-right, margin-top, margin-left, margin-bottom, z-index, opacity;
1174
- transition-duration: 0.2s; }
1175
- .page-switcher-container .tab.react-autoql-explore-queries span.react-autoql-icon svg {
1176
- height: 22px;
1177
- 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); }
889
+ justify-content: space-between;
890
+ width: 100%;
891
+ height: 60px;
892
+ background: var(--react-autoql-accent-color);
893
+ box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.1);
894
+ flex-grow: 0;
895
+ flex-shrink: 0;
896
+ z-index: 1; }
1217
897
 
1218
- /* Individual Tabs */
1219
- .page-switcher-container .tab {
898
+ .react-autoql-drawer .react-autoql-header-left-container {
1220
899
  display: flex;
1221
- justify-content: center;
1222
- align-items: center; }
900
+ justify-content: left;
901
+ width: 100px;
902
+ margin-left: 10px; }
1223
903
 
1224
- .data-messenger-notification-btn {
904
+ .react-autoql-drawer .react-autoql-header-right-container {
1225
905
  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; }
906
+ justify-content: right;
907
+ width: 100px;
908
+ margin-right: 10px; }
1233
909
 
1234
- .page-switcher-container.top .tab,
1235
- .page-switcher-container.bottom .tab {
1236
- width: 65px; }
910
+ .react-autoql-drawer .react-autoql-header-center-container {
911
+ position: relative;
912
+ color: var(--react-autoql-accent-text-color);
913
+ line-height: 60px;
914
+ font-size: 18px;
915
+ letter-spacing: 0.05em;
916
+ font-weight: 600;
917
+ overflow: hidden;
918
+ text-overflow: ellipsis;
919
+ white-space: nowrap; }
1237
920
 
1238
- .page-switcher-container.bottom .tab {
1239
- background: var(--react-autoql-background-color-secondary);
1240
- color: var(--react-autoql-text-color-primary); }
921
+ .react-autoql-drawer .header-title {
922
+ -webkit-animation: fadeIn 0.3s;
923
+ animation: fadeIn 0.3s; }
1241
924
 
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; }
925
+ .react-autoql-drawer .react-autoql-drawer-header-btn {
926
+ line-height: 1em;
927
+ font-weight: normal;
928
+ float: none;
929
+ opacity: 1; }
930
+ .react-autoql-drawer .react-autoql-drawer-header-btn.hidden {
931
+ display: none; }
932
+ .react-autoql-drawer .react-autoql-drawer-header-btn.close span.react-autoql-icon svg {
933
+ width: 27px;
934
+ height: 27px; }
935
+ .react-autoql-drawer .react-autoql-drawer-header-btn.screen-mode span.react-autoql-icon svg {
936
+ width: 22px;
937
+ height: 22px; }
938
+ .react-autoql-drawer .react-autoql-drawer-header-btn.clear-all span.react-autoql-icon svg {
939
+ width: 22px;
940
+ height: 22px; }
941
+ .react-autoql-drawer .react-autoql-drawer-header-btn.filter-locking span.react-autoql-icon svg {
942
+ width: 22px;
943
+ height: 22px; }
1249
944
 
1250
- .page-switcher-container.bottom .tab.active {
1251
- background: var(--react-autoql-accent-color);
1252
- color: #fff;
1253
- font-weight: bold; }
945
+ .react-autoql-drawer .chat-message-container {
946
+ scroll-behavior: smooth !important;
947
+ max-height: calc(100% - 140px);
948
+ overflow-y: auto;
949
+ overflow-x: hidden;
950
+ flex: 1; }
951
+ .react-autoql-drawer .chat-message-container .custom-scrollbar-container {
952
+ overflow-x: hidden !important;
953
+ margin-bottom: 0 !important; }
1254
954
 
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); } }
955
+ .react-autoql-drawer .chat-bar-container {
956
+ position: relative;
957
+ padding: 10px; }
1266
958
 
1267
- @-webkit-keyframes response-loading3 {
1268
- 0% {
1269
- transform: scale(1); }
1270
- 100% {
1271
- transform: scale(0); } }
959
+ .react-autoql-drawer .chat-drawer-chat-bar {
960
+ flex-shrink: 0;
961
+ flex-grow: 0;
962
+ height: 60px;
963
+ -webkit-animation: fadeIn 0.3s;
964
+ animation: fadeIn 0.3s; }
1272
965
 
1273
- @keyframes response-loading3 {
1274
- 0% {
1275
- transform: scale(1); }
1276
- 100% {
1277
- transform: scale(0); } }
966
+ .react-autoql-drawer .watermark {
967
+ color: var(--react-autoql-text-color-primary);
968
+ text-align: center;
969
+ opacity: 0.2;
970
+ top: 6px;
971
+ width: calc(100% - 10px);
972
+ font-size: 13px; }
1278
973
 
1279
- @-webkit-keyframes response-loading2 {
1280
- 0% {
1281
- transform: translate(0, 0); }
1282
- 100% {
1283
- transform: translate(19px, 0); } }
974
+ .react-autoql-drawer .react-autoql-drawer:focus {
975
+ outline: none; }
1284
976
 
1285
- @keyframes response-loading2 {
1286
- 0% {
1287
- transform: translate(0, 0); }
1288
- 100% {
1289
- transform: translate(19px, 0); } }
977
+ .react-autoql-drawer .chat-header-container button {
978
+ background: transparent;
979
+ border: none;
980
+ color: var(--react-autoql-accent-text-color);
981
+ margin: 10px 0px 10px 0px;
982
+ margin-right: 0;
983
+ font-size: 20px;
984
+ cursor: pointer;
985
+ outline: none !important; }
1290
986
 
1291
- @-webkit-keyframes scale-up-center {
1292
- 0% {
1293
- transform: scale(0); }
1294
- 100% {
1295
- transform: scale(1); } }
987
+ .react-autoql-drawer .chat-header-container button:hover {
988
+ opacity: 0.7; }
1296
989
 
1297
- @keyframes scale-up-center {
1298
- 0% {
1299
- transform: scale(0); }
1300
- 100% {
1301
- transform: scale(1); } }
990
+ .react-autoql-drawer .chat-header-container button svg {
991
+ width: 35px;
992
+ height: 35px; }
1302
993
 
1303
- @-webkit-keyframes fadeIn {
1304
- 0% {
1305
- opacity: 0; }
1306
- 100% {
1307
- opacity: 1; } }
994
+ .topics-container {
995
+ margin: 5px 0; }
1308
996
 
1309
- @keyframes fadeIn {
1310
- 0% {
1311
- opacity: 0; }
1312
- 100% {
1313
- opacity: 1; } }
997
+ .intro-qi-link {
998
+ cursor: pointer;
999
+ color: var(--react-autoql-accent-color); }
1314
1000
 
1315
- @-webkit-keyframes slideDown {
1316
- 0% {
1317
- transform: translateY(-100%); }
1318
- 100% {
1319
- transform: translateY(0%); } }
1001
+ /* custom scrollbar */
1002
+ .react-autoql-drawer .chat-message-container > div:last-child {
1003
+ opacity: 0;
1004
+ transition: opacity 200ms ease; }
1320
1005
 
1321
- @keyframes slideDown {
1322
- 0% {
1323
- transform: translateY(-100%); }
1324
- 100% {
1325
- transform: translateY(0%); } }
1006
+ .react-autoql-drawer .chat-message-container:hover > div:last-child {
1007
+ opacity: 1; }
1326
1008
 
1327
- @-webkit-keyframes snackbarFadeout {
1328
- from {
1329
- top: 60px;
1330
- opacity: 1; }
1331
- to {
1332
- top: 30px;
1333
- opacity: 0; } }
1009
+ /* rc-drawer */
1010
+ .react-autoql-drawer .drawer-content {
1011
+ background: white;
1012
+ border-radius: 4px;
1013
+ overflow: visible;
1014
+ opacity: 1;
1015
+ transition: opacity 0.3s ease; }
1334
1016
 
1335
- @keyframes snackbarFadeout {
1336
- from {
1337
- top: 60px;
1338
- opacity: 1; }
1339
- to {
1340
- top: 30px;
1341
- opacity: 0; } }
1017
+ .react-autoql-drawer.closed .drawer-content {
1018
+ opacity: 0; }
1342
1019
 
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;
1020
+ .react-autoql-drawer .drawer-handle {
1021
+ transition: opacity 0.5s ease;
1352
1022
  overflow: hidden;
1353
- max-height: 100%;
1354
- max-width: 100%;
1355
- width: 100%;
1356
- height: 100%;
1357
- color: var(--react-autoql-text-color-primary); }
1023
+ width: 50px;
1024
+ height: 50px;
1025
+ border-radius: 50px !important;
1026
+ font-size: 22px; }
1027
+ .react-autoql-drawer .drawer-handle.default-logo {
1028
+ background-color: var(--react-autoql-accent-color, #26a7df);
1029
+ color: var(--react-autoql-accent-text-color); }
1030
+ .react-autoql-drawer .drawer-handle.default-logo .react-autoql-bubbles-outlined {
1031
+ position: absolute;
1032
+ vertical-align: top;
1033
+ top: 11px;
1034
+ left: 12px; }
1035
+ .react-autoql-drawer .drawer-handle.default-logo .react-autoql-bubbles-outlined svg {
1036
+ position: absolute;
1037
+ width: 26px;
1038
+ height: 26px; }
1358
1039
 
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%; }
1040
+ .react-autoql-drawer.drawer-right .drawer-handle {
1041
+ left: -70px !important; }
1366
1042
 
1367
- .react-autoql-response-content-container.table::-webkit-scrollbar {
1368
- width: 0;
1369
- height: 0; }
1043
+ .react-autoql-drawer.drawer-left .drawer-handle {
1044
+ right: -60px !important; }
1370
1045
 
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; }
1046
+ .react-autoql-drawer.drawer-top .drawer-handle {
1047
+ bottom: -60px !important; }
1384
1048
 
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; }
1049
+ .react-autoql-drawer.drawer-bottom .drawer-handle {
1050
+ top: -60px !important; }
1443
1051
 
1444
- /* query validation */
1445
- .react-autoql-query-validation-selector-container {
1446
- display: inline-block;
1447
- position: relative; }
1052
+ .react-autoql-drawer .drawer-handle.hide {
1053
+ opacity: 0;
1054
+ visibility: hidden; }
1448
1055
 
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; }
1056
+ .react-autoql-drawer .drawer-handle-icon,
1057
+ .react-autoql-drawer .drawer-handle-icon::before,
1058
+ .react-autoql-drawer .drawer-handle-icon::after {
1059
+ background: var(--react-autoql-text-color-primary); }
1460
1060
 
1461
- .react-autoql-query-validation-query {
1462
- text-align: center; }
1061
+ .react-autoql-drawer .drawer-bottom .drawer-content-wrapper,
1062
+ .react-autoql-drawer .drawer-top .drawer-content-wrapper {
1063
+ left: 0; }
1463
1064
 
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; }
1065
+ .react-autoql-drawer .drawer-content-wrapper {
1066
+ background: transparent; }
1475
1067
 
1476
- .react-autoql-query-validation-execute-btn:hover {
1477
- border-color: #28a8e0; }
1068
+ .react-autoql-drawer.drawer-right .drawer-content-wrapper,
1069
+ .react-autoql-drawer.drawer-left .drawer-content-wrapper {
1070
+ max-width: calc(100vw - 45px) !important;
1071
+ min-width: 400px !important; }
1478
1072
 
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); }
1073
+ .react-autoql-drawer.drawer-top .drawer-content-wrapper,
1074
+ .react-autoql-drawer.drawer-bottom .drawer-content-wrapper {
1075
+ max-height: calc(100vh - 45px) !important;
1076
+ min-height: 400px !important; }
1490
1077
 
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); }
1078
+ .react-autoql-drawer-resize-handle {
1079
+ position: absolute;
1080
+ background: transparent; }
1081
+ .react-autoql-drawer-resize-handle.right {
1082
+ top: 0;
1083
+ left: -5px;
1084
+ width: 5px;
1085
+ height: 100vh;
1086
+ cursor: ew-resize; }
1087
+ .react-autoql-drawer-resize-handle.left {
1088
+ top: 0;
1089
+ right: -5px;
1090
+ width: 5px;
1091
+ height: 100vh;
1092
+ cursor: ew-resize; }
1093
+ .react-autoql-drawer-resize-handle.top {
1094
+ bottom: -5px;
1095
+ left: 0;
1096
+ height: 5px;
1097
+ width: 100vw;
1098
+ cursor: ns-resize; }
1099
+ .react-autoql-drawer-resize-handle.bottom {
1100
+ top: -5px;
1101
+ left: 0;
1102
+ height: 5px;
1103
+ width: 100vw;
1104
+ cursor: ns-resize; }
1506
1105
 
1507
- .react-autoql-query-validation-delete-button {
1508
- position: relative;
1509
- cursor: pointer;
1510
- margin-bottom: -2px; }
1106
+ .react-autoql-drawer .response-loading-container {
1107
+ position: absolute;
1108
+ bottom: 45px;
1109
+ left: 20px; }
1511
1110
 
1512
- .react-autoql-chart-tooltip {
1111
+ /* Tooltips */
1112
+ .react-autoql-drawer-tooltip {
1513
1113
  font-family: var(--react-autoql-font-family), sans-serif;
1514
1114
  letter-spacing: 0.04em;
1515
- line-height: 22px;
1516
- font-size: 13px;
1115
+ line-height: 1.5em;
1517
1116
  padding: 7px 15px;
1518
- transition: all 0.2s ease !important;
1519
- text-align: left !important;
1117
+ transition: none;
1118
+ text-align: left;
1520
1119
  opacity: 1 !important;
1521
1120
  z-index: 99999 !important;
1522
1121
  /* necessary to show up on top of rc drawer */ }
1523
1122
 
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%; }
1123
+ .interpretation-tooltip {
1124
+ font-family: var(--react-autoql-font-family), sans-serif;
1125
+ font-size: 12px;
1126
+ text-align: left;
1127
+ letter-spacing: 0.04em;
1128
+ padding: 7px 15px;
1129
+ max-width: 400px;
1130
+ opacity: 1 !important;
1131
+ transition: none;
1132
+ z-index: 99999 !important;
1133
+ /* necessary to show up on top of rc drawer */ }
1539
1134
 
1540
- .react-autoql-query-validation-description {
1541
- margin-bottom: 14px; }
1135
+ .react-tiny-popover-container {
1136
+ z-index: 99999;
1137
+ border: 1px solid #ababab52;
1138
+ border-radius: 4px;
1139
+ box-shadow: 0px 0 8px rgba(0, 0, 0, 0.15);
1140
+ transition: opacity 0.2s ease 0s !important;
1141
+ opacity: 1 !important; }
1542
1142
 
1543
- .context-menu {
1143
+ .clear-messages-confirm-popover {
1144
+ color: var(--react-autoql-text-color-primary);
1544
1145
  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; }
1146
+ text-align: right;
1147
+ padding: 18px;
1148
+ width: 266px; }
1554
1149
 
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; }
1150
+ .react-autoql-confirm-text {
1151
+ text-align: center; }
1562
1152
 
1563
- .context-menu-list li:hover {
1564
- background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.05)); }
1153
+ .react-autoql-menu-text {
1154
+ text-align: center; }
1155
+ .react-autoql-menu-text:hover {
1156
+ color: var(--react-autoql-accent-color);
1157
+ cursor: pointer; }
1565
1158
 
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; }
1159
+ .react-autoql-confirm-icon {
1160
+ color: #faad14 !important;
1161
+ vertical-align: middle;
1162
+ margin-right: 5px !important;
1163
+ margin-bottom: 3px; }
1576
1164
 
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; }
1165
+ .data-messenger-tab-container {
1166
+ position: absolute;
1167
+ background: transparent;
1168
+ display: flex;
1169
+ justify-content: center;
1170
+ align-items: center;
1171
+ pointer-events: none; }
1172
+ .data-messenger-tab-container.right {
1173
+ height: 100vh;
1174
+ width: 60px;
1175
+ left: -60px; }
1176
+ .data-messenger-tab-container.left {
1177
+ height: 100vh;
1178
+ width: 60px;
1179
+ right: -60px; }
1180
+ .data-messenger-tab-container.top {
1181
+ width: 100vw;
1182
+ height: 60px;
1183
+ bottom: -60px; }
1184
+ .data-messenger-tab-container.bottom {
1185
+ width: 100vw;
1186
+ height: 60px;
1187
+ top: -60px; }
1591
1188
 
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%; }
1189
+ /* Shadow container (this is used to cut off the shadow so it doesnt show in the drawer) */
1190
+ .page-switcher-shadow-container {
1191
+ position: absolute;
1192
+ background: transparent;
1193
+ overflow: hidden; }
1602
1194
 
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; }
1195
+ .page-switcher-shadow-container.right {
1196
+ top: 80px;
1197
+ width: 60px; }
1610
1198
 
1611
- .month-select .react-autoql-radio-btn {
1612
- width: 40px; }
1199
+ .page-switcher-shadow-container.left {
1200
+ top: 80px;
1201
+ width: 60px; }
1613
1202
 
1614
- .year-select .react-autoql-radio-btn {
1615
- width: 67px;
1616
- height: 38px;
1617
- line-height: 32px; }
1203
+ /* Container holding the tabs */
1204
+ .page-switcher-container {
1205
+ box-shadow: -2px 0 8px rgba(0, 0, 0, 0.2);
1206
+ overflow: hidden;
1207
+ box-sizing: border-box;
1208
+ display: flex;
1209
+ pointer-events: all; }
1210
+ .page-switcher-container .tab {
1211
+ position: relative;
1212
+ z-index: 1;
1213
+ background: var(--react-autoql-accent-color);
1214
+ color: var(--react-autoql-accent-text-color);
1215
+ opacity: 1;
1216
+ font-size: 22px;
1217
+ text-align: center;
1218
+ transform: translate(0, 0);
1219
+ cursor: pointer;
1220
+ transition-property: background, color, transform, line-height, height, width, margin-right, margin-top, margin-left, margin-bottom, z-index, opacity;
1221
+ transition-duration: 0.2s; }
1222
+ .page-switcher-container .tab.react-autoql-explore-queries span.react-autoql-icon svg {
1223
+ height: 22px;
1224
+ width: 23px; }
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); }
1618
1264
 
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; }
1265
+ /* Individual Tabs */
1266
+ .page-switcher-container .tab {
1267
+ display: flex;
1268
+ justify-content: center;
1269
+ align-items: center; }
1270
+
1271
+ .data-messenger-notification-btn {
1272
+ display: flex;
1273
+ flex-direction: column;
1274
+ justify-content: flex-start;
1275
+ line-height: inherit; }
1276
+
1277
+ .page-switcher-container.right .tab,
1278
+ .page-switcher-container.left .tab {
1279
+ height: 65px; }
1280
+
1281
+ .page-switcher-container.top .tab,
1282
+ .page-switcher-container.bottom .tab {
1283
+ width: 65px; }
1284
+
1285
+ .page-switcher-container.bottom .tab {
1286
+ background: var(--react-autoql-background-color-secondary);
1287
+ color: var(--react-autoql-text-color-primary); }
1288
+
1289
+ .page-switcher-container .tab.active {
1290
+ background: var(--react-autoql-background-color-secondary);
1291
+ color: var(--react-autoql-text-color-primary);
1292
+ box-shadow: -2px 0px 8px 2px rgba(0, 0, 0, 0.2);
1293
+ font-weight: bold;
1294
+ position: relative;
1295
+ z-index: 2; }
1296
+
1297
+ .page-switcher-container.bottom .tab.active {
1298
+ background: var(--react-autoql-accent-color);
1299
+ color: #fff;
1300
+ font-weight: bold; }
1301
+
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); } }
1313
+
1314
+ @-webkit-keyframes response-loading3 {
1315
+ 0% {
1316
+ transform: scale(1); }
1317
+ 100% {
1318
+ transform: scale(0); } }
1319
+
1320
+ @keyframes response-loading3 {
1321
+ 0% {
1322
+ transform: scale(1); }
1323
+ 100% {
1324
+ transform: scale(0); } }
1325
+
1326
+ @-webkit-keyframes response-loading2 {
1327
+ 0% {
1328
+ transform: translate(0, 0); }
1329
+ 100% {
1330
+ transform: translate(19px, 0); } }
1331
+
1332
+ @keyframes response-loading2 {
1333
+ 0% {
1334
+ transform: translate(0, 0); }
1335
+ 100% {
1336
+ transform: translate(19px, 0); } }
1337
+
1338
+ @-webkit-keyframes scale-up-center {
1339
+ 0% {
1340
+ transform: scale(0); }
1341
+ 100% {
1342
+ transform: scale(1); } }
1343
+
1344
+ @keyframes scale-up-center {
1345
+ 0% {
1346
+ transform: scale(0); }
1347
+ 100% {
1348
+ transform: scale(1); } }
1349
+
1350
+ @-webkit-keyframes fadeIn {
1351
+ 0% {
1352
+ opacity: 0; }
1353
+ 100% {
1354
+ opacity: 1; } }
1355
+
1356
+ @keyframes fadeIn {
1357
+ 0% {
1358
+ opacity: 0; }
1359
+ 100% {
1360
+ opacity: 1; } }
1361
+
1362
+ @-webkit-keyframes slideDown {
1363
+ 0% {
1364
+ transform: translateY(-100%); }
1365
+ 100% {
1366
+ transform: translateY(0%); } }
1367
+
1368
+ @keyframes slideDown {
1369
+ 0% {
1370
+ transform: translateY(-100%); }
1371
+ 100% {
1372
+ transform: translateY(0%); } }
1373
+
1374
+ @-webkit-keyframes snackbarFadeout {
1375
+ from {
1376
+ top: 60px;
1377
+ opacity: 1; }
1378
+ to {
1379
+ top: 30px;
1380
+ opacity: 0; } }
1381
+
1382
+ @keyframes snackbarFadeout {
1383
+ from {
1384
+ top: 60px;
1385
+ opacity: 1; }
1386
+ to {
1387
+ top: 30px;
1388
+ opacity: 0; } }
1644
1389
 
1645
1390
  .react-autoql-notifications-button-container {
1646
1391
  position: relative;
@@ -1989,19 +1734,31 @@ tbody::-webkit-scrollbar-thumb {
1989
1734
  .react-autoql-notification-list-item .react-autoql-notification-display-name-container .react-autoql-notification-timestamp span.react-autoql-icon svg {
1990
1735
  margin-bottom: -1px; }
1991
1736
 
1992
- .notification-rule-add-btn-outer,
1993
- .notification-rule-validate-btn-outer {
1994
- text-align: center;
1995
- border-style: dashed !important;
1996
- height: 38px;
1997
- line-height: 25px;
1998
- margin: 0 !important;
1999
- overflow: hidden; }
2000
-
2001
1737
  .notification-rule-outer-container {
2002
1738
  position: relative;
2003
1739
  border: 1px solid transparent;
2004
- border-radius: 4px; }
1740
+ border-radius: 4px;
1741
+ padding-bottom: 5px; }
1742
+
1743
+ .expression-error-message {
1744
+ padding-left: 5px; }
1745
+
1746
+ .data-alerts-container.read-only .react-autoql-notification-group-container {
1747
+ border: none; }
1748
+
1749
+ .notification-rule-add-btn-outer,
1750
+ .notification-rule-validate-btn-outer {
1751
+ text-align: center;
1752
+ border-style: dashed !important;
1753
+ height: 38px;
1754
+ line-height: 25px;
1755
+ margin: 0 !important;
1756
+ overflow: hidden; }
1757
+
1758
+ .notification-rule-outer-container {
1759
+ position: relative;
1760
+ border: 1px solid transparent;
1761
+ border-radius: 4px; }
2005
1762
  .notification-rule-outer-container.outlined {
2006
1763
  border-color: rgba(0, 0, 0, 0.15);
2007
1764
  padding: 0 20px;
@@ -2019,18 +1776,6 @@ tbody::-webkit-scrollbar-thumb {
2019
1776
  .data-alerts-container.read-only .react-autoql-notification-group-container {
2020
1777
  border: none; }
2021
1778
 
2022
- .notification-rule-outer-container {
2023
- position: relative;
2024
- border: 1px solid transparent;
2025
- border-radius: 4px;
2026
- padding-bottom: 5px; }
2027
-
2028
- .expression-error-message {
2029
- padding-left: 5px; }
2030
-
2031
- .data-alerts-container.read-only .react-autoql-notification-group-container {
2032
- border: none; }
2033
-
2034
1779
  .react-autoql-notification-settings {
2035
1780
  background-color: var(--react-autoql-background-color-secondary);
2036
1781
  color: var(--react-autoql-text-color-primary);
@@ -2133,7 +1878,7 @@ tbody::-webkit-scrollbar-thumb {
2133
1878
  .notification-modal-content .step-btn-container {
2134
1879
  text-align: right;
2135
1880
  display: flex;
2136
- min-height: 50px; }
1881
+ min-height: 20px; }
2137
1882
 
2138
1883
  .expression-valid-checkmark.react-autoql-icon svg {
2139
1884
  color: var(--react-autoql-success-color); }
@@ -2187,646 +1932,1074 @@ tbody::-webkit-scrollbar-thumb {
2187
1932
  border-radius: 4px;
2188
1933
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13); }
2189
1934
 
2190
- .react-autoql-dashboard-tile-inner-div {
1935
+ .react-autoql-dashboard-tile-inner-div {
1936
+ height: 100%;
1937
+ width: 100%;
1938
+ background: inherit;
1939
+ position: relative;
1940
+ text-align: center;
1941
+ display: flex;
1942
+ justify-content: flex-start;
1943
+ flex-direction: column;
1944
+ align-items: center; }
1945
+
1946
+ .react-autoql-dashboard-tile-drag-handle {
1947
+ transition: opacity 0.3s ease;
1948
+ position: absolute;
1949
+ background-color: var(--react-autoql-border-color, #f7f7f7);
1950
+ cursor: move;
1951
+ opacity: 0; }
1952
+ .react-autoql-dashboard-tile-drag-handle.top {
1953
+ top: 0;
1954
+ left: 0;
1955
+ width: 100%;
1956
+ height: 15px; }
1957
+ .react-autoql-dashboard-tile-drag-handle.bottom {
1958
+ bottom: 0;
1959
+ left: 0;
1960
+ width: 100%;
1961
+ height: 15px; }
1962
+ .react-autoql-dashboard-tile-drag-handle.left {
1963
+ top: 0;
1964
+ left: 0;
1965
+ width: 15px;
1966
+ height: 100%; }
1967
+ .react-autoql-dashboard-tile-drag-handle.right {
1968
+ top: 0;
1969
+ right: 0;
1970
+ width: 15px;
1971
+ height: 100%; }
1972
+
1973
+ .react-autoql-dashboard-tile:hover .react-autoql-dashboard-tile-drag-handle {
1974
+ opacity: 1; }
1975
+
1976
+ .react-autoql-dashboard-tile .autoql-options-toolbar {
1977
+ transition: opacity 0.3s ease, color 0.3s ease;
1978
+ visibility: hidden;
1979
+ opacity: 0;
1980
+ bottom: 8px;
1981
+ right: 8px;
1982
+ z-index: 1; }
1983
+
1984
+ .dashboard-tile-viz-toolbar-container {
1985
+ transition: opacity 0.3s ease, color 0.3s ease;
1986
+ color: var(--react-autoql-accent-color);
1987
+ position: absolute;
1988
+ bottom: 0;
1989
+ left: 0;
1990
+ padding: 7px;
1991
+ z-index: 1;
1992
+ opacity: 0;
1993
+ visibility: hidden; }
1994
+ .dashboard-tile-viz-toolbar-container .viz-toolbar,
1995
+ .dashboard-tile-viz-toolbar-container .split-view-btn {
1996
+ position: relative;
1997
+ display: inline-block;
1998
+ background: var(--react-autoql-background-color-primary); }
1999
+ .dashboard-tile-viz-toolbar-container .split-view-btn {
2000
+ margin-right: 7px; }
2001
+ .dashboard-tile-viz-toolbar-container .split-view-btn .react-autoql-icon {
2002
+ font-size: 14px; }
2003
+
2004
+ .split-view-btn {
2005
+ z-index: 1; }
2006
+
2007
+ .split-view-query-btn {
2008
+ transition: opacity 0.3s ease, color 0.3s ease;
2009
+ color: var(--react-autoql-accent-color);
2010
+ position: absolute;
2011
+ top: 7px;
2012
+ left: 7px;
2013
+ bottom: unset;
2014
+ z-index: 1;
2015
+ visibility: hidden;
2016
+ opacity: 0; }
2017
+
2018
+ .react-autoql-dashboard-tile:hover .dashboard-tile-viz-toolbar-container,
2019
+ .react-autoql-dashboard-tile:hover .split-view-query-btn,
2020
+ .react-autoql-dashboard-tile:hover .autoql-options-toolbar {
2021
+ visibility: visible;
2022
+ opacity: 1; }
2023
+
2024
+ .react-autoql-dashboard-tile-inner-div .single-value-response {
2025
+ font-size: 32px;
2026
+ margin-top: -6px;
2027
+ opacity: 0.9; }
2028
+
2029
+ .react-autoql-dashboard-tile-inner-div .dashboard-tile-response-wrapper {
2030
+ height: calc(100% - 47px);
2031
+ width: 100%;
2032
+ padding-top: 0;
2033
+ background: inherit; }
2034
+ .react-autoql-dashboard-tile-inner-div .dashboard-tile-response-wrapper .query-output-error-message,
2035
+ .react-autoql-dashboard-tile-inner-div .dashboard-tile-response-wrapper .no-columns-error-message {
2036
+ margin: auto; }
2037
+ .react-autoql-dashboard-tile-inner-div .dashboard-tile-response-wrapper .layout-splitter {
2038
+ height: 1px !important;
2039
+ color: var(--react-autoql-border-color);
2040
+ opacity: 0.3;
2041
+ pointer-events: none; }
2042
+ .react-autoql-dashboard-tile-inner-div .dashboard-tile-response-wrapper .react-autoql-table {
2043
+ opacity: 0.9;
2044
+ color: var(--react-autoql-text-color-primary);
2045
+ font-size: 11px; }
2046
+
2047
+ .react-autoql-dashboard-tile-inner-div.split .dashboard-tile-response-wrapper {
2048
+ padding: 0; }
2049
+
2050
+ .react-autoql-dashboard-tile-inner-div
2051
+ .dashboard-tile-response-wrapper.editing .layout-splitter {
2052
+ display: block;
2053
+ pointer-events: unset;
2054
+ height: 4px !important;
2055
+ color: var(--react-autoql-text-color-primary);
2056
+ opacity: 0.8; }
2057
+
2058
+ /* Safetynet styles specific to dashboard tiles */
2059
+ .react-autoql-dashboard-tile-inner-div
2060
+ .dashboard-tile-response-wrapper.editing {
2061
+ height: 100%;
2062
+ width: 100%;
2063
+ overflow-x: auto;
2064
+ overflow-y: hidden; }
2065
+
2066
+ .react-autoql-dashboard-tile-inner-div .react-autoql-query-validation-query {
2067
+ white-space: nowrap; }
2068
+
2069
+ .dashboard-tile-response-wrapper.small
2070
+ .react-autoql-query-validation-description,
2071
+ .dashboard-tile-response-wrapper.small
2072
+ .react-autoql-suggestion-message-description,
2073
+ .dashboard-tile-response-wrapper.small
2074
+ .react-autoql-query-validation-execute-btn {
2075
+ display: none; }
2076
+
2077
+ .dashboard-tile-response-wrapper .dashboard-tile-response-container {
2078
+ position: relative;
2079
+ height: 100%;
2080
+ width: 100%;
2081
+ background: inherit;
2082
+ cursor: default; }
2083
+ .dashboard-tile-response-wrapper .dashboard-tile-response-container .react-autoql-table-container {
2084
+ padding: 20px;
2085
+ padding-top: 15px; }
2086
+ .dashboard-tile-response-wrapper .dashboard-tile-response-container .react-autoql-response-content-container {
2087
+ padding: 7px;
2088
+ align-items: center; }
2089
+
2090
+ .dashboard-tile-title-container {
2091
+ width: 100%;
2092
+ text-align: left;
2093
+ padding: 19px 25px 0 25px;
2094
+ height: 47px;
2095
+ white-space: nowrap;
2096
+ overflow: hidden;
2097
+ text-overflow: ellipsis;
2098
+ flex-shrink: 0;
2099
+ flex-grow: 0; }
2100
+ .dashboard-tile-title-container .dashboard-tile-title {
2101
+ color: var(--react-autoql-accent-color, #26a7df); }
2102
+
2103
+ .dashboard-tile-title-container .dashboard-tile-title {
2104
+ font-weight: bold;
2105
+ font-size: 14px; }
2106
+
2107
+ .dashboard-tile-edit-wrapper {
2108
+ display: flex;
2109
+ width: 100%;
2110
+ height: 55px;
2111
+ padding: 20px 20px 0 25px;
2112
+ flex-shrink: 0;
2113
+ flex-grow: 0; }
2114
+
2115
+ .dashboard-tile-play-button {
2116
+ cursor: default;
2117
+ flex-grow: 0;
2118
+ flex-shrink: 0; }
2119
+
2120
+ .dashboard-tile-play-button span.react-autoql-icon svg {
2121
+ cursor: pointer;
2122
+ width: 25px;
2123
+ height: 33px;
2124
+ margin-left: 10px;
2125
+ color: var(--react-autoql-accent-color); }
2126
+
2127
+ .dashboard-tile-play-button.disabled svg {
2128
+ opacity: 0.5;
2129
+ cursor: not-allowed; }
2130
+
2131
+ .dashboard-tile-play-button:not(.disabled) svg:hover {
2132
+ opacity: 0.8; }
2133
+
2134
+ .dashboard-tile-delete-button {
2135
+ opacity: 0;
2136
+ font-size: 17px;
2137
+ color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.4));
2138
+ position: absolute;
2139
+ top: 0px;
2140
+ right: 2px;
2141
+ cursor: pointer;
2142
+ transition: opacity 0.3s ease;
2143
+ z-index: 1; }
2144
+
2145
+ .react-grid-item:hover .dashboard-tile-delete-button {
2146
+ opacity: 1; }
2147
+
2148
+ .dashboard-tile-loading-container {
2149
+ display: flex;
2150
+ height: 100%;
2151
+ width: 100%;
2152
+ padding: 20px;
2153
+ align-items: center;
2154
+ justify-content: center; }
2155
+
2156
+ .dashboard-tile-title-divider {
2157
+ height: 2px;
2158
+ background: currentColor;
2159
+ width: 75px;
2160
+ margin-top: 4px;
2161
+ opacity: 0.07; }
2162
+
2163
+ /* Input box styling for edit mode */
2164
+ .dashboard-tile-input-container {
2165
+ display: flex;
2166
+ width: 100%;
2167
+ height: 100%;
2168
+ font-size: 15px; }
2169
+ .dashboard-tile-input-container .dashboard-tile-input,
2170
+ .dashboard-tile-input-container .dashboard-tile-autocomplete-input {
2171
+ width: 100%;
2172
+ height: 100%;
2173
+ padding: 12px;
2174
+ padding-left: 33px;
2175
+ border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
2176
+ outline: none !important;
2177
+ color: var(--react-autoql-text-color-primary, #356f90);
2178
+ background: var(--react-autoql-background-color-primary, #fff); }
2179
+
2180
+ .query-focused .dashboard-tile-left-input-container,
2181
+ .title-focused .dashboard-tile-right-input-container {
2182
+ width: 70%; }
2183
+
2184
+ .dashboard-tile-right-input-container {
2185
+ z-index: 2; }
2186
+
2187
+ .dashboard-tile-right-input-container,
2188
+ .dashboard-tile-left-input-container {
2189
+ position: relative;
2190
+ width: 0;
2191
+ flex-grow: 1;
2192
+ transition: width 0.3s ease; }
2193
+ .dashboard-tile-right-input-container .query-input-icon,
2194
+ .dashboard-tile-right-input-container .title-input-icon,
2195
+ .dashboard-tile-left-input-container .query-input-icon,
2196
+ .dashboard-tile-left-input-container .title-input-icon {
2197
+ color: var(--react-autoql-accent-color);
2198
+ position: absolute;
2199
+ pointer-events: none;
2200
+ z-index: 1; }
2201
+ .dashboard-tile-right-input-container .query-input-icon,
2202
+ .dashboard-tile-left-input-container .query-input-icon {
2203
+ font-size: 18px;
2204
+ top: 4px;
2205
+ left: 10px; }
2206
+ .dashboard-tile-right-input-container .title-input-icon,
2207
+ .dashboard-tile-left-input-container .title-input-icon {
2208
+ font-size: 16px;
2209
+ top: 7px;
2210
+ left: 11px; }
2211
+
2212
+ .dashboard-tile-input.second.query {
2213
+ transition: all 0.3s ease;
2214
+ border: 1px solid transparent;
2215
+ outline: none !important;
2216
+ color: var(--react-autoql-text-color-primary, #356f90);
2217
+ background: var(--react-autoql-background-color-primary);
2218
+ margin: 0px;
2219
+ padding: 0px;
2220
+ width: 0px;
2221
+ height: 28px;
2222
+ pointer-events: none; }
2223
+ .dashboard-tile-input.second.query.open {
2224
+ width: 200px;
2225
+ padding: 12px;
2226
+ margin-left: 5px;
2227
+ border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
2228
+ pointer-events: unset; }
2229
+
2230
+ .dashboard-tile-input:hover,
2231
+ .dashboard-tile-input:focus,
2232
+ .dashboard-tile-input-container .dashboard-tile-autocomplete-input:hover,
2233
+ .dashboard-tile-input-container .dashboard-tile-autocomplete-input:focus {
2234
+ border: 1px solid #26a7e9 !important;
2235
+ border-color: var(--react-autoql-accent-color) !important; }
2236
+
2237
+ .dashboard-tile-input-container .dashboard-tile-input.query,
2238
+ .dashboard-tile-input-container .dashboard-tile-autocomplete-input {
2239
+ padding-left: 36px;
2240
+ border-top-left-radius: 4px;
2241
+ border-bottom-left-radius: 4px; }
2242
+
2243
+ .dashboard-tile-input-container .dashboard-tile-input.title {
2244
+ border-left: none;
2245
+ border-top-right-radius: 4px;
2246
+ border-bottom-right-radius: 4px;
2247
+ z-index: 2; }
2248
+
2249
+ .dashboard-tile-input-container .dashboard-tile-input.title:hover,
2250
+ .dashboard-tile-input-container .dashboard-tile-input.title:focus,
2251
+ .title-focused .dashboard-tile-right-input-container .dashboard-tile-input,
2252
+ .dashboard-tile-right-input-container:hover .dashboard-tile-input {
2253
+ /* This is done to balance it because we add a 1px left border when the input is focused or hovered */
2254
+ margin-left: -2px; }
2255
+
2256
+ /* Autocomplete styles */
2257
+ .dashboard-tile-input-container .react-autosuggest__container {
2258
+ position: relative;
2259
+ width: 100%;
2260
+ height: 100%;
2261
+ padding: 0;
2262
+ margin: 0; }
2263
+
2264
+ .dashboard-tile-input-container
2265
+ .react-autosuggest__suggestions-container--open {
2266
+ background-color: var(--react-autoql-background-color-primary);
2267
+ border: 1px solid var(--react-autoql-border-color);
2268
+ color: var(--react-autoql-text-color-primary); }
2269
+
2270
+ .dashboard-tile-input-container .react-autosuggest__suggestion {
2271
+ color: var(--react-autoql-text-color-primary); }
2272
+
2273
+ .dashboard-tile-input-container input::-moz-placeholder {
2274
+ opacity: 0.5; }
2275
+
2276
+ .dashboard-tile-input-container input:-ms-input-placeholder {
2277
+ opacity: 0.5; }
2278
+
2279
+ .dashboard-tile-input-container input::placeholder {
2280
+ opacity: 0.5; }
2281
+
2282
+ .react-autoql-dashboard .edit-mode-placeholder-icon {
2283
+ display: inline-block;
2284
+ line-height: 22px;
2285
+ vertical-align: middle;
2286
+ height: 23px; }
2287
+
2288
+ .dashboard-tile-input-container
2289
+ .react-autosuggest__suggestions-container--open {
2290
+ position: absolute;
2291
+ bottom: unset;
2292
+ padding-top: 5px;
2293
+ padding-bottom: 5px;
2294
+ display: block;
2295
+ height: unset;
2296
+ border-radius: 24px;
2297
+ font-family: inherit;
2298
+ font-size: 15px;
2299
+ font-weight: normal;
2300
+ z-index: 2;
2301
+ overflow: hidden;
2302
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
2303
+ text-align: left;
2304
+ width: 100%;
2305
+ top: 35px;
2306
+ border-radius: 4px;
2307
+ margin: 0; }
2308
+
2309
+ .dashboard-tile-input-container .react-autosuggest__suggestions-list {
2310
+ margin: 0;
2311
+ padding: 0;
2312
+ list-style-type: none; }
2313
+
2314
+ .dashboard-tile-input-container .react-autosuggest__suggestion {
2315
+ cursor: pointer;
2316
+ padding: 2px;
2317
+ padding-left: 18px;
2318
+ letter-spacing: 0.05em;
2319
+ line-height: 22.5px; }
2320
+
2321
+ .dashboard-tile-input-container .react-autosuggest__suggestion--highlighted {
2322
+ background-color: rgba(0, 0, 0, 0.1) !important; }
2323
+
2324
+ .dashboard-tile-input-container .react-autosuggest__section-title {
2325
+ padding: 10px 0 0 10px;
2326
+ font-size: 12px;
2327
+ color: #777; }
2328
+
2329
+ /* Dragging placeholder styles */
2330
+ .react-autoql-db-dragging-placeholder-container {
2191
2331
  height: 100%;
2192
2332
  width: 100%;
2193
- background: inherit;
2194
- position: relative;
2195
- text-align: center;
2333
+ padding: 20px 30px;
2196
2334
  display: flex;
2197
- justify-content: flex-start;
2198
- flex-direction: column;
2199
- align-items: center; }
2335
+ flex-direction: column; }
2200
2336
 
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; }
2337
+ .react-autoql-db-dragging-placeholder-title {
2338
+ width: 100%;
2339
+ height: 35px;
2340
+ background: #f3f3f3;
2341
+ border-top-right-radius: 4px;
2342
+ border-top-left-radius: 4px;
2343
+ flex-shrink: 0;
2344
+ flex-grow: 0; }
2207
2345
 
2208
- .react-autoql-dashboard-tile-drag-handle {
2209
- transition: opacity 0.3s ease;
2346
+ .react-autoql-db-dragging-placeholder-content {
2347
+ width: 100%;
2348
+ height: 100%;
2349
+ background: #f9f9f9;
2350
+ border-bottom-right-radius: 4px;
2351
+ border-bottom-left-radius: 4px; }
2352
+
2353
+ .dashboard-tile-placeholder-text {
2354
+ font-size: 15px;
2355
+ color: var(--react-autoql-text-color-placeholder, rgba(0, 0, 0, 0.3)); }
2356
+ .dashboard-tile-placeholder-text .play-icon {
2357
+ vertical-align: bottom;
2358
+ line-height: 20px; }
2359
+
2360
+ /* React Grid Layout overrides */
2361
+ .react-grid-item .react-resizable-handle {
2362
+ z-index: 1;
2210
2363
  position: absolute;
2211
- background-color: var(--react-autoql-border-color, #f7f7f7);
2212
- cursor: move;
2213
- opacity: 0; }
2214
- .react-autoql-dashboard-tile-drag-handle.top {
2215
- top: 0;
2216
- left: 0;
2217
- width: 100%;
2218
- height: 15px; }
2219
- .react-autoql-dashboard-tile-drag-handle.bottom {
2220
- bottom: 0;
2221
- left: 0;
2222
- width: 100%;
2223
- height: 15px; }
2224
- .react-autoql-dashboard-tile-drag-handle.left {
2225
- top: 0;
2226
- left: 0;
2227
- width: 15px;
2228
- height: 100%; }
2229
- .react-autoql-dashboard-tile-drag-handle.right {
2230
- top: 0;
2231
- right: 0;
2232
- width: 15px;
2233
- height: 100%; }
2364
+ width: 11px;
2365
+ height: 11px;
2366
+ bottom: 4px;
2367
+ right: 4px;
2368
+ opacity: 0;
2369
+ border-right: 1px solid var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.4)) !important;
2370
+ border-bottom: 1px solid var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.4)) !important;
2371
+ transition: opacity 0.3s ease; }
2234
2372
 
2235
- .react-autoql-dashboard-tile:hover .react-autoql-dashboard-tile-drag-handle {
2373
+ .react-autoql-dashboard-tile.editing:hover .react-resizable-handle {
2236
2374
  opacity: 1; }
2237
2375
 
2238
- .react-autoql-dashboard-tile .autoql-options-toolbar {
2239
- transition: opacity 0.3s ease, color 0.3s ease;
2240
- visibility: hidden;
2241
- opacity: 0;
2242
- bottom: 8px;
2243
- right: 8px;
2244
- z-index: 1; }
2376
+ .react-grid-placeholder {
2377
+ background: rgba(0, 0, 0, 0.13) !important; }
2245
2378
 
2246
- .dashboard-tile-viz-toolbar-container {
2247
- transition: opacity 0.3s ease, color 0.3s ease;
2248
- color: var(--react-autoql-accent-color);
2249
- position: absolute;
2250
- bottom: 0;
2251
- left: 0;
2252
- padding: 7px;
2253
- z-index: 1;
2254
- opacity: 0;
2255
- visibility: hidden; }
2256
- .dashboard-tile-viz-toolbar-container .viz-toolbar,
2257
- .dashboard-tile-viz-toolbar-container .split-view-btn {
2258
- position: relative;
2259
- display: inline-block;
2260
- background: var(--react-autoql-background-color-primary); }
2261
- .dashboard-tile-viz-toolbar-container .split-view-btn {
2262
- margin-right: 7px; }
2263
- .dashboard-tile-viz-toolbar-container .split-view-btn .react-autoql-icon {
2264
- font-size: 14px; }
2379
+ /* This fixes the flickering bug in RGL when resizing elements */
2380
+ .react-draggable-transparent-selection span::-moz-selection, .react-draggable-transparent-selection div::-moz-selection, .react-draggable-transparent-selection a::-moz-selection, .react-draggable-transparent-selection input::-moz-selection, .react-draggable-transparent-selection text::-moz-selection {
2381
+ color: inherit; }
2382
+ .react-draggable-transparent-selection input::-moz-placeholder {
2383
+ color: inherit; }
2384
+ .react-draggable-transparent-selection input:-ms-input-placeholder {
2385
+ color: inherit; }
2386
+ .react-draggable-transparent-selection span::selection,
2387
+ .react-draggable-transparent-selection div::selection,
2388
+ .react-draggable-transparent-selection a::selection,
2389
+ .react-draggable-transparent-selection input::selection,
2390
+ .react-draggable-transparent-selection text::selection,
2391
+ .react-draggable-transparent-selection input::placeholder {
2392
+ color: inherit; }
2265
2393
 
2266
- .split-view-btn {
2267
- z-index: 1; }
2394
+ .dashboard-tile-response-container .layout-pane-primary {
2395
+ overflow: hidden; }
2268
2396
 
2269
- .split-view-query-btn {
2270
- transition: opacity 0.3s ease, color 0.3s ease;
2271
- color: var(--react-autoql-accent-color);
2272
- position: absolute;
2273
- top: 7px;
2274
- left: 7px;
2275
- bottom: unset;
2276
- z-index: 1;
2277
- visibility: hidden;
2278
- opacity: 0; }
2397
+ .splitter-layout,
2398
+ .layout-pane,
2399
+ .dashboard-tile-split-pane-container,
2400
+ .react-autoql-dashboard-drilldown-original {
2401
+ display: flex;
2402
+ align-items: stretch;
2403
+ justify-content: center;
2404
+ width: 100%; }
2279
2405
 
2280
- .react-autoql-dashboard-tile:hover .dashboard-tile-viz-toolbar-container,
2281
- .react-autoql-dashboard-tile:hover .split-view-query-btn,
2282
- .react-autoql-dashboard-tile:hover .autoql-options-toolbar {
2283
- visibility: visible;
2284
- opacity: 1; }
2406
+ .dashboard-tile-response-container .splitter-layout,
2407
+ .dashboard-tile-response-container .layout-pane,
2408
+ .dashboard-tile-response-container .dashboard-tile-split-pane-container {
2409
+ background: inherit; }
2285
2410
 
2286
- .react-autoql-dashboard-tile-inner-div .single-value-response {
2287
- font-size: 32px;
2288
- margin-top: -6px;
2289
- opacity: 0.9; }
2411
+ .react-autoql-btn {
2412
+ border-radius: 4px;
2413
+ cursor: pointer;
2414
+ outline: none !important;
2415
+ transition: all 0.2s ease;
2416
+ width: auto;
2417
+ display: inline-block; }
2290
2418
 
2291
- .react-autoql-dashboard-tile-inner-div .dashboard-tile-response-wrapper {
2292
- height: calc(100% - 47px);
2293
- width: 100%;
2294
- padding-top: 0;
2419
+ .react-autoql-btn.disabled {
2420
+ opacity: 0.4;
2421
+ cursor: not-allowed;
2422
+ pointer-events: none; }
2423
+
2424
+ .react-autoql-btn.small {
2425
+ padding: 2px 8px;
2426
+ margin: 2px 3px; }
2427
+
2428
+ .react-autoql-btn.large {
2429
+ padding: 10px 16px;
2430
+ margin: 2px 5px; }
2431
+
2432
+ .react-autoql-btn.default {
2433
+ color: inherit;
2434
+ border: 1px solid var(--react-autoql-border-color);
2295
2435
  background: inherit; }
2296
- .react-autoql-dashboard-tile-inner-div .dashboard-tile-response-wrapper .query-output-error-message {
2436
+ .react-autoql-btn.default:hover {
2437
+ border-color: var(--react-autoql-accent-color);
2438
+ color: var(--react-autoql-accent-color); }
2439
+
2440
+ .react-autoql-btn.primary {
2441
+ background: var(--react-autoql-accent-color);
2442
+ border: 1px solid var(--react-autoql-accent-color);
2443
+ color: var(--react-autoql-accent-text-color); }
2444
+ .react-autoql-btn.primary:hover {
2297
2445
  opacity: 0.8; }
2298
- .react-autoql-dashboard-tile-inner-div .dashboard-tile-response-wrapper .layout-splitter {
2299
- height: 1px !important;
2300
- color: var(--react-autoql-border-color);
2301
- opacity: 0.3;
2302
- pointer-events: none; }
2303
- .react-autoql-dashboard-tile-inner-div .dashboard-tile-response-wrapper .react-autoql-table {
2304
- opacity: 0.9;
2305
- color: var(--react-autoql-text-color-primary);
2306
- font-size: 11px; }
2307
2446
 
2308
- .react-autoql-dashboard-tile-inner-div.split .dashboard-tile-response-wrapper {
2309
- padding: 0; }
2447
+ .react-autoql-btn.danger {
2448
+ color: var(--react-autoql-danger-color, #ca0b00);
2449
+ border: 1px solid var(--react-autoql-danger-color, #ca0b00);
2450
+ background: inherit; }
2451
+ .react-autoql-btn.danger:hover {
2452
+ background-color: var(--react-autoql-danger-color, #ca0b00);
2453
+ color: #fff; }
2310
2454
 
2311
- .react-autoql-dashboard-tile-inner-div
2312
- .dashboard-tile-response-wrapper.editing .layout-splitter {
2313
- display: block;
2314
- pointer-events: unset;
2315
- height: 4px !important;
2455
+
2456
+ .ReactModal__Overlay {
2457
+ background-color: transparent !important;
2458
+ transition: background-color 0.2s ease-in-out;
2459
+ z-index: 9999; }
2460
+
2461
+ .ReactModal__Overlay--after-open {
2462
+ background-color: rgba(0, 0, 0, 0.25) !important; }
2463
+
2464
+ .ReactModal__Overlay--before-close {
2465
+ background-color: transparent !important; }
2466
+
2467
+ .ReactModal__Content {
2468
+ display: flex;
2469
+ flex-direction: column;
2470
+ transform: scale(0);
2471
+ transition: all 0.2s ease-in-out;
2316
2472
  color: var(--react-autoql-text-color-primary);
2317
- opacity: 0.8; }
2473
+ border: 1px solid var(--react-autoql-border-color) !important;
2474
+ background: var(--react-autoql-background-color-primary) !important;
2475
+ box-shadow: 0 0 14px 1px rgba(0, 0, 0, 0.15);
2476
+ padding: 0 !important;
2477
+ margin: auto auto;
2478
+ max-width: 90vw;
2479
+ max-height: calc(100vh - 90px); }
2480
+ .ReactModal__Content input.react-autoql-input,
2481
+ .ReactModal__Content textarea.react-autoql-input,
2482
+ .ReactModal__Content textarea {
2483
+ border-color: var(--react-autoql-border-color);
2484
+ color: var(--react-autoql-text-color-primary);
2485
+ background: var(--react-autoql-background-color-primary, white); }
2486
+ .ReactModal__Content input.react-autoql-input::-moz-placeholder, .ReactModal__Content textarea.react-autoql-input::-moz-placeholder, .ReactModal__Content textarea::-moz-placeholder {
2487
+ color: var(--react-autoql-text-color-placeholder); }
2488
+ .ReactModal__Content input.react-autoql-input:-ms-input-placeholder, .ReactModal__Content textarea.react-autoql-input:-ms-input-placeholder, .ReactModal__Content textarea:-ms-input-placeholder {
2489
+ color: var(--react-autoql-text-color-placeholder); }
2490
+ .ReactModal__Content input.react-autoql-input::placeholder,
2491
+ .ReactModal__Content textarea.react-autoql-input::placeholder,
2492
+ .ReactModal__Content textarea::placeholder {
2493
+ color: var(--react-autoql-text-color-placeholder); }
2318
2494
 
2319
- /* Safetynet styles specific to dashboard tiles */
2320
- .react-autoql-dashboard-tile-inner-div
2321
- .dashboard-tile-response-wrapper.editing {
2322
- height: 100%;
2323
- width: 100%;
2324
- overflow-x: auto;
2325
- overflow-y: hidden; }
2495
+ .ReactModal__Overlay--after-open .ReactModal__Content {
2496
+ transform: scale(1); }
2326
2497
 
2327
- .react-autoql-dashboard-tile-inner-div .react-autoql-query-validation-query {
2328
- white-space: nowrap; }
2498
+ .ReactModal__Overlay--before-close .ReactModal__Content {
2499
+ transform: scale(0); }
2329
2500
 
2330
- .dashboard-tile-response-wrapper.small
2331
- .react-autoql-query-validation-description,
2332
- .dashboard-tile-response-wrapper.small
2333
- .react-autoql-suggestion-message-description,
2334
- .dashboard-tile-response-wrapper.small
2335
- .react-autoql-query-validation-execute-btn {
2336
- display: none; }
2501
+ .react-autoql-modal-header {
2502
+ position: relative;
2503
+ text-align: center;
2504
+ flex: 0 0 52px;
2505
+ border-bottom: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05));
2506
+ padding: 14px 60px;
2507
+ font-size: 16px; }
2337
2508
 
2338
- .dashboard-tile-response-wrapper .dashboard-tile-response-container {
2509
+ .react-autoql-modal-footer {
2339
2510
  position: relative;
2340
- height: 100%;
2341
- width: 100%;
2342
- background: inherit;
2343
- cursor: default; }
2344
- .dashboard-tile-response-wrapper .dashboard-tile-response-container .react-autoql-table-container {
2345
- padding: 20px;
2346
- padding-top: 15px; }
2347
- .dashboard-tile-response-wrapper .dashboard-tile-response-container .react-autoql-response-content-container {
2348
- padding: 7px; }
2511
+ flex: 0 0 52px;
2512
+ border-top: 1px solid rgba(0, 0, 0, 0.05);
2513
+ text-align: right;
2514
+ padding: 8px 10px; }
2349
2515
 
2350
- .dashboard-tile-title-container {
2351
- width: 100%;
2352
- text-align: left;
2353
- padding: 19px 25px 0 25px;
2354
- height: 47px;
2355
- white-space: nowrap;
2356
- overflow: hidden;
2357
- text-overflow: ellipsis;
2358
- flex-shrink: 0;
2359
- flex-grow: 0; }
2360
- .dashboard-tile-title-container .dashboard-tile-title {
2361
- color: var(--react-autoql-accent-color, #26a7df); }
2516
+ .react-autoql-modal-body {
2517
+ display: flex;
2518
+ flex-direction: column;
2519
+ padding: 25px;
2520
+ flex: 1;
2521
+ overflow: hidden; }
2522
+ .react-autoql-modal-body h3 {
2523
+ color: var(--react-autoql-text-color-primary); }
2362
2524
 
2363
- .dashboard-tile-title-container .dashboard-tile-title {
2364
- font-weight: bold;
2365
- font-size: 14px; }
2525
+ .react-autoql-modal-close-btn {
2526
+ position: absolute !important;
2527
+ top: 10px;
2528
+ right: 18px;
2529
+ font-size: 22px;
2530
+ opacity: 0.6 !important;
2531
+ cursor: pointer; }
2366
2532
 
2367
- .dashboard-tile-edit-wrapper {
2368
- display: flex;
2369
- width: 100%;
2370
- height: 55px;
2371
- padding: 20px 20px 0 25px;
2372
- flex-shrink: 0;
2373
- flex-grow: 0; }
2533
+ .react-autoql-modal-close-btn:hover {
2534
+ opacity: 1 !important; }
2374
2535
 
2375
- .dashboard-tile-play-button {
2376
- cursor: default;
2377
- flex-grow: 0;
2378
- flex-shrink: 0; }
2536
+ .react-autoql-radio-btn-container.react-autoql-radio-btn-container-list {
2537
+ display: inline-block; }
2379
2538
 
2380
- .dashboard-tile-play-button span.react-autoql-icon svg {
2539
+ .react-autoql-radio-btn-container.react-autoql-radio-btn-container-buttons {
2540
+ display: inline-flex;
2541
+ justify-content: stretch;
2542
+ align-items: stretch;
2543
+ border-radius: 4px; }
2544
+ .react-autoql-radio-btn-container.react-autoql-radio-btn-container-buttons .react-autoql-radio-btn {
2545
+ display: inline-flex;
2546
+ justify-content: center;
2547
+ align-items: center; }
2548
+
2549
+ .react-autoql-radio-btn-container [type='radio']:checked,
2550
+ .react-autoql-radio-btn-container [type='radio']:not(:checked) {
2551
+ position: absolute;
2552
+ left: -9999px; }
2553
+
2554
+ .react-autoql-radio-btn-container [type='radio']:checked + label,
2555
+ .react-autoql-radio-btn-container [type='radio']:not(:checked) + label {
2556
+ position: relative;
2557
+ padding-left: 28px;
2381
2558
  cursor: pointer;
2382
- width: 25px;
2383
- height: 33px;
2384
- margin-left: 10px;
2385
- color: var(--react-autoql-accent-color); }
2559
+ line-height: 20px;
2560
+ display: inline-block; }
2386
2561
 
2387
- .dashboard-tile-play-button.disabled svg {
2388
- opacity: 0.5;
2389
- cursor: not-allowed; }
2562
+ .react-autoql-radio-btn-container [type='radio']:checked + label:before,
2563
+ .react-autoql-radio-btn-container [type='radio']:not(:checked) + label:before {
2564
+ content: '';
2565
+ position: absolute;
2566
+ left: 1px;
2567
+ top: 1px;
2568
+ width: 18px;
2569
+ height: 18px;
2570
+ border: 1px solid #ddd;
2571
+ border-radius: 100%;
2572
+ background: #fff; }
2390
2573
 
2391
- .dashboard-tile-play-button:not(.disabled) svg:hover {
2392
- opacity: 0.8; }
2574
+ .react-autoql-radio-btn-container [type='radio']:checked + label:after,
2575
+ .react-autoql-radio-btn-container [type='radio']:not(:checked) + label:after {
2576
+ content: '';
2577
+ width: 12px;
2578
+ height: 12px;
2579
+ background: var(--react-autoql-accent-color, #26a7df);
2580
+ position: absolute;
2581
+ top: 4px;
2582
+ left: 4px;
2583
+ border-radius: 100%;
2584
+ transition: all 0.2s ease; }
2393
2585
 
2394
- .dashboard-tile-delete-button {
2586
+ .react-autoql-radio-btn-container [type='radio']:not(:checked) + label:after {
2395
2587
  opacity: 0;
2396
- font-size: 17px;
2397
- color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.4));
2398
- position: absolute;
2399
- top: 0px;
2400
- right: 2px;
2401
- cursor: pointer;
2402
- transition: opacity 0.3s ease;
2403
- z-index: 1; }
2588
+ transform: scale(0); }
2404
2589
 
2405
- .react-grid-item:hover .dashboard-tile-delete-button {
2406
- opacity: 1; }
2590
+ .react-autoql-radio-btn-container [type='radio']:checked + label:after {
2591
+ opacity: 1;
2592
+ transform: scale(1); }
2407
2593
 
2408
- .dashboard-tile-loading-container {
2409
- display: flex;
2410
- height: 100%;
2411
- width: 100%;
2412
- padding: 20px;
2413
- align-items: center;
2414
- justify-content: center; }
2594
+ .react-autoql-radio-btn-container .react-autoql-radio-btn {
2595
+ position: relative;
2596
+ display: inline-block;
2597
+ padding: 3px 12px;
2598
+ border: 1px solid var(--react-autoql-border-color, #dcdcdc);
2599
+ margin-left: -1px;
2600
+ transition: all 0.2s ease;
2601
+ cursor: pointer; }
2602
+ .react-autoql-radio-btn-container .react-autoql-radio-btn:not(:first-child) {
2603
+ border-left: 1px solid transparent; }
2604
+ .react-autoql-radio-btn-container .react-autoql-radio-btn.active {
2605
+ background-color: var(--react-autoql-accent-color, #26a7df);
2606
+ border-color: var(--react-autoql-accent-color, #26a7df);
2607
+ color: #fff; }
2608
+ .react-autoql-radio-btn-container .react-autoql-radio-btn.active.outlined {
2609
+ background-color: inherit;
2610
+ color: var(--react-autoql-accent-color, #26a7df); }
2611
+ .react-autoql-radio-btn-container .react-autoql-radio-btn:hover:not(.active) {
2612
+ border-color: var(--react-autoql-accent-color, #26a7df);
2613
+ color: var(--react-autoql-accent-color, #26a7df); }
2614
+ .react-autoql-radio-btn-container .react-autoql-radio-btn:first-child {
2615
+ border-top-left-radius: 4px;
2616
+ border-bottom-left-radius: 4px;
2617
+ margin-left: 0; }
2618
+ .react-autoql-radio-btn-container .react-autoql-radio-btn:last-child {
2619
+ border-top-right-radius: 4px;
2620
+ border-bottom-right-radius: 4px; }
2415
2621
 
2416
- .dashboard-tile-title-divider {
2417
- height: 2px;
2418
- background: currentColor;
2419
- width: 75px;
2420
- margin-top: 4px;
2421
- opacity: 0.07; }
2622
+ .autoql-options-toolbar {
2623
+ position: absolute;
2624
+ background: inherit;
2625
+ padding: 5px;
2626
+ border-radius: 6px;
2627
+ line-height: 28px;
2628
+ background: var(--react-autoql-background-color-primary);
2629
+ border: 1px solid var(--react-autoql-border-color); }
2630
+ .autoql-options-toolbar.vertical .react-autoql-toolbar-btn {
2631
+ display: block; }
2632
+ .autoql-options-toolbar .react-autoql-toolbar-btn {
2633
+ color: var(--react-autoql-text-color-primary); }
2422
2634
 
2423
- /* Input box styling for edit mode */
2424
- .dashboard-tile-input-container {
2425
- display: flex;
2426
- width: 100%;
2427
- height: 100%;
2428
- font-size: 15px; }
2429
- .dashboard-tile-input-container .dashboard-tile-input,
2430
- .dashboard-tile-input-container .dashboard-tile-autocomplete-input {
2431
- width: 100%;
2635
+ .copy-sql-modal-content {
2636
+ position: relative;
2637
+ height: 60vh; }
2638
+ .copy-sql-modal-content .copy-sql-formatted-text {
2432
2639
  height: 100%;
2433
- padding: 12px;
2434
- padding-left: 33px;
2435
- border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
2436
- outline: none !important;
2437
- color: var(--react-autoql-text-color-primary, #356f90);
2438
- background: var(--react-autoql-background-color-primary, #fff); }
2640
+ width: 100%;
2641
+ padding: 10px;
2642
+ resize: none;
2643
+ background: var(--react-autoql-background-color-secondary); }
2644
+ .copy-sql-modal-content .copy-sql-btn {
2645
+ color: var(--react-autoql-text-color);
2646
+ background-color: var(--react-autoql-background-color-primary);
2647
+ position: absolute;
2648
+ top: 3px;
2649
+ right: 0;
2650
+ opacity: 0;
2651
+ transition: opacity 0.3s ease; }
2652
+ .copy-sql-modal-content .sql-copied {
2653
+ color: var(--react-autoql-success-color) !important; }
2654
+ .copy-sql-modal-content:hover .copy-sql-btn {
2655
+ opacity: 1; }
2439
2656
 
2440
- .query-focused .dashboard-tile-left-input-container,
2441
- .title-focused .dashboard-tile-right-input-container {
2442
- width: 70%; }
2657
+ .content {
2658
+ margin: 2rem; }
2443
2659
 
2444
- .dashboard-tile-right-input-container {
2445
- z-index: 2; }
2660
+ .react-autoql-checkbox-container {
2661
+ display: inline-block;
2662
+ vertical-align: middle; }
2446
2663
 
2447
- .dashboard-tile-right-input-container,
2448
- .dashboard-tile-left-input-container {
2664
+ .react-autoql-checkbox {
2665
+ display: flex;
2666
+ align-items: center;
2449
2667
  position: relative;
2450
- width: 0;
2451
- flex-grow: 1;
2452
- transition: width 0.3s ease; }
2453
- .dashboard-tile-right-input-container .query-input-icon,
2454
- .dashboard-tile-right-input-container .title-input-icon,
2455
- .dashboard-tile-left-input-container .query-input-icon,
2456
- .dashboard-tile-left-input-container .title-input-icon {
2457
- color: var(--react-autoql-accent-color);
2458
- position: absolute;
2459
- pointer-events: none;
2460
- z-index: 1; }
2461
- .dashboard-tile-right-input-container .query-input-icon,
2462
- .dashboard-tile-left-input-container .query-input-icon {
2463
- font-size: 18px;
2464
- top: 4px;
2465
- left: 10px; }
2466
- .dashboard-tile-right-input-container .title-input-icon,
2467
- .dashboard-tile-left-input-container .title-input-icon {
2468
- font-size: 16px;
2469
- top: 7px;
2470
- left: 11px; }
2668
+ cursor: pointer; }
2669
+ .react-autoql-checkbox .react-autoql-checkbox--switch__input:checked,
2670
+ .react-autoql-checkbox .react-autoql-checkbox__input:checked {
2671
+ border-color: var(--react-autoql-accent-color, #26a7df);
2672
+ background: var(--react-autoql-accent-color, #26a7df); }
2673
+
2674
+ .react-autoql-checkbox__label {
2675
+ flex-shrink: 0;
2676
+ padding: 0.5rem 1rem;
2677
+ color: #fff;
2678
+ cursor: pointer; }
2679
+
2680
+ .react-autoql-checkbox__input {
2681
+ position: relative;
2682
+ flex-shrink: 0;
2683
+ width: 20px;
2684
+ height: 20px;
2685
+ appearance: none;
2686
+ -webkit-appearance: none;
2687
+ -moz-appearance: none;
2688
+ outline: none;
2689
+ background: transparent;
2690
+ border: 1px solid;
2691
+ border-color: var(--react-autoql-accent-color, #26a7df);
2692
+ border-radius: 2px;
2693
+ cursor: pointer; }
2694
+
2695
+ .react-autoql-checkbox__input::before {
2696
+ content: ' ';
2697
+ position: absolute;
2698
+ top: 50%;
2699
+ right: 50%;
2700
+ bottom: 50%;
2701
+ left: 50%;
2702
+ transition: all 0.2s;
2703
+ background: var(--react-autoql-accent-color, #26a7df); }
2471
2704
 
2472
- .dashboard-tile-input.second.query {
2473
- transition: all 0.3s ease;
2474
- border: 1px solid transparent;
2475
- outline: none !important;
2476
- color: var(--react-autoql-text-color-primary, #356f90);
2477
- background: var(--react-autoql-background-color-primary);
2478
- margin: 0px;
2479
- padding: 0px;
2480
- width: 0px;
2481
- height: 28px;
2705
+ .react-autoql-checkbox-tick {
2706
+ position: absolute;
2707
+ color: white;
2708
+ left: 3px;
2709
+ line-height: 20px;
2482
2710
  pointer-events: none; }
2483
- .dashboard-tile-input.second.query.open {
2484
- width: 200px;
2485
- padding: 12px;
2486
- margin-left: 5px;
2487
- border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
2488
- pointer-events: unset; }
2489
2711
 
2490
- .dashboard-tile-input:hover,
2491
- .dashboard-tile-input:focus,
2492
- .dashboard-tile-input-container .dashboard-tile-autocomplete-input:hover,
2493
- .dashboard-tile-input-container .dashboard-tile-autocomplete-input:focus {
2494
- border: 1px solid #26a7e9 !important;
2495
- border-color: var(--react-autoql-accent-color) !important; }
2712
+ .react-autoql-checkbox--switch__input::before {
2713
+ box-shadow: 0 0 2px 1px #00000030; }
2496
2714
 
2497
- .dashboard-tile-input-container .dashboard-tile-input.query,
2498
- .dashboard-tile-input-container .dashboard-tile-autocomplete-input {
2499
- padding-left: 36px;
2500
- border-top-left-radius: 4px;
2501
- border-bottom-left-radius: 4px; }
2715
+ .react-autoql-checkbox__input:checked::before,
2716
+ .react-autoql-checkbox__input:indeterminate::before {
2717
+ top: 0;
2718
+ right: 0;
2719
+ bottom: 0;
2720
+ left: 0; }
2502
2721
 
2503
- .dashboard-tile-input-container .dashboard-tile-input.title {
2504
- border-left: none;
2505
- border-top-right-radius: 4px;
2506
- border-bottom-right-radius: 4px;
2507
- z-index: 2; }
2722
+ .react-autoql-checkbox__input:indeterminate::before {
2723
+ top: 7px;
2724
+ bottom: 7px; }
2508
2725
 
2509
- .dashboard-tile-input-container .dashboard-tile-input.title:hover,
2510
- .dashboard-tile-input-container .dashboard-tile-input.title:focus,
2511
- .title-focused .dashboard-tile-right-input-container .dashboard-tile-input,
2512
- .dashboard-tile-right-input-container:hover .dashboard-tile-input {
2513
- /* This is done to balance it because we add a 1px left border when the input is focused or hovered */
2514
- margin-left: -2px; }
2726
+ .react-autoql-checkbox__input:disabled {
2727
+ border-color: #5a5358;
2728
+ cursor: default; }
2515
2729
 
2516
- /* Autocomplete styles */
2517
- .dashboard-tile-input-container .react-autosuggest__container {
2518
- position: relative;
2519
- width: 100%;
2520
- height: 100%;
2521
- padding: 0;
2522
- margin: 0; }
2730
+ .react-autoql-checkbox__input:disabled::before {
2731
+ background-color: #5a5358; }
2523
2732
 
2524
- .dashboard-tile-input-container
2525
- .react-autosuggest__suggestions-container--open {
2526
- background-color: var(--react-autoql-background-color-primary);
2527
- border: 1px solid var(--react-autoql-border-color);
2528
- color: var(--react-autoql-text-color-primary); }
2733
+ .react-autoql-checkbox__input:disabled + .react-autoql-checkbox__label {
2734
+ color: gray;
2735
+ cursor: default; }
2529
2736
 
2530
- .dashboard-tile-input-container .react-autosuggest__suggestion {
2531
- color: var(--react-autoql-text-color-primary); }
2737
+ .react-autoql-checkbox--has-error__input {
2738
+ border-color: red;
2739
+ background-color: rgba(255, 0, 0, 0.2); }
2532
2740
 
2533
- .dashboard-tile-input-container input::-moz-placeholder {
2534
- opacity: 0.5; }
2741
+ .react-autoql-checkbox--has-error__input::before {
2742
+ background-color: red; }
2535
2743
 
2536
- .dashboard-tile-input-container input:-ms-input-placeholder {
2537
- opacity: 0.5; }
2744
+ .react-autoql-checkbox--switch__label::after {
2745
+ content: 'off';
2746
+ margin-left: 0.25rem; }
2538
2747
 
2539
- .dashboard-tile-input-container input::placeholder {
2540
- opacity: 0.5; }
2748
+ .react-autoql-checkbox--switch__input {
2749
+ width: 36px;
2750
+ height: 20px;
2751
+ border-radius: 16px;
2752
+ background: var(--react-autoql-background-color-tertiary);
2753
+ border: 1px solid var(--react-autoql-background-color-tertiary); }
2541
2754
 
2542
- .react-autoql-dashboard .edit-mode-placeholder-icon {
2543
- display: inline-block;
2544
- line-height: 22px;
2545
- vertical-align: middle;
2546
- height: 23px; }
2755
+ .react-autoql-checkbox--switch__input::before {
2756
+ top: 2px;
2757
+ right: 18px;
2758
+ bottom: 2px;
2759
+ left: 2px;
2760
+ border-radius: 50%;
2761
+ background: #fff; }
2547
2762
 
2548
- .dashboard-tile-input-container
2549
- .react-autosuggest__suggestions-container--open {
2550
- position: absolute;
2551
- bottom: unset;
2552
- padding-top: 5px;
2553
- padding-bottom: 5px;
2554
- display: block;
2555
- height: unset;
2556
- border-radius: 24px;
2557
- font-family: inherit;
2558
- font-size: 15px;
2559
- font-weight: normal;
2560
- z-index: 2;
2561
- overflow: hidden;
2562
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
2563
- text-align: left;
2564
- width: 100%;
2565
- top: 35px;
2566
- border-radius: 4px;
2567
- margin: 0; }
2763
+ .react-autoql-checkbox--switch__input:checked
2764
+ + .react-autoql-checkbox--switch__label::after {
2765
+ content: 'on'; }
2568
2766
 
2569
- .dashboard-tile-input-container .react-autosuggest__suggestions-list {
2570
- margin: 0;
2571
- padding: 0;
2572
- list-style-type: none; }
2767
+ .react-autoql-checkbox--switch__input:checked::before {
2768
+ right: 2px;
2769
+ left: 18px;
2770
+ top: 2px;
2771
+ bottom: 2px; }
2573
2772
 
2574
- .dashboard-tile-input-container .react-autosuggest__suggestion {
2575
- cursor: pointer;
2576
- padding: 2px;
2577
- padding-left: 18px;
2578
- letter-spacing: 0.05em;
2579
- line-height: 22.5px; }
2773
+ .react-autoql-checkbox-label {
2774
+ padding-left: 6px;
2775
+ line-height: 100%; }
2580
2776
 
2581
- .dashboard-tile-input-container .react-autosuggest__suggestion--highlighted {
2582
- background-color: rgba(0, 0, 0, 0.1) !important; }
2777
+ .react-autoql-modal-container
2778
+ .react-autoql-checkbox__input:not(.react-autoql-checkbox--switch__input),
2779
+ .react-autoql-drawer
2780
+ .react-autoql-checkbox__input:not(.react-autoql-checkbox--switch__input) {
2781
+ border-color: var(--react-autoql-accent-color); }
2583
2782
 
2584
- .dashboard-tile-input-container .react-autosuggest__section-title {
2585
- padding: 10px 0 0 10px;
2586
- font-size: 12px;
2587
- color: #777; }
2783
+ .react-autoql-modal-container
2784
+ .react-autoql-checkbox__input::before:not(.react-autoql-checkbox--switch__input),
2785
+ .react-autoql-drawer
2786
+ .react-autoql-checkbox__input::before:not(.react-autoql-checkbox--switch__input) {
2787
+ background: var(--react-autoql-accent-color); }
2588
2788
 
2589
- /* Dragging placeholder styles */
2590
- .react-autoql-db-dragging-placeholder-container {
2591
- height: 100%;
2592
- width: 100%;
2593
- padding: 20px 30px;
2594
- display: flex;
2595
- flex-direction: column; }
2789
+ .chat-single-message-container {
2790
+ transition: background-color 0.2s ease;
2791
+ padding-top: 6px;
2792
+ max-height: 85%; }
2793
+ .chat-single-message-container:first-of-type {
2794
+ margin-top: 10px; }
2795
+ .chat-single-message-container .query-more-btn {
2796
+ transition: all 0.3s ease;
2797
+ font-size: 22px;
2798
+ padding: 13px;
2799
+ margin-bottom: 6px;
2800
+ height: 42px;
2801
+ opacity: 0;
2802
+ visibility: hidden;
2803
+ cursor: pointer; }
2804
+ .chat-single-message-container .query-more-btn:hover {
2805
+ opacity: 1; }
2806
+ .chat-single-message-container .spinner-loader:after {
2807
+ border: 1px solid var(--react-autoql-accent-color);
2808
+ border-color: var(--react-autoql-accent-color) transparent var(--react-autoql-accent-color) transparent; }
2596
2809
 
2597
- .react-autoql-db-dragging-placeholder-title {
2598
- width: 100%;
2599
- height: 35px;
2600
- background: #f3f3f3;
2601
- border-top-right-radius: 4px;
2602
- border-top-left-radius: 4px;
2603
- flex-shrink: 0;
2604
- flex-grow: 0; }
2810
+ .chat-condition-item-container {
2811
+ position: absolute;
2812
+ background: inherit;
2813
+ bottom: 0px;
2814
+ padding: 5px;
2815
+ border-radius: 6px; }
2605
2816
 
2606
- .react-autoql-db-dragging-placeholder-content {
2607
- width: 100%;
2608
- height: 100%;
2609
- background: #f9f9f9;
2610
- border-bottom-right-radius: 4px;
2611
- border-bottom-left-radius: 4px; }
2817
+ .chat-condition-item {
2818
+ background: none !important;
2819
+ border: none;
2820
+ margin-top: -20px !important;
2821
+ padding: 0 !important;
2822
+ font-family: var(--react-autoql-font-family);
2823
+ color: var(--react-autoql-accent-color);
2824
+ text-decoration: underline;
2825
+ cursor: pointer; }
2612
2826
 
2613
- .dashboard-tile-placeholder-text {
2614
- font-size: 15px;
2615
- color: var(--react-autoql-text-color-placeholder, rgba(0, 0, 0, 0.3)); }
2616
- .dashboard-tile-placeholder-text .play-icon {
2617
- vertical-align: bottom;
2618
- line-height: 20px; }
2827
+ .chat-single-message-container.response {
2828
+ display: flex;
2829
+ justify-content: flex-start;
2830
+ padding-left: 20px;
2831
+ -webkit-animation: scale-up-bl 0.5s ease;
2832
+ animation: scale-up-bl 0.5s ease; }
2619
2833
 
2620
- /* React Grid Layout overrides */
2621
- .react-grid-item .react-resizable-handle {
2622
- z-index: 1;
2623
- position: absolute;
2624
- width: 11px;
2625
- height: 11px;
2626
- bottom: 4px;
2627
- right: 4px;
2628
- opacity: 0;
2629
- border-right: 1px solid var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.4)) !important;
2630
- border-bottom: 1px solid var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.4)) !important;
2631
- transition: opacity 0.3s ease; }
2834
+ .chat-single-message-container.request {
2835
+ display: flex;
2836
+ justify-content: flex-end;
2837
+ padding-right: 20px;
2838
+ -webkit-animation: scale-up-br 0.5s ease;
2839
+ animation: scale-up-br 0.5s ease; }
2632
2840
 
2633
- .react-autoql-dashboard-tile.editing:hover .react-resizable-handle {
2634
- opacity: 1; }
2841
+ .chat-single-message-container .chat-message-bubble {
2842
+ position: relative;
2843
+ padding: 13px;
2844
+ border-radius: 10px;
2845
+ max-width: calc(100% - 20px);
2846
+ word-wrap: break-word;
2847
+ font-family: inherit;
2848
+ font-size: 14px;
2849
+ letter-spacing: 0.04em;
2850
+ box-sizing: border-box;
2851
+ /* make small margin on bottom because sometimes react
2852
+ custom scrollbar cuts off a pixel or 2 at the bottom */
2853
+ margin-bottom: 6px; }
2635
2854
 
2636
- .react-grid-placeholder {
2637
- background: rgba(0, 0, 0, 0.13) !important; }
2855
+ .chat-single-message-container .chat-message-bubble.text {
2856
+ max-width: 85%; }
2638
2857
 
2639
- /* This fixes the flickering bug in RGL when resizing elements */
2640
- .react-draggable-transparent-selection span::-moz-selection, .react-draggable-transparent-selection div::-moz-selection, .react-draggable-transparent-selection a::-moz-selection, .react-draggable-transparent-selection input::-moz-selection, .react-draggable-transparent-selection text::-moz-selection {
2641
- color: inherit; }
2642
- .react-draggable-transparent-selection input::-moz-placeholder {
2643
- color: inherit; }
2644
- .react-draggable-transparent-selection input:-ms-input-placeholder {
2645
- color: inherit; }
2646
- .react-draggable-transparent-selection span::selection,
2647
- .react-draggable-transparent-selection div::selection,
2648
- .react-draggable-transparent-selection a::selection,
2649
- .react-draggable-transparent-selection input::selection,
2650
- .react-draggable-transparent-selection text::selection,
2651
- .react-draggable-transparent-selection input::placeholder {
2652
- color: inherit; }
2858
+ .chat-single-message-container .chat-message-bubble.full-width {
2859
+ width: calc(100% - 20px) !important;
2860
+ min-width: calc(100% - 20px) !important;
2861
+ max-width: calc(100% - 20px) !important; }
2653
2862
 
2654
- .dashboard-tile-response-container .layout-pane-primary {
2655
- overflow: hidden; }
2863
+ .chat-single-message-container.response .chat-message-bubble.active {
2864
+ border: 1px solid #c3c3c3; }
2656
2865
 
2657
- .splitter-layout,
2658
- .layout-pane,
2659
- .dashboard-tile-split-pane-container,
2660
- .react-autoql-dashboard-drilldown-original {
2661
- display: flex;
2662
- align-items: stretch;
2663
- justify-content: center;
2664
- width: 100%; }
2866
+ .chat-single-message-container.response .chat-message-bubble {
2867
+ background: var(--react-autoql-background-color-primary);
2868
+ color: var(--react-autoql-text-color-primary);
2869
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13); }
2665
2870
 
2666
- .dashboard-tile-response-container .splitter-layout,
2667
- .dashboard-tile-response-container .layout-pane,
2668
- .dashboard-tile-response-container .dashboard-tile-split-pane-container {
2669
- background: inherit; }
2871
+ .chat-single-message-container.response .chat-message-bubble:not(.text) {
2872
+ min-width: 125px;
2873
+ padding-bottom: 15px; }
2670
2874
 
2671
- .react-autoql-btn {
2672
- border-radius: 4px;
2673
- cursor: pointer;
2674
- outline: none !important;
2675
- transition: all 0.2s ease;
2676
- width: auto;
2677
- display: inline-block; }
2875
+ .chat-single-message-container.request .chat-message-bubble {
2876
+ background: var(--react-autoql-accent-color);
2877
+ color: var(--react-autoql-accent-text-color);
2878
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13); }
2678
2879
 
2679
- .react-autoql-btn.disabled {
2680
- opacity: 0.4;
2681
- cursor: not-allowed;
2682
- pointer-events: none; }
2880
+ .chat-message-toolbar,
2881
+ .chat-message-toolbar.autoql-options-toolbar {
2882
+ display: none;
2883
+ position: absolute;
2884
+ background: inherit;
2885
+ top: -31px;
2886
+ padding: 5px;
2887
+ border-radius: 6px;
2888
+ line-height: 28px;
2889
+ background: var(--react-autoql-background-color-primary);
2890
+ border: 1px solid var(--react-autoql-border-color);
2891
+ color: var(--react-autoql-text-color-primary); }
2683
2892
 
2684
- .react-autoql-btn.small {
2685
- padding: 2px 8px;
2686
- margin: 2px 3px; }
2893
+ .chat-message-toolbar.right {
2894
+ right: -9px; }
2687
2895
 
2688
- .react-autoql-btn.large {
2689
- padding: 5px 16px;
2690
- margin: 2px 5px; }
2896
+ .chat-message-toolbar.left {
2897
+ left: -9px; }
2691
2898
 
2692
- .react-autoql-btn.default {
2693
- color: inherit;
2694
- border: 1px solid var(--react-autoql-border-color);
2695
- background: inherit; }
2696
- .react-autoql-btn.default:hover {
2697
- border-color: var(--react-autoql-accent-color);
2698
- color: var(--react-autoql-accent-color); }
2899
+ .chat-message-bubble:hover .chat-message-toolbar,
2900
+ .chat-message-bubble .chat-message-toolbar.active {
2901
+ display: block; }
2699
2902
 
2700
- .react-autoql-btn.primary {
2701
- background: var(--react-autoql-accent-color);
2702
- border: 1px solid var(--react-autoql-accent-color);
2703
- color: var(--react-autoql-accent-text-color); }
2704
- .react-autoql-btn.primary:hover {
2705
- opacity: 0.8; }
2903
+ .report-problem-text-area {
2904
+ border-radius: 4px;
2905
+ border: 1px solid rgba(0, 0, 0, 0.15);
2906
+ margin-top: 10px;
2907
+ padding: 5px 10px;
2908
+ outline: none !important; }
2706
2909
 
2707
- .react-autoql-btn.danger {
2708
- color: var(--react-autoql-danger-color, #ca0b00);
2709
- border: 1px solid var(--react-autoql-danger-color, #ca0b00);
2710
- background: inherit; }
2711
- .react-autoql-btn.danger:hover {
2712
- background-color: var(--react-autoql-danger-color, #ca0b00);
2713
- color: #fff; }
2910
+ .condition-info-icon-left-align {
2911
+ color: var(--react-autoql-accent-color) !important;
2912
+ position: absolute !important;
2913
+ bottom: 2px;
2914
+ right: 10px;
2915
+ font-size: 20px; }
2714
2916
 
2715
- .ReactModal__Overlay {
2716
- background-color: transparent !important;
2717
- transition: background-color 0.2s ease-in-out;
2718
- z-index: 9999; }
2917
+ .condition-info-icon {
2918
+ color: var(--react-autoql-accent-color) !important;
2919
+ position: absolute !important;
2920
+ bottom: 2px;
2921
+ right: 4px;
2922
+ font-size: 20px; }
2719
2923
 
2720
- .ReactModal__Overlay--after-open {
2721
- background-color: rgba(0, 0, 0, 0.25) !important; }
2924
+ .more-options-menu,
2925
+ .report-problem-menu {
2926
+ background: var(--react-autoql-background-color-primary);
2927
+ padding: 10px 0; }
2928
+ .more-options-menu span.react-autoql-icon svg,
2929
+ .report-problem-menu span.react-autoql-icon svg {
2930
+ margin-right: 3px; }
2722
2931
 
2723
- .ReactModal__Overlay--before-close {
2724
- background-color: transparent !important; }
2932
+ .interpretation-icon {
2933
+ vertical-align: top;
2934
+ height: 26px;
2935
+ margin: 0 3px;
2936
+ font-size: 18px; }
2725
2937
 
2726
- .ReactModal__Content {
2727
- display: flex;
2728
- flex-direction: column;
2729
- transform: scale(0);
2730
- transition: all 0.2s ease-in-out;
2731
- color: var(--react-autoql-text-color-primary);
2732
- border: 1px solid var(--react-autoql-border-color) !important;
2733
- background: var(--react-autoql-background-color-primary) !important;
2734
- box-shadow: 0 0 14px 1px rgba(0, 0, 0, 0.15);
2735
- padding: 0 !important;
2736
- margin: auto auto;
2737
- max-width: 90vw;
2738
- max-height: calc(100vh - 90px); }
2739
- .ReactModal__Content input.react-autoql-input,
2740
- .ReactModal__Content textarea.react-autoql-input,
2741
- .ReactModal__Content textarea {
2742
- border-color: var(--react-autoql-border-color);
2743
- color: var(--react-autoql-text-color-primary);
2744
- background: var(--react-autoql-background-color-primary, white); }
2745
- .ReactModal__Content input.react-autoql-input::-moz-placeholder, .ReactModal__Content textarea.react-autoql-input::-moz-placeholder, .ReactModal__Content textarea::-moz-placeholder {
2746
- color: var(--react-autoql-text-color-placeholder); }
2747
- .ReactModal__Content input.react-autoql-input:-ms-input-placeholder, .ReactModal__Content textarea.react-autoql-input:-ms-input-placeholder, .ReactModal__Content textarea:-ms-input-placeholder {
2748
- color: var(--react-autoql-text-color-placeholder); }
2749
- .ReactModal__Content input.react-autoql-input::placeholder,
2750
- .ReactModal__Content textarea.react-autoql-input::placeholder,
2751
- .ReactModal__Content textarea::placeholder {
2752
- color: var(--react-autoql-text-color-placeholder); }
2938
+ /* Chart icon styles */
2939
+ .chart-icon-svg-0,
2940
+ .react-autoql-icon-svg-0 {
2941
+ fill: currentColor; }
2753
2942
 
2754
- .ReactModal__Overlay--after-open .ReactModal__Content {
2755
- transform: scale(1); }
2943
+ .hm0 {
2944
+ opacity: 0.5;
2945
+ fill: currentColor;
2946
+ enable-background: new; }
2756
2947
 
2757
- .ReactModal__Overlay--before-close .ReactModal__Content {
2758
- transform: scale(0); }
2948
+ .hm1 {
2949
+ fill: currentColor; }
2759
2950
 
2760
- .react-autoql-modal-header {
2761
- position: relative;
2762
- text-align: center;
2763
- flex: 0 0 52px;
2764
- border-bottom: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05));
2765
- padding: 14px 60px;
2766
- font-size: 16px; }
2951
+ .hm2 {
2952
+ opacity: 0.15;
2953
+ fill: currentColor;
2954
+ enable-background: new; }
2767
2955
 
2768
- .react-autoql-modal-footer {
2769
- position: relative;
2770
- flex: 0 0 52px;
2771
- border-top: 1px solid rgba(0, 0, 0, 0.05);
2772
- text-align: right;
2773
- padding: 8px 10px; }
2956
+ .hm3 {
2957
+ opacity: 0.6;
2958
+ fill: currentColor;
2959
+ enable-background: new; }
2774
2960
 
2775
- .react-autoql-modal-body {
2776
- display: flex;
2777
- flex-direction: column;
2778
- padding: 25px;
2779
- flex: 1;
2780
- overflow: hidden; }
2781
- .react-autoql-modal-body h3 {
2782
- color: var(--react-autoql-text-color-primary); }
2961
+ .hm4 {
2962
+ opacity: 0.65;
2963
+ fill: currentColor;
2964
+ enable-background: new; }
2783
2965
 
2784
- .react-autoql-modal-close-btn {
2785
- position: absolute !important;
2786
- top: 10px;
2787
- right: 18px;
2788
- font-size: 22px;
2789
- opacity: 0.6 !important;
2790
- cursor: pointer; }
2966
+ .hm5 {
2967
+ fill: currentColor; }
2791
2968
 
2792
- .react-autoql-modal-close-btn:hover {
2793
- opacity: 1 !important; }
2969
+ .hm6 {
2970
+ fill: currentColor; }
2794
2971
 
2972
+ /* animations */
2973
+ @-webkit-keyframes scale-up-br {
2974
+ 0% {
2975
+ transform: scale(0.5);
2976
+ transform-origin: 100% 100%; }
2977
+ 100% {
2978
+ transform: scale(1);
2979
+ transform-origin: 100% 100%; } }
2980
+ @keyframes scale-up-br {
2981
+ 0% {
2982
+ transform: scale(0.5);
2983
+ transform-origin: 100% 100%; }
2984
+ 100% {
2985
+ transform: scale(1);
2986
+ transform-origin: 100% 100%; } }
2795
2987
 
2796
- .autoql-options-toolbar {
2797
- position: absolute;
2798
- background: inherit;
2799
- padding: 5px;
2800
- border-radius: 6px;
2801
- line-height: 28px;
2802
- background: var(--react-autoql-background-color-primary);
2803
- border: 1px solid var(--react-autoql-border-color); }
2804
- .autoql-options-toolbar.vertical .react-autoql-toolbar-btn {
2805
- display: block; }
2806
- .autoql-options-toolbar .react-autoql-toolbar-btn {
2807
- color: var(--react-autoql-text-color-primary); }
2988
+ @-webkit-keyframes scale-up-bl {
2989
+ 0% {
2990
+ transform: scale(0.5);
2991
+ transform-origin: 0% 100%; }
2992
+ 100% {
2993
+ transform: scale(1);
2994
+ transform-origin: 0% 100%; } }
2808
2995
 
2809
- .copy-sql-modal-content {
2810
- position: relative;
2811
- height: 60vh; }
2812
- .copy-sql-modal-content .copy-sql-formatted-text {
2813
- height: 100%;
2814
- width: 100%;
2815
- padding: 10px;
2816
- resize: none;
2817
- background: var(--react-autoql-background-color-secondary); }
2818
- .copy-sql-modal-content .copy-sql-btn {
2819
- color: var(--react-autoql-text-color);
2820
- background-color: var(--react-autoql-background-color-primary);
2821
- position: absolute;
2822
- top: 3px;
2823
- right: 0;
2824
- opacity: 0;
2825
- transition: opacity 0.3s ease; }
2826
- .copy-sql-modal-content .sql-copied {
2827
- color: var(--react-autoql-success-color) !important; }
2828
- .copy-sql-modal-content:hover .copy-sql-btn {
2829
- opacity: 1; }
2996
+ @keyframes scale-up-bl {
2997
+ 0% {
2998
+ transform: scale(0.5);
2999
+ transform-origin: 0% 100%; }
3000
+ 100% {
3001
+ transform: scale(1);
3002
+ transform-origin: 0% 100%; } }
2830
3003
 
2831
3004
  .react-autoql-cascader {
2832
3005
  position: relative;
@@ -3024,258 +3197,38 @@ tbody::-webkit-scrollbar-thumb {
3024
3197
  -webkit-animation-delay: 0.8s;
3025
3198
  animation-delay: 0.8s; }
3026
3199
 
3027
- .animated-item:nth-child(11) {
3028
- -webkit-animation-delay: 0.88s;
3029
- animation-delay: 0.88s; }
3030
-
3031
- .animated-item:nth-child(12) {
3032
- -webkit-animation-delay: 0.96s;
3033
- animation-delay: 0.96s; }
3034
-
3035
- .animated-item:nth-child(13) {
3036
- -webkit-animation-delay: 1.04s;
3037
- animation-delay: 1.04s; }
3038
-
3039
- .animated-item:nth-child(14) {
3040
- -webkit-animation-delay: 1.12s;
3041
- animation-delay: 1.12s; }
3042
-
3043
- .animated-item:nth-child(15) {
3044
- -webkit-animation-delay: 1.2s;
3045
- animation-delay: 1.2s; }
3046
-
3047
- @-webkit-keyframes fadeIn {
3048
- 0% {
3049
- opacity: 0;
3050
- top: 100px; }
3051
- 75% {
3052
- opacity: 0.5;
3053
- top: 0px; }
3054
- 100% {
3055
- opacity: 1; } }
3056
-
3057
- .chat-single-message-container {
3058
- transition: background-color 0.2s ease;
3059
- padding-top: 6px;
3060
- max-height: 85%; }
3061
- .chat-single-message-container:first-of-type {
3062
- margin-top: 10px; }
3063
- .chat-single-message-container .query-more-btn {
3064
- transition: all 0.3s ease;
3065
- font-size: 22px;
3066
- padding: 13px;
3067
- margin-bottom: 6px;
3068
- height: 42px;
3069
- opacity: 0;
3070
- visibility: hidden;
3071
- cursor: pointer; }
3072
- .chat-single-message-container .query-more-btn:hover {
3073
- opacity: 1; }
3074
-
3075
- .chat-condition-item-container {
3076
- position: absolute;
3077
- background: inherit;
3078
- bottom: 0px;
3079
- padding: 5px;
3080
- border-radius: 6px; }
3081
-
3082
- .chat-condition-item {
3083
- background: none !important;
3084
- border: none;
3085
- margin-top: -20px !important;
3086
- padding: 0 !important;
3087
- font-family: var(--react-autoql-font-family);
3088
- color: var(--react-autoql-accent-color);
3089
- text-decoration: underline;
3090
- cursor: pointer; }
3091
-
3092
- .chat-single-message-container.response {
3093
- display: flex;
3094
- justify-content: flex-start;
3095
- padding-left: 20px;
3096
- -webkit-animation: scale-up-bl 0.5s ease;
3097
- animation: scale-up-bl 0.5s ease; }
3098
-
3099
- .chat-single-message-container.request {
3100
- display: flex;
3101
- justify-content: flex-end;
3102
- padding-right: 20px;
3103
- -webkit-animation: scale-up-br 0.5s ease;
3104
- animation: scale-up-br 0.5s ease; }
3105
-
3106
- .chat-single-message-container .chat-message-bubble {
3107
- position: relative;
3108
- padding: 13px;
3109
- border-radius: 10px;
3110
- max-width: calc(100% - 20px);
3111
- word-wrap: break-word;
3112
- font-family: inherit;
3113
- font-size: 14px;
3114
- letter-spacing: 0.04em;
3115
- box-sizing: border-box;
3116
- /* make small margin on bottom because sometimes react
3117
- custom scrollbar cuts off a pixel or 2 at the bottom */
3118
- margin-bottom: 6px; }
3119
-
3120
- .chat-single-message-container .chat-message-bubble.text {
3121
- max-width: 85%; }
3122
-
3123
- .chat-single-message-container .chat-message-bubble.full-width {
3124
- width: calc(100% - 20px) !important;
3125
- min-width: calc(100% - 20px) !important;
3126
- max-width: calc(100% - 20px) !important; }
3127
-
3128
- .chat-single-message-container.response .chat-message-bubble.active {
3129
- border: 1px solid #c3c3c3; }
3130
-
3131
- .chat-single-message-container.response .chat-message-bubble {
3132
- background: var(--react-autoql-background-color-primary);
3133
- color: var(--react-autoql-text-color-primary);
3134
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13); }
3135
-
3136
- .chat-single-message-container.response .chat-message-bubble:not(.text) {
3137
- min-width: 125px;
3138
- padding-bottom: 15px; }
3139
-
3140
- .chat-single-message-container.request .chat-message-bubble {
3141
- background: var(--react-autoql-accent-color);
3142
- color: var(--react-autoql-accent-text-color);
3143
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13); }
3144
-
3145
- .chat-message-toolbar,
3146
- .chat-message-toolbar.autoql-options-toolbar {
3147
- display: none;
3148
- position: absolute;
3149
- background: inherit;
3150
- top: -31px;
3151
- padding: 5px;
3152
- border-radius: 6px;
3153
- line-height: 28px;
3154
- background: var(--react-autoql-background-color-primary);
3155
- border: 1px solid var(--react-autoql-border-color);
3156
- color: var(--react-autoql-text-color-primary); }
3157
-
3158
- .chat-message-toolbar.right {
3159
- right: -9px; }
3160
-
3161
- .chat-message-toolbar.left {
3162
- left: -9px; }
3163
-
3164
- .chat-message-bubble:hover .chat-message-toolbar,
3165
- .chat-message-bubble .chat-message-toolbar.active {
3166
- display: block; }
3167
-
3168
- .report-problem-text-area {
3169
- border-radius: 4px;
3170
- border: 1px solid rgba(0, 0, 0, 0.15);
3171
- margin-top: 10px;
3172
- padding: 5px 10px;
3173
- outline: none !important; }
3174
-
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
- .condition-info-icon-left-align {
3183
- color: var(--react-autoql-accent-color) !important;
3184
- position: absolute !important;
3185
- bottom: 2px;
3186
- right: 10px;
3187
- font-size: 20px; }
3188
-
3189
- .condition-info-icon {
3190
- color: var(--react-autoql-accent-color) !important;
3191
- position: absolute !important;
3192
- bottom: 2px;
3193
- right: 4px;
3194
- font-size: 20px; }
3195
-
3196
- .more-options-menu,
3197
- .report-problem-menu {
3198
- background: var(--react-autoql-background-color-primary);
3199
- padding: 10px 0; }
3200
- .more-options-menu span.react-autoql-icon svg,
3201
- .report-problem-menu span.react-autoql-icon svg {
3202
- margin-right: 3px; }
3203
-
3204
- .interpretation-icon {
3205
- vertical-align: top;
3206
- height: 26px;
3207
- margin: 0 3px;
3208
- font-size: 18px; }
3209
-
3210
- /* Chart icon styles */
3211
- .chart-icon-svg-0,
3212
- .react-autoql-icon-svg-0 {
3213
- fill: currentColor; }
3214
-
3215
- .hm0 {
3216
- opacity: 0.5;
3217
- fill: currentColor;
3218
- enable-background: new; }
3219
-
3220
- .hm1 {
3221
- fill: currentColor; }
3222
-
3223
- .hm2 {
3224
- opacity: 0.15;
3225
- fill: currentColor;
3226
- enable-background: new; }
3227
-
3228
- .hm3 {
3229
- opacity: 0.6;
3230
- fill: currentColor;
3231
- enable-background: new; }
3232
-
3233
- .hm4 {
3234
- opacity: 0.65;
3235
- fill: currentColor;
3236
- enable-background: new; }
3200
+ .animated-item:nth-child(11) {
3201
+ -webkit-animation-delay: 0.88s;
3202
+ animation-delay: 0.88s; }
3237
3203
 
3238
- .hm5 {
3239
- fill: currentColor; }
3204
+ .animated-item:nth-child(12) {
3205
+ -webkit-animation-delay: 0.96s;
3206
+ animation-delay: 0.96s; }
3240
3207
 
3241
- .hm6 {
3242
- fill: currentColor; }
3208
+ .animated-item:nth-child(13) {
3209
+ -webkit-animation-delay: 1.04s;
3210
+ animation-delay: 1.04s; }
3243
3211
 
3244
- /* animations */
3245
- @-webkit-keyframes scale-up-br {
3246
- 0% {
3247
- transform: scale(0.5);
3248
- transform-origin: 100% 100%; }
3249
- 100% {
3250
- transform: scale(1);
3251
- transform-origin: 100% 100%; } }
3252
- @keyframes scale-up-br {
3253
- 0% {
3254
- transform: scale(0.5);
3255
- transform-origin: 100% 100%; }
3256
- 100% {
3257
- transform: scale(1);
3258
- transform-origin: 100% 100%; } }
3212
+ .animated-item:nth-child(14) {
3213
+ -webkit-animation-delay: 1.12s;
3214
+ animation-delay: 1.12s; }
3259
3215
 
3260
- @-webkit-keyframes scale-up-bl {
3261
- 0% {
3262
- transform: scale(0.5);
3263
- transform-origin: 0% 100%; }
3264
- 100% {
3265
- transform: scale(1);
3266
- transform-origin: 0% 100%; } }
3216
+ .animated-item:nth-child(15) {
3217
+ -webkit-animation-delay: 1.2s;
3218
+ animation-delay: 1.2s; }
3267
3219
 
3268
- @keyframes scale-up-bl {
3220
+ @-webkit-keyframes fadeIn {
3269
3221
  0% {
3270
- transform: scale(0.5);
3271
- transform-origin: 0% 100%; }
3222
+ opacity: 0;
3223
+ top: 100px; }
3224
+ 75% {
3225
+ opacity: 0.5;
3226
+ top: 0px; }
3272
3227
  100% {
3273
- transform: scale(1);
3274
- transform-origin: 0% 100%; } }
3228
+ opacity: 1; } }
3275
3229
 
3276
3230
  .react-autoql-table-container {
3277
- flex-grow: 1;
3278
- flex-shrink: 1;
3231
+ flex: 1;
3279
3232
  max-width: 100%;
3280
3233
  width: 100%;
3281
3234
  background-color: inherit; }
@@ -3295,8 +3248,7 @@ tbody::-webkit-scrollbar-thumb {
3295
3248
  .react-autoql-table-container.supports-drilldown
3296
3249
  .react-autoql-table.tabulator
3297
3250
  .tabulator-row.tabulator-unselectable:hover {
3298
- cursor: pointer !important;
3299
- background-color: var(--react-autoql-hover-color) !important; }
3251
+ cursor: pointer !important; }
3300
3252
 
3301
3253
  .react-autoql-table.tabulator
3302
3254
  .tabulator-header
@@ -3510,288 +3462,136 @@ tbody::-webkit-scrollbar-thumb {
3510
3462
  .axis-selector-container {
3511
3463
  background: var(--react-autoql-background-color-primary);
3512
3464
  color: var(--react-autoql-text-color-primary);
3513
- z-index: 9999;
3514
- padding: 5px 0;
3515
- max-height: 300px;
3516
- min-width: 150px;
3517
- overflow-y: auto; }
3518
- .axis-selector-container .axis-select-option.active {
3519
- background: var(--react-autoql-hover-color); }
3520
- .axis-selector-container .react-autoql-checkbox {
3521
- margin-left: 20px; }
3522
- .axis-selector-container .react-autoql-checkbox .react-autoql-checkbox__input {
3523
- width: 18px;
3524
- height: 18px; }
3525
- .axis-selector-container .react-autoql-list-item {
3526
- padding-left: 25px;
3527
- padding-right: 15px;
3528
- font-size: 12px;
3529
- line-height: 28px; }
3530
- .axis-selector-container .string-select-list-item {
3531
- font-size: 12px;
3532
- line-height: 28px; }
3533
- .axis-selector-container .string-select-list-item.active {
3534
- background: rgba(0, 0, 0, 0.04); }
3535
- .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
- .viz-toolbar {
3562
- position: absolute;
3563
- background: inherit;
3564
- padding: 5px;
3565
- border-radius: 6px;
3566
- line-height: 28px;
3567
- border: 1px solid #d3d3d352; }
3568
- .viz-toolbar.vertical .react-autoql-toolbar-btn {
3569
- display: block; }
3570
-
3571
- .react-autoql-toolbar-btn {
3572
- height: 28px;
3573
- width: 28px;
3574
- background: none;
3575
- border: none;
3576
- font-size: 16px;
3577
- line-height: 28px;
3578
- vertical-align: top;
3579
- color: var(--react-autoql-text-color-primary);
3580
- cursor: pointer;
3581
- outline: none !important; }
3582
-
3583
- .react-autoql-toolbar-btn.green {
3584
- color: #2ecc40; }
3585
-
3586
- .react-autoql-toolbar-btn.red {
3587
- color: #e80000; }
3588
-
3589
- .react-autoql-toolbar-btn:hover {
3590
- opacity: 0.7; }
3591
-
3592
- .react-autoql-radio-btn-container {
3593
- display: inline-block;
3594
- border-radius: 4px; }
3595
- .react-autoql-radio-btn-container [type='radio']:checked,
3596
- .react-autoql-radio-btn-container [type='radio']:not(:checked) {
3597
- position: absolute;
3598
- left: -9999px; }
3599
- .react-autoql-radio-btn-container [type='radio']:checked + label,
3600
- .react-autoql-radio-btn-container [type='radio']:not(:checked) + label {
3601
- position: relative;
3602
- padding-left: 28px;
3603
- cursor: pointer;
3604
- line-height: 20px;
3605
- display: inline-block; }
3606
- .react-autoql-radio-btn-container [type='radio']:checked + label:before,
3607
- .react-autoql-radio-btn-container [type='radio']:not(:checked) + label:before {
3608
- content: '';
3609
- position: absolute;
3610
- left: 1px;
3611
- top: 1px;
3612
- width: 18px;
3613
- height: 18px;
3614
- border: 1px solid #ddd;
3615
- border-radius: 100%;
3616
- background: #fff; }
3617
- .react-autoql-radio-btn-container [type='radio']:checked + label:after,
3618
- .react-autoql-radio-btn-container [type='radio']:not(:checked) + label:after {
3619
- content: '';
3620
- width: 12px;
3621
- height: 12px;
3622
- background: var(--react-autoql-accent-color, #26a7df);
3623
- position: absolute;
3624
- top: 4px;
3625
- left: 4px;
3626
- border-radius: 100%;
3627
- transition: all 0.2s ease; }
3628
- .react-autoql-radio-btn-container [type='radio']:not(:checked) + label:after {
3629
- opacity: 0;
3630
- transform: scale(0); }
3631
- .react-autoql-radio-btn-container [type='radio']:checked + label:after {
3632
- opacity: 1;
3633
- transform: scale(1); }
3634
- .react-autoql-radio-btn-container .react-autoql-radio-btn {
3635
- position: relative;
3636
- display: inline-block;
3637
- padding: 3px 12px;
3638
- border: 1px solid var(--react-autoql-border-color, #dcdcdc);
3639
- margin-left: -1px;
3640
- transition: all 0.2s ease;
3641
- cursor: pointer; }
3642
- .react-autoql-radio-btn-container .react-autoql-radio-btn.active {
3643
- background-color: var(--react-autoql-accent-color, #26a7df);
3644
- border-color: var(--react-autoql-accent-color, #26a7df);
3645
- color: #fff;
3646
- z-index: 3; }
3647
- .react-autoql-radio-btn-container .react-autoql-radio-btn.active.outlined {
3648
- background-color: inherit;
3649
- color: var(--react-autoql-accent-color, #26a7df);
3650
- z-index: 3; }
3651
- .react-autoql-radio-btn-container .react-autoql-radio-btn:hover:not(.active) {
3652
- border-color: var(--react-autoql-accent-color, #26a7df);
3653
- color: var(--react-autoql-accent-color, #26a7df);
3654
- z-index: 2; }
3655
- .react-autoql-radio-btn-container .react-autoql-radio-btn:first-child {
3656
- border-top-left-radius: 4px;
3657
- border-bottom-left-radius: 4px;
3658
- margin-left: 0; }
3659
- .react-autoql-radio-btn-container .react-autoql-radio-btn:last-child {
3660
- border-top-right-radius: 4px;
3661
- border-bottom-right-radius: 4px; }
3662
-
3663
- .content {
3664
- margin: 2rem; }
3665
-
3666
- .react-autoql-checkbox-container {
3667
- display: inline-block;
3668
- vertical-align: middle; }
3669
-
3670
- .react-autoql-checkbox {
3671
- display: flex;
3672
- align-items: center;
3673
- position: relative;
3674
- cursor: pointer; }
3675
- .react-autoql-checkbox .react-autoql-checkbox--switch__input:checked,
3676
- .react-autoql-checkbox .react-autoql-checkbox__input:checked {
3677
- border-color: var(--react-autoql-accent-color, #26a7df);
3678
- background: var(--react-autoql-accent-color, #26a7df); }
3679
-
3680
- .react-autoql-checkbox__label {
3681
- flex-shrink: 0;
3682
- padding: 0.5rem 1rem;
3683
- color: #fff;
3684
- cursor: pointer; }
3685
-
3686
- .react-autoql-checkbox__input {
3687
- position: relative;
3688
- flex-shrink: 0;
3689
- width: 20px;
3690
- height: 20px;
3691
- appearance: none;
3692
- -webkit-appearance: none;
3693
- -moz-appearance: none;
3694
- outline: none;
3695
- background: transparent;
3696
- border: 1px solid;
3697
- border-color: var(--react-autoql-accent-color, #26a7df);
3698
- border-radius: 2px;
3699
- cursor: pointer; }
3700
-
3701
- .react-autoql-checkbox__input::before {
3702
- content: ' ';
3703
- position: absolute;
3704
- top: 50%;
3705
- right: 50%;
3706
- bottom: 50%;
3707
- left: 50%;
3708
- transition: all 0.2s;
3709
- background: var(--react-autoql-accent-color, #26a7df); }
3710
-
3711
- .react-autoql-checkbox-tick {
3712
- position: absolute;
3713
- color: white;
3714
- left: 3px;
3715
- line-height: 20px;
3716
- pointer-events: none; }
3717
-
3718
- .react-autoql-checkbox--switch__input::before {
3719
- box-shadow: 0 0 2px 1px #00000030; }
3720
-
3721
- .react-autoql-checkbox__input:checked::before,
3722
- .react-autoql-checkbox__input:indeterminate::before {
3723
- top: 0;
3724
- right: 0;
3725
- bottom: 0;
3726
- left: 0; }
3727
-
3728
- .react-autoql-checkbox__input:indeterminate::before {
3729
- top: 7px;
3730
- bottom: 7px; }
3731
-
3732
- .react-autoql-checkbox__input:disabled {
3733
- border-color: #5a5358;
3734
- cursor: default; }
3735
-
3736
- .react-autoql-checkbox__input:disabled::before {
3737
- background-color: #5a5358; }
3738
-
3739
- .react-autoql-checkbox__input:disabled + .react-autoql-checkbox__label {
3740
- color: gray;
3741
- cursor: default; }
3742
-
3743
- .react-autoql-checkbox--has-error__input {
3744
- border-color: red;
3745
- background-color: rgba(255, 0, 0, 0.2); }
3746
-
3747
- .react-autoql-checkbox--has-error__input::before {
3748
- background-color: red; }
3749
-
3750
- .react-autoql-checkbox--switch__label::after {
3751
- content: 'off';
3752
- margin-left: 0.25rem; }
3465
+ z-index: 9999;
3466
+ padding: 5px 0;
3467
+ max-height: 300px;
3468
+ min-width: 150px;
3469
+ overflow-y: auto; }
3470
+ .axis-selector-container .axis-select-option.active {
3471
+ background: var(--react-autoql-hover-color); }
3472
+ .axis-selector-container .react-autoql-checkbox {
3473
+ margin-left: 20px; }
3474
+ .axis-selector-container .react-autoql-checkbox .react-autoql-checkbox__input {
3475
+ width: 18px;
3476
+ height: 18px; }
3477
+ .axis-selector-container .react-autoql-list-item {
3478
+ padding-left: 25px;
3479
+ padding-right: 15px;
3480
+ font-size: 12px;
3481
+ line-height: 28px; }
3482
+ .axis-selector-container .string-select-list-item {
3483
+ font-size: 12px;
3484
+ line-height: 28px; }
3485
+ .axis-selector-container .string-select-list-item.active {
3486
+ background: rgba(0, 0, 0, 0.04); }
3487
+ .axis-selector-container .number-selector-header {
3488
+ margin-top: 10px;
3489
+ padding: 0px 18px;
3490
+ font-size: 12px;
3491
+ padding-bottom: 7px;
3492
+ font-weight: 500;
3493
+ opacity: 0.6; }
3494
+ .axis-selector-container .axis-selector-content {
3495
+ list-style-type: none;
3496
+ width: 100%;
3497
+ margin: 0;
3498
+ padding: 0; }
3499
+ .axis-selector-container .axis-selector-content li {
3500
+ color: var(--react-autoql-text-color-primary);
3501
+ width: 100%;
3502
+ height: 30px;
3503
+ line-height: 30px;
3504
+ padding: 0 15px;
3505
+ cursor: pointer; }
3506
+ .axis-selector-container .axis-selector-content li:hover {
3507
+ background: rgba(0, 0, 0, 0.05); }
3753
3508
 
3754
- .react-autoql-checkbox--switch__input {
3755
- width: 36px;
3756
- height: 20px;
3757
- border-radius: 16px;
3758
- background: var(--react-autoql-background-color-tertiary);
3759
- border: 1px solid var(--react-autoql-background-color-tertiary); }
3509
+ .axis-selector-apply-btn {
3510
+ background: var(--react-autoql-background-color-primary);
3511
+ padding: 5px; }
3760
3512
 
3761
- .react-autoql-checkbox--switch__input::before {
3762
- top: 2px;
3763
- right: 18px;
3764
- bottom: 2px;
3765
- left: 2px;
3766
- border-radius: 50%;
3767
- background: #fff; }
3513
+ .viz-toolbar {
3514
+ position: absolute;
3515
+ background: inherit;
3516
+ padding: 5px;
3517
+ border-radius: 6px;
3518
+ line-height: 28px;
3519
+ border: 1px solid #d3d3d352; }
3520
+ .viz-toolbar.vertical .react-autoql-toolbar-btn {
3521
+ display: block; }
3768
3522
 
3769
- .react-autoql-checkbox--switch__input:checked
3770
- + .react-autoql-checkbox--switch__label::after {
3771
- content: 'on'; }
3523
+ .react-autoql-toolbar-btn {
3524
+ height: 28px;
3525
+ width: 28px;
3526
+ background: none;
3527
+ border: none;
3528
+ font-size: 16px;
3529
+ line-height: 28px;
3530
+ vertical-align: top;
3531
+ color: var(--react-autoql-text-color-primary);
3532
+ cursor: pointer;
3533
+ outline: none !important; }
3772
3534
 
3773
- .react-autoql-checkbox--switch__input:checked::before {
3774
- right: 2px;
3775
- left: 18px;
3776
- top: 2px;
3777
- bottom: 2px; }
3535
+ .react-autoql-toolbar-btn.green {
3536
+ color: #2ecc40; }
3778
3537
 
3779
- .react-autoql-checkbox-label {
3780
- padding-left: 6px;
3781
- line-height: 100%; }
3538
+ .react-autoql-toolbar-btn.red {
3539
+ color: #e80000; }
3782
3540
 
3783
- .react-autoql-modal-container
3784
- .react-autoql-checkbox__input:not(.react-autoql-checkbox--switch__input),
3785
- .react-autoql-drawer
3786
- .react-autoql-checkbox__input:not(.react-autoql-checkbox--switch__input) {
3787
- border-color: var(--react-autoql-accent-color); }
3541
+ .react-autoql-toolbar-btn:hover {
3542
+ opacity: 0.7; }
3788
3543
 
3789
- .react-autoql-modal-container
3790
- .react-autoql-checkbox__input::before:not(.react-autoql-checkbox--switch__input),
3791
- .react-autoql-drawer
3792
- .react-autoql-checkbox__input::before:not(.react-autoql-checkbox--switch__input) {
3793
- background: var(--react-autoql-accent-color); }
3794
3544
 
3545
+ .react-autoql-input-container {
3546
+ position: relative;
3547
+ margin: 2px 5px;
3548
+ display: inline-block; }
3549
+ .react-autoql-input-container .react-autoql-input {
3550
+ border: 1px solid rgba(0, 0, 0, 0.1);
3551
+ border-radius: 4px;
3552
+ line-height: 32px;
3553
+ min-height: 34px;
3554
+ padding: 0 10px;
3555
+ width: 100%;
3556
+ outline: none !important;
3557
+ transition: all 0.2s ease;
3558
+ transition-property: border-color, color, opacity; }
3559
+ .react-autoql-input-container .react-autoql-input.with-icon {
3560
+ padding-left: 38px; }
3561
+ .react-autoql-input-container .react-autoql-input::-moz-placeholder {
3562
+ /* Chrome, Firefox, Opera, Safari 10.1+ */
3563
+ color: rgba(0, 0, 0, 0.2);
3564
+ opacity: 1;
3565
+ /* Firefox */
3566
+ font-style: italic; }
3567
+ .react-autoql-input-container .react-autoql-input:-ms-input-placeholder {
3568
+ /* Chrome, Firefox, Opera, Safari 10.1+ */
3569
+ color: rgba(0, 0, 0, 0.2);
3570
+ opacity: 1;
3571
+ /* Firefox */
3572
+ font-style: italic; }
3573
+ .react-autoql-input-container .react-autoql-input::placeholder {
3574
+ /* Chrome, Firefox, Opera, Safari 10.1+ */
3575
+ color: rgba(0, 0, 0, 0.2);
3576
+ opacity: 1;
3577
+ /* Firefox */
3578
+ font-style: italic; }
3579
+ .react-autoql-input-container .react-autoql-input-icon {
3580
+ position: absolute;
3581
+ left: 12px;
3582
+ top: 8px;
3583
+ opacity: 0.4;
3584
+ transition: all 0.2s ease; }
3585
+ .react-autoql-input-container .react-autoql-input-icon span.react-autoql-icon svg {
3586
+ height: 17px;
3587
+ width: 17px; }
3588
+ .react-autoql-input-container:hover .react-autoql-input,
3589
+ .react-autoql-input-container .react-autoql-input:focus {
3590
+ border-color: var(--react-autoql-accent-color, #26a7df); }
3591
+ .react-autoql-input-container:hover .react-autoql-input-icon,
3592
+ .react-autoql-input-container .react-autoql-input-icon.focus {
3593
+ opacity: 1;
3594
+ color: var(--react-autoql-accent-color, #26a7df); }
3795
3595
 
3796
3596
  .react-autoql-steps-container {
3797
3597
  margin: 10px; }
@@ -3862,57 +3662,6 @@ tbody::-webkit-scrollbar-thumb {
3862
3662
  transition-duration: 0.5s;
3863
3663
  opacity: 1; }
3864
3664
 
3865
- .react-autoql-input-container {
3866
- position: relative;
3867
- margin: 2px 5px;
3868
- display: inline-block; }
3869
- .react-autoql-input-container .react-autoql-input {
3870
- border: 1px solid rgba(0, 0, 0, 0.1);
3871
- border-radius: 4px;
3872
- line-height: 32px;
3873
- min-height: 34px;
3874
- padding: 0 10px;
3875
- width: 100%;
3876
- outline: none !important;
3877
- transition: all 0.2s ease;
3878
- transition-property: border-color, color, opacity; }
3879
- .react-autoql-input-container .react-autoql-input.with-icon {
3880
- padding-left: 38px; }
3881
- .react-autoql-input-container .react-autoql-input::-moz-placeholder {
3882
- /* Chrome, Firefox, Opera, Safari 10.1+ */
3883
- color: rgba(0, 0, 0, 0.2);
3884
- opacity: 1;
3885
- /* Firefox */
3886
- font-style: italic; }
3887
- .react-autoql-input-container .react-autoql-input:-ms-input-placeholder {
3888
- /* Chrome, Firefox, Opera, Safari 10.1+ */
3889
- color: rgba(0, 0, 0, 0.2);
3890
- opacity: 1;
3891
- /* Firefox */
3892
- font-style: italic; }
3893
- .react-autoql-input-container .react-autoql-input::placeholder {
3894
- /* Chrome, Firefox, Opera, Safari 10.1+ */
3895
- color: rgba(0, 0, 0, 0.2);
3896
- opacity: 1;
3897
- /* Firefox */
3898
- font-style: italic; }
3899
- .react-autoql-input-container .react-autoql-input-icon {
3900
- position: absolute;
3901
- left: 12px;
3902
- top: 8px;
3903
- opacity: 0.4;
3904
- transition: all 0.2s ease; }
3905
- .react-autoql-input-container .react-autoql-input-icon span.react-autoql-icon svg {
3906
- height: 17px;
3907
- width: 17px; }
3908
- .react-autoql-input-container:hover .react-autoql-input,
3909
- .react-autoql-input-container .react-autoql-input:focus {
3910
- border-color: var(--react-autoql-accent-color, #26a7df); }
3911
- .react-autoql-input-container:hover .react-autoql-input-icon,
3912
- .react-autoql-input-container .react-autoql-input-icon.focus {
3913
- opacity: 1;
3914
- color: var(--react-autoql-accent-color, #26a7df); }
3915
-
3916
3665
  .react-autoql-notification-rule-container {
3917
3666
  display: flex; }
3918
3667
  .react-autoql-notification-rule-container .react-autoql-rule-input {
@@ -4091,7 +3840,7 @@ tbody::-webkit-scrollbar-thumb {
4091
3840
  margin-right: 6px; }
4092
3841
 
4093
3842
  .spinner-loader:after {
4094
- content: " ";
3843
+ content: ' ';
4095
3844
  display: block;
4096
3845
  width: 16px;
4097
3846
  height: 16px;
@@ -4299,6 +4048,30 @@ tbody::-webkit-scrollbar-thumb {
4299
4048
  .react-autoql-select-popup-container .react-autoql-select-popup li:hover {
4300
4049
  background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.04)); }
4301
4050
 
4051
+ .react-autoql-select-with-arrow div {
4052
+ color: inherit; }
4053
+
4054
+ .react-autoql-select-with-arrow > div {
4055
+ border-color: var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
4056
+ background: var(--react-autoql-background-color-primary, white);
4057
+ transition: all 0.2s ease;
4058
+ cursor: pointer !important; }
4059
+ .react-autoql-select-with-arrow > div:hover {
4060
+ border-color: var(--react-autoql-accent-color, #26a7df); }
4061
+ .react-autoql-select-with-arrow > div .react-autoql-select-with-arrow__option {
4062
+ cursor: pointer; }
4063
+ .react-autoql-select-with-arrow > div .react-autoql-select-with-arrow__option:hover {
4064
+ background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.15)); }
4065
+ .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 {
4066
+ background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.1)); }
4067
+
4068
+ .react-autoql-select-with-arrow:focus {
4069
+ outline: none !important; }
4070
+
4071
+ .react-autoql-select-with-arrow__control--is-focused {
4072
+ border: 1px solid var(--react-autoql-accent-color, #26a7df) !important;
4073
+ box-shadow: none !important; }
4074
+
4302
4075
  .react-autoql-list-item {
4303
4076
  padding: 0 20px;
4304
4077
  display: flex;
@@ -4324,30 +4097,6 @@ tbody::-webkit-scrollbar-thumb {
4324
4097
  .react-autoql-list-item:not(:last-child) {
4325
4098
  border-bottom: 1px solid #d3d3d34a; }
4326
4099
 
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
4100
 
4352
4101
  g.legendOrdinal,
4353
4102
  g.legendOrdinal tspan {
@@ -4356,14 +4105,12 @@ g.legendOrdinal tspan {
4356
4105
  letter-spacing: 0;
4357
4106
  cursor: pointer; }
4358
4107
 
4359
- .x-axis-label-border,
4360
- .y-axis-label-border,
4108
+ .axis-label-border,
4361
4109
  .legend-title-border {
4362
4110
  cursor: pointer;
4363
4111
  stroke: transparent;
4364
4112
  opacity: 0.5; }
4365
- .x-axis-label-border:hover,
4366
- .y-axis-label-border:hover,
4113
+ .axis-label-border:hover,
4367
4114
  .legend-title-border:hover {
4368
4115
  stroke: var(--react-autoql-accent-color) !important; }
4369
4116