#filter-container {
	position: relative;
	height: 40px;
	width: 72%;
	transition: all 0.25s cubic-bezier(0.72, 1.2, 0.71, 0.72);
	display: flex;
	justify-content: start;
	align-items: center;
	margin: 30px auto 0px auto;
    box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.6);
}

#filter {
	border: none;
	border-radius: 1px;
    outline: 4px double rgb(66, 66, 66);
	width: 100%;
	height: 100%;
	font-size: 1em;
	font-weight: 400;
	font-family: Roboto Mono, Consolas, monospace;	
	padding: 0px 5px 0px 10px;
    background-color: #151719;
    background-color: rgba(255, 255, 255, 0.02);
    color: rgb(161, 161, 161);
}

#filter:focus {
    outline: 4px double #1db954;
}

#clear-filter {
	position: absolute;
	right: 0;
	width: 40px;
	aspect-ratio: 1/1;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1.7em;
	cursor: pointer;
	color: rgb(101, 101, 101);
}

#clear-filter:hover {
	color: rgb(85, 85, 85);
}

#clear-filter:active {
	color: rgb(51, 51, 51);
}