.drop-down {
  position: relative;
  min-height: 40px;
  padding-right: 24px;
}

  .drop-down .text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    max-width: calc(100% - 1.5rem);
  }

  .drop-down a {
    color: #212121;
    display: block;
    width: 100%;
    color: var(--value);
  }

    .drop-down a:active,
    .drop-down a:hover,
    .drop-down a:focus {
      text-decoration: none;
    }

.digital-pay,
.drop-down a.digital-pay {
  display: flex;
  align-items: center;
}

  .digital-pay .digital-mark {
    max-height: 25px;
    margin-right: 0.5rem;
  }

  .drop-down a .value {
    display: none;
  }

  .drop-down .options {
    background-color: #fff;
    border: 0 none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    position: absolute;
    top: 44px;
    right: 0; /* right-aligns dropdown to input */
    z-index: 5;
    width: 100%;
    min-width: max-content; /* makes dropdown as wide as its widest option in supporting browsers */
    background-color: var(--white);
  }

    .drop-down .options ul {
      margin: 0;
      padding: 0;
      text-indent: 0;
      width: 100%;
    }

      .drop-down .options ul li {
        list-style-type: none;
      }

        .drop-down .options ul li a {
          font-size: 1rem;
          padding: 0.25rem 0.5rem;
          white-space: nowrap;
        }

          .drop-down .options ul li a:hover {
            background-color: #f5f5f5;
            background-color: var(--grayf5);
          }

.has-append .drop-down {
  padding-right: 16px;
}

  .has-append .drop-down.custom-select {
    background-position-x: calc(100% - 16px);
  }

  .has-append .drop-down + .input-group-append {
    bottom: 0;
  }

/*
  Breakpoint reminder:
  --breakpoint-xxs: 0;
  --breakpoint-xxs-max: 319.98px;  --max-width for xxs
  --breakpoint-xs: 320px;          --min-width for xs+
  --breakpoint-xs-max: 479.98px;   --max-width for xs
  --breakpoint-sm: 480px;          --min-width for sm+
  --breakpoint-sm-max: 767.98px;   --max-width for sm
  --breakpoint-md: 768px;          --min-width for md+
  --breakpoint-md-max: 1023.98px;  --max-width for md
  --breakpoint-lg: 1024px;         --min-width for lg+
  --breakpoint-lg-min: 1024.02px   --min-width for lg++ (desktop > tablet)
  --breakpoint-lg-max: 1279.98px;  --max-width for lg++
  --breakpoint-xl: 1280px;         --min-width for xl+
  --breakpoint-xl-max: 1439.98px;  --max-width for xl
  --breakpoint-xxl: 1440px;        --min-width for xxl+
*/

/* Unsupported, below tiny mobile */
@media (max-width: 319.98px) {
  /* Unsupported! */
}

/* Tiny mobile and above */
@media (min-width: 320px) {
}

/* Tiny mobile to just below mobile */
@media (min-width: 320px) and (max-width: 479.98px) {
}

/* Unsupported to just below mobile */
@media (max-width: 479.98px) {
}

/* Mobile and above (i.e., everything except tiny mobile) */
@media (min-width: 480px) {
}

/* Mobile to just below tablet portrait */
@media (min-width: 480px) and (max-width: 767.98px) {
}

/* Everything up to tablet portrait, exclusive */
@media (max-width: 767.98px) {
}

/* Tablet portrait and above */
@media (min-width: 768px) {
}

/* Tablet portrait to just below tablet landscape */
@media (min-width: 768px) and (max-width: 1023.98px) {
}

/* Everything up to tablet landscape, exclusive */
@media (max-width: 1023.98px) {
  .drop-down {
    max-width: 100%;
  }
}

/* Tablet landscape and above */
@media (min-width: 1024px) {
  .drop-down {
    max-width: 200px;
  }
}

/* Everything including tablet landscape */
@media (max-width: 1024.02px) {
}

/* Desktop/laptop to xl */
@media (min-width: 1024.02px) and (max-width: 1279.98px) {
}

/* Everything up to xl */
@media (max-width: 1279.98px) {
}

/* XL and above */
@media (min-width: 1280px) {
}

/* XL to just below XXL */
@media (min-width: 1280px) and (max-width: 1439.98px) {
}

/* Everything to just below XXL */
@media (max-width: 1439.98px) {
}

/* XXL and above */
@media (min-width: 1440px) {
}