.status-picker-wrap {
  position: relative;
  width: 100%;
}

.status-picker-container {
  display: flex;
  flex-direction: column;
  margin: 10px;
}

.status-picker-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.status-picker-label {
  font-size: 20px;
  margin: 0;
}

.status-picker-error {
  color: red;
  font-size: 12px;
  margin: 0;
}

.status-picker-select {
  width: 100%;
  height: 45px;
  font-size: 16px;
  border-radius: 5px;
  padding-left: 10px;

  /* Cross-browser appearance reset */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  border: 1px solid rgb(151, 151, 151);
  background-color: #fff !important;

  padding-right: 36px;
  box-sizing: border-box;

  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;

  /* Custom arrow icon */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23222222' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
}

.status-picker-transparent {
  color: transparent;
}

/* Normal color when not using overlay */
.status-picker-select:not(.status-picker-transparent) {
  color: #222;
}

.status-picker-select option {
  color: #222 !important;
  background: #fff !important;
}

/* Firefox-specific fix */
@-moz-document url-prefix() {
  .status-picker-select.status-picker-transparent option {
    color: #222 !important;
  }
}

/* Safari dropdown text restore */
.status-picker-select::-webkit-dropdown {
  color: #222 !important;
  background: #fff !important;
}

.status-picker-overlay {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: yellow;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 16px;
  line-height: 20px;
  white-space: now
}