#inline-search {
	margin: auto;
	width: 100%;
	max-width: 422px;
	position: relative;
}

#inline-search .search-input {
	width: 100%;
	border-top:none;
	border-left:none;
	border-right:none;
	border-bottom: solid 1px #000;
	padding: 0.25em 0;
	background: transparent;
    background-size: contain;
	padding-right: 40px;
}

#inline-search .search-icon,
#inline-search .close-icon {
	text-indent:-9999px;
	background-size:cover !important;
	border:none;
	position: absolute;
	top: 50%;
	right: 0;
	transform: translate(0,-50%);
	width: 30px;
	height: 30px;
	transition: 0.3s;
	cursor: pointer;
}

#inline-search .close-icon {
	opacity: 0;
	pointer-events: auto;
	cursor: pointer;
}


/* per client request, keep search icon as user types instead of showing close icon */
/* #inline-search .search-input:focus ~ .search-icon {
	opacity: 0;
}

#inline-search .search-input:focus ~ .close-icon {
	opacity: 1;
} */

#inline-search.loading .search-icon,
#inline-search.loading .close-icon {
	opacity: 0 !important;
}

#inline-search.loading:after {
	width: 24px;
	height: 24px;
	position: absolute;
	top: 50%;
	right: 0;
	transform: translate(0,-50%);
	display: block;
	border: solid 1px black;
	border-left-color: transparent;
	border-radius: 99px;
	content: '';
	animation: spin 0.5s linear infinite;
}

@keyframes spin {
	from {
		transform: translate(0, -50%) rotate(0deg);
	}
	to {
		transform: translate(0, -50%) rotate(360deg);
	}	
}