flatpickr.css 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791
  1. .flatpickr-calendar {
  2. background: transparent;
  3. opacity: 0;
  4. display: none;
  5. text-align: center;
  6. visibility: hidden;
  7. padding: 0;
  8. -webkit-animation: none;
  9. animation: none;
  10. direction: ltr;
  11. border: 0;
  12. font-size: 14px;
  13. line-height: 24px;
  14. border-radius: 5px;
  15. position: absolute;
  16. width: 307.875px;
  17. -webkit-box-sizing: border-box;
  18. box-sizing: border-box;
  19. -ms-touch-action: manipulation;
  20. touch-action: manipulation;
  21. background: #fff;
  22. -webkit-box-shadow: 1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6, 0 -1px 0 #e6e6e6, 0 3px 13px rgba(0,0,0,0.08);
  23. box-shadow: 1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6, 0 -1px 0 #e6e6e6, 0 3px 13px rgba(0,0,0,0.08);
  24. }
  25. .flatpickr-calendar.open,
  26. .flatpickr-calendar.inline {
  27. opacity: 1;
  28. max-height: 640px;
  29. visibility: visible;
  30. }
  31. .flatpickr-calendar.open {
  32. display: inline-block;
  33. z-index: 99999;
  34. }
  35. .flatpickr-calendar.animate.open {
  36. -webkit-animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
  37. animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
  38. }
  39. .flatpickr-calendar.inline {
  40. display: block;
  41. position: relative;
  42. top: 2px;
  43. }
  44. .flatpickr-calendar.static {
  45. position: absolute;
  46. top: calc(100% + 2px);
  47. }
  48. .flatpickr-calendar.static.open {
  49. z-index: 999;
  50. display: block;
  51. }
  52. .flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7) {
  53. -webkit-box-shadow: none !important;
  54. box-shadow: none !important;
  55. }
  56. .flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1) {
  57. -webkit-box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
  58. box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
  59. }
  60. .flatpickr-calendar .hasWeeks .dayContainer,
  61. .flatpickr-calendar .hasTime .dayContainer {
  62. border-bottom: 0;
  63. border-bottom-right-radius: 0;
  64. border-bottom-left-radius: 0;
  65. }
  66. .flatpickr-calendar .hasWeeks .dayContainer {
  67. border-left: 0;
  68. }
  69. .flatpickr-calendar.hasTime .flatpickr-time {
  70. height: 40px;
  71. border-top: 1px solid #e6e6e6;
  72. }
  73. .flatpickr-calendar.noCalendar.hasTime .flatpickr-time {
  74. height: auto;
  75. }
  76. .flatpickr-calendar:before,
  77. .flatpickr-calendar:after {
  78. position: absolute;
  79. display: block;
  80. pointer-events: none;
  81. border: solid transparent;
  82. content: '';
  83. height: 0;
  84. width: 0;
  85. left: 22px;
  86. }
  87. .flatpickr-calendar.rightMost:before,
  88. .flatpickr-calendar.arrowRight:before,
  89. .flatpickr-calendar.rightMost:after,
  90. .flatpickr-calendar.arrowRight:after {
  91. left: auto;
  92. right: 22px;
  93. }
  94. .flatpickr-calendar.arrowCenter:before,
  95. .flatpickr-calendar.arrowCenter:after {
  96. left: 50%;
  97. right: 50%;
  98. }
  99. .flatpickr-calendar:before {
  100. border-width: 5px;
  101. margin: 0 -5px;
  102. }
  103. .flatpickr-calendar:after {
  104. border-width: 4px;
  105. margin: 0 -4px;
  106. }
  107. .flatpickr-calendar.arrowTop:before,
  108. .flatpickr-calendar.arrowTop:after {
  109. bottom: 100%;
  110. }
  111. .flatpickr-calendar.arrowTop:before {
  112. border-bottom-color: #e6e6e6;
  113. }
  114. .flatpickr-calendar.arrowTop:after {
  115. border-bottom-color: #fff;
  116. }
  117. .flatpickr-calendar.arrowBottom:before,
  118. .flatpickr-calendar.arrowBottom:after {
  119. top: 100%;
  120. }
  121. .flatpickr-calendar.arrowBottom:before {
  122. border-top-color: #e6e6e6;
  123. }
  124. .flatpickr-calendar.arrowBottom:after {
  125. border-top-color: #fff;
  126. }
  127. .flatpickr-calendar:focus {
  128. outline: 0;
  129. }
  130. .flatpickr-wrapper {
  131. position: relative;
  132. display: inline-block;
  133. }
  134. .flatpickr-months {
  135. display: -webkit-box;
  136. display: -webkit-flex;
  137. display: -ms-flexbox;
  138. display: flex;
  139. }
  140. .flatpickr-months .flatpickr-month {
  141. background: transparent;
  142. color: rgba(0,0,0,0.9);
  143. fill: rgba(0,0,0,0.9);
  144. height: 34px;
  145. line-height: 1;
  146. text-align: center;
  147. position: relative;
  148. -webkit-user-select: none;
  149. -moz-user-select: none;
  150. -ms-user-select: none;
  151. user-select: none;
  152. overflow: hidden;
  153. -webkit-box-flex: 1;
  154. -webkit-flex: 1;
  155. -ms-flex: 1;
  156. flex: 1;
  157. }
  158. .flatpickr-months .flatpickr-prev-month,
  159. .flatpickr-months .flatpickr-next-month {
  160. text-decoration: none;
  161. cursor: pointer;
  162. position: absolute;
  163. top: 0;
  164. height: 34px;
  165. padding: 10px;
  166. z-index: 3;
  167. color: rgba(0,0,0,0.9);
  168. fill: rgba(0,0,0,0.9);
  169. }
  170. .flatpickr-months .flatpickr-prev-month.flatpickr-disabled,
  171. .flatpickr-months .flatpickr-next-month.flatpickr-disabled {
  172. display: none;
  173. }
  174. .flatpickr-months .flatpickr-prev-month i,
  175. .flatpickr-months .flatpickr-next-month i {
  176. position: relative;
  177. }
  178. .flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,
  179. .flatpickr-months .flatpickr-next-month.flatpickr-prev-month {
  180. /*
  181. /*rtl:begin:ignore*/
  182. /*
  183. */
  184. left: 0;
  185. /*
  186. /*rtl:end:ignore*/
  187. /*
  188. */
  189. }
  190. /*
  191. /*rtl:begin:ignore*/
  192. /*
  193. /*rtl:end:ignore*/
  194. .flatpickr-months .flatpickr-prev-month.flatpickr-next-month,
  195. .flatpickr-months .flatpickr-next-month.flatpickr-next-month {
  196. /*
  197. /*rtl:begin:ignore*/
  198. /*
  199. */
  200. right: 0;
  201. /*
  202. /*rtl:end:ignore*/
  203. /*
  204. */
  205. }
  206. /*
  207. /*rtl:begin:ignore*/
  208. /*
  209. /*rtl:end:ignore*/
  210. .flatpickr-months .flatpickr-prev-month:hover,
  211. .flatpickr-months .flatpickr-next-month:hover {
  212. color: #959ea9;
  213. }
  214. .flatpickr-months .flatpickr-prev-month:hover svg,
  215. .flatpickr-months .flatpickr-next-month:hover svg {
  216. fill: #f64747;
  217. }
  218. .flatpickr-months .flatpickr-prev-month svg,
  219. .flatpickr-months .flatpickr-next-month svg {
  220. width: 14px;
  221. height: 14px;
  222. }
  223. .flatpickr-months .flatpickr-prev-month svg path,
  224. .flatpickr-months .flatpickr-next-month svg path {
  225. -webkit-transition: fill 0.1s;
  226. transition: fill 0.1s;
  227. fill: inherit;
  228. }
  229. .numInputWrapper {
  230. position: relative;
  231. height: auto;
  232. }
  233. .numInputWrapper input,
  234. .numInputWrapper span {
  235. display: inline-block;
  236. }
  237. .numInputWrapper input {
  238. width: 100%;
  239. }
  240. .numInputWrapper input::-ms-clear {
  241. display: none;
  242. }
  243. .numInputWrapper input::-webkit-outer-spin-button,
  244. .numInputWrapper input::-webkit-inner-spin-button {
  245. margin: 0;
  246. -webkit-appearance: none;
  247. }
  248. .numInputWrapper span {
  249. position: absolute;
  250. right: 0;
  251. width: 14px;
  252. padding: 0 4px 0 2px;
  253. height: 50%;
  254. line-height: 50%;
  255. opacity: 0;
  256. cursor: pointer;
  257. border: 1px solid rgba(57,57,57,0.15);
  258. -webkit-box-sizing: border-box;
  259. box-sizing: border-box;
  260. }
  261. .numInputWrapper span:hover {
  262. background: rgba(0,0,0,0.1);
  263. }
  264. .numInputWrapper span:active {
  265. background: rgba(0,0,0,0.2);
  266. }
  267. .numInputWrapper span:after {
  268. display: block;
  269. content: "";
  270. position: absolute;
  271. }
  272. .numInputWrapper span.arrowUp {
  273. top: 0;
  274. border-bottom: 0;
  275. }
  276. .numInputWrapper span.arrowUp:after {
  277. border-left: 4px solid transparent;
  278. border-right: 4px solid transparent;
  279. border-bottom: 4px solid rgba(57,57,57,0.6);
  280. top: 26%;
  281. }
  282. .numInputWrapper span.arrowDown {
  283. top: 50%;
  284. }
  285. .numInputWrapper span.arrowDown:after {
  286. border-left: 4px solid transparent;
  287. border-right: 4px solid transparent;
  288. border-top: 4px solid rgba(57,57,57,0.6);
  289. top: 40%;
  290. }
  291. .numInputWrapper span svg {
  292. width: inherit;
  293. height: auto;
  294. }
  295. .numInputWrapper span svg path {
  296. fill: rgba(0,0,0,0.5);
  297. }
  298. .numInputWrapper:hover {
  299. background: rgba(0,0,0,0.05);
  300. }
  301. .numInputWrapper:hover span {
  302. opacity: 1;
  303. }
  304. .flatpickr-current-month {
  305. font-size: 135%;
  306. line-height: inherit;
  307. font-weight: 300;
  308. color: inherit;
  309. position: absolute;
  310. width: 75%;
  311. left: 12.5%;
  312. padding: 7.48px 0 0 0;
  313. line-height: 1;
  314. height: 34px;
  315. display: inline-block;
  316. text-align: center;
  317. -webkit-transform: translate3d(0px, 0px, 0px);
  318. transform: translate3d(0px, 0px, 0px);
  319. }
  320. .flatpickr-current-month span.cur-month {
  321. font-family: inherit;
  322. font-weight: 700;
  323. color: inherit;
  324. display: inline-block;
  325. margin-left: 0.5ch;
  326. padding: 0;
  327. }
  328. .flatpickr-current-month span.cur-month:hover {
  329. background: rgba(0,0,0,0.05);
  330. }
  331. .flatpickr-current-month .numInputWrapper {
  332. width: 6ch;
  333. width: 7ch\0;
  334. display: inline-block;
  335. }
  336. .flatpickr-current-month .numInputWrapper span.arrowUp:after {
  337. border-bottom-color: rgba(0,0,0,0.9);
  338. }
  339. .flatpickr-current-month .numInputWrapper span.arrowDown:after {
  340. border-top-color: rgba(0,0,0,0.9);
  341. }
  342. .flatpickr-current-month input.cur-year {
  343. background: transparent;
  344. -webkit-box-sizing: border-box;
  345. box-sizing: border-box;
  346. color: inherit;
  347. cursor: text;
  348. padding: 0 0 0 0.5ch;
  349. margin: 0;
  350. display: inline-block;
  351. font-size: inherit;
  352. font-family: inherit;
  353. font-weight: 300;
  354. line-height: inherit;
  355. height: auto;
  356. border: 0;
  357. border-radius: 0;
  358. vertical-align: initial;
  359. -webkit-appearance: textfield;
  360. -moz-appearance: textfield;
  361. appearance: textfield;
  362. }
  363. .flatpickr-current-month input.cur-year:focus {
  364. outline: 0;
  365. }
  366. .flatpickr-current-month input.cur-year[disabled],
  367. .flatpickr-current-month input.cur-year[disabled]:hover {
  368. font-size: 100%;
  369. color: rgba(0,0,0,0.5);
  370. background: transparent;
  371. pointer-events: none;
  372. }
  373. .flatpickr-current-month .flatpickr-monthDropdown-months {
  374. appearance: menulist;
  375. background: transparent;
  376. border: none;
  377. border-radius: 0;
  378. box-sizing: border-box;
  379. color: inherit;
  380. cursor: pointer;
  381. font-size: inherit;
  382. font-family: inherit;
  383. font-weight: 300;
  384. height: auto;
  385. line-height: inherit;
  386. margin: -1px 0 0 0;
  387. outline: none;
  388. padding: 0 0 0 0.5ch;
  389. position: relative;
  390. vertical-align: initial;
  391. -webkit-box-sizing: border-box;
  392. -webkit-appearance: menulist;
  393. -moz-appearance: menulist;
  394. width: auto;
  395. }
  396. .flatpickr-current-month .flatpickr-monthDropdown-months:focus,
  397. .flatpickr-current-month .flatpickr-monthDropdown-months:active {
  398. outline: none;
  399. }
  400. .flatpickr-current-month .flatpickr-monthDropdown-months:hover {
  401. background: rgba(0,0,0,0.05);
  402. }
  403. .flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
  404. background-color: transparent;
  405. outline: none;
  406. padding: 0;
  407. }
  408. .flatpickr-weekdays {
  409. background: transparent;
  410. text-align: center;
  411. overflow: hidden;
  412. width: 100%;
  413. display: -webkit-box;
  414. display: -webkit-flex;
  415. display: -ms-flexbox;
  416. display: flex;
  417. -webkit-box-align: center;
  418. -webkit-align-items: center;
  419. -ms-flex-align: center;
  420. align-items: center;
  421. height: 28px;
  422. }
  423. .flatpickr-weekdays .flatpickr-weekdaycontainer {
  424. display: -webkit-box;
  425. display: -webkit-flex;
  426. display: -ms-flexbox;
  427. display: flex;
  428. -webkit-box-flex: 1;
  429. -webkit-flex: 1;
  430. -ms-flex: 1;
  431. flex: 1;
  432. }
  433. span.flatpickr-weekday {
  434. cursor: default;
  435. font-size: 90%;
  436. background: transparent;
  437. color: rgba(0,0,0,0.54);
  438. line-height: 1;
  439. margin: 0;
  440. text-align: center;
  441. display: block;
  442. -webkit-box-flex: 1;
  443. -webkit-flex: 1;
  444. -ms-flex: 1;
  445. flex: 1;
  446. font-weight: bolder;
  447. }
  448. .dayContainer,
  449. .flatpickr-weeks {
  450. padding: 1px 0 0 0;
  451. }
  452. .flatpickr-days {
  453. position: relative;
  454. overflow: hidden;
  455. display: -webkit-box;
  456. display: -webkit-flex;
  457. display: -ms-flexbox;
  458. display: flex;
  459. -webkit-box-align: start;
  460. -webkit-align-items: flex-start;
  461. -ms-flex-align: start;
  462. align-items: flex-start;
  463. width: 307.875px;
  464. }
  465. .flatpickr-days:focus {
  466. outline: 0;
  467. }
  468. .dayContainer {
  469. padding: 0;
  470. outline: 0;
  471. text-align: left;
  472. width: 307.875px;
  473. min-width: 307.875px;
  474. max-width: 307.875px;
  475. -webkit-box-sizing: border-box;
  476. box-sizing: border-box;
  477. display: inline-block;
  478. display: -ms-flexbox;
  479. display: -webkit-box;
  480. display: -webkit-flex;
  481. display: flex;
  482. -webkit-flex-wrap: wrap;
  483. flex-wrap: wrap;
  484. -ms-flex-wrap: wrap;
  485. -ms-flex-pack: justify;
  486. -webkit-justify-content: space-around;
  487. justify-content: space-around;
  488. -webkit-transform: translate3d(0px, 0px, 0px);
  489. transform: translate3d(0px, 0px, 0px);
  490. opacity: 1;
  491. }
  492. .dayContainer + .dayContainer {
  493. -webkit-box-shadow: -1px 0 0 #e6e6e6;
  494. box-shadow: -1px 0 0 #e6e6e6;
  495. }
  496. .flatpickr-day {
  497. background: none;
  498. border: 1px solid transparent;
  499. border-radius: 150px;
  500. -webkit-box-sizing: border-box;
  501. box-sizing: border-box;
  502. color: #393939;
  503. cursor: pointer;
  504. font-weight: 400;
  505. width: 14.2857143%;
  506. -webkit-flex-basis: 14.2857143%;
  507. -ms-flex-preferred-size: 14.2857143%;
  508. flex-basis: 14.2857143%;
  509. max-width: 39px;
  510. height: 39px;
  511. line-height: 39px;
  512. margin: 0;
  513. display: inline-block;
  514. position: relative;
  515. -webkit-box-pack: center;
  516. -webkit-justify-content: center;
  517. -ms-flex-pack: center;
  518. justify-content: center;
  519. text-align: center;
  520. }
  521. .flatpickr-day.inRange,
  522. .flatpickr-day.prevMonthDay.inRange,
  523. .flatpickr-day.nextMonthDay.inRange,
  524. .flatpickr-day.today.inRange,
  525. .flatpickr-day.prevMonthDay.today.inRange,
  526. .flatpickr-day.nextMonthDay.today.inRange,
  527. .flatpickr-day:hover,
  528. .flatpickr-day.prevMonthDay:hover,
  529. .flatpickr-day.nextMonthDay:hover,
  530. .flatpickr-day:focus,
  531. .flatpickr-day.prevMonthDay:focus,
  532. .flatpickr-day.nextMonthDay:focus {
  533. cursor: pointer;
  534. outline: 0;
  535. background: #e6e6e6;
  536. border-color: #e6e6e6;
  537. }
  538. .flatpickr-day.today {
  539. border-color: #959ea9;
  540. }
  541. .flatpickr-day.today:hover,
  542. .flatpickr-day.today:focus {
  543. border-color: #959ea9;
  544. background: #959ea9;
  545. color: #fff;
  546. }
  547. .flatpickr-day.selected,
  548. .flatpickr-day.startRange,
  549. .flatpickr-day.endRange,
  550. .flatpickr-day.selected.inRange,
  551. .flatpickr-day.startRange.inRange,
  552. .flatpickr-day.endRange.inRange,
  553. .flatpickr-day.selected:focus,
  554. .flatpickr-day.startRange:focus,
  555. .flatpickr-day.endRange:focus,
  556. .flatpickr-day.selected:hover,
  557. .flatpickr-day.startRange:hover,
  558. .flatpickr-day.endRange:hover,
  559. .flatpickr-day.selected.prevMonthDay,
  560. .flatpickr-day.startRange.prevMonthDay,
  561. .flatpickr-day.endRange.prevMonthDay,
  562. .flatpickr-day.selected.nextMonthDay,
  563. .flatpickr-day.startRange.nextMonthDay,
  564. .flatpickr-day.endRange.nextMonthDay {
  565. background: #569ff7;
  566. -webkit-box-shadow: none;
  567. box-shadow: none;
  568. color: #fff;
  569. border-color: #569ff7;
  570. }
  571. .flatpickr-day.selected.startRange,
  572. .flatpickr-day.startRange.startRange,
  573. .flatpickr-day.endRange.startRange {
  574. border-radius: 50px 0 0 50px;
  575. }
  576. .flatpickr-day.selected.endRange,
  577. .flatpickr-day.startRange.endRange,
  578. .flatpickr-day.endRange.endRange {
  579. border-radius: 0 50px 50px 0;
  580. }
  581. .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
  582. .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
  583. .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
  584. -webkit-box-shadow: -10px 0 0 #569ff7;
  585. box-shadow: -10px 0 0 #569ff7;
  586. }
  587. .flatpickr-day.selected.startRange.endRange,
  588. .flatpickr-day.startRange.startRange.endRange,
  589. .flatpickr-day.endRange.startRange.endRange {
  590. border-radius: 50px;
  591. }
  592. .flatpickr-day.inRange {
  593. border-radius: 0;
  594. -webkit-box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
  595. box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
  596. }
  597. .flatpickr-day.flatpickr-disabled,
  598. .flatpickr-day.flatpickr-disabled:hover,
  599. .flatpickr-day.prevMonthDay,
  600. .flatpickr-day.nextMonthDay,
  601. .flatpickr-day.notAllowed,
  602. .flatpickr-day.notAllowed.prevMonthDay,
  603. .flatpickr-day.notAllowed.nextMonthDay {
  604. color: rgba(57,57,57,0.3);
  605. background: transparent;
  606. border-color: transparent;
  607. cursor: default;
  608. }
  609. .flatpickr-day.flatpickr-disabled,
  610. .flatpickr-day.flatpickr-disabled:hover {
  611. cursor: not-allowed;
  612. color: rgba(57,57,57,0.1);
  613. }
  614. .flatpickr-day.week.selected {
  615. border-radius: 0;
  616. -webkit-box-shadow: -5px 0 0 #569ff7, 5px 0 0 #569ff7;
  617. box-shadow: -5px 0 0 #569ff7, 5px 0 0 #569ff7;
  618. }
  619. .flatpickr-day.hidden {
  620. visibility: hidden;
  621. }
  622. .rangeMode .flatpickr-day {
  623. margin-top: 1px;
  624. }
  625. .flatpickr-weekwrapper {
  626. float: left;
  627. }
  628. .flatpickr-weekwrapper .flatpickr-weeks {
  629. padding: 0 12px;
  630. -webkit-box-shadow: 1px 0 0 #e6e6e6;
  631. box-shadow: 1px 0 0 #e6e6e6;
  632. }
  633. .flatpickr-weekwrapper .flatpickr-weekday {
  634. float: none;
  635. width: 100%;
  636. line-height: 28px;
  637. }
  638. .flatpickr-weekwrapper span.flatpickr-day,
  639. .flatpickr-weekwrapper span.flatpickr-day:hover {
  640. display: block;
  641. width: 100%;
  642. max-width: none;
  643. color: rgba(57,57,57,0.3);
  644. background: transparent;
  645. cursor: default;
  646. border: none;
  647. }
  648. .flatpickr-innerContainer {
  649. display: block;
  650. display: -webkit-box;
  651. display: -webkit-flex;
  652. display: -ms-flexbox;
  653. display: flex;
  654. -webkit-box-sizing: border-box;
  655. box-sizing: border-box;
  656. overflow: hidden;
  657. }
  658. .flatpickr-rContainer {
  659. display: inline-block;
  660. padding: 0;
  661. -webkit-box-sizing: border-box;
  662. box-sizing: border-box;
  663. }
  664. .flatpickr-time {
  665. text-align: center;
  666. outline: 0;
  667. display: block;
  668. height: 0;
  669. line-height: 40px;
  670. max-height: 40px;
  671. -webkit-box-sizing: border-box;
  672. box-sizing: border-box;
  673. overflow: hidden;
  674. display: -webkit-box;
  675. display: -webkit-flex;
  676. display: -ms-flexbox;
  677. display: flex;
  678. }
  679. .flatpickr-time:after {
  680. content: "";
  681. display: table;
  682. clear: both;
  683. }
  684. .flatpickr-time .numInputWrapper {
  685. -webkit-box-flex: 1;
  686. -webkit-flex: 1;
  687. -ms-flex: 1;
  688. flex: 1;
  689. width: 40%;
  690. height: 40px;
  691. float: left;
  692. }
  693. .flatpickr-time .numInputWrapper span.arrowUp:after {
  694. border-bottom-color: #393939;
  695. }
  696. .flatpickr-time .numInputWrapper span.arrowDown:after {
  697. border-top-color: #393939;
  698. }
  699. .flatpickr-time.hasSeconds .numInputWrapper {
  700. width: 26%;
  701. }
  702. .flatpickr-time.time24hr .numInputWrapper {
  703. width: 49%;
  704. }
  705. .flatpickr-time input {
  706. background: transparent;
  707. -webkit-box-shadow: none;
  708. box-shadow: none;
  709. border: 0;
  710. border-radius: 0;
  711. text-align: center;
  712. margin: 0;
  713. padding: 0;
  714. height: inherit;
  715. line-height: inherit;
  716. color: #393939;
  717. font-size: 14px;
  718. position: relative;
  719. -webkit-box-sizing: border-box;
  720. box-sizing: border-box;
  721. -webkit-appearance: textfield;
  722. -moz-appearance: textfield;
  723. appearance: textfield;
  724. }
  725. .flatpickr-time input.flatpickr-hour {
  726. font-weight: bold;
  727. }
  728. .flatpickr-time input.flatpickr-minute,
  729. .flatpickr-time input.flatpickr-second {
  730. font-weight: 400;
  731. }
  732. .flatpickr-time input:focus {
  733. outline: 0;
  734. border: 0;
  735. }
  736. .flatpickr-time .flatpickr-time-separator,
  737. .flatpickr-time .flatpickr-am-pm {
  738. height: inherit;
  739. float: left;
  740. line-height: inherit;
  741. color: #393939;
  742. font-weight: bold;
  743. width: 2%;
  744. -webkit-user-select: none;
  745. -moz-user-select: none;
  746. -ms-user-select: none;
  747. user-select: none;
  748. -webkit-align-self: center;
  749. -ms-flex-item-align: center;
  750. align-self: center;
  751. }
  752. .flatpickr-time .flatpickr-am-pm {
  753. outline: 0;
  754. width: 18%;
  755. cursor: pointer;
  756. text-align: center;
  757. font-weight: 400;
  758. }
  759. .flatpickr-time input:hover,
  760. .flatpickr-time .flatpickr-am-pm:hover,
  761. .flatpickr-time input:focus,
  762. .flatpickr-time .flatpickr-am-pm:focus {
  763. background: #eee;
  764. }
  765. .flatpickr-input[readonly] {
  766. cursor: pointer;
  767. }
  768. @-webkit-keyframes fpFadeInDown {
  769. from {
  770. opacity: 0;
  771. -webkit-transform: translate3d(0, -20px, 0);
  772. transform: translate3d(0, -20px, 0);
  773. }
  774. to {
  775. opacity: 1;
  776. -webkit-transform: translate3d(0, 0, 0);
  777. transform: translate3d(0, 0, 0);
  778. }
  779. }
  780. @keyframes fpFadeInDown {
  781. from {
  782. opacity: 0;
  783. -webkit-transform: translate3d(0, -20px, 0);
  784. transform: translate3d(0, -20px, 0);
  785. }
  786. to {
  787. opacity: 1;
  788. -webkit-transform: translate3d(0, 0, 0);
  789. transform: translate3d(0, 0, 0);
  790. }
  791. }