.flatpickr-input { cursor: pointer; z-index: 1; } .flatpickr-wrapper { position: absolute; display: block; } .flatpickr-wrapper.inline, .flatpickr-wrapper.static { display: block; position: relative; } .flatpickr-wrapper.inline .flatpickr-calendar { position: relative; } .flatpickr-wrapper.static .flatpickr-calendar { position: absolute; } .flatpickr-wrapper input { cursor: pointer; z-index: 1; } .flatpickr-wrapper.open .flatpickr-calendar, .flatpickr-wrapper.inline .flatpickr-calendar { z-index: 99999; display: block; } .flatpickr-calendar { background: #fff; font-size: 90%; border-radius: 3px; position: absolute; top: 100%; left: 0; margin-top: 3px; display: none; width: 256px; } .flatpickr-calendar.hasWeeks { width: 288px; } .flatpickr-calendar.hasWeeks .flatpickr-weekdays span { width: 12.5%; } .flatpickr-calendar:before, .flatpickr-calendar:after { position: absolute; display: block; pointer-events: none; border: solid transparent; content: ''; height: 0; width: 0; bottom: 100%; left: 22px; } .flatpickr-calendar:before { border-width: 5px; margin: 0 -5px; border-bottom-color: rgba(72,72,72,0.1); } .flatpickr-calendar:after { border-width: 4px; margin: 0 -4px; border-bottom-color: #ffb866; } .flatpickr-month { border-radius: 3px 3px 0 0; background: #ffb866; color: #fff; padding: 4px 5px 2px 5px; text-align: center; position: relative; } .flatpickr-prev-month, .flatpickr-next-month { text-decoration: none; cursor: pointer; position: absolute; top: 0.5rem; } .flatpickr-prev-month i, .flatpickr-next-month i { position: relative; } .flatpickr-prev-month:hover, .flatpickr-next-month:hover { color: #bbb; } .flatpickr-prev-month { float: left; left: 0.5rem; } .flatpickr-next-month { float: right; right: 0.5rem; } .flatpickr-current-month { font-size: 135%; font-weight: 300; color: rgba(255,255,255,0.7); display: inline-block; } .flatpickr-current-month .cur_month { font-weight: 700; color: #fff; } .flatpickr-current-month .cur_year { background: transparent; box-sizing: content-box; color: inherit; cursor: default; padding: 0 0 0 2px; margin: 0; width: 3.1em; display: inline; font-size: inherit; line-height: inherit; height: initial; border: 0; } .flatpickr-current-month .cur_year:hover { background: rgba(0,0,0,0.05); } .flatpickr-weekdays { font-size: 90%; background: #ffb866; padding: 2px 0 4px 0; text-align: center; } .flatpickr-weekdays span { opacity: 0.54; text-align: center; display: inline-block; width: 14.28%; font-weight: bold; } .flatpickr-weeks { width: 32px; float: left; } .flatpickr-days { padding-top: 1px; border: 1px solid rgba(72,72,72,0.1); border-top: 0; border-radius: 0 0 3px 3px; } .flatpickr-day { background: none; border: 1px solid transparent; border-radius: 150px; box-sizing: border-box; color: #484848; cursor: pointer; display: inline-block; width: 34px; height: 34px; line-height: 33px; margin: 0 1px 1px 1px; text-align: center; } .flatpickr-day:hover { background: #e2e2e2; border-color: #e2e2e2; } .flatpickr-day.today { border-color: #bbb; } .flatpickr-day.today:hover { border-color: #bbb; background: #bbb; color: #fff; } .flatpickr-day.selected, .flatpickr-day.selected:hover { background: #ffb866; color: #fff; border-color: #ffb866; } .flatpickr-day.disabled, .flatpickr-day.disabled:hover { color: rgba(72,72,72,0.3); background: transparent; border-color: transparent; cursor: default; } .flatpickr-time { overflow: auto; text-align: center; border: 1px solid rgba(72,72,72,0.1); border-top: 0; } .flatpickr-time input[type='number'] { background: transparent; -webkit-appearance: none; -moz-appearance: textfield; box-shadow: none; border: 0; border-radius: 0; display: inline-block; width: 33%; min-width: 33%; text-align: center; margin: 0; padding: 0; height: 38px; line-height: 38px; cursor: pointer; font-weight: bold; color: #484848; } .flatpickr-time input[type='number'].flatpickr-minute { width: 26%; font-weight: 300; } .flatpickr-time input[type='number'].flatpickr-second { font-weight: 300; } .flatpickr-time input[type='number']:focus { outline: 0; border: 0; } .flatpickr-time input[type='number']:hover { background: #ececec; } .flatpickr-time.has-seconds input[type='number'] { width: 25%; min-width: 25%; } .flatpickr-time-separator, .flatpickr-am-pm { height: 38px; display: inline-block; line-height: 38px; color: #484848; } .flatpickr-am-pm { width: 21%; padding: 0 2%; cursor: pointer; text-align: left; } .flatpickr-am-pm:hover { background: #ececec; }