.component-dropdown{
  position:relative;
}

.component-dropdown__trigger{
  align-items:center;
  background:#fff;
  border:1.5px solid #e0eaf7;
  border-radius:40px;
  color:inherit;
  cursor:pointer;
  display:flex;
  font-size:inherit;
  gap:10px;
  justify-content:space-between;
  outline:none;
  padding:14px 20px;
  text-align:left;
  width:100%;
}
.component-dropdown__trigger.is-placeholder .component-dropdown__value{
  color:#676e80;
}
.component-dropdown__trigger.is-error{
  border-color:#f95d51;
}
.component-dropdown__trigger[aria-expanded=true]{
  border-color:#15a8f1;
}
.component-dropdown__trigger[aria-expanded=true] .component-dropdown__arrow{
  transform:rotate(180deg);
}

.component-dropdown__arrow{
  flex-shrink:0;
  transition:transform .2s ease;
}

.component-dropdown__list{
  background:#fff;
  border:1.5px solid #e0eaf7;
  border-radius:10px;
  box-shadow:0 4px 16px rgba(0,0,0,.08);
  display:none;
  left:0;
  list-style:none;
  margin:0;
  max-height:400px;
  overflow-y:auto;
  padding:8px 0;
  position:absolute;
  right:0;
  top:calc(100% + 6px);
  z-index:10;
}
.component-dropdown__list.is-open{
  display:block;
  text-align:start;
}

.component-dropdown__item{
  cursor:pointer;
  padding:10px 20px;
}
.component-dropdown__item.is-active,.component-dropdown__item:hover{
  background:#f4f8fd;
}
.component-dropdown__item.is-hidden{
  display:none;
}

.component-dropdown__search-wrap{
  align-items:center;
  border-bottom:1.5px solid #e0eaf7;
  display:flex;
  gap:8px;
  list-style:none;
  margin-bottom:4px;
  padding:8px 16px;
}

.component-dropdown__search-icon{
  color:#15a8f1;
  flex-shrink:0;
}

.component-dropdown__search{
  background:transparent;
  border:none;
  color:inherit;
  font-size:inherit;
  outline:none;
  width:100%;
}
.component-dropdown__search::-moz-placeholder{
  color:#676e80;
}
.component-dropdown__search::placeholder{
  color:#676e80;
}