:root
{
  --searchbutton:      #7EA8BA;
  --searchbuttonhover: #6690A2;
  --inputwidth:        300px;
  --inputhilite:       #e9e9e9;
  --hoverhilite:       #e0e0e0;
}

.HPsearch-wrapper
{
 margin: auto;
 width: 100%;
 text-align: center;
 padding: 10px 0 10px 0; 
}
.HPsearch-wrapper-form
{      
 margin: auto;
 //max-width: 470px;
 width: 100%;
 //background-color: red; 
}
.HPsearchbox input
{
 width:  var(--inputwidth);
 height: 20px;
 float:  left;
 font-weight: 700;
 border: 0px;
 background: #eee;
 padding: 5px 5px 5px 10px;
 margin-top: 0px;
} 

.HPsearchbox button
{
 clip-path: polygon(15% 0, 100% 0, 100% 100%, 15% 100%, 0 50%);
 border-radius: 6px;
 background-color: #7EA8BA;
 color: white;
 border: none;
 height: 30px;
 width: 110px;
 padding: 5px 10px 5px 15px;
 font-weight: 700;
 margin: 0px 0 0 5px;   
 cursor: pointer;
}     

.HPsearchbox button:hover
{
 background-color: #6690A2;
}

.HPsearchbox input:focus
{
 border: none;
 outline: 0;
 background:#F9F9F9; 
 box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
}

.autocomplete
{
  position: relative;
  display: inline-block;
}

.autocomplete-items
{
  position: absolute;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  /*position the autocomplete items to be the same width as the container:*/
  top: 100%;
  left: 8px;
  right: 0;
  width: 263px;
}

.autocomplete-items div
{
  padding: 3px 5px 1px 8px;
  cursor: pointer;
  background-color: #fff; 
  //border-bottom: 1px solid #d4d4d4;
  text-align: left;
}

/*when hovering an item:*/
.autocomplete-items div:hover
{
  //background-color: var(--searchbuttonhover) !important;
  background-color: var(--hoverhilite) !important;       
  //color: #ffffff !important;
}

.acgrey { color: #777; }
.acred  { color: #d00; }   

/*when navigating through the items using the arrow keys:*/
.autocomplete-active
{
  background-color: var(--inputhilite) !important;
  //background-color: DodgerBlue !important;;
  //color: blue;
}  

#ajax_response
{
 font-size:  10pt;
 border:     1px solid #B4B4B4;
 background: #F9F9F9;
 width:      100px;
 position:   absolute;
 display:    none;
 top:        auto;
 padding:    2px;
 z-index:    2;
 margin-top: 35px;
}    

/* media queries */

@media only screen and (max-width: 500px)
{
  .HPsearch-wrapper-form
  {
   //width: 400px;
  }
  .HPsearchbox input
  {
   width: 200px;
  }
  .HPsearchbox button
  {
   width: 80px;
  }   
  .autocomplete-items
  {
   width: 213px;
  }
}

@media only screen and (max-width: 400px)
{
  .HPsearchbox input
  {
   width: 150px;
  }
  .HPsearchbox button
  {
   width: 70px;
  }  
  .autocomplete-items
  {
   width: 163px;
  }
}