@3deye-toolkit/react-event-search 0.0.1-alpha.21

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.
@@ -0,0 +1,1748 @@
1
+ .x-3deye-button {
2
+ color: inherit;
3
+ background: none;
4
+ border: none;
5
+ position: relative;
6
+ padding: 4px;
7
+ text-transform: uppercase;
8
+ -webkit-user-select: none;
9
+ -moz-user-select: none;
10
+ -ms-user-select: none;
11
+ user-select: none;
12
+ font-family: 'Roboto', sans-serif;
13
+ text-align: center;
14
+ align-items: flex-start;
15
+ }
16
+
17
+ .x-3deye-button.fullwidth {
18
+ width: 100%;
19
+ }
20
+
21
+ .x-3deye-button:focus, .x-3deye-button.x-3deye-button--icon:not(:disabled):hover {
22
+ background-color: rgba(var(--surface-highlight-rgb), 0.1);
23
+ }
24
+
25
+ .x-3deye-button--icon {
26
+ border-radius: 16px;
27
+ width: 32px;
28
+ height: 32px;
29
+ display: inline-flex;
30
+ align-items: center;
31
+ justify-content: center;
32
+ }
33
+
34
+ .x-3deye-button:disabled {
35
+ opacity: 0.4;
36
+ }
37
+
38
+ .x-3deye-button.x-3deye-button--save, .x-3deye-button.x-3deye-button--cancel {
39
+ color: white;
40
+ border-radius: 4px;
41
+ text-transform: none;
42
+ margin: 4px;
43
+ min-width: 80px;
44
+ }
45
+
46
+ .x-3deye-button.x-3deye-button--save.fullwidth, .x-3deye-button.x-3deye-button--cancel.fullwidth {
47
+ width: calc(100% - 8px);
48
+ }
49
+
50
+ .x-3deye-button:not(:disabled) {
51
+ cursor: pointer;
52
+ }
53
+
54
+ .x-3deye-button.x-3deye-button--save {
55
+ background-color: #27B9A1;
56
+ }
57
+
58
+ .x-3deye-button.x-3deye-button--save:focus {
59
+ transition: box-shadow 0.2s cubic-bezier(0.215, 0.610, 0.355, 1);
60
+ box-shadow: 0 0 0 2px rgba(39, 185, 161, 0.33);
61
+ }
62
+
63
+ .x-3deye-button.x-3deye-button--cancel {
64
+ background-color: rgb(119, 87, 178);
65
+ }
66
+
67
+ .x-3deye-button.x-3deye-button--cancel:focus {
68
+ transition: box-shadow 0.2s cubic-bezier(0.215, 0.610, 0.355, 1);
69
+ box-shadow: 0 0 0 2px rgba(119, 87, 178, 0.33);
70
+ }
71
+
72
+
73
+ .x-3deye-button canvas {
74
+ color: rgb(var(--surface-highlight-rgb));
75
+ }
76
+
77
+ :root {
78
+ --reach-tooltip: 1;
79
+ }
80
+
81
+ [data-reach-tooltip] {
82
+ z-index: 1;
83
+ pointer-events: none;
84
+ position: absolute;
85
+ padding: 0.25em 0.5em;
86
+ box-shadow: 2px 2px 10px hsla(0, 0%, 0%, 0.1);
87
+ white-space: nowrap;
88
+ font-size: 85%;
89
+ background: #f0f0f0;
90
+ color: #444;
91
+ border: solid 1px #ccc;
92
+ }
93
+
94
+ .color-selector {
95
+ display: flex;
96
+ z-index: 1;
97
+ padding: 5px 8px;
98
+ justify-content: space-between;
99
+ align-items: center;
100
+ }
101
+
102
+ .color-selector__items {
103
+ display: flex;
104
+ }
105
+
106
+ .color-selector__item {
107
+ border: none;
108
+ width: 20px;
109
+ height: 20px;
110
+ border-radius: 20px;
111
+ margin: 4px;
112
+ padding: 0;
113
+ box-shadow: 0 0 0 1.5px white;
114
+ transition: box-shadow 0.2s ease-in;
115
+ }
116
+
117
+ .color-selector__item:focus {
118
+ box-shadow: 0 0 0 1.5px white, 0 0 0 5px rgba(255, 255, 255, 0.2);
119
+ }
120
+
121
+ .color-selector__item:focus:active {
122
+ box-shadow: 0 0 0 1.5px white;
123
+ }
124
+
125
+ .color-selector__item .icon {
126
+ opacity: 0;
127
+ transition: opacity 0.2s ease-in;
128
+ }
129
+
130
+ .color-selector__item.selected .icon {
131
+ opacity: 1;
132
+ }
133
+
134
+ /**
135
+ * @license
136
+ * Copyright Google LLC All Rights Reserved.
137
+ *
138
+ * Use of this source code is governed by an MIT-style license that can be
139
+ * found in the LICENSE file at https://github.com/material-components/material-components-web/blob/master/LICENSE
140
+ */
141
+ @-webkit-keyframes mdc-slider-emphasize {
142
+ 0% {
143
+ -webkit-animation-timing-function: ease-out;
144
+ animation-timing-function: ease-out;
145
+ }
146
+ 50% {
147
+ -webkit-animation-timing-function: ease-in;
148
+ animation-timing-function: ease-in;
149
+ transform: scale(0.85);
150
+ }
151
+ 100% {
152
+ transform: scale(0.571);
153
+ }
154
+ }
155
+ @keyframes mdc-slider-emphasize {
156
+ 0% {
157
+ -webkit-animation-timing-function: ease-out;
158
+ animation-timing-function: ease-out;
159
+ }
160
+ 50% {
161
+ -webkit-animation-timing-function: ease-in;
162
+ animation-timing-function: ease-in;
163
+ transform: scale(0.85);
164
+ }
165
+ 100% {
166
+ transform: scale(0.571);
167
+ }
168
+ }
169
+ .mdc-slider {
170
+ position: relative;
171
+ width: 100%;
172
+ height: 48px;
173
+ cursor: pointer;
174
+ touch-action: pan-x;
175
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
176
+ }
177
+ .mdc-slider:not(.mdc-slider--disabled) .mdc-slider__track {
178
+ background-color: #018786;
179
+ /* @alternate */
180
+ background-color: var(--mdc-theme-secondary, #018786);
181
+ }
182
+ .mdc-slider:not(.mdc-slider--disabled) .mdc-slider__track-container::after {
183
+ background-color: #018786;
184
+ /* @alternate */
185
+ background-color: var(--mdc-theme-secondary, #018786);
186
+ opacity: 0.26;
187
+ }
188
+ .mdc-slider:not(.mdc-slider--disabled) .mdc-slider__track-marker-container {
189
+ background-color: #018786;
190
+ /* @alternate */
191
+ background-color: var(--mdc-theme-secondary, #018786);
192
+ }
193
+ .mdc-slider:not(.mdc-slider--disabled) .mdc-slider__thumb {
194
+ fill: #018786;
195
+ /* @alternate */
196
+ fill: var(--mdc-theme-secondary, #018786);
197
+ stroke: #018786;
198
+ /* @alternate */
199
+ stroke: var(--mdc-theme-secondary, #018786);
200
+ }
201
+ .mdc-slider:not(.mdc-slider--disabled) .mdc-slider__focus-ring {
202
+ background-color: #018786;
203
+ /* @alternate */
204
+ background-color: var(--mdc-theme-secondary, #018786);
205
+ }
206
+ .mdc-slider:not(.mdc-slider--disabled) .mdc-slider__pin {
207
+ background-color: #018786;
208
+ /* @alternate */
209
+ background-color: var(--mdc-theme-secondary, #018786);
210
+ }
211
+ .mdc-slider:not(.mdc-slider--disabled) .mdc-slider__pin {
212
+ color: white;
213
+ /* @alternate */
214
+ color: var(--mdc-theme-text-primary-on-dark, white);
215
+ }
216
+ .mdc-slider--disabled {
217
+ cursor: auto;
218
+ }
219
+ .mdc-slider--disabled .mdc-slider__track {
220
+ background-color: #9a9a9a;
221
+ }
222
+ .mdc-slider--disabled .mdc-slider__track-container::after {
223
+ background-color: #9a9a9a;
224
+ opacity: 0.26;
225
+ }
226
+ .mdc-slider--disabled .mdc-slider__track-marker-container {
227
+ background-color: #9a9a9a;
228
+ }
229
+ .mdc-slider--disabled .mdc-slider__thumb {
230
+ fill: #9a9a9a;
231
+ stroke: #9a9a9a;
232
+ }
233
+ .mdc-slider--disabled .mdc-slider__thumb {
234
+ /* @alternate */
235
+ stroke: white;
236
+ stroke: var(--mdc-slider-bg-color-behind-component, white);
237
+ }
238
+ .mdc-slider:focus {
239
+ outline: none;
240
+ }
241
+ .mdc-slider__track-container {
242
+ position: absolute;
243
+ top: 50%;
244
+ width: 100%;
245
+ height: 2px;
246
+ overflow: hidden;
247
+ }
248
+ .mdc-slider__track-container::after {
249
+ position: absolute;
250
+ top: 0;
251
+ left: 0;
252
+ display: block;
253
+ width: 100%;
254
+ height: 100%;
255
+ content: "";
256
+ }
257
+ .mdc-slider__track {
258
+ position: absolute;
259
+ width: 100%;
260
+ height: 100%;
261
+ transform-origin: left top;
262
+ will-change: transform;
263
+ }
264
+ .mdc-slider[dir=rtl] .mdc-slider__track, [dir=rtl] .mdc-slider .mdc-slider__track {
265
+ transform-origin: right top;
266
+ }
267
+
268
+ .mdc-slider__track-marker-container {
269
+ display: flex;
270
+ margin-right: 0;
271
+ margin-left: -1px;
272
+ visibility: hidden;
273
+ }
274
+ .mdc-slider[dir=rtl] .mdc-slider__track-marker-container, [dir=rtl] .mdc-slider .mdc-slider__track-marker-container {
275
+ margin-right: -1px;
276
+ margin-left: 0;
277
+ }
278
+
279
+ .mdc-slider__track-marker-container::after {
280
+ display: block;
281
+ width: 2px;
282
+ height: 2px;
283
+ content: "";
284
+ }
285
+ .mdc-slider__track-marker {
286
+ flex: 1;
287
+ }
288
+ .mdc-slider__track-marker::after {
289
+ display: block;
290
+ width: 2px;
291
+ height: 2px;
292
+ content: "";
293
+ }
294
+ .mdc-slider__track-marker:first-child::after {
295
+ width: 3px;
296
+ }
297
+ .mdc-slider__thumb-container {
298
+ position: absolute;
299
+ top: 15px;
300
+ left: 0;
301
+ width: 21px;
302
+ height: 100%;
303
+ -webkit-user-select: none;
304
+ -moz-user-select: none;
305
+ -ms-user-select: none;
306
+ user-select: none;
307
+ will-change: transform;
308
+ }
309
+ .mdc-slider__thumb {
310
+ position: absolute;
311
+ top: 0;
312
+ left: 0;
313
+ transform: scale(0.571);
314
+ stroke-width: 3.5;
315
+ transition: transform 100ms ease-out, fill 100ms ease-out, stroke 100ms ease-out;
316
+ }
317
+ .mdc-slider__focus-ring {
318
+ width: 21px;
319
+ height: 21px;
320
+ border-radius: 50%;
321
+ opacity: 0;
322
+ transition: transform 266.67ms ease-out, opacity 266.67ms ease-out, background-color 266.67ms ease-out;
323
+ }
324
+ .mdc-slider__pin {
325
+ display: flex;
326
+ position: absolute;
327
+ top: 0;
328
+ left: 0;
329
+ align-items: center;
330
+ justify-content: center;
331
+ width: 26px;
332
+ height: 26px;
333
+ margin-top: -2px;
334
+ margin-left: -2px;
335
+ transform: rotate(-45deg) scale(0) translate(0, 0);
336
+ border-radius: 50% 50% 50% 0%;
337
+ z-index: 1;
338
+ transition: transform 100ms ease-out;
339
+ }
340
+ .mdc-slider__pin-value-marker {
341
+ -moz-osx-font-smoothing: grayscale;
342
+ -webkit-font-smoothing: antialiased;
343
+ font-family: Roboto, sans-serif;
344
+ /* @alternate */
345
+ font-family: var(--mdc-typography-body2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));
346
+ font-size: 0.875rem;
347
+ /* @alternate */
348
+ font-size: var(--mdc-typography-body2-font-size, 0.875rem);
349
+ line-height: 1.25rem;
350
+ /* @alternate */
351
+ line-height: var(--mdc-typography-body2-line-height, 1.25rem);
352
+ font-weight: 400;
353
+ /* @alternate */
354
+ font-weight: var(--mdc-typography-body2-font-weight, 400);
355
+ letter-spacing: 0.0178571429em;
356
+ /* @alternate */
357
+ letter-spacing: var(--mdc-typography-body2-letter-spacing, 0.0178571429em);
358
+ text-decoration: inherit;
359
+ /* @alternate */
360
+ -webkit-text-decoration: var(--mdc-typography-body2-text-decoration, inherit);
361
+ text-decoration: var(--mdc-typography-body2-text-decoration, inherit);
362
+ text-transform: inherit;
363
+ /* @alternate */
364
+ text-transform: var(--mdc-typography-body2-text-transform, inherit);
365
+ transform: rotate(45deg);
366
+ }
367
+
368
+ .mdc-slider--active .mdc-slider__thumb {
369
+ transform: scale3d(1, 1, 1);
370
+ }
371
+
372
+ .mdc-slider--focus .mdc-slider__thumb {
373
+ -webkit-animation: mdc-slider-emphasize 266.67ms linear;
374
+ animation: mdc-slider-emphasize 266.67ms linear;
375
+ }
376
+ .mdc-slider--focus .mdc-slider__focus-ring {
377
+ transform: scale3d(1.55, 1.55, 1.55);
378
+ opacity: 0.25;
379
+ }
380
+
381
+ .mdc-slider--in-transit .mdc-slider__thumb {
382
+ transition-delay: 140ms;
383
+ }
384
+
385
+ .mdc-slider--in-transit .mdc-slider__thumb-container,
386
+ .mdc-slider--in-transit .mdc-slider__track,
387
+ .mdc-slider:focus:not(.mdc-slider--active) .mdc-slider__thumb-container,
388
+ .mdc-slider:focus:not(.mdc-slider--active) .mdc-slider__track {
389
+ transition: transform 80ms ease;
390
+ }
391
+
392
+ .mdc-slider--discrete.mdc-slider--active .mdc-slider__thumb {
393
+ transform: scale(calc(12 / 21));
394
+ }
395
+ .mdc-slider--discrete.mdc-slider--active .mdc-slider__pin {
396
+ transform: rotate(-45deg) scale(1) translate(19px, -20px);
397
+ }
398
+ .mdc-slider--discrete.mdc-slider--focus .mdc-slider__thumb {
399
+ -webkit-animation: none;
400
+ animation: none;
401
+ }
402
+ .mdc-slider--discrete.mdc-slider--display-markers .mdc-slider__track-marker-container {
403
+ visibility: visible;
404
+ }
405
+ .menu-items-container {
406
+ background: rgba(0, 0, 0, 0.9);
407
+ box-shadow: 0 12px 28px 0 rgba(0, 0, 0, 0.2),0 2px 4px 0 rgb(0 0 0 / 0.1),inset 0 0 0 1px rgb(255 255 255 /0.05);
408
+ border-radius: 4px;
409
+ padding: 4px;
410
+ }
411
+
412
+ .menu-items-container .x-3deye-button {
413
+ text-transform: none;
414
+ }
415
+
416
+ .menu-items-container button {
417
+ background: none;
418
+ border: none;
419
+ text-align: left;
420
+ color: white;
421
+ padding: 8px 16px;
422
+ display: block;
423
+ width: 100%;
424
+ border-radius: 4px;
425
+ }
426
+
427
+ .menu-items-container button:hover {
428
+ background-color: rgba(255, 255, 255, 0.22);
429
+ }
430
+
431
+ .themed-menu.menu-items-container {
432
+ background-color: var(--background);
433
+ }
434
+
435
+ .themed-menu.menu-items-container button {
436
+ color: var(--primary-text);
437
+ }
438
+
439
+ .themed-menu.menu-items-container button:hover {
440
+ background-color: rgba(var(--surface-highlight-rgb), var(--surface-highlight-opacity));
441
+ }
442
+
443
+ /**
444
+ * @license
445
+ * Copyright Google LLC All Rights Reserved.
446
+ *
447
+ * Use of this source code is governed by an MIT-style license that can be
448
+ * found in the LICENSE file at https://github.com/material-components/material-components-web/blob/master/LICENSE
449
+ */
450
+ @-webkit-keyframes mdc-ripple-fg-radius-in {
451
+ from {
452
+ -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
453
+ animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
454
+ transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
455
+ }
456
+ to {
457
+ transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
458
+ }
459
+ }
460
+ @keyframes mdc-ripple-fg-radius-in {
461
+ from {
462
+ -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
463
+ animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
464
+ transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
465
+ }
466
+ to {
467
+ transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
468
+ }
469
+ }
470
+ @-webkit-keyframes mdc-ripple-fg-opacity-in {
471
+ from {
472
+ -webkit-animation-timing-function: linear;
473
+ animation-timing-function: linear;
474
+ opacity: 0;
475
+ }
476
+ to {
477
+ opacity: var(--mdc-ripple-fg-opacity, 0);
478
+ }
479
+ }
480
+ @keyframes mdc-ripple-fg-opacity-in {
481
+ from {
482
+ -webkit-animation-timing-function: linear;
483
+ animation-timing-function: linear;
484
+ opacity: 0;
485
+ }
486
+ to {
487
+ opacity: var(--mdc-ripple-fg-opacity, 0);
488
+ }
489
+ }
490
+ @-webkit-keyframes mdc-ripple-fg-opacity-out {
491
+ from {
492
+ -webkit-animation-timing-function: linear;
493
+ animation-timing-function: linear;
494
+ opacity: var(--mdc-ripple-fg-opacity, 0);
495
+ }
496
+ to {
497
+ opacity: 0;
498
+ }
499
+ }
500
+ @keyframes mdc-ripple-fg-opacity-out {
501
+ from {
502
+ -webkit-animation-timing-function: linear;
503
+ animation-timing-function: linear;
504
+ opacity: var(--mdc-ripple-fg-opacity, 0);
505
+ }
506
+ to {
507
+ opacity: 0;
508
+ }
509
+ }
510
+ .mdc-ripple-surface {
511
+ --mdc-ripple-fg-size: 0;
512
+ --mdc-ripple-left: 0;
513
+ --mdc-ripple-top: 0;
514
+ --mdc-ripple-fg-scale: 1;
515
+ --mdc-ripple-fg-translate-end: 0;
516
+ --mdc-ripple-fg-translate-start: 0;
517
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
518
+ position: relative;
519
+ outline: none;
520
+ overflow: hidden;
521
+ }
522
+ .mdc-ripple-surface::before, .mdc-ripple-surface::after {
523
+ position: absolute;
524
+ border-radius: 50%;
525
+ opacity: 0;
526
+ pointer-events: none;
527
+ content: "";
528
+ }
529
+ .mdc-ripple-surface::before {
530
+ transition: opacity 15ms linear, background-color 15ms linear;
531
+ z-index: 1;
532
+ }
533
+ .mdc-ripple-surface.mdc-ripple-upgraded::before {
534
+ transform: scale(var(--mdc-ripple-fg-scale, 1));
535
+ }
536
+ .mdc-ripple-surface.mdc-ripple-upgraded::after {
537
+ top: 0;
538
+ /* @noflip */
539
+ left: 0;
540
+ transform: scale(0);
541
+ transform-origin: center center;
542
+ }
543
+ .mdc-ripple-surface.mdc-ripple-upgraded--unbounded::after {
544
+ top: var(--mdc-ripple-top, 0);
545
+ /* @noflip */
546
+ left: var(--mdc-ripple-left, 0);
547
+ }
548
+ .mdc-ripple-surface.mdc-ripple-upgraded--foreground-activation::after {
549
+ -webkit-animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards;
550
+ animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards;
551
+ }
552
+ .mdc-ripple-surface.mdc-ripple-upgraded--foreground-deactivation::after {
553
+ -webkit-animation: mdc-ripple-fg-opacity-out 150ms;
554
+ animation: mdc-ripple-fg-opacity-out 150ms;
555
+ transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
556
+ }
557
+ .mdc-ripple-surface::before, .mdc-ripple-surface::after {
558
+ background-color: #000;
559
+ }
560
+ .mdc-ripple-surface:hover::before {
561
+ opacity: 0.04;
562
+ }
563
+ .mdc-ripple-surface.mdc-ripple-upgraded--background-focused::before, .mdc-ripple-surface:not(.mdc-ripple-upgraded):focus::before {
564
+ transition-duration: 75ms;
565
+ opacity: 0.12;
566
+ }
567
+ .mdc-ripple-surface:not(.mdc-ripple-upgraded)::after {
568
+ transition: opacity 150ms linear;
569
+ }
570
+ .mdc-ripple-surface:not(.mdc-ripple-upgraded):active::after {
571
+ transition-duration: 75ms;
572
+ opacity: 0.12;
573
+ }
574
+ .mdc-ripple-surface.mdc-ripple-upgraded {
575
+ --mdc-ripple-fg-opacity: 0.12;
576
+ }
577
+ .mdc-ripple-surface::before, .mdc-ripple-surface::after {
578
+ top: calc(50% - 100%);
579
+ /* @noflip */
580
+ left: calc(50% - 100%);
581
+ width: 200%;
582
+ height: 200%;
583
+ }
584
+ .mdc-ripple-surface.mdc-ripple-upgraded::after {
585
+ width: var(--mdc-ripple-fg-size, 100%);
586
+ height: var(--mdc-ripple-fg-size, 100%);
587
+ }
588
+ .mdc-ripple-surface[data-mdc-ripple-is-unbounded] {
589
+ overflow: visible;
590
+ }
591
+ .mdc-ripple-surface[data-mdc-ripple-is-unbounded]::before, .mdc-ripple-surface[data-mdc-ripple-is-unbounded]::after {
592
+ top: calc(50% - 50%);
593
+ /* @noflip */
594
+ left: calc(50% - 50%);
595
+ width: 100%;
596
+ height: 100%;
597
+ }
598
+ .mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::before, .mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after {
599
+ top: var(--mdc-ripple-top, calc(50% - 50%));
600
+ /* @noflip */
601
+ left: var(--mdc-ripple-left, calc(50% - 50%));
602
+ width: var(--mdc-ripple-fg-size, 100%);
603
+ height: var(--mdc-ripple-fg-size, 100%);
604
+ }
605
+ .mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after {
606
+ width: var(--mdc-ripple-fg-size, 100%);
607
+ height: var(--mdc-ripple-fg-size, 100%);
608
+ }
609
+ .mdc-ripple-surface--primary::before, .mdc-ripple-surface--primary::after {
610
+ background-color: #6200ee;
611
+ /* @alternate */
612
+ background-color: var(--mdc-theme-primary, #6200ee);
613
+ }
614
+ .mdc-ripple-surface--primary:hover::before {
615
+ opacity: 0.04;
616
+ }
617
+ .mdc-ripple-surface--primary.mdc-ripple-upgraded--background-focused::before, .mdc-ripple-surface--primary:not(.mdc-ripple-upgraded):focus::before {
618
+ transition-duration: 75ms;
619
+ opacity: 0.12;
620
+ }
621
+ .mdc-ripple-surface--primary:not(.mdc-ripple-upgraded)::after {
622
+ transition: opacity 150ms linear;
623
+ }
624
+ .mdc-ripple-surface--primary:not(.mdc-ripple-upgraded):active::after {
625
+ transition-duration: 75ms;
626
+ opacity: 0.12;
627
+ }
628
+ .mdc-ripple-surface--primary.mdc-ripple-upgraded {
629
+ --mdc-ripple-fg-opacity: 0.12;
630
+ }
631
+ .mdc-ripple-surface--accent::before, .mdc-ripple-surface--accent::after {
632
+ background-color: #018786;
633
+ /* @alternate */
634
+ background-color: var(--mdc-theme-secondary, #018786);
635
+ }
636
+ .mdc-ripple-surface--accent:hover::before {
637
+ opacity: 0.04;
638
+ }
639
+ .mdc-ripple-surface--accent.mdc-ripple-upgraded--background-focused::before, .mdc-ripple-surface--accent:not(.mdc-ripple-upgraded):focus::before {
640
+ transition-duration: 75ms;
641
+ opacity: 0.12;
642
+ }
643
+ .mdc-ripple-surface--accent:not(.mdc-ripple-upgraded)::after {
644
+ transition: opacity 150ms linear;
645
+ }
646
+ .mdc-ripple-surface--accent:not(.mdc-ripple-upgraded):active::after {
647
+ transition-duration: 75ms;
648
+ opacity: 0.12;
649
+ }
650
+ .mdc-ripple-surface--accent.mdc-ripple-upgraded {
651
+ --mdc-ripple-fg-opacity: 0.12;
652
+ }
653
+ .event-list-item {
654
+ -webkit-user-select: none;
655
+ -moz-user-select: none;
656
+ -ms-user-select: none;
657
+ user-select: none;
658
+ position: absolute;
659
+ font-size: 12px;
660
+ color: rgba(255, 255, 255, 0.8);
661
+ background-color: rgba(255, 255, 255, 0.1);
662
+ top: 0;
663
+ bottom: 2px;
664
+ left: 0;
665
+ right: 0;
666
+ --mdc-theme-primary: white;
667
+ }
668
+
669
+ .event-list-item.mdc-ripple-surface {
670
+ position: absolute;
671
+ }
672
+
673
+ .event-list-item .x-3deye-button--icon:hover,
674
+ .event-list-item .x-3deye-button--icon:focus {
675
+ background-color: rgba(0, 0, 0, 0.2);
676
+ }
677
+
678
+ .event-list-item .acknowledged-overlay {
679
+ position: absolute;
680
+ top: 0;
681
+ left: 0;
682
+ bottom: 0;
683
+ right: 0;
684
+ pointer-events: none;
685
+ display: grid;
686
+ place-items: center;
687
+ background-color: rgba(0, 0, 0, 0.4);
688
+ color: white;
689
+ text-transform: uppercase;
690
+ font-weight: bold;
691
+ }
692
+
693
+ .event-list-item .no-preview-overlay {
694
+ display: block;
695
+ position: absolute;
696
+ top: 0;
697
+ left: 0;
698
+ bottom: 0;
699
+ right: 0;
700
+ pointer-events: none;
701
+ background-position: center;
702
+ background-repeat: no-repeat;
703
+ background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAABaCAYAAABzAJLvAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AIDBB8ysGG6bgAAAy1JREFUeNrtnD1oFFEUhc8s6Y0gCDHrT64/EE0UCVEQxB9ioSgWFoqNRgQFG0EQUlhYCXYRBSFuIogkTSKCoNhY2FpYiDYHEYJYiRYuiOhY5EVWFyNxNzvv3T1ftc2+eXO/uWd29s0MIIQQQgghhBBCCCGEEEIIIYQQQgghxILkea4ieIWkqQrNpRTZfF6QnEytk0n2k/xGco8EL8w2AEdIVrIsi1ry/NxIbgXwEsBtM3umzPh3N3SR/EGyksBcyyRzkqMyt3jJ1ZjjmuRAkDsiY/9XwLVBciUWyTWxPBjkXtcvf2dxTXJDkHtNhpzFNcldQe5FmXES1zWxvDvIvapYdhbX4To3J3lFJpzFNcn9Qe55GXAS1zWxPBTkXlYsO4trkjuD3EuquLO4JnkoyD2tSjuJ65pYPhzkXlAsO4trkvuC3HOqrLO4JnksyD3hqTaZI8n9mFu2mwAwBaBjEV8vA7gFYNjMxvM8R5Zlv6J7/rMEFyv4HoCTjYxhZtkfY54xszsp16UEP3Q2+YA5CmAs9aJ4Epw3Ue5BADMeiuJJcDM795GX/ZHgernTnvapQ1p/Y8bbDqmDnSPBEtxWvJVgx5hZjzfJElxPH4BXEuyXKoAdXjpZl0n1MZ0D+AKgh+RndXA8TDT4/Y9A3VLjJnVwwdQs523H3P/RfWa2qHMoyTKAN+GpxuH5Mc3sgzItAkjeCIv1GxsYI5mnGttN7miQu6UJY0X/VGNbUHOD3M0g15p4wET3VGO7du7dIHf1EoytuC5Y7lij51zFdbyxPB5eeLKqBQeS4rrFnTsdOndlC7epuG5Roe8HuesK2LbieoljeSoUeEWBB1iScZ0l0LlPABwAsNzMPhU8ly4AswAmzGw4BcGlyOU+ADAEoFy0XAAws/cAugEcTyWuSxHLfQhgL4BlZjYby7yC5F4k8ka+LFK5zwEMAug0s2qkc0wirksRFu4xgIEQy9VYC5dKXGeRyX2KuReSdpvZ10Qu39YAeA1gEsBZM/uuDv47vQC6UpEbOvkdgPUATgHYrItbp5DU7U9CCCGEEEIIIYQQQgghhBBCCCGEEEIIIUTK/ASpxrk/iYZ2rgAAAABJRU5ErkJggg==');
704
+ background-color: rgba(128, 128, 128, 0.8);
705
+ }
706
+
707
+ .event-list-item-caption {
708
+ background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
709
+ padding-left: 8px;
710
+ padding-bottom: 8px;
711
+ padding-top: 8px;
712
+ position: absolute;
713
+ font-size: 11px;
714
+ bottom: 0;
715
+ left: 0;
716
+ right: 0;
717
+ z-index: 1;
718
+ pointer-events: none;
719
+ display: flex;
720
+ flex-direction: column;
721
+ justify-content: flex-end;
722
+ }
723
+
724
+ .event-list-item:hover .event-list-item__time {
725
+ text-decoration: underline;
726
+ }
727
+
728
+ .event-list-item__time {
729
+ text-shadow: 0 1px 2px black;
730
+ font-size: 12px;
731
+ /* order: 2;
732
+ line-height: 20px; */
733
+ }
734
+
735
+ .event-list-item__camera-name {
736
+ white-space: nowrap;
737
+ overflow: hidden;
738
+ text-overflow: ellipsis;
739
+ font-weight: bold;
740
+ font-size: 16px;
741
+ line-height: 24px;
742
+ font-family: 'Roboto', sans-serif;
743
+ /* text-shadow: 0 1px 2px black;
744
+ line-height: 20px; */
745
+ }
746
+
747
+ .event-list-item__duration {
748
+ background-color: rgba(0, 0, 0, 0.75);
749
+ font-size: 12px;
750
+ padding: 0 4px;
751
+ position: absolute;
752
+ right: 2px;
753
+ bottom: 32px;
754
+ opacity: 0.9;
755
+ }
756
+
757
+ .event-list-item-face {
758
+ opacity: 0;
759
+ position: absolute;
760
+ pointer-events: none;
761
+ box-shadow: 0 0 4px rgba(0, 0, 0, 0.75);
762
+ }
763
+
764
+ .event-list-item-face-trigger:hover + .event-list-item-face {
765
+ opacity: 1;
766
+ }
767
+
768
+ /**
769
+ * Corners
770
+ */
771
+
772
+ .event-list-item-face .frame {
773
+ position: absolute;
774
+ top: 0;
775
+ bottom: 0;
776
+ left: 0;
777
+ right: 0;
778
+ border: 1px solid rgba(255, 165, 0, 0.2);
779
+ }
780
+
781
+ .event-list-item-face .corner-highlight-tl {
782
+ position: absolute;
783
+ top: -1px;
784
+ left: -1px;
785
+ width: 10px;
786
+ height: 2px;
787
+ background-color: orange;
788
+ }
789
+
790
+ .event-list-item-face .corner-highlight-tl::before {
791
+ content: '';
792
+ display: block;
793
+ position: absolute;
794
+ top: 0;
795
+ left: 0;
796
+ height: 10px;
797
+ width: 2px;
798
+ background-color: orange;
799
+ }
800
+
801
+ .event-list-item-face .corner-highlight-tr {
802
+ position: absolute;
803
+ top: -1px;
804
+ right: -1px;
805
+ width: 10px;
806
+ height: 2px;
807
+ background-color: orange;
808
+ }
809
+
810
+ .event-list-item-face .corner-highlight-tr::before {
811
+ content: '';
812
+ display: block;
813
+ position: absolute;
814
+ top: 0;
815
+ right: 0;
816
+ height: 10px;
817
+ width: 2px;
818
+ background-color: orange;
819
+ }
820
+
821
+ .event-list-item-face .corner-highlight-br {
822
+ position: absolute;
823
+ bottom: -1px;
824
+ right: -1px;
825
+ width: 10px;
826
+ height: 2px;
827
+ background-color: orange;
828
+ }
829
+
830
+ .event-list-item-face .corner-highlight-br::before {
831
+ content: '';
832
+ display: block;
833
+ position: absolute;
834
+ bottom: 0;
835
+ right: 0;
836
+ height: 10px;
837
+ width: 2px;
838
+ background-color: orange;
839
+ }
840
+
841
+ .event-list-item-face .corner-highlight-bl {
842
+ position: absolute;
843
+ bottom: -1px;
844
+ left: -1px;
845
+ width: 10px;
846
+ height: 2px;
847
+ background-color: orange;
848
+ }
849
+
850
+ .event-list-item-face .corner-highlight-bl::before {
851
+ content: '';
852
+ display: block;
853
+ position: absolute;
854
+ bottom: 0;
855
+ left: 0;
856
+ height: 10px;
857
+ width: 2px;
858
+ background-color: orange;
859
+ }
860
+
861
+ .preloader-container {
862
+ color: var(--primary-text);
863
+ flex: 1;
864
+ display: flex;
865
+ justify-content: center;
866
+ align-items: center;
867
+ }
868
+
869
+ .react-datepicker__navigation-icon::before, .react-datepicker__year-read-view--down-arrow,
870
+ .react-datepicker__month-read-view--down-arrow,
871
+ .react-datepicker__month-year-read-view--down-arrow {
872
+ border-color: #ccc;
873
+ border-style: solid;
874
+ border-width: 3px 3px 0 0;
875
+ content: "";
876
+ display: block;
877
+ height: 9px;
878
+ position: absolute;
879
+ top: 6px;
880
+ width: 9px;
881
+ }
882
+
883
+ .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle {
884
+ margin-left: -4px;
885
+ position: absolute;
886
+ width: 0;
887
+ }
888
+
889
+ .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::after, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::after {
890
+ box-sizing: content-box;
891
+ position: absolute;
892
+ border: 8px solid transparent;
893
+ height: 0;
894
+ width: 1px;
895
+ content: "";
896
+ z-index: -1;
897
+ border-width: 8px;
898
+ left: -8px;
899
+ }
900
+
901
+ .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before {
902
+ border-bottom-color: #aeaeae;
903
+ }
904
+
905
+ .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle {
906
+ top: 0;
907
+ margin-top: -8px;
908
+ }
909
+
910
+ .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::after {
911
+ border-top: none;
912
+ border-bottom-color: #f0f0f0;
913
+ }
914
+
915
+ .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::after {
916
+ top: 0;
917
+ }
918
+
919
+ .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before {
920
+ top: -1px;
921
+ border-bottom-color: #aeaeae;
922
+ }
923
+
924
+ .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle {
925
+ bottom: 0;
926
+ margin-bottom: -8px;
927
+ }
928
+
929
+ .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::after {
930
+ border-bottom: none;
931
+ border-top-color: #fff;
932
+ }
933
+
934
+ .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::after {
935
+ bottom: 0;
936
+ }
937
+
938
+ .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before {
939
+ bottom: -1px;
940
+ border-top-color: #aeaeae;
941
+ }
942
+
943
+ .react-datepicker-wrapper {
944
+ display: inline-block;
945
+ padding: 0;
946
+ border: 0;
947
+ }
948
+
949
+ .react-datepicker {
950
+ font-family: "Helvetica Neue", helvetica, arial, sans-serif;
951
+ font-size: 0.8rem;
952
+ background-color: #fff;
953
+ color: #000;
954
+ border: 1px solid #aeaeae;
955
+ border-radius: 0.3rem;
956
+ display: inline-block;
957
+ position: relative;
958
+ }
959
+
960
+ .react-datepicker--time-only .react-datepicker__triangle {
961
+ left: 35px;
962
+ }
963
+
964
+ .react-datepicker--time-only .react-datepicker__time-container {
965
+ border-left: 0;
966
+ }
967
+
968
+ .react-datepicker--time-only .react-datepicker__time,
969
+ .react-datepicker--time-only .react-datepicker__time-box {
970
+ border-bottom-left-radius: 0.3rem;
971
+ border-bottom-right-radius: 0.3rem;
972
+ }
973
+
974
+ .react-datepicker__triangle {
975
+ position: absolute;
976
+ left: 50px;
977
+ }
978
+
979
+ .react-datepicker-popper {
980
+ z-index: 1;
981
+ }
982
+
983
+ .react-datepicker-popper[data-placement^="bottom"] {
984
+ padding-top: 10px;
985
+ }
986
+
987
+ .react-datepicker-popper[data-placement="bottom-end"] .react-datepicker__triangle, .react-datepicker-popper[data-placement="top-end"] .react-datepicker__triangle {
988
+ left: auto;
989
+ right: 50px;
990
+ }
991
+
992
+ .react-datepicker-popper[data-placement^="top"] {
993
+ padding-bottom: 10px;
994
+ }
995
+
996
+ .react-datepicker-popper[data-placement^="right"] {
997
+ padding-left: 8px;
998
+ }
999
+
1000
+ .react-datepicker-popper[data-placement^="right"] .react-datepicker__triangle {
1001
+ left: auto;
1002
+ right: 42px;
1003
+ }
1004
+
1005
+ .react-datepicker-popper[data-placement^="left"] {
1006
+ padding-right: 8px;
1007
+ }
1008
+
1009
+ .react-datepicker-popper[data-placement^="left"] .react-datepicker__triangle {
1010
+ left: 42px;
1011
+ right: auto;
1012
+ }
1013
+
1014
+ .react-datepicker__header {
1015
+ text-align: center;
1016
+ background-color: #f0f0f0;
1017
+ border-bottom: 1px solid #aeaeae;
1018
+ border-top-left-radius: 0.3rem;
1019
+ padding: 8px 0;
1020
+ position: relative;
1021
+ }
1022
+
1023
+ .react-datepicker__header--time {
1024
+ padding-bottom: 8px;
1025
+ padding-left: 5px;
1026
+ padding-right: 5px;
1027
+ }
1028
+
1029
+ .react-datepicker__header--time:not(.react-datepicker__header--time--only) {
1030
+ border-top-left-radius: 0;
1031
+ }
1032
+
1033
+ .react-datepicker__header:not(.react-datepicker__header--has-time-select) {
1034
+ border-top-right-radius: 0.3rem;
1035
+ }
1036
+
1037
+ .react-datepicker__year-dropdown-container--select,
1038
+ .react-datepicker__month-dropdown-container--select,
1039
+ .react-datepicker__month-year-dropdown-container--select,
1040
+ .react-datepicker__year-dropdown-container--scroll,
1041
+ .react-datepicker__month-dropdown-container--scroll,
1042
+ .react-datepicker__month-year-dropdown-container--scroll {
1043
+ display: inline-block;
1044
+ margin: 0 2px;
1045
+ }
1046
+
1047
+ .react-datepicker__current-month,
1048
+ .react-datepicker-time__header,
1049
+ .react-datepicker-year-header {
1050
+ margin-top: 0;
1051
+ color: #000;
1052
+ font-weight: bold;
1053
+ font-size: 0.944rem;
1054
+ }
1055
+
1056
+ .react-datepicker-time__header {
1057
+ text-overflow: ellipsis;
1058
+ white-space: nowrap;
1059
+ overflow: hidden;
1060
+ }
1061
+
1062
+ .react-datepicker__navigation {
1063
+ align-items: center;
1064
+ background: none;
1065
+ display: flex;
1066
+ justify-content: center;
1067
+ text-align: center;
1068
+ cursor: pointer;
1069
+ position: absolute;
1070
+ top: 2px;
1071
+ padding: 0;
1072
+ border: none;
1073
+ z-index: 1;
1074
+ height: 32px;
1075
+ width: 32px;
1076
+ text-indent: -999em;
1077
+ overflow: hidden;
1078
+ }
1079
+
1080
+ .react-datepicker__navigation--previous {
1081
+ left: 2px;
1082
+ }
1083
+
1084
+ .react-datepicker__navigation--next {
1085
+ right: 2px;
1086
+ }
1087
+
1088
+ .react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
1089
+ right: 85px;
1090
+ }
1091
+
1092
+ .react-datepicker__navigation--years {
1093
+ position: relative;
1094
+ top: 0;
1095
+ display: block;
1096
+ margin-left: auto;
1097
+ margin-right: auto;
1098
+ }
1099
+
1100
+ .react-datepicker__navigation--years-previous {
1101
+ top: 4px;
1102
+ }
1103
+
1104
+ .react-datepicker__navigation--years-upcoming {
1105
+ top: -4px;
1106
+ }
1107
+
1108
+ .react-datepicker__navigation:hover *::before {
1109
+ border-color: #a6a6a6;
1110
+ }
1111
+
1112
+ .react-datepicker__navigation-icon {
1113
+ position: relative;
1114
+ top: -1px;
1115
+ font-size: 20px;
1116
+ }
1117
+
1118
+ .react-datepicker__navigation-icon--next {
1119
+ left: -2px;
1120
+ }
1121
+
1122
+ .react-datepicker__navigation-icon--next::before {
1123
+ transform: rotate(45deg);
1124
+ left: -7px;
1125
+ }
1126
+
1127
+ .react-datepicker__navigation-icon--previous {
1128
+ right: -2px;
1129
+ }
1130
+
1131
+ .react-datepicker__navigation-icon--previous::before {
1132
+ transform: rotate(225deg);
1133
+ right: -7px;
1134
+ }
1135
+
1136
+ .react-datepicker__month-container {
1137
+ float: left;
1138
+ }
1139
+
1140
+ .react-datepicker__year {
1141
+ margin: 0.4rem;
1142
+ text-align: center;
1143
+ }
1144
+
1145
+ .react-datepicker__year-wrapper {
1146
+ display: flex;
1147
+ flex-wrap: wrap;
1148
+ max-width: 180px;
1149
+ }
1150
+
1151
+ .react-datepicker__year .react-datepicker__year-text {
1152
+ display: inline-block;
1153
+ width: 4rem;
1154
+ margin: 2px;
1155
+ }
1156
+
1157
+ .react-datepicker__month {
1158
+ margin: 0.4rem;
1159
+ text-align: center;
1160
+ }
1161
+
1162
+ .react-datepicker__month .react-datepicker__month-text,
1163
+ .react-datepicker__month .react-datepicker__quarter-text {
1164
+ display: inline-block;
1165
+ width: 4rem;
1166
+ margin: 2px;
1167
+ }
1168
+
1169
+ .react-datepicker__input-time-container {
1170
+ clear: both;
1171
+ width: 100%;
1172
+ float: left;
1173
+ margin: 5px 0 10px 15px;
1174
+ text-align: left;
1175
+ }
1176
+
1177
+ .react-datepicker__input-time-container .react-datepicker-time__caption {
1178
+ display: inline-block;
1179
+ }
1180
+
1181
+ .react-datepicker__input-time-container .react-datepicker-time__input-container {
1182
+ display: inline-block;
1183
+ }
1184
+
1185
+ .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input {
1186
+ display: inline-block;
1187
+ margin-left: 10px;
1188
+ }
1189
+
1190
+ .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input {
1191
+ width: auto;
1192
+ }
1193
+
1194
+ .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type="time"]::-webkit-inner-spin-button,
1195
+ .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type="time"]::-webkit-outer-spin-button {
1196
+ -webkit-appearance: none;
1197
+ margin: 0;
1198
+ }
1199
+
1200
+ .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type="time"] {
1201
+ -moz-appearance: textfield;
1202
+ }
1203
+
1204
+ .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter {
1205
+ margin-left: 5px;
1206
+ display: inline-block;
1207
+ }
1208
+
1209
+ .react-datepicker__time-container {
1210
+ float: right;
1211
+ border-left: 1px solid #aeaeae;
1212
+ width: 85px;
1213
+ }
1214
+
1215
+ .react-datepicker__time-container--with-today-button {
1216
+ display: inline;
1217
+ border: 1px solid #aeaeae;
1218
+ border-radius: 0.3rem;
1219
+ position: absolute;
1220
+ right: -72px;
1221
+ top: 0;
1222
+ }
1223
+
1224
+ .react-datepicker__time-container .react-datepicker__time {
1225
+ position: relative;
1226
+ background: white;
1227
+ border-bottom-right-radius: 0.3rem;
1228
+ }
1229
+
1230
+ .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {
1231
+ width: 85px;
1232
+ overflow-x: hidden;
1233
+ margin: 0 auto;
1234
+ text-align: center;
1235
+ border-bottom-right-radius: 0.3rem;
1236
+ }
1237
+
1238
+ .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {
1239
+ list-style: none;
1240
+ margin: 0;
1241
+ height: calc(195px + (1.7rem / 2));
1242
+ overflow-y: scroll;
1243
+ padding-right: 0;
1244
+ padding-left: 0;
1245
+ width: 100%;
1246
+ box-sizing: content-box;
1247
+ }
1248
+
1249
+ .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {
1250
+ height: 30px;
1251
+ padding: 5px 10px;
1252
+ white-space: nowrap;
1253
+ }
1254
+
1255
+ .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {
1256
+ cursor: pointer;
1257
+ background-color: #f0f0f0;
1258
+ }
1259
+
1260
+ .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {
1261
+ background-color: #216ba5;
1262
+ color: white;
1263
+ font-weight: bold;
1264
+ }
1265
+
1266
+ .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover {
1267
+ background-color: #216ba5;
1268
+ }
1269
+
1270
+ .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled {
1271
+ color: #ccc;
1272
+ }
1273
+
1274
+ .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover {
1275
+ cursor: default;
1276
+ background-color: transparent;
1277
+ }
1278
+
1279
+ .react-datepicker__week-number {
1280
+ color: #ccc;
1281
+ display: inline-block;
1282
+ width: 1.7rem;
1283
+ line-height: 1.7rem;
1284
+ text-align: center;
1285
+ margin: 0.166rem;
1286
+ }
1287
+
1288
+ .react-datepicker__week-number.react-datepicker__week-number--clickable {
1289
+ cursor: pointer;
1290
+ }
1291
+
1292
+ .react-datepicker__week-number.react-datepicker__week-number--clickable:hover {
1293
+ border-radius: 0.3rem;
1294
+ background-color: #f0f0f0;
1295
+ }
1296
+
1297
+ .react-datepicker__day-names,
1298
+ .react-datepicker__week {
1299
+ white-space: nowrap;
1300
+ }
1301
+
1302
+ .react-datepicker__day-names {
1303
+ margin-bottom: -8px;
1304
+ }
1305
+
1306
+ .react-datepicker__day-name,
1307
+ .react-datepicker__day,
1308
+ .react-datepicker__time-name {
1309
+ color: #000;
1310
+ display: inline-block;
1311
+ width: 1.7rem;
1312
+ line-height: 1.7rem;
1313
+ text-align: center;
1314
+ margin: 0.166rem;
1315
+ }
1316
+
1317
+ .react-datepicker__month--selected, .react-datepicker__month--in-selecting-range, .react-datepicker__month--in-range,
1318
+ .react-datepicker__quarter--selected,
1319
+ .react-datepicker__quarter--in-selecting-range,
1320
+ .react-datepicker__quarter--in-range {
1321
+ border-radius: 0.3rem;
1322
+ background-color: #216ba5;
1323
+ color: #fff;
1324
+ }
1325
+
1326
+ .react-datepicker__month--selected:hover, .react-datepicker__month--in-selecting-range:hover, .react-datepicker__month--in-range:hover,
1327
+ .react-datepicker__quarter--selected:hover,
1328
+ .react-datepicker__quarter--in-selecting-range:hover,
1329
+ .react-datepicker__quarter--in-range:hover {
1330
+ background-color: #1d5d90;
1331
+ }
1332
+
1333
+ .react-datepicker__month--disabled,
1334
+ .react-datepicker__quarter--disabled {
1335
+ color: #ccc;
1336
+ pointer-events: none;
1337
+ }
1338
+
1339
+ .react-datepicker__month--disabled:hover,
1340
+ .react-datepicker__quarter--disabled:hover {
1341
+ cursor: default;
1342
+ background-color: transparent;
1343
+ }
1344
+
1345
+ .react-datepicker__day,
1346
+ .react-datepicker__month-text,
1347
+ .react-datepicker__quarter-text,
1348
+ .react-datepicker__year-text {
1349
+ cursor: pointer;
1350
+ }
1351
+
1352
+ .react-datepicker__day:hover,
1353
+ .react-datepicker__month-text:hover,
1354
+ .react-datepicker__quarter-text:hover,
1355
+ .react-datepicker__year-text:hover {
1356
+ border-radius: 0.3rem;
1357
+ background-color: #f0f0f0;
1358
+ }
1359
+
1360
+ .react-datepicker__day--today,
1361
+ .react-datepicker__month-text--today,
1362
+ .react-datepicker__quarter-text--today,
1363
+ .react-datepicker__year-text--today {
1364
+ font-weight: bold;
1365
+ }
1366
+
1367
+ .react-datepicker__day--highlighted,
1368
+ .react-datepicker__month-text--highlighted,
1369
+ .react-datepicker__quarter-text--highlighted,
1370
+ .react-datepicker__year-text--highlighted {
1371
+ border-radius: 0.3rem;
1372
+ background-color: #3dcc4a;
1373
+ color: #fff;
1374
+ }
1375
+
1376
+ .react-datepicker__day--highlighted:hover,
1377
+ .react-datepicker__month-text--highlighted:hover,
1378
+ .react-datepicker__quarter-text--highlighted:hover,
1379
+ .react-datepicker__year-text--highlighted:hover {
1380
+ background-color: #32be3f;
1381
+ }
1382
+
1383
+ .react-datepicker__day--highlighted-custom-1,
1384
+ .react-datepicker__month-text--highlighted-custom-1,
1385
+ .react-datepicker__quarter-text--highlighted-custom-1,
1386
+ .react-datepicker__year-text--highlighted-custom-1 {
1387
+ color: magenta;
1388
+ }
1389
+
1390
+ .react-datepicker__day--highlighted-custom-2,
1391
+ .react-datepicker__month-text--highlighted-custom-2,
1392
+ .react-datepicker__quarter-text--highlighted-custom-2,
1393
+ .react-datepicker__year-text--highlighted-custom-2 {
1394
+ color: green;
1395
+ }
1396
+
1397
+ .react-datepicker__day--selected, .react-datepicker__day--in-selecting-range, .react-datepicker__day--in-range,
1398
+ .react-datepicker__month-text--selected,
1399
+ .react-datepicker__month-text--in-selecting-range,
1400
+ .react-datepicker__month-text--in-range,
1401
+ .react-datepicker__quarter-text--selected,
1402
+ .react-datepicker__quarter-text--in-selecting-range,
1403
+ .react-datepicker__quarter-text--in-range,
1404
+ .react-datepicker__year-text--selected,
1405
+ .react-datepicker__year-text--in-selecting-range,
1406
+ .react-datepicker__year-text--in-range {
1407
+ border-radius: 0.3rem;
1408
+ background-color: #216ba5;
1409
+ color: #fff;
1410
+ }
1411
+
1412
+ .react-datepicker__day--selected:hover, .react-datepicker__day--in-selecting-range:hover, .react-datepicker__day--in-range:hover,
1413
+ .react-datepicker__month-text--selected:hover,
1414
+ .react-datepicker__month-text--in-selecting-range:hover,
1415
+ .react-datepicker__month-text--in-range:hover,
1416
+ .react-datepicker__quarter-text--selected:hover,
1417
+ .react-datepicker__quarter-text--in-selecting-range:hover,
1418
+ .react-datepicker__quarter-text--in-range:hover,
1419
+ .react-datepicker__year-text--selected:hover,
1420
+ .react-datepicker__year-text--in-selecting-range:hover,
1421
+ .react-datepicker__year-text--in-range:hover {
1422
+ background-color: #1d5d90;
1423
+ }
1424
+
1425
+ .react-datepicker__day--keyboard-selected,
1426
+ .react-datepicker__month-text--keyboard-selected,
1427
+ .react-datepicker__quarter-text--keyboard-selected,
1428
+ .react-datepicker__year-text--keyboard-selected {
1429
+ border-radius: 0.3rem;
1430
+ background-color: #2a87d0;
1431
+ color: #fff;
1432
+ }
1433
+
1434
+ .react-datepicker__day--keyboard-selected:hover,
1435
+ .react-datepicker__month-text--keyboard-selected:hover,
1436
+ .react-datepicker__quarter-text--keyboard-selected:hover,
1437
+ .react-datepicker__year-text--keyboard-selected:hover {
1438
+ background-color: #1d5d90;
1439
+ }
1440
+
1441
+ .react-datepicker__day--in-selecting-range ,
1442
+ .react-datepicker__month-text--in-selecting-range ,
1443
+ .react-datepicker__quarter-text--in-selecting-range ,
1444
+ .react-datepicker__year-text--in-selecting-range {
1445
+ background-color: rgba(33, 107, 165, 0.5);
1446
+ }
1447
+
1448
+ .react-datepicker__month--selecting-range .react-datepicker__day--in-range , .react-datepicker__month--selecting-range
1449
+ .react-datepicker__month-text--in-range , .react-datepicker__month--selecting-range
1450
+ .react-datepicker__quarter-text--in-range , .react-datepicker__month--selecting-range
1451
+ .react-datepicker__year-text--in-range {
1452
+ background-color: #f0f0f0;
1453
+ color: #000;
1454
+ }
1455
+
1456
+ .react-datepicker__day--disabled,
1457
+ .react-datepicker__month-text--disabled,
1458
+ .react-datepicker__quarter-text--disabled,
1459
+ .react-datepicker__year-text--disabled {
1460
+ cursor: default;
1461
+ color: #ccc;
1462
+ }
1463
+
1464
+ .react-datepicker__day--disabled:hover,
1465
+ .react-datepicker__month-text--disabled:hover,
1466
+ .react-datepicker__quarter-text--disabled:hover,
1467
+ .react-datepicker__year-text--disabled:hover {
1468
+ background-color: transparent;
1469
+ }
1470
+
1471
+ .react-datepicker__month-text.react-datepicker__month--selected:hover, .react-datepicker__month-text.react-datepicker__month--in-range:hover, .react-datepicker__month-text.react-datepicker__quarter--selected:hover, .react-datepicker__month-text.react-datepicker__quarter--in-range:hover,
1472
+ .react-datepicker__quarter-text.react-datepicker__month--selected:hover,
1473
+ .react-datepicker__quarter-text.react-datepicker__month--in-range:hover,
1474
+ .react-datepicker__quarter-text.react-datepicker__quarter--selected:hover,
1475
+ .react-datepicker__quarter-text.react-datepicker__quarter--in-range:hover {
1476
+ background-color: #216ba5;
1477
+ }
1478
+
1479
+ .react-datepicker__month-text:hover,
1480
+ .react-datepicker__quarter-text:hover {
1481
+ background-color: #f0f0f0;
1482
+ }
1483
+
1484
+ .react-datepicker__input-container {
1485
+ position: relative;
1486
+ display: inline-block;
1487
+ width: 100%;
1488
+ }
1489
+
1490
+ .react-datepicker__year-read-view,
1491
+ .react-datepicker__month-read-view,
1492
+ .react-datepicker__month-year-read-view {
1493
+ border: 1px solid transparent;
1494
+ border-radius: 0.3rem;
1495
+ position: relative;
1496
+ }
1497
+
1498
+ .react-datepicker__year-read-view:hover,
1499
+ .react-datepicker__month-read-view:hover,
1500
+ .react-datepicker__month-year-read-view:hover {
1501
+ cursor: pointer;
1502
+ }
1503
+
1504
+ .react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,
1505
+ .react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,
1506
+ .react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,
1507
+ .react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,
1508
+ .react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,
1509
+ .react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow {
1510
+ border-top-color: #b3b3b3;
1511
+ }
1512
+
1513
+ .react-datepicker__year-read-view--down-arrow,
1514
+ .react-datepicker__month-read-view--down-arrow,
1515
+ .react-datepicker__month-year-read-view--down-arrow {
1516
+ transform: rotate(135deg);
1517
+ right: -16px;
1518
+ top: 0;
1519
+ }
1520
+
1521
+ .react-datepicker__year-dropdown,
1522
+ .react-datepicker__month-dropdown,
1523
+ .react-datepicker__month-year-dropdown {
1524
+ background-color: #f0f0f0;
1525
+ position: absolute;
1526
+ width: 50%;
1527
+ left: 25%;
1528
+ top: 30px;
1529
+ z-index: 1;
1530
+ text-align: center;
1531
+ border-radius: 0.3rem;
1532
+ border: 1px solid #aeaeae;
1533
+ }
1534
+
1535
+ .react-datepicker__year-dropdown:hover,
1536
+ .react-datepicker__month-dropdown:hover,
1537
+ .react-datepicker__month-year-dropdown:hover {
1538
+ cursor: pointer;
1539
+ }
1540
+
1541
+ .react-datepicker__year-dropdown--scrollable,
1542
+ .react-datepicker__month-dropdown--scrollable,
1543
+ .react-datepicker__month-year-dropdown--scrollable {
1544
+ height: 150px;
1545
+ overflow-y: scroll;
1546
+ }
1547
+
1548
+ .react-datepicker__year-option,
1549
+ .react-datepicker__month-option,
1550
+ .react-datepicker__month-year-option {
1551
+ line-height: 20px;
1552
+ width: 100%;
1553
+ display: block;
1554
+ margin-left: auto;
1555
+ margin-right: auto;
1556
+ }
1557
+
1558
+ .react-datepicker__year-option:first-of-type,
1559
+ .react-datepicker__month-option:first-of-type,
1560
+ .react-datepicker__month-year-option:first-of-type {
1561
+ border-top-left-radius: 0.3rem;
1562
+ border-top-right-radius: 0.3rem;
1563
+ }
1564
+
1565
+ .react-datepicker__year-option:last-of-type,
1566
+ .react-datepicker__month-option:last-of-type,
1567
+ .react-datepicker__month-year-option:last-of-type {
1568
+ -webkit-user-select: none;
1569
+ -moz-user-select: none;
1570
+ -ms-user-select: none;
1571
+ user-select: none;
1572
+ border-bottom-left-radius: 0.3rem;
1573
+ border-bottom-right-radius: 0.3rem;
1574
+ }
1575
+
1576
+ .react-datepicker__year-option:hover,
1577
+ .react-datepicker__month-option:hover,
1578
+ .react-datepicker__month-year-option:hover {
1579
+ background-color: #ccc;
1580
+ }
1581
+
1582
+ .react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming,
1583
+ .react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,
1584
+ .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming {
1585
+ border-bottom-color: #b3b3b3;
1586
+ }
1587
+
1588
+ .react-datepicker__year-option:hover .react-datepicker__navigation--years-previous,
1589
+ .react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,
1590
+ .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous {
1591
+ border-top-color: #b3b3b3;
1592
+ }
1593
+
1594
+ .react-datepicker__year-option--selected,
1595
+ .react-datepicker__month-option--selected,
1596
+ .react-datepicker__month-year-option--selected {
1597
+ position: absolute;
1598
+ left: 15px;
1599
+ }
1600
+
1601
+ .react-datepicker__close-icon {
1602
+ cursor: pointer;
1603
+ background-color: transparent;
1604
+ border: 0;
1605
+ outline: 0;
1606
+ padding: 0 6px 0 0;
1607
+ position: absolute;
1608
+ top: 0;
1609
+ right: 0;
1610
+ height: 100%;
1611
+ display: table-cell;
1612
+ vertical-align: middle;
1613
+ }
1614
+
1615
+ .react-datepicker__close-icon::after {
1616
+ cursor: pointer;
1617
+ background-color: #216ba5;
1618
+ color: #fff;
1619
+ border-radius: 50%;
1620
+ height: 16px;
1621
+ width: 16px;
1622
+ padding: 2px;
1623
+ font-size: 12px;
1624
+ line-height: 1;
1625
+ text-align: center;
1626
+ display: table-cell;
1627
+ vertical-align: middle;
1628
+ content: "\00d7";
1629
+ }
1630
+
1631
+ .react-datepicker__today-button {
1632
+ background: #f0f0f0;
1633
+ border-top: 1px solid #aeaeae;
1634
+ cursor: pointer;
1635
+ text-align: center;
1636
+ font-weight: bold;
1637
+ padding: 5px 0;
1638
+ clear: left;
1639
+ }
1640
+
1641
+ .react-datepicker__portal {
1642
+ position: fixed;
1643
+ width: 100vw;
1644
+ height: 100vh;
1645
+ background-color: rgba(0, 0, 0, 0.8);
1646
+ left: 0;
1647
+ top: 0;
1648
+ justify-content: center;
1649
+ align-items: center;
1650
+ display: flex;
1651
+ z-index: 2147483647;
1652
+ }
1653
+
1654
+ @supports (-webkit-touch-callout: none) {
1655
+
1656
+ .react-datepicker__portal {
1657
+ height: -webkit-fill-available;
1658
+ }
1659
+ }
1660
+
1661
+ .react-datepicker__portal .react-datepicker__day-name,
1662
+ .react-datepicker__portal .react-datepicker__day,
1663
+ .react-datepicker__portal .react-datepicker__time-name {
1664
+ width: 3rem;
1665
+ line-height: 3rem;
1666
+ }
1667
+
1668
+ @media (max-width: 400px), (max-height: 550px) {
1669
+ .react-datepicker__portal .react-datepicker__day-name,
1670
+ .react-datepicker__portal .react-datepicker__day,
1671
+ .react-datepicker__portal .react-datepicker__time-name {
1672
+ width: 2rem;
1673
+ line-height: 2rem;
1674
+ }
1675
+ }
1676
+
1677
+ .react-datepicker__portal .react-datepicker__current-month,
1678
+ .react-datepicker__portal .react-datepicker-time__header {
1679
+ font-size: 1.44rem;
1680
+ }
1681
+
1682
+ .x-3deye-button-group {
1683
+ display: flex;
1684
+ }
1685
+
1686
+ .x-3deye-button-group > .x-3deye-button {
1687
+ flex: 1;
1688
+ color: var(--secondary-text);
1689
+ height: 35px;
1690
+ background-color: var(--background);
1691
+ font-size: 11px;
1692
+ }
1693
+
1694
+ .x-3deye-button-group > .x-3deye-button.button-selected {
1695
+ color: var(--primary-text);
1696
+ background: none;
1697
+ }
1698
+
1699
+ .x-3deye-button-group > .x-3deye-button + .x-3deye-button {
1700
+ margin-left: 1px;
1701
+ }
1702
+
1703
+ .x-3deye-button-group > .x-3deye-button:hover {
1704
+ color: var(--primary-text);
1705
+ }
1706
+
1707
+ .x-3deye-button-group > .x-3deye-button.button-unselected {
1708
+ color: var(--secondary-text);
1709
+ }
1710
+
1711
+ .x-3deye-button-group > .x-3deye-button.button-selected canvas {
1712
+ color: var(--background);
1713
+ }
1714
+
1715
+ .x-3deye-popover {
1716
+ position: relative;
1717
+ }
1718
+
1719
+ .x-3deye-popover-body {
1720
+ background-color: white;
1721
+ padding: 8px;
1722
+ border-radius: 8px;
1723
+ box-shadow: 0 0 8px 0px black;
1724
+ }
1725
+
1726
+ .event-search-results {
1727
+ display: grid;
1728
+ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
1729
+ grid-gap: 4px;
1730
+ padding: 4px;
1731
+ }
1732
+
1733
+
1734
+ .event-search-results .event-list-item {
1735
+ position: relative !important;
1736
+ width: 100%;
1737
+ height: 0;
1738
+ padding-bottom: 56.25%;
1739
+ }
1740
+
1741
+ .people-histogram .bar rect {
1742
+ fill: #E91E63;
1743
+ }
1744
+
1745
+ .people-histogram .bar text {
1746
+ font-size: 10px;
1747
+ fill: currentColor;
1748
+ }