:root {
  --icon-droplist: url("data:image/svg+xml,%3Csvg width='11' height='17' viewBox='0 0 11 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.988629 8.55554L0.989349 8.5562L8.86369 15.7673C8.86382 15.7675 8.86395 15.7676 8.86409 15.7677C8.97072 15.8662 9.11191 15.9198 9.25694 15.9198C9.40172 15.9198 9.54269 15.8664 9.64925 15.7682C9.70297 15.7196 9.74628 15.6607 9.77618 15.5948C9.80633 15.5283 9.82197 15.4563 9.82197 15.3834C9.82197 15.3105 9.80634 15.2385 9.77618 15.172C9.74618 15.1058 9.70266 15.0467 9.64869 14.998C9.64856 14.9979 9.64844 14.9978 9.64831 14.9977L2.16805 8.20711L9.64212 1.80152C9.70297 1.75302 9.75246 1.69148 9.786 1.62082C9.81765 1.55414 9.83407 1.48148 9.83396 1.40781C9.84365 1.32646 9.83315 1.24428 9.80376 1.16795C9.77254 1.08686 9.72114 1.01526 9.65484 0.959021C9.54772 0.865181 9.40888 0.814445 9.26649 0.814445C9.12377 0.814445 8.98461 0.865419 8.87739 0.959682C8.87708 0.959948 8.87678 0.960214 8.87648 0.960481L0.993507 7.75619L0.993432 7.7561L0.988629 7.76055C0.933518 7.81155 0.889337 7.87313 0.85922 7.94187C0.829372 8.00999 0.814061 8.08354 0.814613 8.15805C0.814061 8.23257 0.829375 8.3061 0.85922 8.37422C0.889337 8.44296 0.933518 8.50453 0.988629 8.55554Z' fill='%23ACB1C6' stroke='%23ACB1C6' stroke-width='0.370803'/%3E%3C/svg%3E%0A");
  --icon-droplist-arrow: url("data:image/svg+xml,%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 10 6' style='enable-background:new 0 0 10 6;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23424143;%7D%0A%3C/style%3E%3Cpath class='st0' d='M4.2,5.8c0.1,0,0.2,0.1,0.3,0.1c0.1,0,0.2,0,0.3-0.1c0.1,0,0.1-0.1,0.2-0.1l0,0l3.7-4.6C8.7,1,8.8,0.9,8.8,0.7 c0-0.1,0-0.3-0.1-0.4C8.6,0.3,8.5,0.2,8.4,0.2c-0.1,0-0.2,0-0.3,0c-0.1,0-0.2,0-0.2,0.1c-0.1,0-0.1,0.1-0.2,0.2L4.5,4.4L1.2,0.3 c0-0.1-0.1-0.1-0.2-0.2c-0.1,0-0.1-0.1-0.2-0.1c-0.1,0-0.2,0-0.3,0c-0.1,0-0.2,0.1-0.2,0.2C0.2,0.4,0.2,0.6,0.2,0.7 c0,0.1,0,0.3,0.1,0.4L4,5.7l0,0C4.1,5.7,4.1,5.8,4.2,5.8z'/%3E%3C/svg%3E%0A");
  --icon-droplist-normal: url("data:image/svg+xml,%3Csvg width='19' height='10' viewBox='0 0 19 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.69706 0.975305C1.7553 0.973499 1.81325 0.983296 1.86642 1.00397C1.9196 1.02465 1.96657 1.05565 2.00377 1.09456L9.68258 8.43337L17.8162 1.09456C17.8537 1.06043 17.8989 1.03329 17.9489 1.01472C17.9989 0.996154 18.0527 0.986614 18.1071 0.986614C18.1615 0.986614 18.2153 0.996154 18.2653 1.01472C18.3153 1.03329 18.3604 1.06043 18.3979 1.09456C18.4754 1.16316 18.5189 1.2554 18.5189 1.35145C18.5189 1.4475 18.4754 1.53974 18.3979 1.60833L9.93643 9.17648C9.8965 9.21181 9.84875 9.23975 9.79604 9.25867C9.74333 9.27759 9.68675 9.28709 9.62971 9.28656C9.57267 9.28709 9.51608 9.27759 9.46337 9.25867C9.41065 9.23975 9.3629 9.21181 9.32297 9.17648L1.34801 1.59915C1.27291 1.52948 1.23113 1.43764 1.23113 1.34227C1.23113 1.24689 1.27291 1.15505 1.34801 1.08538C1.39112 1.0434 1.4456 1.01143 1.50652 0.992214C1.56745 0.973 1.63292 0.967146 1.69706 0.975305Z' fill='%23824199'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.93643 9.17648C9.8965 9.21181 9.84875 9.23975 9.79604 9.25867C9.74333 9.27759 9.68675 9.28709 9.62971 9.28656C9.57267 9.28709 9.51608 9.27759 9.46337 9.25867C9.41065 9.23975 9.3629 9.21181 9.32297 9.17648L1.34801 1.59915C1.27291 1.52948 1.23113 1.43764 1.23113 1.34227C1.23113 1.24689 1.27291 1.15505 1.34801 1.08538C1.39112 1.0434 1.4456 1.01143 1.50652 0.992214C1.56745 0.973 1.63292 0.967146 1.69706 0.975305C1.7553 0.973499 1.81325 0.983296 1.86642 1.00397C1.9196 1.02465 1.96657 1.05565 2.00377 1.09456L9.68258 8.43337L17.8162 1.09456C17.8537 1.06043 17.8989 1.03329 17.9489 1.01472C17.9989 0.996154 18.0527 0.986614 18.1071 0.986614C18.1615 0.986614 18.2153 0.996154 18.2653 1.01472C18.3153 1.03329 18.3604 1.06043 18.3979 1.09456C18.4754 1.16316 18.5189 1.2554 18.5189 1.35145C18.5189 1.4475 18.4754 1.53974 18.3979 1.60833L9.93643 9.17648ZM18.6399 1.85973C18.6396 1.85997 18.6393 1.86022 18.639 1.86046L10.1776 9.42859C10.1024 9.49509 10.0147 9.54585 9.92053 9.57963C9.82751 9.61302 9.72875 9.62966 9.62971 9.62914C9.53069 9.62966 9.43191 9.61302 9.33888 9.57963C9.24475 9.54585 9.15699 9.49509 9.08185 9.42859L9.07255 9.42036L1.10079 1.84573C1.10017 1.84517 1.09956 1.8446 1.09895 1.84402C0.959409 1.7137 0.875 1.53509 0.875 1.34227C0.875 1.15001 0.958913 0.971889 1.09772 0.841665C1.18205 0.760519 1.28497 0.701573 1.39557 0.666689C1.49828 0.634295 1.60725 0.622727 1.71482 0.632529C1.81203 0.633026 1.90901 0.65103 1.99988 0.686359C2.0971 0.724159 2.18624 0.781428 2.25948 0.856042L9.6897 7.95726L17.5715 0.845635C17.5717 0.845458 17.5713 0.845811 17.5715 0.845635C17.644 0.779902 17.7294 0.728992 17.8206 0.695135C17.9123 0.66109 18.0096 0.644038 18.1071 0.644038C18.2045 0.644038 18.3019 0.661094 18.3935 0.695135C18.4842 0.728798 18.5686 0.778797 18.6408 0.843977C18.786 0.973339 18.875 1.15461 18.875 1.35145C18.875 1.5487 18.7857 1.73031 18.6399 1.85973Z' fill='%23824199'/%3E%3C/svg%3E%0A");
}

.droplist {
  border-radius: 25px;
  width: 100%;
}

.droplist.default {
  display: inline-flex;
  width: auto;
}

.droplist.default .droplist-label::before {
  top: 2px;
  transform: rotate(-90deg);
}

.droplist.default .droplist-content {
  border-radius: 0 0 4px 4px;
  box-shadow: 0px 4px 4px rgba(var(--black-rgb), 0.25);
  min-width: 130px;
}

.droplist.open.default .droplist-label::before {
  transform: rotate(90deg);
}

.droplist.normal {
  border-radius: 8px;
}

.droplist-main {
  border-radius: 25px;
  box-shadow: none;
  color: var(--gray-800);
  display: inline-flex;
  outline: none;
  position: relative;
  width: 100%;
}

.droplist-main label {
  color: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: inherit;
  margin-bottom: 0;
}

.droplist:focus-within {
  box-shadow: 0px 0 4px var(--gray-300);
}

.droplist.normal .droplist-label {
  border-color: var(--gray-700);
  border-radius: 8px;
  box-shadow: 0px 2px 8px 0px rgba(var(--black-rgb), 0.14);
  color: var(--primary);
  font-size: 14px;
  font-weight: 400;
  height: 35px;
}

.droplist.default .droplist-label {
  background-color: transparent;
  border-radius: 0;
  border: none;
  box-shadow: none;
  color: var(--black);
  height: auto;
}

.droplist.small .droplist-label {
  height: 30px;
}

.droplist.normal .droplist-label.active {
  color: var(--primary);
  font-size: 14px;
  font-weight: 400;
}

.droplist.normal .droplist-label::before {
  background-image: var(--icon-droplist-normal);
  background-size: cover;
  height: 10px;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 19px;
}

.droplist.small .droplist-label::before {
  filter: invert(73%) sepia(13%) saturate(319%) hue-rotate(191deg)
    brightness(95%) contrast(93%);
  height: 8px;
  left: 14px;
  width: 16px;
}

.droplist.normal .droplist-content {
  border-radius: 0 0 4px 4px;
  box-shadow: 0px 4px 4px 0px rgba(var(--black-rgb), 0.25);
}

.droplist.normal .droplist-wrap {
  padding: 1px 5px 0;
}

.droplist.normal.open .droplist-label::before {
  transform: translateY(-50%);
}

.droplist.normal.open.small .droplist-label::before,
.droplist.open.small .droplist-label::before {
  transform: translateY(-50%);
}

.droplist-label {
  align-items: center;
  background-color: var(--white);
  border-radius: 25px;
  border: 1px solid var(--gray-300);
  color: var(--gray-800);
  cursor: pointer;
  display: inline-flex;
  height: 42px;
  outline: none;
  padding-left: 2.85rem;
  padding-right: 0.85rem;
  position: relative;
  width: 100%;
}

/* .droplist-label.active {
  color: var(--light-blue);
  font-weight: 600;
} */

.droplist-select .droplist-label {
  background-color: transparent;
}

.droplist-label span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.droplist-rounded .droplist-label {
  background-color: var(--white);
  border-radius: 25px !important;
  border: 1px solid var(--gray-700);
  padding-right: 1.25rem;
}

.droplist-label::before {
  background-image: var(--icon-droplist);
  background-position: 0 0;
  background-repeat: no-repeat;
  content: "";
  height: 17px;
  left: 22px;
  position: absolute;
  top: 11px;
  transition: transform 0.3s;
  width: 11px;
}

.form-medium .droplist-label::before {
  top: 11px;
  left: 11px;
}

.droplist.open .droplist-label::before {
  transform: rotate(-90deg);
}

.droplist-select .droplist-label::before {
  -webkit-mask-image: var(--icon-droplist-arrow);
  background-color: var(--dark);
  background-repeat: no-repeat;
  height: 6px;
  mask-image: var(--icon-droplist-arrow);
  top: 50%;
  transform: translateY(-50%);
  transition: none;
  width: 10px;
}

.droplist-select.open .droplist-label::before {
  top: 40%;
  transform: rotate(180deg);
}

.droplist.open .droplist-wrap {
  height: auto;
  opacity: 1;
  visibility: visible;
}

.droplist-wrap {
  height: 0;
  left: 0;
  opacity: 0;
  padding-top: 4px;
  position: absolute;
  top: 100%;
  transition: 0.3s ease-in-out;
  visibility: hidden;
  width: 100%;
  z-index: 4;
}

.droplist-rounded .droplist-wrap {
  padding-top: 5px;
}

.droplist-content {
  background-color: var(--white);
  border-radius: 13px;
  box-shadow: 0px 0px 10px 0px rgba(var(--black-rgb), 0.15);
  overflow: hidden;
}

.droplist-select .droplist-content,
.droplist-rounded .droplist-content {
  background-color: var(--white);
  border-radius: 13px;
  box-shadow: 0px 0px 10px 0px rgba(var(--black-rgb), 0.15);
}

.droplist-select .droplist-content {
  border-radius: 10px;
}

.droplist-option {
  align-items: center;
  cursor: pointer;
  display: flex;
  font-size: 14px;
  min-height: 38px;
  padding: 0 24px;
}

.droplist-list {
  align-items: center;
  display: flex;
  min-height: 40px;
  padding: 0 15px;
}

.droplist-option.open {
  background-color: var(--gray-100);
}

.droplist-option:hover {
  background-color: var(--gray-200);
}

.droplist-list.open {
  background-color: var(--pink-200);
}

.form-pink .droplist-label {
  background-color: var(--pink);
  font-weight: normal;
}

.droplist.open.form-pink .droplist-label {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.droplist-check {
  display: block;
  padding: 0.4rem 1rem;
}

.droplist-check .checkbox {
  position: relative;
  top: -1px;
}