ul.webkima-el-metro-list {
  list-style: none;
  position: relative;
  padding: 0;

  &.show-line:before {
    content: '';
    position: absolute;
    width: 2px;
    height: 90%;
    border-right: dashed;
    top: 50%;
    transform: translateY(-50%);
  }

  li {
    counter-increment: step-counter;
    position: relative;
  }

  &.ordered > li:before {
    content: counter(step-counter);
  }

  &.ordered > li:before, &.icon > li > i {
    text-align: center;
    font-size: 1em;
    top: 0;
    right: 3px;
    position: absolute;
    border-radius: 9px;
  }

  &.ordered.small > li:before {
    line-height: 29px;
    width: 26px;
    height: 26px;
  }

  &.icon.small > li > i {
    line-height: 26px;
    width: 26px;
    height: 26px;
  }

  &.ordered.medium > li:before {
    line-height: 32px;
    width: 29px;
    height: 29px;
    font-size: 1.09em;
  }

  &.icon.medium > li > i {
    line-height: 29px;
    width: 29px;
    height: 29px;
    font-size: 1.09em;
  }

  &.ordered.large > li:before {
    line-height: 35px;
    width: 32px;
    height: 32px;
    font-size: 1.15em;
  }

  &.icon.large > li > i {
    line-height: 32px;
    width: 32px;
    height: 32px;
    font-size: 1.15em;
  }
}