.ui-datepicker {
	z-index: 1100 !important;
}

input[data-sf-role="date-picker-display"] {
	cursor: pointer;
	max-width: 16em;
	padding-left: 40px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cline x1='16' y1='3' x2='16' y2='7'/%3E%3Cline x1='8' y1='3' x2='8' y2='7'/%3E%3Cline x1='3' y1='11' x2='21' y2='11'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: left 12px center;
	background-size: 18px 18px;
}

/* Native <input type="date"> (no jQuery UI on the page): the browser supplies its own picker control. */
input[data-sf-role="date-picker-display"].sf-date-native {
	background-image: none;
	padding-left: 0.75rem;
	cursor: auto;
}

/* Waiting for its reference date: looks disabled, but stays clickable so the hint can appear. */
input[data-sf-role="date-picker-display"].sf-date-waiting {
	background-color: #e9ecef;
	color: #6c757d;
	cursor: not-allowed;
}

.ui-datepicker .ui-datepicker-title {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 6px;
	margin: 0 2.3em;
	line-height: normal;
}

.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
	width: auto;
	min-width: 0;
	max-width: none;
	flex: 0 1 auto;
	/* The theme's select chevron is 34px wide with 40px of padding, which squeezes the year to
	   "2..." in this narrow header; draw it smaller so the month and year read in full. */
	padding: 2px 24px 2px 6px;
	background-size: 14px auto;
	background-position: calc(100% - 5px) 50%;
	text-overflow: ellipsis;
}

/* Phones and tablets: a full-width calendar with day cells big enough to tap. */
@media (pointer: coarse) {
	#ui-datepicker-div {
		width: calc(100vw - 32px);
		max-width: 24em;
	}

	.ui-datepicker td a,
	.ui-datepicker td span {
		padding: 0.6em 0.2em;
		text-align: center;
	}

	/* Month/year menus and the prev/next arrows as tap targets too (~40px). */
	.ui-datepicker .ui-datepicker-header {
		padding: 6px 0;
	}

	.ui-datepicker .ui-datepicker-title {
		margin: 0 44px;
	}

	.ui-datepicker select.ui-datepicker-month,
	.ui-datepicker select.ui-datepicker-year {
		min-height: 40px;
		font-size: 16px;
		padding: 4px 28px 4px 10px;
		background-position: calc(100% - 8px) 50%;
	}

	.ui-datepicker .ui-datepicker-prev,
	.ui-datepicker .ui-datepicker-next {
		top: calc(50% - 20px);
		width: 40px;
		height: 40px;
	}
}