/* Shared search field for overlays, pickers and dialogs.
   Same look as the global search in the top bar (styles/topBars.css `.search`):
   pill shape, silver border, soft shadow, App-Regular. Module pages don't load
   colours.css / dimens, so the token values are written here with the same values.
   Use: <input type="search" class="ds-search ds-search--block"> (block = full width). */

input.ds-search {
  -webkit-appearance: none;
  appearance: none;
  height: 40px;
  padding: 0 12px;
  border-radius: 18px;
  border: 1px solid #E8E8E8;
  background: #FFFFFF;
  font-family: App-Regular, sans-serif;
  font-size: 16px;
  color: #6B6B6B;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
  outline: none;
  min-width: 0;
  margin: 0;
}

input.ds-search::placeholder { color: #ACA8A8; }
input.ds-search:focus { border-color: #076A89; }

.ds-search--block { width: 100%; }

@media (max-width: 700px) {
  input.ds-search { height: 36px; font-size: 15px; }
}