.kvfilter {
	position: relative;
	display: inline-block;
	transition: width .3s;
	width: 10em;
	border: 1px solid #DBDBDB;
	border-bottom-width: 2px;
	padding: 4px;
}
.kvfilter.focus {
	border-bottom-color: #00a1de;
	width: 40em;
}
.kvfilter.active {
	width: 100%;
}
.kvfilter span.option{
	color: #fff;
	background-color: #00a1de;
	padding: 3px 22px 3px 5px;
	margin: 1px;
	position: relative;
	display: inline-block;
}
.kvfilter span.option i{
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2210%22%20height%3D%2210%22%20viewBox%3D%220%200%2010%2010%22%3E%3Cpath%20fill%3D%22%23535C69%22%20fill-rule%3D%22evenodd%22%20d%3D%22M5.065%203.682L2.377.994%201.01%202.362%203.696%205.05.99%207.757l1.368%201.37%202.708-2.71%202.7%202.703%201.37-1.368-2.702-2.7%202.682-2.684L7.748%201%205.065%203.682z%22/%3E%3C/svg%3E');
	background-repeat: no-repeat;
	background-position: center;
	width: 20px;
	height: 100%;
	position: absolute;
	top: 0;
	right: 0;
    overflow: hidden;
	text-overflow: ellipsis;
	opacity: 0.75;
}
.kvfilter .tags{
	display: flex;
	height: 28px;
	cursor: pointer;
}
.kvfilter input.filter {
	border: 0 none;
	font-size: 1.1em;
	min-width: 40px;
	height: 100%;
	background-color: #fff;
}
.kvfilter .tags span.option{
	max-width: 300px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 25px;
	text-align: left;
	line-height: 1.3;
}
.kvfilter input[type='submit'] {
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	cursor: pointer;
	border: 0 none;
	text-indent: -99px;
	background-color: #fff;
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2215%22%20height%3D%2215%22%20viewBox%3D%220%200%2015%2015%22%3E%3Cpath%20fill%3D%22%23535C68%22%20fill-rule%3D%22evenodd%22%20d%3D%22M1.33%205.5c0-2.304%201.866-4.17%204.17-4.17S9.67%203.195%209.67%205.5c0%202.305-1.865%204.17-4.17%204.17-2.305%200-4.17-1.865-4.17-4.17m12.528%206.944l-3.816-3.817-.014-.008C10.64%207.73%2011%206.66%2011%205.5%2011%202.462%208.537%200%205.5%200S0%202.462%200%205.5%202.463%2011%205.5%2011c1.158%200%202.232-.36%203.118-.972.004.004.005.01.01.014l3.816%203.817c.372.37.982.37%201.354%200l.06-.063c.372-.372.372-.982%200-1.354%22/%3E%3C/svg%3E');
	background-position: center;
	background-repeat: no-repeat;
	width: 2em;
}
.kvfilter .items {
	position: absolute;
	border: 1px solid #d4d4d4;
	border-top-width: 0;
	z-index: 99;
	top: 100%;
	left: 0;
	right: 0;
	padding-bottom: 5px;
	box-shadow: 0px 1px 3px #ddd;
	background-color: #fff;
	margin: 2px -1px;
	display: none;
}
.kvfilter.focus .items {
	display: inherit;
}
.kvfilter .control-item {
	padding: 10px;
	background-color: #fff;
	text-align: left;
}
.kvfilter .control-item .control-label {
	color: #aaa;
	display: block;
	margin: 0 5px 5px;
}
.kvfilter .control-item .controls{
	display: flexbox;
	align-items: center;
}
.kvfilter .control-item .controls .extra{
	/* width: 100px; */
	margin-left: 10px;
	display: none;
}
.kvfilter .control-item .selectbox{
	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNSIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI1IDE2Ij4gIDxwb2x5Z29uIGZpbGw9IiM1MzVDNjkiIGZpbGwtcnVsZT0iZXZlbm9kZCIgcG9pbnRzPSIzLjU0NiA3LjQyNSAzLjU0NiAxLjYwNyAxLjYwNyAxLjYwNyAxLjYwNyA4LjM5NCAxLjYwNyA5LjM2NCA5LjM2NCA5LjM2NCA5LjM2NCA3LjQyNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTQ1IDkuOSAxLjY1NykiLz48L3N2Zz4=);
	background-repeat: no-repeat;
	background-position: right center;
	border: 1px solid #ddd;
	position: relative;
	padding: 5px 7px;
	cursor: pointer;
	min-height: 17px;
	width: 100%;
}
.kvfilter .control-item input.date{
	float: none;
    width: 100%;
    overflow: hidden;
	text-overflow: ellipsis;
}
.kvfilter .control-item .selectbox ul.options{
	position: absolute;
	z-index: 100;
	top: 100%;
	left: 0;
	right: 0;
	list-style: none;
	background-color: #fff;
	margin: 1px -1px;
	border: 1px solid #ddd;
	max-height: 12em;

	display: none;
    padding-inline-start: 0px;

}
.kvfilter .control-item .selectbox.focus{
	border-color: #00a1de;
}
.kvfilter .control-item .selectbox.focus ul.options{
	display: inherit;
}
.kvfilter .control-item .selectbox ul.options li{
	padding: 5px 10px;
	margin-bottom: 1px;
}
.kvfilter .control-item .selectbox ul.options li.selected{
	color: #00a1de;
}
.kvfilter .control-item .selectbox ul.options li:hover{
	background-color: #efefef;
}
.kvfilter .control-item .selectbox.multi{
	padding: 2px 25px 2px 2px;
	min-height: 26px;
}
.kvfilter .control-item .selectbox span, .kvfilter .control-item .selectbox ul.options li, .kvfilter span.option{
	-webkit-touch-callout: none;
	  -webkit-user-select: none;
	   -khtml-user-select: none;
		 -moz-user-select: none;
		  -ms-user-select: none;
			  user-select: none;
}
.kvfilter .items-buttons {
	margin: 10px 0 5px;
}
.kvfilter .items-buttons input {
	background-color: #686d76;
	color: #fff;
	border: none;
	box-shadow: none;
	font-weight: 600;
	font-size: 14px;
	padding: 6px 20px;
	margin: 0 7px;
	cursor: pointer;
	border: 1px solid #aaa;
	border-radius: 3px;
}
.kvfilter .items-buttons input[type='reset'] {
	background-color: #fff;
	color: #999;
	border: 1px solid #999;
}
.kvfilter .items-buttons input:hover, .kvfilter .items-buttons input:focus {
	border-color: #00a1de;
}

.kvfilter .control-item input.date {
    margin-top: 10px;
    float: center;
    width: 250px;
    border: 1px solid #aaa;
	padding: 6px 0px;
}