.searchInput {
  flex-grow: 1;
  border: none;
  outline: none;
  font-size: 1rem;
}



.searchBoxContainer {
  display: flex;
  flex-flow: row;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  max-width: 820px;
  padding: 8px 16px 8px 8px;
  margin-top: 2em;
  margin-bottom: 4em;
  border-radius: 8px;
  line-height: normal;
  background: var(--ui-background);
  border: var(--ui-border);
}

.searchBoxContainer:focus-within,
.searchBoxContainer:hover {
  border: var(--ui-border-focus);
  box-shadow: var(--ui-focus-shadow);
}

.searchBoxContainer .icon {
  color: var(--placeholder-color);
  width: 32px;
  min-width: 32px;
  height: 32px;
  top: 0;
}
.searchBoxContainer .icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

#searchBox {
  width: 100%;
  height: 42px;
  margin: 0;
  padding: 0;
  border-radius: 0;
  margin-left: 8px;
  resize: none;
  font-weight: 700;
  font-size: 1.5em;
  line-height: normal;
  box-shadow: none;
  border: none;
  outline: none;
  background: transparent;
}

#searchBox::placeholder {
  color: var(--primary-color);
  opacity: var(--placeholder-opacity);
}

#searchResultNone {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 1em;
  font-size: 2em;
  font-weight: 700;
  font-family: var(--ui-font-family);
  border-radius: 8px;
  border: 1px solid var(--callout-border-color);
  background: var(--callout-background);
}

.icon {
  top: auto;
  font-size: 2em;
  margin-right: 20px;
}


#clearButton {
  cursor: pointer;
  user-select: none;
  border-radius: 21px;
  width: 42px;
  min-width: 42px;
  height: 42px;
  padding: 11px;
  background: transparent;
}

#clearButton:hover {
  background: var(--ui-background-hover);
}

.hidden {
  display: none !important;
}