#autocompleteSelector {

	position: fixed;
	display: inline-block;
	min-width: 112px;
	min-height: 32px;
	max-width: 800px;
	max-height: 40vh;

	border-radius: 4px;

	background-color: $c-w;
	transform: scaleY(0);
	opacity: 0;
	transform-origin: top;
	//overflow: hidden;
	overflow-y: scroll;

	@include bs-8;
	z-index: 210;

	// border: 0.5px solid blue;/***************************/

	&>label {
		position: relative;
		display: inline-block;
		width: 100%;
		height: 36px;
		padding: 8px;
		padding-left: 8px;
		@include font(body2, $c-b);
		@include interaction-white;
		z-index: 2000 !important; //same as dialog	
		border-bottom: .2px solid rgba($color: #e0e0e0, $alpha: .5);
		//border: 0.2px solid green;

		// .autocomplete-avatar
		&>.autocomplete-avatar {
			position: absolute;
			display: inline-block;
			width: 28px;
			height: 28px;
			top: 4px;
			left: 4px;
			border-radius: 50%;
			//border: 0.2px solid green;
			@include selectNo;
			background-image: url('./img/pic/person.svg');
			background-position: center;
			background-repeat: no-repeat;
			background-size: cover;
		}

		&>.autocomplete-behaivor {
			position: absolute;
			max-width: 50%;
			right: 0;
			top: 0;
		}

	}

	&:hover {
		display: inline-block !important;
	}

	&>.selected {
		background: $c-pl;
		//border: 1px solid red;/***************************/
	}

}

#autocompleteSelector.selector-type-items {

	position: fixed;
	display: inline-block;
	min-width: 112px;
	min-height: 32px;
	max-width: 800px;
	max-height: 40vh;

	border-radius: 4px;

	background-color: $c-w;
	transform: scaleY(0);
	opacity: 0;
	transform-origin: top;
	//overflow: hidden;
	overflow-y: scroll;

	@include bs-8;
	z-index: 210;

	// border: 0.5px solid blue;/***************************/

	&>label {
		position: relative;
		display: inline-block;
		width: 100%;
		height: 36px;
		padding: 8px;
		padding-left: 8px;
		border-bottom: .2px solid rgba($color: #e0e0e0, $alpha: .5);
		@include font(body2, $c-b);
		@include interaction-white;


		z-index: 2000 !important; //same as dialog	
		//border: 0.2px solid green;

		&>div {
			position: absolute;
			display: inline-block;
			width: 28px;
			height: 28px;
			top: 4px;
			left: 24%;
			border-radius: 50%;
			//border: 0.2px solid green;
			@include selectNo;
			background-image: url('./img/pic/person.svg');
			background-position: center;
			background-repeat: no-repeat;
			background-size: cover;
		}

		&>.text-main {
			position: relative;
			left: 25%;
		}

	}

	&:hover {
		display: inline-block !important;
	}

	&>.selected {
		background: $c-pl;
		//border: 1px solid red;/***************************/
	}

}


/*selector*/

.autocompleteSelector-withAvatar {

	//border: 1px solid red;/***************************/
	&>label {
		padding-left: 38px !important;
	}
}

.autocompleteSelector-withBehaivor {

	&>label {
		padding-right: 327px !important;
	}
}

.autocompleteSelector-show {
	animation: menu-show 0.150s;
	animation-fill-mode: both;
	@include animationT(stan);
}


@keyframes autocompleteSelector-show {

	from {
		transform: scaleY(0);
		opacity: 0;
	}

	to {
		transform: scaleY(1);
		opacity: 1;
	}
}


.autocompleteSelector-hide {
	animation: menu-hide 0.200s;
	animation-fill-mode: both;
	@include animationT(dece);
}


@keyframes autocompleteSelector-hide {

	from {
		transform: scaleY(1);
		opacity: 1;
	}

	to {
		transform: scaleY(0);
		opacity: 0;
	}
}