/** Cludo generates it's own markup when refreshing lists so we need to target styles based on that */
#cludo-search-form {
  /* Needed to limit the width of the autocomplete results */
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
}

#search-button,
#cludo-search-form #search-button {
  flex: none;
  padding: 0.66667rem 2rem !important;
  width: auto;
}

#cludo-search-form input {
  width: 100%;
  flex: auto;
}

@media (max-width: 512px){
  #search-button,
  #cludo-search-form  #search-button {
    padding: 0.66667rem .5rem !important;
  }
}

#search_autocomplete{
  position: absolute;
  top: 100%;
}

.search_autocomplete li[role="option"] {
  padding: .5em 1em;
  font-size: .875em;
}

.search_autocomplete li[role="option"]:hover,
.search_autocomplete li[role="option"]:focus {
  background-color: #E0EFF4;
}

.search_autocomplete li[role="option"]:focus {
  outline-width: 1px;
  outline-style: auto;
  outline-color: #212121;
  outline-color: -webkit-focus-ring-color;
}

#search-page-form {
  width: 100%;
  margin-bottom:3rem;
}

@media (max-width: 719px) {
  #search-page-form {
    padding-left: 15px;
    padding-right: 15px;
  }
}

.search-results-item p {
  display:-webkit-box;
  -webkit-line-clamp:3;
  overflow:hidden;
  -webkit-box-orient:vertical;
}

#cludo-search-results .cludo-r, .cludo-search-results .cludo-r {
    width: 100%;
}