.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"> (touch devices): 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;
	padding-top: 2px;
	padding-bottom: 2px;
	text-overflow: ellipsis;
}