react-autoql 3.5.3 → 4.0.0

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