mcarman
/
React_Client_App_Access
1
0
Форкнуть 0
Код Задачи 0 Pull Request'ы 0 Релизы 0 Вики Активность
Вы не можете выбрать более 25 тем Темы должны начинаться с буквы или цифры, могут содержать дефисы(-) и должны содержать не более 35 символов.
3 коммитов
1 ветка
84 MiB
 
 
 
 
ветка: master
Ветки Теги
${ item.name }
Создать ветку ${ searchTerm }
из 'master'
${ noResults }
React_Client_App_Access/node_modules/react-datepicker/dist/react-datepicker-cssmodules...

800 строки
24 KiB
Исходник Постоянная ссылка Вина История 

  1. :global .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle, :global .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle, :global .react-datepicker__year-read-view--down-arrow,

  2. :global .react-datepicker__month-read-view--down-arrow,

  3. :global .react-datepicker__month-year-read-view--down-arrow {

  4.   margin-left: -8px;

  5.   position: absolute;

  6. }

  7. 

  8. :global .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle, :global .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle, :global .react-datepicker__year-read-view--down-arrow,

  9. :global .react-datepicker__month-read-view--down-arrow,

  10. :global .react-datepicker__month-year-read-view--down-arrow, :global .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before, :global .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before, :global .react-datepicker__year-read-view--down-arrow::before,

  11. :global .react-datepicker__month-read-view--down-arrow::before,

  12. :global .react-datepicker__month-year-read-view--down-arrow::before {

  13.   box-sizing: content-box;

  14.   position: absolute;

  15.   border: 8px solid transparent;

  16.   height: 0;

  17.   width: 1px;

  18. }

  19. 

  20. :global .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before, :global .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before, :global .react-datepicker__year-read-view--down-arrow::before,

  21. :global .react-datepicker__month-read-view--down-arrow::before,

  22. :global .react-datepicker__month-year-read-view--down-arrow::before {

  23.   content: "";

  24.   z-index: -1;

  25.   border-width: 8px;

  26.   left: -8px;

  27.   border-bottom-color: #aeaeae;

  28. }

  29. 

  30. :global .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle {

  31.   top: 0;

  32.   margin-top: -8px;

  33. }

  34. 

  35. :global .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle, :global .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before {

  36.   border-top: none;

  37.   border-bottom-color: #f0f0f0;

  38. }

  39. 

  40. :global .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before {

  41.   top: -1px;

  42.   border-bottom-color: #aeaeae;

  43. }

  44. 

  45. :global .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle, :global .react-datepicker__year-read-view--down-arrow,

  46. :global .react-datepicker__month-read-view--down-arrow,

  47. :global .react-datepicker__month-year-read-view--down-arrow {

  48.   bottom: 0;

  49.   margin-bottom: -8px;

  50. }

  51. 

  52. :global .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle, :global .react-datepicker__year-read-view--down-arrow,

  53. :global .react-datepicker__month-read-view--down-arrow,

  54. :global .react-datepicker__month-year-read-view--down-arrow, :global .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before, :global .react-datepicker__year-read-view--down-arrow::before,

  55. :global .react-datepicker__month-read-view--down-arrow::before,

  56. :global .react-datepicker__month-year-read-view--down-arrow::before {

  57.   border-bottom: none;

  58.   border-top-color: #fff;

  59. }

  60. 

  61. :global .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before, :global .react-datepicker__year-read-view--down-arrow::before,

  62. :global .react-datepicker__month-read-view--down-arrow::before,

  63. :global .react-datepicker__month-year-read-view--down-arrow::before {

  64.   bottom: -1px;

  65.   border-top-color: #aeaeae;

  66. }

  67. 

  68. :global .react-datepicker-wrapper {

  69.   display: inline-block;

  70.   padding: 0;

  71.   border: 0;

  72. }

  73. 

  74. :global .react-datepicker {

  75.   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

  76.   font-size: 0.8rem;

  77.   background-color: #fff;

  78.   color: #000;

  79.   border: 1px solid #aeaeae;

  80.   border-radius: 0.3rem;

  81.   display: inline-block;

  82.   position: relative;

  83. }

  84. 

  85. :global .react-datepicker--time-only .react-datepicker__triangle {

  86.   left: 35px;

  87. }

  88. 

  89. :global .react-datepicker--time-only .react-datepicker__time-container {

  90.   border-left: 0;

  91. }

  92. 

  93. :global .react-datepicker--time-only .react-datepicker__time {

  94.   border-radius: 0.3rem;

  95. }

  96. 

  97. :global .react-datepicker--time-only .react-datepicker__time-box {

  98.   border-radius: 0.3rem;

  99. }

  100. 

  101. :global .react-datepicker__triangle {

  102.   position: absolute;

  103.   left: 50px;

  104. }

  105. 

  106. :global .react-datepicker-popper {

  107.   z-index: 1;

  108. }

  109. 

  110. :global .react-datepicker-popper[data-placement^="bottom"] {

  111.   margin-top: 10px;

  112. }

  113. 

  114. :global .react-datepicker-popper[data-placement="bottom-end"] .react-datepicker__triangle, :global .react-datepicker-popper[data-placement="top-end"] .react-datepicker__triangle {

  115.   left: auto;

  116.   right: 50px;

  117. }

  118. 

  119. :global .react-datepicker-popper[data-placement^="top"] {

  120.   margin-bottom: 10px;

  121. }

  122. 

  123. :global .react-datepicker-popper[data-placement^="right"] {

  124.   margin-left: 8px;

  125. }

  126. 

  127. :global .react-datepicker-popper[data-placement^="right"] .react-datepicker__triangle {

  128.   left: auto;

  129.   right: 42px;

  130. }

  131. 

  132. :global .react-datepicker-popper[data-placement^="left"] {

  133.   margin-right: 8px;

  134. }

  135. 

  136. :global .react-datepicker-popper[data-placement^="left"] .react-datepicker__triangle {

  137.   left: 42px;

  138.   right: auto;

  139. }

  140. 

  141. :global .react-datepicker__header {

  142.   text-align: center;

  143.   background-color: #f0f0f0;

  144.   border-bottom: 1px solid #aeaeae;

  145.   border-top-left-radius: 0.3rem;

  146.   border-top-right-radius: 0.3rem;

  147.   padding-top: 8px;

  148.   position: relative;

  149. }

  150. 

  151. :global .react-datepicker__header--time {

  152.   padding-bottom: 8px;

  153.   padding-left: 5px;

  154.   padding-right: 5px;

  155. }

  156. 

  157. :global .react-datepicker__year-dropdown-container--select,

  158. :global .react-datepicker__month-dropdown-container--select,

  159. :global .react-datepicker__month-year-dropdown-container--select,

  160. :global .react-datepicker__year-dropdown-container--scroll,

  161. :global .react-datepicker__month-dropdown-container--scroll,

  162. :global .react-datepicker__month-year-dropdown-container--scroll {

  163.   display: inline-block;

  164.   margin: 0 2px;

  165. }

  166. 

  167. :global .react-datepicker__current-month,

  168. :global .react-datepicker-time__header,

  169. :global .react-datepicker-year-header {

  170.   margin-top: 0;

  171.   color: #000;

  172.   font-weight: bold;

  173.   font-size: 0.944rem;

  174. }

  175. 

  176. :global .react-datepicker-time__header {

  177.   text-overflow: ellipsis;

  178.   white-space: nowrap;

  179.   overflow: hidden;

  180. }

  181. 

  182. :global .react-datepicker__navigation {

  183.   background: none;

  184.   line-height: 1.7rem;

  185.   text-align: center;

  186.   cursor: pointer;

  187.   position: absolute;

  188.   top: 10px;

  189.   width: 0;

  190.   padding: 0;

  191.   border: 0.45rem solid transparent;

  192.   z-index: 1;

  193.   height: 10px;

  194.   width: 10px;

  195.   text-indent: -999em;

  196.   overflow: hidden;

  197. }

  198. 

  199. :global .react-datepicker__navigation--previous {

  200.   left: 10px;

  201.   border-right-color: #ccc;

  202. }

  203. 

  204. :global .react-datepicker__navigation--previous:hover {

  205.   border-right-color: #b3b3b3;

  206. }

  207. 

  208. :global .react-datepicker__navigation--previous--disabled, :global .react-datepicker__navigation--previous--disabled:hover {

  209.   border-right-color: #e6e6e6;

  210.   cursor: default;

  211. }

  212. 

  213. :global .react-datepicker__navigation--next {

  214.   right: 10px;

  215.   border-left-color: #ccc;

  216. }

  217. 

  218. :global .react-datepicker__navigation--next--with-time {

  219.   right: 80px;

  220. }

  221. 

  222. :global .react-datepicker__navigation--next:hover {

  223.   border-left-color: #b3b3b3;

  224. }

  225. 

  226. :global .react-datepicker__navigation--next--disabled, :global .react-datepicker__navigation--next--disabled:hover {

  227.   border-left-color: #e6e6e6;

  228.   cursor: default;

  229. }

  230. 

  231. :global .react-datepicker__navigation--years {

  232.   position: relative;

  233.   top: 0;

  234.   display: block;

  235.   margin-left: auto;

  236.   margin-right: auto;

  237. }

  238. 

  239. :global .react-datepicker__navigation--years-previous {

  240.   top: 4px;

  241.   border-top-color: #ccc;

  242. }

  243. 

  244. :global .react-datepicker__navigation--years-previous:hover {

  245.   border-top-color: #b3b3b3;

  246. }

  247. 

  248. :global .react-datepicker__navigation--years-upcoming {

  249.   top: -4px;

  250.   border-bottom-color: #ccc;

  251. }

  252. 

  253. :global .react-datepicker__navigation--years-upcoming:hover {

  254.   border-bottom-color: #b3b3b3;

  255. }

  256. 

  257. :global .react-datepicker__month-container {

  258.   float: left;

  259. }

  260. 

  261. :global .react-datepicker__year-container {

  262.   margin: 0.4rem;

  263.   text-align: center;

  264.   display: flex;

  265.   flex-wrap: wrap;

  266. }

  267. 

  268. :global .react-datepicker__year-container-text {

  269.   display: inline-block;

  270.   cursor: pointer;

  271.   flex: 1 0 30%;

  272.   width: 12px;

  273.   padding: 2px;

  274. }

  275. 

  276. :global .react-datepicker__month {

  277.   margin: 0.4rem;

  278.   text-align: center;

  279. }

  280. 

  281. :global .react-datepicker__month .react-datepicker__month-text,

  282. :global .react-datepicker__month .react-datepicker__quarter-text {

  283.   display: inline-block;

  284.   width: 4rem;

  285.   margin: 2px;

  286. }

  287. 

  288. :global .react-datepicker__input-time-container {

  289.   clear: both;

  290.   width: 100%;

  291.   float: left;

  292.   margin: 5px 0 10px 15px;

  293.   text-align: left;

  294. }

  295. 

  296. :global .react-datepicker__input-time-container .react-datepicker-time__caption {

  297.   display: inline-block;

  298. }

  299. 

  300. :global .react-datepicker__input-time-container .react-datepicker-time__input-container {

  301.   display: inline-block;

  302. }

  303. 

  304. :global .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input {

  305.   display: inline-block;

  306.   margin-left: 10px;

  307. }

  308. 

  309. :global .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input {

  310.   width: 85px;

  311. }

  312. 

  313. :global .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type="time"]::-webkit-inner-spin-button,

  314. :global .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type="time"]::-webkit-outer-spin-button {

  315.   -webkit-appearance: none;

  316.   margin: 0;

  317. }

  318. 

  319. :global .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type="time"] {

  320.   -moz-appearance: textfield;

  321. }

  322. 

  323. :global .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter {

  324.   margin-left: 5px;

  325.   display: inline-block;

  326. }

  327. 

  328. :global .react-datepicker__time-container {

  329.   float: right;

  330.   border-left: 1px solid #aeaeae;

  331.   width: 85px;

  332. }

  333. 

  334. :global .react-datepicker__time-container--with-today-button {

  335.   display: inline;

  336.   border: 1px solid #aeaeae;

  337.   border-radius: 0.3rem;

  338.   position: absolute;

  339.   right: -72px;

  340.   top: 0;

  341. }

  342. 

  343. :global .react-datepicker__time-container .react-datepicker__time {

  344.   position: relative;

  345.   background: white;

  346. }

  347. 

  348. :global .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {

  349.   width: 85px;

  350.   overflow-x: hidden;

  351.   margin: 0 auto;

  352.   text-align: center;

  353. }

  354. 

  355. :global .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {

  356.   list-style: none;

  357.   margin: 0;

  358.   height: calc(195px + (1.7rem / 2));

  359.   overflow-y: scroll;

  360.   padding-right: 0px;

  361.   padding-left: 0px;

  362.   width: 100%;

  363.   box-sizing: content-box;

  364. }

  365. 

  366. :global .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {

  367.   height: 30px;

  368.   padding: 5px 10px;

  369.   white-space: nowrap;

  370. }

  371. 

  372. :global .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {

  373.   cursor: pointer;

  374.   background-color: #f0f0f0;

  375. }

  376. 

  377. :global .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {

  378.   background-color: #216ba5;

  379.   color: white;

  380.   font-weight: bold;

  381. }

  382. 

  383. :global .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover {

  384.   background-color: #216ba5;

  385. }

  386. 

  387. :global .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled {

  388.   color: #ccc;

  389. }

  390. 

  391. :global .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover {

  392.   cursor: default;

  393.   background-color: transparent;

  394. }

  395. 

  396. :global .react-datepicker__week-number {

  397.   color: #ccc;

  398.   display: inline-block;

  399.   width: 1.7rem;

  400.   line-height: 1.7rem;

  401.   text-align: center;

  402.   margin: 0.166rem;

  403. }

  404. 

  405. :global .react-datepicker__week-number.react-datepicker__week-number--clickable {

  406.   cursor: pointer;

  407. }

  408. 

  409. :global .react-datepicker__week-number.react-datepicker__week-number--clickable:hover {

  410.   border-radius: 0.3rem;

  411.   background-color: #f0f0f0;

  412. }

  413. 

  414. :global .react-datepicker__day-names,

  415. :global .react-datepicker__week {

  416.   white-space: nowrap;

  417. }

  418. 

  419. :global .react-datepicker__day-name,

  420. :global .react-datepicker__day,

  421. :global .react-datepicker__time-name {

  422.   color: #000;

  423.   display: inline-block;

  424.   width: 1.7rem;

  425.   line-height: 1.7rem;

  426.   text-align: center;

  427.   margin: 0.166rem;

  428. }

  429. 

  430. :global .react-datepicker__month--selected, :global .react-datepicker__month--in-selecting-range, :global .react-datepicker__month--in-range,

  431. :global .react-datepicker__quarter--selected,

  432. :global .react-datepicker__quarter--in-selecting-range,

  433. :global .react-datepicker__quarter--in-range {

  434.   border-radius: 0.3rem;

  435.   background-color: #216ba5;

  436.   color: #fff;

  437. }

  438. 

  439. :global .react-datepicker__month--selected:hover, :global .react-datepicker__month--in-selecting-range:hover, :global .react-datepicker__month--in-range:hover,

  440. :global .react-datepicker__quarter--selected:hover,

  441. :global .react-datepicker__quarter--in-selecting-range:hover,

  442. :global .react-datepicker__quarter--in-range:hover {

  443.   background-color: #1d5d90;

  444. }

  445. 

  446. :global .react-datepicker__month--disabled,

  447. :global .react-datepicker__quarter--disabled {

  448.   color: #ccc;

  449.   pointer-events: none;

  450. }

  451. 

  452. :global .react-datepicker__month--disabled:hover,

  453. :global .react-datepicker__quarter--disabled:hover {

  454.   cursor: default;

  455.   background-color: transparent;

  456. }

  457. 

  458. :global .react-datepicker__day,

  459. :global .react-datepicker__month-text,

  460. :global .react-datepicker__quarter-text {

  461.   cursor: pointer;

  462. }

  463. 

  464. :global .react-datepicker__day:hover,

  465. :global .react-datepicker__month-text:hover,

  466. :global .react-datepicker__quarter-text:hover {

  467.   border-radius: 0.3rem;

  468.   background-color: #f0f0f0;

  469. }

  470. 

  471. :global .react-datepicker__day--today,

  472. :global .react-datepicker__month-text--today,

  473. :global .react-datepicker__quarter-text--today {

  474.   font-weight: bold;

  475. }

  476. 

  477. :global .react-datepicker__day--highlighted,

  478. :global .react-datepicker__month-text--highlighted,

  479. :global .react-datepicker__quarter-text--highlighted {

  480.   border-radius: 0.3rem;

  481.   background-color: #3dcc4a;

  482.   color: #fff;

  483. }

  484. 

  485. :global .react-datepicker__day--highlighted:hover,

  486. :global .react-datepicker__month-text--highlighted:hover,

  487. :global .react-datepicker__quarter-text--highlighted:hover {

  488.   background-color: #32be3f;

  489. }

  490. 

  491. :global .react-datepicker__day--highlighted-custom-1,

  492. :global .react-datepicker__month-text--highlighted-custom-1,

  493. :global .react-datepicker__quarter-text--highlighted-custom-1 {

  494.   color: magenta;

  495. }

  496. 

  497. :global .react-datepicker__day--highlighted-custom-2,

  498. :global .react-datepicker__month-text--highlighted-custom-2,

  499. :global .react-datepicker__quarter-text--highlighted-custom-2 {

  500.   color: green;

  501. }

  502. 

  503. :global .react-datepicker__day--selected, :global .react-datepicker__day--in-selecting-range, :global .react-datepicker__day--in-range,

  504. :global .react-datepicker__month-text--selected,

  505. :global .react-datepicker__month-text--in-selecting-range,

  506. :global .react-datepicker__month-text--in-range,

  507. :global .react-datepicker__quarter-text--selected,

  508. :global .react-datepicker__quarter-text--in-selecting-range,

  509. :global .react-datepicker__quarter-text--in-range {

  510.   border-radius: 0.3rem;

  511.   background-color: #216ba5;

  512.   color: #fff;

  513. }

  514. 

  515. :global .react-datepicker__day--selected:hover, :global .react-datepicker__day--in-selecting-range:hover, :global .react-datepicker__day--in-range:hover,

  516. :global .react-datepicker__month-text--selected:hover,

  517. :global .react-datepicker__month-text--in-selecting-range:hover,

  518. :global .react-datepicker__month-text--in-range:hover,

  519. :global .react-datepicker__quarter-text--selected:hover,

  520. :global .react-datepicker__quarter-text--in-selecting-range:hover,

  521. :global .react-datepicker__quarter-text--in-range:hover {

  522.   background-color: #1d5d90;

  523. }

  524. 

  525. :global .react-datepicker__day--keyboard-selected,

  526. :global .react-datepicker__month-text--keyboard-selected,

  527. :global .react-datepicker__quarter-text--keyboard-selected {

  528.   border-radius: 0.3rem;

  529.   background-color: #2a87d0;

  530.   color: #fff;

  531. }

  532. 

  533. :global .react-datepicker__day--keyboard-selected:hover,

  534. :global .react-datepicker__month-text--keyboard-selected:hover,

  535. :global .react-datepicker__quarter-text--keyboard-selected:hover {

  536.   background-color: #1d5d90;

  537. }

  538. 

  539. :global .react-datepicker__day--in-selecting-range ,

  540. :global .react-datepicker__month-text--in-selecting-range ,

  541. :global .react-datepicker__quarter-text--in-selecting-range {

  542.   background-color: rgba(33, 107, 165, 0.5);

  543. }

  544. 

  545. .react-datepicker__month--selecting-range :global .react-datepicker__day--in-range , .react-datepicker__month--selecting-range

  546. :global .react-datepicker__month-text--in-range , .react-datepicker__month--selecting-range

  547. :global .react-datepicker__quarter-text--in-range {

  548.   background-color: #f0f0f0;

  549.   color: #000;

  550. }

  551. 

  552. :global .react-datepicker__day--disabled,

  553. :global .react-datepicker__month-text--disabled,

  554. :global .react-datepicker__quarter-text--disabled {

  555.   cursor: default;

  556.   color: #ccc;

  557. }

  558. 

  559. :global .react-datepicker__day--disabled:hover,

  560. :global .react-datepicker__month-text--disabled:hover,

  561. :global .react-datepicker__quarter-text--disabled:hover {

  562.   background-color: transparent;

  563. }

  564. 

  565. :global .react-datepicker__month-text.react-datepicker__month--selected:hover, :global .react-datepicker__month-text.react-datepicker__month--in-range:hover, :global .react-datepicker__month-text.react-datepicker__quarter--selected:hover, :global .react-datepicker__month-text.react-datepicker__quarter--in-range:hover,

  566. :global .react-datepicker__quarter-text.react-datepicker__month--selected:hover,

  567. :global .react-datepicker__quarter-text.react-datepicker__month--in-range:hover,

  568. :global .react-datepicker__quarter-text.react-datepicker__quarter--selected:hover,

  569. :global .react-datepicker__quarter-text.react-datepicker__quarter--in-range:hover {

  570.   background-color: #216ba5;

  571. }

  572. 

  573. :global .react-datepicker__month-text:hover,

  574. :global .react-datepicker__quarter-text:hover {

  575.   background-color: #f0f0f0;

  576. }

  577. 

  578. :global .react-datepicker__input-container {

  579.   position: relative;

  580.   display: inline-block;

  581.   width: 100%;

  582. }

  583. 

  584. :global .react-datepicker__year-read-view,

  585. :global .react-datepicker__month-read-view,

  586. :global .react-datepicker__month-year-read-view {

  587.   border: 1px solid transparent;

  588.   border-radius: 0.3rem;

  589. }

  590. 

  591. :global .react-datepicker__year-read-view:hover,

  592. :global .react-datepicker__month-read-view:hover,

  593. :global .react-datepicker__month-year-read-view:hover {

  594.   cursor: pointer;

  595. }

  596. 

  597. :global .react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,

  598. :global .react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,

  599. :global .react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,

  600. :global .react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,

  601. :global .react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,

  602. :global .react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow {

  603.   border-top-color: #b3b3b3;

  604. }

  605. 

  606. :global .react-datepicker__year-read-view--down-arrow,

  607. :global .react-datepicker__month-read-view--down-arrow,

  608. :global .react-datepicker__month-year-read-view--down-arrow {

  609.   border-top-color: #ccc;

  610.   float: right;

  611.   margin-left: 20px;

  612.   top: 8px;

  613.   position: relative;

  614.   border-width: 0.45rem;

  615. }

  616. 

  617. :global .react-datepicker__year-dropdown,

  618. :global .react-datepicker__month-dropdown,

  619. :global .react-datepicker__month-year-dropdown {

  620.   background-color: #f0f0f0;

  621.   position: absolute;

  622.   width: 50%;

  623.   left: 25%;

  624.   top: 30px;

  625.   z-index: 1;

  626.   text-align: center;

  627.   border-radius: 0.3rem;

  628.   border: 1px solid #aeaeae;

  629. }

  630. 

  631. :global .react-datepicker__year-dropdown:hover,

  632. :global .react-datepicker__month-dropdown:hover,

  633. :global .react-datepicker__month-year-dropdown:hover {

  634.   cursor: pointer;

  635. }

  636. 

  637. :global .react-datepicker__year-dropdown--scrollable,

  638. :global .react-datepicker__month-dropdown--scrollable,

  639. :global .react-datepicker__month-year-dropdown--scrollable {

  640.   height: 150px;

  641.   overflow-y: scroll;

  642. }

  643. 

  644. :global .react-datepicker__year-option,

  645. :global .react-datepicker__month-option,

  646. :global .react-datepicker__month-year-option {

  647.   line-height: 20px;

  648.   width: 100%;

  649.   display: block;

  650.   margin-left: auto;

  651.   margin-right: auto;

  652. }

  653. 

  654. :global .react-datepicker__year-option:first-of-type,

  655. :global .react-datepicker__month-option:first-of-type,

  656. :global .react-datepicker__month-year-option:first-of-type {

  657.   border-top-left-radius: 0.3rem;

  658.   border-top-right-radius: 0.3rem;

  659. }

  660. 

  661. :global .react-datepicker__year-option:last-of-type,

  662. :global .react-datepicker__month-option:last-of-type,

  663. :global .react-datepicker__month-year-option:last-of-type {

  664.   -webkit-user-select: none;

  665.   -moz-user-select: none;

  666.   -ms-user-select: none;

  667.   user-select: none;

  668.   border-bottom-left-radius: 0.3rem;

  669.   border-bottom-right-radius: 0.3rem;

  670. }

  671. 

  672. :global .react-datepicker__year-option:hover,

  673. :global .react-datepicker__month-option:hover,

  674. :global .react-datepicker__month-year-option:hover {

  675.   background-color: #ccc;

  676. }

  677. 

  678. :global .react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming,

  679. :global .react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,

  680. :global .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming {

  681.   border-bottom-color: #b3b3b3;

  682. }

  683. 

  684. :global .react-datepicker__year-option:hover .react-datepicker__navigation--years-previous,

  685. :global .react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,

  686. :global .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous {

  687.   border-top-color: #b3b3b3;

  688. }

  689. 

  690. :global .react-datepicker__year-option--selected,

  691. :global .react-datepicker__month-option--selected,

  692. :global .react-datepicker__month-year-option--selected {

  693.   position: absolute;

  694.   left: 15px;

  695. }

  696. 

  697. :global .react-datepicker__close-icon {

  698.   cursor: pointer;

  699.   background-color: transparent;

  700.   border: 0;

  701.   outline: 0;

  702.   padding: 0px 6px 0px 0px;

  703.   position: absolute;

  704.   top: 0;

  705.   right: 0;

  706.   height: 100%;

  707.   display: table-cell;

  708.   vertical-align: middle;

  709. }

  710. 

  711. :global .react-datepicker__close-icon::after {

  712.   cursor: pointer;

  713.   background-color: #216ba5;

  714.   color: #fff;

  715.   border-radius: 50%;

  716.   height: 16px;

  717.   width: 16px;

  718.   padding: 2px;

  719.   font-size: 12px;

  720.   line-height: 1;

  721.   text-align: center;

  722.   display: table-cell;

  723.   vertical-align: middle;

  724.   content: "\00d7";

  725. }

  726. 

  727. :global .react-datepicker__today-button {

  728.   background: #f0f0f0;

  729.   border-top: 1px solid #aeaeae;

  730.   cursor: pointer;

  731.   text-align: center;

  732.   font-weight: bold;

  733.   padding: 5px 0;

  734.   clear: left;

  735. }

  736. 

  737. :global .react-datepicker__portal {

  738.   position: fixed;

  739.   width: 100vw;

  740.   height: 100vh;

  741.   background-color: rgba(0, 0, 0, 0.8);

  742.   left: 0;

  743.   top: 0;

  744.   justify-content: center;

  745.   align-items: center;

  746.   display: flex;

  747.   z-index: 2147483647;

  748. }

  749. 

  750. :global .react-datepicker__portal .react-datepicker__day-name,

  751. :global .react-datepicker__portal .react-datepicker__day,

  752. :global .react-datepicker__portal .react-datepicker__time-name {

  753.   width: 3rem;

  754.   line-height: 3rem;

  755. }

  756. 

  757. @media (max-width: 400px), (max-height: 550px) {

  758.   :global .react-datepicker__portal .react-datepicker__day-name,

  759.   :global .react-datepicker__portal .react-datepicker__day,

  760.   :global .react-datepicker__portal .react-datepicker__time-name {

  761.     width: 2rem;

  762.     line-height: 2rem;

  763.   }

  764. }

  765. 

  766. :global .react-datepicker__portal .react-datepicker__current-month,

  767. :global .react-datepicker__portal .react-datepicker-time__header {

  768.   font-size: 1.44rem;

  769. }

  770. 

  771. :global .react-datepicker__portal .react-datepicker__navigation {

  772.   border: 0.81rem solid transparent;

  773. }

  774. 

  775. :global .react-datepicker__portal .react-datepicker__navigation--previous {

  776.   border-right-color: #ccc;

  777. }

  778. 

  779. :global .react-datepicker__portal .react-datepicker__navigation--previous:hover {

  780.   border-right-color: #b3b3b3;

  781. }

  782. 

  783. :global .react-datepicker__portal .react-datepicker__navigation--previous--disabled, :global .react-datepicker__portal .react-datepicker__navigation--previous--disabled:hover {

  784.   border-right-color: #e6e6e6;

  785.   cursor: default;

  786. }

  787. 

  788. :global .react-datepicker__portal .react-datepicker__navigation--next {

  789.   border-left-color: #ccc;

  790. }

  791. 

  792. :global .react-datepicker__portal .react-datepicker__navigation--next:hover {

  793.   border-left-color: #b3b3b3;

  794. }

  795. 

  796. :global .react-datepicker__portal .react-datepicker__navigation--next--disabled, :global .react-datepicker__portal .react-datepicker__navigation--next--disabled:hover {

  797.   border-left-color: #e6e6e6;

  798.   cursor: default;

  799. }