.order,
.multiselect {
	cursor:				pointer;
	position:			relative;
	height:				40px;
	display:			-webkit-box;
	display:			-ms-flexbox;
	display:			flex;
	-webkit-box-align:		center;
	-ms-flex-align:			center;
	align-items:			center;
	font-size:			14px;
	font-weight:			500;
	padding:			6px 25px 6px 13px;
	border:				solid 1px #e9ecef;
	border-radius:			4px;
	background-color:		#fff;
	outline:			none;
	-webkit-transition:		all 0.3s ease;
	transition:			all 0.3s ease;
	box-sizing:			border-box;
	width:				calc(40% - 10px);
	margin-right:			6px;
}

.order:after,
.multiselect:after {
	content:			'\f347';
	font-family:			dashicons;
	position:			absolute;
	top:				13px;
	right:				9px;
	font-size:			12px;
	line-height:			1;
	transition:			transform 0.3s ease ,-webkit-transform 0.3s ease;
	color:				#616a78;
}

.order.active:after,
.multiselect.active:after {
	-webkit-transform:		rotate(180deg);
	transform:			rotate(180deg);
}

.order:hover,
.multiselect:hover {
	border-color:			#cdd4d9;
}
/*
.multiselect:not(.active)  {
	z-index:			0;
}
*/

.order .caret,
.multiselect .caret {
	position:			absolute;
	top:				0;
	left:				0;
	width:				100%;
	height:				100%;
	z-index:			1;
	box-sizing:			border-box;
}

.order .tags,
.multiselect .tags {
	max-width:			100%;
	overflow:			hidden;
	text-overflow:			ellipsis;
}

.order .tags span:first-of-type {
	margin-left:			5px;
	margin-right:			5px;
}

.order .content,
.multiselect .content {
	max-height:			300px;
	background-color:		#fff;
	box-shadow:			0px 4px 16px 0px rgba(0,0,0,0.15);
	position:			absolute;
	top:				100%;
	left:				0;
	z-index:			2;
	min-width:			176px;
	width:				fit-content;
	max-width:			100%;
	display:			-webkit-box;
	display:			-ms-flexbox;
	display:			flex;
	-webkit-box-orient:		vertical;
	-webkit-box-direction:		normal;
	-ms-flex-direction:		column;
	flex-direction:			column;
	padding:			0;
	margin-top:			10px;
	border:				solid 1px #e9ecef;
	border-radius:			2px;
	display:			inline-block;
	transition:			grow 1s ease 0.1s;
	overflow-y:			auto;
	overflow-x:			hidden;
	scrollbar-width:		thin;
	scrollbar-color:		#616a78 #e9ecef;
}

@keyframes grow {
	0% {
		display:		inline-block;
	}
	1% {
		height:			0px;
	}
	100% {
		height:			100%;
	}
}

.order:not(.active) .content,
.multiselect:not(.active) .content {
	display:			none;
	transition:			shrink 1s ease 0.1s;
}

@keyframes shrink {
	0% {
		display:		inline-block;
	}
	1% {
		height:			100%;
	}
	99% {
		height:			0px;
	}
	100% {
		display:		none;
	}
}

.order .content:after,
.multiselect .content:after {
	content:			'';
	position:			absolute;
	top:				-9px;
	left:				20px;
	z-index:			1;
	width:				0;
	height:				0;
	border-left:			9px solid transparent;
	border-right:			9px solid transparent;
	border-bottom:			10px solid #fff;
}

.order .content:before,
.multiselect .content:before {
	border-bottom:			10px solid #e9ecef;
	top:				-10px;
}

.order .content ul,
.multiselect .content ul {
	z-index:			2;
	width:				100%;
	height:				100%;
	padding:			10px 0;
	margin:				0;
	border-radius:			2px;
	list-style:			none;
	display:			inline-block;
}

.order .content ul::-webkit-scrollbar,
.multiselect .content ul::-webkit-scrollbar {
	width:				8px;
}

.order .content ul::-webkit-scrollbar-track,
.multiselect .content ul::-webkit-scrollbar-track {
	background-color:		#e9ecef;
}

.order .content ul::-webkit-scrollbar-thumb,
.multiselect .content ul::-webkit-scrollbar-thumb {
	background-color:		#e9ecef;
	border-radius:			20px;
	border:				2px solid #e9ecef;
}

.order .content > ul,
.multiselect .content > ul {
	white-space:			nowrap;
}

.order .content > ul:hover,
.multiselect .content > ul:hover {
	cursor:				pointer;
}


.order .content > ul > li {
	padding-left:			10px;
	padding-top:			10px;
	height:				40px;
}

.multiselect .content > ul > li {
	margin-left:			10px;
	margin-top:			10px;
}

.multiselect .content > ul > li.disabled {
	opacity:			0.3;
}

.multiselect .content > ul > li:not(.sub) {
	font-weight:			bold;
}

.multiselect .content > ul > li.sub {
	margin-left:			20px;
}

.multiselect .content > ul > li > span {
	display:			inline-block;
	width:				100%;
	padding-left:			5px;
}

.order .content > ul > li:hover {
	background-color:		#b0b0b099;
}

div.order .content > ul > li.selected {
	background-color:		#e9ecef;
}

.order .content > ul > li > span {
	display:			inline-block;
	height:				32px;
	width:				32px;
}

.order .content > ul > li > span:first-of-type {
	margin-left:			5px;
	margin-right:			15px;
}

.order .content > ul > li > span:last-of-type {
	margin-right:			5px;
}

.order.enter-active,
.order.leave-active,
.multiselect.enter-active,
.multiselect.leave-active {
  -webkit-transition:			opacity 0.3s ease-out;
  transition:				 opacity 0.3s ease-out;
}

.sorting-select-inner {
	width:				100%;
	overflow:			hidden;
	white-space:			nowrap;
	text-overflow:			ellipsis;
}

.filter-tags {
	display:			flex;
	flex-flow:			wrap;
	gap:				12px;
	width:				100%;
	margin-bottom:			5px;
}

.filter-tags span {
	background-color:		#e9ecef;
	color:				black;
	border-radius:			4px;
	padding:			2px 5px;
	margin-left:			5px;
	margin-top:			5px;
}

.filter-tags span:not(.active):not(.reset) {
	display:			none;
}

.filter-tags span:not(.reset):after {
	content:			'x';
	padding-left:			4px;
	padding-right:			4px;
	cursor:				pointer;
}

.filter-tags span:hover:after {
	color:				#0004;
}

.filter-tags span.reset {
	background-color:		transparent;
	color:				#616a78;
	text-decoration:		underline dashed;
	cursor:				pointer;
}

.filter-tags span.reset.hidden,
.filter-tags span:first-of-type.reset {
	display:			none;
}