.custom-select {
  position: relative;
  display: inline-block;

  input {
    &:read-only {
      background-color: #fff !important;
    }
    width: 100%;
    padding: 2rem;
    border-radius: 0.5rem;
    border: 0.1rem solid rgba(229, 229, 229, 1);
    color: rgba(58, 58, 58, 1);
    cursor: pointer;
    font-size: 1.6rem;
  }

  ul {
    z-index: 100001;
    border: none;
    width: 100%;
    border-radius: 0.5rem;
    z-index: 2;
    position: absolute;
    top: 100%;
    max-height: 0;
    overflow-x: hidden;
    background: #fff;
    transition: 0.4s all ease;

    &.active {
      overflow-y: auto;
      max-height: 24.8rem;
      transition: 0.4s all ease;

      border: 0.1rem solid rgba(229, 229, 229, 1);
    }

    li {
      padding: 2rem;
      font-size: 1.6rem;
      border-top: 0.1rem solid rgba(242, 242, 242, 1);
      border-bottom: 0.1rem solid rgba(242, 242, 242, 1);
      background: #fff;
      transition: 0.4s all ease;

      &:hover {
        background: rgb(218, 218, 218);
        transition: 0.4s all ease;
        cursor: pointer;
      }

      &:first-child {
        border-bottom: none;
        border-top: none;
      }

      &:last-child {
        border-top: none;
        border-top: none;
      }
    }
  }
}

.input-img {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: calc(100% - 3rem);
  pointer-events: none;
}

// MEDIA

@media screen and (max-width: 1100px) {
  .custom-select ul li {
    font-size: 1.2rem;
  }
  .custom-select input {
    padding: 1.4rem 1rem;
    font-size: 1.2rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
}
