/* FMC date pickers - skin for the locally vendored flatpickr (assets/vendor/flatpickr). */

/* The visible DD/MM/YYYY box: no font-size under 16px on phones (stops iOS zooming in), and a calendar cue. */
input[data-fmc-alt] {
	cursor: pointer;
	min-width: 9.5em;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2'/><path d='M16 2v4M8 2v4M3 10h18'/></svg>");
	background-repeat: no-repeat;
	background-position: right 8px center;
	padding-right: 30px;
}
input[data-fmc-alt][data-fmc-alt][placeholder*="HH"] {
	min-width: 12.5em;
}
@media (max-width: 600px) {
	input[data-fmc-alt] {
		font-size: 16px;
	}
}

/* Calendar above sticky site headers, modals and the Olivia bubble. */
.flatpickr-calendar {
	z-index: 100000 !important;
	max-width: calc(100vw - 16px);
}

/* Dark skin on the member dashboards (black ground, gold accent). */
.flatpickr-calendar.fmc-fp-dark {
	background: #111;
	border: 1px solid rgba(255, 255, 255, 0.22);
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.7);
	color: #fff;
}
.flatpickr-calendar.fmc-fp-dark.arrowTop::before,
.flatpickr-calendar.fmc-fp-dark.arrowTop::after {
	border-bottom-color: #111;
}
.flatpickr-calendar.fmc-fp-dark.arrowBottom::before,
.flatpickr-calendar.fmc-fp-dark.arrowBottom::after {
	border-top-color: #111;
}
.fmc-fp-dark .flatpickr-months .flatpickr-month,
.fmc-fp-dark .flatpickr-current-month .flatpickr-monthDropdown-months,
.fmc-fp-dark .flatpickr-current-month input.cur-year,
.fmc-fp-dark span.flatpickr-weekday,
.fmc-fp-dark .flatpickr-day,
.fmc-fp-dark .flatpickr-time input,
.fmc-fp-dark .flatpickr-time .flatpickr-time-separator,
.fmc-fp-dark .flatpickr-time .flatpickr-am-pm {
	color: #fff;
	fill: #fff;
	background: transparent;
}
.fmc-fp-dark .flatpickr-current-month .flatpickr-monthDropdown-months {
	background: #111;
}
.fmc-fp-dark .flatpickr-months .flatpickr-prev-month,
.fmc-fp-dark .flatpickr-months .flatpickr-next-month {
	color: #fff;
	fill: #fff;
}
.fmc-fp-dark .flatpickr-months .flatpickr-prev-month svg,
.fmc-fp-dark .flatpickr-months .flatpickr-next-month svg {
	fill: #fff;
}
.fmc-fp-dark span.flatpickr-weekday {
	color: rgba(255, 255, 255, 0.6);
}
.fmc-fp-dark .flatpickr-day.prevMonthDay,
.fmc-fp-dark .flatpickr-day.nextMonthDay,
.fmc-fp-dark .flatpickr-day.flatpickr-disabled {
	color: rgba(255, 255, 255, 0.28);
}
.fmc-fp-dark .flatpickr-day:hover,
.fmc-fp-dark .flatpickr-day:focus {
	background: rgba(255, 255, 255, 0.14);
	border-color: transparent;
}
.fmc-fp-dark .flatpickr-day.today {
	border-color: #c9a961;
}
.fmc-fp-dark .flatpickr-day.selected,
.fmc-fp-dark .flatpickr-day.selected:hover {
	background: #c9a961;
	border-color: #c9a961;
	color: #000;
}
.fmc-fp-dark .flatpickr-time {
	border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.fmc-fp-dark .flatpickr-time input:hover,
.fmc-fp-dark .flatpickr-time input:focus,
.fmc-fp-dark .numInputWrapper:hover {
	background: rgba(255, 255, 255, 0.1);
}
.fmc-fp-dark .numInputWrapper span.arrowUp::after {
	border-bottom-color: #fff;
}
.fmc-fp-dark .numInputWrapper span.arrowDown::after {
	border-top-color: #fff;
}