@charset "UTF-8";
mi-search {
  display: block;
  position: relative;
  /*
   * The search field must have a clear button that is visible at all times.
   * Since most browsers implement a clear button that is only visible when the input field has content,
   * we hide all native implementations and present our own.
   */
}
mi-search input[type=search] {
  border-radius: 8px;
  background-color: #ffffff;
  padding-left: 2.5rem;
  min-height: 3rem;
  height: auto;
  font-size: 1rem;
  padding-right: 2.5rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  /* When placeholder is visible, the clear button is not rendered — reclaim that padding */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  position: relative;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxOCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMS43MSAxMUgxMi41TDE3LjQ5IDE2TDE2IDE3LjQ5TDExIDEyLjVWMTEuNzFMMTAuNzMgMTEuNDNDOS41OSAxMi40MSA4LjExIDEzIDYuNSAxM0MyLjkxIDEzIDAgMTAuMDkgMCA2LjVDMCAyLjkxIDIuOTEgMCA2LjUgMEMxMC4wOSAwIDEzIDIuOTEgMTMgNi41QzEzIDguMTEgMTIuNDEgOS41OSAxMS40MyAxMC43M0wxMS43MSAxMVpNMiA2LjVDMiA4Ljk5IDQuMDEgMTEgNi41IDExQzguOTkgMTEgMTEgOC45OSAxMSA2LjVDMTEgNC4wMSA4Ljk5IDIgNi41IDJDNC4wMSAyIDIgNC4wMSAyIDYuNVoiIGZpbGw9IiM4RDk4QUEiLz4KPC9zdmc+Cg==");
  background-repeat: no-repeat;
  background-position: 1rem center;
  background-size: 1.125rem 1.125rem;
  border-color: #E6E6E6;
  color: var(--tailwind-colors-neutral-500);
  border: 1px solid var(--tailwind-colors-gray-200);
}
mi-search input[type=search]:-moz-placeholder-shown {
  padding-right: 0.875rem;
}
mi-search input[type=search]:placeholder-shown {
  padding-right: 0.875rem;
}
mi-search input[type=search]:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px #cfe0fc; /* blue 20 */
}
mi-search input[type=search][disabled] {
  pointer-events: none;
}
mi-search input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}
mi-search input::-ms-clear {
  display: none;
}
mi-search input::-moz-search-clear-button {
  -moz-appearance: none;
}
mi-search button {
  position: absolute;
  right: 0.875rem; /* relates to input field height and button size: button should be placed with equal distance to top, right and bottom */
  top: 50%;
  transform: translateY(-50%);
  width: 1.25rem;
  height: 1.25rem;
  background-color: #6b7280;
  border-radius: 50%;
  padding: 0;
  border-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
mi-search button:focus {
  outline: 0;
}
mi-search button svg {
  fill: white;
  width: 0.625rem;
  height: 0.625rem;
}