:root {
  --step-active-text: var(--secondary-color);
  --step-active-background: var(--secondary-color);
  --step-active-color: var(--light-color);

  --step-done-text: var(--primary-color);
  --step-done-background: var(--primary-color);
  --step-done-color: var(--light-color);

  --step-default-text: var(--primary-color);
  --step-default-background: var(--light-color);
  --step-default-color: var(--primary-color);
  --step-default-background-hover: var(--primary-color);
  --step-default-color-hover: var(--light-color);

  --step-disabled-text: var(--disable-color);
  --step-disabled-background: var(--muted-color);
}

.stepper-line {
  /*border-top-width: 3px;*/
  /*border-top-style: solid;*/
  /*flex: auto;*/
  /*height: 0;*/
  margin: 0 -16px;
  margin-left: -16px;
  min-width: 32px;
  height: 16px;
}
.stepper button.active{
  background-color:var(--step-active-background);
  color:var(--step-active-color);
}
.stepper button.disabled {
  background-color: var(--step-disabled-background);
  color: var(--step-disabled-text);
}
.stepper .stepper-text.active{
  color:var(--step-active-text);
}
.stepper button.done{
  background-color:var(--step-done-background);
  color:var(--step-done-color);
}
.stepper .stepper-text.done{
  color:var(--step-done-text);
}
.stepper button.default{
  background-color:var(--step-default-background);
  color:var(--step-default-color);
}
.stepper button.default:hover{
  background-color:var(--step-default-background-hover);
  color:var(--step-default-color-hover);
}
.stepper .stepper-text.default{
  color:var(--step-default-text);
}
.stepper .stepper-line {
  box-shadow: inset -3px -3px 6px rgba(255, 255, 255, 0.9), inset 3px 3px 6px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  opacity: 1;
  width: 100%;
}
.stepper .stepper-line  {
  box-shadow:inset -3px -3px 6px rgba(255, 255, 255, 0.9), inset 3px 3px 6px rgba(0, 0, 0, 0.1);
}
.stepper .stepper-line.active, .stepper .stepper-line.done  {
background-color: var(--step-done-background);
}
/*.stepper .stepper-line.default {*/
/*  background-color: var(--step-default-background);*/
/*}*/
.stepper .stepper-line.disabled {
  background-color: var(--muted-color);

}
.stepper .stepper-line-container{
  position: absolute; bottom: -4px; left: -90px; right: 0; width: 200px;
}