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