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