label.required:after {
  content: "*";
  color: #dc3545 !important;
}

.multi-steps > li.is-active:before, .multi-steps > li.is-active ~ li:before {
    content: counter(stepNum);
    font-family: inherit;
    font-weight: 700;
}

.multi-steps > li.is-active:after, .multi-steps > li.is-active ~ li:after {
    background-color: #ededed;
}

.multi-steps {
    display: table;
    table-layout: fixed;
    width: 100%;
}

.multi-steps > li {
    counter-increment: stepNum;
    text-align: center;
    display: table-cell;
    position: relative;
    color: tomato;
}

.multi-steps > li:before {
    content: '\2713';
    display: block;
    margin: 0 auto 4px;
    background-color: #fff;
    width: 36px;
    height: 36px;
    line-height: 32px;
    text-align: center;
    font-weight: bold;
    border-width: 2px;
    border-style: solid;
    border-color: tomato;
    border-radius: 50%;
}

.multi-steps > li:after {
    content: '';
    height: 2px;
    width: 100%;
    background-color: tomato;
    position: absolute;
    top: 16px;
    left: 50%;
    z-index: -1;
}

.multi-steps > li:last-child:after {
    display: none;
}

.multi-steps > li.is-active:before {
    background-color: #fff;
    border-color: tomato;
}

.multi-steps > li.is-active ~ li {
    color: #808080;
}

.multi-steps > li.is-active ~ li:before {
    background-color: #ededed;
    border-color: #ededed;
}

.elp-accent-bar {
  background-color: #40bfb4;
  display: block;
  height: 6px;
  overflow: hidden;
  position: sticky;
  top: 0px;
  /*  N.B. .modal has z-index: 1050 */
  z-index: 1000;
}

.elp-accent-bar.active:before {
  animation: elp-accent-bar-active 2s cubic-bezier(0, 0.66, 1, 0.33) 0s infinite;
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.618) 12.5%, rgba(255, 255, 255, 0) 25%);
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  width: 100%;
}

@keyframes elp-accent-bar-active {
  0% { left: -75%; }
  100% { left: 150%; }
}

/* Creates a block whose contents behave like that of a form control. */
.btn-like,
.form-control-like {
  border-radius: 0.25rem;
  display: block;
  font-size: 1rem;
  line-height: 1.5;
  /* Form control padding + border */
  padding: calc(0.375rem + 1px) 0;
}

.btn-like {
  background-color: transparent;
  border: 1px solid transparent;
  padding: 0.375rem 0.75rem;
  text-align: center;
  vertical-align: middle;
}

/* Create a textarea-like control presized for the specified number of lines. */
.form-control-like-1l { min-height: calc(1 * 1.5em + 0.75em + 2px); }
.form-control-like-2l { min-height: calc(2 * 1.5em + 0.75em + 2px); }
.form-control-like-3l { min-height: calc(3 * 1.5em + 0.75em + 2px); }
.form-control-like-4l { min-height: calc(4 * 1.5em + 0.75em + 2px); }
.form-control-like-5l { min-height: calc(5 * 1.5em + 0.75em + 2px); }
.form-control-like-6l { min-height: calc(6 * 1.5em + 0.75em + 2px); }

/* Textareas behave differently to other elements in that they never expand vertically,
 * so height is effectively min-height. */
textarea.form-control-like-1l { height: calc(1 * 1.5em + 0.75em + 2px); }
textarea.form-control-like-2l { height: calc(2 * 1.5em + 0.75em + 2px); }
textarea.form-control-like-3l { height: calc(3 * 1.5em + 0.75em + 2px); }
textarea.form-control-like-4l { height: calc(4 * 1.5em + 0.75em + 2px); }
textarea.form-control-like-5l { height: calc(5 * 1.5em + 0.75em + 2px); }
textarea.form-control-like-6l { height: calc(6 * 1.5em + 0.75em + 2px); }

.form-control-like-bordered {
  border: 1px solid #ced4da;
  padding: 0.375rem 0.75rem;
}

.form-control-like-disabled {
  background-color: #e9ecef;
}

/* Fix bootstrap-select styling to look like other form controls. */
.bootstrap-select > .btn.dropdown-toggle:is(*, .bs-placeholder):is(*, :active, :focus, :hover) {
  background-color: #fff;
  border-radius: 0.25rem;
  border: 1px solid #ced4da;
  color: #495057;
  display: block;
  font-size: 1rem;
  line-height: 1.5;
  padding: 0.375rem calc(0.75rem + 0.3em) 0.375rem 0.75rem;
}

.bootstrap-select > .btn.dropdown-toggle:is(*, .bs-placeholder):is(*, :active, :focus, :hover).disabled {
  background-color: #e9ecef;
}

.bg-transparent { background-color: transparent !important; }
.fg-inherit { color: inherit !important; }
.fg-transparent { color: transparent !important; }
.border-none { border: none !important; }
.border-transparent { border-color: transparent !important; }
.text-pre { white-space: pre !important; }
.text-prewrap { white-space: pre-wrap !important; }
.width-100 { width: 100% !important; }
.width-auto { width: auto !important; }
