.checkout-flow {
  display: flex;
  flex-direction: row;
  margin: 15px 0 13px 0;
  padding: 0;
  list-style: none;

  .checkout-step {
    flex: 1;
    text-align: center;
    padding: 10px 0;
    position: relative;

    .checkout-step-icon {
      border: 1px solid $text-muted;
      display: inline-block;
      width: 30px;
      height: 30px;
      line-height: 28px;
      border-radius: 15px;
      color: $text-muted;
      z-index: 200;
      background: white;
      position: relative;
    }

    .checkout-step-label {
      padding-top: 10px;
      color: $text-muted;
    }
    a .checkout-step-label {
      color: $brand-primary;
    }

    &:before, &:after {
      content: "";
      display: block;
      position: absolute;
      top: 22px;
      left: 0;
      width: 50%;
      height: 6px;
      background: $gray-lighter;
      z-index: 100;
    }
    &:after {
      left: 50%;
    }
    &.step-done:before, &.step-done:after, &.step-current:before {
      background: $brand-primary;
    }
    &:last-child:after,
    &:first-child:before {
      display: none;
    }

    &.step-done .checkout-step-icon {
      border: 1px solid $brand-primary;
      background: $brand-primary;
      color: white;
    }
    &.step-done .checkout-step-label a {
      color: $brand-primary;
    }

    &.step-current .checkout-step-icon {
      border: 1px solid $brand-primary;
      background: $brand-primary;
      color: white;
    }
    &.step-current .checkout-step-label {
      color: $brand-primary;
    }

    &:hover, &:active {
      text-decoration: none;
    }
  }
  a {
    text-decoration: none;
  }
}
@media(max-width: $screen-sm-max) {
  .checkout-step-label {
    /* visually hide, but keep for screen-readers */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
  }
}

.addons {
  fieldset {
    margin-top: 20px;
    &:first-child {
      margin-top: 0;
    }
  }
}


.panel-confirm {
  a {
    font-weight: bold;
  }
}
.form-order-change-main {
  border-bottom: 1px solid $hr-border;
  background: $panel-footer-bg;

  margin: -15px -15px 15px;
  padding: 15px 15px 0;
}
.profile-pre-select {
  background: $panel-footer-bg;
  margin-top: -15px;
  padding-top: 15px;
}
.profile-pre-select .addon-list {
  margin-bottom: 0;
}
.profile-select-container {
  display: none;
  border-bottom: 1px solid $hr-border;
  background: $panel-footer-bg;
  padding-bottom: 6px;

  margin-top: -15px;
  padding-top: 15px;
}
.profile-save-container {
  border-top: 1px solid $hr-border;
  padding: 15px;
  margin: 15px -15px;
  background: $panel-footer-bg;
}
.profile-scope:last-child .profile-save-container {
  margin-bottom: -15px;
}
.profile-save-container .help-block {
  margin-bottom: 0;
}
.single-profile-desc {
  margin-top: 0;
}
.profile-save, .profile-save-id {
  display: none;
  margin-bottom: 0;
  padding-bottom: .5em;
}
.profile-select-initialized .profile-select-container,
.profile-select-initialized .profile-save {
  display: block;
}
.profile-none-matched .profile-select-container {
  display: none;
}

.profile-add-on-legend {
  margin-bottom: 0;
  border-bottom: none;
}
.profile-add-on {
  padding: 15px;
  border: 1px solid $hr-border;
}
.panel-heading-flex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;

  .panel-heading-flex-gap {
    flex: 1;
  }
}

.wallet-loading + .wallet-loading {
  display: none;
}