/*Css Style*/
.results-autocomplete {
    margin: 20px;
    text-align: left;
    min-height: 32px;
}
.results-autocomplete ul {margin-bottom: 30px;}
.results-autocomplete ul li { 
		width: 50%; 
		display: -webkit-inline-box;
	  display: -ms-inline-flexbox;
	  display: inline-flex;
	  margin-bottom: 15px;
  }
.results-autocomplete ul li:before {display: none;}
.results-autocomplete ul li > a > div {width: 100%;}
.results-autocomplete ul li > a > div > div {float: left;}
.results-autocomplete ul li > a > div > div:first-child { padding-right: 10px; width: 25%;}
.results-autocomplete ul li > a > div > div:last-child {width: 75%;}
.results-autocomplete .produto-detalhes > div {line-height: 16px;}
.results-autocomplete .produto-detalhes .descricao {color: #444;}
.results-autocomplete .produto-detalhes .preco {color: #636363;}
.results-autocomplete .search-results-categoria {font-size: 20px; font-weight: bold; margin-bottom: 20px;}
.results-autocomplete img {width:100%; /*max-width: 80px;*/ height: auto; margin-right: 10px;}
.loading-results {background: url("AjaxLoader.gif ") no-repeat; background-size: 32px 32px;}

.results-autocomplete ul li .descricao:not(.sticky) {
    display: inline-block; /* so height and width actually take affect */
    max-width: 93%;
    height: 100%; /* so overflow hidden works and keeps text on one row */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; /* important to show ellipsis, or words will just be broken off */
}

@media screen and (max-width: 449px){
	.results-autocomplete {margin: 10px 0;}
	.results-autocomplete ul li { width: 100%; }
	.results-autocomplete ul li > a > div > div:first-child {width: 35%;}
	.results-autocomplete ul li > a > div > div:last-child {width: 65%;}
	.results-autocomplete .produto-detalhes .descricao {font-size: 20px;}
}