/* The container must be positioned relative: */
.custom-select-option-value {
  position: relative;
  font-family: Arial;
  width: fit-content;
  width: -moz-fit-content;
  width: -webkit-fit-content;
}

.custom-select-option-value select {
  display: none; /*hide original SELECT element: */
}

.select-selected {
  background-color: DodgerBlue;
}

/* Style the arrow inside the select element: */
/* .select-selected:after {
    position: absolute;
    content: "";
    top: 14px;
    right: 10px;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-color: #fff transparent transparent transparent;
  } */

/* Point the arrow upwards when the select box is open (active): */
.select-selected.select-arrow-active:after {
  border-color: transparent transparent #fff transparent;
  top: 7px;
}

/* style the items (options), including the selected item: */
.select-items div {
  color: #252733;
  cursor: pointer;
  background-color: #ffffff;
  padding: 6px;
}
.select-selected {
  color: #252733;
  cursor: pointer;
  background-color: #ffffff;
  border: 1px solid #e3e3e7;
  border-radius: 4px;
  padding: 14px 24px;
}

/* Style items (options): */
.select-items {
  position: absolute;
  background-color: DodgerBlue;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
  border: 1px solid #efdcdc;
  width: fit-content;
  width: -moz-fit-content;
  width: -webkit-fit-content;
  max-height: 50vh;
  overflow-x: auto;
  white-space: nowrap;
}

/* Hide the items when the select box is closed: */
.select-hide {
  display: none;
}

.select-items div:hover,
.same-as-selected {
  background-color: #0d40df !important;
  color: #ffffff !important;
}

.select-selected {
  box-shadow: 0px 3px 6px #00000029;
  padding: 0.7188rem 0 !important;
}

@media screen and (min-width: 768px) {
  .select-selected {
    padding: 1rem 0 !important;
  }
}