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,4239 +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
- .loading-container-centered {
266
- height: 100%;
267
- width: 100%;
268
- display: flex;
269
- flex-direction: column;
270
- justify-content: center;
271
- align-items: center; }
272
-
273
- .response-loading {
274
- display: inline-block;
275
- position: relative;
276
- width: 64px;
277
- height: 64px; }
278
-
279
- .response-loading div {
280
- position: absolute;
281
- top: 27px;
282
- width: 11px;
283
- height: 11px;
284
- border-radius: 50%;
285
- background: #e2e2e2;
286
- -webkit-animation-timing-function: cubic-bezier(0, 1, 1, 0);
287
- animation-timing-function: cubic-bezier(0, 1, 1, 0); }
288
-
289
- .response-loading div:nth-child(1) {
290
- left: 6px;
291
- -webkit-animation: response-loading1 0.6s infinite;
292
- animation: response-loading1 0.6s infinite; }
293
-
294
- .response-loading div:nth-child(2) {
295
- left: 6px;
296
- -webkit-animation: response-loading2 0.6s infinite;
297
- animation: response-loading2 0.6s infinite; }
298
-
299
- .response-loading div:nth-child(3) {
300
- left: 26px;
301
- -webkit-animation: response-loading2 0.6s infinite;
302
- animation: response-loading2 0.6s infinite; }
303
-
304
- .response-loading div:nth-child(4) {
305
- left: 45px;
306
- -webkit-animation: response-loading3 0.6s infinite;
307
- animation: response-loading3 0.6s infinite; }
308
-
309
- .react-autoql-dashboard-container {
310
- background: var(--react-autoql-background-color-secondary);
311
- height: 100%;
312
- width: 100%;
313
- overflow: hidden; }
314
-
315
- .react-autoql-dashboard-container.edit-mode {
316
- padding-bottom: 200px; }
317
-
318
- .dashboard-drilldown-modal .ReactModal__Content {
319
- top: unset !important;
320
- margin-top: 20px !important;
321
- max-height: 93vh !important; }
322
-
323
- .dashboard-drilldown-modal .react-autoql-modal-body {
324
- padding: 0; }
325
-
326
- .dashboard-drilldown-modal .react-autoql-table {
327
- opacity: 0.9;
328
- font-size: 11px; }
329
-
330
- .dashboard-drilldown-modal .splitter-layout {
331
- height: calc(100% - 55px); }
332
-
333
- .dashboard-drilldown-modal .react-autoql-dashboard-drilldown-original {
334
- padding: 20px;
335
- padding-bottom: 10px; }
336
-
337
- .dashboard-drilldown-modal .drilldown-hide-chart-btn {
338
- text-align: right;
339
- width: 100%;
340
- padding-right: 20px; }
341
- .dashboard-drilldown-modal .drilldown-hide-chart-btn.bottom {
342
- position: absolute;
343
- bottom: 5px;
344
- width: 100px;
345
- right: 0; }
346
- .dashboard-drilldown-modal .drilldown-hide-chart-btn.top {
347
- padding-top: 10px;
348
- margin-bottom: -8px; }
349
-
350
- .dashboard-drilldown-modal .react-autoql-dashboard-drilldown-table {
351
- padding: 20px;
352
- padding-top: 10px;
353
- overflow: hidden;
354
- height: 100%; }
355
-
356
- .empty-dashboard-message-container {
357
- font-family: var(--react-autoql-font-family);
358
- color: var(--react-autoql-text-color-primary);
359
- letter-spacing: 0.02em;
360
- text-align: center;
361
- padding: 100px;
362
- height: 100%;
363
- width: 100%; }
364
-
365
- .empty-dashboard-new-tile-btn {
366
- color: var(--react-autoql-accent-color);
367
- font-weight: bold;
368
- cursor: pointer; }
369
-
370
- @import url("https://fonts.googleapis.com/icon?family=Material+Icons");
371
- .react-autoql-response-content-container:not(.html-content) {
372
- position: relative;
373
- display: flex;
374
- flex-direction: column;
375
- justify-content: center;
376
- align-items: center;
377
- background-color: inherit;
378
- font-size: 14px;
379
- height: 100%;
380
- width: 100%;
381
- overflow: hidden;
382
- color: var(--react-autoql-text-color-primary); }
383
-
384
- .react-autoql-response-content-container.html-content {
385
- position: relative;
386
- background-color: inherit;
387
- text-align: left;
388
- font-size: 14px;
389
- height: 95%;
390
- width: 100%;
391
- overflow: hidden;
392
- color: var(--react-autoql-text-color-primary); }
393
- .react-autoql-response-content-container.html-content table th {
394
- border-bottom: 2px solid var(--react-autoql-border-color); }
395
- .react-autoql-response-content-container.html-content table tr:not(:last-child) {
396
- border-bottom: 1px solid var(--react-autoql-border-color); }
397
- .react-autoql-response-content-container.html-content table td:not(:last-child) {
398
- border-right: 1px solid var(--react-autoql-border-color); }
399
- .react-autoql-response-content-container.html-content table th,
400
- .react-autoql-response-content-container.html-content table td {
401
- padding: 5px 10px; }
402
- .react-autoql-response-content-container.html-content * {
403
- font-size: inherit; }
404
- .react-autoql-response-content-container.html-content sup,
405
- .react-autoql-response-content-container.html-content sub {
406
- font-size: 10px; }
407
- .react-autoql-response-content-container.html-content > *:first-child {
408
- margin-top: 0 !important; }
409
- .react-autoql-response-content-container.html-content > *:last-child {
410
- margin-bottom: 0 !important; }
411
- .react-autoql-response-content-container.html-content caption {
412
- display: table-caption;
413
- text-align: -webkit-center;
414
- padding-top: unset;
415
- padding-bottom: unset;
416
- color: unset;
417
- text-align: unset;
418
- caption-side: unset; }
419
-
420
- .react-autoql-response-content-container.table {
421
- max-height: 100vh !important;
422
- overflow-y: scroll;
423
- scrollbar-width: none;
424
- margin-bottom: 0 !important; }
425
-
426
- .react-autoql-response-content-container.table::-webkit-scrollbar {
427
- width: 0;
428
- height: 0; }
429
-
430
- .react-autoql-suggestion-btn {
431
- padding: 6px 14px;
432
- background: transparent;
433
- font-family: inherit;
434
- font-size: 12px;
435
- margin-bottom: 5px;
436
- outline: none !important;
437
- cursor: pointer;
438
- letter-spacing: 0.05em;
439
- transition: all 0.1s ease;
440
- border: 1px solid rgba(0, 0, 0, 0.15);
441
- border-radius: 5px;
442
- color: inherit; }
443
-
444
- .react-autoql-suggestion-btn:hover {
445
- border-color: transparent;
446
- color: white;
447
- background: var(--react-autoql-accent-color); }
448
-
449
- .react-autoql-help-link-btn {
450
- padding: 6px 14px;
451
- background: transparent;
452
- border-radius: 5px;
453
- font-family: inherit;
454
- font-size: 12px;
455
- margin-top: 5px;
456
- outline: none !important;
457
- cursor: pointer;
458
- letter-spacing: 0.05em;
459
- transition: all 0.1s ease;
460
- border-color: #e2e2e26e;
461
- color: inherit; }
462
-
463
- .react-autoql-help-link-btn:hover {
464
- opacity: 0.7; }
465
-
466
- .react-autoql-help-link-icon {
467
- width: 15px;
468
- height: 15px;
469
- margin-bottom: -3px;
470
- margin-right: 3px; }
471
-
472
- .qanda-positive-feedback-checkmark.react-autoql-icon svg {
473
- color: var(--react-autoql-success-color); }
474
-
475
- .react-autoql-suggestion-message {
476
- height: 100%;
477
- width: 100%;
478
- word-break: break-word; }
479
-
480
- .react-autoql-suggestions-select {
481
- position: relative;
482
- display: inline-block;
483
- height: 30px;
484
- background: none;
485
- outline: none !important;
486
- border: 1px solid;
487
- font-family: inherit;
488
- letter-spacing: 0.05em;
489
- color: #28a8e0;
490
- cursor: pointer;
491
- font-size: inherit; }
492
-
493
- .no-columns-error-message {
494
- position: absolute;
495
- height: 100%;
496
- width: 100%;
497
- display: flex;
498
- justify-content: center;
499
- flex-direction: column;
500
- text-align: center;
501
- padding: 20px;
502
- font-size: 13px; }
503
- .no-columns-error-message .warning-icon {
504
- font-size: 22px;
505
- display: block;
506
- margin-bottom: -13px;
507
- text-align: center; }
508
- .no-columns-error-message .eye-icon {
509
- vertical-align: bottom;
510
- line-height: 18px; }
511
-
512
- /* query validation */
513
- .react-autoql-query-validation-selector-container {
514
- display: inline-block;
515
- position: relative; }
516
-
517
- .react-autoql-select-popup-container.query-validation-select {
518
- padding: 5px 0;
519
- letter-spacing: 0.03em;
520
- font-family: var(--react-autoql-font-family), sans-serif; }
521
- .react-autoql-select-popup-container.query-validation-select .react-autoql-select-option {
522
- height: unset;
523
- font-size: 14px;
524
- line-height: 24px;
525
- padding: 0 15px; }
526
- .react-autoql-select-popup-container.query-validation-select .react-autoql-select-option:last-of-type {
527
- color: #d84830; }
528
-
529
- .react-autoql-query-validation-query {
530
- text-align: center; }
531
-
532
- .react-autoql-query-validation-execute-btn {
533
- height: 38px;
534
- background: none;
535
- border-radius: 4px;
536
- margin-top: 24px;
537
- width: 100%;
538
- color: inherit;
539
- cursor: pointer;
540
- outline: none !important;
541
- border-color: #e2e2e26e;
542
- transition: all 0.2s ease; }
543
-
544
- .react-autoql-query-validation-execute-btn:hover {
545
- border-color: #28a8e0; }
546
-
547
- .react-autoql-execute-query-icon {
548
- font-size: 16px;
549
- vertical-align: middle !important;
550
- padding-right: 3px !important; }
551
- .react-autoql-execute-query-icon span.react-autoql-icon svg {
552
- height: 19px;
553
- width: 19px;
554
- margin-top: 3px;
555
- margin-right: 4px;
556
- vertical-align: top;
557
- fill: var(--react-autoql-accent-color); }
558
-
559
- .react-autoql-query-validation-select {
560
- position: relative;
561
- display: inline-block;
562
- height: 2em;
563
- background: none;
564
- outline: none !important;
565
- border: none;
566
- letter-spacing: 0.05em;
567
- font-family: inherit;
568
- font-size: inherit;
569
- margin: 0;
570
- padding: 0;
571
- border-radius: 0;
572
- border-bottom: 1px dashed;
573
- color: var(--react-autoql-accent-color); }
574
-
575
- .react-autoql-query-validation-delete-button {
576
- position: relative;
577
- cursor: pointer;
578
- margin-bottom: -2px; }
579
-
580
- .react-autoql-chart-tooltip {
581
- font-family: var(--react-autoql-font-family), sans-serif;
582
- letter-spacing: 0.04em;
583
- line-height: 22px;
584
- font-size: 13px;
585
- padding: 7px 15px;
586
- transition: all 0.2s ease !important;
587
- text-align: left !important;
588
- opacity: 1 !important;
589
- z-index: 99999 !important;
590
- /* necessary to show up on top of rc drawer */ }
591
-
592
- .single-value-response {
593
- color: inherit;
594
- cursor: unset;
595
- font-size: 20px; }
596
- .single-value-response:hover {
597
- color: inherit; }
598
-
599
- .single-value-response.with-drilldown:hover {
600
- color: inherit;
601
- text-decoration: underline;
602
- font-weight: 600;
603
- cursor: pointer; }
604
-
605
- .react-autoql-query-validation-container {
606
- width: 100%; }
607
-
608
- .react-autoql-query-validation-description {
609
- margin-bottom: 14px; }
610
-
611
- .context-menu {
612
- background: var(--react-autoql-background-color-primary);
613
- /* height: 100px; */
614
- width: 150px;
615
- padding: 10px 0; }
616
-
617
- .context-menu-list {
618
- list-style-type: none;
619
- width: 100%;
620
- margin: 0;
621
- padding: 0; }
622
-
623
- .context-menu-list li {
624
- color: var(--react-autoql-text-color-primary);
625
- width: 100%;
626
- height: 35px;
627
- line-height: 35px;
628
- padding: 0 20px;
629
- cursor: pointer; }
630
-
631
- .context-menu-list li:hover {
632
- background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.05)); }
633
-
634
- .react-autoql-condition-link {
635
- background: none !important;
636
- border: none;
637
- padding: 0 !important;
638
- text-decoration: none;
639
- white-space: nowrap;
640
- cursor: pointer;
641
- color: var(--react-autoql-accent-color) !important; }
642
- .react-autoql-condition-link:hover {
643
- opacity: 0.9; }
644
-
645
- .react-autoql-condition-link-filtered {
646
- text-decoration: none;
647
- white-space: nowrap;
648
- cursor: pointer;
649
- color: var(--react-autoql-accent-color) !important; }
650
- .react-autoql-condition-link-filtered .react-autoql-custom-icon {
651
- font-size: 14px;
652
- vertical-align: middle;
653
- margin-top: -4px; }
654
- .react-autoql-condition-link-filtered:hover {
655
- opacity: 0.9;
656
- border: none !important; }
657
- .react-autoql-condition-link-filtered:hover .react-autoql-custom-icon {
658
- opacity: 0.9; }
659
-
660
- .react-autoql-condition-lock-reverse-translation {
661
- color: var(--react-autoql-text-color-primary);
662
- background-color: var(--react-autoql-background-color-secondary);
663
- border-radius: 5px;
664
- padding: 4px 6px 4px 6px;
665
- margin: 2px;
666
- min-height: 26px;
667
- min-width: 300px; }
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-notifications-button-container {
1222
- position: relative;
1223
- display: inline-block;
1224
- font-size: inherit;
1225
- line-height: 1em;
1226
- width: 1em; }
1227
- .react-autoql-notifications-button-container .react-autoql-notifications-button {
1228
- font-size: 1em;
1229
- line-height: 0;
1230
- vertical-align: bottom; }
1231
- .react-autoql-notifications-button-container .react-autoql-notifications-badge {
1232
- position: absolute;
1233
- border: 2px solid #fff;
1234
- background: #f5222d;
1235
- border-radius: 6.3em;
1236
- line-height: 1.3em;
1237
- left: 0.6em;
1238
- top: -0.8em;
1239
- padding: 0.15em 0.5em;
1240
- text-align: center;
1241
- color: white;
1242
- font-size: 0.5em; }
1243
- .react-autoql-notifications-button-container .react-autoql-notifications-badge-dot {
1244
- position: absolute;
1245
- display: inline-block;
1246
- border: 2px solid #fff;
1247
- background: #f5222d;
1248
- border-radius: 50%;
1249
- height: 0.6em;
1250
- width: 0.6em;
1251
- left: 0.5em;
1252
- top: -2px; }
1253
-
1254
- .notification-list-loading-container {
1255
- text-align: center;
1256
- padding-top: 100px;
1257
- color: var(--react-autoql-text-color-primary);
1258
- height: 100%;
1259
- overflow: hidden;
1260
- background: var(--react-autoql-background-color-secondary); }
1261
-
1262
- .empty-notifications-message {
1263
- color: var(--react-autoql-text-color-primary);
1264
- text-align: center;
1265
- margin-top: 75px; }
1266
- .empty-notifications-message div {
1267
- opacity: 0.6; }
1268
- .empty-notifications-message .empty-notifications-title {
1269
- font-size: 16px;
1270
- font-weight: bold;
1271
- margin-bottom: 5px; }
1272
- .empty-notifications-message .empty-notifications-img {
1273
- width: 250px;
1274
- height: 250px; }
1275
-
1276
- .react-autoql-notification-list-container {
1277
- height: 100%;
1278
- padding: 20px;
1279
- overflow-y: auto;
1280
- background: var(--react-autoql-background-color-secondary); }
1281
-
1282
- .react-autoql-notification-dismiss-all {
1283
- text-align: right;
1284
- margin-bottom: 12px;
1285
- padding-right: 10px;
1286
- color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.4));
1287
- transition: color 0.1s ease; }
1288
- .react-autoql-notification-dismiss-all span {
1289
- opacity: 0.8;
1290
- cursor: pointer; }
1291
- .react-autoql-notification-dismiss-all span:hover {
1292
- opacity: 1; }
1293
-
1294
- .react-autoql-notification-display-name-input {
1295
- width: 100%; }
1296
-
1297
- .react-autoql-notification-message-input {
1298
- width: 100%; }
1299
-
1300
- .react-autoql-notification-list-item:nth-of-type(0) {
1301
- -webkit-animation-delay: 0s;
1302
- animation-delay: 0s; }
1303
-
1304
- .react-autoql-notification-list-item:nth-of-type(1) {
1305
- -webkit-animation-delay: 0.1s;
1306
- animation-delay: 0.1s; }
1307
-
1308
- .react-autoql-notification-list-item:nth-of-type(2) {
1309
- -webkit-animation-delay: 0.2s;
1310
- animation-delay: 0.2s; }
1311
-
1312
- .react-autoql-notification-list-item:nth-of-type(3) {
1313
- -webkit-animation-delay: 0.3s;
1314
- animation-delay: 0.3s; }
1315
-
1316
- .react-autoql-notification-list-item:nth-of-type(4) {
1317
- -webkit-animation-delay: 0.4s;
1318
- animation-delay: 0.4s; }
1319
-
1320
- .react-autoql-notification-list-item:nth-of-type(5) {
1321
- -webkit-animation-delay: 0.5s;
1322
- animation-delay: 0.5s; }
1323
-
1324
- .react-autoql-notification-list-item:nth-of-type(6) {
1325
- -webkit-animation-delay: 0.6s;
1326
- animation-delay: 0.6s; }
1327
-
1328
- .react-autoql-notification-list-item:nth-of-type(7) {
1329
- -webkit-animation-delay: 0.7s;
1330
- animation-delay: 0.7s; }
1331
-
1332
- .react-autoql-notification-list-item:nth-of-type(8) {
1333
- -webkit-animation-delay: 0.8s;
1334
- animation-delay: 0.8s; }
1335
-
1336
- .react-autoql-notification-list-item:nth-of-type(9) {
1337
- -webkit-animation-delay: 0.9s;
1338
- animation-delay: 0.9s; }
1339
-
1340
- .react-autoql-notification-list-item:nth-of-type(10) {
1341
- -webkit-animation-delay: 1s;
1342
- animation-delay: 1s; }
1343
-
1344
- @-webkit-keyframes slideIn {
1345
- 0% {
1346
- opacity: 0;
1347
- top: 500px; }
1348
- 100% {
1349
- opacity: 1;
1350
- top: 0; } }
1351
-
1352
- .notification-rule-outer-container {
1353
- position: relative;
1354
- border: 1px solid transparent;
1355
- border-radius: 4px;
1356
- padding-bottom: 5px; }
1357
-
1358
- .expression-error-message {
1359
- padding-left: 5px; }
1360
-
1361
- .data-alerts-container.read-only .react-autoql-notification-group-container {
1362
- border: none; }
1363
-
1364
- .react-autoql-step-container a {
1365
- color: var(--react-autoql-accent-color, #26a7df); }
1366
-
1367
- .frequency-date-select-container {
1368
- margin-top: 10px; }
1369
-
1370
- .notification-frequency-step {
1371
- display: flex; }
1372
- .notification-frequency-step .frequency-category-select {
1373
- position: relative;
1374
- padding-top: 9px; }
1375
- .notification-frequency-step .notification-frequency-select {
1376
- margin-left: 8px; }
1377
- .notification-frequency-step .frequency-repeat-checkbox .react-autoql-checkbox-label {
1378
- line-height: 33px; }
1379
- .notification-frequency-step .frequency-repeat-follow-text {
1380
- line-height: 32px;
1381
- vertical-align: top; }
1382
- .notification-frequency-step .frequency-settings-container {
1383
- flex: 0 1 400px; }
1384
-
1385
- .schedule-builder-timezone-section {
1386
- margin: 10px 5px; }
1387
- .schedule-builder-timezone-section .react-autoql-timezone-select {
1388
- display: inline-block;
1389
- width: 300px; }
1390
-
1391
- .react-autoql-notification-settings {
1392
- background-color: var(--react-autoql-background-color-secondary);
1393
- color: var(--react-autoql-text-color-primary);
1394
- padding-top: 20px;
1395
- height: 100%; }
1396
- .react-autoql-notification-settings .react-autoql-notification-settings-container {
1397
- margin: 20px;
1398
- margin-top: 10px;
1399
- border-radius: 4px;
1400
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
1401
- background-color: var(--react-autoql-background-color-primary);
1402
- overflow: hidden; }
1403
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item {
1404
- height: 55px;
1405
- line-height: 55px;
1406
- transition: height 0.3s cubic-bezier(0.26, 0.26, 0, 1); }
1407
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-error-status-icon {
1408
- margin-right: 10px;
1409
- cursor: pointer; }
1410
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .reset-period-info-icon {
1411
- padding-right: 20px;
1412
- font-size: 17px;
1413
- opacity: 1;
1414
- cursor: pointer;
1415
- color: var(--react-autoql-accent-color); }
1416
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item.CUSTOM:hover {
1417
- background: rgba(0, 0, 0, 0.01); }
1418
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-action-btn {
1419
- opacity: 0;
1420
- margin-right: 20px;
1421
- font-size: 16px;
1422
- transition: all 0.2s ease;
1423
- color: var(--react-autoql-text-color-primary);
1424
- cursor: pointer; }
1425
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-action-btn:hover {
1426
- color: var(--react-autoql-accent-color);
1427
- opacity: 1 !important; }
1428
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item:hover .react-autoql-notification-action-btn {
1429
- opacity: 0.5; }
1430
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item-header {
1431
- display: flex;
1432
- justify-content: space-between;
1433
- height: 56px;
1434
- padding-left: 25px;
1435
- padding-right: 8px;
1436
- border-bottom: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05)); }
1437
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-enable-checkbox {
1438
- margin-bottom: 4px;
1439
- margin-right: 8px; }
1440
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-disable-checkbox {
1441
- margin-bottom: 4px;
1442
- margin-right: 8px;
1443
- opacity: 0.5;
1444
- pointer-events: none; }
1445
- .react-autoql-notification-settings .react-autoql-notification-title-container {
1446
- display: flex;
1447
- justify-content: space-between;
1448
- align-items: center;
1449
- padding: 5px 20px;
1450
- padding-bottom: 0;
1451
- color: var(--react-autoql-text-color-primary); }
1452
- .react-autoql-notification-settings .react-autoql-notification-title-container .react-autoql-notification-add-btn {
1453
- display: inline-block;
1454
- height: 35px;
1455
- width: 35px;
1456
- border-radius: 20px;
1457
- background: var(--react-autoql-accent-color, #26a7df);
1458
- color: white;
1459
- line-height: 38px;
1460
- text-align: center;
1461
- font-size: 20px;
1462
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
1463
- transition: all 0.2s ease;
1464
- margin-right: 5px;
1465
- cursor: pointer; }
1466
- .react-autoql-notification-settings .react-autoql-notification-title-container .react-autoql-notification-add-btn:hover {
1467
- box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.32); }
1468
- .react-autoql-notification-settings .react-autoql-notification-setting-display-name {
1469
- white-space: nowrap;
1470
- overflow: hidden;
1471
- text-overflow: ellipsis;
1472
- padding-right: 10px; }
1473
- .react-autoql-notification-settings .react-autoql-notification-setting-display-name .react-autoql-notification-setting-display-name-message {
1474
- opacity: 0.5; }
1475
- .react-autoql-notification-settings .react-autoql-re-initialize-btn {
1476
- vertical-align: middle;
1477
- height: 18px; }
1478
- .react-autoql-notification-settings .react-autoql-re-initialize-btn-text {
1479
- display: flex;
1480
- align-items: center;
1481
- margin-top: -25px; }
1482
-
1483
- .react-autoql-dashboard .react-grid-item {
1484
- background: var(--react-autoql-background-color-primary, #fff);
1485
- color: var(--react-autoql-text-color-primary, #404040);
1486
- font-family: var(--react-autoql-font-family), sans-serif;
1487
- overflow: hidden;
1488
- border-radius: 4px;
1489
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13); }
1490
-
1491
- .react-autoql-dashboard-tile-inner-div {
1492
- height: 100%;
1493
- width: 100%;
1494
- background: inherit;
1495
- position: relative;
1496
- text-align: center;
1497
- display: flex;
1498
- justify-content: flex-start;
1499
- flex-direction: column;
1500
- align-items: center; }
1501
-
1502
- .dashboard-data-limit-warning-icon {
1503
- color: var(--react-autoql-warning-color) !important;
1504
- position: absolute !important;
1505
- bottom: 40px;
1506
- right: 16px;
1507
- font-size: 20px; }
1508
-
1509
- .react-autoql-dashboard-tile-drag-handle {
1510
- transition: opacity 0.3s ease;
1511
- position: absolute;
1512
- background-color: var(--react-autoql-border-color, #f7f7f7);
1513
- cursor: move;
1514
- opacity: 0; }
1515
- .react-autoql-dashboard-tile-drag-handle.top {
1516
- top: 0;
1517
- left: 0;
1518
- width: 100%;
1519
- height: 15px; }
1520
- .react-autoql-dashboard-tile-drag-handle.bottom {
1521
- bottom: 0;
1522
- left: 0;
1523
- width: 100%;
1524
- height: 15px; }
1525
- .react-autoql-dashboard-tile-drag-handle.left {
1526
- top: 0;
1527
- left: 0;
1528
- width: 15px;
1529
- height: 100%; }
1530
- .react-autoql-dashboard-tile-drag-handle.right {
1531
- top: 0;
1532
- right: 0;
1533
- width: 15px;
1534
- height: 100%; }
1535
-
1536
- .react-autoql-dashboard-tile:hover .react-autoql-dashboard-tile-drag-handle {
1537
- opacity: 1; }
1538
-
1539
- .react-autoql-dashboard-tile .autoql-options-toolbar {
1540
- transition: opacity 0.3s ease, color 0.3s ease;
1541
- visibility: hidden;
1542
- opacity: 0;
1543
- bottom: 8px;
1544
- right: 8px;
1545
- z-index: 1; }
1546
-
1547
- .dashboard-tile-viz-toolbar-container {
1548
- transition: opacity 0.3s ease, color 0.3s ease;
1549
- color: var(--react-autoql-accent-color);
1550
- position: absolute;
1551
- bottom: 0;
1552
- left: 0;
1553
- padding: 7px;
1554
- z-index: 1;
1555
- opacity: 0;
1556
- visibility: hidden; }
1557
- .dashboard-tile-viz-toolbar-container .viz-toolbar,
1558
- .dashboard-tile-viz-toolbar-container .split-view-btn {
1559
- position: relative;
1560
- display: inline-block;
1561
- background: var(--react-autoql-background-color-primary); }
1562
- .dashboard-tile-viz-toolbar-container .split-view-btn {
1563
- margin-right: 7px; }
1564
- .dashboard-tile-viz-toolbar-container .split-view-btn .react-autoql-icon {
1565
- font-size: 14px; }
1566
-
1567
- .split-view-btn {
1568
- z-index: 1; }
1569
-
1570
- .split-view-query-btn {
1571
- transition: opacity 0.3s ease, color 0.3s ease;
1572
- color: var(--react-autoql-accent-color);
1573
- position: absolute;
1574
- top: 7px;
1575
- left: 7px;
1576
- bottom: unset;
1577
- z-index: 1;
1578
- visibility: hidden;
1579
- opacity: 0; }
1580
-
1581
- .react-autoql-dashboard-tile:hover .dashboard-tile-viz-toolbar-container,
1582
- .react-autoql-dashboard-tile:hover .split-view-query-btn,
1583
- .react-autoql-dashboard-tile:hover .autoql-options-toolbar {
1584
- visibility: visible;
1585
- opacity: 1; }
1586
-
1587
- .react-autoql-dashboard-tile-inner-div .single-value-response {
1588
- font-size: 32px;
1589
- margin-top: -6px;
1590
- opacity: 0.9; }
1591
-
1592
- .react-autoql-dashboard-tile-inner-div .dashboard-tile-response-wrapper {
1593
- height: calc(100% - 47px);
1594
- width: 100%;
1595
- padding-top: 0;
1596
- background: inherit; }
1597
- .react-autoql-dashboard-tile-inner-div .dashboard-tile-response-wrapper .query-output-error-message {
1598
- opacity: 0.8; }
1599
- .react-autoql-dashboard-tile-inner-div .dashboard-tile-response-wrapper .layout-splitter {
1600
- height: 1px !important;
1601
- color: var(--react-autoql-border-color);
1602
- opacity: 0.3;
1603
- pointer-events: none; }
1604
- .react-autoql-dashboard-tile-inner-div .dashboard-tile-response-wrapper .react-autoql-table {
1605
- opacity: 0.9;
1606
- color: var(--react-autoql-text-color-primary);
1607
- font-size: 11px; }
1608
-
1609
- .react-autoql-dashboard-tile-inner-div.split .dashboard-tile-response-wrapper {
1610
- padding: 0; }
1611
-
1612
- .react-autoql-dashboard-tile-inner-div
1613
- .dashboard-tile-response-wrapper.editing .layout-splitter {
1614
- display: block;
1615
- pointer-events: unset;
1616
- height: 4px !important;
1617
- color: var(--react-autoql-text-color-primary);
1618
- opacity: 0.8; }
1619
-
1620
- /* Safetynet styles specific to dashboard tiles */
1621
- .react-autoql-dashboard-tile-inner-div
1622
- .dashboard-tile-response-wrapper.editing {
1623
- height: 100%;
1624
- width: 100%;
1625
- overflow-x: auto;
1626
- overflow-y: hidden; }
1627
-
1628
- .react-autoql-dashboard-tile-inner-div .react-autoql-query-validation-query {
1629
- white-space: nowrap; }
1630
-
1631
- .dashboard-tile-response-wrapper.small
1632
- .react-autoql-query-validation-description,
1633
- .dashboard-tile-response-wrapper.small
1634
- .react-autoql-suggestion-message-description,
1635
- .dashboard-tile-response-wrapper.small
1636
- .react-autoql-query-validation-execute-btn {
1637
- display: none; }
1638
-
1639
- .dashboard-tile-response-wrapper .dashboard-tile-response-container {
1640
- position: relative;
1641
- height: 100%;
1642
- width: 100%;
1643
- background: inherit;
1644
- cursor: default; }
1645
- .dashboard-tile-response-wrapper .dashboard-tile-response-container .react-autoql-table-container {
1646
- padding: 20px;
1647
- padding-top: 15px;
1648
- width: 100%; }
1649
- .dashboard-tile-response-wrapper .dashboard-tile-response-container .react-autoql-response-content-container {
1650
- padding: 7px; }
1651
-
1652
- .dashboard-tile-title-container {
1653
- width: 100%;
1654
- text-align: left;
1655
- padding: 19px 25px 0 25px;
1656
- height: 47px;
1657
- white-space: nowrap;
1658
- overflow: hidden;
1659
- text-overflow: ellipsis;
1660
- flex-shrink: 0;
1661
- flex-grow: 0; }
1662
- .dashboard-tile-title-container .dashboard-tile-title {
1663
- color: var(--react-autoql-accent-color, #26a7df); }
1664
-
1665
- .dashboard-tile-title-container .dashboard-tile-title {
1666
- font-weight: bold;
1667
- font-size: 14px; }
1668
-
1669
- .dashboard-tile-edit-wrapper {
1670
- display: flex;
1671
- width: 100%;
1672
- height: 55px;
1673
- padding: 20px 20px 0 25px;
1674
- flex-shrink: 0;
1675
- flex-grow: 0; }
1676
-
1677
- .dashboard-tile-play-button {
1678
- cursor: default;
1679
- flex-grow: 0;
1680
- flex-shrink: 0; }
1681
-
1682
- .dashboard-tile-play-button span.react-autoql-icon svg {
1683
- cursor: pointer;
1684
- width: 25px;
1685
- height: 33px;
1686
- margin-left: 10px;
1687
- color: var(--react-autoql-accent-color); }
1688
-
1689
- .dashboard-tile-play-button.disabled svg {
1690
- opacity: 0.5;
1691
- cursor: not-allowed; }
1692
-
1693
- .dashboard-tile-play-button:not(.disabled) svg:hover {
1694
- opacity: 0.8; }
1695
-
1696
- .dashboard-tile-delete-button {
1697
- opacity: 0;
1698
- font-size: 17px;
1699
- color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.4));
1700
- position: absolute;
1701
- top: 0px;
1702
- right: 2px;
1703
- cursor: pointer;
1704
- transition: opacity 0.3s ease;
1705
- z-index: 1; }
1706
-
1707
- .react-grid-item:hover .dashboard-tile-delete-button {
1708
- opacity: 1; }
1709
-
1710
- .dashboard-tile-loading-container {
1711
- display: flex;
1712
- height: 100%;
1713
- width: 100%;
1714
- padding: 20px;
1715
- align-items: center;
1716
- justify-content: center; }
1717
-
1718
- .dashboard-tile-title-divider {
1719
- height: 2px;
1720
- background: currentColor;
1721
- width: 75px;
1722
- margin-top: 4px;
1723
- opacity: 0.07; }
1724
-
1725
- /* Input box styling for edit mode */
1726
- .dashboard-tile-input-container {
1727
- display: flex;
1728
- width: 100%;
1729
- height: 100%;
1730
- font-size: 15px; }
1731
- .dashboard-tile-input-container .dashboard-tile-input,
1732
- .dashboard-tile-input-container .dashboard-tile-autocomplete-input {
1733
- width: 100%;
1734
- height: 100%;
1735
- padding: 12px;
1736
- padding-left: 33px;
1737
- border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
1738
- outline: none !important;
1739
- color: var(--react-autoql-text-color-primary, #356f90);
1740
- background: var(--react-autoql-background-color-primary, #fff); }
1741
-
1742
- .query-focused .dashboard-tile-left-input-container,
1743
- .title-focused .dashboard-tile-right-input-container {
1744
- width: 70%; }
1745
-
1746
- .dashboard-tile-right-input-container {
1747
- z-index: 2; }
1748
-
1749
- .dashboard-tile-right-input-container,
1750
- .dashboard-tile-left-input-container {
1751
- position: relative;
1752
- width: 0;
1753
- flex-grow: 1;
1754
- transition: width 0.3s ease; }
1755
- .dashboard-tile-right-input-container .query-input-icon,
1756
- .dashboard-tile-right-input-container .title-input-icon,
1757
- .dashboard-tile-left-input-container .query-input-icon,
1758
- .dashboard-tile-left-input-container .title-input-icon {
1759
- color: var(--react-autoql-accent-color);
1760
- position: absolute;
1761
- pointer-events: none;
1762
- z-index: 1; }
1763
- .dashboard-tile-right-input-container .query-input-icon,
1764
- .dashboard-tile-left-input-container .query-input-icon {
1765
- font-size: 18px;
1766
- top: 4px;
1767
- left: 10px; }
1768
- .dashboard-tile-right-input-container .title-input-icon,
1769
- .dashboard-tile-left-input-container .title-input-icon {
1770
- font-size: 16px;
1771
- top: 7px;
1772
- left: 11px; }
1773
-
1774
- .dashboard-tile-input.second.query {
1775
- transition: all 0.3s ease;
1776
- border: 1px solid transparent;
1777
- outline: none !important;
1778
- color: var(--react-autoql-text-color-primary, #356f90);
1779
- background: var(--react-autoql-background-color-primary);
1780
- margin: 0px;
1781
- padding: 0px;
1782
- width: 0px;
1783
- height: 28px;
1784
- pointer-events: none; }
1785
- .dashboard-tile-input.second.query.open {
1786
- width: 200px;
1787
- padding: 12px;
1788
- margin-left: 5px;
1789
- border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
1790
- pointer-events: unset; }
1791
-
1792
- .dashboard-tile-input:hover,
1793
- .dashboard-tile-input:focus,
1794
- .dashboard-tile-input-container .dashboard-tile-autocomplete-input:hover,
1795
- .dashboard-tile-input-container .dashboard-tile-autocomplete-input:focus {
1796
- border: 1px solid #26a7e9 !important;
1797
- border-color: var(--react-autoql-accent-color) !important; }
1798
-
1799
- .dashboard-tile-input-container .dashboard-tile-input.query,
1800
- .dashboard-tile-input-container .dashboard-tile-autocomplete-input {
1801
- padding-left: 36px;
1802
- border-top-left-radius: 4px;
1803
- border-bottom-left-radius: 4px; }
1804
-
1805
- .dashboard-tile-input-container .dashboard-tile-input.title {
1806
- border-left: none;
1807
- border-top-right-radius: 4px;
1808
- border-bottom-right-radius: 4px;
1809
- z-index: 2; }
1810
-
1811
- .dashboard-tile-input-container .dashboard-tile-input.title:hover,
1812
- .dashboard-tile-input-container .dashboard-tile-input.title:focus,
1813
- .title-focused .dashboard-tile-right-input-container .dashboard-tile-input,
1814
- .dashboard-tile-right-input-container:hover .dashboard-tile-input {
1815
- /* This is done to balance it because we add a 1px left border when the input is focused or hovered */
1816
- margin-left: -2px; }
1817
-
1818
- /* Autocomplete styles */
1819
- .dashboard-tile-input-container .react-autosuggest__container {
1820
- position: relative;
1821
- width: 100%;
1822
- height: 100%;
1823
- padding: 0;
1824
- margin: 0; }
1825
-
1826
- .dashboard-tile-input-container
1827
- .react-autosuggest__suggestions-container--open {
1828
- background-color: var(--react-autoql-background-color-primary);
1829
- border: 1px solid var(--react-autoql-border-color);
1830
- color: var(--react-autoql-text-color-primary); }
1831
-
1832
- .dashboard-tile-input-container .react-autosuggest__suggestion {
1833
- color: var(--react-autoql-text-color-primary); }
1834
-
1835
- .dashboard-tile-input-container input::-moz-placeholder {
1836
- opacity: 0.5; }
1837
-
1838
- .dashboard-tile-input-container input:-ms-input-placeholder {
1839
- opacity: 0.5; }
1840
-
1841
- .dashboard-tile-input-container input::placeholder {
1842
- opacity: 0.5; }
1843
-
1844
- .react-autoql-dashboard .edit-mode-placeholder-icon {
1845
- display: inline-block;
1846
- line-height: 22px;
1847
- vertical-align: middle;
1848
- height: 23px; }
1849
-
1850
- .dashboard-tile-input-container
1851
- .react-autosuggest__suggestions-container--open {
1852
- position: absolute;
1853
- bottom: unset;
1854
- padding-top: 5px;
1855
- padding-bottom: 5px;
1856
- display: block;
1857
- height: unset;
1858
- border-radius: 24px;
1859
- font-family: inherit;
1860
- font-size: 15px;
1861
- font-weight: normal;
1862
- z-index: 2;
1863
- overflow: hidden;
1864
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
1865
- text-align: left;
1866
- width: 100%;
1867
- top: 35px;
1868
- border-radius: 4px;
1869
- margin: 0; }
1870
-
1871
- .dashboard-tile-input-container .react-autosuggest__suggestions-list {
1872
- margin: 0;
1873
- padding: 0;
1874
- list-style-type: none; }
1875
-
1876
- .dashboard-tile-input-container .react-autosuggest__suggestion {
1877
- cursor: pointer;
1878
- padding: 2px;
1879
- padding-left: 18px;
1880
- letter-spacing: 0.05em;
1881
- line-height: 22.5px; }
1882
-
1883
- .dashboard-tile-input-container .react-autosuggest__suggestion--highlighted {
1884
- background-color: rgba(0, 0, 0, 0.1) !important; }
1885
-
1886
- .dashboard-tile-input-container .react-autosuggest__section-title {
1887
- padding: 10px 0 0 10px;
1888
- font-size: 12px;
1889
- color: #777; }
1890
-
1891
- /* Dragging placeholder styles */
1892
- .react-autoql-db-dragging-placeholder-container {
1893
- height: 100%;
1894
- width: 100%;
1895
- padding: 20px 30px;
1896
- display: flex;
1897
- flex-direction: column; }
1898
-
1899
- .react-autoql-db-dragging-placeholder-title {
1900
- width: 100%;
1901
- height: 35px;
1902
- background: #f3f3f3;
1903
- border-top-right-radius: 4px;
1904
- border-top-left-radius: 4px;
1905
- flex-shrink: 0;
1906
- flex-grow: 0; }
1907
-
1908
- .react-autoql-db-dragging-placeholder-content {
1909
- width: 100%;
1910
- height: 100%;
1911
- background: #f9f9f9;
1912
- border-bottom-right-radius: 4px;
1913
- border-bottom-left-radius: 4px; }
1914
-
1915
- .dashboard-tile-placeholder-text {
1916
- font-size: 15px;
1917
- color: var(--react-autoql-text-color-placeholder, rgba(0, 0, 0, 0.3)); }
1918
- .dashboard-tile-placeholder-text .play-icon {
1919
- vertical-align: bottom;
1920
- line-height: 20px; }
1921
-
1922
- /* React Grid Layout overrides */
1923
- .react-grid-item > .react-resizable-handle {
1924
- z-index: 1;
1925
- position: absolute;
1926
- width: 25px;
1927
- height: 25px;
1928
- bottom: 0;
1929
- right: 0; }
1930
-
1931
- .react-grid-item > .react-resizable-handle::after {
1932
- width: 11px !important;
1933
- height: 11px !important;
1934
- bottom: 4px;
1935
- right: 4px;
1936
- opacity: 0;
1937
- border-right: 1px solid var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.4)) !important;
1938
- border-bottom: 1px solid var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.4)) !important;
1939
- transition: opacity 0.3s ease; }
1940
-
1941
- .react-grid-item:hover > .react-resizable-handle::after {
1942
- opacity: 1; }
1943
-
1944
- .react-grid-placeholder {
1945
- background: rgba(0, 0, 0, 0.13) !important; }
1946
-
1947
- /* This fixes the flickering bug in RGL when resizing elements */
1948
- .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 {
1949
- color: inherit; }
1950
- .react-draggable-transparent-selection input::-moz-placeholder {
1951
- color: inherit; }
1952
- .react-draggable-transparent-selection input:-ms-input-placeholder {
1953
- color: inherit; }
1954
- .react-draggable-transparent-selection span::selection,
1955
- .react-draggable-transparent-selection div::selection,
1956
- .react-draggable-transparent-selection a::selection,
1957
- .react-draggable-transparent-selection input::selection,
1958
- .react-draggable-transparent-selection text::selection,
1959
- .react-draggable-transparent-selection input::placeholder {
1960
- color: inherit; }
1961
-
1962
- .dashboard-tile-response-container .layout-pane-primary {
1963
- overflow: hidden; }
1964
-
1965
- .splitter-layout,
1966
- .layout-pane,
1967
- .dashboard-tile-split-pane-container,
1968
- .react-autoql-dashboard-drilldown-original {
1969
- display: flex;
1970
- align-items: stretch;
1971
- justify-content: center;
1972
- width: 100%; }
1973
-
1974
- .dashboard-tile-response-container .splitter-layout,
1975
- .dashboard-tile-response-container .layout-pane,
1976
- .dashboard-tile-response-container .dashboard-tile-split-pane-container {
1977
- background: inherit; }
1978
-
1979
- .notification-rule-add-btn-outer,
1980
- .notification-rule-validate-btn-outer {
1981
- text-align: center;
1982
- border-style: dashed !important;
1983
- height: 38px;
1984
- line-height: 25px;
1985
- margin: 0 !important;
1986
- overflow: hidden; }
1987
-
1988
- .notification-rule-outer-container {
1989
- position: relative;
1990
- border: 1px solid transparent;
1991
- border-radius: 4px; }
1992
- .notification-rule-outer-container.outlined {
1993
- border-color: rgba(0, 0, 0, 0.15);
1994
- padding: 0 20px;
1995
- padding-bottom: 12px; }
1996
-
1997
- .notification-outer-all-any {
1998
- position: absolute;
1999
- left: 0;
2000
- top: 50%; }
2001
-
2002
- .notification-first-group-btn-container {
2003
- display: flex;
2004
- justify-content: space-between; }
2005
-
2006
- .data-alerts-container.read-only .react-autoql-notification-group-container {
2007
- border: none; }
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
- .autoql-options-toolbar {
2253
- position: absolute;
2254
- background: inherit;
2255
- padding: 5px;
2256
- border-radius: 6px;
2257
- line-height: 28px;
2258
- background: var(--react-autoql-background-color-primary);
2259
- border: 1px solid var(--react-autoql-border-color); }
2260
- .autoql-options-toolbar.vertical .react-autoql-toolbar-btn {
2261
- display: block; }
2262
- .autoql-options-toolbar .react-autoql-toolbar-btn {
2263
- color: var(--react-autoql-accent-color); }
2264
-
2265
- .copy-sql-modal-content {
2266
- position: relative;
2267
- height: 60vh; }
2268
- .copy-sql-modal-content .copy-sql-formatted-text {
2269
- height: 100%;
2270
- width: 100%;
2271
- padding: 10px;
2272
- resize: none;
2273
- background: var(--react-autoql-background-color-secondary); }
2274
- .copy-sql-modal-content .copy-sql-btn {
2275
- color: var(--react-autoql-text-color);
2276
- background-color: var(--react-autoql-background-color-primary);
2277
- position: absolute;
2278
- top: 3px;
2279
- right: 0;
2280
- opacity: 0;
2281
- transition: opacity 0.3s ease; }
2282
- .copy-sql-modal-content .sql-copied {
2283
- color: var(--react-autoql-success-color) !important; }
2284
- .copy-sql-modal-content:hover .copy-sql-btn {
2285
- opacity: 1; }
2286
-
2287
- .ReactModal__Overlay {
2288
- background-color: transparent !important;
2289
- transition: background-color 0.2s ease-in-out;
2290
- z-index: 9999; }
2291
-
2292
- .ReactModal__Overlay--after-open {
2293
- background-color: rgba(0, 0, 0, 0.25) !important; }
2294
-
2295
- .ReactModal__Overlay--before-close {
2296
- background-color: transparent !important; }
2297
-
2298
- .ReactModal__Content {
2299
- display: flex;
2300
- flex-direction: column;
2301
- transform: scale(0);
2302
- transition: all 0.2s ease-in-out;
2303
- color: var(--react-autoql-text-color-primary);
2304
- border: 1px solid var(--react-autoql-border-color) !important;
2305
- background: var(--react-autoql-background-color-primary) !important;
2306
- box-shadow: 0 0 14px 1px rgba(0, 0, 0, 0.15);
2307
- padding: 0 !important;
2308
- margin: auto auto;
2309
- max-width: 90vw;
2310
- max-height: calc(100vh - 90px); }
2311
- .ReactModal__Content input.react-autoql-input,
2312
- .ReactModal__Content textarea.react-autoql-input,
2313
- .ReactModal__Content textarea {
2314
- border-color: var(--react-autoql-border-color);
2315
- color: var(--react-autoql-text-color-primary);
2316
- background: var(--react-autoql-background-color-primary, white); }
2317
- .ReactModal__Content input.react-autoql-input::-moz-placeholder, .ReactModal__Content textarea.react-autoql-input::-moz-placeholder, .ReactModal__Content textarea::-moz-placeholder {
2318
- color: var(--react-autoql-text-color-placeholder); }
2319
- .ReactModal__Content input.react-autoql-input:-ms-input-placeholder, .ReactModal__Content textarea.react-autoql-input:-ms-input-placeholder, .ReactModal__Content textarea:-ms-input-placeholder {
2320
- color: var(--react-autoql-text-color-placeholder); }
2321
- .ReactModal__Content input.react-autoql-input::placeholder,
2322
- .ReactModal__Content textarea.react-autoql-input::placeholder,
2323
- .ReactModal__Content textarea::placeholder {
2324
- color: var(--react-autoql-text-color-placeholder); }
2325
-
2326
- .ReactModal__Overlay--after-open .ReactModal__Content {
2327
- transform: scale(1); }
2328
-
2329
- .ReactModal__Overlay--before-close .ReactModal__Content {
2330
- transform: scale(0); }
2331
-
2332
- .react-autoql-modal-header {
2333
- position: relative;
2334
- text-align: center;
2335
- flex: 0 0 52px;
2336
- border-bottom: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05));
2337
- padding: 14px 60px;
2338
- font-size: 16px; }
2339
-
2340
- .react-autoql-modal-footer {
2341
- position: relative;
2342
- flex: 0 0 52px;
2343
- border-top: 1px solid rgba(0, 0, 0, 0.05);
2344
- text-align: right;
2345
- padding: 8px 10px; }
2346
-
2347
- .react-autoql-modal-body {
2348
- display: flex;
2349
- flex-direction: column;
2350
- padding: 25px;
2351
- flex: 1;
2352
- overflow: hidden; }
2353
- .react-autoql-modal-body h3 {
2354
- color: var(--react-autoql-text-color-primary); }
2355
-
2356
- .react-autoql-modal-close-btn {
2357
- position: absolute !important;
2358
- top: 10px;
2359
- right: 18px;
2360
- font-size: 22px;
2361
- opacity: 0.6 !important;
2362
- cursor: pointer; }
2363
-
2364
- .react-autoql-modal-close-btn:hover {
2365
- opacity: 1 !important; }
2366
-
2367
- .react-autoql-table-container {
2368
- height: 100%;
2369
- max-width: 100%;
2370
- background-color: inherit; }
2371
-
2372
- .react-autoql-table {
2373
- margin-bottom: 0; }
2374
-
2375
- /* tabulator */
2376
- .react-autoql-table.tabulator,
2377
- .react-autoql-table.tabulator .tabulator-row,
2378
- .react-autoql-table.tabulator .tabulator-header,
2379
- .react-autoql-table.tabulator .tabulator-headers,
2380
- .react-autoql-table.tabulator .tabulator-header .tabulator-col,
2381
- .react-autoql-table.tabulator .tabulator-tableHolder .tabulator-table {
2382
- background-color: inherit; }
2383
-
2384
- .react-autoql-table-container.supports-drilldown
2385
- .react-autoql-table.tabulator
2386
- .tabulator-row.tabulator-unselectable:hover {
2387
- cursor: pointer !important;
2388
- background-color: var(--react-autoql-hover-color) !important; }
2389
-
2390
- .react-autoql-table.tabulator
2391
- .tabulator-header
2392
- .tabulator-col.tabulator-sortable:hover {
2393
- background-color: var(--react-autoql-hover-color) !important; }
2394
-
2395
- .react-autoql-table.tabulator .tabulator-header .tabulator-col,
2396
- .react-autoql-table.tabulator .tabulator-cell {
2397
- border-color: var(--react-autoql-border-color); }
2398
-
2399
- .react-autoql-table.tabulator .tabulator-header {
2400
- border-bottom: 2px solid var(--react-autoql-border-color); }
2401
-
2402
- .react-autoql-table.tabulator {
2403
- background-color: inherit;
2404
- height: 100%; }
2405
-
2406
- .react-autoql-table .tabulator-row {
2407
- /* user-select: none; This breaks copy/paste */
2408
- border-bottom: 1px solid var(--react-autoql-border-color); }
2409
-
2410
- .tabulator-cell:not(:first-child) {
2411
- border-left: 1px solid !important;
2412
- border-color: rgba(0, 0, 0, 0.06) !important; }
2413
-
2414
- .react-autoql-table .tabulator-tableHolder {
2415
- max-height: calc(100% - 38px) !important;
2416
- background-color: inherit; }
2417
-
2418
- .react-autoql-table.tabulator
2419
- .tabulator-header
2420
- .tabulator-col
2421
- .tabulator-col-content {
2422
- padding: 8px 5px; }
2423
-
2424
- .react-autoql-table.tabulator
2425
- .tabulator-header
2426
- .tabulator-col
2427
- .tabulator-col-content
2428
- .tabulator-arrow {
2429
- opacity: 0;
2430
- border-left: 4px solid transparent !important;
2431
- border-right: 4px solid transparent !important;
2432
- right: 4px;
2433
- top: calc(50% - 3px); }
2434
-
2435
- .react-autoql-table.tabulator
2436
- .tabulator-header
2437
- .tabulator-col:hover
2438
- .tabulator-col-content
2439
- .tabulator-arrow {
2440
- opacity: 1 !important; }
2441
-
2442
- .react-autoql-table.tabulator
2443
- .tabulator-header
2444
- .tabulator-col.tabulator-sortable[aria-sort='desc']
2445
- .tabulator-col-content
2446
- .tabulator-arrow {
2447
- border-top: 4px solid rgba(0, 0, 0, 0.2) !important; }
2448
-
2449
- .react-autoql-table.tabulator
2450
- .tabulator-header
2451
- .tabulator-col.tabulator-sortable[aria-sort='asc']
2452
- .tabulator-col-content
2453
- .tabulator-arrow,
2454
- .react-autoql-table.tabulator
2455
- .tabulator-header
2456
- .tabulator-col.tabulator-sortable[aria-sort='none']
2457
- .tabulator-col-content
2458
- .tabulator-arrow {
2459
- border-bottom: 4px solid rgba(0, 0, 0, 0.2) !important; }
2460
-
2461
- .react-autoql-table .tabulator-tableHolder::-webkit-scrollbar {
2462
- display: unset;
2463
- opacity: 0;
2464
- background-color: transparent;
2465
- width: 7px;
2466
- height: 7px;
2467
- -webkit-transition: all 0.3s ease;
2468
- transition: all 0.3s ease; }
2469
-
2470
- .react-autoql-table.tabulator .tabulator-tableHolder {
2471
- min-height: calc(100% - 40px) !important;
2472
- height: calc(100% - 40px) !important;
2473
- max-height: calc(100% - 40px) !important; }
2474
-
2475
- .react-autoql-table .tabulator-tableHolder:hover::-webkit-scrollbar-track,
2476
- .react-autoql-table .tabulator-tableHolder:hover::-webkit-scrollbar-track-piece,
2477
- .react-autoql-table .tabulator-tableHolder:hover::-webkit-scrollbar-corner {
2478
- background-color: transparent; }
2479
-
2480
- .react-autoql-table .tabulator-tableHolder:hover::-webkit-scrollbar-thumb {
2481
- background-color: rgba(0, 0, 0, 0.2);
2482
- border-radius: 7px;
2483
- border: 0px; }
2484
-
2485
- .react-autoql-table .tabulator-header-filter input {
2486
- border: 1px solid var(--react-autoql-border-color);
2487
- border-radius: 4px;
2488
- background: transparent;
2489
- padding: 4px 9px !important;
2490
- outline: none !important; }
2491
-
2492
- .react-autoql-table .tabulator-header-filter input:focus {
2493
- border: 1px solid #28a8e0; }
2494
-
2495
- /* These are necessary because we are always rendering the
2496
- filter (just display: none when not used) instead of re-rendering
2497
- the whole table when the filter button is clicked */
2498
- .react-autoql-table-container:not(.filtering)
2499
- .react-autoql-table
2500
- .tabulator-header-filter {
2501
- display: none; }
2502
-
2503
- .react-autoql-table-container:not(.filtering)
2504
- .react-autoql-table
2505
- .tabulator-col {
2506
- height: auto !important; }
2507
-
2508
- .tabulator-table .tabulator-row .tabulator-cell {
2509
- min-height: 38px; }
2510
-
2511
- /* Center header titles */
2512
- .react-autoql-table .tabulator-header .tabulator-col {
2513
- text-align: center !important; }
2514
-
2515
- .react-autoql-table .tabulator-header .tabulator-col-title {
2516
- padding-left: 10px !important;
2517
- padding-right: 10px !important; }
2518
-
2519
- .filter-tag {
2520
- color: #2ecc40;
2521
- border: 1px solid;
2522
- padding: 2px 4px;
2523
- border-radius: 4px;
2524
- font-weight: 400;
2525
- font-size: 10px;
2526
- margin-right: 5px;
2527
- vertical-align: top;
2528
- line-height: 21px; }
2529
-
2530
- .comparison-value-positive {
2531
- color: #2ecc40; }
2532
-
2533
- .comparison-value-negative {
2534
- color: #e80000; }
2535
-
2536
- .react-autoql-btn {
2537
- border-radius: 4px;
2538
- cursor: pointer;
2539
- outline: none !important;
2540
- transition: all 0.2s ease;
2541
- width: auto;
2542
- display: inline-block; }
2543
-
2544
- .react-autoql-btn.disabled {
2545
- opacity: 0.4;
2546
- cursor: not-allowed;
2547
- pointer-events: none; }
2548
-
2549
- .react-autoql-btn.small {
2550
- padding: 2px 8px;
2551
- margin: 2px 3px; }
2552
-
2553
- .react-autoql-btn.large {
2554
- padding: 5px 16px;
2555
- margin: 2px 5px; }
2556
-
2557
- .react-autoql-btn.default {
2558
- color: inherit;
2559
- border: 1px solid var(--react-autoql-border-color);
2560
- background: inherit; }
2561
- .react-autoql-btn.default:hover {
2562
- border-color: var(--react-autoql-accent-color);
2563
- color: var(--react-autoql-accent-color); }
2564
-
2565
- .react-autoql-btn.primary {
2566
- background: var(--react-autoql-accent-color);
2567
- border: 1px solid var(--react-autoql-accent-color);
2568
- color: white; }
2569
- .react-autoql-btn.primary:hover {
2570
- opacity: 0.8; }
2571
-
2572
- .react-autoql-btn.danger {
2573
- color: var(--react-autoql-danger-color, #ca0b00);
2574
- border: 1px solid var(--react-autoql-danger-color, #ca0b00);
2575
- background: inherit; }
2576
- .react-autoql-btn.danger:hover {
2577
- background-color: var(--react-autoql-danger-color, #ca0b00);
2578
- color: #fff; }
2579
-
2580
- .react-autoql-cascader {
2581
- position: relative;
2582
- white-space: nowrap;
2583
- overflow: hidden;
2584
- min-width: 300px; }
2585
- .react-autoql-cascader .options-container {
2586
- transition: max-width 0.3s ease;
2587
- display: inline-block;
2588
- vertical-align: top;
2589
- padding: 0 10px;
2590
- margin: 10px 0;
2591
- width: 100%;
2592
- max-width: calc(100% - 20px);
2593
- white-space: pre-wrap; }
2594
- .react-autoql-cascader .options-container.hidden {
2595
- max-width: 0; }
2596
- .react-autoql-cascader .options-container.hidden span {
2597
- white-space: nowrap; }
2598
- .react-autoql-cascader .options-container.hidden .option {
2599
- opacity: 0;
2600
- pointer-events: none; }
2601
- .react-autoql-cascader .options-container .options-title {
2602
- padding: 4px;
2603
- padding-left: 10px;
2604
- font-weight: 600; }
2605
- .react-autoql-cascader .options-container .cascader-back-arrow {
2606
- position: absolute;
2607
- cursor: pointer;
2608
- top: 15px;
2609
- left: 0; }
2610
- .react-autoql-cascader .options-container .cascader-back-arrow:hover {
2611
- opacity: 0.8; }
2612
- .react-autoql-cascader .options-container .option {
2613
- cursor: pointer;
2614
- padding: 4px;
2615
- display: flex;
2616
- justify-content: space-between;
2617
- border-radius: 2px;
2618
- padding-left: 10px; }
2619
- .react-autoql-cascader .options-container .option .option-arrow {
2620
- opacity: 0.7; }
2621
- .react-autoql-cascader .options-container .option .option-execute-icon {
2622
- opacity: 0;
2623
- color: #fff;
2624
- font-size: 16px;
2625
- vertical-align: middle; }
2626
- .react-autoql-cascader .options-container .option:hover, .react-autoql-cascader .options-container .option.active {
2627
- background-color: var(--react-autoql-accent-color, #26a7df);
2628
- color: #fff; }
2629
- .react-autoql-cascader .options-container .option:hover .option-execute-icon, .react-autoql-cascader .options-container .option.active .option-execute-icon {
2630
- opacity: 1; }
2631
- .react-autoql-cascader .options-container:not(:last-child) {
2632
- border-right: 1px solid #d3d3d352; }
2633
-
2634
- .react-autoql-filter-locking-title-container {
2635
- display: inline-block;
2636
- width: 100%;
2637
- padding-top: 4px;
2638
- padding-left: 6px; }
2639
- .react-autoql-filter-locking-title-container h3 {
2640
- width: 95%;
2641
- float: left;
2642
- color: var(--react-autoql-text-color-primary);
2643
- margin-bottom: 0;
2644
- display: block;
2645
- font-size: 1.17em !important;
2646
- font-weight: bold; }
2647
- .react-autoql-filter-locking-title-container h3 span {
2648
- color: var(--react-autoql-accent-color); }
2649
- .react-autoql-filter-locking-title-container button {
2650
- width: 5%;
2651
- float: right; }
2652
- .react-autoql-filter-locking-title-container button :hover {
2653
- cursor: pointer;
2654
- color: var(--react-autoql-hover-color); }
2655
-
2656
- .react-autoql-filter-locking-description {
2657
- color: var(--react-autoql-text-color-primary);
2658
- background-color: var(--react-autoql-background-color-secondary);
2659
- border-radius: 5px;
2660
- padding: 2px 6px 2px 6px;
2661
- margin: 4px 10px 4px 10px;
2662
- display: inline-block;
2663
- position: absolute;
2664
- top: 20px;
2665
- box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.4);
2666
- z-index: 999999; }
2667
- .react-autoql-filter-locking-description span {
2668
- color: var(--react-autoql-accent-color); }
2669
- .react-autoql-filter-locking-description p {
2670
- width: 96%;
2671
- float: right;
2672
- margin-bottom: 0; }
2673
-
2674
- .react-autoql-condition-locking-input {
2675
- padding: 5px;
2676
- padding-left: 20px;
2677
- margin: 8px;
2678
- height: 32px;
2679
- box-sizing: border-box;
2680
- border-radius: 24px;
2681
- font-size: 12px;
2682
- font-family: inherit;
2683
- letter-spacing: 0.04em;
2684
- outline: none !important;
2685
- width: calc(100% - 20px);
2686
- font-family: inherit;
2687
- /* Default styles outside of data messenger */
2688
- border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
2689
- background: var(--react-autoql-background-color-secondary);
2690
- color: var(--react-autoql-text-color-primary); }
2691
- .react-autoql-condition-locking-input::-moz-placeholder {
2692
- color: var(--react-autoql-text-color-placeholder) !important; }
2693
- .react-autoql-condition-locking-input:-ms-input-placeholder {
2694
- color: var(--react-autoql-text-color-placeholder) !important; }
2695
- .react-autoql-condition-locking-input::placeholder {
2696
- color: var(--react-autoql-text-color-placeholder) !important; }
2697
-
2698
- .react-autoql-condition-locking-input:hover {
2699
- box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1); }
2700
-
2701
- .react-autoql-condition-table {
2702
- min-width: 95%;
2703
- margin: 10px auto; }
2704
-
2705
- .react-autoql-condition-table thead {
2706
- padding-left: 10px; }
2707
-
2708
- .react-autoql-condition-table th {
2709
- text-align: left;
2710
- padding: 4px;
2711
- margin: 0 10px 0 10px;
2712
- font-weight: 800; }
2713
- .react-autoql-condition-table th span {
2714
- color: var(--react-autoql-accent-color); }
2715
-
2716
- .react-autoql-condition-table .react-autoql-condition-table-list-item {
2717
- text-overflow: ellipsis;
2718
- white-space: nowrap;
2719
- overflow: hidden; }
2720
-
2721
- .react-autoql-condition-lock-menu-footer {
2722
- bottom: 0;
2723
- right: 0; }
2724
- .react-autoql-condition-lock-menu-footer button {
2725
- float: right;
2726
- margin: 6px !important; }
2727
-
2728
- .react-autoql-condition-lock-menu-footer {
2729
- bottom: 0;
2730
- right: 0; }
2731
- .react-autoql-condition-lock-menu-footer button {
2732
- float: right;
2733
- margin: 6px !important; }
2734
-
2735
- .react-autoql-accept-conditions-button {
2736
- text-align: right;
2737
- margin-bottom: 12px;
2738
- padding-right: 10px;
2739
- color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.4));
2740
- transition: color 0.1s ease; }
2741
- .react-autoql-accept-conditions-button span {
2742
- opacity: 0.8;
2743
- cursor: pointer; }
2744
- .react-autoql-accept-conditions-button span:hover {
2745
- opacity: 1; }
2746
-
2747
- .react-autoql-condition-table td {
2748
- text-align: left;
2749
- padding: 4px;
2750
- margin: 0 10px 0 10px;
2751
- padding-left: 10px; }
2752
-
2753
- .react-autoql-condition-list {
2754
- padding: 0;
2755
- margin: 0 auto;
2756
- overflow-y: scroll;
2757
- min-height: 182px; }
2758
-
2759
- .react-autoql-condition-list-loading-container {
2760
- display: flex;
2761
- height: 180px;
2762
- width: 100%;
2763
- padding: 20px;
2764
- align-items: center;
2765
- justify-content: center; }
2766
-
2767
- .react-autoql-empty-condition-list {
2768
- text-align: center;
2769
- padding: 20px;
2770
- height: 140px; }
2771
- .react-autoql-empty-condition-list p {
2772
- margin-top: 20px !important;
2773
- vertical-align: middle; }
2774
-
2775
- .autoql-close-button {
2776
- background-color: inherit;
2777
- border: none;
2778
- text-align: left;
2779
- font-size: 20px;
2780
- margin-top: -20px;
2781
- float: none !important;
2782
- color: inherit; }
2783
-
2784
- .react-tiny-popover-container {
2785
- background: var(--react-autoql-background-color-primary); }
2786
-
2787
- .autoql-condition-locking-menu-container .react-autosuggest__container {
2788
- flex-grow: 1;
2789
- display: inline;
2790
- width: 90%;
2791
- height: 100%; }
2792
-
2793
- .autoql-condition-locking-menu-container
2794
- .react-autosuggest__suggestions-container--open {
2795
- background-color: var(--react-autoql-background-color-primary);
2796
- border: 1px solid var(--react-autoql-border-color);
2797
- color: var(--react-autoql-text-color-primary);
2798
- position: absolute;
2799
- top: unset;
2800
- bottom: unset;
2801
- overflow-y: scroll !important;
2802
- padding-top: 5px;
2803
- padding-bottom: 5px;
2804
- display: block;
2805
- font-family: inherit;
2806
- font-size: 15px;
2807
- font-weight: normal;
2808
- z-index: 2;
2809
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
2810
- text-align: left;
2811
- border-radius: 4px;
2812
- margin: -8px auto;
2813
- height: auto;
2814
- max-height: 80vh;
2815
- overflow-y: scroll !important;
2816
- transform: translateX(4%);
2817
- width: 92% !important; }
2818
-
2819
- .autoql-condition-locking-menu-list {
2820
- table-layout: fixed;
2821
- width: 100%; }
2822
-
2823
- .autoql-condition-locking-menu-container .react-autosuggest__suggestion {
2824
- color: var(--react-autoql-text-color-primary); }
2825
-
2826
- .autoql-condition-locking-menu-container input::-moz-placeholder {
2827
- opacity: 0.5; }
2828
-
2829
- .autoql-condition-locking-menu-container input:-ms-input-placeholder {
2830
- opacity: 0.5; }
2831
-
2832
- .autoql-condition-locking-menu-container input::placeholder {
2833
- opacity: 0.5; }
2834
-
2835
- .autoql-condition-locking-menu-container .react-autosuggest__suggestions-list {
2836
- margin: 0;
2837
- padding: 0;
2838
- list-style-type: none; }
2839
-
2840
- .autoql-condition-locking-menu-container .react-autosuggest__suggestion {
2841
- cursor: pointer;
2842
- padding: 2px;
2843
- padding-left: 18px;
2844
- letter-spacing: 0.05em;
2845
- line-height: 22.5px; }
2846
-
2847
- .autoql-condition-locking-menu-container
2848
- .react-autosuggest__suggestion--highlighted {
2849
- background-color: rgba(0, 0, 0, 0.1) !important; }
2850
-
2851
- .autoql-condition-locking-menu-container .react-autosuggest__section-title {
2852
- padding: 10px 0 0 10px;
2853
- font-size: 12px;
2854
- color: #777; }
2855
-
2856
- .react-autoql-filter-setting-info-card {
2857
- color: var(--react-autoql-text-color-primary);
2858
- background-color: var(--react-autoql-background-color-secondary);
2859
- border-radius: 5px;
2860
- padding: 2px 6px 2px 6px;
2861
- margin: 4px 10px 4px 10px;
2862
- display: inline-block;
2863
- position: absolute;
2864
- top: 40px;
2865
- box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.4);
2866
- z-index: 9999; }
2867
- .react-autoql-filter-setting-info-card span {
2868
- color: var(--react-autoql-accent-color); }
2869
- .react-autoql-filter-setting-info-card p {
2870
- margin-bottom: 0 !important; }
2871
- .react-autoql-filter-setting-info-card p span {
2872
- color: var(--react-autoql-accent-color); }
2873
-
2874
- #react-autoql-condition-show-message {
2875
- visibility: hidden;
2876
- min-width: 200px;
2877
- line-height: 1 !important;
2878
- font-size: 14px !important;
2879
- background-color: var(--react-autoql-background-color-secondary);
2880
- text-align: center;
2881
- border-radius: 4px;
2882
- padding: 6px;
2883
- position: fixed;
2884
- top: 20px;
2885
- display: block;
2886
- z-index: 999999999;
2887
- transform: translateX(85%);
2888
- box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.4); }
2889
- #react-autoql-condition-show-message span {
2890
- color: var(--react-autoql-accent-color); }
2891
-
2892
- #react-autoql-condition-show-message.show {
2893
- visibility: visible;
2894
- -webkit-animation: snackbarFadein 1s, snackbarFadeout 1s 2s;
2895
- animation: snackbarFadein 1s, snackbarFadeout 1s 2s; }
2896
-
2897
- @-webkit-keyframes snackbarFadein {
2898
- from {
2899
- top: 0;
2900
- opacity: 0; }
2901
- to {
2902
- top: 20px;
2903
- opacity: 1; } }
2904
-
2905
- @keyframes snackbarFadein {
2906
- from {
2907
- top: 0;
2908
- opacity: 0; }
2909
- to {
2910
- top: 20px;
2911
- opacity: 1; } }
2912
-
2913
- @-webkit-keyframes snackbarFadeout {
2914
- from {
2915
- top: 20px;
2916
- opacity: 1; }
2917
- to {
2918
- top: 0;
2919
- opacity: 0; } }
2920
-
2921
- @keyframes snackbarFadeout {
2922
- from {
2923
- top: 20px;
2924
- opacity: 1; }
2925
- to {
2926
- top: 0;
2927
- opacity: 0; } }
2928
-
2929
- .query-tips-page-container {
2930
- height: 100%;
2931
- padding: 10px; }
2932
- .query-tips-page-container .chat-bar-input-icon {
2933
- top: 20px;
2934
- left: 26px; }
2935
- .query-tips-page-container .react-autoql-chatbar-input.left-padding {
2936
- padding-left: 46px; }
2937
-
2938
- .query-tips-result-container {
2939
- color: var(--react-autoql-text-color-primary);
2940
- padding: 0px 20px;
2941
- text-align: center;
2942
- max-width: 550px;
2943
- margin: 0 auto; }
2944
- .query-tips-result-container .query-tip-list-container {
2945
- margin-bottom: 20px; }
2946
- .query-tips-result-container .animated-item {
2947
- -webkit-animation: fadeIn 0.3s linear;
2948
- animation: fadeIn 0.3s linear;
2949
- -webkit-animation-fill-mode: both;
2950
- animation-fill-mode: both; }
2951
- .query-tips-result-container .query-tip-item {
2952
- position: relative;
2953
- padding: 13px;
2954
- border-top: 1px solid rgba(0, 0, 0, 0.04);
2955
- cursor: pointer; }
2956
- .query-tips-result-container .query-tip-item:first-child {
2957
- border-top: none; }
2958
- .query-tips-result-container .query-tip-item .execute-btn {
2959
- position: absolute;
2960
- right: 10px;
2961
- top: 4px;
2962
- font-size: 20px;
2963
- visibility: hidden;
2964
- opacity: 0; }
2965
- .query-tips-result-container .query-tip-item:hover {
2966
- font-weight: bold;
2967
- color: var(--react-autoql-accent-color); }
2968
- .query-tips-result-container .query-tip-item:hover .execute-btn {
2969
- visibility: visible;
2970
- opacity: 1; }
2971
- .query-tips-result-container .query-tips-result-placeholder {
2972
- margin-top: 50px;
2973
- opacity: 0.6; }
2974
-
2975
- .chat-bar-loading-spinner {
2976
- position: absolute;
2977
- right: 20px;
2978
- top: 22px; }
2979
-
2980
- #react-paginate {
2981
- position: relative;
2982
- background: transparent;
2983
- padding: 8px; }
2984
- #react-paginate ul {
2985
- display: inline-block;
2986
- padding-left: 0;
2987
- margin-bottom: 0; }
2988
- #react-paginate li {
2989
- display: inline-block;
2990
- color: var(--react-autoql-text-color-primary);
2991
- cursor: pointer;
2992
- margin-right: 3px;
2993
- border-radius: 5px;
2994
- margin-bottom: 0;
2995
- -webkit-user-select: none;
2996
- -moz-user-select: none;
2997
- -ms-user-select: none;
2998
- user-select: none; }
2999
- #react-paginate li:hover {
3000
- opacity: 0.7;
3001
- border-radius: 50%; }
3002
- #react-paginate li a {
3003
- display: inline-block;
3004
- color: var(--react-autoql-text-color-primary);
3005
- outline: none;
3006
- width: 28px;
3007
- height: 28px;
3008
- line-height: 28px; }
3009
- #react-paginate li.selected {
3010
- background: var(--react-autoql-accent-color);
3011
- border-radius: 50%;
3012
- outline: none; }
3013
- #react-paginate li.selected a {
3014
- color: #fff; }
3015
- #react-paginate .pagination-next.disabled,
3016
- #react-paginate .pagination-previous.disabled {
3017
- opacity: 0.5;
3018
- pointer-events: none; }
3019
- #react-paginate .pagination-previous,
3020
- #react-paginate .pagination-next {
3021
- position: absolute;
3022
- font-size: 18px; }
3023
- #react-paginate .pagination-previous a,
3024
- #react-paginate .pagination-next a {
3025
- color: var(--react-autoql-accent-color); }
3026
- #react-paginate .pagination-previous {
3027
- left: 20px; }
3028
- #react-paginate .pagination-next {
3029
- right: 20px; }
3030
-
3031
- .animated-item:nth-child(1) {
3032
- -webkit-animation-delay: 0.08s;
3033
- animation-delay: 0.08s; }
3034
-
3035
- .animated-item:nth-child(2) {
3036
- -webkit-animation-delay: 0.16s;
3037
- animation-delay: 0.16s; }
3038
-
3039
- .animated-item:nth-child(3) {
3040
- -webkit-animation-delay: 0.24s;
3041
- animation-delay: 0.24s; }
3042
-
3043
- .animated-item:nth-child(4) {
3044
- -webkit-animation-delay: 0.32s;
3045
- animation-delay: 0.32s; }
3046
-
3047
- .animated-item:nth-child(5) {
3048
- -webkit-animation-delay: 0.4s;
3049
- animation-delay: 0.4s; }
3050
-
3051
- .animated-item:nth-child(6) {
3052
- -webkit-animation-delay: 0.48s;
3053
- animation-delay: 0.48s; }
3054
-
3055
- .animated-item:nth-child(7) {
3056
- -webkit-animation-delay: 0.56s;
3057
- animation-delay: 0.56s; }
3058
-
3059
- .animated-item:nth-child(8) {
3060
- -webkit-animation-delay: 0.64s;
3061
- animation-delay: 0.64s; }
3062
-
3063
- .animated-item:nth-child(9) {
3064
- -webkit-animation-delay: 0.72s;
3065
- animation-delay: 0.72s; }
3066
-
3067
- .animated-item:nth-child(10) {
3068
- -webkit-animation-delay: 0.8s;
3069
- animation-delay: 0.8s; }
3070
-
3071
- .animated-item:nth-child(11) {
3072
- -webkit-animation-delay: 0.88s;
3073
- animation-delay: 0.88s; }
3074
-
3075
- .animated-item:nth-child(12) {
3076
- -webkit-animation-delay: 0.96s;
3077
- animation-delay: 0.96s; }
3078
-
3079
- .animated-item:nth-child(13) {
3080
- -webkit-animation-delay: 1.04s;
3081
- animation-delay: 1.04s; }
3082
-
3083
- .animated-item:nth-child(14) {
3084
- -webkit-animation-delay: 1.12s;
3085
- animation-delay: 1.12s; }
3086
-
3087
- .animated-item:nth-child(15) {
3088
- -webkit-animation-delay: 1.2s;
3089
- animation-delay: 1.2s; }
3090
-
3091
- @-webkit-keyframes fadeIn {
3092
- 0% {
3093
- opacity: 0;
3094
- top: 100px; }
3095
- 75% {
3096
- opacity: 0.5;
3097
- top: 0px; }
3098
- 100% {
3099
- opacity: 1; } }
3100
-
3101
- .chat-single-message-container {
3102
- transition: background-color 0.2s ease;
3103
- padding-top: 6px; }
3104
- .chat-single-message-container:first-of-type {
3105
- margin-top: 10px; }
3106
- .chat-single-message-container .query-more-btn {
3107
- transition: all 0.3s ease;
3108
- font-size: 22px;
3109
- padding: 13px;
3110
- margin-bottom: 6px;
3111
- height: 42px;
3112
- opacity: 0;
3113
- visibility: hidden;
3114
- cursor: pointer; }
3115
- .chat-single-message-container .query-more-btn:hover {
3116
- opacity: 1; }
3117
-
3118
- .chat-condition-item-container {
3119
- position: absolute;
3120
- background: inherit;
3121
- bottom: 0px;
3122
- padding: 5px;
3123
- border-radius: 6px; }
3124
-
3125
- .chat-condition-item {
3126
- background: none !important;
3127
- border: none;
3128
- margin-top: -20px !important;
3129
- padding: 0 !important;
3130
- font-family: var(--react-autoql-font-family);
3131
- color: var(--react-autoql-accent-color);
3132
- text-decoration: underline;
3133
- cursor: pointer; }
3134
-
3135
- .chat-single-message-container.response {
3136
- display: flex;
3137
- justify-content: flex-start;
3138
- padding-left: 20px;
3139
- -webkit-animation: scale-up-bl 0.6s ease;
3140
- animation: scale-up-bl 0.6s ease; }
3141
-
3142
- .chat-single-message-container.request {
3143
- display: flex;
3144
- justify-content: flex-end;
3145
- padding-right: 20px;
3146
- -webkit-animation: scale-up-br 0.6s ease;
3147
- animation: scale-up-br 0.6s ease; }
3148
-
3149
- .chat-single-message-container .chat-message-bubble {
3150
- position: relative;
3151
- padding: 13px;
3152
- border-radius: 10px;
3153
- max-width: calc(100% - 20px);
3154
- word-wrap: break-word;
3155
- font-family: inherit;
3156
- font-size: 14px;
3157
- letter-spacing: 0.04em;
3158
- box-sizing: border-box;
3159
- /* make small margin on bottom because sometimes react
3160
- custom scrollbar cuts off a pixel or 2 at the bottom */
3161
- margin-bottom: 6px; }
3162
-
3163
- .chat-single-message-container .chat-message-bubble.text {
3164
- max-width: 85%; }
3165
-
3166
- .chat-single-message-container .chat-message-bubble.full-width {
3167
- width: calc(100% - 20px) !important;
3168
- min-width: calc(100% - 20px) !important;
3169
- max-width: calc(100% - 20px) !important; }
3170
-
3171
- .chat-single-message-container.response .chat-message-bubble.active {
3172
- border: 1px solid #c3c3c3; }
3173
-
3174
- .chat-single-message-container.response .chat-message-bubble {
3175
- background: var(--react-autoql-background-color-primary);
3176
- color: var(--react-autoql-text-color-primary);
3177
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13); }
3178
-
3179
- .chat-single-message-container.response .chat-message-bubble:not(.text) {
3180
- min-width: 125px;
3181
- padding-bottom: 15px; }
3182
-
3183
- .chat-single-message-container.request .chat-message-bubble {
3184
- background: var(--react-autoql-accent-color);
3185
- color: white;
3186
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13); }
3187
-
3188
- /* Increase height of message to include table filters,
3189
- so we dont have to redraw the whole table */
3190
- .chat-single-message-container.response.filtering-table {
3191
- max-height: calc(85% + 35px) !important; }
3192
-
3193
- .chat-message-toolbar,
3194
- .chat-message-toolbar.autoql-options-toolbar {
3195
- display: none;
3196
- position: absolute;
3197
- background: inherit;
3198
- top: -31px;
3199
- padding: 5px;
3200
- border-radius: 6px;
3201
- line-height: 28px;
3202
- background: var(--react-autoql-background-color-primary);
3203
- border: 1px solid var(--react-autoql-border-color);
3204
- color: var(--react-autoql-accent-color); }
3205
-
3206
- .chat-message-toolbar.right {
3207
- right: -9px; }
3208
-
3209
- .chat-message-toolbar.left {
3210
- left: -9px; }
3211
-
3212
- .chat-message-bubble:hover .chat-message-toolbar,
3213
- .chat-message-bubble .chat-message-toolbar.active {
3214
- display: block; }
3215
-
3216
- .report-problem-text-area {
3217
- border-radius: 4px;
3218
- border: 1px solid rgba(0, 0, 0, 0.15);
3219
- margin-top: 10px;
3220
- padding: 5px 10px;
3221
- outline: none !important; }
3222
-
3223
- .data-limit-warning-icon {
3224
- color: var(--react-autoql-warning-color) !important;
3225
- position: absolute !important;
3226
- bottom: 2px;
3227
- right: 4px;
3228
- font-size: 20px; }
3229
-
3230
- .condition-info-icon-left-align {
3231
- color: var(--react-autoql-accent-color) !important;
3232
- position: absolute !important;
3233
- bottom: 2px;
3234
- right: 10px;
3235
- font-size: 20px; }
3236
-
3237
- .condition-info-icon {
3238
- color: var(--react-autoql-accent-color) !important;
3239
- position: absolute !important;
3240
- bottom: 2px;
3241
- right: 4px;
3242
- font-size: 20px; }
3243
-
3244
- .more-options-menu,
3245
- .report-problem-menu {
3246
- background: var(--react-autoql-background-color-primary);
3247
- padding: 10px 0; }
3248
- .more-options-menu span.react-autoql-icon svg,
3249
- .report-problem-menu span.react-autoql-icon svg {
3250
- margin-right: 3px; }
3251
-
3252
- .interpretation-icon {
3253
- vertical-align: top;
3254
- height: 26px;
3255
- margin: 0 3px;
3256
- font-size: 18px; }
3257
-
3258
- /* Chart icon styles */
3259
- .chart-icon-svg-0,
3260
- .react-autoql-icon-svg-0 {
3261
- fill: currentColor; }
3262
-
3263
- .hm0 {
3264
- opacity: 0.5;
3265
- fill: currentColor;
3266
- enable-background: new; }
3267
-
3268
- .hm1 {
3269
- fill: currentColor; }
3270
-
3271
- .hm2 {
3272
- opacity: 0.15;
3273
- fill: currentColor;
3274
- enable-background: new; }
3275
-
3276
- .hm3 {
3277
- opacity: 0.6;
3278
- fill: currentColor;
3279
- enable-background: new; }
3280
-
3281
- .hm4 {
3282
- opacity: 0.65;
3283
- fill: currentColor;
3284
- enable-background: new; }
3285
-
3286
- .hm5 {
3287
- fill: currentColor; }
3288
-
3289
- .hm6 {
3290
- fill: currentColor; }
3291
-
3292
- /* animations */
3293
- @-webkit-keyframes scale-up-br {
3294
- 0% {
3295
- transform: scale(0.5);
3296
- transform-origin: 100% 100%; }
3297
- 100% {
3298
- transform: scale(1);
3299
- transform-origin: 100% 100%; } }
3300
- @keyframes scale-up-br {
3301
- 0% {
3302
- transform: scale(0.5);
3303
- transform-origin: 100% 100%; }
3304
- 100% {
3305
- transform: scale(1);
3306
- transform-origin: 100% 100%; } }
3307
-
3308
- @-webkit-keyframes scale-up-bl {
3309
- 0% {
3310
- transform: scale(0.5);
3311
- transform-origin: 0% 100%; }
3312
- 100% {
3313
- transform: scale(1);
3314
- transform-origin: 0% 100%; } }
3315
-
3316
- @keyframes scale-up-bl {
3317
- 0% {
3318
- transform: scale(0.5);
3319
- transform-origin: 0% 100%; }
3320
- 100% {
3321
- transform: scale(1);
3322
- transform-origin: 0% 100%; } }
3323
-
3324
- .react-autoql-chart-container {
3325
- position: relative;
3326
- height: 100%;
3327
- width: 100%; }
3328
- .react-autoql-chart-container svg {
3329
- background: transparent !important; }
3330
- .react-autoql-chart-container.loading {
3331
- opacity: 0; }
3332
-
3333
- /* These are not inline styles since they do not apply to saved PNG charts */
3334
- .react-autoql-chart-container .square {
3335
- transition: fill-opacity 0.3s ease; }
3336
-
3337
- .react-autoql-chart-container .bar,
3338
- .react-autoql-chart-container .stacked-bar,
3339
- .react-autoql-chart-container .circle {
3340
- transition: fill-opacity 0.3s ease;
3341
- fill-opacity: 0.7 !important; }
3342
-
3343
- .react-autoql-chart-container .bar:hover,
3344
- .react-autoql-chart-container .stacked-bar:hover,
3345
- .react-autoql-chart-container .circle:hover,
3346
- .react-autoql-chart-container .square:hover {
3347
- fill-opacity: 1 !important; }
3348
-
3349
- .react-autoql-chart-container .vertex-dot:hover,
3350
- .react-autoql-chart-container .line-dot:hover,
3351
- .react-autoql-chart-container .line-dot.active {
3352
- opacity: 1 !important; }
3353
-
3354
- .react-autoql-chart-container .bar.active,
3355
- .react-autoql-chart-container .stacked-bar.active {
3356
- fill-opacity: 1 !important; }
3357
-
3358
- .axis {
3359
- font-family: inherit; }
3360
-
3361
- .pie-chart .labels {
3362
- font-size: 12px;
3363
- font-weight: 600; }
3364
-
3365
- .react-autoql-chart-container g.tick {
3366
- transition: all 0.3s ease; }
3367
-
3368
- .react-autoql-chart-container .react-autoql-heatmap-chart g.tick line,
3369
- .react-autoql-chart-container .react-autoql-bubble-chart g.tick line {
3370
- opacity: 0 !important; }
3371
-
3372
- .axis-selector-container {
3373
- background: var(--react-autoql-background-color-primary);
3374
- color: var(--react-autoql-text-color-primary);
3375
- z-index: 9999;
3376
- padding: 5px 0;
3377
- max-height: 300px;
3378
- min-width: 150px;
3379
- overflow-y: auto; }
3380
- .axis-selector-container .axis-select-option.active {
3381
- background: var(--react-autoql-hover-color); }
3382
- .axis-selector-container .react-autoql-checkbox {
3383
- margin-left: 20px; }
3384
- .axis-selector-container .react-autoql-checkbox .react-autoql-checkbox__input {
3385
- width: 18px;
3386
- height: 18px; }
3387
- .axis-selector-container .react-autoql-list-item {
3388
- padding-left: 25px;
3389
- padding-right: 15px;
3390
- font-size: 12px;
3391
- line-height: 28px; }
3392
- .axis-selector-container .string-select-list-item {
3393
- font-size: 12px;
3394
- line-height: 28px; }
3395
- .axis-selector-container .string-select-list-item.active {
3396
- background: rgba(0, 0, 0, 0.04); }
3397
- .axis-selector-container .number-selector-header {
3398
- margin-top: 10px;
3399
- padding: 0px 18px;
3400
- font-size: 12px;
3401
- padding-bottom: 7px;
3402
- font-weight: 500;
3403
- opacity: 0.6; }
3404
- .axis-selector-container .axis-selector-content {
3405
- list-style-type: none;
3406
- width: 100%;
3407
- margin: 0;
3408
- padding: 0; }
3409
- .axis-selector-container .axis-selector-content li {
3410
- color: var(--react-autoql-text-color-primary);
3411
- width: 100%;
3412
- height: 30px;
3413
- line-height: 30px;
3414
- padding: 0 15px;
3415
- cursor: pointer; }
3416
- .axis-selector-container .axis-selector-content li:hover {
3417
- background: rgba(0, 0, 0, 0.05); }
3418
-
3419
- .axis-selector-apply-btn {
3420
- background: var(--react-autoql-background-color-primary);
3421
- padding: 5px; }
3422
-
3423
- .react-autoql-radio-btn-container {
3424
- display: inline-block;
3425
- border-radius: 4px; }
3426
- .react-autoql-radio-btn-container [type='radio']:checked,
3427
- .react-autoql-radio-btn-container [type='radio']:not(:checked) {
3428
- position: absolute;
3429
- left: -9999px; }
3430
- .react-autoql-radio-btn-container [type='radio']:checked + label,
3431
- .react-autoql-radio-btn-container [type='radio']:not(:checked) + label {
3432
- position: relative;
3433
- padding-left: 28px;
3434
- cursor: pointer;
3435
- line-height: 20px;
3436
- display: inline-block; }
3437
- .react-autoql-radio-btn-container [type='radio']:checked + label:before,
3438
- .react-autoql-radio-btn-container [type='radio']:not(:checked) + label:before {
3439
- content: '';
3440
- position: absolute;
3441
- left: 1px;
3442
- top: 1px;
3443
- width: 18px;
3444
- height: 18px;
3445
- border: 1px solid #ddd;
3446
- border-radius: 100%;
3447
- background: #fff; }
3448
- .react-autoql-radio-btn-container [type='radio']:checked + label:after,
3449
- .react-autoql-radio-btn-container [type='radio']:not(:checked) + label:after {
3450
- content: '';
3451
- width: 12px;
3452
- height: 12px;
3453
- background: var(--react-autoql-accent-color, #26a7df);
3454
- position: absolute;
3455
- top: 4px;
3456
- left: 4px;
3457
- border-radius: 100%;
3458
- transition: all 0.2s ease; }
3459
- .react-autoql-radio-btn-container [type='radio']:not(:checked) + label:after {
3460
- opacity: 0;
3461
- transform: scale(0); }
3462
- .react-autoql-radio-btn-container [type='radio']:checked + label:after {
3463
- opacity: 1;
3464
- transform: scale(1); }
3465
- .react-autoql-radio-btn-container .react-autoql-radio-btn {
3466
- position: relative;
3467
- display: inline-block;
3468
- padding: 3px 12px;
3469
- border: 1px solid var(--react-autoql-border-color, #dcdcdc);
3470
- margin-left: -1px;
3471
- transition: all 0.2s ease;
3472
- cursor: pointer; }
3473
- .react-autoql-radio-btn-container .react-autoql-radio-btn.active {
3474
- background-color: var(--react-autoql-accent-color, #26a7df);
3475
- border-color: var(--react-autoql-accent-color, #26a7df);
3476
- color: #fff;
3477
- z-index: 3; }
3478
- .react-autoql-radio-btn-container .react-autoql-radio-btn.active.outlined {
3479
- background-color: inherit;
3480
- color: var(--react-autoql-accent-color, #26a7df);
3481
- z-index: 3; }
3482
- .react-autoql-radio-btn-container .react-autoql-radio-btn:hover:not(.active) {
3483
- border-color: var(--react-autoql-accent-color, #26a7df);
3484
- color: var(--react-autoql-accent-color, #26a7df);
3485
- z-index: 2; }
3486
- .react-autoql-radio-btn-container .react-autoql-radio-btn:first-child {
3487
- border-top-left-radius: 4px;
3488
- border-bottom-left-radius: 4px;
3489
- margin-left: 0; }
3490
- .react-autoql-radio-btn-container .react-autoql-radio-btn:last-child {
3491
- border-top-right-radius: 4px;
3492
- border-bottom-right-radius: 4px; }
3493
-
3494
- .viz-toolbar {
3495
- position: absolute;
3496
- background: inherit;
3497
- padding: 5px;
3498
- border-radius: 6px;
3499
- line-height: 28px;
3500
- border: 1px solid #d3d3d352; }
3501
- .viz-toolbar.vertical .react-autoql-toolbar-btn {
3502
- display: block; }
3503
-
3504
- .react-autoql-toolbar-btn {
3505
- height: 28px;
3506
- width: 28px;
3507
- background: none;
3508
- border: none;
3509
- font-size: 16px;
3510
- line-height: 28px;
3511
- vertical-align: top;
3512
- color: var(--react-autoql-accent-color);
3513
- cursor: pointer;
3514
- outline: none !important; }
3515
-
3516
- .react-autoql-toolbar-btn.green {
3517
- color: #2ecc40; }
3518
-
3519
- .react-autoql-toolbar-btn.red {
3520
- color: #e80000; }
3521
-
3522
- .react-autoql-toolbar-btn:hover {
3523
- opacity: 0.7; }
3524
-
3525
- .react-autoql-input-container {
3526
- position: relative;
3527
- margin: 2px 5px;
3528
- display: inline-block; }
3529
- .react-autoql-input-container .react-autoql-input {
3530
- border: 1px solid rgba(0, 0, 0, 0.1);
3531
- border-radius: 4px;
3532
- line-height: 32px;
3533
- min-height: 34px;
3534
- padding: 0 10px;
3535
- width: 100%;
3536
- outline: none !important;
3537
- transition: all 0.2s ease;
3538
- transition-property: border-color, color, opacity; }
3539
- .react-autoql-input-container .react-autoql-input.with-icon {
3540
- padding-left: 38px; }
3541
- .react-autoql-input-container .react-autoql-input::-moz-placeholder {
3542
- /* Chrome, Firefox, Opera, Safari 10.1+ */
3543
- color: rgba(0, 0, 0, 0.2);
3544
- opacity: 1;
3545
- /* Firefox */
3546
- font-style: italic; }
3547
- .react-autoql-input-container .react-autoql-input:-ms-input-placeholder {
3548
- /* Chrome, Firefox, Opera, Safari 10.1+ */
3549
- color: rgba(0, 0, 0, 0.2);
3550
- opacity: 1;
3551
- /* Firefox */
3552
- font-style: italic; }
3553
- .react-autoql-input-container .react-autoql-input::placeholder {
3554
- /* Chrome, Firefox, Opera, Safari 10.1+ */
3555
- color: rgba(0, 0, 0, 0.2);
3556
- opacity: 1;
3557
- /* Firefox */
3558
- font-style: italic; }
3559
- .react-autoql-input-container .react-autoql-input-icon {
3560
- position: absolute;
3561
- left: 12px;
3562
- top: 8px;
3563
- opacity: 0.4;
3564
- transition: all 0.2s ease; }
3565
- .react-autoql-input-container .react-autoql-input-icon span.react-autoql-icon svg {
3566
- height: 17px;
3567
- width: 17px; }
3568
- .react-autoql-input-container:hover .react-autoql-input,
3569
- .react-autoql-input-container .react-autoql-input:focus {
3570
- border-color: var(--react-autoql-accent-color, #26a7df); }
3571
- .react-autoql-input-container:hover .react-autoql-input-icon,
3572
- .react-autoql-input-container .react-autoql-input-icon.focus {
3573
- opacity: 1;
3574
- color: var(--react-autoql-accent-color, #26a7df); }
3575
-
3576
- .content {
3577
- margin: 2rem; }
3578
-
3579
- .react-autoql-checkbox-container {
3580
- display: inline-block;
3581
- vertical-align: middle; }
3582
-
3583
- .react-autoql-checkbox {
3584
- display: flex;
3585
- align-items: center;
3586
- position: relative;
3587
- cursor: pointer; }
3588
- .react-autoql-checkbox .react-autoql-checkbox--switch__input:checked,
3589
- .react-autoql-checkbox .react-autoql-checkbox__input:checked {
3590
- border-color: var(--react-autoql-accent-color, #26a7df);
3591
- background: var(--react-autoql-accent-color, #26a7df); }
3592
-
3593
- .react-autoql-checkbox__label {
3594
- flex-shrink: 0;
3595
- padding: 0.5rem 1rem;
3596
- color: #fff;
3597
- cursor: pointer; }
3598
-
3599
- .react-autoql-checkbox__input {
3600
- position: relative;
3601
- flex-shrink: 0;
3602
- width: 20px;
3603
- height: 20px;
3604
- appearance: none;
3605
- -webkit-appearance: none;
3606
- -moz-appearance: none;
3607
- outline: none;
3608
- background: transparent;
3609
- border: 1px solid;
3610
- border-color: var(--react-autoql-accent-color, #26a7df);
3611
- border-radius: 2px;
3612
- cursor: pointer; }
3613
-
3614
- .react-autoql-checkbox__input::before {
3615
- content: ' ';
3616
- position: absolute;
3617
- top: 50%;
3618
- right: 50%;
3619
- bottom: 50%;
3620
- left: 50%;
3621
- transition: all 0.2s;
3622
- background: var(--react-autoql-accent-color, #26a7df); }
3623
-
3624
- .react-autoql-checkbox-tick {
3625
- position: absolute;
3626
- color: white;
3627
- left: 3px;
3628
- line-height: 20px;
3629
- pointer-events: none; }
3630
-
3631
- .react-autoql-checkbox--switch__input::before {
3632
- box-shadow: 0 0 2px 1px #00000030; }
3633
-
3634
- .react-autoql-checkbox__input:checked::before,
3635
- .react-autoql-checkbox__input:indeterminate::before {
3636
- top: 0;
3637
- right: 0;
3638
- bottom: 0;
3639
- left: 0; }
3640
-
3641
- .react-autoql-checkbox__input:indeterminate::before {
3642
- top: 7px;
3643
- bottom: 7px; }
3644
-
3645
- .react-autoql-checkbox__input:disabled {
3646
- border-color: #5a5358;
3647
- cursor: default; }
3648
-
3649
- .react-autoql-checkbox__input:disabled::before {
3650
- background-color: #5a5358; }
3651
-
3652
- .react-autoql-checkbox__input:disabled + .react-autoql-checkbox__label {
3653
- color: gray;
3654
- cursor: default; }
3655
-
3656
- .react-autoql-checkbox--has-error__input {
3657
- border-color: red;
3658
- background-color: rgba(255, 0, 0, 0.2); }
3659
-
3660
- .react-autoql-checkbox--has-error__input::before {
3661
- background-color: red; }
3662
-
3663
- .react-autoql-checkbox--switch__label::after {
3664
- content: 'off';
3665
- margin-left: 0.25rem; }
3666
-
3667
- .react-autoql-checkbox--switch__input {
3668
- width: 36px;
3669
- height: 20px;
3670
- border-radius: 16px;
3671
- background: var(--react-autoql-background-color-tertiary);
3672
- border: 1px solid var(--react-autoql-background-color-tertiary); }
3673
-
3674
- .react-autoql-checkbox--switch__input::before {
3675
- top: 2px;
3676
- right: 18px;
3677
- bottom: 2px;
3678
- left: 2px;
3679
- border-radius: 50%;
3680
- background: #fff; }
3681
-
3682
- .react-autoql-checkbox--switch__input:checked
3683
- + .react-autoql-checkbox--switch__label::after {
3684
- content: 'on'; }
3685
-
3686
- .react-autoql-checkbox--switch__input:checked::before {
3687
- right: 2px;
3688
- left: 18px;
3689
- top: 2px;
3690
- bottom: 2px; }
3691
-
3692
- .react-autoql-checkbox-label {
3693
- padding-left: 6px;
3694
- line-height: 100%; }
3695
-
3696
- .react-autoql-modal-container
3697
- .react-autoql-checkbox__input:not(.react-autoql-checkbox--switch__input),
3698
- .react-autoql-drawer
3699
- .react-autoql-checkbox__input:not(.react-autoql-checkbox--switch__input) {
3700
- border-color: var(--react-autoql-accent-color); }
3701
-
3702
- .react-autoql-modal-container
3703
- .react-autoql-checkbox__input::before:not(.react-autoql-checkbox--switch__input),
3704
- .react-autoql-drawer
3705
- .react-autoql-checkbox__input::before:not(.react-autoql-checkbox--switch__input) {
3706
- background: var(--react-autoql-accent-color); }
3707
-
3708
-
3709
- .react-autoql-steps-container {
3710
- margin: 10px; }
3711
-
3712
- .react-autoql-step-container {
3713
- position: relative;
3714
- border-left: 1px solid var(--react-autoql-text-color-placeholder, lightgray);
3715
- margin-left: 12px;
3716
- padding-left: 20px;
3717
- padding-bottom: 5px;
3718
- transition: all 0.5s ease; }
3719
- .react-autoql-step-container.complete {
3720
- border-color: var(--react-autoql-accent-color, #26a7df); }
3721
- .react-autoql-step-container.complete .react-autoql-step-dot {
3722
- border-color: var(--react-autoql-accent-color, #26a7df);
3723
- background: var(--react-autoql-accent-color, #26a7df);
3724
- color: #fff; }
3725
- .react-autoql-step-container.error {
3726
- border-color: var(--react-autoql-warning-color); }
3727
- .react-autoql-step-container.error .react-autoql-step-dot {
3728
- border-color: var(--react-autoql-warning-color);
3729
- background: var(--react-autoql-warning-color);
3730
- color: white; }
3731
- .react-autoql-step-container:not(.active) .react-autoql-step-content-container {
3732
- pointer-events: none;
3733
- height: 10px;
3734
- opacity: 0;
3735
- margin: 0; }
3736
-
3737
- .react-autoql-step-dot {
3738
- position: absolute;
3739
- top: 0;
3740
- left: -10px;
3741
- height: 20px;
3742
- width: 20px;
3743
- border-radius: 15px;
3744
- background: var(--react-autoql-background-color-primary, #fff);
3745
- border: 1px solid var(--react-autoql-text-color-placeholder, lightgray);
3746
- transition: all 0.5s ease;
3747
- font-size: 10.5px;
3748
- color: var(--react-autoql-text-color-placeholder, lightgray);
3749
- text-align: center; }
3750
-
3751
- .react-autoql-step-title-container:hover {
3752
- cursor: pointer;
3753
- transition: color 0.2s ease;
3754
- color: var(--react-autoql-accent-color, #26a7df); }
3755
-
3756
- .react-autoql-step-title {
3757
- font-weight: 500;
3758
- font-size: 15px;
3759
- line-height: 15px;
3760
- padding-top: 2px; }
3761
-
3762
- .react-autoql-step-subtitle {
3763
- font-size: 13px;
3764
- padding-top: 6px;
3765
- padding-bottom: 6px;
3766
- color: var(--react-autoql-text-color-placeholder, rgba(0, 0, 0, 0.4)); }
3767
-
3768
- .react-autoql-step-content {
3769
- margin: 15px;
3770
- margin-top: 0; }
3771
-
3772
- .react-autoql-step-content-container {
3773
- transition-timing-function: ease;
3774
- transition-property: height, opacity, margin;
3775
- transition-duration: 0.5s;
3776
- opacity: 1; }
3777
-
3778
- .react-autoql-notification-rule-container {
3779
- display: flex; }
3780
- .react-autoql-notification-rule-container .react-autoql-rule-input {
3781
- display: flex;
3782
- flex-direction: column;
3783
- flex: 1;
3784
- width: 100%; }
3785
- .react-autoql-notification-rule-container .react-autoql-rule-first-input-container {
3786
- display: flex;
3787
- flex: 1; }
3788
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container {
3789
- display: flex;
3790
- padding: 2px 0;
3791
- border-radius: 4px;
3792
- transition: all 0.3s ease;
3793
- flex: 1; }
3794
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-rule-condition-select {
3795
- flex: 0;
3796
- flex-basis: 33px; }
3797
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-rule-input {
3798
- flex: 1;
3799
- margin-left: 4px; }
3800
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-delete-compare-btn {
3801
- cursor: pointer;
3802
- opacity: 0.6;
3803
- padding: 6px; }
3804
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-delete-compare-btn:hover {
3805
- opacity: 1; }
3806
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container.hidden {
3807
- display: none; }
3808
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-input-container {
3809
- margin: 0; }
3810
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-input-container:hover + .react-autoql-rule-term-type-selector,
3811
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-input-container.focus
3812
- + .react-autoql-rule-term-type-selector {
3813
- color: var(--react-autoql-accent-color, #26a7df);
3814
- border-color: var(--react-autoql-accent-color, #26a7df); }
3815
-
3816
- .read-only-rule-term {
3817
- display: inline-block;
3818
- border: 1px solid rgba(0, 0, 0, 0.06);
3819
- background: rgba(0, 0, 0, 0.02);
3820
- padding: 3px 7px;
3821
- line-height: 1.5em;
3822
- margin-right: 5px;
3823
- margin-bottom: 2px;
3824
- margin-top: 2px;
3825
- border-radius: 4px; }
3826
-
3827
- .expression-term-validation-error {
3828
- padding: 0 10px;
3829
- color: var(--react-autoql-warning-color); }
3830
-
3831
- .notification-read-only-group {
3832
- border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
3833
- border-radius: 4px;
3834
- padding: 10px; }
3835
-
3836
- .notification-rule-add-group-btn {
3837
- display: inline-block;
3838
- height: 35px;
3839
- width: 35px;
3840
- border-radius: 20px;
3841
- background: var(--react-autoql-accent-color, #26a7df);
3842
- color: #fff;
3843
- line-height: 38px;
3844
- text-align: center;
3845
- font-size: 20px;
3846
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
3847
- transition: all 0.2s ease;
3848
- margin-right: 5px;
3849
- cursor: pointer; }
3850
- .notification-rule-add-group-btn:hover {
3851
- box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.32); }
3852
-
3853
- .notification-group-wrapper {
3854
- position: relative;
3855
- margin-right: 0px;
3856
- margin-top: 20px;
3857
- margin-bottom: 10px; }
3858
- .notification-group-wrapper:first-of-type {
3859
- margin-top: 0; }
3860
- .notification-group-wrapper:last-of-type {
3861
- margin-bottom: 0; }
3862
- .notification-group-wrapper .notification-and-or-break {
3863
- position: absolute;
3864
- color: rgba(0, 0, 0, 0.4);
3865
- left: -35px;
3866
- border-left: 1px dashed var(--react-autoql-border-color, rgba(0, 0, 0, 0.15)); }
3867
- .notification-group-wrapper .notification-and-or-text {
3868
- width: 41px;
3869
- z-index: 999999;
3870
- position: absolute;
3871
- left: -21px;
3872
- top: -5px;
3873
- padding: 4px;
3874
- border-radius: 4px;
3875
- text-align: center;
3876
- font-size: 12px; }
3877
- .notification-group-wrapper .react-autoql-notification-group-container {
3878
- position: relative;
3879
- padding: 20px;
3880
- padding-top: 55px;
3881
- padding-bottom: 20px;
3882
- border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
3883
- border-radius: 4px; }
3884
- .notification-group-wrapper .react-autoql-notification-group-container .react-autoql-notification-group-add-btn,
3885
- .notification-group-wrapper .react-autoql-notification-group-container .react-autoql-notification-group-delete-btn {
3886
- position: absolute;
3887
- height: 21px;
3888
- width: 21px;
3889
- border-radius: 10px;
3890
- border: 1px solid;
3891
- line-height: 22px;
3892
- text-align: center;
3893
- background: var(--react-autoql-background-color-primary, white);
3894
- color: var(--react-autoql-text-color-placeholder, rgba(0, 0, 0, 0.2));
3895
- transition: all 0.3s ease;
3896
- cursor: pointer; }
3897
- .notification-group-wrapper .react-autoql-notification-group-container .react-autoql-notification-group-add-btn span.react-autoql-icon svg,
3898
- .notification-group-wrapper .react-autoql-notification-group-container .react-autoql-notification-group-delete-btn span.react-autoql-icon svg {
3899
- width: 15px;
3900
- height: 15px; }
3901
- .notification-group-wrapper .react-autoql-notification-group-container .react-autoql-notification-group-add-btn:hover,
3902
- .notification-group-wrapper .react-autoql-notification-group-container .react-autoql-notification-group-delete-btn:hover {
3903
- color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.6)); }
3904
- .notification-group-wrapper .react-autoql-notification-group-container .react-autoql-notification-group-add-btn {
3905
- bottom: -11px;
3906
- left: calc(50% - 10px); }
3907
- .notification-group-wrapper .react-autoql-notification-group-container .react-autoql-notification-group-delete-btn {
3908
- top: -10px;
3909
- right: -10px; }
3910
- .notification-group-wrapper .react-autoql-notification-group-container .notification-rule-and-or-select {
3911
- display: block;
3912
- position: absolute;
3913
- margin: 0 auto;
3914
- padding: 0 10px;
3915
- background: inherit;
3916
- top: 16px;
3917
- color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.5)); }
3918
- .notification-group-wrapper .react-autoql-notification-group-container .notification-rule-btn-container {
3919
- display: flex;
3920
- margin-top: 5px;
3921
- width: calc(100% - 25px); }
3922
- .notification-group-wrapper .react-autoql-notification-group-container .notification-rule-btn-container .notification-rule-add-btn {
3923
- flex: 1;
3924
- text-align: center;
3925
- border-style: dashed;
3926
- height: 42px;
3927
- line-height: 29px;
3928
- margin-right: 0 !important;
3929
- background: inherit;
3930
- overflow: hidden; }
3931
- .notification-group-wrapper .react-autoql-notification-group-container .react-autoql-notification-rule-add-btn {
3932
- display: inline-block;
3933
- height: 20px;
3934
- width: 20px;
3935
- border-radius: 20px;
3936
- margin-left: 5px;
3937
- line-height: 20px;
3938
- text-align: center;
3939
- font-size: 14px;
3940
- color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.2));
3941
- opacity: 0.5;
3942
- border: 1px solid;
3943
- transition: all 0.2s ease;
3944
- cursor: pointer; }
3945
- .notification-group-wrapper .react-autoql-notification-group-container .react-autoql-notification-rule-add-btn:hover {
3946
- opacity: 1;
3947
- color: var(--react-autoql-accent-color); }
3948
-
3949
-
3950
-
3951
- .spinner-loader {
3952
- display: inline-block;
3953
- width: 14px;
3954
- height: 14px;
3955
- margin-right: 6px; }
3956
-
3957
- .spinner-loader:after {
3958
- content: " ";
3959
- display: block;
3960
- width: 16px;
3961
- height: 16px;
3962
- margin: 0px;
3963
- border-radius: 50%;
3964
- border: 1px solid currentColor;
3965
- border-color: currentColor transparent currentColor transparent;
3966
- -webkit-animation: spinner-loader 1.2s linear infinite;
3967
- animation: spinner-loader 1.2s linear infinite; }
3968
-
3969
- @-webkit-keyframes spinner-loader {
3970
- 0% {
3971
- transform: rotate(0deg); }
3972
- 100% {
3973
- transform: rotate(360deg); } }
3974
-
3975
- @keyframes spinner-loader {
3976
- 0% {
3977
- transform: rotate(0deg); }
3978
- 100% {
3979
- transform: rotate(360deg); } }
3980
-
3981
- .slack-modal-error-container,
3982
- .slack-modal-empty-list-message {
3983
- display: flex;
3984
- flex-direction: column;
3985
- justify-content: center;
3986
- align-items: center;
3987
- text-align: center;
3988
- height: 100%;
3989
- margin-bottom: 50px; }
3990
- .slack-modal-error-container .react-autoql-btn,
3991
- .slack-modal-empty-list-message .react-autoql-btn {
3992
- margin-top: 10px; }
3993
-
3994
- .slack-email-instructions-button {
3995
- cursor: pointer;
3996
- opacity: 0.6;
3997
- font-size: 13px;
3998
- font-style: italic;
3999
- text-decoration: underline; }
4000
-
4001
- .slack-email-instructions-popover {
4002
- color: var(--react-autoql-text-color-primary);
4003
- background: var(--react-autoql-background-color-primary);
4004
- padding: 18px;
4005
- max-width: 500px; }
4006
-
4007
- .slack-channel-list {
4008
- width: 390px; }
4009
-
4010
- .remove-channel-popover {
4011
- color: var(--react-autoql-text-color-primary);
4012
- background: var(--react-autoql-background-color-primary);
4013
- text-align: right;
4014
- padding: 18px;
4015
- width: 226px; }
4016
-
4017
- .remove-channel-btn {
4018
- cursor: pointer;
4019
- margin-left: 8px; }
4020
- .remove-channel-btn:hover {
4021
- color: #ca0b00; }
4022
-
4023
- .connect-channel-form-container,
4024
- .slack-channel-list-container {
4025
- display: flex;
4026
- justify-content: center;
4027
- flex-direction: column;
4028
- align-items: center; }
4029
- .connect-channel-form-container .channel-list-btn-container,
4030
- .slack-channel-list-container .channel-list-btn-container {
4031
- position: absolute;
4032
- bottom: 0;
4033
- display: flex;
4034
- flex-direction: row;
4035
- justify-content: stretch;
4036
- width: 100%; }
4037
- .connect-channel-form-container .channel-list-btn-container button,
4038
- .slack-channel-list-container .channel-list-btn-container button {
4039
- flex: 1; }
4040
- .connect-channel-form-container .connect-channel-back-btn,
4041
- .slack-channel-list-container .connect-channel-back-btn {
4042
- position: absolute;
4043
- border-radius: 100px;
4044
- border: 1px solid rgba(0, 0, 0, 0.1);
4045
- padding: 4px 7px;
4046
- top: 3px;
4047
- left: -50px;
4048
- width: 30px;
4049
- height: 30px;
4050
- cursor: pointer; }
4051
- .connect-channel-form-container .channel-list,
4052
- .slack-channel-list-container .channel-list {
4053
- position: relative;
4054
- max-height: 200px;
4055
- min-height: 100px;
4056
- margin-top: 10px;
4057
- overflow-y: auto;
4058
- margin-bottom: 5px;
4059
- width: 355px;
4060
- border: 1px solid rgba(0, 0, 0, 0.15);
4061
- border-radius: 4px; }
4062
- .connect-channel-form-container .channel-item,
4063
- .slack-channel-list-container .channel-item {
4064
- position: relative;
4065
- text-align: center;
4066
- padding: 10px 20px;
4067
- transition: all 0.3s ease;
4068
- font-weight: bold;
4069
- cursor: pointer; }
4070
- .connect-channel-form-container .channel-item.selected,
4071
- .slack-channel-list-container .channel-item.selected {
4072
- background-color: var(--react-autoql-accent-color);
4073
- color: #fff; }
4074
- .connect-channel-form-container .channel-item:hover:not(.selected),
4075
- .slack-channel-list-container .channel-item:hover:not(.selected) {
4076
- background-color: rgba(0, 0, 0, 0.05); }
4077
- .connect-channel-form-container .channel-item:hover .delete-channel-btn,
4078
- .slack-channel-list-container .channel-item:hover .delete-channel-btn {
4079
- opacity: 1; }
4080
- .connect-channel-form-container .delete-channel-btn,
4081
- .slack-channel-list-container .delete-channel-btn {
4082
- transition: all 0.3s ease;
4083
- opacity: 0;
4084
- position: absolute;
4085
- right: 10px;
4086
- font-size: 18px;
4087
- top: 7px;
4088
- margin-left: 10px; }
4089
- .connect-channel-form-container .delete-channel-btn:hover,
4090
- .slack-channel-list-container .delete-channel-btn:hover {
4091
- color: #ca0b00; }
4092
- .connect-channel-form-container .send-to-slack-btn,
4093
- .slack-channel-list-container .send-to-slack-btn {
4094
- margin-top: 15px;
4095
- width: 200px; }
4096
- .connect-channel-form-container .react-autoql-checkbox-container,
4097
- .slack-channel-list-container .react-autoql-checkbox-container {
4098
- margin-left: 10px; }
4099
- .connect-channel-form-container .connect-channel-form,
4100
- .slack-channel-list-container .connect-channel-form {
4101
- position: relative;
4102
- width: 350px; }
4103
- .connect-channel-form-container .form-subtitle,
4104
- .slack-channel-list-container .form-subtitle {
4105
- font-size: 12px;
4106
- opacity: 0.8; }
4107
- .connect-channel-form-container .react-autoql-input-container,
4108
- .slack-channel-list-container .react-autoql-input-container {
4109
- width: 100%;
4110
- margin-left: 0;
4111
- margin-bottom: 5px; }
4112
- .connect-channel-form-container .connect-channel-title,
4113
- .connect-channel-form-container .select-channel-title,
4114
- .slack-channel-list-container .connect-channel-title,
4115
- .slack-channel-list-container .select-channel-title {
4116
- margin-bottom: 15px;
4117
- font-size: 20px; }
4118
- .connect-channel-form-container .connect-channel-btn,
4119
- .slack-channel-list-container .connect-channel-btn {
4120
- margin-top: 10px;
4121
- text-align: center; }
4122
- .connect-channel-form-container .connect-channel-btn button,
4123
- .slack-channel-list-container .connect-channel-btn button {
4124
- width: 200px; }
4125
-
4126
- .react-autoql-select {
4127
- border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
4128
- border-radius: 4px;
4129
- background: var(--react-autoql-background-color-primary, white);
4130
- display: inline-block;
4131
- font-size: 13px;
4132
- line-height: 32px;
4133
- height: 34px;
4134
- margin: 0 3px;
4135
- padding: 0 11px;
4136
- color: var(--react-autoql-accent-color, #26a7df);
4137
- transition: all 0.2s ease;
4138
- cursor: pointer; }
4139
- .react-autoql-select:hover {
4140
- border-color: var(--react-autoql-accent-color, #26a7df); }
4141
-
4142
- .react-autoql-select-popup-container {
4143
- background: var(--react-autoql-background-color-primary, white);
4144
- padding: 10px 0;
4145
- max-height: 300px;
4146
- overflow-y: auto; }
4147
- .react-autoql-select-popup-container .react-autoql-select-option.active {
4148
- background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.04)); }
4149
- .react-autoql-select-popup-container .react-autoql-select-popup {
4150
- list-style-type: none;
4151
- width: 100%;
4152
- margin: 0;
4153
- padding: 0; }
4154
- .react-autoql-select-popup-container .react-autoql-select-popup li {
4155
- color: var(--react-autoql-text-color-primary);
4156
- width: 100%;
4157
- height: 35px;
4158
- line-height: 35px;
4159
- padding: 0 20px;
4160
- cursor: pointer; }
4161
- .react-autoql-select-popup-container .react-autoql-select-popup li:hover {
4162
- background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.04)); }
4163
-
4164
- .react-autoql-list-item {
4165
- padding: 0 20px;
4166
- display: flex;
4167
- justify-content: space-between;
4168
- line-height: 36px;
4169
- -webkit-user-select: none;
4170
- -moz-user-select: none;
4171
- -ms-user-select: none;
4172
- user-select: none; }
4173
- .react-autoql-list-item:hover {
4174
- background: var(--react-autoql-hover-color); }
4175
- .react-autoql-list-item.selected {
4176
- background: var(--react-autoql-hover-color); }
4177
-
4178
- .col-visibility-header {
4179
- padding-left: 20px;
4180
- display: flex;
4181
- justify-content: space-between;
4182
- margin-bottom: 10px;
4183
- font-weight: 600;
4184
- font-size: 15px; }
4185
-
4186
- .react-autoql-list-item:not(:last-child) {
4187
- border-bottom: 1px solid #d3d3d34a; }
4188
-
4189
- .react-autoql-select-with-arrow div {
4190
- color: inherit; }
4191
-
4192
- .react-autoql-select-with-arrow > div {
4193
- border-color: var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
4194
- background: var(--react-autoql-background-color-primary, white);
4195
- transition: all 0.2s ease;
4196
- cursor: pointer !important; }
4197
- .react-autoql-select-with-arrow > div:hover {
4198
- border-color: var(--react-autoql-accent-color, #26a7df); }
4199
- .react-autoql-select-with-arrow > div .react-autoql-select-with-arrow__option {
4200
- cursor: pointer; }
4201
- .react-autoql-select-with-arrow > div .react-autoql-select-with-arrow__option:hover {
4202
- background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.15)); }
4203
- .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 {
4204
- background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.1)); }
4205
-
4206
- .react-autoql-select-with-arrow:focus {
4207
- outline: none !important; }
4208
-
4209
- .react-autoql-select-with-arrow__control--is-focused {
4210
- border: 1px solid var(--react-autoql-accent-color, #26a7df) !important;
4211
- box-shadow: none !important; }
4212
-
4213
-
4214
- g.legendOrdinal,
4215
- g.legendOrdinal tspan {
4216
- stroke-width: 10px;
4217
- stroke: transparent;
4218
- letter-spacing: 0;
4219
- cursor: pointer; }
4220
-
4221
- .x-axis-label-border,
4222
- .y-axis-label-border,
4223
- .legend-title-border {
4224
- cursor: pointer;
4225
- stroke: transparent;
4226
- opacity: 0.5;
4227
- transition: stroke 0.3s ease; }
4228
- .x-axis-label-border:hover,
4229
- .y-axis-label-border:hover,
4230
- .legend-title-border:hover {
4231
- stroke: var(--react-autoql-accent-color) !important; }
4232
-
4233
- .react-autoql-axis-selector-arrow {
4234
- opacity: 1 !important; }
4235
-
4236
- g.legendOrdinal .legendTitle tspan {
4237
- letter-spacing: 0.04em !important;
4238
- font-size: 12px;
4239
- cursor: default; }