/**
 * Plugin  : Autocompletar con jQuery
 *   Autor : Lucas Forchino
 * WebSite : http://www.tutorialjquery.com
 * version : 1.0
 * Licencia: Pueden usar libremenete este código siempre y cuando no sea para 
 *           publicarlo como ejemplo de autocompletar en otro sitio.
 */
 
/* El cuadro donde se encontrara nuestra caja de autocompletar*/
.autocomplete-jquery-aBox{
    /*margin: 20px 2px 20px 5px;*/
    position: relative;
}
/* la etiqueta de autocompletar*/
.autocomplete-jquery-aBox label{
    margin-right: 20px;
    margin-top: 30px;
    display: block;
}
/* El input, tiene un tamaño de 250 , pero se podria cambiar y deberia 
*  el script darse cuenta de esto cambiando tambien el tamaño del box de
*  sugerencias. 
*/
.autocomplete-jquery-aBox input{
	/*height: 20px;
    width: 210px;*/
	width:98%;
	padding: 3px 5px;
   	line-height: 1;
	-webkit-border-radius: 5px; 
	-moz-border-radius: 5px;
	border-radius: 5px;
}

/*
 * Resultados
 */
.autocomplete-jquery-results{
    border:1px solid silver;
    float:right;
    /*margin-top:2px;*/
    /*margin-top:30px; /*fix for IE7*/
    position:absolute;
    display: none;
    z-index: 999;
}

.autocomplete-jquery-results{
	/*margin-top:-1px;*/
     box-shadow: 1px 1px 3px black;
	 height:248px;
	overflow-x: hidden;
	overflow-y: auto;
	 background:#FFF;
	 z-index: 999;
	-webkit-border-radius: 0 0 5px 5px; 
	-moz-border-radius: 0 0 5px 5px; 
	border-radius: 0 0 5px 5px; 
}

/* Si ubica el mouse sobre el imput toma este estilo*/
.autocomplete-jquery-aBox input:focus{
    box-shadow:0px 0px 3px #41B5EA;
    /*height: 20px;
    width: 210px;*/
}

/*Esta clase se activa cuando el usuario se mueve por las sugerencias*/
.autocomplete-jquery-mark{
    color:black;
    background-color: #E0F0FF !important;
}

/* Cada sugerencia va a llevar esta clase, por lo tanto tomara el estilo siguiente */
.autocomplete-jquery-item{
    border-bottom: 1px solid lightgray;
    display: block;
	padding:5px 3px;
    text-decoration: none;     
    background-color: white;
	font-size:12px;
	color:#333;
}

/* Al pasar por ensima de las sugerencias*/
.autocomplete-jquery-item:hover,.autocomplete-jquery-item:focus{
    background-color:#013C8A;
	text-decoration:none;
    color:#fff;
	font-size:12px;	
	text-shadow: 0 0 0;
	-webkit-border-radius: 0 0 5px 5px; 
	-moz-border-radius: 0 0 5px 5px; 
	border-radius: 0 0 5px 5px; 
}

.autocomplete-jquery-results-li
{ 
	cursor:pointer; display:list-item;
	line-height: 30px;
	margin: 0;
	list-style: none;
	border-bottom: 1px #f5f5f5 solid;

}

.autocomplete-jquery-results {
	scrollbar-color: rgba(0, 0, 0, .5) rgba( 101, 125, 200, 0.5);
    scrollbar-width: thin;
}

.autocomplete-jquery-results::-webkit-scrollbar {
    -webkit-appearance: none;
}

.autocomplete-jquery-results::-webkit-scrollbar:vertical {
    width:10px;
}

.autocomplete-jquery-results::-webkit-scrollbar-button:increment,.contenedor::-webkit-scrollbar-button {
    display: none;
} 

.autocomplete-jquery-results::-webkit-scrollbar:horizontal {
    height: 10px;
}

.autocomplete-jquery-results::-webkit-scrollbar-thumb {
    background-color: #797979;
    border-radius: 20px;
    border: 2px solid #f1f2f3;
}

.autocomplete-jquery-results::-webkit-scrollbar-track {
    border-radius: 10px;  
}