@media screen and (min-width: 320px) {
    #radius {
      margin-top: -46px;
      margin-left: 71%;
      margin-right: 0px;
    }
  }

  @media screen and (min-width: 375px) {
    #radius {
      margin-top: -46px;
      margin-left: 76%;
      margin-right: 0px;
    }
  }

  @media screen and (min-width: 431px) {
    #radius {
      margin-top: -46px;
      margin-left: 82%;
      margin-right: 0px;
    }
  }

  @media screen and (min-width: 500px) {
    #radius {
      margin-top: -46px;
      margin-left: 83%;
      margin-right: 0px;
    }
  }

  @media screen and (min-width: 768px) {
    #radius {
      margin-top: -46px;
      margin-left: 89%;
      margin-right: 0px;
    }
  }

  @media screen and (min-width: 992px) {
    #radius {
      margin-top: -46px;
      margin-left: 76%;
      margin-right: 0px;
    }
  }

  @media screen and (min-width: 1200px) {
    #radius {
      margin-top: -46px;
      margin-left: 80%;
      margin-right: 0px;
    }
  }

  #geo_edit {
    margin-top: -40px;
    margin-left: 24px;
    z-index: 100;
    display: inline-block;
    background-color: white;
  }

  .clear {
    margin-top: -45px;
    z-index: 100;
    font-size: 12px;
    display: inline-block;
    color: rgba(0, 0, 0, 0.5);
  }
  .clear:hover {
    color: rgba(0, 0, 0, 1);
  }

  .custom-select {
    border: none;
    padding-left: 0px;
    max-width: 80px;
  }

  .bs-example {
    font-family: sans-serif;
    position: relative;
    margin: 100px;
  }
  .typeahead, .tt-query, .tt-hint {
    border: 2px solid #CCCCCC;
    outline: medium none;
  }
  .typeahead {
    background-color: #FFFFFF;
  }
  .typeahead:focus {
    border: 2px solid #0097CF;
  }
  .tt-query {
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
  }
  .tt-hint {
    color: #999999;
  }
  .tt-menu {
    background-color: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    margin-top: 4px;
    max-height: 260px;
    overflow-y: auto;
    padding: 8px 0;
    width: 100%;
    z-index: 1000000 !important;
  }
  .tt-suggestion {
    display: block;
    box-sizing: border-box;
    padding: 3px 20px;
    width: 100%;
  }
  .tt-suggestion.tt-cursor,.tt-suggestion:hover {
    cursor: pointer;
    background-color: #0097CF;
    color: #FFFFFF;
  }
  .tt-suggestion p {
    margin: 0;
  }
  .twitter-typeahead {
    width: 100%;
    display:block !important;
  }

  #search_form,
  #search_form .search-border,
  #search_form .row,
  #search_form [class*="col-"] {
    overflow: visible;
  }

  #search_form .search-autocomplete .twitter-typeahead {
    flex: 1 1 auto;
    min-width: 0;
    position: relative;
    width: 1%;
  }

  #search_form #q_clearable:not(.d-none) {
    align-items: center;
    display: inline-flex;
    justify-content: center;
  }

  #search_form .search-autocomplete {
    flex: 1 1 auto;
    min-width: 0;
    position: relative;
    width: 1%;
    z-index: 20;
  }

  #search_form .search-autocomplete:focus-within {
    z-index: 30;
  }

  #search_form .search-autocomplete .search-text,
  #search_form .search-autocomplete .typeahead {
    display: block;
    width: 100%;
  }

  #search_form .search-autocomplete #q,
  #search_form .search-autocomplete #geo {
    border-radius: 40px;
  }

  #search_form .search-autocomplete #geo {
    padding-right: 156px !important;
  }

  #search_form .search-location {
    align-items: stretch;
    flex-wrap: nowrap;
    position: relative;
  }

  #search_form .search-location #geo {
    border-radius: 40px !important;
  }

  #search_form .search-location .location-selection,
  #search_form .search-location #radius {
    margin: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

  #search_form .search-location #geo_edit {
    background: transparent;
    color: #495057;
    cursor: text;
    display: block;
    flex: 0 1 auto;
    margin: 0;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #search_form .search-location .location-selection {
    align-items: center;
    column-gap: 2px;
    display: inline-flex;
    left: 24px;
    max-width: calc(100% - 116px);
    right: auto;
    width: fit-content;
    z-index: 4;
  }

  #search_form .search-location #geo_close {
    align-items: center;
    flex: 0 0 auto;
    font-size: 12px;
    height: 24px;
    justify-content: center;
    line-height: 1;
    margin: 0;
    max-width: 12px;
    min-width: 12px;
    padding: 12px;
    width: 12px;
  }

  #search_form .search-location #geo_close:not(.d-none) {
    display: inline-flex;
  }

  #search_form .search-location #radius {
    border-radius: 20px;
    box-shadow: none;
    height: 36px;
    max-width: 74px;
    padding-left: 4px;
    padding-right: 18px;
    right: 12px;
    z-index: 4;
  }

  #search_form .search-location.search-autocomplete--location-selected #geo {
    border-radius: 40px !important;
    color: transparent;
  }

  .search-autocomplete .tt-menu {
    display: block;
    left: 0;
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 1000000 !important;
  }

  .search-autocomplete .tt-menu[hidden] {
    display: none !important;
  }

  .search-autocomplete .tt-suggestion {
    background: transparent;
    border: 0;
    display: block;
    text-align: left;
    width: 100%;
  }

  .search-autocomplete .tt-suggestion.tt-cursor,
  .search-autocomplete .tt-suggestion:hover {
    background-color: #0097CF;
    color: #FFFFFF;
  }

  @media screen and (max-width: 576px) {
    #search_form .search-border {
      border-radius: 28px;
      margin-left: 0;
      margin-right: 0;
      padding: 18px 12px;
    }

    #search_form .input-group {
      align-items: stretch;
      flex-wrap: nowrap;
      position: relative;
    }

    #search_form .search-text,
    #search_form .typeahead,
    #search_form .tt-query,
    #search_form .tt-hint,
    #search_form .custom-select {
      font-size: 16px;
    }

    #q,
    #geo {
      min-width: 0;
    }

    #geo {
      padding-right: 96px !important;
    }

    #radius {
      position: absolute;
      top: 50%;
      right: 12px;
      z-index: 3;
      height: 36px;
      margin: 0;
      max-width: 74px;
      transform: translateY(-50%);
    }

    .location-selection {
      column-gap: 2px;
      position: absolute;
      top: 50%;
      left: 24px;
      z-index: 4;
      max-width: calc(100% - 116px);
      right: auto;
      width: fit-content;
      margin: 0;
      display: inline-flex;
      align-items: center;
      transform: translateY(-50%);
    }

    #geo_edit {
      margin: 0;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    #geo_close {
      margin: 0;
    }
  }

  #search_form.sticky-search-box.is-stuck .search-border {
    background: transparent;
    border-radius: 0;
    margin-bottom: 0 !important;
    padding: 0 !important;
  }

  #search_form.sticky-search-box.is-stuck .search-text,
  #search_form.sticky-search-box.is-stuck .typeahead {
    background-color: #ffffff !important;
    color: #111827;
    font-size: 0.95rem;
    height: 48px;
  }

  #search_form.sticky-search-box.is-stuck .search-text::placeholder {
    color: #6b7280;
  }

  #search_form.sticky-search-box.is-stuck .btn-search {
    height: 48px;
  }

  #search_form.sticky-search-box.is-stuck .search-location #radius {
    background-color: #ffffff !important;
    color: #111827;
    height: 38px;
  }

  @media screen and (max-width: 767.98px) {
    #search_form.sticky-search-box.is-mobile-sticky .search-border {
      margin-top: 8px;
      padding: 0 !important;
    }
  }