.search-select {
  position:relative;
  margin-top:10px;
}

.search-select>select {
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  opacity:0!important;
  pointer-events:none;
}

.search-select>input {
  display:block;
  width:100%;
  background:#171a16;
  color:white;
  border:1px solid #3b4037;
  border-radius:11px;
  padding:16px 44px 16px 16px;
  font:500 15px 'DM Sans';
  outline:none;
  background-image:linear-gradient(45deg,transparent 50%,#899083 50%),linear-gradient(135deg,#899083 50%,transparent 50%);
  background-position:calc(100% - 19px) 22px,calc(100% - 14px) 22px;
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
}

.search-select>input:focus {
  border-color:var(--lime);
  box-shadow:0 0 0 3px rgba(201,255,74,.08);
}

.search-select>input.has-value {
  color:var(--lime);
}

.search-select>input::-webkit-search-cancel-button {
  filter:invert(1);
}

.search-options {
  position:absolute;
  z-index:30;
  left:0;
  right:0;
  top:calc(100% + 7px);
  max-height:310px;
  overflow:auto;
  background:#171a16;
  border:1px solid #42483e;
  border-radius:12px;
  padding:7px;
  box-shadow:0 24px 60px rgba(0,0,0,.45);
}

.search-options[hidden] {
  display:none;
}

.search-options button {
  width:100%;
  background:transparent;
  color:#f4f5f1;
  border-radius:8px;
  padding:11px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  text-align:left;
  font-weight:500;
}

.search-options button:hover,.search-options button.active {
  background:#30372a;
  color:var(--lime);
  filter:none;
}

.search-options button small {
  color:#777f72;
  text-transform:capitalize;
  font-size:10px;
}

.no-results {
  margin:0;
  padding:18px 12px;
  color:#8e9589;
  text-align:center;
  font-size:12px;
}