div.fancy-select {
  position: relative;
  color: var(--primary-black);
  font-weight: var(--font-semi-bold);
  width: 100%;
  font-family: "Manrope", sans-serif;
  font-size: 16px;
}

div.fancy-select.disabled {
  opacity: 0.5;
}

div.fancy-select select:focus + div.trigger.open {
  box-shadow: none;
}

div.fancy-select div.trigger {
  display: flex;
  align-items: center;
  height: 46px;
  cursor: pointer;
  padding: 3px 15px 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  background: var(--white);
  border: 1px solid #bdbdbd;
  border-radius: 10px;
  transition: all 240ms ease-out;
  -webkit-transition: all 240ms ease-out;
  -moz-transition: all 240ms ease-out;
  -ms-transition: all 240ms ease-out;
  -o-transition: all 240ms ease-out;
}

div.fancy-select div.trigger:after {
  content: "";
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-top-color: #23282a;
  top: 20px;
  right: 16px;
}

div.fancy-select div.trigger.open {
  box-shadow: none;
}

div.fancy-select div.trigger.open:after {
  border-top-color: #7a8498;
}

div.fancy-select ul.options {
  list-style: none;
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
  opacity: 0;
  z-index: 50;
  max-height: 200px;
  overflow: auto;
  background: var(--white);
  border-radius: 0px 0px 5px 5px;
  min-width: 100%;
  box-shadow: 0px 1.5px 2.2px rgba(0, 0, 0, 0.02),
    0px 3.7px 5.3px rgba(0, 0, 0, 0.028), 0px 7px 10px rgba(0, 0, 0, 0.035),
    0px 12.5px 17.9px rgba(0, 0, 0, 0.042),
    0px 23.4px 33.4px rgba(0, 0, 0, 0.05), 0px 56px 80px rgba(0, 0, 0, 0.07);
  transition: opacity 200ms ease-out, top 200ms ease-out,
    visibility 200ms ease-out;
  -webkit-transition: opacity 200ms ease-out, top 200ms ease-out,
    visibility 200ms ease-out;
  -moz-transition: opacity 200ms ease-out, top 200ms ease-out,
    visibility 200ms ease-out;
  -ms-transition: opacity 200ms ease-out, top 200ms ease-out,
    visibility 200ms ease-out;
  -o-transition: opacity 200ms ease-out, top 200ms ease-out,
    visibility 200ms ease-out;
}

div.fancy-select ul.options.open {
  visibility: visible;
  top: 0;
  opacity: 1;

  /* have to use a non-visibility transition to prevent this iOS issue (bug?): */
  /*http://stackoverflow.com/questions/10736478/css-animation-visibility-visible-works-on-chrome-and-safari-but-not-on-ios*/
  transition: opacity 200ms ease-out, top 200ms ease-out;
  -webkit-transition: opacity 200ms ease-out, top 200ms ease-out;
  -moz-transition: opacity 200ms ease-out, top 200ms ease-out;
  -ms-transition: opacity 200ms ease-out, top 200ms ease-out;
  -o-transition: opacity 200ms ease-out, top 200ms ease-out;
}

div.fancy-select ul.options.overflowing {
  top: auto;
  bottom: 40px;

  transition: opacity 200ms ease-out, bottom 200ms ease-out,
    visibility 200ms ease-out;
  -webkit-transition: opacity 200ms ease-out, bottom 200ms ease-out,
    visibility 200ms ease-out;
  -moz-transition: opacity 200ms ease-out, bottom 200ms ease-out,
    visibility 200ms ease-out;
  -ms-transition: opacity 200ms ease-out, bottom 200ms ease-out,
    visibility 200ms ease-out;
  -o-transition: opacity 200ms ease-out, bottom 200ms ease-out,
    visibility 200ms ease-out;
}

div.fancy-select ul.options.overflowing.open {
  top: auto;
  bottom: 50px;

  transition: opacity 200ms ease-out, bottom 200ms ease-out;
  -webkit-transition: opacity 200ms ease-out, bottom 200ms ease-out;
  -moz-transition: opacity 200ms ease-out, bottom 200ms ease-out;
  -ms-transition: opacity 200ms ease-out, bottom 200ms ease-out;
  -o-transition: opacity 200ms ease-out, bottom 200ms ease-out;
}

div.fancy-select ul.options li {
  padding: 12px 12px;
  color: #9d9d9d;
  cursor: pointer;
  white-space: nowrap;
  transition: all 150ms ease-out;
  -webkit-transition: all 150ms ease-out;
  -moz-transition: all 150ms ease-out;
  -ms-transition: all 150ms ease-out;
  -o-transition: all 150ms ease-out;
}

div.fancy-select ul.options li.selected {
  background: rgb(208 166 239 / 30%);
  color: var(--primary-black);
}

div.fancy-select ul.options li.hover {
  color: var(--primary-black);
}