@font-face {
  font-family: 'antago';
  src: url('../font/antago.otf');
}

* {
  font-family: 'antago';
  font-weight: 300;
}
a {
  color: #00b1ae;
  text-decoration: underline;
}
.search-wrapper {
  width: 800px;
  margin:auto;
}
h2 {
  margin: 15px 0px;
  position: relative;
}
h2::after {
  content: "";
  width: 15px;
  height: 5px;
  background: #00b1ae;
  position: absolute;
  bottom: -5px;
  left: 1px;
}
input[type="text"] {
  padding: 10px;
  border: solid 1px #dcdcdc;
  box-sizing: border-box;
  -webkit-box-sizing:border-box;
  -moz-box-sizing: border-box;
  transition: box-shadow 0.3s, border 0.3s;
  color: #7a7977;
  outline: none;
}
.search-container {
  width: 100%;
  background: white;
  position: relative;
}
.search-container .search-result {
  display: none;
  overflow: auto;
}
.search-container .search-result.abs {
  position: absolute;
  z-index: 10;
  left: 0px;
  right: 0px;
  background: white;
  box-shadow: gray 2px 2px 3px 0px;
}
.search-container .search-result ul {
  margin: 0px;
  -webkit-padding-start: 0px;
  border: 1px solid grey;
}
.search-container .search-result ul li {
  cursor: pointer;
  margin: 0px;
  padding: 7px 10px;
  padding-left: 30px;
  position : relative;
  font-size: 14px;
  color: #b1b1b1;
  border-top: 1px solid grey;
}
.search-container .search-result ul li strong {
  font-weight: 700;
}
.search-container .search-result ul li:first-child {
  border-top: none;
}
.search-container .search-result ul li.img::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 9px;
  height: 20px;
  width: 20px;

  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuNWWFMmUAAAFeSURBVDhPxZK/qoJgGMad2roCFyUCE4PAVbySnFoc/DM1dBVBQ+ANNDSILU0uEtHo1GIX0SW85zzv4ZP8jsjncs7wo8f3+VNCGhENcjgcSNM0Blr2ZXqPgvv9zkPX65WBxk3OfdJ7XCwWXAaWZVGSJAy0uCMj90DnYbvdcnE6ndJms/k+dcMCeMggi86n14rdbsff7HkefyIsPBl4n1l0hdeG4jgm27bZWK1WHBwCGWTRQRcatINpmtJsNmPj+XzS4/EYBBlk0UEXGvQOjkFp0DAMWq/XrOVXFTiOw77SYFmWVNc169PpRJfLpUOe51RVFfv/M2iaJgVBwFp+VcFyuWRfaXAMSoOu61IURazxayaTSQfcfN9nX2nwfD7T7XZjvd/vKcuyDsfjkYqiYF9pcAx/Ozifz1tDFXR6B8MwJF3X6f1+U9M09Hq9BkEGWXTQ/TWIgPiPjQXdnx3SvgCgQu+MhUxc4AAAAABJRU5ErkJggg==');

  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAAJcEhZcwAADsIAAA7CARUoSoAAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuNWWFMmUAAAGDSURBVDhPvZQ/S4JRFMaVCN6WqDExwaKlRaPv0FdwKWyIxhxajJZqqSVaJCLTpElLTVsyJHQpSJvr45zOc7rn9eqbfwpp+HGO5zzPw70vXH1E1Bd/tewEb/PEVTC985NW8QxgYAIg9lSToNWHewG9mcme8YR3/QBGKGYleJ0ReudMoNdvBznhXJacYsE2hGHCzoAeM9lDCw92XYEYTFvfSqiUUEOMXk8JmZ2L8UqoBkKogkWrH4atleu7J5zqXDV0+PpCief6QKCBFh7j7ZwQzHc+eoSZZSZ11w/WyM3g1Zm7tALjqEtnpyIyMw8zRweoIwVG9mqPVH9viyhRyNN+tdJFslymaqMxcmB03IGbqOO88hqzzgR1x72fmbCYYxaYFWZo4Bbq8nlKRDK7vNCd4Mumtd9GHRYY3SjdUbHZFFHsKk3JTIbiNzmXHZ7FK/JnMdIJPQ++H9D+TyAP7af360DP09MFSH1+0HHrjU7arYFAA636kGEHOrvfj/1PGC+fkHxfujHi090wwboAAAAASUVORK5CYII=');
}
.search-container .search-result ul li:hover {
  background: rgba(1,177,174,0.2);
  color: #878786;
}
.search-container .search-box input.search-input {
  width: 100%;
}
.result-form {
  margin-top: 10px;
  width: 100%;
}
.result-form .result-input {
  margin-bottom: 10px;
}
.result-form .result-input label {
  display: inline-block;
  width: 130px;
  text-align: left;
  color: #7a7977;
}
.result-form .result-input input {
  width: calc(100% - 140px);
}
.search-box {
  position: relative;
}
input[type="text"]:focus {
  border: solid 1px rgba(1,177,174);
  box-shadow: 0 0 7px 3px rgba(1,177,174,0.1);
}
.search-box .loader {
  visibility: hidden;
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(#00b1ae 70%, white);
  top: 5px;
  right: 5px;
  animation: spin 3s linear infinite;
}

.search-box .loader.show {
  visibility: visible;
}

.search-box .loader::after {
  content: " ";
  width: 16px;
  height: 16px;
  background: white;
  display: block;
  border-radius: 50px;
  position: absolute;
  top: 9px;
  left: 2px;
}
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } };