.search-block {
  position:relative;
  margin-bottom:20px;
}

.search-icon {
  position:absolute;
  width:15px;
  height:15px;
  display:block;
  top:50%;
  left:15px;
  transform:translatey(-50%);
  mask-image:url('/fileservice/file/download/a/790870/sc/214/h/c8ca90c6276e63b78f592ef48ae16e62.svg');
  mask-size:cover;
  background:#333;
  cursor:pointer;
}

.search-icon.load {
 mask-image:url('/fileservice/file/download/a/790870/sc/95/h/132464d44d919aa318f89ad460185abc.svg');
  animation:load 1.5s infinite linear;
}

@keyframes load {
  0% {
    transform:translatey(-50%) rotate(0deg)
  }
  100% {
    transform:translatey(-50%) rotate(360deg)
  }
}

.field-search {
  width:100%;
  border:1px solid #a3a3a3;
  border-radius:5px;
  padding:8px 50px;
  outline:none;
}

.search-clear {
  position:absolute;
  width:24px;
  height:24px;
  display:block;
  top:50%;
  right:15px;
  transform:translatey(-50%);
  mask-image:url('/fileservice/file/download/a/790870/sc/72/h/014aa4a829a222731341a0ebf9532de5.svg');
  mask-size:cover;
  background:#333;
  cursor:pointer;
}

.result-wrap {
  position:absolute;
  top:53px;
  left:0;
  width:100%;
  border:1px solid #a3a3a3;
  z-index:999;
  background:#fff;
  border-radius:5px;
  padding:15px 15px 5px;
  max-height:300px;
  overflow-y:scroll
}

.result-wrap::-webkit-scrollbar {
  width:3px
}

.result-wrap::-webkit-scrollbar-track {
  background:transparent
}

.result-wrap::-webkit-scrollbar-thumb {
  background:#999;
  border-radius:10px
}

.result-wrap h3 {
  color:#999;
  font-size:12px;
  font-weight:400;
  margin-bottom:10px
}

.result-wrap a {
  display:flex;
  align-items: center;
  gap:10px;
  margin-bottom:10px;
  text-decoration:none;
  transition:all .3s;
}

.result-wrap a:hover {
  transform:translatey(-3px)
}

.result-wrap a .image-wrap {
  width:50px;
  height:50px;
  flex:0 0 50px;
  display:flex;
  align-items: center;
  justify-content: center;
  background:#f0f0f0;
  border-radius:5px;
}

.result-wrap a .image-wrap img {
  border-radius:5px;
}

.result-wrap a .image-wrap .result-image {
  mask-image:url('/fileservice/file/download/a/790870/sc/347/h/d84d664c054cd4167fd06c6ffcd6ccc7.svg');
  mask-size:cover;
  background:#999;
  width:15px;
  height:15px;
}

.result-wrap a .result-title {
  color:#333
}

.result-wrap a .result-description {
  color:#999
}