@charset "UTF-8";
:root {
  --select-width: 250px;
  --select-padding: 10px 12px;
  --select-font-color: #000;
  --select-border-color: #C4C4C4;
  --select-border-radius: none;
  --select-arrow-text: '▲';
  --select-arrow-text: '';
  --select-arrow-bg: url(../img/select-arrow.svg) center center no-repeat;
  --select-arrow-icon-width: 14px;
  --select-arrow-icon-height: auto;
  --select-font-size: 11px;
  --select-option-hover-bg: rgba(196, 196, 196, .35);
  --select-option-active-bg: rgba(196, 196, 196, .35);
  
  --select-option-active-font-color: #000;
  --select-active-list-border-top: 1px solid #C4C4C4;
  --select-active-frame-border-bottom: none;
}

.select {
  width: var(--select-width);
  position: relative;
  font-size: var(--select-font-size);
  color: var(--select-font-color);
}

.select .select__value span,
.select .select__list *
 {
  font-size: 19px;
  font-weight: 300;
}

.select.active .select__list {
  display: block;
  border-top: var(--select-active-list-border-top);

  background: #fff;
  z-index: 2;
}

.select.active .select__list .option:last-child {
  border-radius: 0 0 var(--select-border-radius) var(--select-border-radius);
}

.select.active .select__frame {
  border-bottom: var(--select-active-frame-border-bottom);
  border-radius: var(--select-border-radius) var(--select-border-radius) 0 0;
}

.select.active .select__frame::after {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

.select:not(.active) .select__list {
  display: none;
}

.select:not(.active) .select__frame {
  border-radius: var(--select-border-radius);
}

.select:not(.active) .select__frame::after {
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}

.select__frame {
  border: 1px solid var(--select-border-color);
  cursor: pointer;
  position: relative;
}

.select__frame .select__value {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  max-height: 55px;
  padding: var(--select-padding);
}

.select__frame::after {
  content: var(--select-arrow-text);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 20px;
  margin: auto;
  width: var(--select-arrow-icon-width);
  height: var(--select-arrow-icon-height);
  background: var(--select-arrow-bg);
  background-size: 100%;
}

.select__list {
  position: absolute;
  left: 0;
  right: 0;
  background: #fff;
  margin: auto;
}

.select__list .option {
  max-height: 55px;
  padding: var(--select-padding);
  border: 1px solid #C4C4C4;
  border-top: none;
  cursor: pointer;

  /* position: relative; */
}

.select__list .option:hover {
  background: var(--select-option-hover-bg);
}

.select__list .option.active {
  background: var(--select-option-active-bg);
  color: var(--select-option-active-font-color);
}
/*# sourceMappingURL=style.css.map */



.select-custom__color {
  width: 20px;
  height: 20px;

  margin-right: 14px;

  border-radius: 50%;
  border: 1px solid #ccc;

  /* position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto; */
}