/*
 * file_name = busqueda_interna__stylesheet.css
 *
 * file_type = CSS stylesheet
 *
 * description = CSS styles used by the PHP script/action busqueda_interna.php that handles searches 
 *               internal to the Debene.com website
 *                
 * descripción = Hoja de estilo para el código PHP busqueda_interna.php el cual maneja las búsquedas 
 *               internas al sitio web Debene.com
 *
 */



/* 
  Used for the <input> that displays a search box and magnifying glass in the page hearder
  Usado para el <input> que muestra una barra de búsqueda con el icono de la lupa, ubicado en la cabecera de la página
*/


#website_search__form
{
  display: block; 
  padding-bottom: 0.75px;  
  width: 100%; 
}  


#website_search__input 
{
           background: lavender                                             ;
     background-image: url(../../imagenes/global/busqueda_interna__icon__magnifying_glass.png)    ; 
    background-repeat: no-repeat                                            ;
  background-position: 7px 9px                                              ;  /* distance from left  distance from top   */
      background-size: 20px                                                 ; 
               border: solid 1px #bfbff2                                    ;
        border-radius: 20px                                                 ;
            font-size: 16px                                                 ;
              outline: none                                                 ;
               margin: 5px 0px 5px 0px                                      ;
              padding: 9px 10px 9px 35px                                    ; 
           transition: all 0.8s                                             ;
                width: 23rem                                                ;
}	


#website_search__input:hover 
{
  background-color: #ffffff;
}


#website_search__input:focus 
{
  background-color: #ffffff                       ;
      border-color: #bfbff2                       ;            
        box-shadow: 0 0 5px rgba(109,207,246,.5)  ;
             color: #000                          ;
            cursor: auto                          ;
             
}


div.search_results__container
{
  text-align: left                  ;
     padding: 0rem 1rem 2rem 1rem   ;
}


div.search_results__container a
{
     font-size: 1.25rem   ;
   font-weight: bold      ;
}




/************************************************************************************************************** 
*                                                                                                             *
*                          STYLES FOR THE SEARCH BAR AUTOCOMPLETE FEATURE                                     *                                                *
*                                                                                                             *
*         ESTILOS PARA LA FUNCIONALIDAD DE COMPLETADO AUTOMATICO DE LA BARRA DE BUSQUEDA                      *                                                *
*                                                                                                             *
**************************************************************************************************************/

      
.autocomplete {
  /*the container must be positioned relative:*/
  position: relative;
   display: inline-block;
}


input {
  border: 1px solid transparent;
  background-color: #f1f1f1;
  padding: 0.5rem;
  font-size: 1rem;
}


input[type=text] {
  background-color: #f1f1f1;
  width: 100%;
}


input[type=submit] {
  background-color: DodgerBlue;
  color: #fff;
}


div.keywords_container 
{
   border-color: lavender            ;   
  border-radius: 23px                ; 
   /* Javascript will change the border-style to 'solid' and hence to visible only 
   if the search string matches at least one keyword */
   border-style: none                ;  
   border-width: 3px                 ;  
      font-size: 0px                 ;  /* prevents small gaps between children <div> elements */
           left: 25px                ;
       position: absolute            ;
     text-align: left                ;    
            top: 43px                ;
          width: 20rem               ; 
        z-index: 2                   ;            
}


div.keyword
{
  background-color: #ffffff             ;
     border-bottom: 1px solid #d4d4d4   ;
            cursor: pointer             ;
         font-size: 1rem                ;
           padding: 0.5rem                ;
        transition: all 0.2s            ;
}


div.keyword:first-child
{
        /* background-color: mistyRose   ;  */
   border-top: none        ;
   border-top-left-radius: 20px        ;
  border-top-right-radius: 20px        ;
}
  

div.keyword:last-child
{
       /*     background-color: honeyDew    ;  */
   border-bottom-left-radius: 20px        ;
  border-bottom-right-radius: 20px        ;  
   border-bottom: none        ;

}
  
 
  
/* The style applies to a keyword in the list of keywords when the mouse pointer hovers over it*/
div.keyword:hover 
{
  background-color: lavender   ;
}


/* This CSS class is applied by the javascript function autocomplete()
   to the keywords in the dropdown list that has the focus
   when the user navigates through the items using the up and down arrow keys:*/
div.current_keyword 
{
  background-color: #e9e9e9 ;
}