/app/assets/stylesheets/vendor/react-datepicker.css

https://github.com/inoda/ontrack · CSS · 779 lines · 662 code · 117 blank · 0 comment · 0 complexity · 30af935a6c9bff0f80698dcfeacb511a MD5 · raw file

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