@laerdal/life-react-components 6.0.0-dev.15.full → 6.0.0-dev.16.full

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