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

.LIBsearch-wrapper
{
 margin: auto;
 width: 100%;
 text-align: center; 
}
.LIBsearch-wrapper-form
{      
 margin: auto;
 width: 470px; 
}

.LIBsearchbox input
{
 width:  var(--inputwidth);
 height: 20px;
 float:  left;
 font-weight: 700;
 border: 0px;
 background: #eee;
 padding: 5px 5px 5px 10px;
 margin-top: 0px;
} 

.LIBsearchbox 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;
}     

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

.LIBsearchbox 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: 0;
  right: 0;
  //width: calc( var(--inputwidth) + 13px );
}

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

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

.acgrey { color: #333; }
.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;
}