@fctc/sme-widget-ui 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,701 @@
1
+ @charset "UTF-8";
2
+
3
+ /* node_modules/react-datepicker/dist/react-datepicker.css */
4
+ .react-datepicker__navigation-icon::before,
5
+ .react-datepicker__year-read-view--down-arrow,
6
+ .react-datepicker__month-read-view--down-arrow,
7
+ .react-datepicker__month-year-read-view--down-arrow {
8
+ border-color: #ccc;
9
+ border-style: solid;
10
+ border-width: 3px 3px 0 0;
11
+ content: "";
12
+ display: block;
13
+ height: 9px;
14
+ position: absolute;
15
+ top: 6px;
16
+ width: 9px;
17
+ }
18
+ .react-datepicker-wrapper {
19
+ display: inline-block;
20
+ padding: 0;
21
+ border: 0;
22
+ }
23
+ .react-datepicker {
24
+ font-family:
25
+ "Helvetica Neue",
26
+ helvetica,
27
+ arial,
28
+ sans-serif;
29
+ font-size: 0.8rem;
30
+ background-color: #fff;
31
+ color: #000;
32
+ border: 1px solid #aeaeae;
33
+ border-radius: 0.3rem;
34
+ display: inline-block;
35
+ position: relative;
36
+ line-height: initial;
37
+ }
38
+ .react-datepicker--time-only .react-datepicker__time-container {
39
+ border-left: 0;
40
+ }
41
+ .react-datepicker--time-only .react-datepicker__time,
42
+ .react-datepicker--time-only .react-datepicker__time-box {
43
+ border-bottom-left-radius: 0.3rem;
44
+ border-bottom-right-radius: 0.3rem;
45
+ }
46
+ .react-datepicker-popper {
47
+ z-index: 1;
48
+ line-height: 0;
49
+ }
50
+ .react-datepicker-popper .react-datepicker__triangle {
51
+ stroke: #aeaeae;
52
+ }
53
+ .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {
54
+ fill: #f0f0f0;
55
+ color: #f0f0f0;
56
+ }
57
+ .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle {
58
+ fill: #fff;
59
+ color: #fff;
60
+ }
61
+ .react-datepicker__header {
62
+ text-align: center;
63
+ background-color: #f0f0f0;
64
+ border-bottom: 1px solid #aeaeae;
65
+ border-top-left-radius: 0.3rem;
66
+ padding: 8px 0;
67
+ position: relative;
68
+ }
69
+ .react-datepicker__header--time {
70
+ padding-bottom: 8px;
71
+ padding-left: 5px;
72
+ padding-right: 5px;
73
+ }
74
+ .react-datepicker__header--time:not(.react-datepicker__header--time--only) {
75
+ border-top-left-radius: 0;
76
+ }
77
+ .react-datepicker__header:not(.react-datepicker__header--has-time-select) {
78
+ border-top-right-radius: 0.3rem;
79
+ }
80
+ .react-datepicker__year-dropdown-container--select,
81
+ .react-datepicker__month-dropdown-container--select,
82
+ .react-datepicker__month-year-dropdown-container--select,
83
+ .react-datepicker__year-dropdown-container--scroll,
84
+ .react-datepicker__month-dropdown-container--scroll,
85
+ .react-datepicker__month-year-dropdown-container--scroll {
86
+ display: inline-block;
87
+ margin: 0 15px;
88
+ }
89
+ .react-datepicker__current-month,
90
+ .react-datepicker-time__header,
91
+ .react-datepicker-year-header {
92
+ margin-top: 0;
93
+ color: #000;
94
+ font-weight: bold;
95
+ font-size: 0.944rem;
96
+ }
97
+ h2.react-datepicker__current-month {
98
+ padding: 0;
99
+ margin: 0;
100
+ }
101
+ .react-datepicker-time__header {
102
+ text-overflow: ellipsis;
103
+ white-space: nowrap;
104
+ overflow: hidden;
105
+ }
106
+ .react-datepicker__navigation {
107
+ align-items: center;
108
+ background: none;
109
+ display: flex;
110
+ justify-content: center;
111
+ text-align: center;
112
+ cursor: pointer;
113
+ position: absolute;
114
+ top: 2px;
115
+ padding: 0;
116
+ border: none;
117
+ z-index: 1;
118
+ height: 32px;
119
+ width: 32px;
120
+ text-indent: -999em;
121
+ overflow: hidden;
122
+ }
123
+ .react-datepicker__navigation--previous {
124
+ left: 2px;
125
+ }
126
+ .react-datepicker__navigation--next {
127
+ right: 2px;
128
+ }
129
+ .react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
130
+ right: 85px;
131
+ }
132
+ .react-datepicker__navigation--years {
133
+ position: relative;
134
+ top: 0;
135
+ display: block;
136
+ margin-left: auto;
137
+ margin-right: auto;
138
+ }
139
+ .react-datepicker__navigation--years-previous {
140
+ top: 4px;
141
+ }
142
+ .react-datepicker__navigation--years-upcoming {
143
+ top: -4px;
144
+ }
145
+ .react-datepicker__navigation:hover *::before {
146
+ border-color: rgb(165.75, 165.75, 165.75);
147
+ }
148
+ .react-datepicker__navigation-icon {
149
+ position: relative;
150
+ top: -1px;
151
+ font-size: 20px;
152
+ width: 0;
153
+ }
154
+ .react-datepicker__navigation-icon--next {
155
+ left: -2px;
156
+ }
157
+ .react-datepicker__navigation-icon--next::before {
158
+ transform: rotate(45deg);
159
+ left: -7px;
160
+ }
161
+ .react-datepicker__navigation-icon--previous {
162
+ right: -2px;
163
+ }
164
+ .react-datepicker__navigation-icon--previous::before {
165
+ transform: rotate(225deg);
166
+ right: -7px;
167
+ }
168
+ .react-datepicker__month-container {
169
+ float: left;
170
+ }
171
+ .react-datepicker__year {
172
+ margin: 0.4rem;
173
+ text-align: center;
174
+ }
175
+ .react-datepicker__year-wrapper {
176
+ display: flex;
177
+ flex-wrap: wrap;
178
+ max-width: 180px;
179
+ }
180
+ .react-datepicker__year .react-datepicker__year-text {
181
+ display: inline-block;
182
+ width: 4rem;
183
+ margin: 2px;
184
+ }
185
+ .react-datepicker__month {
186
+ margin: 0.4rem;
187
+ text-align: center;
188
+ }
189
+ .react-datepicker__month .react-datepicker__month-text,
190
+ .react-datepicker__month .react-datepicker__quarter-text {
191
+ display: inline-block;
192
+ width: 4rem;
193
+ margin: 2px;
194
+ }
195
+ .react-datepicker__input-time-container {
196
+ clear: both;
197
+ width: 100%;
198
+ float: left;
199
+ margin: 5px 0 10px 15px;
200
+ text-align: left;
201
+ }
202
+ .react-datepicker__input-time-container .react-datepicker-time__caption {
203
+ display: inline-block;
204
+ }
205
+ .react-datepicker__input-time-container .react-datepicker-time__input-container {
206
+ display: inline-block;
207
+ }
208
+ .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input {
209
+ display: inline-block;
210
+ margin-left: 10px;
211
+ }
212
+ .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input {
213
+ width: auto;
214
+ }
215
+ .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-inner-spin-button,
216
+ .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-outer-spin-button {
217
+ -webkit-appearance: none;
218
+ margin: 0;
219
+ }
220
+ .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time] {
221
+ -moz-appearance: textfield;
222
+ }
223
+ .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter {
224
+ margin-left: 5px;
225
+ display: inline-block;
226
+ }
227
+ .react-datepicker__time-container {
228
+ float: right;
229
+ border-left: 1px solid #aeaeae;
230
+ width: 85px;
231
+ }
232
+ .react-datepicker__time-container--with-today-button {
233
+ display: inline;
234
+ border: 1px solid #aeaeae;
235
+ border-radius: 0.3rem;
236
+ position: absolute;
237
+ right: -87px;
238
+ top: 0;
239
+ }
240
+ .react-datepicker__time-container .react-datepicker__time {
241
+ position: relative;
242
+ background: white;
243
+ border-bottom-right-radius: 0.3rem;
244
+ }
245
+ .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {
246
+ width: 85px;
247
+ overflow-x: hidden;
248
+ margin: 0 auto;
249
+ text-align: center;
250
+ border-bottom-right-radius: 0.3rem;
251
+ }
252
+ .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {
253
+ list-style: none;
254
+ margin: 0;
255
+ height: calc(195px + 1.7rem / 2);
256
+ overflow-y: scroll;
257
+ padding-right: 0;
258
+ padding-left: 0;
259
+ width: 100%;
260
+ box-sizing: content-box;
261
+ }
262
+ .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {
263
+ height: 30px;
264
+ padding: 5px 10px;
265
+ white-space: nowrap;
266
+ }
267
+ .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {
268
+ cursor: pointer;
269
+ background-color: #f0f0f0;
270
+ }
271
+ .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {
272
+ background-color: #216ba5;
273
+ color: white;
274
+ font-weight: bold;
275
+ }
276
+ .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover {
277
+ background-color: #216ba5;
278
+ }
279
+ .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled {
280
+ color: #ccc;
281
+ }
282
+ .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover {
283
+ cursor: default;
284
+ background-color: transparent;
285
+ }
286
+ .react-datepicker__week-number {
287
+ color: #ccc;
288
+ display: inline-block;
289
+ width: 1.7rem;
290
+ line-height: 1.7rem;
291
+ text-align: center;
292
+ margin: 0.166rem;
293
+ }
294
+ .react-datepicker__week-number.react-datepicker__week-number--clickable {
295
+ cursor: pointer;
296
+ }
297
+ .react-datepicker__week-number.react-datepicker__week-number--clickable:not(.react-datepicker__week-number--selected):hover {
298
+ border-radius: 0.3rem;
299
+ background-color: #f0f0f0;
300
+ }
301
+ .react-datepicker__week-number--selected {
302
+ border-radius: 0.3rem;
303
+ background-color: #216ba5;
304
+ color: #fff;
305
+ }
306
+ .react-datepicker__week-number--selected:hover {
307
+ background-color: rgb(28.75, 93.2196969697, 143.75);
308
+ }
309
+ .react-datepicker__day-names {
310
+ white-space: nowrap;
311
+ margin-bottom: -8px;
312
+ }
313
+ .react-datepicker__week {
314
+ white-space: nowrap;
315
+ }
316
+ .react-datepicker__day-name,
317
+ .react-datepicker__day,
318
+ .react-datepicker__time-name {
319
+ color: #000;
320
+ display: inline-block;
321
+ width: 1.7rem;
322
+ line-height: 1.7rem;
323
+ text-align: center;
324
+ margin: 0.166rem;
325
+ }
326
+ .react-datepicker__day,
327
+ .react-datepicker__month-text,
328
+ .react-datepicker__quarter-text,
329
+ .react-datepicker__year-text {
330
+ cursor: pointer;
331
+ }
332
+ .react-datepicker__day:not([aria-disabled=true]):hover,
333
+ .react-datepicker__month-text:not([aria-disabled=true]):hover,
334
+ .react-datepicker__quarter-text:not([aria-disabled=true]):hover,
335
+ .react-datepicker__year-text:not([aria-disabled=true]):hover {
336
+ border-radius: 0.3rem;
337
+ background-color: #f0f0f0;
338
+ }
339
+ .react-datepicker__day--today,
340
+ .react-datepicker__month-text--today,
341
+ .react-datepicker__quarter-text--today,
342
+ .react-datepicker__year-text--today {
343
+ font-weight: bold;
344
+ }
345
+ .react-datepicker__day--highlighted,
346
+ .react-datepicker__month-text--highlighted,
347
+ .react-datepicker__quarter-text--highlighted,
348
+ .react-datepicker__year-text--highlighted {
349
+ border-radius: 0.3rem;
350
+ background-color: #3dcc4a;
351
+ color: #fff;
352
+ }
353
+ .react-datepicker__day--highlighted:not([aria-disabled=true]):hover,
354
+ .react-datepicker__month-text--highlighted:not([aria-disabled=true]):hover,
355
+ .react-datepicker__quarter-text--highlighted:not([aria-disabled=true]):hover,
356
+ .react-datepicker__year-text--highlighted:not([aria-disabled=true]):hover {
357
+ background-color: rgb(49.8551020408, 189.6448979592, 62.5632653061);
358
+ }
359
+ .react-datepicker__day--highlighted-custom-1,
360
+ .react-datepicker__month-text--highlighted-custom-1,
361
+ .react-datepicker__quarter-text--highlighted-custom-1,
362
+ .react-datepicker__year-text--highlighted-custom-1 {
363
+ color: magenta;
364
+ }
365
+ .react-datepicker__day--highlighted-custom-2,
366
+ .react-datepicker__month-text--highlighted-custom-2,
367
+ .react-datepicker__quarter-text--highlighted-custom-2,
368
+ .react-datepicker__year-text--highlighted-custom-2 {
369
+ color: green;
370
+ }
371
+ .react-datepicker__day--holidays,
372
+ .react-datepicker__month-text--holidays,
373
+ .react-datepicker__quarter-text--holidays,
374
+ .react-datepicker__year-text--holidays {
375
+ position: relative;
376
+ border-radius: 0.3rem;
377
+ background-color: #ff6803;
378
+ color: #fff;
379
+ }
380
+ .react-datepicker__day--holidays .overlay,
381
+ .react-datepicker__month-text--holidays .overlay,
382
+ .react-datepicker__quarter-text--holidays .overlay,
383
+ .react-datepicker__year-text--holidays .overlay {
384
+ position: absolute;
385
+ bottom: 100%;
386
+ left: 50%;
387
+ transform: translateX(-50%);
388
+ background-color: #333;
389
+ color: #fff;
390
+ padding: 4px;
391
+ border-radius: 4px;
392
+ white-space: nowrap;
393
+ visibility: hidden;
394
+ opacity: 0;
395
+ transition: visibility 0s, opacity 0.3s ease-in-out;
396
+ }
397
+ .react-datepicker__day--holidays:not([aria-disabled=true]):hover,
398
+ .react-datepicker__month-text--holidays:not([aria-disabled=true]):hover,
399
+ .react-datepicker__quarter-text--holidays:not([aria-disabled=true]):hover,
400
+ .react-datepicker__year-text--holidays:not([aria-disabled=true]):hover {
401
+ background-color: rgb(207, 82.9642857143, 0);
402
+ }
403
+ .react-datepicker__day--holidays:hover .overlay,
404
+ .react-datepicker__month-text--holidays:hover .overlay,
405
+ .react-datepicker__quarter-text--holidays:hover .overlay,
406
+ .react-datepicker__year-text--holidays:hover .overlay {
407
+ visibility: visible;
408
+ opacity: 1;
409
+ }
410
+ .react-datepicker__day--selected,
411
+ .react-datepicker__day--in-selecting-range,
412
+ .react-datepicker__day--in-range,
413
+ .react-datepicker__month-text--selected,
414
+ .react-datepicker__month-text--in-selecting-range,
415
+ .react-datepicker__month-text--in-range,
416
+ .react-datepicker__quarter-text--selected,
417
+ .react-datepicker__quarter-text--in-selecting-range,
418
+ .react-datepicker__quarter-text--in-range,
419
+ .react-datepicker__year-text--selected,
420
+ .react-datepicker__year-text--in-selecting-range,
421
+ .react-datepicker__year-text--in-range {
422
+ border-radius: 0.3rem;
423
+ background-color: #216ba5;
424
+ color: #fff;
425
+ }
426
+ .react-datepicker__day--selected:not([aria-disabled=true]):hover,
427
+ .react-datepicker__day--in-selecting-range:not([aria-disabled=true]):hover,
428
+ .react-datepicker__day--in-range:not([aria-disabled=true]):hover,
429
+ .react-datepicker__month-text--selected:not([aria-disabled=true]):hover,
430
+ .react-datepicker__month-text--in-selecting-range:not([aria-disabled=true]):hover,
431
+ .react-datepicker__month-text--in-range:not([aria-disabled=true]):hover,
432
+ .react-datepicker__quarter-text--selected:not([aria-disabled=true]):hover,
433
+ .react-datepicker__quarter-text--in-selecting-range:not([aria-disabled=true]):hover,
434
+ .react-datepicker__quarter-text--in-range:not([aria-disabled=true]):hover,
435
+ .react-datepicker__year-text--selected:not([aria-disabled=true]):hover,
436
+ .react-datepicker__year-text--in-selecting-range:not([aria-disabled=true]):hover,
437
+ .react-datepicker__year-text--in-range:not([aria-disabled=true]):hover {
438
+ background-color: rgb(28.75, 93.2196969697, 143.75);
439
+ }
440
+ .react-datepicker__day--keyboard-selected,
441
+ .react-datepicker__month-text--keyboard-selected,
442
+ .react-datepicker__quarter-text--keyboard-selected,
443
+ .react-datepicker__year-text--keyboard-selected {
444
+ border-radius: 0.3rem;
445
+ background-color: rgb(186.25, 217.0833333333, 241.25);
446
+ color: rgb(0, 0, 0);
447
+ }
448
+ .react-datepicker__day--keyboard-selected:not([aria-disabled=true]):hover,
449
+ .react-datepicker__month-text--keyboard-selected:not([aria-disabled=true]):hover,
450
+ .react-datepicker__quarter-text--keyboard-selected:not([aria-disabled=true]):hover,
451
+ .react-datepicker__year-text--keyboard-selected:not([aria-disabled=true]):hover {
452
+ background-color: rgb(28.75, 93.2196969697, 143.75);
453
+ }
454
+ .react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--in-range),
455
+ .react-datepicker__month-text--in-selecting-range:not(.react-datepicker__day--in-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--in-range),
456
+ .react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__day--in-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--in-range),
457
+ .react-datepicker__year-text--in-selecting-range:not(.react-datepicker__day--in-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--in-range) {
458
+ background-color: rgba(33, 107, 165, 0.5);
459
+ }
460
+ .react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range, .react-datepicker__month-text--in-selecting-range, .react-datepicker__quarter-text--in-selecting-range, .react-datepicker__year-text--in-selecting-range),
461
+ .react-datepicker__year--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range, .react-datepicker__month-text--in-selecting-range, .react-datepicker__quarter-text--in-selecting-range, .react-datepicker__year-text--in-selecting-range),
462
+ .react-datepicker__month--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range, .react-datepicker__month-text--in-selecting-range, .react-datepicker__quarter-text--in-selecting-range, .react-datepicker__year-text--in-selecting-range),
463
+ .react-datepicker__year--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range, .react-datepicker__month-text--in-selecting-range, .react-datepicker__quarter-text--in-selecting-range, .react-datepicker__year-text--in-selecting-range),
464
+ .react-datepicker__month--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range, .react-datepicker__month-text--in-selecting-range, .react-datepicker__quarter-text--in-selecting-range, .react-datepicker__year-text--in-selecting-range),
465
+ .react-datepicker__year--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range, .react-datepicker__month-text--in-selecting-range, .react-datepicker__quarter-text--in-selecting-range, .react-datepicker__year-text--in-selecting-range),
466
+ .react-datepicker__month--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range, .react-datepicker__month-text--in-selecting-range, .react-datepicker__quarter-text--in-selecting-range, .react-datepicker__year-text--in-selecting-range),
467
+ .react-datepicker__year--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range, .react-datepicker__month-text--in-selecting-range, .react-datepicker__quarter-text--in-selecting-range, .react-datepicker__year-text--in-selecting-range) {
468
+ background-color: #f0f0f0;
469
+ color: #000;
470
+ }
471
+ .react-datepicker__day--disabled,
472
+ .react-datepicker__month-text--disabled,
473
+ .react-datepicker__quarter-text--disabled,
474
+ .react-datepicker__year-text--disabled {
475
+ cursor: default;
476
+ color: #ccc;
477
+ }
478
+ .react-datepicker__day--disabled .overlay,
479
+ .react-datepicker__month-text--disabled .overlay,
480
+ .react-datepicker__quarter-text--disabled .overlay,
481
+ .react-datepicker__year-text--disabled .overlay {
482
+ position: absolute;
483
+ bottom: 70%;
484
+ left: 50%;
485
+ transform: translateX(-50%);
486
+ background-color: #333;
487
+ color: #fff;
488
+ padding: 4px;
489
+ border-radius: 4px;
490
+ white-space: nowrap;
491
+ visibility: hidden;
492
+ opacity: 0;
493
+ transition: visibility 0s, opacity 0.3s ease-in-out;
494
+ }
495
+ .react-datepicker__input-container {
496
+ position: relative;
497
+ display: inline-block;
498
+ width: 100%;
499
+ }
500
+ .react-datepicker__input-container .react-datepicker__calendar-icon {
501
+ position: absolute;
502
+ padding: 0.5rem;
503
+ box-sizing: content-box;
504
+ }
505
+ .react-datepicker__view-calendar-icon input {
506
+ padding: 6px 10px 5px 25px;
507
+ }
508
+ .react-datepicker__year-read-view,
509
+ .react-datepicker__month-read-view,
510
+ .react-datepicker__month-year-read-view {
511
+ border: 1px solid transparent;
512
+ border-radius: 0.3rem;
513
+ position: relative;
514
+ }
515
+ .react-datepicker__year-read-view:hover,
516
+ .react-datepicker__month-read-view:hover,
517
+ .react-datepicker__month-year-read-view:hover {
518
+ cursor: pointer;
519
+ }
520
+ .react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,
521
+ .react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,
522
+ .react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,
523
+ .react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,
524
+ .react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,
525
+ .react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow {
526
+ border-top-color: rgb(178.5, 178.5, 178.5);
527
+ }
528
+ .react-datepicker__year-read-view--down-arrow,
529
+ .react-datepicker__month-read-view--down-arrow,
530
+ .react-datepicker__month-year-read-view--down-arrow {
531
+ transform: rotate(135deg);
532
+ right: -16px;
533
+ top: 0;
534
+ }
535
+ .react-datepicker__year-dropdown,
536
+ .react-datepicker__month-dropdown,
537
+ .react-datepicker__month-year-dropdown {
538
+ background-color: #f0f0f0;
539
+ position: absolute;
540
+ width: 50%;
541
+ left: 25%;
542
+ top: 30px;
543
+ z-index: 1;
544
+ text-align: center;
545
+ border-radius: 0.3rem;
546
+ border: 1px solid #aeaeae;
547
+ }
548
+ .react-datepicker__year-dropdown:hover,
549
+ .react-datepicker__month-dropdown:hover,
550
+ .react-datepicker__month-year-dropdown:hover {
551
+ cursor: pointer;
552
+ }
553
+ .react-datepicker__year-dropdown--scrollable,
554
+ .react-datepicker__month-dropdown--scrollable,
555
+ .react-datepicker__month-year-dropdown--scrollable {
556
+ height: 150px;
557
+ overflow-y: scroll;
558
+ }
559
+ .react-datepicker__year-option,
560
+ .react-datepicker__month-option,
561
+ .react-datepicker__month-year-option {
562
+ line-height: 20px;
563
+ width: 100%;
564
+ display: block;
565
+ margin-left: auto;
566
+ margin-right: auto;
567
+ }
568
+ .react-datepicker__year-option:first-of-type,
569
+ .react-datepicker__month-option:first-of-type,
570
+ .react-datepicker__month-year-option:first-of-type {
571
+ border-top-left-radius: 0.3rem;
572
+ border-top-right-radius: 0.3rem;
573
+ }
574
+ .react-datepicker__year-option:last-of-type,
575
+ .react-datepicker__month-option:last-of-type,
576
+ .react-datepicker__month-year-option:last-of-type {
577
+ -webkit-user-select: none;
578
+ -moz-user-select: none;
579
+ -ms-user-select: none;
580
+ user-select: none;
581
+ border-bottom-left-radius: 0.3rem;
582
+ border-bottom-right-radius: 0.3rem;
583
+ }
584
+ .react-datepicker__year-option:hover,
585
+ .react-datepicker__month-option:hover,
586
+ .react-datepicker__month-year-option:hover {
587
+ background-color: #ccc;
588
+ }
589
+ .react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming,
590
+ .react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,
591
+ .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming {
592
+ border-bottom-color: rgb(178.5, 178.5, 178.5);
593
+ }
594
+ .react-datepicker__year-option:hover .react-datepicker__navigation--years-previous,
595
+ .react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,
596
+ .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous {
597
+ border-top-color: rgb(178.5, 178.5, 178.5);
598
+ }
599
+ .react-datepicker__year-option--selected,
600
+ .react-datepicker__month-option--selected,
601
+ .react-datepicker__month-year-option--selected {
602
+ position: absolute;
603
+ left: 15px;
604
+ }
605
+ .react-datepicker__close-icon {
606
+ cursor: pointer;
607
+ background-color: transparent;
608
+ border: 0;
609
+ outline: 0;
610
+ padding: 0 6px 0 0;
611
+ position: absolute;
612
+ top: 0;
613
+ right: 0;
614
+ height: 100%;
615
+ display: table-cell;
616
+ vertical-align: middle;
617
+ }
618
+ .react-datepicker__close-icon::after {
619
+ cursor: pointer;
620
+ background-color: #216ba5;
621
+ color: #fff;
622
+ border-radius: 50%;
623
+ height: 16px;
624
+ width: 16px;
625
+ padding: 2px;
626
+ font-size: 12px;
627
+ line-height: 1;
628
+ text-align: center;
629
+ display: table-cell;
630
+ vertical-align: middle;
631
+ content: "\d7";
632
+ }
633
+ .react-datepicker__close-icon--disabled {
634
+ cursor: default;
635
+ }
636
+ .react-datepicker__close-icon--disabled::after {
637
+ cursor: default;
638
+ background-color: #ccc;
639
+ }
640
+ .react-datepicker__today-button {
641
+ background: #f0f0f0;
642
+ border-top: 1px solid #aeaeae;
643
+ cursor: pointer;
644
+ text-align: center;
645
+ font-weight: bold;
646
+ padding: 5px 0;
647
+ clear: left;
648
+ }
649
+ .react-datepicker__portal {
650
+ position: fixed;
651
+ width: 100vw;
652
+ height: 100vh;
653
+ background-color: rgba(0, 0, 0, 0.8);
654
+ left: 0;
655
+ top: 0;
656
+ justify-content: center;
657
+ align-items: center;
658
+ display: flex;
659
+ z-index: 2147483647;
660
+ }
661
+ .react-datepicker__portal .react-datepicker__day-name,
662
+ .react-datepicker__portal .react-datepicker__day,
663
+ .react-datepicker__portal .react-datepicker__time-name {
664
+ width: 3rem;
665
+ line-height: 3rem;
666
+ }
667
+ @media (max-width: 400px), (max-height: 550px) {
668
+ .react-datepicker__portal .react-datepicker__day-name,
669
+ .react-datepicker__portal .react-datepicker__day,
670
+ .react-datepicker__portal .react-datepicker__time-name {
671
+ width: 2rem;
672
+ line-height: 2rem;
673
+ }
674
+ }
675
+ .react-datepicker__portal .react-datepicker__current-month,
676
+ .react-datepicker__portal .react-datepicker-time__header {
677
+ font-size: 1.44rem;
678
+ }
679
+ .react-datepicker__children-container {
680
+ width: 13.8rem;
681
+ margin: 0.4rem;
682
+ padding-right: 0.2rem;
683
+ padding-left: 0.2rem;
684
+ height: auto;
685
+ }
686
+ .react-datepicker__aria-live {
687
+ position: absolute;
688
+ clip-path: circle(0);
689
+ border: 0;
690
+ height: 1px;
691
+ margin: -1px;
692
+ overflow: hidden;
693
+ padding: 0;
694
+ width: 1px;
695
+ white-space: nowrap;
696
+ }
697
+ .react-datepicker__calendar-icon {
698
+ width: 1em;
699
+ height: 1em;
700
+ vertical-align: -0.125em;
701
+ }