styles.css

@import url(https://fonts.googleapis.com/css?family=Roboto:500,600);

.frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border-radius: 2px;
  box-shadow: 1px 2px 10px 0px rgba(0,0,0,0.3);
  overflow: hidden;
  background: #fc00ff; /* fallback for old browsers */
  background: -webkit-linear-gradient(to right top, #00dbde, #fc00ff); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right top, #00dbde, #fc00ff); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  color: #fff;
  font-family: 'Roboto', Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.search {
  position: absolute;
  width: 260px;
  top: 180px;
  left: 70px;
  font-size: 0;
  background: #fff;
  box-shadow: 4px 8px 12px 0 rgba(0,0,0,0.1);
}

.search .searchfield {
  float: left;
  width: 205px;
  height: 40px;
  border: none;
  border-radius: 0;
  -webkit-appearance: none;
  font-size: 13px;
  font-weight: 600;
  padding: 0 0 0 15px;
  background: #fff;
  color: #333;
}

.search .button {
  position: relative;
  width: 40px;
  height: 40px;
  border: none;
  -webkit-appearance: none;
  border-radius: 0;
  color: #8567EF;
  font-size: 20px;
  padding: 0;
}

.search .button span {
  position: relative;
  top: -1px;
}

.search .suggestions {
  background: #fff;
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  padding: 0 15px;
  margin: 0;
  list-style: none;
  color: #333;
}

.search .suggestions.active {
  border-top: 1px solid #fc00ff;
}

.search .suggestions li {
  margin: 18px 0;
  padding: 0;
  cursor: pointer;
}

.search .suggestions li:hover {
  color: #8567EF;
}

.search .suggestions li b {
  font-weight: 600;
}

.clearfix::before,
.clearfix::after {
  content: " ";
  display: table;
}

.clearfix::after {
  clear: both;
}

.clearfix {
  *zoom: 1; /* For IE6 and IE7 */
}

*:focus {
  outline: none;
}

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
  color: #999;
}

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  color: #999;
  opacity: 1;
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
  color: #999;
  opacity: 1;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #999;
}

:placeholder-shown { /* Standard (https://drafts.csswg.org/selectors-4/#placeholder) */
  color: #999;
}