imbric-theme 0.1.2 → 0.1.3

Sign up to get free protection for your applications and to get access to all the features.
Files changed (207) hide show
  1. package/.dockerignore +14 -0
  2. package/.eslintignore +1 -0
  3. package/.prettierignore +1 -0
  4. package/.storybook/main.js +6 -2
  5. package/.storybook/preview.js +21 -0
  6. package/.vscode/settings.json +3 -0
  7. package/Dockerfile +17 -0
  8. package/atoms/AlertModal/AlertModal.js +69 -0
  9. package/atoms/AlertModal/AlertModal.module.css +3 -0
  10. package/atoms/AlertModal/AlertModal.stories.js +30 -0
  11. package/atoms/AlertModal/constants.js +4 -0
  12. package/atoms/AlertModal/index.js +3 -0
  13. package/atoms/Button/Button.js +17 -2
  14. package/atoms/Button/Button.module.css +25 -3
  15. package/atoms/Button/Button.stories.js +1 -1
  16. package/atoms/Button/__snapshots__/Button.stories.js.snap +8 -8
  17. package/atoms/Check/Check.js +6 -4
  18. package/atoms/Checkbox/Checkbox.js +77 -0
  19. package/atoms/Checkbox/Checkbox.module.css +60 -0
  20. package/atoms/Checkbox/Checkbox.stories.js +30 -0
  21. package/atoms/Checkbox/constants.js +1 -0
  22. package/atoms/Checkbox/index.js +3 -0
  23. package/atoms/Divider/Divider.js +5 -2
  24. package/atoms/Divider/Divider.module.css +20 -0
  25. package/atoms/Divider/Divider.stories.js +13 -2
  26. package/atoms/Divider/constants.js +3 -0
  27. package/atoms/Divider/index.js +1 -0
  28. package/atoms/Heading/Heading.js +1 -1
  29. package/atoms/Heading/Heading.module.css +4 -0
  30. package/atoms/Heading/Heading.stories.js +2 -2
  31. package/atoms/Heading/__snapshots__/Heading.stories.js.snap +16 -16
  32. package/atoms/Heading/constants.js +1 -1
  33. package/atoms/Icon/Icon.js +1 -1
  34. package/atoms/Icon/Icon.module.css +30 -0
  35. package/atoms/Icon/constants.js +750 -145
  36. package/atoms/Input/Input.js +195 -15
  37. package/atoms/Input/Input.module.css +62 -6
  38. package/atoms/Input/Input.stories.js +8 -2
  39. package/atoms/Input/__snapshots__/Input.stories.js.snap +5 -5
  40. package/atoms/Input/constants.js +1 -1
  41. package/atoms/Label/Label.js +31 -0
  42. package/atoms/Label/Label.module.css +42 -0
  43. package/atoms/Label/Label.stories.js +26 -0
  44. package/atoms/Label/constants.js +1 -0
  45. package/atoms/Label/index.js +3 -0
  46. package/atoms/LinkItem/LinkItem.js +38 -0
  47. package/atoms/{Link/Link.module.css → LinkItem/LinkItem.module.css} +6 -1
  48. package/atoms/{Link/Link.stories.js → LinkItem/LinkItem.stories.js} +5 -5
  49. package/atoms/LinkItem/index.js +3 -0
  50. package/atoms/Modal/Modal.js +27 -4
  51. package/atoms/Modal/Modal.module.css +63 -6
  52. package/atoms/Paragraph/Paragraph.module.css +4 -0
  53. package/atoms/Paragraph/Paragraph.stories.js +2 -2
  54. package/atoms/Paragraph/__snapshots__/Paragraph.stories.js.snap +16 -16
  55. package/atoms/Picture/Picture.js +9 -2
  56. package/atoms/Tab/Tab.js +41 -0
  57. package/atoms/Tab/Tab.module.css +17 -0
  58. package/atoms/Tab/Tab.stories.js +27 -0
  59. package/atoms/Tab/constants.js +1 -0
  60. package/atoms/Tab/index.js +3 -0
  61. package/atoms/Textarea/Textarea.js +106 -15
  62. package/atoms/Textarea/Textarea.module.css +31 -2
  63. package/atoms/Toggle/Toggle.js +56 -0
  64. package/atoms/Toggle/Toggle.module.css +41 -0
  65. package/atoms/Toggle/Toggle.stories.js +21 -0
  66. package/atoms/Toggle/constants.js +1 -0
  67. package/atoms/Toggle/index.js +3 -0
  68. package/helpers/storybook.js +2 -2
  69. package/hook/useAddColumn.js +40 -0
  70. package/hook/useStateDate.js +25 -0
  71. package/hook/useTable.js +54 -0
  72. package/index.js +41 -1
  73. package/jest.config.js +1 -1
  74. package/layout/DynamicTable/DynamicTable.js +372 -0
  75. package/layout/DynamicTable/DynamicTable.module.css +62 -0
  76. package/layout/DynamicTable/DynamicTable.stories.js +79 -0
  77. package/layout/DynamicTable/constants.js +323 -0
  78. package/layout/DynamicTable/index.js +3 -0
  79. package/layout/FlexColumnContent/FlexColumnContent.js +26 -0
  80. package/layout/FlexColumnContent/FlexColumnContent.module.css +5 -0
  81. package/layout/FlexColumnContent/FlexColumnContent.stories.js +28 -0
  82. package/layout/FlexColumnContent/constants.js +1 -0
  83. package/layout/FlexColumnContent/index.js +3 -0
  84. package/layout/Navbar/Navbar.js +247 -0
  85. package/layout/Navbar/Navbar.module.css +35 -0
  86. package/layout/Navbar/Navbar.stories.js +20 -0
  87. package/layout/Navbar/constants.js +35 -0
  88. package/layout/Navbar/index.js +2 -0
  89. package/layout/Sidebar/Sidebar.js +115 -0
  90. package/layout/Sidebar/Sidebar.module.css +387 -0
  91. package/layout/Sidebar/Sidebar.stories.js +28 -0
  92. package/layout/Sidebar/constants.js +228 -0
  93. package/layout/Sidebar/index.js +3 -0
  94. package/molecules/Accordion/Accordion.js +11 -11
  95. package/molecules/CardDefault/CardDefault.js +65 -0
  96. package/molecules/CardDefault/CardDefault.module.css +19 -0
  97. package/molecules/CardDefault/CardDefault.stories.js +23 -0
  98. package/molecules/CardDefault/constants.js +1 -0
  99. package/molecules/CardDefault/index.js +3 -0
  100. package/molecules/CardProductTypesBooking/CardProductTypesBooking.js +89 -0
  101. package/molecules/CardProductTypesBooking/CardProductTypesBooking.module.css +118 -0
  102. package/molecules/CardProductTypesBooking/CardProductTypesBooking.stories.js +25 -0
  103. package/molecules/CardProductTypesBooking/constants.js +1 -0
  104. package/molecules/CardProductTypesBooking/index.js +3 -0
  105. package/molecules/CardServiceDetail/CardServiceDetail.js +400 -0
  106. package/molecules/CardServiceDetail/CardServiceDetail.module.css +222 -0
  107. package/molecules/CardServiceDetail/CardServiceDetail.stories.js +23 -0
  108. package/molecules/CardServiceDetail/constants.js +1 -0
  109. package/molecules/CardServiceDetail/index.js +3 -0
  110. package/molecules/CardServices/CardServices.js +461 -0
  111. package/molecules/CardServices/CardServices.module.css +213 -0
  112. package/molecules/CardServices/CardServices.stories.js +41 -0
  113. package/molecules/CardServices/constants.js +5 -0
  114. package/molecules/CardServices/index.js +3 -0
  115. package/molecules/CardServicesFinalized/CardServicesFinalized.js +381 -0
  116. package/molecules/CardServicesFinalized/CardServicesFinalized.module.css +213 -0
  117. package/molecules/CardServicesFinalized/CardServicesFinalized.stories.js +23 -0
  118. package/molecules/CardServicesFinalized/constants.js +1 -0
  119. package/molecules/CardServicesFinalized/index.js +3 -0
  120. package/molecules/CheckList/CheckList.js +135 -0
  121. package/molecules/CheckList/CheckList.module.css +94 -0
  122. package/molecules/CheckList/CheckList.stories.js +25 -0
  123. package/molecules/CheckList/constants.js +23 -0
  124. package/molecules/CheckList/index.js +3 -0
  125. package/molecules/ColumnTable/ColumnTable.js +155 -0
  126. package/molecules/ColumnTable/ColumnTable.module.css +51 -0
  127. package/molecules/ColumnTable/ColumnTable.stories.js +26 -0
  128. package/molecules/ColumnTable/constants.js +117 -0
  129. package/molecules/ColumnTable/index.js +3 -0
  130. package/molecules/DatePicker/DatePicker.js +242 -0
  131. package/molecules/DatePicker/DatePicker.module.css +38 -0
  132. package/molecules/DatePicker/DatePicker.stories.js +23 -0
  133. package/molecules/DatePicker/constants.js +3 -0
  134. package/molecules/DatePicker/index.js +3 -0
  135. package/molecules/DatePickerTime/DatePickerTime.js +133 -0
  136. package/molecules/DatePickerTime/DatePickerTime.module.css +3 -0
  137. package/molecules/DatePickerTime/DatePickerTime.stories.js +18 -0
  138. package/molecules/DatePickerTime/constants.js +1 -0
  139. package/molecules/DatePickerTime/index.js +3 -0
  140. package/molecules/Dropdown/Dropdown.js +26 -23
  141. package/molecules/Dropdown/Dropdown.module.css +21 -3
  142. package/molecules/DynamicSelect/DynamicSelect.js +186 -0
  143. package/molecules/DynamicSelect/DynamicSelect.module.css +10 -0
  144. package/molecules/DynamicSelect/DynamicSelect.stories.js +32 -0
  145. package/molecules/DynamicSelect/constants.js +7 -0
  146. package/molecules/DynamicSelect/index.js +3 -0
  147. package/molecules/Error/Error.js +2 -2
  148. package/molecules/Error/Error.module.css +3 -2
  149. package/molecules/FooterTable/FooterTable.js +166 -0
  150. package/molecules/FooterTable/FooterTable.module.css +63 -0
  151. package/molecules/FooterTable/FooterTable.stories.js +23 -0
  152. package/molecules/FooterTable/constants.js +9 -0
  153. package/molecules/FooterTable/index.js +3 -0
  154. package/molecules/InputAutocomplete/InputAutocomplete.js +221 -0
  155. package/molecules/InputAutocomplete/InputAutocomplete.module.css +55 -0
  156. package/molecules/InputAutocomplete/InputAutocomplete.stories.js +23 -0
  157. package/molecules/InputAutocomplete/constants.js +1 -0
  158. package/molecules/InputAutocomplete/index.js +3 -0
  159. package/molecules/ItemMenu/ItemMenu.js +134 -0
  160. package/molecules/ItemMenu/ItemMenu.module.css +363 -0
  161. package/molecules/ItemMenu/ItemMenu.stories.js +42 -0
  162. package/molecules/ItemMenu/constants.js +36 -0
  163. package/molecules/ItemMenu/index.js +3 -0
  164. package/molecules/RowTable/RowTable.js +928 -0
  165. package/molecules/RowTable/RowTable.module.css +63 -0
  166. package/molecules/RowTable/RowTable.stories.js +26 -0
  167. package/molecules/RowTable/constants.js +798 -0
  168. package/molecules/RowTable/index.js +3 -0
  169. package/molecules/Tabs/Tabs.js +59 -0
  170. package/molecules/Tabs/Tabs.module.css +13 -0
  171. package/molecules/Tabs/Tabs.stories.js +34 -0
  172. package/molecules/Tabs/constants.js +34 -0
  173. package/molecules/Tabs/index.js +3 -0
  174. package/package.json +33 -16
  175. package/pages/Login/Login.js +102 -0
  176. package/pages/Login/Login.module.css +5 -0
  177. package/pages/Login/Login.stories.js +23 -0
  178. package/pages/Login/constants.js +1 -0
  179. package/pages/Login/index.js +3 -0
  180. package/pages/Login/validation/loginSchema.js +5 -0
  181. package/public/favicon.ico +0 -0
  182. package/public/static/google-maps.png +0 -0
  183. package/public/static/images/folders-folder.svg +26 -0
  184. package/public/static/images/permissions.svg +14 -0
  185. package/public/static/images/reports-results.svg +18 -0
  186. package/public/static/logo.svg +19 -0
  187. package/public/static/logologin.png +0 -0
  188. package/public/static/logologin.svg +16 -0
  189. package/public/static/logologintagos.svg +19 -0
  190. package/public/static/logotipo.svg +50 -0
  191. package/public/static/logotipoS.svg +26 -0
  192. package/public/static/taxisvalencia_logod.png +0 -0
  193. package/scripts/create-component.js +2 -1
  194. package/styles/GrupoMutua.css +391 -0
  195. package/styles/default.css +391 -0
  196. package/styles/globals.css +1514 -0
  197. package/styles/radiotaxiaragon.css +391 -0
  198. package/styles/spartan.css +391 -0
  199. package/styles/tagos.css +391 -0
  200. package/styles/taxisvalencia.css +391 -0
  201. package/styles/tokens.css +2 -1
  202. package/tokens/index.js +2 -1
  203. package/.eslintcache +0 -1
  204. package/atoms/Link/Link.js +0 -33
  205. package/atoms/Link/index.js +0 -3
  206. /package/atoms/{Link → LinkItem}/__snapshots__/Link.stories.js.snap +0 -0
  207. /package/atoms/{Link → LinkItem}/constants.js +0 -0
@@ -8,3 +8,1517 @@ body {
8
8
  #root {
9
9
  height: 100%;
10
10
  }
11
+
12
+ .rdrDefinedRangesWrapper {
13
+ width: 170px !important;
14
+ }
15
+
16
+ /* DATE RANGE */
17
+
18
+ .rdrCalendarWrapper {
19
+ box-sizing: border-box;
20
+ background: #ffffff;
21
+ display: inline-flex;
22
+ flex-direction: column;
23
+ -webkit-user-select: none;
24
+ -moz-user-select: none;
25
+ -ms-user-select: none;
26
+ user-select: none;
27
+ -moz-user-select: none;
28
+ -ms-user-select: none;
29
+ user-select: none;
30
+ }
31
+
32
+ .rdrDateDisplay {
33
+ display: flex;
34
+ justify-content: space-between;
35
+ }
36
+
37
+ .rdrDateDisplayItem {
38
+ flex: 1 1;
39
+ width: 0;
40
+ text-align: center;
41
+ color: inherit;
42
+ }
43
+
44
+ .rdrDateDisplayItem+.rdrDateDisplayItem {
45
+ margin-left: 0.833em;
46
+ }
47
+
48
+ .rdrDateDisplayItem input {
49
+ text-align: inherit
50
+ }
51
+
52
+ .rdrDateDisplayItem input:disabled {
53
+ cursor: default;
54
+ }
55
+
56
+ /* .rdrDateDisplayItemActive {} */
57
+
58
+ .rdrMonthAndYearWrapper {
59
+ box-sizing: inherit;
60
+ display: flex;
61
+ justify-content: space-between;
62
+ }
63
+
64
+ .rdrMonthAndYearPickers {
65
+ flex: 1 1 auto;
66
+ display: flex;
67
+ justify-content: center;
68
+ align-items: center;
69
+ }
70
+
71
+ /* .rdrMonthPicker {} */
72
+
73
+ /* .rdrYearPicker {} */
74
+
75
+ .rdrNextPrevButton {
76
+ box-sizing: inherit;
77
+ cursor: pointer;
78
+ outline: none;
79
+ }
80
+
81
+ /* .rdrPprevButton {}
82
+
83
+ .rdrNextButton {} */
84
+
85
+ .rdrMonths {
86
+ display: flex;
87
+ }
88
+
89
+ .rdrMonthsVertical {
90
+ flex-direction: column;
91
+ }
92
+
93
+ .rdrMonthsHorizontal>div>div>div {
94
+ display: flex;
95
+ flex-direction: row;
96
+ }
97
+
98
+ .rdrMonth {
99
+ width: 27.667em;
100
+ }
101
+
102
+ .rdrWeekDays {
103
+ display: flex;
104
+ }
105
+
106
+ .rdrWeekDay {
107
+ flex-basis: calc(100% / 7);
108
+ box-sizing: inherit;
109
+ text-align: center;
110
+ }
111
+
112
+ .rdrDays {
113
+ display: flex;
114
+ flex-wrap: wrap;
115
+ }
116
+
117
+ /* .rdrDateDisplayWrapper {}
118
+
119
+ .rdrMonthName {} */
120
+
121
+ .rdrInfiniteMonths {
122
+ overflow: auto;
123
+ }
124
+
125
+ .rdrDateRangeWrapper {
126
+ -webkit-user-select: none;
127
+ -moz-user-select: none;
128
+ -ms-user-select: none;
129
+ user-select: none;
130
+ }
131
+
132
+ .rdrDateInput {
133
+ position: relative;
134
+ }
135
+
136
+ .rdrDateInput input {
137
+ outline: none;
138
+ }
139
+
140
+ .rdrDateInput .rdrWarning {
141
+ position: absolute;
142
+ font-size: 1.6em;
143
+ line-height: 1.6em;
144
+ top: 0;
145
+ right: .25em;
146
+ color: #FF0000;
147
+ }
148
+
149
+ .rdrDay {
150
+ box-sizing: inherit;
151
+ width: calc(100% / 7);
152
+ position: relative;
153
+ font: inherit;
154
+ cursor: pointer;
155
+ }
156
+
157
+ .rdrDayNumber {
158
+ display: block;
159
+ position: relative;
160
+ }
161
+
162
+ .rdrDayNumber span {
163
+ color: #1d2429;
164
+ }
165
+
166
+ .rdrDayDisabled {
167
+ cursor: not-allowed;
168
+ }
169
+
170
+ @supports (-ms-ime-align: auto) {
171
+ .rdrDay {
172
+ flex-basis: 14.285% !important;
173
+ }
174
+ }
175
+
176
+ .rdrSelected,
177
+ .rdrInRange,
178
+ .rdrStartEdge,
179
+ .rdrEndEdge {
180
+ pointer-events: none;
181
+ }
182
+
183
+ /* .rdrInRange {} */
184
+
185
+ .rdrDayStartPreview,
186
+ .rdrDayInPreview,
187
+ .rdrDayEndPreview {
188
+ pointer-events: none;
189
+ }
190
+
191
+ /* .rdrDayHovered {}
192
+
193
+ .rdrDayActive {} */
194
+
195
+ .rdrDateRangePickerWrapper {
196
+ display: inline-flex;
197
+ -webkit-user-select: none;
198
+ -moz-user-select: none;
199
+ -ms-user-select: none;
200
+ user-select: none;
201
+ }
202
+
203
+ /* .rdrDefinedRangesWrapper {} */
204
+
205
+ .rdrStaticRanges {
206
+ display: flex;
207
+ flex-direction: column;
208
+ }
209
+
210
+ .rdrStaticRange {
211
+ font-size: inherit;
212
+ }
213
+
214
+ /* .rdrStaticRangeLabel {}
215
+
216
+ .rdrInputRanges {} */
217
+
218
+ .rdrInputRange {
219
+ display: flex;
220
+ }
221
+
222
+ /* .rdrInputRangeInput {} */
223
+
224
+
225
+ .rdrCalendarWrapper {
226
+ color: #000000;
227
+ font-size: 12px;
228
+ }
229
+
230
+ .rdrDateDisplayWrapper {
231
+ background-color: rgb(239, 242, 247);
232
+ }
233
+
234
+ .rdrDateDisplay {
235
+ margin: 0.833em;
236
+ }
237
+
238
+ .rdrDateDisplayItem {
239
+ border-radius: 4px;
240
+ background-color: rgb(255, 255, 255);
241
+ box-shadow: 0 1px 2px 0 rgba(35, 57, 66, 0.21);
242
+ border: 1px solid transparent;
243
+ }
244
+
245
+ .rdrDateDisplayItem input {
246
+ cursor: pointer;
247
+ height: 2.5em;
248
+ line-height: 2.5em;
249
+ border: 0px;
250
+ background: transparent;
251
+ width: 100%;
252
+ color: #849095;
253
+ }
254
+
255
+ .rdrDateDisplayItemActive {
256
+ border-color: currentColor;
257
+ }
258
+
259
+ .rdrDateDisplayItemActive input {
260
+ color: #7d888d
261
+ }
262
+
263
+ .rdrMonthAndYearWrapper {
264
+ align-items: center;
265
+ height: 60px;
266
+ padding-top: 10px;
267
+ }
268
+
269
+ .rdrMonthAndYearPickers {
270
+ font-weight: 600;
271
+ }
272
+
273
+ .rdrMonthAndYearPickers select {
274
+ -moz-appearance: none;
275
+ appearance: none;
276
+ -webkit-appearance: none;
277
+ border: 0;
278
+ background: transparent;
279
+ padding: 10px 30px 10px 10px;
280
+ border-radius: 4px;
281
+ outline: 0;
282
+ color: #3e484f;
283
+ background: url("data:image/svg+xml;utf8,<svg width='9px' height='6px' viewBox='0 0 9 6' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><g id='Artboard' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' transform='translate(-636.000000, -171.000000)' fill-opacity='0.368716033'><g id='input' transform='translate(172.000000, 37.000000)' fill='%230E242F' fill-rule='nonzero'><g id='Group-9' transform='translate(323.000000, 127.000000)'><path d='M142.280245,7.23952813 C141.987305,6.92353472 141.512432,6.92361662 141.219585,7.23971106 C140.926739,7.5558055 140.926815,8.06821394 141.219755,8.38420735 L145.498801,13 L149.780245,8.38162071 C150.073185,8.0656273 150.073261,7.55321886 149.780415,7.23712442 C149.487568,6.92102998 149.012695,6.92094808 148.719755,7.23694149 L145.498801,10.7113732 L142.280245,7.23952813 Z' id='arrow'></path></g></g></g></svg>") no-repeat;
284
+ background-position: right 8px center;
285
+ cursor: pointer;
286
+ text-align: center
287
+ }
288
+
289
+ .rdrMonthAndYearPickers select:hover {
290
+ background-color: rgba(0, 0, 0, 0.07);
291
+ }
292
+
293
+ .rdrMonthPicker,
294
+ .rdrYearPicker {
295
+ margin: 0 5px
296
+ }
297
+
298
+ .rdrNextPrevButton {
299
+ display: block;
300
+ width: 24px;
301
+ height: 24px;
302
+ margin: 0 0.833em;
303
+ padding: 0;
304
+ border: 0;
305
+ border-radius: 5px;
306
+ background: #EFF2F7
307
+ }
308
+
309
+ .rdrNextPrevButton:hover {
310
+ background: #E1E7F0;
311
+ }
312
+
313
+ .rdrNextPrevButton i {
314
+ display: block;
315
+ width: 0;
316
+ height: 0;
317
+ padding: 0;
318
+ text-align: center;
319
+ border-style: solid;
320
+ margin: auto;
321
+ transform: translate(-3px, 0px);
322
+ }
323
+
324
+ .rdrPprevButton i {
325
+ border-width: 4px 6px 4px 4px;
326
+ border-color: transparent rgb(52, 73, 94) transparent transparent;
327
+ transform: translate(-3px, 0px);
328
+ }
329
+
330
+ .rdrNextButton i {
331
+ margin: 0 0 0 7px;
332
+ border-width: 4px 4px 4px 6px;
333
+ border-color: transparent transparent transparent rgb(52, 73, 94);
334
+ transform: translate(3px, 0px);
335
+ }
336
+
337
+ .rdrWeekDays {
338
+ padding: 0 0.833em;
339
+ }
340
+
341
+ .rdrMonth {
342
+ padding: 0 0.833em 1.666em 0.833em;
343
+ }
344
+
345
+ .rdrMonth .rdrWeekDays {
346
+ padding: 0;
347
+ }
348
+
349
+ .rdrMonths.rdrMonthsVertical .rdrMonth:first-child .rdrMonthName {
350
+ display: none;
351
+ }
352
+
353
+ .rdrWeekDay {
354
+ font-weight: 400;
355
+ line-height: 2.667em;
356
+ color: rgb(132, 144, 149);
357
+ }
358
+
359
+ .rdrDay {
360
+ background: transparent;
361
+ -webkit-user-select: none;
362
+ -moz-user-select: none;
363
+ -ms-user-select: none;
364
+ user-select: none;
365
+ border: 0;
366
+ padding: 0;
367
+ line-height: 3.000em;
368
+ height: 3.000em;
369
+ text-align: center;
370
+ color: #1d2429
371
+ }
372
+
373
+ .rdrDay:focus {
374
+ outline: 0;
375
+ }
376
+
377
+ .rdrDayNumber {
378
+ outline: 0;
379
+ font-weight: 300;
380
+ position: absolute;
381
+ left: 0;
382
+ right: 0;
383
+ top: 0;
384
+ bottom: 0;
385
+ top: 5px;
386
+ bottom: 5px;
387
+ display: flex;
388
+ align-items: center;
389
+ justify-content: center;
390
+ }
391
+
392
+ .rdrDayToday .rdrDayNumber span {
393
+ font-weight: 500
394
+ }
395
+
396
+ .rdrDayToday .rdrDayNumber span:after {
397
+ content: '';
398
+ position: absolute;
399
+ bottom: 4px;
400
+ left: 50%;
401
+ transform: translate(-50%, 0);
402
+ width: 18px;
403
+ height: 2px;
404
+ border-radius: 2px;
405
+ background: #3d91ff;
406
+ }
407
+
408
+ .rdrDayToday:not(.rdrDayPassive) .rdrInRange~.rdrDayNumber span:after,
409
+ .rdrDayToday:not(.rdrDayPassive) .rdrStartEdge~.rdrDayNumber span:after,
410
+ .rdrDayToday:not(.rdrDayPassive) .rdrEndEdge~.rdrDayNumber span:after,
411
+ .rdrDayToday:not(.rdrDayPassive) .rdrSelected~.rdrDayNumber span:after {
412
+ background: #fff;
413
+ }
414
+
415
+ .rdrDay:not(.rdrDayPassive) .rdrInRange~.rdrDayNumber span,
416
+ .rdrDay:not(.rdrDayPassive) .rdrStartEdge~.rdrDayNumber span,
417
+ .rdrDay:not(.rdrDayPassive) .rdrEndEdge~.rdrDayNumber span,
418
+ .rdrDay:not(.rdrDayPassive) .rdrSelected~.rdrDayNumber span {
419
+ color: rgba(255, 255, 255, 0.85);
420
+ }
421
+
422
+ .rdrSelected,
423
+ .rdrInRange,
424
+ .rdrStartEdge,
425
+ .rdrEndEdge {
426
+ background: currentColor;
427
+ position: absolute;
428
+ top: 5px;
429
+ left: 0;
430
+ right: 0;
431
+ bottom: 5px;
432
+ }
433
+
434
+ .rdrSelected {
435
+ left: 2px;
436
+ right: 2px;
437
+ }
438
+
439
+ /* .rdrInRange {} */
440
+
441
+ .rdrStartEdge {
442
+ border-top-left-radius: 1.042em;
443
+ border-bottom-left-radius: 1.042em;
444
+ left: 2px;
445
+ }
446
+
447
+ .rdrEndEdge {
448
+ border-top-right-radius: 1.042em;
449
+ border-bottom-right-radius: 1.042em;
450
+ right: 2px;
451
+ }
452
+
453
+ .rdrSelected {
454
+ border-radius: 1.042em;
455
+ }
456
+
457
+ .rdrDayStartOfMonth .rdrInRange,
458
+ .rdrDayStartOfMonth .rdrEndEdge,
459
+ .rdrDayStartOfWeek .rdrInRange,
460
+ .rdrDayStartOfWeek .rdrEndEdge {
461
+ border-top-left-radius: 1.042em;
462
+ border-bottom-left-radius: 1.042em;
463
+ left: 2px;
464
+ }
465
+
466
+ .rdrDayEndOfMonth .rdrInRange,
467
+ .rdrDayEndOfMonth .rdrStartEdge,
468
+ .rdrDayEndOfWeek .rdrInRange,
469
+ .rdrDayEndOfWeek .rdrStartEdge {
470
+ border-top-right-radius: 1.042em;
471
+ border-bottom-right-radius: 1.042em;
472
+ right: 2px;
473
+ }
474
+
475
+ .rdrDayStartOfMonth .rdrDayInPreview,
476
+ .rdrDayStartOfMonth .rdrDayEndPreview,
477
+ .rdrDayStartOfWeek .rdrDayInPreview,
478
+ .rdrDayStartOfWeek .rdrDayEndPreview {
479
+ border-top-left-radius: 1.333em;
480
+ border-bottom-left-radius: 1.333em;
481
+ border-left-width: 1px;
482
+ left: 0px;
483
+ }
484
+
485
+ .rdrDayEndOfMonth .rdrDayInPreview,
486
+ .rdrDayEndOfMonth .rdrDayStartPreview,
487
+ .rdrDayEndOfWeek .rdrDayInPreview,
488
+ .rdrDayEndOfWeek .rdrDayStartPreview {
489
+ border-top-right-radius: 1.333em;
490
+ border-bottom-right-radius: 1.333em;
491
+ border-right-width: 1px;
492
+ right: 0px;
493
+ }
494
+
495
+ .rdrDayStartPreview,
496
+ .rdrDayInPreview,
497
+ .rdrDayEndPreview {
498
+ background: rgba(255, 255, 255, 0.09);
499
+ position: absolute;
500
+ top: 3px;
501
+ left: 0px;
502
+ right: 0px;
503
+ bottom: 3px;
504
+ pointer-events: none;
505
+ border: 0px solid currentColor;
506
+ z-index: 1;
507
+ }
508
+
509
+ .rdrDayStartPreview {
510
+ border-top-width: 1px;
511
+ border-left-width: 1px;
512
+ border-bottom-width: 1px;
513
+ border-top-left-radius: 1.333em;
514
+ border-bottom-left-radius: 1.333em;
515
+ left: 0px;
516
+ }
517
+
518
+ .rdrDayInPreview {
519
+ border-top-width: 1px;
520
+ border-bottom-width: 1px;
521
+ }
522
+
523
+ .rdrDayEndPreview {
524
+ border-top-width: 1px;
525
+ border-right-width: 1px;
526
+ border-bottom-width: 1px;
527
+ border-top-right-radius: 1.333em;
528
+ border-bottom-right-radius: 1.333em;
529
+ right: 2px;
530
+ right: 0px;
531
+ }
532
+
533
+ .rdrDefinedRangesWrapper {
534
+ font-size: 12px;
535
+ width: 226px;
536
+ border-right: solid 1px #eff2f7;
537
+ background: #fff;
538
+ }
539
+
540
+ .rdrDefinedRangesWrapper .rdrStaticRangeSelected {
541
+ color: currentColor;
542
+ font-weight: 600;
543
+ }
544
+
545
+ .rdrStaticRange {
546
+ border: 0;
547
+ cursor: pointer;
548
+ display: block;
549
+ outline: 0;
550
+ border-bottom: 1px solid #eff2f7;
551
+ padding: 0;
552
+ background: #fff
553
+ }
554
+
555
+ .rdrStaticRange:hover .rdrStaticRangeLabel,
556
+ .rdrStaticRange:focus .rdrStaticRangeLabel {
557
+ background: #eff2f7;
558
+ }
559
+
560
+ .rdrStaticRangeLabel {
561
+ display: block;
562
+ outline: 0;
563
+ line-height: 18px;
564
+ padding: 10px 20px;
565
+ text-align: left;
566
+ }
567
+
568
+ .rdrInputRanges {
569
+ padding: 10px 0;
570
+ }
571
+
572
+ .rdrInputRange {
573
+ align-items: center;
574
+ padding: 5px 20px;
575
+ }
576
+
577
+ .rdrInputRangeInput {
578
+ width: 30px;
579
+ height: 30px;
580
+ line-height: 30px;
581
+ border-radius: 4px;
582
+ text-align: center;
583
+ border: solid 1px rgb(222, 231, 235);
584
+ margin-right: 10px;
585
+ color: rgb(108, 118, 122)
586
+ }
587
+
588
+ .rdrInputRangeInput:focus,
589
+ .rdrInputRangeInput:hover {
590
+ border-color: rgb(180, 191, 196);
591
+ outline: 0;
592
+ color: #333;
593
+ }
594
+
595
+ .rdrCalendarWrapper:not(.rdrDateRangeWrapper) .rdrDayHovered .rdrDayNumber:after {
596
+ content: '';
597
+ border: 1px solid currentColor;
598
+ border-radius: 1.333em;
599
+ position: absolute;
600
+ top: -2px;
601
+ bottom: -2px;
602
+ left: 0px;
603
+ right: 0px;
604
+ background: transparent;
605
+ }
606
+
607
+ .rdrDayPassive {
608
+ pointer-events: none;
609
+ }
610
+
611
+ .rdrDayPassive .rdrDayNumber span {
612
+ color: #d5dce0;
613
+ }
614
+
615
+ .rdrDayPassive .rdrInRange,
616
+ .rdrDayPassive .rdrStartEdge,
617
+ .rdrDayPassive .rdrEndEdge,
618
+ .rdrDayPassive .rdrSelected,
619
+ .rdrDayPassive .rdrDayStartPreview,
620
+ .rdrDayPassive .rdrDayInPreview,
621
+ .rdrDayPassive .rdrDayEndPreview {
622
+ display: none;
623
+ }
624
+
625
+ .rdrDayDisabled {
626
+ background-color: rgb(248, 248, 248);
627
+ }
628
+
629
+ .rdrDayDisabled .rdrDayNumber span {
630
+ color: #aeb9bf;
631
+ }
632
+
633
+ .rdrDayDisabled .rdrInRange,
634
+ .rdrDayDisabled .rdrStartEdge,
635
+ .rdrDayDisabled .rdrEndEdge,
636
+ .rdrDayDisabled .rdrSelected,
637
+ .rdrDayDisabled .rdrDayStartPreview,
638
+ .rdrDayDisabled .rdrDayInPreview,
639
+ .rdrDayDisabled .rdrDayEndPreview {
640
+ filter: grayscale(100%) opacity(60%);
641
+ }
642
+
643
+ .rdrMonthName {
644
+ text-align: left;
645
+ font-weight: 600;
646
+ color: #849095;
647
+ padding: 0.833em;
648
+ }
649
+
650
+
651
+ /* DATE PICKER TIME */
652
+ .react-datepicker__year-read-view--down-arrow,
653
+ .react-datepicker__month-read-view--down-arrow,
654
+ .react-datepicker__month-year-read-view--down-arrow,
655
+ .react-datepicker__navigation-icon::before {
656
+ border-color: #ccc;
657
+ border-style: solid;
658
+ border-width: 3px 3px 0 0;
659
+ content: "";
660
+ display: block;
661
+ height: 9px;
662
+ position: absolute;
663
+ top: 6px;
664
+ width: 9px;
665
+ }
666
+
667
+ .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle,
668
+ .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {
669
+ margin-left: -4px;
670
+ position: absolute;
671
+ width: 0;
672
+ }
673
+
674
+ .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before,
675
+ .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before,
676
+ .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after,
677
+ .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after {
678
+ box-sizing: content-box;
679
+ position: absolute;
680
+ border: 8px solid transparent;
681
+ height: 0;
682
+ width: 1px;
683
+ content: "";
684
+ z-index: -1;
685
+ border-width: 8px;
686
+ left: -8px;
687
+ }
688
+
689
+ .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before,
690
+ .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before {
691
+ border-bottom-color: #aeaeae;
692
+ }
693
+
694
+ .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {
695
+ top: 0;
696
+ margin-top: -8px;
697
+ }
698
+
699
+ .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before,
700
+ .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after {
701
+ border-top: none;
702
+ border-bottom-color: #f0f0f0;
703
+ }
704
+
705
+ .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after {
706
+ top: 0;
707
+ }
708
+
709
+ .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before {
710
+ top: -1px;
711
+ border-bottom-color: #aeaeae;
712
+ }
713
+
714
+ .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle {
715
+ bottom: 0;
716
+ margin-bottom: -8px;
717
+ }
718
+
719
+ .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before,
720
+ .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after {
721
+ border-bottom: none;
722
+ border-top-color: #fff;
723
+ }
724
+
725
+ .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after {
726
+ bottom: 0;
727
+ }
728
+
729
+ .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before {
730
+ bottom: -1px;
731
+ border-top-color: #aeaeae;
732
+ }
733
+
734
+ .react-datepicker-wrapper {
735
+ display: inline-block;
736
+ padding: 0;
737
+ border: 0;
738
+ width: 100%;
739
+ }
740
+
741
+ .react-datepicker {
742
+ font-family: "Exo", Arial, sans-serif;
743
+ font-size: 13px;
744
+ font-weight: 300;
745
+ background-color: #fff;
746
+ color: #000;
747
+ border: 1px solid #aeaeae;
748
+ border-radius: 0.3rem;
749
+ display: inline-block;
750
+ position: relative;
751
+ }
752
+
753
+ .react-datepicker--time-only .react-datepicker__triangle {
754
+ left: 35px;
755
+ }
756
+
757
+ .react-datepicker--time-only .react-datepicker__time-container {
758
+ border-left: 0;
759
+ }
760
+
761
+ .react-datepicker--time-only .react-datepicker__time,
762
+ .react-datepicker--time-only .react-datepicker__time-box {
763
+ border-bottom-left-radius: 0.3rem;
764
+ border-bottom-right-radius: 0.3rem;
765
+ }
766
+
767
+ .react-datepicker__triangle {
768
+ position: absolute;
769
+ left: 50px;
770
+ }
771
+
772
+ .react-datepicker-popper {
773
+ z-index: 1;
774
+ }
775
+
776
+ .react-datepicker-popper[data-placement^=bottom] {
777
+ padding-top: 10px;
778
+ }
779
+
780
+ .react-datepicker-popper[data-placement=bottom-end] .react-datepicker__triangle,
781
+ .react-datepicker-popper[data-placement=top-end] .react-datepicker__triangle {
782
+ left: auto;
783
+ right: 50px;
784
+ }
785
+
786
+ .react-datepicker-popper[data-placement^=top] {
787
+ padding-bottom: 10px;
788
+ }
789
+
790
+ .react-datepicker-popper[data-placement^=right] {
791
+ padding-left: 8px;
792
+ }
793
+
794
+ .react-datepicker-popper[data-placement^=right] .react-datepicker__triangle {
795
+ left: auto;
796
+ right: 42px;
797
+ }
798
+
799
+ .react-datepicker-popper[data-placement^=left] {
800
+ padding-right: 8px;
801
+ }
802
+
803
+ .react-datepicker-popper[data-placement^=left] .react-datepicker__triangle {
804
+ left: 42px;
805
+ right: auto;
806
+ }
807
+
808
+ .react-datepicker__header {
809
+ text-align: center;
810
+ background-color: #f0f0f0;
811
+ border-bottom: 1px solid #aeaeae;
812
+ border-top-left-radius: 0.3rem;
813
+ padding: 8px 0;
814
+ position: relative;
815
+ }
816
+
817
+ .react-datepicker__header--time {
818
+ padding-bottom: 8px;
819
+ padding-left: 5px;
820
+ padding-right: 5px;
821
+ }
822
+
823
+ .react-datepicker__header--time:not(.react-datepicker__header--time--only) {
824
+ border-top-left-radius: 0;
825
+ }
826
+
827
+ .react-datepicker__header:not(.react-datepicker__header--has-time-select) {
828
+ border-top-right-radius: 0.3rem;
829
+ }
830
+
831
+ .react-datepicker__year-dropdown-container--select,
832
+ .react-datepicker__month-dropdown-container--select,
833
+ .react-datepicker__month-year-dropdown-container--select,
834
+ .react-datepicker__year-dropdown-container--scroll,
835
+ .react-datepicker__month-dropdown-container--scroll,
836
+ .react-datepicker__month-year-dropdown-container--scroll {
837
+ display: inline-block;
838
+ margin: 0 15px;
839
+ }
840
+
841
+ .react-datepicker__current-month,
842
+ .react-datepicker-time__header,
843
+ .react-datepicker-year-header {
844
+ margin-top: 0;
845
+ color: #000;
846
+ font-weight: bold;
847
+ font-size: 0.944rem;
848
+ }
849
+
850
+ .react-datepicker-time__header {
851
+ text-overflow: ellipsis;
852
+ white-space: nowrap;
853
+ overflow: hidden;
854
+ }
855
+
856
+ .react-datepicker__navigation {
857
+ align-items: center;
858
+ background: none;
859
+ display: flex;
860
+ justify-content: center;
861
+ text-align: center;
862
+ cursor: pointer;
863
+ position: absolute;
864
+ top: 2px;
865
+ padding: 0;
866
+ border: none;
867
+ z-index: 1;
868
+ height: 32px;
869
+ width: 32px;
870
+ text-indent: -999em;
871
+ overflow: hidden;
872
+ }
873
+
874
+ .react-datepicker__navigation--previous {
875
+ left: 2px;
876
+ }
877
+
878
+ .react-datepicker__navigation--next {
879
+ right: 2px;
880
+ }
881
+
882
+ .react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
883
+ right: 85px;
884
+ }
885
+
886
+ .react-datepicker__navigation--years {
887
+ position: relative;
888
+ top: 0;
889
+ display: block;
890
+ margin-left: auto;
891
+ margin-right: auto;
892
+ }
893
+
894
+ .react-datepicker__navigation--years-previous {
895
+ top: 4px;
896
+ }
897
+
898
+ .react-datepicker__navigation--years-upcoming {
899
+ top: -4px;
900
+ }
901
+
902
+ .react-datepicker__navigation:hover *::before {
903
+ border-color: #a6a6a6;
904
+ }
905
+
906
+ .react-datepicker__navigation-icon {
907
+ position: relative;
908
+ top: -1px;
909
+ font-size: 20px;
910
+ width: 0;
911
+ }
912
+
913
+ .react-datepicker__navigation-icon--next {
914
+ left: -2px;
915
+ }
916
+
917
+ .react-datepicker__navigation-icon--next::before {
918
+ transform: rotate(45deg);
919
+ left: -7px;
920
+ }
921
+
922
+ .react-datepicker__navigation-icon--previous {
923
+ right: -2px;
924
+ }
925
+
926
+ .react-datepicker__navigation-icon--previous::before {
927
+ transform: rotate(225deg);
928
+ right: -7px;
929
+ }
930
+
931
+ .react-datepicker__month-container {
932
+ float: left;
933
+ }
934
+
935
+ .react-datepicker__year {
936
+ margin: 0.4rem;
937
+ text-align: center;
938
+ }
939
+
940
+ .react-datepicker__year-wrapper {
941
+ display: flex;
942
+ flex-wrap: wrap;
943
+ max-width: 180px;
944
+ }
945
+
946
+ .react-datepicker__year .react-datepicker__year-text {
947
+ display: inline-block;
948
+ width: 4rem;
949
+ margin: 2px;
950
+ }
951
+
952
+ .react-datepicker__month {
953
+ margin: 0.4rem;
954
+ text-align: center;
955
+ }
956
+
957
+ .react-datepicker__month .react-datepicker__month-text,
958
+ .react-datepicker__month .react-datepicker__quarter-text {
959
+ display: inline-block;
960
+ width: 4rem;
961
+ margin: 2px;
962
+ }
963
+
964
+ .react-datepicker__input-time-container {
965
+ clear: both;
966
+ width: 100%;
967
+ float: left;
968
+ margin: 5px 0 10px 15px;
969
+ text-align: left;
970
+ }
971
+
972
+ .react-datepicker__input-time-container .react-datepicker-time__caption {
973
+ display: inline-block;
974
+ }
975
+
976
+ .react-datepicker__input-time-container .react-datepicker-time__input-container {
977
+ display: inline-block;
978
+ }
979
+
980
+ .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input {
981
+ display: inline-block;
982
+ margin-left: 10px;
983
+ }
984
+
985
+ .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input {
986
+ width: auto;
987
+ }
988
+
989
+ .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-inner-spin-button,
990
+ .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-outer-spin-button {
991
+ -webkit-appearance: none;
992
+ margin: 0;
993
+ }
994
+
995
+ /* .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time] {
996
+ -moz-appearance: textfield;
997
+ } */
998
+ .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter {
999
+ margin-left: 5px;
1000
+ display: inline-block;
1001
+ }
1002
+
1003
+ .react-datepicker__time-container {
1004
+ float: right;
1005
+ border-left: 1px solid #aeaeae;
1006
+ width: 85px;
1007
+ }
1008
+
1009
+ .react-datepicker__time-container--with-today-button {
1010
+ display: inline;
1011
+ border: 1px solid #aeaeae;
1012
+ border-radius: 0.3rem;
1013
+ position: absolute;
1014
+ right: -87px;
1015
+ top: 0;
1016
+ }
1017
+
1018
+ .react-datepicker__time-container .react-datepicker__time {
1019
+ position: relative;
1020
+ background: white;
1021
+ border-bottom-right-radius: 0.3rem;
1022
+ }
1023
+
1024
+ .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {
1025
+ width: 85px;
1026
+ overflow-x: hidden;
1027
+ margin: 0 auto;
1028
+ text-align: center;
1029
+ border-bottom-right-radius: 0.3rem;
1030
+ }
1031
+
1032
+ .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {
1033
+ list-style: none;
1034
+ margin: 0;
1035
+ height: calc(195px + (1.7rem / 2));
1036
+ overflow-y: scroll;
1037
+ padding-right: 0;
1038
+ padding-left: 0;
1039
+ width: 100%;
1040
+ box-sizing: content-box;
1041
+ }
1042
+
1043
+ .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {
1044
+ height: 30px;
1045
+ padding: 5px 10px;
1046
+ white-space: nowrap;
1047
+ }
1048
+
1049
+ .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {
1050
+ cursor: pointer;
1051
+ background-color: #f0f0f0;
1052
+ }
1053
+
1054
+ .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {
1055
+ background-color: #216ba5;
1056
+ color: white;
1057
+ font-weight: bold;
1058
+ }
1059
+
1060
+ .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover {
1061
+ background-color: #216ba5;
1062
+ }
1063
+
1064
+ .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled {
1065
+ color: #ccc;
1066
+ }
1067
+
1068
+ .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover {
1069
+ cursor: default;
1070
+ background-color: transparent;
1071
+ }
1072
+
1073
+ .react-datepicker__week-number {
1074
+ color: #ccc;
1075
+ display: inline-block;
1076
+ width: 1.7rem;
1077
+ line-height: 1.7rem;
1078
+ text-align: center;
1079
+ margin: 0.166rem;
1080
+ }
1081
+
1082
+ .react-datepicker__week-number.react-datepicker__week-number--clickable {
1083
+ cursor: pointer;
1084
+ }
1085
+
1086
+ .react-datepicker__week-number.react-datepicker__week-number--clickable:hover {
1087
+ border-radius: 0.3rem;
1088
+ background-color: #f0f0f0;
1089
+ }
1090
+
1091
+ .react-datepicker__day-names,
1092
+ .react-datepicker__week {
1093
+ white-space: nowrap;
1094
+ }
1095
+
1096
+ .react-datepicker__day-names {
1097
+ margin-bottom: -8px;
1098
+ }
1099
+
1100
+ .react-datepicker__day-name,
1101
+ .react-datepicker__day,
1102
+ .react-datepicker__time-name {
1103
+ color: #000;
1104
+ display: inline-block;
1105
+ width: 1.7rem;
1106
+ line-height: 1.7rem;
1107
+ text-align: center;
1108
+ margin: 0.166rem;
1109
+ }
1110
+
1111
+ .react-datepicker__month--selected,
1112
+ .react-datepicker__month--in-selecting-range,
1113
+ .react-datepicker__month--in-range,
1114
+ .react-datepicker__quarter--selected,
1115
+ .react-datepicker__quarter--in-selecting-range,
1116
+ .react-datepicker__quarter--in-range {
1117
+ border-radius: 0.3rem;
1118
+ background-color: #216ba5;
1119
+ color: #fff;
1120
+ }
1121
+
1122
+ .react-datepicker__month--selected:hover,
1123
+ .react-datepicker__month--in-selecting-range:hover,
1124
+ .react-datepicker__month--in-range:hover,
1125
+ .react-datepicker__quarter--selected:hover,
1126
+ .react-datepicker__quarter--in-selecting-range:hover,
1127
+ .react-datepicker__quarter--in-range:hover {
1128
+ background-color: #1d5d90;
1129
+ }
1130
+
1131
+ .react-datepicker__month--disabled,
1132
+ .react-datepicker__quarter--disabled {
1133
+ color: #ccc;
1134
+ pointer-events: none;
1135
+ }
1136
+
1137
+ .react-datepicker__month--disabled:hover,
1138
+ .react-datepicker__quarter--disabled:hover {
1139
+ cursor: default;
1140
+ background-color: transparent;
1141
+ }
1142
+
1143
+ .react-datepicker__day,
1144
+ .react-datepicker__month-text,
1145
+ .react-datepicker__quarter-text,
1146
+ .react-datepicker__year-text {
1147
+ cursor: pointer;
1148
+ }
1149
+
1150
+ .react-datepicker__day:hover,
1151
+ .react-datepicker__month-text:hover,
1152
+ .react-datepicker__quarter-text:hover,
1153
+ .react-datepicker__year-text:hover {
1154
+ border-radius: 0.3rem;
1155
+ background-color: #f0f0f0;
1156
+ }
1157
+
1158
+ .react-datepicker__day--today,
1159
+ .react-datepicker__month-text--today,
1160
+ .react-datepicker__quarter-text--today,
1161
+ .react-datepicker__year-text--today {
1162
+ font-weight: bold;
1163
+ }
1164
+
1165
+ .react-datepicker__day--highlighted,
1166
+ .react-datepicker__month-text--highlighted,
1167
+ .react-datepicker__quarter-text--highlighted,
1168
+ .react-datepicker__year-text--highlighted {
1169
+ border-radius: 0.3rem;
1170
+ background-color: #3dcc4a;
1171
+ color: #fff;
1172
+ }
1173
+
1174
+ .react-datepicker__day--highlighted:hover,
1175
+ .react-datepicker__month-text--highlighted:hover,
1176
+ .react-datepicker__quarter-text--highlighted:hover,
1177
+ .react-datepicker__year-text--highlighted:hover {
1178
+ background-color: #32be3f;
1179
+ }
1180
+
1181
+ .react-datepicker__day--highlighted-custom-1,
1182
+ .react-datepicker__month-text--highlighted-custom-1,
1183
+ .react-datepicker__quarter-text--highlighted-custom-1,
1184
+ .react-datepicker__year-text--highlighted-custom-1 {
1185
+ color: magenta;
1186
+ }
1187
+
1188
+ .react-datepicker__day--highlighted-custom-2,
1189
+ .react-datepicker__month-text--highlighted-custom-2,
1190
+ .react-datepicker__quarter-text--highlighted-custom-2,
1191
+ .react-datepicker__year-text--highlighted-custom-2 {
1192
+ color: green;
1193
+ }
1194
+
1195
+ .react-datepicker__day--selected,
1196
+ .react-datepicker__day--in-selecting-range,
1197
+ .react-datepicker__day--in-range,
1198
+ .react-datepicker__month-text--selected,
1199
+ .react-datepicker__month-text--in-selecting-range,
1200
+ .react-datepicker__month-text--in-range,
1201
+ .react-datepicker__quarter-text--selected,
1202
+ .react-datepicker__quarter-text--in-selecting-range,
1203
+ .react-datepicker__quarter-text--in-range,
1204
+ .react-datepicker__year-text--selected,
1205
+ .react-datepicker__year-text--in-selecting-range,
1206
+ .react-datepicker__year-text--in-range {
1207
+ border-radius: 0.3rem;
1208
+ background-color: #216ba5;
1209
+ color: #fff;
1210
+ }
1211
+
1212
+ .react-datepicker__day--selected:hover,
1213
+ .react-datepicker__day--in-selecting-range:hover,
1214
+ .react-datepicker__day--in-range:hover,
1215
+ .react-datepicker__month-text--selected:hover,
1216
+ .react-datepicker__month-text--in-selecting-range:hover,
1217
+ .react-datepicker__month-text--in-range:hover,
1218
+ .react-datepicker__quarter-text--selected:hover,
1219
+ .react-datepicker__quarter-text--in-selecting-range:hover,
1220
+ .react-datepicker__quarter-text--in-range:hover,
1221
+ .react-datepicker__year-text--selected:hover,
1222
+ .react-datepicker__year-text--in-selecting-range:hover,
1223
+ .react-datepicker__year-text--in-range:hover {
1224
+ background-color: #1d5d90;
1225
+ }
1226
+
1227
+ .react-datepicker__day--keyboard-selected,
1228
+ .react-datepicker__month-text--keyboard-selected,
1229
+ .react-datepicker__quarter-text--keyboard-selected,
1230
+ .react-datepicker__year-text--keyboard-selected {
1231
+ border-radius: 0.3rem;
1232
+ background-color: #bad9f1;
1233
+ color: rgb(0, 0, 0);
1234
+ }
1235
+
1236
+ .react-datepicker__day--keyboard-selected:hover,
1237
+ .react-datepicker__month-text--keyboard-selected:hover,
1238
+ .react-datepicker__quarter-text--keyboard-selected:hover,
1239
+ .react-datepicker__year-text--keyboard-selected:hover {
1240
+ background-color: #1d5d90;
1241
+ }
1242
+
1243
+ .react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range,
1244
+ .react-datepicker__month-text--in-range,
1245
+ .react-datepicker__quarter-text--in-range,
1246
+ .react-datepicker__year-text--in-range),
1247
+ .react-datepicker__month-text--in-selecting-range:not(.react-datepicker__day--in-range,
1248
+ .react-datepicker__month-text--in-range,
1249
+ .react-datepicker__quarter-text--in-range,
1250
+ .react-datepicker__year-text--in-range),
1251
+ .react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__day--in-range,
1252
+ .react-datepicker__month-text--in-range,
1253
+ .react-datepicker__quarter-text--in-range,
1254
+ .react-datepicker__year-text--in-range),
1255
+ .react-datepicker__year-text--in-selecting-range:not(.react-datepicker__day--in-range,
1256
+ .react-datepicker__month-text--in-range,
1257
+ .react-datepicker__quarter-text--in-range,
1258
+ .react-datepicker__year-text--in-range) {
1259
+ background-color: rgba(33, 107, 165, 0.5);
1260
+ }
1261
+
1262
+ .react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,
1263
+ .react-datepicker__month-text--in-selecting-range,
1264
+ .react-datepicker__quarter-text--in-selecting-range,
1265
+ .react-datepicker__year-text--in-selecting-range),
1266
+ .react-datepicker__month--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,
1267
+ .react-datepicker__month-text--in-selecting-range,
1268
+ .react-datepicker__quarter-text--in-selecting-range,
1269
+ .react-datepicker__year-text--in-selecting-range),
1270
+ .react-datepicker__month--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,
1271
+ .react-datepicker__month-text--in-selecting-range,
1272
+ .react-datepicker__quarter-text--in-selecting-range,
1273
+ .react-datepicker__year-text--in-selecting-range),
1274
+ .react-datepicker__month--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,
1275
+ .react-datepicker__month-text--in-selecting-range,
1276
+ .react-datepicker__quarter-text--in-selecting-range,
1277
+ .react-datepicker__year-text--in-selecting-range) {
1278
+ background-color: #f0f0f0;
1279
+ color: #000;
1280
+ }
1281
+
1282
+ .react-datepicker__day--disabled,
1283
+ .react-datepicker__month-text--disabled,
1284
+ .react-datepicker__quarter-text--disabled,
1285
+ .react-datepicker__year-text--disabled {
1286
+ cursor: default;
1287
+ color: #ccc;
1288
+ }
1289
+
1290
+ .react-datepicker__day--disabled:hover,
1291
+ .react-datepicker__month-text--disabled:hover,
1292
+ .react-datepicker__quarter-text--disabled:hover,
1293
+ .react-datepicker__year-text--disabled:hover {
1294
+ background-color: transparent;
1295
+ }
1296
+
1297
+ .react-datepicker__month-text.react-datepicker__month--selected:hover,
1298
+ .react-datepicker__month-text.react-datepicker__month--in-range:hover,
1299
+ .react-datepicker__month-text.react-datepicker__quarter--selected:hover,
1300
+ .react-datepicker__month-text.react-datepicker__quarter--in-range:hover,
1301
+ .react-datepicker__quarter-text.react-datepicker__month--selected:hover,
1302
+ .react-datepicker__quarter-text.react-datepicker__month--in-range:hover,
1303
+ .react-datepicker__quarter-text.react-datepicker__quarter--selected:hover,
1304
+ .react-datepicker__quarter-text.react-datepicker__quarter--in-range:hover {
1305
+ background-color: #216ba5;
1306
+ }
1307
+
1308
+ .react-datepicker__month-text:hover,
1309
+ .react-datepicker__quarter-text:hover {
1310
+ background-color: #f0f0f0;
1311
+ }
1312
+
1313
+ .react-datepicker__input-container {
1314
+ position: relative;
1315
+ display: inline-block;
1316
+ width: 100%;
1317
+ }
1318
+
1319
+ .react-datepicker__year-read-view,
1320
+ .react-datepicker__month-read-view,
1321
+ .react-datepicker__month-year-read-view {
1322
+ border: 1px solid transparent;
1323
+ border-radius: 0.3rem;
1324
+ position: relative;
1325
+ }
1326
+
1327
+ .react-datepicker__year-read-view:hover,
1328
+ .react-datepicker__month-read-view:hover,
1329
+ .react-datepicker__month-year-read-view:hover {
1330
+ cursor: pointer;
1331
+ }
1332
+
1333
+ .react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,
1334
+ .react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,
1335
+ .react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,
1336
+ .react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,
1337
+ .react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,
1338
+ .react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow {
1339
+ border-top-color: #b3b3b3;
1340
+ }
1341
+
1342
+ .react-datepicker__year-read-view--down-arrow,
1343
+ .react-datepicker__month-read-view--down-arrow,
1344
+ .react-datepicker__month-year-read-view--down-arrow {
1345
+ transform: rotate(135deg);
1346
+ right: -16px;
1347
+ top: 0;
1348
+ }
1349
+
1350
+ .react-datepicker__year-dropdown,
1351
+ .react-datepicker__month-dropdown,
1352
+ .react-datepicker__month-year-dropdown {
1353
+ background-color: #f0f0f0;
1354
+ position: absolute;
1355
+ width: 50%;
1356
+ left: 25%;
1357
+ top: 30px;
1358
+ z-index: 1;
1359
+ text-align: center;
1360
+ border-radius: 0.3rem;
1361
+ border: 1px solid #aeaeae;
1362
+ }
1363
+
1364
+ .react-datepicker__year-dropdown:hover,
1365
+ .react-datepicker__month-dropdown:hover,
1366
+ .react-datepicker__month-year-dropdown:hover {
1367
+ cursor: pointer;
1368
+ }
1369
+
1370
+ .react-datepicker__year-dropdown--scrollable,
1371
+ .react-datepicker__month-dropdown--scrollable,
1372
+ .react-datepicker__month-year-dropdown--scrollable {
1373
+ height: 150px;
1374
+ overflow-y: scroll;
1375
+ }
1376
+
1377
+ .react-datepicker__year-option,
1378
+ .react-datepicker__month-option,
1379
+ .react-datepicker__month-year-option {
1380
+ line-height: 20px;
1381
+ width: 100%;
1382
+ display: block;
1383
+ margin-left: auto;
1384
+ margin-right: auto;
1385
+ }
1386
+
1387
+ .react-datepicker__year-option:first-of-type,
1388
+ .react-datepicker__month-option:first-of-type,
1389
+ .react-datepicker__month-year-option:first-of-type {
1390
+ border-top-left-radius: 0.3rem;
1391
+ border-top-right-radius: 0.3rem;
1392
+ }
1393
+
1394
+ .react-datepicker__year-option:last-of-type,
1395
+ .react-datepicker__month-option:last-of-type,
1396
+ .react-datepicker__month-year-option:last-of-type {
1397
+ -webkit-user-select: none;
1398
+ -moz-user-select: none;
1399
+ -ms-user-select: none;
1400
+ user-select: none;
1401
+ border-bottom-left-radius: 0.3rem;
1402
+ border-bottom-right-radius: 0.3rem;
1403
+ }
1404
+
1405
+ .react-datepicker__year-option:hover,
1406
+ .react-datepicker__month-option:hover,
1407
+ .react-datepicker__month-year-option:hover {
1408
+ background-color: #ccc;
1409
+ }
1410
+
1411
+ .react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming,
1412
+ .react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,
1413
+ .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming {
1414
+ border-bottom-color: #b3b3b3;
1415
+ }
1416
+
1417
+ .react-datepicker__year-option:hover .react-datepicker__navigation--years-previous,
1418
+ .react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,
1419
+ .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous {
1420
+ border-top-color: #b3b3b3;
1421
+ }
1422
+
1423
+ .react-datepicker__year-option--selected,
1424
+ .react-datepicker__month-option--selected,
1425
+ .react-datepicker__month-year-option--selected {
1426
+ position: absolute;
1427
+ left: 15px;
1428
+ }
1429
+
1430
+ .react-datepicker__close-icon {
1431
+ cursor: pointer;
1432
+ background-color: transparent;
1433
+ border: 0;
1434
+ outline: 0;
1435
+ padding: 0 6px 0 0;
1436
+ position: absolute;
1437
+ top: 0;
1438
+ right: 0;
1439
+ height: 100%;
1440
+ display: table-cell;
1441
+ vertical-align: middle;
1442
+ }
1443
+
1444
+ .react-datepicker__close-icon::after {
1445
+ cursor: pointer;
1446
+ background-color: #216ba5;
1447
+ color: #fff;
1448
+ border-radius: 50%;
1449
+ height: 16px;
1450
+ width: 16px;
1451
+ padding: 2px;
1452
+ font-size: 12px;
1453
+ line-height: 1;
1454
+ text-align: center;
1455
+ display: table-cell;
1456
+ vertical-align: middle;
1457
+ content: "×";
1458
+ }
1459
+
1460
+ .react-datepicker__today-button {
1461
+ background: #f0f0f0;
1462
+ border-top: 1px solid #aeaeae;
1463
+ cursor: pointer;
1464
+ text-align: center;
1465
+ font-weight: bold;
1466
+ padding: 5px 0;
1467
+ clear: left;
1468
+ }
1469
+
1470
+ .react-datepicker__portal {
1471
+ position: fixed;
1472
+ width: 100vw;
1473
+ height: 100vh;
1474
+ background-color: rgba(0, 0, 0, 0.8);
1475
+ left: 0;
1476
+ top: 0;
1477
+ justify-content: center;
1478
+ align-items: center;
1479
+ display: flex;
1480
+ z-index: 2147483647;
1481
+ }
1482
+
1483
+ .react-datepicker__portal .react-datepicker__day-name,
1484
+ .react-datepicker__portal .react-datepicker__day,
1485
+ .react-datepicker__portal .react-datepicker__time-name {
1486
+ width: 3rem;
1487
+ line-height: 3rem;
1488
+ }
1489
+
1490
+ @media (max-width: 400px),
1491
+ (max-height: 550px) {
1492
+
1493
+ .react-datepicker__portal .react-datepicker__day-name,
1494
+ .react-datepicker__portal .react-datepicker__day,
1495
+ .react-datepicker__portal .react-datepicker__time-name {
1496
+ width: 2rem;
1497
+ line-height: 2rem;
1498
+ }
1499
+ }
1500
+
1501
+ .react-datepicker__portal .react-datepicker__current-month,
1502
+ .react-datepicker__portal .react-datepicker-time__header {
1503
+ font-size: 1.44rem;
1504
+ }
1505
+
1506
+ .react-datepicker__children-container {
1507
+ width: 13.8rem;
1508
+ margin: 0.4rem;
1509
+ padding-right: 0.2rem;
1510
+ padding-left: 0.2rem;
1511
+ height: auto;
1512
+ }
1513
+
1514
+ .react-datepicker__aria-live {
1515
+ position: absolute;
1516
+ clip-path: circle(0);
1517
+ border: 0;
1518
+ height: 1px;
1519
+ margin: -1px;
1520
+ overflow: hidden;
1521
+ padding: 0;
1522
+ width: 1px;
1523
+ white-space: nowrap;
1524
+ }