@3deye-toolkit/react-event-list 0.0.1-alpha.22 → 0.0.1-alpha.23

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