@3deye-toolkit/react-event-list 0.0.1-alpha.21 → 0.0.1-alpha.24

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