react-autoql 4.0.1 → 4.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -71,51 +71,198 @@
71
71
  100% {
72
72
  left: 82%; } }
73
73
 
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; }
74
+ .filter-lock-menu {
75
+ z-index: 99999 !important;
76
+ transition: opacity 0.1s ease 0s !important;
77
+ border: 1px solid #ababab52;
78
+ border-radius: 4px;
79
+ box-shadow: 0px 0 8px rgba(0, 0, 0, 0.15);
80
+ opacity: 1;
81
+ min-width: 500px;
82
+ max-width: 70vw;
83
+ height: 350px;
84
+ background: var(--react-autoql-background-color-primary);
85
+ color: var(--react-autoql-text-color-primary); }
86
+ .filter-lock-menu .filter-lock-toast-container {
87
+ top: 0;
88
+ position: absolute; }
89
+ .filter-lock-menu .filter-lock-toast-container .Toastify__toast {
90
+ min-height: 48px; }
91
+ .filter-lock-menu .filter-lock-toast-container .Toastify__toast-body {
92
+ justify-content: center; }
93
+ .filter-lock-menu .filter-lock-toast-container .Toastify__toast-body > div:last-child {
94
+ flex: unset; }
95
+
96
+ .filter-lock-menu-content {
97
+ padding: 15px 20px;
98
+ display: flex;
99
+ flex-direction: column;
100
+ justify-content: stretch;
101
+ height: 100%; }
102
+ .filter-lock-menu-content.closed {
103
+ opacity: 0; }
104
+ .filter-lock-menu-content h3 {
105
+ margin-top: 3px;
106
+ margin-bottom: 15px;
107
+ color: var(--react-autoql-text-color-primary); }
108
+ .filter-lock-menu-content h4 {
109
+ margin-top: 3px;
110
+ margin-bottom: 5px;
111
+ color: var(--react-autoql-text-color-primary); }
112
+ .filter-lock-menu-content .react-autoql-condition-list-loading-container,
113
+ .filter-lock-menu-content .react-autoql-empty-condition-list,
114
+ .filter-lock-menu-content .react-autoql-filter-list-container {
115
+ flex: 1; }
116
+ .filter-lock-menu-content .filter-lock-menu-header {
117
+ flex: 0;
118
+ width: 100%;
119
+ display: flex;
120
+ align-items: flex-start;
121
+ justify-content: space-between; }
122
+ .filter-lock-menu-content .filter-lock-menu-header .filter-locking-close-btn {
123
+ border: none;
124
+ margin: 0;
125
+ padding: 0;
126
+ font-size: 20px; }
127
+ .filter-lock-menu-content .filter-lock-menu-footer {
128
+ width: 100%;
129
+ display: flex;
130
+ justify-content: flex-end; }
131
+ .filter-lock-menu-content .react-autoql-empty-condition-list {
132
+ opacity: 0.8;
133
+ width: 100%;
134
+ text-align: center;
135
+ padding-top: 70px; }
136
+ .filter-lock-menu-content .react-autoql-filter-list-container {
137
+ margin-top: 10px; }
138
+ .filter-lock-menu-content .react-autoql-filter-list-container .flex {
139
+ width: 100%;
140
+ display: flex;
141
+ flex-direction: row;
142
+ justify-content: space-between;
143
+ flex-wrap: nowrap;
144
+ white-space: nowrap;
145
+ margin-bottom: 4px; }
146
+ .filter-lock-menu-content .react-autoql-filter-list-container .flex .persist-toggle-column,
147
+ .filter-lock-menu-content .react-autoql-filter-list-container .flex .react-autoql-condition-table-list-item {
148
+ margin-right: 25px; }
149
+ .filter-lock-menu-content .react-autoql-filter-list-container .flex .react-autoql-remove-filter-icon {
150
+ cursor: pointer; }
151
+ .filter-lock-menu-content .react-autoql-filter-list-container .flex .react-autoql-remove-filter-icon:hover {
152
+ color: var(--react-autoql-danger-color); }
153
+ .filter-lock-menu-content .react-autoql-filter-list-container .react-autoql-highlight-row {
154
+ background-color: var(--react-autoql-accent-color);
155
+ color: white;
156
+ -webkit-animation-name: highlightIn, highlightOut;
157
+ animation-name: highlightIn, highlightOut;
158
+ -webkit-animation-duration: 300ms, 300ms;
159
+ animation-duration: 300ms, 300ms;
160
+ -webkit-animation-delay: 0ms, 1000ms;
161
+ animation-delay: 0ms, 1000ms;
162
+ -webkit-animation-timing-function: ease-in, ease-out;
163
+ animation-timing-function: ease-in, ease-out;
164
+ -webkit-animation-iteration-count: 1, 1;
165
+ animation-iteration-count: 1, 1; }
166
+ .filter-lock-menu-content .react-autoql-condition-locking-input {
167
+ padding: 5px;
168
+ padding-left: 20px;
169
+ height: 32px;
170
+ box-sizing: border-box;
171
+ border-radius: 24px;
172
+ font-size: 12px;
173
+ font-family: inherit;
174
+ letter-spacing: 0.04em;
175
+ outline: none !important;
176
+ width: 100%;
177
+ font-family: inherit;
178
+ border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
179
+ background: var(--react-autoql-background-color-primary);
180
+ color: var(--react-autoql-text-color-primary); }
181
+ .filter-lock-menu-content .react-autoql-condition-locking-input:hover {
182
+ box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1); }
183
+ .filter-lock-menu-content .react-autoql-condition-locking-input::-moz-placeholder {
184
+ color: rgba(var(--react-autoql-text-color-placeholder), 2) !important;
185
+ opacity: 0.5; }
186
+ .filter-lock-menu-content .react-autoql-condition-locking-input:-ms-input-placeholder {
187
+ color: rgba(var(--react-autoql-text-color-placeholder), 2) !important;
188
+ opacity: 0.5; }
189
+ .filter-lock-menu-content .react-autoql-condition-locking-input::placeholder {
190
+ color: rgba(var(--react-autoql-text-color-placeholder), 2) !important;
191
+ opacity: 0.5; }
192
+ .filter-lock-menu-content .react-autosuggest__container--open {
193
+ position: relative; }
194
+ .filter-lock-menu-content .react-autosuggest__container--open .react-autosuggest__suggestions-container--open {
195
+ background-color: var(--react-autoql-background-color-primary);
196
+ border: 1px solid var(--react-autoql-border-color);
197
+ color: var(--react-autoql-text-color-primary);
198
+ position: absolute;
199
+ padding: 10px 0;
200
+ display: block;
201
+ font-family: inherit;
202
+ font-size: 15px;
203
+ font-weight: normal;
204
+ z-index: 2;
205
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
206
+ text-align: left;
207
+ border-radius: 4px;
208
+ height: auto;
209
+ width: 100%;
210
+ max-height: 200px;
211
+ overflow-y: scroll !important; }
212
+ .filter-lock-menu-content .react-autosuggest__container--open .react-autosuggest__suggestions-container--open ul.filter-lock-suggestion-item {
213
+ cursor: pointer;
214
+ width: 100%;
215
+ columns: 2;
216
+ -webkit-columns: 2;
217
+ list-style: none;
218
+ -moz-columns: 2;
219
+ letter-spacing: 0.05em;
220
+ line-height: 22.5px;
221
+ padding: 0px 20px 3px 20px; }
222
+ .filter-lock-menu-content .react-autosuggest__container--open .react-autosuggest__suggestions-container--open .react-autosuggest__suggestion {
223
+ color: var(--react-autoql-text-color-primary); }
224
+ .filter-lock-menu-content .react-autosuggest__container--open .react-autosuggest__suggestions-container--open .react-autosuggest__suggestions-list {
225
+ margin: 0;
226
+ padding: 0;
227
+ list-style-type: none; }
228
+ .filter-lock-menu-content .react-autosuggest__container--open .react-autosuggest__suggestions-container--open .react-autosuggest__suggestion--highlighted {
229
+ background-color: rgba(0, 0, 0, 0.1) !important; }
230
+ .filter-lock-menu-content .react-autosuggest__container--open .react-autosuggest__suggestions-container--open .react-autosuggest__section-title {
231
+ padding: 10px 0 0 10px;
232
+ font-size: 12px;
233
+ color: #777; }
81
234
 
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; }
235
+ @-webkit-keyframes highlightOut {
236
+ 100% {
237
+ background-color: var(--react-autoql-background-color-primary);
238
+ color: var(--react-autoql-text-color-primary); }
239
+ 0% {
240
+ background-color: var(--react-autoql-accent-color);
241
+ color: white; } }
99
242
 
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; }
243
+ @keyframes highlightOut {
244
+ 100% {
245
+ background-color: var(--react-autoql-background-color-primary);
246
+ color: var(--react-autoql-text-color-primary); }
247
+ 0% {
248
+ background-color: var(--react-autoql-accent-color);
249
+ color: white; } }
108
250
 
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; }
251
+ @-webkit-keyframes highlightIn {
252
+ 100% {
253
+ background-color: var(--react-autoql-accent-color);
254
+ color: white; }
255
+ 0% {
256
+ background-color: var(--react-autoql-background-color-primary);
257
+ color: var(--react-autoql-text-color-primary); } }
258
+
259
+ @keyframes highlightIn {
260
+ 100% {
261
+ background-color: var(--react-autoql-accent-color);
262
+ color: white; }
263
+ 0% {
264
+ background-color: var(--react-autoql-background-color-primary);
265
+ color: var(--react-autoql-text-color-primary); } }
119
266
 
120
267
  .react-autoql-bar-container {
121
268
  position: relative;
@@ -263,6 +410,52 @@ span.react-autoql-icon {
263
410
  left: 30px;
264
411
  top: 15px; }
265
412
 
413
+ .react-autoql-icon {
414
+ position: relative;
415
+ opacity: 1; }
416
+ .react-autoql-icon.warning {
417
+ color: var(--react-autoql-warning-color) !important; }
418
+ .react-autoql-icon.danger {
419
+ color: var(--react-autoql-danger-color) !important; }
420
+
421
+ span.react-autoql-icon {
422
+ vertical-align: unset;
423
+ text-align: left;
424
+ margin: 0;
425
+ padding: 0;
426
+ float: none !important;
427
+ color: inherit; }
428
+ span.react-autoql-icon svg {
429
+ float: none !important;
430
+ color: inherit;
431
+ vertical-align: unset;
432
+ text-align: left;
433
+ margin: 0;
434
+ padding: 0;
435
+ opacity: 1;
436
+ height: 1em;
437
+ margin-bottom: -0.15em; }
438
+
439
+ .slack-logo {
440
+ display: inline-block;
441
+ height: 100%;
442
+ margin-bottom: 3px; }
443
+ .slack-logo img {
444
+ vertical-align: middle;
445
+ height: 1em;
446
+ width: 1em; }
447
+
448
+ .react-autoql-badge {
449
+ position: absolute;
450
+ background: var(--react-autoql-warning-color);
451
+ border: 1px solid var(--react-autoql-background-color-primary);
452
+ width: 0.5em;
453
+ height: 0.5em;
454
+ top: -0.1em;
455
+ right: -0.25em;
456
+ border-radius: 50%;
457
+ box-sizing: content-box; }
458
+
266
459
  .loading-container-centered {
267
460
  height: 100%;
268
461
  width: 100%;
@@ -369,421 +562,282 @@ span.react-autoql-icon {
369
562
  font-weight: bold;
370
563
  cursor: pointer; }
371
564
 
372
- .condition-menu-dropdown {
373
- display: block; }
565
+ @import url("https://fonts.googleapis.com/icon?family=Material+Icons");
566
+ .react-autoql-response-content-container {
567
+ position: relative;
568
+ display: flex;
569
+ flex-direction: column;
570
+ justify-content: center;
571
+ align-items: center;
572
+ background-color: inherit;
573
+ font-size: 14px;
574
+ overflow: hidden;
575
+ max-height: 100%;
576
+ max-width: 100%;
577
+ width: 100%;
578
+ height: 100%;
579
+ color: var(--react-autoql-text-color-primary); }
374
580
 
375
- .react-autoql-condition-lock-menu {
376
- min-width: 400px !important; }
581
+ .react-autoql-response-content-container.table {
582
+ max-height: 100vh !important;
583
+ overflow-y: scroll;
584
+ scrollbar-width: none;
585
+ margin-bottom: 0 !important;
586
+ height: 100%;
587
+ width: 100%; }
377
588
 
378
- .react-autoql-filter-locking-title-container {
379
- display: inline-block;
380
- width: 100%;
381
- padding-top: 4px;
382
- padding-left: 6px; }
383
- .react-autoql-filter-locking-title-container h3 {
384
- width: 95%;
385
- float: left;
386
- color: var(--react-autoql-text-color-primary);
387
- margin-bottom: 0;
388
- margin-top: 0;
389
- display: block;
390
- font-size: 1.17em !important;
391
- font-weight: bold; }
392
- .react-autoql-filter-locking-title-container h3 span {
393
- color: var(--react-autoql-accent-color); }
394
- .react-autoql-filter-locking-title-container button {
395
- width: 5%;
396
- float: right; }
397
- .react-autoql-filter-locking-title-container button :hover {
398
- cursor: pointer;
399
- color: var(--react-autoql-hover-color); }
589
+ .react-autoql-response-content-container.table::-webkit-scrollbar {
590
+ width: 0;
591
+ height: 0; }
400
592
 
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);
593
+ .react-autoql-suggestion-btn {
594
+ padding: 6px 14px;
595
+ background: transparent;
596
+ font-family: inherit;
597
+ font-size: 12px;
598
+ margin-bottom: 5px;
599
+ outline: none !important;
600
+ cursor: pointer;
601
+ letter-spacing: 0.05em;
602
+ transition: all 0.1s ease;
603
+ border: 1px solid rgba(0, 0, 0, 0.15);
405
604
  border-radius: 5px;
406
- padding: 2px 6px 2px 6px;
407
- margin: 4px 10px 4px 10px;
408
- display: inline-block;
409
- position: absolute;
410
- top: 20px;
411
- box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.4);
412
- z-index: 999999; }
413
- #react-autoql-filter-description-id span {
414
- color: var(--react-autoql-accent-color); }
415
- #react-autoql-filter-description-id p {
416
- width: 96%;
417
- float: right;
418
- margin-bottom: 0; }
605
+ color: inherit; }
419
606
 
420
- #react-autoql-filter-description-id.show {
421
- visibility: visible;
422
- -webkit-animation: fadeIn 1s;
423
- animation: fadeIn 1s; }
607
+ .react-autoql-suggestion-btn:hover {
608
+ border-color: transparent;
609
+ color: white;
610
+ background: var(--react-autoql-accent-color); }
424
611
 
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;
612
+ .react-autoql-help-link-btn {
613
+ padding: 6px 14px;
614
+ background: transparent;
615
+ border-radius: 5px;
433
616
  font-family: inherit;
434
- letter-spacing: 0.04em;
617
+ font-size: 12px;
618
+ margin-top: 5px;
435
619
  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); }
620
+ cursor: pointer;
621
+ letter-spacing: 0.05em;
622
+ transition: all 0.1s ease;
623
+ border-color: #e2e2e26e;
624
+ color: inherit; }
451
625
 
452
- .react-autoql-condition-table {
453
- min-width: 95%;
454
- margin: 10px auto;
455
- table-layout: fixed; }
626
+ .react-autoql-help-link-btn:hover {
627
+ opacity: 0.7; }
456
628
 
457
- .react-autoql-condition-table thead {
458
- padding-left: 10px;
459
- display: table-header-group;
460
- width: 100%;
461
- flex: 1 1 auto; }
629
+ .react-autoql-help-link-icon {
630
+ width: 15px;
631
+ height: 15px;
632
+ margin-bottom: -3px;
633
+ margin-right: 3px; }
462
634
 
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%; }
635
+ .react-autoql-suggestion-message {
636
+ height: 100%;
637
+ width: 100%;
638
+ word-break: break-word; }
468
639
 
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; }
640
+ .react-autoql-suggestions-select {
641
+ position: relative;
642
+ display: inline-block;
643
+ height: 30px;
644
+ background: none;
645
+ outline: none !important;
646
+ border: 1px solid;
647
+ font-family: inherit;
648
+ letter-spacing: 0.05em;
649
+ color: #28a8e0;
650
+ cursor: pointer;
651
+ font-size: inherit; }
475
652
 
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; }
653
+ .no-columns-error-message {
654
+ text-align: center;
655
+ padding: 20px;
656
+ font-size: 13px; }
657
+ .no-columns-error-message .warning-icon {
658
+ font-size: 22px;
659
+ display: block;
660
+ margin-bottom: -13px;
661
+ text-align: center; }
662
+ .no-columns-error-message .eye-icon {
663
+ vertical-align: bottom;
664
+ line-height: 18px; }
482
665
 
483
- .react-autoql-accept-conditions-button {
484
- text-align: right;
485
- margin-bottom: 12px;
486
- padding-right: 10px;
487
- color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.4));
488
- transition: color 0.1s ease; }
489
- .react-autoql-accept-conditions-button span {
490
- opacity: 0.8;
491
- cursor: pointer; }
492
- .react-autoql-accept-conditions-button span:hover {
493
- opacity: 1; }
666
+ .query-output-footer {
667
+ display: flex;
668
+ justify-content: space-between;
669
+ align-items: flex-end;
670
+ padding-top: 5px;
671
+ max-height: 150px;
672
+ width: 100%; }
494
673
 
495
- .react-autoql-condition-list {
496
- padding: 0;
497
- margin: 0 auto;
498
- min-height: 182px; }
674
+ .dashboard-data-limit-warning-icon {
675
+ color: var(--react-autoql-warning-color) !important;
676
+ margin-left: 10px;
677
+ font-size: 20px; }
499
678
 
500
- tbody::-webkit-scrollbar {
501
- -webkit-appearance: none;
502
- width: 7px; }
679
+ /* query validation */
680
+ .react-autoql-query-validation-selector-container {
681
+ display: inline-block;
682
+ position: relative; }
503
683
 
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); }
684
+ .react-autoql-select-popup-container.query-validation-select {
685
+ padding: 5px 0;
686
+ letter-spacing: 0.03em;
687
+ font-family: var(--react-autoql-font-family), sans-serif; }
688
+ .react-autoql-select-popup-container.query-validation-select .react-autoql-select-option {
689
+ height: unset;
690
+ font-size: 14px;
691
+ line-height: 24px;
692
+ padding: 0 15px; }
693
+ .react-autoql-select-popup-container.query-validation-select .react-autoql-select-option:last-of-type {
694
+ color: #d84830; }
508
695
 
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; }
696
+ .react-autoql-query-validation-query {
697
+ text-align: center; }
517
698
 
518
- .react-autoql-condition-list .react-autoql-condition-table tbody {
519
- display: block;
520
- overflow-y: scroll;
521
- max-height: 260px;
699
+ .react-autoql-query-validation-execute-btn {
700
+ height: 38px;
701
+ background: none;
702
+ border-radius: 4px;
703
+ margin-top: 24px;
522
704
  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; }
705
+ color: inherit;
706
+ cursor: pointer;
707
+ outline: none !important;
708
+ border-color: #e2e2e26e;
709
+ transition: all 0.2s ease; }
540
710
 
541
- #react-autoql-remove-filter-container {
542
- width: 35px; }
711
+ .react-autoql-query-validation-execute-btn:hover {
712
+ border-color: #28a8e0; }
543
713
 
544
- #react-autoql-condition-table-settings {
545
- width: 110px; }
714
+ .react-autoql-execute-query-icon {
715
+ font-size: 16px;
716
+ vertical-align: middle !important;
717
+ padding-right: 3px !important; }
718
+ .react-autoql-execute-query-icon span.react-autoql-icon svg {
719
+ height: 19px;
720
+ width: 19px;
721
+ margin-top: 3px;
722
+ margin-right: 4px;
723
+ vertical-align: top;
724
+ fill: var(--react-autoql-accent-color); }
546
725
 
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; }
726
+ .react-autoql-query-validation-select {
727
+ position: relative;
728
+ display: inline-block;
729
+ height: 2em;
730
+ background: none;
731
+ outline: none !important;
732
+ border: none;
733
+ letter-spacing: 0.05em;
734
+ font-family: inherit;
735
+ font-size: inherit;
736
+ margin: 0;
737
+ padding: 0;
738
+ border-radius: 0;
739
+ border-bottom: 1px dashed;
740
+ color: var(--react-autoql-accent-color); }
554
741
 
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; }
742
+ .react-autoql-query-validation-delete-button {
743
+ position: relative;
744
+ cursor: pointer;
745
+ margin-bottom: -2px; }
562
746
 
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; }
747
+ .react-autoql-chart-tooltip {
748
+ font-family: var(--react-autoql-font-family), sans-serif;
749
+ letter-spacing: 0.04em;
750
+ line-height: 22px;
751
+ font-size: 13px;
752
+ padding: 7px 15px;
753
+ transition: all 0.2s ease !important;
754
+ text-align: left !important;
755
+ opacity: 1 !important;
756
+ z-index: 99999 !important;
757
+ /* necessary to show up on top of rc drawer */ }
571
758
 
572
- .react-tiny-popover-container {
573
- background: var(--react-autoql-background-color-primary); }
759
+ .single-value-response {
760
+ color: inherit;
761
+ cursor: unset;
762
+ font-size: 20px; }
763
+ .single-value-response:hover {
764
+ color: inherit; }
574
765
 
575
- .autoql-condition-locking-menu-container .react-autosuggest__container {
576
- flex-grow: 1;
577
- display: inline;
578
- width: 90%;
579
- height: 100%; }
766
+ .single-value-response.with-drilldown:hover {
767
+ color: inherit;
768
+ text-decoration: underline;
769
+ font-weight: 600;
770
+ cursor: pointer; }
580
771
 
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;
772
+ .react-autoql-query-validation-container {
609
773
  width: 100%; }
610
774
 
611
- .autoql-condition-locking-menu-container .react-autosuggest__suggestion {
612
- color: var(--react-autoql-text-color-primary); }
775
+ .react-autoql-query-validation-description {
776
+ margin-bottom: 14px; }
613
777
 
614
- .autoql-condition-locking-menu-container input::-moz-placeholder {
615
- opacity: 0.5; }
778
+ .context-menu {
779
+ background: var(--react-autoql-background-color-primary);
780
+ /* height: 100px; */
781
+ width: 150px;
782
+ padding: 10px 0; }
616
783
 
617
- .autoql-condition-locking-menu-container input:-ms-input-placeholder {
618
- opacity: 0.5; }
784
+ .context-menu-list {
785
+ list-style-type: none;
786
+ width: 100%;
787
+ margin: 0;
788
+ padding: 0; }
619
789
 
620
- .autoql-condition-locking-menu-container input::placeholder {
621
- opacity: 0.5; }
790
+ .context-menu-list li {
791
+ color: var(--react-autoql-text-color-primary);
792
+ width: 100%;
793
+ height: 35px;
794
+ line-height: 35px;
795
+ padding: 0 20px;
796
+ cursor: pointer; }
622
797
 
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; }
798
+ .context-menu-list li:hover {
799
+ background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.05)); }
629
800
 
630
- .autoql-condition-locking-menu-container .react-autosuggest__suggestion {
801
+ .react-autoql-condition-link {
802
+ background: none !important;
803
+ border: none;
804
+ padding: 0 !important;
805
+ text-decoration: none;
806
+ white-space: nowrap;
631
807
  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; }
808
+ color: var(--react-autoql-accent-color) !important; }
809
+ .react-autoql-condition-link:hover {
810
+ opacity: 0.9; }
640
811
 
641
- .autoql-condition-locking-menu-container .react-autosuggest__section-title {
642
- padding: 10px 0 0 10px;
643
- font-size: 12px;
644
- color: #777; }
812
+ .react-autoql-condition-link-filtered {
813
+ text-decoration: none;
814
+ white-space: nowrap;
815
+ cursor: pointer;
816
+ color: var(--react-autoql-accent-color) !important; }
817
+ .react-autoql-condition-link-filtered .react-autoql-custom-icon {
818
+ font-size: 14px;
819
+ vertical-align: middle;
820
+ margin-top: -4px; }
821
+ .react-autoql-condition-link-filtered:hover {
822
+ opacity: 0.9;
823
+ border: none !important; }
824
+ .react-autoql-condition-link-filtered:hover .react-autoql-custom-icon {
825
+ opacity: 0.9; }
645
826
 
646
- #react-autoql-filter-setting-info-card {
647
- visibility: hidden;
827
+ .react-autoql-reverse-translation-container .react-autoql-reverse-translation {
648
828
  color: var(--react-autoql-text-color-primary);
649
829
  background-color: var(--react-autoql-background-color-secondary);
650
830
  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); }
831
+ padding: 5px 13px 5px 13px;
832
+ height: 100%; }
664
833
 
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); } }
755
-
756
- @-webkit-keyframes highlightOut {
757
- 100% {
758
- background-color: var(--react-autoql-background-color-primary);
759
- color: var(--react-autoql-text-color-primary); }
760
- 0% {
761
- background-color: var(--react-autoql-accent-color);
762
- color: white; } }
763
-
764
- @keyframes highlightOut {
765
- 100% {
766
- background-color: var(--react-autoql-background-color-primary);
767
- color: var(--react-autoql-text-color-primary); }
768
- 0% {
769
- background-color: var(--react-autoql-accent-color);
770
- color: white; } }
771
-
772
- @-webkit-keyframes highlightIn {
773
- 100% {
774
- background-color: var(--react-autoql-accent-color);
775
- color: white; }
776
- 0% {
777
- background-color: var(--react-autoql-background-color-primary);
778
- color: var(--react-autoql-text-color-primary); } }
779
-
780
- @keyframes highlightIn {
781
- 100% {
782
- background-color: var(--react-autoql-accent-color);
783
- color: white; }
784
- 0% {
785
- background-color: var(--react-autoql-background-color-primary);
786
- color: var(--react-autoql-text-color-primary); } }
834
+ .report-like-text-button {
835
+ background: none !important;
836
+ border: none;
837
+ padding: 0 !important;
838
+ color: #26a7df;
839
+ text-decoration: underline;
840
+ cursor: pointer; }
787
841
 
788
842
  .react-autoql-drawer {
789
843
  font-family: var(--react-autoql-font-family), sans-serif;
@@ -848,6 +902,8 @@ tbody::-webkit-scrollbar-thumb {
848
902
  font-weight: normal;
849
903
  float: none;
850
904
  opacity: 1; }
905
+ .react-autoql-drawer .react-autoql-drawer-header-btn.hidden {
906
+ display: none; }
851
907
  .react-autoql-drawer .react-autoql-drawer-header-btn.close span.react-autoql-icon svg {
852
908
  width: 27px;
853
909
  height: 27px; }
@@ -890,36 +946,6 @@ tbody::-webkit-scrollbar-thumb {
890
946
  width: calc(100% - 10px);
891
947
  font-size: 13px; }
892
948
 
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
949
  .react-autoql-drawer .react-autoql-drawer:focus {
924
950
  outline: none; }
925
951
 
@@ -1061,7 +1087,7 @@ tbody::-webkit-scrollbar-thumb {
1061
1087
  .react-autoql-drawer-tooltip {
1062
1088
  font-family: var(--react-autoql-font-family), sans-serif;
1063
1089
  letter-spacing: 0.04em;
1064
- line-height: 0.9em;
1090
+ line-height: 1.5em;
1065
1091
  padding: 7px 15px;
1066
1092
  transition: none;
1067
1093
  opacity: 1 !important;
@@ -1080,13 +1106,8 @@ tbody::-webkit-scrollbar-thumb {
1080
1106
  z-index: 99999 !important;
1081
1107
  /* necessary to show up on top of rc drawer */ }
1082
1108
 
1083
- .react-autoql-condition-lock-menu {
1084
- color: var(--react-autoql-text-color-primary);
1085
- background: var(--react-autoql-background-color-primary);
1086
- min-height: 300px; }
1087
-
1088
1109
  .react-tiny-popover-container {
1089
- z-index: 9999;
1110
+ z-index: 99999;
1090
1111
  border: 1px solid #ababab52;
1091
1112
  border-radius: 4px;
1092
1113
  box-shadow: 0px 0 8px rgba(0, 0, 0, 0.15);
@@ -1295,352 +1316,50 @@ tbody::-webkit-scrollbar-thumb {
1295
1316
  transform: scale(1); } }
1296
1317
 
1297
1318
  @keyframes scale-up-center {
1298
- 0% {
1299
- transform: scale(0); }
1300
- 100% {
1301
- transform: scale(1); } }
1302
-
1303
- @-webkit-keyframes fadeIn {
1304
- 0% {
1305
- opacity: 0; }
1306
- 100% {
1307
- opacity: 1; } }
1308
-
1309
- @keyframes fadeIn {
1310
- 0% {
1311
- opacity: 0; }
1312
- 100% {
1313
- opacity: 1; } }
1314
-
1315
- @-webkit-keyframes slideDown {
1316
- 0% {
1317
- transform: translateY(-100%); }
1318
- 100% {
1319
- transform: translateY(0%); } }
1320
-
1321
- @keyframes slideDown {
1322
- 0% {
1323
- transform: translateY(-100%); }
1324
- 100% {
1325
- transform: translateY(0%); } }
1326
-
1327
- @-webkit-keyframes snackbarFadeout {
1328
- from {
1329
- top: 60px;
1330
- opacity: 1; }
1331
- to {
1332
- top: 30px;
1333
- opacity: 0; } }
1334
-
1335
- @keyframes snackbarFadeout {
1336
- from {
1337
- top: 60px;
1338
- opacity: 1; }
1339
- to {
1340
- top: 30px;
1341
- opacity: 0; } }
1342
-
1343
- @import url("https://fonts.googleapis.com/icon?family=Material+Icons");
1344
- .react-autoql-response-content-container {
1345
- position: relative;
1346
- display: flex;
1347
- flex-direction: column;
1348
- justify-content: center;
1349
- align-items: center;
1350
- background-color: inherit;
1351
- font-size: 14px;
1352
- overflow: hidden;
1353
- max-height: 100%;
1354
- max-width: 100%;
1355
- width: 100%;
1356
- height: 100%;
1357
- color: var(--react-autoql-text-color-primary); }
1358
-
1359
- .react-autoql-response-content-container.table {
1360
- max-height: 100vh !important;
1361
- overflow-y: scroll;
1362
- scrollbar-width: none;
1363
- margin-bottom: 0 !important;
1364
- height: 100%;
1365
- width: 100%; }
1366
-
1367
- .react-autoql-response-content-container.table::-webkit-scrollbar {
1368
- width: 0;
1369
- height: 0; }
1370
-
1371
- .react-autoql-suggestion-btn {
1372
- padding: 6px 14px;
1373
- background: transparent;
1374
- font-family: inherit;
1375
- font-size: 12px;
1376
- margin-bottom: 5px;
1377
- outline: none !important;
1378
- cursor: pointer;
1379
- letter-spacing: 0.05em;
1380
- transition: all 0.1s ease;
1381
- border: 1px solid rgba(0, 0, 0, 0.15);
1382
- border-radius: 5px;
1383
- color: inherit; }
1384
-
1385
- .react-autoql-suggestion-btn:hover {
1386
- border-color: transparent;
1387
- color: white;
1388
- background: var(--react-autoql-accent-color); }
1389
-
1390
- .react-autoql-help-link-btn {
1391
- padding: 6px 14px;
1392
- background: transparent;
1393
- border-radius: 5px;
1394
- font-family: inherit;
1395
- font-size: 12px;
1396
- margin-top: 5px;
1397
- outline: none !important;
1398
- cursor: pointer;
1399
- letter-spacing: 0.05em;
1400
- transition: all 0.1s ease;
1401
- border-color: #e2e2e26e;
1402
- color: inherit; }
1403
-
1404
- .react-autoql-help-link-btn:hover {
1405
- opacity: 0.7; }
1406
-
1407
- .react-autoql-help-link-icon {
1408
- width: 15px;
1409
- height: 15px;
1410
- margin-bottom: -3px;
1411
- margin-right: 3px; }
1412
-
1413
- .react-autoql-suggestion-message {
1414
- height: 100%;
1415
- width: 100%;
1416
- word-break: break-word; }
1417
-
1418
- .react-autoql-suggestions-select {
1419
- position: relative;
1420
- display: inline-block;
1421
- height: 30px;
1422
- background: none;
1423
- outline: none !important;
1424
- border: 1px solid;
1425
- font-family: inherit;
1426
- letter-spacing: 0.05em;
1427
- color: #28a8e0;
1428
- cursor: pointer;
1429
- font-size: inherit; }
1430
-
1431
- .no-columns-error-message {
1432
- text-align: center;
1433
- padding: 20px;
1434
- font-size: 13px; }
1435
- .no-columns-error-message .warning-icon {
1436
- font-size: 22px;
1437
- display: block;
1438
- margin-bottom: -13px;
1439
- text-align: center; }
1440
- .no-columns-error-message .eye-icon {
1441
- vertical-align: bottom;
1442
- line-height: 18px; }
1443
-
1444
- /* query validation */
1445
- .react-autoql-query-validation-selector-container {
1446
- display: inline-block;
1447
- position: relative; }
1448
-
1449
- .react-autoql-select-popup-container.query-validation-select {
1450
- padding: 5px 0;
1451
- letter-spacing: 0.03em;
1452
- font-family: var(--react-autoql-font-family), sans-serif; }
1453
- .react-autoql-select-popup-container.query-validation-select .react-autoql-select-option {
1454
- height: unset;
1455
- font-size: 14px;
1456
- line-height: 24px;
1457
- padding: 0 15px; }
1458
- .react-autoql-select-popup-container.query-validation-select .react-autoql-select-option:last-of-type {
1459
- color: #d84830; }
1460
-
1461
- .react-autoql-query-validation-query {
1462
- text-align: center; }
1463
-
1464
- .react-autoql-query-validation-execute-btn {
1465
- height: 38px;
1466
- background: none;
1467
- border-radius: 4px;
1468
- margin-top: 24px;
1469
- width: 100%;
1470
- color: inherit;
1471
- cursor: pointer;
1472
- outline: none !important;
1473
- border-color: #e2e2e26e;
1474
- transition: all 0.2s ease; }
1475
-
1476
- .react-autoql-query-validation-execute-btn:hover {
1477
- border-color: #28a8e0; }
1478
-
1479
- .react-autoql-execute-query-icon {
1480
- font-size: 16px;
1481
- vertical-align: middle !important;
1482
- padding-right: 3px !important; }
1483
- .react-autoql-execute-query-icon span.react-autoql-icon svg {
1484
- height: 19px;
1485
- width: 19px;
1486
- margin-top: 3px;
1487
- margin-right: 4px;
1488
- vertical-align: top;
1489
- fill: var(--react-autoql-accent-color); }
1490
-
1491
- .react-autoql-query-validation-select {
1492
- position: relative;
1493
- display: inline-block;
1494
- height: 2em;
1495
- background: none;
1496
- outline: none !important;
1497
- border: none;
1498
- letter-spacing: 0.05em;
1499
- font-family: inherit;
1500
- font-size: inherit;
1501
- margin: 0;
1502
- padding: 0;
1503
- border-radius: 0;
1504
- border-bottom: 1px dashed;
1505
- color: var(--react-autoql-accent-color); }
1506
-
1507
- .react-autoql-query-validation-delete-button {
1508
- position: relative;
1509
- cursor: pointer;
1510
- margin-bottom: -2px; }
1511
-
1512
- .react-autoql-chart-tooltip {
1513
- font-family: var(--react-autoql-font-family), sans-serif;
1514
- letter-spacing: 0.04em;
1515
- line-height: 22px;
1516
- font-size: 13px;
1517
- padding: 7px 15px;
1518
- transition: all 0.2s ease !important;
1519
- text-align: left !important;
1520
- opacity: 1 !important;
1521
- z-index: 99999 !important;
1522
- /* necessary to show up on top of rc drawer */ }
1523
-
1524
- .single-value-response {
1525
- color: inherit;
1526
- cursor: unset;
1527
- font-size: 20px; }
1528
- .single-value-response:hover {
1529
- color: inherit; }
1530
-
1531
- .single-value-response.with-drilldown:hover {
1532
- color: inherit;
1533
- text-decoration: underline;
1534
- font-weight: 600;
1535
- cursor: pointer; }
1536
-
1537
- .react-autoql-query-validation-container {
1538
- width: 100%; }
1539
-
1540
- .react-autoql-query-validation-description {
1541
- margin-bottom: 14px; }
1542
-
1543
- .context-menu {
1544
- background: var(--react-autoql-background-color-primary);
1545
- /* height: 100px; */
1546
- width: 150px;
1547
- padding: 10px 0; }
1548
-
1549
- .context-menu-list {
1550
- list-style-type: none;
1551
- width: 100%;
1552
- margin: 0;
1553
- padding: 0; }
1554
-
1555
- .context-menu-list li {
1556
- color: var(--react-autoql-text-color-primary);
1557
- width: 100%;
1558
- height: 35px;
1559
- line-height: 35px;
1560
- padding: 0 20px;
1561
- cursor: pointer; }
1562
-
1563
- .context-menu-list li:hover {
1564
- background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.05)); }
1565
-
1566
- .react-autoql-condition-link {
1567
- background: none !important;
1568
- border: none;
1569
- padding: 0 !important;
1570
- text-decoration: none;
1571
- white-space: nowrap;
1572
- cursor: pointer;
1573
- color: var(--react-autoql-accent-color) !important; }
1574
- .react-autoql-condition-link:hover {
1575
- opacity: 0.9; }
1576
-
1577
- .react-autoql-condition-link-filtered {
1578
- text-decoration: none;
1579
- white-space: nowrap;
1580
- cursor: pointer;
1581
- color: var(--react-autoql-accent-color) !important; }
1582
- .react-autoql-condition-link-filtered .react-autoql-custom-icon {
1583
- font-size: 14px;
1584
- vertical-align: middle;
1585
- margin-top: -4px; }
1586
- .react-autoql-condition-link-filtered:hover {
1587
- opacity: 0.9;
1588
- border: none !important; }
1589
- .react-autoql-condition-link-filtered:hover .react-autoql-custom-icon {
1590
- opacity: 0.9; }
1319
+ 0% {
1320
+ transform: scale(0); }
1321
+ 100% {
1322
+ transform: scale(1); } }
1591
1323
 
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%; }
1324
+ @-webkit-keyframes fadeIn {
1325
+ 0% {
1326
+ opacity: 0; }
1327
+ 100% {
1328
+ opacity: 1; } }
1602
1329
 
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; }
1330
+ @keyframes fadeIn {
1331
+ 0% {
1332
+ opacity: 0; }
1333
+ 100% {
1334
+ opacity: 1; } }
1610
1335
 
1611
- .month-select .react-autoql-radio-btn {
1612
- width: 40px; }
1336
+ @-webkit-keyframes slideDown {
1337
+ 0% {
1338
+ transform: translateY(-100%); }
1339
+ 100% {
1340
+ transform: translateY(0%); } }
1613
1341
 
1614
- .year-select .react-autoql-radio-btn {
1615
- width: 67px;
1616
- height: 38px;
1617
- line-height: 32px; }
1342
+ @keyframes slideDown {
1343
+ 0% {
1344
+ transform: translateY(-100%); }
1345
+ 100% {
1346
+ transform: translateY(0%); } }
1618
1347
 
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; }
1348
+ @-webkit-keyframes snackbarFadeout {
1349
+ from {
1350
+ top: 60px;
1351
+ opacity: 1; }
1352
+ to {
1353
+ top: 30px;
1354
+ opacity: 0; } }
1355
+
1356
+ @keyframes snackbarFadeout {
1357
+ from {
1358
+ top: 60px;
1359
+ opacity: 1; }
1360
+ to {
1361
+ top: 30px;
1362
+ opacity: 0; } }
1644
1363
 
1645
1364
  .react-autoql-notifications-button-container {
1646
1365
  position: relative;
@@ -1675,104 +1394,6 @@ tbody::-webkit-scrollbar-thumb {
1675
1394
  left: 0.5em;
1676
1395
  top: -2px; }
1677
1396
 
1678
- .notification-list-loading-container {
1679
- text-align: center;
1680
- padding-top: 100px;
1681
- color: var(--react-autoql-text-color-primary);
1682
- height: 100%;
1683
- overflow: hidden;
1684
- background: var(--react-autoql-background-color-secondary); }
1685
-
1686
- .empty-notifications-message {
1687
- color: var(--react-autoql-text-color-primary);
1688
- text-align: center;
1689
- margin-top: 75px; }
1690
- .empty-notifications-message div {
1691
- opacity: 0.6; }
1692
- .empty-notifications-message .empty-notifications-title {
1693
- font-size: 16px;
1694
- font-weight: bold;
1695
- margin-bottom: 5px; }
1696
- .empty-notifications-message .empty-notifications-img {
1697
- width: 250px;
1698
- height: 250px; }
1699
-
1700
- .react-autoql-notification-list-container {
1701
- height: 100%;
1702
- padding: 20px;
1703
- overflow-y: auto;
1704
- background: var(--react-autoql-background-color-secondary); }
1705
-
1706
- .react-autoql-notification-dismiss-all {
1707
- text-align: right;
1708
- margin-bottom: 12px;
1709
- padding-right: 10px;
1710
- color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.4));
1711
- transition: color 0.1s ease; }
1712
- .react-autoql-notification-dismiss-all span {
1713
- opacity: 0.8;
1714
- cursor: pointer; }
1715
- .react-autoql-notification-dismiss-all span:hover {
1716
- opacity: 1; }
1717
-
1718
- .react-autoql-notification-display-name-input {
1719
- width: 100%; }
1720
-
1721
- .react-autoql-notification-message-input {
1722
- width: 100%; }
1723
-
1724
- .react-autoql-notification-list-item:nth-of-type(0) {
1725
- -webkit-animation-delay: 0s;
1726
- animation-delay: 0s; }
1727
-
1728
- .react-autoql-notification-list-item:nth-of-type(1) {
1729
- -webkit-animation-delay: 0.1s;
1730
- animation-delay: 0.1s; }
1731
-
1732
- .react-autoql-notification-list-item:nth-of-type(2) {
1733
- -webkit-animation-delay: 0.2s;
1734
- animation-delay: 0.2s; }
1735
-
1736
- .react-autoql-notification-list-item:nth-of-type(3) {
1737
- -webkit-animation-delay: 0.3s;
1738
- animation-delay: 0.3s; }
1739
-
1740
- .react-autoql-notification-list-item:nth-of-type(4) {
1741
- -webkit-animation-delay: 0.4s;
1742
- animation-delay: 0.4s; }
1743
-
1744
- .react-autoql-notification-list-item:nth-of-type(5) {
1745
- -webkit-animation-delay: 0.5s;
1746
- animation-delay: 0.5s; }
1747
-
1748
- .react-autoql-notification-list-item:nth-of-type(6) {
1749
- -webkit-animation-delay: 0.6s;
1750
- animation-delay: 0.6s; }
1751
-
1752
- .react-autoql-notification-list-item:nth-of-type(7) {
1753
- -webkit-animation-delay: 0.7s;
1754
- animation-delay: 0.7s; }
1755
-
1756
- .react-autoql-notification-list-item:nth-of-type(8) {
1757
- -webkit-animation-delay: 0.8s;
1758
- animation-delay: 0.8s; }
1759
-
1760
- .react-autoql-notification-list-item:nth-of-type(9) {
1761
- -webkit-animation-delay: 0.9s;
1762
- animation-delay: 0.9s; }
1763
-
1764
- .react-autoql-notification-list-item:nth-of-type(10) {
1765
- -webkit-animation-delay: 1s;
1766
- animation-delay: 1s; }
1767
-
1768
- @-webkit-keyframes slideIn {
1769
- 0% {
1770
- opacity: 0;
1771
- top: 500px; }
1772
- 100% {
1773
- opacity: 1;
1774
- top: 0; } }
1775
-
1776
1397
  .react-autoql-notification-list-item {
1777
1398
  display: flex;
1778
1399
  flex-direction: column;
@@ -1989,48 +1610,6 @@ tbody::-webkit-scrollbar-thumb {
1989
1610
  .react-autoql-notification-list-item .react-autoql-notification-display-name-container .react-autoql-notification-timestamp span.react-autoql-icon svg {
1990
1611
  margin-bottom: -1px; }
1991
1612
 
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
- .notification-rule-outer-container {
2002
- position: relative;
2003
- border: 1px solid transparent;
2004
- border-radius: 4px; }
2005
- .notification-rule-outer-container.outlined {
2006
- border-color: rgba(0, 0, 0, 0.15);
2007
- padding: 0 20px;
2008
- padding-bottom: 12px; }
2009
-
2010
- .notification-outer-all-any {
2011
- position: absolute;
2012
- left: 0;
2013
- top: 50%; }
2014
-
2015
- .notification-first-group-btn-container {
2016
- display: flex;
2017
- justify-content: space-between; }
2018
-
2019
- .data-alerts-container.read-only .react-autoql-notification-group-container {
2020
- border: none; }
2021
-
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
1613
  .react-autoql-notification-settings {
2035
1614
  background-color: var(--react-autoql-background-color-secondary);
2036
1615
  color: var(--react-autoql-text-color-primary);
@@ -2125,31 +1704,145 @@ tbody::-webkit-scrollbar-thumb {
2125
1704
  align-items: center;
2126
1705
  margin-top: -25px; }
2127
1706
 
2128
- .notification-modal-content .react-autoql-step-content p {
2129
- margin-bottom: 0.5em;
2130
- margin-top: 0.5em;
2131
- padding-left: 8px; }
1707
+ .notification-rule-add-btn-outer,
1708
+ .notification-rule-validate-btn-outer {
1709
+ text-align: center;
1710
+ border-style: dashed !important;
1711
+ height: 38px;
1712
+ line-height: 25px;
1713
+ margin: 0 !important;
1714
+ overflow: hidden; }
1715
+
1716
+ .notification-rule-outer-container {
1717
+ position: relative;
1718
+ border: 1px solid transparent;
1719
+ border-radius: 4px; }
1720
+ .notification-rule-outer-container.outlined {
1721
+ border-color: rgba(0, 0, 0, 0.15);
1722
+ padding: 0 20px;
1723
+ padding-bottom: 12px; }
1724
+
1725
+ .notification-outer-all-any {
1726
+ position: absolute;
1727
+ left: 0;
1728
+ top: 50%; }
1729
+
1730
+ .notification-first-group-btn-container {
1731
+ display: flex;
1732
+ justify-content: space-between; }
1733
+
1734
+ .data-alerts-container.read-only .react-autoql-notification-group-container {
1735
+ border: none; }
1736
+
1737
+ .notification-rule-outer-container {
1738
+ position: relative;
1739
+ border: 1px solid transparent;
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-list-loading-container {
1750
+ text-align: center;
1751
+ padding-top: 100px;
1752
+ color: var(--react-autoql-text-color-primary);
1753
+ height: 100%;
1754
+ overflow: hidden;
1755
+ background: var(--react-autoql-background-color-secondary); }
1756
+
1757
+ .empty-notifications-message {
1758
+ color: var(--react-autoql-text-color-primary);
1759
+ text-align: center;
1760
+ margin-top: 75px; }
1761
+ .empty-notifications-message div {
1762
+ opacity: 0.6; }
1763
+ .empty-notifications-message .empty-notifications-title {
1764
+ font-size: 16px;
1765
+ font-weight: bold;
1766
+ margin-bottom: 5px; }
1767
+ .empty-notifications-message .empty-notifications-img {
1768
+ width: 250px;
1769
+ height: 250px; }
1770
+
1771
+ .react-autoql-notification-list-container {
1772
+ height: 100%;
1773
+ padding: 20px;
1774
+ overflow-y: auto;
1775
+ background: var(--react-autoql-background-color-secondary); }
2132
1776
 
2133
- .notification-modal-content .step-btn-container {
1777
+ .react-autoql-notification-dismiss-all {
2134
1778
  text-align: right;
2135
- display: flex;
2136
- min-height: 50px; }
1779
+ margin-bottom: 12px;
1780
+ padding-right: 10px;
1781
+ color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.4));
1782
+ transition: color 0.1s ease; }
1783
+ .react-autoql-notification-dismiss-all span {
1784
+ opacity: 0.8;
1785
+ cursor: pointer; }
1786
+ .react-autoql-notification-dismiss-all span:hover {
1787
+ opacity: 1; }
2137
1788
 
2138
- .expression-valid-checkmark.react-autoql-icon svg {
2139
- color: var(--react-autoql-success-color); }
1789
+ .react-autoql-notification-display-name-input {
1790
+ width: 100%; }
2140
1791
 
2141
- .expression-invalid-message-container {
2142
- max-width: 75%;
2143
- float: left;
2144
- text-align: left !important;
2145
- display: flex;
2146
- flex-direction: row;
2147
- align-items: left;
2148
- justify-content: left; }
1792
+ .react-autoql-notification-message-input {
1793
+ width: 100%; }
2149
1794
 
2150
- .expression-invalid-message {
2151
- color: var(--react-autoql-danger-color);
2152
- display: 'inline-block'; }
1795
+ .react-autoql-notification-list-item:nth-of-type(0) {
1796
+ -webkit-animation-delay: 0s;
1797
+ animation-delay: 0s; }
1798
+
1799
+ .react-autoql-notification-list-item:nth-of-type(1) {
1800
+ -webkit-animation-delay: 0.1s;
1801
+ animation-delay: 0.1s; }
1802
+
1803
+ .react-autoql-notification-list-item:nth-of-type(2) {
1804
+ -webkit-animation-delay: 0.2s;
1805
+ animation-delay: 0.2s; }
1806
+
1807
+ .react-autoql-notification-list-item:nth-of-type(3) {
1808
+ -webkit-animation-delay: 0.3s;
1809
+ animation-delay: 0.3s; }
1810
+
1811
+ .react-autoql-notification-list-item:nth-of-type(4) {
1812
+ -webkit-animation-delay: 0.4s;
1813
+ animation-delay: 0.4s; }
1814
+
1815
+ .react-autoql-notification-list-item:nth-of-type(5) {
1816
+ -webkit-animation-delay: 0.5s;
1817
+ animation-delay: 0.5s; }
1818
+
1819
+ .react-autoql-notification-list-item:nth-of-type(6) {
1820
+ -webkit-animation-delay: 0.6s;
1821
+ animation-delay: 0.6s; }
1822
+
1823
+ .react-autoql-notification-list-item:nth-of-type(7) {
1824
+ -webkit-animation-delay: 0.7s;
1825
+ animation-delay: 0.7s; }
1826
+
1827
+ .react-autoql-notification-list-item:nth-of-type(8) {
1828
+ -webkit-animation-delay: 0.8s;
1829
+ animation-delay: 0.8s; }
1830
+
1831
+ .react-autoql-notification-list-item:nth-of-type(9) {
1832
+ -webkit-animation-delay: 0.9s;
1833
+ animation-delay: 0.9s; }
1834
+
1835
+ .react-autoql-notification-list-item:nth-of-type(10) {
1836
+ -webkit-animation-delay: 1s;
1837
+ animation-delay: 1s; }
1838
+
1839
+ @-webkit-keyframes slideIn {
1840
+ 0% {
1841
+ opacity: 0;
1842
+ top: 500px; }
1843
+ 100% {
1844
+ opacity: 1;
1845
+ top: 0; } }
2153
1846
 
2154
1847
  .react-autoql-step-container a {
2155
1848
  color: var(--react-autoql-accent-color, #26a7df); }
@@ -2178,6 +1871,32 @@ tbody::-webkit-scrollbar-thumb {
2178
1871
  display: inline-block;
2179
1872
  width: 300px; }
2180
1873
 
1874
+ .notification-modal-content .react-autoql-step-content p {
1875
+ margin-bottom: 0.5em;
1876
+ margin-top: 0.5em;
1877
+ padding-left: 8px; }
1878
+
1879
+ .notification-modal-content .step-btn-container {
1880
+ text-align: right;
1881
+ display: flex;
1882
+ min-height: 50px; }
1883
+
1884
+ .expression-valid-checkmark.react-autoql-icon svg {
1885
+ color: var(--react-autoql-success-color); }
1886
+
1887
+ .expression-invalid-message-container {
1888
+ max-width: 75%;
1889
+ float: left;
1890
+ text-align: left !important;
1891
+ display: flex;
1892
+ flex-direction: row;
1893
+ align-items: left;
1894
+ justify-content: left; }
1895
+
1896
+ .expression-invalid-message {
1897
+ color: var(--react-autoql-danger-color);
1898
+ display: 'inline-block'; }
1899
+
2181
1900
  .react-autoql-dashboard .react-autoql-dashboard-tile {
2182
1901
  background: var(--react-autoql-background-color-primary, #fff);
2183
1902
  color: var(--react-autoql-text-color-primary, #404040);
@@ -2198,13 +1917,6 @@ tbody::-webkit-scrollbar-thumb {
2198
1917
  flex-direction: column;
2199
1918
  align-items: center; }
2200
1919
 
2201
- .dashboard-data-limit-warning-icon {
2202
- color: var(--react-autoql-warning-color) !important;
2203
- position: absolute !important;
2204
- bottom: 40px;
2205
- right: 16px;
2206
- font-size: 20px; }
2207
-
2208
1920
  .react-autoql-dashboard-tile-drag-handle {
2209
1921
  transition: opacity 0.3s ease;
2210
1922
  position: absolute;
@@ -2704,13 +2416,146 @@ tbody::-webkit-scrollbar-thumb {
2704
2416
  .react-autoql-btn.primary:hover {
2705
2417
  opacity: 0.8; }
2706
2418
 
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; }
2419
+ .react-autoql-btn.danger {
2420
+ color: var(--react-autoql-danger-color, #ca0b00);
2421
+ border: 1px solid var(--react-autoql-danger-color, #ca0b00);
2422
+ background: inherit; }
2423
+ .react-autoql-btn.danger:hover {
2424
+ background-color: var(--react-autoql-danger-color, #ca0b00);
2425
+ color: #fff; }
2426
+
2427
+ .content {
2428
+ margin: 2rem; }
2429
+
2430
+ .react-autoql-checkbox-container {
2431
+ display: inline-block;
2432
+ vertical-align: middle; }
2433
+
2434
+ .react-autoql-checkbox {
2435
+ display: flex;
2436
+ align-items: center;
2437
+ position: relative;
2438
+ cursor: pointer; }
2439
+ .react-autoql-checkbox .react-autoql-checkbox--switch__input:checked,
2440
+ .react-autoql-checkbox .react-autoql-checkbox__input:checked {
2441
+ border-color: var(--react-autoql-accent-color, #26a7df);
2442
+ background: var(--react-autoql-accent-color, #26a7df); }
2443
+
2444
+ .react-autoql-checkbox__label {
2445
+ flex-shrink: 0;
2446
+ padding: 0.5rem 1rem;
2447
+ color: #fff;
2448
+ cursor: pointer; }
2449
+
2450
+ .react-autoql-checkbox__input {
2451
+ position: relative;
2452
+ flex-shrink: 0;
2453
+ width: 20px;
2454
+ height: 20px;
2455
+ appearance: none;
2456
+ -webkit-appearance: none;
2457
+ -moz-appearance: none;
2458
+ outline: none;
2459
+ background: transparent;
2460
+ border: 1px solid;
2461
+ border-color: var(--react-autoql-accent-color, #26a7df);
2462
+ border-radius: 2px;
2463
+ cursor: pointer; }
2464
+
2465
+ .react-autoql-checkbox__input::before {
2466
+ content: ' ';
2467
+ position: absolute;
2468
+ top: 50%;
2469
+ right: 50%;
2470
+ bottom: 50%;
2471
+ left: 50%;
2472
+ transition: all 0.2s;
2473
+ background: var(--react-autoql-accent-color, #26a7df); }
2474
+
2475
+ .react-autoql-checkbox-tick {
2476
+ position: absolute;
2477
+ color: white;
2478
+ left: 3px;
2479
+ line-height: 20px;
2480
+ pointer-events: none; }
2481
+
2482
+ .react-autoql-checkbox--switch__input::before {
2483
+ box-shadow: 0 0 2px 1px #00000030; }
2484
+
2485
+ .react-autoql-checkbox__input:checked::before,
2486
+ .react-autoql-checkbox__input:indeterminate::before {
2487
+ top: 0;
2488
+ right: 0;
2489
+ bottom: 0;
2490
+ left: 0; }
2491
+
2492
+ .react-autoql-checkbox__input:indeterminate::before {
2493
+ top: 7px;
2494
+ bottom: 7px; }
2495
+
2496
+ .react-autoql-checkbox__input:disabled {
2497
+ border-color: #5a5358;
2498
+ cursor: default; }
2499
+
2500
+ .react-autoql-checkbox__input:disabled::before {
2501
+ background-color: #5a5358; }
2502
+
2503
+ .react-autoql-checkbox__input:disabled + .react-autoql-checkbox__label {
2504
+ color: gray;
2505
+ cursor: default; }
2506
+
2507
+ .react-autoql-checkbox--has-error__input {
2508
+ border-color: red;
2509
+ background-color: rgba(255, 0, 0, 0.2); }
2510
+
2511
+ .react-autoql-checkbox--has-error__input::before {
2512
+ background-color: red; }
2513
+
2514
+ .react-autoql-checkbox--switch__label::after {
2515
+ content: 'off';
2516
+ margin-left: 0.25rem; }
2517
+
2518
+ .react-autoql-checkbox--switch__input {
2519
+ width: 36px;
2520
+ height: 20px;
2521
+ border-radius: 16px;
2522
+ background: var(--react-autoql-background-color-tertiary);
2523
+ border: 1px solid var(--react-autoql-background-color-tertiary); }
2524
+
2525
+ .react-autoql-checkbox--switch__input::before {
2526
+ top: 2px;
2527
+ right: 18px;
2528
+ bottom: 2px;
2529
+ left: 2px;
2530
+ border-radius: 50%;
2531
+ background: #fff; }
2532
+
2533
+ .react-autoql-checkbox--switch__input:checked
2534
+ + .react-autoql-checkbox--switch__label::after {
2535
+ content: 'on'; }
2536
+
2537
+ .react-autoql-checkbox--switch__input:checked::before {
2538
+ right: 2px;
2539
+ left: 18px;
2540
+ top: 2px;
2541
+ bottom: 2px; }
2542
+
2543
+ .react-autoql-checkbox-label {
2544
+ padding-left: 6px;
2545
+ line-height: 100%; }
2546
+
2547
+ .react-autoql-modal-container
2548
+ .react-autoql-checkbox__input:not(.react-autoql-checkbox--switch__input),
2549
+ .react-autoql-drawer
2550
+ .react-autoql-checkbox__input:not(.react-autoql-checkbox--switch__input) {
2551
+ border-color: var(--react-autoql-accent-color); }
2552
+
2553
+ .react-autoql-modal-container
2554
+ .react-autoql-checkbox__input::before:not(.react-autoql-checkbox--switch__input),
2555
+ .react-autoql-drawer
2556
+ .react-autoql-checkbox__input::before:not(.react-autoql-checkbox--switch__input) {
2557
+ background: var(--react-autoql-accent-color); }
2558
+
2714
2559
 
2715
2560
  .ReactModal__Overlay {
2716
2561
  background-color: transparent !important;
@@ -2792,42 +2637,6 @@ tbody::-webkit-scrollbar-thumb {
2792
2637
  .react-autoql-modal-close-btn:hover {
2793
2638
  opacity: 1 !important; }
2794
2639
 
2795
-
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); }
2808
-
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; }
2830
-
2831
2640
  .react-autoql-cascader {
2832
2641
  position: relative;
2833
2642
  white-space: nowrap;
@@ -2845,214 +2654,42 @@ tbody::-webkit-scrollbar-thumb {
2845
2654
  .react-autoql-cascader .options-container.hidden {
2846
2655
  max-width: 0; }
2847
2656
  .react-autoql-cascader .options-container.hidden span {
2848
- white-space: nowrap; }
2849
- .react-autoql-cascader .options-container.hidden .option {
2850
- opacity: 0;
2851
- pointer-events: none; }
2852
- .react-autoql-cascader .options-container .options-title {
2853
- padding: 4px;
2854
- padding-left: 10px;
2855
- font-weight: 600; }
2856
- .react-autoql-cascader .options-container .cascader-back-arrow {
2857
- position: absolute;
2858
- cursor: pointer;
2859
- top: 15px;
2860
- left: 0; }
2861
- .react-autoql-cascader .options-container .cascader-back-arrow:hover {
2862
- opacity: 0.8; }
2863
- .react-autoql-cascader .options-container .option {
2864
- cursor: pointer;
2865
- padding: 4px;
2866
- display: flex;
2867
- justify-content: space-between;
2868
- border-radius: 2px;
2869
- padding-left: 10px; }
2870
- .react-autoql-cascader .options-container .option .option-arrow {
2871
- opacity: 0.7; }
2872
- .react-autoql-cascader .options-container .option .option-execute-icon {
2873
- opacity: 0;
2874
- color: #fff;
2875
- font-size: 16px;
2876
- vertical-align: middle; }
2877
- .react-autoql-cascader .options-container .option:hover, .react-autoql-cascader .options-container .option.active {
2878
- background-color: var(--react-autoql-accent-color, #26a7df);
2879
- color: #fff; }
2880
- .react-autoql-cascader .options-container .option:hover .option-execute-icon, .react-autoql-cascader .options-container .option.active .option-execute-icon {
2881
- opacity: 1; }
2882
- .react-autoql-cascader .options-container:not(:last-child) {
2883
- border-right: 1px solid #d3d3d352; }
2884
-
2885
- .query-tips-page-container {
2886
- height: 100%;
2887
- padding: 10px; }
2888
- .query-tips-page-container .chat-bar-input-icon {
2889
- top: 20px;
2890
- left: 26px; }
2891
- .query-tips-page-container .react-autoql-chatbar-input.left-padding {
2892
- padding-left: 46px; }
2893
-
2894
- .query-tips-result-container {
2895
- color: var(--react-autoql-text-color-primary);
2896
- padding: 0px 20px;
2897
- text-align: center;
2898
- max-width: 550px;
2899
- margin: 0 auto; }
2900
- .query-tips-result-container .query-tip-list-container {
2901
- margin-bottom: 20px; }
2902
- .query-tips-result-container .animated-item {
2903
- -webkit-animation: fadeIn 0.3s linear;
2904
- animation: fadeIn 0.3s linear;
2905
- -webkit-animation-fill-mode: both;
2906
- animation-fill-mode: both; }
2907
- .query-tips-result-container .query-tip-item {
2908
- position: relative;
2909
- padding: 13px;
2910
- border-top: 1px solid rgba(0, 0, 0, 0.04);
2911
- cursor: pointer; }
2912
- .query-tips-result-container .query-tip-item:first-child {
2913
- border-top: none; }
2914
- .query-tips-result-container .query-tip-item .execute-btn {
2915
- position: absolute;
2916
- right: 10px;
2917
- top: 4px;
2918
- font-size: 20px;
2919
- visibility: hidden;
2920
- opacity: 0; }
2921
- .query-tips-result-container .query-tip-item:hover {
2922
- font-weight: bold;
2923
- color: var(--react-autoql-accent-color); }
2924
- .query-tips-result-container .query-tip-item:hover .execute-btn {
2925
- visibility: visible;
2926
- opacity: 1; }
2927
- .query-tips-result-container .query-tips-result-placeholder {
2928
- margin-top: 50px;
2929
- opacity: 0.6; }
2930
-
2931
- .chat-bar-loading-spinner {
2932
- position: absolute;
2933
- right: 20px;
2934
- top: 22px; }
2935
-
2936
- #react-paginate {
2937
- position: relative;
2938
- background: transparent;
2939
- padding: 8px; }
2940
- #react-paginate ul {
2941
- display: inline-block;
2942
- padding-left: 0;
2943
- margin-bottom: 0; }
2944
- #react-paginate li {
2945
- display: inline-block;
2946
- color: var(--react-autoql-text-color-primary);
2947
- cursor: pointer;
2948
- margin-right: 3px;
2949
- border-radius: 5px;
2950
- margin-bottom: 0;
2951
- -webkit-user-select: none;
2952
- -moz-user-select: none;
2953
- -ms-user-select: none;
2954
- user-select: none; }
2955
- #react-paginate li:hover {
2956
- opacity: 0.7;
2957
- border-radius: 50%; }
2958
- #react-paginate li a {
2959
- display: inline-block;
2960
- color: var(--react-autoql-text-color-primary);
2961
- outline: none;
2962
- width: 28px;
2963
- height: 28px;
2964
- line-height: 28px; }
2965
- #react-paginate li.selected {
2966
- background: var(--react-autoql-accent-color);
2967
- border-radius: 50%;
2968
- outline: none; }
2969
- #react-paginate li.selected a {
2970
- color: var(--react-autoql-accent-text-color); }
2971
- #react-paginate .pagination-next.disabled,
2972
- #react-paginate .pagination-previous.disabled {
2973
- opacity: 0.5;
2974
- pointer-events: none; }
2975
- #react-paginate .pagination-previous,
2976
- #react-paginate .pagination-next {
2977
- position: absolute;
2978
- font-size: 18px; }
2979
- #react-paginate .pagination-previous a,
2980
- #react-paginate .pagination-next a {
2981
- color: var(--react-autoql-text-color-primary); }
2982
- #react-paginate .pagination-previous {
2983
- left: 20px; }
2984
- #react-paginate .pagination-next {
2985
- right: 20px; }
2986
-
2987
- .animated-item:nth-child(1) {
2988
- -webkit-animation-delay: 0.08s;
2989
- animation-delay: 0.08s; }
2990
-
2991
- .animated-item:nth-child(2) {
2992
- -webkit-animation-delay: 0.16s;
2993
- animation-delay: 0.16s; }
2994
-
2995
- .animated-item:nth-child(3) {
2996
- -webkit-animation-delay: 0.24s;
2997
- animation-delay: 0.24s; }
2998
-
2999
- .animated-item:nth-child(4) {
3000
- -webkit-animation-delay: 0.32s;
3001
- animation-delay: 0.32s; }
3002
-
3003
- .animated-item:nth-child(5) {
3004
- -webkit-animation-delay: 0.4s;
3005
- animation-delay: 0.4s; }
3006
-
3007
- .animated-item:nth-child(6) {
3008
- -webkit-animation-delay: 0.48s;
3009
- animation-delay: 0.48s; }
3010
-
3011
- .animated-item:nth-child(7) {
3012
- -webkit-animation-delay: 0.56s;
3013
- animation-delay: 0.56s; }
3014
-
3015
- .animated-item:nth-child(8) {
3016
- -webkit-animation-delay: 0.64s;
3017
- animation-delay: 0.64s; }
3018
-
3019
- .animated-item:nth-child(9) {
3020
- -webkit-animation-delay: 0.72s;
3021
- animation-delay: 0.72s; }
3022
-
3023
- .animated-item:nth-child(10) {
3024
- -webkit-animation-delay: 0.8s;
3025
- animation-delay: 0.8s; }
3026
-
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; } }
2657
+ white-space: nowrap; }
2658
+ .react-autoql-cascader .options-container.hidden .option {
2659
+ opacity: 0;
2660
+ pointer-events: none; }
2661
+ .react-autoql-cascader .options-container .options-title {
2662
+ padding: 4px;
2663
+ padding-left: 10px;
2664
+ font-weight: 600; }
2665
+ .react-autoql-cascader .options-container .cascader-back-arrow {
2666
+ position: absolute;
2667
+ cursor: pointer;
2668
+ top: 15px;
2669
+ left: 0; }
2670
+ .react-autoql-cascader .options-container .cascader-back-arrow:hover {
2671
+ opacity: 0.8; }
2672
+ .react-autoql-cascader .options-container .option {
2673
+ cursor: pointer;
2674
+ padding: 4px;
2675
+ display: flex;
2676
+ justify-content: space-between;
2677
+ border-radius: 2px;
2678
+ padding-left: 10px; }
2679
+ .react-autoql-cascader .options-container .option .option-arrow {
2680
+ opacity: 0.7; }
2681
+ .react-autoql-cascader .options-container .option .option-execute-icon {
2682
+ opacity: 0;
2683
+ color: #fff;
2684
+ font-size: 16px;
2685
+ vertical-align: middle; }
2686
+ .react-autoql-cascader .options-container .option:hover, .react-autoql-cascader .options-container .option.active {
2687
+ background-color: var(--react-autoql-accent-color, #26a7df);
2688
+ color: #fff; }
2689
+ .react-autoql-cascader .options-container .option:hover .option-execute-icon, .react-autoql-cascader .options-container .option.active .option-execute-icon {
2690
+ opacity: 1; }
2691
+ .react-autoql-cascader .options-container:not(:last-child) {
2692
+ border-right: 1px solid #d3d3d352; }
3056
2693
 
3057
2694
  .chat-single-message-container {
3058
2695
  transition: background-color 0.2s ease;
@@ -3172,13 +2809,6 @@ tbody::-webkit-scrollbar-thumb {
3172
2809
  padding: 5px 10px;
3173
2810
  outline: none !important; }
3174
2811
 
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
2812
  .condition-info-icon-left-align {
3183
2813
  color: var(--react-autoql-accent-color) !important;
3184
2814
  position: absolute !important;
@@ -3235,47 +2865,253 @@ tbody::-webkit-scrollbar-thumb {
3235
2865
  fill: currentColor;
3236
2866
  enable-background: new; }
3237
2867
 
3238
- .hm5 {
3239
- fill: currentColor; }
2868
+ .hm5 {
2869
+ fill: currentColor; }
2870
+
2871
+ .hm6 {
2872
+ fill: currentColor; }
2873
+
2874
+ /* animations */
2875
+ @-webkit-keyframes scale-up-br {
2876
+ 0% {
2877
+ transform: scale(0.5);
2878
+ transform-origin: 100% 100%; }
2879
+ 100% {
2880
+ transform: scale(1);
2881
+ transform-origin: 100% 100%; } }
2882
+ @keyframes scale-up-br {
2883
+ 0% {
2884
+ transform: scale(0.5);
2885
+ transform-origin: 100% 100%; }
2886
+ 100% {
2887
+ transform: scale(1);
2888
+ transform-origin: 100% 100%; } }
2889
+
2890
+ @-webkit-keyframes scale-up-bl {
2891
+ 0% {
2892
+ transform: scale(0.5);
2893
+ transform-origin: 0% 100%; }
2894
+ 100% {
2895
+ transform: scale(1);
2896
+ transform-origin: 0% 100%; } }
2897
+
2898
+ @keyframes scale-up-bl {
2899
+ 0% {
2900
+ transform: scale(0.5);
2901
+ transform-origin: 0% 100%; }
2902
+ 100% {
2903
+ transform: scale(1);
2904
+ transform-origin: 0% 100%; } }
2905
+
2906
+ .autoql-options-toolbar {
2907
+ position: absolute;
2908
+ background: inherit;
2909
+ padding: 5px;
2910
+ border-radius: 6px;
2911
+ line-height: 28px;
2912
+ background: var(--react-autoql-background-color-primary);
2913
+ border: 1px solid var(--react-autoql-border-color); }
2914
+ .autoql-options-toolbar.vertical .react-autoql-toolbar-btn {
2915
+ display: block; }
2916
+ .autoql-options-toolbar .react-autoql-toolbar-btn {
2917
+ color: var(--react-autoql-text-color-primary); }
2918
+
2919
+ .copy-sql-modal-content {
2920
+ position: relative;
2921
+ height: 60vh; }
2922
+ .copy-sql-modal-content .copy-sql-formatted-text {
2923
+ height: 100%;
2924
+ width: 100%;
2925
+ padding: 10px;
2926
+ resize: none;
2927
+ background: var(--react-autoql-background-color-secondary); }
2928
+ .copy-sql-modal-content .copy-sql-btn {
2929
+ color: var(--react-autoql-text-color);
2930
+ background-color: var(--react-autoql-background-color-primary);
2931
+ position: absolute;
2932
+ top: 3px;
2933
+ right: 0;
2934
+ opacity: 0;
2935
+ transition: opacity 0.3s ease; }
2936
+ .copy-sql-modal-content .sql-copied {
2937
+ color: var(--react-autoql-success-color) !important; }
2938
+ .copy-sql-modal-content:hover .copy-sql-btn {
2939
+ opacity: 1; }
2940
+
2941
+ .query-tips-page-container {
2942
+ height: 100%;
2943
+ padding: 10px; }
2944
+ .query-tips-page-container .chat-bar-input-icon {
2945
+ top: 20px;
2946
+ left: 26px; }
2947
+ .query-tips-page-container .react-autoql-chatbar-input.left-padding {
2948
+ padding-left: 46px; }
2949
+
2950
+ .query-tips-result-container {
2951
+ color: var(--react-autoql-text-color-primary);
2952
+ padding: 0px 20px;
2953
+ text-align: center;
2954
+ max-width: 550px;
2955
+ margin: 0 auto; }
2956
+ .query-tips-result-container .query-tip-list-container {
2957
+ margin-bottom: 20px; }
2958
+ .query-tips-result-container .animated-item {
2959
+ -webkit-animation: fadeIn 0.3s linear;
2960
+ animation: fadeIn 0.3s linear;
2961
+ -webkit-animation-fill-mode: both;
2962
+ animation-fill-mode: both; }
2963
+ .query-tips-result-container .query-tip-item {
2964
+ position: relative;
2965
+ padding: 13px;
2966
+ border-top: 1px solid rgba(0, 0, 0, 0.04);
2967
+ cursor: pointer; }
2968
+ .query-tips-result-container .query-tip-item:first-child {
2969
+ border-top: none; }
2970
+ .query-tips-result-container .query-tip-item .execute-btn {
2971
+ position: absolute;
2972
+ right: 10px;
2973
+ top: 4px;
2974
+ font-size: 20px;
2975
+ visibility: hidden;
2976
+ opacity: 0; }
2977
+ .query-tips-result-container .query-tip-item:hover {
2978
+ font-weight: bold;
2979
+ color: var(--react-autoql-accent-color); }
2980
+ .query-tips-result-container .query-tip-item:hover .execute-btn {
2981
+ visibility: visible;
2982
+ opacity: 1; }
2983
+ .query-tips-result-container .query-tips-result-placeholder {
2984
+ margin-top: 50px;
2985
+ opacity: 0.6; }
2986
+
2987
+ .chat-bar-loading-spinner {
2988
+ position: absolute;
2989
+ right: 20px;
2990
+ top: 22px; }
2991
+
2992
+ #react-paginate {
2993
+ position: relative;
2994
+ background: transparent;
2995
+ padding: 8px; }
2996
+ #react-paginate ul {
2997
+ display: inline-block;
2998
+ padding-left: 0;
2999
+ margin-bottom: 0; }
3000
+ #react-paginate li {
3001
+ display: inline-block;
3002
+ color: var(--react-autoql-text-color-primary);
3003
+ cursor: pointer;
3004
+ margin-right: 3px;
3005
+ border-radius: 5px;
3006
+ margin-bottom: 0;
3007
+ -webkit-user-select: none;
3008
+ -moz-user-select: none;
3009
+ -ms-user-select: none;
3010
+ user-select: none; }
3011
+ #react-paginate li:hover {
3012
+ opacity: 0.7;
3013
+ border-radius: 50%; }
3014
+ #react-paginate li a {
3015
+ display: inline-block;
3016
+ color: var(--react-autoql-text-color-primary);
3017
+ outline: none;
3018
+ width: 28px;
3019
+ height: 28px;
3020
+ line-height: 28px; }
3021
+ #react-paginate li.selected {
3022
+ background: var(--react-autoql-accent-color);
3023
+ border-radius: 50%;
3024
+ outline: none; }
3025
+ #react-paginate li.selected a {
3026
+ color: var(--react-autoql-accent-text-color); }
3027
+ #react-paginate .pagination-next.disabled,
3028
+ #react-paginate .pagination-previous.disabled {
3029
+ opacity: 0.5;
3030
+ pointer-events: none; }
3031
+ #react-paginate .pagination-previous,
3032
+ #react-paginate .pagination-next {
3033
+ position: absolute;
3034
+ font-size: 18px; }
3035
+ #react-paginate .pagination-previous a,
3036
+ #react-paginate .pagination-next a {
3037
+ color: var(--react-autoql-text-color-primary); }
3038
+ #react-paginate .pagination-previous {
3039
+ left: 20px; }
3040
+ #react-paginate .pagination-next {
3041
+ right: 20px; }
3042
+
3043
+ .animated-item:nth-child(1) {
3044
+ -webkit-animation-delay: 0.08s;
3045
+ animation-delay: 0.08s; }
3046
+
3047
+ .animated-item:nth-child(2) {
3048
+ -webkit-animation-delay: 0.16s;
3049
+ animation-delay: 0.16s; }
3050
+
3051
+ .animated-item:nth-child(3) {
3052
+ -webkit-animation-delay: 0.24s;
3053
+ animation-delay: 0.24s; }
3054
+
3055
+ .animated-item:nth-child(4) {
3056
+ -webkit-animation-delay: 0.32s;
3057
+ animation-delay: 0.32s; }
3058
+
3059
+ .animated-item:nth-child(5) {
3060
+ -webkit-animation-delay: 0.4s;
3061
+ animation-delay: 0.4s; }
3062
+
3063
+ .animated-item:nth-child(6) {
3064
+ -webkit-animation-delay: 0.48s;
3065
+ animation-delay: 0.48s; }
3066
+
3067
+ .animated-item:nth-child(7) {
3068
+ -webkit-animation-delay: 0.56s;
3069
+ animation-delay: 0.56s; }
3070
+
3071
+ .animated-item:nth-child(8) {
3072
+ -webkit-animation-delay: 0.64s;
3073
+ animation-delay: 0.64s; }
3074
+
3075
+ .animated-item:nth-child(9) {
3076
+ -webkit-animation-delay: 0.72s;
3077
+ animation-delay: 0.72s; }
3078
+
3079
+ .animated-item:nth-child(10) {
3080
+ -webkit-animation-delay: 0.8s;
3081
+ animation-delay: 0.8s; }
3082
+
3083
+ .animated-item:nth-child(11) {
3084
+ -webkit-animation-delay: 0.88s;
3085
+ animation-delay: 0.88s; }
3240
3086
 
3241
- .hm6 {
3242
- fill: currentColor; }
3087
+ .animated-item:nth-child(12) {
3088
+ -webkit-animation-delay: 0.96s;
3089
+ animation-delay: 0.96s; }
3243
3090
 
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%; } }
3091
+ .animated-item:nth-child(13) {
3092
+ -webkit-animation-delay: 1.04s;
3093
+ animation-delay: 1.04s; }
3259
3094
 
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%; } }
3095
+ .animated-item:nth-child(14) {
3096
+ -webkit-animation-delay: 1.12s;
3097
+ animation-delay: 1.12s; }
3267
3098
 
3268
- @keyframes scale-up-bl {
3099
+ .animated-item:nth-child(15) {
3100
+ -webkit-animation-delay: 1.2s;
3101
+ animation-delay: 1.2s; }
3102
+
3103
+ @-webkit-keyframes fadeIn {
3269
3104
  0% {
3270
- transform: scale(0.5);
3271
- transform-origin: 0% 100%; }
3105
+ opacity: 0;
3106
+ top: 100px; }
3107
+ 75% {
3108
+ opacity: 0.5;
3109
+ top: 0px; }
3272
3110
  100% {
3273
- transform: scale(1);
3274
- transform-origin: 0% 100%; } }
3111
+ opacity: 1; } }
3275
3112
 
3276
3113
  .react-autoql-table-container {
3277
- flex-grow: 1;
3278
- flex-shrink: 1;
3114
+ flex: 1;
3279
3115
  max-width: 100%;
3280
3116
  width: 100%;
3281
3117
  background-color: inherit; }
@@ -3295,8 +3131,7 @@ tbody::-webkit-scrollbar-thumb {
3295
3131
  .react-autoql-table-container.supports-drilldown
3296
3132
  .react-autoql-table.tabulator
3297
3133
  .tabulator-row.tabulator-unselectable:hover {
3298
- cursor: pointer !important;
3299
- background-color: var(--react-autoql-hover-color) !important; }
3134
+ cursor: pointer !important; }
3300
3135
 
3301
3136
  .react-autoql-table.tabulator
3302
3137
  .tabulator-header
@@ -3573,225 +3408,93 @@ tbody::-webkit-scrollbar-thumb {
3573
3408
  width: 28px;
3574
3409
  background: none;
3575
3410
  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; }
3753
-
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); }
3760
-
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; }
3768
-
3769
- .react-autoql-checkbox--switch__input:checked
3770
- + .react-autoql-checkbox--switch__label::after {
3771
- content: 'on'; }
3411
+ font-size: 16px;
3412
+ line-height: 28px;
3413
+ vertical-align: top;
3414
+ color: var(--react-autoql-text-color-primary);
3415
+ cursor: pointer;
3416
+ outline: none !important; }
3772
3417
 
3773
- .react-autoql-checkbox--switch__input:checked::before {
3774
- right: 2px;
3775
- left: 18px;
3776
- top: 2px;
3777
- bottom: 2px; }
3418
+ .react-autoql-toolbar-btn.green {
3419
+ color: #2ecc40; }
3778
3420
 
3779
- .react-autoql-checkbox-label {
3780
- padding-left: 6px;
3781
- line-height: 100%; }
3421
+ .react-autoql-toolbar-btn.red {
3422
+ color: #e80000; }
3782
3423
 
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); }
3424
+ .react-autoql-toolbar-btn:hover {
3425
+ opacity: 0.7; }
3788
3426
 
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
3427
 
3428
+ .react-autoql-radio-btn-container {
3429
+ display: inline-block;
3430
+ border-radius: 4px; }
3431
+ .react-autoql-radio-btn-container [type='radio']:checked,
3432
+ .react-autoql-radio-btn-container [type='radio']:not(:checked) {
3433
+ position: absolute;
3434
+ left: -9999px; }
3435
+ .react-autoql-radio-btn-container [type='radio']:checked + label,
3436
+ .react-autoql-radio-btn-container [type='radio']:not(:checked) + label {
3437
+ position: relative;
3438
+ padding-left: 28px;
3439
+ cursor: pointer;
3440
+ line-height: 20px;
3441
+ display: inline-block; }
3442
+ .react-autoql-radio-btn-container [type='radio']:checked + label:before,
3443
+ .react-autoql-radio-btn-container [type='radio']:not(:checked) + label:before {
3444
+ content: '';
3445
+ position: absolute;
3446
+ left: 1px;
3447
+ top: 1px;
3448
+ width: 18px;
3449
+ height: 18px;
3450
+ border: 1px solid #ddd;
3451
+ border-radius: 100%;
3452
+ background: #fff; }
3453
+ .react-autoql-radio-btn-container [type='radio']:checked + label:after,
3454
+ .react-autoql-radio-btn-container [type='radio']:not(:checked) + label:after {
3455
+ content: '';
3456
+ width: 12px;
3457
+ height: 12px;
3458
+ background: var(--react-autoql-accent-color, #26a7df);
3459
+ position: absolute;
3460
+ top: 4px;
3461
+ left: 4px;
3462
+ border-radius: 100%;
3463
+ transition: all 0.2s ease; }
3464
+ .react-autoql-radio-btn-container [type='radio']:not(:checked) + label:after {
3465
+ opacity: 0;
3466
+ transform: scale(0); }
3467
+ .react-autoql-radio-btn-container [type='radio']:checked + label:after {
3468
+ opacity: 1;
3469
+ transform: scale(1); }
3470
+ .react-autoql-radio-btn-container .react-autoql-radio-btn {
3471
+ position: relative;
3472
+ display: inline-block;
3473
+ padding: 3px 12px;
3474
+ border: 1px solid var(--react-autoql-border-color, #dcdcdc);
3475
+ margin-left: -1px;
3476
+ transition: all 0.2s ease;
3477
+ cursor: pointer; }
3478
+ .react-autoql-radio-btn-container .react-autoql-radio-btn.active {
3479
+ background-color: var(--react-autoql-accent-color, #26a7df);
3480
+ border-color: var(--react-autoql-accent-color, #26a7df);
3481
+ color: #fff;
3482
+ z-index: 3; }
3483
+ .react-autoql-radio-btn-container .react-autoql-radio-btn.active.outlined {
3484
+ background-color: inherit;
3485
+ color: var(--react-autoql-accent-color, #26a7df);
3486
+ z-index: 3; }
3487
+ .react-autoql-radio-btn-container .react-autoql-radio-btn:hover:not(.active) {
3488
+ border-color: var(--react-autoql-accent-color, #26a7df);
3489
+ color: var(--react-autoql-accent-color, #26a7df);
3490
+ z-index: 2; }
3491
+ .react-autoql-radio-btn-container .react-autoql-radio-btn:first-child {
3492
+ border-top-left-radius: 4px;
3493
+ border-bottom-left-radius: 4px;
3494
+ margin-left: 0; }
3495
+ .react-autoql-radio-btn-container .react-autoql-radio-btn:last-child {
3496
+ border-top-right-radius: 4px;
3497
+ border-bottom-right-radius: 4px; }
3795
3498
 
3796
3499
  .react-autoql-steps-container {
3797
3500
  margin: 10px; }
@@ -3913,59 +3616,6 @@ tbody::-webkit-scrollbar-thumb {
3913
3616
  opacity: 1;
3914
3617
  color: var(--react-autoql-accent-color, #26a7df); }
3915
3618
 
3916
- .react-autoql-notification-rule-container {
3917
- display: flex; }
3918
- .react-autoql-notification-rule-container .react-autoql-rule-input {
3919
- display: flex;
3920
- flex-direction: column;
3921
- flex: 1;
3922
- width: 100%; }
3923
- .react-autoql-notification-rule-container .react-autoql-rule-first-input-container {
3924
- display: flex;
3925
- flex: 1; }
3926
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container {
3927
- display: flex;
3928
- padding: 2px 0;
3929
- border-radius: 4px;
3930
- transition: all 0.3s ease;
3931
- flex: 1; }
3932
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-rule-condition-select {
3933
- flex: 0;
3934
- flex-basis: 33px; }
3935
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-rule-input {
3936
- flex: 1;
3937
- margin-left: 4px; }
3938
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-delete-compare-btn {
3939
- cursor: pointer;
3940
- opacity: 0.6;
3941
- padding: 6px; }
3942
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-delete-compare-btn:hover {
3943
- opacity: 1; }
3944
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container.hidden {
3945
- display: none; }
3946
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-input-container {
3947
- margin: 0; }
3948
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-input-container:hover + .react-autoql-rule-term-type-selector,
3949
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-input-container.focus
3950
- + .react-autoql-rule-term-type-selector {
3951
- color: var(--react-autoql-accent-color, #26a7df);
3952
- border-color: var(--react-autoql-accent-color, #26a7df); }
3953
-
3954
- .read-only-rule-term {
3955
- display: inline-block;
3956
- border: 1px solid rgba(0, 0, 0, 0.06);
3957
- background: rgba(0, 0, 0, 0.02);
3958
- padding: 3px 7px;
3959
- line-height: 1.5em;
3960
- margin-right: 5px;
3961
- margin-bottom: 2px;
3962
- margin-top: 2px;
3963
- border-radius: 4px; }
3964
-
3965
- .expression-term-validation-error {
3966
- padding: 0 10px;
3967
- color: var(--react-autoql-warning-color); }
3968
-
3969
3619
  .notification-read-only-group {
3970
3620
  border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
3971
3621
  border-radius: 4px;
@@ -4084,6 +3734,59 @@ tbody::-webkit-scrollbar-thumb {
4084
3734
  opacity: 1;
4085
3735
  color: var(--react-autoql-accent-color); }
4086
3736
 
3737
+ .react-autoql-notification-rule-container {
3738
+ display: flex; }
3739
+ .react-autoql-notification-rule-container .react-autoql-rule-input {
3740
+ display: flex;
3741
+ flex-direction: column;
3742
+ flex: 1;
3743
+ width: 100%; }
3744
+ .react-autoql-notification-rule-container .react-autoql-rule-first-input-container {
3745
+ display: flex;
3746
+ flex: 1; }
3747
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container {
3748
+ display: flex;
3749
+ padding: 2px 0;
3750
+ border-radius: 4px;
3751
+ transition: all 0.3s ease;
3752
+ flex: 1; }
3753
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-rule-condition-select {
3754
+ flex: 0;
3755
+ flex-basis: 33px; }
3756
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-rule-input {
3757
+ flex: 1;
3758
+ margin-left: 4px; }
3759
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-delete-compare-btn {
3760
+ cursor: pointer;
3761
+ opacity: 0.6;
3762
+ padding: 6px; }
3763
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-delete-compare-btn:hover {
3764
+ opacity: 1; }
3765
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container.hidden {
3766
+ display: none; }
3767
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-input-container {
3768
+ margin: 0; }
3769
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-input-container:hover + .react-autoql-rule-term-type-selector,
3770
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-input-container.focus
3771
+ + .react-autoql-rule-term-type-selector {
3772
+ color: var(--react-autoql-accent-color, #26a7df);
3773
+ border-color: var(--react-autoql-accent-color, #26a7df); }
3774
+
3775
+ .read-only-rule-term {
3776
+ display: inline-block;
3777
+ border: 1px solid rgba(0, 0, 0, 0.06);
3778
+ background: rgba(0, 0, 0, 0.02);
3779
+ padding: 3px 7px;
3780
+ line-height: 1.5em;
3781
+ margin-right: 5px;
3782
+ margin-bottom: 2px;
3783
+ margin-top: 2px;
3784
+ border-radius: 4px; }
3785
+
3786
+ .expression-term-validation-error {
3787
+ padding: 0 10px;
3788
+ color: var(--react-autoql-warning-color); }
3789
+
4087
3790
  .spinner-loader {
4088
3791
  display: inline-block;
4089
3792
  width: 14px;
@@ -4091,14 +3794,14 @@ tbody::-webkit-scrollbar-thumb {
4091
3794
  margin-right: 6px; }
4092
3795
 
4093
3796
  .spinner-loader:after {
4094
- content: " ";
3797
+ content: ' ';
4095
3798
  display: block;
4096
3799
  width: 16px;
4097
3800
  height: 16px;
4098
3801
  margin: 0px;
4099
3802
  border-radius: 50%;
4100
- border: 1px solid currentColor;
4101
- border-color: currentColor transparent currentColor transparent;
3803
+ border: 1px solid var(--react-autoql-accent-color);
3804
+ border-color: var(--react-autoql-accent-color) transparent var(--react-autoql-accent-color) transparent;
4102
3805
  -webkit-animation: spinner-loader 1.2s linear infinite;
4103
3806
  animation: spinner-loader 1.2s linear infinite; }
4104
3807
 
@@ -4299,6 +4002,30 @@ tbody::-webkit-scrollbar-thumb {
4299
4002
  .react-autoql-select-popup-container .react-autoql-select-popup li:hover {
4300
4003
  background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.04)); }
4301
4004
 
4005
+ .react-autoql-select-with-arrow div {
4006
+ color: inherit; }
4007
+
4008
+ .react-autoql-select-with-arrow > div {
4009
+ border-color: var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
4010
+ background: var(--react-autoql-background-color-primary, white);
4011
+ transition: all 0.2s ease;
4012
+ cursor: pointer !important; }
4013
+ .react-autoql-select-with-arrow > div:hover {
4014
+ border-color: var(--react-autoql-accent-color, #26a7df); }
4015
+ .react-autoql-select-with-arrow > div .react-autoql-select-with-arrow__option {
4016
+ cursor: pointer; }
4017
+ .react-autoql-select-with-arrow > div .react-autoql-select-with-arrow__option:hover {
4018
+ background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.15)); }
4019
+ .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 {
4020
+ background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.1)); }
4021
+
4022
+ .react-autoql-select-with-arrow:focus {
4023
+ outline: none !important; }
4024
+
4025
+ .react-autoql-select-with-arrow__control--is-focused {
4026
+ border: 1px solid var(--react-autoql-accent-color, #26a7df) !important;
4027
+ box-shadow: none !important; }
4028
+
4302
4029
  .react-autoql-list-item {
4303
4030
  padding: 0 20px;
4304
4031
  display: flex;
@@ -4324,30 +4051,6 @@ tbody::-webkit-scrollbar-thumb {
4324
4051
  .react-autoql-list-item:not(:last-child) {
4325
4052
  border-bottom: 1px solid #d3d3d34a; }
4326
4053
 
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
4054
 
4352
4055
  g.legendOrdinal,
4353
4056
  g.legendOrdinal tspan {
@@ -4356,14 +4059,12 @@ g.legendOrdinal tspan {
4356
4059
  letter-spacing: 0;
4357
4060
  cursor: pointer; }
4358
4061
 
4359
- .x-axis-label-border,
4360
- .y-axis-label-border,
4062
+ .axis-label-border,
4361
4063
  .legend-title-border {
4362
4064
  cursor: pointer;
4363
4065
  stroke: transparent;
4364
4066
  opacity: 0.5; }
4365
- .x-axis-label-border:hover,
4366
- .y-axis-label-border:hover,
4067
+ .axis-label-border:hover,
4367
4068
  .legend-title-border:hover {
4368
4069
  stroke: var(--react-autoql-accent-color) !important; }
4369
4070