react-autoql 3.5.4 → 3.5.5

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