Reports

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
      integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <style>
      .container {
        width: 100%;
        z-index: -1;
      }

      .progressbar li {
        list-style-type: none;
        width: 10%;
        float: left;
        font-size: 12px;
        position: relative;
        text-align: center;
        color: #666666;
      }

      .progressbar li:after {
        width: 100%;
        height: 2px;
        content: "";
        position: absolute;
        background-color: #666666;
        top: 15px;
        left: -50%;
        display: block;
        z-index: -999999;
      }

      .progressbar li:before {
        width: 30px;
        height: 30px;
        content: "";
        line-height: 30px;
        border: 2px solid #666666;
        display: block;
        text-align: center;
        margin: 0 auto 10px auto;
        border-radius: 50%;
        background-color: white;
        z-index: 999999;
      }

      .progressbar li:first-child:after {
        content: none;
      }

      .progressbar li.active {
        color: green;
      }

      .progressbar li.active:before {
        color: green;
        border-color: green;
      }

      .progressbar li.checked::before {
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        content: "\f058";
        color: green;
        font-size: 25px;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .progressbar li.active + li:after {
        background-color: #808080;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <ul class="progressbar">
        <li class="checked">Step 1</li>
        <li class="active">Step 2</li>
        <li>Step 3</li>
        <li>Step 4</li>
        <li>Step 5</li>
      </ul>
    </div>
  </body>
</html>
79448465
