
.searchfield {
  position: relative;
}

.searchfield:not(.searchfieldForm) > input {
  padding-left: 2.8125rem;
  padding-right: 2.8125rem;
}

.searchfield:not(.searchfieldForm) > span.dlsIconSearch {
  position: absolute;
  padding: 0.625rem;
  top: 0.25rem;
  left: 0.25rem;
}

.searchfield:not(.searchfieldForm) span [data-dls-icon=search] {
  position: absolute;
  top: 0.375rem;
  left: 0.375rem;
}

.searchfield.searchfieldForm button.dlsIconClose, .searchfield.searchfieldForm .btnFormClose {
  right: 48px;
}

.searchfield.searchfieldForm input {
  padding-right: calc(2.8125rem * 2);
}

.searchfield .searchfieldButton {
  background-color: #fff;
  border: 0.0625rem solid #8e9092;
  border-radius: 0 0.25rem 0.25rem 0;
  color: #53565a;
  transition: border-color 0.25S ease-out;
  z-index: 1;
}

.searchfield .searchfieldButton:hover {
  background-color: #f2f2f2;
}

.searchfield > input:focus ~ .searchfieldButton {
  border-color: #006fcf;
  color: #006fcf;
}

.searchfield button.dlsIconClose, .searchfield button [data-dls-icon=close] {
  z-index: 2;
  color: #53565a;
}

.searchfield button.dlsIconClose:focus, .searchfield button [data-dls-icon=close]:focus {
  outline: dashed 1px #53565a;
  outline-offset: -3px;
}

.searchfield .searchResultsItem:not(.searchfieldSuggestionActive):hover, .searchfield .searchResultsItem:not(.searchfieldSuggestionActive) :focus {
  background-color: unset;
}

.searchfield button.btnLoading {
  outline: none;
  pointer-events: none;
}

.searchfield button.btnLoading:focus {
  outline: none;
}

.searchfieldSuggestion.searchfieldSuggestionActive {
  background-color: rgba(0, 0, 0, 0.05);
}

.searchfieldSuggestion.searchfieldSuggestionActive .searchResultsItemLink:active {
  background-color: rgba(0, 0, 0, 0.1);
}

.searchfieldSuggestion .textTruncate {
  padding: 0 0.9375rem 0.625rem 0.9375rem;
}

.searchfieldSuggestion .textTruncate:last-of-type {
  padding-bottom: 0.625rem;
}

.searchfield .searchfieldSuggestionActive:not(:hover) {
  outline: dashed 1px #53565a !important;
  outline-offset: -3px;
}

.searchfield .searchfieldSuggestionActive:focus {
  outline: dashed 1px #53565a;
  outline-offset: -3px;
}

.searchfield .searchResultsItemLink:focus {
  outline: dashed 1px #53565a !important;
  outline-offset: -3px;
}