div.fancy-select {
  position: relative;
  color: var(--primary-black);
  width: 100%;
  font-family: "Manrope", sans-serif;
  font-size: 18px;
      margin-top: auto;
}

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;
  border-radius: 5px;
  height: 75px;
  cursor: pointer;
  padding: 0 15px 0 26px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  background: var(--white);
  border: 1px solid #cac9df;

  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: 33px;
  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: 40px;
  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 300ms ease-out, top 300ms ease-out,
    visibility 300ms ease-out;
  -webkit-transition: opacity 300ms ease-out, top 300ms ease-out,
    visibility 300ms ease-out;
  -moz-transition: opacity 300ms ease-out, top 300ms ease-out,
    visibility 300ms ease-out;
  -ms-transition: opacity 300ms ease-out, top 300ms ease-out,
    visibility 300ms ease-out;
  -o-transition: opacity 300ms ease-out, top 300ms ease-out,
    visibility 300ms ease-out;
}

div.fancy-select ul.options.open {
  visibility: visible;
  top: 70px;
  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 300ms ease-out, top 300ms ease-out;
  -webkit-transition: opacity 300ms ease-out, top 300ms ease-out;
  -moz-transition: opacity 300ms ease-out, top 300ms ease-out;
  -ms-transition: opacity 300ms ease-out, top 300ms ease-out;
  -o-transition: opacity 300ms ease-out, top 300ms ease-out;
}

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

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

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

  transition: opacity 300ms ease-out, bottom 300ms ease-out;
  -webkit-transition: opacity 300ms ease-out, bottom 300ms ease-out;
  -moz-transition: opacity 300ms ease-out, bottom 300ms ease-out;
  -ms-transition: opacity 300ms ease-out, bottom 300ms ease-out;
  -o-transition: opacity 300ms ease-out, bottom 300ms 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(154 219 177 / 30%);
  color: var(--primary-black);
}

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