.steps {
  width: 80%;
  margin: 25px auto;
  height: 5px;
  background: #eee;
  display: flex;
  justify-content: space-between;
  counter-reset: my-sec-counter; }
  .steps .node {
    width: 100%;
    height: 5px; }
    .steps .node span {
      margin-left: -10px;
      text-align: center;
      width: min-content;
      display: block;
      font-size: 12px;
      color: #CCC; }
    .steps .node:last-child {
      width: 28px; }
      .steps .node:last-child:before {
        right: 0; }
    .steps .node:before {
      content: "";
      width: 28px;
      height: 28px;
      display: block;
      border-radius: 20px;
      background: #cbcbcb;
      position: relative;
      margin-top: -11px;
      counter-increment: my-sec-counter;
      content: counter(my-sec-counter) "";
      text-align: center;
      line-height: 28px;
      color: #FFF;
      border: 5px solid #FFF;
      background: #eee;
      color: #CCC;
      top: -5px;
      left: -5px; }
    .steps .node.success {
      background: #008000; }
      .steps .node.success:before {
        background: #008000;
        content: "";
        font-family: system-ui;
        color: #FFF; }
      .steps .node.success:after {
        background: url(/static/frontend/images/icos/ico-check.svg?6d1ad9a92583) no-repeat;
        content: "";
        filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(72deg) brightness(109%) contrast(101%);
        height: 12px;
        top: -54px;
        left: 7px;
        position: relative;
        display: block; }
      .steps .node.success span {
        color: #008000; }
    .steps .node.now:before {
      background: var(--color-primary);
      border: 3px solid var(--color-primary);
      top: -3px;
      left: -3px;
      color: #FFF;
      font-weight: bold;
      font-size: 18px; }
    .steps .node.now span {
      color: var(--color-primary);
      margin-top: 3px; }

.steps .node.mygradient {
  background: green;
  background: linear-gradient(90deg, green 0%, #004cba 100%); }