/* autosearch */

#autosearch_cont {
	width: 100%;
	height: auto;
	padding: 12px 18px 14px;
	text-align: center;
	background: var(--first_color);
}
	
	.fa-lens-bold {
		font-size: 20px;
		color: var(--fourth_color);
		margin-right: 10px;
		vertical-align: -.3em;
	}

	#auto_search {
		width: calc( 100% - 80px );
		height: 35px;
		padding: 0 10px;
		white-space: nowrap; 
		overflow: hidden;
		text-overflow: ellipsis;
		border-radius: 0;
		font-size: inherit;
		font-style: italic;
	}
	@media screen and (min-width : 480px) and (max-width : 767px) {
		#auto_search { width: 390px; }
	}
	@media screen and (min-width : 768px) and (max-width : 992px) {
		#auto_search { width: 630px; padding: 0 20px; }
	}
	@media screen and (min-width : 993px) {
		#auto_search { width: 840px; padding: 0 20px; }
	}	
		
		#autosearch_dropdown {
			display: none;
			position: absolute;
			top: 0;
			left: 0;
			background: var(--fourth_color);
			text-align: left;
			cursor: default;
			font-weight: 300;
			border: 1px solid #cccccc;
			
			z-index: 2000;
			max-height: 200px;
			overflow-y: scroll;
			overflow-x: hidden;
		}
		@media screen and (min-width : 480px) and (max-width : 767px) {
			#autosearch_dropdown { max-height: 250px; }
		}
		@media screen and (min-width : 768px) {
			#autosearch_dropdown { max-height: 300px; }
		}
			
			.search_list_title {
				display: block;
				background: var(--third_color);
				text-transform: uppercase;
				font-size: 14px;
				color: var(--first_text);
				height: 30px;
				line-height: 30px;
				margin: 0;
				padding: 0 10px;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			@media screen and (min-width : 768px) {
				.search_list_title { height: 40px; line-height: 40px; padding: 0 20px; }
			}
				
				.list_add_scroll {
					background: color-mix(in srgb, var(--first_light) 20%, transparent);
					color: var(--first_text);
				}	
			
			.search_list_item {
				height: 40px;
				line-height: 33px;
				padding: 5px;
				white-space: nowrap; 
				overflow: hidden;
				text-overflow: ellipsis;
				cursor: pointer;
			}
			@media screen and (min-width : 480px) and (max-width : 767px) {
				.search_list_item { padding: 5px 10px; }
			}
			@media screen and (min-width : 768px) {
				.search_list_item { line-height: 40px; padding: 0 20px; }
			}
			
			.search_list_item:hover {
				color: var(--first_text);
				background: color-mix(in srgb, var(--first_light) 30%, transparent);
			}
				
				.search_list_item svg {
					margin-right: 5px;
					color: var(--second_color);
					width: 18px;
				}
				@media screen and (min-width : 480px) {
					.search_list_item svg { width: 25px; margin-right: 10px; }
				}
				
				.search_item_producer {
					font-style: italic;
					font-size: 14px;
				}