.bootstrap-select .btn {
    background-color: #fff !important;
    color: #777 !important;
    border: 1px solid #ccc !important;
}
.bootstrap-select.open .btn,
.bootstrap-select .btn:focus,
.bootstrap-select .btn:active,
.bootstrap-select .btn:hover {
    background-color: #fff !important;
    color: #777 !important;
    box-shadow: none !important;
}
.bootstrap-select .dropdown-menu {
    background-color: #fff !important;
}
.bootstrap-select .bs-searchbox input {
    background-color: #fff !important;
    color: #777 !important;
}
.bootstrap-select .dropdown-menu li a {
    color: #000 !important;
}
.bootstrap-select .dropdown-menu li a:hover {
    background-color: #f5f5f5 !important;
}
select {
    background-color: cadetblue !important;
    color: #FFF !important;
    -webkit-text-fill-color: #fff !important;
    caret-color: #fff !important;
}
select option {
     color: #fff !important;
}
/* target only select elements that use bootstrap classes */
select.form-control,
select.form-select {
  /* remove native arrow */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  /* keep text color unchanged (inherit from page) */
  color: inherit;

  /* custom white arrow (SVG inline) */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='white' d='M3 6l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.75rem center; /* adjust horizontal offset */
  background-size: 0.9rem;                    /* arrow size */
  padding-right: 2.5rem;                      /* space for arrow */
  /* optional: nicer look */
  background-color: transparent;
}

/* remove IE default arrow */
select.form-control::-ms-expand,
select.form-select::-ms-expand { display: none; }

/* small tweak for mobile so native select still usable */
@media (pointer: coarse) {
  select.form-control,
  select.form-select {
    background-image: none;   /* show native arrow on touch devices if preferred */
  }
}
.center-box {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60vh;
  text-align: center;
}

.form-group table td {
  padding-left: 2px;
  vertical-align: middle !important;
  padding-right: 5px;
}

.sub a.active {
    color: white !important;
    font-weight: 700;
}