* { box-sizing: border-box; }
body {
  font: 16px Arial;
}

.searchFormForUsers{
  width: 340px;
  padding-top: 3px;
  display: inline-block;
  border-radius:20px;
  margin-top: 10px;
  background-color: rgb(242, 242, 242);
}


@media screen and (max-width: 768px)
{
  .searchFormForUsers{
    width: 245px;
  }

}


.autocomplete {
  /*the container must be positioned relative:*/
  position: relative;
  display: inline-block;
  width: 300px;
}
.autocomplete input, input {
  border: 1px solid transparent;
  background-color: #f1f1f1;
  padding: 7px;
  font-size: 16px;
}
.autocomplete input[type=text] {
  background-color: #f1f1f1;
  background-color: lightblue;
  width: 100%;
}

@media screen and (max-width: 768px)
{

  .autocomplete {
  /*the container must be positioned relative:*/
    position: relative;
    display: inline-block;
    width: 245px;
  }

  .autocomplete input[type=text] {
      left: 0px;
  } 
}




.autocomplete input[type=submit], input[type=submit] {
  background-color: rgb(89, 131, 173);
  color: #fff;
  cursor: pointer;
}
.autocomplete .autocomplete-items {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  /*position the autocomplete items to be the same width as the container:*/
  top: 100%;
  left: 0;
  right: 0;
}
.autocomplete .autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  border-bottom: 1px solid #d4d4d4;
}
.autocomplete .autocomplete-items div:hover {
  /*when hovering an item:*/
  background-color: #e9e9e9;
}
.autocomplete .autocomplete-items div img{
  height: 40px;
  width: 40px;
  border-radius: 100%;
  
}

.autocomplete .autocomplete-active {
  /*when navigating through the items using the arrow keys:*/
  background-color: DodgerBlue !important;
  color: #ffffff;
}






.executeResearch{
  z-index: 1px;
  display: inline-block;
  width: 35px;
  cursor: pointer;
  border-radius: 100px;
  background-color: white;
  float: right;
}



@media screen and (max-width: 768px)
{


  .executeResearch{
    display: none;
  }
}


.findUserInput{
  display:inline-block;
  font-weight: bold;
  font-family: arial;
  border-radius: 30px;
}