/* <datalist> and <option> styling */
datalist {
	position: absolute;
	max-height: 20em;
	border: 0 none;
	overflow-x: hidden;
	overflow-y: auto;
}

	datalist option {
		font-size: 0.8em;
		padding: 0.3em 1em;
		background-color: #ccc;
		cursor: pointer;
	}

		datalist option:hover, datalist option:focus {
			color: #fff;
			background-color: #036;
			outline: 0 none;
		}

.pill-container {
	/*position: absolute;*/
	z-index: 1000;
	cursor: default;
	padding: 0;
	margin-top: -15px;
	list-style: none;
	background-color: #ffffff;
	/*border: 1px solid #ccc;*/
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	/*border-radius: 5px;*/
	/*-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);*/
	-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
	/*box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);*/
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 5px;
	flex-wrap: wrap;
	font-family: 'Raleway', sans-serif;
	letter-spacing: 0.1rem;
	font-weight: 600;
}

.check-pill {
	display: none;
}

.icon-remover {
	display: none;
}

.pill {
	padding: 0.375rem 0.75rem;
	border-radius: 0.25rem;
	/*border: 2px solid #0faac9;*/
	color: var(--font-menu-color);
	font-size: 13px;
	transition: all ease-in-out 0.2s;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	/*gap: 16px;*/
}

	.pill i {
		background: none;
		border: none;
		color: white;
		font-weight: bold;
		margin-left: 8px;
		cursor: pointer;
		display: flex;
		align-items: center;
	}

		.pill i:hover {
			color: #ff4d4d;
		}

		.pill i svg {
			width: 12px;
			height: 12px;
		}

	.pill::selection {
		background-color: transparent;
	}

.pillGroup > .check-pill:checked + .pill {
	background-color: rgba(14,165,233,0.79);
	box-shadow: 0 0 10px rgb(0 0 0 / 38%);
	color: white;
	margin-bottom: 0.3rem;
}

.pillGroup > .check-pill:checked {
	display: inline;
	color: white;
}

.pillGroup > .check-pill:checked {
	display: none;
}