<div class="search-bar">
   <form
        class="np-header-search"
        data-test="mobile-search"
        method="get"
        action="{% route search %}"
      >
        <input
          aria-label="Search"
          class="np-header-search-input"
          type="text"
          name="q"
          placeholder="Search"
        />
        <i class="np-header-search-icon far fa-search"></i>
      </form>
</div>

<style>
  .search-bar {
    text-align: center;
    background: #fff;
    border-bottom: none;
    margin-bottom: 64px;
    padding: 24px 22px;
  }

  .search-bar .np-header-search {
    display:flex;
    max-width:400px;
    margin:auto;
  }

  .search-bar .np-header-search-input {
    border: 1px solid #c4c7cc;
    border-radius: 3px;
    padding: 10px 16px 10px 16px;
    background-color: #fff;
    opacity: 1;
    width:100%;
    cursor: text;
  }

  .search-bar .np-header-search-icon {
    color:#0caa41;
  }
</style>
