// old styles
.geodir-search {
  float: left;
  margin-right: 20px;
}

.geodir-search input[type="text"] {
  display: block;
  float: left;
  border: 1px solid #CCCCCC;
  border-radius: 3px 3px 3px 3px;
  background: #fff;
  padding: 5px;
  margin-right: 7px;
  width: 150px;
  margin: 5px;
}

.geodir-search input[type="button"],
.geodir-search input[type="submit"] {
  display: block;
  float: left;
  margin: 5px;
}

.geodir-content-right,
.geodir-content-right{
  .geodir-search{
    button,
    input,
    input[type="text"],
    select{
      width: 100%;
      box-sizing: border-box;
    }
  }
}

.geodir-search .search_by_post {
  float: left;
}


// New styles

body {
  .geodir-search-container{
    z-index: 1; // give the container a higher z-index so autocompetes can be over map if below
  }
  .geodir-listing-search.gd-search-bar-style{
    .geodir-loc-bar {
      position: relative;
      .clearfix.geodir-loc-bar-in {
        .geodir-search {
          display: -webkit-flex; /* NEW */
          display: flex;
          -webkit-flex-wrap: wrap; /* NEW */
          flex-wrap: wrap;
          width: 100%;
          margin: 0 auto;

          select, input[type=text], input[type=text].ac_input {
            border: 1px solid #ccc;
            border-radius: 3px 3px 3px 3px;
            padding: 5px;
            display: block;
            float: left;
            margin: 0 !important;
            height: 38px;
            font-size: 14px;
            width: 100% !important;
            max-width: 100%;
            box-sizing: border-box;

          }
          input, button {
            height: 38px;
            box-sizing: border-box;
          }
          input[type=button], button {
            -webkit-flex: 1 1 auto;
            flex: 1 1 auto;
            width: initial;
            min-width: 40px;
            margin: 5px 3px 5px 3px !important;
            border-radius: 3px 3px 3px 3px;
            box-sizing: border-box;
            font-size: 14px;
            line-height: 14px;
          }

          input[type=button].fa {
            font-family: FontAwesome !important;
          }

          .gd-search-input-wrapper {
            width: 28%;
            float: left;
            padding: 0;
            margin: 5px 3px;
            -webkit-flex: 50;
            flex: 50;
            min-width: 150px;
            position: relative;
            color: #ccc;

            select, input[type=text], select.search_by_post {
              width: 100%;
            }
            .geodir-search-input-label{
              position: absolute;
              font-size: 15px;
              margin: 0;
              top: 6px;
              left: 10px;
              line-height: 27px;
              &+input{
                padding-left: 24px !important;
                line-height: 1;
                &.search_text{
                  padding-left: 26px !important;
                }
              }
            }
          }
          .gd-search-input-wrapper.gd-search-field-cpt {
            -webkit-flex: 25;
            flex: 25;
            min-width: 130px;
          }
          .gd-search-input-wrapper.gd-search-field-near {
            .gd-append-near-wrapper {
              position: relative;
              input {
                padding-right: 40px;
              }
              span {
                padding: 0;
                font-weight: normal;
                line-height: 0;
                text-align: center;
                background-color: #eee;
                border: 1px solid #ccc;
                border-radius: 3px;
                border-bottom-left-radius: 0;
                border-top-left-radius: 0;
                position: absolute;
                right: 0;
                height: 38px;
                cursor: pointer;
                width: 38px;
                box-sizing: border-box;
                i, .svg-inline--fa {
                  font-size: 30px;
                  line-height: 37px;
                  margin: 0;
                  padding: 0;
                }
              }
            }
          }

        }
      }

      .geodir-filter-container .geodir-advance-search {
        display: -webkit-flex; /* NEW */
        display: flex;
        -webkit-flex-wrap: wrap; /* NEW */
        flex-wrap: wrap;
        width: 100%;
        margin: 0 auto;

        .geodir_submit_search {
          -webkit-flex: 1 1 auto;
          flex: 1 1 auto;
          min-width: 40px;
          margin: 5px 3px 5px 3px !important;
          border-radius: 3px 3px 3px 3px;
          height: 38px;
          font-size: 14px;
          line-height: 14px;

        }
      }
    }

  }
}

.geodir_submit_search.fas {
  font-family: FontAwesome;
}

/*
#################################################
SIDEBAR STYLES
#################################################
*/
#gd-sidebar-wrapper{
  .gd-search-bar-style{
    .geodir-search{
      .gd-search-input-wrapper{
        min-width: 100%;

      }
    }

  }
}



// suggestion box
.gd-suggestions-dropdown{
  position: absolute;
  background: #ffffff;
  box-shadow: 0 21px 38px rgba(0,0,0,0.2);
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  border-top: 1px solid #ccc;
  z-index: 100;
  width: 100%;
  overflow-y: scroll;
  text-align: left;


  ul{
    margin: 0 !important;
    padding: 0;
    list-style: none;
    cursor: pointer;

    li{
      display: block;
      width: 100%;
      padding: 0 10px;
      color: #505050;
      margin: 0;

      &.gd-near-me{
        color: #2196f3;
      }

      &:hover{
        background: #03a9f436;
      }

      .fa-times{
        float: right;
        margin-top: 3px;
      }
    }
  }
}