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

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