body {
  /** This sets the active-brand-color to the original orange. **/
  /** When branding is enabled, the miax_branding_preprocess_html function prints new --active-brand-color. **/
  --miax-legacy-color: #f15822;
  --miax-brand-color-default: #f15822;
  --active-brand-color: var(--miax-legacy-color);
  --active-brand-color-background: color-mix(in srgb, var(--active-brand-color), white 80%)
}

.miax-tabs .tabs .nav-tabs .nav-item .nav-link.nav-tab {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

@media screen and (max-width: 768px) {
  .miax-tabs .tabs .nav-tabs .nav-item .nav-link.nav-tab {
    justify-content: left;
  }
}
@media screen and (min-width: 769px) {
  .miax-tabs .tabs .nav-tabs .nav-item .nav-link.nav-tab:hover,
  .miax-tabs .tabs .nav-tabs .nav-item .nav-link.nav-tab:active,
  .miax-tabs .tabs .nav-tabs .nav-item .nav-link.nav-tab:focus {
    background: var(--active-brand-darker);
  }
}
.miax-tabs .tabs .nav-tabs .nav-item {
  text-align: inherit;
}

.miax-tabs .tabs .nav-tabs .nav-item .nav-link.active {
  background-color: var(--active-brand-color) !important;
  border: 2px solid  var(--active-brand-color) !important;
}

.nav-link:hover, .media-library-view--widget .view-header a:hover, .nav-link:focus, .media-library-view--widget .view-header a:focus,
.navbar-nav .nav-link.show {
  color: var(--active-brand-color);
}

/** This is here because views does not add the icon-link.scss/css library. */
.miax-icon-link i.bi {
  padding-right: 0.5rem;
  font-size: 1.3rem;
}

.tag-wrapper {
  margin-bottom: 1rem;
}

.badge {
  background-color: var(--active-brand-color-background);
  color: var(--active-brand-color);
  padding: .6rem 1.7rem;
  font-weight: normal;
  border-radius: 0;
}

.report .badge {
  margin-left: 1rem;
}

/** change colors here so we don't have to load 2 versions. See miax_global_pl_preprocess_region **/
.mobile-logo .cls-1 {
  fill: #414042;
}

.mobile-logo .st4 {
  fill: #1a1a1a;
}

.tag-wrapper {
  margin-bottom: 1rem;
}

.badge {
  background-color: var(--active-brand-color-background);
  color: var(--active-brand-color);
  padding: .6rem 1.7rem;
  font-weight: normal;
  border-radius: 0;
}

.report .badge {
  margin-left: 1rem;
}

.tag-wrapper {
  margin-bottom: 1rem;
}

.badge {
  background-color: var(--active-brand-color-background);
  color: var(--active-brand-color);
  padding: .6rem 1.7rem;
  font-weight: normal;
  border-radius: 0;
}

.report .badge {
  margin-left: 1rem;
}

.form-check-input {
  appearance: initial;
}

.bg-dark {
  background-color: #000 !important;
}

.form-check-input {
  -webkit-appearance: auto;
  -moz-appearance: auto;
  appearance: auto;
}

.progress-marker {
  background: none !important;
  color: var(--active-brand-color) !important;
  margin: 0 !important;
}
.progress-tracker {
    display: flex;
    margin: 40px auto;
}
.progress-marker::before {
  content: "";  
}

.progress-step.is-complete .progress-marker::before,
.progress-step.is-active .progress-marker::before {
    background-color: var(--active-brand-color) !important;
}

.webform-progress-tracker .progress-step .progress-marker::after {
    background-color: #b6b6b6 !important;
}