.form-control.fiw-clear-value-button {
	position: absolute !important;
	right: calc(var(--bs-gutter-x) * 0.5);
	width: 25px !important;
	top: 0;
	bottom: 0;
	z-index: 1;
	text-align: center;
	display: flex;
	cursor: pointer;
	justify-content: center;
	align-items: center;
	font-size: 16px;
	border-left: 0;
	padding: 0;
	flex: 0 0 auto !important;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	color: #a6a6a6;
	font-size: 25px !important;
	font-weight: bold;
	font-family: 'helvetica';
	/*
	display: none; */
}

/* The clear button is absolutely positioned, so the form-group must be its
   containing block — without this the button anchors to the nearest
   positioned ancestor (e.g. .modal-body) and stretches over the whole modal.
   The height is capped to the control row so the button doesn't hang over
   the subtitle/validation lines below the input; apps whose inputs differ
   from the Bootstrap default height override --fiw-control-height. */
.form-group.fiw-has-clear-value {
	position: relative;
}

.form-group.fiw-has-clear-value > .form-control.fiw-clear-value-button {
	bottom: auto;
	height: var(--fiw-control-height, calc(1.5rem + 0.75rem + 2px));
}

.input-group .form-control.fiw-clear-value-button {
	right: 0px;
	position: static !important;
	right: unset;
	border-radius: 0;
}

.form-control.fiw-clear-value-button:not(.fiw-clear-value-button-visible) {
	display: none !important;
}