.horstatarrow ul {
      margin: 20px 60px;
  }

 .horstatarrow ul li {
      display: inline-block;
      height: 30px;
      line-height: 30px;
      width: 120px;
      margin: 5px 2px 0 0;
      text-indent: 25px;
      position: relative;
  }

 .horstatarrow ul li:before {
      content: " ";
      height: 0;
      width: 0;
      position: absolute;
      left: 0px;
      border-style: solid;
      border-width: 15px 0 15px 15px;
      border-color: transparent transparent transparent #fff;
      z-index: 0;
  }

 .horstatarrow ul li:first-child:before {
      border-color: transparent;
  }

 .horstatarrow ul li a:after {
      content: " ";
      height: 0;
      width: 0;
      position: absolute;
      right: -15px;
      border-style: solid;
      border-width: 15px 0 15px 15px;
      border-color: transparent transparent transparent #ccc;
      z-index: 10;
  }

 .horstatarrow ul li.active a {
      background: orange;
      z-index: 100;
  }

 .horstatarrow ul li.active a:after {
      border-left-color: orange;
  }

 .horstatarrow ul li.ready a {
      background: #abeb49;
      z-index: 100;
  }

 .horstatarrow ul li.ready a:after {
      border-left-color: #abeb49;
  }

 .horstatarrow ul li a {
      display: block;
      background: #ccc;
  }

 .horstatarrow ul li a:hover {
      background: pink;
  }

 .horstatarrow ul li a:hover:after {
      border-color: transparent transparent transparent pink; 
  }
 .horstatarrow ul li span {
      text-indent: 5px !important; 
  }

 .horstatarrow .onit{
      color: #3ac231 !important ;
  }