/* Hide element visually, keeping it focusable (with keyboard) and available for screen-readers */
.FlowCardStep {
  position: relative;
  margin-bottom: 8px;
}
.FlowCardStep > .CardSection {
  padding-left: 56px;
}
.FlowCardStep > .CardSection:nth-child(2) {
  border-top: none;
  padding-top: 0;
  display: flex;
  flex-direction: column;
}
.FlowCardStep > .CardSection.FlowCardStep__footer {
  padding-top: 16px;
  padding-bottom: 16px;
  padding-right: 24px;
  padding-left: 56px;
  flex-direction: row-reverse;
  display: flex;
}
.FlowCardStep > .CardSection.FlowCardStep__header {
  padding: 24px;
  padding-bottom: 16px;
}
.FlowCardStep.FlowCardStep--headerOnly .FlowCardStep__header {
  padding: 24px;
}

.FlowCardStep--active {
  box-shadow: 0 2px 8px rgba(20, 20, 20, 0.1);
}
.FlowCardStep--active::before {
  content: "";
  width: 6px;
  height: 100%;
  background-color: var(--colorsStatusInfo, #0265dc);
  position: absolute;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  left: 0;
  top: 0;
}
.FlowCardStep--active.FlowCardStep--error::before {
  background-color: var(--colorsStatusCritical, #e13212);
}
.FlowCardStep--active.FlowCardStep--saved::before {
  background-color: var(--colorsStatusSuccess, #007a4d);
}
.FlowCardStep--active .FlowCardStep__header {
  border-bottom: none;
}
.FlowCardStep--active.FlowCardStep--headerOnly .FlowCardStep__header {
  border-bottom: 1px solid var(--colorsBorderGrey, #dfe0e1);
}

.FlowCardStep--error::before {
  content: "";
  width: 6px;
  height: 100%;
  background-color: var(--colorsStatusCritical, #e13212);
  position: absolute;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  left: 0;
  top: 0;
}

.FlowCardStep__header {
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 32px;
}

.FlowCardStep__statusWrapper {
  margin-right: 8px;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  display: flex;
}

.FlowCardStep__status {
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  display: flex;
  border-radius: 28px;
  font-size: 14px;
}
.FlowCardStep__status.FlowCardStep__status--active {
  background-color: var(--colorsStatusInfo, #0265dc);
  color: var(--colorsTextInverted, white);
}
.FlowCardStep__status.FlowCardStep__status--error {
  background-color: var(--colorsSurfaceCriticalSubdued, #ffece9);
}

.FlowCardStep--ordered .FlowCardStep__status {
  background-color: var(--colorsSurfaceGreyStronger, #bcbcbd);
  color: var(--colorsTextInverted, white);
}
.FlowCardStep--ordered .FlowCardStep__status--active {
  background-color: var(--colorsStatusInfo, #0265dc);
  color: var(--colorsTextInverted, white);
}
.FlowCardStep--ordered .FlowCardStep__status--custom {
  background-color: inherit;
  color: inherit;
}
.FlowCardStep--ordered .FlowCardStep__status--saved {
  background-color: var(--colorsSurfaceDefault, white);
  color: var(--colorsTextInverted, white);
}
.FlowCardStep--ordered .FlowCardStep__status--error {
  background-color: var(--colorsSurfaceCriticalSubdued, #ffece9);
}

.FlowCardStep__icon-active {
  color: var(--colorsTextInverted, white);
}

.FlowCardStep .FlowCardStep__indicator-active {
  color: var(--colorsStatusSuccess, #007a4d);
}
.FlowCardStep .FlowCardStep__indicator-complete {
  color: var(--colorsStatusSuccess, #007a4d);
}
.FlowCardStep .FlowCardStep__indicator-disabled {
  color: var(--colorsSurfaceGreyStronger, #bcbcbd);
}
.FlowCardStep .FlowCardStep__indicator-error {
  color: var(--colorsStatusCritical, #e13212);
}

/*# sourceMappingURL=FlowCardStep.css.map */