.searchable-select { 
  position: relative; 
  max-width: 100%; 
  font-family: system-ui, sans-serif; 
}
.searchable-select input[type="text"] {
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #fff !important;
  background-color: #3b3b3b !important;
  background-image: none;
  border: 1px solid #8c8d9b !important;
  border-radius: 4px;
}
.searchable-select input[type="text"]:focus {
  outline: none;
  border: 1px solid #05b8a6 !important;
  box-shadow: 0 0 6px rgba(255,255,255,0.4);
}
.searchable-select .list {
  position: absolute; 
  top: 100%; 
  left: 0; 
  right: 0; 
  max-height: 220px; 
  overflow: auto;
  background: #3b3b3b; 
  border: 1px solid #8c8d9b; 
  border-radius: .5rem; 
  margin-top: .25rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.08); 
  display: none; 
  z-index: 9999;
}
.searchable-select .item { 
  padding: .55rem .8rem; 
  cursor: pointer; 
}
.searchable-select .item[aria-selected="true"], 
.searchable-select .item:hover { 
  background: #ffffff2e; 
}
.searchable-select .empty { 
  padding: .6rem .8rem; 
  color:#777; 
}
.sr-only { 
  position:absolute; 
  width:1px; 
  height:1px; 
  padding:0; 
  margin:-1px; 
  overflow:hidden; 
  clip:rect(0,0,0,0); 
  border:0; 
}