.magic-dropdown-wrapper {
  position: relative;
  cursor: pointer;
  color: #939597;
  min-width: 70px; }
  .magic-dropdown-wrapper::after {
    position: absolute;
    width: 14px;
    height: calc(100% - 2px);
    right: 10px;
    top: 1px;
    content: "";
    background: url("../img/down-chevron.svg") no-repeat center/12px;
    z-index: 1;
    pointer-events: none; }
  .magic-dropdown-wrapper.small::after {
    width: 33px;
    transform: scale(0.8);
    right: 0; }
  .magic-dropdown-wrapper.active::after {
    transform: rotate(180deg); }
  .magic-dropdown-wrapper.active.small::after {
    transform: rotate(180deg) scale(0.8); }
  .magic-dropdown-wrapper.is-input::after {
    display: none; }

.magic-dropdown-input {
    padding: 15px 25px 15px 15px;
    font-weight: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    height: 45px;
    border: 1px solid #e6e6e6;
    cursor: text;
    width: 100%;
    color: #232323;
}
  .small .magic-dropdown-input {
    height: 33px;
    padding: 7px 20px 7px 7px; }
  .magic-dropdown-input[readonly] {
    cursor: pointer; }

.magic-dropdown-numberinput {
  border-top: 1px solid #e6e6e6; }

.magic-dropdown-list {
  display: none;
  position: absolute;
  width: 100%;
  min-width: 70px;
  border: 1px solid #e6e6e6;
  font-weight: normal;
  max-height: 30vh;
  overflow-y: auto;
  transform: translateY(5px);
  background-color: #fff;
  z-index: 999;
  top: 100%;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.15);
  color: #191919;
  outline: 0; 
  padding: 0;
}
  @media only screen and (min-width: 50.0625em) {
    .magic-dropdown-list {
      max-height: 360px; } }
  .magic-dropdown-list.hasInput {
    text-align: center; }

.magic-dropdown-item {
  padding: 15px;
  cursor: pointer; }
  .small .magic-dropdown-item {
    height: 36px;
    padding: 10px 15px; }
  .magic-dropdown-item.active {
    background-color: #f1f1ef; }