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;
}



/**
 * Exchange Reports views
 */
.exchange-reports-view {
  .report-type-edit {
    float: right;
  }

  .table-wrapper {
      width: 100%;
      overflow-x: auto;
      max-height: 26.5rem;
  }

  form {
    /*padding: 1rem;*/
    color: #fff;
    background-color: #1A1A1A;

    .date-form-wrapper {
      display: flex;
      flex-wrap: nowrap;
      gap: 1rem;
      justify-content: space-between;
    }

    .form-item {
      margin: 0 !important;
      .form-control {
        border: none;
        width: revert-rule;
      }
    }

    .form-submit {
      border: none !important;
      color: #fff;

      border-radius: 30px;
      padding: 0.75rem 1.75rem;

      &:hover {
        background-color: var(--active-brand-darker);
      }

      &[value="Apply"] {
        background-color: var(--active-brand-color);
      }
    }

    @media screen and (max-width: 768px) {
      .date-form-wrapper {
        display: block;
      }

      .form-item {
        margin-bottom: 1rem !important;
      }

      .form-submit {
        display: block;
        width: 100%;
        margin: 0;
      }
    }
  }
}

.ui-widget-overlay {
  z-index: 10;
}
.ui-widget.ui-widget-content {
  z-index: 11;
}

/* The rule above puts dialogs beneath the fixed .region-header (z-index: 22)
   and the admin toolbar, which then cover the Layout Paragraphs edit dialog.
   Restore Drupal's dialog z-index on the node edit/add forms; jQuery UI sets
   the overlay one below it and raises nested dialogs itself. */
body.entity-edit .ui-dialog.ui-widget.ui-widget-content,
body.entity-create .ui-dialog.ui-widget.ui-widget-content {
  z-index: 1260;
}