.frm-datepicker.open,
.frm-datepicker.inline {
	opacity: 1;
	max-height: 640px;
	visibility: visible;
	max-width: 40em;
}
.frm-datepicker.open {
	display: inline-block;
	z-index: 99999;
}
.frm-datepicker.animate.open {
	-webkit-animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
			animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
.frm-datepicker.inline {
	display: block;
	position: relative;
	top: 2px;
}
.frm-datepicker.static {
	position: absolute;
	top: calc(100% + 2px);
}
.frm-datepicker.static.open {
	z-index: 999;
	display: block;
}

.frm-datepicker.flatpickr-calendar .flatpickr-month {
	width: calc( 100% - 68px );
	margin-left: 34px;
	flex: unset;
}
.frm-datepicker .frm-date-no-month-select .flatpickr-month {
	width: 100%;
	margin-left: 0;
}
.frm-datepicker.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7) {
	-webkit-box-shadow: none !important;
			box-shadow: none !important;
}
.frm-datepicker.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1) {
	-webkit-box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
			box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
}
.frm-datepicker .hasWeeks .dayContainer,
.frm-datepicker .hasTime .dayContainer {
	border-bottom: 0;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
}
.frm-datepicker .hasWeeks .dayContainer {
	border-left: 0;
}
.frm-datepicker.hasTime .flatpickr-time {
	height: 40px;
	border-top: 1px solid #e6e6e6;
}
.frm-datepicker.noCalendar.hasTime .flatpickr-time {
	height: auto;
}
.frm-datepicker:before,
.frm-datepicker:after {
	position: absolute;
	display: block;
	pointer-events: none;
	border: solid transparent;
	content: '';
	height: 0;
	width: 0;
	left: 22px;
}
.frm-datepicker.rightMost:before,
.frm-datepicker.arrowRight:before,
.frm-datepicker.rightMost:after,
.frm-datepicker.arrowRight:after {
	left: auto;
	right: 22px;
}
.frm-datepicker.arrowCenter:before,
.frm-datepicker.arrowCenter:after {
	left: 50%;
	right: 50%;
}
.frm-datepicker:before {
	border-width: 5px;
	margin: 0 -5px;
}
.frm-datepicker:after {
	border-width: 4px;
	margin: 0 -4px;
}
.frm-datepicker.arrowTop:before,
.frm-datepicker.arrowTop:after {
	bottom: 100%;
}
.frm-datepicker.arrowTop:before {
	border-bottom-color: #e6e6e6;
}
.frm-datepicker.arrowTop:after {
	border-bottom-color: #fff;
}
.frm-datepicker.arrowBottom:before,
.frm-datepicker.arrowBottom:after {
	top: 100%;
}
.frm-datepicker.arrowBottom:before {
	border-top-color: #e6e6e6;
}
.frm-datepicker.arrowBottom:after {
	border-top-color: #fff;
}
.frm-datepicker:focus {
	outline: 0;
}
.frm-datepicker .flatpickr-wrapper {
	position: relative;
	display: inline-block;
}
.frm-datepicker .flatpickr-months {
	position: relative;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	width: 260px;
	margin: 6px 0 12px;
}
.frm-datepicker.inline .flatpickr-months,
.frm-datepicker.inline .flatpickr-innerContainer,
.frm-datepicker.inline .flatpickr-rContainer,
.frm-datepicker.inline .flatpickr-days,
.frm-datepicker.inline .dayContainer {
	width: 100%;
}
.frm-datepicker.inline.rangeMode .flatpickr-current-month {
	justify-content: center;
}
.frm-datepicker.inline.rangeMode .numInputWrapper {
	border: none;
	background: none;
}
.frm-datepicker.inline.rangeMode .numInputWrapper .arrowUp, .frm-datepicker.inline.rangeMode .numInputWrapper .arrowDown {
	display: none;
}
.frm-datepicker.inline.rangeMode .numInputWrapper input[type="number"] {
	border: none;
	background: none;
	font-weight: 600;
	pointer-events: none;
}
.frm-datepicker.inline.rangeMode .flatpickr-days {
	width: 100%!important;
}
.frm-datepicker.inline.rangeMode .flatpickr-current-month {
	height: 34px !important;
}
.frm-datepicker .flatpickr-months .flatpickr-prev-month,
.frm-datepicker .flatpickr-months .flatpickr-next-month {
	cursor: pointer;
	position: absolute;
	top: 0;
	height: 34px;
	width: 34px;
	z-index: 3;
	padding: 0px;
}
.frm-datepicker .flatpickr-months .flatpickr-prev-month.flatpickr-disabled,
.frm-datepicker .flatpickr-months .flatpickr-next-month.flatpickr-disabled {
	display: none;
}
.frm-datepicker .flatpickr-months .flatpickr-prev-month i,
.frm-datepicker .flatpickr-months .flatpickr-next-month i {
	position: relative;
}


.frm-datepicker .flatpickr-months .flatpickr-prev-month.flatpickr-next-month,
.frm-datepicker .flatpickr-months .flatpickr-next-month.flatpickr-next-month {
	right: 0;
}
.frm-datepicker .flatpickr-months .flatpickr-prev-month:hover,
.frm-datepicker .flatpickr-months .flatpickr-next-month:hover {
	color: #959ea9;
}

.frm-datepicker .numInputWrapper {
	position: relative;
	height: auto;
	padding: 0px;
}
.frm-datepicker:not(.frm-datepicker-custom-theme) .numInputWrapper {
	border-color: var(--border-color);
	border-width: var(--field-border-width);
	border-style: var(--field-border-style);
	border-radius: var(--border-radius);
}
.frm-datepicker .numInputWrapper input,
.frm-datepicker .numInputWrapper span {
	display: inline-block;
	height: 100%;
	line-height: 100%;
}
.frm-datepicker .numInputWrapper input {
	width: 100%;
	min-height: unset;
	padding: 0px;
}
.frm-datepicker .numInputWrapper input::-ms-clear {
	display: none;
}
.frm-datepicker .numInputWrapper input::-webkit-outer-spin-button,
.frm-datepicker .numInputWrapper input::-webkit-inner-spin-button {
	margin: 0;
	-webkit-appearance: none;
}
.frm-datepicker .numInputWrapper span {
	position: absolute;
	right: 0;
	width: 14px;
	padding: 0 4px 0 2px;
	height: 50%;
	line-height: 50%;
	opacity: 0;
	cursor: pointer;
	border: 1px solid rgba(57,57,57,0.15);
	-webkit-box-sizing: border-box;
			box-sizing: border-box;
}
.frm-datepicker .numInputWrapper span:hover {
	background: rgba(0,0,0,0.1);
}
.frm-datepicker .numInputWrapper span:active {
	background: rgba(0,0,0,0.2);
}
.frm-datepicker .numInputWrapper span:after {
	display: block;
	content: "";
	position: absolute;
}
.frm-datepicker .numInputWrapper span.arrowUp {
	top: 0;
	border-bottom: 0;
}
.frm-datepicker .numInputWrapper span.arrowUp:after {
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-bottom: 4px solid rgba(57,57,57,0.6);
	top: 26%;
}
.frm-datepicker .numInputWrapper span.arrowDown {
	top: 50%;
}
.frm-datepicker .numInputWrapper span.arrowDown:after {
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 4px solid rgba(57,57,57,0.6);
	top: 40%;
}
.frm-datepicker .numInputWrapper span svg {
	width: inherit;
	height: auto;
}
.frm-datepicker .numInputWrapper span svg path {
	fill: rgba(0,0,0,0.5);
}
.frm-datepicker .numInputWrapper:hover {
	background: rgba(0,0,0,0.05);
}
.frm-datepicker .numInputWrapper:hover span {
	opacity: 1;
}
.frm-datepicker .flatpickr-current-month {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 14px;
	width: 100%;
	left: 0;
	padding: 0px;
}
.frm-datepicker .flatpickr-current-month span.cur-month {
	font-family: inherit;
	font-weight: 700;
	color: inherit;
	display: inline-block;
	margin-left: 0.5ch;
	padding: 0;
}
.frm-datepicker .frm-date-no-month-select .flatpickr-current-month span.cur-month {
	display: none;
}
.frm-datepicker .flatpickr-current-month span.cur-month:hover {
	background: rgba(0,0,0,0.05);
}
.frm-datepicker .flatpickr-current-month .numInputWrapper {
	display: inline-block;
}
.frm-datepicker .flatpickr-current-month .numInputWrapper span.arrowUp:after {
	border-bottom-color: rgba(0,0,0,0.9);
}
.frm-datepicker .flatpickr-current-month .numInputWrapper span.arrowDown:after {
	border-top-color: rgba(0,0,0,0.9);
}

.frm-datepicker .flatpickr-current-month input.cur-year {
	background: transparent;
	-webkit-box-sizing: border-box;
			box-sizing: border-box;
	color: inherit;
	cursor: text;
	padding: 0 0 0 0.5ch;
	margin: 0;
	display: inline-block;
	font-size: inherit;
	font-family: inherit;
	font-weight: 300;
	line-height: 14px;
	height: auto;
	border: 0;
	border-radius: 0;
	vertical-align: initial;
	-webkit-appearance: textfield;
	-moz-appearance: textfield;
	appearance: textfield;
	min-height: unset;
}
.frm-datepicker.frm-date-no-year-select .flatpickr-current-month .numInputWrapper {
	display: none;
}
.frm-datepicker .flatpickr-current-month input.cur-year:focus {
	outline: 0;
}
.frm-datepicker .flatpickr-current-month input.cur-year[disabled],
.frm-datepicker .flatpickr-current-month input.cur-year[disabled]:hover {
	font-size: 100%;
	color: rgba(0,0,0,0.5);
	background: transparent;
	pointer-events: none;
}
.frm-datepicker .flatpickr-weekdays {
	background: transparent;
	text-align: center;
	overflow: hidden;
	width: 100%;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
		-ms-flex-align: center;
			align-items: center;
	height: 38px;
}
.frm-datepicker .flatpickr-weekdays .flatpickr-weekdaycontainer {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-flex: 1;
	-webkit-flex: 1;
	-ms-flex: 1;
	flex: 1;
}
.frm-datepicker span.flatpickr-weekday {
	cursor: default;
	background: transparent;
	line-height: 1;
	margin: 0;
	text-align: center;
	display: block;
	-webkit-box-flex: 1;
	-webkit-flex: 1;
	-ms-flex: 1;
	flex: 1;
	font-weight: 400;
	font-size: var(--field-font-size);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
.frm-datepicker:not(.frm-datepicker-custom-theme) .flatpickr-weekdays {
	color: var(--description-color);
}
.frm-datepicker .dayContainer,
.frm-datepicker .flatpickr-weeks {
	padding: 1px 0 0 0;
}
.frm-datepicker .flatpickr-days {
	position: relative;
	overflow: hidden;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: start;
	-webkit-align-items: flex-start;
		-ms-flex-align: start;
			align-items: flex-start;
	width: 260px;
	border: 0px;
}
.frm-datepicker .flatpickr-days:focus {
	outline: 0;
}
.frm-datepicker .dayContainer {
	padding: 0;
	outline: 0;
	text-align: left;
	width: 260px;
	-webkit-box-sizing: border-box;
			box-sizing: border-box;
	display: inline-block;
	display: -ms-flexbox;
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
			flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	-ms-flex-pack: justify;
	-webkit-justify-content: flex-start;
			justify-content: flex-start;
	-webkit-transform: translate3d(0px, 0px, 0px);
			transform: translate3d(0px, 0px, 0px);
	opacity: 1;
	min-width: unset;
	max-width: unset;
}
.frm-datepicker .dayContainer + .dayContainer {
	-webkit-box-shadow: -1px 0 0 #e6e6e6;
			box-shadow: -1px 0 0 #e6e6e6;
}
.frm-datepicker .flatpickr-day {
	border-radius: var(--border-radius);
	font-size: 13px;
	border-width: 1px;
	border-style: solid;
	-webkit-box-sizing: border-box;
			box-sizing: border-box;
	cursor: pointer;
	font-weight: 400;
	width: 14.2857143%;
	-webkit-flex-basis: 14.2857143%;
		-ms-flex-preferred-size: 14.2857143%;
			flex-basis: 14.2857143%;
	height: 31px;
	line-height: 31px;
	margin: 0;
	display: inline-block;
	position: relative;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
		-ms-flex-pack: center;
			justify-content: center;
	text-align: center;
}
.frm-datepicker:not(.frm-datepicker-custom-theme) .flatpickr-day {
	color: #444;
	background: none;
	border-color: transparent;
}
.flatpickr-calendar:not(.inline) .flatpickr-day {
	max-width: 36px;
}
.frm-datepicker.flatpickr-calendar.inline.frm-datepicker-custom-theme {
	width: auto;
	font-size: unset;
}
.frm-datepicker.flatpickr-calendar.inline.frm-datepicker-custom-theme .flatpickr-day {
	max-width: unset;
}
.frm-datepicker:not(.frm-datepicker-custom-theme) .flatpickr-day.inRange,
.frm-datepicker:not(.frm-datepicker-custom-theme) .flatpickr-day.prevMonthDay.inRange,
.frm-datepicker:not(.frm-datepicker-custom-theme) .flatpickr-day.nextMonthDay.inRange,
.frm-datepicker:not(.frm-datepicker-custom-theme) .flatpickr-day.today.inRange,
.frm-datepicker:not(.frm-datepicker-custom-theme) .flatpickr-day.prevMonthDay.today.inRange,
.frm-datepicker:not(.frm-datepicker-custom-theme) .flatpickr-day.nextMonthDay.today.inRange,
.frm-datepicker:not(.frm-datepicker-custom-theme) .flatpickr-day:hover,
.frm-datepicker:not(.frm-datepicker-custom-theme) .flatpickr-day.prevMonthDay:hover,
.frm-datepicker:not(.frm-datepicker-custom-theme) .flatpickr-day.nextMonthDay:hover,
.frm-datepicker:not(.frm-datepicker-custom-theme) .flatpickr-day:focus,
.frm-datepicker:not(.frm-datepicker-custom-theme) .flatpickr-day.prevMonthDay:focus,
.frm-datepicker:not(.frm-datepicker-custom-theme) .flatpickr-day.nextMonthDay:focus {
	cursor: pointer;
	outline: 0;
	color: rgba(65, 153, 253, 1);
	background: rgba(245, 250, 255, 1);
	border-color: rgba(245, 250, 255, 1);
}
.frm-datepicker:not(.frm-datepicker-custom-theme) .flatpickr-day:not(.flatpickr-disabled):hover,
.frm-datepicker:not(.frm-datepicker-custom-theme) .flatpickr-day:not(.flatpickr-disabled):focus {
	color: var(--date-band-color);
	font-weight: 600;
}


.frm-datepicker:not(.frm-datepicker-custom-theme) .flatpickr-day.selected,
.frm-datepicker:not(.frm-datepicker-custom-theme) .flatpickr-day.startRange,
.frm-datepicker:not(.frm-datepicker-custom-theme) .flatpickr-day.endRange,
.frm-datepicker:not(.frm-datepicker-custom-theme) .flatpickr-day.selected.inRange,
.frm-datepicker:not(.frm-datepicker-custom-theme) .flatpickr-day.startRange.inRange,
.frm-datepicker:not(.frm-datepicker-custom-theme) .flatpickr-day.endRange.inRange,
.frm-datepicker:not(.frm-datepicker-custom-theme) .flatpickr-day.selected:focus,
.frm-datepicker:not(.frm-datepicker-custom-theme) .flatpickr-day.startRange:focus,
.frm-datepicker:not(.frm-datepicker-custom-theme) .flatpickr-day.endRange:focus,
.frm-datepicker:not(.frm-datepicker-custom-theme) .flatpickr-day.selected:hover,
.frm-datepicker:not(.frm-datepicker-custom-theme) .flatpickr-day.startRange:hover,
.frm-datepicker:not(.frm-datepicker-custom-theme) .flatpickr-day.endRange:hover,
.frm-datepicker:not(.frm-datepicker-custom-theme) .flatpickr-day.selected.prevMonthDay,
.frm-datepicker:not(.frm-datepicker-custom-theme) .flatpickr-day.startRange.prevMonthDay,
.frm-datepicker:not(.frm-datepicker-custom-theme) .flatpickr-day.endRange.prevMonthDay,
.frm-datepicker:not(.frm-datepicker-custom-theme) .flatpickr-day.selected.nextMonthDay,
.frm-datepicker:not(.frm-datepicker-custom-theme) .flatpickr-day.startRange.nextMonthDay,
.frm-datepicker:not(.frm-datepicker-custom-theme) .flatpickr-day.endRange.nextMonthDay {
	background: #569ff7;
	-webkit-box-shadow: none;
			box-shadow: none;
	color: #fff;
	border-color: #569ff7;
	font-weight: 600;
}
.frm-datepicker:not(.frm-datepicker-custom-theme) .flatpickr-day.today:not(.inRange):not(.selected):not(.startRange):not(.endRange) {
	color: var(--date-band-color);
	font-weight: 600;
}
.frm-datepicker .flatpickr-day.selected.startRange,
.frm-datepicker .flatpickr-day.startRange.startRange,
.frm-datepicker .flatpickr-day.endRange.startRange {
	border-radius: 8px 0 0 8px;
}
.frm-datepicker .flatpickr-day.selected.endRange,
.frm-datepicker .flatpickr-day.startRange.endRange,
.frm-datepicker .flatpickr-day.endRange.endRange {
	border-radius: 0 8px 8px 0;
}
.frm-datepicker .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
.frm-datepicker .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
.frm-datepicker .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
-webkit-box-shadow: -10px 0 0 #569ff7;
		box-shadow: -10px 0 0 #569ff7;
}
.frm-datepicker .flatpickr-day.selected.startRange.endRange,
.frm-datepicker .flatpickr-day.startRange.startRange.endRange,
.frm-datepicker .flatpickr-day.endRange.startRange.endRange {
	border-radius: 8px;
}
.frm-datepicker .flatpickr-day.inRange {
	border-radius: 0;
	-webkit-box-shadow: -5px 0 0 rgba(245, 250, 255, 1), 5px 0 0 rgba(245, 250, 255, 1);
			box-shadow: -5px 0 0 rgba(245, 250, 255, 1), 5px 0 0 rgba(245, 250, 255, 1);
}
.frm-datepicker:not(.frm-datepicker-custom-theme) .flatpickr-day.flatpickr-disabled,
.frm-datepicker:not(.frm-datepicker-custom-theme) .flatpickr-day.flatpickr-disabled:hover,
.frm-datepicker:not(.frm-datepicker-custom-theme) .flatpickr-day.prevMonthDay,
.frm-datepicker:not(.frm-datepicker-custom-theme) .flatpickr-day.nextMonthDay,
.frm-datepicker:not(.frm-datepicker-custom-theme) .flatpickr-day.notAllowed,
.frm-datepicker:not(.frm-datepicker-custom-theme) .flatpickr-day.notAllowed.prevMonthDay,
.frm-datepicker:not(.frm-datepicker-custom-theme) .flatpickr-day.notAllowed.nextMonthDay {
	color: rgba(57,57,57,0.3);
	border-color: transparent;
	cursor: default;
}
.frm-datepicker:not(.frm-datepicker-custom-theme) .flatpickr-day.flatpickr-disabled,
.frm-datepicker:not(.frm-datepicker-custom-theme) .flatpickr-day.flatpickr-disabled:hover {
	color: rgba(57,57,57,0.1);
}

/* Today keeps its highlight color and weight, so fade it when it is not selectable. */
.frm-datepicker:not(.frm-datepicker-custom-theme) .flatpickr-day.today.flatpickr-disabled,
.frm-datepicker:not(.frm-datepicker-custom-theme) .flatpickr-day.today.flatpickr-disabled:hover {
	opacity: 0.5;
}
.frm-datepicker .flatpickr-day.flatpickr-disabled,
.frm-datepicker .flatpickr-day.flatpickr-disabled:hover{
	cursor: not-allowed;
}
.frm-datepicker .flatpickr-day.week.selected {
	border-radius: 0;
	-webkit-box-shadow: -5px 0 0 #569ff7, 5px 0 0 #569ff7;
			box-shadow: -5px 0 0 #569ff7, 5px 0 0 #569ff7;
}
.frm-datepicker .flatpickr-day.hidden {
	visibility: hidden;
}
.frm-datepicker .rangeMode .flatpickr-day {
	margin-top: 1px;
}
.frm-datepicker .flatpickr-weekwrapper {
	float: left;
}
.frm-datepicker .flatpickr-weekwrapper .flatpickr-weeks {
	padding: 0 12px;
	-webkit-box-shadow: 1px 0 0 #e6e6e6;
			box-shadow: 1px 0 0 #e6e6e6;
}
.frm-datepicker .flatpickr-weekwrapper .flatpickr-weekday {
	float: none;
	width: 100%;
	line-height: 28px;
}
.frm-datepicker .flatpickr-weekwrapper span.flatpickr-day,
.frm-datepicker .flatpickr-weekwrapper span.flatpickr-day:hover {
	display: block;
	width: 100%;
	max-width: none;
	color: rgba(57,57,57,0.3);
	background: transparent;
	cursor: default;
	border: none;
}
.frm-datepicker .flatpickr-innerContainer {
	display: block;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-sizing: border-box;
			box-sizing: border-box;
	overflow: hidden;
}
.frm-datepicker .flatpickr-rContainer {
	display: inline-block;
	padding: 0;
	-webkit-box-sizing: border-box;
			box-sizing: border-box;
}

.frm-datepicker .flatpickr-time input:focus {
	outline: 0;
	border: 0;
}
.frm-datepicker .flatpickr-input[readonly] {
	cursor: pointer;
}
.flatpickr-calendar.frm-datepicker-custom-theme:not( .frm-dark ) {
	background-color: #fff;
}
.flatpickr-calendar.frm-datepicker-custom-theme:not( .frm-dark ).arrowTop {
	border-top: 1px solid rgba(72, 72, 72, 0.2);
}
.flatpickr-calendar.frm-datepicker-custom-theme:not( .frm-dark ).arrowBottom {
	border-bottom: 1px solid rgba(72, 72, 72, 0.2);
}

.frm-datepicker .flatpickr-time {
	text-align: center;
	outline: 0;
	display: block;
	height: 0;
	line-height: 40px;
	max-height: 40px;
	-webkit-box-sizing: border-box;
			box-sizing: border-box;
	overflow: hidden;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
  }
  .frm-datepicker .flatpickr-time:after {
	content: "";
	display: table;
	clear: both;
  }
  .frm-datepicker .flatpickr-time .numInputWrapper {
	-webkit-box-flex: 1;
	-webkit-flex: 1;
	-ms-flex: 1;
	flex: 1;
	width: 40%;
	height: 40px;
	padding: 0px;
	float: left;
  }
  .frm-datepicker .flatpickr-time .numInputWrapper:hover {
	background: transparent;
  }
  .frm-datepicker .flatpickr-time .numInputWrapper span.arrowUp:after {
	border-bottom-color: #393939;
  }
  .frm-datepicker .flatpickr-time .numInputWrapper span.arrowDown:after {
	border-top-color: #393939;
  }
  .frm-datepicker .flatpickr-time.hasSeconds .numInputWrapper {
	width: 26%;
  }
  .frm-datepicker .flatpickr-time.time24hr .numInputWrapper {
	width: 49%;
  }
  .frm-datepicker .flatpickr-time input {
	background: transparent;
	-webkit-box-shadow: none;
	box-shadow: none;
	border: 0;
	border-radius: 0;
	text-align: center;
	margin: 0;
	padding: 0;
	height: inherit;
	line-height: inherit;
	color: #393939;
	font-size: 14px;
	position: relative;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-appearance: textfield;
	-moz-appearance: textfield;
	appearance: textfield;
  }
  .frm-datepicker .flatpickr-time input.flatpickr-hour {
	font-weight: bold;
  }
  .frm-datepicker .flatpickr-time input.flatpickr-minute,
  .frm-datepicker .flatpickr-time input.flatpickr-second {
	font-weight: 400;
  }
  .frm-datepicker .flatpickr-time input:focus {
	outline: 0;
	border: 0;
  }
  .frm-datepicker .flatpickr-time .flatpickr-time-separator,
  .frm-datepicker .flatpickr-time .flatpickr-am-pm {
	height: inherit;
	float: left;
	line-height: inherit;
	color: #393939;
	font-weight: bold;
	width: 2%;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-align-self: center;
	-ms-flex-item-align: center;
	align-self: center;
  }
.frm-datepicker .flatpickr-time .flatpickr-am-pm {
	outline: 0;
	width: 18%;
	cursor: pointer;
	text-align: center;
	font-weight: 400;
}
.frm-datepicker .flatpickr-time input:hover,
.frm-datepicker .flatpickr-time .flatpickr-am-pm:hover,
.frm-datepicker .flatpickr-time input:focus,
.frm-datepicker .flatpickr-time .flatpickr-am-pm:focus {
	background: #eee;
}

.flatpickr-calendar.frm-datepicker-custom-theme:not( .frm-dark ).arrowTop:after{
	border-bottom-color: #fff;
}
.flatpickr-calendar.frm-datepicker-custom-theme:not( .frm-dark ).arrowBottom:after {
	border-top-color: #fff;
}
.flatpickr-calendar.frm-datepicker-custom-theme.frm-material-blue .flatpickr-months {
	background-color: #42A5F5;
}
.flatpickr-calendar.frm-datepicker-custom-theme.frm-material-green .flatpickr-months {
	background-color: #1bbc9b;
}
.flatpickr-calendar.frm-datepicker-custom-theme.frm-material-orange .flatpickr-months {
	background-color: #ff8a65;
}
.flatpickr-calendar.frm-datepicker-custom-theme.frm-material-red .flatpickr-months {
	background-color: #ef5350;
}

.flatpickr-calendar.frm-datepicker-custom-theme.frm-confetti .flatpickr-months {
	background-color: #ffb866;
}
/**
 * Formidable style settings for the flatpickr datepicker.
 *
 * These rules live outside of flatpickr.css on purpose. flatpickr.css tracks the
 * upstream flatpickr stylesheet, so it should stay replaceable when flatpickr is
 * updated. Every rule that binds a Formidable style setting to the calendar
 * belongs here instead.
 *
 * This file is enqueued with flatpickr.css as a dependency, so it always loads
 * after it. Every selector starts from .frm-datepicker.flatpickr-calendar, two
 * classes that are both always on the calendar element. That pairing is what wins
 * against the flatpickr.css counterparts without !important, and it matches every
 * calendar Formidable creates: a popup appended to the body, an inline field, and
 * the styler's own sample. The style variables reach all three either way, since
 * the datepicker JS copies with_frm_style and frm_style_<key> onto a popup or
 * inline calendar, and the styler's sample sits inside a styled form.
 *
 * --date-band-fill is a tint of the Band Color. It is generated in PHP next to
 * the other style variables, in pro_fields.css.php and single-style.css.php.
 *
 * Day numbers are deliberately absent here. They keep the neutral color
 * flatpickr.css gives them, which is the one the jQuery UI datepicker used. The
 * field text color does not work on them: the calendar always sits on white, so a
 * style with dark fields and light text would leave the numbers unreadable.
 *
 * Color, background, border-color, border-radius, and font-weight are all guarded
 * with :not(.frm-datepicker-custom-theme) so an official flatpickr theme wins.
 */

/*
 * Day cells are left without a border. ui-lightness/jquery-ui.css does rule a
 * 1px #f4f4f4 grid on .ui-datepicker td, but the datepicker block in
 * single-style.css.php zeroes it with a two-class selector that outranks it, so
 * the jQuery UI calendar has no grid on screen. The same rule zeroes the border
 * on .flatpickr-day, which is what keeps the two matching.
 */

/* Days outside the current month, and days the field does not allow. */
.frm-datepicker.flatpickr-calendar:not(.frm-datepicker-custom-theme) .flatpickr-day.prevMonthDay,
.frm-datepicker.flatpickr-calendar:not(.frm-datepicker-custom-theme) .flatpickr-day.nextMonthDay,
.frm-datepicker.flatpickr-calendar:not(.frm-datepicker-custom-theme) .flatpickr-day.notAllowed,
.frm-datepicker.flatpickr-calendar:not(.frm-datepicker-custom-theme) .flatpickr-day.notAllowed.prevMonthDay,
.frm-datepicker.flatpickr-calendar:not(.frm-datepicker-custom-theme) .flatpickr-day.notAllowed.nextMonthDay,
.frm-datepicker.flatpickr-calendar:not(.frm-datepicker-custom-theme) .flatpickr-day.flatpickr-disabled,
.frm-datepicker.flatpickr-calendar:not(.frm-datepicker-custom-theme) .flatpickr-day.flatpickr-disabled:hover {
	color: var(--text-color-disabled, #667085);
}

/*
 * The jQuery UI datepicker left the cells around the current month empty, so every number shown
 * there is new on screen. The disabled text color alone does not set them apart, it is a muted
 * body color rather than a faded one, and a grid where all six weeks read at the same weight is
 * hard to scan. Fading the cell keeps whatever color the style picked instead of hard-coding a
 * second grey. The rules below take the fade back off once a day is hovered, focused, selected or
 * in a range, so the band fill and the selected fill are never washed out.
 */
.frm-datepicker.flatpickr-calendar:not(.frm-datepicker-custom-theme) .flatpickr-day.prevMonthDay,
.frm-datepicker.flatpickr-calendar:not(.frm-datepicker-custom-theme) .flatpickr-day.nextMonthDay {
	opacity: 0.5;
}

/* The band fill covers hover, focus, and every day between the two ends of a range. */
.frm-datepicker.flatpickr-calendar:not(.frm-datepicker-custom-theme) .flatpickr-day.inRange,
.frm-datepicker.flatpickr-calendar:not(.frm-datepicker-custom-theme) .flatpickr-day.prevMonthDay.inRange,
.frm-datepicker.flatpickr-calendar:not(.frm-datepicker-custom-theme) .flatpickr-day.nextMonthDay.inRange,
.frm-datepicker.flatpickr-calendar:not(.frm-datepicker-custom-theme) .flatpickr-day.today.inRange,
.frm-datepicker.flatpickr-calendar:not(.frm-datepicker-custom-theme) .flatpickr-day.prevMonthDay.today.inRange,
.frm-datepicker.flatpickr-calendar:not(.frm-datepicker-custom-theme) .flatpickr-day.nextMonthDay.today.inRange,
.frm-datepicker.flatpickr-calendar:not(.frm-datepicker-custom-theme) .flatpickr-day:not(.flatpickr-disabled):not(.notAllowed):hover,
.frm-datepicker.flatpickr-calendar:not(.frm-datepicker-custom-theme) .flatpickr-day.prevMonthDay:not(.flatpickr-disabled):not(.notAllowed):hover,
.frm-datepicker.flatpickr-calendar:not(.frm-datepicker-custom-theme) .flatpickr-day.nextMonthDay:not(.flatpickr-disabled):not(.notAllowed):hover,
.frm-datepicker.flatpickr-calendar:not(.frm-datepicker-custom-theme) .flatpickr-day:not(.flatpickr-disabled):not(.notAllowed):focus,
.frm-datepicker.flatpickr-calendar:not(.frm-datepicker-custom-theme) .flatpickr-day.prevMonthDay:not(.flatpickr-disabled):not(.notAllowed):focus,
.frm-datepicker.flatpickr-calendar:not(.frm-datepicker-custom-theme) .flatpickr-day.nextMonthDay:not(.flatpickr-disabled):not(.notAllowed):focus {
	color: var(--date-band-color);
	background: var(--date-band-fill);
	border-color: var(--date-band-fill);
	opacity: 1;
}

/*
 * The selected day, and both ends of a range. The jQuery UI datepicker filled the
 * selected cell with the active field border color, so the Band Color stays what
 * it is there: today's number and the hover tint.
 *
 * The :hover and :focus selectors below repeat the two :not() guards the band fill
 * uses, and they have to. Without them the band's own hover and focus selector is
 * a class more specific than this one, so it wins on any selected day that is
 * hovered or focused, and the day drops to the band tint instead of keeping its
 * fill. Being later in the file is not enough when the other selector counts
 * higher. flatpickr leaves the clicked day focused, so the end of a range picked
 * with the mouse landed on exactly that case, as does arrow key navigation.
 */
.frm-datepicker.flatpickr-calendar:not(.frm-datepicker-custom-theme) .flatpickr-day.selected,
.frm-datepicker.flatpickr-calendar:not(.frm-datepicker-custom-theme) .flatpickr-day.startRange,
.frm-datepicker.flatpickr-calendar:not(.frm-datepicker-custom-theme) .flatpickr-day.endRange,
.frm-datepicker.flatpickr-calendar:not(.frm-datepicker-custom-theme) .flatpickr-day.selected.inRange,
.frm-datepicker.flatpickr-calendar:not(.frm-datepicker-custom-theme) .flatpickr-day.startRange.inRange,
.frm-datepicker.flatpickr-calendar:not(.frm-datepicker-custom-theme) .flatpickr-day.endRange.inRange,
.frm-datepicker.flatpickr-calendar:not(.frm-datepicker-custom-theme) .flatpickr-day.selected:not(.flatpickr-disabled):not(.notAllowed):focus,
.frm-datepicker.flatpickr-calendar:not(.frm-datepicker-custom-theme) .flatpickr-day.startRange:not(.flatpickr-disabled):not(.notAllowed):focus,
.frm-datepicker.flatpickr-calendar:not(.frm-datepicker-custom-theme) .flatpickr-day.endRange:not(.flatpickr-disabled):not(.notAllowed):focus,
.frm-datepicker.flatpickr-calendar:not(.frm-datepicker-custom-theme) .flatpickr-day.selected:not(.flatpickr-disabled):not(.notAllowed):hover,
.frm-datepicker.flatpickr-calendar:not(.frm-datepicker-custom-theme) .flatpickr-day.startRange:not(.flatpickr-disabled):not(.notAllowed):hover,
.frm-datepicker.flatpickr-calendar:not(.frm-datepicker-custom-theme) .flatpickr-day.endRange:not(.flatpickr-disabled):not(.notAllowed):hover,
.frm-datepicker.flatpickr-calendar:not(.frm-datepicker-custom-theme) .flatpickr-day.selected.prevMonthDay,
.frm-datepicker.flatpickr-calendar:not(.frm-datepicker-custom-theme) .flatpickr-day.startRange.prevMonthDay,
.frm-datepicker.flatpickr-calendar:not(.frm-datepicker-custom-theme) .flatpickr-day.endRange.prevMonthDay,
.frm-datepicker.flatpickr-calendar:not(.frm-datepicker-custom-theme) .flatpickr-day.selected.nextMonthDay,
.frm-datepicker.flatpickr-calendar:not(.frm-datepicker-custom-theme) .flatpickr-day.startRange.nextMonthDay,
.frm-datepicker.flatpickr-calendar:not(.frm-datepicker-custom-theme) .flatpickr-day.endRange.nextMonthDay {
	color: #fff;
	background: var(--border-color-active);
	border-color: var(--border-color-active);
	opacity: 1;
}

/*
 * A day the field does not allow has to read as unavailable whatever the style's
 * disabled text color turns out to be. --text-color-disabled is a muted body
 * color rather than a faded one, dark enough on its own to pass for a day that
 * can still be picked, so the color alone is not the difference. The jQuery UI
 * datepicker faded its unselectable cells instead, with the .ui-state-disabled
 * opacity in ui-lightness/jquery-ui.css, and 0.35 is the number it used.
 *
 * This sits after the band fill and the selected fill so it wins the ties with
 * them, and it carries :hover and :focus so it also outranks the fade
 * flatpickr.css puts on a disabled today. Between them, a day that cannot be
 * picked stays faded in every state.
 *
 * .inRange is the one exception. A range is allowed to run across days the field
 * does not allow, and fading the cell fades the band with it, which leaves a gap
 * in the middle of a band that is meant to read as one span. Those days keep the
 * band and are left to the range to explain.
 */
.frm-datepicker.flatpickr-calendar:not(.frm-datepicker-custom-theme) .flatpickr-day.flatpickr-disabled:not(.inRange),
.frm-datepicker.flatpickr-calendar:not(.frm-datepicker-custom-theme) .flatpickr-day.flatpickr-disabled:not(.inRange):hover,
.frm-datepicker.flatpickr-calendar:not(.frm-datepicker-custom-theme) .flatpickr-day.flatpickr-disabled:not(.inRange):focus,
.frm-datepicker.flatpickr-calendar:not(.frm-datepicker-custom-theme) .flatpickr-day.notAllowed:not(.inRange),
.frm-datepicker.flatpickr-calendar:not(.frm-datepicker-custom-theme) .flatpickr-day.notAllowed:not(.inRange):hover,
.frm-datepicker.flatpickr-calendar:not(.frm-datepicker-custom-theme) .flatpickr-day.notAllowed:not(.inRange):focus {
	opacity: 0.35;
}

/*
 * flatpickr.css hovers every day with a pale fill of its own, and the band fill
 * above used to cover it. Now that the band fill skips these days, that fill is
 * what is left behind on them, so it is cleared here. .inRange is excluded
 * because a disabled day inside a range still has to carry the band across.
 */
.frm-datepicker.flatpickr-calendar:not(.frm-datepicker-custom-theme) .flatpickr-day.flatpickr-disabled:not(.inRange):hover,
.frm-datepicker.flatpickr-calendar:not(.frm-datepicker-custom-theme) .flatpickr-day.flatpickr-disabled:not(.inRange):focus,
.frm-datepicker.flatpickr-calendar:not(.frm-datepicker-custom-theme) .flatpickr-day.notAllowed:not(.inRange):hover,
.frm-datepicker.flatpickr-calendar:not(.frm-datepicker-custom-theme) .flatpickr-day.notAllowed:not(.inRange):focus {
	background: none;
	border-color: transparent;
}

/*
 * flatpickr's range shadows exist to bridge horizontal gaps between day cells.
 * Formidable's grid has no gaps, so all they do is lay a second copy of the
 * translucent band fill over the neighbouring cells and stripe the band.
 */
.frm-datepicker.flatpickr-calendar:not(.frm-datepicker-custom-theme) .flatpickr-day.inRange,
.frm-datepicker.flatpickr-calendar:not(.frm-datepicker-custom-theme) .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
.frm-datepicker.flatpickr-calendar:not(.frm-datepicker-custom-theme) .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
.frm-datepicker.flatpickr-calendar:not(.frm-datepicker-custom-theme) .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)),
.frm-datepicker.flatpickr-calendar:not(.frm-datepicker-custom-theme) .flatpickr-day.week.selected {
	box-shadow: none;
}

/*
 * A range only reads as one band if the days in it are square and the two ends
 * are rounded on their outer side. Every day cell otherwise carries the style's
 * Border Radius, which on a rounded style leaves a row of circles with the band
 * fill notched between them.
 */
.frm-datepicker.flatpickr-calendar:not(.frm-datepicker-custom-theme) .flatpickr-day.inRange {
	border-radius: 0;
}

.frm-datepicker.flatpickr-calendar:not(.frm-datepicker-custom-theme) .flatpickr-day.startRange {
	border-radius: var(--border-radius) 0 0 var(--border-radius);
}

.frm-datepicker.flatpickr-calendar:not(.frm-datepicker-custom-theme) .flatpickr-day.endRange {
	border-radius: 0 var(--border-radius) var(--border-radius) 0;
}

.frm-datepicker.flatpickr-calendar:not(.frm-datepicker-custom-theme) .flatpickr-day.startRange.endRange {
	border-radius: var(--border-radius);
}

/*
 * The weekday names sit on the field background on the jQuery UI datepicker,
 * where they are the calendar table's head row rather than part of the calendar
 * chrome. The rule they get there is in pro_fields.css.php.
 */
.frm-datepicker.flatpickr-calendar:not(.frm-datepicker-custom-theme) .flatpickr-weekdays {
	background: var(--bg-color);
}

/*
 * Head Color and Font Color, matching what they already do on the jQuery UI
 * header. flatpickr.css spaces the month row with a margin, which would leave the
 * Head Color as a thin strip around the controls, so the same spacing is moved
 * inside the band. The arrows are positioned against the band, so they move down
 * by the padding they now sit behind.
 */
.frm-datepicker.flatpickr-calendar:not(.frm-datepicker-custom-theme) .flatpickr-months {
	margin: 0;
	padding: 6px 0 12px;
	background: var(--date-head-bg-color);
}

.frm-datepicker.flatpickr-calendar:not(.frm-datepicker-custom-theme) .flatpickr-months .flatpickr-prev-month,
.frm-datepicker.flatpickr-calendar:not(.frm-datepicker-custom-theme) .flatpickr-months .flatpickr-next-month {
	top: 6px;
}

.frm-datepicker.flatpickr-calendar:not(.frm-datepicker-custom-theme) .flatpickr-current-month .cur-month,
.frm-datepicker.flatpickr-calendar:not(.frm-datepicker-custom-theme) .numInputWrapper .cur-year {
	color: var(--date-head-color);
}