/**
 * Styling of typeahead suggestions as the typeahead bundle did not include styling
 *
 * @project   e-man connect portal
 * @author    c.guerrero
 * @copyright e-man connect
 */


/* the tags input container
   this container is a div and is appended below the defined input field
   visibly speaking, the defined input field is hidden and replaced by this */
.bootstrap-tagsinput {
  width: 100%;
  margin-bottom: 0px;
}

/* set background color of tags to bootstrap blue */
.bootstrap-tagsinput .label-info {
  background-color: #428BCA;
}

/* this input element is an inline overlay that suggest completion of entry */
.tt-hint {
  /* hide input field hint overlay */
  display: none;
}

/* this input element is the actual replacement input in behalf of the now-hidden
   originally defined input field */
.tt-input {
  width: auto;
}

/* this tag is a span, the container of the dropdown suggestions */
.tt-dropdown-menu {
  float: left;
  min-width: 160px;
  padding: 5px;
  margin: 2px 0 0;
  list-style: none;
  font-size: 14px;
  background-color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  background-clip: padding-box;
}

/* the tt-suggestions is a span
   the tt-suggestion are div children of tt-suggestions 
   a paragraph contains the suggestion */
.tt-suggestions .tt-suggestion p {
  cursor: pointer;
  padding: 0px 10px;
  margin: 0px;
}
  
/* hover color of the suggestions */
.tt-suggestions .tt-suggestion p:hover {
  color: #ffffff;
  background: #428BCA; 
}