form.search {
  margin-bottom: 30px;
  padding: 20px 0;
  border-bottom: 1px solid var(--color-3);
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}
form.search > * {
  margin-right: 15px;
  margin-bottom: 15px;
}
form.search > *:last-child {
  margin-right: 0;
}

form.search input, form.search select {
  padding: 10px;
}
form.search input[type="search"] {
  border: 0;
  /* padding: .6em .6em .6em 6em; */
  width: max-content;
  outline: 0;
}
form.search .field-wrapper, form.search input[type="submit"] {
  border: 1px solid var(--color-4);
  width: max-content;
  position: relative;
}
form.search input[type="search"], select, form.search input[type="submit"] {
  font-size: var(--font-size-2);
}
form.search input[type="submit"] {
  background-color: transparent;
  border-radius: 4px;
  border: 1px solid var(--color-4);
  cursor: pointer;
  padding: .6em;
}
form.search input[type="submit"]:hover {
  border: 1px solid var(--color-1);
}
form.search .field-wrapper {
  /* width: max-content; */
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  padding: 0 15px;
  padding-top: 3px;
}
form.search .field-wrapper label {
  /* position: absolute;
  top: 18px;
  left: 15px; */
  color: var(--color-2);
  /* margin-right: 15px; */
  width: max-content;
}
form.search .field-wrapper:hover {
  border: 1px solid var(--color-1);
}
form.search .select-wrapper:hover, form.search .select-wrapper:focus {
  background-color: var(--color-4);
  color: var(--color-5);
  border: 1px solid var(--color-4);
}
form.search select {
  position: relative;
  font-size: var(--font-size-2);
  font-family: sans-serif;
  color: var(--color-1);
  /* padding: .6em 3em .5em 5em; */
  padding-right: 50px;
  text-align: right;
  line-height: 1.3;
  width: max-content;
  max-width: 100%; /* useful when width is set to anything other than 100% */
  box-sizing: border-box;
  margin: 0;
  border: 0;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-color: transparent;
  background-image: url('../images/arrow-dropdown.svg');
  background-repeat: no-repeat, repeat;
  background-position: right .3em top 50%, 0 0;
  background-size: 15px auto, 100%;
}
/* Hide arrow icon in IE browsers */
form.search select::-ms-expand {
  display: none;
}
/* Hover style */
form.search select:hover {
  border-color: var(--color-2);
}
/* Focus style */
form.search select:focus {
  border-color: var(--color-2);
  /* It'd be nice to use -webkit-focus-ring-color here but it doesn't work on box-shadow */
  /* box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
  box-shadow: 0 0 0 3px -moz-mac-focusring; */
  color: var(--color-1);
  outline: none;
}

/* Set options to normal weight */
form.search select option {
  font-weight: normal;
}

/* Support for rtl text, explicit support for Arabic and Hebrew */
*[dir="rtl"] form.search select, :root:lang(ar) form.search select, :root:lang(iw) form.search select {
  background-position: left .7em top 50%, 0 0;
  padding: .6em .8em .5em 1.4em;
}

/* Disabled styles */
form.search select:disabled, form.search select[aria-disabled=true] {
  /* color: graytext; */
  background-image: url('../images/arrow-dropdown.svg');
}

form.search select:disabled:hover, form.search select[aria-disabled=true] {
  border-color: #aaa;
}

.nothing-found {
  text-align: center;
  color: var(--color-2);
  margin: 100px 0;
}

@media(max-width: 700px) {
  form.search .field-wrapper {
    width: 100% !important;
    margin-right: 0;
  }
  form.search select, form.search input[type="submit"] {
    width: 100% !important;
  }
}