.vmsw-horizontal-timeline {
  height: calc(100% + 20px);
  padding-bottom: 20px;

  > ul:first-of-type {
    display: flex;
    height: 100%;
  }

  ul {
    > li {
      display: block;
      position: relative;
      padding: 0 5px;
      width: 20%;

      > a {
        display: block;
        padding: 10px 0px 10px 0px;
        text-decoration: none;

        &::before {
          content: "";
          position: absolute;
          width: calc(100% - 21px);
          height: 1px;
          background-color: $vl-shade-border;
          left: calc(45% + 21px);
          top: 21px;
          z-index: 3;
        }

        &::after {
          content: "";
          position: absolute;
          border: 2px solid $vl-shade-border;
          border-radius: 50%;
          top: 11px;
          left: 45%;
          width: 21px;
          height: 21px;
          z-index: 9999999;
          vertical-align: middle;
          text-align: center;
          line-height: normal;
          background-color: $vl-white;
        }

        p {
          position: relative;
          top: 25px;
          text-align: center;

          .desc {
            display: block;
            color: #808080;
            font-size: 1.4rem;
          }
        }

        @media screen and (max-width: 767px) {
          .desc {
            display: none;
          }
        }
      }

      &:last-child > a:before {
        display: none;
      }

      &.checked {
        > a {
          &::after {
            font-family: "FontAwesome";
            content: "\f00c";
            border-color: $vl-success-color;
            background-color: $vl-success-color;
            color: $vl-white;
          }
        }
      }

      &.failed {
        > a {
          &::after {
            font-family: "FontAwesome";
            content: "\f00d";
            border-color: $vl-error-color;
            background-color: $vl-error-color;
            color: $vl-white;
          }
        }
      }
    }
  }
}